Implement functionality to release funds after deployment (#7)

Part of [Service provider auctions for web deployments](https://www.notion.so/Service-provider-auctions-for-web-deployments-104a6b22d47280dbad51d28aa3a91d75)

- Implement functionality to release funds after first successful deployment

Co-authored-by: IshaVenikar <ishavenikar7@gmail.com>
Reviewed-on: cerc-io/snowballtools-base#7

packages/frontend/src/components/projects/project/overview/Activity/AuctionCard.tsx

@@ -17,6 +17,7 @@ const WAIT_DURATION = 5000;
 export const AuctionCard = ({ project }: { project: Project }) => {
   const [auctionStatus, setAuctionStatus] = useState<string>('');
   const [deployerLrns, setDeployerLrns] = useState<string[]>([]);
+  const [fundsStatus, setFundsStatus] = useState<boolean>(false);
   const [auctionDetails, setAuctionDetails] = useState<Auction | null>(null);
   const [openDialog, setOpenDialog] = useState<boolean>(false);
   const client = useGQLClient();
@@ -29,18 +30,16 @@ export const AuctionCard = ({ project }: { project: Project }) => {
     setAuctionStatus(result.status);
     setAuctionDetails(result);
     setDeployerLrns(project.deployerLrns);
-  }, [client, project.auctionId, project.deployerLrns]);
+    setFundsStatus(project.fundsReleased);
+  }, []);
 
   useEffect(() => {
     if (auctionStatus !== 'completed') {
       checkAuctionStatus();
       const intervalId = setInterval(checkAuctionStatus, WAIT_DURATION);
-
       return () => clearInterval(intervalId);
     }
-  }, [auctionStatus, checkAuctionStatus]);
 
-  useEffect(() => {
     if (auctionStatus === 'completed') {
       const fetchUpdatedProject = async () => {
         // Wait for 5 secs since the project is not immediately updated with deployer LRNs
@@ -48,10 +47,9 @@ export const AuctionCard = ({ project }: { project: Project }) => {
         const updatedProject = await client.getProject(project.id);
         setDeployerLrns(updatedProject.project?.deployerLrns || []);
       };
-
       fetchUpdatedProject();
     }
-  }, [auctionStatus, client, project.id]);
+  }, [auctionStatus, client]);
 
   const renderAuctionStatus = useCallback(
     () => (
@@ -101,6 +99,18 @@ export const AuctionCard = ({ project }: { project: Project }) => {
             ))}
           </div>
         )}
+
+        <div className="flex justify-between items-center mt-1">
+          <span className="text-elements-high-em text-sm font-medium tracking-tight">Deployer Funds Status</span>
+          <div className="ml-2">
+            <Tag
+              size="xs"
+              type={fundsStatus ? 'positive' : 'emphasized'}
+            >
+              {fundsStatus ? 'RELEASED' : 'LOCKED'}
+            </Tag>
+          </div>
+        </div>
       </div>
 
       <Dialog open={openDialog} onClose={handleCloseDialog} fullWidth maxWidth="md">

packages/frontend/src/pages/org-slug/projects/create/success/Id.tsx

@@ -23,12 +23,8 @@ const Id = () => {
 
   const handleSetupDomain = async () => {
     if (id) {
-      // console.log('id', id);
-      // console.log('getting project for id', id);
       const project = await client.getProject(id);
-      // console.log('project found:', project);
       if (project && project.project) {
-        // console.log('project:', project.project);
         setProject(project.project);
       }
     } else {
@@ -38,7 +34,7 @@ const Id = () => {
 
   useEffect(() => {
     handleSetupDomain();
-  });
+  }, []);
 
   return (
     <>

packages/frontend/src/stories/MockStoriesData.ts

@@ -124,5 +124,6 @@ export const project: Project = {
   deployerLrns: ['lrn://deployer.apps.snowballtools.com '],
   webhooks: ['beepboop'],
   icon: 'Icon',
+  fundsReleased: true,
   baseDomains: ['baseDomain'],
 };