Check balance after loading iframe

packages/frontend/src/components/projects/create/CheckBalanceIframe.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import { Modal } from '@mui/material';
 
@@ -22,12 +22,17 @@ const CheckBalanceIframe = ({
     IFRAME_ID,
   );
 
-  useEffect(() => {
-    checkBalance();
-  }, [amount, checkBalance]);
+  const [isLoaded, setIsLoaded] = useState(false);
 
   useEffect(() => {
-    if (!isPollingEnabled || isBalanceSufficient) {
+    if (!isLoaded) {
+      return;
+    }
+    checkBalance();
+  }, [amount, checkBalance, isLoaded]);
+
+  useEffect(() => {
+    if (!isPollingEnabled || !isLoaded || isBalanceSufficient) {
       return;
     }
 
@@ -38,7 +43,7 @@ const CheckBalanceIframe = ({
     return () => {
       clearInterval(interval);
     };
-  }, [isBalanceSufficient, isPollingEnabled, checkBalance]);
+  }, [isBalanceSufficient, isPollingEnabled, checkBalance, isLoaded]);
 
   useEffect(() => {
     onBalanceChange(isBalanceSufficient);
@@ -47,7 +52,7 @@ const CheckBalanceIframe = ({
   return (
     <Modal open={false} disableEscapeKeyDown keepMounted>
       <iframe
-        onLoad={checkBalance}
+        onLoad={() => setIsLoaded(true)}
         id={IFRAME_ID}
         src={VITE_WALLET_IFRAME_URL}
         width="100%"

packages/frontend/src/components/projects/create/Configure.tsx

@@ -95,6 +95,9 @@ const Configure = () => {
     if (selectedOption === 'LRN') {
       amount = selectedDeployer?.minimumPayment?.toString() ?? '0';
     } else {
+      if (!selectedNumProviders) {
+        return '';
+      }
       const bigMaxPrice = BigNumber.from(selectedMaxPrice);
       amount = bigMaxPrice.mul(selectedNumProviders).toString();
     }
@@ -433,7 +436,7 @@ const Configure = () => {
   }, []);
 
   useEffect(() => {
-    if(isBalanceSufficient) {
+    if (isBalanceSufficient) {
       setBalanceMessage(undefined);
     }
   }, [isBalanceSufficient]);
@@ -635,7 +638,11 @@ const Configure = () => {
                         onClick={(e: any) => {
                           e.preventDefault();
                           setBalanceMessage('Waiting for payment');
-                          window.open('https://store.laconic.com', '_blank', 'noopener,noreferrer');
+                          window.open(
+                            'https://store.laconic.com',
+                            '_blank',
+                            'noopener,noreferrer',
+                          );
                         }}
                       >
                         Buy prepaid service
@@ -665,7 +672,11 @@ const Configure = () => {
           setIsDataReceived={setIsAccountsDataReceived}
           isVisible={isFrameVisible}
         />
-        <CheckBalanceIframe onBalanceChange={setIsBalanceSufficient} amount={amountToBePaid} isPollingEnabled={true} />
+        <CheckBalanceIframe
+          onBalanceChange={setIsBalanceSufficient}
+          amount={amountToBePaid}
+          isPollingEnabled={true}
+        />
       </div>
     </div>
   );