@@ -1,110 +1,101 @@
1−import Maybe from 'folktale/maybe';
21import React from 'react';
3−import { Button, H1, P } from '../components/old/Base';
2+import Maybe from 'folktale/maybe';
3+
4+import { H1, P } from '../components/old/Base';
45import { InnerLabelDropdown } from '../components/old/Base';
56
7+import View from 'components/View';
8+import { ForwardButton } from 'components/Buttons';
9+
10+import { useHistory } from '../store/history';
11+import { useWallet } from '../store/wallet';
12+
613import { ROUTE_NAMES } from '../lib/routeNames';
7−import { withHistory } from '../store/history';
814import { WALLET_TYPES, renderWalletType } from '../lib/wallet';
9−import { compose } from '../lib/lib';
10−import { withWallet } from '../store/wallet';
11−import View from 'components/View';
15+import useLifecycle from 'lib/useLifecycle';
1216
13−class Wallet extends React.Component {
14− componentDidMount() {
15− const { setWallet } = this.props;
16− setWallet(Maybe.Nothing());
17− }
17+const kWalletOptions = [
18+ {
19+ title: 'Urbit Master Ticket',
20+ value: WALLET_TYPES.TICKET,
21+ },
22+ {
23+ title: 'Urbit Master Ticket (Shards)',
24+ value: WALLET_TYPES.SHARDS,
25+ },
26+ {
27+ type: 'divider',
28+ },
29+ {
30+ title: 'Ledger',
31+ value: WALLET_TYPES.LEDGER,
32+ },
33+ {
34+ title: 'Trezor',
35+ value: WALLET_TYPES.TREZOR,
36+ },
37+ {
38+ type: 'divider',
39+ },
40+ {
41+ title: 'BIP39 Mnemonic',
42+ value: WALLET_TYPES.MNEMONIC,
43+ },
44+ {
45+ title: 'Ethereum Private Key',
46+ value: WALLET_TYPES.PRIVATE_KEY,
47+ },
48+ {
49+ title: 'Ethereum Keystore File',
50+ value: WALLET_TYPES.KEYSTORE,
51+ },
52+];
1853
19− getWalletOptions() {
20− return [
21− {
22− title: 'Urbit Master Ticket',
23− value: WALLET_TYPES.TICKET,
24− },
25− {
26− title: 'Urbit Master Ticket (Shards)',
27− value: WALLET_TYPES.SHARDS,
28− },
29− {
30− type: 'divider',
31− },
32− {
33− title: 'Ledger',
34− value: WALLET_TYPES.LEDGER,
35− },
36− {
37− title: 'Trezor',
38− value: WALLET_TYPES.TREZOR,
39− },
40− {
41− type: 'divider',
42− },
43− {
44− title: 'BIP39 Mnemonic',
45− value: WALLET_TYPES.MNEMONIC,
46− },
47− {
48− title: 'Ethereum Private Key',
49− value: WALLET_TYPES.PRIVATE_KEY,
50− },
51− {
52− title: 'Ethereum Keystore File',
53− value: WALLET_TYPES.KEYSTORE,
54− },
55− ];
56− }
54+export default function Wallet() {
55+ const history = useHistory();
56+ const { setWallet, walletType, setWalletType } = useWallet();
5757
58− render() {
59− const { props } = this;
60− const walletOptions = this.getWalletOptions();
58+ // reset wallet when this component is mounted
59+ useLifecycle(() => setWallet(Maybe.Nothing()));
6160
62− return (
63− <View>
64− <H1>{'Unlock a Wallet'}</H1>
61+ return (
62+ <View>
63+ <H1>Unlock a Wallet</H1>
6564
66− <P>
67− {`To manage your assets, you need to unlock a wallet.
68− Please select how you would like to access your wallet.`}
69− </P>
65+ <P>
66+ To manage your assets, you need to unlock a wallet. Please select how
67+ you would like to access your wallet.
68+ </P>
7069
71− <InnerLabelDropdown
72− className={'mb-10 mt-6'}
73− title={'Wallet Type:'}
74− options={walletOptions}
75− handleUpdate={props.setWalletType}
76− currentSelectionTitle={renderWalletType(props.walletType)}
77− />
70+ <InnerLabelDropdown
71+ title="Wallet Type:"
72+ options={kWalletOptions}
73+ handleUpdate={setWalletType}
74+ currentSelectionTitle={renderWalletType(walletType)}
75+ />
7876
79− <Button
80− className={'mt-10'}
81− onClick={() =>
82− props.history.push(
83− props.walletType === WALLET_TYPES.MNEMONIC
84− ? ROUTE_NAMES.MNEMONIC
85− : props.walletType === WALLET_TYPES.TICKET
86− ? ROUTE_NAMES.TICKET
87− : props.walletType === WALLET_TYPES.SHARDS
88− ? ROUTE_NAMES.SHARDS
89− : props.walletType === WALLET_TYPES.LEDGER
90− ? ROUTE_NAMES.LEDGER
91− : props.walletType === WALLET_TYPES.TREZOR
92− ? ROUTE_NAMES.TREZOR
93− : props.walletType === WALLET_TYPES.PRIVATE_KEY
94− ? ROUTE_NAMES.PRIVATE_KEY
95− : props.walletType === WALLET_TYPES.KEYSTORE
96− ? ROUTE_NAMES.KEYSTORE
97− : ROUTE_NAMES.DEFAULT
98− )
99− }>
100− {'Continue →'}
101− </Button>
102− </View>
103− );
104− }
77+ <ForwardButton
78+ onClick={() =>
79+ history.push(
80+ walletType === WALLET_TYPES.MNEMONIC
81+ ? ROUTE_NAMES.MNEMONIC
82+ : walletType === WALLET_TYPES.TICKET
83+ ? ROUTE_NAMES.TICKET
84+ : walletType === WALLET_TYPES.SHARDS
85+ ? ROUTE_NAMES.SHARDS
86+ : walletType === WALLET_TYPES.LEDGER
87+ ? ROUTE_NAMES.LEDGER
88+ : walletType === WALLET_TYPES.TREZOR
89+ ? ROUTE_NAMES.TREZOR
90+ : walletType === WALLET_TYPES.PRIVATE_KEY
91+ ? ROUTE_NAMES.PRIVATE_KEY
92+ : walletType === WALLET_TYPES.KEYSTORE
93+ ? ROUTE_NAMES.KEYSTORE
94+ : ROUTE_NAMES.DEFAULT
95+ )
96+ }>
97+ Continue
98+ </ForwardButton>
99+ </View>
100+ );
105101}
106−
107−export default compose(
108− withHistory,
109− withWallet
110−)(Wallet);