1 files changed, 151 insertions, 0 deletions
diff --git a/mascara/src/app/first-time/confirm-seed-screen.js b/mascara/src/app/first-time/confirm-seed-screen.js
new file mode 100644
index 000000000..438f383b1
--- /dev/null
+++ b/mascara/src/app/first-time/confirm-seed-screen.js
@@ -0,0 +1,151 @@
+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 } from 'recompose'
+import Identicon from '../../../../ui/app/components/identicon'
+import { confirmSeedWords, showModal } 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,
+    address: PropTypes.string,
+    seedWords: PropTypes.string,
+    confirmSeedWords: PropTypes.func,
+    history: PropTypes.object,
+    openBuyEtherModal: PropTypes.func,
+  };
+
+  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)
+    }
+  }
+
+  handleClick () {
+    const { confirmSeedWords, history, openBuyEtherModal } = this.props
+
+    confirmSeedWords()
+      .then(() => {
+        history.push(DEFAULT_ROUTE)
+        openBuyEtherModal()
+      })
+  }
+
+  render () {
+    const { seedWords } = this.props
+    const { selectedSeeds, shuffledSeeds } = this.state
+    const isValid = seedWords === selectedSeeds.map(([_, seed]) => seed).join(' ')
+
+    return (
+      <div className="first-time-flow">
+      {
+        this.props.isLoading
+          ? <LoadingScreen loadingMessage="Creating your new account" />
+          : (
+            <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
+                        className="first-time-flow__button"
+                        onClick={() => isValid && this.handleClick()}
+                        disabled={!isValid}
+                      >
+                        Confirm
+                      </button>
+                    </div>
+                  </div>
+                  <Breadcrumbs total={3} currentIndex={1} />
+                </div>
+              </div>
+            </div>
+          )
+      }
+      </div>
+    )
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(
+    ({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({
+      seedWords,
+      isLoading,
+      address: selectedAddress,
+    }),
+    dispatch => ({
+      confirmSeedWords: () => dispatch(confirmSeedWords()),
+      openBuyEtherModal: () => dispatch(showModal({ name: 'DEPOSIT_ETHER'})),
+    })
+  )
+)(ConfirmSeedScreen)