fix: make background opaque (#4895)

* fix: remove old background-color flash (#4890)

remove old background-color

* fix: make background opaque

* refactor to fix dismissal bug and improve code quality

* fix merge errors

src/components/Tokens/TokensBanner.tsx

 import { Trans } from '@lingui/macro'
+import { useWeb3React } from '@web3-react/core'
 import { ElementName, Event, EventName } from 'analytics/constants'
 import { TraceEvent } from 'analytics/TraceEvent'
+import { chainIdToBackendName } from 'graphql/data/util'
 import { X } from 'react-feather'
 import { Link } from 'react-router-dom'
 import { useShowTokensPromoBanner } from 'state/user/hooks'
@@ -11,27 +13,32 @@ import { Z_INDEX } from 'theme/zIndex'
 import tokensPromoDark from '../../assets/images/tokensPromoDark.png'
 import tokensPromoLight from '../../assets/images/tokensPromoLight.png'
 
-const PopupContainer = styled(Link)<{ show: boolean }>`
-  position: fixed;
-  display: ${({ show }) => (show ? 'flex' : 'none')};
-  text-decoration: none;
-  flex-direction: column;
-  padding: 12px 16px 12px 20px;
-  gap: 8px;
+const BackgroundColor = styled(Link)<{ show: boolean }>`
+  background-color: ${({ theme }) => (theme.darkMode ? theme.backgroundScrim : '#FDF0F8')};
+  border: 1px solid ${({ theme }) => theme.backgroundOutline};
+  border-radius: 12px;
   bottom: 48px;
+  box-shadow: ${({ theme }) => theme.deepShadow};
+  display: ${({ show }) => (show ? 'block' : 'none')};
+  height: 88px;
+  position: fixed;
   right: clamp(0px, 1vw, 16px);
+  text-decoration: none;
   width: 320px;
-  height: 88px;
   z-index: ${Z_INDEX.sticky};
+`
+const PopupContainer = styled.div`
   background-color: ${({ theme }) => (theme.darkMode ? theme.backgroundScrim : opacify(60, '#FDF0F8'))};
-  color: ${({ theme }) => theme.textPrimary};
-  border: 1px solid ${({ theme }) => theme.backgroundOutline};
-  border-radius: 12px;
-  box-shadow: ${({ theme }) => theme.deepShadow};
-
   background-image: url(${({ theme }) => (theme.darkMode ? `${tokensPromoDark}` : `${tokensPromoLight}`)});
   background-size: cover;
   background-blend-mode: overlay;
+  border-radius: 12px;
+  color: ${({ theme }) => theme.textPrimary};
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  height: 100%;
+  padding: 12px 16px 12px 20px;
 
   transition: ${({
     theme: {
@@ -40,8 +47,8 @@ const PopupContainer = styled(Link)<{ show: boolean }>`
   }) => `${duration.slow} opacity ${timing.in}`};
 `
 const Header = styled.div`
-  display: flex;
   align-items: center;
+  display: flex;
   justify-content: space-between;
 `
 const HeaderText = styled.span`
@@ -60,34 +67,34 @@ const Description = styled.span`
 export default function TokensBanner() {
   const theme = useTheme()
   const [showTokensPromoBanner, setShowTokensPromoBanner] = useShowTokensPromoBanner()
-
-  const closeBanner = () => {
-    setShowTokensPromoBanner(false)
-  }
+  const { chainId: connectedChainId } = useWeb3React()
+  const chainName = chainIdToBackendName(connectedChainId).toLowerCase()
 
   return (
-    <TraceEvent events={[Event.onClick]} name={EventName.EXPLORE_BANNER_CLICKED} element={ElementName.EXPLORE_BANNER}>
-      <PopupContainer show={showTokensPromoBanner} to="/tokens" onClick={closeBanner}>
-        <Header>
-          <HeaderText>
-            <Trans>Explore top tokens on Uniswap</Trans>
-          </HeaderText>
-          <X
-            size={20}
-            color={theme.textSecondary}
-            onClick={(e) => {
-              e.preventDefault()
-              e.stopPropagation()
-              closeBanner()
-            }}
-            style={{ cursor: 'pointer' }}
-          />
-        </Header>
+    <BackgroundColor show={showTokensPromoBanner} to={`/tokens/${chainName}`}>
+      <TraceEvent events={[Event.onClick]} name={EventName.EXPLORE_BANNER_CLICKED} element={ElementName.EXPLORE_BANNER}>
+        <PopupContainer>
+          <Header>
+            <HeaderText>
+              <Trans>Explore Top Tokens on Uniswap</Trans>
+            </HeaderText>
+            <X
+              size={20}
+              color={theme.textSecondary}
+              onClick={(e) => {
+                e.preventDefault()
+                e.stopPropagation()
+                setShowTokensPromoBanner(false)
+              }}
+              style={{ cursor: 'pointer' }}
+            />
+          </Header>
 
-        <Description>
-          <Trans>Sort and filter assets across networks on the new Tokens page.</Trans>
-        </Description>
-      </PopupContainer>
-    </TraceEvent>
+          <Description>
+            <Trans>Sort and filter assets across networks on the new Tokens page.</Trans>
+          </Description>
+        </PopupContainer>
+      </TraceEvent>
+    </BackgroundColor>
   )
 }