feat: show ARB token on all Orbit chains

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

@@ -101,10 +101,11 @@ export function TokenImportDialog({
   const { openDialog: openTransferDisabledDialog } =
     useTransferDisabledDialogStore()
   const { isOpen } = useTokenImportDialogStore()
-  const { data: l1Address, isLoading: isL1AddressLoading } = useERC20L1Address({
-    eitherL1OrL2Address: tokenAddress,
-    l2Provider: childChainProvider
-  })
+  const { data: tokenAddressOnParentChain, isLoading: isL1AddressLoading } =
+    useERC20L1Address({
+      eitherL1OrL2Address: tokenAddress,
+      l2Provider: childChainProvider
+    })
 
   const modalTitle = useMemo(() => {
     switch (status) {
@@ -125,18 +126,23 @@ export function TokenImportDialog({
   }, [status])
 
   const getL1TokenDataFromL1Address = useCallback(async () => {
-    if (!l1Address || !walletAddress) {
+    if (!tokenAddressOnParentChain || !walletAddress) {
       return
     }
 
-    const erc20Params = { address: l1Address, provider: parentChainProvider }
+    const erc20Params = {
+      address: tokenAddressOnParentChain,
+      provider: parentChainProvider
+    }
 
     if (!(await isValidErc20(erc20Params))) {
-      throw new Error(`${l1Address} is not a valid ERC-20 token`)
+      throw new Error(
+        `${tokenAddressOnParentChain} is not a valid ERC-20 token`
+      )
     }
 
     return fetchErc20Data(erc20Params)
-  }, [parentChainProvider, walletAddress, l1Address])
+  }, [parentChainProvider, walletAddress, tokenAddressOnParentChain])
 
   const searchForTokenInLists = useCallback(
     (erc20L1Address: string): TokenListSearchResult => {
@@ -177,7 +183,7 @@ export function TokenImportDialog({
 
   const selectToken = useCallback(
     async (_token: ERC20BridgeToken) => {
-      await token.updateTokenData(_token.address)
+      await token.updateTokenData(_token.address.toLowerCase())
       actions.app.setSelectedToken(_token)
     },
     [token, actions]
@@ -192,17 +198,17 @@ export function TokenImportDialog({
       return
     }
 
-    if (!isL1AddressLoading && !l1Address) {
+    if (!isL1AddressLoading && !tokenAddressOnParentChain) {
       setStatus(ImportStatus.ERROR)
       return
     }
 
-    if (l1Address) {
-      const searchResult1 = searchForTokenInLists(l1Address)
+    if (tokenAddressOnParentChain) {
+      const searchResult = searchForTokenInLists(tokenAddressOnParentChain)
 
-      if (searchResult1.found) {
-        setStatus(searchResult1.status)
-        setTokenToImport(searchResult1.token)
+      if (searchResult.found) {
+        setStatus(searchResult.status)
+        setTokenToImport(searchResult.token)
 
         return
       }
@@ -228,7 +234,7 @@ export function TokenImportDialog({
     getL1TokenDataFromL1Address,
     isL1AddressLoading,
     isOpen,
-    l1Address,
+    tokenAddressOnParentChain,
     searchForTokenInLists
   ])
 
@@ -237,11 +243,11 @@ export function TokenImportDialog({
       return
     }
 
-    if (isL1AddressLoading && !l1Address) {
+    if (isL1AddressLoading && !tokenAddressOnParentChain) {
       return
     }
 
-    const foundToken = tokensFromUser[l1Address || tokenAddress]
+    const foundToken = tokensFromUser[tokenAddressOnParentChain || tokenAddress]
 
     if (typeof foundToken === 'undefined') {
       return
@@ -256,7 +262,7 @@ export function TokenImportDialog({
     isL1AddressLoading,
     tokenAddress,
     isOpen,
-    l1Address,
+    tokenAddressOnParentChain,
     onClose,
     selectToken,
     selectedToken,
@@ -284,28 +290,31 @@ export function TokenImportDialog({
 
     setIsImportingToken(true)
 
-    if (!l1Address) {
+    if (!tokenAddressOnParentChain) {
       return
     }
 
-    if (typeof bridgeTokens[l1Address] !== 'undefined') {
+    if (typeof bridgeTokens[tokenAddressOnParentChain] !== 'undefined') {
       // Token is already added to the bridge
       onClose(true)
       selectToken(tokenToImport!)
     } else {
       // Token is not added to the bridge, so we add it
-      storeNewToken(l1Address).catch(() => {
+      storeNewToken(tokenAddressOnParentChain).catch(() => {
         setStatus(ImportStatus.ERROR)
       })
     }
 
     // do not allow import of withdraw-only tokens at deposit mode
-    if (isDepositMode && isWithdrawOnlyToken(l1Address, childChain.id)) {
+    if (
+      isDepositMode &&
+      isWithdrawOnlyToken(tokenAddressOnParentChain, childChain.id)
+    ) {
       openTransferDisabledDialog()
       return
     }
 
-    if (isTransferDisabledToken(l1Address, childChain.id)) {
+    if (isTransferDisabledToken(tokenAddressOnParentChain, childChain.id)) {
       openTransferDisabledDialog()
       return
     }

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

@@ -10,10 +10,7 @@ import { Chain, useAccount } from 'wagmi'
 
 import { Loader } from '../common/atoms/Loader'
 import { useAppState } from '../../state'
-import {
-  listIdsToNames,
-  SPECIAL_ARBITRUM_TOKEN_TOKEN_LIST_ID
-} from '../../util/TokenListUtils'
+import { listIdsToNames } from '../../util/TokenListUtils'
 import { formatAmount } from '../../util/NumberUtils'
 import { shortenAddress } from '../../util/CommonUtils'
 import {
@@ -22,6 +19,7 @@ import {
   sanitizeTokenName,
   sanitizeTokenSymbol
 } from '../../util/TokenUtils'
+import { isArbitrumToken as isArbitrumTokenCheck } from '../../util/ArbTokenUtils'
 import { SafeImage } from '../common/SafeImage'
 import { getExplorerUrl, getNetworkName } from '../../util/networks'
 import { Tooltip } from '../common/Tooltip'
@@ -123,7 +121,10 @@ export function TokenRow({
     return nativeCurrency.symbol
   }, [token, nativeCurrency.symbol, chainId])
 
-  const isL2NativeToken = useMemo(() => token?.isL2Native ?? false, [token])
+  const isChildChainNativeToken = useMemo(
+    () => token?.isL2Native ?? false,
+    [token]
+  )
   const tokenIsArbOneNativeUSDC = useMemo(
     () => isTokenArbitrumOneNativeUSDC(token?.address),
     [token]
@@ -186,13 +187,7 @@ export function TokenRow({
     token
   ])
 
-  const isArbitrumToken = useMemo(() => {
-    if (!token) {
-      return false
-    }
-
-    return token.listIds.has(SPECIAL_ARBITRUM_TOKEN_TOKEN_LIST_ID)
-  }, [token])
+  const isArbitrumToken = useMemo(() => isArbitrumTokenCheck(token), [token])
 
   const isPotentialFakeArbitrumToken = useMemo(() => {
     if (!token || isArbitrumToken) {
@@ -252,15 +247,20 @@ export function TokenRow({
       return true
     }
 
-    return typeof bridgeTokens[token.address] !== 'undefined'
+    if (isArbitrumToken) {
+      return true
+    }
+
+    return typeof bridgeTokens[token.address.toLowerCase()] !== 'undefined'
   }, [
     bridgeTokens,
+    isArbitrumToken,
     token,
     tokenIsArbOneNativeUSDC,
     tokenIsArbSepoliaNativeUSDC
   ])
 
-  const tokenHasL2Address = useMemo(() => {
+  const tokenHasChildChainAddress = useMemo(() => {
     if (!token) {
       return true
     }
@@ -269,16 +269,16 @@ export function TokenRow({
   }, [token])
 
   const tokenIsBridgeable = useMemo(() => {
-    if (isL2NativeToken) {
+    if (isChildChainNativeToken) {
       return false
     }
 
     if (isDepositMode) {
       return true
     }
 
-    return tokenHasL2Address
-  }, [isDepositMode, tokenHasL2Address, isL2NativeToken])
+    return tokenHasChildChainAddress
+  }, [isDepositMode, tokenHasChildChainAddress, isChildChainNativeToken])
 
   const isCustomFeeTokenRow = token === null && nativeCurrency.isCustom
 
@@ -391,7 +391,7 @@ export function TokenRow({
               <div className="flex w-full justify-between">
                 {isDepositMode ? (
                   <>
-                    {isL2NativeToken ? (
+                    {isChildChainNativeToken ? (
                       <BlockExplorerTokenLink
                         chain={childChain}
                         address={token.address}
@@ -405,7 +405,7 @@ export function TokenRow({
                   </>
                 ) : (
                   <>
-                    {tokenHasL2Address ? (
+                    {tokenHasChildChainAddress ? (
                       <BlockExplorerTokenLink
                         chain={childChain}
                         address={token.l2Address}
@@ -420,7 +420,7 @@ export function TokenRow({
                 )}
                 {tokenIsBridgeable && tokenBalanceContent}
               </div>
-              {isL2NativeToken ? (
+              {isChildChainNativeToken ? (
                 <span className="flex gap-1 text-xs font-normal">
                   {`This token is native to ${getNetworkName(
                     childChain.id

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

@@ -73,7 +73,7 @@ function TokenListsPanel() {
     app: { arbTokenBridge }
   } = useAppState()
   const [networks] = useNetworks()
-  const { childChain } = useNetworksRelationship(networks)
+  const { childChain, parentChain } = useNetworksRelationship(networks)
   const { bridgeTokens, token } = arbTokenBridge
 
   const listsToShow: BridgeTokenList[] = useMemo(() => {
@@ -98,7 +98,12 @@ function TokenListsPanel() {
     if (isActive) {
       token.removeTokensFromList(bridgeTokenList.id)
     } else {
-      addBridgeTokenListToBridge(bridgeTokenList, arbTokenBridge)
+      addBridgeTokenListToBridge({
+        bridgeTokenList,
+        arbTokenBridge,
+        parentChainId: parentChain.id,
+        childChainId: childChain.id
+      })
     }
   }
 
@@ -273,9 +278,9 @@ function TokensPanel({
             return true
           }
 
-          // Always show official ARB token except from or to Orbit chain
+          // Always show official ARB token
           if (token?.listIds.has(SPECIAL_ARBITRUM_TOKEN_TOKEN_LIST_ID)) {
-            return !isOrbitChain
+            return true
           }
 
           const balance = getBalance(address)
@@ -501,7 +506,9 @@ export function TokenSearch({ close }: { close: () => void }) {
       return
     }
 
-    if (!_token.address) {
+    const lowercasedTokenAddress = _token.address.toLowerCase()
+
+    if (!lowercasedTokenAddress) {
       return
     }
 
@@ -512,29 +519,29 @@ export function TokenSearch({ close }: { close: () => void }) {
     try {
       // Native USDC on L2 won't have a corresponding L1 address
       const isNativeUSDC =
-        isTokenArbitrumOneNativeUSDC(_token.address) ||
-        isTokenArbitrumSepoliaNativeUSDC(_token.address)
+        isTokenArbitrumOneNativeUSDC(lowercasedTokenAddress) ||
+        isTokenArbitrumSepoliaNativeUSDC(lowercasedTokenAddress)
 
       if (isNativeUSDC) {
         if (isLoadingAccountType) {
           return
         }
 
-        updateUSDCBalances(_token.address)
+        updateUSDCBalances(lowercasedTokenAddress)
         setSelectedToken({
           name: 'USD Coin',
           type: TokenType.ERC20,
           symbol: 'USDC',
-          address: _token.address,
+          address: lowercasedTokenAddress,
           decimals: 6,
           listIds: new Set()
         })
         return
       }
 
       // Token not added to the bridge, so we'll handle importing it
-      if (typeof bridgeTokens[_token.address] === 'undefined') {
-        setTokenQueryParam(_token.address)
+      if (typeof bridgeTokens[lowercasedTokenAddress] === 'undefined') {
+        setTokenQueryParam(lowercasedTokenAddress)
         return
       }
 
@@ -543,25 +550,28 @@ export function TokenSearch({ close }: { close: () => void }) {
       }
 
       const data = await fetchErc20Data({
-        address: _token.address,
+        address: lowercasedTokenAddress,
         provider: parentChainProvider
       })
 
       if (data) {
-        token.updateTokenData(_token.address)
+        token.updateTokenData(lowercasedTokenAddress)
         setSelectedToken({
           ...erc20DataToErc20BridgeToken(data),
           l2Address: _token.l2Address
         })
       }
 
       // do not allow import of withdraw-only tokens at deposit mode
-      if (isDepositMode && isWithdrawOnlyToken(_token.address, childChain.id)) {
+      if (
+        isDepositMode &&
+        isWithdrawOnlyToken(lowercasedTokenAddress, childChain.id)
+      ) {
         openTransferDisabledDialog()
         return
       }
 
-      if (isTransferDisabledToken(_token.address, childChain.id)) {
+      if (isTransferDisabledToken(lowercasedTokenAddress, childChain.id)) {
         openTransferDisabledDialog()
         return
       }