fix: update wallet implementation

lfglabs-dev · Aug 23, 2023 · 820b61c · 820b61c
1 parent 6c5d501
commit 820b61c
Showing 1 changed file with 28 additions and 23 deletions.
diff --git a/components/UI/wallets.tsx b/components/UI/wallets.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } 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";
@@ -15,23 +15,28 @@ const Wallets: FunctionComponent<WalletsProps> = ({
   closeWallet,
   hasWallet,
 }) => {
-  const { connect, connectors, refresh } = useConnectors();
+  const { connect, connectors } = useConnectors();
   const { account } = useAccount();
 
-  const myConnectors = useMemo(() => {
-    refresh();
-    return connectors;
-  }, [account]);
-
   useEffect(() => {
     if (account) {
       closeWallet();
     }
   }, [account, closeWallet]);
 
-  function connectWallet(connector: Connector): void {
-    connect(connector);
-    closeWallet();
+  function connectWallet(connector: Connector) {
+    try {
+      connect(connector);
+    } finally {
+      if (!connector.available() && !account) {
+        if (connector.id === "argentX")
+          window.open("https://www.argent.xyz/argent-x/");
+        else if (connector.id === "braavos")
+          window.open("https://braavos.app/download-braavos-wallet/");
+      } else {
+        closeWallet();
+      }
+    }
   }
 
   return (
@@ -59,19 +64,19 @@ const Wallets: FunctionComponent<WalletsProps> = ({
           </svg>
         </button>
         <p className={styles.menu_title}>You need a Starknet wallet</p>
-        {myConnectors.map((connector) => {
-          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} />
-                    {`Connect ${connector.name}`}
-                  </div>
-                </Button>
-              </div>
-            );
-          }
+        {connectors.map((connector) => {
+          // 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} />
+                  {`Connect ${connector.id}`}
+                </div>
+              </Button>
+            </div>
+          );
+          // }
         })}
       </div>
     </Modal>