git.iko.soy/bridge
on df0c310 help sign in
bridge/src/views/Login/Metamask.jsx
128 lines 3.6 kB history raw
1import React, { useCallback, useEffect } 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';
15import SubmitButton from 'form/SubmitButton';
16import BridgeForm from 'form/BridgeForm';
17import Window from 'components/L2/Window/Window';
18import HeaderPane from 'components/L2/Window/HeaderPane';
19import BodyPane from 'components/L2/Window/BodyPane';
20import { Row } from '@tlon/indigo-react';
21import Web3 from 'web3';
23export default function Metamask({ className, goHome }) {
24 useLoginView(WALLET_TYPES.METAMASK);
25 const {
26 setWallet,
27 setWalletType,
28 setAuthToken,
29 setFakeToken,
30 skipLoginSigning,
31 } = useWallet();
33 const { setMetamask } = useNetwork();
35 useEffect(() => {
36 setMetamask(true);
37 }, []); // eslint-disable-line react-hooks/exhaustive-deps
39 const onSubmit = useCallback(async () => {
40 try {
41 setMetamask(true);
42 const accounts = await window.ethereum.request({
43 method: 'eth_requestAccounts',
44 });
45 const wallet = new MetamaskWallet(accounts.result[0]);
46 const web3 = new Web3(window.ethereum);
47 setWallet(Just(wallet));
48 setWalletType(WALLET_TYPES.METAMASK);
50 if (skipLoginSigning) {
51 setFakeToken();
52 return;
53 }
55 const authToken = await getAuthToken({
56 address: wallet.address,
57 walletType: WALLET_TYPES.METAMASK,
58 web3,
59 });
61 setAuthToken(Just(authToken));
62 } catch (e) {
63 console.error(e);
64 return { [FORM_ERROR]: e.message };
65 }
66 }, [
67 setMetamask,
68 setWallet,
69 setWalletType,
70 skipLoginSigning,
71 setAuthToken,
72 setFakeToken,
73 ]);
75 return (
76 <Grid className={className}>
77 {(window.ethereum && Login({ onSubmit, goHome })) || Unsupported()}
78 </Grid>
79 );
82function Unsupported() {
83 return (
84 <>
85 <Grid.Item full as={H5}>
86 Unsupported
87 </Grid.Item>
88 <Grid.Item full as={Text} className="f6 mb3">
89 Metamask is not installed on this browser. <br />
90 <LinkButton href="https://metamask.io" as={LinkButton}>
91 Get Metamask
92 </LinkButton>
93 </Grid.Item>
94 </>
95 );
97function Login({ onSubmit, goHome }) {
98 return (
99 <Window className="master-ticket">
100 <HeaderPane>
101 <Row className="header-row">
102 <h5>Metamask</h5>
103 </Row>
104 </HeaderPane>
105 <BodyPane className="login-body-pane">
106 <Grid.Item full as={Text} className="f6 gray4 mb3">
107 If you wish to login with a different wallet, please change it in the
108 Metamask extension
109 </Grid.Item>
110 <BridgeForm onSubmit={onSubmit} afterSubmit={goHome}>
111 {({ handleSubmit }) => (
112 <Grid.Item full className="flex-col justify-end w-full">
113 <Grid.Item
114 center
115 full
116 as={SubmitButton}
117 handleSubmit={handleSubmit}>
118 Login
119 {window.ethereum.selectedAddress &&
120 ' as ' + abbreviateAddress(window.ethereum.selectedAddress)}
121 </Grid.Item>
122 </Grid.Item>
123 )}
124 </BridgeForm>
125 </BodyPane>
126 </Window>
127 );