diff --git a/packages/frontend/src/components/projects/create/CheckBalanceIframe.tsx b/packages/frontend/src/components/projects/create/CheckBalanceIframe.tsx new file mode 100644 index 00000000..e9ae235e --- /dev/null +++ b/packages/frontend/src/components/projects/create/CheckBalanceIframe.tsx @@ -0,0 +1,23 @@ +import { Modal } from "@mui/material"; + +import { + VITE_WALLET_IFRAME_URL, +} from 'utils/constants'; + +const CheckBalanceIframe = ({ onLoad }: { onLoad: () => void }) => { + return ( + + - + + ); }; diff --git a/packages/frontend/src/pages/org-slug/index.tsx b/packages/frontend/src/pages/org-slug/index.tsx index 7e7905e6..cb620219 100644 --- a/packages/frontend/src/pages/org-slug/index.tsx +++ b/packages/frontend/src/pages/org-slug/index.tsx @@ -6,18 +6,19 @@ import { Heading, Badge, Button } from 'components/shared'; import { PlusIcon } from 'components/shared/CustomIcon'; import { useGQLClient } from 'context/GQLClientContext'; import { Project } from 'gql-client'; -import { - VITE_LACONICD_CHAIN_ID, - VITE_WALLET_IFRAME_URL, -} from 'utils/constants'; -import { Modal } from '@mui/material'; +import useCheckBalance from '../../hooks/useFetchBalance'; +import CheckBalanceIframe from 'components/projects/create/CheckBalanceIframe'; const Projects = () => { const navigate = useNavigate(); const client = useGQLClient(); const { orgSlug } = useParams(); const [projects, setProjects] = useState([]); - const [isSufficient, setIsSufficient] = useState(null); + + const { isBalanceSufficient, checkBalance } = useCheckBalance( + '1', + 'checkBalanceIframe' + ); const fetchProjects = useCallback(async () => { const { projectsInOrganization } = await client.getProjectsInOrganization( @@ -30,49 +31,11 @@ const Projects = () => { fetchProjects(); }, [orgSlug]); - const requestForBalance = useCallback(() => { - const iframe = document.getElementById( - 'requestForBalance', - ) as HTMLIFrameElement; - - if (!iframe.contentWindow) { - console.error('Iframe not found or not loaded'); - return; - } - - iframe.contentWindow.postMessage( - { - type: 'CHECK_BALANCE', - chainId: VITE_LACONICD_CHAIN_ID, - amount: 1, - }, - VITE_WALLET_IFRAME_URL, - ); - }, []); - useEffect(() => { - const handleMessage = async (event: MessageEvent) => { - if (event.origin !== VITE_WALLET_IFRAME_URL) return; - - if (event.data.type === 'IS_SUFFICIENT') { - setIsSufficient(event.data.data); - } else if (event.data.type === 'ERROR') { - console.error('Error from wallet:', event.data.message); - } - }; - - window.addEventListener('message', handleMessage); - - return () => { - window.removeEventListener('message', handleMessage); - }; - }, []); - - useEffect(() => { - if (isSufficient === false) { + if (isBalanceSufficient === false) { navigate('/buy-prepaid-service'); } - }, [isSufficient]); + }, [isBalanceSufficient]); return (
@@ -101,17 +64,7 @@ const Projects = () => { })} - - - +
); };