git.iko.soy/bridge
on e8a6470 help sign in
bridge/src/views/Wallet.js
161 lines 4.3 kB history raw
1import Maybe from 'folktale/maybe'
2import React from 'react'
3import { Button, H1, P } from '../components/Base'
4import {
5 InnerLabelDropdown,
6 DropdownItem,
7 DropdownDivider
8} from '../components/Base'
9import { Row, Col } from '../components/Base'
11import { ROUTE_NAMES } from '../lib/router'
12import { WALLET_NAMES, renderWalletType } from '../lib/wallet'
14class Wallet extends React.Component {
16 constructor(props) {
17 super(props)
19 this.state = {
20 dropdownOpen: false
21 }
23 this.toggle = this.toggle.bind(this)
24 this.close = this.close.bind(this)
26 }
28 componentDidMount() {
29 const { setWallet } = this.props
30 setWallet(Maybe.Nothing())
31 }
33 toggle() {
34 this.setState((state, _) => ({
35 dropdownOpen: !state.dropdownOpen
36 }))
37 }
39 selectClose(f) {
40 f()
41 this.setState({ dropdownOpen: false })
42 }
44 close () {
45 this.setState({ dropdownOpen: false })
46 }
48 render() {
49 const { props, state } = this
51 return (
52 <Row>
53 <Col>
54 <H1>{ 'Unlock a Wallet' }</H1>
56 <P>
57 {
58 `To manage your assets, you need to unlock a wallet.
59 Please select how you would like to access your wallet.`
60 }
62 </P>
64 <InnerLabelDropdown
65 className={'mb-10 mt-6'}
66 handleToggle={this.toggle}
67 handleClose={this.close}
68 isOpen={state.dropdownOpen}
69 title={'Wallet Type:'}
70 currentSelectionTitle={renderWalletType(props.walletType)}>
72 <DropdownItem
73 onClick={ () => this.selectClose(() => props.setWalletType(WALLET_NAMES.TICKET)) }
74 >
75 { 'Urbit Master Ticket' }
76 </DropdownItem>
78 <DropdownItem
79 onClick={ () => this.selectClose(() => props.setWalletType(WALLET_NAMES.SHARDS)) }
80 >
81 { 'Urbit Master Ticket (Shards)' }
82 </DropdownItem>
84 <DropdownDivider />
86 <DropdownItem
87 onClick={ () => this.selectClose(() => props.setWalletType(WALLET_NAMES.MNEMONIC)) }
88 >
89 { 'BIP39 Mnemonic' }
90 </DropdownItem>
92 <DropdownDivider />
94 <DropdownItem
95 onClick={ () => this.selectClose(() => props.setWalletType(WALLET_NAMES.LEDGER)) }
96 >
97 { 'Ledger' }
98 </DropdownItem>
100 <DropdownItem
101 onClick={ () => this.selectClose(() => props.setWalletType(WALLET_NAMES.TREZOR)) }
102 disabled={
103 props.web3.matchWith({
104 Nothing: () => true,
105 Just: () => false
106 })
107 }
108 >
109 { 'Trezor' }
110 </DropdownItem>
112 <DropdownDivider />
114 <DropdownItem
115 onClick={ () => this.selectClose(() => props.setWalletType(WALLET_NAMES.PRIVATE_KEY)) }
116 >
117 { 'Ethereum Private Key' }
118 </DropdownItem>
120 <DropdownItem
121 onClick={ () => this.selectClose(() => props.setWalletType(WALLET_NAMES.KEYSTORE)) }
122 >
123 { 'Ethereum Keystore File' }
124 </DropdownItem>
128 </InnerLabelDropdown>
130 <Button
131 className={'mt-10'}
132 onClick={
133 () => props.pushRoute(
134 props.walletType === WALLET_NAMES.MNEMONIC
135 ? ROUTE_NAMES.MNEMONIC
136 : props.walletType === WALLET_NAMES.TICKET
137 ? ROUTE_NAMES.TICKET
138 : props.walletType === WALLET_NAMES.SHARDS
139 ? ROUTE_NAMES.SHARDS
140 : props.walletType === WALLET_NAMES.LEDGER
141 ? ROUTE_NAMES.LEDGER
142 : props.walletType === WALLET_NAMES.TREZOR
143 ? ROUTE_NAMES.TREZOR
144 : props.walletType === WALLET_NAMES.PRIVATE_KEY
145 ? ROUTE_NAMES.PRIVATE_KEY
146 : props.walletType === WALLET_NAMES.KEYSTORE
147 ? ROUTE_NAMES.KEYSTORE
148 : ROUTE_NAMES.DEFAULT
149 )
150 }
151 >
152 { 'Continue →' }
153 </Button>
154 </Col>
155 </Row>
156 )
157 }
161export default Wallet