Update Seed Phrase Functionality on Account Import (#8730)

Update seed phrase functionality to be able to conceal seed phrase (as a password field) so it remains hidden on screen.

app/_locales/en/messages.json

@@ -370,7 +370,7 @@
     "message": "Confirmed"
   },
   "confirmPassword": {
-    "message": "Confirm Password"
+    "message": "Confirm password"
   },
   "confirmSecretBackupPhrase": {
     "message": "Confirm your Secret Backup Phrase"
@@ -784,10 +784,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"
@@ -986,7 +986,7 @@
     "message": "New Contract"
   },
   "newPassword": {
-    "message": "New Password (min 8 chars)"
+    "message": "New password (min 8 chars)"
   },
   "newNetwork": {
     "message": "New Network"
@@ -1281,6 +1281,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"
   },
@@ -1702,7 +1708,7 @@
     "message": "Visit our web site"
   },
   "walletSeed": {
-    "message": "Wallet Seed"
+    "message": "Seed phrase"
   },
   "welcomeBack": {
     "message": "Welcome Back!"

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

@@ -63,7 +63,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)
     })
 
@@ -73,7 +73,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)
 
@@ -82,7 +82,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: '',
@@ -179,9 +180,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
@@ -218,12 +225,37 @@ export default class ImportWithSeedPhrase extends PureComponent {
         </div>
         <div className="first-time-flow__textarea-wrapper">
           <label>{ t('walletSeed') }</label>
-          <textarea
+          {showSeedPhrase ? (
-            className="first-time-flow__textarea"
+            <textarea
-            onChange={(e) => this.handleSeedPhraseChange(e.target.value)}
+              className="first-time-flow__textarea"
-            value={this.state.seedPhrase}
+              onChange={(e) => this.handleSeedPhraseChange(e.target.value)}
-            placeholder={t('seedPhrasePlaceholder')}
+              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 && (
@@ -258,7 +290,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,7 +77,6 @@
     direction: ltr;
     font-size: 1rem;
     font-family: Roboto;
-    height: 190px;
     border: 1px solid #CDCDCD;
     border-radius: 6px;
     background-color: #FFFFFF;
@@ -85,6 +84,10 @@
     margin-top: 8px;
   }
 
+  &__seedphrase {
+    margin-top: 9px !important;
+  }
+
   &__breadcrumbs {
     margin: 36px 0;
   }