feat: add web wallet

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>

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 ? (

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,15 +16,66 @@ const Wallets: FunctionComponent<WalletsProps> = ({
   closeWallet,
   hasWallet,
 }) => {
-  const { connect, connectors, refresh } = useConnectors();
+  const { connect, connectors } = useConnectors();
   const { account } = useAccount();
+  const [argent, setArgent] = useState<string>("");
+  const [braavos, setBraavos] = useState<string>("");
+  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) {
       closeWallet();
     }
   }, [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 (
     <Modal
       disableAutoFocus
@@ -49,7 +101,43 @@ const Wallets: FunctionComponent<WalletsProps> = ({
           </svg>
         </button>
         <p className={styles.menu_title}>You need a Starknet wallet</p>
-        {connectors.map((connector) => {
+        {combinations[rand].map((index) => {
+          const connector = connectors[index];
+          if (connector.available()) {
+            return (
+              <div className="mt-5 flex justify-center" key={connector.id}>
+                <Button onClick={() => connectWallet(connector)}>
+                  <div className="flex justify-center items-center">
+                    <WalletIcons id={connector.id} />
+                    {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(
+                        `${connector.id === "braavos" ? braavos : argent}`
+                      )
+                    }
+                  >
+                    <div className="flex justify-center items-center">
+                      <WalletIcons id={connector.id} />
+                      Install {connector.id}
+                    </div>
+                  </Button>
+                </div>
+              );
+            }
+          }
+        })}
+        {/* {connectors.map((connector) => {
           if (connector.available()) {
             return (
               <div className="mt-5 flex justify-center" key={connector.id}>
@@ -62,7 +150,7 @@ const Wallets: FunctionComponent<WalletsProps> = ({
               </div>
             );
           }
-        })}
+        })} */}
       </div>
     </Modal>
   );

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",

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/",
+      }),
     ],
     []
   );