support more chains logoURI (#273)

machinefi · Sep 21, 2023 · 62f94c3 · 62f94c3
1 parent ef92d35
commit 62f94c3
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 63 deletions.
diff --git a/package.json b/package.json
@@ -57,6 +57,7 @@
     "@tabler/icons": "1.118.0",
     "@tanstack/react-query": "4.10.3",
     "@tanstack/react-table": "8.2.6",
+    "@thirdweb-dev/chains": "^0.1.52",
     "@thirdweb-dev/wallets": "^0.2.26",
     "@tremor/react": "^3.0.0",
     "@trpc/client": "10.0.0-proxy-beta.15",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/WalletConnectButton/index.tsx b/src/components/WalletConnectButton/index.tsx
@@ -15,6 +15,7 @@ import toast from 'react-hot-toast';
 import { BiLogOut } from 'react-icons/bi';
 import { MdSettings } from 'react-icons/md';
 import Link from 'next/link';
+import { defaultNetworks } from '@/constants/chain';
 
 interface WalletConnectButtonProps {
   name?: string;
@@ -49,7 +50,7 @@ export const WalletConnectButton = observer(({ name, customStyle }: WalletConnec
     <Popover>
       <PopoverTrigger>
         <Flex alignItems="center" p="5px 14px" bg="#F3F3F3" borderRadius="60px" cursor="pointer">
-          <Avatar mr="8px" w="30px" h="30px" src={god.currentNetwork?.chain?.current?.logoUrl} />
+          <Avatar mr="8px" w="30px" h="30px" src={defaultNetworks?.find(i => i.chainId == god.currentNetwork?.chain?.currentId).logoUrl} />
           <Flex alignItems="center">
             <Box>
               <Text fontSize="12px" fontWeight={700}>

diff --git a/src/constants/chain.ts b/src/constants/chain.ts
@@ -11,65 +11,95 @@ export type NetworkObject = {
   type: 'mainnet' | 'testnet';
 };
 
-export const defaultNetworks: NetworkObject[] = [
-  {
-    name: 'ETH',
-    chainId: 1,
-    rpcUrl: `https://rpc.ankr.com/eth`,
-    logoUrl: 'https://cdn.jsdelivr.net/gh/atomiclabs/cryptocurrency-icons@1a63530be6e374711a8554f31b17e4cb92c25fa5/svg/icon/eth.svg',
-    explorerUrl: 'https://etherscan.io',
-    explorerName: 'EtherScan',
-    nativeCoin: 'ETH',
-    type: 'mainnet'
-  },
-  {
-    name: 'Polygon',
-    chainId: 137,
-    logoUrl: 'https://cdn.jsdelivr.net/gh/atomiclabs/cryptocurrency-icons@1a63530be6e374711a8554f31b17e4cb92c25fa5/svg/icon/matic.svg',
-    rpcUrl: 'https://polygon-rpc.com/',
-    explorerUrl: 'https://explorer-mainnet.maticvigil.com/',
-    explorerName: 'PolygonScan',
-    nativeCoin: 'MATIC',
-    type: 'mainnet'
-  },
-  {
-    name: 'BSC',
-    chainId: 56,
-    rpcUrl: 'https://rpc.ankr.com/bsc',
-    logoUrl: 'https://cdn.jsdelivr.net/gh/atomiclabs/cryptocurrency-icons@1a63530be6e374711a8554f31b17e4cb92c25fa5/svg/icon/bnb.svg',
-    explorerUrl: 'https://bscscan.com',
-    explorerName: 'BscScan',
-    nativeCoin: 'BNB',
-    type: 'mainnet'
-  },
-  {
-    name: 'IoTeX',
-    chainId: 4689,
-    rpcUrl: 'https://babel-api.mainnet.iotex.io/',
-    logoUrl: 'https://coingecko-proxy.iopay.me/coins/images/3334/large/iotex-logo.png?1547037941',
-    explorerUrl: 'https://iotexscan.io',
-    explorerName: 'IotexScan',
-    nativeCoin: 'IOTX',
-    type: 'mainnet'
-  },
-  {
-    name: 'IoTeX Testnet',
-    chainId: 4690,
-    rpcUrl: `https://babel-api.testnet.iotex.io`,
-    logoUrl: 'https://coingecko-proxy.iopay.me/coins/images/3334/large/iotex-logo.png?1547037941',
-    explorerUrl: 'https://testnet.iotexscan.io',
-    explorerName: 'IotexScan',
-    nativeCoin: 'IOTX',
-    type: 'testnet'
-  },
-  {
-    name: 'Avalanche',
-    chainId: 43114,
-    rpcUrl: 'https://rpc.ankr.com/avalanche',
-    logoUrl: 'https://cdn.jsdelivr.net/gh/atomiclabs/cryptocurrency-icons@1a63530be6e374711a8554f31b17e4cb92c25fa5/svg/icon/avax.svg',
-    explorerUrl: 'https://subnets.avax.network/',
-    explorerName: 'AVAXScan',
-    nativeCoin: 'AVAX',
-    type: 'mainnet'
+import { allChains } from '@thirdweb-dev/chains';
+export const defaultNetworks: NetworkObject[] = allChains.map((chain) => {
+  const parse = (src: string | undefined) => {
+    if (!src) return src;
+    if (src?.startsWith("ipfs")) {
+      return "https://ipfs.io/ipfs/" + src.split("://")[1];
+    }
+    return src;
   }
-];
+  return {
+    name: chain.name,
+    chainId: chain.chainId,
+    rpcUrl: chain.rpc[0],
+    logoUrl: parse(chain.icon?.url),
+    explorerUrl: chain.explorers?.[0]?.url,
+    explorerName: chain.explorers?.[0]?.name,
+    nativeCoin: chain.nativeCurrency.symbol,
+    type: chain.testnet ? 'testnet' : 'mainnet'
+  };
+})
+// export const defaultNetworks: NetworkObject[] = [
+//   {
+//     name: 'ETH',
+//     chainId: 1,
+//     rpcUrl: `https://rpc.ankr.com/eth`,
+//     logoUrl: 'https://cdn.jsdelivr.net/gh/atomiclabs/cryptocurrency-icons@1a63530be6e374711a8554f31b17e4cb92c25fa5/svg/icon/eth.svg',
+//     explorerUrl: 'https://etherscan.io',
+//     explorerName: 'EtherScan',
+//     nativeCoin: 'ETH',
+//     type: 'mainnet'
+//   },
+//   {
+//     name: 'Polygon',
+//     chainId: 137,
+//     logoUrl: 'https://cdn.jsdelivr.net/gh/atomiclabs/cryptocurrency-icons@1a63530be6e374711a8554f31b17e4cb92c25fa5/svg/icon/matic.svg',
+//     rpcUrl: 'https://polygon-rpc.com/',
+//     explorerUrl: 'https://explorer-mainnet.maticvigil.com/',
+//     explorerName: 'PolygonScan',
+//     nativeCoin: 'MATIC',
+//     type: 'mainnet'
+//   },
+//   {
+//     name: 'BSC',
+//     chainId: 56,
+//     rpcUrl: 'https://rpc.ankr.com/bsc',
+//     logoUrl: 'https://cdn.jsdelivr.net/gh/atomiclabs/cryptocurrency-icons@1a63530be6e374711a8554f31b17e4cb92c25fa5/svg/icon/bnb.svg',
+//     explorerUrl: 'https://bscscan.com',
+//     explorerName: 'BscScan',
+//     nativeCoin: 'BNB',
+//     type: 'mainnet'
+//   },
+//   {
+//     name: 'IoTeX',
+//     chainId: 4689,
+//     rpcUrl: 'https://babel-api.mainnet.iotex.io/',
+//     logoUrl: 'https://coingecko-proxy.iopay.me/coins/images/3334/large/iotex-logo.png?1547037941',
+//     explorerUrl: 'https://iotexscan.io',
+//     explorerName: 'IotexScan',
+//     nativeCoin: 'IOTX',
+//     type: 'mainnet'
+//   },
+//   {
+//     name: 'IoTeX Testnet',
+//     chainId: 4690,
+//     rpcUrl: `https://babel-api.testnet.iotex.io`,
+//     logoUrl: 'https://coingecko-proxy.iopay.me/coins/images/3334/large/iotex-logo.png?1547037941',
+//     explorerUrl: 'https://testnet.iotexscan.io',
+//     explorerName: 'IotexScan',
+//     nativeCoin: 'IOTX',
+//     type: 'testnet'
+//   },
+//   {
+//     name: 'Avalanche',
+//     chainId: 43114,
+//     rpcUrl: 'https://rpc.ankr.com/avalanche',
+//     logoUrl: 'https://cdn.jsdelivr.net/gh/atomiclabs/cryptocurrency-icons@1a63530be6e374711a8554f31b17e4cb92c25fa5/svg/icon/avax.svg',
+//     explorerUrl: 'https://subnets.avax.network/',
+//     explorerName: 'AVAXScan',
+//     nativeCoin: 'AVAX',
+//     type: 'mainnet'
+//   },
+//   {
+//     name: "Optimism",
+//     chainId: 10,
+//     rpcUrl: "https://mainnet.optimism.io",
+//     logoUrl: "https://optimistic.etherscan.io/images/svg/brands/optimism.svg?v=23.09.02.4",
+//     explorerUrl: "https://optimistic.etherscan.io",
+//     explorerName: "Optimistic Etherscan",
+//     nativeCoin: "ETH",
+//     type: "mainnet"
+//   },
+// ];