chore: add privacy query params to portfolio navigation

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/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/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,

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],

ui/pages/asset/components/asset-page.test.tsx

@@ -246,9 +246,7 @@ describe('AssetPage', () => {
 
     await waitFor(() =>
       expect(openTabSpy).toHaveBeenCalledWith({
-        url: expect.stringContaining(
-          `/bridge?metamaskEntry=ext_bridge_button&metametricsId=&token=${token.address}`,
-        ),
+        url: `https://portfolio.test/bridge?metamaskEntry=ext_bridge_button&metametricsId=&metricsEnabled=false&marketingEnabled=false&token=${token.address}`,
       }),
     );
   });

ui/pages/asset/components/token-buttons.tsx

@@ -29,6 +29,8 @@ import {
   getIsBridgeChain,
   getCurrentKeyring,
   getMetaMetricsId,
+  getParticipateInMetaMetrics,
+  getDataCollectionForMarketing,
   ///: END:ONLY_INCLUDE_IF
 } from '../../../selectors';
 import { INVALID_ASSET_TYPE } from '../../../helpers/constants/error-keys';
@@ -73,6 +75,8 @@ const TokenButtons = ({
   const isBridgeChain = useSelector(getIsBridgeChain);
   const isBuyableChain = useSelector(getIsNativeTokenBuyable);
   const metaMetricsId = useSelector(getMetaMetricsId);
+  const isMetaMetricsEnabled = useSelector(getParticipateInMetaMetrics);
+  const isMarketingEnabled = useSelector(getDataCollectionForMarketing);
   const { openBuyCryptoInPdapp } = useRamps();
   ///: END:ONLY_INCLUDE_IF
 
@@ -284,6 +288,8 @@ const TokenButtons = ({
                 'bridge',
                 'ext_bridge_button',
                 metaMetricsId,
+                isMetaMetricsEnabled,
+                isMarketingEnabled,
               );
               global.platform.openTab({
                 url: `${portfolioUrl}&token=${token.address}`,

ui/pages/confirmations/hooks/useConfirmationAlertActions.test.ts

@@ -10,7 +10,7 @@ jest.mock('../../../contexts/transaction-modal', () => ({
 }));
 
 const EXPECTED_BUY_URL =
-  'https://portfolio.test/buy?metamaskEntry=ext_buy_sell_button&chainId=0x5';
+  'https://portfolio.test/buy?metamaskEntry=ext_buy_sell_button&chainId=0x5&metricsEnabled=false';
 
 function processAlertActionKey(actionKey: string) {
   const { result } = renderHookWithProvider(

ui/pages/swaps/prepare-swap-page/prepare-swap-page.js

@@ -64,6 +64,8 @@ import {
   getHardwareWalletType,
   getIsBridgeChain,
   getMetaMetricsId,
+  getParticipateInMetaMetrics,
+  getDataCollectionForMarketing,
 } from '../../../selectors';
 import {
   getSmartTransactionsOptInStatus,
@@ -219,6 +221,8 @@ export default function PrepareSwapPage({
   const currentCurrency = useSelector(getCurrentCurrency);
   const fetchingQuotes = useSelector(getFetchingQuotes);
   const loadingComplete = !fetchingQuotes && areQuotesPresent;
+  const isMetaMetricsEnabled = useSelector(getParticipateInMetaMetrics);
+  const isMarketingEnabled = useSelector(getDataCollectionForMarketing);
 
   const fetchParamsFromToken = isSwapsDefaultTokenSymbol(
     sourceTokenInfo?.symbol,
@@ -1024,6 +1028,8 @@ export default function PrepareSwapPage({
                 'bridge',
                 'ext_bridge_prepare_swap_link',
                 metaMetricsId,
+                isMetaMetricsEnabled,
+                isMarketingEnabled,
               );
 
               global.platform.openTab({