Remove hard coded nativeTokenInfos and instead build from sequence ch…

…ains information (#112)

packages/kit/src/index.ts

@@ -25,7 +25,7 @@ export { LocalStorageKey, DEFAULT_SESSION_EXPIRATION } from './constants'
 // Utils
 export { getKitConnectWallets } from './utils/getKitConnectWallets'
 export { isEmailValid, compareAddress, formatDisplay, capitalize } from './utils/helpers'
-export { defaultNativeTokenInfo, getNativeTokenInfoByChainId, getChainIdList } from './utils/tokens'
+export { getNativeTokenInfoByChainId } from './utils/tokens'
 export { getModalPositionCss } from './utils/styling'
 export { getNetwork, getNetworkColor, getNetworkBackgroundColor } from './utils/networks'
 export { walletClientToSigner, publicClientToProvider } from './utils/adapters'

packages/kit/src/utils/tokens.ts

@@ -1,131 +1,39 @@
-import { ChainId } from '@0xsequence/network'
+import { nativeTokenImageUrl } from '@0xsequence/design-system'
 import { Chain } from 'wagmi/chains'
 
+import { chains } from '../chains'
+
 export interface NativeTokenInfo {
+  chainId: number
   name: string
   symbol: string
   logoURI: string
   decimals: number
-  blockExplorerUrl: string
-  blockExplorerName: string
+  blockExplorerUrl?: string
+  blockExplorerName?: string
 }
 
-interface TokenInfos {
-  [key: number]: NativeTokenInfo
-}
+export const getNativeTokenInfoByChainId = (chainId: number, wagmiChains: readonly [Chain, ...Chain[]]): NativeTokenInfo => {
+  // Get chain data from wagmi
+  const chain = wagmiChains.find(chain => chain.id === chainId) || chains[chainId]
 
-export const nativeTokenInfos: TokenInfos = {
-  [ChainId.MAINNET]: {
-    name: 'Ethereum',
-    symbol: 'ETH',
-    logoURI: 'https://assets.coingecko.com/coins/images/279/thumb/ethereum.png',
-    decimals: 18,
-    blockExplorerName: 'Etherscan',
-    blockExplorerUrl: 'https://etherscan.io'
-  },
-  [ChainId.GOERLI]: {
-    name: 'Goerli',
-    symbol: 'ETH',
-    decimals: 18,
-    logoURI: 'https://assets.coingecko.com/coins/images/279/thumb/ethereum.png',
-    blockExplorerName: 'Etherscan (Goerli)',
-    blockExplorerUrl: 'https://goerli.etherscan.io'
-  },
-  [ChainId.OPTIMISM]: {
-    name: 'Optimism',
-    symbol: 'OP',
-    logoURI: 'https://assets.coingecko.com/coins/images/25244/small/Optimism.png',
-    decimals: 18,
-    blockExplorerName: 'Etherscan (Optimism)',
-    blockExplorerUrl: 'https://optimistic.etherscan.io'
-  },
-  [ChainId.BSC]: {
-    name: 'BNB',
-    symbol: 'BNB',
-    logoURI: 'https://assets.coingecko.com/coins/images/825/thumb/bnb-icon2_2x.png',
-    decimals: 18,
-    blockExplorerName: 'BscScan',
-    blockExplorerUrl: 'https://bscscan.com'
-  },
-  [ChainId.GNOSIS]: {
-    name: 'Gnosis',
-    symbol: 'GNO',
-    logoURI: 'https://assets.coingecko.com/coins/images/662/small/logo_square_simple_300px.png',
-    decimals: 18,
-    blockExplorerUrl: 'https://gnosisscan.io',
-    blockExplorerName: 'Gnosis Scan'
-  },
-  [ChainId.POLYGON]: {
-    name: 'Polygon',
-    symbol: 'MATIC',
-    logoURI: 'https://assets.coingecko.com/coins/images/4713/thumb/matic-token-icon.png',
-    decimals: 18,
-    blockExplorerName: 'Polyscan',
-    blockExplorerUrl: 'https://polygonscan.com'
-  },
-  [ChainId.POLYGON_ZKEVM]: {
-    name: 'Polygon zkEVM',
-    symbol: 'ETH',
-    logoURI: 'https://assets.coingecko.com/coins/images/4713/thumb/matic-token-icon.png',
-    decimals: 18,
-    blockExplorerName: 'PolygonScan',
-    blockExplorerUrl: 'https://zkevm.polygonscan.com'
-  },
-  [ChainId.ARBITRUM]: {
-    name: 'Arbitrum',
-    symbol: 'ARB',
-    logoURI: 'https://assets.coingecko.com/asset_platforms/images/33/small/arbitrum-one.png',
-    decimals: 18,
-    blockExplorerName: 'Arbiscan',
-    blockExplorerUrl: 'https://arbiscan.io'
-  },
-  [ChainId.AVALANCHE]: {
-    name: 'Avalanche',
-    symbol: 'AVAX',
-    logoURI: 'https://assets.coingecko.com/coins/images/12559/small/Avalanche_Circle_RedWhite_Trans.png',
-    decimals: 18,
-    blockExplorerName: 'Snowtrace',
-    blockExplorerUrl: 'https://snowtrace.io'
-  },
-  [ChainId.POLYGON_MUMBAI]: {
-    name: 'Mumbai',
-    symbol: 'MATIC',
-    logoURI: 'https://assets.coingecko.com/coins/images/4713/thumb/matic-token-icon.png',
-    decimals: 18,
-    blockExplorerName: 'Polyscan (Mumbai)',
-    blockExplorerUrl: 'https://mumbai.polygonscan.com'
-  },
-  [ChainId.POLYGON_AMOY]: {
-    name: 'Amoy',
-    symbol: 'MATIC',
-    logoURI: 'https://assets.coingecko.com/coins/images/4713/thumb/matic-token-icon.png',
-    decimals: 18,
-    blockExplorerName: 'Polyscan (Amoy)',
-    blockExplorerUrl: 'https://amoy.polygonscan.com'
-  }
-}
-
-export const getChainIdList = () => {
-  return Object.keys(nativeTokenInfos).map(chainId => parseInt(chainId))
-}
-
-export const defaultNativeTokenInfo = (chainId: number, wagmiChains: readonly [Chain, ...Chain[]]) => {
-  const foundChain = wagmiChains.find(chain => chain.id === chainId)
-
-  if (foundChain) {
+  if (chain) {
     return {
-      name: foundChain.nativeCurrency.name,
-      symbol: foundChain.nativeCurrency.symbol,
-      decimals: foundChain.nativeCurrency.decimals,
-      logoURI: nativeTokenInfos[ChainId.MAINNET]!.logoURI,
-      blockExplorerName: foundChain.blockExplorers?.default.name,
-      blockExplorerUrl: foundChain.blockExplorers?.default.url
+      chainId: chain.id,
+      name: chain.nativeCurrency.name,
+      symbol: chain.nativeCurrency.symbol,
+      decimals: chain.nativeCurrency.decimals,
+      logoURI: nativeTokenImageUrl(chain.id),
+      blockExplorerName: chain.blockExplorers?.default.name,
+      blockExplorerUrl: chain.blockExplorers?.default.url
     }
   }
 
-  return
-}
-
-export const getNativeTokenInfoByChainId = (chainId: number, wagmiChains: readonly [Chain, ...Chain[]]) => {
-  return nativeTokenInfos[chainId] || defaultNativeTokenInfo(chainId, wagmiChains) || nativeTokenInfos[ChainId.MAINNET]!
+  return {
+    chainId,
+    name: 'Unknown',
+    symbol: '???',
+    decimals: 18,
+    logoURI: ''
+  }
 }