aboutsummaryrefslogtreecommitdiffstats
path: root/mascara
diff options
context:
space:
mode:
authorChi Kei Chan <chikeichan@gmail.com>2017-10-21 13:31:59 +0800
committerChi Kei Chan <chikeichan@gmail.com>2017-10-21 13:31:59 +0800
commitf503120b82c108efae0a4fc1282a43721d961ca2 (patch)
treefe99161e92499d04353804bca912d6256c7513c4 /mascara
parent2b26496826716cc7dd10b3739828f7b82bdc3bd3 (diff)
downloadtangerine-wallet-browser-f503120b82c108efae0a4fc1282a43721d961ca2.tar
tangerine-wallet-browser-f503120b82c108efae0a4fc1282a43721d961ca2.tar.gz
tangerine-wallet-browser-f503120b82c108efae0a4fc1282a43721d961ca2.tar.bz2
tangerine-wallet-browser-f503120b82c108efae0a4fc1282a43721d961ca2.tar.lz
tangerine-wallet-browser-f503120b82c108efae0a4fc1282a43721d961ca2.tar.xz
tangerine-wallet-browser-f503120b82c108efae0a4fc1282a43721d961ca2.tar.zst
tangerine-wallet-browser-f503120b82c108efae0a4fc1282a43721d961ca2.zip
Add Import With Seed Phrase
Diffstat (limited to 'mascara')
-rw-r--r--mascara/src/app/first-time/create-password-screen.js13
-rw-r--r--mascara/src/app/first-time/import-seed-phrase-screen.js103
-rw-r--r--mascara/src/app/first-time/index.css10
-rw-r--r--mascara/src/app/first-time/index.js11
4 files changed, 133 insertions, 4 deletions
diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index a1816b88c..2f4b81e7c 100644
--- a/mascara/src/app/first-time/create-password-screen.js
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -8,6 +8,7 @@ class CreatePasswordScreen extends Component {
static propTypes = {
isLoading: PropTypes.bool.isRequired,
createAccount: PropTypes.func.isRequired,
+ goToImportWithSeedPhrase: PropTypes.func.isRequired,
goToImportAccount: PropTypes.func.isRequired,
next: PropTypes.func.isRequired
}
@@ -44,7 +45,7 @@ class CreatePasswordScreen extends Component {
}
render() {
- const { isLoading, goToImportAccount } = this.props
+ const { isLoading, goToImportAccount, goToImportWithSeedPhrase } = this.props
return isLoading
? <LoadingScreen loadingMessage="Creating your new account" />
@@ -72,6 +73,16 @@ class CreatePasswordScreen extends Component {
>
Create
</button>
+ <a
+ href=""
+ className="first-time-flow__link create-password__import-link"
+ onClick={e => {
+ e.preventDefault()
+ goToImportWithSeedPhrase()
+ }}
+ >
+ Import with seed phrase
+ </a>
{ /* }
<a
href=""
diff --git a/mascara/src/app/first-time/import-seed-phrase-screen.js b/mascara/src/app/first-time/import-seed-phrase-screen.js
new file mode 100644
index 000000000..d2eed61b7
--- /dev/null
+++ b/mascara/src/app/first-time/import-seed-phrase-screen.js
@@ -0,0 +1,103 @@
+import React, {Component, PropTypes} from 'react'
+import {connect} from 'react-redux'
+import LoadingScreen from './loading-screen'
+import {createNewVaultAndRestore, hideWarning} from '../../../../ui/app/actions'
+
+class ImportSeedPhraseScreen extends Component {
+ static propTypes = {
+ warning: PropTypes.string,
+ back: PropTypes.func.isRequired,
+ next: PropTypes.func.isRequired,
+ createNewVaultAndRestore: PropTypes.func.isRequired,
+ hideWarning: PropTypes.func.isRequired,
+ isLoading: PropTypes.bool.isRequired,
+ };
+
+ state = {
+ seedPhrase: '',
+ password: '',
+ confirmPassword: '',
+ }
+
+ onClick = () => {
+ const { password, seedPhrase } = this.state
+ const { createNewVaultAndRestore, next } = this.props
+
+ createNewVaultAndRestore(password, seedPhrase)
+ .then(next)
+ }
+
+ isValid () {
+ const { seedPhrase, password, confirmPassword } = this.state
+
+ if (seedPhrase.split(' ').length !== 12) {
+ return false
+ }
+
+ if (password.length < 8) {
+ return false
+ }
+
+ if (password !== confirmPassword) {
+ return false
+ }
+
+ return true
+ }
+
+ render () {
+ return this.props.isLoading
+ ? <LoadingScreen loadingMessage="Creating your new account" />
+ : (
+ <div className="import-account">
+ <a
+ className="import-account__back-button"
+ onClick={e => {
+ e.preventDefault()
+ this.props.back()
+ }}
+ href="#"
+ >
+ {`< Back`}
+ </a>
+ <div className="import-account__title">
+ Import an Account with Seed Phrase
+ </div>
+ <div className="import-account__selector-label">
+ Enter your secret twelve word phrase here to restore your vault.
+ </div>
+ <textarea
+ className="import-account__secret-phrase"
+ onChange={e => this.setState({seedPhrase: e.target.value})}
+ />
+ <input
+ className="first-time-flow__input"
+ type="password"
+ placeholder="New Password (min 8 characters)"
+ onChange={e => this.setState({password: e.target.value})}
+ />
+ <input
+ className="first-time-flow__input create-password__confirm-input"
+ type="password"
+ placeholder="Confirm Password"
+ onChange={e => this.setState({confirmPassword: e.target.value})}
+ />
+ <button
+ className="first-time-flow__button"
+ onClick={this.onClick}
+ disabled={!this.isValid()}
+ >
+ Import
+ </button>
+ </div>
+ )
+ }
+}
+
+export default connect(
+ ({ appState: { isLoading, warning } }) => ({ isLoading, warning }),
+ dispatch => ({
+ createNewVaultAndRestore: (pw, seed) => dispatch(createNewVaultAndRestore(pw, seed)),
+ hideWarning: () => dispatch(hideWarning()),
+ })
+)(ImportSeedPhraseScreen)
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index 7d993a04a..28aa3060a 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -78,7 +78,8 @@
width: initial !important;
}
- .backup-phrase__confirm-secret {
+ .backup-phrase__confirm-secret,
+ .import-account__secret-phrase {
width: initial !important;
height: initial !important;
min-height: 190px;
@@ -266,7 +267,8 @@ button.backup-phrase__reveal-button:hover {
transform: scale(1);
}
-.backup-phrase__confirm-secret {
+.backup-phrase__confirm-secret,
+.import-account__secret-phrase {
height: 190px;
width: 495px;
border: 1px solid #CDCDCD;
@@ -276,6 +278,10 @@ button.backup-phrase__reveal-button:hover {
padding: 17px;
}
+.import-account__secret-phrase {
+ font-size: 16px;
+}
+
.backup-phrase__confirm-seed-options {
display: flex;
flex-flow: row wrap;
diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index 6035db5c2..66b591bd8 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -5,7 +5,7 @@ import UniqueImageScreen from './unique-image-screen'
import NoticeScreen from './notice-screen'
import BackupPhraseScreen from './backup-phrase-screen'
import ImportAccountScreen from './import-account-screen'
-import BuyEtherScreen from './buy-ether-screen'
+import ImportSeedPhraseScreen from './import-seed-phrase-screen'
import {onboardingBuyEthView} from '../../../../ui/app/actions'
class FirstTimeFlow extends Component {
@@ -27,6 +27,7 @@ class FirstTimeFlow extends Component {
static SCREEN_TYPE = {
CREATE_PASSWORD: 'create_password',
IMPORT_ACCOUNT: 'import_account',
+ IMPORT_SEED_PHRASE: 'import_seed_phrase',
UNIQUE_IMAGE: 'unique_image',
NOTICE: 'notice',
BACK_UP_PHRASE: 'back_up_phrase',
@@ -77,6 +78,7 @@ class FirstTimeFlow extends Component {
<CreatePasswordScreen
next={() => this.setScreenType(SCREEN_TYPE.UNIQUE_IMAGE)}
goToImportAccount={() => this.setScreenType(SCREEN_TYPE.IMPORT_ACCOUNT)}
+ goToImportWithSeedPhrase={() => this.setScreenType(SCREEN_TYPE.IMPORT_SEED_PHRASE)}
/>
)
case SCREEN_TYPE.IMPORT_ACCOUNT:
@@ -86,6 +88,13 @@ class FirstTimeFlow extends Component {
next={() => this.setScreenType(SCREEN_TYPE.NOTICE)}
/>
)
+ case SCREEN_TYPE.IMPORT_SEED_PHRASE:
+ return (
+ <ImportSeedPhraseScreen
+ back={() => this.setScreenType(SCREEN_TYPE.CREATE_PASSWORD)}
+ next={() => this.setScreenType(SCREEN_TYPE.NOTICE)}
+ />
+ )
case SCREEN_TYPE.UNIQUE_IMAGE:
return (
<UniqueImageScreen