Adding getNetwork to network utils

0xsequence · Apr 29, 2024 · 671bf71 · 671bf71
1 parent 1b3b609
commit 671bf71
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 34 deletions.
diff --git a/packages/kit/src/utils/networks.ts b/packages/kit/src/utils/networks.ts
@@ -1,49 +1,63 @@
-export const getChainColor = (chainId: number, mode: 'dark' | 'light' = 'light') => {
+import { networks, ChainId } from '@0xsequence/network'
+
+export const getNetworkColor = (chainId: number, mode: 'dark' | 'light' = 'light') => {
   switch (chainId) {
-    case 1:
+    case ChainId.MAINNET:
       return mode === 'light' ? '#abf' : '#abf'
-    case 137:
+    case ChainId.POLYGON:
       return mode === 'light' ? '#c7a6ff' : '#c7a6ff'
-    case 42161:
+    case ChainId.ARBITRUM:
       return mode === 'light' ? '#52A7E6' : '#52A7E6'
-    case 10:
+    case ChainId.OPTIMISM:
       return mode === 'light' ? '#DB3132' : '#DB3132'
-    case 56:
+    case ChainId.BSC:
       return mode === 'light' ? '#CB9C1D' : '#EEB445'
-    case 43114:
+    case ChainId.AVALANCHE:
       return mode === 'light' ? '#E84142' : '#E84142'
-    case 100:
+    case ChainId.GNOSIS:
       return mode === 'light' ? '#00193C' : '#D8E8FF'
-    case 5:
+    case ChainId.GOERLI:
       return mode === 'light' ? '#A77A00' : '#FFA700'
-    case 80001:
+    case ChainId.POLYGON_MUMBAI:
+    case ChainId.POLYGON_AMOY:
       return mode === 'light' ? '#D68828' : '#FFA700'
     default:
       return mode === 'light' ? '#abf' : '#abf'
   }
 }
 
-export const getChainBGColor = (chainId: number, mode: 'dark' | 'light' = 'light') => {
+export const getNetworkBackgroundColor = (chainId: number, mode: 'dark' | 'light' = 'light') => {
   switch (chainId) {
-    case 1:
+    case ChainId.MAINNET:
       return mode === 'light' ? '#132362' : '#132362'
-    case 137:
+    case ChainId.POLYGON:
       return mode === 'light' ? '#350881' : '#350881'
-    case 42161:
+    case ChainId.ARBITRUM:
       return mode === 'light' ? '#EDF7FF' : '#0C3754'
-    case 10:
+    case ChainId.OPTIMISM:
       return mode === 'light' ? '#FFEAE9' : '#390B0C'
-    case 56:
+    case ChainId.BSC:
       return mode === 'light' ? '#FFE8AB' : '#554018'
-    case 43114:
+    case ChainId.AVALANCHE:
       return mode === 'light' ? '#FBDFDF' : '#390B0C'
-    case 100:
+    case ChainId.GNOSIS:
       return mode === 'light' ? '#D8E8FF' : '#00193C'
-    case 5:
+    case ChainId.GOERLI:
       return mode === 'light' ? '#FFD871' : '#554018'
-    case 80001:
+    case ChainId.POLYGON_MUMBAI:
+    case ChainId.POLYGON_AMOY:
       return mode === 'light' ? '#FFE8CD' : '#554018'
     default:
       return mode === 'light' ? '#132362' : '#132362'
   }
 }
+
+export const getNetwork = (chainId: number) => {
+  const network = networks[chainId as ChainId]
+
+  if (!network) {
+    throw new Error(`Unknown network chainId: ${chainId}`)
+  }
+
+  return network
+}
diff --git a/packages/kit/src/utils/tokens.ts b/packages/kit/src/utils/tokens.ts
@@ -1,3 +1,4 @@
+import { ChainId } from '@0xsequence/network'
 import { Chain } from 'wagmi/chains'
 
 export interface NativeTokenInfo {
@@ -14,85 +15,93 @@ interface TokenInfos {
 }
 
 export const nativeTokenInfos: TokenInfos = {
-  1: {
+  [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'
   },
-  5: {
+  [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'
   },
-  10: {
+  [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'
   },
-  56: {
+  [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'
   },
-  100: {
+  [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'
   },
-  137: {
+  [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'
   },
-  1101: {
+  [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'
   },
-  42161: {
+  [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'
   },
-  43114: {
+  [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'
   },
-  80001: {
+  [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'
   }
 }
 

diff --git a/packages/wallet/src/shared/NetworkBadge.tsx b/packages/wallet/src/shared/NetworkBadge.tsx
@@ -1,20 +1,21 @@
 import React from 'react'
 import { Box, Image, Text } from '@0xsequence/design-system'
-import { getNativeTokenInfoByChainId, getChainColor, getChainBGColor, getNetworkConfigAndClients } from '@0xsequence/kit'
+import { getNativeTokenInfoByChainId, getNetwork, getNetworkColor, getNetworkBackgroundColor } from '@0xsequence/kit'
 import { useConfig } from 'wagmi'
 
 import { capitalize } from '../utils'
+import { networks } from '@0xsequence/network'
 
 interface NetworkBadgeProps {
   chainId: number
 }
 
 export const NetworkBadge = ({ chainId }: NetworkBadgeProps) => {
   const { chains } = useConfig()
-  const { network } = getNetworkConfigAndClients(chainId)
+  const network = getNetwork(chainId)
   const nativeTokenInfo = getNativeTokenInfoByChainId(chainId, chains)
-  const chainColor = getChainColor(chainId)
-  const chainBGColor = getChainBGColor(chainId)
+  const chainColor = getNetworkColor(chainId)
+  const chainBGColor = getNetworkBackgroundColor(chainId)
 
   return (
     <Box