Keep common hook for checking balance in IFrame component

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

@@ -7,7 +7,7 @@ import {
   VITE_WALLET_IFRAME_URL,
 } from 'utils/constants';
 
-const IFrameModal = ({
+const ApproveTransactionModal = ({
   setAccount,
   setIsDataReceived,
   isVisible,
@@ -29,7 +29,9 @@ const IFrameModal = ({
         }
 
         setAccount(event.data.data[0].address);
-      } else if (event.data.type === 'ERROR') {
+      }
+
+      if (event.data.type === 'ERROR') {
         console.error('Error from wallet:', event.data.message);
       }
     };
@@ -91,4 +93,4 @@ const IFrameModal = ({
   );
 };
 
-export default IFrameModal;
+export default ApproveTransactionModal;

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

@@ -1,14 +1,26 @@
+import { useEffect } from "react";
+
 import { Modal } from "@mui/material";
 
 import {
   VITE_WALLET_IFRAME_URL,
 } from 'utils/constants';
+import useCheckBalance from '../../../hooks/useCheckBalance';
+
+const CheckBalanceIframe = ({ setIsSufficient }: { setIsSufficient: (isSufficient: boolean | undefined) => void }) => {
+  const { checkBalance, isBalanceSufficient } = useCheckBalance(
+    '1',
+    'checkBalanceIframe'
+  );
+
+  useEffect(() => {
+    setIsSufficient(isBalanceSufficient);
+  }, [isBalanceSufficient]);
 
-const CheckBalanceIframe = ({ onLoad }: { onLoad: () => void }) => {
   return (
     <Modal open={false} disableEscapeKeyDown keepMounted>
       <iframe
-        onLoad={onLoad}
+        onLoad={checkBalance}
         id="checkBalanceIframe"
         src={VITE_WALLET_IFRAME_URL}
         width="100%"

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

@@ -20,7 +20,7 @@ import { Button } from '../../shared/Button';
 import { Input } from 'components/shared/Input';
 import { useToast } from 'components/shared/Toast';
 import { useGQLClient } from '../../../context/GQLClientContext';
-import IFrameModal from './IFrameModal';
+import ApproveTransactionModal from './ApproveTransactionModal';
 import EnvironmentVariablesForm from 'pages/org-slug/projects/id/settings/EnvironmentVariablesForm';
 import { EnvironmentVariablesFormValues } from 'types/types';
 import {
@@ -642,7 +642,6 @@ const Configure = () => {
                       ? 'Deploying'
                       : 'Deploy'}
                 </Button>
-
                 {isAccountsDataReceived && isBalanceSufficient !== undefined ? (
                   !selectedAccount || !isBalanceSufficient ? (
                     <div className="flex items-center gap-4">
@@ -679,7 +678,7 @@ const Configure = () => {
           </form>
         </FormProvider>
 
-        <IFrameModal
+        <ApproveTransactionModal
           setAccount={setSelectedAccount}
           setIsDataReceived={setIsAccountsDataReceived}
           isVisible={isFrameVisible}

packages/frontend/src/pages/BuyPrepaidService.tsx

@@ -1,22 +1,17 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useMediaQuery } from 'usehooks-ts';
 
 import { Button } from 'components/shared';
 import CheckBalanceIframe from 'components/projects/create/CheckBalanceIframe';
-import useCheckBalance from '../hooks/useCheckBalance';
 
 const BuyPrepaidService = () => {
+  const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>();
   const navigate = useNavigate();
 
   const isTabletView = useMediaQuery('(min-width: 720px)'); // md:
   const buttonSize = isTabletView ? { size: 'lg' as const } : {};
 
-  const { isBalanceSufficient, checkBalance } = useCheckBalance(
-    '1',
-    'checkBalanceIframe'
-  );
-
   useEffect(() => {
     if (isBalanceSufficient === true) {
       navigate('/');
@@ -33,7 +28,7 @@ const BuyPrepaidService = () => {
         </Button>
       </div>
 
-      <CheckBalanceIframe onLoad={checkBalance} />
+      <CheckBalanceIframe setIsSufficient={setIsBalanceSufficient} />
     </div>
   );
 };

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

@@ -6,20 +6,16 @@ import { Heading, Badge, Button } from 'components/shared';
 import { PlusIcon } from 'components/shared/CustomIcon';
 import { useGQLClient } from 'context/GQLClientContext';
 import { Project } from 'gql-client';
-import useCheckBalance from '../../hooks/useCheckBalance';
 import CheckBalanceIframe from 'components/projects/create/CheckBalanceIframe';
 
 const Projects = () => {
+  const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>();
+
   const navigate = useNavigate();
   const client = useGQLClient();
   const { orgSlug } = useParams();
   const [projects, setProjects] = useState<Project[]>([]);
 
-  const { isBalanceSufficient, checkBalance } = useCheckBalance(
-    '1',
-    'checkBalanceIframe'
-  );
-
   const fetchProjects = useCallback(async () => {
     const { projectsInOrganization } = await client.getProjectsInOrganization(
       orgSlug!,
@@ -64,7 +60,7 @@ const Projects = () => {
           })}
       </div>
 
-      <CheckBalanceIframe onLoad={checkBalance} />
+      <CheckBalanceIframe setIsSufficient={setIsBalanceSufficient} />
     </section>
   );
 };