git.iko.soy/bridge
on abd024f help sign in
bridge/src/views/Login.js
93 lines 2.1 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 Other from './Login/Other';
18const NAMES = {
19 TICKET: 'TICKET',
20 OTHER: 'OTHER',
21};
23const VIEWS = {
24 [NAMES.TICKET]: Ticket,
25 [NAMES.OTHER]: Other,
26};
28const OPTIONS = [
29 { text: 'Master Ticket', value: NAMES.TICKET },
30 { text: 'Other', value: NAMES.OTHER },
31];
33const walletTypeToViewName = walletType => {
34 if (walletType === WALLET_TYPES.TICKET || !walletType) {
35 return NAMES.TICKET;
36 }
37 return NAMES.OTHER;
38};
40export default function Login() {
41 // globals
42 const { pop, push, names } = useHistory();
43 const { walletType } = useWallet();
45 // inputs
46 const [currentTab, setCurrentTab] = useState(
47 walletTypeToViewName(walletType)
48 );
50 const goToActivate = useCallback(() => push(names.ACTIVATE), [
51 push,
52 names.ACTIVATE,
53 ]);
55 const goHome = useCallback(() => {
56 push(names.POINTS);
57 }, [push, names]);
59 return (
60 <View pop={pop} inset>
61 <Grid>
62 <Grid.Item full as={Crumbs} />
63 <Grid.Item full as={H4} className="mt4">
64 Login
65 </Grid.Item>
67 <Grid.Item
68 full
69 as={Tabs}
70 className="mt1"
71 // Tabs
72 views={VIEWS}
73 options={OPTIONS}
74 currentTab={currentTab}
75 onTabChange={setCurrentTab}
76 // Tab extra
77 goHome={goHome}
78 />
79 </Grid>
81 <Footer>
82 <Grid>
83 <Grid.Divider />
84 <Grid.Item full as={ForwardButton} onClick={goToActivate}>
85 Activate
86 </Grid.Item>
87 <Grid.Divider />
88 <Grid.Item full as={OfflineButton} />
89 </Grid>
90 </Footer>
91 </View>
92 );