Skip to content

Commit

Permalink
feat: remove argent web wallet connector
Browse files Browse the repository at this point in the history
  • Loading branch information
@ShantelPeters
ShantelPeters committed Dec 20, 2024
1 parent 8b352e7 commit cbbd89d
Show file tree
Hide file tree
Showing 2 changed files with 130 additions and 112 deletions.
107 changes: 50 additions & 57 deletions app/client/src/app/Providers.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<StarknetConfig
chains={[mainnet, sepolia]}
Expand All @@ -86,7 +79,7 @@ export function Providers({ children }: { children: React.ReactNode }) {
</div>
) } */}
{/* { loginStore.userType && children } */}
{ children }
{children}
</StarknetConfig>
);
}
}
135 changes: 80 additions & 55 deletions app/client/src/components/WalletConnectModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -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);
}
Expand All @@ -72,39 +73,63 @@ export function WalletConnectorModal({setShowWalletsModal}:{ setShowWalletsModal
</div>
)
} */}
<div className="p-3 fixed top-0 left-0 right-0 bottom-0 bg-black bg-opacity-40 flex justify-center items-center" style={{ zIndex:1000 }}>
<div className="bg-white rounded-lg py-6 max-w-[630px] w-full relative">
<div
className="p-3 fixed top-0 left-0 right-0 bottom-0 bg-black bg-opacity-40 flex justify-center items-center"
style={{ zIndex: 1000 }}
>
<div className="bg-white rounded-lg py-6 max-w-[630px] w-full relative">
<div
className="absolute top-6 right-6 cursor-pointer"
onClick={() => {
if (!!setShowWalletsModal) {
setShowWalletsModal(false);
}
if (!setShowWalletsModal) {
router.push("/dashboard");
}
}}
>
<IoMdClose size={22} />
</div>
<p className="text-center text-xl font-semibold mb-7">
Connect Wallet
</p>
<div className="w-[93%] mx-auto flex flex-col gap-3">
{connectors.map((connector, index) => {
return (
<div
className="absolute top-6 right-6 cursor-pointer"
onClick={()=>{
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"
>
<IoMdClose size={22} />
</div>
<p className="text-center text-xl font-semibold mb-7">Connect Wallet</p>
<div className="w-[93%] mx-auto flex flex-col gap-3">
{connectors.map((connector, index) => {

return (
<div 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">
<Image src={walletIcons[connector.id as "braavos"|"argentX"|"argentWebWallet"|"argentMobile"]} alt="ether" width={25} height={25} />
<div>
<p className="text-base text-center font-medium">{walletIdToName.get(connector.id) ?? connector.name}</p>
{/* <p className="text-base text-center ">Powered by Agent</p> */}
</div>
<Image src={"/icons/common/arror-up-right-with-underline.svg"} alt="ether" width={21} height={21} />
</div>
);
})}
<Image
src={
walletIcons[
connector.id as "braavos" | "argentX" | "argentMobile"
]
}
alt="ether"
width={25}
height={25}
/>
<div>
<p className="text-base text-center font-medium">
{walletIdToName.get(connector.id) ?? connector.name}
</p>
{/* <p className="text-base text-center ">Powered by Agent</p> */}
</div>
<Image
src={"/icons/common/arror-up-right-with-underline.svg"}
alt="ether"
width={21}
height={21}
/>
</div>
</div>
);
})}
</div>
</div>
</div>
</div>
);
}
}

0 comments on commit cbbd89d

Please sign in to comment.