From 77f8ec4d3af0023f0be5f496304467ce68b34003 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Wed, 13 Oct 2021 09:22:51 -0500 Subject: [PATCH] Fix 12265 - Update onboarding welcome screen (#12275) --- app/_locales/en/messages.json | 24 ++ .../onboarding-welcome-decentralised-apps.svg | 218 ++++++++++++ app/images/onboarding-welcome-say-hello.svg | 335 ++++++++++++++++++ development/build/static.js | 4 + package.json | 1 + ui/helpers/constants/routes.js | 2 + ui/pages/onboarding-flow/index.scss | 1 + ui/pages/onboarding-flow/onboarding-flow.js | 5 +- ui/pages/onboarding-flow/welcome/index.scss | 51 +++ ui/pages/onboarding-flow/welcome/welcome.js | 111 ++++++ .../welcome/welcome.stories.js | 9 + yarn.lock | 16 + 12 files changed, 776 insertions(+), 1 deletion(-) create mode 100644 app/images/onboarding-welcome-decentralised-apps.svg create mode 100644 app/images/onboarding-welcome-say-hello.svg create mode 100644 ui/pages/onboarding-flow/welcome/index.scss create mode 100644 ui/pages/onboarding-flow/welcome/welcome.js create mode 100644 ui/pages/onboarding-flow/welcome/welcome.stories.js diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 7540e8798..147c093c7 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -1622,6 +1622,12 @@ "on": { "message": "On" }, + "onboardingCreateWallet": { + "message": "Create a new wallet" + }, + "onboardingImportWallet": { + "message": "Import an existing wallet" + }, "onboardingReturnNotice": { "message": "\"$1\" will close this tab and direct back to $2", "description": "Return the user to the site that initiated onboarding" @@ -2897,6 +2903,24 @@ "welcomeBack": { "message": "Welcome Back!" }, + "welcomeExploreDescription": { + "message": "Store, send and spend crypto currencies and assets." + }, + "welcomeExploreTitle": { + "message": "Explore decentralized apps" + }, + "welcomeLoginDescription": { + "message": "Use your MetaMask to login to decentralized apps - no signup needed." + }, + "welcomeLoginTitle": { + "message": "Say hello to your wallet" + }, + "welcomeToMetaMask": { + "message": "Let's get started" + }, + "welcomeToMetaMaskIntro": { + "message": "Trusted by millions, MetaMask is a secure wallet making the world of web3 accessible to all." + }, "whatsNew": { "message": "What's new", "description": "This is the title of a popup that gives users notifications about new features and updates to MetaMask." diff --git a/app/images/onboarding-welcome-decentralised-apps.svg b/app/images/onboarding-welcome-decentralised-apps.svg new file mode 100644 index 000000000..c07f2dae7 --- /dev/null +++ b/app/images/onboarding-welcome-decentralised-apps.svg @@ -0,0 +1,218 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/images/onboarding-welcome-say-hello.svg b/app/images/onboarding-welcome-say-hello.svg new file mode 100644 index 000000000..1c34835f0 --- /dev/null +++ b/app/images/onboarding-welcome-say-hello.svg @@ -0,0 +1,335 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/development/build/static.js b/development/build/static.js index 5addd1b10..ecc12b249 100644 --- a/development/build/static.js +++ b/development/build/static.js @@ -123,6 +123,10 @@ function getCopyTargets(shouldIncludeLockdown) { src: `./node_modules/@fortawesome/fontawesome-free/webfonts/`, dest: `fonts/fontawesome`, }, + { + src: `./node_modules/react-responsive-carousel/lib/styles`, + dest: 'react-gallery/', + }, { src: `./ui/css/output/`, pattern: `*.css`, diff --git a/package.json b/package.json index f2fe4d3fb..dc8f7a613 100644 --- a/package.json +++ b/package.json @@ -184,6 +184,7 @@ "react-inspector": "^2.3.0", "react-popper": "^2.2.3", "react-redux": "^7.2.0", + "react-responsive-carousel": "^3.2.21", "react-router-dom": "^5.1.2", "react-simple-file-input": "^2.0.0", "react-tippy": "^1.2.2", diff --git a/ui/helpers/constants/routes.js b/ui/helpers/constants/routes.js index 1ae2ef494..c3ffa2bc7 100644 --- a/ui/helpers/constants/routes.js +++ b/ui/helpers/constants/routes.js @@ -66,6 +66,7 @@ const ONBOARDING_IMPORT_MOBILE_ROUTE = '/onboarding/create-password'; const ONBOARDING_SECURE_YOUR_WALLET_ROUTE = '/onboarding/secure-your-wallet'; const ONBOARDING_PRIVACY_SETTINGS_ROUTE = '/onboarding/privacy-settings'; const ONBOARDING_PIN_EXTENSION_ROUTE = '/onboarding/pin-extension'; +const ONBOARDING_WELCOME = '/onboarding/welcome'; const CONFIRM_TRANSACTION_ROUTE = '/confirm-transaction'; const CONFIRM_SEND_ETHER_PATH = '/send-ether'; @@ -227,4 +228,5 @@ export { ONBOARDING_COMPLETION_ROUTE, ONBOARDING_UNLOCK_ROUTE, ONBOARDING_PIN_EXTENSION_ROUTE, + ONBOARDING_WELCOME, }; diff --git a/ui/pages/onboarding-flow/index.scss b/ui/pages/onboarding-flow/index.scss index 422ee0859..5b8ab1497 100644 --- a/ui/pages/onboarding-flow/index.scss +++ b/ui/pages/onboarding-flow/index.scss @@ -4,6 +4,7 @@ @import 'privacy-settings/index'; @import 'create-password/index'; @import 'creation-successful/index'; +@import 'welcome/index'; .onboarding-flow { width: 100%; diff --git a/ui/pages/onboarding-flow/onboarding-flow.js b/ui/pages/onboarding-flow/onboarding-flow.js index 12df2f76e..a8eeecf02 100644 --- a/ui/pages/onboarding-flow/onboarding-flow.js +++ b/ui/pages/onboarding-flow/onboarding-flow.js @@ -7,6 +7,7 @@ import { ONBOARDING_REVIEW_SRP_ROUTE, ONBOARDING_CONFIRM_SRP_ROUTE, ONBOARDING_UNLOCK_ROUTE, + ONBOARDING_WELCOME, DEFAULT_ROUTE, ONBOARDING_SECURE_YOUR_WALLET_ROUTE, ONBOARDING_PRIVACY_SETTINGS_ROUTE, @@ -32,6 +33,7 @@ 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'; +import OnboardingWelcome from './welcome/welcome'; export default function OnboardingFlow() { const [seedPhrase, setSeedPhrase] = useState(''); @@ -49,7 +51,7 @@ export default function OnboardingFlow() { // For ONBOARDING_V2 dev purposes, // Remove when ONBOARDING_V2 dev complete if (process.env.ONBOARDING_V2) { - history.push(ONBOARDING_COMPLETION_ROUTE); + history.push(ONBOARDING_WELCOME); return; } @@ -124,6 +126,7 @@ export default function OnboardingFlow() { path={ONBOARDING_COMPLETION_ROUTE} component={CreationSuccessful} /> + diff --git a/ui/pages/onboarding-flow/welcome/index.scss b/ui/pages/onboarding-flow/welcome/index.scss new file mode 100644 index 000000000..78804c057 --- /dev/null +++ b/ui/pages/onboarding-flow/welcome/index.scss @@ -0,0 +1,51 @@ +@import "./react-gallery/carousel.min.css"; + +.onboarding-welcome { + width: 600px; + + .control-dots .dot { + background: $ui-2; + box-shadow: none; + + &.selected { + background: $ui-4; + } + } + + /* next and previous arrow colors */ + .carousel.carousel-slider .control-arrow { + opacity: 1; + } + + .carousel .control-next.control-arrow::before { + border-left-color: $ui-3; + } + + .carousel .control-prev.control-arrow::before { + border-right-color: $ui-3; + } + + .carousel.carousel-slider .control-arrow:hover { + background: none; + } + + &__mascot { + width: 250px; + height: 250px; + margin: 20px auto; + } + + &__image { + text-align: center; + margin: 20px auto; + } + + &__buttons { + max-width: 50%; + margin: 40px auto 0 auto; + + li { + margin-bottom: 24px; + } + } +} diff --git a/ui/pages/onboarding-flow/welcome/welcome.js b/ui/pages/onboarding-flow/welcome/welcome.js new file mode 100644 index 000000000..2acd7554e --- /dev/null +++ b/ui/pages/onboarding-flow/welcome/welcome.js @@ -0,0 +1,111 @@ +import EventEmitter from 'events'; +import React, { useState } from 'react'; +import { useDispatch } from 'react-redux'; +import { useHistory } from 'react-router-dom'; +import { Carousel } from 'react-responsive-carousel'; +import Mascot from '../../../components/ui/mascot'; +import Button from '../../../components/ui/button'; +import Typography from '../../../components/ui/typography/typography'; +import { + TYPOGRAPHY, + FONT_WEIGHT, + TEXT_ALIGN, +} from '../../../helpers/constants/design-system'; +import { useI18nContext } from '../../../hooks/useI18nContext'; +import { setFirstTimeFlowType } from '../../../store/actions'; +import { INITIALIZE_METAMETRICS_OPT_IN_ROUTE } from '../../../helpers/constants/routes'; + +export default function OnboardingWelcome() { + const t = useI18nContext(); + const dispatch = useDispatch(); + const history = useHistory(); + const [eventEmitter] = useState(new EventEmitter()); + + const onCreateClick = () => { + dispatch(setFirstTimeFlowType('create')); + history.push(INITIALIZE_METAMETRICS_OPT_IN_ROUTE); + }; + + const onImportClick = () => { + dispatch(setFirstTimeFlowType('import')); + history.push(INITIALIZE_METAMETRICS_OPT_IN_ROUTE); + }; + + return ( +
+ +
+ + {t('welcomeToMetaMask')} + + + {t('welcomeToMetaMaskIntro')} + +
+ +
+
+
+ + {t('welcomeExploreTitle')} + + + {t('welcomeExploreDescription')} + +
+ +
+
+
+ + {t('welcomeLoginTitle')} + + + {t('welcomeLoginDescription')} + +
+ +
+
+ +
    +
  • + +
    • +
  • + +
    • +
+
+ ); +} diff --git a/ui/pages/onboarding-flow/welcome/welcome.stories.js b/ui/pages/onboarding-flow/welcome/welcome.stories.js new file mode 100644 index 000000000..6e28691c5 --- /dev/null +++ b/ui/pages/onboarding-flow/welcome/welcome.stories.js @@ -0,0 +1,9 @@ +import React from 'react'; +import OnboardingWelcome from './welcome'; + +export default { + title: 'Onboarding', + id: __filename, +}; + +export const OnboardingComponent = () => ; diff --git a/yarn.lock b/yarn.lock index cc939d994..384eba031 100644 --- a/yarn.lock +++ b/yarn.lock @@ -22976,6 +22976,13 @@ react-draggable@^4.0.3: classnames "^2.2.5" prop-types "^15.6.0" +react-easy-swipe@^0.0.21: + version "0.0.21" + resolved "https://registry.yarnpkg.com/react-easy-swipe/-/react-easy-swipe-0.0.21.tgz#ce9384d576f7a8529dc2ca377c1bf03920bac8eb" + integrity sha512-OeR2jAxdoqUMHIn/nS9fgreI5hSpgGoL5ezdal4+oO7YSSgJR8ga+PkYGJrSrJ9MKlPcQjMQXnketrD7WNmNsg== + dependencies: + prop-types "^15.5.8" + react-error-overlay@^6.0.7: version "6.0.8" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.8.tgz#474ed11d04fc6bda3af643447d85e9127ed6b5de" @@ -23095,6 +23102,15 @@ react-refresh@^0.8.3: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f" integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg== +react-responsive-carousel@^3.2.21: + version "3.2.21" + resolved "https://registry.yarnpkg.com/react-responsive-carousel/-/react-responsive-carousel-3.2.21.tgz#a464a93c33f9fc29e3bbd1944ce885a0a343a996" + integrity sha512-y2ueGqv/yo6HQJi9IbrJVRJobp4EOrNe6BQOC61CoADg3wUjq0gqAcrtSsLQIRLtbt6nCo7cTPRX4wAkSwdiTA== + dependencies: + classnames "^2.2.5" + prop-types "^15.5.8" + react-easy-swipe "^0.0.21" + react-router-dom@^5.1.2: version "5.1.2" resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.1.2.tgz#06701b834352f44d37fbb6311f870f84c76b9c18"