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