Display auction details in overview page

packages/backend/src/resolvers.ts

@@ -70,11 +70,11 @@ export const createResolvers = async (service: Service): Promise<any> => {
         return service.getDomainsByProjectId(projectId, filter);
       },
 
-      getAuctionStatus: async (
+      getAuctionData: async (
         _: any,
         { auctionId }: { auctionId: string },
       ) => {
-        return service.getAuctionStatus(auctionId);
+        return service.getAuctionData(auctionId);
       },
     },
 

packages/backend/src/schema.gql

@@ -191,6 +191,30 @@ input FilterDomainsInput {
   status: DomainStatus
 }
 
+type Fee {
+  type: String!
+  quantity: String!
+}
+
+type Auction {
+  id: String!
+  kind: String!
+  status: String!
+  ownerAddress: String!
+  createTime: String!
+  commitsEndTime: String!
+  revealsEndTime: String!
+  commitFee: Fee!
+  revealFee: Fee!
+  minimumBid: Fee
+  winnerAddresses: [String!]!
+  winningBids: [String!]
+  winningPrice: String
+  maxPrice: String
+  numProviders: Int!
+  fundsReleased: Boolean!
+}
+
 input AuctionData {
   maxPrice: String,
   numProviders: Int,
@@ -206,7 +230,7 @@ type Query {
   environmentVariables(projectId: String!): [EnvironmentVariable!]
   projectMembers(projectId: String!): [ProjectMember!]
   searchProjects(searchText: String!): [Project!]
-  getAuctionStatus(auctionId: String!): AuctionStatus!
+  getAuctionData(auctionId: String!): Auction!
   domains(projectId: String!, filter: FilterDomainsInput): [Domain]
 }
 

packages/backend/src/service.ts

@@ -19,6 +19,7 @@ import {
   AddProjectFromTemplateInput,
   AppDeploymentRecord,
   AppDeploymentRemovalRecord,
+  Auction,
   AuctionData,
   GitPushEventPayload,
   PackageJSON,
@@ -1272,10 +1273,10 @@ export class Service {
     return this.db.updateUser(user, data);
   }
 
-  async getAuctionStatus(
+  async getAuctionData(
     auctionId: string
-  ): Promise<boolean> {
+  ): Promise<Auction> {
     const auctions = await this.registry.getAuctionData(auctionId);
-    return auctions[0].status;
+    return auctions[0];
   }
 }

packages/frontend/package.json

@@ -16,8 +16,11 @@
     "@bugsnag/browser-performance": "^2.4.1",
     "@bugsnag/js": "^7.22.7",
     "@bugsnag/plugin-react": "^7.22.7",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
     "@fontsource-variable/jetbrains-mono": "^5.0.19",
     "@fontsource/inter": "^5.0.16",
+    "@mui/material": "^6.1.3",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",

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

@@ -1,35 +1,51 @@
 import { useCallback, useEffect, useState } from 'react';
-import { Project } from 'gql-client';
+import { Auction, Project } from 'gql-client';
 
-import { CheckRoundFilledIcon, GlobeIcon, LoadingIcon } from 'components/shared/CustomIcon';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  Typography,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+} from '@mui/material';
+
+import { CheckRoundFilledIcon, LoadingIcon } from 'components/shared/CustomIcon';
 import { useGQLClient } from 'context/GQLClientContext';
-import { Tag } from 'components/shared';
+import { Button, Tag } from 'components/shared';
 
 const CHECK_AUCTION_STATUS_INTERVAL = 2000;
 
 export const AuctionData = ({
-  project
+  project,
 }: {
-  project: Project
+  project: Project;
 }) => {
-  const [isAuctionCompleted, setIsAuctionCompleted] = useState<boolean>(false);
+  const [auctionStatus, setAuctionStatus] = useState<string>('');
+  const [auctionDetails, setAuctionDetails] = useState<Auction | null>(null);
+  const [openDialog, setOpenDialog] = useState<boolean>(false);
   const client = useGQLClient();
-  const getIconByAuctionStatus = (isCompleted: Boolean) => {
+
-    return isCompleted ? <CheckRoundFilledIcon /> : <LoadingIcon className="animate-spin" />
+  const getIconByAuctionStatus = (status: string) => {
+    return status === 'completed' ? (
+      <CheckRoundFilledIcon />
+    ) : (
+      <LoadingIcon className="animate-spin" />
+    );
   };
 
   const checkAuctionStatus = async () => {
-    const result = await client.getAuctionStatus(project.auctionId);
+    const result = await client.getAuctionData(project.auctionId);
-
+    setAuctionStatus(result.status);
-    if (result) {
+    setAuctionDetails(result);
-      setIsAuctionCompleted(true);
-    }
   };
 
   useEffect(() => {
     let intervalId: NodeJS.Timeout | null = null;
 
-    if (!isAuctionCompleted) {
+    if (auctionStatus !== 'completed') {
       checkAuctionStatus();
       intervalId = setInterval(checkAuctionStatus, CHECK_AUCTION_STATUS_INTERVAL);
     }
@@ -39,56 +55,79 @@ export const AuctionData = ({
         clearInterval(intervalId);
       }
     };
-  }, [isAuctionCompleted]);
+  }, [auctionStatus]);
 
   const renderAuctionStatus = useCallback(
-    (className?: string) => {
+    () => (
-      return (
+      <Tag leftIcon={getIconByAuctionStatus(auctionStatus)} size="xs">
-        <div className={className}>
+        {auctionStatus.toUpperCase()}
-          <Tag
+      </Tag>
-            leftIcon={getIconByAuctionStatus(isAuctionCompleted)}
+    ),
-            size="xs"
+    [auctionStatus],
-          >
-            {isAuctionCompleted ? 'Auction Completed' : 'Auction ongoing'}
-          </Tag>
-        </div>
-      );
-    },
-    [isAuctionCompleted],
   );
 
+  const handleOpenDialog = () => {
+    setOpenDialog(true);
+  };
+
+  const handleCloseDialog = () => {
+    setOpenDialog(false);
+  };
+
   return (
     <>
-      <div className="flex justify-between items-center py-3 text-sm">
+      <Card variant="outlined" className="my-4">
-        <div className="flex items-center text-elements-high-em gap-2">
+        <CardHeader
-          <GlobeIcon />
+          title="Auction Details"
-          <span>Auction details</span>
+          titleTypographyProps={{ variant: 'h6' }}
-        </div>
+          action={
+            <Button onClick={handleOpenDialog} variant="tertiary" size="sm">
+              View details
+            </Button>
+          }
+          sx={{ pb: 0.1 }}
+        />
+        <CardContent>
+          <div className="flex justify-between items-center mt-1">
+            <Typography variant="subtitle1">Auction Status</Typography>
+            <div className="ml-2">{renderAuctionStatus()}</div>
+          </div>
 
-        {/* AUCTION STATUS */}
+          <div className="flex justify-between items-center mt-2">
-        <div className="w-[10%] max-w-[110px] hidden md:flex h-fit">
+            <Typography variant="subtitle1">Auction Id</Typography>
-          {renderAuctionStatus('w-[10%] max-w-[110px] hidden md:flex h-fit')}
+            <Typography variant="body2" className="mt-1 text-right">
-        </div>
+              {project.auctionId}
-      </div>
+            </Typography>
+          </div>
 
-      <div className="ml-4 mb-2">
+          <Typography variant="subtitle1" className="mt-3">
-        <p className="text-elements-low-em text-sm">
+            Deployer LRNs
-          Auction Id: {project.auctionId}
+          </Typography>
-        </p>
+          {project.deployerLrn && (
+            <div>
+              {project.deployerLrn.map((lrn, index) => (
+                <Typography key={index} variant="body2" className="text-elements">
+                  {'\u2022'} {lrn}
+                </Typography>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
 
-        <p className="text-elements-low-em text-sm">
+      <Dialog open={openDialog} onClose={handleCloseDialog} maxWidth="lg" fullWidth>
-          Deployer LRNs:
+        <DialogTitle>Auction Details</DialogTitle>
-        </p>
+        <DialogContent>
-
+          {auctionDetails && (
-        <div>
+            <Typography variant="body1">
-          {project.deployerLrn.map((lrn, index) => (
+              <pre>{JSON.stringify(auctionDetails, null, 2)}</pre>
-            <p key={index} className="text-elements-low-em text-sm">
+            </Typography>
-              {lrn}
+          )}
-            </p>
+        </DialogContent>
-          ))}
+        <DialogActions>
-        </div>
+          <Button onClick={handleCloseDialog}>Close</Button>
-      </div>
+        </DialogActions>
+      </Dialog>
     </>
-
   );
 };

packages/gql-client/dist/index.d.mts

@@ -24,6 +24,28 @@ declare enum AuctionStatus {
     AuctionStatusExpired = "expired",
     AuctionStatusCompleted = "completed"
 }
+type Fee = {
+    type: string;
+    quantity: string;
+};
+type Auction = {
+    id: string;
+    kind: string;
+    status: string;
+    ownerAddress: string;
+    createTime?: Date;
+    commitsEndTime?: Date;
+    revealsEndTime?: Date;
+    commitFee?: string;
+    revealFee?: string;
+    minimumBid?: string;
+    winnerAddresses: string[];
+    winningBids?: string[];
+    winningPrice?: string;
+    maxPrice?: string;
+    numProviders: number;
+    fundsReleased: boolean;
+};
 declare enum DomainStatus {
     Live = "Live",
     Pending = "Pending"
@@ -304,7 +326,7 @@ declare class GQLClient {
     getDomains(projectId: string, filter?: FilterDomainInput): Promise<GetDomainsResponse>;
     authenticateGitHub(code: string): Promise<AuthenticateGitHubResponse>;
     unauthenticateGithub(): Promise<UnauthenticateGitHubResponse>;
-    getAuctionStatus(auctionId: string): Promise<AuctionStatus>;
+    getAuctionData(auctionId: string): Promise<Auction>;
 }
 
-export { type AddDomainInput, type AddDomainResponse, type AddEnvironmentVariableInput, type AddEnvironmentVariablesResponse, type AddProjectFromTemplateInput, type AddProjectFromTemplateResponse, type AddProjectInput, type AddProjectMemberInput, type AddProjectMemberResponse, type AddProjectResponse, type AuctionData, AuctionStatus, type AuthenticateGitHubResponse, type DeleteDeploymentResponse, type DeleteDomainResponse, type DeleteProjectResponse, type Deployment, DeploymentStatus, type Domain, DomainStatus, Environment, type EnvironmentVariable, type FilterDomainInput, GQLClient, type GetDeploymentsResponse, type GetDomainsResponse, type GetEnvironmentVariablesResponse, type GetOrganizationsResponse, type GetProjectMembersResponse, type GetProjectResponse, type GetProjectsInOrganizationResponse, type GetUserResponse, type GraphQLConfig, type Organization, type OrganizationMember, type OrganizationProject, Permission, type Project, type ProjectMember, type RedeployToProdResponse, type RemoveEnvironmentVariableResponse, type RemoveProjectMemberResponse, Role, type RollbackDeploymentResponse, type SearchProjectsResponse, type UnauthenticateGitHubResponse, type UpdateDeploymentToProdResponse, type UpdateDomainInput, type UpdateDomainResponse, type UpdateEnvironmentVariableInput, type UpdateEnvironmentVariableResponse, type UpdateProjectInput, type UpdateProjectMemberInput, type UpdateProjectMemberResponse, type UpdateProjectResponse, type User };
+export { type AddDomainInput, type AddDomainResponse, type AddEnvironmentVariableInput, type AddEnvironmentVariablesResponse, type AddProjectFromTemplateInput, type AddProjectFromTemplateResponse, type AddProjectInput, type AddProjectMemberInput, type AddProjectMemberResponse, type AddProjectResponse, type Auction, type AuctionData, AuctionStatus, type AuthenticateGitHubResponse, type DeleteDeploymentResponse, type DeleteDomainResponse, type DeleteProjectResponse, type Deployment, DeploymentStatus, type Domain, DomainStatus, Environment, type EnvironmentVariable, type Fee, type FilterDomainInput, GQLClient, type GetDeploymentsResponse, type GetDomainsResponse, type GetEnvironmentVariablesResponse, type GetOrganizationsResponse, type GetProjectMembersResponse, type GetProjectResponse, type GetProjectsInOrganizationResponse, type GetUserResponse, type GraphQLConfig, type Organization, type OrganizationMember, type OrganizationProject, Permission, type Project, type ProjectMember, type RedeployToProdResponse, type RemoveEnvironmentVariableResponse, type RemoveProjectMemberResponse, Role, type RollbackDeploymentResponse, type SearchProjectsResponse, type UnauthenticateGitHubResponse, type UpdateDeploymentToProdResponse, type UpdateDomainInput, type UpdateDomainResponse, type UpdateEnvironmentVariableInput, type UpdateEnvironmentVariableResponse, type UpdateProjectInput, type UpdateProjectMemberInput, type UpdateProjectMemberResponse, type UpdateProjectResponse, type User };

packages/gql-client/dist/index.d.ts

@@ -24,6 +24,28 @@ declare enum AuctionStatus {
     AuctionStatusExpired = "expired",
     AuctionStatusCompleted = "completed"
 }
+type Fee = {
+    type: string;
+    quantity: string;
+};
+type Auction = {
+    id: string;
+    kind: string;
+    status: string;
+    ownerAddress: string;
+    createTime?: Date;
+    commitsEndTime?: Date;
+    revealsEndTime?: Date;
+    commitFee?: string;
+    revealFee?: string;
+    minimumBid?: string;
+    winnerAddresses: string[];
+    winningBids?: string[];
+    winningPrice?: string;
+    maxPrice?: string;
+    numProviders: number;
+    fundsReleased: boolean;
+};
 declare enum DomainStatus {
     Live = "Live",
     Pending = "Pending"
@@ -304,7 +326,7 @@ declare class GQLClient {
     getDomains(projectId: string, filter?: FilterDomainInput): Promise<GetDomainsResponse>;
     authenticateGitHub(code: string): Promise<AuthenticateGitHubResponse>;
     unauthenticateGithub(): Promise<UnauthenticateGitHubResponse>;
-    getAuctionStatus(auctionId: string): Promise<AuctionStatus>;
+    getAuctionData(auctionId: string): Promise<Auction>;
 }
 
-export { type AddDomainInput, type AddDomainResponse, type AddEnvironmentVariableInput, type AddEnvironmentVariablesResponse, type AddProjectFromTemplateInput, type AddProjectFromTemplateResponse, type AddProjectInput, type AddProjectMemberInput, type AddProjectMemberResponse, type AddProjectResponse, type AuctionData, AuctionStatus, type AuthenticateGitHubResponse, type DeleteDeploymentResponse, type DeleteDomainResponse, type DeleteProjectResponse, type Deployment, DeploymentStatus, type Domain, DomainStatus, Environment, type EnvironmentVariable, type FilterDomainInput, GQLClient, type GetDeploymentsResponse, type GetDomainsResponse, type GetEnvironmentVariablesResponse, type GetOrganizationsResponse, type GetProjectMembersResponse, type GetProjectResponse, type GetProjectsInOrganizationResponse, type GetUserResponse, type GraphQLConfig, type Organization, type OrganizationMember, type OrganizationProject, Permission, type Project, type ProjectMember, type RedeployToProdResponse, type RemoveEnvironmentVariableResponse, type RemoveProjectMemberResponse, Role, type RollbackDeploymentResponse, type SearchProjectsResponse, type UnauthenticateGitHubResponse, type UpdateDeploymentToProdResponse, type UpdateDomainInput, type UpdateDomainResponse, type UpdateEnvironmentVariableInput, type UpdateEnvironmentVariableResponse, type UpdateProjectInput, type UpdateProjectMemberInput, type UpdateProjectMemberResponse, type UpdateProjectResponse, type User };
+export { type AddDomainInput, type AddDomainResponse, type AddEnvironmentVariableInput, type AddEnvironmentVariablesResponse, type AddProjectFromTemplateInput, type AddProjectFromTemplateResponse, type AddProjectInput, type AddProjectMemberInput, type AddProjectMemberResponse, type AddProjectResponse, type Auction, type AuctionData, AuctionStatus, type AuthenticateGitHubResponse, type DeleteDeploymentResponse, type DeleteDomainResponse, type DeleteProjectResponse, type Deployment, DeploymentStatus, type Domain, DomainStatus, Environment, type EnvironmentVariable, type Fee, type FilterDomainInput, GQLClient, type GetDeploymentsResponse, type GetDomainsResponse, type GetEnvironmentVariablesResponse, type GetOrganizationsResponse, type GetProjectMembersResponse, type GetProjectResponse, type GetProjectsInOrganizationResponse, type GetUserResponse, type GraphQLConfig, type Organization, type OrganizationMember, type OrganizationProject, Permission, type Project, type ProjectMember, type RedeployToProdResponse, type RemoveEnvironmentVariableResponse, type RemoveProjectMemberResponse, Role, type RollbackDeploymentResponse, type SearchProjectsResponse, type UnauthenticateGitHubResponse, type UpdateDeploymentToProdResponse, type UpdateDomainInput, type UpdateDomainResponse, type UpdateEnvironmentVariableInput, type UpdateEnvironmentVariableResponse, type UpdateProjectInput, type UpdateProjectMemberInput, type UpdateProjectMemberResponse, type UpdateProjectResponse, type User };

packages/gql-client/dist/index.js

@@ -272,9 +272,35 @@ query ($projectId: String!, $filter: FilterDomainsInput) {
   }
 }
 `;
-var getAuctionStatus = import_client.gql`
+var getAuctionData = import_client.gql`
 query ($auctionId: String!) {
-  getAuctionStatus(auctionId: $auctionId)
+  getAuctionData(auctionId: $auctionId){
+    id
+    kind
+    status
+    ownerAddress
+    createTime
+    commitsEndTime
+    revealsEndTime
+    commitFee {
+      type
+      quantity
+    }
+    revealFee {
+      type
+      quantity
+    }
+    minimumBid {
+      type
+      quantity
+    }
+    winnerAddresses
+    winningBids
+    winningPrice
+    maxPrice
+    numProviders
+    fundsReleased
+  }
 }
 `;
 
@@ -722,15 +748,15 @@ var GQLClient = class {
       return data;
     });
   }
-  getAuctionStatus(auctionId) {
+  getAuctionData(auctionId) {
     return __async(this, null, function* () {
       const { data } = yield this.client.query({
-        query: getAuctionStatus,
+        query: getAuctionData,
         variables: {
           auctionId
         }
       });
-      return data;
+      return data.getAuctionData;
     });
   }
 };

packages/gql-client/dist/index.mjs

@@ -244,9 +244,35 @@ query ($projectId: String!, $filter: FilterDomainsInput) {
   }
 }
 `;
-var getAuctionStatus = gql`
+var getAuctionData = gql`
 query ($auctionId: String!) {
-  getAuctionStatus(auctionId: $auctionId)
+  getAuctionData(auctionId: $auctionId){
+    id
+    kind
+    status
+    ownerAddress
+    createTime
+    commitsEndTime
+    revealsEndTime
+    commitFee {
+      type
+      quantity
+    }
+    revealFee {
+      type
+      quantity
+    }
+    minimumBid {
+      type
+      quantity
+    }
+    winnerAddresses
+    winningBids
+    winningPrice
+    maxPrice
+    numProviders
+    fundsReleased
+  }
 }
 `;
 
@@ -694,15 +720,15 @@ var GQLClient = class {
       return data;
     });
   }
-  getAuctionStatus(auctionId) {
+  getAuctionData(auctionId) {
     return __async(this, null, function* () {
       const { data } = yield this.client.query({
-        query: getAuctionStatus,
+        query: getAuctionData,
         variables: {
           auctionId
         }
       });
-      return data;
+      return data.getAuctionData;
     });
   }
 };

packages/gql-client/package.json

@@ -16,4 +16,4 @@
   "dependencies": {
     "@apollo/client": "^3.8.9"
   }
-}
+}

packages/gql-client/src/client.ts

@@ -410,14 +410,14 @@ export class GQLClient {
     return data;
   }
 
-  async getAuctionStatus(auctionId: string): Promise<types.AuctionStatus> {
+  async getAuctionData(auctionId: string): Promise<types.Auction> {
     const { data } = await this.client.query({
-      query: queries.getAuctionStatus,
+      query: queries.getAuctionData,
       variables: {
         auctionId,
       },
     });
 
-    return data;
+    return data.getAuctionData;
   }
 }

packages/gql-client/src/queries.ts

@@ -226,8 +226,34 @@ query ($projectId: String!, $filter: FilterDomainsInput) {
 }
 `;
 
-export const getAuctionStatus = gql`
+export const getAuctionData = gql`
 query ($auctionId: String!) {
-  getAuctionStatus(auctionId: $auctionId)
+  getAuctionData(auctionId: $auctionId){
+    id
+    kind
+    status
+    ownerAddress
+    createTime
+    commitsEndTime
+    revealsEndTime
+    commitFee {
+      type
+      quantity
+    }
+    revealFee {
+      type
+      quantity
+    }
+    minimumBid {
+      type
+      quantity
+    }
+    winnerAddresses
+    winningBids
+    winningPrice
+    maxPrice
+    numProviders
+    fundsReleased
+  }
 }
 `;

packages/gql-client/src/types.ts

@@ -32,6 +32,33 @@ export enum AuctionStatus {
 	AuctionStatusCompleted = "completed",
 }
 
+export type Fee = {
+  type: string;
+  quantity: string;
+}
+
+export type Auction = {
+  id: string;
+  kind: string;
+  status: string;
+  ownerAddress: string;
+  createTime?: Date;
+  commitsEndTime?: Date;
+  revealsEndTime?: Date;
+  // commitFee?: Fee;
+  // revealFee?: Fee;
+  // minimumBid?: Fee;
+  commitFee?: string;
+  revealFee?: string;
+  minimumBid?: string;
+  winnerAddresses: string[];
+  winningBids?: string[];
+  winningPrice?: string;
+  maxPrice?: string;
+  numProviders: number;
+  fundsReleased: boolean;
+}
+
 export enum DomainStatus {
   Live = "Live",
   Pending = "Pending",