import React, { Component } from 'react' import PropTypes from 'prop-types' import { connect } from 'react-redux' import classnames from 'classnames' import shuffle from 'lodash.shuffle' import { compose, onlyUpdateForPropTypes } from 'recompose' import Identicon from '../../../../ui/app/components/identicon' import { confirmSeedWords } from '../../../../ui/app/actions' import Breadcrumbs from './breadcrumbs' import LoadingScreen from './loading-screen' import { DEFAULT_ROUTE } from '../../../../ui/app/routes' class ConfirmSeedScreen extends Component { static propTypes = { isLoading: PropTypes.bool.isRequired, address: PropTypes.string.isRequired, seedWords: PropTypes.string, confirmSeedWords: PropTypes.func.isRequired, history: PropTypes.object, }; static defaultProps = { seedWords: '', } constructor (props) { super(props) const { seedWords } = props this.state = { selectedSeeds: [], shuffledSeeds: seedWords && shuffle(seedWords.split(' ')), } } componentWillMount () { const { seedWords, history } = this.props if (!seedWords) { history.push(DEFAULT_ROUTE) } } render () { const { seedWords, confirmSeedWords, history } = this.props const { selectedSeeds, shuffledSeeds } = this.state const isValid = seedWords === selectedSeeds.map(([_, seed]) => seed).join(' ') return (
{ this.props.isLoading ? : (
Confirm your Secret Backup Phrase
Please select each phrase in order to make sure it is correct.
{selectedSeeds.map(([_, word], i) => ( ))}
{shuffledSeeds.map((word, i) => { const isSelected = selectedSeeds .filter(([index, seed]) => seed === word && index === i) .length return ( ) })}
) }
) } } export default compose( onlyUpdateForPropTypes, connect( ({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({ seedWords, isLoading, address: selectedAddress, }), dispatch => ({ confirmSeedWords: () => dispatch(confirmSeedWords()), }) ) )(ConfirmSeedScreen)