git.iko.soy/bridge
on acf71dd help sign in
bridge/src/views/Login.js
140 lines 3.8 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 default:
65 throw new Error('unimplemented flow ' + flow.kind);
66 }
67 }
68 }, [flow, push, names]);
70 const flowDescription = command => {
71 switch (command.kind) {
72 default:
73 return <>Flow: {command.kind}</>;
74 }
75 };
77 return (
78 <View inset>
79 <Grid>
80 <Grid.Item full as={Text} className="flex justify-center mt9 mb7">
81 <Grid.Item as={Text} className="gray3">
82 Urbit ID /&nbsp;
83 </Grid.Item>
84 <Grid.Item as={Text}>Login</Grid.Item>
85 </Grid.Item>
86 {flow && (
87 <Grid.Item full as={Text} className="t-center mb4">
88 {flowDescription(flow)}
89 </Grid.Item>
90 )}
91 <Grid.Item full as={isOther ? Other : Ticket} goHome={goHome} />
92 {!isOther && (
93 <>
94 <Grid.Item full className="t-center mv4 gray4">
95 or
96 </Grid.Item>
97 <Grid.Item
98 full
99 as={Button}
100 className="b-solid b1 b-black"
101 center
102 onClick={() => setisOther(true)}>
103 Metamask, Mnemonic, Hardware Wallet...
104 </Grid.Item>
105 {!flow && (
106 <Grid.Item
107 full
108 onClick={goToActivate}
109 className="mv10 t-center f6">
110 <span className="gray4">New Urbit ID? </span>
111 <LinkButton>Activate</LinkButton>
112 </Grid.Item>
113 )}
114 </>
115 )}
116 {isOther && (
117 <Grid.Item
118 as={LinkButton}
119 onClick={() => setisOther(false)}
120 full
121 className="t-center underline f6 mt8">
122 Back
123 </Grid.Item>
124 )}
125 </Grid>
127 <Footer>
128 <Flex className="mb8 f6" justify="between">
129 <Flex.Item
130 as="a"
131 href="https://github.com/urbit/bridge/releases"
132 className="us-none pointer">
133 <span className="underline">Offline</span> ↗
134 </Flex.Item>
135 <Flex.Item className="gray4">v{version}</Flex.Item>
136 </Flex>
137 </Footer>
138 </View>
139 );