fix: make popups appear above drawer and near top conditionally only … (#7201)

* fix: make popups appear above drawer and near top conditionally only when drawer is open

* remove logic around top bar

src/components/Popups/index.tsx

@@ -1,10 +1,8 @@
-import { ChainId } from '@uniswap/sdk-core'
-import { useWeb3React } from '@web3-react/core'
+import { useActivePopups } from 'state/application/hooks'
 import styled from 'styled-components'
-import { MEDIA_WIDTHS } from 'theme'
+import { Z_INDEX } from 'theme/zIndex'
 
-import { useActivePopups } from '../../state/application/hooks'
-import { useURLWarningVisible } from '../../state/user/hooks'
+import { useAccountDrawer } from '../AccountDrawer'
 import { AutoColumn } from '../Column'
 import ClaimPopup from './ClaimPopup'
 import PopupItem from './PopupItem'
@@ -14,6 +12,8 @@ const MobilePopupWrapper = styled.div`
   max-width: 100%;
   margin: 0 auto;
   display: none;
+  padding-left: 20px;
+  padding-right: 20px;
 
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
     display: block;
@@ -33,40 +33,31 @@ const MobilePopupInner = styled.div`
   }
 `
 
-const StopOverflowQuery = `@media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToMedium + 1}px) and (max-width: ${
-  MEDIA_WIDTHS.deprecated_upToMedium + 500
-}px)`
-
-const FixedPopupColumn = styled(AutoColumn)<{ extraPadding: boolean; xlPadding: boolean }>`
+const FixedPopupColumn = styled(AutoColumn)<{
+  drawerOpen: boolean
+}>`
   position: fixed;
-  top: ${({ extraPadding }) => (extraPadding ? '72px' : '64px')};
+  top: ${({ drawerOpen }) => `${64 + (drawerOpen ? -50 : 0)}px`};
   right: 1rem;
   max-width: 348px !important;
   width: 100%;
-  z-index: 3;
+  z-index: ${Z_INDEX.modal};
+  transition: ${({ theme }) => `top ${theme.transition.timing.inOut} ${theme.transition.duration.slow}`};
 
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
     display: none;
   `};
-
-  ${StopOverflowQuery} {
-    top: ${({ extraPadding, xlPadding }) => (xlPadding ? '72px' : extraPadding ? '72px' : '64px')};
-  }
 `
 
 export default function Popups() {
+  const [isAccountDrawerOpen] = useAccountDrawer()
+
   // get all popups
   const activePopups = useActivePopups()
 
-  const urlWarningActive = useURLWarningVisible()
-
-  // need extra padding if network is not L1 Ethereum
-  const { chainId } = useWeb3React()
-  const isNotOnMainnet = Boolean(chainId && chainId !== ChainId.MAINNET)
-
   return (
     <>
-      <FixedPopupColumn gap="20px" extraPadding={urlWarningActive} xlPadding={isNotOnMainnet} data-testid="popups">
+      <FixedPopupColumn gap="20px" drawerOpen={isAccountDrawerOpen} data-testid="popups">
         <ClaimPopup />
         {activePopups.map((item) => (
           <PopupItem key={item.key} content={item.content} popKey={item.key} removeAfterMs={item.removeAfterMs} />

src/state/logging.ts

@@ -43,7 +43,6 @@ export const sentryEnhancer = Sentry.createReduxEnhancer({
         userSlippageToleranceHasBeenMigratedToAuto: user.userSlippageToleranceHasBeenMigratedToAuto,
         userDeadline: user.userDeadline,
         timestamp: user.timestamp,
-        URLWarningVisible: user.URLWarningVisible,
         showSurveyPopup: user.showSurveyPopup,
       },
       transactions,

src/state/reducerTypeTest.ts

@@ -85,7 +85,6 @@ interface ExpectedUserState {
     }
   }
   timestamp: number
-  URLWarningVisible: boolean
   hideBaseWalletBanner: boolean
   showSurveyPopup?: boolean
   disabledUniswapX?: boolean

src/state/user/hooks.tsx

@@ -12,7 +12,6 @@ import { UserAddedToken } from 'types/tokens'
 
 import { BASES_TO_TRACK_LIQUIDITY_FOR, PINNED_PAIRS } from '../../constants/routing'
 import { useDefaultActiveTokens } from '../../hooks/Tokens'
-import { AppState } from '../reducer'
 import {
   addSerializedPair,
   addSerializedToken,
@@ -207,10 +206,6 @@ export function usePairAdder(): (pair: Pair) => void {
   )
 }
 
-export function useURLWarningVisible(): boolean {
-  return useAppSelector((state: AppState) => state.user.URLWarningVisible)
-}
-
 export function useHideBaseWalletBanner(): [boolean, () => void] {
   const dispatch = useAppDispatch()
   const hideBaseWalletBanner = useAppSelector((state) => state.user.hideBaseWalletBanner)

src/state/user/reducer.ts

@@ -45,7 +45,6 @@ export interface UserState {
   }
 
   timestamp: number
-  URLWarningVisible: boolean
   hideBaseWalletBanner: boolean
   disabledUniswapX?: boolean
   // undefined means has not gone through A/B split yet
@@ -67,7 +66,6 @@ export const initialState: UserState = {
   tokens: {},
   pairs: {},
   timestamp: currentTimestamp(),
-  URLWarningVisible: true,
   hideBaseWalletBanner: false,
   showSurveyPopup: undefined,
 }