Add route for Mascara confirm seed

1 files changed, 158 insertions, 0 deletions

diff --git a/mascara/src/app/first-time/seed-screen.js b/mascara/src/app/first-time/seed-screen.js
new file mode 100644
index 000000000..dc1da851c
--- /dev/null
+++ b/mascara/src/app/first-time/seed-screen.js
@@ -0,0 +1,158 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import classnames from 'classnames'
+import { compose, onlyUpdateForPropTypes } from 'recompose'
+import Identicon from '../../../../ui/app/components/identicon'
+import Breadcrumbs from './breadcrumbs'
+import LoadingScreen from './loading-screen'
+import { DEFAULT_ROUTE, CONFIRM_SEED_ROUTE } from '../../../../ui/app/routes'
+
+const LockIcon = props => (
+  <svg
+    version="1.1"
+    id="Capa_1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    width="401.998px"
+    height="401.998px"
+    viewBox="0 0 401.998 401.998"
+    style={{enableBackground: 'new 0 0 401.998 401.998'}}
+    xmlSpace="preserve"
+    {...props}
+  >
+    <g>
+      <path
+        d="M357.45,190.721c-5.331-5.33-11.8-7.993-19.417-7.993h-9.131v-54.821c0-35.022-12.559-65.093-37.685-90.218
+          C266.093,12.563,236.025,0,200.998,0c-35.026,0-65.1,12.563-90.222,37.688C85.65,62.814,73.091,92.884,73.091,127.907v54.821
+          h-9.135c-7.611,0-14.084,2.663-19.414,7.993c-5.33,5.326-7.994,11.799-7.994,19.417V374.59c0,7.611,2.665,14.086,7.994,19.417
+          c5.33,5.325,11.803,7.991,19.414,7.991H338.04c7.617,0,14.085-2.663,19.417-7.991c5.325-5.331,7.994-11.806,7.994-19.417V210.135
+          C365.455,202.523,362.782,196.051,357.45,190.721z M274.087,182.728H127.909v-54.821c0-20.175,7.139-37.402,21.414-51.675
+          c14.277-14.275,31.501-21.411,51.678-21.411c20.179,0,37.399,7.135,51.677,21.411c14.271,14.272,21.409,31.5,21.409,51.675V182.728
+          z"
+      />
+    </g>
+  </svg>
+)
+
+class BackupPhraseScreen extends Component {
+  static propTypes = {
+    isLoading: PropTypes.bool.isRequired,
+    address: PropTypes.string.isRequired,
+    seedWords: PropTypes.string,
+    history: PropTypes.object,
+  };
+
+  static defaultProps = {
+    seedWords: '',
+  }
+
+  constructor (props) {
+    super(props)
+    this.state = {
+      isShowingSecret: false,
+    }
+  }
+
+  componentWillMount () {
+    const { seedWords, history } = this.props
+    if (!seedWords) {
+      history.push(DEFAULT_ROUTE)
+    }
+  }
+
+  renderSecretWordsContainer () {
+    const { isShowingSecret } = this.state
+
+    return (
+      <div className="backup-phrase__secret">
+        <div className={classnames('backup-phrase__secret-words', {
+          'backup-phrase__secret-words--hidden': !isShowingSecret,
+        })}>
+          {this.props.seedWords}
+        </div>
+        {!isShowingSecret && (
+          <div className="backup-phrase__secret-blocker">
+            <LockIcon width="28px" height="35px" fill="#FFFFFF" />
+            <button
+              className="backup-phrase__reveal-button"
+              onClick={() => this.setState({ isShowingSecret: true })}
+            >
+              Click here to reveal secret words
+            </button>
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  renderSecretScreen () {
+    const { isShowingSecret } = this.state
+    const { history } = this.props
+
+    return (
+      <div className="backup-phrase__content-wrapper">
+        <div>
+          <div className="backup-phrase__title">Secret Backup Phrase</div>
+          <div className="backup-phrase__body-text">
+            Your secret backup phrase makes it easy to back up and restore your account.
+          </div>
+          <div className="backup-phrase__body-text">
+            WARNING: Never disclose your backup phrase. Anyone with this phrase can take your Ether forever.
+          </div>
+          {this.renderSecretWordsContainer()}
+          <button
+            className="first-time-flow__button"
+            onClick={() => isShowingSecret && history.push(CONFIRM_SEED_ROUTE)}
+            disabled={!isShowingSecret}
+          >
+            Next
+          </button>
+          <Breadcrumbs total={3} currentIndex={1} />
+        </div>
+        <div className="backup-phrase__tips">
+          <div className="backup-phrase__tips-text">Tips:</div>
+          <div className="backup-phrase__tips-text">
+            Store this phrase in a password manager like 1password.
+          </div>
+          <div className="backup-phrase__tips-text">
+            Write this phrase on a piece of paper and store in a secure location. If you want even more security, write it down on multiple pieces of paper and store each in 2 - 3 different locations.
+          </div>
+          <div className="backup-phrase__tips-text">
+            Memorize this phrase.
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  render () {
+    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} />
+              {this.renderSecretScreen()}
+            </div>
+          )
+      }
+      </div>
+    )
+  }
+}
+
+export default compose(
+  onlyUpdateForPropTypes,
+  connect(
+    ({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({
+      seedWords,
+      isLoading,
+      address: selectedAddress,
+    })
+  )
+)(BackupPhraseScreen)