fix: show real balance in footer summary instead of dummy data (#4707)

real balances to footer

src/components/Tokens/TokenDetails/BalanceSummary.tsx

 import { Trans } from '@lingui/macro'
-import { useWeb3React } from '@web3-react/core'
-import { formatToDecimal } from 'analytics/utils'
 import { useToken } from 'hooks/Tokens'
 import { useNetworkTokenBalances } from 'hooks/useNetworkTokenBalances'
-import { useStablecoinValue } from 'hooks/useStablecoinPrice'
-import { useTokenBalance } from 'lib/hooks/useCurrencyBalance'
 import { AlertTriangle } from 'react-feather'
 import styled from 'styled-components/macro'
 
@@ -49,16 +45,18 @@ const TotalBalanceItem = styled.div`
   display: flex;
 `
 
-export default function BalanceSummary({ address }: { address: string }) {
+export default function BalanceSummary({
+  address,
+  balanceNumber,
+  balanceUsdNumber,
+}: {
+  address: string
+  balanceNumber?: number
+  balanceUsdNumber?: number
+}) {
   const token = useToken(address)
   const { loading, error } = useNetworkTokenBalances({ address })
 
-  const { account } = useWeb3React()
-  const balance = useTokenBalance(account, token ?? undefined)
-  const balanceNumber = balance ? formatToDecimal(balance, Math.min(balance.currency.decimals, 6)) : undefined
-  const balanceUsd = useStablecoinValue(balance)?.toFixed(2)
-  const balanceUsdNumber = balanceUsd ? parseFloat(balanceUsd) : undefined
-
   if (loading || (!error && !balanceNumber && !balanceUsdNumber)) return null
   return (
     <BalancesCard>

src/components/Tokens/TokenDetails/FooterBalanceSummary.tsx

@@ -132,11 +132,13 @@ const ErrorText = styled.span`
 export default function FooterBalanceSummary({
   address,
   networkBalances,
-  totalBalance,
+  balanceNumber,
+  balanceUsdNumber,
 }: {
   address: string
   networkBalances: (JSX.Element | null)[] | null
-  totalBalance: number
+  balanceNumber?: number
+  balanceUsdNumber?: number
 }) {
   const tokenSymbol = useToken(address)?.symbol
   const [showMultipleBalances, setShowMultipleBalances] = useState(false)
@@ -159,20 +161,23 @@ export default function FooterBalanceSummary({
             </ErrorText>
           </ErrorState>
         ) : (
-          <BalanceInfo>
-            {multipleBalances ? 'Balance on all networks' : `Your balance on ${networkNameIfOneBalance}`}
-            <BalanceTotal>
-              <BalanceValue>
-                {totalBalance} {tokenSymbol}
-              </BalanceValue>
-              <FiatValue>($107, 610.04)</FiatValue>
-            </BalanceTotal>
-            {multipleBalances && (
-              <ViewAll onClick={() => setShowMultipleBalances(!showMultipleBalances)}>
-                <Trans>{showMultipleBalances ? 'Hide' : 'View'} all balances</Trans>
-              </ViewAll>
-            )}
-          </BalanceInfo>
+          !!balanceNumber &&
+          !!balanceUsdNumber && (
+            <BalanceInfo>
+              {multipleBalances ? 'Balance on all networks' : `Your balance on ${networkNameIfOneBalance}`}
+              <BalanceTotal>
+                <BalanceValue>
+                  {balanceNumber} {tokenSymbol}
+                </BalanceValue>
+                <FiatValue>{`$${balanceUsdNumber}`}</FiatValue>
+              </BalanceTotal>
+              {multipleBalances && (
+                <ViewAll onClick={() => setShowMultipleBalances(!showMultipleBalances)}>
+                  <Trans>{showMultipleBalances ? 'Hide' : 'View'} all balances</Trans>
+                </ViewAll>
+              )}
+            </BalanceInfo>
+          )
         )}
         <Link to={`/swap?outputCurrency=${address}`}>
           <SwapButton>

src/pages/TokenDetails/index.tsx

 import { useWeb3React } from '@web3-react/core'
+import { formatToDecimal } from 'analytics/utils'
 import {
   LARGE_MEDIA_BREAKPOINT,
   MAX_WIDTH_MEDIA_BREAKPOINT,
@@ -23,7 +24,9 @@ import { checkWarning } from 'constants/tokenSafety'
 import { useTokenQuery } from 'graphql/data/Token'
 import { useIsUserAddedToken, useToken } from 'hooks/Tokens'
 import { useNetworkTokenBalances } from 'hooks/useNetworkTokenBalances'
+import { useStablecoinValue } from 'hooks/useStablecoinPrice'
 import { useAtomValue } from 'jotai/utils'
+import { useTokenBalance } from 'lib/hooks/useCurrencyBalance'
 import { useCallback, useMemo, useState } from 'react'
 import { ArrowLeft } from 'react-feather'
 import { useNavigate, useParams } from 'react-router-dom'
@@ -112,8 +115,12 @@ export default function TokenDetails() {
 
   /* network balance handling */
   const { data: networkData } = NetworkBalances(token?.address)
-  const { chainId: connectedChainId } = useWeb3React()
-  const totalBalance = 4.3 // dummy data
+  const { chainId: connectedChainId, account } = useWeb3React()
+
+  const balance = useTokenBalance(account, token ?? undefined)
+  const balanceNumber = balance ? formatToDecimal(balance, Math.min(balance.currency.decimals, 6)) : undefined
+  const balanceUsd = useStablecoinValue(balance)?.toFixed(2)
+  const balanceUsdNumber = balanceUsd ? parseFloat(balanceUsd) : undefined
 
   const chainsToList = useMemo(() => {
     let chainIds = [...L1_CHAIN_IDS, ...L2_CHAIN_IDS]
@@ -185,13 +192,14 @@ export default function TokenDetails() {
           <RightPanel>
             <Widget defaultToken={token ?? undefined} onReviewSwapClick={onReviewSwap} />
             {tokenWarning && <TokenSafetyMessage tokenAddress={token.address} warning={tokenWarning} />}
-            <BalanceSummary address={token.address} />
+            <BalanceSummary address={token.address} balanceNumber={balanceNumber} balanceUsdNumber={balanceUsdNumber} />
           </RightPanel>
           <Footer>
             <FooterBalanceSummary
               address={token.address}
-              totalBalance={totalBalance}
               networkBalances={balancesByNetwork}
+              balanceNumber={balanceNumber}
+              balanceUsdNumber={balanceUsdNumber}
             />
           </Footer>
           <TokenSafetyModal