feat: add starknet kit functionality

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

@@ -2,7 +2,7 @@
 
 import type React from "react";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import {
   Card,
   CardContent,
@@ -21,6 +21,16 @@ 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("");
   const [password, setPassword] = useState("");
@@ -112,6 +122,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">
@@ -137,19 +173,13 @@ export default function LoginPage() {
           </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 +207,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>
@@ -333,6 +365,20 @@ export default function LoginPage() {
             </Link>
           </p>
         </div>
+        {/* Connect modal */}
+        <ConnectButton
+          isOpen={isConnectModalOpen}
+          isClosed
+          onSelect={handleWalletConnect}
+          setIsModalOpen={setIsConnectModalOpen}
+        />
+
+        {/* Disconnect modal */}
+        <WalletDisconnectModal
+          isOpen={isDisconnectModalOpen}
+          onClose={() => setIsDisconnectModalOpen(false)}
+          onDisconnect={handleDisconnect}
+        />
 
         {/* Theme Toggle */}
         <div className="flex justify-center">

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,14 @@ 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({
@@ -199,6 +207,32 @@ export default function SignUpPage() {
     }
   };
 
+  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">
@@ -224,19 +258,13 @@ export default function SignUpPage() {
           </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 +330,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>
@@ -568,6 +598,21 @@ export default function SignUpPage() {
           </p>
         </div>
 
+        {/* Connect modal */}
+        <ConnectButton
+          isOpen={isConnectModalOpen}
+          isClosed
+          onSelect={handleWalletConnect}
+          setIsModalOpen={setIsConnectModalOpen}
+        />
+
+        {/* Disconnect modal */}
+        <WalletDisconnectModal
+          isOpen={isDisconnectModalOpen}
+          onClose={() => setIsDisconnectModalOpen(false)}
+          onDisconnect={handleDisconnect}
+        />
+
         {/* Theme Toggle */}
         <div className="flex justify-center">
           <ThemeToggle />

src/app/dashboard/components/header.tsx

@@ -1,10 +1,14 @@
+
+
+
 "use client";
 
-import React from "react";
+import { useState, useEffect } 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";
 
 interface HeaderProps {
   onMenuClick: () => void;
@@ -17,7 +21,25 @@ const Header: React.FC<HeaderProps> = ({
   isCollapsed,
   onToggleCollapse,
 }) => {
-  const { truncatedAddress, disconnectWallet, address } = useStarknetWallet();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [waitingForReconnect, setWaitingForReconnect] = useState(false);
+  const { disconnect } = useDisconnect();
+  const { address } = useAccount();
+  const router = useRouter();
+
+  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]);
+
   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">
@@ -40,13 +62,8 @@ const Header: React.FC<HeaderProps> = ({
           </span>
         </div>
       </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>
@@ -59,12 +76,19 @@ const Header: React.FC<HeaderProps> = ({
         </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)}
         >
-          <LogOut className="w-4 h-4 text-muted-foreground" />
+          <LogOut className="w-4 h-4 text-muted-foreground cursor-pointer" />
         </button>
       </div>
+
+      {/* Disconnect confirmation modal */}
+      <WalletDisconnectModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        onDisconnect={handleDisconnect}
+      />
     </header>
   );
 };

src/app/dashboard/layout.tsx

@@ -3,7 +3,7 @@
 import React, { useState, ReactNode } from "react";
 import Sidebar from "./components/sidebar";
 import Header from "./components/header";
-import { Providers } from "@/components/providers";
+
 
 interface DashboardLayoutProps {
   children: ReactNode;