Merge branch 'main' into sid-frontend-initial

components/custom/header.tsx

@@ -1,6 +1,7 @@
 'use client';
 import React, { useState } from 'react';
 import Link from 'next/link';
+import MetaMask from '../scripts/MetaMask';
 
 const Header = () => {
   const [mouseX, setMouseX] = useState(0);
@@ -50,9 +51,7 @@ const Header = () => {
               </Link>
             </li>
             <li>
-              <button className="bg-gradient-to-r from-blue-500 to-indigo-700 text-white px-4 py-1 rounded-full transform transition-transform duration-300 hover:scale-105 shadow-lg hover:shadow-2xl">
+              <MetaMask />
-                Login
-              </button>
             </li>
           </ul>
         </nav>

components/scripts/MetaMask.tsx

@@ -1,27 +1,73 @@
 'use client';
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
+import { ethers } from 'ethers';
+
+declare global {
+  interface Window {
+    ethereum: ethers.providers.ExternalProvider;
+  }
+}
 
 const MetaMask = () => {
+  const [metaMaskInstalled, setMetaMaskInstalled] = useState(false);
+  const [account, setAccount] = useState<string | null>(null);
+
   const isMetaMaskInstalled = () =>
+    typeof window !== 'undefined' &&
     typeof (window as { ethereum?: unknown }).ethereum !== 'undefined';
 
   useEffect(() => {
-    console.log('Print something');
+    if (isMetaMaskInstalled()) {
+      setMetaMaskInstalled(true);
+    }
   }, []);
 
-  // TODO FIX! This is not working :(
+  const handleConnectWallet = async () => {
-  const metaMaskInstalled = isMetaMaskInstalled();
+    if (window.ethereum && window.ethereum.request) {
-  //console.log(metaMaskInstalled);
+      try {
+        // Request account access
+        const accounts = await window.ethereum.request({
+          method: 'eth_requestAccounts',
+        });
+        setAccount(accounts[0]); // Set the first account
+      } catch (error) {
+        console.error('Error connecting to MetaMask:', error);
+      }
+    } else {
+      alert(
+        'MetaMask is not installed. Please install MetaMask and try again.'
+      );
+    }
+  };
 
   return (
-    <div className="text-center p-4">
+    <div className="">
       {metaMaskInstalled ? (
-        <button className="bg-blue-500 text-white px-4 py-2 rounded">
+        <div>
+          {account ? (
+            <p className="text-green-500">
+              Connected: 0x{account.slice(2, 5)}...{account.slice(-3)}
+            </p>
+          ) : (
+            <button
+              onClick={handleConnectWallet}
+              className="bg-gradient-to-r from-blue-500 to-indigo-700 text-white px-4 py-1 rounded-full transform transition-transform duration-300 hover:scale-105 shadow-lg hover:shadow-2xl"
+            >
               Connect Wallet
             </button>
+          )}
+        </div>
       ) : (
-        <p>MetaMask not detected</p>
+        <button
+          // Install Metamask extension if not already installed
+          onClick={() =>
+            window.open('https://metamask.io/download.html', '_blank')
+          }
+          className="bg-gradient-to-r from-blue-500 to-indigo-700 text-white px-4 py-1 rounded-full transform transition-transform duration-300 hover:scale-105 shadow-lg hover:shadow-2xl"
+        >
+          Install MetaMask to connect wallet
+        </button>
       )}
     </div>
   );

package.json

@@ -18,8 +18,12 @@
     "@radix-ui/react-slot": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+
     "embla-carousel-react": "^8.3.0",
     "framer-motion": "^11.11.10",
+
+    "ethers": "^5.7.2",
+
     "lucide-react": "^0.446.0",
     "next": "14.2.13",
     "react": "^18.3.1",
@@ -28,6 +32,7 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
+    "@types/ethereum-protocol": "^1.0.5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",