From d9ea2df6c2a2cabedead09f90c3c9bb7b4c37dd1 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Mon, 4 Dec 2017 14:29:52 -0500
Subject: Add route for Mascara confirm seed

---
 mascara/src/app/first-time/confirm-seed-screen.js | 133 ++++++++++++++++++++++
 1 file changed, 133 insertions(+)
 create mode 100644 mascara/src/app/first-time/confirm-seed-screen.js

(limited to 'mascara/src/app/first-time/confirm-seed-screen.js')

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..6b730a2f8
--- /dev/null
+++ b/mascara/src/app/first-time/confirm-seed-screen.js
@@ -0,0 +1,133 @@
+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 (
+      <div className="first-time-flow">
+      {
+        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) => (
+                      <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 && confirmSeedWords().then(() => history.push(DEFAULT_ROUTE))}
+                    disabled={!isValid}
+                  >
+                    Confirm
+                  </button>
+                </div>
+              </div>
+              <Breadcrumbs total={3} currentIndex={1} />
+            </div>
+          )
+      }
+      </div>
+    )
+  }
+}
+
+export default compose(
+  onlyUpdateForPropTypes,
+  connect(
+    ({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({
+      seedWords,
+      isLoading,
+      address: selectedAddress,
+    }),
+    dispatch => ({
+      confirmSeedWords: () => dispatch(confirmSeedWords()),
+    })
+  )
+)(ConfirmSeedScreen)
-- 
cgit v1.2.3