Display auction details in overview page

This commit is contained in:
IshaVenikar 2024-10-10 11:57:34 +05:30 committed by Nabarun
parent 0341e41c63
commit dd2fcff6ee
15 changed files with 299 additions and 83 deletions

View File

@ -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);
},
},

View File

@ -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]
}

View File

@ -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];
}
}

View File

@ -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",

View File

@ -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);
if (result) {
setIsAuctionCompleted(true);
}
const result = await client.getAuctionData(project.auctionId);
setAuctionStatus(result.status);
setAuctionDetails(result);
};
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 (
<div className={className}>
<Tag
leftIcon={getIconByAuctionStatus(isAuctionCompleted)}
size="xs"
>
{isAuctionCompleted ? 'Auction Completed' : 'Auction ongoing'}
</Tag>
</div>
);
},
[isAuctionCompleted],
() => (
<Tag leftIcon={getIconByAuctionStatus(auctionStatus)} size="xs">
{auctionStatus.toUpperCase()}
</Tag>
),
[auctionStatus],
);
const handleOpenDialog = () => {
setOpenDialog(true);
};
const handleCloseDialog = () => {
setOpenDialog(false);
};
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 details</span>
</div>
<Card variant="outlined" className="my-4">
<CardHeader
title="Auction Details"
titleTypographyProps={{ variant: 'h6' }}
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="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="flex justify-between items-center mt-2">
<Typography variant="subtitle1">Auction Id</Typography>
<Typography variant="body2" className="mt-1 text-right">
{project.auctionId}
</Typography>
</div>
<div className="ml-4 mb-2">
<p className="text-elements-low-em text-sm">
Auction Id: {project.auctionId}
</p>
<Typography variant="subtitle1" className="mt-3">
Deployer LRNs
</Typography>
{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">
Deployer LRNs:
</p>
<div>
{project.deployerLrn.map((lrn, index) => (
<p key={index} className="text-elements-low-em text-sm">
{lrn}
</p>
))}
</div>
</div>
<Dialog open={openDialog} onClose={handleCloseDialog} maxWidth="lg" fullWidth>
<DialogTitle>Auction Details</DialogTitle>
<DialogContent>
{auctionDetails && (
<Typography variant="body1">
<pre>{JSON.stringify(auctionDetails, null, 2)}</pre>
</Typography>
)}
</DialogContent>
<DialogActions>
<Button onClick={handleCloseDialog}>Close</Button>
</DialogActions>
</Dialog>
</>
);
};

View File

@ -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 };

View File

@ -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 };

View File

@ -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;
});
}
};

File diff suppressed because one or more lines are too long

View File

@ -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;
});
}
};

File diff suppressed because one or more lines are too long

View File

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

View File

@ -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;
}
}

View File

@ -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
}
}
`;

View File

@ -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",