fix: refreshing in wallet component

lfglabs-dev · Aug 23, 2023 · 6c5d501 · 6c5d501
1 parent 4b09b3f
commit 6c5d501
Showing 1 changed file with 20 additions and 15 deletions.
diff --git a/components/UI/wallets.tsx b/components/UI/wallets.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import styles from "../../styles/components/wallets.module.css";
 import { Connector, useAccount, useConnectors } from "@starknet-react/core";
 import Button from "./button";
@@ -15,9 +15,14 @@ const Wallets: FunctionComponent<WalletsProps> = ({
   closeWallet,
   hasWallet,
 }) => {
-  const { connect, connectors } = useConnectors();
+  const { connect, connectors, refresh } = useConnectors();
   const { account } = useAccount();
 
+  const myConnectors = useMemo(() => {
+    refresh();
+    return connectors;
+  }, [account]);
+
   useEffect(() => {
     if (account) {
       closeWallet();
@@ -54,19 +59,19 @@ const Wallets: FunctionComponent<WalletsProps> = ({
           </svg>
         </button>
         <p className={styles.menu_title}>You need a Starknet wallet</p>
-        {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.name}`}
-                </div>
-              </Button>
-            </div>
-          );
-          // }
+        {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>
+            );
+          }
         })}
       </div>
     </Modal>