cerc-io/snowballtools-base
11
0
Fork 3
Code Issues 11 Pull Requests 3 Actions Packages Projects Releases Wiki Activity

Redirect users to appropriate pages based on balance

Browse Source
This commit is contained in:
Shreerang Kale 2025-02-10 16:47:25 +05:30
parent 46ae5f76b2
commit f0639e0ac0
4 changed files with 157 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/frontend/src/App.tsx
View File

@ -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() {

4
packages/frontend/src/pages/AuthPage.tsx
View File

@ -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 />
</div>
<AutoSignInIFrameModal />
</div>
</div>
);

84
packages/frontend/src/pages/BuyPrepaidService.tsx Normal file
View File

@ -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;

68
packages/frontend/src/pages/org-slug/index.tsx
View File

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