diff --git a/packages/frontend/src/components/projects/create/Configure.tsx b/packages/frontend/src/components/projects/create/Configure.tsx index 76848d8c..ffccfc4c 100644 --- a/packages/frontend/src/components/projects/create/Configure.tsx +++ b/packages/frontend/src/components/projects/create/Configure.tsx @@ -98,11 +98,16 @@ const Configure = () => { } return amount.replace(/\D/g, ''); - }, [selectedOption, selectedDeployer?.minimumPayment, selectedMaxPrice, selectedNumProviders]); + }, [ + selectedOption, + selectedDeployer?.minimumPayment, + selectedMaxPrice, + selectedNumProviders, + ]); const { isBalanceSufficient, checkBalance } = useCheckBalance( amountToBePaid, - 'walletIframe' + 'walletIframe', ); const createProject = async ( @@ -288,19 +293,19 @@ const Configure = () => { if (templateId) { createFormData.option === 'Auction' ? navigate( - `/${orgSlug}/projects/create/success/${projectId}?isAuction=true`, - ) + `/${orgSlug}/projects/create/success/${projectId}?isAuction=true`, + ) : navigate( - `/${orgSlug}/projects/create/template/deploy?projectId=${projectId}&templateId=${templateId}`, - ); + `/${orgSlug}/projects/create/template/deploy?projectId=${projectId}&templateId=${templateId}`, + ); } else { createFormData.option === 'Auction' ? navigate( - `/${orgSlug}/projects/create/success/${projectId}?isAuction=true`, - ) + `/${orgSlug}/projects/create/success/${projectId}?isAuction=true`, + ) : navigate( - `/${orgSlug}/projects/create/deploy?projectId=${projectId}`, - ); + `/${orgSlug}/projects/create/deploy?projectId=${projectId}`, + ); } } catch (error: any) { toast({ @@ -345,12 +350,20 @@ const Configure = () => { await requestTx(senderAddress, snowballAddress, amount); const txHash = await new Promise((resolve, reject) => { + // Call cleanup method only if appropriate event type is recieved + const cleanup = () => { + setIsFrameVisible(false); + window.removeEventListener('message', handleTxStatus); + }; + const handleTxStatus = async (event: MessageEvent) => { if (event.origin !== VITE_WALLET_IFRAME_URL) return; if (event.data.type === 'TRANSACTION_RESPONSE') { const txResponse = event.data.data; resolve(txResponse); + + cleanup(); } else if (event.data.type === 'ERROR') { console.error('Error from wallet:', event.data.message); reject(new Error('Transaction failed')); @@ -360,10 +373,9 @@ const Configure = () => { variant: 'error', onDismiss: dismiss, }); - } - setIsFrameVisible(false); - window.removeEventListener('message', handleTxStatus); + cleanup(); + } }; window.addEventListener('message', handleTxStatus); @@ -424,7 +436,7 @@ const Configure = () => { }, []); useEffect(() => { - if (isAccountsDataReceived) { + if (isAccountsDataReceived && !isBalanceSufficient) { checkBalance(); const interval = setInterval(() => { @@ -435,7 +447,12 @@ const Configure = () => { clearInterval(interval); }; } - }, [amountToBePaid, selectedAccount, selectedDeployer, isAccountsDataReceived]); + }, [ + amountToBePaid, + selectedAccount, + selectedDeployer, + isAccountsDataReceived, + ]); return (
@@ -604,7 +621,10 @@ const Configure = () => { type="submit" shape="default" disabled={ - isLoading || isPaymentLoading || !selectedAccount || !isBalanceSufficient + isLoading || + isPaymentLoading || + !selectedAccount || + !isBalanceSufficient } rightIcon={ isLoading || isPaymentLoading ? ( @@ -624,10 +644,13 @@ const Configure = () => { {isAccountsDataReceived && isBalanceSufficient !== undefined ? ( - (!selectedAccount || !isBalanceSufficient) ? ( + !selectedAccount || !isBalanceSufficient ? (
- -
- ) : !selectedAccount ? 'No accounts found. Create a wallet.' : 'Insufficient funds.'} + ) : !selectedAccount ? ( + 'No accounts found. Create a wallet.' + ) : ( + 'Insufficient funds.' + )}

) : null