refactor: Remove useArbTokenBridge from store

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

@@ -4,7 +4,7 @@ import { useLatest } from 'react-use'
 import { create } from 'zustand'
 
 import { useERC20L1Address } from '../../hooks/useERC20L1Address'
-import { useActions, useAppState } from '../../state'
+import { useActions } from '../../state'
 import {
   erc20DataToErc20BridgeToken,
   fetchErc20Data,

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

@@ -28,7 +28,8 @@ import {
   getL1ERC20Address,
   getL2ERC20Address,
   l1TokenIsDisabled,
-  isValidErc20
+  isValidErc20,
+  getL3ERC20Address
 } from '../util/TokenUtils'
 import { getL2NativeToken } from '../util/L2NativeUtils'
 import { CommonAddress } from '../util/CommonAddressUtils'
@@ -38,6 +39,7 @@ import { useNetworksRelationship } from './useNetworksRelationship'
 import { BridgeTokenList, fetchTokenListFromURL } from '../util/TokenListUtils'
 import { useDestinationAddressStore } from '../components/TransferPanel/AdvancedSettings'
 import { getProviderForChainId } from '@/token-bridge-sdk/utils'
+import { isTeleport } from '@/token-bridge-sdk/teleport'
 
 export const wait = (ms = 0) => {
   return new Promise(res => setTimeout(res, ms))
@@ -213,12 +215,36 @@ export const useArbTokenBridge = (): ArbTokenBridge => {
         l2Address = lowercasedErc20L1orL2Address
       } else {
         // looks like l1 address was provided
+        // l1Address = lowercasedErc20L1orL2Address
+        // l2Address = await getL2ERC20Address({
+        //   erc20L1Address: l1Address,
+        //   l1Provider: parentChainProvider,
+        //   l2Provider: childChainProvider
+        // })
         l1Address = lowercasedErc20L1orL2Address
-        l2Address = await getL2ERC20Address({
-          erc20L1Address: l1Address,
-          l1Provider: parentChainProvider,
-          l2Provider: childChainProvider
-        })
+
+        // 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({
+            sourceChainId: parentChain.id,
+            destinationChainId: childChain.id
+          })
+        ) {
+          // this can be a bit hard to follow, but it will resolve when we have code-wide better naming for variables
+          // here `l2Address` actually means `childChainAddress`, and `l2.provider` is actually being used as a child-chain-provider, which in this case will be L3
+          l2Address = await getL3ERC20Address({
+            erc20L1Address: l1Address,
+            l1Provider: parentChainProvider,
+            l3Provider: childChainProvider // in case of teleport transfer, the l2.provider being used here is actually the l3 provider
+          })
+        } else {
+          l2Address = await getL2ERC20Address({
+            erc20L1Address: l1Address,
+            l1Provider: parentChainProvider,
+            l2Provider: childChainProvider
+          })
+        }
       }
 
       const bridgeTokensToAdd: ContractStorage<ERC20BridgeToken> = {}
@@ -261,7 +287,9 @@ export const useArbTokenBridge = (): ArbTokenBridge => {
       }
     },
     [
+      childChain.id,
       childChainProvider,
+      parentChain.id,
       parentChainProvider,
       setBridgeTokens,
       updateErc20L1Balance,

packages/arb-token-bridge-ui/src/state/app/actions.ts

@@ -1,15 +1,7 @@
 import { ERC20BridgeToken } from '../../hooks/arbTokenBridge.types'
 import { Context } from '..'
-import { ConnectionState } from '../../util'
 import { WarningTokens } from './state'
 
-export const setConnectionState = (
-  { state }: Context,
-  connectionState: ConnectionState
-) => {
-  state.app.connectionState = connectionState
-}
-
 export const setSelectedToken = (
   { state }: Context,
   token: ERC20BridgeToken | null

packages/arb-token-bridge-ui/src/state/app/state.ts

@@ -10,7 +10,6 @@ import {
   L2ToL3MessageData,
   TxnType
 } from '../../hooks/useTransactions'
-import { ConnectionState } from '../../util'
 import { CCTPSupportedChainId } from '../cctpState'
 import { Address } from '../../util/AddressUtils'
 
@@ -88,7 +87,6 @@ export interface WarningTokens {
 
 export type AppState = {
   warningTokens: WarningTokens
-  connectionState: number
   selectedToken: ERC20BridgeToken | null
   verifying: WhiteListState
   sourceChainId: number | null
@@ -97,7 +95,6 @@ export type AppState = {
 
 const defaultState: AppState = {
   warningTokens: {} as WarningTokens,
-  connectionState: ConnectionState.LOADING,
   sourceChainId: null,
   destinationChainId: null,
   verifying: WhiteListState.ALLOWED,

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

@@ -1,10 +1,3 @@
-export enum ConnectionState {
-  LOADING,
-  L1_CONNECTED,
-  L2_CONNECTED,
-  NETWORK_ERROR
-}
-
 export const sanitizeImageSrc = (url: string): string => {
   if (url.startsWith('ipfs')) {
     return `https://ipfs.io/ipfs/${url.substring(7)}`