fix undefined error

2022-06-23 21:35:07 +10:00 · 2022-06-23 21:35:07 +10:00 · c02ef0ff48
parent 87428a7233
commit c02ef0ff48
3 changed files with 132 additions and 96 deletions
--- a/components/stats_page/StatsTotals.tsx
+++ b/components/stats_page/StatsTotals.tsx
@ -32,13 +32,12 @@ const getAverageStats = (
  symbol: string,
  type: string
 ): string => {
-  if (stats?.length > 0) {
+  if (stats.length > 0) {
    const priorDate = new Date(Date.now() - daysAgo * 24 * 60 * 60 * 1000)
    const selectedStatsData = stats.filter((s) => s.name === symbol)
    const timeFilteredStats = selectedStatsData.filter(
      (d) => new Date(d.time).getTime() >= priorDate.getTime()
    )
-
    const oldestStat = timeFilteredStats[0]
    const latestStat = timeFilteredStats[timeFilteredStats.length - 1]
    const avg =
@ -59,13 +58,12 @@ export default function StatsTotals({
  latestStats,
  stats,
  loadHistoricalStats,
+  loadLatestStats,
 }) {
  const { t } = useTranslation('common')
  const { width } = useViewport()
  const isMobile = width ? width < breakpoints.sm : false

-  console.log(stats)
-
  // get deposit and borrow values from stats
  const [depositValues, borrowValues]: [Values[], Values[]] = useMemo(() => {
    const depositValues: Values[] = []
@ -250,17 +248,17 @@ export default function StatsTotals({
                  ))}
                </tbody>
              </Table>
-            ) : (
+            ) : loadLatestStats ? (
              <>
                <div className="h-8 w-full animate-pulse rounded bg-th-bkg-3" />
                <div className="mt-1 h-8 w-full animate-pulse rounded bg-th-bkg-3" />
                <div className="mt-1 h-8 w-full animate-pulse rounded bg-th-bkg-3" />
              </>
-            )}
+            ) : null}
          </div>
-          {stats?.length > 0 ? (
-            <div className="pb-8">
-              <h2 className="mb-4">{t('average-deposit')}</h2>
+          <div className="pb-8">
+            <h2 className="mb-4">{t('average-deposit')}</h2>
+            {stats.length && latestStats.length ? (
              <Table>
                <thead>
                  <TrHead>
@ -298,17 +296,17 @@ export default function StatsTotals({
                  ))}
                </tbody>
              </Table>
-            </div>
-          ) : loadHistoricalStats ? (
-            <>
-              <div className="h-8 w-full animate-pulse rounded bg-th-bkg-3" />
-              <div className="mt-1 h-8 w-full animate-pulse rounded bg-th-bkg-3" />
-              <div className="mt-1 h-8 w-full animate-pulse rounded bg-th-bkg-3" />
-            </>
-          ) : null}
-          {stats?.length > 0 ? (
-            <>
-              <h2 className="mb-4">{t('average-borrow')}</h2>
+            ) : loadHistoricalStats || loadLatestStats ? (
+              <>
+                <div className="h-8 w-full animate-pulse rounded bg-th-bkg-3" />
+                <div className="mt-1 h-8 w-full animate-pulse rounded bg-th-bkg-3" />
+                <div className="mt-1 h-8 w-full animate-pulse rounded bg-th-bkg-3" />
+              </>
+            ) : null}
+          </div>
+          <>
+            <h2 className="mb-4">{t('average-borrow')}</h2>
+            {stats.length && latestStats.length ? (
              <Table>
                <thead>
                  <TrHead>
@ -346,87 +344,104 @@ export default function StatsTotals({
                  ))}
                </tbody>
              </Table>
-            </>
-          ) : loadHistoricalStats ? (
-            <>
-              <div className="h-8 w-full animate-pulse rounded bg-th-bkg-3" />
-              <div className="mt-1 h-8 w-full animate-pulse rounded bg-th-bkg-3" />
-              <div className="mt-1 h-8 w-full animate-pulse rounded bg-th-bkg-3" />
-            </>
-          ) : null}
+            ) : loadHistoricalStats || loadLatestStats ? (
+              <>
+                <div className="h-8 w-full animate-pulse rounded bg-th-bkg-3" />
+                <div className="mt-1 h-8 w-full animate-pulse rounded bg-th-bkg-3" />
+                <div className="mt-1 h-8 w-full animate-pulse rounded bg-th-bkg-3" />
+              </>
+            ) : null}
+          </>
        </>
      ) : (
        <>
          <div className="mb-8 border-b border-th-bkg-4">
            <h2 className="mb-4">{t('current-stats')}</h2>
-            {latestStats.map((stat) => (
-              <ExpandableRow
-                buttonTemplate={
-                  <div className="grid w-full grid-cols-12 grid-rows-2  text-left sm:grid-rows-1 sm:text-right">
-                    <div className="text-fgd-1 col-span-12 sm:col-span-6">
-                      <div className="flex items-center">
-                        <img
-                          alt=""
-                          width="20"
-                          height="20"
-                          src={`/assets/icons/${stat.name
-                            .split(/-|\//)[0]
-                            .toLowerCase()}.svg`}
-                          className={`mr-2.5`}
-                        />
-                        {stat.name}
+            {latestStats.length ? (
+              latestStats.map((stat) => (
+                <ExpandableRow
+                  buttonTemplate={
+                    <div className="grid w-full grid-cols-12 grid-rows-2  text-left sm:grid-rows-1 sm:text-right">
+                      <div className="text-fgd-1 col-span-12 sm:col-span-6">
+                        <div className="flex items-center">
+                          <img
+                            alt=""
+                            width="20"
+                            height="20"
+                            src={`/assets/icons/${stat.name
+                              .split(/-|\//)[0]
+                              .toLowerCase()}.svg`}
+                            className={`mr-2.5`}
+                          />
+                          {stat.name}
+                        </div>
+                      </div>
+                      <div className="col-span-6 sm:col-span-3">
+                        <div className="pb-0.5 text-xs text-th-fgd-3">
+                          {t('total-deposits')}
+                        </div>
+                        {formatNumberString(stat.totalDeposits, 0)}
+                      </div>
+                      <div className="col-span-6 sm:col-span-3">
+                        <div className="pb-0.5 text-xs text-th-fgd-3">
+                          {t('total-borrows')}
+                        </div>
+                        {formatNumberString(stat.totalBorrows, 0)}
                      </div>
                    </div>
-                    <div className="col-span-6 sm:col-span-3">
-                      <div className="pb-0.5 text-xs text-th-fgd-3">
-                        {t('total-deposits')}
+                  }
+                  key={stat.name}
+                  panelTemplate={
+                    <div className="grid grid-flow-row grid-cols-2 gap-4">
+                      <div className="text-left">
+                        <div className="pb-0.5 text-xs text-th-fgd-3">
+                          {t('deposit-rate')}
+                        </div>
+                        <span className="text-th-green">
+                          {formatNumberString(
+                            stat.depositInterest.toNumber(),
+                            2
+                          )}
+                          %
+                        </span>
                      </div>
-                      {formatNumberString(stat.totalDeposits, 0)}
-                    </div>
-                    <div className="col-span-6 sm:col-span-3">
-                      <div className="pb-0.5 text-xs text-th-fgd-3">
-                        {t('total-borrows')}
+                      <div className="text-left">
+                        <div className="pb-0.5 text-xs text-th-fgd-3">
+                          {t('borrow-rate')}
+                        </div>
+                        <span className="text-th-red">
+                          {formatNumberString(
+                            stat.borrowInterest.toNumber(),
+                            2
+                          )}
+                          %
+                        </span>
                      </div>
-                      {formatNumberString(stat.totalBorrows, 0)}
-                    </div>
-                  </div>
-                }
-                key={stat.name}
-                panelTemplate={
-                  <div className="grid grid-flow-row grid-cols-2 gap-4">
-                    <div className="text-left">
-                      <div className="pb-0.5 text-xs text-th-fgd-3">
-                        {t('deposit-rate')}
-                      </div>
-                      <span className="text-th-green">
-                        {formatNumberString(stat.depositInterest.toNumber(), 2)}
+                      <div className="text-left">
+                        <div className="pb-0.5 text-xs text-th-fgd-3">
+                          {t('utilization')}
+                        </div>
+                        {formatNumberString(
+                          stat.utilization
+                            .mul(I80F48.fromNumber(100))
+                            .toNumber(),
+                          2
+                        )}
                        %
-                      </span>
-                    </div>
-                    <div className="text-left">
-                      <div className="pb-0.5 text-xs text-th-fgd-3">
-                        {t('borrow-rate')}
                      </div>
-                      <span className="text-th-red">
-                        {formatNumberString(stat.borrowInterest.toNumber(), 2)}%
-                      </span>
                    </div>
-                    <div className="text-left">
-                      <div className="pb-0.5 text-xs text-th-fgd-3">
-                        {t('utilization')}
-                      </div>
-                      {formatNumberString(
-                        stat.utilization.mul(I80F48.fromNumber(100)).toNumber(),
-                        2
-                      )}
-                      %
-                    </div>
-                  </div>
-                }
-              />
-            ))}
+                  }
+                />
+              ))
+            ) : loadLatestStats ? (
+              <>
+                <div className="h-8 w-full animate-pulse rounded bg-th-bkg-3" />
+                <div className="mt-1 h-8 w-full animate-pulse rounded bg-th-bkg-3" />
+                <div className="mt-1 h-8 w-full animate-pulse rounded bg-th-bkg-3" />
+              </>
+            ) : null}
          </div>
-          {stats?.length > 0 ? (
+          {stats.length && latestStats.length ? (
            <div className="mb-8 border-b border-th-bkg-4">
              <h2 className="mb-4">{t('average-deposit')}</h2>
              {latestStats.map((stat) => (
@ -462,14 +477,14 @@ export default function StatsTotals({
                </Row>
              ))}
            </div>
-          ) : loadHistoricalStats ? (
+          ) : loadHistoricalStats || loadLatestStats ? (
            <>
              <div className="h-8 w-full animate-pulse rounded bg-th-bkg-3" />
              <div className="mt-1 h-8 w-full animate-pulse rounded bg-th-bkg-3" />
              <div className="mt-1 h-8 w-full animate-pulse rounded bg-th-bkg-3" />
            </>
          ) : null}
-          {stats?.length > 0 ? (
+          {stats.length && latestStats.length ? (
            <div className="mb-4 border-b border-th-bkg-4">
              <h2 className="mb-4">{t('average-borrow')}</h2>
              {latestStats.map((stat) => (
@ -505,7 +520,7 @@ export default function StatsTotals({
                </Row>
              ))}
            </div>
-          ) : loadHistoricalStats ? (
+          ) : loadHistoricalStats || loadLatestStats ? (
            <>
              <div className="h-8 w-full animate-pulse rounded bg-th-bkg-3" />
              <div className="mt-1 h-8 w-full animate-pulse rounded bg-th-bkg-3" />
--- a/hooks/useMangoStats.tsx
+++ b/hooks/useMangoStats.tsx
@ -29,6 +29,7 @@ const useMangoStats = () => {
    },
  ])
  const [latestStats, setLatestStats] = useState<any[]>([])
+  const [loadLatestStats, setLoadLatestStats] = useState<boolean>(false)
  const [loadHistoricalStats, setLoadHistoricalStats] = useState<boolean>(false)
  const [loadPerpStats, setLoadPerpStats] = useState<boolean>(false)
  const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
@ -38,8 +39,8 @@ const useMangoStats = () => {

  useEffect(() => {
    const fetchHistoricalStats = async () => {
+      setLoadHistoricalStats(true)
      try {
-        setLoadHistoricalStats(true)
        const response = await fetch(
          `https://mango-transaction-log.herokuapp.com/v3/stats/spot_stats_hourly?mango-group=${mangoGroupName}`
        )
@ -55,8 +56,8 @@ const useMangoStats = () => {

  useEffect(() => {
    const fetchHistoricalPerpStats = async () => {
+      setLoadPerpStats(true)
      try {
-        setLoadPerpStats(true)
        const response = await fetch(
          `https://mango-transaction-log.herokuapp.com/v3/stats/perp_stats_hourly?mango-group=${mangoGroupName}`
        )
@ -73,6 +74,7 @@ const useMangoStats = () => {
  useEffect(() => {
    const getLatestStats = async () => {
      if (mangoGroup) {
+        setLoadLatestStats(true)
        const rootBanks = await mangoGroup.loadRootBanks(connection)
        if (!config) return
        const latestStats = config.tokens.map((token) => {
@ -109,13 +111,21 @@ const useMangoStats = () => {
          }
        })
        setLatestStats(latestStats)
+        setLoadLatestStats(false)
      }
    }

    getLatestStats()
  }, [mangoGroup])

-  return { latestStats, stats, perpStats, loadHistoricalStats, loadPerpStats }
+  return {
+    latestStats,
+    loadLatestStats,
+    stats,
+    perpStats,
+    loadHistoricalStats,
+    loadPerpStats,
+  }
 }

 export default useMangoStats
--- a/pages/stats.tsx
+++ b/pages/stats.tsx
@ -27,8 +27,14 @@ export async function getStaticProps({ locale }) {
 export default function StatsPage() {
  const { t } = useTranslation('common')
  const TABS = ['Totals', 'Assets', 'Perps']
-  const { latestStats, stats, perpStats, loadHistoricalStats, loadPerpStats } =
-    useMangoStats()
+  const {
+    latestStats,
+    loadLatestStats,
+    stats,
+    perpStats,
+    loadHistoricalStats,
+    loadPerpStats,
+  } = useMangoStats()
  const [viewIndex, setViewIndex] = useState(0)
  const [activeTab, setActiveTab] = useState(TABS[0])
  const { width } = useViewport()
@ -77,6 +83,7 @@ export default function StatsPage() {
              stats={stats}
              loadHistoricalStats={loadHistoricalStats}
              loadPerpStats={loadPerpStats}
+              loadLatestStats={loadLatestStats}
            />
          ) : (
            <Swipeable index={viewIndex} onChangeIndex={handleChangeViewIndex}>
@ -84,6 +91,7 @@ export default function StatsPage() {
                latestStats={latestStats}
                stats={stats}
                loadHistoricalStats={loadHistoricalStats}
+                loadLatestStats={loadLatestStats}
              />
              <StatsAssets
                latestStats={latestStats}
@ -106,6 +114,7 @@ const TabContent = ({
  stats,
  loadHistoricalStats,
  loadPerpStats,
+  loadLatestStats,
 }) => {
  switch (activeTab) {
    case 'Totals':
@ -114,6 +123,7 @@ const TabContent = ({
          latestStats={latestStats}
          stats={stats}
          loadHistoricalStats={loadHistoricalStats}
+          loadLatestStats={loadLatestStats}
        />
      )
    case 'Assets':
@ -132,6 +142,7 @@ const TabContent = ({
          latestStats={latestStats}
          stats={stats}
          loadHistoricalStats={loadHistoricalStats}
+          loadLatestStats={loadLatestStats}
        />
      )
  }