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..46b8f63e 100644 --- a/components/UI/wallets.tsx +++ b/components/UI/wallets.tsx @@ -1,10 +1,12 @@ import React 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"; +import useGetDiscoveryWallets from "../../hooks/useGetDiscoveryWallets"; type WalletsProps = { closeWallet: () => void; @@ -15,8 +17,11 @@ const Wallets: FunctionComponent = ({ closeWallet, hasWallet, }) => { - const { connect, connectors, refresh } = useConnectors(); + const { connect, connectors } = useConnectors(); const { account } = useAccount(); + const downloadLinks = useGetDiscoveryWallets( + getDiscoveryWallets.getDiscoveryWallets() + ); useEffect(() => { if (account) { @@ -24,6 +29,11 @@ const Wallets: FunctionComponent = ({ } }, [account, closeWallet]); + function connectWallet(connector: Connector): void { + connect(connector); + closeWallet(); + } + return ( = ({ if (connector.available()) { return (
-
); + } else { + if (connector.id === "braavos" || connector.id === "argentX") { + return ( +
+ +
+ ); + } } })}
diff --git a/components/quests/task.tsx b/components/quests/task.tsx index 368e09e6..4da9885e 100644 --- a/components/quests/task.tsx +++ b/components/quests/task.tsx @@ -49,9 +49,8 @@ const Task: FunctionComponent = ({ }; // A verify function that setIsVerified(true) and stop propagation - const verify = async (e?: React.MouseEvent) => { + const verify = async () => { checkCanDoTask(); - if (e) e.stopPropagation(); setIsLoading(true); if (verifyEndpointType.startsWith("oauth")) { @@ -159,11 +158,12 @@ const Task: FunctionComponent = ({ ) : (
{ + e.stopPropagation(); if (!address) return setError("Please connect your wallet first"); if (!hasRootDomain) return setShowDomainPopup(true); if (verifyEndpointType === "quiz") return openTask(); if (verifyRedirect) window.open(verifyRedirect); - verify(e); + verify(); }} className={styles.verifyButton} > diff --git a/hooks/useGetDiscoveryWallets.ts b/hooks/useGetDiscoveryWallets.ts new file mode 100644 index 00000000..efb26b47 --- /dev/null +++ b/hooks/useGetDiscoveryWallets.ts @@ -0,0 +1,36 @@ +import { useEffect, useState } from "react"; +import { WalletProvider } from "get-starknet-core"; +import { getBrowser } from "../utils/browserService"; + +export default function useGetDiscoveryWallets( + getDiscoveryWallets: Promise +) { + const [argentX, setArgentX] = useState(""); + const [braavos, setBraavos] = useState(""); + + useEffect(() => { + if (typeof navigator !== "undefined") { + getDiscoveryWallets.then((wallets) => { + const browser = getBrowser(navigator.userAgent); + + wallets.map((wallet) => { + if (wallet.id === "argentX") { + setArgentX( + 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/" + ); + } + }); + }); + } + }, [getDiscoveryWallets]); + + return { argentX, braavos }; +} 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..94131e33 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 InjectedConnector({ options: { id: "argentX" } }), + new WebWalletConnector({ + url: + process.env.NEXT_PUBLIC_IS_TESTNET === "true" + ? "https://web.hydrogen.argent47.net" + : "https://web.argent.xyz/", + }), ], [] ); @@ -37,7 +44,7 @@ function MyApp({ Component, pageProps }: AppProps) { }); return ( - + diff --git a/public/starknet/aa.webp b/public/starknet/aa.webp new file mode 100644 index 00000000..3623217d Binary files /dev/null and b/public/starknet/aa.webp differ diff --git a/public/starknet/favicon.ico b/public/starknet/favicon.ico new file mode 100644 index 00000000..e0d6c00c Binary files /dev/null and b/public/starknet/favicon.ico differ diff --git a/public/starknet/gigabrain.webp b/public/starknet/gigabrain.webp new file mode 100644 index 00000000..b266a11f Binary files /dev/null and b/public/starknet/gigabrain.webp differ diff --git a/tests/utils/browserService.test.js b/tests/utils/browserService.test.js new file mode 100644 index 00000000..a90fc2b4 --- /dev/null +++ b/tests/utils/browserService.test.js @@ -0,0 +1,28 @@ +import { + getBrowser, +} from "../../utils/browserService"; + +describe("Should test getBrowser function", () => { + it("Should return Chrome", () => { + expect( + getBrowser( + "userAgent Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36" + ) + ).toEqual( + "chrome" + ); + }); + + it("Should return firefox", () => { + expect( + getBrowser( + "userAgent Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/116.0" + ) + ).toEqual("firefox"); + }); + + it("Should return an undefined if it's another browser or an empty string", () => { + expect(getBrowser("Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.2 Safari/605.1.15")).toEqual(undefined); + expect(getBrowser("")).toEqual(undefined); + }); +}); diff --git a/utils/browserService.ts b/utils/browserService.ts new file mode 100644 index 00000000..26f451ca --- /dev/null +++ b/utils/browserService.ts @@ -0,0 +1,9 @@ +export function getBrowser(userAgent: string): string | undefined { + if (userAgent.includes("Chrome")) { + return "chrome"; + } else if (userAgent.includes("Firefox")) { + return "firefox"; + } else { + return undefined; + } +}