From 61aa8cf473d16520fa53f304a607cc38f92436c5 Mon Sep 17 00:00:00 2001 From: IshaVenikar Date: Tue, 11 Feb 2025 11:02:24 +0530 Subject: [PATCH] Add custom hook to check balance details --- packages/frontend/.env.example | 2 - .../components/projects/create/Configure.tsx | 69 +++++-------------- .../projects/create/IFrameModal.tsx | 3 + .../shared/auth/AutoSignInIFrameModal.tsx | 3 +- .../frontend/src/hooks/useFetchBalance.tsx | 46 +++++++++++++ .../frontend/src/pages/BuyPrepaidService.tsx | 2 - .../frontend/src/pages/org-slug/index.tsx | 2 - packages/frontend/src/utils/constants.ts | 1 - 8 files changed, 69 insertions(+), 59 deletions(-) create mode 100644 packages/frontend/src/hooks/useFetchBalance.tsx diff --git a/packages/frontend/.env.example b/packages/frontend/.env.example index 301c7899..b634634b 100644 --- a/packages/frontend/.env.example +++ b/packages/frontend/.env.example @@ -14,5 +14,3 @@ VITE_TURNKEY_API_BASE_URL= VITE_LACONICD_CHAIN_ID= VITE_WALLET_IFRAME_URL= - -VITE_AUTH_SECRET= diff --git a/packages/frontend/src/components/projects/create/Configure.tsx b/packages/frontend/src/components/projects/create/Configure.tsx index af7ef08b..626a949f 100644 --- a/packages/frontend/src/components/projects/create/Configure.tsx +++ b/packages/frontend/src/components/projects/create/Configure.tsx @@ -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(); 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 (
diff --git a/packages/frontend/src/components/projects/create/IFrameModal.tsx b/packages/frontend/src/components/projects/create/IFrameModal.tsx index abbabb6e..c939c551 100644 --- a/packages/frontend/src/components/projects/create/IFrameModal.tsx +++ b/packages/frontend/src/components/projects/create/IFrameModal.tsx @@ -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); diff --git a/packages/frontend/src/components/shared/auth/AutoSignInIFrameModal.tsx b/packages/frontend/src/components/shared/auth/AutoSignInIFrameModal.tsx index 65c0bc04..b917bfdb 100644 --- a/packages/frontend/src/components/shared/auth/AutoSignInIFrameModal.tsx +++ b/packages/frontend/src/components/shared/auth/AutoSignInIFrameModal.tsx @@ -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, ); diff --git a/packages/frontend/src/hooks/useFetchBalance.tsx b/packages/frontend/src/hooks/useFetchBalance.tsx new file mode 100644 index 00000000..e3838027 --- /dev/null +++ b/packages/frontend/src/hooks/useFetchBalance.tsx @@ -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(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; diff --git a/packages/frontend/src/pages/BuyPrepaidService.tsx b/packages/frontend/src/pages/BuyPrepaidService.tsx index fece8472..b738aecf 100644 --- a/packages/frontend/src/pages/BuyPrepaidService.tsx +++ b/packages/frontend/src/pages/BuyPrepaidService.tsx @@ -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, ); diff --git a/packages/frontend/src/pages/org-slug/index.tsx b/packages/frontend/src/pages/org-slug/index.tsx index 69ef28c0..7e7905e6 100644 --- a/packages/frontend/src/pages/org-slug/index.tsx +++ b/packages/frontend/src/pages/org-slug/index.tsx @@ -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, ); diff --git a/packages/frontend/src/utils/constants.ts b/packages/frontend/src/utils/constants.ts index a9d22362..f9135880 100644 --- a/packages/frontend/src/utils/constants.ts +++ b/packages/frontend/src/utils/constants.ts @@ -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;