Fix 2

app/page.tsx

@@ -1,11 +1,11 @@
-import { Hero } from '@/components/hero'
-import { Features } from '@/components/features'
-import { HowItWorks } from '@/components/how-it-works'
-import { Benefits } from '@/components/benefits'
-import { Testimonials } from '@/components/testimonials'
-import { CTA } from '@/components/cta'
-import { Footer } from '@/components/footer'
-import { Navbar } from '@/components/navbar'
+import { Hero } from "@/components/hero";
+import { Features } from "@/components/features";
+import { HowItWorks } from "@/components/how-it-works";
+import { Benefits } from "@/components/benefits";
+import { Testimonials } from "@/components/testimonials";
+import { CTA } from "@/components/cta";
+import { Footer } from "@/components/footer";
+import { Navbar } from "@/components/navbar";
 
 export default function Home() {
   return (
@@ -19,5 +19,5 @@ export default function Home() {
       <CTA />
       <Footer />
     </main>
-  )
+  );
 }

components/WalletStatus.tsx

@@ -0,0 +1,80 @@
+"use client";
+import React from "react";
+
+interface WalletStatusProps {
+  isConnected: boolean;
+  walletAddress?: string;
+  network?: string;
+  onConnect?: () => void;
+  onDisconnect?: () => void;
+}
+
+const truncateAddress = (address: string) => {
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+};
+
+export const WalletStatus = ({
+  isConnected,
+  walletAddress,
+  network,
+  onConnect,
+  onDisconnect,
+}: WalletStatusProps) => {
+  return (
+    <div className="w-80 p-6 rounded-xl shadow-md bg-white border border-gray-200">
+      {/* Status Row */}
+      <div className="flex items-center gap-2 mb-4">
+        <span
+          className={`w-2.5 h-2.5 rounded-full ${
+            isConnected ? "bg-green-500" : "bg-gray-400"
+          }`}
+        ></span>
+
+        <span
+          className={`text-sm font-medium ${
+            isConnected ? "text-green-600" : "text-gray-500"
+          }`}
+        >
+          {isConnected ? "Connected" : "Disconnected"}
+        </span>
+      </div>
+
+      {/* Connected State */}
+      {isConnected && walletAddress && (
+        <>
+          <p className="text-gray-900 font-semibold text-sm mb-2">
+            {truncateAddress(walletAddress)}
+          </p>
+
+          {network && (
+            <span
+              className={`inline-block px-3 py-1 text-xs rounded-full ${
+                network === "Mainnet"
+                  ? "bg-blue-100 text-blue-700"
+                  : "bg-purple-100 text-purple-700"
+              }`}
+            >
+              {network}
+            </span>
+          )}
+        </>
+      )}
+
+      {/* Disconnected State */}
+      {!isConnected && (
+        <button
+          onClick={onConnect}
+          className="mt-2 w-full px-4 py-2 rounded-lg bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 transition-colors"
+        >
+          Connect Wallet
+        </button>
+      )}
+
+      {isConnected && (
+        <button onClick={onDisconnect} className="mt-3 text-sm text-red-500">
+          Disconnect
+        </button>
+      )}
+    </div>
+  );
+};

components/navbar.tsx

@@ -1,12 +1,36 @@
-'use client'
+"use client";
 
-import Link from 'next/link'
-import { Button } from '@/components/ui/button'
-import { Menu, X } from 'lucide-react'
-import { useState } from 'react'
+import Link from "next/link";
+import { useState, useRef, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Menu, X } from "lucide-react";
+import { WalletStatus } from "@/components/WalletStatus";
+import { useWallet } from "@/hooks/useWallet";
 
 export function Navbar() {
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  const { walletAddress, isConnected, connectWallet, disconnectWallet } = useWallet();
+
+  const [open, setOpen] = useState(false);
+  const popupRef = useRef<HTMLDivElement>(null);
+
+  // Close when clicking outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        popupRef.current &&
+        !popupRef.current.contains(event.target as Node)
+      ) {
+        setOpen(false);
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
 
   return (
     <nav className="fixed top-0 left-0 right-0 z-50 border-b border-border/40 backdrop-blur-xl bg-background/80">
@@ -18,16 +42,28 @@ export function Navbar() {
           </div>
 
           <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 transition-colors"
+            >
               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 transition-colors"
+            >
               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 transition-colors"
+            >
               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 transition-colors"
+            >
               Testimonials
             </Link>
           </div>
@@ -39,30 +75,68 @@ export function Navbar() {
             <Button asChild>
               <Link href="/signup">Get Started</Link>
             </Button>
+            <div className="hidden md:flex items-center gap-4">
+              <div className="relative">
+                <button
+                  onClick={() => setOpen(!open)}
+                  className="px-4 py-2 bg-indigo-600 text-white rounded-lg"
+                >
+                  Wallet
+                </button>
+
+                {open && (
+                  <div ref={popupRef} className="absolute right-0 mt-2 z-50">
+                    <WalletStatus
+                      isConnected={isConnected}
+                      walletAddress={walletAddress ?? undefined}
+                      network="Testnet"
+                      onConnect={connectWallet}
+                      onDisconnect={disconnectWallet}
+                    />
+                  </div>
+                )}
+              </div>
+            </div>
           </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" />}
+            {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">
+            <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">
+            <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">
+            <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">
+            <Link
+              href="#testimonials"
+              className="block text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
               Testimonials
             </Link>
             <div className="pt-4 space-y-2">
@@ -77,5 +151,5 @@ export function Navbar() {
         </div>
       )}
     </nav>
-  )
+  );
 }

hooks/useWallet.ts

@@ -0,0 +1,48 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { isConnected, requestAccess, getAddress } from "@stellar/freighter-api";
+
+export function useWallet() {
+  const [walletAddress, setWalletAddress] = useState<string | null>(null);
+
+  useEffect(() => {
+    const saved = localStorage.getItem("walletAddress");
+    if (saved) {
+      setWalletAddress(saved);
+    }
+  }, []);
+
+  const connectWallet = async () => {
+    try {
+      await requestAccess();
+
+      const result = await getAddress();
+
+      if (result.error) {
+        throw new Error(result.error);
+      }
+
+      if (!result.address) {
+        throw new Error("No address returned");
+      }
+
+      setWalletAddress(result.address);
+      localStorage.setItem("walletAddress", result.address);
+    } catch (error) {
+      console.error("Wallet connection failed:", error);
+    }
+  };
+
+  const disconnectWallet = () => {
+    setWalletAddress(null);
+    localStorage.removeItem("walletAddress");
+  };
+
+  return {
+    walletAddress,
+    isConnected: !!walletAddress,
+    connectWallet,
+    disconnectWallet,
+  };
+}