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 ; })} + + + +
); };