import React from 'react'; import { generateMnemonic } from 'bip39'; import translate from 'translations'; import Word from './Word'; import FinalSteps from '../FinalSteps'; import Template from '../Template'; import { WalletType } from '../../GenerateWallet'; import './Mnemonic.scss'; interface State { words: string[]; confirmValues: string[]; isConfirming: boolean; isConfirmed: boolean; } interface WordTuple { word: string; index: number; } export default class GenerateMnemonic extends React.Component<{}, State> { public state: State = { words: [], confirmValues: [], isConfirming: false, isConfirmed: false }; public componentDidMount() { this.regenerateWordArray(); } public render() { const { words, isConfirming, isConfirmed } = this.state; let content; if (isConfirmed) { content = ; } else { const canContinue = this.checkCanContinue(); const firstHalf: WordTuple[] = []; const lastHalf: WordTuple[] = []; words.forEach((word, index) => { if (index < words.length / 2) { firstHalf.push({ word, index }); } else { lastHalf.push({ word, index }); } }); content = (

Generate a {translate('x_Mnemonic')}

{isConfirming ? ` Re-enter your phrase to confirm you copied it correctly. If you forgot one of your words, just click the button beside the input to reveal it. ` : ` Write these words down. Do not copy them to your clipboard, or save them anywhere online. `}

{[firstHalf, lastHalf].map((ws, i) => (
{ws.map(this.makeWord)}
))}
{!isConfirming && ( )}
); } return ; } private regenerateWordArray = () => { this.setState({ words: generateMnemonic().split(' ') }); }; private handleConfirmChange = (index: number, value: string) => { this.setState((state: State) => { const confirmValues = [...state.confirmValues]; confirmValues[index] = value; this.setState({ confirmValues }); }); }; private goToNextStep = () => { if (!this.checkCanContinue()) { return; } if (this.state.isConfirming) { this.setState({ isConfirmed: true }); } else { this.setState({ isConfirming: true }); } }; private checkCanContinue = () => { const { isConfirming, words, confirmValues } = this.state; if (isConfirming) { return words.reduce((prev, word, index) => { return word === confirmValues[index] && prev; }, true); } else { return !!words.length; } }; private makeWord = (word: WordTuple) => ( ); private skip = () => { this.setState({ isConfirmed: true }); }; }