git.iko.soy/bridge
on 4b0ca21 help sign in
bridge/src/views/Login/Metamask.js
86 lines 2.5 kB history raw
1import React, { useCallback } from 'react';
2import { Grid, Text, LinkButton, H5 } from 'indigo-react';
3import { Just } from 'folktale/maybe';
4import { FORM_ERROR } from 'final-form';
6import { useWallet } from 'store/wallet';
7import { useNetwork } from 'store/network';
9import { abbreviateAddress } from 'lib/utils/address';
10import { WALLET_TYPES } from 'lib/constants';
11import { MetamaskWallet } from 'lib/metamask';
12import { getAuthToken } from 'lib/authToken';
13import useLoginView from 'lib/useLoginView';
14import * as need from 'lib/need';
16import SubmitButton from 'form/SubmitButton';
17import BridgeForm from 'form/BridgeForm';
19export default function Metamask({ className, goHome }) {
20 useLoginView(WALLET_TYPES.METAMASK);
21 const { setWallet, setWalletType, setAuthToken } = useWallet();
23 const { web3 } = useNetwork();
24 const _web3 = need.web3(web3);
26 const onSubmit = useCallback(async () => {
27 try {
28 const accounts = await window.ethereum.enable();
29 const wallet = new MetamaskWallet(accounts[0]);
31 const authToken = await getAuthToken({
32 wallet,
33 walletType: WALLET_TYPES.METAMASK,
34 web3: _web3,
35 });
37 setAuthToken(Just(authToken));
38 setWallet(Just(wallet));
39 setWalletType(WALLET_TYPES.METAMASK);
40 } catch (e) {
41 console.error(e);
42 return { [FORM_ERROR]: e.message };
43 }
44 }, [_web3, setAuthToken, setWallet, setWalletType]);
46 return (
47 <Grid className={className}>
48 {(window.ethereum && Login({ onSubmit, goHome })) || Unsupported()}
49 </Grid>
50 );
53function Unsupported() {
54 return (
55 <>
56 <Grid.Item full as={H5}>
57 Unsupported
58 </Grid.Item>
59 <Grid.Item full as={Text} className="f6 mb3">
60 Metamask is not installed on this browser. <br />
61 <LinkButton href="https://metamask.io" as={LinkButton}>
62 Get Metamask
63 </LinkButton>
64 </Grid.Item>
65 </>
66 );
68function Login({ onSubmit, goHome }) {
69 return (
70 <>
71 <Grid.Item full as={Text} className="f6 gray4 mb3">
72 If you wish to login with a different wallet, please change it in the
73 Metamask extension
74 </Grid.Item>
75 <BridgeForm onSubmit={onSubmit} afterSubmit={goHome}>
76 {({ handleSubmit }) => (
77 <Grid.Item full as={SubmitButton} handleSubmit={handleSubmit}>
78 Login
79 {window.ethereum.selectedAddress &&
80 ' as ' + abbreviateAddress(window.ethereum.selectedAddress)}
81 </Grid.Item>
82 )}
83 </BridgeForm>
84 </>
85 );