Auction Dashboard

The auction dashboard provides an overview of the current auction state and bid statistics:

// src/features/dAppHub/EpochStakeAuction/Dashboard/index.tsx
// Main component for the stake auction dashboard
export const EpochStakeAuctionDashboard = () => {
  // Component implementation details
  const oadaFrontendInfo = useAppSelector(selectOadaFrontendInfo)

  // Calculate bid statistics
  const [minBidApy, maxBidApy] = oadaFrontendInfo.bidViews.reduce(([prevMinApy, prevMaxApy], view) => {
    const apy = Big(view.apy.toString())
    const nextMinApy = min(prevMinApy, apy)
    const nextMaxApy = max(prevMaxApy, apy)
    return [nextMinApy, nextMaxApy]
  }, [Big(Number.MAX_VALUE), Big(Number.MIN_VALUE)])

  // Calculate bid range and interval for bucketing
  const bidRange = maxBidApy.eq(minBidApy) ? Big(1) : maxBidApy.sub(minBidApy)
  const bidStep = bidRange.div(bidApyBucketCount)
  const intervalLength = bidStep

  // Create table buckets for order book display
  const tableBuckets = _.range(0, +bidRange + 1, 1).map(v => {
    return {
      apy: `${minBidApy.add(v).div(10)}%`,
      requestedStakeAmount: 0,
    }
  })

  // Populate table buckets with bid data
  oadaFrontendInfo.bidViews.forEach(bidView =>
    tableBuckets[bidView.apy - +minBidApy].requestedStakeAmount +=
      +calcRequestedStakeAmount(Big(bidView.amount), Big(bidView.apy))
  )

  // Component render logic
  return (
    // JSX implementation
  );
};