fix: browser tab url type (#10894)

## **Description**

- allow optional link type on new tabs
- add type in state
- configure webview depending on type

## **Related issues**

fixes MetaMask/mobile-planning#1560
fixes #10898

>[!IMPORTANT]
> Followup issue to create: refactor to remove enzyme and be able to
properly test. Current state of the BrowserTab component doesn't allow
proper testing. The current snapshot is useless.

## **Manual testing steps**

See related issue

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

NA

### **After**

NA

## **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**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] 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.

app/actions/browser/index.js

@@ -68,11 +68,13 @@ export function closeAllTabs() {
  * Creates a new tab
  *
  * @param {string} url - The website's url
+ * @param {string} linkType - optional link type
  */
-export function createNewTab(url) {
+export function createNewTab(url, linkType) {
   return {
     type: 'CREATE_NEW_TAB',
     url,
+    linkType,
     id: Date.now(),
   };
 }

app/components/UI/CollectibleModal/CollectibleModal.tsx

@@ -28,6 +28,7 @@ import { MetaMetricsEvents } from '../../../core/Analytics';
 import { selectChainId } from '../../../selectors/networkController';
 import { getDecimalChainId } from '../../../util/networks';
 import { Nft } from '@metamask/assets-controllers';
+import { EXTERNAL_LINK_TYPE } from '../../../constants/browser';
 
 const CollectibleModal = () => {
   const navigation = useNavigation();
@@ -92,6 +93,7 @@ const CollectibleModal = () => {
         screen: Routes.BROWSER_VIEW,
         params: {
           newTabUrl: url,
+          linkType: EXTERNAL_LINK_TYPE,
           timestamp: Date.now(),
         },
       });

app/components/Views/Browser/index.js

@@ -67,6 +67,7 @@ export const Browser = (props) => {
   const { trackEvent } = useMetrics();
   const { toastRef } = useContext(ToastContext);
   const browserUrl = props.route?.params?.url;
+  const linkType = props.route?.params?.linkType;
   const prevSiteHostname = useRef(browserUrl);
   const { accounts, ensByAccountAddress } = useAccounts();
   const accountAvatarType = useSelector((state) =>
@@ -114,8 +115,8 @@ export const Browser = (props) => {
     [navigation, route, colors],
   );
 
-  const newTab = (url) => {
-    createNewTab(url || AppConstants.HOMEPAGE_URL);
+  const newTab = (url, linkType) => {
+    createNewTab(url || AppConstants.HOMEPAGE_URL, linkType);
   };
 
   const updateTabInfo = (url, tabID) =>
@@ -222,15 +223,15 @@ export const Browser = (props) => {
     [tabs],
   );
 
-  // Handle deeplinks.
+  // Handle links with associated timestamp.
   useEffect(
     () => {
       const newTabUrl = route.params?.newTabUrl;
       const deeplinkTimestamp = route.params?.timestamp;
       const existingTabId = route.params?.existingTabId;
       if (newTabUrl && deeplinkTimestamp) {
-        // Open url from deeplink.
-        newTab(newTabUrl);
+        // Open url from link.
+        newTab(newTabUrl, linkType);
       } else if (existingTabId) {
         const existingTab = tabs.find((tab) => tab.id === existingTabId);
         if (existingTab) {
@@ -359,6 +360,7 @@ export const Browser = (props) => {
         id={tab.id}
         key={`tab_${tab.id}`}
         initialUrl={tab.url || AppConstants.HOMEPAGE_URL}
+        linkType={tab.linkType}
         updateTabInfo={updateTabInfo}
         showTabs={showTabs}
         newTab={newTab}
@@ -384,7 +386,7 @@ const mapStateToProps = (state) => ({
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  createNewTab: (url) => dispatch(createNewTab(url)),
+  createNewTab: (url, linkType) => dispatch(createNewTab(url, linkType)),
   closeAllTabs: () => dispatch(closeAllTabs()),
   closeTab: (id) => dispatch(closeTab(id)),
   setActiveTab: (id) => dispatch(setActiveTab(id)),

app/components/Views/BrowserTab/index.js

@@ -1,4 +1,10 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react';
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  useMemo,
+} from 'react';
 import {
   Text,
   StyleSheet,
@@ -105,6 +111,7 @@ import { selectPermissionControllerState } from '../../../selectors/snaps/permis
 import { useIsFocused } from '@react-navigation/native';
 import handleWebViewFocus from '../../../util/browser/webViewFocus';
 import { isTest } from '../../../util/test/utils.js';
+import { EXTERNAL_LINK_TYPE } from '../../../constants/browser';
 
 const { HOMEPAGE_URL, NOTIFICATION_NAMES } = AppConstants;
 const HOMEPAGE_HOST = new URL(HOMEPAGE_URL)?.hostname;
@@ -1504,6 +1511,11 @@ export const BrowserTab = (props) => {
     </View>
   );
 
+  const isExternalLink = useMemo(
+    () => props.linkType === EXTERNAL_LINK_TYPE,
+    [props.linkType],
+  );
+
   /**
    * Main render
    */
@@ -1533,7 +1545,10 @@ export const BrowserTab = (props) => {
                 renderError={() => (
                   <WebviewError error={error} returnHome={returnHome} />
                 )}
-                source={{ uri: initialUrl }}
+                source={{
+                  uri: initialUrl,
+                  ...(isExternalLink ? { headers: { Cookie: '' } } : null),
+                }}
                 injectedJavaScriptBeforeContentLoaded={entryScriptWeb3}
                 style={styles.webview}
                 onLoadStart={onLoadStart}
@@ -1578,6 +1593,10 @@ BrowserTab.propTypes = {
    * InitialUrl
    */
   initialUrl: PropTypes.string,
+  /**
+   * linkType - type of link to open
+   */
+  linkType: PropTypes.string,
   /**
    * Protocol string to append to URLs that have none
    */

app/constants/browser.ts

@@ -0,0 +1 @@
+export const EXTERNAL_LINK_TYPE = 'external-link';

app/core/DeeplinkManager/Handlers/handleBrowserUrl.ts

@@ -1,6 +1,7 @@
 import Routes from '../../../constants/navigation/Routes';
 import { InteractionManager } from 'react-native';
 import DeeplinkManager from '../DeeplinkManager';
+import { EXTERNAL_LINK_TYPE } from '../../../constants/browser';
 
 function handleBrowserUrl({
   deeplinkManager,
@@ -19,6 +20,7 @@ function handleBrowserUrl({
         screen: Routes.BROWSER.VIEW,
         params: {
           newTabUrl: url,
+          linkType: EXTERNAL_LINK_TYPE,
           timestamp: Date.now(),
         },
       });

app/reducers/browser/index.js

@@ -51,7 +51,14 @@ const browserReducer = (state = initialState, action) => {
     case 'CREATE_NEW_TAB':
       return {
         ...state,
-        tabs: [...state.tabs, { url: action.url, id: action.id }],
+        tabs: [
+          ...state.tabs,
+          {
+            url: action.url,
+            ...(action.linkType && { linkType: action.linkType }),
+            id: action.id,
+          },
+        ],
       };
     case 'CLOSE_TAB':
       return {