forked from cerc-io/snowballtools-base
95 lines
2.4 KiB
TypeScript
95 lines
2.4 KiB
TypeScript
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>(false);
|
|
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 details</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">
|
|
Deployer LRNs:
|
|
</p>
|
|
|
|
<div>
|
|
{project.deployerLrn.map((lrn, index) => (
|
|
<p key={index} className="text-elements-low-em text-sm">
|
|
{lrn}
|
|
</p>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</>
|
|
|
|
);
|
|
};
|