diff --git a/packages/frontend/src/components/projects/create/Configure.tsx b/packages/frontend/src/components/projects/create/Configure.tsx index 63937f43..9611a89f 100644 --- a/packages/frontend/src/components/projects/create/Configure.tsx +++ b/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(); 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 (
@@ -575,12 +618,13 @@ const Configure = () => {
) : ( <> -
- {isAccountsDataReceived ? ( - !selectedAccount && ( + {isAccountsDataReceived && isBalanceSufficient !== undefined ? ( + (!selectedAccount || !isBalanceSufficient) ? ( +

- No accounts found. Please visit{' '} + {!selectedAccount ? 'No accounts found.' : 'Insufficient funds.'} + {' '}Please visit{' '} { to create a wallet.

- ) - ) : ( -
-
- )} -
+ ) : null + ) : null} {selectedAccount && (