Remove expensive historic prices API call

components/stats-page/StatsTotals.tsx

@@ -1,10 +1,6 @@
 import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
 import { formatBalanceDisplay, tokenPrecision } from '../../utils/index'
 import useMangoStats from '../../hooks/useMangoStats'
-import useHistoricPrices from '../../hooks/useHistoricPrices'
-import useMarketList from '../../hooks/useMarketList'
-import useMangoStore from '../../stores/useMangoStore'
-import Chart from '../Chart'
 
 const icons = {
   BTC: '/assets/icons/btc.svg',
@@ -18,124 +14,9 @@ const icons = {
 
 export default function StatsTotals() {
   const { latestStats, stats } = useMangoStats()
-  const { prices } = useHistoricPrices()
-  const backupPrices = useMangoStore((s) => s.selectedMangoGroup.prices)
-  const { getTokenIndex, symbols } = useMarketList()
-
-  const startTimestamp = 1622905200000
-
-  const trimmedStats = stats.filter(
-    (stat) => new Date(stat.hourly).getTime() >= startTimestamp
-  )
-
-  // get deposit and borrow values from stats
-  const depositValues = []
-  const borrowValues = []
-  if (prices) {
-    for (let i = 0; i < trimmedStats.length; i++) {
-      // use the current price if no match for hour from the prices api
-      const price =
-        trimmedStats[i].symbol !== 'USDC' &&
-        prices[trimmedStats[i].symbol][trimmedStats[i].hourly]
-          ? prices[trimmedStats[i].symbol][trimmedStats[i].hourly]
-          : backupPrices[getTokenIndex(symbols[trimmedStats[i].symbol])]
-
-      const depositValue =
-        trimmedStats[i].symbol === 'USDC'
-          ? trimmedStats[i].totalDeposits
-          : trimmedStats[i].totalDeposits * price
-
-      const borrowValue =
-        trimmedStats[i].symbol === 'USDC'
-          ? trimmedStats[i].totalBorrows
-          : trimmedStats[i].totalBorrows * price
-
-      depositValues.push({
-        symbol: trimmedStats[i].symbol,
-        value: depositValue,
-        time: trimmedStats[i].hourly,
-      })
-
-      borrowValues.push({
-        symbol: trimmedStats[i].symbol,
-        value: borrowValue,
-        time: trimmedStats[i].hourly,
-      })
-    }
-  }
-
-  const formatValues = (values) => {
-    // get value for each symbol every hour
-    const hours = values.reduce((acc, d) => {
-      const found = acc.find((a) => a.time === d.time && a.symbol === d.symbol)
-      const value = {
-        value: d.value,
-        symbol: d.symbol,
-        time: d.time,
-      }
-      if (!found) {
-        acc.push(value)
-      } else {
-        found.value = d.value
-      }
-      return acc
-    }, [])
-
-    // sum the values for each hour
-    const holder = {}
-
-    hours.forEach(function (d) {
-      if (d.time in holder) {
-        holder[d.time] = holder[d.time] + d.value
-      } else {
-        holder[d.time] = d.value
-      }
-    })
-
-    const points = []
-
-    for (const prop in holder) {
-      points.push({ time: prop, value: holder[prop] })
-    }
-    return points
-  }
 
   return (
     <>
-      <div className="grid grid-flow-col grid-cols-1 grid-rows-2 md:grid-cols-2 md:grid-rows-1 gap-4 pb-8">
-        <div
-          className="border border-th-bkg-3 relative md:mb-0 p-4 rounded-md"
-          style={{ height: '300px' }}
-        >
-          <Chart
-            title="Total Deposit Value"
-            xAxis="time"
-            yAxis="value"
-            data={formatValues(depositValues)}
-            labelFormat={(x) =>
-              x &&
-              '$' + x.toLocaleString(undefined, { maximumFractionDigits: 0 })
-            }
-            type="area"
-          />
-        </div>
-        <div
-          className="border border-th-bkg-3 relative p-4 rounded-md"
-          style={{ height: '300px' }}
-        >
-          <Chart
-            title="Total Borrow Value"
-            xAxis="time"
-            yAxis="value"
-            data={formatValues(borrowValues)}
-            labelFormat={(x) =>
-              x &&
-              '$' + x.toLocaleString(undefined, { maximumFractionDigits: 0 })
-            }
-            type="area"
-          />
-        </div>
-      </div>
       <div className="md:flex md:flex-col min-w-full">
         <Table className="min-w-full divide-y divide-th-bkg-2">
           <Thead>

hooks/useHistoricPrices.tsx

@@ -1,20 +0,0 @@
-import { useEffect, useState } from 'react'
-
-const useHistoricPrices = () => {
-  const [prices, setPrices] = useState<any>(null)
-
-  useEffect(() => {
-    const fetchPrices = async () => {
-      const response = await fetch(
-        `https://mango-transaction-log.herokuapp.com/stats/prices/2oogpTYm1sp6LPZAWD3bp2wsFpnV2kXL1s52yyFhW5vp`
-      )
-      const prices = await response.json()
-      setPrices(prices)
-    }
-    fetchPrices()
-  }, [])
-
-  return { prices }
-}
-
-export default useHistoricPrices