git.iko.soy/bridge
on 4c8c607 help sign in
bridge/src/views/Login.js
132 lines 3.7 kB history raw
1import React, { useCallback, useState } from 'react';
2import { Grid, Text, Button, Flex, LinkButton } from 'indigo-react';
4import { version } from '../../package.json';
6import { useHistory } from 'store/history';
8import { COMMANDS, useFlowCommand } from 'lib/flowCommand';
10import View from 'components/View';
11import Footer from 'components/Footer';
13import Ticket from './Login/Ticket';
14import Other from './Login/Other';
16export default function Login() {
17 // globals
18 const { push, names } = useHistory();
19 const flow = useFlowCommand();
21 // inputs
22 const [isOther, setisOther] = useState(false);
24 const goToActivate = useCallback(() => push(names.ACTIVATE), [
25 push,
26 names.ACTIVATE,
27 ]);
29 const goHome = useCallback(() => {
30 if (!flow) {
31 push(names.POINTS);
32 } else {
33 switch (flow.kind) {
34 case COMMANDS.TAKE_LOCKUP:
35 push(names.ACCEPT_LOCKUP);
36 break;
37 //
38 case COMMANDS.BITCOIN:
39 push(names.BITCOIN_SIGN_TRANSACTION);
40 break;
41 //
42 case COMMANDS.XPUB:
43 push(names.BITCOIN_XPUB);
44 break;
45 //
46 default:
47 throw new Error('unimplemented flow ' + flow.kind);
48 }
49 }
50 }, [flow, push, names]);
52 const flowDescription = command => {
53 switch (command.kind) {
54 case COMMANDS.TAKE_LOCKUP:
55 //TODO kind of want "sign in as 0xabc.." here...
56 return <>To accept a star lockup batch, please sign in.</>;
57 //
58 case COMMANDS.BITCOIN:
59 return <>To sign a Bitcoin transaction, please sign in.</>;
60 //
61 case COMMANDS.XPUB:
62 return <>To view your Bitcoin extended public key, please sign in.</>;
63 //
64 default:
65 return <>Flow: {command.kind}</>;
66 }
67 };
69 return (
70 <View inset>
71 <Grid>
72 <Grid.Item full as={Text} className="flex justify-center mt9 mb7">
73 <Grid.Item as={Text} className="gray3">
74 Urbit ID /&nbsp;
75 </Grid.Item>
76 <Grid.Item as={Text}>Login</Grid.Item>
77 </Grid.Item>
78 {flow && (
79 <Grid.Item full as={Text} className="t-center mb4">
80 {flowDescription(flow)}
81 </Grid.Item>
82 )}
83 <Grid.Item full as={isOther ? Other : Ticket} goHome={goHome} />
84 {!isOther && (
85 <>
86 <Grid.Item full className="t-center mv4 gray4">
87 or
88 </Grid.Item>
89 <Grid.Item
90 full
91 as={Button}
92 className="b-solid b1 b-black"
93 center
94 onClick={() => setisOther(true)}>
95 Metamask, Mnemonic, Hardware Wallet...
96 </Grid.Item>
97 {!flow && (
98 <Grid.Item
99 full
100 onClick={goToActivate}
101 className="mv10 t-center f6">
102 <span className="gray4">New Urbit ID? </span>
103 <LinkButton>Activate</LinkButton>
104 </Grid.Item>
105 )}
106 </>
107 )}
108 {isOther && (
109 <Grid.Item
110 as={LinkButton}
111 onClick={() => setisOther(false)}
112 full
113 className="t-center underline f6 mt8">
114 Back
115 </Grid.Item>
116 )}
117 </Grid>
119 <Footer>
120 <Flex className="mb8 f6" justify="between">
121 <Flex.Item
122 as="a"
123 href="https://github.com/urbit/bridge/releases"
124 className="us-none pointer">
125 <span className="underline">Offline</span> ↗
126 </Flex.Item>
127 <Flex.Item className="gray4">v{version}</Flex.Item>
128 </Flex>
129 </Footer>
130 </View>
131 );