Implemented Wallet Connect with Argent Invisible SDK

app/dashboard/page.tsx

@@ -4,6 +4,7 @@ import NftContainer from "@/components/NftContainer";
 import StatsBox from "@/components/StatsBox";
 import Header from "@/components/Header";
 import { useTheme } from "@/components/ThemeContext";
+import ConnectButton from "@/components/ConnectButton";
 
 export default function Dashboard() {
     const { theme } = useTheme();
@@ -17,6 +18,8 @@ export default function Dashboard() {
                 }`}
             >
                 <div className="max-w-[652px] md:w-full flex flex-col items-center justify-start gap-10">
+
+                   <ConnectButton/>
                     <Header />
                     <StatsBox />
                     <NftContainer />

app/layout.tsx

@@ -13,7 +13,7 @@ const satoshi = localFont({
 export const metadata: Metadata = {
     title: "Weaver",
 };
-
+// 
 export default function RootLayout({
     children,
 }: Readonly<{

components/ConnectButton.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import argentWebWallet from "@/utils/argentWallet";
+import { useState } from "react";
+
+
+
+
+
+
+export default function ConnectButton() {
+
+    const [account, setAccount] = useState(null);
+
+
+    const handleConnect = async () => {
+        try {
+            const response = await argentWebWallet.requestConnection({
+                callbackData: "custom_callback_data",
+                approvalRequests: [
+                    {
+                        tokenAddress: "0x049D36570D4e46f48e99674bd3fcc84644DdD6b96F7C741B1562B82f9e004dC7",
+                        amount: BigInt("100000000000000000").toString(),
+
+                        spender: "0x7e00d496e324876bbc8531f2d9a82bf154d1a04a50218ee74cdd372f75a551a",
+                    },
+                ],
+            });
+            const { account: sessionAccount } = response
+            setAccount(sessionAccount);
+
+        } catch (err) {
+            console.error(err);
+        }
+    };
+
+
+    const handleDisconnect = () => {
+        setAccount(null);
+        console.log("Disconnected from Argent Web Wallet");
+    };
+
+    const isConnected = !!account;
+
+
+
+
+
+
+
+    return (
+
+        <div>  {isConnected ? (<button onClick={handleDisconnect} className=" py-2 px-4 bg-[#787272] " > Disconnet wallet </button>) : (<button onClick={handleConnect} className=" py-2 px-4 bg-[#787272] " > Connect wallet </button>)}  </div>
+
+    )
+}

components/TaskBox.tsx

@@ -28,7 +28,7 @@ export default function TaskBox({
     : `${fullText.split(" ").slice(0, 6).join(" ")}...`;
 
   return (
-    <div className= {`border-2 border-[#1D1D1D] w-full h-auto rounded-t-[10px] rounded-b-none px-10 py-5 
+    <div className= {`border-2 border-[#1D1D1D] w-full h-auto rounded-t-[10px] rounded-b-none px-10 py-5
       ${ theme === "dark" ? "bg-[#121212] text-white" : "bg-white text-black"
     }`} >
       <div className="flex space-x-5">