update NetworkIcon to support matching with chainId

packages/react/src/NetworkIcon.tsx

@@ -4,8 +4,11 @@ import { findNetwork } from './utils'
 import { DynamicIcon } from './DynamicIcon'
 
 export const NetworkIcon = forwardRef<SVGSVGElement, NetworkIconProps>(
-  ({ network, size, className, variant = 'mono', color, fallback }, ref) => {
-    const metadata = findNetwork({ network })
+  (
+    { network, chainId, size, className, variant = 'mono', color, fallback },
+    ref,
+  ) => {
+    const metadata = findNetwork(network ? { network } : { chainId })
     return (
       <DynamicIcon
         type="network"

packages/react/src/types.ts

@@ -19,7 +19,11 @@ export type TokenIconProps = IconComponentProps &
     | { symbol?: never; address: string; network: string }
   )
 
-export type NetworkIconProps = IconComponentProps & { network: string }
+export type NetworkIconProps = IconComponentProps &
+  (
+    | { network: string; chainId?: never }
+    | { chainId: number | string; network: never }
+  )
 
 export type WalletIconProps = IconComponentProps &
   ({ name: string; id?: never } | { id: string; name?: never })

packages/react/src/utils/find-metadata.ts

@@ -45,14 +45,25 @@ export const findToken = ({
 
 export const findNetwork = ({
   network,
+  chainId,
 }: {
-  network: string
+  network?: string
+  chainId?: number | string
 }): INetworkMetadata | undefined => {
-  const networkObj = networks.find(
-    (net) =>
-      net.id.toLowerCase() === toKebabCase(network) ||
-      net.name.toLowerCase() === network.toLowerCase() ||
-      net.shortname?.toLowerCase() === network.toLowerCase(),
-  )
-  return networkObj
+  if (network) {
+    const networkObj = networks.find(
+      (net) =>
+        net.id.toLowerCase() === toKebabCase(network) ||
+        net.name.toLowerCase() === network.toLowerCase() ||
+        net.shortname?.toLowerCase() === network.toLowerCase(),
+    )
+    return networkObj
+  }
+
+  if (chainId) {
+    const networkObj = networks.find((net) => net.chainId === chainId)
+    return networkObj
+  }
+
+  return undefined
 }

packages/react/src/utils/icon-import-map.ts

@@ -13,20 +13,27 @@ export const NETWORK_ICON_IMPORT_MAP: IconImportMap = {
 NetworkBitkubChain: () => import('../icons/networks/NetworkBitkubChain'),
 NetworkLinea: () => import('../icons/networks/NetworkLinea'),
 NetworkFio: () => import('../icons/networks/NetworkFio'),
+NetworkOkex: () => import('../icons/networks/NetworkOkex'),
 NetworkMatic: () => import('../icons/networks/NetworkMatic'),
 NetworkPolkadot: () => import('../icons/networks/NetworkPolkadot'),
 NetworkKava: () => import('../icons/networks/NetworkKava'),
 NetworkZksync: () => import('../icons/networks/NetworkZksync'),
 NetworkAurora: () => import('../icons/networks/NetworkAurora'),
+NetworkVelas: () => import('../icons/networks/NetworkVelas'),
 NetworkAstar: () => import('../icons/networks/NetworkAstar'),
+NetworkLyra: () => import('../icons/networks/NetworkLyra'),
+NetworkViction: () => import('../icons/networks/NetworkViction'),
 NetworkApexLayer: () => import('../icons/networks/NetworkApexLayer'),
 NetworkOptimism: () => import('../icons/networks/NetworkOptimism'),
 NetworkIotex: () => import('../icons/networks/NetworkIotex'),
 NetworkLoopring: () => import('../icons/networks/NetworkLoopring'),
+NetworkLukso: () => import('../icons/networks/NetworkLukso'),
+NetworkSongbird: () => import('../icons/networks/NetworkSongbird'),
 NetworkHederaHashgraph: () => import('../icons/networks/NetworkHederaHashgraph'),
 NetworkBoba: () => import('../icons/networks/NetworkBoba'),
 NetworkXLayer: () => import('../icons/networks/NetworkXLayer'),
 NetworkBlast: () => import('../icons/networks/NetworkBlast'),
+NetworkEnergyWeb: () => import('../icons/networks/NetworkEnergyWeb'),
 NetworkCosmos: () => import('../icons/networks/NetworkCosmos'),
 NetworkKujira: () => import('../icons/networks/NetworkKujira'),
 NetworkSeiNetwork: () => import('../icons/networks/NetworkSeiNetwork'),
@@ -40,44 +47,67 @@ NetworkAvalanche: () => import('../icons/networks/NetworkAvalanche'),
 NetworkChiliz: () => import('../icons/networks/NetworkChiliz'),
 NetworkNearProtocol: () => import('../icons/networks/NetworkNearProtocol'),
 NetworkCelo: () => import('../icons/networks/NetworkCelo'),
+NetworkEnuls: () => import('../icons/networks/NetworkEnuls'),
 NetworkInjective: () => import('../icons/networks/NetworkInjective'),
 NetworkOsmosis: () => import('../icons/networks/NetworkOsmosis'),
 NetworkNeonEvm: () => import('../icons/networks/NetworkNeonEvm'),
+NetworkRootstock: () => import('../icons/networks/NetworkRootstock'),
 NetworkLavaNetwork: () => import('../icons/networks/NetworkLavaNetwork'),
+NetworkMeter: () => import('../icons/networks/NetworkMeter'),
+NetworkTheta: () => import('../icons/networks/NetworkTheta'),
 NetworkZilliqa: () => import('../icons/networks/NetworkZilliqa'),
 NetworkStarknet: () => import('../icons/networks/NetworkStarknet'),
 NetworkMoonbeam: () => import('../icons/networks/NetworkMoonbeam'),
+NetworkRollux: () => import('../icons/networks/NetworkRollux'),
 NetworkEtherlink: () => import('../icons/networks/NetworkEtherlink'),
 NetworkBase: () => import('../icons/networks/NetworkBase'),
+NetworkShiden: () => import('../icons/networks/NetworkShiden'),
 NetworkZetaChain: () => import('../icons/networks/NetworkZetaChain'),
 NetworkAptos: () => import('../icons/networks/NetworkAptos'),
 NetworkXrp: () => import('../icons/networks/NetworkXrp'),
+NetworkKardia: () => import('../icons/networks/NetworkKardia'),
+NetworkUbiq: () => import('../icons/networks/NetworkUbiq'),
+NetworkConflux: () => import('../icons/networks/NetworkConflux'),
 NetworkSui: () => import('../icons/networks/NetworkSui'),
 NetworkAcala: () => import('../icons/networks/NetworkAcala'),
 NetworkZora: () => import('../icons/networks/NetworkZora'),
 NetworkGnosis: () => import('../icons/networks/NetworkGnosis'),
 NetworkAbstract: () => import('../icons/networks/NetworkAbstract'),
 NetworkFraxtal: () => import('../icons/networks/NetworkFraxtal'),
+NetworkSys: () => import('../icons/networks/NetworkSys'),
+NetworkStep: () => import('../icons/networks/NetworkStep'),
+NetworkOasys: () => import('../icons/networks/NetworkOasys'),
+NetworkCoinexSmartChain: () => import('../icons/networks/NetworkCoinexSmartChain'),
 NetworkMultiversx: () => import('../icons/networks/NetworkMultiversx'),
 NetworkScroll: () => import('../icons/networks/NetworkScroll'),
 NetworkBinanceSmartChain: () => import('../icons/networks/NetworkBinanceSmartChain'),
 NetworkFilecoin: () => import('../icons/networks/NetworkFilecoin'),
+NetworkShimmerEvm: () => import('../icons/networks/NetworkShimmerEvm'),
+NetworkThundercore: () => import('../icons/networks/NetworkThundercore'),
 NetworkPolygonZkevm: () => import('../icons/networks/NetworkPolygonZkevm'),
 NetworkLitecoin: () => import('../icons/networks/NetworkLitecoin'),
+NetworkFuse: () => import('../icons/networks/NetworkFuse'),
 NetworkTelos: () => import('../icons/networks/NetworkTelos'),
+NetworkElastos: () => import('../icons/networks/NetworkElastos'),
 NetworkStellar: () => import('../icons/networks/NetworkStellar'),
+NetworkXdc: () => import('../icons/networks/NetworkXdc'),
 NetworkImmutable: () => import('../icons/networks/NetworkImmutable'),
 NetworkStargaze: () => import('../icons/networks/NetworkStargaze'),
 NetworkMetisAndromeda: () => import('../icons/networks/NetworkMetisAndromeda'),
 NetworkRari: () => import('../icons/networks/NetworkRari'),
 NetworkXai: () => import('../icons/networks/NetworkXai'),
 NetworkEos: () => import('../icons/networks/NetworkEos'),
+NetworkEthereumClassic: () => import('../icons/networks/NetworkEthereumClassic'),
+NetworkCronosZkevm: () => import('../icons/networks/NetworkCronosZkevm'),
 NetworkCosmosHub: () => import('../icons/networks/NetworkCosmosHub'),
 NetworkMoonriver: () => import('../icons/networks/NetworkMoonriver'),
 NetworkGravity: () => import('../icons/networks/NetworkGravity'),
+NetworkKucoin: () => import('../icons/networks/NetworkKucoin'),
+NetworkUltron: () => import('../icons/networks/NetworkUltron'),
 NetworkPolygonPos: () => import('../icons/networks/NetworkPolygonPos'),
 NetworkEthereum: () => import('../icons/networks/NetworkEthereum'),
 NetworkArbitrumNova: () => import('../icons/networks/NetworkArbitrumNova'),
+NetworkZyx: () => import('../icons/networks/NetworkZyx'),
 NetworkRonin: () => import('../icons/networks/NetworkRonin'),
 NetworkMode: () => import('../icons/networks/NetworkMode'),
 NetworkCardano: () => import('../icons/networks/NetworkCardano'),
@@ -88,6 +118,7 @@ NetworkSolana: () => import('../icons/networks/NetworkSolana'),
 NetworkTron: () => import('../icons/networks/NetworkTron'),
 NetworkArbitrumOne: () => import('../icons/networks/NetworkArbitrumOne'),
 NetworkBeam: () => import('../icons/networks/NetworkBeam'),
+NetworkFlare: () => import('../icons/networks/NetworkFlare'),
 };
 
 export const TOKEN_ICON_IMPORT_MAP: IconImportMap  = {