-
-
Save timothycarambat/e7e014a6fd08f33e753bcf2f9e31239e to your computer and use it in GitHub Desktop.
| <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> |
@lmy-dawson replace this "window.userWalletAddress = ..." with this "localStorage.setItem("userWalletAddress", "wallet")"
and this "... = window.userWalletAddress" with this "localStorage.getItem("userWalletAddress")"
same problem @dynamo-foundation got like, did some one know how to fix ?
Thanks very much
@alwsyoung You have to open the server in your archive console, if you put this: python -m http.server
Then you go to chrome, firefox... etc and search localhost:8000
Its like emulate the web conection, if you think that, you are trying to conect metamask with nothing.
It does not work! i can't connect metamask, nothing happends
my task is when we click on metamask wallet button metamask extention will open ...
i am fresher i dont know how to do it please help me
This is grate intro , but unsecured as hell... I just create extension that creates window. , not taking that data are added to windows params , but they are requested over script received over body (unclean playground to test it out : https://gist.github.com/shivergard/a9c0c0d18303e9b304876ded604f77f8)
is there are any secure sample around ?
I put the button in all my pages but when i connect and go to another page it still says connect.