config#ESC_BLOCK_TIME TypeScript Examples

useBlockCountdown = (blockNumber: number) => {
  const timer = useRef<ReturnType<typeof setTimeout>>(null)
  const [secondsRemaining, setSecondsRemaining] = useState(0)

  useEffect(() => {
    const startCountdown = async () => {
      const currentBlock = await simpleRpcProvider.getBlockNumber()

      if (blockNumber > currentBlock) {
        setSecondsRemaining((blockNumber - currentBlock) * ESC_BLOCK_TIME)

        // Clear previous interval
        if (timer.current) {
          clearInterval(timer.current)
        }

        timer.current = setInterval(() => {
          setSecondsRemaining((prevSecondsRemaining) => {
            if (prevSecondsRemaining === 1) {
              clearInterval(timer.current)
            }

            return prevSecondsRemaining - 1
          })
        }, 1000)
      }
    }

    startCountdown()

    return () => {
      clearInterval(timer.current)
    }
  }, [setSecondsRemaining, blockNumber, timer])

  return secondsRemaining
}

getDateForBlock = async (currentBlock: number, block: number) => {
  const blocksUntilBlock = block - currentBlock
  const secondsUntilStart = blocksUntilBlock * ESC_BLOCK_TIME
  // if block already happened we can get timestamp via .getBlock(block)
  if (currentBlock > block) {
    try {
      const { timestamp } = await simpleRpcProvider.getBlock(block)
      return toDate(timestamp * 1000)
    } catch {
      add(new Date(), { seconds: secondsUntilStart })
    }
  }
  return add(new Date(), { seconds: secondsUntilStart })
}

processAuctionData = async (auctionId: number, auctionResponse: AuctionsResponse): Promise<Auction> => {
  const processedAuctionData = {
    ...auctionResponse,
    topLeaderboard: auctionResponse.leaderboard.toNumber(),
    initialBidAmount: ethersToBigNumber(auctionResponse.initialBidAmount).div(DEFAULT_TOKEN_DECIMAL).toNumber(),
    leaderboardThreshold: ethersToBigNumber(auctionResponse.leaderboardThreshold),
    startBlock: auctionResponse.startBlock.toNumber(),
    endBlock: auctionResponse.endBlock.toNumber(),
  }

  // Get all required datas and blocks
  const currentBlock = await simpleRpcProvider.getBlockNumber()
  const startDate = await getDateForBlock(currentBlock, processedAuctionData.startBlock)
  const endDate = await getDateForBlock(currentBlock, processedAuctionData.endBlock)
  const farmStartDate = add(endDate, { hours: 12 })
  const blocksToFarmStartDate = hoursToSeconds(12) / ESC_BLOCK_TIME
  const farmStartBlock = processedAuctionData.endBlock + blocksToFarmStartDate
  const farmDurationInBlocks = hoursToSeconds(7 * 24) / ESC_BLOCK_TIME
  const farmEndBlock = farmStartBlock + farmDurationInBlocks
  const farmEndDate = add(farmStartDate, { weeks: 1 })

  const auctionStatus = getAuctionStatus(
    currentBlock,
    processedAuctionData.startBlock,
    processedAuctionData.endBlock,
    processedAuctionData.status,
  )

  return {
    id: auctionId,
    startDate,
    endDate,
    auctionDuration: differenceInHours(endDate, startDate),
    farmStartBlock,
    farmStartDate,
    farmEndBlock,
    farmEndDate,
    ...processedAuctionData,
    status: auctionStatus,
  }
}

CountdownCard: React.FC<CountdownCardProps> = ({ currentBlock, targetBlock }) => {
  const { t } = useTranslation()

  // const cakeBountyToDisplay = hasFetchedCakeBounty ? getBalanceNumber(estimatedCakeBountyReward, 18) : 0

  // const { targetRef, tooltip, tooltipVisible } = useTooltip(<TooltipComponent fee={callFee} />, {
  //   placement: 'bottom-end',
  //   tooltipOffset: [20, 10],
  // })

  const blocksToGo = targetBlock - currentBlock < 0 ? 0 : targetBlock - currentBlock
  const timeRemaining = blocksToGo * ESC_BLOCK_TIME

  const days = Math.floor(timeRemaining / (60 * 60 * 24))
  const hours = Math.floor((timeRemaining % (60 * 60 * 24)) / (60 * 60))
  const minutes = Math.floor((timeRemaining % (60 * 60)) / (60))
  const seconds = Math.floor((timeRemaining % (60)))

  return (
    <>
      <StyledCard>
        <CardBody>
          <Flex flexDirection="column">
            <Flex alignItems="center" mb="12px">
              <Text fontSize="20px" bold color="textSubtle" mr="4px">
                {t('GLIDE Farming Start')}
              </Text>
            </Flex>
          </Flex>
          <Flex alignItems="center" justifyContent="space-between">
            <Flex flexDirection="column" mr="12px">
              <Heading>
                {currentBlock ? (
                  <>
                    <Text fontSize="18px">{blocksToGo} {t('blocks')}</Text>
                    <Text fontSize="18px">{days}d, {hours}h, {minutes}m, {seconds}s</Text>
                  </>
                ) : (
                  <Skeleton height={18} width={96} mb="2px" />
                )}
                
                {/* { blocksToGo > 0 ? (
                  <Balance fontSize="20px" bold value={targetBlock} decimals={0} />
                ) : (
                  // <Skeleton height={20} width={96} mb="2px" />
                  <Balance fontSize="20px" bold value={0} decimals={0} />
                  <Text fontSize="20px">{t('')}</Text>

                )} */}
              </Heading>
            </Flex>
          </Flex>
        </CardBody>
      </StyledCard>
    </>
  )
}

useGetPublicIfoData = (ifo: Ifo): PublicIfoData => {
  const { address, releaseBlockNumber } = ifo
  const lpTokenPriceInUsd = useLpTokenPrice(ifo.currency.symbol)
  const [state, setState] = useState({
    status: 'idle' as IfoStatus,
    blocksRemaining: 0,
    secondsUntilStart: 0,
    progress: 5,
    secondsUntilEnd: 0,
    startBlockNum: 0,
    endBlockNum: 0,
    numberPoints: null,
    [PoolIds.poolUnlimited]: {
      raisingAmountPool: BIG_ZERO,
      totalAmountPool: BIG_ZERO,
      offeringAmountPool: BIG_ZERO, // Not know
      limitPerUserInLP: BIG_ZERO, //  Not used
      taxRate: 0, //  Not used
      sumTaxesOverflow: BIG_ZERO, //  Not used
    },
  })
  const { currentBlock } = useBlock()
  const fetchIfoData = useCallback(async () => {
    const ifoCalls = ['startBlock', 'endBlock', 'raisingAmount', 'totalAmount'].map((method) => ({
      address,
      name: method,
    }))

    const [startBlock, endBlock, raisingAmount, totalAmount] = await multicallv2(ifoV1Abi, ifoCalls)

    const startBlockNum = startBlock ? startBlock[0].toNumber() : 0
    const endBlockNum = endBlock ? endBlock[0].toNumber() : 0

    const status = getStatus(currentBlock, startBlockNum, endBlockNum)
    const totalBlocks = endBlockNum - startBlockNum
    const blocksRemaining = endBlockNum - currentBlock

    // Calculate the total progress until finished or until start
    const progress =
      currentBlock > startBlockNum
        ? ((currentBlock - startBlockNum) / totalBlocks) * 100
        : ((currentBlock - releaseBlockNumber) / (startBlockNum - releaseBlockNumber)) * 100

    setState((prev) => ({
      status,
      blocksRemaining,
      secondsUntilStart: (startBlockNum - currentBlock) * ESC_BLOCK_TIME,
      progress,
      secondsUntilEnd: blocksRemaining * ESC_BLOCK_TIME,
      startBlockNum,
      endBlockNum,
      currencyPriceInUSD: null,
      numberPoints: null,
      [PoolIds.poolUnlimited]: {
        ...prev.poolUnlimited,
        raisingAmountPool: raisingAmount ? new BigNumber(raisingAmount[0].toString()) : BIG_ZERO,
        totalAmountPool: totalAmount ? new BigNumber(totalAmount[0].toString()) : BIG_ZERO,
      },
    }))
  }, [address, currentBlock, releaseBlockNumber])

  useEffect(() => {
    fetchIfoData()
  }, [fetchIfoData])

  return { ...state, currencyPriceInUSD: lpTokenPriceInUsd, fetchIfoData }
}

useGetPublicIfoData = (ifo: Ifo): PublicIfoData => {
  const { address, releaseBlockNumber } = ifo
  const lpTokenPriceInUsd = useLpTokenPrice(ifo.currency.symbol)
  const { fastRefresh } = useRefresh()

  const [state, setState] = useState({
    status: 'idle' as IfoStatus,
    blocksRemaining: 0,
    secondsUntilStart: 0,
    progress: 5,
    secondsUntilEnd: 0,
    poolBasic: {
      raisingAmountPool: BIG_ZERO,
      offeringAmountPool: BIG_ZERO,
      limitPerUserInLP: BIG_ZERO,
      taxRate: 0,
      totalAmountPool: BIG_ZERO,
      sumTaxesOverflow: BIG_ZERO,
    },
    poolUnlimited: {
      raisingAmountPool: BIG_ZERO,
      offeringAmountPool: BIG_ZERO,
      limitPerUserInLP: BIG_ZERO,
      taxRate: 0,
      totalAmountPool: BIG_ZERO,
      sumTaxesOverflow: BIG_ZERO,
    },
    startBlockNum: 0,
    endBlockNum: 0,
    numberPoints: 0,
  })
  const { currentBlock } = useBlock()

  const fetchIfoData = useCallback(async () => {
    const ifoCalls = [
      {
        address,
        name: 'startBlock',
      },
      {
        address,
        name: 'endBlock',
      },
      {
        address,
        name: 'viewPoolInformation',
        params: [0],
      },
      {
        address,
        name: 'viewPoolInformation',
        params: [1],
      },
      {
        address,
        name: 'viewPoolTaxRateOverflow',
        params: [1],
      },
      {
        address,
        name: 'numberPoints',
      },
    ]

    const [startBlock, endBlock, poolBasic, poolUnlimited, taxRate, numberPoints] = await multicallv2(
      ifoV2Abi,
      ifoCalls,
    )

    const poolBasicFormatted = formatPool(poolBasic)
    const poolUnlimitedFormatted = formatPool(poolUnlimited)

    const startBlockNum = startBlock ? startBlock[0].toNumber() : 0
    const endBlockNum = endBlock ? endBlock[0].toNumber() : 0
    const taxRateNum = taxRate ? taxRate[0].div(TAX_PRECISION).toNumber() : 0

    const status = getStatus(currentBlock, startBlockNum, endBlockNum)
    const totalBlocks = endBlockNum - startBlockNum
    const blocksRemaining = endBlockNum - currentBlock

    // Calculate the total progress until finished or until start
    const progress =
      currentBlock > startBlockNum
        ? ((currentBlock - startBlockNum) / totalBlocks) * 100
        : ((currentBlock - releaseBlockNumber) / (startBlockNum - releaseBlockNumber)) * 100

    setState((prev) => ({
      ...prev,
      secondsUntilEnd: blocksRemaining * ESC_BLOCK_TIME,
      secondsUntilStart: (startBlockNum - currentBlock) * ESC_BLOCK_TIME,
      poolBasic: { ...poolBasicFormatted, taxRate: 0 },
      poolUnlimited: { ...poolUnlimitedFormatted, taxRate: taxRateNum },
      status,
      progress,
      blocksRemaining,
      startBlockNum,
      endBlockNum,
      numberPoints: numberPoints ? numberPoints[0].toNumber() : 0,
    }))
  }, [address, currentBlock, releaseBlockNumber])

  useEffect(() => {
    fetchIfoData()
  }, [fetchIfoData, fastRefresh])

  return { ...state, currencyPriceInUSD: lpTokenPriceInUsd, fetchIfoData }
}