🚸 spread chart: show "now" value

exactly · Mar 19, 2024 · 57a6b4b · 57a6b4b
1 parent 55631ca
commit 57a6b4b
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 35 deletions.
diff --git a/components/charts/SpreadModelChart/index.tsx b/components/charts/SpreadModelChart/index.tsx
@@ -1,37 +1,26 @@
 import React, { FC, Fragment, useMemo } from 'react';
 import { Box, Typography, useTheme } from '@mui/material';
-import {
-  ResponsiveContainer,
-  XAxis,
-  Tooltip,
-  ComposedChart,
-  Area,
-  CartesianGrid,
-  YAxis,
-  Line,
-  ReferenceLine,
-} from 'recharts';
+import { ResponsiveContainer, XAxis, Tooltip, ComposedChart, Area, CartesianGrid, YAxis, Line } from 'recharts';
+import dayjs from 'dayjs';
 
 import parseTimestamp from 'utils/parseTimestamp';
 import { toPercentage } from 'utils/utils';
 import LoadingChart from '../LoadingChart';
 import { type Entry } from '../TooltipChart';
 import { useTranslation } from 'react-i18next';
 import useSpreadModel from 'hooks/useSpreadModel';
-import useFloatingPoolAPR from 'hooks/useFloatingPoolAPR';
 
 type Props = {
   symbol: string;
 };
 
-const formatTimestampLabel = (value: string | number) => parseTimestamp(value, 'MMM DD');
-const formatTimestamp = (value: string | number) => parseTimestamp(value);
+const formatTimestampLabel = (value: number) => (dayjs.unix(value).isToday() ? 'Now' : parseTimestamp(value, 'MMM DD'));
+const formatTimestamp = (value: number) => (dayjs.unix(value).isToday() ? 'Now' : parseTimestamp(value));
 const formatPercentage = (value: number) => toPercentage(value as number);
 
 const SpreadModel: FC<Props> = ({ symbol }) => {
   const { t } = useTranslation();
   const { palette } = useTheme();
-  const { borrowAPR } = useFloatingPoolAPR(symbol);
 
   const { data, levels, loading } = useSpreadModel(symbol);
   const highlights = useMemo(() => data.filter(({ highlight }) => highlight), [data]);
@@ -81,11 +70,7 @@ const SpreadModel: FC<Props> = ({ symbol }) => {
               interval={0}
               tickCount={7}
             />
-            <Tooltip
-              content={
-                <CustomTooltip highlights={highlights} highlightColor={palette.colors[0]} variableRate={borrowAPR} />
-              }
-            />
+            <Tooltip content={<CustomTooltip highlights={highlights} highlightColor={palette.colors[0]} />} />
             <CartesianGrid stroke={palette.grey[300]} vertical={false} />
             {[...Array(levels)].map((_, i) => {
               const factor = i / (levels - 1);
@@ -117,13 +102,6 @@ const SpreadModel: FC<Props> = ({ symbol }) => {
               dot={{ r: 5, fill: palette.background.paper, strokeDasharray: '0' }}
               isAnimationActive={false}
             />
-            <ReferenceLine
-              xAxisId="xaxis"
-              yAxisId="yaxis"
-              y={borrowAPR}
-              stroke={palette.text.primary}
-              strokeDasharray="5 5"
-            />
           </ComposedChart>
         )}
       </ResponsiveContainer>
@@ -135,16 +113,14 @@ const CustomTooltip = ({
   payload,
   highlights,
   highlightColor,
-  variableRate,
 }: {
   payload?: (Omit<Entry, 'value'> & { value: number | number[]; payload: Record<string, number | number[]> })[];
   highlights: Record<string, number | number[]>[];
   highlightColor: string;
-  variableRate: number | undefined;
 }) => {
   const { t } = useTranslation();
   const highlight = useMemo(() => {
-    const mid = payload?.find((p) => p.dataKey === 'area0')?.payload;
+    const mid = payload?.find((p) => p.dataKey === 'rate')?.payload;
     if (!mid) return undefined;
     const date = mid.date;
     if (Array.isArray(date)) return undefined;
@@ -155,9 +131,8 @@ const CustomTooltip = ({
     });
     return entry;
   }, [highlights, payload]);
-  const { palette } = useTheme();
 
-  const date = highlight?.date && !Array.isArray(highlight.date) ? formatTimestamp(highlight.date) : undefined;
+  const date = highlight?.date && !Array.isArray(highlight.date) ? t(formatTimestamp(highlight.date)) : undefined;
   const rate = highlight?.rate && !Array.isArray(highlight.rate) ? toPercentage(highlight.rate) : undefined;
 
   return rate ? (
@@ -181,6 +156,7 @@ const CustomTooltip = ({
       )}
       {(payload || []).map(({ dataKey, value }) => {
         if (dataKey !== 'area0' || !rate) return null;
+        if (Array.isArray(value) && value[0] === value[1]) return null;
         return (
           <Fragment key={dataKey}>
             <Typography variant="h6" fontSize="12px">
@@ -189,9 +165,6 @@ const CustomTooltip = ({
             <Typography variant="h6" fontSize="12px">
               {t('Max')}: {Array.isArray(value) ? toPercentage(value[1]) : value}
             </Typography>
-            <Typography variant="h6" fontSize="12px" color={palette.green}>
-              {t('Variable Rate')}: {toPercentage(variableRate)}
-            </Typography>
           </Fragment>
         );
       })}

diff --git a/hooks/useSpreadModel.ts b/hooks/useSpreadModel.ts
@@ -5,6 +5,7 @@ import useAccountData from './useAccountData';
 import {
   fixedRate,
   fixedUtilization,
+  floatingInterestRateCurve,
   floatingUtilization,
   globalUtilization,
   spreadModel,
@@ -79,6 +80,11 @@ export default function useSpreadModel(symbol: string) {
         extend.highlight = 1;
       }
 
+      if (m === now) {
+        extend.rate = Number(floatingInterestRateCurve(irm)(currentUFloating, currentUGlobal)) / 1e18;
+        extend.highlight = 1;
+      }
+
       points.push({
         date: Number(m),
         area: [Number(model(m, -WAD)) / 1e18, Number(model(m, WAD)) / 1e18],

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -17,6 +17,8 @@ import Navbar from 'components/Navbar';
 import { globals } from 'styles/theme';
 import { GlobalErrorProvider } from 'contexts/GlobalErrorContext';
 import { usePageTracking } from 'hooks/usePageTracking';
+import dayjs from 'dayjs';
+import isToday from 'dayjs/plugin/isToday';
 
 import { ModalContextProvider } from 'contexts/ModalContext';
 import OperationsModal from 'components/OperationsModal';
@@ -29,6 +31,7 @@ import GetEXAModal from 'components/GetEXA/ModalWrapper';
 import MaturityDateReminder from '../components/MaturityDateReminder';
 import NewIRMBanner from '../components/NewIRMBanner';
 
+dayjs.extend(isToday);
 const { maxWidth } = globals;
 
 const Modals = () => (