fix: remove number from name in balances (#4711)

remove number

src/components/Tokens/TokenDetails/BalanceSummary.tsx

@@ -47,17 +47,17 @@ const TotalBalanceItem = styled.div`
 
 export default function BalanceSummary({
   address,
-  balanceNumber,
-  balanceUsdNumber,
+  balance,
+  balanceUsd,
 }: {
   address: string
-  balanceNumber?: number
-  balanceUsdNumber?: number
+  balance?: number
+  balanceUsd?: number
 }) {
   const token = useToken(address)
   const { loading, error } = useNetworkTokenBalances({ address })
 
-  if (loading || (!error && !balanceNumber && !balanceUsdNumber)) return null
+  if (loading || (!error && !balance && !balanceUsd)) return null
   return (
     <BalancesCard>
       {error ? (
@@ -72,8 +72,8 @@ export default function BalanceSummary({
           <TotalBalanceSection>
             Your balance
             <TotalBalance>
-              <TotalBalanceItem>{`${balanceNumber} ${token?.symbol}`}</TotalBalanceItem>
-              <TotalBalanceItem>{`$${balanceUsdNumber}`}</TotalBalanceItem>
+              <TotalBalanceItem>{`${balance} ${token?.symbol}`}</TotalBalanceItem>
+              <TotalBalanceItem>{`$${balanceUsd}`}</TotalBalanceItem>
             </TotalBalance>
           </TotalBalanceSection>
         </>

src/components/Tokens/TokenDetails/FooterBalanceSummary.tsx

@@ -132,13 +132,13 @@ const ErrorText = styled.span`
 export default function FooterBalanceSummary({
   address,
   networkBalances,
-  balanceNumber,
-  balanceUsdNumber,
+  balance,
+  balanceUsd,
 }: {
   address: string
   networkBalances: (JSX.Element | null)[] | null
-  balanceNumber?: number
-  balanceUsdNumber?: number
+  balance?: number
+  balanceUsd?: number
 }) {
   const tokenSymbol = useToken(address)?.symbol
   const [showMultipleBalances, setShowMultipleBalances] = useState(false)
@@ -161,15 +161,15 @@ export default function FooterBalanceSummary({
             </ErrorText>
           </ErrorState>
         ) : (
-          !!balanceNumber &&
-          !!balanceUsdNumber && (
+          !!balance &&
+          !!balanceUsd && (
             <BalanceInfo>
               {multipleBalances ? 'Balance on all networks' : `Your balance on ${networkNameIfOneBalance}`}
               <BalanceTotal>
                 <BalanceValue>
-                  {balanceNumber} {tokenSymbol}
+                  {balance} {tokenSymbol}
                 </BalanceValue>
-                <FiatValue>{`$${balanceUsdNumber}`}</FiatValue>
+                <FiatValue>{`$${balanceUsd}`}</FiatValue>
               </BalanceTotal>
               {multipleBalances && (
                 <ViewAll onClick={() => setShowMultipleBalances(!showMultipleBalances)}>

src/pages/TokenDetails/index.tsx

@@ -117,10 +117,10 @@ export default function TokenDetails() {
   const { data: networkData } = NetworkBalances(token?.address)
   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 balanceValue = useTokenBalance(account, token ?? undefined)
+  const balance = balanceValue ? formatToDecimal(balanceValue, Math.min(balanceValue.currency.decimals, 6)) : undefined
+  const balanceUsdValue = useStablecoinValue(balanceValue)?.toFixed(2)
+  const balanceUsd = balanceUsdValue ? parseFloat(balanceUsdValue) : undefined
 
   const chainsToList = useMemo(() => {
     let chainIds = [...L1_CHAIN_IDS, ...L2_CHAIN_IDS]
@@ -192,14 +192,14 @@ export default function TokenDetails() {
           <RightPanel>
             <Widget defaultToken={token ?? undefined} onReviewSwapClick={onReviewSwap} />
             {tokenWarning && <TokenSafetyMessage tokenAddress={token.address} warning={tokenWarning} />}
-            <BalanceSummary address={token.address} balanceNumber={balanceNumber} balanceUsdNumber={balanceUsdNumber} />
+            <BalanceSummary address={token.address} balance={balance} balanceUsd={balanceUsd} />
           </RightPanel>
           <Footer>
             <FooterBalanceSummary
               address={token.address}
               networkBalances={balancesByNetwork}
-              balanceNumber={balanceNumber}
-              balanceUsdNumber={balanceUsdNumber}
+              balance={balance}
+              balanceUsd={balanceUsd}
             />
           </Footer>
           <TokenSafetyModal