on 4c8c607 help sign in
bridge/src/views/Login/Other.js
72 lines 1.9 kB history raw
1import React, { useState, useMemo } from 'react';
2import { Grid } from 'indigo-react';
4import useBreakpoints from 'lib/useBreakpoints';
6import View from 'components/View';
7import Accordion from 'components/Accordion';
9import PrivateKey from './PrivateKey';
10import Keystore from './Keystore';
11import Ledger from './Ledger';
12import Metamask from './Metamask';
13import Trezor from './Trezor';
14import Mnemonic from './Mnemonic';
16const NAMES = {
17 PRIVATE_KEY: 'PRIVATE_KEY',
18 KEYSTORE: 'KEYSTORE',
19 LEDGER: 'LEDGER',
20 TREZOR: 'TREZOR',
21 METAMASK: 'METAMASK',
22 MNEMONIC: 'MNEMONIC',
23};
25const VIEWS = {
26 [NAMES.PRIVATE_KEY]: PrivateKey,
27 [NAMES.KEYSTORE]: Keystore,
28 [NAMES.LEDGER]: Ledger,
29 [NAMES.TREZOR]: Trezor,
30 [NAMES.METAMASK]: Metamask,
31 [NAMES.MNEMONIC]: Mnemonic,
32};
34const OPTIONS = [
35 { text: 'Metamask', value: NAMES.METAMASK },
36 { text: 'Mnemonic (BIP 39)', value: NAMES.MNEMONIC },
37 { text: 'Ledger', value: NAMES.LEDGER },
38 { text: 'Trezor', value: NAMES.TREZOR },
39 { text: 'Ethereum Private Key', value: NAMES.PRIVATE_KEY },
40 { text: 'Ethereum Keystore', value: NAMES.KEYSTORE },
41];
43const isHardware = name => !![NAMES.TREZOR, NAMES.LEDGER].find(n => n === name);
45export default function Other({ className, ...rest }) {
46 const [currentTab, setCurrentTab] = useState(undefined);
48 const hardwareAllowed = useBreakpoints([false, true, true]);
49 const options = useMemo(
50 () =>
51 OPTIONS.map(o =>
52 !isHardware(o.value)
53 ? o
54 : { ...o, disabled: !hardwareAllowed && ' not available on mobile' }
55 ),
56 [hardwareAllowed]
57 );
58 return (
59 <>
60 <Grid.Divider />
61 <Accordion
62 className={className}
63 views={VIEWS}
64 options={options}
65 currentTab={currentTab}
66 onTabChange={setCurrentTab}
67 //
68 {...rest}
69 />
70 </>
71 );