revert: add back phase0 bug fixes (#4888)

* Revert "revert: removing phase0 bug fixes temporarily (#4886)"

This reverts commit 06291a15.

* use token amount

* Revert "use token amount"

This reverts commit f47c00358b29cfa9886bf4e490df4bf70b88e648.

* dont render if empty

src/components/Tokens/TokenDetails/MobileBalanceSummaryFooter.tsx

@@ -82,7 +82,8 @@ export default function MobileBalanceSummaryFooter({
   tokenAmount,
   nativeCurrencyAmount,
   isNative,
-}: BalanceSummaryProps) {
+  tokenAddress,
+}: BalanceSummaryProps & { tokenAddress: string }) {
   const balanceUsdValue = useStablecoinValue(tokenAmount)
   const nativeBalanceUsdValue = useStablecoinValue(nativeCurrencyAmount)
 
@@ -97,8 +98,6 @@ 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)) && (
@@ -123,7 +122,7 @@ export default function MobileBalanceSummaryFooter({
           </BalanceTotal>
         </BalanceInfo>
       )}
-      <SwapButton to={`/swap?outputCurrency=${outputTokenAddress}`}>
+      <SwapButton to={`/swap?outputCurrency=${tokenAddress}`}>
         <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, 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/TokenDetails/index.tsx

@@ -33,7 +33,7 @@ const Hr = styled.hr`
 `
 export const TokenDetailsLayout = styled.div`
   display: flex;
-  padding: 0 8px;
+  padding: 0 8px 52px;
   justify-content: center;
   width: 100%;
 
@@ -169,11 +169,14 @@ export default function TokenDetails() {
             />
           </RightPanel>
 
+          {tokenQueryAddress && (
             <MobileBalanceSummaryFooter
               tokenAmount={tokenBalance}
+              tokenAddress={tokenQueryAddress}
               nativeCurrencyAmount={nativeCurrencyBalance}
               isNative={isNative}
             />
+          )}
 
           <TokenSafetyModal
             isOpen={isBlockedToken || !!continueSwap}

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 })
     }
   })