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 1ff0892..7057b36 100644 --- a/components/WalletOptionsModal.tsx +++ b/components/WalletOptionsModal.tsx @@ -1,9 +1,14 @@ "use client"; import React, { useEffect, useRef } from "react"; import LockBodyScroll from "./LockBodyScroll"; -import { useConnect } from "@starknet-react/core"; +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); const { connect, connectors } = useConnect(); @@ -11,7 +16,6 @@ function WalletOptionsModal({ handleClose }: { handleClose: () => void }) { if (firstButtonRef.current) { firstButtonRef.current.focus(); } - const handleEscKeyEvent = () => { handleClose(); }; @@ -23,6 +27,28 @@ function WalletOptionsModal({ handleClose }: { handleClose: () => void }) { }; }, [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(); + const handleInvisibleSDK = () => { console.log("Invisible SDK selected"); handleClose(); @@ -44,7 +70,7 @@ function WalletOptionsModal({ handleClose }: { handleClose: () => void }) { console.error("Failed to connect Cartridge Controller:", error); } }; - + return ( <> @@ -66,7 +92,6 @@ function WalletOptionsModal({ handleClose }: { handleClose: () => void }) { > Choose a Wallet Sign-In Method -