Fix report

apps/frontend/.env.example

@@ -26,3 +26,5 @@ REACT_APP_SIMULATE_TX=false
 REACT_APP_ESTIMATOR_URI=https://simulator.sovryn.app
 
 REACT_APP_DATADOG_CLIENT_TOKEN=
+
+REACT_APP_GRAPH_BOB_AAVE=https://bob-mm.test.sovryn.app/subgraphs/name/DistributedCollective/subgraph-template

apps/frontend/src/app/3_organisms/BorrowHistory/components/AaveNewLoanFrame/AaveNewLoanHistoryFrame.constants.tsx

@@ -38,14 +38,14 @@ export const COLUMNS = [
   },
   {
     id: 'interestRate',
-    title: 'Interest Rate',
+    title: t(translations.loanHistory.table.interestRate),
     cellRenderer: (tx: NewBorrowHistoryItem) => (
       <AmountRenderer value={tx.borrowRate} precision={2} suffix="%" />
     ),
   },
   {
     id: 'interestRateMode',
-    title: 'Interest Rate Mode',
+    title: t(translations.loanHistory.table.interestRateMode),
     cellRenderer: (tx: NewBorrowHistoryItem) => (
       <span>{tx.borrowRateMode}</span>
     ),

apps/frontend/src/app/3_organisms/BorrowHistory/components/AaveSwapRateModeLoanFrame/AaveSwapRateModeLoanFrame.utils.tsx

@@ -32,7 +32,7 @@ export const normalizeUserLiquidationTransactions = (
           ],
         ),
         to:
-          tx.borrowRateModeTo === BorrowRateMode.STABLE ? 'Stable' : 'Variable',
+          tx.borrowRateModeTo === BorrowRateMode.STABLE ? 'stable' : 'variable',
         timestamp: tx.timestamp,
         hash: tx.txHash,
         variableBorrowRate: Decimal.from(tx.variableBorrowRate)

apps/frontend/src/app/3_organisms/EarnHistoryFrame/components/AaveLendingHistoryFrame/AaveLendingHistoryFrame.constants.tsx

@@ -37,7 +37,7 @@ export const COLUMNS_CONFIG = [
             showRoundingPrefix
           />
         ) : (
-          <span>{t(translations.common.na)} </span>
+          <span>{t(translations.common.na)}</span>
         )}
         {item.reserve.symbol}
       </div>

apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowForm/BorrowForm.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useMemo, useState } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
 
 import { t } from 'i18next';
 
@@ -19,7 +19,7 @@ import { BOB_CHAIN_ID } from '../../../../../../../config/chains';
 import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { AssetAmountInput } from '../../../../../../2_molecules/AssetAmountInput/AssetAmountInput';
 import { AssetRenderer } from '../../../../../../2_molecules/AssetRenderer/AssetRenderer';
-import { MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE } from '../../../../../../../constants/aave';
+import { MINIMUM_HEALTH_FACTOR } from '../../../../../../../constants/aave';
 import { useAaveBorrow } from '../../../../../../../hooks/aave/useAaveBorrow';
 import { useAaveUserReservesData } from '../../../../../../../hooks/aave/useAaveUserReservesData';
 import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
@@ -68,6 +68,17 @@ export const BorrowForm: FC<BorrowFormProps> = ({ asset, onComplete }) => {
     [summary.reserves, borrowAsset],
   );
 
+  useEffect(() => {
+    // if borrow size is greater than available to borrow, set borrow amount to available to borrow
+    // this is to prevent users from borrowing more than they can even if maximum gets updated
+    const isBorrowBiggerThanAvailable = borrowSize.gt(
+      borrowReserve?.availableToBorrow ?? 0,
+    );
+    if (isBorrowBiggerThanAvailable) {
+      setBorrowAmount(borrowReserve?.availableToBorrow.toString() ?? '0');
+    }
+  }, [borrowReserve?.availableToBorrow, borrowSize, setBorrowAmount]);
+
   const borrowUsdAmount = useMemo(
     () => borrowSize.mul(borrowReserve?.reserve.priceInUSD ?? 0),
     [borrowSize, borrowReserve?.reserve.priceInUSD],
@@ -80,11 +91,17 @@ export const BorrowForm: FC<BorrowFormProps> = ({ asset, onComplete }) => {
 
   const newCollateralRatio = useMemo(
     () =>
-      AaveCalculations.computeCollateralRatio(
+      AaveCalculations.computeHealthFactor(
         summary.collateralBalance,
+        summary.currentLiquidationThreshold,
         summary.borrowBalance.add(borrowUsdAmount),
       ),
-    [summary.collateralBalance, summary.borrowBalance, borrowUsdAmount],
+    [
+      summary.collateralBalance,
+      summary.currentLiquidationThreshold,
+      summary.borrowBalance,
+      borrowUsdAmount,
+    ],
   );
 
   const liquidationPrice = useMemo(
@@ -166,7 +183,7 @@ export const BorrowForm: FC<BorrowFormProps> = ({ asset, onComplete }) => {
 
       <CollateralRatioHealthBar
         ratio={Decimal.from(newCollateralRatio)}
-        minimum={MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE}
+        minimum={MINIMUM_HEALTH_FACTOR}
       />
 
       <SimpleTable>

apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx

@@ -160,7 +160,7 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = ({
         orderOptions={orderOptions}
         setOrderOptions={setOrderOptions}
         noData={
-          <span className="text-gray-30 text-sm lg:text-white">
+          <span className="text-gray-30 text-xs italic lg:text-white">
             {t(pageTranslations.borrowPositionsList.noData)}
           </span>
         }

apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowRateModeSelect/BorrowRateModeSelect.tsx

@@ -25,10 +25,9 @@ export const BorrowRateModeSelect: FC<BorrowRateModeSelectProps> = ({
   const options = useMemo(() => {
     const borrowRateModeOptions = [
       {
-        label: t(
-          translations.aavePage.borrowPositionsList.selectVariableApy,
-          {},
-        ),
+        label: t(translations.aavePage.borrowPositionsList.selectVariableApy, {
+          apy: formatValue(position.variableApy, 2),
+        }),
         value: String(BorrowRateMode.VARIABLE),
       },
     ];

apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.utils.tsx

@@ -4,9 +4,9 @@ export const getCollateralRatioThresholds = (minimum: Decimal) => {
   const minimumCollateralRatio = minimum.mul(100);
 
   return {
-    START: minimumCollateralRatio.mul(0.9).toNumber(),
+    START: 100,
     MIDDLE_START: minimumCollateralRatio.toNumber() - 0.1,
-    MIDDLE_END: minimumCollateralRatio.mul(1.2).toNumber(),
-    END: minimumCollateralRatio.mul(1.6).toNumber(),
+    MIDDLE_END: minimumCollateralRatio.mul(1.5).toNumber(),
+    END: minimumCollateralRatio.mul(2).toNumber(),
   };
 };

apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx

@@ -148,7 +148,7 @@ export const LendPositionsList: FC<LendPositionsListProps> = ({
         orderOptions={orderOptions}
         setOrderOptions={setOrderOptions}
         noData={
-          <span className="text-gray-30 text-sm lg:text-white">
+          <span className="text-gray-30 text-xs italic lg:text-white">
             {t(pageTranslations.lendPositionsList.noData)}
           </span>
         }

apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useMemo, useState } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
 
 import { t } from 'i18next';
 
@@ -19,7 +19,7 @@ import { BOB_CHAIN_ID } from '../../../../../../../config/chains';
 import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { AssetAmountInput } from '../../../../../../2_molecules/AssetAmountInput/AssetAmountInput';
 import { AssetRenderer } from '../../../../../../2_molecules/AssetRenderer/AssetRenderer';
-import { MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE } from '../../../../../../../constants/aave';
+import { MINIMUM_HEALTH_FACTOR } from '../../../../../../../constants/aave';
 import { useAaveUserReservesData } from '../../../../../../../hooks/aave/useAaveUserReservesData';
 import { useAaveWithdraw } from '../../../../../../../hooks/aave/useAaveWithdraw';
 import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
@@ -84,16 +84,25 @@ export const WithdrawForm: FC<WithdrawFormProps> = ({ asset, onComplete }) => {
       return Decimal.from(0);
     }
 
+    if (summary.borrowBalance.eq(0)) {
+      return withdrawReserve.supplied;
+    }
+
     // min collateral at which we reach minimum collateral ratio
-    const minCollateralUsd = MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE.mul(
-      withdrawReserve.borrowedUsd,
+    const minCollateralUsd = MINIMUM_HEALTH_FACTOR.mul(
+      summary.borrowBalance.div(summary.currentLiquidationThreshold),
     );
     const maxUsdWithdrawal = summary.supplyBalance.sub(minCollateralUsd);
 
     return maxUsdWithdrawal.gt(withdrawReserve.suppliedUsd)
       ? withdrawReserve.supplied // we can withdraw all, we'll still have collateral on other asset
       : maxUsdWithdrawal.div(withdrawReserve.reserve.priceInUSD); // only partial withdraw
-  }, [withdrawReserve, summary.supplyBalance]);
+  }, [
+    withdrawReserve,
+    summary.supplyBalance,
+    summary.borrowBalance,
+    summary.currentLiquidationThreshold,
+  ]);
 
   const withdrawAmountUsd = useMemo(
     () => withdrawSize.mul(withdrawReserve?.reserve.priceInUSD ?? 0),
@@ -105,6 +114,14 @@ export const WithdrawForm: FC<WithdrawFormProps> = ({ asset, onComplete }) => {
     [withdrawSize, withdrawReserve?.supplied],
   );
 
+  useEffect(() => {
+    // if withdraw size is greater than maximum, set withdraw amount to maximum possible
+    // this is to prevent users from trying to withdraw more than they can even if maximum gets updated
+    if (withdrawSize.gt(maximumWithdrawAmount)) {
+      setWithdrawAmount(maximumWithdrawAmount.toString());
+    }
+  }, [withdrawSize, maximumWithdrawAmount, setWithdrawAmount]);
+
   const [isValidWithdrawAmount, errorMessage] = useMemo(() => {
     if (withdrawSize.eq(0)) {
       return [true, ''];
@@ -135,19 +152,10 @@ export const WithdrawForm: FC<WithdrawFormProps> = ({ asset, onComplete }) => {
 
   const onConfirm = useCallback(
     () =>
-      handleWithdraw(
-        withdrawSize,
-        withdrawAsset,
-        withdrawSize.eq(maximumWithdrawAmount),
-        { onComplete },
-      ),
-    [
-      handleWithdraw,
-      withdrawSize,
-      withdrawAsset,
-      onComplete,
-      maximumWithdrawAmount,
-    ],
+      handleWithdraw(withdrawSize, withdrawAsset, remainingSupply.eq(0), {
+        onComplete,
+      }),
+    [handleWithdraw, withdrawSize, withdrawAsset, onComplete, remainingSupply],
   );
 
   return (

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

@@ -51,6 +51,10 @@ export const BorrowDetailsGraph: FC<BorrowDetailsGraphProps> = ({
     [history],
   );
 
+  if (!reserve.borrowingEnabled) {
+    return null;
+  }
+
   return (
     <Accordion
       label={

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

@@ -49,7 +49,7 @@ export const InterestRateModelGraph: FC<InterestRateModelGraphProps> = ({
     [reserve.borrowUsageRatio],
   );
 
-  if (!rates) {
+  if (!rates || !reserve.borrowingEnabled) {
     return null;
   }
   return (

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

@@ -2,7 +2,6 @@ import { theme } from '@sovryn/tailwindcss-config';
 
 export const GRID_COLOR = '#484d59';
 export const TICK_COLOR = '#b6bac1';
-export const CHART_PERCENTAGES = [0, 0.25, 0.5, 0.75, 1];
 
 const SM_BREAKPOINT = parseInt(theme.screens.sm, 10) || 576;
 

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

@@ -6,14 +6,14 @@ import 'chartjs-adapter-date-fns';
 import { theme } from '@sovryn/tailwindcss-config';
 
 import {
-  CHART_PERCENTAGES,
   CUSTOM_CANVAS_BACKGROUND_COLOR,
   GRID_COLOR,
   TICK_COLOR,
 } from './Chart.constants';
 import { RatesData } from './Chart.types';
 import {
   calculateVariableInterestRateModel,
+  generatePercentages,
   htmlLegendPlugin,
 } from './Chart.utils';
 
@@ -31,7 +31,7 @@ export const Chart: FC<ChartProps> = ({ meta, rates }) => {
 
   const variableValues = useMemo(
     () =>
-      CHART_PERCENTAGES.map(x => ({
+      generatePercentages().map(x => ({
         x: x * 100,
         y: calculateVariableInterestRateModel(x, rates).mul(100).toNumber(),
       })),

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

@@ -22,6 +22,10 @@ const getOrCreateLegendList = (id: string) => {
   return listContainer;
 };
 
+export const generatePercentages = (step: number = 0.05) => {
+  return Array.from({ length: Math.floor(1 / step) + 1 }, (_, i) => i * step);
+};
+
 export const htmlLegendPlugin = {
   id: 'htmlLegend',
   afterUpdate(chart, args, options) {

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

@@ -132,14 +132,16 @@ export const SupplyDetailsGraph: FC<SupplyDetailsGraphProps> = ({
           />
         </div>
 
-        <Chart
-          input={{
-            data: supplyChartData,
-            label: t(pageTranslations.chart.suppApr),
-            lineColor: theme.colors['primary-30'],
-          }}
-          onTimeRangeChange={setTimeRange}
-        />
+        {reserve.borrowingEnabled && (
+          <Chart
+            input={{
+              data: supplyChartData,
+              label: t(pageTranslations.chart.suppApr),
+              lineColor: theme.colors['primary-30'],
+            }}
+            onTimeRangeChange={setTimeRange}
+          />
+        )}
 
         <div className="space-y-6">
           {/* collateral usage */}

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

@@ -24,7 +24,26 @@ export const TimeRangeButtons: FC<TimeRangeButtonsProps> = ({ onChange }) => {
 
   return (
     <div className="flex space-x-2 justify-end mb-4">
-      {' '}
+      <button
+        className={`py-1.5 px-4 rounded-md text-sm font-medium ${
+          activeRange === ESupportedTimeRanges.OneDay
+            ? 'bg-gray-50 text-white'
+            : 'bg-gray-70 text-gray-400'
+        }`}
+        onClick={() => handleClick(ESupportedTimeRanges.OneDay)}
+      >
+        {ESupportedTimeRanges.OneDay}
+      </button>
+      <button
+        className={`py-1.5 px-4 rounded-md text-sm font-medium ${
+          activeRange === ESupportedTimeRanges.OneWeek
+            ? 'bg-gray-50 text-white'
+            : 'bg-gray-70 text-gray-400'
+        }`}
+        onClick={() => handleClick(ESupportedTimeRanges.OneWeek)}
+      >
+        {ESupportedTimeRanges.OneWeek}
+      </button>
       <button
         className={`py-1.5 px-4 rounded-md text-sm font-medium ${
           activeRange === ESupportedTimeRanges.OneMonth

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

@@ -17,6 +17,7 @@ import { Decimal } from '@sovryn/utils';
 
 import { BOB_CHAIN_ID } from '../../../../../config/chains';
 
+import { GoBackButton } from '../../../../1_atoms/GoBackButton/GoBackButton';
 import { WalletIcon } from '../../../../1_atoms/Icons/Icons';
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
@@ -57,6 +58,10 @@ export const TopPanel: FC<TopPanelProps> = ({ reserve, className }) => {
     window.open(`${explorer}/address/${tokenAddress}`, '_blank');
   }, []);
 
+  const goBack = useCallback(() => {
+    window.history.back();
+  }, []);
+
   const oracleLink = useMemo(
     () => getBobExplorerUrl() + '/address/' + reserve.priceOracle,
     [reserve.priceOracle],
@@ -80,6 +85,10 @@ export const TopPanel: FC<TopPanelProps> = ({ reserve, className }) => {
 
       <div className="gap-6 lg:gap-9 flex-shrink-0 grid grid-cols-2 lg:flex">
         <div className="col-span-2 flex items-center lg:items-start gap-3">
+          <div className="flex items-center gap-3 h-8">
+            <GoBackButton onClick={goBack} />
+          </div>
+
           <div className="flex items-center gap-1">
             <AssetRenderer
               asset={reserve.symbol}