git.iko.soy/bridge
on ebac710 help sign in
bridge/src/views/Login.js
147 lines 4.0 kB history raw
1import React, { useCallback, useState } from 'react';
2import { P, H4, H5, Grid, Text, Button, Flex, LinkButton } from 'indigo-react';
4import { version } from '../../package.json';
6import { useHistory } from 'store/history';
7import { useWallet } from 'store/wallet';
8import { usePointCursor } from 'store/pointCursor';
10import { WALLET_TYPES } from 'lib/wallet';
11import { COMMANDS, useFlowCommand } from 'lib/flowCommand';
13import View from 'components/View';
14import Tabs from 'components/Tabs';
15import Crumbs from 'components/Crumbs';
16import Footer from 'components/Footer';
17import { ForwardButton, OfflineButton } from 'components/Buttons';
19import Ticket from './Login/Ticket';
20import Other from './Login/Other';
22const NAMES = {
23 TICKET: 'TICKET',
24 OTHER: 'OTHER',
25};
27const VIEWS = {
28 [NAMES.TICKET]: Ticket,
29 [NAMES.OTHER]: Other,
30};
32const OPTIONS = [
33 { text: 'Master Ticket', value: NAMES.TICKET },
34 { text: 'Other', value: NAMES.OTHER },
35];
37const walletTypeToViewName = walletType => {
38 if (walletType === WALLET_TYPES.TICKET || !walletType) {
39 return NAMES.TICKET;
40 }
41 return NAMES.OTHER;
42};
44export default function Login() {
45 // globals
46 const { pop, push, names } = useHistory();
47 const { walletType } = useWallet();
48 const { setPointCursor } = usePointCursor();
49 const flow = useFlowCommand();
51 // inputs
52 const [isOther, setisOther] = useState(false);
54 const goToActivate = useCallback(() => push(names.ACTIVATE), [
55 push,
56 names.ACTIVATE,
57 ]);
59 const goHome = useCallback(() => {
60 if (!flow) {
61 push(names.POINTS);
62 } else {
63 switch (flow.kind) {
64 case COMMANDS.TAKE_LOCKUP:
65 push(names.ACCEPT_LOCKUP);
66 break;
67 //
68 default:
69 throw new Error('unimplemented flow ' + flow.kind);
70 }
71 }
72 }, [flow, push, names]);
74 const flowDescription = command => {
75 switch (command.kind) {
76 case COMMANDS.TAKE_LOCKUP:
77 //TODO kind of want "sign in as 0xabc.." here...
78 return <>To accept a star lockup batch, please sign in.</>;
79 default:
80 return <>Flow: {command.kind}</>;
81 }
82 };
84 return (
85 <View inset>
86 <Grid>
87 <Grid.Item full as={Text} className="flex justify-center mt9 mb7">
88 <Grid.Item as={Text} className="gray3">
89 Urbit ID /&nbsp;
90 </Grid.Item>
91 <Grid.Item as={Text}>Login</Grid.Item>
92 </Grid.Item>
93 {flow && (
94 <Grid.Item full as={Text} className="t-center mb4">
95 {flowDescription(flow)}
96 </Grid.Item>
97 )}
98 <Grid.Item full as={isOther ? Other : Ticket} goHome={goHome} />
99 {!isOther && (
100 <>
101 <Grid.Item full className="t-center mv4 gray4">
102 or
103 </Grid.Item>
104 <Grid.Item
105 full
106 as={Button}
107 className="b-solid b1 b-black"
108 center
109 onClick={() => setisOther(true)}>
110 Metamask, Mnemonic, Hardware Wallet...
111 </Grid.Item>
112 {!flow && (
113 <Grid.Item
114 full
115 onClick={goToActivate}
116 className="mv10 t-center f6">
117 <span className="gray4">New Urbit ID? </span>
118 <LinkButton>Activate</LinkButton>
119 </Grid.Item>
120 )}
121 </>
122 )}
123 {isOther && (
124 <Grid.Item
125 as={LinkButton}
126 onClick={() => setisOther(false)}
127 full
128 className="t-center underline f6 mt8">
129 Back
130 </Grid.Item>
131 )}
132 </Grid>
134 <Footer>
135 <Flex className="mb8 f6" justify="between">
136 <Flex.Item
137 as="a"
138 href="https://github.com/urbit/bridge/releases"
139 className="us-none pointer">
140 <span className="underline">Offline</span> ↗
141 </Flex.Item>
142 <Flex.Item className="gray4">v{version}</Flex.Item>
143 </Flex>
144 </Footer>
145 </View>
146 );