Final delivery money market (includes the charts)

apps/frontend/.env.example

@@ -1,3 +1,5 @@
+REACT_APP_RATES_HISTORY_API_URL=https://bob-mm-cache.test.sovryn.app/data/rates-history
+
 REACT_APP_GRAPH_RSK=https://subgraph.test.sovryn.app/subgraphs/name/DistributedCollective/sovryn-subgraph
 
 REACT_APP_GRAPH_BOB=https://bob-ambient-subgraph.test.sovryn.app/subgraphs/name/DistributedCollective/bob-ambient-subgraph
@@ -23,4 +25,4 @@ REACT_APP_ENABLE_SERVICE_WORKER=false
 REACT_APP_SIMULATE_TX=false
 REACT_APP_ESTIMATOR_URI=https://simulator.sovryn.app
 
-REACT_APP_DATADOG_CLIENT_TOKEN=
+REACT_APP_DATADOG_CLIENT_TOKEN=

apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx

@@ -9,8 +9,8 @@ import { Paragraph, Tabs, TabSize, TabType } from '@sovryn/ui';
 
 import { useAaveReservesData } from '../../../hooks/aave/useAaveReservesData';
 import { translations } from '../../../locales/i18n';
-import { TAB_ITEMS } from './AaveReserveOverviewPage.constants';
 import { COMMON_SYMBOLS } from '../../../utils/asset';
+import { TAB_ITEMS } from './AaveReserveOverviewPage.constants';
 import { BorrowDetailsGraph } from './components/BorrowDetailsGraph/BorrowDetailsGraph';
 import { EModeDetails } from './components/EModeDetails/EModeDetails';
 import { InterestRateModelGraph } from './components/InterestRateModelGraph/InterestRateModelGraph';
@@ -84,7 +84,7 @@ const AaveReserveOverviewPage: FC = () => {
           <div
             className={classNames(
               { hidden: activeOverviewTab !== OverviewTab.WALLET },
-              'lg:block space-y-4 w-[450px] shrink-0',
+              'lg:block space-y-4 w-full lg:w-[450px] shrink-0',
             )}
           >
             <WalletOverview symbol={symbol} />

apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx

@@ -7,7 +7,13 @@ import { Accordion, Link, Paragraph } from '@sovryn/ui';
 
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
+import { AAVE_CONTRACT_ADDRESSES } from '../../../../../constants/aave';
 import { Reserve } from '../../../../../hooks/aave/useAaveReservesData';
+import {
+  useAaveReservesHistory,
+  ReserveRateTimeRange,
+  ESupportedTimeRanges,
+} from '../../../../../hooks/aave/useAaveReservesHistory';
 import { useIsMobile } from '../../../../../hooks/useIsMobile';
 import { translations } from '../../../../../locales/i18n';
 import { formatAmountWithSuffix } from '../../../../../utils/math';
@@ -28,6 +34,23 @@ export const BorrowDetailsGraph: FC<BorrowDetailsGraphProps> = ({
 
   const borrowStats = useMemo(() => normalizeBorrowStats(reserve), [reserve]);
 
+  const [timeRange, setTimeRange] = useState<ReserveRateTimeRange>(
+    ESupportedTimeRanges.OneMonth,
+  );
+  const { data: history } = useAaveReservesHistory(
+    `${reserve.underlyingAsset}${AAVE_CONTRACT_ADDRESSES.POOL_ADDRESSES_PROVIDER}`,
+    timeRange,
+  );
+
+  const borrowChartData = useMemo(
+    () =>
+      history.map(i => ({
+        x: i.date,
+        y: i.variableBorrowRate * 100,
+      })),
+    [history],
+  );
+
   return (
     <Accordion
       label={
@@ -123,11 +146,11 @@ export const BorrowDetailsGraph: FC<BorrowDetailsGraphProps> = ({
 
         <Chart
           input={{
-            // TODO: implement once data is available
-            data: [],
-            label: '',
-            lineColor: theme.colors.primary[30],
+            data: borrowChartData,
+            label: t(pageTranslations.chart.aprVarLabel),
+            lineColor: theme.colors.positive,
           }}
+          onTimeRangeChange={setTimeRange}
         />
 
         <div className="space-y-6">

apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx

@@ -3,6 +3,8 @@ import React, { FC, useCallback, useEffect, useRef } from 'react';
 import ChartLibrary from 'chart.js/auto';
 import 'chartjs-adapter-date-fns';
 
+import { TimeRangeButtons } from '../../../TimeRangeButtons/TimeRangeButtons';
+import { ReserveRateTimeRange } from './../../../../../../../hooks/aave/useAaveReservesHistory';
 import {
   CUSTOM_CANVAS_BACKGROUND_COLOR,
   GRID_COLOR,
@@ -13,9 +15,10 @@ import { htmlLegendPlugin } from './Chart.utils';
 
 type ChartProps = {
   input: ChartData;
+  onTimeRangeChange: (range: ReserveRateTimeRange) => void;
 };
 
-export const Chart: FC<ChartProps> = ({ input }) => {
+export const Chart: FC<ChartProps> = ({ input, onTimeRangeChange }) => {
   const canvas = useRef<HTMLCanvasElement>(null);
   const chartRef = useRef<ChartLibrary | null>(null);
 
@@ -111,7 +114,10 @@ export const Chart: FC<ChartProps> = ({ input }) => {
 
   return (
     <div onClick={stopPropagation} className="lg:p-6 lg:bg-gray-80">
-      <span id="legend-container-borrow-chart" className="text-tiny"></span>
+      <div className="flex items-center justify-between">
+        <span id="legend-container-borrow-chart" className="text-tiny"></span>
+        <TimeRangeButtons onChange={onTimeRangeChange} />
+      </div>
       <canvas ref={canvas}></canvas>
     </div>
   );

apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx

@@ -1,6 +1,7 @@
 import React, { FC, useMemo, useState } from 'react';
 
 import { t } from 'i18next';
+import { useSearchParams } from 'react-router-dom';
 
 import { theme } from '@sovryn/tailwindcss-config';
 import { Accordion, Link } from '@sovryn/ui';
@@ -9,12 +10,12 @@ import { Decimal } from '@sovryn/utils';
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
 import { AAVE_CONTRACT_ADDRESSES } from '../../../../../constants/aave';
+import { useAaveInterestRatesData } from '../../../../../hooks/aave/useAaveRates';
 import { Reserve } from '../../../../../hooks/aave/useAaveReservesData';
 import { useIsMobile } from '../../../../../hooks/useIsMobile';
 import { translations } from '../../../../../locales/i18n';
 import { getBobExplorerUrl } from '../../../../../utils/helpers';
 import { Chart } from './components/Chart/Chart';
-import { RatesData } from './components/Chart/Chart.types';
 
 const pageTranslations = translations.aaveReserveOverviewPage.interestRateModel;
 
@@ -25,6 +26,9 @@ type InterestRateModelGraphProps = {
 export const InterestRateModelGraph: FC<InterestRateModelGraphProps> = ({
   reserve,
 }) => {
+  const [searchParams] = useSearchParams();
+  const symbol = searchParams.get('asset') || 'ETH';
+  const { data: rates } = useAaveInterestRatesData(symbol);
   const { isMobile } = useIsMobile();
   const [open, setOpen] = useState(true);
 
@@ -46,6 +50,7 @@ export const InterestRateModelGraph: FC<InterestRateModelGraphProps> = ({
     [reserve.borrowUsageRatio],
   );
 
+  if (!rates) return null;
   return (
     <Accordion
       label={
@@ -80,11 +85,10 @@ export const InterestRateModelGraph: FC<InterestRateModelGraphProps> = ({
 
         <Chart
           meta={{
-            // TODO: implement this once data is available
-            label: t(pageTranslations.chart.label1),
+            label: t(pageTranslations.chart.aprVarLabel),
             lineColor: theme.colors['primary-30'],
           }}
-          rates={{} as RatesData}
+          rates={rates}
         />
 
         {/* statistics */}

apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx

@@ -33,23 +33,23 @@ export const Chart: FC<ChartProps> = ({ meta, rates }) => {
     () =>
       CHART_PERCENTAGES.map(x => ({
         x: x * 100,
-        y: calculateVariableInterestRateModel(x, rates) * 100,
+        y: calculateVariableInterestRateModel(x, rates).mul(100).toNumber(),
       })),
     [rates],
   );
 
   const optimalPercentage = useMemo(
     () =>
       rates.optimalUsageRatio
-        ? parseFloat((parseFloat(rates.optimalUsageRatio) * 100).toFixed(2))
+        ? Math.round(rates.optimalUsageRatio.mul(100).toNumber() * 100) / 100
         : 0,
     [rates.optimalUsageRatio],
   );
 
   const currentPercentage = useMemo(
     () =>
       rates.currentUsageRatio
-        ? parseFloat((parseFloat(rates.currentUsageRatio) * 100).toFixed(2))
+        ? Math.round(rates.currentUsageRatio.mul(100).toNumber() * 100) / 100
         : 0,
     [rates.currentUsageRatio],
   );

apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.types.ts

@@ -1,3 +1,5 @@
+import { Decimal } from '@sovryn/utils';
+
 export type MockData<T> = {
   data1: T[];
   data2: T[];
@@ -8,13 +10,13 @@ export type MockData<T> = {
 };
 
 export interface RatesData {
-  currentUsageRatio: string;
-  optimalUsageRatio: string;
-  baseVariableBorrowRate: string;
-  variableRateSlope1: string;
-  variableRateSlope2: string;
+  currentUsageRatio: Decimal;
+  optimalUsageRatio: Decimal;
+  baseVariableBorrowRate: Decimal;
+  variableRateSlope1: Decimal;
+  variableRateSlope2: Decimal;
   underlyingAsset: string;
   name: string;
   symbol: string;
-  decimals: string;
+  decimals: number;
 }

apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.utils.ts

@@ -1,6 +1,8 @@
+import { Decimal } from '@sovryn/utils';
+
 import { RatesData } from './Chart.types';
 
-const getOrCreateLegendList = id => {
+const getOrCreateLegendList = (id: string) => {
   const legendContainer = document.getElementById(id);
   if (!legendContainer) {
     return;
@@ -92,35 +94,41 @@ export const htmlLegendPlugin = {
 
 export const calculateInterestRateModel = (
   utilization: number,
-  baseRate: number,
-  optimalUtilization: number,
-  initialSlope: number,
-  secondarySlope: number,
-): number => {
+  baseRate: Decimal,
+  optimalUtilization: Decimal,
+  initialSlope: Decimal,
+  secondarySlope: Decimal,
+): Decimal => {
   if (utilization === 0) {
-    return 0;
+    return Decimal.ZERO;
   }
 
-  if (utilization <= optimalUtilization) {
-    return baseRate + (utilization / optimalUtilization) * initialSlope;
+  const utilizationDecimal = Decimal.from(utilization);
+
+  if (utilizationDecimal.lte(optimalUtilization)) {
+    return baseRate.add(
+      utilizationDecimal.div(optimalUtilization).mul(initialSlope),
+    );
   }
 
-  return (
-    baseRate +
-    initialSlope +
-    ((utilization - optimalUtilization) / (1 - optimalUtilization)) *
-      secondarySlope
-  );
+  return baseRate
+    .add(initialSlope)
+    .add(
+      utilizationDecimal
+        .sub(optimalUtilization)
+        .div(Decimal.from(1).sub(optimalUtilization))
+        .mul(secondarySlope),
+    );
 };
 
 export const calculateVariableInterestRateModel = (
   utilization: number,
   rates: RatesData,
-): number => {
-  const baseRate = parseFloat(rates.baseVariableBorrowRate);
-  const optimalUtilization = parseFloat(rates.optimalUsageRatio);
-  const initialSlope = parseFloat(rates.variableRateSlope1);
-  const secondarySlope = parseFloat(rates.variableRateSlope2);
+) => {
+  const baseRate = rates.baseVariableBorrowRate;
+  const optimalUtilization = rates.optimalUsageRatio;
+  const initialSlope = rates.variableRateSlope1;
+  const secondarySlope = rates.variableRateSlope2;
 
   return calculateInterestRateModel(
     utilization,

apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx

@@ -8,7 +8,13 @@ import { Accordion, Icon, IconNames, Paragraph } from '@sovryn/ui';
 
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
+import { AAVE_CONTRACT_ADDRESSES } from '../../../../../constants/aave';
 import { Reserve } from '../../../../../hooks/aave/useAaveReservesData';
+import {
+  ESupportedTimeRanges,
+  ReserveRateTimeRange,
+  useAaveReservesHistory,
+} from '../../../../../hooks/aave/useAaveReservesHistory';
 import { useIsMobile } from '../../../../../hooks/useIsMobile';
 import { translations } from '../../../../../locales/i18n';
 import { formatAmountWithSuffix } from '../../../../../utils/math';
@@ -29,6 +35,23 @@ export const SupplyDetailsGraph: FC<SupplyDetailsGraphProps> = ({
 
   const supplyStats = useMemo(() => normalizeSupplyStats(reserve), [reserve]);
 
+  const [timeRange, setTimeRange] = useState<ReserveRateTimeRange>(
+    ESupportedTimeRanges.OneMonth,
+  );
+  const { data: history } = useAaveReservesHistory(
+    `${reserve.underlyingAsset}${AAVE_CONTRACT_ADDRESSES.POOL_ADDRESSES_PROVIDER}`,
+    timeRange,
+  );
+
+  const supplyChartData = useMemo(
+    () =>
+      history.map(i => ({
+        x: i.date,
+        y: i.liquidityRate * 100,
+      })),
+    [history],
+  );
+
   return (
     <Accordion
       label={
@@ -111,11 +134,11 @@ export const SupplyDetailsGraph: FC<SupplyDetailsGraphProps> = ({
 
         <Chart
           input={{
-            // TODO: implement once data is available
-            data: [],
-            label: t(pageTranslations.chart.label1),
+            data: supplyChartData,
+            label: t(pageTranslations.chart.suppApr),
             lineColor: theme.colors['primary-30'],
           }}
+          onTimeRangeChange={setTimeRange}
         />
 
         <div className="space-y-6">

apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.tsx

@@ -3,6 +3,8 @@ import React, { FC, useCallback, useEffect, useRef } from 'react';
 import ChartLibrary from 'chart.js/auto';
 import 'chartjs-adapter-date-fns';
 
+import { ReserveRateTimeRange } from '../../../../../../../hooks/aave/useAaveReservesHistory';
+import { TimeRangeButtons } from '../../../TimeRangeButtons/TimeRangeButtons';
 import {
   CUSTOM_CANVAS_BACKGROUND_COLOR,
   GRID_COLOR,
@@ -13,9 +15,10 @@ import { htmlLegendPlugin } from './Chart.utils';
 
 type ChartProps = {
   input: InputData<{ x: number; y: number }>;
+  onTimeRangeChange: (range: ReserveRateTimeRange) => void;
 };
 
-export const Chart: FC<ChartProps> = ({ input }) => {
+export const Chart: FC<ChartProps> = ({ input, onTimeRangeChange }) => {
   const canvas = useRef<HTMLCanvasElement>(null);
   const chartRef = useRef<ChartLibrary | null>(null);
 
@@ -113,7 +116,10 @@ export const Chart: FC<ChartProps> = ({ input }) => {
 
   return (
     <div onClick={stopPropagation} className="lg:p-6 lg:bg-gray-80">
-      <span id="legend-container-supply-chart" className="text-tiny"></span>
+      <div className="flex items-center justify-between">
+        <span id="legend-container-supply-chart" className="text-tiny"></span>
+        <TimeRangeButtons onChange={onTimeRangeChange} />
+      </div>
       <canvas ref={canvas}></canvas>
     </div>
   );