From a8ec9ada2a522fc87c15130b33d0e9aad5a24339 Mon Sep 17 00:00:00 2001 From: Alex Donesky Date: Mon, 11 Oct 2021 09:43:25 -0500 Subject: [PATCH] Onboarding V2 Creation Successful view (#12248) * add creation-successful onboarding view --- app/_locales/en/messages.json | 26 ++++++ app/images/tada.png | Bin 0 -> 6472 bytes app/images/twitter-icon.png | Bin 0 -> 584 bytes ui/components/app/step-progress-bar/index.js | 2 +- .../step-progress-bar/step-progress-bar.js | 2 +- ui/components/ui/box/box.js | 5 +- ui/components/ui/box/index.js | 2 +- ui/components/ui/typography/typography.js | 6 +- .../create-password.js} | 22 +++-- .../index.scss | 4 +- .../creation-successful.js | 88 ++++++++++++++++++ .../creation-successful.stories.js | 15 +++ .../creation-successful.test.js | 33 +++++++ .../creation-successful/index.scss | 38 ++++++++ ui/pages/onboarding-flow/index.scss | 12 ++- ui/pages/onboarding-flow/onboarding-flow.js | 29 +++++- 16 files changed, 263 insertions(+), 21 deletions(-) create mode 100644 app/images/tada.png create mode 100644 app/images/twitter-icon.png rename ui/pages/onboarding-flow/{new-account/new-account.js => create-password/create-password.js} (88%) rename ui/pages/onboarding-flow/{new-account => create-password}/index.scss (87%) create mode 100644 ui/pages/onboarding-flow/creation-successful/creation-successful.js create mode 100644 ui/pages/onboarding-flow/creation-successful/creation-successful.stories.js create mode 100644 ui/pages/onboarding-flow/creation-successful/creation-successful.test.js create mode 100644 ui/pages/onboarding-flow/creation-successful/index.scss diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 38ec6484f..7540e8798 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -935,6 +935,9 @@ "message": "File import not working? Click here!", "description": "Helps user import their account from a JSON file" }, + "followUsOnTwitter": { + "message": "Follow us on Twitter" + }, "forbiddenIpfsGateway": { "message": "Forbidden IPFS Gateway: Please specify a CID gateway" }, @@ -1793,6 +1796,9 @@ "rejected": { "message": "Rejected" }, + "remember": { + "message": "Remember:" + }, "remindMeLater": { "message": "Remind me later" }, @@ -2855,6 +2861,26 @@ "walletConnectionGuide": { "message": "our hardware wallet connection guide" }, + "walletCreationSuccessDetail": { + "message": "You’ve successfully protected your wallet. Keep your Secret Recovery Phrase safe and secret -- it’s your responsibility!" + }, + "walletCreationSuccessReminder1": { + "message": "MetaMask can’t recover your Secret Recovery Phrase." + }, + "walletCreationSuccessReminder2": { + "message": "MetaMask will never ask you for your Secret Recovery Phrase." + }, + "walletCreationSuccessReminder3": { + "message": "$1 with anyone or risk your funds being stolen", + "description": "$1 is separated as walletCreationSuccessReminder3BoldSection so that we can bold it" + }, + "walletCreationSuccessReminder3BoldSection": { + "message": "Never share your Secret Recovery Phrase", + "description": "This string is localized separately from walletCreationSuccessReminder3 so that we can bold it" + }, + "walletCreationSuccessTitle": { + "message": "Wallet creation successful" + }, "walletSeed": { "message": "Secret Recovery Phrase" }, diff --git a/app/images/tada.png b/app/images/tada.png new file mode 100644 index 0000000000000000000000000000000000000000..6ddcf2f8952750b92260f27ecc5728431b4d39c0 GIT binary patch literal 6472 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 WA*OVndXhi@0000 + {(boxClassName) => ( {children} @@ -63,6 +64,7 @@ Typography.propTypes = { boxProps: PropTypes.shape({ ...Box.propTypes, }), + margin: MultipleSizes, fontWeight: PropTypes.oneOf(Object.values(FONT_WEIGHT)), fontStyle: PropTypes.oneOf(Object.values(FONT_STYLE)), tag: PropTypes.oneOf([ diff --git a/ui/pages/onboarding-flow/new-account/new-account.js b/ui/pages/onboarding-flow/create-password/create-password.js similarity index 88% rename from ui/pages/onboarding-flow/new-account/new-account.js rename to ui/pages/onboarding-flow/create-password/create-password.js index cc6ebed7e..06f46fcee 100644 --- a/ui/pages/onboarding-flow/new-account/new-account.js +++ b/ui/pages/onboarding-flow/create-password/create-password.js @@ -16,8 +16,11 @@ import { INITIALIZE_SEED_PHRASE_INTRO_ROUTE } from '../../../helpers/constants/r import FormField from '../../../components/ui/form-field'; import Box from '../../../components/ui/box'; import CheckBox from '../../../components/ui/check-box'; +import StepProgressBar, { + stages, +} from '../../../components/app/step-progress-bar'; -export default function NewAccount({ onSubmit }) { +export default function CreatePassword({ onSubmit }) { const t = useI18nContext(); const [confirmPassword, setConfirmPassword] = useState(''); const [password, setPassword] = useState(''); @@ -88,7 +91,8 @@ export default function NewAccount({ onSubmit }) { }; return ( -
+
+ {t('createPassword')} @@ -104,7 +108,7 @@ export default function NewAccount({ onSubmit }) { marginTop={3} padding={[0, 12]} > -
+ { e.preventDefault(); @@ -133,7 +137,7 @@ export default function NewAccount({ onSubmit }) { value={confirmPassword} titleDetail={ isValid && ( -
+
) @@ -152,12 +156,12 @@ export default function NewAccount({ onSubmit }) { {t('passwordTermsWarning', [ e.stopPropagation()} - key="new-account__link-text" + key="create-password__link-text" href="https://metamask.io/terms.html" target="_blank" rel="noopener noreferrer" > - + {t('learnMore')} , @@ -166,7 +170,7 @@ export default function NewAccount({ onSubmit }) { + + + + + + +
+ ); +} diff --git a/ui/pages/onboarding-flow/creation-successful/creation-successful.stories.js b/ui/pages/onboarding-flow/creation-successful/creation-successful.stories.js new file mode 100644 index 000000000..5d6eaa731 --- /dev/null +++ b/ui/pages/onboarding-flow/creation-successful/creation-successful.stories.js @@ -0,0 +1,15 @@ +import React from 'react'; +import CreationSuccessful from './creation-successful'; + +export default { + title: 'Onboarding - Creation Successful', + id: __filename, +}; + +export const Base = () => { + return ( +
+ +
+ ); +}; diff --git a/ui/pages/onboarding-flow/creation-successful/creation-successful.test.js b/ui/pages/onboarding-flow/creation-successful/creation-successful.test.js new file mode 100644 index 000000000..6d828cab9 --- /dev/null +++ b/ui/pages/onboarding-flow/creation-successful/creation-successful.test.js @@ -0,0 +1,33 @@ +import React from 'react'; +import { fireEvent } from '@testing-library/react'; +import reactRouterDom from 'react-router-dom'; +import { + ONBOARDING_PIN_EXTENSION_ROUTE, + ONBOARDING_PRIVACY_SETTINGS_ROUTE, +} from '../../../helpers/constants/routes'; +import { renderWithProvider } from '../../../../test/jest'; +import CreationSuccessful from './creation-successful'; + +describe('Creation Successful Onboarding View', () => { + const pushMock = jest.fn(); + beforeAll(() => { + jest + .spyOn(reactRouterDom, 'useHistory') + .mockImplementation() + .mockReturnValue({ push: pushMock }); + }); + + it('should redirect to pin-extension view when "Done" button is clicked', () => { + const { getByText } = renderWithProvider(); + const doneButton = getByText('Done'); + fireEvent.click(doneButton); + expect(pushMock).toHaveBeenCalledWith(ONBOARDING_PIN_EXTENSION_ROUTE); + }); + + it('should redirect to privacy-settings view when "Set advanced privacy settings" button is clicked', () => { + const { getByText } = renderWithProvider(); + const privacySettingsButton = getByText('Set advanced privacy settings'); + fireEvent.click(privacySettingsButton); + expect(pushMock).toHaveBeenCalledWith(ONBOARDING_PRIVACY_SETTINGS_ROUTE); + }); +}); diff --git a/ui/pages/onboarding-flow/creation-successful/index.scss b/ui/pages/onboarding-flow/creation-successful/index.scss new file mode 100644 index 000000000..98cf6b80e --- /dev/null +++ b/ui/pages/onboarding-flow/creation-successful/index.scss @@ -0,0 +1,38 @@ +.creation-successful { + img { + align-self: center; + } + + max-width: 575px; + + ul { + list-style-type: disc; + max-width: 500px; + } + + li { + margin-left: 25px; + + a { + justify-content: flex-start; + padding: 0; + } + } + + &__bold { + font-weight: bold; + } + + &__actions { + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + + button { + margin-top: 14px; + max-width: 60%; + padding: 18px 0; + } + } +} diff --git a/ui/pages/onboarding-flow/index.scss b/ui/pages/onboarding-flow/index.scss index afcf7b2fa..422ee0859 100644 --- a/ui/pages/onboarding-flow/index.scss +++ b/ui/pages/onboarding-flow/index.scss @@ -1,8 +1,9 @@ @import 'recovery-phrase/index'; -@import 'new-account/index'; @import 'onboarding-app-header/index'; @import 'secure-your-wallet/index'; @import 'privacy-settings/index'; +@import 'create-password/index'; +@import 'creation-successful/index'; .onboarding-flow { width: 100%; @@ -18,4 +19,13 @@ border: 1px solid $Grey-100; border-radius: 20px; } + + &__twitter-button { + margin-bottom: 40px; + vertical-align: middle; + + img { + margin-left: 5px; + } + } } diff --git a/ui/pages/onboarding-flow/onboarding-flow.js b/ui/pages/onboarding-flow/onboarding-flow.js index c00af0977..12df2f76e 100644 --- a/ui/pages/onboarding-flow/onboarding-flow.js +++ b/ui/pages/onboarding-flow/onboarding-flow.js @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { Switch, Route, useHistory } from 'react-router-dom'; +import { Switch, Route, useHistory, useLocation } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; import Unlock from '../unlock-page'; import { @@ -10,6 +10,7 @@ import { DEFAULT_ROUTE, ONBOARDING_SECURE_YOUR_WALLET_ROUTE, ONBOARDING_PRIVACY_SETTINGS_ROUTE, + ONBOARDING_COMPLETION_ROUTE, } from '../../helpers/constants/routes'; import { getCompletedOnboarding, @@ -22,17 +23,22 @@ import { unlockAndGetSeedPhrase, } from '../../store/actions'; import { getFirstTimeFlowTypeRoute } from '../../selectors'; +import Button from '../../components/ui/button'; +import { useI18nContext } from '../../hooks/useI18nContext'; import OnboardingFlowSwitch from './onboarding-flow-switch/onboarding-flow-switch'; -import NewAccount from './new-account/new-account'; +import CreatePassword from './create-password/create-password'; import ReviewRecoveryPhrase from './recovery-phrase/review-recovery-phrase'; import SecureYourWallet from './secure-your-wallet/secure-your-wallet'; import ConfirmRecoveryPhrase from './recovery-phrase/confirm-recovery-phrase'; import PrivacySettings from './privacy-settings/privacy-settings'; +import CreationSuccessful from './creation-successful/creation-successful'; export default function OnboardingFlow() { const [seedPhrase, setSeedPhrase] = useState(''); const dispatch = useDispatch(); + const currentLocation = useLocation(); const history = useHistory(); + const t = useI18nContext(); const isInitialized = useSelector(getIsInitialized); const isUnlocked = useSelector(getIsUnlocked); const completedOnboarding = useSelector(getCompletedOnboarding); @@ -43,7 +49,7 @@ export default function OnboardingFlow() { // For ONBOARDING_V2 dev purposes, // Remove when ONBOARDING_V2 dev complete if (process.env.ONBOARDING_V2) { - history.push(ONBOARDING_PRIVACY_SETTINGS_ROUTE); + history.push(ONBOARDING_COMPLETION_ROUTE); return; } @@ -85,7 +91,7 @@ export default function OnboardingFlow() { ( - @@ -114,9 +120,24 @@ export default function OnboardingFlow() { path={ONBOARDING_PRIVACY_SETTINGS_ROUTE} component={PrivacySettings} /> +
+ {currentLocation?.pathname === ONBOARDING_COMPLETION_ROUTE && ( + + )}
); }