feat: integrate WalletDisplay component into admin and reader sidebars, enhance header with wallet address display

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) => (

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>
   );
 }
-
-
-

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>

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
     }

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>
+  );
+}

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>
   );
-} 
+}