import {validateMnemonic} from 'bip39' import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import TextField from '../../../../text-field' import Button from '../../../../button' import { INITIALIZE_SELECT_ACTION_ROUTE, INITIALIZE_END_OF_FLOW_ROUTE, } from '../../../../../routes' export default class ImportWithSeedPhrase extends PureComponent { static contextTypes = { t: PropTypes.func, metricsEvent: PropTypes.func, } static propTypes = { history: PropTypes.object, onSubmit: PropTypes.func.isRequired, } state = { seedPhrase: '', password: '', confirmPassword: '', seedPhraseError: '', passwordError: '', confirmPasswordError: '', termsChecked: false, } parseSeedPhrase = (seedPhrase) => { return seedPhrase .trim() .match(/\w+/g) .join(' ') } handleSeedPhraseChange (seedPhrase) { let seedPhraseError = '' if (seedPhrase) { const parsedSeedPhrase = this.parseSeedPhrase(seedPhrase) if (parsedSeedPhrase.split(' ').length !== 12) { seedPhraseError = this.context.t('seedPhraseReq') } else if (!validateMnemonic(parsedSeedPhrase)) { seedPhraseError = this.context.t('invalidSeedPhrase') } } this.setState({ seedPhrase, seedPhraseError }) } handlePasswordChange (password) { const { t } = this.context this.setState(state => { const { confirmPassword } = state let confirmPasswordError = '' let passwordError = '' if (password && password.length < 8) { passwordError = t('passwordNotLongEnough') } if (confirmPassword && password !== confirmPassword) { confirmPasswordError = t('passwordsDontMatch') } return { password, passwordError, confirmPasswordError, } }) } handleConfirmPasswordChange (confirmPassword) { const { t } = this.context this.setState(state => { const { password } = state let confirmPasswordError = '' if (password !== confirmPassword) { confirmPasswordError = t('passwordsDontMatch') } return { confirmPassword, confirmPasswordError, } }) } handleImport = async event => { event.preventDefault() if (!this.isValid()) { return } const { password, seedPhrase } = this.state const { history, onSubmit } = this.props try { await onSubmit(password, this.parseSeedPhrase(seedPhrase)) this.context.metricsEvent({ eventOpts: { category: 'Onboarding', action: 'Import Seed Phrase', name: 'Import Complete', }, }) history.push(INITIALIZE_END_OF_FLOW_ROUTE) } catch (error) { this.setState({ seedPhraseError: error.message }) } } isValid () { const { seedPhrase, password, confirmPassword, passwordError, confirmPasswordError, seedPhraseError, } = this.state if (!password || !confirmPassword || !seedPhrase || password !== confirmPassword) { return false } if (password.length < 8) { return false } return !passwordError && !confirmPasswordError && !seedPhraseError } toggleTermsCheck = () => { this.context.metricsEvent({ eventOpts: { category: 'Onboarding', action: 'Import Seed Phrase', name: 'Check ToS', }, }) this.setState((prevState) => ({ termsChecked: !prevState.termsChecked, })) } render () { const { t } = this.context const { seedPhraseError, passwordError, confirmPasswordError, termsChecked } = this.state return (
{ e.preventDefault() this.context.metricsEvent({ eventOpts: { category: 'Onboarding', action: 'Import Seed Phrase', name: 'Go Back from Onboarding Import', }, }) this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE) }} href="#" > {`< Back`}
{ t('importAccountSeedPhrase') }
{ t('secretPhrase') }