fix: ordering wallet & move functions to utils

components/UI/wallets.tsx

@@ -1,11 +1,12 @@
-import React, { useMemo, useState } from "react";
+import React from "react";
 import styles from "../../styles/components/wallets.module.css";
 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;
@@ -18,64 +19,21 @@ const Wallets: FunctionComponent<WalletsProps> = ({
 }) => {
   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), []);
+  const downloadLinks = useGetDiscoveryWallets(
+    getDiscoveryWallets.getDiscoveryWallets()
+  );
 
   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
@@ -101,8 +59,7 @@ const Wallets: FunctionComponent<WalletsProps> = ({
           </svg>
         </button>
         <p className={styles.menu_title}>You need a Starknet wallet</p>
-        {combinations[rand].map((index) => {
-          const connector = connectors[index];
+        {connectors.map((connector) => {
           if (connector.available()) {
             return (
               <div className="mt-5 flex justify-center" key={connector.id}>
@@ -123,7 +80,11 @@ const Wallets: FunctionComponent<WalletsProps> = ({
                   <Button
                     onClick={() =>
                       window.open(
-                        `${connector.id === "braavos" ? braavos : argent}`
+                        `${
+                          downloadLinks[
+                            connector.id as keyof typeof downloadLinks
+                          ]
+                        }`
                       )
                     }
                   >
@@ -137,20 +98,6 @@ const Wallets: FunctionComponent<WalletsProps> = ({
             }
           }
         })}
-        {/* {connectors.map((connector) => {
-          if (connector.available()) {
-            return (
-              <div className="mt-5 flex justify-center" key={connector.id}>
-                <Button onClick={() => connect(connector)}>
-                  <div className="flex justify-center items-center">
-                    <WalletIcons id={connector.id} />
-                    {`Connect ${connector.name}`}
-                  </div>
-                </Button>
-              </div>
-            );
-          }
-        })} */}
       </div>
     </Modal>
   );

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 };
+}

pages/_app.tsx

@@ -15,8 +15,8 @@ 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"

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;
+  }
+}