git.iko.soy/bridge
on 616e621 help sign in
bridge/src/views/Trezor.js
105 lines 2.9 kB history raw
1import * as bip32 from 'bip32'
2import React from 'react'
3import Maybe from 'folktale/maybe'
4import { Button } from '../components/Base'
5import { Row, Col, H1, P } from '../components/Base'
6import { Form, InnerLabel, Input } from '../components/Base'
7import TrezorConnect from 'trezor-connect'
8import * as secp256k1 from 'secp256k1'
10import { TREZOR_BASE_PATH } from '../lib/trezor'
11import { ROUTE_NAMES } from '../lib/router'
13class Trezor extends React.Component {
15 constructor(props) {
16 super(props)
18 this.state = {
19 hdpath: TREZOR_BASE_PATH
20 }
22 this.handleHdPathInput = this.handleHdPathInput.bind(this)
23 this.pollDevice = this.pollDevice.bind(this)
24 }
26 handleHdPathInput(hdpath) {
27 this.setState({ hdpath })
28 }
30 async pollDevice() {
31 const { setWallet, setWalletHdPath } = this.props
32 const { hdpath } = this.state
34 TrezorConnect.getPublicKey({ path: hdpath })
35 .then(info => {
36 if (info.success === true) {
37 const payload = info.payload
38 const publicKey = Buffer.from(payload.publicKey, 'hex')
39 const chainCode = Buffer.from(payload.chainCode, 'hex')
40 const pub = secp256k1.publicKeyConvert(publicKey, true)
41 const hd = bip32.fromPublicKey(pub, chainCode)
42 setWallet(Maybe.Just(hd))
43 setWalletHdPath(hdpath)
44 } else {
45 setWallet(Maybe.Nothing())
46 }
47 })
48 }
50 render() {
51 const { pushRoute, popRoute, wallet } = this.props
52 const { hdpath } = this.state
54 return (
55 <Row>
56 <Col className={'measure-md'}>
57 <H1>{ 'Authenticate With Your Trezor' }</H1>
59 <P>
60 { `Connect and authenticate to your Trezor. If you'd like
61 to use a custom derivation path, you may enter it below.`
62 }
63 </P>
65 <Form>
66 <Input
67 className='pt-8'
68 prop-size='md'
69 prop-format='innerLabel'
70 name='hdpath'
71 value={ hdpath }
72 autocomplete='off'
73 onChange={ this.handleHdPathInput }>
74 <InnerLabel>{'HD Path'}</InnerLabel>
75 </Input>
77 <Button
78 className={'mt-8'}
79 prop-size={'wide lg'}
80 onClick={ this.pollDevice }>
81 { 'Authenticate →' }
82 </Button>
84 <Button
85 className={'mt-8'}
86 prop-size={'wide lg'}
87 disabled={ Maybe.Nothing.hasInstance(wallet) }
88 onClick={
89 () => {
90 popRoute()
91 pushRoute(ROUTE_NAMES.SHIPS)
92 }
93 }>
94 { 'Continue →' }
95 </Button>
97 </Form>
99 </Col>
100 </Row>
101 )
102 }
105export default Trezor