From 6c49689cbd1d8ebe987cbc8401fda817246527b6 Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Mon, 2 Sep 2024 15:30:48 +0200
Subject: [PATCH 1/4] feat: new amount input design (#1860)

---
 .../components/TransferPanel/TokenButton.tsx  |   8 +-
 .../DestinationNetworkBox.tsx                 | 174 +++++++++---------
 .../TransferPanelMain/SourceNetworkBox.tsx    |  90 ++-------
 .../TransferPanel/TransferPanelMainInput.tsx  | 142 +++++++++++---
 .../TransferPanel/useTransferReadiness.ts     |  25 ++-
 .../useTransferReadinessUtils.ts              |  26 ++-
 .../src/components/common/atoms/Loader.tsx    |  10 +-
 .../tests/e2e/cypress.d.ts                    |   2 +
 .../tests/e2e/specs/login.cy.ts               |   2 +-
 .../tests/e2e/specs/urlQueryParam.cy.ts       |  41 ++---
 .../tests/support/commands.ts                 |   7 +-
 11 files changed, 304 insertions(+), 223 deletions(-)

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx
index c090e311a3..eaa43c8007 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx
@@ -57,7 +57,7 @@ export function TokenButton({
         {({ open }) => (
           <>
             <Popover.Button
-              className="arb-hover h-full w-max rounded-bl rounded-tl px-3 py-3 text-white"
+              className="arb-hover h-full w-max rounded-bl rounded-tl px-3 pb-1 pt-2 text-white"
               aria-label="Select Token"
               onClick={onPopoverButtonClick}
               disabled={disabled}
@@ -75,9 +75,7 @@ export function TokenButton({
                     className="h-5 w-5 sm:h-7 sm:w-7"
                   />
                 )} */}
-                <span className="text-xl font-light sm:text-3xl">
-                  {tokenSymbol}
-                </span>
+                <span className="text-xl font-light">{tokenSymbol}</span>
                 {!disabled && (
                   <ChevronDownIcon
                     className={twMerge(
@@ -92,7 +90,7 @@ export function TokenButton({
             <Transition
               // we don't unmount on leave here because otherwise transition won't work with virtualized lists
               options={{ unmountOnLeave: false }}
-              className="fixed left-0 top-0 z-20 sm:absolute sm:top-[76px] sm:max-w-[466px]"
+              className="fixed right-0 top-0 z-20 sm:absolute sm:top-[76px] sm:max-w-[466px]"
               afterLeave={onPopoverClose}
             >
               <Popover.Panel
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
index 8438f49b35..4df5ac0201 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
@@ -29,25 +29,103 @@ import {
   NetworkSelectionContainer
 } from '../../common/NetworkSelectionContainer'
 
-export function DestinationNetworkBox({
+function DestinationNetworkBalance({
   customFeeTokenBalances,
   showUsdcSpecificInfo
 }: {
   customFeeTokenBalances: Balances
   showUsdcSpecificInfo: boolean
 }) {
-  const { address: walletAddress } = useAccount()
+  const {
+    app: { selectedToken }
+  } = useAppState()
   const [networks] = useNetworks()
   const { childChain, childChainProvider, isDepositMode } =
     useNetworksRelationship(networks)
   const { isArbitrumOne } = isNetwork(childChain.id)
-  const {
-    app: { selectedToken }
-  } = useAppState()
+
   const { ethParentBalance, ethChildBalance, erc20ChildBalances } =
     useBalances()
   const selectedTokenBalances = useSelectedTokenBalances()
+
   const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
+
+  if (selectedToken) {
+    return (
+      <>
+        <TokenBalance
+          balance={
+            isDepositMode
+              ? selectedTokenBalances.childBalance
+              : selectedTokenBalances.parentBalance
+          }
+          on={isDepositMode ? NetworkType.childChain : NetworkType.parentChain}
+          forToken={selectedToken}
+          tokenSymbolOverride={
+            // we need to send the proper, sanitized token-name to the component
+            selectedToken?.symbol
+              ? sanitizeTokenSymbol(selectedToken?.symbol, {
+                  chainId: networks.destinationChain.id,
+                  erc20L1Address: selectedToken?.address
+                })
+              : undefined
+          }
+          prefix="Balance: "
+        />
+        {/* In deposit mode, when user selected USDC on mainnet,
+        the UI shows the Arb One balance of both USDC.e and native USDC */}
+        {showUsdcSpecificInfo && isDepositMode && (
+          <TokenBalance
+            balance={
+              (isArbitrumOne
+                ? erc20ChildBalances?.[CommonAddress.ArbitrumOne.USDC]
+                : erc20ChildBalances?.[CommonAddress.ArbitrumSepolia.USDC]) ??
+              constants.Zero
+            }
+            on={NetworkType.childChain}
+            forToken={
+              selectedToken ? { ...selectedToken, symbol: 'USDC' } : null
+            }
+            tokenSymbolOverride="USDC"
+          />
+        )}
+      </>
+    )
+  }
+
+  if (nativeCurrency.isCustom) {
+    return (
+      <TokenBalance
+        on={isDepositMode ? NetworkType.childChain : NetworkType.parentChain}
+        balance={
+          isDepositMode
+            ? customFeeTokenBalances.childBalance
+            : customFeeTokenBalances.parentBalance
+        }
+        forToken={nativeCurrency}
+        prefix="Balance: "
+      />
+    )
+  }
+
+  return (
+    <ETHBalance
+      balance={isDepositMode ? ethChildBalance : ethParentBalance}
+      on={isDepositMode ? NetworkType.childChain : NetworkType.parentChain}
+      prefix="Balance: "
+    />
+  )
+}
+
+export function DestinationNetworkBox({
+  customFeeTokenBalances,
+  showUsdcSpecificInfo
+}: {
+  customFeeTokenBalances: Balances
+  showUsdcSpecificInfo: boolean
+}) {
+  const { address: walletAddress } = useAccount()
+  const [networks] = useNetworks()
   const { destinationAddress } = useDestinationAddressStore()
   const destinationAddressOrWalletAddress = destinationAddress || walletAddress
   const [
@@ -58,7 +136,6 @@ export function DestinationNetworkBox({
   return (
     <>
       <NetworkContainer
-        bgLogoHeight={58}
         network={networks.destinationChain}
         customAddress={destinationAddress}
       >
@@ -70,87 +147,10 @@ export function DestinationNetworkBox({
           <BalancesContainer>
             {destinationAddressOrWalletAddress &&
               utils.isAddress(destinationAddressOrWalletAddress) && (
-                <>
-                  <TokenBalance
-                    balance={
-                      isDepositMode
-                        ? selectedTokenBalances.childBalance
-                        : selectedTokenBalances.parentBalance
-                    }
-                    on={
-                      isDepositMode
-                        ? NetworkType.childChain
-                        : NetworkType.parentChain
-                    }
-                    forToken={selectedToken}
-                    prefix={selectedToken ? 'Balance: ' : ''}
-                    tokenSymbolOverride={
-                      // we need to send the proper, sanitized token-name to the component
-                      selectedToken?.symbol
-                        ? sanitizeTokenSymbol(selectedToken?.symbol, {
-                            chainId: networks.destinationChain.id,
-                            erc20L1Address: selectedToken?.address
-                          })
-                        : undefined
-                    }
-                  />
-                  {/* In deposit mode, when user selected USDC on mainnet,
-              the UI shows the Arb One balance of both USDC.e and native USDC */}
-                  {isDepositMode && showUsdcSpecificInfo && (
-                    <TokenBalance
-                      balance={
-                        (isArbitrumOne
-                          ? erc20ChildBalances?.[CommonAddress.ArbitrumOne.USDC]
-                          : erc20ChildBalances?.[
-                              CommonAddress.ArbitrumSepolia.USDC
-                            ]) ?? constants.Zero
-                      }
-                      on={NetworkType.childChain}
-                      forToken={
-                        selectedToken
-                          ? { ...selectedToken, symbol: 'USDC' }
-                          : null
-                      }
-                      tokenSymbolOverride="USDC"
-                    />
-                  )}
-                  {nativeCurrency.isCustom ? (
-                    <>
-                      <TokenBalance
-                        on={
-                          isDepositMode
-                            ? NetworkType.childChain
-                            : NetworkType.parentChain
-                        }
-                        balance={
-                          isDepositMode
-                            ? customFeeTokenBalances.childBalance
-                            : customFeeTokenBalances.parentBalance
-                        }
-                        forToken={nativeCurrency}
-                        prefix={selectedToken ? '' : 'Balance: '}
-                      />
-                      {!isDepositMode && (
-                        <ETHBalance
-                          balance={ethParentBalance}
-                          on={NetworkType.parentChain}
-                        />
-                      )}
-                    </>
-                  ) : (
-                    <ETHBalance
-                      balance={
-                        isDepositMode ? ethChildBalance : ethParentBalance
-                      }
-                      prefix={selectedToken ? '' : 'Balance: '}
-                      on={
-                        isDepositMode
-                          ? NetworkType.childChain
-                          : NetworkType.parentChain
-                      }
-                    />
-                  )}
-                </>
+                <DestinationNetworkBalance
+                  customFeeTokenBalances={customFeeTokenBalances}
+                  showUsdcSpecificInfo={showUsdcSpecificInfo}
+                />
               )}
           </BalancesContainer>
         </NetworkListboxPlusBalancesContainer>
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx
index cf0ba5a22a..b41ba30d1c 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx
@@ -1,27 +1,17 @@
 import { ChangeEventHandler, useCallback, useEffect, useMemo } from 'react'
+import { utils } from 'ethers'
 
 import { getNetworkName } from '../../../util/networks'
 import {
   NetworkButton,
   NetworkSelectionContainer
 } from '../../common/NetworkSelectionContainer'
-import {
-  BalancesContainer,
-  ETHBalance,
-  NetworkContainer,
-  NetworkListboxPlusBalancesContainer
-} from '../TransferPanelMain'
-import { TokenBalance } from './TokenBalance'
-import { NetworkType } from './utils'
+import { NetworkContainer } from '../TransferPanelMain'
 import { useAppState } from '../../../state'
 import { useNetworks } from '../../../hooks/useNetworks'
 import { useNativeCurrency } from '../../../hooks/useNativeCurrency'
 import { useNetworksRelationship } from '../../../hooks/useNetworksRelationship'
-import {
-  Balances,
-  useSelectedTokenBalances
-} from '../../../hooks/TransferPanel/useSelectedTokenBalances'
-import { useBalances } from '../../../hooks/useBalances'
+import { Balances } from '../../../hooks/TransferPanel/useSelectedTokenBalances'
 import {
   ETH_BALANCE_ARTICLE_LINK,
   USDC_LEARN_MORE_LINK
@@ -39,6 +29,7 @@ import { useDialog } from '../../common/Dialog'
 import { useTransferReadiness } from '../useTransferReadiness'
 import { useIsBatchTransferSupported } from '../../../hooks/TransferPanel/useIsBatchTransferSupported'
 import { useSelectedTokenDecimals } from '../../../hooks/TransferPanel/useSelectedTokenDecimals'
+import { useBalanceOnSourceChain } from '../../../hooks/useBalanceOnSourceChain'
 
 export function SourceNetworkBox({
   customFeeTokenBalances,
@@ -53,8 +44,6 @@ export function SourceNetworkBox({
   const {
     app: { selectedToken }
   } = useAppState()
-  const { ethParentBalance, ethChildBalance } = useBalances()
-  const selectedTokenBalances = useSelectedTokenBalances()
   const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
   const [{ amount, amount2 }] = useArbQueryParams()
   const { setAmount, setAmount2 } = useSetInputAmount()
@@ -66,6 +55,7 @@ export function SourceNetworkBox({
   const isBatchTransferSupported = useIsBatchTransferSupported()
   const decimals = useSelectedTokenDecimals()
   const { errorMessages } = useTransferReadiness()
+  const ethBalanceSourceChain = useBalanceOnSourceChain(null)
 
   const isMaxAmount = amount === AmountQueryParamEnum.MAX
   const isMaxAmount2 = amount2 === AmountQueryParamEnum.MAX
@@ -109,69 +99,21 @@ export function SourceNetworkBox({
   const tokenButtonOptionsAmount2 = useMemo(
     () => ({
       symbol: nativeCurrency.symbol,
-      disabled: true
+      disabled: true,
+      balance: ethBalanceSourceChain
+        ? Number(utils.formatEther(ethBalanceSourceChain))
+        : undefined
     }),
-    [nativeCurrency.symbol]
+    [ethBalanceSourceChain, nativeCurrency.symbol]
   )
 
   return (
     <>
       <NetworkContainer bgLogoHeight={138} network={networks.sourceChain}>
-        <NetworkListboxPlusBalancesContainer>
-          <NetworkButton
-            type="source"
-            onClick={openSourceNetworkSelectionDialog}
-          />
-          <BalancesContainer>
-            <TokenBalance
-              on={
-                isDepositMode ? NetworkType.parentChain : NetworkType.childChain
-              }
-              balance={
-                isDepositMode
-                  ? selectedTokenBalances.parentBalance
-                  : selectedTokenBalances.childBalance
-              }
-              forToken={selectedToken}
-              prefix={selectedToken ? 'Balance: ' : ''}
-            />
-            {nativeCurrency.isCustom ? (
-              <>
-                <TokenBalance
-                  on={
-                    isDepositMode
-                      ? NetworkType.parentChain
-                      : NetworkType.childChain
-                  }
-                  balance={
-                    isDepositMode
-                      ? customFeeTokenBalances.parentBalance
-                      : customFeeTokenBalances.childBalance
-                  }
-                  forToken={nativeCurrency}
-                  prefix={selectedToken ? '' : 'Balance: '}
-                />
-                {/* Only show ETH balance on parent chain */}
-                {isDepositMode && (
-                  <ETHBalance
-                    balance={ethParentBalance}
-                    on={NetworkType.parentChain}
-                  />
-                )}
-              </>
-            ) : (
-              <ETHBalance
-                balance={isDepositMode ? ethParentBalance : ethChildBalance}
-                prefix={selectedToken ? '' : 'Balance: '}
-                on={
-                  isDepositMode
-                    ? NetworkType.parentChain
-                    : NetworkType.childChain
-                }
-              />
-            )}
-          </BalancesContainer>
-        </NetworkListboxPlusBalancesContainer>
+        <NetworkButton
+          type="source"
+          onClick={openSourceNetworkSelectionDialog}
+        />
 
         <div className="flex flex-col gap-1">
           <TransferPanelMainInput
@@ -182,6 +124,7 @@ export function SourceNetworkBox({
             maxAmount={maxAmount}
             isMaxAmount={isMaxAmount}
             decimals={decimals}
+            customFeeTokenBalances={customFeeTokenBalances}
           />
 
           {isBatchTransferSupported && (
@@ -190,10 +133,11 @@ export function SourceNetworkBox({
               errorMessage={errorMessages?.inputAmount2}
               value={amount2}
               onChange={handleAmount2Change}
-              tokenButtonOptions={tokenButtonOptionsAmount2}
+              options={tokenButtonOptionsAmount2}
               maxAmount={maxAmount2}
               isMaxAmount={isMaxAmount2}
               decimals={nativeCurrency.decimals}
+              customFeeTokenBalances={customFeeTokenBalances}
             />
           )}
 
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMainInput.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMainInput.tsx
index ad3efc5e98..c10a404096 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMainInput.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMainInput.tsx
@@ -10,29 +10,44 @@ import { useMemo } from 'react'
 import { TokenButton, TokenButtonOptions } from './TokenButton'
 import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
-import { useSelectedTokenBalances } from '../../hooks/TransferPanel/useSelectedTokenBalances'
+import {
+  Balances,
+  useSelectedTokenBalances
+} from '../../hooks/TransferPanel/useSelectedTokenBalances'
 import { useAppState } from '../../state'
 import { useBalances } from '../../hooks/useBalances'
 import { TransferReadinessRichErrorMessage } from './useTransferReadinessUtils'
 import { ExternalLink } from '../common/ExternalLink'
 import { useTransferDisabledDialogStore } from './TransferDisabledDialog'
+import { formatAmount } from '../../util/NumberUtils'
+import { useNativeCurrency } from '../../hooks/useNativeCurrency'
+import { Loader } from '../common/atoms/Loader'
 import { sanitizeAmountQueryParam } from '../../hooks/useArbQueryParams'
 import { truncateExtraDecimals } from '../../util/NumberUtils'
 
-function MaxButton(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
-  const { className = '', ...rest } = props
-
+function MaxButton({
+  customFeeTokenBalances,
+  className = '',
+  ...rest
+}: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  customFeeTokenBalances: Balances
+}) {
   const {
     app: { selectedToken }
   } = useAppState()
   const [networks] = useNetworks()
-  const { isDepositMode } = useNetworksRelationship(networks)
+  const { isDepositMode, childChainProvider } =
+    useNetworksRelationship(networks)
 
   const { ethParentBalance, ethChildBalance } = useBalances()
   const selectedTokenBalances = useSelectedTokenBalances()
+  const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
 
   const maxButtonVisible = useMemo(() => {
     const ethBalance = isDepositMode ? ethParentBalance : ethChildBalance
+    const customFeeTokenBalance = isDepositMode
+      ? customFeeTokenBalances.parentBalance
+      : customFeeTokenBalances.childBalance
     const tokenBalance = isDepositMode
       ? selectedTokenBalances.parentBalance
       : selectedTokenBalances.childBalance
@@ -45,17 +60,23 @@ function MaxButton(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
       return !tokenBalance.isZero()
     }
 
+    if (nativeCurrency.isCustom) {
+      return customFeeTokenBalance && !customFeeTokenBalance.isZero()
+    }
+
     if (!ethBalance) {
       return false
     }
 
     return !ethBalance.isZero()
   }, [
+    isDepositMode,
     ethParentBalance,
     ethChildBalance,
+    customFeeTokenBalances,
     selectedTokenBalances,
     selectedToken,
-    isDepositMode
+    nativeCurrency.isCustom
   ])
 
   if (!maxButtonVisible) {
@@ -66,7 +87,7 @@ function MaxButton(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
     <button
       type="button"
       className={twMerge(
-        'arb-hover px-2 py-2 text-sm font-light text-gray-6 sm:px-4',
+        'rounded bg-white/30 px-1 py-0.5 text-right text-xs font-medium leading-none text-white opacity-80 transition-opacity hover:opacity-60',
         className
       )}
       {...rest}
@@ -76,14 +97,80 @@ function MaxButton(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
   )
 }
 
+function SourceChainTokenBalance({
+  customFeeTokenBalances,
+  balanceOverride
+}: {
+  customFeeTokenBalances: Balances
+  balanceOverride?: AmountInputOptions['balance']
+}) {
+  const {
+    app: { selectedToken }
+  } = useAppState()
+  const [networks] = useNetworks()
+  const { isDepositMode, childChainProvider } =
+    useNetworksRelationship(networks)
+
+  const { ethParentBalance, ethChildBalance } = useBalances()
+  const selectedTokenBalances = useSelectedTokenBalances()
+
+  const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
+
+  const tokenBalance = isDepositMode
+    ? selectedTokenBalances.parentBalance
+    : selectedTokenBalances.childBalance
+
+  const ethBalance = isDepositMode ? ethParentBalance : ethChildBalance
+  const customFeeTokenBalance = isDepositMode
+    ? customFeeTokenBalances.parentBalance
+    : customFeeTokenBalances.childBalance
+
+  const nativeCurrencyBalance = nativeCurrency.isCustom
+    ? customFeeTokenBalance
+    : ethBalance
+
+  const balance =
+    balanceOverride ?? (selectedToken ? tokenBalance : nativeCurrencyBalance)
+
+  const formattedBalance = balance
+    ? formatAmount(balance, {
+        decimals: selectedToken?.decimals ?? nativeCurrency.decimals
+      })
+    : null
+
+  if (formattedBalance) {
+    return (
+      <>
+        <span className="text-sm font-light text-white">Balance: </span>
+        <span
+          className="whitespace-nowrap text-sm text-white"
+          aria-label={`${
+            selectedToken?.symbol ?? nativeCurrency.symbol
+          } balance amount on ${isDepositMode ? 'parentChain' : 'childChain'}`}
+        >
+          {formattedBalance}
+        </span>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <span className="text-sm font-light text-white">Balance: </span>
+      <Loader wrapperClass="ml-1" color="white" size={12} />
+    </>
+  )
+}
+
 const TransferPanelInputField = React.memo(
   (props: React.InputHTMLAttributes<HTMLInputElement>) => {
     return (
       <input
         type="text"
         inputMode="decimal"
-        placeholder="Enter amount"
-        className="h-full w-full bg-transparent px-3 text-xl font-light placeholder:text-gray-dark sm:text-3xl"
+        placeholder="0"
+        aria-label="Amount input"
+        className="h-full w-full bg-transparent px-3 text-xl font-light text-white placeholder:text-gray-300 sm:text-3xl"
         {...props}
       />
     )
@@ -141,12 +228,17 @@ function ErrorMessage({
   }
 }
 
+type AmountInputOptions = TokenButtonOptions & {
+  balance?: number | undefined
+}
+
 export type TransferPanelMainInputProps =
   React.InputHTMLAttributes<HTMLInputElement> & {
     errorMessage?: string | TransferReadinessRichErrorMessage | undefined
     maxButtonOnClick: React.ButtonHTMLAttributes<HTMLButtonElement>['onClick']
     value: string
-    tokenButtonOptions?: TokenButtonOptions
+    options?: AmountInputOptions
+    customFeeTokenBalances: Balances
     maxAmount: string | undefined
     isMaxAmount: boolean
     decimals: number
@@ -156,12 +248,13 @@ export const TransferPanelMainInput = React.memo(
   ({
     errorMessage,
     maxButtonOnClick,
-    tokenButtonOptions,
     onChange,
     maxAmount,
     value,
     isMaxAmount,
     decimals,
+    options,
+    customFeeTokenBalances,
     ...rest
   }: TransferPanelMainInputProps) => {
     const [localValue, setLocalValue] = useState(value)
@@ -203,19 +296,10 @@ export const TransferPanelMainInput = React.memo(
 
     return (
       <>
-        <div
-          className={twMerge(
-            'flex flex-row rounded border bg-black/40 shadow-2',
-            errorMessage
-              ? 'border-brick text-brick'
-              : 'border-white/30 text-white'
-          )}
-        >
-          <TokenButton options={tokenButtonOptions} />
+        <div className={twMerge('flex flex-row rounded bg-black/40 shadow-2')}>
           <div
             className={twMerge(
-              'flex grow flex-row items-center justify-center border-l',
-              errorMessage ? 'border-brick' : 'border-white/30'
+              'flex grow flex-row items-center justify-center'
             )}
           >
             <TransferPanelInputField
@@ -223,7 +307,19 @@ export const TransferPanelMainInput = React.memo(
               value={localValue}
               onChange={handleInputChange}
             />
-            <MaxButton onClick={handleMaxButtonClick} />
+            <div className="flex flex-col items-end">
+              <TokenButton options={options} />
+              <div className="flex items-center space-x-1 px-3 pb-2 pt-1">
+                <SourceChainTokenBalance
+                  customFeeTokenBalances={customFeeTokenBalances}
+                  balanceOverride={options?.balance}
+                />
+                <MaxButton
+                  onClick={handleMaxButtonClick}
+                  customFeeTokenBalances={customFeeTokenBalances}
+                />
+              </div>
+            </div>
           </div>
         </div>
 
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/useTransferReadiness.ts b/packages/arb-token-bridge-ui/src/components/TransferPanel/useTransferReadiness.ts
index 34899b953b..46dc6768c7 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/useTransferReadiness.ts
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/useTransferReadiness.ts
@@ -31,6 +31,7 @@ import { isTeleportEnabledToken } from '../../util/TokenTeleportEnabledUtils'
 import { isNetwork } from '../../util/networks'
 import { useBalances } from '../../hooks/useBalances'
 import { useArbQueryParams } from '../../hooks/useArbQueryParams'
+import { formatAmount } from '../../util/NumberUtils'
 
 // Add chains IDs that are currently down or disabled
 // It will block transfers and display an info box in the transfer panel
@@ -413,7 +414,9 @@ export function useTransferReadiness(): UseTransferReadinessResult {
                 errorMessages: {
                   inputAmount1: getInsufficientFundsForGasFeesErrorMessage({
                     asset: ether.symbol,
-                    chain: networks.sourceChain.name
+                    chain: networks.sourceChain.name,
+                    balance: formatAmount(ethBalanceFloat),
+                    requiredBalance: formatAmount(estimatedL1GasFees)
                   })
                 }
               })
@@ -425,7 +428,9 @@ export function useTransferReadiness(): UseTransferReadinessResult {
                 errorMessages: {
                   inputAmount1: getInsufficientFundsForGasFeesErrorMessage({
                     asset: nativeCurrency.symbol,
-                    chain: networks.sourceChain.name
+                    chain: networks.sourceChain.name,
+                    balance: formatAmount(customFeeTokenL1BalanceFloat),
+                    requiredBalance: formatAmount(estimatedL2GasFees)
                   })
                 }
               })
@@ -447,7 +452,11 @@ export function useTransferReadiness(): UseTransferReadinessResult {
                 inputAmount1: notEnoughEthForGasFees
                   ? getInsufficientFundsForGasFeesErrorMessage({
                       asset: ether.symbol,
-                      chain: networks.sourceChain.name
+                      chain: networks.sourceChain.name,
+                      balance: formatAmount(ethBalanceFloat),
+                      requiredBalance: formatAmount(
+                        estimatedL1GasFees + estimatedL2GasFees
+                      )
                     })
                   : undefined,
                 inputAmount2:
@@ -472,7 +481,11 @@ export function useTransferReadiness(): UseTransferReadinessResult {
               errorMessages: {
                 inputAmount1: getInsufficientFundsForGasFeesErrorMessage({
                   asset: ether.symbol,
-                  chain: networks.sourceChain.name
+                  chain: networks.sourceChain.name,
+                  balance: formatAmount(ethBalanceFloat),
+                  requiredBalance: formatAmount(
+                    estimatedL1GasFees + estimatedL2GasFees
+                  )
                 })
               }
             })
@@ -490,7 +503,9 @@ export function useTransferReadiness(): UseTransferReadinessResult {
             errorMessages: {
               inputAmount1: getInsufficientFundsForGasFeesErrorMessage({
                 asset: nativeCurrency.symbol,
-                chain: networks.sourceChain.name
+                chain: networks.sourceChain.name,
+                balance: formatAmount(ethBalanceFloat),
+                requiredBalance: formatAmount(total)
               })
             }
           })
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/useTransferReadinessUtils.ts b/packages/arb-token-bridge-ui/src/components/TransferPanel/useTransferReadinessUtils.ts
index 53085925ee..f274106133 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/useTransferReadinessUtils.ts
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/useTransferReadinessUtils.ts
@@ -4,11 +4,17 @@ export enum TransferReadinessRichErrorMessage {
   TOKEN_TRANSFER_DISABLED
 }
 
-export type GetInsufficientFundsErrorMessageParams = {
+type GetInsufficientFundsErrorMessageParams = {
   asset: string
   chain: string
 }
 
+type GetInsufficientFundsForGasFeesErrorMessageParams =
+  GetInsufficientFundsErrorMessageParams & {
+    balance: string
+    requiredBalance: string
+  }
+
 export function getInsufficientFundsErrorMessage({
   asset,
   chain
@@ -18,9 +24,21 @@ export function getInsufficientFundsErrorMessage({
 
 export function getInsufficientFundsForGasFeesErrorMessage({
   asset,
-  chain
-}: GetInsufficientFundsErrorMessageParams) {
-  return `Insufficient ${asset} to pay for gas fees. Please add more funds to ${chain}.`
+  chain,
+  balance,
+  requiredBalance
+}: GetInsufficientFundsForGasFeesErrorMessageParams) {
+  const errorMessage = `Please add more ${asset} on ${chain} to pay for gas fees.`
+
+  if (balance === requiredBalance) {
+    // An edge case where formatAmount returns the same value. In this case we don't want to show balances because in the UI it's the same as requiredBalance.
+    return errorMessage
+  }
+
+  return (
+    errorMessage +
+    ` You currently have ${balance} ${asset}, but the transaction requires ${requiredBalance} ${asset}.`
+  )
 }
 
 export function getSmartContractWalletNativeCurrencyTransfersNotSupportedErrorMessage({
diff --git a/packages/arb-token-bridge-ui/src/components/common/atoms/Loader.tsx b/packages/arb-token-bridge-ui/src/components/common/atoms/Loader.tsx
index acccdb2cdc..6d82603aab 100644
--- a/packages/arb-token-bridge-ui/src/components/common/atoms/Loader.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/atoms/Loader.tsx
@@ -2,10 +2,16 @@ import { TailSpin } from 'react-loader-spinner'
 import { BaseProps } from 'react-loader-spinner/dist/type'
 
 export type LoaderProps = BaseProps & {
-  size: 'small' | 'medium' | 'large'
+  size: 'small' | 'medium' | 'large' | number
 }
 
-const getSizeByLoaderProps = (loaderSize: LoaderProps['size'] | undefined) => {
+const getSizeByLoaderProps = (
+  loaderSize: LoaderProps['size'] | number | undefined
+) => {
+  if (typeof loaderSize === 'number') {
+    return loaderSize
+  }
+
   switch (loaderSize) {
     case 'small':
       return 16
diff --git a/packages/arb-token-bridge-ui/tests/e2e/cypress.d.ts b/packages/arb-token-bridge-ui/tests/e2e/cypress.d.ts
index 1e1761833c..f9596e541e 100644
--- a/packages/arb-token-bridge-ui/tests/e2e/cypress.d.ts
+++ b/packages/arb-token-bridge-ui/tests/e2e/cypress.d.ts
@@ -11,6 +11,7 @@ import {
   searchAndSelectToken,
   fillCustomDestinationAddress,
   typeAmount,
+  findAmountInput,
   findSourceChainButton,
   findDestinationChainButton,
   findGasFeeSummary,
@@ -56,6 +57,7 @@ declare global {
       }): typeof searchAndSelectToken
       fillCustomDestinationAddress(): typeof fillCustomDestinationAddress
       typeAmount: typeof typeAmount
+      findAmountInput: typeof findAmountInput
       findSourceChainButton: typeof findSourceChainButton
       findDestinationChainButton: typeof findDestinationChainButton
       findGasFeeForChain: typeof findGasFeeForChain
diff --git a/packages/arb-token-bridge-ui/tests/e2e/specs/login.cy.ts b/packages/arb-token-bridge-ui/tests/e2e/specs/login.cy.ts
index 25c8552974..0b6286f7e3 100644
--- a/packages/arb-token-bridge-ui/tests/e2e/specs/login.cy.ts
+++ b/packages/arb-token-bridge-ui/tests/e2e/specs/login.cy.ts
@@ -15,7 +15,7 @@ describe('Login Account', () => {
 
   before(() => {
     getInitialETHBalance(Cypress.env('ETH_RPC_URL')).then(
-      val => (l1ETHbal = formatAmount(val, { symbol: 'ETH' }))
+      val => (l1ETHbal = formatAmount(val))
     )
     getInitialETHBalance(Cypress.env('ARB_RPC_URL')).then(
       val => (l2ETHbal = formatAmount(val, { symbol: 'ETH' }))
diff --git a/packages/arb-token-bridge-ui/tests/e2e/specs/urlQueryParam.cy.ts b/packages/arb-token-bridge-ui/tests/e2e/specs/urlQueryParam.cy.ts
index 0124434723..4b19a7d3f5 100644
--- a/packages/arb-token-bridge-ui/tests/e2e/specs/urlQueryParam.cy.ts
+++ b/packages/arb-token-bridge-ui/tests/e2e/specs/urlQueryParam.cy.ts
@@ -31,7 +31,7 @@ describe('User enters site with query params on URL', () => {
           }
         })
 
-        cy.findByPlaceholderText(/Enter amount/i)
+        cy.findAmountInput()
           .should('be.visible')
           .should('not.have.text', 'max')
           .should('not.have.text', 'MAX')
@@ -41,7 +41,7 @@ describe('User enters site with query params on URL', () => {
         cy.waitUntil(
           () =>
             cy
-              .findByPlaceholderText(/Enter amount/i)
+              .findAmountInput()
               .invoke('val')
               .should($val => {
                 cy.wrap(Number($val)).should('be.gt', 0)
@@ -53,7 +53,7 @@ describe('User enters site with query params on URL', () => {
             interval: 500
           }
         )
-        cy.findByPlaceholderText(/Enter amount/i)
+        cy.findAmountInput()
           .invoke('val')
           .should($val => {
             cy.wrap(Number($val)).should('be.lt', l1ETHbal)
@@ -71,7 +71,7 @@ describe('User enters site with query params on URL', () => {
           }
         })
 
-        cy.findByPlaceholderText(/Enter amount/i)
+        cy.findAmountInput()
           .should('be.visible')
           .should('not.have.text', 'max')
           .should('not.have.text', 'MAX')
@@ -79,10 +79,7 @@ describe('User enters site with query params on URL', () => {
         // so this test only asserts the amount set for the input field is less than user's balance
         // but not the exact MAX AMOUNT set by the `setMaxAmount` function in `TransferPanelMain.tsx`
         cy.waitUntil(
-          () =>
-            cy
-              .findByPlaceholderText(/Enter amount/i)
-              .then($el => Number($el.val()) > 0),
+          () => cy.findAmountInput().then($el => Number($el.val()) > 0),
           // optional timeouts and error messages
           {
             errorMsg: 'was expecting a numerical input value greater than 0',
@@ -90,7 +87,7 @@ describe('User enters site with query params on URL', () => {
             interval: 500
           }
         )
-        cy.findByPlaceholderText(/Enter amount/i)
+        cy.findAmountInput()
           .invoke('val')
           .should($val => {
             cy.wrap(Number($val)).should('be.lt', l1ETHbal)
@@ -108,7 +105,7 @@ describe('User enters site with query params on URL', () => {
           }
         })
 
-        cy.findByPlaceholderText(/Enter amount/i)
+        cy.findAmountInput()
           .should('be.visible')
           .should('not.have.text', 'max')
           .should('not.have.text', 'MAX')
@@ -119,7 +116,7 @@ describe('User enters site with query params on URL', () => {
         cy.waitUntil(
           () =>
             cy
-              .findByPlaceholderText(/Enter amount/i)
+              .findAmountInput()
               .invoke('val')
               .should($val => {
                 cy.wrap(Number($val)).should('be.gt', 0)
@@ -131,7 +128,7 @@ describe('User enters site with query params on URL', () => {
             interval: 500
           }
         )
-        cy.findByPlaceholderText(/Enter amount/i)
+        cy.findAmountInput()
           .invoke('val')
           .should($val => {
             cy.wrap(Number($val)).should('be.lt', l1ETHbal)
@@ -147,7 +144,7 @@ describe('User enters site with query params on URL', () => {
         }
       })
 
-      cy.findByPlaceholderText(/Enter amount/i).should('have.value', '56')
+      cy.findAmountInput().should('have.value', '56')
     })
     context('?amount=1.6678 should set transfer panel amount to 1.6678', () => {
       visitAfterSomeDelay('/', {
@@ -158,7 +155,7 @@ describe('User enters site with query params on URL', () => {
         }
       })
 
-      cy.findByPlaceholderText(/Enter amount/i).should('have.value', '1.6678')
+      cy.findAmountInput().should('have.value', '1.6678')
     })
     context('?amount=6 should set transfer panel amount to 6', () => {
       visitAfterSomeDelay('/', {
@@ -169,7 +166,7 @@ describe('User enters site with query params on URL', () => {
         }
       })
 
-      cy.findByPlaceholderText(/Enter amount/i).should('have.value', '6')
+      cy.findAmountInput().should('have.value', '6')
     })
     context('?amount=0.123 should set transfer panel amount to 0.123', () => {
       visitAfterSomeDelay('/', {
@@ -181,7 +178,7 @@ describe('User enters site with query params on URL', () => {
       })
 
       cy.url().should('include', 'amount=0.123')
-      cy.findByPlaceholderText(/Enter amount/i).should('have.value', '0.123')
+      cy.findAmountInput().should('have.value', '0.123')
     })
     context('?amount=-0.123 should set transfer panel amount to 0.123', () => {
       visitAfterSomeDelay('/', {
@@ -192,7 +189,7 @@ describe('User enters site with query params on URL', () => {
         }
       })
 
-      cy.findByPlaceholderText(/Enter amount/i).should('have.value', '0.123')
+      cy.findAmountInput().should('have.value', '0.123')
     })
     it('?amount=asdfs should not set transfer panel amount', () => {
       visitAfterSomeDelay('/', {
@@ -203,7 +200,7 @@ describe('User enters site with query params on URL', () => {
         }
       })
 
-      cy.findByPlaceholderText(/Enter amount/i).should('be.empty')
+      cy.findAmountInput().should('be.empty')
     })
     context('?amount=0 should set transfer panel amount to 0', () => {
       visitAfterSomeDelay('/', {
@@ -214,7 +211,7 @@ describe('User enters site with query params on URL', () => {
         }
       })
 
-      cy.findByPlaceholderText(/Enter amount/i).should('have.value', '0')
+      cy.findAmountInput().should('have.value', '0')
     })
     context('?amount=0.0001 should set transfer panel amount to 0.0001', () => {
       visitAfterSomeDelay('/', {
@@ -225,7 +222,7 @@ describe('User enters site with query params on URL', () => {
         }
       })
 
-      cy.findByPlaceholderText(/Enter amount/i).should('have.value', '0.0001')
+      cy.findAmountInput().should('have.value', '0.0001')
     })
     context('?amount=123,3,43 should not set transfer panel amount', () => {
       visitAfterSomeDelay('/', {
@@ -236,7 +233,7 @@ describe('User enters site with query params on URL', () => {
         }
       })
 
-      cy.findByPlaceholderText(/Enter amount/i).should('be.empty')
+      cy.findAmountInput().should('be.empty')
     })
     context(
       '?amount=0, 123.222, 0.3 should not set transfer panel amount',
@@ -249,7 +246,7 @@ describe('User enters site with query params on URL', () => {
           }
         })
 
-        cy.findByPlaceholderText(/Enter amount/i).should('be.empty')
+        cy.findAmountInput().should('be.empty')
       }
     )
   })
diff --git a/packages/arb-token-bridge-ui/tests/support/commands.ts b/packages/arb-token-bridge-ui/tests/support/commands.ts
index 425398add7..6671c79693 100644
--- a/packages/arb-token-bridge-ui/tests/support/commands.ts
+++ b/packages/arb-token-bridge-ui/tests/support/commands.ts
@@ -249,10 +249,14 @@ export const fillCustomDestinationAddress = () => {
     .type(Cypress.env('CUSTOM_DESTINATION_ADDRESS'))
 }
 
+export function findAmountInput(): Cypress.Chainable<JQuery<HTMLElement>> {
+  return cy.findByLabelText('Amount input')
+}
+
 export function typeAmount(
   amount: string | number
 ): Cypress.Chainable<JQuery<HTMLElement>> {
-  return cy.findByPlaceholderText(/enter amount/i).type(String(amount))
+  return cy.findAmountInput().type(String(amount))
 }
 
 export function findSourceChainButton(
@@ -386,6 +390,7 @@ Cypress.Commands.addAll({
   searchAndSelectToken,
   fillCustomDestinationAddress,
   typeAmount,
+  findAmountInput,
   findSourceChainButton,
   findDestinationChainButton,
   findGasFeeForChain,

From 476230d471aa468ce707ecfa9cb9e59f8bdca778 Mon Sep 17 00:00:00 2001
From: Christophe Deveaux <contact@christophedeveaux.com>
Date: Mon, 2 Sep 2024 16:13:15 +0200
Subject: [PATCH 2/4] test: add CCTP synpress config (#1861)

---
 package.json                                  |   2 +-
 packages/arb-token-bridge-ui/.e2e.env.sample  |   2 +
 .../TransferPanel/AdvancedSettings.tsx        |   1 +
 .../synpress.cctp.config.ts                   | 162 ++++++++++++++++++
 .../arb-token-bridge-ui/synpress.config.ts    |  91 ++--------
 .../tests/e2e/cypress.d.ts                    |  10 +-
 .../tests/e2e/getCommonSynpressConfig.ts      |  21 +++
 .../tests/e2e/specs/approveToken.cy.ts        |   4 +-
 .../tests/support/commands.ts                 | 109 +++---------
 .../tests/support/common.ts                   | 114 +++++++-----
 .../tests/support/index.ts                    |   3 +-
 tsconfig.eslint.json                          |   3 +-
 12 files changed, 313 insertions(+), 209 deletions(-)
 create mode 100644 packages/arb-token-bridge-ui/synpress.cctp.config.ts
 create mode 100644 packages/arb-token-bridge-ui/tests/e2e/getCommonSynpressConfig.ts

diff --git a/package.json b/package.json
index 74e39a32d6..c60ae31523 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "lint": "yarn workspace arb-token-bridge-ui lint",
     "lint:fix": "yarn workspace arb-token-bridge-ui lint:fix",
     "test:e2e": "yarn workspace arb-token-bridge-ui env-cmd --silent --file .e2e.env yarn synpress run --configFile synpress.config.ts",
-    "test:e2e:cctp": "E2E_CCTP=true yarn test:e2e",
+    "test:e2e:cctp": "yarn test:e2e --configFile synpress.cctp.config.ts",
     "test:e2e:orbit": "E2E_ORBIT=true yarn test:e2e"
   },
   "resolutions": {
diff --git a/packages/arb-token-bridge-ui/.e2e.env.sample b/packages/arb-token-bridge-ui/.e2e.env.sample
index 573ce3d690..28ca742afc 100644
--- a/packages/arb-token-bridge-ui/.e2e.env.sample
+++ b/packages/arb-token-bridge-ui/.e2e.env.sample
@@ -12,6 +12,8 @@ CYPRESS_RECORD_VIDEO=false
 # Below key is only used to fund the newly created wallet
 PRIVATE_KEY_CUSTOM=b6b15c8cb491557369f3c7d2c287b053eb229daa9c22138887752191c9520659
 
+PRIVATE_KEY_CCTP=
+
 # We set up MetaMask ourselves
 SKIP_METAMASK_SETUP=true
 
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/AdvancedSettings.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/AdvancedSettings.tsx
index ca44aef3ff..a6fb791c63 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/AdvancedSettings.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/AdvancedSettings.tsx
@@ -263,6 +263,7 @@ export const AdvancedSettings = () => {
               onChange={e =>
                 setDestinationAddress(e.target.value?.toLowerCase().trim())
               }
+              aria-label="Custom Destination Address Input"
             />
             {isEOA && (
               <button
diff --git a/packages/arb-token-bridge-ui/synpress.cctp.config.ts b/packages/arb-token-bridge-ui/synpress.cctp.config.ts
new file mode 100644
index 0000000000..77de5afedf
--- /dev/null
+++ b/packages/arb-token-bridge-ui/synpress.cctp.config.ts
@@ -0,0 +1,162 @@
+import { BigNumber, Wallet, utils } from 'ethers'
+import { defineConfig } from 'cypress'
+import { Provider, StaticJsonRpcProvider } from '@ethersproject/providers'
+import synpressPlugins from '@synthetixio/synpress/plugins'
+import logsPrinter from 'cypress-terminal-report/src/installLogsPrinter'
+import { getCommonSynpressConfig } from './tests/e2e/getCommonSynpressConfig'
+import {
+  setupCypressTasks,
+  fundEth,
+  getCustomDestinationAddress,
+  NetworkType
+} from './tests/support/common'
+import specFiles from './tests/e2e/cctp.json'
+import { CommonAddress } from './src/util/CommonAddressUtils'
+import { ERC20__factory } from '@arbitrum/sdk/dist/lib/abi/factories/ERC20__factory'
+
+export async function fundUsdc({
+  address, // wallet address where funding is required
+  provider,
+  amount,
+  networkType,
+  sourceWallet
+}: {
+  address: string
+  provider: Provider
+  amount: BigNumber
+  sourceWallet: Wallet
+  networkType: NetworkType
+}) {
+  console.log(`Funding USDC ${address} on ${networkType}...`)
+  const usdcContractAddress =
+    networkType === 'parentChain'
+      ? CommonAddress.Sepolia.USDC
+      : CommonAddress.ArbitrumSepolia.USDC
+
+  const contract = new ERC20__factory().connect(sourceWallet.connect(provider))
+  const token = contract.attach(usdcContractAddress)
+  await token.deployed()
+  const tx = await token.transfer(address, amount)
+  await tx.wait()
+}
+
+const shouldRecordVideo = process.env.CYPRESS_RECORD_VIDEO === 'true'
+
+const tests = process.env.TEST_FILE
+  ? [process.env.TEST_FILE]
+  : specFiles.map(file => file.file)
+
+const INFURA_KEY = process.env.NEXT_PUBLIC_INFURA_KEY
+if (typeof INFURA_KEY === 'undefined') {
+  throw new Error('Infura API key not provided')
+}
+
+const SEPOLIA_INFURA_RPC_URL = `https://sepolia.infura.io/v3/${INFURA_KEY}`
+const sepoliaRpcUrl =
+  process.env.NEXT_PUBLIC_SEPOLIA_RPC_URL ?? SEPOLIA_INFURA_RPC_URL
+const arbSepoliaRpcUrl = 'https://sepolia-rollup.arbitrum.io/rpc'
+
+const sepoliaProvider = new StaticJsonRpcProvider(sepoliaRpcUrl)
+const arbSepoliaProvider = new StaticJsonRpcProvider(arbSepoliaRpcUrl)
+
+if (!process.env.PRIVATE_KEY_CCTP) {
+  throw new Error('PRIVATE_KEY_CCTP variable missing.')
+}
+
+if (!process.env.PRIVATE_KEY_USER) {
+  throw new Error('PRIVATE_KEY_USER variable missing.')
+}
+
+// Wallet funded on Sepolia and ArbSepolia with ETH and USDC
+const localWallet = new Wallet(process.env.PRIVATE_KEY_CCTP)
+// Generate a new wallet every time
+const userWallet = Wallet.createRandom()
+
+async function fundWallets() {
+  const userWalletAddress = userWallet.address
+  console.log(`Funding wallet ${userWalletAddress}`)
+
+  const fundEthHelper = (network: 'sepolia' | 'arbSepolia') => {
+    return () =>
+      fundEth({
+        address: userWalletAddress,
+        sourceWallet: localWallet,
+        ...(network === 'sepolia'
+          ? {
+              provider: sepoliaProvider,
+              amount: ethAmountSepolia,
+              networkType: 'parentChain'
+            }
+          : {
+              provider: arbSepoliaProvider,
+              amount: ethAmountArbSepolia,
+              networkType: 'childChain'
+            })
+      })
+  }
+  const fundUsdcHelper = (network: 'sepolia' | 'arbSepolia') => {
+    return () =>
+      fundUsdc({
+        address: userWalletAddress,
+        sourceWallet: localWallet,
+        amount: usdcAmount,
+        ...(network === 'sepolia'
+          ? {
+              provider: sepoliaProvider,
+              networkType: 'parentChain'
+            }
+          : {
+              provider: arbSepoliaProvider,
+              networkType: 'childChain'
+            })
+      })
+  }
+
+  /**
+   * We need 0.0002 USDC per test (0.0001 for same address and 0.0001 for custom address)
+   * And in the worst case, we run each tests 3 time
+   */
+  const usdcAmount = utils.parseUnits('0.0006', 6)
+  const ethAmountSepolia = utils.parseEther('0.01')
+  const ethAmountArbSepolia = utils.parseEther('0.002')
+  const ethPromises: (() => Promise<void>)[] = []
+  const usdcPromises: (() => Promise<void>)[] = []
+
+  if (tests.some(testFile => testFile.includes('deposit'))) {
+    ethPromises.push(fundEthHelper('sepolia'))
+    usdcPromises.push(fundUsdcHelper('sepolia'))
+  }
+
+  if (tests.some(testFile => testFile.includes('withdraw'))) {
+    ethPromises.push(fundEthHelper('arbSepolia'))
+    usdcPromises.push(fundUsdcHelper('arbSepolia'))
+  }
+
+  await Promise.all(ethPromises.map(fn => fn()))
+  await Promise.all(usdcPromises.map(fn => fn()))
+}
+
+export default defineConfig({
+  ...getCommonSynpressConfig(shouldRecordVideo),
+  e2e: {
+    async setupNodeEvents(on, config) {
+      logsPrinter(on)
+
+      await fundWallets()
+
+      config.env.PRIVATE_KEY = userWallet.privateKey
+      config.env.PRIVATE_KEY_CCTP = process.env.PRIVATE_KEY_CCTP
+      config.env.SEPOLIA_INFURA_RPC_URL = sepoliaRpcUrl
+      config.env.ARB_SEPOLIA_INFURA_RPC_URL = arbSepoliaRpcUrl
+      config.env.CUSTOM_DESTINATION_ADDRESS =
+        await getCustomDestinationAddress()
+
+      setupCypressTasks(on, { requiresNetworkSetup: false })
+      synpressPlugins(on, config)
+      return config
+    },
+    baseUrl: 'http://localhost:3000',
+    specPattern: tests,
+    supportFile: 'tests/support/index.ts'
+  }
+})
diff --git a/packages/arb-token-bridge-ui/synpress.config.ts b/packages/arb-token-bridge-ui/synpress.config.ts
index f0a528f108..7b85b3ede7 100644
--- a/packages/arb-token-bridge-ui/synpress.config.ts
+++ b/packages/arb-token-bridge-ui/synpress.config.ts
@@ -12,16 +12,17 @@ import { StaticJsonRpcProvider } from '@ethersproject/providers'
 import synpressPlugins from '@synthetixio/synpress/plugins'
 import { TestWETH9__factory } from '@arbitrum/sdk/dist/lib/abi/factories/TestWETH9__factory'
 import { Erc20Bridger } from '@arbitrum/sdk'
+import logsPrinter from 'cypress-terminal-report/src/installLogsPrinter'
 import { getL2ERC20Address } from './src/util/TokenUtils'
 import specFiles from './tests/e2e/specfiles.json'
-import cctpFiles from './tests/e2e/cctp.json'
 import { contractAbi, contractByteCode } from './testErc20Token'
 import {
-  NetworkName,
   checkForAssertions,
   generateActivityOnChains,
   NetworkType,
   fundEth,
+  setupCypressTasks,
+  getCustomDestinationAddress,
   ERC20TokenSymbol,
   ERC20TokenDecimals,
   ERC20TokenName
@@ -32,15 +33,11 @@ import {
   defaultL3Network,
   registerLocalNetwork
 } from './src/util/networks'
+import { getCommonSynpressConfig } from './tests/e2e/getCommonSynpressConfig'
 
-let tests: string[]
-if (process.env.TEST_FILE) {
-  tests = [process.env.TEST_FILE]
-} else if (process.env.E2E_CCTP) {
-  tests = cctpFiles.map(file => file.file)
-} else {
-  tests = specFiles.map(file => file.file)
-}
+const tests = process.env.TEST_FILE
+  ? [process.env.TEST_FILE]
+  : specFiles.map(file => file.file)
 
 const isOrbitTest = process.env.E2E_ORBIT == 'true'
 const shouldRecordVideo = process.env.CYPRESS_RECORD_VIDEO === 'true'
@@ -58,27 +55,10 @@ const l2WethAddress = isOrbitTest
   : defaultL2Network.tokenBridge!.childWeth
 
 export default defineConfig({
-  userAgent: 'synpress',
-  retries: shouldRecordVideo ? 0 : 2,
-  screenshotsFolder: 'cypress/screenshots',
-  videosFolder: 'cypress/videos',
-  video: shouldRecordVideo,
-  screenshotOnRunFailure: true,
-  chromeWebSecurity: true,
-  modifyObstructiveCode: false,
-  scrollBehavior: false,
-  viewportWidth: 1366,
-  viewportHeight: 850,
-  env: {
-    coverage: false
-  },
-  defaultCommandTimeout: 30000,
-  pageLoadTimeout: 30000,
-  requestTimeout: 30000,
+  ...getCommonSynpressConfig(shouldRecordVideo),
   e2e: {
-    // @ts-ignore
     async setupNodeEvents(on, config) {
-      require('cypress-terminal-report/src/installLogsPrinter')(on)
+      logsPrinter(on)
       registerLocalNetwork()
 
       if (!ethRpcUrl && !isOrbitTest) {
@@ -101,18 +81,18 @@ export default defineConfig({
       // Fund the userWallet. We do this to run tests on a small amount of ETH.
       await Promise.all([
         fundEth({
-          networkType: 'parentChain',
           address: userWalletAddress,
-          parentProvider,
-          childProvider,
-          sourceWallet: localWallet
+          provider: parentProvider,
+          sourceWallet: localWallet,
+          amount: utils.parseEther('2'),
+          networkType: 'parentChain'
         }),
         fundEth({
-          networkType: 'childChain',
           address: userWalletAddress,
-          parentProvider,
-          childProvider,
-          sourceWallet: localWallet
+          provider: childProvider,
+          sourceWallet: localWallet,
+          amount: utils.parseEther('2'),
+          networkType: 'childChain'
         })
       ])
 
@@ -163,7 +143,7 @@ export default defineConfig({
         await generateTestTxForRedeemRetryable()
 
       synpressPlugins(on, config)
-      setupCypressTasks(on)
+      setupCypressTasks(on, { requiresNetworkSetup: true })
       return config
     },
     baseUrl: 'http://localhost:3000',
@@ -327,11 +307,6 @@ async function fundErc20ToChildChain(l1ERC20Token: Contract) {
   await depositRec.waitForChildTransactionReceipt(childProvider)
 }
 
-async function getCustomDestinationAddress() {
-  console.log('Getting custom destination address...')
-  return (await Wallet.createRandom().getAddress()).toLowerCase()
-}
-
 async function generateTestTxForRedeemRetryable() {
   console.log('Adding a test transaction for redeeming retryable...')
 
@@ -366,33 +341,3 @@ async function generateTestTxForRedeemRetryable() {
   const receipt = await tx.wait()
   return receipt.transactionHash
 }
-
-function setupCypressTasks(on: Cypress.PluginEvents) {
-  let currentNetworkName: NetworkName | null = null
-  let networkSetupComplete = false
-  let walletConnectedToDapp = false
-
-  on('task', {
-    setCurrentNetworkName: (networkName: NetworkName) => {
-      currentNetworkName = networkName
-      return null
-    },
-    getCurrentNetworkName: () => {
-      return currentNetworkName
-    },
-    setNetworkSetupComplete: () => {
-      networkSetupComplete = true
-      return null
-    },
-    getNetworkSetupComplete: () => {
-      return networkSetupComplete
-    },
-    setWalletConnectedToDapp: () => {
-      walletConnectedToDapp = true
-      return null
-    },
-    getWalletConnectedToDapp: () => {
-      return walletConnectedToDapp
-    }
-  })
-}
diff --git a/packages/arb-token-bridge-ui/tests/e2e/cypress.d.ts b/packages/arb-token-bridge-ui/tests/e2e/cypress.d.ts
index f9596e541e..bc371580ce 100644
--- a/packages/arb-token-bridge-ui/tests/e2e/cypress.d.ts
+++ b/packages/arb-token-bridge-ui/tests/e2e/cypress.d.ts
@@ -5,9 +5,6 @@ import {
   login,
   logout,
   openTransactionsPanel,
-  resetCctpAllowance,
-  fundUserUsdcTestnet,
-  fundUserWalletEth,
   searchAndSelectToken,
   fillCustomDestinationAddress,
   typeAmount,
@@ -23,7 +20,8 @@ import {
   findTransactionDetailsCustomDestinationAddress,
   findTransactionInTransactionHistory,
   findClaimButton,
-  selectTransactionsPanelTab
+  selectTransactionsPanelTab,
+  confirmSpending
 } from '../support/commands'
 import { NetworkType, NetworkName } from '../support/common'
 
@@ -45,9 +43,6 @@ declare global {
       logout(): typeof logout
       selectTransactionsPanelTab: typeof selectTransactionsPanelTab
       openTransactionsPanel: typeof openTransactionsPanel
-      resetCctpAllowance: typeof resetCctpAllowance
-      fundUserUsdcTestnet: typeof fundUserUsdcTestnet
-      fundUserWalletEth: typeof fundUserWalletEth
       searchAndSelectToken({
         tokenName,
         tokenAddress
@@ -69,6 +64,7 @@ declare global {
       findTransactionDetailsCustomDestinationAddress: typeof findTransactionDetailsCustomDestinationAddress
       findTransactionInTransactionHistory: typeof findTransactionInTransactionHistory
       findClaimButton: typeof findClaimButton
+      confirmSpending: typeof confirmSpending
     }
   }
 }
diff --git a/packages/arb-token-bridge-ui/tests/e2e/getCommonSynpressConfig.ts b/packages/arb-token-bridge-ui/tests/e2e/getCommonSynpressConfig.ts
new file mode 100644
index 0000000000..b74879e34a
--- /dev/null
+++ b/packages/arb-token-bridge-ui/tests/e2e/getCommonSynpressConfig.ts
@@ -0,0 +1,21 @@
+export function getCommonSynpressConfig(shouldRecordVideo: boolean) {
+  return {
+    userAgent: 'synpress',
+    retries: shouldRecordVideo ? 0 : 2,
+    screenshotsFolder: 'cypress/screenshots',
+    videosFolder: 'cypress/videos',
+    video: shouldRecordVideo,
+    screenshotOnRunFailure: true,
+    chromeWebSecurity: true,
+    modifyObstructiveCode: false,
+    scrollBehavior: false,
+    viewportWidth: 1366,
+    viewportHeight: 850,
+    env: {
+      coverage: false
+    },
+    defaultCommandTimeout: 30000,
+    pageLoadTimeout: 30000,
+    requestTimeout: 30000
+  } as const satisfies Cypress.ConfigOptions
+}
diff --git a/packages/arb-token-bridge-ui/tests/e2e/specs/approveToken.cy.ts b/packages/arb-token-bridge-ui/tests/e2e/specs/approveToken.cy.ts
index dedd71466d..ae22f84043 100644
--- a/packages/arb-token-bridge-ui/tests/e2e/specs/approveToken.cy.ts
+++ b/packages/arb-token-bridge-ui/tests/e2e/specs/approveToken.cy.ts
@@ -40,7 +40,9 @@ describe('Approve token for deposit', () => {
       cy.findByRole('button', {
         name: /Pay approval fee of/
       }).click()
-      cy.confirmMetamaskPermissionToSpend('1')
+      cy.confirmSpending('5')
+      cy.wait(10_000)
+      cy.rejectMetamaskTransaction()
     })
   })
 })
diff --git a/packages/arb-token-bridge-ui/tests/support/commands.ts b/packages/arb-token-bridge-ui/tests/support/commands.ts
index 6671c79693..ca7c54442d 100644
--- a/packages/arb-token-bridge-ui/tests/support/commands.ts
+++ b/packages/arb-token-bridge-ui/tests/support/commands.ts
@@ -13,14 +13,8 @@ import {
   NetworkName,
   startWebApp,
   getL1NetworkConfig,
-  getL2NetworkConfig,
-  getInitialERC20Balance
+  getL2NetworkConfig
 } from './common'
-import { Wallet, utils } from 'ethers'
-import { CommonAddress } from '../../src/util/CommonAddressUtils'
-import { StaticJsonRpcProvider } from '@ethersproject/providers'
-import { ERC20__factory } from '@arbitrum/sdk/dist/lib/abi/factories/ERC20__factory'
-import { MULTICALL_TESTNET_ADDRESS } from '../../src/constants'
 import { shortenAddress } from '../../src/util/CommonUtils'
 
 function shouldChangeNetwork(networkName: NetworkName) {
@@ -56,7 +50,7 @@ export function login({
 
     // when testing Orbit chains we want to set destination chain to L3
     const destinationChain =
-      networkType === 'parentChain' && network.chainId === '412346'
+      networkType === 'parentChain' && network.chainId === 412346
         ? 'l3-localhost'
         : ''
     startWebApp(url, {
@@ -137,77 +131,6 @@ export const openTransactionsPanel = (tab: 'pending' | 'settled') => {
   )
 }
 
-const l1RpcUrl = Cypress.env('ETH_SEPOLIA_RPC_URL')
-const l2RpcUrl = Cypress.env('ARB_SEPOLIA_RPC_URL')
-const l1Provider = new StaticJsonRpcProvider(l1RpcUrl)
-const l2Provider = new StaticJsonRpcProvider(l2RpcUrl)
-const userWallet = new Wallet(Cypress.env('PRIVATE_KEY'))
-const localWallet = new Wallet(Cypress.env('LOCAL_WALLET_PRIVATE_KEY'))
-
-export async function resetCctpAllowance(networkType: NetworkType) {
-  const provider = networkType === 'parentChain' ? l1Provider : l2Provider
-  const { USDC, tokenMessengerContractAddress } =
-    networkType === 'parentChain'
-      ? CommonAddress.Sepolia
-      : CommonAddress.ArbitrumSepolia
-
-  const contract = ERC20__factory.connect(USDC, userWallet.connect(provider))
-  const allowance = await contract.allowance(
-    userWallet.address,
-    tokenMessengerContractAddress
-  )
-  if (allowance.gt(0)) {
-    await contract.decreaseAllowance(tokenMessengerContractAddress, allowance)
-  }
-}
-
-export async function fundUserUsdcTestnet(networkType: NetworkType) {
-  console.log(`Funding USDC to user wallet (testnet): ${networkType}...`)
-  const usdcContractAddress =
-    networkType === 'parentChain'
-      ? CommonAddress.Sepolia.USDC
-      : CommonAddress.ArbitrumSepolia.USDC
-
-  const usdcBalance = await getInitialERC20Balance({
-    address: userWallet.address,
-    rpcURL: networkType === 'parentChain' ? l1RpcUrl : l2RpcUrl,
-    tokenAddress: usdcContractAddress,
-    multiCallerAddress: MULTICALL_TESTNET_ADDRESS
-  })
-
-  // Fund only if the balance is less than 0.0001 USDC
-  if (usdcBalance && usdcBalance.lt(utils.parseUnits('0.0001', 6))) {
-    console.log(`Adding USDC to user wallet (testnet): ${networkType}...`)
-    const l1Provider = new StaticJsonRpcProvider(l1RpcUrl)
-    const l2Provider = new StaticJsonRpcProvider(l2RpcUrl)
-    const provider = networkType === 'parentChain' ? l1Provider : l2Provider
-    const contract = new ERC20__factory().connect(localWallet.connect(provider))
-    const token = contract.attach(usdcContractAddress)
-    await token.deployed()
-    const tx = await token.transfer(
-      userWallet.address,
-      utils.parseUnits('1', 6)
-    )
-    await tx.wait()
-  }
-}
-
-export async function fundUserWalletEth(networkType: NetworkType) {
-  console.log(`Funding ETH to user wallet (testnet): ${networkType}...`)
-  const address = await userWallet.getAddress()
-  const provider = networkType === 'parentChain' ? l1Provider : l2Provider
-  const balance = await provider.getBalance(address)
-  // Fund only if the balance is less than 0.005 eth
-  const amountToTransfer = '0.005'
-  if (balance.lt(utils.parseEther(amountToTransfer))) {
-    const tx = await localWallet.connect(provider).sendTransaction({
-      to: address,
-      value: utils.parseEther(amountToTransfer)
-    })
-    await tx.wait()
-  }
-}
-
 export const searchAndSelectToken = ({
   tokenName,
   tokenAddress
@@ -244,7 +167,7 @@ export const fillCustomDestinationAddress = () => {
     .should('be.visible')
     .click()
 
-  cy.findByPlaceholderText(Cypress.env('ADDRESS'))
+  cy.findByLabelText('Custom Destination Address Input')
     .should('be.visible')
     .type(Cypress.env('CUSTOM_DESTINATION_ADDRESS'))
 }
@@ -378,15 +301,32 @@ export function findClaimButton(
   return cy.findByLabelText(`Claim ${amountToClaim}`)
 }
 
+/**
+ * Currently, Synpress confirmMetamaskPermissionToSpend is clicking only once
+ * We need to call it twice to confirm it.
+ * shouldWaitForPopupClosure needs to be set to true for the test to pass
+ */
+export function confirmSpending(
+  spendLimit: Parameters<
+    typeof cy.confirmMetamaskPermissionToSpend
+  >[0]['spendLimit']
+) {
+  cy.confirmMetamaskPermissionToSpend({
+    spendLimit,
+    shouldWaitForPopupClosure: true
+  })
+  cy.confirmMetamaskPermissionToSpend({
+    spendLimit,
+    shouldWaitForPopupClosure: true
+  })
+}
+
 Cypress.Commands.addAll({
   connectToApp,
   login,
   logout,
   openTransactionsPanel,
   selectTransactionsPanelTab,
-  resetCctpAllowance,
-  fundUserUsdcTestnet,
-  fundUserWalletEth,
   searchAndSelectToken,
   fillCustomDestinationAddress,
   typeAmount,
@@ -401,5 +341,6 @@ Cypress.Commands.addAll({
   closeTransactionDetails,
   findTransactionInTransactionHistory,
   findClaimButton,
-  findTransactionDetailsCustomDestinationAddress
+  findTransactionDetailsCustomDestinationAddress,
+  confirmSpending
 })
diff --git a/packages/arb-token-bridge-ui/tests/support/common.ts b/packages/arb-token-bridge-ui/tests/support/common.ts
index d17eab02db..b1cc0011b1 100644
--- a/packages/arb-token-bridge-ui/tests/support/common.ts
+++ b/packages/arb-token-bridge-ui/tests/support/common.ts
@@ -21,7 +21,7 @@ export type NetworkName =
 type NetworkConfig = {
   networkName: NetworkName
   rpcUrl: string
-  chainId: string
+  chainId: number
   symbol: string
   isTestnet: boolean
   multiCall: string
@@ -43,7 +43,7 @@ export const getL1NetworkConfig = (): NetworkConfig => {
   return {
     networkName: isOrbitTest ? 'arbitrum-localhost' : 'custom-localhost',
     rpcUrl: Cypress.env('ETH_RPC_URL'),
-    chainId: isOrbitTest ? '412346' : '1337',
+    chainId: isOrbitTest ? 412346 : 1337,
     symbol: 'ETH',
     isTestnet: true,
     multiCall: isOrbitTest
@@ -58,7 +58,7 @@ export const getL2NetworkConfig = (): NetworkConfig => {
   return {
     networkName: isOrbitTest ? 'l3-localhost' : 'arbitrum-localhost',
     rpcUrl: Cypress.env('ARB_RPC_URL'),
-    chainId: isOrbitTest ? '333333' : '412346',
+    chainId: isOrbitTest ? 333333 : 412346,
     symbol: 'ETH',
     isTestnet: true,
     multiCall: isOrbitTest
@@ -71,7 +71,7 @@ export const getL1TestnetNetworkConfig = (): NetworkConfig => {
   return {
     networkName: 'sepolia',
     rpcUrl: Cypress.env('ETH_SEPOLIA_RPC_URL'),
-    chainId: '11155111',
+    chainId: 11155111,
     symbol: 'ETH',
     isTestnet: true,
     multiCall: MULTICALL_TESTNET_ADDRESS
@@ -82,7 +82,7 @@ export const getL2TestnetNetworkConfig = (): NetworkConfig => {
   return {
     networkName: 'arbitrum-sepolia',
     rpcUrl: Cypress.env('ARB_SEPOLIA_RPC_URL'),
-    chainId: '421614',
+    chainId: 421614,
     symbol: 'ETH',
     isTestnet: true,
     multiCall: MULTICALL_TESTNET_ADDRESS
@@ -181,33 +181,6 @@ export const wait = (ms = 0): Promise<void> => {
   return new Promise(res => setTimeout(res, ms))
 }
 
-export async function fundEth({
-  address, // wallet address where funding is required
-  networkType, // parentChain or childChain
-  parentProvider,
-  childProvider,
-  sourceWallet // source wallet that will fund the `address`
-}: {
-  address: string
-  parentProvider: Provider
-  childProvider: Provider
-  sourceWallet: Wallet
-  networkType: NetworkType
-}) {
-  console.log(`Funding ETH to user wallet: ${networkType}...`)
-  const provider =
-    networkType === 'parentChain' ? parentProvider : childProvider
-  const balance = await provider.getBalance(address)
-  // Fund only if the balance is less than 2 eth
-  if (balance.lt(utils.parseEther('2'))) {
-    const tx = await sourceWallet.connect(provider).sendTransaction({
-      to: address,
-      value: utils.parseEther('2')
-    })
-    await tx.wait()
-  }
-}
-
 export async function generateActivityOnChains({
   parentProvider,
   childProvider,
@@ -236,20 +209,18 @@ export async function generateActivityOnChains({
   const minerParent = Wallet.createRandom().connect(parentProvider)
   await fundEth({
     address: await minerParent.getAddress(),
-    networkType: 'parentChain',
-    parentProvider,
-    childProvider,
-    sourceWallet: wallet
+    provider: parentProvider,
+    sourceWallet: wallet,
+    networkType: 'parentChain'
   })
 
   console.log('Generating activity on childChain...')
   const minerChild = Wallet.createRandom().connect(childProvider)
   await fundEth({
     address: await minerChild.getAddress(),
-    networkType: 'childChain',
-    parentProvider,
-    childProvider,
-    sourceWallet: wallet
+    provider: childProvider,
+    sourceWallet: wallet,
+    networkType: 'childChain'
   })
 
   await Promise.allSettled([keepMining(minerParent), keepMining(minerChild)])
@@ -293,3 +264,66 @@ export async function checkForAssertions({
     )
   }
 }
+
+export async function fundEth({
+  address, // wallet address where funding is required
+  provider,
+  sourceWallet, // source wallet that will fund the `address`,
+  networkType,
+  amount = utils.parseEther('2')
+}: {
+  address: string
+  provider: Provider
+  sourceWallet: Wallet
+  networkType: NetworkType
+  amount?: BigNumber
+}) {
+  console.log(`Funding ETH ${address} on ${networkType}...`)
+  const balance = await provider.getBalance(address)
+  // Fund only if the balance is less than 2 eth
+  if (balance.lt(amount)) {
+    const tx = await sourceWallet.connect(provider).sendTransaction({
+      to: address,
+      value: amount
+    })
+    await tx.wait()
+  }
+}
+
+export async function getCustomDestinationAddress() {
+  console.log('Getting custom destination address...')
+  return (await Wallet.createRandom().getAddress()).toLowerCase()
+}
+
+export function setupCypressTasks(
+  on: Cypress.PluginEvents,
+  { requiresNetworkSetup }: { requiresNetworkSetup: boolean }
+) {
+  let currentNetworkName: NetworkName | null = null
+  let networkSetupComplete = !requiresNetworkSetup
+  let walletConnectedToDapp = false
+
+  on('task', {
+    setCurrentNetworkName: (networkName: NetworkName) => {
+      currentNetworkName = networkName
+      return null
+    },
+    getCurrentNetworkName: () => {
+      return currentNetworkName
+    },
+    setNetworkSetupComplete: () => {
+      networkSetupComplete = true
+      return null
+    },
+    getNetworkSetupComplete: () => {
+      return networkSetupComplete
+    },
+    setWalletConnectedToDapp: () => {
+      walletConnectedToDapp = true
+      return null
+    },
+    getWalletConnectedToDapp: () => {
+      return walletConnectedToDapp
+    }
+  })
+}
diff --git a/packages/arb-token-bridge-ui/tests/support/index.ts b/packages/arb-token-bridge-ui/tests/support/index.ts
index 7d992ca6e9..e02bb38ad5 100644
--- a/packages/arb-token-bridge-ui/tests/support/index.ts
+++ b/packages/arb-token-bridge-ui/tests/support/index.ts
@@ -1,4 +1,3 @@
-import './commands'
 import '@synthetixio/synpress/support'
 import logCollector from 'cypress-terminal-report/src/installLogsCollector'
 
@@ -7,6 +6,7 @@ import {
   getL2NetworkConfig,
   getL2TestnetNetworkConfig
 } from './common'
+import './commands'
 
 logCollector({
   collectTypes: [
@@ -15,7 +15,6 @@ logCollector({
     'cons:debug',
     'cons:error',
     'cons:info',
-    'cons:log',
     'cons:warn'
   ]
 })
diff --git a/tsconfig.eslint.json b/tsconfig.eslint.json
index 456b61d6a1..d0a591b7ca 100644
--- a/tsconfig.eslint.json
+++ b/tsconfig.eslint.json
@@ -10,6 +10,7 @@
     // adding eslintrc here fixes eslint from throwing an error
     // https://stackoverflow.com/questions/63118405/how-to-fix-eslintrc-the-file-does-not-match-your-project-config
     ".eslintrc.js",
-    "./packages/arb-token-bridge-ui/tests/**/*.ts"
+    "./packages/arb-token-bridge-ui/tests/**/*.ts",
+    "./packages/arb-token-bridge-ui/synpress*.ts"
   ]
 }

From 3576313f0ce30e6f0d8a05fc03da03c590ff3620 Mon Sep 17 00:00:00 2001
From: Fionna Chan <13184582+fionnachan@users.noreply.github.com>
Date: Tue, 3 Sep 2024 18:38:47 +0800
Subject: [PATCH 3/4] refactor: move customFeeTokenBalances into a hook (#1872)

---
 .../TransferPanel/TransferPanelMain.tsx       | 32 +-------
 .../DestinationNetworkBox.tsx                 | 20 ++---
 .../TransferPanelMain/SourceNetworkBox.tsx    |  9 +--
 .../TransferPanelMain/useMaxAmount.ts         | 47 ++++-------
 .../useNativeCurrencyBalances.ts              | 48 ++++++++++++
 .../TransferPanel/TransferPanelMainInput.tsx  | 78 +++++--------------
 6 files changed, 91 insertions(+), 143 deletions(-)
 create mode 100644 packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/useNativeCurrencyBalances.ts

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx
index 2d9d797c46..689fca821b 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx
+++ b/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>
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
index 4df5ac0201..d860364eb7 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
+++ b/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,7 +103,7 @@ function DestinationNetworkBalance({
 
   return (
     <ETHBalance
-      balance={isDepositMode ? ethChildBalance : ethParentBalance}
+      balance={nativeCurrencyBalances.destinationBalance}
       on={isDepositMode ? NetworkType.childChain : NetworkType.parentChain}
       prefix="Balance: "
     />
@@ -118,10 +111,8 @@ function DestinationNetworkBalance({
 }
 
 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}
                 />
               )}
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx
index b41ba30d1c..714e85102b 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx
+++ b/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}
             />
           )}
 
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/useMaxAmount.ts b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/useMaxAmount.ts
index b9c6d9a14d..f7d6d6b4ce 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/useMaxAmount.ts
+++ b/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(() => {
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/useNativeCurrencyBalances.ts b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/useNativeCurrencyBalances.ts
new file mode 100644
index 0000000000..799148769a
--- /dev/null
+++ b/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
+  ])
+}
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMainInput.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMainInput.tsx
index c10a404096..a58e79aec7 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMainInput.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMainInput.tsx
@@ -10,12 +10,8 @@ import { useMemo } from 'react'
 import { TokenButton, TokenButtonOptions } from './TokenButton'
 import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
-import {
-  Balances,
-  useSelectedTokenBalances
-} from '../../hooks/TransferPanel/useSelectedTokenBalances'
+import { useSelectedTokenBalances } from '../../hooks/TransferPanel/useSelectedTokenBalances'
 import { useAppState } from '../../state'
-import { useBalances } from '../../hooks/useBalances'
 import { TransferReadinessRichErrorMessage } from './useTransferReadinessUtils'
 import { ExternalLink } from '../common/ExternalLink'
 import { useTransferDisabledDialogStore } from './TransferDisabledDialog'
@@ -24,59 +20,39 @@ import { useNativeCurrency } from '../../hooks/useNativeCurrency'
 import { Loader } from '../common/atoms/Loader'
 import { sanitizeAmountQueryParam } from '../../hooks/useArbQueryParams'
 import { truncateExtraDecimals } from '../../util/NumberUtils'
+import { useNativeCurrencyBalances } from './TransferPanelMain/useNativeCurrencyBalances'
 
 function MaxButton({
-  customFeeTokenBalances,
   className = '',
   ...rest
-}: React.ButtonHTMLAttributes<HTMLButtonElement> & {
-  customFeeTokenBalances: Balances
-}) {
+}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
   const {
     app: { selectedToken }
   } = useAppState()
   const [networks] = useNetworks()
-  const { isDepositMode, childChainProvider } =
-    useNetworksRelationship(networks)
+  const { isDepositMode } = useNetworksRelationship(networks)
 
-  const { ethParentBalance, ethChildBalance } = useBalances()
   const selectedTokenBalances = useSelectedTokenBalances()
-  const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
+  const nativeCurrencyBalances = useNativeCurrencyBalances()
 
   const maxButtonVisible = useMemo(() => {
-    const ethBalance = isDepositMode ? ethParentBalance : ethChildBalance
-    const customFeeTokenBalance = isDepositMode
-      ? customFeeTokenBalances.parentBalance
-      : customFeeTokenBalances.childBalance
+    const nativeCurrencySourceBalance = nativeCurrencyBalances.sourceBalance
+
     const tokenBalance = isDepositMode
       ? selectedTokenBalances.parentBalance
       : selectedTokenBalances.childBalance
 
     if (selectedToken) {
-      if (!tokenBalance) {
-        return false
-      }
-
-      return !tokenBalance.isZero()
+      return tokenBalance && !tokenBalance.isZero()
     }
 
-    if (nativeCurrency.isCustom) {
-      return customFeeTokenBalance && !customFeeTokenBalance.isZero()
-    }
-
-    if (!ethBalance) {
-      return false
-    }
-
-    return !ethBalance.isZero()
+    return nativeCurrencySourceBalance && !nativeCurrencySourceBalance.isZero()
   }, [
+    nativeCurrencyBalances.sourceBalance,
     isDepositMode,
-    ethParentBalance,
-    ethChildBalance,
-    customFeeTokenBalances,
-    selectedTokenBalances,
-    selectedToken,
-    nativeCurrency.isCustom
+    selectedTokenBalances.parentBalance,
+    selectedTokenBalances.childBalance,
+    selectedToken
   ])
 
   if (!maxButtonVisible) {
@@ -98,10 +74,8 @@ function MaxButton({
 }
 
 function SourceChainTokenBalance({
-  customFeeTokenBalances,
   balanceOverride
 }: {
-  customFeeTokenBalances: Balances
   balanceOverride?: AmountInputOptions['balance']
 }) {
   const {
@@ -111,7 +85,7 @@ function SourceChainTokenBalance({
   const { isDepositMode, childChainProvider } =
     useNetworksRelationship(networks)
 
-  const { ethParentBalance, ethChildBalance } = useBalances()
+  const nativeCurrencyBalances = useNativeCurrencyBalances()
   const selectedTokenBalances = useSelectedTokenBalances()
 
   const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
@@ -120,17 +94,9 @@ function SourceChainTokenBalance({
     ? selectedTokenBalances.parentBalance
     : selectedTokenBalances.childBalance
 
-  const ethBalance = isDepositMode ? ethParentBalance : ethChildBalance
-  const customFeeTokenBalance = isDepositMode
-    ? customFeeTokenBalances.parentBalance
-    : customFeeTokenBalances.childBalance
-
-  const nativeCurrencyBalance = nativeCurrency.isCustom
-    ? customFeeTokenBalance
-    : ethBalance
-
   const balance =
-    balanceOverride ?? (selectedToken ? tokenBalance : nativeCurrencyBalance)
+    balanceOverride ??
+    (selectedToken ? tokenBalance : nativeCurrencyBalances.sourceBalance)
 
   const formattedBalance = balance
     ? formatAmount(balance, {
@@ -238,7 +204,6 @@ export type TransferPanelMainInputProps =
     maxButtonOnClick: React.ButtonHTMLAttributes<HTMLButtonElement>['onClick']
     value: string
     options?: AmountInputOptions
-    customFeeTokenBalances: Balances
     maxAmount: string | undefined
     isMaxAmount: boolean
     decimals: number
@@ -254,7 +219,6 @@ export const TransferPanelMainInput = React.memo(
     isMaxAmount,
     decimals,
     options,
-    customFeeTokenBalances,
     ...rest
   }: TransferPanelMainInputProps) => {
     const [localValue, setLocalValue] = useState(value)
@@ -310,14 +274,8 @@ export const TransferPanelMainInput = React.memo(
             <div className="flex flex-col items-end">
               <TokenButton options={options} />
               <div className="flex items-center space-x-1 px-3 pb-2 pt-1">
-                <SourceChainTokenBalance
-                  customFeeTokenBalances={customFeeTokenBalances}
-                  balanceOverride={options?.balance}
-                />
-                <MaxButton
-                  onClick={handleMaxButtonClick}
-                  customFeeTokenBalances={customFeeTokenBalances}
-                />
+                <SourceChainTokenBalance balanceOverride={options?.balance} />
+                <MaxButton onClick={handleMaxButtonClick} />
               </div>
             </div>
           </div>

From 59756ff795b8b4b91cbd5d7328e1f171f62ea3ae Mon Sep 17 00:00:00 2001
From: Dewansh <dparashar@offchainlabs.com>
Date: Tue, 3 Sep 2024 19:40:43 +0530
Subject: [PATCH 4/4] chore: rename teleporter helpers (#1823)

---
 .../TransactionsTableDetailsSteps.tsx         | 21 +++++++++----------
 .../TransactionsTableRowAction.tsx            |  4 ++--
 .../components/TransactionHistory/helpers.ts  |  5 ++---
 .../components/common/TransferCountdown.tsx   |  4 ++--
 .../src/hooks/useArbTokenBridge.ts            |  4 ++--
 .../src/hooks/useNetworksRelationship.ts      |  4 ++--
 .../src/hooks/useRedeemTeleporter.ts          |  5 ++---
 .../src/hooks/useTransactionHistory.ts        |  8 +++----
 .../src/hooks/useTransactions.ts              |  2 +-
 .../src/hooks/useTransferDuration.ts          |  4 ++--
 .../src/state/app/utils.ts                    |  9 ++++----
 .../src/token-bridge-sdk/teleport.ts          |  2 +-
 .../src/token-bridge-sdk/utils.ts             |  9 +++++---
 .../src/util/RetryableUtils.ts                |  9 ++------
 .../src/util/TokenUtils.ts                    |  4 ++--
 .../src/util/deposits/helpers.ts              | 13 ++++--------
 .../fetchEthTeleportsFromSubgraph.ts          |  4 ++--
 .../src/util/teleports/fetchTeleports.ts      |  4 ++--
 18 files changed, 52 insertions(+), 63 deletions(-)

diff --git a/packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionsTableDetailsSteps.tsx b/packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionsTableDetailsSteps.tsx
index 61a321c1ac..a349b939ff 100644
--- a/packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionsTableDetailsSteps.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionsTableDetailsSteps.tsx
@@ -21,7 +21,7 @@ import { ExternalLink } from '../common/ExternalLink'
 import { TransferCountdown } from '../common/TransferCountdown'
 import { isDepositReadyToRedeem } from '../../state/app/utils'
 import { Address } from '../../util/AddressUtils'
-import { isTeleport } from '@/token-bridge-sdk/teleport'
+import { isTeleportTx } from '../../hooks/useTransactions'
 import {
   firstRetryableLegRequiresRedeem,
   secondRetryableLegForTeleportRequiresRedeem
@@ -31,7 +31,6 @@ import {
   minutesToHumanReadableTime,
   useTransferDuration
 } from '../../hooks/useTransferDuration'
-import { isTeleporterTransaction } from '../../hooks/useTransactions'
 
 function needsToClaimTransfer(tx: MergedTransaction) {
   return tx.isCctp || tx.isWithdrawal
@@ -119,7 +118,7 @@ const LastStepEndItem = ({
   const destinationChainId = tx.isWithdrawal
     ? tx.parentChainId
     : tx.childChainId
-  const isTeleportTx = isTeleport(tx) && isTeleporterTransaction(tx)
+  const isTeleport = isTeleportTx(tx)
 
   if (destinationNetworkTxId) {
     return (
@@ -134,8 +133,8 @@ const LastStepEndItem = ({
   }
 
   if (
-    (!isTeleportTx && isDepositReadyToRedeem(tx)) ||
-    (isTeleportTx && secondRetryableLegForTeleportRequiresRedeem(tx))
+    (!isTeleport && isDepositReadyToRedeem(tx)) ||
+    (isTeleport && secondRetryableLegForTeleportRequiresRedeem(tx))
   ) {
     return (
       <TransactionsTableRowAction
@@ -181,9 +180,9 @@ export const TransactionsTableDetailsSteps = ({
       tx.depositStatus
     )
 
-  const isTeleportTx = isTeleport(tx) && isTeleporterTransaction(tx)
+  const isTeleport = isTeleportTx(tx)
 
-  const isDestinationChainFailure = isTeleportTx
+  const isDestinationChainFailure = isTeleport
     ? secondRetryableLegForTeleportRequiresRedeem(tx)
     : !isSourceChainDepositFailure && isTxFailed(tx)
 
@@ -194,7 +193,7 @@ export const TransactionsTableDetailsSteps = ({
     if (isTxExpired(tx)) {
       return `Transaction expired on ${networkName}`
     }
-    if (isTeleportTx && firstRetryableLegRequiresRedeem(tx)) {
+    if (isTeleport && firstRetryableLegRequiresRedeem(tx)) {
       return fundsArrivedText
     }
 
@@ -205,7 +204,7 @@ export const TransactionsTableDetailsSteps = ({
       return `Transaction failed on ${networkName}.`
     }
     return fundsArrivedText
-  }, [tx, isDestinationChainFailure, isTeleportTx])
+  }, [tx, isDestinationChainFailure, isTeleport])
 
   return (
     <div className="flex flex-col text-xs">
@@ -226,7 +225,7 @@ export const TransactionsTableDetailsSteps = ({
       />
 
       {/* Pending transfer showing the remaining time */}
-      {!isTeleport(tx) && (
+      {!isTeleportTx(tx) && (
         <Step
           pending={isTxPending(tx)}
           done={!isTxPending(tx) && !isSourceChainDepositFailure}
@@ -241,7 +240,7 @@ export const TransactionsTableDetailsSteps = ({
         />
       )}
 
-      {isTeleport(tx) && isTeleporterTransaction(tx) && (
+      {isTeleportTx(tx) && (
         <TransactionsTableDetailsTeleporterSteps tx={tx} address={address} />
       )}
 
diff --git a/packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionsTableRowAction.tsx b/packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionsTableRowAction.tsx
index 65da87e937..af4fe167ef 100644
--- a/packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionsTableRowAction.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionsTableRowAction.tsx
@@ -19,7 +19,7 @@ import { useRedeemRetryable } from '../../hooks/useRedeemRetryable'
 import { TransferCountdown } from '../common/TransferCountdown'
 import { Address } from '../../util/AddressUtils'
 import { getChainIdForRedeemingRetryable } from '../../util/RetryableUtils'
-import { isTeleport } from '@/token-bridge-sdk/teleport'
+import { isTeleportTx } from '../../hooks/useTransactions'
 import { useRedeemTeleporter } from '../../hooks/useRedeemTeleporter'
 import { sanitizeTokenSymbol } from '../../util/TokenUtils'
 import { formatAmount } from '../../util/NumberUtils'
@@ -67,7 +67,7 @@ export function TransactionsTableRowAction({
         await switchNetworkAsync?.(chainIdForRedeemingRetryable)
       }
 
-      if (isTeleport(tx)) {
+      if (isTeleportTx(tx)) {
         await teleporterRedeem()
       } else {
         await redeem()
diff --git a/packages/arb-token-bridge-ui/src/components/TransactionHistory/helpers.ts b/packages/arb-token-bridge-ui/src/components/TransactionHistory/helpers.ts
index b5007f77a7..51d7f0001f 100644
--- a/packages/arb-token-bridge-ui/src/components/TransactionHistory/helpers.ts
+++ b/packages/arb-token-bridge-ui/src/components/TransactionHistory/helpers.ts
@@ -25,11 +25,10 @@ import { AssetType } from '../../hooks/arbTokenBridge.types'
 import { getDepositStatus } from '../../state/app/utils'
 import { getBlockBeforeConfirmation } from '../../state/cctpState'
 import { getAttestationHashAndMessageFromReceipt } from '../../util/cctp/getAttestationHashAndMessageFromReceipt'
-import { isTeleport } from '@/token-bridge-sdk/teleport'
 import { getOutgoingMessageState } from '../../util/withdrawals/helpers'
 import { getUniqueIdOrHashFromEvent } from '../../hooks/useArbTokenBridge'
 import { getProviderForChainId } from '../../token-bridge-sdk/utils'
-import { isTeleporterTransaction } from '../../hooks/useTransactions'
+import { isTeleportTx } from '../../hooks/useTransactions'
 
 const PARENT_CHAIN_TX_DETAILS_OF_CLAIM_TX =
   'arbitrum:bridge:claim:parent:tx:details'
@@ -639,7 +638,7 @@ export function getDestinationNetworkTxId(tx: MergedTransaction) {
     return tx.cctpData?.receiveMessageTransactionHash
   }
 
-  if (isTeleport(tx) && isTeleporterTransaction(tx)) {
+  if (isTeleportTx(tx)) {
     return tx.l2ToL3MsgData?.l3TxID
   }
 
diff --git a/packages/arb-token-bridge-ui/src/components/common/TransferCountdown.tsx b/packages/arb-token-bridge-ui/src/components/common/TransferCountdown.tsx
index 81236de87c..5806342bc8 100644
--- a/packages/arb-token-bridge-ui/src/components/common/TransferCountdown.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/TransferCountdown.tsx
@@ -5,7 +5,7 @@ import {
   useTransferDuration
 } from '../../hooks/useTransferDuration'
 import { isNetwork } from '../../util/networks'
-import { isTeleporterTransaction } from '../../hooks/useTransactions'
+import { isTeleportTx } from '../../hooks/useTransactions'
 
 /**
  * Displays a transfer countdown for a deposit, withdrawal, or cctp.
@@ -30,7 +30,7 @@ export function TransferCountdown({
     return <span>Calculating...</span>
   }
 
-  const isTeleport = isTeleporterTransaction(tx)
+  const isTeleport = isTeleportTx(tx)
   // To get the first retryable only, we subtract the Orbit deposit time (second retryable)
   if (isTeleport && firstLegOnly) {
     estimatedMinutesLeft -= getOrbitDepositDuration(isTestnet)
diff --git a/packages/arb-token-bridge-ui/src/hooks/useArbTokenBridge.ts b/packages/arb-token-bridge-ui/src/hooks/useArbTokenBridge.ts
index 728068a079..955e15a097 100644
--- a/packages/arb-token-bridge-ui/src/hooks/useArbTokenBridge.ts
+++ b/packages/arb-token-bridge-ui/src/hooks/useArbTokenBridge.ts
@@ -34,7 +34,7 @@ import { getL2NativeToken } from '../util/L2NativeUtils'
 import { CommonAddress } from '../util/CommonAddressUtils'
 import { isNetwork } from '../util/networks'
 import { useDestinationAddressStore } from '../components/TransferPanel/AdvancedSettings'
-import { isTeleport } from '../token-bridge-sdk/teleport'
+import { isValidTeleportChainPair } from '@/token-bridge-sdk/teleport'
 import { getProviderForChainId } from '@/token-bridge-sdk/utils'
 
 export const wait = (ms = 0) => {
@@ -319,7 +319,7 @@ export const useArbTokenBridge = (
       // while deriving the child-chain address, it can be a teleport transfer too, in that case derive L3 address from L1 address
       // else, derive the L2 address from L1 address OR L3 address from L2 address
       if (
-        isTeleport({
+        isValidTeleportChainPair({
           sourceChainId: l1.network.id,
           destinationChainId: l2.network.id
         })
diff --git a/packages/arb-token-bridge-ui/src/hooks/useNetworksRelationship.ts b/packages/arb-token-bridge-ui/src/hooks/useNetworksRelationship.ts
index 3f325b4e62..cb3d25ddfc 100644
--- a/packages/arb-token-bridge-ui/src/hooks/useNetworksRelationship.ts
+++ b/packages/arb-token-bridge-ui/src/hooks/useNetworksRelationship.ts
@@ -3,7 +3,7 @@ import { useMemo } from 'react'
 import { Chain } from 'wagmi'
 import { UseNetworksState } from './useNetworks'
 import { isDepositMode } from '../util/isDepositMode'
-import { isTeleport } from '@/token-bridge-sdk/teleport'
+import { isValidTeleportChainPair } from '@/token-bridge-sdk/teleport'
 
 type UseNetworksRelationshipState = {
   childChain: Chain
@@ -25,7 +25,7 @@ export function useNetworksRelationship({
       destinationChainId: destinationChain.id
     })
 
-    const isTeleportMode = isTeleport({
+    const isTeleportMode = isValidTeleportChainPair({
       sourceChainId: sourceChain.id,
       destinationChainId: destinationChain.id
     })
diff --git a/packages/arb-token-bridge-ui/src/hooks/useRedeemTeleporter.ts b/packages/arb-token-bridge-ui/src/hooks/useRedeemTeleporter.ts
index a4c4dd6980..4845c0e67f 100644
--- a/packages/arb-token-bridge-ui/src/hooks/useRedeemTeleporter.ts
+++ b/packages/arb-token-bridge-ui/src/hooks/useRedeemTeleporter.ts
@@ -7,7 +7,6 @@ import {
 import { useSigner } from 'wagmi'
 import dayjs from 'dayjs'
 import { getProviderForChainId } from '@/token-bridge-sdk/utils'
-import { isTeleport } from '@/token-bridge-sdk/teleport'
 import {
   DepositStatus,
   MergedTransaction,
@@ -27,7 +26,7 @@ import { isUserRejectedError } from '../util/isUserRejectedError'
 import { errorToast } from '../components/common/atoms/Toast'
 import { useTransactionHistory } from './useTransactionHistory'
 import { Address } from '../util/AddressUtils'
-import { isTeleporterTransaction, L2ToL3MessageData } from './useTransactions'
+import { isTeleportTx, L2ToL3MessageData } from './useTransactions'
 import { UseRedeemRetryableResult } from './useRedeemRetryable'
 import { getUpdatedTeleportTransfer } from '../components/TransactionHistory/helpers'
 
@@ -172,7 +171,7 @@ export function useRedeemTeleporter(
       return
     }
 
-    if (!isTeleport(tx) || !isTeleporterTransaction(tx)) {
+    if (!isTeleportTx(tx)) {
       throw new Error(
         'The transaction being redeemed is not a LayerLeap transaction.'
       )
diff --git a/packages/arb-token-bridge-ui/src/hooks/useTransactionHistory.ts b/packages/arb-token-bridge-ui/src/hooks/useTransactionHistory.ts
index 4523226c31..080c2f0eca 100644
--- a/packages/arb-token-bridge-ui/src/hooks/useTransactionHistory.ts
+++ b/packages/arb-token-bridge-ui/src/hooks/useTransactionHistory.ts
@@ -17,7 +17,7 @@ import {
   L2ToL1EventResultPlus,
   WithdrawalInitiated
 } from './arbTokenBridge.types'
-import { isTeleporterTransaction, Transaction } from './useTransactions'
+import { isTeleportTx, Transaction } from './useTransactions'
 import { MergedTransaction } from '../state/app/state'
 import {
   getStandardizedTimestamp,
@@ -51,7 +51,7 @@ import {
   shouldIncludeReceivedTxs,
   shouldIncludeSentTxs
 } from '../util/SubgraphUtils'
-import { isTeleport } from '@/token-bridge-sdk/teleport'
+import { isValidTeleportChainPair } from '@/token-bridge-sdk/teleport'
 import { getProviderForChainId } from '@/token-bridge-sdk/utils'
 import { Address } from '../util/AddressUtils'
 import {
@@ -377,7 +377,7 @@ const useTransactionHistoryWithoutStatuses = (address: Address | undefined) => {
             try {
               // early check for fetching teleport
               if (
-                isTeleport({
+                isValidTeleportChainPair({
                   sourceChainId: chainPair.parentChainId,
                   destinationChainId: chainPair.childChainId
                 })
@@ -716,7 +716,7 @@ export const useTransactionHistory = (
         return
       }
 
-      if (isTeleport(tx) && isTeleporterTransaction(tx)) {
+      if (isTeleportTx(tx)) {
         const updatedTeleportTransfer = await getUpdatedTeleportTransfer(tx)
         updateCachedTransaction(updatedTeleportTransfer)
         return
diff --git a/packages/arb-token-bridge-ui/src/hooks/useTransactions.ts b/packages/arb-token-bridge-ui/src/hooks/useTransactions.ts
index b2fd7b83b6..616ebbaa6e 100644
--- a/packages/arb-token-bridge-ui/src/hooks/useTransactions.ts
+++ b/packages/arb-token-bridge-ui/src/hooks/useTransactions.ts
@@ -133,7 +133,7 @@ export interface DepositTransaction extends Transaction {
   type: 'deposit' | 'deposit-l1'
 }
 
-export function isTeleporterTransaction(
+export function isTeleportTx(
   tx: Transaction | MergedTransaction
 ): tx is TeleporterTransaction | TeleporterMergedTransaction {
   return (tx as TeleporterTransaction).l2ToL3MsgData !== undefined
diff --git a/packages/arb-token-bridge-ui/src/hooks/useTransferDuration.ts b/packages/arb-token-bridge-ui/src/hooks/useTransferDuration.ts
index e5c0264625..7fb58bf135 100644
--- a/packages/arb-token-bridge-ui/src/hooks/useTransferDuration.ts
+++ b/packages/arb-token-bridge-ui/src/hooks/useTransferDuration.ts
@@ -1,5 +1,5 @@
 import dayjs from 'dayjs'
-import { isTeleport } from '@/token-bridge-sdk/teleport'
+import { isValidTeleportChainPair } from '@/token-bridge-sdk/teleport'
 
 import { MergedTransaction } from '../state/app/state'
 import { useRemainingTimeCctp } from '../state/cctpState'
@@ -61,7 +61,7 @@ export const useTransferDuration = (
   const standardDepositDuration = getStandardDepositDuration(isTestnet)
   const orbitDepositDuration = getOrbitDepositDuration(isTestnet)
 
-  if (isTeleport({ sourceChainId, destinationChainId })) {
+  if (isValidTeleportChainPair({ sourceChainId, destinationChainId })) {
     // Deposit only
     return {
       approximateDurationInMinutes:
diff --git a/packages/arb-token-bridge-ui/src/state/app/utils.ts b/packages/arb-token-bridge-ui/src/state/app/utils.ts
index e6e9580fc6..695b4bcabd 100644
--- a/packages/arb-token-bridge-ui/src/state/app/utils.ts
+++ b/packages/arb-token-bridge-ui/src/state/app/utils.ts
@@ -14,12 +14,11 @@ import {
   OutgoingMessageState
 } from '../../hooks/arbTokenBridge.types'
 import {
-  isTeleporterTransaction,
+  isTeleportTx,
   TeleporterTransaction,
   Transaction
 } from '../../hooks/useTransactions'
 import { getUniqueIdOrHashFromEvent } from '../../hooks/useArbTokenBridge'
-import { isTeleport } from '../../token-bridge-sdk/teleport'
 import {
   firstRetryableLegRequiresRedeem,
   secondRetryableLegForTeleportRequiresRedeem
@@ -62,7 +61,7 @@ export const getDepositStatus = (
     return DepositStatus.L1_PENDING
   }
 
-  if (isTeleporterTransaction(tx)) {
+  if (isTeleportTx(tx)) {
     const { l2ToL3MsgData, parentToChildMsgData } = tx
 
     // if any of the retryable info is missing, first fetch might be pending
@@ -166,7 +165,7 @@ export const transformDeposit = (
     sourceChainId: Number(tx.l1NetworkID),
     destinationChainId: Number(tx.l2NetworkID)
   }
-  if (isTeleporterTransaction(tx)) {
+  if (isTeleportTx(tx)) {
     return {
       ...transaction,
       l2ToL3MsgData: tx.l2ToL3MsgData
@@ -298,7 +297,7 @@ export const isWithdrawalReadyToClaim = (tx: MergedTransaction) => {
 }
 
 export const isDepositReadyToRedeem = (tx: MergedTransaction) => {
-  if (isTeleport(tx) && isTeleporterTransaction(tx)) {
+  if (isTeleportTx(tx)) {
     return (
       firstRetryableLegRequiresRedeem(tx) ||
       secondRetryableLegForTeleportRequiresRedeem(tx)
diff --git a/packages/arb-token-bridge-ui/src/token-bridge-sdk/teleport.ts b/packages/arb-token-bridge-ui/src/token-bridge-sdk/teleport.ts
index 83599b6e6c..34cfb7c96e 100644
--- a/packages/arb-token-bridge-ui/src/token-bridge-sdk/teleport.ts
+++ b/packages/arb-token-bridge-ui/src/token-bridge-sdk/teleport.ts
@@ -14,7 +14,7 @@ import { getChainIdFromProvider, getProviderForChainId } from './utils'
 import { TELEPORT_ALLOWLIST } from '../util/networks'
 import { addressIsSmartContract } from '../util/AddressUtils'
 
-export const isTeleport = ({
+export const isValidTeleportChainPair = ({
   sourceChainId,
   destinationChainId
 }: {
diff --git a/packages/arb-token-bridge-ui/src/token-bridge-sdk/utils.ts b/packages/arb-token-bridge-ui/src/token-bridge-sdk/utils.ts
index 480d2cf627..7dbf694b29 100644
--- a/packages/arb-token-bridge-ui/src/token-bridge-sdk/utils.ts
+++ b/packages/arb-token-bridge-ui/src/token-bridge-sdk/utils.ts
@@ -3,7 +3,7 @@ import { Provider, StaticJsonRpcProvider } from '@ethersproject/providers'
 
 import { ChainId, isNetwork, rpcURLs } from '../util/networks'
 import { BridgeTransferStarterPropsWithChainIds } from './BridgeTransferStarter'
-import { isTeleport as isTeleportTransfer } from './teleport'
+import { isValidTeleportChainPair } from './teleport'
 import {
   Erc20Bridger,
   Erc20L1L3Bridger,
@@ -48,7 +48,10 @@ export const getBridgeTransferProperties = (
     (isSourceChainOrbit && isDestinationChainEthereumMainnetOrTestnet) || // l2 orbit chains to l1
     (isSourceChainOrbit && isDestinationChainArbitrum) // l3 orbit chains to l1
 
-  const isTeleport = isTeleportTransfer({ sourceChainId, destinationChainId })
+  const isTeleport = isValidTeleportChainPair({
+    sourceChainId,
+    destinationChainId
+  })
 
   const isNativeCurrencyTransfer =
     typeof props.sourceChainErc20Address === 'undefined'
@@ -83,7 +86,7 @@ export const getBridger = async ({
 }) => {
   const destinationChainProvider = getProviderForChainId(destinationChainId)
 
-  if (isTeleportTransfer({ sourceChainId, destinationChainId })) {
+  if (isValidTeleportChainPair({ sourceChainId, destinationChainId })) {
     const l3Network = await getArbitrumNetwork(destinationChainId)
 
     return isNativeCurrencyTransfer
diff --git a/packages/arb-token-bridge-ui/src/util/RetryableUtils.ts b/packages/arb-token-bridge-ui/src/util/RetryableUtils.ts
index e1771510f5..da1111d787 100644
--- a/packages/arb-token-bridge-ui/src/util/RetryableUtils.ts
+++ b/packages/arb-token-bridge-ui/src/util/RetryableUtils.ts
@@ -7,12 +7,11 @@ import { Signer } from '@ethersproject/abstract-signer'
 import { Provider } from '@ethersproject/abstract-provider'
 import dayjs from 'dayjs'
 import { JsonRpcProvider } from '@ethersproject/providers'
-import { isTeleport } from '@/token-bridge-sdk/teleport'
 import {
   MergedTransaction,
   TeleporterMergedTransaction
 } from '../state/app/state'
-import { isTeleporterTransaction } from '../hooks/useTransactions'
+import { isTeleportTx } from '../hooks/useTransactions'
 
 type GetRetryableTicketParams = {
   parentChainTxHash: string
@@ -144,11 +143,7 @@ export const secondRetryableLegForTeleportRequiresRedeem = (
 
 export const getChainIdForRedeemingRetryable = (tx: MergedTransaction) => {
   // which chain id needs to be connected to, to redeem the retryable ticket
-  if (
-    isTeleport(tx) &&
-    isTeleporterTransaction(tx) &&
-    firstRetryableLegRequiresRedeem(tx)
-  ) {
+  if (isTeleportTx(tx) && firstRetryableLegRequiresRedeem(tx)) {
     // in teleport, unless it's the final retryable being redeemed, we need to connect to the l2 chain
     if (!tx.l2ToL3MsgData) {
       throw Error(
diff --git a/packages/arb-token-bridge-ui/src/util/TokenUtils.ts b/packages/arb-token-bridge-ui/src/util/TokenUtils.ts
index 54a8af215b..91318f35e7 100644
--- a/packages/arb-token-bridge-ui/src/util/TokenUtils.ts
+++ b/packages/arb-token-bridge-ui/src/util/TokenUtils.ts
@@ -17,7 +17,7 @@ import { ERC20BridgeToken, TokenType } from '../hooks/arbTokenBridge.types'
 import { getBridger, getChainIdFromProvider } from '../token-bridge-sdk/utils'
 import {
   getL2ConfigForTeleport,
-  isTeleport
+  isValidTeleportChainPair
 } from '../token-bridge-sdk/teleport'
 import { captureSentryErrorWithExtraData } from './SentryUtils'
 
@@ -483,7 +483,7 @@ export async function isGatewayRegistered({
   // for now, we are returning true since we are limiting the tokens to teleport, but we will expand this once we expand the allowList
   const sourceChainId = await getChainIdFromProvider(parentChainProvider)
   const destinationChainId = await getChainIdFromProvider(childChainProvider)
-  if (isTeleport({ sourceChainId, destinationChainId })) {
+  if (isValidTeleportChainPair({ sourceChainId, destinationChainId })) {
     return true
   }
 
diff --git a/packages/arb-token-bridge-ui/src/util/deposits/helpers.ts b/packages/arb-token-bridge-ui/src/util/deposits/helpers.ts
index f379a9c6d1..d3af5b97e3 100644
--- a/packages/arb-token-bridge-ui/src/util/deposits/helpers.ts
+++ b/packages/arb-token-bridge-ui/src/util/deposits/helpers.ts
@@ -17,13 +17,13 @@ import {
   L2ToL3MessageData,
   Transaction,
   TxnStatus,
-  TeleporterTransaction
+  TeleporterTransaction,
+  isTeleportTx
 } from '../../hooks/useTransactions'
 import { fetchErc20Data } from '../TokenUtils'
 import {
   getL2ConfigForTeleport,
-  fetchTeleportStatusFromTxId,
-  isTeleport
+  fetchTeleportStatusFromTxId
 } from '../../token-bridge-sdk/teleport'
 import { getProviderForChainId } from '../../token-bridge-sdk/utils'
 
@@ -68,12 +68,7 @@ export const updateAdditionalDepositData = async ({
       isClassic
     })
 
-  if (
-    isTeleport({
-      sourceChainId: depositTx.parentChainId,
-      destinationChainId: depositTx.childChainId
-    })
-  ) {
+  if (isTeleportTx(depositTx)) {
     const { status, timestampResolved, l1ToL2MsgData, l2ToL3MsgData } =
       await fetchTeleporterDepositStatusData({
         ...depositTx,
diff --git a/packages/arb-token-bridge-ui/src/util/teleports/fetchEthTeleportsFromSubgraph.ts b/packages/arb-token-bridge-ui/src/util/teleports/fetchEthTeleportsFromSubgraph.ts
index 62a5e05004..aacbee19a0 100644
--- a/packages/arb-token-bridge-ui/src/util/teleports/fetchEthTeleportsFromSubgraph.ts
+++ b/packages/arb-token-bridge-ui/src/util/teleports/fetchEthTeleportsFromSubgraph.ts
@@ -1,4 +1,4 @@
-import { isTeleport } from '../../token-bridge-sdk/teleport'
+import { isValidTeleportChainPair } from '../../token-bridge-sdk/teleport'
 import { hasL1Subgraph } from '../SubgraphUtils'
 import { getAPIBaseUrl, sanitizeQueryParams } from '../index'
 
@@ -81,7 +81,7 @@ export const fetchEthTeleportsFromSubgraph = async ({
 
   // don't query if not a valid teleport configuration
   if (
-    !isTeleport({
+    !isValidTeleportChainPair({
       sourceChainId: Number(l1ChainId),
       destinationChainId: Number(l3ChainId)
     })
diff --git a/packages/arb-token-bridge-ui/src/util/teleports/fetchTeleports.ts b/packages/arb-token-bridge-ui/src/util/teleports/fetchTeleports.ts
index c906992757..bfc245ac4b 100644
--- a/packages/arb-token-bridge-ui/src/util/teleports/fetchTeleports.ts
+++ b/packages/arb-token-bridge-ui/src/util/teleports/fetchTeleports.ts
@@ -10,7 +10,7 @@ import {
 } from './fetchErc20TeleportsFromSubgraph'
 import {
   getL2ConfigForTeleport,
-  isTeleport
+  isValidTeleportChainPair
 } from '../../token-bridge-sdk/teleport'
 import { getChainIdFromProvider } from '../../token-bridge-sdk/utils'
 
@@ -51,7 +51,7 @@ export const fetchTeleports = async ({
 
   // don't query if not a valid teleport configuration
   if (
-    !isTeleport({
+    !isValidTeleportChainPair({
       sourceChainId: l1ChainId,
       destinationChainId: l3ChainId
     })