🚧 historical rates

Author: cruzdanilo

components/charts/HistoricalRateChart/index.tsx

@@ -1,47 +1,132 @@
 import { Box, Checkbox, FormControlLabel, Typography, useTheme } from '@mui/material';
-import useHistoricalRates from 'hooks/useHistoricalRates';
-import React, { FC, useCallback, useMemo, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import { formatEther } from 'viem';
+import { usePublicClient } from 'wagmi';
+import { floatingDepositRates, floatingUtilization } from '@exactly/lib';
+
+import { ratePreviewerAbi, ratePreviewerAddress, ratePreviewerCode } from 'generated/wagmi';
+import useAccountData from 'hooks/useAccountData';
+import { useGlobalError } from 'contexts/GlobalErrorContext';
+import { defaultChain } from 'utils/client';
 import { toPercentage } from 'utils/utils';
+import { track } from 'utils/mixpanel';
 import ButtonsChart from '../ButtonsChart';
 import LoadingChart from '../LoadingChart';
 import TooltipChart from '../TooltipChart';
-import { track } from 'utils/mixpanel';
 
 type Props = {
   symbol: string;
 };
 
+type Range = '1W' | '1M' | '3M';
+
+const WINDOW_SECONDS: Record<Range, number> = { '1W': 7 * 86_400, '1M': 30 * 86_400, '3M': 90 * 86_400 };
+const SECONDS_PER_BLOCK: Record<number, number> = { 1: 12, 10: 2, 8453: 2, 11_155_420: 2, 84_532: 2 };
+const POINTS = 30;
+const CONCURRENCY = 8;
+
 const HistoricalRateChart: FC<Props> = ({ symbol }) => {
   const { t } = useTranslation();
-  const [showUtilization, setShowUtilization] = useState(false);
   const { palette } = useTheme();
-  const { loading, rates, getRates } = useHistoricalRates(symbol);
+  const { setIndexerError } = useGlobalError();
+  const [showUtilization, setShowUtilization] = useState(false);
+  const [range, setRange] = useState<Range>('1W');
+
+  const { marketAccount } = useAccountData(symbol);
+  const market = marketAccount?.market;
+  const client = usePublicClient({ chainId: defaultChain.id });
+  const ratePreviewer = ratePreviewerAddress[defaultChain.id as keyof typeof ratePreviewerAddress];
+  const code = ratePreviewerCode[defaultChain.id as keyof typeof ratePreviewerCode];
 
-  const sortedRates = useMemo(() => rates.sort((a, b) => (a.date > b.date ? 1 : -1)), [rates]);
+  const {
+    data: points = [],
+    isLoading,
+    isError,
+  } = useQuery({
+    queryKey: ['historicalRates', defaultChain.id, market, range],
+    enabled: Boolean(client && market && ratePreviewer && code),
+    staleTime: 60_000,
+    queryFn: async () => {
+      if (!client || !market || !ratePreviewer || !code) return [];
+
+      const blockTime = SECONDS_PER_BLOCK[defaultChain.id] ?? 2;
+      const latest = await client.getBlockNumber();
+      const anchor = Number((await client.getBlock({ blockNumber: latest })).timestamp);
+      const span = BigInt(Math.ceil(WINDOW_SECONDS[range] / blockTime));
+      const from = latest > span ? latest - span : 1n;
+      const width = latest - from;
+      const count = width < BigInt(POINTS) ? Number(width) + 1 : POINTS;
+      const blocks = [
+        ...new Set(
+          Array.from({ length: count }, (_, i) => from + (width * BigInt(i)) / BigInt(Math.max(count - 1, 1))),
+        ),
+      ];
+
+      const series: { date: number; depositApr: number; borrowApr: number; utilization: number }[] = [];
+      for (let i = 0; i < blocks.length; i += CONCURRENCY) {
+        const batch = await Promise.allSettled(
+          blocks.slice(i, i + CONCURRENCY).map(async (blockNumber) => {
+            const snapshot = await client.readContract({
+              address: ratePreviewer,
+              abi: ratePreviewerAbi,
+              functionName: 'snapshot',
+              blockNumber,
+              stateOverride: [{ address: ratePreviewer, code }],
+            });
+            const state = snapshot.find((s) => s.market.toLowerCase() === market.toLowerCase());
+            if (!state) return undefined;
+            const timestamp = anchor - Number(latest - blockNumber) * blockTime;
+            const deposit = floatingDepositRates(
+              [
+                {
+                  ...state,
+                  lastFloatingDebtUpdate: Number(state.lastFloatingDebtUpdate),
+                  lastAccumulatorAccrual: Number(state.lastAccumulatorAccrual),
+                  maxFuturePools: Number(state.maxFuturePools),
+                },
+              ],
+              timestamp,
+            )[0];
+            return {
+              date: timestamp * 1_000,
+              depositApr: deposit ? Number(formatEther(deposit.rate)) : 0,
+              borrowApr: Number(formatEther(state.floatingRate)),
+              utilization: state.floatingAssets
+                ? Number(formatEther(floatingUtilization(state.floatingAssets, state.floatingDebt)))
+                : 0,
+            };
+          }),
+        );
+        for (const result of batch) if (result.status === 'fulfilled' && result.value) series.push(result.value);
+      }
+
+      return series.sort((a, b) => a.date - b.date);
+    },
+  });
+
+  const loading = isLoading || !marketAccount;
+
+  useEffect(() => {
+    if (isError) setIndexerError();
+  }, [isError, setIndexerError]);
 
   const buttons = useMemo(
     () => [
-      {
-        label: t('1W'),
-        onClick: () => getRates(30, 3_600 * 6),
-      },
-      {
-        label: t('1M'),
-        onClick: () => getRates(30, 3_600 * 24),
-      },
-      {
-        label: t('3M'),
-        onClick: () => getRates(90, 3_600 * 24),
-      },
+      { label: t('1W'), onClick: () => setRange('1W') },
+      { label: t('1M'), onClick: () => setRange('1M') },
+      { label: t('3M'), onClick: () => setRange('3M') },
     ],
-    [getRates, t],
+    [t],
   );
 
-  const formatDate = useCallback((date: Date, year?: boolean) => {
-    return date.toLocaleDateString('en-us', { year: year ? 'numeric' : undefined, month: 'short', day: '2-digit' });
-  }, []);
+  const formatDate = useCallback(
+    (date: Date, year?: boolean) =>
+      date.toLocaleDateString('en-us', { year: year ? 'numeric' : undefined, month: 'short', day: '2-digit' }),
+    [],
+  );
 
   const onShowUtilizationChange = useCallback(() => {
     setShowUtilization((prev) => !prev);
@@ -55,7 +140,7 @@ const HistoricalRateChart: FC<Props> = ({ symbol }) => {
   }, [showUtilization, symbol]);
 
   return (
-    <Box display="flex" flexDirection="column" width="100%" height="100%" gap={2}>
+    <Box data-testid="historical-rate-chart" display="flex" flexDirection="column" width="100%" height="100%" gap={2}>
       <Box display="flex" justifyContent="space-between">
         <Typography variant="h6" fontSize="16px">
           {t('Historical Variable Rates')}
@@ -67,14 +152,22 @@ const HistoricalRateChart: FC<Props> = ({ symbol }) => {
       <ResponsiveContainer width="100%" height="100%">
         {loading ? (
           <LoadingChart />
+        ) : points.length < 2 ? (
+          <Box display="flex" width="100%" height="100%" alignItems="center" justifyContent="center">
+            <Typography color="grey.500" variant="subtitle2" fontSize="14px">
+              {t('Not enough variable rate activity to chart yet.')}
+            </Typography>
+          </Box>
         ) : (
-          <LineChart data={sortedRates} margin={{ top: 5, bottom: 5 }}>
+          <LineChart data={points} margin={{ top: 5, bottom: 5 }}>
             <CartesianGrid horizontal vertical={false} stroke={palette.grey[300]} />
             <XAxis
+              dataKey="date"
+              type="number"
+              domain={['dataMin', 'dataMax']}
               minTickGap={50}
               padding={{ left: 20, right: 30 }}
-              dataKey="date"
-              tickFormatter={(value) => (value instanceof Date ? formatDate(value as Date) : '')}
+              tickFormatter={(value) => formatDate(new Date(value as number))}
               stroke="#B4BABF"
               fontSize="12px"
               height={20}
@@ -99,9 +192,9 @@ const HistoricalRateChart: FC<Props> = ({ symbol }) => {
               />
             )}
             <Tooltip
-              labelFormatter={(value) => (value instanceof Date ? formatDate(value as Date, true) : '')}
+              labelFormatter={(value) => formatDate(new Date(value as number), true)}
               formatter={(value) => toPercentage(value as number)}
-              content={<TooltipChart itemSorter={(a, b) => (a.value > b.value ? -1 : 1)} />}
+              content={<TooltipChart sortItems={(a, b) => (a.value > b.value ? -1 : 1)} />}
             />
             <Line
               yAxisId="left"
@@ -141,12 +234,7 @@ const HistoricalRateChart: FC<Props> = ({ symbol }) => {
             <Checkbox
               size="small"
               onChange={onShowUtilizationChange}
-              sx={{
-                color: palette.blue,
-                '&.Mui-checked': {
-                  color: palette.blue,
-                },
-              }}
+              sx={{ color: palette.blue, '&.Mui-checked': { color: palette.blue } }}
             />
           }
           label={

components/charts/StakeChart/index.tsx

@@ -117,7 +117,7 @@ const StakeChart = () => {
               <Tooltip
                 labelFormatter={(value) => formatDate(new Date((value * 1000) as number))}
                 formatter={(value) => toPercentage(value as number)}
-                content={<TooltipChart itemSorter={(a, b) => (a.value > b.value ? -1 : 1)} />}
+                content={<TooltipChart sortItems={(a, b) => (a.value > b.value ? -1 : 1)} />}
               />
               <Area
                 yAxisId="left"

components/charts/TooltipChart/index.tsx

@@ -15,7 +15,7 @@ export type TooltipChartProps = {
   labelFormatter?: (value: Date | undefined) => ReactNode;
   formatter?: (value: number | undefined) => ReactNode;
   formatterName?: (name: string | undefined) => ReactNode;
-  itemSorter?: (a: Entry, b: Entry) => number;
+  sortItems?: (a: Entry, b: Entry) => number;
   ignoreKeys?: string[];
   additionalInfo?: ReactNode;
   additionalInfoPosition?: 'top' | 'bottom';
@@ -29,15 +29,15 @@ function TooltipChart({
   labelFormatter,
   formatterName,
   formatter,
-  itemSorter,
+  sortItems,
   ignoreKeys,
   additionalInfo,
   opacity = 1,
   additionalInfoPosition = 'bottom',
 }: TooltipChartProps) {
   const sortedPayload = useMemo(
-    () => (itemSorter && payload ? payload.sort(itemSorter) : payload),
-    [payload, itemSorter],
+    () => (typeof sortItems === 'function' && payload ? [...payload].sort(sortItems) : payload),
+    [payload, sortItems],
   );
 
   if (!active || !sortedPayload || !sortedPayload.length) return null;

contexts/GlobalErrorContext.tsx

@@ -1,5 +1,5 @@
 import Close from '@mui/icons-material/Close';
-import { Alert, IconButton, Link, Slide, SlideProps, Snackbar, Typography } from '@mui/material';
+import { Alert, IconButton, Slide, SlideProps, Snackbar, Typography } from '@mui/material';
 import React, { createContext, useState, useCallback, PropsWithChildren, FC, useContext, ReactNode } from 'react';
 import { Trans } from 'react-i18next';
 
@@ -25,20 +25,7 @@ export const GlobalErrorProvider: FC<PropsWithChildren> = ({ children }) => {
   const setIndexerError = useCallback(() => {
     setError(
       <Typography>
-        <Trans
-          i18nKey="Whoops! Our <1>indexer node</1> is currently experiencing issues and some information may not be displayed."
-          components={{
-            1: (
-              <Link
-                href="https://status.thegraph.com/"
-                target="_blank"
-                rel="noopener noreferrer"
-                style={{ textDecoration: 'none' }}
-                sx={{ color: 'blue' }}
-              />
-            ),
-          }}
-        />
+        <Trans i18nKey="Whoops! We're having trouble loading some data right now. Please try again shortly." />
       </Typography>,
     );
   }, []);