refactor: remove unnecessary code (#1885)

OffchainLabs · Sep 12, 2024 · da4e2ad · da4e2ad
1 parent 74245dd
commit da4e2ad
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 54 deletions.
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx
@@ -1,13 +1,11 @@
 import React, { useEffect, useMemo } from 'react'
 import { ArrowsUpDownIcon, ArrowDownIcon } from '@heroicons/react/24/outline'
 import { twMerge } from 'tailwind-merge'
-import { BigNumber, utils } from 'ethers'
+import { utils } from 'ethers'
 import { Chain, useAccount } from 'wagmi'
 import { useMedia } from 'react-use'
 
-import { Loader } from '../common/atoms/Loader'
 import { useAppState } from '../../state'
-import { formatAmount } from '../../util/NumberUtils'
 import { getExplorerUrl, isNetwork } from '../../util/networks'
 import { useDestinationAddressStore } from './AdvancedSettings'
 import { ExternalLink } from '../common/ExternalLink'
@@ -19,7 +17,6 @@ import {
   isTokenSepoliaUSDC,
   isTokenMainnetUSDC
 } from '../../util/TokenUtils'
-import { ether } from '../../constants'
 import { useUpdateUSDCBalances } from '../../hooks/CCTP/useUpdateUSDCBalances'
 import { useNativeCurrency } from '../../hooks/useNativeCurrency'
 import { useNetworks } from '../../hooks/useNetworks'
@@ -30,7 +27,6 @@ import { useUpdateUSDCTokenData } from './TransferPanelMain/hooks'
 import { useBalances } from '../../hooks/useBalances'
 import { DestinationNetworkBox } from './TransferPanelMain/DestinationNetworkBox'
 import { SourceNetworkBox } from './TransferPanelMain/SourceNetworkBox'
-import { NetworkType } from './TransferPanelMain/utils'
 
 export function SwitchNetworksButton(
   props: React.ButtonHTMLAttributes<HTMLButtonElement>
@@ -201,33 +197,6 @@ export function NetworkContainer({
   )
 }
 
-function StyledLoader() {
-  return <Loader color="white" size="small" />
-}
-
-export function ETHBalance({
-  balance,
-  prefix = '',
-  on
-}: {
-  balance: BigNumber | null
-  prefix?: string
-  on: NetworkType
-}) {
-  if (!balance) {
-    return <StyledLoader />
-  }
-
-  return (
-    <p>
-      <span className="font-light">{prefix}</span>
-      <span aria-label={`ETH balance amount on ${on}`}>
-        {formatAmount(balance, { symbol: ether.symbol })}
-      </span>
-    </p>
-  )
-}
-
 export function BalancesContainer({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex flex-col flex-nowrap items-end break-all text-sm tracking-[.25px] text-white sm:text-lg">

diff --git a/...-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx b/...-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
@@ -1,11 +1,9 @@
-import { constants, utils } from 'ethers'
-import { useAccount } from 'wagmi'
+import { constants } from 'ethers'
 
 import { useNetworks } from '../../../hooks/useNetworks'
 import { useDestinationAddressStore } from '../AdvancedSettings'
 import {
   BalancesContainer,
-  ETHBalance,
   NetworkContainer,
   NetworkListboxPlusBalancesContainer
 } from '../TransferPanelMain'
@@ -28,6 +26,9 @@ import {
 import { useNativeCurrencyBalances } from './useNativeCurrencyBalances'
 import { useIsBatchTransferSupported } from '../../../hooks/TransferPanel/useIsBatchTransferSupported'
 import { useArbQueryParams } from '../../../hooks/useArbQueryParams'
+import { ether } from '../../../constants'
+import { formatAmount } from '../../../util/NumberUtils'
+import { Loader } from '../../common/atoms/Loader'
 
 function NativeCurrencyDestinationBalance({ prefix }: { prefix?: string }) {
   const nativeCurrencyBalances = useNativeCurrencyBalances()
@@ -47,13 +48,28 @@ function NativeCurrencyDestinationBalance({ prefix }: { prefix?: string }) {
       />
     )
   }
+  if (!nativeCurrencyBalances.destinationBalance) {
+    return (
+      <p className="flex items-center gap-1">
+        <span className="font-light">{prefix}</span>
+        <Loader color="white" size="small" />
+      </p>
+    )
+  }
 
   return (
-    <ETHBalance
-      balance={nativeCurrencyBalances.destinationBalance}
-      on={isDepositMode ? NetworkType.childChain : NetworkType.parentChain}
-      prefix={prefix}
-    />
+    <p>
+      <span className="font-light">{prefix}</span>
+      <span
+        aria-label={`ETH balance amount on ${
+          isDepositMode ? NetworkType.childChain : NetworkType.parentChain
+        }`}
+      >
+        {formatAmount(nativeCurrencyBalances.destinationBalance, {
+          symbol: ether.symbol
+        })}
+      </span>
+    </p>
   )
 }
 
@@ -138,12 +154,10 @@ export function DestinationNetworkBox({
 }: {
   showUsdcSpecificInfo: boolean
 }) {
-  const { address: walletAddress } = useAccount()
   const [networks] = useNetworks()
   const { destinationAddress } = useDestinationAddressStore()
   const [{ amount2 }] = useArbQueryParams()
   const isBatchTransferSupported = useIsBatchTransferSupported()
-  const destinationAddressOrWalletAddress = destinationAddress || walletAddress
   const [
     destinationNetworkSelectionDialogProps,
     openDestinationNetworkSelectionDialog
@@ -161,17 +175,12 @@ export function DestinationNetworkBox({
             onClick={openDestinationNetworkSelectionDialog}
           />
           <BalancesContainer>
-            {destinationAddressOrWalletAddress &&
-              utils.isAddress(destinationAddressOrWalletAddress) && (
-                <>
-                  <DestinationNetworkBalance
-                    showUsdcSpecificInfo={showUsdcSpecificInfo}
-                  />
-                  {isBatchTransferSupported && Number(amount2) > 0 && (
-                    <NativeCurrencyDestinationBalance />
-                  )}
-                </>
-              )}
+            <DestinationNetworkBalance
+              showUsdcSpecificInfo={showUsdcSpecificInfo}
+            />
+            {isBatchTransferSupported && Number(amount2) > 0 && (
+              <NativeCurrencyDestinationBalance />
+            )}
           </BalancesContainer>
         </NetworkListboxPlusBalancesContainer>
         <EstimatedGas chainType="destination" />

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/TokenBalance.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/TokenBalance.tsx
@@ -28,7 +28,12 @@ export function TokenBalance({
   }
 
   if (!balance) {
-    return <Loader color="white" size="small" />
+    return (
+      <p className="flex items-center gap-1">
+        <span className="font-light">{prefix}</span>
+        <Loader color="white" size="small" />
+      </p>
+    )
   }
 
   const tokenSymbol = tokenSymbolOverride ?? forToken.symbol