diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
index 8d75fb12..389702f3 100644
--- a/packages/frontend/src/App.tsx
+++ b/packages/frontend/src/App.tsx
@@ -12,6 +12,7 @@ import Index from './pages';
import AuthPage from './pages/AuthPage';
import { DashboardLayout } from './pages/org-slug/layout';
import { BASE_URL } from 'utils/constants';
+import BuyPrepaidService from './pages/BuyPrepaidService';
const router = createBrowserRouter([
{
@@ -49,6 +50,10 @@ const router = createBrowserRouter([
path: '/login',
element: ,
},
+ {
+ path: '/buy-prepaid-service',
+ element: ,
+ },
]);
function App() {
diff --git a/packages/frontend/src/pages/AuthPage.tsx b/packages/frontend/src/pages/AuthPage.tsx
index 4733c86c..4a3cda6b 100644
--- a/packages/frontend/src/pages/AuthPage.tsx
+++ b/packages/frontend/src/pages/AuthPage.tsx
@@ -13,9 +13,7 @@ const AuthPage = () => {
);
diff --git a/packages/frontend/src/pages/BuyPrepaidService.tsx b/packages/frontend/src/pages/BuyPrepaidService.tsx
new file mode 100644
index 00000000..26b38179
--- /dev/null
+++ b/packages/frontend/src/pages/BuyPrepaidService.tsx
@@ -0,0 +1,84 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { Modal } from '@mui/material';
+import { Button } from '@snowballtools/material-tailwind-react-fork';
+
+import { VITE_AUTH_SECRET, VITE_LACONICD_CHAIN_ID, VITE_WALLET_IFRAME_URL } from 'utils/constants';
+
+const BuyPrepaidService = () => {
+ const [isSufficient, setIsSufficient] = useState(null);
+
+ const navigate = useNavigate();
+
+ 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,
+ secret: VITE_AUTH_SECRET,
+ },
+ VITE_WALLET_IFRAME_URL,
+ );
+ }, []);
+
+ useEffect(() => {
+ const handleMessage = async (event: MessageEvent) => {
+ if (event.origin !== VITE_WALLET_IFRAME_URL) return;
+
+ if (event.data.type === 'IS_SUFFICIENT') {
+ console.log("event.data.data", event.data.data)
+ 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) {
+ navigate('/');
+ }
+
+ }, [isSufficient]);
+ return (
+
+ );
+};
+
+export default BuyPrepaidService;
diff --git a/packages/frontend/src/pages/org-slug/index.tsx b/packages/frontend/src/pages/org-slug/index.tsx
index a7125b79..65903797 100644
--- a/packages/frontend/src/pages/org-slug/index.tsx
+++ b/packages/frontend/src/pages/org-slug/index.tsx
@@ -1,16 +1,24 @@
import { useCallback, useEffect, useState } from 'react';
-import { Link, useParams } from 'react-router-dom';
+import { Link, useNavigate, useParams } from 'react-router-dom';
import { ProjectCard } from 'components/projects/ProjectCard';
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_AUTH_SECRET,
+ VITE_LACONICD_CHAIN_ID,
+ VITE_WALLET_IFRAME_URL,
+} from 'utils/constants';
+import { Modal } from '@mui/material';
const Projects = () => {
+ const navigate = useNavigate();
const client = useGQLClient();
const { orgSlug } = useParams();
const [projects, setProjects] = useState([]);
+ const [isSufficient, setIsSufficient] = useState(null);
const fetchProjects = useCallback(async () => {
const { projectsInOrganization } = await client.getProjectsInOrganization(
@@ -23,6 +31,52 @@ 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,
+ secret: VITE_AUTH_SECRET,
+ },
+ VITE_WALLET_IFRAME_URL,
+ );
+ }, []);
+
+ useEffect(() => {
+ const handleMessage = async (event: MessageEvent) => {
+ if (event.origin !== VITE_WALLET_IFRAME_URL) return;
+
+ if (event.data.type === 'IS_SUFFICIENT') {
+ console.log("event.data.data", event.data.data)
+ 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) {
+ navigate('/buy-prepaid-service');
+ }
+ }, [isSufficient]);
+
return (
{/* Header */}
@@ -49,6 +103,18 @@ const Projects = () => {
return ;
})}
+
+
+
+
);
};