git.iko.soy/bridge
on 4c8c607 help sign in
bridge/src/views/Login/Metamask.js
85 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 { WALLET_TYPES, abbreviateAddress } from 'lib/wallet';
10import { MetamaskWallet } from 'lib/metamask';
11import { getAuthToken } from 'lib/authToken';
12import useLoginView from 'lib/useLoginView';
13import * as need from 'lib/need';
15import SubmitButton from 'form/SubmitButton';
16import BridgeForm from 'form/BridgeForm';
18export default function Metamask({ className, goHome }) {
19 useLoginView(WALLET_TYPES.METAMASK);
20 const { setWallet, setWalletType, setAuthToken } = useWallet();
22 const { web3 } = useNetwork();
23 const _web3 = need.web3(web3);
25 const onSubmit = useCallback(async () => {
26 try {
27 const accounts = await window.ethereum.enable();
28 const wallet = new MetamaskWallet(accounts[0]);
30 const authToken = await getAuthToken({
31 wallet,
32 walletType: WALLET_TYPES.METAMASK,
33 web3: _web3,
34 });
36 setAuthToken(Just(authToken));
37 setWallet(Just(wallet));
38 setWalletType(WALLET_TYPES.METAMASK);
39 } catch (e) {
40 console.error(e);
41 return { [FORM_ERROR]: e.message };
42 }
43 }, [_web3, setAuthToken, setWallet, setWalletType]);
45 return (
46 <Grid className={className}>
47 {(window.ethereum && Login({ onSubmit, goHome })) || Unsupported()}
48 </Grid>
49 );
52function Unsupported() {
53 return (
54 <>
55 <Grid.Item full as={H5}>
56 Unsupported
57 </Grid.Item>
58 <Grid.Item full as={Text} className="f6 mb3">
59 Metamask is not installed on this browser. <br />
60 <LinkButton href="https://metamask.io" as={LinkButton}>
61 Get Metamask
62 </LinkButton>
63 </Grid.Item>
64 </>
65 );
67function Login({ onSubmit, goHome }) {
68 return (
69 <>
70 <Grid.Item full as={Text} className="f6 gray4 mb3">
71 If you wish to login with a different wallet, please change it in the
72 Metamask extension
73 </Grid.Item>
74 <BridgeForm onSubmit={onSubmit} afterSubmit={goHome}>
75 {({ handleSubmit }) => (
76 <Grid.Item full as={SubmitButton} handleSubmit={handleSubmit}>
77 Login
78 {window.ethereum.selectedAddress &&
79 ' as ' + abbreviateAddress(window.ethereum.selectedAddress)}
80 </Grid.Item>
81 )}
82 </BridgeForm>
83 </>
84 );