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 (
+
+
+
+ );
+};
+
+export default CheckBalanceIframe;
diff --git a/packages/frontend/src/components/projects/create/Configure.tsx b/packages/frontend/src/components/projects/create/Configure.tsx
index 626a949f..a8bc348b 100644
--- a/packages/frontend/src/components/projects/create/Configure.tsx
+++ b/packages/frontend/src/components/projects/create/Configure.tsx
@@ -422,8 +422,10 @@ const Configure = () => {
}, []);
useEffect(() => {
- checkBalance();
- }, [amountToBePaid, selectedAccount, selectedDeployer]);
+ if(isAccountsDataReceived) {
+ checkBalance();
+ }
+ }, [amountToBePaid, selectedAccount, selectedDeployer, isAccountsDataReceived]);
return (
diff --git a/packages/frontend/src/hooks/useFetchBalance.tsx b/packages/frontend/src/hooks/useFetchBalance.tsx
index e3838027..f1a3418a 100644
--- a/packages/frontend/src/hooks/useFetchBalance.tsx
+++ b/packages/frontend/src/hooks/useFetchBalance.tsx
@@ -30,7 +30,6 @@ const useCheckBalance = (amount: string, iframeId: string) => {
if (event.origin !== import.meta.env.VITE_WALLET_IFRAME_URL) return;
if (event.data.type !== 'IS_SUFFICIENT') return;
- console.log('suff', event.data.data)
setIsBalanceSufficient(event.data.data);
};
diff --git a/packages/frontend/src/pages/BuyPrepaidService.tsx b/packages/frontend/src/pages/BuyPrepaidService.tsx
index b738aecf..a09a7792 100644
--- a/packages/frontend/src/pages/BuyPrepaidService.tsx
+++ b/packages/frontend/src/pages/BuyPrepaidService.tsx
@@ -1,64 +1,28 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useMediaQuery } from 'usehooks-ts';
-import { Modal } from '@mui/material';
-
-import {
- VITE_LACONICD_CHAIN_ID,
- VITE_WALLET_IFRAME_URL,
-} from 'utils/constants';
import { Button } from 'components/shared';
+import CheckBalanceIframe from 'components/projects/create/CheckBalanceIframe';
+import useCheckBalance from '../hooks/useFetchBalance';
const BuyPrepaidService = () => {
- const [isSufficient, setIsSufficient] = useState(null);
-
const navigate = useNavigate();
const isTabletView = useMediaQuery('(min-width: 720px)'); // md:
const buttonSize = isTabletView ? { size: 'lg' as const } : {};
- const requestForBalance = useCallback(() => {
- const iframe = document.getElementById('checkBalance') 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,
- );
- }, []);
+ const { isBalanceSufficient, checkBalance } = useCheckBalance(
+ '1',
+ 'checkBalanceIframe'
+ );
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 === true) {
+ if (isBalanceSufficient === true) {
navigate('/');
}
- }, [isSufficient]);
+ }, [isBalanceSufficient]);
+
return (
@@ -68,17 +32,8 @@ const BuyPrepaidService = () => {
-
-
-
+
+
);
};
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 = () => {
})}
-