feat: add starknet kit package

package.json

@@ -46,6 +46,7 @@
     "react-qr-code": "^2.0.16",
     "sharp": "^0.33.5",
     "starknet": "^6.11.0",
+    "starknetkit": "^2.12.1",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.25.71"

src/app/auth/login/login.tsx

@@ -1,8 +1,6 @@
 "use client";
 
-import type React from "react";
-
-import { useState } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import {
   Card,
   CardContent,
@@ -20,6 +18,15 @@ import { Eye, EyeOff, Mail, Lock, Loader2, Send, Wallet } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { ThemeToggle } from "@/components/theme-toggle";
+import { useWalletContext } from "../../../components/blockchain/WalletProvider";
+
+import { ConnectButton } from "../../../components/blockchain/connect-button";
+import WalletDisconnectModal from "../../../components/blockchain/Wallet-disconnect-modal";
+
+// Utility to shorten wallet address
+const shortenAddress = (address: string) => {
+  return `${address.slice(0, 6)}…${address.slice(-4)}`;
+};
 
 export default function LoginPage() {
   const [email, setEmail] = useState("");
@@ -112,6 +119,32 @@ export default function LoginPage() {
     }
   };
 
+  const [isConnectModalOpen, setIsConnectModalOpen] = useState(false);
+  const [isDisconnectModalOpen, setIsDisconnectModalOpen] = useState(false);
+
+  const { account, connectWallet, disconnectWallet, connectors } =
+    useWalletContext();
+
+  // Close connect modal once wallet is connected
+  useEffect(() => {
+    if (account) {
+      setIsConnectModalOpen(false);
+    }
+  }, [account]);
+
+  const handleLaunchAppClick = () => {
+    if (account) {
+      setIsDisconnectModalOpen(true); // Already connected → show disconnect modal
+    } else {
+      setIsConnectModalOpen(true); // Not connected → show connect modal
+    }
+  };
+
+  const handleDisconnect = () => {
+    disconnectWallet();
+    setIsDisconnectModalOpen(false);
+  };
+
   return (
     <div className="min-h-screen bg-slate-50/95 dark:bg-slate-900/95 flex items-center justify-center p-4">
       <div className="w-full max-w-[600px] space-y-6">
@@ -128,28 +161,20 @@ export default function LoginPage() {
         </div>
 
         {/* Login Card */}
-        <Card className="bg-white/80 backdrop-blur-sm dark:bg-gray-900/80 shadow-lg border border-gray-200 dark:border-gray-700">
+        <Card className=" bg-white/80 backdrop-blur-sm dark:bg-gray-900/80 shadow-lg border border-gray-200 dark:border-gray-700 ">
           <CardHeader>
             <CardTitle>Sign In</CardTitle>
             <CardDescription>
               Enter your credentials to access your account
             </CardDescription>
           </CardHeader>
           <CardContent className="space-y-6">
-            {/* Wallet Connect */}
-            <Button
-              onClick={handleWalletConnect}
-              disabled={isLoading}
-              className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
-              size="lg"
+            <button
+              onClick={handleLaunchAppClick}
+              className="w-full bg-gradient-to-r  from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 rounded-full py-2 px-3 text-white cursor-pointer"
             >
-              {isLoading ? (
-                <Loader2 className="mr-2 w-4 h-4 animate-spin" />
-              ) : (
-                <Wallet className="mr-2 w-4 h-4" />
-              )}
-              Connect StarkNet Wallet
-            </Button>
+              {account ? shortenAddress(account) : "Connect StarkNet Wallet"}
+            </button>
 
             <div className="relative">
               <div className="absolute inset-0 flex items-center">
@@ -177,7 +202,9 @@ export default function LoginPage() {
                       setEmail(e.target.value);
                       setErrors((prev) => ({ ...prev, email: "" }));
                     }}
-                    className={`py-6 pl-10 ${errors.email ? "border-red-500" : ""}`}
+                    className={`py-6 pl-10 ${
+                      errors.email ? "border-red-500" : ""
+                    }`}
                     disabled={isLoading}
                   />
                 </div>
@@ -338,6 +365,21 @@ export default function LoginPage() {
         <div className="flex justify-center">
           <ThemeToggle />
         </div>
+
+        {/* Connect modal */}
+        <ConnectButton
+          isOpen={isConnectModalOpen}
+          isClosed
+          onSelect={handleWalletConnect}
+          setIsModalOpen={setIsConnectModalOpen}
+        />
+
+        {/* Disconnect modal */}
+        <WalletDisconnectModal
+          isOpen={isDisconnectModalOpen}
+          onClose={() => setIsDisconnectModalOpen(false)}
+          onDisconnect={handleDisconnect}
+        />
       </div>
     </div>
   );

src/app/auth/signup/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type React from "react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import {
   Card,
   CardContent,
@@ -32,6 +32,15 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { ThemeToggle } from "@/components/theme-toggle";
 import { PhoneInput } from "@/components/auth/phone-input";
+import { useWalletContext } from "../../../components/blockchain/WalletProvider";
+
+import { ConnectButton } from "../../../components/blockchain/connect-button";
+import WalletDisconnectModal from "../../../components/blockchain/Wallet-disconnect-modal";
+
+// Utility to shorten wallet address
+const shortenAddress = (address: string) => {
+  return `${address.slice(0, 6)}…${address.slice(-4)}`;
+};
 
 export default function SignUpPage() {
   const [formData, setFormData] = useState({
@@ -198,7 +207,31 @@ export default function SignUpPage() {
       setIsLoading(false);
     }
   };
+  const [isConnectModalOpen, setIsConnectModalOpen] = useState(false);
+  const [isDisconnectModalOpen, setIsDisconnectModalOpen] = useState(false);
+
+  const { account, connectWallet, disconnectWallet, connectors } =
+    useWalletContext();
 
+  // Close connect modal once wallet is connected
+  useEffect(() => {
+    if (account) {
+      setIsConnectModalOpen(false);
+    }
+  }, [account]);
+
+  const handleLaunchAppClick = () => {
+    if (account) {
+      setIsDisconnectModalOpen(true); // Already connected → show disconnect modal
+    } else {
+      setIsConnectModalOpen(true); // Not connected → show connect modal
+    }
+  };
+
+  const handleDisconnect = () => {
+    disconnectWallet();
+    setIsDisconnectModalOpen(false);
+  };
   return (
     <div className="min-h-screen bg-slate-50/95 dark:bg-slate-900/95 flex items-center justify-center p-4">
       <div className="w-full max-w-[600px] space-y-6">
@@ -223,20 +256,12 @@ export default function SignUpPage() {
             </CardDescription>
           </CardHeader>
           <CardContent className="space-y-6">
-            {/* Wallet Connect */}
-            <Button
-              onClick={handleWalletConnect}
-              disabled={isLoading}
-              className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
-              size="lg"
+            <button
+              onClick={handleLaunchAppClick}
+              className="w-full bg-gradient-to-r  from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 rounded-full py-2 px-3 text-white cursor-pointer"
             >
-              {isLoading ? (
-                <Loader2 className="mr-2 w-4 h-4 animate-spin" />
-              ) : (
-                <Wallet className="mr-2 w-4 h-4" />
-              )}
-              Connect StarkNet Wallet
-            </Button>
+              {account ? shortenAddress(account) : "Connect StarkNet Wallet"}
+            </button>
 
             <div className="relative">
               <div className="absolute inset-0 flex items-center">
@@ -302,7 +327,9 @@ export default function SignUpPage() {
                     placeholder="john@example.com"
                     value={formData.email}
                     onChange={(e) => handleInputChange("email", e.target.value)}
-                    className={`py-6 pl-10 ${errors.email ? "border-red-500" : ""}`}
+                    className={`py-6 pl-10 ${
+                      errors.email ? "border-red-500" : ""
+                    }`}
                     disabled={isLoading}
                   />
                 </div>
@@ -572,6 +599,21 @@ export default function SignUpPage() {
         <div className="flex justify-center">
           <ThemeToggle />
         </div>
+
+        {/* Connect modal */}
+        <ConnectButton
+          isOpen={isConnectModalOpen}
+          isClosed
+          onSelect={handleWalletConnect}
+          setIsModalOpen={setIsConnectModalOpen}
+        />
+
+        {/* Disconnect modal */}
+        <WalletDisconnectModal
+          isOpen={isDisconnectModalOpen}
+          onClose={() => setIsDisconnectModalOpen(false)}
+          onDisconnect={handleDisconnect}
+        />
       </div>
     </div>
   );

src/app/dashboard/components/header.tsx

@@ -1,70 +1,84 @@
+
 "use client";
 
-import React from "react";
-import { Bell, Menu, User, PanelLeftClose, LogOut } from "lucide-react";
+import React, { useEffect, useState } from "react";
+import {
+  Bell,
+  Menu,
+  User,
+  PanelLeftClose,
+  LogOut,
+} from "lucide-react";
 import { ThemeToggle } from "@/components/theme-toggle";
-import { useAccount } from "@starknet-react/core";
-import { useStarknetWallet } from "@/components/context/StarknetWalletContext";
+import WalletDisconnectModal from "../../../components/blockchain/Wallet-disconnect-modal";
+import { useAccount, useDisconnect } from "@starknet-react/core";
+import { useRouter } from "next/navigation";
+
+const Header = () => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [waitingForReconnect, setWaitingForReconnect] = useState(false);
+
+  const { disconnect } = useDisconnect();
+  const { address } = useAccount();
+  const router = useRouter();
+
+  const toggleSidebar = () => setIsCollapsed(!isCollapsed);
 
-interface HeaderProps {
-  onMenuClick: () => void;
-  isCollapsed: boolean;
-  onToggleCollapse: () => void;
-}
+  const handleDisconnect = () => {
+    disconnect();
+    setIsModalOpen(false);
+    setWaitingForReconnect(true);
+  };
+
+  // ✅ When the user reconnects after disconnecting, navigate to dashboard
+  useEffect(() => {
+    if (waitingForReconnect && address) {
+      router.push("/dashboard");
+    }
+  }, [waitingForReconnect, address, router]);
 
-const Header: React.FC<HeaderProps> = ({
-  onMenuClick,
-  isCollapsed,
-  onToggleCollapse,
-}) => {
-  const { truncatedAddress, disconnectWallet, address } = useStarknetWallet();
   return (
-    <header className="h-16 bg-slate-200/95 dark:bg-slate-950/95 border-b border-border flex items-center justify-between px-4 lg:px-6 sticky top-0 z-50">
-      <div className="flex items-center space-x-4">
-        <button
-          className="lg:hidden text-foreground hover:text-muted-foreground"
-          onClick={onMenuClick}
-        >
-          <Menu className="w-6 h-6" />
-        </button>
+    <header className="flex items-center justify-between px-4 py-2 border-b bg-background">
+      <div className="flex items-center gap-4">
         <button
-          className="hidden lg:block text-foreground hover:text-muted-foreground"
-          onClick={onToggleCollapse}
+          onClick={toggleSidebar}
+          className="flex items-center justify-center w-8 h-8 bg-muted rounded-full hover:bg-accent transition-colors"
         >
-          <PanelLeftClose className="w-6 h-6" />
+          {isCollapsed ? (
+            <Menu className="w-4 h-4 text-muted-foreground" />
+          ) : (
+            <PanelLeftClose className="w-4 h-4 text-muted-foreground" />
+          )}
         </button>
-        <div className="flex items-center space-x-2 bg-green-50 dark:bg-green-900/20 px-3 py-1 rounded-full">
-          <div className="w-2 h-2 bg-green-500 rounded-full"></div>
-          <span className="text-xs font-medium text-green-700 dark:text-green-400">
-            Connected to StarkNet Mainnet
-          </span>
-        </div>
+        <span className="text-lg font-semibold">Dashboard</span>
       </div>
-      <div className="flex items-center space-x-4">
-        {address && (
-          <div className="text-sm text-muted-foreground">
-            {" "}
-            {truncatedAddress}{" "}
-          </div>
-        )}
-        <button className="relative p-2 text-muted-foreground hover:text-foreground rounded-lg hover:bg-accent transition-colors">
-          <Bell className="w-5 h-5" />
-          <span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
-        </button>
 
+      <div className="flex items-center gap-3">
         <ThemeToggle />
 
+        <button className="flex items-center justify-center w-8 h-8 bg-muted rounded-full hover:bg-accent transition-colors">
+          <Bell className="w-4 h-4 text-muted-foreground" />
+        </button>
+
         <button className="flex items-center justify-center w-8 h-8 bg-muted rounded-full hover:bg-accent transition-colors">
           <User className="w-4 h-4 text-muted-foreground" />
         </button>
 
         <button
-          onClick={disconnectWallet}
-          className="flex items-center justify-center w-8 h-8 bg-muted rounded-full hover:bg-accent transition-colors"
+          onClick={() => setIsModalOpen(true)}
+          className="flex items-center justify-center w-8 h-8 bg-muted rounded-full hover:bg-accent transition-colors cursor-pointer"
         >
           <LogOut className="w-4 h-4 text-muted-foreground" />
         </button>
       </div>
+
+      {/* Disconnect confirmation modal */}
+      <WalletDisconnectModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        onDisconnect={handleDisconnect}
+      />
     </header>
   );
 };