git.iko.soy/bridge
on master help sign in
Rearranged login view
commit0b5533ca8f16e2c8554f7920e7e12b8045a5fd0c authorLiam Fitzgerald <hastuc-dibtux@gmail.com> dateFri 6 Sep 2019, 16:23 (7 years ago) parent45e69c2
3 files changed+101−54
compare with master
unifiedsplit
src/views/Login.js+7−30 src/views/Login/Metamask.js+27−24 src/views/Login/Other.js+67
src/views/Login.js+7−30
@@ -13,51 +13,28 @@ import Footer from 'components/Footer';
1313import { ForwardButton, OfflineButton } from 'components/Buttons';
1414
1515import Ticket from './Login/Ticket';
16−import Mnemonic from './Login/Mnemonic';
17−import Advanced from './Login/Advanced';
18−import Hardware from './Login/Hardware';
19−import Metamask from './Login/Metamask';
16+import Other from './Login/Other';
2017
2118const NAMES = {
2219 TICKET: 'TICKET',
23− MNEMONIC: 'MNEMONIC',
24− HARDWARE: 'HARDWARE',
25− ADVANCED: 'ADVANCED',
26− METAMASK: 'METAMASK',
20+ OTHER: 'OTHER',
2721};
2822
2923const VIEWS = {
3024 [NAMES.TICKET]: Ticket,
31− [NAMES.MNEMONIC]: Mnemonic,
32− [NAMES.HARDWARE]: Hardware,
33− [NAMES.ADVANCED]: Advanced,
34− [NAMES.METAMASK]: Metamask,
25+ [NAMES.OTHER]: Other,
3526};
3627
3728const OPTIONS = [
3829 { text: 'Master Ticket', value: NAMES.TICKET },
39− { text: 'Mnemonic', value: NAMES.MNEMONIC },
40− { text: 'Hardware', value: NAMES.HARDWARE },
41− { text: 'Advanced', value: NAMES.ADVANCED },
42− { text: 'Metamask', value: NAMES.METAMASK },
30+ { text: 'Other', value: NAMES.OTHER },
4331];
4432
4533const walletTypeToViewName = walletType => {
46− switch (walletType) {
47− case WALLET_TYPES.MNEMONIC:
48− return NAMES.MNEMONIC;
49− case WALLET_TYPES.LEDGER:
50− case WALLET_TYPES.TREZOR:
51− return NAMES.HARDWARE;
52− case WALLET_TYPES.KEYSTORE:
53− case WALLET_TYPES.PRIVATE_KEY:
54− return NAMES.ADVANCED;
55− case WALLET_TYPES.TICKET:
56− case WALLET_TYPES.SHARDS:
57− return NAMES.TICKET;
58− default:
59− return NAMES.TICKET;
34+ if (walletType === WALLET_TYPES.TICKET || !walletType) {
35+ return NAMES.TICKET;
6036 }
37+ return NAMES.OTHER;
6138};
6239
6340export default function Login() {
src/views/Login/Metamask.js+27−24
@@ -1,5 +1,4 @@
11import React, { useCallback } from 'react';
2−import cn from 'classnames';
32import { Grid, Text, LinkButton, H5 } from 'indigo-react';
43import { Just } from 'folktale/maybe';
54
@@ -7,11 +6,13 @@ import { useWallet } from 'store/wallet';
76
87import { WALLET_TYPES } from 'lib/wallet';
98import { MetamaskWallet } from 'lib/metamask';
9+import useLoginView from 'lib/useLoginView';
1010
1111import SubmitButton from 'form/SubmitButton';
1212import BridgeForm from 'form/BridgeForm';
1313
1414export default function Metamask({ className, goHome }) {
15+ useLoginView(WALLET_TYPES.METAMASK);
1516 const { setWallet, setWalletType } = useWallet();
1617
1718 const onSubmit = useCallback(async () => {
@@ -19,9 +20,32 @@ export default function Metamask({ className, goHome }) {
1920 const wallet = new MetamaskWallet(accounts[0]);
2021 setWallet(Just(wallet));
2122 setWalletType(WALLET_TYPES.METAMASK);
22− }, [setWallet]);
23+ }, [setWallet, setWalletType]);
2324
24− const login = () => (
25+ return (
26+ <Grid className={className}>
27+ {(window.ethereum && Login({ onSubmit, goHome })) || Unsupported()}
28+ </Grid>
29+ );
30+}
31+
32+function Unsupported() {
33+ return (
34+ <>
35+ <Grid.Item full as={H5}>
36+ Unsupported
37+ </Grid.Item>
38+ <Grid.Item full as={Text} className="f6 mb3">
39+ Metamask is not installed on this browser. <br />
40+ <LinkButton href="https://metamask.io" as={LinkButton}>
41+ Get Metamask
42+ </LinkButton>
43+ </Grid.Item>
44+ </>
45+ );
46+}
47+function Login({ onSubmit, goHome }) {
48+ return (
2549 <>
2650 <Grid.Item full as={H5}>
2751 Authenticate with Metamask
@@ -41,25 +65,4 @@ export default function Metamask({ className, goHome }) {
4165 </BridgeForm>
4266 </>
4367 );
44− return (
45− <Grid className={cn('mt4', className)}>
46− {(window.ethereum && login()) || MetamaskUnsupported()}
47− </Grid>
48− );
49−}
50−
51−function MetamaskUnsupported() {
52− return (
53− <>
54− <Grid.Item full as={H5}>
55− Metamask unsupported
56− </Grid.Item>
57− <Grid.Item full as={Text} className="f6 mb3">
58− Metamask is not installed on this browser.
59− <LinkButton href="https://metamask.io" as={LinkButton}>
60− Get Metamask
61− </LinkButton>
62− </Grid.Item>
63− </>
64− );
6568}
src/views/Login/Other.jsnew file+67
@@ -0,0 +1,67 @@
1+import React, { useState, useMemo } from 'react';
2+
3+import useBreakpoints from 'lib/useBreakpoints';
4+
5+import Accordion from 'components/Accordion';
6+
7+import PrivateKey from './PrivateKey';
8+import Keystore from './Keystore';
9+import Ledger from './Ledger';
10+import Metamask from './Metamask';
11+import Trezor from './Trezor';
12+import Mnemonic from './Mnemonic';
13+
14+const NAMES = {
15+ PRIVATE_KEY: 'PRIVATE_KEY',
16+ KEYSTORE: 'KEYSTORE',
17+ LEDGER: 'LEDGER',
18+ TREZOR: 'TREZOR',
19+ METAMASK: 'METAMASK',
20+ MNEMONIC: 'MNEMONIC',
21+};
22+
23+const VIEWS = {
24+ [NAMES.PRIVATE_KEY]: PrivateKey,
25+ [NAMES.KEYSTORE]: Keystore,
26+ [NAMES.LEDGER]: Ledger,
27+ [NAMES.TREZOR]: Trezor,
28+ [NAMES.METAMASK]: Metamask,
29+ [NAMES.MNEMONIC]: Mnemonic,
30+};
31+
32+const OPTIONS = [
33+ { text: 'Mnemonic (BIP 39)', value: NAMES.MNEMONIC },
34+ { text: 'Ledger', value: NAMES.LEDGER },
35+ { text: 'Trezor', value: NAMES.TREZOR },
36+ { text: 'Metamask', value: NAMES.METAMASK },
37+ { text: 'Ethereum Private Key', value: NAMES.PRIVATE_KEY },
38+ { text: 'Ethereum Keystore', value: NAMES.KEYSTORE },
39+];
40+
41+const isHardware = name => !![NAMES.TREZOR, NAMES.LEDGER].find(n => n === name);
42+
43+export default function Other({ className, ...rest }) {
44+ const [currentTab, setCurrentTab] = useState(undefined);
45+
46+ const hardwareAllowed = useBreakpoints([false, true, true]);
47+ const options = useMemo(
48+ () =>
49+ OPTIONS.map(o =>
50+ !isHardware(o.value)
51+ ? o
52+ : { ...o, disabled: !hardwareAllowed && ' not available on mobile' }
53+ ),
54+ [hardwareAllowed]
55+ );
56+ return (
57+ <Accordion
58+ className={className}
59+ views={VIEWS}
60+ options={options}
61+ currentTab={currentTab}
62+ onTabChange={setCurrentTab}
63+ //
64+ {...rest}
65+ />
66+ );
67+}