Update Seed Phrase Functionality on Account Import

app/_locales/en/messages.json

@@ -366,7 +366,7 @@
     "message": "Confirmed"
   },
   "confirmPassword": {
-    "message": "Confirm Password"
+    "message": "Confirm password"
   },
   "confirmSecretBackupPhrase": {
     "message": "Confirm your Secret Backup Phrase"
@@ -780,10 +780,10 @@
     "message": " Imported accounts will not be associated with your originally created MetaMask account seedphrase. Learn more about imported accounts "
   },
   "importAccountSeedPhrase": {
-    "message": "Import an Account with Seed Phrase"
+    "message": "Import an account with seed phrase"
   },
   "importWallet": {
-    "message": "Import Wallet"
+    "message": "Import wallet"
   },
   "importYourExisting": {
     "message": "Import your existing wallet using a 12 word seed phrase"
@@ -982,7 +982,7 @@
     "message": "New Contract"
   },
   "newPassword": {
-    "message": "New Password (min 8 chars)"
+    "message": "New password (min 8 chars)"
   },
   "newNetwork": {
     "message": "New Network"
@@ -1277,6 +1277,12 @@
   "seedPhrasePlaceholder": {
     "message": "Separate each word with a single space"
   },
+  "seedPhrasePlaceholderPaste": {
+    "message": "Paste seed phrase from clipboard"
+  },
+  "showSeedPhrase": {
+    "message": "Show seed phrase"
+  },
   "seedPhraseReq": {
     "message": "Seed phrases contain 12, 15, 18, 21, or 24 words"
   },
@@ -1698,7 +1704,7 @@
     "message": "Visit our web site"
   },
   "walletSeed": {
-    "message": "Wallet Seed"
+    "message": "Seed phrase"
   },
   "welcomeBack": {
     "message": "Welcome Back!"

test/e2e/from-import-ui.spec.js

@@ -64,7 +64,7 @@ describe('Using MetaMask with an existing account', function () {
     })
 
     it('clicks the "Import Wallet" option', async function () {
-      await driver.clickElement(By.xpath(`//button[contains(text(), 'Import Wallet')]`))
+      await driver.clickElement(By.xpath(`//button[contains(text(), 'Import wallet')]`))
       await driver.delay(largeDelayMs)
     })
 
@@ -74,7 +74,7 @@ describe('Using MetaMask with an existing account', function () {
     })
 
     it('imports a seed phrase', async function () {
-      const [seedTextArea] = await driver.findElements(By.css('textarea.first-time-flow__textarea'))
+      const [seedTextArea] = await driver.findElements(By.css('input[placeholder="Paste seed phrase from clipboard"]'))
       await seedTextArea.sendKeys(testSeedPhrase)
       await driver.delay(regularDelayMs)
 
@@ -83,7 +83,7 @@ describe('Using MetaMask with an existing account', function () {
       const [confirmPassword] = await driver.findElements(By.id('confirm-password'))
       confirmPassword.sendKeys('correct horse battery staple')
 
-      await driver.clickElement(By.css('.first-time-flow__checkbox'))
+      await driver.clickElement(By.css('.first-time-flow__terms'))
 
       await driver.clickElement(By.xpath(`//button[contains(text(), 'Import')]`))
       await driver.delay(regularDelayMs)

test/e2e/send-edit.spec.js

@@ -61,7 +61,7 @@ describe('Using MetaMask with an existing account', function () {
     })
 
     it('clicks the "Import Wallet" option', async function () {
-      await driver.clickElement(By.xpath(`//button[contains(text(), 'Import Wallet')]`))
+      await driver.clickElement(By.xpath(`//button[contains(text(), 'Import wallet')]`))
       await driver.delay(largeDelayMs)
     })
 
@@ -71,7 +71,7 @@ describe('Using MetaMask with an existing account', function () {
     })
 
     it('imports a seed phrase', async function () {
-      const [seedTextArea] = await driver.findElements(By.css('textarea.first-time-flow__textarea'))
+      const [seedTextArea] = await driver.findElements(By.css('input[placeholder="Paste seed phrase from clipboard"]'))
       await seedTextArea.sendKeys(testSeedPhrase)
       await driver.delay(regularDelayMs)
 
@@ -80,7 +80,7 @@ describe('Using MetaMask with an existing account', function () {
       const [confirmPassword] = await driver.findElements(By.id('confirm-password'))
       confirmPassword.sendKeys('correct horse battery staple')
 
-      await driver.clickElement(By.css('.first-time-flow__checkbox'))
+      await driver.clickElement(By.css('.first-time-flow__terms'))
 
       await driver.clickElement(By.xpath(`//button[contains(text(), 'Import')]`))
       await driver.delay(regularDelayMs)

test/e2e/threebox.spec.js

@@ -64,7 +64,7 @@ describe('MetaMask', function () {
       })
 
       it('clicks the "Import Wallet" option', async function () {
-        await driver.clickElement(By.xpath(`//button[contains(text(), 'Import Wallet')]`))
+        await driver.clickElement(By.xpath(`//button[contains(text(), 'Import wallet')]`))
         await driver.delay(largeDelayMs)
       })
 
@@ -74,7 +74,7 @@ describe('MetaMask', function () {
       })
 
       it('imports a seed phrase', async function () {
-        const [seedTextArea] = await driver.findElements(By.css('textarea.first-time-flow__textarea'))
+        const [seedTextArea] = await driver.findElements(By.css('input[placeholder="Paste seed phrase from clipboard"]'))
         await seedTextArea.sendKeys(testSeedPhrase)
         await driver.delay(regularDelayMs)
 
@@ -83,7 +83,7 @@ describe('MetaMask', function () {
         const [confirmPassword] = await driver.findElements(By.id('confirm-password'))
         confirmPassword.sendKeys('correct horse battery staple')
 
-        await driver.clickElement(By.css('.first-time-flow__checkbox'))
+        await driver.clickElement(By.css('.first-time-flow__terms'))
 
         await driver.clickElement(By.xpath(`//button[contains(text(), 'Import')]`))
         await driver.delay(regularDelayMs)
@@ -170,7 +170,7 @@ describe('MetaMask', function () {
       })
 
       it('clicks the "Import Wallet" option', async function () {
-        await driver2.clickElement(By.xpath(`//button[contains(text(), 'Import Wallet')]`))
+        await driver2.clickElement(By.xpath(`//button[contains(text(), 'Import wallet')]`))
         await driver2.delay(largeDelayMs)
       })
 
@@ -180,7 +180,7 @@ describe('MetaMask', function () {
       })
 
       it('imports a seed phrase', async function () {
-        const [seedTextArea] = await driver2.findElements(By.css('textarea.first-time-flow__textarea'))
+        const [seedTextArea] = await driver2.findElements(By.css('input[placeholder="Paste seed phrase from clipboard"]'))
         await seedTextArea.sendKeys(testSeedPhrase)
         await driver2.delay(regularDelayMs)
 
@@ -189,7 +189,7 @@ describe('MetaMask', function () {
         const [confirmPassword] = await driver2.findElements(By.id('confirm-password'))
         confirmPassword.sendKeys('correct horse battery staple')
 
-        await driver2.clickElement(By.css('.first-time-flow__checkbox'))
+        await driver2.clickElement(By.css('.first-time-flow__terms'))
 
         await driver2.clickElement(By.xpath(`//button[contains(text(), 'Import')]`))
         await driver2.delay(regularDelayMs)

test/e2e/web3.spec.js

@@ -60,7 +60,7 @@ describe('Using MetaMask with an existing account', function () {
     })
 
     it('clicks the "Import Wallet" option', async function () {
-      await driver.clickElement(By.xpath(`//button[contains(text(), 'Import Wallet')]`))
+      await driver.clickElement(By.xpath(`//button[contains(text(), 'Import wallet')]`))
       await driver.delay(largeDelayMs)
     })
 
@@ -70,7 +70,7 @@ describe('Using MetaMask with an existing account', function () {
     })
 
     it('imports a seed phrase', async function () {
-      const [seedTextArea] = await driver.findElements(By.css('textarea.first-time-flow__textarea'))
+      const [seedTextArea] = await driver.findElements(By.css('input[placeholder="Paste seed phrase from clipboard"]'))
       await seedTextArea.sendKeys(testSeedPhrase)
       await driver.delay(regularDelayMs)
 
@@ -79,7 +79,7 @@ describe('Using MetaMask with an existing account', function () {
       const [confirmPassword] = await driver.findElements(By.id('confirm-password'))
       confirmPassword.sendKeys('correct horse battery staple')
 
-      await driver.clickElement(By.css('.first-time-flow__checkbox'))
+      await driver.clickElement(By.css('.first-time-flow__terms'))
 
       await driver.clickElement(By.xpath(`//button[contains(text(), 'Import')]`))
       await driver.delay(regularDelayMs)

ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js

@@ -23,6 +23,7 @@ export default class ImportWithSeedPhrase extends PureComponent {
 
   state = {
     seedPhrase: '',
+    showSeedPhrase: false,
     password: '',
     confirmPassword: '',
     seedPhraseError: '',
@@ -195,9 +196,15 @@ export default class ImportWithSeedPhrase extends PureComponent {
     }))
   }
 
+  toggleShowSeedPhrase = () => {
+    this.setState(({ showSeedPhrase }) => ({
+      showSeedPhrase: !showSeedPhrase,
+    }))
+  }
+
   render () {
     const { t } = this.context
-    const { seedPhraseError, passwordError, confirmPasswordError, termsChecked } = this.state
+    const { seedPhraseError, showSeedPhrase, passwordError, confirmPasswordError, termsChecked } = this.state
 
     return (
       <form
@@ -234,12 +241,37 @@ export default class ImportWithSeedPhrase extends PureComponent {
         </div>
         <div className="first-time-flow__textarea-wrapper">
           <label>{ t('walletSeed') }</label>
-          <textarea
-            className="first-time-flow__textarea"
-            onChange={(e) => this.handleSeedPhraseChange(e.target.value)}
-            value={this.state.seedPhrase}
-            placeholder={t('seedPhrasePlaceholder')}
-          />
+          {showSeedPhrase ? (
+            <textarea
+              className="first-time-flow__textarea"
+              onChange={(e) => this.handleSeedPhraseChange(e.target.value)}
+              value={this.state.seedPhrase}
+              placeholder={t('seedPhrasePlaceholder')}
+            />
+          ) : (
+            <TextField
+              className="first-time-flow__textarea first-time-flow__seedphrase"
+              type="password"
+              onChange={(e) => this.handleSeedPhraseChange(e.target.value)}
+              value={this.state.seedPhrase}
+              placeholder={t('seedPhrasePlaceholderPaste')}
+            />
+          )}
+          <div className="first-time-flow__checkbox-container" onClick={this.toggleShowSeedPhrase}>
+            <div
+              className="first-time-flow__checkbox"
+              tabIndex="0"
+              role="checkbox"
+              onKeyPress={this.toggleShowSeedPhrase}
+              aria-checked={showSeedPhrase}
+              aria-labelledby="ftf-chk1-label"
+            >
+              {showSeedPhrase ? <i className="fa fa-check fa-2x" /> : null}
+            </div>
+            <span id="ftf-chk1-label" className="first-time-flow__checkbox-label">
+              { t('showSeedPhrase') }
+            </span>
+          </div>
         </div>
         {
           seedPhraseError && (
@@ -274,7 +306,7 @@ export default class ImportWithSeedPhrase extends PureComponent {
         />
         <div className="first-time-flow__checkbox-container" onClick={this.toggleTermsCheck}>
           <div
-            className="first-time-flow__checkbox"
+            className="first-time-flow__checkbox first-time-flow__terms"
             tabIndex="0"
             role="checkbox"
             onKeyPress={this.onTermsKeyPress}

ui/app/pages/first-time-flow/index.scss

@@ -77,14 +77,17 @@
     direction: ltr;
     font-size: 1rem;
     font-family: Roboto;
-    height: 190px;
     border: 1px solid #CDCDCD;
     border-radius: 6px;
     background-color: #FFFFFF;
     padding: 16px;
     margin-top: 8px;
   }
 
+  &__seedphrase {
+    margin-top: 9px !important;
+  }
+
   &__breadcrumbs {
     margin: 36px 0;
   }