test: color-no-hex assets batch (#27150)

## **Description**

Split from #26651 to reduce CODEOWNERS fanout.

Batch: assets
Source branch: \`origin/remove-static-hex-from-tests\`

When \`@metamask/design-tokens\` upgrades change color values, tests
that hardcode hex literals (e.g. \`'#ffffff'\`, \`'#457a39'\`) break
because the component renders the new token value while the test still
asserts the old one — even though nothing is actually wrong. This PR
fixes that brittleness across the assets scope.

**Two strategies are applied:**

1. **Replace hardcoded hex theme mocks with \`mockTheme\`** — test mocks
that hand-rolled partial theme objects (e.g. \`{ colors: { primary: {
default: '#0376C9' } } }\`) are replaced with \`jest.requireActual\` to
pull the real \`mockTheme\`. Test assertions that checked against hex
literals (e.g. \`expect(color).toBe('#457a39')\`) now reference
\`mockTheme.colors.success.default\`, so both the component and the test
always resolve the same value regardless of token package version.

2. **Add targeted \`eslint-disable\` comments** — strings like
\`'#113'\` or \`'#6904'\` are NFT token IDs, not CSS colors. The
\`color-no-hex\` rule can't distinguish them, so inline suppressions are
added to allow these legitimate domain strings without weakening the
rule elsewhere.

Together these changes make the \`@metamask/design-tokens/color-no-hex\`
lint rule enforceable across this scope, so future hex literals won't
accidentally creep back in and cause brittle tests.

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes:

## **Manual testing steps**

\`\`\`gherkin
Feature: color-no-hex lint compliance (assets batch)

  Scenario: user runs lint and tests
    Given the asset test files have been updated
    When user runs lint and test checks
    Then no color-no-hex violations are reported
    And all tests pass
\`\`\`

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk: changes are confined to ESLint configuration and test
mocks/assertions to avoid hardcoded hex values, with no runtime logic
impact.
> 
> **Overview**
> **Enables `@metamask/design-tokens/color-no-hex` enforcement for the
Assets-owned UI/hooks surface** by expanding the ESLint override to
treat hex literals as errors in those directories.
> 
> Updates multiple Assets-related tests to remove hardcoded hex color
mocks and assertions by sourcing colors from the real `mockTheme` via
`jest.requireActual`, and adds targeted inline disables where strings
like `#113`/`#6904` are NFT identifiers (not color literals).
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
02aaba1. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: georgewrmarshall

.eslintrc.js

@@ -181,6 +181,11 @@ module.exports = {
     },
     {
       files: [
+        'app/components/hooks/useIsOriginalNativeTokenSymbol/**/*.{js,jsx,ts,tsx}',
+        'app/components/hooks/useTokenBalancesController/**/*.{js,jsx,ts,tsx}',
+        'app/components/hooks/useTokenBalance.tsx',
+        'app/components/hooks/useTokensData/**/*.{js,jsx,ts,tsx}',
+        'app/components/hooks/useSafeChains.ts',
         'app/components/UI/Card/**/*.{js,jsx,ts,tsx}',
         'app/components/Snaps/**/*.{js,jsx,ts,tsx}',
         'app/components/UI/Predict/**/*.{js,jsx,ts,tsx}',
@@ -189,6 +194,32 @@ module.exports = {
         'app/components/UI/Perps/**/*.{js,jsx,ts,tsx}',
         'app/components/UI/Earn/**/*.{js,jsx,ts,tsx}',
         'app/components/UI/Stake/**/*.{js,jsx,ts,tsx}',
+        // Assets team has a large number of folder ownership areas,
+        'app/components/UI/Assets/**/*.{js,jsx,ts,tsx}',
+        'app/components/UI/Tokens/**/*.{js,jsx,ts,tsx}',
+        'app/components/UI/AssetOverview/**/*.{js,jsx,ts,tsx}',
+        'app/components/UI/Collectibles/**/*.{js,jsx,ts,tsx}',
+        'app/components/UI/CollectibleContractElement/**/*.{js,jsx,ts,tsx}',
+        'app/components/UI/CollectibleContractInformation/**/*.{js,jsx,ts,tsx}',
+        'app/components/UI/CollectibleContractOverview/**/*.{js,jsx,ts,tsx}',
+        'app/components/UI/CollectibleContracts/**/*.{js,jsx,ts,tsx}',
+        'app/components/UI/CollectibleDetectionModal/**/*.{js,jsx,ts,tsx}',
+        'app/components/UI/CollectibleMedia/**/*.{js,jsx,ts,tsx}',
+        'app/components/UI/CollectibleModal/**/*.{js,jsx,ts,tsx}',
+        'app/components/UI/CollectibleOverview/**/*.{js,jsx,ts,tsx}',
+        'app/components/UI/ConfirmAddAsset/**/*.{js,jsx,ts,tsx}',
+        'app/components/UI/DeFiPositions/**/*.{js,jsx,ts,tsx}',
+        'app/components/UI/TokenDetails/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/AddAsset/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/Asset/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/AssetDetails/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/AssetHideConfirmation/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/AssetOptions/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/Collectible/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/CollectibleView/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/DetectedTokens/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/NFTAutoDetectionModal/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/NftDetails/**/*.{js,jsx,ts,tsx}',
       ],
       rules: {
         '@metamask/design-tokens/color-no-hex': 'error',

app/components/UI/AssetOverview/TronEnergyBandwidthDetail/ResourceRing.test.tsx

@@ -10,15 +10,14 @@ jest.mock('@metamask/design-system-twrnc-preset', () => ({
   },
 }));
 
-const mockTheme = {
-  colors: {
-    border: { muted: '#CCCCCC' },
-    primary: { default: '#0066CC' },
-  },
-};
-jest.mock('../../../../util/theme', () => ({
-  useTheme: () => mockTheme,
-}));
+jest.mock('../../../../util/theme', () => {
+  // Use the real mockTheme to avoid circular mock issues
+  const actual = jest.requireActual('../../../../util/theme');
+  return {
+    ...actual,
+    useTheme: () => actual.mockTheme,
+  };
+});
 
 describe('ResourceRing', () => {
   it('renders the ring icon', () => {

app/components/UI/CollectibleContractOverview/index.test.tsx

@@ -49,6 +49,7 @@ const initialState = {
                 favorite: false,
                 image: 'https://image.com/113',
                 isCurrentlyOwned: true,
+                // eslint-disable-next-line @metamask/design-tokens/color-no-hex -- false positive: '#113' is part of the NFT name, not a color literal
                 name: 'My Nft #113',
                 standard: 'ERC721',
                 tokenId: '113',
@@ -108,6 +109,7 @@ describe('CollectibleContractOverview', () => {
       favorite: false,
       image: 'https://image.com/113',
       isCurrentlyOwned: true,
+      // eslint-disable-next-line @metamask/design-tokens/color-no-hex -- false positive: '#113' is part of the NFT name, not a color literal
       name: 'My Nft #113',
       standard: 'ERC721',
       tokenId: '113',

app/components/UI/CollectibleModal/CollectibleModal.test.tsx

@@ -114,6 +114,7 @@ describe('CollectibleModal', () => {
       state: mockInitialState,
     });
 
+    // eslint-disable-next-line @metamask/design-tokens/color-no-hex -- false positive: '#6904' is the NFT token ID text, not a color literal
     expect(await findAllByText('#6904')).toBeDefined();
     expect(await findAllByText('Leopard')).toBeDefined();
   });

app/components/UI/Tokens/TokenList/ScamWarningModal/ScamWarningModal.test.tsx

@@ -13,15 +13,14 @@ jest.mock('@react-navigation/native', () => ({
   useNavigation: jest.fn(),
 }));
 
-jest.mock('../../../../../util/theme', () => ({
-  useTheme: () => ({
-    colors: {
-      background: { default: '#fff' },
-      border: { muted: '#ccc' },
-      overlay: { default: 'rgba(0,0,0,0.5)' },
-    },
-  }),
-}));
+jest.mock('../../../../../util/theme', () => {
+  // Use the real mockTheme to avoid hardcoded hex literals
+  const actual = jest.requireActual('../../../../../util/theme');
+  return {
+    ...actual,
+    useTheme: () => actual.mockTheme,
+  };
+});
 
 jest.mock(
   '../../../../../component-library/components/Sheet/SheetHeader',

app/components/UI/Tokens/TokenList/TokenList.test.tsx

@@ -8,7 +8,6 @@ import { useNavigation } from '@react-navigation/native';
 import { WalletViewSelectorsIDs } from '../../../Views/Wallet/WalletView.testIds';
 import { useAnalytics } from '../../../hooks/useAnalytics/useAnalytics';
 import { AnalyticsEventBuilder } from '../../../../util/analytics/AnalyticsEventBuilder';
-import { createMockUseAnalyticsHook } from '../../../../util/test/analyticsMock';
 import { SCROLL_TO_TOKEN_EVENT } from '../constants';
 
 // Mock external dependencies
@@ -18,14 +17,12 @@ jest.mock('@react-navigation/native', () => ({
 
 jest.mock('../../../hooks/useAnalytics/useAnalytics');
 
-jest.mock('../../../../util/theme', () => ({
-  useTheme: () => ({
-    colors: {
-      primary: { default: '#0376C9' },
-      icon: { default: '#24292E' },
-    },
-  }),
-}));
+jest.mock('../../../../util/theme', () => {
+  const { mockTheme } = jest.requireActual('../../../../util/theme');
+  return {
+    useTheme: () => mockTheme,
+  };
+});
 
 jest.mock('../../../../../locales/i18n', () => ({
   strings: jest.fn((key) => key),
@@ -143,7 +140,9 @@ const mockUseNavigation = useNavigation as jest.MockedFunction<
   typeof useNavigation
 >;
 const mockUseSelector = useSelector as jest.MockedFunction<typeof useSelector>;
-const mockUseAnalytics = jest.mocked(useAnalytics);
+const mockUseAnalytics = useAnalytics as jest.MockedFunction<
+  typeof useAnalytics
+>;
 
 const mockTokenKeys = [
   {
@@ -175,14 +174,20 @@ describe('TokenList', () => {
       navigate: mockNavigate,
     } as unknown as ReturnType<typeof useNavigation>);
 
-    mockUseAnalytics.mockReturnValue(
-      createMockUseAnalyticsHook({
-        trackEvent: mockTrackEvent,
-        // The real builder is needed so build() produces the correct event shape
-        // for assertions on trackEvent call arguments.
-        createEventBuilder: AnalyticsEventBuilder.createEventBuilder,
-      }),
-    );
+    mockUseAnalytics.mockReturnValue({
+      trackEvent: mockTrackEvent,
+      createEventBuilder: AnalyticsEventBuilder.createEventBuilder,
+      enable: jest.fn(),
+      addTraitsToUser: jest.fn(),
+      createDataDeletionTask: jest.fn(),
+      checkDataDeleteStatus: jest.fn(),
+      getDeleteRegulationCreationDate: jest.fn(),
+      getDeleteRegulationId: jest.fn(),
+      isDataRecorded: jest.fn(),
+      isEnabled: jest.fn(),
+      getAnalyticsId: jest.fn(),
+      identify: jest.fn(),
+    });
 
     // Mock useSelector to call the selector function with empty state
     mockUseSelector.mockImplementation((selector) => selector({}));

app/components/UI/Tokens/TokenList/TokenListItem/TokenListItem.test.tsx

@@ -1,6 +1,7 @@
 import { BtcAccountType } from '@metamask/keyring-api';
 import React from 'react';
 import { useSelector } from 'react-redux';
+import { mockTheme } from '../../../../../util/theme';
 import { ACCOUNT_TYPE_LABEL_TEST_ID, TokenListItem } from './TokenListItem';
 import { FlashListAssetKey } from '../TokenList';
 import { useTokenPricePercentageChange } from '../../hooks/useTokenPricePercentageChange';
@@ -72,9 +73,15 @@ jest.mock('@react-navigation/native', () => ({
   }),
 }));
 
-jest.mock('../../../../../util/theme', () => ({
-  useTheme: () => ({ colors: {} }),
-}));
+jest.mock('../../../../../util/theme', () => {
+  const { mockTheme: realMockTheme } = jest.requireActual(
+    '../../../../../util/theme',
+  );
+  return {
+    useTheme: () => ({ colors: {} }),
+    mockTheme: realMockTheme,
+  };
+});
 
 const FIXED_NOW_MS = 1730000000000;
 const mockTrackEvent = jest.fn();
@@ -547,7 +554,9 @@ describe('TokenListItem - Component Rendering Tests for Coverage', () => {
       const percentageText = getByTestId(SECONDARY_BALANCE_TEST_ID);
 
       expect(percentageText.props.children).toBe('+5.67%');
-      expect(percentageText.props.style.color).toBe('#457a39');
+      expect(percentageText.props.style.color).toBe(
+        mockTheme.colors.success.default,
+      );
     });
 
     it('displays dash when percentage change is not finite', () => {
@@ -601,8 +610,9 @@ describe('TokenListItem - Component Rendering Tests for Coverage', () => {
 
       const percentageText = getByTestId(SECONDARY_BALANCE_TEST_ID);
       expect(percentageText.props.children).toBe('-3.45%');
-      // Negative percentage should NOT have success color
-      expect(percentageText.props.style.color).not.toBe('#457a39');
+      expect(percentageText.props.style.color).toBe(
+        mockTheme.colors.error.default,
+      );
     });
 
     it('hides percentage change on testnet', () => {

app/components/UI/Tokens/TokenList/TokenListSkeleton/TokenListSkeleton.test.tsx

@@ -3,20 +3,12 @@ import { render } from '@testing-library/react-native';
 import TokenListSkeleton from './TokenListSkeleton';
 
 // Mock the theme hook
-jest.mock('../../../../../util/theme', () => ({
-  useTheme: () => ({
-    colors: {
-      background: {
-        section: '#E5E5E5',
-        subsection: '#F5F5F5',
-        default: '#FFFFFF',
-      },
-      border: {
-        muted: '#D6D9DC',
-      },
-    },
-  }),
-}));
+jest.mock('../../../../../util/theme', () => {
+  const { mockTheme } = jest.requireActual('../../../../../util/theme');
+  return {
+    useTheme: () => mockTheme,
+  };
+});
 
 describe('TokenListSkeleton', () => {
   it('renders without errors', () => {

app/components/UI/Tokens/TokenListControlBar/TokenListControlBar.test.tsx

@@ -94,15 +94,12 @@ jest.mock('../../../../selectors/networkInfos', () => ({
 }));
 
 // Mock the theme
-jest.mock('../../../../util/theme', () => ({
-  useTheme: () => ({
-    colors: {
-      background: { default: '#ffffff' },
-      text: { default: '#000000' },
-      border: { muted: '#e0e0e0' },
-    },
-  }),
-}));
+jest.mock('../../../../util/theme', () => {
+  const { mockTheme } = jest.requireActual('../../../../util/theme');
+  return {
+    useTheme: () => mockTheme,
+  };
+});
 
 const mockStore = configureMockStore();
 

app/components/Views/DetectedTokens/index.test.tsx

@@ -27,16 +27,12 @@ jest.mock('@react-navigation/native', () => ({
   })),
 }));
 
-jest.mock('../../../util/theme', () => ({
-  useTheme: jest.fn(() => ({
-    colors: {
-      background: { default: '#fff' },
-      border: { default: '#ccc' },
-      text: { default: '#000' },
-      primary: { default: '#f00' },
-    },
-  })),
-}));
+jest.mock('../../../util/theme', () => {
+  const { mockTheme } = jest.requireActual('../../../util/theme');
+  return {
+    useTheme: jest.fn(() => mockTheme),
+  };
+});
 
 jest.mock(
   '../../../component-library/components/BottomSheets/BottomSheet',