From 70bcdaa6859406eb610daef3c4b97d38ef09ff97 Mon Sep 17 00:00:00 2001
From: martinvibes <martinmachiebe21@gmail>
Date: Wed, 24 Sep 2025 13:01:32 +0100
Subject: [PATCH] feat: integrate WalletDisplay component into admin and reader
 sidebars, enhance header with wallet address display

---
 .../admin/components/admin-sidenavbar.tsx     |   6 +
 .../readers/components/header-reader.tsx      |  24 ++-
 .../readers/components/reader-side-navbar.tsx |  12 +-
 .../blockchain/Wallet-disconnect-modal.tsx    |   6 +-
 src/components/blockchain/WalletDisplay.tsx   | 137 ++++++++++++++++++
 .../blockchain/client-providers.tsx           |  17 +--
 src/components/blockchain/connect-button.tsx  |  76 +++++++++-
 src/components/dashboard/header.tsx           |  14 +-
 src/components/dashboard/sidebar.tsx          |   8 +-
 src/components/landingpage/NavBar.tsx         |  29 ++--
 10 files changed, 281 insertions(+), 48 deletions(-)
 create mode 100644 src/components/blockchain/WalletDisplay.tsx

diff --git a/src/app/dashboard/admin/components/admin-sidenavbar.tsx b/src/app/dashboard/admin/components/admin-sidenavbar.tsx
index 4e0fe41..dc9d0e1 100644
--- a/src/app/dashboard/admin/components/admin-sidenavbar.tsx
+++ b/src/app/dashboard/admin/components/admin-sidenavbar.tsx
@@ -13,6 +13,7 @@ import {
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { WalletDisplay } from "@/components/blockchain/WalletDisplay";
 
 export function Sidebar() {
   const pathname = usePathname();
@@ -70,6 +71,11 @@ export function Sidebar() {
         <span className="font-semibold text-[#000b21]">ChainLib</span>
       </div>
 
+      {/* Wallet Display */}
+      <div className="p-4 border-b border-[#e7e7e7]">
+        <WalletDisplay variant="compact" showDropdown={false} />
+      </div>
+
       <nav className="p-4">
         <ul className="space-y-2">
           {navItems.map((item) => (
diff --git a/src/app/dashboard/readers/components/header-reader.tsx b/src/app/dashboard/readers/components/header-reader.tsx
index 9910ee6..e53359d 100644
--- a/src/app/dashboard/readers/components/header-reader.tsx
+++ b/src/app/dashboard/readers/components/header-reader.tsx
@@ -1,12 +1,16 @@
+"use client";
+
 import { Bell } from "lucide-react";
 import Image from "next/image";
+import { useWalletContext } from "@/components/blockchain/WalletProvider";
 import user from "../../../../../public/user1.svg";
 import check from "../../../../../public/check.svg";
 import Logo from "../../../../../public/logo.svg";
 
 export function HeaderReader() {
-  return (
+  const { account } = useWalletContext();
 
+  return (
     <header className="bg-white px-4 py-2 z-50 fixed w-full border-b top-0 border-[#e7e7e7] flex justify-between items-center">
       {/* Left Side - Logo */}
       <div className="flex items-center">
@@ -37,14 +41,22 @@ export function HeaderReader() {
         <div className="text-sm">
           <div className="flex items-center gap-1">
             <span className="font-medium">Joseph Yanum</span>
-            <Image src={check} alt="Verified" className="object-cover" width={32} />
+            <Image
+              src={check}
+              alt="Verified"
+              className="object-cover"
+              width={32}
+            />
           </div>
-          <span className="text-[#888888] text-xs">@joeyyanum</span>
+          {account ? (
+            <span className="text-[#888888] text-xs">
+              {account.slice(0, 6)}…{account.slice(-4)}
+            </span>
+          ) : (
+            <span className="text-[#888888] text-xs">@joeyyanum</span>
+          )}
         </div>
       </div>
     </header>
   );
 }
-
-
-
diff --git a/src/app/dashboard/readers/components/reader-side-navbar.tsx b/src/app/dashboard/readers/components/reader-side-navbar.tsx
index aae223c..3a52da4 100644
--- a/src/app/dashboard/readers/components/reader-side-navbar.tsx
+++ b/src/app/dashboard/readers/components/reader-side-navbar.tsx
@@ -8,10 +8,11 @@ import {
   DoorClosed,
   User,
   ClipboardList,
-  Heart
+  Heart,
 } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { WalletDisplay } from "@/components/blockchain/WalletDisplay";
 
 export function Sidebar() {
   const pathname = usePathname();
@@ -25,7 +26,7 @@ export function Sidebar() {
     {
       icon: BookOpen,
       label: "My Library",
-      href: "/dashboard/readers/library", 
+      href: "/dashboard/readers/library",
     },
     {
       icon: DoorClosed,
@@ -58,7 +59,6 @@ export function Sidebar() {
       label: "Profile",
       href: "/dashboard/readers/profile",
     },
- 
   ];
 
   return (
@@ -70,6 +70,11 @@ export function Sidebar() {
         <span className="font-semibold text-[#000b21]">ChainLib</span>
       </div>
 
+      {/* Wallet Display */}
+      <div className="p-4 border-b border-[#e7e7e7]">
+        <WalletDisplay variant="compact" showDropdown={false} />
+      </div>
+
       <nav className="p-4">
         <ul className="space-y-2">
           {navItems.map((item) => (
@@ -100,7 +105,6 @@ export function Sidebar() {
               </Link>
             </li>
           ))}
-    
         </ul>
       </nav>
     </div>
diff --git a/src/components/blockchain/Wallet-disconnect-modal.tsx b/src/components/blockchain/Wallet-disconnect-modal.tsx
index 15d9a67..ccd4c1d 100644
--- a/src/components/blockchain/Wallet-disconnect-modal.tsx
+++ b/src/components/blockchain/Wallet-disconnect-modal.tsx
@@ -5,6 +5,7 @@ import { motion, AnimatePresence } from "framer-motion";
 import { useRouter } from "next/navigation";
 import { usePathname } from "next/navigation";
 import { X } from "lucide-react";
+import { useDisconnect } from "@starknet-react/core";
 
 interface WalletDisconnectModalProps {
   isOpen: boolean;
@@ -23,8 +24,11 @@ export default function WalletDisconnectModal({
 
   //router
   const router = useRouter();
-
+  const { disconnect } = useDisconnect();
   const handleDisconnect = () => {
+    // Actually disconnect from the wallet
+    disconnect();
+
     if (signInPath === pathName) {
       router.push("/"); // ■ now safe to navigate
     }
diff --git a/src/components/blockchain/WalletDisplay.tsx b/src/components/blockchain/WalletDisplay.tsx
new file mode 100644
index 0000000..79116dd
--- /dev/null
+++ b/src/components/blockchain/WalletDisplay.tsx
@@ -0,0 +1,137 @@
+"use client";
+
+import React, { useState, useRef, useEffect } from "react";
+import { useAccount, useDisconnect } from "@starknet-react/core";
+import { MoreVertical } from "lucide-react";
+import Image from "next/image";
+import WalletDisconnectModal from "./Wallet-disconnect-modal";
+
+interface WalletDisplayProps {
+  variant?: "default" | "compact" | "minimal";
+  showDropdown?: boolean;
+  className?: string;
+  onDisconnect?: () => void;
+}
+
+export function WalletDisplay({
+  variant = "default",
+  showDropdown = true,
+  className = "",
+  onDisconnect,
+}: WalletDisplayProps) {
+  const { isConnected, address } = useAccount();
+  const { disconnect } = useDisconnect();
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isDisconnectModalOpen, setIsDisconnectModalOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsDropdownOpen(false);
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  if (!isConnected || !address) {
+    return null;
+  }
+
+  const handleDisconnect = () => {
+    disconnect();
+    setIsDisconnectModalOpen(false);
+    onDisconnect?.();
+  };
+
+  const formatAddress = (addr: string) => {
+    return `${addr.slice(0, 6)}…${addr.slice(-4)}`;
+  };
+
+  if (variant === "minimal") {
+    return (
+      <span className={`text-sm text-gray-600 ${className}`}>
+        {formatAddress(address)}
+      </span>
+    );
+  }
+
+  if (variant === "compact") {
+    return (
+      <div className={`flex items-center gap-2 ${className}`}>
+        <div className="h-6 w-6 rounded-full border border-teal-500 overflow-hidden">
+          <Image
+            src="/Avater.svg"
+            alt="Wallet Avatar"
+            width={24}
+            height={24}
+            className="object-cover"
+          />
+        </div>
+        <span className="text-sm font-medium text-gray-700">
+          {formatAddress(address)}
+        </span>
+      </div>
+    );
+  }
+
+  // Default variant
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <div
+        onClick={() => showDropdown && setIsDropdownOpen(!isDropdownOpen)}
+        className={`flex items-center gap-2 px-3 py-1.5 rounded-full bg-[#0d0e24] border border-gray-800 cursor-pointer hover:border-gray-600 transition-colors ${className}`}
+      >
+        <div className="h-8 w-8 rounded-full border-2 border-teal-500 overflow-hidden">
+          <Image
+            src="/Avater.svg"
+            alt="Wallet Avatar"
+            width={32}
+            height={32}
+            className="object-cover"
+          />
+        </div>
+        <span className="text-white font-medium">{formatAddress(address)}</span>
+        {showDropdown && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsDropdownOpen(!isDropdownOpen);
+            }}
+            className="h-8 w-8 p-0 text-gray-400 hover:text-white transition-colors"
+          >
+            <MoreVertical size={16} />
+          </button>
+        )}
+      </div>
+
+      {/* Dropdown Menu */}
+      {showDropdown && isDropdownOpen && (
+        <div className="absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-blue-600 border border-blue-800 overflow-hidden z-50">
+          <div className="py-1">
+            <button
+              onClick={() => setIsDisconnectModalOpen(true)}
+              className="w-full text-left px-4 py-2 text-sm text-gray-200 hover:bg-blue-700 transition-colors"
+            >
+              Disconnect
+            </button>
+          </div>
+        </div>
+      )}
+
+      <WalletDisconnectModal
+        isOpen={isDisconnectModalOpen}
+        onClose={() => setIsDisconnectModalOpen(false)}
+        onDisconnect={handleDisconnect}
+      />
+    </div>
+  );
+}
diff --git a/src/components/blockchain/client-providers.tsx b/src/components/blockchain/client-providers.tsx
index 0e87ed0..30f4827 100644
--- a/src/components/blockchain/client-providers.tsx
+++ b/src/components/blockchain/client-providers.tsx
@@ -1,17 +1,16 @@
 "use client";
 
 import StarknetProvider from "../blockchain/StarknetProviders";
-import { WalletProvider } from "../blockchain/wallet-connect-context";
+import { WalletProvider } from "../blockchain/WalletProvider";
 
-
-export default function ClientProviders({ children }: { children: React.ReactNode }) {
+export default function ClientProviders({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   return (
     <StarknetProvider>
-      <WalletProvider>
-
-          {children}
-
-      </WalletProvider>
+      <WalletProvider>{children}</WalletProvider>
     </StarknetProvider>
   );
-} 
+}
diff --git a/src/components/blockchain/connect-button.tsx b/src/components/blockchain/connect-button.tsx
index a577c19..2362a4c 100644
--- a/src/components/blockchain/connect-button.tsx
+++ b/src/components/blockchain/connect-button.tsx
@@ -8,6 +8,8 @@ import {
 import { AccountTypeModal } from "./account-type-modal";
 import { StarknetkitConnector, useStarknetkitConnectModal } from "starknetkit";
 import { WebWalletConnector } from "starknetkit/webwallet";
+import { MoreVertical } from "lucide-react";
+import Image from "next/image";
 
 type ConnectButtonVariant = "default" | "navbar";
 
@@ -16,15 +18,16 @@ interface ConnectButtonProps {
   isOpen: boolean;
   isClosed?: boolean;
   setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
-onSelect: (walletId: string) => void;
+  onSelect: (walletId: string) => void;
+  showAddress?: boolean;
+  className?: string;
 }
 
-
-
 export function ConnectButton({
   isOpen,
   setIsModalOpen,
-
+  showAddress = false,
+  className = "",
 }: ConnectButtonProps) {
   const { connect, connectors } = useConnect();
   const { isConnected, address } = useAccount();
@@ -33,7 +36,7 @@ export function ConnectButton({
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [isFirstTimeUser, setIsFirstTimeUser] = useState(false);
   const [selectedAccountType, setSelectedAccountType] = useState<
-    "readers" | "writers"  | null
+    "readers" | "writers" | null
   >(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
@@ -69,7 +72,6 @@ export function ConnectButton({
     }
   }, [isOpen]);
 
-
   const handleAccountCreation = () => {
     if (selectedAccountType) {
       console.log(`Creating ${selectedAccountType} account`);
@@ -93,6 +95,66 @@ export function ConnectButton({
     };
   }, []);
 
+  // If showAddress is true and wallet is connected, show the wallet address
+  if (showAddress && isConnected && address) {
+    return (
+      <div className="relative" ref={dropdownRef}>
+        <div
+          onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+          className={`flex items-center gap-2 px-3 py-1.5 rounded-full bg-[#0d0e24] border border-gray-800 cursor-pointer hover:border-gray-600 transition-colors ${className}`}
+        >
+          <div className="h-8 w-8 rounded-full border-2 border-teal-500 overflow-hidden">
+            <Image
+              src="/Avater.svg"
+              alt="Wallet Avatar"
+              width={32}
+              height={32}
+              className="object-cover"
+            />
+          </div>
+          <span className="text-white font-medium">
+            {address.slice(0, 6)}…{address.slice(-4)}
+          </span>
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsDropdownOpen(!isDropdownOpen);
+            }}
+            className="h-8 w-8 p-0 text-gray-400 hover:text-white transition-colors"
+          >
+            <MoreVertical size={16} />
+          </button>
+        </div>
+
+        {/* Dropdown Menu */}
+        {isDropdownOpen && (
+          <div className="absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-blue-600 border border-blue-800 overflow-hidden z-50">
+            <div className="py-1">
+              <button
+                onClick={() => {
+                  disconnect();
+                  setIsDropdownOpen(false);
+                }}
+                className="w-full text-left px-4 py-2 text-sm text-gray-200 hover:bg-blue-700 transition-colors"
+              >
+                Disconnect
+              </button>
+            </div>
+          </div>
+        )}
+
+        <AccountTypeModal
+          isOpen={isFirstTimeUser}
+          onClose={() => setIsFirstTimeUser(false)}
+          selectedType={selectedAccountType}
+          onSelectType={setSelectedAccountType}
+          onSubmit={handleAccountCreation}
+        />
+      </div>
+    );
+  }
+
+  // Default behavior for connection modal
   return (
     <div className="relative" ref={dropdownRef}>
       <AccountTypeModal
@@ -104,4 +166,4 @@ export function ConnectButton({
       />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/dashboard/header.tsx b/src/components/dashboard/header.tsx
index af2fe36..ac3e1df 100644
--- a/src/components/dashboard/header.tsx
+++ b/src/components/dashboard/header.tsx
@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
 import { Bell } from "lucide-react";
 import Image from "next/image";
 import WalletDisconnectModal from "../../components/blockchain/Wallet-disconnect-modal";
+import { useWalletContext } from "../blockchain/WalletProvider";
 import user from "../../../public/user1.svg";
 import check from "../../../public/check.svg";
 
@@ -15,6 +16,7 @@ interface HeaderProps {
 export function Header({ title }: HeaderProps) {
   const [isDisconnectModalOpen, setIsDisconnectModalOpen] = useState(false);
   const router = useRouter();
+  const { account, disconnectWallet } = useWalletContext();
 
   const handleProfileClick = () => {
     setIsDisconnectModalOpen(true);
@@ -25,8 +27,8 @@ export function Header({ title }: HeaderProps) {
   };
 
   const handleDisconnect = () => {
-    // Add your actual wallet disconnect logic here
-    // For example: disconnect from wallet provider, clear local storage, etc.
+    // Disconnect from wallet
+    disconnectWallet();
 
     // Clear any authentication tokens or user data
     localStorage.removeItem("walletAddress");
@@ -71,7 +73,13 @@ export function Header({ title }: HeaderProps) {
                 <span className="font-medium">Joseph Yanum</span>
                 <Image src={check} alt="Profile" className="object-cover" />
               </div>
-              <span className="text-[#888888] text-xs">@joeyyanum</span>
+              {account ? (
+                <span className="text-[#888888] text-xs">
+                  {account.slice(0, 6)}…{account.slice(-4)}
+                </span>
+              ) : (
+                <span className="text-[#888888] text-xs">@joeyyanum</span>
+              )}
             </div>
           </div>
         </div>
diff --git a/src/components/dashboard/sidebar.tsx b/src/components/dashboard/sidebar.tsx
index 1b06621..18fe1ed 100644
--- a/src/components/dashboard/sidebar.tsx
+++ b/src/components/dashboard/sidebar.tsx
@@ -8,10 +8,11 @@ import {
   LineChart,
   // LogOut,
   User,
-  MessageCircle
+  MessageCircle,
 } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { WalletDisplay } from "../blockchain/WalletDisplay";
 
 export function Sidebar() {
   const pathname = usePathname();
@@ -64,6 +65,11 @@ export function Sidebar() {
         <span className="font-semibold text-[#000b21]">ChainLib</span>
       </div>
 
+      {/* Wallet Display */}
+      <div className="p-4 border-b border-[#e7e7e7]">
+        <WalletDisplay variant="compact" showDropdown={false} />
+      </div>
+
       <nav className="p-4">
         <ul className="space-y-2">
           {navItems.map((item) => (
diff --git a/src/components/landingpage/NavBar.tsx b/src/components/landingpage/NavBar.tsx
index 7540829..7499e67 100644
--- a/src/components/landingpage/NavBar.tsx
+++ b/src/components/landingpage/NavBar.tsx
@@ -11,6 +11,7 @@ import WalletDisconnectModal from "../blockchain/Wallet-disconnect-modal";
 import { ConnectButton } from "../../components/blockchain/connect-button";
 // starknet imports
 import { useWalletContext } from "../blockchain/WalletProvider";
+import { useAccount, useDisconnect } from "@starknet-react/core";
 import { usePathname } from "next/navigation";
 import clsx from "clsx";
 
@@ -19,6 +20,7 @@ const NavBar = () => {
   const [isConnectModalOpen, setIsConnectModalOpen] = useState(false);
   const [isDisconnectModalOpen, setIsDisconnectModalOpen] = useState(false);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const { account } = useAccount();
   const path = usePathname();
 
   const dropdownRef = useRef<HTMLDivElement>(null);
@@ -29,9 +31,8 @@ const NavBar = () => {
     { label: "About ChainLib", href: "/about-us" },
   ];
 
-  const { account, connectWallet, disconnectWallet, connectors } =
-    useWalletContext();
-
+  const { connectWallet, disconnectWallet, connectors } = useWalletContext();
+  const { disconnect } = useDisconnect();
   // Close dropdown when clicking outside
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
@@ -63,12 +64,12 @@ const NavBar = () => {
     setIsConnectModalOpen(true);
   };
 
-  const handleWalletClick = () => {
+  const handleWalletClickDisconnect = () => {
     setIsDisconnectModalOpen(true);
   };
 
   const handleDisconnect = () => {
-    disconnectWallet(); // real Starknet-React disconnect :contentReference[oaicite:4]{index=4}
+    disconnect(); // real Starknet-React disconnect :contentReference[oaicite:4]{index=4}
     setIsDisconnectModalOpen(false);
   };
 
@@ -122,7 +123,7 @@ const NavBar = () => {
             ) : (
               <div className="relative" ref={dropdownRef}>
                 <div
-                  onClick={handleWalletClick}
+                  onClick={handleWalletClickDisconnect}
                   className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-[#0d0e24] border border-gray-800 cursor-pointer hover:border-gray-600 transition-colors"
                 >
                   <div className="h-8 w-8 rounded-full border-2 border-teal-500 overflow-hidden">
@@ -135,32 +136,26 @@ const NavBar = () => {
                     />
                   </div>
                   <span className="text-white font-medium">
-                    {account.slice(0, 6)}…{account.slice(-4)}
+                    {account?.address.slice(0, 6)}…{account?.address.slice(-4)}
                   </span>
-                  <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      toggleDropdown();
-                    }}
-                    className="h-8 w-8 p-0 text-gray-400 hover:text-white transition-colors"
-                  >
+                  <button className="h-8 w-8 p-0 text-gray-400 hover:text-white transition-colors">
                     <MoreVertical size={16} />
                   </button>
                 </div>
 
                 {/* Custom Dropdown Menu */}
-                {isDropdownOpen && (
+                {/* {isDropdownOpen && (
                   <div className="absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-blue-600 border border-blue-800 overflow-hidden">
                     <div className="py-1">
                       <button
-                        onClick={handleWalletClick}
+                        onClick={handleWalletClickDisconnect}
                         className="w-full text-left px-4 py-2 text-sm text-gray-200 hover:bg-blue-600 transition-colors"
                       >
                         Disconnect
                       </button>
                     </div>
                   </div>
-                )}
+                )} */}
               </div>
             )}
           </AnimationWrapper>