diff --git a/app/client/src/app/layout.tsx b/app/client/src/app/layout.tsx index 92e624f..b0aedf5 100644 --- a/app/client/src/app/layout.tsx +++ b/app/client/src/app/layout.tsx @@ -52,7 +52,7 @@ export default function RootLayout({ {children} diff --git a/app/client/src/components/WalletConnectModal.tsx b/app/client/src/components/WalletConnectModal.tsx index 93bed7f..008dc72 100644 --- a/app/client/src/components/WalletConnectModal.tsx +++ b/app/client/src/components/WalletConnectModal.tsx @@ -1,13 +1,13 @@ "use client"; -import React from "react"; +import React from "react"; import { useConnect } from "@starknet-react/core"; import type { Connector } from "@starknet-react/core"; import { useRouter } from "next/navigation"; // import FadeLoader from "react-spinners/FadeLoader"; import { IoMdClose } from "react-icons/io"; import Image from "next/image"; -import { ToastContainer, toast } from 'react-toastify'; -import 'react-toastify/dist/ReactToastify.css'; +import { ToastContainer, toast } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; const walletIdToName = new Map([ ["argentX", "Argent X"], @@ -16,44 +16,48 @@ const walletIdToName = new Map([ ["argentMobile", "Argent mobile"], ]); -const walletIcons : { - "braavos": string, - "argentX": string, - "argentWebWallet": string, - "argentMobile": string, +const walletIcons: { + braavos: string; + argentX: string; + argentWebWallet: string; + argentMobile: string; } = { - "braavos": "/icons/wallets/braavos.svg", - "argentX": "/icons/wallets/argent-x.svg", - "argentWebWallet": "/icons/wallets/web.svg", - "argentMobile": "/icons/wallets/argent-x.svg", -} - - - -export function WalletConnectorModal({setShowWalletsModal}:{ setShowWalletsModal?:(value:boolean)=>void }) { + braavos: "/icons/wallets/braavos.svg", + argentX: "/icons/wallets/argent-x.svg", + argentWebWallet: "/icons/wallets/web.svg", + argentMobile: "/icons/wallets/argent-x.svg", +}; - const router = useRouter() - const { connectors, connectAsync } = useConnect({ }); +export function WalletConnectorModal({ + setShowWalletsModal, +}: { + setShowWalletsModal?: (value: boolean) => void; +}) { + const router = useRouter(); + const { connectors, connectAsync } = useConnect({}); async function connect(connector: Connector) { try { await connectAsync({ connector }); - localStorage.setItem("landver-connector", connector.id) - if(setShowWalletsModal) setShowWalletsModal(false) + localStorage.setItem("landver-connector", connector.id); + if (setShowWalletsModal) setShowWalletsModal(false); } catch (error: unknown) { // Create user-friendly error message let errorMessage = "Failed to connect wallet. "; if (error instanceof Error) { if (error.message.includes("rejected")) { - errorMessage = "Connection rejected. Please try again and approve the connection request."; + errorMessage = + "Connection rejected. Please try again and approve the connection request."; } else if (error.message.includes("Connector not found")) { - errorMessage = `${walletIdToName.get(connector.id) ?? connector.name} is not installed. Please install the wallet extension first.`; + errorMessage = `${ + walletIdToName.get(connector.id) ?? connector.name + } is not installed. Please install the wallet extension first.`; } else { - errorMessage += "Please check if your wallet is properly configured and try again."; + errorMessage += + "Please check if your wallet is properly configured and try again."; } } - toast.error(errorMessage); console.error("Wallet connection error:", error); } @@ -73,39 +77,67 @@ export function WalletConnectorModal({setShowWalletsModal}:{ setShowWalletsModal ) } */} -
-
+
+
+
{ + if (!!setShowWalletsModal) { + setShowWalletsModal(false); + } + if (!setShowWalletsModal) { + router.push("/dashboard"); + } + }} + > + +
+

+ Connect Wallet +

+
+ {connectors.map((connector, index) => { + return (
{ - if(!!setShowWalletsModal){ - setShowWalletsModal(false) - } - if(!setShowWalletsModal){ - router.push("/dashboard") - } - }} + key={connector.id + "connectwalletmodal" + index} + onClick={() => connect(connector)} + className="bg-[#F2FCFA] px-4 flex justify-between items-center rounded-md h-[65px] w-full shrink-0 hover:scale-95 transition-all cursor-pointer" > - -
-

Connect Wallet

-
- {connectors.map((connector, index) => { - - return ( -
connect(connector)} className="bg-[#F2FCFA] px-4 flex justify-between items-center rounded-md h-[65px] w-full shrink-0 hover:scale-95 transition-all cursor-pointer"> - ether -
-

{walletIdToName.get(connector.id) ?? connector.name}

- {/*

Powered by Agent

*/} -
- ether -
- ); - })} + ether +
+

+ {walletIdToName.get(connector.id) ?? connector.name} +

+ {/*

Powered by Agent

*/} +
+ ether
-
+ ); + })} +
+
); -} \ No newline at end of file +}