feat: add icon support in default erc20 tokens

.eslintrc.js

@@ -39,5 +39,6 @@ module.exports = {
     '**/public',
     '**/.cache',
     '**/example',
+    '**/svg.d.ts',
   ],
 };

packages/starknet-snap/jest.config.js

@@ -31,4 +31,8 @@ module.exports = {
   coverageProvider: 'babel',
   // A list of reporter names that Jest uses when writing coverage reports
   coverageReporters: ['html', 'json-summary', 'text'],
+  // Map .svg files to a mock module
+  moduleNameMapper: {
+    '\\.svg$': '<rootDir>/test/svg.mock.ts',
+  },
 };

packages/starknet-snap/src/svg.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}

packages/starknet-snap/src/types/snapState.ts

@@ -55,6 +55,7 @@ export type Erc20Token = {
   symbol: string;
   decimals: number;
   chainId: string; // in hex
+  icon?: string;
 };
 
 export type Network = {

packages/starknet-snap/src/ui/icons.tsx

@@ -0,0 +1,14 @@
+import daiIcon from '../assets/images/dai-icon.svg';
+import ethIcon from '../assets/images/eth-icon.svg';
+import strkIcon from '../assets/images/starknet-icon.svg';
+import usdcIcon from '../assets/images/usdc-icon.svg';
+import usdtIcon from '../assets/images/usdt-icon.svg';
+
+// Define a Record that maps token names to SVG components
+export const icons: Record<string, string> = {
+  daiIcon,
+  ethIcon,
+  strkIcon,
+  usdcIcon,
+  usdtIcon,
+};

packages/starknet-snap/src/utils/constants.ts

@@ -65,6 +65,7 @@ export const ETHER_MAINNET: Erc20Token = {
   symbol: 'ETH',
   decimals: 18,
   chainId: STARKNET_MAINNET_NETWORK.chainId,
+  icon: 'ethIcon',
 };
 
 export const ETHER_SEPOLIA_TESTNET: Erc20Token = {
@@ -73,6 +74,7 @@ export const ETHER_SEPOLIA_TESTNET: Erc20Token = {
   symbol: 'ETH',
   decimals: 18,
   chainId: SN_SEPOLIA.chainId,
+  icon: 'ethIcon',
 };
 
 export const DAI_MAINNET: Erc20Token = {
@@ -81,6 +83,7 @@ export const DAI_MAINNET: Erc20Token = {
   symbol: 'DAI',
   decimals: 18,
   chainId: STARKNET_MAINNET_NETWORK.chainId,
+  icon: 'daiIcon',
 };
 
 export const DAI_SEPOLIA_TESTNET: Erc20Token = {
@@ -89,6 +92,7 @@ export const DAI_SEPOLIA_TESTNET: Erc20Token = {
   symbol: 'DAI',
   decimals: 18,
   chainId: SN_SEPOLIA.chainId,
+  icon: 'daiIcon',
 };
 
 export const STRK_MAINNET: Erc20Token = {
@@ -97,6 +101,7 @@ export const STRK_MAINNET: Erc20Token = {
   symbol: 'STRK',
   decimals: 18,
   chainId: STARKNET_MAINNET_NETWORK.chainId,
+  icon: 'strkIcon',
 };
 
 export const STRK_SEPOLIA_TESTNET: Erc20Token = {
@@ -105,6 +110,7 @@ export const STRK_SEPOLIA_TESTNET: Erc20Token = {
   symbol: 'STRK',
   decimals: 18,
   chainId: SN_SEPOLIA.chainId,
+  icon: 'strkIcon',
 };
 
 export const USDC_MAINNET: Erc20Token = {
@@ -113,6 +119,7 @@ export const USDC_MAINNET: Erc20Token = {
   symbol: 'USDC',
   decimals: 6,
   chainId: STARKNET_MAINNET_NETWORK.chainId,
+  icon: 'usdcIcon',
 };
 
 export const USDC_SEPOLIA_TESTNET: Erc20Token = {
@@ -121,6 +128,7 @@ export const USDC_SEPOLIA_TESTNET: Erc20Token = {
   symbol: 'USDC',
   decimals: 6,
   chainId: SN_SEPOLIA.chainId,
+  icon: 'usdcIcon',
 };
 
 export const USDT_MAINNET: Erc20Token = {
@@ -129,6 +137,7 @@ export const USDT_MAINNET: Erc20Token = {
   symbol: 'USDT',
   decimals: 6,
   chainId: STARKNET_MAINNET_NETWORK.chainId,
+  icon: 'usdtIcon',
 };
 
 export const USDT_SEPOLIA_TESTNET: Erc20Token = {
@@ -137,6 +146,7 @@ export const USDT_SEPOLIA_TESTNET: Erc20Token = {
   symbol: 'USDT',
   decimals: 6,
   chainId: SN_SEPOLIA.chainId,
+  icon: 'usdtIcon',
 };
 
 export const TEST_TOKEN_MAINNET: Erc20Token = {

packages/starknet-snap/test/svg.mock.ts

@@ -0,0 +1,2 @@
+module.exports = 'SvgMock';
+module.exports.ReactComponent = 'svg';