git.iko.soy/bridge
on a8a4e1e help sign in
bridge/src/views/Wallet.js
159 lines 4.2 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.LEDGER)) }
88 >
89 { 'Ledger' }
90 </DropdownItem>
92 <DropdownItem
93 onClick={ () => this.selectClose(() => props.setWalletType(WALLET_NAMES.TREZOR)) }
94 disabled={
95 props.web3.matchWith({
96 Nothing: () => true,
97 Just: () => false
98 })
99 }
100 >
101 { 'Trezor' }
102 </DropdownItem>
104 <DropdownDivider />
106 <DropdownItem
107 onClick={ () => this.selectClose(() => props.setWalletType(WALLET_NAMES.MNEMONIC)) }
108 >
109 { 'BIP39 Mnemonic' }
110 </DropdownItem>
112 <DropdownItem
113 onClick={ () => this.selectClose(() => props.setWalletType(WALLET_NAMES.PRIVATE_KEY)) }
114 >
115 { 'Ethereum Private Key' }
116 </DropdownItem>
118 <DropdownItem
119 onClick={ () => this.selectClose(() => props.setWalletType(WALLET_NAMES.KEYSTORE)) }
120 >
121 { 'Ethereum Keystore File' }
122 </DropdownItem>
126 </InnerLabelDropdown>
128 <Button
129 className={'mt-10'}
130 onClick={
131 () => props.pushRoute(
132 props.walletType === WALLET_NAMES.MNEMONIC
133 ? ROUTE_NAMES.MNEMONIC
134 : props.walletType === WALLET_NAMES.TICKET
135 ? ROUTE_NAMES.TICKET
136 : props.walletType === WALLET_NAMES.SHARDS
137 ? ROUTE_NAMES.SHARDS
138 : props.walletType === WALLET_NAMES.LEDGER
139 ? ROUTE_NAMES.LEDGER
140 : props.walletType === WALLET_NAMES.TREZOR
141 ? ROUTE_NAMES.TREZOR
142 : props.walletType === WALLET_NAMES.PRIVATE_KEY
143 ? ROUTE_NAMES.PRIVATE_KEY
144 : props.walletType === WALLET_NAMES.KEYSTORE
145 ? ROUTE_NAMES.KEYSTORE
146 : ROUTE_NAMES.DEFAULT
147 )
148 }
149 >
150 { 'Continue →' }
151 </Button>
152 </Col>
153 </Row>
154 )
155 }
159export default Wallet