Fetch project details in overview tab in a loop

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,

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 = () => {
               </div>
             ) : (
               <>
-                <AccountsDropdown accounts={accounts} onAccountChange={onAccountChange} isDataReceived={isAccountsDataReceived} />
+                <AccountsDropdown
+                  accounts={accounts}
+                  onAccountChange={onAccountChange}
+                  isDataReceived={isAccountsDataReceived}
+                />
                 <IFrameModal
                   setAccounts={setAccounts}
                   setIsDataReceived={setIsAccountsDataReceived}
@@ -607,8 +611,7 @@ const Configure = () => {
                           : 'Pay and Deploy'
                         : isLoading
                           ? 'Deploying'
-                          : 'Deploy'
-                      }
+                          : 'Deploy'}
                     </Button>
                   </div>
                 )}

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 = ({
         ></iframe>
       </Box>
     </Modal>
-  )
+  );
 };
 
 export default IFrameModal;

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 {

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 (
     <div className="h-full">

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<Domain>();
 
   const client = useGQLClient();
-
-  const { project } = useOutletContext<OutletContextType>();
+  const { project, onUpdate } = useOutletContext<OutletContextType>();
 
   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 () => {