Use web3icons

packages/nextjs/components/NetworksDropdown/CustomOption.tsx

@@ -1,20 +1,20 @@
-import Image from "next/image";
 import { Options, isChainStored } from "./utils";
+import { NetworkIcon } from "@web3icons/react";
 import { OptionProps, components } from "react-select";
 import { EyeIcon, PlusIcon, WrenchScrewdriverIcon } from "@heroicons/react/24/outline";
 
 const { Option } = components;
 
-export const getIconComponent = (iconName: string | undefined) => {
-  switch (iconName) {
+export const getIconComponent = (data: Options) => {
+  switch (data.icon) {
     case "EyeIcon":
       return <EyeIcon className="h-6 w-6 mr-2 text-gray-500" />;
     case "localhost":
       return <WrenchScrewdriverIcon className="h-6 w-6 mr-2 text-gray-500" />;
     case "PlusIcon":
       return <PlusIcon className="h-6 w-6 mr-2 text-gray-500" />;
     default:
-      return <Image src={iconName || "/mainnet.svg"} alt="default icon" width={24} height={24} className="mr-2" />;
+      return <NetworkIcon chainId={data.value} variant="branded" size={24} fallback={"/mainnet.svg"} />;
   }
 };
 
@@ -27,12 +27,11 @@ export const CustomOption = (props: CustomOptionProps) => {
     e.stopPropagation();
     props.onDelete(data);
   };
-
   return (
     <Option {...props}>
       <div className="flex items-center justify-between">
-        <div className="flex items-center">
-          {typeof data.icon === "string" ? getIconComponent(data.icon) : data.icon}
+        <div className="flex items-center gap-2">
+          {getIconComponent(data)}
           {data.label}
         </div>
 

packages/nextjs/package.json

@@ -22,6 +22,7 @@
     "@uniswap/sdk-core": "^4.0.1",
     "@uniswap/v2-sdk": "^3.0.1",
     "@vercel/og": "^0.6.2",
+    "@web3icons/react": "^3.6.0",
     "blo": "^1.0.1",
     "burner-connector": "^0.0.8",
     "daisyui": "^4.4.19",

yarn.lock

@@ -1659,6 +1659,7 @@ __metadata:
     "@uniswap/sdk-core": ^4.0.1
     "@uniswap/v2-sdk": ^3.0.1
     "@vercel/og": ^0.6.2
+    "@web3icons/react": ^3.6.0
     abitype: 1.0.2
     autoprefixer: ^10.4.12
     blo: ^1.0.1
@@ -2976,6 +2977,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@web3icons/core@npm:3.6.0":
+  version: 3.6.0
+  resolution: "@web3icons/core@npm:3.6.0"
+  peerDependencies:
+    typescript: ^5.0.0
+  checksum: de65124a8fe739f0fdea78176219aa7255f93077077cb2768ba14f13834069517203e639ca82ac5daaca19815f9865bb0583a88a01f2369d93b621cbd95fbbc6
+  languageName: node
+  linkType: hard
+
+"@web3icons/react@npm:^3.6.0":
+  version: 3.6.0
+  resolution: "@web3icons/react@npm:3.6.0"
+  dependencies:
+    "@web3icons/core": 3.6.0
+    react: ^18.2.0
+  peerDependencies:
+    react: ^18.2.0
+  checksum: 59b97581e1d7c0409c16ed173956beeb578097c7d459a7681a96aad15438331e34ef490a57510d869d50712ef8f17d3a295409553285231c41121249c3f6f83a
+  languageName: node
+  linkType: hard
+
 "abbrev@npm:1":
   version: 1.1.1
   resolution: "abbrev@npm:1.1.1"