From cbbd89df9ab988a967aae82c4bfca2568da665c9 Mon Sep 17 00:00:00 2001 From: "Shantel peters." Date: Fri, 20 Dec 2024 16:08:04 +0000 Subject: [PATCH] feat: remove argent web wallet connector --- app/client/src/app/Providers.tsx | 107 +++++++------- .../src/components/WalletConnectModal.tsx | 135 +++++++++++------- 2 files changed, 130 insertions(+), 112 deletions(-) diff --git a/app/client/src/app/Providers.tsx b/app/client/src/app/Providers.tsx index 2985d9fa..f2b92e18 100644 --- a/app/client/src/app/Providers.tsx +++ b/app/client/src/app/Providers.tsx @@ -1,74 +1,67 @@ "use client"; import React, { useEffect } from "react"; - import { useLoginStore } from "@/store/loginStore"; - + import { sepolia, mainnet } from "@starknet-react/chains"; -import { - StarknetConfig, - publicProvider, - voyager -} from "@starknet-react/core"; +import { StarknetConfig, publicProvider, voyager } from "@starknet-react/core"; import type { Connector } from "@starknet-react/core"; -import { InjectedConnector } from "starknetkit/injected" -import { ArgentMobileConnector, isInArgentMobileAppBrowser } from "starknetkit/argentMobile"; -import { WebWalletConnector } from "starknetkit/webwallet" +import { InjectedConnector } from "starknetkit/injected"; +import { + ArgentMobileConnector, + isInArgentMobileAppBrowser, +} from "starknetkit/argentMobile"; import { useRouter } from "next/navigation"; - -export function Providers({ children }: { children: React.ReactNode }) { - const loginStore = useLoginStore() - const router = useRouter() - - const connectors = isInArgentMobileAppBrowser() ? [ - ArgentMobileConnector.init({ - options: { - url:"", - dappName: "Example dapp", - projectId: "example-project-id", - }, - inAppBrowserOptions: {}, - }) - ] as Connector[] : [ - new InjectedConnector({ options: { id: "braavos", name: "Braavos" }}), - new InjectedConnector({ options: { id: "argentX", name: "Argent X" }}), - new WebWalletConnector({ url: "https://web.argent.xyz" }), - ArgentMobileConnector.init({ - options: { - url:"", - dappName: "Example dapp", - projectId: "example-project-id", - } - }) - ] as Connector[] +export function Providers({ children }: { children: React.ReactNode }) { + const loginStore = useLoginStore(); + const router = useRouter(); - + const connectors = isInArgentMobileAppBrowser() + ? ([ + ArgentMobileConnector.init({ + options: { + url: "", + dappName: "Example dapp", + projectId: "example-project-id", + }, + inAppBrowserOptions: {}, + }), + ] as Connector[]) + : ([ + new InjectedConnector({ options: { id: "braavos", name: "Braavos" } }), + new InjectedConnector({ options: { id: "argentX", name: "Argent X" } }), + ArgentMobileConnector.init({ + options: { + url: "", + dappName: "Example dapp", + projectId: "example-project-id", + }, + }), + ] as Connector[]); - useEffect(()=>{ - const localStorage = window.localStorage - const userType = localStorage.getItem("user-type") + useEffect(() => { + const localStorage = window.localStorage; + const userType = localStorage.getItem("user-type"); - if(!userType) { - loginStore.clearUserType() - localStorage.removeItem("user-type") - router.push("/") - return + if (!userType) { + loginStore.clearUserType(); + localStorage.removeItem("user-type"); + router.push("/"); + return; } - const allowedUserTypes = ["owner", "inspector"] - if (!allowedUserTypes.includes(userType)) { - loginStore.clearUserType() - localStorage.removeItem("user-type") - router.push("/") - return + const allowedUserTypes = ["owner", "inspector"]; + if (!allowedUserTypes.includes(userType)) { + loginStore.clearUserType(); + localStorage.removeItem("user-type"); + router.push("/"); + return; } - loginStore.setUserType(userType as "owner"|"inspector") - }, []) - + loginStore.setUserType(userType as "owner" | "inspector"); + }, []); - return ( ) } */} {/* { loginStore.userType && children } */} - { children } + {children} ); -} \ No newline at end of file +} diff --git a/app/client/src/components/WalletConnectModal.tsx b/app/client/src/components/WalletConnectModal.tsx index e251ebe2..54ae1260 100644 --- a/app/client/src/components/WalletConnectModal.tsx +++ b/app/client/src/components/WalletConnectModal.tsx @@ -1,58 +1,59 @@ "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"], ["braavos", "Braavos"], - ["argentWebWallet", "Web Wallet"], ["argentMobile", "Argent mobile"], ]); -const walletIcons : { - "braavos": string, - "argentX": string, - "argentWebWallet": string, - "argentMobile": string, +const walletIcons: { + braavos: string; + argentX: 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", + 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 }); - if(setShowWalletsModal) setShowWalletsModal(false) + 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); } @@ -72,39 +73,63 @@ 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 +}