fix: handle backspace out of /tokens (#4879)

* fix: handle backspace out of /tokens

* simplify banner

* simplify banner more

src/components/Tokens/TokensBanner.tsx

@@ -1,8 +1,6 @@
 import { Trans } from '@lingui/macro'
-import { useWeb3React } from '@web3-react/core'
-import { chainIdToBackendName } from 'graphql/data/util'
 import { X } from 'react-feather'
-import { Link, useNavigate } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import { useShowTokensPromoBanner } from 'state/user/hooks'
 import styled, { useTheme } from 'styled-components/macro'
 import { opacify } from 'theme/utils'
@@ -11,9 +9,10 @@ import { Z_INDEX } from 'theme/zIndex'
 import tokensPromoDark from '../../assets/images/tokensPromoDark.png'
 import tokensPromoLight from '../../assets/images/tokensPromoLight.png'
 
-const PopupContainer = styled.div<{ show: boolean }>`
+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;
@@ -43,37 +42,31 @@ const Header = styled.div`
   align-items: center;
   justify-content: space-between;
 `
-const HeaderText = styled(Link)`
+const HeaderText = styled.span`
   font-weight: 600;
   font-size: 14px;
   line-height: 20px;
-  text-decoration: none;
-  color: ${({ theme }) => theme.textPrimary};
 `
-const Description = styled(Link)`
+
+const Description = styled.span`
   font-weight: 400;
   font-size: 12px;
   line-height: 16px;
   width: 75%;
-  text-decoration: none;
-  color: ${({ theme }) => theme.textPrimary};
 `
 
 export default function TokensBanner() {
   const theme = useTheme()
   const [showTokensPromoBanner, setShowTokensPromoBanner] = useShowTokensPromoBanner()
-  const navigate = useNavigate()
-  const { chainId: connectedChainId } = useWeb3React()
-  const chainName = chainIdToBackendName(connectedChainId).toLowerCase()
 
-  const navigateToExplorePage = () => {
-    navigate(`/tokens/${chainName}`)
+  const closeBanner = () => {
+    setShowTokensPromoBanner(false)
   }
 
   return (
-    <PopupContainer show={showTokensPromoBanner} onClick={navigateToExplorePage}>
+    <PopupContainer show={showTokensPromoBanner} to="/tokens" onClick={closeBanner}>
       <Header>
-        <HeaderText to={'/tokens'}>
+        <HeaderText>
           <Trans>Explore Top Tokens on Uniswap</Trans>
         </HeaderText>
         <X
@@ -82,13 +75,13 @@ export default function TokensBanner() {
           onClick={(e) => {
             e.preventDefault()
             e.stopPropagation()
-            setShowTokensPromoBanner(false)
+            closeBanner()
           }}
           style={{ cursor: 'pointer' }}
         />
       </Header>
 
-      <Description to={'/tokens'}>
+      <Description>
         <Trans>Sort and filter assets across networks on the new Tokens page.</Trans>
       </Description>
     </PopupContainer>

src/pages/Tokens/index.tsx

@@ -85,13 +85,13 @@ const Tokens = () => {
 
   useEffect(() => {
     if (!chainNameParam) {
-      navigate(`/tokens/${connectedChainName.toLowerCase()}`)
+      navigate(`/tokens/${connectedChainName.toLowerCase()}`, { replace: true })
     }
   }, [chainNameParam, connectedChainName, navigate])
 
   useOnGlobalChainSwitch((chain) => {
     if (isValidBackendChainName(chain)) {
-      navigate(`/tokens/${chain.toLowerCase()}`)
+      navigate(`/tokens/${chain.toLowerCase()}`, { replace: true })
     }
   })