allow restoring from metamask

fix brave/brave-browser#5698
requires: brave/eth-hd-keyring#4

brave/app/_locales/en/messages.json

@@ -22,5 +22,8 @@
   },
   "trezorCreateSubText": {
     "message": "Connect your Trezor hardware wallet to interact with dApps and make transfers to other connected wallets."
+  },
+  "metamaskImportSubText": {
+    "message": "Note: If importing from a Metamask wallet, enter 12 words instead of 24."
   }
 }

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

@@ -2,8 +2,13 @@ import React from 'react'
 import PasswordWarning from '../password-warning'
 import ImportWithSeedPhrase from '../../../../../../../ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component'
 import { validateMnemonic } from 'bip39'
+import PropTypes from 'prop-types'
 
 module.exports = class BraveImportWithSeedPhrase extends ImportWithSeedPhrase {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
   componentDidMount () {
     this.setState({ termsChecked: true })
   }
@@ -13,7 +18,8 @@ module.exports = class BraveImportWithSeedPhrase extends ImportWithSeedPhrase {
 
     if (seedPhrase) {
       const parsedSeedPhrase = this.parseSeedPhrase(seedPhrase)
-      if (parsedSeedPhrase.split(' ').length !== 24) {
+      if (parsedSeedPhrase.split(' ').length !== 24 &&
+        parsedSeedPhrase.split(' ').length !== 12) {
         seedPhraseError = this.context.t('seedPhraseReq')
       } else if (!validateMnemonic(parsedSeedPhrase)) {
         seedPhraseError = this.context.t('invalidSeedPhrase')
@@ -24,9 +30,11 @@ module.exports = class BraveImportWithSeedPhrase extends ImportWithSeedPhrase {
   }
 
   render () {
+    const { t } = this.context
     return (
       <div>
         {super.render()}
+        <div>{t('metamaskImportSubText')}</div>
         <PasswordWarning />
       </div>
     )

brave/ui/app/pages/keychains/restore-vault.js

@@ -10,8 +10,11 @@ class BraveRestoreVaultPage extends RestoreVaultPage {
   handleSeedPhraseChange (seedPhrase) {
     let seedPhraseError = null
 
-    if (seedPhrase && this.parseSeedPhrase(seedPhrase).split(' ').length !== 24) {
-      seedPhraseError = this.context.t('seedPhraseReq')
+    if (seedPhrase) {
+      const words = this.parseSeedPhrase(seedPhrase).split(' ')
+      if (words.length !== 24 && words.length !== 12) {
+        seedPhraseError = this.context.t('seedPhraseReq')
+      }
     }
 
     this.setState({ seedPhrase, seedPhraseError })