diff --git a/packages/frontend/src/components/projects/create/CheckBalanceIframe.tsx b/packages/frontend/src/components/projects/create/CheckBalanceIframe.tsx index 6bd63ff8..54daa5db 100644 --- a/packages/frontend/src/components/projects/create/CheckBalanceIframe.tsx +++ b/packages/frontend/src/components/projects/create/CheckBalanceIframe.tsx @@ -1,27 +1,54 @@ -import { useEffect } from "react"; +import { useEffect } from 'react'; -import { Modal } from "@mui/material"; +import { Modal } from '@mui/material'; -import { - VITE_WALLET_IFRAME_URL, -} from 'utils/constants'; +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' +const CHECK_BALANCE_INTERVAL = 5000; +const IFRAME_ID = 'checkBalanceIframe'; + +const CheckBalanceIframe = ({ + onBalanceChange, + isPollingEnabled, + amount, +}: { + onBalanceChange: (value: boolean | undefined) => void; + isPollingEnabled: boolean; + amount: string; +}) => { + const { isBalanceSufficient, checkBalance } = useCheckBalance( + amount, + IFRAME_ID, ); useEffect(() => { - setIsSufficient(isBalanceSufficient); + checkBalance(); + }, [amount, checkBalance]); + + useEffect(() => { + if (!isPollingEnabled || isBalanceSufficient) { + return; + } + + const interval = setInterval(() => { + checkBalance(); + }, CHECK_BALANCE_INTERVAL); + + return () => { + clearInterval(interval); + }; + }, [isBalanceSufficient, isPollingEnabled, checkBalance]); + + useEffect(() => { + onBalanceChange(isBalanceSufficient); }, [isBalanceSufficient]); return (