git.iko.soy/bridge
on 05c1914 help sign in
bridge/src/views/Mnemonic.js
134 lines 3.4 kB history raw
1import * as bip39 from 'bip39'
2import Maybe from 'folktale/maybe'
3import React from 'react'
4import { Button } from '../components/Base'
5import { Input, MnemonicInput, InnerLabel, InputCaption } from '../components/Base'
6import { Row, Col, H1 } from '../components/Base'
8import { ROUTE_NAMES } from '../lib/router'
9import { DEFAULT_HD_PATH, walletFromMnemonic } from '../lib/wallet'
12class Mnemonic extends React.Component {
14 constructor(props) {
15 super(props)
17 this.state = {
18 mnemonic: '',
19 hdpath: DEFAULT_HD_PATH,
20 }
22 this.handleMnemonicInput = this.handleMnemonicInput.bind(this)
23 this.handleHdPathInput = this.handleHdPathInput.bind(this)
24 }
26 componentDidMount() {
27 const { mnemonic, hdpath } = this.state
28 this.attemptWalletDerivation(mnemonic, hdpath)
30 this.setState({
31 exampleMnemonic: bip39.generateMnemonic(),
32 })
33 }
35 handleMnemonicInput(mnemonic) {
36 this.setState((state, _) => {
37 const hdpath = state.hdpath
38 this.attemptWalletDerivation(
39 mnemonic,
40 hdpath === '' ? DEFAULT_HD_PATH : hdpath
41 )
42 return {
43 mnemonic
44 }
45 })
46 }
48 handleHdPathInput(hdpath) {
49 this.setState((state, _) => {
50 const mnemonic = state.mnemonic
51 this.attemptWalletDerivation(
52 mnemonic,
53 hdpath === '' ? DEFAULT_HD_PATH : hdpath
54 )
55 return {
56 hdpath
57 }
58 })
59 }
61 attemptWalletDerivation(mnemonic, hdpath) {
62 const { setWallet, setAuthMnemonic, setWalletHdPath } = this.props
63 const wallet = walletFromMnemonic(mnemonic, hdpath)
64 setWallet(wallet)
65 setAuthMnemonic(Maybe.Just(mnemonic))
66 setWalletHdPath(hdpath)
67 }
69 render() {
70 const { pushRoute, popRoute, wallet } = this.props
71 const {
72 mnemonic,
73 hdpath,
74 exampleMnemonic
75 } = this.state
77 return (
78 <Row>
79 <Col>
80 <H1 className={'mb-4'}>{ 'Enter Your Mnemonic' }</H1>
81 <InputCaption>
82 { "Please enter your BIP39 mnemonic here." }
83 </InputCaption>
85 <MnemonicInput
86 className='pt-8'
87 prop-size='md'
88 prop-format='innerLabel'
89 type='text'
90 name='mnemonic'
91 placeholder={ `e.g. ${exampleMnemonic}` }
92 onChange={ this.handleMnemonicInput }
93 value={ mnemonic }
94 autocomplete='off'
95 autoFocus>
96 <InnerLabel>{'Mnemonic'}</InnerLabel>
97 </MnemonicInput>
100 <InputCaption>
101 {`If you'd like to use a custom derivation path, you may enter it below.`}
102 </InputCaption>
104 <Input
105 className='pt-8 text-mono'
106 prop-size='md'
107 prop-format='innerLabel'
108 name='hdpath'
109 value={ hdpath }
110 autocomplete='off'
111 onChange={ this.handleHdPathInput }>
112 <InnerLabel>{'HD Path'}</InnerLabel>
113 </Input>
115 <Button
116 className={'mt-10'}
117 disabled={ Maybe.Nothing.hasInstance(wallet) }
118 onClick={ () => {
119 popRoute()
120 pushRoute(ROUTE_NAMES.SHIPS)
121 }
122 }
123 >
124 { 'Continue →' }
125 </Button>
126 </Col>
127 </Row>
130 )
131 }
134export default Mnemonic