From 05ba0e4a667737ec981f7f082f881c53717d7bac Mon Sep 17 00:00:00 2001
From: Nate Wienert <natewienert@gmail.com>
Date: Thu, 14 Sep 2023 07:49:59 -1000
Subject: [PATCH] =?UTF-8?q?fix:=20make=20popups=20appear=20above=20drawer?=
 =?UTF-8?q?=20and=20near=20top=20conditionally=20only=20=E2=80=A6=20(#7201?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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 | 37 +++++++++++++--------------------
 src/state/logging.ts            |  1 -
 src/state/reducerTypeTest.ts    |  1 -
 src/state/user/hooks.tsx        |  5 -----
 src/state/user/reducer.ts       |  2 --
 5 files changed, 14 insertions(+), 32 deletions(-)

diff --git a/src/components/Popups/index.tsx b/src/components/Popups/index.tsx
index 0b673c14bb..8715212600 100644
--- a/src/components/Popups/index.tsx
+++ b/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} />
diff --git a/src/state/logging.ts b/src/state/logging.ts
index 93d01352f3..f374b1a3cc 100644
--- a/src/state/logging.ts
+++ b/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,
diff --git a/src/state/reducerTypeTest.ts b/src/state/reducerTypeTest.ts
index 5db47946ae..c3550339fa 100644
--- a/src/state/reducerTypeTest.ts
+++ b/src/state/reducerTypeTest.ts
@@ -85,7 +85,6 @@ interface ExpectedUserState {
     }
   }
   timestamp: number
-  URLWarningVisible: boolean
   hideBaseWalletBanner: boolean
   showSurveyPopup?: boolean
   disabledUniswapX?: boolean
diff --git a/src/state/user/hooks.tsx b/src/state/user/hooks.tsx
index ef5e36b1fc..c88c273c3e 100644
--- a/src/state/user/hooks.tsx
+++ b/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)
diff --git a/src/state/user/reducer.ts b/src/state/user/reducer.ts
index d717e7f413..fa0529e471 100644
--- a/src/state/user/reducer.ts
+++ b/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,
 }