fix: add useBuildPortfolioUrl hook for centralized metrics tracking (MetaMask#22683)

## **Description**

### Problem
We are asking the user to opt into metrics/marketing twice, first time
is when the user installs the app, and the second time when the user
opens the web browser within the app. We have query params being passed
into Portfolio called `marketingEnabled` and `metricsEnabled` which
SHOULD opt in the user's tracking preferences thus dismissing the second
opt-in modal. The issue is that we are inconsistently passing these
params into various entry points

### Solution
Pass in the opted in metrics from mobile into the portfolio web app via
query params. Created a new `useBuildPortfolioUrl` hook that
automatically includes `marketingEnabled` and `metricsEnabled` query
parameters when building Portfolio URLs. This centralizes the logic for
including user consent preferences and ensures consistency across the
app.

### Changes

New Hook
- Created `app/components/hooks/useBuildPortfolioUrl.ts`
  - Subscribes to `isDataCollectionForMarketingEnabled` from Redux state
  - Subscribes to `metricsEnabled` from the `useMetrics` hook
- Returns a memoized function that builds Portfolio URLs with consent
parameters automatically
included
  - Supports additional parameters via the second argument
- Updated all Portfolio URL entry points to use new hook

Before:
```typescript
const isDataCollectionForMarketingEnabled = useSelector(
  (state) => state.security.dataCollectionForMarketing,
);
const { isEnabled } = useMetrics();

const portfolioUrl = buildPortfolioUrl(
  AppConstants.PORTFOLIO.URL,
  {
    marketingEnabled: isDataCollectionForMarketingEnabled ?? false,
    metricsEnabled: isEnabled(),
    srcChain: chainId,
  },
);
```

  After:
```typescript
const buildPortfolioUrlWithMetrics = useBuildPortfolioUrl();

const portfolioUrl = buildPortfolioUrlWithMetrics(
  AppConstants.PORTFOLIO.URL,
  { srcChain: chainId },
);
```

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: Improved Portfolio integration by passing tracking
consent from Mobile app

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/TMCU-45

## **Manual testing steps**

```gherkin
  Feature: Portfolio tracking consent parameter

    Scenario: user with no tracking preference opens Portfolio
      Given user has not set tracking preference in app settings
      When user taps the Portfolio link from wallet home screen
      Then Portfolio URL should not include `marketingEnabled` and `metricsEnabled` parameter
      And Portfolio website should display the consent modal

    Scenario: user who accepted tracking opens Portfolio
      Given user has accepted tracking in app settings
      When user taps the Portfolio link from wallet home screen
      Then Portfolio URL should include `marketingEnabled` and `metricsEnabled` as true
      And Portfolio website should skip the consent modal

    Scenario: user who declined tracking opens Portfolio
      Given user has declined tracking in app settings
      When user taps the Portfolio link from wallet home screen
      Then Portfolio URL should include `marketingEnabled` and `metricsEnabled` as false
      And Portfolio website should skip the consent modal

    Scenario: user opens Portfolio Bridge with tracking consent
      Given user has accepted tracking in app settings
      When user taps "Bridge" from token asset options
      Then Portfolio Bridge URL should include `marketingEnabled` and `metricsEnabled` is true
      And Portfolio Bridge URL should include srcChain and token parameters
```

## **Screenshots/Recordings**

`~`

### **Before**


https://github.com/user-attachments/assets/4cdcdbec-0ffc-4b36-827e-eb442316eb33

### **After**

#### No Tracking Accepted


https://github.com/user-attachments/assets/58b4ec4b-6fcd-4d52-9f84-f3c4e8de9720

#### Tracking Accepted


https://github.com/user-attachments/assets/60921b12-87eb-40bb-9561-135d7e16742e

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.






<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Adds a reusable hook and util to append metrics/marketing consent
params to Portfolio URLs and updates Portfolio, Bridge, Stake, Browser,
Trending, and AssetOptions flows to use it, with tests.
> 
> - **Hooks/Utils**:
> - Add `useBuildPortfolioUrl` to auto-include `marketingEnabled` and
`metricsEnabled` when building Portfolio URLs.
> - Add `buildPortfolioUrl` in `util/browser` to append standard params;
deprecates scattered `appendURLParams` usage for Portfolio.
> - **UI Integrations**:
> - Update `AccountOverview` to build Portfolio URL with consent and map
`security.dataCollectionForMarketing` to props.
> - Update Bridge navigation (`useGoToPortfolioBridge`) to use hook and
include `srcChain`/`token`.
> - Update `StakeButton` to open Stake via hook-built URL when
ineligible.
>   - Update `AssetOptions` Portfolio navigation to use hook.
>   - Update `Browser` homepage URL generation to use hook.
>   - Update `TrendingView` to use hook for browser button navigation.
>   - Export `SectionHeaderProps` interface.
> - **Tests**:
>   - Add tests for `useBuildPortfolioUrl` and `buildPortfolioUrl`.
> - Update `StakeButton` and `TrendingView` tests to reflect new URL
params.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
57608da. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: vinnyhoward

app/components/UI/AccountOverview/index.js

@@ -45,6 +45,7 @@ import Text, {
 } from '../../../component-library/components/Texts/Text';
 import { withMetricsAwareness } from '../../../components/hooks/useMetrics';
 import { isPortfolioUrl } from '../../../util/url';
+import { buildPortfolioUrl } from '../../../util/browser';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -189,6 +190,10 @@ class AccountOverview extends PureComponent {
      * Metrics injected by withMetricsAwareness HOC
      */
     metrics: PropTypes.object,
+    /**
+     * Whether data collection for marketing is enabled
+     */
+    isDataCollectionForMarketingEnabled: PropTypes.bool,
   };
 
   state = {
@@ -301,7 +306,7 @@ class AccountOverview extends PureComponent {
   };
 
   onOpenPortfolio = () => {
-    const { navigation, browserTabs } = this.props;
+    const { navigation, browserTabs, metrics } = this.props;
     const existingPortfolioTab = browserTabs.find((tab) =>
       isPortfolioUrl(tab.url),
     );
@@ -310,7 +315,16 @@ class AccountOverview extends PureComponent {
     if (existingPortfolioTab) {
       existingTabId = existingPortfolioTab.id;
     } else {
-      newTabUrl = `${AppConstants.PORTFOLIO.URL}/?metamaskEntry=mobile`;
+      const additionalParams = {
+        metricsEnabled: metrics.isEnabled(),
+        marketingEnabled:
+          this.props.isDataCollectionForMarketingEnabled ?? false,
+      };
+      const portfolioUrl = buildPortfolioUrl(
+        AppConstants.PORTFOLIO.URL,
+        additionalParams,
+      );
+      newTabUrl = portfolioUrl.href;
     }
     const params = {
       ...(newTabUrl && { newTabUrl }),
@@ -440,6 +454,8 @@ const mapStateToProps = (state) => ({
   currentCurrency: selectCurrentCurrency(state),
   chainId: selectChainId(state),
   browserTabs: state.browser.tabs,
+  isDataCollectionForMarketingEnabled:
+    state.security.dataCollectionForMarketing,
 });
 
 const mapDispatchToProps = (dispatch) => ({

app/components/UI/Bridge/hooks/useGoToPortfolioBridge.ts

@@ -11,6 +11,7 @@ import type { BrowserParams } from '../../../Views/Browser/Browser.types';
 import { getDecimalChainId } from '../../../../util/networks';
 import { useMetrics } from '../../../hooks/useMetrics';
 import { isBridgeUrl } from '../../../../util/url';
+import { useBuildPortfolioUrl } from '../../../hooks/useBuildPortfolioUrl';
 
 /**
  * Returns a function that is used to navigate to the MetaMask Bridges webpage.
@@ -24,6 +25,7 @@ export default function useGoToPortfolioBridge(location: string) {
   const browserTabs = useSelector((state: any) => state.browser.tabs);
   const { navigate } = useNavigation();
   const { trackEvent, createEventBuilder } = useMetrics();
+  const buildPortfolioUrlWithMetrics = useBuildPortfolioUrl();
   return (address?: string) => {
     const existingBridgeTab = browserTabs.find((tab: BrowserTab) =>
       isBridgeUrl(tab.url),
@@ -37,11 +39,20 @@ export default function useGoToPortfolioBridge(location: string) {
       params.newTabUrl = undefined;
       params.existingTabId = existingBridgeTab.id;
     } else {
-      params.newTabUrl = `${
-        AppConstants.BRIDGE.URL
-      }/?metamaskEntry=mobile&srcChain=${getDecimalChainId(chainId)}${
-        address ? `&token=${address}` : ''
-      }`;
+      const additionalParams: Record<string, string | number> = {
+        srcChain: getDecimalChainId(chainId),
+      };
+
+      if (address) {
+        additionalParams.token = address;
+      }
+
+      const bridgeUrl = buildPortfolioUrlWithMetrics(
+        AppConstants.BRIDGE.URL,
+        additionalParams,
+      );
+
+      params.newTabUrl = bridgeUrl.href;
     }
 
     navigate(Routes.BROWSER.HOME, {

app/components/UI/Stake/components/StakeButton/StakeButton.test.tsx

@@ -84,6 +84,16 @@ jest.mock('@react-navigation/native', () => {
 
 jest.mock('../../../../hooks/useMetrics');
 
+jest.mock('../../../../hooks/useBuildPortfolioUrl', () => ({
+  useBuildPortfolioUrl: jest.fn(() => (baseUrl: string) => {
+    const url = new URL(baseUrl);
+    url.searchParams.set('metamaskEntry', 'mobile');
+    url.searchParams.set('marketingEnabled', 'true');
+    url.searchParams.set('metricsEnabled', 'true');
+    return url;
+  }),
+}));
+
 // Mock the environment variables
 jest.mock('../../../../../util/environment', () => ({
   isProduction: jest.fn().mockReturnValue(false),
@@ -256,7 +266,7 @@ describe('StakeButton', () => {
       await waitFor(() => {
         expect(mockNavigate).toHaveBeenCalledWith(Routes.BROWSER.HOME, {
           params: {
-            newTabUrl: `${AppConstants.STAKE.URL}?metamaskEntry=mobile`,
+            newTabUrl: `${AppConstants.STAKE.URL}?metamaskEntry=mobile&marketingEnabled=true&metricsEnabled=true`,
             timestamp: expect.any(Number),
           },
           screen: Routes.BROWSER.VIEW,

app/components/UI/Stake/components/StakeButton/index.tsx

@@ -13,6 +13,7 @@ import Routes from '../../../../../constants/navigation/Routes';
 import AppConstants from '../../../../../core/AppConstants';
 import Engine from '../../../../../core/Engine';
 import { RootState } from '../../../../../reducers';
+import { useBuildPortfolioUrl } from '../../../../hooks/useBuildPortfolioUrl';
 import {
   selectEvmChainId,
   selectNetworkConfigurationByChainId,
@@ -57,6 +58,7 @@ const StakeButtonContent = ({ asset }: StakeButtonProps) => {
   const styles = createStyles(colors);
   const navigation = useNavigation();
   const { trackEvent, createEventBuilder } = useMetrics();
+  const buildPortfolioUrlWithMetrics = useBuildPortfolioUrl();
 
   const browserTabs = useSelector((state: RootState) => state.browser.tabs);
   const chainId = useSelector(selectEvmChainId);
@@ -149,7 +151,8 @@ const StakeButtonContent = ({ asset }: StakeButtonProps) => {
       if (existingStakeTab) {
         existingTabId = existingStakeTab.id;
       } else {
-        newTabUrl = `${AppConstants.STAKE.URL}?metamaskEntry=mobile`;
+        const stakeUrl = buildPortfolioUrlWithMetrics(AppConstants.STAKE.URL);
+        newTabUrl = stakeUrl.href;
       }
       const params = {
         ...(newTabUrl && { newTabUrl }),

app/components/Views/AssetOptions/AssetOptions.tsx

@@ -30,9 +30,8 @@ import {
 } from '../../../util/networks';
 import { isPortfolioUrl } from '../../../util/url';
 import { BrowserTab, TokenI } from '../../../components/UI/Tokens/types';
-import { RootState } from '../../../reducers';
 import { CaipAssetType, Hex } from '@metamask/utils';
-import { appendURLParams } from '../../../util/browser';
+import { useBuildPortfolioUrl } from '../../hooks/useBuildPortfolioUrl';
 import InAppBrowser from 'react-native-inappbrowser-reborn';
 import { isNonEvmChainId } from '../../../core/Multichain/utils';
 import { selectSelectedInternalAccountByScope } from '../../../selectors/multichainAccounts/accounts';
@@ -109,13 +108,11 @@ const AssetOptions = (props: Props) => {
   const chainId = useSelector(selectEvmChainId);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const browserTabs = useSelector((state: any) => state.browser.tabs);
-  const isDataCollectionForMarketingEnabled = useSelector(
-    (state: RootState) => state.security.dataCollectionForMarketing,
-  );
   // Get the selected account for the current network (works for all non-EVM chains)
   const selectInternalAccountByScope = useSelector(
     selectSelectedInternalAccountByScope,
   );
+  const buildPortfolioUrlWithMetrics = useBuildPortfolioUrl();
   const assets = useSelector(selectAssetsBySelectedAccountGroup);
 
   // Check if token exists in state
@@ -166,7 +163,7 @@ const AssetOptions = (props: Props) => {
     networkConfigurations,
     providerConfigTokenExplorer,
   );
-  const { trackEvent, isEnabled, createEventBuilder } = useMetrics();
+  const { trackEvent, createEventBuilder } = useMetrics();
 
   const goToBrowserUrl = (url: string, title: string) => {
     modalRef.current?.dismissModal(() => {
@@ -248,13 +245,9 @@ const AssetOptions = (props: Props) => {
     if (existingPortfolioTab) {
       existingTabId = existingPortfolioTab.id;
     } else {
-      const analyticsEnabled = isEnabled();
-
-      const portfolioUrl = appendURLParams(AppConstants.PORTFOLIO.URL, {
-        metamaskEntry: 'mobile',
-        metricsEnabled: analyticsEnabled,
-        marketingEnabled: isDataCollectionForMarketingEnabled ?? false,
-      });
+      const portfolioUrl = buildPortfolioUrlWithMetrics(
+        AppConstants.PORTFOLIO.URL,
+      );
 
       newTabUrl = portfolioUrl.href;
     }

app/components/Views/Browser/index.js

@@ -40,10 +40,8 @@ import URL from 'url-parse';
 import { useMetrics } from '../../hooks/useMetrics';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import {
-  appendURLParams,
-  isTokenDiscoveryBrowserEnabled,
-} from '../../../util/browser';
+import { isTokenDiscoveryBrowserEnabled } from '../../../util/browser';
+import { useBuildPortfolioUrl } from '../../hooks/useBuildPortfolioUrl';
 import {
   THUMB_WIDTH,
   THUMB_HEIGHT,
@@ -78,7 +76,7 @@ export const Browser = (props) => {
   const previousTabs = useRef(null);
   const { top: topInset } = useSafeAreaInsets();
   const { styles } = useStyles(styleSheet, { topInset });
-  const { trackEvent, createEventBuilder, isEnabled } = useMetrics();
+  const { trackEvent, createEventBuilder } = useMetrics();
   const { toastRef } = useContext(ToastContext);
   const browserUrl = props.route?.params?.url;
   const linkType = props.route?.params?.linkType;
@@ -89,18 +87,13 @@ export const Browser = (props) => {
 
   const accountAvatarType = useSelector(selectAvatarAccountType);
 
-  const isDataCollectionForMarketingEnabled = useSelector(
-    (state) => state.security.dataCollectionForMarketing,
-  );
   const permittedAccountsList = useSelector(selectPermissionControllerState);
 
+  const buildPortfolioUrlWithMetrics = useBuildPortfolioUrl();
+
   const homePageUrl = useCallback(
-    () =>
-      appendURLParams(AppConstants.HOMEPAGE_URL, {
-        metricsEnabled: isEnabled(),
-        marketingEnabled: isDataCollectionForMarketingEnabled ?? false,
-      }).href,
-    [isEnabled, isDataCollectionForMarketingEnabled],
+    () => buildPortfolioUrlWithMetrics(AppConstants.HOMEPAGE_URL).href,
+    [buildPortfolioUrlWithMetrics],
   );
 
   const newTab = useCallback(
@@ -120,7 +113,6 @@ export const Browser = (props) => {
   );
 
   const [currentUrl, setCurrentUrl] = useState(browserUrl || homePageUrl());
-
   const updateTabInfo = useCallback(
     (tabID, info) => {
       updateTab(tabID, info);

app/components/Views/TrendingView/TrendingView.test.tsx

@@ -48,7 +48,7 @@ jest.mock('../../../components/hooks/useMetrics', () => ({
 }));
 
 jest.mock('../../../util/browser', () => ({
-  appendURLParams: jest.fn((url) => ({
+  buildPortfolioUrl: jest.fn((url) => ({
     href: `${url}?metamaskEntry=mobile&metricsEnabled=true&marketingEnabled=false`,
   })),
 }));

app/components/Views/TrendingView/TrendingView.tsx

@@ -2,8 +2,8 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { ScrollView, TouchableOpacity, RefreshControl } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useNavigation } from '@react-navigation/native';
-import { useSelector } from 'react-redux';
 import { createStackNavigator } from '@react-navigation/stack';
+import { useSelector } from 'react-redux';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import {
   Box,
@@ -15,8 +15,7 @@ import {
 } from '@metamask/design-system-react-native';
 import { strings } from '../../../../locales/i18n';
 import AppConstants from '../../../core/AppConstants';
-import { appendURLParams } from '../../../util/browser';
-import { useMetrics } from '../../hooks/useMetrics';
+import { useBuildPortfolioUrl } from '../../hooks/useBuildPortfolioUrl';
 import { useTheme } from '../../../util/theme';
 import Routes from '../../../constants/navigation/Routes';
 import {
@@ -37,7 +36,7 @@ const TrendingFeed: React.FC = () => {
   const tw = useTailwind();
   const insets = useSafeAreaInsets();
   const navigation = useNavigation();
-  const { isEnabled } = useMetrics();
+  const buildPortfolioUrlWithMetrics = useBuildPortfolioUrl();
   const { colors } = useTheme();
   const [refreshing, setRefreshing] = useState(false);
   const [refreshTrigger, setRefreshTrigger] = useState(0);
@@ -51,25 +50,14 @@ const TrendingFeed: React.FC = () => {
     return unsubscribe;
   }, [navigation]);
 
-  const isDataCollectionForMarketingEnabled = useSelector(
-    (state: { security: { dataCollectionForMarketing?: boolean } }) =>
-      state.security.dataCollectionForMarketing,
-  );
+  const portfolioUrl = buildPortfolioUrlWithMetrics(AppConstants.PORTFOLIO.URL);
 
   const browserTabsCount = useSelector(
     (state: { browser: { tabs: unknown[] } }) => state.browser.tabs.length,
   );
-  // check if basic functionality toggle is on
   const isBasicFunctionalityEnabled = useSelector(
     selectBasicFunctionalityEnabled,
   );
-
-  const portfolioUrl = appendURLParams(AppConstants.PORTFOLIO.URL, {
-    metamaskEntry: 'mobile',
-    metricsEnabled: isEnabled(),
-    marketingEnabled: isDataCollectionForMarketingEnabled ?? false,
-  });
-
   const handleBrowserPress = useCallback(() => {
     updateLastTrendingScreen('TrendingBrowser');
     navigation.navigate('TrendingBrowser', {

app/components/Views/TrendingView/components/SectionHeader/SectionHeader.tsx

@@ -18,7 +18,7 @@ import { strings } from '../../../../../../locales/i18n';
 import { SectionId, SECTIONS_CONFIG } from '../../config/sections.config';
 import { useNavigation } from '@react-navigation/native';
 
-interface SectionHeaderProps {
+export interface SectionHeaderProps {
   sectionId: SectionId;
 }