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(false); const client = useGQLClient(); const getIconByAuctionStatus = (isCompleted: Boolean) => { return isCompleted ? : }; 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 (
{isAuctionCompleted ? 'Auction Completed' : 'Auction ongoing'}
); }, [isAuctionCompleted], ); return ( <>
Auction details
{/* AUCTION STATUS */}
{renderAuctionStatus('w-[10%] max-w-[110px] hidden md:flex h-fit')}

Auction Id: {project.auctionId}

Deployer LRNs:

{project.deployerLrn.map((lrn, index) => (

{lrn}

))}
); };