Skip to content

Commit

Permalink
Saf 20/charts integration (exclude supply and borrow by now) (#46)
Browse files Browse the repository at this point in the history 
* [SAF_20] remove mocks from pool details; create hooks useAaveRates and useAaveHistoryReserves

* [SAF-20] fix conflicts

* [SAF_20] mock api response by now

* [SAF_20] remove mock; prevent calling history data by now
  • Loading branch information
@luchopcerra
luchopcerra authored Sep 6, 2024
1 parent fe0ed74 commit 5870b39
Show file tree
Hide file tree
Showing 19 changed files with 698 additions and 839 deletions.
4 changes: 2 additions & 2 deletions apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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} />

Expand Down
82 changes: 54 additions & 28 deletions .../app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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={
Expand All @@ -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)}
/>
</>
)}
Expand All @@ -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>
)}
Expand All @@ -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">
Expand All @@ -149,7 +175,7 @@ export const BorrowDetailsGraph: FC<BorrowDetailsGraphProps> = ({
help={t(pageTranslations.reserveFactorInfo)}
value={
<AmountRenderer
value={borrowStats.reserveFactor}
value={reserve.reserveFactor}
precision={2}
suffix="%"
/>
Expand All @@ -161,7 +187,7 @@ export const BorrowDetailsGraph: FC<BorrowDetailsGraphProps> = ({
value={
<Link
openNewTab
href={borrowStats.collectorContractLink}
href={collectorContractLink}
text={t(pageTranslations.viewContract)}
/>
}
Expand Down
17 changes: 8 additions & 9 deletions .../5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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,
Expand Down Expand Up @@ -101,7 +100,7 @@ export const Chart: FC<ChartProps> = ({ mockData }) => {
chartRef.current.destroy();
}
};
}, [mockData]);
}, [input]);

const stopPropagation = useCallback(
(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
Expand Down
7 changes: 3 additions & 4 deletions ...ges/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
export type MockData<T> = {
data1: T[];
label1: string;
export type InputData<T> = {
data: T[];
label: string;
lineColor: string;
xLabels: string[];
};
96 changes: 53 additions & 43 deletions ...ages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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 (
Expand All @@ -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>
);
};
Loading

0 comments on commit 5870b39

Please sign in to comment.