revert: removing phase0 bug fixes temporarily (#4886)

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

This reverts commit 3e40a6f5.

* Revert "fix: add padding-bottom to TokenDetailsLayout (#4882)"

This reverts commit f91b48e2.

* Revert "fix: updates outputCurrency link in mobile balance footer (#4885)"

This reverts commit e340f405.

src/components/Tokens/TokenDetails/MobileBalanceSummaryFooter.tsx

@@ -82,8 +82,7 @@ export default function MobileBalanceSummaryFooter({
   tokenAmount,
   nativeCurrencyAmount,
   isNative,
-  tokenAddress,
-}: BalanceSummaryProps & { tokenAddress?: string }) {
+}: BalanceSummaryProps) {
   const balanceUsdValue = useStablecoinValue(tokenAmount)
   const nativeBalanceUsdValue = useStablecoinValue(nativeCurrencyAmount)
 
@@ -98,6 +97,8 @@ export default function MobileBalanceSummaryFooter({
     : undefined
   const nativeBalanceUsd = nativeBalanceUsdValue ? currencyAmountToPreciseFloat(nativeBalanceUsdValue) : undefined
 
+  const outputTokenAddress = tokenAmount?.currency.address ?? nativeCurrencyAmount?.wrapped.currency.address
+
   return (
     <Wrapper>
       {Boolean(formattedBalance !== undefined && !isNative && tokenAmount?.greaterThan(0)) && (
@@ -122,7 +123,7 @@ export default function MobileBalanceSummaryFooter({
           </BalanceTotal>
         </BalanceInfo>
       )}
-      <SwapButton to={`/swap?outputCurrency=${tokenAddress}`}>
+      <SwapButton to={`/swap?outputCurrency=${outputTokenAddress}`}>
         <Trans>Swap</Trans>
       </SwapButton>
     </Wrapper>

src/components/Tokens/TokensBanner.tsx

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

src/pages/TokenDetails/index.tsx

@@ -33,7 +33,7 @@ const Hr = styled.hr`
 `
 export const TokenDetailsLayout = styled.div`
   display: flex;
-  padding: 0 8px 52px;
+  padding: 0 8px;
   justify-content: center;
   width: 100%;
 
@@ -171,7 +171,6 @@ export default function TokenDetails() {
 
           <MobileBalanceSummaryFooter
             tokenAmount={tokenBalance}
-            tokenAddress={tokenQueryAddress}
             nativeCurrencyAmount={nativeCurrencyBalance}
             isNative={isNative}
           />

src/pages/Tokens/index.tsx

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