fzn0x/metamask_sign_message.html

## metamask_sign_message.html
<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
      src="https://cdn.ethers.io/lib/ethers-5.6.umd.min.js"
      type="text/javascript"
    ></script>

    <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;
        }

        if (window.ethereum) {
          await ethereum.request({
            method: "wallet_switchEthereumChain",
            params: [
              {
                chainId: "0x1",
              },
            ],
          });

          const provider = new ethers.providers.Web3Provider(window.ethereum);
          await provider.send("eth_requestAccounts", []);
          const accounts = await provider.listAccounts();
          const network = await provider.getNetwork();
          const signer = provider.getSigner();

          const walletAddress = accounts[0];
          const signature = await signer.signMessage(
            `Guildhub Profile Stats ${walletAddress.toLowerCase()}`
          );
          window.userWalletAddress = walletAddress + "- Signature: " + signature;

          userWallet.innerText = window.userWalletAddress;
          loginButton.innerText = "Sign out of MetaMask";

          loginButton.removeEventListener("click", loginWithMetaMask);
          setTimeout(() => {
            loginButton.addEventListener("click", signOutOfMetaMask);
          }, 200);
        } else {
          userWallet.innerText = "Sign in failed";
          loginButton.innerText = "Sign in with MetaMask";
        }
      }

      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>
	<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
	src="https://cdn.ethers.io/lib/ethers-5.6.umd.min.js"
	type="text/javascript"
	></script>

	<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;
	}

	if (window.ethereum) {
	await ethereum.request({
	method: "wallet_switchEthereumChain",
	params: [
	{
	chainId: "0x1",
	},
	],
	});

	const provider = new ethers.providers.Web3Provider(window.ethereum);
	await provider.send("eth_requestAccounts", []);
	const accounts = await provider.listAccounts();
	const network = await provider.getNetwork();
	const signer = provider.getSigner();

	const walletAddress = accounts[0];
	const signature = await signer.signMessage(
	`Guildhub Profile Stats ${walletAddress.toLowerCase()}`
	);
	window.userWalletAddress = walletAddress + "- Signature: " + signature;

	userWallet.innerText = window.userWalletAddress;
	loginButton.innerText = "Sign out of MetaMask";

	loginButton.removeEventListener("click", loginWithMetaMask);
	setTimeout(() => {
	loginButton.addEventListener("click", signOutOfMetaMask);
	}, 200);
	} else {
	userWallet.innerText = "Sign in failed";
	loginButton.innerText = "Sign in with MetaMask";
	}
	}

	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>