MEP 12/10/2023 (#239)

* feat: add web wallet * fix: ordering wallet & move functions to utils * test: browserService * feat: add quiz imgs * fix: task opens on click verify button * fix: connectors as any (#240) --------- Co-authored-by: nicolasito1411 <[email protected]> Co-authored-by: Fricoben <[email protected]>
lfglabs-dev · Oct 12, 2023 · 07f65b2 · 07f65b2 · vercel · Oct 12, 2023
1 parent 4a21aa4
commit 07f65b2
Show file tree

Hide file tree

Showing 12 changed files with 152 additions and 13 deletions.
diff --git a/components/UI/modalWallet.tsx b/components/UI/modalWallet.tsx
@@ -34,6 +34,8 @@ const ModalWallet: FunctionComponent<ModalWalletProps> = ({
   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<ModalWalletProps> = ({
             title="Copy Address"
             width="auto"
           />
+          {isWebWallet && (
+            <ClickableAction
+              onClick={() =>
+                window.open(
+                  network === "mainnet"
+                    ? "https://web.argent.xyz"
+                    : "https://web.hydrogen.argent47.net",
+                  "_blank",
+                  "noopener noreferrer"
+                )
+              }
+              icon={<ArgentIcon color={"#f36a3d"} width={"25px"} />}
+              title="Web wallet Dashboard"
+              width="auto"
+            />
+          )}
         </div>
         <div className={styles.menu_txs}>
           <div className={styles.tx_title}>My transactions</div>

diff --git a/components/UI/navbar.tsx b/components/UI/navbar.tsx
@@ -34,7 +34,8 @@ const Navbar: FunctionComponent = () => {
   const [isConnected, setIsConnected] = useState<boolean>(false);
   const [isWrongNetwork, setIsWrongNetwork] = useState(false);
   const [txLoading, setTxLoading] = useState<number>(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
@@ -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,15 +17,23 @@ const Wallets: FunctionComponent<WalletsProps> = ({
   closeWallet,
   hasWallet,
 }) => {
-  const { connect, connectors, refresh } = useConnectors();
+  const { connect, connectors } = useConnectors();
   const { account } = useAccount();
+  const downloadLinks = useGetDiscoveryWallets(
+    getDiscoveryWallets.getDiscoveryWallets()
+  );
 
   useEffect(() => {
     if (account) {
       closeWallet();
     }
   }, [account, closeWallet]);
 
+  function connectWallet(connector: Connector): void {
+    connect(connector);
+    closeWallet();
+  }
+
   return (
     <Modal
       disableAutoFocus
@@ -53,14 +63,39 @@ const Wallets: FunctionComponent<WalletsProps> = ({
           if (connector.available()) {
             return (
               <div className="mt-5 flex justify-center" key={connector.id}>
-                <Button onClick={() => connect(connector)}>
+                <Button onClick={() => connectWallet(connector)}>
                   <div className="flex justify-center items-center">
                     <WalletIcons id={connector.id} />
-                    {`Connect ${connector.name}`}
+                    {connector.id === "braavos" || connector.id === "argentX"
+                      ? `Connect ${connector.name}`
+                      : "Login with Email"}
                   </div>
                 </Button>
               </div>
             );
+          } else {
+            if (connector.id === "braavos" || connector.id === "argentX") {
+              return (
+                <div className="mt-5 flex justify-center" key={connector.id}>
+                  <Button
+                    onClick={() =>
+                      window.open(
+                        `${
+                          downloadLinks[
+                            connector.id as keyof typeof downloadLinks
+                          ]
+                        }`
+                      )
+                    }
+                  >
+                    <div className="flex justify-center items-center">
+                      <WalletIcons id={connector.id} />
+                      Install {connector.id}
+                    </div>
+                  </Button>
+                </div>
+              );
+            }
           }
         })}
       </div>

diff --git a/components/quests/task.tsx b/components/quests/task.tsx
@@ -49,9 +49,8 @@ const Task: FunctionComponent<Task> = ({
   };
 
   // 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<Task> = ({
         ) : (
           <div
             onClick={(e) => {
+              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
@@ -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<WalletProvider[]>
+) {
+  const [argentX, setArgentX] = useState<string>("");
+  const [braavos, setBraavos] = useState<string>("");
+
+  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
@@ -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
@@ -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 (
-    <StarknetConfig connectors={connectors} autoConnect>
+    <StarknetConfig connectors={connectors as any} autoConnect>
       <StarknetIdJsProvider>
         <ThemeProvider theme={theme}>
           <Head>

diff --git a/public/starknet/aa.webp b/public/starknet/aa.webp
diff --git a/public/starknet/favicon.ico b/public/starknet/favicon.ico
diff --git a/public/starknet/gigabrain.webp b/public/starknet/gigabrain.webp
diff --git a/tests/utils/browserService.test.js 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
@@ -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;
+  }
+}