git.iko.soy/bridge
on c19b2a8 help sign in
bridge/src/views/Login/Metamask.js
68 lines 2.0 kB history raw
1import React, { useCallback } from 'react';
2import { Grid, Text, LinkButton, H5 } from 'indigo-react';
3import { Just } from 'folktale/maybe';
5import { useWallet } from 'store/wallet';
7import { WALLET_TYPES } from 'lib/wallet';
8import { MetamaskWallet } from 'lib/metamask';
9import useLoginView from 'lib/useLoginView';
11import SubmitButton from 'form/SubmitButton';
12import BridgeForm from 'form/BridgeForm';
14export default function Metamask({ className, goHome }) {
15 useLoginView(WALLET_TYPES.METAMASK);
16 const { setWallet, setWalletType } = useWallet();
18 const onSubmit = useCallback(async () => {
19 const accounts = await window.ethereum.enable();
20 const wallet = new MetamaskWallet(accounts[0]);
21 setWallet(Just(wallet));
22 setWalletType(WALLET_TYPES.METAMASK);
23 }, [setWallet, setWalletType]);
25 return (
26 <Grid className={className}>
27 {(window.ethereum && Login({ onSubmit, goHome })) || Unsupported()}
28 </Grid>
29 );
32function 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 );
47function Login({ onSubmit, goHome }) {
48 return (
49 <>
50 <Grid.Item full as={H5}>
51 Authenticate with Metamask
52 </Grid.Item>
53 <Grid.Item full as={Text} className="f6 mb3">
54 If you wish to login with a different wallet, please change it in the
55 Metamask extension
56 </Grid.Item>
57 <BridgeForm onSubmit={onSubmit} afterSubmit={goHome}>
58 {({ handleSubmit }) => (
59 <Grid.Item full as={SubmitButton} handleSubmit={handleSubmit}>
60 Login
61 {window.ethereum.selectedAddress &&
62 ' as ' + window.ethereum.selectedAddress}
63 </Grid.Item>
64 )}
65 </BridgeForm>
66 </>
67 );