Refactor code for checking balance

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

@@ -1,27 +1,54 @@
-import { useEffect } from "react";
+import { useEffect } from 'react';
 
-import { Modal } from "@mui/material";
+import { Modal } from '@mui/material';
 
-import {
+import { VITE_WALLET_IFRAME_URL } from 'utils/constants';
-  VITE_WALLET_IFRAME_URL,
-} from 'utils/constants';
 import useCheckBalance from '../../../hooks/useCheckBalance';
 
-const CheckBalanceIframe = ({ setIsSufficient }: { setIsSufficient: (isSufficient: boolean | undefined) => void }) => {
+const CHECK_BALANCE_INTERVAL = 5000;
-  const { checkBalance, isBalanceSufficient } = useCheckBalance(
+const IFRAME_ID = 'checkBalanceIframe';
-    '1',
+
-    'checkBalanceIframe'
+const CheckBalanceIframe = ({
+  onBalanceChange,
+  isPollingEnabled,
+  amount,
+}: {
+  onBalanceChange: (value: boolean | undefined) => void;
+  isPollingEnabled: boolean;
+  amount: string;
+}) => {
+  const { isBalanceSufficient, checkBalance } = useCheckBalance(
+    amount,
+    IFRAME_ID,
   );
 
   useEffect(() => {
-    setIsSufficient(isBalanceSufficient);
+    checkBalance();
+  }, [amount, checkBalance]);
+
+  useEffect(() => {
+    if (!isPollingEnabled || isBalanceSufficient) {
+      return;
+    }
+
+    const interval = setInterval(() => {
+      checkBalance();
+    }, CHECK_BALANCE_INTERVAL);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [isBalanceSufficient, isPollingEnabled, checkBalance]);
+
+  useEffect(() => {
+    onBalanceChange(isBalanceSufficient);
   }, [isBalanceSufficient]);
 
   return (
     <Modal open={false} disableEscapeKeyDown keepMounted>
       <iframe
         onLoad={checkBalance}
-        id="checkBalanceIframe"
+        id={IFRAME_ID}
         src={VITE_WALLET_IFRAME_URL}
         width="100%"
         height="100%"

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

@@ -27,7 +27,7 @@ import {
   VITE_LACONICD_CHAIN_ID,
   VITE_WALLET_IFRAME_URL,
 } from 'utils/constants';
-import useCheckBalance from '../../../hooks/useCheckBalance';
+import CheckBalanceIframe from './CheckBalanceIframe';
 
 type ConfigureDeploymentFormValues = {
   option: string;
@@ -41,7 +41,6 @@ type ConfigureFormValues = ConfigureDeploymentFormValues &
 
 const DEFAULT_MAX_PRICE = '10000';
 const TX_APPROVAL_TIMEOUT_MS = 60000;
-const CHECK_BALANCE_INTERVAL = 5000;
 
 const Configure = () => {
   const [isLoading, setIsLoading] = useState(false);
@@ -53,6 +52,7 @@ const Configure = () => {
   const [isFrameVisible, setIsFrameVisible] = useState(false);
   const [isAccountsDataReceived, setIsAccountsDataReceived] = useState(false);
   const [balanceMessage, setBalanceMessage] = useState<string>();
+  const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>();
 
   const [searchParams] = useSearchParams();
   const templateId = searchParams.get('templateId');
@@ -94,6 +94,7 @@ const Configure = () => {
     if (selectedOption === 'LRN') {
       amount = selectedDeployer?.minimumPayment?.toString() ?? '0';
     } else {
+      // TODO: Use BigNumber
       amount = (selectedNumProviders * Number(selectedMaxPrice)).toString();
     }
 
@@ -105,11 +106,6 @@ const Configure = () => {
     selectedNumProviders,
   ]);
 
-  const { isBalanceSufficient, checkBalance } = useCheckBalance(
-    amountToBePaid,
-    'walletIframe',
-  );
-
   const createProject = async (
     data: FieldValues,
     envVariables: AddEnvironmentVariableInput[],
@@ -435,22 +431,6 @@ const Configure = () => {
     fetchDeployers();
   }, []);
 
-  useEffect(() => {
-    if (isAccountsDataReceived) {
-      checkBalance();
-
-      if (!isBalanceSufficient) {
-        const interval = setInterval(() => {
-          checkBalance();
-        }, CHECK_BALANCE_INTERVAL);
-
-        return () => {
-          clearInterval(interval);
-        };
-      }
-    }
-  }, [isAccountsDataReceived, isBalanceSufficient, checkBalance]);
-
   return (
     <div className="space-y-7 px-4 py-6">
       <div className="flex justify-between mb-6">
@@ -680,6 +660,7 @@ const Configure = () => {
           setIsDataReceived={setIsAccountsDataReceived}
           isVisible={isFrameVisible}
         />
+        <CheckBalanceIframe onBalanceChange={setIsBalanceSufficient} amount={amountToBePaid} isPollingEnabled={true}/>
       </div>
     </div>
   );

packages/frontend/src/pages/BuyPrepaidService.tsx

@@ -6,9 +6,10 @@ import { Button } from 'components/shared';
 import CheckBalanceIframe from 'components/projects/create/CheckBalanceIframe';
 
 const BuyPrepaidService = () => {
-  const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>();
   const navigate = useNavigate();
 
+  const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>();
+
   const isTabletView = useMediaQuery('(min-width: 720px)'); // md:
   const buttonSize = isTabletView ? { size: 'lg' as const } : {};
 
@@ -28,7 +29,7 @@ const BuyPrepaidService = () => {
         </Button>
       </div>
 
-      <CheckBalanceIframe setIsSufficient={setIsBalanceSufficient} />
+      <CheckBalanceIframe onBalanceChange={setIsBalanceSufficient} isPollingEnabled={false} amount='1'/>
     </div>
   );
 };

packages/frontend/src/pages/org-slug/index.tsx

@@ -10,11 +10,11 @@ import CheckBalanceIframe from 'components/projects/create/CheckBalanceIframe';
 
 const Projects = () => {
   const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>();
+  const [projects, setProjects] = useState<Project[]>([]);
 
   const navigate = useNavigate();
   const client = useGQLClient();
   const { orgSlug } = useParams();
-  const [projects, setProjects] = useState<Project[]>([]);
 
   const fetchProjects = useCallback(async () => {
     const { projectsInOrganization } = await client.getProjectsInOrganization(
@@ -60,7 +60,7 @@ const Projects = () => {
           })}
       </div>
 
-      <CheckBalanceIframe setIsSufficient={setIsBalanceSufficient} />
+      <CheckBalanceIframe onBalanceChange={setIsBalanceSufficient} isPollingEnabled={false} amount='1' />
     </section>
   );
 };