refactor: move customFeeTokenBalances into a hook (#1872)

packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx

@@ -27,7 +27,6 @@ import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { TransferDisabledDialog } from './TransferDisabledDialog'
 import { getBridgeUiConfigForChain } from '../../util/bridgeUiConfig'
 import { useUpdateUSDCTokenData } from './TransferPanelMain/hooks'
-import { Balances } from '../../hooks/TransferPanel/useSelectedTokenBalances'
 import { useBalances } from '../../hooks/useBalances'
 import { DestinationNetworkBox } from './TransferPanelMain/DestinationNetworkBox'
 import { SourceNetworkBox } from './TransferPanelMain/SourceNetworkBox'
@@ -268,13 +267,7 @@ export function TransferPanelMain() {
 
   const destinationAddressOrWalletAddress = destinationAddress || walletAddress
 
-  const {
-    ethParentBalance,
-    erc20ParentBalances,
-    updateErc20ParentBalances,
-    ethChildBalance,
-    updateErc20ChildBalances
-  } = useBalances()
+  const { updateErc20ParentBalances, updateErc20ChildBalances } = useBalances()
 
   const { updateUSDCBalances } = useUpdateUSDCBalances({
     walletAddress: destinationAddressOrWalletAddress
@@ -319,19 +312,6 @@ export function TransferPanelMain() {
     isTeleportMode
   ])
 
-  // TODO: move into a hook (FS-714)
-  // when customFeeTokenBalances is moved to an independent hook file, use `setAmount` directly in useMaxAmount and do not pass `customFeeTokenBalances` as a prop
-  const customFeeTokenBalances: Balances = useMemo(() => {
-    if (!nativeCurrency.isCustom) {
-      return { parentBalance: ethParentBalance, childBalance: ethChildBalance }
-    }
-
-    return {
-      parentBalance: erc20ParentBalances?.[nativeCurrency.address] ?? null,
-      childBalance: ethChildBalance
-    }
-  }, [nativeCurrency, ethParentBalance, ethChildBalance, erc20ParentBalances])
-
   const showUSDCSpecificInfo =
     !isTeleportMode &&
     ((isTokenMainnetUSDC(selectedToken?.address) && isArbitrumOne) ||
@@ -348,17 +328,11 @@ export function TransferPanelMain() {
 
   return (
     <div className="flex flex-col pb-6 lg:gap-y-1">
-      <SourceNetworkBox
-        customFeeTokenBalances={customFeeTokenBalances}
-        showUsdcSpecificInfo={showUSDCSpecificInfo}
-      />
+      <SourceNetworkBox showUsdcSpecificInfo={showUSDCSpecificInfo} />
 
       <SwitchNetworksButton />
 
-      <DestinationNetworkBox
-        customFeeTokenBalances={customFeeTokenBalances}
-        showUsdcSpecificInfo={showUSDCSpecificInfo}
-      />
+      <DestinationNetworkBox showUsdcSpecificInfo={showUSDCSpecificInfo} />
 
       <TransferDisabledDialog />
     </div>

packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx

@@ -18,22 +18,18 @@ import { useBalances } from '../../../hooks/useBalances'
 import { CommonAddress } from '../../../util/CommonAddressUtils'
 import { isNetwork } from '../../../util/networks'
 import { EstimatedGas } from '../EstimatedGas'
-import {
-  Balances,
-  useSelectedTokenBalances
-} from '../../../hooks/TransferPanel/useSelectedTokenBalances'
+import { useSelectedTokenBalances } from '../../../hooks/TransferPanel/useSelectedTokenBalances'
 import { useNativeCurrency } from '../../../hooks/useNativeCurrency'
 import { useDialog } from '../../common/Dialog'
 import {
   NetworkButton,
   NetworkSelectionContainer
 } from '../../common/NetworkSelectionContainer'
+import { useNativeCurrencyBalances } from './useNativeCurrencyBalances'
 
 function DestinationNetworkBalance({
-  customFeeTokenBalances,
   showUsdcSpecificInfo
 }: {
-  customFeeTokenBalances: Balances
   showUsdcSpecificInfo: boolean
 }) {
   const {
@@ -46,6 +42,7 @@ function DestinationNetworkBalance({
 
   const { ethParentBalance, ethChildBalance, erc20ChildBalances } =
     useBalances()
+  const nativeCurrencyBalances = useNativeCurrencyBalances()
   const selectedTokenBalances = useSelectedTokenBalances()
 
   const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
@@ -97,11 +94,7 @@ function DestinationNetworkBalance({
     return (
       <TokenBalance
         on={isDepositMode ? NetworkType.childChain : NetworkType.parentChain}
-        balance={
-          isDepositMode
-            ? customFeeTokenBalances.childBalance
-            : customFeeTokenBalances.parentBalance
-        }
+        balance={nativeCurrencyBalances.destinationBalance}
         forToken={nativeCurrency}
         prefix="Balance: "
       />
@@ -110,18 +103,16 @@ function DestinationNetworkBalance({
 
   return (
     <ETHBalance
-      balance={isDepositMode ? ethChildBalance : ethParentBalance}
+      balance={nativeCurrencyBalances.destinationBalance}
       on={isDepositMode ? NetworkType.childChain : NetworkType.parentChain}
       prefix="Balance: "
     />
   )
 }
 
 export function DestinationNetworkBox({
-  customFeeTokenBalances,
   showUsdcSpecificInfo
 }: {
-  customFeeTokenBalances: Balances
   showUsdcSpecificInfo: boolean
 }) {
   const { address: walletAddress } = useAccount()
@@ -148,7 +139,6 @@ export function DestinationNetworkBox({
             {destinationAddressOrWalletAddress &&
               utils.isAddress(destinationAddressOrWalletAddress) && (
                 <DestinationNetworkBalance
-                  customFeeTokenBalances={customFeeTokenBalances}
                   showUsdcSpecificInfo={showUsdcSpecificInfo}
                 />
               )}

packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx

@@ -11,7 +11,6 @@ import { useAppState } from '../../../state'
 import { useNetworks } from '../../../hooks/useNetworks'
 import { useNativeCurrency } from '../../../hooks/useNativeCurrency'
 import { useNetworksRelationship } from '../../../hooks/useNetworksRelationship'
-import { Balances } from '../../../hooks/TransferPanel/useSelectedTokenBalances'
 import {
   ETH_BALANCE_ARTICLE_LINK,
   USDC_LEARN_MORE_LINK
@@ -32,10 +31,8 @@ import { useSelectedTokenDecimals } from '../../../hooks/TransferPanel/useSelect
 import { useBalanceOnSourceChain } from '../../../hooks/useBalanceOnSourceChain'
 
 export function SourceNetworkBox({
-  customFeeTokenBalances,
   showUsdcSpecificInfo
 }: {
-  customFeeTokenBalances: Balances
   showUsdcSpecificInfo: boolean
 }) {
   const [networks] = useNetworks()
@@ -47,9 +44,7 @@ export function SourceNetworkBox({
   const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
   const [{ amount, amount2 }] = useArbQueryParams()
   const { setAmount, setAmount2 } = useSetInputAmount()
-  const { maxAmount, maxAmount2 } = useMaxAmount({
-    customFeeTokenBalances
-  })
+  const { maxAmount, maxAmount2 } = useMaxAmount()
   const [sourceNetworkSelectionDialogProps, openSourceNetworkSelectionDialog] =
     useDialog()
   const isBatchTransferSupported = useIsBatchTransferSupported()
@@ -124,7 +119,6 @@ export function SourceNetworkBox({
             maxAmount={maxAmount}
             isMaxAmount={isMaxAmount}
             decimals={decimals}
-            customFeeTokenBalances={customFeeTokenBalances}
           />
 
           {isBatchTransferSupported && (
@@ -137,7 +131,6 @@ export function SourceNetworkBox({
               maxAmount={maxAmount2}
               isMaxAmount={isMaxAmount2}
               decimals={nativeCurrency.decimals}
-              customFeeTokenBalances={customFeeTokenBalances}
             />
           )}
 

packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/useMaxAmount.ts

@@ -4,20 +4,13 @@ import { utils } from 'ethers'
 import { useNetworksRelationship } from '../../../hooks/useNetworksRelationship'
 import { useNetworks } from '../../../hooks/useNetworks'
 import { useAppState } from '../../../state'
-import {
-  Balances,
-  useSelectedTokenBalances
-} from '../../../hooks/TransferPanel/useSelectedTokenBalances'
+import { useSelectedTokenBalances } from '../../../hooks/TransferPanel/useSelectedTokenBalances'
 import { defaultErc20Decimals } from '../../../defaults'
 import { useGasSummary } from '../../../hooks/TransferPanel/useGasSummary'
 import { useNativeCurrency } from '../../../hooks/useNativeCurrency'
-import { useBalances } from '../../../hooks/useBalances'
+import { useNativeCurrencyBalances } from './useNativeCurrencyBalances'
 
-export function useMaxAmount({
-  customFeeTokenBalances
-}: {
-  customFeeTokenBalances: Balances
-}) {
+export function useMaxAmount() {
   const {
     app: { selectedToken }
   } = useAppState()
@@ -26,36 +19,30 @@ export function useMaxAmount({
   const { childChainProvider, isDepositMode } =
     useNetworksRelationship(networks)
   const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
-  const { ethParentBalance, ethChildBalance } = useBalances()
 
   const { estimatedParentChainGasFees, estimatedChildChainGasFees } =
     useGasSummary()
 
+  const nativeCurrencyBalances = useNativeCurrencyBalances()
+
   const nativeCurrencyMaxAmount = useMemo(() => {
-    const customFeeTokenParentBalance = customFeeTokenBalances.parentBalance
+    const nativeCurrencySourceBalance = nativeCurrencyBalances.sourceBalance
+
+    if (!nativeCurrencySourceBalance) {
+      return undefined
+    }
+
     // For custom fee token deposits, we can set the max amount, as the fees will be paid in ETH
-    if (
-      nativeCurrency.isCustom &&
-      isDepositMode &&
-      customFeeTokenParentBalance
-    ) {
+    if (nativeCurrency.isCustom && isDepositMode) {
       return utils.formatUnits(
-        customFeeTokenParentBalance,
+        nativeCurrencySourceBalance,
         nativeCurrency.decimals
       )
     }
 
     // ETH deposits and ETH/custom fee token withdrawals
-    const nativeCurrencyBalance = isDepositMode
-      ? ethParentBalance
-      : ethChildBalance
-
-    if (!nativeCurrencyBalance) {
-      return undefined
-    }
-
     const nativeCurrencyBalanceFormatted = utils.formatUnits(
-      nativeCurrencyBalance,
+      nativeCurrencySourceBalance,
       nativeCurrency.decimals
     )
 
@@ -80,14 +67,12 @@ export function useMaxAmount({
 
     return nativeCurrencyBalanceFormatted
   }, [
-    customFeeTokenBalances.parentBalance,
     estimatedChildChainGasFees,
     estimatedParentChainGasFees,
-    ethChildBalance,
-    ethParentBalance,
     isDepositMode,
     nativeCurrency.decimals,
-    nativeCurrency.isCustom
+    nativeCurrency.isCustom,
+    nativeCurrencyBalances.sourceBalance
   ])
 
   const maxAmount = useMemo(() => {

packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/useNativeCurrencyBalances.ts

@@ -0,0 +1,48 @@
+import { useMemo } from 'react'
+import { BigNumber } from 'ethers'
+
+import { useNativeCurrency } from '../../../hooks/useNativeCurrency'
+import { useNetworks } from '../../../hooks/useNetworks'
+import { useNetworksRelationship } from '../../../hooks/useNetworksRelationship'
+import { useBalances } from '../../../hooks/useBalances'
+
+export function useNativeCurrencyBalances(): {
+  sourceBalance: BigNumber | null
+  destinationBalance: BigNumber | null
+} {
+  const [networks] = useNetworks()
+  const { childChainProvider, isDepositMode } =
+    useNetworksRelationship(networks)
+  const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
+
+  const { ethParentBalance, erc20ParentBalances, ethChildBalance } =
+    useBalances()
+
+  return useMemo(() => {
+    if (!nativeCurrency.isCustom) {
+      return {
+        sourceBalance: isDepositMode ? ethParentBalance : ethChildBalance,
+        destinationBalance: isDepositMode ? ethChildBalance : ethParentBalance
+      }
+    }
+
+    const customFeeTokenParentBalance =
+      erc20ParentBalances?.[nativeCurrency.address] ?? null
+    const customFeeTokenChildBalance = ethChildBalance
+
+    return {
+      sourceBalance: isDepositMode
+        ? customFeeTokenParentBalance
+        : customFeeTokenChildBalance,
+      destinationBalance: isDepositMode
+        ? customFeeTokenChildBalance
+        : customFeeTokenParentBalance
+    }
+  }, [
+    nativeCurrency,
+    erc20ParentBalances,
+    ethChildBalance,
+    isDepositMode,
+    ethParentBalance
+  ])
+}