Merge branch 'develop' into dr/update-btc-snap

test/e2e/flask/user-operations.spec.ts

@@ -22,6 +22,8 @@ import {
 import { buildQuote, reviewQuote } from '../tests/swaps/shared';
 import { Driver } from '../webdriver/driver';
 import { Bundler } from '../bundler';
+import { SWAP_TEST_ETH_USDC_TRADES_MOCK } from '../../data/mock-data';
+import { Mockttp } from '../mock-e2e';
 
 enum TransactionDetailRowIndex {
   Nonce = 0,
@@ -102,6 +104,7 @@ async function createSwap(driver: Driver) {
     swapFrom: 'TESTETH',
     swapTo: 'USDC',
   });
+
   await driver.clickElement({ text: 'Swap', tag: 'button' });
   await driver.clickElement({ text: 'Close', tag: 'button' });
 }
@@ -167,6 +170,17 @@ async function expectTransactionDetailsMatchReceipt(
   );
 }
 
+async function mockSwapsTransactionQuote(mockServer: Mockttp) {
+  return [
+    await mockServer
+      .forGet('https://swap.api.cx.metamask.io/networks/1/trades')
+      .thenCallback(() => ({
+        statusCode: 200,
+        json: SWAP_TEST_ETH_USDC_TRADES_MOCK,
+      })),
+  ];
+}
+
 async function withAccountSnap(
   { title, paymaster }: { title?: string; paymaster?: string },
   test: (driver: Driver, bundlerServer: Bundler) => Promise<void>,
@@ -183,6 +197,7 @@ async function withAccountSnap(
       ganacheOptions: {
         hardfork: 'london',
       },
+      testSpecificMock: mockSwapsTransactionQuote,
     },
     async ({
       driver,

test/e2e/tests/bridge/bridge-click-from-asset-overview.spec.ts

@@ -5,6 +5,9 @@ import GanacheContractAddressRegistry from '../../seeder/ganache-contract-addres
 import { Driver } from '../../webdriver/driver';
 import { BridgePage, getBridgeFixtures } from './bridge-test-utils';
 
+const EXPECTED_PORTFOLIO_URL =
+  'https://portfolio.metamask.io/bridge?metametricsId=null&metricsEnabled=false&marketingEnabled=false';
+
 describe('Click bridge button from asset page @no-mmi', function (this: Suite) {
   it('loads portfolio tab when flag is turned off', async function () {
     await withFixtures(
@@ -25,18 +28,13 @@ describe('Click bridge button from asset page @no-mmi', function (this: Suite) {
         // ETH
         await bridgePage.loadAssetPage(contractRegistry);
         await bridgePage.load('coin-overview');
-        await bridgePage.verifyPortfolioTab(
-          'https://portfolio.metamask.io/bridge?metametricsId=null',
-        );
-
+        await bridgePage.verifyPortfolioTab(EXPECTED_PORTFOLIO_URL);
         await bridgePage.reloadHome();
 
         // TST
         await bridgePage.loadAssetPage(contractRegistry, 'TST');
         await bridgePage.load('token-overview');
-        await bridgePage.verifyPortfolioTab(
-          'https://portfolio.metamask.io/bridge?metametricsId=null',
-        );
+        await bridgePage.verifyPortfolioTab(EXPECTED_PORTFOLIO_URL);
       },
     );
   });

test/e2e/tests/bridge/bridge-click-from-eth-overview.spec.ts

@@ -19,7 +19,7 @@ describe('Click bridge button from wallet overview @no-mmi', function (this: Sui
         await logInWithBalanceValidation(driver, ganacheServer);
         await bridgePage.load();
         await bridgePage.verifyPortfolioTab(
-          'https://portfolio.metamask.io/bridge?metametricsId=null',
+          'https://portfolio.metamask.io/bridge?metametricsId=null&metricsEnabled=false&marketingEnabled=false',
         );
       },
     );

test/e2e/tests/portfolio/portfolio-site.spec.js

@@ -42,10 +42,10 @@ describe('Portfolio site', function () {
         await driver.switchToWindowWithTitle('E2E Test Page', windowHandles);
 
         // Verify site
-        assert.equal(
-          await driver.getCurrentUrl(),
-          'https://portfolio.metamask.io/?metamaskEntry=ext_portfolio_button&metametricsId=null',
-        );
+        const currentUrl = await driver.getCurrentUrl();
+        const expectedUrl =
+          'https://portfolio.metamask.io/?metamaskEntry=ext_portfolio_button&metametricsId=null&metricsEnabled=false&marketingEnabled=false';
+        assert.equal(currentUrl, expectedUrl);
       },
     );
   });

ui/components/app/assets/token-cell/__snapshots__/token-cell.test.js.snap

@@ -12,7 +12,7 @@ exports[`Token Cell should match snapshot 1`] = `
       href="#"
     >
       <div
-        class="mm-box mm-badge-wrapper mm-box--margin-right-3 mm-box--display-inline-block"
+        class="mm-box mm-badge-wrapper multichain-token-list-item__badge mm-box--margin-right-3 mm-box--display-inline-block"
       >
         <div
           class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-avatar-token--with-halo mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full"

ui/components/app/wallet-overview/btc-overview.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import configureMockStore from 'redux-mock-store';
-import { fireEvent } from '@testing-library/react';
+import { fireEvent, waitFor } from '@testing-library/react';
 import thunk from 'redux-thunk';
 import { Cryptocurrency } from '@metamask/assets-controllers';
 import { BtcAccountType, BtcMethod } from '@metamask/keyring-api';
@@ -208,6 +208,7 @@ describe('BtcOverview', () => {
         metamaskEntry: RampsMetaMaskEntry.BuySellButton,
         chainId: MultichainNetworks.BITCOIN,
         metametricsId: mockMetaMetricsId,
+        metricsEnabled: String(false),
       }),
     });
   });
@@ -227,11 +228,12 @@ describe('BtcOverview', () => {
     fireEvent.click(portfolioButton as HTMLElement);
 
     expect(openTabSpy).toHaveBeenCalledTimes(1);
-    expect(openTabSpy).toHaveBeenCalledWith({
-      url: makePortfolioUrl('', {
-        metamaskEntry: 'ext_portfolio_button',
-        metametricsId: mockMetaMetricsId,
+    await waitFor(() =>
+      expect(openTabSpy).toHaveBeenCalledWith({
+        url: expect.stringContaining(
+          `?metamaskEntry=ext_portfolio_button&metametricsId=${mockMetaMetricsId}`,
+        ),
       }),
-    });
+    );
   });
 });

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

@@ -36,7 +36,9 @@ import {
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
   SwapsEthToken,
   getCurrentKeyring,
+  getDataCollectionForMarketing,
   getMetaMetricsId,
+  getParticipateInMetaMetrics,
   ///: END:ONLY_INCLUDE_IF
   getUseExternalServices,
 } from '../../../selectors';
@@ -97,6 +99,8 @@ const CoinButtons = ({
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
   const location = useLocation();
   const metaMetricsId = useSelector(getMetaMetricsId);
+  const isMetaMetricsEnabled = useSelector(getParticipateInMetaMetrics);
+  const isMarketingEnabled = useSelector(getDataCollectionForMarketing);
   const keyring = useSelector(getCurrentKeyring);
   const usingHardwareWallet = isHardwareKeyring(keyring?.type);
   ///: END:ONLY_INCLUDE_IF
@@ -287,6 +291,8 @@ const CoinButtons = ({
         'bridge',
         'ext_bridge_button',
         metaMetricsId,
+        isMetaMetricsEnabled,
+        isMarketingEnabled,
       );
       global.platform.openTab({
         url: `${portfolioUrl}${
@@ -307,7 +313,13 @@ const CoinButtons = ({
   }, [isBridgeChain, chainId, metaMetricsId]);
 
   const handlePortfolioOnClick = useCallback(() => {
-    const url = getPortfolioUrl('', 'ext_portfolio_button', metaMetricsId);
+    const url = getPortfolioUrl(
+      '',
+      'ext_portfolio_button',
+      metaMetricsId,
+      isMetaMetricsEnabled,
+      isMarketingEnabled,
+    );
     global.platform.openTab({ url });
     trackEvent({
       category: MetaMetricsEventCategory.Navigation,

ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap

@@ -12,7 +12,7 @@ exports[`TokenListItem should render correctly 1`] = `
       href="#"
     >
       <div
-        class="mm-box mm-badge-wrapper mm-box--margin-right-3 mm-box--display-inline-block"
+        class="mm-box mm-badge-wrapper multichain-token-list-item__badge mm-box--margin-right-3 mm-box--display-inline-block"
       >
         <div
           class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-avatar-token--with-halo mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"

ui/components/multichain/token-list-item/index.scss

@@ -7,4 +7,8 @@
       }
     }
   }
+
+  &__badge {
+    align-self: center;
+  }
 }

ui/components/multichain/token-list-item/token-list-item.js

@@ -39,6 +39,8 @@ import {
   getMetaMetricsId,
   getTestNetworkBackgroundColor,
   getTokensMarketData,
+  getParticipateInMetaMetrics,
+  getDataCollectionForMarketing,
 } from '../../../selectors';
 import {
   getMultichainCurrentChainId,
@@ -82,8 +84,10 @@ export const TokenListItem = ({
   const isEvm = useSelector(getMultichainIsEvm);
   const primaryTokenImage = useSelector(getMultichainNativeCurrencyImage);
   const trackEvent = useContext(MetaMetricsContext);
-  const metaMetricsId = useSelector(getMetaMetricsId);
   const chainId = useSelector(getMultichainCurrentChainId);
+  const metaMetricsId = useSelector(getMetaMetricsId);
+  const isMetaMetricsEnabled = useSelector(getParticipateInMetaMetrics);
+  const isMarketingEnabled = useSelector(getDataCollectionForMarketing);
 
   // Scam warning
   const showScamWarning =
@@ -133,7 +137,13 @@ export const TokenListItem = ({
       onClick={(e) => {
         e.preventDefault();
         e.stopPropagation();
-        const url = getPortfolioUrl('stake', 'ext_stake_button', metaMetricsId);
+        const url = getPortfolioUrl(
+          'stake',
+          'ext_stake_button',
+          metaMetricsId,
+          isMetaMetricsEnabled,
+          isMarketingEnabled,
+        );
         global.platform.openTab({ url });
         trackEvent({
           event: MetaMetricsEventName.StakingEntryPointClicked,
@@ -220,6 +230,7 @@ export const TokenListItem = ({
             />
           }
           marginRight={3}
+          className="multichain-token-list-item__badge"
         >
           <AvatarToken
             name={tokenSymbol}

ui/components/ui/icon-button/icon-button.stories.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import IconButton from './icon-button';
+import { TextVariant } from '../../../helpers/constants/design-system';
+import Tooltip from '../tooltip/tooltip';
+
+const meta: Meta<typeof IconButton> = {
+  title: 'Components/UI/IconButton',
+  component: IconButton,
+  argTypes: {
+    onClick: { action: 'clicked' },
+    Icon: { control: 'object' },
+    disabled: { control: 'boolean' },
+    label: { control: 'text' },
+    tooltipRender: { control: 'function' },
+    className: { control: 'text' },
+  },
+  args: {
+    onClick: () => {},
+    Icon: <div>Icon</div>,
+    disabled: false,
+    label: 'Icon Button',
+    tooltipRender: undefined,
+    className: '',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+
+export const Default: Story = {};
+
+Default.storyName = 'Default';

ui/components/ui/new-network-info/new-network-info.js

@@ -21,6 +21,8 @@ import {
   getMetaMetricsId,
   getUseTokenDetection,
   getUseExternalServices,
+  getParticipateInMetaMetrics,
+  getDataCollectionForMarketing,
 } from '../../../selectors';
 import { setFirstTimeUsedNetwork } from '../../../store/actions';
 import {
@@ -49,6 +51,8 @@ export default function NewNetworkInfo() {
   const currentNetwork = useSelector(getCurrentNetwork);
   const metaMetricsId = useSelector(getMetaMetricsId);
   const isBridgeChain = useSelector(getIsBridgeChain);
+  const isMetaMetricsEnabled = useSelector(getParticipateInMetaMetrics);
+  const isMarketingEnabled = useSelector(getDataCollectionForMarketing);
 
   const onCloseClick = () => {
     setShowPopup(false);
@@ -203,6 +207,8 @@ export default function NewNetworkInfo() {
                             'bridge',
                             'ext_bridge_new_network_info_link',
                             metaMetricsId,
+                            isMetaMetricsEnabled,
+                            isMarketingEnabled,
                           )}&destChain=${currentNetwork?.chainId}`}
                           target="_blank"
                           rel="noreferrer"

ui/helpers/utils/portfolio.js

@@ -2,7 +2,18 @@ export function getPortfolioUrl(
   endpoint = '',
   metamaskEntry = '',
   metaMetricsId = '',
+  metricsEnabled = false,
+  marketingEnabled = false,
 ) {
-  const portfolioUrl = process.env.PORTFOLIO_URL || '';
-  return `${portfolioUrl}/${endpoint}?metamaskEntry=${metamaskEntry}&metametricsId=${metaMetricsId}`;
+  const baseUrl = process.env.PORTFOLIO_URL || '';
+  const url = new URL(endpoint, baseUrl);
+
+  url.searchParams.append('metamaskEntry', metamaskEntry);
+  url.searchParams.append('metametricsId', metaMetricsId);
+
+  // Append privacy preferences for metrics + marketing on user navigation to Portfolio
+  url.searchParams.append('metricsEnabled', String(metricsEnabled));
+  url.searchParams.append('marketingEnabled', String(marketingEnabled));
+
+  return url.href;
 }

ui/hooks/ramps/useRamps/useRamps.test.tsx

@@ -43,7 +43,7 @@ describe('useRamps', () => {
       },
     };
 
-    const mockBuyURI = `${process.env.PORTFOLIO_URL}/buy?metamaskEntry=${metaMaskEntry}&chainId=${mockChainId}&metametricsId=${mockedMetametricsId}`;
+    const mockBuyURI = `${process.env.PORTFOLIO_URL}/buy?metamaskEntry=${metaMaskEntry}&chainId=${mockChainId}&metametricsId=${mockedMetametricsId}&metricsEnabled=false`;
     const openTabSpy = jest.spyOn(global.platform, 'openTab');
 
     const { result } = renderHook(() => useRamps(), { wrapper }); // default metamask entry
@@ -68,7 +68,7 @@ describe('useRamps', () => {
       },
     };
 
-    const mockBuyURI = `${process.env.PORTFOLIO_URL}/buy?metamaskEntry=${metaMaskEntry}&chainId=${mockChainId}&metametricsId=${mockedMetametricsId}`;
+    const mockBuyURI = `${process.env.PORTFOLIO_URL}/buy?metamaskEntry=${metaMaskEntry}&chainId=${mockChainId}&metametricsId=${mockedMetametricsId}&metricsEnabled=false`;
     const openTabSpy = jest.spyOn(global.platform, 'openTab');
 
     const { result } = renderHook(
@@ -97,7 +97,7 @@ describe('useRamps', () => {
         },
       };
 
-      const mockBuyURI = `${process.env.PORTFOLIO_URL}/buy?metamaskEntry=ext_buy_sell_button&chainId=${mockChainId}&metametricsId=${mockedMetametricsId}`;
+      const mockBuyURI = `${process.env.PORTFOLIO_URL}/buy?metamaskEntry=ext_buy_sell_button&chainId=${mockChainId}&metametricsId=${mockedMetametricsId}&metricsEnabled=false`;
       const openTabSpy = jest.spyOn(global.platform, 'openTab');
       const { result } = renderHook(() => useRamps(), { wrapper });
 

ui/hooks/ramps/useRamps/useRamps.ts

@@ -2,7 +2,12 @@ import { useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import { CaipChainId } from '@metamask/utils';
 import { ChainId } from '../../../../shared/constants/network';
-import { getCurrentChainId, getMetaMetricsId } from '../../../selectors';
+import {
+  getCurrentChainId,
+  getDataCollectionForMarketing,
+  getMetaMetricsId,
+  getParticipateInMetaMetrics,
+} from '../../../selectors';
 
 type IUseRamps = {
   openBuyCryptoInPdapp: (chainId?: ChainId | CaipChainId) => void;
@@ -23,6 +28,8 @@ const useRamps = (
 ): IUseRamps => {
   const chainId = useSelector(getCurrentChainId);
   const metaMetricsId = useSelector(getMetaMetricsId);
+  const isMetaMetricsEnabled = useSelector(getParticipateInMetaMetrics);
+  const isMarketingEnabled = useSelector(getDataCollectionForMarketing);
 
   const getBuyURI = useCallback(
     (_chainId: ChainId | CaipChainId) => {
@@ -32,6 +39,11 @@ const useRamps = (
       if (metaMetricsId) {
         params.set('metametricsId', metaMetricsId);
       }
+      params.set('metricsEnabled', String(isMetaMetricsEnabled));
+      if (isMarketingEnabled) {
+        params.set('marketingEnabled', String(isMarketingEnabled));
+      }
+
       return `${portfolioUrl}/buy?${params.toString()}`;
     },
     [metaMetricsId],