git.iko.soy/bridge
on 05c1914 help sign in
bridge/src/views/Wallet.js
153 lines 4.1 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 >
95 { 'Trezor' }
96 </DropdownItem>
98 <DropdownDivider />
100 <DropdownItem
101 onClick={ () => this.selectClose(() => props.setWalletType(WALLET_NAMES.MNEMONIC)) }
102 >
103 { 'BIP39 Mnemonic' }
104 </DropdownItem>
106 <DropdownItem
107 onClick={ () => this.selectClose(() => props.setWalletType(WALLET_NAMES.PRIVATE_KEY)) }
108 >
109 { 'Ethereum Private Key' }
110 </DropdownItem>
112 <DropdownItem
113 onClick={ () => this.selectClose(() => props.setWalletType(WALLET_NAMES.KEYSTORE)) }
114 >
115 { 'Ethereum Keystore File' }
116 </DropdownItem>
120 </InnerLabelDropdown>
122 <Button
123 className={'mt-10'}
124 onClick={
125 () => props.pushRoute(
126 props.walletType === WALLET_NAMES.MNEMONIC
127 ? ROUTE_NAMES.MNEMONIC
128 : props.walletType === WALLET_NAMES.TICKET
129 ? ROUTE_NAMES.TICKET
130 : props.walletType === WALLET_NAMES.SHARDS
131 ? ROUTE_NAMES.SHARDS
132 : props.walletType === WALLET_NAMES.LEDGER
133 ? ROUTE_NAMES.LEDGER
134 : props.walletType === WALLET_NAMES.TREZOR
135 ? ROUTE_NAMES.TREZOR
136 : props.walletType === WALLET_NAMES.PRIVATE_KEY
137 ? ROUTE_NAMES.PRIVATE_KEY
138 : props.walletType === WALLET_NAMES.KEYSTORE
139 ? ROUTE_NAMES.KEYSTORE
140 : ROUTE_NAMES.DEFAULT
141 )
142 }
143 >
144 { 'Continue →' }
145 </Button>
146 </Col>
147 </Row>
148 )
149 }
153export default Wallet