Merge branch 'develop' into caip-multichain

.yarnrc.yml

@@ -114,15 +114,9 @@ npmAuditIgnoreAdvisories:
   # upon old versions of ethereumjs-utils.
   - 'ethereum-cryptography (deprecation)'
 
-  # Currently only dependent on deprecated @metamask/types as it is brought in
-  # by @metamask/keyring-api. Updating the dependency in keyring-api will
-  # remove this.
-  - '@metamask/types (deprecation)'
-
-  # @metamask/keyring-api also depends on @metamask/snaps-ui which is
-  # deprecated. Replacing that dependency with @metamask/snaps-sdk will remove
-  # this.
-  - '@metamask/snaps-ui (deprecation)'
+  # Currently in use for the network list drag and drop functionality.
+  # Maintenance has stopped and the project will be archived in 2025.
+  - 'react-beautiful-dnd (deprecation)'
 
 npmRegistries:
   'https://npm.pkg.github.com':

shared/lib/trace.ts

@@ -32,6 +32,11 @@ const ID_DEFAULT = 'default';
 const OP_DEFAULT = 'custom';
 
 const tracesByKey: Map<string, PendingTrace> = new Map();
+const durationsByName: { [name: string]: number } = {};
+
+if (process.env.IN_TEST && globalThis.stateHooks) {
+  globalThis.stateHooks.getCustomTraces = () => durationsByName;
+}
 
 type PendingTrace = {
   end: (timestamp?: number) => void;
@@ -155,9 +160,8 @@ export function endTrace(request: EndTraceRequest) {
 
   const { request: pendingRequest, startTime } = pendingTrace;
   const endTime = timestamp ?? getPerformanceTimestamp();
-  const duration = endTime - startTime;
 
-  log('Finished trace', name, id, duration, { request: pendingRequest });
+  logTrace(pendingRequest, startTime, endTime);
 }
 
 function traceCallback<T>(request: TraceRequest, fn: TraceCallback<T>): T {
@@ -181,9 +185,7 @@ function traceCallback<T>(request: TraceRequest, fn: TraceCallback<T>): T {
       },
       () => {
         const end = Date.now();
-        const duration = end - start;
-
-        log('Finished trace', name, duration, { error, request });
+        logTrace(request, start, end, error);
       },
     ) as T;
   };
@@ -242,6 +244,22 @@ function startSpan<T>(
   });
 }
 
+function logTrace(
+  request: TraceRequest,
+  startTime: number,
+  endTime: number,
+  error?: unknown,
+) {
+  const duration = endTime - startTime;
+  const { name } = request;
+
+  if (process.env.IN_TEST) {
+    durationsByName[name] = duration;
+  }
+
+  log('Finished trace', name, duration, { request, error });
+}
+
 function getTraceId(request: TraceRequest) {
   return request.id ?? ID_DEFAULT;
 }

test/e2e/benchmark.js

@@ -17,6 +17,16 @@ const FixtureBuilder = require('./fixture-builder');
 const DEFAULT_NUM_SAMPLES = 20;
 const ALL_PAGES = Object.values(PAGES);
 
+const CUSTOM_TRACES = {
+  backgroundConnect: 'Background Connect',
+  firstReactRender: 'First Render',
+  getState: 'Get State',
+  initialActions: 'Initial Actions',
+  loadScripts: 'Load Scripts',
+  setupStore: 'Setup Store',
+  uiStartup: 'UI Startup',
+};
+
 async function measurePage(pageName) {
   let metrics;
   await withFixtures(
@@ -32,6 +42,7 @@ async function measurePage(pageName) {
       await driver.findElement('[data-testid="account-menu-icon"]');
       await driver.navigate(pageName);
       await driver.delay(1000);
+
       metrics = await driver.collectMetrics();
     },
   );
@@ -79,7 +90,7 @@ async function profilePageLoad(pages, numSamples, retries) {
       runResults.push(result);
     }
 
-    if (runResults.some((result) => result.navigation.lenth > 1)) {
+    if (runResults.some((result) => result.navigation.length > 1)) {
       throw new Error(`Multiple navigations not supported`);
     } else if (
       runResults.some((result) => result.navigation[0].type !== 'navigate')
@@ -107,6 +118,10 @@ async function profilePageLoad(pages, numSamples, retries) {
       ),
     };
 
+    for (const [key, name] of Object.entries(CUSTOM_TRACES)) {
+      result[key] = runResults.map((metrics) => metrics[name]);
+    }
+
     results[pageName] = {
       min: minResult(result),
       max: maxResult(result),

test/e2e/tests/network/multi-rpc.spec.ts

@@ -396,12 +396,10 @@ describe('MultiRpc:', function (this: Suite) {
         await driver.delay(regularDelayMs);
 
         // go to advanced settigns
-        await driver.clickElement({
+        await driver.clickElementAndWaitToDisappear({
           text: 'Manage default settings',
         });
 
-        await driver.delay(regularDelayMs);
-
         await driver.clickElement({
           text: 'General',
         });
@@ -420,23 +418,18 @@ describe('MultiRpc:', function (this: Suite) {
           tag: 'button',
         });
 
-        await driver.clickElement({
+        await driver.clickElementAndWaitToDisappear({
           text: 'Save',
           tag: 'button',
         });
 
-        await driver.delay(regularDelayMs);
-        await driver.waitForSelector('[data-testid="category-back-button"]');
         await driver.clickElement('[data-testid="category-back-button"]');
 
-        await driver.waitForSelector(
-          '[data-testid="privacy-settings-back-button"]',
-        );
         await driver.clickElement(
           '[data-testid="privacy-settings-back-button"]',
         );
 
-        await driver.clickElement({
+        await driver.clickElementAndWaitToDisappear({
           text: 'Done',
           tag: 'button',
         });
@@ -446,7 +439,7 @@ describe('MultiRpc:', function (this: Suite) {
           tag: 'button',
         });
 
-        await driver.clickElement({
+        await driver.clickElementAndWaitToDisappear({
           text: 'Done',
           tag: 'button',
         });
@@ -461,7 +454,17 @@ describe('MultiRpc:', function (this: Suite) {
           '“Arbitrum One” was successfully edited!',
         );
         // Ensures popover backround doesn't kill test
-        await driver.delay(regularDelayMs);
+        await driver.assertElementNotPresent('.popover-bg');
+
+        // We need to use clickElementSafe + assertElementNotPresent as sometimes the network dialog doesn't appear, as per this issue (#27870)
+        // TODO: change the 2 actions for clickElementAndWaitToDisappear, once the issue is fixed
+        await driver.clickElementSafe({ tag: 'h6', text: 'Got it' });
+
+        await driver.assertElementNotPresent({
+          tag: 'h6',
+          text: 'Got it',
+        });
+
         await driver.clickElement('[data-testid="network-display"]');
 
         const arbitrumRpcUsed = await driver.findElement({

test/e2e/webdriver/driver.js

@@ -1313,7 +1313,10 @@ function collectMetrics() {
       });
     });
 
-  return results;
+  return {
+    ...results,
+    ...window.stateHooks.getCustomTraces(),
+  };
 }
 
 module.exports = { Driver, PAGES };

test/jest/mocks.ts

@@ -180,12 +180,14 @@ export function createMockInternalAccount({
   address = MOCK_DEFAULT_ADDRESS,
   type = EthAccountType.Eoa,
   keyringType = KeyringTypes.hd,
+  lastSelected = 0,
   snapOptions = undefined,
 }: {
   name?: string;
   address?: string;
   type?: string;
   keyringType?: string;
+  lastSelected?: number;
   snapOptions?: {
     enabled: boolean;
     name: string;
@@ -228,6 +230,7 @@ export function createMockInternalAccount({
         type: keyringType,
       },
       snap: snapOptions,
+      lastSelected,
     },
     options: {},
     methods,

types/global.d.ts

@@ -239,6 +239,7 @@ type HttpProvider = {
 };
 
 type StateHooks = {
+  getCustomTraces?: () => { [name: string]: number };
   getCleanAppState?: () => Promise<any>;
   getLogs?: () => any[];
   getMostRecentPersistedState?: () => any;

ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.d.ts

@@ -1,10 +1,12 @@
+import { InternalAccount } from '@metamask/keyring-api';
 import type { CurrencyDisplayProps } from '../../ui/currency-display/currency-display.component';
 import type { PRIMARY, SECONDARY } from '../../../helpers/constants/common';
 
 export type UserPrefrencedCurrencyDisplayProps = OverridingUnion<
   CurrencyDisplayProps,
   {
     type?: PRIMARY | SECONDARY;
+    account?: InternalAccount;
     currency?: string;
     showEthLogo?: boolean;
     ethNumberOfDecimals?: string | number;

ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
 import { EtherDenomination } from '../../../../shared/constants/common';
 import { PRIMARY, SECONDARY } from '../../../helpers/constants/common';
 import CurrencyDisplay from '../../ui/currency-display';
@@ -10,13 +11,14 @@ import {
   getMultichainCurrentNetwork,
 } from '../../../selectors/multichain';
 import { useMultichainSelector } from '../../../hooks/useMultichainSelector';
+import { getSelectedEvmInternalAccount } from '../../../selectors';
 
 /* eslint-disable jsdoc/require-param-name */
 // eslint-disable-next-line jsdoc/require-param
 /** @param {PropTypes.InferProps<typeof UserPreferencedCurrencyDisplayPropTypes>>} */
 export default function UserPreferencedCurrencyDisplay({
   'data-testid': dataTestId,
-  account,
+  account: multichainAccount,
   ethNumberOfDecimals,
   fiatNumberOfDecimals,
   numberOfDecimals: propsNumberOfDecimals,
@@ -28,6 +30,15 @@ export default function UserPreferencedCurrencyDisplay({
   shouldCheckShowNativeToken,
   ...restProps
 }) {
+  // NOTE: When displaying currencies, we need the actual account to detect whether we're in a
+  // multichain world or EVM-only world.
+  // To preserve the original behavior of this component, we default to the lastly selected
+  // EVM accounts (when used in an EVM-only context).
+  // The caller has to pass the account in a multichain context to properly display the currency
+  // here (e.g for Bitcoin).
+  const evmAccount = useSelector(getSelectedEvmInternalAccount);
+  const account = multichainAccount ?? evmAccount;
+
   const currentNetwork = useMultichainSelector(
     getMultichainCurrentNetwork,
     account,

ui/components/app/wallet-overview/coin-overview.tsx

@@ -117,6 +117,7 @@ export const CoinOverview = ({
 
   ///: END:ONLY_INCLUDE_IF
 
+  const account = useSelector(getSelectedAccount);
   const showNativeTokenAsMainBalanceRoute = getSpecificSettingsRoute(
     t,
     t('general'),
@@ -254,6 +255,7 @@ export const CoinOverview = ({
               {balanceToDisplay ? (
                 <UserPreferencedCurrencyDisplay
                   style={{ display: 'contents' }}
+                  account={account}
                   className={classnames(
                     `${classPrefix}-overview__primary-balance`,
                     {

ui/components/multichain/network-list-menu/network-list-menu.test.js

@@ -19,11 +19,15 @@ const mockSetShowTestNetworks = jest.fn();
 const mockToggleNetworkMenu = jest.fn();
 const mockSetNetworkClientIdForDomain = jest.fn();
 const mockSetActiveNetwork = jest.fn();
+const mockUpdateCustomNonce = jest.fn();
+const mockSetNextNonce = jest.fn();
 
 jest.mock('../../../store/actions.ts', () => ({
   setShowTestNetworks: () => mockSetShowTestNetworks,
   setActiveNetwork: () => mockSetActiveNetwork,
   toggleNetworkMenu: () => mockToggleNetworkMenu,
+  updateCustomNonce: () => mockUpdateCustomNonce,
+  setNextNonce: () => mockSetNextNonce,
   setNetworkClientIdForDomain: (network, id) =>
     mockSetNetworkClientIdForDomain(network, id),
 }));
@@ -206,6 +210,8 @@ describe('NetworkListMenu', () => {
     fireEvent.click(getByText(MAINNET_DISPLAY_NAME));
     expect(mockToggleNetworkMenu).toHaveBeenCalled();
     expect(mockSetActiveNetwork).toHaveBeenCalled();
+    expect(mockUpdateCustomNonce).toHaveBeenCalled();
+    expect(mockSetNextNonce).toHaveBeenCalled();
   });
 
   it('shows the correct selected network when networks share the same chain ID', () => {

ui/components/multichain/network-list-menu/network-list-menu.tsx

@@ -26,6 +26,8 @@ import {
   setEditedNetwork,
   grantPermittedChain,
   showPermittedNetworkToast,
+  updateCustomNonce,
+  setNextNonce,
 } from '../../../store/actions';
 import {
   CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP,
@@ -277,6 +279,8 @@ export const NetworkListMenu = ({ onClose }: { onClose: () => void }) => {
             network.rpcEndpoints[network.defaultRpcEndpointIndex];
           dispatch(setActiveNetwork(networkClientId));
           dispatch(toggleNetworkMenu());
+          dispatch(updateCustomNonce(''));
+          dispatch(setNextNonce(''));
 
           if (permittedAccountAddresses.length > 0) {
             grantPermittedChain(selectedTabOrigin, network.chainId);

ui/ducks/swaps/swaps.js

@@ -6,6 +6,7 @@ import { captureMessage } from '@sentry/browser';
 
 import { TransactionType } from '@metamask/transaction-controller';
 import { createProjectLogger } from '@metamask/utils';
+import { CHAIN_IDS } from '../../../shared/constants/network';
 import {
   addToken,
   addTransactionAndWaitForPublish,
@@ -1284,6 +1285,21 @@ export const signAndSendTransactions = (
             },
           },
         );
+        if (
+          [
+            CHAIN_IDS.LINEA_MAINNET,
+            CHAIN_IDS.LINEA_GOERLI,
+            CHAIN_IDS.LINEA_SEPOLIA,
+          ].includes(chainId)
+        ) {
+          debugLog(
+            'Delaying submitting trade tx to make Linea confirmation more likely',
+          );
+          const waitPromise = new Promise((resolve) =>
+            setTimeout(resolve, 5000),
+          );
+          await waitPromise;
+        }
       } catch (e) {
         debugLog('Approve transaction failed', e);
         await dispatch(setSwapsErrorKey(SWAP_FAILED_ERROR));

ui/helpers/utils/util.js

@@ -303,6 +303,25 @@ export function getAccountByAddress(accounts = [], targetAddress) {
   return accounts.find(({ address }) => address === targetAddress);
 }
 
+/**
+ * Sort the given list of account their selecting order (descending). Meaning the
+ * first account of the sorted list will be the last selected account.
+ *
+ * @param {import('@metamask/keyring-api').InternalAccount[]} accounts - The internal accounts list.
+ * @returns {import('@metamask/keyring-api').InternalAccount[]} The sorted internal account list.
+ */
+export function sortSelectedInternalAccounts(accounts) {
+  // This logic comes from the `AccountsController`:
+  // TODO: Expose a free function from this controller and use it here
+  return accounts.sort((accountA, accountB) => {
+    // Sort by `.lastSelected` in descending order
+    return (
+      (accountB.metadata.lastSelected ?? 0) -
+      (accountA.metadata.lastSelected ?? 0)
+    );
+  });
+}
+
 /**
  * Strips the following schemes from URL strings:
  * - http