diff --git a/app/actions/browser/index.js b/app/actions/browser/index.js index 2d21c3a2182..1148ca544df 100644 --- a/app/actions/browser/index.js +++ b/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(), }; } diff --git a/app/components/UI/CollectibleModal/CollectibleModal.tsx b/app/components/UI/CollectibleModal/CollectibleModal.tsx index 123a7424da9..118aa84f13f 100644 --- a/app/components/UI/CollectibleModal/CollectibleModal.tsx +++ b/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(), }, }); diff --git a/app/components/Views/Browser/index.js b/app/components/Views/Browser/index.js index f67f0700bd4..3ffa49e3f46 100644 --- a/app/components/Views/Browser/index.js +++ b/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)), diff --git a/app/components/Views/BrowserTab/index.js b/app/components/Views/BrowserTab/index.js index 14fe7cb9506..f63a6f53f34 100644 --- a/app/components/Views/BrowserTab/index.js +++ b/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) => { ); + const isExternalLink = useMemo( + () => props.linkType === EXTERNAL_LINK_TYPE, + [props.linkType], + ); + /** * Main render */ @@ -1533,7 +1545,10 @@ export const BrowserTab = (props) => { renderError={() => ( )} - 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 */ diff --git a/app/constants/browser.ts b/app/constants/browser.ts new file mode 100644 index 00000000000..2044f2f2ad5 --- /dev/null +++ b/app/constants/browser.ts @@ -0,0 +1 @@ +export const EXTERNAL_LINK_TYPE = 'external-link'; diff --git a/app/core/DeeplinkManager/Handlers/handleBrowserUrl.ts b/app/core/DeeplinkManager/Handlers/handleBrowserUrl.ts index 2a130f8d6eb..182a99ad9ad 100644 --- a/app/core/DeeplinkManager/Handlers/handleBrowserUrl.ts +++ b/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(), }, }); diff --git a/app/reducers/browser/index.js b/app/reducers/browser/index.js index fec7595d4d2..0ba6887ab35 100644 --- a/app/reducers/browser/index.js +++ b/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 {