git.iko.soy/bridge
on abbbcbc help sign in
bridge/src/views/Login.js
164 lines 4.3 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 { push, replaceWith, names } = useHistory();
67 const { contracts } = useNetwork();
68 const { wallet, walletType } = useWallet();
69 const { pointCursor, setPointCursor } = usePointCursor();
71 const [deducing, setDeducing] = useState(false);
73 // inputs
74 const [currentTab, setCurrentTab] = useState(
75 walletTypeToViewName(walletType)
76 );
78 const goToActivate = useCallback(
79 () => replaceWith([{ key: names.LANDING }, { key: names.ACTIVATE }]),
80 [replaceWith, names]
81 );
83 const goToPoints = useCallback(() => {
84 push(names.POINTS);
85 }, [push, names]);
87 const goToPoint = useCallback(() => {
88 goToPoints();
89 push(names.POINT);
90 }, [goToPoints, push, names]);
92 const doContinue = useCallback(async () => {
93 const _wallet = need.wallet(wallet);
94 const _contracts = need.contracts(contracts);
96 setDeducing(true);
98 let deduced = pointCursor;
99 // if no point cursor set by login logic, try to deduce it
100 if (Nothing.hasInstance(deduced)) {
101 const owned = await azimuth.azimuth.getOwnedPoints(
102 _contracts,
103 _wallet.address
104 );
105 if (owned.length === 1) {
106 deduced = Just(owned[0]);
107 }
108 }
110 setDeducing(false);
112 // if we have a deduced point or one in the global context,
113 // navigate to that specific point, otherwise navigate to list of points
114 if (Just.hasInstance(deduced)) {
115 setPointCursor(deduced);
116 goToPoint();
117 } else {
118 goToPoints();
119 }
120 }, [contracts, pointCursor, setPointCursor, wallet, goToPoint, goToPoints]);
122 return (
123 <View inset>
124 <Grid>
125 <Grid.Item full as={Crumbs} routes={[{ text: 'Multipass' }]} />
126 <Grid.Item full as={H4} className="mt4">
127 Login
128 </Grid.Item>
130 <Grid.Item
131 full
132 as={Tabs}
133 className="mt1"
134 views={VIEWS}
135 options={OPTIONS}
136 currentTab={currentTab}
137 onTabChange={setCurrentTab}
138 />
140 <Grid.Item
141 full
142 as={ForwardButton}
143 solid
144 className="mt2"
145 loading={deducing}
146 disabled={Nothing.hasInstance(wallet) || deducing}
147 onClick={doContinue}>
148 Continue
149 </Grid.Item>
150 </Grid>
152 <Footer>
153 <Grid>
154 <Grid.Divider />
155 <Grid.Item full as={ForwardButton} onClick={goToActivate}>
156 Activate
157 </Grid.Item>
158 <Grid.Divider />
159 <Grid.Item full as={OfflineButton} />
160 </Grid>
161 </Footer>
162 </View>
163 );