+
+ )
+ ///: END:ONLY_INCLUDE_IN
+ }
{!hideNetworkIndicator && (
diff --git a/ui/components/app/app-header/app-header.container.js b/ui/components/app/app-header/app-header.container.js
index 04b9c47c4..7bf1bc9a8 100644
--- a/ui/components/app/app-header/app-header.container.js
+++ b/ui/components/app/app-header/app-header.container.js
@@ -16,7 +16,14 @@ import AppHeader from './app-header.component';
const mapStateToProps = (state) => {
const { appState, metamask } = state;
const { networkDropdownOpen } = appState;
- const { selectedAddress, isUnlocked, isAccountMenuOpen } = metamask;
+ const {
+ selectedAddress,
+ isUnlocked,
+ isAccountMenuOpen,
+ ///: BEGIN:ONLY_INCLUDE_IN(desktop)
+ desktopEnabled,
+ ///: END:ONLY_INCLUDE_IN
+ } = metamask;
///: BEGIN:ONLY_INCLUDE_IN(flask)
const unreadNotificationsCount = getUnreadNotificationsCount(state);
@@ -37,6 +44,9 @@ const mapStateToProps = (state) => {
///: BEGIN:ONLY_INCLUDE_IN(beta)
showBetaHeader,
///: END:ONLY_INCLUDE_IN
+ ///: BEGIN:ONLY_INCLUDE_IN(desktop)
+ desktopEnabled,
+ ///: END:ONLY_INCLUDE_IN
};
};
diff --git a/ui/components/app/app-header/app-header.test.js b/ui/components/app/app-header/app-header.test.js
index c7619aea8..03eacc6b3 100644
--- a/ui/components/app/app-header/app-header.test.js
+++ b/ui/components/app/app-header/app-header.test.js
@@ -145,4 +145,38 @@ describe('App Header', () => {
expect(mockToggleAccountMenu).not.toHaveBeenCalled();
});
});
+
+ describe('App Header Desktop dev mode Logo', () => {
+ const tempDebug = process.env.METAMASK_DEBUG;
+
+ beforeEach(() => {
+ process.env.METAMASK_DEBUG = true;
+ });
+
+ afterEach(() => {
+ process.env.METAMASK_DEBUG = tempDebug;
+ });
+
+ it('displays desktop icon when in dev mode', () => {
+ const desktopEnabledState = {
+ ...mockState,
+ metamask: {
+ ...mockState.metamask,
+ desktopEnabled: true,
+ },
+ };
+
+ const desktopEnabledStore = configureMockStore([thunk])(
+ desktopEnabledState,
+ );
+ const { queryByTestId } = renderWithProvider(
+ 
+ );
+
+ imageSrc = src;
+ }
+ ///: END:ONLY_INCLUDE_IN
+
return (
+
+
+`;
diff --git a/ui/components/app/desktop-enable-button/desktop-enable-button.component.js b/ui/components/app/desktop-enable-button/desktop-enable-button.component.js
new file mode 100644
index 000000000..b4c0b7ef3
--- /dev/null
+++ b/ui/components/app/desktop-enable-button/desktop-enable-button.component.js
@@ -0,0 +1,96 @@
+import React, { useContext } from 'react';
+import { useHistory } from 'react-router-dom';
+import { useSelector, useDispatch } from 'react-redux';
+import browser from 'webextension-polyfill';
+import { PairingKeyStatus } from '@metamask/desktop/dist/types';
+import { I18nContext } from '../../../contexts/i18n';
+import Button from '../../ui/button';
+import {
+ DESKTOP_ERROR_ROUTE,
+ DESKTOP_PAIRING_ROUTE,
+} from '../../../helpers/constants/routes';
+import { EXTENSION_ERROR_PAGE_TYPES } from '../../../../shared/constants/desktop';
+import { getIsDesktopEnabled } from '../../../selectors';
+import {
+ hideLoadingIndication,
+ showLoadingIndication,
+ setDesktopEnabled as setDesktopEnabledAction,
+ testDesktopConnection,
+ disableDesktop,
+} from '../../../store/actions';
+import { SECOND } from '../../../../shared/constants/time';
+
+const DESKTOP_ERROR_DESKTOP_OUTDATED_ROUTE = `${DESKTOP_ERROR_ROUTE}/${EXTENSION_ERROR_PAGE_TYPES.DESKTOP_OUTDATED}`;
+const DESKTOP_ERROR_EXTENSION_OUTDATED_ROUTE = `${DESKTOP_ERROR_ROUTE}/${EXTENSION_ERROR_PAGE_TYPES.EXTENSION_OUTDATED}`;
+const DESKTOP_ERROR_NOT_FOUND_ROUTE = `${DESKTOP_ERROR_ROUTE}/${EXTENSION_ERROR_PAGE_TYPES.NOT_FOUND}`;
+const DESKTOP_ERROR_PAIRING_KEY_NOT_MATCH_ROUTE = `${DESKTOP_ERROR_ROUTE}/${EXTENSION_ERROR_PAGE_TYPES.PAIRING_KEY_NOT_MATCH}`;
+const SKIP_PAIRING_RESTART_DELAY = 2 * SECOND;
+
+export default function DesktopEnableButton() {
+ const t = useContext(I18nContext);
+ const dispatch = useDispatch();
+ const history = useHistory();
+ const showLoader = () => dispatch(showLoadingIndication());
+ const hideLoader = () => dispatch(hideLoadingIndication());
+ const desktopEnabled = useSelector(getIsDesktopEnabled);
+ const setDesktopEnabled = (val) => dispatch(setDesktopEnabledAction(val));
+ const restart = () => dispatch(browser.runtime.reload());
+
+ const onClick = async () => {
+ if (desktopEnabled) {
+ await disableDesktop();
+ setDesktopEnabled(false);
+ return;
+ }
+
+ showLoader();
+ const testResult = await testDesktopConnection();
+ hideLoader();
+
+ if ([PairingKeyStatus.NO_MATCH].includes(testResult.pairingKeyCheck)) {
+ history.push(DESKTOP_ERROR_PAIRING_KEY_NOT_MATCH_ROUTE);
+ return;
+ }
+
+ if (!testResult.isConnected) {
+ history.push(DESKTOP_ERROR_NOT_FOUND_ROUTE);
+ return;
+ }
+
+ if (!testResult.versionCheck?.isExtensionVersionValid) {
+ history.push(DESKTOP_ERROR_EXTENSION_OUTDATED_ROUTE);
+ return;
+ }
+
+ if (!testResult.versionCheck?.isDesktopVersionValid) {
+ history.push(DESKTOP_ERROR_DESKTOP_OUTDATED_ROUTE);
+ return;
+ }
+
+ if (process.env.SKIP_OTP_PAIRING_FLOW) {
+ showLoader();
+ setDesktopEnabled(true);
+
+ // Wait for new state to persist before restarting
+ setTimeout(() => {
+ restart();
+ }, SKIP_PAIRING_RESTART_DELAY);
+ return;
+ }
+
+ history.push(DESKTOP_PAIRING_ROUTE);
+ };
+
+ return (
+
+ );
+}
diff --git a/ui/components/app/desktop-enable-button/desktop-enable-button.component.test.js b/ui/components/app/desktop-enable-button/desktop-enable-button.component.test.js
new file mode 100644
index 000000000..a62f76555
--- /dev/null
+++ b/ui/components/app/desktop-enable-button/desktop-enable-button.component.test.js
@@ -0,0 +1,232 @@
+import React from 'react';
+import { act, fireEvent, screen, waitFor } from '@testing-library/react';
+import configureMockStore from 'redux-mock-store';
+import reactRouterDom from 'react-router-dom';
+import thunk from 'redux-thunk';
+import { PairingKeyStatus } from '@metamask/desktop/dist/types';
+import mockState from '../../../../test/data/mock-state.json';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import {
+ DESKTOP_ERROR_ROUTE,
+ DESKTOP_PAIRING_ROUTE,
+} from '../../../helpers/constants/routes';
+import actions from '../../../store/actions';
+import { EXTENSION_ERROR_PAGE_TYPES } from '../../../../shared/constants/desktop';
+import DesktopEnableButton from './desktop-enable-button.component';
+
+const mockHideLoadingIndication = jest.fn();
+const mockShowLoadingIndication = jest.fn();
+const mockSetDesktopEnabled = jest.fn();
+
+jest.mock('../../../store/actions', () => {
+ return {
+ hideLoadingIndication: () => mockHideLoadingIndication,
+ showLoadingIndication: () => mockShowLoadingIndication,
+ setDesktopEnabled: () => mockSetDesktopEnabled,
+ testDesktopConnection: jest.fn(),
+ disableDesktop: jest.fn(),
+ };
+});
+
+const mockedActions = actions;
+
+describe('Desktop Enable Button', () => {
+ const mockHistoryPush = jest.fn();
+
+ beforeEach(() => {
+ jest
+ .spyOn(reactRouterDom, 'useHistory')
+ .mockImplementation()
+ .mockReturnValue({ push: mockHistoryPush });
+ });
+
+ afterEach(() => {
+ jest.clearAllMocks();
+ });
+
+ const store = configureMockStore([thunk])(mockState);
+
+ it('should match snapshot', () => {
+ const { container } = renderWithProvider(
- 
{
expect(state.pendingTokens).toStrictEqual({});
});
+ it('disables desktop', () => {
+ const enabledMetaMaskState = {
+ desktopEnabled: true,
+ };
+ const enabledDesktopMetaMask = reduceMetamask(enabledMetaMaskState, {
+ type: actionConstants.FORCE_DISABLE_DESKTOP,
+ });
+
+ expect(enabledDesktopMetaMask.desktopEnabled).toStrictEqual(false);
+ });
+
describe('metamask state selectors', () => {
describe('getBlockGasLimit', () => {
it('should return the current block gas limit', () => {
diff --git a/ui/helpers/constants/routes.ts b/ui/helpers/constants/routes.ts
index 3debe35e7..e887ee395 100644
--- a/ui/helpers/constants/routes.ts
+++ b/ui/helpers/constants/routes.ts
@@ -85,6 +85,10 @@ const SIGNATURE_REQUEST_PATH = '/signature-request';
const DECRYPT_MESSAGE_REQUEST_PATH = '/decrypt-message-request';
const ENCRYPTION_PUBLIC_KEY_REQUEST_PATH = '/encryption-public-key-request';
const CONFIRMATION_V_NEXT_ROUTE = '/confirmation';
+///: BEGIN:ONLY_INCLUDE_IN(desktop)
+const DESKTOP_ERROR_ROUTE = '/desktop/error';
+const DESKTOP_PAIRING_ROUTE = '/desktop-pairing';
+///: END:ONLY_INCLUDE_IN
// Used to pull a convenient name for analytics tracking events. The key must
// be react-router ready path, and can include params such as :id for popup windows
@@ -242,4 +246,8 @@ export {
INITIALIZE_EXPERIMENTAL_AREA,
ONBOARDING_EXPERIMENTAL_AREA,
///: END:ONLY_INCLUDE_IN
+ ///: BEGIN:ONLY_INCLUDE_IN(desktop)
+ DESKTOP_ERROR_ROUTE,
+ DESKTOP_PAIRING_ROUTE,
+ ///: END:ONLY_INCLUDE_IN
};
diff --git a/ui/hooks/desktopHooks.js b/ui/hooks/desktopHooks.js
new file mode 100644
index 000000000..02ccae535
--- /dev/null
+++ b/ui/hooks/desktopHooks.js
@@ -0,0 +1,14 @@
+import { DESKTOP_HOOK_TYPES } from '@metamask/desktop/dist/constants';
+import { DESKTOP_ERROR_ROUTE } from '../helpers/constants/routes';
+import { EXTENSION_ERROR_PAGE_TYPES } from '../../shared/constants/desktop';
+
+const registerOnDesktopDisconnect = (history) => {
+ return (request) => {
+ if (request.type === DESKTOP_HOOK_TYPES.DISCONNECT) {
+ const connectionLostRoute = `${DESKTOP_ERROR_ROUTE}/${EXTENSION_ERROR_PAGE_TYPES.CONNECTION_LOST}`;
+ history.push(connectionLostRoute);
+ }
+ };
+};
+
+export { registerOnDesktopDisconnect };
diff --git a/ui/hooks/desktopHooks.test.js b/ui/hooks/desktopHooks.test.js
new file mode 100644
index 000000000..3497661de
--- /dev/null
+++ b/ui/hooks/desktopHooks.test.js
@@ -0,0 +1,27 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { DESKTOP_HOOK_TYPES } from '@metamask/desktop/dist/constants';
+import { EXTENSION_ERROR_PAGE_TYPES } from '../../shared/constants/desktop';
+import { DESKTOP_ERROR_ROUTE } from '../helpers/constants/routes';
+import { registerOnDesktopDisconnect } from './desktopHooks';
+
+describe('desktopHooks', () => {
+ describe('registerOnDesktopDisconnect', () => {
+ it('push desktop connection lost route when request type is disconnect', () => {
+ const mockHistoryPush = jest.fn();
+
+ const { result } = renderHook(() =>
+ registerOnDesktopDisconnect({ push: mockHistoryPush }),
+ );
+
+ expect(result).toBeInstanceOf(Object);
+ expect(mockHistoryPush).not.toHaveBeenCalled();
+
+ result.current({ type: DESKTOP_HOOK_TYPES.DISCONNECT });
+
+ expect(mockHistoryPush).toHaveBeenCalledTimes(1);
+ expect(mockHistoryPush).toHaveBeenCalledWith(
+ `${DESKTOP_ERROR_ROUTE}/${EXTENSION_ERROR_PAGE_TYPES.CONNECTION_LOST}`,
+ );
+ });
+ });
+});
diff --git a/ui/index.js b/ui/index.js
index 2422b1fb4..5b3628fb8 100644
--- a/ui/index.js
+++ b/ui/index.js
@@ -53,15 +53,42 @@ export const updateBackgroundConnection = (backgroundConnection) => {
export default function launchMetamaskUi(opts, cb) {
const { backgroundConnection } = opts;
+ ///: BEGIN:ONLY_INCLUDE_IN(desktop)
+ let desktopEnabled = false;
+
+ backgroundConnection.getDesktopEnabled(function (err, result) {
+ if (err) {
+ return;
+ }
+
+ desktopEnabled = result;
+ });
+ ///: END:ONLY_INCLUDE_IN
+
// check if we are unlocked first
backgroundConnection.getState(function (err, metamaskState) {
if (err) {
- cb(err, metamaskState);
+ cb(
+ err,
+ {
+ ...metamaskState,
+ ///: BEGIN:ONLY_INCLUDE_IN(desktop)
+ desktopEnabled,
+ ///: END:ONLY_INCLUDE_IN
+ },
+ backgroundConnection,
+ );
return;
}
startApp(metamaskState, backgroundConnection, opts).then((store) => {
setupDebuggingHelpers(store);
- cb(null, store);
+ cb(
+ null,
+ store,
+ ///: BEGIN:ONLY_INCLUDE_IN(desktop)
+ backgroundConnection,
+ ///: END:ONLY_INCLUDE_IN
+ );
});
});
}
diff --git a/ui/pages/desktop-error/__snapshots__/desktop-error.test.js.snap b/ui/pages/desktop-error/__snapshots__/desktop-error.test.js.snap
new file mode 100644
index 000000000..1da259ec2
--- /dev/null
+++ b/ui/pages/desktop-error/__snapshots__/desktop-error.test.js.snap
@@ -0,0 +1,373 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Desktop Error page should render connection lost page 1`] = `
+
+ ,
+ store,
+ [`/${EXTENSION_ERROR_PAGE_TYPES.NOT_FOUND}`],
+ );
+
+ expect(container).toMatchSnapshot();
+ });
+
+ it('should render connection lost page', async () => {
+ const store = configureStore(mockState);
+ const { container } = renderWithProvider(
+
+ ,
+ store,
+ [`/${EXTENSION_ERROR_PAGE_TYPES.CONNECTION_LOST}`],
+ );
+
+ expect(container).toMatchSnapshot();
+ });
+
+ it('should render desktop app outdated page', async () => {
+ const store = configureStore(mockState);
+ const { container } = renderWithProvider(
+
+ ,
+ store,
+ [`/${EXTENSION_ERROR_PAGE_TYPES.DESKTOP_OUTDATED}`],
+ );
+
+ expect(container).toMatchSnapshot();
+ });
+
+ it('should render extension outdated page', async () => {
+ const store = configureStore(mockState);
+ const { container } = renderWithProvider(
+
+ ,
+ store,
+ [`/${EXTENSION_ERROR_PAGE_TYPES.EXTENSION_OUTDATED}`],
+ );
+
+ expect(container).toMatchSnapshot();
+ });
+
+ it('should render critical error page', async () => {
+ const store = configureStore(mockState);
+ const { container } = renderWithProvider(
+
+ ,
+ store,
+ [`/${EXTENSION_ERROR_PAGE_TYPES.CRITICAL_ERROR}`],
+ );
+
+ expect(container).toMatchSnapshot();
+ });
+
+ it('should render route not found page', async () => {
+ const store = configureStore(mockState);
+ const { container } = renderWithProvider(
+
+ ,
+ store,
+ [`/${EXTENSION_ERROR_PAGE_TYPES.ROUTE_NOT_FOUND}`],
+ );
+
+ expect(container).toMatchSnapshot();
+ });
+
+ it('should render pairing key not match page', async () => {
+ const store = configureStore(mockState);
+ const { container } = renderWithProvider(
+
+ ,
+ store,
+ [`/${EXTENSION_ERROR_PAGE_TYPES.PAIRING_KEY_NOT_MATCH}`],
+ );
+
+ expect(container).toMatchSnapshot();
+ });
+
+ it('should render default error page', async () => {
+ const store = configureStore(mockState);
+ const { container } = renderWithProvider(
+
+ ,
+ store,
+ [`/unknown-error-type`],
+ );
+
+ expect(container).toMatchSnapshot();
+ });
+});
diff --git a/ui/pages/desktop-error/index.js b/ui/pages/desktop-error/index.js
new file mode 100644
index 000000000..7975f86a8
--- /dev/null
+++ b/ui/pages/desktop-error/index.js
@@ -0,0 +1 @@
+export { default } from './desktop-error.container';
diff --git a/ui/pages/desktop-error/render-desktop-error.js b/ui/pages/desktop-error/render-desktop-error.js
new file mode 100644
index 000000000..5e849ccc2
--- /dev/null
+++ b/ui/pages/desktop-error/render-desktop-error.js
@@ -0,0 +1,237 @@
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+
+import IconTimes from '../../components/ui/icon/icon-times';
+import { EXTENSION_ERROR_PAGE_TYPES } from '../../../shared/constants/desktop';
+import {
+ TypographyVariant,
+ DISPLAY,
+ FLEX_DIRECTION,
+ AlignItems,
+ TEXT_ALIGN,
+ FONT_WEIGHT,
+} from '../../helpers/constants/design-system';
+import { DEFAULT_ROUTE, SETTINGS_ROUTE } from '../../helpers/constants/routes';
+import Typography from '../../components/ui/typography';
+import Button from '../../components/ui/button';
+import Box from '../../components/ui/box';
+import { openCustomProtocol } from '../../../shared/lib/deep-linking';
+
+export function renderDesktopError({
+ type,
+ t,
+ isHtmlError,
+ history,
+ disableDesktop,
+ downloadExtension,
+ downloadDesktopApp,
+ restartExtension,
+ openOrDownloadDesktopApp,
+}) {
+ let content;
+
+ const noop = () => {
+ // do nothing
+ };
+
+ const returnExtensionHome = () => {
+ history?.push(DEFAULT_ROUTE);
+ };
+
+ const navigateSettings = () => {
+ history?.push(SETTINGS_ROUTE);
+ };
+
+ const renderHeader = (text) => {
+ return (
+
+ {text}
+
+ );
+ };
+
+ const renderDescription = (text) => {
+ return (
+ {text}
+ );
+ };
+
+ const renderCTA = (id, text, onClick) => {
+ return (
+
+
+
+ );
+ };
+
+ const openSettingsOrDownloadMMD = () => {
+ openCustomProtocol('metamask-desktop://pair').catch(() => {
+ window.open('https://metamask.io/download.html', '_blank').focus();
+ });
+ };
+
+ switch (type) {
+ case EXTENSION_ERROR_PAGE_TYPES.NOT_FOUND:
+ content = (
+ <>
+ {renderHeader(t('desktopNotFoundErrorTitle'))}
+ {renderDescription(t('desktopNotFoundErrorDescription1'))}
+ {renderDescription(t('desktopNotFoundErrorDescription2'))}
+ {renderCTA(
+ 'desktop-error-button-download-mmd',
+ t('desktopNotFoundErrorCTA'),
+ downloadDesktopApp,
+ )}
+
+ );
+ break;
+
+ case EXTENSION_ERROR_PAGE_TYPES.CONNECTION_LOST:
+ content = (
+ <>
+ {renderHeader(t('desktopConnectionLostErrorTitle'))}
+ {renderDescription(t('desktopConnectionLostErrorDescription'))}
+ {renderCTA(
+ 'desktop-error-button-open-or-download-mmd',
+ t('desktopOpenOrDownloadCTA'),
+ openOrDownloadDesktopApp,
+ )}
+ {renderCTA(
+ 'desktop-error-button-disable-mmd',
+ t('desktopDisableErrorCTA'),
+ disableDesktop,
+ )}
+
+ );
+ break;
+
+ case EXTENSION_ERROR_PAGE_TYPES.DESKTOP_OUTDATED:
+ content = (
+ <>
+ {renderHeader(t('desktopOutdatedErrorTitle'))}
+ {renderDescription(t('desktopOutdatedErrorDescription'))}
+ {renderCTA(
+ 'desktop-error-button-update-mmd',
+ t('desktopOutdatedErrorCTA'),
+ downloadDesktopApp,
+ )}
+
+ );
+ break;
+
+ case EXTENSION_ERROR_PAGE_TYPES.EXTENSION_OUTDATED:
+ content = (
+ <>
+ {renderHeader(t('desktopOutdatedExtensionErrorTitle'))}
+ {renderDescription(t('desktopOutdatedExtensionErrorDescription'))}
+ {renderCTA(
+ 'desktop-error-button-update-extension',
+ t('desktopOutdatedExtensionErrorCTA'),
+ downloadExtension,
+ )}
+
+ );
+ break;
+
+ case EXTENSION_ERROR_PAGE_TYPES.CRITICAL_ERROR:
+ content = (
+ <>
+ {renderHeader(t('desktopConnectionCriticalErrorTitle'))}
+ {renderDescription(t('desktopConnectionCriticalErrorDescription'))}
+ {renderCTA(
+ 'desktop-error-button-restart-mm',
+ t('desktopErrorRestartMMCTA'),
+ restartExtension,
+ )}
+ {renderCTA(
+ 'desktop-error-button-disable-mmd',
+ t('desktopDisableErrorCTA'),
+ disableDesktop,
+ )}
+
+ );
+ break;
+
+ ///: BEGIN:ONLY_INCLUDE_IN(desktop)
+ // This route only exists on the Desktop App
+ case EXTENSION_ERROR_PAGE_TYPES.ROUTE_NOT_FOUND:
+ content = (
+ <>
+ {renderHeader(t('desktopRouteNotFoundErrorTitle'))}
+ {renderDescription(t('desktopRouteNotFoundErrorDescription'))}
+ {renderCTA(
+ 'desktop-error-button-navigate-settings',
+ t('desktopErrorNavigateSettingsCTA'),
+ navigateSettings,
+ )}
+
+ );
+ break;
+ ///: END:ONLY_INCLUDE_IN
+
+ case EXTENSION_ERROR_PAGE_TYPES.PAIRING_KEY_NOT_MATCH:
+ content = (
+ <>
+ {renderHeader(t('desktopPairedWarningTitle'))}
+ {renderDescription(t('desktopPairedWarningDescription'))}
+
+ {renderCTA(
+ 'desktop-error-button-navigate-settings',
+ t('desktopErrorNavigateSettingsCTA'),
+ navigateSettings,
+ )}
+
+ );
+ break;
+
+ default:
+ content = (
+ <>
+ {renderHeader(t('desktopUnexpectedErrorTitle'))}
+ {renderDescription(t('desktopUnexpectedErrorDescription'))}
+ {renderCTA(
+ 'desktop-error-button-return-mm-home',
+ t('desktopUnexpectedErrorCTA'),
+ returnExtensionHome,
+ )}
+
+ );
+ break;
+ }
+
+ const errorContent = (
+
+
+ );
+
+ if (isHtmlError) {
+ return ReactDOMServer.renderToStaticMarkup(errorContent);
+ }
+
+ return errorContent;
+}
diff --git a/ui/pages/desktop-pairing/__snapshots__/desktop-pairing.test.js.snap b/ui/pages/desktop-pairing/__snapshots__/desktop-pairing.test.js.snap
new file mode 100644
index 000000000..dcead5fb5
--- /dev/null
+++ b/ui/pages/desktop-pairing/__snapshots__/desktop-pairing.test.js.snap
@@ -0,0 +1,172 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Desktop Pairing page should render otp component 1`] = `
+
);
@@ -295,6 +345,19 @@ export default class Routes extends Component {
hideAppHeader() {
const { location } = this.props;
+ ///: BEGIN:ONLY_INCLUDE_IN(desktop)
+ const isDesktopConnectionLostScreen = Boolean(
+ matchPath(location.pathname, {
+ path: `${DESKTOP_ERROR_ROUTE}/${EXTENSION_ERROR_PAGE_TYPES.CONNECTION_LOST}`,
+ exact: true,
+ }),
+ );
+
+ if (isDesktopConnectionLostScreen) {
+ return true;
+ }
+ ///: END:ONLY_INCLUDE_IN
+
const isInitializing = Boolean(
matchPath(location.pathname, {
path: ONBOARDING_ROUTE,
diff --git a/ui/pages/settings/advanced-tab/advanced-tab.component.js b/ui/pages/settings/advanced-tab/advanced-tab.component.js
index cf42eb77c..4ebd7fab2 100644
--- a/ui/pages/settings/advanced-tab/advanced-tab.component.js
+++ b/ui/pages/settings/advanced-tab/advanced-tab.component.js
@@ -60,6 +60,9 @@ export default class AdvancedTab extends PureComponent {
disabledRpcMethodPreferences: PropTypes.shape({
eth_sign: PropTypes.bool.isRequired,
}),
+ ///: BEGIN:ONLY_INCLUDE_IN(desktop)
+ desktopEnabled: PropTypes.bool,
+ ///: END:ONLY_INCLUDE_IN
};
state = {
@@ -466,8 +469,17 @@ export default class AdvancedTab extends PureComponent {
ledgerTransportType,
setLedgerTransportPreference,
userHasALedgerAccount,
+ ///: BEGIN:ONLY_INCLUDE_IN(desktop)
+ desktopEnabled,
+ ///: END:ONLY_INCLUDE_IN
} = this.props;
+ ///: BEGIN:ONLY_INCLUDE_IN(desktop)
+ if (desktopEnabled) {
+ return null;
+ }
+ ///: END:ONLY_INCLUDE_IN
+
const LEDGER_TRANSPORT_NAMES = {
LIVE: t('ledgerLive'),
WEBHID: t('webhid'),
@@ -497,7 +509,11 @@ export default class AdvancedTab extends PureComponent {
: LEDGER_TRANSPORT_NAMES.U2F;
return (
-
{
expect(state.pendingTokens).toStrictEqual({});
});
+ it('disables desktop', () => {
+ const enabledMetaMaskState = {
+ desktopEnabled: true,
+ };
+ const enabledDesktopMetaMask = reduceMetamask(enabledMetaMaskState, {
+ type: actionConstants.FORCE_DISABLE_DESKTOP,
+ });
+
+ expect(enabledDesktopMetaMask.desktopEnabled).toStrictEqual(false);
+ });
+
describe('metamask state selectors', () => {
describe('getBlockGasLimit', () => {
it('should return the current block gas limit', () => {
diff --git a/ui/helpers/constants/routes.ts b/ui/helpers/constants/routes.ts
index 3debe35e7..e887ee395 100644
--- a/ui/helpers/constants/routes.ts
+++ b/ui/helpers/constants/routes.ts
@@ -85,6 +85,10 @@ const SIGNATURE_REQUEST_PATH = '/signature-request';
const DECRYPT_MESSAGE_REQUEST_PATH = '/decrypt-message-request';
const ENCRYPTION_PUBLIC_KEY_REQUEST_PATH = '/encryption-public-key-request';
const CONFIRMATION_V_NEXT_ROUTE = '/confirmation';
+///: BEGIN:ONLY_INCLUDE_IN(desktop)
+const DESKTOP_ERROR_ROUTE = '/desktop/error';
+const DESKTOP_PAIRING_ROUTE = '/desktop-pairing';
+///: END:ONLY_INCLUDE_IN
// Used to pull a convenient name for analytics tracking events. The key must
// be react-router ready path, and can include params such as :id for popup windows
@@ -242,4 +246,8 @@ export {
INITIALIZE_EXPERIMENTAL_AREA,
ONBOARDING_EXPERIMENTAL_AREA,
///: END:ONLY_INCLUDE_IN
+ ///: BEGIN:ONLY_INCLUDE_IN(desktop)
+ DESKTOP_ERROR_ROUTE,
+ DESKTOP_PAIRING_ROUTE,
+ ///: END:ONLY_INCLUDE_IN
};
diff --git a/ui/hooks/desktopHooks.js b/ui/hooks/desktopHooks.js
new file mode 100644
index 000000000..02ccae535
--- /dev/null
+++ b/ui/hooks/desktopHooks.js
@@ -0,0 +1,14 @@
+import { DESKTOP_HOOK_TYPES } from '@metamask/desktop/dist/constants';
+import { DESKTOP_ERROR_ROUTE } from '../helpers/constants/routes';
+import { EXTENSION_ERROR_PAGE_TYPES } from '../../shared/constants/desktop';
+
+const registerOnDesktopDisconnect = (history) => {
+ return (request) => {
+ if (request.type === DESKTOP_HOOK_TYPES.DISCONNECT) {
+ const connectionLostRoute = `${DESKTOP_ERROR_ROUTE}/${EXTENSION_ERROR_PAGE_TYPES.CONNECTION_LOST}`;
+ history.push(connectionLostRoute);
+ }
+ };
+};
+
+export { registerOnDesktopDisconnect };
diff --git a/ui/hooks/desktopHooks.test.js b/ui/hooks/desktopHooks.test.js
new file mode 100644
index 000000000..3497661de
--- /dev/null
+++ b/ui/hooks/desktopHooks.test.js
@@ -0,0 +1,27 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { DESKTOP_HOOK_TYPES } from '@metamask/desktop/dist/constants';
+import { EXTENSION_ERROR_PAGE_TYPES } from '../../shared/constants/desktop';
+import { DESKTOP_ERROR_ROUTE } from '../helpers/constants/routes';
+import { registerOnDesktopDisconnect } from './desktopHooks';
+
+describe('desktopHooks', () => {
+ describe('registerOnDesktopDisconnect', () => {
+ it('push desktop connection lost route when request type is disconnect', () => {
+ const mockHistoryPush = jest.fn();
+
+ const { result } = renderHook(() =>
+ registerOnDesktopDisconnect({ push: mockHistoryPush }),
+ );
+
+ expect(result).toBeInstanceOf(Object);
+ expect(mockHistoryPush).not.toHaveBeenCalled();
+
+ result.current({ type: DESKTOP_HOOK_TYPES.DISCONNECT });
+
+ expect(mockHistoryPush).toHaveBeenCalledTimes(1);
+ expect(mockHistoryPush).toHaveBeenCalledWith(
+ `${DESKTOP_ERROR_ROUTE}/${EXTENSION_ERROR_PAGE_TYPES.CONNECTION_LOST}`,
+ );
+ });
+ });
+});
diff --git a/ui/index.js b/ui/index.js
index 2422b1fb4..5b3628fb8 100644
--- a/ui/index.js
+++ b/ui/index.js
@@ -53,15 +53,42 @@ export const updateBackgroundConnection = (backgroundConnection) => {
export default function launchMetamaskUi(opts, cb) {
const { backgroundConnection } = opts;
+ ///: BEGIN:ONLY_INCLUDE_IN(desktop)
+ let desktopEnabled = false;
+
+ backgroundConnection.getDesktopEnabled(function (err, result) {
+ if (err) {
+ return;
+ }
+
+ desktopEnabled = result;
+ });
+ ///: END:ONLY_INCLUDE_IN
+
// check if we are unlocked first
backgroundConnection.getState(function (err, metamaskState) {
if (err) {
- cb(err, metamaskState);
+ cb(
+ err,
+ {
+ ...metamaskState,
+ ///: BEGIN:ONLY_INCLUDE_IN(desktop)
+ desktopEnabled,
+ ///: END:ONLY_INCLUDE_IN
+ },
+ backgroundConnection,
+ );
return;
}
startApp(metamaskState, backgroundConnection, opts).then((store) => {
setupDebuggingHelpers(store);
- cb(null, store);
+ cb(
+ null,
+ store,
+ ///: BEGIN:ONLY_INCLUDE_IN(desktop)
+ backgroundConnection,
+ ///: END:ONLY_INCLUDE_IN
+ );
});
});
}
diff --git a/ui/pages/desktop-error/__snapshots__/desktop-error.test.js.snap b/ui/pages/desktop-error/__snapshots__/desktop-error.test.js.snap
new file mode 100644
index 000000000..1da259ec2
--- /dev/null
+++ b/ui/pages/desktop-error/__snapshots__/desktop-error.test.js.snap
@@ -0,0 +1,373 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Desktop Error page should render connection lost page 1`] = `
+
+
+`;
+
+exports[`Desktop Error page should render critical error page 1`] = `
+
+
+
++ MetaMask Desktop connection was lost +
++ Please make sure you have the desktop app up and running or disable MetaMask Desktop. +
+
+
+
+
+
+
+
+
+`;
+
+exports[`Desktop Error page should render default error page 1`] = `
+
+
+
++ MetaMask had trouble starting +
++ This error could be intermittent, so try restarting the extension or disable MetaMask Desktop. +
+
+
+
+
+
+
+
+
+`;
+
+exports[`Desktop Error page should render desktop app outdated page 1`] = `
+
+
+
++ Something went wrong... +
++ Check your MetaMask Desktop to restore connection +
+
+
+
+
+
+`;
+
+exports[`Desktop Error page should render extension outdated page 1`] = `
+
+
+
++ MetaMask Desktop is outdated +
++ Your MetaMask desktop app needs to be upgraded. +
+
+
+
+
+
+`;
+
+exports[`Desktop Error page should render not found page 1`] = `
+
+
+
++ MetaMask Extension is outdated +
++ Your MetaMask extension needs to be upgraded. +
+
+
+
+
+
+`;
+
+exports[`Desktop Error page should render pairing key not match page 1`] = `
+
+
+
++ MetaMask Desktop was not found +
++ Please make sure you have the desktop app up and running. +
++ If you have no desktop app installed, please download it on the MetaMask website. +
+
+
+
+
+
+`;
+
+exports[`Desktop Error page should render route not found page 1`] = `
+
+
+
++ MM Desktop is already paired +
++ If you want to start a new pairing, please remove the current connection. +
+ + Go to Settings in MetaMask Desktop + +
+
+
+
+
+`;
diff --git a/ui/pages/desktop-error/desktop-error.component.js b/ui/pages/desktop-error/desktop-error.component.js
new file mode 100644
index 000000000..76042b178
--- /dev/null
+++ b/ui/pages/desktop-error/desktop-error.component.js
@@ -0,0 +1,29 @@
+import { useParams, useHistory } from 'react-router-dom';
+import { useI18nContext } from '../../hooks/useI18nContext';
+import {
+ downloadDesktopApp,
+ downloadExtension,
+ restartExtension,
+} from '../../../shared/lib/error-utils';
+import { DEFAULT_ROUTE } from '../../helpers/constants/routes';
+import { renderDesktopError } from './render-desktop-error';
+
+export default function DesktopError({ forceDisableDesktop }) {
+ const t = useI18nContext();
+ const { errorType } = useParams();
+ const history = useHistory();
+
+ return renderDesktopError({
+ type: errorType,
+ t,
+ isHtmlError: false,
+ history,
+ disableDesktop: () => {
+ forceDisableDesktop();
+ history.push(DEFAULT_ROUTE);
+ },
+ downloadDesktopApp,
+ downloadExtension,
+ restartExtension,
+ });
+}
diff --git a/ui/pages/desktop-error/desktop-error.container.js b/ui/pages/desktop-error/desktop-error.container.js
new file mode 100644
index 000000000..36f6f0fc1
--- /dev/null
+++ b/ui/pages/desktop-error/desktop-error.container.js
@@ -0,0 +1,20 @@
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { withRouter } from 'react-router-dom';
+import { FORCE_DISABLE_DESKTOP } from '../../store/actionConstants';
+import DesktopError from './desktop-error.component';
+
+const mapStateToProps = () => ({});
+
+const mapDispatchToProps = (dispatch) => ({
+ forceDisableDesktop: async () => {
+ dispatch({
+ type: FORCE_DISABLE_DESKTOP,
+ });
+ },
+});
+
+export default compose(
+ withRouter,
+ connect(mapStateToProps, mapDispatchToProps),
+)(DesktopError);
diff --git a/ui/pages/desktop-error/desktop-error.test.js b/ui/pages/desktop-error/desktop-error.test.js
new file mode 100644
index 000000000..8995f5cc3
--- /dev/null
+++ b/ui/pages/desktop-error/desktop-error.test.js
@@ -0,0 +1,127 @@
+import React from 'react';
+import reactRouterDom, { Route } from 'react-router-dom';
+import configureStore from '../../store/store';
+import { renderWithProvider } from '../../../test/jest';
+import mockState from '../../../test/data/mock-state.json';
+import { EXTENSION_ERROR_PAGE_TYPES } from '../../../shared/constants/desktop';
+import DesktopErrorPage from '.';
+
+describe('Desktop Error page', () => {
+ const mockHistoryPush = jest.fn();
+
+ beforeEach(() => {
+ jest
+ .spyOn(reactRouterDom, 'useHistory')
+ .mockImplementation()
+ .mockReturnValue({ push: mockHistoryPush });
+ });
+
+ afterEach(() => {
+ jest.resetAllMocks();
+ jest.clearAllMocks();
+ });
+
+ it('should render not found page', async () => {
+ const store = configureStore(mockState);
+ const { container } = renderWithProvider(
+
+
+
++ desktopRouteNotFoundErrorTitle +
++ desktopRouteNotFoundErrorDescription +
+
+
+
+
+
+`;
diff --git a/ui/pages/desktop-pairing/desktop-pairing.component.js b/ui/pages/desktop-pairing/desktop-pairing.component.js
new file mode 100644
index 000000000..6a5347552
--- /dev/null
+++ b/ui/pages/desktop-pairing/desktop-pairing.component.js
@@ -0,0 +1,190 @@
+import React, { useState, useEffect, useRef, useContext } from 'react';
+import { useHistory } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import Button from '../../components/ui/button';
+import { SECOND } from '../../../shared/constants/time';
+import Typography from '../../components/ui/typography';
+import { I18nContext } from '../../contexts/i18n';
+import IconDesktopPairing from '../../components/ui/icon/icon-desktop-pairing';
+import {
+ TEXT_ALIGN,
+ TypographyVariant,
+ DISPLAY,
+ AlignItems,
+ FLEX_DIRECTION,
+} from '../../helpers/constants/design-system';
+import Box from '../../components/ui/box/box';
+import { useCopyToClipboard } from '../../hooks/useCopyToClipboard';
+import Tooltip from '../../components/ui/tooltip';
+
+export default function DesktopPairingPage({
+ generateOtp,
+ mostRecentOverviewPage,
+ showLoadingIndication,
+ hideLoadingIndication,
+}) {
+ const t = useContext(I18nContext);
+ const history = useHistory();
+ const OTP_DURATION = SECOND * 30;
+ const REFRESH_INTERVAL = SECOND;
+ const time = new Date().getTime();
+
+ const [otp, setOtp] = useState();
+ const [lastOtpTime, setLastOtpTime] = useState(time);
+ const [currentTime, setCurrentTime] = useState(time);
+ const [copied, handleCopy] = useCopyToClipboard();
+ const generateIntervalRef = useRef();
+ const refreshIntervalRef = useRef();
+
+ const updateCurrentTime = () => {
+ setCurrentTime(new Date().getTime());
+ };
+
+ const getExpireDuration = () => {
+ const timeSinceOtp = currentTime - lastOtpTime;
+ const expireDurationMilliseconds = OTP_DURATION - timeSinceOtp;
+
+ const expireDurationSeconds = Math.round(
+ expireDurationMilliseconds / SECOND,
+ );
+
+ return expireDurationSeconds;
+ };
+
+ useEffect(() => {
+ const generate = async () => {
+ setLastOtpTime(new Date().getTime());
+ const OTP = await generateOtp();
+ setOtp(OTP);
+ };
+
+ generate();
+ updateCurrentTime();
+
+ generateIntervalRef.current = setInterval(() => generate(), OTP_DURATION);
+ refreshIntervalRef.current = setInterval(
+ () => updateCurrentTime(),
+ REFRESH_INTERVAL,
+ );
+
+ return function cleanup() {
+ clearInterval(generateIntervalRef.current);
+ clearInterval(refreshIntervalRef.current);
+ };
+ }, [OTP_DURATION, REFRESH_INTERVAL, generateOtp]);
+
+ const renderIcon = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ Pair with Desktop
+
+
+ Open your MetaMask Desktop and type this code
+
+
+
+
+
+
+
+
+
+
+
+
+ + 123456 +
++ + + Code expires in + + 30 + + seconds + + +
+
+ If the pairing is successful, extension will restart and you'll have to re-enter your password.
+
+
+
+
+
+ );
+ };
+
+ const goBack = () => {
+ history?.push(mostRecentOverviewPage);
+ };
+
+ const renderContent = () => {
+ if (!otp) {
+ showLoadingIndication();
+ return null;
+ }
+
+ hideLoadingIndication();
+
+ return (
+ {
+ handleCopy(otp);
+ }}
+ data-testid="desktop-pairing-otp-content"
+ >
+
+
+
+ {otp}
+
+
+
+
+
+ {t('desktopPairingExpireMessage', [
+
+ {getExpireDuration()}
+ ,
+ ])}
+
+
+ );
+ };
+
+ const renderFooter = () => {
+ return (
+
+ {t('desktopPageDescription')}
+
+
+
+
+ );
+ };
+
+ return (
+
+
+ );
+}
+
+DesktopPairingPage.propTypes = {
+ mostRecentOverviewPage: PropTypes.string,
+ showLoadingIndication: PropTypes.func,
+ hideLoadingIndication: PropTypes.func,
+ generateOtp: PropTypes.func,
+};
diff --git a/ui/pages/desktop-pairing/desktop-pairing.container.js b/ui/pages/desktop-pairing/desktop-pairing.container.js
new file mode 100644
index 000000000..734a074b0
--- /dev/null
+++ b/ui/pages/desktop-pairing/desktop-pairing.container.js
@@ -0,0 +1,24 @@
+import { connect } from 'react-redux';
+import {
+ generateOtp,
+ hideLoadingIndication,
+ showLoadingIndication,
+} from '../../store/actions';
+import { getMostRecentOverviewPage } from '../../ducks/history/history';
+import DesktopPairingPage from './desktop-pairing.component';
+
+const mapDispatchToProps = (dispatch) => {
+ return {
+ generateOtp: () => generateOtp(),
+ showLoadingIndication: () => dispatch(showLoadingIndication()),
+ hideLoadingIndication: () => dispatch(hideLoadingIndication()),
+ };
+};
+
+const mapStateToProps = (state) => {
+ return {
+ mostRecentOverviewPage: getMostRecentOverviewPage(state),
+ };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(DesktopPairingPage);
diff --git a/ui/pages/desktop-pairing/desktop-pairing.test.js b/ui/pages/desktop-pairing/desktop-pairing.test.js
new file mode 100644
index 000000000..7cdf9f919
--- /dev/null
+++ b/ui/pages/desktop-pairing/desktop-pairing.test.js
@@ -0,0 +1,110 @@
+import React from 'react';
+import reactRouterDom from 'react-router-dom';
+import { waitFor, act, screen } from '@testing-library/react';
+import actions from '../../store/actions';
+import configureStore from '../../store/store';
+import { renderWithProvider } from '../../../test/jest';
+import mockState from '../../../test/data/mock-state.json';
+import { SECOND } from '../../../shared/constants/time';
+import DesktopPairingPage from '.';
+
+const mockHideLoadingIndication = jest.fn();
+const mockShowLoadingIndication = jest.fn();
+
+jest.mock('../../store/actions', () => {
+ return {
+ hideLoadingIndication: () => mockHideLoadingIndication,
+ showLoadingIndication: () => mockShowLoadingIndication,
+ generateOtp: jest.fn(),
+ };
+});
+
+const mockedActions = actions;
+
+describe('Desktop Pairing page', () => {
+ const mockHistoryPush = jest.fn();
+
+ function flushPromises() {
+ // Wait for promises running in the non-async timer callback to complete.
+ // From https://github.com/facebook/jest/issues/2157#issuecomment-897935688
+ return new Promise(jest.requireActual('timers').setImmediate);
+ }
+
+ beforeEach(() => {
+ jest
+ .spyOn(reactRouterDom, 'useHistory')
+ .mockImplementation()
+ .mockReturnValue({ push: mockHistoryPush });
+ });
+
+ afterEach(() => {
+ jest.resetAllMocks();
+ jest.clearAllMocks();
+ });
+
+ it('should render otp component', async () => {
+ const otp = '123456';
+ mockedActions.generateOtp.mockResolvedValue(otp);
+
+ const store = configureStore(mockState);
+ let container = null;
+
+ act(() => {
+ container = renderWithProvider(
+ {renderIcon()}
+
+ {t('desktopPageTitle')}
+
+ {t('desktopPageSubTitle')}
+
+ {renderContent()}
+ {renderFooter()}
+
+
{t('preferredLedgerConnectionType')}
diff --git a/ui/pages/settings/advanced-tab/advanced-tab.component.test.js b/ui/pages/settings/advanced-tab/advanced-tab.component.test.js
index 6329043bb..c5f52a12d 100644
--- a/ui/pages/settings/advanced-tab/advanced-tab.component.test.js
+++ b/ui/pages/settings/advanced-tab/advanced-tab.component.test.js
@@ -54,4 +54,21 @@ describe('AdvancedTab Component', () => {
expect(mockSetShowTestNetworks).toHaveBeenCalled();
});
+
+ it('should not render ledger live control with desktop pairing enabled', () => {
+ const mockStoreWithDesktopEnabled = configureMockStore([thunk])({
+ ...mockState,
+ metamask: {
+ ...mockState.metamask,
+ desktopEnabled: true,
+ },
+ });
+
+ const { queryByTestId } = renderWithProvider(
+
+
+`;
diff --git a/ui/pages/settings/experimental-tab/experimental-tab.component.js b/ui/pages/settings/experimental-tab/experimental-tab.component.js
index 2ab4f04bf..b8c43eebf 100644
--- a/ui/pages/settings/experimental-tab/experimental-tab.component.js
+++ b/ui/pages/settings/experimental-tab/experimental-tab.component.js
@@ -13,6 +13,9 @@ import {
TextColor,
TypographyVariant,
} from '../../../helpers/constants/design-system';
+///: BEGIN:ONLY_INCLUDE_IN(desktop)
+import DesktopEnableButton from '../../../components/app/desktop-enable-button';
+///: END:ONLY_INCLUDE_IN
export default class ExperimentalTab extends PureComponent {
static contextTypes = {
@@ -223,12 +226,40 @@ export default class ExperimentalTab extends PureComponent {
);
}
+ ///: BEGIN:ONLY_INCLUDE_IN(desktop)
+ renderDesktopEnableButton() {
+ const { t } = this.context;
+
+ return (
+
+
+
+
+
+
+ Click to run all background processes in the desktop app.
+
+
+
+
+
+
+
+
+
+ );
+ }
+ ///: END:ONLY_INCLUDE_IN
+
render() {
return (
+ {t('desktopEnableButtonDescription')}
+
+
+
+
+
+
{process.env.TRANSACTION_SECURITY_PROVIDER &&
this.renderTransactionSecurityCheckToggle()}
{process.env.NFTS_V1 && this.renderOpenSeaEnabledToggle()}
+ {
+ ///: BEGIN:ONLY_INCLUDE_IN(desktop)
+ this.renderDesktopEnableButton()
+ ///: END:ONLY_INCLUDE_IN
+ }
);
}
diff --git a/ui/pages/settings/experimental-tab/experimental-tab.test.js b/ui/pages/settings/experimental-tab/experimental-tab.test.js
index aec08bb81..c9a2aabb2 100644
--- a/ui/pages/settings/experimental-tab/experimental-tab.test.js
+++ b/ui/pages/settings/experimental-tab/experimental-tab.test.js
@@ -4,10 +4,11 @@ import configureStore from '../../../store/store';
import mockState from '../../../../test/data/mock-state.json';
import ExperimentalTab from './experimental-tab.component';
-const render = () => {
+const render = (overrideMetaMaskState) => {
const store = configureStore({
metamask: {
...mockState.metamask,
+ ...overrideMetaMaskState,
},
});
return renderWithProvider(