Redirect users to appropriate pages based on balance

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: <AuthPage />,
   },
+  {
+    path: '/buy-prepaid-service',
+    element: <BuyPrepaidService />,
+  },
 ]);
 
 function App() {

packages/frontend/src/pages/AuthPage.tsx

@@ -13,9 +13,7 @@ const AuthPage = () => {
         </div>
       </div>
       <div className="pb-12 relative z-10 flex-1 flex-center">
-        <div className="max-w-[520px] w-full dark:bg-overlay bg-white rounded-xl shadow">
+        <AutoSignInIFrameModal />
-          <AutoSignInIFrameModal />
-        </div>
       </div>
     </div>
   );

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 (
+    <div className="dark:bg-background flex flex-col min-h-screen">
+      <div className="pb-12 relative z-10 flex-1 flex-center">
+        <Button>
+          <a href="https://store.laconic.com" target="_blank">
+            Buy prepaid service
+          </a>
+        </Button>
+      </div>
+      <Modal open={false} disableEscapeKeyDown keepMounted>
+        <iframe
+          onLoad={requestForBalance}
+          id="checkBalance"
+          src={`${VITE_WALLET_IFRAME_URL}/auto-sign-in`}
+          width="100%"
+          height="100%"
+          sandbox="allow-scripts allow-same-origin"
+          className="border rounded-md shadow-sm"
+        ></iframe>
+      </Modal>
+    </div>
+  );
+};
+
+export default BuyPrepaidService;

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<Project[]>([]);
+  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 (
     <section className="px-4 md:px-6 py-6 flex flex-col gap-6">
       {/* Header */}
@@ -49,6 +103,18 @@ const Projects = () => {
             return <ProjectCard project={project} key={key} />;
           })}
       </div>
+
+      <Modal open={false} disableEscapeKeyDown keepMounted>
+        <iframe
+          onLoad={requestForBalance}
+          id="requestForBalance"
+          src={`${VITE_WALLET_IFRAME_URL}/auto-sign-in`}
+          width="100%"
+          height="100%"
+          sandbox="allow-scripts allow-same-origin"
+          className="border rounded-md shadow-sm"
+        ></iframe>
+      </Modal>
     </section>
   );
 };