Create separate IFrame component for checking balance

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

@@ -0,0 +1,23 @@
+import { Modal } from "@mui/material";
+
+import {
+  VITE_WALLET_IFRAME_URL,
+} from 'utils/constants';
+
+const CheckBalanceIframe = ({ onLoad }: { onLoad: () => void }) => {
+  return (
+    <Modal open={false} disableEscapeKeyDown keepMounted>
+      <iframe
+        onLoad={onLoad}
+        id="checkBalanceIframe"
+        src={VITE_WALLET_IFRAME_URL}
+        width="100%"
+        height="100%"
+        sandbox="allow-scripts allow-same-origin"
+        className="border rounded-md shadow-sm"
+      />
+    </Modal>
+  );
+};
+
+export default CheckBalanceIframe;

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

@@ -422,8 +422,10 @@ const Configure = () => {
   }, []);
 
   useEffect(() => {
-    checkBalance();
+    if(isAccountsDataReceived) {
-  }, [amountToBePaid, selectedAccount, selectedDeployer]);
+      checkBalance();
+    }
+  }, [amountToBePaid, selectedAccount, selectedDeployer, isAccountsDataReceived]);
 
   return (
     <div className="space-y-7 px-4 py-6">

packages/frontend/src/hooks/useFetchBalance.tsx

@@ -30,7 +30,6 @@ const useCheckBalance = (amount: string, iframeId: string) => {
       if (event.origin !== import.meta.env.VITE_WALLET_IFRAME_URL) return;
       if (event.data.type !== 'IS_SUFFICIENT') return;
 
-      console.log('suff', event.data.data)
       setIsBalanceSufficient(event.data.data);
     };
 

packages/frontend/src/pages/BuyPrepaidService.tsx

@@ -1,64 +1,28 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useMediaQuery } from 'usehooks-ts';
 
-import { Modal } from '@mui/material';
-
-import {
-  VITE_LACONICD_CHAIN_ID,
-  VITE_WALLET_IFRAME_URL,
-} from 'utils/constants';
 import { Button } from 'components/shared';
+import CheckBalanceIframe from 'components/projects/create/CheckBalanceIframe';
+import useCheckBalance from '../hooks/useFetchBalance';
 
 const BuyPrepaidService = () => {
-  const [isSufficient, setIsSufficient] = useState(null);
-
   const navigate = useNavigate();
 
   const isTabletView = useMediaQuery('(min-width: 720px)'); // md:
   const buttonSize = isTabletView ? { size: 'lg' as const } : {};
 
-  const requestForBalance = useCallback(() => {
+  const { isBalanceSufficient, checkBalance } = useCheckBalance(
-    const iframe = document.getElementById('checkBalance') as HTMLIFrameElement;
+    '1',
-
+    'checkBalanceIframe'
-    if (!iframe.contentWindow) {
+  );
-      console.error('Iframe not found or not loaded');
-      return;
-    }
-
-    iframe.contentWindow.postMessage(
-      {
-        type: 'CHECK_BALANCE',
-        chainId: VITE_LACONICD_CHAIN_ID,
-        amount: 1,
-      },
-      VITE_WALLET_IFRAME_URL,
-    );
-  }, []);
 
   useEffect(() => {
-    const handleMessage = async (event: MessageEvent) => {
+    if (isBalanceSufficient === true) {
-      if (event.origin !== VITE_WALLET_IFRAME_URL) return;
-
-      if (event.data.type === 'IS_SUFFICIENT') {
-        setIsSufficient(event.data.data);
-      } else if (event.data.type === 'ERROR') {
-        console.error('Error from wallet:', event.data.message);
-      }
-    };
-
-    window.addEventListener('message', handleMessage);
-
-    return () => {
-      window.removeEventListener('message', handleMessage);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (isSufficient === true) {
       navigate('/');
     }
-  }, [isSufficient]);
+  }, [isBalanceSufficient]);
+
   return (
     <div className="dark:bg-background flex flex-col min-h-screen">
       <div className="pb-12 relative z-10 flex-1 flex-center">
@@ -68,17 +32,8 @@ const BuyPrepaidService = () => {
           </a>
         </Button>
       </div>
-      <Modal open={false} disableEscapeKeyDown keepMounted>
+
-        <iframe
+      <CheckBalanceIframe onLoad={checkBalance} />
-          onLoad={requestForBalance}
-          id="checkBalance"
-          src={`${VITE_WALLET_IFRAME_URL}/auto-sign-in`}
-          width="100%"
-          height="100%"
-          sandbox="allow-scripts allow-same-origin"
-          className="border rounded-md shadow-sm"
-        ></iframe>
-      </Modal>
     </div>
   );
 };

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

@@ -6,18 +6,19 @@ import { Heading, Badge, Button } from 'components/shared';
 import { PlusIcon } from 'components/shared/CustomIcon';
 import { useGQLClient } from 'context/GQLClientContext';
 import { Project } from 'gql-client';
-import {
+import useCheckBalance from '../../hooks/useFetchBalance';
-  VITE_LACONICD_CHAIN_ID,
+import CheckBalanceIframe from 'components/projects/create/CheckBalanceIframe';
-  VITE_WALLET_IFRAME_URL,
-} from 'utils/constants';
-import { Modal } from '@mui/material';
 
 const Projects = () => {
   const navigate = useNavigate();
   const client = useGQLClient();
   const { orgSlug } = useParams();
   const [projects, setProjects] = useState<Project[]>([]);
-  const [isSufficient, setIsSufficient] = useState(null);
+
+  const { isBalanceSufficient, checkBalance } = useCheckBalance(
+    '1',
+    'checkBalanceIframe'
+  );
 
   const fetchProjects = useCallback(async () => {
     const { projectsInOrganization } = await client.getProjectsInOrganization(
@@ -30,49 +31,11 @@ const Projects = () => {
     fetchProjects();
   }, [orgSlug]);
 
-  const requestForBalance = useCallback(() => {
-    const iframe = document.getElementById(
-      'requestForBalance',
-    ) as HTMLIFrameElement;
-
-    if (!iframe.contentWindow) {
-      console.error('Iframe not found or not loaded');
-      return;
-    }
-
-    iframe.contentWindow.postMessage(
-      {
-        type: 'CHECK_BALANCE',
-        chainId: VITE_LACONICD_CHAIN_ID,
-        amount: 1,
-      },
-      VITE_WALLET_IFRAME_URL,
-    );
-  }, []);
-
   useEffect(() => {
-    const handleMessage = async (event: MessageEvent) => {
+    if (isBalanceSufficient === false) {
-      if (event.origin !== VITE_WALLET_IFRAME_URL) return;
-
-      if (event.data.type === 'IS_SUFFICIENT') {
-        setIsSufficient(event.data.data);
-      } else if (event.data.type === 'ERROR') {
-        console.error('Error from wallet:', event.data.message);
-      }
-    };
-
-    window.addEventListener('message', handleMessage);
-
-    return () => {
-      window.removeEventListener('message', handleMessage);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (isSufficient === false) {
       navigate('/buy-prepaid-service');
     }
-  }, [isSufficient]);
+  }, [isBalanceSufficient]);
 
   return (
     <section className="px-4 md:px-6 py-6 flex flex-col gap-6">
@@ -101,17 +64,7 @@ const Projects = () => {
           })}
       </div>
 
-      <Modal open={false} disableEscapeKeyDown keepMounted>
+      <CheckBalanceIframe onLoad={checkBalance} />
-        <iframe
-          onLoad={requestForBalance}
-          id="requestForBalance"
-          src={`${VITE_WALLET_IFRAME_URL}/auto-sign-in`}
-          width="100%"
-          height="100%"
-          sandbox="allow-scripts allow-same-origin"
-          className="border rounded-md shadow-sm"
-        ></iframe>
-      </Modal>
     </section>
   );
 };