From 3cd65193eac4a2e5d9049828b73f98b7ec337c05 Mon Sep 17 00:00:00 2001
From: mitchellecm7 <obidikechukwuagozie1@gmail.com>
Date: Thu, 23 Apr 2026 11:21:03 -0700
Subject: [PATCH 1/4] feat: add wallet connect/disconnect component with
 Freighter integration

---
 components/navbar.tsx         | 192 ++++++++++++++++++++++++----------
 components/wallet-connect.tsx | 126 ++++++++++++++++++++++
 2 files changed, 263 insertions(+), 55 deletions(-)
 create mode 100644 components/wallet-connect.tsx

diff --git a/components/navbar.tsx b/components/navbar.tsx
index e9ba224..6ca2600 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -1,28 +1,143 @@
+// 'use client'
+
+// import Link from 'next/link'
+// import { Button } from '@/components/ui/button'
+// import { Menu, X, Wallet } from 'lucide-react'
+// import { useState, useEffect } from 'react'
+// import Image from 'next/image'
+// import { ThemeToggle } from './ui/ThemeToggle'
+
+// export function Navbar() {
+//   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+//   const [address, setAddress] = useState<string | null>(null)
+
+//   useEffect(() => {
+//     const savedAddress = localStorage.getItem('stellar_wallet_address')
+//     if (savedAddress && savedAddress !== address) {
+//       // eslint-disable-next-line react-hooks/set-state-in-effect
+//       setAddress(savedAddress)
+//     }
+//   }, [address])
+
+//   const formatAddress = (addr: string) => {
+//     if (!addr || addr.length <= 10) return addr;
+//     return `${addr.substring(0, 5)}...${addr.substring(addr.length - 4)}`
+//   }
+
+//   return (
+//     <nav className="fixed top-0 left-0 right-0 z-50 border-b border-border/40 backdrop-blur-xl bg-background/80">
+//       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+//         <div className="flex h-16 items-center justify-between">
+//           <div className="flex items-center gap-2">
+//             <Image
+//               src='/assets/logo2.png'
+//               alt="Logo"
+//               width={20}
+//               height={20}
+//               className="h-10 w-10 object-cover"
+//             />
+//             <span className="text-xl font-bold text-foreground">TaskChain</span>
+//           </div>
+
+//           <div className="hidden md:flex items-center gap-8">
+//             <Link href="#features" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+//               Features
+//             </Link>
+//             <Link href="#how-it-works" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+//               How It Works
+//             </Link>
+//             <Link href="#benefits" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+//               Benefits
+//             </Link>
+//             <Link href="#testimonials" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+//               Testimonials
+//             </Link>
+//           </div>
+
+//           <div className="hidden md:flex items-center gap-4">
+//             {address ? (
+//               <Button variant="outline" asChild>
+//                 <Link href="/login">
+//                   <Wallet className="w-4 h-4 mr-2" />
+//                   {formatAddress(address)}
+//                 </Link>
+//               </Button>
+//             ) : (
+//               <>
+//                 <Button variant="ghost" asChild>
+//                   <Link href="/login">Login</Link>
+//                 </Button>
+//                 <Button asChild>
+//                   <Link href="/signup">Get Started</Link>
+//                 </Button>
+//                    <ThemeToggle />
+//               </>
+//             )}
+          
+         
+//           </div>
+
+//           <button
+//             className="md:hidden p-2 text-muted-foreground hover:text-foreground"
+//             onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+//           >
+//             {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+//           </button>
+//         </div>
+//       </div>
+
+//       {mobileMenuOpen && (
+//         <div className="md:hidden border-t border-border/40 bg-background/95 backdrop-blur-xl">
+//           <div className="px-4 py-6 space-y-4">
+//             <Link href="#features" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
+//               Features
+//             </Link>
+//             <Link href="#how-it-works" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
+//               How It Works
+//             </Link>
+//             <Link href="#benefits" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
+//               Benefits
+//             </Link>
+//             <Link href="#testimonials" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
+//               Testimonials
+//             </Link>
+//             <div className="pt-4 space-y-2">
+//               {address ? (
+//                 <Button variant="outline" className="w-full" asChild>
+//                   <Link href="/login">
+//                     <Wallet className="w-4 h-4 mr-2" />
+//                     {formatAddress(address)}
+//                   </Link>
+//                 </Button>
+//               ) : (
+//                 <>
+//                   <Button variant="ghost" className="w-full" asChild>
+//                     <Link href="/login">Login</Link>
+//                   </Button>
+//                   <Button className="w-full" asChild>
+//                     <Link href="/signup">Get Started</Link>
+//                   </Button>
+//                 </>
+//               )}
+//             </div>
+//           </div>
+//         </div>
+//       )}
+//     </nav>
+//   )
+// }
 'use client'
 
 import Link from 'next/link'
 import { Button } from '@/components/ui/button'
-import { Menu, X, Wallet } from 'lucide-react'
-import { useState, useEffect } from 'react'
+import { Menu, X } from 'lucide-react'
+import { useState } from 'react'
 import Image from 'next/image'
 import { ThemeToggle } from './ui/ThemeToggle'
+import { WalletConnect } from '@/components/wallet-connect'
 
 export function Navbar() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
-  const [address, setAddress] = useState<string | null>(null)
-
-  useEffect(() => {
-    const savedAddress = localStorage.getItem('stellar_wallet_address')
-    if (savedAddress && savedAddress !== address) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect
-      setAddress(savedAddress)
-    }
-  }, [address])
-
-  const formatAddress = (addr: string) => {
-    if (!addr || addr.length <= 10) return addr;
-    return `${addr.substring(0, 5)}...${addr.substring(addr.length - 4)}`
-  }
 
   return (
     <nav className="fixed top-0 left-0 right-0 z-50 border-b border-border/40 backdrop-blur-xl bg-background/80">
@@ -55,26 +170,8 @@ export function Navbar() {
           </div>
 
           <div className="hidden md:flex items-center gap-4">
-            {address ? (
-              <Button variant="outline" asChild>
-                <Link href="/login">
-                  <Wallet className="w-4 h-4 mr-2" />
-                  {formatAddress(address)}
-                </Link>
-              </Button>
-            ) : (
-              <>
-                <Button variant="ghost" asChild>
-                  <Link href="/login">Login</Link>
-                </Button>
-                <Button asChild>
-                  <Link href="/signup">Get Started</Link>
-                </Button>
-                   <ThemeToggle />
-              </>
-            )}
-          
-         
+            <WalletConnect />
+            <ThemeToggle />
           </div>
 
           <button
@@ -101,28 +198,13 @@ export function Navbar() {
             <Link href="#testimonials" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
               Testimonials
             </Link>
-            <div className="pt-4 space-y-2">
-              {address ? (
-                <Button variant="outline" className="w-full" asChild>
-                  <Link href="/login">
-                    <Wallet className="w-4 h-4 mr-2" />
-                    {formatAddress(address)}
-                  </Link>
-                </Button>
-              ) : (
-                <>
-                  <Button variant="ghost" className="w-full" asChild>
-                    <Link href="/login">Login</Link>
-                  </Button>
-                  <Button className="w-full" asChild>
-                    <Link href="/signup">Get Started</Link>
-                  </Button>
-                </>
-              )}
+            <div className="pt-4 flex flex-col gap-2">
+              <WalletConnect />
+              <ThemeToggle />
             </div>
           </div>
         </div>
       )}
     </nav>
   )
-}
+}
\ No newline at end of file
diff --git a/components/wallet-connect.tsx b/components/wallet-connect.tsx
new file mode 100644
index 0000000..a5f4712
--- /dev/null
+++ b/components/wallet-connect.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Wallet, LogOut } from "lucide-react";
+
+type WalletState = {
+  connected: boolean;
+  publicKey: string | null;
+  error: string | null;
+};
+
+export function WalletConnect() {
+  const [wallet, setWallet] = useState<WalletState>({
+    connected: false,
+    publicKey: null,
+    error: null,
+  });
+  const [loading, setLoading] = useState(false);
+
+  // Check if Freighter is available and already connected
+  const checkConnection = useCallback(async () => {
+    try {
+      // Freighter API v6: window.freighterApi is the global object
+      if (typeof window === "undefined" || !(window as any).freighterApi) {
+        return;
+      }
+
+      const freighter = (window as any).freighterApi;
+      const publicKey = await freighter.getPublicKey();
+
+      if (publicKey) {
+        setWallet({ connected: true, publicKey, error: null });
+        localStorage.setItem("stellar_wallet_address", publicKey);
+      }
+    } catch {
+      // User hasn't connected yet — that's fine
+    }
+  }, []);
+
+  useEffect(() => {
+    checkConnection();
+  }, [checkConnection]);
+
+  const connect = async () => {
+    setLoading(true);
+    setWallet((prev) => ({ ...prev, error: null }));
+
+    try {
+      const freighter = (window as any).freighterApi;
+
+      if (!freighter) {
+        throw new Error(
+          "Freighter wallet is not installed. Please install the Freighter browser extension."
+        );
+      }
+
+      const publicKey: string = await freighter.getPublicKey();
+
+      if (!publicKey) {
+        throw new Error("Failed to retrieve wallet address. Please try again.");
+      }
+
+      localStorage.setItem("stellar_wallet_address", publicKey);
+      setWallet({ connected: true, publicKey, error: null });
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : "Failed to connect wallet";
+      setWallet((prev) => ({
+        ...prev,
+        error: message,
+      }));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const disconnect = () => {
+    localStorage.removeItem("stellar_wallet_address");
+    setWallet({ connected: false, publicKey: null, error: null });
+  };
+
+  const truncateKey = (key: string): string => {
+    if (key.length <= 10) return key;
+    return `${key.slice(0, 5)}...${key.slice(-4)}`;
+  };
+
+  // Error state
+  if (wallet.error) {
+    return (
+      <div className="flex flex-col gap-2">
+        <p className="text-xs text-destructive max-w-[200px]">{wallet.error}</p>
+        <div className="flex gap-2">
+          <Button variant="outline" size="sm" onClick={connect} disabled={loading}>
+            {loading ? "Connecting..." : "Retry"}
+          </Button>
+          <Button variant="ghost" size="sm" onClick={() => setWallet((prev) => ({ ...prev, error: null }))}>
+            Dismiss
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  // Connected state
+  if (wallet.connected && wallet.publicKey) {
+    return (
+      <div className="flex items-center gap-2">
+        <span className="text-sm text-muted-foreground font-mono">
+          {truncateKey(wallet.publicKey)}
+        </span>
+        <Button variant="ghost" size="icon" onClick={disconnect} title="Disconnect Wallet">
+          <LogOut className="h-4 w-4" />
+        </Button>
+      </div>
+    );
+  }
+
+  // Disconnected state
+  return (
+    <Button onClick={connect} disabled={loading} variant="outline">
+      <Wallet className="mr-2 h-4 w-4" />
+      {loading ? "Connecting..." : "Connect Wallet"}
+    </Button>
+  );
+}
\ No newline at end of file

From 2de75120ad42ff44d2bc2a398ae26aecde596a44 Mon Sep 17 00:00:00 2001
From: mitchellecm7 <obidikechukwuagozie1@gmail.com>
Date: Thu, 23 Apr 2026 11:26:45 -0700
Subject: [PATCH 2/4] feat: add wallet connect/disconnect component


From 6f571c27e352c1680cf7d3f7dde23be5f74b680c Mon Sep 17 00:00:00 2001
From: mitchellecm7 <obidikechukwuagozie1@gmail.com>
Date: Thu, 23 Apr 2026 21:32:01 -0700
Subject: [PATCH 3/4] chore: resolve merge conflicts

---
 app/page.tsx                  |   1 +
 components/navbar.tsx         | 246 +++++++++++++++++++++++-----------
 components/wallet-connect.tsx | 208 ++++++++++++++++++++++------
 3 files changed, 342 insertions(+), 113 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index f4d19f6..2be56ee 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -12,6 +12,7 @@ export default function Home() {
     <main className="min-h-screen">
       <Navbar />
       <Hero />
+      
       <Features />
       <HowItWorks />
       <Benefits />
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 6ca2600..6d85c74 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -1,28 +1,144 @@
+// // 'use client'
+
+// // import Link from 'next/link'
+// // import { Button } from '@/components/ui/button'
+// // import { Menu, X, Wallet } from 'lucide-react'
+// // import { useState, useEffect } from 'react'
+// // import Image from 'next/image'
+// // import { ThemeToggle } from './ui/ThemeToggle'
+
+// // export function Navbar() {
+// //   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+// //   const [address, setAddress] = useState<string | null>(null)
+
+// //   useEffect(() => {
+// //     const savedAddress = localStorage.getItem('stellar_wallet_address')
+// //     if (savedAddress && savedAddress !== address) {
+// //       // eslint-disable-next-line react-hooks/set-state-in-effect
+// //       setAddress(savedAddress)
+// //     }
+// //   }, [address])
+
+// //   const formatAddress = (addr: string) => {
+// //     if (!addr || addr.length <= 10) return addr;
+// //     return `${addr.substring(0, 5)}...${addr.substring(addr.length - 4)}`
+// //   }
+
+// //   return (
+// //     <nav className="fixed top-0 left-0 right-0 z-50 border-b border-border/40 backdrop-blur-xl bg-background/80">
+// //       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+// //         <div className="flex h-16 items-center justify-between">
+// //           <div className="flex items-center gap-2">
+// //             <Image
+// //               src='/assets/logo2.png'
+// //               alt="Logo"
+// //               width={20}
+// //               height={20}
+// //               className="h-10 w-10 object-cover"
+// //             />
+// //             <span className="text-xl font-bold text-foreground">TaskChain</span>
+// //           </div>
+
+// //           <div className="hidden md:flex items-center gap-8">
+// //             <Link href="#features" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+// //               Features
+// //             </Link>
+// //             <Link href="#how-it-works" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+// //               How It Works
+// //             </Link>
+// //             <Link href="#benefits" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+// //               Benefits
+// //             </Link>
+// //             <Link href="#testimonials" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+// //               Testimonials
+// //             </Link>
+// //           </div>
+
+// //           <div className="hidden md:flex items-center gap-4">
+// //             {address ? (
+// //               <Button variant="outline" asChild>
+// //                 <Link href="/login">
+// //                   <Wallet className="w-4 h-4 mr-2" />
+// //                   {formatAddress(address)}
+// //                 </Link>
+// //               </Button>
+// //             ) : (
+// //               <>
+// //                 <Button variant="ghost" asChild>
+// //                   <Link href="/login">Login</Link>
+// //                 </Button>
+// //                 <Button asChild>
+// //                   <Link href="/signup">Get Started</Link>
+// //                 </Button>
+// //                    <ThemeToggle />
+// //               </>
+// //             )}
+          
+         
+// //           </div>
+
+// //           <button
+// //             className="md:hidden p-2 text-muted-foreground hover:text-foreground"
+// //             onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+// //           >
+// //             {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+// //           </button>
+// //         </div>
+// //       </div>
+
+// //       {mobileMenuOpen && (
+// //         <div className="md:hidden border-t border-border/40 bg-background/95 backdrop-blur-xl">
+// //           <div className="px-4 py-6 space-y-4">
+// //             <Link href="#features" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
+// //               Features
+// //             </Link>
+// //             <Link href="#how-it-works" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
+// //               How It Works
+// //             </Link>
+// //             <Link href="#benefits" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
+// //               Benefits
+// //             </Link>
+// //             <Link href="#testimonials" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
+// //               Testimonials
+// //             </Link>
+// //             <div className="pt-4 space-y-2">
+// //               {address ? (
+// //                 <Button variant="outline" className="w-full" asChild>
+// //                   <Link href="/login">
+// //                     <Wallet className="w-4 h-4 mr-2" />
+// //                     {formatAddress(address)}
+// //                   </Link>
+// //                 </Button>
+// //               ) : (
+// //                 <>
+// //                   <Button variant="ghost" className="w-full" asChild>
+// //                     <Link href="/login">Login</Link>
+// //                   </Button>
+// //                   <Button className="w-full" asChild>
+// //                     <Link href="/signup">Get Started</Link>
+// //                   </Button>
+// //                 </>
+// //               )}
+// //             </div>
+// //           </div>
+// //         </div>
+// //       )}
+// //     </nav>
+// //   )
+// // }
+
 // 'use client'
 
 // import Link from 'next/link'
 // import { Button } from '@/components/ui/button'
-// import { Menu, X, Wallet } from 'lucide-react'
-// import { useState, useEffect } from 'react'
+// import { Menu, X } from 'lucide-react'
+// import { useState } from 'react'
 // import Image from 'next/image'
 // import { ThemeToggle } from './ui/ThemeToggle'
+// import { WalletConnect } from '@/components/wallet-connect'
 
 // export function Navbar() {
 //   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
-//   const [address, setAddress] = useState<string | null>(null)
-
-//   useEffect(() => {
-//     const savedAddress = localStorage.getItem('stellar_wallet_address')
-//     if (savedAddress && savedAddress !== address) {
-//       // eslint-disable-next-line react-hooks/set-state-in-effect
-//       setAddress(savedAddress)
-//     }
-//   }, [address])
-
-//   const formatAddress = (addr: string) => {
-//     if (!addr || addr.length <= 10) return addr;
-//     return `${addr.substring(0, 5)}...${addr.substring(addr.length - 4)}`
-//   }
 
 //   return (
 //     <nav className="fixed top-0 left-0 right-0 z-50 border-b border-border/40 backdrop-blur-xl bg-background/80">
@@ -55,26 +171,8 @@
 //           </div>
 
 //           <div className="hidden md:flex items-center gap-4">
-//             {address ? (
-//               <Button variant="outline" asChild>
-//                 <Link href="/login">
-//                   <Wallet className="w-4 h-4 mr-2" />
-//                   {formatAddress(address)}
-//                 </Link>
-//               </Button>
-//             ) : (
-//               <>
-//                 <Button variant="ghost" asChild>
-//                   <Link href="/login">Login</Link>
-//                 </Button>
-//                 <Button asChild>
-//                   <Link href="/signup">Get Started</Link>
-//                 </Button>
-//                    <ThemeToggle />
-//               </>
-//             )}
-          
-         
+//             <WalletConnect />
+//             <ThemeToggle />
 //           </div>
 
 //           <button
@@ -101,24 +199,9 @@
 //             <Link href="#testimonials" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
 //               Testimonials
 //             </Link>
-//             <div className="pt-4 space-y-2">
-//               {address ? (
-//                 <Button variant="outline" className="w-full" asChild>
-//                   <Link href="/login">
-//                     <Wallet className="w-4 h-4 mr-2" />
-//                     {formatAddress(address)}
-//                   </Link>
-//                 </Button>
-//               ) : (
-//                 <>
-//                   <Button variant="ghost" className="w-full" asChild>
-//                     <Link href="/login">Login</Link>
-//                   </Button>
-//                   <Button className="w-full" asChild>
-//                     <Link href="/signup">Get Started</Link>
-//                   </Button>
-//                 </>
-//               )}
+//             <div className="pt-4 flex flex-col gap-2">
+//               <WalletConnect />
+//               <ThemeToggle />
 //             </div>
 //           </div>
 //         </div>
@@ -126,78 +209,91 @@
 //     </nav>
 //   )
 // }
-'use client'
 
-import Link from 'next/link'
-import { Button } from '@/components/ui/button'
-import { Menu, X } from 'lucide-react'
-import { useState } from 'react'
-import Image from 'next/image'
-import { ThemeToggle } from './ui/ThemeToggle'
-import { WalletConnect } from '@/components/wallet-connect'
+"use client";
+
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Menu, X } from "lucide-react";
+import { useState } from "react";
+import Image from "next/image";
+import { ThemeToggle } from "./ui/ThemeToggle";
+import { WalletConnect } from "@/components/wallet-connect";
 
 export function Navbar() {
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   return (
     <nav className="fixed top-0 left-0 right-0 z-50 border-b border-border/40 backdrop-blur-xl bg-background/80">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <div className="flex h-16 items-center justify-between">
+          {/* Logo */}
           <div className="flex items-center gap-2">
             <Image
-              src='/assets/logo2.png'
+              src="/assets/logo2.png"
               alt="Logo"
               width={20}
               height={20}
               className="h-10 w-10 object-cover"
             />
-            <span className="text-xl font-bold text-foreground">TaskChain</span>
+            <span className="text-xl font-bold text-foreground">
+              TaskChain
+            </span>
           </div>
 
+          {/* Desktop Links */}
           <div className="hidden md:flex items-center gap-8">
-            <Link href="#features" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+            <Link href="#features" className="text-sm text-muted-foreground hover:text-foreground">
               Features
             </Link>
-            <Link href="#how-it-works" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+            <Link href="#how-it-works" className="text-sm text-muted-foreground hover:text-foreground">
               How It Works
             </Link>
-            <Link href="#benefits" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+            <Link href="#benefits" className="text-sm text-muted-foreground hover:text-foreground">
               Benefits
             </Link>
-            <Link href="#testimonials" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+            <Link href="#testimonials" className="text-sm text-muted-foreground hover:text-foreground">
               Testimonials
             </Link>
           </div>
 
+          {/* Desktop Actions */}
           <div className="hidden md:flex items-center gap-4">
             <WalletConnect />
             <ThemeToggle />
           </div>
 
+          {/* Mobile Menu Button */}
           <button
             className="md:hidden p-2 text-muted-foreground hover:text-foreground"
             onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
           >
-            {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+            {mobileMenuOpen ? (
+              <X className="h-6 w-6" />
+            ) : (
+              <Menu className="h-6 w-6" />
+            )}
           </button>
         </div>
       </div>
 
+      {/* Mobile Menu */}
       {mobileMenuOpen && (
         <div className="md:hidden border-t border-border/40 bg-background/95 backdrop-blur-xl">
           <div className="px-4 py-6 space-y-4">
-            <Link href="#features" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
+            <Link href="#features" onClick={() => setMobileMenuOpen(false)}>
               Features
             </Link>
-            <Link href="#how-it-works" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
+            <Link href="#how-it-works" onClick={() => setMobileMenuOpen(false)}>
               How It Works
             </Link>
-            <Link href="#benefits" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
+            <Link href="#benefits" onClick={() => setMobileMenuOpen(false)}>
               Benefits
             </Link>
-            <Link href="#testimonials" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
+            <Link href="#testimonials" onClick={() => setMobileMenuOpen(false)}>
               Testimonials
             </Link>
+
             <div className="pt-4 flex flex-col gap-2">
               <WalletConnect />
               <ThemeToggle />
@@ -206,5 +302,5 @@ export function Navbar() {
         </div>
       )}
     </nav>
-  )
+  );
 }
\ No newline at end of file
diff --git a/components/wallet-connect.tsx b/components/wallet-connect.tsx
index a5f4712..24d1734 100644
--- a/components/wallet-connect.tsx
+++ b/components/wallet-connect.tsx
@@ -1,8 +1,129 @@
+// "use client";
+
+// import { useState, useEffect, useCallback } from "react";
+// import { Button } from "@/components/ui/button";
+// import { Wallet, LogOut } from "lucide-react";
+// import {
+//   isConnected,
+//   requestAccess,
+//   getUserInfo,
+// } from "@stellar/freighter-api";
+// type WalletState = {
+//   connected: boolean;
+//   publicKey: string | null;
+//   error: string | null;
+// };
+
+// export function WalletConnect() {
+//   const [wallet, setWallet] = useState<WalletState>({
+//     connected: false,
+//     publicKey: null,
+//     error: null,
+//   });
+//   const [loading, setLoading] = useState(false);
+
+//   // Check if Freighter is available and already connected
+//   const checkConnection = useCallback(async () => {
+//   try {
+//     const connected = await isConnected();
+//     if (connected) {
+//       const user = await getUserInfo();
+//       setWallet({
+//         connected: true,
+//         publicKey: user.publicKey,
+//         error: null,
+//       });
+//     }
+//   } catch {}
+// }, []);
+
+//   useEffect(() => {
+//     checkConnection();
+//   }, [checkConnection]);
+
+//   const connect = async () => {
+//   setLoading(true);
+//   setWallet((prev) => ({ ...prev, error: null }));
+
+//   try {
+//     await requestAccess();
+//     const user = await getUserInfo();
+
+//     setWallet({
+//       connected: true,
+//       publicKey: user.publicKey,
+//       error: null,
+//     });
+//   } catch (err) {
+//     const message =
+//       err instanceof Error ? err.message : "Failed to connect wallet";
+//     setWallet((prev) => ({ ...prev, error: message }));
+//   } finally {
+//     setLoading(false);
+//   }
+// };
+
+
+//   const disconnect = () => {
+//     localStorage.removeItem("stellar_wallet_address");
+//     setWallet({ connected: false, publicKey: null, error: null });
+//   };
+
+//   const truncateKey = (key: string): string => {
+//     if (key.length <= 10) return key;
+//     return `${key.slice(0, 5)}...${key.slice(-4)}`;
+//   };
+
+//   // Error state
+//   if (wallet.error) {
+//     return (
+//       <div className="flex flex-col gap-2">
+//         <p className="text-xs text-destructive max-w-[200px]">{wallet.error}</p>
+//         <div className="flex gap-2">
+//           <Button variant="outline" size="sm" onClick={connect} disabled={loading}>
+//             {loading ? "Connecting..." : "Retry"}
+//           </Button>
+//           <Button variant="ghost" size="sm" onClick={() => setWallet((prev) => ({ ...prev, error: null }))}>
+//             Dismiss
+//           </Button>
+//         </div>
+//       </div>
+//     );
+//   }
+
+//   // Connected state
+//   if (wallet.connected && wallet.publicKey) {
+//     return (
+//       <div className="flex items-center gap-2">
+//         <span className="text-sm text-muted-foreground font-mono">
+//           {truncateKey(wallet.publicKey)}
+//         </span>
+//         <Button variant="ghost" size="icon" onClick={disconnect} title="Disconnect Wallet">
+//           <LogOut className="h-4 w-4" />
+//         </Button>
+//       </div>
+//     );
+//   }
+
+//   // Disconnected state
+//   return (
+//     <Button onClick={connect} disabled={loading} variant="outline">
+//       <Wallet className="mr-2 h-4 w-4" />
+//       {loading ? "Connecting..." : "Connect Wallet"}
+//     </Button>
+//   );
+// }
+
 "use client";
 
 import { useState, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { Wallet, LogOut } from "lucide-react";
+import {
+  isConnected,
+  requestAccess,
+  getUserInfo,
+} from "@stellar/freighter-api";
 
 type WalletState = {
   connected: boolean;
@@ -18,23 +139,21 @@ export function WalletConnect() {
   });
   const [loading, setLoading] = useState(false);
 
-  // Check if Freighter is available and already connected
+  // Check connection on load
   const checkConnection = useCallback(async () => {
     try {
-      // Freighter API v6: window.freighterApi is the global object
-      if (typeof window === "undefined" || !(window as any).freighterApi) {
-        return;
-      }
-
-      const freighter = (window as any).freighterApi;
-      const publicKey = await freighter.getPublicKey();
+      const connected = await isConnected();
 
-      if (publicKey) {
-        setWallet({ connected: true, publicKey, error: null });
-        localStorage.setItem("stellar_wallet_address", publicKey);
+      if (connected) {
+        const user = await getUserInfo();
+        setWallet({
+          connected: true,
+          publicKey: user.publicKey,
+          error: null,
+        });
       }
     } catch {
-      // User hasn't connected yet — that's fine
+      // silent fail (user not connected yet)
     }
   }, []);
 
@@ -47,25 +166,18 @@ export function WalletConnect() {
     setWallet((prev) => ({ ...prev, error: null }));
 
     try {
-      const freighter = (window as any).freighterApi;
+      await requestAccess();
+      const user = await getUserInfo();
 
-      if (!freighter) {
-        throw new Error(
-          "Freighter wallet is not installed. Please install the Freighter browser extension."
-        );
-      }
-
-      const publicKey: string = await freighter.getPublicKey();
-
-      if (!publicKey) {
-        throw new Error("Failed to retrieve wallet address. Please try again.");
-      }
-
-      localStorage.setItem("stellar_wallet_address", publicKey);
-      setWallet({ connected: true, publicKey, error: null });
+      setWallet({
+        connected: true,
+        publicKey: user.publicKey,
+        error: null,
+      });
     } catch (err) {
       const message =
         err instanceof Error ? err.message : "Failed to connect wallet";
+
       setWallet((prev) => ({
         ...prev,
         error: message,
@@ -76,25 +188,40 @@ export function WalletConnect() {
   };
 
   const disconnect = () => {
-    localStorage.removeItem("stellar_wallet_address");
-    setWallet({ connected: false, publicKey: null, error: null });
+    setWallet({
+      connected: false,
+      publicKey: null,
+      error: null,
+    });
   };
 
-  const truncateKey = (key: string): string => {
-    if (key.length <= 10) return key;
+  const truncateKey = (key: string) => {
     return `${key.slice(0, 5)}...${key.slice(-4)}`;
   };
 
-  // Error state
+  // 🔴 Error State
   if (wallet.error) {
     return (
       <div className="flex flex-col gap-2">
-        <p className="text-xs text-destructive max-w-[200px]">{wallet.error}</p>
+        <p className="text-xs text-destructive max-w-[200px]">
+          {wallet.error}
+        </p>
         <div className="flex gap-2">
-          <Button variant="outline" size="sm" onClick={connect} disabled={loading}>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={connect}
+            disabled={loading}
+          >
             {loading ? "Connecting..." : "Retry"}
           </Button>
-          <Button variant="ghost" size="sm" onClick={() => setWallet((prev) => ({ ...prev, error: null }))}>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() =>
+              setWallet((prev) => ({ ...prev, error: null }))
+            }
+          >
             Dismiss
           </Button>
         </div>
@@ -102,21 +229,26 @@ export function WalletConnect() {
     );
   }
 
-  // Connected state
+  // 🟢 Connected State
   if (wallet.connected && wallet.publicKey) {
     return (
       <div className="flex items-center gap-2">
         <span className="text-sm text-muted-foreground font-mono">
           {truncateKey(wallet.publicKey)}
         </span>
-        <Button variant="ghost" size="icon" onClick={disconnect} title="Disconnect Wallet">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={disconnect}
+          title="Disconnect Wallet"
+        >
           <LogOut className="h-4 w-4" />
         </Button>
       </div>
     );
   }
 
-  // Disconnected state
+  // ⚪ Default (Disconnected)
   return (
     <Button onClick={connect} disabled={loading} variant="outline">
       <Wallet className="mr-2 h-4 w-4" />

From 96b086ee3b3d5f182cc7cc88e66e846d489996b0 Mon Sep 17 00:00:00 2001
From: mitchellecm7 <obidikechukwuagozie1@gmail.com>
Date: Thu, 23 Apr 2026 21:41:51 -0700
Subject: [PATCH 4/4] fix: align wallet implementation with freighter-api
 getAddress method

---
 components/wallet-connect.tsx | 172 +++++++++++++++++++++++++++++++---
 1 file changed, 158 insertions(+), 14 deletions(-)

diff --git a/components/wallet-connect.tsx b/components/wallet-connect.tsx
index 24d1734..6f71407 100644
--- a/components/wallet-connect.tsx
+++ b/components/wallet-connect.tsx
@@ -114,7 +114,148 @@
 //   );
 // }
 
-"use client";
+// "use client";
+
+// import { useState, useEffect, useCallback } from "react";
+// import { Button } from "@/components/ui/button";
+// import { Wallet, LogOut } from "lucide-react";
+// import {
+//   isConnected,
+//   requestAccess,
+//   getUserInfo,
+// } from "@stellar/freighter-api";
+
+// type WalletState = {
+//   connected: boolean;
+//   publicKey: string | null;
+//   error: string | null;
+// };
+
+// export function WalletConnect() {
+//   const [wallet, setWallet] = useState<WalletState>({
+//     connected: false,
+//     publicKey: null,
+//     error: null,
+//   });
+//   const [loading, setLoading] = useState(false);
+
+//   // Check connection on load
+//   const checkConnection = useCallback(async () => {
+//     try {
+//       const connected = await isConnected();
+
+//       if (connected) {
+//         const user = await getUserInfo();
+//         setWallet({
+//           connected: true,
+//           publicKey: user.publicKey,
+//           error: null,
+//         });
+//       }
+//     } catch {
+//       // silent fail (user not connected yet)
+//     }
+//   }, []);
+
+//   useEffect(() => {
+//     checkConnection();
+//   }, [checkConnection]);
+
+//   const connect = async () => {
+//     setLoading(true);
+//     setWallet((prev) => ({ ...prev, error: null }));
+
+//     try {
+//       await requestAccess();
+//       const user = await getUserInfo();
+
+//       setWallet({
+//         connected: true,
+//         publicKey: user.publicKey,
+//         error: null,
+//       });
+//     } catch (err) {
+//       const message =
+//         err instanceof Error ? err.message : "Failed to connect wallet";
+
+//       setWallet((prev) => ({
+//         ...prev,
+//         error: message,
+//       }));
+//     } finally {
+//       setLoading(false);
+//     }
+//   };
+
+//   const disconnect = () => {
+//     setWallet({
+//       connected: false,
+//       publicKey: null,
+//       error: null,
+//     });
+//   };
+
+//   const truncateKey = (key: string) => {
+//     return `${key.slice(0, 5)}...${key.slice(-4)}`;
+//   };
+
+//   // 🔴 Error State
+//   if (wallet.error) {
+//     return (
+//       <div className="flex flex-col gap-2">
+//         <p className="text-xs text-destructive max-w-[200px]">
+//           {wallet.error}
+//         </p>
+//         <div className="flex gap-2">
+//           <Button
+//             variant="outline"
+//             size="sm"
+//             onClick={connect}
+//             disabled={loading}
+//           >
+//             {loading ? "Connecting..." : "Retry"}
+//           </Button>
+//           <Button
+//             variant="ghost"
+//             size="sm"
+//             onClick={() =>
+//               setWallet((prev) => ({ ...prev, error: null }))
+//             }
+//           >
+//             Dismiss
+//           </Button>
+//         </div>
+//       </div>
+//     );
+//   }
+
+//   // 🟢 Connected State
+//   if (wallet.connected && wallet.publicKey) {
+//     return (
+//       <div className="flex items-center gap-2">
+//         <span className="text-sm text-muted-foreground font-mono">
+//           {truncateKey(wallet.publicKey)}
+//         </span>
+//         <Button
+//           variant="ghost"
+//           size="icon"
+//           onClick={disconnect}
+//           title="Disconnect Wallet"
+//         >
+//           <LogOut className="h-4 w-4" />
+//         </Button>
+//       </div>
+//     );
+//   }
+
+//   // ⚪ Default (Disconnected)
+//   return (
+//     <Button onClick={connect} disabled={loading} variant="outline">
+//       <Wallet className="mr-2 h-4 w-4" />
+//       {loading ? "Connecting..." : "Connect Wallet"}
+//     </Button>
+//   );
+// }"use client";
 
 import { useState, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
@@ -122,7 +263,7 @@ import { Wallet, LogOut } from "lucide-react";
 import {
   isConnected,
   requestAccess,
-  getUserInfo,
+  getAddress,
 } from "@stellar/freighter-api";
 
 type WalletState = {
@@ -139,21 +280,23 @@ export function WalletConnect() {
   });
   const [loading, setLoading] = useState(false);
 
-  // Check connection on load
   const checkConnection = useCallback(async () => {
     try {
       const connected = await isConnected();
 
       if (connected) {
-        const user = await getUserInfo();
+        const { address, error } = await getAddress();
+
+        if (error || !address) return;
+
         setWallet({
           connected: true,
-          publicKey: user.publicKey,
+          publicKey: address,
           error: null,
         });
       }
     } catch {
-      // silent fail (user not connected yet)
+      // ignore
     }
   }, []);
 
@@ -167,11 +310,16 @@ export function WalletConnect() {
 
     try {
       await requestAccess();
-      const user = await getUserInfo();
+
+      const { address, error } = await getAddress();
+
+      if (error || !address) {
+        throw new Error(error || "Failed to retrieve wallet address");
+      }
 
       setWallet({
         connected: true,
-        publicKey: user.publicKey,
+        publicKey: address,
         error: null,
       });
     } catch (err) {
@@ -195,11 +343,9 @@ export function WalletConnect() {
     });
   };
 
-  const truncateKey = (key: string) => {
-    return `${key.slice(0, 5)}...${key.slice(-4)}`;
-  };
+  const truncateKey = (key: string) =>
+    `${key.slice(0, 5)}...${key.slice(-4)}`;
 
-  // 🔴 Error State
   if (wallet.error) {
     return (
       <div className="flex flex-col gap-2">
@@ -229,7 +375,6 @@ export function WalletConnect() {
     );
   }
 
-  // 🟢 Connected State
   if (wallet.connected && wallet.publicKey) {
     return (
       <div className="flex items-center gap-2">
@@ -248,7 +393,6 @@ export function WalletConnect() {
     );
   }
 
-  // ⚪ Default (Disconnected)
   return (
     <Button onClick={connect} disabled={loading} variant="outline">
       <Wallet className="mr-2 h-4 w-4" />