From eb7bbc23b397813a7b785bfd819bafb275a08715 Mon Sep 17 00:00:00 2001 From: "lopwusjethro92@gmail.com" Date: Sun, 4 May 2025 11:27:14 +0100 Subject: [PATCH] feat:Implement Wallet Connect with Argent Invisible SDK --- .env.example | 3 +- app/layout.tsx | 5 + components/WalletConnector.tsx | 62 + components/WalletOptionsModal.tsx | 48 +- context/WalletContext.tsx | 112 + hooks/useInvisibleSDK.tsx | 255 ++ package.json | 1 + pnpm-lock.yaml | 4590 +++++++++++++++++++++++++++++ 8 files changed, 5064 insertions(+), 12 deletions(-) create mode 100644 components/WalletConnector.tsx create mode 100644 context/WalletContext.tsx create mode 100644 hooks/useInvisibleSDK.tsx create mode 100644 pnpm-lock.yaml diff --git a/.env.example b/.env.example index 38cd17a..8db4f02 100644 --- a/.env.example +++ b/.env.example @@ -1 +1,2 @@ -NEXT_PUBLIC_RPC_URL = \ No newline at end of file +NEXT_PUBLIC_RPC_URL = +NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID= \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index de7410a..4630dd5 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,6 +1,8 @@ + import type { Metadata } from "next"; import "./globals.css"; import { StarknetProvider } from "@/components/StarknetProvider"; +import {WalletProvider} from "../context/WalletContext.tsx" export const metadata: Metadata = { title: "Escrownet | Secure Escrow Services on Starknet", @@ -39,14 +41,17 @@ export default function RootLayout({ + Skip to main content +
{children}
+ ); diff --git a/components/WalletConnector.tsx b/components/WalletConnector.tsx new file mode 100644 index 0000000..4fd80e0 --- /dev/null +++ b/components/WalletConnector.tsx @@ -0,0 +1,62 @@ +"use client"; +import React, { useState } from "react"; +import { useWallet } from "@/context/WalletContext"; +import WalletOptionsModal from "./WalletOptionsModal"; + +function WalletConnector() { + const { isConnected, isConnecting, address, disconnect } = useWallet(); + const [showModal, setShowModal] = useState(false); + + // Format address for display (show first 6 and last 4 characters) + const formatAddress = (addr: string) => { + if (!addr) return ""; + return `${addr.substring(0, 6)}...${addr.substring(addr.length - 4)}`; + }; + + const handleConnectClick = () => { + setShowModal(true); + }; + + const handleDisconnect = async () => { + try { + await disconnect(); + console.log("Disconnected wallet"); + } catch (error) { + console.error("Failed to disconnect wallet:", error); + } + }; + + const handleCloseModal = () => { + setShowModal(false); + }; + + return ( + <> + {isConnected && address ? ( +
+
+ {formatAddress(address)} +
+ +
+ ) : ( + + )} + + {showModal && } + + ); +} + +export default WalletConnector; \ No newline at end of file diff --git a/components/WalletOptionsModal.tsx b/components/WalletOptionsModal.tsx index 3b1587e..34b5a1d 100644 --- a/components/WalletOptionsModal.tsx +++ b/components/WalletOptionsModal.tsx @@ -1,8 +1,12 @@ "use client"; import React, { useEffect, useRef } from "react"; import LockBodyScroll from "./LockBodyScroll"; +import { useWallet } from "@/context/WalletContext"; function WalletOptionsModal({ handleClose }: { handleClose: () => void }) { + // Get wallet functionality from context + const { connect, isConnecting, isInitialized, error } = useWallet(); + // Create a ref for the first focusable element const firstButtonRef = useRef(null); @@ -13,7 +17,6 @@ function WalletOptionsModal({ handleClose }: { handleClose: () => void }) { firstButtonRef.current.focus(); } - // Listen for ESC key event dispatched by LockBodyScroll const handleEscKeyEvent = () => { handleClose(); }; @@ -25,17 +28,28 @@ function WalletOptionsModal({ handleClose }: { handleClose: () => void }) { }; }, [handleClose]); - // Handlers for wallet selection (just logging for now as per requirements) - const handleInvisibleSDK = () => { - console.log("Invisible SDK selected"); - handleClose(); + // Handler for Invisible SDK (Argent) connection + const handleInvisibleSDK = async () => { + if (!isInitialized) { + console.log("Argent Invisible SDK not initialized yet. Please wait..."); + return; + } + + try { + await connect(); + console.log("Connected with Invisible SDK (Argent)"); + handleClose(); + } catch (err) { + console.error("Failed to connect with Invisible SDK:", err); + // Error handling is done in the hook + } }; - + const handleCartridgeController = () => { console.log("Cartridge Controller selected"); handleClose(); }; - + return ( <> @@ -57,7 +71,6 @@ function WalletOptionsModal({ handleClose }: { handleClose: () => void }) { > Choose a Wallet Sign-In Method -