@openzeppelin/ui-builder-adapter-evm 0.11.1 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openzeppelin/ui-builder-adapter-evm",
-  "version": "0.11.1",
+  "version": "0.13.0",
   "private": false,
   "description": "EVM Adapter for UI Builder",
   "keywords": [
@@ -39,13 +39,14 @@
     "@openzeppelin/relayer-sdk": "1.4.0",
     "@wagmi/connectors": "5.7.13",
     "@wagmi/core": "^2.20.3",
+    "@web3icons/react": "^4.0.19",
     "lodash": "^4.17.21",
     "lucide-react": "^0.510.0",
     "react-hook-form": "^7.62.0",
-    "@openzeppelin/ui-builder-react-core": "^0.10.0",
-    "@openzeppelin/ui-builder-types": "^0.10.1",
-    "@openzeppelin/ui-builder-utils": "^0.10.1",
-    "@openzeppelin/ui-builder-ui": "^0.10.1"
+    "@openzeppelin/ui-builder-react-core": "^0.13.0",
+    "@openzeppelin/ui-builder-types": "^0.13.0",
+    "@openzeppelin/ui-builder-ui": "^0.13.0",
+    "@openzeppelin/ui-builder-utils": "^0.13.0"
   },
   "devDependencies": {
     "@rainbow-me/rainbowkit": "^2.2.8",

package/src/__tests__/mocks/mock-network-configs.ts

@@ -15,7 +15,6 @@ export const mockEvmNetworkConfig: EvmNetworkConfig = {
   rpcUrl: 'http://localhost:8545', // Mock RPC URL
   nativeCurrency: { name: 'TestETH', symbol: 'TETH', decimals: 18 },
   apiUrl: 'https://api.etherscan.io/api', // Mock API URL
-  icon: 'ethereum',
 };
 
 // Add mocks for other ecosystems here if needed later

package/src/mapping/__tests__/field-generator.test.ts

@@ -0,0 +1,100 @@
+import { describe, expect, it } from 'vitest';
+
+import type { FunctionParameter } from '@openzeppelin/ui-builder-types';
+
+import { generateEvmDefaultField } from '../field-generator';
+
+// Helper to create a mock function parameter
+const createParam = (type: string, name: string, description?: string): FunctionParameter => ({
+  name,
+  type,
+  displayName: name,
+  description,
+});
+
+describe('EVM Field Generator', () => {
+  describe('generateEvmDefaultField', () => {
+    it('should generate a number field for small integer types', () => {
+      const param = createParam('uint32', 'count');
+      const field = generateEvmDefaultField(param);
+
+      expect(field.type).toBe('number');
+      expect(field.validation.required).toBe(true);
+      expect(field.validation.pattern).toBeUndefined();
+    });
+
+    it('should generate a bigint field for uint128', () => {
+      const param = createParam('uint128', 'amount');
+      const field = generateEvmDefaultField(param);
+
+      expect(field.type).toBe('bigint');
+      expect(field.validation.required).toBe(true);
+      // BigIntField component handles its own validation and UI guidance
+    });
+
+    it('should generate a bigint field for uint256', () => {
+      const param = createParam('uint256', 'value');
+      const field = generateEvmDefaultField(param);
+
+      expect(field.type).toBe('bigint');
+      expect(field.validation.required).toBe(true);
+      // BigIntField component handles its own validation and UI guidance
+    });
+
+    it('should generate a bigint field for int128', () => {
+      const param = createParam('int128', 'delta');
+      const field = generateEvmDefaultField(param);
+
+      expect(field.type).toBe('bigint');
+      expect(field.validation.required).toBe(true);
+      // BigIntField component handles its own validation and UI guidance
+    });
+
+    it('should generate a bigint field for int256', () => {
+      const param = createParam('int256', 'offset');
+      const field = generateEvmDefaultField(param);
+
+      expect(field.type).toBe('bigint');
+      expect(field.validation.required).toBe(true);
+      // BigIntField component handles its own validation and UI guidance
+    });
+
+    it('should preserve parameter description in helper text', () => {
+      const param = createParam('uint256', 'tokenId', 'The unique identifier of the NFT');
+      const field = generateEvmDefaultField(param);
+
+      expect(field.type).toBe('bigint');
+      expect(field.helperText).toBe('The unique identifier of the NFT');
+    });
+
+    it('should generate a blockchain-address field for address type', () => {
+      const param = createParam('address', 'recipient');
+      const field = generateEvmDefaultField(param);
+
+      expect(field.type).toBe('blockchain-address');
+      expect(field.validation.required).toBe(true);
+      expect(field.validation.pattern).toBeUndefined();
+    });
+
+    it('should generate array field with proper element config for uint256[]', () => {
+      const param = createParam('uint256[]', 'amounts');
+      const field = generateEvmDefaultField(param);
+
+      expect(field.type).toBe('array');
+      expect(field.elementFieldConfig).toBeDefined();
+      expect(field.elementFieldConfig?.type).toBe('bigint');
+      // Integer validation is handled by BigIntField component internally
+    });
+
+    it('should include proper field metadata', () => {
+      const param = createParam('uint256', 'value');
+      const field = generateEvmDefaultField(param);
+
+      expect(field.id).toBeDefined();
+      expect(field.name).toBe('value');
+      expect(field.label).toBe('Value');
+      expect(field.placeholder).toContain('value');
+      expect(field.width).toBe('full');
+    });
+  });
+});

package/src/mapping/__tests__/type-mapper.test.ts

@@ -0,0 +1,139 @@
+import { describe, expect, it } from 'vitest';
+
+import { getEvmCompatibleFieldTypes, mapEvmParamTypeToFieldType } from '../type-mapper';
+
+describe('EVM Type Mapper', () => {
+  describe('mapEvmParamTypeToFieldType', () => {
+    it('should map small integer types to number field', () => {
+      expect(mapEvmParamTypeToFieldType('uint')).toBe('number');
+      expect(mapEvmParamTypeToFieldType('uint8')).toBe('number');
+      expect(mapEvmParamTypeToFieldType('uint16')).toBe('number');
+      expect(mapEvmParamTypeToFieldType('uint32')).toBe('number');
+      expect(mapEvmParamTypeToFieldType('int')).toBe('number');
+      expect(mapEvmParamTypeToFieldType('int8')).toBe('number');
+      expect(mapEvmParamTypeToFieldType('int16')).toBe('number');
+      expect(mapEvmParamTypeToFieldType('int32')).toBe('number');
+    });
+
+    it('should map 64-bit and larger integer types to bigint field to avoid precision loss', () => {
+      // These types can hold values larger than JavaScript's Number.MAX_SAFE_INTEGER (2^53-1)
+      expect(mapEvmParamTypeToFieldType('uint64')).toBe('bigint');
+      expect(mapEvmParamTypeToFieldType('uint128')).toBe('bigint');
+      expect(mapEvmParamTypeToFieldType('uint256')).toBe('bigint');
+      expect(mapEvmParamTypeToFieldType('int64')).toBe('bigint');
+      expect(mapEvmParamTypeToFieldType('int128')).toBe('bigint');
+      expect(mapEvmParamTypeToFieldType('int256')).toBe('bigint');
+    });
+
+    it('should map address to blockchain-address field', () => {
+      expect(mapEvmParamTypeToFieldType('address')).toBe('blockchain-address');
+    });
+
+    it('should map bool to checkbox field', () => {
+      expect(mapEvmParamTypeToFieldType('bool')).toBe('checkbox');
+    });
+
+    it('should map string to text field', () => {
+      expect(mapEvmParamTypeToFieldType('string')).toBe('text');
+    });
+
+    it('should map bytes types to text/textarea fields', () => {
+      expect(mapEvmParamTypeToFieldType('bytes')).toBe('textarea');
+      expect(mapEvmParamTypeToFieldType('bytes32')).toBe('text');
+    });
+
+    it('should map array types correctly', () => {
+      expect(mapEvmParamTypeToFieldType('uint256[]')).toBe('array');
+      expect(mapEvmParamTypeToFieldType('address[]')).toBe('array');
+      expect(mapEvmParamTypeToFieldType('string[]')).toBe('array');
+    });
+
+    it('should map tuple types to object', () => {
+      expect(mapEvmParamTypeToFieldType('tuple')).toBe('object');
+    });
+
+    it('should map array of tuples to array-object', () => {
+      expect(mapEvmParamTypeToFieldType('tuple[]')).toBe('array-object');
+      expect(mapEvmParamTypeToFieldType('tuple[5]')).toBe('array-object');
+    });
+
+    it('should default to text for unknown types', () => {
+      expect(mapEvmParamTypeToFieldType('unknown')).toBe('text');
+      expect(mapEvmParamTypeToFieldType('custom')).toBe('text');
+    });
+  });
+
+  describe('getEvmCompatibleFieldTypes', () => {
+    it('should return bigint as first compatible type for 64-bit and larger unsigned integers', () => {
+      // Verify uint64
+      const compatibleTypesUint64 = getEvmCompatibleFieldTypes('uint64');
+      expect(compatibleTypesUint64[0]).toBe('bigint'); // First (recommended) type
+      expect(compatibleTypesUint64).toContain('number');
+      expect(compatibleTypesUint64).toContain('amount');
+      expect(compatibleTypesUint64).toContain('text');
+
+      // Verify uint128
+      const compatibleTypesUint128 = getEvmCompatibleFieldTypes('uint128');
+      expect(compatibleTypesUint128[0]).toBe('bigint'); // First (recommended) type
+      expect(compatibleTypesUint128).toContain('number');
+      expect(compatibleTypesUint128).toContain('amount');
+      expect(compatibleTypesUint128).toContain('text');
+
+      // Verify uint256
+      const compatibleTypesUint256 = getEvmCompatibleFieldTypes('uint256');
+      expect(compatibleTypesUint256[0]).toBe('bigint'); // First (recommended) type
+      expect(compatibleTypesUint256).toContain('number');
+      expect(compatibleTypesUint256).toContain('amount');
+      expect(compatibleTypesUint256).toContain('text');
+    });
+
+    it('should return bigint as first compatible type for 64-bit and larger signed integers', () => {
+      // Verify int64
+      const compatibleTypesInt64 = getEvmCompatibleFieldTypes('int64');
+      expect(compatibleTypesInt64[0]).toBe('bigint'); // First (recommended) type
+      expect(compatibleTypesInt64).toContain('number');
+      expect(compatibleTypesInt64).toContain('text');
+
+      // Verify int128
+      const compatibleTypesInt128 = getEvmCompatibleFieldTypes('int128');
+      expect(compatibleTypesInt128[0]).toBe('bigint'); // First (recommended) type
+      expect(compatibleTypesInt128).toContain('number');
+      expect(compatibleTypesInt128).toContain('text');
+
+      // Verify int256
+      const compatibleTypesInt256 = getEvmCompatibleFieldTypes('int256');
+      expect(compatibleTypesInt256[0]).toBe('bigint'); // First (recommended) type
+      expect(compatibleTypesInt256).toContain('number');
+      expect(compatibleTypesInt256).toContain('text');
+    });
+
+    it('should return number as first compatible type for small integers', () => {
+      // Small integers that fit within JavaScript Number precision
+      const compatibleTypes = getEvmCompatibleFieldTypes('uint32');
+      expect(compatibleTypes[0]).toBe('number'); // First (recommended) type
+      expect(compatibleTypes).toContain('amount');
+      expect(compatibleTypes).toContain('text');
+    });
+
+    it('should return compatible field types for address', () => {
+      const compatibleTypes = getEvmCompatibleFieldTypes('address');
+      expect(compatibleTypes[0]).toBe('blockchain-address'); // First (recommended) type
+      expect(compatibleTypes).toContain('text');
+    });
+
+    it('should return compatible field types for bool', () => {
+      const compatibleTypes = getEvmCompatibleFieldTypes('bool');
+      expect(compatibleTypes[0]).toBe('checkbox'); // First (recommended) type
+      expect(compatibleTypes).toContain('select');
+      expect(compatibleTypes).toContain('radio');
+      expect(compatibleTypes).toContain('text');
+    });
+
+    it('should return compatible field types for arrays', () => {
+      const compatibleTypes = getEvmCompatibleFieldTypes('uint256[]');
+      expect(compatibleTypes[0]).toBe('array'); // First (recommended) type
+      expect(compatibleTypes).toContain('textarea');
+      expect(compatibleTypes).toContain('text');
+    });
+  });
+});

package/src/mapping/constants.ts

@@ -2,6 +2,12 @@ import type { FieldType } from '@openzeppelin/ui-builder-types';
 
 /**
  * EVM-specific type mapping to default form field types.
+ *
+ * Note: Large integer types (uint128, uint256, int128, int256) are mapped to 'bigint'
+ * instead of 'number' to avoid JavaScript's Number precision limitations.
+ * JavaScript's Number type can only safely represent integers up to 2^53 - 1,
+ * but these types can hold much larger values. The BigIntField component stores values
+ * as strings and the EVM adapter handles BigInt conversion automatically.
  */
 export const EVM_TYPE_TO_FIELD_TYPE: Record<string, FieldType> = {
   address: 'blockchain-address',
@@ -10,16 +16,16 @@ export const EVM_TYPE_TO_FIELD_TYPE: Record<string, FieldType> = {
   uint8: 'number',
   uint16: 'number',
   uint32: 'number',
-  uint64: 'number',
-  uint128: 'number',
-  uint256: 'number',
+  uint64: 'bigint',
+  uint128: 'bigint',
+  uint256: 'bigint',
   int: 'number',
   int8: 'number',
   int16: 'number',
   int32: 'number',
-  int64: 'number',
-  int128: 'number',
-  int256: 'number',
+  int64: 'bigint',
+  int128: 'bigint',
+  int256: 'bigint',
   bool: 'checkbox',
   bytes: 'textarea',
   bytes32: 'text',

package/src/mapping/field-generator.ts

@@ -26,10 +26,10 @@ function extractArrayElementType(parameterType: string): string | null {
 }
 
 /**
- * Get default validation rules for a parameter type.
- * Only includes serializable validation rules - no custom functions.
+ * Get default validation rules for a parameter.
+ * Field-specific validation is handled by the field components themselves.
  */
-function getDefaultValidationForType(): FieldValidation {
+function getDefaultValidation(): FieldValidation {
   return { required: true };
 }
 
@@ -40,6 +40,7 @@ export function generateEvmDefaultField<T extends FieldType = FieldType>(
   parameter: FunctionParameter
 ): FormFieldType<T> {
   const fieldType = mapEvmParamTypeToFieldType(parameter.type) as T;
+
   const baseField: FormFieldType<T> = {
     id: `field-${Math.random().toString(36).substring(2, 9)}`,
     name: parameter.name || parameter.type, // Use type if name missing
@@ -48,7 +49,7 @@ export function generateEvmDefaultField<T extends FieldType = FieldType>(
     placeholder: `Enter ${parameter.displayName || parameter.name || parameter.type}`,
     helperText: parameter.description || '',
     defaultValue: getDefaultValueForType(fieldType) as FieldValue<T>,
-    validation: getDefaultValidationForType(),
+    validation: getDefaultValidation(),
     width: 'full',
   };
 
@@ -64,7 +65,7 @@ export function generateEvmDefaultField<T extends FieldType = FieldType>(
         elementType: elementFieldType,
         elementFieldConfig: {
           type: elementFieldType,
-          validation: getDefaultValidationForType(),
+          validation: getDefaultValidation(),
           placeholder: `Enter ${elementType}`,
         },
       };

package/src/mapping/type-mapper.ts

@@ -60,16 +60,16 @@ export function getEvmCompatibleFieldTypes(parameterType: string): FieldType[] {
     uint8: ['number', 'amount', 'text'],
     uint16: ['number', 'amount', 'text'],
     uint32: ['number', 'amount', 'text'],
-    uint64: ['number', 'amount', 'text'],
-    uint128: ['number', 'amount', 'text'],
-    uint256: ['number', 'amount', 'text'],
+    uint64: ['bigint', 'number', 'amount', 'text'],
+    uint128: ['bigint', 'number', 'amount', 'text'],
+    uint256: ['bigint', 'number', 'amount', 'text'],
     int: ['number', 'text'],
     int8: ['number', 'text'],
     int16: ['number', 'text'],
     int32: ['number', 'text'],
-    int64: ['number', 'text'],
-    int128: ['number', 'text'],
-    int256: ['number', 'text'],
+    int64: ['bigint', 'number', 'text'],
+    int128: ['bigint', 'number', 'text'],
+    int256: ['bigint', 'number', 'text'],
     bool: ['checkbox', 'select', 'radio', 'text'],
     string: ['text', 'textarea', 'email', 'password'],
     bytes: ['textarea', 'text'],

package/src/networks/README.md

@@ -102,7 +102,7 @@ export const myNewNetworkMainnet: EvmNetworkConfig = {
   explorerUrl: 'https://explorer.mynewnetwork.io',
   apiUrl: 'https://api.explorer.mynewnetwork.io/api',
   primaryExplorerApiIdentifier: 'mynewnetwork-mainnet',
-  icon: 'mynewnetwork',
+  iconComponent: NetworkMyNewNetwork,
   nativeCurrency: {
     name: 'My Token',
     symbol: 'MTK',

package/src/networks/mainnet.ts

@@ -1,3 +1,15 @@
+import {
+  NetworkArbitrumOne,
+  NetworkAvalanche,
+  NetworkBase,
+  NetworkBinanceSmartChain,
+  NetworkEthereum,
+  NetworkLinea,
+  NetworkOptimism,
+  NetworkPolygon,
+  NetworkScroll,
+  NetworkZksync,
+} from '@web3icons/react';
 import {
   arbitrum as viemArbitrum,
   avalanche as viemAvalanche,
@@ -28,7 +40,7 @@ export const ethereumMainnet: TypedEvmNetworkConfig = {
   apiUrl: 'https://api.etherscan.io/v2/api',
   primaryExplorerApiIdentifier: 'etherscan-v2',
   supportsEtherscanV2: true,
-  icon: 'ethereum',
+  iconComponent: NetworkEthereum,
   nativeCurrency: {
     name: 'Ether',
     symbol: 'ETH',
@@ -51,7 +63,7 @@ export const arbitrumMainnet: TypedEvmNetworkConfig = {
   apiUrl: 'https://api.etherscan.io/v2/api',
   primaryExplorerApiIdentifier: 'etherscan-v2',
   supportsEtherscanV2: true,
-  icon: 'arbitrum',
+  iconComponent: NetworkArbitrumOne,
   nativeCurrency: {
     name: 'Ether',
     symbol: 'ETH',
@@ -74,7 +86,7 @@ export const polygonMainnet: TypedEvmNetworkConfig = {
   apiUrl: 'https://api.etherscan.io/v2/api',
   primaryExplorerApiIdentifier: 'etherscan-v2',
   supportsEtherscanV2: true,
-  icon: 'polygon',
+  iconComponent: NetworkPolygon,
   nativeCurrency: {
     name: 'MATIC',
     symbol: 'MATIC',
@@ -97,7 +109,7 @@ export const polygonZkEvmMainnet: TypedEvmNetworkConfig = {
   apiUrl: 'https://api.etherscan.io/v2/api',
   primaryExplorerApiIdentifier: 'etherscan-v2',
   supportsEtherscanV2: true,
-  icon: 'polygon',
+  iconComponent: NetworkPolygon,
   nativeCurrency: {
     name: 'Ether',
     symbol: 'ETH',
@@ -120,7 +132,7 @@ export const baseMainnet: TypedEvmNetworkConfig = {
   apiUrl: 'https://api.etherscan.io/v2/api',
   primaryExplorerApiIdentifier: 'etherscan-v2',
   supportsEtherscanV2: true,
-  icon: 'base',
+  iconComponent: NetworkBase,
   nativeCurrency: {
     name: 'Ether',
     symbol: 'ETH',
@@ -143,7 +155,7 @@ export const bscMainnet: TypedEvmNetworkConfig = {
   apiUrl: 'https://api.etherscan.io/v2/api',
   primaryExplorerApiIdentifier: 'etherscan-v2',
   supportsEtherscanV2: true,
-  icon: 'bsc',
+  iconComponent: NetworkBinanceSmartChain,
   nativeCurrency: {
     name: 'BNB',
     symbol: 'BNB',
@@ -166,7 +178,7 @@ export const optimismMainnet: TypedEvmNetworkConfig = {
   apiUrl: 'https://api.etherscan.io/v2/api',
   primaryExplorerApiIdentifier: 'etherscan-v2',
   supportsEtherscanV2: true,
-  icon: 'optimism',
+  iconComponent: NetworkOptimism,
   nativeCurrency: {
     name: 'Ether',
     symbol: 'ETH',
@@ -189,7 +201,7 @@ export const avalancheMainnet: TypedEvmNetworkConfig = {
   apiUrl: 'https://api.etherscan.io/v2/api',
   primaryExplorerApiIdentifier: 'etherscan-v2',
   supportsEtherscanV2: true,
-  icon: 'avalanche',
+  iconComponent: NetworkAvalanche,
   nativeCurrency: {
     name: 'Avalanche',
     symbol: 'AVAX',
@@ -213,7 +225,7 @@ export const zkSyncEraMainnet: TypedEvmNetworkConfig = {
   apiUrl: 'https://block-explorer-api.mainnet.zksync.io/api',
   primaryExplorerApiIdentifier: 'zksync-era-mainnet',
   supportsEtherscanV2: false,
-  icon: 'zksync',
+  iconComponent: NetworkZksync,
   nativeCurrency: {
     name: 'Ether',
     symbol: 'ETH',
@@ -236,7 +248,7 @@ export const scrollMainnet: TypedEvmNetworkConfig = {
   apiUrl: 'https://api.etherscan.io/v2/api',
   primaryExplorerApiIdentifier: 'etherscan-v2',
   supportsEtherscanV2: true,
-  icon: 'scroll',
+  iconComponent: NetworkScroll,
   nativeCurrency: {
     name: 'Ether',
     symbol: 'ETH',
@@ -259,7 +271,7 @@ export const lineaMainnet: TypedEvmNetworkConfig = {
   apiUrl: 'https://api.etherscan.io/v2/api',
   primaryExplorerApiIdentifier: 'etherscan-v2',
   supportsEtherscanV2: true,
-  icon: 'linea',
+  iconComponent: NetworkLinea,
   nativeCurrency: {
     name: 'Ether',
     symbol: 'ETH',

package/src/networks/testnet.ts

@@ -1,3 +1,16 @@
+import {
+  NetworkArbitrumOne,
+  NetworkAvalanche,
+  NetworkBase,
+  NetworkBinanceSmartChain,
+  NetworkEthereum,
+  NetworkLinea,
+  NetworkMonad,
+  NetworkOptimism,
+  NetworkPolygon,
+  NetworkScroll,
+  NetworkZksync,
+} from '@web3icons/react';
 import {
   arbitrumSepolia as viemArbitrumSepolia,
   avalancheFuji as viemAvalancheFuji,
@@ -29,7 +42,7 @@ export const ethereumSepolia: TypedEvmNetworkConfig = {
   apiUrl: 'https://api.etherscan.io/v2/api',
   primaryExplorerApiIdentifier: 'etherscan-v2',
   supportsEtherscanV2: true,
-  icon: 'ethereum',
+  iconComponent: NetworkEthereum,
   nativeCurrency: {
     name: 'Sepolia Ether',
     symbol: 'ETH',
@@ -52,7 +65,7 @@ export const arbitrumSepolia: TypedEvmNetworkConfig = {
   apiUrl: 'https://api.etherscan.io/v2/api',
   primaryExplorerApiIdentifier: 'etherscan-v2',
   supportsEtherscanV2: true,
-  icon: 'arbitrum',
+  iconComponent: NetworkArbitrumOne,
   nativeCurrency: {
     name: 'Arbitrum Sepolia Ether',
     symbol: 'ETH',
@@ -75,7 +88,7 @@ export const polygonAmoy: TypedEvmNetworkConfig = {
   apiUrl: 'https://api.etherscan.io/v2/api',
   primaryExplorerApiIdentifier: 'etherscan-v2',
   supportsEtherscanV2: true,
-  icon: 'polygon',
+  iconComponent: NetworkPolygon,
   nativeCurrency: {
     name: 'MATIC',
     symbol: 'MATIC',
@@ -98,7 +111,7 @@ export const polygonZkEvmCardona: TypedEvmNetworkConfig = {
   apiUrl: 'https://api.etherscan.io/v2/api',
   primaryExplorerApiIdentifier: 'etherscan-v2',
   supportsEtherscanV2: true,
-  icon: 'polygon',
+  iconComponent: NetworkPolygon,
   nativeCurrency: {
     name: 'Ether',
     symbol: 'ETH',
@@ -121,7 +134,7 @@ export const baseSepolia: TypedEvmNetworkConfig = {
   apiUrl: 'https://api.etherscan.io/v2/api',
   primaryExplorerApiIdentifier: 'etherscan-v2',
   supportsEtherscanV2: true,
-  icon: 'base',
+  iconComponent: NetworkBase,
   nativeCurrency: {
     name: 'Sepolia Ether',
     symbol: 'ETH',
@@ -144,7 +157,7 @@ export const bscTestnet: TypedEvmNetworkConfig = {
   apiUrl: 'https://api.etherscan.io/v2/api',
   primaryExplorerApiIdentifier: 'etherscan-v2',
   supportsEtherscanV2: true,
-  icon: 'bsc',
+  iconComponent: NetworkBinanceSmartChain,
   nativeCurrency: {
     name: 'BNB',
     symbol: 'BNB',
@@ -167,7 +180,7 @@ export const optimismSepolia: TypedEvmNetworkConfig = {
   apiUrl: 'https://api.etherscan.io/v2/api',
   primaryExplorerApiIdentifier: 'etherscan-v2',
   supportsEtherscanV2: true,
-  icon: 'optimism',
+  iconComponent: NetworkOptimism,
   nativeCurrency: {
     name: 'Sepolia Ether',
     symbol: 'ETH',
@@ -191,7 +204,7 @@ export const avalancheFuji: TypedEvmNetworkConfig = {
   primaryExplorerApiIdentifier: 'etherscan-v2', // Unified identifier for V2 API
   supportsEtherscanV2: true,
   requiresExplorerApiKey: true,
-  icon: 'avalanche',
+  iconComponent: NetworkAvalanche,
   nativeCurrency: {
     name: 'Avalanche',
     symbol: 'AVAX',
@@ -215,7 +228,7 @@ export const zksyncSepoliaTestnet: TypedEvmNetworkConfig = {
   apiUrl: 'https://block-explorer-api.sepolia.zksync.dev/api',
   primaryExplorerApiIdentifier: 'zksync-era-sepolia',
   supportsEtherscanV2: false,
-  icon: 'zksync',
+  iconComponent: NetworkZksync,
   nativeCurrency: {
     name: 'Ether',
     symbol: 'ETH',
@@ -238,7 +251,7 @@ export const scrollSepolia: TypedEvmNetworkConfig = {
   apiUrl: 'https://api.etherscan.io/v2/api',
   primaryExplorerApiIdentifier: 'etherscan-v2',
   supportsEtherscanV2: true,
-  icon: 'scroll',
+  iconComponent: NetworkScroll,
   nativeCurrency: {
     name: 'Ether',
     symbol: 'ETH',
@@ -261,7 +274,7 @@ export const lineaSepolia: TypedEvmNetworkConfig = {
   apiUrl: 'https://api.etherscan.io/v2/api',
   primaryExplorerApiIdentifier: 'etherscan-v2',
   supportsEtherscanV2: true,
-  icon: 'linea',
+  iconComponent: NetworkLinea,
   nativeCurrency: {
     name: 'Linea Ether',
     symbol: 'ETH',
@@ -284,7 +297,7 @@ export const monadTestnet: TypedEvmNetworkConfig = {
   apiUrl: 'https://api.etherscan.io/v2/api',
   primaryExplorerApiIdentifier: 'etherscan-v2',
   supportsEtherscanV2: true,
-  icon: 'monad',
+  iconComponent: NetworkMonad,
   nativeCurrency: {
     name: 'Monad',
     symbol: 'MON',