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
| <!DOCTYPE html>
<html lang="en">
<head>
<title>
Web3 Metamask login
</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex w-screen h-screen justify-center items-center">
<div class = 'flex-col sace-y-2 justify-center items-center'>
<button id='loginButton' onclick= '' class="rounded-md p-2 bg-purple-500 p-2 text-white">
Login with Metamask
</button>
<p id='userWallet' class='text-lg text-gray-800 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> |
Partager