Display message if funds are insufficient

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

@@ -1,4 +1,4 @@
-import { useCallback, useState, useEffect } from 'react';
+import { useCallback, useState, useEffect, useMemo } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { FormProvider, FieldValues } from 'react-hook-form';
 import { useNavigate, useSearchParams } from 'react-router-dom';
@@ -10,7 +10,6 @@ import {
 } from 'gql-client';
 
 import { Select, MenuItem, FormControl, FormHelperText } from '@mui/material';
-import { Spinner } from '@snowballtools/material-tailwind-react-fork';
 
 import {
   ArrowRightCircleFilledIcon,
@@ -51,6 +50,7 @@ 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');
@@ -80,6 +80,8 @@ const Configure = () => {
   });
 
   const selectedOption = methods.watch('option');
+  const selectedNumProviders = methods.watch('numProviders') ?? 1;
+  const selectedMaxPrice = methods.watch('maxPrice') ?? DEFAULT_MAX_PRICE;
 
   const isTabletView = useMediaQuery('(min-width: 720px)'); // md:
   const buttonSize = isTabletView ? { size: 'lg' as const } : {};
@@ -185,7 +187,6 @@ const Configure = () => {
           (deployer) => deployer.deployerLrn === deployerLrn,
         );
 
-        let amount: string;
         let senderAddress: string;
         let txHash: string | null = null;
         if (createFormData.option === 'LRN' && !deployer?.minimumPayment) {
@@ -203,16 +204,6 @@ const Configure = () => {
 
           senderAddress = selectedAccount;
 
-          if (createFormData.option === 'LRN') {
-            amount = deployer?.minimumPayment!;
-          } else {
-            amount = (
-              createFormData.numProviders * createFormData.maxPrice
-            ).toString();
-          }
-
-          const amountToBePaid = amount.replace(/\D/g, '').toString();
-
           txHash = await cosmosSendTokensHandler(senderAddress, amountToBePaid);
 
           if (!txHash) {
@@ -413,6 +404,58 @@ 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">
@@ -575,12 +618,13 @@ const Configure = () => {
               </div>
             ) : (
               <>
-                <div className="p-6 bg-slate-100 dark:bg-overlay3 rounded-lg mb-6 shadow-md">
+                {isAccountsDataReceived && isBalanceSufficient !== undefined ? (
-                  {isAccountsDataReceived ? (
+                  (!selectedAccount || !isBalanceSufficient) ? (
-                    !selectedAccount && (
+                    <div className="p-6 bg-slate-100 dark:bg-overlay3 rounded-lg mb-6 shadow-md">
                       <div className="text-center">
                         <p className="text-gray-700 dark:text-gray-300 mb-4">
-                          No accounts found. Please visit{' '}
+                          {!selectedAccount ? 'No accounts found.' : 'Insufficient funds.'}
+                          {' '}Please visit{' '}
                           <a
                             href="https://store.laconic.com"
                             target="_blank"
@@ -592,13 +636,9 @@ const Configure = () => {
                           to create a wallet.
                         </p>
                       </div>
-                    )
-                  ) : (
-                    <div className="flex items-center justify-center h-12">
-                      <Spinner className="h-6 w-6" />
                     </div>
-                  )}
+                  ) : null
-                </div>
+                ) : null}
                 {selectedAccount && (
                   <div>
                     <Button
@@ -606,7 +646,7 @@ const Configure = () => {
                       type="submit"
                       shape="default"
                       disabled={
-                        isLoading || isPaymentLoading || !selectedAccount
+                        isLoading || isPaymentLoading || !selectedAccount || !isBalanceSufficient
                       }
                       rightIcon={
                         isLoading || isPaymentLoading ? (

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

@@ -20,8 +20,8 @@ const IFrameModal = ({
     const handleMessage = (event: MessageEvent) => {
       if (event.origin !== VITE_WALLET_IFRAME_URL) return;
 
-      setIsDataReceived(true);
       if (event.data.type === 'WALLET_ACCOUNTS_DATA') {
+        setIsDataReceived(true);
         setAccount(event.data.data[0]);
       } else if (event.data.type === 'ERROR') {
         console.error('Error from wallet:', event.data.message);