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

Create separate IFrame component for checking balance

Browse Source
This commit is contained in:
IshaVenikar 2025-02-11 11:39:50 +05:30
parent 95fba98a23
commit 8e8aec1442
5 changed files with 49 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/frontend/src/components/projects/create/CheckBalanceIframe.tsx Normal file
View File

@ -0,0 +1,23 @@
import { Modal } from "@mui/material";
import {
VITE_WALLET_IFRAME_URL,
} from 'utils/constants';
const CheckBalanceIframe = ({ onLoad }: { onLoad: () => void }) => {
return (
<Modal open={false} disableEscapeKeyDown keepMounted>
<iframe
onLoad={onLoad}
id="checkBalanceIframe"
src={VITE_WALLET_IFRAME_URL}
width="100%"
height="100%"
sandbox="allow-scripts allow-same-origin"
className="border rounded-md shadow-sm"
/>
</Modal>
);
};
export default CheckBalanceIframe;

6
packages/frontend/src/components/projects/create/Configure.tsx
View File

@ -422,8 +422,10 @@ const Configure = () => {
}, []);
useEffect(() => {
checkBalance();
}, [amountToBePaid, selectedAccount, selectedDeployer]);
if(isAccountsDataReceived) {
checkBalance();
}
}, [amountToBePaid, selectedAccount, selectedDeployer, isAccountsDataReceived]);
return (
<div className="space-y-7 px-4 py-6">

1
packages/frontend/src/hooks/useFetchBalance.tsx
View File

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

69
packages/frontend/src/pages/BuyPrepaidService.tsx
View File

@ -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 (
<div className="dark:bg-background flex flex-col min-h-screen">
<div className="pb-12 relative z-10 flex-1 flex-center">
@ -68,17 +32,8 @@ const BuyPrepaidService = () => {
</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>
<CheckBalanceIframe onLoad={checkBalance} />
</div>
);
};

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

@ -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<Project[]>([]);
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 (
<section className="px-4 md:px-6 py-6 flex flex-col gap-6">
@ -101,17 +64,7 @@ const Projects = () => {
})}
</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>
<CheckBalanceIframe onLoad={checkBalance} />
</section>
);
};