git.iko.soy/bridge
on 616e621 help sign in
bridge/src/views/Wallet.js
144 lines 3.6 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>
115 </InnerLabelDropdown>
117 <Button
118 className={'mt-10'}
119 onClick={
120 () => props.pushRoute(
121 props.walletType === WALLET_NAMES.MNEMONIC
122 ? ROUTE_NAMES.MNEMONIC
123 : props.walletType === WALLET_NAMES.TICKET
124 ? ROUTE_NAMES.TICKET
125 : props.walletType === WALLET_NAMES.SHARDS
126 ? ROUTE_NAMES.SHARDS
127 : props.walletType === WALLET_NAMES.LEDGER
128 ? ROUTE_NAMES.LEDGER
129 : props.walletType === WALLET_NAMES.TREZOR
130 ? ROUTE_NAMES.TREZOR
131 : ROUTE_NAMES.DEFAULT
132 )
133 }
134 >
135 { 'Continue →' }
136 </Button>
137 </Col>
138 </Row>
139 )
140 }
144export default Wallet