git.iko.soy/bridge
on 05c1914 help sign in
bridge/src/views/Trezor.js
106 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 { 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.manifest({
35 email: 'bridge-trezor@urbit.org',
36 appUrl: 'https://github.com/urbit/bridge'
37 });
38 TrezorConnect.getPublicKey({ path: hdpath })
39 .then(info => {
40 if (info.success === true) {
41 const payload = info.payload
42 const publicKey = Buffer.from(payload.publicKey, 'hex')
43 const chainCode = Buffer.from(payload.chainCode, 'hex')
44 const pub = secp256k1.publicKeyConvert(publicKey, true)
45 const hd = bip32.fromPublicKey(pub, chainCode)
46 setWallet(Maybe.Just(hd))
47 setWalletHdPath(hdpath)
48 } else {
49 setWallet(Maybe.Nothing())
50 }
51 })
52 }
54 render() {
55 const { pushRoute, popRoute, wallet } = this.props
56 const { hdpath } = this.state
58 return (
59 <Row>
60 <Col className={'measure-md'}>
61 <H1>{ 'Authenticate With Your Trezor' }</H1>
63 <P>
64 { `Connect and authenticate to your Trezor. If you'd like
65 to use a custom derivation path, you may enter it below.`
66 }
67 </P>
69 <Input
70 className='pt-8 text-mono'
71 prop-size='md'
72 prop-format='innerLabel'
73 name='hdpath'
74 value={ hdpath }
75 autocomplete='off'
76 onChange={ this.handleHdPathInput }>
77 <InnerLabel>{'HD Path'}</InnerLabel>
78 </Input>
80 <Button
81 className={'mt-8'}
82 prop-size={'wide lg'}
83 onClick={ this.pollDevice }>
84 { 'Authenticate →' }
85 </Button>
87 <Button
88 className={'mt-8'}
89 prop-size={'wide lg'}
90 disabled={ Maybe.Nothing.hasInstance(wallet) }
91 onClick={
92 () => {
93 popRoute()
94 pushRoute(ROUTE_NAMES.SHIPS)
95 }
96 }>
97 { 'Continue →' }
98 </Button>
100 </Col>
101 </Row>
102 )
103 }
106export default Trezor