Add custom hook to check balance details

packages/frontend/.env.example

@@ -14,5 +14,3 @@ VITE_TURNKEY_API_BASE_URL=
 
 VITE_LACONICD_CHAIN_ID=
 VITE_WALLET_IFRAME_URL=
-
-VITE_AUTH_SECRET=

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

@@ -27,6 +27,7 @@ import {
   VITE_LACONICD_CHAIN_ID,
   VITE_WALLET_IFRAME_URL,
 } from 'utils/constants';
+import useCheckBalance from '../../../hooks/useFetchBalance';
 
 type ConfigureDeploymentFormValues = {
   option: string;
@@ -50,7 +51,6 @@ const Configure = () => {
   const [isPaymentDone, setIsPaymentDone] = useState(false);
   const [isFrameVisible, setIsFrameVisible] = useState(false);
   const [isAccountsDataReceived, setIsAccountsDataReceived] = useState(false);
-  const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>();
 
   const [searchParams] = useSearchParams();
   const templateId = searchParams.get('templateId');
@@ -86,6 +86,23 @@ const Configure = () => {
   const isTabletView = useMediaQuery('(min-width: 720px)'); // md:
   const buttonSize = isTabletView ? { size: 'lg' as const } : {};
 
+  const amountToBePaid = useMemo(() => {
+    let amount: string;
+
+    if (selectedOption === 'LRN') {
+      amount = selectedDeployer?.minimumPayment?.toString() ?? '0';
+    } else {
+      amount = (selectedNumProviders * Number(selectedMaxPrice)).toString();
+    }
+
+    return amount.replace(/\D/g, '');
+  }, [selectedOption, selectedDeployer?.minimumPayment, selectedMaxPrice, selectedNumProviders]);
+
+  const { isBalanceSufficient, checkBalance } = useCheckBalance(
+    amountToBePaid,
+    'walletIframe'
+  );
+
   const createProject = async (
     data: FieldValues,
     envVariables: AddEnvironmentVariableInput[],
@@ -293,7 +310,7 @@ const Configure = () => {
         throw new Error(error);
       }
     },
-    [client, createProject, dismiss, toast],
+    [client, createProject, dismiss, toast, amountToBePaid],
   );
 
   const fetchDeployers = useCallback(async () => {
@@ -404,58 +421,10 @@ const Configure = () => {
     fetchDeployers();
   }, []);
 
-  const checkBalance = async (
-  ) => {
-    const iframe = document.getElementById('walletIframe') as HTMLIFrameElement;
-
-    if (!iframe.contentWindow) {
-      console.error('Iframe not found or not loaded');
-      throw new Error('Iframe not found or not loaded');
-    }
-
-    iframe.contentWindow.postMessage(
-      {
-        type: 'CHECK_BALANCE',
-        chainId: VITE_LACONICD_CHAIN_ID,
-        address: selectedAccount,
-        amount: amountToBePaid,
-      },
-      VITE_WALLET_IFRAME_URL,
-    );
-  };
-
-  const amountToBePaid = useMemo(() => {
-    let amount: string;
-
-    if (selectedOption === 'LRN') {
-      amount = selectedDeployer?.minimumPayment?.toString() ?? '0';
-    } else {
-      amount = (selectedNumProviders * Number(selectedMaxPrice)).toString();
-    }
-
-    return amount.replace(/\D/g, '');
-  }, [selectedOption, selectedDeployer?.minimumPayment, selectedMaxPrice, selectedNumProviders]);
-
   useEffect(() => {
     checkBalance();
   }, [amountToBePaid, selectedAccount, selectedDeployer]);
 
-  useEffect(() => {
-    const handleMessage = (event: MessageEvent) => {
-      if (event.origin !== VITE_WALLET_IFRAME_URL) return;
-
-      if (event.data.type !== 'IS_SUFFICIENT') return;
-
-      setIsBalanceSufficient(event.data.data);
-    };
-
-    window.addEventListener('message', handleMessage);
-
-    return () => {
-      window.removeEventListener('message', handleMessage);
-    };
-  }, []);
-
   return (
     <div className="space-y-7 px-4 py-6">
       <div className="flex justify-between mb-6">

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

@@ -22,6 +22,9 @@ const IFrameModal = ({
 
       if (event.data.type === 'WALLET_ACCOUNTS_DATA') {
         setIsDataReceived(true);
+
+        if (event.data.data.length === 0) return;
+
         setAccount(event.data.data[0].address);
       } else if (event.data.type === 'ERROR') {
         console.error('Error from wallet:', event.data.message);

packages/frontend/src/components/shared/auth/AutoSignInIFrameModal.tsx

@@ -5,7 +5,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { Box, Modal } from '@mui/material';
 
-import { BASE_URL, VITE_AUTH_SECRET, VITE_WALLET_IFRAME_URL } from 'utils/constants';
+import { BASE_URL, VITE_WALLET_IFRAME_URL } from 'utils/constants';
 
 const axiosInstance = axios.create({
   baseURL: BASE_URL,
@@ -110,7 +110,6 @@ const AutoSignInIFrameModal = () => {
       {
         type: 'REQUEST_CREATE_OR_GET_ACCOUNTS',
         chainId: '1',
-        secret: VITE_AUTH_SECRET,
       },
       VITE_WALLET_IFRAME_URL,
     );

packages/frontend/src/hooks/useFetchBalance.tsx

@@ -0,0 +1,46 @@
+import { useState, useEffect, useCallback } from 'react';
+
+import { VITE_LACONICD_CHAIN_ID } from 'utils/constants';
+
+const useCheckBalance = (amount: string, iframeId: string) => {
+  const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean | undefined>(undefined);
+
+  const chainId = VITE_LACONICD_CHAIN_ID;
+
+  const checkBalance = useCallback(() => {
+    const iframe = document.getElementById(iframeId) as HTMLIFrameElement;
+
+    if (!iframe || !iframe.contentWindow) {
+      console.error(`Iframe with ID "${iframeId}" not found or not loaded`);
+      return;
+    }
+
+    iframe.contentWindow.postMessage(
+      {
+        type: 'CHECK_BALANCE',
+        chainId,
+        amount,
+      },
+      import.meta.env.VITE_WALLET_IFRAME_URL
+    );
+  }, [iframeId, chainId, amount]);
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      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);
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, []);
+
+  return { isBalanceSufficient, checkBalance };
+};
+
+export default useCheckBalance;

packages/frontend/src/pages/BuyPrepaidService.tsx

@@ -5,7 +5,6 @@ import { useMediaQuery } from 'usehooks-ts';
 import { Modal } from '@mui/material';
 
 import {
-  VITE_AUTH_SECRET,
   VITE_LACONICD_CHAIN_ID,
   VITE_WALLET_IFRAME_URL,
 } from 'utils/constants';
@@ -32,7 +31,6 @@ const BuyPrepaidService = () => {
         type: 'CHECK_BALANCE',
         chainId: VITE_LACONICD_CHAIN_ID,
         amount: 1,
-        secret: VITE_AUTH_SECRET,
       },
       VITE_WALLET_IFRAME_URL,
     );

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

@@ -7,7 +7,6 @@ import { PlusIcon } from 'components/shared/CustomIcon';
 import { useGQLClient } from 'context/GQLClientContext';
 import { Project } from 'gql-client';
 import {
-  VITE_AUTH_SECRET,
   VITE_LACONICD_CHAIN_ID,
   VITE_WALLET_IFRAME_URL,
 } from 'utils/constants';
@@ -46,7 +45,6 @@ const Projects = () => {
         type: 'CHECK_BALANCE',
         chainId: VITE_LACONICD_CHAIN_ID,
         amount: 1,
-        secret: VITE_AUTH_SECRET,
       },
       VITE_WALLET_IFRAME_URL,
     );

packages/frontend/src/utils/constants.ts

@@ -12,4 +12,3 @@ export const VITE_BUGSNAG_API_KEY = import.meta.env.VITE_BUGSNAG_API_KEY;
 export const VITE_LIT_RELAY_API_KEY = import.meta.env.VITE_LIT_RELAY_API_KEY;
 export const VITE_LACONICD_CHAIN_ID = import.meta.env.VITE_LACONICD_CHAIN_ID;
 export const VITE_WALLET_IFRAME_URL = import.meta.env.VITE_WALLET_IFRAME_URL;
-export const VITE_AUTH_SECRET = import.meta.env.VITE_AUTH_SECRET;