More Chain Logos and Native Currency Icons (#116)

Mintbase · Sep 12, 2024 · 4cb6e8d · 4cb6e8d
1 parent 960c9e3
commit 4cb6e8d
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 8 deletions.
diff --git a/src/constants.ts b/src/constants.ts
@@ -1,29 +1,43 @@
 /// A short list of networks with known wrapped tokens.
+const ETHER_ICON = "https://cryptologos.cc/logos/ethereum-eth-logo.svg?v=024";
+
 export const CHAIN_INFO: {
-  [key: number]: { icon?: string; wrappedToken: string };
+  [key: number]: { icon?: string; wrappedToken: string; currencyIcon?: string };
 } = {
   11155111: {
-    icon: "https://cryptologos.cc/logos/ethereum-eth-logo.svg?v=014",
+    icon: ETHER_ICON,
     wrappedToken: "0xD0A1E359811322d97991E03f863a0C30C2cF029C",
   },
   1: {
-    icon: "https://cryptologos.cc/logos/ethereum-eth-logo.svg?v=014",
+    icon: ETHER_ICON,
     wrappedToken: "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2",
   },
   100: {
-    icon: "https://cryptologos.cc/logos/gnosis-gno-logo.svg?v=014",
+    icon: "https://cryptologos.cc/logos/gnosis-gno-gno-logo.svg?v=002",
     wrappedToken: "0x6a023ccd1ff6f2045c3309768ead9e68f978f6e1",
+    currencyIcon: "https://docs.gnosischain.com/img/tokens/xdai.png",
   },
   137: {
+    icon: "https://cryptologos.cc/logos/polygon-matic-logo.svg?v=024",
     wrappedToken: "0x7d1afa7b718fb893db30a3abc0cfc608aacfebb0",
   },
   42161: {
+    icon: "https://cryptologos.cc/logos/arbitrum-arb-logo.svg?v=024",
     wrappedToken: "0x82af49447d8a07e3bd95bd0d56f35241523fbab1",
+    currencyIcon: ETHER_ICON,
   },
   10: {
+    icon: "https://cryptologos.cc/logos/optimism-ethereum-op-logo.svg?v=024",
     wrappedToken: "0x4200000000000000000000000000000000000006",
+    currencyIcon: ETHER_ICON,
   },
   8453: {
+    icon: "https://avatars.githubusercontent.com/u/108554348?s=48&v=4",
     wrappedToken: "0x4200000000000000000000000000000000000006",
+    currencyIcon: ETHER_ICON,
+  },
+  56: {
+    icon: "https://cryptologos.cc/logos/binance-coin-bnb-logo.svg?v=024",
+    wrappedToken: "0xbb4CdB9CBd36B01bD1cBaEBF2De08d9173bc095c",
   },
 };
diff --git a/src/network.ts b/src/network.ts
@@ -10,11 +10,13 @@ interface NetworkFields {
   rpcUrl: string;
   chainId: number;
   scanUrl: string;
+  logo: string | undefined;
   nativeCurrency: {
     decimals: number;
     name: string;
     symbol: string;
     wrappedAddress: string | undefined;
+    // This is often Network logo, but sometimes not (e.g. Gnosis Chain & xDai)
     icon: string | undefined;
   };
 }
@@ -28,6 +30,7 @@ export class Network implements NetworkFields {
   chainId: number;
   scanUrl: string;
   client: PublicClient;
+  logo: string | undefined;
   nativeCurrency: {
     decimals: number;
     name: string;
@@ -42,6 +45,7 @@ export class Network implements NetworkFields {
     chainId,
     scanUrl,
     nativeCurrency,
+    logo,
   }: NetworkFields) {
     const network = SUPPORTED_NETWORKS[chainId]!;
 
@@ -53,6 +57,7 @@ export class Network implements NetworkFields {
       transport: http(network.rpcUrl),
     });
     this.nativeCurrency = nativeCurrency;
+    this.logo = logo;
   }
 
   static fromChainId(chainId: number): Network {
@@ -73,17 +78,18 @@ type NetworkMap = { [key: number]: NetworkFields };
 function createNetworkMap(supportedNetworks: Chain[]): NetworkMap {
   const networkMap: NetworkMap = {};
   supportedNetworks.forEach((network) => {
+    const chainInfo = CHAIN_INFO[network.id];
+    const logo = chainInfo?.icon || `/${network.nativeCurrency.symbol}.svg`;
     networkMap[network.id] = {
       name: network.name,
       rpcUrl: network.rpcUrls.default.http[0]!,
       chainId: network.id,
       scanUrl: network.blockExplorers?.default.url || "",
+      logo,
       nativeCurrency: {
         ...network.nativeCurrency,
-        wrappedAddress: CHAIN_INFO[network.id]?.wrappedToken,
-        icon:
-          CHAIN_INFO[network.id]?.icon ||
-          `/${network.nativeCurrency.symbol}.svg`,
+        wrappedAddress: chainInfo?.wrappedToken,
+        icon: chainInfo?.currencyIcon || logo,
       },
     };
   });