git.iko.soy/bridge
on 30dcfcd help sign in
bridge/src/views/Login.js
113 lines 3.1 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';
9import { WALLET_TYPES } from 'lib/wallet';
11import View from 'components/View';
12import Tabs from 'components/Tabs';
13import Crumbs from 'components/Crumbs';
14import Footer from 'components/Footer';
15import { ForwardButton, OfflineButton } from 'components/Buttons';
17import Ticket from './Login/Ticket';
18import Other from './Login/Other';
20const NAMES = {
21 TICKET: 'TICKET',
22 OTHER: 'OTHER',
23};
25const VIEWS = {
26 [NAMES.TICKET]: Ticket,
27 [NAMES.OTHER]: Other,
28};
30const OPTIONS = [
31 { text: 'Master Ticket', value: NAMES.TICKET },
32 { text: 'Other', value: NAMES.OTHER },
33];
35const walletTypeToViewName = walletType => {
36 if (walletType === WALLET_TYPES.TICKET || !walletType) {
37 return NAMES.TICKET;
38 }
39 return NAMES.OTHER;
40};
42export default function Login() {
43 // globals
44 const { pop, push, names } = useHistory();
45 const { walletType } = useWallet();
47 // inputs
48 const [isOther, setisOther] = useState(false);
50 const goToActivate = useCallback(() => push(names.ACTIVATE), [
51 push,
52 names.ACTIVATE,
53 ]);
55 const goHome = useCallback(() => {
56 push(names.POINTS);
57 }, [push, names]);
59 return (
60 <View inset>
61 <Grid>
62 <Grid.Item full as={Text} className="flex justify-center mt9 mb7">
63 <Grid.Item as={Text} className="gray3">
64 Urbit ID /&nbsp;
65 </Grid.Item>
66 <Grid.Item as={Text}>Login</Grid.Item>
67 </Grid.Item>
68 {isOther && <Grid.Item full as={Other} goHome={goHome} />}
69 {!isOther && <Grid.Item full as={Ticket} goHome={goHome} />}
70 {!isOther && (
71 <>
72 <Grid.Item full className="t-center mv4 gray4">
73 or
74 </Grid.Item>
75 <Grid.Item
76 full
77 as={Button}
78 className="b-solid b1 b-black"
79 center
80 onClick={() => setisOther(true)}>
81 Metamask, Mnemonic, Hardware Wallet...
82 </Grid.Item>
83 <Grid.Item full onClick={goToActivate} className="mv10 t-center f6">
84 <span className="gray4">New Urbit ID? </span>
85 <LinkButton>Activate</LinkButton>
86 </Grid.Item>
87 </>
88 )}
89 {isOther && (
90 <Grid.Item
91 as={LinkButton}
92 onClick={() => setisOther(false)}
93 full
94 className="t-center underline f6 mt8">
95 Back
96 </Grid.Item>
97 )}
98 </Grid>
100 <Footer>
101 <Flex className="mb8 f6" justify="between">
102 <Flex.Item
103 as="a"
104 href="https://github.com/urbit/bridge/releases"
105 className="us-none pointer">
106 <span className="underline">Offline</span> ↗
107 </Flex.Item>
108 <Flex.Item className="gray4">v{version}</Flex.Item>
109 </Flex>
110 </Footer>
111 </View>
112 );