From 945dc7f3d59624b853c65eeb995da1cf9f028bc1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ant=C3=B3nio=20Regadas?= Date: Thu, 5 Oct 2023 07:35:19 +0100 Subject: [PATCH] [MMI] updates onboarding flow for MMI (#20905) Updates the amount of steps during onboarding for a MMI user, by reducing the number of screens one has to go through. Meaning the user will go from the Welcome screen to -> Create Password screen -> Pin Extension screen -> Continue to MMI screen. ## Pre-merge author checklist - [x] I've clearly explained: - [x] What problem this PR is solving - [x] How this problem was solved - [x] How reviewers can test my changes - [x] Sufficient automated test coverage has been added ## Pre-merge reviewer checklist - [x] Manual testing (e.g. pull and build branch, run in browser, test code being changed) - [ ] **IF** this PR fixes a bug in the release milestone, add this PR to the release milestone If further QA is required (e.g. new feature, complex testing steps, large refactor), add the `Extension QA Board` label. In this case, a QA Engineer approval will be be required. --------- Co-authored-by: MetaMask Bot Co-authored-by: Brad Decker --- app/_locales/en/messages.json | 30 + app/images/onboarding-mmi-pin-browser.svg | 112 ++++ lavamoat/browserify/mmi/policy.json | 26 +- test/e2e/metamask-ui.spec.js | 2 +- test/e2e/metrics/wallet-created.spec.js | 4 +- test/e2e/nft/remove-erc1155.spec.js | 2 +- test/e2e/nft/send-nft.spec.js | 2 +- test/e2e/nft/view-erc1155-details.spec.js | 2 +- test/e2e/tests/import-flow.spec.js | 2 +- test/e2e/tests/metamask-responsive-ui.spec.js | 2 +- test/e2e/tests/onboarding.spec.js | 4 +- ui/helpers/constants/routes.ts | 2 + .../onboarding-successful/index.scss | 9 + .../onboarding-successful.js | 50 ++ .../onboarding-successful.stories.js | 16 + .../onboarding-successful.test.js | 44 ++ .../pin-mmi-billboard/pin-mmi-billboard.js | 597 ++++++++++++++++++ .../create-password.test.js.snap | 28 +- .../create-password/create-password.js | 157 +++-- ui/pages/onboarding-flow/onboarding-flow.js | 16 + .../pin-extension/pin-extension.js | 172 +++-- ui/pages/onboarding-flow/welcome/welcome.js | 180 ++++-- .../onboarding-flow/welcome/welcome.test.js | 5 + 23 files changed, 1275 insertions(+), 189 deletions(-) create mode 100644 app/images/onboarding-mmi-pin-browser.svg create mode 100644 ui/pages/institutional/onboarding-successful/index.scss create mode 100644 ui/pages/institutional/onboarding-successful/onboarding-successful.js create mode 100644 ui/pages/institutional/onboarding-successful/onboarding-successful.stories.js create mode 100644 ui/pages/institutional/onboarding-successful/onboarding-successful.test.js create mode 100644 ui/pages/institutional/pin-mmi-billboard/pin-mmi-billboard.js diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 403be4d4f3fc..dfa10c9732aa 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -903,6 +903,9 @@ "continue": { "message": "Continue" }, + "continueMmiOnboarding": { + "message": "Continue MetaMask Institutional onboarding" + }, "contract": { "message": "Contract" }, @@ -1616,6 +1619,12 @@ "message": "Explore community-built Snaps to customize your web3 experience", "description": "Banner description displayed on Snaps list page in Settings when less than 6 Snaps is installed." }, + "extensionInsallCompleteDescription": { + "message": "Return to the MetaMask Institutional product onboarding to connect your custodial or self-custodial accounts." + }, + "extensionInsallCompleteTitle": { + "message": "Extension install complete" + }, "externalExtension": { "message": "External extension" }, @@ -2030,6 +2039,12 @@ "install": { "message": "Install" }, + "installExtension": { + "message": "Install extension" + }, + "installExtensionDescription": { + "message": "The institution-compliant version of the world's leading web3 wallet, MetaMask." + }, "installOrigin": { "message": "Install origin" }, @@ -2394,6 +2409,9 @@ "mmiNewNFTDetectedInNFTsTabMessage": { "message": "Let MetaMask Institutional automatically detect and display NFTs in your wallet." }, + "mmiPasswordSetupDetails": { + "message": "This password will unlock your MetaMask Institutional extension only." + }, "more": { "message": "more" }, @@ -3151,6 +3169,9 @@ "onboardingPinExtensionTitle": { "message": "Your MetaMask install is complete!" }, + "onboardingPinMmiExtensionLabel": { + "message": "Pin MetaMask Institutional" + }, "onboardingUsePhishingDetectionDescription": { "message": "Phishing detection alerts rely on communication with $1. jsDeliver will have access to your IP address. View $2.", "description": "The $1 is the word 'jsDeliver', from key 'jsDeliver' and $2 is the words Privacy Policy from key 'privacyMsg', both separated here so that it can be wrapped as a link" @@ -3217,6 +3238,9 @@ "password": { "message": "Password" }, + "passwordMmiTermsWarning": { + "message": "I understand that MetaMask Institutional cannot recover this password for me. $1" + }, "passwordNotLongEnough": { "message": "Password not long enough" }, @@ -3444,6 +3468,12 @@ "personalAddressDetected": { "message": "Personal address detected. Input the token contract address." }, + "pinExtensionDescription": { + "message": "Navigate to the extension menu and pin MetaMask Institutional for seamless access." + }, + "pinExtensionTitle": { + "message": "Pin extension" + }, "pleaseConfirm": { "message": "Please confirm" }, diff --git a/app/images/onboarding-mmi-pin-browser.svg b/app/images/onboarding-mmi-pin-browser.svg new file mode 100644 index 000000000000..93ca2b06b256 --- /dev/null +++ b/app/images/onboarding-mmi-pin-browser.svg @@ -0,0 +1,112 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/lavamoat/browserify/mmi/policy.json b/lavamoat/browserify/mmi/policy.json index 98c26279a5b0..5881b79a589f 100644 --- a/lavamoat/browserify/mmi/policy.json +++ b/lavamoat/browserify/mmi/policy.json @@ -4984,32 +4984,8 @@ }, "react-responsive-carousel": { "globals": { - "HTMLElement": true, "addEventListener": true, - "clearTimeout": true, - "console.warn": true, - "document": true, - "getComputedStyle": true, - "removeEventListener": true, - "setTimeout": true - }, - "packages": { - "classnames": true, - "react": true, - "react-dom": true, - "react-responsive-carousel>react-easy-swipe": true - } - }, - "react-responsive-carousel>react-easy-swipe": { - "globals": { - "addEventListener": true, - "define": true, - "document.addEventListener": true, - "document.removeEventListener": true - }, - "packages": { - "prop-types": true, - "react": true + "removeEventListener": true } }, "react-router-dom": { diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js index 86964698f907..a562fddf5bac 100644 --- a/test/e2e/metamask-ui.spec.js +++ b/test/e2e/metamask-ui.spec.js @@ -17,7 +17,7 @@ const Ganache = require('./ganache'); const ganacheServer = new Ganache(); const dappPort = 8080; -describe('MetaMask', function () { +describe('MetaMask @no-mmi', function () { let driver; let dappServer; let tokenAddress; diff --git a/test/e2e/metrics/wallet-created.spec.js b/test/e2e/metrics/wallet-created.spec.js index 17152df356fa..7f9979fd4086 100644 --- a/test/e2e/metrics/wallet-created.spec.js +++ b/test/e2e/metrics/wallet-created.spec.js @@ -48,8 +48,8 @@ async function mockSegment(mockServer) { ]; } -describe('Wallet Created Events', function () { - it('are sent when onboarding user who chooses to opt in metrics @no-mmi', async function () { +describe('Wallet Created Events @no-mmi', function () { + it('are sent when onboarding user who chooses to opt in metrics', async function () { await withFixtures( { fixtures: new FixtureBuilder({ onboarding: true }) diff --git a/test/e2e/nft/remove-erc1155.spec.js b/test/e2e/nft/remove-erc1155.spec.js index 377d7a592f33..7923277cc4d7 100644 --- a/test/e2e/nft/remove-erc1155.spec.js +++ b/test/e2e/nft/remove-erc1155.spec.js @@ -15,7 +15,7 @@ describe('Remove ERC1155 NFT', function () { ], }; - it('user should be able to remove ERC1155 NFT on details page', async function () { + it('user should be able to remove ERC1155 NFT on details page @no-mmi', async function () { await withFixtures( { dapp: true, diff --git a/test/e2e/nft/send-nft.spec.js b/test/e2e/nft/send-nft.spec.js index 63ff670d3d77..4ec37faf2728 100644 --- a/test/e2e/nft/send-nft.spec.js +++ b/test/e2e/nft/send-nft.spec.js @@ -15,7 +15,7 @@ describe('Send NFT', function () { ], }; - it('should be able to send ERC721 NFT', async function () { + it('should be able to send ERC721 NFT @no-mmi', async function () { await withFixtures( { dapp: true, diff --git a/test/e2e/nft/view-erc1155-details.spec.js b/test/e2e/nft/view-erc1155-details.spec.js index b782a82b3088..29794412cf10 100644 --- a/test/e2e/nft/view-erc1155-details.spec.js +++ b/test/e2e/nft/view-erc1155-details.spec.js @@ -15,7 +15,7 @@ describe('View ERC1155 NFT details', function () { ], }; - it('user should be able to view ERC1155 NFT details', async function () { + it('user should be able to view ERC1155 NFT details @no-mmi', async function () { await withFixtures( { dapp: true, diff --git a/test/e2e/tests/import-flow.spec.js b/test/e2e/tests/import-flow.spec.js index e92c8ffc2542..d19296cb121a 100644 --- a/test/e2e/tests/import-flow.spec.js +++ b/test/e2e/tests/import-flow.spec.js @@ -22,7 +22,7 @@ const ganacheOptions = { ], }; -describe('Import flow', function () { +describe('Import flow @no-mmi', function () { it('Import wallet using Secret Recovery Phrase', async function () { const testPassword = 'correct horse battery staple'; diff --git a/test/e2e/tests/metamask-responsive-ui.spec.js b/test/e2e/tests/metamask-responsive-ui.spec.js index 3e89d5e25ae6..414bede479c1 100644 --- a/test/e2e/tests/metamask-responsive-ui.spec.js +++ b/test/e2e/tests/metamask-responsive-ui.spec.js @@ -8,7 +8,7 @@ const { const FixtureBuilder = require('../fixture-builder'); describe('MetaMask Responsive UI', function () { - it('Creating a new wallet', async function () { + it('Creating a new wallet @no-mmi', async function () { const driverOptions = { openDevToolsForTabs: true }; await withFixtures( diff --git a/test/e2e/tests/onboarding.spec.js b/test/e2e/tests/onboarding.spec.js index c81e93520e7a..eed6643eec4c 100644 --- a/test/e2e/tests/onboarding.spec.js +++ b/test/e2e/tests/onboarding.spec.js @@ -14,7 +14,7 @@ const { } = require('../helpers'); const FixtureBuilder = require('../fixture-builder'); -describe('MetaMask onboarding', function () { +describe('MetaMask onboarding @no-mmi', function () { const testPassword = 'correct horse battery staple'; const wrongSeedPhrase = 'test test test test test test test test test test test test'; @@ -239,7 +239,7 @@ describe('MetaMask onboarding', function () { ); }); - it(`User can add custom network during onboarding`, async function () { + it('User can add custom network during onboarding', async function () { const networkName = 'Localhost 8546'; const networkUrl = 'http://127.0.0.1:8546'; const currencySymbol = 'ETH'; diff --git a/ui/helpers/constants/routes.ts b/ui/helpers/constants/routes.ts index 55075195d160..a415542d15aa 100644 --- a/ui/helpers/constants/routes.ts +++ b/ui/helpers/constants/routes.ts @@ -70,6 +70,7 @@ const ONBOARDING_REVIEW_SRP_ROUTE = '/onboarding/review-recovery-phrase'; const ONBOARDING_CONFIRM_SRP_ROUTE = '/onboarding/confirm-recovery-phrase'; const ONBOARDING_CREATE_PASSWORD_ROUTE = '/onboarding/create-password'; const ONBOARDING_COMPLETION_ROUTE = '/onboarding/completion'; +const MMI_ONBOARDING_COMPLETION_ROUTE = '/onboarding/account-completion'; const ONBOARDING_UNLOCK_ROUTE = '/onboarding/unlock'; const ONBOARDING_HELP_US_IMPROVE_ROUTE = '/onboarding/help-us-improve'; const ONBOARDING_IMPORT_WITH_SRP_ROUTE = @@ -276,6 +277,7 @@ export { ONBOARDING_CONFIRM_SRP_ROUTE, ONBOARDING_PRIVACY_SETTINGS_ROUTE, ONBOARDING_COMPLETION_ROUTE, + MMI_ONBOARDING_COMPLETION_ROUTE, ONBOARDING_UNLOCK_ROUTE, ONBOARDING_PIN_EXTENSION_ROUTE, ONBOARDING_WELCOME_ROUTE, diff --git a/ui/pages/institutional/onboarding-successful/index.scss b/ui/pages/institutional/onboarding-successful/index.scss new file mode 100644 index 000000000000..1ac17f93abcd --- /dev/null +++ b/ui/pages/institutional/onboarding-successful/index.scss @@ -0,0 +1,9 @@ +.onboarding-successful { + @include screen-sm-min { + display: flex; + flex-direction: column; + align-items: center; + } + + max-width: 600px; +} diff --git a/ui/pages/institutional/onboarding-successful/onboarding-successful.js b/ui/pages/institutional/onboarding-successful/onboarding-successful.js new file mode 100644 index 000000000000..c000f0b2474f --- /dev/null +++ b/ui/pages/institutional/onboarding-successful/onboarding-successful.js @@ -0,0 +1,50 @@ +import React from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { Box, Text } from '../../../components/component-library'; +import Button from '../../../components/ui/button'; +import { + TextVariant, + TextAlign, + FontWeight, +} from '../../../helpers/constants/design-system'; +import { useI18nContext } from '../../../hooks/useI18nContext'; +import { setCompletedOnboarding } from '../../../store/actions'; +import { getMMIConfiguration } from '../../../selectors/institutional/selectors'; + +export default function OnboardingSuccessful() { + const t = useI18nContext(); + const dispatch = useDispatch(); + const { portfolio } = useSelector(getMMIConfiguration); + + return ( +
+ + + {t('extensionInsallCompleteTitle')} + + + {t('extensionInsallCompleteDescription')} + + + + + + +
+ ); +} diff --git a/ui/pages/institutional/onboarding-successful/onboarding-successful.stories.js b/ui/pages/institutional/onboarding-successful/onboarding-successful.stories.js new file mode 100644 index 000000000000..cd05a54b5926 --- /dev/null +++ b/ui/pages/institutional/onboarding-successful/onboarding-successful.stories.js @@ -0,0 +1,16 @@ +import React from 'react'; +import OnboardingSuccessful from './onboarding-successful'; + +export default { + title: 'Pages/Institutional/OnboardingSuccessful', +}; + +export const DefaultStory = () => { + return ( +
+ +
+ ); +}; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/institutional/onboarding-successful/onboarding-successful.test.js b/ui/pages/institutional/onboarding-successful/onboarding-successful.test.js new file mode 100644 index 000000000000..304781a6881f --- /dev/null +++ b/ui/pages/institutional/onboarding-successful/onboarding-successful.test.js @@ -0,0 +1,44 @@ +import React from 'react'; +import configureMockStore from 'redux-mock-store'; +import thunk from 'redux-thunk'; +import { + renderWithProvider, + setBackgroundConnection, +} from '../../../../test/jest'; +import OnboardingSuccessful from './onboarding-successful'; + +const mockHistoryPush = jest.fn(); + +const completeOnboardingStub = jest + .fn() + .mockImplementation(() => Promise.resolve()); + +jest.mock('react-router-dom', () => ({ + ...jest.requireActual('react-router-dom'), + useHistory: () => ({ + push: mockHistoryPush, + }), +})); + +describe('Successful Onboarding View', () => { + const mockStore = { + metamask: { + providerConfig: { + type: 'test', + }, + }, + }; + const store = configureMockStore([thunk])(mockStore); + setBackgroundConnection({ completeOnboarding: completeOnboardingStub }); + + afterEach(() => { + jest.resetAllMocks(); + }); + + it('should render the onboarding-successful view', () => { + const { getByTestId } = renderWithProvider(, store); + const continueButton = getByTestId('onboarding-continue-button'); + expect(getByTestId('onboarding-successful')).toBeInTheDocument(); + expect(continueButton).toBeInTheDocument(); + }); +}); diff --git a/ui/pages/institutional/pin-mmi-billboard/pin-mmi-billboard.js b/ui/pages/institutional/pin-mmi-billboard/pin-mmi-billboard.js new file mode 100644 index 000000000000..008c5bf516b7 --- /dev/null +++ b/ui/pages/institutional/pin-mmi-billboard/pin-mmi-billboard.js @@ -0,0 +1,597 @@ +import React from 'react'; +import { useI18nContext } from '../../../hooks/useI18nContext'; + +export default function OnboardingPinMmiBillboard() { + const t = useI18nContext(); + + return ( + + + + + + + + {t('onboardingPinExtensionStep1')} + + + + + {t('onboardingPinExtensionChrome')} + + + + + + {t('onboardingPinExtensionStep2')} + + + + + {t('onboardingPinMmiExtensionLabel')} + + + + + + + + + + + + + + + + + + + {t('onboardingPinExtensionBillboardTitle')} + + + + + {t('onboardingPinExtensionBillboardAccess')} + + + + + {t('appNameMmi')} + + + + + {t('onboardingPinExtensionBillboardDescription')} + + + {t('onboardingPinExtensionBillboardDescription2')} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/ui/pages/onboarding-flow/create-password/__snapshots__/create-password.test.js.snap b/ui/pages/onboarding-flow/create-password/__snapshots__/create-password.test.js.snap index 1fa2d9418da0..c7aa339afc5e 100644 --- a/ui/pages/onboarding-flow/create-password/__snapshots__/create-password.test.js.snap +++ b/ui/pages/onboarding-flow/create-password/__snapshots__/create-password.test.js.snap @@ -38,6 +38,7 @@ exports[`Onboarding Create Password Render should match snapshot 1`] = ` class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--align-center typography--color-text-default" > This password will unlock your MetaMask wallet only on this device. MetaMask can not recover this password. + This password will unlock your MetaMask Institutional extension only.
+ + ///: END:ONLY_INCLUDE_IN + } + + { + ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask) + + ? t('importMyWallet') + : t('createNewWallet')} + + ///: END:ONLY_INCLUDE_IN + } {shouldInjectMetametricsIframe ? ( diff --git a/ui/pages/onboarding-flow/onboarding-flow.js b/ui/pages/onboarding-flow/onboarding-flow.js index 12fe34b9648e..be6367277758 100644 --- a/ui/pages/onboarding-flow/onboarding-flow.js +++ b/ui/pages/onboarding-flow/onboarding-flow.js @@ -15,6 +15,9 @@ import { ONBOARDING_SECURE_YOUR_WALLET_ROUTE, ONBOARDING_PRIVACY_SETTINGS_ROUTE, ONBOARDING_COMPLETION_ROUTE, + ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) + MMI_ONBOARDING_COMPLETION_ROUTE, + ///: END:ONLY_INCLUDE_IN ONBOARDING_IMPORT_WITH_SRP_ROUTE, ONBOARDING_PIN_EXTENSION_ROUTE, ONBOARDING_METAMETRICS, @@ -37,6 +40,9 @@ import { ///: BEGIN:ONLY_INCLUDE_IN(build-flask) import ExperimentalArea from '../../components/app/flask/experimental-area'; ///: END:ONLY_INCLUDE_IN +///: BEGIN:ONLY_INCLUDE_IN(build-mmi) +import OnboardingSuccessful from '../institutional/onboarding-successful/onboarding-successful'; +///: END:ONLY_INCLUDE_IN import OnboardingFlowSwitch from './onboarding-flow-switch/onboarding-flow-switch'; import CreatePassword from './create-password/create-password'; import ReviewRecoveryPhrase from './recovery-phrase/review-recovery-phrase'; @@ -157,6 +163,16 @@ export default function OnboardingFlow() { path={ONBOARDING_COMPLETION_ROUTE} component={CreationSuccessful} /> + { + ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) + } + + { + ///: END:ONLY_INCLUDE_IN + } { if (selectedIndex === 0) { setSelectedIndex(1); @@ -48,61 +71,100 @@ export default function OnboardingPinExtension() { history.push(DEFAULT_ROUTE); } }; + ///: END:ONLY_INCLUDE_IN return (
- - {t('onboardingPinExtensionTitle')} - - setSelectedIndex(index)} - > -
- - {t('onboardingPinExtensionDescription')} + { + ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask) + <> + + {t('onboardingPinExtensionTitle')} -
- + setSelectedIndex(index)} + > +
+ + {t('onboardingPinExtensionDescription')} + +
+ +
+
+
+ + {t('onboardingPinExtensionDescription2')} + + + {t('onboardingPinExtensionDescription3')} + + +
+ +
+
-
-
- - {t('onboardingPinExtensionDescription2')} - - - {t('onboardingPinExtensionDescription3')} - - -
- -
- -
+ + ///: END:ONLY_INCLUDE_IN + } + + { + ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) + <> +
+ + + {t('pinExtensionTitle')} + + + {t('pinExtensionDescription')} + + + +
+
+ +
+ + ///: END:ONLY_INCLUDE_IN + }
); } diff --git a/ui/pages/onboarding-flow/welcome/welcome.js b/ui/pages/onboarding-flow/welcome/welcome.js index 1fd7f04c234a..673e0ac58746 100644 --- a/ui/pages/onboarding-flow/welcome/welcome.js +++ b/ui/pages/onboarding-flow/welcome/welcome.js @@ -2,17 +2,19 @@ import EventEmitter from 'events'; import React, { useState, useEffect, useContext } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useHistory } from 'react-router-dom'; +///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask) import { Carousel } from 'react-responsive-carousel'; +///: END:ONLY_INCLUDE_IN import Mascot from '../../../components/ui/mascot'; import Button from '../../../components/ui/button'; import { Text } from '../../../components/component-library'; import CheckBox from '../../../components/ui/check-box'; import Box from '../../../components/ui/box'; import { - FONT_WEIGHT, - TEXT_ALIGN, TextVariant, AlignItems, + TextAlign, + FontWeight, } from '../../../helpers/constants/design-system'; import { useI18nContext } from '../../../hooks/useI18nContext'; import { MetaMetricsContext } from '../../../contexts/metametrics'; @@ -23,11 +25,20 @@ import { import { setFirstTimeFlowType, setTermsOfUseLastAgreed, + ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) + setParticipateInMetaMetrics, + ///: END:ONLY_INCLUDE_IN } from '../../../store/actions'; import { + ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask) ONBOARDING_METAMETRICS, + ///: END:ONLY_INCLUDE_IN ONBOARDING_SECURE_YOUR_WALLET_ROUTE, ONBOARDING_COMPLETION_ROUTE, + ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) + ONBOARDING_CREATE_PASSWORD_ROUTE, + ONBOARDING_IMPORT_WITH_SRP_ROUTE, + ///: END:ONLY_INCLUDE_IN } from '../../../helpers/constants/routes'; import { FIRST_TIME_FLOW_TYPES } from '../../../helpers/constants/onboarding'; import { getFirstTimeFlowType, getCurrentKeyring } from '../../../selectors'; @@ -54,7 +65,7 @@ export default function OnboardingWelcome() { }, [currentKeyring, history, firstTimeFlowType]); const trackEvent = useContext(MetaMetricsContext); - const onCreateClick = () => { + const onCreateClick = async () => { dispatch(setFirstTimeFlowType('create')); trackEvent({ category: MetaMetricsEventCategory.Onboarding, @@ -64,7 +75,15 @@ export default function OnboardingWelcome() { }, }); dispatch(setTermsOfUseLastAgreed(new Date().getTime())); + + ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask) history.push(ONBOARDING_METAMETRICS); + ///: END:ONLY_INCLUDE_IN + + ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) + await dispatch(setParticipateInMetaMetrics(false)); + history.push(ONBOARDING_CREATE_PASSWORD_ROUTE); + ///: END:ONLY_INCLUDE_IN }; const toggleTermsCheck = () => { setTermsChecked((currentTermsChecked) => !currentTermsChecked); @@ -81,7 +100,7 @@ export default function OnboardingWelcome() { , ]); - const onImportClick = () => { + const onImportClick = async () => { dispatch(setFirstTimeFlowType('import')); trackEvent({ category: MetaMetricsEventCategory.Onboarding, @@ -91,23 +110,105 @@ export default function OnboardingWelcome() { }, }); dispatch(setTermsOfUseLastAgreed(new Date().getTime())); + + ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask) history.push(ONBOARDING_METAMETRICS); + ///: END:ONLY_INCLUDE_IN + + ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) + await dispatch(setParticipateInMetaMetrics(false)); + history.push(ONBOARDING_IMPORT_WITH_SRP_ROUTE); + ///: END:ONLY_INCLUDE_IN }; return (
- + { + ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask) + +
+ + {t('welcomeToMetaMask')} + + + {t('welcomeToMetaMaskIntro')} + +
+ +
+
+
+ + {t('welcomeExploreTitle')} + + + {t('welcomeExploreDescription')} + +
+ +
+
+
+ + {t('welcomeLoginTitle')} + + + {t('welcomeLoginDescription')} + +
+ +
+
+ + ///: END:ONLY_INCLUDE_IN + } + + { + ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
- {t('welcomeToMetaMask')} + {t('installExtension')} - - {t('welcomeToMetaMaskIntro')} + + {t('installExtensionDescription')}
-
- - {t('welcomeExploreTitle')} - - - {t('welcomeExploreDescription')} - -
- -
-
-
- - {t('welcomeLoginTitle')} - - - {t('welcomeLoginDescription')} - -
- -
-
- + ///: END:ONLY_INCLUDE_IN + } +
  • - {t('onboardingCreateWallet')} + { + ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask) + t('onboardingCreateWallet') + ///: END:ONLY_INCLUDE_IN + } + { + ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) + t('continue') + ///: END:ONLY_INCLUDE_IN + }
  • diff --git a/ui/pages/onboarding-flow/welcome/welcome.test.js b/ui/pages/onboarding-flow/welcome/welcome.test.js index c7965efd52f4..a14e36a95c73 100644 --- a/ui/pages/onboarding-flow/welcome/welcome.test.js +++ b/ui/pages/onboarding-flow/welcome/welcome.test.js @@ -29,6 +29,11 @@ jest.mock('../../../store/actions.ts', () => ({ return type; }), ), + setParticipateInMetaMetrics: jest.fn().mockReturnValue( + jest.fn((type) => { + return type; + }), + ), })); jest.mock('react-router-dom', () => ({