git.iko.soy/bridge
on 58fbcd2 help sign in
bridge/src/views/Login.js
150 lines 4.0 kB history raw
1import React, { useCallback, useState } from 'react';
2import { Just, Nothing } from 'folktale/maybe';
3import * as azimuth from 'azimuth-js';
4import { H4, Grid } from 'indigo-react';
6import { useHistory } from 'store/history';
7import { useNetwork } from 'store/network';
8import { useWallet } from 'store/wallet';
9import { usePointCursor } from 'store/pointCursor';
11import * as need from 'lib/need';
12import { WALLET_TYPES } from 'lib/wallet';
14import View from 'components/View';
15import Tabs from 'components/Tabs';
16import Crumbs from 'components/Crumbs';
17import Footer from 'components/Footer';
18import { ForwardButton, OfflineButton } from 'components/Buttons';
20import Ticket from './Login/Ticket';
21import Mnemonic from './Login/Mnemonic';
22import Advanced from './Login/Advanced';
23import Hardware from './Login/Hardware';
25const NAMES = {
26 TICKET: 'TICKET',
27 MNEMONIC: 'MNEMONIC',
28 HARDWARE: 'HARDWARE',
29 ADVANCED: 'ADVANCED',
30};
32const VIEWS = {
33 [NAMES.TICKET]: Ticket,
34 [NAMES.MNEMONIC]: Mnemonic,
35 [NAMES.HARDWARE]: Hardware,
36 [NAMES.ADVANCED]: Advanced,
37};
39const OPTIONS = [
40 { text: 'Master Ticket', value: NAMES.TICKET },
41 { text: 'Mnemonic', value: NAMES.MNEMONIC },
42 { text: 'Hardware', value: NAMES.HARDWARE },
43 { text: 'Advanced', value: NAMES.ADVANCED },
44];
46const walletTypeToViewName = walletType => {
47 switch (walletType) {
48 case WALLET_TYPES.MNEMONIC:
49 return NAMES.MNEMONIC;
50 case WALLET_TYPES.LEDGER:
51 case WALLET_TYPES.TREZOR:
52 return NAMES.HARDWARE;
53 case WALLET_TYPES.KEYSTORE:
54 case WALLET_TYPES.PRIVATE_KEY:
55 return NAMES.ADVANCED;
56 case WALLET_TYPES.TICKET:
57 case WALLET_TYPES.SHARDS:
58 return NAMES.TICKET;
59 default:
60 return NAMES.TICKET;
61 }
62};
64export default function Login() {
65 // globals
66 const { pop, push, names } = useHistory();
67 const { contracts } = useNetwork();
68 const { wallet, walletType } = useWallet();
69 const { pointCursor, setPointCursor } = usePointCursor();
71 // inputs
72 const [currentTab, setCurrentTab] = useState(
73 walletTypeToViewName(walletType)
74 );
76 const goToActivate = useCallback(() => push(names.ACTIVATE), [
77 push,
78 names.ACTIVATE,
79 ]);
81 const goToPoints = useCallback(() => {
82 push(names.POINTS);
83 }, [push, names]);
85 const goToPoint = useCallback(() => {
86 goToPoints();
87 push(names.POINT);
88 }, [goToPoints, push, names]);
90 const goHome = useCallback(async () => {
91 const _wallet = need.wallet(wallet);
92 const _contracts = need.contracts(contracts);
94 let deduced = pointCursor;
95 // if no point cursor set by login logic, try to deduce it
96 if (Nothing.hasInstance(deduced)) {
97 const owned = await azimuth.azimuth.getOwnedPoints(
98 _contracts,
99 _wallet.address
100 );
101 if (owned.length === 1) {
102 deduced = Just(owned[0]);
103 }
104 }
106 // if we have a deduced point or one in the global context,
107 // navigate to that specific point, otherwise navigate to list of points
108 if (Just.hasInstance(deduced)) {
109 setPointCursor(deduced);
110 goToPoint();
111 } else {
112 goToPoints();
113 }
114 }, [contracts, pointCursor, setPointCursor, wallet, goToPoint, goToPoints]);
116 return (
117 <View pop={pop} inset>
118 <Grid>
119 <Grid.Item full as={Crumbs} routes={[{ text: 'Multipass' }]} />
120 <Grid.Item full as={H4} className="mt4">
121 Login
122 </Grid.Item>
124 <Grid.Item
125 full
126 as={Tabs}
127 className="mt1"
128 // Tabs
129 views={VIEWS}
130 options={OPTIONS}
131 currentTab={currentTab}
132 onTabChange={setCurrentTab}
133 // Tab extra
134 goHome={goHome}
135 />
136 </Grid>
138 <Footer>
139 <Grid>
140 <Grid.Divider />
141 <Grid.Item full as={ForwardButton} onClick={goToActivate}>
142 Activate
143 </Grid.Item>
144 <Grid.Divider />
145 <Grid.Item full as={OfflineButton} />
146 </Grid>
147 </Footer>
148 </View>
149 );