-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
67 lines (55 loc) · 2.02 KB
/
index.html
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
<html>
<head>
<title>Web3 Metamask Login</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="flex w-screen h-screen justify-center items-center">
<div class="flex-col space-y-2 justify-center items-center">
<button id='loginButton' onclick="" class="mx-auto rounded-md p-2 bg-purple-500 text-white">
Login with MetaMask
</button>
<p id='userWallet' class='text-lg text-gray-600 my-2'></p>
</div>
<script>
window.userWalletAddress = null
const loginButton = document.getElementById('loginButton')
const userWallet = document.getElementById('userWallet')
function toggleButton() {
if (!window.ethereum) {
loginButton.innerText = 'MetaMask is not installed'
loginButton.classList.remove('bg-purple-500', 'text-white')
loginButton.classList.add('bg-gray-500', 'text-gray-100', 'cursor-not-allowed')
return false
}
loginButton.addEventListener('click', loginWithMetaMask)
}
async function loginWithMetaMask() {
const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' })
.catch((e) => {
console.error(e.message)
return
})
if (!accounts) { return }
window.userWalletAddress = accounts[0]
userWallet.innerText = window.userWalletAddress
loginButton.innerText = 'Sign out of MetaMask'
loginButton.removeEventListener('click', loginWithMetaMask)
setTimeout(() => {
loginButton.addEventListener('click', signOutOfMetaMask)
}, 200)
}
function signOutOfMetaMask() {
window.userWalletAddress = null
userWallet.innerText = ''
loginButton.innerText = 'Sign in with MetaMask'
loginButton.removeEventListener('click', signOutOfMetaMask)
setTimeout(() => {
loginButton.addEventListener('click', loginWithMetaMask)
}, 200)
}
window.addEventListener('DOMContentLoaded', () => {
toggleButton()
});
</script>
</body>
</html>