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

Add custom hook to check balance details

Browse Source
This commit is contained in:
IshaVenikar 2025-02-11 11:02:24 +05:30
parent 383c00cc26
commit 61aa8cf473
8 changed files with 69 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/frontend/.env.example
View File

@ -14,5 +14,3 @@ VITE_TURNKEY_API_BASE_URL=
VITE_LACONICD_CHAIN_ID=
VITE_WALLET_IFRAME_URL=
VITE_AUTH_SECRET=

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

@ -27,6 +27,7 @@ import {
VITE_LACONICD_CHAIN_ID,
VITE_WALLET_IFRAME_URL,
} from 'utils/constants';
import useCheckBalance from '../../../hooks/useFetchBalance';
type ConfigureDeploymentFormValues = {
option: string;
@ -50,7 +51,6 @@ const Configure = () => {
const [isPaymentDone, setIsPaymentDone] = useState(false);
const [isFrameVisible, setIsFrameVisible] = useState(false);
const [isAccountsDataReceived, setIsAccountsDataReceived] = useState(false);
const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>();
const [searchParams] = useSearchParams();
const templateId = searchParams.get('templateId');
@ -86,6 +86,23 @@ const Configure = () => {
const isTabletView = useMediaQuery('(min-width: 720px)'); // md:
const buttonSize = isTabletView ? { size: 'lg' as const } : {};
const amountToBePaid = useMemo(() => {
let amount: string;
if (selectedOption === 'LRN') {
amount = selectedDeployer?.minimumPayment?.toString() ?? '0';
} else {
amount = (selectedNumProviders * Number(selectedMaxPrice)).toString();
}
return amount.replace(/\D/g, '');
}, [selectedOption, selectedDeployer?.minimumPayment, selectedMaxPrice, selectedNumProviders]);
const { isBalanceSufficient, checkBalance } = useCheckBalance(
amountToBePaid,
'walletIframe'
);
const createProject = async (
data: FieldValues,
envVariables: AddEnvironmentVariableInput[],
@ -293,7 +310,7 @@ const Configure = () => {
throw new Error(error);
}
},
[client, createProject, dismiss, toast],
[client, createProject, dismiss, toast, amountToBePaid],
);
const fetchDeployers = useCallback(async () => {
@ -404,58 +421,10 @@ const Configure = () => {
fetchDeployers();
}, []);
const checkBalance = async (
) => {
const iframe = document.getElementById('walletIframe') as HTMLIFrameElement;
if (!iframe.contentWindow) {
console.error('Iframe not found or not loaded');
throw new Error('Iframe not found or not loaded');
}
iframe.contentWindow.postMessage(
{
type: 'CHECK_BALANCE',
chainId: VITE_LACONICD_CHAIN_ID,
address: selectedAccount,
amount: amountToBePaid,
},
VITE_WALLET_IFRAME_URL,
);
};
const amountToBePaid = useMemo(() => {
let amount: string;
if (selectedOption === 'LRN') {
amount = selectedDeployer?.minimumPayment?.toString() ?? '0';
} else {
amount = (selectedNumProviders * Number(selectedMaxPrice)).toString();
}
return amount.replace(/\D/g, '');
}, [selectedOption, selectedDeployer?.minimumPayment, selectedMaxPrice, selectedNumProviders]);
useEffect(() => {
checkBalance();
}, [amountToBePaid, selectedAccount, selectedDeployer]);
useEffect(() => {
const handleMessage = (event: MessageEvent) => {
if (event.origin !== VITE_WALLET_IFRAME_URL) return;
if (event.data.type !== 'IS_SUFFICIENT') return;
setIsBalanceSufficient(event.data.data);
};
window.addEventListener('message', handleMessage);
return () => {
window.removeEventListener('message', handleMessage);
};
}, []);
return (
<div className="space-y-7 px-4 py-6">
<div className="flex justify-between mb-6">

3
packages/frontend/src/components/projects/create/IFrameModal.tsx
View File

@ -22,6 +22,9 @@ const IFrameModal = ({
if (event.data.type === 'WALLET_ACCOUNTS_DATA') {
setIsDataReceived(true);
if (event.data.data.length === 0) return;
setAccount(event.data.data[0].address);
} else if (event.data.type === 'ERROR') {
console.error('Error from wallet:', event.data.message);

3
packages/frontend/src/components/shared/auth/AutoSignInIFrameModal.tsx
View File

@ -5,7 +5,7 @@ import { useNavigate } from 'react-router-dom';
import { Box, Modal } from '@mui/material';
import { BASE_URL, VITE_AUTH_SECRET, VITE_WALLET_IFRAME_URL } from 'utils/constants';
import { BASE_URL, VITE_WALLET_IFRAME_URL } from 'utils/constants';
const axiosInstance = axios.create({
baseURL: BASE_URL,
@ -110,7 +110,6 @@ const AutoSignInIFrameModal = () => {
{
type: 'REQUEST_CREATE_OR_GET_ACCOUNTS',
chainId: '1',
secret: VITE_AUTH_SECRET,
},
VITE_WALLET_IFRAME_URL,
);

46
packages/frontend/src/hooks/useFetchBalance.tsx Normal file
View File

@ -0,0 +1,46 @@
import { useState, useEffect, useCallback } from 'react';
import { VITE_LACONICD_CHAIN_ID } from 'utils/constants';
const useCheckBalance = (amount: string, iframeId: string) => {
const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean | undefined>(undefined);
const chainId = VITE_LACONICD_CHAIN_ID;
const checkBalance = useCallback(() => {
const iframe = document.getElementById(iframeId) as HTMLIFrameElement;
if (!iframe || !iframe.contentWindow) {
console.error(`Iframe with ID "${iframeId}" not found or not loaded`);
return;
}
iframe.contentWindow.postMessage(
{
type: 'CHECK_BALANCE',
chainId,
amount,
},
import.meta.env.VITE_WALLET_IFRAME_URL
);
}, [iframeId, chainId, amount]);
useEffect(() => {
const handleMessage = (event: MessageEvent) => {
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);
};
window.addEventListener('message', handleMessage);
return () => {
window.removeEventListener('message', handleMessage);
};
}, []);
return { isBalanceSufficient, checkBalance };
};
export default useCheckBalance;

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

@ -5,7 +5,6 @@ import { useMediaQuery } from 'usehooks-ts';
import { Modal } from '@mui/material';
import {
VITE_AUTH_SECRET,
VITE_LACONICD_CHAIN_ID,
VITE_WALLET_IFRAME_URL,
} from 'utils/constants';
@ -32,7 +31,6 @@ const BuyPrepaidService = () => {
type: 'CHECK_BALANCE',
chainId: VITE_LACONICD_CHAIN_ID,
amount: 1,
secret: VITE_AUTH_SECRET,
},
VITE_WALLET_IFRAME_URL,
);

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

@ -7,7 +7,6 @@ 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';
@ -46,7 +45,6 @@ const Projects = () => {
type: 'CHECK_BALANCE',
chainId: VITE_LACONICD_CHAIN_ID,
amount: 1,
secret: VITE_AUTH_SECRET,
},
VITE_WALLET_IFRAME_URL,
);

1
packages/frontend/src/utils/constants.ts
View File

@ -12,4 +12,3 @@ export const VITE_BUGSNAG_API_KEY = import.meta.env.VITE_BUGSNAG_API_KEY;
export const VITE_LIT_RELAY_API_KEY = import.meta.env.VITE_LIT_RELAY_API_KEY;
export const VITE_LACONICD_CHAIN_ID = import.meta.env.VITE_LACONICD_CHAIN_ID;
export const VITE_WALLET_IFRAME_URL = import.meta.env.VITE_WALLET_IFRAME_URL;
export const VITE_AUTH_SECRET = import.meta.env.VITE_AUTH_SECRET;