PoolTogetherTVL.js

// React Hooks

import { ethers } from 'ethers'
import { useAllPools } from '@pooltogether/hooks'

export const usePooltogetherTotalPrizes = () => {
  const { isFetched, data } = useAllPools()
  if (!isFetched || !data) return null
  return calculateTotalPrizes(data)
}

export const usePooltogetherTvl = () => {
  const { isFetched, data } = useAllPools()
  if (!isFetched || !data) return null
  return calculateTotalValueLocked(data)
}

const calculateTotalValueLocked = (pools) =>
  ethers.utils.formatUnits(
    pools.reduce((total, pool) => {
      if (pool?.prizePool?.totalValueLockedUsdScaled) {
        return total.add(pool.prizePool.totalValueLockedUsdScaled)
      }
      return total
    }, ethers.constants.Zero),
    2
  )

const calculateTotalPrizes = (pools) =>
  ethers.utils.formatUnits(
    pools.reduce((total, pool) => {
      if (pool?.prize?.weeklyTotalValueUsdScaled) {
        return total.add(pool.prize.weeklyTotalValueUsdScaled)
      }
      return total
    }, ethers.constants.Zero),
    2
  )


// Component.jsx

import React from 'react'

import { usePooltogetherTotalPrizes, usePooltogetherTvl } from 'lib/hooks/usePooltogetherTvl'

export const TVLAndWeeklyPrizesBanner = (props) => {
  const totalValueLocked = usePooltogetherTvl()
  const totalPrizes = usePooltogetherTotalPrizes()

  // Check if data has loaded
  if (totalValueLocked === null || totalPrizes === null) {
    return 'loading...'
  }
  
  
//   Formatting:
//
//   const formatNumbers = (num) => {
//     if (num > 1000000) {
//       return `$${numberWithCommas(num / 1000000, { precision: 2 })} ${t('million')}`
//     } else if (num > 100000) {
//       return `$${numberWithCommas(num, { precision: 0 })}`
//     } else {
//       return `$${numberWithCommas(num, { precision: 2 })}`
//     }
//   }
//
//  const totalPrizeFormatted = formatNumbers(totalPrizes)
//  const totalValueLockedFormatted = formatNumbers(totalValueLocked)

  return (
    <h4>
      TVL: {totalValueLocked}
    </h4>
    <h5>
      Total prizes weekly: {totalPrize}
    </h5>
  )
}