103 lines
3.6 KiB
TypeScript
103 lines
3.6 KiB
TypeScript
import { useCallback, useEffect, useState } from 'react';
|
|
import { Auction, Project } from 'gql-client';
|
|
|
|
import {
|
|
Dialog,
|
|
DialogTitle,
|
|
DialogContent,
|
|
DialogActions,
|
|
} from '@mui/material';
|
|
|
|
import { CheckRoundFilledIcon, LoadingIcon } from 'components/shared/CustomIcon';
|
|
import { useGQLClient } from 'context/GQLClientContext';
|
|
import { Button, Heading, Tag } from 'components/shared';
|
|
|
|
const CHECK_AUCTION_STATUS_INTERVAL = 2000;
|
|
|
|
export const AuctionCard = ({ project }: { project: Project }) => {
|
|
const [auctionStatus, setAuctionStatus] = useState<string>('');
|
|
const [deployerLrns, setDeployerLrns] = useState<string[]>([]);
|
|
const [auctionDetails, setAuctionDetails] = useState<Auction | null>(null);
|
|
const [openDialog, setOpenDialog] = useState<boolean>(false);
|
|
const client = useGQLClient();
|
|
|
|
const getIconByAuctionStatus = (status: string) =>
|
|
status === 'completed' ? <CheckRoundFilledIcon /> : <LoadingIcon className="animate-spin" />;
|
|
|
|
const checkAuctionStatus = useCallback(async () => {
|
|
const result = await client.getAuctionData(project.auctionId);
|
|
setAuctionStatus(result.status);
|
|
setAuctionDetails(result);
|
|
setDeployerLrns(project.deployerLrn);
|
|
}, [client, project.auctionId, project.deployerLrn]);
|
|
|
|
useEffect(() => {
|
|
if (auctionStatus !== 'completed') {
|
|
const intervalId = setInterval(checkAuctionStatus, CHECK_AUCTION_STATUS_INTERVAL);
|
|
checkAuctionStatus();
|
|
|
|
return () => clearInterval(intervalId);
|
|
}
|
|
}, [auctionStatus, checkAuctionStatus]);
|
|
|
|
const renderAuctionStatus = useCallback(
|
|
() => (
|
|
<Tag leftIcon={getIconByAuctionStatus(auctionStatus)} size="xs" type={auctionStatus === 'completed' ? 'positive' : 'emphasized'}>
|
|
{auctionStatus.toUpperCase()}
|
|
</Tag>
|
|
),
|
|
[auctionStatus]
|
|
);
|
|
|
|
const handleOpenDialog = () => setOpenDialog(true);
|
|
const handleCloseDialog = () => setOpenDialog(false);
|
|
|
|
return (
|
|
<>
|
|
<div className="p-3 gap-2 rounded-xl border border-gray-200 transition-colors hover:bg-base-bg-alternate flex flex-col mt-8">
|
|
<div className="flex justify-between items-center">
|
|
<Heading className="text-lg leading-6 font-medium">Auction details</Heading>
|
|
<Button onClick={handleOpenDialog} variant="tertiary" size="sm">
|
|
View details
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="flex justify-between items-center mt-1">
|
|
<span className="text-elements-high-em text-sm font-medium tracking-tight">Auction Status</span>
|
|
<div className="ml-2">{renderAuctionStatus()}</div>
|
|
</div>
|
|
|
|
<div className="flex justify-between items-center mt-2">
|
|
<span className="text-elements-high-em text-sm font-medium tracking-tight">Auction Id</span>
|
|
<span className="text-elements-mid-em text-sm text-right">
|
|
{project.auctionId}
|
|
</span>
|
|
</div>
|
|
|
|
{project.deployerLrn && (
|
|
<div className="mt-3">
|
|
<span className="text-elements-high-em text-sm font-medium tracking-tight">Deployer LRNs</span>
|
|
{deployerLrns.map((lrn, index) => (
|
|
<p key={index} className="text-elements-mid-em text-sm">
|
|
{'\u2022'} {lrn}
|
|
</p>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<Dialog open={openDialog} onClose={handleCloseDialog} fullWidth maxWidth="md">
|
|
<DialogTitle>Auction Details</DialogTitle>
|
|
<DialogContent>
|
|
{auctionDetails && (
|
|
<pre>{JSON.stringify(auctionDetails, null, 2)}</pre>
|
|
)}
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={handleCloseDialog}>Close</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
};
|