MetaMask
diff --git a/‎app/components/UI/Perps/hooks/usePerpsPaymentTokens.test.ts‎
Lines changed: 14 additions & 57 deletions b/‎app/components/UI/Perps/hooks/usePerpsPaymentTokens.test.ts‎
Lines changed: 14 additions & 57 deletions
diff --git a/‎app/components/UI/Perps/hooks/usePerpsPaymentTokens.ts‎
Lines changed: 13 additions & 43 deletions b/‎app/components/UI/Perps/hooks/usePerpsPaymentTokens.ts‎
Lines changed: 13 additions & 43 deletions
@@ -8,12 +8,9 @@ jest.mock('react-redux', () => ({
   useSelector: jest.fn(),
 }));
 jest.mock('../../Bridge/hooks/useTokensWithBalance');
-jest.mock('../utils/tokenIconUtils');
 jest.mock('./index');
 jest.mock('./stream');
 jest.mock('../../../../selectors/networkController');
-jest.mock('../../../../selectors/tokenListController');
-jest.mock('../../../../selectors/preferencesController');
 
 // Mock i18n
 jest.mock('../../../../../locales/i18n', () => ({
@@ -40,7 +37,6 @@ const mockUseSelector = jest.requireMock('react-redux').useSelector;
 const mockUseTokensWithBalance = jest.requireMock(
   '../../Bridge/hooks/useTokensWithBalance',
 );
-const mockEnhanceTokenWithIcon = jest.requireMock('../utils/tokenIconUtils');
 const mockUsePerpsLiveAccount =
   jest.requireMock('./stream').usePerpsLiveAccount;
 const mockUsePerpsNetwork = jest.requireMock('./index').usePerpsNetwork;
@@ -52,18 +48,6 @@ describe('usePerpsPaymentTokens', () => {
     '0x89': { chainId: '0x89', name: 'Polygon', ticker: 'MATIC' },
   };
 
-  const mockTokenList = {
-    '0xaf88d065e77c8cC2239327C5EDb3A432268e5831': {
-      address: '0xaf88d065e77c8cC2239327C5EDb3A432268e5831',
-      symbol: 'USDC',
-      decimals: 6,
-      name: 'USD Coin',
-      iconUrl: 'https://example.com/usdc-icon.png',
-      aggregators: [],
-      occurrences: 1,
-    },
-  };
-
   const mockAccountState: AccountState = {
     availableBalance: '1000.50',
     marginUsed: '300.25',
@@ -109,10 +93,7 @@ describe('usePerpsPaymentTokens', () => {
     jest.clearAllMocks();
 
     // Set up mock return values
-    mockUseSelector
-      .mockReturnValueOnce(mockNetworkConfigurations) // selectNetworkConfigurations
-      .mockReturnValueOnce(mockTokenList) // selectTokenList
-      .mockReturnValueOnce(false); // selectIsIpfsGatewayEnabled
+    mockUseSelector.mockReturnValueOnce(mockNetworkConfigurations); // selectNetworkConfigurations
 
     mockUseTokensWithBalance.useTokensWithBalance.mockReturnValue(
       mockTokensWithBalance,
@@ -122,12 +103,6 @@ describe('usePerpsPaymentTokens', () => {
       isInitialLoading: false,
     });
     mockUsePerpsNetwork.mockReturnValue('mainnet');
-    mockEnhanceTokenWithIcon.enhanceTokenWithIcon.mockImplementation(
-      ({ token }: { token: BridgeToken }) => ({
-        ...token,
-        image: `enhanced-${token.symbol?.toLowerCase()}.png`,
-      }),
-    );
   });
 
   describe('Basic functionality', () => {
@@ -176,12 +151,8 @@ describe('usePerpsPaymentTokens', () => {
     });
 
     it('handles missing network configurations', () => {
-      // Clear previous mock setup and set new values
       mockUseSelector.mockClear();
-      mockUseSelector
-        .mockReturnValueOnce(null) // selectNetworkConfigurations
-        .mockReturnValueOnce(mockTokenList) // selectTokenList
-        .mockReturnValueOnce(false); // selectIsIpfsGatewayEnabled
+      mockUseSelector.mockReturnValueOnce(null); // selectNetworkConfigurations
 
       const { result } = renderHook(() => usePerpsPaymentTokens());
 
@@ -288,20 +259,19 @@ describe('usePerpsPaymentTokens', () => {
     });
   });
 
-  describe('Token enhancement', () => {
-    it('enhances tokens with icons', () => {
-      renderHook(() => usePerpsPaymentTokens());
+  describe('Token icons', () => {
+    it('sets USDC_TOKEN_ICON_URL as image for Hyperliquid USDC', () => {
+      const { result } = renderHook(() => usePerpsPaymentTokens());
 
-      expect(
-        mockEnhanceTokenWithIcon.enhanceTokenWithIcon,
-      ).toHaveBeenCalledWith({
-        token: expect.objectContaining({
-          symbol: 'USDC',
-          name: 'USDC • Hyperliquid',
-        }),
-        tokenList: mockTokenList,
-        isIpfsGatewayEnabled: false,
-      });
+      const hyperliquidUsdc = result.current[0];
+      expect(hyperliquidUsdc.image).toContain('tokenIcons');
+    });
+
+    it('passes through image from useTokensWithBalance for other tokens', () => {
+      const { result } = renderHook(() => usePerpsPaymentTokens());
+
+      const ethToken = result.current.find((t) => t.symbol === 'ETH');
+      expect(ethToken?.image).toBe('https://example.com/eth.png');
     });
   });
 
@@ -346,19 +316,6 @@ describe('usePerpsPaymentTokens', () => {
       expect(result.current[0].symbol).toBe('USDC');
     });
 
-    it('handles missing token list', () => {
-      // Clear previous mock setup and set new values
-      mockUseSelector.mockClear();
-      mockUseSelector
-        .mockReturnValueOnce(mockNetworkConfigurations) // selectNetworkConfigurations
-        .mockReturnValueOnce(null) // selectTokenList
-        .mockReturnValueOnce(false); // selectIsIpfsGatewayEnabled
-
-      const { result } = renderHook(() => usePerpsPaymentTokens());
-
-      expect(result.current.length).toBeGreaterThan(0);
-    });
-
     it('handles malformed balance fiat values', () => {
       const tokensWithMalformedFiat = [
         {
 
@@ -3,18 +3,16 @@ import { isEqual } from 'lodash';
 import { useMemo, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import { selectNetworkConfigurations } from '../../../../selectors/networkController';
-import { selectIsIpfsGatewayEnabled } from '../../../../selectors/preferencesController';
-import { selectTokenList } from '../../../../selectors/tokenListController';
 import { useTokensWithBalance } from '../../Bridge/hooks/useTokensWithBalance';
 import {
   HYPERLIQUID_MAINNET_CHAIN_ID,
   HYPERLIQUID_TESTNET_CHAIN_ID,
   USDC_ARBITRUM_MAINNET_ADDRESS,
   USDC_DECIMALS,
   USDC_SYMBOL,
+  USDC_TOKEN_ICON_URL,
   type PerpsToken,
 } from '@metamask/perps-controller';
-import { enhanceTokenWithIcon } from '../utils/tokenIconUtils';
 import { usePerpsNetwork } from './index';
 import { usePerpsLiveAccount } from './stream';
 
@@ -32,8 +30,6 @@ import { usePerpsLiveAccount } from './stream';
  */
 export function usePerpsPaymentTokens(): PerpsToken[] {
   const networkConfigurations = useSelector(selectNetworkConfigurations);
-  const tokenList = useSelector(selectTokenList);
-  const isIpfsGatewayEnabled = useSelector(selectIsIpfsGatewayEnabled);
 
   // Use ref to store previous token array
   const previousTokensRef = useRef<PerpsToken[]>([]);
@@ -71,22 +67,17 @@ export function usePerpsPaymentTokens(): PerpsToken[] {
         ? HYPERLIQUID_TESTNET_CHAIN_ID
         : HYPERLIQUID_MAINNET_CHAIN_ID;
 
-    const hyperliquidUsdcBase = {
+    const hyperliquidUsdc: PerpsToken = {
       address: USDC_ARBITRUM_MAINNET_ADDRESS,
       symbol: USDC_SYMBOL,
       name: 'USDC • Hyperliquid',
       decimals: USDC_DECIMALS,
       chainId: hyperliquidChainId as Hex,
+      image: USDC_TOKEN_ICON_URL,
       balance: (hyperliquidBalance * 1e6).toString(),
       balanceFiat: `$${hyperliquidBalance.toFixed(2)}`,
     };
 
-    const hyperliquidUsdc: PerpsToken = enhanceTokenWithIcon({
-      token: hyperliquidUsdcBase,
-      tokenList: tokenList || {},
-      isIpfsGatewayEnabled,
-    });
-
     // Always show Hyperliquid USDC first (even if balance is 0)
     tokens.push(hyperliquidUsdc);
 
@@ -99,30 +90,15 @@ export function usePerpsPaymentTokens(): PerpsToken[] {
         // Show all tokens with any balance (including zero balance for visibility)
         return true;
       })
-      .map((token) => {
-        // Enhance with icon if needed
-        const enhanced =
-          tokenList && !token.image
-            ? enhanceTokenWithIcon({
-                token: {
-                  symbol: token.symbol,
-                  address: token.address,
-                  decimals: token.decimals,
-                  chainId: token.chainId as Hex,
-                  name: token.name,
-                },
-                tokenList,
-                isIpfsGatewayEnabled,
-              })
-            : token;
-
-        return {
-          ...enhanced,
-          // Ensure we have all required fields
-          balance: token.balance || '0',
-          balanceFiat: token.balanceFiat || '$0.00',
-        } as PerpsToken;
-      });
+      .map(
+        (token) =>
+          ({
+            ...token,
+            // Ensure we have all required fields
+            balance: token.balance || '0',
+            balanceFiat: token.balanceFiat || '$0.00',
+          }) as PerpsToken,
+      );
 
     // Sort tokens by priority:
     // 1. USDC tokens first (faster to bridge)
@@ -147,13 +123,7 @@ export function usePerpsPaymentTokens(): PerpsToken[] {
     // Future: Add other supported tokens here
 
     return tokens;
-  }, [
-    tokensWithBalance,
-    hyperliquidBalance,
-    currentNetwork,
-    tokenList,
-    isIpfsGatewayEnabled,
-  ]);
+  }, [tokensWithBalance, hyperliquidBalance, currentNetwork]);
 
   // Check if tokens have actually changed using lodash deep equality
   const tokensChanged = !isEqual(previousTokensRef.current, paymentTokens);