diff --git a/packages/frontend/src/components/projects/create/AccountsDropdown.tsx b/packages/frontend/src/components/projects/create/AccountsDropdown.tsx index 95b1451b..4ef0a61f 100644 --- a/packages/frontend/src/components/projects/create/AccountsDropdown.tsx +++ b/packages/frontend/src/components/projects/create/AccountsDropdown.tsx @@ -1,4 +1,8 @@ -import { Select, Option, Spinner } from '@snowballtools/material-tailwind-react-fork'; +import { + Select, + Option, + Spinner, +} from '@snowballtools/material-tailwind-react-fork'; const AccountsDropdown = ({ accounts, diff --git a/packages/frontend/src/components/projects/create/Configure.tsx b/packages/frontend/src/components/projects/create/Configure.tsx index 3aab266d..f2e8c3b4 100644 --- a/packages/frontend/src/components/projects/create/Configure.tsx +++ b/packages/frontend/src/components/projects/create/Configure.tsx @@ -23,7 +23,10 @@ import { useGQLClient } from '../../../context/GQLClientContext'; import IFrameModal from './IFrameModal'; import EnvironmentVariablesForm from 'pages/org-slug/projects/id/settings/EnvironmentVariablesForm'; import { EnvironmentVariablesFormValues } from 'types/types'; -import { VITE_LACONICD_CHAIN_ID, VITE_WALLET_IFRAME_URL } from 'utils/constants'; +import { + VITE_LACONICD_CHAIN_ID, + VITE_WALLET_IFRAME_URL, +} from 'utils/constants'; import AccountsDropdown from './AccountsDropdown'; type ConfigureDeploymentFormValues = { @@ -211,10 +214,7 @@ const Configure = () => { const amountToBePaid = amount.replace(/\D/g, '').toString(); - txHash = await cosmosSendTokensHandler( - senderAddress, - amountToBePaid, - ); + txHash = await cosmosSendTokensHandler(senderAddress, amountToBePaid); if (!txHash) { toast({ @@ -228,11 +228,8 @@ const Configure = () => { } // Validate transaction hash - const isTxHashValid = await verifyTx( - senderAddress, - txHash, - amount, - ); + const isTxHashValid = await verifyTx(senderAddress, txHash, amount); + setIsPaymentLoading(false); if (isTxHashValid) { toast({ @@ -277,19 +274,19 @@ const Configure = () => { if (templateId) { createFormData.option === 'Auction' ? navigate( - `/${orgSlug}/projects/create/success/${projectId}?isAuction=true`, - ) + `/${orgSlug}/projects/create/success/${projectId}?isAuction=true`, + ) : navigate( - `/${orgSlug}/projects/create/template/deploy?projectId=${projectId}&templateId=${templateId}`, - ); + `/${orgSlug}/projects/create/template/deploy?projectId=${projectId}&templateId=${templateId}`, + ); } else { createFormData.option === 'Auction' ? navigate( - `/${orgSlug}/projects/create/success/${projectId}?isAuction=true`, - ) + `/${orgSlug}/projects/create/success/${projectId}?isAuction=true`, + ) : navigate( - `/${orgSlug}/projects/create/deploy?projectId=${projectId}`, - ); + `/${orgSlug}/projects/create/deploy?projectId=${projectId}`, + ); } } catch (error) { toast({ @@ -382,14 +379,17 @@ const Configure = () => { console.error('Error in transaction:', error); throw new Error('Error in transaction'); } finally { - setIsPaymentLoading(false); clearTimeout(timeoutId); } }, [client, dismiss, toast], ); - const requestTx = async (sender: string, recipient: string, amount: string,) => { + const requestTx = async ( + sender: string, + recipient: string, + amount: string, + ) => { const iframe = document.getElementById('walletIframe') as HTMLIFrameElement; if (!iframe.contentWindow) { @@ -405,7 +405,7 @@ const Configure = () => { toAddress: recipient, amount, }, - VITE_WALLET_IFRAME_URL + VITE_WALLET_IFRAME_URL, ); setIsFrameVisible(true); @@ -577,7 +577,11 @@ const Configure = () => { ) : ( <> - + { : 'Pay and Deploy' : isLoading ? 'Deploying' - : 'Deploy' - } + : 'Deploy'} )} diff --git a/packages/frontend/src/components/projects/create/IFrameModal.tsx b/packages/frontend/src/components/projects/create/IFrameModal.tsx index f9f00915..25cecc30 100644 --- a/packages/frontend/src/components/projects/create/IFrameModal.tsx +++ b/packages/frontend/src/components/projects/create/IFrameModal.tsx @@ -2,7 +2,10 @@ import { useCallback, useEffect } from 'react'; import { Box, Modal } from '@mui/material'; -import { VITE_LACONICD_CHAIN_ID, VITE_WALLET_IFRAME_URL } from 'utils/constants'; +import { + VITE_LACONICD_CHAIN_ID, + VITE_WALLET_IFRAME_URL, +} from 'utils/constants'; const IFrameModal = ({ setAccounts, @@ -48,7 +51,7 @@ const IFrameModal = ({ type: 'REQUEST_WALLET_ACCOUNTS', chainId: VITE_LACONICD_CHAIN_ID, }, - VITE_WALLET_IFRAME_URL + VITE_WALLET_IFRAME_URL, ); }, []); @@ -82,7 +85,7 @@ const IFrameModal = ({ > - ) + ); }; export default IFrameModal; diff --git a/packages/frontend/src/components/shared/CustomIcon/templates/TemplateIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/templates/TemplateIcon.tsx index 43879fcf..9cf799c2 100644 --- a/packages/frontend/src/components/shared/CustomIcon/templates/TemplateIcon.tsx +++ b/packages/frontend/src/components/shared/CustomIcon/templates/TemplateIcon.tsx @@ -4,10 +4,7 @@ import { cloneIcon } from 'utils/cloneIcon'; import { PWAIcon } from './PWAIcon'; import { WebAppIcon } from './WebAppIcon'; -const TEMPLATE_ICONS = [ - 'pwa', - 'web' -] as const; +const TEMPLATE_ICONS = ['pwa', 'web'] as const; export type TemplateIconType = (typeof TEMPLATE_ICONS)[number]; export interface TemplateIconProps extends CustomIconProps { diff --git a/packages/frontend/src/pages/org-slug/projects/Id.tsx b/packages/frontend/src/pages/org-slug/projects/Id.tsx index 9abce252..fd8ce0e7 100644 --- a/packages/frontend/src/pages/org-slug/projects/Id.tsx +++ b/packages/frontend/src/pages/org-slug/projects/Id.tsx @@ -60,9 +60,9 @@ const Id = () => { fetchProject(id); }, [id]); - const onUpdate = async () => { + const onUpdate = useCallback(async () => { await fetchProject(id); - }; + }, [fetchProject, id]); return (
diff --git a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx index a129250f..84b1e9fd 100644 --- a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx +++ b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { Link, useNavigate, useOutletContext } from 'react-router-dom'; import { RequestError } from 'octokit'; @@ -24,6 +24,7 @@ import { Domain, DomainStatus } from 'gql-client'; import { AuctionCard } from 'components/projects/project/overview/Activity/AuctionCard'; const COMMITS_PER_PAGE = 4; +const WAIT_DURATION = 5000; const OverviewTabPanel = () => { const { octokit } = useOctokit(); @@ -33,8 +34,7 @@ const OverviewTabPanel = () => { const [liveDomain, setLiveDomain] = useState(); const client = useGQLClient(); - - const { project } = useOutletContext(); + const { project, onUpdate } = useOutletContext(); useEffect(() => { setFetchingActivities(true); @@ -96,7 +96,20 @@ const OverviewTabPanel = () => { }; fetchRepoActivity(); - }, [octokit, project]); + }, []); + + const fetchUpdatedProject = useCallback(async () => { + await onUpdate(); + }, [onUpdate]); + + useEffect(() => { + fetchUpdatedProject(); + const timerId = setInterval(() => { + fetchUpdatedProject(); + }, WAIT_DURATION); + + return () => clearInterval(timerId); + }, [fetchUpdatedProject]); useEffect(() => { const fetchLiveProdDomain = async () => {