Saf 20/charts integration (exclude supply and borrow by now)

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

@@ -78,9 +78,9 @@ const AaveReserveOverviewPage: FC = () => {
               'lg:block space-y-4 flex-grow w-min',
             )}
           >
-            <SupplyDetailsGraph reserve={reserve} />
+            <SupplyDetailsGraph reserve={reserve} history={[]} />
 
-            <BorrowDetailsGraph reserve={reserve} />
+            <BorrowDetailsGraph reserve={reserve} history={[]} />
 
             <EModeDetails reserve={reserve} />
 

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

@@ -4,46 +4,72 @@ import { t } from 'i18next';
 
 import { theme } from '@sovryn/tailwindcss-config';
 import { Accordion, Link, Paragraph } from '@sovryn/ui';
+import { Decimal } from '@sovryn/utils';
 
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
+import { config } from '../../../../../constants/aave';
 import { Reserve } from '../../../../../hooks/aave/useAaveReservesData';
+import { FormattedReserveHistoryItem } from '../../../../../hooks/aave/useReservesHistory';
 import { useIsMobile } from '../../../../../hooks/useIsMobile';
 import { translations } from '../../../../../locales/i18n';
+import { getBobExplorerUrl } from '../../../../../utils/helpers';
 import { formatAmountWithSuffix } from '../../../../../utils/math';
-import { normalizeBorrowStats } from './BorrowDetailsGraph.utils';
 import { Chart } from './components/Chart/Chart';
-import { harcodedData } from './components/Chart/Chart.constants';
-import { MockData } from './components/Chart/Chart.types';
 
 const pageTranslations = translations.aaveReserveOverviewPage.borrowDetails;
 
 type BorrowDetailsGraphProps = {
+  history: FormattedReserveHistoryItem[];
   reserve: Reserve;
 };
 
 export const BorrowDetailsGraph: FC<BorrowDetailsGraphProps> = ({
   reserve,
+  history,
 }) => {
   const [open, setOpen] = useState(true);
   const { isMobile } = useIsMobile();
 
-  // TODO: mocked amounts
-  const mockData: MockData<{ x: string; y: number }> = useMemo(() => {
-    const data1 = harcodedData;
-
+  const inputData = useMemo(() => {
+    const data = history.map(i => ({
+      x: i.date,
+      y: i.variableBorrowRate * 100,
+    }));
     return {
-      data1,
-      label1: t(pageTranslations.chart.label1),
-      lineColor: theme.colors.positive,
-      xLabels: data1.map(item => item.x),
+      data,
+      label: t(pageTranslations.chart.label1),
+      lineColor: theme.colors['primary-30'],
     };
-  }, []);
+  }, [history]);
+
+  const totalBorrowed = useMemo(() => {
+    return Decimal.from(reserve.totalDebt);
+  }, [reserve]);
+
+  const totalBorrowedUSD = useMemo(() => {
+    return Decimal.from(reserve.totalDebtUSD);
+  }, [reserve]);
 
-  const borrowStats = useMemo(() => {
-    return normalizeBorrowStats(reserve);
+  const debtCap = useMemo(() => {
+    return Decimal.from(reserve.debtCeiling);
   }, [reserve]);
 
+  const debtCapUSD = useMemo(() => {
+    return Decimal.from(reserve.debtCeilingUSD);
+  }, [reserve]);
+
+  const borrowedPercentage = useMemo(() => {
+    return Decimal.from(totalBorrowedUSD)
+      .div(Decimal.from(reserve.debtCeilingUSD))
+      .mul(100)
+      .toString(0);
+  }, [reserve, totalBorrowedUSD]);
+
+  const collectorContractLink = useMemo(() => {
+    return `${getBobExplorerUrl()}/address/${config.TreasuryAddress}`;
+  }, []);
+
   return (
     <Accordion
       label={
@@ -67,14 +93,14 @@ export const BorrowDetailsGraph: FC<BorrowDetailsGraphProps> = ({
                 <div className="space-x-1 font-medium text-base">
                   <AmountRenderer
                     precision={2}
-                    {...formatAmountWithSuffix(borrowStats.totalBorrowed)}
+                    {...formatAmountWithSuffix(totalBorrowed)}
                   />
-                  {borrowStats.borrowCap.gt(0) && (
+                  {debtCap.gt(0) && (
                     <>
                       <span>{t(pageTranslations.of)}</span>
                       <AmountRenderer
                         precision={2}
-                        {...formatAmountWithSuffix(borrowStats.borrowCap)}
+                        {...formatAmountWithSuffix(debtCap)}
                       />
                     </>
                   )}
@@ -84,25 +110,25 @@ export const BorrowDetailsGraph: FC<BorrowDetailsGraphProps> = ({
                   <AmountRenderer
                     prefix="$"
                     precision={2}
-                    {...formatAmountWithSuffix(borrowStats.totalBorrowedUSD)}
+                    {...formatAmountWithSuffix(totalBorrowedUSD)}
                   />
-                  {borrowStats.borrowCap.gt(0) && (
+                  {debtCap.gt(0) && (
                     <>
                       <span>{t(pageTranslations.of)}</span>
                       <AmountRenderer
                         prefix="$"
                         precision={2}
-                        {...formatAmountWithSuffix(borrowStats.borrowCapUSD)}
+                        {...formatAmountWithSuffix(debtCapUSD)}
                       />
                     </>
                   )}
                 </div>
 
                 {/* Progress bar */}
-                {borrowStats.borrowCap.gt(0) && (
+                {debtCap.gt(0) && (
                   <div className="mt-2 h-[3px] w-[160px] bg-gray-70 rounded-full">
                     <div
-                      className={`h-full bg-primary-30 w-[${borrowStats.borrowedPercentage}%]`}
+                      className={`h-full bg-primary-30 w-[${borrowedPercentage}%]`}
                     ></div>
                   </div>
                 )}
@@ -114,28 +140,28 @@ export const BorrowDetailsGraph: FC<BorrowDetailsGraphProps> = ({
               label={t(pageTranslations.apr)}
               value={
                 <AmountRenderer
-                  value={borrowStats.apr}
+                  value={reserve.variableBorrowAPR}
                   suffix="%"
                   precision={2}
                 />
               }
             />
 
-            {borrowStats.borrowCap.gt(0) && (
+            {debtCap.gt(0) && (
               <StatisticsCard
                 label={t(pageTranslations.borrowCap)}
                 value={
                   <AmountRenderer
                     precision={2}
-                    {...formatAmountWithSuffix(borrowStats.borrowCap)}
+                    {...formatAmountWithSuffix(debtCap)}
                   />
                 }
               />
             )}
           </div>
         </div>
 
-        <Chart mockData={mockData} yLabel1="" />
+        <Chart input={inputData} />
 
         <div className="space-y-6">
           <Paragraph className="text-base">
@@ -149,7 +175,7 @@ export const BorrowDetailsGraph: FC<BorrowDetailsGraphProps> = ({
               help={t(pageTranslations.reserveFactorInfo)}
               value={
                 <AmountRenderer
-                  value={borrowStats.reserveFactor}
+                  value={reserve.reserveFactor}
                   precision={2}
                   suffix="%"
                 />
@@ -161,7 +187,7 @@ export const BorrowDetailsGraph: FC<BorrowDetailsGraphProps> = ({
               value={
                 <Link
                   openNewTab
-                  href={borrowStats.collectorContractLink}
+                  href={collectorContractLink}
                   text={t(pageTranslations.viewContract)}
                 />
               }

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

@@ -8,15 +8,14 @@ import {
   GRID_COLOR,
   TICK_COLOR,
 } from './Chart.constants';
-import { MockData } from './Chart.types';
+import { InputData } from './Chart.types';
 import { htmlLegendPlugin } from './Chart.utils';
 
 type ChartProps = {
-  mockData: MockData<any>;
-  yLabel1: string;
+  input: InputData<any>;
 };
 
-export const Chart: FC<ChartProps> = ({ mockData }) => {
+export const Chart: FC<ChartProps> = ({ input }) => {
   const canvas = useRef<HTMLCanvasElement>(null);
   const chartRef = useRef<ChartLibrary | null>(null);
 
@@ -35,10 +34,10 @@ export const Chart: FC<ChartProps> = ({ mockData }) => {
         datasets: [
           {
             type: 'line',
-            label: mockData.label1,
-            data: mockData.data1,
-            backgroundColor: mockData.lineColor,
-            borderColor: mockData.lineColor,
+            label: input.label,
+            data: input.data,
+            backgroundColor: input.lineColor,
+            borderColor: input.lineColor,
             borderWidth: 2,
             fill: false,
             pointRadius: 0,
@@ -101,7 +100,7 @@ export const Chart: FC<ChartProps> = ({ mockData }) => {
         chartRef.current.destroy();
       }
     };
-  }, [mockData]);
+  }, [input]);
 
   const stopPropagation = useCallback(
     (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {

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

@@ -1,6 +1,5 @@
-export type MockData<T> = {
-  data1: T[];
-  label1: string;
+export type InputData<T> = {
+  data: T[];
+  label: string;
   lineColor: string;
-  xLabels: string[];
 };

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

@@ -1,17 +1,18 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useMemo, useState } from 'react';
 
 import { t } from 'i18next';
 
 import { theme } from '@sovryn/tailwindcss-config';
 import { Accordion, Link } from '@sovryn/ui';
-import { Decimal } from '@sovryn/utils';
 
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
+import { config } 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';
 
 const pageTranslations = translations.aaveReserveOverviewPage.interestRateModel;
@@ -24,8 +25,19 @@ export const InterestRateModelGraph: FC<InterestRateModelGraphProps> = ({
   reserve,
 }) => {
   const { isMobile } = useIsMobile();
+  const interestRateStrategyUrl = useMemo(() => {
+    return `${getBobExplorerUrl()}/address/${
+      config.InterestRateStrategyAddress
+    }`;
+  }, []);
+
   const [open, setOpen] = useState<boolean>(true);
-  const { rates } = useAaveInterestRatesData();
+  const { data: rates } = useAaveInterestRatesData();
+
+  const meta = {
+    label: t(pageTranslations.chart.label1),
+    lineColor: theme.colors['primary-30'],
+  };
 
   if (!rates) return null;
   return (
@@ -42,48 +54,46 @@ export const InterestRateModelGraph: FC<InterestRateModelGraphProps> = ({
       flatMode={!isMobile}
       dataAttribute="interest-rate-model"
     >
-      <div className="space-y-8 pt-2">
-        <div className="flex justify-between items-end">
-          <StatisticsCard
-            label={t(pageTranslations.utilizationRate)}
-            value={
-              <AmountRenderer
-                value={Decimal.from(rates.currentUsageRatio).mul(100)}
-                precision={2}
-                suffix="%"
-              />
-            }
-          />
-          <Link href="#" text={t(pageTranslations.interestRateStrategy)} />
-        </div>
-
-        <Chart
-          meta={{
-            label: t(pageTranslations.chart.label1),
-            lineColor: theme.colors['primary-30'],
-          }}
-          rates={rates}
-        />
+      {rates && (
+        <div className="space-y-8 pt-2">
+          <div className="flex justify-between items-end">
+            <StatisticsCard
+              label={t(pageTranslations.utilizationRate)}
+              value={
+                <AmountRenderer
+                  value={parseFloat(rates.currentUsageRatio) * 100}
+                  precision={2}
+                  suffix="%"
+                />
+              }
+            />
+            <Link
+              href={interestRateStrategyUrl}
+              text={t(pageTranslations.interestRateStrategy)}
+            />
+          </div>
 
-        {/* statistics */}
-        <div className="flex gap-8">
-          <StatisticsCard
-            label={t(pageTranslations.reserveFactor)}
-            help={t(pageTranslations.reserveFactorInfo)}
-            value={
-              <AmountRenderer
-                value={Decimal.from(reserve.reserveFactor).mul(100)}
-                precision={2}
-                suffix="%"
-              />
-            }
-          />
-          <StatisticsCard
-            label={t(pageTranslations.collectorContract)}
-            value={<Link href="#" text={t(pageTranslations.viewContract)} />}
-          />
+          <Chart meta={meta} rates={rates} />
+          {/* statistics */}
+          <div className="flex gap-8">
+            <StatisticsCard
+              label={t(pageTranslations.reserveFactor)}
+              help={t(pageTranslations.reserveFactorInfo)}
+              value={
+                <AmountRenderer
+                  value={reserve.reserveFactor}
+                  suffix="%"
+                  precision={2}
+                />
+              }
+            />
+            <StatisticsCard
+              label={t(pageTranslations.collectorContract)}
+              value={<Link href="#" text={t(pageTranslations.viewContract)} />}
+            />
+          </div>
         </div>
-      </div>
+      )}
     </Accordion>
   );
 };