From f6b08e8ed1f8a5cf02c2a78278a1c23fbfb773c7 Mon Sep 17 00:00:00 2001
From: Jordan Frankfurt <jordanwfrankfurt@gmail.com>
Date: Thu, 13 Oct 2022 13:33:40 -0500
Subject: [PATCH] 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 | 91 ++++++++++++++------------
 1 file changed, 49 insertions(+), 42 deletions(-)

diff --git a/src/components/Tokens/TokensBanner.tsx b/src/components/Tokens/TokensBanner.tsx
index 329540362e..1a2349f2fe 100644
--- a/src/components/Tokens/TokensBanner.tsx
+++ b/src/components/Tokens/TokensBanner.tsx
@@ -1,6 +1,8 @@
 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;
-  bottom: 48px;
-  right: clamp(0px, 1vw, 16px);
-  width: 320px;
-  height: 88px;
-  z-index: ${Z_INDEX.sticky};
-  background-color: ${({ theme }) => (theme.darkMode ? theme.backgroundScrim : opacify(60, '#FDF0F8'))};
-  color: ${({ theme }) => theme.textPrimary};
+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;
+  z-index: ${Z_INDEX.sticky};
+`
+const PopupContainer = styled.div`
+  background-color: ${({ theme }) => (theme.darkMode ? theme.backgroundScrim : opacify(60, '#FDF0F8'))};
   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>
   )
 }