From cb2698d20eae273d372d03e11fa765a91c330c17 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Wed, 27 Feb 2019 11:16:41 -0330 Subject: [PATCH] First time flow updates (#6192) * Action select step of onboarding flow added. * Update navigation on create and import password screens. * Adds terms of service checkbox to create and import account screens. * Add security warning to jazzicon intro step * Update and streamline unique image to confirm seed steps of first time flow. * UI touch ups to welcome screen. * UI touch up on select action page * Fix first time import flow. * Add end of flow screen to first time flow * Replace unique image screen with updated fishing warning screen. * Update e2e tests for onboarding flow changes. * Add required translations to onboarding flow. * Update design of select action screen to emphasize create new wallet option. * Clean up onboarding flow code. * Remove notice related code from first-time-flow directory. * Use updater function argument in new-account.component --- app/_locales/en/messages.json | 65 +++++- app/images/download-alt.svg | 5 + app/images/sleuth.svg | 1 + app/images/thin-plus.svg | 4 + test/e2e/beta/from-import-beta-ui.spec.js | 52 ++--- .../beta/metamask-beta-responsive-ui.spec.js | 191 ++++++++---------- test/e2e/beta/metamask-beta-ui.spec.js | 58 ++---- .../create-password.component.js | 29 ++- .../import-with-seed-phrase.component.js | 37 ++-- .../new-account/new-account.component.js | 46 +++-- .../unique-image/unique-image.component.js | 37 ++-- .../end-of-flow/end-of-flow.component.js | 70 +++++++ .../end-of-flow/end-of-flow.container.js | 11 + .../first-time-flow/end-of-flow/index.js | 1 + .../first-time-flow/end-of-flow/index.scss | 47 +++++ .../first-time-flow-switch.component.js | 7 - .../first-time-flow-switch.container.js | 2 - .../first-time-flow.component.js | 33 ++- .../first-time-flow.container.js | 3 +- .../pages/first-time-flow/index.scss | 59 +++++- .../pages/first-time-flow/notices/index.js | 1 - .../notices/notices.component.js | 124 ------------ .../notices/notices.container.js | 27 --- .../confirm-seed-phrase.component.js | 29 +-- .../confirm-seed-phrase.container.js | 12 -- .../seed-phrase/confirm-seed-phrase/index.js | 2 +- .../confirm-seed-phrase/index.scss | 4 + .../first-time-flow/seed-phrase/index.js | 2 +- .../first-time-flow/seed-phrase/index.scss | 6 +- .../seed-phrase/reveal-seed-phrase/index.scss | 4 + .../reveal-seed-phrase.component.js | 18 +- .../seed-phrase/seed-phrase.component.js | 17 +- .../seed-phrase/seed-phrase.container.js | 12 -- .../first-time-flow/select-action/index.js | 1 + .../first-time-flow/select-action/index.scss | 87 ++++++++ .../select-action/select-action.component.js | 104 ++++++++++ .../select-action/select-action.container.js | 0 .../pages/first-time-flow/welcome/index.scss | 31 ++- .../welcome/welcome.component.js | 16 +- .../components/pages/home/home.component.js | 10 - ui/app/routes.js | 4 + 41 files changed, 752 insertions(+), 517 deletions(-) create mode 100644 app/images/download-alt.svg create mode 100644 app/images/sleuth.svg create mode 100644 app/images/thin-plus.svg create mode 100644 ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.component.js create mode 100644 ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.container.js create mode 100644 ui/app/components/pages/first-time-flow/end-of-flow/index.js create mode 100644 ui/app/components/pages/first-time-flow/end-of-flow/index.scss delete mode 100644 ui/app/components/pages/first-time-flow/notices/index.js delete mode 100644 ui/app/components/pages/first-time-flow/notices/notices.component.js delete mode 100644 ui/app/components/pages/first-time-flow/notices/notices.container.js delete mode 100644 ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.container.js delete mode 100644 ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.container.js create mode 100644 ui/app/components/pages/first-time-flow/select-action/index.js create mode 100644 ui/app/components/pages/first-time-flow/select-action/index.scss create mode 100644 ui/app/components/pages/first-time-flow/select-action/select-action.component.js create mode 100644 ui/app/components/pages/first-time-flow/select-action/select-action.container.js diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 2d0098a24..d4860bbfb 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -92,6 +92,15 @@ "advanced": { "message": "Advanced" }, + "agreeTermsOfService": { + "message": "I agree to the Terms of Service" + }, + "allDone": { + "message": "All Done" + }, + "alreadyHaveSeedPhrase": { + "message": "No, I already have a seed phrase" + }, "amount": { "message": "Amount" }, @@ -239,6 +248,9 @@ "confirmTransaction": { "message": "Confirm Transaction" }, + "congratulations": { + "message": "Congratulations" + }, "connectHardwareWallet": { "message": "Connect Hardware Wallet" }, @@ -326,6 +338,9 @@ "createAccount": { "message": "Create Account" }, + "createAWallet": { + "message": "Create a Wallet" + }, "createDen": { "message": "Create" }, @@ -448,6 +463,24 @@ "encryptNewDen": { "message": "Encrypt your new DEN" }, + "endOfFlowMessage1": { + "message": "You passed the test - keep your seedphrase safe, it's your responsibility!" + }, + "endOfFlowMessage2": { + "message": "Tips on storing it safely" + }, + "endOfFlowMessage3": { + "message": "Save a backup in multiple places" + }, + "endOfFlowMessage4": { + "message": "Never tell anyone" + }, + "endOfFlowMessage5": { + "message": "If you need to back your seed phrase again, you can find it in Settings -> Security." + }, + "endOfFlowMessage6": { + "message": "MetaMask cannot recover your seedphrase. Learn more." + }, "ensNameNotFound": { "message": "ENS name not found" }, @@ -581,10 +614,16 @@ "getHelp": { "message": "Get Help." }, + "getStarted": { + "message": "Get Started" + }, "greaterThanMin": { "message": "must be greater than or equal to $1.", "description": "helper for inputting hex as decimal input" }, + "happyToSeeYou": { + "message": "We’re happy to see you." + }, "hardware": { "message": "hardware" }, @@ -647,6 +686,9 @@ "importDen": { "message": "Import Existing DEN" }, + "importWallet": { + "message": "Import Wallet" + }, "imported": { "message": "Imported", "description": "status showing that an account has been fully loaded into the keyring" @@ -731,6 +773,9 @@ "message": "must be less than or equal to $1.", "description": "helper for inputting hex as decimal input" }, + "letsGoSetUp": { + "message": "Yes, let’s get set up!" + }, "likeToAddTokens": { "message": "Would you like to add these tokens?" }, @@ -777,7 +822,7 @@ "message": "Message" }, "metamaskDescription": { - "message": "MetaMask is a secure identity vault for Ethereum." + "message": "Connecting you to Ethereum and the Decentralized Web." }, "metamaskSeedWords": { "message": "MetaMask Seed Words" @@ -848,6 +893,21 @@ "newNetwork": { "message": "New Network" }, + "newToMetaMask": { + "message": "New to MetaMask?" + }, + "noAlreadyHaveSeed": { + "message": "No, I already have a seed phrase" + }, + "protectYourKeys": { + "message": "Protect Your Keys!" + }, + "protectYourKeysMessage1": { + "message": "Be careful with your seed phrase — there have been reports of websites that attempt to imitate MetaMask. MetaMask will never ask for your seed phrase!" + }, + "protectYourKeysMessage2": { + "message": "Keep your phrase safe. If you see something fishy, or you’re uncertain about a website, email support@metamask.io" + }, "rpcURL": { "message": "New RPC URL" }, @@ -1609,6 +1669,9 @@ "yourUniqueAccountImageDescription2": { "message": "You’ll see this image everytime you need to confirm a transaction." }, + "yourUniqueAccountImageDescription3": { + "message": "MetaMask will never ask for your seed phrase!" + }, "zeroGasPriceOnSpeedUpError": { "message":"Zero gas price on speed up" } diff --git a/app/images/download-alt.svg b/app/images/download-alt.svg new file mode 100644 index 000000000..11c54fd66 --- /dev/null +++ b/app/images/download-alt.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/images/sleuth.svg b/app/images/sleuth.svg new file mode 100644 index 000000000..f4ac8c787 --- /dev/null +++ b/app/images/sleuth.svg @@ -0,0 +1 @@ + diff --git a/app/images/thin-plus.svg b/app/images/thin-plus.svg new file mode 100644 index 000000000..f46c72a4a --- /dev/null +++ b/app/images/thin-plus.svg @@ -0,0 +1,4 @@ + + + + diff --git a/test/e2e/beta/from-import-beta-ui.spec.js b/test/e2e/beta/from-import-beta-ui.spec.js index d4a380584..ad3e8b1fe 100644 --- a/test/e2e/beta/from-import-beta-ui.spec.js +++ b/test/e2e/beta/from-import-beta-ui.spec.js @@ -65,13 +65,16 @@ describe('Using MetaMask with an existing account', function () { beforeEach(async function () { await driver.executeScript( + 'window.origFetch = window.fetch.bind(window);' + 'window.fetch = ' + '(...args) => { ' + 'if (args[0] === "https://ethgasstation.info/json/ethgasAPI.json") { return ' + 'Promise.resolve({ json: () => Promise.resolve(JSON.parse(\'' + fetchMockResponses.ethGasBasic + '\')) }); } else if ' + '(args[0] === "https://ethgasstation.info/json/predictTable.json") { return ' + - 'Promise.resolve({ json: () => Promise.resolve(JSON.parse(\'' + fetchMockResponses.ethGasPredictTable + '\')) }); } ' + - 'return window.fetch(...args); }' + 'Promise.resolve({ json: () => Promise.resolve(JSON.parse(\'' + fetchMockResponses.ethGasPredictTable + '\')) }); } else if ' + + '(args[0] === "https://dev.blockscale.net/api/gasexpress.json") { return ' + + 'Promise.resolve({ json: () => Promise.resolve(JSON.parse(\'' + fetchMockResponses.gasExpress + '\')) }); } ' + + 'return window.origFetch(...args); }' ) }) @@ -95,16 +98,19 @@ describe('Using MetaMask with an existing account', function () { describe('First time flow starting from an existing seed phrase', () => { it('clicks the continue button on the welcome screen', async () => { - const welcomeScreenBtn = await findElement(driver, By.css('.welcome-page .first-time-flow__button')) + await findElement(driver, By.css('.welcome-page__header')) + const welcomeScreenBtn = await findElement(driver, By.css('.first-time-flow__button')) welcomeScreenBtn.click() await delay(largeDelayMs) }) - it('imports a seed phrase', async () => { - const [seedPhrase] = await findElements(driver, By.xpath(`//a[contains(text(), 'Import with seed phrase')]`)) - await seedPhrase.click() - await delay(regularDelayMs) + it('clicks the "Import Wallet" option', async () => { + const customRpcButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Import Wallet')]`)) + customRpcButton.click() + await delay(largeDelayMs) + }) + it('imports a seed phrase', async () => { const [seedTextArea] = await findElements(driver, By.css('textarea.first-time-flow__textarea')) await seedTextArea.sendKeys(testSeedPhrase) await delay(regularDelayMs) @@ -114,39 +120,25 @@ describe('Using MetaMask with an existing account', function () { const [confirmPassword] = await findElements(driver, By.id('confirm-password')) confirmPassword.sendKeys('correct horse battery staple') + const tosCheckBox = await findElement(driver, By.css('.first-time-flow__checkbox')) + await tosCheckBox.click() + const [importButton] = await findElements(driver, By.xpath(`//button[contains(text(), 'Import')]`)) await importButton.click() await delay(regularDelayMs) }) - it('clicks through the ToS', async () => { - // terms of use - await findElement(driver, By.css('.first-time-flow__markdown')) - const canClickThrough = await driver.findElement(By.css('button.first-time-flow__button')).isEnabled() - assert.equal(canClickThrough, false, 'disabled continue button') - const bottomOfTos = await findElement(driver, By.linkText('Attributions')) - await driver.executeScript('arguments[0].scrollIntoView(true)', bottomOfTos) - await delay(regularDelayMs) - const acceptTos = await findElement(driver, By.css('button.first-time-flow__button')) - driver.wait(until.elementIsEnabled(acceptTos)) - await acceptTos.click() - await delay(regularDelayMs) - }) - - it('clicks through the privacy notice', async () => { - // privacy notice + it('clicks through the security warning screen', async () => { + await findElement(driver, By.xpath(`//div[contains(text(), 'Protect Your Keys!')]`)) const nextScreen = await findElement(driver, By.css('button.first-time-flow__button')) await nextScreen.click() await delay(regularDelayMs) }) - it('clicks through the phishing notice', async () => { - // phishing notice - const noticeElement = await driver.findElement(By.css('.first-time-flow__markdown')) - await driver.executeScript('arguments[0].scrollTop = arguments[0].scrollHeight', noticeElement) - await delay(regularDelayMs) - const nextScreen = await findElement(driver, By.css('button.first-time-flow__button')) - await nextScreen.click() + it('clicks through the success screen', async () => { + await findElement(driver, By.xpath(`//div[contains(text(), 'Congratulations')]`)) + const doneButton = await findElement(driver, By.css('button.first-time-flow__button')) + await doneButton.click() await delay(regularDelayMs) }) }) diff --git a/test/e2e/beta/metamask-beta-responsive-ui.spec.js b/test/e2e/beta/metamask-beta-responsive-ui.spec.js index 099ed944e..781811d6d 100644 --- a/test/e2e/beta/metamask-beta-responsive-ui.spec.js +++ b/test/e2e/beta/metamask-beta-responsive-ui.spec.js @@ -80,135 +80,112 @@ describe('MetaMask', function () { }) describe('Going through the first time flow', () => { - it('clicks the continue button on the welcome screen', async () => { - const welcomeScreenBtn = await findElement(driver, By.css('.welcome-page .first-time-flow__button')) - welcomeScreenBtn.click() - await delay(largeDelayMs) - }) + it('clicks the continue button on the welcome screen', async () => { + await findElement(driver, By.css('.welcome-page__header')) + const welcomeScreenBtn = await findElement(driver, By.css('.first-time-flow__button')) + welcomeScreenBtn.click() + await delay(largeDelayMs) + }) - it('accepts a secure password', async () => { - const passwordBox = await findElement(driver, By.css('.first-time-flow__form #create-password')) - const passwordBoxConfirm = await findElement(driver, By.css('.first-time-flow__form #confirm-password')) - const button = await findElement(driver, By.css('.first-time-flow__form button')) + it('clicks the "Create New Wallet" option', async () => { + const customRpcButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Create a Wallet')]`)) + customRpcButton.click() + await delay(largeDelayMs) + }) - await passwordBox.sendKeys('correct horse battery staple') - await passwordBoxConfirm.sendKeys('correct horse battery staple') - await button.click() - await delay(regularDelayMs) - }) + it('accepts a secure password', async () => { + const passwordBox = await findElement(driver, By.css('.first-time-flow__form #create-password')) + const passwordBoxConfirm = await findElement(driver, By.css('.first-time-flow__form #confirm-password')) + const button = await findElement(driver, By.css('.first-time-flow__form button')) - it('clicks through the unique image screen', async () => { - await findElement(driver, By.css('.first-time-flow__unique-image')) - const nextScreen = await findElement(driver, By.css('button.first-time-flow__button')) - await nextScreen.click() - await delay(regularDelayMs) - }) + await passwordBox.sendKeys('correct horse battery staple') + await passwordBoxConfirm.sendKeys('correct horse battery staple') - it('clicks through the ToS', async () => { - // terms of use - await findElement(driver, By.css('.first-time-flow__markdown')) - const canClickThrough = await driver.findElement(By.css('button.first-time-flow__button')).isEnabled() - assert.equal(canClickThrough, false, 'disabled continue button') - const bottomOfTos = await findElement(driver, By.linkText('Attributions')) - await driver.executeScript('arguments[0].scrollIntoView(true)', bottomOfTos) - await delay(regularDelayMs) - const acceptTos = await findElement(driver, By.css('button.first-time-flow__button')) - driver.wait(until.elementIsEnabled(acceptTos)) - await acceptTos.click() - await delay(regularDelayMs) - }) + const tosCheckBox = await findElement(driver, By.css('.first-time-flow__checkbox')) + await tosCheckBox.click() - it('clicks through the privacy notice', async () => { - // privacy notice - const nextScreen = await findElement(driver, By.css('button.first-time-flow__button')) - await nextScreen.click() - await delay(regularDelayMs) - }) + await button.click() + await delay(regularDelayMs) + }) - it('clicks through the phishing notice', async () => { - // phishing notice - const noticeElement = await driver.findElement(By.css('.first-time-flow__markdown')) - await driver.executeScript('arguments[0].scrollTop = arguments[0].scrollHeight', noticeElement) - await delay(regularDelayMs) - const nextScreen = await findElement(driver, By.css('button.first-time-flow__button')) - await nextScreen.click() - await delay(regularDelayMs) - }) + it('clicks through the security warning screen', async () => { + await findElement(driver, By.xpath(`//div[contains(text(), 'Protect Your Keys!')]`)) + const nextScreen = await findElement(driver, By.css('button.first-time-flow__button')) + await nextScreen.click() + await delay(regularDelayMs) + }) - let seedPhrase + let seedPhrase - it('reveals the seed phrase', async () => { - const byRevealButton = By.css('.reveal-seed-phrase__secret-blocker .reveal-seed-phrase__reveal-button') - await driver.wait(until.elementLocated(byRevealButton, 10000)) - const revealSeedPhraseButton = await findElement(driver, byRevealButton, 10000) - await revealSeedPhraseButton.click() - await delay(regularDelayMs) + it('reveals the seed phrase', async () => { + const byRevealButton = By.css('.reveal-seed-phrase__secret-blocker .reveal-seed-phrase__reveal-button') + await driver.wait(until.elementLocated(byRevealButton, 10000)) + const revealSeedPhraseButton = await findElement(driver, byRevealButton, 10000) + await revealSeedPhraseButton.click() + await delay(regularDelayMs) - seedPhrase = await driver.findElement(By.css('.reveal-seed-phrase__secret-words')).getText() - assert.equal(seedPhrase.split(' ').length, 12) - await delay(regularDelayMs) + seedPhrase = await driver.findElement(By.css('.reveal-seed-phrase__secret-words')).getText() + assert.equal(seedPhrase.split(' ').length, 12) + await delay(regularDelayMs) - const nextScreen = await findElement(driver, By.css('button.first-time-flow__button')) - await nextScreen.click() - await delay(regularDelayMs) - }) + const nextScreen = await findElement(driver, By.css('button.first-time-flow__button')) + await nextScreen.click() + await delay(regularDelayMs) + }) - async function clickWordAndWait (word) { - const xpath = `//div[contains(@class, 'confirm-seed-phrase__seed-word--shuffled') and not(contains(@class, 'confirm-seed-phrase__seed-word--selected')) and contains(text(), '${word}')]` - const word0 = await findElement(driver, By.xpath(xpath), 10000) + async function clickWordAndWait (word) { + const xpath = `//div[contains(@class, 'confirm-seed-phrase__seed-word--shuffled') and not(contains(@class, 'confirm-seed-phrase__seed-word--selected')) and contains(text(), '${word}')]` + const word0 = await findElement(driver, By.xpath(xpath), 10000) - await word0.click() - await delay(tinyDelayMs) - } + await word0.click() + await delay(tinyDelayMs) + } - async function retypeSeedPhrase (words, wasReloaded, count = 0) { - try { - if (wasReloaded) { - const byRevealButton = By.css('.reveal-seed-phrase__secret-blocker .reveal-seed-phrase__reveal-button') - await driver.wait(until.elementLocated(byRevealButton, 10000)) - const revealSeedPhraseButton = await findElement(driver, byRevealButton, 10000) - await revealSeedPhraseButton.click() - await delay(regularDelayMs) + async function retypeSeedPhrase (words, wasReloaded, count = 0) { + try { + if (wasReloaded) { + const byRevealButton = By.css('.reveal-seed-phrase__secret-blocker .reveal-seed-phrase__reveal-button') + await driver.wait(until.elementLocated(byRevealButton, 10000)) + const revealSeedPhraseButton = await findElement(driver, byRevealButton, 10000) + await revealSeedPhraseButton.click() + await delay(regularDelayMs) - const nextScreen = await findElement(driver, By.css('button.first-time-flow__button')) - await nextScreen.click() - await delay(regularDelayMs) - } + const nextScreen = await findElement(driver, By.css('button.first-time-flow__button')) + await nextScreen.click() + await delay(regularDelayMs) + } - for (let i = 0; i < 12; i++) { - await clickWordAndWait(words[i]) - } - } catch (e) { - if (count > 2) { - throw e - } else { - await loadExtension(driver, extensionId) - await retypeSeedPhrase(words, true, count + 1) + for (let i = 0; i < 12; i++) { + await clickWordAndWait(words[i]) + } + } catch (e) { + if (count > 2) { + throw e + } else { + await loadExtension(driver, extensionId) + await retypeSeedPhrase(words, true, count + 1) + } } } - } - it('can retype the seed phrase', async () => { - const words = seedPhrase.split(' ') + it('can retype the seed phrase', async () => { + const words = seedPhrase.split(' ') - await retypeSeedPhrase(words) - await delay(regularDelayMs) + await retypeSeedPhrase(words) - const confirm = await findElement(driver, By.xpath(`//button[contains(text(), 'Confirm')]`)) - await confirm.click() - await delay(regularDelayMs) + const confirm = await findElement(driver, By.xpath(`//button[contains(text(), 'Confirm')]`)) + await confirm.click() + await delay(regularDelayMs) + }) + + it('clicks through the success screen', async () => { + await findElement(driver, By.xpath(`//div[contains(text(), 'Congratulations')]`)) + const doneButton = await findElement(driver, By.css('button.first-time-flow__button')) + await doneButton.click() + await delay(regularDelayMs) + }) }) - it('clicks through the deposit modal', async () => { - const byBuyModal = By.css('span .modal') - const buyModal = await driver.wait(until.elementLocated(byBuyModal)) - const closeModal = await findElement(driver, By.css('.page-container__header-close')) - await closeModal.click() - await driver.wait(until.stalenessOf(buyModal)) - await delay(regularDelayMs) - }) - }) - describe('Show account information', () => { it('show account details dropdown menu', async () => { await driver.findElement(By.css('div.menu-bar__open-in-browser')).click() diff --git a/test/e2e/beta/metamask-beta-ui.spec.js b/test/e2e/beta/metamask-beta-ui.spec.js index 798cce372..26aa50a43 100644 --- a/test/e2e/beta/metamask-beta-ui.spec.js +++ b/test/e2e/beta/metamask-beta-ui.spec.js @@ -102,11 +102,18 @@ describe('MetaMask', function () { describe('Going through the first time flow', () => { it('clicks the continue button on the welcome screen', async () => { - const welcomeScreenBtn = await findElement(driver, By.css('.welcome-page .first-time-flow__button')) + await findElement(driver, By.css('.welcome-page__header')) + const welcomeScreenBtn = await findElement(driver, By.css('.first-time-flow__button')) welcomeScreenBtn.click() await delay(largeDelayMs) }) + it('clicks the "Create New Wallet" option', async () => { + const customRpcButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Create a Wallet')]`)) + customRpcButton.click() + await delay(largeDelayMs) + }) + it('accepts a secure password', async () => { const passwordBox = await findElement(driver, By.css('.first-time-flow__form #create-password')) const passwordBoxConfirm = await findElement(driver, By.css('.first-time-flow__form #confirm-password')) @@ -114,43 +121,16 @@ describe('MetaMask', function () { await passwordBox.sendKeys('correct horse battery staple') await passwordBoxConfirm.sendKeys('correct horse battery staple') + + const tosCheckBox = await findElement(driver, By.css('.first-time-flow__checkbox')) + await tosCheckBox.click() + await button.click() await delay(regularDelayMs) }) - it('clicks through the unique image screen', async () => { - await findElement(driver, By.css('.first-time-flow__unique-image')) - const nextScreen = await findElement(driver, By.css('button.first-time-flow__button')) - await nextScreen.click() - await delay(regularDelayMs) - }) - - it('clicks through the ToS', async () => { - // terms of use - await findElement(driver, By.css('.first-time-flow__markdown')) - const canClickThrough = await driver.findElement(By.css('button.first-time-flow__button')).isEnabled() - assert.equal(canClickThrough, false, 'disabled continue button') - const bottomOfTos = await findElement(driver, By.linkText('Attributions')) - await driver.executeScript('arguments[0].scrollIntoView(true)', bottomOfTos) - await delay(regularDelayMs) - const acceptTos = await findElement(driver, By.css('button.first-time-flow__button')) - driver.wait(until.elementIsEnabled(acceptTos)) - await acceptTos.click() - await delay(regularDelayMs) - }) - - it('clicks through the privacy notice', async () => { - // privacy notice - const nextScreen = await findElement(driver, By.css('button.first-time-flow__button')) - await nextScreen.click() - await delay(regularDelayMs) - }) - - it('clicks through the phishing notice', async () => { - // phishing notice - const noticeElement = await driver.findElement(By.css('.first-time-flow__markdown')) - await driver.executeScript('arguments[0].scrollTop = arguments[0].scrollHeight', noticeElement) - await delay(regularDelayMs) + it('clicks through the security warning screen', async () => { + await findElement(driver, By.xpath(`//div[contains(text(), 'Protect Your Keys!')]`)) const nextScreen = await findElement(driver, By.css('button.first-time-flow__button')) await nextScreen.click() await delay(regularDelayMs) @@ -219,12 +199,10 @@ describe('MetaMask', function () { await delay(regularDelayMs) }) - it('clicks through the deposit modal', async () => { - const byBuyModal = By.css('span .modal') - const buyModal = await driver.wait(until.elementLocated(byBuyModal)) - const closeModal = await findElement(driver, By.css('.page-container__header-close')) - await closeModal.click() - await driver.wait(until.stalenessOf(buyModal)) + it('clicks through the success screen', async () => { + await findElement(driver, By.xpath(`//div[contains(text(), 'Congratulations')]`)) + const doneButton = await findElement(driver, By.css('button.first-time-flow__button')) + await doneButton.click() await delay(regularDelayMs) }) }) diff --git a/ui/app/components/pages/first-time-flow/create-password/create-password.component.js b/ui/app/components/pages/first-time-flow/create-password/create-password.component.js index 69b1e549f..7cca82ca6 100644 --- a/ui/app/components/pages/first-time-flow/create-password/create-password.component.js +++ b/ui/app/components/pages/first-time-flow/create-password/create-password.component.js @@ -8,13 +8,13 @@ import { INITIALIZE_CREATE_PASSWORD_ROUTE, INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, INITIALIZE_UNIQUE_IMAGE_ROUTE, - INITIALIZE_NOTICE_ROUTE, } from '../../../../routes' export default class CreatePassword extends PureComponent { static propTypes = { history: PropTypes.object, isInitialized: PropTypes.bool, + isImportedKeyring: PropTypes.bool, onCreateNewAccount: PropTypes.func, onCreateNewAccountFromSeed: PropTypes.func, } @@ -23,17 +23,38 @@ export default class CreatePassword extends PureComponent { const { isInitialized, history } = this.props if (isInitialized) { - history.push(INITIALIZE_NOTICE_ROUTE) + history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE) } } render () { - const { onCreateNewAccount, onCreateNewAccountFromSeed } = this.props + const { onCreateNewAccount, onCreateNewAccountFromSeed, isImportedKeyring } = this.props return (
+
+ + +
- + ( + + )} + /> { @@ -104,7 +104,7 @@ export default class ImportWithSeedPhrase extends PureComponent { try { await onSubmit(password, seedPhrase) - history.push(INITIALIZE_NOTICE_ROUTE) + history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE) } catch (error) { this.setState({ seedPhraseError: error.message }) } @@ -131,20 +131,26 @@ export default class ImportWithSeedPhrase extends PureComponent { return !passwordError && !confirmPasswordError && !seedPhraseError } + toggleTermsCheck = () => { + this.setState((prevState) => ({ + termsChecked: !prevState.termsChecked, + })) + } + render () { const { t } = this.context - const { seedPhraseError, passwordError, confirmPasswordError } = this.state + const { seedPhraseError, passwordError, confirmPasswordError, termsChecked } = this.state return (
-
+
{ e.preventDefault() - this.props.history.push(INITIALIZE_CREATE_PASSWORD_ROUTE) + this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE) }} href="#" > @@ -197,19 +203,22 @@ export default class ImportWithSeedPhrase extends PureComponent { margin="normal" largeLabel /> +
+
+ {termsChecked ? : null} +
+ + { t('agreeTermsOfService') } + +
- ) } diff --git a/ui/app/components/pages/first-time-flow/create-password/new-account/new-account.component.js b/ui/app/components/pages/first-time-flow/create-password/new-account/new-account.component.js index 54f8c1a70..b82cba0c5 100644 --- a/ui/app/components/pages/first-time-flow/create-password/new-account/new-account.component.js +++ b/ui/app/components/pages/first-time-flow/create-password/new-account/new-account.component.js @@ -1,10 +1,10 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import Breadcrumbs from '../../../../breadcrumbs' import Button from '../../../../button' import { INITIALIZE_UNIQUE_IMAGE_ROUTE, INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, + INITIALIZE_SELECT_ACTION_ROUTE, } from '../../../../../routes' import TextField from '../../../../text-field' @@ -23,6 +23,7 @@ export default class NewAccount extends PureComponent { confirmPassword: '', passwordError: '', confirmPasswordError: '', + termsChecked: false, } isValid () { @@ -111,12 +112,29 @@ export default class NewAccount extends PureComponent { history.push(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE) } + toggleTermsCheck = () => { + this.setState((prevState) => ({ + termsChecked: !prevState.termsChecked, + })) + } + render () { const { t } = this.context - const { password, confirmPassword, passwordError, confirmPasswordError } = this.state + const { password, confirmPassword, passwordError, confirmPasswordError, termsChecked } = this.state return (
+
{ t('createPassword') }
@@ -151,27 +169,23 @@ export default class NewAccount extends PureComponent { fullWidth largeLabel /> +
+
+ {termsChecked ? : null} +
+ + I agree to the Terms Of Service + +
- - { t('importWithSeedPhrase') } - -
) } diff --git a/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.component.js b/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.component.js index 41a566f0a..fa76074f5 100644 --- a/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.component.js +++ b/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.component.js @@ -1,9 +1,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import Identicon from '../../../../identicon' -import Breadcrumbs from '../../../../breadcrumbs' import Button from '../../../../button' -import { INITIALIZE_NOTICE_ROUTE } from '../../../../../routes' +import { INITIALIZE_SEED_PHRASE_ROUTE, INITIALIZE_END_OF_FLOW_ROUTE } from '../../../../../routes' export default class UniqueImageScreen extends PureComponent { static contextTypes = { @@ -11,42 +9,43 @@ export default class UniqueImageScreen extends PureComponent { } static propTypes = { - address: PropTypes.string, history: PropTypes.object, + isImportedKeyring: PropTypes.bool, } render () { const { t } = this.context - const { address, history } = this.props + const { history, isImportedKeyring } = this.props return (
-
- { t('yourUniqueAccountImage') } + { t('protectYourKeys') }
- { t('yourUniqueAccountImageDescription1') } + { t('protectYourKeysMessage1') }
- { t('yourUniqueAccountImageDescription2') } + { t('protectYourKeysMessage2') }
-
) } diff --git a/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.component.js b/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.component.js new file mode 100644 index 000000000..2ca5fd8ec --- /dev/null +++ b/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.component.js @@ -0,0 +1,70 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import Button from '../../../button' +import { DEFAULT_ROUTE } from '../../../../routes' + +export default class EndOfFlowScreen extends PureComponent { + static contextTypes = { + t: PropTypes.func, + } + + static propTypes = { + history: PropTypes.object, + completeOnboarding: PropTypes.func, + } + + render () { + const { t } = this.context + const { history, completeOnboarding } = this.props + + return ( +
+
+ + +
+
🎉
+
+ { t('congratulations') } +
+
+ { t('endOfFlowMessage1') } +
+
+ { t('endOfFlowMessage2') } +
+
+ { '• ' + t('endOfFlowMessage3') } +
+
+ { '• ' + t('endOfFlowMessage4') } +
+
+ { t('endOfFlowMessage5') } +
+
+ { '*' + t('endOfFlowMessage6') } +
+ +
+ ) + } +} diff --git a/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.container.js b/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.container.js new file mode 100644 index 000000000..ffe2c0efb --- /dev/null +++ b/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.container.js @@ -0,0 +1,11 @@ +import { connect } from 'react-redux' +import EndOfFlow from './end-of-flow.component' +import { setCompletedOnboarding } from '../../../../actions' + +const mapDispatchToProps = dispatch => { + return { + completeOnboarding: () => dispatch(setCompletedOnboarding()), + } +} + +export default connect(null, mapDispatchToProps)(EndOfFlow) diff --git a/ui/app/components/pages/first-time-flow/end-of-flow/index.js b/ui/app/components/pages/first-time-flow/end-of-flow/index.js new file mode 100644 index 000000000..b0643d155 --- /dev/null +++ b/ui/app/components/pages/first-time-flow/end-of-flow/index.js @@ -0,0 +1 @@ +export { default } from './end-of-flow.container' diff --git a/ui/app/components/pages/first-time-flow/end-of-flow/index.scss b/ui/app/components/pages/first-time-flow/end-of-flow/index.scss new file mode 100644 index 000000000..5f5cc5991 --- /dev/null +++ b/ui/app/components/pages/first-time-flow/end-of-flow/index.scss @@ -0,0 +1,47 @@ +.end-of-flow { + color: black; + font-family: Roboto; + font-style: normal; + + .app-header__logo-container { + width: 742px; + margin-top: 3%; + + @media screen and (max-width: $break-small) { + width: 100%; + } + } + + &__text-1, &__text-3 { + font-weight: normal; + font-size: 16px; + margin-top: 18px; + } + + &__text-2 { + font-weight: bold; + font-size: 16px; + margin-top: 26px; + } + + &__text-3 { + margin-top: 26px; + } + + &__text-3 { + margin-top: 2px; + } + + button { + width: 207px; + } + + &__start-over-button { + width: 744px; + } + + &__emoji { + font-size: 80px; + margin-top: 70px; + } +} \ No newline at end of file diff --git a/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js b/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js index 9e8bce2c8..43f792e06 100644 --- a/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js +++ b/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js @@ -5,7 +5,6 @@ import { DEFAULT_ROUTE, LOCK_ROUTE, INITIALIZE_WELCOME_ROUTE, - INITIALIZE_NOTICE_ROUTE, INITIALIZE_UNLOCK_ROUTE, INITIALIZE_SEED_PHRASE_ROUTE, } from '../../../../routes' @@ -15,7 +14,6 @@ export default class FirstTimeFlowSwitch extends PureComponent { completedOnboarding: PropTypes.bool, isInitialized: PropTypes.bool, isUnlocked: PropTypes.bool, - noActiveNotices: PropTypes.bool, seedPhrase: PropTypes.string, } @@ -24,7 +22,6 @@ export default class FirstTimeFlowSwitch extends PureComponent { completedOnboarding, isInitialized, isUnlocked, - noActiveNotices, seedPhrase, } = this.props @@ -44,10 +41,6 @@ export default class FirstTimeFlowSwitch extends PureComponent { return } - if (!noActiveNotices) { - return - } - if (seedPhrase) { return } diff --git a/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.container.js b/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.container.js index 8b7a74880..e44c216c0 100644 --- a/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.container.js +++ b/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.container.js @@ -6,14 +6,12 @@ const mapStateToProps = ({ metamask }) => { completedOnboarding, isInitialized, isUnlocked, - noActiveNotices, } = metamask return { completedOnboarding, isInitialized, isUnlocked, - noActiveNotices, } } diff --git a/ui/app/components/pages/first-time-flow/first-time-flow.component.js b/ui/app/components/pages/first-time-flow/first-time-flow.component.js index cde077803..82308dda2 100644 --- a/ui/app/components/pages/first-time-flow/first-time-flow.component.js +++ b/ui/app/components/pages/first-time-flow/first-time-flow.component.js @@ -3,17 +3,19 @@ import PropTypes from 'prop-types' import { Switch, Route } from 'react-router-dom' import FirstTimeFlowSwitch from './first-time-flow-switch' import Welcome from './welcome' +import SelectAction from './select-action' +import EndOfFlow from './end-of-flow' import Unlock from '../unlock-page' import CreatePassword from './create-password' -import Notices from './notices' import SeedPhrase from './seed-phrase' import { DEFAULT_ROUTE, INITIALIZE_WELCOME_ROUTE, INITIALIZE_CREATE_PASSWORD_ROUTE, - INITIALIZE_NOTICE_ROUTE, INITIALIZE_SEED_PHRASE_ROUTE, INITIALIZE_UNLOCK_ROUTE, + INITIALIZE_SELECT_ACTION_ROUTE, + INITIALIZE_END_OF_FLOW_ROUTE, } from '../../../routes' export default class FirstTimeFlow extends PureComponent { @@ -24,7 +26,6 @@ export default class FirstTimeFlow extends PureComponent { history: PropTypes.object, isInitialized: PropTypes.bool, isUnlocked: PropTypes.bool, - noActiveNotices: PropTypes.bool, unlockAccount: PropTypes.func, } @@ -70,14 +71,12 @@ export default class FirstTimeFlow extends PureComponent { } handleUnlock = async password => { - const { unlockAccount, history, noActiveNotices } = this.props + const { unlockAccount, history } = this.props try { const seedPhrase = await unlockAccount(password) this.setState({ seedPhrase }, () => { - noActiveNotices - ? history.push(INITIALIZE_SEED_PHRASE_ROUTE) - : history.push(INITIALIZE_NOTICE_ROUTE) + history.push(INITIALIZE_SEED_PHRASE_ROUTE) }) } catch (error) { throw new Error(error.message) @@ -99,26 +98,21 @@ export default class FirstTimeFlow extends PureComponent { /> )} /> - ( - - )} - /> ( )} /> + ( @@ -128,6 +122,11 @@ export default class FirstTimeFlow extends PureComponent { /> )} /> + { - const { metamask: { completedOnboarding, isInitialized, isUnlocked, noActiveNotices } } = state + const { metamask: { completedOnboarding, isInitialized, isUnlocked } } = state return { completedOnboarding, isInitialized, isUnlocked, - noActiveNotices, } } diff --git a/ui/app/components/pages/first-time-flow/index.scss b/ui/app/components/pages/first-time-flow/index.scss index e3aca0694..e14d57f58 100644 --- a/ui/app/components/pages/first-time-flow/index.scss +++ b/ui/app/components/pages/first-time-flow/index.scss @@ -1,18 +1,28 @@ @import './welcome/index'; +@import './select-action/index'; + @import './seed-phrase/index'; +@import './end-of-flow/index'; + .first-time-flow { width: 100%; background-color: $white; + display: flex; + justify-content: center; &__wrapper { @media screen and (min-width: $break-large) { - padding: 60px 275px 0 275px; + max-width: 742px; + display: flex; + flex-direction: column; + width: 100%; + margin-top: 2%; } - @media screen and (max-width: 1100px) { - padding: 36px; + .app-header__metafox-logo { + margin-bottom: 40px; } } @@ -21,9 +31,14 @@ flex-direction: column; } + &__create-back { + margin-bottom: 16px; + } + &__header { font-size: 2.5rem; margin-bottom: 24px; + color: black; } &__subheader { @@ -86,6 +101,7 @@ &__text-block { margin-bottom: 24px; + color: black; @media screen and (max-width: $break-small) { margin-bottom: 16px; @@ -95,5 +111,42 @@ &__button { margin: 35px 0 14px; + width: 140px; + height: 44px; + } + + &__checkbox-container { + display: flex; + align-items: center; + margin-top: 24px; + } + + &__checkbox { + background: #FFFFFF; + border: 1px solid #CDCDCD; + box-sizing: border-box; + height: 34px; + width: 34px; + display: flex; + justify-content: center; + align-items: center; + + &:hover { + border: 1.5px solid #2f9ae0; + } + + .fa-check { + color: #2f9ae0 + } + } + + &__checkbox-label { + font-family: Roboto; + font-style: normal; + font-weight: normal; + line-height: normal; + font-size: 18px; + color: #939090; + margin-left: 18px; } } diff --git a/ui/app/components/pages/first-time-flow/notices/index.js b/ui/app/components/pages/first-time-flow/notices/index.js deleted file mode 100644 index 024daaa68..000000000 --- a/ui/app/components/pages/first-time-flow/notices/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './notices.container' diff --git a/ui/app/components/pages/first-time-flow/notices/notices.component.js b/ui/app/components/pages/first-time-flow/notices/notices.component.js deleted file mode 100644 index fefaedd6f..000000000 --- a/ui/app/components/pages/first-time-flow/notices/notices.component.js +++ /dev/null @@ -1,124 +0,0 @@ -import React, { PureComponent } from 'react' -import PropTypes from 'prop-types' -import Markdown from 'react-markdown' -import debounce from 'lodash.debounce' -import Button from '../../../button' -import Identicon from '../../../identicon' -import Breadcrumbs from '../../../breadcrumbs' -import { DEFAULT_ROUTE, INITIALIZE_SEED_PHRASE_ROUTE } from '../../../../routes' - -export default class Notices extends PureComponent { - static contextTypes = { - t: PropTypes.func, - } - - static propTypes = { - address: PropTypes.string.isRequired, - completeOnboarding: PropTypes.func, - history: PropTypes.object, - isImportedKeyring: PropTypes.bool, - markNoticeRead: PropTypes.func, - nextUnreadNotice: PropTypes.shape({ - title: PropTypes.string, - date: PropTypes.string, - body: PropTypes.string, - }), - noActiveNotices: PropTypes.bool, - } - - static defaultProps = { - nextUnreadNotice: {}, - } - - state = { - atBottom: false, - } - - componentDidMount () { - const { noActiveNotices, history } = this.props - - if (noActiveNotices) { - history.push(INITIALIZE_SEED_PHRASE_ROUTE) - } - - this.onScroll() - } - - acceptTerms = async () => { - const { - completeOnboarding, - history, - isImportedKeyring, - markNoticeRead, - nextUnreadNotice, - } = this.props - - const hasActiveNotices = await markNoticeRead(nextUnreadNotice) - - if (!hasActiveNotices) { - if (isImportedKeyring) { - await completeOnboarding() - history.push(DEFAULT_ROUTE) - } else { - history.push(INITIALIZE_SEED_PHRASE_ROUTE) - } - } else { - this.setState({ atBottom: false }, () => this.onScroll()) - } - } - - onScroll = debounce(() => { - if (this.state.atBottom) { - return - } - - const target = document.querySelector('.first-time-flow__markdown') - - if (target) { - const { scrollTop, offsetHeight, scrollHeight } = target - const atBottom = scrollTop + offsetHeight >= scrollHeight - - this.setState({ atBottom }) - } - }, 25) - - render () { - const { t } = this.context - const { isImportedKeyring, address, nextUnreadNotice: { title, body } } = this.props - const { atBottom } = this.state - - return ( -
- -
- { title } -
- - - -
- ) - } -} diff --git a/ui/app/components/pages/first-time-flow/notices/notices.container.js b/ui/app/components/pages/first-time-flow/notices/notices.container.js deleted file mode 100644 index c65c5b7de..000000000 --- a/ui/app/components/pages/first-time-flow/notices/notices.container.js +++ /dev/null @@ -1,27 +0,0 @@ -import { connect } from 'react-redux' -import { withRouter } from 'react-router-dom' -import { compose } from 'recompose' -import { markNoticeRead, setCompletedOnboarding } from '../../../../actions' -import Notices from './notices.component' - -const mapStateToProps = ({ metamask }) => { - const { selectedAddress, nextUnreadNotice, noActiveNotices } = metamask - - return { - address: selectedAddress, - nextUnreadNotice, - noActiveNotices, - } -} - -const mapDispatchToProps = dispatch => { - return { - markNoticeRead: notice => dispatch(markNoticeRead(notice)), - completeOnboarding: () => dispatch(setCompletedOnboarding()), - } -} - -export default compose( - withRouter, - connect(mapStateToProps, mapDispatchToProps) -)(Notices) diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js b/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js index bc0f73a27..b5c4bf463 100644 --- a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js +++ b/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js @@ -2,10 +2,8 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' import shuffle from 'lodash.shuffle' -import Identicon from '../../../../identicon' import Button from '../../../../button' -import Breadcrumbs from '../../../../breadcrumbs' -import { DEFAULT_ROUTE, INITIALIZE_SEED_PHRASE_ROUTE } from '../../../../../routes' +import { INITIALIZE_END_OF_FLOW_ROUTE, INITIALIZE_SEED_PHRASE_ROUTE } from '../../../../../routes' import { exportAsFile } from '../../../../../../app/util' import { selectSeedWord, deselectSeedWord } from './confirm-seed-phrase.state' @@ -19,11 +17,8 @@ export default class ConfirmSeedPhrase extends PureComponent { } static propTypes = { - address: PropTypes.string, - completeOnboarding: PropTypes.func, history: PropTypes.object, onSubmit: PropTypes.func, - openBuyEtherModal: PropTypes.func, seedPhrase: PropTypes.string, } @@ -45,16 +40,14 @@ export default class ConfirmSeedPhrase extends PureComponent { } handleSubmit = async () => { - const { completeOnboarding, history, openBuyEtherModal } = this.props + const { history } = this.props if (!this.isValid()) { return } try { - await completeOnboarding() - history.push(DEFAULT_ROUTE) - openBuyEtherModal() + history.push(INITIALIZE_END_OF_FLOW_ROUTE) } catch (error) { console.error(error.message) } @@ -76,11 +69,11 @@ export default class ConfirmSeedPhrase extends PureComponent { render () { const { t } = this.context - const { address, history } = this.props + const { history } = this.props const { selectedSeedWords, shuffledSeedWords, selectedSeedWordsHash } = this.state return ( -
+
-
{ t('confirmSecretBackupPhrase') }
@@ -143,18 +131,13 @@ export default class ConfirmSeedPhrase extends PureComponent { }
-
) } diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.container.js b/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.container.js deleted file mode 100644 index 5fa2bec1e..000000000 --- a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.container.js +++ /dev/null @@ -1,12 +0,0 @@ -import { connect } from 'react-redux' -import ConfirmSeedPhrase from './confirm-seed-phrase.component' -import { setCompletedOnboarding, showModal } from '../../../../../actions' - -const mapDispatchToProps = dispatch => { - return { - completeOnboarding: () => dispatch(setCompletedOnboarding()), - openBuyEtherModal: () => dispatch(showModal({ name: 'DEPOSIT_ETHER'})), - } -} - -export default connect(null, mapDispatchToProps)(ConfirmSeedPhrase) diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js b/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js index beb53b383..c7b511503 100644 --- a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js +++ b/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js @@ -1 +1 @@ -export { default } from './confirm-seed-phrase.container' +export { default } from './confirm-seed-phrase.component' diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss b/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss index e0444571f..93137618c 100644 --- a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss +++ b/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss @@ -41,4 +41,8 @@ padding: 6px 18px; } } + + button { + margin-top: 0xp; + } } diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/index.js b/ui/app/components/pages/first-time-flow/seed-phrase/index.js index 7355bfb2c..185b3f089 100644 --- a/ui/app/components/pages/first-time-flow/seed-phrase/index.js +++ b/ui/app/components/pages/first-time-flow/seed-phrase/index.js @@ -1 +1 @@ -export { default } from './seed-phrase.container' +export { default } from './seed-phrase.component' diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/index.scss b/ui/app/components/pages/first-time-flow/seed-phrase/index.scss index 88b28950c..e4fd7be4f 100644 --- a/ui/app/components/pages/first-time-flow/seed-phrase/index.scss +++ b/ui/app/components/pages/first-time-flow/seed-phrase/index.scss @@ -26,11 +26,15 @@ min-width: 0; @media screen and (min-width: $break-large) { - margin-left: 48px; + margin-left: 81px; } @media screen and (max-width: $break-small) { margin-top: 24px; } + + .first-time-flow__text-block { + color: #5A5A5A; + } } } diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss b/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss index 568359d31..8a47447ed 100644 --- a/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss +++ b/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss @@ -50,4 +50,8 @@ cursor: pointer; font-weight: 500; } + + button { + margin-top: 0xp; + } } diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js b/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js index bb822d1d5..732ce14af 100644 --- a/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js +++ b/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js @@ -1,10 +1,8 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' -import Identicon from '../../../../identicon' import LockIcon from '../../../../lock-icon' import Button from '../../../../button' -import Breadcrumbs from '../../../../breadcrumbs' import { INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE } from '../../../../../routes' import { exportAsFile } from '../../../../../../app/util' @@ -14,7 +12,6 @@ export default class RevealSeedPhrase extends PureComponent { } static propTypes = { - address: PropTypes.string, history: PropTypes.object, seedPhrase: PropTypes.string, } @@ -75,16 +72,10 @@ export default class RevealSeedPhrase extends PureComponent { render () { const { t } = this.context - const { address } = this.props const { isShowingSeedPhrase } = this.state return ( -
- +
@@ -121,18 +112,13 @@ export default class RevealSeedPhrase extends PureComponent {
-
) } diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.component.js b/ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.component.js index 5f5b8a0b2..9eec89cdd 100644 --- a/ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.component.js +++ b/ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.component.js @@ -25,10 +25,23 @@ export default class SeedPhrase extends PureComponent { } render () { - const { address, seedPhrase } = this.props + const { seedPhrase } = this.props return (
+
+ + +
( )} @@ -47,7 +59,6 @@ export default class SeedPhrase extends PureComponent { render={props => ( )} diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.container.js b/ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.container.js deleted file mode 100644 index 4df024ffc..000000000 --- a/ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.container.js +++ /dev/null @@ -1,12 +0,0 @@ -import { connect } from 'react-redux' -import SeedPhrase from './seed-phrase.component' - -const mapStateToProps = state => { - const { metamask: { selectedAddress } } = state - - return { - address: selectedAddress, - } -} - -export default connect(mapStateToProps)(SeedPhrase) diff --git a/ui/app/components/pages/first-time-flow/select-action/index.js b/ui/app/components/pages/first-time-flow/select-action/index.js new file mode 100644 index 000000000..3aa968834 --- /dev/null +++ b/ui/app/components/pages/first-time-flow/select-action/index.js @@ -0,0 +1 @@ +export { default } from './select-action.component' diff --git a/ui/app/components/pages/first-time-flow/select-action/index.scss b/ui/app/components/pages/first-time-flow/select-action/index.scss new file mode 100644 index 000000000..b9585eb3b --- /dev/null +++ b/ui/app/components/pages/first-time-flow/select-action/index.scss @@ -0,0 +1,87 @@ +.select-action { + .app-header__logo-container { + width: 742px; + margin-top: 3%; + } + + &__body { + display: flex; + flex-direction: column; + align-items: center; + } + + &__body-header { + font-family: Roboto; + font-style: normal; + font-weight: normal; + line-height: 39px; + font-size: 28px; + text-align: center; + margin-top: 65px; + color: black; + } + + &__select-buttons { + display: flex; + flex-direction: row; + margin-top: 40px; + } + + &__select-button { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + width: 269px; + height: 278px; + + border: 1px solid #D8D8D8; + box-sizing: border-box; + border-radius: 10px; + margin-left: 22px; + + .first-time-flow__button { + max-width: 221px; + height: 44px; + } + } + + &__button-symbol { + color: #C4C4C4; + margin-top: 41px; + } + + &__button-content { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 144px; + } + + &__button-text-big { + font-family: Roboto; + font-style: normal; + font-weight: normal; + line-height: 28px; + font-size: 20px; + color: #000000; + margin-top: 12px; + text-align: center; + } + + &__button-text-small { + font-family: Roboto; + font-style: normal; + font-weight: normal; + line-height: 20px; + font-size: 14px; + color: #7A7A7B; + margin-top: 10px; + } + + button { + font-weight: 500; + width: 221px; + } +} \ No newline at end of file diff --git a/ui/app/components/pages/first-time-flow/select-action/select-action.component.js b/ui/app/components/pages/first-time-flow/select-action/select-action.component.js new file mode 100644 index 000000000..385efe02a --- /dev/null +++ b/ui/app/components/pages/first-time-flow/select-action/select-action.component.js @@ -0,0 +1,104 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import Button from '../../../button' +import { + INITIALIZE_CREATE_PASSWORD_ROUTE, + INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, + INITIALIZE_UNIQUE_IMAGE_ROUTE, +} from '../../../../routes' + +export default class SelectAction extends PureComponent { + static propTypes = { + history: PropTypes.object, + isInitialized: PropTypes.bool, + } + + static contextTypes = { + t: PropTypes.func, + } + + componentDidMount () { + const { history, isInitialized } = this.props + + if (isInitialized) { + history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE) + } + } + + handleCreate = () => { + this.props.history.push(INITIALIZE_CREATE_PASSWORD_ROUTE) + } + + handleImport = () => { + this.props.history.push(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE) + } + + render () { + const { t } = this.context + + return ( +
+
+ + +
+ +
+ + +
+
+ { t('newToMetaMask') } +
+
+
+
+
+ +
+
+ { t('noAlreadyHaveSeed') } +
+
+ +
+
+
+
+ +
+
+ { t('letsGoSetUp') } +
+
+ +
+
+
+ +
+
+ ) + } +} diff --git a/ui/app/components/pages/first-time-flow/select-action/select-action.container.js b/ui/app/components/pages/first-time-flow/select-action/select-action.container.js new file mode 100644 index 000000000..e69de29bb diff --git a/ui/app/components/pages/first-time-flow/welcome/index.scss b/ui/app/components/pages/first-time-flow/welcome/index.scss index 7527ceb35..3b5071480 100644 --- a/ui/app/components/pages/first-time-flow/welcome/index.scss +++ b/ui/app/components/pages/first-time-flow/welcome/index.scss @@ -1,43 +1,42 @@ .welcome-page { display: flex; flex-direction: column; - justify-content: center; + justify-content: flex-start; align-items: center; - width: 400px; + max-width: 442px; padding: 0 18px; + color: black; &__wrapper { display: flex; flex-direction: row; justify-content: center; - align-items: center; + align-items: flex-start; height: 100%; + margin-top: 110px; } &__header { - font-size: 1.5rem; - margin-bottom: 14px; + font-size: 28px; + margin-bottom: 22px; + margin-top: 50px; } &__description { text-align: center; + div { + font-size: 16px; + } + @media screen and (max-width: 575px) { font-size: .9rem; } } - &__button { - height: 54px; - width: 198px; - font-family: Roboto; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .14); - color: $white; - font-size: 1.25rem; + .first-time-flow__button { + width: 184px; font-weight: 500; - text-transform: uppercase; - margin: 35px 0 14px; - transition: 200ms ease-in-out; - background-color: rgba(247, 134, 28, .9); + margin-top: 44px; } } diff --git a/ui/app/components/pages/first-time-flow/welcome/welcome.component.js b/ui/app/components/pages/first-time-flow/welcome/welcome.component.js index f28a8210d..08eb86939 100644 --- a/ui/app/components/pages/first-time-flow/welcome/welcome.component.js +++ b/ui/app/components/pages/first-time-flow/welcome/welcome.component.js @@ -3,7 +3,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import Mascot from '../../../mascot' import Button from '../../../button' -import { INITIALIZE_CREATE_PASSWORD_ROUTE, INITIALIZE_NOTICE_ROUTE } from '../../../../routes' +import { INITIALIZE_SELECT_ACTION_ROUTE, INITIALIZE_UNIQUE_IMAGE_ROUTE } from '../../../../routes' export default class Welcome extends PureComponent { static propTypes = { @@ -25,12 +25,12 @@ export default class Welcome extends PureComponent { const { history, isInitialized } = this.props if (isInitialized) { - history.push(INITIALIZE_NOTICE_ROUTE) + history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE) } } handleContinue = () => { - this.props.history.push(INITIALIZE_CREATE_PASSWORD_ROUTE) + this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE) } render () { @@ -41,22 +41,22 @@ export default class Welcome extends PureComponent {
{ t('welcome') }
{ t('metamaskDescription') }
-
{ t('holdEther') }
+
{ t('happyToSeeYou') }
diff --git a/ui/app/components/pages/home/home.component.js b/ui/app/components/pages/home/home.component.js index 469c760a6..953d43aba 100644 --- a/ui/app/components/pages/home/home.component.js +++ b/ui/app/components/pages/home/home.component.js @@ -10,15 +10,12 @@ import { INITIALIZE_SEED_PHRASE_ROUTE, RESTORE_VAULT_ROUTE, CONFIRM_TRANSACTION_ROUTE, - NOTICE_ROUTE, CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE, } from '../../../routes' export default class Home extends PureComponent { static propTypes = { history: PropTypes.object, - noActiveNotices: PropTypes.bool, - lostAccounts: PropTypes.array, forgottenPassword: PropTypes.bool, seedWords: PropTypes.string, suggestedTokens: PropTypes.object, @@ -45,18 +42,11 @@ export default class Home extends PureComponent { render () { const { - noActiveNotices, - lostAccounts, forgottenPassword, seedWords, providerRequests, } = this.props - // notices - if (!noActiveNotices || (lostAccounts && lostAccounts.length > 0)) { - return - } - // seed words if (seedWords) { return diff --git a/ui/app/routes.js b/ui/app/routes.js index 2f4863547..7c4e805ab 100644 --- a/ui/app/routes.js +++ b/ui/app/routes.js @@ -25,7 +25,9 @@ const INITIALIZE_IMPORT_ACCOUNT_ROUTE = '/initialize/create-password/import-acco const INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE = '/initialize/create-password/import-with-seed-phrase' const INITIALIZE_UNIQUE_IMAGE_ROUTE = '/initialize/create-password/unique-image' const INITIALIZE_NOTICE_ROUTE = '/initialize/notice' +const INITIALIZE_SELECT_ACTION_ROUTE = '/initialize/select-action' const INITIALIZE_SEED_PHRASE_ROUTE = '/initialize/seed-phrase' +const INITIALIZE_END_OF_FLOW_ROUTE = '/initialize/end-of-flow' const INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE = '/initialize/seed-phrase/confirm' const CONFIRM_TRANSACTION_ROUTE = '/confirm-transaction' @@ -64,8 +66,10 @@ module.exports = { INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, INITIALIZE_UNIQUE_IMAGE_ROUTE, INITIALIZE_NOTICE_ROUTE, + INITIALIZE_SELECT_ACTION_ROUTE, INITIALIZE_SEED_PHRASE_ROUTE, INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE, + INITIALIZE_END_OF_FLOW_ROUTE, CONFIRM_TRANSACTION_ROUTE, CONFIRM_SEND_ETHER_PATH, CONFIRM_SEND_TOKEN_PATH,