/
use-metamask.ts
74 lines (62 loc) · 1.86 KB
/
use-metamask.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import { ethers } from 'ethers';
import { useCallback, useEffect } from 'react';
import { useMasa } from './use-masa';
const DEFAULT_RPC = 'https://rpc.ankr.com/eth_goerli'
//@ts-ignore
const provider = window?.ethereum
? //@ts-ignore
new ethers.providers.Web3Provider(window?.ethereum)
: new ethers.providers.JsonRpcProvider(DEFAULT_RPC);
export const useMetamask = () => {
const { setProvider, masa } = useMasa();
const accountChangedHandler = useCallback(
async (newAccount) => {
if (setProvider) setProvider(newAccount);
},
[setProvider]
);
const connect = useCallback(async () => {
//@ts-ignore
if (window.ethereum) {
await provider.send('eth_requestAccounts', []);
await accountChangedHandler(provider.getSigner(0));
if (provider && setProvider) {
setProvider(provider.getSigner(0));
onConnect();
}
}
}, [accountChangedHandler, setProvider]);
useEffect(() => {
const connectWalletOnPageLoad = async () => {
if (localStorage?.getItem('isWalletConnected') === 'true') {
try {
await connect();
} catch (ex) {
console.log(ex);
}
}
};
void connectWalletOnPageLoad();
}, [connect]);
const onConnect = () => {
localStorage.setItem('isWalletConnected', 'true');
};
const handleLogout = useCallback(async () => {
await masa?.session.logout();
}, [masa]);
const disconnect = useCallback(async () => {
await handleLogout();
localStorage.setItem('isWalletConnected', 'false');
setProvider?.(null);
}, [handleLogout, setProvider]);
useEffect(() => {
//@ts-ignore
window?.ethereum?.on('accountsChanged', async (accounts) => {
if (accounts.length === 0) {
await handleLogout();
await disconnect();
}
});
}, [handleLogout, disconnect]);
return { connect };
};