fix: loading import account sismo connect flow (#59)

Author: gabin54

src/hooks/vault/index.tsx

@@ -188,7 +188,6 @@ export default function SismoVaultProvider({
       console.log("No vault synchronizer");
       return;
     }
-    console.log("Sync vaults");
     vaultSynchronizer
       .sync(vaultState.connectedOwner, vaultState.connectedOwner)
       .then(async (res) => {
@@ -216,9 +215,9 @@ export default function SismoVaultProvider({
     return await vaultClient.create();
   };
 
-  const getVaultSecret = async (): Promise<string> => {
+  const getVaultSecret = useCallback(async (): Promise<string> => {
     return await vaultClient.getVaultSecret();
-  };
+  }, [vaultClient]);
 
   const getVaultId = async ({
     appId,

src/pages/Connect/Flow/DataRequests/index.tsx

@@ -99,7 +99,7 @@ export default function DataRequests({
   const [loadingEligible, setLoadingEligible] = useState(true);
   const { getClaimRequestEligibilities, getAuthRequestEligibilities } =
     useSismo();
-  const vault = useVault();
+  const { importedAccounts, getVaultSecret } = useVault();
 
   /* ************************************************************* */
   /* ********************* SET DEFAULT VALUE ********************* */
@@ -203,7 +203,7 @@ export default function DataRequests({
       return;
     }
 
-    if (!vault) return;
+    if (!importedAccounts || !getVaultSecret) return;
     if (claims && !requestGroupsMetadata) return;
 
     const getEligibilities = async () => {
@@ -214,7 +214,7 @@ export default function DataRequests({
         if (auths?.length) {
           const _authRequestEligibilities = await getAuthRequestEligibilities(
             sismoConnectRequest,
-            vault?.importedAccounts || []
+            importedAccounts || []
           );
           setAuthRequestEligibilities(_authRequestEligibilities);
           _selectedSismoConnectRequest = getSelectedSismoConnectRequest({
@@ -224,14 +224,14 @@ export default function DataRequests({
           onSelectedSismoRequest(_selectedSismoConnectRequest);
         }
         if (claims?.length) {
-          const vaultSecret = await vault.getVaultSecret();
+          const vaultSecret = await getVaultSecret();
           const groupsMetadata = requestGroupsMetadata.map(
             (el) => el.groupMetadata
           );
           const identifiers = await getAllVaultIdentifiers(
             groupsMetadata,
             vaultSecret,
-            vault.importedAccounts
+            importedAccounts
           );
           const _claimRequestEligibilities = await getClaimRequestEligibilities(
             sismoConnectRequest,
@@ -253,7 +253,8 @@ export default function DataRequests({
     };
     getEligibilities();
   }, [
-    vault,
+    importedAccounts,
+    getVaultSecret,
     getClaimRequestEligibilities,
     getAuthRequestEligibilities,
     requestGroupsMetadata,

src/pages/Connect/Flow/index.tsx

@@ -21,6 +21,7 @@ import DataRequests from "./DataRequests";
 import ProofModal from "./components/ProofModal";
 import { SignatureRequest } from "./components/SignatureRequest";
 import SignInButton from "../../../components/SignInButton";
+import { useImportAccount } from "../../Modals/ImportAccount/provider";
 
 const Container = styled.div`
   position: relative;
@@ -169,6 +170,7 @@ export default function ConnectFlow({
   const [isEligible, setIsEligible] = useState(false);
   const [selectedSismoConnectRequest, setSelectedSismoConnectRequest] =
     useState<SelectedSismoConnectRequest | null>(null);
+  const importAccount = useImportAccount();
 
   const { getRegistryTreeRoot, generateResponse } = useSismo();
   const vault = useVault();
@@ -319,7 +321,7 @@ export default function ConnectFlow({
               style={{ width: 252 }}
               onClick={() => generate()}
               loading={loadingProof}
-              disabled={!isEligible}
+              disabled={!isEligible || Boolean(importAccount.importing)}
             >
               Generate ZK proof
             </Button>