aboutsummaryrefslogtreecommitdiffstats
path: root/mascara/src/app/first-time/confirm-seed-screen.js
diff options
context:
space:
mode:
Diffstat (limited to 'mascara/src/app/first-time/confirm-seed-screen.js')
-rw-r--r--mascara/src/app/first-time/confirm-seed-screen.js129
1 files changed, 71 insertions, 58 deletions
diff --git a/mascara/src/app/first-time/confirm-seed-screen.js b/mascara/src/app/first-time/confirm-seed-screen.js
index c9382689e..6eabd7544 100644
--- a/mascara/src/app/first-time/confirm-seed-screen.js
+++ b/mascara/src/app/first-time/confirm-seed-screen.js
@@ -1,14 +1,15 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
import classnames from 'classnames'
import shuffle from 'lodash.shuffle'
-import { compose, onlyUpdateForPropTypes } from 'recompose'
+import { compose } 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'
+import { INITIALIZE_ROUTE, DEFAULT_ROUTE } from '../../../../ui/app/routes'
class ConfirmSeedScreen extends Component {
static propTypes = {
@@ -35,10 +36,18 @@ class ConfirmSeedScreen extends Component {
componentWillMount () {
const { seedWords, history } = this.props
if (!seedWords) {
- history.push(DEFAULT_ROUTE)
+ history.push(INITIALIZE_ROUTE)
}
}
+ handleClick () {
+ this.props.confirmSeedWords()
+ .then(() => {
+ console.log('FINISHED')
+ this.props.history.push(DEFAULT_ROUTE)
+ })
+ }
+
render () {
const { seedWords, confirmSeedWords, history } = this.props
const { selectedSeeds, shuffledSeeds } = this.state
@@ -50,66 +59,70 @@ class ConfirmSeedScreen extends Component {
this.props.isLoading
? <LoadingScreen loadingMessage="Creating your new account" />
: (
- <div className="backup-phrase">
- <Identicon address={this.props.address} diameter={70} />
- <div className="backup-phrase__content-wrapper">
- <div>
- <div className="backup-phrase__title">
- Confirm your Secret Backup Phrase
- </div>
- <div className="backup-phrase__body-text">
- Please select each phrase in order to make sure it is correct.
- </div>
- <div className="backup-phrase__confirm-secret">
- {selectedSeeds.map(([_, word], i) => (
+ <div className="first-view-main-wrapper">
+ <div className="first-view-main">
+ <div className="backup-phrase">
+ <Identicon address={this.props.address} diameter={70} />
+ <div className="backup-phrase__content-wrapper">
+ <div>
+ <div className="backup-phrase__title">
+ Confirm your Secret Backup Phrase
+ </div>
+ <div className="backup-phrase__body-text">
+ Please select each phrase in order to make sure it is correct.
+ </div>
+ <div className="backup-phrase__confirm-secret">
+ {selectedSeeds.map(([_, word], i) => (
+ <button
+ key={i}
+ className="backup-phrase__confirm-seed-option"
+ >
+ {word}
+ </button>
+ ))}
+ </div>
+ <div className="backup-phrase__confirm-seed-options">
+ {shuffledSeeds.map((word, i) => {
+ const isSelected = selectedSeeds
+ .filter(([index, seed]) => seed === word && index === i)
+ .length
+
+ return (
+ <button
+ key={i}
+ className={classnames('backup-phrase__confirm-seed-option', {
+ 'backup-phrase__confirm-seed-option--selected': isSelected,
+ })}
+ onClick={() => {
+ if (!isSelected) {
+ this.setState({
+ selectedSeeds: [...selectedSeeds, [i, word]],
+ })
+ } else {
+ this.setState({
+ selectedSeeds: selectedSeeds
+ .filter(([index, seed]) => !(seed === word && index === i)),
+ })
+ }
+ }}
+ >
+ {word}
+ </button>
+ )
+ })}
+ </div>
<button
- key={i}
- className="backup-phrase__confirm-seed-option"
+ className="first-time-flow__button"
+ onClick={() => isValid && this.handleClick()}
+ disabled={!isValid}
>
- {word}
+ Confirm
</button>
- ))}
- </div>
- <div className="backup-phrase__confirm-seed-options">
- {shuffledSeeds.map((word, i) => {
- const isSelected = selectedSeeds
- .filter(([index, seed]) => seed === word && index === i)
- .length
-
- return (
- <button
- key={i}
- className={classnames('backup-phrase__confirm-seed-option', {
- 'backup-phrase__confirm-seed-option--selected': isSelected,
- })}
- onClick={() => {
- if (!isSelected) {
- this.setState({
- selectedSeeds: [...selectedSeeds, [i, word]],
- })
- } else {
- this.setState({
- selectedSeeds: selectedSeeds
- .filter(([index, seed]) => !(seed === word && index === i)),
- })
- }
- }}
- >
- {word}
- </button>
- )
- })}
+ </div>
</div>
- <button
- className="first-time-flow__button"
- onClick={() => isValid && confirmSeedWords().then(() => history.push(DEFAULT_ROUTE))}
- disabled={!isValid}
- >
- Confirm
- </button>
+ <Breadcrumbs total={3} currentIndex={1} />
</div>
</div>
- <Breadcrumbs total={3} currentIndex={1} />
</div>
)
}
@@ -119,7 +132,7 @@ class ConfirmSeedScreen extends Component {
}
export default compose(
- onlyUpdateForPropTypes,
+ withRouter,
connect(
({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({
seedWords,