Added 'Connect Wallet' feature: Access website only after connecting …

…via MetaMask. (#560)

connectwallet.js

@@ -0,0 +1,69 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const connectButton = document.getElementById("connectButton");
+  const mainContent = document.getElementById("mainContent");
+  const errorMessage = document.getElementById("errorMessage");
+  const walletAddress = document.getElementById("walletAddress");
+
+  // Add hover effect for button
+  connectButton.addEventListener("mouseover", function () {
+    this.style.backgroundColor = "#45a049";
+  });
+  connectButton.addEventListener("mouseout", function () {
+    this.style.backgroundColor = "#4CAF50";
+  });
+
+  // Check if MetaMask is installed
+  const isMetaMaskInstalled = () => {
+    return typeof window.ethereum !== "undefined" && window.ethereum.isMetaMask;
+  };
+
+  // Function to format address
+  function formatAddress(address) {
+    return `${address.slice(0, 4)}...${address.slice(-4)}`;
+  }
+
+  // Connect Wallet Function
+  async function connectWallet() {
+    if (!isMetaMaskInstalled()) {
+      errorMessage.style.display = "block";
+      return;
+    }
+
+    try {
+      // Request account access
+      const accounts = await window.ethereum.request({
+        method: "eth_requestAccounts",
+      });
+
+      if (accounts.length > 0) {
+        // Hide connect button and show main content
+        connectButton.style.display = "none";
+        mainContent.style.display = "block";
+
+        // Display formatted wallet address
+        const connectedAccount = accounts[0];
+        walletAddress.textContent = formatAddress(connectedAccount);
+        console.log("Connected account:", connectedAccount);
+      }
+    } catch (error) {
+      console.error("Error connecting wallet:", error);
+    }
+  }
+
+  // Add click event listener to connect button
+  connectButton.addEventListener("click", connectWallet);
+
+  // Handle account changes
+  if (window.ethereum) {
+    window.ethereum.on("accountsChanged", function (accounts) {
+      if (accounts.length === 0) {
+        // User disconnected their wallet
+        connectButton.style.display = "block";
+        mainContent.style.display = "none";
+      } else {
+        // Update displayed address when account changes
+        walletAddress.textContent = formatAddress(accounts[0]);
+      }
+    });
+  }
+});