Display auction details in Overview tab

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

@@ -0,0 +1,94 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Project } from 'gql-client';
+
+import { CheckRoundFilledIcon, GlobeIcon, LoadingIcon } from 'components/shared/CustomIcon';
+import { useGQLClient } from 'context/GQLClientContext';
+import { Tag } from 'components/shared';
+
+const CHECK_AUCTION_STATUS_INTERVAL = 2000;
+
+export const AuctionData = ({
+  project
+}: {
+  project: Project
+}) => {
+  const [isAuctionCompleted, setIsAuctionCompleted] = useState<boolean>(true);
+  const client = useGQLClient();
+  const getIconByAuctionStatus = (isCompleted: Boolean) => {
+    return isCompleted ? <CheckRoundFilledIcon /> : <LoadingIcon className="animate-spin" />
+  };
+
+  const checkAuctionStatus = async () => {
+    const result = await client.getAuctionStatus(project.auctionId);
+
+    if (result) {
+      setIsAuctionCompleted(true);
+    }
+  };
+
+  useEffect(() => {
+    let intervalId: NodeJS.Timeout | null = null;
+
+    if (!isAuctionCompleted) {
+      checkAuctionStatus();
+      intervalId = setInterval(checkAuctionStatus, CHECK_AUCTION_STATUS_INTERVAL);
+    }
+
+    return () => {
+      if (intervalId) {
+        clearInterval(intervalId);
+      }
+    };
+  }, [isAuctionCompleted]);
+
+  const renderAuctionStatus = useCallback(
+    (className?: string) => {
+      return (
+        <div className={className}>
+          <Tag
+            leftIcon={getIconByAuctionStatus(isAuctionCompleted)}
+            size="xs"
+          >
+            {isAuctionCompleted ? 'Auction Completed' : 'Auction ongoing'}
+          </Tag>
+        </div>
+      );
+    },
+    [isAuctionCompleted],
+  );
+
+  return (
+    <>
+      <div className="flex justify-between items-center py-3 text-sm">
+        <div className="flex items-center text-elements-high-em gap-2">
+          <GlobeIcon />
+          <span>Auction data</span>
+        </div>
+
+        {/* AUCTION STATUS */}
+        <div className="w-[10%] max-w-[110px] hidden md:flex h-fit">
+          {renderAuctionStatus('w-[10%] max-w-[110px] hidden md:flex h-fit')}
+        </div>
+      </div>
+
+      <div className="ml-4 mb-2">
+        <p className="text-elements-low-em text-sm">
+          Auction Id: {project.auctionId}
+        </p>
+
+        <p className="text-elements-low-em text-sm mt-2">
+          Deployer LRNs:
+        </p>
+
+        <div>
+          {project.deployerLrn.map((lrn, index) => (
+            <p key={index} className="text-elements-low-em text-sm">
+              {lrn}
+            </p>
+          ))}
+        </div>
+      </div>
+    </>
+
+  );
+};

packages/frontend/src/pages/components/modals.tsx

@@ -36,6 +36,8 @@ const deployment: Deployment = {
   url: 'https://deploy1.example.com',
   environment: Environment.Production,
   isCurrent: true,
+  auctionId: '7553538436710373822151221341b43f577e07b0525d083cc9b2de98890138a1',
+  deployerLrn: 'lrn://deepstack-test4/deployers/webapp-deployer-api.test4.wireitin.com',
   status: DeploymentStatus.Ready,
   createdBy: {
     id: 'user1',

packages/frontend/src/pages/org-slug/projects/id/Overview.tsx

@@ -21,6 +21,7 @@ import { Activity } from 'components/projects/project/overview/Activity';
 import { OverviewInfo } from 'components/projects/project/overview/OverviewInfo';
 import { relativeTimeMs } from 'utils/time';
 import { Domain, DomainStatus } from 'gql-client';
+import { AuctionData } from 'components/projects/project/overview/Activity/AuctionData';
 
 const COMMITS_PER_PAGE = 4;
 
@@ -136,6 +137,7 @@ const OverviewTabPanel = () => {
             </a>
           </div>
         </div>
+        <AuctionData project={project}/>
         <OverviewInfo label="Domain" icon={<GlobeIcon />}>
           {liveDomain ? (
             <Tag type="positive" size="xs" leftIcon={<CheckRoundFilledIcon />}>

packages/frontend/src/stories/MockStoriesData.ts

@@ -102,6 +102,8 @@ export const deployment0: Deployment = {
   domain: domain0,
   commitMessage: 'Commit Message',
   createdBy: user,
+  auctionId: '7553538436710373822151221341b43f577e07b0525d083cc9b2de98890138a1',
+  deployerLrn: 'lrn://deepstack-test4/deployers/webapp-deployer-api.test4.wireitin.com',
 };
 
 export const project: Project = {
@@ -119,6 +121,8 @@ export const project: Project = {
   organization: organization,
   template: 'Template',
   members: [member],
+  auctionId: '7553538436710373822151221341b43f577e07b0525d083cc9b2de98890138a1',
+  deployerLrn: ['lrn://deepstack-test4/deployers/webapp-deployer-api.test4.wireitin.com', 'lrn://wireitin/deployers/webapp-deployer-api.wireitin.com'],
   webhooks: ['beepboop'],
   icon: 'Icon',
   subDomain: 'SubDomain',