git.iko.soy/bridge
on debe822 help sign in
bridge/src/views/Login.js
120 lines 3.0 kB history raw
1import React, { useCallback, useState } from 'react';
2import { Nothing } from 'folktale/maybe';
3import { H4, Grid } from 'indigo-react';
5import { useHistory } from 'store/history';
6import { useWallet } from 'store/wallet';
8import { WALLET_TYPES } from 'lib/wallet';
10import View from 'components/View';
11import Tabs from 'components/Tabs';
12import Crumbs from 'components/Crumbs';
13import Footer from 'components/Footer';
14import { ForwardButton, OfflineButton } from 'components/Buttons';
16import Ticket from './Login/Ticket';
17import Mnemonic from './Login/Mnemonic';
18import Advanced from './Login/Advanced';
19import Hardware from './Login/Hardware';
21const NAMES = {
22 TICKET: 'TICKET',
23 MNEMONIC: 'MNEMONIC',
24 HARDWARE: 'HARDWARE',
25 ADVANCED: 'ADVANCED',
26};
28const VIEWS = {
29 [NAMES.TICKET]: Ticket,
30 [NAMES.MNEMONIC]: Mnemonic,
31 [NAMES.HARDWARE]: Hardware,
32 [NAMES.ADVANCED]: Advanced,
33};
35const OPTIONS = [
36 { text: 'Master Ticket', value: NAMES.TICKET },
37 { text: 'Mnemonic', value: NAMES.MNEMONIC },
38 { text: 'Hardware', value: NAMES.HARDWARE },
39 { text: 'Advanced', value: NAMES.ADVANCED },
40];
42const walletTypeToViewName = walletType => {
43 switch (walletType) {
44 case WALLET_TYPES.MNEMONIC:
45 return NAMES.MNEMONIC;
46 case WALLET_TYPES.LEDGER:
47 case WALLET_TYPES.TREZOR:
48 return NAMES.HARDWARE;
49 case WALLET_TYPES.KEYSTORE:
50 case WALLET_TYPES.PRIVATE_KEY:
51 return NAMES.ADVANCED;
52 case WALLET_TYPES.TICKET:
53 case WALLET_TYPES.SHARDS:
54 return NAMES.TICKET;
55 default:
56 return NAMES.TICKET;
57 }
58};
60export default function Login() {
61 // globals
62 const { pop, push, names } = useHistory();
63 const { wallet, walletType } = useWallet();
65 // inputs
66 const [currentTab, setCurrentTab] = useState(
67 walletTypeToViewName(walletType)
68 );
70 const goToActivate = useCallback(() => push(names.ACTIVATE), [
71 push,
72 names.ACTIVATE,
73 ]);
75 const doContinue = useCallback(() => {
76 push(names.POINTS);
77 }, [push, names]);
79 return (
80 <View pop={pop} inset>
81 <Grid>
82 <Grid.Item full as={Crumbs} routes={[{ text: 'Bridge' }]} />
83 <Grid.Item full as={H4} className="mt4">
84 Login
85 </Grid.Item>
87 <Grid.Item
88 full
89 as={Tabs}
90 className="mt1"
91 views={VIEWS}
92 options={OPTIONS}
93 currentTab={currentTab}
94 onTabChange={setCurrentTab}
95 />
97 <Grid.Item
98 full
99 as={ForwardButton}
100 solid
101 className="mt2"
102 disabled={Nothing.hasInstance(wallet)}
103 onClick={doContinue}>
104 Continue
105 </Grid.Item>
106 </Grid>
108 <Footer>
109 <Grid>
110 <Grid.Divider />
111 <Grid.Item full as={ForwardButton} onClick={goToActivate}>
112 Activate
113 </Grid.Item>
114 <Grid.Divider />
115 <Grid.Item full as={OfflineButton} />
116 </Grid>
117 </Footer>
118 </View>
119 );