Merge pull request #94 from vasusadariya/fixbugconnectwalletbutton

Fix the bug now connect wallet appears first and if wallet is connected then profile and create button is visible

Author: Ronnieraj37

client/app/components/Header/Header.tsx

@@ -1,6 +1,5 @@
 "use client";
-
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { motion, AnimatePresence } from "framer-motion";
@@ -11,7 +10,7 @@ import {
   XMarkIcon,
   Bars3Icon,
 } from "@heroicons/react/24/outline";
-import Web3Connect from "../Helper/Web3Connect";
+import Web3Connect from "../Helper/Web3Connect"; // Import Web3Connect
 import Image from "next/image";
 
 const menuItems = [
@@ -20,12 +19,47 @@ const menuItems = [
   { name: "Profile", href: "/profile", icon: UserIcon },
 ];
 
+//if wallet is connected
+async function IsWalletConnected() {
+  const { ethereum } = window;
+  if (ethereum && ethereum.isMetaMask) {
+    const accounts = await ethereum.request({ method: "eth_accounts" });
+    return accounts.length > 0;
+  }
+  return false;
+}
+
 const Header = () => {
   const pathname = usePathname();
+
+  const [isWalletConnected, setIsWalletConnected] = useState<boolean | null>(
+    null
+  );
+
+  //handle wallet connection
+  const connectWallet = async () => {
+    try {
+      const connected = await IsWalletConnected();
+      setIsWalletConnected(connected);
+    } catch (error) {
+      console.error("Failed to connect wallet:", error);
+      setIsWalletConnected(false);
+    }
+  };
+
+  // Check wallet connection when the component is mounted
+  useEffect(() => {
+    const checkConnection = async () => {
+      const connected = await IsWalletConnected();
+      setIsWalletConnected(connected);
+    };
+    checkConnection();
+  }, []);
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
 
   const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen);
 
+
   return (
     <>
       <motion.header
@@ -49,6 +83,76 @@ const Header = () => {
               </h1>
             </Link>
 
+
+          <nav className="flex items-center space-x-4">
+            {/* Display Home button always */}
+            <Link href="/" className="relative">
+              <motion.button
+                className={`inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md ${
+                  pathname === "/"
+                    ? "text-indigo-600"
+                    : "text-gray-700 hover:text-indigo-600"
+                } bg-white hover:bg-gray-50`}
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+              >
+                <HomeIcon className="h-5 w-5 mr-2" aria-hidden="true" />
+                <span className="hidden sm:inline">Home</span>
+              </motion.button>
+              {pathname === "/" && (
+                <motion.div
+                  className="absolute bottom-0 left-0 right-0 h-0.5 bg-indigo-600"
+                  layoutId="underline"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{ duration: 0.3 }}
+                />
+              )}
+            </Link>
+
+            {isWalletConnected === null ? (
+              // Show "Checking..." button while the connection is being verified
+              <button
+                className="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700"
+                disabled
+              >
+                Checking...
+              </button>
+            ) : isWalletConnected ? (
+              // Show "Create" and "Profile" buttons if wallet is connected
+              menuItems
+                .filter((item) => item.name !== "Home")
+                .map((item) => (
+                  <Link key={item.name} href={item.href} className="relative">
+                    <motion.button
+                      className={`inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md ${
+                        pathname === item.href
+                          ? "text-indigo-600"
+                          : "text-gray-700 hover:text-indigo-600"
+                      } bg-white hover:bg-gray-50`}
+                      whileHover={{ scale: 1.05 }}
+                      whileTap={{ scale: 0.95 }}
+                    >
+                      <item.icon className="h-5 w-5 mr-2" aria-hidden="true" />
+                      <span className="hidden sm:inline">{item.name}</span>
+                    </motion.button>
+                    {pathname === item.href && (
+                      <motion.div
+                        className="absolute bottom-0 left-0 right-0 h-0.5 bg-indigo-600"
+                        layoutId="underline"
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        transition={{ duration: 0.3 }}
+                      />
+                    )}
+                  </Link>
+                ))
+            ) : (
+              // Show "Connect Wallet" button if wallet is not connected
+              <Web3Connect />
+            )}
+          </nav>
+
             {/* Desktop/Tablet Navigation */}
             <nav className="hidden lg:flex items-center space-x-4">
               {menuItems.map((item) => (
@@ -94,6 +198,7 @@ const Header = () => {
               </button>
             </div>
           </div>
+
         </div>
       </motion.header>
 

client/app/components/Helper/Web3Connect.tsx

@@ -1,18 +1,29 @@
 import React from "react";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
+import { useAccount } from "wagmi";
 import "@rainbow-me/rainbowkit/styles.css";
+
 const Web3Connect = () => {
+  const { isConnected, address } = useAccount();
+
   return (
     <div className="p-4">
-      <ConnectButton
-        accountStatus={{
-          smallScreen: "avatar",
-          largeScreen: "full",
-        }}
-        showBalance={false}
-      />
+      {/* If connected, show the wallet address, else show the Connect button */}
+      {isConnected ? (
+        <div>
+          <span>Connected to: {address}</span>
+        </div>
+      ) : (
+        <ConnectButton
+          accountStatus={{
+            smallScreen: "avatar",
+            largeScreen: "full",
+          }}
+          showBalance={false}
+        />
+      )}
     </div>
   );
 };
 
-export default Web3Connect;
+export default Web3Connect;