From 54199d425adcf6e152cdb3d49e2859aea4556675 Mon Sep 17 00:00:00 2001
From: JamesVictor-o <victorjames40v@gmail.com>
Date: Sat, 26 Jul 2025 13:50:35 +0100
Subject: [PATCH 1/2] fix: implement real wallet connection and address display
 functionality

---
 .../anonymous-profile/wallet-card.tsx         | 100 ++++++++----------
 src/components/home/hero.tsx                  |   4 +-
 2 files changed, 45 insertions(+), 59 deletions(-)

diff --git a/src/components/anonymous-profile/wallet-card.tsx b/src/components/anonymous-profile/wallet-card.tsx
index 902c83c..f8318b4 100644
--- a/src/components/anonymous-profile/wallet-card.tsx
+++ b/src/components/anonymous-profile/wallet-card.tsx
@@ -1,77 +1,63 @@
 "use client";
 
 import { Copy, LogOut, Wallet } from "lucide-react";
-import { motion } from "motion/react";
-import { useState } from "react";
-import { Walletvariant } from "./motion";
+import { useToast } from "@/components/ui/toast";
+import { useAccount, useDisconnect } from "@starknet-react/core";
 
-function WalletCard() {
-  const [walletConnected, setWalletConnected] = useState(true);
+function truncateAddress(address: string) {
+  if (!address) return "";
+  return address.slice(0, 6) + "..." + address.slice(-4);
+}
 
-  const walletAddress = "0x742d35Cc6634C0532925a3b8D4C2C4e";
+function WalletCard() {
+  const { address, isConnected } = useAccount();
+  const { disconnect } = useDisconnect();
+  const { toast } = useToast();
 
   const copyToClipboard = (text: string) => {
     navigator.clipboard.writeText(text);
+    toast.success("Copied to clipboard!");
   };
 
-  const disconnectWallet = () => {
-    setWalletConnected(false);
-  };
-
-  return (
-    <motion.div
-      variants={Walletvariant}
-      initial="hidden"
-      animate="visible"
-      className="bg-gradient-to-tr from-indigo-500/10 via-purple-500/5 to-background backdrop-blur-sm shadow-lg p-5 mb:p-10 border mb-5 rounded-2xl md:mb-8"
-    >
-      <div>
+  if (!isConnected) {
+    return (
+      <div className="bg-gradient-to-tr from-indigo-500/10 via-purple-500/5 to-background backdrop-blur-sm shadow-lg p-5 mb:p-10 border mb-5 rounded-2xl md:mb-8">
         <div className="flex p-2 h-full items-center mb-8 text-2xl md:text-3xl font-semibold gap-2 ">
           <Wallet className="w-6 h-6 text-purple-400" />
           Wallet Connection
         </div>
+        <div className="text-red-500 text-lg">Wallet not connected.</div>
       </div>
+    );
+  }
+  return (
+    <div className="bg-gradient-to-tr from-indigo-500/10 via-purple-500/5 to-background backdrop-blur-sm shadow-lg p-5 mb:p-10 border mb-5 rounded-2xl md:mb-8">
       <div>
-        {walletConnected ? (
-          <div className="flex flex-col md:flex-row overflow-hidden items-center justify-between p-4 dark:bg-gray-900/50 bg-secondary-foreground/80 rounded-lg">
-            <div className="flex items-center w-full gap-3">
-              <div className="space-y-1.5 w-full">
-                <div className="flex items-center gap-3">
-                  <div className="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
-                  <p className="text-sm text-gray-400">Connected Wallet</p>
-                </div>
-                <div className="break-words ">
-                  <p className="font-mono  text-white">{walletAddress}...</p>
-                </div>
-              </div>
-            </div>
-            <div className="flex w-full md:justify-end mt-4 md:m-0 gap-7 md:gap-5">
-              <button
-                onClick={() => copyToClipboard(walletAddress)}
-                className="text-gray-400 cursor-pointer hover:text-white"
-              >
-                <Copy className="w-4 h-4" />
-              </button>
-              <button
-                onClick={disconnectWallet}
-                className="text-red-400 cursor-pointer hover:text-red-300"
-              >
-                <LogOut className="w-4 h-4" />
-              </button>
-            </div>
-          </div>
-        ) : (
-          <div className="text-center py-8">
-            <Wallet className="w-12 h-12 text-gray-600 mx-auto mb-4" />
-            <p className="text-gray-400 mb-4">No wallet connected</p>
-            <button className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 px-4 py-2 rounded-3xl">
-              Connect Wallet
-            </button>
-          </div>
-        )}
+        <div className="flex p-2 h-full items-center mb-8 text-2xl md:text-3xl font-semibold gap-2 ">
+          <Wallet className="w-6 h-6 text-purple-400" />
+          Wallet Connection
+        </div>
+        <div className="flex items-center gap-4">
+          <span className="font-mono text-purple-600 dark:text-purple-300 text-base md:text-lg break-all">
+            {truncateAddress(address!)}
+          </span>
+          <button
+            onClick={() => copyToClipboard(address!)}
+            className="p-1 rounded hover:bg-purple-100 dark:hover:bg-purple-900"
+            title="Copy address"
+          >
+            <Copy className="w-4 h-4" />
+          </button>
+          <button
+            onClick={disconnect}
+            className="p-1 rounded hover:bg-red-100 dark:hover:bg-red-900"
+            title="Disconnect wallet"
+          >
+            <LogOut className="w-4 h-4" />
+          </button>
+        </div>
       </div>
-    </motion.div>
+    </div>
   );
 }
-
 export default WalletCard;
diff --git a/src/components/home/hero.tsx b/src/components/home/hero.tsx
index 35b482c..9d61f45 100644
--- a/src/components/home/hero.tsx
+++ b/src/components/home/hero.tsx
@@ -4,7 +4,7 @@ import { Button } from "@/components/ui/button";
 import { useRouter } from "next/navigation";
 
 const Hero = () => {
-  const router = useRouter()
+  const router = useRouter();
   return (
     <section id="hero" className="relative">
       <div className="absolute inset-0 bg-grid-slate-900/[0.04] bg-[size:40px_40px] bg-no-repeat" />
@@ -30,7 +30,7 @@ const Hero = () => {
           <div className="flex flex-col sm:flex-row gap-4">
             <Button
               size="lg"
-              onClick={()=>router.push("/authentication")}
+              onClick={() => router.push("/authentication")}
               className="bg-gradient-to-r from-indigo-500 to-purple-700 hover:from-indigo-600 hover:to-purple-800 dark:text-white cursor-pointer"
             >
               Get Started.

From d652d127b859136095e9b7903f51e10b855d2868 Mon Sep 17 00:00:00 2001
From: JamesVictor-o <victorjames40v@gmail.com>
Date: Sat, 26 Jul 2025 14:19:09 +0100
Subject: [PATCH 2/2] fix:fixed build error

---
 src/components/anonymous-profile/wallet-card.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/anonymous-profile/wallet-card.tsx b/src/components/anonymous-profile/wallet-card.tsx
index f8318b4..4d00710 100644
--- a/src/components/anonymous-profile/wallet-card.tsx
+++ b/src/components/anonymous-profile/wallet-card.tsx
@@ -49,7 +49,7 @@ function WalletCard() {
             <Copy className="w-4 h-4" />
           </button>
           <button
-            onClick={disconnect}
+            onClick={() => disconnect()}
             className="p-1 rounded hover:bg-red-100 dark:hover:bg-red-900"
             title="Disconnect wallet"
           >