From 7e31b4518cc54f6eefb25db350809048327ba25d Mon Sep 17 00:00:00 2001 From: Iris Date: Tue, 10 Oct 2023 14:51:58 +0200 Subject: [PATCH] feat: add web wallet --- components/UI/modalWallet.tsx | 18 +++++++ components/UI/navbar.tsx | 13 +++-- components/UI/wallets.tsx | 98 +++++++++++++++++++++++++++++++++-- package.json | 1 + pages/_app.tsx | 7 +++ 5 files changed, 128 insertions(+), 9 deletions(-) diff --git a/components/UI/modalWallet.tsx b/components/UI/modalWallet.tsx index 707cb5af..6ecaa74e 100644 --- a/components/UI/modalWallet.tsx +++ b/components/UI/modalWallet.tsx @@ -34,6 +34,8 @@ const ModalWallet: FunctionComponent = ({ const network = process.env.NEXT_PUBLIC_IS_TESTNET === "true" ? "testnet" : "mainnet"; const transactions = useTransactions({ hashes, watch: true }); + // Argent web wallet is detectable only like this + const isWebWallet = (connector as any)?._wallet?.id === "argentWebWallet"; // TODO: Check for starknet react fix and delete that code useEffect(() => { @@ -110,6 +112,22 @@ const ModalWallet: FunctionComponent = ({ title="Copy Address" width="auto" /> + {isWebWallet && ( + + window.open( + network === "mainnet" + ? "https://web.argent.xyz" + : "https://web.hydrogen.argent47.net", + "_blank", + "noopener noreferrer" + ) + } + icon={} + title="Web wallet Dashboard" + width="auto" + /> + )}
My transactions
diff --git a/components/UI/navbar.tsx b/components/UI/navbar.tsx index 471d22eb..4092dd5b 100644 --- a/components/UI/navbar.tsx +++ b/components/UI/navbar.tsx @@ -34,7 +34,8 @@ const Navbar: FunctionComponent = () => { const [isConnected, setIsConnected] = useState(false); const [isWrongNetwork, setIsWrongNetwork] = useState(false); const [txLoading, setTxLoading] = useState(0); - const { available, connect, disconnect, connectors } = useConnectors(); + const { available, connect, disconnect, connectors, refresh } = + useConnectors(); const { provider } = useProvider(); const domainOrAddressMinified = useDisplayName(address ?? ""); const domain = useDomainFromAddress(address ?? "").domain; @@ -135,6 +136,12 @@ const Navbar: FunctionComponent = () => { return textToReturn; } + // Refresh available connectors before showing wallet modal + function refreshAndShowWallet(): void { + refresh(); + setHasWallet(true); + } + const handleScroll = () => { if (window.scrollY > 10) { setNavbarBg(true); @@ -187,9 +194,7 @@ const Navbar: FunctionComponent = () => { onClick={ isConnected ? () => setShowWallet(true) - : available.length === 1 - ? () => connect(available[0]) - : () => setHasWallet(true) + : () => refreshAndShowWallet() } > {isConnected ? ( diff --git a/components/UI/wallets.tsx b/components/UI/wallets.tsx index 43e2d4b8..ec796dc7 100644 --- a/components/UI/wallets.tsx +++ b/components/UI/wallets.tsx @@ -1,10 +1,11 @@ -import React from "react"; +import React, { useMemo, useState } from "react"; import styles from "../../styles/components/wallets.module.css"; -import { useAccount, useConnectors } from "@starknet-react/core"; +import { Connector, useAccount, useConnectors } from "@starknet-react/core"; import Button from "./button"; import { FunctionComponent, useEffect } from "react"; import { Modal } from "@mui/material"; import WalletIcons from "./iconsComponents/icons/walletIcons"; +import getDiscoveryWallets from "get-starknet-core"; type WalletsProps = { closeWallet: () => void; @@ -15,8 +16,19 @@ const Wallets: FunctionComponent = ({ closeWallet, hasWallet, }) => { - const { connect, connectors, refresh } = useConnectors(); + const { connect, connectors } = useConnectors(); const { account } = useAccount(); + const [argent, setArgent] = useState(""); + const [braavos, setBraavos] = useState(""); + const combinations = [ + [0, 1, 2], + [0, 2, 1], + [1, 0, 2], + [1, 2, 0], + [2, 0, 1], + [2, 1, 0], + ]; + const rand = useMemo(() => Math.floor(Math.random() * 6), []); useEffect(() => { if (account) { @@ -24,6 +36,46 @@ const Wallets: FunctionComponent = ({ } }, [account, closeWallet]); + useEffect(() => { + // get wallets download links from get-starknet-core + // if browser is not recognized, it will default to their download pages + getDiscoveryWallets.getDiscoveryWallets().then((wallets) => { + const browser = getBrowser(); + + wallets.map((wallet) => { + if (wallet.id === "argentX") { + setArgent( + browser + ? wallet.downloads[browser as keyof typeof wallet.downloads] + : "https://www.argent.xyz/argent-x/" + ); + } else if (wallet.id === "braavos") { + setBraavos( + browser + ? wallet.downloads[browser as keyof typeof wallet.downloads] + : "https://braavos.app/download-braavos-wallet/" + ); + } + }); + }); + }, []); + + function connectWallet(connector: Connector): void { + connect(connector); + closeWallet(); + } + + function getBrowser(): string | undefined { + const userAgent = navigator.userAgent; + if (userAgent.includes("Chrome")) { + return "chrome"; + } else if (userAgent.includes("Firefox")) { + return "firefox"; + } else { + return undefined; + } + } + return ( = ({

You need a Starknet wallet

- {connectors.map((connector) => { + {combinations[rand].map((index) => { + const connector = connectors[index]; + if (connector.available()) { + return ( +
+ +
+ ); + } else { + if (connector.id === "braavos" || connector.id === "argentX") { + return ( +
+ +
+ ); + } + } + })} + {/* {connectors.map((connector) => { if (connector.available()) { return (
@@ -62,7 +150,7 @@ const Wallets: FunctionComponent = ({
); } - })} + })} */}
); diff --git a/package.json b/package.json index 4684ce8e..5c3f36be 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "prettier": "prettier --write '**/*.{ts,tsx,css}'" }, "dependencies": { + "@argent/starknet-react-webwallet-connector": "^6.5.0", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.8.4", diff --git a/pages/_app.tsx b/pages/_app.tsx index 72146fd7..87d61f41 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -10,12 +10,19 @@ import { StarknetIdJsProvider } from "../context/StarknetIdJsProvider"; import { createTheme } from "@mui/material/styles"; import Footer from "../components/UI/footer"; import { QuestsContextProvider } from "../context/QuestsProvider"; +import { WebWalletConnector } from "@argent/starknet-react-webwallet-connector"; function MyApp({ Component, pageProps }: AppProps) { const connectors = useMemo( () => [ new InjectedConnector({ options: { id: "argentX" } }), new InjectedConnector({ options: { id: "braavos" } }), + new WebWalletConnector({ + url: + process.env.NEXT_PUBLIC_IS_TESTNET === "true" + ? "https://web.hydrogen.argent47.net" + : "https://web.argent.xyz/", + }), ], [] );