add missing icons & update web3icons validation logic (#84)

0xa3k5 · YaroShkvorets · web-flow · commit b03931769d47 · 2025-02-20T12:53:39.000-05:00
* add missing icons

* update web3icon types to match the library

* add a warning if web3icon is missing on a network

* use fileName for the web3icons icon matching

* run generate:table

* bump version

* tweak web3icon validation

* update moonriver, zora web3icons

---------

Co-authored-by: YaroShkvorets &lt;shkvorets@gmail.com&gt;
diff --git a/docs/networks-table.md b/docs/networks-table.md
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.6.39",
+  "version": "0.6.40",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/registry/cosmos/mantra-mainnet.json b/registry/cosmos/mantra-mainnet.json
@@ -24,5 +24,6 @@
     "blockType": "sf.cosmos.type.v2.Block",
     "bufUrl": "https://buf.build/streamingfast/firehose-cosmos",
     "bytesEncoding": "hex"
-  }
+  },
+  "icon": { "web3Icons": { "name": "mantra" } }
 }
diff --git a/registry/cosmos/mantra-testnet.json b/registry/cosmos/mantra-testnet.json
@@ -26,5 +26,6 @@
     "blockType": "sf.cosmos.type.v2.Block",
     "bufUrl": "https://buf.build/streamingfast/firehose-cosmos",
     "bytesEncoding": "hex"
-  }
+  },
+  "icon": { "web3Icons": { "name": "mantra" } }
 }
diff --git a/registry/eip155/botanix-testnet.json b/registry/eip155/botanix-testnet.json
@@ -28,5 +28,6 @@
     "evmExtendedModel": false,
     "bufUrl": "https://buf.build/streamingfast/firehose-ethereum",
     "bytesEncoding": "hex"
-  }
+  },
+  "icon": { "web3Icons": { "name": "botanix" } }
 }
diff --git a/registry/eip155/expchain-testnet.json b/registry/eip155/expchain-testnet.json
@@ -28,5 +28,6 @@
     "evmExtendedModel": false,
     "bufUrl": "https://buf.build/streamingfast/firehose-ethereum",
     "bytesEncoding": "hex"
-  }
+  },
+  "icon": { "web3Icons": { "name": "expchain" } }
 }
diff --git a/registry/eip155/lens-testnet.json b/registry/eip155/lens-testnet.json
@@ -28,5 +28,6 @@
     "evmExtendedModel": false,
     "bufUrl": "https://buf.build/streamingfast/firehose-ethereum",
     "bytesEncoding": "hex"
-  }
+  },
+  "icon": { "web3Icons": { "name": "lens" } }
 }
diff --git a/registry/eip155/moonriver.json b/registry/eip155/moonriver.json
@@ -35,6 +35,6 @@
     "bytesEncoding": "hex"
   },
   "icon": {
-    "web3Icons": { "name": "moonriver", "variants": ["mono", "branded"] }
+    "web3Icons": { "name": "moonriver" }
   }
 }
diff --git a/registry/eip155/zora.json b/registry/eip155/zora.json
@@ -42,5 +42,5 @@
     "bufUrl": "https://buf.build/streamingfast/firehose-ethereum",
     "bytesEncoding": "hex"
   },
-  "icon": { "web3Icons": { "name": "zora" } }
+  "icon": { "web3Icons": { "name": "zora", "variants": ["branded"] } }
 }
diff --git a/src/utils/web3icons.ts b/src/utils/web3icons.ts
@@ -1,12 +1,14 @@
-export type Variants = "branded" | "mono";
+export type Variants = "branded" | "mono" | "background";
 
 export interface Web3IconsNetwork {
   id: string;
   name: string;
+  fileName: string;
   variants: Variants[];
   nativeCoinId?: string;
   shortName?: string;
   chainId?: number;
+  caip2id: string;
 }
 
 export async function fetchWeb3NetworkIcons(): Promise<Web3IconsNetwork[]> {
diff --git a/src/validate_logic.ts b/src/validate_logic.ts
@@ -253,9 +253,17 @@ async function validateWeb3Icons(networks: Network[]) {
   process.stdout.write("Validating web3 icons ... ");
   const web3Icons = await fetchWeb3NetworkIcons();
   for (const network of networks) {
-    if (network.icon?.web3Icons?.name) {
-      const ourIcon = network.icon?.web3Icons!;
-      const web3Icon = web3Icons.find((i) => i.id === ourIcon.name);
+    if (!network.icon || !network.icon.web3Icons) {
+      WARNINGS.push(`\`${network.id}\` - has no web3icon`);
+      continue;
+    }
+    if (network.icon.web3Icons.name) {
+      const ourIcon = network.icon.web3Icons;
+      /**
+       * in web3icons the fileName is better point of reference than "id"
+       * since id can differ from fileName, using id would prevent loading icons from github urls
+       */
+      const web3Icon = web3Icons.find((i) => i.fileName === ourIcon.name);
       if (!web3Icon) {
         ERRORS.push(
           `\`${network.id}\` - web3icon id does not exist on web3Icons: \`${ourIcon.name}\``,
@@ -264,24 +272,32 @@ async function validateWeb3Icons(networks: Network[]) {
         const web3Variants = web3Icon.variants || [];
         const ourVariants = ourIcon.variants || [];
 
-        if (web3Variants.length === 2) {
-          if (ourVariants.length === 1) {
-            WARNINGS.push(
-              `\`${network.id}\` - web3icon should have both variants or none \`${ourVariants.join(",")}\``,
-            );
-          }
-        } else if (web3Variants.length === 1) {
-          if (ourVariants.length !== 1 || ourVariants[0] !== web3Variants[0]) {
-            ERRORS.push(
-              `\`${network.id}\` - web3icon should only have the variant \`${web3Variants[0]}\``,
-            );
-          }
+        if (
+          web3Variants.length === 3 &&
+          ourVariants.length !== 0 &&
+          ourVariants.length !== 3
+        ) {
+          WARNINGS.push(
+            `\`${network.id}\` - web3icon should have 0 or all 3 variants \`${ourVariants.join(",")}\``,
+          );
+        }
+        if (
+          web3Variants.length !== 3 &&
+          web3Variants.sort().join(",") !== ourVariants.sort().join(",")
+        ) {
+          WARNINGS.push(
+            `\`${network.id}\` - web3icon has mismatching variants \`${web3Variants.join(",")}\``,
+          );
         }
       }
     } else {
       if (web3Icons.find((i) => i.id === network.id)) {
         WARNINGS.push(
-          `\`${network.id}\` - does not have a web3icon but there exists an icon with the same id. Consider adding it.`,
+          `\`${network.id}\` - has no web3icon but there exists an icon with the same id. Consider adding it.`,
+        );
+      } else {
+        WARNINGS.push(
+          `\`${network.id}\` - has no web3icon, consider adding one to web3icons repo`,
         );
       }
     }

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "version": "0.6.39",`
	`2`	`+ "version": "0.6.40",`
`3`	`3`	`"private": true,`
`4`	`4`	`"type": "module",`
`5`	`5`	`"scripts": {`
Original file line number	Diff line number	Diff line change
`@@ -24,5 +24,6 @@`
`24`	`24`	`"blockType": "sf.cosmos.type.v2.Block",`
`25`	`25`	`"bufUrl": "https://buf.build/streamingfast/firehose-cosmos",`
`26`	`26`	`"bytesEncoding": "hex"`
`27`		`- }`
	`27`	`+ },`
	`28`	`+ "icon": { "web3Icons": { "name": "mantra" } }`
`28`	`29`	`}`
Original file line number	Diff line number	Diff line change
`@@ -26,5 +26,6 @@`
`26`	`26`	`"blockType": "sf.cosmos.type.v2.Block",`
`27`	`27`	`"bufUrl": "https://buf.build/streamingfast/firehose-cosmos",`
`28`	`28`	`"bytesEncoding": "hex"`
`29`		`- }`
	`29`	`+ },`
	`30`	`+ "icon": { "web3Icons": { "name": "mantra" } }`
`30`	`31`	`}`
Original file line number	Diff line number	Diff line change
`@@ -28,5 +28,6 @@`
`28`	`28`	`"evmExtendedModel": false,`
`29`	`29`	`"bufUrl": "https://buf.build/streamingfast/firehose-ethereum",`
`30`	`30`	`"bytesEncoding": "hex"`
`31`		`- }`
	`31`	`+ },`
	`32`	`+ "icon": { "web3Icons": { "name": "botanix" } }`
`32`	`33`	`}`
Original file line number	Diff line number	Diff line change
`@@ -35,6 +35,6 @@`
`35`	`35`	`"bytesEncoding": "hex"`
`36`	`36`	`},`
`37`	`37`	`"icon": {`
`38`		`- "web3Icons": { "name": "moonriver", "variants": ["mono", "branded"] }`
	`38`	`+ "web3Icons": { "name": "moonriver" }`
`39`	`39`	`}`
`40`	`40`	`}`
Original file line number	Diff line number	Diff line change
`@@ -42,5 +42,5 @@`
`42`	`42`	`"bufUrl": "https://buf.build/streamingfast/firehose-ethereum",`
`43`	`43`	`"bytesEncoding": "hex"`
`44`	`44`	`},`
`45`		`- "icon": { "web3Icons": { "name": "zora" } }`
	`45`	`+ "icon": { "web3Icons": { "name": "zora", "variants": ["branded"] } }`
`46`	`46`	`}`