diff --git a/packages/react/src/NetworkIcon.tsx b/packages/react/src/NetworkIcon.tsx index 16b138eef..7978ebd80 100644 --- a/packages/react/src/NetworkIcon.tsx +++ b/packages/react/src/NetworkIcon.tsx @@ -4,8 +4,11 @@ import { findNetwork } from './utils' import { DynamicIcon } from './DynamicIcon' export const NetworkIcon = forwardRef( - ({ 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 ( { - 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 } diff --git a/packages/react/src/utils/icon-import-map.ts b/packages/react/src/utils/icon-import-map.ts index 95929a875..7848d4946 100644 --- a/packages/react/src/utils/icon-import-map.ts +++ b/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 = {