refactor: change isDepositMode to getTransferMode

packages/arb-token-bridge-ui/src/components/App/App.tsx

@@ -40,7 +40,7 @@ import { HeaderConnectWalletButton } from '../common/HeaderConnectWalletButton'
 import { onDisconnectHandler } from '../../util/walletConnectUtils'
 import { addressIsSmartContract } from '../../util/AddressUtils'
 import { useSyncConnectedChainToAnalytics } from './useSyncConnectedChainToAnalytics'
-import { isDepositMode } from '../../util/isDepositMode'
+import { getTransferMode } from '../../util/getTransferMode'
 
 declare global {
   interface Window {
@@ -104,15 +104,20 @@ const ArbTokenBridgeStoreSyncWrapper = (): JSX.Element | null => {
       l2NetworkChainId: childChain.id
     })
 
-    if (
-      isDepositMode({
+    const { isDepositMode, isWithdrawalMode, isTeleportMode } = getTransferMode(
+      {
         sourceChainId: networks.sourceChain.id,
         destinationChainId: networks.destinationChain.id
-      })
-    ) {
+      }
+    )
+
+    if (isDepositMode) {
       console.info('Deposit mode detected:')
       actions.app.setConnectionState(ConnectionState.L1_CONNECTED)
-    } else {
+    } else if (isTeleportMode) {
+      console.info('Teleport mode detected:')
+      actions.app.setConnectionState(ConnectionState.L1_CONNECTED)
+    } else if (isWithdrawalMode) {
       console.info('Withdrawal mode detected:')
       actions.app.setConnectionState(ConnectionState.L2_CONNECTED)
     }
@@ -129,6 +134,7 @@ const ArbTokenBridgeStoreSyncWrapper = (): JSX.Element | null => {
     })
   }, [
     networks.sourceChain.id,
+    networks.destinationChain.id,
     parentChain.id,
     childChain.id,
     parentChain,

packages/arb-token-bridge-ui/src/hooks/useNetworksRelationship.ts

@@ -2,8 +2,7 @@ import { StaticJsonRpcProvider } from '@ethersproject/providers'
 import { useMemo } from 'react'
 import { Chain } from 'wagmi'
 import { UseNetworksState } from './useNetworks'
-import { isDepositMode } from '../util/isDepositMode'
-import { isValidTeleportChainPair } from '@/token-bridge-sdk/teleport'
+import { getTransferMode } from '../util/getTransferMode'
 
 type UseNetworksRelationshipState = {
   childChain: Chain
@@ -20,23 +19,18 @@ export function useNetworksRelationship({
   destinationChainProvider
 }: UseNetworksState): UseNetworksRelationshipState {
   return useMemo(() => {
-    const _isDepositMode = isDepositMode({
+    const { isDepositMode, isTeleportMode } = getTransferMode({
       sourceChainId: sourceChain.id,
       destinationChainId: destinationChain.id
     })
 
-    const isTeleportMode = isValidTeleportChainPair({
-      sourceChainId: sourceChain.id,
-      destinationChainId: destinationChain.id
-    })
-
-    if (_isDepositMode) {
+    if (isDepositMode || isTeleportMode) {
       return {
         childChain: destinationChain,
         childChainProvider: destinationChainProvider,
         parentChain: sourceChain,
         parentChainProvider: sourceChainProvider,
-        isDepositMode: _isDepositMode,
+        isDepositMode,
         isTeleportMode
       }
     }
@@ -46,7 +40,7 @@ export function useNetworksRelationship({
       childChainProvider: sourceChainProvider,
       parentChain: destinationChain,
       parentChainProvider: destinationChainProvider,
-      isDepositMode: _isDepositMode,
+      isDepositMode,
       isTeleportMode
     }
   }, [

packages/arb-token-bridge-ui/src/token-bridge-sdk/utils.ts

@@ -1,7 +1,7 @@
 import { BigNumber, Signer } from 'ethers'
 import { Provider, StaticJsonRpcProvider } from '@ethersproject/providers'
 
-import { ChainId, isNetwork, rpcURLs } from '../util/networks'
+import { ChainId, rpcURLs } from '../util/networks'
 import { BridgeTransferStarterPropsWithChainIds } from './BridgeTransferStarter'
 import { isValidTeleportChainPair } from './teleport'
 import {
@@ -11,7 +11,7 @@ import {
   EthL1L3Bridger,
   getArbitrumNetwork
 } from '@arbitrum/sdk'
-import { isDepositMode } from '../util/isDepositMode'
+import { getTransferMode } from '../util/getTransferMode'
 
 export const getAddressFromSigner = async (signer: Signer) => {
   const address = await signer.getAddress()
@@ -29,28 +29,11 @@ export const getBridgeTransferProperties = (
   const sourceChainId = props.sourceChainId
   const destinationChainId = props.destinationChainId
 
-  const isDestinationChainEthereumMainnetOrTestnet =
-    isNetwork(destinationChainId).isEthereumMainnetOrTestnet
-
-  const isSourceChainArbitrum = isNetwork(sourceChainId).isArbitrum
-  const isDestinationChainArbitrum = isNetwork(destinationChainId).isArbitrum
-
-  const isSourceChainOrbit = isNetwork(sourceChainId).isOrbitChain
-
-  const { isBase: isDestinationChainBase } = isNetwork(destinationChainId)
-
-  const isDeposit = isDepositMode({ sourceChainId, destinationChainId })
-
-  const isWithdrawal =
-    (isSourceChainArbitrum && isDestinationChainEthereumMainnetOrTestnet) || //  l2 arbitrum chains to l1
-    (isSourceChainOrbit && isDestinationChainEthereumMainnetOrTestnet) || // l2 orbit chains to l1
-    (isSourceChainOrbit && isDestinationChainArbitrum) || // l3 orbit chains to l1
-    (isSourceChainOrbit && isDestinationChainBase) // l3 orbit chain to Base l2
-
-  const isTeleport = isValidTeleportChainPair({
-    sourceChainId,
-    destinationChainId
-  })
+  const {
+    isDepositMode: isDeposit,
+    isWithdrawalMode: isWithdrawal,
+    isTeleportMode: isTeleport
+  } = getTransferMode({ sourceChainId, destinationChainId })
 
   const isNativeCurrencyTransfer =
     typeof props.sourceChainErc20Address === 'undefined'

packages/arb-token-bridge-ui/src/util/__tests__/getTransferMode.test.ts

@@ -0,0 +1,176 @@
+import { registerCustomArbitrumNetwork } from '@arbitrum/sdk'
+
+import { getTransferMode } from '../getTransferMode'
+import { ChainId } from '../networks'
+import { orbitMainnets } from '../orbitChainsList'
+
+beforeAll(() => {
+  const popApexChainId = 70700
+
+  const popApex = orbitMainnets[popApexChainId]
+
+  if (!popApex) {
+    throw new Error(`Could not find Pop Apex in the Orbit chains list.`)
+  }
+
+  registerCustomArbitrumNetwork(popApex)
+
+  const rariMainnetChainId = 1380012617
+
+  const rariMainnet = orbitMainnets[rariMainnetChainId]
+
+  if (!rariMainnet) {
+    throw new Error(`Could not find Rari Mainnet in the Orbit chains list.`)
+  }
+
+  registerCustomArbitrumNetwork(rariMainnet)
+})
+
+describe('getTransferMode', () => {
+  it('should return correctly for L1 source chain and L2 destination chain', () => {
+    const result1 = getTransferMode({
+      sourceChainId: ChainId.Ethereum,
+      destinationChainId: ChainId.ArbitrumOne
+    })
+    expect(result1).toEqual({
+      isDepositMode: true,
+      isWithdrawalMode: false,
+      isTeleportMode: false
+    })
+
+    const result2 = getTransferMode({
+      sourceChainId: ChainId.Ethereum,
+      destinationChainId: ChainId.ArbitrumNova
+    })
+
+    expect(result2).toEqual({
+      isDepositMode: true,
+      isWithdrawalMode: false,
+      isTeleportMode: false
+    })
+  })
+
+  it('should return correctly for L2 source chain and L3 destination chain', () => {
+    const result1 = getTransferMode({
+      sourceChainId: ChainId.ArbitrumOne,
+      destinationChainId: 70700 // PopApex
+    })
+    expect(result1).toEqual({
+      isDepositMode: true,
+      isWithdrawalMode: false,
+      isTeleportMode: false
+    })
+
+    const result2 = getTransferMode({
+      sourceChainId: ChainId.ArbitrumOne,
+      destinationChainId: 1380012617 // RARI mainnet
+    })
+
+    expect(result2).toEqual({
+      isDepositMode: true,
+      isWithdrawalMode: false,
+      isTeleportMode: false
+    })
+  })
+
+  it('should return correctly for L2 source chain and L1 destination chain', () => {
+    const result1 = getTransferMode({
+      sourceChainId: ChainId.ArbitrumOne,
+      destinationChainId: ChainId.Ethereum
+    })
+    expect(result1).toEqual({
+      isDepositMode: false,
+      isWithdrawalMode: true,
+      isTeleportMode: false
+    })
+
+    const result2 = getTransferMode({
+      sourceChainId: ChainId.ArbitrumNova,
+      destinationChainId: ChainId.Ethereum
+    })
+
+    expect(result2).toEqual({
+      isDepositMode: false,
+      isWithdrawalMode: true,
+      isTeleportMode: false
+    })
+  })
+
+  it('should return correctly for L3 source chain and L2 destination chain', () => {
+    const result1 = getTransferMode({
+      sourceChainId: 1380012617, // RARI mainnet
+      destinationChainId: ChainId.ArbitrumOne
+    })
+    expect(result1).toEqual({
+      isDepositMode: false,
+      isWithdrawalMode: true,
+      isTeleportMode: false
+    })
+
+    const result2 = getTransferMode({
+      sourceChainId: 70700, // PopApex
+      destinationChainId: ChainId.ArbitrumOne
+    })
+
+    expect(result2).toEqual({
+      isDepositMode: false,
+      isWithdrawalMode: true,
+      isTeleportMode: false
+    })
+  })
+
+  it('should return correctly for L1 source chain and L3 destination chain', () => {
+    const result1 = getTransferMode({
+      sourceChainId: ChainId.Ethereum,
+      destinationChainId: 1380012617 // RARI mainnet
+    })
+    expect(result1).toEqual({
+      isDepositMode: false,
+      isWithdrawalMode: false,
+      isTeleportMode: true
+    })
+
+    const result2 = getTransferMode({
+      sourceChainId: ChainId.Ethereum,
+      destinationChainId: 70700 // PopApex
+    })
+
+    expect(result2).toEqual({
+      isDepositMode: false,
+      isWithdrawalMode: false,
+      isTeleportMode: true
+    })
+  })
+
+  it('should return correctly for L3 source chain and L1 destination chain', () => {
+    expect(() =>
+      getTransferMode({
+        sourceChainId: 1380012617, // RARI mainnet
+        destinationChainId: ChainId.Ethereum
+      })
+    ).toThrow(new Error('Unsupported source and destination chain pair.'))
+
+    expect(() =>
+      getTransferMode({
+        sourceChainId: 70700, // PopApex
+        destinationChainId: ChainId.Ethereum
+      })
+    ).toThrow(new Error('Unsupported source and destination chain pair.'))
+  })
+
+  it('should throw error for L2 source chain and L2 destination chain', () => {
+    expect(() =>
+      getTransferMode({
+        sourceChainId: ChainId.ArbitrumOne,
+        destinationChainId: ChainId.ArbitrumNova
+      })
+    ).toThrow(new Error('Unsupported source and destination chain pair.'))
+
+    expect(() =>
+      getTransferMode({
+        sourceChainId: ChainId.ArbitrumNova,
+        destinationChainId: ChainId.ArbitrumOne
+      })
+    ).toThrow(new Error('Unsupported source and destination chain pair.'))
+  })
+})

packages/arb-token-bridge-ui/src/util/getTransferMode.ts

@@ -0,0 +1,59 @@
+import { isValidTeleportChainPair } from '../token-bridge-sdk/teleport'
+import { getDestinationChainIds, isNetwork } from './networks'
+
+/**
+ * determines if the UI is in deposit mode or withdrawal mode or teleport mode
+ *
+ * @returns {Object} {isDepositMode, isWithdrawalMode, isTeleportMode}
+ */
+export function getTransferMode({
+  sourceChainId,
+  destinationChainId
+}: {
+  sourceChainId: number
+  destinationChainId: number
+}) {
+  const {
+    isEthereumMainnetOrTestnet: isSourceChainEthereumMainnetOrTestnet,
+    isArbitrum: isSourceChainArbitrum,
+    isBase: isSourceChainBase,
+    isOrbitChain: isSourceChainOrbit
+  } = isNetwork(sourceChainId)
+  const {
+    isOrbitChain: isDestinationChainOrbit,
+    isArbitrum: isDestinationChainArbitrum,
+    isBase: isDestinationChainBase,
+    isEthereumMainnetOrTestnet: isDestinationChainEthereumMainnetOrTestnet
+  } = isNetwork(destinationChainId)
+
+  const validDestinationChains = getDestinationChainIds(sourceChainId)
+
+  if (!validDestinationChains.includes(destinationChainId)) {
+    throw new Error('Unsupported source and destination chain pair.')
+  }
+
+  const isDepositMode =
+    (isSourceChainEthereumMainnetOrTestnet && !isDestinationChainOrbit) ||
+    isSourceChainBase ||
+    (isSourceChainArbitrum && isDestinationChainOrbit)
+
+  const isWithdrawalMode =
+    (isSourceChainArbitrum && isDestinationChainEthereumMainnetOrTestnet) || //  l2 arbitrum chains to l1
+    (isSourceChainOrbit && isDestinationChainEthereumMainnetOrTestnet) || // l2 orbit chains to l1
+    (isSourceChainOrbit && isDestinationChainArbitrum) || // l3 orbit chains to l1
+    (isSourceChainOrbit && isDestinationChainBase) // l3 orbit chain to Base l2
+
+  const isTeleportMode =
+    isSourceChainEthereumMainnetOrTestnet &&
+    isDestinationChainOrbit &&
+    isValidTeleportChainPair({
+      sourceChainId,
+      destinationChainId
+    })
+
+  return {
+    isDepositMode,
+    isWithdrawalMode,
+    isTeleportMode
+  }
+}