[pull] main from MetaMask:main

.eslintrc.js

@@ -181,20 +181,22 @@ 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',
+        // @MetaMask/card
         'app/components/UI/Card/**/*.{js,jsx,ts,tsx}',
+        // @MetaMask/core-platform
         'app/components/Snaps/**/*.{js,jsx,ts,tsx}',
+        // @MetaMask/predict
         'app/components/UI/Predict/**/*.{js,jsx,ts,tsx}',
+        // @MetaMask/ramp
         'app/components/UI/Ramp/**/*.{js,jsx,ts,tsx}',
+        // @MetaMask/rewards
         'app/components/UI/Rewards/**/*.{js,jsx,ts,tsx}',
+        // @MetaMask/perps
         'app/components/UI/Perps/**/*.{js,jsx,ts,tsx}',
+        // @MetaMask/metamask-earn
         '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,
+        // @MetaMask/metamask-assets
         'app/components/UI/Assets/**/*.{js,jsx,ts,tsx}',
         'app/components/UI/Tokens/**/*.{js,jsx,ts,tsx}',
         'app/components/UI/AssetOverview/**/*.{js,jsx,ts,tsx}',
@@ -220,6 +222,26 @@ module.exports = {
         'app/components/Views/DetectedTokens/**/*.{js,jsx,ts,tsx}',
         'app/components/Views/NFTAutoDetectionModal/**/*.{js,jsx,ts,tsx}',
         'app/components/Views/NftDetails/**/*.{js,jsx,ts,tsx}',
+        // @MetaMask/mobile-core-ux
+        'app/components/Views/AccountActions/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/AccountSelector/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/AccountsMenu/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/AddressQRCode/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/EditAccountName/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/LockScreen/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/Login/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/MultichainTransactionsView/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/NetworkConnect/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/NetworkSelector/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/QRAccountDisplay/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/QRScanner/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/Settings/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/TermsAndConditions/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/UnifiedTransactionsView/**/*.{js,jsx,ts,tsx}',
+        'app/components/UI/MultichainTransactionListItem/**/*.{js,jsx,ts,tsx}',
+        'app/components/UI/TransactionActionModal/**/*.{js,jsx,ts,tsx}',
+        'app/components/UI/TransactionElement/**/*.{js,jsx,ts,tsx}',
+        'app/components/UI/Transactions/**/*.{js,jsx,ts,tsx}',
       ],
       rules: {
         '@metamask/design-tokens/color-no-hex': 'error',

app/components/Base/InfoModal.test.tsx

@@ -48,25 +48,12 @@ jest.mock('./Title', () => {
 });
 
 // Mock useTheme hook
-jest.mock('../../util/theme', () => ({
-  useTheme: jest.fn(() => ({
-    colors: {
-      background: { default: '#FFFFFF' },
-      text: { default: '#000000' },
-      overlay: { default: '#00000099' },
-    },
-    shadows: {
-      size: {
-        sm: {
-          shadowColor: '#000',
-          shadowOffset: { width: 0, height: 2 },
-          shadowOpacity: 0.1,
-          shadowRadius: 4,
-        },
-      },
-    },
-  })),
-}));
+jest.mock('../../util/theme', () => {
+  const { mockTheme } = jest.requireActual('../../util/theme');
+  return {
+    useTheme: jest.fn(() => mockTheme),
+  };
+});
 
 describe('InfoModal', () => {
   const mockToggleModal = jest.fn();

app/components/Base/RemoteImage/index.test.tsx

@@ -7,6 +7,7 @@ import { backgroundState } from '../../../util/test/initial-root-state';
 import Logger from '../../../util/Logger';
 import { Dimensions } from 'react-native';
 import { Image } from 'expo-image';
+import { mockTheme } from '../../../util/theme';
 
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
@@ -582,7 +583,9 @@ describe('RemoteImage', () => {
     });
 
     it('renders with fadeIn but not as token image', async () => {
-      const testPlaceholderStyle = { backgroundColor: '#808080' };
+      const testPlaceholderStyle = {
+        backgroundColor: mockTheme.colors.background.alternative,
+      };
       const { UNSAFE_getByType } = render(
         <RemoteImage
           fadeIn

app/components/Base/TokenIcon/index.test.tsx

@@ -35,19 +35,12 @@ jest.mock('../RemoteImage', () => ({
 }));
 
 // Mock useTheme hook
-jest.mock('../../../util/theme', () => ({
-  useTheme: jest.fn(() => ({
-    colors: {
-      background: {
-        default: '#FFFFFF',
-        alternative: '#F2F4F6',
-      },
-      text: {
-        default: '#24292E',
-      },
-    },
-  })),
-}));
+jest.mock('../../../util/theme', () => {
+  const { mockTheme } = jest.requireActual('../../../util/theme');
+  return {
+    useTheme: jest.fn(() => mockTheme),
+  };
+});
 
 // Mock image imports with various types
 jest.mock('../../../images/image-icons', () => ({

app/components/UI/Card/components/DaimoPayModal/DaimoPayModal.test.tsx

@@ -120,11 +120,9 @@ jest.mock('../../../../../../locales/i18n', () => ({
 
 jest.mock('@metamask/design-system-twrnc-preset', () => ({
   useTailwind: () => {
-    const { mockTheme } = jest.requireActual('../../../../../util/theme');
-    return {
-      style: jest.fn(() => ({})),
-      color: jest.fn(() => mockTheme.colors.text.default),
-    };
+    const tw = () => ({});
+    tw.style = jest.fn(() => ({}));
+    return tw;
   },
 }));
 

app/components/UI/Carousel/StackCard/StackCard.test.tsx

@@ -6,10 +6,11 @@ import { CarouselSlide } from '../types';
 
 // Mock dependencies
 jest.mock('@metamask/design-system-twrnc-preset', () => ({
-  useTailwind: () => ({
-    style: jest.fn(() => ({})),
-    color: jest.fn(() => '#000000'),
-  }),
+  useTailwind: () => {
+    const tw = () => ({});
+    tw.style = jest.fn(() => ({}));
+    return tw;
+  },
 }));
 
 // Mock design system components

app/components/UI/Carousel/StackCardEmpty/StackCardEmpty.test.tsx

@@ -6,10 +6,11 @@ import { StackCardEmpty } from './StackCardEmpty';
 
 // Mock dependencies
 jest.mock('@metamask/design-system-twrnc-preset', () => ({
-  useTailwind: () => ({
-    style: jest.fn(() => ({})),
-    color: jest.fn(() => '#000000'),
-  }),
+  useTailwind: () => {
+    const tw = () => ({});
+    tw.style = jest.fn(() => ({}));
+    return tw;
+  },
 }));
 
 // Mock design system components

app/components/UI/CustomNetworkSelector/CustomNetworkSelector.test.tsx

@@ -57,23 +57,17 @@ jest.mock('../../../../locales/i18n', () => ({
 }));
 
 jest.mock('../../../component-library/hooks/useStyles', () => ({
-  useStyles: jest.fn(() => ({
-    styles: {
-      container: {},
-      addNetworkButtonContainer: {},
-      iconContainer: {},
-    },
-    theme: {
-      colors: {
-        icon: {
-          alternative: '#666666',
-        },
-        text: {
-          alternative: '#999999',
-        },
+  useStyles: jest.fn(() => {
+    const { mockTheme } = jest.requireActual('../../../util/theme');
+    return {
+      styles: {
+        container: {},
+        addNetworkButtonContainer: {},
+        iconContainer: {},
       },
-    },
-  })),
+      theme: mockTheme,
+    };
+  }),
 }));
 
 jest.mock('../../../util/networks', () => ({

app/components/UI/NetworkConnectionBanner/NetworkConnectionBanner.test.tsx

@@ -8,31 +8,10 @@ import renderWithProvider from '../../../util/test/renderWithProvider';
 jest.mock('../../hooks/useNetworkConnectionBanner');
 
 jest.mock('../../../util/theme', () => {
-  const mockThemeColors = {
-    background: {
-      default: '#FFFFFF',
-      section: '#FFFFFF',
-    },
-    icon: {
-      default: '#000000',
-    },
-    error: {
-      muted: '#FFE5E5',
-      default: '#FF0000',
-    },
-  };
-
-  const theme = {
-    colors: mockThemeColors,
-    themeAppearance: 'light',
-    typography: {},
-    shadows: {},
-    brandColors: {},
-  };
-
+  const { mockTheme } = jest.requireActual('../../../util/theme');
   return {
-    useAppTheme: jest.fn(() => theme),
-    mockTheme: theme,
+    useAppTheme: jest.fn(() => mockTheme),
+    mockTheme,
   };
 });