git.iko.soy/bridge
on 64aee13 help sign in
bridge/src/views/Login.js
112 lines 2.7 kB history raw
1import React, { useCallback, useState } from 'react';
2import { H4, Grid } from 'indigo-react';
4import { useHistory } from 'store/history';
5import { useWallet } from 'store/wallet';
7import { WALLET_TYPES } from 'lib/wallet';
9import View from 'components/View';
10import Tabs from 'components/Tabs';
11import Crumbs from 'components/Crumbs';
12import Footer from 'components/Footer';
13import { ForwardButton, OfflineButton } from 'components/Buttons';
15import Ticket from './Login/Ticket';
16import Mnemonic from './Login/Mnemonic';
17import Advanced from './Login/Advanced';
18import Hardware from './Login/Hardware';
20const NAMES = {
21 TICKET: 'TICKET',
22 MNEMONIC: 'MNEMONIC',
23 HARDWARE: 'HARDWARE',
24 ADVANCED: 'ADVANCED',
25};
27const VIEWS = {
28 [NAMES.TICKET]: Ticket,
29 [NAMES.MNEMONIC]: Mnemonic,
30 [NAMES.HARDWARE]: Hardware,
31 [NAMES.ADVANCED]: Advanced,
32};
34const OPTIONS = [
35 { text: 'Master Ticket', value: NAMES.TICKET },
36 { text: 'Mnemonic', value: NAMES.MNEMONIC },
37 { text: 'Hardware', value: NAMES.HARDWARE },
38 { text: 'Advanced', value: NAMES.ADVANCED },
39];
41const walletTypeToViewName = walletType => {
42 switch (walletType) {
43 case WALLET_TYPES.MNEMONIC:
44 return NAMES.MNEMONIC;
45 case WALLET_TYPES.LEDGER:
46 case WALLET_TYPES.TREZOR:
47 return NAMES.HARDWARE;
48 case WALLET_TYPES.KEYSTORE:
49 case WALLET_TYPES.PRIVATE_KEY:
50 return NAMES.ADVANCED;
51 case WALLET_TYPES.TICKET:
52 case WALLET_TYPES.SHARDS:
53 return NAMES.TICKET;
54 default:
55 return NAMES.TICKET;
56 }
57};
59export default function Login() {
60 // globals
61 const { pop, push, names } = useHistory();
62 const { walletType } = useWallet();
64 // inputs
65 const [currentTab, setCurrentTab] = useState(
66 walletTypeToViewName(walletType)
67 );
69 const goToActivate = useCallback(() => push(names.ACTIVATE), [
70 push,
71 names.ACTIVATE,
72 ]);
74 const goHome = useCallback(() => {
75 push(names.POINTS);
76 }, [push, names]);
78 return (
79 <View pop={pop} inset>
80 <Grid>
81 <Grid.Item full as={Crumbs} routes={[{ text: 'Bridge' }]} />
82 <Grid.Item full as={H4} className="mt4">
83 Login
84 </Grid.Item>
86 <Grid.Item
87 full
88 as={Tabs}
89 className="mt1"
90 // Tabs
91 views={VIEWS}
92 options={OPTIONS}
93 currentTab={currentTab}
94 onTabChange={setCurrentTab}
95 // Tab extra
96 goHome={goHome}
97 />
98 </Grid>
100 <Footer>
101 <Grid>
102 <Grid.Divider />
103 <Grid.Item full as={ForwardButton} onClick={goToActivate}>
104 Activate
105 </Grid.Item>
106 <Grid.Divider />
107 <Grid.Item full as={OfflineButton} />
108 </Grid>
109 </Footer>
110 </View>
111 );