[pull] main from MetaMask:main

.eslintrc.js

@@ -122,6 +122,12 @@ module.exports = {
         '@metamask/design-tokens/color-no-hex': 'error',
       },
     },
+    {
+      files: ['app/components/Snaps/**/*.{js,jsx,ts,tsx}'],
+      rules: {
+        '@metamask/design-tokens/color-no-hex': 'error',
+      },
+    },
     {
       files: [
         'app/components/UI/Name/**/*.{js,ts,tsx}',

.github/scripts/shared/template.ts

@@ -27,7 +27,6 @@ const bugReportIssueTemplateTitles = [
   '### Expected behavior',
   '### Screenshots', // TODO: replace '### Screenshots' by '### Screenshots/Recordings' in January 2024 (as most issues will meet this criteria by then)
   '### Steps to reproduce',
-  '### Error messages or log output',
   '### Version',
   '### Build type',
   '### Device',

README.md

@@ -20,6 +20,7 @@ To learn how to contribute to the MetaMask codebase, visit our [Contributor Docs
 - [Build Troubleshooting](./docs/readme/troubleshooting.md)
 - [Component View Testing](./docs/readme/component-view-testing.md)
 - [E2E Testing](./docs/readme/e2e-testing.md)
+- [On-Ramp Provider Manual Testing](./tests/docs/ONRAMP-PROVIDER-TESTING.md)
 - [Debugging](./docs/readme/debugging.md)
 - [Performance](./docs/readme/performance.md)
 - [Release Build Profiling](./docs/readme/release-build-profiler.md)

app/components/Nav/App/App.tsx

@@ -56,7 +56,7 @@ import ConnectQRHardware from '../../Views/ConnectQRHardware';
 import SelectHardwareWallet from '../../Views/ConnectHardware/SelectHardware';
 import { UpdateNeeded } from '../../../components/UI/UpdateNeeded';
 import { OTAUpdatesModal } from '../../UI/OTAUpdatesModal';
-import NetworkSettings from '../../Views/Settings/NetworksSettings/NetworkSettings';
+import NetworkDetailsView from '../../Views/NetworksManagement/NetworkDetailsView';
 import ModalMandatory from '../../../component-library/components/Modals/ModalMandatory';
 import { RestoreWallet } from '../../Views/RestoreWallet';
 import WalletRestored from '../../Views/RestoreWallet/WalletRestored';
@@ -148,10 +148,10 @@ import useInterval from '../../hooks/useInterval';
 import { Duration } from '@metamask/utils';
 import { selectSeedlessOnboardingLoginFlow } from '../../../selectors/seedlessOnboardingController';
 import { PayWithModal } from '../../Views/confirmations/components/modals/pay-with-modal/pay-with-modal';
-import { State2AccountConnectWrapper } from '../../Views/MultichainAccounts/MultichainAccountConnect/State2AccountConnectWrapper';
+import MultichainAccountConnect from '../../Views/MultichainAccounts/MultichainAccountConnect/MultichainAccountConnect';
 import { SmartAccountModal } from '../../Views/MultichainAccounts/AccountDetails/components/SmartAccountModal/SmartAccountModal';
 import TradeWalletActions from '../../Views/TradeWalletActions';
-import { BIP44AccountPermissionWrapper } from '../../Views/MultichainAccounts/MultichainPermissionsSummary/BIP44AccountPermissionWrapper';
+import { MultichainAccountPermissions } from '../../Views/MultichainAccounts/MultichainAccountPermissions/MultichainAccountPermissions';
 import SocialLoginIosUser from '../../Views/SocialLoginIosUser';
 import { useOTAUpdates } from '../../hooks/useOTAUpdates';
 import MultichainTransactionDetailsSheet from '../../UI/MultichainTransactionDetailsModal/MultichainTransactionDetailsSheet';
@@ -333,10 +333,10 @@ const AddNetworkFlow = () => {
   const route = useRoute();
 
   return (
-    <Stack.Navigator>
+    <Stack.Navigator screenOptions={{ headerShown: false }}>
       <Stack.Screen
         name="AddNetwork"
-        component={NetworkSettings}
+        component={NetworkDetailsView}
         initialParams={route?.params}
       />
     </Stack.Navigator>
@@ -460,11 +460,11 @@ const RootModalFlow = (props: RootModalFlowProps) => (
     />
     <Stack.Screen
       name={Routes.SHEET.ACCOUNT_CONNECT}
-      component={State2AccountConnectWrapper}
+      component={MultichainAccountConnect}
     />
     <Stack.Screen
       name={Routes.SHEET.ACCOUNT_PERMISSIONS}
-      component={BIP44AccountPermissionWrapper}
+      component={MultichainAccountPermissions}
       initialParams={{ initialScreen: AccountPermissionsScreens.Connected }}
     />
     <Stack.Screen
@@ -1059,13 +1059,21 @@ const AppFlow = () => (
     <Stack.Screen
       name={Routes.ADD_NETWORK}
       component={AddNetworkFlow}
-      options={{ animationEnabled: true }}
+      options={{
+        animationEnabled: true,
+        cardStyle: { flex: 1, backgroundColor: importedColors.transparent },
+        gestureEnabled: true,
+      }}
     />
     {isNetworkUiRedesignEnabled() ? (
       <Stack.Screen
         name={Routes.EDIT_NETWORK}
         component={AddNetworkFlow}
-        options={{ animationEnabled: true }}
+        options={{
+          animationEnabled: true,
+          cardStyle: { flex: 1, backgroundColor: importedColors.transparent },
+          gestureEnabled: true,
+        }}
       />
     ) : null}
     <Stack.Screen

app/components/Snaps/SnapUIRenderer/components/copyable.test.tsx

@@ -3,6 +3,7 @@
 import { fireEvent, waitFor } from '@testing-library/react-native';
 import ClipboardManager from '../../../../core/ClipboardManager';
 import { Copyable } from '@metamask/snaps-sdk/jsx';
+import { mockTheme } from '../../../../util/theme';
 import { renderInterface } from '../testUtils';
 import { copyable } from './copyable';
 
@@ -42,14 +43,6 @@ jest.mock('../../../../core/Engine/Engine', () => ({
 describe('SnapUICopyable', () => {
   // Tests for the factory function
   describe('copyable factory function', () => {
-    // Create a mock theme object
-    const mockTheme = {
-      colors: {
-        text: { default: '#000000' },
-        background: { default: '#FFFFFF' },
-      },
-    };
-
     // Create base params that match UIComponentParams interface
     const baseParams = {
       map: {},

app/components/Snaps/SnapUIRenderer/components/link.test.ts

@@ -30,7 +30,7 @@ describe('link component', () => {
           children: 'link',
           key: expect.any(String),
           props: {
-            color: '#4459ff',
+            color: mockTheme.colors.info.default,
             style: {
               fontWeight: undefined,
               textAlign: undefined,
@@ -75,7 +75,7 @@ describe('link component', () => {
           children: 'Visit ',
           key: expect.any(String),
           props: {
-            color: '#4459ff',
+            color: mockTheme.colors.info.default,
             style: {
               fontWeight: undefined,
               textAlign: undefined,
@@ -120,7 +120,7 @@ describe('link component', () => {
           children: 'Visit ',
           key: expect.any(String),
           props: {
-            color: '#4459ff',
+            color: mockTheme.colors.info.default,
             style: {
               fontWeight: undefined,
               textAlign: undefined,
@@ -133,7 +133,7 @@ describe('link component', () => {
           children: 'MetaMask',
           key: expect.any(String),
           props: {
-            color: '#4459ff',
+            color: mockTheme.colors.info.default,
             style: {
               fontWeight: undefined,
               textAlign: undefined,

app/components/Snaps/SnapUISpinner/SnapUISpinner.test.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import { ActivityIndicator } from 'react-native';
 import { render } from '@testing-library/react-native';
 import { SnapUISpinner } from './SnapUISpinner';
-import { lightTheme } from '@metamask/design-tokens';
 
 const mockUseTheme = jest.fn();
 jest.mock('../../../util/theme', () => ({
   useTheme: () => mockUseTheme(),
 }));
 
-const mockColor = lightTheme.colors.primary.default;
+const { mockTheme } = jest.requireActual('../../../util/theme');
+const mockColor = mockTheme.colors.primary.default;
 
 describe('SnapUISpinner', () => {
   beforeEach(() => {

app/components/UI/Card/hooks/useCardDelegation.test.ts

@@ -9,6 +9,7 @@ import Engine from '../../../../core/Engine';
 import Logger from '../../../../util/Logger';
 import { MetaMetricsEvents } from '../../../../core/Analytics';
 import { useAnalytics } from '../../../hooks/useAnalytics/useAnalytics';
+import { createMockUseAnalyticsHook } from '../../../../util/test/analyticsMock';
 import { toTokenMinimalUnit } from '../../../../util/number';
 import { safeToChecksumAddress } from '../../../../util/address';
 import { ARBITRARY_ALLOWANCE } from '../constants';
@@ -68,9 +69,7 @@ jest.mock('../../../../core/Engine', () => ({
 
 const mockUseSelector = useSelector as jest.MockedFunction<typeof useSelector>;
 const mockUseCardSDK = useCardSDK as jest.MockedFunction<typeof useCardSDK>;
-const mockUseAnalytics = useAnalytics as jest.MockedFunction<
-  typeof useAnalytics
->;
+const mockUseAnalytics = jest.mocked(useAnalytics);
 const mockUseNeedsGasFaucet = useNeedsGasFaucet as jest.MockedFunction<
   typeof useNeedsGasFaucet
 >;
@@ -155,19 +154,12 @@ describe('useCardDelegation', () => {
     });
     mockTrackEvent = jest.fn();
 
-    mockUseAnalytics.mockReturnValue({
-      trackEvent: mockTrackEvent,
-      createEventBuilder: mockCreateEventBuilder,
-      isEnabled: jest.fn().mockReturnValue(true),
-      enable: jest.fn(),
-      addTraitsToUser: jest.fn(),
-      createDataDeletionTask: jest.fn(),
-      checkDataDeleteStatus: jest.fn(),
-      getAnalyticsId: jest.fn(),
-      isDataRecorded: jest.fn().mockReturnValue(true),
-      getDeleteRegulationId: jest.fn(),
-      getDeleteRegulationCreationDate: jest.fn(),
-    } as ReturnType<typeof useAnalytics>);
+    mockUseAnalytics.mockReturnValue(
+      createMockUseAnalyticsHook({
+        trackEvent: mockTrackEvent,
+        createEventBuilder: mockCreateEventBuilder,
+      }),
+    );
 
     // Setup selector mock - returns a function that returns account
     mockUseSelector.mockReturnValue(

app/components/UI/DeFiPositions/DeFiPositionsList.test.tsx

@@ -5,7 +5,7 @@ import DeFiPositionsList from './DeFiPositionsList';
 import { RootState } from '../../../reducers';
 import { WalletViewSelectorsIDs } from '../../Views/Wallet/WalletView.testIds';
 import { useAnalytics } from '../../hooks/useAnalytics/useAnalytics';
-import type { AnalyticsTrackingEvent } from '../../../util/analytics/AnalyticsEventBuilder';
+import { createMockUseAnalyticsHook } from '../../../util/test/analyticsMock';
 
 jest.mock('../../../util/networks', () => ({
   ...jest.requireActual('../../../util/networks'),
@@ -564,40 +564,19 @@ describe('DeFiPositionsList', () => {
     beforeEach(() => {
       mockTrackEvent = jest.fn();
       mockAddProperties = jest.fn().mockReturnThis();
-      jest.mocked(useAnalytics).mockReturnValue({
-        trackEvent: mockTrackEvent,
-        createEventBuilder: jest.fn(() => {
-          const mockEvent: AnalyticsTrackingEvent = {
-            name: '',
-            properties: {},
-            sensitiveProperties: {},
-            saveDataRecording: false,
-            get isAnonymous(): boolean {
-              return false;
-            },
-            get hasProperties(): boolean {
-              return false;
-            },
-          };
-          return {
+      jest.mocked(useAnalytics).mockReturnValue(
+        createMockUseAnalyticsHook({
+          trackEvent: mockTrackEvent,
+          createEventBuilder: jest.fn().mockReturnValue({
             addProperties: mockAddProperties,
             addSensitiveProperties: jest.fn().mockReturnThis(),
             removeProperties: jest.fn().mockReturnThis(),
             removeSensitiveProperties: jest.fn().mockReturnThis(),
             setSaveDataRecording: jest.fn().mockReturnThis(),
-            build: jest.fn(() => mockEvent),
-          };
+            build: jest.fn(),
+          }),
         }),
-        isEnabled: jest.fn(),
-        enable: jest.fn(),
-        addTraitsToUser: jest.fn(),
-        createDataDeletionTask: jest.fn(),
-        checkDataDeleteStatus: jest.fn(),
-        getDeleteRegulationCreationDate: jest.fn(),
-        getDeleteRegulationId: jest.fn(),
-        isDataRecorded: jest.fn(),
-        getAnalyticsId: jest.fn(),
-      });
+      );
     });
 
     it('tracks Position Screen Viewed when isFullView is true and positions are loaded', async () => {

app/components/UI/Earn/Views/EarnLendingDepositConfirmationView/__snapshots__/EarnLendingDepositConfirmationView.test.tsx.snap

@@ -207,8 +207,8 @@ exports[`EarnLendingDepositConfirmationView matches snapshot 1`] = `
         style={
           {
             "backgroundColor": "#ffffff",
-            "borderRadius": 8,
-            "marginBottom": 8,
+            "borderRadius": 12,
+            "marginBottom": 12,
             "paddingBottom": 8,
             "paddingHorizontal": 8,
             "paddingTop": 12,
@@ -965,8 +965,8 @@ exports[`EarnLendingDepositConfirmationView matches snapshot 1`] = `
         style={
           {
             "backgroundColor": "#ffffff",
-            "borderRadius": 8,
-            "marginBottom": 8,
+            "borderRadius": 12,
+            "marginBottom": 12,
             "paddingBottom": 8,
             "paddingHorizontal": 8,
             "paddingTop": 12,

app/components/UI/Earn/Views/EarnLendingDepositConfirmationView/components/DepositInfoSection/__snapshots__/DepositInfoSection.test.tsx.snap

@@ -5,8 +5,8 @@ exports[`DepositInfoSection renders correctly 1`] = `
   style={
     {
       "backgroundColor": "#ffffff",
-      "borderRadius": 8,
-      "marginBottom": 8,
+      "borderRadius": 12,
+      "marginBottom": 12,
       "paddingBottom": 8,
       "paddingHorizontal": 8,
       "paddingTop": 12,

app/components/UI/Earn/Views/EarnLendingDepositConfirmationView/components/DepositReceiveSection/__snapshots__/DepositReceiveSection.test.tsx.snap

@@ -5,8 +5,8 @@ exports[`DepositReceiveSection renders correctly 1`] = `
   style={
     {
       "backgroundColor": "#ffffff",
-      "borderRadius": 8,
-      "marginBottom": 8,
+      "borderRadius": 12,
+      "marginBottom": 12,
       "paddingBottom": 8,
       "paddingHorizontal": 8,
       "paddingTop": 12,

app/components/UI/Earn/Views/EarnLendingWithdrawalConfirmationView/__snapshots__/EarnLendingWithdrawalConfirmationView.test.tsx.snap

@@ -180,8 +180,8 @@ exports[`EarnLendingWithdrawalConfirmationView matches snapshot 1`] = `
         style={
           {
             "backgroundColor": "#ffffff",
-            "borderRadius": 8,
-            "marginBottom": 8,
+            "borderRadius": 12,
+            "marginBottom": 12,
             "paddingBottom": 8,
             "paddingHorizontal": 8,
             "paddingTop": 12,
@@ -341,8 +341,8 @@ exports[`EarnLendingWithdrawalConfirmationView matches snapshot 1`] = `
         style={
           {
             "backgroundColor": "#ffffff",
-            "borderRadius": 8,
-            "marginBottom": 8,
+            "borderRadius": 12,
+            "marginBottom": 12,
             "paddingBottom": 8,
             "paddingHorizontal": 8,
             "paddingTop": 12,

app/components/UI/Earn/components/Musd/MusdConversionAssetListCta/index.tsx

@@ -205,6 +205,7 @@ const MusdConversionAssetListCta = () => {
 
       <Button
         variant={ButtonVariant.Secondary}
+        style={styles.button}
         onPress={() => handlePress(CTA_CLICK_TARGET.CTA_BUTTON)}
         size={ButtonSize.Sm}
       >