feat: Dynamically load tokenlists for Orbit chains

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

@@ -34,9 +34,9 @@ import { TokenLogoFallback } from './TokenInfo'
 import { useBalanceOnSourceChain } from '../../hooks/useBalanceOnSourceChain'
 import { useSourceChainNativeCurrencyDecimals } from '../../hooks/useSourceChainNativeCurrencyDecimals'
 
-function tokenListIdsToNames(ids: number[]): string {
+function tokenListIdsToNames(ids: string[]): string {
   return ids
-    .map((tokenListId: number) => listIdsToNames[tokenListId])
+    .map((tokenListId: string) => listIdsToNames[tokenListId])
     .join(', ')
 }
 
@@ -90,7 +90,7 @@ function TokenListInfo({ token }: { token: ERC20BridgeToken | null }) {
       return 'Native USDC on Arbitrum Sepolia'
     }
 
-    const listIds: Set<number> = token.listIds
+    const listIds: Set<string> = token.listIds
     const listIdsSize = listIds.size
     if (listIdsSize === 0) {
       return 'Added by User'

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

@@ -47,7 +47,7 @@ import { useSetInputAmount } from '../../hooks/TransferPanel/useSetInputAmount'
 
 export const ARB_ONE_NATIVE_USDC_TOKEN = {
   ...ArbOneNativeUSDC,
-  listIds: new Set<number>(),
+  listIds: new Set<string>(),
   type: TokenType.ERC20,
   // the address field is for L1 address but native USDC does not have an L1 address
   // the L2 address is used instead to avoid errors
@@ -57,7 +57,7 @@ export const ARB_ONE_NATIVE_USDC_TOKEN = {
 
 export const ARB_SEPOLIA_NATIVE_USDC_TOKEN = {
   ...ArbOneNativeUSDC,
-  listIds: new Set<number>(),
+  listIds: new Set<string>(),
   type: TokenType.ERC20,
   address: CommonAddress.ArbitrumSepolia.USDC,
   l2Address: CommonAddress.ArbitrumSepolia.USDC

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

@@ -16,7 +16,7 @@ const commonUSDC = {
   type: TokenType.ERC20,
   symbol: 'USDC',
   decimals: 6,
-  listIds: new Set<number>()
+  listIds: new Set<string>()
 }
 
 export function useUpdateUSDCTokenData() {

packages/arb-token-bridge-ui/src/hooks/arbTokenBridge.types.ts

@@ -90,7 +90,7 @@ export interface BridgeToken {
   address: string
   l2Address?: string
   logoURI?: string
-  listIds: Set<number> // no listID indicates added by user
+  listIds: Set<string> // no listID indicates added by user
   isL2Native?: boolean
 }
 
@@ -140,8 +140,8 @@ export interface ArbTokenBridgeEth {
 export interface ArbTokenBridgeToken {
   add: (erc20L1orL2Address: string) => Promise<void>
   addL2NativeToken: (erc20L2Address: string) => void
-  addTokensFromList: (tokenList: TokenList, listID: number) => void
-  removeTokensFromList: (listID: number) => void
+  addTokensFromList: (tokenList: TokenList, listID: string) => void
+  removeTokensFromList: (listID: string) => void
   updateTokenData: (l1Address: string) => Promise<void>
   triggerOutbox: (params: {
     event: L2ToL1EventResultPlus

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

@@ -136,7 +136,7 @@ export const useArbTokenBridge = (
 
   const l1NetworkID = useMemo(() => String(l1.network.id), [l1.network.id])
 
-  const removeTokensFromList = (listID: number) => {
+  const removeTokensFromList = (listID: string) => {
     setBridgeTokens(prevBridgeTokens => {
       const newBridgeTokens = { ...prevBridgeTokens }
       for (const address in bridgeTokens) {
@@ -153,7 +153,7 @@ export const useArbTokenBridge = (
     })
   }
 
-  const addTokensFromList = async (arbTokenList: TokenList, listId: number) => {
+  const addTokensFromList = async (arbTokenList: TokenList, listId: string) => {
     const l1ChainID = l1.network.id
     const l2ChainID = l2.network.id
 

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

@@ -9,11 +9,14 @@ import CoinGeckoLogo from '@/images/lists/coinGecko.svg'
 import ArbitrumLogo from '@/images/lists/ArbitrumLogo.png'
 import { ArbTokenBridge } from '../hooks/arbTokenBridge.types'
 import { ChainId } from './networks'
+import orbitChainsData from './orbitChainsData.json'
 
-export const SPECIAL_ARBITRUM_TOKEN_TOKEN_LIST_ID = 0
+export const SPECIAL_ARBITRUM_TOKEN_TOKEN_LIST_ID =
+  'SPECIAL_ARBITRUM_TOKEN_TOKEN_LIST_ID'
 
 export interface BridgeTokenList {
-  id: number
+  // string is required here to avoid duplicates when mapping orbit chains to tokenlists
+  id: string
   originChainID: number
   url: string
   name: string
@@ -34,39 +37,39 @@ export const BRIDGE_TOKEN_LISTS: BridgeTokenList[] = [
     isArbitrumTokenTokenList: true
   },
   {
-    id: 1,
+    id: '1',
     originChainID: ChainId.ArbitrumOne,
     url: 'https://tokenlist.arbitrum.io/ArbTokenLists/arbed_arb_whitelist_era.json',
     name: 'Arbitrum Whitelist Era',
     isDefault: true,
     logoURI: ArbitrumLogo
   },
   {
-    id: 2,
+    id: '2',
     originChainID: ChainId.ArbitrumOne,
     url: 'https://tokenlist.arbitrum.io/ArbTokenLists/arbed_uniswap_labs_default.json',
     name: 'Arbed Uniswap List',
     isDefault: true,
     logoURI: UniswapLogo
   },
   {
-    id: 4,
+    id: '4',
     originChainID: ChainId.ArbitrumOne,
     url: 'https://tokenlist.arbitrum.io/ArbTokenLists/arbed_coingecko.json',
     name: 'Arbed CoinGecko List',
     isDefault: true,
     logoURI: CoinGeckoLogo
   },
   {
-    id: 5,
+    id: '5',
     originChainID: ChainId.ArbitrumOne,
     url: 'https://tokenlist.arbitrum.io/ArbTokenLists/arbed_coinmarketcap.json',
     name: 'Arbed CMC List',
     isDefault: false,
     logoURI: CMCLogo
   },
   {
-    id: 6,
+    id: '6',
     originChainID: ChainId.ArbitrumNova,
     url: 'https://tokenlist.arbitrum.io/ArbTokenLists/42170_arbed_uniswap_labs_default.json',
     name: 'Arbed Uniswap List',
@@ -78,7 +81,7 @@ export const BRIDGE_TOKEN_LISTS: BridgeTokenList[] = [
   // TODO: remove list for chain ID 412346 after fix:
   // https://github.com/OffchainLabs/arb-token-bridge/issues/564
   {
-    id: 9,
+    id: '9',
     // Local node
     originChainID: ChainId.ArbitrumLocal,
     url: 'https://tokenlist.arbitrum.io/ArbTokenLists/421613_arbed_coinmarketcap.json',
@@ -87,7 +90,7 @@ export const BRIDGE_TOKEN_LISTS: BridgeTokenList[] = [
     logoURI: CMCLogo
   },
   {
-    id: 10,
+    id: '10',
     originChainID: ChainId.ArbitrumSepolia,
     url: 'https://tokenlist.arbitrum.io/ArbTokenLists/421614_arbed_uniswap_labs.json',
     name: 'Arbed Uniswap List',
@@ -96,76 +99,57 @@ export const BRIDGE_TOKEN_LISTS: BridgeTokenList[] = [
   },
   // CoinGecko
   {
-    id: 11,
+    id: '11',
     originChainID: ChainId.ArbitrumNova,
     url: 'https://tokenlist.arbitrum.io/ArbTokenLists/42170_arbed_coingecko.json',
     name: 'Arbed CoinGecko List',
     isDefault: true,
     logoURI: CoinGeckoLogo
   },
   {
-    id: 13,
+    id: '13',
     originChainID: ChainId.ArbitrumSepolia,
     url: 'https://tokenlist.arbitrum.io/ArbTokenLists/421614_arbed_coingecko.json',
     name: 'Arbed CoinGecko List',
     isDefault: true,
     logoURI: CoinGeckoLogo
   },
-  // Orbit
   {
-    id: 14,
-    // Xai
-    originChainID: 660279,
-    url: 'https://tokenlist.arbitrum.io/ArbTokenLists/660279_arbed_uniswap_labs.json',
-    name: 'Arbed Uniswap List',
-    isDefault: true,
-    logoURI: UniswapLogo
-  },
-  {
-    id: 660279,
+    id: '660279',
     // Xai
     originChainID: 660279,
     url: 'tokenLists/660279_default.json',
     name: 'XAI Default List',
     isDefault: true,
     logoURI: '/images/XaiLogo.svg'
   },
-  {
-    id: 15,
-    // Rari
-    originChainID: 1380012617,
-    url: 'https://tokenlist.arbitrum.io/ArbTokenLists/1380012617_arbed_uniswap_labs.json',
-    name: 'Arbed Uniswap List',
-    isDefault: true,
-    logoURI: UniswapLogo
-  },
-  {
-    id: 16,
-    // Muster
-    originChainID: 4078,
-    url: 'https://tokenlist.arbitrum.io/ArbTokenLists/4078_arbed_uniswap_labs.json',
-    name: 'Arbed Uniswap List',
-    isDefault: true,
-    logoURI: UniswapLogo
-  },
-  {
-    id: 17,
-    // Proof of Play Apex
-    originChainID: 70700,
-    url: 'https://tokenlist.arbitrum.io/ArbTokenLists/70700_arbed_uniswap_labs.json',
-    name: 'Arbed Uniswap List',
-    isDefault: true,
-    logoURI: UniswapLogo
-  },
-  {
-    id: 19,
-    // SX Network
-    originChainID: 4162,
-    url: 'https://tokenlist.arbitrum.io/ArbTokenLists/4162_arbed_uniswap_labs.json',
-    name: 'Arbed Uniswap List',
-    isDefault: true,
-    logoURI: UniswapLogo
-  }
+  // For all orbit chains,
+  ...orbitChainsData.mainnet
+    .concat(orbitChainsData.testnet)
+    .reduce((acc, chain) => {
+      // Only include arbified native token list for L3 settling to ArbOne
+      if (chain.parentChainId === ChainId.ArbitrumOne) {
+        acc.push({
+          id: `${chain.chainId}_native`,
+          originChainID: chain.chainId,
+          url: `https://tokenlist.arbitrum.io/ArbTokenLists/${chain.chainId}_arbed_native_list.json`,
+          name: `${chain.name} Default List`,
+          isDefault: true,
+          logoURI: ArbitrumLogo
+        })
+      }
+
+      acc.push({
+        id: `${chain.chainId}_uniswap`,
+        originChainID: chain.chainId,
+        url: `https://tokenlist.arbitrum.io/ArbTokenLists/${chain.chainId}_arbed_uniswap_labs.json`,
+        name: `${chain.name} Arbed Uniswap List`,
+        isDefault: true,
+        logoURI: UniswapLogo
+      })
+
+      return acc
+    }, [] as BridgeTokenList[])
 ]
 
 export const listIdsToNames: { [key: string]: string } = {}
@@ -176,7 +160,7 @@ BRIDGE_TOKEN_LISTS.forEach(bridgeTokenList => {
 
 export interface TokenListWithId extends TokenList {
   l2ChainId: string
-  bridgeTokenListId: number
+  bridgeTokenListId: string
   isValid?: boolean
 }