From 573393d0db0a10259fcd60a5793a32f50e48aa6d Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Wed, 7 Aug 2024 21:25:05 +0300
Subject: [PATCH 001/116] aave page static components, mobile first

---
 .../src/app/5_pages/AavePage/AaavePage.tsx    | 85 +++++++++++++++++++
 .../BorrowingPositionsList.tsx                | 35 ++++++++
 .../LendingPositionsList.tsx                  | 35 ++++++++
 .../AavePage/components/TopPanel/TopPanel.tsx | 67 +++++++++++++++
 .../WalletStatCard/WalletStatCard.tsx         | 39 +++++++++
 .../frontend/src/locales/en/translations.json | 21 +++++
 apps/frontend/src/router.tsx                  |  9 ++
 7 files changed, 291 insertions(+)
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/AaavePage.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowingPositionsList/BorrowingPositionsList.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendingPositionsList/LendingPositionsList.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/WalletStatCard/WalletStatCard.tsx

diff --git a/apps/frontend/src/app/5_pages/AavePage/AaavePage.tsx b/apps/frontend/src/app/5_pages/AavePage/AaavePage.tsx
new file mode 100644
index 000000000..b8e681a63
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/AaavePage.tsx
@@ -0,0 +1,85 @@
+import React, { FC, useState } from 'react';
+
+import classNames from 'classnames';
+import { t } from 'i18next';
+import { Helmet } from 'react-helmet-async';
+
+import { Tabs, TabSize, TabType } from '@sovryn/ui';
+
+import { useAccount } from '../../../hooks/useAccount';
+import { translations } from '../../../locales/i18n';
+import { BorrowingPositionsList } from './components/BorrowingPositionsList/BorrowingPositionsList';
+import { LendingPositionsList } from './components/LendingPositionsList/LendingPositionsList';
+import { TopPanel } from './components/TopPanel/TopPanel';
+
+enum LiquidityTabs {
+  LEND = 0,
+  BORROW,
+}
+
+const AavePage: FC = () => {
+  const { account } = useAccount();
+  const [activeLiquidityTab, setActiveLiquidityTab] = useState<LiquidityTabs>(
+    LiquidityTabs.BORROW,
+  );
+
+  return (
+    <div className="w-full">
+      <Helmet>
+        <title>{t(translations.aavePage.meta.title)}</title>
+      </Helmet>
+
+      <TopPanel account={account} />
+
+      <div className="pt-6 mt-6 space-y-6">
+        {/* Tab selector */}
+        <div className="bg-gray-80 rounded p-1 border border-gray-60">
+          <Tabs
+            className="w-full"
+            index={activeLiquidityTab}
+            items={[
+              {
+                activeClassName: 'text-primary-20',
+                dataAttribute: 'lending',
+                label: 'Lend', // TODO: translations
+              },
+              {
+                activeClassName: 'text-primary-20',
+                dataAttribute: 'borrowing',
+                label: 'Borrow', // TODO: translations
+              },
+            ]}
+            onChange={e => setActiveLiquidityTab(e)}
+            size={TabSize.normal}
+            type={TabType.secondary}
+          />
+        </div>
+
+        {/* Lending and borrowing columns */}
+        <div>
+          {/* Lending column */}
+          <div
+            className={classNames(
+              activeLiquidityTab !== LiquidityTabs.LEND ? 'hidden' : '',
+            )}
+          >
+            <LendingPositionsList />
+            {/* LendingAssetsList */}
+          </div>
+
+          {/* Borrowing column */}
+          <div
+            className={classNames(
+              activeLiquidityTab !== LiquidityTabs.BORROW ? 'hidden' : '',
+            )}
+          >
+            <BorrowingPositionsList />
+
+            {/* BorrowAssetsList */}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default AavePage;
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowingPositionsList/BorrowingPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowingPositionsList/BorrowingPositionsList.tsx
new file mode 100644
index 000000000..4e6c2095a
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowingPositionsList/BorrowingPositionsList.tsx
@@ -0,0 +1,35 @@
+import React, { FC } from 'react';
+
+import { t } from 'i18next';
+
+import { Paragraph } from '@sovryn/ui';
+
+import { translations } from '../../../../../locales/i18n';
+
+const pageTranslations = translations.aavePage.borrowingPositionsList;
+
+type BorrowingPositionsListProps = {
+  account?: string;
+};
+
+export const BorrowingPositionsList: FC<BorrowingPositionsListProps> = ({
+  account,
+}) => {
+  return (
+    <div className="bg-gray-70 px-4 py-3 rounded space-y-3">
+      <div className="h-7 flex items-center">
+        <Paragraph className="text-base font-medium">
+          {t(pageTranslations.title)}
+        </Paragraph>
+      </div>
+
+      {account ? (
+        <></>
+      ) : (
+        <Paragraph className="text-xs text-center text-gray-30 italic font-medium leading-5">
+          {t(pageTranslations.connectWallet)}
+        </Paragraph>
+      )}
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendingPositionsList/LendingPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendingPositionsList/LendingPositionsList.tsx
new file mode 100644
index 000000000..ac3070896
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendingPositionsList/LendingPositionsList.tsx
@@ -0,0 +1,35 @@
+import React, { FC } from 'react';
+
+import { t } from 'i18next';
+
+import { Paragraph } from '@sovryn/ui';
+
+import { translations } from '../../../../../locales/i18n';
+
+const pageTranslations = translations.aavePage.lendingPositionsList;
+
+type LendingPositionsListProps = {
+  account?: string;
+};
+
+export const LendingPositionsList: FC<LendingPositionsListProps> = ({
+  account,
+}) => {
+  return (
+    <div className="bg-gray-70 px-4 py-3 rounded space-y-3">
+      <div className="h-7 flex items-center">
+        <Paragraph className="text-base font-medium">
+          {t(pageTranslations.title)}
+        </Paragraph>
+      </div>
+
+      {account ? (
+        <></>
+      ) : (
+        <Paragraph className="text-xs text-center text-gray-30 italic font-medium leading-5">
+          {t(pageTranslations.connectWallet)}
+        </Paragraph>
+      )}
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx b/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
new file mode 100644
index 000000000..677edfcd0
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
@@ -0,0 +1,67 @@
+import React, { FC } from 'react';
+
+import { t } from 'i18next';
+
+import {
+  Button,
+  ButtonSize,
+  ButtonStyle,
+  Heading,
+  Paragraph,
+  ParagraphSize,
+} from '@sovryn/ui';
+
+import { translations } from '../../../../../locales/i18n';
+import { WalletStatCard } from '../WalletStatCard/WalletStatCard';
+
+const pageTranslations = translations.aavePage.topPanel;
+
+type TopPanelProps = {
+  account: string;
+};
+
+export const TopPanel: FC<TopPanelProps> = ({ account }) => {
+  return (
+    <div className="w-full flex flex-col gap-6">
+      <div className="text-center py-6 px-10 space-y-3">
+        <Heading className="text-base leading-5">
+          {t(pageTranslations.title)}
+        </Heading>
+        <Paragraph size={ParagraphSize.base}>
+          {t(pageTranslations.subtitle)}
+        </Paragraph>
+      </div>
+
+      <div className="flex flex-col gap-4">
+        <WalletStatCard
+          label={t(pageTranslations.netWorth)}
+          prefix="$"
+          value="1,234,567.58"
+          tooltipContent="Net APY is the combined effect of all supply and borrow positions on net worth, including incentives. It is possible to have a negative net APY if debt APY is higher than supply APY."
+        />
+        <div className="flex gap-9">
+          <WalletStatCard
+            label={t(pageTranslations.netWorth)}
+            value="200"
+            suffix="%"
+            tooltipContent="Net APY is the combined effect of all supply and borrow positions on net worth, including incentives. It is possible to have a negative net APY if debt APY is higher than supply APY."
+          />
+          <WalletStatCard
+            label={t(pageTranslations.netWorth)}
+            value="11.69"
+            suffix="%"
+            tooltipContent="Net APY is the combined effect of all supply and borrow positions on net worth, including incentives. It is possible to have a negative net APY if debt APY is higher than supply APY."
+          />
+        </div>
+      </div>
+
+      <div>
+        <Button
+          text="View transactions"
+          style={ButtonStyle.secondary}
+          size={ButtonSize.small}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/WalletStatCard/WalletStatCard.tsx b/apps/frontend/src/app/5_pages/AavePage/components/WalletStatCard/WalletStatCard.tsx
new file mode 100644
index 000000000..89daed329
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/WalletStatCard/WalletStatCard.tsx
@@ -0,0 +1,39 @@
+import React, { FC } from 'react';
+
+import { Icon, Tooltip } from '@sovryn/ui';
+
+type WalletStatCardProps = {
+  label: string;
+  value: string;
+  prefix?: string;
+  suffix?: string;
+  tooltipContent?: string;
+};
+
+export const WalletStatCard: FC<WalletStatCardProps> = ({
+  label,
+  value,
+  prefix,
+  suffix,
+  tooltipContent,
+}) => {
+  return (
+    <div className="space-y-3">
+      <div className="flex space-x-2 items-center">
+        <span className="text-xs text-gray-30">{label}</span>
+        {tooltipContent && (
+          <Tooltip content={<span>{tooltipContent}</span>}>
+            <div>
+              <Icon className="h-[10px] w-[10px] text-gray-30" icon="info" />
+            </div>
+          </Tooltip>
+        )}
+      </div>
+      <div className="text-2xl text-white">
+        {prefix && <span>{prefix}</span>}
+        <span>{value}</span>
+        {suffix && <span>{suffix}</span>}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index 0e4da0465..714516e4e 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -791,6 +791,27 @@
         "collateralRatio": "collateral ratio"
     },
 
+    "aavePage": {
+        "meta": {
+            "title": "Lend and borrow"
+        },
+        "topPanel": {
+            "title": "Lend and borrow",
+            "subtitle": "Borrow and earn interest by providing liquidity",
+            "netWorth": "Net worth",
+            "netApy": "Net API",
+            "n/a": "N/A"
+        },
+        "borrowingPositionsList": {
+            "title": "Your loans",
+            "connectWallet": "Connect wallet to see the available data"
+        },
+        "lendingPositionsList": {
+            "title": "Your lending deposits",
+            "connectWallet": "Connect wallet to see the available data"
+        }
+    },
+
     "bitocracyPage": {
         "meta": {
             "title": "Bitocracy - Sovryn",
diff --git a/apps/frontend/src/router.tsx b/apps/frontend/src/router.tsx
index c8b20965d..af3fb5624 100644
--- a/apps/frontend/src/router.tsx
+++ b/apps/frontend/src/router.tsx
@@ -8,6 +8,7 @@ import {
 
 import { PageContainer } from './app/4_templates';
 import { EmailVerificationStateContainer } from './app/4_templates/EmailVerificationStateContainer/EmailVerificationStateContainer';
+import AavePage from './app/5_pages/AavePage/AaavePage';
 import { earnPageLoader } from './app/5_pages/EarnPage/loader';
 import { EmailDuplicateVerifiedPage } from './app/5_pages/EmailDuplicateVerifiedPage/EmailDuplicateVerifiedPage';
 import { EmailErrorPage } from './app/5_pages/EmailErrorPage/EmailErrorPage';
@@ -93,6 +94,10 @@ const routes = [
         path: '/convert',
         element: <ConvertPage />,
       },
+      {
+        path: '/borrow/aave',
+        element: <AavePage />,
+      },
       {
         path: '/borrow/line-of-credit',
         element: <Zero />,
@@ -115,6 +120,10 @@ const routes = [
         path: '/earn/lend',
         element: <LendPage />,
       },
+      {
+        path: '/borrow/lend/aave',
+        element: <AavePage />,
+      },
       {
         path: '/earn/market-making',
         element: <MarketMakingPage />,

From 14aa7e5fd32386254be70b9a327d45f03013e82d Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Thu, 8 Aug 2024 15:26:56 +0300
Subject: [PATCH 002/116] responsive panels

---
 .../AavePoolRowTitle/AavePoolRowTitle.tsx     | 39 ++++++++++++
 .../src/app/5_pages/AavePage/AaavePage.tsx    | 60 +++++++++----------
 .../BorrowingAssetsList.constants.tsx         | 18 ++++++
 .../BorrowingAssetsList.tsx                   | 50 ++++++++++++++++
 .../BorrowingAssetsList.types.tsx             |  3 +
 .../BorrowingPositionsList.tsx                | 32 ++++++----
 .../LendingAssetsList/LendingAssetsList.tsx   | 33 ++++++++++
 .../LendingPositionsList.tsx                  | 32 ++++++----
 .../AavePage/components/TopPanel/TopPanel.tsx | 50 ++++++++--------
 .../frontend/src/locales/en/translations.json | 53 +++++++---------
 10 files changed, 261 insertions(+), 109 deletions(-)
 create mode 100644 apps/frontend/src/app/2_molecules/AavePoolRowTitle/AavePoolRowTitle.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.constants.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.types.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendingAssetsList/LendingAssetsList.tsx

diff --git a/apps/frontend/src/app/2_molecules/AavePoolRowTitle/AavePoolRowTitle.tsx b/apps/frontend/src/app/2_molecules/AavePoolRowTitle/AavePoolRowTitle.tsx
new file mode 100644
index 000000000..9f07a50ca
--- /dev/null
+++ b/apps/frontend/src/app/2_molecules/AavePoolRowTitle/AavePoolRowTitle.tsx
@@ -0,0 +1,39 @@
+import React, { FC } from 'react';
+
+import { t } from 'i18next';
+
+import { NextBorrowInterestRate } from '../../5_pages/BorrowPage/components/BorrowAssetsTable/components/NextBorrowInterestRate/NextBorrowInterestRate';
+import { NextSupplyInterestRate } from '../../5_pages/LendPage/components/NextSupplyInterestRate/NextSupplyInterestRate';
+import { translations } from '../../../locales/i18n';
+import { AssetRenderer } from '../AssetRenderer/AssetRenderer';
+
+type AavePoolRowTitleProps = {
+  asset: string;
+  isBorrow?: boolean;
+};
+
+export const AavePoolRowTitle: FC<AavePoolRowTitleProps> = ({
+  asset,
+  isBorrow = false,
+}) => (
+  <div className="flex justify-between items-center w-full">
+    <AssetRenderer
+      dataAttribute={`${isBorrow ? 'borrow-table' : 'lend-frame'}-asset`}
+      showAssetLogo
+      asset={asset}
+      className="mr-1"
+    />
+    <div className="pl-1 flex items-center">
+      {isBorrow ? (
+        <NextBorrowInterestRate asset={asset} />
+      ) : (
+        <NextSupplyInterestRate asset={asset} />
+      )}
+      <span className="text-gray-30 ml-1 font-medium">
+        {isBorrow
+          ? t(translations.fixedInterestPage.borrowAssetsTable.borrowAprMobile)
+          : t(translations.lendPage.table.lendAprMobile)}
+      </span>
+    </div>
+  </div>
+);
diff --git a/apps/frontend/src/app/5_pages/AavePage/AaavePage.tsx b/apps/frontend/src/app/5_pages/AavePage/AaavePage.tsx
index b8e681a63..5fe92b662 100644
--- a/apps/frontend/src/app/5_pages/AavePage/AaavePage.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/AaavePage.tsx
@@ -8,7 +8,9 @@ import { Tabs, TabSize, TabType } from '@sovryn/ui';
 
 import { useAccount } from '../../../hooks/useAccount';
 import { translations } from '../../../locales/i18n';
+import { BorrowingAssetsList } from './components/BorrowingAssetsList/BorrowingAssetsList';
 import { BorrowingPositionsList } from './components/BorrowingPositionsList/BorrowingPositionsList';
+import { LendingAssetsList } from './components/LendingAssetsList/LendingAssetsList';
 import { LendingPositionsList } from './components/LendingPositionsList/LendingPositionsList';
 import { TopPanel } from './components/TopPanel/TopPanel';
 
@@ -20,62 +22,60 @@ enum LiquidityTabs {
 const AavePage: FC = () => {
   const { account } = useAccount();
   const [activeLiquidityTab, setActiveLiquidityTab] = useState<LiquidityTabs>(
-    LiquidityTabs.BORROW,
+    LiquidityTabs.LEND,
   );
 
   return (
-    <div className="w-full">
+    <div className="w-full pb-6">
       <Helmet>
         <title>{t(translations.aavePage.meta.title)}</title>
       </Helmet>
 
       <TopPanel account={account} />
 
-      <div className="pt-6 mt-6 space-y-6">
+      <div className="pt-6 mt-6 space-y-6 lg:pt-0 lg:mt-0 lg:space-y-0">
         {/* Tab selector */}
-        <div className="bg-gray-80 rounded p-1 border border-gray-60">
-          <Tabs
-            className="w-full"
-            index={activeLiquidityTab}
-            items={[
-              {
-                activeClassName: 'text-primary-20',
-                dataAttribute: 'lending',
-                label: 'Lend', // TODO: translations
-              },
-              {
-                activeClassName: 'text-primary-20',
-                dataAttribute: 'borrowing',
-                label: 'Borrow', // TODO: translations
-              },
-            ]}
-            onChange={e => setActiveLiquidityTab(e)}
-            size={TabSize.normal}
-            type={TabType.secondary}
-          />
-        </div>
+        <Tabs
+          className="w-full bg-gray-80 rounded p-1 border border-gray-60 lg:hidden"
+          index={activeLiquidityTab}
+          items={[
+            {
+              activeClassName: 'text-primary-20',
+              dataAttribute: 'lending',
+              label: 'Lend', // TODO: translations
+            },
+            {
+              activeClassName: 'text-primary-20',
+              dataAttribute: 'borrowing',
+              label: 'Borrow', // TODO: translations
+            },
+          ]}
+          onChange={e => setActiveLiquidityTab(e)}
+          size={TabSize.normal}
+          type={TabType.secondary}
+        />
 
         {/* Lending and borrowing columns */}
-        <div>
-          {/* Lending column */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 lg:gap-5">
           <div
             className={classNames(
               activeLiquidityTab !== LiquidityTabs.LEND ? 'hidden' : '',
+              'lg:block space-y-4',
             )}
           >
             <LendingPositionsList />
-            {/* LendingAssetsList */}
+            <LendingAssetsList />
           </div>
 
           {/* Borrowing column */}
           <div
             className={classNames(
-              activeLiquidityTab !== LiquidityTabs.BORROW ? 'hidden' : '',
+              activeLiquidityTab !== LiquidityTabs.BORROW && 'hidden',
+              'lg:block space-y-4',
             )}
           >
             <BorrowingPositionsList />
-
-            {/* BorrowAssetsList */}
+            <BorrowingAssetsList />
           </div>
         </div>
       </div>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.constants.tsx
new file mode 100644
index 000000000..43b255661
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.constants.tsx
@@ -0,0 +1,18 @@
+export const COLUMNS_CONFIG = [
+  {
+    id: 'apr',
+    title: 'APR', // TODO: transalations
+    // cellRenderer: (asset: AssetRowElement) => (
+    //   <AssetRenderer
+    //     dataAttribute="lend-frame-asset"
+    //     showAssetLogo
+    //     asset={asset.asset}
+    //     className="lg:justify-start justify-end"
+    //   />
+    // ),
+  },
+  {
+    id: 'available',
+    title: 'Available',
+  },
+];
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.tsx
new file mode 100644
index 000000000..2de296c5b
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.tsx
@@ -0,0 +1,50 @@
+import React, { FC, useState } from 'react';
+
+import { t } from 'i18next';
+
+import { Accordion, Table } from '@sovryn/ui';
+
+import { AavePoolRowTitle } from '../../../../2_molecules/AavePoolRowTitle/AavePoolRowTitle';
+import { translations } from '../../../../../locales/i18n';
+import { COLUMNS_CONFIG } from './BorrowingAssetsList.constants';
+
+const pageTranslations = translations.aavePage.borrowingAssetsList;
+
+type BorrowingAssetsListProps = {
+  account?: string;
+};
+
+export const BorrowingAssetsList: FC<BorrowingAssetsListProps> = ({
+  account,
+}) => {
+  const [open, setOpen] = useState<boolean>(true);
+
+  return (
+    <Accordion
+      label={
+        <span className="text-base font-medium">
+          {t(pageTranslations.title)}
+        </span>
+      }
+      className="bg-gray-70 px-4 py-3 rounded space-y-3 lg:bg-gray-90 lg:p-6"
+      labelClassName="justify-between  h-7 flex items-center"
+      open={open}
+      onClick={setOpen}
+    >
+      <Table
+        columns={COLUMNS_CONFIG}
+        // className='bg-blue-2 '
+        rowClassName="bg-blue-2"
+        // expandedClassNames='bg-blue-2'
+        rowTitle={r => <AavePoolRowTitle asset={r.asset} />}
+        rows={[
+          {
+            asset: 'BTC',
+            apr: 2,
+            available: 12.34,
+          },
+        ]}
+      />
+    </Accordion>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.types.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.types.tsx
new file mode 100644
index 000000000..53eddd4dd
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.types.tsx
@@ -0,0 +1,3 @@
+export type AssetRowElement = {
+  asset: string;
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowingPositionsList/BorrowingPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowingPositionsList/BorrowingPositionsList.tsx
index 4e6c2095a..f847c8dc7 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowingPositionsList/BorrowingPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowingPositionsList/BorrowingPositionsList.tsx
@@ -1,8 +1,8 @@
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 
 import { t } from 'i18next';
 
-import { Paragraph } from '@sovryn/ui';
+import { Accordion, Paragraph } from '@sovryn/ui';
 
 import { translations } from '../../../../../locales/i18n';
 
@@ -15,21 +15,29 @@ type BorrowingPositionsListProps = {
 export const BorrowingPositionsList: FC<BorrowingPositionsListProps> = ({
   account,
 }) => {
+  const [open, setOpen] = useState<boolean>(true);
+
   return (
-    <div className="bg-gray-70 px-4 py-3 rounded space-y-3">
-      <div className="h-7 flex items-center">
-        <Paragraph className="text-base font-medium">
+    <Accordion
+      label={
+        <span className="text-base font-medium">
           {t(pageTranslations.title)}
-        </Paragraph>
-      </div>
-
+        </span>
+      }
+      className="bg-gray-70 px-4 py-3 rounded space-y-3 lg:bg-gray-90 lg:p-6 lg:border lg:border-gray-60"
+      labelClassName="justify-between  h-7 flex items-center"
+      open={open}
+      onClick={setOpen}
+    >
       {account ? (
         <></>
       ) : (
-        <Paragraph className="text-xs text-center text-gray-30 italic font-medium leading-5">
-          {t(pageTranslations.connectWallet)}
-        </Paragraph>
+        <div className="flex items-center justify-center lg:h-12">
+          <Paragraph className="text-xs text-center text-gray-30 italic font-medium leading-5 lg:text-white">
+            {t(pageTranslations.connectWallet)}
+          </Paragraph>
+        </div>
       )}
-    </div>
+    </Accordion>
   );
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendingAssetsList/LendingAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendingAssetsList/LendingAssetsList.tsx
new file mode 100644
index 000000000..18121ca0d
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendingAssetsList/LendingAssetsList.tsx
@@ -0,0 +1,33 @@
+import React, { FC, useState } from 'react';
+
+import { t } from 'i18next';
+
+import { Accordion } from '@sovryn/ui';
+
+import { translations } from '../../../../../locales/i18n';
+
+const pageTranslations = translations.aavePage.lendingAssetsList;
+
+type LendingAssetsListProps = {
+  account?: string;
+};
+
+export const LendingAssetsList: FC<LendingAssetsListProps> = ({ account }) => {
+  const [open, setOpen] = useState<boolean>(true);
+
+  return (
+    <Accordion
+      label={
+        <span className="text-base font-medium">
+          {t(pageTranslations.title)}
+        </span>
+      }
+      className="bg-gray-70 px-4 py-3 rounded space-y-3 lg:bg-gray-90 lg:p-6"
+      labelClassName="justify-between  h-7 flex items-center"
+      open={open}
+      onClick={setOpen}
+    >
+      <div>Content</div>
+    </Accordion>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendingPositionsList/LendingPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendingPositionsList/LendingPositionsList.tsx
index ac3070896..1af604c1c 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendingPositionsList/LendingPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendingPositionsList/LendingPositionsList.tsx
@@ -1,8 +1,8 @@
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 
 import { t } from 'i18next';
 
-import { Paragraph } from '@sovryn/ui';
+import { Accordion, Paragraph } from '@sovryn/ui';
 
 import { translations } from '../../../../../locales/i18n';
 
@@ -15,21 +15,29 @@ type LendingPositionsListProps = {
 export const LendingPositionsList: FC<LendingPositionsListProps> = ({
   account,
 }) => {
+  const [open, setOpen] = useState<boolean>(true);
+
   return (
-    <div className="bg-gray-70 px-4 py-3 rounded space-y-3">
-      <div className="h-7 flex items-center">
-        <Paragraph className="text-base font-medium">
+    <Accordion
+      label={
+        <span className="text-base font-medium">
           {t(pageTranslations.title)}
-        </Paragraph>
-      </div>
-
+        </span>
+      }
+      className="bg-gray-70 px-4 py-3 rounded space-y-3 lg:bg-gray-90 lg:p-6 lg:border lg:border-gray-60"
+      labelClassName="justify-between  h-7 flex items-center"
+      open={open}
+      onClick={setOpen}
+    >
       {account ? (
         <></>
       ) : (
-        <Paragraph className="text-xs text-center text-gray-30 italic font-medium leading-5">
-          {t(pageTranslations.connectWallet)}
-        </Paragraph>
+        <div className="flex items-center justify-center lg:h-12">
+          <Paragraph className="text-xs text-center text-gray-30 italic font-medium leading-5 lg:text-white">
+            {t(pageTranslations.connectWallet)}
+          </Paragraph>
+        </div>
       )}
-    </div>
+    </Accordion>
   );
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx b/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
index 677edfcd0..0caa05a11 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
@@ -23,7 +23,7 @@ type TopPanelProps = {
 export const TopPanel: FC<TopPanelProps> = ({ account }) => {
   return (
     <div className="w-full flex flex-col gap-6">
-      <div className="text-center py-6 px-10 space-y-3">
+      <div className="text-center py-6 px-10 space-y-3 md:hidden">
         <Heading className="text-base leading-5">
           {t(pageTranslations.title)}
         </Heading>
@@ -32,35 +32,37 @@ export const TopPanel: FC<TopPanelProps> = ({ account }) => {
         </Paragraph>
       </div>
 
-      <div className="flex flex-col gap-4">
-        <WalletStatCard
-          label={t(pageTranslations.netWorth)}
-          prefix="$"
-          value="1,234,567.58"
-          tooltipContent="Net APY is the combined effect of all supply and borrow positions on net worth, including incentives. It is possible to have a negative net APY if debt APY is higher than supply APY."
-        />
-        <div className="flex gap-9">
+      <div className="flex flex-col gap-6 md:flex-row">
+        <div className="flex flex-col gap-4 md:py-12 md:flex-row md:gap-9 flex-shrink-0">
           <WalletStatCard
             label={t(pageTranslations.netWorth)}
-            value="200"
-            suffix="%"
-            tooltipContent="Net APY is the combined effect of all supply and borrow positions on net worth, including incentives. It is possible to have a negative net APY if debt APY is higher than supply APY."
-          />
-          <WalletStatCard
-            label={t(pageTranslations.netWorth)}
-            value="11.69"
-            suffix="%"
+            prefix="$"
+            value="1,234,567.58"
             tooltipContent="Net APY is the combined effect of all supply and borrow positions on net worth, including incentives. It is possible to have a negative net APY if debt APY is higher than supply APY."
           />
+          <div className="flex gap-9">
+            <WalletStatCard
+              label={t(pageTranslations.netWorth)}
+              value="200"
+              suffix="%"
+              tooltipContent="Net APY is the combined effect of all supply and borrow positions on net worth, including incentives. It is possible to have a negative net APY if debt APY is higher than supply APY."
+            />
+            <WalletStatCard
+              label={t(pageTranslations.netWorth)}
+              value="11.69"
+              suffix="%"
+              tooltipContent="Net APY is the combined effect of all supply and borrow positions on net worth, including incentives. It is possible to have a negative net APY if debt APY is higher than supply APY."
+            />
+          </div>
         </div>
-      </div>
 
-      <div>
-        <Button
-          text="View transactions"
-          style={ButtonStyle.secondary}
-          size={ButtonSize.small}
-        />
+        <div className="md:flex md:justify-end md:w-full md:items-end md:pb-5">
+          <Button
+            text="View transactions"
+            style={ButtonStyle.secondary}
+            size={ButtonSize.small}
+          />
+        </div>
       </div>
     </div>
   );
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index 714516e4e..72b43784e 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -185,7 +185,6 @@
         "resetValues": "Reset values",
         "notEnoughBalance": "Estimated gas fee exceeds {{asset}} balance"
     },
-
     "zeroPage": {
         "meta": {
             "title": "Zero line of credit - Sovryn",
@@ -271,17 +270,17 @@
             "withdrawCollateral": "Withdraw collateral"
         },
         "redeem": {
-          "title": "Redeem",
-          "cta": "Redeem",
-          "form": {
-            "description": "You can redeem your ZUSD for RBTC here. The corresponding RBTC is drawn from the lowest-collateralized loans, reducing the borrower's debt while you receive an equivalent value in RBTC.",
-            "link": "Learn more about Redemptions.",
-            "minimum": "Minimum {{value}} {{symbol}}",
-            "confirm": "Confirm"
-          },
-          "tx": {
-            "title": "Redeem {{symbol}}"
-          }
+            "title": "Redeem",
+            "cta": "Redeem",
+            "form": {
+                "description": "You can redeem your ZUSD for RBTC here. The corresponding RBTC is drawn from the lowest-collateralized loans, reducing the borrower's debt while you receive an equivalent value in RBTC.",
+                "link": "Learn more about Redemptions.",
+                "minimum": "Minimum {{value}} {{symbol}}",
+                "confirm": "Confirm"
+            },
+            "tx": {
+                "title": "Redeem {{symbol}}"
+            }
         }
     },
     "stats": {
@@ -385,7 +384,6 @@
         "inputLabel": "Maximum origination fee rate",
         "errorMessage": "Value entered must be between {{min}} and {{max}}"
     },
-
     "earnPage": {
         "meta": {
             "title": "Stability pool - Sovryn",
@@ -411,7 +409,6 @@
         },
         "apr": "APR"
     },
-
     "convertPage": {
         "meta": {
             "title": "Sovryn - DeFi for bitcoin",
@@ -436,7 +433,6 @@
         "minimumReceived": "Minimum received",
         "maximumPrice": "Maximum price"
     },
-
     "landingPage": {
         "meta": {
             "title": "Welcome to Sovryn",
@@ -579,7 +575,6 @@
             "dataComingSoon": "Data coming soon"
         }
     },
-
     "stakePage": {
         "meta": {
             "title": "Staking - Sovryn"
@@ -674,7 +669,6 @@
             "signUp": "Sign up"
         }
     },
-
     "fixedInterestPage": {
         "meta": {
             "title": "Fixed-interest loans - Sovryn",
@@ -790,7 +784,6 @@
         },
         "collateralRatio": "collateral ratio"
     },
-
     "aavePage": {
         "meta": {
             "title": "Lend and borrow"
@@ -806,12 +799,18 @@
             "title": "Your loans",
             "connectWallet": "Connect wallet to see the available data"
         },
+        "borrowingAssetsList": {
+            "title": "Assets to borrow"
+        },
         "lendingPositionsList": {
             "title": "Your lending deposits",
             "connectWallet": "Connect wallet to see the available data"
-        }
+        },
+        "lendingAssetsList": {
+            "title": "Assets to lend"
+        },
+        "assetCard": {}
     },
-
     "bitocracyPage": {
         "meta": {
             "title": "Bitocracy - Sovryn",
@@ -886,7 +885,6 @@
             "accountBalance": "Account balance:"
         }
     },
-
     "proposalPage": {
         "meta": {
             "title": "Bitocracy - Sovryn"
@@ -952,7 +950,6 @@
             "calldata": "Calldata"
         }
     },
-
     "leaderboardPage": {
         "headerLink": "POWA Points",
         "headerDescription": "Earn Points, Earn POWA",
@@ -1154,7 +1151,6 @@
             }
         }
     },
-
     "fastBtc": {
         "mainScreen": {
             "title": "Funding",
@@ -1238,7 +1234,6 @@
             }
         }
     },
-
     "rewardPage": {
         "meta": {
             "title": "Rewards - Sovryn",
@@ -1351,7 +1346,6 @@
             }
         }
     },
-
     "historyPage": {
         "meta": {
             "title": "History - Sovryn",
@@ -1399,7 +1393,6 @@
         },
         "apr": "APR"
     },
-
     "marketMakingPage": {
         "meta": {
             "title": "Market Making - Sovryn"
@@ -1468,7 +1461,6 @@
             "24hVolume": "24h volume (BTC)"
         }
     },
-
     "bobMarketMakingPage": {
         "depositModal": {
             "title": "Deposit liquidity",
@@ -1525,7 +1517,6 @@
         },
         "loading": "Loading..."
     },
-
     "borrowHistory": {
         "types": {
             "lineOfCredit": "Line of credit",
@@ -2057,7 +2048,7 @@
         }
     },
     "unclaimedVestings": {
-      "text": "You have {{value}} LM SOV rewards vested stakes that you need to withdraw before claiming more.",
-      "cta": "Open Rewards page"
+        "text": "You have {{value}} LM SOV rewards vested stakes that you need to withdraw before claiming more.",
+        "cta": "Open Rewards page"
     }
-}
+}
\ No newline at end of file

From c26c396b8688915c05af28e8471e8110d5e64fe5 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Thu, 8 Aug 2024 16:49:08 +0300
Subject: [PATCH 003/116] functional static borrow asset list

---
 .../AavePoolRowTitle/AavePoolRowTitle.tsx     |  2 +-
 .../BorrowingAssetsList.constants.tsx         | 49 ++++++++--
 .../BorrowingAssetsList.tsx                   | 97 +++++++++++++++++--
 .../BorrowingAssetsList.types.tsx             |  2 +
 .../AavePage/components/TopPanel/TopPanel.tsx |  9 +-
 .../WalletStatCard/WalletStatCard.tsx         | 14 +--
 .../ui/src/2_molecules/Table/Table.types.ts   |  1 +
 .../components/TableMobile/TableMobile.tsx    |  2 +
 .../TableMobile/components/TableMobileRow.tsx |  5 +-
 9 files changed, 149 insertions(+), 32 deletions(-)
 rename apps/frontend/src/app/5_pages/AavePage/components/{ => TopPanel/components}/WalletStatCard/WalletStatCard.tsx (65%)

diff --git a/apps/frontend/src/app/2_molecules/AavePoolRowTitle/AavePoolRowTitle.tsx b/apps/frontend/src/app/2_molecules/AavePoolRowTitle/AavePoolRowTitle.tsx
index 9f07a50ca..76d8d5b0a 100644
--- a/apps/frontend/src/app/2_molecules/AavePoolRowTitle/AavePoolRowTitle.tsx
+++ b/apps/frontend/src/app/2_molecules/AavePoolRowTitle/AavePoolRowTitle.tsx
@@ -16,7 +16,7 @@ export const AavePoolRowTitle: FC<AavePoolRowTitleProps> = ({
   asset,
   isBorrow = false,
 }) => (
-  <div className="flex justify-between items-center w-full">
+  <div className="flex justify-between items-center w-full pr-3">
     <AssetRenderer
       dataAttribute={`${isBorrow ? 'borrow-table' : 'lend-frame'}-asset`}
       showAssetLogo
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.constants.tsx
index 43b255661..f88d858c8 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.constants.tsx
@@ -1,18 +1,47 @@
+import React from 'react';
+
+import { Align, Button, ButtonStyle } from '@sovryn/ui';
+
+import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
+import { AssetRowElement } from './BorrowingAssetsList.types';
+
 export const COLUMNS_CONFIG = [
   {
-    id: 'apr',
-    title: 'APR', // TODO: transalations
-    // cellRenderer: (asset: AssetRowElement) => (
-    //   <AssetRenderer
-    //     dataAttribute="lend-frame-asset"
-    //     showAssetLogo
-    //     asset={asset.asset}
-    //     className="lg:justify-start justify-end"
-    //   />
-    // ),
+    id: 'asset',
+    title: 'Asset', // TODO: transalations
+    cellRenderer: (asset: AssetRowElement) => (
+      <AssetRenderer
+        dataAttribute="borrow-asset"
+        showAssetLogo
+        asset={asset.asset}
+        className="lg:justify-start justify-end"
+      />
+    ),
+    align: Align.center,
+    sortable: true,
   },
   {
     id: 'available',
     title: 'Available',
+    sortable: true,
+    align: Align.center,
+  },
+  {
+    id: 'apr',
+    title: 'APR', // TODO: transalations
+    sortable: true,
+    align: Align.center,
+  },
+  {
+    id: 'actions',
+    align: Align.center,
+    title: ' ',
+    // TODO: create component here
+    cellRenderer: (asset: AssetRowElement) => (
+      <div className="hidden lg:flex space-x-2">
+        <Button text="Borrow" />
+        <Button text="Details" style={ButtonStyle.secondary} />
+      </div>
+    ),
   },
 ];
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.tsx
index 2de296c5b..87c33a9ce 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.tsx
@@ -2,11 +2,19 @@ import React, { FC, useState } from 'react';
 
 import { t } from 'i18next';
 
-import { Accordion, Table } from '@sovryn/ui';
+import {
+  Accordion,
+  Align,
+  Button,
+  ButtonStyle,
+  HelperButton,
+  Table,
+} from '@sovryn/ui';
 
 import { AavePoolRowTitle } from '../../../../2_molecules/AavePoolRowTitle/AavePoolRowTitle';
+import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
 import { translations } from '../../../../../locales/i18n';
-import { COLUMNS_CONFIG } from './BorrowingAssetsList.constants';
+import { AssetRowElement } from './BorrowingAssetsList.types';
 
 const pageTranslations = translations.aavePage.borrowingAssetsList;
 
@@ -32,10 +40,48 @@ export const BorrowingAssetsList: FC<BorrowingAssetsListProps> = ({
       onClick={setOpen}
     >
       <Table
-        columns={COLUMNS_CONFIG}
-        // className='bg-blue-2 '
-        rowClassName="bg-blue-2"
-        // expandedClassNames='bg-blue-2'
+        columns={[
+          {
+            id: 'asset',
+            title: 'Asset', // TODO: transalations
+            cellRenderer: (asset: AssetRowElement) => (
+              <AssetRenderer
+                dataAttribute="borrow-asset"
+                showAssetLogo
+                asset={asset.asset}
+                className="lg:justify-start justify-end"
+              />
+            ),
+            align: Align.center,
+            sortable: true,
+          },
+          {
+            id: 'available',
+            title: 'Available',
+            sortable: true,
+            align: Align.center,
+          },
+          {
+            id: 'apr',
+            title: 'APR', // TODO: transalations
+            sortable: true,
+            align: Align.center,
+          },
+          {
+            id: 'actions',
+            align: Align.center,
+            title: ' ',
+            // TODO: create component here
+            cellRenderer: (asset: AssetRowElement) => (
+              <div className="hidden lg:flex space-x-2 justify-end">
+                <Button text="Borrow" />
+                <Button text="Details" style={ButtonStyle.secondary} />
+              </div>
+            ),
+          },
+        ]}
+        rowClassName="bg-gray-80"
+        accordionClassName="bg-gray-60 border border-gray-70"
         rowTitle={r => <AavePoolRowTitle asset={r.asset} />}
         rows={[
           {
@@ -43,7 +89,46 @@ export const BorrowingAssetsList: FC<BorrowingAssetsListProps> = ({
             apr: 2,
             available: 12.34,
           },
+          {
+            asset: 'ETH',
+            apr: 2,
+            available: 12.34,
+          },
         ]}
+        mobileRenderer={r => (
+          <div className="space-y-3">
+            <div className="space-y-2">
+              {/* APR */}
+              <div className="grid grid-cols-2">
+                <div className="flex items-center gap-1">
+                  <span className="text-xs font-medium text-gray-30">APR</span>
+                  <HelperButton content="TODO:" className="text-gray-30" />
+                </div>
+                <div className="text-right text-xs text-gray-30 font-medium">
+                  {r.apr}
+                </div>
+              </div>
+
+              {/* Available */}
+              <div className="grid grid-cols-2">
+                <div className="flex items-center gap-1">
+                  <span className="text-xs font-medium text-gray-30">
+                    Available
+                  </span>
+                </div>
+                <div className="text-right text-xs text-gray-30 font-medium">
+                  {r.available} {r.asset}
+                </div>
+              </div>
+            </div>
+
+            {/* Actions TODO: same component as above */}
+            <div className="grid grid-cols-2 gap-2">
+              <Button text="Borrow" />
+              <Button text="Details" style={ButtonStyle.secondary} />
+            </div>
+          </div>
+        )}
       />
     </Accordion>
   );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.types.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.types.tsx
index 53eddd4dd..d8ce64275 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.types.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.types.tsx
@@ -1,3 +1,5 @@
 export type AssetRowElement = {
   asset: string;
+  apr: number;
+  available: number;
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx b/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
index 0caa05a11..7d4009968 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
@@ -12,7 +12,7 @@ import {
 } from '@sovryn/ui';
 
 import { translations } from '../../../../../locales/i18n';
-import { WalletStatCard } from '../WalletStatCard/WalletStatCard';
+import { WalletStatCard } from './components/WalletStatCard/WalletStatCard';
 
 const pageTranslations = translations.aavePage.topPanel;
 
@@ -38,20 +38,21 @@ export const TopPanel: FC<TopPanelProps> = ({ account }) => {
             label={t(pageTranslations.netWorth)}
             prefix="$"
             value="1,234,567.58"
-            tooltipContent="Net APY is the combined effect of all supply and borrow positions on net worth, including incentives. It is possible to have a negative net APY if debt APY is higher than supply APY."
+            // TODO: update content and translations
+            helperContent="Net APY is the combined effect of all supply and borrow positions on net worth, including incentives. It is possible to have a negative net APY if debt APY is higher than supply APY."
           />
           <div className="flex gap-9">
             <WalletStatCard
               label={t(pageTranslations.netWorth)}
               value="200"
               suffix="%"
-              tooltipContent="Net APY is the combined effect of all supply and borrow positions on net worth, including incentives. It is possible to have a negative net APY if debt APY is higher than supply APY."
+              helperContent="Net APY is the combined effect of all supply and borrow positions on net worth, including incentives. It is possible to have a negative net APY if debt APY is higher than supply APY."
             />
             <WalletStatCard
               label={t(pageTranslations.netWorth)}
               value="11.69"
               suffix="%"
-              tooltipContent="Net APY is the combined effect of all supply and borrow positions on net worth, including incentives. It is possible to have a negative net APY if debt APY is higher than supply APY."
+              helperContent="Net APY is the combined effect of all supply and borrow positions on net worth, including incentives. It is possible to have a negative net APY if debt APY is higher than supply APY."
             />
           </div>
         </div>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/WalletStatCard/WalletStatCard.tsx b/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/components/WalletStatCard/WalletStatCard.tsx
similarity index 65%
rename from apps/frontend/src/app/5_pages/AavePage/components/WalletStatCard/WalletStatCard.tsx
rename to apps/frontend/src/app/5_pages/AavePage/components/TopPanel/components/WalletStatCard/WalletStatCard.tsx
index 89daed329..e262d2ee1 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/WalletStatCard/WalletStatCard.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/components/WalletStatCard/WalletStatCard.tsx
@@ -1,13 +1,13 @@
 import React, { FC } from 'react';
 
-import { Icon, Tooltip } from '@sovryn/ui';
+import { HelperButton } from '@sovryn/ui';
 
 type WalletStatCardProps = {
   label: string;
   value: string;
   prefix?: string;
   suffix?: string;
-  tooltipContent?: string;
+  helperContent?: string;
 };
 
 export const WalletStatCard: FC<WalletStatCardProps> = ({
@@ -15,19 +15,13 @@ export const WalletStatCard: FC<WalletStatCardProps> = ({
   value,
   prefix,
   suffix,
-  tooltipContent,
+  helperContent,
 }) => {
   return (
     <div className="space-y-3">
       <div className="flex space-x-2 items-center">
         <span className="text-xs text-gray-30">{label}</span>
-        {tooltipContent && (
-          <Tooltip content={<span>{tooltipContent}</span>}>
-            <div>
-              <Icon className="h-[10px] w-[10px] text-gray-30" icon="info" />
-            </div>
-          </Tooltip>
-        )}
+        {helperContent && <HelperButton content={helperContent} />}
       </div>
       <div className="text-2xl text-white">
         {prefix && <span>{prefix}</span>}
diff --git a/packages/ui/src/2_molecules/Table/Table.types.ts b/packages/ui/src/2_molecules/Table/Table.types.ts
index 9853694e8..941438686 100644
--- a/packages/ui/src/2_molecules/Table/Table.types.ts
+++ b/packages/ui/src/2_molecules/Table/Table.types.ts
@@ -19,6 +19,7 @@ export type ColumnOptions<RowType extends RowObject> = {
 export type TableProps<RowType extends RowObject> = {
   className?: string;
   rowClassName?: string;
+  accordionClassName?: string;
   columns: ColumnOptions<RowType>[];
   rows?: RowType[];
   rowComponent?: FC<PropsWithChildren>;
diff --git a/packages/ui/src/2_molecules/Table/components/TableMobile/TableMobile.tsx b/packages/ui/src/2_molecules/Table/components/TableMobile/TableMobile.tsx
index e8304432c..b31c02e0b 100644
--- a/packages/ui/src/2_molecules/Table/components/TableMobile/TableMobile.tsx
+++ b/packages/ui/src/2_molecules/Table/components/TableMobile/TableMobile.tsx
@@ -12,6 +12,7 @@ export const TableMobile = <RowType extends RowObject>({
   columns,
   rows,
   rowComponent,
+  accordionClassName,
   rowKey,
   rowTitle,
   onRowClick,
@@ -36,6 +37,7 @@ export const TableMobile = <RowType extends RowObject>({
               titleRenderer={rowTitle}
               columns={columns}
               row={row}
+              accordionClassName={accordionClassName}
               index={index}
               onRowClick={onRowClick}
               dataAttribute={dataAttribute}
diff --git a/packages/ui/src/2_molecules/Table/components/TableMobile/components/TableMobileRow.tsx b/packages/ui/src/2_molecules/Table/components/TableMobile/components/TableMobileRow.tsx
index 5858116f1..0aa1bd0c5 100644
--- a/packages/ui/src/2_molecules/Table/components/TableMobile/components/TableMobileRow.tsx
+++ b/packages/ui/src/2_molecules/Table/components/TableMobile/components/TableMobileRow.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, useCallback, useMemo, useState } from 'react';
+import React, { ReactNode, useCallback, useMemo, useState } from 'react';
 
 import { Accordion, AccordionStyle } from '../../../../../1_atoms';
 import { noop } from '../../../../../utils';
@@ -9,6 +9,7 @@ import styles from './TableMobileRow.module.css';
 type TableMobileRowProps<RowType extends RowObject> = {
   columns: ColumnOptions<RowType>[];
   row: RowType;
+  accordionClassName?: string;
   onRowClick?: (row: RowType) => void;
   dataAttribute?: string;
   titleRenderer:
@@ -24,6 +25,7 @@ type TableMobileRowProps<RowType extends RowObject> = {
 export const TableMobileRow = <RowType extends RowObject>({
   columns,
   row,
+  accordionClassName,
   onRowClick = noop,
   dataAttribute,
   titleRenderer,
@@ -55,6 +57,7 @@ export const TableMobileRow = <RowType extends RowObject>({
         dataAttribute={dataAttribute}
         style={AccordionStyle.secondary}
         flatMode={flatMode}
+        className={accordionClassName}
       >
         <div onClick={onClick} className={styles.row}>
           {!renderer &&

From 1ba08384af2157f2d87f624845276c28bc530033 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Thu, 8 Aug 2024 17:51:39 +0300
Subject: [PATCH 004/116] cleanup

---
 .../BorrowingAssetsList.constants.tsx         | 40 +++++---
 .../BorrowingAssetsList.tsx                   | 91 ++-----------------
 .../BorrowingAssetsList.types.tsx             |  3 +-
 .../BorrowAssetAction/BorrowAssetAction.tsx   | 29 ++++++
 .../BorrowAssetDetails/BorrowAssetDetails.tsx | 51 +++++++++++
 .../frontend/src/locales/en/translations.json |  9 +-
 6 files changed, 124 insertions(+), 99 deletions(-)
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.constants.tsx
index f88d858c8..52001d650 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.constants.tsx
@@ -1,19 +1,23 @@
 import React from 'react';
 
-import { Align, Button, ButtonStyle } from '@sovryn/ui';
+import { t } from 'i18next';
+
+import { Align, HelperButton } from '@sovryn/ui';
 
 import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
-import { AssetRowElement } from './BorrowingAssetsList.types';
+import { translations } from '../../../../../locales/i18n';
+import { BorrowPoolAssetDetails } from './BorrowingAssetsList.types';
+import { BorrowAssetAction } from './components/BorrowAssetAction/BorrowAssetAction';
 
 export const COLUMNS_CONFIG = [
   {
     id: 'asset',
-    title: 'Asset', // TODO: transalations
-    cellRenderer: (asset: AssetRowElement) => (
+    title: t(translations.aavePage.borrowingAssetsList.asset),
+    cellRenderer: (pool: BorrowPoolAssetDetails) => (
       <AssetRenderer
         dataAttribute="borrow-asset"
         showAssetLogo
-        asset={asset.asset}
+        asset={pool.asset}
         className="lg:justify-start justify-end"
       />
     ),
@@ -22,13 +26,27 @@ export const COLUMNS_CONFIG = [
   },
   {
     id: 'available',
-    title: 'Available',
+    title: (
+      <span className="flex items-center gap-1">
+        {t(translations.aavePage.borrowingAssetsList.available)}{' '}
+        <HelperButton
+          content={t(translations.aavePage.borrowingAssetsList.availableInfo)}
+        />
+      </span>
+    ),
     sortable: true,
     align: Align.center,
   },
   {
     id: 'apr',
-    title: 'APR', // TODO: transalations
+    title: (
+      <span className="flex items-center gap-1">
+        {t(translations.aavePage.borrowingAssetsList.apr)}{' '}
+        <HelperButton
+          content={t(translations.aavePage.borrowingAssetsList.aprInfo)}
+        />
+      </span>
+    ),
     sortable: true,
     align: Align.center,
   },
@@ -36,12 +54,8 @@ export const COLUMNS_CONFIG = [
     id: 'actions',
     align: Align.center,
     title: ' ',
-    // TODO: create component here
-    cellRenderer: (asset: AssetRowElement) => (
-      <div className="hidden lg:flex space-x-2">
-        <Button text="Borrow" />
-        <Button text="Details" style={ButtonStyle.secondary} />
-      </div>
+    cellRenderer: (pool: BorrowPoolAssetDetails) => (
+      <BorrowAssetAction pool={pool} />
     ),
   },
 ];
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.tsx
index 87c33a9ce..f5a7f4d65 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.tsx
@@ -2,19 +2,12 @@ import React, { FC, useState } from 'react';
 
 import { t } from 'i18next';
 
-import {
-  Accordion,
-  Align,
-  Button,
-  ButtonStyle,
-  HelperButton,
-  Table,
-} from '@sovryn/ui';
+import { Accordion, Table } from '@sovryn/ui';
 
 import { AavePoolRowTitle } from '../../../../2_molecules/AavePoolRowTitle/AavePoolRowTitle';
-import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
 import { translations } from '../../../../../locales/i18n';
-import { AssetRowElement } from './BorrowingAssetsList.types';
+import { COLUMNS_CONFIG } from './BorrowingAssetsList.constants';
+import { BorrowAssetDetails } from './components/BorrowAssetDetails/BorrowAssetDetails';
 
 const pageTranslations = translations.aavePage.borrowingAssetsList;
 
@@ -40,46 +33,7 @@ export const BorrowingAssetsList: FC<BorrowingAssetsListProps> = ({
       onClick={setOpen}
     >
       <Table
-        columns={[
-          {
-            id: 'asset',
-            title: 'Asset', // TODO: transalations
-            cellRenderer: (asset: AssetRowElement) => (
-              <AssetRenderer
-                dataAttribute="borrow-asset"
-                showAssetLogo
-                asset={asset.asset}
-                className="lg:justify-start justify-end"
-              />
-            ),
-            align: Align.center,
-            sortable: true,
-          },
-          {
-            id: 'available',
-            title: 'Available',
-            sortable: true,
-            align: Align.center,
-          },
-          {
-            id: 'apr',
-            title: 'APR', // TODO: transalations
-            sortable: true,
-            align: Align.center,
-          },
-          {
-            id: 'actions',
-            align: Align.center,
-            title: ' ',
-            // TODO: create component here
-            cellRenderer: (asset: AssetRowElement) => (
-              <div className="hidden lg:flex space-x-2 justify-end">
-                <Button text="Borrow" />
-                <Button text="Details" style={ButtonStyle.secondary} />
-              </div>
-            ),
-          },
-        ]}
+        columns={COLUMNS_CONFIG}
         rowClassName="bg-gray-80"
         accordionClassName="bg-gray-60 border border-gray-70"
         rowTitle={r => <AavePoolRowTitle asset={r.asset} />}
@@ -88,47 +42,16 @@ export const BorrowingAssetsList: FC<BorrowingAssetsListProps> = ({
             asset: 'BTC',
             apr: 2,
             available: 12.34,
+            availableUsd: 100,
           },
           {
             asset: 'ETH',
             apr: 2,
             available: 12.34,
+            availableUsd: 100,
           },
         ]}
-        mobileRenderer={r => (
-          <div className="space-y-3">
-            <div className="space-y-2">
-              {/* APR */}
-              <div className="grid grid-cols-2">
-                <div className="flex items-center gap-1">
-                  <span className="text-xs font-medium text-gray-30">APR</span>
-                  <HelperButton content="TODO:" className="text-gray-30" />
-                </div>
-                <div className="text-right text-xs text-gray-30 font-medium">
-                  {r.apr}
-                </div>
-              </div>
-
-              {/* Available */}
-              <div className="grid grid-cols-2">
-                <div className="flex items-center gap-1">
-                  <span className="text-xs font-medium text-gray-30">
-                    Available
-                  </span>
-                </div>
-                <div className="text-right text-xs text-gray-30 font-medium">
-                  {r.available} {r.asset}
-                </div>
-              </div>
-            </div>
-
-            {/* Actions TODO: same component as above */}
-            <div className="grid grid-cols-2 gap-2">
-              <Button text="Borrow" />
-              <Button text="Details" style={ButtonStyle.secondary} />
-            </div>
-          </div>
-        )}
+        mobileRenderer={p => <BorrowAssetDetails pool={p} />}
       />
     </Accordion>
   );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.types.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.types.tsx
index d8ce64275..423a5519e 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.types.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.types.tsx
@@ -1,5 +1,6 @@
-export type AssetRowElement = {
+export type BorrowPoolAssetDetails = {
   asset: string;
   apr: number;
   available: number;
+  availableUsd: number;
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
new file mode 100644
index 000000000..5b19cbdcd
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
@@ -0,0 +1,29 @@
+import React, { FC } from 'react';
+
+import { t } from 'i18next';
+
+import { Button, ButtonStyle } from '@sovryn/ui';
+
+import { translations } from '../../../../../../../locales/i18n';
+import { BorrowPoolAssetDetails } from '../../BorrowingAssetsList.types';
+
+type BorrowAssetActionProps = {
+  pool: BorrowPoolAssetDetails;
+};
+
+export const BorrowAssetAction: FC<BorrowAssetActionProps> = () => {
+  return (
+    <div className="flex items-center justify-center lg:justify-end space-x-2">
+      {/* TODO: these should be modal triggers */}
+      <Button
+        className="flex-grow"
+        text={t(translations.aavePage.borrowingAssetsList.borrow)}
+      />
+      <Button
+        className="flex-grow"
+        text={t(translations.aavePage.borrowingAssetsList.details)}
+        style={ButtonStyle.secondary}
+      />
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
new file mode 100644
index 000000000..f06c5206b
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
@@ -0,0 +1,51 @@
+import React, { FC } from 'react';
+
+import { t } from 'i18next';
+
+import { HelperButton } from '@sovryn/ui';
+
+import { translations } from '../../../../../../../locales/i18n';
+import { BorrowPoolAssetDetails } from '../../BorrowingAssetsList.types';
+import { BorrowAssetAction } from '../BorrowAssetAction/BorrowAssetAction';
+
+type BorrowAssetDetailsProps = {
+  pool: BorrowPoolAssetDetails;
+};
+
+export const BorrowAssetDetails: FC<BorrowAssetDetailsProps> = ({ pool }) => {
+  return (
+    <div className="space-y-3">
+      <div className="space-y-2">
+        {/* APR */}
+        <div className="grid grid-cols-2">
+          <div className="flex items-center gap-1">
+            <span className="text-xs font-medium text-gray-30">
+              {t(translations.aavePage.borrowingAssetsList.apr)}
+            </span>
+            <HelperButton
+              content={t(translations.aavePage.borrowingAssetsList.aprInfo)}
+              className="text-gray-30"
+            />
+          </div>
+          <div className="text-right text-xs text-gray-30 font-medium">
+            {pool.apr}
+          </div>
+        </div>
+
+        {/* Available */}
+        <div className="grid grid-cols-2">
+          <div className="flex items-center gap-1">
+            <span className="text-xs font-medium text-gray-30">
+              {t(translations.aavePage.borrowingAssetsList.available)}
+            </span>
+          </div>
+          <div className="text-right text-xs text-gray-30 font-medium">
+            {pool.available} {pool.asset}
+          </div>
+        </div>
+      </div>
+
+      <BorrowAssetAction pool={pool} />
+    </div>
+  );
+};
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index 72b43784e..5b2b432da 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -800,7 +800,14 @@
             "connectWallet": "Connect wallet to see the available data"
         },
         "borrowingAssetsList": {
-            "title": "Assets to borrow"
+            "title": "Assets to borrow",
+            "asset": "Asset",
+            "apr": "APR",
+            "available": "Available",
+            "borrow": "Borrow",
+            "details": "Details",
+            "availableInfo": "TODO:",
+            "aprInfo": "APR is estimated based on previous fees earned at the defined price range, if no trades were made previously or you have recently claimed fees/withdrawn liquidity, you may see 0 value"
         },
         "lendingPositionsList": {
             "title": "Your lending deposits",

From c31694ba16bc7089979260ca4c2c5a97353dfd51 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Thu, 8 Aug 2024 18:05:36 +0300
Subject: [PATCH 005/116] renaming

---
 .../src/app/5_pages/AavePage/AaavePage.tsx    | 16 +++---
 .../BorrowAssetsList.constants.tsx}           | 12 +++--
 .../BorrowAssetsList.tsx}                     | 52 +++++++++----------
 .../BorrowAssetsList.types.tsx}               |  0
 .../BorrowAssetAction/BorrowAssetAction.tsx   |  2 +-
 .../BorrowAssetDetails/BorrowAssetDetails.tsx |  2 +-
 .../BorrowPositionsList.tsx}                  |  4 +-
 .../LendAssetsList.tsx}                       |  4 +-
 .../LendPositionsList.tsx}                    |  6 +--
 9 files changed, 50 insertions(+), 48 deletions(-)
 rename apps/frontend/src/app/5_pages/AavePage/components/{BorrowingAssetsList/BorrowingAssetsList.constants.tsx => BorrowAssetsList/BorrowAssetsList.constants.tsx} (81%)
 rename apps/frontend/src/app/5_pages/AavePage/components/{BorrowingAssetsList/BorrowingAssetsList.tsx => BorrowAssetsList/BorrowAssetsList.tsx} (51%)
 rename apps/frontend/src/app/5_pages/AavePage/components/{BorrowingAssetsList/BorrowingAssetsList.types.tsx => BorrowAssetsList/BorrowAssetsList.types.tsx} (100%)
 rename apps/frontend/src/app/5_pages/AavePage/components/{BorrowingAssetsList => BorrowAssetsList}/components/BorrowAssetAction/BorrowAssetAction.tsx (91%)
 rename apps/frontend/src/app/5_pages/AavePage/components/{BorrowingAssetsList => BorrowAssetsList}/components/BorrowAssetDetails/BorrowAssetDetails.tsx (95%)
 rename apps/frontend/src/app/5_pages/AavePage/components/{BorrowingPositionsList/BorrowingPositionsList.tsx => BorrowPositionsList/BorrowPositionsList.tsx} (90%)
 rename apps/frontend/src/app/5_pages/AavePage/components/{LendingAssetsList/LendingAssetsList.tsx => LendAssetsList/LendAssetsList.tsx} (86%)
 rename apps/frontend/src/app/5_pages/AavePage/components/{LendingPositionsList/LendingPositionsList.tsx => LendPositionsList/LendPositionsList.tsx} (89%)

diff --git a/apps/frontend/src/app/5_pages/AavePage/AaavePage.tsx b/apps/frontend/src/app/5_pages/AavePage/AaavePage.tsx
index 5fe92b662..bcc087065 100644
--- a/apps/frontend/src/app/5_pages/AavePage/AaavePage.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/AaavePage.tsx
@@ -8,10 +8,10 @@ import { Tabs, TabSize, TabType } from '@sovryn/ui';
 
 import { useAccount } from '../../../hooks/useAccount';
 import { translations } from '../../../locales/i18n';
-import { BorrowingAssetsList } from './components/BorrowingAssetsList/BorrowingAssetsList';
-import { BorrowingPositionsList } from './components/BorrowingPositionsList/BorrowingPositionsList';
-import { LendingAssetsList } from './components/LendingAssetsList/LendingAssetsList';
-import { LendingPositionsList } from './components/LendingPositionsList/LendingPositionsList';
+import { BorrowAssetsList } from './components/BorrowAssetsList/BorrowAssetsList';
+import { BorrowPositionsList } from './components/BorrowPositionsList/BorrowPositionsList';
+import { LendAssetsList } from './components/LendAssetsList/LendAssetsList';
+import { LendPositionsList } from './components/LendPositionsList/LendPositionsList';
 import { TopPanel } from './components/TopPanel/TopPanel';
 
 enum LiquidityTabs {
@@ -63,8 +63,8 @@ const AavePage: FC = () => {
               'lg:block space-y-4',
             )}
           >
-            <LendingPositionsList />
-            <LendingAssetsList />
+            <LendPositionsList />
+            <LendAssetsList />
           </div>
 
           {/* Borrowing column */}
@@ -74,8 +74,8 @@ const AavePage: FC = () => {
               'lg:block space-y-4',
             )}
           >
-            <BorrowingPositionsList />
-            <BorrowingAssetsList />
+            <BorrowPositionsList />
+            <BorrowAssetsList />
           </div>
         </div>
       </div>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
similarity index 81%
rename from apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.constants.tsx
rename to apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
index 52001d650..101497eea 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
@@ -6,13 +6,17 @@ import { Align, HelperButton } from '@sovryn/ui';
 
 import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
 import { translations } from '../../../../../locales/i18n';
-import { BorrowPoolAssetDetails } from './BorrowingAssetsList.types';
+import { BorrowPoolAssetDetails } from './BorrowAssetsList.types';
 import { BorrowAssetAction } from './components/BorrowAssetAction/BorrowAssetAction';
 
 export const COLUMNS_CONFIG = [
   {
     id: 'asset',
-    title: t(translations.aavePage.borrowingAssetsList.asset),
+    title: (
+      <span className="text-gray-30">
+        {t(translations.aavePage.borrowingAssetsList.asset)}
+      </span>
+    ),
     cellRenderer: (pool: BorrowPoolAssetDetails) => (
       <AssetRenderer
         dataAttribute="borrow-asset"
@@ -27,7 +31,7 @@ export const COLUMNS_CONFIG = [
   {
     id: 'available',
     title: (
-      <span className="flex items-center gap-1">
+      <span className="flex items-center gap-1 text-gray-30">
         {t(translations.aavePage.borrowingAssetsList.available)}{' '}
         <HelperButton
           content={t(translations.aavePage.borrowingAssetsList.availableInfo)}
@@ -40,7 +44,7 @@ export const COLUMNS_CONFIG = [
   {
     id: 'apr',
     title: (
-      <span className="flex items-center gap-1">
+      <span className="flex items-center gap-1 text-gray-30">
         {t(translations.aavePage.borrowingAssetsList.apr)}{' '}
         <HelperButton
           content={t(translations.aavePage.borrowingAssetsList.aprInfo)}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
similarity index 51%
rename from apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.tsx
rename to apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
index f5a7f4d65..f92823df7 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
@@ -6,18 +6,16 @@ import { Accordion, Table } from '@sovryn/ui';
 
 import { AavePoolRowTitle } from '../../../../2_molecules/AavePoolRowTitle/AavePoolRowTitle';
 import { translations } from '../../../../../locales/i18n';
-import { COLUMNS_CONFIG } from './BorrowingAssetsList.constants';
+import { COLUMNS_CONFIG } from './BorrowAssetsList.constants';
 import { BorrowAssetDetails } from './components/BorrowAssetDetails/BorrowAssetDetails';
 
 const pageTranslations = translations.aavePage.borrowingAssetsList;
 
-type BorrowingAssetsListProps = {
+type BorrowAssetsListProps = {
   account?: string;
 };
 
-export const BorrowingAssetsList: FC<BorrowingAssetsListProps> = ({
-  account,
-}) => {
+export const BorrowAssetsList: FC<BorrowAssetsListProps> = ({ account }) => {
   const [open, setOpen] = useState<boolean>(true);
 
   return (
@@ -32,27 +30,29 @@ export const BorrowingAssetsList: FC<BorrowingAssetsListProps> = ({
       open={open}
       onClick={setOpen}
     >
-      <Table
-        columns={COLUMNS_CONFIG}
-        rowClassName="bg-gray-80"
-        accordionClassName="bg-gray-60 border border-gray-70"
-        rowTitle={r => <AavePoolRowTitle asset={r.asset} />}
-        rows={[
-          {
-            asset: 'BTC',
-            apr: 2,
-            available: 12.34,
-            availableUsd: 100,
-          },
-          {
-            asset: 'ETH',
-            apr: 2,
-            available: 12.34,
-            availableUsd: 100,
-          },
-        ]}
-        mobileRenderer={p => <BorrowAssetDetails pool={p} />}
-      />
+      <div className="pt-3">
+        <Table
+          columns={COLUMNS_CONFIG}
+          rowClassName="bg-gray-80"
+          accordionClassName="bg-gray-60 border border-gray-70"
+          rowTitle={r => <AavePoolRowTitle asset={r.asset} />}
+          rows={[
+            {
+              asset: 'BTC',
+              apr: 2,
+              available: 12.34,
+              availableUsd: 100,
+            },
+            {
+              asset: 'ETH',
+              apr: 2,
+              available: 12.34,
+              availableUsd: 100,
+            },
+          ]}
+          mobileRenderer={p => <BorrowAssetDetails pool={p} />}
+        />
+      </div>
     </Accordion>
   );
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.types.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.types.tsx
similarity index 100%
rename from apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/BorrowingAssetsList.types.tsx
rename to apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.types.tsx
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
similarity index 91%
rename from apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
rename to apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
index 5b19cbdcd..6d2c0ef55 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
@@ -5,7 +5,7 @@ import { t } from 'i18next';
 import { Button, ButtonStyle } from '@sovryn/ui';
 
 import { translations } from '../../../../../../../locales/i18n';
-import { BorrowPoolAssetDetails } from '../../BorrowingAssetsList.types';
+import { BorrowPoolAssetDetails } from '../../BorrowAssetsList.types';
 
 type BorrowAssetActionProps = {
   pool: BorrowPoolAssetDetails;
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
similarity index 95%
rename from apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
rename to apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
index f06c5206b..bd993b76e 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowingAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
@@ -5,7 +5,7 @@ import { t } from 'i18next';
 import { HelperButton } from '@sovryn/ui';
 
 import { translations } from '../../../../../../../locales/i18n';
-import { BorrowPoolAssetDetails } from '../../BorrowingAssetsList.types';
+import { BorrowPoolAssetDetails } from '../../BorrowAssetsList.types';
 import { BorrowAssetAction } from '../BorrowAssetAction/BorrowAssetAction';
 
 type BorrowAssetDetailsProps = {
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowingPositionsList/BorrowingPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
similarity index 90%
rename from apps/frontend/src/app/5_pages/AavePage/components/BorrowingPositionsList/BorrowingPositionsList.tsx
rename to apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
index f847c8dc7..b2195726f 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowingPositionsList/BorrowingPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
@@ -8,11 +8,11 @@ import { translations } from '../../../../../locales/i18n';
 
 const pageTranslations = translations.aavePage.borrowingPositionsList;
 
-type BorrowingPositionsListProps = {
+type BorrowPositionsListProps = {
   account?: string;
 };
 
-export const BorrowingPositionsList: FC<BorrowingPositionsListProps> = ({
+export const BorrowPositionsList: FC<BorrowPositionsListProps> = ({
   account,
 }) => {
   const [open, setOpen] = useState<boolean>(true);
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendingAssetsList/LendingAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
similarity index 86%
rename from apps/frontend/src/app/5_pages/AavePage/components/LendingAssetsList/LendingAssetsList.tsx
rename to apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
index 18121ca0d..ba87968d8 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendingAssetsList/LendingAssetsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
@@ -8,11 +8,11 @@ import { translations } from '../../../../../locales/i18n';
 
 const pageTranslations = translations.aavePage.lendingAssetsList;
 
-type LendingAssetsListProps = {
+type LendAssetsListProps = {
   account?: string;
 };
 
-export const LendingAssetsList: FC<LendingAssetsListProps> = ({ account }) => {
+export const LendAssetsList: FC<LendAssetsListProps> = ({ account }) => {
   const [open, setOpen] = useState<boolean>(true);
 
   return (
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendingPositionsList/LendingPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
similarity index 89%
rename from apps/frontend/src/app/5_pages/AavePage/components/LendingPositionsList/LendingPositionsList.tsx
rename to apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
index 1af604c1c..d065b438e 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendingPositionsList/LendingPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
@@ -8,13 +8,11 @@ import { translations } from '../../../../../locales/i18n';
 
 const pageTranslations = translations.aavePage.lendingPositionsList;
 
-type LendingPositionsListProps = {
+type LendPositionsListProps = {
   account?: string;
 };
 
-export const LendingPositionsList: FC<LendingPositionsListProps> = ({
-  account,
-}) => {
+export const LendPositionsList: FC<LendPositionsListProps> = ({ account }) => {
   const [open, setOpen] = useState<boolean>(true);
 
   return (

From 9678cebbf944588868b8302236b4dd3bf7a3cb7b Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Thu, 8 Aug 2024 19:09:30 +0300
Subject: [PATCH 006/116] lend assets list

---
 .../BorrowAssetsList.constants.tsx            | 10 +--
 .../BorrowAssetsList/BorrowAssetsList.tsx     |  2 +-
 .../BorrowAssetAction/BorrowAssetAction.tsx   |  9 +--
 .../BorrowAssetDetails/BorrowAssetDetails.tsx |  8 +-
 .../BorrowPositionsList.tsx                   |  2 +-
 .../LendAssetsList.constants.tsx              | 79 +++++++++++++++++++
 .../LendAssetsList/LendAssetsList.tsx         | 33 +++++++-
 .../LendAssetsList/LendAssetsList.types.tsx   |  6 ++
 .../LendAssetAction/LendAssetAction.tsx       | 29 +++++++
 .../LendAssetDetails/LendAssetDetails.tsx     | 67 ++++++++++++++++
 .../LendPositionsList/LendPositionsList.tsx   |  2 +-
 .../frontend/src/locales/en/translations.json | 17 ++--
 12 files changed, 240 insertions(+), 24 deletions(-)
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.types.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
index 101497eea..050b2b2da 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
@@ -14,7 +14,7 @@ export const COLUMNS_CONFIG = [
     id: 'asset',
     title: (
       <span className="text-gray-30">
-        {t(translations.aavePage.borrowingAssetsList.asset)}
+        {t(translations.aavePage.borrowAssetsList.asset)}
       </span>
     ),
     cellRenderer: (pool: BorrowPoolAssetDetails) => (
@@ -32,9 +32,9 @@ export const COLUMNS_CONFIG = [
     id: 'available',
     title: (
       <span className="flex items-center gap-1 text-gray-30">
-        {t(translations.aavePage.borrowingAssetsList.available)}{' '}
+        {t(translations.aavePage.borrowAssetsList.available)}{' '}
         <HelperButton
-          content={t(translations.aavePage.borrowingAssetsList.availableInfo)}
+          content={t(translations.aavePage.borrowAssetsList.availableInfo)}
         />
       </span>
     ),
@@ -45,9 +45,9 @@ export const COLUMNS_CONFIG = [
     id: 'apr',
     title: (
       <span className="flex items-center gap-1 text-gray-30">
-        {t(translations.aavePage.borrowingAssetsList.apr)}{' '}
+        {t(translations.aavePage.borrowAssetsList.apr)}{' '}
         <HelperButton
-          content={t(translations.aavePage.borrowingAssetsList.aprInfo)}
+          content={t(translations.aavePage.borrowAssetsList.aprInfo)}
         />
       </span>
     ),
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
index f92823df7..a88b3bfa0 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
@@ -9,7 +9,7 @@ import { translations } from '../../../../../locales/i18n';
 import { COLUMNS_CONFIG } from './BorrowAssetsList.constants';
 import { BorrowAssetDetails } from './components/BorrowAssetDetails/BorrowAssetDetails';
 
-const pageTranslations = translations.aavePage.borrowingAssetsList;
+const pageTranslations = translations.aavePage.borrowAssetsList;
 
 type BorrowAssetsListProps = {
   account?: string;
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
index 6d2c0ef55..c87455507 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
@@ -7,6 +7,8 @@ import { Button, ButtonStyle } from '@sovryn/ui';
 import { translations } from '../../../../../../../locales/i18n';
 import { BorrowPoolAssetDetails } from '../../BorrowAssetsList.types';
 
+const pageTranslations = translations.aavePage.borrowAssetsList;
+
 type BorrowAssetActionProps = {
   pool: BorrowPoolAssetDetails;
 };
@@ -15,13 +17,10 @@ export const BorrowAssetAction: FC<BorrowAssetActionProps> = () => {
   return (
     <div className="flex items-center justify-center lg:justify-end space-x-2">
       {/* TODO: these should be modal triggers */}
+      <Button className="flex-grow" text={t(pageTranslations.borrow)} />
       <Button
         className="flex-grow"
-        text={t(translations.aavePage.borrowingAssetsList.borrow)}
-      />
-      <Button
-        className="flex-grow"
-        text={t(translations.aavePage.borrowingAssetsList.details)}
+        text={t(pageTranslations.details)}
         style={ButtonStyle.secondary}
       />
     </div>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
index bd993b76e..a210fc808 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
@@ -8,6 +8,8 @@ import { translations } from '../../../../../../../locales/i18n';
 import { BorrowPoolAssetDetails } from '../../BorrowAssetsList.types';
 import { BorrowAssetAction } from '../BorrowAssetAction/BorrowAssetAction';
 
+const pageTranslations = translations.aavePage.borrowAssetsList;
+
 type BorrowAssetDetailsProps = {
   pool: BorrowPoolAssetDetails;
 };
@@ -20,10 +22,10 @@ export const BorrowAssetDetails: FC<BorrowAssetDetailsProps> = ({ pool }) => {
         <div className="grid grid-cols-2">
           <div className="flex items-center gap-1">
             <span className="text-xs font-medium text-gray-30">
-              {t(translations.aavePage.borrowingAssetsList.apr)}
+              {t(pageTranslations.apr)}
             </span>
             <HelperButton
-              content={t(translations.aavePage.borrowingAssetsList.aprInfo)}
+              content={t(pageTranslations.aprInfo)}
               className="text-gray-30"
             />
           </div>
@@ -36,7 +38,7 @@ export const BorrowAssetDetails: FC<BorrowAssetDetailsProps> = ({ pool }) => {
         <div className="grid grid-cols-2">
           <div className="flex items-center gap-1">
             <span className="text-xs font-medium text-gray-30">
-              {t(translations.aavePage.borrowingAssetsList.available)}
+              {t(pageTranslations.available)}
             </span>
           </div>
           <div className="text-right text-xs text-gray-30 font-medium">
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
index b2195726f..2a9531451 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
@@ -6,7 +6,7 @@ import { Accordion, Paragraph } from '@sovryn/ui';
 
 import { translations } from '../../../../../locales/i18n';
 
-const pageTranslations = translations.aavePage.borrowingPositionsList;
+const pageTranslations = translations.aavePage.borrowPositionsList;
 
 type BorrowPositionsListProps = {
   account?: string;
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
new file mode 100644
index 000000000..3fbeab6b3
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+
+import { t } from 'i18next';
+
+import { Align, HelperButton, Icon } from '@sovryn/ui';
+
+import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
+import { translations } from '../../../../../locales/i18n';
+import { LendPoolAssetDetails } from './LendAssetsList.types';
+import { LendAssetAction } from './components/LendAssetAction/LendAssetAction';
+
+export const COLUMNS_CONFIG = [
+  {
+    id: 'asset',
+    title: (
+      <span className="text-gray-30">
+        {t(translations.aavePage.lendAssetsList.asset)}
+      </span>
+    ),
+    cellRenderer: (pool: LendPoolAssetDetails) => (
+      <AssetRenderer
+        dataAttribute="borrow-asset"
+        showAssetLogo
+        asset={pool.asset}
+        className="lg:justify-start justify-end"
+      />
+    ),
+    align: Align.center,
+    sortable: true,
+  },
+  {
+    id: 'walletBalance',
+    title: (
+      <span className="flex items-center gap-1 text-gray-30">
+        {t(translations.aavePage.lendAssetsList.walletBalance)}{' '}
+      </span>
+    ),
+    sortable: true,
+    align: Align.center,
+  },
+  {
+    id: 'apy',
+    title: (
+      <span className="flex items-center gap-1 text-gray-30">
+        {t(translations.aavePage.lendAssetsList.apy)}{' '}
+        <HelperButton
+          content={t(translations.aavePage.lendAssetsList.apyInfo)}
+        />
+      </span>
+    ),
+    sortable: true,
+    align: Align.center,
+  },
+  {
+    id: 'canBeCollateral',
+    title: (
+      <span className="flex items-center gap-1 text-gray-30">
+        {t(translations.aavePage.lendAssetsList.walletBalance)}{' '}
+      </span>
+    ),
+    sortable: true,
+    align: Align.center,
+    cellRenderer: (pool: LendPoolAssetDetails) => (
+      <div className="flex justify-center">
+        {pool.canBeCollateral && (
+          <Icon icon="check" className="w-[10px] text-positive" />
+        )}
+      </div>
+    ),
+  },
+  {
+    id: 'actions',
+    align: Align.center,
+    title: ' ',
+    cellRenderer: (pool: LendPoolAssetDetails) => (
+      <LendAssetAction pool={pool} />
+    ),
+  },
+];
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
index ba87968d8..1eee75dce 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
@@ -2,11 +2,14 @@ import React, { FC, useState } from 'react';
 
 import { t } from 'i18next';
 
-import { Accordion } from '@sovryn/ui';
+import { Accordion, Checkbox, Table } from '@sovryn/ui';
 
+import { AavePoolRowTitle } from '../../../../2_molecules/AavePoolRowTitle/AavePoolRowTitle';
 import { translations } from '../../../../../locales/i18n';
+import { COLUMNS_CONFIG } from './LendAssetsList.constants';
+import { LendAssetDetails } from './components/LendAssetDetails/LendAssetDetails';
 
-const pageTranslations = translations.aavePage.lendingAssetsList;
+const pageTranslations = translations.aavePage.lendAssetsList;
 
 type LendAssetsListProps = {
   account?: string;
@@ -27,7 +30,31 @@ export const LendAssetsList: FC<LendAssetsListProps> = ({ account }) => {
       open={open}
       onClick={setOpen}
     >
-      <div>Content</div>
+      <div className="py-2 mb-2">
+        <Checkbox label="Show assets with 0 balance" />
+      </div>
+
+      <Table
+        columns={COLUMNS_CONFIG}
+        rowClassName="bg-gray-80"
+        accordionClassName="bg-gray-60 border border-gray-70"
+        rowTitle={r => <AavePoolRowTitle asset={r.asset} />}
+        rows={[
+          {
+            asset: 'BTC',
+            apy: 2,
+            walletBalance: 12.34,
+            canBeCollateral: true,
+          },
+          {
+            asset: 'ETH',
+            apy: 2,
+            walletBalance: 12.34,
+            canBeCollateral: false,
+          },
+        ]}
+        mobileRenderer={p => <LendAssetDetails pool={p} />}
+      />
     </Accordion>
   );
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.types.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.types.tsx
new file mode 100644
index 000000000..d6ddd4fef
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.types.tsx
@@ -0,0 +1,6 @@
+export type LendPoolAssetDetails = {
+  asset: string;
+  walletBalance: number;
+  apy: number;
+  canBeCollateral: boolean;
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
new file mode 100644
index 000000000..84eebc7c8
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
@@ -0,0 +1,29 @@
+import React, { FC } from 'react';
+
+import { t } from 'i18next';
+
+import { Button, ButtonStyle } from '@sovryn/ui';
+
+import { translations } from '../../../../../../../locales/i18n';
+import { LendPoolAssetDetails } from '../../LendAssetsList.types';
+
+type LendAssetActionProps = {
+  pool: LendPoolAssetDetails;
+};
+
+export const LendAssetAction: FC<LendAssetActionProps> = () => {
+  return (
+    <div className="flex items-center justify-center lg:justify-end space-x-2">
+      {/* TODO: these should be modal triggers */}
+      <Button
+        className="flex-grow"
+        text={t(translations.aavePage.lendAssetsList.lend)}
+      />
+      <Button
+        className="flex-grow"
+        text={t(translations.aavePage.lendAssetsList.details)}
+        style={ButtonStyle.secondary}
+      />
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
new file mode 100644
index 000000000..cc44c8f5d
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
@@ -0,0 +1,67 @@
+import React, { FC } from 'react';
+
+import { t } from 'i18next';
+
+import { HelperButton, Icon } from '@sovryn/ui';
+
+import { translations } from '../../../../../../../locales/i18n';
+import { LendPoolAssetDetails } from '../../LendAssetsList.types';
+import { LendAssetAction } from '../LendAssetAction/LendAssetAction';
+
+type LendAssetDetailsProps = {
+  pool: LendPoolAssetDetails;
+};
+
+export const LendAssetDetails: FC<LendAssetDetailsProps> = ({ pool }) => {
+  return (
+    <div className="space-y-3">
+      <div className="space-y-2">
+        {/* Available */}
+        <div className="grid grid-cols-2">
+          <div className="flex items-center gap-1">
+            <span className="text-xs font-medium text-gray-30">
+              {t(translations.aavePage.lendAssetsList.walletBalance)}
+            </span>
+          </div>
+
+          {/* TODO: review amount renderer component */}
+          <div className="text-right text-xs text-gray-30 font-medium">
+            {pool.walletBalance} {pool.asset}
+          </div>
+        </div>
+
+        {/* APR */}
+        <div className="grid grid-cols-2">
+          <div className="flex items-center gap-1">
+            <span className="text-xs font-medium text-gray-30">
+              {t(translations.aavePage.lendAssetsList.apy)}
+            </span>
+            <HelperButton
+              content={t(translations.aavePage.lendAssetsList.apyInfo)}
+              className="text-gray-30"
+            />
+          </div>
+          <div className="text-right text-xs text-gray-30 font-medium">
+            {pool.apy}
+          </div>
+        </div>
+
+        {/* Can be collateral */}
+        <div className="grid grid-cols-2">
+          <div className="flex items-center gap-1">
+            <span className="text-xs font-medium text-gray-30">
+              {t(translations.aavePage.lendAssetsList.canBeCollateral)}
+            </span>
+          </div>
+          <div className="flex justify-end text-xs text-positive font-medium">
+            {pool.canBeCollateral ? (
+              <Icon icon="check" className="w-[10px]" />
+            ) : null}
+          </div>
+        </div>
+      </div>
+
+      <LendAssetAction pool={pool} />
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
index d065b438e..119a53afb 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
@@ -6,7 +6,7 @@ import { Accordion, Paragraph } from '@sovryn/ui';
 
 import { translations } from '../../../../../locales/i18n';
 
-const pageTranslations = translations.aavePage.lendingPositionsList;
+const pageTranslations = translations.aavePage.lendPositionsList;
 
 type LendPositionsListProps = {
   account?: string;
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index 5b2b432da..da354cfe5 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -795,11 +795,11 @@
             "netApy": "Net API",
             "n/a": "N/A"
         },
-        "borrowingPositionsList": {
+        "borrowPositionsList": {
             "title": "Your loans",
             "connectWallet": "Connect wallet to see the available data"
         },
-        "borrowingAssetsList": {
+        "borrowAssetsList": {
             "title": "Assets to borrow",
             "asset": "Asset",
             "apr": "APR",
@@ -809,12 +809,19 @@
             "availableInfo": "TODO:",
             "aprInfo": "APR is estimated based on previous fees earned at the defined price range, if no trades were made previously or you have recently claimed fees/withdrawn liquidity, you may see 0 value"
         },
-        "lendingPositionsList": {
+        "lendPositionsList": {
             "title": "Your lending deposits",
             "connectWallet": "Connect wallet to see the available data"
         },
-        "lendingAssetsList": {
-            "title": "Assets to lend"
+        "lendAssetsList": {
+            "title": "Assets to lend",
+            "asset": "Asset",
+            "apy": "APY",
+            "apyInfo": "TODO:",
+            "walletBalance": "Wallet balance",
+            "lend": "Lend",
+            "details": "Details",
+            "canBeCollateral": "Can be collateral"
         },
         "assetCard": {}
     },

From c67474ffe81555e5269cd6d9e12e5b07d1e7bac8 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Thu, 8 Aug 2024 20:55:27 +0300
Subject: [PATCH 007/116] Lend positions list

---
 .../AmountRenderer/AmountRenderer.tsx         | 44 +++++------
 .../BorrowAssetsList.constants.tsx            |  8 +-
 .../BorrowAssetAction/BorrowAssetAction.tsx   |  6 +-
 .../BorrowAssetDetails/BorrowAssetDetails.tsx |  8 +-
 .../BorrowPositionsList.tsx                   |  6 +-
 .../LendAssetsList.constants.tsx              | 14 ++--
 .../LendAssetAction/LendAssetAction.tsx       |  4 +-
 .../LendAssetDetails/LendAssetDetails.tsx     |  4 +-
 .../LendPositionsList.constants.tsx           | 74 +++++++++++++++++++
 .../LendPositionsList/LendPositionsList.tsx   | 64 +++++++++++++---
 .../LendPositionsList.types.tsx               |  6 ++
 .../LendPositionAction/LendPositionAction.tsx | 25 +++++++
 .../LendPositionDetails.tsx                   | 65 ++++++++++++++++
 .../LendPositionStat/LendPositionStat.tsx     | 34 +++++++++
 .../frontend/src/locales/en/translations.json | 29 +++++---
 15 files changed, 320 insertions(+), 71 deletions(-)
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.types.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionStat/LendPositionStat.tsx

diff --git a/apps/frontend/src/app/2_molecules/AmountRenderer/AmountRenderer.tsx b/apps/frontend/src/app/2_molecules/AmountRenderer/AmountRenderer.tsx
index 6350188fd..0994b2fcd 100644
--- a/apps/frontend/src/app/2_molecules/AmountRenderer/AmountRenderer.tsx
+++ b/apps/frontend/src/app/2_molecules/AmountRenderer/AmountRenderer.tsx
@@ -29,7 +29,7 @@ import {
 
 const { decimal, thousand } = getLocaleSeparators();
 
-type AmountRendererProps = {
+export type AmountRendererProps = {
   value: Decimalish;
   precision?: number;
   className?: string;
@@ -142,33 +142,29 @@ export const AmountRenderer: FC<AmountRendererProps> = ({
           </span>
         </span>
       }
-      className={classNames({
-        'cursor-pointer': shouldShowTooltip,
-      })}
+      className={classNames({ 'cursor-pointer': shouldShowTooltip }, className)}
       disabled={!shouldShowTooltip}
       trigger={trigger}
       dataAttribute={dataAttribute}
     >
-      <span className={className}>
-        {isAnimated ? (
-          <CountUp
-            start={0}
-            end={countUpValues.end}
-            decimals={calculatedPrecision}
-            duration={1} //do not set lower than 1 overwise it can cause a bug
-            separator={thousand}
-            decimal={decimal}
-            prefix={shouldShowRoundingPrefix ? `~ ${prefix}` : `${prefix}`}
-            suffix={` ${suffix}`}
-          />
-        ) : (
-          <>
-            {shouldShowRoundingPrefix ? '~ ' : ''}
-            {prefix}
-            {localeFormattedValue} {suffix}
-          </>
-        )}
-      </span>
+      {isAnimated ? (
+        <CountUp
+          start={0}
+          end={countUpValues.end}
+          decimals={calculatedPrecision}
+          duration={1} //do not set lower than 1 overwise it can cause a bug
+          separator={thousand}
+          decimal={decimal}
+          prefix={shouldShowRoundingPrefix ? `~ ${prefix}` : `${prefix}`}
+          suffix={` ${suffix}`}
+        />
+      ) : (
+        <span>
+          {shouldShowRoundingPrefix ? '~ ' : ''}
+          {prefix}
+          {localeFormattedValue} {suffix}
+        </span>
+      )}
     </Tooltip>
   );
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
index 050b2b2da..e50ce1b08 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
@@ -14,7 +14,7 @@ export const COLUMNS_CONFIG = [
     id: 'asset',
     title: (
       <span className="text-gray-30">
-        {t(translations.aavePage.borrowAssetsList.asset)}
+        {t(translations.aavePage.common.asset)}
       </span>
     ),
     cellRenderer: (pool: BorrowPoolAssetDetails) => (
@@ -45,10 +45,8 @@ export const COLUMNS_CONFIG = [
     id: 'apr',
     title: (
       <span className="flex items-center gap-1 text-gray-30">
-        {t(translations.aavePage.borrowAssetsList.apr)}{' '}
-        <HelperButton
-          content={t(translations.aavePage.borrowAssetsList.aprInfo)}
-        />
+        {t(translations.aavePage.common.apr)}{' '}
+        <HelperButton content={t(translations.aavePage.common.aprInfo)} />
       </span>
     ),
     sortable: true,
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
index c87455507..6ce196f3f 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
@@ -7,7 +7,7 @@ import { Button, ButtonStyle } from '@sovryn/ui';
 import { translations } from '../../../../../../../locales/i18n';
 import { BorrowPoolAssetDetails } from '../../BorrowAssetsList.types';
 
-const pageTranslations = translations.aavePage.borrowAssetsList;
+const pageTranslations = translations.aavePage;
 
 type BorrowAssetActionProps = {
   pool: BorrowPoolAssetDetails;
@@ -17,10 +17,10 @@ export const BorrowAssetAction: FC<BorrowAssetActionProps> = () => {
   return (
     <div className="flex items-center justify-center lg:justify-end space-x-2">
       {/* TODO: these should be modal triggers */}
-      <Button className="flex-grow" text={t(pageTranslations.borrow)} />
+      <Button className="flex-grow" text={t(pageTranslations.common.borrow)} />
       <Button
         className="flex-grow"
-        text={t(pageTranslations.details)}
+        text={t(pageTranslations.common.details)}
         style={ButtonStyle.secondary}
       />
     </div>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
index a210fc808..3ebb8311d 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
@@ -8,7 +8,7 @@ import { translations } from '../../../../../../../locales/i18n';
 import { BorrowPoolAssetDetails } from '../../BorrowAssetsList.types';
 import { BorrowAssetAction } from '../BorrowAssetAction/BorrowAssetAction';
 
-const pageTranslations = translations.aavePage.borrowAssetsList;
+const pageTranslations = translations.aavePage;
 
 type BorrowAssetDetailsProps = {
   pool: BorrowPoolAssetDetails;
@@ -22,10 +22,10 @@ export const BorrowAssetDetails: FC<BorrowAssetDetailsProps> = ({ pool }) => {
         <div className="grid grid-cols-2">
           <div className="flex items-center gap-1">
             <span className="text-xs font-medium text-gray-30">
-              {t(pageTranslations.apr)}
+              {t(pageTranslations.common.apr)}
             </span>
             <HelperButton
-              content={t(pageTranslations.aprInfo)}
+              content={t(pageTranslations.common.aprInfo)}
               className="text-gray-30"
             />
           </div>
@@ -38,7 +38,7 @@ export const BorrowAssetDetails: FC<BorrowAssetDetailsProps> = ({ pool }) => {
         <div className="grid grid-cols-2">
           <div className="flex items-center gap-1">
             <span className="text-xs font-medium text-gray-30">
-              {t(pageTranslations.available)}
+              {t(pageTranslations.borrowAssetsList.available)}
             </span>
           </div>
           <div className="text-right text-xs text-gray-30 font-medium">
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
index 2a9531451..fab3cd9c7 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
@@ -6,7 +6,7 @@ import { Accordion, Paragraph } from '@sovryn/ui';
 
 import { translations } from '../../../../../locales/i18n';
 
-const pageTranslations = translations.aavePage.borrowPositionsList;
+const pageTranslations = translations.aavePage;
 
 type BorrowPositionsListProps = {
   account?: string;
@@ -21,7 +21,7 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = ({
     <Accordion
       label={
         <span className="text-base font-medium">
-          {t(pageTranslations.title)}
+          {t(pageTranslations.borrowPositionsList.title)}
         </span>
       }
       className="bg-gray-70 px-4 py-3 rounded space-y-3 lg:bg-gray-90 lg:p-6 lg:border lg:border-gray-60"
@@ -34,7 +34,7 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = ({
       ) : (
         <div className="flex items-center justify-center lg:h-12">
           <Paragraph className="text-xs text-center text-gray-30 italic font-medium leading-5 lg:text-white">
-            {t(pageTranslations.connectWallet)}
+            {t(pageTranslations.common.connectWallet)}
           </Paragraph>
         </div>
       )}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
index 3fbeab6b3..f5c1c17bb 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
@@ -9,12 +9,14 @@ import { translations } from '../../../../../locales/i18n';
 import { LendPoolAssetDetails } from './LendAssetsList.types';
 import { LendAssetAction } from './components/LendAssetAction/LendAssetAction';
 
+const pageTranslations = translations.aavePage;
+
 export const COLUMNS_CONFIG = [
   {
     id: 'asset',
     title: (
       <span className="text-gray-30">
-        {t(translations.aavePage.lendAssetsList.asset)}
+        {t(pageTranslations.lendAssetsList.asset)}
       </span>
     ),
     cellRenderer: (pool: LendPoolAssetDetails) => (
@@ -32,7 +34,7 @@ export const COLUMNS_CONFIG = [
     id: 'walletBalance',
     title: (
       <span className="flex items-center gap-1 text-gray-30">
-        {t(translations.aavePage.lendAssetsList.walletBalance)}{' '}
+        {t(pageTranslations.lendAssetsList.walletBalance)}{' '}
       </span>
     ),
     sortable: true,
@@ -42,10 +44,8 @@ export const COLUMNS_CONFIG = [
     id: 'apy',
     title: (
       <span className="flex items-center gap-1 text-gray-30">
-        {t(translations.aavePage.lendAssetsList.apy)}{' '}
-        <HelperButton
-          content={t(translations.aavePage.lendAssetsList.apyInfo)}
-        />
+        {t(pageTranslations.lendAssetsList.apy)}{' '}
+        <HelperButton content={t(pageTranslations.common.apyInfo)} />
       </span>
     ),
     sortable: true,
@@ -55,7 +55,7 @@ export const COLUMNS_CONFIG = [
     id: 'canBeCollateral',
     title: (
       <span className="flex items-center gap-1 text-gray-30">
-        {t(translations.aavePage.lendAssetsList.walletBalance)}{' '}
+        {t(pageTranslations.lendAssetsList.walletBalance)}{' '}
       </span>
     ),
     sortable: true,
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
index 84eebc7c8..640f03df1 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
@@ -17,11 +17,11 @@ export const LendAssetAction: FC<LendAssetActionProps> = () => {
       {/* TODO: these should be modal triggers */}
       <Button
         className="flex-grow"
-        text={t(translations.aavePage.lendAssetsList.lend)}
+        text={t(translations.aavePage.common.lend)}
       />
       <Button
         className="flex-grow"
-        text={t(translations.aavePage.lendAssetsList.details)}
+        text={t(translations.aavePage.common.details)}
         style={ButtonStyle.secondary}
       />
     </div>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
index cc44c8f5d..5b0267196 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
@@ -34,10 +34,10 @@ export const LendAssetDetails: FC<LendAssetDetailsProps> = ({ pool }) => {
         <div className="grid grid-cols-2">
           <div className="flex items-center gap-1">
             <span className="text-xs font-medium text-gray-30">
-              {t(translations.aavePage.lendAssetsList.apy)}
+              {t(translations.aavePage.common.apy)}
             </span>
             <HelperButton
-              content={t(translations.aavePage.lendAssetsList.apyInfo)}
+              content={t(translations.aavePage.common.apyInfo)}
               className="text-gray-30"
             />
           </div>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
new file mode 100644
index 000000000..5ba81e563
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+
+import { t } from 'i18next';
+
+import { Align, HelperButton, Toggle } from '@sovryn/ui';
+
+import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
+import { translations } from '../../../../../locales/i18n';
+import { LendPosition } from './LendPositionsList.types';
+import { LendPositionAction } from './components/LendPositionAction/LendPositionAction';
+
+const pageTranslations = translations.aavePage;
+
+export const COLUMNS_CONFIG = [
+  {
+    id: 'asset',
+    title: (
+      <span className="text-gray-30">{t(pageTranslations.common.asset)}</span>
+    ),
+    cellRenderer: (pool: LendPosition) => (
+      <AssetRenderer
+        dataAttribute="borrow-asset"
+        showAssetLogo
+        asset={pool.asset}
+        className="lg:justify-start justify-end"
+      />
+    ),
+    align: Align.center,
+    sortable: true,
+  },
+  {
+    id: 'balance',
+    title: (
+      <span className="flex items-center gap-1 text-gray-30">
+        {t(pageTranslations.lendAssetsList.walletBalance)}{' '}
+      </span>
+    ),
+    sortable: true,
+    align: Align.center,
+  },
+  {
+    id: 'apy',
+    title: (
+      <span className="flex items-center gap-1 text-gray-30">
+        {t(translations.aavePage.common.apy)}{' '}
+        <HelperButton content={t(pageTranslations.common.apyInfo)} />
+      </span>
+    ),
+    sortable: true,
+    align: Align.center,
+  },
+  {
+    id: 'collateral',
+    title: (
+      <span className="flex items-center gap-1 text-gray-30">
+        {t(pageTranslations.common.collateral)}{' '}
+      </span>
+    ),
+    sortable: true,
+    align: Align.center,
+    cellRenderer: (pool: LendPosition) => (
+      <div className="flex justify-center">
+        {/* TODO: This should actually be a switch */}
+        <Toggle checked={pool.collateral} onChange={() => 'TODO:'} />
+      </div>
+    ),
+  },
+  {
+    id: 'actions',
+    align: Align.center,
+    title: ' ',
+    cellRenderer: (pool: LendPosition) => <LendPositionAction pool={pool} />,
+  },
+];
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
index 119a53afb..0327fcb43 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
@@ -2,24 +2,28 @@ import React, { FC, useState } from 'react';
 
 import { t } from 'i18next';
 
-import { Accordion, Paragraph } from '@sovryn/ui';
+import { Accordion, Paragraph, Table } from '@sovryn/ui';
 
+import { AavePoolRowTitle } from '../../../../2_molecules/AavePoolRowTitle/AavePoolRowTitle';
+import { useAccount } from '../../../../../hooks/useAccount';
 import { translations } from '../../../../../locales/i18n';
+import { COLUMNS_CONFIG } from './LendPositionsList.constants';
+import { LendPositionDetails } from './components/LendPositionDetails/LendPositionDetails';
+import { LendPositionStat } from './components/LendPositionStat/LendPositionStat';
 
-const pageTranslations = translations.aavePage.lendPositionsList;
+const pageTranslations = translations.aavePage;
 
-type LendPositionsListProps = {
-  account?: string;
-};
+type LendPositionsListProps = {};
 
-export const LendPositionsList: FC<LendPositionsListProps> = ({ account }) => {
+export const LendPositionsList: FC<LendPositionsListProps> = () => {
+  const { account } = useAccount();
   const [open, setOpen] = useState<boolean>(true);
 
   return (
     <Accordion
       label={
         <span className="text-base font-medium">
-          {t(pageTranslations.title)}
+          {t(pageTranslations.lendPositionsList.title)}
         </span>
       }
       className="bg-gray-70 px-4 py-3 rounded space-y-3 lg:bg-gray-90 lg:p-6 lg:border lg:border-gray-60"
@@ -28,11 +32,53 @@ export const LendPositionsList: FC<LendPositionsListProps> = ({ account }) => {
       onClick={setOpen}
     >
       {account ? (
-        <></>
+        <>
+          <div className="flex flex-col gap-2 mb-2 lg:flex-row lg:gap-6 lg:mb-6">
+            <LendPositionStat
+              label={t(pageTranslations.common.balance)}
+              value={123.45}
+              prefix="$"
+              precision={2}
+            />
+            <LendPositionStat
+              label={t(pageTranslations.common.apy)}
+              value={2.05}
+              suffix="%"
+              precision={2}
+            />
+            <LendPositionStat
+              label={t(pageTranslations.common.collateral)}
+              value={123.45}
+              prefix="$"
+              precision={2}
+            />
+          </div>
+          <Table
+            columns={COLUMNS_CONFIG}
+            rowClassName="bg-gray-80"
+            accordionClassName="bg-gray-60 border border-gray-70"
+            rowTitle={r => <AavePoolRowTitle asset={r.asset} />}
+            rows={[
+              {
+                asset: 'BTC',
+                apy: 2,
+                balance: 12.34,
+                collateral: true,
+              },
+              {
+                asset: 'ETH',
+                apy: 2,
+                balance: 12.34,
+                collateral: false,
+              },
+            ]}
+            mobileRenderer={p => <LendPositionDetails pool={p} />}
+          />
+        </>
       ) : (
         <div className="flex items-center justify-center lg:h-12">
           <Paragraph className="text-xs text-center text-gray-30 italic font-medium leading-5 lg:text-white">
-            {t(pageTranslations.connectWallet)}
+            {t(pageTranslations.common.connectWallet)}
           </Paragraph>
         </div>
       )}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.types.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.types.tsx
new file mode 100644
index 000000000..9a43a4bfb
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.types.tsx
@@ -0,0 +1,6 @@
+export type LendPosition = {
+  asset: string;
+  balance: number;
+  apy: number;
+  collateral: boolean;
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
new file mode 100644
index 000000000..03a95fb05
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
@@ -0,0 +1,25 @@
+import React, { FC } from 'react';
+
+import { t } from 'i18next';
+
+import { Button, ButtonStyle } from '@sovryn/ui';
+
+import { translations } from '../../../../../../../locales/i18n';
+import { LendPosition } from '../../LendPositionsList.types';
+
+type LendPositionActionProps = {
+  pool: LendPosition;
+};
+
+export const LendPositionAction: FC<LendPositionActionProps> = () => {
+  return (
+    <div className="flex items-center justify-center lg:justify-end space-x-2">
+      {/* TODO: these should be modal triggers */}
+      <Button
+        style={ButtonStyle.secondary}
+        className="flex-grow"
+        text={t(translations.aavePage.lendPositionsList.withdraw)}
+      />
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
new file mode 100644
index 000000000..7ba96fb60
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
@@ -0,0 +1,65 @@
+import React, { FC } from 'react';
+
+import { t } from 'i18next';
+
+import { HelperButton, Toggle } from '@sovryn/ui';
+
+import { translations } from '../../../../../../../locales/i18n';
+import { LendPosition } from '../../LendPositionsList.types';
+import { LendPositionAction } from '../LendPositionAction/LendPositionAction';
+
+type LendPositionDetailsProps = {
+  pool: LendPosition;
+};
+
+export const LendPositionDetails: FC<LendPositionDetailsProps> = ({ pool }) => {
+  return (
+    <div className="space-y-3">
+      <div className="space-y-2">
+        {/* Available */}
+        <div className="grid grid-cols-2">
+          <div className="flex items-center gap-1">
+            <span className="text-xs font-medium text-gray-30">
+              {t(translations.aavePage.common.balance)}
+            </span>
+          </div>
+
+          {/* TODO: review amount renderer component */}
+          <div className="text-right text-xs text-gray-30 font-medium">
+            {pool.balance} {pool.asset}
+          </div>
+        </div>
+
+        {/* APR */}
+        <div className="grid grid-cols-2">
+          <div className="flex items-center gap-1">
+            <span className="text-xs font-medium text-gray-30">
+              {t(translations.aavePage.lendAssetsList.apy)}
+            </span>
+            <HelperButton
+              content={t(translations.aavePage.common.apyInfo)}
+              className="text-gray-30"
+            />
+          </div>
+          <div className="text-right text-xs text-gray-30 font-medium">
+            {pool.apy}
+          </div>
+        </div>
+
+        {/* Can be collateral */}
+        <div className="grid grid-cols-2">
+          <div className="flex items-center gap-1">
+            <span className="text-xs font-medium text-gray-30">
+              {t(translations.aavePage.lendAssetsList.canBeCollateral)}
+            </span>
+          </div>
+          <div className="flex justify-end text-xs text-positive font-medium">
+            <Toggle checked={pool.collateral} onChange={() => 'TODO:'} />
+          </div>
+        </div>
+      </div>
+
+      <LendPositionAction pool={pool} />
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionStat/LendPositionStat.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionStat/LendPositionStat.tsx
new file mode 100644
index 000000000..eab9d1944
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionStat/LendPositionStat.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import {
+  AmountRenderer,
+  AmountRendererProps,
+} from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
+
+type LendPositionStatProps = AmountRendererProps & {
+  label: string;
+  labelInfo?: string;
+};
+
+export const LendPositionStat: React.FC<LendPositionStatProps> = ({
+  label,
+  className,
+  ...props
+}) => {
+  return (
+    <div
+      className={classNames(
+        'flex items-center justify-between lg:gap-2 lg:px-3 lg:py-2 lg:rounded-md lg:bg-gray-70',
+        className,
+      )}
+    >
+      <span className="text-xs text-gray-30 font-medium">{label}</span>
+      <AmountRenderer
+        {...props}
+        className="text-xs text-gray-30 font-medium lg:text-sm lg:text-white"
+      />
+    </div>
+  );
+};
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index da354cfe5..f0214ba2a 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -788,6 +788,19 @@
         "meta": {
             "title": "Lend and borrow"
         },
+        "common": {
+            "connectWallet": "Connect wallet to see the available data",
+            "asset": "Asset",
+            "collateral": "Collateral",
+            "balance": "Balance",
+            "apy": "APY",
+            "apyInfo": "TODO:",
+            "apr": "APR",
+            "aprInfo": "APR is estimated based on previous fees earned at the defined price range, if no trades were made previously or you have recently claimed fees/withdrawn liquidity, you may see 0 value",
+            "details": "Details",
+            "borrow": "Borrow",
+            "lend": "Lend"
+        },
         "topPanel": {
             "title": "Lend and borrow",
             "subtitle": "Borrow and earn interest by providing liquidity",
@@ -796,31 +809,23 @@
             "n/a": "N/A"
         },
         "borrowPositionsList": {
-            "title": "Your loans",
-            "connectWallet": "Connect wallet to see the available data"
+            "title": "Your loans"
         },
         "borrowAssetsList": {
             "title": "Assets to borrow",
-            "asset": "Asset",
-            "apr": "APR",
             "available": "Available",
-            "borrow": "Borrow",
-            "details": "Details",
-            "availableInfo": "TODO:",
-            "aprInfo": "APR is estimated based on previous fees earned at the defined price range, if no trades were made previously or you have recently claimed fees/withdrawn liquidity, you may see 0 value"
+            "availableInfo": "TODO:"
         },
         "lendPositionsList": {
             "title": "Your lending deposits",
-            "connectWallet": "Connect wallet to see the available data"
+            "usedAsCollateral": "Used as collateral",
+            "withdraw": "Withdraw"
         },
         "lendAssetsList": {
             "title": "Assets to lend",
             "asset": "Asset",
             "apy": "APY",
-            "apyInfo": "TODO:",
             "walletBalance": "Wallet balance",
-            "lend": "Lend",
-            "details": "Details",
             "canBeCollateral": "Can be collateral"
         },
         "assetCard": {}

From 6813ccc78e1dd266a3b21a465c2391ad98afbe08 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Thu, 8 Aug 2024 22:45:44 +0300
Subject: [PATCH 008/116] fixes and cleanup

---
 .../BorrowAssetsList.constants.tsx            |  2 +
 .../BorrowPositionsList.constants.tsx         | 77 +++++++++++++++++++
 .../BorrowPositionsList.tsx                   | 60 +++++++++++++--
 .../BorrowPositionsList.types.tsx             |  6 ++
 .../BorrowPositionAction.tsx                  | 25 ++++++
 .../BorrowPositionDetails.tsx                 | 67 ++++++++++++++++
 .../LendAssetsList.constants.tsx              |  2 +-
 .../LendPositionsList.constants.tsx           | 17 ++--
 .../LendPositionsList/LendPositionsList.tsx   |  9 ++-
 .../LendPositionStat/LendPositionStat.tsx     | 34 --------
 .../PoolPositionStat/PoolPositionStat.tsx     | 49 ++++++++++++
 .../AavePage/components/TopPanel/TopPanel.tsx | 10 +--
 .../frontend/src/locales/en/translations.json | 13 +++-
 .../OrderDirectionIcon.module.css             |  2 +-
 14 files changed, 309 insertions(+), 64 deletions(-)
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.types.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionAction/BorrowPositionAction.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
 delete mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionStat/LendPositionStat.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/PoolPositionStat/PoolPositionStat.tsx

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
index e50ce1b08..0ff3be836 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
@@ -40,6 +40,7 @@ export const COLUMNS_CONFIG = [
     ),
     sortable: true,
     align: Align.center,
+    className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
   },
   {
     id: 'apr',
@@ -51,6 +52,7 @@ export const COLUMNS_CONFIG = [
     ),
     sortable: true,
     align: Align.center,
+    className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
   },
   {
     id: 'actions',
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
new file mode 100644
index 000000000..56676e820
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+
+import { t } from 'i18next';
+
+import { Align, HelperButton } from '@sovryn/ui';
+
+import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
+import { translations } from '../../../../../locales/i18n';
+import { BorrowPosition } from './BorrowPositionsList.types';
+import { BorrowPositionAction } from './components/BorrowPositionAction/BorrowPositionAction';
+
+const pageTranslations = translations.aavePage;
+
+export const COLUMNS_CONFIG = [
+  {
+    id: 'asset',
+    title: (
+      <span className="text-gray-30">{t(pageTranslations.common.asset)}</span>
+    ),
+    cellRenderer: (pool: BorrowPosition) => (
+      <AssetRenderer
+        dataAttribute="borrow-asset"
+        showAssetLogo
+        asset={pool.asset}
+        className="lg:justify-start justify-end"
+      />
+    ),
+    align: Align.center,
+    sortable: true,
+  },
+  {
+    id: 'balance',
+    title: (
+      <span className="flex items-center pl-5 gap-1 text-gray-30">
+        {t(pageTranslations.common.balance)}{' '}
+      </span>
+    ),
+    sortable: true,
+    align: Align.center,
+    className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
+  },
+  {
+    id: 'apr',
+    title: (
+      <span className="flex items-center gap-1 text-gray-30">
+        {t(translations.aavePage.common.apr)}{' '}
+        <HelperButton content={t(pageTranslations.common.aprInfo)} />
+      </span>
+    ),
+    sortable: true,
+    align: Align.center,
+    className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
+  },
+  {
+    id: 'apyType',
+    title: (
+      <span className="flex items-center gap-1 text-gray-30">
+        {t(pageTranslations.common.apyType)}{' '}
+        <HelperButton content={t(pageTranslations.common.apyTypeInfo)} />
+      </span>
+    ),
+    sortable: true,
+    align: Align.center,
+    cellRenderer: (pos: BorrowPosition) => (
+      <span>{t(pageTranslations.common[pos.apyType])}</span>
+    ),
+    className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
+  },
+  {
+    id: 'actions',
+    align: Align.center,
+    title: ' ',
+    cellRenderer: (pool: BorrowPosition) => (
+      <BorrowPositionAction pool={pool} />
+    ),
+  },
+];
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
index fab3cd9c7..dee208209 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
@@ -2,19 +2,21 @@ import React, { FC, useState } from 'react';
 
 import { t } from 'i18next';
 
-import { Accordion, Paragraph } from '@sovryn/ui';
+import { Accordion, Paragraph, Table } from '@sovryn/ui';
 
+import { AavePoolRowTitle } from '../../../../2_molecules/AavePoolRowTitle/AavePoolRowTitle';
+import { useAccount } from '../../../../../hooks/useAccount';
 import { translations } from '../../../../../locales/i18n';
+import { PoolPositionStat } from '../PoolPositionStat/PoolPositionStat';
+import { COLUMNS_CONFIG } from './BorrowPositionsList.constants';
+import { BorrowPositionDetails } from './components/BorrowPositionDetails/BorrowPositionDetails';
 
 const pageTranslations = translations.aavePage;
 
-type BorrowPositionsListProps = {
-  account?: string;
-};
+type BorrowPositionsListProps = {};
 
-export const BorrowPositionsList: FC<BorrowPositionsListProps> = ({
-  account,
-}) => {
+export const BorrowPositionsList: FC<BorrowPositionsListProps> = () => {
+  const { account } = useAccount();
   const [open, setOpen] = useState<boolean>(true);
 
   return (
@@ -30,7 +32,49 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = ({
       onClick={setOpen}
     >
       {account ? (
-        <></>
+        <>
+          <div className="flex flex-col gap-2 mb-2 lg:flex-row lg:gap-6 lg:mb-6">
+            <PoolPositionStat
+              label={t(pageTranslations.common.balance)}
+              value={123.45}
+              prefix="$"
+              precision={2}
+            />
+            <PoolPositionStat
+              label={t(pageTranslations.common.apy)}
+              value={2.05}
+              suffix="%"
+              precision={2}
+            />
+            <PoolPositionStat
+              label={t(pageTranslations.borrowPositionsList.borrowPowerUsed)}
+              value={99}
+              suffix="%"
+              precision={2}
+            />
+          </div>
+          <Table
+            columns={COLUMNS_CONFIG}
+            rowClassName="bg-gray-80"
+            accordionClassName="bg-gray-60 border border-gray-70"
+            rowTitle={r => <AavePoolRowTitle asset={r.asset} />}
+            rows={[
+              {
+                asset: 'BTC',
+                apr: 2,
+                balance: 12.34,
+                apyType: 'variable',
+              },
+              {
+                asset: 'ETH',
+                apr: 2,
+                balance: 12.34,
+                apyType: 'fixed',
+              },
+            ]}
+            mobileRenderer={p => <BorrowPositionDetails pool={p} />}
+          />
+        </>
       ) : (
         <div className="flex items-center justify-center lg:h-12">
           <Paragraph className="text-xs text-center text-gray-30 italic font-medium leading-5 lg:text-white">
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.types.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.types.tsx
new file mode 100644
index 000000000..e56b6b1ea
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.types.tsx
@@ -0,0 +1,6 @@
+export type BorrowPosition = {
+  asset: string;
+  balance: number;
+  apr: number;
+  apyType: 'variable' | 'fixed';
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionAction/BorrowPositionAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionAction/BorrowPositionAction.tsx
new file mode 100644
index 000000000..0ac73034f
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionAction/BorrowPositionAction.tsx
@@ -0,0 +1,25 @@
+import React, { FC } from 'react';
+
+import { t } from 'i18next';
+
+import { Button, ButtonStyle } from '@sovryn/ui';
+
+import { translations } from '../../../../../../../locales/i18n';
+import { BorrowPosition } from '../../BorrowPositionsList.types';
+
+type BorrowPositionActionProps = {
+  pool: BorrowPosition;
+};
+
+export const BorrowPositionAction: FC<BorrowPositionActionProps> = () => {
+  return (
+    <div className="flex items-center justify-center lg:justify-end space-x-2">
+      {/* TODO: these should be modal triggers */}
+      <Button
+        style={ButtonStyle.secondary}
+        className="flex-grow"
+        text={t(translations.aavePage.borrowPositionsList.repay)}
+      />
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
new file mode 100644
index 000000000..602b01e29
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
@@ -0,0 +1,67 @@
+import React, { FC } from 'react';
+
+import { t } from 'i18next';
+
+import { HelperButton } from '@sovryn/ui';
+
+import { translations } from '../../../../../../../locales/i18n';
+import { BorrowPosition } from '../../BorrowPositionsList.types';
+import { BorrowPositionAction } from '../BorrowPositionAction/BorrowPositionAction';
+
+type BorrowPositionDetailsProps = {
+  pool: BorrowPosition;
+};
+
+export const BorrowPositionDetails: FC<BorrowPositionDetailsProps> = ({
+  pool,
+}) => {
+  return (
+    <div className="space-y-3">
+      <div className="space-y-2">
+        {/* Available */}
+        <div className="grid grid-cols-2">
+          <div className="flex items-center gap-1">
+            <span className="text-xs font-medium text-gray-30">
+              {t(translations.aavePage.common.balance)}
+            </span>
+          </div>
+
+          {/* TODO: review amount renderer component */}
+          <div className="text-right text-xs text-gray-30 font-medium">
+            {pool.balance} {pool.asset}
+          </div>
+        </div>
+
+        {/* APR */}
+        <div className="grid grid-cols-2">
+          <div className="flex items-center gap-1">
+            <span className="text-xs font-medium text-gray-30">
+              {t(translations.aavePage.common.apr)}
+            </span>
+            <HelperButton
+              content={t(translations.aavePage.common.aprInfo)}
+              className="text-gray-30"
+            />
+          </div>
+          <div className="text-right text-xs text-gray-30 font-medium">
+            {pool.apr}
+          </div>
+        </div>
+
+        {/* Apy type */}
+        <div className="grid grid-cols-2">
+          <div className="flex items-center gap-1">
+            <span className="text-xs font-medium text-gray-30">
+              {t(translations.aavePage.common.apyType)}
+            </span>
+          </div>
+          <div className="flex justify-end text-xs text-positive font-medium">
+            {pool.apyType}
+          </div>
+        </div>
+      </div>
+
+      <BorrowPositionAction pool={pool} />
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
index f5c1c17bb..8d5b4a514 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
@@ -55,7 +55,7 @@ export const COLUMNS_CONFIG = [
     id: 'canBeCollateral',
     title: (
       <span className="flex items-center gap-1 text-gray-30">
-        {t(pageTranslations.lendAssetsList.walletBalance)}{' '}
+        {t(pageTranslations.lendAssetsList.canBeCollateral)}{' '}
       </span>
     ),
     sortable: true,
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
index 5ba81e563..e2fc90185 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
@@ -31,12 +31,11 @@ export const COLUMNS_CONFIG = [
   {
     id: 'balance',
     title: (
-      <span className="flex items-center gap-1 text-gray-30">
-        {t(pageTranslations.lendAssetsList.walletBalance)}{' '}
-      </span>
+      <span className="text-gray-30">{t(pageTranslations.common.balance)}</span>
     ),
     sortable: true,
     align: Align.center,
+    className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
   },
   {
     id: 'apy',
@@ -48,6 +47,7 @@ export const COLUMNS_CONFIG = [
     ),
     sortable: true,
     align: Align.center,
+    className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
   },
   {
     id: 'collateral',
@@ -56,14 +56,15 @@ export const COLUMNS_CONFIG = [
         {t(pageTranslations.common.collateral)}{' '}
       </span>
     ),
-    sortable: true,
     align: Align.center,
     cellRenderer: (pool: LendPosition) => (
-      <div className="flex justify-center">
-        {/* TODO: This should actually be a switch */}
-        <Toggle checked={pool.collateral} onChange={() => 'TODO:'} />
-      </div>
+      <Toggle
+        className="[&_*]:ml-0"
+        checked={pool.collateral}
+        onChange={() => 'TODO:'}
+      />
     ),
+    className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
   },
   {
     id: 'actions',
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
index 0327fcb43..c133f6bc9 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
@@ -7,9 +7,9 @@ import { Accordion, Paragraph, Table } from '@sovryn/ui';
 import { AavePoolRowTitle } from '../../../../2_molecules/AavePoolRowTitle/AavePoolRowTitle';
 import { useAccount } from '../../../../../hooks/useAccount';
 import { translations } from '../../../../../locales/i18n';
+import { PoolPositionStat } from '../PoolPositionStat/PoolPositionStat';
 import { COLUMNS_CONFIG } from './LendPositionsList.constants';
 import { LendPositionDetails } from './components/LendPositionDetails/LendPositionDetails';
-import { LendPositionStat } from './components/LendPositionStat/LendPositionStat';
 
 const pageTranslations = translations.aavePage;
 
@@ -34,19 +34,20 @@ export const LendPositionsList: FC<LendPositionsListProps> = () => {
       {account ? (
         <>
           <div className="flex flex-col gap-2 mb-2 lg:flex-row lg:gap-6 lg:mb-6">
-            <LendPositionStat
+            <PoolPositionStat
               label={t(pageTranslations.common.balance)}
               value={123.45}
               prefix="$"
               precision={2}
             />
-            <LendPositionStat
+            <PoolPositionStat
               label={t(pageTranslations.common.apy)}
+              labelInfo={t(pageTranslations.common.apyInfo)}
               value={2.05}
               suffix="%"
               precision={2}
             />
-            <LendPositionStat
+            <PoolPositionStat
               label={t(pageTranslations.common.collateral)}
               value={123.45}
               prefix="$"
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionStat/LendPositionStat.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionStat/LendPositionStat.tsx
deleted file mode 100644
index eab9d1944..000000000
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionStat/LendPositionStat.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-
-import {
-  AmountRenderer,
-  AmountRendererProps,
-} from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
-
-type LendPositionStatProps = AmountRendererProps & {
-  label: string;
-  labelInfo?: string;
-};
-
-export const LendPositionStat: React.FC<LendPositionStatProps> = ({
-  label,
-  className,
-  ...props
-}) => {
-  return (
-    <div
-      className={classNames(
-        'flex items-center justify-between lg:gap-2 lg:px-3 lg:py-2 lg:rounded-md lg:bg-gray-70',
-        className,
-      )}
-    >
-      <span className="text-xs text-gray-30 font-medium">{label}</span>
-      <AmountRenderer
-        {...props}
-        className="text-xs text-gray-30 font-medium lg:text-sm lg:text-white"
-      />
-    </div>
-  );
-};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/PoolPositionStat/PoolPositionStat.tsx b/apps/frontend/src/app/5_pages/AavePage/components/PoolPositionStat/PoolPositionStat.tsx
new file mode 100644
index 000000000..3bd14700a
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/PoolPositionStat/PoolPositionStat.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import { HelperButton } from '@sovryn/ui';
+
+import {
+  AmountRenderer,
+  AmountRendererProps,
+} from '../../../../2_molecules/AmountRenderer/AmountRenderer';
+
+type PoolPositionStatProps = AmountRendererProps & {
+  label: string;
+  labelInfo?: string;
+};
+
+export const PoolPositionStat: React.FC<PoolPositionStatProps> = ({
+  label,
+  labelInfo,
+  className,
+  ...props
+}) => {
+  return (
+    <div
+      className={classNames(
+        'flex items-center justify-between lg:gap-2 lg:px-3 lg:py-2 lg:rounded-md lg:bg-gray-70 text-gray-30',
+        className,
+      )}
+    >
+      <span className="text-xs  font-medium flex">
+        {label}{' '}
+        {labelInfo && (
+          <HelperButton className="ml-1 lg:hidden" content={labelInfo} />
+        )}
+      </span>
+
+      <div className="flex gap-[6px] items-center">
+        <AmountRenderer
+          {...props}
+          className="text-xs  font-medium lg:text-sm lg:text-white"
+        />
+
+        {labelInfo && (
+          <HelperButton className="ml-1 hidden lg:block" content={labelInfo} />
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx b/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
index 7d4009968..6bfabe1fa 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
@@ -38,21 +38,19 @@ export const TopPanel: FC<TopPanelProps> = ({ account }) => {
             label={t(pageTranslations.netWorth)}
             prefix="$"
             value="1,234,567.58"
-            // TODO: update content and translations
-            helperContent="Net APY is the combined effect of all supply and borrow positions on net worth, including incentives. It is possible to have a negative net APY if debt APY is higher than supply APY."
           />
           <div className="flex gap-9">
             <WalletStatCard
-              label={t(pageTranslations.netWorth)}
+              label={t(pageTranslations.netApy)}
               value="200"
               suffix="%"
-              helperContent="Net APY is the combined effect of all supply and borrow positions on net worth, including incentives. It is possible to have a negative net APY if debt APY is higher than supply APY."
+              helperContent={t(pageTranslations.netApyInfo)}
             />
             <WalletStatCard
-              label={t(pageTranslations.netWorth)}
+              label={t(pageTranslations.collateralRatio)}
               value="11.69"
               suffix="%"
-              helperContent="Net APY is the combined effect of all supply and borrow positions on net worth, including incentives. It is possible to have a negative net APY if debt APY is higher than supply APY."
+              helperContent={t(pageTranslations.collateralRatioInfo)}
             />
           </div>
         </div>
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index f0214ba2a..6f223ffd7 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -795,21 +795,30 @@
             "balance": "Balance",
             "apy": "APY",
             "apyInfo": "TODO:",
+            "apyType": "APY type",
+            "apyTypeInfo": "APY type info",
             "apr": "APR",
             "aprInfo": "APR is estimated based on previous fees earned at the defined price range, if no trades were made previously or you have recently claimed fees/withdrawn liquidity, you may see 0 value",
             "details": "Details",
             "borrow": "Borrow",
-            "lend": "Lend"
+            "lend": "Lend",
+            "variable": "Variable",
+            "fixed": "Fixed"
         },
         "topPanel": {
             "title": "Lend and borrow",
             "subtitle": "Borrow and earn interest by providing liquidity",
             "netWorth": "Net worth",
             "netApy": "Net API",
+            "netApyInfo": "Net apy info",
+            "collateralRatio": "Collateral ratio",
+            "collateralRatioInfo": "Collateral ratio info",
             "n/a": "N/A"
         },
         "borrowPositionsList": {
-            "title": "Your loans"
+            "title": "Your loans",
+            "repay": "Repay",
+            "borrowPowerUsed": "Borrow power used"
         },
         "borrowAssetsList": {
             "title": "Assets to borrow",
diff --git a/packages/ui/src/2_molecules/Table/components/TableDesktop/components/OrderDirectionIcon/OrderDirectionIcon.module.css b/packages/ui/src/2_molecules/Table/components/TableDesktop/components/OrderDirectionIcon/OrderDirectionIcon.module.css
index 2bb7ef031..c0f1d668c 100644
--- a/packages/ui/src/2_molecules/Table/components/TableDesktop/components/OrderDirectionIcon/OrderDirectionIcon.module.css
+++ b/packages/ui/src/2_molecules/Table/components/TableDesktop/components/OrderDirectionIcon/OrderDirectionIcon.module.css
@@ -1,5 +1,5 @@
 .icon {
-  @apply ml-2 opacity-0 hover:opacity-100 transition-opacity;
+  @apply ml-2 opacity-30 hover:opacity-100 transition-opacity;
 
   &.active {
     @apply opacity-100;

From ba9030866f257b9dfd8920b5a4973467bf65d38a Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Thu, 8 Aug 2024 23:09:53 +0300
Subject: [PATCH 009/116] cleanup

---
 .../src/app/5_pages/AavePage/AaavePage.tsx    | 10 +++--
 .../BorrowAssetsList.constants.tsx            | 36 ++++++++---------
 .../BorrowAssetsList/BorrowAssetsList.tsx     |  1 +
 .../BorrowAssetsList.types.tsx                |  2 +-
 .../BorrowAssetAction/BorrowAssetAction.tsx   |  4 +-
 .../BorrowAssetDetails/BorrowAssetDetails.tsx |  8 +++-
 .../BorrowPositionsList.constants.tsx         | 35 +++++++++--------
 .../BorrowPositionsList.tsx                   |  4 +-
 .../BorrowPositionAction.tsx                  |  2 +-
 .../BorrowPositionDetails.tsx                 | 12 +++---
 .../LendAssetsList.constants.tsx              | 38 ++++++++----------
 .../LendAssetsList/LendAssetsList.tsx         | 12 ++++--
 .../LendAssetsList/LendAssetsList.types.tsx   |  2 +-
 .../LendAssetAction/LendAssetAction.tsx       |  4 +-
 .../LendAssetDetails/LendAssetDetails.tsx     |  7 +++-
 .../LendPositionsList.constants.tsx           | 39 +++++++++----------
 .../LendPositionsList/LendPositionsList.tsx   |  4 +-
 .../LendPositionAction/LendPositionAction.tsx |  2 +-
 .../LendPositionDetails.tsx                   | 22 ++++++-----
 .../ToggleCollateralAction.tsx                | 21 ++++++++++
 .../frontend/src/locales/en/translations.json |  3 +-
 21 files changed, 154 insertions(+), 114 deletions(-)
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx

diff --git a/apps/frontend/src/app/5_pages/AavePage/AaavePage.tsx b/apps/frontend/src/app/5_pages/AavePage/AaavePage.tsx
index bcc087065..783d0eda0 100644
--- a/apps/frontend/src/app/5_pages/AavePage/AaavePage.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/AaavePage.tsx
@@ -14,6 +14,8 @@ import { LendAssetsList } from './components/LendAssetsList/LendAssetsList';
 import { LendPositionsList } from './components/LendPositionsList/LendPositionsList';
 import { TopPanel } from './components/TopPanel/TopPanel';
 
+const pageTranslations = translations.aavePage;
+
 enum LiquidityTabs {
   LEND = 0,
   BORROW,
@@ -26,9 +28,9 @@ const AavePage: FC = () => {
   );
 
   return (
-    <div className="w-full pb-6">
+    <div className="w-full pb-6 2xl:px-12">
       <Helmet>
-        <title>{t(translations.aavePage.meta.title)}</title>
+        <title>{t(pageTranslations.meta.title)}</title>
       </Helmet>
 
       <TopPanel account={account} />
@@ -42,12 +44,12 @@ const AavePage: FC = () => {
             {
               activeClassName: 'text-primary-20',
               dataAttribute: 'lending',
-              label: 'Lend', // TODO: translations
+              label: t(pageTranslations.common.lend),
             },
             {
               activeClassName: 'text-primary-20',
               dataAttribute: 'borrowing',
-              label: 'Borrow', // TODO: translations
+              label: t(pageTranslations.common.borrow),
             },
           ]}
           onChange={e => setActiveLiquidityTab(e)}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
index 0ff3be836..eeebdb859 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
@@ -6,18 +6,20 @@ import { Align, HelperButton } from '@sovryn/ui';
 
 import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
 import { translations } from '../../../../../locales/i18n';
-import { BorrowPoolAssetDetails } from './BorrowAssetsList.types';
+import { BorrowPoolDetails } from './BorrowAssetsList.types';
 import { BorrowAssetAction } from './components/BorrowAssetAction/BorrowAssetAction';
 
+const pageTranslations = translations.aavePage;
+
 export const COLUMNS_CONFIG = [
   {
     id: 'asset',
+    sortable: true,
+    align: Align.center,
     title: (
-      <span className="text-gray-30">
-        {t(translations.aavePage.common.asset)}
-      </span>
+      <span className="text-gray-30">{t(pageTranslations.common.asset)}</span>
     ),
-    cellRenderer: (pool: BorrowPoolAssetDetails) => (
+    cellRenderer: (pool: BorrowPoolDetails) => (
       <AssetRenderer
         dataAttribute="borrow-asset"
         showAssetLogo
@@ -25,40 +27,38 @@ export const COLUMNS_CONFIG = [
         className="lg:justify-start justify-end"
       />
     ),
-    align: Align.center,
-    sortable: true,
   },
   {
     id: 'available',
+    sortable: true,
+    align: Align.center,
+    className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
     title: (
       <span className="flex items-center gap-1 text-gray-30">
-        {t(translations.aavePage.borrowAssetsList.available)}{' '}
+        {t(pageTranslations.borrowAssetsList.available)}{' '}
         <HelperButton
-          content={t(translations.aavePage.borrowAssetsList.availableInfo)}
+          content={t(pageTranslations.borrowAssetsList.availableInfo)}
         />
       </span>
     ),
-    sortable: true,
-    align: Align.center,
-    className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
   },
   {
     id: 'apr',
+    sortable: true,
+    align: Align.center,
+    className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
     title: (
       <span className="flex items-center gap-1 text-gray-30">
-        {t(translations.aavePage.common.apr)}{' '}
-        <HelperButton content={t(translations.aavePage.common.aprInfo)} />
+        {t(pageTranslations.common.apr)}{' '}
+        <HelperButton content={t(pageTranslations.common.aprInfo)} />
       </span>
     ),
-    sortable: true,
-    align: Align.center,
-    className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
   },
   {
     id: 'actions',
     align: Align.center,
     title: ' ',
-    cellRenderer: (pool: BorrowPoolAssetDetails) => (
+    cellRenderer: (pool: BorrowPoolDetails) => (
       <BorrowAssetAction pool={pool} />
     ),
   },
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
index a88b3bfa0..410be8736 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
@@ -37,6 +37,7 @@ export const BorrowAssetsList: FC<BorrowAssetsListProps> = ({ account }) => {
           accordionClassName="bg-gray-60 border border-gray-70"
           rowTitle={r => <AavePoolRowTitle asset={r.asset} />}
           rows={[
+            // TODO: just a mock for now
             {
               asset: 'BTC',
               apr: 2,
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.types.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.types.tsx
index 423a5519e..ee3e1b4d3 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.types.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.types.tsx
@@ -1,4 +1,4 @@
-export type BorrowPoolAssetDetails = {
+export type BorrowPoolDetails = {
   asset: string;
   apr: number;
   available: number;
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
index 6ce196f3f..d3258355c 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
@@ -5,12 +5,12 @@ import { t } from 'i18next';
 import { Button, ButtonStyle } from '@sovryn/ui';
 
 import { translations } from '../../../../../../../locales/i18n';
-import { BorrowPoolAssetDetails } from '../../BorrowAssetsList.types';
+import { BorrowPoolDetails } from '../../BorrowAssetsList.types';
 
 const pageTranslations = translations.aavePage;
 
 type BorrowAssetActionProps = {
-  pool: BorrowPoolAssetDetails;
+  pool: BorrowPoolDetails;
 };
 
 export const BorrowAssetAction: FC<BorrowAssetActionProps> = () => {
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
index 3ebb8311d..658fedebe 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
@@ -5,13 +5,13 @@ import { t } from 'i18next';
 import { HelperButton } from '@sovryn/ui';
 
 import { translations } from '../../../../../../../locales/i18n';
-import { BorrowPoolAssetDetails } from '../../BorrowAssetsList.types';
+import { BorrowPoolDetails } from '../../BorrowAssetsList.types';
 import { BorrowAssetAction } from '../BorrowAssetAction/BorrowAssetAction';
 
 const pageTranslations = translations.aavePage;
 
 type BorrowAssetDetailsProps = {
-  pool: BorrowPoolAssetDetails;
+  pool: BorrowPoolDetails;
 };
 
 export const BorrowAssetDetails: FC<BorrowAssetDetailsProps> = ({ pool }) => {
@@ -29,6 +29,8 @@ export const BorrowAssetDetails: FC<BorrowAssetDetailsProps> = ({ pool }) => {
               className="text-gray-30"
             />
           </div>
+
+          {/* TODO: amount renderer */}
           <div className="text-right text-xs text-gray-30 font-medium">
             {pool.apr}
           </div>
@@ -41,6 +43,8 @@ export const BorrowAssetDetails: FC<BorrowAssetDetailsProps> = ({ pool }) => {
               {t(pageTranslations.borrowAssetsList.available)}
             </span>
           </div>
+
+          {/* TODO: amount renderer */}
           <div className="text-right text-xs text-gray-30 font-medium">
             {pool.available} {pool.asset}
           </div>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
index 56676e820..d606e5c6a 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
@@ -14,64 +14,65 @@ const pageTranslations = translations.aavePage;
 export const COLUMNS_CONFIG = [
   {
     id: 'asset',
+    sortable: true,
+    align: Align.center,
     title: (
       <span className="text-gray-30">{t(pageTranslations.common.asset)}</span>
     ),
-    cellRenderer: (pool: BorrowPosition) => (
+    cellRenderer: (position: BorrowPosition) => (
       <AssetRenderer
         dataAttribute="borrow-asset"
         showAssetLogo
-        asset={pool.asset}
+        asset={position.asset}
         className="lg:justify-start justify-end"
       />
     ),
-    align: Align.center,
-    sortable: true,
   },
   {
     id: 'balance',
+    sortable: true,
+    align: Align.center,
+    className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
     title: (
       <span className="flex items-center pl-5 gap-1 text-gray-30">
         {t(pageTranslations.common.balance)}{' '}
       </span>
     ),
-    sortable: true,
-    align: Align.center,
-    className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
   },
   {
     id: 'apr',
+    sortable: true,
+    align: Align.center,
+    className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
     title: (
       <span className="flex items-center gap-1 text-gray-30">
         {t(translations.aavePage.common.apr)}{' '}
         <HelperButton content={t(pageTranslations.common.aprInfo)} />
       </span>
     ),
-    sortable: true,
-    align: Align.center,
-    className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
   },
   {
     id: 'apyType',
+    sortable: true,
+    align: Align.center,
+    className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
     title: (
       <span className="flex items-center gap-1 text-gray-30">
         {t(pageTranslations.common.apyType)}{' '}
         <HelperButton content={t(pageTranslations.common.apyTypeInfo)} />
       </span>
     ),
-    sortable: true,
-    align: Align.center,
-    cellRenderer: (pos: BorrowPosition) => (
-      <span>{t(pageTranslations.common[pos.apyType])}</span>
+
+    cellRenderer: (position: BorrowPosition) => (
+      <span>{t(pageTranslations.common[position.apyType])}</span>
     ),
-    className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
   },
   {
     id: 'actions',
     align: Align.center,
     title: ' ',
-    cellRenderer: (pool: BorrowPosition) => (
-      <BorrowPositionAction pool={pool} />
+    cellRenderer: (position: BorrowPosition) => (
+      <BorrowPositionAction position={position} />
     ),
   },
 ];
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
index dee208209..afe3cab07 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
@@ -34,6 +34,7 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = () => {
       {account ? (
         <>
           <div className="flex flex-col gap-2 mb-2 lg:flex-row lg:gap-6 lg:mb-6">
+            {/* TODO: mocked values */}
             <PoolPositionStat
               label={t(pageTranslations.common.balance)}
               value={123.45}
@@ -59,6 +60,7 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = () => {
             accordionClassName="bg-gray-60 border border-gray-70"
             rowTitle={r => <AavePoolRowTitle asset={r.asset} />}
             rows={[
+              // TODO: mocked values
               {
                 asset: 'BTC',
                 apr: 2,
@@ -72,7 +74,7 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = () => {
                 apyType: 'fixed',
               },
             ]}
-            mobileRenderer={p => <BorrowPositionDetails pool={p} />}
+            mobileRenderer={p => <BorrowPositionDetails position={p} />}
           />
         </>
       ) : (
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionAction/BorrowPositionAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionAction/BorrowPositionAction.tsx
index 0ac73034f..ff177e904 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionAction/BorrowPositionAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionAction/BorrowPositionAction.tsx
@@ -8,7 +8,7 @@ import { translations } from '../../../../../../../locales/i18n';
 import { BorrowPosition } from '../../BorrowPositionsList.types';
 
 type BorrowPositionActionProps = {
-  pool: BorrowPosition;
+  position: BorrowPosition;
 };
 
 export const BorrowPositionAction: FC<BorrowPositionActionProps> = () => {
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
index 602b01e29..3a6612cf6 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
@@ -9,11 +9,11 @@ import { BorrowPosition } from '../../BorrowPositionsList.types';
 import { BorrowPositionAction } from '../BorrowPositionAction/BorrowPositionAction';
 
 type BorrowPositionDetailsProps = {
-  pool: BorrowPosition;
+  position: BorrowPosition;
 };
 
 export const BorrowPositionDetails: FC<BorrowPositionDetailsProps> = ({
-  pool,
+  position,
 }) => {
   return (
     <div className="space-y-3">
@@ -28,7 +28,7 @@ export const BorrowPositionDetails: FC<BorrowPositionDetailsProps> = ({
 
           {/* TODO: review amount renderer component */}
           <div className="text-right text-xs text-gray-30 font-medium">
-            {pool.balance} {pool.asset}
+            {position.balance} {position.asset}
           </div>
         </div>
 
@@ -44,7 +44,7 @@ export const BorrowPositionDetails: FC<BorrowPositionDetailsProps> = ({
             />
           </div>
           <div className="text-right text-xs text-gray-30 font-medium">
-            {pool.apr}
+            {position.apr}
           </div>
         </div>
 
@@ -56,12 +56,12 @@ export const BorrowPositionDetails: FC<BorrowPositionDetailsProps> = ({
             </span>
           </div>
           <div className="flex justify-end text-xs text-positive font-medium">
-            {pool.apyType}
+            {position.apyType}
           </div>
         </div>
       </div>
 
-      <BorrowPositionAction pool={pool} />
+      <BorrowPositionAction position={position} />
     </div>
   );
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
index 8d5b4a514..8b2cff090 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
@@ -6,7 +6,7 @@ import { Align, HelperButton, Icon } from '@sovryn/ui';
 
 import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
 import { translations } from '../../../../../locales/i18n';
-import { LendPoolAssetDetails } from './LendAssetsList.types';
+import { LendPoolDetails } from './LendAssetsList.types';
 import { LendAssetAction } from './components/LendAssetAction/LendAssetAction';
 
 const pageTranslations = translations.aavePage;
@@ -14,12 +14,12 @@ const pageTranslations = translations.aavePage;
 export const COLUMNS_CONFIG = [
   {
     id: 'asset',
+    sortable: true,
+    align: Align.center,
     title: (
-      <span className="text-gray-30">
-        {t(pageTranslations.lendAssetsList.asset)}
-      </span>
+      <span className="text-gray-30">{t(pageTranslations.common.asset)}</span>
     ),
-    cellRenderer: (pool: LendPoolAssetDetails) => (
+    cellRenderer: (pool: LendPoolDetails) => (
       <AssetRenderer
         dataAttribute="borrow-asset"
         showAssetLogo
@@ -27,40 +27,38 @@ export const COLUMNS_CONFIG = [
         className="lg:justify-start justify-end"
       />
     ),
-    align: Align.center,
-    sortable: true,
   },
   {
     id: 'walletBalance',
+    sortable: true,
+    align: Align.center,
     title: (
-      <span className="flex items-center gap-1 text-gray-30">
+      <span className="text-gray-30">
         {t(pageTranslations.lendAssetsList.walletBalance)}{' '}
       </span>
     ),
-    sortable: true,
-    align: Align.center,
   },
   {
     id: 'apy',
+    sortable: true,
+    align: Align.center,
     title: (
       <span className="flex items-center gap-1 text-gray-30">
-        {t(pageTranslations.lendAssetsList.apy)}{' '}
+        {t(pageTranslations.common.apy)}{' '}
         <HelperButton content={t(pageTranslations.common.apyInfo)} />
       </span>
     ),
-    sortable: true,
-    align: Align.center,
   },
   {
     id: 'canBeCollateral',
+    sortable: true,
+    align: Align.center,
     title: (
-      <span className="flex items-center gap-1 text-gray-30">
-        {t(pageTranslations.lendAssetsList.canBeCollateral)}{' '}
+      <span className="text-gray-30">
+        {t(pageTranslations.lendAssetsList.canBeCollateral)}
       </span>
     ),
-    sortable: true,
-    align: Align.center,
-    cellRenderer: (pool: LendPoolAssetDetails) => (
+    cellRenderer: (pool: LendPoolDetails) => (
       <div className="flex justify-center">
         {pool.canBeCollateral && (
           <Icon icon="check" className="w-[10px] text-positive" />
@@ -72,8 +70,6 @@ export const COLUMNS_CONFIG = [
     id: 'actions',
     align: Align.center,
     title: ' ',
-    cellRenderer: (pool: LendPoolAssetDetails) => (
-      <LendAssetAction pool={pool} />
-    ),
+    cellRenderer: (pool: LendPoolDetails) => <LendAssetAction pool={pool} />,
   },
 ];
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
index 1eee75dce..52d29ad0e 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
@@ -9,7 +9,7 @@ import { translations } from '../../../../../locales/i18n';
 import { COLUMNS_CONFIG } from './LendAssetsList.constants';
 import { LendAssetDetails } from './components/LendAssetDetails/LendAssetDetails';
 
-const pageTranslations = translations.aavePage.lendAssetsList;
+const pageTranslations = translations.aavePage;
 
 type LendAssetsListProps = {
   account?: string;
@@ -17,12 +17,13 @@ type LendAssetsListProps = {
 
 export const LendAssetsList: FC<LendAssetsListProps> = ({ account }) => {
   const [open, setOpen] = useState<boolean>(true);
+  const [showZeroBalances, setShowZeroBalances] = useState<boolean>(true);
 
   return (
     <Accordion
       label={
         <span className="text-base font-medium">
-          {t(pageTranslations.title)}
+          {t(pageTranslations.lendAssetsList.title)}
         </span>
       }
       className="bg-gray-70 px-4 py-3 rounded space-y-3 lg:bg-gray-90 lg:p-6"
@@ -31,7 +32,11 @@ export const LendAssetsList: FC<LendAssetsListProps> = ({ account }) => {
       onClick={setOpen}
     >
       <div className="py-2 mb-2">
-        <Checkbox label="Show assets with 0 balance" />
+        <Checkbox
+          label={t(pageTranslations.lendAssetsList.showZeroBalances)}
+          checked={showZeroBalances}
+          onChange={s => setShowZeroBalances(s)}
+        />
       </div>
 
       <Table
@@ -40,6 +45,7 @@ export const LendAssetsList: FC<LendAssetsListProps> = ({ account }) => {
         accordionClassName="bg-gray-60 border border-gray-70"
         rowTitle={r => <AavePoolRowTitle asset={r.asset} />}
         rows={[
+          // TODO: mocked values
           {
             asset: 'BTC',
             apy: 2,
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.types.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.types.tsx
index d6ddd4fef..ecd5a1814 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.types.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.types.tsx
@@ -1,4 +1,4 @@
-export type LendPoolAssetDetails = {
+export type LendPoolDetails = {
   asset: string;
   walletBalance: number;
   apy: number;
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
index 640f03df1..65282959c 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
@@ -5,10 +5,10 @@ import { t } from 'i18next';
 import { Button, ButtonStyle } from '@sovryn/ui';
 
 import { translations } from '../../../../../../../locales/i18n';
-import { LendPoolAssetDetails } from '../../LendAssetsList.types';
+import { LendPoolDetails } from '../../LendAssetsList.types';
 
 type LendAssetActionProps = {
-  pool: LendPoolAssetDetails;
+  pool: LendPoolDetails;
 };
 
 export const LendAssetAction: FC<LendAssetActionProps> = () => {
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
index 5b0267196..186f10549 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
@@ -5,11 +5,11 @@ import { t } from 'i18next';
 import { HelperButton, Icon } from '@sovryn/ui';
 
 import { translations } from '../../../../../../../locales/i18n';
-import { LendPoolAssetDetails } from '../../LendAssetsList.types';
+import { LendPoolDetails } from '../../LendAssetsList.types';
 import { LendAssetAction } from '../LendAssetAction/LendAssetAction';
 
 type LendAssetDetailsProps = {
-  pool: LendPoolAssetDetails;
+  pool: LendPoolDetails;
 };
 
 export const LendAssetDetails: FC<LendAssetDetailsProps> = ({ pool }) => {
@@ -41,6 +41,8 @@ export const LendAssetDetails: FC<LendAssetDetailsProps> = ({ pool }) => {
               className="text-gray-30"
             />
           </div>
+
+          {/* TODO: review amount renderer component */}
           <div className="text-right text-xs text-gray-30 font-medium">
             {pool.apy}
           </div>
@@ -53,6 +55,7 @@ export const LendAssetDetails: FC<LendAssetDetailsProps> = ({ pool }) => {
               {t(translations.aavePage.lendAssetsList.canBeCollateral)}
             </span>
           </div>
+
           <div className="flex justify-end text-xs text-positive font-medium">
             {pool.canBeCollateral ? (
               <Icon icon="check" className="w-[10px]" />
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
index e2fc90185..f3407fd87 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
@@ -2,74 +2,73 @@ import React from 'react';
 
 import { t } from 'i18next';
 
-import { Align, HelperButton, Toggle } from '@sovryn/ui';
+import { Align, HelperButton } from '@sovryn/ui';
 
 import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
 import { translations } from '../../../../../locales/i18n';
 import { LendPosition } from './LendPositionsList.types';
 import { LendPositionAction } from './components/LendPositionAction/LendPositionAction';
+import { ToggleCollateralAction } from './components/ToggleCollateralAction/ToggleCollateralAction';
 
 const pageTranslations = translations.aavePage;
 
 export const COLUMNS_CONFIG = [
   {
     id: 'asset',
+    sortable: true,
+    align: Align.center,
     title: (
       <span className="text-gray-30">{t(pageTranslations.common.asset)}</span>
     ),
-    cellRenderer: (pool: LendPosition) => (
+    cellRenderer: (position: LendPosition) => (
       <AssetRenderer
         dataAttribute="borrow-asset"
         showAssetLogo
-        asset={pool.asset}
+        asset={position.asset}
         className="lg:justify-start justify-end"
       />
     ),
-    align: Align.center,
-    sortable: true,
   },
   {
     id: 'balance',
-    title: (
-      <span className="text-gray-30">{t(pageTranslations.common.balance)}</span>
-    ),
     sortable: true,
     align: Align.center,
     className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
+    title: (
+      <span className="text-gray-30">{t(pageTranslations.common.balance)}</span>
+    ),
   },
   {
     id: 'apy',
+    sortable: true,
+    align: Align.center,
+    className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
     title: (
       <span className="flex items-center gap-1 text-gray-30">
         {t(translations.aavePage.common.apy)}{' '}
         <HelperButton content={t(pageTranslations.common.apyInfo)} />
       </span>
     ),
-    sortable: true,
-    align: Align.center,
-    className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
   },
   {
     id: 'collateral',
+    align: Align.center,
+    className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
     title: (
       <span className="flex items-center gap-1 text-gray-30">
         {t(pageTranslations.common.collateral)}{' '}
       </span>
     ),
-    align: Align.center,
-    cellRenderer: (pool: LendPosition) => (
-      <Toggle
-        className="[&_*]:ml-0"
-        checked={pool.collateral}
-        onChange={() => 'TODO:'}
-      />
+    cellRenderer: (position: LendPosition) => (
+      <ToggleCollateralAction position={position} />
     ),
-    className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
   },
   {
     id: 'actions',
     align: Align.center,
     title: ' ',
-    cellRenderer: (pool: LendPosition) => <LendPositionAction pool={pool} />,
+    cellRenderer: (position: LendPosition) => (
+      <LendPositionAction position={position} />
+    ),
   },
 ];
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
index c133f6bc9..1075cc69e 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
@@ -34,6 +34,7 @@ export const LendPositionsList: FC<LendPositionsListProps> = () => {
       {account ? (
         <>
           <div className="flex flex-col gap-2 mb-2 lg:flex-row lg:gap-6 lg:mb-6">
+            {/* TODO: mock data */}
             <PoolPositionStat
               label={t(pageTranslations.common.balance)}
               value={123.45}
@@ -60,6 +61,7 @@ export const LendPositionsList: FC<LendPositionsListProps> = () => {
             accordionClassName="bg-gray-60 border border-gray-70"
             rowTitle={r => <AavePoolRowTitle asset={r.asset} />}
             rows={[
+              // TODO: mocked data
               {
                 asset: 'BTC',
                 apy: 2,
@@ -73,7 +75,7 @@ export const LendPositionsList: FC<LendPositionsListProps> = () => {
                 collateral: false,
               },
             ]}
-            mobileRenderer={p => <LendPositionDetails pool={p} />}
+            mobileRenderer={p => <LendPositionDetails position={p} />}
           />
         </>
       ) : (
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
index 03a95fb05..bbba9103e 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
@@ -8,7 +8,7 @@ import { translations } from '../../../../../../../locales/i18n';
 import { LendPosition } from '../../LendPositionsList.types';
 
 type LendPositionActionProps = {
-  pool: LendPosition;
+  position: LendPosition;
 };
 
 export const LendPositionAction: FC<LendPositionActionProps> = () => {
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
index 7ba96fb60..7792f76e4 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
@@ -2,17 +2,20 @@ import React, { FC } from 'react';
 
 import { t } from 'i18next';
 
-import { HelperButton, Toggle } from '@sovryn/ui';
+import { HelperButton } from '@sovryn/ui';
 
 import { translations } from '../../../../../../../locales/i18n';
 import { LendPosition } from '../../LendPositionsList.types';
 import { LendPositionAction } from '../LendPositionAction/LendPositionAction';
+import { ToggleCollateralAction } from '../ToggleCollateralAction/ToggleCollateralAction';
 
 type LendPositionDetailsProps = {
-  pool: LendPosition;
+  position: LendPosition;
 };
 
-export const LendPositionDetails: FC<LendPositionDetailsProps> = ({ pool }) => {
+export const LendPositionDetails: FC<LendPositionDetailsProps> = ({
+  position,
+}) => {
   return (
     <div className="space-y-3">
       <div className="space-y-2">
@@ -26,7 +29,7 @@ export const LendPositionDetails: FC<LendPositionDetailsProps> = ({ pool }) => {
 
           {/* TODO: review amount renderer component */}
           <div className="text-right text-xs text-gray-30 font-medium">
-            {pool.balance} {pool.asset}
+            {position.balance} {position.asset}
           </div>
         </div>
 
@@ -34,7 +37,7 @@ export const LendPositionDetails: FC<LendPositionDetailsProps> = ({ pool }) => {
         <div className="grid grid-cols-2">
           <div className="flex items-center gap-1">
             <span className="text-xs font-medium text-gray-30">
-              {t(translations.aavePage.lendAssetsList.apy)}
+              {t(translations.aavePage.common.apy)}
             </span>
             <HelperButton
               content={t(translations.aavePage.common.apyInfo)}
@@ -42,7 +45,7 @@ export const LendPositionDetails: FC<LendPositionDetailsProps> = ({ pool }) => {
             />
           </div>
           <div className="text-right text-xs text-gray-30 font-medium">
-            {pool.apy}
+            {position.apy}
           </div>
         </div>
 
@@ -53,13 +56,14 @@ export const LendPositionDetails: FC<LendPositionDetailsProps> = ({ pool }) => {
               {t(translations.aavePage.lendAssetsList.canBeCollateral)}
             </span>
           </div>
-          <div className="flex justify-end text-xs text-positive font-medium">
-            <Toggle checked={pool.collateral} onChange={() => 'TODO:'} />
+
+          <div className="flex justify-end">
+            <ToggleCollateralAction position={position} />
           </div>
         </div>
       </div>
 
-      <LendPositionAction pool={pool} />
+      <LendPositionAction position={position} />
     </div>
   );
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx
new file mode 100644
index 000000000..1697c2de7
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx
@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+
+import { Toggle } from '@sovryn/ui';
+
+import { LendPosition } from '../../LendPositionsList.types';
+
+type ToggleCollateralActionProps = {
+  position: LendPosition;
+};
+
+export const ToggleCollateralAction: FC<ToggleCollateralActionProps> = ({
+  position,
+}) => {
+  return (
+    <Toggle
+      className="[&_*]:ml-0"
+      checked={position.collateral}
+      onChange={() => 'TODO: implement'}
+    />
+  );
+};
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index 6f223ffd7..191b8926f 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -832,8 +832,7 @@
         },
         "lendAssetsList": {
             "title": "Assets to lend",
-            "asset": "Asset",
-            "apy": "APY",
+            "showZeroBalances": "Show assets with 0 balance",
             "walletBalance": "Wallet balance",
             "canBeCollateral": "Can be collateral"
         },

From e42e0e2d0e5eebc3d3019f2b08dff90999c69564 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Thu, 8 Aug 2024 23:28:17 +0300
Subject: [PATCH 010/116] cleanup

---
 .../src/app/5_pages/AavePage/AaavePage.tsx    |  4 +--
 .../BorrowAssetDetails/BorrowAssetDetails.tsx |  7 +++---
 .../BorrowPositionDetails.tsx                 |  8 +++---
 .../LendAssetDetails/LendAssetDetails.tsx     |  9 +++----
 .../LendPositionDetails.tsx                   | 11 ++++----
 .../AavePage/components/TopPanel/TopPanel.tsx | 16 ++++++------
 .../WalletStatCard/WalletStatCard.tsx         | 25 ++++++++++++-------
 7 files changed, 44 insertions(+), 36 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/AaavePage.tsx b/apps/frontend/src/app/5_pages/AavePage/AaavePage.tsx
index 783d0eda0..3298ff574 100644
--- a/apps/frontend/src/app/5_pages/AavePage/AaavePage.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/AaavePage.tsx
@@ -6,7 +6,6 @@ import { Helmet } from 'react-helmet-async';
 
 import { Tabs, TabSize, TabType } from '@sovryn/ui';
 
-import { useAccount } from '../../../hooks/useAccount';
 import { translations } from '../../../locales/i18n';
 import { BorrowAssetsList } from './components/BorrowAssetsList/BorrowAssetsList';
 import { BorrowPositionsList } from './components/BorrowPositionsList/BorrowPositionsList';
@@ -22,7 +21,6 @@ enum LiquidityTabs {
 }
 
 const AavePage: FC = () => {
-  const { account } = useAccount();
   const [activeLiquidityTab, setActiveLiquidityTab] = useState<LiquidityTabs>(
     LiquidityTabs.LEND,
   );
@@ -33,7 +31,7 @@ const AavePage: FC = () => {
         <title>{t(pageTranslations.meta.title)}</title>
       </Helmet>
 
-      <TopPanel account={account} />
+      <TopPanel />
 
       <div className="pt-6 mt-6 space-y-6 lg:pt-0 lg:mt-0 lg:space-y-0">
         {/* Tab selector */}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
index 658fedebe..95879ae0e 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
@@ -4,6 +4,7 @@ import { t } from 'i18next';
 
 import { HelperButton } from '@sovryn/ui';
 
+import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { translations } from '../../../../../../../locales/i18n';
 import { BorrowPoolDetails } from '../../BorrowAssetsList.types';
 import { BorrowAssetAction } from '../BorrowAssetAction/BorrowAssetAction';
@@ -30,9 +31,8 @@ export const BorrowAssetDetails: FC<BorrowAssetDetailsProps> = ({ pool }) => {
             />
           </div>
 
-          {/* TODO: amount renderer */}
           <div className="text-right text-xs text-gray-30 font-medium">
-            {pool.apr}
+            <AmountRenderer value={pool.apr} />
           </div>
         </div>
 
@@ -44,9 +44,8 @@ export const BorrowAssetDetails: FC<BorrowAssetDetailsProps> = ({ pool }) => {
             </span>
           </div>
 
-          {/* TODO: amount renderer */}
           <div className="text-right text-xs text-gray-30 font-medium">
-            {pool.available} {pool.asset}
+            <AmountRenderer value={pool.available} suffix={pool.asset} />
           </div>
         </div>
       </div>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
index 3a6612cf6..bf51ec087 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
@@ -4,6 +4,7 @@ import { t } from 'i18next';
 
 import { HelperButton } from '@sovryn/ui';
 
+import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { translations } from '../../../../../../../locales/i18n';
 import { BorrowPosition } from '../../BorrowPositionsList.types';
 import { BorrowPositionAction } from '../BorrowPositionAction/BorrowPositionAction';
@@ -26,9 +27,8 @@ export const BorrowPositionDetails: FC<BorrowPositionDetailsProps> = ({
             </span>
           </div>
 
-          {/* TODO: review amount renderer component */}
           <div className="text-right text-xs text-gray-30 font-medium">
-            {position.balance} {position.asset}
+            <AmountRenderer value={position.balance} suffix={position.asset} />
           </div>
         </div>
 
@@ -43,8 +43,9 @@ export const BorrowPositionDetails: FC<BorrowPositionDetailsProps> = ({
               className="text-gray-30"
             />
           </div>
+
           <div className="text-right text-xs text-gray-30 font-medium">
-            {position.apr}
+            <AmountRenderer value={position.apr} />
           </div>
         </div>
 
@@ -55,6 +56,7 @@ export const BorrowPositionDetails: FC<BorrowPositionDetailsProps> = ({
               {t(translations.aavePage.common.apyType)}
             </span>
           </div>
+
           <div className="flex justify-end text-xs text-positive font-medium">
             {position.apyType}
           </div>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
index 186f10549..c8139219a 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
@@ -4,6 +4,7 @@ import { t } from 'i18next';
 
 import { HelperButton, Icon } from '@sovryn/ui';
 
+import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { translations } from '../../../../../../../locales/i18n';
 import { LendPoolDetails } from '../../LendAssetsList.types';
 import { LendAssetAction } from '../LendAssetAction/LendAssetAction';
@@ -24,13 +25,12 @@ export const LendAssetDetails: FC<LendAssetDetailsProps> = ({ pool }) => {
             </span>
           </div>
 
-          {/* TODO: review amount renderer component */}
           <div className="text-right text-xs text-gray-30 font-medium">
-            {pool.walletBalance} {pool.asset}
+            <AmountRenderer value={pool.walletBalance} suffix={pool.asset} />
           </div>
         </div>
 
-        {/* APR */}
+        {/* APY */}
         <div className="grid grid-cols-2">
           <div className="flex items-center gap-1">
             <span className="text-xs font-medium text-gray-30">
@@ -42,9 +42,8 @@ export const LendAssetDetails: FC<LendAssetDetailsProps> = ({ pool }) => {
             />
           </div>
 
-          {/* TODO: review amount renderer component */}
           <div className="text-right text-xs text-gray-30 font-medium">
-            {pool.apy}
+            <AmountRenderer value={pool.apy} />
           </div>
         </div>
 
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
index 7792f76e4..16c799548 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
@@ -4,6 +4,7 @@ import { t } from 'i18next';
 
 import { HelperButton } from '@sovryn/ui';
 
+import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { translations } from '../../../../../../../locales/i18n';
 import { LendPosition } from '../../LendPositionsList.types';
 import { LendPositionAction } from '../LendPositionAction/LendPositionAction';
@@ -19,7 +20,7 @@ export const LendPositionDetails: FC<LendPositionDetailsProps> = ({
   return (
     <div className="space-y-3">
       <div className="space-y-2">
-        {/* Available */}
+        {/* Balance */}
         <div className="grid grid-cols-2">
           <div className="flex items-center gap-1">
             <span className="text-xs font-medium text-gray-30">
@@ -27,13 +28,12 @@ export const LendPositionDetails: FC<LendPositionDetailsProps> = ({
             </span>
           </div>
 
-          {/* TODO: review amount renderer component */}
           <div className="text-right text-xs text-gray-30 font-medium">
-            {position.balance} {position.asset}
+            <AmountRenderer value={position.balance} suffix={position.asset} />
           </div>
         </div>
 
-        {/* APR */}
+        {/* APY */}
         <div className="grid grid-cols-2">
           <div className="flex items-center gap-1">
             <span className="text-xs font-medium text-gray-30">
@@ -44,8 +44,9 @@ export const LendPositionDetails: FC<LendPositionDetailsProps> = ({
               className="text-gray-30"
             />
           </div>
+
           <div className="text-right text-xs text-gray-30 font-medium">
-            {position.apy}
+            <AmountRenderer value={position.apy} />
           </div>
         </div>
 
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx b/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
index 6bfabe1fa..5a414f014 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
@@ -11,16 +11,17 @@ import {
   ParagraphSize,
 } from '@sovryn/ui';
 
+import { useAccount } from '../../../../../hooks/useAccount';
 import { translations } from '../../../../../locales/i18n';
 import { WalletStatCard } from './components/WalletStatCard/WalletStatCard';
 
 const pageTranslations = translations.aavePage.topPanel;
 
-type TopPanelProps = {
-  account: string;
-};
+type TopPanelProps = {};
+
+export const TopPanel: FC<TopPanelProps> = () => {
+  const { account } = useAccount();
 
-export const TopPanel: FC<TopPanelProps> = ({ account }) => {
   return (
     <div className="w-full flex flex-col gap-6">
       <div className="text-center py-6 px-10 space-y-3 md:hidden">
@@ -34,21 +35,22 @@ export const TopPanel: FC<TopPanelProps> = ({ account }) => {
 
       <div className="flex flex-col gap-6 md:flex-row">
         <div className="flex flex-col gap-4 md:py-12 md:flex-row md:gap-9 flex-shrink-0">
+          {/* TODO: mock values */}
           <WalletStatCard
             label={t(pageTranslations.netWorth)}
             prefix="$"
-            value="1,234,567.58"
+            value={account ? 1234567.58 : undefined}
           />
           <div className="flex gap-9">
             <WalletStatCard
               label={t(pageTranslations.netApy)}
-              value="200"
+              value={account ? 2.69 : undefined}
               suffix="%"
               helperContent={t(pageTranslations.netApyInfo)}
             />
             <WalletStatCard
               label={t(pageTranslations.collateralRatio)}
-              value="11.69"
+              value={account ? 11.5 : undefined}
               suffix="%"
               helperContent={t(pageTranslations.collateralRatioInfo)}
             />
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/components/WalletStatCard/WalletStatCard.tsx b/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/components/WalletStatCard/WalletStatCard.tsx
index e262d2ee1..2dc6d7c37 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/components/WalletStatCard/WalletStatCard.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/components/WalletStatCard/WalletStatCard.tsx
@@ -1,21 +1,25 @@
 import React, { FC } from 'react';
 
+import { t } from 'i18next';
+
 import { HelperButton } from '@sovryn/ui';
 
-type WalletStatCardProps = {
+import {
+  AmountRenderer,
+  AmountRendererProps,
+} from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
+import { translations } from '../../../../../../../locales/i18n';
+
+type WalletStatCardProps = Partial<AmountRendererProps> & {
   label: string;
-  value: string;
-  prefix?: string;
-  suffix?: string;
   helperContent?: string;
 };
 
 export const WalletStatCard: FC<WalletStatCardProps> = ({
   label,
   value,
-  prefix,
-  suffix,
   helperContent,
+  ...props
 }) => {
   return (
     <div className="space-y-3">
@@ -23,10 +27,13 @@ export const WalletStatCard: FC<WalletStatCardProps> = ({
         <span className="text-xs text-gray-30">{label}</span>
         {helperContent && <HelperButton content={helperContent} />}
       </div>
+
       <div className="text-2xl text-white">
-        {prefix && <span>{prefix}</span>}
-        <span>{value}</span>
-        {suffix && <span>{suffix}</span>}
+        {value ? (
+          <AmountRenderer value={value} {...props} />
+        ) : (
+          <span>{t(translations.aavePage.topPanel['n/a'])}</span>
+        )}
       </div>
     </div>
   );

From bcc105c8bc77b2ffd7691f99573f341c87f3c37c Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Fri, 9 Aug 2024 00:00:04 +0300
Subject: [PATCH 011/116] cleanup

---
 .../AavePoolRowTitle/AavePoolRowTitle.tsx     | 39 +++++++------------
 .../BorrowAssetsList/BorrowAssetsList.tsx     | 15 +++++--
 .../BorrowAssetDetails/BorrowAssetDetails.tsx |  2 +-
 .../BorrowPositionsList.tsx                   | 14 +++++--
 .../BorrowPositionDetails.tsx                 |  6 +--
 .../LendAssetsList.constants.tsx              |  8 ++--
 .../LendAssetsList/LendAssetsList.tsx         | 10 +++--
 .../LendAssetDetails/LendAssetDetails.tsx     | 15 ++++---
 .../LendPositionsList/LendPositionsList.tsx   | 14 +++++--
 .../LendPositionDetails.tsx                   |  4 +-
 10 files changed, 72 insertions(+), 55 deletions(-)

diff --git a/apps/frontend/src/app/2_molecules/AavePoolRowTitle/AavePoolRowTitle.tsx b/apps/frontend/src/app/2_molecules/AavePoolRowTitle/AavePoolRowTitle.tsx
index 76d8d5b0a..99466a757 100644
--- a/apps/frontend/src/app/2_molecules/AavePoolRowTitle/AavePoolRowTitle.tsx
+++ b/apps/frontend/src/app/2_molecules/AavePoolRowTitle/AavePoolRowTitle.tsx
@@ -1,39 +1,28 @@
 import React, { FC } from 'react';
 
-import { t } from 'i18next';
-
-import { NextBorrowInterestRate } from '../../5_pages/BorrowPage/components/BorrowAssetsTable/components/NextBorrowInterestRate/NextBorrowInterestRate';
-import { NextSupplyInterestRate } from '../../5_pages/LendPage/components/NextSupplyInterestRate/NextSupplyInterestRate';
-import { translations } from '../../../locales/i18n';
+import {
+  AmountRenderer,
+  AmountRendererProps,
+} from '../AmountRenderer/AmountRenderer';
 import { AssetRenderer } from '../AssetRenderer/AssetRenderer';
 
-type AavePoolRowTitleProps = {
+type AaveRowTitleProps = AmountRendererProps & {
   asset: string;
-  isBorrow?: boolean;
+  label?: string;
 };
 
-export const AavePoolRowTitle: FC<AavePoolRowTitleProps> = ({
+export const AaveRowTitle: FC<AaveRowTitleProps> = ({
   asset,
-  isBorrow = false,
+  label,
+  ...props
 }) => (
   <div className="flex justify-between items-center w-full pr-3">
-    <AssetRenderer
-      dataAttribute={`${isBorrow ? 'borrow-table' : 'lend-frame'}-asset`}
-      showAssetLogo
-      asset={asset}
-      className="mr-1"
-    />
-    <div className="pl-1 flex items-center">
-      {isBorrow ? (
-        <NextBorrowInterestRate asset={asset} />
-      ) : (
-        <NextSupplyInterestRate asset={asset} />
+    <AssetRenderer showAssetLogo asset={asset} className="mr-1" />
+    <div className="pl-1 flex items-center font-medium">
+      <AmountRenderer {...props} />
+      {label && (
+        <span className="ml-1 text-gray-30 font-semibold text-sm">{label}</span>
       )}
-      <span className="text-gray-30 ml-1 font-medium">
-        {isBorrow
-          ? t(translations.fixedInterestPage.borrowAssetsTable.borrowAprMobile)
-          : t(translations.lendPage.table.lendAprMobile)}
-      </span>
     </div>
   </div>
 );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
index 410be8736..765004b05 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
@@ -4,7 +4,7 @@ import { t } from 'i18next';
 
 import { Accordion, Table } from '@sovryn/ui';
 
-import { AavePoolRowTitle } from '../../../../2_molecules/AavePoolRowTitle/AavePoolRowTitle';
+import { AaveRowTitle } from '../../../../2_molecules/AavePoolRowTitle/AavePoolRowTitle';
 import { translations } from '../../../../../locales/i18n';
 import { COLUMNS_CONFIG } from './BorrowAssetsList.constants';
 import { BorrowAssetDetails } from './components/BorrowAssetDetails/BorrowAssetDetails';
@@ -35,18 +35,25 @@ export const BorrowAssetsList: FC<BorrowAssetsListProps> = ({ account }) => {
           columns={COLUMNS_CONFIG}
           rowClassName="bg-gray-80"
           accordionClassName="bg-gray-60 border border-gray-70"
-          rowTitle={r => <AavePoolRowTitle asset={r.asset} />}
+          rowTitle={r => (
+            <AaveRowTitle
+              asset={r.asset}
+              value={r.apr}
+              suffix="%"
+              label="APY"
+            />
+          )}
           rows={[
             // TODO: just a mock for now
             {
               asset: 'BTC',
-              apr: 2,
+              apr: 2.01,
               available: 12.34,
               availableUsd: 100,
             },
             {
               asset: 'ETH',
-              apr: 2,
+              apr: 2.01,
               available: 12.34,
               availableUsd: 100,
             },
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
index 95879ae0e..194a2c977 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
@@ -32,7 +32,7 @@ export const BorrowAssetDetails: FC<BorrowAssetDetailsProps> = ({ pool }) => {
           </div>
 
           <div className="text-right text-xs text-gray-30 font-medium">
-            <AmountRenderer value={pool.apr} />
+            <AmountRenderer value={pool.apr} suffix={'%'} />
           </div>
         </div>
 
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
index afe3cab07..7ce9237f0 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
@@ -4,7 +4,7 @@ import { t } from 'i18next';
 
 import { Accordion, Paragraph, Table } from '@sovryn/ui';
 
-import { AavePoolRowTitle } from '../../../../2_molecules/AavePoolRowTitle/AavePoolRowTitle';
+import { AaveRowTitle } from '../../../../2_molecules/AavePoolRowTitle/AavePoolRowTitle';
 import { useAccount } from '../../../../../hooks/useAccount';
 import { translations } from '../../../../../locales/i18n';
 import { PoolPositionStat } from '../PoolPositionStat/PoolPositionStat';
@@ -58,18 +58,24 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = () => {
             columns={COLUMNS_CONFIG}
             rowClassName="bg-gray-80"
             accordionClassName="bg-gray-60 border border-gray-70"
-            rowTitle={r => <AavePoolRowTitle asset={r.asset} />}
+            rowTitle={r => (
+              <AaveRowTitle
+                asset={r.asset}
+                value={r.balance}
+                suffix={r.asset}
+              />
+            )}
             rows={[
               // TODO: mocked values
               {
                 asset: 'BTC',
-                apr: 2,
+                apr: 2.24,
                 balance: 12.34,
                 apyType: 'variable',
               },
               {
                 asset: 'ETH',
-                apr: 2,
+                apr: 2.33,
                 balance: 12.34,
                 apyType: 'fixed',
               },
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
index bf51ec087..8fa4e46ab 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
@@ -45,7 +45,7 @@ export const BorrowPositionDetails: FC<BorrowPositionDetailsProps> = ({
           </div>
 
           <div className="text-right text-xs text-gray-30 font-medium">
-            <AmountRenderer value={position.apr} />
+            <AmountRenderer value={position.apr} suffix="%" />
           </div>
         </div>
 
@@ -57,8 +57,8 @@ export const BorrowPositionDetails: FC<BorrowPositionDetailsProps> = ({
             </span>
           </div>
 
-          <div className="flex justify-end text-xs text-positive font-medium">
-            {position.apyType}
+          <div className="text-right text-xs text-gray-30 font-medium">
+            {t(translations.aavePage.common[position.apyType])}
           </div>
         </div>
       </div>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
index 8b2cff090..4a681dd58 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { t } from 'i18next';
 
-import { Align, HelperButton, Icon } from '@sovryn/ui';
+import { Align, HelperButton, Icon, IconNames } from '@sovryn/ui';
 
 import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
 import { translations } from '../../../../../locales/i18n';
@@ -60,8 +60,10 @@ export const COLUMNS_CONFIG = [
     ),
     cellRenderer: (pool: LendPoolDetails) => (
       <div className="flex justify-center">
-        {pool.canBeCollateral && (
-          <Icon icon="check" className="w-[10px] text-positive" />
+        {pool.canBeCollateral ? (
+          <Icon icon={IconNames.CHECK} className="w-[10px] text-positive" />
+        ) : (
+          <Icon icon={IconNames.X_MARK} className="w-[10px] text-negative" />
         )}
       </div>
     ),
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
index 52d29ad0e..ab4cf58d8 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
@@ -4,7 +4,7 @@ import { t } from 'i18next';
 
 import { Accordion, Checkbox, Table } from '@sovryn/ui';
 
-import { AavePoolRowTitle } from '../../../../2_molecules/AavePoolRowTitle/AavePoolRowTitle';
+import { AaveRowTitle } from '../../../../2_molecules/AavePoolRowTitle/AavePoolRowTitle';
 import { translations } from '../../../../../locales/i18n';
 import { COLUMNS_CONFIG } from './LendAssetsList.constants';
 import { LendAssetDetails } from './components/LendAssetDetails/LendAssetDetails';
@@ -43,18 +43,20 @@ export const LendAssetsList: FC<LendAssetsListProps> = ({ account }) => {
         columns={COLUMNS_CONFIG}
         rowClassName="bg-gray-80"
         accordionClassName="bg-gray-60 border border-gray-70"
-        rowTitle={r => <AavePoolRowTitle asset={r.asset} />}
+        rowTitle={r => (
+          <AaveRowTitle asset={r.asset} value={r.apy} suffix="%" label="APY" />
+        )}
         rows={[
           // TODO: mocked values
           {
             asset: 'BTC',
-            apy: 2,
+            apy: 2.02,
             walletBalance: 12.34,
             canBeCollateral: true,
           },
           {
             asset: 'ETH',
-            apy: 2,
+            apy: 2.02,
             walletBalance: 12.34,
             canBeCollateral: false,
           },
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
index c8139219a..988716e6a 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 
 import { t } from 'i18next';
 
-import { HelperButton, Icon } from '@sovryn/ui';
+import { HelperButton, Icon, IconNames } from '@sovryn/ui';
 
 import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { translations } from '../../../../../../../locales/i18n';
@@ -43,7 +43,7 @@ export const LendAssetDetails: FC<LendAssetDetailsProps> = ({ pool }) => {
           </div>
 
           <div className="text-right text-xs text-gray-30 font-medium">
-            <AmountRenderer value={pool.apy} />
+            <AmountRenderer value={pool.apy} suffix="%" />
           </div>
         </div>
 
@@ -55,10 +55,15 @@ export const LendAssetDetails: FC<LendAssetDetailsProps> = ({ pool }) => {
             </span>
           </div>
 
-          <div className="flex justify-end text-xs text-positive font-medium">
+          <div className="flex justify-end text-xs  font-medium">
             {pool.canBeCollateral ? (
-              <Icon icon="check" className="w-[10px]" />
-            ) : null}
+              <Icon icon={IconNames.CHECK} className="w-[10px] text-positive" />
+            ) : (
+              <Icon
+                icon={IconNames.X_MARK}
+                className="w-[10px] text-negative"
+              />
+            )}
           </div>
         </div>
       </div>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
index 1075cc69e..234cff3b0 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
@@ -4,7 +4,7 @@ import { t } from 'i18next';
 
 import { Accordion, Paragraph, Table } from '@sovryn/ui';
 
-import { AavePoolRowTitle } from '../../../../2_molecules/AavePoolRowTitle/AavePoolRowTitle';
+import { AaveRowTitle } from '../../../../2_molecules/AavePoolRowTitle/AavePoolRowTitle';
 import { useAccount } from '../../../../../hooks/useAccount';
 import { translations } from '../../../../../locales/i18n';
 import { PoolPositionStat } from '../PoolPositionStat/PoolPositionStat';
@@ -59,18 +59,24 @@ export const LendPositionsList: FC<LendPositionsListProps> = () => {
             columns={COLUMNS_CONFIG}
             rowClassName="bg-gray-80"
             accordionClassName="bg-gray-60 border border-gray-70"
-            rowTitle={r => <AavePoolRowTitle asset={r.asset} />}
+            rowTitle={r => (
+              <AaveRowTitle
+                asset={r.asset}
+                value={r.balance}
+                suffix={r.asset}
+              />
+            )}
             rows={[
               // TODO: mocked data
               {
                 asset: 'BTC',
-                apy: 2,
+                apy: 2.01,
                 balance: 12.34,
                 collateral: true,
               },
               {
                 asset: 'ETH',
-                apy: 2,
+                apy: 2.04,
                 balance: 12.34,
                 collateral: false,
               },
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
index 16c799548..4ba524a5b 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
@@ -46,7 +46,7 @@ export const LendPositionDetails: FC<LendPositionDetailsProps> = ({
           </div>
 
           <div className="text-right text-xs text-gray-30 font-medium">
-            <AmountRenderer value={position.apy} />
+            <AmountRenderer value={position.apy} suffix={'%'} />
           </div>
         </div>
 
@@ -54,7 +54,7 @@ export const LendPositionDetails: FC<LendPositionDetailsProps> = ({
         <div className="grid grid-cols-2">
           <div className="flex items-center gap-1">
             <span className="text-xs font-medium text-gray-30">
-              {t(translations.aavePage.lendAssetsList.canBeCollateral)}
+              {t(translations.aavePage.lendPositionsList.usedAsCollateral)}
             </span>
           </div>
 

From 0c02b7010f29157f000db2128fe424a35c9ccc7d Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Fri, 9 Aug 2024 15:59:41 +0300
Subject: [PATCH 012/116] static ui done. missing validations

---
 .../LendPositionAction/LendPositionAction.tsx |  21 ++-
 .../components/WithdrawModal/WithdrawForm.tsx | 123 ++++++++++++++++++
 .../WithdrawModal/WithdrawModalContainer.tsx  |  30 +++++
 3 files changed, 172 insertions(+), 2 deletions(-)
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
index bbba9103e..b86d1a8ad 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback, useState } from 'react';
 
 import { t } from 'i18next';
 
@@ -6,19 +6,36 @@ import { Button, ButtonStyle } from '@sovryn/ui';
 
 import { translations } from '../../../../../../../locales/i18n';
 import { LendPosition } from '../../LendPositionsList.types';
+import { WithdrawModalContainer } from '../WithdrawModal/WithdrawModalContainer';
 
 type LendPositionActionProps = {
   position: LendPosition;
 };
 
 export const LendPositionAction: FC<LendPositionActionProps> = () => {
+  const [isWithdrawModalOpen, setIsWithdrawModalOpen] =
+    useState<boolean>(false);
+
+  const handleWithdrawClick = useCallback(() => {
+    setIsWithdrawModalOpen(true);
+  }, []);
+
+  const handleWithdrawClose = useCallback(() => {
+    setIsWithdrawModalOpen(false);
+  }, []);
+
   return (
     <div className="flex items-center justify-center lg:justify-end space-x-2">
-      {/* TODO: these should be modal triggers */}
       <Button
         style={ButtonStyle.secondary}
         className="flex-grow"
         text={t(translations.aavePage.lendPositionsList.withdraw)}
+        onClick={handleWithdrawClick}
+      />
+
+      <WithdrawModalContainer
+        handleCloseModal={handleWithdrawClose}
+        isOpen={isWithdrawModalOpen}
       />
     </div>
   );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
new file mode 100644
index 000000000..2d2fcfad3
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
@@ -0,0 +1,123 @@
+import React, { FC, useCallback, useMemo, useState } from 'react';
+
+import { t } from 'i18next';
+
+import {
+  AmountInput,
+  Button,
+  Select,
+  SimpleTable,
+  SimpleTableRow,
+  Tabs,
+  TabType,
+} from '@sovryn/ui';
+
+import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
+import { AssetRenderer } from '../../../../../../2_molecules/AssetRenderer/AssetRenderer';
+import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
+import { translations } from '../../../../../../../locales/i18n';
+
+type WithdrawFormProps = {};
+
+export const WithdrawForm: FC<WithdrawFormProps> = () => {
+  const withdrawableAssets = useMemo(() => ['BTC', 'SOV'], []); // TODO: Mock data
+  const [withdrawAsset, setWithdrawAsset] = useState<string>(
+    withdrawableAssets[0],
+  );
+  const [maxWithdrawableAmount] = useState(10);
+  const [withdrawAmount, setWithdrawAmount] = useDecimalAmountInput('');
+
+  const onWithdrawAssetChange = useCallback(v => {
+    setWithdrawAsset(v);
+  }, []);
+
+  const withdrawableAssetsOptions = useMemo(
+    () =>
+      withdrawableAssets.map(token => ({
+        value: token,
+        label: (
+          <AssetRenderer
+            showAssetLogo
+            asset={token}
+            assetClassName="font-medium"
+          />
+        ),
+      })),
+    [withdrawableAssets],
+  );
+
+  return (
+    <form className="flex flex-col gap-6">
+      <div className="space-y-3">
+        <div className="flex justify-between items-end">
+          <Tabs
+            type={TabType.secondary}
+            index={0}
+            items={[
+              // For now just withdraw is supported
+              {
+                activeClassName: 'text-primary-20',
+                dataAttribute: 'withdraw',
+                label: 'Withdraw',
+              },
+            ]}
+          />
+          <span className="text-xs underline">
+            (Max{' '}
+            <AmountRenderer
+              value={maxWithdrawableAmount}
+              suffix={withdrawAsset}
+              prefix="~"
+            />
+            )
+          </span>
+        </div>
+
+        <div className="flex space-x-3">
+          <div className="text-right flex-grow space-y-1">
+            <AmountInput
+              label={t(translations.common.amount)}
+              value={withdrawAmount}
+              onChangeText={setWithdrawAmount}
+              placeholder="0"
+            />
+            <div className=" pr-4">
+              <AmountRenderer
+                className="text-gray-40"
+                value={0} // TODO: usd equivalent
+                prefix="$"
+              />
+            </div>
+          </div>
+
+          <Select
+            value={withdrawAsset}
+            onChange={onWithdrawAssetChange}
+            options={withdrawableAssetsOptions}
+            labelRenderer={({ value }) => (
+              <AssetRenderer
+                dataAttribute="new-loan-collateral-asset"
+                showAssetLogo
+                asset={value}
+              />
+            )}
+            className="min-w-[6.7rem]"
+            menuClassName="max-h-[10rem] sm:max-h-[20rem]"
+            dataAttribute="new-loan-collateral-select"
+          />
+        </div>
+      </div>
+
+      <div>
+        <SimpleTable>
+          <SimpleTableRow
+            label={'Remaining'}
+            value={<AmountRenderer value={1} suffix={withdrawAsset} />}
+          />
+        </SimpleTable>
+      </div>
+
+      <Button text="Confirm" />
+    </form>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx
new file mode 100644
index 000000000..32a3fc258
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx
@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+
+import { t } from 'i18next';
+
+import { Dialog, DialogBody, DialogHeader } from '@sovryn/ui';
+
+import { translations } from '../../../../../../../locales/i18n';
+import { WithdrawForm } from './WithdrawForm';
+
+type WithdrawModalContainerProps = {
+  isOpen: boolean;
+  handleCloseModal: () => unknown;
+};
+
+export const WithdrawModalContainer: FC<WithdrawModalContainerProps> = ({
+  isOpen,
+  handleCloseModal,
+}) => {
+  return (
+    <Dialog disableFocusTrap isOpen={isOpen}>
+      <DialogHeader
+        title={t(translations.lendingAdjust.title)}
+        onClose={handleCloseModal}
+      />
+      <DialogBody className="flex flex-col gap-6">
+        <WithdrawForm />
+      </DialogBody>
+    </Dialog>
+  );
+};

From eecce08b8f9d6d185eb3ea3d50aa080f50b959cc Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Fri, 9 Aug 2024 16:19:04 +0300
Subject: [PATCH 013/116] add validations

---
 .../LendPositionAction/LendPositionAction.tsx |  2 +-
 .../components/WithdrawModal/WithdrawForm.tsx | 54 +++++++++++++++----
 .../WithdrawModal/WithdrawModalContainer.tsx  |  4 +-
 .../frontend/src/locales/en/translations.json | 12 +++--
 4 files changed, 54 insertions(+), 18 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
index b86d1a8ad..b7aa5577f 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
@@ -29,7 +29,7 @@ export const LendPositionAction: FC<LendPositionActionProps> = () => {
       <Button
         style={ButtonStyle.secondary}
         className="flex-grow"
-        text={t(translations.aavePage.lendPositionsList.withdraw)}
+        text={t(translations.common.buttons.withdraw)}
         onClick={handleWithdrawClick}
       />
 
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
index 2d2fcfad3..3b89bc08c 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
@@ -5,27 +5,35 @@ import { t } from 'i18next';
 import {
   AmountInput,
   Button,
+  ErrorBadge,
+  ErrorLevel,
   Select,
   SimpleTable,
   SimpleTableRow,
   Tabs,
   TabType,
 } from '@sovryn/ui';
+import { Decimal } from '@sovryn/utils';
 
 import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { AssetRenderer } from '../../../../../../2_molecules/AssetRenderer/AssetRenderer';
 import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
 import { translations } from '../../../../../../../locales/i18n';
 
-type WithdrawFormProps = {};
+const pageTranslations = translations.aavePage;
+
+type WithdrawFormProps = {
+  onSuccess: () => unknown;
+};
 
 export const WithdrawForm: FC<WithdrawFormProps> = () => {
-  const withdrawableAssets = useMemo(() => ['BTC', 'SOV'], []); // TODO: Mock data
+  const withdrawableAssets = useMemo(() => ['BTC', 'SOV'], []); // TODO: this is mocked data. Replace with proper hook
+  const [maximumWithdrawAmount] = useState<Decimal>(Decimal.from(10)); // TODO: this is mocked data. Replace with proper hook
   const [withdrawAsset, setWithdrawAsset] = useState<string>(
     withdrawableAssets[0],
   );
-  const [maxWithdrawableAmount] = useState(10);
-  const [withdrawAmount, setWithdrawAmount] = useDecimalAmountInput('');
+  const [withdrawAmount, setWithdrawAmount, withdrawSize] =
+    useDecimalAmountInput('');
 
   const onWithdrawAssetChange = useCallback(v => {
     setWithdrawAsset(v);
@@ -46,6 +54,16 @@ export const WithdrawForm: FC<WithdrawFormProps> = () => {
     [withdrawableAssets],
   );
 
+  const isValidWithdrawAmount = useMemo(
+    () => (withdrawSize.gt(0) ? withdrawSize.lte(maximumWithdrawAmount) : true),
+    [withdrawSize, maximumWithdrawAmount],
+  );
+
+  const remainingSupply = useMemo(
+    () => maximumWithdrawAmount.sub(withdrawSize),
+    [withdrawSize, maximumWithdrawAmount],
+  );
+
   return (
     <form className="flex flex-col gap-6">
       <div className="space-y-3">
@@ -58,14 +76,14 @@ export const WithdrawForm: FC<WithdrawFormProps> = () => {
               {
                 activeClassName: 'text-primary-20',
                 dataAttribute: 'withdraw',
-                label: 'Withdraw',
+                label: t(translations.common.withdraw),
               },
             ]}
           />
           <span className="text-xs underline">
             (Max{' '}
             <AmountRenderer
-              value={maxWithdrawableAmount}
+              value={maximumWithdrawAmount}
               suffix={withdrawAsset}
               prefix="~"
             />
@@ -80,6 +98,7 @@ export const WithdrawForm: FC<WithdrawFormProps> = () => {
               value={withdrawAmount}
               onChangeText={setWithdrawAmount}
               placeholder="0"
+              invalid={!isValidWithdrawAmount}
             />
             <div className=" pr-4">
               <AmountRenderer
@@ -88,6 +107,14 @@ export const WithdrawForm: FC<WithdrawFormProps> = () => {
                 prefix="$"
               />
             </div>
+
+            {!isValidWithdrawAmount && (
+              <ErrorBadge
+                level={ErrorLevel.Critical}
+                message={t(pageTranslations.withdrawForm.invalidAmountError)}
+                dataAttribute="withdraw-amount-error"
+              />
+            )}
           </div>
 
           <Select
@@ -96,14 +123,14 @@ export const WithdrawForm: FC<WithdrawFormProps> = () => {
             options={withdrawableAssetsOptions}
             labelRenderer={({ value }) => (
               <AssetRenderer
-                dataAttribute="new-loan-collateral-asset"
+                dataAttribute="withdraw-asset-asset"
                 showAssetLogo
                 asset={value}
               />
             )}
             className="min-w-[6.7rem]"
             menuClassName="max-h-[10rem] sm:max-h-[20rem]"
-            dataAttribute="new-loan-collateral-select"
+            dataAttribute="withdraw-asset-select"
           />
         </div>
       </div>
@@ -111,13 +138,18 @@ export const WithdrawForm: FC<WithdrawFormProps> = () => {
       <div>
         <SimpleTable>
           <SimpleTableRow
-            label={'Remaining'}
-            value={<AmountRenderer value={1} suffix={withdrawAsset} />}
+            label={t(translations.aavePage.withdrawForm.remainingSupply)}
+            value={
+              <AmountRenderer
+                value={remainingSupply.toNumber()}
+                suffix={withdrawAsset}
+              />
+            }
           />
         </SimpleTable>
       </div>
 
-      <Button text="Confirm" />
+      <Button text={t(translations.common.buttons.confirm)} />
     </form>
   );
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx
index 32a3fc258..3c2474a8b 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx
@@ -19,11 +19,11 @@ export const WithdrawModalContainer: FC<WithdrawModalContainerProps> = ({
   return (
     <Dialog disableFocusTrap isOpen={isOpen}>
       <DialogHeader
-        title={t(translations.lendingAdjust.title)}
+        title={t(translations.aavePage.common.withdraw)}
         onClose={handleCloseModal}
       />
       <DialogBody className="flex flex-col gap-6">
-        <WithdrawForm />
+        <WithdrawForm onSuccess={handleCloseModal} />
       </DialogBody>
     </Dialog>
   );
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index 191b8926f..6cb93a06f 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -803,7 +803,9 @@
             "borrow": "Borrow",
             "lend": "Lend",
             "variable": "Variable",
-            "fixed": "Fixed"
+            "fixed": "Fixed",
+            "withdraw": "Withdraw"
+
         },
         "topPanel": {
             "title": "Lend and borrow",
@@ -827,8 +829,7 @@
         },
         "lendPositionsList": {
             "title": "Your lending deposits",
-            "usedAsCollateral": "Used as collateral",
-            "withdraw": "Withdraw"
+            "usedAsCollateral": "Used as collateral"
         },
         "lendAssetsList": {
             "title": "Assets to lend",
@@ -836,7 +837,10 @@
             "walletBalance": "Wallet balance",
             "canBeCollateral": "Can be collateral"
         },
-        "assetCard": {}
+        "withdrawForm": {
+            "remainingSupply": "Remaining supply",
+            "invalidAmountError": "Invalid amount"
+        }
     },
     "bitocracyPage": {
         "meta": {

From 23a9d44922b2d99677e6d0a3635d6b39cb5ebce0 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Fri, 9 Aug 2024 16:25:51 +0300
Subject: [PATCH 014/116] add validations

---
 .../components/WithdrawModal/WithdrawForm.tsx          | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
index 3b89bc08c..f636ee5bb 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
@@ -64,6 +64,11 @@ export const WithdrawForm: FC<WithdrawFormProps> = () => {
     [withdrawSize, maximumWithdrawAmount],
   );
 
+  const submitButtonDisabled = useMemo(
+    () => !isValidWithdrawAmount || withdrawSize.lte(0),
+    [isValidWithdrawAmount, withdrawSize],
+  );
+
   return (
     <form className="flex flex-col gap-6">
       <div className="space-y-3">
@@ -149,7 +154,10 @@ export const WithdrawForm: FC<WithdrawFormProps> = () => {
         </SimpleTable>
       </div>
 
-      <Button text={t(translations.common.buttons.confirm)} />
+      <Button
+        disabled={submitButtonDisabled}
+        text={t(translations.common.buttons.confirm)}
+      />
     </form>
   );
 };

From d48a4b2a385b08efb602357f4a32023c9286c1fc Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Fri, 9 Aug 2024 16:34:58 +0300
Subject: [PATCH 015/116] move errors down

---
 .../components/WithdrawModal/WithdrawForm.tsx  | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
index f636ee5bb..229db8452 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
@@ -112,14 +112,6 @@ export const WithdrawForm: FC<WithdrawFormProps> = () => {
                 prefix="$"
               />
             </div>
-
-            {!isValidWithdrawAmount && (
-              <ErrorBadge
-                level={ErrorLevel.Critical}
-                message={t(pageTranslations.withdrawForm.invalidAmountError)}
-                dataAttribute="withdraw-amount-error"
-              />
-            )}
           </div>
 
           <Select
@@ -154,6 +146,16 @@ export const WithdrawForm: FC<WithdrawFormProps> = () => {
         </SimpleTable>
       </div>
 
+      <div>
+        {!isValidWithdrawAmount && (
+          <ErrorBadge
+            level={ErrorLevel.Critical}
+            message={t(pageTranslations.withdrawForm.invalidAmountError)}
+            dataAttribute="withdraw-amount-error"
+          />
+        )}
+      </div>
+
       <Button
         disabled={submitButtonDisabled}
         text={t(translations.common.buttons.confirm)}

From dbbc38cdaee6b6e2899407af268b23eb4c3e7ff8 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Fri, 9 Aug 2024 18:01:26 +0300
Subject: [PATCH 016/116] borrow form modal

---
 .../BorrowAssetAction/BorrowAssetAction.tsx   |  27 ++-
 .../components/BorrowModal/BorrowForm.tsx     | 219 ++++++++++++++++++
 .../BorrowModal/BorrowForm.utils.ts           |  14 ++
 .../BorrowModal/BorrowModalContainer.tsx      |  30 +++
 .../frontend/src/locales/en/translations.json |   9 +-
 5 files changed, 295 insertions(+), 4 deletions(-)
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.utils.ts
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowModalContainer.tsx

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
index d3258355c..10e3e5229 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback, useState } from 'react';
 
 import { t } from 'i18next';
 
@@ -6,6 +6,7 @@ import { Button, ButtonStyle } from '@sovryn/ui';
 
 import { translations } from '../../../../../../../locales/i18n';
 import { BorrowPoolDetails } from '../../BorrowAssetsList.types';
+import { BorrowModalContainer } from '../BorrowModal/BorrowModalContainer';
 
 const pageTranslations = translations.aavePage;
 
@@ -14,15 +15,35 @@ type BorrowAssetActionProps = {
 };
 
 export const BorrowAssetAction: FC<BorrowAssetActionProps> = () => {
+  const [isBorrowModalOpen, setIsBorrowModalOpen] = useState<boolean>(false);
+
+  const handleBorrowClick = useCallback(() => {
+    setIsBorrowModalOpen(true);
+  }, []);
+
+  const handleBorrowClose = useCallback(() => {
+    setIsBorrowModalOpen(false);
+  }, []);
+
   return (
     <div className="flex items-center justify-center lg:justify-end space-x-2">
-      {/* TODO: these should be modal triggers */}
-      <Button className="flex-grow" text={t(pageTranslations.common.borrow)} />
+      <Button
+        className="flex-grow"
+        text={t(pageTranslations.common.borrow)}
+        onClick={handleBorrowClick}
+      />
+
+      {/* TODO: details link */}
       <Button
         className="flex-grow"
         text={t(pageTranslations.common.details)}
         style={ButtonStyle.secondary}
       />
+
+      <BorrowModalContainer
+        handleCloseModal={handleBorrowClose}
+        isOpen={isBorrowModalOpen}
+      />
     </div>
   );
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
new file mode 100644
index 000000000..9a78636ca
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
@@ -0,0 +1,219 @@
+import React, { FC, useCallback, useMemo, useState } from 'react';
+
+import { t } from 'i18next';
+
+import {
+  AmountInput,
+  Button,
+  Checkbox,
+  ErrorBadge,
+  ErrorLevel,
+  HealthBar,
+  Link,
+  Paragraph,
+  ParagraphSize,
+  Select,
+  SimpleTable,
+  SimpleTableRow,
+} from '@sovryn/ui';
+import { Decimal } from '@sovryn/utils';
+
+import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
+import { AssetRenderer } from '../../../../../../2_molecules/AssetRenderer/AssetRenderer';
+import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
+import { translations } from '../../../../../../../locales/i18n';
+import { getCollateralRatioThresholds } from './BorrowForm.utils';
+
+const pageTranslations = translations.aavePage;
+
+type BorrowFormProps = {
+  onSuccess: () => unknown;
+};
+
+export const BorrowForm: FC<BorrowFormProps> = () => {
+  const assetPrice = 3258.47; // TODO: this is mocked data. Replace with proper hook
+  const totalBorrow = Decimal.from(10); // TODO: this is mocked data. Replace with proper hook
+  const collateralToLoanRate = Decimal.from(10); // TODO: this is mocked data. Replace with proper hook
+  const collateralSize = Decimal.from(10); // TODO: this is mockd data. Replace with proper hook
+  const borrowableAssets = useMemo(() => ['BTC', 'SOV'], []); // TODO: this is mocked data. Replace with proper hook
+  const [maximumBorrowAmount] = useState<Decimal>(Decimal.from(10)); // TODO: this is mocked data. Replace with proper hook
+  const [borrowAsset, setBorrowAsset] = useState<string>(borrowableAssets[0]);
+  const [borrowAmount, setBorrowAmount, borrowSize] = useDecimalAmountInput('');
+  const [acknowledge, setAcknowledge] = useState<boolean>(false);
+
+  const onBorrowAssetChange = useCallback(v => {
+    setBorrowAsset(v);
+  }, []);
+
+  const borrowableAssetsOptions = useMemo(
+    () =>
+      borrowableAssets.map(token => ({
+        value: token,
+        label: (
+          <AssetRenderer
+            showAssetLogo
+            asset={token}
+            assetClassName="font-medium"
+          />
+        ),
+      })),
+    [borrowableAssets],
+  );
+
+  const isValidBorrowAmount = useMemo(
+    () => (borrowSize.gt(0) ? borrowSize.lte(maximumBorrowAmount) : true),
+    [borrowSize, maximumBorrowAmount],
+  );
+
+  const remainingSupply = useMemo(
+    () => maximumBorrowAmount.sub(borrowSize),
+    [borrowSize, maximumBorrowAmount],
+  );
+
+  const collateralRatioThresholds = useMemo(
+    () => getCollateralRatioThresholds(),
+    [],
+  );
+
+  const collateralRatio = useMemo(() => {
+    if ([collateralSize, totalBorrow, borrowSize].some(v => v.isZero())) {
+      return Decimal.ZERO;
+    }
+
+    return collateralSize.mul(collateralToLoanRate).div(totalBorrow).mul(100);
+  }, [collateralSize, totalBorrow, borrowSize, collateralToLoanRate]);
+
+  const submitButtonDisabled = useMemo(
+    () => !isValidBorrowAmount || borrowSize.lte(0) || !acknowledge,
+    [isValidBorrowAmount, borrowSize, acknowledge],
+  );
+
+  return (
+    <form className="flex flex-col gap-6">
+      <div className="space-y-3">
+        <div className="flex justify-between items-end">
+          <Paragraph size={ParagraphSize.base} className="font-medium">
+            {t(translations.aavePage.common.borrow)}
+          </Paragraph>
+
+          <span className="text-xs underline">
+            (Max{' '}
+            <AmountRenderer
+              value={maximumBorrowAmount}
+              suffix={borrowAsset}
+              prefix="~"
+            />
+            )
+          </span>
+        </div>
+
+        <div>
+          <div className="flex space-x-3">
+            <div className="text-right flex-grow space-y-1">
+              <AmountInput
+                label={t(translations.common.amount)}
+                value={borrowAmount}
+                onChangeText={setBorrowAmount}
+                placeholder="0"
+                invalid={!isValidBorrowAmount}
+              />
+              <div className=" pr-4">
+                <AmountRenderer
+                  className="text-gray-40"
+                  value={0} // TODO: usd equivalent
+                  prefix="$"
+                />
+              </div>
+            </div>
+
+            <Select
+              value={borrowAsset}
+              onChange={onBorrowAssetChange}
+              options={borrowableAssetsOptions}
+              labelRenderer={({ value }) => (
+                <AssetRenderer
+                  dataAttribute="borrow-asset-asset"
+                  showAssetLogo
+                  asset={value}
+                />
+              )}
+              className="min-w-[6.7rem]"
+              menuClassName="max-h-[10rem] sm:max-h-[20rem]"
+              dataAttribute="borrow-asset-select"
+            />
+          </div>
+        </div>
+        <div>
+          {!isValidBorrowAmount && (
+            <ErrorBadge
+              level={ErrorLevel.Critical}
+              message={t(pageTranslations.borrowForm.invalidAmountError)}
+              dataAttribute="borrow-amount-error"
+            />
+          )}
+        </div>
+      </div>
+
+      <SimpleTable>
+        <SimpleTableRow
+          label={t(translations.aavePage.borrowForm.borrowApr)}
+          value={
+            <AmountRenderer
+              value={remainingSupply.toNumber()}
+              suffix={borrowAsset}
+            />
+          }
+        />
+      </SimpleTable>
+
+      <div>
+        <div className="flex flex-row justify-between items-center mt-6 mb-3">
+          <div className="flex flex-row justify-start items-center gap-2">
+            <span>{t(translations.aavePage.borrowForm.collateralRatio)}</span>
+          </div>
+          <div className="">
+            <AmountRenderer value={collateralRatio.toString()} suffix="%" />
+          </div>
+        </div>
+
+        <HealthBar
+          start={collateralRatioThresholds.START}
+          middleStart={collateralRatioThresholds.MIDDLE_START}
+          middleEnd={collateralRatioThresholds.MIDDLE_END}
+          end={collateralRatioThresholds.END}
+          value={collateralRatio.toNumber()}
+        />
+      </div>
+
+      <SimpleTable>
+        <SimpleTableRow
+          label={t(translations.aavePage.borrowForm.liquidationPrice)}
+          value={t(translations.aavePage.common['n/a'])}
+        />
+        <SimpleTableRow
+          label={t(translations.aavePage.borrowForm.tokenPrice, {
+            token: borrowAsset,
+          })}
+          value={<AmountRenderer value={assetPrice} prefix={'$'} />}
+        />
+      </SimpleTable>
+
+      <Checkbox
+        checked={acknowledge}
+        onChangeValue={setAcknowledge}
+        label={
+          <span>
+            {t(translations.aavePage.borrowForm.acknowledge)}{' '}
+            <Link text="Learn more" href="#learn-more" />{' '}
+            {/* TODO: Add proper learn more href */}
+          </span>
+        }
+      />
+
+      <Button
+        disabled={submitButtonDisabled}
+        text={t(translations.common.buttons.confirm)}
+      />
+    </form>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.utils.ts b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.utils.ts
new file mode 100644
index 000000000..f55b40d9e
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.utils.ts
@@ -0,0 +1,14 @@
+import { MINIMUM_COLLATERAL_RATIO_LENDING_POOLS } from '../../../../../../../constants/lending';
+
+export const getCollateralRatioThresholds = () => {
+  // TODO: recheck this and adjust based on aave
+  const minimumCollateralRatio =
+    MINIMUM_COLLATERAL_RATIO_LENDING_POOLS.mul(100);
+
+  return {
+    START: minimumCollateralRatio.mul(0.9).toNumber(),
+    MIDDLE_START: minimumCollateralRatio.toNumber() - 0.1,
+    MIDDLE_END: minimumCollateralRatio.mul(1.2).toNumber(),
+    END: minimumCollateralRatio.mul(1.6).toNumber(),
+  };
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowModalContainer.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowModalContainer.tsx
new file mode 100644
index 000000000..19427f36e
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowModalContainer.tsx
@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+
+import { t } from 'i18next';
+
+import { Dialog, DialogBody, DialogHeader } from '@sovryn/ui';
+
+import { translations } from '../../../../../../../locales/i18n';
+import { BorrowForm } from './BorrowForm';
+
+type BorrowModalContainerProps = {
+  isOpen: boolean;
+  handleCloseModal: () => unknown;
+};
+
+export const BorrowModalContainer: FC<BorrowModalContainerProps> = ({
+  isOpen,
+  handleCloseModal,
+}) => {
+  return (
+    <Dialog disableFocusTrap isOpen={isOpen}>
+      <DialogHeader
+        title={t(translations.aavePage.common.borrow)}
+        onClose={handleCloseModal}
+      />
+      <DialogBody className="flex flex-col gap-6">
+        <BorrowForm onSuccess={handleCloseModal} />
+      </DialogBody>
+    </Dialog>
+  );
+};
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index 191b8926f..56f41dee2 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -836,7 +836,14 @@
             "walletBalance": "Wallet balance",
             "canBeCollateral": "Can be collateral"
         },
-        "assetCard": {}
+        "borrowForm": {
+            "borrowApr": "Borrow APR",
+            "collateralRatio": "Collateral ratio",
+            "liquidationPrice":"Liquidation price",
+            "acknowledge": "I understand that my collateral may be liquidated or used to pay rollover fees if applicable.",
+            "invalidAmountError": "Invalid amount",
+            "tokenPrice": "{{token}} price"
+        }
     },
     "bitocracyPage": {
         "meta": {

From c59d8f8d0b46aec6b9dc87c17c4452f074d47e63 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Fri, 9 Aug 2024 18:09:40 +0300
Subject: [PATCH 017/116] pr comments

---
 .../components/WithdrawModal/WithdrawForm.tsx | 45 ++++++++++---------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
index 229db8452..939414126 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
@@ -69,6 +69,17 @@ export const WithdrawForm: FC<WithdrawFormProps> = () => {
     [isValidWithdrawAmount, withdrawSize],
   );
 
+  const withdrawLabelRenderer = useCallback(
+    ({ value }) => (
+      <AssetRenderer
+        dataAttribute="withdraw-asset-select"
+        showAssetLogo
+        asset={value}
+      />
+    ),
+    [],
+  );
+
   return (
     <form className="flex flex-col gap-6">
       <div className="space-y-3">
@@ -118,13 +129,7 @@ export const WithdrawForm: FC<WithdrawFormProps> = () => {
             value={withdrawAsset}
             onChange={onWithdrawAssetChange}
             options={withdrawableAssetsOptions}
-            labelRenderer={({ value }) => (
-              <AssetRenderer
-                dataAttribute="withdraw-asset-asset"
-                showAssetLogo
-                asset={value}
-              />
-            )}
+            labelRenderer={withdrawLabelRenderer}
             className="min-w-[6.7rem]"
             menuClassName="max-h-[10rem] sm:max-h-[20rem]"
             dataAttribute="withdraw-asset-select"
@@ -132,20 +137,6 @@ export const WithdrawForm: FC<WithdrawFormProps> = () => {
         </div>
       </div>
 
-      <div>
-        <SimpleTable>
-          <SimpleTableRow
-            label={t(translations.aavePage.withdrawForm.remainingSupply)}
-            value={
-              <AmountRenderer
-                value={remainingSupply.toNumber()}
-                suffix={withdrawAsset}
-              />
-            }
-          />
-        </SimpleTable>
-      </div>
-
       <div>
         {!isValidWithdrawAmount && (
           <ErrorBadge
@@ -156,6 +147,18 @@ export const WithdrawForm: FC<WithdrawFormProps> = () => {
         )}
       </div>
 
+      <SimpleTable>
+        <SimpleTableRow
+          label={t(translations.aavePage.withdrawForm.remainingSupply)}
+          value={
+            <AmountRenderer
+              value={remainingSupply.toNumber()}
+              suffix={withdrawAsset}
+            />
+          }
+        />
+      </SimpleTable>
+
       <Button
         disabled={submitButtonDisabled}
         text={t(translations.common.buttons.confirm)}

From 2a84650140e61b31a34b325afed8eea92502b38e Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Fri, 9 Aug 2024 18:12:05 +0300
Subject: [PATCH 018/116] pr comments

---
 apps/frontend/src/app/5_pages/AavePage/AaavePage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/AaavePage.tsx b/apps/frontend/src/app/5_pages/AavePage/AaavePage.tsx
index 3298ff574..e6b10b8f1 100644
--- a/apps/frontend/src/app/5_pages/AavePage/AaavePage.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/AaavePage.tsx
@@ -59,7 +59,7 @@ const AavePage: FC = () => {
         <div className="grid grid-cols-1 lg:grid-cols-2 lg:gap-5">
           <div
             className={classNames(
-              activeLiquidityTab !== LiquidityTabs.LEND ? 'hidden' : '',
+              { hidden: activeLiquidityTab !== LiquidityTabs.LEND },
               'lg:block space-y-4',
             )}
           >
@@ -70,7 +70,7 @@ const AavePage: FC = () => {
           {/* Borrowing column */}
           <div
             className={classNames(
-              activeLiquidityTab !== LiquidityTabs.BORROW && 'hidden',
+              { hidden: activeLiquidityTab !== LiquidityTabs.BORROW },
               'lg:block space-y-4',
             )}
           >

From d625ee6dc665f26d4f032b70e20bd3bd70d6333c Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Fri, 9 Aug 2024 18:15:29 +0300
Subject: [PATCH 019/116] fix typo

---
 .../src/app/5_pages/AavePage/{AaavePage.tsx => AavePage.tsx}    | 0
 apps/frontend/src/router.tsx                                    | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename apps/frontend/src/app/5_pages/AavePage/{AaavePage.tsx => AavePage.tsx} (100%)

diff --git a/apps/frontend/src/app/5_pages/AavePage/AaavePage.tsx b/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
similarity index 100%
rename from apps/frontend/src/app/5_pages/AavePage/AaavePage.tsx
rename to apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
diff --git a/apps/frontend/src/router.tsx b/apps/frontend/src/router.tsx
index af3fb5624..bd5144a65 100644
--- a/apps/frontend/src/router.tsx
+++ b/apps/frontend/src/router.tsx
@@ -8,7 +8,7 @@ import {
 
 import { PageContainer } from './app/4_templates';
 import { EmailVerificationStateContainer } from './app/4_templates/EmailVerificationStateContainer/EmailVerificationStateContainer';
-import AavePage from './app/5_pages/AavePage/AaavePage';
+import AavePage from './app/5_pages/AavePage/AavePage';
 import { earnPageLoader } from './app/5_pages/EarnPage/loader';
 import { EmailDuplicateVerifiedPage } from './app/5_pages/EmailDuplicateVerifiedPage/EmailDuplicateVerifiedPage';
 import { EmailErrorPage } from './app/5_pages/EmailErrorPage/EmailErrorPage';

From 292ef14539f3d79a2d62ca16feddfc422ad23e60 Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Fri, 9 Aug 2024 13:16:20 -0300
Subject: [PATCH 020/116] Update
 apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx

Co-authored-by: Juan Dahl <juandahl@users.noreply.github.com>
---
 .../components/LendPositionAction/LendPositionAction.tsx  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
index b7aa5577f..983a76d37 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
@@ -16,13 +16,13 @@ export const LendPositionAction: FC<LendPositionActionProps> = () => {
   const [isWithdrawModalOpen, setIsWithdrawModalOpen] =
     useState<boolean>(false);
 
-  const handleWithdrawClick = useCallback(() => {
+  const handleWithdrawClick = () => {
     setIsWithdrawModalOpen(true);
-  }, []);
+  };
 
-  const handleWithdrawClose = useCallback(() => {
+  const handleWithdrawClose = () => {
     setIsWithdrawModalOpen(false);
-  }, []);
+  };
 
   return (
     <div className="flex items-center justify-center lg:justify-end space-x-2">

From 87b4049dd4169b553a00eddfb0a3155719d7f342 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Fri, 9 Aug 2024 21:04:09 +0300
Subject: [PATCH 021/116] repay modals

---
 .../AmountTransition/AmountTransition.tsx     |  30 +++
 .../AssetAmountInput/AssetAmountInput.tsx     |  88 ++++++++
 .../BorrowPositionAction.tsx                  |  20 +-
 .../RepayModal/RepayModalContainer.tsx        |  77 +++++++
 .../RepayModal/RepayWithCollateralForm.tsx    | 189 ++++++++++++++++++
 .../RepayModal/RepayWithWalletBalanceForm.tsx | 132 ++++++++++++
 .../CollateralRatioHealthBar.tsx              |  51 +++++
 .../CollateralRatioHealthBar.utils.tsx        |  14 ++
 .../frontend/src/locales/en/translations.json |  17 +-
 9 files changed, 615 insertions(+), 3 deletions(-)
 create mode 100644 apps/frontend/src/app/2_molecules/AmountTransition/AmountTransition.tsx
 create mode 100644 apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithCollateralForm.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.utils.tsx

diff --git a/apps/frontend/src/app/2_molecules/AmountTransition/AmountTransition.tsx b/apps/frontend/src/app/2_molecules/AmountTransition/AmountTransition.tsx
new file mode 100644
index 000000000..fafeffc2b
--- /dev/null
+++ b/apps/frontend/src/app/2_molecules/AmountTransition/AmountTransition.tsx
@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+
+import classNames from 'classnames';
+
+import { Icon, IconNames } from '@sovryn/ui';
+
+import {
+  AmountRenderer,
+  AmountRendererProps,
+} from '../AmountRenderer/AmountRenderer';
+
+type AmountTransitionProps = {
+  className?: string;
+  to: AmountRendererProps;
+  from: AmountRendererProps;
+};
+
+export const AmountTransition: FC<AmountTransitionProps> = ({
+  from,
+  to,
+  className,
+}) => {
+  return (
+    <div className={classNames('flex items-center gap-1', className)}>
+      <AmountRenderer {...from} />
+      <Icon icon={IconNames.ARROW_RIGHT} className="h-2 flex-shrink-0" />
+      <AmountRenderer {...to} />
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx b/apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx
new file mode 100644
index 000000000..3fe5d1aa1
--- /dev/null
+++ b/apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx
@@ -0,0 +1,88 @@
+import React, { FC, useCallback } from 'react';
+
+import { AmountInput, Paragraph, Select, SelectOption } from '@sovryn/ui';
+import { Decimalish } from '@sovryn/utils';
+
+import { AmountRenderer } from '../AmountRenderer/AmountRenderer';
+import { AssetRenderer } from '../AssetRenderer/AssetRenderer';
+
+type AssetAmountInputProps = {
+  label?: string;
+  maxAmount?: Decimalish;
+  invalid?: boolean;
+  amountLabel?: string;
+  amountValue?: string | number;
+  onAmountChange?: (value: string) => unknown;
+  assetValue: string;
+  assetOptions: SelectOption<string>[];
+  onAssetChange: (asset: string) => unknown;
+};
+
+export const AssetAmountInput: FC<AssetAmountInputProps> = ({
+  label,
+  maxAmount,
+  amountLabel,
+  amountValue,
+  onAmountChange,
+  invalid,
+  assetValue,
+  assetOptions,
+  onAssetChange,
+}) => {
+  const assetOptionRenderer = useCallback(
+    ({ value }) => (
+      <AssetRenderer
+        dataAttribute="borrow-asset-asset"
+        showAssetLogo
+        asset={value}
+      />
+    ),
+    [],
+  );
+
+  return (
+    <div>
+      {label && (
+        <Paragraph className="mb-1 text-gray-30 font-medium">{label}</Paragraph>
+      )}
+
+      <div className="relative">
+        {maxAmount !== undefined && (
+          <span className="text-xs underline absolute right-0 -top-3 -translate-y-1/2">
+            (Max{' '}
+            <AmountRenderer value={maxAmount} suffix={assetValue} prefix="~" />)
+          </span>
+        )}
+
+        <div className="flex space-x-3">
+          <div className="text-right flex-grow space-y-1">
+            <AmountInput
+              label={amountLabel}
+              value={amountValue}
+              onChangeText={onAmountChange}
+              placeholder="0"
+              invalid={invalid}
+            />
+            <div className="pr-4">
+              <AmountRenderer
+                className="text-gray-40"
+                value={0} // TODO: usd equivalent
+                prefix="$"
+              />
+            </div>
+          </div>
+
+          <Select
+            value={assetValue}
+            onChange={onAssetChange}
+            options={assetOptions}
+            labelRenderer={assetOptionRenderer}
+            className="min-w-[6.7rem]"
+            menuClassName="max-h-[10rem] sm:max-h-[20rem]"
+            dataAttribute="borrow-asset-select"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionAction/BorrowPositionAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionAction/BorrowPositionAction.tsx
index ff177e904..598c50bc4 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionAction/BorrowPositionAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionAction/BorrowPositionAction.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback, useState } from 'react';
 
 import { t } from 'i18next';
 
@@ -6,19 +6,35 @@ import { Button, ButtonStyle } from '@sovryn/ui';
 
 import { translations } from '../../../../../../../locales/i18n';
 import { BorrowPosition } from '../../BorrowPositionsList.types';
+import { RepayModalContainer } from '../RepayModal/RepayModalContainer';
 
 type BorrowPositionActionProps = {
   position: BorrowPosition;
 };
 
 export const BorrowPositionAction: FC<BorrowPositionActionProps> = () => {
+  const [isRepayModalOpen, setIsRepayModalOpen] = useState<boolean>(false);
+
+  const handleRepayClick = useCallback(() => {
+    setIsRepayModalOpen(true);
+  }, []);
+
+  const handleRepayClose = useCallback(() => {
+    setIsRepayModalOpen(false);
+  }, []);
+
   return (
     <div className="flex items-center justify-center lg:justify-end space-x-2">
-      {/* TODO: these should be modal triggers */}
       <Button
         style={ButtonStyle.secondary}
         className="flex-grow"
         text={t(translations.aavePage.borrowPositionsList.repay)}
+        onClick={handleRepayClick}
+      />
+
+      <RepayModalContainer
+        handleCloseModal={handleRepayClose}
+        isOpen={isRepayModalOpen}
       />
     </div>
   );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx
new file mode 100644
index 000000000..9024a5913
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx
@@ -0,0 +1,77 @@
+import React, { FC, useState } from 'react';
+
+import { t } from 'i18next';
+
+import {
+  Dialog,
+  DialogBody,
+  DialogHeader,
+  Paragraph,
+  ParagraphSize,
+  Tabs,
+  TabType,
+} from '@sovryn/ui';
+
+import { translations } from '../../../../../../../locales/i18n';
+import { RepayWithCollateralForm } from './RepayWithCollateralForm';
+import { RepayWithWalletBalanceForm } from './RepayWithWalletBalanceForm';
+
+type RepayModalContainerProps = {
+  isOpen: boolean;
+  handleCloseModal: () => unknown;
+};
+
+enum PaymentTabs {
+  BALANCE = 0,
+  COLLATERAL,
+}
+
+export const RepayModalContainer: FC<RepayModalContainerProps> = ({
+  isOpen,
+  handleCloseModal,
+}) => {
+  const [activeTab, setActiveTab] = useState<PaymentTabs>(PaymentTabs.BALANCE);
+
+  return (
+    <Dialog disableFocusTrap isOpen={isOpen}>
+      <DialogHeader
+        title={t(translations.aavePage.repayModal.title)}
+        onClose={handleCloseModal}
+      />
+      <DialogBody className="space-y-3">
+        <Paragraph
+          size={ParagraphSize.small}
+          className="font-medium text-gray-30"
+        >
+          {t(translations.aavePage.repayModal.repayWith)}
+        </Paragraph>
+
+        <Tabs
+          className="flex-grow-0"
+          contentClassName="p-4"
+          index={activeTab}
+          onChange={setActiveTab}
+          items={[
+            {
+              activeClassName: 'text-primary-20',
+              dataAttribute: 'wallet-balance',
+              label: t(translations.aavePage.repayModal.walletBalance),
+            },
+            {
+              activeClassName: 'text-primary-20',
+              dataAttribute: 'collateral',
+              label: t(translations.aavePage.common.collateral),
+            },
+          ]}
+          type={TabType.secondary}
+        />
+
+        {activeTab === PaymentTabs.BALANCE ? (
+          <RepayWithWalletBalanceForm onSuccess={handleCloseModal} />
+        ) : (
+          <RepayWithCollateralForm onSuccess={handleCloseModal} />
+        )}
+      </DialogBody>
+    </Dialog>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithCollateralForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithCollateralForm.tsx
new file mode 100644
index 000000000..ab81bb78d
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithCollateralForm.tsx
@@ -0,0 +1,189 @@
+import React, { FC, useMemo, useState } from 'react';
+
+import { t } from 'i18next';
+
+import {
+  Button,
+  ErrorBadge,
+  ErrorLevel,
+  HelperButton,
+  SimpleTable,
+  SimpleTableRow,
+} from '@sovryn/ui';
+import { Decimal } from '@sovryn/utils';
+
+import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
+import { AmountTransition } from '../../../../../../2_molecules/AmountTransition/AmountTransition';
+import { AssetAmountInput } from '../../../../../../2_molecules/AssetAmountInput/AssetAmountInput';
+import { AssetRenderer } from '../../../../../../2_molecules/AssetRenderer/AssetRenderer';
+import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
+import { translations } from '../../../../../../../locales/i18n';
+import { CollateralRatioHealthBar } from '../../../CollateralRatioHealthBar/CollateralRatioHealthBar';
+
+const pageTranslations = translations.aavePage;
+
+type RepayWithCollateralFormProps = {
+  onSuccess: () => unknown;
+};
+
+export const RepayWithCollateralForm: FC<RepayWithCollateralFormProps> = () => {
+  const assetPrice = 3258.47; // TODO: this is mocked data. Replace with proper hook
+  const totalBorrowed = Decimal.from(10); // TODO: this is mocked data. Replace with proper hook
+  const collateralToLoanRate = Decimal.from(10); // TODO: this is mocked data. Replace with proper hook
+  const collateralSize = Decimal.from(10); // TODO: this is mockd data. Replace with proper hook
+  const assets = useMemo(() => ['BTC', 'SOV'], []); // TODO: this is mocked data. Replace with proper hook
+  const [maximumRepayAmount] = useState(Decimal.from(10)); // TODO: this is mocked data. Replace with proper hook
+  const [maximumRepayWithAmount] = useState(Decimal.from(10)); // TODO: this is mocked data. Replace with proper hook
+  const [repayAsset, setRepayAsset] = useState<string>(assets[0]);
+  const [repayAmount, setRepayAmount, repaySize] = useDecimalAmountInput('');
+  const [repayWithAsset, setRepayWithAsset] = useState<string>(assets[0]);
+  const [repayWithAmount, setRepayWithAmount, repayWithSize] =
+    useDecimalAmountInput('');
+
+  const repayAssetsOptions = useMemo(
+    () =>
+      assets.map(token => ({
+        value: token,
+        label: (
+          <AssetRenderer
+            showAssetLogo
+            asset={token}
+            assetClassName="font-medium"
+          />
+        ),
+      })),
+    [assets],
+  );
+
+  const remainingDebt = useMemo(
+    () => maximumRepayAmount.sub(repaySize),
+    [repaySize, maximumRepayAmount],
+  );
+
+  const collateralRatio = useMemo(() => {
+    if ([collateralSize, totalBorrowed, repaySize].some(v => v.isZero())) {
+      return Decimal.from(0);
+    }
+
+    return collateralSize.mul(collateralToLoanRate).div(totalBorrowed).mul(100);
+  }, [collateralSize, totalBorrowed, repaySize, collateralToLoanRate]);
+
+  // TODO: add more validations
+  const isValidRepayAmount = useMemo(
+    () => (repaySize.gt(0) ? repaySize.lte(maximumRepayAmount) : true),
+    [repaySize, maximumRepayAmount],
+  );
+
+  // TODO: add more validations
+  const isValidRepayWithAmount = useMemo(
+    () =>
+      repayWithSize.gt(0) ? repayWithSize.lte(maximumRepayWithAmount) : true,
+    [repayWithSize, maximumRepayWithAmount],
+  );
+
+  // TODO: add more validations
+  const submitButtonDisabled = useMemo(
+    () =>
+      !isValidRepayAmount ||
+      repaySize.lte(0) ||
+      !isValidRepayWithAmount ||
+      repayWithSize.lte(0),
+    [isValidRepayAmount, repaySize, isValidRepayWithAmount, repayWithSize],
+  );
+
+  return (
+    <form className="flex flex-col gap-6">
+      <div className="flex flex-col gap-3">
+        <AssetAmountInput
+          label={t(translations.aavePage.repayModal.expectedAmountToRepay)}
+          maxAmount={maximumRepayAmount}
+          amountLabel={t(translations.common.amount)}
+          amountValue={repayAmount}
+          onAmountChange={setRepayAmount}
+          invalid={!isValidRepayAmount}
+          assetValue={repayAsset}
+          onAssetChange={setRepayAsset}
+          assetOptions={repayAssetsOptions}
+        />
+
+        {!isValidRepayAmount && (
+          <ErrorBadge
+            level={ErrorLevel.Critical}
+            message={t(pageTranslations.repayModal.invalidAmountError)}
+            dataAttribute="repay-amount-error"
+          />
+        )}
+      </div>
+
+      <div className="flex flex-col gap-3">
+        <AssetAmountInput
+          label={t(translations.aavePage.repayModal.collateralToRepayWith)}
+          maxAmount={maximumRepayWithAmount}
+          amountLabel={t(translations.common.amount)}
+          amountValue={repayWithAmount}
+          onAmountChange={setRepayWithAmount}
+          invalid={!isValidRepayWithAmount}
+          assetValue={repayWithAsset}
+          onAssetChange={setRepayWithAsset}
+          assetOptions={repayAssetsOptions}
+        />
+
+        {!isValidRepayWithAmount && (
+          <ErrorBadge
+            level={ErrorLevel.Critical}
+            message={t(pageTranslations.repayModal.invalidAmountError)}
+            dataAttribute="repay-with-amount-error"
+          />
+        )}
+      </div>
+
+      <CollateralRatioHealthBar ratio={collateralRatio} />
+
+      <SimpleTable>
+        <SimpleTableRow
+          label={t(translations.aavePage.repayModal.remainingDebt)}
+          value={
+            <AmountTransition
+              className="justify-end"
+              from={{ value: remainingDebt, suffix: '%' }}
+              to={{ value: 0, suffix: '%', className: 'text-primary-10' }}
+            />
+          }
+        />
+        <SimpleTableRow
+          label={t(translations.aavePage.repayModal.newCollateralBalance)}
+          value={
+            <div className="space-y-1">
+              <AmountTransition
+                className="justify-end"
+                from={{ value: 10, suffix: 'USDT' }}
+                to={{ value: 10, suffix: 'USDT' }}
+              />
+              <AmountTransition
+                className="justify-end text-gray-40"
+                from={{ value: 10, prefix: '$' }}
+                to={{ value: 10, prefix: '$' }}
+              />
+            </div>
+          }
+        />
+        <SimpleTableRow
+          label={
+            <div className="flex space-x-1">
+              <span>{t(translations.aavePage.repayModal.priceImpact)}</span>{' '}
+              <HelperButton
+                content={t(translations.aavePage.repayModal.priceImpactInfo)}
+              />
+            </div>
+          }
+          value={<AmountRenderer value={assetPrice} prefix={'$'} />}
+        />
+      </SimpleTable>
+
+      <Button
+        disabled={submitButtonDisabled}
+        text={t(translations.common.buttons.confirm)}
+      />
+    </form>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx
new file mode 100644
index 000000000..cdb366b3f
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx
@@ -0,0 +1,132 @@
+import React, { FC, useMemo, useState } from 'react';
+
+import { t } from 'i18next';
+
+import {
+  Button,
+  ErrorBadge,
+  ErrorLevel,
+  SimpleTable,
+  SimpleTableRow,
+} from '@sovryn/ui';
+import { Decimal } from '@sovryn/utils';
+
+import { AmountTransition } from '../../../../../../2_molecules/AmountTransition/AmountTransition';
+import { AssetAmountInput } from '../../../../../../2_molecules/AssetAmountInput/AssetAmountInput';
+import { AssetRenderer } from '../../../../../../2_molecules/AssetRenderer/AssetRenderer';
+import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
+import { translations } from '../../../../../../../locales/i18n';
+import { CollateralRatioHealthBar } from '../../../CollateralRatioHealthBar/CollateralRatioHealthBar';
+
+const pageTranslations = translations.aavePage;
+
+type RepayWithWalletBalanceFormProps = {
+  onSuccess: () => unknown;
+};
+
+export const RepayWithWalletBalanceForm: FC<
+  RepayWithWalletBalanceFormProps
+> = () => {
+  const totalBorrowed = Decimal.from(10); // TODO: this is mocked data. Replace with proper hook
+  const collateralToLoanRate = Decimal.from(10); // TODO: this is mocked data. Replace with proper hook
+  const collateralSize = Decimal.from(10); // TODO: this is mockd data. Replace with proper hook
+  const assetsToRepay = useMemo(() => ['BTC', 'SOV'], []); // TODO: this is mocked data. Replace with proper hook
+  const [maximumRepayAmount] = useState(Decimal.from(10)); // TODO: this is mocked data. Replace with proper hook
+  const [repayAsset, setRepayAsset] = useState<string>(assetsToRepay[0]);
+  const [repayAmount, setRepayAmount, repaySize] = useDecimalAmountInput('');
+
+  const repayAssetsOptions = useMemo(
+    () =>
+      assetsToRepay.map(token => ({
+        value: token,
+        label: (
+          <AssetRenderer
+            showAssetLogo
+            asset={token}
+            assetClassName="font-medium"
+          />
+        ),
+      })),
+    [assetsToRepay],
+  );
+
+  const isValidRepayAmount = useMemo(
+    () => (repaySize.gt(0) ? repaySize.lte(maximumRepayAmount) : true),
+    [repaySize, maximumRepayAmount],
+  );
+
+  const collateralRatio = useMemo(() => {
+    if ([collateralSize, totalBorrowed, repaySize].some(v => v.isZero())) {
+      return Decimal.from(0);
+    }
+
+    return collateralSize.mul(collateralToLoanRate).div(totalBorrowed).mul(100);
+  }, [collateralSize, totalBorrowed, repaySize, collateralToLoanRate]);
+
+  const submitButtonDisabled = useMemo(
+    () => !isValidRepayAmount || repaySize.lte(0),
+    [isValidRepayAmount, repaySize],
+  );
+
+  return (
+    <form className="flex flex-col gap-6 relative">
+      <div className="space-y-3">
+        <AssetAmountInput
+          maxAmount={maximumRepayAmount}
+          amountLabel={t(translations.common.amount)}
+          amountValue={repayAmount}
+          onAmountChange={setRepayAmount}
+          invalid={!isValidRepayAmount}
+          assetValue={repayAsset}
+          onAssetChange={setRepayAsset}
+          assetOptions={repayAssetsOptions}
+        />
+
+        {!isValidRepayAmount && (
+          <ErrorBadge
+            level={ErrorLevel.Critical}
+            message={t(pageTranslations.repayModal.invalidAmountError)}
+            dataAttribute="repay-amount-error"
+          />
+        )}
+      </div>
+
+      <CollateralRatioHealthBar ratio={collateralRatio} />
+
+      <SimpleTable>
+        <SimpleTableRow
+          label={t(translations.aavePage.repayModal.remainingDebt)}
+          value={
+            <AmountTransition
+              className="justify-end"
+              from={{ value: 0.002429, suffix: '%' }}
+              to={{ value: 0, suffix: '%', className: 'text-primary-10' }}
+            />
+          }
+        />
+        <SimpleTableRow
+          label={t(translations.aavePage.repayModal.newCollateralBalance)}
+          value={
+            <div className="space-y-1">
+              <AmountTransition
+                className="justify-end"
+                from={{ value: 10, suffix: 'USDT' }}
+                to={{ value: 10, suffix: 'USDT' }}
+              />
+              <AmountTransition
+                className="justify-end text-gray-40"
+                from={{ value: 10, prefix: '$' }}
+                to={{ value: 10, prefix: '$' }}
+              />
+            </div>
+          }
+        />
+      </SimpleTable>
+
+      <Button
+        disabled={submitButtonDisabled}
+        text={t(translations.common.buttons.confirm)}
+      />
+    </form>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.tsx b/apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.tsx
new file mode 100644
index 000000000..6510a791e
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.tsx
@@ -0,0 +1,51 @@
+import React, { FC, useMemo } from 'react';
+
+import { t } from 'i18next';
+
+import { HealthBar } from '@sovryn/ui';
+import { Decimal } from '@sovryn/utils';
+
+import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
+import { translations } from '../../../../../locales/i18n';
+import { getCollateralRatioThresholds } from './CollateralRatioHealthBar.utils';
+
+type CollateralRatioHealthBarProps = {
+  ratio: Decimal;
+  thresholds?: {
+    START: number;
+    MIDDLE_START: number;
+    MIDDLE_END: number;
+    END: number;
+  };
+};
+
+export const CollateralRatioHealthBar: FC<CollateralRatioHealthBarProps> = ({
+  ratio,
+  thresholds,
+}) => {
+  const collateralRatioThresholds = useMemo(
+    () => thresholds ?? getCollateralRatioThresholds(),
+    [thresholds],
+  );
+
+  return (
+    <div className="py-3">
+      <div className="flex flex-row justify-between items-center mb-3">
+        <div className="flex flex-row justify-start items-center gap-2">
+          <span>{t(translations.aavePage.common.collateralRatio)}</span>
+        </div>
+        <div className="">
+          <AmountRenderer value={ratio.toString()} suffix="%" />
+        </div>
+      </div>
+
+      <HealthBar
+        start={collateralRatioThresholds.START}
+        middleStart={collateralRatioThresholds.MIDDLE_START}
+        middleEnd={collateralRatioThresholds.MIDDLE_END}
+        end={collateralRatioThresholds.END}
+        value={ratio.toNumber()}
+      />
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.utils.tsx b/apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.utils.tsx
new file mode 100644
index 000000000..43a108391
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.utils.tsx
@@ -0,0 +1,14 @@
+import { MINIMUM_COLLATERAL_RATIO_LENDING_POOLS } from '../../../../../constants/lending';
+
+export const getCollateralRatioThresholds = () => {
+  // TODO: recheck this and adjust based on aave
+  const minimumCollateralRatio =
+    MINIMUM_COLLATERAL_RATIO_LENDING_POOLS.mul(100);
+
+  return {
+    START: minimumCollateralRatio.mul(0.9).toNumber(),
+    MIDDLE_START: minimumCollateralRatio.toNumber() - 0.1,
+    MIDDLE_END: minimumCollateralRatio.mul(1.2).toNumber(),
+    END: minimumCollateralRatio.mul(1.6).toNumber(),
+  };
+};
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index 191b8926f..66f829be1 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -792,6 +792,7 @@
             "connectWallet": "Connect wallet to see the available data",
             "asset": "Asset",
             "collateral": "Collateral",
+            "collateralRatio": "Collateral ratio",
             "balance": "Balance",
             "apy": "APY",
             "apyInfo": "TODO:",
@@ -836,7 +837,21 @@
             "walletBalance": "Wallet balance",
             "canBeCollateral": "Can be collateral"
         },
-        "assetCard": {}
+        "repayModal": {
+            "title": "Repay",
+            "repayWith": "Repay with",
+            "borrowApr": "Borrow APR",
+            "collateralRatio": "Collateral ratio",
+            "remainingDebt": "Remaining debt",
+            "newCollateralBalance": "New collateral balance",
+            "invalidAmountError": "Invalid amount",
+            "tokenPrice": "{{token}} price",
+            "walletBalance":"Wallet balance",
+            "priceImpact": "Price impact",
+            "priceImpactInfo": "Price impact information TODO:",
+            "expectedAmountToRepay": "Expected amount to repay",
+            "collateralToRepayWith": "Collateral to repay with"
+        }
     },
     "bitocracyPage": {
         "meta": {

From 3f436315f4ced4a5c18e39aa19f095486c0fc3f4 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Fri, 9 Aug 2024 22:55:53 +0300
Subject: [PATCH 022/116] lend modal

---
 .../LendAssetAction/LendAssetAction.tsx       | 22 ++++-
 .../components/LendModal/LendForm.tsx         | 99 +++++++++++++++++++
 .../LendModal/LendModalContainer.tsx          | 30 ++++++
 .../frontend/src/locales/en/translations.json | 11 ++-
 4 files changed, 158 insertions(+), 4 deletions(-)
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendModalContainer.tsx

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
index 65282959c..c56dba871 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 
 import { t } from 'i18next';
 
@@ -6,24 +6,42 @@ import { Button, ButtonStyle } from '@sovryn/ui';
 
 import { translations } from '../../../../../../../locales/i18n';
 import { LendPoolDetails } from '../../LendAssetsList.types';
+import { LendModalContainer } from '../LendModal/LendModalContainer';
 
 type LendAssetActionProps = {
   pool: LendPoolDetails;
 };
 
 export const LendAssetAction: FC<LendAssetActionProps> = () => {
+  const [isLendModalOpen, setIsLendModalOpen] = useState<boolean>(false);
+
+  const handleLendClick = () => {
+    setIsLendModalOpen(true);
+  };
+
+  const handleLendClose = () => {
+    setIsLendModalOpen(false);
+  };
+
   return (
     <div className="flex items-center justify-center lg:justify-end space-x-2">
-      {/* TODO: these should be modal triggers */}
       <Button
         className="flex-grow"
         text={t(translations.aavePage.common.lend)}
+        onClick={handleLendClick}
       />
+
+      {/* TODO: Add action for details */}
       <Button
         className="flex-grow"
         text={t(translations.aavePage.common.details)}
         style={ButtonStyle.secondary}
       />
+
+      <LendModalContainer
+        handleCloseModal={handleLendClose}
+        isOpen={isLendModalOpen}
+      />
     </div>
   );
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx
new file mode 100644
index 000000000..34fef11c9
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx
@@ -0,0 +1,99 @@
+import React, { FC, useMemo, useState } from 'react';
+
+import { t } from 'i18next';
+
+import {
+  Button,
+  ErrorBadge,
+  ErrorLevel,
+  SimpleTable,
+  SimpleTableRow,
+} from '@sovryn/ui';
+import { Decimal } from '@sovryn/utils';
+
+import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
+import { AssetAmountInput } from '../../../../../../2_molecules/AssetAmountInput/AssetAmountInput';
+import { AssetRenderer } from '../../../../../../2_molecules/AssetRenderer/AssetRenderer';
+import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
+import { translations } from '../../../../../../../locales/i18n';
+
+const pageTranslations = translations.aavePage;
+
+type LendFormProps = {
+  onSuccess: () => unknown;
+};
+
+export const LendForm: FC<LendFormProps> = () => {
+  const lendApy = 4.01; // TODO: this is mocked data. Replace with proper hook
+  const lendAssets = useMemo(() => ['BTC', 'SOV'], []); // TODO: this is mocked data. Replace with proper hook
+  const [maximumLendAmount] = useState<Decimal>(Decimal.from(10)); // TODO: this is mocked data. Replace with proper hook
+  const [lendAsset, setLendAsset] = useState<string>(lendAssets[0]);
+  const [lendAmount, setLendAmount, lendSize] = useDecimalAmountInput('');
+
+  const lendAssetsOptions = useMemo(
+    () =>
+      lendAssets.map(token => ({
+        value: token,
+        label: (
+          <AssetRenderer
+            showAssetLogo
+            asset={token}
+            assetClassName="font-medium"
+          />
+        ),
+      })),
+    [lendAssets],
+  );
+
+  const isValidLendAmount = useMemo(
+    () => (lendSize.gt(0) ? lendSize.lte(maximumLendAmount) : true),
+    [lendSize, maximumLendAmount],
+  );
+
+  const submitButtonDisabled = useMemo(
+    () => !isValidLendAmount || lendSize.lte(0),
+    [isValidLendAmount, lendSize],
+  );
+
+  return (
+    <form className="flex flex-col gap-6">
+      <div>
+        <AssetAmountInput
+          label={t(translations.aavePage.common.lend)}
+          maxAmount={maximumLendAmount}
+          amountLabel={t(translations.common.amount)}
+          amountValue={lendAmount}
+          onAmountChange={setLendAmount}
+          invalid={!isValidLendAmount}
+          assetValue={lendAsset}
+          onAssetChange={setLendAsset}
+          assetOptions={lendAssetsOptions}
+        />
+
+        {!isValidLendAmount && (
+          <ErrorBadge
+            level={ErrorLevel.Critical}
+            message={t(pageTranslations.lendModal.invalidAmountError)}
+            dataAttribute="lend-amount-error"
+          />
+        )}
+      </div>
+
+      <SimpleTable>
+        <SimpleTableRow
+          label={t(translations.aavePage.lendModal.lendApy)}
+          value={<AmountRenderer value={lendApy} suffix={'%'} />}
+        />
+        <SimpleTableRow
+          label={t(translations.aavePage.lendModal.collateralization)}
+          value={t(translations.aavePage.lendModal.enabled)}
+        />
+      </SimpleTable>
+
+      <Button
+        disabled={submitButtonDisabled}
+        text={t(translations.aavePage.lendModal.deposit)}
+      />
+    </form>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendModalContainer.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendModalContainer.tsx
new file mode 100644
index 000000000..d165676d6
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendModalContainer.tsx
@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+
+import { t } from 'i18next';
+
+import { Dialog, DialogBody, DialogHeader } from '@sovryn/ui';
+
+import { translations } from '../../../../../../../locales/i18n';
+import { LendForm } from './LendForm';
+
+type LendModalContainerProps = {
+  isOpen: boolean;
+  handleCloseModal: () => unknown;
+};
+
+export const LendModalContainer: FC<LendModalContainerProps> = ({
+  isOpen,
+  handleCloseModal,
+}) => {
+  return (
+    <Dialog disableFocusTrap isOpen={isOpen}>
+      <DialogHeader
+        title={t(translations.aavePage.lendModal.title)}
+        onClose={handleCloseModal}
+      />
+      <DialogBody className="flex flex-col gap-6">
+        <LendForm onSuccess={handleCloseModal} />
+      </DialogBody>
+    </Dialog>
+  );
+};
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index 7b494c1b9..e510472d6 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -806,7 +806,6 @@
             "variable": "Variable",
             "fixed": "Fixed",
             "withdraw": "Withdraw"
-
         },
         "topPanel": {
             "title": "Lend and borrow",
@@ -847,7 +846,7 @@
             "newCollateralBalance": "New collateral balance",
             "invalidAmountError": "Invalid amount",
             "tokenPrice": "{{token}} price",
-            "walletBalance":"Wallet balance",
+            "walletBalance": "Wallet balance",
             "priceImpact": "Price impact",
             "priceImpactInfo": "Price impact information TODO:",
             "expectedAmountToRepay": "Expected amount to repay",
@@ -856,6 +855,14 @@
         "withdrawForm": {
             "remainingSupply": "Remaining supply",
             "invalidAmountError": "Invalid amount"
+        },
+        "lendModal": {
+            "title": "Deposit",
+            "invalidAmountError": "Invalid amount",
+            "collateralization": "Collateralization",
+            "lendApy": "Lend APY",
+            "deposit": "Deposit",
+            "enabled": "Enabled"
         }
     },
     "bitocracyPage": {

From f6c103d16d00b3ebf0d46a2601a23a70536374ba Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Mon, 12 Aug 2024 15:34:40 +0300
Subject: [PATCH 023/116] use simple table row

---
 .../BorrowAssetDetails/BorrowAssetDetails.tsx | 41 ++++-------
 .../BorrowPositionDetails.tsx                 | 54 +++++---------
 .../LendAssetDetails/LendAssetDetails.tsx     | 70 +++++++------------
 .../LendPositionDetails.tsx                   | 57 ++++++---------
 4 files changed, 80 insertions(+), 142 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
index 194a2c977..fce21716d 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 
 import { t } from 'i18next';
 
-import { HelperButton } from '@sovryn/ui';
+import { HelperButton, SimpleTableRow } from '@sovryn/ui';
 
 import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { translations } from '../../../../../../../locales/i18n';
@@ -18,36 +18,23 @@ type BorrowAssetDetailsProps = {
 export const BorrowAssetDetails: FC<BorrowAssetDetailsProps> = ({ pool }) => {
   return (
     <div className="space-y-3">
-      <div className="space-y-2">
+      <div>
         {/* APR */}
-        <div className="grid grid-cols-2">
-          <div className="flex items-center gap-1">
-            <span className="text-xs font-medium text-gray-30">
-              {t(pageTranslations.common.apr)}
+        <SimpleTableRow
+          label={
+            <span className="text-xs font-medium text-gray-30 items-center flex gap-1">
+              {t(pageTranslations.common.apr)}{' '}
+              <HelperButton content={t(pageTranslations.common.aprInfo)} />
             </span>
-            <HelperButton
-              content={t(pageTranslations.common.aprInfo)}
-              className="text-gray-30"
-            />
-          </div>
-
-          <div className="text-right text-xs text-gray-30 font-medium">
-            <AmountRenderer value={pool.apr} suffix={'%'} />
-          </div>
-        </div>
+          }
+          value={<AmountRenderer value={pool.apr} suffix={'%'} />}
+        />
 
         {/* Available */}
-        <div className="grid grid-cols-2">
-          <div className="flex items-center gap-1">
-            <span className="text-xs font-medium text-gray-30">
-              {t(pageTranslations.borrowAssetsList.available)}
-            </span>
-          </div>
-
-          <div className="text-right text-xs text-gray-30 font-medium">
-            <AmountRenderer value={pool.available} suffix={pool.asset} />
-          </div>
-        </div>
+        <SimpleTableRow
+          label={t(pageTranslations.borrowAssetsList.available)}
+          value={<AmountRenderer value={pool.available} suffix={pool.asset} />}
+        />
       </div>
 
       <BorrowAssetAction pool={pool} />
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
index 8fa4e46ab..9c219c711 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 
 import { t } from 'i18next';
 
-import { HelperButton } from '@sovryn/ui';
+import { HelperButton, SimpleTableRow } from '@sovryn/ui';
 
 import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { translations } from '../../../../../../../locales/i18n';
@@ -18,49 +18,31 @@ export const BorrowPositionDetails: FC<BorrowPositionDetailsProps> = ({
 }) => {
   return (
     <div className="space-y-3">
-      <div className="space-y-2">
+      <div>
         {/* Available */}
-        <div className="grid grid-cols-2">
-          <div className="flex items-center gap-1">
-            <span className="text-xs font-medium text-gray-30">
-              {t(translations.aavePage.common.balance)}
-            </span>
-          </div>
-
-          <div className="text-right text-xs text-gray-30 font-medium">
+        <SimpleTableRow
+          label={t(translations.aavePage.common.balance)}
+          value={
             <AmountRenderer value={position.balance} suffix={position.asset} />
-          </div>
-        </div>
+          }
+        />
 
         {/* APR */}
-        <div className="grid grid-cols-2">
-          <div className="flex items-center gap-1">
-            <span className="text-xs font-medium text-gray-30">
+        <SimpleTableRow
+          label={
+            <span className="text-xs font-medium text-gray-30 flex items-center gap-1">
               {t(translations.aavePage.common.apr)}
+              <HelperButton content={t(translations.aavePage.common.aprInfo)} />
             </span>
-            <HelperButton
-              content={t(translations.aavePage.common.aprInfo)}
-              className="text-gray-30"
-            />
-          </div>
-
-          <div className="text-right text-xs text-gray-30 font-medium">
-            <AmountRenderer value={position.apr} suffix="%" />
-          </div>
-        </div>
+          }
+          value={<AmountRenderer value={position.apr} suffix="%" />}
+        />
 
         {/* Apy type */}
-        <div className="grid grid-cols-2">
-          <div className="flex items-center gap-1">
-            <span className="text-xs font-medium text-gray-30">
-              {t(translations.aavePage.common.apyType)}
-            </span>
-          </div>
-
-          <div className="text-right text-xs text-gray-30 font-medium">
-            {t(translations.aavePage.common[position.apyType])}
-          </div>
-        </div>
+        <SimpleTableRow
+          label={t(translations.aavePage.common.apyType)}
+          value={t(translations.aavePage.common[position.apyType])}
+        />
       </div>
 
       <BorrowPositionAction position={position} />
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
index 988716e6a..79afdc3ff 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
@@ -1,8 +1,9 @@
 import React, { FC } from 'react';
 
+import classNames from 'classnames';
 import { t } from 'i18next';
 
-import { HelperButton, Icon, IconNames } from '@sovryn/ui';
+import { HelperButton, Icon, IconNames, SimpleTableRow } from '@sovryn/ui';
 
 import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { translations } from '../../../../../../../locales/i18n';
@@ -16,56 +17,39 @@ type LendAssetDetailsProps = {
 export const LendAssetDetails: FC<LendAssetDetailsProps> = ({ pool }) => {
   return (
     <div className="space-y-3">
-      <div className="space-y-2">
+      <div>
         {/* Available */}
-        <div className="grid grid-cols-2">
-          <div className="flex items-center gap-1">
-            <span className="text-xs font-medium text-gray-30">
-              {t(translations.aavePage.lendAssetsList.walletBalance)}
-            </span>
-          </div>
-
-          <div className="text-right text-xs text-gray-30 font-medium">
+        <SimpleTableRow
+          label={t(translations.aavePage.lendAssetsList.walletBalance)}
+          value={
             <AmountRenderer value={pool.walletBalance} suffix={pool.asset} />
-          </div>
-        </div>
+          }
+        />
 
         {/* APY */}
-        <div className="grid grid-cols-2">
-          <div className="flex items-center gap-1">
-            <span className="text-xs font-medium text-gray-30">
+        <SimpleTableRow
+          label={
+            <span className="text-xs font-medium text-gray-30 flex gap-1 items-center">
               {t(translations.aavePage.common.apy)}
+              <HelperButton content={t(translations.aavePage.common.apyInfo)} />
             </span>
-            <HelperButton
-              content={t(translations.aavePage.common.apyInfo)}
-              className="text-gray-30"
-            />
-          </div>
-
-          <div className="text-right text-xs text-gray-30 font-medium">
-            <AmountRenderer value={pool.apy} suffix="%" />
-          </div>
-        </div>
+          }
+          value={<AmountRenderer value={pool.apy} suffix="%" />}
+        />
 
         {/* Can be collateral */}
-        <div className="grid grid-cols-2">
-          <div className="flex items-center gap-1">
-            <span className="text-xs font-medium text-gray-30">
-              {t(translations.aavePage.lendAssetsList.canBeCollateral)}
-            </span>
-          </div>
-
-          <div className="flex justify-end text-xs  font-medium">
-            {pool.canBeCollateral ? (
-              <Icon icon={IconNames.CHECK} className="w-[10px] text-positive" />
-            ) : (
-              <Icon
-                icon={IconNames.X_MARK}
-                className="w-[10px] text-negative"
-              />
-            )}
-          </div>
-        </div>
+        <SimpleTableRow
+          label={t(translations.aavePage.lendAssetsList.canBeCollateral)}
+          value={
+            <Icon
+              icon={pool.canBeCollateral ? IconNames.CHECK : IconNames.X_MARK}
+              className={classNames(
+                'w-[10px]',
+                pool.canBeCollateral ? 'text-positive' : 'text-negative',
+              )}
+            />
+          }
+        />
       </div>
 
       <LendAssetAction pool={pool} />
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
index 4ba524a5b..250b549d2 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 
 import { t } from 'i18next';
 
-import { HelperButton } from '@sovryn/ui';
+import { HelperButton, SimpleTableRow } from '@sovryn/ui';
 
 import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { translations } from '../../../../../../../locales/i18n';
@@ -19,49 +19,34 @@ export const LendPositionDetails: FC<LendPositionDetailsProps> = ({
 }) => {
   return (
     <div className="space-y-3">
-      <div className="space-y-2">
+      <div>
         {/* Balance */}
-        <div className="grid grid-cols-2">
-          <div className="flex items-center gap-1">
-            <span className="text-xs font-medium text-gray-30">
-              {t(translations.aavePage.common.balance)}
-            </span>
-          </div>
-
-          <div className="text-right text-xs text-gray-30 font-medium">
+        <SimpleTableRow
+          label={t(translations.aavePage.common.balance)}
+          value={
             <AmountRenderer value={position.balance} suffix={position.asset} />
-          </div>
-        </div>
+          }
+        />
 
         {/* APY */}
-        <div className="grid grid-cols-2">
-          <div className="flex items-center gap-1">
-            <span className="text-xs font-medium text-gray-30">
+        <SimpleTableRow
+          label={
+            <span className="text-xs font-medium text-gray-30 flex gap-1 items-center">
               {t(translations.aavePage.common.apy)}
+              <HelperButton
+                content={t(translations.aavePage.common.apyInfo)}
+                className="text-gray-30"
+              />
             </span>
-            <HelperButton
-              content={t(translations.aavePage.common.apyInfo)}
-              className="text-gray-30"
-            />
-          </div>
-
-          <div className="text-right text-xs text-gray-30 font-medium">
-            <AmountRenderer value={position.apy} suffix={'%'} />
-          </div>
-        </div>
+          }
+          value={<AmountRenderer value={position.apy} suffix={'%'} />}
+        />
 
         {/* Can be collateral */}
-        <div className="grid grid-cols-2">
-          <div className="flex items-center gap-1">
-            <span className="text-xs font-medium text-gray-30">
-              {t(translations.aavePage.lendPositionsList.usedAsCollateral)}
-            </span>
-          </div>
-
-          <div className="flex justify-end">
-            <ToggleCollateralAction position={position} />
-          </div>
-        </div>
+        <SimpleTableRow
+          label={t(translations.aavePage.lendPositionsList.usedAsCollateral)}
+          value={<ToggleCollateralAction position={position} />}
+        />
       </div>
 
       <LendPositionAction position={position} />

From aa1e9b94f715f65ca950006407110ec11343fe4a Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Mon, 12 Aug 2024 15:51:33 +0300
Subject: [PATCH 024/116] asset amount input

---
 .../AssetAmountInput/AssetAmountInput.tsx     |  15 ++-
 .../components/BorrowModal/BorrowForm.tsx     |  83 ++++----------
 .../components/WithdrawModal/WithdrawForm.tsx | 104 ++++++------------
 3 files changed, 63 insertions(+), 139 deletions(-)

diff --git a/apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx b/apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx
index 3fe5d1aa1..f861e9a0c 100644
--- a/apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx
+++ b/apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx
@@ -1,6 +1,12 @@
 import React, { FC, useCallback } from 'react';
 
-import { AmountInput, Paragraph, Select, SelectOption } from '@sovryn/ui';
+import {
+  AmountInput,
+  Paragraph,
+  ParagraphSize,
+  Select,
+  SelectOption,
+} from '@sovryn/ui';
 import { Decimalish } from '@sovryn/utils';
 
 import { AmountRenderer } from '../AmountRenderer/AmountRenderer';
@@ -43,7 +49,12 @@ export const AssetAmountInput: FC<AssetAmountInputProps> = ({
   return (
     <div>
       {label && (
-        <Paragraph className="mb-1 text-gray-30 font-medium">{label}</Paragraph>
+        <Paragraph
+          size={ParagraphSize.base}
+          className="mb-1 text-gray-30 font-medium"
+        >
+          {label}
+        </Paragraph>
       )}
 
       <div className="relative">
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
index 9a78636ca..06b8f967e 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
@@ -3,22 +3,19 @@ import React, { FC, useCallback, useMemo, useState } from 'react';
 import { t } from 'i18next';
 
 import {
-  AmountInput,
   Button,
   Checkbox,
   ErrorBadge,
   ErrorLevel,
   HealthBar,
   Link,
-  Paragraph,
-  ParagraphSize,
-  Select,
   SimpleTable,
   SimpleTableRow,
 } from '@sovryn/ui';
 import { Decimal } from '@sovryn/utils';
 
 import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
+import { AssetAmountInput } from '../../../../../../2_molecules/AssetAmountInput/AssetAmountInput';
 import { AssetRenderer } from '../../../../../../2_molecules/AssetRenderer/AssetRenderer';
 import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
 import { translations } from '../../../../../../../locales/i18n';
@@ -91,67 +88,25 @@ export const BorrowForm: FC<BorrowFormProps> = () => {
   return (
     <form className="flex flex-col gap-6">
       <div className="space-y-3">
-        <div className="flex justify-between items-end">
-          <Paragraph size={ParagraphSize.base} className="font-medium">
-            {t(translations.aavePage.common.borrow)}
-          </Paragraph>
-
-          <span className="text-xs underline">
-            (Max{' '}
-            <AmountRenderer
-              value={maximumBorrowAmount}
-              suffix={borrowAsset}
-              prefix="~"
-            />
-            )
-          </span>
-        </div>
+        <AssetAmountInput
+          label={t(translations.aavePage.common.borrow)}
+          amountLabel={t(translations.common.amount)}
+          amountValue={borrowAmount}
+          onAmountChange={setBorrowAmount}
+          maxAmount={maximumBorrowAmount}
+          invalid={!isValidBorrowAmount}
+          assetValue={borrowAsset}
+          onAssetChange={onBorrowAssetChange}
+          assetOptions={borrowableAssetsOptions}
+        />
 
-        <div>
-          <div className="flex space-x-3">
-            <div className="text-right flex-grow space-y-1">
-              <AmountInput
-                label={t(translations.common.amount)}
-                value={borrowAmount}
-                onChangeText={setBorrowAmount}
-                placeholder="0"
-                invalid={!isValidBorrowAmount}
-              />
-              <div className=" pr-4">
-                <AmountRenderer
-                  className="text-gray-40"
-                  value={0} // TODO: usd equivalent
-                  prefix="$"
-                />
-              </div>
-            </div>
-
-            <Select
-              value={borrowAsset}
-              onChange={onBorrowAssetChange}
-              options={borrowableAssetsOptions}
-              labelRenderer={({ value }) => (
-                <AssetRenderer
-                  dataAttribute="borrow-asset-asset"
-                  showAssetLogo
-                  asset={value}
-                />
-              )}
-              className="min-w-[6.7rem]"
-              menuClassName="max-h-[10rem] sm:max-h-[20rem]"
-              dataAttribute="borrow-asset-select"
-            />
-          </div>
-        </div>
-        <div>
-          {!isValidBorrowAmount && (
-            <ErrorBadge
-              level={ErrorLevel.Critical}
-              message={t(pageTranslations.borrowForm.invalidAmountError)}
-              dataAttribute="borrow-amount-error"
-            />
-          )}
-        </div>
+        {!isValidBorrowAmount && (
+          <ErrorBadge
+            level={ErrorLevel.Critical}
+            message={t(pageTranslations.borrowForm.invalidAmountError)}
+            dataAttribute="borrow-amount-error"
+          />
+        )}
       </div>
 
       <SimpleTable>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
index 939414126..e2eea3717 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
@@ -3,11 +3,9 @@ import React, { FC, useCallback, useMemo, useState } from 'react';
 import { t } from 'i18next';
 
 import {
-  AmountInput,
   Button,
   ErrorBadge,
   ErrorLevel,
-  Select,
   SimpleTable,
   SimpleTableRow,
   Tabs,
@@ -16,6 +14,7 @@ import {
 import { Decimal } from '@sovryn/utils';
 
 import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
+import { AssetAmountInput } from '../../../../../../2_molecules/AssetAmountInput/AssetAmountInput';
 import { AssetRenderer } from '../../../../../../2_molecules/AssetRenderer/AssetRenderer';
 import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
 import { translations } from '../../../../../../../locales/i18n';
@@ -69,84 +68,43 @@ export const WithdrawForm: FC<WithdrawFormProps> = () => {
     [isValidWithdrawAmount, withdrawSize],
   );
 
-  const withdrawLabelRenderer = useCallback(
-    ({ value }) => (
-      <AssetRenderer
-        dataAttribute="withdraw-asset-select"
-        showAssetLogo
-        asset={value}
-      />
-    ),
-    [],
-  );
-
   return (
     <form className="flex flex-col gap-6">
-      <div className="space-y-3">
-        <div className="flex justify-between items-end">
-          <Tabs
-            type={TabType.secondary}
-            index={0}
-            items={[
-              // For now just withdraw is supported
-              {
-                activeClassName: 'text-primary-20',
-                dataAttribute: 'withdraw',
-                label: t(translations.common.withdraw),
-              },
-            ]}
-          />
-          <span className="text-xs underline">
-            (Max{' '}
-            <AmountRenderer
-              value={maximumWithdrawAmount}
-              suffix={withdrawAsset}
-              prefix="~"
-            />
-            )
-          </span>
-        </div>
-
-        <div className="flex space-x-3">
-          <div className="text-right flex-grow space-y-1">
-            <AmountInput
-              label={t(translations.common.amount)}
-              value={withdrawAmount}
-              onChangeText={setWithdrawAmount}
-              placeholder="0"
-              invalid={!isValidWithdrawAmount}
-            />
-            <div className=" pr-4">
-              <AmountRenderer
-                className="text-gray-40"
-                value={0} // TODO: usd equivalent
-                prefix="$"
-              />
-            </div>
-          </div>
+      <div className="space-y-2">
+        <Tabs
+          type={TabType.secondary}
+          index={0}
+          items={[
+            // For now just withdraw is supported
+            {
+              activeClassName: 'text-primary-20',
+              dataAttribute: 'withdraw',
+              label: t(translations.common.withdraw),
+            },
+          ]}
+        />
 
-          <Select
-            value={withdrawAsset}
-            onChange={onWithdrawAssetChange}
-            options={withdrawableAssetsOptions}
-            labelRenderer={withdrawLabelRenderer}
-            className="min-w-[6.7rem]"
-            menuClassName="max-h-[10rem] sm:max-h-[20rem]"
-            dataAttribute="withdraw-asset-select"
+        <div className="space-y-3">
+          <AssetAmountInput
+            amountValue={withdrawAmount}
+            onAmountChange={setWithdrawAmount}
+            invalid={!isValidWithdrawAmount}
+            maxAmount={maximumWithdrawAmount}
+            assetOptions={withdrawableAssetsOptions}
+            onAssetChange={onWithdrawAssetChange}
+            assetValue={withdrawAsset}
+            amountLabel={t(translations.common.amount)}
           />
+          {!isValidWithdrawAmount && (
+            <ErrorBadge
+              level={ErrorLevel.Critical}
+              message={t(pageTranslations.withdrawForm.invalidAmountError)}
+              dataAttribute="withdraw-amount-error"
+            />
+          )}
         </div>
       </div>
 
-      <div>
-        {!isValidWithdrawAmount && (
-          <ErrorBadge
-            level={ErrorLevel.Critical}
-            message={t(pageTranslations.withdrawForm.invalidAmountError)}
-            dataAttribute="withdraw-amount-error"
-          />
-        )}
-      </div>
-
       <SimpleTable>
         <SimpleTableRow
           label={t(translations.aavePage.withdrawForm.remainingSupply)}

From 1f6cec5fac72ba55e390c0fc4d6498147b51fc03 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Mon, 12 Aug 2024 16:02:09 +0300
Subject: [PATCH 025/116] add missing translations

---
 apps/frontend/src/locales/en/translations.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index dc85ca6a2..40fc954bf 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -795,9 +795,9 @@
             "collateralRatio": "Collateral ratio",
             "balance": "Balance",
             "apy": "APY",
-            "apyInfo": "TODO:",
+            "apyInfo": "The weighted average of APY for all supplied assets, including incentives.",
             "apyType": "APY type",
-            "apyTypeInfo": "APY type info",
+            "apyTypeInfo": "Variable interest rate will fluctuate based on the market conditions. Recommended for short-term positions.",
             "apr": "APR",
             "aprInfo": "APR is estimated based on previous fees earned at the defined price range, if no trades were made previously or you have recently claimed fees/withdrawn liquidity, you may see 0 value",
             "details": "Details",
@@ -812,9 +812,9 @@
             "subtitle": "Borrow and earn interest by providing liquidity",
             "netWorth": "Net worth",
             "netApy": "Net API",
-            "netApyInfo": "Net apy info",
+            "netApyInfo": "Net APY is the combined effect of all supply and borrow positions on net worth, including incentives. It is possible to have a negative net APY if debt APY is higher than supply APY.",
             "collateralRatio": "Collateral ratio",
-            "collateralRatioInfo": "Collateral ratio info",
+            "collateralRatioInfo": "The collateral ratio defines the maximum amount of assets that can be borrowed with a specific collatera",
             "n/a": "N/A"
         },
         "borrowPositionsList": {
@@ -825,7 +825,7 @@
         "borrowAssetsList": {
             "title": "Assets to borrow",
             "available": "Available",
-            "availableInfo": "TODO:"
+            "availableInfo": "This is the total amount available for you to borrow. You can borrow based on your collateral and until the borrow cap is reached."
         },
         "lendPositionsList": {
             "title": "Your lending deposits",
@@ -848,7 +848,7 @@
             "tokenPrice": "{{token}} price",
             "walletBalance": "Wallet balance",
             "priceImpact": "Price impact",
-            "priceImpactInfo": "Price impact information TODO:",
+            "priceImpactInfo": "The impact your trade has on the market price of this pool.",
             "expectedAmountToRepay": "Expected amount to repay",
             "collateralToRepayWith": "Collateral to repay with"
         },

From b935c06d53a04e259a6d5a52c2071d3ac5fbcdbf Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Mon, 12 Aug 2024 16:04:54 +0300
Subject: [PATCH 026/116] fix translation

---
 apps/frontend/src/locales/en/translations.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index 40fc954bf..0d7e2534c 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -795,7 +795,7 @@
             "collateralRatio": "Collateral ratio",
             "balance": "Balance",
             "apy": "APY",
-            "apyInfo": "The weighted average of APY for all supplied assets, including incentives.",
+            "apyInfo": "Compounding interest accrued by deposit or borrow on the lending pool",
             "apyType": "APY type",
             "apyTypeInfo": "Variable interest rate will fluctuate based on the market conditions. Recommended for short-term positions.",
             "apr": "APR",

From ff19631800d41c9bcda98a9e495239740c3a1bcc Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Mon, 12 Aug 2024 16:54:35 +0300
Subject: [PATCH 027/116] units and prices mock

---
 .../AssetAmountPriceRenderer.tsx              | 33 +++++++++++++++++++
 .../BorrowAssetsList.constants.tsx            | 12 +++++++
 .../BorrowPositionsList.constants.tsx         |  9 ++++-
 .../LendAssetsList.constants.tsx              |  8 +++++
 .../LendPositionsList.constants.tsx           | 12 +++++++
 5 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 apps/frontend/src/app/2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx

diff --git a/apps/frontend/src/app/2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx b/apps/frontend/src/app/2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx
new file mode 100644
index 000000000..7b60d105d
--- /dev/null
+++ b/apps/frontend/src/app/2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx
@@ -0,0 +1,33 @@
+import React, { FC } from 'react';
+
+import classNames from 'classnames';
+
+import { Decimalish } from '@sovryn/utils';
+
+import { AmountRenderer } from '../AmountRenderer/AmountRenderer';
+
+type AssetAmountPriceRendererProps = {
+  value: Decimalish;
+  asset: string;
+  className?: string;
+};
+
+export const AssetAmountPriceRenderer: FC<AssetAmountPriceRendererProps> = ({
+  value,
+  asset,
+  className,
+}) => {
+  // TODO: get price in usd
+  const usdPrice = value;
+
+  return (
+    <div className={classNames('flex flex-col text-right', className)}>
+      <AmountRenderer value={value} suffix={asset} />
+      <AmountRenderer
+        value={usdPrice}
+        prefix={'$'}
+        className="text-gray-40 text-xs font-medium"
+      />
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
index eeebdb859..c8de37d5f 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
@@ -4,6 +4,8 @@ import { t } from 'i18next';
 
 import { Align, HelperButton } from '@sovryn/ui';
 
+import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
+import { AssetAmountPriceRenderer } from '../../../../2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer';
 import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
 import { translations } from '../../../../../locales/i18n';
 import { BorrowPoolDetails } from './BorrowAssetsList.types';
@@ -25,6 +27,7 @@ export const COLUMNS_CONFIG = [
         showAssetLogo
         asset={pool.asset}
         className="lg:justify-start justify-end"
+        logoClassName="[&>svg]:h-8 [&>svg]:w-8 [&>svg]:mr-[10px]"
       />
     ),
   },
@@ -41,6 +44,12 @@ export const COLUMNS_CONFIG = [
         />
       </span>
     ),
+    cellRenderer: (position: BorrowPoolDetails) => (
+      <AssetAmountPriceRenderer
+        value={position.available}
+        asset={position.asset}
+      />
+    ),
   },
   {
     id: 'apr',
@@ -53,6 +62,9 @@ export const COLUMNS_CONFIG = [
         <HelperButton content={t(pageTranslations.common.aprInfo)} />
       </span>
     ),
+    cellRenderer: (pool: BorrowPoolDetails) => (
+      <AmountRenderer value={pool.apr} suffix={'%'} />
+    ),
   },
   {
     id: 'actions',
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
index d606e5c6a..b4d5d7240 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
@@ -4,6 +4,7 @@ import { t } from 'i18next';
 
 import { Align, HelperButton } from '@sovryn/ui';
 
+import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
 import { translations } from '../../../../../locales/i18n';
 import { BorrowPosition } from './BorrowPositionsList.types';
@@ -25,6 +26,7 @@ export const COLUMNS_CONFIG = [
         showAssetLogo
         asset={position.asset}
         className="lg:justify-start justify-end"
+        logoClassName="[&>svg]:h-8 [&>svg]:w-8 [&>svg]:mr-[10px]"
       />
     ),
   },
@@ -38,6 +40,9 @@ export const COLUMNS_CONFIG = [
         {t(pageTranslations.common.balance)}{' '}
       </span>
     ),
+    cellRenderer: (pool: BorrowPosition) => (
+      <AmountRenderer value={pool.balance} suffix={pool.asset} />
+    ),
   },
   {
     id: 'apr',
@@ -50,6 +55,9 @@ export const COLUMNS_CONFIG = [
         <HelperButton content={t(pageTranslations.common.aprInfo)} />
       </span>
     ),
+    cellRenderer: (position: BorrowPosition) => (
+      <AmountRenderer value={position.apr} suffix={'%'} />
+    ),
   },
   {
     id: 'apyType',
@@ -62,7 +70,6 @@ export const COLUMNS_CONFIG = [
         <HelperButton content={t(pageTranslations.common.apyTypeInfo)} />
       </span>
     ),
-
     cellRenderer: (position: BorrowPosition) => (
       <span>{t(pageTranslations.common[position.apyType])}</span>
     ),
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
index 4a681dd58..407784df3 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
@@ -4,6 +4,7 @@ import { t } from 'i18next';
 
 import { Align, HelperButton, Icon, IconNames } from '@sovryn/ui';
 
+import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
 import { translations } from '../../../../../locales/i18n';
 import { LendPoolDetails } from './LendAssetsList.types';
@@ -25,6 +26,7 @@ export const COLUMNS_CONFIG = [
         showAssetLogo
         asset={pool.asset}
         className="lg:justify-start justify-end"
+        logoClassName="[&>svg]:h-8 [&>svg]:w-8 [&>svg]:mr-[10px]"
       />
     ),
   },
@@ -37,6 +39,9 @@ export const COLUMNS_CONFIG = [
         {t(pageTranslations.lendAssetsList.walletBalance)}{' '}
       </span>
     ),
+    cellRenderer: (pool: LendPoolDetails) => (
+      <AmountRenderer value={pool.walletBalance} suffix={pool.asset} />
+    ),
   },
   {
     id: 'apy',
@@ -48,6 +53,9 @@ export const COLUMNS_CONFIG = [
         <HelperButton content={t(pageTranslations.common.apyInfo)} />
       </span>
     ),
+    cellRenderer: (pool: LendPoolDetails) => (
+      <AmountRenderer value={pool.apy} suffix={'%'} />
+    ),
   },
   {
     id: 'canBeCollateral',
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
index f3407fd87..b0da59974 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
@@ -4,6 +4,8 @@ import { t } from 'i18next';
 
 import { Align, HelperButton } from '@sovryn/ui';
 
+import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
+import { AssetAmountPriceRenderer } from '../../../../2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer';
 import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
 import { translations } from '../../../../../locales/i18n';
 import { LendPosition } from './LendPositionsList.types';
@@ -26,6 +28,7 @@ export const COLUMNS_CONFIG = [
         showAssetLogo
         asset={position.asset}
         className="lg:justify-start justify-end"
+        logoClassName="[&>svg]:h-8 [&>svg]:w-8 [&>svg]:mr-[10px]"
       />
     ),
   },
@@ -37,6 +40,12 @@ export const COLUMNS_CONFIG = [
     title: (
       <span className="text-gray-30">{t(pageTranslations.common.balance)}</span>
     ),
+    cellRenderer: (position: LendPosition) => (
+      <AssetAmountPriceRenderer
+        value={position.balance}
+        asset={position.asset}
+      />
+    ),
   },
   {
     id: 'apy',
@@ -49,6 +58,9 @@ export const COLUMNS_CONFIG = [
         <HelperButton content={t(pageTranslations.common.apyInfo)} />
       </span>
     ),
+    cellRenderer: (position: LendPosition) => (
+      <AmountRenderer value={position.balance} suffix={position.asset} />
+    ),
   },
   {
     id: 'collateral',

From a8c6b6d9634616618bbfda0dc1a6682378308031 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Mon, 12 Aug 2024 17:29:17 +0300
Subject: [PATCH 028/116] setup layout for pool details screen

---
 .../BorrowAssetAction/BorrowAssetAction.tsx   |  4 +-
 .../LendAssetAction/LendAssetAction.tsx       |  4 +-
 .../AaveReserveOverviewPage.tsx               | 78 +++++++++++++++++++
 .../frontend/src/locales/en/translations.json | 13 +++-
 apps/frontend/src/router.tsx                  |  7 +-
 5 files changed, 102 insertions(+), 4 deletions(-)
 create mode 100644 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
index 10e3e5229..683323d97 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
@@ -1,6 +1,7 @@
 import React, { FC, useCallback, useState } from 'react';
 
 import { t } from 'i18next';
+import { useNavigate } from 'react-router-dom';
 
 import { Button, ButtonStyle } from '@sovryn/ui';
 
@@ -15,6 +16,7 @@ type BorrowAssetActionProps = {
 };
 
 export const BorrowAssetAction: FC<BorrowAssetActionProps> = () => {
+  const navigate = useNavigate();
   const [isBorrowModalOpen, setIsBorrowModalOpen] = useState<boolean>(false);
 
   const handleBorrowClick = useCallback(() => {
@@ -33,11 +35,11 @@ export const BorrowAssetAction: FC<BorrowAssetActionProps> = () => {
         onClick={handleBorrowClick}
       />
 
-      {/* TODO: details link */}
       <Button
         className="flex-grow"
         text={t(pageTranslations.common.details)}
         style={ButtonStyle.secondary}
+        onClick={() => navigate('/aave/reserve-overview')}
       />
 
       <BorrowModalContainer
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
index c56dba871..2aa07f6b1 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
@@ -1,6 +1,7 @@
 import React, { FC, useState } from 'react';
 
 import { t } from 'i18next';
+import { useNavigate } from 'react-router-dom';
 
 import { Button, ButtonStyle } from '@sovryn/ui';
 
@@ -13,6 +14,7 @@ type LendAssetActionProps = {
 };
 
 export const LendAssetAction: FC<LendAssetActionProps> = () => {
+  const navigate = useNavigate();
   const [isLendModalOpen, setIsLendModalOpen] = useState<boolean>(false);
 
   const handleLendClick = () => {
@@ -31,11 +33,11 @@ export const LendAssetAction: FC<LendAssetActionProps> = () => {
         onClick={handleLendClick}
       />
 
-      {/* TODO: Add action for details */}
       <Button
         className="flex-grow"
         text={t(translations.aavePage.common.details)}
         style={ButtonStyle.secondary}
+        onClick={() => navigate('/aave/reserve-overview')}
       />
 
       <LendModalContainer
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
new file mode 100644
index 000000000..d75368b41
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
@@ -0,0 +1,78 @@
+import React, { FC, useState } from 'react';
+
+import classNames from 'classnames';
+import { t } from 'i18next';
+import { Helmet } from 'react-helmet-async';
+
+import { Tabs, TabSize, TabType } from '@sovryn/ui';
+
+import { translations } from '../../../locales/i18n';
+
+const pageTranslations = translations.aaveReserveOverviewPage;
+
+enum OverviewTab {
+  RESERVE = 0,
+  WALLET,
+}
+
+const AaveReserveOverviewPage: FC = () => {
+  const [activeOverviewTab, setActiveOverviewTab] = useState<OverviewTab>(
+    OverviewTab.RESERVE,
+  );
+
+  return (
+    <div className="w-full pb-6 2xl:px-12">
+      <Helmet>
+        <title>{t(pageTranslations.meta.title)}</title>
+      </Helmet>
+
+      {/* TODO: <TopPanel /> */}
+
+      <div className="pt-6 mt-6 space-y-6 lg:pt-0 lg:mt-0 lg:space-y-0 w-full">
+        <Tabs
+          className="w-full bg-gray-80 rounded p-1 border border-gray-60 lg:hidden"
+          index={activeOverviewTab}
+          items={[
+            {
+              activeClassName: 'text-primary-20',
+              dataAttribute: 'reserve-status',
+              label: t(pageTranslations.reserveStatusTab.title),
+            },
+            {
+              activeClassName: 'text-primary-20',
+              dataAttribute: 'your-wallet',
+              label: t(pageTranslations.yourWalletTab.title),
+            },
+          ]}
+          onChange={e => setActiveOverviewTab(e)}
+          size={TabSize.normal}
+          type={TabType.secondary}
+        />
+
+        {/* reserve graphics columns */}
+        <div className="grid grid-cols-1 lg:gap-5 lg:grid-cols-[auto_465px]">
+          <div
+            className={classNames(
+              { hidden: activeOverviewTab !== OverviewTab.RESERVE },
+              'lg:block space-y-4 w-full bg-positive h-10',
+            )}
+          >
+            {/* TODO: reserve graphic components */}
+          </div>
+
+          {/* wallet column */}
+          <div
+            className={classNames(
+              { hidden: activeOverviewTab !== OverviewTab.WALLET },
+              'lg:block space-y-4 bg-blue-2 h-10',
+            )}
+          >
+            {/* TODO: wallet components */}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AaveReserveOverviewPage;
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index dc85ca6a2..47ae8d1b7 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -855,7 +855,7 @@
         "borrowForm": {
             "borrowApr": "Borrow APR",
             "collateralRatio": "Collateral ratio",
-            "liquidationPrice":"Liquidation price",
+            "liquidationPrice": "Liquidation price",
             "acknowledge": "I understand that my collateral may be liquidated or used to pay rollover fees if applicable.",
             "invalidAmountError": "Invalid amount",
             "tokenPrice": "{{token}} price"
@@ -873,6 +873,17 @@
             "enabled": "Enabled"
         }
     },
+    "aaveReserveOverviewPage": {
+        "meta": {
+            "title": "Pool details"
+        },
+        "reserveStatusTab": {
+            "title": "Reserve status"
+        },
+        "yourWalletTab": {
+            "title": "Your wallet"
+        }
+    },
     "bitocracyPage": {
         "meta": {
             "title": "Bitocracy - Sovryn",
diff --git a/apps/frontend/src/router.tsx b/apps/frontend/src/router.tsx
index bd5144a65..6382e609c 100644
--- a/apps/frontend/src/router.tsx
+++ b/apps/frontend/src/router.tsx
@@ -9,6 +9,7 @@ import {
 import { PageContainer } from './app/4_templates';
 import { EmailVerificationStateContainer } from './app/4_templates/EmailVerificationStateContainer/EmailVerificationStateContainer';
 import AavePage from './app/5_pages/AavePage/AavePage';
+import AaveReserveOverviewPage from './app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage';
 import { earnPageLoader } from './app/5_pages/EarnPage/loader';
 import { EmailDuplicateVerifiedPage } from './app/5_pages/EmailDuplicateVerifiedPage/EmailDuplicateVerifiedPage';
 import { EmailErrorPage } from './app/5_pages/EmailErrorPage/EmailErrorPage';
@@ -121,9 +122,13 @@ const routes = [
         element: <LendPage />,
       },
       {
-        path: '/borrow/lend/aave',
+        path: '/earn/lend/aave',
         element: <AavePage />,
       },
+      {
+        path: '/aave/reserve-overview',
+        element: <AaveReserveOverviewPage />,
+      },
       {
         path: '/earn/market-making',
         element: <MarketMakingPage />,

From 92c87f6cc0a972697a3b2df4948c0b7919d51458 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Mon, 12 Aug 2024 19:32:45 +0300
Subject: [PATCH 029/116] wallet overview panel

---
 .../AssetAmountPriceRenderer.tsx              |  13 +-
 .../AaveReserveOverviewPage.tsx               |   5 +-
 .../WalletOverview/WalletOverview.tsx         | 126 ++++++++++++++++++
 .../components/BorrowAction/BorrowAction.tsx  |  51 +++++++
 .../components/SupplyAction/SupplyAction.tsx  |  51 +++++++
 .../frontend/src/locales/en/translations.json |  13 +-
 6 files changed, 253 insertions(+), 6 deletions(-)
 create mode 100644 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/WalletOverview.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx

diff --git a/apps/frontend/src/app/2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx b/apps/frontend/src/app/2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx
index 7b60d105d..8d47bc779 100644
--- a/apps/frontend/src/app/2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx
+++ b/apps/frontend/src/app/2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx
@@ -10,23 +10,30 @@ type AssetAmountPriceRendererProps = {
   value: Decimalish;
   asset: string;
   className?: string;
+  valueClassName?: string;
+  priceClassName?: string;
 };
 
 export const AssetAmountPriceRenderer: FC<AssetAmountPriceRendererProps> = ({
   value,
   asset,
   className,
+  valueClassName,
+  priceClassName,
 }) => {
   // TODO: get price in usd
   const usdPrice = value;
 
   return (
-    <div className={classNames('flex flex-col text-right', className)}>
-      <AmountRenderer value={value} suffix={asset} />
+    <div className={className ?? 'flex flex-col text-right'}>
+      <AmountRenderer value={value} suffix={asset} className={valueClassName} />
       <AmountRenderer
         value={usdPrice}
         prefix={'$'}
-        className="text-gray-40 text-xs font-medium"
+        className={classNames(
+          'text-gray-40 text-xs font-medium',
+          priceClassName,
+        )}
       />
     </div>
   );
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
index d75368b41..f873faf6b 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
@@ -7,6 +7,7 @@ import { Helmet } from 'react-helmet-async';
 import { Tabs, TabSize, TabType } from '@sovryn/ui';
 
 import { translations } from '../../../locales/i18n';
+import { WalletOverview } from './components/WalletOverview/WalletOverview';
 
 const pageTranslations = translations.aaveReserveOverviewPage;
 
@@ -64,10 +65,10 @@ const AaveReserveOverviewPage: FC = () => {
           <div
             className={classNames(
               { hidden: activeOverviewTab !== OverviewTab.WALLET },
-              'lg:block space-y-4 bg-blue-2 h-10',
+              'lg:block space-y-4',
             )}
           >
-            {/* TODO: wallet components */}
+            <WalletOverview asset="ETH" />
           </div>
         </div>
       </div>
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/WalletOverview.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/WalletOverview.tsx
new file mode 100644
index 000000000..3d06037b1
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/WalletOverview.tsx
@@ -0,0 +1,126 @@
+import React, { FC, useState } from 'react';
+
+import { t } from 'i18next';
+
+import {
+  Button,
+  ErrorBadge,
+  ErrorLevel,
+  Paragraph,
+  ParagraphSize,
+  Tabs,
+  TabSize,
+  TabType,
+} from '@sovryn/ui';
+import { Decimal } from '@sovryn/utils';
+
+import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
+import { useWalletConnect } from '../../../../../hooks';
+import { translations } from '../../../../../locales/i18n';
+import { BorrowAction } from './components/BorrowAction/BorrowAction';
+import { SupplyAction } from './components/SupplyAction/SupplyAction';
+
+const pageTranslations = translations.aaveReserveOverviewPage;
+
+type WalletOverviewProps = {
+  asset: string;
+};
+
+export const WalletOverview: FC<WalletOverviewProps> = ({
+  asset: initialAsset,
+}) => {
+  const [asset, setAsset] = useState(initialAsset);
+  const { account, connectWallet, pending } = useWalletConnect();
+
+  const assetBalance = Decimal.from(0); // TODO: mocked
+  const maxSupplyCap = true; // TODO: mocked
+
+  return (
+    <div className="bg-gray-90 p-6 rounded space-y-6 lg:bg-gray-90 lg:p-6 border border-gray-60">
+      <Paragraph className="text-base">
+        {t(pageTranslations.yourWalletTab.title)}
+      </Paragraph>
+
+      {account ? (
+        <>
+          <div>
+            {['ETH', 'WETH'].includes(asset) && (
+              <Tabs
+                className="mb-5"
+                index={asset === 'ETH' ? 0 : 1}
+                onChange={e => setAsset(e === 0 ? 'ETH' : 'WETH')}
+                items={[
+                  {
+                    activeClassName: 'text-primary-20',
+                    dataAttribute: 'eth',
+                    label: 'ETH',
+                  },
+                  {
+                    activeClassName: 'text-primary-20',
+                    dataAttribute: 'weth',
+                    label: 'WETH',
+                  },
+                ]}
+                size={TabSize.normal}
+                type={TabType.secondary}
+              />
+            )}
+
+            <div>
+              <Paragraph
+                size={ParagraphSize.small}
+                className="text-gray-30 lg:ml-3 lg:mb-2"
+              >
+                {t(pageTranslations.yourWalletTab.walletBalance)}
+              </Paragraph>
+              <div className="lg:px-3 lg:py-6 lg:bg-gray-80 lg:rounded lg:w-full">
+                <AmountRenderer
+                  value={0}
+                  suffix={asset}
+                  className="text-2xl text-white font-medium"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            {/* Supply */}
+            <SupplyAction asset={asset} />
+
+            {/* Borrow */}
+            <BorrowAction asset={asset} />
+          </div>
+
+          {assetBalance.lte(0) && (
+            <ErrorBadge
+              level={ErrorLevel.Warning}
+              message={t(pageTranslations.yourWalletTab.yourWalletIsEmpty)}
+              dataAttribute="empty-wallet"
+            />
+          )}
+
+          {maxSupplyCap && (
+            <ErrorBadge
+              level={ErrorLevel.Critical}
+              message={t(pageTranslations.yourWalletTab.noSupply)}
+              dataAttribute="no-supply-available"
+            />
+          )}
+        </>
+      ) : (
+        <>
+          {/* Not connected */}
+          <Paragraph className="text-sm italic font-medium">
+            {t(pageTranslations.yourWalletTab.connectWalletToSeeData)}
+          </Paragraph>
+
+          <Button
+            text={t(pageTranslations.yourWalletTab.connectWallet)}
+            onClick={connectWallet}
+            disabled={pending}
+          />
+        </>
+      )}
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx
new file mode 100644
index 000000000..a177cf25a
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx
@@ -0,0 +1,51 @@
+import React, { FC, useMemo } from 'react';
+
+import { t } from 'i18next';
+
+import { Button, HelperButton, Paragraph, ParagraphSize } from '@sovryn/ui';
+import { Decimal } from '@sovryn/utils';
+
+import { AssetAmountPriceRenderer } from '../../../../../../2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer';
+import { translations } from '../../../../../../../locales/i18n';
+
+const pageTranslations = translations.aaveReserveOverviewPage;
+
+type BorrowActionProps = {
+  asset: string;
+};
+
+export const BorrowAction: FC<BorrowActionProps> = ({ asset }) => {
+  const availableToBorrow = 0; // TODO: this is mocked
+
+  const isBorrowDisabled = useMemo(() => {
+    // TODO: add conditions
+    return Decimal.from(availableToBorrow).lte(0);
+  }, [availableToBorrow]);
+
+  return (
+    <div className="flex justify-between items-center">
+      <div>
+        <Paragraph
+          size={ParagraphSize.small}
+          className="text-gray-30 flex items-center gap-1"
+        >
+          {t(pageTranslations.yourWalletTab.availableToBorrow)}{' '}
+          <HelperButton
+            content={t(pageTranslations.yourWalletTab.availableToBorrowInfo)}
+          />
+        </Paragraph>
+        <AssetAmountPriceRenderer
+          value={availableToBorrow}
+          asset={asset}
+          className="text-left flex flex-col"
+          valueClassName="font-medium"
+        />
+      </div>
+
+      <Button
+        text={t(pageTranslations.yourWalletTab.borrow)}
+        disabled={isBorrowDisabled}
+      />
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx
new file mode 100644
index 000000000..3adbb4f44
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx
@@ -0,0 +1,51 @@
+import React, { FC, useMemo } from 'react';
+
+import { t } from 'i18next';
+
+import { Button, HelperButton, Paragraph, ParagraphSize } from '@sovryn/ui';
+import { Decimal } from '@sovryn/utils';
+
+import { AssetAmountPriceRenderer } from '../../../../../../2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer';
+import { translations } from '../../../../../../../locales/i18n';
+
+const pageTranslations = translations.aaveReserveOverviewPage;
+
+type SupplyActionProps = {
+  asset: string;
+};
+
+export const SupplyAction: FC<SupplyActionProps> = ({ asset }) => {
+  const availableToSupply = 0; // TODO: this is mocked.
+
+  const isSupplyDisabled = useMemo(() => {
+    // TODO: add conditions
+    return Decimal.from(availableToSupply).lte(0);
+  }, [availableToSupply]);
+
+  return (
+    <div className="flex justify-between items-center">
+      <div>
+        <Paragraph
+          size={ParagraphSize.small}
+          className="text-gray-30 flex items-center gap-1"
+        >
+          {t(pageTranslations.yourWalletTab.availableToSupply)}{' '}
+          <HelperButton
+            content={t(pageTranslations.yourWalletTab.availableToSupplyInfo)}
+          />
+        </Paragraph>
+        <AssetAmountPriceRenderer
+          value={availableToSupply}
+          asset={asset}
+          className="text-left flex flex-col"
+          valueClassName="font-medium"
+        />
+      </div>
+
+      <Button
+        text={t(pageTranslations.yourWalletTab.supply)}
+        disabled={isSupplyDisabled}
+      />
+    </div>
+  );
+};
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index cbfec79b0..b7a108d9d 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -881,7 +881,18 @@
             "title": "Reserve status"
         },
         "yourWalletTab": {
-            "title": "Your wallet"
+            "title": "Your wallet",
+            "walletBalance": "Wallet balance",
+            "availableToSupply": "Available to supply",
+            "availableToSupplyInfo": "How much you can borrow of this token with this wallet",
+            "availableToBorrow": "Available to borrow",
+            "availableToBorrowInfo": "How much you can borrow of this token with this wallet",
+            "supply": "Supply",
+            "borrow": "Borrow",
+            "yourWalletIsEmpty": "Your wallet is empty. Purchase or transfer assets",
+            "noSupply": "Protocol supply cap is at 100% for this asset. Further supply unavailable. Learn more",
+            "connectWalletToSeeData": "Connect wallet to see available data",
+            "connectWallet": "Connect Wallet"
         }
     },
     "bitocracyPage": {

From 5aa41999c293fed7120b350517ef9d5322075653 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Mon, 12 Aug 2024 21:11:39 +0300
Subject: [PATCH 030/116] emode card mock

---
 .../StatisticsCard/StatisticsCard.tsx         |  50 +++++++++
 .../AavePage/components/TopPanel/TopPanel.tsx |   8 +-
 .../WalletStatCard/WalletStatCard.tsx         |  40 -------
 .../AaveReserveOverviewPage.tsx               |   5 +-
 .../components/EModeDetails/EModeDetails.tsx  | 103 ++++++++++++++++++
 .../frontend/src/locales/en/translations.json |  13 +++
 6 files changed, 173 insertions(+), 46 deletions(-)
 create mode 100644 apps/frontend/src/app/2_molecules/StatisticsCard/StatisticsCard.tsx
 delete mode 100644 apps/frontend/src/app/5_pages/AavePage/components/TopPanel/components/WalletStatCard/WalletStatCard.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx

diff --git a/apps/frontend/src/app/2_molecules/StatisticsCard/StatisticsCard.tsx b/apps/frontend/src/app/2_molecules/StatisticsCard/StatisticsCard.tsx
new file mode 100644
index 000000000..b2a7b146b
--- /dev/null
+++ b/apps/frontend/src/app/2_molecules/StatisticsCard/StatisticsCard.tsx
@@ -0,0 +1,50 @@
+import React, { FC } from 'react';
+
+import classNames from 'classnames';
+import { t } from 'i18next';
+
+import { HelperButton } from '@sovryn/ui';
+
+import { translations } from '../../../locales/i18n';
+import {
+  AmountRenderer,
+  AmountRendererProps,
+} from '../AmountRenderer/AmountRenderer';
+
+type StatisticsCardProps = Partial<AmountRendererProps> & {
+  label: string;
+  helperContent?: string;
+  amountRendererClassName?: string;
+};
+
+export const StatisticsCard: FC<StatisticsCardProps> = ({
+  label,
+  value,
+  helperContent,
+  amountRendererClassName,
+  className,
+  ...props
+}) => {
+  return (
+    <div className={classNames('space-y-3', className)}>
+      <div className="flex space-x-2 items-center text-gray-30">
+        <span className="text-xs  font-medium">{label}</span>
+        {helperContent && <HelperButton content={helperContent} />}
+      </div>
+
+      <div className="text-2xl text-white">
+        {value ? (
+          <AmountRenderer
+            value={value}
+            {...props}
+            className={amountRendererClassName}
+          />
+        ) : (
+          <span className={amountRendererClassName}>
+            {t(translations.aavePage.topPanel['n/a'])}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx b/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
index 5a414f014..1700cb85e 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
@@ -11,9 +11,9 @@ import {
   ParagraphSize,
 } from '@sovryn/ui';
 
+import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
 import { useAccount } from '../../../../../hooks/useAccount';
 import { translations } from '../../../../../locales/i18n';
-import { WalletStatCard } from './components/WalletStatCard/WalletStatCard';
 
 const pageTranslations = translations.aavePage.topPanel;
 
@@ -36,19 +36,19 @@ export const TopPanel: FC<TopPanelProps> = () => {
       <div className="flex flex-col gap-6 md:flex-row">
         <div className="flex flex-col gap-4 md:py-12 md:flex-row md:gap-9 flex-shrink-0">
           {/* TODO: mock values */}
-          <WalletStatCard
+          <StatisticsCard
             label={t(pageTranslations.netWorth)}
             prefix="$"
             value={account ? 1234567.58 : undefined}
           />
           <div className="flex gap-9">
-            <WalletStatCard
+            <StatisticsCard
               label={t(pageTranslations.netApy)}
               value={account ? 2.69 : undefined}
               suffix="%"
               helperContent={t(pageTranslations.netApyInfo)}
             />
-            <WalletStatCard
+            <StatisticsCard
               label={t(pageTranslations.collateralRatio)}
               value={account ? 11.5 : undefined}
               suffix="%"
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/components/WalletStatCard/WalletStatCard.tsx b/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/components/WalletStatCard/WalletStatCard.tsx
deleted file mode 100644
index 2dc6d7c37..000000000
--- a/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/components/WalletStatCard/WalletStatCard.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React, { FC } from 'react';
-
-import { t } from 'i18next';
-
-import { HelperButton } from '@sovryn/ui';
-
-import {
-  AmountRenderer,
-  AmountRendererProps,
-} from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
-import { translations } from '../../../../../../../locales/i18n';
-
-type WalletStatCardProps = Partial<AmountRendererProps> & {
-  label: string;
-  helperContent?: string;
-};
-
-export const WalletStatCard: FC<WalletStatCardProps> = ({
-  label,
-  value,
-  helperContent,
-  ...props
-}) => {
-  return (
-    <div className="space-y-3">
-      <div className="flex space-x-2 items-center">
-        <span className="text-xs text-gray-30">{label}</span>
-        {helperContent && <HelperButton content={helperContent} />}
-      </div>
-
-      <div className="text-2xl text-white">
-        {value ? (
-          <AmountRenderer value={value} {...props} />
-        ) : (
-          <span>{t(translations.aavePage.topPanel['n/a'])}</span>
-        )}
-      </div>
-    </div>
-  );
-};
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
index d75368b41..aaf9680a6 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
@@ -7,6 +7,7 @@ import { Helmet } from 'react-helmet-async';
 import { Tabs, TabSize, TabType } from '@sovryn/ui';
 
 import { translations } from '../../../locales/i18n';
+import { EModeDetails } from './components/EModeDetails/EModeDetails';
 
 const pageTranslations = translations.aaveReserveOverviewPage;
 
@@ -54,10 +55,10 @@ const AaveReserveOverviewPage: FC = () => {
           <div
             className={classNames(
               { hidden: activeOverviewTab !== OverviewTab.RESERVE },
-              'lg:block space-y-4 w-full bg-positive h-10',
+              'lg:block space-y-4 w-full',
             )}
           >
-            {/* TODO: reserve graphic components */}
+            <EModeDetails />
           </div>
 
           {/* wallet column */}
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx
new file mode 100644
index 000000000..eb881c496
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx
@@ -0,0 +1,103 @@
+import React, { FC, useState } from 'react';
+
+import { t } from 'i18next';
+
+import { Accordion, Icon, Link, Paragraph } from '@sovryn/ui';
+
+import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
+import { useIsMobile } from '../../../../../hooks/useIsMobile';
+import { translations } from '../../../../../locales/i18n';
+
+const pageTranslations = translations.aaveReserveOverviewPage.eModeDetails;
+
+type EModeDetailsProps = {};
+
+export const EModeDetails: FC<EModeDetailsProps> = () => {
+  const [open, setOpen] = useState<boolean>(false);
+  const { isMobile } = useIsMobile();
+
+  // TODO: All this data is mocked
+  const maxLtv = 93;
+  const liquidationThreshold = 94;
+  const liquidationPenalty = 1;
+
+  return (
+    <Accordion
+      label={
+        <span className="text-base font-medium">
+          {t(pageTranslations.title)}
+        </span>
+      }
+      className="bg-gray-90 px-4 py-3 rounded lg:p-6 border border-gray-60 grid grid-cols-1 lg:grid-cols-[170px_auto]"
+      labelClassName="justify-between  h-7 flex items-center"
+      open={open || !isMobile}
+      onClick={setOpen}
+      flatMode={!isMobile}
+    >
+      <div className="space-y-6">
+        <div className="flex justify-between items-center">
+          <Paragraph className="text-sm font-medium">
+            {t(pageTranslations.category)}
+          </Paragraph>
+          <Paragraph className="text-sm font-medium flex items-center">
+            <Icon
+              size={16}
+              className="mr-2"
+              icon={
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M2.78855 9.33172C2.68495 9.33172 2.62901 9.21023 2.69637 9.13151L9.96892 0.632031C10.0508 0.536295 10.2063 0.613419 10.1797 0.736569L8.89046 6.695C8.87411 6.7706 8.9317 6.84199 9.00905 6.84199L13.8675 6.84199C13.9755 6.84199 14.0296 6.97243 13.9535 7.04893L5.54013 15.4971C5.44923 15.5884 5.29749 15.4938 5.33946 15.372L7.36524 9.49257C7.39238 9.41378 7.33385 9.33172 7.25053 9.33172H2.78855Z"
+                    fill="#F58C31"
+                  />
+                </svg>
+              }
+            />
+            {t(pageTranslations.ethCorrelatedCategory)}
+          </Paragraph>
+        </div>
+
+        <div className="grid grid-cols-3 gap-5">
+          <StatisticsCard
+            label={t(pageTranslations.maxLtv)}
+            amountRendererClassName="text-base shrink-0"
+            className="space-y-2"
+            helperContent={t(pageTranslations.maxLtvInfo)}
+            value={maxLtv}
+            suffix="%"
+          />
+          <StatisticsCard
+            label={t(pageTranslations.liquidationThreshold)}
+            amountRendererClassName="text-base shrink-0"
+            className="space-y-2 "
+            helperContent={t(pageTranslations.liquidationThresholdInfo)}
+            value={liquidationThreshold}
+            suffix="%"
+          />
+          <StatisticsCard
+            label={t(pageTranslations.liquidationPenalty)}
+            amountRendererClassName="text-base shrink-0"
+            className="space-y-2"
+            helperContent={t(pageTranslations.liquidationPenaltyInfo)}
+            value={liquidationPenalty}
+            suffix="%"
+          />
+        </div>
+
+        <div>
+          <Paragraph className="text-gray-30">
+            {t(pageTranslations.body)}
+          </Paragraph>
+          <Link href="#learn-more" text={t(pageTranslations.learnMore)} />
+        </div>
+      </div>
+    </Accordion>
+  );
+};
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index cbfec79b0..64b106e80 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -882,6 +882,19 @@
         },
         "yourWalletTab": {
             "title": "Your wallet"
+        },
+        "eModeDetails": {
+            "title": "E-Mode details",
+            "category": "E-Mode category",
+            "ethCorrelatedCategory": "ETH correlated",
+            "maxLtv": "Max LTV",
+            "maxLtvInfo": "The Maximum LTV ratio represents the maximum borrowing power of a specific collateral. For example, if a collateral has an LTV of 75%, the user can borrow up to 0.75 worth of ETH in the principal currency for every 1 ETH worth of collateral.",
+            "liquidationThreshold": "Liquidation threshold",
+            "liquidationThresholdInfo": "This represents the threshold at which a borrow position will be considered undercollateralized and subject to liquidation for each collateral. For example, if a collateral has a liquidation threshold of 80%, it means that the position will be liquidated when the debt value is worth 80% of the collateral value.",
+            "liquidationPenalty": "Liquidation penalty",
+            "liquidationPenaltyInfo": "When a liquidation occurs, liquidators repay up to 50% of the outstanding borrowed amount on behalf of the borrower. In return, they can buy the collateral at a discount and keep the difference (liquidation penalty) as a bonus.",
+            "body": "E-Mode increases your LTV for a selected category of assets, meaning that when E-mode is enabled, you will have higher borrowing power over assets of the same E-mode category which are defined by Aave Governance. You can enter E-Mode from your Dashboard.",
+            "learnMore": "Learn more"
         }
     },
     "bitocracyPage": {

From 5b5f826ec7fc583cf6bef943fc29e7c62aa2219c Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Mon, 12 Aug 2024 21:15:24 +0300
Subject: [PATCH 031/116] max with for emode category

---
 .../components/EModeDetails/EModeDetails.tsx                    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx
index eb881c496..6850774d7 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx
@@ -35,7 +35,7 @@ export const EModeDetails: FC<EModeDetailsProps> = () => {
       flatMode={!isMobile}
     >
       <div className="space-y-6">
-        <div className="flex justify-between items-center">
+        <div className="flex justify-between items-center max-w-[260px]">
           <Paragraph className="text-sm font-medium">
             {t(pageTranslations.category)}
           </Paragraph>

From 8bdcea5566e2b9c060d74215be6be9b6dd18f332 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Mon, 12 Aug 2024 23:54:43 +0300
Subject: [PATCH 032/116] top bar mock

---
 apps/frontend/src/app/1_atoms/Icons/Icons.tsx | 44 +++++++++
 .../StatisticsCard/StatisticsCard.tsx         | 24 +++--
 .../AaveReserveOverviewPage.tsx               |  5 +-
 .../components/TopPanel/TopPanel.tsx          | 90 +++++++++++++++++++
 .../frontend/src/locales/en/translations.json |  8 ++
 5 files changed, 162 insertions(+), 9 deletions(-)
 create mode 100644 apps/frontend/src/app/1_atoms/Icons/Icons.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx

diff --git a/apps/frontend/src/app/1_atoms/Icons/Icons.tsx b/apps/frontend/src/app/1_atoms/Icons/Icons.tsx
new file mode 100644
index 000000000..7ed2e9b16
--- /dev/null
+++ b/apps/frontend/src/app/1_atoms/Icons/Icons.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { IconType } from '@sovryn/ui';
+
+export const LinkIcon: IconType = (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_199_55951)">
+      <path
+        d="M12.6667 12.6667H3.33333V3.33333H8V2H3.33333C2.59333 2 2 2.6 2 3.33333V12.6667C2 13.4 2.59333 14 3.33333 14H12.6667C13.4 14 14 13.4 14 12.6667V8H12.6667V12.6667ZM9.33333 2V3.33333H11.7267L5.17333 9.88667L6.11333 10.8267L12.6667 4.27333V6.66667H14V2H9.33333Z"
+        fill="#B6BAC2"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_199_55951">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export const WalletIcon: IconType = (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M13.0405 4.25812H12.1364V2.14087C12.1365 2.03601 12.1129 1.93273 12.0675 1.84008C12.0222 1.74744 11.9566 1.66829 11.8764 1.60957C11.7965 1.55118 11.7047 1.51483 11.6089 1.50367C11.5131 1.49251 11.4163 1.50689 11.3268 1.54556L2.46318 4.30293C2.38353 4.34114 2.31133 4.39546 2.25045 4.46296C2.02458 4.60047 1.83624 4.80015 1.70446 5.04181C1.57268 5.28347 1.50215 5.55855 1.5 5.83921V12.9189C1.50156 13.3377 1.65583 13.7389 1.92921 14.035C2.20259 14.3312 2.57293 14.4983 2.95955 14.5H13.0405C13.4271 14.4983 13.7974 14.3312 14.0708 14.035C14.3442 13.7389 14.4984 13.3377 14.5 12.9189V5.83921C14.4984 5.4204 14.3442 5.01922 14.0708 4.72307C13.7974 4.42692 13.4271 4.25981 13.0405 4.25812ZM10.9545 4.25812H5.74864L10.9545 3.08824V4.25812ZM13.3182 10.6593H10.9545C10.6411 10.6593 10.3405 10.5244 10.1189 10.2843C9.89724 10.0442 9.77273 9.7186 9.77273 9.37906C9.77273 9.03952 9.89724 8.71389 10.1189 8.4738C10.3405 8.23371 10.6411 8.09882 10.9545 8.09882H13.3182V10.6593ZM10.9545 6.81859C10.3277 6.81859 9.72647 7.08835 9.2832 7.56853C8.83993 8.04872 8.59091 8.69998 8.59091 9.37906C8.59091 10.0581 8.83993 10.7094 9.2832 11.1896C9.72647 11.6698 10.3277 11.9395 10.9545 11.9395H13.3182V12.9189C13.3182 12.9987 13.2889 13.0752 13.2368 13.1316C13.1848 13.1881 13.1141 13.2198 13.0405 13.2198H2.95955C2.88589 13.2198 2.81525 13.1881 2.76316 13.1316C2.71108 13.0752 2.68182 12.9987 2.68182 12.9189V5.83921C2.68182 5.7997 2.689 5.76058 2.70296 5.72408C2.71692 5.68758 2.73737 5.65441 2.76316 5.62647C2.78895 5.59854 2.81957 5.57638 2.85326 5.56126C2.88696 5.54614 2.92307 5.53835 2.95955 5.53835H13.0405C13.0769 5.53835 13.113 5.54614 13.1467 5.56126C13.1804 5.57638 13.211 5.59854 13.2368 5.62647C13.2626 5.65441 13.2831 5.68758 13.297 5.72408C13.311 5.76058 13.3182 5.7997 13.3182 5.83921V6.81859H10.9545Z"
+      fill="#B6BAC2"
+    />
+    <path
+      d="M11.547 10.0187C11.8733 10.0187 12.1379 9.73211 12.1379 9.37858C12.1379 9.02505 11.8733 8.73846 11.547 8.73846C11.2206 8.73846 10.9561 9.02505 10.9561 9.37858C10.9561 9.73211 11.2206 10.0187 11.547 10.0187Z"
+      fill="#B6BAC2"
+    />
+  </svg>
+);
diff --git a/apps/frontend/src/app/2_molecules/StatisticsCard/StatisticsCard.tsx b/apps/frontend/src/app/2_molecules/StatisticsCard/StatisticsCard.tsx
index b2a7b146b..760467c72 100644
--- a/apps/frontend/src/app/2_molecules/StatisticsCard/StatisticsCard.tsx
+++ b/apps/frontend/src/app/2_molecules/StatisticsCard/StatisticsCard.tsx
@@ -3,8 +3,9 @@ import React, { FC } from 'react';
 import classNames from 'classnames';
 import { t } from 'i18next';
 
-import { HelperButton } from '@sovryn/ui';
+import { HelperButton, Icon } from '@sovryn/ui';
 
+import { LinkIcon } from '../../1_atoms/Icons/Icons';
 import { translations } from '../../../locales/i18n';
 import {
   AmountRenderer,
@@ -13,11 +14,13 @@ import {
 
 type StatisticsCardProps = Partial<AmountRendererProps> & {
   label: string;
+  link?: string;
   helperContent?: string;
   amountRendererClassName?: string;
 };
 
 export const StatisticsCard: FC<StatisticsCardProps> = ({
+  link,
   label,
   value,
   helperContent,
@@ -32,13 +35,20 @@ export const StatisticsCard: FC<StatisticsCardProps> = ({
         {helperContent && <HelperButton content={helperContent} />}
       </div>
 
-      <div className="text-2xl text-white">
+      <div className="text-2xl text-white flex items-center">
         {value ? (
-          <AmountRenderer
-            value={value}
-            {...props}
-            className={amountRendererClassName}
-          />
+          <>
+            <AmountRenderer
+              value={value}
+              {...props}
+              className={amountRendererClassName}
+            />
+            {link && (
+              <a href={link} className="ml-3">
+                <Icon icon={LinkIcon} />
+              </a>
+            )}
+          </>
         ) : (
           <span className={amountRendererClassName}>
             {t(translations.aavePage.topPanel['n/a'])}
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
index 6f2277eeb..9a8c22c6a 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
@@ -8,6 +8,7 @@ import { Tabs, TabSize, TabType } from '@sovryn/ui';
 
 import { translations } from '../../../locales/i18n';
 import { EModeDetails } from './components/EModeDetails/EModeDetails';
+import { TopPanel } from './components/TopPanel/TopPanel';
 import { WalletOverview } from './components/WalletOverview/WalletOverview';
 
 const pageTranslations = translations.aaveReserveOverviewPage;
@@ -28,9 +29,9 @@ const AaveReserveOverviewPage: FC = () => {
         <title>{t(pageTranslations.meta.title)}</title>
       </Helmet>
 
-      {/* TODO: <TopPanel /> */}
+      <TopPanel className="lg:mb-[110px] lg:mt-[52px]" />
 
-      <div className="pt-6 mt-6 space-y-6 lg:pt-0 lg:mt-0 lg:space-y-0 w-full">
+      <div className="pt-6 space-y-6 lg:pt-0 lg:space-y-0 w-full">
         <Tabs
           className="w-full bg-gray-80 rounded p-1 border border-gray-60 lg:hidden"
           index={activeOverviewTab}
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
new file mode 100644
index 000000000..7757eea41
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
@@ -0,0 +1,90 @@
+import React, { FC } from 'react';
+
+import classNames from 'classnames';
+import { t } from 'i18next';
+
+import { Heading, Icon, Paragraph, ParagraphSize } from '@sovryn/ui';
+
+import { LinkIcon, WalletIcon } from '../../../../1_atoms/Icons/Icons';
+import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
+import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
+import { translations } from '../../../../../locales/i18n';
+
+const pageTranslations = translations.aaveReserveOverviewPage.topPanel;
+
+type TopPanelProps = {
+  className?: string;
+};
+
+export const TopPanel: FC<TopPanelProps> = ({ className }) => {
+  // TODO: Mocked data
+  const asset = 'BTC';
+  const assetName = 'Bitcoin';
+  const reserveSizeInM = 1234.58;
+  const availableLiquidityM = 1234.58;
+  const utilizationRate = 2.79;
+  const oraclePrice = 11.5;
+
+  return (
+    <div className={classNames('w-full flex flex-col gap-6', className)}>
+      <div className="text-center py-6 px-10 space-y-3 lg:hidden">
+        <Heading className="text-base leading-5">
+          {t(pageTranslations.title)}
+        </Heading>
+        <Paragraph size={ParagraphSize.base}>
+          {t(pageTranslations.subtitle)}
+        </Paragraph>
+      </div>
+
+      <div className="gap-6 lg:gap-9 flex-shrink-0 grid grid-cols-2 lg:flex max-w-3xl">
+        <div className="col-span-2 flex items-center lg:items-start gap-3">
+          <div className="flex items-center gap-1">
+            <AssetRenderer
+              asset={asset}
+              showAssetLogo
+              assetClassName="text-base"
+              logoClassName="[&>svg]:h-8 [&>svg]:w-8 [&>svg]:mr-[10px]"
+            />
+            <span className="text-gray-40 text-base font-medium">
+              {assetName}
+            </span>
+          </div>
+
+          <div className="flex items-center gap-2 h-8">
+            <a href="#block-explorer">
+              <Icon icon={LinkIcon} className="text-gray-30" size={16} />
+            </a>
+            <a href="#block-explorer">
+              <Icon icon={WalletIcon} className="text-gray-30" size={16} />
+            </a>
+          </div>
+        </div>
+
+        {/* TODO: mock values */}
+        <StatisticsCard
+          label={t(pageTranslations.reserveSize)}
+          prefix="$"
+          suffix="M"
+          value={reserveSizeInM}
+        />
+        <StatisticsCard
+          label={t(pageTranslations.availableLiquidity)}
+          prefix="$"
+          suffix="M"
+          value={availableLiquidityM}
+        />
+        <StatisticsCard
+          label={t(pageTranslations.utilizationRate)}
+          value={utilizationRate}
+          suffix="%"
+        />
+        <StatisticsCard
+          label={t(pageTranslations.oraclePrice)}
+          value={oraclePrice}
+          prefix="$"
+          link="#oracle-price"
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index 17e03ff6a..92face2cd 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -877,6 +877,14 @@
         "meta": {
             "title": "Pool details"
         },
+        "topPanel": {
+            "title": "Lend and borrow",
+            "subtitle": "Borrow and earn interest by providing liquidity",
+            "reserveSize": "Reserve size",
+            "availableLiquidity": "Available liquidity",
+            "utilizationRate": "Utilization rate",
+            "oraclePrice": "Oracle price"
+        },
         "reserveStatusTab": {
             "title": "Reserve status"
         },

From f61ea42363e15184310ceb429c188389a76918da Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Tue, 13 Aug 2024 17:00:13 +0300
Subject: [PATCH 033/116] network switch

---
 .../NetworkSwitch/NetworkSwitch.tsx           | 21 ++++++++
 .../WalletOverview/WalletOverview.tsx         | 26 +++++-----
 .../components/SupplyAction/SupplyAction.tsx  |  2 +-
 .../src/app/5_pages/BorrowPage/BorrowPage.tsx | 48 +++++++++++--------
 .../src/app/5_pages/LendPage/LendPage.tsx     | 44 ++++++++++-------
 apps/frontend/src/constants/currencies.ts     |  1 +
 apps/frontend/src/router.tsx                  |  9 ----
 7 files changed, 89 insertions(+), 62 deletions(-)
 create mode 100644 apps/frontend/src/app/2_molecules/NetworkSwitch/NetworkSwitch.tsx

diff --git a/apps/frontend/src/app/2_molecules/NetworkSwitch/NetworkSwitch.tsx b/apps/frontend/src/app/2_molecules/NetworkSwitch/NetworkSwitch.tsx
new file mode 100644
index 000000000..c6c8b6bb4
--- /dev/null
+++ b/apps/frontend/src/app/2_molecules/NetworkSwitch/NetworkSwitch.tsx
@@ -0,0 +1,21 @@
+import React, { FC, ReactElement } from 'react';
+
+import { ChainId } from '@sovryn/ethers-provider';
+
+import { useChainStore } from '../../../hooks/useChainStore';
+import { NetworkBanner } from '../NetworkBanner/NetworkBanner';
+
+type NetworkSwitchProps = {
+  components: { [chain in ChainId]?: ReactElement };
+};
+
+export const NetworkSwitch: FC<NetworkSwitchProps> = ({ components }) => {
+  const { currentChainId } = useChainStore();
+
+  if (components[currentChainId] !== undefined) {
+    return components[currentChainId] as ReactElement;
+  } else {
+    const requiredChainId = Object.keys(components)[0];
+    return <NetworkBanner requiredChainId={requiredChainId} />;
+  }
+};
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/WalletOverview.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/WalletOverview.tsx
index 3d06037b1..c68edac40 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/WalletOverview.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/WalletOverview.tsx
@@ -15,6 +15,7 @@ import {
 import { Decimal } from '@sovryn/utils';
 
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
+import { ETH, WETH } from '../../../../../constants/currencies';
 import { useWalletConnect } from '../../../../../hooks';
 import { translations } from '../../../../../locales/i18n';
 import { BorrowAction } from './components/BorrowAction/BorrowAction';
@@ -22,6 +23,8 @@ import { SupplyAction } from './components/SupplyAction/SupplyAction';
 
 const pageTranslations = translations.aaveReserveOverviewPage;
 
+const ETH_ASSET_SYMBOLS = [ETH, WETH];
+
 type WalletOverviewProps = {
   asset: string;
 };
@@ -44,23 +47,16 @@ export const WalletOverview: FC<WalletOverviewProps> = ({
       {account ? (
         <>
           <div>
-            {['ETH', 'WETH'].includes(asset) && (
+            {ETH_ASSET_SYMBOLS.includes(asset) && (
               <Tabs
                 className="mb-5"
-                index={asset === 'ETH' ? 0 : 1}
-                onChange={e => setAsset(e === 0 ? 'ETH' : 'WETH')}
-                items={[
-                  {
-                    activeClassName: 'text-primary-20',
-                    dataAttribute: 'eth',
-                    label: 'ETH',
-                  },
-                  {
-                    activeClassName: 'text-primary-20',
-                    dataAttribute: 'weth',
-                    label: 'WETH',
-                  },
-                ]}
+                index={ETH_ASSET_SYMBOLS.indexOf(asset)}
+                onChange={e => setAsset(ETH_ASSET_SYMBOLS[e])}
+                items={ETH_ASSET_SYMBOLS.map(s => ({
+                  activeClassName: 'text-primary-20',
+                  dataAttribute: s,
+                  label: s,
+                }))}
                 size={TabSize.normal}
                 type={TabType.secondary}
               />
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx
index 3adbb4f44..18e05b312 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx
@@ -37,7 +37,7 @@ export const SupplyAction: FC<SupplyActionProps> = ({ asset }) => {
         <AssetAmountPriceRenderer
           value={availableToSupply}
           asset={asset}
-          className="text-left flex flex-col"
+          //   className="text-left flex flex-col"
           valueClassName="font-medium"
         />
       </div>
diff --git a/apps/frontend/src/app/5_pages/BorrowPage/BorrowPage.tsx b/apps/frontend/src/app/5_pages/BorrowPage/BorrowPage.tsx
index 194475622..1f7d2e7ea 100644
--- a/apps/frontend/src/app/5_pages/BorrowPage/BorrowPage.tsx
+++ b/apps/frontend/src/app/5_pages/BorrowPage/BorrowPage.tsx
@@ -5,11 +5,12 @@ import { Helmet } from 'react-helmet-async';
 
 import { Heading, Paragraph, ParagraphSize } from '@sovryn/ui';
 
-import { RSK_CHAIN_ID } from '../../../config/chains';
+import { BOB_CHAIN_ID, RSK_CHAIN_ID } from '../../../config/chains';
 
-import { NetworkBanner } from '../../2_molecules/NetworkBanner/NetworkBanner';
+import { NetworkSwitch } from '../../2_molecules/NetworkSwitch/NetworkSwitch';
 import { useAccount } from '../../../hooks/useAccount';
 import { translations } from '../../../locales/i18n';
+import AavePage from '../AavePage/AavePage';
 import { BorrowAssetsTable } from './components/BorrowAssetsTable/BorrowAssetsTable';
 import { OpenLoansTable } from './components/OpenLoansTable/OpenLoansTable';
 import { useGetOpenLoans } from './components/OpenLoansTable/hooks/useGetOpenLoans';
@@ -30,23 +31,32 @@ const BorrowPage: FC = () => {
       </Helmet>
 
       <div className="px-0 container md:mx-9 mx-0 md:mb-2 mb-7">
-        <NetworkBanner requiredChainId={RSK_CHAIN_ID}>
-          <Heading className="text-center mb-3 lg:text-2xl">
-            {t(translations.fixedInterestPage.title)}
-          </Heading>
-
-          <Paragraph
-            className="text-center mb-6 lg:mb-10"
-            size={ParagraphSize.base}
-          >
-            {t(translations.fixedInterestPage.subtitle)}
-          </Paragraph>
-
-          <div className="w-full">
-            {hasOpenLoans && <OpenLoansTable loans={loans} loading={loading} />}
-            <BorrowAssetsTable />
-          </div>
-        </NetworkBanner>
+        <NetworkSwitch
+          components={{
+            [RSK_CHAIN_ID]: (
+              <>
+                <Heading className="text-center mb-3 lg:text-2xl">
+                  {t(translations.fixedInterestPage.title)}
+                </Heading>
+
+                <Paragraph
+                  className="text-center mb-6 lg:mb-10"
+                  size={ParagraphSize.base}
+                >
+                  {t(translations.fixedInterestPage.subtitle)}
+                </Paragraph>
+
+                <div className="w-full">
+                  {hasOpenLoans && (
+                    <OpenLoansTable loans={loans} loading={loading} />
+                  )}
+                  <BorrowAssetsTable />
+                </div>
+              </>
+            ),
+            [BOB_CHAIN_ID]: <AavePage />,
+          }}
+        />
       </div>
     </>
   );
diff --git a/apps/frontend/src/app/5_pages/LendPage/LendPage.tsx b/apps/frontend/src/app/5_pages/LendPage/LendPage.tsx
index 9748bc794..8f499ec8f 100644
--- a/apps/frontend/src/app/5_pages/LendPage/LendPage.tsx
+++ b/apps/frontend/src/app/5_pages/LendPage/LendPage.tsx
@@ -5,10 +5,11 @@ import { Helmet } from 'react-helmet-async';
 
 import { Heading, Paragraph, ParagraphSize } from '@sovryn/ui';
 
-import { RSK_CHAIN_ID } from '../../../config/chains';
+import { BOB_CHAIN_ID, RSK_CHAIN_ID } from '../../../config/chains';
 
-import { NetworkBanner } from '../../2_molecules/NetworkBanner/NetworkBanner';
+import { NetworkSwitch } from '../../2_molecules/NetworkSwitch/NetworkSwitch';
 import { translations } from '../../../locales/i18n';
+import AavePage from '../AavePage/AavePage';
 import { LendFrame } from './components/LendFrame/LendFrame';
 
 const LendPage: FC = () => (
@@ -17,22 +18,29 @@ const LendPage: FC = () => (
       <title>{t(translations.lendPage.meta.title)}</title>
     </Helmet>
     <div className="px-0 container md:mx-9 mx-0 md:mb-2 mb-7">
-      <NetworkBanner requiredChainId={RSK_CHAIN_ID}>
-        <Heading className="text-center mb-3 lg:text-2xl">
-          {t(translations.lendPage.title)}
-        </Heading>
-
-        <Paragraph
-          className="text-center mb-6 lg:mb-10"
-          size={ParagraphSize.base}
-        >
-          {t(translations.lendPage.subtitle)}
-        </Paragraph>
-
-        <div className="w-full md:bg-gray-90 md:py-7 md:px-6 rounded mb-6">
-          <LendFrame />
-        </div>
-      </NetworkBanner>
+      <NetworkSwitch
+        components={{
+          [RSK_CHAIN_ID]: (
+            <>
+              <Heading className="text-center mb-3 lg:text-2xl">
+                {t(translations.lendPage.title)}
+              </Heading>
+
+              <Paragraph
+                className="text-center mb-6 lg:mb-10"
+                size={ParagraphSize.base}
+              >
+                {t(translations.lendPage.subtitle)}
+              </Paragraph>
+
+              <div className="w-full md:bg-gray-90 md:py-7 md:px-6 rounded mb-6">
+                <LendFrame />
+              </div>
+            </>
+          ),
+          [BOB_CHAIN_ID]: <AavePage />,
+        }}
+      />
     </div>
   </>
 );
diff --git a/apps/frontend/src/constants/currencies.ts b/apps/frontend/src/constants/currencies.ts
index dd4db1086..24832e73e 100644
--- a/apps/frontend/src/constants/currencies.ts
+++ b/apps/frontend/src/constants/currencies.ts
@@ -2,6 +2,7 @@ export const USD = 'USD';
 
 export const BITCOIN = 'BTC';
 export const ETH = 'ETH';
+export const WETH = 'WETH';
 export const SOV = 'SOV';
 
 export const BTC_RENDER_PRECISION = 8;
diff --git a/apps/frontend/src/router.tsx b/apps/frontend/src/router.tsx
index 6382e609c..eb6aaa0fa 100644
--- a/apps/frontend/src/router.tsx
+++ b/apps/frontend/src/router.tsx
@@ -8,7 +8,6 @@ import {
 
 import { PageContainer } from './app/4_templates';
 import { EmailVerificationStateContainer } from './app/4_templates/EmailVerificationStateContainer/EmailVerificationStateContainer';
-import AavePage from './app/5_pages/AavePage/AavePage';
 import AaveReserveOverviewPage from './app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage';
 import { earnPageLoader } from './app/5_pages/EarnPage/loader';
 import { EmailDuplicateVerifiedPage } from './app/5_pages/EmailDuplicateVerifiedPage/EmailDuplicateVerifiedPage';
@@ -95,10 +94,6 @@ const routes = [
         path: '/convert',
         element: <ConvertPage />,
       },
-      {
-        path: '/borrow/aave',
-        element: <AavePage />,
-      },
       {
         path: '/borrow/line-of-credit',
         element: <Zero />,
@@ -121,10 +116,6 @@ const routes = [
         path: '/earn/lend',
         element: <LendPage />,
       },
-      {
-        path: '/earn/lend/aave',
-        element: <AavePage />,
-      },
       {
         path: '/aave/reserve-overview',
         element: <AaveReserveOverviewPage />,

From 6cf3a44019e5b3f5d951a5c65083d67ea0b11fe3 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Tue, 13 Aug 2024 19:05:00 +0300
Subject: [PATCH 034/116] cleanup

---
 apps/frontend/src/app/1_atoms/Icons/Icons.tsx | 15 ++++
 .../AssetAmountInput/AssetAmountInput.tsx     | 39 +++++-----
 .../app/2_molecules/MaxButton/MaxButton.tsx   |  1 +
 .../StatisticsCard/StatisticsCard.tsx         |  6 +-
 .../src/app/5_pages/AavePage/AavePage.tsx     | 14 ++--
 .../BorrowAssetsList/BorrowAssetsList.tsx     | 71 +++++++++----------
 .../BorrowAssetAction/BorrowAssetAction.tsx   | 10 +--
 .../components/BorrowModal/BorrowForm.tsx     | 30 +++-----
 .../BorrowPositionsList.constants.tsx         |  4 +-
 .../BorrowPositionsList.tsx                   | 65 +++++++++--------
 .../EfficiencyModeCard/EfficiencyModeCard.tsx | 15 ++++
 .../RepayModal/RepayModalContainer.tsx        |  6 +-
 .../RepayModal/RepayWithWalletBalanceForm.tsx |  1 +
 .../CollateralRatioHealthBar.tsx              |  4 +-
 .../LendAssetsList.constants.tsx              |  4 +-
 .../LendAssetsList/LendAssetsList.tsx         | 60 +++++++++-------
 .../LendPositionsList.constants.tsx           |  6 +-
 .../LendPositionsList/LendPositionsList.tsx   | 64 +++++++++--------
 .../PoolPositionStat/PoolPositionStat.tsx     |  4 +-
 .../AavePage/components/TopPanel/TopPanel.tsx | 14 ++--
 .../AaveReserveOverviewPage.tsx               |  5 +-
 .../components/EModeDetails/EModeDetails.tsx  | 22 +-----
 .../components/TopPanel/TopPanel.tsx          |  5 +-
 .../frontend/src/locales/en/translations.json |  2 +-
 24 files changed, 247 insertions(+), 220 deletions(-)
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx

diff --git a/apps/frontend/src/app/1_atoms/Icons/Icons.tsx b/apps/frontend/src/app/1_atoms/Icons/Icons.tsx
index 7ed2e9b16..fe729f7be 100644
--- a/apps/frontend/src/app/1_atoms/Icons/Icons.tsx
+++ b/apps/frontend/src/app/1_atoms/Icons/Icons.tsx
@@ -42,3 +42,18 @@ export const WalletIcon: IconType = (
     />
   </svg>
 );
+
+export const EModeIcon: IconType = (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M2.7888 9.33172C2.68519 9.33172 2.62925 9.21023 2.69661 9.13151L9.96917 0.632031C10.0511 0.536295 10.2066 0.613419 10.1799 0.736569L8.89071 6.695C8.87435 6.7706 8.93195 6.84199 9.00929 6.84199L13.8677 6.84199C13.9757 6.84199 14.0299 6.97243 13.9537 7.04893L5.54038 15.4971C5.44947 15.5884 5.29773 15.4938 5.3397 15.372L7.36548 9.49257C7.39262 9.41378 7.3341 9.33172 7.25077 9.33172H2.7888Z"
+    />
+  </svg>
+);
diff --git a/apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx b/apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx
index f861e9a0c..35304e1ba 100644
--- a/apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx
+++ b/apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback } from 'react';
+import React, { FC, useCallback, useState } from 'react';
 
 import {
   AmountInput,
@@ -7,10 +7,11 @@ import {
   Select,
   SelectOption,
 } from '@sovryn/ui';
-import { Decimalish } from '@sovryn/utils';
+import { Decimal, Decimalish } from '@sovryn/utils';
 
 import { AmountRenderer } from '../AmountRenderer/AmountRenderer';
 import { AssetRenderer } from '../AssetRenderer/AssetRenderer';
+import { MaxButton } from '../MaxButton/MaxButton';
 
 type AssetAmountInputProps = {
   label?: string;
@@ -35,13 +36,11 @@ export const AssetAmountInput: FC<AssetAmountInputProps> = ({
   assetOptions,
   onAssetChange,
 }) => {
+  const [assetUsdValue] = useState(0); // TODO: mock
+
   const assetOptionRenderer = useCallback(
     ({ value }) => (
-      <AssetRenderer
-        dataAttribute="borrow-asset-asset"
-        showAssetLogo
-        asset={value}
-      />
+      <AssetRenderer dataAttribute="asset-amount" showAssetLogo asset={value} />
     ),
     [],
   );
@@ -59,9 +58,15 @@ export const AssetAmountInput: FC<AssetAmountInputProps> = ({
 
       <div className="relative">
         {maxAmount !== undefined && (
-          <span className="text-xs underline absolute right-0 -top-3 -translate-y-1/2">
-            (Max{' '}
-            <AmountRenderer value={maxAmount} suffix={assetValue} prefix="~" />)
+          <span className="absolute right-0 -top-3 -translate-y-1/2">
+            <MaxButton
+              token={assetValue}
+              value={maxAmount ?? 0}
+              onClick={() =>
+                onAmountChange &&
+                onAmountChange(Decimal.from(maxAmount).toString())
+              }
+            />
           </span>
         )}
 
@@ -74,13 +79,11 @@ export const AssetAmountInput: FC<AssetAmountInputProps> = ({
               placeholder="0"
               invalid={invalid}
             />
-            <div className="pr-4">
-              <AmountRenderer
-                className="text-gray-40"
-                value={0} // TODO: usd equivalent
-                prefix="$"
-              />
-            </div>
+            <AmountRenderer
+              className="text-gray-40 mr-4"
+              value={assetUsdValue}
+              prefix="$"
+            />
           </div>
 
           <Select
@@ -90,7 +93,7 @@ export const AssetAmountInput: FC<AssetAmountInputProps> = ({
             labelRenderer={assetOptionRenderer}
             className="min-w-[6.7rem]"
             menuClassName="max-h-[10rem] sm:max-h-[20rem]"
-            dataAttribute="borrow-asset-select"
+            dataAttribute="asset-select"
           />
         </div>
       </div>
diff --git a/apps/frontend/src/app/2_molecules/MaxButton/MaxButton.tsx b/apps/frontend/src/app/2_molecules/MaxButton/MaxButton.tsx
index 5192811d5..8a4fde9cf 100644
--- a/apps/frontend/src/app/2_molecules/MaxButton/MaxButton.tsx
+++ b/apps/frontend/src/app/2_molecules/MaxButton/MaxButton.tsx
@@ -30,6 +30,7 @@ export const MaxButton: FC<MaxButtonProps> = ({
   chainId,
 }) => (
   <button
+    type="button"
     onClick={onClick}
     className="text-xs font-medium underline whitespace-nowrap"
     {...applyDataAttr(dataAttribute)}
diff --git a/apps/frontend/src/app/2_molecules/StatisticsCard/StatisticsCard.tsx b/apps/frontend/src/app/2_molecules/StatisticsCard/StatisticsCard.tsx
index 760467c72..7304d0a0d 100644
--- a/apps/frontend/src/app/2_molecules/StatisticsCard/StatisticsCard.tsx
+++ b/apps/frontend/src/app/2_molecules/StatisticsCard/StatisticsCard.tsx
@@ -44,14 +44,14 @@ export const StatisticsCard: FC<StatisticsCardProps> = ({
               className={amountRendererClassName}
             />
             {link && (
-              <a href={link} className="ml-3">
-                <Icon icon={LinkIcon} />
+              <a href={link} className="ml-3" target="_blank" rel="noreferrer">
+                <Icon icon={LinkIcon} className="h-4 w-4 text-gray-30" />
               </a>
             )}
           </>
         ) : (
           <span className={amountRendererClassName}>
-            {t(translations.aavePage.topPanel['n/a'])}
+            {t(translations.common.na)}
           </span>
         )}
       </div>
diff --git a/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx b/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
index e6b10b8f1..baa74f0bb 100644
--- a/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
@@ -15,15 +15,13 @@ import { TopPanel } from './components/TopPanel/TopPanel';
 
 const pageTranslations = translations.aavePage;
 
-enum LiquidityTabs {
+enum ActiveTab {
   LEND = 0,
   BORROW,
 }
 
 const AavePage: FC = () => {
-  const [activeLiquidityTab, setActiveLiquidityTab] = useState<LiquidityTabs>(
-    LiquidityTabs.LEND,
-  );
+  const [activeTab, setActiveTab] = useState<ActiveTab>(ActiveTab.LEND);
 
   return (
     <div className="w-full pb-6 2xl:px-12">
@@ -37,7 +35,7 @@ const AavePage: FC = () => {
         {/* Tab selector */}
         <Tabs
           className="w-full bg-gray-80 rounded p-1 border border-gray-60 lg:hidden"
-          index={activeLiquidityTab}
+          index={activeTab}
           items={[
             {
               activeClassName: 'text-primary-20',
@@ -50,7 +48,7 @@ const AavePage: FC = () => {
               label: t(pageTranslations.common.borrow),
             },
           ]}
-          onChange={e => setActiveLiquidityTab(e)}
+          onChange={e => setActiveTab(e)}
           size={TabSize.normal}
           type={TabType.secondary}
         />
@@ -59,7 +57,7 @@ const AavePage: FC = () => {
         <div className="grid grid-cols-1 lg:grid-cols-2 lg:gap-5">
           <div
             className={classNames(
-              { hidden: activeLiquidityTab !== LiquidityTabs.LEND },
+              { hidden: activeTab !== ActiveTab.LEND },
               'lg:block space-y-4',
             )}
           >
@@ -70,7 +68,7 @@ const AavePage: FC = () => {
           {/* Borrowing column */}
           <div
             className={classNames(
-              { hidden: activeLiquidityTab !== LiquidityTabs.BORROW },
+              { hidden: activeTab !== ActiveTab.BORROW },
               'lg:block space-y-4',
             )}
           >
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
index 765004b05..00d80ac45 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useCallback, useState } from 'react';
 
 import { t } from 'i18next';
 
@@ -7,17 +7,38 @@ import { Accordion, Table } from '@sovryn/ui';
 import { AaveRowTitle } from '../../../../2_molecules/AavePoolRowTitle/AavePoolRowTitle';
 import { translations } from '../../../../../locales/i18n';
 import { COLUMNS_CONFIG } from './BorrowAssetsList.constants';
+import { BorrowPoolDetails } from './BorrowAssetsList.types';
 import { BorrowAssetDetails } from './components/BorrowAssetDetails/BorrowAssetDetails';
 
 const pageTranslations = translations.aavePage.borrowAssetsList;
 
-type BorrowAssetsListProps = {
-  account?: string;
-};
+type BorrowAssetsListProps = {};
 
-export const BorrowAssetsList: FC<BorrowAssetsListProps> = ({ account }) => {
+export const BorrowAssetsList: FC<BorrowAssetsListProps> = () => {
   const [open, setOpen] = useState<boolean>(true);
 
+  const rowTitleRenderer = useCallback(
+    r => <AaveRowTitle asset={r.asset} value={r.apr} suffix="%" label="APY" />,
+    [],
+  );
+  const mobileRenderer = useCallback(p => <BorrowAssetDetails pool={p} />, []);
+
+  // TODO: just a mock for now
+  const borrowPools: BorrowPoolDetails[] = [
+    {
+      asset: 'BTC',
+      apr: 2.01,
+      available: 12.34,
+      availableUsd: 100,
+    },
+    {
+      asset: 'ETH',
+      apr: 2.01,
+      available: 12.34,
+      availableUsd: 100,
+    },
+  ];
+
   return (
     <Accordion
       label={
@@ -30,37 +51,15 @@ export const BorrowAssetsList: FC<BorrowAssetsListProps> = ({ account }) => {
       open={open}
       onClick={setOpen}
     >
-      <div className="pt-3">
-        <Table
-          columns={COLUMNS_CONFIG}
-          rowClassName="bg-gray-80"
-          accordionClassName="bg-gray-60 border border-gray-70"
-          rowTitle={r => (
-            <AaveRowTitle
-              asset={r.asset}
-              value={r.apr}
-              suffix="%"
-              label="APY"
-            />
-          )}
-          rows={[
-            // TODO: just a mock for now
-            {
-              asset: 'BTC',
-              apr: 2.01,
-              available: 12.34,
-              availableUsd: 100,
-            },
-            {
-              asset: 'ETH',
-              apr: 2.01,
-              available: 12.34,
-              availableUsd: 100,
-            },
-          ]}
-          mobileRenderer={p => <BorrowAssetDetails pool={p} />}
-        />
-      </div>
+      <Table
+        className="mt-3"
+        columns={COLUMNS_CONFIG}
+        rowClassName="bg-gray-80"
+        accordionClassName="bg-gray-60 border border-gray-70"
+        rowTitle={rowTitleRenderer}
+        mobileRenderer={mobileRenderer}
+        rows={borrowPools}
+      />
     </Accordion>
   );
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
index 683323d97..118fdbb15 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useState } from 'react';
+import React, { FC, useState } from 'react';
 
 import { t } from 'i18next';
 import { useNavigate } from 'react-router-dom';
@@ -19,13 +19,13 @@ export const BorrowAssetAction: FC<BorrowAssetActionProps> = () => {
   const navigate = useNavigate();
   const [isBorrowModalOpen, setIsBorrowModalOpen] = useState<boolean>(false);
 
-  const handleBorrowClick = useCallback(() => {
+  const handleBorrowClick = () => {
     setIsBorrowModalOpen(true);
-  }, []);
+  };
 
-  const handleBorrowClose = useCallback(() => {
+  const handleBorrowClose = () => {
     setIsBorrowModalOpen(false);
-  }, []);
+  };
 
   return (
     <div className="flex items-center justify-center lg:justify-end space-x-2">
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
index 06b8f967e..9b9f6aac2 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
@@ -32,9 +32,10 @@ export const BorrowForm: FC<BorrowFormProps> = () => {
   const totalBorrow = Decimal.from(10); // TODO: this is mocked data. Replace with proper hook
   const collateralToLoanRate = Decimal.from(10); // TODO: this is mocked data. Replace with proper hook
   const collateralSize = Decimal.from(10); // TODO: this is mockd data. Replace with proper hook
-  const borrowableAssets = useMemo(() => ['BTC', 'SOV'], []); // TODO: this is mocked data. Replace with proper hook
+  const availablePools = useMemo(() => ['BTC', 'SOV'], []); // TODO: this is mocked data. Replace with proper hook
   const [maximumBorrowAmount] = useState<Decimal>(Decimal.from(10)); // TODO: this is mocked data. Replace with proper hook
-  const [borrowAsset, setBorrowAsset] = useState<string>(borrowableAssets[0]);
+  const [borrowApr] = useState(2);
+  const [borrowAsset, setBorrowAsset] = useState<string>(availablePools[0]);
   const [borrowAmount, setBorrowAmount, borrowSize] = useDecimalAmountInput('');
   const [acknowledge, setAcknowledge] = useState<boolean>(false);
 
@@ -44,7 +45,7 @@ export const BorrowForm: FC<BorrowFormProps> = () => {
 
   const borrowableAssetsOptions = useMemo(
     () =>
-      borrowableAssets.map(token => ({
+      availablePools.map(token => ({
         value: token,
         label: (
           <AssetRenderer
@@ -54,7 +55,7 @@ export const BorrowForm: FC<BorrowFormProps> = () => {
           />
         ),
       })),
-    [borrowableAssets],
+    [availablePools],
   );
 
   const isValidBorrowAmount = useMemo(
@@ -62,11 +63,6 @@ export const BorrowForm: FC<BorrowFormProps> = () => {
     [borrowSize, maximumBorrowAmount],
   );
 
-  const remainingSupply = useMemo(
-    () => maximumBorrowAmount.sub(borrowSize),
-    [borrowSize, maximumBorrowAmount],
-  );
-
   const collateralRatioThresholds = useMemo(
     () => getCollateralRatioThresholds(),
     [],
@@ -80,6 +76,7 @@ export const BorrowForm: FC<BorrowFormProps> = () => {
     return collateralSize.mul(collateralToLoanRate).div(totalBorrow).mul(100);
   }, [collateralSize, totalBorrow, borrowSize, collateralToLoanRate]);
 
+  // TODO: expand validations
   const submitButtonDisabled = useMemo(
     () => !isValidBorrowAmount || borrowSize.lte(0) || !acknowledge,
     [isValidBorrowAmount, borrowSize, acknowledge],
@@ -112,12 +109,7 @@ export const BorrowForm: FC<BorrowFormProps> = () => {
       <SimpleTable>
         <SimpleTableRow
           label={t(translations.aavePage.borrowForm.borrowApr)}
-          value={
-            <AmountRenderer
-              value={remainingSupply.toNumber()}
-              suffix={borrowAsset}
-            />
-          }
+          value={<AmountRenderer value={borrowApr} suffix={'%'} />}
         />
       </SimpleTable>
 
@@ -126,9 +118,7 @@ export const BorrowForm: FC<BorrowFormProps> = () => {
           <div className="flex flex-row justify-start items-center gap-2">
             <span>{t(translations.aavePage.borrowForm.collateralRatio)}</span>
           </div>
-          <div className="">
-            <AmountRenderer value={collateralRatio.toString()} suffix="%" />
-          </div>
+          <AmountRenderer value={collateralRatio.toString()} suffix="%" />
         </div>
 
         <HealthBar
@@ -143,7 +133,7 @@ export const BorrowForm: FC<BorrowFormProps> = () => {
       <SimpleTable>
         <SimpleTableRow
           label={t(translations.aavePage.borrowForm.liquidationPrice)}
-          value={t(translations.aavePage.common['n/a'])}
+          value={<span>{t(translations.common.na)}</span>}
         />
         <SimpleTableRow
           label={t(translations.aavePage.borrowForm.tokenPrice, {
@@ -159,7 +149,7 @@ export const BorrowForm: FC<BorrowFormProps> = () => {
         label={
           <span>
             {t(translations.aavePage.borrowForm.acknowledge)}{' '}
-            <Link text="Learn more" href="#learn-more" />{' '}
+            <Link text="Learn more" href="#learn-more" />
             {/* TODO: Add proper learn more href */}
           </span>
         }
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
index b4d5d7240..23a4cc203 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
@@ -36,8 +36,8 @@ export const COLUMNS_CONFIG = [
     align: Align.center,
     className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
     title: (
-      <span className="flex items-center pl-5 gap-1 text-gray-30">
-        {t(pageTranslations.common.balance)}{' '}
+      <span className="flex items-center pl-5 text-gray-30">
+        {t(pageTranslations.common.balance)}
       </span>
     ),
     cellRenderer: (pool: BorrowPosition) => (
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
index 7ce9237f0..5fb93bcbe 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useCallback, useState } from 'react';
 
 import { t } from 'i18next';
 
@@ -9,6 +9,7 @@ import { useAccount } from '../../../../../hooks/useAccount';
 import { translations } from '../../../../../locales/i18n';
 import { PoolPositionStat } from '../PoolPositionStat/PoolPositionStat';
 import { COLUMNS_CONFIG } from './BorrowPositionsList.constants';
+import { BorrowPosition } from './BorrowPositionsList.types';
 import { BorrowPositionDetails } from './components/BorrowPositionDetails/BorrowPositionDetails';
 
 const pageTranslations = translations.aavePage;
@@ -18,6 +19,35 @@ type BorrowPositionsListProps = {};
 export const BorrowPositionsList: FC<BorrowPositionsListProps> = () => {
   const { account } = useAccount();
   const [open, setOpen] = useState<boolean>(true);
+  const [balance] = useState(123.45); // TODO: mock
+  const [apy] = useState(2.05); // TODO: mock
+  const [borrowPowerUsed] = useState(2.05); // TODO: mock
+
+  const rowTitleRenderer = useCallback(
+    r => <AaveRowTitle asset={r.asset} value={r.balance} suffix={r.asset} />,
+    [],
+  );
+
+  const mobileRenderer = useCallback(
+    p => <BorrowPositionDetails position={p} />,
+    [],
+  );
+
+  // TODO: mocked values
+  const borrowPositions: BorrowPosition[] = [
+    {
+      asset: 'BTC',
+      apr: 2.24,
+      balance: 12.34,
+      apyType: 'variable',
+    },
+    {
+      asset: 'ETH',
+      apr: 2.33,
+      balance: 12.34,
+      apyType: 'fixed',
+    },
+  ];
 
   return (
     <Accordion
@@ -34,22 +64,21 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = () => {
       {account ? (
         <>
           <div className="flex flex-col gap-2 mb-2 lg:flex-row lg:gap-6 lg:mb-6">
-            {/* TODO: mocked values */}
             <PoolPositionStat
               label={t(pageTranslations.common.balance)}
-              value={123.45}
+              value={balance}
               prefix="$"
               precision={2}
             />
             <PoolPositionStat
               label={t(pageTranslations.common.apy)}
-              value={2.05}
+              value={apy}
               suffix="%"
               precision={2}
             />
             <PoolPositionStat
               label={t(pageTranslations.borrowPositionsList.borrowPowerUsed)}
-              value={99}
+              value={borrowPowerUsed}
               suffix="%"
               precision={2}
             />
@@ -58,29 +87,9 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = () => {
             columns={COLUMNS_CONFIG}
             rowClassName="bg-gray-80"
             accordionClassName="bg-gray-60 border border-gray-70"
-            rowTitle={r => (
-              <AaveRowTitle
-                asset={r.asset}
-                value={r.balance}
-                suffix={r.asset}
-              />
-            )}
-            rows={[
-              // TODO: mocked values
-              {
-                asset: 'BTC',
-                apr: 2.24,
-                balance: 12.34,
-                apyType: 'variable',
-              },
-              {
-                asset: 'ETH',
-                apr: 2.33,
-                balance: 12.34,
-                apyType: 'fixed',
-              },
-            ]}
-            mobileRenderer={p => <BorrowPositionDetails position={p} />}
+            rowTitle={rowTitleRenderer}
+            mobileRenderer={mobileRenderer}
+            rows={borrowPositions}
           />
         </>
       ) : (
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx
new file mode 100644
index 000000000..970c86fdd
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx
@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+
+import { Icon } from '@sovryn/ui';
+
+import { EModeIcon } from '../../../../../../1_atoms/Icons/Icons';
+
+type EfficiencyModeCardProps = {};
+
+export const EfficiencyModeCard: FC<EfficiencyModeCardProps> = () => {
+  return (
+    <div>
+      <Icon icon={EModeIcon} />
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx
index 9024a5913..146c4effc 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx
@@ -21,7 +21,7 @@ type RepayModalContainerProps = {
   handleCloseModal: () => unknown;
 };
 
-enum PaymentTabs {
+enum RepayWith {
   BALANCE = 0,
   COLLATERAL,
 }
@@ -30,7 +30,7 @@ export const RepayModalContainer: FC<RepayModalContainerProps> = ({
   isOpen,
   handleCloseModal,
 }) => {
-  const [activeTab, setActiveTab] = useState<PaymentTabs>(PaymentTabs.BALANCE);
+  const [activeTab, setActiveTab] = useState<RepayWith>(RepayWith.BALANCE);
 
   return (
     <Dialog disableFocusTrap isOpen={isOpen}>
@@ -66,7 +66,7 @@ export const RepayModalContainer: FC<RepayModalContainerProps> = ({
           type={TabType.secondary}
         />
 
-        {activeTab === PaymentTabs.BALANCE ? (
+        {activeTab === RepayWith.BALANCE ? (
           <RepayWithWalletBalanceForm onSuccess={handleCloseModal} />
         ) : (
           <RepayWithCollateralForm onSuccess={handleCloseModal} />
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx
index cdb366b3f..9dda5864d 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx
@@ -63,6 +63,7 @@ export const RepayWithWalletBalanceForm: FC<
     return collateralSize.mul(collateralToLoanRate).div(totalBorrowed).mul(100);
   }, [collateralSize, totalBorrowed, repaySize, collateralToLoanRate]);
 
+  // TODO: Add validations
   const submitButtonDisabled = useMemo(
     () => !isValidRepayAmount || repaySize.lte(0),
     [isValidRepayAmount, repaySize],
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.tsx b/apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.tsx
index 6510a791e..1c430c2f6 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.tsx
@@ -34,9 +34,7 @@ export const CollateralRatioHealthBar: FC<CollateralRatioHealthBarProps> = ({
         <div className="flex flex-row justify-start items-center gap-2">
           <span>{t(translations.aavePage.common.collateralRatio)}</span>
         </div>
-        <div className="">
-          <AmountRenderer value={ratio.toString()} suffix="%" />
-        </div>
+        <AmountRenderer value={ratio.toString()} suffix="%" />
       </div>
 
       <HealthBar
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
index 407784df3..75cd765b7 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
@@ -36,7 +36,7 @@ export const COLUMNS_CONFIG = [
     align: Align.center,
     title: (
       <span className="text-gray-30">
-        {t(pageTranslations.lendAssetsList.walletBalance)}{' '}
+        {t(pageTranslations.lendAssetsList.walletBalance)}
       </span>
     ),
     cellRenderer: (pool: LendPoolDetails) => (
@@ -49,7 +49,7 @@ export const COLUMNS_CONFIG = [
     align: Align.center,
     title: (
       <span className="flex items-center gap-1 text-gray-30">
-        {t(pageTranslations.common.apy)}{' '}
+        {t(pageTranslations.common.apy)}
         <HelperButton content={t(pageTranslations.common.apyInfo)} />
       </span>
     ),
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
index ab4cf58d8..47a086621 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useCallback, useState } from 'react';
 
 import { t } from 'i18next';
 
@@ -7,6 +7,7 @@ import { Accordion, Checkbox, Table } from '@sovryn/ui';
 import { AaveRowTitle } from '../../../../2_molecules/AavePoolRowTitle/AavePoolRowTitle';
 import { translations } from '../../../../../locales/i18n';
 import { COLUMNS_CONFIG } from './LendAssetsList.constants';
+import { LendPoolDetails } from './LendAssetsList.types';
 import { LendAssetDetails } from './components/LendAssetDetails/LendAssetDetails';
 
 const pageTranslations = translations.aavePage;
@@ -19,6 +20,28 @@ export const LendAssetsList: FC<LendAssetsListProps> = ({ account }) => {
   const [open, setOpen] = useState<boolean>(true);
   const [showZeroBalances, setShowZeroBalances] = useState<boolean>(true);
 
+  const mobileRenderer = useCallback(p => <LendAssetDetails pool={p} />, []);
+  const rowTitleRenderer = useCallback(
+    r => <AaveRowTitle asset={r.asset} value={r.apy} suffix="%" label="APY" />,
+    [],
+  );
+
+  // TODO: mocked values
+  const lendPools: LendPoolDetails[] = [
+    {
+      asset: 'BTC',
+      apy: 2.02,
+      walletBalance: 12.34,
+      canBeCollateral: true,
+    },
+    {
+      asset: 'ETH',
+      apy: 2.02,
+      walletBalance: 12.34,
+      canBeCollateral: false,
+    },
+  ];
+
   return (
     <Accordion
       label={
@@ -31,37 +54,20 @@ export const LendAssetsList: FC<LendAssetsListProps> = ({ account }) => {
       open={open}
       onClick={setOpen}
     >
-      <div className="py-2 mb-2">
-        <Checkbox
-          label={t(pageTranslations.lendAssetsList.showZeroBalances)}
-          checked={showZeroBalances}
-          onChange={s => setShowZeroBalances(s)}
-        />
-      </div>
+      <Checkbox
+        containerClassName="mt-2 mb-4"
+        label={t(pageTranslations.lendAssetsList.showZeroBalances)}
+        checked={showZeroBalances}
+        onChange={s => setShowZeroBalances(s)}
+      />
 
       <Table
         columns={COLUMNS_CONFIG}
         rowClassName="bg-gray-80"
         accordionClassName="bg-gray-60 border border-gray-70"
-        rowTitle={r => (
-          <AaveRowTitle asset={r.asset} value={r.apy} suffix="%" label="APY" />
-        )}
-        rows={[
-          // TODO: mocked values
-          {
-            asset: 'BTC',
-            apy: 2.02,
-            walletBalance: 12.34,
-            canBeCollateral: true,
-          },
-          {
-            asset: 'ETH',
-            apy: 2.02,
-            walletBalance: 12.34,
-            canBeCollateral: false,
-          },
-        ]}
-        mobileRenderer={p => <LendAssetDetails pool={p} />}
+        rowTitle={rowTitleRenderer}
+        mobileRenderer={mobileRenderer}
+        rows={lendPools}
       />
     </Accordion>
   );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
index b0da59974..5f875685a 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
@@ -54,7 +54,7 @@ export const COLUMNS_CONFIG = [
     className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
     title: (
       <span className="flex items-center gap-1 text-gray-30">
-        {t(translations.aavePage.common.apy)}{' '}
+        {t(translations.aavePage.common.apy)}
         <HelperButton content={t(pageTranslations.common.apyInfo)} />
       </span>
     ),
@@ -67,8 +67,8 @@ export const COLUMNS_CONFIG = [
     align: Align.center,
     className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
     title: (
-      <span className="flex items-center gap-1 text-gray-30">
-        {t(pageTranslations.common.collateral)}{' '}
+      <span className="flex items-center text-gray-30">
+        {t(pageTranslations.common.collateral)}
       </span>
     ),
     cellRenderer: (position: LendPosition) => (
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
index 234cff3b0..37ab576ac 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useCallback, useState } from 'react';
 
 import { t } from 'i18next';
 
@@ -9,6 +9,7 @@ import { useAccount } from '../../../../../hooks/useAccount';
 import { translations } from '../../../../../locales/i18n';
 import { PoolPositionStat } from '../PoolPositionStat/PoolPositionStat';
 import { COLUMNS_CONFIG } from './LendPositionsList.constants';
+import { LendPosition } from './LendPositionsList.types';
 import { LendPositionDetails } from './components/LendPositionDetails/LendPositionDetails';
 
 const pageTranslations = translations.aavePage;
@@ -18,6 +19,34 @@ type LendPositionsListProps = {};
 export const LendPositionsList: FC<LendPositionsListProps> = () => {
   const { account } = useAccount();
   const [open, setOpen] = useState<boolean>(true);
+  const [balance] = useState(100); // TODO: mocked data
+  const [apy] = useState(2.3); // TODO: mocked data
+  const [collateral] = useState(3); // TODO: mocked data
+
+  const rowTitleRenderer = useCallback(
+    r => <AaveRowTitle asset={r.asset} value={r.balance} suffix={r.asset} />,
+    [],
+  );
+  const mobileRenderer = useCallback(
+    p => <LendPositionDetails position={p} />,
+    [],
+  );
+
+  // TODO: mocked data
+  const lendPositions: LendPosition[] = [
+    {
+      asset: 'BTC',
+      apy: 2.01,
+      balance: 12.34,
+      collateral: true,
+    },
+    {
+      asset: 'ETH',
+      apy: 2.04,
+      balance: 12.34,
+      collateral: false,
+    },
+  ];
 
   return (
     <Accordion
@@ -34,23 +63,22 @@ export const LendPositionsList: FC<LendPositionsListProps> = () => {
       {account ? (
         <>
           <div className="flex flex-col gap-2 mb-2 lg:flex-row lg:gap-6 lg:mb-6">
-            {/* TODO: mock data */}
             <PoolPositionStat
               label={t(pageTranslations.common.balance)}
-              value={123.45}
+              value={balance}
               prefix="$"
               precision={2}
             />
             <PoolPositionStat
               label={t(pageTranslations.common.apy)}
               labelInfo={t(pageTranslations.common.apyInfo)}
-              value={2.05}
+              value={apy}
               suffix="%"
               precision={2}
             />
             <PoolPositionStat
               label={t(pageTranslations.common.collateral)}
-              value={123.45}
+              value={collateral}
               prefix="$"
               precision={2}
             />
@@ -59,29 +87,9 @@ export const LendPositionsList: FC<LendPositionsListProps> = () => {
             columns={COLUMNS_CONFIG}
             rowClassName="bg-gray-80"
             accordionClassName="bg-gray-60 border border-gray-70"
-            rowTitle={r => (
-              <AaveRowTitle
-                asset={r.asset}
-                value={r.balance}
-                suffix={r.asset}
-              />
-            )}
-            rows={[
-              // TODO: mocked data
-              {
-                asset: 'BTC',
-                apy: 2.01,
-                balance: 12.34,
-                collateral: true,
-              },
-              {
-                asset: 'ETH',
-                apy: 2.04,
-                balance: 12.34,
-                collateral: false,
-              },
-            ]}
-            mobileRenderer={p => <LendPositionDetails position={p} />}
+            rowTitle={rowTitleRenderer}
+            mobileRenderer={mobileRenderer}
+            rows={lendPositions}
           />
         </>
       ) : (
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/PoolPositionStat/PoolPositionStat.tsx b/apps/frontend/src/app/5_pages/AavePage/components/PoolPositionStat/PoolPositionStat.tsx
index 3bd14700a..87aeb177b 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/PoolPositionStat/PoolPositionStat.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/PoolPositionStat/PoolPositionStat.tsx
@@ -28,9 +28,9 @@ export const PoolPositionStat: React.FC<PoolPositionStatProps> = ({
       )}
     >
       <span className="text-xs  font-medium flex">
-        {label}{' '}
+        {label}
         {labelInfo && (
-          <HelperButton className="ml-1 lg:hidden" content={labelInfo} />
+          <HelperButton className="ml-2 lg:hidden" content={labelInfo} />
         )}
       </span>
 
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx b/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
index 1700cb85e..23a4685fe 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 
 import { t } from 'i18next';
 
@@ -21,6 +21,9 @@ type TopPanelProps = {};
 
 export const TopPanel: FC<TopPanelProps> = () => {
   const { account } = useAccount();
+  const [netWorth] = useState(1234567.58); // TODO: mock
+  const [netApy] = useState(2.69); // TODO: mock
+  const [collateralRatio] = useState(11); // TODO: mock
 
   return (
     <div className="w-full flex flex-col gap-6">
@@ -35,22 +38,21 @@ export const TopPanel: FC<TopPanelProps> = () => {
 
       <div className="flex flex-col gap-6 md:flex-row">
         <div className="flex flex-col gap-4 md:py-12 md:flex-row md:gap-9 flex-shrink-0">
-          {/* TODO: mock values */}
           <StatisticsCard
             label={t(pageTranslations.netWorth)}
             prefix="$"
-            value={account ? 1234567.58 : undefined}
+            value={account ? netWorth : undefined}
           />
           <div className="flex gap-9">
             <StatisticsCard
               label={t(pageTranslations.netApy)}
-              value={account ? 2.69 : undefined}
+              value={account ? netApy : undefined}
               suffix="%"
               helperContent={t(pageTranslations.netApyInfo)}
             />
             <StatisticsCard
               label={t(pageTranslations.collateralRatio)}
-              value={account ? 11.5 : undefined}
+              value={account ? collateralRatio : undefined}
               suffix="%"
               helperContent={t(pageTranslations.collateralRatioInfo)}
             />
@@ -59,7 +61,7 @@ export const TopPanel: FC<TopPanelProps> = () => {
 
         <div className="md:flex md:justify-end md:w-full md:items-end md:pb-5">
           <Button
-            text="View transactions"
+            text={t(pageTranslations.viewTransactions)}
             style={ButtonStyle.secondary}
             size={ButtonSize.small}
           />
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
index 9a8c22c6a..a8ed4e0c4 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
@@ -19,6 +19,7 @@ enum OverviewTab {
 }
 
 const AaveReserveOverviewPage: FC = () => {
+  const [asset] = useState('BTC'); // TODO: mock
   const [activeOverviewTab, setActiveOverviewTab] = useState<OverviewTab>(
     OverviewTab.RESERVE,
   );
@@ -29,7 +30,7 @@ const AaveReserveOverviewPage: FC = () => {
         <title>{t(pageTranslations.meta.title)}</title>
       </Helmet>
 
-      <TopPanel className="lg:mb-[110px] lg:mt-[52px]" />
+      <TopPanel asset={asset} className="lg:mb-[110px] lg:mt-[52px]" />
 
       <div className="pt-6 space-y-6 lg:pt-0 lg:space-y-0 w-full">
         <Tabs
@@ -70,7 +71,7 @@ const AaveReserveOverviewPage: FC = () => {
               'lg:block space-y-4',
             )}
           >
-            <WalletOverview asset="ETH" />
+            <WalletOverview asset={asset} />
           </div>
         </div>
       </div>
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx
index 6850774d7..02ab684fb 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx
@@ -4,6 +4,7 @@ import { t } from 'i18next';
 
 import { Accordion, Icon, Link, Paragraph } from '@sovryn/ui';
 
+import { EModeIcon } from '../../../../1_atoms/Icons/Icons';
 import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
 import { useIsMobile } from '../../../../../hooks/useIsMobile';
 import { translations } from '../../../../../locales/i18n';
@@ -40,26 +41,7 @@ export const EModeDetails: FC<EModeDetailsProps> = () => {
             {t(pageTranslations.category)}
           </Paragraph>
           <Paragraph className="text-sm font-medium flex items-center">
-            <Icon
-              size={16}
-              className="mr-2"
-              icon={
-                <svg
-                  width="16"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    fill-rule="evenodd"
-                    clip-rule="evenodd"
-                    d="M2.78855 9.33172C2.68495 9.33172 2.62901 9.21023 2.69637 9.13151L9.96892 0.632031C10.0508 0.536295 10.2063 0.613419 10.1797 0.736569L8.89046 6.695C8.87411 6.7706 8.9317 6.84199 9.00905 6.84199L13.8675 6.84199C13.9755 6.84199 14.0296 6.97243 13.9535 7.04893L5.54013 15.4971C5.44923 15.5884 5.29749 15.4938 5.33946 15.372L7.36524 9.49257C7.39238 9.41378 7.33385 9.33172 7.25053 9.33172H2.78855Z"
-                    fill="#F58C31"
-                  />
-                </svg>
-              }
-            />
+            <Icon size={16} className="mr-2 text-primary-30" icon={EModeIcon} />
             {t(pageTranslations.ethCorrelatedCategory)}
           </Paragraph>
         </div>
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
index 7757eea41..7603321ea 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
@@ -13,12 +13,12 @@ import { translations } from '../../../../../locales/i18n';
 const pageTranslations = translations.aaveReserveOverviewPage.topPanel;
 
 type TopPanelProps = {
+  asset: string;
   className?: string;
 };
 
-export const TopPanel: FC<TopPanelProps> = ({ className }) => {
+export const TopPanel: FC<TopPanelProps> = ({ asset, className }) => {
   // TODO: Mocked data
-  const asset = 'BTC';
   const assetName = 'Bitcoin';
   const reserveSizeInM = 1234.58;
   const availableLiquidityM = 1234.58;
@@ -60,7 +60,6 @@ export const TopPanel: FC<TopPanelProps> = ({ className }) => {
           </div>
         </div>
 
-        {/* TODO: mock values */}
         <StatisticsCard
           label={t(pageTranslations.reserveSize)}
           prefix="$"
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index 92face2cd..b2570292b 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -815,7 +815,7 @@
             "netApyInfo": "Net APY is the combined effect of all supply and borrow positions on net worth, including incentives. It is possible to have a negative net APY if debt APY is higher than supply APY.",
             "collateralRatio": "Collateral ratio",
             "collateralRatioInfo": "The collateral ratio defines the maximum amount of assets that can be borrowed with a specific collatera",
-            "n/a": "N/A"
+            "viewTransactions": "View transactions"
         },
         "borrowPositionsList": {
             "title": "Your loans",

From a3cfaedb66fe0efd2f7bd0fd90fff1a148189d8a Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Tue, 13 Aug 2024 19:32:08 +0300
Subject: [PATCH 035/116] ui fixes

---
 .../AssetAmountInput/AssetAmountInput.tsx           | 13 ++-----------
 .../LendAssetDetails/LendAssetDetails.tsx           |  1 +
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx b/apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx
index 35304e1ba..0d3abb9a6 100644
--- a/apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx
+++ b/apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx
@@ -1,12 +1,6 @@
 import React, { FC, useCallback, useState } from 'react';
 
-import {
-  AmountInput,
-  Paragraph,
-  ParagraphSize,
-  Select,
-  SelectOption,
-} from '@sovryn/ui';
+import { AmountInput, Paragraph, Select, SelectOption } from '@sovryn/ui';
 import { Decimal, Decimalish } from '@sovryn/utils';
 
 import { AmountRenderer } from '../AmountRenderer/AmountRenderer';
@@ -48,10 +42,7 @@ export const AssetAmountInput: FC<AssetAmountInputProps> = ({
   return (
     <div>
       {label && (
-        <Paragraph
-          size={ParagraphSize.base}
-          className="mb-1 text-gray-30 font-medium"
-        >
+        <Paragraph className="mb-1 text-gray-30 font-medium text-xs">
           {label}
         </Paragraph>
       )}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
index 79afdc3ff..9c15b6589 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
@@ -40,6 +40,7 @@ export const LendAssetDetails: FC<LendAssetDetailsProps> = ({ pool }) => {
         {/* Can be collateral */}
         <SimpleTableRow
           label={t(translations.aavePage.lendAssetsList.canBeCollateral)}
+          valueClassName="flex justify-end"
           value={
             <Icon
               icon={pool.canBeCollateral ? IconNames.CHECK : IconNames.X_MARK}

From 7fede62106886aaada46a648b83a24e359b23922 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Tue, 13 Aug 2024 19:37:43 +0300
Subject: [PATCH 036/116] ui fixes, usd prices

---
 .../AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx | 2 +-
 .../components/BorrowAssetDetails/BorrowAssetDetails.tsx  | 8 +++++++-
 .../BorrowPositionDetails/BorrowPositionDetails.tsx       | 6 +++++-
 .../components/LendAssetDetails/LendAssetDetails.tsx      | 6 +++++-
 .../LendPositionDetails/LendPositionDetails.tsx           | 6 +++++-
 5 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/apps/frontend/src/app/2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx b/apps/frontend/src/app/2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx
index 8d47bc779..201798a8c 100644
--- a/apps/frontend/src/app/2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx
+++ b/apps/frontend/src/app/2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx
@@ -25,7 +25,7 @@ export const AssetAmountPriceRenderer: FC<AssetAmountPriceRendererProps> = ({
   const usdPrice = value;
 
   return (
-    <div className={className ?? 'flex flex-col text-right'}>
+    <div className={className ?? 'flex flex-col text-right space-y-1'}>
       <AmountRenderer value={value} suffix={asset} className={valueClassName} />
       <AmountRenderer
         value={usdPrice}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
index fce21716d..047e215aa 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
@@ -5,6 +5,7 @@ import { t } from 'i18next';
 import { HelperButton, SimpleTableRow } from '@sovryn/ui';
 
 import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
+import { AssetAmountPriceRenderer } from '../../../../../../2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer';
 import { translations } from '../../../../../../../locales/i18n';
 import { BorrowPoolDetails } from '../../BorrowAssetsList.types';
 import { BorrowAssetAction } from '../BorrowAssetAction/BorrowAssetAction';
@@ -33,7 +34,12 @@ export const BorrowAssetDetails: FC<BorrowAssetDetailsProps> = ({ pool }) => {
         {/* Available */}
         <SimpleTableRow
           label={t(pageTranslations.borrowAssetsList.available)}
-          value={<AmountRenderer value={pool.available} suffix={pool.asset} />}
+          value={
+            <AssetAmountPriceRenderer
+              value={pool.available}
+              asset={pool.asset}
+            />
+          }
         />
       </div>
 
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
index 9c219c711..feb9afa33 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
@@ -5,6 +5,7 @@ import { t } from 'i18next';
 import { HelperButton, SimpleTableRow } from '@sovryn/ui';
 
 import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
+import { AssetAmountPriceRenderer } from '../../../../../../2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer';
 import { translations } from '../../../../../../../locales/i18n';
 import { BorrowPosition } from '../../BorrowPositionsList.types';
 import { BorrowPositionAction } from '../BorrowPositionAction/BorrowPositionAction';
@@ -23,7 +24,10 @@ export const BorrowPositionDetails: FC<BorrowPositionDetailsProps> = ({
         <SimpleTableRow
           label={t(translations.aavePage.common.balance)}
           value={
-            <AmountRenderer value={position.balance} suffix={position.asset} />
+            <AssetAmountPriceRenderer
+              value={position.balance}
+              asset={position.asset}
+            />
           }
         />
 
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
index 9c15b6589..f02aea902 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
@@ -6,6 +6,7 @@ import { t } from 'i18next';
 import { HelperButton, Icon, IconNames, SimpleTableRow } from '@sovryn/ui';
 
 import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
+import { AssetAmountPriceRenderer } from '../../../../../../2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer';
 import { translations } from '../../../../../../../locales/i18n';
 import { LendPoolDetails } from '../../LendAssetsList.types';
 import { LendAssetAction } from '../LendAssetAction/LendAssetAction';
@@ -22,7 +23,10 @@ export const LendAssetDetails: FC<LendAssetDetailsProps> = ({ pool }) => {
         <SimpleTableRow
           label={t(translations.aavePage.lendAssetsList.walletBalance)}
           value={
-            <AmountRenderer value={pool.walletBalance} suffix={pool.asset} />
+            <AssetAmountPriceRenderer
+              value={pool.walletBalance}
+              asset={pool.asset}
+            />
           }
         />
 
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
index 250b549d2..d1bcd4c36 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
@@ -5,6 +5,7 @@ import { t } from 'i18next';
 import { HelperButton, SimpleTableRow } from '@sovryn/ui';
 
 import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
+import { AssetAmountPriceRenderer } from '../../../../../../2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer';
 import { translations } from '../../../../../../../locales/i18n';
 import { LendPosition } from '../../LendPositionsList.types';
 import { LendPositionAction } from '../LendPositionAction/LendPositionAction';
@@ -24,7 +25,10 @@ export const LendPositionDetails: FC<LendPositionDetailsProps> = ({
         <SimpleTableRow
           label={t(translations.aavePage.common.balance)}
           value={
-            <AmountRenderer value={position.balance} suffix={position.asset} />
+            <AssetAmountPriceRenderer
+              value={position.balance}
+              asset={position.asset}
+            />
           }
         />
 

From 488223e4aad5c5b6775a00eb566bba4088271aa3 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Tue, 13 Aug 2024 20:16:36 +0300
Subject: [PATCH 037/116] Efficiency card

---
 .../BorrowPositionsList.tsx                   | 14 ++--
 .../BorrowPositionDetails.tsx                 |  2 +-
 .../EfficiencyModeCard/EfficiencyModeCard.tsx | 65 +++++++++++++++++--
 .../frontend/src/locales/en/translations.json | 10 ++-
 4 files changed, 78 insertions(+), 13 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
index 5fb93bcbe..bd2331850 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
@@ -11,6 +11,7 @@ import { PoolPositionStat } from '../PoolPositionStat/PoolPositionStat';
 import { COLUMNS_CONFIG } from './BorrowPositionsList.constants';
 import { BorrowPosition } from './BorrowPositionsList.types';
 import { BorrowPositionDetails } from './components/BorrowPositionDetails/BorrowPositionDetails';
+import { EfficiencyModeCard } from './components/EfficiencyModeCard/EfficiencyModeCard';
 
 const pageTranslations = translations.aavePage;
 
@@ -52,17 +53,22 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = () => {
   return (
     <Accordion
       label={
-        <span className="text-base font-medium">
-          {t(pageTranslations.borrowPositionsList.title)}
-        </span>
+        <div className="text-base font-medium text-left lg:flex lg:items-center lg:gap-8">
+          <span>{t(pageTranslations.borrowPositionsList.title)}</span>
+          <div className="hidden lg:flex gap-3">
+            <span className="text-gray-30 font-medium text-sm">E-Mode</span>
+            <EfficiencyModeCard />
+          </div>
+        </div>
       }
       className="bg-gray-70 px-4 py-3 rounded space-y-3 lg:bg-gray-90 lg:p-6 lg:border lg:border-gray-60"
-      labelClassName="justify-between  h-7 flex items-center"
+      labelClassName="justify-between  lg:h-7 flex items-center"
       open={open}
       onClick={setOpen}
     >
       {account ? (
         <>
+          <EfficiencyModeCard className="lg:hidden mb-3" />
           <div className="flex flex-col gap-2 mb-2 lg:flex-row lg:gap-6 lg:mb-6">
             <PoolPositionStat
               label={t(pageTranslations.common.balance)}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
index feb9afa33..076979a55 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
@@ -20,7 +20,7 @@ export const BorrowPositionDetails: FC<BorrowPositionDetailsProps> = ({
   return (
     <div className="space-y-3">
       <div>
-        {/* Available */}
+        {/* Balance */}
         <SimpleTableRow
           label={t(translations.aavePage.common.balance)}
           value={
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx
index 970c86fdd..8e12f107e 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx
@@ -1,15 +1,66 @@
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 
-import { Icon } from '@sovryn/ui';
+import classNames from 'classnames';
+import { t } from 'i18next';
+
+import {
+  Button,
+  Icon,
+  IconNames,
+  Link,
+  Paragraph,
+  Tooltip,
+  TooltipTrigger,
+} from '@sovryn/ui';
 
 import { EModeIcon } from '../../../../../../1_atoms/Icons/Icons';
+import { translations } from '../../../../../../../locales/i18n';
+
+type EfficiencyModeCardProps = {
+  className?: string;
+};
 
-type EfficiencyModeCardProps = {};
+export const EfficiencyModeCard: FC<EfficiencyModeCardProps> = ({
+  className,
+}) => {
+  const [enabled] = useState(false);
 
-export const EfficiencyModeCard: FC<EfficiencyModeCardProps> = () => {
   return (
-    <div>
-      <Icon icon={EModeIcon} />
-    </div>
+    <Tooltip
+      className={classNames('flex flex-row gap-2 items-center', className)}
+      tooltipClassName="p-1 bg-gray-80"
+      trigger={TooltipTrigger.click}
+      content={
+        <div className="max-w-52 ">
+          <div className="p-[10px] text-white space-y-1">
+            <Paragraph className="font-medium text-sm">
+              {t(translations.aavePage.eModeCard.title)}
+            </Paragraph>
+            <Paragraph>
+              {t(translations.aavePage.eModeCard.description)}{' '}
+              <Link href="#" text={t(translations.common.learnMore)} />
+            </Paragraph>
+          </div>
+          <Button
+            text={
+              enabled
+                ? t(translations.common.buttons.disable)
+                : t(translations.common.buttons.enable)
+            }
+            className="w-full"
+          />
+        </div>
+      }
+    >
+      <div>
+        <Icon className="text-gray-30" icon={EModeIcon} size={16} />
+        <span className="text-gray-30 text-sm">
+          {enabled
+            ? t(translations.aavePage.eModeCard.enabled)
+            : t(translations.aavePage.eModeCard.disabled)}
+        </span>
+        <Icon icon={IconNames.SETTINGS} />
+      </div>
+    </Tooltip>
   );
 };
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index b2570292b..5b5c6d737 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -22,7 +22,9 @@
             "close": "Close",
             "retry": "Retry",
             "skip": "Skip",
-            "back": "Back"
+            "back": "Back",
+            "enable": "Enable",
+            "disable": "Disable"
         },
         "na": "N/A",
         "tables": {
@@ -871,6 +873,12 @@
             "lendApy": "Lend APY",
             "deposit": "Deposit",
             "enabled": "Enabled"
+        },
+        "eModeCard": {
+            "title": "Efficiency mode (E-Mode)",
+            "description": "E-Mode increases your LTV for a selected category of assets up to 97%.",
+            "enabled": "Enabled",
+            "disabled": "Disabled"
         }
     },
     "aaveReserveOverviewPage": {

From bbfe45f1a17de1cb17c47df80a22458de3e7027f Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Tue, 13 Aug 2024 20:52:11 +0300
Subject: [PATCH 038/116] ordering

---
 .../BorrowAssetsList/BorrowAssetsList.tsx        |  5 ++++-
 .../BorrowPositionsList/BorrowPositionsList.tsx  |  5 ++++-
 .../components/LendAssetsList/LendAssetsList.tsx | 11 ++++++-----
 .../LendPositionsList/LendPositionsList.tsx      | 16 ++++++++++++++--
 4 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
index 00d80ac45..76a2c27f1 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
@@ -2,7 +2,7 @@ import React, { FC, useCallback, useState } from 'react';
 
 import { t } from 'i18next';
 
-import { Accordion, Table } from '@sovryn/ui';
+import { Accordion, OrderOptions, Table } from '@sovryn/ui';
 
 import { AaveRowTitle } from '../../../../2_molecules/AavePoolRowTitle/AavePoolRowTitle';
 import { translations } from '../../../../../locales/i18n';
@@ -16,6 +16,7 @@ type BorrowAssetsListProps = {};
 
 export const BorrowAssetsList: FC<BorrowAssetsListProps> = () => {
   const [open, setOpen] = useState<boolean>(true);
+  const [orderOptions, setOrderOptions] = useState<OrderOptions>();
 
   const rowTitleRenderer = useCallback(
     r => <AaveRowTitle asset={r.asset} value={r.apr} suffix="%" label="APY" />,
@@ -59,6 +60,8 @@ export const BorrowAssetsList: FC<BorrowAssetsListProps> = () => {
         rowTitle={rowTitleRenderer}
         mobileRenderer={mobileRenderer}
         rows={borrowPools}
+        orderOptions={orderOptions}
+        setOrderOptions={setOrderOptions}
       />
     </Accordion>
   );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
index bd2331850..7e3a7824d 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
@@ -2,7 +2,7 @@ import React, { FC, useCallback, useState } from 'react';
 
 import { t } from 'i18next';
 
-import { Accordion, Paragraph, Table } from '@sovryn/ui';
+import { Accordion, OrderOptions, Paragraph, Table } from '@sovryn/ui';
 
 import { AaveRowTitle } from '../../../../2_molecules/AavePoolRowTitle/AavePoolRowTitle';
 import { useAccount } from '../../../../../hooks/useAccount';
@@ -23,6 +23,7 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = () => {
   const [balance] = useState(123.45); // TODO: mock
   const [apy] = useState(2.05); // TODO: mock
   const [borrowPowerUsed] = useState(2.05); // TODO: mock
+  const [orderOptions, setOrderOptions] = useState<OrderOptions>();
 
   const rowTitleRenderer = useCallback(
     r => <AaveRowTitle asset={r.asset} value={r.balance} suffix={r.asset} />,
@@ -96,6 +97,8 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = () => {
             rowTitle={rowTitleRenderer}
             mobileRenderer={mobileRenderer}
             rows={borrowPositions}
+            orderOptions={orderOptions}
+            setOrderOptions={setOrderOptions}
           />
         </>
       ) : (
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
index 47a086621..95180ca00 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
@@ -2,7 +2,7 @@ import React, { FC, useCallback, useState } from 'react';
 
 import { t } from 'i18next';
 
-import { Accordion, Checkbox, Table } from '@sovryn/ui';
+import { Accordion, Checkbox, OrderOptions, Table } from '@sovryn/ui';
 
 import { AaveRowTitle } from '../../../../2_molecules/AavePoolRowTitle/AavePoolRowTitle';
 import { translations } from '../../../../../locales/i18n';
@@ -12,13 +12,12 @@ import { LendAssetDetails } from './components/LendAssetDetails/LendAssetDetails
 
 const pageTranslations = translations.aavePage;
 
-type LendAssetsListProps = {
-  account?: string;
-};
+type LendAssetsListProps = {};
 
-export const LendAssetsList: FC<LendAssetsListProps> = ({ account }) => {
+export const LendAssetsList: FC<LendAssetsListProps> = () => {
   const [open, setOpen] = useState<boolean>(true);
   const [showZeroBalances, setShowZeroBalances] = useState<boolean>(true);
+  const [orderOptions, setOrderOptions] = useState<OrderOptions>();
 
   const mobileRenderer = useCallback(p => <LendAssetDetails pool={p} />, []);
   const rowTitleRenderer = useCallback(
@@ -68,6 +67,8 @@ export const LendAssetsList: FC<LendAssetsListProps> = ({ account }) => {
         rowTitle={rowTitleRenderer}
         mobileRenderer={mobileRenderer}
         rows={lendPools}
+        orderOptions={orderOptions}
+        setOrderOptions={setOrderOptions}
       />
     </Accordion>
   );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
index 37ab576ac..a0ab8d43f 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
@@ -2,7 +2,13 @@ import React, { FC, useCallback, useState } from 'react';
 
 import { t } from 'i18next';
 
-import { Accordion, Paragraph, Table } from '@sovryn/ui';
+import {
+  Accordion,
+  OrderDirection,
+  OrderOptions,
+  Paragraph,
+  Table,
+} from '@sovryn/ui';
 
 import { AaveRowTitle } from '../../../../2_molecules/AavePoolRowTitle/AavePoolRowTitle';
 import { useAccount } from '../../../../../hooks/useAccount';
@@ -22,6 +28,10 @@ export const LendPositionsList: FC<LendPositionsListProps> = () => {
   const [balance] = useState(100); // TODO: mocked data
   const [apy] = useState(2.3); // TODO: mocked data
   const [collateral] = useState(3); // TODO: mocked data
+  const [orderOptions, setOrderOptions] = useState<OrderOptions>({
+    orderBy: 'balance',
+    orderDirection: OrderDirection.Asc,
+  });
 
   const rowTitleRenderer = useCallback(
     r => <AaveRowTitle asset={r.asset} value={r.balance} suffix={r.asset} />,
@@ -43,7 +53,7 @@ export const LendPositionsList: FC<LendPositionsListProps> = () => {
     {
       asset: 'ETH',
       apy: 2.04,
-      balance: 12.34,
+      balance: 1.34,
       collateral: false,
     },
   ];
@@ -90,6 +100,8 @@ export const LendPositionsList: FC<LendPositionsListProps> = () => {
             rowTitle={rowTitleRenderer}
             mobileRenderer={mobileRenderer}
             rows={lendPositions}
+            orderOptions={orderOptions}
+            setOrderOptions={setOrderOptions}
           />
         </>
       ) : (

From 0a1a91ea6a43e69c5a1567e71d7d7c9e6e4c4067 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Tue, 13 Aug 2024 20:55:08 +0300
Subject: [PATCH 039/116] fix filter 0 balances checkbox

---
 .../AavePage/components/LendAssetsList/LendAssetsList.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
index 95180ca00..4d14b7028 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
@@ -25,7 +25,7 @@ export const LendAssetsList: FC<LendAssetsListProps> = () => {
     [],
   );
 
-  // TODO: mocked values
+  // TODO: mocked values and filter
   const lendPools: LendPoolDetails[] = [
     {
       asset: 'BTC',
@@ -57,7 +57,7 @@ export const LendAssetsList: FC<LendAssetsListProps> = () => {
         containerClassName="mt-2 mb-4"
         label={t(pageTranslations.lendAssetsList.showZeroBalances)}
         checked={showZeroBalances}
-        onChange={s => setShowZeroBalances(s)}
+        onClick={() => setShowZeroBalances(s => !s)}
       />
 
       <Table

From cb76d67a47ee82a76266e09f39d91e6ff54a1e3d Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Wed, 14 Aug 2024 00:16:01 +0300
Subject: [PATCH 040/116] pr comment

---
 .../2_molecules/NetworkSwitch/NetworkSwitch.tsx   | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/app/2_molecules/NetworkSwitch/NetworkSwitch.tsx b/apps/frontend/src/app/2_molecules/NetworkSwitch/NetworkSwitch.tsx
index c6c8b6bb4..75ae0575d 100644
--- a/apps/frontend/src/app/2_molecules/NetworkSwitch/NetworkSwitch.tsx
+++ b/apps/frontend/src/app/2_molecules/NetworkSwitch/NetworkSwitch.tsx
@@ -12,10 +12,13 @@ type NetworkSwitchProps = {
 export const NetworkSwitch: FC<NetworkSwitchProps> = ({ components }) => {
   const { currentChainId } = useChainStore();
 
-  if (components[currentChainId] !== undefined) {
-    return components[currentChainId] as ReactElement;
-  } else {
-    const requiredChainId = Object.keys(components)[0];
-    return <NetworkBanner requiredChainId={requiredChainId} />;
-  }
+  const componentToRender = React.useMemo(() => {
+    return (
+      components[currentChainId] || (
+        <NetworkBanner requiredChainId={Object.keys(components)[0]} />
+      )
+    );
+  }, [currentChainId, components]);
+
+  return componentToRender;
 };

From 20b3aee54adcb53cea601052d9514c7c5b146633 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Wed, 14 Aug 2024 17:12:08 +0300
Subject: [PATCH 041/116] token

---
 .../AaveReserveOverviewPage.tsx                        |  2 +-
 .../components/TopPanel/TopPanel.tsx                   | 10 ++++++----
 .../components/WalletOverview/WalletOverview.tsx       |  7 +++++--
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
index a8ed4e0c4..5abce6272 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
@@ -19,7 +19,7 @@ enum OverviewTab {
 }
 
 const AaveReserveOverviewPage: FC = () => {
-  const [asset] = useState('BTC'); // TODO: mock
+  const [asset] = useState({ symbol: 'BTC', name: 'Bitcoin' }); // TODO: mock
   const [activeOverviewTab, setActiveOverviewTab] = useState<OverviewTab>(
     OverviewTab.RESERVE,
   );
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
index 7603321ea..eb9df6bfe 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
@@ -13,13 +13,15 @@ import { translations } from '../../../../../locales/i18n';
 const pageTranslations = translations.aaveReserveOverviewPage.topPanel;
 
 type TopPanelProps = {
-  asset: string;
+  asset: {
+    name: string;
+    symbol: string;
+  };
   className?: string;
 };
 
 export const TopPanel: FC<TopPanelProps> = ({ asset, className }) => {
   // TODO: Mocked data
-  const assetName = 'Bitcoin';
   const reserveSizeInM = 1234.58;
   const availableLiquidityM = 1234.58;
   const utilizationRate = 2.79;
@@ -40,13 +42,13 @@ export const TopPanel: FC<TopPanelProps> = ({ asset, className }) => {
         <div className="col-span-2 flex items-center lg:items-start gap-3">
           <div className="flex items-center gap-1">
             <AssetRenderer
-              asset={asset}
+              asset={asset.symbol}
               showAssetLogo
               assetClassName="text-base"
               logoClassName="[&>svg]:h-8 [&>svg]:w-8 [&>svg]:mr-[10px]"
             />
             <span className="text-gray-40 text-base font-medium">
-              {assetName}
+              {asset.name}
             </span>
           </div>
 
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/WalletOverview.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/WalletOverview.tsx
index 3d06037b1..cd7e9aeb9 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/WalletOverview.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/WalletOverview.tsx
@@ -23,13 +23,16 @@ import { SupplyAction } from './components/SupplyAction/SupplyAction';
 const pageTranslations = translations.aaveReserveOverviewPage;
 
 type WalletOverviewProps = {
-  asset: string;
+  asset: {
+    symbol: string;
+    name: string;
+  };
 };
 
 export const WalletOverview: FC<WalletOverviewProps> = ({
   asset: initialAsset,
 }) => {
-  const [asset, setAsset] = useState(initialAsset);
+  const [asset, setAsset] = useState(initialAsset.symbol);
   const { account, connectWallet, pending } = useWalletConnect();
 
   const assetBalance = Decimal.from(0); // TODO: mocked

From 5cab202765dfb24d196c4b22477c40e5b6a7c277 Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Wed, 14 Aug 2024 11:25:20 -0300
Subject: [PATCH 042/116] Mocked table cards plus refactor of statistics card
 (#14)

* mocked table cards plus refactor of statistics card

* ui fixes
---
 apps/frontend/src/app/1_atoms/Icons/Icons.tsx |   2 +-
 .../StatisticsCard/StatisticsCard.tsx         |  31 ++---
 .../AavePage/components/TopPanel/TopPanel.tsx |  38 ++++--
 .../AaveReserveOverviewPage.tsx               |   6 +
 .../BorrowDetailsGraph/BorrowDetailsGraph.tsx |  97 +++++++++++++++
 .../components/EModeDetails/EModeDetails.tsx  |  21 ++--
 .../InterestRateModelGraph.tsx                |  50 ++++++++
 .../SupplyDetailsGraph/SupplyDetailsGraph.tsx | 110 ++++++++++++++++++
 .../components/TopPanel/TopPanel.tsx          |  41 +++++--
 .../frontend/src/locales/en/translations.json |  33 ++++++
 10 files changed, 377 insertions(+), 52 deletions(-)
 create mode 100644 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx

diff --git a/apps/frontend/src/app/1_atoms/Icons/Icons.tsx b/apps/frontend/src/app/1_atoms/Icons/Icons.tsx
index fe729f7be..06ce2bee9 100644
--- a/apps/frontend/src/app/1_atoms/Icons/Icons.tsx
+++ b/apps/frontend/src/app/1_atoms/Icons/Icons.tsx
@@ -10,7 +10,7 @@ export const LinkIcon: IconType = (
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <g clip-path="url(#clip0_199_55951)">
+    <g clipPath="url(#clip0_199_55951)">
       <path
         d="M12.6667 12.6667H3.33333V3.33333H8V2H3.33333C2.59333 2 2 2.6 2 3.33333V12.6667C2 13.4 2.59333 14 3.33333 14H12.6667C13.4 14 14 13.4 14 12.6667V8H12.6667V12.6667ZM9.33333 2V3.33333H11.7267L5.17333 9.88667L6.11333 10.8267L12.6667 4.27333V6.66667H14V2H9.33333Z"
         fill="#B6BAC2"
diff --git a/apps/frontend/src/app/2_molecules/StatisticsCard/StatisticsCard.tsx b/apps/frontend/src/app/2_molecules/StatisticsCard/StatisticsCard.tsx
index 7304d0a0d..7fecbbc2d 100644
--- a/apps/frontend/src/app/2_molecules/StatisticsCard/StatisticsCard.tsx
+++ b/apps/frontend/src/app/2_molecules/StatisticsCard/StatisticsCard.tsx
@@ -2,47 +2,40 @@ import React, { FC } from 'react';
 
 import classNames from 'classnames';
 import { t } from 'i18next';
+import { ReactElement } from 'react-markdown/lib/react-markdown';
 
 import { HelperButton, Icon } from '@sovryn/ui';
 
 import { LinkIcon } from '../../1_atoms/Icons/Icons';
 import { translations } from '../../../locales/i18n';
-import {
-  AmountRenderer,
-  AmountRendererProps,
-} from '../AmountRenderer/AmountRenderer';
 
-type StatisticsCardProps = Partial<AmountRendererProps> & {
+type StatisticsCardProps = {
   label: string;
+  value?: ReactElement;
   link?: string;
-  helperContent?: string;
-  amountRendererClassName?: string;
+  help?: string;
+  className?: string;
+  valueClassName?: string;
 };
 
 export const StatisticsCard: FC<StatisticsCardProps> = ({
   link,
   label,
   value,
-  helperContent,
-  amountRendererClassName,
+  help,
   className,
-  ...props
 }) => {
   return (
     <div className={classNames('space-y-3', className)}>
       <div className="flex space-x-2 items-center text-gray-30">
         <span className="text-xs  font-medium">{label}</span>
-        {helperContent && <HelperButton content={helperContent} />}
+        {help && <HelperButton content={help} />}
       </div>
 
-      <div className="text-2xl text-white flex items-center">
+      <div className="text-white flex items-center">
         {value ? (
           <>
-            <AmountRenderer
-              value={value}
-              {...props}
-              className={amountRendererClassName}
-            />
+            {value}
             {link && (
               <a href={link} className="ml-3" target="_blank" rel="noreferrer">
                 <Icon icon={LinkIcon} className="h-4 w-4 text-gray-30" />
@@ -50,9 +43,7 @@ export const StatisticsCard: FC<StatisticsCardProps> = ({
             )}
           </>
         ) : (
-          <span className={amountRendererClassName}>
-            {t(translations.common.na)}
-          </span>
+          <span>{t(translations.common.na)}</span>
         )}
       </div>
     </div>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx b/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
index 23a4685fe..e388db243 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
@@ -11,6 +11,7 @@ import {
   ParagraphSize,
 } from '@sovryn/ui';
 
+import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
 import { useAccount } from '../../../../../hooks/useAccount';
 import { translations } from '../../../../../locales/i18n';
@@ -40,21 +41,42 @@ export const TopPanel: FC<TopPanelProps> = () => {
         <div className="flex flex-col gap-4 md:py-12 md:flex-row md:gap-9 flex-shrink-0">
           <StatisticsCard
             label={t(pageTranslations.netWorth)}
-            prefix="$"
-            value={account ? netWorth : undefined}
+            value={
+              account ? (
+                <AmountRenderer
+                  prefix="$"
+                  value={netWorth}
+                  className="text-2xl"
+                />
+              ) : undefined
+            }
           />
           <div className="flex gap-9">
             <StatisticsCard
               label={t(pageTranslations.netApy)}
-              value={account ? netApy : undefined}
-              suffix="%"
-              helperContent={t(pageTranslations.netApyInfo)}
+              value={
+                account ? (
+                  <AmountRenderer
+                    suffix="%"
+                    value={netApy}
+                    className="text-2xl"
+                  />
+                ) : undefined
+              }
+              help={t(pageTranslations.netApyInfo)}
             />
             <StatisticsCard
               label={t(pageTranslations.collateralRatio)}
-              value={account ? collateralRatio : undefined}
-              suffix="%"
-              helperContent={t(pageTranslations.collateralRatioInfo)}
+              value={
+                account ? (
+                  <AmountRenderer
+                    suffix="%"
+                    value={collateralRatio}
+                    className="text-2xl"
+                  />
+                ) : undefined
+              }
+              help={t(pageTranslations.collateralRatioInfo)}
             />
           </div>
         </div>
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
index 5abce6272..30869ebff 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
@@ -7,7 +7,10 @@ import { Helmet } from 'react-helmet-async';
 import { Tabs, TabSize, TabType } from '@sovryn/ui';
 
 import { translations } from '../../../locales/i18n';
+import { BorrowDetailsGraph } from './components/BorrowDetailsGraph/BorrowDetailsGraph';
 import { EModeDetails } from './components/EModeDetails/EModeDetails';
+import { InterestRateModelGraph } from './components/InterestRateModelGraph/InterestRateModelGraph';
+import { SupplyDetailsGraph } from './components/SupplyDetailsGraph/SupplyDetailsGraph';
 import { TopPanel } from './components/TopPanel/TopPanel';
 import { WalletOverview } from './components/WalletOverview/WalletOverview';
 
@@ -61,7 +64,10 @@ const AaveReserveOverviewPage: FC = () => {
               'lg:block space-y-4 w-full',
             )}
           >
+            <SupplyDetailsGraph />
+            <BorrowDetailsGraph />
             <EModeDetails />
+            <InterestRateModelGraph />
           </div>
 
           {/* wallet column */}
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
new file mode 100644
index 000000000..d85ab0808
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
@@ -0,0 +1,97 @@
+import React, { FC, useState } from 'react';
+
+import { t } from 'i18next';
+
+import { Accordion, Link, Paragraph } from '@sovryn/ui';
+
+import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
+import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
+import { useIsMobile } from '../../../../../hooks/useIsMobile';
+import { translations } from '../../../../../locales/i18n';
+
+const pageTranslations = translations.aaveReserveOverviewPage.borrowDetails;
+
+type BorrowDetailsGraphProps = {};
+
+// TODO: mocked amounts
+
+export const BorrowDetailsGraph: FC<BorrowDetailsGraphProps> = () => {
+  const [open, setOpen] = useState<boolean>(true);
+  const { isMobile } = useIsMobile();
+
+  return (
+    <Accordion
+      label={
+        <span className="text-base font-medium">
+          {t(pageTranslations.title)}
+        </span>
+      }
+      className="bg-gray-90 px-4 py-3 rounded lg:p-6 border border-gray-60"
+      labelClassName="justify-between flex items-center "
+      open={open || !isMobile}
+      onClick={setOpen}
+      flatMode={!isMobile}
+    >
+      <div className="space-y-8 pt-2">
+        <div className="flex flex-col gap-6 lg:flex-row lg:gap-8 ">
+          <StatisticsCard
+            label={t(pageTranslations.totalBorrowed)}
+            help={t(pageTranslations.totalBorrowedInfo)}
+            value={
+              <div>
+                <div className="space-x-1 font-medium text-base">
+                  <AmountRenderer value={100} suffix="B" />
+                  <span>{t(pageTranslations.of)}</span>
+                  <AmountRenderer value={100} suffix="B" />
+                </div>
+                <div className="space-x-1 text-gray-40 text-xs font-semibold">
+                  <AmountRenderer value={100} suffix="B" />
+                  <span>{t(pageTranslations.of)}</span>
+                  <AmountRenderer value={100} suffix="B" />
+                </div>
+
+                {/* Progress bar */}
+                <div className="mt-2 h-[3px] w-[160px] bg-gray-70 rounded-full">
+                  <div className="h-full bg-primary-30 w-[80%]"></div>
+                </div>
+              </div>
+            }
+          />
+          <div className="flex gap-8">
+            <StatisticsCard
+              label={t(pageTranslations.apr)}
+              value={<AmountRenderer value={5.94} suffix="%" />}
+            />
+            <StatisticsCard
+              label={t(pageTranslations.borrowCap)}
+              value={<AmountRenderer value={1.4} suffix="M" />}
+            />
+          </div>
+        </div>
+
+        <div className="h-10 bg-blue-2">
+          <span>TODO: Graph</span>
+        </div>
+
+        <div className="space-y-6">
+          <Paragraph className="text-base">
+            {t(pageTranslations.collectorInfo)}
+          </Paragraph>
+
+          {/* statistics */}
+          <div className="flex gap-8">
+            <StatisticsCard
+              label={t(pageTranslations.reserveFactor)}
+              help={t(pageTranslations.reserveFactorInfo)}
+              value={<AmountRenderer value={85.94} suffix="%" />}
+            />
+            <StatisticsCard
+              label={t(pageTranslations.collectorContract)}
+              value={<Link href="#" text={t(pageTranslations.viewContract)} />}
+            />
+          </div>
+        </div>
+      </div>
+    </Accordion>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx
index 02ab684fb..379acb71b 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx
@@ -5,6 +5,7 @@ import { t } from 'i18next';
 import { Accordion, Icon, Link, Paragraph } from '@sovryn/ui';
 
 import { EModeIcon } from '../../../../1_atoms/Icons/Icons';
+import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
 import { useIsMobile } from '../../../../../hooks/useIsMobile';
 import { translations } from '../../../../../locales/i18n';
@@ -14,7 +15,7 @@ const pageTranslations = translations.aaveReserveOverviewPage.eModeDetails;
 type EModeDetailsProps = {};
 
 export const EModeDetails: FC<EModeDetailsProps> = () => {
-  const [open, setOpen] = useState<boolean>(false);
+  const [open, setOpen] = useState<boolean>(true);
   const { isMobile } = useIsMobile();
 
   // TODO: All this data is mocked
@@ -49,27 +50,21 @@ export const EModeDetails: FC<EModeDetailsProps> = () => {
         <div className="grid grid-cols-3 gap-5">
           <StatisticsCard
             label={t(pageTranslations.maxLtv)}
-            amountRendererClassName="text-base shrink-0"
             className="space-y-2"
-            helperContent={t(pageTranslations.maxLtvInfo)}
-            value={maxLtv}
-            suffix="%"
+            help={t(pageTranslations.maxLtvInfo)}
+            value={<AmountRenderer value={maxLtv} suffix="%" />}
           />
           <StatisticsCard
             label={t(pageTranslations.liquidationThreshold)}
-            amountRendererClassName="text-base shrink-0"
             className="space-y-2 "
-            helperContent={t(pageTranslations.liquidationThresholdInfo)}
-            value={liquidationThreshold}
-            suffix="%"
+            help={t(pageTranslations.liquidationThresholdInfo)}
+            value={<AmountRenderer value={liquidationThreshold} suffix="%" />}
           />
           <StatisticsCard
             label={t(pageTranslations.liquidationPenalty)}
-            amountRendererClassName="text-base shrink-0"
             className="space-y-2"
-            helperContent={t(pageTranslations.liquidationPenaltyInfo)}
-            value={liquidationPenalty}
-            suffix="%"
+            help={t(pageTranslations.liquidationPenaltyInfo)}
+            value={<AmountRenderer value={liquidationPenalty} suffix="%" />}
           />
         </div>
 
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
new file mode 100644
index 000000000..d4f084dbe
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
@@ -0,0 +1,50 @@
+import React, { FC, useState } from 'react';
+
+import { t } from 'i18next';
+
+import { Accordion, Link } from '@sovryn/ui';
+
+import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
+import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
+import { useIsMobile } from '../../../../../hooks/useIsMobile';
+import { translations } from '../../../../../locales/i18n';
+
+const pageTranslations = translations.aaveReserveOverviewPage.interestRateModel;
+
+type InterestRateModelGraphProps = {};
+
+// TODO: mocked amounts
+
+export const InterestRateModelGraph: FC<InterestRateModelGraphProps> = () => {
+  const [open, setOpen] = useState<boolean>(true);
+  const { isMobile } = useIsMobile();
+
+  return (
+    <Accordion
+      label={
+        <span className="text-base font-medium">
+          {t(pageTranslations.title)}
+        </span>
+      }
+      className="bg-gray-90 px-4 py-3 rounded lg:p-6 border border-gray-60"
+      labelClassName="justify-between flex items-center "
+      open={open || !isMobile}
+      onClick={setOpen}
+      flatMode={!isMobile}
+    >
+      <div className="space-y-8 pt-2">
+        <div className="flex justify-between items-end">
+          <StatisticsCard
+            label={t(pageTranslations.utilizationRate)}
+            value={<AmountRenderer value={5.94} suffix="%" />}
+          />
+          <Link href="#" text={t(pageTranslations.interestRateStrategy)} />
+        </div>
+
+        <div className="h-10 bg-blue-2">
+          <span>TODO: Graph</span>
+        </div>
+      </div>
+    </Accordion>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
new file mode 100644
index 000000000..5d25bb094
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
@@ -0,0 +1,110 @@
+import React, { FC, useState } from 'react';
+
+import { t } from 'i18next';
+
+import { Accordion, Icon, IconNames, Paragraph } from '@sovryn/ui';
+
+import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
+import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
+import { useIsMobile } from '../../../../../hooks/useIsMobile';
+import { translations } from '../../../../../locales/i18n';
+
+const pageTranslations = translations.aaveReserveOverviewPage.supplyDetails;
+
+type SupplyDetailsGraphProps = {};
+
+// TODO: mocked amounts
+
+export const SupplyDetailsGraph: FC<SupplyDetailsGraphProps> = () => {
+  const [open, setOpen] = useState<boolean>(true);
+  const { isMobile } = useIsMobile();
+
+  return (
+    <Accordion
+      label={
+        <span className="text-base font-medium">
+          {t(pageTranslations.title)}
+        </span>
+      }
+      className="bg-gray-90 px-4 py-3 rounded lg:p-6 border border-gray-60"
+      labelClassName="justify-between flex items-center "
+      open={open || !isMobile}
+      onClick={setOpen}
+      flatMode={!isMobile}
+    >
+      <div className="space-y-8 pt-2">
+        <div className="flex gap-8">
+          <StatisticsCard
+            label={t(pageTranslations.totalSupplied)}
+            help={t(pageTranslations.totalSuppliedInfo)}
+            value={
+              <div>
+                <div className="space-x-1 font-medium text-base">
+                  <AmountRenderer value={100} suffix="B" />
+                  <span>{t(pageTranslations.of)}</span>
+                  <AmountRenderer value={100} suffix="B" />
+                </div>
+                <div className="space-x-1 text-gray-40 text-xs font-semibold">
+                  <AmountRenderer value={100} suffix="B" />
+                  <span>{t(pageTranslations.of)}</span>
+                  <AmountRenderer value={100} suffix="B" />
+                </div>
+
+                {/* Progress bar */}
+                <div className="mt-2 h-[3px] w-[160px] bg-gray-70 rounded-full">
+                  <div className="h-full bg-primary-30 w-[80%]"></div>
+                </div>
+              </div>
+            }
+          />
+          <StatisticsCard
+            label={t(pageTranslations.apy)}
+            value={<AmountRenderer value={5.94} suffix="%" />}
+          />
+        </div>
+
+        <div className="h-10 bg-blue-2">
+          <span>TODO: Graph</span>
+        </div>
+
+        <div className="space-y-6">
+          {/* heading */}
+          <div className="flex gap-8">
+            <Paragraph className="text-base">
+              {t(pageTranslations.collateralUsage)}
+            </Paragraph>
+            <div className="flex gap-2 items-center">
+              <Icon
+                icon={IconNames.CHECK}
+                className="text-positive h-3 w-3"
+                size={16}
+              />
+              <span className="text-sm text-gray-30">
+                {t(pageTranslations.canBeCollateral)}
+              </span>
+            </div>
+          </div>
+
+          {/* statistics */}
+          <div className="flex flex-col sm:flex-row justify-between gap-4 lg:justify-start lg:gap-8">
+            <StatisticsCard
+              label={t(pageTranslations.maxLtv)}
+              help={t(pageTranslations.maxLtvInfo)}
+              value={<AmountRenderer value={85.94} suffix="%" />}
+            />
+            <StatisticsCard
+              label={t(pageTranslations.liquidationThreshold)}
+              help={t(pageTranslations.liquidationThresholdInfo)}
+              value={<AmountRenderer value={83.01} suffix="%" />}
+            />
+            <StatisticsCard
+              label={t(pageTranslations.liquidationPenalty)}
+              help={t(pageTranslations.liquidationPenaltyInfo)}
+              value={<AmountRenderer value={5.0} suffix="%" />}
+            />
+          </div>
+        </div>
+      </div>
+    </Accordion>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
index eb9df6bfe..89b23608c 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
@@ -6,6 +6,7 @@ import { t } from 'i18next';
 import { Heading, Icon, Paragraph, ParagraphSize } from '@sovryn/ui';
 
 import { LinkIcon, WalletIcon } from '../../../../1_atoms/Icons/Icons';
+import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
 import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
 import { translations } from '../../../../../locales/i18n';
@@ -64,26 +65,46 @@ export const TopPanel: FC<TopPanelProps> = ({ asset, className }) => {
 
         <StatisticsCard
           label={t(pageTranslations.reserveSize)}
-          prefix="$"
-          suffix="M"
-          value={reserveSizeInM}
+          value={
+            <AmountRenderer
+              prefix="$"
+              suffix="M"
+              value={reserveSizeInM}
+              className="text-2xl"
+            />
+          }
         />
         <StatisticsCard
           label={t(pageTranslations.availableLiquidity)}
-          prefix="$"
-          suffix="M"
-          value={availableLiquidityM}
+          value={
+            <AmountRenderer
+              prefix="$"
+              suffix="M"
+              value={availableLiquidityM}
+              className="text-2xl"
+            />
+          }
         />
         <StatisticsCard
           label={t(pageTranslations.utilizationRate)}
-          value={utilizationRate}
-          suffix="%"
+          value={
+            <AmountRenderer
+              suffix="%"
+              value={utilizationRate}
+              className="text-2xl"
+            />
+          }
         />
         <StatisticsCard
           label={t(pageTranslations.oraclePrice)}
-          value={oraclePrice}
-          prefix="$"
           link="#oracle-price"
+          value={
+            <AmountRenderer
+              prefix="$"
+              value={oraclePrice}
+              className="text-2xl"
+            />
+          }
         />
       </div>
     </div>
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index 5b5c6d737..00316f769 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -922,6 +922,39 @@
             "liquidationPenaltyInfo": "When a liquidation occurs, liquidators repay up to 50% of the outstanding borrowed amount on behalf of the borrower. In return, they can buy the collateral at a discount and keep the difference (liquidation penalty) as a bonus.",
             "body": "E-Mode increases your LTV for a selected category of assets, meaning that when E-mode is enabled, you will have higher borrowing power over assets of the same E-mode category which are defined by Aave Governance. You can enter E-Mode from your Dashboard.",
             "learnMore": "Learn more"
+        },
+        "supplyDetails": {
+            "title": "Supply details",
+            "maxLtv": "Max LTV",
+            "maxLtvInfo": "The Maximum LTV ratio represents the maximum borrowing power of a specific collateral. For example, if a collateral has an LTV of 75%, the user can borrow up to 0.75 worth of ETH in the principal currency for every 1 ETH worth of collateral.",
+            "liquidationThreshold": "Liquidation threshold",
+            "liquidationThresholdInfo": "This represents the threshold at which a borrow position will be considered undercollateralized and subject to liquidation for each collateral. For example, if a collateral has a liquidation threshold of 80%, it means that the position will be liquidated when the debt value is worth 80% of the collateral value.",
+            "liquidationPenalty": "Liquidation penalty",
+            "liquidationPenaltyInfo": "When a liquidation occurs, liquidators repay up to 50% of the outstanding borrowed amount on behalf of the borrower. In return, they can buy the collateral at a discount and keep the difference (liquidation penalty) as a bonus.",
+            "collateralUsage": "Collateral usage",
+            "canBeCollateral": "Can be collateral",
+            "totalSupplied": "Total supplied",
+            "totalSuppliedInfo": "Asset supply is limited to a certain amount to reduce protocol exposure to the asset and to help manage risks involved.",
+            "of": "of",
+            "apy": "APY"
+        },
+        "borrowDetails": {
+            "title": "Borrow details",
+            "totalBorrowed": "Total borrowed",
+            "totalBorrowedInfo": "Borrowing of this asset is limited to a certain amount to minimize liquidity pool insolvency.",
+            "of": "of",
+            "apr": "APR",
+            "borrowCap": "Borrow cap",
+            "collectorInfo": "Collector info",
+            "reserveFactor": "Reserve factor",
+            "reserveFactorInfo": "Reserve factor is a percentage of interest which goes to a collector contract that is controlled by Aave governance to promote ecosystem growth.",
+            "collectorContract": "Collector contract",
+            "viewContract": "View contract"
+        },
+        "interestRateModel": {
+            "title": "Interest rate model",
+            "utilizationRate": "Utilization rate",
+            "interestRateStrategy": "Interest rate strategy"
         }
     },
     "bitocracyPage": {

From 6946a5f61755cc0353242964b2068b84cbcea6f0 Mon Sep 17 00:00:00 2001
From: Luciano Perez Cerra <perezcerraluciano@gmail.com>
Date: Mon, 19 Aug 2024 10:11:27 -0300
Subject: [PATCH 043/116] Saf 41 charts (#16)

* mocked table cards plus refactor of statistics card

* ui fixes

* [SAF-41] give each graph it's own chart component

* [SAF-41] add htmlLegend plugin in charts; remove comments and refactor some colors moving them to constants

---------

Co-authored-by: matzapata <matuzapata@gmail.com>
---
 apps/frontend/package.json                    |   1 +
 .../BorrowDetailsGraph/BorrowDetailsGraph.tsx |  23 ++-
 .../components/Chart/Chart.constants.ts       |  72 ++++++++++
 .../components/Chart/Chart.tsx                | 119 ++++++++++++++++
 .../components/Chart/Chart.types.ts           |   6 +
 .../components/Chart/Chart.utils.ts           |  89 ++++++++++++
 .../InterestRateModelGraph.tsx                |  36 ++++-
 .../components/Chart/Chart.constants.ts       |  45 ++++++
 .../components/Chart/Chart.tsx                | 134 ++++++++++++++++++
 .../components/Chart/Chart.types.ts           |   8 ++
 .../components/Chart/Chart.utils.ts           |  89 ++++++++++++
 .../SupplyDetailsGraph/SupplyDetailsGraph.tsx |  22 ++-
 .../components/Chart/Chart.constants.ts       |  72 ++++++++++
 .../components/Chart/Chart.tsx                | 121 ++++++++++++++++
 .../components/Chart/Chart.types.ts           |   6 +
 .../components/Chart/Chart.utils.ts           |  89 ++++++++++++
 .../frontend/src/locales/en/translations.json |  19 ++-
 17 files changed, 931 insertions(+), 20 deletions(-)
 create mode 100644 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.constants.ts
 create mode 100644 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.types.ts
 create mode 100644 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.utils.ts
 create mode 100644 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.constants.ts
 create mode 100644 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.types.ts
 create mode 100644 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.utils.ts
 create mode 100644 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.constants.ts
 create mode 100644 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.types.ts
 create mode 100644 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.utils.ts

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index f2d618805..59e331b0a 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -28,6 +28,7 @@
     "@uniswap/permit2-sdk": "1.2.0",
     "bitcoin-address-validation": "2.2.1",
     "chart.js": "4.1.1",
+    "chartjs-adapter-date-fns": "^3.0.0",
     "classnames": "2.3.2",
     "date-fns": "2.30.0",
     "dayjs": "1.11.7",
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
index d85ab0808..d4f547fe8 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useMemo, useState } from 'react';
 
 import { t } from 'i18next';
 
@@ -8,17 +8,30 @@ import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRen
 import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
 import { useIsMobile } from '../../../../../hooks/useIsMobile';
 import { translations } from '../../../../../locales/i18n';
+import { Chart } from './components/Chart/Chart';
+import { harcodedData, LINE_COLOR } from './components/Chart/Chart.constants';
+import { MockData } from './components/Chart/Chart.types';
 
 const pageTranslations = translations.aaveReserveOverviewPage.borrowDetails;
 
 type BorrowDetailsGraphProps = {};
 
-// TODO: mocked amounts
-
 export const BorrowDetailsGraph: FC<BorrowDetailsGraphProps> = () => {
   const [open, setOpen] = useState<boolean>(true);
   const { isMobile } = useIsMobile();
 
+  // TODO: mocked amounts
+  const mockData: MockData<{ x: string; y: number }> = useMemo(() => {
+    const data1 = harcodedData;
+
+    return {
+      data1,
+      label1: t(pageTranslations.chart.label1),
+      lineColor: LINE_COLOR,
+      xLabels: data1.map(item => item.x),
+    };
+  }, []);
+
   return (
     <Accordion
       label={
@@ -69,9 +82,7 @@ export const BorrowDetailsGraph: FC<BorrowDetailsGraphProps> = () => {
           </div>
         </div>
 
-        <div className="h-10 bg-blue-2">
-          <span>TODO: Graph</span>
-        </div>
+        <Chart mockData={mockData} yLabel1="" />
 
         <div className="space-y-6">
           <Paragraph className="text-base">
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.constants.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.constants.ts
new file mode 100644
index 000000000..c402c345b
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.constants.ts
@@ -0,0 +1,72 @@
+export const PRIMARY_COLOR = '#2C303B';
+export const TEXT_COLOR = '#f5f5f5';
+export const LINE_COLOR = '#72eadf';
+export const TICK_COLOR = '#b6bac1';
+export const BORDER_COLOR = '#484D59';
+export const GRID_COLOR = 'rgb(72 77 89)';
+export const FONT_FAMILY = 'Roboto';
+export const FONT_SIZE = 12;
+export const FONT_WEIGHT = '500';
+export const DASH_GRID_TYPE = 'dash';
+
+export const CUSTOM_CANVAS_BACKGROUND_COLOR = {
+  id: 'customCanvasBackgroundColor',
+  beforeDraw: (chart, options) => {
+    const { ctx } = chart;
+    ctx.save();
+    ctx.globalCompositeOperation = 'destination-over';
+    ctx.fillStyle = '#1e2128';
+    ctx.fillRect(0, 0, chart.width, chart.height);
+    ctx.restore();
+  },
+};
+
+export const harcodedData = [
+  { x: '2023-06-15T00:00:00Z', y: 2.5 },
+  { x: '2023-06-16T00:00:00Z', y: 2.6 },
+  { x: '2023-06-17T00:00:00Z', y: 2.7 },
+  { x: '2023-06-18T00:00:00Z', y: 2.7 },
+  { x: '2023-06-19T00:00:00Z', y: 2.8 },
+  { x: '2023-06-20T00:00:00Z', y: 2.9 },
+  { x: '2023-06-21T00:00:00Z', y: 3.0 },
+  { x: '2023-06-22T00:00:00Z', y: 3.0 },
+  { x: '2023-06-23T00:00:00Z', y: 3.1 },
+  { x: '2023-06-24T00:00:00Z', y: 3.1 },
+  { x: '2023-06-25T00:00:00Z', y: 3.2 },
+  { x: '2023-06-26T00:00:00Z', y: 3.3 },
+  { x: '2023-06-27T00:00:00Z', y: 3.4 },
+  { x: '2023-06-28T00:00:00Z', y: 3.5 },
+  { x: '2023-06-29T00:00:00Z', y: 3.7 },
+  { x: '2023-06-30T00:00:00Z', y: 4.0 },
+  { x: '2023-07-01T00:00:00Z', y: 4.2 },
+  { x: '2023-07-02T00:00:00Z', y: 4.0 },
+  { x: '2023-07-03T00:00:00Z', y: 3.9 },
+  { x: '2023-07-04T00:00:00Z', y: 3.8 },
+  { x: '2023-07-05T00:00:00Z', y: 3.8 },
+  { x: '2023-07-06T00:00:00Z', y: 3.7 },
+  { x: '2023-07-07T00:00:00Z', y: 3.7 },
+  { x: '2023-07-08T00:00:00Z', y: 3.6 },
+  { x: '2023-07-09T00:00:00Z', y: 3.6 },
+  { x: '2023-07-10T00:00:00Z', y: 3.5 },
+  { x: '2023-07-11T00:00:00Z', y: 3.5 },
+  { x: '2023-07-12T00:00:00Z', y: 3.5 },
+  { x: '2023-07-13T00:00:00Z', y: 3.4 },
+  { x: '2023-07-14T00:00:00Z', y: 3.4 },
+  { x: '2023-07-15T00:00:00Z', y: 3.3 },
+  { x: '2023-07-16T00:00:00Z', y: 3.3 },
+  { x: '2023-07-17T00:00:00Z', y: 3.3 },
+  { x: '2023-07-18T00:00:00Z', y: 3.3 },
+  { x: '2023-07-19T00:00:00Z', y: 3.3 },
+  { x: '2023-07-20T00:00:00Z', y: 3.2 },
+  { x: '2023-07-21T00:00:00Z', y: 3.2 },
+  { x: '2023-07-22T00:00:00Z', y: 3.2 },
+  { x: '2023-07-23T00:00:00Z', y: 3.2 },
+  { x: '2023-07-24T00:00:00Z', y: 3.2 },
+  { x: '2023-07-25T00:00:00Z', y: 3.2 },
+  { x: '2023-07-26T00:00:00Z', y: 3.1 },
+  { x: '2023-07-27T00:00:00Z', y: 3.1 },
+  { x: '2023-07-28T00:00:00Z', y: 3.1 },
+  { x: '2023-07-29T00:00:00Z', y: 3.1 },
+  { x: '2023-07-30T00:00:00Z', y: 3.1 },
+  { x: '2023-07-31T00:00:00Z', y: 3.1 },
+];
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx
new file mode 100644
index 000000000..308b02aa7
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx
@@ -0,0 +1,119 @@
+import React, { FC, useEffect, useRef } from 'react';
+
+import ChartLibrary from 'chart.js/auto';
+import 'chartjs-adapter-date-fns';
+
+import {
+  CUSTOM_CANVAS_BACKGROUND_COLOR,
+  GRID_COLOR,
+  TICK_COLOR,
+} from './Chart.constants';
+import { MockData } from './Chart.types';
+import { htmlLegendPlugin } from './Chart.utils';
+
+type ChartProps = {
+  mockData: MockData<any>;
+  yLabel1: string;
+};
+
+export const Chart: FC<ChartProps> = ({ mockData }) => {
+  const canvas = useRef<HTMLCanvasElement>(null);
+  const chartRef = useRef<ChartLibrary | null>(null);
+
+  useEffect(() => {
+    if (chartRef.current) {
+      chartRef.current.destroy();
+    }
+
+    if (!canvas.current) {
+      return;
+    }
+
+    chartRef.current = new ChartLibrary(canvas.current, {
+      type: 'line',
+      data: {
+        datasets: [
+          {
+            type: 'line',
+            label: mockData.label1,
+            data: mockData.data1,
+            backgroundColor: mockData.lineColor,
+            borderColor: mockData.lineColor,
+            borderWidth: 2,
+            fill: false,
+            pointRadius: 0,
+          },
+        ],
+      },
+      options: {
+        scales: {
+          x: {
+            type: 'time',
+            time: {
+              unit: 'day',
+              tooltipFormat: 'MMMM dd yyyy',
+              displayFormats: {
+                day: 'MMM dd',
+              },
+            },
+            title: {
+              display: false,
+            },
+            ticks: {
+              color: TICK_COLOR,
+              maxTicksLimit: 4,
+              labelOffset: 50,
+              maxRotation: 0,
+            },
+          },
+          y: {
+            beginAtZero: false,
+            suggestedMin: 1,
+            ticks: {
+              color: TICK_COLOR,
+              callback: function (value) {
+                return value + '%';
+              },
+              maxTicksLimit: 4,
+              align: 'center',
+            },
+            grid: {
+              color: GRID_COLOR,
+              lineWidth: 1,
+              drawOnChartArea: true,
+              tickBorderDash: [5, 5],
+              tickBorderDashOffset: 0,
+            },
+          },
+        },
+        plugins: {
+          legend: {
+            display: false,
+          },
+        },
+        layout: {
+          padding: 20,
+        },
+      },
+      plugins: [CUSTOM_CANVAS_BACKGROUND_COLOR, htmlLegendPlugin],
+    });
+
+    return () => {
+      if (chartRef.current) {
+        chartRef.current.destroy();
+      }
+    };
+  }, [mockData]);
+
+  return (
+    <div
+      onClick={e => {
+        e.stopPropagation();
+      }}
+      className="lg:h-[37rem] h-64 rounded"
+    >
+      <span id="legend-container-borrow-chart" className="text-tiny"></span>
+      <canvas ref={canvas}></canvas>
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.types.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.types.ts
new file mode 100644
index 000000000..95e2c0bf1
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.types.ts
@@ -0,0 +1,6 @@
+export type MockData<T> = {
+  data1: T[];
+  label1: string;
+  lineColor: string;
+  xLabels: string[];
+};
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.utils.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.utils.ts
new file mode 100644
index 000000000..a1574762a
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.utils.ts
@@ -0,0 +1,89 @@
+const getOrCreateLegendList = id => {
+  const legendContainer = document.getElementById(id);
+  if (!legendContainer) {
+    return;
+  }
+  let listContainer = legendContainer.querySelector('ul');
+
+  if (!listContainer) {
+    listContainer = document.createElement('ul');
+    listContainer.style.display = 'flex';
+    listContainer.style.flexDirection = 'row';
+    listContainer.style.margin = '0';
+    listContainer.style.padding = '0';
+
+    legendContainer.appendChild(listContainer);
+  }
+
+  return listContainer;
+};
+
+export const htmlLegendPlugin = {
+  id: 'htmlLegend',
+  afterUpdate(chart, args, options) {
+    const ul = getOrCreateLegendList(
+      options.containerID || 'legend-container-borrow-chart',
+    );
+    if (!ul) {
+      return;
+    }
+
+    // Remove old legend items
+    while (ul.firstChild) {
+      ul.firstChild.remove();
+    }
+
+    // Reuse the built-in legendItems generator
+    const items = chart.options.plugins.legend.labels.generateLabels(chart);
+
+    items.forEach(item => {
+      const li = document.createElement('li');
+      li.style.alignItems = 'center';
+      li.style.cursor = 'pointer';
+      li.style.display = 'flex';
+      li.style.flexDirection = 'row';
+      li.style.marginLeft = '10px';
+
+      li.onclick = () => {
+        const { type } = chart.config;
+        if (type === 'pie' || type === 'doughnut') {
+          // Pie and doughnut charts only have a single dataset and visibility is per item
+          chart.toggleDataVisibility(item.index);
+        } else {
+          chart.setDatasetVisibility(
+            item.datasetIndex,
+            !chart.isDatasetVisible(item.datasetIndex),
+          );
+        }
+        chart.update();
+      };
+
+      // Color box
+      const boxSpan = document.createElement('span');
+      boxSpan.style.background = item.fillStyle;
+      boxSpan.style.borderColor = item.strokeStyle;
+      boxSpan.style.borderWidth = item.lineWidth + 'px';
+      boxSpan.style.display = 'inline-block';
+      boxSpan.style.flexShrink = '0';
+      boxSpan.style.height = '10px';
+      boxSpan.style.marginRight = '10px';
+      boxSpan.style.width = '10px';
+
+      // Text
+      const textContainer = document.createElement('p');
+      //textContainer.style.color = item.fontColor;
+      textContainer.style.margin = '0';
+      textContainer.style.padding = '0';
+      textContainer.style.textDecoration = item.hidden ? 'line-through' : '';
+      textContainer.style.color = 'f5f5f5';
+
+      const text = document.createTextNode(item.text);
+      textContainer.appendChild(text);
+
+      li.appendChild(boxSpan);
+      li.appendChild(textContainer);
+      ul.className = 'mb-2';
+      ul.appendChild(li);
+    });
+  },
+};
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
index d4f084dbe..a8a369388 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useMemo, useState } from 'react';
 
 import { t } from 'i18next';
 
@@ -8,17 +8,33 @@ import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRen
 import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
 import { useIsMobile } from '../../../../../hooks/useIsMobile';
 import { translations } from '../../../../../locales/i18n';
+import { Chart } from './components/Chart/Chart';
+import { harcodedData, LINE_COLOR } from './components/Chart/Chart.constants';
+import { MockData } from './components/Chart/Chart.types';
 
 const pageTranslations = translations.aaveReserveOverviewPage.interestRateModel;
 
 type InterestRateModelGraphProps = {};
 
-// TODO: mocked amounts
-
 export const InterestRateModelGraph: FC<InterestRateModelGraphProps> = () => {
   const [open, setOpen] = useState<boolean>(true);
   const { isMobile } = useIsMobile();
 
+  // TODO: mocked amounts
+  const mockData: MockData<{ x: number; y: number }> = useMemo(() => {
+    const data = harcodedData.values;
+    const currentData = harcodedData.annotations.current;
+    const optimalData = harcodedData.annotations.optimal;
+
+    return {
+      data1: data,
+      data2: currentData,
+      data3: optimalData,
+      label1: t(pageTranslations.chart.label1),
+      lineColor: LINE_COLOR,
+      xLabels: data.map(() => ''),
+    };
+  }, []);
   return (
     <Accordion
       label={
@@ -41,8 +57,18 @@ export const InterestRateModelGraph: FC<InterestRateModelGraphProps> = () => {
           <Link href="#" text={t(pageTranslations.interestRateStrategy)} />
         </div>
 
-        <div className="h-10 bg-blue-2">
-          <span>TODO: Graph</span>
+        <Chart mockData={mockData} yLabel1="" />
+        {/* statistics */}
+        <div className="flex gap-8">
+          <StatisticsCard
+            label={t(pageTranslations.reserveFactor)}
+            help={t(pageTranslations.reserveFactorInfo)}
+            value={<AmountRenderer value={85.94} suffix="%" />}
+          />
+          <StatisticsCard
+            label={t(pageTranslations.collectorContract)}
+            value={<Link href="#" text={t(pageTranslations.viewContract)} />}
+          />
         </div>
       </div>
     </Accordion>
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.constants.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.constants.ts
new file mode 100644
index 000000000..6d52f0cb9
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.constants.ts
@@ -0,0 +1,45 @@
+export const PRIMARY_COLOR = '#2C303B';
+export const TEXT_COLOR = '#f5f5f5';
+export const LINE_COLOR = '#f58c31';
+export const BORDER_COLOR = '#484D59';
+export const TICK_COLOR = '#b6bac1';
+export const GRID_COLOR = 'rgb(72 77 89)';
+export const FONT_FAMILY = 'Roboto';
+export const FONT_SIZE = 12;
+export const FONT_WEIGHT = '500';
+export const DASH_GRID_TYPE = 'dash';
+
+export const CUSTOM_CANVAS_BACKGROUND_COLOR = {
+  id: 'customCanvasBackgroundColor',
+  beforeDraw: (chart, options) => {
+    const { ctx } = chart;
+    ctx.save();
+    ctx.globalCompositeOperation = 'destination-over';
+    ctx.fillStyle = '#1e2128';
+    ctx.fillRect(0, 0, chart.width, chart.height);
+    ctx.restore();
+  },
+};
+
+export const harcodedData = {
+  values: [
+    { x: 0, y: 0 }, // Start of the curve
+    { x: 10, y: 1 }, // Small increase
+    { x: 20, y: 2 }, // Gradual increase
+    { x: 30, y: 3 }, // Gradual increase
+    { x: 40, y: 5 }, // Gradual increase
+    { x: 60, y: 9 }, // Steeper increase
+    { x: 92, y: 15 }, // Significant rise, matching the 78.64% mark
+    { x: 100, y: 100 }, // Sharp rise at the 92% mark
+  ],
+  annotations: {
+    current: [
+      { x: 78.64, y: 0 },
+      { x: 78.64, y: 50 }, // Point at the origin for the line to the x-axis
+    ],
+    optimal: [
+      { x: 92, y: 0 },
+      { x: 92, y: 70 }, // Point at the origin for the line to the x-axis
+    ],
+  },
+};
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
new file mode 100644
index 000000000..cd5a6ba9b
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
@@ -0,0 +1,134 @@
+import React, { FC, useEffect, useRef } from 'react';
+
+import ChartLibrary from 'chart.js/auto';
+import 'chartjs-adapter-date-fns';
+
+import {
+  CUSTOM_CANVAS_BACKGROUND_COLOR,
+  GRID_COLOR,
+  TICK_COLOR,
+} from './Chart.constants';
+import { MockData } from './Chart.types';
+import { htmlLegendPlugin } from './Chart.utils';
+
+type ChartProps = {
+  mockData: MockData<{ x: number; y: number }>;
+  yLabel1: string;
+};
+
+export const Chart: FC<ChartProps> = ({ mockData }) => {
+  const canvas = useRef<HTMLCanvasElement>(null);
+  const chartRef = useRef<ChartLibrary | null>(null);
+
+  useEffect(() => {
+    if (chartRef.current) {
+      chartRef.current.destroy();
+    }
+
+    if (!canvas.current) {
+      return;
+    }
+
+    chartRef.current = new ChartLibrary(canvas.current, {
+      type: 'line',
+      data: {
+        labels: ['0%', '50%', '100%'],
+        datasets: [
+          {
+            type: 'line',
+            label: mockData.label1,
+            data: mockData.data1,
+            backgroundColor: mockData.lineColor,
+            borderColor: mockData.lineColor,
+            borderWidth: 2,
+            fill: false,
+            pointRadius: 0,
+          },
+          {
+            label: 'Current 78.64%',
+            type: 'scatter',
+            data: mockData.data2,
+            backgroundColor: 'cyan',
+            borderColor: 'cyan',
+            showLine: true,
+            borderDash: [1, 2],
+            pointRadius: 0,
+          },
+          {
+            label: 'Optimal 92%',
+            type: 'scatter',
+            data: mockData.data3,
+            backgroundColor: '#4caf51',
+            borderColor: '#4caf51',
+            showLine: true,
+            borderDash: [1, 2],
+            pointRadius: 0,
+          },
+        ],
+      },
+      options: {
+        scales: {
+          x: {
+            type: 'linear',
+            min: 0,
+            max: 100,
+            ticks: {
+              color: TICK_COLOR,
+              callback: function (value) {
+                return value + '%';
+              },
+              maxTicksLimit: 5,
+              align: 'center',
+            },
+          },
+          y: {
+            min: 0,
+            max: 100,
+            ticks: {
+              color: '#b6bac1',
+              callback: function (value) {
+                return value + '%';
+              },
+              maxTicksLimit: 5,
+              align: 'center',
+            },
+            grid: {
+              color: GRID_COLOR,
+              lineWidth: 1,
+              drawOnChartArea: true,
+              tickBorderDash: [5, 5],
+              tickBorderDashOffset: 0,
+            },
+          },
+        },
+        layout: {
+          padding: 20,
+        },
+        plugins: {
+          legend: {
+            display: false,
+          },
+        },
+      },
+      plugins: [CUSTOM_CANVAS_BACKGROUND_COLOR, htmlLegendPlugin],
+    });
+
+    return () => {
+      if (chartRef.current) {
+        chartRef.current.destroy();
+      }
+    };
+  }, [mockData]);
+
+  return (
+    <div
+      onClick={e => {
+        e.stopPropagation();
+      }}
+      className="lg:h-[37rem] h-64 rounded"
+    >
+      <span id="legend-container-interest-chart" className="text-tiny"></span>
+      <canvas ref={canvas}></canvas>
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.types.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.types.ts
new file mode 100644
index 000000000..cc3d258c6
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.types.ts
@@ -0,0 +1,8 @@
+export type MockData<T> = {
+  data1: T[];
+  data2: T[];
+  data3: T[];
+  label1: string;
+  lineColor: string;
+  xLabels: string[];
+};
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.utils.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.utils.ts
new file mode 100644
index 000000000..40a303ffa
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.utils.ts
@@ -0,0 +1,89 @@
+const getOrCreateLegendList = id => {
+  const legendContainer = document.getElementById(id);
+  if (!legendContainer) {
+    return;
+  }
+  let listContainer = legendContainer.querySelector('ul');
+
+  if (!listContainer) {
+    listContainer = document.createElement('ul');
+    listContainer.style.display = 'flex';
+    listContainer.style.flexDirection = 'row';
+    listContainer.style.margin = '0';
+    listContainer.style.padding = '0';
+
+    legendContainer.appendChild(listContainer);
+  }
+
+  return listContainer;
+};
+
+export const htmlLegendPlugin = {
+  id: 'htmlLegend',
+  afterUpdate(chart, args, options) {
+    const ul = getOrCreateLegendList(
+      options.containerID || 'legend-container-interest-chart',
+    );
+    if (!ul) {
+      return;
+    }
+
+    // Remove old legend items
+    while (ul.firstChild) {
+      ul.firstChild.remove();
+    }
+
+    // Reuse the built-in legendItems generator
+    const items = chart.options.plugins.legend.labels.generateLabels(chart);
+
+    items.forEach(item => {
+      const li = document.createElement('li');
+      li.style.alignItems = 'center';
+      li.style.cursor = 'pointer';
+      li.style.display = 'flex';
+      li.style.flexDirection = 'row';
+      li.style.marginLeft = '10px';
+
+      li.onclick = () => {
+        const { type } = chart.config;
+        if (type === 'pie' || type === 'doughnut') {
+          // Pie and doughnut charts only have a single dataset and visibility is per item
+          chart.toggleDataVisibility(item.index);
+        } else {
+          chart.setDatasetVisibility(
+            item.datasetIndex,
+            !chart.isDatasetVisible(item.datasetIndex),
+          );
+        }
+        chart.update();
+      };
+
+      // Color box
+      const boxSpan = document.createElement('span');
+      boxSpan.style.background = item.fillStyle;
+      boxSpan.style.borderColor = item.strokeStyle;
+      boxSpan.style.borderWidth = item.lineWidth + 'px';
+      boxSpan.style.display = 'inline-block';
+      boxSpan.style.flexShrink = '0';
+      boxSpan.style.height = '10px';
+      boxSpan.style.marginRight = '10px';
+      boxSpan.style.width = '10px';
+
+      // Text
+      const textContainer = document.createElement('p');
+      //textContainer.style.color = item.fontColor;
+      textContainer.style.margin = '0';
+      textContainer.style.padding = '0';
+      textContainer.style.textDecoration = item.hidden ? 'line-through' : '';
+      textContainer.style.color = 'f5f5f5';
+
+      const text = document.createTextNode(item.text);
+      textContainer.appendChild(text);
+
+      li.appendChild(boxSpan);
+      li.appendChild(textContainer);
+      ul.className = 'mb-2';
+      ul.appendChild(li);
+    });
+  },
+};
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
index 5d25bb094..daf50235a 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useMemo, useState } from 'react';
 
 import { t } from 'i18next';
 
@@ -8,16 +8,28 @@ import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRen
 import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
 import { useIsMobile } from '../../../../../hooks/useIsMobile';
 import { translations } from '../../../../../locales/i18n';
+import { Chart } from './components/Chart/Chart';
+import { harcodedData, LINE_COLOR } from './components/Chart/Chart.constants';
+import { MockData } from './components/Chart/Chart.types';
 
 const pageTranslations = translations.aaveReserveOverviewPage.supplyDetails;
 
 type SupplyDetailsGraphProps = {};
 
-// TODO: mocked amounts
-
 export const SupplyDetailsGraph: FC<SupplyDetailsGraphProps> = () => {
   const [open, setOpen] = useState<boolean>(true);
   const { isMobile } = useIsMobile();
+  // TODO: mocked amounts
+  const mockData: MockData<{ x: string; y: number }> = useMemo(() => {
+    const data1 = harcodedData;
+
+    return {
+      data1,
+      label1: t(pageTranslations.chart.label1),
+      lineColor: LINE_COLOR,
+      xLabels: data1.map(item => item.x),
+    };
+  }, []);
 
   return (
     <Accordion
@@ -63,9 +75,7 @@ export const SupplyDetailsGraph: FC<SupplyDetailsGraphProps> = () => {
           />
         </div>
 
-        <div className="h-10 bg-blue-2">
-          <span>TODO: Graph</span>
-        </div>
+        <Chart mockData={mockData} yLabel1="" />
 
         <div className="space-y-6">
           {/* heading */}
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.constants.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.constants.ts
new file mode 100644
index 000000000..6d3ad4980
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.constants.ts
@@ -0,0 +1,72 @@
+export const PRIMARY_COLOR = '#2C303B';
+export const TEXT_COLOR = '#f5f5f5';
+export const LINE_COLOR = '#f58c31';
+export const TICK_COLOR = '#b6bac1';
+export const BORDER_COLOR = '#484D59';
+export const GRID_COLOR = 'rgb(72 77 89)';
+export const FONT_FAMILY = 'Roboto';
+export const FONT_SIZE = 12;
+export const FONT_WEIGHT = '500';
+export const DASH_GRID_TYPE = 'dash';
+
+export const CUSTOM_CANVAS_BACKGROUND_COLOR = {
+  id: 'customCanvasBackgroundColor',
+  beforeDraw: (chart, options) => {
+    const { ctx } = chart;
+    ctx.save();
+    ctx.globalCompositeOperation = 'destination-over';
+    ctx.fillStyle = '#1e2128';
+    ctx.fillRect(0, 0, chart.width, chart.height);
+    ctx.restore();
+  },
+};
+
+export const harcodedData = [
+  { x: '2023-06-15T00:00:00Z', y: 2.5 },
+  { x: '2023-06-16T00:00:00Z', y: 2.6 },
+  { x: '2023-06-17T00:00:00Z', y: 2.7 },
+  { x: '2023-06-18T00:00:00Z', y: 2.7 },
+  { x: '2023-06-19T00:00:00Z', y: 2.8 },
+  { x: '2023-06-20T00:00:00Z', y: 2.9 },
+  { x: '2023-06-21T00:00:00Z', y: 3.0 },
+  { x: '2023-06-22T00:00:00Z', y: 3.0 },
+  { x: '2023-06-23T00:00:00Z', y: 3.1 },
+  { x: '2023-06-24T00:00:00Z', y: 3.1 },
+  { x: '2023-06-25T00:00:00Z', y: 3.2 },
+  { x: '2023-06-26T00:00:00Z', y: 3.3 },
+  { x: '2023-06-27T00:00:00Z', y: 3.4 },
+  { x: '2023-06-28T00:00:00Z', y: 3.5 },
+  { x: '2023-06-29T00:00:00Z', y: 3.7 },
+  { x: '2023-06-30T00:00:00Z', y: 4.0 },
+  { x: '2023-07-01T00:00:00Z', y: 4.2 },
+  { x: '2023-07-02T00:00:00Z', y: 4.0 },
+  { x: '2023-07-03T00:00:00Z', y: 3.9 },
+  { x: '2023-07-04T00:00:00Z', y: 3.8 },
+  { x: '2023-07-05T00:00:00Z', y: 3.8 },
+  { x: '2023-07-06T00:00:00Z', y: 3.7 },
+  { x: '2023-07-07T00:00:00Z', y: 3.7 },
+  { x: '2023-07-08T00:00:00Z', y: 3.6 },
+  { x: '2023-07-09T00:00:00Z', y: 3.6 },
+  { x: '2023-07-10T00:00:00Z', y: 3.5 },
+  { x: '2023-07-11T00:00:00Z', y: 3.5 },
+  { x: '2023-07-12T00:00:00Z', y: 3.5 },
+  { x: '2023-07-13T00:00:00Z', y: 3.4 },
+  { x: '2023-07-14T00:00:00Z', y: 3.4 },
+  { x: '2023-07-15T00:00:00Z', y: 3.3 },
+  { x: '2023-07-16T00:00:00Z', y: 3.3 },
+  { x: '2023-07-17T00:00:00Z', y: 3.3 },
+  { x: '2023-07-18T00:00:00Z', y: 3.3 },
+  { x: '2023-07-19T00:00:00Z', y: 3.3 },
+  { x: '2023-07-20T00:00:00Z', y: 3.2 },
+  { x: '2023-07-21T00:00:00Z', y: 3.2 },
+  { x: '2023-07-22T00:00:00Z', y: 3.2 },
+  { x: '2023-07-23T00:00:00Z', y: 3.2 },
+  { x: '2023-07-24T00:00:00Z', y: 3.2 },
+  { x: '2023-07-25T00:00:00Z', y: 3.2 },
+  { x: '2023-07-26T00:00:00Z', y: 3.1 },
+  { x: '2023-07-27T00:00:00Z', y: 3.1 },
+  { x: '2023-07-28T00:00:00Z', y: 3.1 },
+  { x: '2023-07-29T00:00:00Z', y: 3.1 },
+  { x: '2023-07-30T00:00:00Z', y: 3.1 },
+  { x: '2023-07-31T00:00:00Z', y: 3.1 },
+];
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.tsx
new file mode 100644
index 000000000..9cb338322
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.tsx
@@ -0,0 +1,121 @@
+import React, { FC, useEffect, useRef } from 'react';
+
+import ChartLibrary from 'chart.js/auto';
+import 'chartjs-adapter-date-fns';
+
+import {
+  CUSTOM_CANVAS_BACKGROUND_COLOR,
+  GRID_COLOR,
+  TICK_COLOR,
+} from './Chart.constants';
+import { MockData } from './Chart.types';
+import { htmlLegendPlugin } from './Chart.utils';
+
+type ChartProps = {
+  mockData: MockData<any>;
+  yLabel1: string;
+};
+
+export const Chart: FC<ChartProps> = ({ mockData }) => {
+  const canvas = useRef<HTMLCanvasElement>(null);
+  const chartRef = useRef<ChartLibrary | null>(null);
+
+  useEffect(() => {
+    if (chartRef.current) {
+      chartRef.current.destroy();
+    }
+
+    if (!canvas.current) {
+      return;
+    }
+
+    chartRef.current = new ChartLibrary(canvas.current, {
+      type: 'line',
+      data: {
+        datasets: [
+          {
+            type: 'line',
+            label: mockData.label1,
+            data: mockData.data1,
+            backgroundColor: 'rgba(245, 140, 49, 1)',
+            borderColor: mockData.lineColor,
+            borderWidth: 2,
+            fill: false,
+            pointRadius: 0,
+          },
+        ],
+      },
+      options: {
+        scales: {
+          x: {
+            type: 'time',
+            time: {
+              unit: 'day',
+              tooltipFormat: 'MMMM dd yyyy',
+              displayFormats: {
+                day: 'MMM dd',
+              },
+            },
+            title: {
+              display: false,
+              text: 'Date',
+              color: '#ffffff',
+            },
+            ticks: {
+              color: TICK_COLOR,
+              maxTicksLimit: 4,
+              labelOffset: 50,
+              maxRotation: 0,
+            },
+          },
+          y: {
+            beginAtZero: false,
+            suggestedMin: 1,
+            ticks: {
+              color: TICK_COLOR,
+              callback: function (value) {
+                return value + '%';
+              },
+              maxTicksLimit: 4,
+              align: 'center',
+            },
+            grid: {
+              color: GRID_COLOR,
+              lineWidth: 1,
+              drawOnChartArea: true,
+              tickBorderDash: [5, 5],
+              tickBorderDashOffset: 0,
+            },
+          },
+        },
+        plugins: {
+          legend: {
+            display: false,
+          },
+        },
+        layout: {
+          padding: 20,
+        },
+      },
+      plugins: [CUSTOM_CANVAS_BACKGROUND_COLOR, htmlLegendPlugin],
+    });
+
+    return () => {
+      if (chartRef.current) {
+        chartRef.current.destroy();
+      }
+    };
+  }, [mockData]);
+
+  return (
+    <div
+      onClick={e => {
+        e.stopPropagation();
+      }}
+      className="lg:h-[37rem] h-64 rounded"
+    >
+      <span id="legend-container-supply-chart" className="text-tiny"></span>
+      <canvas ref={canvas}></canvas>
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.types.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.types.ts
new file mode 100644
index 000000000..95e2c0bf1
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.types.ts
@@ -0,0 +1,6 @@
+export type MockData<T> = {
+  data1: T[];
+  label1: string;
+  lineColor: string;
+  xLabels: string[];
+};
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.utils.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.utils.ts
new file mode 100644
index 000000000..6df318eb7
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.utils.ts
@@ -0,0 +1,89 @@
+const getOrCreateLegendList = id => {
+  const legendContainer = document.getElementById(id);
+  if (!legendContainer) {
+    return;
+  }
+  let listContainer = legendContainer.querySelector('ul');
+
+  if (!listContainer) {
+    listContainer = document.createElement('ul');
+    listContainer.style.display = 'flex';
+    listContainer.style.flexDirection = 'row';
+    listContainer.style.margin = '0';
+    listContainer.style.padding = '0';
+
+    legendContainer.appendChild(listContainer);
+  }
+
+  return listContainer;
+};
+
+export const htmlLegendPlugin = {
+  id: 'htmlLegend',
+  afterUpdate(chart, args, options) {
+    const ul = getOrCreateLegendList(
+      options.containerID || 'legend-container-supply-chart',
+    );
+    if (!ul) {
+      return;
+    }
+
+    // Remove old legend items
+    while (ul.firstChild) {
+      ul.firstChild.remove();
+    }
+
+    // Reuse the built-in legendItems generator
+    const items = chart.options.plugins.legend.labels.generateLabels(chart);
+
+    items.forEach(item => {
+      const li = document.createElement('li');
+      li.style.alignItems = 'center';
+      li.style.cursor = 'pointer';
+      li.style.display = 'flex';
+      li.style.flexDirection = 'row';
+      li.style.marginLeft = '10px';
+
+      li.onclick = () => {
+        const { type } = chart.config;
+        if (type === 'pie' || type === 'doughnut') {
+          // Pie and doughnut charts only have a single dataset and visibility is per item
+          chart.toggleDataVisibility(item.index);
+        } else {
+          chart.setDatasetVisibility(
+            item.datasetIndex,
+            !chart.isDatasetVisible(item.datasetIndex),
+          );
+        }
+        chart.update();
+      };
+
+      // Color box
+      const boxSpan = document.createElement('span');
+      boxSpan.style.background = item.fillStyle;
+      boxSpan.style.borderColor = item.strokeStyle;
+      boxSpan.style.borderWidth = item.lineWidth + 'px';
+      boxSpan.style.display = 'inline-block';
+      boxSpan.style.flexShrink = '0';
+      boxSpan.style.height = '10px';
+      boxSpan.style.marginRight = '10px';
+      boxSpan.style.width = '10px';
+
+      // Text
+      const textContainer = document.createElement('p');
+      //textContainer.style.color = item.fontColor;
+      textContainer.style.margin = '0';
+      textContainer.style.padding = '0';
+      textContainer.style.textDecoration = item.hidden ? 'line-through' : '';
+      textContainer.style.color = 'f5f5f5';
+
+      const text = document.createTextNode(item.text);
+      textContainer.appendChild(text);
+
+      li.appendChild(boxSpan);
+      li.appendChild(textContainer);
+      ul.className = 'mb-2';
+      ul.appendChild(li);
+    });
+  },
+};
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index 00316f769..46893d98f 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -936,7 +936,10 @@
             "totalSupplied": "Total supplied",
             "totalSuppliedInfo": "Asset supply is limited to a certain amount to reduce protocol exposure to the asset and to help manage risks involved.",
             "of": "of",
-            "apy": "APY"
+            "apy": "APY",
+            "chart": {
+                "label1": "Supply APR"
+            }
         },
         "borrowDetails": {
             "title": "Borrow details",
@@ -949,12 +952,22 @@
             "reserveFactor": "Reserve factor",
             "reserveFactorInfo": "Reserve factor is a percentage of interest which goes to a collector contract that is controlled by Aave governance to promote ecosystem growth.",
             "collectorContract": "Collector contract",
-            "viewContract": "View contract"
+            "viewContract": "View contract",
+            "chart": {
+                "label1": "Borrow APR, variable"
+            }
         },
         "interestRateModel": {
             "title": "Interest rate model",
             "utilizationRate": "Utilization rate",
-            "interestRateStrategy": "Interest rate strategy"
+            "interestRateStrategy": "Interest rate strategy",
+            "reserveFactor": "Reserve factor",
+            "reserveFactorInfo": "Reserve factor is a percentage of interest which goes to a collector contract that is controlled by Aave governance to promote ecosystem growth.",
+            "collectorContract": "Collector contract",
+            "viewContract": "View contract",
+            "chart": {
+                "label1": "Borrow APR, variable"
+            }
         }
     },
     "bitocracyPage": {

From 8359dbbc33ebdea7b2b4d3b21ff4e5dc39bc3a05 Mon Sep 17 00:00:00 2001
From: Christian Escalante <chescalante.ar@gmail.com>
Date: Tue, 20 Aug 2024 08:57:46 -0300
Subject: [PATCH 044/116] removed view transactions button (out of scope)

---
 .../AavePage/components/TopPanel/TopPanel.tsx   | 17 +----------------
 1 file changed, 1 insertion(+), 16 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx b/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
index e388db243..e8846454d 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
@@ -2,14 +2,7 @@ import React, { FC, useState } from 'react';
 
 import { t } from 'i18next';
 
-import {
-  Button,
-  ButtonSize,
-  ButtonStyle,
-  Heading,
-  Paragraph,
-  ParagraphSize,
-} from '@sovryn/ui';
+import { Heading, Paragraph, ParagraphSize } from '@sovryn/ui';
 
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
@@ -80,14 +73,6 @@ export const TopPanel: FC<TopPanelProps> = () => {
             />
           </div>
         </div>
-
-        <div className="md:flex md:justify-end md:w-full md:items-end md:pb-5">
-          <Button
-            text={t(pageTranslations.viewTransactions)}
-            style={ButtonStyle.secondary}
-            size={ButtonSize.small}
-          />
-        </div>
       </div>
     </div>
   );

From dd2393147623fb59832afe9e64483dd50d3e9752 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Tue, 20 Aug 2024 16:59:48 +0300
Subject: [PATCH 045/116] fix breakpoints

---
 apps/frontend/src/app/5_pages/AavePage/AavePage.tsx    | 10 +++++-----
 .../AaveReserveOverviewPage.tsx                        |  6 +++---
 .../BorrowDetailsGraph/components/Chart/Chart.tsx      |  2 +-
 .../InterestRateModelGraph/components/Chart/Chart.tsx  |  2 +-
 .../SupplyDetailsGraph/components/Chart/Chart.tsx      |  2 +-
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx b/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
index baa74f0bb..18dd1374c 100644
--- a/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
@@ -31,10 +31,10 @@ const AavePage: FC = () => {
 
       <TopPanel />
 
-      <div className="pt-6 mt-6 space-y-6 lg:pt-0 lg:mt-0 lg:space-y-0">
+      <div className="pt-6 mt-6 space-y-6 2xl:pt-0 2xl:mt-0 2xl:space-y-0">
         {/* Tab selector */}
         <Tabs
-          className="w-full bg-gray-80 rounded p-1 border border-gray-60 lg:hidden"
+          className="w-full bg-gray-80 rounded p-1 border border-gray-60 2xl:hidden"
           index={activeTab}
           items={[
             {
@@ -54,11 +54,11 @@ const AavePage: FC = () => {
         />
 
         {/* Lending and borrowing columns */}
-        <div className="grid grid-cols-1 lg:grid-cols-2 lg:gap-5">
+        <div className="grid grid-cols-1 2xl:grid-cols-2 2xl:gap-5">
           <div
             className={classNames(
               { hidden: activeTab !== ActiveTab.LEND },
-              'lg:block space-y-4',
+              '2xl:block space-y-4',
             )}
           >
             <LendPositionsList />
@@ -69,7 +69,7 @@ const AavePage: FC = () => {
           <div
             className={classNames(
               { hidden: activeTab !== ActiveTab.BORROW },
-              'lg:block space-y-4',
+              '2xl:block space-y-4',
             )}
           >
             <BorrowPositionsList />
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
index 30869ebff..b2fef9581 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
@@ -57,11 +57,11 @@ const AaveReserveOverviewPage: FC = () => {
         />
 
         {/* reserve graphics columns */}
-        <div className="grid grid-cols-1 lg:gap-5 lg:grid-cols-[auto_465px]">
+        <div className="flex gap-5">
           <div
             className={classNames(
               { hidden: activeOverviewTab !== OverviewTab.RESERVE },
-              'lg:block space-y-4 w-full',
+              'lg:block space-y-4 flex-grow w-min',
             )}
           >
             <SupplyDetailsGraph />
@@ -74,7 +74,7 @@ const AaveReserveOverviewPage: FC = () => {
           <div
             className={classNames(
               { hidden: activeOverviewTab !== OverviewTab.WALLET },
-              'lg:block space-y-4',
+              'lg:block space-y-4 w-[450px] shrink-0',
             )}
           >
             <WalletOverview asset={asset} />
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx
index 308b02aa7..0089fe504 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx
@@ -110,7 +110,7 @@ export const Chart: FC<ChartProps> = ({ mockData }) => {
       onClick={e => {
         e.stopPropagation();
       }}
-      className="lg:h-[37rem] h-64 rounded"
+      className="w-full rounded"
     >
       <span id="legend-container-borrow-chart" className="text-tiny"></span>
       <canvas ref={canvas}></canvas>
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
index cd5a6ba9b..00df99364 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
@@ -125,7 +125,7 @@ export const Chart: FC<ChartProps> = ({ mockData }) => {
       onClick={e => {
         e.stopPropagation();
       }}
-      className="lg:h-[37rem] h-64 rounded"
+      className="w-full rounded"
     >
       <span id="legend-container-interest-chart" className="text-tiny"></span>
       <canvas ref={canvas}></canvas>
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.tsx
index 9cb338322..30449d9f0 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.tsx
@@ -112,7 +112,7 @@ export const Chart: FC<ChartProps> = ({ mockData }) => {
       onClick={e => {
         e.stopPropagation();
       }}
-      className="lg:h-[37rem] h-64 rounded"
+      className="w-full rounded"
     >
       <span id="legend-container-supply-chart" className="text-tiny"></span>
       <canvas ref={canvas}></canvas>

From 14878b4edb4ced1f4e0adb02e4799c816cd99910 Mon Sep 17 00:00:00 2001
From: Luciano Perez Cerra <perezcerraluciano@gmail.com>
Date: Tue, 20 Aug 2024 15:28:32 -0300
Subject: [PATCH 046/116] [SAF-41] fix color constant and background for mobile
 vs desktop views (#20)

* [SAF-41] fix color constant and background for mobile vs desktop views

* [SAF-41] use theme variables for colors and breakpoint usage for better consistency

* Apply suggestions from code review

Co-authored-by: Juan Dahl <juandahl@users.noreply.github.com>

---------

Co-authored-by: Juan Dahl <juandahl@users.noreply.github.com>
---
 .../AaveReserveOverviewPage.tsx               |  5 ++++-
 .../BorrowDetailsGraph/BorrowDetailsGraph.tsx |  5 +++--
 .../components/Chart/Chart.constants.ts       | 20 +++++++++---------
 .../components/Chart/Chart.tsx                |  6 ++----
 .../InterestRateModelGraph.tsx                |  5 +++--
 .../components/Chart/Chart.constants.ts       | 20 +++++++++---------
 .../components/Chart/Chart.tsx                | 16 +++++++-------
 .../SupplyDetailsGraph/SupplyDetailsGraph.tsx |  5 +++--
 .../components/Chart/Chart.constants.ts       | 21 ++++++++++---------
 .../components/Chart/Chart.tsx                |  6 ++----
 .../frontend/src/locales/en/translations.json |  3 ++-
 11 files changed, 58 insertions(+), 54 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
index b2fef9581..1c9418098 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { t } from 'i18next';
 import { Helmet } from 'react-helmet-async';
 
-import { Tabs, TabSize, TabType } from '@sovryn/ui';
+import { Paragraph, Tabs, TabSize, TabType } from '@sovryn/ui';
 
 import { translations } from '../../../locales/i18n';
 import { BorrowDetailsGraph } from './components/BorrowDetailsGraph/BorrowDetailsGraph';
@@ -34,6 +34,9 @@ const AaveReserveOverviewPage: FC = () => {
       </Helmet>
 
       <TopPanel asset={asset} className="lg:mb-[110px] lg:mt-[52px]" />
+      <Paragraph className="text-base mb-4">
+        {t(pageTranslations.reserveStatusTab.fullTitle)}
+      </Paragraph>
 
       <div className="pt-6 space-y-6 lg:pt-0 lg:space-y-0 w-full">
         <Tabs
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
index d4f547fe8..26f12e9fd 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
@@ -2,6 +2,7 @@ import React, { FC, useMemo, useState } from 'react';
 
 import { t } from 'i18next';
 
+import { theme } from '@sovryn/tailwindcss-config';
 import { Accordion, Link, Paragraph } from '@sovryn/ui';
 
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
@@ -9,7 +10,7 @@ import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/Statistic
 import { useIsMobile } from '../../../../../hooks/useIsMobile';
 import { translations } from '../../../../../locales/i18n';
 import { Chart } from './components/Chart/Chart';
-import { harcodedData, LINE_COLOR } from './components/Chart/Chart.constants';
+import { harcodedData } from './components/Chart/Chart.constants';
 import { MockData } from './components/Chart/Chart.types';
 
 const pageTranslations = translations.aaveReserveOverviewPage.borrowDetails;
@@ -27,7 +28,7 @@ export const BorrowDetailsGraph: FC<BorrowDetailsGraphProps> = () => {
     return {
       data1,
       label1: t(pageTranslations.chart.label1),
-      lineColor: LINE_COLOR,
+      lineColor: theme.colors.positive,
       xLabels: data1.map(item => item.x),
     };
   }, []);
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.constants.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.constants.ts
index c402c345b..7156e654a 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.constants.ts
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.constants.ts
@@ -1,21 +1,21 @@
-export const PRIMARY_COLOR = '#2C303B';
-export const TEXT_COLOR = '#f5f5f5';
-export const LINE_COLOR = '#72eadf';
+import { theme } from '@sovryn/tailwindcss-config';
+
+export const GRID_COLOR = '#484d59';
 export const TICK_COLOR = '#b6bac1';
-export const BORDER_COLOR = '#484D59';
-export const GRID_COLOR = 'rgb(72 77 89)';
-export const FONT_FAMILY = 'Roboto';
-export const FONT_SIZE = 12;
-export const FONT_WEIGHT = '500';
-export const DASH_GRID_TYPE = 'dash';
+const SM_BREAKPOINT = parseInt(theme.screens.sm, 10) || 576;
 
 export const CUSTOM_CANVAS_BACKGROUND_COLOR = {
   id: 'customCanvasBackgroundColor',
   beforeDraw: (chart, options) => {
     const { ctx } = chart;
+    const windowWidth = window.innerWidth;
     ctx.save();
     ctx.globalCompositeOperation = 'destination-over';
-    ctx.fillStyle = '#1e2128';
+    if (windowWidth < SM_BREAKPOINT) {
+      ctx.fillStyle = theme.colors['gray-90'];
+    } else {
+      ctx.fillStyle = theme.colors['gray-80'];
+    }
     ctx.fillRect(0, 0, chart.width, chart.height);
     ctx.restore();
   },
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx
index 0089fe504..e16a4b200 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx
@@ -79,10 +79,8 @@ export const Chart: FC<ChartProps> = ({ mockData }) => {
             },
             grid: {
               color: GRID_COLOR,
-              lineWidth: 1,
-              drawOnChartArea: true,
               tickBorderDash: [5, 5],
-              tickBorderDashOffset: 0,
+              drawTicks: false,
             },
           },
         },
@@ -110,7 +108,7 @@ export const Chart: FC<ChartProps> = ({ mockData }) => {
       onClick={e => {
         e.stopPropagation();
       }}
-      className="w-full rounded"
+      className="lg:p-6 lg:bg-gray-80"
     >
       <span id="legend-container-borrow-chart" className="text-tiny"></span>
       <canvas ref={canvas}></canvas>
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
index a8a369388..12a4bcb10 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
@@ -2,6 +2,7 @@ import React, { FC, useMemo, useState } from 'react';
 
 import { t } from 'i18next';
 
+import { theme } from '@sovryn/tailwindcss-config';
 import { Accordion, Link } from '@sovryn/ui';
 
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
@@ -9,7 +10,7 @@ import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/Statistic
 import { useIsMobile } from '../../../../../hooks/useIsMobile';
 import { translations } from '../../../../../locales/i18n';
 import { Chart } from './components/Chart/Chart';
-import { harcodedData, LINE_COLOR } from './components/Chart/Chart.constants';
+import { harcodedData } from './components/Chart/Chart.constants';
 import { MockData } from './components/Chart/Chart.types';
 
 const pageTranslations = translations.aaveReserveOverviewPage.interestRateModel;
@@ -31,7 +32,7 @@ export const InterestRateModelGraph: FC<InterestRateModelGraphProps> = () => {
       data2: currentData,
       data3: optimalData,
       label1: t(pageTranslations.chart.label1),
-      lineColor: LINE_COLOR,
+      lineColor: theme.colors['primary-30'],
       xLabels: data.map(() => ''),
     };
   }, []);
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.constants.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.constants.ts
index 6d52f0cb9..241c37c9b 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.constants.ts
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.constants.ts
@@ -1,21 +1,21 @@
-export const PRIMARY_COLOR = '#2C303B';
-export const TEXT_COLOR = '#f5f5f5';
-export const LINE_COLOR = '#f58c31';
-export const BORDER_COLOR = '#484D59';
+import { theme } from '@sovryn/tailwindcss-config';
+
+export const GRID_COLOR = '#484d59';
 export const TICK_COLOR = '#b6bac1';
-export const GRID_COLOR = 'rgb(72 77 89)';
-export const FONT_FAMILY = 'Roboto';
-export const FONT_SIZE = 12;
-export const FONT_WEIGHT = '500';
-export const DASH_GRID_TYPE = 'dash';
+const SM_BREAKPOINT = parseInt(theme.screens.sm, 10) || 576;
 
 export const CUSTOM_CANVAS_BACKGROUND_COLOR = {
   id: 'customCanvasBackgroundColor',
   beforeDraw: (chart, options) => {
     const { ctx } = chart;
+    const windowWidth = window.innerWidth;
     ctx.save();
     ctx.globalCompositeOperation = 'destination-over';
-    ctx.fillStyle = '#1e2128';
+    if (windowWidth < SM_BREAKPOINT) {
+      ctx.fillStyle = theme.colors['gray-90'];
+    } else {
+      ctx.fillStyle = theme.colors['gray-80'];
+    }
     ctx.fillRect(0, 0, chart.width, chart.height);
     ctx.restore();
   },
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
index 00df99364..54892247a 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
@@ -3,6 +3,8 @@ import React, { FC, useEffect, useRef } from 'react';
 import ChartLibrary from 'chart.js/auto';
 import 'chartjs-adapter-date-fns';
 
+import { theme } from '@sovryn/tailwindcss-config';
+
 import {
   CUSTOM_CANVAS_BACKGROUND_COLOR,
   GRID_COLOR,
@@ -48,8 +50,8 @@ export const Chart: FC<ChartProps> = ({ mockData }) => {
             label: 'Current 78.64%',
             type: 'scatter',
             data: mockData.data2,
-            backgroundColor: 'cyan',
-            borderColor: 'cyan',
+            borderColor: theme.colors.positive,
+            backgroundColor: theme.colors.positive,
             showLine: true,
             borderDash: [1, 2],
             pointRadius: 0,
@@ -58,8 +60,8 @@ export const Chart: FC<ChartProps> = ({ mockData }) => {
             label: 'Optimal 92%',
             type: 'scatter',
             data: mockData.data3,
-            backgroundColor: '#4caf51',
-            borderColor: '#4caf51',
+            borderColor: theme.colors.success,
+            backgroundColor: theme.colors.success,
             showLine: true,
             borderDash: [1, 2],
             pointRadius: 0,
@@ -94,10 +96,8 @@ export const Chart: FC<ChartProps> = ({ mockData }) => {
             },
             grid: {
               color: GRID_COLOR,
-              lineWidth: 1,
-              drawOnChartArea: true,
               tickBorderDash: [5, 5],
-              tickBorderDashOffset: 0,
+              drawTicks: false,
             },
           },
         },
@@ -125,7 +125,7 @@ export const Chart: FC<ChartProps> = ({ mockData }) => {
       onClick={e => {
         e.stopPropagation();
       }}
-      className="w-full rounded"
+      className="lg:p-6 lg:bg-gray-80"
     >
       <span id="legend-container-interest-chart" className="text-tiny"></span>
       <canvas ref={canvas}></canvas>
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
index daf50235a..86e59fa50 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
@@ -2,6 +2,7 @@ import React, { FC, useMemo, useState } from 'react';
 
 import { t } from 'i18next';
 
+import { theme } from '@sovryn/tailwindcss-config';
 import { Accordion, Icon, IconNames, Paragraph } from '@sovryn/ui';
 
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
@@ -9,7 +10,7 @@ import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/Statistic
 import { useIsMobile } from '../../../../../hooks/useIsMobile';
 import { translations } from '../../../../../locales/i18n';
 import { Chart } from './components/Chart/Chart';
-import { harcodedData, LINE_COLOR } from './components/Chart/Chart.constants';
+import { harcodedData } from './components/Chart/Chart.constants';
 import { MockData } from './components/Chart/Chart.types';
 
 const pageTranslations = translations.aaveReserveOverviewPage.supplyDetails;
@@ -26,7 +27,7 @@ export const SupplyDetailsGraph: FC<SupplyDetailsGraphProps> = () => {
     return {
       data1,
       label1: t(pageTranslations.chart.label1),
-      lineColor: LINE_COLOR,
+      lineColor: theme.colors['primary-30'],
       xLabels: data1.map(item => item.x),
     };
   }, []);
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.constants.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.constants.ts
index 6d3ad4980..5a615f6bb 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.constants.ts
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.constants.ts
@@ -1,21 +1,22 @@
-export const PRIMARY_COLOR = '#2C303B';
-export const TEXT_COLOR = '#f5f5f5';
-export const LINE_COLOR = '#f58c31';
+import { theme } from '@sovryn/tailwindcss-config';
+
+export const GRID_COLOR = '#484d59';
 export const TICK_COLOR = '#b6bac1';
-export const BORDER_COLOR = '#484D59';
-export const GRID_COLOR = 'rgb(72 77 89)';
-export const FONT_FAMILY = 'Roboto';
-export const FONT_SIZE = 12;
-export const FONT_WEIGHT = '500';
-export const DASH_GRID_TYPE = 'dash';
+const SM_BREAKPOINT = parseInt(theme.screens.sm, 10);
 
 export const CUSTOM_CANVAS_BACKGROUND_COLOR = {
   id: 'customCanvasBackgroundColor',
   beforeDraw: (chart, options) => {
     const { ctx } = chart;
+    const windowWidth = window.innerWidth;
     ctx.save();
     ctx.globalCompositeOperation = 'destination-over';
-    ctx.fillStyle = '#1e2128';
+
+    if (windowWidth < SM_BREAKPOINT) {
+      ctx.fillStyle = theme.colors['gray-90'];
+    } else {
+      ctx.fillStyle = theme.colors['gray-80'];
+    }
     ctx.fillRect(0, 0, chart.width, chart.height);
     ctx.restore();
   },
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.tsx
index 30449d9f0..aab0f7505 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.tsx
@@ -81,10 +81,8 @@ export const Chart: FC<ChartProps> = ({ mockData }) => {
             },
             grid: {
               color: GRID_COLOR,
-              lineWidth: 1,
-              drawOnChartArea: true,
               tickBorderDash: [5, 5],
-              tickBorderDashOffset: 0,
+              drawTicks: false,
             },
           },
         },
@@ -112,7 +110,7 @@ export const Chart: FC<ChartProps> = ({ mockData }) => {
       onClick={e => {
         e.stopPropagation();
       }}
-      className="w-full rounded"
+      className="lg:p-6 lg:bg-gray-80"
     >
       <span id="legend-container-supply-chart" className="text-tiny"></span>
       <canvas ref={canvas}></canvas>
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index 46893d98f..65ac2d9f6 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -894,7 +894,8 @@
             "oraclePrice": "Oracle price"
         },
         "reserveStatusTab": {
-            "title": "Reserve status"
+            "title": "Reserve status",
+            "fullTitle": "Reserve status & configuration"
         },
         "yourWalletTab": {
             "title": "Your wallet",

From 704e86c23be26af4d26401eb6a8b34f51018f48a Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Tue, 20 Aug 2024 15:54:28 -0300
Subject: [PATCH 047/116] Dashboard pool data integration (#15) (#22)

* dashboard tables

* emode usd and borrowing powers

* fix asset details

* pr comments

* unit fixes
---
 apps/frontend/package.json                    |   3 +
 .../AssetAmountPriceRenderer.tsx              |  19 +-
 .../StatisticsCard/StatisticsCard.tsx         |   4 +-
 .../src/app/5_pages/AavePage/AavePage.tsx     |  84 ++++++-
 .../BorrowAssetsList.constants.tsx            |  23 +-
 .../BorrowAssetsList/BorrowAssetsList.tsx     |  34 ++-
 .../BorrowAssetsList.types.tsx                |   8 +-
 .../BorrowAssetDetails/BorrowAssetDetails.tsx |  21 +-
 .../BorrowPositionsList.constants.tsx         |  10 +-
 .../BorrowPositionsList.tsx                   |  58 +++--
 .../BorrowPositionsList.types.tsx             |  10 +-
 .../BorrowPositionDetails.tsx                 |   7 +-
 .../EfficiencyModeCard/EfficiencyModeCard.tsx |   6 +-
 .../LendAssetsList.constants.tsx              |   5 +-
 .../LendAssetsList/LendAssetsList.tsx         |  32 +--
 .../LendAssetsList/LendAssetsList.types.tsx   |   5 +-
 .../components/AssetBalance/AssetBalance.tsx  |  24 ++
 .../LendAssetDetails/LendAssetDetails.tsx     |   9 +-
 .../LendPositionsList.constants.tsx           |   5 +-
 .../LendPositionsList/LendPositionsList.tsx   |  49 ++--
 .../LendPositionsList.types.tsx               |   7 +-
 .../LendPositionDetails.tsx                   |   3 +-
 .../AavePage/components/TopPanel/TopPanel.tsx |  32 ++-
 .../components/BorrowAction/BorrowAction.tsx  |   2 +
 .../components/SupplyAction/SupplyAction.tsx  |   3 +-
 apps/frontend/src/constants/aave.ts           |  12 +
 .../src/hooks/useAaveReservesData.tsx         |  68 +++++
 .../src/hooks/useAaveUserReservesData.tsx     |  81 ++++++
 .../frontend/src/locales/en/translations.json |   3 +-
 apps/frontend/src/utils/aave.ts               | 238 ++++++++++++++++++
 .../src/utils/graphql/bob/generated.tsx       |   1 -
 .../src/utils/graphql/mynt/generated.tsx      |   1 -
 .../src/utils/graphql/rsk/generated.tsx       |   1 -
 .../src/utils/graphql/zero/generated.tsx      |   1 -
 yarn.lock                                     |  28 ++-
 35 files changed, 714 insertions(+), 183 deletions(-)
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/AssetBalance/AssetBalance.tsx
 create mode 100644 apps/frontend/src/constants/aave.ts
 create mode 100644 apps/frontend/src/hooks/useAaveReservesData.tsx
 create mode 100644 apps/frontend/src/hooks/useAaveUserReservesData.tsx
 create mode 100644 apps/frontend/src/utils/aave.ts

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 59e331b0a..2d4ad9970 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -4,6 +4,8 @@
   "homepage": ".",
   "private": true,
   "dependencies": {
+    "@aave/contract-helpers": "^1.29.1",
+    "@aave/math-utils": "^1.29.1",
     "@apollo/client": "3.7.1",
     "@apollo/react-hooks": "4.0.0",
     "@loadable/component": "5.15.2",
@@ -55,6 +57,7 @@
     "react-slider": "2.0.6",
     "react-timer-hook": "3.0.7",
     "reactjs-localstorage": "1.0.1",
+    "reflect-metadata": "^0.2.2",
     "remark-gfm": "3.0.1",
     "rxjs": "7.5.6",
     "sanitize-html": "2.11.0",
diff --git a/apps/frontend/src/app/2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx b/apps/frontend/src/app/2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx
index 201798a8c..e77f89d7e 100644
--- a/apps/frontend/src/app/2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx
+++ b/apps/frontend/src/app/2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx
@@ -7,29 +7,34 @@ import { Decimalish } from '@sovryn/utils';
 import { AmountRenderer } from '../AmountRenderer/AmountRenderer';
 
 type AssetAmountPriceRendererProps = {
-  value: Decimalish;
   asset: string;
+  value: Decimalish;
+  valueUSD: Decimalish;
   className?: string;
   valueClassName?: string;
   priceClassName?: string;
 };
 
 export const AssetAmountPriceRenderer: FC<AssetAmountPriceRendererProps> = ({
-  value,
   asset,
+  value,
+  valueUSD,
   className,
   valueClassName,
   priceClassName,
 }) => {
-  // TODO: get price in usd
-  const usdPrice = value;
-
   return (
     <div className={className ?? 'flex flex-col text-right space-y-1'}>
-      <AmountRenderer value={value} suffix={asset} className={valueClassName} />
       <AmountRenderer
-        value={usdPrice}
+        value={value}
+        suffix={asset}
+        className={valueClassName}
+        precision={2}
+      />
+      <AmountRenderer
+        value={valueUSD}
         prefix={'$'}
+        precision={2}
         className={classNames(
           'text-gray-40 text-xs font-medium',
           priceClassName,
diff --git a/apps/frontend/src/app/2_molecules/StatisticsCard/StatisticsCard.tsx b/apps/frontend/src/app/2_molecules/StatisticsCard/StatisticsCard.tsx
index 7fecbbc2d..b778da977 100644
--- a/apps/frontend/src/app/2_molecules/StatisticsCard/StatisticsCard.tsx
+++ b/apps/frontend/src/app/2_molecules/StatisticsCard/StatisticsCard.tsx
@@ -1,13 +1,11 @@
 import React, { FC } from 'react';
 
 import classNames from 'classnames';
-import { t } from 'i18next';
 import { ReactElement } from 'react-markdown/lib/react-markdown';
 
 import { HelperButton, Icon } from '@sovryn/ui';
 
 import { LinkIcon } from '../../1_atoms/Icons/Icons';
-import { translations } from '../../../locales/i18n';
 
 type StatisticsCardProps = {
   label: string;
@@ -43,7 +41,7 @@ export const StatisticsCard: FC<StatisticsCardProps> = ({
             )}
           </>
         ) : (
-          <span>{t(translations.common.na)}</span>
+          <span>---</span>
         )}
       </div>
     </div>
diff --git a/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx b/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
index baa74f0bb..14e11c8a9 100644
--- a/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useMemo, useState } from 'react';
 
 import classNames from 'classnames';
 import { t } from 'i18next';
@@ -12,6 +12,13 @@ import { BorrowPositionsList } from './components/BorrowPositionsList/BorrowPosi
 import { LendAssetsList } from './components/LendAssetsList/LendAssetsList';
 import { LendPositionsList } from './components/LendPositionsList/LendPositionsList';
 import { TopPanel } from './components/TopPanel/TopPanel';
+import { useAaveUserReservesData } from '../../../hooks/useAaveUserReservesData';
+import { LendPosition } from './components/LendPositionsList/LendPositionsList.types';
+import { BorrowPosition } from './components/BorrowPositionsList/BorrowPositionsList.types';
+import { useAaveReservesData } from '../../../hooks/useAaveReservesData';
+import { Decimal } from '@sovryn/utils';
+import { BorrowPoolDetails } from './components/BorrowAssetsList/BorrowAssetsList.types';
+import { LendPoolDetails } from './components/LendAssetsList/LendAssetsList.types';
 
 const pageTranslations = translations.aavePage;
 
@@ -21,15 +28,69 @@ enum ActiveTab {
 }
 
 const AavePage: FC = () => {
+  const { reserves } = useAaveReservesData();
+  const { userReservesSummary } = useAaveUserReservesData();
   const [activeTab, setActiveTab] = useState<ActiveTab>(ActiveTab.LEND);
 
+  const lendPositions: LendPosition[] = useMemo(() => {
+    if (!userReservesSummary) return [];
+    return userReservesSummary.suppliedAssets.map(s => ({
+      asset: s.asset,
+      apy: s.apy,
+      supplied: s.supplied,
+      suppliedUSD: s.suppliedUSD,
+      collateral: s.isCollateral,
+    }));
+  }, [userReservesSummary]);
+
+  const borrowPositions: BorrowPosition[] = useMemo(() => {
+    if (!userReservesSummary) return [];
+    return userReservesSummary.borrowedAssets.map(ba => ({
+      asset: ba.asset,
+      apy: ba.apy,
+      borrowed: ba.borrowed,
+      borrowedUSD: ba.borrowedUSD,
+      apyType: ba.apyType,
+    }));
+  }, [userReservesSummary]);
+
+  const borrowPools: BorrowPoolDetails[] = useMemo(() => {
+    if (!userReservesSummary) {
+      return reserves.map(r => ({
+        asset: r.symbol,
+        apy: Decimal.from(r.variableBorrowAPY).mul(100),
+      }));
+    } else {
+      return reserves.map(r => ({
+        asset: r.symbol,
+        apy: Decimal.from(r.variableBorrowAPY).mul(100),
+        available: userReservesSummary.borrowPower.div(r.priceInUSD),
+        availableUSD: userReservesSummary.borrowPower,
+      }));
+    }
+  }, [reserves, userReservesSummary]);
+
+  const lendPools: LendPoolDetails[] = useMemo(
+    () =>
+      reserves.map(r => ({
+        asset: r.symbol,
+        apy: Decimal.from(r.supplyAPY).mul(100),
+        canBeCollateral: r.usageAsCollateralEnabled,
+      })),
+    [reserves],
+  );
+
   return (
     <div className="w-full pb-6 2xl:px-12">
       <Helmet>
         <title>{t(pageTranslations.meta.title)}</title>
       </Helmet>
 
-      <TopPanel />
+      <TopPanel
+        healthFactor={userReservesSummary?.healthFactor}
+        netApy={userReservesSummary?.netApy}
+        netWorth={userReservesSummary?.netWorth}
+      />
 
       <div className="pt-6 mt-6 space-y-6 lg:pt-0 lg:mt-0 lg:space-y-0">
         {/* Tab selector */}
@@ -61,8 +122,13 @@ const AavePage: FC = () => {
               'lg:block space-y-4',
             )}
           >
-            <LendPositionsList />
-            <LendAssetsList />
+            <LendPositionsList
+              lendPositions={lendPositions}
+              supplyBalance={userReservesSummary?.supplyBalance}
+              collateralBalance={userReservesSummary?.collateralBalance}
+              supplyWeightedApy={userReservesSummary?.supplyWeightedApy}
+            />
+            <LendAssetsList lendPools={lendPools} />
           </div>
 
           {/* Borrowing column */}
@@ -72,8 +138,14 @@ const AavePage: FC = () => {
               'lg:block space-y-4',
             )}
           >
-            <BorrowPositionsList />
-            <BorrowAssetsList />
+            <BorrowPositionsList
+              eModeEnabled={userReservesSummary?.eModeEnabled ?? false}
+              borrowPositions={borrowPositions}
+              borrowBalance={userReservesSummary?.borrowBalance}
+              borrowPowerUsed={userReservesSummary?.borrowPowerUsed}
+              borrowWeightedApy={userReservesSummary?.borrowWeightedApy}
+            />
+            <BorrowAssetsList borrowPools={borrowPools} />
           </div>
         </div>
       </div>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
index c8de37d5f..52d165e1f 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
@@ -5,11 +5,11 @@ import { t } from 'i18next';
 import { Align, HelperButton } from '@sovryn/ui';
 
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
-import { AssetAmountPriceRenderer } from '../../../../2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer';
 import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
 import { translations } from '../../../../../locales/i18n';
 import { BorrowPoolDetails } from './BorrowAssetsList.types';
 import { BorrowAssetAction } from './components/BorrowAssetAction/BorrowAssetAction';
+import { AssetAmountPriceRenderer } from '../../../../2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer';
 
 const pageTranslations = translations.aavePage;
 
@@ -44,15 +44,20 @@ export const COLUMNS_CONFIG = [
         />
       </span>
     ),
-    cellRenderer: (position: BorrowPoolDetails) => (
-      <AssetAmountPriceRenderer
-        value={position.available}
-        asset={position.asset}
-      />
-    ),
+    cellRenderer: (position: BorrowPoolDetails) =>
+      position.available !== undefined &&
+      position.availableUSD !== undefined ? (
+        <AssetAmountPriceRenderer
+          value={position.available}
+          valueUSD={position.availableUSD}
+          asset={position.asset}
+        />
+      ) : (
+        <span>-</span>
+      ),
   },
   {
-    id: 'apr',
+    id: 'apy',
     sortable: true,
     align: Align.center,
     className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
@@ -63,7 +68,7 @@ export const COLUMNS_CONFIG = [
       </span>
     ),
     cellRenderer: (pool: BorrowPoolDetails) => (
-      <AmountRenderer value={pool.apr} suffix={'%'} />
+      <AmountRenderer value={pool.apy} suffix={'%'} precision={2} />
     ),
   },
   {
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
index 76a2c27f1..105731d30 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
@@ -12,34 +12,30 @@ import { BorrowAssetDetails } from './components/BorrowAssetDetails/BorrowAssetD
 
 const pageTranslations = translations.aavePage.borrowAssetsList;
 
-type BorrowAssetsListProps = {};
+type BorrowAssetsListProps = {
+  borrowPools: BorrowPoolDetails[];
+};
 
-export const BorrowAssetsList: FC<BorrowAssetsListProps> = () => {
+export const BorrowAssetsList: FC<BorrowAssetsListProps> = ({
+  borrowPools,
+}) => {
   const [open, setOpen] = useState<boolean>(true);
   const [orderOptions, setOrderOptions] = useState<OrderOptions>();
 
   const rowTitleRenderer = useCallback(
-    r => <AaveRowTitle asset={r.asset} value={r.apr} suffix="%" label="APY" />,
+    (r: BorrowPoolDetails) => (
+      <AaveRowTitle
+        asset={r.asset}
+        value={r.apy}
+        suffix="%"
+        label="APY"
+        precision={2}
+      />
+    ),
     [],
   );
   const mobileRenderer = useCallback(p => <BorrowAssetDetails pool={p} />, []);
 
-  // TODO: just a mock for now
-  const borrowPools: BorrowPoolDetails[] = [
-    {
-      asset: 'BTC',
-      apr: 2.01,
-      available: 12.34,
-      availableUsd: 100,
-    },
-    {
-      asset: 'ETH',
-      apr: 2.01,
-      available: 12.34,
-      availableUsd: 100,
-    },
-  ];
-
   return (
     <Accordion
       label={
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.types.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.types.tsx
index ee3e1b4d3..79467e255 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.types.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.types.tsx
@@ -1,6 +1,8 @@
+import { Decimal } from '@sovryn/utils';
+
 export type BorrowPoolDetails = {
   asset: string;
-  apr: number;
-  available: number;
-  availableUsd: number;
+  apy: Decimal;
+  available?: Decimal;
+  availableUSD?: Decimal;
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
index 047e215aa..bb0786511 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
@@ -20,25 +20,30 @@ export const BorrowAssetDetails: FC<BorrowAssetDetailsProps> = ({ pool }) => {
   return (
     <div className="space-y-3">
       <div>
-        {/* APR */}
+        {/* APY */}
         <SimpleTableRow
           label={
             <span className="text-xs font-medium text-gray-30 items-center flex gap-1">
-              {t(pageTranslations.common.apr)}{' '}
-              <HelperButton content={t(pageTranslations.common.aprInfo)} />
+              {t(pageTranslations.common.apy)}{' '}
+              <HelperButton content={t(pageTranslations.common.apyInfo)} />
             </span>
           }
-          value={<AmountRenderer value={pool.apr} suffix={'%'} />}
+          value={<AmountRenderer value={pool.apy} suffix={'%'} />}
         />
 
         {/* Available */}
         <SimpleTableRow
           label={t(pageTranslations.borrowAssetsList.available)}
           value={
-            <AssetAmountPriceRenderer
-              value={pool.available}
-              asset={pool.asset}
-            />
+            pool.available && pool.availableUSD ? (
+              <AssetAmountPriceRenderer
+                value={pool.available}
+                valueUSD={pool.availableUSD}
+                asset={pool.asset}
+              />
+            ) : (
+              <span>-</span>
+            )
           }
         />
       </div>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
index 23a4cc203..d8c35afce 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
@@ -41,22 +41,22 @@ export const COLUMNS_CONFIG = [
       </span>
     ),
     cellRenderer: (pool: BorrowPosition) => (
-      <AmountRenderer value={pool.balance} suffix={pool.asset} />
+      <AmountRenderer value={pool.borrowed} suffix={pool.asset} />
     ),
   },
   {
-    id: 'apr',
+    id: 'apy',
     sortable: true,
     align: Align.center,
     className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
     title: (
       <span className="flex items-center gap-1 text-gray-30">
-        {t(translations.aavePage.common.apr)}{' '}
-        <HelperButton content={t(pageTranslations.common.aprInfo)} />
+        {t(translations.aavePage.common.apy)}{' '}
+        <HelperButton content={t(pageTranslations.common.apyInfo)} />
       </span>
     ),
     cellRenderer: (position: BorrowPosition) => (
-      <AmountRenderer value={position.apr} suffix={'%'} />
+      <AmountRenderer value={position.apy} suffix={'%'} precision={2} />
     ),
   },
   {
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
index 7e3a7824d..d96d6d40d 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
@@ -3,6 +3,7 @@ import React, { FC, useCallback, useState } from 'react';
 import { t } from 'i18next';
 
 import { Accordion, OrderOptions, Paragraph, Table } from '@sovryn/ui';
+import { Decimal } from '@sovryn/utils';
 
 import { AaveRowTitle } from '../../../../2_molecules/AavePoolRowTitle/AavePoolRowTitle';
 import { useAccount } from '../../../../../hooks/useAccount';
@@ -15,18 +16,34 @@ import { EfficiencyModeCard } from './components/EfficiencyModeCard/EfficiencyMo
 
 const pageTranslations = translations.aavePage;
 
-type BorrowPositionsListProps = {};
+type BorrowPositionsListProps = {
+  borrowPositions: BorrowPosition[];
+  borrowBalance?: Decimal;
+  borrowWeightedApy?: Decimal;
+  borrowPowerUsed?: Decimal;
+  eModeEnabled: boolean;
+};
 
-export const BorrowPositionsList: FC<BorrowPositionsListProps> = () => {
+export const BorrowPositionsList: FC<BorrowPositionsListProps> = ({
+  borrowPositions,
+  borrowBalance,
+  borrowPowerUsed,
+  borrowWeightedApy,
+  eModeEnabled,
+}) => {
   const { account } = useAccount();
   const [open, setOpen] = useState<boolean>(true);
-  const [balance] = useState(123.45); // TODO: mock
-  const [apy] = useState(2.05); // TODO: mock
-  const [borrowPowerUsed] = useState(2.05); // TODO: mock
   const [orderOptions, setOrderOptions] = useState<OrderOptions>();
 
   const rowTitleRenderer = useCallback(
-    r => <AaveRowTitle asset={r.asset} value={r.balance} suffix={r.asset} />,
+    (r: BorrowPosition) => (
+      <AaveRowTitle
+        asset={r.asset}
+        value={r.borrowed}
+        suffix={r.asset}
+        precision={2}
+      />
+    ),
     [],
   );
 
@@ -35,22 +52,6 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = () => {
     [],
   );
 
-  // TODO: mocked values
-  const borrowPositions: BorrowPosition[] = [
-    {
-      asset: 'BTC',
-      apr: 2.24,
-      balance: 12.34,
-      apyType: 'variable',
-    },
-    {
-      asset: 'ETH',
-      apr: 2.33,
-      balance: 12.34,
-      apyType: 'fixed',
-    },
-  ];
-
   return (
     <Accordion
       label={
@@ -58,7 +59,7 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = () => {
           <span>{t(pageTranslations.borrowPositionsList.title)}</span>
           <div className="hidden lg:flex gap-3">
             <span className="text-gray-30 font-medium text-sm">E-Mode</span>
-            <EfficiencyModeCard />
+            <EfficiencyModeCard enabled={eModeEnabled} />
           </div>
         </div>
       }
@@ -69,23 +70,26 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = () => {
     >
       {account ? (
         <>
-          <EfficiencyModeCard className="lg:hidden mb-3" />
+          <EfficiencyModeCard
+            enabled={eModeEnabled}
+            className="lg:hidden mb-3"
+          />
           <div className="flex flex-col gap-2 mb-2 lg:flex-row lg:gap-6 lg:mb-6">
             <PoolPositionStat
               label={t(pageTranslations.common.balance)}
-              value={balance}
+              value={borrowBalance ?? 0}
               prefix="$"
               precision={2}
             />
             <PoolPositionStat
               label={t(pageTranslations.common.apy)}
-              value={apy}
+              value={borrowWeightedApy ?? 0}
               suffix="%"
               precision={2}
             />
             <PoolPositionStat
               label={t(pageTranslations.borrowPositionsList.borrowPowerUsed)}
-              value={borrowPowerUsed}
+              value={borrowPowerUsed ?? 0}
               suffix="%"
               precision={2}
             />
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.types.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.types.tsx
index e56b6b1ea..f7641645b 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.types.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.types.tsx
@@ -1,6 +1,10 @@
+import { Decimal } from '@sovryn/utils';
+import { ApyType } from '../../../../../utils/aave';
+
 export type BorrowPosition = {
   asset: string;
-  balance: number;
-  apr: number;
-  apyType: 'variable' | 'fixed';
+  borrowed: Decimal;
+  borrowedUSD: Decimal;
+  apy: Decimal;
+  apyType: ApyType;
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
index 076979a55..6a2ca15c7 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
@@ -25,8 +25,9 @@ export const BorrowPositionDetails: FC<BorrowPositionDetailsProps> = ({
           label={t(translations.aavePage.common.balance)}
           value={
             <AssetAmountPriceRenderer
-              value={position.balance}
               asset={position.asset}
+              value={position.borrowed}
+              valueUSD={position.borrowedUSD}
             />
           }
         />
@@ -39,7 +40,9 @@ export const BorrowPositionDetails: FC<BorrowPositionDetailsProps> = ({
               <HelperButton content={t(translations.aavePage.common.aprInfo)} />
             </span>
           }
-          value={<AmountRenderer value={position.apr} suffix="%" />}
+          value={
+            <AmountRenderer value={position.apy} suffix="%" precision={2} />
+          }
         />
 
         {/* Apy type */}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx
index 8e12f107e..069106293 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { FC } from 'react';
 
 import classNames from 'classnames';
 import { t } from 'i18next';
@@ -18,13 +18,13 @@ import { translations } from '../../../../../../../locales/i18n';
 
 type EfficiencyModeCardProps = {
   className?: string;
+  enabled: boolean;
 };
 
 export const EfficiencyModeCard: FC<EfficiencyModeCardProps> = ({
   className,
+  enabled,
 }) => {
-  const [enabled] = useState(false);
-
   return (
     <Tooltip
       className={classNames('flex flex-row gap-2 items-center', className)}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
index 75cd765b7..fcf7d7207 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
@@ -9,6 +9,7 @@ import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRender
 import { translations } from '../../../../../locales/i18n';
 import { LendPoolDetails } from './LendAssetsList.types';
 import { LendAssetAction } from './components/LendAssetAction/LendAssetAction';
+import { AssetBalanceRenderer } from './components/AssetBalance/AssetBalance';
 
 const pageTranslations = translations.aavePage;
 
@@ -40,7 +41,7 @@ export const COLUMNS_CONFIG = [
       </span>
     ),
     cellRenderer: (pool: LendPoolDetails) => (
-      <AmountRenderer value={pool.walletBalance} suffix={pool.asset} />
+      <AssetBalanceRenderer asset={pool.asset} />
     ),
   },
   {
@@ -54,7 +55,7 @@ export const COLUMNS_CONFIG = [
       </span>
     ),
     cellRenderer: (pool: LendPoolDetails) => (
-      <AmountRenderer value={pool.apy} suffix={'%'} />
+      <AmountRenderer value={pool.apy} suffix={'%'} precision={2} />
     ),
   },
   {
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
index 4d14b7028..45675f242 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
@@ -12,35 +12,29 @@ import { LendAssetDetails } from './components/LendAssetDetails/LendAssetDetails
 
 const pageTranslations = translations.aavePage;
 
-type LendAssetsListProps = {};
+type LendAssetsListProps = {
+  lendPools: LendPoolDetails[];
+};
 
-export const LendAssetsList: FC<LendAssetsListProps> = () => {
+export const LendAssetsList: FC<LendAssetsListProps> = ({ lendPools }) => {
   const [open, setOpen] = useState<boolean>(true);
   const [showZeroBalances, setShowZeroBalances] = useState<boolean>(true);
   const [orderOptions, setOrderOptions] = useState<OrderOptions>();
 
   const mobileRenderer = useCallback(p => <LendAssetDetails pool={p} />, []);
   const rowTitleRenderer = useCallback(
-    r => <AaveRowTitle asset={r.asset} value={r.apy} suffix="%" label="APY" />,
+    (r: LendPoolDetails) => (
+      <AaveRowTitle
+        asset={r.asset}
+        value={r.apy}
+        suffix="%"
+        label="APY"
+        precision={2}
+      />
+    ),
     [],
   );
 
-  // TODO: mocked values and filter
-  const lendPools: LendPoolDetails[] = [
-    {
-      asset: 'BTC',
-      apy: 2.02,
-      walletBalance: 12.34,
-      canBeCollateral: true,
-    },
-    {
-      asset: 'ETH',
-      apy: 2.02,
-      walletBalance: 12.34,
-      canBeCollateral: false,
-    },
-  ];
-
   return (
     <Accordion
       label={
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.types.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.types.tsx
index ecd5a1814..d5232ddf5 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.types.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.types.tsx
@@ -1,6 +1,7 @@
+import { Decimal } from '@sovryn/utils';
+
 export type LendPoolDetails = {
   asset: string;
-  walletBalance: number;
-  apy: number;
+  apy: Decimal;
   canBeCollateral: boolean;
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/AssetBalance/AssetBalance.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/AssetBalance/AssetBalance.tsx
new file mode 100644
index 000000000..2f8de9374
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/AssetBalance/AssetBalance.tsx
@@ -0,0 +1,24 @@
+import React, { FC } from 'react';
+import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
+import { useAssetBalance } from '../../../../../../../hooks/useAssetBalance';
+import { useAccount } from '../../../../../../../hooks/useAccount';
+
+export type AssetBalanceRendererProps = {
+  asset: string;
+};
+
+export const AssetBalanceRenderer: FC<AssetBalanceRendererProps> = ({
+  asset,
+}) => {
+  const balance = useAssetBalance(asset);
+  const { account } = useAccount();
+
+  return account ? (
+    <AmountRenderer
+      value={balance.balance}
+      precision={balance.decimalPrecision}
+    />
+  ) : (
+    <span>-</span>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
index f02aea902..7a83ea87b 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
@@ -6,10 +6,10 @@ import { t } from 'i18next';
 import { HelperButton, Icon, IconNames, SimpleTableRow } from '@sovryn/ui';
 
 import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
-import { AssetAmountPriceRenderer } from '../../../../../../2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer';
 import { translations } from '../../../../../../../locales/i18n';
 import { LendPoolDetails } from '../../LendAssetsList.types';
 import { LendAssetAction } from '../LendAssetAction/LendAssetAction';
+import { AssetBalanceRenderer } from '../AssetBalance/AssetBalance';
 
 type LendAssetDetailsProps = {
   pool: LendPoolDetails;
@@ -22,12 +22,7 @@ export const LendAssetDetails: FC<LendAssetDetailsProps> = ({ pool }) => {
         {/* Available */}
         <SimpleTableRow
           label={t(translations.aavePage.lendAssetsList.walletBalance)}
-          value={
-            <AssetAmountPriceRenderer
-              value={pool.walletBalance}
-              asset={pool.asset}
-            />
-          }
+          value={<AssetBalanceRenderer asset={pool.asset} />}
         />
 
         {/* APY */}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
index 5f875685a..76c7c9f28 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
@@ -42,7 +42,8 @@ export const COLUMNS_CONFIG = [
     ),
     cellRenderer: (position: LendPosition) => (
       <AssetAmountPriceRenderer
-        value={position.balance}
+        value={position.supplied}
+        valueUSD={position.suppliedUSD}
         asset={position.asset}
       />
     ),
@@ -59,7 +60,7 @@ export const COLUMNS_CONFIG = [
       </span>
     ),
     cellRenderer: (position: LendPosition) => (
-      <AmountRenderer value={position.balance} suffix={position.asset} />
+      <AmountRenderer value={position.apy} suffix={'%'} precision={2} />
     ),
   },
   {
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
index a0ab8d43f..058392cf5 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
@@ -9,6 +9,7 @@ import {
   Paragraph,
   Table,
 } from '@sovryn/ui';
+import { Decimal } from '@sovryn/utils';
 
 import { AaveRowTitle } from '../../../../2_molecules/AavePoolRowTitle/AavePoolRowTitle';
 import { useAccount } from '../../../../../hooks/useAccount';
@@ -20,21 +21,35 @@ import { LendPositionDetails } from './components/LendPositionDetails/LendPositi
 
 const pageTranslations = translations.aavePage;
 
-type LendPositionsListProps = {};
+type LendPositionsListProps = {
+  supplyBalance?: Decimal;
+  supplyWeightedApy?: Decimal;
+  collateralBalance?: Decimal;
+  lendPositions: LendPosition[];
+};
 
-export const LendPositionsList: FC<LendPositionsListProps> = () => {
+export const LendPositionsList: FC<LendPositionsListProps> = ({
+  supplyBalance,
+  supplyWeightedApy,
+  collateralBalance,
+  lendPositions,
+}) => {
   const { account } = useAccount();
   const [open, setOpen] = useState<boolean>(true);
-  const [balance] = useState(100); // TODO: mocked data
-  const [apy] = useState(2.3); // TODO: mocked data
-  const [collateral] = useState(3); // TODO: mocked data
   const [orderOptions, setOrderOptions] = useState<OrderOptions>({
     orderBy: 'balance',
     orderDirection: OrderDirection.Asc,
   });
 
   const rowTitleRenderer = useCallback(
-    r => <AaveRowTitle asset={r.asset} value={r.balance} suffix={r.asset} />,
+    (r: LendPosition) => (
+      <AaveRowTitle
+        asset={r.asset}
+        value={r.supplied}
+        suffix={r.asset}
+        precision={2}
+      />
+    ),
     [],
   );
   const mobileRenderer = useCallback(
@@ -42,22 +57,6 @@ export const LendPositionsList: FC<LendPositionsListProps> = () => {
     [],
   );
 
-  // TODO: mocked data
-  const lendPositions: LendPosition[] = [
-    {
-      asset: 'BTC',
-      apy: 2.01,
-      balance: 12.34,
-      collateral: true,
-    },
-    {
-      asset: 'ETH',
-      apy: 2.04,
-      balance: 1.34,
-      collateral: false,
-    },
-  ];
-
   return (
     <Accordion
       label={
@@ -75,20 +74,20 @@ export const LendPositionsList: FC<LendPositionsListProps> = () => {
           <div className="flex flex-col gap-2 mb-2 lg:flex-row lg:gap-6 lg:mb-6">
             <PoolPositionStat
               label={t(pageTranslations.common.balance)}
-              value={balance}
+              value={supplyBalance ?? 0}
               prefix="$"
               precision={2}
             />
             <PoolPositionStat
               label={t(pageTranslations.common.apy)}
               labelInfo={t(pageTranslations.common.apyInfo)}
-              value={apy}
+              value={supplyWeightedApy ?? 0}
               suffix="%"
               precision={2}
             />
             <PoolPositionStat
               label={t(pageTranslations.common.collateral)}
-              value={collateral}
+              value={collateralBalance ?? 0}
               prefix="$"
               precision={2}
             />
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.types.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.types.tsx
index 9a43a4bfb..c3f52e519 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.types.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.types.tsx
@@ -1,6 +1,9 @@
+import { Decimal } from '@sovryn/utils';
+
 export type LendPosition = {
   asset: string;
-  balance: number;
-  apy: number;
+  supplied: Decimal;
+  suppliedUSD: Decimal;
+  apy: Decimal;
   collateral: boolean;
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
index d1bcd4c36..6a076ca75 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
@@ -26,7 +26,8 @@ export const LendPositionDetails: FC<LendPositionDetailsProps> = ({
           label={t(translations.aavePage.common.balance)}
           value={
             <AssetAmountPriceRenderer
-              value={position.balance}
+              value={position.supplied}
+              valueUSD={position.suppliedUSD}
               asset={position.asset}
             />
           }
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx b/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
index e8846454d..fe1f5172a 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { FC } from 'react';
 
 import { t } from 'i18next';
 
@@ -8,16 +8,22 @@ import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRen
 import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
 import { useAccount } from '../../../../../hooks/useAccount';
 import { translations } from '../../../../../locales/i18n';
+import { Decimalish } from '@sovryn/utils';
 
 const pageTranslations = translations.aavePage.topPanel;
 
-type TopPanelProps = {};
+type TopPanelProps = {
+  netWorth?: Decimalish;
+  netApy?: Decimalish;
+  healthFactor?: Decimalish;
+};
 
-export const TopPanel: FC<TopPanelProps> = () => {
+export const TopPanel: FC<TopPanelProps> = ({
+  netApy,
+  netWorth,
+  healthFactor,
+}) => {
   const { account } = useAccount();
-  const [netWorth] = useState(1234567.58); // TODO: mock
-  const [netApy] = useState(2.69); // TODO: mock
-  const [collateralRatio] = useState(11); // TODO: mock
 
   return (
     <div className="w-full flex flex-col gap-6">
@@ -35,9 +41,10 @@ export const TopPanel: FC<TopPanelProps> = () => {
           <StatisticsCard
             label={t(pageTranslations.netWorth)}
             value={
-              account ? (
+              account && netWorth ? (
                 <AmountRenderer
                   prefix="$"
+                  precision={2}
                   value={netWorth}
                   className="text-2xl"
                 />
@@ -48,10 +55,11 @@ export const TopPanel: FC<TopPanelProps> = () => {
             <StatisticsCard
               label={t(pageTranslations.netApy)}
               value={
-                account ? (
+                account && netApy ? (
                   <AmountRenderer
                     suffix="%"
                     value={netApy}
+                    precision={2}
                     className="text-2xl"
                   />
                 ) : undefined
@@ -59,17 +67,17 @@ export const TopPanel: FC<TopPanelProps> = () => {
               help={t(pageTranslations.netApyInfo)}
             />
             <StatisticsCard
-              label={t(pageTranslations.collateralRatio)}
+              label={t(pageTranslations.healthFactor)}
               value={
-                account ? (
+                account && healthFactor ? (
                   <AmountRenderer
                     suffix="%"
-                    value={collateralRatio}
+                    precision={2}
+                    value={healthFactor}
                     className="text-2xl"
                   />
                 ) : undefined
               }
-              help={t(pageTranslations.collateralRatioInfo)}
             />
           </div>
         </div>
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx
index a177cf25a..950795d40 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx
@@ -16,6 +16,7 @@ type BorrowActionProps = {
 
 export const BorrowAction: FC<BorrowActionProps> = ({ asset }) => {
   const availableToBorrow = 0; // TODO: this is mocked
+  const availableToBorrowUsd = 0;
 
   const isBorrowDisabled = useMemo(() => {
     // TODO: add conditions
@@ -36,6 +37,7 @@ export const BorrowAction: FC<BorrowActionProps> = ({ asset }) => {
         </Paragraph>
         <AssetAmountPriceRenderer
           value={availableToBorrow}
+          valueUSD={availableToBorrowUsd}
           asset={asset}
           className="text-left flex flex-col"
           valueClassName="font-medium"
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx
index 18e05b312..bc2575d5e 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx
@@ -16,6 +16,7 @@ type SupplyActionProps = {
 
 export const SupplyAction: FC<SupplyActionProps> = ({ asset }) => {
   const availableToSupply = 0; // TODO: this is mocked.
+  const availableToSupplyUSD = 0; // TODO: this is mocked.
 
   const isSupplyDisabled = useMemo(() => {
     // TODO: add conditions
@@ -36,8 +37,8 @@ export const SupplyAction: FC<SupplyActionProps> = ({ asset }) => {
         </Paragraph>
         <AssetAmountPriceRenderer
           value={availableToSupply}
+          valueUSD={availableToSupplyUSD}
           asset={asset}
-          //   className="text-left flex flex-col"
           valueClassName="font-medium"
         />
       </div>
diff --git a/apps/frontend/src/constants/aave.ts b/apps/frontend/src/constants/aave.ts
new file mode 100644
index 000000000..0724422f6
--- /dev/null
+++ b/apps/frontend/src/constants/aave.ts
@@ -0,0 +1,12 @@
+import { ethers } from 'ethers';
+
+export const config = {
+  chainId: 137,
+  UiPoolDataProviderV3Address: '0x5598BbFA2f4fE8151f45bBA0a3edE1b54B51a0a9',
+  PoolAddressesProviderAddress: '0xa97684ead0e402dC232d5A977953DF7ECBaB3CDb',
+  assetsWhitelist: ['DAI', 'USDC', 'USDT', 'BTC', 'WETH', 'EURS', 'WMATIC'],
+  // TODO: temporary
+  provider: new ethers.providers.JsonRpcProvider(
+    'https://polygon-bor-rpc.publicnode.com',
+  ),
+};
diff --git a/apps/frontend/src/hooks/useAaveReservesData.tsx b/apps/frontend/src/hooks/useAaveReservesData.tsx
new file mode 100644
index 000000000..201d160df
--- /dev/null
+++ b/apps/frontend/src/hooks/useAaveReservesData.tsx
@@ -0,0 +1,68 @@
+import {
+  ReserveDataHumanized,
+  ReservesDataHumanized,
+  UiPoolDataProvider,
+} from '@aave/contract-helpers';
+import { formatReserves, FormatReserveUSDResponse } from '@aave/math-utils';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import dayjs from 'dayjs';
+
+import { config } from '../constants/aave';
+
+export type Reserve = ReserveDataHumanized & FormatReserveUSDResponse;
+
+export const useAaveReservesData = () => {
+  const provider = config.provider; // TODO: replace with useAccount
+  const [reserves, setReserves] = useState<Reserve[]>([]);
+  const [reservesData, setReservesData] =
+    useState<ReservesDataHumanized | null>(null);
+
+  const uiPoolDataProvider = useMemo(
+    () =>
+      provider
+        ? new UiPoolDataProvider({
+            provider,
+            uiPoolDataProviderAddress: config.UiPoolDataProviderV3Address,
+            chainId: config.chainId,
+          })
+        : null,
+    [provider],
+  );
+
+  const fetchReservesData = useCallback(
+    async (uiPoolDataProvider: UiPoolDataProvider) => {
+      const currentTimestamp = dayjs().unix();
+      const reservesData = await uiPoolDataProvider.getReservesHumanized({
+        lendingPoolAddressProvider: config.PoolAddressesProviderAddress,
+      });
+      const reserves = reservesData.reservesData.filter(r =>
+        config.assetsWhitelist.includes(r.symbol),
+      );
+      const formattedReserves = formatReserves({
+        reserves,
+        currentTimestamp,
+        marketReferenceCurrencyDecimals:
+          reservesData.baseCurrencyData.marketReferenceCurrencyDecimals,
+        marketReferencePriceInUsd:
+          reservesData.baseCurrencyData.marketReferenceCurrencyPriceInUsd,
+      });
+
+      setReserves(formattedReserves);
+      setReservesData({
+        baseCurrencyData: reservesData.baseCurrencyData,
+        reservesData: reserves,
+      });
+    },
+    [],
+  );
+
+  useEffect(() => {
+    if (uiPoolDataProvider) {
+      fetchReservesData(uiPoolDataProvider);
+    }
+  }, [uiPoolDataProvider, fetchReservesData]);
+
+  return { reserves, reservesData };
+};
diff --git a/apps/frontend/src/hooks/useAaveUserReservesData.tsx b/apps/frontend/src/hooks/useAaveUserReservesData.tsx
new file mode 100644
index 000000000..3903ee413
--- /dev/null
+++ b/apps/frontend/src/hooks/useAaveUserReservesData.tsx
@@ -0,0 +1,81 @@
+import {
+  ReservesDataHumanized,
+  UiPoolDataProvider,
+} from '@aave/contract-helpers';
+import { formatUserSummary } from '@aave/math-utils';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import dayjs from 'dayjs';
+import { ethers } from 'ethers';
+
+import { config } from '../constants/aave';
+import { AaveUserReservesSummary } from '../utils/aave';
+import { Reserve, useAaveReservesData } from './useAaveReservesData';
+import { useAccount } from './useAccount';
+
+export const useAaveUserReservesData = () => {
+  const provider = config.provider;
+  const { reserves, reservesData } = useAaveReservesData();
+  const { signer } = useAccount();
+  const [userReservesSummary, setUserReservesSummary] =
+    useState<AaveUserReservesSummary | null>(null);
+
+  const uiPoolDataProvider = useMemo(
+    () =>
+      provider
+        ? new UiPoolDataProvider({
+            provider,
+            uiPoolDataProviderAddress: config.UiPoolDataProviderV3Address,
+            chainId: config.chainId,
+          })
+        : null,
+    [provider],
+  );
+
+  const fetchPoolData = useCallback(
+    async (
+      uiPoolDataProvider: UiPoolDataProvider,
+      reserves: Reserve[],
+      reservesData: ReservesDataHumanized,
+      signer: ethers.Signer,
+    ) => {
+      const userReservesData =
+        await uiPoolDataProvider.getUserReservesHumanized({
+          lendingPoolAddressProvider: config.PoolAddressesProviderAddress,
+          user: await signer.getAddress(),
+        });
+
+      setUserReservesSummary(
+        AaveUserReservesSummary.from(
+          formatUserSummary({
+            currentTimestamp: dayjs().unix(),
+            userReserves: userReservesData.userReserves,
+            userEmodeCategoryId: userReservesData.userEmodeCategoryId,
+            formattedReserves: reserves,
+            marketReferenceCurrencyDecimals:
+              reservesData.baseCurrencyData.marketReferenceCurrencyDecimals,
+            marketReferencePriceInUsd:
+              reservesData.baseCurrencyData.marketReferenceCurrencyPriceInUsd,
+          }),
+        ),
+      );
+    },
+    [],
+  );
+
+  useEffect(() => {
+    if (
+      !uiPoolDataProvider ||
+      reserves.length === 0 ||
+      !signer ||
+      !reservesData
+    ) {
+      return;
+    }
+
+    fetchPoolData(uiPoolDataProvider, reserves, reservesData, signer);
+  }, [uiPoolDataProvider, reserves, signer, reservesData, fetchPoolData]);
+
+  return { userReservesSummary };
+};
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index 46893d98f..c4771acd9 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -815,8 +815,7 @@
             "netWorth": "Net worth",
             "netApy": "Net API",
             "netApyInfo": "Net APY is the combined effect of all supply and borrow positions on net worth, including incentives. It is possible to have a negative net APY if debt APY is higher than supply APY.",
-            "collateralRatio": "Collateral ratio",
-            "collateralRatioInfo": "The collateral ratio defines the maximum amount of assets that can be borrowed with a specific collatera",
+            "healthFactor": "Health factor",
             "viewTransactions": "View transactions"
         },
         "borrowPositionsList": {
diff --git a/apps/frontend/src/utils/aave.ts b/apps/frontend/src/utils/aave.ts
new file mode 100644
index 000000000..baa58ec92
--- /dev/null
+++ b/apps/frontend/src/utils/aave.ts
@@ -0,0 +1,238 @@
+import { ReserveDataHumanized } from '@aave/contract-helpers';
+import {
+  FormatReserveUSDResponse,
+  FormatUserSummaryResponse,
+} from '@aave/math-utils';
+import { Decimal } from '@sovryn/utils';
+type UserSummary = FormatUserSummaryResponse<
+  ReserveDataHumanized & FormatReserveUSDResponse
+>;
+
+export enum ApyType {
+  VARIABLE = 'variable',
+  STABLE = 'stable',
+}
+
+export type SuppliedAsset = {
+  asset: string;
+  assetAddress: string;
+  apy: Decimal;
+  isCollateral: boolean;
+  supplied: Decimal;
+  suppliedUSD: Decimal;
+};
+
+export type BorrowedAsset = {
+  asset: string;
+  assetAddress: string;
+  apy: Decimal;
+  apyType: ApyType;
+  borrowed: Decimal;
+  borrowedUSD: Decimal;
+};
+
+export class AaveUserReservesSummary {
+  public netWorth: Decimal;
+  public netApy: Decimal;
+  public healthFactor: Decimal;
+  public supplyBalance: Decimal; // OK
+  public supplyWeightedApy: Decimal;
+  public collateralBalance: Decimal;
+  public borrowBalance: Decimal;
+  public borrowWeightedApy: Decimal;
+  public borrowPower: Decimal;
+  public borrowPowerUsed: Decimal;
+  public suppliedAssets: SuppliedAsset[];
+  public borrowedAssets: BorrowedAsset[];
+  public eModeEnabled: boolean;
+
+  constructor(private readonly userSummary: UserSummary) {
+    // balances
+    this.netWorth = Decimal.from(this.userSummary.netWorthUSD);
+    this.borrowBalance = Decimal.from(this.userSummary.totalBorrowsUSD);
+    this.supplyBalance = this.computeSuppliedBalance(
+      this.userSummary.userReservesData,
+    );
+    this.collateralBalance = this.computeCollateral(
+      this.userSummary.userReservesData,
+    );
+
+    // apy
+    this.supplyWeightedApy = this.computeWeightedSupplyApy(
+      this.userSummary.userReservesData,
+    );
+    this.borrowWeightedApy = this.computeWeightedBorrowApy(
+      this.userSummary.userReservesData,
+    );
+    this.netApy = this.computeNetApy(
+      this.supplyWeightedApy,
+      this.supplyBalance,
+      this.borrowWeightedApy,
+      this.borrowBalance,
+      this.netWorth,
+    );
+
+    // health and borrow status
+    this.borrowPower = this.computeBorrowPower(
+      Decimal.from(this.userSummary.availableBorrowsUSD),
+      this.borrowBalance,
+    );
+    this.borrowPowerUsed = this.computeBorrowPowerUsed(
+      this.borrowBalance,
+      this.borrowPower,
+    );
+    this.healthFactor = this.computeHealthFactor(
+      this.collateralBalance,
+      Decimal.from(this.userSummary.currentLiquidationThreshold),
+      this.borrowBalance,
+    );
+
+    // supplied and borrowed assets
+    this.suppliedAssets = this.computeSuppliedAssets(
+      this.userSummary.userReservesData,
+    );
+    this.borrowedAssets = this.computeBorrowedAssets(
+      this.userSummary.userReservesData,
+    );
+
+    // emode
+    this.eModeEnabled = this.userSummary.userEmodeCategoryId !== 0;
+  }
+
+  static from(
+    userSummary: FormatUserSummaryResponse<
+      ReserveDataHumanized & FormatReserveUSDResponse
+    >,
+  ) {
+    return new AaveUserReservesSummary(userSummary);
+  }
+
+  private computeNetApy(
+    weightedSupplyApy: Decimal,
+    suppliedBalance: Decimal,
+    weightedBorrowApy: Decimal,
+    borrowedBalance: Decimal,
+    netWorthUsd: Decimal,
+  ): Decimal {
+    return weightedSupplyApy
+      .mul(suppliedBalance)
+      .div(netWorthUsd)
+      .sub(weightedBorrowApy.mul(borrowedBalance).div(netWorthUsd));
+  }
+
+  private computeSuppliedBalance(
+    reserves: UserSummary['userReservesData'],
+  ): Decimal {
+    return reserves.reduce(
+      (suppliedBalance, r) => suppliedBalance.add(r.underlyingBalanceUSD),
+      Decimal.from(0),
+    );
+  }
+
+  private computeBorrowPower(
+    availableBorrowsUSD: Decimal,
+    borrowedBalance: Decimal,
+  ) {
+    return Decimal.from(availableBorrowsUSD).add(borrowedBalance);
+  }
+
+  private computeBorrowPowerUsed(
+    borrowedBalance: Decimal,
+    borrowPower: Decimal,
+  ) {
+    if (borrowPower.eq(0)) return Decimal.from(0);
+    return Decimal.from(borrowedBalance).div(borrowPower).mul(100);
+  }
+
+  private computeCollateral(
+    reserves: UserSummary['userReservesData'],
+  ): Decimal {
+    return reserves.reduce(
+      (collateral, r) =>
+        collateral.add(
+          r.usageAsCollateralEnabledOnUser ? r.underlyingBalanceUSD : 0,
+        ),
+      Decimal.from(0),
+    );
+  }
+
+  private computeHealthFactor(
+    collateral: Decimal,
+    currentLiquidationThreshold: Decimal,
+    borrowedBalance: Decimal,
+  ): Decimal {
+    if (borrowedBalance.eq(0)) return Decimal.from(0);
+    return collateral.mul(currentLiquidationThreshold).div(borrowedBalance);
+  }
+
+  private computeWeightedBorrowApy(
+    reserves: UserSummary['userReservesData'],
+  ): Decimal {
+    let totalBorrowedUSD = Decimal.from(0);
+    let weightedBorrowAPYSum = Decimal.from(0);
+
+    reserves.forEach(reserve => {
+      const borrowedAmountUSD = Decimal.from(reserve.totalBorrowsUSD);
+      const borrowAPY = Decimal.from(reserve.reserve.variableBorrowAPY);
+
+      weightedBorrowAPYSum = weightedBorrowAPYSum.add(
+        borrowAPY.mul(borrowedAmountUSD),
+      );
+      totalBorrowedUSD = totalBorrowedUSD.add(borrowedAmountUSD);
+    });
+
+    if (totalBorrowedUSD.eq(0)) return Decimal.from(0);
+    return weightedBorrowAPYSum.div(totalBorrowedUSD).mul(100);
+  }
+
+  private computeWeightedSupplyApy(
+    reserves: UserSummary['userReservesData'],
+  ): Decimal {
+    let totalBorrowedUSD = Decimal.from(0);
+    let weightedBorrowAPYSum = Decimal.from(0);
+
+    reserves.forEach(reserve => {
+      const borrowedAmountUSD = Decimal.from(reserve.totalBorrowsUSD);
+      const borrowAPY = Decimal.from(reserve.reserve.supplyAPY);
+
+      weightedBorrowAPYSum = weightedBorrowAPYSum.add(
+        borrowAPY.mul(borrowedAmountUSD),
+      );
+      totalBorrowedUSD = totalBorrowedUSD.add(borrowedAmountUSD);
+    });
+
+    if (totalBorrowedUSD.eq(0)) return Decimal.from(0);
+    return weightedBorrowAPYSum.div(totalBorrowedUSD).mul(100);
+  }
+
+  private computeSuppliedAssets(
+    reserves: UserSummary['userReservesData'],
+  ): SuppliedAsset[] {
+    return reserves
+      .filter(r => Decimal.from(r.underlyingBalanceUSD).gt(0))
+      .map(r => ({
+        asset: r.reserve.symbol,
+        assetAddress: r.underlyingAsset,
+        apy: Decimal.from(r.reserve.supplyAPY).mul(100),
+        isCollateral: r.usageAsCollateralEnabledOnUser,
+        supplied: Decimal.from(r.underlyingBalance),
+        suppliedUSD: Decimal.from(r.underlyingBalanceUSD),
+      }));
+  }
+
+  private computeBorrowedAssets(
+    reserves: UserSummary['userReservesData'],
+  ): BorrowedAsset[] {
+    return reserves
+      .filter(r => Decimal.from(r.totalBorrowsUSD).gt(0))
+      .map(r => ({
+        asset: r.reserve.symbol,
+        assetAddress: r.underlyingAsset,
+        borrowed: Decimal.from(r.totalBorrows),
+        borrowedUSD: Decimal.from(r.totalBorrowsUSD),
+        apy: Decimal.from(r.reserve.variableBorrowAPY).mul(100),
+        apyType:
+          Number(r.variableBorrows) > 0 ? ApyType.VARIABLE : ApyType.STABLE,
+      }));
+  }
+}
diff --git a/apps/frontend/src/utils/graphql/bob/generated.tsx b/apps/frontend/src/utils/graphql/bob/generated.tsx
index fb4b63963..eddd99bd3 100644
--- a/apps/frontend/src/utils/graphql/bob/generated.tsx
+++ b/apps/frontend/src/utils/graphql/bob/generated.tsx
@@ -1,6 +1,5 @@
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
-
 export type Maybe<T> = T | null;
 export type InputMaybe<T> = Maybe<T>;
 export type Exact<T extends { [key: string]: unknown }> = {
diff --git a/apps/frontend/src/utils/graphql/mynt/generated.tsx b/apps/frontend/src/utils/graphql/mynt/generated.tsx
index 5af92ca2e..d4dca3b2b 100644
--- a/apps/frontend/src/utils/graphql/mynt/generated.tsx
+++ b/apps/frontend/src/utils/graphql/mynt/generated.tsx
@@ -1,6 +1,5 @@
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
-
 export type Maybe<T> = T | null;
 export type InputMaybe<T> = Maybe<T>;
 export type Exact<T extends { [key: string]: unknown }> = {
diff --git a/apps/frontend/src/utils/graphql/rsk/generated.tsx b/apps/frontend/src/utils/graphql/rsk/generated.tsx
index 1679b3971..28ef61297 100644
--- a/apps/frontend/src/utils/graphql/rsk/generated.tsx
+++ b/apps/frontend/src/utils/graphql/rsk/generated.tsx
@@ -1,6 +1,5 @@
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
-
 export type Maybe<T> = T | null;
 export type InputMaybe<T> = Maybe<T>;
 export type Exact<T extends { [key: string]: unknown }> = {
diff --git a/apps/frontend/src/utils/graphql/zero/generated.tsx b/apps/frontend/src/utils/graphql/zero/generated.tsx
index 7a8931e37..158c284f6 100644
--- a/apps/frontend/src/utils/graphql/zero/generated.tsx
+++ b/apps/frontend/src/utils/graphql/zero/generated.tsx
@@ -1,6 +1,5 @@
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
-
 export type Maybe<T> = T | null;
 export type InputMaybe<T> = Maybe<T>;
 export type Exact<T extends { [key: string]: unknown }> = {
diff --git a/yarn.lock b/yarn.lock
index 20c556a0d..8be9694db 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7,6 +7,18 @@
   resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf"
   integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
 
+"@aave/contract-helpers@^1.29.1":
+  version "1.29.1"
+  resolved "https://registry.yarnpkg.com/@aave/contract-helpers/-/contract-helpers-1.29.1.tgz#34beab8afa35bbfc6168c78ced8317d96a493fe0"
+  integrity sha512-34z5CKpNdEx26G+DSezovdR3PyAf0v0Typbf2udaKG4GrOBgqbKqxr4zqS/dpFO5aAQJJ+nuEM19lKRK4sMcpg==
+  dependencies:
+    isomorphic-unfetch "^3.1.0"
+
+"@aave/math-utils@^1.29.1":
+  version "1.29.1"
+  resolved "https://registry.yarnpkg.com/@aave/math-utils/-/math-utils-1.29.1.tgz#fcb9499bd472bde7b80429c7dbe63d4358852697"
+  integrity sha512-a+L2+vjza/nH4BxUTzwDcoJH/Qr6UP+g+9YSwG7YKUgoVfdy8gJs5VyXjfDDEVe9lMeZuPJq7CqrgV4P2M6Nkg==
+
 "@actions/core@^1.10.0":
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/@actions/core/-/core-1.10.0.tgz#44551c3c71163949a2f06e94d9ca2157a0cfac4f"
@@ -21035,6 +21047,11 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+reflect-metadata@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.2.2.tgz#400c845b6cba87a21f2c65c4aeb158f4fa4d9c5b"
+  integrity sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==
+
 refractor@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.6.0.tgz#ac318f5a0715ead790fcfb0c71f4dd83d977935a"
@@ -21600,14 +21617,7 @@ run-queue@^1.0.0, run-queue@^1.0.3:
   dependencies:
     aproba "^1.1.1"
 
-rxjs@6:
-  version "6.6.7"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
-  integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
-  dependencies:
-    tslib "^1.9.0"
-
-rxjs@7.5.6, rxjs@^7.5.5, rxjs@^7.5.6:
+rxjs@6, rxjs@7.5.6, rxjs@^7.5.5, rxjs@^7.5.6:
   version "7.5.6"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.5.6.tgz#0446577557862afd6903517ce7cae79ecb9662bc"
   integrity sha512-dnyv2/YsXhnm461G+R/Pe5bWP41Nm6LBXEYWI6eiFP4fiwx6WRI/CD0zbdVAudd9xwLEF2IDcKXLHit0FYjUzw==
@@ -23492,7 +23502,7 @@ tsconfig-paths@^3.14.1:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@1.14.1, tslib@^1.13.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
+tslib@1.14.1, tslib@^1.13.0, tslib@^1.8.1, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==

From ce56708203f38cc8a9ebb5ea7e2624d19e19f2fc Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Wed, 21 Aug 2024 10:58:47 -0300
Subject: [PATCH 048/116] Lend integration (#19)

* dashboard tables

* emode usd and borrowing powers

* fix asset details

* wip

* Dashboard pool data integration (#15)

* dashboard tables

* emode usd and borrowing powers

* fix asset details

* pr comments

* unit fixes

* supply wip

* fix asset renderer
add usd amount
cleanups

* fixes

* cleanup
---
 .../AssetAmountInput/AssetAmountInput.tsx     |  19 +-
 .../AssetRenderer/AssetRenderer.tsx           |  10 +-
 .../BorrowPositionsList.types.tsx             |   2 +-
 .../LendAssetAction/LendAssetAction.tsx       |   3 +-
 .../components/LendModal/LendForm.tsx         |  72 ++++--
 .../LendModal/LendModalContainer.tsx          |   4 +-
 .../AavePage/components/TopPanel/TopPanel.tsx |   2 +-
 apps/frontend/src/constants/aave.ts           |   3 +
 apps/frontend/src/hooks/useAaveDeposit.tsx    |  47 ++++
 .../frontend/src/locales/en/translations.json |   4 +
 apps/frontend/src/utils/aave.ts               |   2 +
 .../aave/AaveSupplyTransactionsFactory.ts     | 111 ++++++++
 .../src/utils/aave/AaveUserReservesSummary.ts | 236 ++++++++++++++++++
 .../src/utils/graphql/bob/generated.tsx       |   1 +
 .../src/utils/graphql/mynt/generated.tsx      |   1 +
 .../src/utils/graphql/rsk/generated.tsx       |   1 +
 .../src/utils/graphql/zero/generated.tsx      |   1 +
 17 files changed, 493 insertions(+), 26 deletions(-)
 create mode 100644 apps/frontend/src/hooks/useAaveDeposit.tsx
 create mode 100644 apps/frontend/src/utils/aave/AaveSupplyTransactionsFactory.ts
 create mode 100644 apps/frontend/src/utils/aave/AaveUserReservesSummary.ts

diff --git a/apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx b/apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx
index 0d3abb9a6..97ed14a9a 100644
--- a/apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx
+++ b/apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx
@@ -1,8 +1,10 @@
-import React, { FC, useCallback, useState } from 'react';
+import React, { FC, useCallback } from 'react';
 
 import { AmountInput, Paragraph, Select, SelectOption } from '@sovryn/ui';
 import { Decimal, Decimalish } from '@sovryn/utils';
 
+import { BOB_CHAIN_ID } from '../../../config/chains';
+
 import { AmountRenderer } from '../AmountRenderer/AmountRenderer';
 import { AssetRenderer } from '../AssetRenderer/AssetRenderer';
 import { MaxButton } from '../MaxButton/MaxButton';
@@ -15,6 +17,7 @@ type AssetAmountInputProps = {
   amountValue?: string | number;
   onAmountChange?: (value: string) => unknown;
   assetValue: string;
+  assetUsdValue?: Decimalish;
   assetOptions: SelectOption<string>[];
   onAssetChange: (asset: string) => unknown;
 };
@@ -27,14 +30,18 @@ export const AssetAmountInput: FC<AssetAmountInputProps> = ({
   onAmountChange,
   invalid,
   assetValue,
+  assetUsdValue,
   assetOptions,
   onAssetChange,
 }) => {
-  const [assetUsdValue] = useState(0); // TODO: mock
-
   const assetOptionRenderer = useCallback(
     ({ value }) => (
-      <AssetRenderer dataAttribute="asset-amount" showAssetLogo asset={value} />
+      <AssetRenderer
+        chainId={BOB_CHAIN_ID}
+        dataAttribute="asset-amount"
+        showAssetLogo
+        asset={value}
+      />
     ),
     [],
   );
@@ -72,7 +79,8 @@ export const AssetAmountInput: FC<AssetAmountInputProps> = ({
             />
             <AmountRenderer
               className="text-gray-40 mr-4"
-              value={assetUsdValue}
+              value={assetUsdValue ?? 0}
+              precision={2}
               prefix="$"
             />
           </div>
@@ -84,7 +92,6 @@ export const AssetAmountInput: FC<AssetAmountInputProps> = ({
             labelRenderer={assetOptionRenderer}
             className="min-w-[6.7rem]"
             menuClassName="max-h-[10rem] sm:max-h-[20rem]"
-            dataAttribute="asset-select"
           />
         </div>
       </div>
diff --git a/apps/frontend/src/app/2_molecules/AssetRenderer/AssetRenderer.tsx b/apps/frontend/src/app/2_molecules/AssetRenderer/AssetRenderer.tsx
index 6f686d83c..15a681d87 100644
--- a/apps/frontend/src/app/2_molecules/AssetRenderer/AssetRenderer.tsx
+++ b/apps/frontend/src/app/2_molecules/AssetRenderer/AssetRenderer.tsx
@@ -70,7 +70,10 @@ export const AssetRenderer: FC<AssetRendererProps> = ({
           setLogo(item.icon);
           setToken(item.symbol);
         })
-        .catch(() => setLogo(''));
+        .catch(() => {
+          setToken(asset);
+          setLogo('');
+        });
     }
   }, [address, asset, chainId, showAssetLogo]);
 
@@ -81,7 +84,10 @@ export const AssetRenderer: FC<AssetRendererProps> = ({
           setLogo(item.icon);
           setToken(item.symbol);
         })
-        .catch(() => setLogo(''));
+        .catch(() => {
+          setToken(asset);
+          setLogo('');
+        });
     }
   }, [address, asset, chainId, showAssetLogo]);
 
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.types.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.types.tsx
index f7641645b..2c9d3d773 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.types.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.types.tsx
@@ -1,5 +1,5 @@
 import { Decimal } from '@sovryn/utils';
-import { ApyType } from '../../../../../utils/aave';
+import { ApyType } from '../../../../../utils/aave/AaveUserReservesSummary';
 
 export type BorrowPosition = {
   asset: string;
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
index 2aa07f6b1..6f4d5cbd7 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
@@ -13,7 +13,7 @@ type LendAssetActionProps = {
   pool: LendPoolDetails;
 };
 
-export const LendAssetAction: FC<LendAssetActionProps> = () => {
+export const LendAssetAction: FC<LendAssetActionProps> = ({ pool }) => {
   const navigate = useNavigate();
   const [isLendModalOpen, setIsLendModalOpen] = useState<boolean>(false);
 
@@ -41,6 +41,7 @@ export const LendAssetAction: FC<LendAssetActionProps> = () => {
       />
 
       <LendModalContainer
+        asset={pool.asset}
         handleCloseModal={handleLendClose}
         isOpen={isLendModalOpen}
       />
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx
index 34fef11c9..5d8ad0c89 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx
@@ -2,6 +2,7 @@ import React, { FC, useMemo, useState } from 'react';
 
 import { t } from 'i18next';
 
+import { getAssetData } from '@sovryn/contracts';
 import {
   Button,
   ErrorBadge,
@@ -11,43 +12,65 @@ import {
 } from '@sovryn/ui';
 import { Decimal } from '@sovryn/utils';
 
+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 { useAaveDeposit } from '../../../../../../../hooks/useAaveDeposit';
+import { useAaveReservesData } from '../../../../../../../hooks/useAaveReservesData';
+import { useAccount } from '../../../../../../../hooks/useAccount';
+import { useAssetBalance } from '../../../../../../../hooks/useAssetBalance';
 import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
 import { translations } from '../../../../../../../locales/i18n';
 
 const pageTranslations = translations.aavePage;
 
 type LendFormProps = {
+  asset: string;
   onSuccess: () => unknown;
 };
 
-export const LendForm: FC<LendFormProps> = () => {
-  const lendApy = 4.01; // TODO: this is mocked data. Replace with proper hook
-  const lendAssets = useMemo(() => ['BTC', 'SOV'], []); // TODO: this is mocked data. Replace with proper hook
-  const [maximumLendAmount] = useState<Decimal>(Decimal.from(10)); // TODO: this is mocked data. Replace with proper hook
-  const [lendAsset, setLendAsset] = useState<string>(lendAssets[0]);
+export const LendForm: FC<LendFormProps> = ({
+  asset: initialAsset,
+  onSuccess,
+}) => {
+  const { account } = useAccount();
+  const { reserves } = useAaveReservesData();
+  const [lendAsset, setLendAsset] = useState<string>(initialAsset);
   const [lendAmount, setLendAmount, lendSize] = useDecimalAmountInput('');
+  const { balance: lendAssetBalance } = useAssetBalance(
+    lendAsset,
+    BOB_CHAIN_ID,
+    account,
+  );
+  const { handleDeposit } = useAaveDeposit(
+    () => null,
+    () => null,
+  );
+
+  const reserve = useMemo(() => {
+    return reserves.find(r => r.symbol === lendAsset) ?? reserves[0];
+  }, [reserves, lendAsset]);
 
   const lendAssetsOptions = useMemo(
     () =>
-      lendAssets.map(token => ({
-        value: token,
+      reserves.map(r => ({
+        value: r.symbol,
         label: (
           <AssetRenderer
             showAssetLogo
-            asset={token}
+            asset={r.symbol}
             assetClassName="font-medium"
           />
         ),
       })),
-    [lendAssets],
+    [reserves],
   );
 
   const isValidLendAmount = useMemo(
-    () => (lendSize.gt(0) ? lendSize.lte(maximumLendAmount) : true),
-    [lendSize, maximumLendAmount],
+    () => (lendSize.gt(0) ? lendSize.lte(lendAssetBalance) : true),
+    [lendSize, lendAssetBalance],
   );
 
   const submitButtonDisabled = useMemo(
@@ -55,17 +78,22 @@ export const LendForm: FC<LendFormProps> = () => {
     [isValidLendAmount, lendSize],
   );
 
+  const assetUsdValue: Decimal = useMemo(() => {
+    return Decimal.from(reserve?.priceInUSD ?? 0).mul(lendSize);
+  }, [reserve, lendSize]);
+
   return (
     <form className="flex flex-col gap-6">
       <div>
         <AssetAmountInput
           label={t(translations.aavePage.common.lend)}
-          maxAmount={maximumLendAmount}
+          maxAmount={lendAssetBalance}
           amountLabel={t(translations.common.amount)}
           amountValue={lendAmount}
           onAmountChange={setLendAmount}
           invalid={!isValidLendAmount}
           assetValue={lendAsset}
+          assetUsdValue={assetUsdValue}
           onAssetChange={setLendAsset}
           assetOptions={lendAssetsOptions}
         />
@@ -82,16 +110,32 @@ export const LendForm: FC<LendFormProps> = () => {
       <SimpleTable>
         <SimpleTableRow
           label={t(translations.aavePage.lendModal.lendApy)}
-          value={<AmountRenderer value={lendApy} suffix={'%'} />}
+          value={
+            <AmountRenderer
+              value={Decimal.from(reserve?.supplyAPY ?? 0).mul(100)}
+              suffix={'%'}
+              precision={2}
+            />
+          }
         />
         <SimpleTableRow
           label={t(translations.aavePage.lendModal.collateralization)}
-          value={t(translations.aavePage.lendModal.enabled)}
+          value={t(
+            translations.aavePage.lendModal[
+              reserve?.usageAsCollateralEnabled ? 'enabled' : 'disabled'
+            ],
+          )}
         />
       </SimpleTable>
 
       <Button
         disabled={submitButtonDisabled}
+        onClick={async () =>
+          handleDeposit(
+            lendSize,
+            await getAssetData(reserve.symbol, BOB_CHAIN_ID),
+          )
+        }
         text={t(translations.aavePage.lendModal.deposit)}
       />
     </form>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendModalContainer.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendModalContainer.tsx
index d165676d6..3fe1c2e0c 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendModalContainer.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendModalContainer.tsx
@@ -8,11 +8,13 @@ import { translations } from '../../../../../../../locales/i18n';
 import { LendForm } from './LendForm';
 
 type LendModalContainerProps = {
+  asset: string;
   isOpen: boolean;
   handleCloseModal: () => unknown;
 };
 
 export const LendModalContainer: FC<LendModalContainerProps> = ({
+  asset,
   isOpen,
   handleCloseModal,
 }) => {
@@ -23,7 +25,7 @@ export const LendModalContainer: FC<LendModalContainerProps> = ({
         onClose={handleCloseModal}
       />
       <DialogBody className="flex flex-col gap-6">
-        <LendForm onSuccess={handleCloseModal} />
+        <LendForm onSuccess={handleCloseModal} asset={asset} />
       </DialogBody>
     </Dialog>
   );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx b/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
index fe1f5172a..1dacbc811 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
@@ -3,12 +3,12 @@ import React, { FC } from 'react';
 import { t } from 'i18next';
 
 import { Heading, Paragraph, ParagraphSize } from '@sovryn/ui';
+import { Decimalish } from '@sovryn/utils';
 
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
 import { useAccount } from '../../../../../hooks/useAccount';
 import { translations } from '../../../../../locales/i18n';
-import { Decimalish } from '@sovryn/utils';
 
 const pageTranslations = translations.aavePage.topPanel;
 
diff --git a/apps/frontend/src/constants/aave.ts b/apps/frontend/src/constants/aave.ts
index 0724422f6..a2b98da4e 100644
--- a/apps/frontend/src/constants/aave.ts
+++ b/apps/frontend/src/constants/aave.ts
@@ -2,6 +2,9 @@ import { ethers } from 'ethers';
 
 export const config = {
   chainId: 137,
+  PoolAddress: '0x794a61358D6845594F94dc1DB02A252b5b4814aD',
+  WETHGatewayAddress: '0xC1E320966c485ebF2A0A2A6d3c0Dc860A156eB1B',
+  VariableDebtWETHAddress: '0x4a1c3aD6Ed28a636ee1751C69071f6be75DEb8B8',
   UiPoolDataProviderV3Address: '0x5598BbFA2f4fE8151f45bBA0a3edE1b54B51a0a9',
   PoolAddressesProviderAddress: '0xa97684ead0e402dC232d5A977953DF7ECBaB3CDb',
   assetsWhitelist: ['DAI', 'USDC', 'USDT', 'BTC', 'WETH', 'EURS', 'WMATIC'],
diff --git a/apps/frontend/src/hooks/useAaveDeposit.tsx b/apps/frontend/src/hooks/useAaveDeposit.tsx
new file mode 100644
index 000000000..de85cc68a
--- /dev/null
+++ b/apps/frontend/src/hooks/useAaveDeposit.tsx
@@ -0,0 +1,47 @@
+import { useCallback, useMemo } from 'react';
+
+import { BigNumber } from 'ethers';
+import { t } from 'i18next';
+
+import { AssetDetailsData } from '@sovryn/contracts';
+import { Decimal } from '@sovryn/utils';
+
+import { config } from '../constants/aave';
+import { useTransactionContext } from '../contexts/TransactionContext';
+import { translations } from '../locales/i18n';
+import { AaveSupplyTransactionsFactory } from '../utils/aave/AaveSupplyTransactionsFactory';
+import { useAccount } from './useAccount';
+
+export const useAaveDeposit = (onBegin: () => void, onComplete: () => void) => {
+  const { signer } = useAccount();
+  const { setTransactions, setIsOpen, setTitle } = useTransactionContext();
+
+  const aaveSupplyTransactionsFactory = useMemo(() => {
+    if (!signer) return null;
+    return new AaveSupplyTransactionsFactory(
+      config.PoolAddress,
+      config.WETHGatewayAddress,
+      signer,
+    );
+  }, [signer]);
+
+  const handleDeposit = useCallback(
+    async (amount: Decimal, asset: AssetDetailsData) => {
+      if (!aaveSupplyTransactionsFactory) {
+        return;
+      }
+      const bnAmount = BigNumber.from(
+        amount.mul(Decimal.from(10).pow(asset.decimals)).toString(),
+      );
+
+      setTransactions(
+        await aaveSupplyTransactionsFactory.supply(asset, bnAmount),
+      );
+      setTitle(t(translations.common.deposit));
+      setIsOpen(true);
+    },
+    [setIsOpen, setTitle, setTransactions, aaveSupplyTransactionsFactory],
+  );
+
+  return { handleDeposit };
+};
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index c4771acd9..f93c59967 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -809,6 +809,10 @@
             "fixed": "Fixed",
             "withdraw": "Withdraw"
         },
+        "tx": {
+            "supplyTitle": "Deposit {{symbol}} to the pool",
+            "supplySubtitle": "Transfers {{amount}} {{symbol}} to the stability pool"
+        },
         "topPanel": {
             "title": "Lend and borrow",
             "subtitle": "Borrow and earn interest by providing liquidity",
diff --git a/apps/frontend/src/utils/aave.ts b/apps/frontend/src/utils/aave.ts
index baa58ec92..626b04592 100644
--- a/apps/frontend/src/utils/aave.ts
+++ b/apps/frontend/src/utils/aave.ts
@@ -3,7 +3,9 @@ import {
   FormatReserveUSDResponse,
   FormatUserSummaryResponse,
 } from '@aave/math-utils';
+
 import { Decimal } from '@sovryn/utils';
+
 type UserSummary = FormatUserSummaryResponse<
   ReserveDataHumanized & FormatReserveUSDResponse
 >;
diff --git a/apps/frontend/src/utils/aave/AaveSupplyTransactionsFactory.ts b/apps/frontend/src/utils/aave/AaveSupplyTransactionsFactory.ts
new file mode 100644
index 000000000..ea883163b
--- /dev/null
+++ b/apps/frontend/src/utils/aave/AaveSupplyTransactionsFactory.ts
@@ -0,0 +1,111 @@
+import { BigNumber, constants, Contract, ethers } from 'ethers';
+import { t } from 'i18next';
+
+import { AssetDetailsData, getAssetDataByAddress } from '@sovryn/contracts';
+
+import { BOB_CHAIN_ID } from '../../config/chains';
+
+import {
+  Transaction,
+  TransactionType,
+} from '../../app/3_organisms/TransactionStepDialog/TransactionStepDialog.types';
+import { translations } from '../../locales/i18n';
+import { prepareApproveTransaction } from '../transactions';
+
+export class AaveSupplyTransactionsFactory {
+  private readonly Pool: ethers.Contract;
+  private readonly WETHGateway: ethers.Contract;
+
+  constructor(
+    private readonly PoolAddress: string,
+    private readonly WETHGatewayAddress: string,
+    private readonly signer: ethers.Signer,
+  ) {
+    this.Pool = new ethers.Contract(
+      this.PoolAddress,
+      [
+        'function supply(address asset, uint256 amount, address onBehalfOf, uint16 referralCode)',
+      ],
+      this.signer,
+    );
+
+    this.WETHGateway = new ethers.Contract(
+      this.WETHGatewayAddress,
+      [
+        'function depositETH(address pool, address onBehalfOf, uint16 referralCode) payable',
+      ],
+      this.signer,
+    );
+  }
+
+  async supply(
+    token: AssetDetailsData,
+    amount: BigNumber,
+  ): Promise<Transaction[]> {
+    if (token.isNative) return this.supplyNative(amount);
+    else return this.supplyToken(token, amount);
+  }
+
+  private async supplyToken(
+    asset: AssetDetailsData,
+    amount: BigNumber,
+  ): Promise<Transaction[]> {
+    const approval = await prepareApproveTransaction({
+      spender: this.PoolAddress,
+      token: asset.symbol,
+      contract: new Contract(asset.address, asset.abi, this.signer),
+      amount: amount,
+      chain: BOB_CHAIN_ID,
+    });
+    const transactions: Transaction[] = approval ? [approval] : [];
+
+    transactions.push({
+      title: t(translations.aavePage.tx.supplyTitle, {
+        symbol: asset.symbol,
+      }),
+      subtitle: t(translations.aavePage.tx.supplySubtitle, {
+        symbol: asset.symbol,
+        amount: ethers.utils.formatUnits(amount, asset.decimals),
+      }),
+      request: {
+        type: TransactionType.signTransaction,
+        args: [
+          asset.address,
+          amount.toString(),
+          await this.signer.getAddress(),
+          0,
+        ],
+        contract: this.Pool,
+        fnName: 'supply',
+        value: 0,
+      },
+    });
+
+    return transactions;
+  }
+
+  private async supplyNative(amount: BigNumber): Promise<Transaction[]> {
+    const nativeAsset = await getAssetDataByAddress(
+      constants.AddressZero,
+      BOB_CHAIN_ID,
+    );
+
+    return [
+      {
+        title: t(translations.aavePage.tx.supplyTitle, {
+          symbol: nativeAsset.symbol,
+        }),
+        subtitle: t(translations.aavePage.tx.supplySubtitle, {
+          symbol: nativeAsset.symbol,
+        }),
+        request: {
+          type: TransactionType.signTransaction,
+          args: [this.PoolAddress, await this.signer.getAddress(), 0],
+          contract: this.WETHGateway,
+          fnName: 'depositETH',
+          value: amount.toString(),
+        },
+      },
+    ];
+  }
+}
diff --git a/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts b/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
new file mode 100644
index 000000000..6f1444877
--- /dev/null
+++ b/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
@@ -0,0 +1,236 @@
+import { ReserveDataHumanized } from '@aave/contract-helpers';
+import {
+  FormatReserveUSDResponse,
+  FormatUserSummaryResponse,
+} from '@aave/math-utils';
+
+import { Decimal } from '@sovryn/utils';
+
+type UserSummary = FormatUserSummaryResponse<
+  ReserveDataHumanized & FormatReserveUSDResponse
+>;
+
+export enum ApyType {
+  VARIABLE = 'variable',
+  STABLE = 'stable',
+}
+
+export type SuppliedAsset = {
+  asset: string;
+  assetAddress: string;
+  apy: Decimal;
+  isCollateral: boolean;
+  supplied: Decimal;
+  suppliedUSD: Decimal;
+};
+
+export type BorrowedAsset = {
+  asset: string;
+  assetAddress: string;
+  apy: Decimal;
+  apyType: ApyType;
+  borrowed: Decimal;
+  borrowedUSD: Decimal;
+};
+
+export class AaveUserReservesSummary {
+  public netWorth: Decimal;
+  public netApy: Decimal;
+  public healthFactor: Decimal;
+  public supplyBalance: Decimal;
+  public supplyWeightedApy: Decimal;
+  public collateralBalance: Decimal;
+  public borrowBalance: Decimal;
+  public borrowWeightedApy: Decimal;
+  public borrowPower: Decimal;
+  public borrowPowerUsed: Decimal;
+  public suppliedAssets: SuppliedAsset[];
+  public borrowedAssets: BorrowedAsset[];
+  public eModeEnabled: boolean;
+
+  constructor(private readonly userSummary: UserSummary) {
+    // balances
+    this.netWorth = Decimal.from(this.userSummary.netWorthUSD);
+    this.borrowBalance = Decimal.from(this.userSummary.totalBorrowsUSD);
+    this.supplyBalance = this.computeSuppliedBalance(
+      this.userSummary.userReservesData,
+    );
+    this.collateralBalance = this.computeCollateral(
+      this.userSummary.userReservesData,
+    );
+
+    // apy
+    this.supplyWeightedApy = this.computeWeightedSupplyApy(
+      this.userSummary.userReservesData,
+    );
+    this.borrowWeightedApy = this.computeWeightedBorrowApy(
+      this.userSummary.userReservesData,
+    );
+    this.netApy = this.computeNetApy(
+      this.supplyWeightedApy,
+      this.supplyBalance,
+      this.borrowWeightedApy,
+      this.borrowBalance,
+      this.netWorth,
+    );
+
+    // health and borrow status
+    this.borrowPower = this.computeBorrowPower(
+      Decimal.from(this.userSummary.availableBorrowsUSD),
+      this.borrowBalance,
+    );
+    this.borrowPowerUsed = this.computeBorrowPowerUsed(
+      this.borrowBalance,
+      this.borrowPower,
+    );
+    this.healthFactor = this.computeHealthFactor(
+      this.collateralBalance,
+      Decimal.from(this.userSummary.currentLiquidationThreshold),
+      this.borrowBalance,
+    );
+
+    // supplied and borrowed assets
+    this.suppliedAssets = this.computeSuppliedAssets(
+      this.userSummary.userReservesData,
+    );
+    this.borrowedAssets = this.computeBorrowedAssets(
+      this.userSummary.userReservesData,
+    );
+
+    // emode
+    this.eModeEnabled = this.userSummary.userEmodeCategoryId !== 0;
+  }
+
+  static from(
+    userSummary: FormatUserSummaryResponse<
+      ReserveDataHumanized & FormatReserveUSDResponse
+    >,
+  ) {
+    return new AaveUserReservesSummary(userSummary);
+  }
+
+  private computeNetApy(
+    weightedSupplyApy: Decimal,
+    suppliedBalance: Decimal,
+    weightedBorrowApy: Decimal,
+    borrowedBalance: Decimal,
+    netWorthUsd: Decimal,
+  ): Decimal {
+    return weightedSupplyApy
+      .mul(suppliedBalance)
+      .div(netWorthUsd)
+      .sub(weightedBorrowApy.mul(borrowedBalance).div(netWorthUsd));
+  }
+
+  private computeSuppliedBalance(
+    reserves: UserSummary['userReservesData'],
+  ): Decimal {
+    return reserves.reduce(
+      (suppliedBalance, r) => suppliedBalance.add(r.underlyingBalanceUSD),
+      Decimal.from(0),
+    );
+  }
+
+  private computeBorrowPower(
+    availableBorrowsUSD: Decimal,
+    borrowedBalance: Decimal,
+  ) {
+    return Decimal.from(availableBorrowsUSD).add(borrowedBalance);
+  }
+
+  private computeBorrowPowerUsed(
+    borrowedBalance: Decimal,
+    borrowPower: Decimal,
+  ) {
+    return Decimal.from(borrowedBalance).div(borrowPower).mul(100);
+  }
+
+  private computeCollateral(
+    reserves: UserSummary['userReservesData'],
+  ): Decimal {
+    return reserves.reduce(
+      (collateral, r) =>
+        collateral.add(
+          r.usageAsCollateralEnabledOnUser ? r.underlyingBalanceUSD : 0,
+        ),
+      Decimal.from(0),
+    );
+  }
+
+  private computeHealthFactor(
+    collateral: Decimal,
+    currentLiquidationThreshold: Decimal,
+    borrowedBalance: Decimal,
+  ): Decimal {
+    return collateral.mul(currentLiquidationThreshold).div(borrowedBalance);
+  }
+
+  private computeWeightedBorrowApy(
+    reserves: UserSummary['userReservesData'],
+  ): Decimal {
+    let totalBorrowedUSD = Decimal.from(0);
+    let weightedBorrowAPYSum = Decimal.from(0);
+
+    reserves.forEach(reserve => {
+      const borrowedAmountUSD = Decimal.from(reserve.totalBorrowsUSD);
+      const borrowAPY = Decimal.from(reserve.reserve.variableBorrowAPY);
+
+      weightedBorrowAPYSum = weightedBorrowAPYSum.add(
+        borrowAPY.mul(borrowedAmountUSD),
+      );
+      totalBorrowedUSD = totalBorrowedUSD.add(borrowedAmountUSD);
+    });
+
+    return weightedBorrowAPYSum.div(totalBorrowedUSD).mul(100);
+  }
+
+  private computeWeightedSupplyApy(
+    reserves: UserSummary['userReservesData'],
+  ): Decimal {
+    let totalBorrowedUSD = Decimal.from(0);
+    let weightedBorrowAPYSum = Decimal.from(0);
+
+    reserves.forEach(reserve => {
+      const borrowedAmountUSD = Decimal.from(reserve.totalBorrowsUSD);
+      const borrowAPY = Decimal.from(reserve.reserve.supplyAPY);
+
+      weightedBorrowAPYSum = weightedBorrowAPYSum.add(
+        borrowAPY.mul(borrowedAmountUSD),
+      );
+      totalBorrowedUSD = totalBorrowedUSD.add(borrowedAmountUSD);
+    });
+
+    return weightedBorrowAPYSum.div(totalBorrowedUSD).mul(100);
+  }
+
+  private computeSuppliedAssets(
+    reserves: UserSummary['userReservesData'],
+  ): SuppliedAsset[] {
+    return reserves
+      .filter(r => Decimal.from(r.underlyingBalanceUSD).gt(0))
+      .map(r => ({
+        asset: r.reserve.symbol,
+        assetAddress: r.underlyingAsset,
+        apy: Decimal.from(r.reserve.supplyAPY).mul(100),
+        isCollateral: r.usageAsCollateralEnabledOnUser,
+        supplied: Decimal.from(r.underlyingBalance),
+        suppliedUSD: Decimal.from(r.underlyingBalanceUSD),
+      }));
+  }
+
+  private computeBorrowedAssets(
+    reserves: UserSummary['userReservesData'],
+  ): BorrowedAsset[] {
+    return reserves
+      .filter(r => Decimal.from(r.totalBorrowsUSD).gt(0))
+      .map(r => ({
+        asset: r.reserve.symbol,
+        assetAddress: r.underlyingAsset,
+        borrowed: Decimal.from(r.totalBorrows),
+        borrowedUSD: Decimal.from(r.totalBorrowsUSD),
+        apy: Decimal.from(r.reserve.variableBorrowAPY).mul(100),
+        apyType:
+          Number(r.variableBorrows) > 0 ? ApyType.VARIABLE : ApyType.STABLE,
+      }));
+  }
+}
diff --git a/apps/frontend/src/utils/graphql/bob/generated.tsx b/apps/frontend/src/utils/graphql/bob/generated.tsx
index eddd99bd3..fb4b63963 100644
--- a/apps/frontend/src/utils/graphql/bob/generated.tsx
+++ b/apps/frontend/src/utils/graphql/bob/generated.tsx
@@ -1,5 +1,6 @@
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
+
 export type Maybe<T> = T | null;
 export type InputMaybe<T> = Maybe<T>;
 export type Exact<T extends { [key: string]: unknown }> = {
diff --git a/apps/frontend/src/utils/graphql/mynt/generated.tsx b/apps/frontend/src/utils/graphql/mynt/generated.tsx
index d4dca3b2b..5af92ca2e 100644
--- a/apps/frontend/src/utils/graphql/mynt/generated.tsx
+++ b/apps/frontend/src/utils/graphql/mynt/generated.tsx
@@ -1,5 +1,6 @@
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
+
 export type Maybe<T> = T | null;
 export type InputMaybe<T> = Maybe<T>;
 export type Exact<T extends { [key: string]: unknown }> = {
diff --git a/apps/frontend/src/utils/graphql/rsk/generated.tsx b/apps/frontend/src/utils/graphql/rsk/generated.tsx
index 28ef61297..1679b3971 100644
--- a/apps/frontend/src/utils/graphql/rsk/generated.tsx
+++ b/apps/frontend/src/utils/graphql/rsk/generated.tsx
@@ -1,5 +1,6 @@
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
+
 export type Maybe<T> = T | null;
 export type InputMaybe<T> = Maybe<T>;
 export type Exact<T extends { [key: string]: unknown }> = {
diff --git a/apps/frontend/src/utils/graphql/zero/generated.tsx b/apps/frontend/src/utils/graphql/zero/generated.tsx
index 158c284f6..7a8931e37 100644
--- a/apps/frontend/src/utils/graphql/zero/generated.tsx
+++ b/apps/frontend/src/utils/graphql/zero/generated.tsx
@@ -1,5 +1,6 @@
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
+
 export type Maybe<T> = T | null;
 export type InputMaybe<T> = Maybe<T>;
 export type Exact<T extends { [key: string]: unknown }> = {

From 1f2ab87d2386998d76dc92f040afd0db33f1380b Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Thu, 22 Aug 2024 10:48:15 -0300
Subject: [PATCH 049/116] Cache for aave hooks (#23)

* dashboard tables

* emode usd and borrowing powers

* fix asset details

* wip

* Dashboard pool data integration (#15)

* dashboard tables

* emode usd and borrowing powers

* fix asset details

* pr comments

* unit fixes

* supply wip

* fix asset renderer
add usd amount
cleanups

* fixes

* withdraw integration

* cache useAaveReservesData

* cache useUserReserves

* cleanup

* fix imports

* fix
---
 apps/frontend/src/app/1_atoms/Icons/Icons.tsx |   4 +-
 .../src/app/5_pages/AavePage/AavePage.tsx     |  18 +--
 .../components/LendModal/LendForm.tsx         |   6 +-
 .../LendPositionsList.constants.tsx           |   3 +
 .../LendPositionAction/LendPositionAction.tsx |   5 +-
 .../components/WithdrawModal/WithdrawForm.tsx |  81 ++++++++-----
 .../WithdrawModal/WithdrawModalContainer.tsx  |   4 +-
 .../src/hooks/aave/useAaveDeposit.tsx         |  47 ++++++++
 .../hooks/{ => aave}/useAaveReservesData.tsx  |  41 ++++---
 .../hooks/aave/useAaveUserReservesData.tsx    |  78 +++++++++++++
 .../src/hooks/aave/useAaveWithdraw.tsx        |  50 +++++++++
 .../src/hooks/useAaveUserReservesData.tsx     |  81 -------------
 .../frontend/src/locales/en/translations.json |   4 +-
 .../aave/AaveSupplyTransactionsFactory.ts     |   1 +
 .../aave/AaveWithdrawTransactionsFactory.ts   | 106 ++++++++++++++++++
 .../src/contracts/assets/bobTestnet.ts        |  10 +-
 16 files changed, 392 insertions(+), 147 deletions(-)
 create mode 100644 apps/frontend/src/hooks/aave/useAaveDeposit.tsx
 rename apps/frontend/src/hooks/{ => aave}/useAaveReservesData.tsx (62%)
 create mode 100644 apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx
 create mode 100644 apps/frontend/src/hooks/aave/useAaveWithdraw.tsx
 delete mode 100644 apps/frontend/src/hooks/useAaveUserReservesData.tsx
 create mode 100644 apps/frontend/src/utils/aave/AaveWithdrawTransactionsFactory.ts

diff --git a/apps/frontend/src/app/1_atoms/Icons/Icons.tsx b/apps/frontend/src/app/1_atoms/Icons/Icons.tsx
index 06ce2bee9..68874ad6e 100644
--- a/apps/frontend/src/app/1_atoms/Icons/Icons.tsx
+++ b/apps/frontend/src/app/1_atoms/Icons/Icons.tsx
@@ -51,8 +51,8 @@ export const EModeIcon: IconType = (
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M2.7888 9.33172C2.68519 9.33172 2.62925 9.21023 2.69661 9.13151L9.96917 0.632031C10.0511 0.536295 10.2066 0.613419 10.1799 0.736569L8.89071 6.695C8.87435 6.7706 8.93195 6.84199 9.00929 6.84199L13.8677 6.84199C13.9757 6.84199 14.0299 6.97243 13.9537 7.04893L5.54038 15.4971C5.44947 15.5884 5.29773 15.4938 5.3397 15.372L7.36548 9.49257C7.39262 9.41378 7.3341 9.33172 7.25077 9.33172H2.7888Z"
     />
   </svg>
diff --git a/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx b/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
index 14e11c8a9..3b71f0c10 100644
--- a/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
@@ -5,20 +5,20 @@ import { t } from 'i18next';
 import { Helmet } from 'react-helmet-async';
 
 import { Tabs, TabSize, TabType } from '@sovryn/ui';
+import { Decimal } from '@sovryn/utils';
 
+import { useAaveReservesData } from '../../../hooks/aave/useAaveReservesData';
+import { useAaveUserReservesData } from '../../../hooks/aave/useAaveUserReservesData';
 import { translations } from '../../../locales/i18n';
 import { BorrowAssetsList } from './components/BorrowAssetsList/BorrowAssetsList';
+import { BorrowPoolDetails } from './components/BorrowAssetsList/BorrowAssetsList.types';
 import { BorrowPositionsList } from './components/BorrowPositionsList/BorrowPositionsList';
+import { BorrowPosition } from './components/BorrowPositionsList/BorrowPositionsList.types';
 import { LendAssetsList } from './components/LendAssetsList/LendAssetsList';
+import { LendPoolDetails } from './components/LendAssetsList/LendAssetsList.types';
 import { LendPositionsList } from './components/LendPositionsList/LendPositionsList';
-import { TopPanel } from './components/TopPanel/TopPanel';
-import { useAaveUserReservesData } from '../../../hooks/useAaveUserReservesData';
 import { LendPosition } from './components/LendPositionsList/LendPositionsList.types';
-import { BorrowPosition } from './components/BorrowPositionsList/BorrowPositionsList.types';
-import { useAaveReservesData } from '../../../hooks/useAaveReservesData';
-import { Decimal } from '@sovryn/utils';
-import { BorrowPoolDetails } from './components/BorrowAssetsList/BorrowAssetsList.types';
-import { LendPoolDetails } from './components/LendAssetsList/LendAssetsList.types';
+import { TopPanel } from './components/TopPanel/TopPanel';
 
 const pageTranslations = translations.aavePage;
 
@@ -28,8 +28,8 @@ enum ActiveTab {
 }
 
 const AavePage: FC = () => {
-  const { reserves } = useAaveReservesData();
-  const { userReservesSummary } = useAaveUserReservesData();
+  const reserves = useAaveReservesData();
+  const userReservesSummary = useAaveUserReservesData();
   const [activeTab, setActiveTab] = useState<ActiveTab>(ActiveTab.LEND);
 
   const lendPositions: LendPosition[] = useMemo(() => {
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx
index 5d8ad0c89..8da5a811d 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx
@@ -17,8 +17,8 @@ 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 { useAaveDeposit } from '../../../../../../../hooks/useAaveDeposit';
-import { useAaveReservesData } from '../../../../../../../hooks/useAaveReservesData';
+import { useAaveDeposit } from '../../../../../../../hooks/aave/useAaveDeposit';
+import { useAaveReservesData } from '../../../../../../../hooks/aave/useAaveReservesData';
 import { useAccount } from '../../../../../../../hooks/useAccount';
 import { useAssetBalance } from '../../../../../../../hooks/useAssetBalance';
 import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
@@ -36,7 +36,7 @@ export const LendForm: FC<LendFormProps> = ({
   onSuccess,
 }) => {
   const { account } = useAccount();
-  const { reserves } = useAaveReservesData();
+  const reserves = useAaveReservesData();
   const [lendAsset, setLendAsset] = useState<string>(initialAsset);
   const [lendAmount, setLendAmount, lendSize] = useDecimalAmountInput('');
   const { balance: lendAssetBalance } = useAssetBalance(
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
index 76c7c9f28..21d40e005 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
@@ -4,6 +4,8 @@ import { t } from 'i18next';
 
 import { Align, HelperButton } from '@sovryn/ui';
 
+import { BOB_CHAIN_ID } from '../../../../../config/chains';
+
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { AssetAmountPriceRenderer } from '../../../../2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer';
 import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
@@ -27,6 +29,7 @@ export const COLUMNS_CONFIG = [
         dataAttribute="borrow-asset"
         showAssetLogo
         asset={position.asset}
+        chainId={BOB_CHAIN_ID}
         className="lg:justify-start justify-end"
         logoClassName="[&>svg]:h-8 [&>svg]:w-8 [&>svg]:mr-[10px]"
       />
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
index 17c2285c6..4d54d9c65 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
@@ -12,7 +12,9 @@ type LendPositionActionProps = {
   position: LendPosition;
 };
 
-export const LendPositionAction: FC<LendPositionActionProps> = () => {
+export const LendPositionAction: FC<LendPositionActionProps> = ({
+  position,
+}) => {
   const [isWithdrawModalOpen, setIsWithdrawModalOpen] =
     useState<boolean>(false);
 
@@ -34,6 +36,7 @@ export const LendPositionAction: FC<LendPositionActionProps> = () => {
       />
 
       <WithdrawModalContainer
+        asset={position.asset}
         handleCloseModal={handleWithdrawClose}
         isOpen={isWithdrawModalOpen}
       />
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
index e2eea3717..ada6de14a 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
@@ -1,7 +1,8 @@
-import React, { FC, useCallback, useMemo, useState } from 'react';
+import React, { FC, useMemo, useState } from 'react';
 
 import { t } from 'i18next';
 
+import { getAssetData } from '@sovryn/contracts';
 import {
   Button,
   ErrorBadge,
@@ -13,56 +14,75 @@ import {
 } from '@sovryn/ui';
 import { Decimal } from '@sovryn/utils';
 
+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 { useAaveReservesData } from '../../../../../../../hooks/aave/useAaveReservesData';
+import { useAaveUserReservesData } from '../../../../../../../hooks/aave/useAaveUserReservesData';
+import { useAaveWithdraw } from '../../../../../../../hooks/aave/useAaveWithdraw';
 import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
 import { translations } from '../../../../../../../locales/i18n';
 
 const pageTranslations = translations.aavePage;
 
 type WithdrawFormProps = {
+  asset: string;
   onSuccess: () => unknown;
 };
 
-export const WithdrawForm: FC<WithdrawFormProps> = () => {
-  const withdrawableAssets = useMemo(() => ['BTC', 'SOV'], []); // TODO: this is mocked data. Replace with proper hook
-  const [maximumWithdrawAmount] = useState<Decimal>(Decimal.from(10)); // TODO: this is mocked data. Replace with proper hook
-  const [withdrawAsset, setWithdrawAsset] = useState<string>(
-    withdrawableAssets[0],
-  );
+export const WithdrawForm: FC<WithdrawFormProps> = ({ asset }) => {
+  const { handleWithdraw } = useAaveWithdraw({});
+  const reserves = useAaveReservesData();
+  const userReservesSummary = useAaveUserReservesData();
+  const [withdrawAsset, setWithdrawAsset] = useState<string>(asset);
   const [withdrawAmount, setWithdrawAmount, withdrawSize] =
     useDecimalAmountInput('');
 
-  const onWithdrawAssetChange = useCallback(v => {
-    setWithdrawAsset(v);
-  }, []);
-
   const withdrawableAssetsOptions = useMemo(
     () =>
-      withdrawableAssets.map(token => ({
-        value: token,
-        label: (
-          <AssetRenderer
-            showAssetLogo
-            asset={token}
-            assetClassName="font-medium"
-          />
-        ),
-      })),
-    [withdrawableAssets],
+      !userReservesSummary
+        ? []
+        : userReservesSummary.suppliedAssets.map(sa => ({
+            value: sa.asset,
+            label: (
+              <AssetRenderer
+                showAssetLogo
+                asset={sa.asset}
+                assetClassName="font-medium"
+                chainId={BOB_CHAIN_ID}
+              />
+            ),
+          })),
+    [userReservesSummary],
   );
 
-  const isValidWithdrawAmount = useMemo(
-    () => (withdrawSize.gt(0) ? withdrawSize.lte(maximumWithdrawAmount) : true),
-    [withdrawSize, maximumWithdrawAmount],
-  );
+  const maximumWithdrawAmount: Decimal = useMemo(() => {
+    if (!userReservesSummary) return Decimal.from(0);
+    const sa = userReservesSummary.suppliedAssets.find(
+      sa => sa.asset === withdrawAsset,
+    );
+    return sa ? sa.supplied : Decimal.from(0);
+  }, [userReservesSummary, withdrawAsset]);
+
+  const withdrawAmountUsd: Decimal = useMemo(() => {
+    if (!reserves) return Decimal.from(0);
+    const reserve = reserves.find(r => r.symbol === withdrawAsset);
+
+    return reserve ? withdrawSize.mul(reserve.priceInUSD) : Decimal.from(0);
+  }, [withdrawSize, reserves, withdrawAsset]);
 
   const remainingSupply = useMemo(
     () => maximumWithdrawAmount.sub(withdrawSize),
     [withdrawSize, maximumWithdrawAmount],
   );
 
+  const isValidWithdrawAmount = useMemo(
+    () => (withdrawSize.gt(0) ? withdrawSize.lte(maximumWithdrawAmount) : true),
+    [withdrawSize, maximumWithdrawAmount],
+  );
+
   const submitButtonDisabled = useMemo(
     () => !isValidWithdrawAmount || withdrawSize.lte(0),
     [isValidWithdrawAmount, withdrawSize],
@@ -87,11 +107,12 @@ export const WithdrawForm: FC<WithdrawFormProps> = () => {
         <div className="space-y-3">
           <AssetAmountInput
             amountValue={withdrawAmount}
+            assetUsdValue={withdrawAmountUsd}
             onAmountChange={setWithdrawAmount}
             invalid={!isValidWithdrawAmount}
             maxAmount={maximumWithdrawAmount}
             assetOptions={withdrawableAssetsOptions}
-            onAssetChange={onWithdrawAssetChange}
+            onAssetChange={setWithdrawAsset}
             assetValue={withdrawAsset}
             amountLabel={t(translations.common.amount)}
           />
@@ -119,6 +140,12 @@ export const WithdrawForm: FC<WithdrawFormProps> = () => {
 
       <Button
         disabled={submitButtonDisabled}
+        onClick={async () => {
+          handleWithdraw(
+            withdrawSize,
+            await getAssetData(withdrawAsset, BOB_CHAIN_ID),
+          );
+        }}
         text={t(translations.common.buttons.confirm)}
       />
     </form>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx
index 3c2474a8b..2e305f622 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx
@@ -8,11 +8,13 @@ import { translations } from '../../../../../../../locales/i18n';
 import { WithdrawForm } from './WithdrawForm';
 
 type WithdrawModalContainerProps = {
+  asset: string;
   isOpen: boolean;
   handleCloseModal: () => unknown;
 };
 
 export const WithdrawModalContainer: FC<WithdrawModalContainerProps> = ({
+  asset,
   isOpen,
   handleCloseModal,
 }) => {
@@ -23,7 +25,7 @@ export const WithdrawModalContainer: FC<WithdrawModalContainerProps> = ({
         onClose={handleCloseModal}
       />
       <DialogBody className="flex flex-col gap-6">
-        <WithdrawForm onSuccess={handleCloseModal} />
+        <WithdrawForm asset={asset} onSuccess={handleCloseModal} />
       </DialogBody>
     </Dialog>
   );
diff --git a/apps/frontend/src/hooks/aave/useAaveDeposit.tsx b/apps/frontend/src/hooks/aave/useAaveDeposit.tsx
new file mode 100644
index 000000000..7c4ca65f8
--- /dev/null
+++ b/apps/frontend/src/hooks/aave/useAaveDeposit.tsx
@@ -0,0 +1,47 @@
+import { useCallback, useMemo } from 'react';
+
+import { BigNumber } from 'ethers';
+import { t } from 'i18next';
+
+import { AssetDetailsData } from '@sovryn/contracts';
+import { Decimal } from '@sovryn/utils';
+
+import { config } from '../../constants/aave';
+import { useTransactionContext } from '../../contexts/TransactionContext';
+import { translations } from '../../locales/i18n';
+import { AaveSupplyTransactionsFactory } from '../../utils/aave/AaveSupplyTransactionsFactory';
+import { useAccount } from '../useAccount';
+
+export const useAaveDeposit = (onBegin: () => void, onComplete: () => void) => {
+  const { signer } = useAccount();
+  const { setTransactions, setIsOpen, setTitle } = useTransactionContext();
+
+  const aaveSupplyTransactionsFactory = useMemo(() => {
+    if (!signer) return null;
+    return new AaveSupplyTransactionsFactory(
+      config.PoolAddress,
+      config.WETHGatewayAddress,
+      signer,
+    );
+  }, [signer]);
+
+  const handleDeposit = useCallback(
+    async (amount: Decimal, asset: AssetDetailsData) => {
+      if (!aaveSupplyTransactionsFactory) {
+        return;
+      }
+      const bnAmount = BigNumber.from(
+        amount.mul(Decimal.from(10).pow(asset.decimals)).toString(),
+      );
+
+      setTransactions(
+        await aaveSupplyTransactionsFactory.supply(asset, bnAmount),
+      );
+      setTitle(t(translations.common.deposit));
+      setIsOpen(true);
+    },
+    [setIsOpen, setTitle, setTransactions, aaveSupplyTransactionsFactory],
+  );
+
+  return { handleDeposit };
+};
diff --git a/apps/frontend/src/hooks/useAaveReservesData.tsx b/apps/frontend/src/hooks/aave/useAaveReservesData.tsx
similarity index 62%
rename from apps/frontend/src/hooks/useAaveReservesData.tsx
rename to apps/frontend/src/hooks/aave/useAaveReservesData.tsx
index 201d160df..6c99852fc 100644
--- a/apps/frontend/src/hooks/useAaveReservesData.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveReservesData.tsx
@@ -1,23 +1,24 @@
 import {
   ReserveDataHumanized,
-  ReservesDataHumanized,
   UiPoolDataProvider,
 } from '@aave/contract-helpers';
 import { formatReserves, FormatReserveUSDResponse } from '@aave/math-utils';
 
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useMemo } from 'react';
 
 import dayjs from 'dayjs';
 
-import { config } from '../constants/aave';
+import { BOB_CHAIN_ID } from '../../config/chains';
+
+import { config } from '../../constants/aave';
+import { useCachedData } from '../useCachedData';
 
 export type Reserve = ReserveDataHumanized & FormatReserveUSDResponse;
 
-export const useAaveReservesData = () => {
+export type ReserveData = Reserve[];
+
+export const useAaveReservesData = (): ReserveData => {
   const provider = config.provider; // TODO: replace with useAccount
-  const [reserves, setReserves] = useState<Reserve[]>([]);
-  const [reservesData, setReservesData] =
-    useState<ReservesDataHumanized | null>(null);
 
   const uiPoolDataProvider = useMemo(
     () =>
@@ -31,8 +32,14 @@ export const useAaveReservesData = () => {
     [provider],
   );
 
-  const fetchReservesData = useCallback(
-    async (uiPoolDataProvider: UiPoolDataProvider) => {
+  const { value } = useCachedData<ReserveData>(
+    'AaveReservesData',
+    BOB_CHAIN_ID,
+    async () => {
+      if (!uiPoolDataProvider) {
+        return [];
+      }
+
       const currentTimestamp = dayjs().unix();
       const reservesData = await uiPoolDataProvider.getReservesHumanized({
         lendingPoolAddressProvider: config.PoolAddressesProviderAddress,
@@ -49,20 +56,12 @@ export const useAaveReservesData = () => {
           reservesData.baseCurrencyData.marketReferenceCurrencyPriceInUsd,
       });
 
-      setReserves(formattedReserves);
-      setReservesData({
-        baseCurrencyData: reservesData.baseCurrencyData,
-        reservesData: reserves,
-      });
+      return formattedReserves;
     },
+    [uiPoolDataProvider],
     [],
+    { ttl: 1000 * 60, fallbackToPreviousResult: true },
   );
 
-  useEffect(() => {
-    if (uiPoolDataProvider) {
-      fetchReservesData(uiPoolDataProvider);
-    }
-  }, [uiPoolDataProvider, fetchReservesData]);
-
-  return { reserves, reservesData };
+  return value;
 };
diff --git a/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx b/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx
new file mode 100644
index 000000000..b89474fd9
--- /dev/null
+++ b/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx
@@ -0,0 +1,78 @@
+import { UiPoolDataProvider } from '@aave/contract-helpers';
+import { formatReserves, formatUserSummary } from '@aave/math-utils';
+
+import { useMemo } from 'react';
+
+import dayjs from 'dayjs';
+
+import { BOB_CHAIN_ID } from '../../config/chains';
+
+import { config } from '../../constants/aave';
+import { AaveUserReservesSummary } from '../../utils/aave';
+import { useCachedData } from '../useCachedData';
+
+type UserReservesData = AaveUserReservesSummary | null;
+
+export const useAaveUserReservesData = (): UserReservesData => {
+  const provider = config.provider;
+  const account = '0xF754D0f4de0e815b391D997Eeec5cD07E59858F0';
+  // const { account, provider } = useAccount(); TODO: activate this instead of 2 above once calculations in bob are possible
+
+  const uiPoolDataProvider = useMemo(
+    () =>
+      provider
+        ? new UiPoolDataProvider({
+            provider,
+            uiPoolDataProviderAddress: config.UiPoolDataProviderV3Address,
+            chainId: config.chainId,
+          })
+        : null,
+    [provider],
+  );
+
+  const { value } = useCachedData<UserReservesData>(
+    `AaveUserReservesData/${account}`,
+    BOB_CHAIN_ID,
+    async () => {
+      if (!account || !uiPoolDataProvider) {
+        return null;
+      }
+
+      const [reservesData, userReservesData] = await Promise.all([
+        uiPoolDataProvider.getReservesHumanized({
+          lendingPoolAddressProvider: config.PoolAddressesProviderAddress,
+        }),
+        uiPoolDataProvider.getUserReservesHumanized({
+          lendingPoolAddressProvider: config.PoolAddressesProviderAddress,
+          user: account,
+        }),
+      ]);
+      const {
+        marketReferenceCurrencyDecimals,
+        marketReferenceCurrencyPriceInUsd: marketReferencePriceInUsd,
+      } = reservesData.baseCurrencyData;
+      const currentTimestamp = dayjs().unix();
+
+      return AaveUserReservesSummary.from(
+        formatUserSummary({
+          currentTimestamp,
+          marketReferencePriceInUsd,
+          marketReferenceCurrencyDecimals,
+          userReserves: userReservesData.userReserves,
+          userEmodeCategoryId: userReservesData.userEmodeCategoryId,
+          formattedReserves: formatReserves({
+            currentTimestamp,
+            marketReferencePriceInUsd,
+            marketReferenceCurrencyDecimals,
+            reserves: reservesData.reservesData,
+          }),
+        }),
+      );
+    },
+    [uiPoolDataProvider, account],
+    null,
+    { ttl: 1000 * 60, fallbackToPreviousResult: true },
+  );
+
+  return value;
+};
diff --git a/apps/frontend/src/hooks/aave/useAaveWithdraw.tsx b/apps/frontend/src/hooks/aave/useAaveWithdraw.tsx
new file mode 100644
index 000000000..e0ff36e2b
--- /dev/null
+++ b/apps/frontend/src/hooks/aave/useAaveWithdraw.tsx
@@ -0,0 +1,50 @@
+import { useCallback, useMemo } from 'react';
+
+import { BigNumber } from 'ethers';
+import { t } from 'i18next';
+
+import { AssetDetailsData } from '@sovryn/contracts';
+import { Decimal } from '@sovryn/utils';
+
+import { config } from '../../constants/aave';
+import { useTransactionContext } from '../../contexts/TransactionContext';
+import { translations } from '../../locales/i18n';
+import { AaveWithdrawTransactionsFactory } from '../../utils/aave/AaveWithdrawTransactionsFactory';
+import { useAccount } from '../useAccount';
+
+export const useAaveWithdraw = (props: {
+  onBegin?: () => void;
+  onComplete?: () => void;
+}) => {
+  const { signer } = useAccount();
+  const { setTransactions, setIsOpen, setTitle } = useTransactionContext();
+
+  const aaveWithdrawTransactionsFactory = useMemo(() => {
+    if (!signer) return null;
+    return new AaveWithdrawTransactionsFactory(
+      config.PoolAddress,
+      config.WETHGatewayAddress,
+      signer,
+    );
+  }, [signer]);
+
+  const handleWithdraw = useCallback(
+    async (amount: Decimal, asset: AssetDetailsData) => {
+      if (!aaveWithdrawTransactionsFactory) {
+        return;
+      }
+      const bnAmount = BigNumber.from(
+        amount.mul(Decimal.from(10).pow(asset.decimals)).toString(),
+      );
+
+      setTransactions(
+        await aaveWithdrawTransactionsFactory.withdraw(asset, bnAmount),
+      );
+      setTitle(t(translations.common.withdraw));
+      setIsOpen(true);
+    },
+    [setIsOpen, setTitle, setTransactions, aaveWithdrawTransactionsFactory],
+  );
+
+  return { handleWithdraw };
+};
diff --git a/apps/frontend/src/hooks/useAaveUserReservesData.tsx b/apps/frontend/src/hooks/useAaveUserReservesData.tsx
deleted file mode 100644
index 3903ee413..000000000
--- a/apps/frontend/src/hooks/useAaveUserReservesData.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import {
-  ReservesDataHumanized,
-  UiPoolDataProvider,
-} from '@aave/contract-helpers';
-import { formatUserSummary } from '@aave/math-utils';
-
-import { useCallback, useEffect, useMemo, useState } from 'react';
-
-import dayjs from 'dayjs';
-import { ethers } from 'ethers';
-
-import { config } from '../constants/aave';
-import { AaveUserReservesSummary } from '../utils/aave';
-import { Reserve, useAaveReservesData } from './useAaveReservesData';
-import { useAccount } from './useAccount';
-
-export const useAaveUserReservesData = () => {
-  const provider = config.provider;
-  const { reserves, reservesData } = useAaveReservesData();
-  const { signer } = useAccount();
-  const [userReservesSummary, setUserReservesSummary] =
-    useState<AaveUserReservesSummary | null>(null);
-
-  const uiPoolDataProvider = useMemo(
-    () =>
-      provider
-        ? new UiPoolDataProvider({
-            provider,
-            uiPoolDataProviderAddress: config.UiPoolDataProviderV3Address,
-            chainId: config.chainId,
-          })
-        : null,
-    [provider],
-  );
-
-  const fetchPoolData = useCallback(
-    async (
-      uiPoolDataProvider: UiPoolDataProvider,
-      reserves: Reserve[],
-      reservesData: ReservesDataHumanized,
-      signer: ethers.Signer,
-    ) => {
-      const userReservesData =
-        await uiPoolDataProvider.getUserReservesHumanized({
-          lendingPoolAddressProvider: config.PoolAddressesProviderAddress,
-          user: await signer.getAddress(),
-        });
-
-      setUserReservesSummary(
-        AaveUserReservesSummary.from(
-          formatUserSummary({
-            currentTimestamp: dayjs().unix(),
-            userReserves: userReservesData.userReserves,
-            userEmodeCategoryId: userReservesData.userEmodeCategoryId,
-            formattedReserves: reserves,
-            marketReferenceCurrencyDecimals:
-              reservesData.baseCurrencyData.marketReferenceCurrencyDecimals,
-            marketReferencePriceInUsd:
-              reservesData.baseCurrencyData.marketReferenceCurrencyPriceInUsd,
-          }),
-        ),
-      );
-    },
-    [],
-  );
-
-  useEffect(() => {
-    if (
-      !uiPoolDataProvider ||
-      reserves.length === 0 ||
-      !signer ||
-      !reservesData
-    ) {
-      return;
-    }
-
-    fetchPoolData(uiPoolDataProvider, reserves, reservesData, signer);
-  }, [uiPoolDataProvider, reserves, signer, reservesData, fetchPoolData]);
-
-  return { userReservesSummary };
-};
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index f93c59967..e6f68d57d 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -811,7 +811,9 @@
         },
         "tx": {
             "supplyTitle": "Deposit {{symbol}} to the pool",
-            "supplySubtitle": "Transfers {{amount}} {{symbol}} to the stability pool"
+            "supplySubtitle": "Transfers {{amount}} {{symbol}} to the pool",
+            "withdrawTitle": "Withdraw {{asset}} from the pool",
+            "withdrawSubtitle": "Transfer {{amount}} {{symbol}} from the pool"
         },
         "topPanel": {
             "title": "Lend and borrow",
diff --git a/apps/frontend/src/utils/aave/AaveSupplyTransactionsFactory.ts b/apps/frontend/src/utils/aave/AaveSupplyTransactionsFactory.ts
index ea883163b..c2e4f50dc 100644
--- a/apps/frontend/src/utils/aave/AaveSupplyTransactionsFactory.ts
+++ b/apps/frontend/src/utils/aave/AaveSupplyTransactionsFactory.ts
@@ -97,6 +97,7 @@ export class AaveSupplyTransactionsFactory {
         }),
         subtitle: t(translations.aavePage.tx.supplySubtitle, {
           symbol: nativeAsset.symbol,
+          amount: ethers.utils.formatUnits(amount, nativeAsset.decimals),
         }),
         request: {
           type: TransactionType.signTransaction,
diff --git a/apps/frontend/src/utils/aave/AaveWithdrawTransactionsFactory.ts b/apps/frontend/src/utils/aave/AaveWithdrawTransactionsFactory.ts
new file mode 100644
index 000000000..9b414af87
--- /dev/null
+++ b/apps/frontend/src/utils/aave/AaveWithdrawTransactionsFactory.ts
@@ -0,0 +1,106 @@
+import { BigNumber, Contract, ethers } from 'ethers';
+import { t } from 'i18next';
+
+import { AssetDetailsData, getAssetData } from '@sovryn/contracts';
+
+import { BOB_CHAIN_ID } from '../../config/chains';
+
+import {
+  Transaction,
+  TransactionType,
+} from '../../app/3_organisms/TransactionStepDialog/TransactionStepDialog.types';
+import { translations } from '../../locales/i18n';
+import { prepareApproveTransaction } from '../transactions';
+
+export class AaveWithdrawTransactionsFactory {
+  private readonly Pool: ethers.Contract;
+  private readonly WETHGateway: ethers.Contract;
+
+  constructor(
+    private readonly PoolAddress: string,
+    private readonly WETHGatewayAddress: string,
+    private readonly signer: ethers.Signer,
+  ) {
+    this.Pool = new ethers.Contract(
+      this.PoolAddress,
+      ['function withdraw(address asset, uint256 amount, address to)'],
+      this.signer,
+    );
+
+    this.WETHGateway = new ethers.Contract(
+      this.WETHGatewayAddress,
+      ['function withdrawETH(address pool, uint256 amount, address to)'],
+      this.signer,
+    );
+  }
+
+  async withdraw(
+    token: AssetDetailsData,
+    amount: BigNumber,
+  ): Promise<Transaction[]> {
+    if (token.isNative) return this.withdrawNative(amount);
+    else return this.withdrawToken(token, amount);
+  }
+
+  private async withdrawToken(
+    asset: AssetDetailsData,
+    amount: BigNumber,
+  ): Promise<Transaction[]> {
+    return [
+      {
+        title: t(translations.aavePage.tx.withdrawTitle, {
+          symbol: asset.symbol,
+        }),
+        subtitle: t(translations.aavePage.tx.withdrawSubtitle, {
+          symbol: asset.symbol,
+          amount: ethers.utils.formatUnits(amount, asset.decimals),
+        }),
+        request: {
+          type: TransactionType.signTransaction,
+          args: [
+            asset.address,
+            amount.toString(),
+            await this.signer.getAddress(),
+          ],
+          contract: this.Pool,
+          fnName: 'withdraw',
+        },
+      },
+    ];
+  }
+
+  private async withdrawNative(amount: BigNumber): Promise<Transaction[]> {
+    const aWETH = await getAssetData('aWETH', BOB_CHAIN_ID);
+
+    const approval = await prepareApproveTransaction({
+      spender: this.WETHGatewayAddress,
+      token: aWETH.symbol,
+      contract: new Contract(aWETH.address, aWETH.abi, this.signer),
+      amount: amount,
+      chain: BOB_CHAIN_ID,
+    });
+    const transactions: Transaction[] = approval ? [approval] : [];
+
+    transactions.push({
+      title: t(translations.aavePage.tx.withdrawTitle, {
+        symbol: aWETH.symbol,
+      }),
+      subtitle: t(translations.aavePage.tx.withdrawSubtitle, {
+        symbol: aWETH.symbol,
+        amount: ethers.utils.formatUnits(amount, aWETH.decimals),
+      }),
+      request: {
+        type: TransactionType.signTransaction,
+        args: [
+          this.PoolAddress,
+          amount.toString(),
+          await this.signer.getAddress(),
+        ],
+        contract: this.WETHGateway,
+        fnName: 'withdrawETH',
+      },
+    });
+
+    return transactions;
+  }
+}
diff --git a/packages/contracts/src/contracts/assets/bobTestnet.ts b/packages/contracts/src/contracts/assets/bobTestnet.ts
index cd41c1649..2fed174eb 100644
--- a/packages/contracts/src/contracts/assets/bobTestnet.ts
+++ b/packages/contracts/src/contracts/assets/bobTestnet.ts
@@ -56,7 +56,7 @@ export const bobTestnet: Array<AssetDetails> = [
   },
   {
     symbol: 'USDC',
-    address: '0x143050408aCCb9A9a2f285e625537d48674f3e58',
+    address: '0x509AeFe02953BC2fB8abCa53Fd83C94D86c05922',
     name: 'USD Coin',
     decimals: 6,
     getIcon: async () => (await import('./icons/bob/usdc')).default,
@@ -82,4 +82,12 @@ export const bobTestnet: Array<AssetDetails> = [
     decimals: 18,
     getIcon: async () => (await import('./icons/bob/wsteth')).default,
   },
+  {
+    symbol: 'aWETH',
+    // TODO: properly adjust this variable
+    address: '0xAD51B64c2eeF5877CDF4AcdCC790DF6eaBC6ecbf',
+    name: 'Aave Wrapped ETH',
+    decimals: 18,
+    getIcon: async () => (await import('./icons/bob/eth')).default,
+  },
 ];

From e3d37b2489d8097e79430ed0d8f69c77f46e4a84 Mon Sep 17 00:00:00 2001
From: Luciano Perez Cerra <perezcerraluciano@gmail.com>
Date: Fri, 23 Aug 2024 09:49:34 -0300
Subject: [PATCH 050/116] Develop mockups (#25)

* fix breakpoints

* [SAF-41] fix color constant and background for mobile vs desktop views (#20)

* [SAF-41] fix color constant and background for mobile vs desktop views

* [SAF-41] use theme variables for colors and breakpoint usage for better consistency

* Apply suggestions from code review

Co-authored-by: Juan Dahl <juandahl@users.noreply.github.com>

---------

Co-authored-by: Juan Dahl <juandahl@users.noreply.github.com>

---------

Co-authored-by: matzapata <matuzapata@gmail.com>
Co-authored-by: Juan Dahl <juandahl@users.noreply.github.com>
---
 .../src/app/5_pages/AavePage/AavePage.tsx     | 10 ++++-----
 .../AaveReserveOverviewPage.tsx               | 11 ++++++----
 .../BorrowDetailsGraph/BorrowDetailsGraph.tsx |  5 +++--
 .../components/Chart/Chart.constants.ts       | 20 +++++++++---------
 .../components/Chart/Chart.tsx                |  6 ++----
 .../InterestRateModelGraph.tsx                |  5 +++--
 .../components/Chart/Chart.constants.ts       | 20 +++++++++---------
 .../components/Chart/Chart.tsx                | 16 +++++++-------
 .../SupplyDetailsGraph/SupplyDetailsGraph.tsx |  5 +++--
 .../components/Chart/Chart.constants.ts       | 21 ++++++++++---------
 .../components/Chart/Chart.tsx                |  6 ++----
 .../frontend/src/locales/en/translations.json |  3 ++-
 12 files changed, 66 insertions(+), 62 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx b/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
index 3b71f0c10..94ae01cb0 100644
--- a/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
@@ -92,10 +92,10 @@ const AavePage: FC = () => {
         netWorth={userReservesSummary?.netWorth}
       />
 
-      <div className="pt-6 mt-6 space-y-6 lg:pt-0 lg:mt-0 lg:space-y-0">
+      <div className="pt-6 mt-6 space-y-6 2xl:pt-0 2xl:mt-0 2xl:space-y-0">
         {/* Tab selector */}
         <Tabs
-          className="w-full bg-gray-80 rounded p-1 border border-gray-60 lg:hidden"
+          className="w-full bg-gray-80 rounded p-1 border border-gray-60 2xl:hidden"
           index={activeTab}
           items={[
             {
@@ -115,11 +115,11 @@ const AavePage: FC = () => {
         />
 
         {/* Lending and borrowing columns */}
-        <div className="grid grid-cols-1 lg:grid-cols-2 lg:gap-5">
+        <div className="grid grid-cols-1 2xl:grid-cols-2 2xl:gap-5">
           <div
             className={classNames(
               { hidden: activeTab !== ActiveTab.LEND },
-              'lg:block space-y-4',
+              '2xl:block space-y-4',
             )}
           >
             <LendPositionsList
@@ -135,7 +135,7 @@ const AavePage: FC = () => {
           <div
             className={classNames(
               { hidden: activeTab !== ActiveTab.BORROW },
-              'lg:block space-y-4',
+              '2xl:block space-y-4',
             )}
           >
             <BorrowPositionsList
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
index 30869ebff..1c9418098 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { t } from 'i18next';
 import { Helmet } from 'react-helmet-async';
 
-import { Tabs, TabSize, TabType } from '@sovryn/ui';
+import { Paragraph, Tabs, TabSize, TabType } from '@sovryn/ui';
 
 import { translations } from '../../../locales/i18n';
 import { BorrowDetailsGraph } from './components/BorrowDetailsGraph/BorrowDetailsGraph';
@@ -34,6 +34,9 @@ const AaveReserveOverviewPage: FC = () => {
       </Helmet>
 
       <TopPanel asset={asset} className="lg:mb-[110px] lg:mt-[52px]" />
+      <Paragraph className="text-base mb-4">
+        {t(pageTranslations.reserveStatusTab.fullTitle)}
+      </Paragraph>
 
       <div className="pt-6 space-y-6 lg:pt-0 lg:space-y-0 w-full">
         <Tabs
@@ -57,11 +60,11 @@ const AaveReserveOverviewPage: FC = () => {
         />
 
         {/* reserve graphics columns */}
-        <div className="grid grid-cols-1 lg:gap-5 lg:grid-cols-[auto_465px]">
+        <div className="flex gap-5">
           <div
             className={classNames(
               { hidden: activeOverviewTab !== OverviewTab.RESERVE },
-              'lg:block space-y-4 w-full',
+              'lg:block space-y-4 flex-grow w-min',
             )}
           >
             <SupplyDetailsGraph />
@@ -74,7 +77,7 @@ const AaveReserveOverviewPage: FC = () => {
           <div
             className={classNames(
               { hidden: activeOverviewTab !== OverviewTab.WALLET },
-              'lg:block space-y-4',
+              'lg:block space-y-4 w-[450px] shrink-0',
             )}
           >
             <WalletOverview asset={asset} />
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
index d4f547fe8..26f12e9fd 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
@@ -2,6 +2,7 @@ import React, { FC, useMemo, useState } from 'react';
 
 import { t } from 'i18next';
 
+import { theme } from '@sovryn/tailwindcss-config';
 import { Accordion, Link, Paragraph } from '@sovryn/ui';
 
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
@@ -9,7 +10,7 @@ import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/Statistic
 import { useIsMobile } from '../../../../../hooks/useIsMobile';
 import { translations } from '../../../../../locales/i18n';
 import { Chart } from './components/Chart/Chart';
-import { harcodedData, LINE_COLOR } from './components/Chart/Chart.constants';
+import { harcodedData } from './components/Chart/Chart.constants';
 import { MockData } from './components/Chart/Chart.types';
 
 const pageTranslations = translations.aaveReserveOverviewPage.borrowDetails;
@@ -27,7 +28,7 @@ export const BorrowDetailsGraph: FC<BorrowDetailsGraphProps> = () => {
     return {
       data1,
       label1: t(pageTranslations.chart.label1),
-      lineColor: LINE_COLOR,
+      lineColor: theme.colors.positive,
       xLabels: data1.map(item => item.x),
     };
   }, []);
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.constants.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.constants.ts
index c402c345b..7156e654a 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.constants.ts
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.constants.ts
@@ -1,21 +1,21 @@
-export const PRIMARY_COLOR = '#2C303B';
-export const TEXT_COLOR = '#f5f5f5';
-export const LINE_COLOR = '#72eadf';
+import { theme } from '@sovryn/tailwindcss-config';
+
+export const GRID_COLOR = '#484d59';
 export const TICK_COLOR = '#b6bac1';
-export const BORDER_COLOR = '#484D59';
-export const GRID_COLOR = 'rgb(72 77 89)';
-export const FONT_FAMILY = 'Roboto';
-export const FONT_SIZE = 12;
-export const FONT_WEIGHT = '500';
-export const DASH_GRID_TYPE = 'dash';
+const SM_BREAKPOINT = parseInt(theme.screens.sm, 10) || 576;
 
 export const CUSTOM_CANVAS_BACKGROUND_COLOR = {
   id: 'customCanvasBackgroundColor',
   beforeDraw: (chart, options) => {
     const { ctx } = chart;
+    const windowWidth = window.innerWidth;
     ctx.save();
     ctx.globalCompositeOperation = 'destination-over';
-    ctx.fillStyle = '#1e2128';
+    if (windowWidth < SM_BREAKPOINT) {
+      ctx.fillStyle = theme.colors['gray-90'];
+    } else {
+      ctx.fillStyle = theme.colors['gray-80'];
+    }
     ctx.fillRect(0, 0, chart.width, chart.height);
     ctx.restore();
   },
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx
index 308b02aa7..e16a4b200 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx
@@ -79,10 +79,8 @@ export const Chart: FC<ChartProps> = ({ mockData }) => {
             },
             grid: {
               color: GRID_COLOR,
-              lineWidth: 1,
-              drawOnChartArea: true,
               tickBorderDash: [5, 5],
-              tickBorderDashOffset: 0,
+              drawTicks: false,
             },
           },
         },
@@ -110,7 +108,7 @@ export const Chart: FC<ChartProps> = ({ mockData }) => {
       onClick={e => {
         e.stopPropagation();
       }}
-      className="lg:h-[37rem] h-64 rounded"
+      className="lg:p-6 lg:bg-gray-80"
     >
       <span id="legend-container-borrow-chart" className="text-tiny"></span>
       <canvas ref={canvas}></canvas>
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
index a8a369388..12a4bcb10 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
@@ -2,6 +2,7 @@ import React, { FC, useMemo, useState } from 'react';
 
 import { t } from 'i18next';
 
+import { theme } from '@sovryn/tailwindcss-config';
 import { Accordion, Link } from '@sovryn/ui';
 
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
@@ -9,7 +10,7 @@ import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/Statistic
 import { useIsMobile } from '../../../../../hooks/useIsMobile';
 import { translations } from '../../../../../locales/i18n';
 import { Chart } from './components/Chart/Chart';
-import { harcodedData, LINE_COLOR } from './components/Chart/Chart.constants';
+import { harcodedData } from './components/Chart/Chart.constants';
 import { MockData } from './components/Chart/Chart.types';
 
 const pageTranslations = translations.aaveReserveOverviewPage.interestRateModel;
@@ -31,7 +32,7 @@ export const InterestRateModelGraph: FC<InterestRateModelGraphProps> = () => {
       data2: currentData,
       data3: optimalData,
       label1: t(pageTranslations.chart.label1),
-      lineColor: LINE_COLOR,
+      lineColor: theme.colors['primary-30'],
       xLabels: data.map(() => ''),
     };
   }, []);
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.constants.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.constants.ts
index 6d52f0cb9..241c37c9b 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.constants.ts
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.constants.ts
@@ -1,21 +1,21 @@
-export const PRIMARY_COLOR = '#2C303B';
-export const TEXT_COLOR = '#f5f5f5';
-export const LINE_COLOR = '#f58c31';
-export const BORDER_COLOR = '#484D59';
+import { theme } from '@sovryn/tailwindcss-config';
+
+export const GRID_COLOR = '#484d59';
 export const TICK_COLOR = '#b6bac1';
-export const GRID_COLOR = 'rgb(72 77 89)';
-export const FONT_FAMILY = 'Roboto';
-export const FONT_SIZE = 12;
-export const FONT_WEIGHT = '500';
-export const DASH_GRID_TYPE = 'dash';
+const SM_BREAKPOINT = parseInt(theme.screens.sm, 10) || 576;
 
 export const CUSTOM_CANVAS_BACKGROUND_COLOR = {
   id: 'customCanvasBackgroundColor',
   beforeDraw: (chart, options) => {
     const { ctx } = chart;
+    const windowWidth = window.innerWidth;
     ctx.save();
     ctx.globalCompositeOperation = 'destination-over';
-    ctx.fillStyle = '#1e2128';
+    if (windowWidth < SM_BREAKPOINT) {
+      ctx.fillStyle = theme.colors['gray-90'];
+    } else {
+      ctx.fillStyle = theme.colors['gray-80'];
+    }
     ctx.fillRect(0, 0, chart.width, chart.height);
     ctx.restore();
   },
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
index cd5a6ba9b..54892247a 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
@@ -3,6 +3,8 @@ import React, { FC, useEffect, useRef } from 'react';
 import ChartLibrary from 'chart.js/auto';
 import 'chartjs-adapter-date-fns';
 
+import { theme } from '@sovryn/tailwindcss-config';
+
 import {
   CUSTOM_CANVAS_BACKGROUND_COLOR,
   GRID_COLOR,
@@ -48,8 +50,8 @@ export const Chart: FC<ChartProps> = ({ mockData }) => {
             label: 'Current 78.64%',
             type: 'scatter',
             data: mockData.data2,
-            backgroundColor: 'cyan',
-            borderColor: 'cyan',
+            borderColor: theme.colors.positive,
+            backgroundColor: theme.colors.positive,
             showLine: true,
             borderDash: [1, 2],
             pointRadius: 0,
@@ -58,8 +60,8 @@ export const Chart: FC<ChartProps> = ({ mockData }) => {
             label: 'Optimal 92%',
             type: 'scatter',
             data: mockData.data3,
-            backgroundColor: '#4caf51',
-            borderColor: '#4caf51',
+            borderColor: theme.colors.success,
+            backgroundColor: theme.colors.success,
             showLine: true,
             borderDash: [1, 2],
             pointRadius: 0,
@@ -94,10 +96,8 @@ export const Chart: FC<ChartProps> = ({ mockData }) => {
             },
             grid: {
               color: GRID_COLOR,
-              lineWidth: 1,
-              drawOnChartArea: true,
               tickBorderDash: [5, 5],
-              tickBorderDashOffset: 0,
+              drawTicks: false,
             },
           },
         },
@@ -125,7 +125,7 @@ export const Chart: FC<ChartProps> = ({ mockData }) => {
       onClick={e => {
         e.stopPropagation();
       }}
-      className="lg:h-[37rem] h-64 rounded"
+      className="lg:p-6 lg:bg-gray-80"
     >
       <span id="legend-container-interest-chart" className="text-tiny"></span>
       <canvas ref={canvas}></canvas>
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
index daf50235a..86e59fa50 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
@@ -2,6 +2,7 @@ import React, { FC, useMemo, useState } from 'react';
 
 import { t } from 'i18next';
 
+import { theme } from '@sovryn/tailwindcss-config';
 import { Accordion, Icon, IconNames, Paragraph } from '@sovryn/ui';
 
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
@@ -9,7 +10,7 @@ import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/Statistic
 import { useIsMobile } from '../../../../../hooks/useIsMobile';
 import { translations } from '../../../../../locales/i18n';
 import { Chart } from './components/Chart/Chart';
-import { harcodedData, LINE_COLOR } from './components/Chart/Chart.constants';
+import { harcodedData } from './components/Chart/Chart.constants';
 import { MockData } from './components/Chart/Chart.types';
 
 const pageTranslations = translations.aaveReserveOverviewPage.supplyDetails;
@@ -26,7 +27,7 @@ export const SupplyDetailsGraph: FC<SupplyDetailsGraphProps> = () => {
     return {
       data1,
       label1: t(pageTranslations.chart.label1),
-      lineColor: LINE_COLOR,
+      lineColor: theme.colors['primary-30'],
       xLabels: data1.map(item => item.x),
     };
   }, []);
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.constants.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.constants.ts
index 6d3ad4980..5a615f6bb 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.constants.ts
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.constants.ts
@@ -1,21 +1,22 @@
-export const PRIMARY_COLOR = '#2C303B';
-export const TEXT_COLOR = '#f5f5f5';
-export const LINE_COLOR = '#f58c31';
+import { theme } from '@sovryn/tailwindcss-config';
+
+export const GRID_COLOR = '#484d59';
 export const TICK_COLOR = '#b6bac1';
-export const BORDER_COLOR = '#484D59';
-export const GRID_COLOR = 'rgb(72 77 89)';
-export const FONT_FAMILY = 'Roboto';
-export const FONT_SIZE = 12;
-export const FONT_WEIGHT = '500';
-export const DASH_GRID_TYPE = 'dash';
+const SM_BREAKPOINT = parseInt(theme.screens.sm, 10);
 
 export const CUSTOM_CANVAS_BACKGROUND_COLOR = {
   id: 'customCanvasBackgroundColor',
   beforeDraw: (chart, options) => {
     const { ctx } = chart;
+    const windowWidth = window.innerWidth;
     ctx.save();
     ctx.globalCompositeOperation = 'destination-over';
-    ctx.fillStyle = '#1e2128';
+
+    if (windowWidth < SM_BREAKPOINT) {
+      ctx.fillStyle = theme.colors['gray-90'];
+    } else {
+      ctx.fillStyle = theme.colors['gray-80'];
+    }
     ctx.fillRect(0, 0, chart.width, chart.height);
     ctx.restore();
   },
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.tsx
index 9cb338322..aab0f7505 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.tsx
@@ -81,10 +81,8 @@ export const Chart: FC<ChartProps> = ({ mockData }) => {
             },
             grid: {
               color: GRID_COLOR,
-              lineWidth: 1,
-              drawOnChartArea: true,
               tickBorderDash: [5, 5],
-              tickBorderDashOffset: 0,
+              drawTicks: false,
             },
           },
         },
@@ -112,7 +110,7 @@ export const Chart: FC<ChartProps> = ({ mockData }) => {
       onClick={e => {
         e.stopPropagation();
       }}
-      className="lg:h-[37rem] h-64 rounded"
+      className="lg:p-6 lg:bg-gray-80"
     >
       <span id="legend-container-supply-chart" className="text-tiny"></span>
       <canvas ref={canvas}></canvas>
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index e6f68d57d..35085da3e 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -899,7 +899,8 @@
             "oraclePrice": "Oracle price"
         },
         "reserveStatusTab": {
-            "title": "Reserve status"
+            "title": "Reserve status",
+            "fullTitle": "Reserve status & configuration"
         },
         "yourWalletTab": {
             "title": "Your wallet",

From ae64540b1a582b4b7bb9608d0d3bf782950eaa3b Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Fri, 23 Aug 2024 12:11:52 -0300
Subject: [PATCH 051/116] Withdraw integration (#21)

* dashboard tables

* emode usd and borrowing powers

* fix asset details

* wip

* Dashboard pool data integration (#15)

* dashboard tables

* emode usd and borrowing powers

* fix asset details

* pr comments

* unit fixes

* supply wip

* fix asset renderer
add usd amount
cleanups

* fixes

* withdraw integration

* fix and pr comment

* pr comment

From b960b790685501c6bad4d5b2c9038c1c69dd63ba Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Fri, 23 Aug 2024 12:53:36 -0300
Subject: [PATCH 052/116] Borrow integration (#24)

* dashboard tables

* emode usd and borrowing powers

* fix asset details

* wip

* Dashboard pool data integration (#15)

* dashboard tables

* emode usd and borrowing powers

* fix asset details

* pr comments

* unit fixes

* supply wip

* fix asset renderer
add usd amount
cleanups

* fixes

* withdraw integration

* cache useAaveReservesData

* cache useUserReserves

* cleanup

* fix imports

* wip. Health bar failing, wrong liquidation price

* fix calculations

* fix calculations

* fix

* cleanup

* replace apy with apr and health ratio with collateral ratio
---
 .../AavePoolRowTitle/AavePoolRowTitle.tsx     |   9 +-
 .../BorrowAssetAction/BorrowAssetAction.tsx   |   3 +-
 .../components/BorrowModal/BorrowForm.tsx     | 141 +++++++++++-------
 .../BorrowModal/BorrowForm.utils.ts           |  34 ++++-
 .../BorrowModal/BorrowModalContainer.tsx      |   4 +-
 .../CollateralRatioHealthBar.tsx              |  20 ++-
 .../CollateralRatioHealthBar.utils.tsx        |   1 -
 .../components/LendModal/LendForm.tsx         |   1 +
 apps/frontend/src/constants/aave.ts           |   3 +
 .../frontend/src/hooks/aave/useAaveBorrow.tsx |  58 +++++++
 .../frontend/src/locales/en/translations.json |   6 +-
 apps/frontend/src/utils/aave.ts               |   6 +-
 .../aave/AaveBorrowTransactionsFactory.ts     | 134 +++++++++++++++++
 yarn.lock                                     |  16 +-
 14 files changed, 367 insertions(+), 69 deletions(-)
 create mode 100644 apps/frontend/src/hooks/aave/useAaveBorrow.tsx
 create mode 100644 apps/frontend/src/utils/aave/AaveBorrowTransactionsFactory.ts

diff --git a/apps/frontend/src/app/2_molecules/AavePoolRowTitle/AavePoolRowTitle.tsx b/apps/frontend/src/app/2_molecules/AavePoolRowTitle/AavePoolRowTitle.tsx
index 99466a757..b40db0453 100644
--- a/apps/frontend/src/app/2_molecules/AavePoolRowTitle/AavePoolRowTitle.tsx
+++ b/apps/frontend/src/app/2_molecules/AavePoolRowTitle/AavePoolRowTitle.tsx
@@ -1,5 +1,7 @@
 import React, { FC } from 'react';
 
+import { BOB_CHAIN_ID } from '../../../config/chains';
+
 import {
   AmountRenderer,
   AmountRendererProps,
@@ -17,7 +19,12 @@ export const AaveRowTitle: FC<AaveRowTitleProps> = ({
   ...props
 }) => (
   <div className="flex justify-between items-center w-full pr-3">
-    <AssetRenderer showAssetLogo asset={asset} className="mr-1" />
+    <AssetRenderer
+      showAssetLogo
+      asset={asset}
+      className="mr-1"
+      chainId={BOB_CHAIN_ID}
+    />
     <div className="pl-1 flex items-center font-medium">
       <AmountRenderer {...props} />
       {label && (
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
index 118fdbb15..2ed861934 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
@@ -15,7 +15,7 @@ type BorrowAssetActionProps = {
   pool: BorrowPoolDetails;
 };
 
-export const BorrowAssetAction: FC<BorrowAssetActionProps> = () => {
+export const BorrowAssetAction: FC<BorrowAssetActionProps> = ({ pool }) => {
   const navigate = useNavigate();
   const [isBorrowModalOpen, setIsBorrowModalOpen] = useState<boolean>(false);
 
@@ -43,6 +43,7 @@ export const BorrowAssetAction: FC<BorrowAssetActionProps> = () => {
       />
 
       <BorrowModalContainer
+        asset={pool.asset}
         handleCloseModal={handleBorrowClose}
         isOpen={isBorrowModalOpen}
       />
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
index 9b9f6aac2..d09faab2e 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
@@ -1,61 +1,84 @@
-import React, { FC, useCallback, useMemo, useState } from 'react';
+import React, { FC, useMemo, useState } from 'react';
 
 import { t } from 'i18next';
 
+import { getAssetData } from '@sovryn/contracts';
 import {
   Button,
   Checkbox,
   ErrorBadge,
   ErrorLevel,
-  HealthBar,
   Link,
   SimpleTable,
   SimpleTableRow,
 } from '@sovryn/ui';
 import { Decimal } from '@sovryn/utils';
 
+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 { config } from '../../../../../../../constants/aave';
+import { useAaveBorrow } from '../../../../../../../hooks/aave/useAaveBorrow';
+import { useAaveReservesData } from '../../../../../../../hooks/aave/useAaveReservesData';
+import { useAaveUserReservesData } from '../../../../../../../hooks/aave/useAaveUserReservesData';
 import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
 import { translations } from '../../../../../../../locales/i18n';
-import { getCollateralRatioThresholds } from './BorrowForm.utils';
+import { BorrowRateMode } from '../../../../../../../utils/aave/AaveBorrowTransactionsFactory';
+import { CollateralRatioHealthBar } from '../../../CollateralRatioHealthBar/CollateralRatioHealthBar';
 
 const pageTranslations = translations.aavePage;
 
 type BorrowFormProps = {
+  asset: string;
   onSuccess: () => unknown;
 };
 
-export const BorrowForm: FC<BorrowFormProps> = () => {
-  const assetPrice = 3258.47; // TODO: this is mocked data. Replace with proper hook
-  const totalBorrow = Decimal.from(10); // TODO: this is mocked data. Replace with proper hook
-  const collateralToLoanRate = Decimal.from(10); // TODO: this is mocked data. Replace with proper hook
-  const collateralSize = Decimal.from(10); // TODO: this is mockd data. Replace with proper hook
-  const availablePools = useMemo(() => ['BTC', 'SOV'], []); // TODO: this is mocked data. Replace with proper hook
-  const [maximumBorrowAmount] = useState<Decimal>(Decimal.from(10)); // TODO: this is mocked data. Replace with proper hook
-  const [borrowApr] = useState(2);
-  const [borrowAsset, setBorrowAsset] = useState<string>(availablePools[0]);
+export const BorrowForm: FC<BorrowFormProps> = ({ asset }) => {
+  const reserves = useAaveReservesData();
+  const userReservesSummary = useAaveUserReservesData();
+  const [borrowAsset, setBorrowAsset] = useState<string>(asset);
   const [borrowAmount, setBorrowAmount, borrowSize] = useDecimalAmountInput('');
   const [acknowledge, setAcknowledge] = useState<boolean>(false);
+  const { handleBorrow } = useAaveBorrow({});
+
+  const reserve = useMemo(() => {
+    return reserves.find(r => r.symbol === borrowAsset);
+  }, [reserves, borrowAsset]);
+
+  const variableBorrowAPR = useMemo(() => {
+    if (!reserve) return Decimal.from(0);
+    return Decimal.from(reserve.variableBorrowAPR).mul(100);
+  }, [reserve]);
 
-  const onBorrowAssetChange = useCallback(v => {
-    setBorrowAsset(v);
-  }, []);
+  const maximumBorrowAmount = useMemo(() => {
+    if (!reserve || !userReservesSummary) return Decimal.from(0);
+
+    // deducted from hf=kte/borrowed => newhf=kte/borrowed+new_borrow => MinHealthFactor = newhf
+    return userReservesSummary.borrowBalance.mul(
+      userReservesSummary.healthFactor.div(config.MinHealthFactor).sub(1),
+    );
+  }, [userReservesSummary, reserve]);
+
+  const borrowUsdAmount = useMemo(() => {
+    return borrowSize.mul(reserve?.priceInUSD ?? 0);
+  }, [borrowSize, reserve]);
 
   const borrowableAssetsOptions = useMemo(
     () =>
-      availablePools.map(token => ({
-        value: token,
+      reserves.map(r => ({
+        value: r.symbol,
         label: (
           <AssetRenderer
             showAssetLogo
-            asset={token}
+            asset={r.symbol}
+            chainId={BOB_CHAIN_ID}
             assetClassName="font-medium"
           />
         ),
       })),
-    [availablePools],
+    [reserves],
   );
 
   const isValidBorrowAmount = useMemo(
@@ -63,23 +86,28 @@ export const BorrowForm: FC<BorrowFormProps> = () => {
     [borrowSize, maximumBorrowAmount],
   );
 
-  const collateralRatioThresholds = useMemo(
-    () => getCollateralRatioThresholds(),
-    [],
-  );
-
   const collateralRatio = useMemo(() => {
-    if ([collateralSize, totalBorrow, borrowSize].some(v => v.isZero())) {
-      return Decimal.ZERO;
+    if (!userReservesSummary) return Decimal.from(0);
+    const newHealthFactor = userReservesSummary.healthFactor
+      .mul(userReservesSummary.borrowBalance)
+      .div(userReservesSummary.borrowBalance.add(borrowUsdAmount));
+
+    return newHealthFactor.div(userReservesSummary.currentLiquidationThreshold);
+  }, [userReservesSummary, borrowUsdAmount]);
+
+  const liquidationPrice = useMemo(() => {
+    if (!borrowSize || !reserve || !userReservesSummary) {
+      return Decimal.from(0);
     }
 
-    return collateralSize.mul(collateralToLoanRate).div(totalBorrow).mul(100);
-  }, [collateralSize, totalBorrow, borrowSize, collateralToLoanRate]);
+    return borrowSize
+      .mul(userReservesSummary.currentLiquidationThreshold)
+      .div(userReservesSummary.collateralBalance);
+  }, [borrowSize, reserve, userReservesSummary]);
 
-  // TODO: expand validations
   const submitButtonDisabled = useMemo(
-    () => !isValidBorrowAmount || borrowSize.lte(0) || !acknowledge,
-    [isValidBorrowAmount, borrowSize, acknowledge],
+    () => !isValidBorrowAmount || borrowSize.lte(0) || !acknowledge || !reserve,
+    [isValidBorrowAmount, borrowSize, acknowledge, reserve],
   );
 
   return (
@@ -89,11 +117,12 @@ export const BorrowForm: FC<BorrowFormProps> = () => {
           label={t(translations.aavePage.common.borrow)}
           amountLabel={t(translations.common.amount)}
           amountValue={borrowAmount}
+          assetUsdValue={borrowUsdAmount}
           onAmountChange={setBorrowAmount}
           maxAmount={maximumBorrowAmount}
           invalid={!isValidBorrowAmount}
           assetValue={borrowAsset}
-          onAssetChange={onBorrowAssetChange}
+          onAssetChange={setBorrowAsset}
           assetOptions={borrowableAssetsOptions}
         />
 
@@ -109,37 +138,40 @@ export const BorrowForm: FC<BorrowFormProps> = () => {
       <SimpleTable>
         <SimpleTableRow
           label={t(translations.aavePage.borrowForm.borrowApr)}
-          value={<AmountRenderer value={borrowApr} suffix={'%'} />}
+          value={
+            <AmountRenderer
+              value={variableBorrowAPR}
+              suffix={'%'}
+              precision={2}
+            />
+          }
         />
       </SimpleTable>
 
-      <div>
-        <div className="flex flex-row justify-between items-center mt-6 mb-3">
-          <div className="flex flex-row justify-start items-center gap-2">
-            <span>{t(translations.aavePage.borrowForm.collateralRatio)}</span>
-          </div>
-          <AmountRenderer value={collateralRatio.toString()} suffix="%" />
-        </div>
-
-        <HealthBar
-          start={collateralRatioThresholds.START}
-          middleStart={collateralRatioThresholds.MIDDLE_START}
-          middleEnd={collateralRatioThresholds.MIDDLE_END}
-          end={collateralRatioThresholds.END}
-          value={collateralRatio.toNumber()}
-        />
-      </div>
+      <CollateralRatioHealthBar ratio={collateralRatio} />
 
       <SimpleTable>
         <SimpleTableRow
           label={t(translations.aavePage.borrowForm.liquidationPrice)}
-          value={<span>{t(translations.common.na)}</span>}
+          value={
+            <AmountRenderer
+              value={liquidationPrice}
+              precision={2}
+              prefix={'$'}
+            />
+          }
         />
         <SimpleTableRow
           label={t(translations.aavePage.borrowForm.tokenPrice, {
             token: borrowAsset,
           })}
-          value={<AmountRenderer value={assetPrice} prefix={'$'} />}
+          value={
+            <AmountRenderer
+              value={reserve?.priceInUSD ?? 0}
+              precision={2}
+              prefix={'$'}
+            />
+          }
         />
       </SimpleTable>
 
@@ -156,6 +188,13 @@ export const BorrowForm: FC<BorrowFormProps> = () => {
       />
 
       <Button
+        onClick={async () => {
+          handleBorrow(
+            borrowSize,
+            await getAssetData(reserve!.symbol, BOB_CHAIN_ID),
+            BorrowRateMode.VARIABLE,
+          );
+        }}
         disabled={submitButtonDisabled}
         text={t(translations.common.buttons.confirm)}
       />
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.utils.ts b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.utils.ts
index f55b40d9e..7b5be4fbf 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.utils.ts
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.utils.ts
@@ -1,14 +1,34 @@
-import { MINIMUM_COLLATERAL_RATIO_LENDING_POOLS } from '../../../../../../../constants/lending';
+import { Decimal } from '@sovryn/utils';
 
-export const getCollateralRatioThresholds = () => {
-  // TODO: recheck this and adjust based on aave
-  const minimumCollateralRatio =
-    MINIMUM_COLLATERAL_RATIO_LENDING_POOLS.mul(100);
+import { Reserve } from '../../../../../../../hooks/aave/useAaveReservesData';
 
-  return {
+export const getCollateralRatioThresholds = (
+  reserve: Reserve | undefined,
+  eModeEnabled: boolean,
+) => {
+  let minimumCollateralRatio: Decimal;
+  if (reserve !== undefined) {
+    minimumCollateralRatio = eModeEnabled
+      ? Decimal.from(reserve.formattedEModeLiquidationThreshold)
+      : Decimal.from(reserve.formattedReserveLiquidationThreshold);
+  } else {
+    minimumCollateralRatio = Decimal.from(1);
+  }
+
+  const threeholds = {
     START: minimumCollateralRatio.mul(0.9).toNumber(),
-    MIDDLE_START: minimumCollateralRatio.toNumber() - 0.1,
+    MIDDLE_START: minimumCollateralRatio.toNumber(),
     MIDDLE_END: minimumCollateralRatio.mul(1.2).toNumber(),
     END: minimumCollateralRatio.mul(1.6).toNumber(),
   };
+
+  // rule of 3 basically END -> 100; {} -> x => x = {} * 100 / END
+  const scalingFactor = 100 / threeholds.END;
+
+  return {
+    START: threeholds.START * scalingFactor,
+    MIDDLE_START: threeholds.MIDDLE_START * scalingFactor,
+    MIDDLE_END: threeholds.MIDDLE_END * scalingFactor,
+    END: 100,
+  };
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowModalContainer.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowModalContainer.tsx
index 19427f36e..9a04e0f33 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowModalContainer.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowModalContainer.tsx
@@ -8,11 +8,13 @@ import { translations } from '../../../../../../../locales/i18n';
 import { BorrowForm } from './BorrowForm';
 
 type BorrowModalContainerProps = {
+  asset: string;
   isOpen: boolean;
   handleCloseModal: () => unknown;
 };
 
 export const BorrowModalContainer: FC<BorrowModalContainerProps> = ({
+  asset,
   isOpen,
   handleCloseModal,
 }) => {
@@ -23,7 +25,7 @@ export const BorrowModalContainer: FC<BorrowModalContainerProps> = ({
         onClose={handleCloseModal}
       />
       <DialogBody className="flex flex-col gap-6">
-        <BorrowForm onSuccess={handleCloseModal} />
+        <BorrowForm asset={asset} onSuccess={handleCloseModal} />
       </DialogBody>
     </Dialog>
   );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.tsx b/apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.tsx
index 1c430c2f6..a68ab4f17 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { FC, useEffect, useMemo } from 'react';
 
 import { t } from 'i18next';
 
@@ -28,13 +28,27 @@ export const CollateralRatioHealthBar: FC<CollateralRatioHealthBarProps> = ({
     [thresholds],
   );
 
+  useEffect(() => {
+    console.log(
+      collateralRatioThresholds.START.toString(),
+      collateralRatioThresholds.MIDDLE_START.toString(),
+      collateralRatioThresholds.MIDDLE_END.toString(),
+      collateralRatioThresholds.END.toString(),
+      ratio.toString(),
+    );
+  }, [collateralRatioThresholds, ratio]);
+
   return (
     <div className="py-3">
       <div className="flex flex-row justify-between items-center mb-3">
         <div className="flex flex-row justify-start items-center gap-2">
           <span>{t(translations.aavePage.common.collateralRatio)}</span>
         </div>
-        <AmountRenderer value={ratio.toString()} suffix="%" />
+        <AmountRenderer
+          value={ratio.mul(100).toString()}
+          suffix="%"
+          precision={2}
+        />
       </div>
 
       <HealthBar
@@ -42,7 +56,7 @@ export const CollateralRatioHealthBar: FC<CollateralRatioHealthBarProps> = ({
         middleStart={collateralRatioThresholds.MIDDLE_START}
         middleEnd={collateralRatioThresholds.MIDDLE_END}
         end={collateralRatioThresholds.END}
-        value={ratio.toNumber()}
+        value={ratio.mul(100).toNumber()}
       />
     </div>
   );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.utils.tsx b/apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.utils.tsx
index 43a108391..fb0b10ad4 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.utils.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.utils.tsx
@@ -1,7 +1,6 @@
 import { MINIMUM_COLLATERAL_RATIO_LENDING_POOLS } from '../../../../../constants/lending';
 
 export const getCollateralRatioThresholds = () => {
-  // TODO: recheck this and adjust based on aave
   const minimumCollateralRatio =
     MINIMUM_COLLATERAL_RATIO_LENDING_POOLS.mul(100);
 
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx
index 8da5a811d..e8634e515 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx
@@ -62,6 +62,7 @@ export const LendForm: FC<LendFormProps> = ({
             showAssetLogo
             asset={r.symbol}
             assetClassName="font-medium"
+            chainId={BOB_CHAIN_ID}
           />
         ),
       })),
diff --git a/apps/frontend/src/constants/aave.ts b/apps/frontend/src/constants/aave.ts
index a2b98da4e..868478285 100644
--- a/apps/frontend/src/constants/aave.ts
+++ b/apps/frontend/src/constants/aave.ts
@@ -1,7 +1,10 @@
 import { ethers } from 'ethers';
 
+import { Decimal } from '@sovryn/utils';
+
 export const config = {
   chainId: 137,
+  MinHealthFactor: Decimal.from('1.05'),
   PoolAddress: '0x794a61358D6845594F94dc1DB02A252b5b4814aD',
   WETHGatewayAddress: '0xC1E320966c485ebF2A0A2A6d3c0Dc860A156eB1B',
   VariableDebtWETHAddress: '0x4a1c3aD6Ed28a636ee1751C69071f6be75DEb8B8',
diff --git a/apps/frontend/src/hooks/aave/useAaveBorrow.tsx b/apps/frontend/src/hooks/aave/useAaveBorrow.tsx
new file mode 100644
index 000000000..a930a42f4
--- /dev/null
+++ b/apps/frontend/src/hooks/aave/useAaveBorrow.tsx
@@ -0,0 +1,58 @@
+import { useCallback, useMemo } from 'react';
+
+import { BigNumber } from 'ethers';
+import { t } from 'i18next';
+
+import { AssetDetailsData } from '@sovryn/contracts';
+import { Decimal } from '@sovryn/utils';
+
+import { config } from '../../constants/aave';
+import { useTransactionContext } from '../../contexts/TransactionContext';
+import { translations } from '../../locales/i18n';
+import {
+  AaveBorrowTransactionsFactory,
+  BorrowRateMode,
+} from '../../utils/aave/AaveBorrowTransactionsFactory';
+import { useAccount } from '../useAccount';
+
+export const useAaveBorrow = (props: {
+  onBegin?: () => void;
+  onComplete?: () => void;
+}) => {
+  const { signer } = useAccount();
+  const { setTransactions, setIsOpen, setTitle } = useTransactionContext();
+
+  const aaveBorrowTransactionsFactory = useMemo(() => {
+    if (!signer) return null;
+    return new AaveBorrowTransactionsFactory(
+      config.PoolAddress,
+      config.WETHGatewayAddress,
+      config.VariableDebtWETHAddress,
+      signer,
+    );
+  }, [signer]);
+
+  const handleBorrow = useCallback(
+    async (
+      amount: Decimal,
+      asset: AssetDetailsData,
+      rateMode: BorrowRateMode,
+    ) => {
+      if (!aaveBorrowTransactionsFactory) {
+        return;
+      }
+      const bnAmount = BigNumber.from(
+        amount.mul(Decimal.from(10).pow(asset.decimals)).toString(),
+      );
+
+      setTransactions(
+        await aaveBorrowTransactionsFactory.borrow(asset, bnAmount, rateMode),
+      );
+      setTitle(t(translations.aavePage.common.borrow));
+      setIsOpen(true);
+    },
+    [setIsOpen, setTitle, setTransactions, aaveBorrowTransactionsFactory],
+  );
+
+  return { handleBorrow };
+};
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index 35085da3e..c33dbc14d 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -813,7 +813,11 @@
             "supplyTitle": "Deposit {{symbol}} to the pool",
             "supplySubtitle": "Transfers {{amount}} {{symbol}} to the pool",
             "withdrawTitle": "Withdraw {{asset}} from the pool",
-            "withdrawSubtitle": "Transfer {{amount}} {{symbol}} from the pool"
+            "withdrawSubtitle": "Transfer {{amount}} {{symbol}} from the pool",
+            "borrowTitle": "Borrow {{symbol}} from the pool",
+            "borrowSubtitle": "Borrows {{amount}} {{symbol}} from the pool",
+            "approveBorrowDelegationTitle": "Approve borrow delegation",
+            "approveBorrowDelegationSubtitle": "Approve borrow delegation of {{amount}} {{symbol}} to the WETH gateway"
         },
         "topPanel": {
             "title": "Lend and borrow",
diff --git a/apps/frontend/src/utils/aave.ts b/apps/frontend/src/utils/aave.ts
index 626b04592..43f040300 100644
--- a/apps/frontend/src/utils/aave.ts
+++ b/apps/frontend/src/utils/aave.ts
@@ -44,6 +44,7 @@ export class AaveUserReservesSummary {
   public borrowWeightedApy: Decimal;
   public borrowPower: Decimal;
   public borrowPowerUsed: Decimal;
+  public currentLiquidationThreshold: Decimal;
   public suppliedAssets: SuppliedAsset[];
   public borrowedAssets: BorrowedAsset[];
   public eModeEnabled: boolean;
@@ -75,6 +76,9 @@ export class AaveUserReservesSummary {
     );
 
     // health and borrow status
+    this.currentLiquidationThreshold = Decimal.from(
+      this.userSummary.currentLiquidationThreshold,
+    );
     this.borrowPower = this.computeBorrowPower(
       Decimal.from(this.userSummary.availableBorrowsUSD),
       this.borrowBalance,
@@ -85,7 +89,7 @@ export class AaveUserReservesSummary {
     );
     this.healthFactor = this.computeHealthFactor(
       this.collateralBalance,
-      Decimal.from(this.userSummary.currentLiquidationThreshold),
+      this.currentLiquidationThreshold,
       this.borrowBalance,
     );
 
diff --git a/apps/frontend/src/utils/aave/AaveBorrowTransactionsFactory.ts b/apps/frontend/src/utils/aave/AaveBorrowTransactionsFactory.ts
new file mode 100644
index 000000000..691fd3e33
--- /dev/null
+++ b/apps/frontend/src/utils/aave/AaveBorrowTransactionsFactory.ts
@@ -0,0 +1,134 @@
+import { BigNumber, constants, ethers } from 'ethers';
+import { t } from 'i18next';
+
+import { AssetDetailsData, getAssetDataByAddress } from '@sovryn/contracts';
+
+import { BOB_CHAIN_ID } from '../../config/chains';
+
+import {
+  Transaction,
+  TransactionType,
+} from '../../app/3_organisms/TransactionStepDialog/TransactionStepDialog.types';
+import { translations } from '../../locales/i18n';
+
+export enum BorrowRateMode {
+  STABLE = 1,
+  VARIABLE = 2,
+}
+
+export class AaveBorrowTransactionsFactory {
+  private readonly Pool: ethers.Contract;
+  private readonly WETHGateway: ethers.Contract;
+  private readonly VariableDebtWETHToken: ethers.Contract;
+
+  constructor(
+    private readonly PoolAddress: string,
+    private readonly WETHGatewayAddress: string,
+    private readonly VariableDebtWETHAddress: string,
+    private readonly signer: ethers.Signer,
+  ) {
+    this.Pool = new ethers.Contract(
+      this.PoolAddress,
+      [
+        'function borrow(address asset, uint256 amount, uint256 interestRateMode, uint16 referralCode, address onBehalfOf)',
+      ],
+      this.signer,
+    );
+
+    this.WETHGateway = new ethers.Contract(
+      this.WETHGatewayAddress,
+      [
+        'function borrowETH(address pool, uint256 amount, uint256 interestRateMode, uint16 referralCode)',
+      ],
+      this.signer,
+    );
+
+    this.VariableDebtWETHToken = new ethers.Contract(
+      this.VariableDebtWETHAddress,
+      ['function approveDelegation(address delegatee, uint256 amount)'],
+      this.signer,
+    );
+  }
+
+  async borrow(
+    token: AssetDetailsData,
+    amount: BigNumber,
+    rateMode: BorrowRateMode,
+  ): Promise<Transaction[]> {
+    if (token.isNative) return this.borrowNative(amount, rateMode);
+    else return this.borrowToken(token, amount, rateMode);
+  }
+
+  private async borrowToken(
+    asset: AssetDetailsData,
+    amount: BigNumber,
+    rateMode: BorrowRateMode,
+  ): Promise<Transaction[]> {
+    return [
+      {
+        title: t(translations.aavePage.tx.borrowTitle, {
+          symbol: asset.symbol,
+        }),
+        subtitle: t(translations.aavePage.tx.borrowSubtitle, {
+          symbol: asset.symbol,
+          amount: ethers.utils.formatUnits(amount, asset.decimals),
+        }),
+        request: {
+          type: TransactionType.signTransaction,
+          args: [
+            asset.address,
+            amount.toString(),
+            rateMode,
+            0,
+            await this.signer.getAddress(),
+          ],
+          contract: this.Pool,
+          fnName: 'borrow',
+        },
+      },
+    ];
+  }
+
+  private async borrowNative(
+    amount: BigNumber,
+    rateMode: BorrowRateMode,
+  ): Promise<Transaction[]> {
+    const nativeAsset = await getAssetDataByAddress(
+      constants.AddressZero,
+      BOB_CHAIN_ID,
+    );
+
+    return [
+      {
+        title: t(translations.aavePage.tx.approveBorrowDelegationTitle, {
+          symbol: nativeAsset.symbol,
+        }),
+        subtitle: t(translations.aavePage.tx.approveBorrowDelegationSubtitle, {
+          symbol: nativeAsset.symbol,
+          amount: ethers.utils.formatUnits(amount, nativeAsset.decimals),
+        }),
+        request: {
+          type: TransactionType.signTransaction,
+          args: [this.WETHGatewayAddress, amount.toString()],
+          contract: this.VariableDebtWETHToken,
+          fnName: 'approveDelegation',
+        },
+      },
+      {
+        title: t(translations.aavePage.tx.borrowTitle, {
+          symbol: nativeAsset.symbol,
+        }),
+        subtitle: t(translations.aavePage.tx.borrowSubtitle, {
+          symbol: nativeAsset.symbol,
+          amount: ethers.utils.formatUnits(amount, nativeAsset.decimals),
+        }),
+        request: {
+          type: TransactionType.signTransaction,
+          args: [this.PoolAddress, amount.toString(), rateMode, 0],
+          contract: this.WETHGateway,
+          fnName: 'borrowETH',
+        },
+      },
+    ];
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 8be9694db..374dea6da 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10045,6 +10045,11 @@ chart.js@4.1.1:
   dependencies:
     "@kurkle/color" "^0.3.0"
 
+chartjs-adapter-date-fns@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-3.0.0.tgz#c25f63c7f317c1f96f9a7c44bd45eeedb8a478e5"
+  integrity sha512-Rs3iEB3Q5pJ973J93OBTpnP7qoGwvq3nUnoMdtxO+9aoJof7UFcRbWcIDteXuYd1fgAvct/32T9qaLyLuZVwCg==
+
 check-types@^11.1.1:
   version "11.2.2"
   resolved "https://registry.yarnpkg.com/check-types/-/check-types-11.2.2.tgz#7afc0b6a860d686885062f2dba888ba5710335b4"
@@ -21617,7 +21622,14 @@ run-queue@^1.0.0, run-queue@^1.0.3:
   dependencies:
     aproba "^1.1.1"
 
-rxjs@6, rxjs@7.5.6, rxjs@^7.5.5, rxjs@^7.5.6:
+rxjs@6:
+  version "6.6.7"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
+  integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
+  dependencies:
+    tslib "^1.9.0"
+
+rxjs@7.5.6, rxjs@^7.5.5, rxjs@^7.5.6:
   version "7.5.6"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.5.6.tgz#0446577557862afd6903517ce7cae79ecb9662bc"
   integrity sha512-dnyv2/YsXhnm461G+R/Pe5bWP41Nm6LBXEYWI6eiFP4fiwx6WRI/CD0zbdVAudd9xwLEF2IDcKXLHit0FYjUzw==
@@ -23502,7 +23514,7 @@ tsconfig-paths@^3.14.1:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@1.14.1, tslib@^1.13.0, tslib@^1.8.1, tslib@^1.9.3:
+tslib@1.14.1, tslib@^1.13.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==

From 63767a6aa075425f58c6b801de2ffe9fc2a6659b Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Mon, 26 Aug 2024 09:14:59 -0300
Subject: [PATCH 053/116] Repay integration (#26)

* calculations

* aave repay transaction factory and hook
cleanup and fixes

* use CollateralRatioHealthBar
replace health rate with collateral rate
---
 .../AmountRenderer/AmountRenderer.tsx         |   4 +
 .../src/app/5_pages/AavePage/AavePage.tsx     |   2 +-
 .../BorrowAssetsList.constants.tsx            |   5 +-
 .../BorrowPositionsList.constants.tsx         |  12 +-
 .../BorrowPositionsList.types.tsx             |   5 +-
 .../BorrowPositionAction.tsx                  |   5 +-
 .../BorrowPositionDetails.tsx                 |   7 +-
 .../RepayModal/RepayModalContainer.tsx        |   8 +-
 .../RepayModal/RepayWithWalletBalanceForm.tsx | 175 +++++++++----
 .../CollateralRatioHealthBar.tsx              |  13 +-
 .../LendAssetsList.constants.tsx              |   5 +-
 apps/frontend/src/hooks/aave/useAaveRepay.tsx |  51 ++++
 .../hooks/aave/useAaveUserReservesData.tsx    |   2 +-
 .../frontend/src/locales/en/translations.json |  10 +-
 apps/frontend/src/utils/aave.ts               | 244 ------------------
 .../aave/AaveRepayTransactionsFactory.ts      | 113 ++++++++
 .../src/utils/aave/AaveUserReservesSummary.ts |  18 +-
 17 files changed, 357 insertions(+), 322 deletions(-)
 create mode 100644 apps/frontend/src/hooks/aave/useAaveRepay.tsx
 delete mode 100644 apps/frontend/src/utils/aave.ts
 create mode 100644 apps/frontend/src/utils/aave/AaveRepayTransactionsFactory.ts

diff --git a/apps/frontend/src/app/2_molecules/AmountRenderer/AmountRenderer.tsx b/apps/frontend/src/app/2_molecules/AmountRenderer/AmountRenderer.tsx
index 0994b2fcd..9b2fef6b3 100644
--- a/apps/frontend/src/app/2_molecules/AmountRenderer/AmountRenderer.tsx
+++ b/apps/frontend/src/app/2_molecules/AmountRenderer/AmountRenderer.tsx
@@ -42,6 +42,7 @@ export type AmountRendererProps = {
   trigger?: TooltipTrigger;
   decimals?: number;
   asIf?: boolean;
+  infiniteFrom?: Decimalish;
 };
 
 export const AmountRenderer: FC<AmountRendererProps> = ({
@@ -57,6 +58,7 @@ export const AmountRenderer: FC<AmountRendererProps> = ({
   trigger = TooltipTrigger.click,
   decimals = 18,
   asIf,
+  infiniteFrom,
 }) => {
   const adjustedValue = useMemo(
     () =>
@@ -158,6 +160,8 @@ export const AmountRenderer: FC<AmountRendererProps> = ({
           prefix={shouldShowRoundingPrefix ? `~ ${prefix}` : `${prefix}`}
           suffix={` ${suffix}`}
         />
+      ) : infiniteFrom && Decimal.from(value).gt(infiniteFrom) ? (
+        <span>∞</span>
       ) : (
         <span>
           {shouldShowRoundingPrefix ? '~ ' : ''}
diff --git a/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx b/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
index 94ae01cb0..7957ccd2d 100644
--- a/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
@@ -50,7 +50,7 @@ const AavePage: FC = () => {
       apy: ba.apy,
       borrowed: ba.borrowed,
       borrowedUSD: ba.borrowedUSD,
-      apyType: ba.apyType,
+      type: ba.type,
     }));
   }, [userReservesSummary]);
 
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
index 52d165e1f..26de062ce 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
@@ -4,12 +4,14 @@ import { t } from 'i18next';
 
 import { Align, HelperButton } from '@sovryn/ui';
 
+import { BOB_CHAIN_ID } from '../../../../../config/chains';
+
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
+import { AssetAmountPriceRenderer } from '../../../../2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer';
 import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
 import { translations } from '../../../../../locales/i18n';
 import { BorrowPoolDetails } from './BorrowAssetsList.types';
 import { BorrowAssetAction } from './components/BorrowAssetAction/BorrowAssetAction';
-import { AssetAmountPriceRenderer } from '../../../../2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer';
 
 const pageTranslations = translations.aavePage;
 
@@ -26,6 +28,7 @@ export const COLUMNS_CONFIG = [
         dataAttribute="borrow-asset"
         showAssetLogo
         asset={pool.asset}
+        chainId={BOB_CHAIN_ID}
         className="lg:justify-start justify-end"
         logoClassName="[&>svg]:h-8 [&>svg]:w-8 [&>svg]:mr-[10px]"
       />
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
index d8c35afce..979f9a652 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
@@ -4,9 +4,12 @@ import { t } from 'i18next';
 
 import { Align, HelperButton } from '@sovryn/ui';
 
+import { BOB_CHAIN_ID } from '../../../../../config/chains';
+
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
 import { translations } from '../../../../../locales/i18n';
+import { LoanType } from '../../../../../utils/aave/AaveUserReservesSummary';
 import { BorrowPosition } from './BorrowPositionsList.types';
 import { BorrowPositionAction } from './components/BorrowPositionAction/BorrowPositionAction';
 
@@ -25,6 +28,7 @@ export const COLUMNS_CONFIG = [
         dataAttribute="borrow-asset"
         showAssetLogo
         asset={position.asset}
+        chainId={BOB_CHAIN_ID}
         className="lg:justify-start justify-end"
         logoClassName="[&>svg]:h-8 [&>svg]:w-8 [&>svg]:mr-[10px]"
       />
@@ -71,7 +75,13 @@ export const COLUMNS_CONFIG = [
       </span>
     ),
     cellRenderer: (position: BorrowPosition) => (
-      <span>{t(pageTranslations.common[position.apyType])}</span>
+      <span>
+        {t(
+          pageTranslations.common[
+            position.type === LoanType.STABLE ? 'stable' : 'variable'
+          ],
+        )}
+      </span>
     ),
   },
   {
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.types.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.types.tsx
index 2c9d3d773..8445cf994 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.types.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.types.tsx
@@ -1,10 +1,11 @@
 import { Decimal } from '@sovryn/utils';
-import { ApyType } from '../../../../../utils/aave/AaveUserReservesSummary';
+
+import { LoanType } from '../../../../../utils/aave/AaveUserReservesSummary';
 
 export type BorrowPosition = {
   asset: string;
   borrowed: Decimal;
   borrowedUSD: Decimal;
   apy: Decimal;
-  apyType: ApyType;
+  type: LoanType;
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionAction/BorrowPositionAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionAction/BorrowPositionAction.tsx
index 598c50bc4..570f58512 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionAction/BorrowPositionAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionAction/BorrowPositionAction.tsx
@@ -12,7 +12,9 @@ type BorrowPositionActionProps = {
   position: BorrowPosition;
 };
 
-export const BorrowPositionAction: FC<BorrowPositionActionProps> = () => {
+export const BorrowPositionAction: FC<BorrowPositionActionProps> = ({
+  position,
+}) => {
   const [isRepayModalOpen, setIsRepayModalOpen] = useState<boolean>(false);
 
   const handleRepayClick = useCallback(() => {
@@ -33,6 +35,7 @@ export const BorrowPositionAction: FC<BorrowPositionActionProps> = () => {
       />
 
       <RepayModalContainer
+        asset={position.asset}
         handleCloseModal={handleRepayClose}
         isOpen={isRepayModalOpen}
       />
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
index 6a2ca15c7..bc95fef97 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
@@ -7,6 +7,7 @@ import { HelperButton, SimpleTableRow } from '@sovryn/ui';
 import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { AssetAmountPriceRenderer } from '../../../../../../2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer';
 import { translations } from '../../../../../../../locales/i18n';
+import { LoanType } from '../../../../../../../utils/aave/AaveUserReservesSummary';
 import { BorrowPosition } from '../../BorrowPositionsList.types';
 import { BorrowPositionAction } from '../BorrowPositionAction/BorrowPositionAction';
 
@@ -48,7 +49,11 @@ export const BorrowPositionDetails: FC<BorrowPositionDetailsProps> = ({
         {/* Apy type */}
         <SimpleTableRow
           label={t(translations.aavePage.common.apyType)}
-          value={t(translations.aavePage.common[position.apyType])}
+          value={t(
+            translations.aavePage.common[
+              position.type === LoanType.STABLE ? 'stable' : 'variable'
+            ],
+          )}
         />
       </div>
 
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx
index 146c4effc..9664910b6 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx
@@ -17,6 +17,7 @@ import { RepayWithCollateralForm } from './RepayWithCollateralForm';
 import { RepayWithWalletBalanceForm } from './RepayWithWalletBalanceForm';
 
 type RepayModalContainerProps = {
+  asset: string;
   isOpen: boolean;
   handleCloseModal: () => unknown;
 };
@@ -27,6 +28,7 @@ enum RepayWith {
 }
 
 export const RepayModalContainer: FC<RepayModalContainerProps> = ({
+  asset,
   isOpen,
   handleCloseModal,
 }) => {
@@ -61,13 +63,17 @@ export const RepayModalContainer: FC<RepayModalContainerProps> = ({
               activeClassName: 'text-primary-20',
               dataAttribute: 'collateral',
               label: t(translations.aavePage.common.collateral),
+              disabled: true,
             },
           ]}
           type={TabType.secondary}
         />
 
         {activeTab === RepayWith.BALANCE ? (
-          <RepayWithWalletBalanceForm onSuccess={handleCloseModal} />
+          <RepayWithWalletBalanceForm
+            asset={asset}
+            onSuccess={handleCloseModal}
+          />
         ) : (
           <RepayWithCollateralForm onSuccess={handleCloseModal} />
         )}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx
index 9dda5864d..b1efc2e4e 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx
@@ -2,6 +2,7 @@ import React, { FC, useMemo, useState } from 'react';
 
 import { t } from 'i18next';
 
+import { getAssetData } from '@sovryn/contracts';
 import {
   Button,
   ErrorBadge,
@@ -11,9 +12,16 @@ import {
 } from '@sovryn/ui';
 import { Decimal } from '@sovryn/utils';
 
+import { BOB_CHAIN_ID } from '../../../../../../../config/chains';
+
 import { AmountTransition } from '../../../../../../2_molecules/AmountTransition/AmountTransition';
 import { AssetAmountInput } from '../../../../../../2_molecules/AssetAmountInput/AssetAmountInput';
 import { AssetRenderer } from '../../../../../../2_molecules/AssetRenderer/AssetRenderer';
+import { useAaveRepay } from '../../../../../../../hooks/aave/useAaveRepay';
+import { useAaveReservesData } from '../../../../../../../hooks/aave/useAaveReservesData';
+import { useAaveUserReservesData } from '../../../../../../../hooks/aave/useAaveUserReservesData';
+import { useAccount } from '../../../../../../../hooks/useAccount';
+import { useAssetBalance } from '../../../../../../../hooks/useAssetBalance';
 import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
 import { translations } from '../../../../../../../locales/i18n';
 import { CollateralRatioHealthBar } from '../../../CollateralRatioHealthBar/CollateralRatioHealthBar';
@@ -21,52 +29,95 @@ import { CollateralRatioHealthBar } from '../../../CollateralRatioHealthBar/Coll
 const pageTranslations = translations.aavePage;
 
 type RepayWithWalletBalanceFormProps = {
+  asset: string;
   onSuccess: () => unknown;
 };
 
 export const RepayWithWalletBalanceForm: FC<
   RepayWithWalletBalanceFormProps
-> = () => {
-  const totalBorrowed = Decimal.from(10); // TODO: this is mocked data. Replace with proper hook
-  const collateralToLoanRate = Decimal.from(10); // TODO: this is mocked data. Replace with proper hook
-  const collateralSize = Decimal.from(10); // TODO: this is mockd data. Replace with proper hook
-  const assetsToRepay = useMemo(() => ['BTC', 'SOV'], []); // TODO: this is mocked data. Replace with proper hook
-  const [maximumRepayAmount] = useState(Decimal.from(10)); // TODO: this is mocked data. Replace with proper hook
-  const [repayAsset, setRepayAsset] = useState<string>(assetsToRepay[0]);
+> = ({ asset }) => {
+  const { account } = useAccount();
+  const { handleRepay } = useAaveRepay({});
+  const reserves = useAaveReservesData();
+  const userReservesSummary = useAaveUserReservesData();
+  const [repayAsset, setRepayAsset] = useState<string>(asset);
   const [repayAmount, setRepayAmount, repaySize] = useDecimalAmountInput('');
+  const { balance: repayAssetBalance } = useAssetBalance(
+    repayAsset,
+    BOB_CHAIN_ID,
+    account,
+  );
 
   const repayAssetsOptions = useMemo(
     () =>
-      assetsToRepay.map(token => ({
-        value: token,
-        label: (
-          <AssetRenderer
-            showAssetLogo
-            asset={token}
-            assetClassName="font-medium"
-          />
-        ),
-      })),
-    [assetsToRepay],
+      userReservesSummary
+        ? userReservesSummary.borrowedAssets.map(ba => ({
+            value: ba.asset,
+            label: (
+              <AssetRenderer
+                showAssetLogo
+                asset={ba.asset}
+                assetClassName="font-medium"
+                chainId={BOB_CHAIN_ID}
+              />
+            ),
+          }))
+        : [],
+    [userReservesSummary],
   );
 
-  const isValidRepayAmount = useMemo(
-    () => (repaySize.gt(0) ? repaySize.lte(maximumRepayAmount) : true),
-    [repaySize, maximumRepayAmount],
-  );
+  const debt = useMemo(() => {
+    return userReservesSummary?.borrowedAssets.find(
+      a => a.asset === repayAsset,
+    );
+  }, [userReservesSummary, repayAsset]);
+
+  const maximumRepayAmount = useMemo(() => {
+    return debt
+      ? debt.borrowed.gt(repayAssetBalance)
+        ? repayAssetBalance
+        : debt.borrowed
+      : Decimal.from(0);
+  }, [debt, repayAssetBalance]);
+
+  const reserve = useMemo(() => {
+    return reserves.find(r => r.symbol === repayAsset);
+  }, [reserves, repayAsset]);
+
+  const repayUsdAmount = useMemo(() => {
+    return repaySize.mul(reserve?.priceInUSD ?? 0);
+  }, [repaySize, reserve]);
+
+  const newDebtAmount = useMemo(() => {
+    const nd = debt?.borrowed ? debt.borrowed.sub(repaySize) : Decimal.from(0);
+    return nd.gt(0) ? nd : Decimal.from(0);
+  }, [debt, repaySize]);
+
+  const newDebtAmountUSD = useMemo(() => {
+    return newDebtAmount.mul(reserve?.priceInUSD ?? 0);
+  }, [newDebtAmount, reserve]);
 
   const collateralRatio = useMemo(() => {
-    if ([collateralSize, totalBorrowed, repaySize].some(v => v.isZero())) {
-      return Decimal.from(0);
-    }
+    if (!userReservesSummary) return Decimal.from(0);
+
+    return userReservesSummary.healthFactor.div(
+      userReservesSummary.currentLiquidationThreshold,
+    );
+  }, [userReservesSummary]);
 
-    return collateralSize.mul(collateralToLoanRate).div(totalBorrowed).mul(100);
-  }, [collateralSize, totalBorrowed, repaySize, collateralToLoanRate]);
+  const newCollateralRatio = useMemo(() => {
+    if (!userReservesSummary) return Decimal.from(0);
+    if (newDebtAmountUSD.eq(0)) return Decimal.from('100000000');
 
-  // TODO: Add validations
-  const submitButtonDisabled = useMemo(
-    () => !isValidRepayAmount || repaySize.lte(0),
-    [isValidRepayAmount, repaySize],
+    const newHealthFactor = userReservesSummary.healthFactor
+      .mul(userReservesSummary.borrowBalance)
+      .div(newDebtAmountUSD);
+    return newHealthFactor.div(userReservesSummary.currentLiquidationThreshold);
+  }, [userReservesSummary, newDebtAmountUSD]);
+
+  const isValidRepayAmount = useMemo(
+    () => (repaySize.gt(0) ? repaySize.lte(maximumRepayAmount) : true),
+    [repaySize, maximumRepayAmount],
   );
 
   return (
@@ -79,6 +130,7 @@ export const RepayWithWalletBalanceForm: FC<
           onAmountChange={setRepayAmount}
           invalid={!isValidRepayAmount}
           assetValue={repayAsset}
+          assetUsdValue={repayUsdAmount}
           onAssetChange={setRepayAsset}
           assetOptions={repayAssetsOptions}
         />
@@ -92,41 +144,70 @@ export const RepayWithWalletBalanceForm: FC<
         )}
       </div>
 
-      <CollateralRatioHealthBar ratio={collateralRatio} />
+      <CollateralRatioHealthBar ratio={newCollateralRatio} />
 
       <SimpleTable>
         <SimpleTableRow
           label={t(translations.aavePage.repayModal.remainingDebt)}
-          value={
-            <AmountTransition
-              className="justify-end"
-              from={{ value: 0.002429, suffix: '%' }}
-              to={{ value: 0, suffix: '%', className: 'text-primary-10' }}
-            />
-          }
-        />
-        <SimpleTableRow
-          label={t(translations.aavePage.repayModal.newCollateralBalance)}
           value={
             <div className="space-y-1">
               <AmountTransition
                 className="justify-end"
-                from={{ value: 10, suffix: 'USDT' }}
-                to={{ value: 10, suffix: 'USDT' }}
+                from={{
+                  precision: 2,
+                  value: debt?.borrowed ?? Decimal.from(0),
+                  suffix: repayAsset,
+                }}
+                to={{ value: newDebtAmount, suffix: repayAsset, precision: 2 }}
               />
               <AmountTransition
                 className="justify-end text-gray-40"
-                from={{ value: 10, prefix: '$' }}
-                to={{ value: 10, prefix: '$' }}
+                from={{
+                  precision: 2,
+                  value: debt?.borrowedUSD ?? Decimal.from(0),
+                  prefix: '$',
+                }}
+                to={{
+                  precision: 2,
+                  value: newDebtAmountUSD,
+                  prefix: '$',
+                }}
               />
             </div>
           }
         />
+        <SimpleTableRow
+          label={t(translations.aavePage.common.collateralRatio)}
+          value={
+            <AmountTransition
+              className="justify-end"
+              from={{
+                value: collateralRatio.mul(100),
+                suffix: '%',
+                precision: 2,
+              }}
+              to={{
+                precision: 2,
+                value: newCollateralRatio.mul(100),
+                suffix: '%',
+                className: 'text-primary-10',
+                infiniteFrom: Decimal.from('10000'),
+              }}
+            />
+          }
+        />
       </SimpleTable>
 
       <Button
-        disabled={submitButtonDisabled}
+        disabled={!isValidRepayAmount}
         text={t(translations.common.buttons.confirm)}
+        onClick={async () => {
+          handleRepay(
+            repaySize,
+            await getAssetData(repayAsset, BOB_CHAIN_ID),
+            debt!.type,
+          );
+        }}
       />
     </form>
   );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.tsx b/apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.tsx
index a68ab4f17..d9cdfeded 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useMemo } from 'react';
+import React, { FC, useMemo } from 'react';
 
 import { t } from 'i18next';
 
@@ -28,16 +28,6 @@ export const CollateralRatioHealthBar: FC<CollateralRatioHealthBarProps> = ({
     [thresholds],
   );
 
-  useEffect(() => {
-    console.log(
-      collateralRatioThresholds.START.toString(),
-      collateralRatioThresholds.MIDDLE_START.toString(),
-      collateralRatioThresholds.MIDDLE_END.toString(),
-      collateralRatioThresholds.END.toString(),
-      ratio.toString(),
-    );
-  }, [collateralRatioThresholds, ratio]);
-
   return (
     <div className="py-3">
       <div className="flex flex-row justify-between items-center mb-3">
@@ -48,6 +38,7 @@ export const CollateralRatioHealthBar: FC<CollateralRatioHealthBarProps> = ({
           value={ratio.mul(100).toString()}
           suffix="%"
           precision={2}
+          infiniteFrom={10000}
         />
       </div>
 
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
index fcf7d7207..953669bfe 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
@@ -4,12 +4,14 @@ import { t } from 'i18next';
 
 import { Align, HelperButton, Icon, IconNames } from '@sovryn/ui';
 
+import { BOB_CHAIN_ID } from '../../../../../config/chains';
+
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
 import { translations } from '../../../../../locales/i18n';
 import { LendPoolDetails } from './LendAssetsList.types';
-import { LendAssetAction } from './components/LendAssetAction/LendAssetAction';
 import { AssetBalanceRenderer } from './components/AssetBalance/AssetBalance';
+import { LendAssetAction } from './components/LendAssetAction/LendAssetAction';
 
 const pageTranslations = translations.aavePage;
 
@@ -24,6 +26,7 @@ export const COLUMNS_CONFIG = [
     cellRenderer: (pool: LendPoolDetails) => (
       <AssetRenderer
         dataAttribute="borrow-asset"
+        chainId={BOB_CHAIN_ID}
         showAssetLogo
         asset={pool.asset}
         className="lg:justify-start justify-end"
diff --git a/apps/frontend/src/hooks/aave/useAaveRepay.tsx b/apps/frontend/src/hooks/aave/useAaveRepay.tsx
new file mode 100644
index 000000000..6bd2ff40e
--- /dev/null
+++ b/apps/frontend/src/hooks/aave/useAaveRepay.tsx
@@ -0,0 +1,51 @@
+import { useCallback, useMemo } from 'react';
+
+import { BigNumber } from 'ethers';
+import { t } from 'i18next';
+
+import { AssetDetailsData } from '@sovryn/contracts';
+import { Decimal } from '@sovryn/utils';
+
+import { config } from '../../constants/aave';
+import { useTransactionContext } from '../../contexts/TransactionContext';
+import { translations } from '../../locales/i18n';
+import { AaveRepayTransactionsFactory } from '../../utils/aave/AaveRepayTransactionsFactory';
+import { LoanType } from '../../utils/aave/AaveUserReservesSummary';
+import { useAccount } from '../useAccount';
+
+export const useAaveRepay = (props: {
+  onBegin?: () => void;
+  onComplete?: () => void;
+}) => {
+  const { signer } = useAccount();
+  const { setTransactions, setIsOpen, setTitle } = useTransactionContext();
+
+  const aaveRepayTransactionsFactory = useMemo(() => {
+    if (!signer) return null;
+    return new AaveRepayTransactionsFactory(
+      config.PoolAddress,
+      config.WETHGatewayAddress,
+      signer,
+    );
+  }, [signer]);
+
+  const handleRepay = useCallback(
+    async (amount: Decimal, asset: AssetDetailsData, loanType: LoanType) => {
+      if (!aaveRepayTransactionsFactory) {
+        return;
+      }
+      const bnAmount = BigNumber.from(
+        amount.mul(Decimal.from(10).pow(asset.decimals)).toString(),
+      );
+
+      setTransactions(
+        await aaveRepayTransactionsFactory.repay(asset, bnAmount, loanType),
+      );
+      setTitle(t(translations.common.buttons.repay));
+      setIsOpen(true);
+    },
+    [setIsOpen, setTitle, setTransactions, aaveRepayTransactionsFactory],
+  );
+
+  return { handleRepay };
+};
diff --git a/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx b/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx
index b89474fd9..b110be088 100644
--- a/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx
@@ -8,7 +8,7 @@ import dayjs from 'dayjs';
 import { BOB_CHAIN_ID } from '../../config/chains';
 
 import { config } from '../../constants/aave';
-import { AaveUserReservesSummary } from '../../utils/aave';
+import { AaveUserReservesSummary } from '../../utils/aave/AaveUserReservesSummary';
 import { useCachedData } from '../useCachedData';
 
 type UserReservesData = AaveUserReservesSummary | null;
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index c33dbc14d..b0fe65367 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -24,7 +24,8 @@
             "skip": "Skip",
             "back": "Back",
             "enable": "Enable",
-            "disable": "Disable"
+            "disable": "Disable",
+            "repay": "Repay"
         },
         "na": "N/A",
         "tables": {
@@ -807,13 +808,16 @@
             "lend": "Lend",
             "variable": "Variable",
             "fixed": "Fixed",
-            "withdraw": "Withdraw"
+            "withdraw": "Withdraw",
+            "healthFactor": "Health factor"
         },
         "tx": {
             "supplyTitle": "Deposit {{symbol}} to the pool",
             "supplySubtitle": "Transfers {{amount}} {{symbol}} to the pool",
             "withdrawTitle": "Withdraw {{asset}} from the pool",
             "withdrawSubtitle": "Transfer {{amount}} {{symbol}} from the pool",
+            "repayTitle":"Repay loan",
+            "repaySubtitle": "Repay {{amount}} {{symbol}} to the pool",
             "borrowTitle": "Borrow {{symbol}} from the pool",
             "borrowSubtitle": "Borrows {{amount}} {{symbol}} from the pool",
             "approveBorrowDelegationTitle": "Approve borrow delegation",
@@ -823,7 +827,7 @@
             "title": "Lend and borrow",
             "subtitle": "Borrow and earn interest by providing liquidity",
             "netWorth": "Net worth",
-            "netApy": "Net API",
+            "netApy": "Net APY",
             "netApyInfo": "Net APY is the combined effect of all supply and borrow positions on net worth, including incentives. It is possible to have a negative net APY if debt APY is higher than supply APY.",
             "healthFactor": "Health factor",
             "viewTransactions": "View transactions"
diff --git a/apps/frontend/src/utils/aave.ts b/apps/frontend/src/utils/aave.ts
deleted file mode 100644
index 43f040300..000000000
--- a/apps/frontend/src/utils/aave.ts
+++ /dev/null
@@ -1,244 +0,0 @@
-import { ReserveDataHumanized } from '@aave/contract-helpers';
-import {
-  FormatReserveUSDResponse,
-  FormatUserSummaryResponse,
-} from '@aave/math-utils';
-
-import { Decimal } from '@sovryn/utils';
-
-type UserSummary = FormatUserSummaryResponse<
-  ReserveDataHumanized & FormatReserveUSDResponse
->;
-
-export enum ApyType {
-  VARIABLE = 'variable',
-  STABLE = 'stable',
-}
-
-export type SuppliedAsset = {
-  asset: string;
-  assetAddress: string;
-  apy: Decimal;
-  isCollateral: boolean;
-  supplied: Decimal;
-  suppliedUSD: Decimal;
-};
-
-export type BorrowedAsset = {
-  asset: string;
-  assetAddress: string;
-  apy: Decimal;
-  apyType: ApyType;
-  borrowed: Decimal;
-  borrowedUSD: Decimal;
-};
-
-export class AaveUserReservesSummary {
-  public netWorth: Decimal;
-  public netApy: Decimal;
-  public healthFactor: Decimal;
-  public supplyBalance: Decimal; // OK
-  public supplyWeightedApy: Decimal;
-  public collateralBalance: Decimal;
-  public borrowBalance: Decimal;
-  public borrowWeightedApy: Decimal;
-  public borrowPower: Decimal;
-  public borrowPowerUsed: Decimal;
-  public currentLiquidationThreshold: Decimal;
-  public suppliedAssets: SuppliedAsset[];
-  public borrowedAssets: BorrowedAsset[];
-  public eModeEnabled: boolean;
-
-  constructor(private readonly userSummary: UserSummary) {
-    // balances
-    this.netWorth = Decimal.from(this.userSummary.netWorthUSD);
-    this.borrowBalance = Decimal.from(this.userSummary.totalBorrowsUSD);
-    this.supplyBalance = this.computeSuppliedBalance(
-      this.userSummary.userReservesData,
-    );
-    this.collateralBalance = this.computeCollateral(
-      this.userSummary.userReservesData,
-    );
-
-    // apy
-    this.supplyWeightedApy = this.computeWeightedSupplyApy(
-      this.userSummary.userReservesData,
-    );
-    this.borrowWeightedApy = this.computeWeightedBorrowApy(
-      this.userSummary.userReservesData,
-    );
-    this.netApy = this.computeNetApy(
-      this.supplyWeightedApy,
-      this.supplyBalance,
-      this.borrowWeightedApy,
-      this.borrowBalance,
-      this.netWorth,
-    );
-
-    // health and borrow status
-    this.currentLiquidationThreshold = Decimal.from(
-      this.userSummary.currentLiquidationThreshold,
-    );
-    this.borrowPower = this.computeBorrowPower(
-      Decimal.from(this.userSummary.availableBorrowsUSD),
-      this.borrowBalance,
-    );
-    this.borrowPowerUsed = this.computeBorrowPowerUsed(
-      this.borrowBalance,
-      this.borrowPower,
-    );
-    this.healthFactor = this.computeHealthFactor(
-      this.collateralBalance,
-      this.currentLiquidationThreshold,
-      this.borrowBalance,
-    );
-
-    // supplied and borrowed assets
-    this.suppliedAssets = this.computeSuppliedAssets(
-      this.userSummary.userReservesData,
-    );
-    this.borrowedAssets = this.computeBorrowedAssets(
-      this.userSummary.userReservesData,
-    );
-
-    // emode
-    this.eModeEnabled = this.userSummary.userEmodeCategoryId !== 0;
-  }
-
-  static from(
-    userSummary: FormatUserSummaryResponse<
-      ReserveDataHumanized & FormatReserveUSDResponse
-    >,
-  ) {
-    return new AaveUserReservesSummary(userSummary);
-  }
-
-  private computeNetApy(
-    weightedSupplyApy: Decimal,
-    suppliedBalance: Decimal,
-    weightedBorrowApy: Decimal,
-    borrowedBalance: Decimal,
-    netWorthUsd: Decimal,
-  ): Decimal {
-    return weightedSupplyApy
-      .mul(suppliedBalance)
-      .div(netWorthUsd)
-      .sub(weightedBorrowApy.mul(borrowedBalance).div(netWorthUsd));
-  }
-
-  private computeSuppliedBalance(
-    reserves: UserSummary['userReservesData'],
-  ): Decimal {
-    return reserves.reduce(
-      (suppliedBalance, r) => suppliedBalance.add(r.underlyingBalanceUSD),
-      Decimal.from(0),
-    );
-  }
-
-  private computeBorrowPower(
-    availableBorrowsUSD: Decimal,
-    borrowedBalance: Decimal,
-  ) {
-    return Decimal.from(availableBorrowsUSD).add(borrowedBalance);
-  }
-
-  private computeBorrowPowerUsed(
-    borrowedBalance: Decimal,
-    borrowPower: Decimal,
-  ) {
-    if (borrowPower.eq(0)) return Decimal.from(0);
-    return Decimal.from(borrowedBalance).div(borrowPower).mul(100);
-  }
-
-  private computeCollateral(
-    reserves: UserSummary['userReservesData'],
-  ): Decimal {
-    return reserves.reduce(
-      (collateral, r) =>
-        collateral.add(
-          r.usageAsCollateralEnabledOnUser ? r.underlyingBalanceUSD : 0,
-        ),
-      Decimal.from(0),
-    );
-  }
-
-  private computeHealthFactor(
-    collateral: Decimal,
-    currentLiquidationThreshold: Decimal,
-    borrowedBalance: Decimal,
-  ): Decimal {
-    if (borrowedBalance.eq(0)) return Decimal.from(0);
-    return collateral.mul(currentLiquidationThreshold).div(borrowedBalance);
-  }
-
-  private computeWeightedBorrowApy(
-    reserves: UserSummary['userReservesData'],
-  ): Decimal {
-    let totalBorrowedUSD = Decimal.from(0);
-    let weightedBorrowAPYSum = Decimal.from(0);
-
-    reserves.forEach(reserve => {
-      const borrowedAmountUSD = Decimal.from(reserve.totalBorrowsUSD);
-      const borrowAPY = Decimal.from(reserve.reserve.variableBorrowAPY);
-
-      weightedBorrowAPYSum = weightedBorrowAPYSum.add(
-        borrowAPY.mul(borrowedAmountUSD),
-      );
-      totalBorrowedUSD = totalBorrowedUSD.add(borrowedAmountUSD);
-    });
-
-    if (totalBorrowedUSD.eq(0)) return Decimal.from(0);
-    return weightedBorrowAPYSum.div(totalBorrowedUSD).mul(100);
-  }
-
-  private computeWeightedSupplyApy(
-    reserves: UserSummary['userReservesData'],
-  ): Decimal {
-    let totalBorrowedUSD = Decimal.from(0);
-    let weightedBorrowAPYSum = Decimal.from(0);
-
-    reserves.forEach(reserve => {
-      const borrowedAmountUSD = Decimal.from(reserve.totalBorrowsUSD);
-      const borrowAPY = Decimal.from(reserve.reserve.supplyAPY);
-
-      weightedBorrowAPYSum = weightedBorrowAPYSum.add(
-        borrowAPY.mul(borrowedAmountUSD),
-      );
-      totalBorrowedUSD = totalBorrowedUSD.add(borrowedAmountUSD);
-    });
-
-    if (totalBorrowedUSD.eq(0)) return Decimal.from(0);
-    return weightedBorrowAPYSum.div(totalBorrowedUSD).mul(100);
-  }
-
-  private computeSuppliedAssets(
-    reserves: UserSummary['userReservesData'],
-  ): SuppliedAsset[] {
-    return reserves
-      .filter(r => Decimal.from(r.underlyingBalanceUSD).gt(0))
-      .map(r => ({
-        asset: r.reserve.symbol,
-        assetAddress: r.underlyingAsset,
-        apy: Decimal.from(r.reserve.supplyAPY).mul(100),
-        isCollateral: r.usageAsCollateralEnabledOnUser,
-        supplied: Decimal.from(r.underlyingBalance),
-        suppliedUSD: Decimal.from(r.underlyingBalanceUSD),
-      }));
-  }
-
-  private computeBorrowedAssets(
-    reserves: UserSummary['userReservesData'],
-  ): BorrowedAsset[] {
-    return reserves
-      .filter(r => Decimal.from(r.totalBorrowsUSD).gt(0))
-      .map(r => ({
-        asset: r.reserve.symbol,
-        assetAddress: r.underlyingAsset,
-        borrowed: Decimal.from(r.totalBorrows),
-        borrowedUSD: Decimal.from(r.totalBorrowsUSD),
-        apy: Decimal.from(r.reserve.variableBorrowAPY).mul(100),
-        apyType:
-          Number(r.variableBorrows) > 0 ? ApyType.VARIABLE : ApyType.STABLE,
-      }));
-  }
-}
diff --git a/apps/frontend/src/utils/aave/AaveRepayTransactionsFactory.ts b/apps/frontend/src/utils/aave/AaveRepayTransactionsFactory.ts
new file mode 100644
index 000000000..2394cd99d
--- /dev/null
+++ b/apps/frontend/src/utils/aave/AaveRepayTransactionsFactory.ts
@@ -0,0 +1,113 @@
+import { BigNumber, constants, ethers } from 'ethers';
+import { t } from 'i18next';
+
+import { AssetDetailsData, getAssetDataByAddress } from '@sovryn/contracts';
+
+import { BOB_CHAIN_ID } from '../../config/chains';
+
+import {
+  Transaction,
+  TransactionType,
+} from '../../app/3_organisms/TransactionStepDialog/TransactionStepDialog.types';
+import { translations } from '../../locales/i18n';
+import { LoanType } from './AaveUserReservesSummary';
+
+export class AaveRepayTransactionsFactory {
+  private readonly Pool: ethers.Contract;
+  private readonly WETHGateway: ethers.Contract;
+
+  constructor(
+    private readonly PoolAddress: string,
+    private readonly WETHGatewayAddress: string,
+    private readonly signer: ethers.Signer,
+  ) {
+    this.Pool = new ethers.Contract(
+      this.PoolAddress,
+      [
+        'function repay(address asset, uint256 amount, uint256 rateMode, address onBehalfOf)',
+      ],
+      this.signer,
+    );
+
+    this.WETHGateway = new ethers.Contract(
+      this.WETHGatewayAddress,
+      [
+        'function repayETH(address pool, uint256 amount, uint256 rateMode, address onBehalfOf) payable',
+      ],
+      this.signer,
+    );
+  }
+
+  async repay(
+    token: AssetDetailsData,
+    amount: BigNumber,
+    loanType: LoanType,
+  ): Promise<Transaction[]> {
+    if (token.isNative) return this.repayNative(amount, loanType);
+    else return this.repayToken(token, amount, loanType);
+  }
+
+  private async repayToken(
+    asset: AssetDetailsData,
+    amount: BigNumber,
+    loanType: LoanType,
+  ): Promise<Transaction[]> {
+    return [
+      {
+        title: t(translations.aavePage.tx.repayTitle, {
+          symbol: asset.symbol,
+        }),
+        subtitle: t(translations.aavePage.tx.repaySubtitle, {
+          symbol: asset.symbol,
+          amount: ethers.utils.formatUnits(amount, asset.decimals),
+        }),
+        request: {
+          type: TransactionType.signTransaction,
+          args: [
+            asset.address,
+            amount.toString(),
+            loanType,
+            await this.signer.getAddress(),
+          ],
+          contract: this.Pool,
+          fnName: 'repay',
+          value: 0,
+        },
+      },
+    ];
+  }
+
+  private async repayNative(
+    amount: BigNumber,
+    loanType: LoanType,
+  ): Promise<Transaction[]> {
+    const nativeAsset = await getAssetDataByAddress(
+      constants.AddressZero,
+      BOB_CHAIN_ID,
+    );
+
+    return [
+      {
+        title: t(translations.aavePage.tx.repayTitle, {
+          symbol: nativeAsset.symbol,
+        }),
+        subtitle: t(translations.aavePage.tx.repaySubtitle, {
+          symbol: nativeAsset.symbol,
+          amount: ethers.utils.formatUnits(amount, nativeAsset.decimals),
+        }),
+        request: {
+          type: TransactionType.signTransaction,
+          args: [
+            this.PoolAddress,
+            amount.toString(),
+            loanType,
+            await this.signer.getAddress(),
+          ],
+          contract: this.WETHGateway,
+          fnName: 'repayETH',
+          value: amount.toString(),
+        },
+      },
+    ];
+  }
+}
diff --git a/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts b/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
index 6f1444877..0e31f6509 100644
--- a/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
+++ b/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
@@ -10,9 +10,9 @@ type UserSummary = FormatUserSummaryResponse<
   ReserveDataHumanized & FormatReserveUSDResponse
 >;
 
-export enum ApyType {
-  VARIABLE = 'variable',
-  STABLE = 'stable',
+export enum LoanType {
+  STABLE = 1,
+  VARIABLE = 2,
 }
 
 export type SuppliedAsset = {
@@ -28,7 +28,7 @@ export type BorrowedAsset = {
   asset: string;
   assetAddress: string;
   apy: Decimal;
-  apyType: ApyType;
+  type: LoanType;
   borrowed: Decimal;
   borrowedUSD: Decimal;
 };
@@ -40,6 +40,7 @@ export class AaveUserReservesSummary {
   public supplyBalance: Decimal;
   public supplyWeightedApy: Decimal;
   public collateralBalance: Decimal;
+  public currentLiquidationThreshold: Decimal;
   public borrowBalance: Decimal;
   public borrowWeightedApy: Decimal;
   public borrowPower: Decimal;
@@ -75,6 +76,9 @@ export class AaveUserReservesSummary {
     );
 
     // health and borrow status
+    this.currentLiquidationThreshold = Decimal.from(
+      this.userSummary.currentLiquidationThreshold,
+    );
     this.borrowPower = this.computeBorrowPower(
       Decimal.from(this.userSummary.availableBorrowsUSD),
       this.borrowBalance,
@@ -85,7 +89,7 @@ export class AaveUserReservesSummary {
     );
     this.healthFactor = this.computeHealthFactor(
       this.collateralBalance,
-      Decimal.from(this.userSummary.currentLiquidationThreshold),
+      this.currentLiquidationThreshold,
       this.borrowBalance,
     );
 
@@ -229,8 +233,8 @@ export class AaveUserReservesSummary {
         borrowed: Decimal.from(r.totalBorrows),
         borrowedUSD: Decimal.from(r.totalBorrowsUSD),
         apy: Decimal.from(r.reserve.variableBorrowAPY).mul(100),
-        apyType:
-          Number(r.variableBorrows) > 0 ? ApyType.VARIABLE : ApyType.STABLE,
+        type:
+          Number(r.variableBorrows) > 0 ? LoanType.VARIABLE : LoanType.STABLE,
       }));
   }
 }

From b4f6b1cf62ae0847e31d5fd7e23abe4e77a6906b Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Mon, 26 Aug 2024 09:15:17 -0300
Subject: [PATCH 054/116] implement collateral switch (#27)

---
 .../components/LendModal/LendForm.tsx         |  7 +--
 .../ToggleCollateralAction.tsx                | 21 +++++++--
 .../{useAaveDeposit.tsx => useAaveSupply.tsx} | 27 ++++++++++-
 apps/frontend/src/hooks/useAaveDeposit.tsx    | 47 -------------------
 .../frontend/src/locales/en/translations.json |  7 ++-
 apps/frontend/src/types/aave.ts               |  1 +
 .../aave/AaveSupplyTransactionsFactory.ts     | 47 +++++++++++++++++--
 7 files changed, 96 insertions(+), 61 deletions(-)
 rename apps/frontend/src/hooks/aave/{useAaveDeposit.tsx => useAaveSupply.tsx} (67%)
 delete mode 100644 apps/frontend/src/hooks/useAaveDeposit.tsx
 create mode 100644 apps/frontend/src/types/aave.ts

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx
index e8634e515..ff8798010 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx
@@ -17,8 +17,8 @@ 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 { useAaveDeposit } from '../../../../../../../hooks/aave/useAaveDeposit';
 import { useAaveReservesData } from '../../../../../../../hooks/aave/useAaveReservesData';
+import { useAaveSupply } from '../../../../../../../hooks/aave/useAaveSupply';
 import { useAccount } from '../../../../../../../hooks/useAccount';
 import { useAssetBalance } from '../../../../../../../hooks/useAssetBalance';
 import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
@@ -44,10 +44,7 @@ export const LendForm: FC<LendFormProps> = ({
     BOB_CHAIN_ID,
     account,
   );
-  const { handleDeposit } = useAaveDeposit(
-    () => null,
-    () => null,
-  );
+  const { handleDeposit } = useAaveSupply();
 
   const reserve = useMemo(() => {
     return reserves.find(r => r.symbol === lendAsset) ?? reserves[0];
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx
index 1697c2de7..c1b6ba37c 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx
@@ -1,7 +1,11 @@
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 
+import { getAssetData } from '@sovryn/contracts';
 import { Toggle } from '@sovryn/ui';
 
+import { BOB_CHAIN_ID } from '../../../../../../../config/chains';
+
+import { useAaveSupply } from '../../../../../../../hooks/aave/useAaveSupply';
 import { LendPosition } from '../../LendPositionsList.types';
 
 type ToggleCollateralActionProps = {
@@ -11,11 +15,22 @@ type ToggleCollateralActionProps = {
 export const ToggleCollateralAction: FC<ToggleCollateralActionProps> = ({
   position,
 }) => {
+  const { handleSwitchCollateral } = useAaveSupply();
+  const [isCollateral, setIsCollateral] = useState(position.collateral);
+
+  const toggleCollateral = async () => {
+    await handleSwitchCollateral(
+      await getAssetData(position.asset, BOB_CHAIN_ID),
+      !isCollateral,
+      { onComplete: () => setIsCollateral(!isCollateral) },
+    );
+  };
+
   return (
     <Toggle
       className="[&_*]:ml-0"
-      checked={position.collateral}
-      onChange={() => 'TODO: implement'}
+      checked={isCollateral}
+      onChange={toggleCollateral}
     />
   );
 };
diff --git a/apps/frontend/src/hooks/aave/useAaveDeposit.tsx b/apps/frontend/src/hooks/aave/useAaveSupply.tsx
similarity index 67%
rename from apps/frontend/src/hooks/aave/useAaveDeposit.tsx
rename to apps/frontend/src/hooks/aave/useAaveSupply.tsx
index 7c4ca65f8..f3fb6078b 100644
--- a/apps/frontend/src/hooks/aave/useAaveDeposit.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveSupply.tsx
@@ -12,7 +12,7 @@ import { translations } from '../../locales/i18n';
 import { AaveSupplyTransactionsFactory } from '../../utils/aave/AaveSupplyTransactionsFactory';
 import { useAccount } from '../useAccount';
 
-export const useAaveDeposit = (onBegin: () => void, onComplete: () => void) => {
+export const useAaveSupply = () => {
   const { signer } = useAccount();
   const { setTransactions, setIsOpen, setTitle } = useTransactionContext();
 
@@ -43,5 +43,28 @@ export const useAaveDeposit = (onBegin: () => void, onComplete: () => void) => {
     [setIsOpen, setTitle, setTransactions, aaveSupplyTransactionsFactory],
   );
 
-  return { handleDeposit };
+  const handleSwitchCollateral = useCallback(
+    async (
+      asset: AssetDetailsData,
+      useAsCollateral: boolean,
+      opts?: { onComplete?: () => void },
+    ) => {
+      if (!aaveSupplyTransactionsFactory) {
+        return;
+      }
+
+      setTransactions(
+        await aaveSupplyTransactionsFactory.collateralSwitch(
+          asset,
+          useAsCollateral,
+          opts,
+        ),
+      );
+      setTitle(t(translations.aavePage.tx.toggleAssetAsCollateral));
+      setIsOpen(true);
+    },
+    [setIsOpen, setTitle, setTransactions, aaveSupplyTransactionsFactory],
+  );
+
+  return { handleDeposit, handleSwitchCollateral };
 };
diff --git a/apps/frontend/src/hooks/useAaveDeposit.tsx b/apps/frontend/src/hooks/useAaveDeposit.tsx
deleted file mode 100644
index de85cc68a..000000000
--- a/apps/frontend/src/hooks/useAaveDeposit.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { useCallback, useMemo } from 'react';
-
-import { BigNumber } from 'ethers';
-import { t } from 'i18next';
-
-import { AssetDetailsData } from '@sovryn/contracts';
-import { Decimal } from '@sovryn/utils';
-
-import { config } from '../constants/aave';
-import { useTransactionContext } from '../contexts/TransactionContext';
-import { translations } from '../locales/i18n';
-import { AaveSupplyTransactionsFactory } from '../utils/aave/AaveSupplyTransactionsFactory';
-import { useAccount } from './useAccount';
-
-export const useAaveDeposit = (onBegin: () => void, onComplete: () => void) => {
-  const { signer } = useAccount();
-  const { setTransactions, setIsOpen, setTitle } = useTransactionContext();
-
-  const aaveSupplyTransactionsFactory = useMemo(() => {
-    if (!signer) return null;
-    return new AaveSupplyTransactionsFactory(
-      config.PoolAddress,
-      config.WETHGatewayAddress,
-      signer,
-    );
-  }, [signer]);
-
-  const handleDeposit = useCallback(
-    async (amount: Decimal, asset: AssetDetailsData) => {
-      if (!aaveSupplyTransactionsFactory) {
-        return;
-      }
-      const bnAmount = BigNumber.from(
-        amount.mul(Decimal.from(10).pow(asset.decimals)).toString(),
-      );
-
-      setTransactions(
-        await aaveSupplyTransactionsFactory.supply(asset, bnAmount),
-      );
-      setTitle(t(translations.common.deposit));
-      setIsOpen(true);
-    },
-    [setIsOpen, setTitle, setTransactions, aaveSupplyTransactionsFactory],
-  );
-
-  return { handleDeposit };
-};
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index b0fe65367..e1297c40d 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -821,7 +821,12 @@
             "borrowTitle": "Borrow {{symbol}} from the pool",
             "borrowSubtitle": "Borrows {{amount}} {{symbol}} from the pool",
             "approveBorrowDelegationTitle": "Approve borrow delegation",
-            "approveBorrowDelegationSubtitle": "Approve borrow delegation of {{amount}} {{symbol}} to the WETH gateway"
+            "approveBorrowDelegationSubtitle": "Approve borrow delegation of {{amount}} {{symbol}} to the WETH gateway",
+            "toggleAssetAsCollateral": "Switch asset use as collateral",
+            "enableAssetAsCollateral": "Enable {{symbol}} as collateral",
+            "enableAssetAsCollateralSubtitle": "Enabling {{symbol}} as collateral will increase your borrowing power",
+            "disableAssetAsCollateral": "Disable {{symbol}} as collateral",
+            "disableAssetAsCollateralSubtitle": "Disabling {{symbol}} as collateral will decrease your borrowing power and potentially risk you to liquidation"
         },
         "topPanel": {
             "title": "Lend and borrow",
diff --git a/apps/frontend/src/types/aave.ts b/apps/frontend/src/types/aave.ts
new file mode 100644
index 000000000..ecb543681
--- /dev/null
+++ b/apps/frontend/src/types/aave.ts
@@ -0,0 +1 @@
+export type TransactionFactoryOptions = { onComplete?: () => void };
diff --git a/apps/frontend/src/utils/aave/AaveSupplyTransactionsFactory.ts b/apps/frontend/src/utils/aave/AaveSupplyTransactionsFactory.ts
index c2e4f50dc..fe238f10d 100644
--- a/apps/frontend/src/utils/aave/AaveSupplyTransactionsFactory.ts
+++ b/apps/frontend/src/utils/aave/AaveSupplyTransactionsFactory.ts
@@ -10,6 +10,7 @@ import {
   TransactionType,
 } from '../../app/3_organisms/TransactionStepDialog/TransactionStepDialog.types';
 import { translations } from '../../locales/i18n';
+import { TransactionFactoryOptions } from '../../types/aave';
 import { prepareApproveTransaction } from '../transactions';
 
 export class AaveSupplyTransactionsFactory {
@@ -25,6 +26,7 @@ export class AaveSupplyTransactionsFactory {
       this.PoolAddress,
       [
         'function supply(address asset, uint256 amount, address onBehalfOf, uint16 referralCode)',
+        'function setUserUseReserveAsCollateral(address asset, bool useAsCollateral)',
       ],
       this.signer,
     );
@@ -41,14 +43,48 @@ export class AaveSupplyTransactionsFactory {
   async supply(
     token: AssetDetailsData,
     amount: BigNumber,
+    opts?: TransactionFactoryOptions,
   ): Promise<Transaction[]> {
-    if (token.isNative) return this.supplyNative(amount);
-    else return this.supplyToken(token, amount);
+    if (token.isNative) return this.supplyNative(amount, opts);
+    else return this.supplyToken(token, amount, opts);
+  }
+
+  async collateralSwitch(
+    token: AssetDetailsData,
+    useAsCollateral: boolean,
+    opts?: TransactionFactoryOptions,
+  ): Promise<Transaction[]> {
+    return [
+      {
+        title: useAsCollateral
+          ? t(translations.aavePage.tx.enableAssetAsCollateral, {
+              symbol: token.symbol,
+            })
+          : t(translations.aavePage.tx.disableAssetAsCollateral, {
+              symbol: token.symbol,
+            }),
+        subtitle: useAsCollateral
+          ? t(translations.aavePage.tx.enableAssetAsCollateralSubtitle, {
+              symbol: token.symbol,
+            })
+          : t(translations.aavePage.tx.disableAssetAsCollateralSubtitle, {
+              symbol: token.symbol,
+            }),
+        request: {
+          type: TransactionType.signTransaction,
+          args: [token, useAsCollateral],
+          contract: this.Pool,
+          fnName: 'setUserUseReserveAsCollateral',
+        },
+        onComplete: opts?.onComplete,
+      },
+    ];
   }
 
   private async supplyToken(
     asset: AssetDetailsData,
     amount: BigNumber,
+    opts?: TransactionFactoryOptions,
   ): Promise<Transaction[]> {
     const approval = await prepareApproveTransaction({
       spender: this.PoolAddress,
@@ -79,12 +115,16 @@ export class AaveSupplyTransactionsFactory {
         fnName: 'supply',
         value: 0,
       },
+      onComplete: opts?.onComplete,
     });
 
     return transactions;
   }
 
-  private async supplyNative(amount: BigNumber): Promise<Transaction[]> {
+  private async supplyNative(
+    amount: BigNumber,
+    opts?: TransactionFactoryOptions,
+  ): Promise<Transaction[]> {
     const nativeAsset = await getAssetDataByAddress(
       constants.AddressZero,
       BOB_CHAIN_ID,
@@ -106,6 +146,7 @@ export class AaveSupplyTransactionsFactory {
           fnName: 'depositETH',
           value: amount.toString(),
         },
+        onComplete: opts?.onComplete,
       },
     ];
   }

From 6312a54a2f2f9e8bc4f51ec9f7d9f87491571d90 Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Mon, 26 Aug 2024 10:09:38 -0300
Subject: [PATCH 055/116] Cleanup (#28)

* cleanup

* fixes
---
 .../components/BorrowModal/BorrowForm.tsx     |  4 ++--
 .../RepayModal/RepayWithWalletBalanceForm.tsx |  2 +-
 .../components/WithdrawModal/WithdrawForm.tsx |  2 +-
 .../frontend/src/hooks/aave/useAaveBorrow.tsx | 19 +++++++++---------
 apps/frontend/src/hooks/aave/useAaveRepay.tsx | 20 +++++++++++++------
 .../frontend/src/hooks/aave/useAaveSupply.tsx | 11 +++++++---
 .../src/hooks/aave/useAaveWithdraw.tsx        |  5 +----
 apps/frontend/src/types/aave.ts               |  5 +++++
 .../aave/AaveBorrowTransactionsFactory.ts     | 15 +++++++-------
 .../aave/AaveRepayTransactionsFactory.ts      | 10 ++++++++--
 .../aave/AaveWithdrawTransactionsFactory.ts   | 14 ++++++++++---
 11 files changed, 69 insertions(+), 38 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
index d09faab2e..b1cf7b5af 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
@@ -25,7 +25,7 @@ import { useAaveReservesData } from '../../../../../../../hooks/aave/useAaveRese
 import { useAaveUserReservesData } from '../../../../../../../hooks/aave/useAaveUserReservesData';
 import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
 import { translations } from '../../../../../../../locales/i18n';
-import { BorrowRateMode } from '../../../../../../../utils/aave/AaveBorrowTransactionsFactory';
+import { BorrowRateMode } from '../../../../../../../types/aave';
 import { CollateralRatioHealthBar } from '../../../CollateralRatioHealthBar/CollateralRatioHealthBar';
 
 const pageTranslations = translations.aavePage;
@@ -41,7 +41,7 @@ export const BorrowForm: FC<BorrowFormProps> = ({ asset }) => {
   const [borrowAsset, setBorrowAsset] = useState<string>(asset);
   const [borrowAmount, setBorrowAmount, borrowSize] = useDecimalAmountInput('');
   const [acknowledge, setAcknowledge] = useState<boolean>(false);
-  const { handleBorrow } = useAaveBorrow({});
+  const { handleBorrow } = useAaveBorrow();
 
   const reserve = useMemo(() => {
     return reserves.find(r => r.symbol === borrowAsset);
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx
index b1efc2e4e..a0846eaeb 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx
@@ -37,7 +37,7 @@ export const RepayWithWalletBalanceForm: FC<
   RepayWithWalletBalanceFormProps
 > = ({ asset }) => {
   const { account } = useAccount();
-  const { handleRepay } = useAaveRepay({});
+  const { handleRepay } = useAaveRepay();
   const reserves = useAaveReservesData();
   const userReservesSummary = useAaveUserReservesData();
   const [repayAsset, setRepayAsset] = useState<string>(asset);
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
index ada6de14a..54a8be6cb 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
@@ -33,7 +33,7 @@ type WithdrawFormProps = {
 };
 
 export const WithdrawForm: FC<WithdrawFormProps> = ({ asset }) => {
-  const { handleWithdraw } = useAaveWithdraw({});
+  const { handleWithdraw } = useAaveWithdraw();
   const reserves = useAaveReservesData();
   const userReservesSummary = useAaveUserReservesData();
   const [withdrawAsset, setWithdrawAsset] = useState<string>(asset);
diff --git a/apps/frontend/src/hooks/aave/useAaveBorrow.tsx b/apps/frontend/src/hooks/aave/useAaveBorrow.tsx
index a930a42f4..8ffcf74e6 100644
--- a/apps/frontend/src/hooks/aave/useAaveBorrow.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveBorrow.tsx
@@ -9,16 +9,11 @@ import { Decimal } from '@sovryn/utils';
 import { config } from '../../constants/aave';
 import { useTransactionContext } from '../../contexts/TransactionContext';
 import { translations } from '../../locales/i18n';
-import {
-  AaveBorrowTransactionsFactory,
-  BorrowRateMode,
-} from '../../utils/aave/AaveBorrowTransactionsFactory';
+import { BorrowRateMode, TransactionFactoryOptions } from '../../types/aave';
+import { AaveBorrowTransactionsFactory } from '../../utils/aave/AaveBorrowTransactionsFactory';
 import { useAccount } from '../useAccount';
 
-export const useAaveBorrow = (props: {
-  onBegin?: () => void;
-  onComplete?: () => void;
-}) => {
+export const useAaveBorrow = () => {
   const { signer } = useAccount();
   const { setTransactions, setIsOpen, setTitle } = useTransactionContext();
 
@@ -37,6 +32,7 @@ export const useAaveBorrow = (props: {
       amount: Decimal,
       asset: AssetDetailsData,
       rateMode: BorrowRateMode,
+      opts?: TransactionFactoryOptions,
     ) => {
       if (!aaveBorrowTransactionsFactory) {
         return;
@@ -46,7 +42,12 @@ export const useAaveBorrow = (props: {
       );
 
       setTransactions(
-        await aaveBorrowTransactionsFactory.borrow(asset, bnAmount, rateMode),
+        await aaveBorrowTransactionsFactory.borrow(
+          asset,
+          bnAmount,
+          rateMode,
+          opts,
+        ),
       );
       setTitle(t(translations.aavePage.common.borrow));
       setIsOpen(true);
diff --git a/apps/frontend/src/hooks/aave/useAaveRepay.tsx b/apps/frontend/src/hooks/aave/useAaveRepay.tsx
index 6bd2ff40e..164c843a3 100644
--- a/apps/frontend/src/hooks/aave/useAaveRepay.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveRepay.tsx
@@ -9,14 +9,12 @@ import { Decimal } from '@sovryn/utils';
 import { config } from '../../constants/aave';
 import { useTransactionContext } from '../../contexts/TransactionContext';
 import { translations } from '../../locales/i18n';
+import { TransactionFactoryOptions } from '../../types/aave';
 import { AaveRepayTransactionsFactory } from '../../utils/aave/AaveRepayTransactionsFactory';
 import { LoanType } from '../../utils/aave/AaveUserReservesSummary';
 import { useAccount } from '../useAccount';
 
-export const useAaveRepay = (props: {
-  onBegin?: () => void;
-  onComplete?: () => void;
-}) => {
+export const useAaveRepay = () => {
   const { signer } = useAccount();
   const { setTransactions, setIsOpen, setTitle } = useTransactionContext();
 
@@ -30,7 +28,12 @@ export const useAaveRepay = (props: {
   }, [signer]);
 
   const handleRepay = useCallback(
-    async (amount: Decimal, asset: AssetDetailsData, loanType: LoanType) => {
+    async (
+      amount: Decimal,
+      asset: AssetDetailsData,
+      loanType: LoanType,
+      opts?: TransactionFactoryOptions,
+    ) => {
       if (!aaveRepayTransactionsFactory) {
         return;
       }
@@ -39,7 +42,12 @@ export const useAaveRepay = (props: {
       );
 
       setTransactions(
-        await aaveRepayTransactionsFactory.repay(asset, bnAmount, loanType),
+        await aaveRepayTransactionsFactory.repay(
+          asset,
+          bnAmount,
+          loanType,
+          opts,
+        ),
       );
       setTitle(t(translations.common.buttons.repay));
       setIsOpen(true);
diff --git a/apps/frontend/src/hooks/aave/useAaveSupply.tsx b/apps/frontend/src/hooks/aave/useAaveSupply.tsx
index f3fb6078b..b6c604114 100644
--- a/apps/frontend/src/hooks/aave/useAaveSupply.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveSupply.tsx
@@ -9,6 +9,7 @@ import { Decimal } from '@sovryn/utils';
 import { config } from '../../constants/aave';
 import { useTransactionContext } from '../../contexts/TransactionContext';
 import { translations } from '../../locales/i18n';
+import { TransactionFactoryOptions } from '../../types/aave';
 import { AaveSupplyTransactionsFactory } from '../../utils/aave/AaveSupplyTransactionsFactory';
 import { useAccount } from '../useAccount';
 
@@ -26,7 +27,11 @@ export const useAaveSupply = () => {
   }, [signer]);
 
   const handleDeposit = useCallback(
-    async (amount: Decimal, asset: AssetDetailsData) => {
+    async (
+      amount: Decimal,
+      asset: AssetDetailsData,
+      opts?: TransactionFactoryOptions,
+    ) => {
       if (!aaveSupplyTransactionsFactory) {
         return;
       }
@@ -35,7 +40,7 @@ export const useAaveSupply = () => {
       );
 
       setTransactions(
-        await aaveSupplyTransactionsFactory.supply(asset, bnAmount),
+        await aaveSupplyTransactionsFactory.supply(asset, bnAmount, opts),
       );
       setTitle(t(translations.common.deposit));
       setIsOpen(true);
@@ -47,7 +52,7 @@ export const useAaveSupply = () => {
     async (
       asset: AssetDetailsData,
       useAsCollateral: boolean,
-      opts?: { onComplete?: () => void },
+      opts?: TransactionFactoryOptions,
     ) => {
       if (!aaveSupplyTransactionsFactory) {
         return;
diff --git a/apps/frontend/src/hooks/aave/useAaveWithdraw.tsx b/apps/frontend/src/hooks/aave/useAaveWithdraw.tsx
index e0ff36e2b..89fef327a 100644
--- a/apps/frontend/src/hooks/aave/useAaveWithdraw.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveWithdraw.tsx
@@ -12,10 +12,7 @@ import { translations } from '../../locales/i18n';
 import { AaveWithdrawTransactionsFactory } from '../../utils/aave/AaveWithdrawTransactionsFactory';
 import { useAccount } from '../useAccount';
 
-export const useAaveWithdraw = (props: {
-  onBegin?: () => void;
-  onComplete?: () => void;
-}) => {
+export const useAaveWithdraw = () => {
   const { signer } = useAccount();
   const { setTransactions, setIsOpen, setTitle } = useTransactionContext();
 
diff --git a/apps/frontend/src/types/aave.ts b/apps/frontend/src/types/aave.ts
index ecb543681..3f43e626d 100644
--- a/apps/frontend/src/types/aave.ts
+++ b/apps/frontend/src/types/aave.ts
@@ -1 +1,6 @@
 export type TransactionFactoryOptions = { onComplete?: () => void };
+
+export enum BorrowRateMode {
+  STABLE = 1,
+  VARIABLE = 2,
+}
diff --git a/apps/frontend/src/utils/aave/AaveBorrowTransactionsFactory.ts b/apps/frontend/src/utils/aave/AaveBorrowTransactionsFactory.ts
index 691fd3e33..e602456db 100644
--- a/apps/frontend/src/utils/aave/AaveBorrowTransactionsFactory.ts
+++ b/apps/frontend/src/utils/aave/AaveBorrowTransactionsFactory.ts
@@ -10,11 +10,7 @@ import {
   TransactionType,
 } from '../../app/3_organisms/TransactionStepDialog/TransactionStepDialog.types';
 import { translations } from '../../locales/i18n';
-
-export enum BorrowRateMode {
-  STABLE = 1,
-  VARIABLE = 2,
-}
+import { BorrowRateMode, TransactionFactoryOptions } from '../../types/aave';
 
 export class AaveBorrowTransactionsFactory {
   private readonly Pool: ethers.Contract;
@@ -54,15 +50,17 @@ export class AaveBorrowTransactionsFactory {
     token: AssetDetailsData,
     amount: BigNumber,
     rateMode: BorrowRateMode,
+    opts?: TransactionFactoryOptions,
   ): Promise<Transaction[]> {
-    if (token.isNative) return this.borrowNative(amount, rateMode);
-    else return this.borrowToken(token, amount, rateMode);
+    if (token.isNative) return this.borrowNative(amount, rateMode, opts);
+    else return this.borrowToken(token, amount, rateMode, opts);
   }
 
   private async borrowToken(
     asset: AssetDetailsData,
     amount: BigNumber,
     rateMode: BorrowRateMode,
+    opts?: TransactionFactoryOptions,
   ): Promise<Transaction[]> {
     return [
       {
@@ -85,6 +83,7 @@ export class AaveBorrowTransactionsFactory {
           contract: this.Pool,
           fnName: 'borrow',
         },
+        onComplete: opts?.onComplete,
       },
     ];
   }
@@ -92,6 +91,7 @@ export class AaveBorrowTransactionsFactory {
   private async borrowNative(
     amount: BigNumber,
     rateMode: BorrowRateMode,
+    opts?: TransactionFactoryOptions,
   ): Promise<Transaction[]> {
     const nativeAsset = await getAssetDataByAddress(
       constants.AddressZero,
@@ -128,6 +128,7 @@ export class AaveBorrowTransactionsFactory {
           contract: this.WETHGateway,
           fnName: 'borrowETH',
         },
+        onComplete: opts?.onComplete,
       },
     ];
   }
diff --git a/apps/frontend/src/utils/aave/AaveRepayTransactionsFactory.ts b/apps/frontend/src/utils/aave/AaveRepayTransactionsFactory.ts
index 2394cd99d..c437f1b59 100644
--- a/apps/frontend/src/utils/aave/AaveRepayTransactionsFactory.ts
+++ b/apps/frontend/src/utils/aave/AaveRepayTransactionsFactory.ts
@@ -10,6 +10,7 @@ import {
   TransactionType,
 } from '../../app/3_organisms/TransactionStepDialog/TransactionStepDialog.types';
 import { translations } from '../../locales/i18n';
+import { TransactionFactoryOptions } from '../../types/aave';
 import { LoanType } from './AaveUserReservesSummary';
 
 export class AaveRepayTransactionsFactory {
@@ -42,15 +43,17 @@ export class AaveRepayTransactionsFactory {
     token: AssetDetailsData,
     amount: BigNumber,
     loanType: LoanType,
+    opts?: TransactionFactoryOptions,
   ): Promise<Transaction[]> {
-    if (token.isNative) return this.repayNative(amount, loanType);
-    else return this.repayToken(token, amount, loanType);
+    if (token.isNative) return this.repayNative(amount, loanType, opts);
+    else return this.repayToken(token, amount, loanType, opts);
   }
 
   private async repayToken(
     asset: AssetDetailsData,
     amount: BigNumber,
     loanType: LoanType,
+    opts?: TransactionFactoryOptions,
   ): Promise<Transaction[]> {
     return [
       {
@@ -73,6 +76,7 @@ export class AaveRepayTransactionsFactory {
           fnName: 'repay',
           value: 0,
         },
+        onComplete: opts?.onComplete,
       },
     ];
   }
@@ -80,6 +84,7 @@ export class AaveRepayTransactionsFactory {
   private async repayNative(
     amount: BigNumber,
     loanType: LoanType,
+    opts?: TransactionFactoryOptions,
   ): Promise<Transaction[]> {
     const nativeAsset = await getAssetDataByAddress(
       constants.AddressZero,
@@ -107,6 +112,7 @@ export class AaveRepayTransactionsFactory {
           fnName: 'repayETH',
           value: amount.toString(),
         },
+        onComplete: opts?.onComplete,
       },
     ];
   }
diff --git a/apps/frontend/src/utils/aave/AaveWithdrawTransactionsFactory.ts b/apps/frontend/src/utils/aave/AaveWithdrawTransactionsFactory.ts
index 9b414af87..238c561a8 100644
--- a/apps/frontend/src/utils/aave/AaveWithdrawTransactionsFactory.ts
+++ b/apps/frontend/src/utils/aave/AaveWithdrawTransactionsFactory.ts
@@ -10,6 +10,7 @@ import {
   TransactionType,
 } from '../../app/3_organisms/TransactionStepDialog/TransactionStepDialog.types';
 import { translations } from '../../locales/i18n';
+import { TransactionFactoryOptions } from '../../types/aave';
 import { prepareApproveTransaction } from '../transactions';
 
 export class AaveWithdrawTransactionsFactory {
@@ -37,14 +38,16 @@ export class AaveWithdrawTransactionsFactory {
   async withdraw(
     token: AssetDetailsData,
     amount: BigNumber,
+    opts?: TransactionFactoryOptions,
   ): Promise<Transaction[]> {
-    if (token.isNative) return this.withdrawNative(amount);
-    else return this.withdrawToken(token, amount);
+    if (token.isNative) return this.withdrawNative(amount, opts);
+    else return this.withdrawToken(token, amount, opts);
   }
 
   private async withdrawToken(
     asset: AssetDetailsData,
     amount: BigNumber,
+    opts?: TransactionFactoryOptions,
   ): Promise<Transaction[]> {
     return [
       {
@@ -65,11 +68,15 @@ export class AaveWithdrawTransactionsFactory {
           contract: this.Pool,
           fnName: 'withdraw',
         },
+        onComplete: opts?.onComplete,
       },
     ];
   }
 
-  private async withdrawNative(amount: BigNumber): Promise<Transaction[]> {
+  private async withdrawNative(
+    amount: BigNumber,
+    opts?: TransactionFactoryOptions,
+  ): Promise<Transaction[]> {
     const aWETH = await getAssetData('aWETH', BOB_CHAIN_ID);
 
     const approval = await prepareApproveTransaction({
@@ -99,6 +106,7 @@ export class AaveWithdrawTransactionsFactory {
         contract: this.WETHGateway,
         fnName: 'withdrawETH',
       },
+      onComplete: opts?.onComplete,
     });
 
     return transactions;

From 8a4b2aba0a2473fd6b86ca585aeb970d05392c55 Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Tue, 27 Aug 2024 10:00:05 -0300
Subject: [PATCH 056/116] Update apps/frontend/package.json

Co-authored-by: Pietro <74987028+pietro-maximoff@users.noreply.github.com>
---
 apps/frontend/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 59e331b0a..ffc00fea1 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -28,7 +28,7 @@
     "@uniswap/permit2-sdk": "1.2.0",
     "bitcoin-address-validation": "2.2.1",
     "chart.js": "4.1.1",
-    "chartjs-adapter-date-fns": "^3.0.0",
+    "chartjs-adapter-date-fns": "3.0.0",
     "classnames": "2.3.2",
     "date-fns": "2.30.0",
     "dayjs": "1.11.7",

From 2be1e511587a6c95c14b0a594de6600b6cd6fe33 Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Tue, 27 Aug 2024 10:00:34 -0300
Subject: [PATCH 057/116] Update
 apps/frontend/src/app/2_molecules/AmountTransition/AmountTransition.tsx

Co-authored-by: Pietro <74987028+pietro-maximoff@users.noreply.github.com>
---
 .../AmountTransition/AmountTransition.tsx        | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/apps/frontend/src/app/2_molecules/AmountTransition/AmountTransition.tsx b/apps/frontend/src/app/2_molecules/AmountTransition/AmountTransition.tsx
index fafeffc2b..643c56722 100644
--- a/apps/frontend/src/app/2_molecules/AmountTransition/AmountTransition.tsx
+++ b/apps/frontend/src/app/2_molecules/AmountTransition/AmountTransition.tsx
@@ -19,12 +19,10 @@ export const AmountTransition: FC<AmountTransitionProps> = ({
   from,
   to,
   className,
-}) => {
-  return (
-    <div className={classNames('flex items-center gap-1', className)}>
-      <AmountRenderer {...from} />
-      <Icon icon={IconNames.ARROW_RIGHT} className="h-2 flex-shrink-0" />
-      <AmountRenderer {...to} />
-    </div>
-  );
-};
+}) => (
+  <div className={classNames('flex items-center gap-1', className)}>
+    <AmountRenderer {...from} />
+    <Icon icon={IconNames.ARROW_RIGHT} className="h-2 flex-shrink-0" />
+    <AmountRenderer {...to} />
+  </div>
+);

From 6bb58091837702eb206369a6cd42645dd6d06ea9 Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Tue, 27 Aug 2024 10:00:45 -0300
Subject: [PATCH 058/116] Update
 apps/frontend/src/app/2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx

Co-authored-by: Pietro <74987028+pietro-maximoff@users.noreply.github.com>
---
 .../AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/app/2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx b/apps/frontend/src/app/2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx
index 201798a8c..31eb3a334 100644
--- a/apps/frontend/src/app/2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx
+++ b/apps/frontend/src/app/2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx
@@ -29,7 +29,7 @@ export const AssetAmountPriceRenderer: FC<AssetAmountPriceRendererProps> = ({
       <AmountRenderer value={value} suffix={asset} className={valueClassName} />
       <AmountRenderer
         value={usdPrice}
-        prefix={'$'}
+        prefix="$"
         className={classNames(
           'text-gray-40 text-xs font-medium',
           priceClassName,

From 76153dd2994a5d51533eb6d24c1688a8c918e4ef Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Tue, 27 Aug 2024 10:01:09 -0300
Subject: [PATCH 059/116] Update
 apps/frontend/src/app/2_molecules/NetworkSwitch/NetworkSwitch.tsx

Co-authored-by: Pietro <74987028+pietro-maximoff@users.noreply.github.com>
---
 .../src/app/2_molecules/NetworkSwitch/NetworkSwitch.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/app/2_molecules/NetworkSwitch/NetworkSwitch.tsx b/apps/frontend/src/app/2_molecules/NetworkSwitch/NetworkSwitch.tsx
index 75ae0575d..24d8fad4a 100644
--- a/apps/frontend/src/app/2_molecules/NetworkSwitch/NetworkSwitch.tsx
+++ b/apps/frontend/src/app/2_molecules/NetworkSwitch/NetworkSwitch.tsx
@@ -1,4 +1,4 @@
-import React, { FC, ReactElement } from 'react';
+import React, { FC, ReactElement, useMemo } from 'react';
 
 import { ChainId } from '@sovryn/ethers-provider';
 

From 987d265e8893a439b04c5134a4f87e28e25fd277 Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Tue, 27 Aug 2024 10:01:23 -0300
Subject: [PATCH 060/116] Update
 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx

Co-authored-by: Pietro <74987028+pietro-maximoff@users.noreply.github.com>
---
 .../components/EModeDetails/EModeDetails.tsx                     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx
index 379acb71b..b23f9b753 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx
@@ -35,6 +35,7 @@ export const EModeDetails: FC<EModeDetailsProps> = () => {
       open={open || !isMobile}
       onClick={setOpen}
       flatMode={!isMobile}
+      dataAttribute="e-mode"
     >
       <div className="space-y-6">
         <div className="flex justify-between items-center max-w-[260px]">

From 6f46c5f295b030c874f20f2c7060d1cb84a0b88d Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Tue, 27 Aug 2024 10:02:38 -0300
Subject: [PATCH 061/116] Update
 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx

Co-authored-by: Pietro <74987028+pietro-maximoff@users.noreply.github.com>
---
 .../components/SupplyDetailsGraph/SupplyDetailsGraph.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
index 86e59fa50..7be941d96 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
@@ -17,7 +17,7 @@ const pageTranslations = translations.aaveReserveOverviewPage.supplyDetails;
 
 type SupplyDetailsGraphProps = {};
 
-export const SupplyDetailsGraph: FC<SupplyDetailsGraphProps> = () => {
+export const SupplyDetailsGraph: FC = () => {
   const [open, setOpen] = useState<boolean>(true);
   const { isMobile } = useIsMobile();
   // TODO: mocked amounts

From 1cc3cc78846bca5207a82c526fdee7fe65f1693d Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Tue, 27 Aug 2024 10:02:46 -0300
Subject: [PATCH 062/116] Update
 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx

Co-authored-by: Pietro <74987028+pietro-maximoff@users.noreply.github.com>
---
 .../components/SupplyDetailsGraph/SupplyDetailsGraph.tsx         | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
index 7be941d96..47ace5046 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
@@ -15,7 +15,6 @@ import { MockData } from './components/Chart/Chart.types';
 
 const pageTranslations = translations.aaveReserveOverviewPage.supplyDetails;
 
-type SupplyDetailsGraphProps = {};
 
 export const SupplyDetailsGraph: FC = () => {
   const [open, setOpen] = useState<boolean>(true);

From a2828954c4b4d853cf673323155cde3fdd3bbb83 Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Tue, 27 Aug 2024 10:11:26 -0300
Subject: [PATCH 063/116] Apply suggestions from code review

Co-authored-by: Pietro <74987028+pietro-maximoff@users.noreply.github.com>
---
 .../src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx b/apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx
index 0d3abb9a6..ed2f76be9 100644
--- a/apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx
+++ b/apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx
@@ -13,10 +13,10 @@ type AssetAmountInputProps = {
   invalid?: boolean;
   amountLabel?: string;
   amountValue?: string | number;
-  onAmountChange?: (value: string) => unknown;
+  onAmountChange?: (value: string) => void;
   assetValue: string;
   assetOptions: SelectOption<string>[];
-  onAssetChange: (asset: string) => unknown;
+  onAssetChange: (asset: string) => void;
 };
 
 export const AssetAmountInput: FC<AssetAmountInputProps> = ({

From e916e33df98a45e16dd6e4e8d8bc3998a4826675 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Tue, 27 Aug 2024 16:13:42 +0300
Subject: [PATCH 064/116] remove LinkIcon

---
 apps/frontend/src/app/1_atoms/Icons/Icons.tsx | 22 -------------------
 .../StatisticsCard/StatisticsCard.tsx         |  8 ++++---
 .../components/TopPanel/TopPanel.tsx          | 10 ++++++---
 3 files changed, 12 insertions(+), 28 deletions(-)

diff --git a/apps/frontend/src/app/1_atoms/Icons/Icons.tsx b/apps/frontend/src/app/1_atoms/Icons/Icons.tsx
index 06ce2bee9..7270fd823 100644
--- a/apps/frontend/src/app/1_atoms/Icons/Icons.tsx
+++ b/apps/frontend/src/app/1_atoms/Icons/Icons.tsx
@@ -2,28 +2,6 @@ import React from 'react';
 
 import { IconType } from '@sovryn/ui';
 
-export const LinkIcon: IconType = (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g clipPath="url(#clip0_199_55951)">
-      <path
-        d="M12.6667 12.6667H3.33333V3.33333H8V2H3.33333C2.59333 2 2 2.6 2 3.33333V12.6667C2 13.4 2.59333 14 3.33333 14H12.6667C13.4 14 14 13.4 14 12.6667V8H12.6667V12.6667ZM9.33333 2V3.33333H11.7267L5.17333 9.88667L6.11333 10.8267L12.6667 4.27333V6.66667H14V2H9.33333Z"
-        fill="#B6BAC2"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_199_55951">
-        <rect width="16" height="16" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-);
-
 export const WalletIcon: IconType = (
   <svg
     width="16"
diff --git a/apps/frontend/src/app/2_molecules/StatisticsCard/StatisticsCard.tsx b/apps/frontend/src/app/2_molecules/StatisticsCard/StatisticsCard.tsx
index 7fecbbc2d..744464abf 100644
--- a/apps/frontend/src/app/2_molecules/StatisticsCard/StatisticsCard.tsx
+++ b/apps/frontend/src/app/2_molecules/StatisticsCard/StatisticsCard.tsx
@@ -4,9 +4,8 @@ import classNames from 'classnames';
 import { t } from 'i18next';
 import { ReactElement } from 'react-markdown/lib/react-markdown';
 
-import { HelperButton, Icon } from '@sovryn/ui';
+import { HelperButton, Icon, IconNames } from '@sovryn/ui';
 
-import { LinkIcon } from '../../1_atoms/Icons/Icons';
 import { translations } from '../../../locales/i18n';
 
 type StatisticsCardProps = {
@@ -38,7 +37,10 @@ export const StatisticsCard: FC<StatisticsCardProps> = ({
             {value}
             {link && (
               <a href={link} className="ml-3" target="_blank" rel="noreferrer">
-                <Icon icon={LinkIcon} className="h-4 w-4 text-gray-30" />
+                <Icon
+                  icon={IconNames.NEW_TAB}
+                  className="h-4 w-4 text-gray-30"
+                />
               </a>
             )}
           </>
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
index 89b23608c..416736aa5 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
@@ -3,9 +3,9 @@ import React, { FC } from 'react';
 import classNames from 'classnames';
 import { t } from 'i18next';
 
-import { Heading, Icon, Paragraph, ParagraphSize } from '@sovryn/ui';
+import { Heading, Icon, IconNames, Paragraph, ParagraphSize } from '@sovryn/ui';
 
-import { LinkIcon, WalletIcon } from '../../../../1_atoms/Icons/Icons';
+import { WalletIcon } from '../../../../1_atoms/Icons/Icons';
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
 import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
@@ -55,7 +55,11 @@ export const TopPanel: FC<TopPanelProps> = ({ asset, className }) => {
 
           <div className="flex items-center gap-2 h-8">
             <a href="#block-explorer">
-              <Icon icon={LinkIcon} className="text-gray-30" size={16} />
+              <Icon
+                icon={IconNames.NEW_TAB}
+                className="text-gray-30"
+                size={16}
+              />
             </a>
             <a href="#block-explorer">
               <Icon icon={WalletIcon} className="text-gray-30" size={16} />

From 99c512eda930b3f6837df3352814a5b56e7ceb3c Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Tue, 27 Aug 2024 10:16:10 -0300
Subject: [PATCH 065/116] Apply suggestions from code review

Co-authored-by: Pietro <74987028+pietro-maximoff@users.noreply.github.com>
---
 apps/frontend/src/app/1_atoms/Icons/Icons.tsx  |  6 +-----
 .../NetworkSwitch/NetworkSwitch.tsx            | 10 +++++-----
 .../src/app/5_pages/AavePage/AavePage.tsx      |  2 +-
 .../BorrowAssetsList.constants.tsx             |  2 +-
 .../BorrowAssetsList/BorrowAssetsList.tsx      | 14 ++++++++++----
 .../BorrowAssetAction/BorrowAssetAction.tsx    | 18 +++++++-----------
 6 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/apps/frontend/src/app/1_atoms/Icons/Icons.tsx b/apps/frontend/src/app/1_atoms/Icons/Icons.tsx
index 7270fd823..fae2b2880 100644
--- a/apps/frontend/src/app/1_atoms/Icons/Icons.tsx
+++ b/apps/frontend/src/app/1_atoms/Icons/Icons.tsx
@@ -28,10 +28,6 @@ export const EModeIcon: IconType = (
     viewBox="0 0 16 16"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M2.7888 9.33172C2.68519 9.33172 2.62925 9.21023 2.69661 9.13151L9.96917 0.632031C10.0511 0.536295 10.2066 0.613419 10.1799 0.736569L8.89071 6.695C8.87435 6.7706 8.93195 6.84199 9.00929 6.84199L13.8677 6.84199C13.9757 6.84199 14.0299 6.97243 13.9537 7.04893L5.54038 15.4971C5.44947 15.5884 5.29773 15.4938 5.3397 15.372L7.36548 9.49257C7.39262 9.41378 7.3341 9.33172 7.25077 9.33172H2.7888Z"
-    />
+    <path d="M2.7888 9.33172C2.68519 9.33172 2.62925 9.21023 2.69661 9.13151L9.96917 0.632031C10.0511 0.536295 10.2066 0.613419 10.1799 0.736569L8.89071 6.695C8.87435 6.7706 8.93195 6.84199 9.00929 6.84199L13.8677 6.84199C13.9757 6.84199 14.0299 6.97243 13.9537 7.04893L5.54038 15.4971C5.44947 15.5884 5.29773 15.4938 5.3397 15.372L7.36548 9.49257C7.39262 9.41378 7.3341 9.33172 7.25077 9.33172H2.7888Z" />
   </svg>
 );
diff --git a/apps/frontend/src/app/2_molecules/NetworkSwitch/NetworkSwitch.tsx b/apps/frontend/src/app/2_molecules/NetworkSwitch/NetworkSwitch.tsx
index 24d8fad4a..f194f5ad3 100644
--- a/apps/frontend/src/app/2_molecules/NetworkSwitch/NetworkSwitch.tsx
+++ b/apps/frontend/src/app/2_molecules/NetworkSwitch/NetworkSwitch.tsx
@@ -12,13 +12,13 @@ type NetworkSwitchProps = {
 export const NetworkSwitch: FC<NetworkSwitchProps> = ({ components }) => {
   const { currentChainId } = useChainStore();
 
-  const componentToRender = React.useMemo(() => {
-    return (
+  const componentToRender = useMemo(
+    () =>
       components[currentChainId] || (
         <NetworkBanner requiredChainId={Object.keys(components)[0]} />
-      )
-    );
-  }, [currentChainId, components]);
+      ),
+    [currentChainId, components],
+  );
 
   return componentToRender;
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx b/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
index 18dd1374c..294689c8b 100644
--- a/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
@@ -48,7 +48,7 @@ const AavePage: FC = () => {
               label: t(pageTranslations.common.borrow),
             },
           ]}
-          onChange={e => setActiveTab(e)}
+          onChange={setActiveTab}
           size={TabSize.normal}
           type={TabType.secondary}
         />
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
index c8de37d5f..b98682ea1 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
@@ -63,7 +63,7 @@ export const COLUMNS_CONFIG = [
       </span>
     ),
     cellRenderer: (pool: BorrowPoolDetails) => (
-      <AmountRenderer value={pool.apr} suffix={'%'} />
+      <AmountRenderer value={pool.apr} suffix="%" />
     ),
   },
   {
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
index 76a2c27f1..4bb720158 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
@@ -12,14 +12,20 @@ import { BorrowAssetDetails } from './components/BorrowAssetDetails/BorrowAssetD
 
 const pageTranslations = translations.aavePage.borrowAssetsList;
 
-type BorrowAssetsListProps = {};
 
-export const BorrowAssetsList: FC<BorrowAssetsListProps> = () => {
-  const [open, setOpen] = useState<boolean>(true);
+export const BorrowAssetsList: FC = () => {
+  const [open, setOpen] = useState(true);
   const [orderOptions, setOrderOptions] = useState<OrderOptions>();
 
   const rowTitleRenderer = useCallback(
-    r => <AaveRowTitle asset={r.asset} value={r.apr} suffix="%" label="APY" />,
+    row => (
+      <AaveRowTitle
+        asset={row.asset}
+        value={row.apr}
+        suffix="%"
+        label={t(translations.aavePage.common.apy)}
+      />
+    ),
     [],
   );
   const mobileRenderer = useCallback(p => <BorrowAssetDetails pool={p} />, []);
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
index 118fdbb15..b49bc676d 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useState, useCallback } from 'react';
 
 import { t } from 'i18next';
 import { useNavigate } from 'react-router-dom';
@@ -11,21 +11,17 @@ import { BorrowModalContainer } from '../BorrowModal/BorrowModalContainer';
 
 const pageTranslations = translations.aavePage;
 
-type BorrowAssetActionProps = {
-  pool: BorrowPoolDetails;
-};
-
-export const BorrowAssetAction: FC<BorrowAssetActionProps> = () => {
+export const BorrowAssetAction: FC = () => {
   const navigate = useNavigate();
-  const [isBorrowModalOpen, setIsBorrowModalOpen] = useState<boolean>(false);
+  const [isBorrowModalOpen, setIsBorrowModalOpen] = useState(false);
 
-  const handleBorrowClick = () => {
+  const handleBorrowClick = useCallback(() => {
     setIsBorrowModalOpen(true);
-  };
+  }, []);
 
-  const handleBorrowClose = () => {
+  const handleBorrowClose = useCallback(() => {
     setIsBorrowModalOpen(false);
-  };
+  }, []);
 
   return (
     <div className="flex items-center justify-center lg:justify-end space-x-2">

From b927ea61c04ee28944eb7d4922d60d9fe56389be Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Tue, 27 Aug 2024 10:23:20 -0300
Subject: [PATCH 066/116] Apply suggestions from code review

Co-authored-by: Pietro <74987028+pietro-maximoff@users.noreply.github.com>
---
 .../BorrowAssetDetails/BorrowAssetDetails.tsx | 55 ++++++------
 .../components/BorrowModal/BorrowForm.tsx     |  4 +-
 .../BorrowModal/BorrowModalContainer.tsx      | 26 +++---
 .../BorrowPositionsList.tsx                   |  4 +-
 .../BorrowPositionAction.tsx                  |  8 +-
 .../BorrowPositionDetails.tsx                 | 67 +++++++--------
 .../RepayModal/RepayModalContainer.tsx        |  2 +-
 .../RepayModal/RepayWithCollateralForm.tsx    |  4 +-
 .../RepayModal/RepayWithWalletBalanceForm.tsx |  2 +-
 .../LendAssetsList/LendAssetsList.tsx         | 16 ++--
 .../LendAssetAction/LendAssetAction.tsx       | 16 ++--
 .../LendAssetDetails/LendAssetDetails.tsx     | 85 +++++++++----------
 .../components/LendModal/LendForm.tsx         |  2 +-
 .../LendModal/LendModalContainer.tsx          | 26 +++---
 .../LendPositionsList/LendPositionsList.tsx   |  2 +-
 .../LendPositionAction/LendPositionAction.tsx | 17 ++--
 .../LendPositionDetails.tsx                   | 71 +++++++---------
 .../ToggleCollateralAction.tsx                | 16 ++--
 .../components/WithdrawModal/WithdrawForm.tsx |  2 +-
 .../WithdrawModal/WithdrawModalContainer.tsx  | 24 +++---
 .../PoolPositionStat/PoolPositionStat.tsx     | 46 +++++-----
 .../BorrowDetailsGraph/BorrowDetailsGraph.tsx |  5 +-
 .../components/EModeDetails/EModeDetails.tsx  |  5 +-
 .../InterestRateModelGraph.tsx                |  5 +-
 .../SupplyDetailsGraph/SupplyDetailsGraph.tsx |  3 +-
 .../components/SupplyAction/SupplyAction.tsx  |  2 +-
 .../frontend/src/locales/en/translations.json |  4 +-
 27 files changed, 240 insertions(+), 279 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
index 047e215aa..87f4df137 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
@@ -16,34 +16,29 @@ type BorrowAssetDetailsProps = {
   pool: BorrowPoolDetails;
 };
 
-export const BorrowAssetDetails: FC<BorrowAssetDetailsProps> = ({ pool }) => {
-  return (
-    <div className="space-y-3">
-      <div>
-        {/* APR */}
-        <SimpleTableRow
-          label={
-            <span className="text-xs font-medium text-gray-30 items-center flex gap-1">
-              {t(pageTranslations.common.apr)}{' '}
-              <HelperButton content={t(pageTranslations.common.aprInfo)} />
-            </span>
-          }
-          value={<AmountRenderer value={pool.apr} suffix={'%'} />}
-        />
-
-        {/* Available */}
-        <SimpleTableRow
-          label={t(pageTranslations.borrowAssetsList.available)}
-          value={
-            <AssetAmountPriceRenderer
-              value={pool.available}
-              asset={pool.asset}
-            />
-          }
-        />
-      </div>
-
-      <BorrowAssetAction pool={pool} />
+export const BorrowAssetDetails: FC<BorrowAssetDetailsProps> = ({ pool }) => (
+  <div className="space-y-3">
+    <div>
+      {/* APR */}
+      <SimpleTableRow
+        label={
+          <span className="text-xs font-medium text-gray-30 items-center flex gap-1">
+            {t(pageTranslations.common.apr)}{' '}
+            <HelperButton content={t(pageTranslations.common.aprInfo)} />
+          </span>
+        }
+        value={<AmountRenderer value={pool.apr} suffix="%" />}
+      />
+
+      {/* Available */}
+      <SimpleTableRow
+        label={t(pageTranslations.borrowAssetsList.available)}
+        value={
+          <AssetAmountPriceRenderer value={pool.available} asset={pool.asset} />
+        }
+      />
     </div>
-  );
-};
+
+    <BorrowAssetAction />
+  </div>
+);
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
index 9b9f6aac2..97a3f1e70 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
@@ -24,7 +24,7 @@ import { getCollateralRatioThresholds } from './BorrowForm.utils';
 const pageTranslations = translations.aavePage;
 
 type BorrowFormProps = {
-  onSuccess: () => unknown;
+  onSuccess: () => void;
 };
 
 export const BorrowForm: FC<BorrowFormProps> = () => {
@@ -139,7 +139,7 @@ export const BorrowForm: FC<BorrowFormProps> = () => {
           label={t(translations.aavePage.borrowForm.tokenPrice, {
             token: borrowAsset,
           })}
-          value={<AmountRenderer value={assetPrice} prefix={'$'} />}
+          value={<AmountRenderer value={assetPrice} prefix="$" />}
         />
       </SimpleTable>
 
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowModalContainer.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowModalContainer.tsx
index 19427f36e..5927b58df 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowModalContainer.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowModalContainer.tsx
@@ -9,22 +9,20 @@ import { BorrowForm } from './BorrowForm';
 
 type BorrowModalContainerProps = {
   isOpen: boolean;
-  handleCloseModal: () => unknown;
+  handleCloseModal: () => void;
 };
 
 export const BorrowModalContainer: FC<BorrowModalContainerProps> = ({
   isOpen,
   handleCloseModal,
-}) => {
-  return (
-    <Dialog disableFocusTrap isOpen={isOpen}>
-      <DialogHeader
-        title={t(translations.aavePage.common.borrow)}
-        onClose={handleCloseModal}
-      />
-      <DialogBody className="flex flex-col gap-6">
-        <BorrowForm onSuccess={handleCloseModal} />
-      </DialogBody>
-    </Dialog>
-  );
-};
+}) => (
+  <Dialog disableFocusTrap isOpen={isOpen}>
+    <DialogHeader
+      title={t(translations.aavePage.common.borrow)}
+      onClose={handleCloseModal}
+    />
+    <DialogBody className="flex flex-col gap-6">
+      <BorrowForm onSuccess={handleCloseModal} />
+    </DialogBody>
+  </Dialog>
+);
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
index 7e3a7824d..26980917b 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
@@ -15,9 +15,7 @@ import { EfficiencyModeCard } from './components/EfficiencyModeCard/EfficiencyMo
 
 const pageTranslations = translations.aavePage;
 
-type BorrowPositionsListProps = {};
-
-export const BorrowPositionsList: FC<BorrowPositionsListProps> = () => {
+export const BorrowPositionsList: FC = () => {
   const { account } = useAccount();
   const [open, setOpen] = useState<boolean>(true);
   const [balance] = useState(123.45); // TODO: mock
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionAction/BorrowPositionAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionAction/BorrowPositionAction.tsx
index 598c50bc4..3ade7c06a 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionAction/BorrowPositionAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionAction/BorrowPositionAction.tsx
@@ -5,15 +5,11 @@ import { t } from 'i18next';
 import { Button, ButtonStyle } from '@sovryn/ui';
 
 import { translations } from '../../../../../../../locales/i18n';
-import { BorrowPosition } from '../../BorrowPositionsList.types';
 import { RepayModalContainer } from '../RepayModal/RepayModalContainer';
 
-type BorrowPositionActionProps = {
-  position: BorrowPosition;
-};
 
-export const BorrowPositionAction: FC<BorrowPositionActionProps> = () => {
-  const [isRepayModalOpen, setIsRepayModalOpen] = useState<boolean>(false);
+export const BorrowPositionAction: FC = () => {
+  const [isRepayModalOpen, setIsRepayModalOpen] = useState(false);
 
   const handleRepayClick = useCallback(() => {
     setIsRepayModalOpen(true);
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
index 076979a55..b6fb559d0 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
@@ -16,40 +16,35 @@ type BorrowPositionDetailsProps = {
 
 export const BorrowPositionDetails: FC<BorrowPositionDetailsProps> = ({
   position,
-}) => {
-  return (
-    <div className="space-y-3">
-      <div>
-        {/* Balance */}
-        <SimpleTableRow
-          label={t(translations.aavePage.common.balance)}
-          value={
-            <AssetAmountPriceRenderer
-              value={position.balance}
-              asset={position.asset}
-            />
-          }
-        />
-
-        {/* APR */}
-        <SimpleTableRow
-          label={
-            <span className="text-xs font-medium text-gray-30 flex items-center gap-1">
-              {t(translations.aavePage.common.apr)}
-              <HelperButton content={t(translations.aavePage.common.aprInfo)} />
-            </span>
-          }
-          value={<AmountRenderer value={position.apr} suffix="%" />}
-        />
-
-        {/* Apy type */}
-        <SimpleTableRow
-          label={t(translations.aavePage.common.apyType)}
-          value={t(translations.aavePage.common[position.apyType])}
-        />
-      </div>
-
-      <BorrowPositionAction position={position} />
+}) => (
+  <div className="space-y-3">
+    <div>
+      <SimpleTableRow
+        label={t(translations.aavePage.common.balance)}
+        value={
+          <AssetAmountPriceRenderer
+            value={position.balance}
+            asset={position.asset}
+          />
+        }
+      />
+
+      <SimpleTableRow
+        label={
+          <span className="text-xs font-medium text-gray-30 flex items-center gap-1">
+            {t(translations.aavePage.common.apr)}
+            <HelperButton content={t(translations.aavePage.common.aprInfo)} />
+          </span>
+        }
+        value={<AmountRenderer value={position.apr} suffix="%" />}
+      />
+
+      <SimpleTableRow
+        label={t(translations.aavePage.common.apyType)}
+        value={t(translations.aavePage.common[position.apyType])}
+      />
     </div>
-  );
-};
+
+    <BorrowPositionAction position={position} />
+  </div>
+);
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx
index 146c4effc..448de1cf4 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx
@@ -18,7 +18,7 @@ import { RepayWithWalletBalanceForm } from './RepayWithWalletBalanceForm';
 
 type RepayModalContainerProps = {
   isOpen: boolean;
-  handleCloseModal: () => unknown;
+  handleCloseModal: () => void;
 };
 
 enum RepayWith {
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithCollateralForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithCollateralForm.tsx
index ab81bb78d..31bb23995 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithCollateralForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithCollateralForm.tsx
@@ -23,7 +23,7 @@ import { CollateralRatioHealthBar } from '../../../CollateralRatioHealthBar/Coll
 const pageTranslations = translations.aavePage;
 
 type RepayWithCollateralFormProps = {
-  onSuccess: () => unknown;
+  onSuccess: () => void;
 };
 
 export const RepayWithCollateralForm: FC<RepayWithCollateralFormProps> = () => {
@@ -176,7 +176,7 @@ export const RepayWithCollateralForm: FC<RepayWithCollateralFormProps> = () => {
               />
             </div>
           }
-          value={<AmountRenderer value={assetPrice} prefix={'$'} />}
+          value={<AmountRenderer value={assetPrice} prefix="$" />}
         />
       </SimpleTable>
 
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx
index 9dda5864d..fd986c941 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx
@@ -21,7 +21,7 @@ import { CollateralRatioHealthBar } from '../../../CollateralRatioHealthBar/Coll
 const pageTranslations = translations.aavePage;
 
 type RepayWithWalletBalanceFormProps = {
-  onSuccess: () => unknown;
+  onSuccess: () => void;
 };
 
 export const RepayWithWalletBalanceForm: FC<
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
index 4d14b7028..e25572ae5 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
@@ -12,16 +12,22 @@ import { LendAssetDetails } from './components/LendAssetDetails/LendAssetDetails
 
 const pageTranslations = translations.aavePage;
 
-type LendAssetsListProps = {};
 
-export const LendAssetsList: FC<LendAssetsListProps> = () => {
-  const [open, setOpen] = useState<boolean>(true);
-  const [showZeroBalances, setShowZeroBalances] = useState<boolean>(true);
+export const LendAssetsList: FC = () => {
+  const [open, setOpen] = useState(true);
+  const [showZeroBalances, setShowZeroBalances] = useState(true);
   const [orderOptions, setOrderOptions] = useState<OrderOptions>();
 
   const mobileRenderer = useCallback(p => <LendAssetDetails pool={p} />, []);
   const rowTitleRenderer = useCallback(
-    r => <AaveRowTitle asset={r.asset} value={r.apy} suffix="%" label="APY" />,
+    row => (
+      <AaveRowTitle
+        asset={row.asset}
+        value={row.apy}
+        suffix="%"
+        label={t(translations.aavePage.common.apy)}
+      />
+    ),
     [],
   );
 
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
index 2aa07f6b1..42c9afe86 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
@@ -6,24 +6,20 @@ import { useNavigate } from 'react-router-dom';
 import { Button, ButtonStyle } from '@sovryn/ui';
 
 import { translations } from '../../../../../../../locales/i18n';
-import { LendPoolDetails } from '../../LendAssetsList.types';
 import { LendModalContainer } from '../LendModal/LendModalContainer';
 
-type LendAssetActionProps = {
-  pool: LendPoolDetails;
-};
 
-export const LendAssetAction: FC<LendAssetActionProps> = () => {
+export const LendAssetAction: FC = () => {
   const navigate = useNavigate();
-  const [isLendModalOpen, setIsLendModalOpen] = useState<boolean>(false);
+  const [isLendModalOpen, setIsLendModalOpen] = useState(false);
 
-  const handleLendClick = () => {
+  const handleLendClick = useCallback(() => {
     setIsLendModalOpen(true);
-  };
+  }, []);
 
-  const handleLendClose = () => {
+  const handleLendClose = useCallback(() => {
     setIsLendModalOpen(false);
-  };
+  }, []);
 
   return (
     <div className="flex items-center justify-center lg:justify-end space-x-2">
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
index f02aea902..cb94a1c96 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
@@ -15,49 +15,44 @@ type LendAssetDetailsProps = {
   pool: LendPoolDetails;
 };
 
-export const LendAssetDetails: FC<LendAssetDetailsProps> = ({ pool }) => {
-  return (
-    <div className="space-y-3">
-      <div>
-        {/* Available */}
-        <SimpleTableRow
-          label={t(translations.aavePage.lendAssetsList.walletBalance)}
-          value={
-            <AssetAmountPriceRenderer
-              value={pool.walletBalance}
-              asset={pool.asset}
-            />
-          }
-        />
-
-        {/* APY */}
-        <SimpleTableRow
-          label={
-            <span className="text-xs font-medium text-gray-30 flex gap-1 items-center">
-              {t(translations.aavePage.common.apy)}
-              <HelperButton content={t(translations.aavePage.common.apyInfo)} />
-            </span>
-          }
-          value={<AmountRenderer value={pool.apy} suffix="%" />}
-        />
-
-        {/* Can be collateral */}
-        <SimpleTableRow
-          label={t(translations.aavePage.lendAssetsList.canBeCollateral)}
-          valueClassName="flex justify-end"
-          value={
-            <Icon
-              icon={pool.canBeCollateral ? IconNames.CHECK : IconNames.X_MARK}
-              className={classNames(
-                'w-[10px]',
-                pool.canBeCollateral ? 'text-positive' : 'text-negative',
-              )}
-            />
-          }
-        />
-      </div>
-
-      <LendAssetAction pool={pool} />
+export const LendAssetDetails: FC<LendAssetDetailsProps> = ({ pool }) => (
+  <div className="space-y-3">
+    <div>
+      <SimpleTableRow
+        label={t(translations.aavePage.lendAssetsList.walletBalance)}
+        value={
+          <AssetAmountPriceRenderer
+            value={pool.walletBalance}
+            asset={pool.asset}
+          />
+        }
+      />
+
+      <SimpleTableRow
+        label={
+          <span className="text-xs font-medium text-gray-30 flex gap-1 items-center">
+            {t(translations.aavePage.common.apy)}
+            <HelperButton content={t(translations.aavePage.common.apyInfo)} />
+          </span>
+        }
+        value={<AmountRenderer value={pool.apy} suffix="%" />}
+      />
+
+      <SimpleTableRow
+        label={t(translations.aavePage.lendAssetsList.canBeCollateral)}
+        valueClassName="flex justify-end"
+        value={
+          <Icon
+            icon={pool.canBeCollateral ? IconNames.CHECK : IconNames.X_MARK}
+            className={classNames(
+              'w-[10px]',
+              pool.canBeCollateral ? 'text-positive' : 'text-negative',
+            )}
+          />
+        }
+      />
     </div>
-  );
-};
+
+    <LendAssetAction pool={pool} />
+  </div>
+);
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx
index 34fef11c9..ee0c4ae59 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx
@@ -82,7 +82,7 @@ export const LendForm: FC<LendFormProps> = () => {
       <SimpleTable>
         <SimpleTableRow
           label={t(translations.aavePage.lendModal.lendApy)}
-          value={<AmountRenderer value={lendApy} suffix={'%'} />}
+          value={<AmountRenderer value={lendApy} suffix="%" />}
         />
         <SimpleTableRow
           label={t(translations.aavePage.lendModal.collateralization)}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendModalContainer.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendModalContainer.tsx
index d165676d6..31e72739b 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendModalContainer.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendModalContainer.tsx
@@ -9,22 +9,20 @@ import { LendForm } from './LendForm';
 
 type LendModalContainerProps = {
   isOpen: boolean;
-  handleCloseModal: () => unknown;
+  handleCloseModal: () => void;
 };
 
 export const LendModalContainer: FC<LendModalContainerProps> = ({
   isOpen,
   handleCloseModal,
-}) => {
-  return (
-    <Dialog disableFocusTrap isOpen={isOpen}>
-      <DialogHeader
-        title={t(translations.aavePage.lendModal.title)}
-        onClose={handleCloseModal}
-      />
-      <DialogBody className="flex flex-col gap-6">
-        <LendForm onSuccess={handleCloseModal} />
-      </DialogBody>
-    </Dialog>
-  );
-};
+}) => (
+  <Dialog disableFocusTrap isOpen={isOpen}>
+    <DialogHeader
+      title={t(translations.aavePage.lendModal.title)}
+      onClose={handleCloseModal}
+    />
+    <DialogBody className="flex flex-col gap-6">
+      <LendForm onSuccess={handleCloseModal} />
+    </DialogBody>
+  </Dialog>
+);
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
index a0ab8d43f..d73c3e449 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
@@ -24,7 +24,7 @@ type LendPositionsListProps = {};
 
 export const LendPositionsList: FC<LendPositionsListProps> = () => {
   const { account } = useAccount();
-  const [open, setOpen] = useState<boolean>(true);
+  const [open, setOpen] = useState(true);
   const [balance] = useState(100); // TODO: mocked data
   const [apy] = useState(2.3); // TODO: mocked data
   const [collateral] = useState(3); // TODO: mocked data
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
index 17c2285c6..3dadeafd6 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
@@ -5,24 +5,19 @@ import { t } from 'i18next';
 import { Button, ButtonStyle } from '@sovryn/ui';
 
 import { translations } from '../../../../../../../locales/i18n';
-import { LendPosition } from '../../LendPositionsList.types';
 import { WithdrawModalContainer } from '../WithdrawModal/WithdrawModalContainer';
 
-type LendPositionActionProps = {
-  position: LendPosition;
-};
 
-export const LendPositionAction: FC<LendPositionActionProps> = () => {
-  const [isWithdrawModalOpen, setIsWithdrawModalOpen] =
-    useState<boolean>(false);
+export const LendPositionAction: FC = () => {
+  const [isWithdrawModalOpen, setIsWithdrawModalOpen] = useState(false);
 
-  const handleWithdrawClick = () => {
+  const handleWithdrawClick = useCallback(() => {
     setIsWithdrawModalOpen(true);
-  };
+  }, []);
 
-  const handleWithdrawClose = () => {
+  const handleWithdrawClose = useCallback(() => {
     setIsWithdrawModalOpen(false);
-  };
+  }, []);
 
   return (
     <div className="flex items-center justify-center lg:justify-end space-x-2">
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
index d1bcd4c36..678b099cb 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
@@ -17,43 +17,38 @@ type LendPositionDetailsProps = {
 
 export const LendPositionDetails: FC<LendPositionDetailsProps> = ({
   position,
-}) => {
-  return (
-    <div className="space-y-3">
-      <div>
-        {/* Balance */}
-        <SimpleTableRow
-          label={t(translations.aavePage.common.balance)}
-          value={
-            <AssetAmountPriceRenderer
-              value={position.balance}
-              asset={position.asset}
+}) => (
+  <div className="space-y-3">
+    <div>
+      <SimpleTableRow
+        label={t(translations.aavePage.common.balance)}
+        value={
+          <AssetAmountPriceRenderer
+            value={position.balance}
+            asset={position.asset}
+          />
+        }
+      />
+
+      <SimpleTableRow
+        label={
+          <span className="text-xs font-medium text-gray-30 flex gap-1 items-center">
+            {t(translations.aavePage.common.apy)}
+            <HelperButton
+              content={t(translations.aavePage.common.apyInfo)}
+              className="text-gray-30"
             />
-          }
-        />
-
-        {/* APY */}
-        <SimpleTableRow
-          label={
-            <span className="text-xs font-medium text-gray-30 flex gap-1 items-center">
-              {t(translations.aavePage.common.apy)}
-              <HelperButton
-                content={t(translations.aavePage.common.apyInfo)}
-                className="text-gray-30"
-              />
-            </span>
-          }
-          value={<AmountRenderer value={position.apy} suffix={'%'} />}
-        />
-
-        {/* Can be collateral */}
-        <SimpleTableRow
-          label={t(translations.aavePage.lendPositionsList.usedAsCollateral)}
-          value={<ToggleCollateralAction position={position} />}
-        />
-      </div>
-
-      <LendPositionAction position={position} />
+          </span>
+        }
+        value={<AmountRenderer value={position.apy} suffix={'%'} />}
+      />
+
+      <SimpleTableRow
+        label={t(translations.aavePage.lendPositionsList.usedAsCollateral)}
+        value={<ToggleCollateralAction position={position} />}
+      />
     </div>
-  );
-};
+
+    <LendPositionAction position={position} />
+  </div>
+);
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx
index 1697c2de7..eb59794cb 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx
@@ -10,12 +10,10 @@ type ToggleCollateralActionProps = {
 
 export const ToggleCollateralAction: FC<ToggleCollateralActionProps> = ({
   position,
-}) => {
-  return (
-    <Toggle
-      className="[&_*]:ml-0"
-      checked={position.collateral}
-      onChange={() => 'TODO: implement'}
-    />
-  );
-};
+}) => (
+  <Toggle
+    className="[&_*]:ml-0"
+    checked={position.collateral}
+    onChange={() => 'TODO: implement'}
+  />
+);
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
index e2eea3717..4153cafb2 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
@@ -22,7 +22,7 @@ import { translations } from '../../../../../../../locales/i18n';
 const pageTranslations = translations.aavePage;
 
 type WithdrawFormProps = {
-  onSuccess: () => unknown;
+  onSuccess: () => void;
 };
 
 export const WithdrawForm: FC<WithdrawFormProps> = () => {
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx
index 3c2474a8b..cb94fc6ae 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx
@@ -15,16 +15,14 @@ type WithdrawModalContainerProps = {
 export const WithdrawModalContainer: FC<WithdrawModalContainerProps> = ({
   isOpen,
   handleCloseModal,
-}) => {
-  return (
-    <Dialog disableFocusTrap isOpen={isOpen}>
-      <DialogHeader
-        title={t(translations.aavePage.common.withdraw)}
-        onClose={handleCloseModal}
-      />
-      <DialogBody className="flex flex-col gap-6">
-        <WithdrawForm onSuccess={handleCloseModal} />
-      </DialogBody>
-    </Dialog>
-  );
-};
+}) => (
+  <Dialog disableFocusTrap isOpen={isOpen}>
+    <DialogHeader
+      title={t(translations.aavePage.common.withdraw)}
+      onClose={handleCloseModal}
+    />
+    <DialogBody className="flex flex-col gap-6">
+      <WithdrawForm onSuccess={handleCloseModal} />
+    </DialogBody>
+  </Dialog>
+);
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/PoolPositionStat/PoolPositionStat.tsx b/apps/frontend/src/app/5_pages/AavePage/components/PoolPositionStat/PoolPositionStat.tsx
index 87aeb177b..6909f3d18 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/PoolPositionStat/PoolPositionStat.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/PoolPositionStat/PoolPositionStat.tsx
@@ -19,31 +19,29 @@ export const PoolPositionStat: React.FC<PoolPositionStatProps> = ({
   labelInfo,
   className,
   ...props
-}) => {
-  return (
-    <div
-      className={classNames(
-        'flex items-center justify-between lg:gap-2 lg:px-3 lg:py-2 lg:rounded-md lg:bg-gray-70 text-gray-30',
-        className,
+}) => (
+  <div
+    className={classNames(
+      'flex items-center justify-between lg:gap-2 lg:px-3 lg:py-2 lg:rounded-md lg:bg-gray-70 text-gray-30',
+      className,
+    )}
+  >
+    <span className="text-xs  font-medium flex">
+      {label}
+      {labelInfo && (
+        <HelperButton className="ml-2 lg:hidden" content={labelInfo} />
       )}
-    >
-      <span className="text-xs  font-medium flex">
-        {label}
-        {labelInfo && (
-          <HelperButton className="ml-2 lg:hidden" content={labelInfo} />
-        )}
-      </span>
+    </span>
 
-      <div className="flex gap-[6px] items-center">
-        <AmountRenderer
-          {...props}
-          className="text-xs  font-medium lg:text-sm lg:text-white"
-        />
+    <div className="flex gap-[6px] items-center">
+      <AmountRenderer
+        {...props}
+        className="text-xs  font-medium lg:text-sm lg:text-white"
+      />
 
-        {labelInfo && (
-          <HelperButton className="ml-1 hidden lg:block" content={labelInfo} />
-        )}
-      </div>
+      {labelInfo && (
+        <HelperButton className="ml-1 hidden lg:block" content={labelInfo} />
+      )}
     </div>
-  );
-};
+  </div>
+);
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
index 26f12e9fd..6c75b286d 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
@@ -15,10 +15,9 @@ import { MockData } from './components/Chart/Chart.types';
 
 const pageTranslations = translations.aaveReserveOverviewPage.borrowDetails;
 
-type BorrowDetailsGraphProps = {};
 
-export const BorrowDetailsGraph: FC<BorrowDetailsGraphProps> = () => {
-  const [open, setOpen] = useState<boolean>(true);
+export const BorrowDetailsGraph: FC = () => {
+  const [open, setOpen] = useState(true);
   const { isMobile } = useIsMobile();
 
   // TODO: mocked amounts
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx
index b23f9b753..18a28ced9 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx
@@ -12,10 +12,9 @@ import { translations } from '../../../../../locales/i18n';
 
 const pageTranslations = translations.aaveReserveOverviewPage.eModeDetails;
 
-type EModeDetailsProps = {};
 
-export const EModeDetails: FC<EModeDetailsProps> = () => {
-  const [open, setOpen] = useState<boolean>(true);
+export const EModeDetails: FC = () => {
+  const [open, setOpen] = useState(true);
   const { isMobile } = useIsMobile();
 
   // TODO: All this data is mocked
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
index 12a4bcb10..0d6fc0147 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
@@ -17,8 +17,8 @@ const pageTranslations = translations.aaveReserveOverviewPage.interestRateModel;
 
 type InterestRateModelGraphProps = {};
 
-export const InterestRateModelGraph: FC<InterestRateModelGraphProps> = () => {
-  const [open, setOpen] = useState<boolean>(true);
+export const InterestRateModelGraph: FC = () => {
+  const [open, setOpen] = useState(true);
   const { isMobile } = useIsMobile();
 
   // TODO: mocked amounts
@@ -48,6 +48,7 @@ export const InterestRateModelGraph: FC<InterestRateModelGraphProps> = () => {
       open={open || !isMobile}
       onClick={setOpen}
       flatMode={!isMobile}
+      dataAttribute="interest-rate-model"
     >
       <div className="space-y-8 pt-2">
         <div className="flex justify-between items-end">
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
index 47ace5046..aadcbc675 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
@@ -17,7 +17,7 @@ const pageTranslations = translations.aaveReserveOverviewPage.supplyDetails;
 
 
 export const SupplyDetailsGraph: FC = () => {
-  const [open, setOpen] = useState<boolean>(true);
+  const [open, setOpen] = useState(true);
   const { isMobile } = useIsMobile();
   // TODO: mocked amounts
   const mockData: MockData<{ x: string; y: number }> = useMemo(() => {
@@ -43,6 +43,7 @@ export const SupplyDetailsGraph: FC = () => {
       open={open || !isMobile}
       onClick={setOpen}
       flatMode={!isMobile}
+      dataAttribute="supply-details"
     >
       <div className="space-y-8 pt-2">
         <div className="flex gap-8">
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx
index 18e05b312..3adbb4f44 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx
@@ -37,7 +37,7 @@ export const SupplyAction: FC<SupplyActionProps> = ({ asset }) => {
         <AssetAmountPriceRenderer
           value={availableToSupply}
           asset={asset}
-          //   className="text-left flex flex-col"
+          className="text-left flex flex-col"
           valueClassName="font-medium"
         />
       </div>
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index 65ac2d9f6..1257de802 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -816,7 +816,7 @@
             "netApy": "Net API",
             "netApyInfo": "Net APY is the combined effect of all supply and borrow positions on net worth, including incentives. It is possible to have a negative net APY if debt APY is higher than supply APY.",
             "collateralRatio": "Collateral ratio",
-            "collateralRatioInfo": "The collateral ratio defines the maximum amount of assets that can be borrowed with a specific collatera",
+            "collateralRatioInfo": "The collateral ratio defines the maximum amount of assets that can be borrowed with a specific collateral",
             "viewTransactions": "View transactions"
         },
         "borrowPositionsList": {
@@ -2211,4 +2211,4 @@
         "text": "You have {{value}} LM SOV rewards vested stakes that you need to withdraw before claiming more.",
         "cta": "Open Rewards page"
     }
-}
\ No newline at end of file
+}

From 55f38c9a14b3b13a6d40263035711831837d9e29 Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Tue, 27 Aug 2024 10:56:32 -0300
Subject: [PATCH 067/116] Apply suggestions from code review

Co-authored-by: Pietro <74987028+pietro-maximoff@users.noreply.github.com>
---
 .../components/LendAssetsList/components/LendModal/LendForm.tsx | 2 +-
 .../InterestRateModelGraph/InterestRateModelGraph.tsx           | 2 +-
 .../components/SupplyDetailsGraph/SupplyDetailsGraph.tsx        | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx
index ee0c4ae59..a77c1ee63 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx
@@ -20,7 +20,7 @@ import { translations } from '../../../../../../../locales/i18n';
 const pageTranslations = translations.aavePage;
 
 type LendFormProps = {
-  onSuccess: () => unknown;
+  onSuccess: () => void;
 };
 
 export const LendForm: FC<LendFormProps> = () => {
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
index 0d6fc0147..0bf24fa46 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
@@ -15,7 +15,6 @@ import { MockData } from './components/Chart/Chart.types';
 
 const pageTranslations = translations.aaveReserveOverviewPage.interestRateModel;
 
-type InterestRateModelGraphProps = {};
 
 export const InterestRateModelGraph: FC = () => {
   const [open, setOpen] = useState(true);
@@ -49,6 +48,7 @@ export const InterestRateModelGraph: FC = () => {
       onClick={setOpen}
       flatMode={!isMobile}
       dataAttribute="interest-rate-model"
+      dataAttribute="interest-rate-model"
     >
       <div className="space-y-8 pt-2">
         <div className="flex justify-between items-end">
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
index aadcbc675..1bd3cfe6f 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
@@ -44,6 +44,7 @@ export const SupplyDetailsGraph: FC = () => {
       onClick={setOpen}
       flatMode={!isMobile}
       dataAttribute="supply-details"
+      dataAttribute="supply-details"
     >
       <div className="space-y-8 pt-2">
         <div className="flex gap-8">

From ab1ae57fd80dea78d8f57b5e09cb153bd708a2d6 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Tue, 27 Aug 2024 16:57:08 +0300
Subject: [PATCH 068/116] pr comments

---
 .../components/BorrowModal/BorrowForm.tsx        |  5 ++++-
 .../BorrowPositionsList/BorrowPositionsList.tsx  |  4 +++-
 .../components/Chart/Chart.tsx                   | 16 +++++++++-------
 .../components/EModeDetails/EModeDetails.tsx     |  9 +++++----
 .../InterestRateModelGraph.tsx                   |  2 --
 .../components/Chart/Chart.tsx                   | 16 +++++++++-------
 .../components/Chart/Chart.tsx                   | 16 +++++++++-------
 .../components/SupplyAction/SupplyAction.tsx     | 11 +++++------
 apps/frontend/src/locales/en/translations.json   |  4 +++-
 9 files changed, 47 insertions(+), 36 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
index 97a3f1e70..251e42c4b 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
@@ -149,7 +149,10 @@ export const BorrowForm: FC<BorrowFormProps> = () => {
         label={
           <span>
             {t(translations.aavePage.borrowForm.acknowledge)}{' '}
-            <Link text="Learn more" href="#learn-more" />
+            <Link
+              text={translations.aavePage.borrowForm.learnMore}
+              href="#learn-more"
+            />
             {/* TODO: Add proper learn more href */}
           </span>
         }
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
index 26980917b..7e0a581a3 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
@@ -55,7 +55,9 @@ export const BorrowPositionsList: FC = () => {
         <div className="text-base font-medium text-left lg:flex lg:items-center lg:gap-8">
           <span>{t(pageTranslations.borrowPositionsList.title)}</span>
           <div className="hidden lg:flex gap-3">
-            <span className="text-gray-30 font-medium text-sm">E-Mode</span>
+            <span className="text-gray-30 font-medium text-sm">
+              {pageTranslations.borrowPositionsList.eMode}
+            </span>
             <EfficiencyModeCard />
           </div>
         </div>
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx
index e16a4b200..90fd79cc8 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useRef } from 'react';
+import React, { FC, useCallback, useEffect, useRef } from 'react';
 
 import ChartLibrary from 'chart.js/auto';
 import 'chartjs-adapter-date-fns';
@@ -103,13 +103,15 @@ export const Chart: FC<ChartProps> = ({ mockData }) => {
     };
   }, [mockData]);
 
+  const stopPropagation = useCallback(
+    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+      e.stopPropagation();
+    },
+    [],
+  );
+
   return (
-    <div
-      onClick={e => {
-        e.stopPropagation();
-      }}
-      className="lg:p-6 lg:bg-gray-80"
-    >
+    <div onClick={stopPropagation} className="lg:p-6 lg:bg-gray-80">
       <span id="legend-container-borrow-chart" className="text-tiny"></span>
       <canvas ref={canvas}></canvas>
     </div>
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx
index 18a28ced9..e29fc6d04 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx
@@ -12,7 +12,6 @@ import { translations } from '../../../../../locales/i18n';
 
 const pageTranslations = translations.aaveReserveOverviewPage.eModeDetails;
 
-
 export const EModeDetails: FC = () => {
   const [open, setOpen] = useState(true);
   const { isMobile } = useIsMobile();
@@ -41,10 +40,12 @@ export const EModeDetails: FC = () => {
           <Paragraph className="text-sm font-medium">
             {t(pageTranslations.category)}
           </Paragraph>
-          <Paragraph className="text-sm font-medium flex items-center">
+          <div className="flex items-center">
             <Icon size={16} className="mr-2 text-primary-30" icon={EModeIcon} />
-            {t(pageTranslations.ethCorrelatedCategory)}
-          </Paragraph>
+            <Paragraph className="text-sm font-medium">
+              {t(pageTranslations.ethCorrelatedCategory)}
+            </Paragraph>
+          </div>
         </div>
 
         <div className="grid grid-cols-3 gap-5">
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
index 0d6fc0147..3e75d41ad 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
@@ -15,8 +15,6 @@ import { MockData } from './components/Chart/Chart.types';
 
 const pageTranslations = translations.aaveReserveOverviewPage.interestRateModel;
 
-type InterestRateModelGraphProps = {};
-
 export const InterestRateModelGraph: FC = () => {
   const [open, setOpen] = useState(true);
   const { isMobile } = useIsMobile();
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
index 54892247a..aa372e47f 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useRef } from 'react';
+import React, { FC, useCallback, useEffect, useRef } from 'react';
 
 import ChartLibrary from 'chart.js/auto';
 import 'chartjs-adapter-date-fns';
@@ -120,13 +120,15 @@ export const Chart: FC<ChartProps> = ({ mockData }) => {
     };
   }, [mockData]);
 
+  const stopPropagation = useCallback(
+    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+      e.stopPropagation();
+    },
+    [],
+  );
+
   return (
-    <div
-      onClick={e => {
-        e.stopPropagation();
-      }}
-      className="lg:p-6 lg:bg-gray-80"
-    >
+    <div onClick={stopPropagation} className="lg:p-6 lg:bg-gray-80">
       <span id="legend-container-interest-chart" className="text-tiny"></span>
       <canvas ref={canvas}></canvas>
     </div>
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.tsx
index aab0f7505..279d2e8b4 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useRef } from 'react';
+import React, { FC, useCallback, useEffect, useRef } from 'react';
 
 import ChartLibrary from 'chart.js/auto';
 import 'chartjs-adapter-date-fns';
@@ -105,13 +105,15 @@ export const Chart: FC<ChartProps> = ({ mockData }) => {
     };
   }, [mockData]);
 
+  const stopPropagation = useCallback(
+    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+      e.stopPropagation();
+    },
+    [],
+  );
+
   return (
-    <div
-      onClick={e => {
-        e.stopPropagation();
-      }}
-      className="lg:p-6 lg:bg-gray-80"
-    >
+    <div onClick={stopPropagation} className="lg:p-6 lg:bg-gray-80">
       <span id="legend-container-supply-chart" className="text-tiny"></span>
       <canvas ref={canvas}></canvas>
     </div>
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx
index 3adbb4f44..7f60b8674 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx
@@ -25,15 +25,14 @@ export const SupplyAction: FC<SupplyActionProps> = ({ asset }) => {
   return (
     <div className="flex justify-between items-center">
       <div>
-        <Paragraph
-          size={ParagraphSize.small}
-          className="text-gray-30 flex items-center gap-1"
-        >
-          {t(pageTranslations.yourWalletTab.availableToSupply)}{' '}
+        <div className="flex items-center gap-1">
+          <Paragraph size={ParagraphSize.small} className="text-gray-30">
+            {t(pageTranslations.yourWalletTab.availableToSupply)}{' '}
+          </Paragraph>
           <HelperButton
             content={t(pageTranslations.yourWalletTab.availableToSupplyInfo)}
           />
-        </Paragraph>
+        </div>
         <AssetAmountPriceRenderer
           value={availableToSupply}
           asset={asset}
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index 1257de802..6902be927 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -822,7 +822,8 @@
         "borrowPositionsList": {
             "title": "Your loans",
             "repay": "Repay",
-            "borrowPowerUsed": "Borrow power used"
+            "borrowPowerUsed": "Borrow power used",
+            "eMode": "E-Mode"
         },
         "borrowAssetsList": {
             "title": "Assets to borrow",
@@ -856,6 +857,7 @@
         },
         "borrowForm": {
             "borrowApr": "Borrow APR",
+            "learnMore":"Learn more",
             "collateralRatio": "Collateral ratio",
             "liquidationPrice": "Liquidation price",
             "acknowledge": "I understand that my collateral may be liquidated or used to pay rollover fees if applicable.",

From c648b459508d0ef41544188a1442cfde0b1229bd Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Wed, 28 Aug 2024 18:38:03 +0300
Subject: [PATCH 069/116] fixes

---
 .../BorrowAssetsList/BorrowAssetsList.constants.tsx   |  5 ++---
 .../BorrowPositionsList.constants.tsx                 |  4 +---
 .../BorrowPositionsList/BorrowPositionsList.tsx       |  2 +-
 .../BorrowPositionDetails/BorrowPositionDetails.tsx   |  2 +-
 .../LendAssetsList/LendAssetsList.constants.tsx       |  6 +++++-
 .../components/LendAssetAction/LendAssetAction.tsx    |  3 +--
 .../components/LendAssetDetails/LendAssetDetails.tsx  |  2 +-
 .../LendPositionsList/LendPositionsList.constants.tsx | 11 +++++++----
 .../LendPositionAction/LendPositionAction.tsx         |  3 +--
 .../LendPositionDetails/LendPositionDetails.tsx       |  2 +-
 .../SupplyDetailsGraph/SupplyDetailsGraph.tsx         |  2 --
 11 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
index b98682ea1..624707f63 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
@@ -46,6 +46,7 @@ export const COLUMNS_CONFIG = [
     ),
     cellRenderer: (position: BorrowPoolDetails) => (
       <AssetAmountPriceRenderer
+        className="flex flex-col justify-center"
         value={position.available}
         asset={position.asset}
       />
@@ -70,8 +71,6 @@ export const COLUMNS_CONFIG = [
     id: 'actions',
     align: Align.center,
     title: ' ',
-    cellRenderer: (pool: BorrowPoolDetails) => (
-      <BorrowAssetAction pool={pool} />
-    ),
+    cellRenderer: () => <BorrowAssetAction />,
   },
 ];
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
index 23a4cc203..e5846b679 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
@@ -78,8 +78,6 @@ export const COLUMNS_CONFIG = [
     id: 'actions',
     align: Align.center,
     title: ' ',
-    cellRenderer: (position: BorrowPosition) => (
-      <BorrowPositionAction position={position} />
-    ),
+    cellRenderer: () => <BorrowPositionAction />,
   },
 ];
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
index 7e0a581a3..52d4d1f8d 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
@@ -56,7 +56,7 @@ export const BorrowPositionsList: FC = () => {
           <span>{t(pageTranslations.borrowPositionsList.title)}</span>
           <div className="hidden lg:flex gap-3">
             <span className="text-gray-30 font-medium text-sm">
-              {pageTranslations.borrowPositionsList.eMode}
+              {t(pageTranslations.borrowPositionsList.eMode)}
             </span>
             <EfficiencyModeCard />
           </div>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
index b6fb559d0..c0c61255b 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
@@ -45,6 +45,6 @@ export const BorrowPositionDetails: FC<BorrowPositionDetailsProps> = ({
       />
     </div>
 
-    <BorrowPositionAction position={position} />
+    <BorrowPositionAction />
   </div>
 );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
index 75cd765b7..99bfc4340 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
@@ -17,6 +17,7 @@ export const COLUMNS_CONFIG = [
     id: 'asset',
     sortable: true,
     align: Align.center,
+    className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
     title: (
       <span className="text-gray-30">{t(pageTranslations.common.asset)}</span>
     ),
@@ -34,6 +35,7 @@ export const COLUMNS_CONFIG = [
     id: 'walletBalance',
     sortable: true,
     align: Align.center,
+    className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
     title: (
       <span className="text-gray-30">
         {t(pageTranslations.lendAssetsList.walletBalance)}
@@ -47,6 +49,7 @@ export const COLUMNS_CONFIG = [
     id: 'apy',
     sortable: true,
     align: Align.center,
+    className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
     title: (
       <span className="flex items-center gap-1 text-gray-30">
         {t(pageTranslations.common.apy)}
@@ -61,6 +64,7 @@ export const COLUMNS_CONFIG = [
     id: 'canBeCollateral',
     sortable: true,
     align: Align.center,
+    className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
     title: (
       <span className="text-gray-30">
         {t(pageTranslations.lendAssetsList.canBeCollateral)}
@@ -80,6 +84,6 @@ export const COLUMNS_CONFIG = [
     id: 'actions',
     align: Align.center,
     title: ' ',
-    cellRenderer: (pool: LendPoolDetails) => <LendAssetAction pool={pool} />,
+    cellRenderer: () => <LendAssetAction />,
   },
 ];
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
index 42c9afe86..2e6b1dd86 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useCallback, useState } from 'react';
 
 import { t } from 'i18next';
 import { useNavigate } from 'react-router-dom';
@@ -8,7 +8,6 @@ import { Button, ButtonStyle } from '@sovryn/ui';
 import { translations } from '../../../../../../../locales/i18n';
 import { LendModalContainer } from '../LendModal/LendModalContainer';
 
-
 export const LendAssetAction: FC = () => {
   const navigate = useNavigate();
   const [isLendModalOpen, setIsLendModalOpen] = useState(false);
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
index cb94a1c96..e10ced1eb 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
@@ -53,6 +53,6 @@ export const LendAssetDetails: FC<LendAssetDetailsProps> = ({ pool }) => (
       />
     </div>
 
-    <LendAssetAction pool={pool} />
+    <LendAssetAction />
   </div>
 );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
index 5f875685a..881dff6b8 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
@@ -42,6 +42,7 @@ export const COLUMNS_CONFIG = [
     ),
     cellRenderer: (position: LendPosition) => (
       <AssetAmountPriceRenderer
+        className="flex flex-col justify-center"
         value={position.balance}
         asset={position.asset}
       />
@@ -59,7 +60,11 @@ export const COLUMNS_CONFIG = [
       </span>
     ),
     cellRenderer: (position: LendPosition) => (
-      <AmountRenderer value={position.balance} suffix={position.asset} />
+      <AmountRenderer
+        className="text-center"
+        value={position.balance}
+        suffix={'%'}
+      />
     ),
   },
   {
@@ -79,8 +84,6 @@ export const COLUMNS_CONFIG = [
     id: 'actions',
     align: Align.center,
     title: ' ',
-    cellRenderer: (position: LendPosition) => (
-      <LendPositionAction position={position} />
-    ),
+    cellRenderer: () => <LendPositionAction />,
   },
 ];
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
index 3dadeafd6..4921b9e9d 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useCallback, useState } from 'react';
 
 import { t } from 'i18next';
 
@@ -7,7 +7,6 @@ import { Button, ButtonStyle } from '@sovryn/ui';
 import { translations } from '../../../../../../../locales/i18n';
 import { WithdrawModalContainer } from '../WithdrawModal/WithdrawModalContainer';
 
-
 export const LendPositionAction: FC = () => {
   const [isWithdrawModalOpen, setIsWithdrawModalOpen] = useState(false);
 
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
index 678b099cb..118cb3026 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
@@ -49,6 +49,6 @@ export const LendPositionDetails: FC<LendPositionDetailsProps> = ({
       />
     </div>
 
-    <LendPositionAction position={position} />
+    <LendPositionAction />
   </div>
 );
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
index 1bd3cfe6f..ad1e28006 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
@@ -15,7 +15,6 @@ import { MockData } from './components/Chart/Chart.types';
 
 const pageTranslations = translations.aaveReserveOverviewPage.supplyDetails;
 
-
 export const SupplyDetailsGraph: FC = () => {
   const [open, setOpen] = useState(true);
   const { isMobile } = useIsMobile();
@@ -44,7 +43,6 @@ export const SupplyDetailsGraph: FC = () => {
       onClick={setOpen}
       flatMode={!isMobile}
       dataAttribute="supply-details"
-      dataAttribute="supply-details"
     >
       <div className="space-y-8 pt-2">
         <div className="flex gap-8">

From 2cf45e69f43e041778b22503982fbf90506b3edd Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Wed, 28 Aug 2024 18:48:05 +0300
Subject: [PATCH 070/116] fixes

---
 .../AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx   | 2 +-
 .../BorrowAssetsList/BorrowAssetsList.constants.tsx         | 4 +++-
 .../components/BorrowAssetsList/BorrowAssetsList.tsx        | 4 ++--
 .../BorrowPositionsList/BorrowPositionsList.constants.tsx   | 4 +++-
 .../BorrowPositionDetails/BorrowPositionDetails.tsx         | 2 +-
 .../components/LendAssetsList/LendAssetsList.constants.tsx  | 2 +-
 .../components/LendAssetDetails/LendAssetDetails.tsx        | 2 +-
 .../LendPositionsList/LendPositionsList.constants.tsx       | 6 ++++--
 .../components/LendPositionDetails/LendPositionDetails.tsx  | 2 +-
 9 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/apps/frontend/src/app/2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx b/apps/frontend/src/app/2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx
index 73e2ea46d..e28e4ca3d 100644
--- a/apps/frontend/src/app/2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx
+++ b/apps/frontend/src/app/2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx
@@ -24,7 +24,7 @@ export const AssetAmountPriceRenderer: FC<AssetAmountPriceRendererProps> = ({
   priceClassName,
 }) => {
   return (
-    <div className={className ?? 'flex flex-col text-right space-y-1'}>
+    <div className={classNames('flex flex-col gap-1', className)}>
       <AmountRenderer
         value={value}
         suffix={asset}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
index 7bafc4a98..9a3b17ede 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
@@ -78,6 +78,8 @@ export const COLUMNS_CONFIG = [
     id: 'actions',
     align: Align.center,
     title: ' ',
-    cellRenderer: () => <BorrowAssetAction />,
+    cellRenderer: (pool: BorrowPoolDetails) => (
+      <BorrowAssetAction pool={pool} />
+    ),
   },
 ];
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
index ad89af23e..76899fff1 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
@@ -23,10 +23,10 @@ export const BorrowAssetsList: FC<BorrowAssetsListProps> = ({
   const [orderOptions, setOrderOptions] = useState<OrderOptions>();
 
   const rowTitleRenderer = useCallback(
-    row => (
+    (row: BorrowPoolDetails) => (
       <AaveRowTitle
         asset={row.asset}
-        value={row.apr}
+        value={row.apy}
         suffix="%"
         label={t(translations.aavePage.common.apy)}
         precision={2}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
index 1b6cec8f8..979f9a652 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
@@ -88,6 +88,8 @@ export const COLUMNS_CONFIG = [
     id: 'actions',
     align: Align.center,
     title: ' ',
-    cellRenderer: () => <BorrowPositionAction />,
+    cellRenderer: (position: BorrowPosition) => (
+      <BorrowPositionAction position={position} />
+    ),
   },
 ];
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
index a25a39e9f..40352742e 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
@@ -54,6 +54,6 @@ export const BorrowPositionDetails: FC<BorrowPositionDetailsProps> = ({
       />
     </div>
 
-    <BorrowPositionAction />
+    <BorrowPositionAction position={position} />
   </div>
 );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
index 13c080d3b..cdcf6165c 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
@@ -88,6 +88,6 @@ export const COLUMNS_CONFIG = [
     id: 'actions',
     align: Align.center,
     title: ' ',
-    cellRenderer: () => <LendAssetAction />,
+    cellRenderer: (pool: LendPoolDetails) => <LendAssetAction pool={pool} />,
   },
 ];
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
index f4462d6c1..50f6615d6 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
@@ -49,6 +49,6 @@ export const LendAssetDetails: FC<LendAssetDetailsProps> = ({ pool }) => (
       />
     </div>
 
-    <LendAssetAction />
+    <LendAssetAction pool={pool} />
   </div>
 );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
index 2ac609537..8b3796671 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
@@ -63,7 +63,7 @@ export const COLUMNS_CONFIG = [
       </span>
     ),
     cellRenderer: (position: LendPosition) => (
-      <AmountRenderer value={position.apy} suffix={'%'} precision={2} />
+      <AmountRenderer value={position.apy} suffix="%" precision={2} />
     ),
   },
   {
@@ -83,6 +83,8 @@ export const COLUMNS_CONFIG = [
     id: 'actions',
     align: Align.center,
     title: ' ',
-    cellRenderer: () => <LendPositionAction />,
+    cellRenderer: (position: LendPosition) => (
+      <LendPositionAction position={position} />
+    ),
   },
 ];
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
index 85089f731..b1010515a 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
@@ -50,6 +50,6 @@ export const LendPositionDetails: FC<LendPositionDetailsProps> = ({
       />
     </div>
 
-    <LendPositionAction />
+    <LendPositionAction position={position} />
   </div>
 );

From 1769f6b496567fc3448ba198ff088b1410eaba6d Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Thu, 29 Aug 2024 22:42:18 +0300
Subject: [PATCH 071/116] SAF-49 setup bob (#29)

* cleanup

* fixes

* fixes. Connect provider. Fix repay adding proper allowance. Fix switch collateral token.address instead of token

* refetch user data based on blocknumber

* fix modal closing on lending positions change plus style adjustments

* fix withdraw modals

* modal fixes

* fix calculation
add balances and filter zero balances

* use memo items

* fix dependencies

* data normalizers

* Apply suggestions from code review

Co-authored-by: Juan <juandahl@users.noreply.github.com>

* Update apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx

Co-authored-by: Juan <juandahl@users.noreply.github.com>

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

Co-authored-by: Juan <juandahl@users.noreply.github.com>

* wip refactor done. Missing hooks merge

* implementations and cleanup

* cleanup

* cleanup

* math safety

* more math safety

* cleanup

* clenaup

---------

Co-authored-by: Juan <juandahl@users.noreply.github.com>
---
 .../AssetAmountInput/AssetAmountInput.tsx     |   3 +-
 .../src/app/5_pages/AavePage/AavePage.tsx     | 110 +++---
 .../app/5_pages/AavePage/AavePage.utils.tsx   |  83 ++++
 .../BorrowAssetsList.constants.tsx            |   4 +-
 .../BorrowAssetsList/BorrowAssetsList.tsx     |  44 ++-
 .../BorrowAssetAction/BorrowAssetAction.tsx   |  27 +-
 .../BorrowAssetDetails/BorrowAssetDetails.tsx |  10 +-
 .../components/BorrowModal/BorrowForm.tsx     | 135 ++++---
 .../BorrowModal/BorrowForm.utils.ts           |  34 --
 .../BorrowModal/BorrowModalContainer.tsx      |  30 --
 .../BorrowPositionsList.constants.tsx         |   8 +-
 .../BorrowPositionsList.tsx                   |  56 ++-
 .../BorrowPositionsList.types.tsx             |   4 +-
 .../BorrowPositionAction.tsx                  |  46 +--
 .../BorrowPositionDetails.tsx                 |   8 +-
 .../components/RepayForm/RepayForm.tsx        |  65 +++
 .../RepayWithCollateralForm.tsx               |   6 +-
 .../RepayWithWalletBalanceForm.tsx            | 103 +++--
 .../RepayModal/RepayModalContainer.tsx        |  83 ----
 .../CollateralRatioHealthBar.tsx              |  13 +-
 .../CollateralRatioHealthBar.utils.tsx        |   7 +-
 .../LendAssetsList.constants.tsx              |  13 +-
 .../LendAssetsList/LendAssetsList.tsx         |  49 ++-
 .../LendAssetsList/LendAssetsList.types.tsx   |   1 +
 .../components/AssetBalance/AssetBalance.tsx  |   7 +-
 .../LendAssetAction/LendAssetAction.tsx       |  25 +-
 .../LendAssetDetails/LendAssetDetails.tsx     |   9 +-
 .../{LendModal => LendForm}/LendForm.tsx      |  24 +-
 .../LendModal/LendModalContainer.tsx          |  30 --
 .../LendPositionsList.constants.tsx           |   6 +-
 .../LendPositionsList/LendPositionsList.tsx   |  54 ++-
 .../LendPositionAction/LendPositionAction.tsx |  26 +-
 .../LendPositionDetails.tsx                   |   9 +-
 .../WithdrawForm.tsx                          |  76 ++--
 .../WithdrawModal/WithdrawModalContainer.tsx  |  30 --
 .../AavePage/components/TopPanel/TopPanel.tsx |  12 +-
 apps/frontend/src/constants/aave.ts           |  22 +-
 apps/frontend/src/hooks/aave/useAaveRepay.tsx |   7 +-
 .../src/hooks/aave/useAaveReservesData.tsx    |   2 +-
 .../hooks/aave/useAaveUserReservesData.tsx    | 110 +++---
 .../frontend/src/locales/en/translations.json |   2 +-
 .../src/utils/aave/AaveCalculations.ts        | 140 +++++++
 .../aave/AaveRepayTransactionsFactory.ts      |  73 ++--
 .../aave/AaveSupplyTransactionsFactory.ts     |   2 +-
 .../src/utils/aave/AaveUserReservesSummary.ts | 374 ++++++++----------
 .../src/contracts/assets/bobTestnet.ts        |  14 +-
 46 files changed, 1063 insertions(+), 933 deletions(-)
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
 delete mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.utils.ts
 delete mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowModalContainer.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.tsx
 rename apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/{RepayModal => RepayForm}/RepayWithCollateralForm.tsx (97%)
 rename apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/{RepayModal => RepayForm}/RepayWithWalletBalanceForm.tsx (70%)
 delete mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx
 rename apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/{LendModal => LendForm}/LendForm.tsx (95%)
 delete mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendModalContainer.tsx
 rename apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/{WithdrawModal => WithdrawForm}/WithdrawForm.tsx (73%)
 delete mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx
 create mode 100644 apps/frontend/src/utils/aave/AaveCalculations.ts

diff --git a/apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx b/apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx
index cee2a615c..fd500f1d9 100644
--- a/apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx
+++ b/apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx
@@ -59,7 +59,8 @@ export const AssetAmountInput: FC<AssetAmountInputProps> = ({
           <span className="absolute right-0 -top-3 -translate-y-1/2">
             <MaxButton
               token={assetValue}
-              value={maxAmount ?? 0}
+              value={maxAmount}
+              precision={2}
               onClick={() =>
                 onAmountChange &&
                 onAmountChange(Decimal.from(maxAmount).toString())
diff --git a/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx b/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
index 0b012f611..cb7c85f07 100644
--- a/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
@@ -5,11 +5,16 @@ import { t } from 'i18next';
 import { Helmet } from 'react-helmet-async';
 
 import { Tabs, TabSize, TabType } from '@sovryn/ui';
-import { Decimal } from '@sovryn/utils';
 
 import { useAaveReservesData } from '../../../hooks/aave/useAaveReservesData';
 import { useAaveUserReservesData } from '../../../hooks/aave/useAaveUserReservesData';
 import { translations } from '../../../locales/i18n';
+import {
+  normalizeBorrowPoolDetails,
+  normalizeBorrowPositions,
+  normalizeLendPoolDetails,
+  normalizeLendPositions,
+} from './AavePage.utils';
 import { BorrowAssetsList } from './components/BorrowAssetsList/BorrowAssetsList';
 import { BorrowPoolDetails } from './components/BorrowAssetsList/BorrowAssetsList.types';
 import { BorrowPositionsList } from './components/BorrowPositionsList/BorrowPositionsList';
@@ -32,52 +37,37 @@ const AavePage: FC = () => {
   const userReservesSummary = useAaveUserReservesData();
   const [activeTab, setActiveTab] = useState<ActiveTab>(ActiveTab.LEND);
 
-  const lendPositions: LendPosition[] = useMemo(() => {
-    if (!userReservesSummary) return [];
-    return userReservesSummary.suppliedAssets.map(s => ({
-      asset: s.asset,
-      apy: s.apy,
-      supplied: s.supplied,
-      suppliedUSD: s.suppliedUSD,
-      collateral: s.isCollateral,
-    }));
-  }, [userReservesSummary]);
-
-  const borrowPositions: BorrowPosition[] = useMemo(() => {
-    if (!userReservesSummary) return [];
-    return userReservesSummary.borrowedAssets.map(ba => ({
-      asset: ba.asset,
-      apy: ba.apy,
-      borrowed: ba.borrowed,
-      borrowedUSD: ba.borrowedUSD,
-      type: ba.type,
-    }));
-  }, [userReservesSummary]);
-
-  const borrowPools: BorrowPoolDetails[] = useMemo(() => {
-    if (!userReservesSummary) {
-      return reserves.map(r => ({
-        asset: r.symbol,
-        apy: Decimal.from(r.variableBorrowAPY).mul(100),
-      }));
-    } else {
-      return reserves.map(r => ({
-        asset: r.symbol,
-        apy: Decimal.from(r.variableBorrowAPY).mul(100),
-        available: userReservesSummary.borrowPower.div(r.priceInUSD),
-        availableUSD: userReservesSummary.borrowPower,
-      }));
-    }
-  }, [reserves, userReservesSummary]);
-
+  const lendPositions: LendPosition[] = useMemo(
+    () => normalizeLendPositions(userReservesSummary),
+    [userReservesSummary],
+  );
+  const borrowPositions: BorrowPosition[] = useMemo(
+    () => normalizeBorrowPositions(userReservesSummary),
+    [userReservesSummary],
+  );
+  const borrowPools: BorrowPoolDetails[] = useMemo(
+    () => normalizeBorrowPoolDetails(reserves, userReservesSummary),
+    [reserves, userReservesSummary],
+  );
   const lendPools: LendPoolDetails[] = useMemo(
-    () =>
-      reserves.map(r => ({
-        asset: r.symbol,
-        apy: Decimal.from(r.supplyAPY).mul(100),
-        canBeCollateral: r.usageAsCollateralEnabled,
-      })),
-    [reserves],
+    () => normalizeLendPoolDetails(reserves, userReservesSummary),
+    [reserves, userReservesSummary],
+  );
+
+  const tabsItems = useMemo(
+    () => [
+      {
+        activeClassName: 'text-primary-20',
+        dataAttribute: 'lending',
+        label: t(pageTranslations.common.lend),
+      },
+      {
+        activeClassName: 'text-primary-20',
+        dataAttribute: 'borrowing',
+        label: t(pageTranslations.common.borrow),
+      },
+    ],
+    [],
   );
 
   return (
@@ -97,18 +87,7 @@ const AavePage: FC = () => {
         <Tabs
           className="w-full bg-gray-80 rounded p-1 border border-gray-60 2xl:hidden"
           index={activeTab}
-          items={[
-            {
-              activeClassName: 'text-primary-20',
-              dataAttribute: 'lending',
-              label: t(pageTranslations.common.lend),
-            },
-            {
-              activeClassName: 'text-primary-20',
-              dataAttribute: 'borrowing',
-              label: t(pageTranslations.common.borrow),
-            },
-          ]}
+          items={tabsItems}
           onChange={setActiveTab}
           size={TabSize.normal}
           type={TabType.secondary}
@@ -124,9 +103,9 @@ const AavePage: FC = () => {
           >
             <LendPositionsList
               lendPositions={lendPositions}
-              supplyBalance={userReservesSummary?.supplyBalance}
-              collateralBalance={userReservesSummary?.collateralBalance}
-              supplyWeightedApy={userReservesSummary?.supplyWeightedApy}
+              supplyBalance={userReservesSummary.supplyBalance}
+              collateralBalance={userReservesSummary.collateralBalance}
+              supplyWeightedApy={userReservesSummary.supplyWeightedApy}
             />
             <LendAssetsList lendPools={lendPools} />
           </div>
@@ -139,11 +118,11 @@ const AavePage: FC = () => {
             )}
           >
             <BorrowPositionsList
-              eModeEnabled={userReservesSummary?.eModeEnabled ?? false}
               borrowPositions={borrowPositions}
-              borrowBalance={userReservesSummary?.borrowBalance}
-              borrowPowerUsed={userReservesSummary?.borrowPowerUsed}
-              borrowWeightedApy={userReservesSummary?.borrowWeightedApy}
+              eModeEnabled={userReservesSummary.eModeEnabled}
+              borrowBalance={userReservesSummary.borrowBalance}
+              borrowPowerUsed={userReservesSummary.borrowPowerUsed}
+              borrowWeightedApy={userReservesSummary.borrowWeightedApy}
             />
             <BorrowAssetsList borrowPools={borrowPools} />
           </div>
@@ -152,4 +131,5 @@ const AavePage: FC = () => {
     </div>
   );
 };
+
 export default AavePage;
diff --git a/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx b/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
new file mode 100644
index 000000000..f7c0fbc06
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
@@ -0,0 +1,83 @@
+import { Decimal } from '@sovryn/utils';
+
+import { ReserveData } from '../../../hooks/aave/useAaveReservesData';
+import { BorrowRateMode } from '../../../types/aave';
+import { AaveUserReservesSummary } from '../../../utils/aave/AaveUserReservesSummary';
+import { BorrowPosition } from './components/BorrowPositionsList/BorrowPositionsList.types';
+import { LendPosition } from './components/LendPositionsList/LendPositionsList.types';
+
+export function normalizeLendPositions(
+  userReservesSummary: AaveUserReservesSummary,
+): LendPosition[] {
+  return userReservesSummary.reserves
+    .filter(r => r.supplied.gt(0))
+    .map(s => ({
+      asset: s.reserve.symbol,
+      apy: Decimal.from(s.reserve.variableBorrowAPY),
+      supplied: s.supplied,
+      suppliedUSD: s.suppliedUSD,
+      collateral: s.collateral,
+    }));
+}
+
+export function normalizeBorrowPositions(
+  userReservesSummary: AaveUserReservesSummary,
+): BorrowPosition[] {
+  return userReservesSummary.reserves
+    .filter(r => r.borrowed.gt(0))
+    .map(r => ({
+      asset: r.reserve.symbol,
+      apy: Decimal.from(
+        r.borrowRateMode === BorrowRateMode.STABLE
+          ? Decimal.from(r.reserve.stableBorrowAPY).mul(100)
+          : Decimal.from(r.reserve.variableBorrowAPY).mul(100),
+      ),
+      borrowed: r.borrowed,
+      borrowedUSD: r.borrowedUSD,
+      type: r.borrowRateMode,
+    }));
+}
+
+export function normalizeBorrowPoolDetails(
+  reserves: ReserveData,
+  userReservesSummary: AaveUserReservesSummary,
+) {
+  if (userReservesSummary.reserves.length === 0) {
+    return reserves
+      .filter(r => r.borrowingEnabled)
+      .map(r => ({
+        asset: r.symbol,
+        apy: Decimal.from(r.variableBorrowAPY).mul(100),
+      }));
+  } else {
+    return reserves
+      .filter(r => r.borrowingEnabled)
+      .map(r => ({
+        asset: r.symbol,
+        apy: Decimal.from(r.variableBorrowAPY).mul(100),
+        available: userReservesSummary.borrowPower.div(r.priceInUSD),
+        availableUSD: userReservesSummary.borrowPower,
+      }));
+  }
+}
+
+export function normalizeLendPoolDetails(
+  reserves: ReserveData,
+  userReservesSummary: AaveUserReservesSummary,
+) {
+  if (userReservesSummary.reserves.length === 0) {
+    return reserves.map(r => ({
+      asset: r.symbol,
+      apy: Decimal.from(r.supplyAPY).mul(100),
+      canBeCollateral: r.usageAsCollateralEnabled,
+      walletBalance: Decimal.from(0),
+    }));
+  } else {
+    return userReservesSummary.reserves.map(r => ({
+      asset: r.reserve.symbol,
+      apy: Decimal.from(r.reserve.supplyAPY).mul(100),
+      canBeCollateral: r.reserve.usageAsCollateralEnabled,
+      walletBalance: r.walletBalance,
+    }));
+  }
+}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
index 9a3b17ede..fc6f6b3db 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
@@ -15,7 +15,7 @@ import { BorrowAssetAction } from './components/BorrowAssetAction/BorrowAssetAct
 
 const pageTranslations = translations.aavePage;
 
-export const COLUMNS_CONFIG = [
+export const COLUMNS_CONFIG = (onBorrowClick: (asset: string) => void) => [
   {
     id: 'asset',
     sortable: true,
@@ -79,7 +79,7 @@ export const COLUMNS_CONFIG = [
     align: Align.center,
     title: ' ',
     cellRenderer: (pool: BorrowPoolDetails) => (
-      <BorrowAssetAction pool={pool} />
+      <BorrowAssetAction onBorrowClick={() => onBorrowClick(pool.asset)} />
     ),
   },
 ];
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
index 76899fff1..da47c7ba4 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
@@ -2,13 +2,21 @@ import React, { FC, useCallback, useState } from 'react';
 
 import { t } from 'i18next';
 
-import { Accordion, OrderOptions, Table } from '@sovryn/ui';
+import {
+  Accordion,
+  Dialog,
+  DialogBody,
+  DialogHeader,
+  OrderOptions,
+  Table,
+} from '@sovryn/ui';
 
 import { AaveRowTitle } from '../../../../2_molecules/AavePoolRowTitle/AavePoolRowTitle';
 import { translations } from '../../../../../locales/i18n';
 import { COLUMNS_CONFIG } from './BorrowAssetsList.constants';
 import { BorrowPoolDetails } from './BorrowAssetsList.types';
 import { BorrowAssetDetails } from './components/BorrowAssetDetails/BorrowAssetDetails';
+import { BorrowForm } from './components/BorrowModal/BorrowForm';
 
 const pageTranslations = translations.aavePage.borrowAssetsList;
 
@@ -21,6 +29,17 @@ export const BorrowAssetsList: FC<BorrowAssetsListProps> = ({
 }) => {
   const [open, setOpen] = useState(true);
   const [orderOptions, setOrderOptions] = useState<OrderOptions>();
+  const [borrowAssetDialog, setBorrowAssetDialog] = useState<
+    string | undefined
+  >();
+
+  const onBorrowClick = useCallback((asset: string) => {
+    setBorrowAssetDialog(asset);
+  }, []);
+
+  const onBorrowClose = useCallback(() => {
+    setBorrowAssetDialog(undefined);
+  }, []);
 
   const rowTitleRenderer = useCallback(
     (row: BorrowPoolDetails) => (
@@ -34,7 +53,16 @@ export const BorrowAssetsList: FC<BorrowAssetsListProps> = ({
     ),
     [],
   );
-  const mobileRenderer = useCallback(p => <BorrowAssetDetails pool={p} />, []);
+
+  const mobileRenderer = useCallback(
+    p => (
+      <BorrowAssetDetails
+        onBorrowClick={() => onBorrowClick(p.asset)}
+        pool={p}
+      />
+    ),
+    [onBorrowClick],
+  );
 
   return (
     <Accordion
@@ -50,7 +78,7 @@ export const BorrowAssetsList: FC<BorrowAssetsListProps> = ({
     >
       <Table
         className="mt-3"
-        columns={COLUMNS_CONFIG}
+        columns={COLUMNS_CONFIG(onBorrowClick)}
         rowClassName="bg-gray-80"
         accordionClassName="bg-gray-60 border border-gray-70"
         rowTitle={rowTitleRenderer}
@@ -59,6 +87,16 @@ export const BorrowAssetsList: FC<BorrowAssetsListProps> = ({
         orderOptions={orderOptions}
         setOrderOptions={setOrderOptions}
       />
+
+      <Dialog disableFocusTrap isOpen={!!borrowAssetDialog}>
+        <DialogHeader
+          title={t(translations.aavePage.common.borrow)}
+          onClose={onBorrowClose}
+        />
+        <DialogBody className="flex flex-col gap-6">
+          <BorrowForm asset={borrowAssetDialog!} onSuccess={onBorrowClose} />
+        </DialogBody>
+      </Dialog>
     </Accordion>
   );
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
index bf0db4949..94444fded 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState, useCallback } from 'react';
+import React, { FC } from 'react';
 
 import { t } from 'i18next';
 import { useNavigate } from 'react-router-dom';
@@ -6,33 +6,24 @@ import { useNavigate } from 'react-router-dom';
 import { Button, ButtonStyle } from '@sovryn/ui';
 
 import { translations } from '../../../../../../../locales/i18n';
-import { BorrowPoolDetails } from '../../BorrowAssetsList.types';
-import { BorrowModalContainer } from '../BorrowModal/BorrowModalContainer';
 
 const pageTranslations = translations.aavePage;
 
 type BorrowAssetActionProps = {
-  pool: BorrowPoolDetails;
+  onBorrowClick: () => void;
 };
 
-export const BorrowAssetAction: FC<BorrowAssetActionProps> = ({ pool }) => {
+export const BorrowAssetAction: FC<BorrowAssetActionProps> = ({
+  onBorrowClick,
+}) => {
   const navigate = useNavigate();
-  const [isBorrowModalOpen, setIsBorrowModalOpen] = useState(false);
-
-  const handleBorrowClick = useCallback(() => {
-    setIsBorrowModalOpen(true);
-  }, []);
-
-  const handleBorrowClose = useCallback(() => {
-    setIsBorrowModalOpen(false);
-  }, []);
 
   return (
     <div className="flex items-center justify-center lg:justify-end space-x-2">
       <Button
         className="flex-grow"
         text={t(pageTranslations.common.borrow)}
-        onClick={handleBorrowClick}
+        onClick={onBorrowClick}
       />
 
       <Button
@@ -41,12 +32,6 @@ export const BorrowAssetAction: FC<BorrowAssetActionProps> = ({ pool }) => {
         style={ButtonStyle.secondary}
         onClick={() => navigate('/aave/reserve-overview')}
       />
-
-      <BorrowModalContainer
-        asset={pool.asset}
-        handleCloseModal={handleBorrowClose}
-        isOpen={isBorrowModalOpen}
-      />
     </div>
   );
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
index c9f554616..37ef83178 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
@@ -14,9 +14,13 @@ const pageTranslations = translations.aavePage;
 
 type BorrowAssetDetailsProps = {
   pool: BorrowPoolDetails;
+  onBorrowClick: () => void;
 };
 
-export const BorrowAssetDetails: FC<BorrowAssetDetailsProps> = ({ pool }) => (
+export const BorrowAssetDetails: FC<BorrowAssetDetailsProps> = ({
+  pool,
+  onBorrowClick,
+}) => (
   <div className="space-y-3">
     <div>
       {/* APY */}
@@ -27,7 +31,7 @@ export const BorrowAssetDetails: FC<BorrowAssetDetailsProps> = ({ pool }) => (
             <HelperButton content={t(pageTranslations.common.apyInfo)} />
           </span>
         }
-        value={<AmountRenderer value={pool.apy} suffix={'%'} />}
+        value={<AmountRenderer value={pool.apy} suffix="%" />}
       />
 
       {/* Available */}
@@ -47,6 +51,6 @@ export const BorrowAssetDetails: FC<BorrowAssetDetailsProps> = ({ pool }) => (
       />
     </div>
 
-    <BorrowAssetAction pool={pool} />
+    <BorrowAssetAction onBorrowClick={onBorrowClick} />
   </div>
 );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
index 1cd4f88f9..2518fd084 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
@@ -21,11 +21,11 @@ import { AssetAmountInput } from '../../../../../../2_molecules/AssetAmountInput
 import { AssetRenderer } from '../../../../../../2_molecules/AssetRenderer/AssetRenderer';
 import { config } from '../../../../../../../constants/aave';
 import { useAaveBorrow } from '../../../../../../../hooks/aave/useAaveBorrow';
-import { useAaveReservesData } from '../../../../../../../hooks/aave/useAaveReservesData';
 import { useAaveUserReservesData } from '../../../../../../../hooks/aave/useAaveUserReservesData';
 import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
 import { translations } from '../../../../../../../locales/i18n';
 import { BorrowRateMode } from '../../../../../../../types/aave';
+import { AaveCalculations } from '../../../../../../../utils/aave/AaveCalculations';
 import { CollateralRatioHealthBar } from '../../../CollateralRatioHealthBar/CollateralRatioHealthBar';
 
 const pageTranslations = translations.aavePage;
@@ -35,81 +35,73 @@ type BorrowFormProps = {
   onSuccess: () => void;
 };
 
-export const BorrowForm: FC<BorrowFormProps> = ({ asset }) => {
-  const reserves = useAaveReservesData();
+export const BorrowForm: FC<BorrowFormProps> = ({ asset, onSuccess }) => {
   const userReservesSummary = useAaveUserReservesData();
   const [borrowAsset, setBorrowAsset] = useState<string>(asset);
   const [borrowAmount, setBorrowAmount, borrowSize] = useDecimalAmountInput('');
   const [acknowledge, setAcknowledge] = useState<boolean>(false);
   const { handleBorrow } = useAaveBorrow();
 
-  const reserve = useMemo(() => {
-    return reserves.find(r => r.symbol === borrowAsset);
-  }, [reserves, borrowAsset]);
+  const borrowableAssetsOptions = useMemo(
+    () =>
+      userReservesSummary.reserves
+        .filter(r => r.reserve.borrowingEnabled)
+        .map(r => ({
+          value: r.reserve.symbol,
+          label: (
+            <AssetRenderer
+              showAssetLogo
+              asset={r.reserve.symbol}
+              chainId={BOB_CHAIN_ID}
+              assetClassName="font-medium"
+            />
+          ),
+        })),
+    [userReservesSummary.reserves],
+  );
 
-  const variableBorrowAPR = useMemo(() => {
-    if (!reserve) return Decimal.from(0);
-    return Decimal.from(reserve.variableBorrowAPR).mul(100);
-  }, [reserve]);
+  const borrowReserve = useMemo(() => {
+    return userReservesSummary.reserves.find(
+      r => r.reserve.symbol === borrowAsset,
+    );
+  }, [userReservesSummary.reserves, borrowAsset]);
+
+  const borrowUsdAmount = useMemo(() => {
+    return borrowSize.mul(borrowReserve?.reserve.priceInUSD ?? 0);
+  }, [borrowSize, borrowReserve?.reserve.priceInUSD]);
 
   const maximumBorrowAmount = useMemo(() => {
-    if (!reserve || !userReservesSummary) return Decimal.from(0);
+    return borrowReserve?.availableToBorrow ?? Decimal.from(0);
+  }, [borrowReserve?.availableToBorrow]);
 
-    // deducted from hf=kte/borrowed => newhf=kte/borrowed+new_borrow => MinHealthFactor = newhf
-    return userReservesSummary.borrowBalance.mul(
-      userReservesSummary.healthFactor.div(config.MinHealthFactor).sub(1),
+  const newCollateralRatio = useMemo(() => {
+    return AaveCalculations.computeCollateralRatio(
+      userReservesSummary.collateralBalance,
+      userReservesSummary.borrowBalance.add(borrowUsdAmount),
     );
-  }, [userReservesSummary, reserve]);
+  }, [
+    userReservesSummary.collateralBalance,
+    userReservesSummary.borrowBalance,
+    borrowUsdAmount,
+  ]);
 
-  const borrowUsdAmount = useMemo(() => {
-    return borrowSize.mul(reserve?.priceInUSD ?? 0);
-  }, [borrowSize, reserve]);
-
-  const borrowableAssetsOptions = useMemo(
-    () =>
-      reserves.map(r => ({
-        value: r.symbol,
-        label: (
-          <AssetRenderer
-            showAssetLogo
-            asset={r.symbol}
-            chainId={BOB_CHAIN_ID}
-            assetClassName="font-medium"
-          />
-        ),
-      })),
-    [reserves],
-  );
+  const liquidationPrice = useMemo(() => {
+    return AaveCalculations.computeLiquidationPrice(
+      borrowSize,
+      userReservesSummary.currentLiquidationThreshold,
+      userReservesSummary.collateralBalance,
+    );
+  }, [
+    borrowSize,
+    userReservesSummary.currentLiquidationThreshold,
+    userReservesSummary.collateralBalance,
+  ]);
 
   const isValidBorrowAmount = useMemo(
     () => (borrowSize.gt(0) ? borrowSize.lte(maximumBorrowAmount) : true),
     [borrowSize, maximumBorrowAmount],
   );
 
-  const collateralRatio = useMemo(() => {
-    if (!userReservesSummary) return Decimal.from(0);
-    const newHealthFactor = userReservesSummary.healthFactor
-      .mul(userReservesSummary.borrowBalance)
-      .div(userReservesSummary.borrowBalance.add(borrowUsdAmount));
-
-    return newHealthFactor.div(userReservesSummary.currentLiquidationThreshold);
-  }, [userReservesSummary, borrowUsdAmount]);
-
-  const liquidationPrice = useMemo(() => {
-    if (!borrowSize || !reserve || !userReservesSummary) {
-      return Decimal.from(0);
-    }
-
-    return borrowSize
-      .mul(userReservesSummary.currentLiquidationThreshold)
-      .div(userReservesSummary.collateralBalance);
-  }, [borrowSize, reserve, userReservesSummary]);
-
-  const submitButtonDisabled = useMemo(
-    () => !isValidBorrowAmount || borrowSize.lte(0) || !acknowledge || !reserve,
-    [isValidBorrowAmount, borrowSize, acknowledge, reserve],
-  );
-
   return (
     <form className="flex flex-col gap-6">
       <div className="space-y-3">
@@ -140,25 +132,24 @@ export const BorrowForm: FC<BorrowFormProps> = ({ asset }) => {
           label={t(translations.aavePage.borrowForm.borrowApr)}
           value={
             <AmountRenderer
-              value={variableBorrowAPR}
-              suffix={'%'}
+              value={borrowReserve?.reserve.variableBorrowAPR ?? 0}
+              suffix="%"
               precision={2}
             />
           }
         />
       </SimpleTable>
 
-      <CollateralRatioHealthBar ratio={collateralRatio} />
+      <CollateralRatioHealthBar
+        ratio={Decimal.from(newCollateralRatio)}
+        minimum={config.MinCollateralRatio}
+      />
 
       <SimpleTable>
         <SimpleTableRow
           label={t(translations.aavePage.borrowForm.liquidationPrice)}
           value={
-            <AmountRenderer
-              value={liquidationPrice}
-              precision={2}
-              prefix={'$'}
-            />
+            <AmountRenderer value={liquidationPrice} precision={2} prefix="$" />
           }
         />
         <SimpleTableRow
@@ -167,7 +158,7 @@ export const BorrowForm: FC<BorrowFormProps> = ({ asset }) => {
           })}
           value={
             <AmountRenderer
-              value={reserve?.priceInUSD ?? 0}
+              value={borrowReserve?.reserve.priceInUSD ?? 0}
               precision={2}
               prefix="$"
             />
@@ -194,11 +185,17 @@ export const BorrowForm: FC<BorrowFormProps> = ({ asset }) => {
         onClick={async () => {
           handleBorrow(
             borrowSize,
-            await getAssetData(reserve!.symbol, BOB_CHAIN_ID),
+            await getAssetData(borrowReserve!.reserve.symbol, BOB_CHAIN_ID),
             BorrowRateMode.VARIABLE,
+            { onComplete: onSuccess },
           );
         }}
-        disabled={submitButtonDisabled}
+        disabled={
+          !isValidBorrowAmount ||
+          borrowSize.lte(0) ||
+          !acknowledge ||
+          !borrowReserve
+        }
         text={t(translations.common.buttons.confirm)}
       />
     </form>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.utils.ts b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.utils.ts
deleted file mode 100644
index 7b5be4fbf..000000000
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.utils.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Decimal } from '@sovryn/utils';
-
-import { Reserve } from '../../../../../../../hooks/aave/useAaveReservesData';
-
-export const getCollateralRatioThresholds = (
-  reserve: Reserve | undefined,
-  eModeEnabled: boolean,
-) => {
-  let minimumCollateralRatio: Decimal;
-  if (reserve !== undefined) {
-    minimumCollateralRatio = eModeEnabled
-      ? Decimal.from(reserve.formattedEModeLiquidationThreshold)
-      : Decimal.from(reserve.formattedReserveLiquidationThreshold);
-  } else {
-    minimumCollateralRatio = Decimal.from(1);
-  }
-
-  const threeholds = {
-    START: minimumCollateralRatio.mul(0.9).toNumber(),
-    MIDDLE_START: minimumCollateralRatio.toNumber(),
-    MIDDLE_END: minimumCollateralRatio.mul(1.2).toNumber(),
-    END: minimumCollateralRatio.mul(1.6).toNumber(),
-  };
-
-  // rule of 3 basically END -> 100; {} -> x => x = {} * 100 / END
-  const scalingFactor = 100 / threeholds.END;
-
-  return {
-    START: threeholds.START * scalingFactor,
-    MIDDLE_START: threeholds.MIDDLE_START * scalingFactor,
-    MIDDLE_END: threeholds.MIDDLE_END * scalingFactor,
-    END: 100,
-  };
-};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowModalContainer.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowModalContainer.tsx
deleted file mode 100644
index 7e9c322a2..000000000
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowModalContainer.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React, { FC } from 'react';
-
-import { t } from 'i18next';
-
-import { Dialog, DialogBody, DialogHeader } from '@sovryn/ui';
-
-import { translations } from '../../../../../../../locales/i18n';
-import { BorrowForm } from './BorrowForm';
-
-type BorrowModalContainerProps = {
-  asset: string;
-  isOpen: boolean;
-  handleCloseModal: () => void;
-};
-
-export const BorrowModalContainer: FC<BorrowModalContainerProps> = ({
-  asset,
-  isOpen,
-  handleCloseModal,
-}) => (
-  <Dialog disableFocusTrap isOpen={isOpen}>
-    <DialogHeader
-      title={t(translations.aavePage.common.borrow)}
-      onClose={handleCloseModal}
-    />
-    <DialogBody className="flex flex-col gap-6">
-      <BorrowForm asset={asset} onSuccess={handleCloseModal} />
-    </DialogBody>
-  </Dialog>
-);
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
index 979f9a652..2a56f3d48 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
@@ -9,13 +9,13 @@ import { BOB_CHAIN_ID } from '../../../../../config/chains';
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
 import { translations } from '../../../../../locales/i18n';
-import { LoanType } from '../../../../../utils/aave/AaveUserReservesSummary';
+import { BorrowRateMode } from '../../../../../types/aave';
 import { BorrowPosition } from './BorrowPositionsList.types';
 import { BorrowPositionAction } from './components/BorrowPositionAction/BorrowPositionAction';
 
 const pageTranslations = translations.aavePage;
 
-export const COLUMNS_CONFIG = [
+export const COLUMNS_CONFIG = (onRepayClick: (asset: string) => unknown) => [
   {
     id: 'asset',
     sortable: true,
@@ -78,7 +78,7 @@ export const COLUMNS_CONFIG = [
       <span>
         {t(
           pageTranslations.common[
-            position.type === LoanType.STABLE ? 'stable' : 'variable'
+            position.type === BorrowRateMode.STABLE ? 'stable' : 'variable'
           ],
         )}
       </span>
@@ -89,7 +89,7 @@ export const COLUMNS_CONFIG = [
     align: Align.center,
     title: ' ',
     cellRenderer: (position: BorrowPosition) => (
-      <BorrowPositionAction position={position} />
+      <BorrowPositionAction onRepayClick={() => onRepayClick(position.asset)} />
     ),
   },
 ];
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
index 87989cdfb..3ce35d09c 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
@@ -2,7 +2,15 @@ import React, { FC, useCallback, useState } from 'react';
 
 import { t } from 'i18next';
 
-import { Accordion, OrderOptions, Paragraph, Table } from '@sovryn/ui';
+import {
+  Accordion,
+  Dialog,
+  DialogBody,
+  DialogHeader,
+  OrderOptions,
+  Paragraph,
+  Table,
+} from '@sovryn/ui';
 import { Decimal } from '@sovryn/utils';
 
 import { AaveRowTitle } from '../../../../2_molecules/AavePoolRowTitle/AavePoolRowTitle';
@@ -13,14 +21,15 @@ import { COLUMNS_CONFIG } from './BorrowPositionsList.constants';
 import { BorrowPosition } from './BorrowPositionsList.types';
 import { BorrowPositionDetails } from './components/BorrowPositionDetails/BorrowPositionDetails';
 import { EfficiencyModeCard } from './components/EfficiencyModeCard/EfficiencyModeCard';
+import { RepayForm } from './components/RepayForm/RepayForm';
 
 const pageTranslations = translations.aavePage;
 
 type BorrowPositionsListProps = {
   borrowPositions: BorrowPosition[];
-  borrowBalance?: Decimal;
-  borrowWeightedApy?: Decimal;
-  borrowPowerUsed?: Decimal;
+  borrowBalance: Decimal;
+  borrowWeightedApy: Decimal;
+  borrowPowerUsed: Decimal;
   eModeEnabled: boolean;
 };
 
@@ -34,6 +43,17 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = ({
   const { account } = useAccount();
   const [open, setOpen] = useState<boolean>(true);
   const [orderOptions, setOrderOptions] = useState<OrderOptions>();
+  const [repayAssetDialog, setRepayAssetDialog] = useState<
+    string | undefined
+  >();
+
+  const onRepayClick = useCallback((asset: string) => {
+    setRepayAssetDialog(asset);
+  }, []);
+
+  const onRepayClose = useCallback(() => {
+    setRepayAssetDialog(undefined);
+  }, []);
 
   const rowTitleRenderer = useCallback(
     (r: BorrowPosition) => (
@@ -48,8 +68,13 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = ({
   );
 
   const mobileRenderer = useCallback(
-    p => <BorrowPositionDetails position={p} />,
-    [],
+    p => (
+      <BorrowPositionDetails
+        position={p}
+        onRepayClick={() => onRepayClick(p.asset)}
+      />
+    ),
+    [onRepayClick],
   );
 
   return (
@@ -79,25 +104,26 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = ({
           <div className="flex flex-col gap-2 mb-2 lg:flex-row lg:gap-6 lg:mb-6">
             <PoolPositionStat
               label={t(pageTranslations.common.balance)}
-              value={borrowBalance ?? 0}
+              value={borrowBalance}
               prefix="$"
               precision={2}
             />
             <PoolPositionStat
               label={t(pageTranslations.common.apy)}
-              value={borrowWeightedApy ?? 0}
+              value={borrowWeightedApy}
               suffix="%"
               precision={2}
             />
             <PoolPositionStat
               label={t(pageTranslations.borrowPositionsList.borrowPowerUsed)}
-              value={borrowPowerUsed ?? 0}
+              value={borrowPowerUsed}
               suffix="%"
               precision={2}
             />
           </div>
+
           <Table
-            columns={COLUMNS_CONFIG}
+            columns={COLUMNS_CONFIG(onRepayClick)}
             rowClassName="bg-gray-80"
             accordionClassName="bg-gray-60 border border-gray-70"
             rowTitle={rowTitleRenderer}
@@ -106,6 +132,16 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = ({
             orderOptions={orderOptions}
             setOrderOptions={setOrderOptions}
           />
+
+          <Dialog disableFocusTrap isOpen={!!repayAssetDialog}>
+            <DialogHeader
+              title={t(translations.aavePage.repayModal.title)}
+              onClose={onRepayClose}
+            />
+            <DialogBody className="space-y-3">
+              <RepayForm asset={repayAssetDialog!} onSuccess={onRepayClose} />
+            </DialogBody>
+          </Dialog>
         </>
       ) : (
         <div className="flex items-center justify-center lg:h-12">
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.types.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.types.tsx
index 8445cf994..4b632e359 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.types.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.types.tsx
@@ -1,11 +1,11 @@
 import { Decimal } from '@sovryn/utils';
 
-import { LoanType } from '../../../../../utils/aave/AaveUserReservesSummary';
+import { BorrowRateMode } from '../../../../../types/aave';
 
 export type BorrowPosition = {
   asset: string;
   borrowed: Decimal;
   borrowedUSD: Decimal;
   apy: Decimal;
-  type: LoanType;
+  type: BorrowRateMode;
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionAction/BorrowPositionAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionAction/BorrowPositionAction.tsx
index b4e01a2bc..c2c358f14 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionAction/BorrowPositionAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionAction/BorrowPositionAction.tsx
@@ -1,44 +1,24 @@
-import React, { FC, useCallback, useState } from 'react';
+import React, { FC } from 'react';
 
 import { t } from 'i18next';
 
 import { Button, ButtonStyle } from '@sovryn/ui';
 
 import { translations } from '../../../../../../../locales/i18n';
-import { BorrowPosition } from '../../BorrowPositionsList.types';
-import { RepayModalContainer } from '../RepayModal/RepayModalContainer';
 
 type BorrowPositionActionProps = {
-  position: BorrowPosition;
+  onRepayClick: () => void;
 };
 
 export const BorrowPositionAction: FC<BorrowPositionActionProps> = ({
-  position,
-}) => {
-  const [isRepayModalOpen, setIsRepayModalOpen] = useState(false);
-
-  const handleRepayClick = useCallback(() => {
-    setIsRepayModalOpen(true);
-  }, []);
-
-  const handleRepayClose = useCallback(() => {
-    setIsRepayModalOpen(false);
-  }, []);
-
-  return (
-    <div className="flex items-center justify-center lg:justify-end space-x-2">
-      <Button
-        style={ButtonStyle.secondary}
-        className="flex-grow"
-        text={t(translations.aavePage.borrowPositionsList.repay)}
-        onClick={handleRepayClick}
-      />
-
-      <RepayModalContainer
-        asset={position.asset}
-        handleCloseModal={handleRepayClose}
-        isOpen={isRepayModalOpen}
-      />
-    </div>
-  );
-};
+  onRepayClick,
+}) => (
+  <div className="flex items-center justify-center lg:justify-end space-x-2">
+    <Button
+      style={ButtonStyle.secondary}
+      className="flex-grow"
+      text={t(translations.aavePage.borrowPositionsList.repay)}
+      onClick={onRepayClick}
+    />
+  </div>
+);
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
index 40352742e..f4dd3d725 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
@@ -7,16 +7,18 @@ import { HelperButton, SimpleTableRow } from '@sovryn/ui';
 import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { AssetAmountPriceRenderer } from '../../../../../../2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer';
 import { translations } from '../../../../../../../locales/i18n';
-import { LoanType } from '../../../../../../../utils/aave/AaveUserReservesSummary';
+import { BorrowRateMode } from '../../../../../../../types/aave';
 import { BorrowPosition } from '../../BorrowPositionsList.types';
 import { BorrowPositionAction } from '../BorrowPositionAction/BorrowPositionAction';
 
 type BorrowPositionDetailsProps = {
   position: BorrowPosition;
+  onRepayClick: () => unknown;
 };
 
 export const BorrowPositionDetails: FC<BorrowPositionDetailsProps> = ({
   position,
+  onRepayClick,
 }) => (
   <div className="space-y-3">
     <div>
@@ -48,12 +50,12 @@ export const BorrowPositionDetails: FC<BorrowPositionDetailsProps> = ({
         label={t(translations.aavePage.common.apyType)}
         value={t(
           translations.aavePage.common[
-            position.type === LoanType.STABLE ? 'stable' : 'variable'
+            position.type === BorrowRateMode.STABLE ? 'stable' : 'variable'
           ],
         )}
       />
     </div>
 
-    <BorrowPositionAction position={position} />
+    <BorrowPositionAction onRepayClick={onRepayClick} />
   </div>
 );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.tsx
new file mode 100644
index 000000000..ad48869e4
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.tsx
@@ -0,0 +1,65 @@
+import React, { FC, useMemo, useState } from 'react';
+
+import { t } from 'i18next';
+
+import { Paragraph, ParagraphSize, Tabs, TabType } from '@sovryn/ui';
+
+import { translations } from '../../../../../../../locales/i18n';
+import { RepayWithCollateralForm } from './RepayWithCollateralForm';
+import { RepayWithWalletBalanceForm } from './RepayWithWalletBalanceForm';
+
+type RepayFormProps = {
+  asset: string;
+  onSuccess: () => unknown;
+};
+
+enum RepayWith {
+  BALANCE = 0,
+  COLLATERAL,
+}
+
+export const RepayForm: FC<RepayFormProps> = ({ asset, onSuccess }) => {
+  const [activeTab, setActiveTab] = useState<RepayWith>(RepayWith.BALANCE);
+
+  const tabItems = useMemo(() => {
+    return [
+      {
+        activeClassName: 'text-primary-20',
+        dataAttribute: 'wallet-balance',
+        label: t(translations.aavePage.repayModal.walletBalance),
+      },
+      {
+        activeClassName: 'text-primary-20',
+        dataAttribute: 'collateral',
+        label: t(translations.aavePage.common.collateral),
+        disabled: true,
+      },
+    ];
+  }, []);
+
+  return (
+    <div className="space-y-2">
+      <Paragraph
+        size={ParagraphSize.small}
+        className="font-medium text-gray-30"
+      >
+        {t(translations.aavePage.repayModal.repayWith)}
+      </Paragraph>
+
+      <Tabs
+        className="flex-grow-0"
+        contentClassName="p-4"
+        index={activeTab}
+        onChange={setActiveTab}
+        items={tabItems}
+        type={TabType.secondary}
+      />
+
+      {activeTab === RepayWith.BALANCE ? (
+        <RepayWithWalletBalanceForm asset={asset} onSuccess={onSuccess} />
+      ) : (
+        <RepayWithCollateralForm onSuccess={onSuccess} />
+      )}
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithCollateralForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithCollateralForm.tsx
similarity index 97%
rename from apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithCollateralForm.tsx
rename to apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithCollateralForm.tsx
index 31bb23995..5fb5c34cd 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithCollateralForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithCollateralForm.tsx
@@ -16,6 +16,7 @@ import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/Amo
 import { AmountTransition } from '../../../../../../2_molecules/AmountTransition/AmountTransition';
 import { AssetAmountInput } from '../../../../../../2_molecules/AssetAmountInput/AssetAmountInput';
 import { AssetRenderer } from '../../../../../../2_molecules/AssetRenderer/AssetRenderer';
+import { config } from '../../../../../../../constants/aave';
 import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
 import { translations } from '../../../../../../../locales/i18n';
 import { CollateralRatioHealthBar } from '../../../CollateralRatioHealthBar/CollateralRatioHealthBar';
@@ -137,7 +138,10 @@ export const RepayWithCollateralForm: FC<RepayWithCollateralFormProps> = () => {
         )}
       </div>
 
-      <CollateralRatioHealthBar ratio={collateralRatio} />
+      <CollateralRatioHealthBar
+        ratio={collateralRatio}
+        minimum={config.MinCollateralRatio}
+      />
 
       <SimpleTable>
         <SimpleTableRow
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx
similarity index 70%
rename from apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx
rename to apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx
index f095ae7ee..676e00f84 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx
@@ -17,13 +17,14 @@ import { BOB_CHAIN_ID } from '../../../../../../../config/chains';
 import { AmountTransition } from '../../../../../../2_molecules/AmountTransition/AmountTransition';
 import { AssetAmountInput } from '../../../../../../2_molecules/AssetAmountInput/AssetAmountInput';
 import { AssetRenderer } from '../../../../../../2_molecules/AssetRenderer/AssetRenderer';
+import { config } from '../../../../../../../constants/aave';
 import { useAaveRepay } from '../../../../../../../hooks/aave/useAaveRepay';
-import { useAaveReservesData } from '../../../../../../../hooks/aave/useAaveReservesData';
 import { useAaveUserReservesData } from '../../../../../../../hooks/aave/useAaveUserReservesData';
 import { useAccount } from '../../../../../../../hooks/useAccount';
 import { useAssetBalance } from '../../../../../../../hooks/useAssetBalance';
 import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
 import { translations } from '../../../../../../../locales/i18n';
+import { AaveCalculations } from '../../../../../../../utils/aave/AaveCalculations';
 import { CollateralRatioHealthBar } from '../../../CollateralRatioHealthBar/CollateralRatioHealthBar';
 
 const pageTranslations = translations.aavePage;
@@ -35,10 +36,9 @@ type RepayWithWalletBalanceFormProps = {
 
 export const RepayWithWalletBalanceForm: FC<
   RepayWithWalletBalanceFormProps
-> = ({ asset }) => {
+> = ({ asset, onSuccess }) => {
   const { account } = useAccount();
   const { handleRepay } = useAaveRepay();
-  const reserves = useAaveReservesData();
   const userReservesSummary = useAaveUserReservesData();
   const [repayAsset, setRepayAsset] = useState<string>(asset);
   const [repayAmount, setRepayAmount, repaySize] = useDecimalAmountInput('');
@@ -50,69 +50,58 @@ export const RepayWithWalletBalanceForm: FC<
 
   const repayAssetsOptions = useMemo(
     () =>
-      userReservesSummary
-        ? userReservesSummary.borrowedAssets.map(ba => ({
-            value: ba.asset,
-            label: (
-              <AssetRenderer
-                showAssetLogo
-                asset={ba.asset}
-                assetClassName="font-medium"
-                chainId={BOB_CHAIN_ID}
-              />
-            ),
-          }))
-        : [],
+      userReservesSummary.reserves
+        .filter(r => r.borrowed.gt(0))
+        .map(ba => ({
+          value: ba.asset,
+          label: (
+            <AssetRenderer
+              showAssetLogo
+              asset={ba.asset}
+              assetClassName="font-medium"
+              chainId={BOB_CHAIN_ID}
+            />
+          ),
+        })),
     [userReservesSummary],
   );
 
-  const debt = useMemo(() => {
-    return userReservesSummary?.borrowedAssets.find(
-      a => a.asset === repayAsset,
+  const repayReserve = useMemo(() => {
+    return userReservesSummary.reserves.find(
+      r => r.reserve.symbol === repayAsset,
     );
-  }, [userReservesSummary, repayAsset]);
+  }, [userReservesSummary.reserves, repayAsset]);
 
   const maximumRepayAmount = useMemo(() => {
-    return debt
-      ? debt.borrowed.gt(repayAssetBalance)
+    return repayReserve
+      ? repayReserve.borrowed.gt(repayAssetBalance)
         ? repayAssetBalance
-        : debt.borrowed
+        : repayReserve.borrowed
       : Decimal.from(0);
-  }, [debt, repayAssetBalance]);
-
-  const reserve = useMemo(() => {
-    return reserves.find(r => r.symbol === repayAsset);
-  }, [reserves, repayAsset]);
+  }, [repayReserve, repayAssetBalance]);
 
   const repayUsdAmount = useMemo(() => {
-    return repaySize.mul(reserve?.priceInUSD ?? 0);
-  }, [repaySize, reserve]);
+    return repaySize.mul(repayReserve?.reserve.priceInUSD ?? 0);
+  }, [repaySize, repayReserve]);
 
   const newDebtAmount = useMemo(() => {
-    const nd = debt?.borrowed ? debt.borrowed.sub(repaySize) : Decimal.from(0);
-    return nd.gt(0) ? nd : Decimal.from(0);
-  }, [debt, repaySize]);
-
-  const newDebtAmountUSD = useMemo(() => {
-    return newDebtAmount.mul(reserve?.priceInUSD ?? 0);
-  }, [newDebtAmount, reserve]);
+    const newDebt = repayReserve?.borrowed
+      ? repayReserve.borrowed.sub(repaySize)
+      : Decimal.from(0);
 
-  const collateralRatio = useMemo(() => {
-    if (!userReservesSummary) return Decimal.from(0);
+    // avoid negatives:
+    return newDebt.gt(0) ? newDebt : Decimal.from(0);
+  }, [repayReserve?.borrowed, repaySize]);
 
-    return userReservesSummary.healthFactor.div(
-      userReservesSummary.currentLiquidationThreshold,
-    );
-  }, [userReservesSummary]);
+  const newDebtAmountUSD = useMemo(() => {
+    return newDebtAmount.mul(repayReserve?.reserve.priceInUSD ?? 0);
+  }, [newDebtAmount, repayReserve]);
 
   const newCollateralRatio = useMemo(() => {
-    if (!userReservesSummary) return Decimal.from(0);
-    if (newDebtAmountUSD.eq(0)) return Decimal.from('100000000');
-
-    const newHealthFactor = userReservesSummary.healthFactor
-      .mul(userReservesSummary.borrowBalance)
-      .div(newDebtAmountUSD);
-    return newHealthFactor.div(userReservesSummary.currentLiquidationThreshold);
+    return AaveCalculations.computeCollateralRatio(
+      userReservesSummary.collateralBalance,
+      userReservesSummary.borrowBalance.add(newDebtAmountUSD),
+    );
   }, [userReservesSummary, newDebtAmountUSD]);
 
   const isValidRepayAmount = useMemo(
@@ -144,7 +133,10 @@ export const RepayWithWalletBalanceForm: FC<
         )}
       </div>
 
-      <CollateralRatioHealthBar ratio={newCollateralRatio} />
+      <CollateralRatioHealthBar
+        ratio={newCollateralRatio}
+        minimum={config.MinCollateralRatio}
+      />
 
       <SimpleTable>
         <SimpleTableRow
@@ -155,7 +147,7 @@ export const RepayWithWalletBalanceForm: FC<
                 className="justify-end"
                 from={{
                   precision: 2,
-                  value: debt?.borrowed ?? Decimal.from(0),
+                  value: repayReserve?.borrowed ?? Decimal.from(0),
                   suffix: repayAsset,
                 }}
                 to={{ value: newDebtAmount, suffix: repayAsset, precision: 2 }}
@@ -164,7 +156,7 @@ export const RepayWithWalletBalanceForm: FC<
                 className="justify-end text-gray-40"
                 from={{
                   precision: 2,
-                  value: debt?.borrowedUSD ?? Decimal.from(0),
+                  value: repayReserve?.borrowedUSD ?? Decimal.from(0),
                   prefix: '$',
                 }}
                 to={{
@@ -182,7 +174,7 @@ export const RepayWithWalletBalanceForm: FC<
             <AmountTransition
               className="justify-end"
               from={{
-                value: collateralRatio.mul(100),
+                value: userReservesSummary.collateralRatio.mul(100),
                 suffix: '%',
                 precision: 2,
               }}
@@ -205,7 +197,8 @@ export const RepayWithWalletBalanceForm: FC<
           handleRepay(
             repaySize,
             await getAssetData(repayAsset, BOB_CHAIN_ID),
-            debt!.type,
+            repayReserve!.borrowRateMode,
+            { onComplete: onSuccess },
           );
         }}
       />
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx
deleted file mode 100644
index 0bc5e8811..000000000
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React, { FC, useState } from 'react';
-
-import { t } from 'i18next';
-
-import {
-  Dialog,
-  DialogBody,
-  DialogHeader,
-  Paragraph,
-  ParagraphSize,
-  Tabs,
-  TabType,
-} from '@sovryn/ui';
-
-import { translations } from '../../../../../../../locales/i18n';
-import { RepayWithCollateralForm } from './RepayWithCollateralForm';
-import { RepayWithWalletBalanceForm } from './RepayWithWalletBalanceForm';
-
-type RepayModalContainerProps = {
-  asset: string;
-  isOpen: boolean;
-  handleCloseModal: () => void;
-};
-
-enum RepayWith {
-  BALANCE = 0,
-  COLLATERAL,
-}
-
-export const RepayModalContainer: FC<RepayModalContainerProps> = ({
-  asset,
-  isOpen,
-  handleCloseModal,
-}) => {
-  const [activeTab, setActiveTab] = useState<RepayWith>(RepayWith.BALANCE);
-
-  return (
-    <Dialog disableFocusTrap isOpen={isOpen}>
-      <DialogHeader
-        title={t(translations.aavePage.repayModal.title)}
-        onClose={handleCloseModal}
-      />
-      <DialogBody className="space-y-3">
-        <Paragraph
-          size={ParagraphSize.small}
-          className="font-medium text-gray-30"
-        >
-          {t(translations.aavePage.repayModal.repayWith)}
-        </Paragraph>
-
-        <Tabs
-          className="flex-grow-0"
-          contentClassName="p-4"
-          index={activeTab}
-          onChange={setActiveTab}
-          items={[
-            {
-              activeClassName: 'text-primary-20',
-              dataAttribute: 'wallet-balance',
-              label: t(translations.aavePage.repayModal.walletBalance),
-            },
-            {
-              activeClassName: 'text-primary-20',
-              dataAttribute: 'collateral',
-              label: t(translations.aavePage.common.collateral),
-              disabled: true,
-            },
-          ]}
-          type={TabType.secondary}
-        />
-
-        {activeTab === RepayWith.BALANCE ? (
-          <RepayWithWalletBalanceForm
-            asset={asset}
-            onSuccess={handleCloseModal}
-          />
-        ) : (
-          <RepayWithCollateralForm onSuccess={handleCloseModal} />
-        )}
-      </DialogBody>
-    </Dialog>
-  );
-};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.tsx b/apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.tsx
index d9cdfeded..9779d46fc 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.tsx
@@ -11,21 +11,16 @@ import { getCollateralRatioThresholds } from './CollateralRatioHealthBar.utils';
 
 type CollateralRatioHealthBarProps = {
   ratio: Decimal;
-  thresholds?: {
-    START: number;
-    MIDDLE_START: number;
-    MIDDLE_END: number;
-    END: number;
-  };
+  minimum: Decimal;
 };
 
 export const CollateralRatioHealthBar: FC<CollateralRatioHealthBarProps> = ({
   ratio,
-  thresholds,
+  minimum,
 }) => {
   const collateralRatioThresholds = useMemo(
-    () => thresholds ?? getCollateralRatioThresholds(),
-    [thresholds],
+    () => getCollateralRatioThresholds(minimum),
+    [minimum],
   );
 
   return (
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.utils.tsx b/apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.utils.tsx
index fb0b10ad4..a70156331 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.utils.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/CollateralRatioHealthBar/CollateralRatioHealthBar.utils.tsx
@@ -1,8 +1,7 @@
-import { MINIMUM_COLLATERAL_RATIO_LENDING_POOLS } from '../../../../../constants/lending';
+import { Decimal } from '@sovryn/utils';
 
-export const getCollateralRatioThresholds = () => {
-  const minimumCollateralRatio =
-    MINIMUM_COLLATERAL_RATIO_LENDING_POOLS.mul(100);
+export const getCollateralRatioThresholds = (minimum: Decimal) => {
+  const minimumCollateralRatio = minimum.mul(100);
 
   return {
     START: minimumCollateralRatio.mul(0.9).toNumber(),
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
index cdcf6165c..823282578 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
@@ -10,12 +10,11 @@ import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRen
 import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
 import { translations } from '../../../../../locales/i18n';
 import { LendPoolDetails } from './LendAssetsList.types';
-import { AssetBalanceRenderer } from './components/AssetBalance/AssetBalance';
 import { LendAssetAction } from './components/LendAssetAction/LendAssetAction';
 
 const pageTranslations = translations.aavePage;
 
-export const COLUMNS_CONFIG = [
+export const COLUMNS_CONFIG = (onLendClick: (asset: string) => unknown) => [
   {
     id: 'asset',
     sortable: true,
@@ -38,15 +37,15 @@ export const COLUMNS_CONFIG = [
   {
     id: 'walletBalance',
     sortable: true,
-    align: Align.center,
     className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
+    align: Align.center,
     title: (
-      <span className="text-gray-30">
+      <span className="text-gray-30 text-center">
         {t(pageTranslations.lendAssetsList.walletBalance)}
       </span>
     ),
     cellRenderer: (pool: LendPoolDetails) => (
-      <AssetBalanceRenderer asset={pool.asset} />
+      <AmountRenderer value={pool.walletBalance} precision={2} />
     ),
   },
   {
@@ -88,6 +87,8 @@ export const COLUMNS_CONFIG = [
     id: 'actions',
     align: Align.center,
     title: ' ',
-    cellRenderer: (pool: LendPoolDetails) => <LendAssetAction pool={pool} />,
+    cellRenderer: (pool: LendPoolDetails) => (
+      <LendAssetAction onLendClick={() => onLendClick(pool.asset)} />
+    ),
   },
 ];
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
index 5cf632610..19dcd5e24 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
@@ -1,14 +1,23 @@
-import React, { FC, useCallback, useState } from 'react';
+import React, { FC, useCallback, useMemo, useState } from 'react';
 
 import { t } from 'i18next';
 
-import { Accordion, Checkbox, OrderOptions, Table } from '@sovryn/ui';
+import {
+  Accordion,
+  Checkbox,
+  Dialog,
+  DialogBody,
+  DialogHeader,
+  OrderOptions,
+  Table,
+} from '@sovryn/ui';
 
 import { AaveRowTitle } from '../../../../2_molecules/AavePoolRowTitle/AavePoolRowTitle';
 import { translations } from '../../../../../locales/i18n';
 import { COLUMNS_CONFIG } from './LendAssetsList.constants';
 import { LendPoolDetails } from './LendAssetsList.types';
 import { LendAssetDetails } from './components/LendAssetDetails/LendAssetDetails';
+import { LendForm } from './components/LendForm/LendForm';
 
 const pageTranslations = translations.aavePage;
 
@@ -20,8 +29,21 @@ export const LendAssetsList: FC<LendAssetsListProps> = ({ lendPools }) => {
   const [open, setOpen] = useState(true);
   const [showZeroBalances, setShowZeroBalances] = useState(true);
   const [orderOptions, setOrderOptions] = useState<OrderOptions>();
+  const [lendAssetDialog, setLendAssetDialog] = useState<string | undefined>();
+
+  const onLendClick = useCallback((asset: string) => {
+    setLendAssetDialog(asset);
+  }, []);
+
+  const onLendClose = useCallback(() => {
+    setLendAssetDialog(undefined);
+  }, []);
+
+  const mobileRenderer = useCallback(
+    p => <LendAssetDetails pool={p} onLendClick={() => onLendClick(p.asset)} />,
+    [onLendClick],
+  );
 
-  const mobileRenderer = useCallback(p => <LendAssetDetails pool={p} />, []);
   const rowTitleRenderer = useCallback(
     row => (
       <AaveRowTitle
@@ -35,6 +57,13 @@ export const LendAssetsList: FC<LendAssetsListProps> = ({ lendPools }) => {
     [],
   );
 
+  const filteredLendPools = useMemo(() => {
+    if (!showZeroBalances) {
+      return lendPools.filter(p => p.walletBalance.gt(0));
+    }
+    return lendPools;
+  }, [lendPools, showZeroBalances]);
+
   return (
     <Accordion
       label={
@@ -55,15 +84,25 @@ export const LendAssetsList: FC<LendAssetsListProps> = ({ lendPools }) => {
       />
 
       <Table
-        columns={COLUMNS_CONFIG}
+        columns={COLUMNS_CONFIG(onLendClick)}
         rowClassName="bg-gray-80"
         accordionClassName="bg-gray-60 border border-gray-70"
         rowTitle={rowTitleRenderer}
         mobileRenderer={mobileRenderer}
-        rows={lendPools}
+        rows={filteredLendPools}
         orderOptions={orderOptions}
         setOrderOptions={setOrderOptions}
       />
+
+      <Dialog disableFocusTrap isOpen={!!lendAssetDialog}>
+        <DialogHeader
+          title={t(translations.aavePage.lendModal.title)}
+          onClose={onLendClose}
+        />
+        <DialogBody className="flex flex-col gap-6">
+          <LendForm onSuccess={onLendClose} asset={lendAssetDialog!} />
+        </DialogBody>
+      </Dialog>
     </Accordion>
   );
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.types.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.types.tsx
index d5232ddf5..49bd834ec 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.types.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.types.tsx
@@ -4,4 +4,5 @@ export type LendPoolDetails = {
   asset: string;
   apy: Decimal;
   canBeCollateral: boolean;
+  walletBalance: Decimal;
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/AssetBalance/AssetBalance.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/AssetBalance/AssetBalance.tsx
index 2f8de9374..b52ea6ddf 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/AssetBalance/AssetBalance.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/AssetBalance/AssetBalance.tsx
@@ -1,7 +1,10 @@
 import React, { FC } from 'react';
+
+import { BOB_CHAIN_ID } from '../../../../../../../config/chains';
+
 import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
-import { useAssetBalance } from '../../../../../../../hooks/useAssetBalance';
 import { useAccount } from '../../../../../../../hooks/useAccount';
+import { useAssetBalance } from '../../../../../../../hooks/useAssetBalance';
 
 export type AssetBalanceRendererProps = {
   asset: string;
@@ -10,8 +13,8 @@ export type AssetBalanceRendererProps = {
 export const AssetBalanceRenderer: FC<AssetBalanceRendererProps> = ({
   asset,
 }) => {
-  const balance = useAssetBalance(asset);
   const { account } = useAccount();
+  const balance = useAssetBalance(asset, BOB_CHAIN_ID);
 
   return account ? (
     <AmountRenderer
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
index 601c799c5..fd9669155 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useState } from 'react';
+import React, { FC } from 'react';
 
 import { t } from 'i18next';
 import { useNavigate } from 'react-router-dom';
@@ -6,31 +6,20 @@ import { useNavigate } from 'react-router-dom';
 import { Button, ButtonStyle } from '@sovryn/ui';
 
 import { translations } from '../../../../../../../locales/i18n';
-import { LendPoolDetails } from '../../LendAssetsList.types';
-import { LendModalContainer } from '../LendModal/LendModalContainer';
 
 type LendAssetActionProps = {
-  pool: LendPoolDetails;
+  onLendClick: () => void;
 };
 
-export const LendAssetAction: FC<LendAssetActionProps> = ({ pool }) => {
+export const LendAssetAction: FC<LendAssetActionProps> = ({ onLendClick }) => {
   const navigate = useNavigate();
-  const [isLendModalOpen, setIsLendModalOpen] = useState(false);
-
-  const handleLendClick = useCallback(() => {
-    setIsLendModalOpen(true);
-  }, []);
-
-  const handleLendClose = useCallback(() => {
-    setIsLendModalOpen(false);
-  }, []);
 
   return (
     <div className="flex items-center justify-center lg:justify-end space-x-2">
       <Button
         className="flex-grow"
         text={t(translations.aavePage.common.lend)}
-        onClick={handleLendClick}
+        onClick={onLendClick}
       />
 
       <Button
@@ -39,12 +28,6 @@ export const LendAssetAction: FC<LendAssetActionProps> = ({ pool }) => {
         style={ButtonStyle.secondary}
         onClick={() => navigate('/aave/reserve-overview')}
       />
-
-      <LendModalContainer
-        asset={pool.asset}
-        handleCloseModal={handleLendClose}
-        isOpen={isLendModalOpen}
-      />
     </div>
   );
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
index 50f6615d6..08e01c502 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
@@ -13,9 +13,13 @@ import { LendAssetAction } from '../LendAssetAction/LendAssetAction';
 
 type LendAssetDetailsProps = {
   pool: LendPoolDetails;
+  onLendClick: () => unknown;
 };
 
-export const LendAssetDetails: FC<LendAssetDetailsProps> = ({ pool }) => (
+export const LendAssetDetails: FC<LendAssetDetailsProps> = ({
+  pool,
+  onLendClick,
+}) => (
   <div className="space-y-3">
     <div>
       {/* Available */}
@@ -34,6 +38,7 @@ export const LendAssetDetails: FC<LendAssetDetailsProps> = ({ pool }) => (
         value={<AmountRenderer value={pool.apy} suffix="%" />}
       />
 
+      {/* Can be collateral */}
       <SimpleTableRow
         label={t(translations.aavePage.lendAssetsList.canBeCollateral)}
         valueClassName="flex justify-end"
@@ -49,6 +54,6 @@ export const LendAssetDetails: FC<LendAssetDetailsProps> = ({ pool }) => (
       />
     </div>
 
-    <LendAssetAction pool={pool} />
+    <LendAssetAction onLendClick={onLendClick} />
   </div>
 );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendForm/LendForm.tsx
similarity index 95%
rename from apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx
rename to apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendForm/LendForm.tsx
index ae3d54fe9..0d492b254 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendForm/LendForm.tsx
@@ -46,10 +46,6 @@ export const LendForm: FC<LendFormProps> = ({
   );
   const { handleDeposit } = useAaveSupply();
 
-  const reserve = useMemo(() => {
-    return reserves.find(r => r.symbol === lendAsset) ?? reserves[0];
-  }, [reserves, lendAsset]);
-
   const lendAssetsOptions = useMemo(
     () =>
       reserves.map(r => ({
@@ -66,20 +62,19 @@ export const LendForm: FC<LendFormProps> = ({
     [reserves],
   );
 
-  const isValidLendAmount = useMemo(
-    () => (lendSize.gt(0) ? lendSize.lte(lendAssetBalance) : true),
-    [lendSize, lendAssetBalance],
-  );
-
-  const submitButtonDisabled = useMemo(
-    () => !isValidLendAmount || lendSize.lte(0),
-    [isValidLendAmount, lendSize],
-  );
+  const reserve = useMemo(() => {
+    return reserves.find(r => r.symbol === lendAsset) ?? reserves[0];
+  }, [reserves, lendAsset]);
 
   const assetUsdValue: Decimal = useMemo(() => {
     return Decimal.from(reserve?.priceInUSD ?? 0).mul(lendSize);
   }, [reserve, lendSize]);
 
+  const isValidLendAmount = useMemo(
+    () => (lendSize.gt(0) ? lendSize.lte(lendAssetBalance) : true),
+    [lendSize, lendAssetBalance],
+  );
+
   return (
     <form className="flex flex-col gap-6">
       <div>
@@ -127,11 +122,12 @@ export const LendForm: FC<LendFormProps> = ({
       </SimpleTable>
 
       <Button
-        disabled={submitButtonDisabled}
+        disabled={!isValidLendAmount || lendSize.lte(0)}
         onClick={async () =>
           handleDeposit(
             lendSize,
             await getAssetData(reserve.symbol, BOB_CHAIN_ID),
+            { onComplete: onSuccess },
           )
         }
         text={t(translations.aavePage.lendModal.deposit)}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendModalContainer.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendModalContainer.tsx
deleted file mode 100644
index b37101ccf..000000000
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendModalContainer.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React, { FC } from 'react';
-
-import { t } from 'i18next';
-
-import { Dialog, DialogBody, DialogHeader } from '@sovryn/ui';
-
-import { translations } from '../../../../../../../locales/i18n';
-import { LendForm } from './LendForm';
-
-type LendModalContainerProps = {
-  asset: string;
-  isOpen: boolean;
-  handleCloseModal: () => void;
-};
-
-export const LendModalContainer: FC<LendModalContainerProps> = ({
-  asset,
-  isOpen,
-  handleCloseModal,
-}) => (
-  <Dialog disableFocusTrap isOpen={isOpen}>
-    <DialogHeader
-      title={t(translations.aavePage.lendModal.title)}
-      onClose={handleCloseModal}
-    />
-    <DialogBody className="flex flex-col gap-6">
-      <LendForm onSuccess={handleCloseModal} asset={asset} />
-    </DialogBody>
-  </Dialog>
-);
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
index 8b3796671..cff94bf4f 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
@@ -16,7 +16,7 @@ import { ToggleCollateralAction } from './components/ToggleCollateralAction/Togg
 
 const pageTranslations = translations.aavePage;
 
-export const COLUMNS_CONFIG = [
+export const COLUMNS_CONFIG = (onWithdrawClick: (asset: string) => void) => [
   {
     id: 'asset',
     sortable: true,
@@ -84,7 +84,9 @@ export const COLUMNS_CONFIG = [
     align: Align.center,
     title: ' ',
     cellRenderer: (position: LendPosition) => (
-      <LendPositionAction position={position} />
+      <LendPositionAction
+        onWithdrawClick={() => onWithdrawClick(position.asset)}
+      />
     ),
   },
 ];
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
index 463a58e27..434dfd3ea 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
@@ -4,6 +4,9 @@ import { t } from 'i18next';
 
 import {
   Accordion,
+  Dialog,
+  DialogBody,
+  DialogHeader,
   OrderDirection,
   OrderOptions,
   Paragraph,
@@ -18,13 +21,14 @@ import { PoolPositionStat } from '../PoolPositionStat/PoolPositionStat';
 import { COLUMNS_CONFIG } from './LendPositionsList.constants';
 import { LendPosition } from './LendPositionsList.types';
 import { LendPositionDetails } from './components/LendPositionDetails/LendPositionDetails';
+import { WithdrawForm } from './components/WithdrawForm/WithdrawForm';
 
 const pageTranslations = translations.aavePage;
 
 type LendPositionsListProps = {
-  supplyBalance?: Decimal;
-  supplyWeightedApy?: Decimal;
-  collateralBalance?: Decimal;
+  supplyBalance: Decimal;
+  supplyWeightedApy: Decimal;
+  collateralBalance: Decimal;
   lendPositions: LendPosition[];
 };
 
@@ -35,12 +39,28 @@ export const LendPositionsList: FC<LendPositionsListProps> = ({
   lendPositions,
 }) => {
   const { account } = useAccount();
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState<boolean>(true);
+  const [withdrawAssetDialog, setWithdrawAssetDialog] = useState<
+    string | undefined
+  >();
   const [orderOptions, setOrderOptions] = useState<OrderOptions>({
     orderBy: 'balance',
     orderDirection: OrderDirection.Asc,
   });
 
+  const onWithdrawClick = useCallback((asset: string) => {
+    setWithdrawAssetDialog(asset);
+  }, []);
+
+  const onWithdrawClose = useCallback(() => {
+    setWithdrawAssetDialog(undefined);
+  }, []);
+
+  const mobileRenderer = useCallback(
+    p => <LendPositionDetails position={p} onWithdrawClick={onWithdrawClick} />,
+    [onWithdrawClick],
+  );
+
   const rowTitleRenderer = useCallback(
     (r: LendPosition) => (
       <AaveRowTitle
@@ -52,10 +72,6 @@ export const LendPositionsList: FC<LendPositionsListProps> = ({
     ),
     [],
   );
-  const mobileRenderer = useCallback(
-    p => <LendPositionDetails position={p} />,
-    [],
-  );
 
   return (
     <Accordion
@@ -74,26 +90,27 @@ export const LendPositionsList: FC<LendPositionsListProps> = ({
           <div className="flex flex-col gap-2 mb-2 lg:flex-row lg:gap-6 lg:mb-6">
             <PoolPositionStat
               label={t(pageTranslations.common.balance)}
-              value={supplyBalance ?? 0}
+              value={supplyBalance}
               prefix="$"
               precision={2}
             />
             <PoolPositionStat
               label={t(pageTranslations.common.apy)}
               labelInfo={t(pageTranslations.common.apyInfo)}
-              value={supplyWeightedApy ?? 0}
+              value={supplyWeightedApy}
               suffix="%"
               precision={2}
             />
             <PoolPositionStat
               label={t(pageTranslations.common.collateral)}
-              value={collateralBalance ?? 0}
+              value={collateralBalance}
               prefix="$"
               precision={2}
             />
           </div>
+
           <Table
-            columns={COLUMNS_CONFIG}
+            columns={COLUMNS_CONFIG(onWithdrawClick)}
             rowClassName="bg-gray-80"
             accordionClassName="bg-gray-60 border border-gray-70"
             rowTitle={rowTitleRenderer}
@@ -102,6 +119,19 @@ export const LendPositionsList: FC<LendPositionsListProps> = ({
             orderOptions={orderOptions}
             setOrderOptions={setOrderOptions}
           />
+
+          <Dialog disableFocusTrap isOpen={!!withdrawAssetDialog}>
+            <DialogHeader
+              title={t(translations.aavePage.common.withdraw)}
+              onClose={onWithdrawClose}
+            />
+            <DialogBody className="flex flex-col gap-6">
+              <WithdrawForm
+                asset={withdrawAssetDialog!}
+                onSuccess={onWithdrawClose}
+              />
+            </DialogBody>
+          </Dialog>
         </>
       ) : (
         <div className="flex items-center justify-center lg:h-12">
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
index f28eb9848..fe8044f4e 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
@@ -1,43 +1,25 @@
-import React, { FC, useCallback, useState } from 'react';
+import React, { FC } from 'react';
 
 import { t } from 'i18next';
 
 import { Button, ButtonStyle } from '@sovryn/ui';
 
 import { translations } from '../../../../../../../locales/i18n';
-import { LendPosition } from '../../LendPositionsList.types';
-import { WithdrawModalContainer } from '../WithdrawModal/WithdrawModalContainer';
 
 type LendPositionActionProps = {
-  position: LendPosition;
+  onWithdrawClick: () => unknown;
 };
 
 export const LendPositionAction: FC<LendPositionActionProps> = ({
-  position,
+  onWithdrawClick,
 }) => {
-  const [isWithdrawModalOpen, setIsWithdrawModalOpen] = useState(false);
-
-  const handleWithdrawClick = useCallback(() => {
-    setIsWithdrawModalOpen(true);
-  }, []);
-
-  const handleWithdrawClose = useCallback(() => {
-    setIsWithdrawModalOpen(false);
-  }, []);
-
   return (
     <div className="flex items-center justify-center lg:justify-end space-x-2">
       <Button
         style={ButtonStyle.secondary}
         className="flex-grow"
         text={t(translations.common.buttons.withdraw)}
-        onClick={handleWithdrawClick}
-      />
-
-      <WithdrawModalContainer
-        asset={position.asset}
-        handleCloseModal={handleWithdrawClose}
-        isOpen={isWithdrawModalOpen}
+        onClick={onWithdrawClick}
       />
     </div>
   );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
index b1010515a..58ed5a6b1 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
@@ -13,13 +13,16 @@ import { ToggleCollateralAction } from '../ToggleCollateralAction/ToggleCollater
 
 type LendPositionDetailsProps = {
   position: LendPosition;
+  onWithdrawClick: (asset: string) => void;
 };
 
 export const LendPositionDetails: FC<LendPositionDetailsProps> = ({
   position,
+  onWithdrawClick,
 }) => (
   <div className="space-y-3">
     <div>
+      {/* Balance */}
       <SimpleTableRow
         label={t(translations.aavePage.common.balance)}
         value={
@@ -31,6 +34,7 @@ export const LendPositionDetails: FC<LendPositionDetailsProps> = ({
         }
       />
 
+      {/* APY */}
       <SimpleTableRow
         label={
           <span className="text-xs font-medium text-gray-30 flex gap-1 items-center">
@@ -44,12 +48,15 @@ export const LendPositionDetails: FC<LendPositionDetailsProps> = ({
         value={<AmountRenderer value={position.apy} suffix={'%'} />}
       />
 
+      {/* Can be collateral */}
       <SimpleTableRow
         label={t(translations.aavePage.lendPositionsList.usedAsCollateral)}
         value={<ToggleCollateralAction position={position} />}
       />
     </div>
 
-    <LendPositionAction position={position} />
+    <LendPositionAction
+      onWithdrawClick={() => onWithdrawClick(position.asset)}
+    />
   </div>
 );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx
similarity index 73%
rename from apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
rename to apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx
index f984a894c..144c23628 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx
@@ -19,7 +19,6 @@ 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 { useAaveReservesData } from '../../../../../../../hooks/aave/useAaveReservesData';
 import { useAaveUserReservesData } from '../../../../../../../hooks/aave/useAaveUserReservesData';
 import { useAaveWithdraw } from '../../../../../../../hooks/aave/useAaveWithdraw';
 import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
@@ -34,7 +33,6 @@ type WithdrawFormProps = {
 
 export const WithdrawForm: FC<WithdrawFormProps> = ({ asset }) => {
   const { handleWithdraw } = useAaveWithdraw();
-  const reserves = useAaveReservesData();
   const userReservesSummary = useAaveUserReservesData();
   const [withdrawAsset, setWithdrawAsset] = useState<string>(asset);
   const [withdrawAmount, setWithdrawAmount, withdrawSize] =
@@ -42,36 +40,37 @@ export const WithdrawForm: FC<WithdrawFormProps> = ({ asset }) => {
 
   const withdrawableAssetsOptions = useMemo(
     () =>
-      !userReservesSummary
-        ? []
-        : userReservesSummary.suppliedAssets.map(sa => ({
-            value: sa.asset,
-            label: (
-              <AssetRenderer
-                showAssetLogo
-                asset={sa.asset}
-                assetClassName="font-medium"
-                chainId={BOB_CHAIN_ID}
-              />
-            ),
-          })),
+      userReservesSummary.reserves
+        .filter(r => r.supplied.gt(0))
+        .map(sa => ({
+          value: sa.asset,
+          label: (
+            <AssetRenderer
+              showAssetLogo
+              asset={sa.asset}
+              assetClassName="font-medium"
+              chainId={BOB_CHAIN_ID}
+            />
+          ),
+        })),
     [userReservesSummary],
   );
 
-  const maximumWithdrawAmount: Decimal = useMemo(() => {
-    if (!userReservesSummary) return Decimal.from(0);
-    const sa = userReservesSummary.suppliedAssets.find(
-      sa => sa.asset === withdrawAsset,
+  const withdrawReserve = useMemo(() => {
+    return userReservesSummary.reserves.find(
+      r => r.reserve.symbol === withdrawAsset,
     );
-    return sa ? sa.supplied : Decimal.from(0);
-  }, [userReservesSummary, withdrawAsset]);
+  }, [withdrawAsset, userReservesSummary]);
 
-  const withdrawAmountUsd: Decimal = useMemo(() => {
-    if (!reserves) return Decimal.from(0);
-    const reserve = reserves.find(r => r.symbol === withdrawAsset);
+  const maximumWithdrawAmount: Decimal = useMemo(() => {
+    return withdrawReserve ? withdrawReserve.supplied : Decimal.from(0);
+  }, [withdrawReserve]);
 
-    return reserve ? withdrawSize.mul(reserve.priceInUSD) : Decimal.from(0);
-  }, [withdrawSize, reserves, withdrawAsset]);
+  const withdrawAmountUsd: Decimal = useMemo(() => {
+    return withdrawReserve
+      ? withdrawSize.mul(withdrawReserve.reserve.priceInUSD)
+      : Decimal.from(0);
+  }, [withdrawSize, withdrawReserve]);
 
   const remainingSupply = useMemo(
     () => maximumWithdrawAmount.sub(withdrawSize),
@@ -88,21 +87,22 @@ export const WithdrawForm: FC<WithdrawFormProps> = ({ asset }) => {
     [isValidWithdrawAmount, withdrawSize],
   );
 
+  const tabItems = useMemo(
+    () => [
+      // For now just withdraw is supported
+      {
+        activeClassName: 'text-primary-20',
+        dataAttribute: 'withdraw',
+        label: t(translations.common.withdraw),
+      },
+    ],
+    [],
+  );
+
   return (
     <form className="flex flex-col gap-6">
       <div className="space-y-2">
-        <Tabs
-          type={TabType.secondary}
-          index={0}
-          items={[
-            // For now just withdraw is supported
-            {
-              activeClassName: 'text-primary-20',
-              dataAttribute: 'withdraw',
-              label: t(translations.common.withdraw),
-            },
-          ]}
-        />
+        <Tabs type={TabType.secondary} index={0} items={tabItems} />
 
         <div className="space-y-3">
           <AssetAmountInput
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx
deleted file mode 100644
index d826025c9..000000000
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React, { FC } from 'react';
-
-import { t } from 'i18next';
-
-import { Dialog, DialogBody, DialogHeader } from '@sovryn/ui';
-
-import { translations } from '../../../../../../../locales/i18n';
-import { WithdrawForm } from './WithdrawForm';
-
-type WithdrawModalContainerProps = {
-  asset: string;
-  isOpen: boolean;
-  handleCloseModal: () => unknown;
-};
-
-export const WithdrawModalContainer: FC<WithdrawModalContainerProps> = ({
-  asset,
-  isOpen,
-  handleCloseModal,
-}) => (
-  <Dialog disableFocusTrap isOpen={isOpen}>
-    <DialogHeader
-      title={t(translations.aavePage.common.withdraw)}
-      onClose={handleCloseModal}
-    />
-    <DialogBody className="flex flex-col gap-6">
-      <WithdrawForm asset={asset} onSuccess={handleCloseModal} />
-    </DialogBody>
-  </Dialog>
-);
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx b/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
index 1dacbc811..86b8a9723 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/TopPanel/TopPanel.tsx
@@ -13,9 +13,9 @@ import { translations } from '../../../../../locales/i18n';
 const pageTranslations = translations.aavePage.topPanel;
 
 type TopPanelProps = {
-  netWorth?: Decimalish;
-  netApy?: Decimalish;
-  healthFactor?: Decimalish;
+  netWorth: Decimalish;
+  netApy: Decimalish;
+  healthFactor: Decimalish;
 };
 
 export const TopPanel: FC<TopPanelProps> = ({
@@ -41,7 +41,7 @@ export const TopPanel: FC<TopPanelProps> = ({
           <StatisticsCard
             label={t(pageTranslations.netWorth)}
             value={
-              account && netWorth ? (
+              account ? (
                 <AmountRenderer
                   prefix="$"
                   precision={2}
@@ -55,7 +55,7 @@ export const TopPanel: FC<TopPanelProps> = ({
             <StatisticsCard
               label={t(pageTranslations.netApy)}
               value={
-                account && netApy ? (
+                account ? (
                   <AmountRenderer
                     suffix="%"
                     value={netApy}
@@ -69,7 +69,7 @@ export const TopPanel: FC<TopPanelProps> = ({
             <StatisticsCard
               label={t(pageTranslations.healthFactor)}
               value={
-                account && healthFactor ? (
+                account ? (
                   <AmountRenderer
                     suffix="%"
                     precision={2}
diff --git a/apps/frontend/src/constants/aave.ts b/apps/frontend/src/constants/aave.ts
index 868478285..c1cb215bd 100644
--- a/apps/frontend/src/constants/aave.ts
+++ b/apps/frontend/src/constants/aave.ts
@@ -1,18 +1,18 @@
 import { ethers } from 'ethers';
 
-import { Decimal } from '@sovryn/utils';
+import { decimalic } from '../utils/math';
 
 export const config = {
-  chainId: 137,
-  MinHealthFactor: Decimal.from('1.05'),
-  PoolAddress: '0x794a61358D6845594F94dc1DB02A252b5b4814aD',
-  WETHGatewayAddress: '0xC1E320966c485ebF2A0A2A6d3c0Dc860A156eB1B',
-  VariableDebtWETHAddress: '0x4a1c3aD6Ed28a636ee1751C69071f6be75DEb8B8',
-  UiPoolDataProviderV3Address: '0x5598BbFA2f4fE8151f45bBA0a3edE1b54B51a0a9',
-  PoolAddressesProviderAddress: '0xa97684ead0e402dC232d5A977953DF7ECBaB3CDb',
-  assetsWhitelist: ['DAI', 'USDC', 'USDT', 'BTC', 'WETH', 'EURS', 'WMATIC'],
-  // TODO: temporary
+  chainId: 111,
+  MinCollateralRatio: decimalic(1.5),
+  PoolAddress: '0xD0Fb3Eb747A368f01d1598faF1F1C55a33416429',
+  WETHGatewayAddress: '0x5723D6ABA3e46375C343A82fEC9e05a465dE387B',
+  VariableDebtWETHAddress: '0x1F016249e1bCa541f4BFb1268aF3f4f293eAf082',
+  UiPoolDataProviderV3Address: '0xf185Ee9FE1DA4F36b9a53194c83E657fEC8D0FA9',
+  PoolAddressesProviderAddress: '0xAE73edfC71af8f5fb7d8840887E8EE4317989456',
+  assetsWhitelist: ['DAI', 'USDC', 'USDT', 'BTC', 'WETH', 'EURS'],
+
   provider: new ethers.providers.JsonRpcProvider(
-    'https://polygon-bor-rpc.publicnode.com',
+    'https://testnet.rpc.gobob.xyz',
   ),
 };
diff --git a/apps/frontend/src/hooks/aave/useAaveRepay.tsx b/apps/frontend/src/hooks/aave/useAaveRepay.tsx
index 164c843a3..53753888a 100644
--- a/apps/frontend/src/hooks/aave/useAaveRepay.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveRepay.tsx
@@ -9,9 +9,8 @@ import { Decimal } from '@sovryn/utils';
 import { config } from '../../constants/aave';
 import { useTransactionContext } from '../../contexts/TransactionContext';
 import { translations } from '../../locales/i18n';
-import { TransactionFactoryOptions } from '../../types/aave';
+import { BorrowRateMode, TransactionFactoryOptions } from '../../types/aave';
 import { AaveRepayTransactionsFactory } from '../../utils/aave/AaveRepayTransactionsFactory';
-import { LoanType } from '../../utils/aave/AaveUserReservesSummary';
 import { useAccount } from '../useAccount';
 
 export const useAaveRepay = () => {
@@ -31,7 +30,7 @@ export const useAaveRepay = () => {
     async (
       amount: Decimal,
       asset: AssetDetailsData,
-      loanType: LoanType,
+      borrowRateMode: BorrowRateMode,
       opts?: TransactionFactoryOptions,
     ) => {
       if (!aaveRepayTransactionsFactory) {
@@ -45,7 +44,7 @@ export const useAaveRepay = () => {
         await aaveRepayTransactionsFactory.repay(
           asset,
           bnAmount,
-          loanType,
+          borrowRateMode,
           opts,
         ),
       );
diff --git a/apps/frontend/src/hooks/aave/useAaveReservesData.tsx b/apps/frontend/src/hooks/aave/useAaveReservesData.tsx
index 6c99852fc..768f30efd 100644
--- a/apps/frontend/src/hooks/aave/useAaveReservesData.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveReservesData.tsx
@@ -18,7 +18,7 @@ export type Reserve = ReserveDataHumanized & FormatReserveUSDResponse;
 export type ReserveData = Reserve[];
 
 export const useAaveReservesData = (): ReserveData => {
-  const provider = config.provider; // TODO: replace with useAccount
+  const provider = config.provider; // TODO: replace with useAccount. Circular dependency error...
 
   const uiPoolDataProvider = useMemo(
     () =>
diff --git a/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx b/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx
index b110be088..fb1133932 100644
--- a/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx
@@ -1,22 +1,25 @@
 import { UiPoolDataProvider } from '@aave/contract-helpers';
 import { formatReserves, formatUserSummary } from '@aave/math-utils';
 
-import { useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import dayjs from 'dayjs';
 
-import { BOB_CHAIN_ID } from '../../config/chains';
-
 import { config } from '../../constants/aave';
-import { AaveUserReservesSummary } from '../../utils/aave/AaveUserReservesSummary';
-import { useCachedData } from '../useCachedData';
-
-type UserReservesData = AaveUserReservesSummary | null;
+import {
+  AaveUserReservesSummary,
+  AaveUserReservesSummaryFactory,
+} from '../../utils/aave/AaveUserReservesSummary';
+import { useAccount } from '../useAccount';
+import { useBlockNumber } from '../useBlockNumber';
 
-export const useAaveUserReservesData = (): UserReservesData => {
-  const provider = config.provider;
-  const account = '0xF754D0f4de0e815b391D997Eeec5cD07E59858F0';
-  // const { account, provider } = useAccount(); TODO: activate this instead of 2 above once calculations in bob are possible
+export const useAaveUserReservesData = (): AaveUserReservesSummary => {
+  const { account, provider } = useAccount();
+  const [value, setValue] = useState<AaveUserReservesSummary>(
+    AaveUserReservesSummaryFactory.buildZeroSummary([]),
+  );
+  const { value: blockNumber } = useBlockNumber();
+  const [processedBlock, setProcessedBlock] = useState<number | undefined>();
 
   const uiPoolDataProvider = useMemo(
     () =>
@@ -30,49 +33,54 @@ export const useAaveUserReservesData = (): UserReservesData => {
     [provider],
   );
 
-  const { value } = useCachedData<UserReservesData>(
-    `AaveUserReservesData/${account}`,
-    BOB_CHAIN_ID,
-    async () => {
-      if (!account || !uiPoolDataProvider) {
-        return null;
-      }
+  const loadUserReservesData = useCallback(async () => {
+    if (!account || !provider || !uiPoolDataProvider || !blockNumber) {
+      return null;
+    }
 
-      const [reservesData, userReservesData] = await Promise.all([
-        uiPoolDataProvider.getReservesHumanized({
-          lendingPoolAddressProvider: config.PoolAddressesProviderAddress,
-        }),
-        uiPoolDataProvider.getUserReservesHumanized({
-          lendingPoolAddressProvider: config.PoolAddressesProviderAddress,
-          user: account,
-        }),
-      ]);
-      const {
+    const [reservesData, userReservesData] = await Promise.all([
+      uiPoolDataProvider.getReservesHumanized({
+        lendingPoolAddressProvider: config.PoolAddressesProviderAddress,
+      }),
+      uiPoolDataProvider.getUserReservesHumanized({
+        lendingPoolAddressProvider: config.PoolAddressesProviderAddress,
+        user: account,
+      }),
+    ]);
+    const {
+      marketReferenceCurrencyDecimals,
+      marketReferenceCurrencyPriceInUsd: marketReferencePriceInUsd,
+    } = reservesData.baseCurrencyData;
+    const currentTimestamp = dayjs().unix();
+    const userSummary = formatUserSummary({
+      currentTimestamp,
+      marketReferencePriceInUsd,
+      marketReferenceCurrencyDecimals,
+      userReserves: userReservesData.userReserves,
+      userEmodeCategoryId: userReservesData.userEmodeCategoryId,
+      formattedReserves: formatReserves({
+        currentTimestamp,
+        marketReferencePriceInUsd,
         marketReferenceCurrencyDecimals,
-        marketReferenceCurrencyPriceInUsd: marketReferencePriceInUsd,
-      } = reservesData.baseCurrencyData;
-      const currentTimestamp = dayjs().unix();
+        reserves: reservesData.reservesData,
+      }),
+    });
 
-      return AaveUserReservesSummary.from(
-        formatUserSummary({
-          currentTimestamp,
-          marketReferencePriceInUsd,
-          marketReferenceCurrencyDecimals,
-          userReserves: userReservesData.userReserves,
-          userEmodeCategoryId: userReservesData.userEmodeCategoryId,
-          formattedReserves: formatReserves({
-            currentTimestamp,
-            marketReferencePriceInUsd,
-            marketReferenceCurrencyDecimals,
-            reserves: reservesData.reservesData,
-          }),
-        }),
-      );
-    },
-    [uiPoolDataProvider, account],
-    null,
-    { ttl: 1000 * 60, fallbackToPreviousResult: true },
-  );
+    setValue(
+      await AaveUserReservesSummaryFactory.buildSummary(
+        provider,
+        account,
+        userSummary,
+      ),
+    );
+    setProcessedBlock(blockNumber);
+  }, [account, uiPoolDataProvider, blockNumber, provider]);
+
+  useEffect(() => {
+    if (blockNumber !== processedBlock) {
+      loadUserReservesData();
+    }
+  }, [loadUserReservesData, processedBlock, blockNumber]);
 
   return value;
 };
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index ef9d878a5..2bee35fc2 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -814,7 +814,7 @@
         "tx": {
             "supplyTitle": "Deposit {{symbol}} to the pool",
             "supplySubtitle": "Transfers {{amount}} {{symbol}} to the pool",
-            "withdrawTitle": "Withdraw {{asset}} from the pool",
+            "withdrawTitle": "Withdraw {{symbol}} from the pool",
             "withdrawSubtitle": "Transfer {{amount}} {{symbol}} from the pool",
             "repayTitle":"Repay loan",
             "repaySubtitle": "Repay {{amount}} {{symbol}} to the pool",
diff --git a/apps/frontend/src/utils/aave/AaveCalculations.ts b/apps/frontend/src/utils/aave/AaveCalculations.ts
new file mode 100644
index 000000000..391509699
--- /dev/null
+++ b/apps/frontend/src/utils/aave/AaveCalculations.ts
@@ -0,0 +1,140 @@
+import { Decimal } from '@sovryn/utils';
+
+import { UserSummary } from './AaveUserReservesSummary';
+
+export class AaveCalculations {
+  static computeNetApy(
+    weightedSupplyApy: Decimal,
+    suppliedBalance: Decimal,
+    weightedBorrowApy: Decimal,
+    borrowedBalance: Decimal,
+    netWorthUsd: Decimal,
+  ): Decimal {
+    if (netWorthUsd.eq(0)) {
+      return Decimal.from(0);
+    }
+
+    return weightedSupplyApy
+      .mul(suppliedBalance)
+      .div(netWorthUsd)
+      .sub(weightedBorrowApy.mul(borrowedBalance).div(netWorthUsd));
+  }
+
+  static computeSuppliedBalance(
+    reserves: UserSummary['userReservesData'],
+  ): Decimal {
+    return reserves.reduce(
+      (suppliedBalance, r) => suppliedBalance.add(r.underlyingBalanceUSD),
+      Decimal.from(0),
+    );
+  }
+
+  static computeBorrowedBalance(
+    reserves: UserSummary['userReservesData'],
+  ): Decimal {
+    return reserves.reduce(
+      (borrowedBalance, r) => borrowedBalance.add(r.totalBorrows),
+      Decimal.from(0),
+    );
+  }
+
+  static computeBorrowPower(
+    availableBorrowsUSD: Decimal,
+    borrowedBalance: Decimal,
+  ) {
+    return Decimal.from(availableBorrowsUSD).add(borrowedBalance);
+  }
+
+  static computeBorrowPowerUsed(
+    borrowedBalance: Decimal,
+    borrowPower: Decimal,
+  ) {
+    if (borrowPower.eq(0)) {
+      return Decimal.from(100); // all used
+    }
+    return Decimal.from(borrowedBalance).div(borrowPower).mul(100);
+  }
+
+  static computeCollateral(reserves: UserSummary['userReservesData']): Decimal {
+    return reserves.reduce(
+      (collateral, r) =>
+        collateral.add(
+          r.usageAsCollateralEnabledOnUser ? r.underlyingBalanceUSD : 0,
+        ),
+      Decimal.from(0),
+    );
+  }
+
+  static computeHealthFactor(
+    collateral: Decimal,
+    currentLiquidationThreshold: Decimal,
+    borrowedBalance: Decimal,
+  ): Decimal {
+    if (borrowedBalance.eq(0)) {
+      return Decimal.from(Infinity);
+    }
+    return collateral.mul(currentLiquidationThreshold).div(borrowedBalance);
+  }
+
+  static computeCollateralRatio(collateral: Decimal, borrowedBalance: Decimal) {
+    if (borrowedBalance.eq(0)) {
+      return Decimal.from(Infinity);
+    }
+    return collateral.div(borrowedBalance);
+  }
+
+  static computeWeightedBorrowApy(
+    reserves: UserSummary['userReservesData'],
+  ): Decimal {
+    let totalBorrowedUSD = Decimal.from(0);
+    let weightedBorrowAPYSum = Decimal.from(0);
+
+    reserves.forEach(reserve => {
+      const borrowedAmountUSD = Decimal.from(reserve.totalBorrowsUSD);
+      const borrowAPY = Decimal.from(reserve.reserve.variableBorrowAPY);
+
+      weightedBorrowAPYSum = weightedBorrowAPYSum.add(
+        borrowAPY.mul(borrowedAmountUSD),
+      );
+      totalBorrowedUSD = totalBorrowedUSD.add(borrowedAmountUSD);
+    });
+
+    if (totalBorrowedUSD.eq(0) || weightedBorrowAPYSum.eq(0)) {
+      return Decimal.from(0);
+    }
+    return weightedBorrowAPYSum.div(totalBorrowedUSD).mul(100);
+  }
+
+  static computeWeightedSupplyApy(
+    reserves: UserSummary['userReservesData'],
+  ): Decimal {
+    let totalSuppliedUSD = Decimal.from(0);
+    let weightedSupplyAPYSum = Decimal.from(0);
+
+    reserves.forEach(reserve => {
+      const suppliedAmountUSD = Decimal.from(reserve.underlyingBalanceUSD);
+      const supplyAPY = Decimal.from(reserve.reserve.supplyAPY);
+
+      weightedSupplyAPYSum = weightedSupplyAPYSum.add(
+        supplyAPY.mul(suppliedAmountUSD),
+      );
+      totalSuppliedUSD = totalSuppliedUSD.add(suppliedAmountUSD);
+    });
+
+    if (totalSuppliedUSD.eq(0) || weightedSupplyAPYSum.eq(0)) {
+      return Decimal.from(0);
+    }
+    return weightedSupplyAPYSum.div(totalSuppliedUSD).mul(100);
+  }
+
+  static computeLiquidationPrice(
+    borrowSize: Decimal,
+    currentLiquidationThreshold: Decimal,
+    collateralBalance: Decimal,
+  ) {
+    if (collateralBalance.eq(0)) {
+      return Decimal.from(Infinity); // get liquidated right away
+    }
+    return borrowSize.mul(currentLiquidationThreshold).div(collateralBalance);
+  }
+}
diff --git a/apps/frontend/src/utils/aave/AaveRepayTransactionsFactory.ts b/apps/frontend/src/utils/aave/AaveRepayTransactionsFactory.ts
index c437f1b59..05f8e3522 100644
--- a/apps/frontend/src/utils/aave/AaveRepayTransactionsFactory.ts
+++ b/apps/frontend/src/utils/aave/AaveRepayTransactionsFactory.ts
@@ -1,4 +1,4 @@
-import { BigNumber, constants, ethers } from 'ethers';
+import { BigNumber, constants, Contract, ethers } from 'ethers';
 import { t } from 'i18next';
 
 import { AssetDetailsData, getAssetDataByAddress } from '@sovryn/contracts';
@@ -10,8 +10,8 @@ import {
   TransactionType,
 } from '../../app/3_organisms/TransactionStepDialog/TransactionStepDialog.types';
 import { translations } from '../../locales/i18n';
-import { TransactionFactoryOptions } from '../../types/aave';
-import { LoanType } from './AaveUserReservesSummary';
+import { BorrowRateMode, TransactionFactoryOptions } from '../../types/aave';
+import { prepareApproveTransaction } from '../transactions';
 
 export class AaveRepayTransactionsFactory {
   private readonly Pool: ethers.Contract;
@@ -42,48 +42,57 @@ export class AaveRepayTransactionsFactory {
   async repay(
     token: AssetDetailsData,
     amount: BigNumber,
-    loanType: LoanType,
+    borrowRateMode: BorrowRateMode,
     opts?: TransactionFactoryOptions,
   ): Promise<Transaction[]> {
-    if (token.isNative) return this.repayNative(amount, loanType, opts);
-    else return this.repayToken(token, amount, loanType, opts);
+    if (token.isNative) return this.repayNative(amount, borrowRateMode, opts);
+    else return this.repayToken(token, amount, borrowRateMode, opts);
   }
 
   private async repayToken(
     asset: AssetDetailsData,
     amount: BigNumber,
-    loanType: LoanType,
+    borrowRateMode: BorrowRateMode,
     opts?: TransactionFactoryOptions,
   ): Promise<Transaction[]> {
-    return [
-      {
-        title: t(translations.aavePage.tx.repayTitle, {
-          symbol: asset.symbol,
-        }),
-        subtitle: t(translations.aavePage.tx.repaySubtitle, {
-          symbol: asset.symbol,
-          amount: ethers.utils.formatUnits(amount, asset.decimals),
-        }),
-        request: {
-          type: TransactionType.signTransaction,
-          args: [
-            asset.address,
-            amount.toString(),
-            loanType,
-            await this.signer.getAddress(),
-          ],
-          contract: this.Pool,
-          fnName: 'repay',
-          value: 0,
-        },
-        onComplete: opts?.onComplete,
+    const approval = await prepareApproveTransaction({
+      spender: this.PoolAddress,
+      token: asset.symbol,
+      contract: new Contract(asset.address, asset.abi, this.signer),
+      amount: amount,
+      chain: BOB_CHAIN_ID,
+    });
+    const transactions: Transaction[] = approval ? [approval] : [];
+
+    transactions.push({
+      title: t(translations.aavePage.tx.repayTitle, {
+        symbol: asset.symbol,
+      }),
+      subtitle: t(translations.aavePage.tx.repaySubtitle, {
+        symbol: asset.symbol,
+        amount: ethers.utils.formatUnits(amount, asset.decimals),
+      }),
+      request: {
+        type: TransactionType.signTransaction,
+        args: [
+          asset.address,
+          amount.toString(),
+          borrowRateMode,
+          await this.signer.getAddress(),
+        ],
+        contract: this.Pool,
+        fnName: 'repay',
+        value: 0,
       },
-    ];
+      onComplete: opts?.onComplete,
+    });
+
+    return transactions;
   }
 
   private async repayNative(
     amount: BigNumber,
-    loanType: LoanType,
+    borrowRateMode: BorrowRateMode,
     opts?: TransactionFactoryOptions,
   ): Promise<Transaction[]> {
     const nativeAsset = await getAssetDataByAddress(
@@ -105,7 +114,7 @@ export class AaveRepayTransactionsFactory {
           args: [
             this.PoolAddress,
             amount.toString(),
-            loanType,
+            borrowRateMode,
             await this.signer.getAddress(),
           ],
           contract: this.WETHGateway,
diff --git a/apps/frontend/src/utils/aave/AaveSupplyTransactionsFactory.ts b/apps/frontend/src/utils/aave/AaveSupplyTransactionsFactory.ts
index fe238f10d..a3e0ea17b 100644
--- a/apps/frontend/src/utils/aave/AaveSupplyTransactionsFactory.ts
+++ b/apps/frontend/src/utils/aave/AaveSupplyTransactionsFactory.ts
@@ -72,7 +72,7 @@ export class AaveSupplyTransactionsFactory {
             }),
         request: {
           type: TransactionType.signTransaction,
-          args: [token, useAsCollateral],
+          args: [token.address, useAsCollateral],
           contract: this.Pool,
           fnName: 'setUserUseReserveAsCollateral',
         },
diff --git a/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts b/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
index 0e31f6509..158d3525b 100644
--- a/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
+++ b/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
@@ -4,237 +4,199 @@ import {
   FormatUserSummaryResponse,
 } from '@aave/math-utils';
 
+import { BigNumber, ethers } from 'ethers';
+
+import { AssetDetailsData, getAssetData } from '@sovryn/contracts';
 import { Decimal } from '@sovryn/utils';
 
-type UserSummary = FormatUserSummaryResponse<
+import { BOB_CHAIN_ID } from '../../config/chains';
+
+import { Reserve } from '../../hooks/aave/useAaveReservesData';
+import { BorrowRateMode } from '../../types/aave';
+import { decimalic, fromWei } from '../math';
+import { AaveCalculations } from './AaveCalculations';
+
+export type UserSummary = FormatUserSummaryResponse<
   ReserveDataHumanized & FormatReserveUSDResponse
 >;
 
-export enum LoanType {
-  STABLE = 1,
-  VARIABLE = 2,
-}
-
-export type SuppliedAsset = {
+export type ReserveSummary = {
+  reserve: Reserve;
   asset: string;
-  assetAddress: string;
-  apy: Decimal;
-  isCollateral: boolean;
+
+  walletBalance: Decimal;
+  walletBalanceUsd: Decimal;
+  collateral: boolean;
   supplied: Decimal;
   suppliedUSD: Decimal;
-};
-
-export type BorrowedAsset = {
-  asset: string;
-  assetAddress: string;
-  apy: Decimal;
-  type: LoanType;
   borrowed: Decimal;
   borrowedUSD: Decimal;
+  borrowRateMode: BorrowRateMode;
+  availableToBorrow: Decimal;
 };
 
-export class AaveUserReservesSummary {
-  public netWorth: Decimal;
-  public netApy: Decimal;
-  public healthFactor: Decimal;
-  public supplyBalance: Decimal;
-  public supplyWeightedApy: Decimal;
-  public collateralBalance: Decimal;
-  public currentLiquidationThreshold: Decimal;
-  public borrowBalance: Decimal;
-  public borrowWeightedApy: Decimal;
-  public borrowPower: Decimal;
-  public borrowPowerUsed: Decimal;
-  public suppliedAssets: SuppliedAsset[];
-  public borrowedAssets: BorrowedAsset[];
-  public eModeEnabled: boolean;
-
-  constructor(private readonly userSummary: UserSummary) {
-    // balances
-    this.netWorth = Decimal.from(this.userSummary.netWorthUSD);
-    this.borrowBalance = Decimal.from(this.userSummary.totalBorrowsUSD);
-    this.supplyBalance = this.computeSuppliedBalance(
-      this.userSummary.userReservesData,
+export type AaveUserReservesSummary = {
+  netApy: Decimal;
+  netWorth: Decimal;
+  healthFactor: Decimal;
+  collateralRatio: Decimal;
+
+  supplyBalance: Decimal;
+  supplyWeightedApy: Decimal;
+  collateralBalance: Decimal;
+  currentLiquidationThreshold: Decimal;
+
+  borrowBalance: Decimal;
+  borrowWeightedApy: Decimal;
+  borrowPower: Decimal;
+  borrowPowerUsed: Decimal;
+  eModeEnabled: boolean;
+  eModeCategoryId: number;
+
+  reserves: ReserveSummary[];
+};
+
+export class AaveUserReservesSummaryFactory {
+  static buildZeroSummary(reserves: Reserve[]): AaveUserReservesSummary {
+    return {
+      netApy: Decimal.ZERO,
+      netWorth: Decimal.ZERO,
+      healthFactor: Decimal.ZERO,
+      collateralRatio: Decimal.ZERO,
+
+      supplyBalance: Decimal.ZERO,
+      supplyWeightedApy: Decimal.ZERO,
+      collateralBalance: Decimal.ZERO,
+      currentLiquidationThreshold: Decimal.ZERO,
+
+      borrowBalance: Decimal.ZERO,
+      borrowWeightedApy: Decimal.ZERO,
+      borrowPower: Decimal.ZERO,
+      borrowPowerUsed: Decimal.ZERO,
+      eModeEnabled: false,
+      eModeCategoryId: 0,
+
+      reserves: reserves.map(r => ({
+        reserve: r,
+        asset: r.symbol,
+
+        walletBalance: Decimal.ZERO,
+        walletBalanceUsd: Decimal.ZERO,
+        collateral: false,
+        supplied: Decimal.ZERO,
+        suppliedUSD: Decimal.ZERO,
+        availableToSupply: Decimal.ZERO,
+        borrowed: Decimal.ZERO,
+        borrowedUSD: Decimal.ZERO,
+        borrowRateMode: BorrowRateMode.VARIABLE,
+        availableToBorrow: Decimal.ZERO,
+      })),
+    };
+  }
+
+  static async buildSummary(
+    provider: ethers.providers.Provider,
+    account: string,
+    userSummary: UserSummary,
+  ): Promise<AaveUserReservesSummary> {
+    const netWorth = Decimal.from(userSummary.netWorthUSD);
+    const borrowBalance = Decimal.from(userSummary.totalBorrowsUSD);
+    const supplyBalance = AaveCalculations.computeSuppliedBalance(
+      userSummary.userReservesData,
     );
-    this.collateralBalance = this.computeCollateral(
-      this.userSummary.userReservesData,
+    const collateralBalance = AaveCalculations.computeCollateral(
+      userSummary.userReservesData,
     );
-
-    // apy
-    this.supplyWeightedApy = this.computeWeightedSupplyApy(
-      this.userSummary.userReservesData,
+    const supplyWeightedApy = AaveCalculations.computeWeightedSupplyApy(
+      userSummary.userReservesData,
     );
-    this.borrowWeightedApy = this.computeWeightedBorrowApy(
-      this.userSummary.userReservesData,
+    const borrowWeightedApy = AaveCalculations.computeWeightedBorrowApy(
+      userSummary.userReservesData,
     );
-    this.netApy = this.computeNetApy(
-      this.supplyWeightedApy,
-      this.supplyBalance,
-      this.borrowWeightedApy,
-      this.borrowBalance,
-      this.netWorth,
+    const netApy = AaveCalculations.computeNetApy(
+      supplyWeightedApy,
+      supplyBalance,
+      borrowWeightedApy,
+      borrowBalance,
+      netWorth,
     );
 
     // health and borrow status
-    this.currentLiquidationThreshold = Decimal.from(
-      this.userSummary.currentLiquidationThreshold,
-    );
-    this.borrowPower = this.computeBorrowPower(
-      Decimal.from(this.userSummary.availableBorrowsUSD),
-      this.borrowBalance,
+    const currentLiquidationThreshold = Decimal.from(
+      userSummary.currentLiquidationThreshold,
     );
-    this.borrowPowerUsed = this.computeBorrowPowerUsed(
-      this.borrowBalance,
-      this.borrowPower,
-    );
-    this.healthFactor = this.computeHealthFactor(
-      this.collateralBalance,
-      this.currentLiquidationThreshold,
-      this.borrowBalance,
-    );
-
-    // supplied and borrowed assets
-    this.suppliedAssets = this.computeSuppliedAssets(
-      this.userSummary.userReservesData,
+    const borrowPower = AaveCalculations.computeBorrowPower(
+      Decimal.from(userSummary.availableBorrowsUSD),
+      borrowBalance,
     );
-    this.borrowedAssets = this.computeBorrowedAssets(
-      this.userSummary.userReservesData,
+    const borrowPowerUsed = AaveCalculations.computeBorrowPowerUsed(
+      borrowBalance,
+      borrowPower,
     );
-
-    // emode
-    this.eModeEnabled = this.userSummary.userEmodeCategoryId !== 0;
-  }
-
-  static from(
-    userSummary: FormatUserSummaryResponse<
-      ReserveDataHumanized & FormatReserveUSDResponse
-    >,
-  ) {
-    return new AaveUserReservesSummary(userSummary);
-  }
-
-  private computeNetApy(
-    weightedSupplyApy: Decimal,
-    suppliedBalance: Decimal,
-    weightedBorrowApy: Decimal,
-    borrowedBalance: Decimal,
-    netWorthUsd: Decimal,
-  ): Decimal {
-    return weightedSupplyApy
-      .mul(suppliedBalance)
-      .div(netWorthUsd)
-      .sub(weightedBorrowApy.mul(borrowedBalance).div(netWorthUsd));
-  }
-
-  private computeSuppliedBalance(
-    reserves: UserSummary['userReservesData'],
-  ): Decimal {
-    return reserves.reduce(
-      (suppliedBalance, r) => suppliedBalance.add(r.underlyingBalanceUSD),
-      Decimal.from(0),
+    const healthFactor = AaveCalculations.computeHealthFactor(
+      collateralBalance,
+      currentLiquidationThreshold,
+      borrowBalance,
     );
-  }
-
-  private computeBorrowPower(
-    availableBorrowsUSD: Decimal,
-    borrowedBalance: Decimal,
-  ) {
-    return Decimal.from(availableBorrowsUSD).add(borrowedBalance);
-  }
-
-  private computeBorrowPowerUsed(
-    borrowedBalance: Decimal,
-    borrowPower: Decimal,
-  ) {
-    return Decimal.from(borrowedBalance).div(borrowPower).mul(100);
-  }
-
-  private computeCollateral(
-    reserves: UserSummary['userReservesData'],
-  ): Decimal {
-    return reserves.reduce(
-      (collateral, r) =>
-        collateral.add(
-          r.usageAsCollateralEnabledOnUser ? r.underlyingBalanceUSD : 0,
-        ),
-      Decimal.from(0),
+    const collateralRatio = AaveCalculations.computeCollateralRatio(
+      collateralBalance,
+      borrowBalance,
     );
-  }
 
-  private computeHealthFactor(
-    collateral: Decimal,
-    currentLiquidationThreshold: Decimal,
-    borrowedBalance: Decimal,
-  ): Decimal {
-    return collateral.mul(currentLiquidationThreshold).div(borrowedBalance);
-  }
-
-  private computeWeightedBorrowApy(
-    reserves: UserSummary['userReservesData'],
-  ): Decimal {
-    let totalBorrowedUSD = Decimal.from(0);
-    let weightedBorrowAPYSum = Decimal.from(0);
-
-    reserves.forEach(reserve => {
-      const borrowedAmountUSD = Decimal.from(reserve.totalBorrowsUSD);
-      const borrowAPY = Decimal.from(reserve.reserve.variableBorrowAPY);
-
-      weightedBorrowAPYSum = weightedBorrowAPYSum.add(
-        borrowAPY.mul(borrowedAmountUSD),
-      );
-      totalBorrowedUSD = totalBorrowedUSD.add(borrowedAmountUSD);
-    });
-
-    return weightedBorrowAPYSum.div(totalBorrowedUSD).mul(100);
-  }
-
-  private computeWeightedSupplyApy(
-    reserves: UserSummary['userReservesData'],
-  ): Decimal {
-    let totalBorrowedUSD = Decimal.from(0);
-    let weightedBorrowAPYSum = Decimal.from(0);
-
-    reserves.forEach(reserve => {
-      const borrowedAmountUSD = Decimal.from(reserve.totalBorrowsUSD);
-      const borrowAPY = Decimal.from(reserve.reserve.supplyAPY);
-
-      weightedBorrowAPYSum = weightedBorrowAPYSum.add(
-        borrowAPY.mul(borrowedAmountUSD),
-      );
-      totalBorrowedUSD = totalBorrowedUSD.add(borrowedAmountUSD);
-    });
-
-    return weightedBorrowAPYSum.div(totalBorrowedUSD).mul(100);
-  }
-
-  private computeSuppliedAssets(
-    reserves: UserSummary['userReservesData'],
-  ): SuppliedAsset[] {
-    return reserves
-      .filter(r => Decimal.from(r.underlyingBalanceUSD).gt(0))
-      .map(r => ({
-        asset: r.reserve.symbol,
-        assetAddress: r.underlyingAsset,
-        apy: Decimal.from(r.reserve.supplyAPY).mul(100),
-        isCollateral: r.usageAsCollateralEnabledOnUser,
-        supplied: Decimal.from(r.underlyingBalance),
-        suppliedUSD: Decimal.from(r.underlyingBalanceUSD),
-      }));
+    return {
+      netApy,
+      netWorth,
+      healthFactor,
+      collateralRatio,
+
+      supplyBalance,
+      supplyWeightedApy,
+      collateralBalance,
+      currentLiquidationThreshold,
+
+      borrowBalance,
+      borrowWeightedApy,
+      borrowPower,
+      borrowPowerUsed,
+      eModeEnabled: userSummary.userEmodeCategoryId !== 0,
+      eModeCategoryId: userSummary.userEmodeCategoryId,
+
+      reserves: await Promise.all(
+        userSummary.userReservesData.map(async r => {
+          const asset = await getAssetData(r.reserve.symbol, BOB_CHAIN_ID);
+          const balance = await getBalance(asset, account, provider);
+          const decimalBalance = decimalic(fromWei(balance, asset.decimals));
+
+          const availableToBorrow = borrowPower.div(r.reserve.priceInUSD);
+
+          return {
+            asset: r.reserve.symbol,
+            reserve: r.reserve,
+
+            walletBalance: decimalBalance,
+            walletBalanceUsd: decimalBalance.mul(r.reserve.priceInUSD),
+            collateral: r.usageAsCollateralEnabledOnUser,
+            supplied: Decimal.from(r.underlyingBalance),
+            suppliedUSD: Decimal.from(r.underlyingBalanceUSD),
+            borrowed: Decimal.from(r.totalBorrows),
+            borrowedUSD: Decimal.from(r.totalBorrowsUSD),
+            borrowRateMode: Decimal.from(r.variableBorrows).gt(0)
+              ? BorrowRateMode.VARIABLE
+              : BorrowRateMode.STABLE,
+            availableToBorrow,
+          };
+        }),
+      ),
+    };
   }
+}
 
-  private computeBorrowedAssets(
-    reserves: UserSummary['userReservesData'],
-  ): BorrowedAsset[] {
-    return reserves
-      .filter(r => Decimal.from(r.totalBorrowsUSD).gt(0))
-      .map(r => ({
-        asset: r.reserve.symbol,
-        assetAddress: r.underlyingAsset,
-        borrowed: Decimal.from(r.totalBorrows),
-        borrowedUSD: Decimal.from(r.totalBorrowsUSD),
-        apy: Decimal.from(r.reserve.variableBorrowAPY).mul(100),
-        type:
-          Number(r.variableBorrows) > 0 ? LoanType.VARIABLE : LoanType.STABLE,
-      }));
-  }
+function getBalance(
+  asset: AssetDetailsData,
+  account: string,
+  provider: ethers.providers.Provider,
+): Promise<BigNumber> {
+  return asset.isNative
+    ? provider.getBalance(account)
+    : asset.contract(provider).balanceOf(account);
 }
diff --git a/packages/contracts/src/contracts/assets/bobTestnet.ts b/packages/contracts/src/contracts/assets/bobTestnet.ts
index 2fed174eb..8050427bb 100644
--- a/packages/contracts/src/contracts/assets/bobTestnet.ts
+++ b/packages/contracts/src/contracts/assets/bobTestnet.ts
@@ -42,7 +42,7 @@ export const bobTestnet: Array<AssetDetails> = [
   },
   {
     symbol: 'DAI',
-    address: '0x2528AC8426DdCbfd2E038D90532F52a9Ad5BD594',
+    address: '0x4e4e256D3a9789329AB540a7a3b2cd0c03C40431',
     name: 'DAI Stablecoin',
     decimals: 18,
     getIcon: async () => (await import('./icons/bob/dai')).default,
@@ -58,7 +58,7 @@ export const bobTestnet: Array<AssetDetails> = [
     symbol: 'USDC',
     address: '0x509AeFe02953BC2fB8abCa53Fd83C94D86c05922',
     name: 'USD Coin',
-    decimals: 6,
+    decimals: 18,
     getIcon: async () => (await import('./icons/bob/usdc')).default,
   },
   {
@@ -85,9 +85,17 @@ export const bobTestnet: Array<AssetDetails> = [
   {
     symbol: 'aWETH',
     // TODO: properly adjust this variable
-    address: '0xAD51B64c2eeF5877CDF4AcdCC790DF6eaBC6ecbf',
+    address: '0x1b57354f10EFc441803639F74E9624CcA6Ab7abA',
     name: 'Aave Wrapped ETH',
     decimals: 18,
     getIcon: async () => (await import('./icons/bob/eth')).default,
   },
+  {
+    symbol: 'WETH',
+    // TODO: properly adjust this variable
+    address: '0x936EA1bCF82Fbc1Dbe24c6AA140f136A7De15C2E',
+    name: 'Wrapped ETH',
+    decimals: 18,
+    getIcon: async () => (await import('./icons/bob/eth')).default,
+  },
 ];

From 9d02403a77f3efea38af7638e31f139952622b8b Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Tue, 3 Sep 2024 17:39:03 +0300
Subject: [PATCH 072/116] SAF 50 - E-Mode (#30)

* cleanup

* fixes

* fixes. Connect provider. Fix repay adding proper allowance. Fix switch collateral token.address instead of token

* refetch user data based on blocknumber

* fix modal closing on lending positions change plus style adjustments

* fix withdraw modals

* modal fixes

* fix calculation
add balances and filter zero balances

* use memo items

* fix dependencies

* data normalizers

* Apply suggestions from code review

Co-authored-by: Juan <juandahl@users.noreply.github.com>

* Update apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx

Co-authored-by: Juan <juandahl@users.noreply.github.com>

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

Co-authored-by: Juan <juandahl@users.noreply.github.com>

* wip refactor done. Missing hooks merge

* implementations and cleanup

* cleanup

* cleanup

* math safety

* more math safety

* cleanup

* clenaup

* emode mocks

* enable emode working

* emode working

* fixes and cleanup

* remove whitelist

---------

Co-authored-by: Juan <juandahl@users.noreply.github.com>
---
 .../src/app/5_pages/AavePage/AavePage.tsx     |  43 ++--
 .../app/5_pages/AavePage/AavePage.utils.tsx   |   5 +
 .../BorrowAssetsList/BorrowAssetsList.tsx     |  14 +-
 .../components/BorrowModal/BorrowForm.tsx     |  32 ++-
 .../BorrowPositionsList.tsx                   |  10 +-
 .../EfficiencyModeCard/EfficiencyModeCard.tsx | 175 ++++++++++++----
 .../DisableEModeForm/DisableEModeForm.tsx     | 165 +++++++++++++++
 .../EnableEModeForm/EnableEModeForm.tsx       | 108 ++++++++++
 .../SwitchEModeForm/SwitchEModeForm.tsx       | 191 ++++++++++++++++++
 .../RepayForm/RepayWithWalletBalanceForm.tsx  |  20 +-
 .../components/WithdrawForm/WithdrawForm.tsx  |  12 +-
 apps/frontend/src/constants/aave.ts           |  11 +-
 .../src/hooks/aave/useAaveEModeCategories.tsx |  29 +++
 .../src/hooks/aave/useAaveReservesData.tsx    |   5 +-
 .../src/hooks/aave/useAaveSetUserEMode.tsx    |  54 +++++
 .../hooks/aave/useAaveUserReservesData.tsx    |  56 ++---
 .../frontend/src/locales/en/translations.json |  22 +-
 apps/frontend/src/types/aave.ts               |  18 ++
 .../src/utils/aave/AaveEModeCategories.ts     | 105 ++++++++++
 .../aave/AaveEModeTransactionsFactory.ts      |  63 ++++++
 .../src/utils/aave/AaveUserReservesSummary.ts |  48 ++++-
 21 files changed, 1040 insertions(+), 146 deletions(-)
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/EnableEModeForm/EnableEModeForm.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx
 create mode 100644 apps/frontend/src/hooks/aave/useAaveEModeCategories.tsx
 create mode 100644 apps/frontend/src/hooks/aave/useAaveSetUserEMode.tsx
 create mode 100644 apps/frontend/src/utils/aave/AaveEModeCategories.ts
 create mode 100644 apps/frontend/src/utils/aave/AaveEModeTransactionsFactory.ts

diff --git a/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx b/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
index cb7c85f07..6c2a85522 100644
--- a/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
@@ -34,24 +34,24 @@ enum ActiveTab {
 
 const AavePage: FC = () => {
   const reserves = useAaveReservesData();
-  const userReservesSummary = useAaveUserReservesData();
+  const { summary } = useAaveUserReservesData();
   const [activeTab, setActiveTab] = useState<ActiveTab>(ActiveTab.LEND);
 
   const lendPositions: LendPosition[] = useMemo(
-    () => normalizeLendPositions(userReservesSummary),
-    [userReservesSummary],
+    () => normalizeLendPositions(summary),
+    [summary],
   );
   const borrowPositions: BorrowPosition[] = useMemo(
-    () => normalizeBorrowPositions(userReservesSummary),
-    [userReservesSummary],
+    () => normalizeBorrowPositions(summary),
+    [summary],
   );
   const borrowPools: BorrowPoolDetails[] = useMemo(
-    () => normalizeBorrowPoolDetails(reserves, userReservesSummary),
-    [reserves, userReservesSummary],
+    () => normalizeBorrowPoolDetails(reserves, summary),
+    [reserves, summary],
   );
   const lendPools: LendPoolDetails[] = useMemo(
-    () => normalizeLendPoolDetails(reserves, userReservesSummary),
-    [reserves, userReservesSummary],
+    () => normalizeLendPoolDetails(reserves, summary),
+    [reserves, summary],
   );
 
   const tabsItems = useMemo(
@@ -77,9 +77,9 @@ const AavePage: FC = () => {
       </Helmet>
 
       <TopPanel
-        healthFactor={userReservesSummary?.healthFactor}
-        netApy={userReservesSummary?.netApy}
-        netWorth={userReservesSummary?.netWorth}
+        healthFactor={summary?.healthFactor}
+        netApy={summary?.netApy}
+        netWorth={summary?.netWorth}
       />
 
       <div className="pt-6 mt-6 space-y-6 2xl:pt-0 2xl:mt-0 2xl:space-y-0">
@@ -103,9 +103,9 @@ const AavePage: FC = () => {
           >
             <LendPositionsList
               lendPositions={lendPositions}
-              supplyBalance={userReservesSummary.supplyBalance}
-              collateralBalance={userReservesSummary.collateralBalance}
-              supplyWeightedApy={userReservesSummary.supplyWeightedApy}
+              supplyBalance={summary.supplyBalance}
+              collateralBalance={summary.collateralBalance}
+              supplyWeightedApy={summary.supplyWeightedApy}
             />
             <LendAssetsList lendPools={lendPools} />
           </div>
@@ -119,12 +119,15 @@ const AavePage: FC = () => {
           >
             <BorrowPositionsList
               borrowPositions={borrowPositions}
-              eModeEnabled={userReservesSummary.eModeEnabled}
-              borrowBalance={userReservesSummary.borrowBalance}
-              borrowPowerUsed={userReservesSummary.borrowPowerUsed}
-              borrowWeightedApy={userReservesSummary.borrowWeightedApy}
+              eModeCategoryId={summary.eModeCategoryId}
+              borrowBalance={summary.borrowBalance}
+              borrowPowerUsed={summary.borrowPowerUsed}
+              borrowWeightedApy={summary.borrowWeightedApy}
+            />
+            <BorrowAssetsList
+              borrowPools={borrowPools}
+              eModeEnabled={summary.eModeEnabled}
             />
-            <BorrowAssetsList borrowPools={borrowPools} />
           </div>
         </div>
       </div>
diff --git a/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx b/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
index f7c0fbc06..8d6899a99 100644
--- a/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
@@ -52,6 +52,11 @@ export function normalizeBorrowPoolDetails(
   } else {
     return reserves
       .filter(r => r.borrowingEnabled)
+      .filter(
+        r =>
+          userReservesSummary.eModeCategoryId === r.eModeCategoryId ||
+          userReservesSummary.eModeCategoryId === 0,
+      )
       .map(r => ({
         asset: r.symbol,
         apy: Decimal.from(r.variableBorrowAPY).mul(100),
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
index da47c7ba4..c9ebfc3bf 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
@@ -7,6 +7,8 @@ import {
   Dialog,
   DialogBody,
   DialogHeader,
+  ErrorBadge,
+  ErrorLevel,
   OrderOptions,
   Table,
 } from '@sovryn/ui';
@@ -22,10 +24,12 @@ const pageTranslations = translations.aavePage.borrowAssetsList;
 
 type BorrowAssetsListProps = {
   borrowPools: BorrowPoolDetails[];
+  eModeEnabled: boolean;
 };
 
 export const BorrowAssetsList: FC<BorrowAssetsListProps> = ({
   borrowPools,
+  eModeEnabled,
 }) => {
   const [open, setOpen] = useState(true);
   const [orderOptions, setOrderOptions] = useState<OrderOptions>();
@@ -76,8 +80,16 @@ export const BorrowAssetsList: FC<BorrowAssetsListProps> = ({
       open={open}
       onClick={setOpen}
     >
+      {eModeEnabled && (
+        <ErrorBadge
+          className="flex justify-start"
+          level={ErrorLevel.Warning}
+          message={t(translations.aavePage.eMode.eModeActivatedWarning)}
+        />
+      )}
+
       <Table
-        className="mt-3"
+        className="mt-4"
         columns={COLUMNS_CONFIG(onBorrowClick)}
         rowClassName="bg-gray-80"
         accordionClassName="bg-gray-60 border border-gray-70"
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
index 2518fd084..56bc1c77a 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
@@ -36,7 +36,7 @@ type BorrowFormProps = {
 };
 
 export const BorrowForm: FC<BorrowFormProps> = ({ asset, onSuccess }) => {
-  const userReservesSummary = useAaveUserReservesData();
+  const { summary } = useAaveUserReservesData();
   const [borrowAsset, setBorrowAsset] = useState<string>(asset);
   const [borrowAmount, setBorrowAmount, borrowSize] = useDecimalAmountInput('');
   const [acknowledge, setAcknowledge] = useState<boolean>(false);
@@ -44,7 +44,7 @@ export const BorrowForm: FC<BorrowFormProps> = ({ asset, onSuccess }) => {
 
   const borrowableAssetsOptions = useMemo(
     () =>
-      userReservesSummary.reserves
+      summary.reserves
         .filter(r => r.reserve.borrowingEnabled)
         .map(r => ({
           value: r.reserve.symbol,
@@ -57,14 +57,12 @@ export const BorrowForm: FC<BorrowFormProps> = ({ asset, onSuccess }) => {
             />
           ),
         })),
-    [userReservesSummary.reserves],
+    [summary.reserves],
   );
 
   const borrowReserve = useMemo(() => {
-    return userReservesSummary.reserves.find(
-      r => r.reserve.symbol === borrowAsset,
-    );
-  }, [userReservesSummary.reserves, borrowAsset]);
+    return summary.reserves.find(r => r.reserve.symbol === borrowAsset);
+  }, [summary.reserves, borrowAsset]);
 
   const borrowUsdAmount = useMemo(() => {
     return borrowSize.mul(borrowReserve?.reserve.priceInUSD ?? 0);
@@ -76,25 +74,21 @@ export const BorrowForm: FC<BorrowFormProps> = ({ asset, onSuccess }) => {
 
   const newCollateralRatio = useMemo(() => {
     return AaveCalculations.computeCollateralRatio(
-      userReservesSummary.collateralBalance,
-      userReservesSummary.borrowBalance.add(borrowUsdAmount),
+      summary.collateralBalance,
+      summary.borrowBalance.add(borrowUsdAmount),
     );
-  }, [
-    userReservesSummary.collateralBalance,
-    userReservesSummary.borrowBalance,
-    borrowUsdAmount,
-  ]);
+  }, [summary.collateralBalance, summary.borrowBalance, borrowUsdAmount]);
 
   const liquidationPrice = useMemo(() => {
     return AaveCalculations.computeLiquidationPrice(
       borrowSize,
-      userReservesSummary.currentLiquidationThreshold,
-      userReservesSummary.collateralBalance,
+      summary.currentLiquidationThreshold,
+      summary.collateralBalance,
     );
   }, [
     borrowSize,
-    userReservesSummary.currentLiquidationThreshold,
-    userReservesSummary.collateralBalance,
+    summary.currentLiquidationThreshold,
+    summary.collateralBalance,
   ]);
 
   const isValidBorrowAmount = useMemo(
@@ -173,7 +167,7 @@ export const BorrowForm: FC<BorrowFormProps> = ({ asset, onSuccess }) => {
           <span>
             {t(translations.aavePage.borrowForm.acknowledge)}{' '}
             <Link
-              text={translations.aavePage.borrowForm.learnMore}
+              text={t(translations.aavePage.borrowForm.learnMore)}
               href="#learn-more"
             />
             {/* TODO: Add proper learn more href */}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
index 3ce35d09c..cc2c02ab5 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
@@ -30,7 +30,7 @@ type BorrowPositionsListProps = {
   borrowBalance: Decimal;
   borrowWeightedApy: Decimal;
   borrowPowerUsed: Decimal;
-  eModeEnabled: boolean;
+  eModeCategoryId: Number;
 };
 
 export const BorrowPositionsList: FC<BorrowPositionsListProps> = ({
@@ -38,10 +38,10 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = ({
   borrowBalance,
   borrowPowerUsed,
   borrowWeightedApy,
-  eModeEnabled,
+  eModeCategoryId,
 }) => {
   const { account } = useAccount();
-  const [open, setOpen] = useState<boolean>(true);
+  const [open, setOpen] = useState(true);
   const [orderOptions, setOrderOptions] = useState<OrderOptions>();
   const [repayAssetDialog, setRepayAssetDialog] = useState<
     string | undefined
@@ -86,7 +86,7 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = ({
             <span className="text-gray-30 font-medium text-sm">
               {t(pageTranslations.borrowPositionsList.eMode)}
             </span>
-            <EfficiencyModeCard enabled={eModeEnabled} />
+            <EfficiencyModeCard eModeCategoryId={eModeCategoryId} />
           </div>
         </div>
       }
@@ -98,7 +98,7 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = ({
       {account ? (
         <>
           <EfficiencyModeCard
-            enabled={eModeEnabled}
+            eModeCategoryId={eModeCategoryId}
             className="lg:hidden mb-3"
           />
           <div className="flex flex-col gap-2 mb-2 lg:flex-row lg:gap-6 lg:mb-6">
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx
index 069106293..e771c05a4 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx
@@ -1,10 +1,14 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback, useMemo, useState } from 'react';
 
 import classNames from 'classnames';
 import { t } from 'i18next';
 
 import {
   Button,
+  ButtonStyle,
+  Dialog,
+  DialogBody,
+  DialogHeader,
   Icon,
   IconNames,
   Link,
@@ -14,53 +18,150 @@ import {
 } from '@sovryn/ui';
 
 import { EModeIcon } from '../../../../../../1_atoms/Icons/Icons';
+import { useAaveEModeCategories } from '../../../../../../../hooks/aave/useAaveEModeCategories';
 import { translations } from '../../../../../../../locales/i18n';
+import { EModeCategory } from '../../../../../../../types/aave';
+import { DisableEModeForm } from './components/DisableEModeForm/DisableEModeForm';
+import { EnableEModeForm } from './components/EnableEModeForm/EnableEModeForm';
+import { SwitchEModeForm } from './components/SwitchEModeForm/SwitchEModeForm';
 
 type EfficiencyModeCardProps = {
   className?: string;
-  enabled: boolean;
+  eModeCategoryId: Number;
 };
 
 export const EfficiencyModeCard: FC<EfficiencyModeCardProps> = ({
   className,
-  enabled,
+  eModeCategoryId,
 }) => {
+  const eModeCategories = useAaveEModeCategories();
+  const [enableEModeOpen, setEnableEModeOpen] = useState(false);
+  const [disableEModeOpen, setDisableEModeOpen] = useState(false);
+  const [switchEModeOpen, setSwitchEModeOpen] = useState(false);
+
+  const onEnableEModeClose = useCallback(() => {
+    setEnableEModeOpen(false);
+  }, []);
+
+  const onDisableEModeClose = useCallback(() => {
+    setDisableEModeOpen(false);
+  }, []);
+
+  const onSwitchEModeClose = useCallback(() => {
+    setSwitchEModeOpen(false);
+  }, []);
+
+  const currentCategory = useMemo(() => {
+    return eModeCategories.find(c => c.id === eModeCategoryId);
+  }, [eModeCategories, eModeCategoryId]);
+
   return (
-    <Tooltip
-      className={classNames('flex flex-row gap-2 items-center', className)}
-      tooltipClassName="p-1 bg-gray-80"
-      trigger={TooltipTrigger.click}
-      content={
-        <div className="max-w-52 ">
-          <div className="p-[10px] text-white space-y-1">
-            <Paragraph className="font-medium text-sm">
-              {t(translations.aavePage.eModeCard.title)}
-            </Paragraph>
-            <Paragraph>
-              {t(translations.aavePage.eModeCard.description)}{' '}
-              <Link href="#" text={t(translations.common.learnMore)} />
-            </Paragraph>
+    <>
+      <Tooltip
+        className={classNames('flex flex-row gap-2 items-center', className)}
+        tooltipClassName="p-1 bg-gray-80"
+        trigger={TooltipTrigger.click}
+        content={
+          <div className="max-w-52 ">
+            <div className="p-[10px] text-white space-y-1">
+              <Paragraph className="font-medium text-sm">
+                {t(translations.aavePage.eModeCard.title)}
+              </Paragraph>
+
+              {eModeCategoryId !== 0 && (
+                <div className="py-4">
+                  <Paragraph className="mb-1 text-gray-30 font-medium text-xs">
+                    {t(translations.aavePage.eMode.assetCategory)}
+                  </Paragraph>
+
+                  <div className="grid grid-cols-2">
+                    <span className="text-gray-10 font-medium text-xs">
+                      {currentCategory?.label}
+                    </span>
+                    <div className="flex items-center space-x-2">
+                      <Icon
+                        icon={IconNames.SUCCESS_ICON}
+                        className="text-success"
+                        size={20}
+                      />
+                      <span className="font-medium text-xs">Enabled</span>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              <Paragraph>
+                {t(translations.aavePage.eModeCard.description)}{' '}
+                <Link href="#" text={t(translations.common.learnMore)} />
+              </Paragraph>
+            </div>
+            {eModeCategoryId !== 0 ? (
+              <div className="space-y-1">
+                <Button
+                  onClick={() => setSwitchEModeOpen(true)}
+                  text={t(translations.aavePage.eMode.switchCategory)}
+                  className="w-full"
+                />
+                <Button
+                  style={ButtonStyle.secondary}
+                  onClick={() => setDisableEModeOpen(true)}
+                  text={t(translations.common.buttons.disable)}
+                  className="w-full"
+                />
+              </div>
+            ) : (
+              <Button
+                onClick={() => setEnableEModeOpen(true)}
+                text={t(translations.common.buttons.enable)}
+                className="w-full"
+              />
+            )}
           </div>
-          <Button
-            text={
-              enabled
-                ? t(translations.common.buttons.disable)
-                : t(translations.common.buttons.enable)
-            }
-            className="w-full"
-          />
+        }
+      >
+        <div>
+          <Icon className="text-gray-30" icon={EModeIcon} size={16} />
+          <span className="text-gray-30 text-sm">
+            {eModeCategoryId !== 0
+              ? t(translations.aavePage.eModeCard.enabled)
+              : t(translations.aavePage.eModeCard.disabled)}
+          </span>
+          <Icon icon={IconNames.SETTINGS} />
         </div>
-      }
-    >
-      <div>
-        <Icon className="text-gray-30" icon={EModeIcon} size={16} />
-        <span className="text-gray-30 text-sm">
-          {enabled
-            ? t(translations.aavePage.eModeCard.enabled)
-            : t(translations.aavePage.eModeCard.disabled)}
-        </span>
-        <Icon icon={IconNames.SETTINGS} />
-      </div>
-    </Tooltip>
+      </Tooltip>
+
+      <Dialog disableFocusTrap isOpen={enableEModeOpen}>
+        <DialogHeader
+          title={t(translations.aavePage.eMode.enableEMode)}
+          onClose={onEnableEModeClose}
+        />
+        <DialogBody>
+          <EnableEModeForm categories={eModeCategories} />
+        </DialogBody>
+      </Dialog>
+
+      <Dialog disableFocusTrap isOpen={switchEModeOpen}>
+        <DialogHeader
+          title={t(translations.aavePage.eMode.switchCategory)}
+          onClose={onSwitchEModeClose}
+        />
+        <DialogBody>
+          <SwitchEModeForm
+            categories={eModeCategories}
+            current={currentCategory as EModeCategory}
+          />
+        </DialogBody>
+      </Dialog>
+
+      <Dialog disableFocusTrap isOpen={disableEModeOpen}>
+        <DialogHeader
+          title={t(translations.aavePage.eMode.disableEMode)}
+          onClose={onDisableEModeClose}
+        />
+        <DialogBody>
+          <DisableEModeForm current={currentCategory as EModeCategory} />
+        </DialogBody>
+      </Dialog>
+    </>
   );
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx
new file mode 100644
index 000000000..0971bfa17
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx
@@ -0,0 +1,165 @@
+import { formatReserves, formatUserSummary } from '@aave/math-utils';
+
+import React, { FC, useCallback, useMemo } from 'react';
+
+import { t } from 'i18next';
+
+import {
+  Button,
+  ErrorBadge,
+  ErrorLevel,
+  Icon,
+  IconNames,
+  SimpleTable,
+  SimpleTableRow,
+} from '@sovryn/ui';
+import { Decimal } from '@sovryn/utils';
+
+import { AmountRenderer } from '../../../../../../../../2_molecules/AmountRenderer/AmountRenderer';
+import { config } from '../../../../../../../../../constants/aave';
+import { useAaveSetUserEMode } from '../../../../../../../../../hooks/aave/useAaveSetUserEMode';
+import { useAaveUserReservesData } from '../../../../../../../../../hooks/aave/useAaveUserReservesData';
+import { translations } from '../../../../../../../../../locales/i18n';
+import { EModeCategory } from '../../../../../../../../../types/aave';
+import { AaveCalculations } from '../../../../../../../../../utils/aave/AaveCalculations';
+import { CollateralRatioHealthBar } from '../../../../../CollateralRatioHealthBar/CollateralRatioHealthBar';
+
+type DisableEModeFormProps = {
+  current: EModeCategory;
+};
+
+export const DisableEModeForm: FC<DisableEModeFormProps> = ({ current }) => {
+  const { handleDisableUserEMode } = useAaveSetUserEMode();
+  const { userReservesData, reservesData, timestamp } =
+    useAaveUserReservesData();
+
+  const onConfirm = useCallback(() => {
+    handleDisableUserEMode();
+  }, [handleDisableUserEMode]);
+
+  const newSummary = useMemo(() => {
+    if (!userReservesData || !reservesData) {
+      return;
+    }
+
+    const {
+      marketReferenceCurrencyDecimals,
+      marketReferenceCurrencyPriceInUsd: marketReferencePriceInUsd,
+    } = reservesData.baseCurrencyData;
+    return formatUserSummary({
+      userEmodeCategoryId: 0, // disable mode
+      currentTimestamp: timestamp,
+      marketReferencePriceInUsd,
+      marketReferenceCurrencyDecimals,
+      userReserves: userReservesData.userReserves,
+      formattedReserves: formatReserves({
+        currentTimestamp: timestamp,
+        marketReferencePriceInUsd,
+        marketReferenceCurrencyDecimals,
+        reserves: reservesData.reservesData,
+      }),
+    });
+  }, [userReservesData, reservesData, timestamp]);
+
+  const newCollateralRatio = useMemo(() => {
+    if (!newSummary) {
+      return Decimal.from(0);
+    }
+    return AaveCalculations.computeCollateralRatio(
+      Decimal.from(newSummary.totalCollateralUSD),
+      Decimal.from(newSummary.totalBorrowsUSD),
+    );
+  }, [newSummary]);
+
+  const liquidationRisk = useMemo(() => {
+    if (newSummary?.healthFactor === '-1') {
+      return false;
+    }
+    return Decimal.from(newSummary?.healthFactor ?? 0).lte(1);
+  }, [newSummary?.healthFactor]);
+
+  const confirmEnabled = useMemo(() => {
+    // cannot disable if undercollateralized
+    return !liquidationRisk;
+  }, [liquidationRisk]);
+
+  return (
+    <div className="space-y-6">
+      {liquidationRisk && (
+        <ErrorBadge
+          level={ErrorLevel.Critical}
+          message={t(translations.aavePage.eMode.liquidationRiskWarning)}
+          dataAttribute="liquidation-risk-warning"
+        />
+      )}
+
+      <CollateralRatioHealthBar
+        ratio={newCollateralRatio}
+        minimum={config.MinCollateralRatio}
+      />
+
+      <SimpleTable>
+        <SimpleTableRow
+          label={t(translations.aavePage.eMode.eModeCategory)}
+          value={
+            <div className={'flex items-center justify-end gap-1'}>
+              <span>{current?.label}</span>
+              <Icon
+                icon={IconNames.ARROW_RIGHT}
+                className="h-2 flex-shrink-0"
+              />
+              <span className="text-primary-10">
+                {t(translations.aavePage.eMode.none)}
+              </span>
+            </div>
+          }
+        />
+        <SimpleTableRow
+          label={t(translations.aavePage.eMode.availableAssets)}
+          value={
+            <div className={'flex items-center justify-end gap-1'}>
+              <span>{current?.assets.join(', ')}</span>
+              <Icon
+                icon={IconNames.ARROW_RIGHT}
+                className="h-2 flex-shrink-0"
+              />
+              <span className="text-primary-10">
+                {t(translations.aavePage.eMode.allAssets)}
+              </span>
+            </div>
+          }
+        />
+        <SimpleTableRow
+          label={t(translations.aavePage.eMode.maxLoanToValue)}
+          value={
+            <div className={'flex items-center justify-end gap-1'}>
+              <AmountRenderer
+                value={Decimal.from(current?.ltv ?? 0).div(100)}
+                precision={2}
+                suffix="%"
+              />
+              <Icon
+                icon={IconNames.ARROW_RIGHT}
+                className="h-2 flex-shrink-0"
+              />
+              <AmountRenderer
+                value={Decimal.from(newSummary?.currentLoanToValue ?? 0).mul(
+                  100,
+                )}
+                precision={2}
+                suffix="%"
+              />
+            </div>
+          }
+        />
+      </SimpleTable>
+
+      <Button
+        className="w-full"
+        disabled={!confirmEnabled}
+        text={t(translations.aavePage.eMode.disableEMode)}
+        onClick={onConfirm}
+      />
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/EnableEModeForm/EnableEModeForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/EnableEModeForm/EnableEModeForm.tsx
new file mode 100644
index 000000000..9e8c0e1bb
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/EnableEModeForm/EnableEModeForm.tsx
@@ -0,0 +1,108 @@
+import React, { FC, useCallback, useMemo, useState } from 'react';
+
+import { t } from 'i18next';
+
+import {
+  Button,
+  ErrorBadge,
+  ErrorLevel,
+  Paragraph,
+  Select,
+  SimpleTable,
+  SimpleTableRow,
+} from '@sovryn/ui';
+
+import { AmountRenderer } from '../../../../../../../../2_molecules/AmountRenderer/AmountRenderer';
+import { useAaveSetUserEMode } from '../../../../../../../../../hooks/aave/useAaveSetUserEMode';
+import { useAaveUserReservesData } from '../../../../../../../../../hooks/aave/useAaveUserReservesData';
+import { translations } from '../../../../../../../../../locales/i18n';
+import { EModeCategory } from '../../../../../../../../../types/aave';
+
+type EnableEModeFormProps = {
+  categories: EModeCategory[];
+};
+
+export const EnableEModeForm: FC<EnableEModeFormProps> = ({ categories }) => {
+  const [category, setCategory] = useState(String(categories[0]?.id));
+  const { summary } = useAaveUserReservesData();
+  const { handleSetUserEMode } = useAaveSetUserEMode();
+
+  const categoriesOptions = useMemo(() => {
+    return categories.map(category => ({
+      label: category.label,
+      value: String(category?.id),
+    }));
+  }, [categories]);
+
+  const selectedCategory = useMemo(() => {
+    return categories.find(c => c?.id === Number(category));
+  }, [category, categories]);
+
+  const positionsInOtherCategories = useMemo(() => {
+    return summary.reserves.some(
+      r => r.reserve.eModeCategoryId !== Number(category) && r.borrowed.gt(0),
+    );
+  }, [summary, category]);
+
+  const onConfirmClick = useCallback(() => {
+    if (!selectedCategory) return;
+    handleSetUserEMode(selectedCategory);
+  }, [handleSetUserEMode, selectedCategory]);
+
+  return (
+    <div className="space-y-6">
+      <ErrorBadge
+        level={ErrorLevel.Warning}
+        message={t(translations.aavePage.eMode.limitationsWarning)}
+        dataAttribute="limitations-warning"
+      />
+
+      <div>
+        <Paragraph className="mb-1 text-gray-30 font-medium text-xs">
+          {t(translations.aavePage.eMode.selectCategory)}
+        </Paragraph>
+
+        <Select
+          value={category}
+          onChange={setCategory}
+          options={categoriesOptions}
+          className="w-full"
+        />
+      </div>
+
+      <SimpleTable>
+        <SimpleTableRow
+          label={t(translations.aavePage.eMode.availableAssets)}
+          value={selectedCategory?.assets.join(', ')}
+        />
+        <SimpleTableRow
+          label={t(translations.aavePage.eMode.maxLoanToValue)}
+          value={
+            <AmountRenderer
+              value={selectedCategory ? selectedCategory.ltv.div(100) : 0}
+              suffix="%"
+              precision={2}
+            />
+          }
+        />
+      </SimpleTable>
+
+      {positionsInOtherCategories && (
+        <ErrorBadge
+          level={ErrorLevel.Critical}
+          message={t(translations.aavePage.eMode.positionsMustBeClosed, {
+            category: selectedCategory?.label,
+          })}
+          dataAttribute="positions-must-be-closed-error"
+        />
+      )}
+
+      <Button
+        className="w-full"
+        disabled={positionsInOtherCategories}
+        text={t(translations.common.buttons.confirm)}
+        onClick={onConfirmClick}
+      />
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx
new file mode 100644
index 000000000..16cac3a12
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx
@@ -0,0 +1,191 @@
+import { formatReserves, formatUserSummary } from '@aave/math-utils';
+
+import React, { FC, useCallback, useMemo, useState } from 'react';
+
+import { t } from 'i18next';
+
+import {
+  Button,
+  ErrorBadge,
+  ErrorLevel,
+  Icon,
+  IconNames,
+  Paragraph,
+  Select,
+  SimpleTable,
+  SimpleTableRow,
+} from '@sovryn/ui';
+import { Decimal } from '@sovryn/utils';
+
+import { AmountRenderer } from '../../../../../../../../2_molecules/AmountRenderer/AmountRenderer';
+import { config } from '../../../../../../../../../constants/aave';
+import { useAaveSetUserEMode } from '../../../../../../../../../hooks/aave/useAaveSetUserEMode';
+import { useAaveUserReservesData } from '../../../../../../../../../hooks/aave/useAaveUserReservesData';
+import { translations } from '../../../../../../../../../locales/i18n';
+import { EModeCategory } from '../../../../../../../../../types/aave';
+import { AaveCalculations } from '../../../../../../../../../utils/aave/AaveCalculations';
+import { CollateralRatioHealthBar } from '../../../../../CollateralRatioHealthBar/CollateralRatioHealthBar';
+
+type SwitchEModeFormProps = {
+  current: EModeCategory;
+  categories: EModeCategory[];
+};
+
+export const SwitchEModeForm: FC<SwitchEModeFormProps> = ({
+  current,
+  categories,
+}) => {
+  const { handleSetUserEMode } = useAaveSetUserEMode();
+  const [category, setCategory] = useState<string>('');
+  const { summary, userReservesData, reservesData, timestamp } =
+    useAaveUserReservesData();
+
+  const categoriesOptions = useMemo(() => {
+    return categories
+      .filter(c => c.id !== current.id)
+      .map(category => ({
+        label: category.label,
+        value: String(category.id),
+      }));
+  }, [categories, current?.id]);
+
+  const selectedCategory = useMemo(() => {
+    return categories.find(c => c.id === Number(category));
+  }, [category, categories]);
+
+  const newSummary = useMemo(() => {
+    if (!userReservesData || !reservesData) {
+      return;
+    }
+
+    const {
+      marketReferenceCurrencyDecimals,
+      marketReferenceCurrencyPriceInUsd: marketReferencePriceInUsd,
+    } = reservesData.baseCurrencyData;
+    return formatUserSummary({
+      userEmodeCategoryId: selectedCategory?.id ?? 0,
+      currentTimestamp: timestamp,
+      marketReferencePriceInUsd,
+      marketReferenceCurrencyDecimals,
+      userReserves: userReservesData.userReserves,
+      formattedReserves: formatReserves({
+        currentTimestamp: timestamp,
+        marketReferencePriceInUsd,
+        marketReferenceCurrencyDecimals,
+        reserves: reservesData.reservesData,
+      }),
+    });
+  }, [userReservesData, reservesData, timestamp, selectedCategory?.id]);
+
+  const newCollateralRatio = useMemo(() => {
+    if (!newSummary) {
+      return Decimal.from(0);
+    }
+    return AaveCalculations.computeCollateralRatio(
+      Decimal.from(newSummary.totalCollateralUSD),
+      Decimal.from(newSummary.totalBorrowsUSD),
+    );
+  }, [newSummary]);
+
+  const positionsInOtherCategories = useMemo(() => {
+    return summary.reserves.some(
+      r => r.reserve.eModeCategoryId !== Number(category) && r.borrowed.gt(0),
+    );
+  }, [summary, category]);
+
+  const confirmEnabled = useMemo(() => {
+    // cannot switch if undercollateralized or have positions in other categories
+    return (
+      Decimal.from(newSummary?.healthFactor ?? 0).lte(1) &&
+      !positionsInOtherCategories &&
+      selectedCategory
+    );
+  }, [newSummary, positionsInOtherCategories, selectedCategory]);
+
+  const onConfirm = useCallback(() => {
+    if (!selectedCategory) return;
+    handleSetUserEMode(selectedCategory);
+  }, [handleSetUserEMode, selectedCategory]);
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <Paragraph className="mb-1 text-gray-30 font-medium text-xs">
+          {t(translations.aavePage.eMode.selectCategory)}
+        </Paragraph>
+
+        <Select
+          value={category}
+          onChange={setCategory}
+          options={categoriesOptions}
+          className="w-full"
+        />
+      </div>
+
+      <CollateralRatioHealthBar
+        ratio={newCollateralRatio}
+        minimum={config.MinCollateralRatio}
+      />
+
+      <SimpleTable>
+        <SimpleTableRow
+          label={t(translations.aavePage.eMode.eModeCategory)}
+          value={
+            <div className={'flex items-center justify-end gap-1'}>
+              <span>{current?.label}</span>
+              <Icon
+                icon={IconNames.ARROW_RIGHT}
+                className="h-2 flex-shrink-0"
+              />
+              <span className="text-primary-10">
+                {selectedCategory?.label ?? '-'}
+              </span>
+            </div>
+          }
+        />
+        <SimpleTableRow
+          label={t(translations.aavePage.eMode.availableAssets)}
+          value={selectedCategory?.assets.join(', ')}
+        />
+        <SimpleTableRow
+          label={t(translations.aavePage.eMode.maxLoanToValue)}
+          value={
+            <div className={'flex items-center justify-end gap-1'}>
+              <AmountRenderer
+                value={current?.ltv.div(100)}
+                precision={2}
+                suffix="%"
+              />
+              <Icon
+                icon={IconNames.ARROW_RIGHT}
+                className="h-2 flex-shrink-0"
+              />
+              <AmountRenderer
+                value={Decimal.from(selectedCategory?.ltv ?? 0).div(100)}
+                precision={2}
+                suffix="%"
+              />
+            </div>
+          }
+        />
+      </SimpleTable>
+
+      {positionsInOtherCategories && (
+        <ErrorBadge
+          level={ErrorLevel.Critical}
+          message={t(translations.aavePage.eMode.positionsMustBeClosed, {
+            category,
+          })}
+          dataAttribute="positions-must-be-closed-error"
+        />
+      )}
+
+      <Button
+        className="w-full"
+        disabled={!confirmEnabled}
+        text={t(translations.aavePage.eMode.switchCategory)}
+        onClick={onConfirm}
+      />
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx
index 676e00f84..e22a9c9c1 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx
@@ -39,7 +39,7 @@ export const RepayWithWalletBalanceForm: FC<
 > = ({ asset, onSuccess }) => {
   const { account } = useAccount();
   const { handleRepay } = useAaveRepay();
-  const userReservesSummary = useAaveUserReservesData();
+  const { summary } = useAaveUserReservesData();
   const [repayAsset, setRepayAsset] = useState<string>(asset);
   const [repayAmount, setRepayAmount, repaySize] = useDecimalAmountInput('');
   const { balance: repayAssetBalance } = useAssetBalance(
@@ -50,7 +50,7 @@ export const RepayWithWalletBalanceForm: FC<
 
   const repayAssetsOptions = useMemo(
     () =>
-      userReservesSummary.reserves
+      summary.reserves
         .filter(r => r.borrowed.gt(0))
         .map(ba => ({
           value: ba.asset,
@@ -63,14 +63,12 @@ export const RepayWithWalletBalanceForm: FC<
             />
           ),
         })),
-    [userReservesSummary],
+    [summary],
   );
 
   const repayReserve = useMemo(() => {
-    return userReservesSummary.reserves.find(
-      r => r.reserve.symbol === repayAsset,
-    );
-  }, [userReservesSummary.reserves, repayAsset]);
+    return summary.reserves.find(r => r.reserve.symbol === repayAsset);
+  }, [summary.reserves, repayAsset]);
 
   const maximumRepayAmount = useMemo(() => {
     return repayReserve
@@ -99,10 +97,10 @@ export const RepayWithWalletBalanceForm: FC<
 
   const newCollateralRatio = useMemo(() => {
     return AaveCalculations.computeCollateralRatio(
-      userReservesSummary.collateralBalance,
-      userReservesSummary.borrowBalance.add(newDebtAmountUSD),
+      summary.collateralBalance,
+      summary.borrowBalance.add(newDebtAmountUSD),
     );
-  }, [userReservesSummary, newDebtAmountUSD]);
+  }, [summary, newDebtAmountUSD]);
 
   const isValidRepayAmount = useMemo(
     () => (repaySize.gt(0) ? repaySize.lte(maximumRepayAmount) : true),
@@ -174,7 +172,7 @@ export const RepayWithWalletBalanceForm: FC<
             <AmountTransition
               className="justify-end"
               from={{
-                value: userReservesSummary.collateralRatio.mul(100),
+                value: summary.collateralRatio.mul(100),
                 suffix: '%',
                 precision: 2,
               }}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx
index 144c23628..10dfc9808 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx
@@ -33,14 +33,14 @@ type WithdrawFormProps = {
 
 export const WithdrawForm: FC<WithdrawFormProps> = ({ asset }) => {
   const { handleWithdraw } = useAaveWithdraw();
-  const userReservesSummary = useAaveUserReservesData();
+  const { summary } = useAaveUserReservesData();
   const [withdrawAsset, setWithdrawAsset] = useState<string>(asset);
   const [withdrawAmount, setWithdrawAmount, withdrawSize] =
     useDecimalAmountInput('');
 
   const withdrawableAssetsOptions = useMemo(
     () =>
-      userReservesSummary.reserves
+      summary.reserves
         .filter(r => r.supplied.gt(0))
         .map(sa => ({
           value: sa.asset,
@@ -53,14 +53,12 @@ export const WithdrawForm: FC<WithdrawFormProps> = ({ asset }) => {
             />
           ),
         })),
-    [userReservesSummary],
+    [summary],
   );
 
   const withdrawReserve = useMemo(() => {
-    return userReservesSummary.reserves.find(
-      r => r.reserve.symbol === withdrawAsset,
-    );
-  }, [withdrawAsset, userReservesSummary]);
+    return summary.reserves.find(r => r.reserve.symbol === withdrawAsset);
+  }, [withdrawAsset, summary]);
 
   const maximumWithdrawAmount: Decimal = useMemo(() => {
     return withdrawReserve ? withdrawReserve.supplied : Decimal.from(0);
diff --git a/apps/frontend/src/constants/aave.ts b/apps/frontend/src/constants/aave.ts
index c1cb215bd..4e0027dcf 100644
--- a/apps/frontend/src/constants/aave.ts
+++ b/apps/frontend/src/constants/aave.ts
@@ -5,12 +5,11 @@ import { decimalic } from '../utils/math';
 export const config = {
   chainId: 111,
   MinCollateralRatio: decimalic(1.5),
-  PoolAddress: '0xD0Fb3Eb747A368f01d1598faF1F1C55a33416429',
-  WETHGatewayAddress: '0x5723D6ABA3e46375C343A82fEC9e05a465dE387B',
-  VariableDebtWETHAddress: '0x1F016249e1bCa541f4BFb1268aF3f4f293eAf082',
-  UiPoolDataProviderV3Address: '0xf185Ee9FE1DA4F36b9a53194c83E657fEC8D0FA9',
-  PoolAddressesProviderAddress: '0xAE73edfC71af8f5fb7d8840887E8EE4317989456',
-  assetsWhitelist: ['DAI', 'USDC', 'USDT', 'BTC', 'WETH', 'EURS'],
+  VariableDebtWETHAddress: '0x5d390c39c8bc4B116a87991fd369244dD7B0C6D8',
+  PoolAddress: '0xc62b1eDC4fF950aD32D6846e69B68cCadBC568Af',
+  WETHGatewayAddress: '0x9F9Dc8dc9308C32Cf652b32dD1b5d2DA106f1dA0',
+  UiPoolDataProviderV3Address: '0x0954E027fb7d59271CF253831c5Cc78be5c75840',
+  PoolAddressesProviderAddress: '0x01757F5712695f8f93AD63ED3Bdf66575522188a',
 
   provider: new ethers.providers.JsonRpcProvider(
     'https://testnet.rpc.gobob.xyz',
diff --git a/apps/frontend/src/hooks/aave/useAaveEModeCategories.tsx b/apps/frontend/src/hooks/aave/useAaveEModeCategories.tsx
new file mode 100644
index 000000000..c17db936e
--- /dev/null
+++ b/apps/frontend/src/hooks/aave/useAaveEModeCategories.tsx
@@ -0,0 +1,29 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { config } from '../../constants/aave';
+import { EModeCategory } from '../../types/aave';
+import { AaveEModeCategories } from '../../utils/aave/AaveEModeCategories';
+import { useAccount } from '../useAccount';
+import { useAaveReservesData } from './useAaveReservesData';
+
+export const useAaveEModeCategories = (): EModeCategory[] => {
+  const reserves = useAaveReservesData();
+  const { provider } = useAccount();
+  const [categories, setCategories] = useState<EModeCategory[]>([]);
+
+  const eModeCategoriesFetcher = useMemo(
+    () =>
+      provider ? new AaveEModeCategories(config.PoolAddress, provider) : null,
+    [provider],
+  );
+
+  useEffect(() => {
+    if (!eModeCategoriesFetcher) {
+      return;
+    }
+
+    eModeCategoriesFetcher.getAllEModeCategories(reserves).then(setCategories);
+  }, [eModeCategoriesFetcher, reserves]);
+
+  return categories;
+};
diff --git a/apps/frontend/src/hooks/aave/useAaveReservesData.tsx b/apps/frontend/src/hooks/aave/useAaveReservesData.tsx
index 768f30efd..58f9fea4e 100644
--- a/apps/frontend/src/hooks/aave/useAaveReservesData.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveReservesData.tsx
@@ -44,11 +44,8 @@ export const useAaveReservesData = (): ReserveData => {
       const reservesData = await uiPoolDataProvider.getReservesHumanized({
         lendingPoolAddressProvider: config.PoolAddressesProviderAddress,
       });
-      const reserves = reservesData.reservesData.filter(r =>
-        config.assetsWhitelist.includes(r.symbol),
-      );
       const formattedReserves = formatReserves({
-        reserves,
+        reserves: reservesData.reservesData,
         currentTimestamp,
         marketReferenceCurrencyDecimals:
           reservesData.baseCurrencyData.marketReferenceCurrencyDecimals,
diff --git a/apps/frontend/src/hooks/aave/useAaveSetUserEMode.tsx b/apps/frontend/src/hooks/aave/useAaveSetUserEMode.tsx
new file mode 100644
index 000000000..d64ecb407
--- /dev/null
+++ b/apps/frontend/src/hooks/aave/useAaveSetUserEMode.tsx
@@ -0,0 +1,54 @@
+import { useCallback, useMemo } from 'react';
+
+import { t } from 'i18next';
+
+import { config } from '../../constants/aave';
+import { useTransactionContext } from '../../contexts/TransactionContext';
+import { translations } from '../../locales/i18n';
+import { EModeCategory, TransactionFactoryOptions } from '../../types/aave';
+import { AaveEModeTransactionsFactory } from '../../utils/aave/AaveEModeTransactionsFactory';
+import { useAccount } from '../useAccount';
+
+export const useAaveSetUserEMode = () => {
+  const { signer } = useAccount();
+  const { setTransactions, setIsOpen, setTitle } = useTransactionContext();
+
+  const aaveEModeTransactionsFactory = useMemo(() => {
+    if (!signer) return null;
+    return new AaveEModeTransactionsFactory(config.PoolAddress, signer);
+  }, [signer]);
+
+  const handleSetUserEMode = useCallback(
+    async (category: EModeCategory, opts?: TransactionFactoryOptions) => {
+      if (!aaveEModeTransactionsFactory) {
+        return;
+      }
+
+      setTransactions(
+        await aaveEModeTransactionsFactory.setUserEMode(category, opts),
+      );
+      setTitle(
+        t(translations.aavePage.tx.setUserEModeTitle, {
+          category: category.label,
+        }),
+      );
+      setIsOpen(true);
+    },
+    [setIsOpen, setTitle, setTransactions, aaveEModeTransactionsFactory],
+  );
+
+  const handleDisableUserEMode = useCallback(
+    async (opts?: TransactionFactoryOptions) => {
+      if (!aaveEModeTransactionsFactory) {
+        return;
+      }
+
+      setTransactions(await aaveEModeTransactionsFactory.disableEMode(opts));
+      setTitle(t(translations.aavePage.tx.disableEModeTitle));
+      setIsOpen(true);
+    },
+    [aaveEModeTransactionsFactory, setIsOpen, setTitle, setTransactions],
+  );
+
+  return { handleSetUserEMode, handleDisableUserEMode };
+};
diff --git a/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx b/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx
index fb1133932..8ab64e3c1 100644
--- a/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx
@@ -1,11 +1,14 @@
-import { UiPoolDataProvider } from '@aave/contract-helpers';
-import { formatReserves, formatUserSummary } from '@aave/math-utils';
+import {
+  ReservesDataHumanized,
+  UiPoolDataProvider,
+} from '@aave/contract-helpers';
 
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import dayjs from 'dayjs';
 
 import { config } from '../../constants/aave';
+import { UserReservesData } from '../../types/aave';
 import {
   AaveUserReservesSummary,
   AaveUserReservesSummaryFactory,
@@ -13,13 +16,21 @@ import {
 import { useAccount } from '../useAccount';
 import { useBlockNumber } from '../useBlockNumber';
 
-export const useAaveUserReservesData = (): AaveUserReservesSummary => {
+export const useAaveUserReservesData = (): {
+  summary: AaveUserReservesSummary;
+  reservesData: ReservesDataHumanized | undefined;
+  userReservesData: UserReservesData | undefined;
+  timestamp: number;
+} => {
   const { account, provider } = useAccount();
-  const [value, setValue] = useState<AaveUserReservesSummary>(
-    AaveUserReservesSummaryFactory.buildZeroSummary([]),
-  );
   const { value: blockNumber } = useBlockNumber();
   const [processedBlock, setProcessedBlock] = useState<number | undefined>();
+  const [timestamp, setTimeStamp] = useState<number>(0);
+  const [reservesData, setReservesData] = useState<ReservesDataHumanized>();
+  const [userReservesData, setUserReservesData] = useState<UserReservesData>();
+  const [summary, setSummary] = useState<AaveUserReservesSummary>(
+    AaveUserReservesSummaryFactory.buildZeroSummary([]),
+  );
 
   const uiPoolDataProvider = useMemo(
     () =>
@@ -47,31 +58,20 @@ export const useAaveUserReservesData = (): AaveUserReservesSummary => {
         user: account,
       }),
     ]);
-    const {
-      marketReferenceCurrencyDecimals,
-      marketReferenceCurrencyPriceInUsd: marketReferencePriceInUsd,
-    } = reservesData.baseCurrencyData;
     const currentTimestamp = dayjs().unix();
-    const userSummary = formatUserSummary({
-      currentTimestamp,
-      marketReferencePriceInUsd,
-      marketReferenceCurrencyDecimals,
-      userReserves: userReservesData.userReserves,
-      userEmodeCategoryId: userReservesData.userEmodeCategoryId,
-      formattedReserves: formatReserves({
-        currentTimestamp,
-        marketReferencePriceInUsd,
-        marketReferenceCurrencyDecimals,
-        reserves: reservesData.reservesData,
-      }),
-    });
 
-    setValue(
-      await AaveUserReservesSummaryFactory.buildSummary(
+    setReservesData(reservesData);
+    setUserReservesData(userReservesData);
+    setTimeStamp(currentTimestamp);
+
+    setSummary(
+      await AaveUserReservesSummaryFactory.buildSummary({
         provider,
         account,
-        userSummary,
-      ),
+        reservesData,
+        userReservesData,
+        currentTimestamp,
+      }),
     );
     setProcessedBlock(blockNumber);
   }, [account, uiPoolDataProvider, blockNumber, provider]);
@@ -82,5 +82,5 @@ export const useAaveUserReservesData = (): AaveUserReservesSummary => {
     }
   }, [loadUserReservesData, processedBlock, blockNumber]);
 
-  return value;
+  return { summary, reservesData, userReservesData, timestamp };
 };
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index 2bee35fc2..3decacfc7 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -826,7 +826,27 @@
             "enableAssetAsCollateral": "Enable {{symbol}} as collateral",
             "enableAssetAsCollateralSubtitle": "Enabling {{symbol}} as collateral will increase your borrowing power",
             "disableAssetAsCollateral": "Disable {{symbol}} as collateral",
-            "disableAssetAsCollateralSubtitle": "Disabling {{symbol}} as collateral will decrease your borrowing power and potentially risk you to liquidation"
+            "disableAssetAsCollateralSubtitle": "Disabling {{symbol}} as collateral will decrease your borrowing power and potentially risk you to liquidation",
+            "setUserEModeTitle": "Set E-Mode to {{category}}",
+            "setUserEModeSubtitle": "Set E-Mode to {{category}} category",
+            "disableEModeTitle": "Disable E-Mode",
+            "disableEModeSubtitle": "Disable E-Mode"
+        },
+        "eMode": {
+            "availableAssets": "Available assets",
+            "selectCategory": "Select category",
+            "maxLoanToValue": "Max loan to value",
+            "positionsMustBeClosed": "To enable E-mode for the {{category}} category, all borrow positions outside of this category must be closed.",
+            "limitationsWarning": "Enabling E-Mode only allows you to borrow assets belonging to the selected category.",
+            "enableEMode": "Enable E-mode",
+            "disableEMode": "Disable E-mode",
+            "liquidationRiskWarning": "Liquidation risk. This action will reduce your health factor. Please be mindful of the increased risk of collateral liquidation.",
+            "eModeCategory": "E-mode category",
+            "switchCategory": "Switch E-mode",
+            "assetCategory": "Asset category",
+            "eModeActivatedWarning": "In E-Mode some assets are not borrowable. Exit E-Mode to get access to all assets.",
+            "allAssets": "All assets",
+            "none": "None"
         },
         "topPanel": {
             "title": "Lend and borrow",
diff --git a/apps/frontend/src/types/aave.ts b/apps/frontend/src/types/aave.ts
index 3f43e626d..ff74483b5 100644
--- a/apps/frontend/src/types/aave.ts
+++ b/apps/frontend/src/types/aave.ts
@@ -1,6 +1,24 @@
+import { UserReserveDataHumanized } from '@aave/contract-helpers';
+
+import { Decimal } from '@sovryn/utils';
+
 export type TransactionFactoryOptions = { onComplete?: () => void };
 
+export type EModeCategory = {
+  id: number;
+  label: string;
+  ltv: Decimal;
+  liquidationThreshold: Decimal;
+  liquidationBonus: Decimal;
+  assets: string[];
+};
+
 export enum BorrowRateMode {
   STABLE = 1,
   VARIABLE = 2,
 }
+
+export type UserReservesData = {
+  userReserves: UserReserveDataHumanized[];
+  userEmodeCategoryId: number;
+};
diff --git a/apps/frontend/src/utils/aave/AaveEModeCategories.ts b/apps/frontend/src/utils/aave/AaveEModeCategories.ts
new file mode 100644
index 000000000..919d94801
--- /dev/null
+++ b/apps/frontend/src/utils/aave/AaveEModeCategories.ts
@@ -0,0 +1,105 @@
+import { ethers } from 'ethers';
+
+import { Decimal } from '@sovryn/utils';
+
+import { Reserve } from '../../hooks/aave/useAaveReservesData';
+import { EModeCategory } from '../../types/aave';
+
+export class AaveEModeCategories {
+  private readonly Pool: ethers.Contract;
+
+  constructor(
+    private readonly PoolAddress: string,
+    private readonly provider: ethers.providers.Provider,
+  ) {
+    this.Pool = new ethers.Contract(
+      this.PoolAddress,
+      [
+        {
+          inputs: [
+            {
+              internalType: 'uint8',
+              name: 'id',
+              type: 'uint8',
+            },
+          ],
+          name: 'getEModeCategoryData',
+          outputs: [
+            {
+              components: [
+                {
+                  internalType: 'uint16',
+                  name: 'ltv',
+                  type: 'uint16',
+                },
+                {
+                  internalType: 'uint16',
+                  name: 'liquidationThreshold',
+                  type: 'uint16',
+                },
+                {
+                  internalType: 'uint16',
+                  name: 'liquidationBonus',
+                  type: 'uint16',
+                },
+                {
+                  internalType: 'address',
+                  name: 'priceSource',
+                  type: 'address',
+                },
+                {
+                  internalType: 'string',
+                  name: 'label',
+                  type: 'string',
+                },
+              ],
+              internalType: 'struct DataTypes.EModeCategory',
+              name: '',
+              type: 'tuple',
+            },
+          ],
+          stateMutability: 'view',
+          type: 'function',
+        },
+      ],
+      this.provider,
+    );
+  }
+
+  getAllEModeCategories(reserves: Reserve[]): Promise<EModeCategory[]> {
+    const categoriesIds = Array.from(
+      new Set(reserves.map(r => r.eModeCategoryId)),
+    ).filter(c => c !== 0);
+
+    return Promise.allSettled(
+      categoriesIds.map(categoryId =>
+        this.getEModeCategory(categoryId, reserves),
+      ),
+    ).then(res =>
+      res
+        .filter(r => r.status === 'fulfilled')
+        .map(r => (r as PromiseFulfilledResult<EModeCategory>).value),
+    );
+  }
+
+  async getEModeCategory(
+    categoryId: number,
+    reserves: Reserve[],
+  ): Promise<EModeCategory> {
+    const [ltv, liquidationThreshold, liquidationBonus, , label] =
+      await this.Pool.getEModeCategoryData(categoryId);
+
+    const assets = reserves
+      .filter(r => r.eModeCategoryId === categoryId)
+      .map(r => r.symbol);
+
+    return {
+      id: categoryId,
+      ltv: Decimal.from(ltv),
+      liquidationThreshold: Decimal.from(liquidationThreshold),
+      liquidationBonus: Decimal.from(liquidationBonus),
+      label,
+      assets,
+    };
+  }
+}
diff --git a/apps/frontend/src/utils/aave/AaveEModeTransactionsFactory.ts b/apps/frontend/src/utils/aave/AaveEModeTransactionsFactory.ts
new file mode 100644
index 000000000..0b0e78446
--- /dev/null
+++ b/apps/frontend/src/utils/aave/AaveEModeTransactionsFactory.ts
@@ -0,0 +1,63 @@
+import { ethers } from 'ethers';
+import { t } from 'i18next';
+
+import {
+  Transaction,
+  TransactionType,
+} from '../../app/3_organisms/TransactionStepDialog/TransactionStepDialog.types';
+import { translations } from '../../locales/i18n';
+import { EModeCategory, TransactionFactoryOptions } from '../../types/aave';
+
+export class AaveEModeTransactionsFactory {
+  private readonly Pool: ethers.Contract;
+
+  constructor(
+    private readonly PoolAddress: string,
+    private readonly signer: ethers.Signer,
+  ) {
+    this.Pool = new ethers.Contract(
+      this.PoolAddress,
+      ['function setUserEMode(uint8 categoryId)'],
+      this.signer,
+    );
+  }
+
+  async setUserEMode(
+    category: EModeCategory,
+    opts?: TransactionFactoryOptions,
+  ): Promise<Transaction[]> {
+    return [
+      {
+        title: t(translations.aavePage.tx.setUserEModeTitle, {
+          category: category.label,
+        }),
+        subtitle: t(translations.aavePage.tx.setUserEModeSubtitle, {
+          category: category.label,
+        }),
+        request: {
+          type: TransactionType.signTransaction,
+          args: [category.id],
+          contract: this.Pool,
+          fnName: 'setUserEMode',
+        },
+        onComplete: opts?.onComplete,
+      },
+    ];
+  }
+
+  async disableEMode(opts?: TransactionFactoryOptions): Promise<Transaction[]> {
+    return [
+      {
+        title: t(translations.aavePage.tx.disableEModeTitle),
+        subtitle: t(translations.aavePage.tx.disableEModeSubtitle),
+        request: {
+          type: TransactionType.signTransaction,
+          args: [0],
+          contract: this.Pool,
+          fnName: 'setUserEMode',
+        },
+        onComplete: opts?.onComplete,
+      },
+    ];
+  }
+}
diff --git a/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts b/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
index 158d3525b..b8b5a7c69 100644
--- a/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
+++ b/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
@@ -1,6 +1,11 @@
-import { ReserveDataHumanized } from '@aave/contract-helpers';
 import {
+  ReserveDataHumanized,
+  ReservesDataHumanized,
+} from '@aave/contract-helpers';
+import {
+  formatReserves,
   FormatReserveUSDResponse,
+  formatUserSummary,
   FormatUserSummaryResponse,
 } from '@aave/math-utils';
 
@@ -12,7 +17,7 @@ import { Decimal } from '@sovryn/utils';
 import { BOB_CHAIN_ID } from '../../config/chains';
 
 import { Reserve } from '../../hooks/aave/useAaveReservesData';
-import { BorrowRateMode } from '../../types/aave';
+import { BorrowRateMode, UserReservesData } from '../../types/aave';
 import { decimalic, fromWei } from '../math';
 import { AaveCalculations } from './AaveCalculations';
 
@@ -45,6 +50,7 @@ export type AaveUserReservesSummary = {
   supplyWeightedApy: Decimal;
   collateralBalance: Decimal;
   currentLiquidationThreshold: Decimal;
+  currentLoanToValue: Decimal;
 
   borrowBalance: Decimal;
   borrowWeightedApy: Decimal;
@@ -68,6 +74,7 @@ export class AaveUserReservesSummaryFactory {
       supplyWeightedApy: Decimal.ZERO,
       collateralBalance: Decimal.ZERO,
       currentLiquidationThreshold: Decimal.ZERO,
+      currentLoanToValue: Decimal.ZERO,
 
       borrowBalance: Decimal.ZERO,
       borrowWeightedApy: Decimal.ZERO,
@@ -94,11 +101,37 @@ export class AaveUserReservesSummaryFactory {
     };
   }
 
-  static async buildSummary(
-    provider: ethers.providers.Provider,
-    account: string,
-    userSummary: UserSummary,
-  ): Promise<AaveUserReservesSummary> {
+  static async buildSummary({
+    provider,
+    account,
+    reservesData,
+    userReservesData,
+    currentTimestamp,
+  }: {
+    provider: ethers.providers.Provider;
+    account: string;
+    reservesData: ReservesDataHumanized;
+    userReservesData: UserReservesData;
+    currentTimestamp: number;
+  }): Promise<AaveUserReservesSummary> {
+    const {
+      marketReferenceCurrencyDecimals,
+      marketReferenceCurrencyPriceInUsd: marketReferencePriceInUsd,
+    } = reservesData.baseCurrencyData;
+    const userSummary = formatUserSummary({
+      currentTimestamp,
+      marketReferencePriceInUsd,
+      marketReferenceCurrencyDecimals,
+      userReserves: userReservesData.userReserves,
+      userEmodeCategoryId: userReservesData.userEmodeCategoryId,
+      formattedReserves: formatReserves({
+        currentTimestamp,
+        marketReferencePriceInUsd,
+        marketReferenceCurrencyDecimals,
+        reserves: reservesData.reservesData,
+      }),
+    });
+
     const netWorth = Decimal.from(userSummary.netWorthUSD);
     const borrowBalance = Decimal.from(userSummary.totalBorrowsUSD);
     const supplyBalance = AaveCalculations.computeSuppliedBalance(
@@ -153,6 +186,7 @@ export class AaveUserReservesSummaryFactory {
       supplyWeightedApy,
       collateralBalance,
       currentLiquidationThreshold,
+      currentLoanToValue: Decimal.from(userSummary.currentLoanToValue),
 
       borrowBalance,
       borrowWeightedApy,

From b57d00206b03e914ee04c39c428793eccb452bdc Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Tue, 3 Sep 2024 17:51:49 +0300
Subject: [PATCH 073/116] Toggle lend mode

* cleanup

* fixes

* fixes. Connect provider. Fix repay adding proper allowance. Fix switch collateral token.address instead of token

* refetch user data based on blocknumber

* fix modal closing on lending positions change plus style adjustments

* fix withdraw modals

* modal fixes

* fix calculation
add balances and filter zero balances

* use memo items

* fix dependencies

* data normalizers

* Apply suggestions from code review

Co-authored-by: Juan <juandahl@users.noreply.github.com>

* Update apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx

Co-authored-by: Juan <juandahl@users.noreply.github.com>

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

Co-authored-by: Juan <juandahl@users.noreply.github.com>

* wip refactor done. Missing hooks merge

* implementations and cleanup

* cleanup

* cleanup

* math safety

* more math safety

* cleanup

* clenaup

* emode mocks

* enable emode working

* emode working

* fixes and cleanup

* remove whitelist

* SAF 52 - Toggle lend mode (#31)

* toggle lend mode working

* fixes and cleanup

* add collateral check

* fix collateral

* fixes

---------

Co-authored-by: Juan <juandahl@users.noreply.github.com>
---
 .../app/5_pages/AavePage/AavePage.utils.tsx   | 103 ++++++++++--------
 .../components/BorrowModal/BorrowForm.tsx     |  29 ++---
 .../BorrowPositionsList.constants.tsx         |  12 +-
 .../BorrowPositionsList.types.tsx             |   6 +-
 .../BorrowPositionDetails.tsx                 |   9 +-
 .../BorrowRateModeSelect.tsx                  |  65 +++++++++++
 .../frontend/src/hooks/aave/useAaveBorrow.tsx |  25 ++++-
 .../frontend/src/locales/en/translations.json |   9 +-
 .../aave/AaveBorrowTransactionsFactory.ts     |  31 +++++-
 9 files changed, 212 insertions(+), 77 deletions(-)
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowRateModeSelect/BorrowRateModeSelect.tsx

diff --git a/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx b/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
index 8d6899a99..2ef05300f 100644
--- a/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
@@ -3,73 +3,90 @@ import { Decimal } from '@sovryn/utils';
 import { ReserveData } from '../../../hooks/aave/useAaveReservesData';
 import { BorrowRateMode } from '../../../types/aave';
 import { AaveUserReservesSummary } from '../../../utils/aave/AaveUserReservesSummary';
+import { BorrowPoolDetails } from './components/BorrowAssetsList/BorrowAssetsList.types';
 import { BorrowPosition } from './components/BorrowPositionsList/BorrowPositionsList.types';
+import { LendPoolDetails } from './components/LendAssetsList/LendAssetsList.types';
 import { LendPosition } from './components/LendPositionsList/LendPositionsList.types';
 
 export function normalizeLendPositions(
   userReservesSummary: AaveUserReservesSummary,
 ): LendPosition[] {
-  return userReservesSummary.reserves
-    .filter(r => r.supplied.gt(0))
-    .map(s => ({
-      asset: s.reserve.symbol,
-      apy: Decimal.from(s.reserve.variableBorrowAPY),
-      supplied: s.supplied,
-      suppliedUSD: s.suppliedUSD,
-      collateral: s.collateral,
-    }));
+  return userReservesSummary.reserves.reduce((acc, r) => {
+    if (r.supplied.gt(0)) {
+      acc.push({
+        asset: r.reserve.symbol,
+        apy: Decimal.from(r.reserve.variableBorrowAPY),
+        supplied: r.supplied,
+        suppliedUSD: r.suppliedUSD,
+        collateral: r.collateral,
+      });
+    }
+    return acc;
+  }, [] as LendPosition[]);
 }
 
 export function normalizeBorrowPositions(
   userReservesSummary: AaveUserReservesSummary,
 ): BorrowPosition[] {
-  return userReservesSummary.reserves
-    .filter(r => r.borrowed.gt(0))
-    .map(r => ({
-      asset: r.reserve.symbol,
-      apy: Decimal.from(
-        r.borrowRateMode === BorrowRateMode.STABLE
-          ? Decimal.from(r.reserve.stableBorrowAPY).mul(100)
-          : Decimal.from(r.reserve.variableBorrowAPY).mul(100),
-      ),
-      borrowed: r.borrowed,
-      borrowedUSD: r.borrowedUSD,
-      type: r.borrowRateMode,
-    }));
+  return userReservesSummary.reserves.reduce((acc, r) => {
+    if (r.borrowed.gt(0)) {
+      acc.push({
+        asset: r.reserve.symbol,
+        apy: Decimal.from(
+          r.borrowRateMode === BorrowRateMode.STABLE
+            ? Decimal.from(r.reserve.stableBorrowAPY).mul(100)
+            : Decimal.from(r.reserve.variableBorrowAPY).mul(100),
+        ),
+        borrowRateMode: r.borrowRateMode,
+        stableApy: Decimal.from(r.reserve.stableBorrowAPY).mul(100),
+        variableApy: Decimal.from(r.reserve.variableBorrowAPY).mul(100),
+        stableBorrowEnabled: r.reserve.stableBorrowRateEnabled,
+        borrowed: r.borrowed,
+        borrowedUSD: r.borrowedUSD,
+        isCollateral: r.collateral,
+      });
+    }
+    return acc;
+  }, [] as BorrowPosition[]);
 }
 
 export function normalizeBorrowPoolDetails(
   reserves: ReserveData,
   userReservesSummary: AaveUserReservesSummary,
-) {
+): BorrowPoolDetails[] {
   if (userReservesSummary.reserves.length === 0) {
-    return reserves
-      .filter(r => r.borrowingEnabled)
-      .map(r => ({
-        asset: r.symbol,
-        apy: Decimal.from(r.variableBorrowAPY).mul(100),
-      }));
+    return reserves.reduce((acc, r) => {
+      if (r.borrowingEnabled) {
+        acc.push({
+          asset: r.symbol,
+          apy: Decimal.from(r.variableBorrowAPY).mul(100),
+        });
+      }
+      return acc;
+    }, [] as BorrowPoolDetails[]);
   } else {
-    return reserves
-      .filter(r => r.borrowingEnabled)
-      .filter(
-        r =>
-          userReservesSummary.eModeCategoryId === r.eModeCategoryId ||
-          userReservesSummary.eModeCategoryId === 0,
-      )
-      .map(r => ({
-        asset: r.symbol,
-        apy: Decimal.from(r.variableBorrowAPY).mul(100),
-        available: userReservesSummary.borrowPower.div(r.priceInUSD),
-        availableUSD: userReservesSummary.borrowPower,
-      }));
+    return reserves.reduce((acc, r) => {
+      if (
+        r.borrowingEnabled &&
+        (userReservesSummary.eModeCategoryId === r.eModeCategoryId ||
+          userReservesSummary.eModeCategoryId === 0)
+      ) {
+        acc.push({
+          asset: r.symbol,
+          apy: Decimal.from(r.variableBorrowAPY).mul(100),
+          available: userReservesSummary.borrowPower.div(r.priceInUSD),
+          availableUSD: userReservesSummary.borrowPower,
+        });
+      }
+      return acc;
+    }, [] as BorrowPoolDetails[]);
   }
 }
 
 export function normalizeLendPoolDetails(
   reserves: ReserveData,
   userReservesSummary: AaveUserReservesSummary,
-) {
+): LendPoolDetails[] {
   if (userReservesSummary.reserves.length === 0) {
     return reserves.map(r => ({
       asset: r.symbol,
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
index 56bc1c77a..f48d44cfe 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
@@ -44,19 +44,22 @@ export const BorrowForm: FC<BorrowFormProps> = ({ asset, onSuccess }) => {
 
   const borrowableAssetsOptions = useMemo(
     () =>
-      summary.reserves
-        .filter(r => r.reserve.borrowingEnabled)
-        .map(r => ({
-          value: r.reserve.symbol,
-          label: (
-            <AssetRenderer
-              showAssetLogo
-              asset={r.reserve.symbol}
-              chainId={BOB_CHAIN_ID}
-              assetClassName="font-medium"
-            />
-          ),
-        })),
+      summary.reserves.reduce((acc, r) => {
+        if (r.reserve.borrowingEnabled) {
+          acc.push({
+            value: r.reserve.symbol,
+            label: (
+              <AssetRenderer
+                showAssetLogo
+                asset={r.reserve.symbol}
+                chainId={BOB_CHAIN_ID}
+                assetClassName="font-medium"
+              />
+            ),
+          });
+        }
+        return acc;
+      }, [] as { value: string; label: JSX.Element }[]),
     [summary.reserves],
   );
 
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
index 2a56f3d48..8e5209c7a 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
@@ -9,9 +9,9 @@ import { BOB_CHAIN_ID } from '../../../../../config/chains';
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
 import { translations } from '../../../../../locales/i18n';
-import { BorrowRateMode } from '../../../../../types/aave';
 import { BorrowPosition } from './BorrowPositionsList.types';
 import { BorrowPositionAction } from './components/BorrowPositionAction/BorrowPositionAction';
+import { BorrowRateModeSelect } from './components/BorrowRateModeSelect/BorrowRateModeSelect';
 
 const pageTranslations = translations.aavePage;
 
@@ -75,13 +75,9 @@ export const COLUMNS_CONFIG = (onRepayClick: (asset: string) => unknown) => [
       </span>
     ),
     cellRenderer: (position: BorrowPosition) => (
-      <span>
-        {t(
-          pageTranslations.common[
-            position.type === BorrowRateMode.STABLE ? 'stable' : 'variable'
-          ],
-        )}
-      </span>
+      <div className="flex items-center justify-center">
+        <BorrowRateModeSelect position={position} />
+      </div>
     ),
   },
   {
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.types.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.types.tsx
index 4b632e359..5bd3dbd53 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.types.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.types.tsx
@@ -7,5 +7,9 @@ export type BorrowPosition = {
   borrowed: Decimal;
   borrowedUSD: Decimal;
   apy: Decimal;
-  type: BorrowRateMode;
+  variableApy: Decimal;
+  stableApy: Decimal;
+  stableBorrowEnabled: boolean;
+  borrowRateMode: BorrowRateMode;
+  isCollateral: boolean;
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
index f4dd3d725..b6865e22f 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
@@ -7,9 +7,9 @@ import { HelperButton, SimpleTableRow } from '@sovryn/ui';
 import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { AssetAmountPriceRenderer } from '../../../../../../2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer';
 import { translations } from '../../../../../../../locales/i18n';
-import { BorrowRateMode } from '../../../../../../../types/aave';
 import { BorrowPosition } from '../../BorrowPositionsList.types';
 import { BorrowPositionAction } from '../BorrowPositionAction/BorrowPositionAction';
+import { BorrowRateModeSelect } from '../BorrowRateModeSelect/BorrowRateModeSelect';
 
 type BorrowPositionDetailsProps = {
   position: BorrowPosition;
@@ -48,11 +48,8 @@ export const BorrowPositionDetails: FC<BorrowPositionDetailsProps> = ({
       {/* Apy type */}
       <SimpleTableRow
         label={t(translations.aavePage.common.apyType)}
-        value={t(
-          translations.aavePage.common[
-            position.type === BorrowRateMode.STABLE ? 'stable' : 'variable'
-          ],
-        )}
+        valueClassName="flex justify-end"
+        value={<BorrowRateModeSelect position={position} />}
       />
     </div>
 
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowRateModeSelect/BorrowRateModeSelect.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowRateModeSelect/BorrowRateModeSelect.tsx
new file mode 100644
index 000000000..aa08eb1ff
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowRateModeSelect/BorrowRateModeSelect.tsx
@@ -0,0 +1,65 @@
+import React, { FC, useCallback, useMemo } from 'react';
+
+import { t } from 'i18next';
+
+import { getAssetData } from '@sovryn/contracts';
+import { Select } from '@sovryn/ui';
+
+import { BOB_CHAIN_ID } from '../../../../../../../config/chains';
+
+import { useAaveBorrow } from '../../../../../../../hooks/aave/useAaveBorrow';
+import { translations } from '../../../../../../../locales/i18n';
+import { BorrowRateMode } from '../../../../../../../types/aave';
+import { BorrowPosition } from '../../BorrowPositionsList.types';
+
+type BorrowRateModeSelectProps = {
+  position: BorrowPosition;
+};
+
+export const BorrowRateModeSelect: FC<BorrowRateModeSelectProps> = ({
+  position,
+}) => {
+  const { handleSwapBorrowRateMode } = useAaveBorrow();
+
+  const options = useMemo(() => {
+    const borrowRateModeOptions = [
+      {
+        label: t(translations.aavePage.borrowPositionsList.selectVariableApy, {
+          apy: position.variableApy.toString(2),
+        }),
+        value: String(BorrowRateMode.VARIABLE),
+      },
+    ];
+
+    if (
+      (position.stableBorrowEnabled && !position.isCollateral) ||
+      position.borrowRateMode === BorrowRateMode.STABLE
+    ) {
+      borrowRateModeOptions.push({
+        label: t(translations.aavePage.borrowPositionsList.selectStableApy, {
+          apy: position.stableApy.toString(2),
+        }),
+        value: String(BorrowRateMode.STABLE),
+      });
+    }
+    return borrowRateModeOptions;
+  }, [position]);
+
+  const onRateModeChange = useCallback(
+    async (rateMode: string) => {
+      handleSwapBorrowRateMode(
+        await getAssetData(position.asset, BOB_CHAIN_ID),
+        position.borrowRateMode,
+      );
+    },
+    [handleSwapBorrowRateMode, position],
+  );
+
+  return (
+    <Select
+      onChange={onRateModeChange}
+      options={options}
+      value={position.borrowRateMode.toString()}
+    />
+  );
+};
diff --git a/apps/frontend/src/hooks/aave/useAaveBorrow.tsx b/apps/frontend/src/hooks/aave/useAaveBorrow.tsx
index 8ffcf74e6..1c5ab327e 100644
--- a/apps/frontend/src/hooks/aave/useAaveBorrow.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveBorrow.tsx
@@ -55,5 +55,28 @@ export const useAaveBorrow = () => {
     [setIsOpen, setTitle, setTransactions, aaveBorrowTransactionsFactory],
   );
 
-  return { handleBorrow };
+  const handleSwapBorrowRateMode = useCallback(
+    async (
+      asset: AssetDetailsData,
+      currentRateMode: BorrowRateMode,
+      opts?: TransactionFactoryOptions,
+    ) => {
+      if (!aaveBorrowTransactionsFactory) {
+        return;
+      }
+
+      setTransactions(
+        await aaveBorrowTransactionsFactory.swapBorrowRateMode(
+          asset,
+          currentRateMode,
+          opts,
+        ),
+      );
+      setTitle(t(translations.aavePage.tx.swapBorrowRateModeTitle));
+      setIsOpen(true);
+    },
+    [setIsOpen, setTitle, setTransactions, aaveBorrowTransactionsFactory],
+  );
+
+  return { handleBorrow, handleSwapBorrowRateMode };
 };
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index 3decacfc7..5a4d4c1bb 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -807,6 +807,7 @@
             "borrow": "Borrow",
             "lend": "Lend",
             "variable": "Variable",
+            "stable": "Stable",
             "fixed": "Fixed",
             "withdraw": "Withdraw",
             "healthFactor": "Health factor"
@@ -830,7 +831,9 @@
             "setUserEModeTitle": "Set E-Mode to {{category}}",
             "setUserEModeSubtitle": "Set E-Mode to {{category}} category",
             "disableEModeTitle": "Disable E-Mode",
-            "disableEModeSubtitle": "Disable E-Mode"
+            "disableEModeSubtitle": "Disable E-Mode",
+            "swapBorrowRateModeTitle": "Swap borrow rate mode",
+            "swapBorrowRateModeSubtitle": "Swap borrow rate mode for {{symbol}} to {{mode}}"
         },
         "eMode": {
             "availableAssets": "Available assets",
@@ -863,7 +866,9 @@
             "title": "Your loans",
             "repay": "Repay",
             "borrowPowerUsed": "Borrow power used",
-            "eMode": "E-Mode"
+            "eMode": "E-Mode",
+            "selectVariableApy": "APY, variable {{apy}}",
+            "selectStableApy": "APY, stable {{apy}}"
         },
         "borrowAssetsList": {
             "title": "Assets to borrow",
diff --git a/apps/frontend/src/utils/aave/AaveBorrowTransactionsFactory.ts b/apps/frontend/src/utils/aave/AaveBorrowTransactionsFactory.ts
index e602456db..1def81b0e 100644
--- a/apps/frontend/src/utils/aave/AaveBorrowTransactionsFactory.ts
+++ b/apps/frontend/src/utils/aave/AaveBorrowTransactionsFactory.ts
@@ -27,6 +27,7 @@ export class AaveBorrowTransactionsFactory {
       this.PoolAddress,
       [
         'function borrow(address asset, uint256 amount, uint256 interestRateMode, uint16 referralCode, address onBehalfOf)',
+        'function swapBorrowRateMode(address asset, uint256 rateMode)',
       ],
       this.signer,
     );
@@ -47,13 +48,37 @@ export class AaveBorrowTransactionsFactory {
   }
 
   async borrow(
-    token: AssetDetailsData,
+    asset: AssetDetailsData,
     amount: BigNumber,
     rateMode: BorrowRateMode,
     opts?: TransactionFactoryOptions,
   ): Promise<Transaction[]> {
-    if (token.isNative) return this.borrowNative(amount, rateMode, opts);
-    else return this.borrowToken(token, amount, rateMode, opts);
+    if (asset.isNative) return this.borrowNative(amount, rateMode, opts);
+    else return this.borrowToken(asset, amount, rateMode, opts);
+  }
+
+  async swapBorrowRateMode(
+    asset: AssetDetailsData,
+    currentRateMode: BorrowRateMode,
+    opts?: TransactionFactoryOptions,
+  ): Promise<Transaction[]> {
+    return [
+      {
+        title: t(translations.aavePage.tx.swapBorrowRateModeTitle),
+        subtitle: t(translations.aavePage.tx.swapBorrowRateModeSubtitle, {
+          symbol: asset.symbol,
+          mode:
+            currentRateMode === BorrowRateMode.VARIABLE ? 'stable' : 'variable',
+        }),
+        request: {
+          type: TransactionType.signTransaction,
+          args: [asset.address, currentRateMode],
+          contract: this.Pool,
+          fnName: 'swapBorrowRateMode',
+        },
+        onComplete: opts?.onComplete,
+      },
+    ];
   }
 
   private async borrowToken(

From de0cfa21599eb4029accf1b17f64b249d97d55b0 Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Thu, 5 Sep 2024 16:37:35 +0300
Subject: [PATCH 074/116] Fixes and cleanup (#33)

* cleanup

* fixes

* fixes. Connect provider. Fix repay adding proper allowance. Fix switch collateral token.address instead of token

* refetch user data based on blocknumber

* fix modal closing on lending positions change plus style adjustments

* fix withdraw modals

* modal fixes

* fix calculation
add balances and filter zero balances

* use memo items

* fix dependencies

* data normalizers

* Apply suggestions from code review

Co-authored-by: Juan <juandahl@users.noreply.github.com>

* Update apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx

Co-authored-by: Juan <juandahl@users.noreply.github.com>

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

Co-authored-by: Juan <juandahl@users.noreply.github.com>

* wip refactor done. Missing hooks merge

* implementations and cleanup

* cleanup

* cleanup

* math safety

* more math safety

* cleanup

* clenaup

* emode mocks

* enable emode working

* emode working

* fixes and cleanup

* remove whitelist

* toggle lend mode working

* fixes and cleanup

* add collateral check

* fix collateral

* fixes

* Fix. Missing fix on borrow.

* fix borrow power to match desired collateral ratio

* rollback to working contracts for borrow eth

* fixes

* fixes and max amount

* loading when account changes

* close emode on complete

* disable emode if just one category

* error handling

* feat(network): change to new sepolia (#36)

---------

Co-authored-by: Juan <juandahl@users.noreply.github.com>
---
 .../src/app/5_pages/AavePage/AavePage.tsx     | 12 ++-
 .../app/5_pages/AavePage/AavePage.utils.tsx   |  6 +-
 .../BorrowAssetsList/BorrowAssetsList.tsx     |  5 +-
 .../components/BorrowModal/BorrowForm.tsx     | 25 +++---
 .../BorrowPositionsList.tsx                   |  5 +-
 .../EfficiencyModeCard/EfficiencyModeCard.tsx | 12 ++-
 .../DisableEModeForm/DisableEModeForm.tsx     | 10 ++-
 .../EnableEModeForm/EnableEModeForm.tsx       | 10 ++-
 .../SwitchEModeForm/SwitchEModeForm.tsx       |  6 +-
 .../components/RepayForm/RepayForm.tsx        |  8 +-
 .../RepayForm/RepayWithCollateralForm.tsx     |  2 +-
 .../RepayForm/RepayWithWalletBalanceForm.tsx  | 33 ++++---
 .../LendAssetsList/LendAssetsList.tsx         |  9 +-
 .../components/LendForm/LendForm.tsx          | 29 +++----
 .../LendPositionsList/LendPositionsList.tsx   |  5 +-
 .../ToggleCollateralAction.tsx                | 11 +--
 .../components/WithdrawForm/WithdrawForm.tsx  | 29 ++++---
 apps/frontend/src/constants/aave.ts           | 19 ++--
 .../src/constants/infrastructure/bob.ts       |  4 +-
 .../frontend/src/hooks/aave/useAaveBorrow.tsx | 71 +++++++++------
 .../src/hooks/aave/useAaveEModeCategories.tsx |  7 +-
 apps/frontend/src/hooks/aave/useAaveRepay.tsx | 48 ++++++----
 .../src/hooks/aave/useAaveReservesData.tsx    | 42 +++++----
 .../src/hooks/aave/useAaveSetUserEMode.tsx    | 59 +++++++++----
 .../frontend/src/hooks/aave/useAaveSupply.tsx | 87 +++++++++++++------
 .../hooks/aave/useAaveUserReservesData.tsx    | 62 +++++++------
 .../src/hooks/aave/useAaveWithdraw.tsx        | 55 +++++++++---
 apps/frontend/src/hooks/useNotifyError.tsx    | 28 ++++++
 .../frontend/src/locales/en/translations.json |  9 +-
 .../aave/AaveBorrowTransactionsFactory.ts     |  9 +-
 .../src/utils/aave/AaveCalculations.ts        |  6 +-
 .../aave/AaveRepayTransactionsFactory.ts      | 18 +++-
 .../aave/AaveSupplyTransactionsFactory.ts     | 13 ++-
 .../src/utils/aave/AaveUserReservesSummary.ts | 18 ++--
 .../aave/AaveWithdrawTransactionsFactory.ts   | 20 +++--
 .../src/contracts/assets/bobTestnet.ts        | 10 +--
 packages/ethers-provider/src/chains.ts        |  2 +-
 packages/sdex/src/constants.ts                |  4 +-
 yarn.lock                                     |  2 +-
 39 files changed, 528 insertions(+), 282 deletions(-)
 create mode 100644 apps/frontend/src/hooks/useNotifyError.tsx

diff --git a/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx b/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
index 6c2a85522..3def8a6e7 100644
--- a/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
@@ -33,8 +33,8 @@ enum ActiveTab {
 }
 
 const AavePage: FC = () => {
-  const reserves = useAaveReservesData();
-  const { summary } = useAaveUserReservesData();
+  const { reserves, loading: reservesLoading } = useAaveReservesData();
+  const { summary, loading: summaryLoading } = useAaveUserReservesData();
   const [activeTab, setActiveTab] = useState<ActiveTab>(ActiveTab.LEND);
 
   const lendPositions: LendPosition[] = useMemo(
@@ -106,8 +106,12 @@ const AavePage: FC = () => {
               supplyBalance={summary.supplyBalance}
               collateralBalance={summary.collateralBalance}
               supplyWeightedApy={summary.supplyWeightedApy}
+              loading={summaryLoading}
+            />
+            <LendAssetsList
+              lendPools={lendPools}
+              loading={reservesLoading || summaryLoading}
             />
-            <LendAssetsList lendPools={lendPools} />
           </div>
 
           {/* Borrowing column */}
@@ -123,10 +127,12 @@ const AavePage: FC = () => {
               borrowBalance={summary.borrowBalance}
               borrowPowerUsed={summary.borrowPowerUsed}
               borrowWeightedApy={summary.borrowWeightedApy}
+              loading={summaryLoading}
             />
             <BorrowAssetsList
               borrowPools={borrowPools}
               eModeEnabled={summary.eModeEnabled}
+              loading={reservesLoading || summaryLoading}
             />
           </div>
         </div>
diff --git a/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx b/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
index 2ef05300f..ca5011d4f 100644
--- a/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
@@ -1,6 +1,6 @@
 import { Decimal } from '@sovryn/utils';
 
-import { ReserveData } from '../../../hooks/aave/useAaveReservesData';
+import { Reserve } from '../../../hooks/aave/useAaveReservesData';
 import { BorrowRateMode } from '../../../types/aave';
 import { AaveUserReservesSummary } from '../../../utils/aave/AaveUserReservesSummary';
 import { BorrowPoolDetails } from './components/BorrowAssetsList/BorrowAssetsList.types';
@@ -51,7 +51,7 @@ export function normalizeBorrowPositions(
 }
 
 export function normalizeBorrowPoolDetails(
-  reserves: ReserveData,
+  reserves: Reserve[],
   userReservesSummary: AaveUserReservesSummary,
 ): BorrowPoolDetails[] {
   if (userReservesSummary.reserves.length === 0) {
@@ -84,7 +84,7 @@ export function normalizeBorrowPoolDetails(
 }
 
 export function normalizeLendPoolDetails(
-  reserves: ReserveData,
+  reserves: Reserve[],
   userReservesSummary: AaveUserReservesSummary,
 ): LendPoolDetails[] {
   if (userReservesSummary.reserves.length === 0) {
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
index c9ebfc3bf..885866d2e 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
@@ -25,11 +25,13 @@ const pageTranslations = translations.aavePage.borrowAssetsList;
 type BorrowAssetsListProps = {
   borrowPools: BorrowPoolDetails[];
   eModeEnabled: boolean;
+  loading: boolean;
 };
 
 export const BorrowAssetsList: FC<BorrowAssetsListProps> = ({
   borrowPools,
   eModeEnabled,
+  loading,
 }) => {
   const [open, setOpen] = useState(true);
   const [orderOptions, setOrderOptions] = useState<OrderOptions>();
@@ -89,6 +91,7 @@ export const BorrowAssetsList: FC<BorrowAssetsListProps> = ({
       )}
 
       <Table
+        isLoading={loading}
         className="mt-4"
         columns={COLUMNS_CONFIG(onBorrowClick)}
         rowClassName="bg-gray-80"
@@ -106,7 +109,7 @@ export const BorrowAssetsList: FC<BorrowAssetsListProps> = ({
           onClose={onBorrowClose}
         />
         <DialogBody className="flex flex-col gap-6">
-          <BorrowForm asset={borrowAssetDialog!} onSuccess={onBorrowClose} />
+          <BorrowForm asset={borrowAssetDialog!} onComplete={onBorrowClose} />
         </DialogBody>
       </Dialog>
     </Accordion>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
index f48d44cfe..d9b5dccef 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
@@ -1,8 +1,7 @@
-import React, { FC, useMemo, useState } from 'react';
+import React, { FC, useCallback, useMemo, useState } from 'react';
 
 import { t } from 'i18next';
 
-import { getAssetData } from '@sovryn/contracts';
 import {
   Button,
   Checkbox,
@@ -32,10 +31,10 @@ const pageTranslations = translations.aavePage;
 
 type BorrowFormProps = {
   asset: string;
-  onSuccess: () => void;
+  onComplete: () => void;
 };
 
-export const BorrowForm: FC<BorrowFormProps> = ({ asset, onSuccess }) => {
+export const BorrowForm: FC<BorrowFormProps> = ({ asset, onComplete }) => {
   const { summary } = useAaveUserReservesData();
   const [borrowAsset, setBorrowAsset] = useState<string>(asset);
   const [borrowAmount, setBorrowAmount, borrowSize] = useDecimalAmountInput('');
@@ -99,6 +98,15 @@ export const BorrowForm: FC<BorrowFormProps> = ({ asset, onSuccess }) => {
     [borrowSize, maximumBorrowAmount],
   );
 
+  const onConfirm = useCallback(() => {
+    handleBorrow(
+      borrowSize,
+      borrowReserve!.reserve.symbol,
+      BorrowRateMode.VARIABLE,
+      { onComplete },
+    );
+  }, [onComplete, borrowSize, borrowReserve, handleBorrow]);
+
   return (
     <form className="flex flex-col gap-6">
       <div className="space-y-3">
@@ -179,14 +187,7 @@ export const BorrowForm: FC<BorrowFormProps> = ({ asset, onSuccess }) => {
       />
 
       <Button
-        onClick={async () => {
-          handleBorrow(
-            borrowSize,
-            await getAssetData(borrowReserve!.reserve.symbol, BOB_CHAIN_ID),
-            BorrowRateMode.VARIABLE,
-            { onComplete: onSuccess },
-          );
-        }}
+        onClick={onConfirm}
         disabled={
           !isValidBorrowAmount ||
           borrowSize.lte(0) ||
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
index cc2c02ab5..422f4d77c 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
@@ -31,6 +31,7 @@ type BorrowPositionsListProps = {
   borrowWeightedApy: Decimal;
   borrowPowerUsed: Decimal;
   eModeCategoryId: Number;
+  loading: boolean;
 };
 
 export const BorrowPositionsList: FC<BorrowPositionsListProps> = ({
@@ -39,6 +40,7 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = ({
   borrowPowerUsed,
   borrowWeightedApy,
   eModeCategoryId,
+  loading,
 }) => {
   const { account } = useAccount();
   const [open, setOpen] = useState(true);
@@ -123,6 +125,7 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = ({
           </div>
 
           <Table
+            isLoading={loading}
             columns={COLUMNS_CONFIG(onRepayClick)}
             rowClassName="bg-gray-80"
             accordionClassName="bg-gray-60 border border-gray-70"
@@ -139,7 +142,7 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = ({
               onClose={onRepayClose}
             />
             <DialogBody className="space-y-3">
-              <RepayForm asset={repayAssetDialog!} onSuccess={onRepayClose} />
+              <RepayForm asset={repayAssetDialog!} onComplete={onRepayClose} />
             </DialogBody>
           </Dialog>
         </>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx
index e771c05a4..9bdb44395 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx
@@ -98,6 +98,7 @@ export const EfficiencyModeCard: FC<EfficiencyModeCardProps> = ({
             {eModeCategoryId !== 0 ? (
               <div className="space-y-1">
                 <Button
+                  disabled={eModeCategories.length <= 1}
                   onClick={() => setSwitchEModeOpen(true)}
                   text={t(translations.aavePage.eMode.switchCategory)}
                   className="w-full"
@@ -136,7 +137,10 @@ export const EfficiencyModeCard: FC<EfficiencyModeCardProps> = ({
           onClose={onEnableEModeClose}
         />
         <DialogBody>
-          <EnableEModeForm categories={eModeCategories} />
+          <EnableEModeForm
+            categories={eModeCategories}
+            onComplete={onEnableEModeClose}
+          />
         </DialogBody>
       </Dialog>
 
@@ -149,6 +153,7 @@ export const EfficiencyModeCard: FC<EfficiencyModeCardProps> = ({
           <SwitchEModeForm
             categories={eModeCategories}
             current={currentCategory as EModeCategory}
+            onComplete={onSwitchEModeClose}
           />
         </DialogBody>
       </Dialog>
@@ -159,7 +164,10 @@ export const EfficiencyModeCard: FC<EfficiencyModeCardProps> = ({
           onClose={onDisableEModeClose}
         />
         <DialogBody>
-          <DisableEModeForm current={currentCategory as EModeCategory} />
+          <DisableEModeForm
+            current={currentCategory as EModeCategory}
+            onComplete={onDisableEModeClose}
+          />
         </DialogBody>
       </Dialog>
     </>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx
index 0971bfa17..30a0e83b9 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx
@@ -26,16 +26,20 @@ import { CollateralRatioHealthBar } from '../../../../../CollateralRatioHealthBa
 
 type DisableEModeFormProps = {
   current: EModeCategory;
+  onComplete: () => void;
 };
 
-export const DisableEModeForm: FC<DisableEModeFormProps> = ({ current }) => {
+export const DisableEModeForm: FC<DisableEModeFormProps> = ({
+  current,
+  onComplete,
+}) => {
   const { handleDisableUserEMode } = useAaveSetUserEMode();
   const { userReservesData, reservesData, timestamp } =
     useAaveUserReservesData();
 
   const onConfirm = useCallback(() => {
-    handleDisableUserEMode();
-  }, [handleDisableUserEMode]);
+    handleDisableUserEMode({ onComplete });
+  }, [handleDisableUserEMode, onComplete]);
 
   const newSummary = useMemo(() => {
     if (!userReservesData || !reservesData) {
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/EnableEModeForm/EnableEModeForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/EnableEModeForm/EnableEModeForm.tsx
index 9e8c0e1bb..4e1331450 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/EnableEModeForm/EnableEModeForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/EnableEModeForm/EnableEModeForm.tsx
@@ -20,9 +20,13 @@ import { EModeCategory } from '../../../../../../../../../types/aave';
 
 type EnableEModeFormProps = {
   categories: EModeCategory[];
+  onComplete: () => void;
 };
 
-export const EnableEModeForm: FC<EnableEModeFormProps> = ({ categories }) => {
+export const EnableEModeForm: FC<EnableEModeFormProps> = ({
+  categories,
+  onComplete,
+}) => {
   const [category, setCategory] = useState(String(categories[0]?.id));
   const { summary } = useAaveUserReservesData();
   const { handleSetUserEMode } = useAaveSetUserEMode();
@@ -46,8 +50,8 @@ export const EnableEModeForm: FC<EnableEModeFormProps> = ({ categories }) => {
 
   const onConfirmClick = useCallback(() => {
     if (!selectedCategory) return;
-    handleSetUserEMode(selectedCategory);
-  }, [handleSetUserEMode, selectedCategory]);
+    handleSetUserEMode(selectedCategory, { onComplete });
+  }, [handleSetUserEMode, selectedCategory, onComplete]);
 
   return (
     <div className="space-y-6">
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx
index 16cac3a12..9d33fa198 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx
@@ -29,11 +29,13 @@ import { CollateralRatioHealthBar } from '../../../../../CollateralRatioHealthBa
 type SwitchEModeFormProps = {
   current: EModeCategory;
   categories: EModeCategory[];
+  onComplete: () => void;
 };
 
 export const SwitchEModeForm: FC<SwitchEModeFormProps> = ({
   current,
   categories,
+  onComplete,
 }) => {
   const { handleSetUserEMode } = useAaveSetUserEMode();
   const [category, setCategory] = useState<string>('');
@@ -104,8 +106,8 @@ export const SwitchEModeForm: FC<SwitchEModeFormProps> = ({
 
   const onConfirm = useCallback(() => {
     if (!selectedCategory) return;
-    handleSetUserEMode(selectedCategory);
-  }, [handleSetUserEMode, selectedCategory]);
+    handleSetUserEMode(selectedCategory, { onComplete });
+  }, [handleSetUserEMode, selectedCategory, onComplete]);
 
   return (
     <div className="space-y-6">
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.tsx
index ad48869e4..e964088b5 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.tsx
@@ -10,7 +10,7 @@ import { RepayWithWalletBalanceForm } from './RepayWithWalletBalanceForm';
 
 type RepayFormProps = {
   asset: string;
-  onSuccess: () => unknown;
+  onComplete: () => unknown;
 };
 
 enum RepayWith {
@@ -18,7 +18,7 @@ enum RepayWith {
   COLLATERAL,
 }
 
-export const RepayForm: FC<RepayFormProps> = ({ asset, onSuccess }) => {
+export const RepayForm: FC<RepayFormProps> = ({ asset, onComplete }) => {
   const [activeTab, setActiveTab] = useState<RepayWith>(RepayWith.BALANCE);
 
   const tabItems = useMemo(() => {
@@ -56,9 +56,9 @@ export const RepayForm: FC<RepayFormProps> = ({ asset, onSuccess }) => {
       />
 
       {activeTab === RepayWith.BALANCE ? (
-        <RepayWithWalletBalanceForm asset={asset} onSuccess={onSuccess} />
+        <RepayWithWalletBalanceForm asset={asset} onComplete={onComplete} />
       ) : (
-        <RepayWithCollateralForm onSuccess={onSuccess} />
+        <RepayWithCollateralForm onComplete={onComplete} />
       )}
     </div>
   );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithCollateralForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithCollateralForm.tsx
index 5fb5c34cd..5fd392d66 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithCollateralForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithCollateralForm.tsx
@@ -24,7 +24,7 @@ import { CollateralRatioHealthBar } from '../../../CollateralRatioHealthBar/Coll
 const pageTranslations = translations.aavePage;
 
 type RepayWithCollateralFormProps = {
-  onSuccess: () => void;
+  onComplete: () => void;
 };
 
 export const RepayWithCollateralForm: FC<RepayWithCollateralFormProps> = () => {
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx
index e22a9c9c1..14a815902 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx
@@ -1,8 +1,7 @@
-import React, { FC, useMemo, useState } from 'react';
+import React, { FC, useCallback, useMemo, useState } from 'react';
 
 import { t } from 'i18next';
 
-import { getAssetData } from '@sovryn/contracts';
 import {
   Button,
   ErrorBadge,
@@ -31,12 +30,12 @@ const pageTranslations = translations.aavePage;
 
 type RepayWithWalletBalanceFormProps = {
   asset: string;
-  onSuccess: () => void;
+  onComplete: () => void;
 };
 
 export const RepayWithWalletBalanceForm: FC<
   RepayWithWalletBalanceFormProps
-> = ({ asset, onSuccess }) => {
+> = ({ asset, onComplete }) => {
   const { account } = useAccount();
   const { handleRepay } = useAaveRepay();
   const { summary } = useAaveUserReservesData();
@@ -107,6 +106,23 @@ export const RepayWithWalletBalanceForm: FC<
     [repaySize, maximumRepayAmount],
   );
 
+  const onConfirm = useCallback(() => {
+    handleRepay(
+      repayAsset,
+      repaySize,
+      repaySize.eq(maximumRepayAmount),
+      repayReserve!.borrowRateMode,
+      { onComplete },
+    );
+  }, [
+    handleRepay,
+    repayAsset,
+    repaySize,
+    onComplete,
+    repayReserve,
+    maximumRepayAmount,
+  ]);
+
   return (
     <form className="flex flex-col gap-6 relative">
       <div className="space-y-3">
@@ -191,14 +207,7 @@ export const RepayWithWalletBalanceForm: FC<
       <Button
         disabled={!isValidRepayAmount}
         text={t(translations.common.buttons.confirm)}
-        onClick={async () => {
-          handleRepay(
-            repaySize,
-            await getAssetData(repayAsset, BOB_CHAIN_ID),
-            repayReserve!.borrowRateMode,
-            { onComplete: onSuccess },
-          );
-        }}
+        onClick={onConfirm}
       />
     </form>
   );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
index 19dcd5e24..42c170d53 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
@@ -22,10 +22,14 @@ import { LendForm } from './components/LendForm/LendForm';
 const pageTranslations = translations.aavePage;
 
 type LendAssetsListProps = {
+  loading: boolean;
   lendPools: LendPoolDetails[];
 };
 
-export const LendAssetsList: FC<LendAssetsListProps> = ({ lendPools }) => {
+export const LendAssetsList: FC<LendAssetsListProps> = ({
+  lendPools,
+  loading,
+}) => {
   const [open, setOpen] = useState(true);
   const [showZeroBalances, setShowZeroBalances] = useState(true);
   const [orderOptions, setOrderOptions] = useState<OrderOptions>();
@@ -84,6 +88,7 @@ export const LendAssetsList: FC<LendAssetsListProps> = ({ lendPools }) => {
       />
 
       <Table
+        isLoading={loading}
         columns={COLUMNS_CONFIG(onLendClick)}
         rowClassName="bg-gray-80"
         accordionClassName="bg-gray-60 border border-gray-70"
@@ -100,7 +105,7 @@ export const LendAssetsList: FC<LendAssetsListProps> = ({ lendPools }) => {
           onClose={onLendClose}
         />
         <DialogBody className="flex flex-col gap-6">
-          <LendForm onSuccess={onLendClose} asset={lendAssetDialog!} />
+          <LendForm onComplete={onLendClose} asset={lendAssetDialog!} />
         </DialogBody>
       </Dialog>
     </Accordion>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendForm/LendForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendForm/LendForm.tsx
index 0d492b254..12f96e27e 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendForm/LendForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendForm/LendForm.tsx
@@ -1,8 +1,7 @@
-import React, { FC, useMemo, useState } from 'react';
+import React, { FC, useCallback, useMemo, useState } from 'react';
 
 import { t } from 'i18next';
 
-import { getAssetData } from '@sovryn/contracts';
 import {
   Button,
   ErrorBadge,
@@ -28,15 +27,15 @@ const pageTranslations = translations.aavePage;
 
 type LendFormProps = {
   asset: string;
-  onSuccess: () => void;
+  onComplete: () => void;
 };
 
 export const LendForm: FC<LendFormProps> = ({
   asset: initialAsset,
-  onSuccess,
+  onComplete,
 }) => {
   const { account } = useAccount();
-  const reserves = useAaveReservesData();
+  const { reserves } = useAaveReservesData();
   const [lendAsset, setLendAsset] = useState<string>(initialAsset);
   const [lendAmount, setLendAmount, lendSize] = useDecimalAmountInput('');
   const { balance: lendAssetBalance } = useAssetBalance(
@@ -66,7 +65,7 @@ export const LendForm: FC<LendFormProps> = ({
     return reserves.find(r => r.symbol === lendAsset) ?? reserves[0];
   }, [reserves, lendAsset]);
 
-  const assetUsdValue: Decimal = useMemo(() => {
+  const assetUsdValue = useMemo(() => {
     return Decimal.from(reserve?.priceInUSD ?? 0).mul(lendSize);
   }, [reserve, lendSize]);
 
@@ -75,6 +74,10 @@ export const LendForm: FC<LendFormProps> = ({
     [lendSize, lendAssetBalance],
   );
 
+  const onConfirm = useCallback(async () => {
+    handleDeposit(lendSize, reserve.symbol, { onComplete });
+  }, [handleDeposit, lendSize, reserve, onComplete]);
+
   return (
     <form className="flex flex-col gap-6">
       <div>
@@ -114,22 +117,16 @@ export const LendForm: FC<LendFormProps> = ({
         <SimpleTableRow
           label={t(translations.aavePage.lendModal.collateralization)}
           value={t(
-            translations.aavePage.lendModal[
-              reserve?.usageAsCollateralEnabled ? 'enabled' : 'disabled'
-            ],
+            reserve?.usageAsCollateralEnabled
+              ? translations.aavePage.lendModal.enabled
+              : translations.aavePage.lendModal.disabled,
           )}
         />
       </SimpleTable>
 
       <Button
         disabled={!isValidLendAmount || lendSize.lte(0)}
-        onClick={async () =>
-          handleDeposit(
-            lendSize,
-            await getAssetData(reserve.symbol, BOB_CHAIN_ID),
-            { onComplete: onSuccess },
-          )
-        }
+        onClick={onConfirm}
         text={t(translations.aavePage.lendModal.deposit)}
       />
     </form>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
index 434dfd3ea..0af177b59 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
@@ -30,6 +30,7 @@ type LendPositionsListProps = {
   supplyWeightedApy: Decimal;
   collateralBalance: Decimal;
   lendPositions: LendPosition[];
+  loading: boolean;
 };
 
 export const LendPositionsList: FC<LendPositionsListProps> = ({
@@ -37,6 +38,7 @@ export const LendPositionsList: FC<LendPositionsListProps> = ({
   supplyWeightedApy,
   collateralBalance,
   lendPositions,
+  loading,
 }) => {
   const { account } = useAccount();
   const [open, setOpen] = useState<boolean>(true);
@@ -110,6 +112,7 @@ export const LendPositionsList: FC<LendPositionsListProps> = ({
           </div>
 
           <Table
+            isLoading={loading}
             columns={COLUMNS_CONFIG(onWithdrawClick)}
             rowClassName="bg-gray-80"
             accordionClassName="bg-gray-60 border border-gray-70"
@@ -128,7 +131,7 @@ export const LendPositionsList: FC<LendPositionsListProps> = ({
             <DialogBody className="flex flex-col gap-6">
               <WithdrawForm
                 asset={withdrawAssetDialog!}
-                onSuccess={onWithdrawClose}
+                onComplete={onWithdrawClose}
               />
             </DialogBody>
           </Dialog>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx
index c1b6ba37c..46e4d21cc 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx
@@ -1,10 +1,7 @@
 import React, { FC, useState } from 'react';
 
-import { getAssetData } from '@sovryn/contracts';
 import { Toggle } from '@sovryn/ui';
 
-import { BOB_CHAIN_ID } from '../../../../../../../config/chains';
-
 import { useAaveSupply } from '../../../../../../../hooks/aave/useAaveSupply';
 import { LendPosition } from '../../LendPositionsList.types';
 
@@ -19,11 +16,9 @@ export const ToggleCollateralAction: FC<ToggleCollateralActionProps> = ({
   const [isCollateral, setIsCollateral] = useState(position.collateral);
 
   const toggleCollateral = async () => {
-    await handleSwitchCollateral(
-      await getAssetData(position.asset, BOB_CHAIN_ID),
-      !isCollateral,
-      { onComplete: () => setIsCollateral(!isCollateral) },
-    );
+    await handleSwitchCollateral(position.asset, !isCollateral, {
+      onComplete: () => setIsCollateral(!isCollateral),
+    });
   };
 
   return (
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx
index 10dfc9808..630ce87c8 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx
@@ -1,8 +1,7 @@
-import React, { FC, useMemo, useState } from 'react';
+import React, { FC, useCallback, useMemo, useState } from 'react';
 
 import { t } from 'i18next';
 
-import { getAssetData } from '@sovryn/contracts';
 import {
   Button,
   ErrorBadge,
@@ -28,10 +27,10 @@ const pageTranslations = translations.aavePage;
 
 type WithdrawFormProps = {
   asset: string;
-  onSuccess: () => void;
+  onComplete: () => void;
 };
 
-export const WithdrawForm: FC<WithdrawFormProps> = ({ asset }) => {
+export const WithdrawForm: FC<WithdrawFormProps> = ({ asset, onComplete }) => {
   const { handleWithdraw } = useAaveWithdraw();
   const { summary } = useAaveUserReservesData();
   const [withdrawAsset, setWithdrawAsset] = useState<string>(asset);
@@ -97,6 +96,21 @@ export const WithdrawForm: FC<WithdrawFormProps> = ({ asset }) => {
     [],
   );
 
+  const onConfirm = useCallback(() => {
+    handleWithdraw(
+      withdrawSize,
+      withdrawAsset,
+      withdrawSize.eq(maximumWithdrawAmount),
+      { onComplete },
+    );
+  }, [
+    handleWithdraw,
+    withdrawSize,
+    withdrawAsset,
+    onComplete,
+    maximumWithdrawAmount,
+  ]);
+
   return (
     <form className="flex flex-col gap-6">
       <div className="space-y-2">
@@ -138,12 +152,7 @@ export const WithdrawForm: FC<WithdrawFormProps> = ({ asset }) => {
 
       <Button
         disabled={submitButtonDisabled}
-        onClick={async () => {
-          handleWithdraw(
-            withdrawSize,
-            await getAssetData(withdrawAsset, BOB_CHAIN_ID),
-          );
-        }}
+        onClick={onConfirm}
         text={t(translations.common.buttons.confirm)}
       />
     </form>
diff --git a/apps/frontend/src/constants/aave.ts b/apps/frontend/src/constants/aave.ts
index 4e0027dcf..95626ff6b 100644
--- a/apps/frontend/src/constants/aave.ts
+++ b/apps/frontend/src/constants/aave.ts
@@ -1,17 +1,12 @@
-import { ethers } from 'ethers';
-
 import { decimalic } from '../utils/math';
 
 export const config = {
-  chainId: 111,
+  chainId: 808813,
   MinCollateralRatio: decimalic(1.5),
-  VariableDebtWETHAddress: '0x5d390c39c8bc4B116a87991fd369244dD7B0C6D8',
-  PoolAddress: '0xc62b1eDC4fF950aD32D6846e69B68cCadBC568Af',
-  WETHGatewayAddress: '0x9F9Dc8dc9308C32Cf652b32dD1b5d2DA106f1dA0',
-  UiPoolDataProviderV3Address: '0x0954E027fb7d59271CF253831c5Cc78be5c75840',
-  PoolAddressesProviderAddress: '0x01757F5712695f8f93AD63ED3Bdf66575522188a',
-
-  provider: new ethers.providers.JsonRpcProvider(
-    'https://testnet.rpc.gobob.xyz',
-  ),
+  PoolAddress: '0xFbdc7303cc2046Ff6c340F94F71aB01517b42476',
+  WETHGatewayAddress: '0x50ff0B7a3e7af6F896CA81aF2E563814Eee7A3c0',
+  UiPoolDataProviderV3Address: '0x5E7F300702D15d8B661aed2B67dc68f8e48B3b55',
+  PoolAddressesProviderAddress: '0xc187B9083fF15B3Ae4eA56f8ab82DF52474B4E58',
+  VariableDebtWETHAddress: '0x8bA8F81a5c2F406f3eD8FE18A94AecE3E27C2831',
+  WETHAddress: '0x8CEc2719a2e896A11eA3f10406EfDb6Ad87281D9',
 };
diff --git a/apps/frontend/src/constants/infrastructure/bob.ts b/apps/frontend/src/constants/infrastructure/bob.ts
index a99578250..5c7c31db2 100644
--- a/apps/frontend/src/constants/infrastructure/bob.ts
+++ b/apps/frontend/src/constants/infrastructure/bob.ts
@@ -2,7 +2,7 @@ import { Environments } from '../../types/global';
 
 const rpc = {
   [Environments.Mainnet]: 'https://rpc.gobob.xyz',
-  [Environments.Testnet]: 'https://testnet.rpc.gobob.xyz',
+  [Environments.Testnet]: 'https://bob-sepolia.rpc.gobob.xyz',
 };
 
 export const BOB = {
@@ -10,7 +10,7 @@ export const BOB = {
   publicRpc: rpc,
   explorer: {
     [Environments.Mainnet]: 'https://explorer.gobob.xyz',
-    [Environments.Testnet]: 'https://testnet-explorer.gobob.xyz',
+    [Environments.Testnet]: 'https://bob-sepolia.explorer.gobob.xyz',
   },
   indexer: {
     [Environments.Mainnet]: 'https://bob-ambient-graphcache.sovryn.app/gcgo',
diff --git a/apps/frontend/src/hooks/aave/useAaveBorrow.tsx b/apps/frontend/src/hooks/aave/useAaveBorrow.tsx
index 1c5ab327e..2e85ae980 100644
--- a/apps/frontend/src/hooks/aave/useAaveBorrow.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveBorrow.tsx
@@ -3,18 +3,22 @@ import { useCallback, useMemo } from 'react';
 import { BigNumber } from 'ethers';
 import { t } from 'i18next';
 
-import { AssetDetailsData } from '@sovryn/contracts';
+import { AssetDetailsData, getAssetData } from '@sovryn/contracts';
 import { Decimal } from '@sovryn/utils';
 
+import { BOB_CHAIN_ID } from '../../config/chains';
+
 import { config } from '../../constants/aave';
 import { useTransactionContext } from '../../contexts/TransactionContext';
 import { translations } from '../../locales/i18n';
 import { BorrowRateMode, TransactionFactoryOptions } from '../../types/aave';
 import { AaveBorrowTransactionsFactory } from '../../utils/aave/AaveBorrowTransactionsFactory';
 import { useAccount } from '../useAccount';
+import { useNotifyError } from '../useNotifyError';
 
 export const useAaveBorrow = () => {
   const { signer } = useAccount();
+  const { notifyError } = useNotifyError();
   const { setTransactions, setIsOpen, setTitle } = useTransactionContext();
 
   const aaveBorrowTransactionsFactory = useMemo(() => {
@@ -30,29 +34,41 @@ export const useAaveBorrow = () => {
   const handleBorrow = useCallback(
     async (
       amount: Decimal,
-      asset: AssetDetailsData,
+      symbol: string,
       rateMode: BorrowRateMode,
       opts?: TransactionFactoryOptions,
     ) => {
-      if (!aaveBorrowTransactionsFactory) {
-        return;
-      }
-      const bnAmount = BigNumber.from(
-        amount.mul(Decimal.from(10).pow(asset.decimals)).toString(),
-      );
+      try {
+        if (!aaveBorrowTransactionsFactory) {
+          throw new Error('Transactions factory not available');
+        }
 
-      setTransactions(
-        await aaveBorrowTransactionsFactory.borrow(
+        const asset = await getAssetData(symbol, BOB_CHAIN_ID);
+        const bnAmount = BigNumber.from(
+          amount.mul(Decimal.from(10).pow(asset.decimals)).toString(),
+        );
+
+        const transactions = await aaveBorrowTransactionsFactory.borrow(
           asset,
           bnAmount,
           rateMode,
           opts,
-        ),
-      );
-      setTitle(t(translations.aavePage.common.borrow));
-      setIsOpen(true);
+        );
+
+        setTransactions(transactions);
+        setTitle(t(translations.aavePage.common.borrow));
+        setIsOpen(true);
+      } catch (e) {
+        notifyError(e);
+      }
     },
-    [setIsOpen, setTitle, setTransactions, aaveBorrowTransactionsFactory],
+    [
+      setIsOpen,
+      setTitle,
+      setTransactions,
+      aaveBorrowTransactionsFactory,
+      notifyError,
+    ],
   );
 
   const handleSwapBorrowRateMode = useCallback(
@@ -65,17 +81,22 @@ export const useAaveBorrow = () => {
         return;
       }
 
-      setTransactions(
-        await aaveBorrowTransactionsFactory.swapBorrowRateMode(
-          asset,
-          currentRateMode,
-          opts,
-        ),
-      );
-      setTitle(t(translations.aavePage.tx.swapBorrowRateModeTitle));
-      setIsOpen(true);
+      aaveBorrowTransactionsFactory
+        .swapBorrowRateMode(asset, currentRateMode, opts)
+        .then(transactions => {
+          setTransactions(transactions);
+          setTitle(t(translations.aavePage.tx.swapBorrowRateModeTitle));
+          setIsOpen(true);
+        })
+        .catch(notifyError);
     },
-    [setIsOpen, setTitle, setTransactions, aaveBorrowTransactionsFactory],
+    [
+      setIsOpen,
+      setTitle,
+      setTransactions,
+      aaveBorrowTransactionsFactory,
+      notifyError,
+    ],
   );
 
   return { handleBorrow, handleSwapBorrowRateMode };
diff --git a/apps/frontend/src/hooks/aave/useAaveEModeCategories.tsx b/apps/frontend/src/hooks/aave/useAaveEModeCategories.tsx
index c17db936e..392e4329a 100644
--- a/apps/frontend/src/hooks/aave/useAaveEModeCategories.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveEModeCategories.tsx
@@ -7,7 +7,7 @@ import { useAccount } from '../useAccount';
 import { useAaveReservesData } from './useAaveReservesData';
 
 export const useAaveEModeCategories = (): EModeCategory[] => {
-  const reserves = useAaveReservesData();
+  const { reserves } = useAaveReservesData();
   const { provider } = useAccount();
   const [categories, setCategories] = useState<EModeCategory[]>([]);
 
@@ -22,7 +22,10 @@ export const useAaveEModeCategories = (): EModeCategory[] => {
       return;
     }
 
-    eModeCategoriesFetcher.getAllEModeCategories(reserves).then(setCategories);
+    eModeCategoriesFetcher
+      .getAllEModeCategories(reserves)
+      .then(setCategories)
+      .catch(console.error);
   }, [eModeCategoriesFetcher, reserves]);
 
   return categories;
diff --git a/apps/frontend/src/hooks/aave/useAaveRepay.tsx b/apps/frontend/src/hooks/aave/useAaveRepay.tsx
index 53753888a..33500bba3 100644
--- a/apps/frontend/src/hooks/aave/useAaveRepay.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveRepay.tsx
@@ -3,18 +3,22 @@ import { useCallback, useMemo } from 'react';
 import { BigNumber } from 'ethers';
 import { t } from 'i18next';
 
-import { AssetDetailsData } from '@sovryn/contracts';
+import { getAssetData } from '@sovryn/contracts';
 import { Decimal } from '@sovryn/utils';
 
+import { BOB_CHAIN_ID } from '../../config/chains';
+
 import { config } from '../../constants/aave';
 import { useTransactionContext } from '../../contexts/TransactionContext';
 import { translations } from '../../locales/i18n';
 import { BorrowRateMode, TransactionFactoryOptions } from '../../types/aave';
 import { AaveRepayTransactionsFactory } from '../../utils/aave/AaveRepayTransactionsFactory';
 import { useAccount } from '../useAccount';
+import { useNotifyError } from '../useNotifyError';
 
 export const useAaveRepay = () => {
   const { signer } = useAccount();
+  const { notifyError } = useNotifyError();
   const { setTransactions, setIsOpen, setTitle } = useTransactionContext();
 
   const aaveRepayTransactionsFactory = useMemo(() => {
@@ -28,30 +32,44 @@ export const useAaveRepay = () => {
 
   const handleRepay = useCallback(
     async (
+      symbol: string,
       amount: Decimal,
-      asset: AssetDetailsData,
+      isEntireDebt: boolean,
       borrowRateMode: BorrowRateMode,
       opts?: TransactionFactoryOptions,
     ) => {
-      if (!aaveRepayTransactionsFactory) {
-        return;
-      }
-      const bnAmount = BigNumber.from(
-        amount.mul(Decimal.from(10).pow(asset.decimals)).toString(),
-      );
+      try {
+        if (!aaveRepayTransactionsFactory) {
+          throw new Error('Transactions factory not available');
+        }
+
+        const asset = await getAssetData(symbol, BOB_CHAIN_ID);
+        const bnAmount = BigNumber.from(
+          amount.mul(Decimal.from(10).pow(asset.decimals)).toString(),
+        );
 
-      setTransactions(
-        await aaveRepayTransactionsFactory.repay(
+        const transactions = await aaveRepayTransactionsFactory.repay(
           asset,
           bnAmount,
+          isEntireDebt,
           borrowRateMode,
           opts,
-        ),
-      );
-      setTitle(t(translations.common.buttons.repay));
-      setIsOpen(true);
+        );
+
+        setTransactions(transactions);
+        setTitle(t(translations.common.buttons.repay));
+        setIsOpen(true);
+      } catch (e) {
+        notifyError(e);
+      }
     },
-    [setIsOpen, setTitle, setTransactions, aaveRepayTransactionsFactory],
+    [
+      setIsOpen,
+      setTitle,
+      setTransactions,
+      aaveRepayTransactionsFactory,
+      notifyError,
+    ],
   );
 
   return { handleRepay };
diff --git a/apps/frontend/src/hooks/aave/useAaveReservesData.tsx b/apps/frontend/src/hooks/aave/useAaveReservesData.tsx
index 58f9fea4e..402a24f6f 100644
--- a/apps/frontend/src/hooks/aave/useAaveReservesData.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveReservesData.tsx
@@ -4,21 +4,21 @@ import {
 } from '@aave/contract-helpers';
 import { formatReserves, FormatReserveUSDResponse } from '@aave/math-utils';
 
-import { useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import dayjs from 'dayjs';
 
-import { BOB_CHAIN_ID } from '../../config/chains';
-
 import { config } from '../../constants/aave';
-import { useCachedData } from '../useCachedData';
+import { useAccount } from '../useAccount';
 
 export type Reserve = ReserveDataHumanized & FormatReserveUSDResponse;
 
-export type ReserveData = Reserve[];
+export type ReserveData = { reserves: Reserve[]; loading: boolean };
 
 export const useAaveReservesData = (): ReserveData => {
-  const provider = config.provider; // TODO: replace with useAccount. Circular dependency error...
+  const { provider } = useAccount();
+  const [reserves, setReserves] = useState<Reserve[]>([]);
+  const [loading, setLoading] = useState(false);
 
   const uiPoolDataProvider = useMemo(
     () =>
@@ -32,14 +32,8 @@ export const useAaveReservesData = (): ReserveData => {
     [provider],
   );
 
-  const { value } = useCachedData<ReserveData>(
-    'AaveReservesData',
-    BOB_CHAIN_ID,
-    async () => {
-      if (!uiPoolDataProvider) {
-        return [];
-      }
-
+  const fetchReservesData = useCallback(
+    async (uiPoolDataProvider: UiPoolDataProvider) => {
       const currentTimestamp = dayjs().unix();
       const reservesData = await uiPoolDataProvider.getReservesHumanized({
         lendingPoolAddressProvider: config.PoolAddressesProviderAddress,
@@ -53,12 +47,22 @@ export const useAaveReservesData = (): ReserveData => {
           reservesData.baseCurrencyData.marketReferenceCurrencyPriceInUsd,
       });
 
-      return formattedReserves;
+      setReserves(
+        // rename weth to eth. We don't expose WETH through ui.
+        formattedReserves.map(r =>
+          r.symbol === 'WETH' ? { ...r, symbol: 'ETH' } : r,
+        ),
+      );
     },
-    [uiPoolDataProvider],
-    [],
-    { ttl: 1000 * 60, fallbackToPreviousResult: true },
+    [setReserves],
   );
 
-  return value;
+  useEffect(() => {
+    if (uiPoolDataProvider) {
+      setLoading(true);
+      fetchReservesData(uiPoolDataProvider).finally(() => setLoading(false));
+    }
+  }, [uiPoolDataProvider, fetchReservesData]);
+
+  return { reserves, loading };
 };
diff --git a/apps/frontend/src/hooks/aave/useAaveSetUserEMode.tsx b/apps/frontend/src/hooks/aave/useAaveSetUserEMode.tsx
index d64ecb407..eee1b8da0 100644
--- a/apps/frontend/src/hooks/aave/useAaveSetUserEMode.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveSetUserEMode.tsx
@@ -8,9 +8,11 @@ import { translations } from '../../locales/i18n';
 import { EModeCategory, TransactionFactoryOptions } from '../../types/aave';
 import { AaveEModeTransactionsFactory } from '../../utils/aave/AaveEModeTransactionsFactory';
 import { useAccount } from '../useAccount';
+import { useNotifyError } from '../useNotifyError';
 
 export const useAaveSetUserEMode = () => {
   const { signer } = useAccount();
+  const { notifyError } = useNotifyError();
   const { setTransactions, setIsOpen, setTitle } = useTransactionContext();
 
   const aaveEModeTransactionsFactory = useMemo(() => {
@@ -20,21 +22,33 @@ export const useAaveSetUserEMode = () => {
 
   const handleSetUserEMode = useCallback(
     async (category: EModeCategory, opts?: TransactionFactoryOptions) => {
-      if (!aaveEModeTransactionsFactory) {
-        return;
-      }
+      try {
+        if (!aaveEModeTransactionsFactory) {
+          throw new Error('Transactions factory not available');
+        }
 
-      setTransactions(
-        await aaveEModeTransactionsFactory.setUserEMode(category, opts),
-      );
-      setTitle(
-        t(translations.aavePage.tx.setUserEModeTitle, {
-          category: category.label,
-        }),
-      );
-      setIsOpen(true);
+        const transactions = await aaveEModeTransactionsFactory.setUserEMode(
+          category,
+          opts,
+        );
+        setTransactions(transactions);
+        setTitle(
+          t(translations.aavePage.tx.setUserEModeTitle, {
+            category: category.label,
+          }),
+        );
+        setIsOpen(true);
+      } catch (e) {
+        notifyError(e);
+      }
     },
-    [setIsOpen, setTitle, setTransactions, aaveEModeTransactionsFactory],
+    [
+      setIsOpen,
+      setTitle,
+      setTransactions,
+      aaveEModeTransactionsFactory,
+      notifyError,
+    ],
   );
 
   const handleDisableUserEMode = useCallback(
@@ -43,11 +57,22 @@ export const useAaveSetUserEMode = () => {
         return;
       }
 
-      setTransactions(await aaveEModeTransactionsFactory.disableEMode(opts));
-      setTitle(t(translations.aavePage.tx.disableEModeTitle));
-      setIsOpen(true);
+      aaveEModeTransactionsFactory
+        .disableEMode(opts)
+        .then(txs => {
+          setTransactions(txs);
+          setTitle(t(translations.aavePage.tx.disableEModeTitle));
+          setIsOpen(true);
+        })
+        .catch(notifyError);
     },
-    [aaveEModeTransactionsFactory, setIsOpen, setTitle, setTransactions],
+    [
+      aaveEModeTransactionsFactory,
+      setIsOpen,
+      setTitle,
+      setTransactions,
+      notifyError,
+    ],
   );
 
   return { handleSetUserEMode, handleDisableUserEMode };
diff --git a/apps/frontend/src/hooks/aave/useAaveSupply.tsx b/apps/frontend/src/hooks/aave/useAaveSupply.tsx
index b6c604114..7a952382e 100644
--- a/apps/frontend/src/hooks/aave/useAaveSupply.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveSupply.tsx
@@ -3,18 +3,22 @@ import { useCallback, useMemo } from 'react';
 import { BigNumber } from 'ethers';
 import { t } from 'i18next';
 
-import { AssetDetailsData } from '@sovryn/contracts';
+import { getAssetData } from '@sovryn/contracts';
 import { Decimal } from '@sovryn/utils';
 
+import { BOB_CHAIN_ID } from '../../config/chains';
+
 import { config } from '../../constants/aave';
 import { useTransactionContext } from '../../contexts/TransactionContext';
 import { translations } from '../../locales/i18n';
 import { TransactionFactoryOptions } from '../../types/aave';
 import { AaveSupplyTransactionsFactory } from '../../utils/aave/AaveSupplyTransactionsFactory';
 import { useAccount } from '../useAccount';
+import { useNotifyError } from '../useNotifyError';
 
 export const useAaveSupply = () => {
   const { signer } = useAccount();
+  const { notifyError } = useNotifyError();
   const { setTransactions, setIsOpen, setTitle } = useTransactionContext();
 
   const aaveSupplyTransactionsFactory = useMemo(() => {
@@ -29,46 +33,73 @@ export const useAaveSupply = () => {
   const handleDeposit = useCallback(
     async (
       amount: Decimal,
-      asset: AssetDetailsData,
+      symbol: string,
       opts?: TransactionFactoryOptions,
     ) => {
-      if (!aaveSupplyTransactionsFactory) {
-        return;
-      }
-      const bnAmount = BigNumber.from(
-        amount.mul(Decimal.from(10).pow(asset.decimals)).toString(),
-      );
+      try {
+        if (!aaveSupplyTransactionsFactory) {
+          throw new Error('Transactions factory not available');
+        }
+
+        const asset = await getAssetData(symbol, BOB_CHAIN_ID);
+        const bnAmount = BigNumber.from(
+          amount.mul(Decimal.from(10).pow(asset.decimals)).toString(),
+        );
 
-      setTransactions(
-        await aaveSupplyTransactionsFactory.supply(asset, bnAmount, opts),
-      );
-      setTitle(t(translations.common.deposit));
-      setIsOpen(true);
+        const transactions = await aaveSupplyTransactionsFactory.supply(
+          asset,
+          bnAmount,
+          opts,
+        );
+        setTransactions(transactions);
+        setTitle(t(translations.common.deposit));
+        setIsOpen(true);
+      } catch (e) {
+        notifyError(e);
+      }
     },
-    [setIsOpen, setTitle, setTransactions, aaveSupplyTransactionsFactory],
+    [
+      setIsOpen,
+      setTitle,
+      setTransactions,
+      aaveSupplyTransactionsFactory,
+      notifyError,
+    ],
   );
 
   const handleSwitchCollateral = useCallback(
     async (
-      asset: AssetDetailsData,
+      symbol: string,
       useAsCollateral: boolean,
       opts?: TransactionFactoryOptions,
     ) => {
-      if (!aaveSupplyTransactionsFactory) {
-        return;
-      }
+      try {
+        if (!aaveSupplyTransactionsFactory) {
+          throw new Error('Transactions factory not available');
+        }
 
-      setTransactions(
-        await aaveSupplyTransactionsFactory.collateralSwitch(
-          asset,
-          useAsCollateral,
-          opts,
-        ),
-      );
-      setTitle(t(translations.aavePage.tx.toggleAssetAsCollateral));
-      setIsOpen(true);
+        const asset = await getAssetData(symbol, BOB_CHAIN_ID);
+        const transactions =
+          await aaveSupplyTransactionsFactory.collateralSwitch(
+            asset,
+            useAsCollateral,
+            opts,
+          );
+
+        setTransactions(transactions);
+        setTitle(t(translations.aavePage.tx.toggleAssetAsCollateral));
+        setIsOpen(true);
+      } catch (e) {
+        notifyError(e);
+      }
     },
-    [setIsOpen, setTitle, setTransactions, aaveSupplyTransactionsFactory],
+    [
+      setIsOpen,
+      setTitle,
+      setTransactions,
+      aaveSupplyTransactionsFactory,
+      notifyError,
+    ],
   );
 
   return { handleDeposit, handleSwitchCollateral };
diff --git a/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx b/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx
index 8ab64e3c1..858eed1d8 100644
--- a/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx
@@ -21,6 +21,7 @@ export const useAaveUserReservesData = (): {
   reservesData: ReservesDataHumanized | undefined;
   userReservesData: UserReservesData | undefined;
   timestamp: number;
+  loading: boolean;
 } => {
   const { account, provider } = useAccount();
   const { value: blockNumber } = useBlockNumber();
@@ -31,6 +32,7 @@ export const useAaveUserReservesData = (): {
   const [summary, setSummary] = useState<AaveUserReservesSummary>(
     AaveUserReservesSummaryFactory.buildZeroSummary([]),
   );
+  const [loading, setLoading] = useState(false);
 
   const uiPoolDataProvider = useMemo(
     () =>
@@ -49,38 +51,48 @@ export const useAaveUserReservesData = (): {
       return null;
     }
 
-    const [reservesData, userReservesData] = await Promise.all([
-      uiPoolDataProvider.getReservesHumanized({
-        lendingPoolAddressProvider: config.PoolAddressesProviderAddress,
-      }),
-      uiPoolDataProvider.getUserReservesHumanized({
-        lendingPoolAddressProvider: config.PoolAddressesProviderAddress,
-        user: account,
-      }),
-    ]);
-    const currentTimestamp = dayjs().unix();
+    try {
+      const [reservesData, userReservesData] = await Promise.all([
+        uiPoolDataProvider.getReservesHumanized({
+          lendingPoolAddressProvider: config.PoolAddressesProviderAddress,
+        }),
+        uiPoolDataProvider.getUserReservesHumanized({
+          lendingPoolAddressProvider: config.PoolAddressesProviderAddress,
+          user: account,
+        }),
+      ]);
+      const currentTimestamp = dayjs().unix();
 
-    setReservesData(reservesData);
-    setUserReservesData(userReservesData);
-    setTimeStamp(currentTimestamp);
+      setReservesData(reservesData);
+      setUserReservesData(userReservesData);
+      setTimeStamp(currentTimestamp);
 
-    setSummary(
-      await AaveUserReservesSummaryFactory.buildSummary({
-        provider,
-        account,
-        reservesData,
-        userReservesData,
-        currentTimestamp,
-      }),
-    );
-    setProcessedBlock(blockNumber);
+      setSummary(
+        await AaveUserReservesSummaryFactory.buildSummary({
+          provider,
+          account,
+          reservesData,
+          userReservesData,
+          currentTimestamp,
+        }),
+      );
+      setProcessedBlock(blockNumber);
+    } catch (e) {
+      console.error(e);
+    }
   }, [account, uiPoolDataProvider, blockNumber, provider]);
 
   useEffect(() => {
     if (blockNumber !== processedBlock) {
-      loadUserReservesData();
+      setLoading(true);
+      loadUserReservesData().finally(() => setLoading(false));
     }
   }, [loadUserReservesData, processedBlock, blockNumber]);
 
-  return { summary, reservesData, userReservesData, timestamp };
+  useEffect(() => {
+    setLoading(true);
+    setProcessedBlock(undefined);
+  }, [account]);
+
+  return { summary, reservesData, userReservesData, timestamp, loading };
 };
diff --git a/apps/frontend/src/hooks/aave/useAaveWithdraw.tsx b/apps/frontend/src/hooks/aave/useAaveWithdraw.tsx
index 89fef327a..f394bc80e 100644
--- a/apps/frontend/src/hooks/aave/useAaveWithdraw.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveWithdraw.tsx
@@ -3,17 +3,22 @@ import { useCallback, useMemo } from 'react';
 import { BigNumber } from 'ethers';
 import { t } from 'i18next';
 
-import { AssetDetailsData } from '@sovryn/contracts';
+import { getAssetData } from '@sovryn/contracts';
 import { Decimal } from '@sovryn/utils';
 
+import { BOB_CHAIN_ID } from '../../config/chains';
+
 import { config } from '../../constants/aave';
 import { useTransactionContext } from '../../contexts/TransactionContext';
 import { translations } from '../../locales/i18n';
+import { TransactionFactoryOptions } from '../../types/aave';
 import { AaveWithdrawTransactionsFactory } from '../../utils/aave/AaveWithdrawTransactionsFactory';
 import { useAccount } from '../useAccount';
+import { useNotifyError } from '../useNotifyError';
 
 export const useAaveWithdraw = () => {
   const { signer } = useAccount();
+  const { notifyError } = useNotifyError();
   const { setTransactions, setIsOpen, setTitle } = useTransactionContext();
 
   const aaveWithdrawTransactionsFactory = useMemo(() => {
@@ -26,21 +31,43 @@ export const useAaveWithdraw = () => {
   }, [signer]);
 
   const handleWithdraw = useCallback(
-    async (amount: Decimal, asset: AssetDetailsData) => {
-      if (!aaveWithdrawTransactionsFactory) {
-        return;
+    async (
+      amount: Decimal,
+      symbol: string,
+      isMaxAmount: boolean,
+      opts?: TransactionFactoryOptions,
+    ) => {
+      try {
+        if (!aaveWithdrawTransactionsFactory) {
+          throw new Error('Transactions factory not available');
+        }
+
+        const asset = await getAssetData(symbol, BOB_CHAIN_ID);
+        const bnAmount = BigNumber.from(
+          amount.mul(Decimal.from(10).pow(asset.decimals)).toString(),
+        );
+
+        const transactions = await aaveWithdrawTransactionsFactory.withdraw(
+          asset,
+          bnAmount,
+          isMaxAmount,
+          opts,
+        );
+
+        setTransactions(transactions);
+        setTitle(t(translations.common.withdraw));
+        setIsOpen(true);
+      } catch (e) {
+        notifyError(e);
       }
-      const bnAmount = BigNumber.from(
-        amount.mul(Decimal.from(10).pow(asset.decimals)).toString(),
-      );
-
-      setTransactions(
-        await aaveWithdrawTransactionsFactory.withdraw(asset, bnAmount),
-      );
-      setTitle(t(translations.common.withdraw));
-      setIsOpen(true);
     },
-    [setIsOpen, setTitle, setTransactions, aaveWithdrawTransactionsFactory],
+    [
+      setIsOpen,
+      setTitle,
+      setTransactions,
+      aaveWithdrawTransactionsFactory,
+      notifyError,
+    ],
   );
 
   return { handleWithdraw };
diff --git a/apps/frontend/src/hooks/useNotifyError.tsx b/apps/frontend/src/hooks/useNotifyError.tsx
new file mode 100644
index 000000000..1e8fed183
--- /dev/null
+++ b/apps/frontend/src/hooks/useNotifyError.tsx
@@ -0,0 +1,28 @@
+import { useCallback } from 'react';
+
+import { t } from 'i18next';
+import { nanoid } from 'nanoid';
+
+import { NotificationType } from '@sovryn/ui';
+
+import { useNotificationContext } from '../contexts/NotificationContext';
+import { translations } from '../locales/i18n';
+
+export const useNotifyError = () => {
+  const { addNotification } = useNotificationContext();
+
+  const notifyError = useCallback(
+    (error: Error) => {
+      addNotification({
+        type: NotificationType.error,
+        title: t(translations.common.somethingWentWrong),
+        content: error.message,
+        dismissible: true,
+        id: nanoid(),
+      });
+    },
+    [addNotification],
+  );
+
+  return { notifyError };
+};
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index 5a4d4c1bb..defa959b7 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -73,7 +73,8 @@
             "withdrawal": "Withdrawal"
         },
         "learnMore": "Learn more",
-        "invalidAmountError": "Exceeds maximum amount"
+        "invalidAmountError": "Exceeds maximum amount",
+        "somethingWentWrong": "Something went wrong, please try again"
     },
     "connectWalletButton": {
         "connect": "Get started",
@@ -833,7 +834,8 @@
             "disableEModeTitle": "Disable E-Mode",
             "disableEModeSubtitle": "Disable E-Mode",
             "swapBorrowRateModeTitle": "Swap borrow rate mode",
-            "swapBorrowRateModeSubtitle": "Swap borrow rate mode for {{symbol}} to {{mode}}"
+            "swapBorrowRateModeSubtitle": "Swap borrow rate mode for {{symbol}} to {{mode}}",
+            "somethingWentWrong": "Something went wrong, please try again"
         },
         "eMode": {
             "availableAssets": "Available assets",
@@ -919,7 +921,8 @@
             "collateralization": "Collateralization",
             "lendApy": "Lend APY",
             "deposit": "Deposit",
-            "enabled": "Enabled"
+            "enabled": "Enabled",
+            "disabled": "Disabled"
         },
         "eModeCard": {
             "title": "Efficiency mode (E-Mode)",
diff --git a/apps/frontend/src/utils/aave/AaveBorrowTransactionsFactory.ts b/apps/frontend/src/utils/aave/AaveBorrowTransactionsFactory.ts
index 1def81b0e..59b3a6d71 100644
--- a/apps/frontend/src/utils/aave/AaveBorrowTransactionsFactory.ts
+++ b/apps/frontend/src/utils/aave/AaveBorrowTransactionsFactory.ts
@@ -9,6 +9,7 @@ import {
   Transaction,
   TransactionType,
 } from '../../app/3_organisms/TransactionStepDialog/TransactionStepDialog.types';
+import { config } from '../../constants/aave';
 import { translations } from '../../locales/i18n';
 import { BorrowRateMode, TransactionFactoryOptions } from '../../types/aave';
 
@@ -53,8 +54,12 @@ export class AaveBorrowTransactionsFactory {
     rateMode: BorrowRateMode,
     opts?: TransactionFactoryOptions,
   ): Promise<Transaction[]> {
-    if (asset.isNative) return this.borrowNative(amount, rateMode, opts);
-    else return this.borrowToken(asset, amount, rateMode, opts);
+    if (
+      asset.isNative ||
+      asset.address.toLowerCase() === config.WETHAddress.toLowerCase()
+    ) {
+      return this.borrowNative(amount, rateMode, opts);
+    } else return this.borrowToken(asset, amount, rateMode, opts);
   }
 
   async swapBorrowRateMode(
diff --git a/apps/frontend/src/utils/aave/AaveCalculations.ts b/apps/frontend/src/utils/aave/AaveCalculations.ts
index 391509699..4d9b692b6 100644
--- a/apps/frontend/src/utils/aave/AaveCalculations.ts
+++ b/apps/frontend/src/utils/aave/AaveCalculations.ts
@@ -39,10 +39,10 @@ export class AaveCalculations {
   }
 
   static computeBorrowPower(
-    availableBorrowsUSD: Decimal,
-    borrowedBalance: Decimal,
+    minCollateralRatio: Decimal,
+    collateralBalance: Decimal,
   ) {
-    return Decimal.from(availableBorrowsUSD).add(borrowedBalance);
+    return Decimal.from(collateralBalance).div(minCollateralRatio);
   }
 
   static computeBorrowPowerUsed(
diff --git a/apps/frontend/src/utils/aave/AaveRepayTransactionsFactory.ts b/apps/frontend/src/utils/aave/AaveRepayTransactionsFactory.ts
index 05f8e3522..a81ae21d7 100644
--- a/apps/frontend/src/utils/aave/AaveRepayTransactionsFactory.ts
+++ b/apps/frontend/src/utils/aave/AaveRepayTransactionsFactory.ts
@@ -9,6 +9,7 @@ import {
   Transaction,
   TransactionType,
 } from '../../app/3_organisms/TransactionStepDialog/TransactionStepDialog.types';
+import { config } from '../../constants/aave';
 import { translations } from '../../locales/i18n';
 import { BorrowRateMode, TransactionFactoryOptions } from '../../types/aave';
 import { prepareApproveTransaction } from '../transactions';
@@ -42,16 +43,23 @@ export class AaveRepayTransactionsFactory {
   async repay(
     token: AssetDetailsData,
     amount: BigNumber,
+    isEntireDebt: boolean,
     borrowRateMode: BorrowRateMode,
     opts?: TransactionFactoryOptions,
   ): Promise<Transaction[]> {
-    if (token.isNative) return this.repayNative(amount, borrowRateMode, opts);
-    else return this.repayToken(token, amount, borrowRateMode, opts);
+    if (
+      token.isNative ||
+      token.address.toLowerCase() === config.WETHAddress.toLowerCase()
+    ) {
+      return this.repayNative(amount, isEntireDebt, borrowRateMode, opts);
+    } else
+      return this.repayToken(token, amount, isEntireDebt, borrowRateMode, opts);
   }
 
   private async repayToken(
     asset: AssetDetailsData,
     amount: BigNumber,
+    isEntireDebt: boolean,
     borrowRateMode: BorrowRateMode,
     opts?: TransactionFactoryOptions,
   ): Promise<Transaction[]> {
@@ -59,7 +67,7 @@ export class AaveRepayTransactionsFactory {
       spender: this.PoolAddress,
       token: asset.symbol,
       contract: new Contract(asset.address, asset.abi, this.signer),
-      amount: amount,
+      amount: constants.MaxUint256,
       chain: BOB_CHAIN_ID,
     });
     const transactions: Transaction[] = approval ? [approval] : [];
@@ -76,7 +84,7 @@ export class AaveRepayTransactionsFactory {
         type: TransactionType.signTransaction,
         args: [
           asset.address,
-          amount.toString(),
+          isEntireDebt ? constants.MaxUint256.toString() : amount.toString(),
           borrowRateMode,
           await this.signer.getAddress(),
         ],
@@ -92,6 +100,7 @@ export class AaveRepayTransactionsFactory {
 
   private async repayNative(
     amount: BigNumber,
+    isEntireDebt: boolean,
     borrowRateMode: BorrowRateMode,
     opts?: TransactionFactoryOptions,
   ): Promise<Transaction[]> {
@@ -99,6 +108,7 @@ export class AaveRepayTransactionsFactory {
       constants.AddressZero,
       BOB_CHAIN_ID,
     );
+    amount = isEntireDebt ? amount.add('1000000') : amount;
 
     return [
       {
diff --git a/apps/frontend/src/utils/aave/AaveSupplyTransactionsFactory.ts b/apps/frontend/src/utils/aave/AaveSupplyTransactionsFactory.ts
index a3e0ea17b..09c017444 100644
--- a/apps/frontend/src/utils/aave/AaveSupplyTransactionsFactory.ts
+++ b/apps/frontend/src/utils/aave/AaveSupplyTransactionsFactory.ts
@@ -9,6 +9,7 @@ import {
   Transaction,
   TransactionType,
 } from '../../app/3_organisms/TransactionStepDialog/TransactionStepDialog.types';
+import { config } from '../../constants/aave';
 import { translations } from '../../locales/i18n';
 import { TransactionFactoryOptions } from '../../types/aave';
 import { prepareApproveTransaction } from '../transactions';
@@ -45,8 +46,12 @@ export class AaveSupplyTransactionsFactory {
     amount: BigNumber,
     opts?: TransactionFactoryOptions,
   ): Promise<Transaction[]> {
-    if (token.isNative) return this.supplyNative(amount, opts);
-    else return this.supplyToken(token, amount, opts);
+    if (
+      token.isNative ||
+      token.address.toLowerCase() === config.WETHAddress.toLowerCase()
+    ) {
+      return this.supplyNative(amount, opts);
+    } else return this.supplyToken(token, amount, opts);
   }
 
   async collateralSwitch(
@@ -54,6 +59,8 @@ export class AaveSupplyTransactionsFactory {
     useAsCollateral: boolean,
     opts?: TransactionFactoryOptions,
   ): Promise<Transaction[]> {
+    const tokenAddress = token.isNative ? config.WETHAddress : token.address;
+
     return [
       {
         title: useAsCollateral
@@ -72,7 +79,7 @@ export class AaveSupplyTransactionsFactory {
             }),
         request: {
           type: TransactionType.signTransaction,
-          args: [token.address, useAsCollateral],
+          args: [tokenAddress, useAsCollateral],
           contract: this.Pool,
           fnName: 'setUserUseReserveAsCollateral',
         },
diff --git a/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts b/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
index b8b5a7c69..c8636a817 100644
--- a/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
+++ b/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
@@ -16,6 +16,7 @@ import { Decimal } from '@sovryn/utils';
 
 import { BOB_CHAIN_ID } from '../../config/chains';
 
+import { config } from '../../constants/aave';
 import { Reserve } from '../../hooks/aave/useAaveReservesData';
 import { BorrowRateMode, UserReservesData } from '../../types/aave';
 import { decimalic, fromWei } from '../math';
@@ -159,8 +160,8 @@ export class AaveUserReservesSummaryFactory {
       userSummary.currentLiquidationThreshold,
     );
     const borrowPower = AaveCalculations.computeBorrowPower(
-      Decimal.from(userSummary.availableBorrowsUSD),
-      borrowBalance,
+      config.MinCollateralRatio,
+      collateralBalance,
     );
     const borrowPowerUsed = AaveCalculations.computeBorrowPowerUsed(
       borrowBalance,
@@ -197,27 +198,28 @@ export class AaveUserReservesSummaryFactory {
 
       reserves: await Promise.all(
         userSummary.userReservesData.map(async r => {
-          const asset = await getAssetData(r.reserve.symbol, BOB_CHAIN_ID);
+          const symbol = r.reserve.symbol === 'WETH' ? 'ETH' : r.reserve.symbol;
+          const asset = await getAssetData(symbol, BOB_CHAIN_ID);
           const balance = await getBalance(asset, account, provider);
           const decimalBalance = decimalic(fromWei(balance, asset.decimals));
 
-          const availableToBorrow = borrowPower.div(r.reserve.priceInUSD);
-
           return {
-            asset: r.reserve.symbol,
-            reserve: r.reserve,
+            asset: symbol,
+            reserve: { ...r.reserve, symbol },
 
             walletBalance: decimalBalance,
             walletBalanceUsd: decimalBalance.mul(r.reserve.priceInUSD),
             collateral: r.usageAsCollateralEnabledOnUser,
+
             supplied: Decimal.from(r.underlyingBalance),
             suppliedUSD: Decimal.from(r.underlyingBalanceUSD),
             borrowed: Decimal.from(r.totalBorrows),
             borrowedUSD: Decimal.from(r.totalBorrowsUSD),
+            availableToBorrow: borrowPower.div(r.reserve.priceInUSD),
+
             borrowRateMode: Decimal.from(r.variableBorrows).gt(0)
               ? BorrowRateMode.VARIABLE
               : BorrowRateMode.STABLE,
-            availableToBorrow,
           };
         }),
       ),
diff --git a/apps/frontend/src/utils/aave/AaveWithdrawTransactionsFactory.ts b/apps/frontend/src/utils/aave/AaveWithdrawTransactionsFactory.ts
index 238c561a8..f599ff522 100644
--- a/apps/frontend/src/utils/aave/AaveWithdrawTransactionsFactory.ts
+++ b/apps/frontend/src/utils/aave/AaveWithdrawTransactionsFactory.ts
@@ -1,4 +1,4 @@
-import { BigNumber, Contract, ethers } from 'ethers';
+import { BigNumber, constants, Contract, ethers } from 'ethers';
 import { t } from 'i18next';
 
 import { AssetDetailsData, getAssetData } from '@sovryn/contracts';
@@ -9,6 +9,7 @@ import {
   Transaction,
   TransactionType,
 } from '../../app/3_organisms/TransactionStepDialog/TransactionStepDialog.types';
+import { config } from '../../constants/aave';
 import { translations } from '../../locales/i18n';
 import { TransactionFactoryOptions } from '../../types/aave';
 import { prepareApproveTransaction } from '../transactions';
@@ -38,15 +39,21 @@ export class AaveWithdrawTransactionsFactory {
   async withdraw(
     token: AssetDetailsData,
     amount: BigNumber,
+    isMaxAmount: boolean,
     opts?: TransactionFactoryOptions,
   ): Promise<Transaction[]> {
-    if (token.isNative) return this.withdrawNative(amount, opts);
-    else return this.withdrawToken(token, amount, opts);
+    if (
+      token.isNative ||
+      token.address.toLowerCase() === config.WETHAddress.toLowerCase()
+    ) {
+      return this.withdrawNative(amount, isMaxAmount, opts);
+    } else return this.withdrawToken(token, amount, isMaxAmount, opts);
   }
 
   private async withdrawToken(
     asset: AssetDetailsData,
     amount: BigNumber,
+    isMaxAmount: boolean,
     opts?: TransactionFactoryOptions,
   ): Promise<Transaction[]> {
     return [
@@ -62,7 +69,7 @@ export class AaveWithdrawTransactionsFactory {
           type: TransactionType.signTransaction,
           args: [
             asset.address,
-            amount.toString(),
+            isMaxAmount ? constants.MaxUint256.toString() : amount.toString(),
             await this.signer.getAddress(),
           ],
           contract: this.Pool,
@@ -75,6 +82,7 @@ export class AaveWithdrawTransactionsFactory {
 
   private async withdrawNative(
     amount: BigNumber,
+    isMaxAmount: boolean,
     opts?: TransactionFactoryOptions,
   ): Promise<Transaction[]> {
     const aWETH = await getAssetData('aWETH', BOB_CHAIN_ID);
@@ -83,7 +91,7 @@ export class AaveWithdrawTransactionsFactory {
       spender: this.WETHGatewayAddress,
       token: aWETH.symbol,
       contract: new Contract(aWETH.address, aWETH.abi, this.signer),
-      amount: amount,
+      amount: constants.MaxUint256,
       chain: BOB_CHAIN_ID,
     });
     const transactions: Transaction[] = approval ? [approval] : [];
@@ -100,7 +108,7 @@ export class AaveWithdrawTransactionsFactory {
         type: TransactionType.signTransaction,
         args: [
           this.PoolAddress,
-          amount.toString(),
+          isMaxAmount ? constants.MaxUint256.toString() : amount.toString(),
           await this.signer.getAddress(),
         ],
         contract: this.WETHGateway,
diff --git a/packages/contracts/src/contracts/assets/bobTestnet.ts b/packages/contracts/src/contracts/assets/bobTestnet.ts
index 8050427bb..66d40ff66 100644
--- a/packages/contracts/src/contracts/assets/bobTestnet.ts
+++ b/packages/contracts/src/contracts/assets/bobTestnet.ts
@@ -42,7 +42,7 @@ export const bobTestnet: Array<AssetDetails> = [
   },
   {
     symbol: 'DAI',
-    address: '0x4e4e256D3a9789329AB540a7a3b2cd0c03C40431',
+    address: '0xcb913C75362A7Fd39de6A5DDE4341F370F5B4419',
     name: 'DAI Stablecoin',
     decimals: 18,
     getIcon: async () => (await import('./icons/bob/dai')).default,
@@ -56,7 +56,7 @@ export const bobTestnet: Array<AssetDetails> = [
   },
   {
     symbol: 'USDC',
-    address: '0x509AeFe02953BC2fB8abCa53Fd83C94D86c05922',
+    address: '0x14E986C4a733B555c317D95Fe0FC5bFB5a7D166C',
     name: 'USD Coin',
     decimals: 18,
     getIcon: async () => (await import('./icons/bob/usdc')).default,
@@ -84,16 +84,14 @@ export const bobTestnet: Array<AssetDetails> = [
   },
   {
     symbol: 'aWETH',
-    // TODO: properly adjust this variable
-    address: '0x1b57354f10EFc441803639F74E9624CcA6Ab7abA',
+    address: '0xe2B24ff36891017CeB3D9CDc20d576276BE1959C',
     name: 'Aave Wrapped ETH',
     decimals: 18,
     getIcon: async () => (await import('./icons/bob/eth')).default,
   },
   {
     symbol: 'WETH',
-    // TODO: properly adjust this variable
-    address: '0x936EA1bCF82Fbc1Dbe24c6AA140f136A7De15C2E',
+    address: '0x8CEc2719a2e896A11eA3f10406EfDb6Ad87281D9',
     name: 'Wrapped ETH',
     decimals: 18,
     getIcon: async () => (await import('./icons/bob/eth')).default,
diff --git a/packages/ethers-provider/src/chains.ts b/packages/ethers-provider/src/chains.ts
index e6e2f4d38..ec0412100 100644
--- a/packages/ethers-provider/src/chains.ts
+++ b/packages/ethers-provider/src/chains.ts
@@ -6,7 +6,7 @@ export enum ChainIds {
   BSC_MAINNET = '0x38',
   BSC_TESTNET = '0x61',
   BOB_MAINNET = '0xed88', // 60808
-  BOB_TESTNET = '0x6f', // 111
+  BOB_TESTNET = '0xc576d', // 808813
   /** @deprecated */
   ROPSTEN = '0x3',
   // forks
diff --git a/packages/sdex/src/constants.ts b/packages/sdex/src/constants.ts
index 2373cefca..ed5bbee82 100644
--- a/packages/sdex/src/constants.ts
+++ b/packages/sdex/src/constants.ts
@@ -64,7 +64,7 @@ const BOB_CHAIN: ChainSpec = {
 };
 
 const BOB_TESTNET_CHAIN: ChainSpec = {
-  nodeUrl: 'https://testnet.rpc.gobob.xyz',
+  nodeUrl: 'https://bob-sepolia.rpc.gobob.xyz',
   // wsUrl: 'wss://sepolia-dencun.rpc.gobob.xyz/wss',
   addrs: {
     dex: '0xA86F239490bd35923eCBD578C2A8989803294bee',
@@ -75,7 +75,7 @@ const BOB_TESTNET_CHAIN: ChainSpec = {
   },
   poolIndex: 36000,
   isTestNet: true,
-  chainId: '0x6f', // 111
+  chainId: '0xc576d', // 808813
   gridSize: 16,
   proxyPaths: {
     cold: 3,
diff --git a/yarn.lock b/yarn.lock
index 374dea6da..b6125fd33 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10045,7 +10045,7 @@ chart.js@4.1.1:
   dependencies:
     "@kurkle/color" "^0.3.0"
 
-chartjs-adapter-date-fns@^3.0.0:
+chartjs-adapter-date-fns@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-3.0.0.tgz#c25f63c7f317c1f96f9a7c44bd45eeedb8a478e5"
   integrity sha512-Rs3iEB3Q5pJ973J93OBTpnP7qoGwvq3nUnoMdtxO+9aoJof7UFcRbWcIDteXuYd1fgAvct/32T9qaLyLuZVwCg==

From 8deb00a51a5a91f159c8b8ab9469d0fd281c9b1e Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Thu, 5 Sep 2024 16:46:27 +0300
Subject: [PATCH 075/116] Fixes UI (#35)

* cleanup

* fixes

* fixes. Connect provider. Fix repay adding proper allowance. Fix switch collateral token.address instead of token

* refetch user data based on blocknumber

* fix modal closing on lending positions change plus style adjustments

* fix withdraw modals

* modal fixes

* fix calculation
add balances and filter zero balances

* use memo items

* fix dependencies

* data normalizers

* Apply suggestions from code review

Co-authored-by: Juan <juandahl@users.noreply.github.com>

* Update apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx

Co-authored-by: Juan <juandahl@users.noreply.github.com>

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

Co-authored-by: Juan <juandahl@users.noreply.github.com>

* wip refactor done. Missing hooks merge

* implementations and cleanup

* cleanup

* cleanup

* math safety

* more math safety

* cleanup

* clenaup

* emode mocks

* enable emode working

* emode working

* fixes and cleanup

* remove whitelist

* toggle lend mode working

* fixes and cleanup

* add collateral check

* fix collateral

* fixes

* Fix. Missing fix on borrow.

* fix borrow power to match desired collateral ratio

* rollback to working contracts for borrow eth

* fixes

* fixes and max amount

* loading when account changes

* close emode on complete

* disable emode if just one category

* error handling

* SAF-59, SAF-58, SAF-60, SAF-61, SAF-57

* limit by liquidity

* fix

* feat(network): change to new sepolia (#36)

* fixes

---------

Co-authored-by: Juan <juandahl@users.noreply.github.com>
---
 .../app/5_pages/AavePage/AavePage.utils.tsx   |  5 +++-
 .../BorrowAssetsList.constants.tsx            |  5 +++-
 .../BorrowAssetAction/BorrowAssetAction.tsx   |  7 +++--
 .../BorrowAssetDetails/BorrowAssetDetails.tsx |  5 +++-
 .../BorrowPositionsList.tsx                   |  4 +++
 .../BorrowPositionAction.tsx                  |  2 +-
 .../EfficiencyModeCard/EfficiencyModeCard.tsx |  4 ++-
 .../LendAssetsList.constants.tsx              |  5 +++-
 .../LendAssetAction/LendAssetAction.tsx       | 11 ++++++--
 .../LendAssetDetails/LendAssetDetails.tsx     |  5 +++-
 .../LendPositionsList/LendPositionsList.tsx   |  1 +
 .../LendPositionAction/LendPositionAction.tsx |  2 +-
 .../src/app/5_pages/BorrowPage/BorrowPage.tsx | 20 ++-----------
 .../components/BorrowFrame/BorrrowFrame.tsx   | 23 +++++++++++++++
 apps/frontend/src/constants/aave.ts           |  1 -
 .../src/hooks/aave/useAaveReservesData.tsx    | 27 ++++++++----------
 .../hooks/aave/useAaveUserReservesData.tsx    | 28 ++++++++++---------
 .../frontend/src/locales/en/translations.json |  8 ++++--
 .../src/utils/aave/AaveUserReservesSummary.ts |  9 +++++-
 19 files changed, 110 insertions(+), 62 deletions(-)
 create mode 100644 apps/frontend/src/app/5_pages/BorrowPage/components/BorrowFrame/BorrrowFrame.tsx

diff --git a/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx b/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
index ca5011d4f..0f09428db 100644
--- a/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
@@ -74,7 +74,10 @@ export function normalizeBorrowPoolDetails(
         acc.push({
           asset: r.symbol,
           apy: Decimal.from(r.variableBorrowAPY).mul(100),
-          available: userReservesSummary.borrowPower.div(r.priceInUSD),
+          available:
+            userReservesSummary.reserves.find(
+              userReserve => r.symbol === userReserve.asset,
+            )?.availableToBorrow || Decimal.from(0),
           availableUSD: userReservesSummary.borrowPower,
         });
       }
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
index fc6f6b3db..424c039f7 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
@@ -79,7 +79,10 @@ export const COLUMNS_CONFIG = (onBorrowClick: (asset: string) => void) => [
     align: Align.center,
     title: ' ',
     cellRenderer: (pool: BorrowPoolDetails) => (
-      <BorrowAssetAction onBorrowClick={() => onBorrowClick(pool.asset)} />
+      <BorrowAssetAction
+        disabled={!pool.available || pool.available.eq(0)}
+        onBorrowClick={() => onBorrowClick(pool.asset)}
+      />
     ),
   },
 ];
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
index 94444fded..3a62a5bbd 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
@@ -11,23 +11,26 @@ const pageTranslations = translations.aavePage;
 
 type BorrowAssetActionProps = {
   onBorrowClick: () => void;
+  disabled: boolean;
 };
 
 export const BorrowAssetAction: FC<BorrowAssetActionProps> = ({
   onBorrowClick,
+  disabled,
 }) => {
   const navigate = useNavigate();
 
   return (
     <div className="flex items-center justify-center lg:justify-end space-x-2">
       <Button
-        className="flex-grow"
+        disabled={disabled}
+        className="flex-grow lg:flex-grow-0 lg:w-min"
         text={t(pageTranslations.common.borrow)}
         onClick={onBorrowClick}
       />
 
       <Button
-        className="flex-grow"
+        className="flex-grow lg:flex-grow-0 lg:w-min"
         text={t(pageTranslations.common.details)}
         style={ButtonStyle.secondary}
         onClick={() => navigate('/aave/reserve-overview')}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
index 37ef83178..0f2ffe18c 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
@@ -51,6 +51,9 @@ export const BorrowAssetDetails: FC<BorrowAssetDetailsProps> = ({
       />
     </div>
 
-    <BorrowAssetAction onBorrowClick={onBorrowClick} />
+    <BorrowAssetAction
+      disabled={!pool.available || pool.available.eq(0)}
+      onBorrowClick={onBorrowClick}
+    />
   </div>
 );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
index 422f4d77c..8903daa54 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
@@ -112,12 +112,16 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = ({
             />
             <PoolPositionStat
               label={t(pageTranslations.common.apy)}
+              labelInfo={t(pageTranslations.borrowPositionsList.apyInfo)}
               value={borrowWeightedApy}
               suffix="%"
               precision={2}
             />
             <PoolPositionStat
               label={t(pageTranslations.borrowPositionsList.borrowPowerUsed)}
+              labelInfo={t(
+                pageTranslations.borrowPositionsList.borrowPowerUsedInfo,
+              )}
               value={borrowPowerUsed}
               suffix="%"
               precision={2}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionAction/BorrowPositionAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionAction/BorrowPositionAction.tsx
index c2c358f14..b629b9a13 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionAction/BorrowPositionAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionAction/BorrowPositionAction.tsx
@@ -16,7 +16,7 @@ export const BorrowPositionAction: FC<BorrowPositionActionProps> = ({
   <div className="flex items-center justify-center lg:justify-end space-x-2">
     <Button
       style={ButtonStyle.secondary}
-      className="flex-grow"
+      className="flex-grow lg:flex-grow-0 lg:w-min"
       text={t(translations.aavePage.borrowPositionsList.repay)}
       onClick={onRepayClick}
     />
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx
index 9bdb44395..82d1a9079 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx
@@ -84,7 +84,9 @@ export const EfficiencyModeCard: FC<EfficiencyModeCardProps> = ({
                         className="text-success"
                         size={20}
                       />
-                      <span className="font-medium text-xs">Enabled</span>
+                      <Paragraph className="font-medium text-xs">
+                        {t(translations.common.enabled)}
+                      </Paragraph>
                     </div>
                   </div>
                 </div>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
index 823282578..a00b9a6cc 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
@@ -88,7 +88,10 @@ export const COLUMNS_CONFIG = (onLendClick: (asset: string) => unknown) => [
     align: Align.center,
     title: ' ',
     cellRenderer: (pool: LendPoolDetails) => (
-      <LendAssetAction onLendClick={() => onLendClick(pool.asset)} />
+      <LendAssetAction
+        disabled={pool.walletBalance.eq(0)}
+        onLendClick={() => onLendClick(pool.asset)}
+      />
     ),
   },
 ];
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
index fd9669155..dabc964ce 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
@@ -8,22 +8,27 @@ import { Button, ButtonStyle } from '@sovryn/ui';
 import { translations } from '../../../../../../../locales/i18n';
 
 type LendAssetActionProps = {
+  disabled: boolean;
   onLendClick: () => void;
 };
 
-export const LendAssetAction: FC<LendAssetActionProps> = ({ onLendClick }) => {
+export const LendAssetAction: FC<LendAssetActionProps> = ({
+  disabled,
+  onLendClick,
+}) => {
   const navigate = useNavigate();
 
   return (
     <div className="flex items-center justify-center lg:justify-end space-x-2">
       <Button
-        className="flex-grow"
+        disabled={disabled}
+        className="flex-grow lg:flex-grow-0 lg:w-min"
         text={t(translations.aavePage.common.lend)}
         onClick={onLendClick}
       />
 
       <Button
-        className="flex-grow"
+        className="flex-grow lg:flex-grow-0 lg:w-min"
         text={t(translations.aavePage.common.details)}
         style={ButtonStyle.secondary}
         onClick={() => navigate('/aave/reserve-overview')}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
index 08e01c502..6775fa165 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
@@ -54,6 +54,9 @@ export const LendAssetDetails: FC<LendAssetDetailsProps> = ({
       />
     </div>
 
-    <LendAssetAction onLendClick={onLendClick} />
+    <LendAssetAction
+      disabled={pool.walletBalance.eq(0)}
+      onLendClick={onLendClick}
+    />
   </div>
 );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
index 0af177b59..98229eb9f 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
@@ -105,6 +105,7 @@ export const LendPositionsList: FC<LendPositionsListProps> = ({
             />
             <PoolPositionStat
               label={t(pageTranslations.common.collateral)}
+              labelInfo={t(pageTranslations.common.collateralInfo)}
               value={collateralBalance}
               prefix="$"
               precision={2}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
index fe8044f4e..3b1c98047 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
@@ -17,7 +17,7 @@ export const LendPositionAction: FC<LendPositionActionProps> = ({
     <div className="flex items-center justify-center lg:justify-end space-x-2">
       <Button
         style={ButtonStyle.secondary}
-        className="flex-grow"
+        className="flex-grow lg:flex-grow-0 lg:w-min"
         text={t(translations.common.buttons.withdraw)}
         onClick={onWithdrawClick}
       />
diff --git a/apps/frontend/src/app/5_pages/BorrowPage/BorrowPage.tsx b/apps/frontend/src/app/5_pages/BorrowPage/BorrowPage.tsx
index 1f7d2e7ea..65e7cb266 100644
--- a/apps/frontend/src/app/5_pages/BorrowPage/BorrowPage.tsx
+++ b/apps/frontend/src/app/5_pages/BorrowPage/BorrowPage.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { FC } from 'react';
 
 import { t } from 'i18next';
 import { Helmet } from 'react-helmet-async';
@@ -8,22 +8,11 @@ import { Heading, Paragraph, ParagraphSize } from '@sovryn/ui';
 import { BOB_CHAIN_ID, RSK_CHAIN_ID } from '../../../config/chains';
 
 import { NetworkSwitch } from '../../2_molecules/NetworkSwitch/NetworkSwitch';
-import { useAccount } from '../../../hooks/useAccount';
 import { translations } from '../../../locales/i18n';
 import AavePage from '../AavePage/AavePage';
-import { BorrowAssetsTable } from './components/BorrowAssetsTable/BorrowAssetsTable';
-import { OpenLoansTable } from './components/OpenLoansTable/OpenLoansTable';
-import { useGetOpenLoans } from './components/OpenLoansTable/hooks/useGetOpenLoans';
+import { BorrowFrame } from './components/BorrowFrame/BorrrowFrame';
 
 const BorrowPage: FC = () => {
-  const { account } = useAccount();
-  const { data: loans, loading } = useGetOpenLoans();
-
-  const hasOpenLoans = useMemo(
-    () => loans?.length > 0 && account,
-    [loans, account],
-  );
-
   return (
     <>
       <Helmet>
@@ -47,10 +36,7 @@ const BorrowPage: FC = () => {
                 </Paragraph>
 
                 <div className="w-full">
-                  {hasOpenLoans && (
-                    <OpenLoansTable loans={loans} loading={loading} />
-                  )}
-                  <BorrowAssetsTable />
+                  <BorrowFrame />
                 </div>
               </>
             ),
diff --git a/apps/frontend/src/app/5_pages/BorrowPage/components/BorrowFrame/BorrrowFrame.tsx b/apps/frontend/src/app/5_pages/BorrowPage/components/BorrowFrame/BorrrowFrame.tsx
new file mode 100644
index 000000000..93b14fe06
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/BorrowPage/components/BorrowFrame/BorrrowFrame.tsx
@@ -0,0 +1,23 @@
+import React, { FC, useMemo } from 'react';
+
+import { useAccount } from '../../../../../hooks/useAccount';
+import { BorrowAssetsTable } from '../BorrowAssetsTable/BorrowAssetsTable';
+import { OpenLoansTable } from '../OpenLoansTable/OpenLoansTable';
+import { useGetOpenLoans } from '../OpenLoansTable/hooks/useGetOpenLoans';
+
+export const BorrowFrame: FC = () => {
+  const { account } = useAccount();
+  const { data: loans, loading } = useGetOpenLoans();
+
+  const hasOpenLoans = useMemo(
+    () => loans?.length > 0 && account,
+    [loans, account],
+  );
+
+  return (
+    <>
+      {hasOpenLoans && <OpenLoansTable loans={loans} loading={loading} />}
+      <BorrowAssetsTable />
+    </>
+  );
+};
diff --git a/apps/frontend/src/constants/aave.ts b/apps/frontend/src/constants/aave.ts
index 95626ff6b..9b8e943e7 100644
--- a/apps/frontend/src/constants/aave.ts
+++ b/apps/frontend/src/constants/aave.ts
@@ -1,7 +1,6 @@
 import { decimalic } from '../utils/math';
 
 export const config = {
-  chainId: 808813,
   MinCollateralRatio: decimalic(1.5),
   PoolAddress: '0xFbdc7303cc2046Ff6c340F94F71aB01517b42476',
   WETHGatewayAddress: '0x50ff0B7a3e7af6F896CA81aF2E563814Eee7A3c0',
diff --git a/apps/frontend/src/hooks/aave/useAaveReservesData.tsx b/apps/frontend/src/hooks/aave/useAaveReservesData.tsx
index 402a24f6f..b9155411c 100644
--- a/apps/frontend/src/hooks/aave/useAaveReservesData.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveReservesData.tsx
@@ -8,28 +8,27 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import dayjs from 'dayjs';
 
+import { getProvider } from '@sovryn/ethers-provider';
+
+import { BOB_CHAIN_ID } from '../../config/chains';
+
 import { config } from '../../constants/aave';
-import { useAccount } from '../useAccount';
 
 export type Reserve = ReserveDataHumanized & FormatReserveUSDResponse;
-
 export type ReserveData = { reserves: Reserve[]; loading: boolean };
 
 export const useAaveReservesData = (): ReserveData => {
-  const { provider } = useAccount();
   const [reserves, setReserves] = useState<Reserve[]>([]);
   const [loading, setLoading] = useState(false);
 
   const uiPoolDataProvider = useMemo(
     () =>
-      provider
-        ? new UiPoolDataProvider({
-            provider,
-            uiPoolDataProviderAddress: config.UiPoolDataProviderV3Address,
-            chainId: config.chainId,
-          })
-        : null,
-    [provider],
+      new UiPoolDataProvider({
+        provider: getProvider(BOB_CHAIN_ID),
+        uiPoolDataProviderAddress: config.UiPoolDataProviderV3Address,
+        chainId: Number(BOB_CHAIN_ID),
+      }),
+    [],
   );
 
   const fetchReservesData = useCallback(
@@ -58,10 +57,8 @@ export const useAaveReservesData = (): ReserveData => {
   );
 
   useEffect(() => {
-    if (uiPoolDataProvider) {
-      setLoading(true);
-      fetchReservesData(uiPoolDataProvider).finally(() => setLoading(false));
-    }
+    setLoading(true);
+    fetchReservesData(uiPoolDataProvider).finally(() => setLoading(false));
   }, [uiPoolDataProvider, fetchReservesData]);
 
   return { reserves, loading };
diff --git a/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx b/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx
index 858eed1d8..80de09b8a 100644
--- a/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx
@@ -7,6 +7,10 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import dayjs from 'dayjs';
 
+import { getProvider } from '@sovryn/ethers-provider';
+
+import { BOB_CHAIN_ID } from '../../config/chains';
+
 import { config } from '../../constants/aave';
 import { UserReservesData } from '../../types/aave';
 import {
@@ -23,7 +27,7 @@ export const useAaveUserReservesData = (): {
   timestamp: number;
   loading: boolean;
 } => {
-  const { account, provider } = useAccount();
+  const { account } = useAccount();
   const { value: blockNumber } = useBlockNumber();
   const [processedBlock, setProcessedBlock] = useState<number | undefined>();
   const [timestamp, setTimeStamp] = useState<number>(0);
@@ -36,18 +40,16 @@ export const useAaveUserReservesData = (): {
 
   const uiPoolDataProvider = useMemo(
     () =>
-      provider
-        ? new UiPoolDataProvider({
-            provider,
-            uiPoolDataProviderAddress: config.UiPoolDataProviderV3Address,
-            chainId: config.chainId,
-          })
-        : null,
-    [provider],
+      new UiPoolDataProvider({
+        provider: getProvider(BOB_CHAIN_ID),
+        uiPoolDataProviderAddress: config.UiPoolDataProviderV3Address,
+        chainId: Number(BOB_CHAIN_ID),
+      }),
+    [],
   );
 
   const loadUserReservesData = useCallback(async () => {
-    if (!account || !provider || !uiPoolDataProvider || !blockNumber) {
+    if (!account || !blockNumber) {
       return null;
     }
 
@@ -69,7 +71,7 @@ export const useAaveUserReservesData = (): {
 
       setSummary(
         await AaveUserReservesSummaryFactory.buildSummary({
-          provider,
+          provider: getProvider(BOB_CHAIN_ID),
           account,
           reservesData,
           userReservesData,
@@ -80,7 +82,7 @@ export const useAaveUserReservesData = (): {
     } catch (e) {
       console.error(e);
     }
-  }, [account, uiPoolDataProvider, blockNumber, provider]);
+  }, [account, uiPoolDataProvider, blockNumber]);
 
   useEffect(() => {
     if (blockNumber !== processedBlock) {
@@ -91,7 +93,7 @@ export const useAaveUserReservesData = (): {
 
   useEffect(() => {
     setLoading(true);
-    setProcessedBlock(undefined);
+    setProcessedBlock(-1);
   }, [account]);
 
   return { summary, reservesData, userReservesData, timestamp, loading };
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index defa959b7..cc44fef38 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -52,6 +52,7 @@
         "btc": "BTC",
         "eth": "ETH",
         "usd": "USD",
+        "enabled": "Enabled",
         "tx": {
             "signPermitTitle": "Permit {{symbol}}",
             "signPermitSubtitle": "Sign a permit to allow the contract to spend your {{symbol}}",
@@ -796,10 +797,11 @@
             "connectWallet": "Connect wallet to see the available data",
             "asset": "Asset",
             "collateral": "Collateral",
+            "collateralInfo": "The total amount of your assets denominated in USD that can be used as collateral for borrowing assets.",
             "collateralRatio": "Collateral ratio",
             "balance": "Balance",
             "apy": "APY",
-            "apyInfo": "Compounding interest accrued by deposit or borrow on the lending pool",
+            "apyInfo": "Compounding interest accrued by deposit or borrowing on the lending pool",
             "apyType": "APY type",
             "apyTypeInfo": "Variable interest rate will fluctuate based on the market conditions. Recommended for short-term positions.",
             "apr": "APR",
@@ -868,9 +870,11 @@
             "title": "Your loans",
             "repay": "Repay",
             "borrowPowerUsed": "Borrow power used",
+            "borrowPowerUsedInfo": "The % of your total borrowing power used. This is based on the amount of your collateral supplied and the total amount that you can borrow.",
             "eMode": "E-Mode",
             "selectVariableApy": "APY, variable {{apy}}",
-            "selectStableApy": "APY, stable {{apy}}"
+            "selectStableApy": "APY, stable {{apy}}",
+            "apyInfo": "The weighted average of APY for all borrowed assets, including incentives."
         },
         "borrowAssetsList": {
             "title": "Assets to borrow",
diff --git a/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts b/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
index c8636a817..9c51c2caa 100644
--- a/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
+++ b/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
@@ -10,6 +10,7 @@ import {
 } from '@aave/math-utils';
 
 import { BigNumber, ethers } from 'ethers';
+import { formatUnits } from 'ethers/lib/utils';
 
 import { AssetDetailsData, getAssetData } from '@sovryn/contracts';
 import { Decimal } from '@sovryn/utils';
@@ -202,6 +203,10 @@ export class AaveUserReservesSummaryFactory {
           const asset = await getAssetData(symbol, BOB_CHAIN_ID);
           const balance = await getBalance(asset, account, provider);
           const decimalBalance = decimalic(fromWei(balance, asset.decimals));
+          const canBorrow = borrowPower.div(r.reserve.priceInUSD);
+          const availableLiquidity = Decimal.from(
+            formatUnits(r.reserve.availableLiquidity, r.reserve.decimals),
+          );
 
           return {
             asset: symbol,
@@ -215,7 +220,9 @@ export class AaveUserReservesSummaryFactory {
             suppliedUSD: Decimal.from(r.underlyingBalanceUSD),
             borrowed: Decimal.from(r.totalBorrows),
             borrowedUSD: Decimal.from(r.totalBorrowsUSD),
-            availableToBorrow: borrowPower.div(r.reserve.priceInUSD),
+            availableToBorrow: availableLiquidity.lt(canBorrow)
+              ? availableLiquidity
+              : canBorrow,
 
             borrowRateMode: Decimal.from(r.variableBorrows).gt(0)
               ? BorrowRateMode.VARIABLE

From faa3d5a791ac187ca6d69a0d673370f5706de398 Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Thu, 5 Sep 2024 16:51:55 +0300
Subject: [PATCH 076/116] Saf 20/pool details integration topbar (#40)

* cleanup

* fixes

* fixes. Connect provider. Fix repay adding proper allowance. Fix switch collateral token.address instead of token

* refetch user data based on blocknumber

* fix modal closing on lending positions change plus style adjustments

* fix withdraw modals

* modal fixes

* fix calculation
add balances and filter zero balances

* use memo items

* fix dependencies

* data normalizers

* Apply suggestions from code review

Co-authored-by: Juan <juandahl@users.noreply.github.com>

* Update apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx

Co-authored-by: Juan <juandahl@users.noreply.github.com>

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

Co-authored-by: Juan <juandahl@users.noreply.github.com>

* wip refactor done. Missing hooks merge

* implementations and cleanup

* cleanup

* cleanup

* math safety

* more math safety

* cleanup

* clenaup

* emode mocks

* enable emode working

* emode working

* fixes and cleanup

* remove whitelist

* toggle lend mode working

* fixes and cleanup

* add collateral check

* fix collateral

* fixes

* Fix. Missing fix on borrow.

* fix borrow power to match desired collateral ratio

* rollback to working contracts for borrow eth

* fixes

* fixes and max amount

* loading when account changes

* close emode on complete

* disable emode if just one category

* error handling

* fixes. Connect provider. Fix repay adding proper allowance. Fix switch collateral token.address instead of token

* refetch user data based on blocknumber

* fix calculation
add balances and filter zero balances

* [SAF-20] wip testing rates data from contract Reserve Rate Strategy

* [SAF-20] wip integrating useAaveRates hook

* connect topbar

* tokens links

* add link to oracle

---------

Co-authored-by: Juan <juandahl@users.noreply.github.com>
Co-authored-by: Luciano Perez Cerra <luchopcerra@gmail.com>
---
 .../BorrowAssetsList.constants.tsx            |   1 +
 .../BorrowAssetAction/BorrowAssetAction.tsx   |   4 +-
 .../BorrowAssetDetails/BorrowAssetDetails.tsx |   1 +
 .../LendAssetsList.constants.tsx              |   1 +
 .../LendAssetAction/LendAssetAction.tsx       |   4 +-
 .../LendAssetDetails/LendAssetDetails.tsx     |   1 +
 .../AaveReserveOverviewPage.tsx               |  66 ++-
 .../InterestRateModelGraph.tsx                |  82 +--
 .../components/Chart/Chart.constants.ts       |  23 -
 .../components/Chart/Chart.tsx                | 105 +++-
 .../components/TopPanel/TopPanel.tsx          | 164 ++++--
 .../components/TopPanel/TopPanel.utils.tsx    |  14 +
 .../ReserveTokens/ReserveTokens.tsx           |  84 +++
 .../components/TokenButton/TokenButton.tsx    |  35 ++
 ...ReserveStrategy-rateStrategyStableOne.json | 505 ++++++++++++++++++
 apps/frontend/src/hooks/aave/constants.ts     |   1 +
 apps/frontend/src/hooks/aave/useAaveRates.tsx | 149 ++++++
 .../frontend/src/locales/en/translations.json |   8 +-
 18 files changed, 1118 insertions(+), 130 deletions(-)
 create mode 100644 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.utils.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/components/ReserveTokens/ReserveTokens.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/components/ReserveTokens/components/TokenButton/TokenButton.tsx
 create mode 100644 apps/frontend/src/hooks/aave/ReserveStrategy-rateStrategyStableOne.json
 create mode 100644 apps/frontend/src/hooks/aave/constants.ts
 create mode 100644 apps/frontend/src/hooks/aave/useAaveRates.tsx

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
index 424c039f7..a4a4a7235 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
@@ -82,6 +82,7 @@ export const COLUMNS_CONFIG = (onBorrowClick: (asset: string) => void) => [
       <BorrowAssetAction
         disabled={!pool.available || pool.available.eq(0)}
         onBorrowClick={() => onBorrowClick(pool.asset)}
+        asset={pool.asset}
       />
     ),
   },
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
index 3a62a5bbd..b0c4b40c1 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
@@ -11,11 +11,13 @@ const pageTranslations = translations.aavePage;
 
 type BorrowAssetActionProps = {
   onBorrowClick: () => void;
+  asset: string;
   disabled: boolean;
 };
 
 export const BorrowAssetAction: FC<BorrowAssetActionProps> = ({
   onBorrowClick,
+  asset,
   disabled,
 }) => {
   const navigate = useNavigate();
@@ -33,7 +35,7 @@ export const BorrowAssetAction: FC<BorrowAssetActionProps> = ({
         className="flex-grow lg:flex-grow-0 lg:w-min"
         text={t(pageTranslations.common.details)}
         style={ButtonStyle.secondary}
-        onClick={() => navigate('/aave/reserve-overview')}
+        onClick={() => navigate(`/aave/reserve-overview?asset=${asset}`)}
       />
     </div>
   );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
index 0f2ffe18c..c087ba1c6 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
@@ -54,6 +54,7 @@ export const BorrowAssetDetails: FC<BorrowAssetDetailsProps> = ({
     <BorrowAssetAction
       disabled={!pool.available || pool.available.eq(0)}
       onBorrowClick={onBorrowClick}
+      asset={pool.asset}
     />
   </div>
 );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
index a00b9a6cc..93d23297f 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
@@ -91,6 +91,7 @@ export const COLUMNS_CONFIG = (onLendClick: (asset: string) => unknown) => [
       <LendAssetAction
         disabled={pool.walletBalance.eq(0)}
         onLendClick={() => onLendClick(pool.asset)}
+        asset={pool.asset}
       />
     ),
   },
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
index dabc964ce..40e189e71 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
@@ -10,9 +10,11 @@ import { translations } from '../../../../../../../locales/i18n';
 type LendAssetActionProps = {
   disabled: boolean;
   onLendClick: () => void;
+  asset: string;
 };
 
 export const LendAssetAction: FC<LendAssetActionProps> = ({
+  asset,
   disabled,
   onLendClick,
 }) => {
@@ -31,7 +33,7 @@ export const LendAssetAction: FC<LendAssetActionProps> = ({
         className="flex-grow lg:flex-grow-0 lg:w-min"
         text={t(translations.aavePage.common.details)}
         style={ButtonStyle.secondary}
-        onClick={() => navigate('/aave/reserve-overview')}
+        onClick={() => navigate(`/aave/reserve-overview?asset=${asset}`)}
       />
     </div>
   );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
index 6775fa165..0bc9c1b20 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
@@ -57,6 +57,7 @@ export const LendAssetDetails: FC<LendAssetDetailsProps> = ({
     <LendAssetAction
       disabled={pool.walletBalance.eq(0)}
       onLendClick={onLendClick}
+      asset={pool.asset}
     />
   </div>
 );
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
index 1c9418098..55f11a7b2 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
@@ -1,17 +1,21 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useMemo, useState } from 'react';
 
 import classNames from 'classnames';
 import { t } from 'i18next';
 import { Helmet } from 'react-helmet-async';
+import { useSearchParams } from 'react-router-dom';
 
 import { Paragraph, Tabs, TabSize, TabType } from '@sovryn/ui';
+import { Decimal } from '@sovryn/utils';
 
+import { useAaveInterestRatesData } from '../../../hooks/aave/useAaveRates';
+import { useAaveReservesData } from '../../../hooks/aave/useAaveReservesData';
 import { translations } from '../../../locales/i18n';
 import { BorrowDetailsGraph } from './components/BorrowDetailsGraph/BorrowDetailsGraph';
 import { EModeDetails } from './components/EModeDetails/EModeDetails';
 import { InterestRateModelGraph } from './components/InterestRateModelGraph/InterestRateModelGraph';
 import { SupplyDetailsGraph } from './components/SupplyDetailsGraph/SupplyDetailsGraph';
-import { TopPanel } from './components/TopPanel/TopPanel';
+import { ReserveOverview, TopPanel } from './components/TopPanel/TopPanel';
 import { WalletOverview } from './components/WalletOverview/WalletOverview';
 
 const pageTranslations = translations.aaveReserveOverviewPage;
@@ -22,19 +26,65 @@ enum OverviewTab {
 }
 
 const AaveReserveOverviewPage: FC = () => {
-  const [asset] = useState({ symbol: 'BTC', name: 'Bitcoin' }); // TODO: mock
+  const [searchParams] = useSearchParams();
+  const symbol = searchParams.get('asset') || 'ETH';
+  const { reserves } = useAaveReservesData();
+  const { data: interestRatesData } = useAaveInterestRatesData();
   const [activeOverviewTab, setActiveOverviewTab] = useState<OverviewTab>(
     OverviewTab.RESERVE,
   );
 
+  const reserve = useMemo(
+    () => reserves.find(r => r.symbol.toLowerCase() === symbol.toLowerCase()),
+    [reserves, symbol],
+  );
+
+  const reserveOverview: ReserveOverview = useMemo(() => {
+    if (!reserve) {
+      return {
+        symbol,
+        name: symbol,
+        underlyingAsset: '',
+        aTokenAddress: '',
+        variableDebtTokenAddress: '',
+        stableDebtTokenAddress: '',
+        reserveSize: Decimal.from(0),
+        availableLiquidity: Decimal.from(0),
+        utilizationRate: Decimal.from(0),
+        oraclePrice: Decimal.from(0),
+        oracleAddress: '',
+      };
+    }
+
+    return {
+      symbol: reserve.symbol,
+      name: reserve.name,
+      underlyingAsset: reserve.underlyingAsset,
+      aTokenAddress: reserve.aTokenAddress,
+      variableDebtTokenAddress: reserve.variableDebtTokenAddress,
+      stableDebtTokenAddress: reserve.stableDebtTokenAddress,
+      reserveSize: Decimal.from(reserve?.availableLiquidityUSD ?? 0).add(
+        reserve?.totalDebtUSD ?? 0,
+      ),
+      availableLiquidity: Decimal.from(reserve.availableLiquidityUSD),
+      utilizationRate: Decimal.from(reserve.borrowUsageRatio),
+      oraclePrice: Decimal.from(reserve.priceInUSD),
+      oracleAddress: reserve.priceOracle,
+    };
+  }, [reserve, symbol]);
+
   return (
     <div className="w-full pb-6 2xl:px-12">
       <Helmet>
         <title>{t(pageTranslations.meta.title)}</title>
       </Helmet>
 
-      <TopPanel asset={asset} className="lg:mb-[110px] lg:mt-[52px]" />
-      <Paragraph className="text-base mb-4">
+      <TopPanel
+        reserve={reserveOverview}
+        className="lg:mb-[110px] lg:mt-[52px]"
+      />
+
+      <Paragraph className="text-base mb-4 hidden lg:block">
         {t(pageTranslations.reserveStatusTab.fullTitle)}
       </Paragraph>
 
@@ -70,7 +120,9 @@ const AaveReserveOverviewPage: FC = () => {
             <SupplyDetailsGraph />
             <BorrowDetailsGraph />
             <EModeDetails />
-            <InterestRateModelGraph />
+            {interestRatesData && (
+              <InterestRateModelGraph rates={interestRatesData} />
+            )}
           </div>
 
           {/* wallet column */}
@@ -80,7 +132,7 @@ const AaveReserveOverviewPage: FC = () => {
               'lg:block space-y-4 w-[450px] shrink-0',
             )}
           >
-            <WalletOverview asset={asset} />
+            <WalletOverview asset={{ symbol: 'btc', name: 'bitcoin' }} />
           </div>
         </div>
       </div>
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
index 3e75d41ad..db244de56 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useMemo, useState } from 'react';
+import React, { FC, useState } from 'react';
 
 import { t } from 'i18next';
 
@@ -7,33 +7,28 @@ import { Accordion, Link } from '@sovryn/ui';
 
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
+import { IRatesDataResult } from '../../../../../hooks/aave/useAaveRates';
 import { useIsMobile } from '../../../../../hooks/useIsMobile';
 import { translations } from '../../../../../locales/i18n';
 import { Chart } from './components/Chart/Chart';
-import { harcodedData } from './components/Chart/Chart.constants';
-import { MockData } from './components/Chart/Chart.types';
 
 const pageTranslations = translations.aaveReserveOverviewPage.interestRateModel;
 
-export const InterestRateModelGraph: FC = () => {
-  const [open, setOpen] = useState(true);
+type InterestRateModelGraphProps = {
+  rates: IRatesDataResult;
+};
+
+export const InterestRateModelGraph: FC<InterestRateModelGraphProps> = ({
+  rates,
+}) => {
+  const [open, setOpen] = useState<boolean>(true);
   const { isMobile } = useIsMobile();
 
-  // TODO: mocked amounts
-  const mockData: MockData<{ x: number; y: number }> = useMemo(() => {
-    const data = harcodedData.values;
-    const currentData = harcodedData.annotations.current;
-    const optimalData = harcodedData.annotations.optimal;
+  const meta = {
+    label: t(pageTranslations.chart.label1),
+    lineColor: theme.colors['primary-30'],
+  };
 
-    return {
-      data1: data,
-      data2: currentData,
-      data3: optimalData,
-      label1: t(pageTranslations.chart.label1),
-      lineColor: theme.colors['primary-30'],
-      xLabels: data.map(() => ''),
-    };
-  }, []);
   return (
     <Accordion
       label={
@@ -48,29 +43,36 @@ export const InterestRateModelGraph: FC = () => {
       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={5.94} suffix="%" />}
-          />
-          <Link href="#" text={t(pageTranslations.interestRateStrategy)} />
-        </div>
+      {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}
+                  suffix="%"
+                />
+              }
+            />
+            <Link href="#" text={t(pageTranslations.interestRateStrategy)} />
+          </div>
 
-        <Chart mockData={mockData} yLabel1="" />
-        {/* statistics */}
-        <div className="flex gap-8">
-          <StatisticsCard
-            label={t(pageTranslations.reserveFactor)}
-            help={t(pageTranslations.reserveFactorInfo)}
-            value={<AmountRenderer value={85.94} 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={85.94} suffix="%" />}
+            />
+            <StatisticsCard
+              label={t(pageTranslations.collectorContract)}
+              value={<Link href="#" text={t(pageTranslations.viewContract)} />}
+            />
+          </div>
         </div>
-      </div>
+      )}
     </Accordion>
   );
 };
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.constants.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.constants.ts
index 241c37c9b..b5fc9efd5 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.constants.ts
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.constants.ts
@@ -20,26 +20,3 @@ export const CUSTOM_CANVAS_BACKGROUND_COLOR = {
     ctx.restore();
   },
 };
-
-export const harcodedData = {
-  values: [
-    { x: 0, y: 0 }, // Start of the curve
-    { x: 10, y: 1 }, // Small increase
-    { x: 20, y: 2 }, // Gradual increase
-    { x: 30, y: 3 }, // Gradual increase
-    { x: 40, y: 5 }, // Gradual increase
-    { x: 60, y: 9 }, // Steeper increase
-    { x: 92, y: 15 }, // Significant rise, matching the 78.64% mark
-    { x: 100, y: 100 }, // Sharp rise at the 92% mark
-  ],
-  annotations: {
-    current: [
-      { x: 78.64, y: 0 },
-      { x: 78.64, y: 50 }, // Point at the origin for the line to the x-axis
-    ],
-    optimal: [
-      { x: 92, y: 0 },
-      { x: 92, y: 70 }, // Point at the origin for the line to the x-axis
-    ],
-  },
-};
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
index aa372e47f..f2050954e 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
@@ -1,27 +1,80 @@
-import React, { FC, useCallback, useEffect, useRef } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useRef } from 'react';
 
 import ChartLibrary from 'chart.js/auto';
 import 'chartjs-adapter-date-fns';
 
 import { theme } from '@sovryn/tailwindcss-config';
 
+import { IRatesDataResult } from '../../../../../../../hooks/aave/useAaveRates';
 import {
   CUSTOM_CANVAS_BACKGROUND_COLOR,
   GRID_COLOR,
   TICK_COLOR,
 } from './Chart.constants';
-import { MockData } from './Chart.types';
 import { htmlLegendPlugin } from './Chart.utils';
 
 type ChartProps = {
-  mockData: MockData<{ x: number; y: number }>;
-  yLabel1: string;
+  meta: {
+    label: string;
+    lineColor: string;
+  };
+  rates: IRatesDataResult;
 };
 
-export const Chart: FC<ChartProps> = ({ mockData }) => {
+const calcInterestRateModel = (
+  u: number,
+  base: number,
+  optimal: number,
+  slope1: number,
+  slope2: number,
+) => {
+  if (u === 0) return 0;
+
+  if (u <= optimal) return base + (u / optimal) * slope1;
+
+  return base + slope1 + ((u - optimal) / (1 - optimal)) * slope2;
+};
+
+const calcVariableInterestRateModel = (u: number, rates: IRatesDataResult) => {
+  const base = parseFloat(rates.baseVariableBorrowRate);
+  const optimal = parseFloat(rates.optimalUsageRatio);
+  const slope1 = parseFloat(rates.variableRateSlope1);
+  const slope2 = parseFloat(rates.variableRateSlope2);
+
+  return calcInterestRateModel(u, base, optimal, slope1, slope2);
+};
+const CHART_PERCENTAGES = [0, 0.25, 0.5, 0.75, 1];
+
+export const Chart: FC<ChartProps> = ({ meta, rates }) => {
   const canvas = useRef<HTMLCanvasElement>(null);
   const chartRef = useRef<ChartLibrary | null>(null);
 
+  const variableValues = useMemo(
+    () =>
+      CHART_PERCENTAGES.map(x => ({
+        x: x * 100,
+        y: calcVariableInterestRateModel(x, rates) * 100,
+      })),
+    [rates],
+  );
+
+  const optimalPercentage = parseFloat(rates.optimalUsageRatio) * 100;
+  const currentPercentage = parseFloat(rates.currentUsageRatio) * 100;
+
+  const optimalValue = useMemo(() => {
+    return [
+      { x: optimalPercentage, y: 0 },
+      { x: optimalPercentage, y: 75 },
+    ];
+  }, [optimalPercentage]);
+
+  const currentValue = useMemo(() => {
+    return [
+      { x: currentPercentage, y: 0 },
+      { x: currentPercentage, y: 75 },
+    ];
+  }, [currentPercentage]);
+
   useEffect(() => {
     if (chartRef.current) {
       chartRef.current.destroy();
@@ -34,34 +87,34 @@ export const Chart: FC<ChartProps> = ({ mockData }) => {
     chartRef.current = new ChartLibrary(canvas.current, {
       type: 'line',
       data: {
-        labels: ['0%', '50%', '100%'],
+        labels: ['0 %', '25 %', '50 %', '75 %', '100 %'],
         datasets: [
           {
             type: 'line',
-            label: mockData.label1,
-            data: mockData.data1,
-            backgroundColor: mockData.lineColor,
-            borderColor: mockData.lineColor,
+            label: meta.label,
+            data: variableValues,
+            backgroundColor: meta.lineColor,
+            borderColor: meta.lineColor,
             borderWidth: 2,
             fill: false,
             pointRadius: 0,
           },
           {
-            label: 'Current 78.64%',
+            label: `Optimal ${optimalPercentage}%`,
             type: 'scatter',
-            data: mockData.data2,
-            borderColor: theme.colors.positive,
-            backgroundColor: theme.colors.positive,
+            data: optimalValue,
+            borderColor: theme.colors.success,
+            backgroundColor: theme.colors.success,
             showLine: true,
             borderDash: [1, 2],
             pointRadius: 0,
           },
           {
-            label: 'Optimal 92%',
+            label: `Current ${currentPercentage}%`,
             type: 'scatter',
-            data: mockData.data3,
-            borderColor: theme.colors.success,
-            backgroundColor: theme.colors.success,
+            data: currentValue,
+            borderColor: theme.colors.positive,
+            backgroundColor: theme.colors.positive,
             showLine: true,
             borderDash: [1, 2],
             pointRadius: 0,
@@ -79,8 +132,7 @@ export const Chart: FC<ChartProps> = ({ mockData }) => {
               callback: function (value) {
                 return value + '%';
               },
-              maxTicksLimit: 5,
-              align: 'center',
+              //maxTicksLimit: 5,
             },
           },
           y: {
@@ -101,9 +153,7 @@ export const Chart: FC<ChartProps> = ({ mockData }) => {
             },
           },
         },
-        layout: {
-          padding: 20,
-        },
+        responsive: true,
         plugins: {
           legend: {
             display: false,
@@ -118,7 +168,14 @@ export const Chart: FC<ChartProps> = ({ mockData }) => {
         chartRef.current.destroy();
       }
     };
-  }, [mockData]);
+  }, [
+    meta,
+    variableValues,
+    currentPercentage,
+    optimalPercentage,
+    optimalValue,
+    currentValue,
+  ]);
 
   const stopPropagation = useCallback(
     (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
index 416736aa5..c4240d299 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
@@ -1,32 +1,88 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback, useMemo } from 'react';
 
 import classNames from 'classnames';
 import { t } from 'i18next';
 
-import { Heading, Icon, IconNames, Paragraph, ParagraphSize } from '@sovryn/ui';
+import {
+  Heading,
+  Icon,
+  IconNames,
+  Paragraph,
+  ParagraphSize,
+  Tooltip,
+  TooltipPlacement,
+  TooltipTrigger,
+} from '@sovryn/ui';
+import { Decimal } from '@sovryn/utils';
+
+import { BOB_CHAIN_ID } from '../../../../../config/chains';
 
 import { WalletIcon } from '../../../../1_atoms/Icons/Icons';
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
 import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
+import { useNotifyError } from '../../../../../hooks/useNotifyError';
 import { translations } from '../../../../../locales/i18n';
+import { getBobExplorerUrl } from '../../../../../utils/helpers';
+import { formatUsdAmount } from './TopPanel.utils';
+import { ReserveTokens } from './components/ReserveTokens/ReserveTokens';
 
 const pageTranslations = translations.aaveReserveOverviewPage.topPanel;
 
+export type ReserveOverview = {
+  symbol: string;
+  name: string;
+  underlyingAsset: string;
+  aTokenAddress: string;
+  variableDebtTokenAddress: string;
+  stableDebtTokenAddress: string;
+  reserveSize: Decimal;
+  availableLiquidity: Decimal;
+  utilizationRate: Decimal;
+  oraclePrice: Decimal;
+  oracleAddress: string;
+};
+
 type TopPanelProps = {
-  asset: {
-    name: string;
-    symbol: string;
-  };
+  reserve: ReserveOverview;
   className?: string;
 };
 
-export const TopPanel: FC<TopPanelProps> = ({ asset, className }) => {
-  // TODO: Mocked data
-  const reserveSizeInM = 1234.58;
-  const availableLiquidityM = 1234.58;
-  const utilizationRate = 2.79;
-  const oraclePrice = 11.5;
+export const TopPanel: FC<TopPanelProps> = ({ reserve, className }) => {
+  const { notifyError } = useNotifyError();
+
+  const openInExplorer = useCallback((tokenAddress: string) => {
+    const explorer = getBobExplorerUrl();
+    window.open(`${explorer}/address/${tokenAddress}`, '_blank');
+  }, []);
+
+  const addToWallet = useCallback(
+    (token: string) => {
+      try {
+        if (!(window as any)?.ethereum) {
+          throw new Error('Wallet not available');
+        }
+
+        (window as any)?.ethereum.request({
+          method: 'wallet_watchAsset',
+          params: {
+            type: 'ERC20',
+            options: {
+              chainId: BOB_CHAIN_ID,
+              address: token,
+            },
+          },
+        });
+      } catch (error) {
+        notifyError(error);
+      }
+    },
+    [notifyError],
+  );
+
+  const oracleLink = useMemo(() => {
+    return getBobExplorerUrl() + '/address/' + reserve.oracleAddress;
+  }, [reserve.oracleAddress]);
 
   return (
     <div className={classNames('w-full flex flex-col gap-6', className)}>
@@ -39,31 +95,73 @@ export const TopPanel: FC<TopPanelProps> = ({ asset, className }) => {
         </Paragraph>
       </div>
 
-      <div className="gap-6 lg:gap-9 flex-shrink-0 grid grid-cols-2 lg:flex max-w-3xl">
+      <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-1">
             <AssetRenderer
-              asset={asset.symbol}
+              asset={reserve.symbol}
+              chainId={BOB_CHAIN_ID}
               showAssetLogo
               assetClassName="text-base"
               logoClassName="[&>svg]:h-8 [&>svg]:w-8 [&>svg]:mr-[10px]"
             />
             <span className="text-gray-40 text-base font-medium">
-              {asset.name}
+              {reserve.name}
             </span>
           </div>
 
-          <div className="flex items-center gap-2 h-8">
-            <a href="#block-explorer">
-              <Icon
-                icon={IconNames.NEW_TAB}
-                className="text-gray-30"
-                size={16}
-              />
-            </a>
-            <a href="#block-explorer">
-              <Icon icon={WalletIcon} className="text-gray-30" size={16} />
-            </a>
+          <div className="flex items-center gap-3 h-8">
+            {/* show token in explorer */}
+            <Tooltip
+              tooltipClassName="py-1 px-0"
+              trigger={TooltipTrigger.hover}
+              placement={TooltipPlacement.bottom}
+              content={
+                <ReserveTokens
+                  className="w-60"
+                  symbol={reserve.symbol}
+                  aTokenAddress={reserve.aTokenAddress}
+                  underlyingTokenAddress={reserve.underlyingAsset}
+                  variableDebtTokenAddress={reserve.variableDebtTokenAddress}
+                  stableDebtTokenAddress={reserve.stableDebtTokenAddress}
+                  onClick={openInExplorer}
+                />
+              }
+            >
+              <div>
+                <Icon
+                  icon={IconNames.NEW_TAB}
+                  className="text-gray-30 cursor-pointer"
+                  size={16}
+                />
+              </div>
+            </Tooltip>
+
+            {/* add token to wallet */}
+            <Tooltip
+              tooltipClassName="py-1 px-0"
+              trigger={TooltipTrigger.hover}
+              placement={TooltipPlacement.bottom}
+              content={
+                <ReserveTokens
+                  className="w-60"
+                  symbol={reserve.symbol}
+                  aTokenAddress={reserve.aTokenAddress}
+                  underlyingTokenAddress={reserve.underlyingAsset}
+                  variableDebtTokenAddress={reserve.variableDebtTokenAddress}
+                  stableDebtTokenAddress={reserve.stableDebtTokenAddress}
+                  onClick={addToWallet}
+                />
+              }
+            >
+              <div>
+                <Icon
+                  icon={WalletIcon}
+                  className="text-gray-30 cursor-pointer"
+                  size={16}
+                />
+              </div>
+            </Tooltip>
           </div>
         </div>
 
@@ -72,9 +170,8 @@ export const TopPanel: FC<TopPanelProps> = ({ asset, className }) => {
           value={
             <AmountRenderer
               prefix="$"
-              suffix="M"
-              value={reserveSizeInM}
               className="text-2xl"
+              {...formatUsdAmount(reserve.reserveSize)}
             />
           }
         />
@@ -83,9 +180,8 @@ export const TopPanel: FC<TopPanelProps> = ({ asset, className }) => {
           value={
             <AmountRenderer
               prefix="$"
-              suffix="M"
-              value={availableLiquidityM}
               className="text-2xl"
+              {...formatUsdAmount(reserve.availableLiquidity)}
             />
           }
         />
@@ -94,18 +190,20 @@ export const TopPanel: FC<TopPanelProps> = ({ asset, className }) => {
           value={
             <AmountRenderer
               suffix="%"
-              value={utilizationRate}
+              value={reserve.utilizationRate}
+              precision={2}
               className="text-2xl"
             />
           }
         />
         <StatisticsCard
           label={t(pageTranslations.oraclePrice)}
-          link="#oracle-price"
+          link={oracleLink}
           value={
             <AmountRenderer
               prefix="$"
-              value={oraclePrice}
+              value={reserve.oraclePrice}
+              precision={2}
               className="text-2xl"
             />
           }
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.utils.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.utils.tsx
new file mode 100644
index 000000000..f766624e0
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.utils.tsx
@@ -0,0 +1,14 @@
+import { Decimal } from '@sovryn/utils';
+
+export function formatUsdAmount(value: Decimal): {
+  value: string;
+  suffix: string;
+} {
+  if (value.gte(1e6)) {
+    return { value: value.div(1e6).toString(1), suffix: 'M' };
+  } else if (value.gte(1e3)) {
+    return { value: value.div(1e3).toString(1), suffix: 'K' };
+  } else {
+    return { value: value.toString(), suffix: '' };
+  }
+}
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/components/ReserveTokens/ReserveTokens.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/components/ReserveTokens/ReserveTokens.tsx
new file mode 100644
index 000000000..ff929aa9e
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/components/ReserveTokens/ReserveTokens.tsx
@@ -0,0 +1,84 @@
+import React, { FC, ReactElement, useEffect, useMemo } from 'react';
+
+import classNames from 'classnames';
+import { t } from 'i18next';
+
+import { getAssetData } from '@sovryn/contracts';
+
+import { BOB_CHAIN_ID } from '../../../../../../../config/chains';
+
+import { translations } from '../../../../../../../locales/i18n';
+import { TokenButton } from './components/TokenButton/TokenButton';
+
+type ReserveTokensProps = {
+  symbol: string;
+  underlyingTokenAddress: string;
+  aTokenAddress: string;
+  variableDebtTokenAddress: string;
+  stableDebtTokenAddress: string;
+  onClick: (tokenAddress: string) => void;
+  className?: string;
+};
+
+export const ReserveTokens: FC<ReserveTokensProps> = ({
+  symbol,
+  onClick,
+  underlyingTokenAddress,
+  aTokenAddress,
+  variableDebtTokenAddress,
+  stableDebtTokenAddress,
+  className,
+}) => {
+  const [tokenLogo, setTokenLogo] = React.useState<string>();
+
+  useEffect(() => {
+    getAssetData(symbol, BOB_CHAIN_ID).then(data => {
+      setTokenLogo(data.icon);
+    });
+  }, [symbol]);
+
+  const TokenLogo: ReactElement = useMemo(() => {
+    if (!tokenLogo) return <></>;
+    else return <div dangerouslySetInnerHTML={{ __html: tokenLogo }} />;
+  }, [tokenLogo]);
+
+  return (
+    <div className={classNames('divide-y divide-gray-20', className)}>
+      <TokenButton
+        title={t(translations.aaveReserveOverviewPage.topPanel.underlyingToken)}
+        label={symbol}
+        logo={TokenLogo}
+        onClick={() => onClick(underlyingTokenAddress)}
+      />
+
+      <TokenButton
+        title={t(translations.aaveReserveOverviewPage.topPanel.aToken)}
+        label={`a${symbol}`}
+        logo={TokenLogo}
+        onClick={() => onClick(aTokenAddress)}
+      />
+
+      <TokenButton
+        title={t(
+          translations.aaveReserveOverviewPage.topPanel.variableDebtToken,
+        )}
+        label={t(
+          translations.aaveReserveOverviewPage.topPanel.variableDebtTokenName,
+          { symbol },
+        )}
+        logo={TokenLogo}
+        onClick={() => onClick(variableDebtTokenAddress)}
+      />
+
+      <TokenButton
+        title={t(translations.aaveReserveOverviewPage.topPanel.stableDebtToken)}
+        label={t(
+          translations.aaveReserveOverviewPage.topPanel.stableDebtTokenName,
+          { symbol },
+        )}
+        logo={TokenLogo}
+        onClick={() => onClick(stableDebtTokenAddress)}
+      />
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/components/ReserveTokens/components/TokenButton/TokenButton.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/components/ReserveTokens/components/TokenButton/TokenButton.tsx
new file mode 100644
index 000000000..e25fa0012
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/components/ReserveTokens/components/TokenButton/TokenButton.tsx
@@ -0,0 +1,35 @@
+import React, { FC, ReactNode } from 'react';
+
+import { Paragraph, ParagraphSize } from '@sovryn/ui';
+
+type TokenButtonProps = {
+  label: string;
+  logo: ReactNode;
+  title: string;
+  onClick: () => void;
+};
+
+export const TokenButton: FC<TokenButtonProps> = ({
+  title,
+  label,
+  logo,
+  onClick,
+}) => (
+  <div>
+    <div className="pt-3 pb-2 px-4">
+      <Paragraph
+        size={ParagraphSize.small}
+        className="text-gray-40 font-medium"
+      >
+        {title}
+      </Paragraph>
+    </div>
+    <button
+      onClick={onClick}
+      className="flex items-center gap-3 px-4 py-3 w-full hover:bg-gray-20"
+    >
+      {logo}
+      <Paragraph className="font-medium">{label}</Paragraph>
+    </button>
+  </div>
+);
diff --git a/apps/frontend/src/hooks/aave/ReserveStrategy-rateStrategyStableOne.json b/apps/frontend/src/hooks/aave/ReserveStrategy-rateStrategyStableOne.json
new file mode 100644
index 000000000..16e065227
--- /dev/null
+++ b/apps/frontend/src/hooks/aave/ReserveStrategy-rateStrategyStableOne.json
@@ -0,0 +1,505 @@
+{
+  "address": "0x94b5304ec379Dc28f664c8762182d1d12d2ce4A1",
+  "abi": [
+    {
+      "inputs": [
+        {
+          "internalType": "contract IPoolAddressesProvider",
+          "name": "provider",
+          "type": "address"
+        },
+        {
+          "internalType": "uint256",
+          "name": "optimalUsageRatio",
+          "type": "uint256"
+        },
+        {
+          "internalType": "uint256",
+          "name": "baseVariableBorrowRate",
+          "type": "uint256"
+        },
+        {
+          "internalType": "uint256",
+          "name": "variableRateSlope1",
+          "type": "uint256"
+        },
+        {
+          "internalType": "uint256",
+          "name": "variableRateSlope2",
+          "type": "uint256"
+        },
+        {
+          "internalType": "uint256",
+          "name": "stableRateSlope1",
+          "type": "uint256"
+        },
+        {
+          "internalType": "uint256",
+          "name": "stableRateSlope2",
+          "type": "uint256"
+        },
+        {
+          "internalType": "uint256",
+          "name": "baseStableRateOffset",
+          "type": "uint256"
+        },
+        {
+          "internalType": "uint256",
+          "name": "stableRateExcessOffset",
+          "type": "uint256"
+        },
+        {
+          "internalType": "uint256",
+          "name": "optimalStableToTotalDebtRatio",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "nonpayable",
+      "type": "constructor"
+    },
+    {
+      "inputs": [],
+      "name": "ADDRESSES_PROVIDER",
+      "outputs": [
+        {
+          "internalType": "contract IPoolAddressesProvider",
+          "name": "",
+          "type": "address"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "MAX_EXCESS_STABLE_TO_TOTAL_DEBT_RATIO",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "MAX_EXCESS_USAGE_RATIO",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "OPTIMAL_USAGE_RATIO",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "components": [
+            {
+              "internalType": "uint256",
+              "name": "unbacked",
+              "type": "uint256"
+            },
+            {
+              "internalType": "uint256",
+              "name": "liquidityAdded",
+              "type": "uint256"
+            },
+            {
+              "internalType": "uint256",
+              "name": "liquidityTaken",
+              "type": "uint256"
+            },
+            {
+              "internalType": "uint256",
+              "name": "totalStableDebt",
+              "type": "uint256"
+            },
+            {
+              "internalType": "uint256",
+              "name": "totalVariableDebt",
+              "type": "uint256"
+            },
+            {
+              "internalType": "uint256",
+              "name": "averageStableBorrowRate",
+              "type": "uint256"
+            },
+            {
+              "internalType": "uint256",
+              "name": "reserveFactor",
+              "type": "uint256"
+            },
+            {
+              "internalType": "address",
+              "name": "reserve",
+              "type": "address"
+            },
+            {
+              "internalType": "address",
+              "name": "aToken",
+              "type": "address"
+            }
+          ],
+          "internalType": "struct DataTypes.CalculateInterestRatesParams",
+          "name": "params",
+          "type": "tuple"
+        }
+      ],
+      "name": "calculateInterestRates",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        },
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        },
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "getBaseStableBorrowRate",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "getBaseVariableBorrowRate",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "getMaxVariableBorrowRate",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "getStableRateExcessOffset",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "getStableRateSlope1",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "getStableRateSlope2",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "getVariableRateSlope1",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "getVariableRateSlope2",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    }
+  ],
+  "transactionHash": "0x8232b5ee9f78a2d8f2acf291a7c8c5636e7a8cbff634159dc7e30d5bc14c33fc",
+  "receipt": {
+    "to": null,
+    "from": "0xb7ba1Dea4a3745e58959a2091b47096cc197be5A",
+    "contractAddress": "0x94b5304ec379Dc28f664c8762182d1d12d2ce4A1",
+    "transactionIndex": 1,
+    "gasUsed": "723108",
+    "logsBloom": "0x00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000",
+    "blockHash": "0x1777b89670c47f8c37c2848d37c3c885742b9259901c4eb71b27c0cf1016fc46",
+    "transactionHash": "0x8232b5ee9f78a2d8f2acf291a7c8c5636e7a8cbff634159dc7e30d5bc14c33fc",
+    "logs": [],
+    "blockNumber": 13795948,
+    "cumulativeGasUsed": "766971",
+    "status": 1,
+    "byzantium": true
+  },
+  "args": [
+    "0xAE73edfC71af8f5fb7d8840887E8EE4317989456",
+    "900000000000000000000000000",
+    "0",
+    "40000000000000000000000000",
+    "600000000000000000000000000",
+    "5000000000000000000000000",
+    "600000000000000000000000000",
+    "10000000000000000000000000",
+    "80000000000000000000000000",
+    "200000000000000000000000000"
+  ],
+  "numDeployments": 1,
+  "solcInputHash": "f83ccc030186e5b58439131350431de3",
+  "metadata": "{\"compiler\":{\"version\":\"0.8.10+commit.fc410830\"},\"language\":\"Solidity\",\"output\":{\"abi\":[{\"inputs\":[{\"internalType\":\"contract IPoolAddressesProvider\",\"name\":\"provider\",\"type\":\"address\"},{\"internalType\":\"uint256\",\"name\":\"optimalUsageRatio\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"baseVariableBorrowRate\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"variableRateSlope1\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"variableRateSlope2\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"stableRateSlope1\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"stableRateSlope2\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"baseStableRateOffset\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"stableRateExcessOffset\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"optimalStableToTotalDebtRatio\",\"type\":\"uint256\"}],\"stateMutability\":\"nonpayable\",\"type\":\"constructor\"},{\"inputs\":[],\"name\":\"ADDRESSES_PROVIDER\",\"outputs\":[{\"internalType\":\"contract IPoolAddressesProvider\",\"name\":\"\",\"type\":\"address\"}],\"stateMutability\":\"view\",\"type\":\"function\"},{\"inputs\":[],\"name\":\"MAX_EXCESS_STABLE_TO_TOTAL_DEBT_RATIO\",\"outputs\":[{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"}],\"stateMutability\":\"view\",\"type\":\"function\"},{\"inputs\":[],\"name\":\"MAX_EXCESS_USAGE_RATIO\",\"outputs\":[{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"}],\"stateMutability\":\"view\",\"type\":\"function\"},{\"inputs\":[],\"name\":\"OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO\",\"outputs\":[{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"}],\"stateMutability\":\"view\",\"type\":\"function\"},{\"inputs\":[],\"name\":\"OPTIMAL_USAGE_RATIO\",\"outputs\":[{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"}],\"stateMutability\":\"view\",\"type\":\"function\"},{\"inputs\":[{\"components\":[{\"internalType\":\"uint256\",\"name\":\"unbacked\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"liquidityAdded\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"liquidityTaken\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"totalStableDebt\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"totalVariableDebt\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"averageStableBorrowRate\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"reserveFactor\",\"type\":\"uint256\"},{\"internalType\":\"address\",\"name\":\"reserve\",\"type\":\"address\"},{\"internalType\":\"address\",\"name\":\"aToken\",\"type\":\"address\"}],\"internalType\":\"struct DataTypes.CalculateInterestRatesParams\",\"name\":\"params\",\"type\":\"tuple\"}],\"name\":\"calculateInterestRates\",\"outputs\":[{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"}],\"stateMutability\":\"view\",\"type\":\"function\"},{\"inputs\":[],\"name\":\"getBaseStableBorrowRate\",\"outputs\":[{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"}],\"stateMutability\":\"view\",\"type\":\"function\"},{\"inputs\":[],\"name\":\"getBaseVariableBorrowRate\",\"outputs\":[{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"}],\"stateMutability\":\"view\",\"type\":\"function\"},{\"inputs\":[],\"name\":\"getMaxVariableBorrowRate\",\"outputs\":[{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"}],\"stateMutability\":\"view\",\"type\":\"function\"},{\"inputs\":[],\"name\":\"getStableRateExcessOffset\",\"outputs\":[{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"}],\"stateMutability\":\"view\",\"type\":\"function\"},{\"inputs\":[],\"name\":\"getStableRateSlope1\",\"outputs\":[{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"}],\"stateMutability\":\"view\",\"type\":\"function\"},{\"inputs\":[],\"name\":\"getStableRateSlope2\",\"outputs\":[{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"}],\"stateMutability\":\"view\",\"type\":\"function\"},{\"inputs\":[],\"name\":\"getVariableRateSlope1\",\"outputs\":[{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"}],\"stateMutability\":\"view\",\"type\":\"function\"},{\"inputs\":[],\"name\":\"getVariableRateSlope2\",\"outputs\":[{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"}],\"stateMutability\":\"view\",\"type\":\"function\"}],\"devdoc\":{\"author\":\"Aave\",\"details\":\"The model of interest rate is based on 2 slopes, one before the `OPTIMAL_USAGE_RATIO` point of usage and another from that one to 100%. - An instance of this same contract, can't be used across different Aave markets, due to the caching   of the PoolAddressesProvider\",\"kind\":\"dev\",\"methods\":{\"calculateInterestRates((uint256,uint256,uint256,uint256,uint256,uint256,uint256,address,address))\":{\"params\":{\"params\":\"The parameters needed to calculate interest rates\"},\"returns\":{\"_0\":\"liquidityRate The liquidity rate expressed in rays\",\"_1\":\"stableBorrowRate The stable borrow rate expressed in rays\",\"_2\":\"variableBorrowRate The variable borrow rate expressed in rays\"}},\"constructor\":{\"details\":\"Constructor.\",\"params\":{\"baseStableRateOffset\":\"The premium on top of variable rate for base stable borrowing rate\",\"baseVariableBorrowRate\":\"The base variable borrow rate\",\"optimalStableToTotalDebtRatio\":\"The optimal stable debt to total debt ratio of the reserve\",\"optimalUsageRatio\":\"The optimal usage ratio\",\"provider\":\"The address of the PoolAddressesProvider contract\",\"stableRateExcessOffset\":\"The premium on top of stable rate when there stable debt surpass the threshold\",\"stableRateSlope1\":\"The stable rate slope below optimal usage ratio\",\"stableRateSlope2\":\"The stable rate slope above optimal usage ratio\",\"variableRateSlope1\":\"The variable rate slope below optimal usage ratio\",\"variableRateSlope2\":\"The variable rate slope above optimal usage ratio\"}},\"getBaseStableBorrowRate()\":{\"returns\":{\"_0\":\"The base stable borrow rate, expressed in ray\"}},\"getBaseVariableBorrowRate()\":{\"returns\":{\"_0\":\"The base variable borrow rate, expressed in ray\"}},\"getMaxVariableBorrowRate()\":{\"returns\":{\"_0\":\"The maximum variable borrow rate, expressed in ray\"}},\"getStableRateExcessOffset()\":{\"details\":\"It's an additional premium applied to the stable when stable debt > OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO\",\"returns\":{\"_0\":\"The stable rate excess offset, expressed in ray\"}},\"getStableRateSlope1()\":{\"details\":\"It's the stable rate when usage ratio > 0 and <= OPTIMAL_USAGE_RATIO\",\"returns\":{\"_0\":\"The stable rate slope, expressed in ray\"}},\"getStableRateSlope2()\":{\"details\":\"It's the variable rate when usage ratio > OPTIMAL_USAGE_RATIO\",\"returns\":{\"_0\":\"The stable rate slope, expressed in ray\"}},\"getVariableRateSlope1()\":{\"details\":\"It's the variable rate when usage ratio > 0 and <= OPTIMAL_USAGE_RATIO\",\"returns\":{\"_0\":\"The variable rate slope, expressed in ray\"}},\"getVariableRateSlope2()\":{\"details\":\"It's the variable rate when usage ratio > OPTIMAL_USAGE_RATIO\",\"returns\":{\"_0\":\"The variable rate slope, expressed in ray\"}}},\"stateVariables\":{\"ADDRESSES_PROVIDER\":{\"return\":\"The address of the PoolAddressesProvider contract\",\"returns\":{\"_0\":\"The address of the PoolAddressesProvider contract\"}},\"MAX_EXCESS_STABLE_TO_TOTAL_DEBT_RATIO\":{\"details\":\"It's always equal to 1-optimal stable to total debt ratio (added as constant for gas optimizations)\",\"return\":\"The max excess stable to total debt ratio, expressed in ray.\",\"returns\":{\"_0\":\"The max excess stable to total debt ratio, expressed in ray.\"}},\"MAX_EXCESS_USAGE_RATIO\":{\"details\":\"It's always equal to 1-optimal usage ratio (added as constant for gas optimizations)\",\"return\":\"The max excess usage ratio, expressed in ray.\",\"returns\":{\"_0\":\"The max excess usage ratio, expressed in ray.\"}},\"OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO\":{\"return\":\"The optimal stable to total debt ratio, expressed in ray.\",\"returns\":{\"_0\":\"The optimal stable to total debt ratio, expressed in ray.\"}},\"OPTIMAL_USAGE_RATIO\":{\"return\":\"The optimal usage ratio, expressed in ray.\",\"returns\":{\"_0\":\"The optimal usage ratio, expressed in ray.\"}}},\"title\":\"DefaultReserveInterestRateStrategy contract\",\"version\":1},\"userdoc\":{\"kind\":\"user\",\"methods\":{\"ADDRESSES_PROVIDER()\":{\"notice\":\"Returns the address of the PoolAddressesProvider\"},\"MAX_EXCESS_STABLE_TO_TOTAL_DEBT_RATIO()\":{\"notice\":\"Returns the excess stable debt ratio above the optimal.\"},\"MAX_EXCESS_USAGE_RATIO()\":{\"notice\":\"Returns the excess usage ratio above the optimal.\"},\"OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO()\":{\"notice\":\"Returns the optimal stable to total debt ratio of the reserve.\"},\"OPTIMAL_USAGE_RATIO()\":{\"notice\":\"Returns the usage ratio at which the pool aims to obtain most competitive borrow rates.\"},\"calculateInterestRates((uint256,uint256,uint256,uint256,uint256,uint256,uint256,address,address))\":{\"notice\":\"Calculates the interest rates depending on the reserve's state and configurations\"},\"getBaseStableBorrowRate()\":{\"notice\":\"Returns the base stable borrow rate\"},\"getBaseVariableBorrowRate()\":{\"notice\":\"Returns the base variable borrow rate\"},\"getMaxVariableBorrowRate()\":{\"notice\":\"Returns the maximum variable borrow rate\"},\"getStableRateExcessOffset()\":{\"notice\":\"Returns the stable rate excess offset\"},\"getStableRateSlope1()\":{\"notice\":\"Returns the stable rate slope below optimal usage ratio\"},\"getStableRateSlope2()\":{\"notice\":\"Returns the stable rate slope above optimal usage ratio\"},\"getVariableRateSlope1()\":{\"notice\":\"Returns the variable rate slope below optimal usage ratio\"},\"getVariableRateSlope2()\":{\"notice\":\"Returns the variable rate slope above optimal usage ratio\"}},\"notice\":\"Implements the calculation of the interest rates depending on the reserve state\",\"version\":1}},\"settings\":{\"compilationTarget\":{\"@aave/core-v3/contracts/protocol/pool/DefaultReserveInterestRateStrategy.sol\":\"DefaultReserveInterestRateStrategy\"},\"evmVersion\":\"berlin\",\"libraries\":{},\"metadata\":{\"bytecodeHash\":\"ipfs\",\"useLiteralContent\":true},\"optimizer\":{\"enabled\":true,\"runs\":100000},\"remappings\":[]},\"sources\":{\"@aave/core-v3/contracts/dependencies/openzeppelin/contracts/IERC20.sol\":{\"content\":\"// SPDX-License-Identifier: AGPL-3.0\\npragma solidity ^0.8.0;\\n\\n/**\\n * @dev Interface of the ERC20 standard as defined in the EIP.\\n */\\ninterface IERC20 {\\n  /**\\n   * @dev Returns the amount of tokens in existence.\\n   */\\n  function totalSupply() external view returns (uint256);\\n\\n  /**\\n   * @dev Returns the amount of tokens owned by `account`.\\n   */\\n  function balanceOf(address account) external view returns (uint256);\\n\\n  /**\\n   * @dev Moves `amount` tokens from the caller's account to `recipient`.\\n   *\\n   * Returns a boolean value indicating whether the operation succeeded.\\n   *\\n   * Emits a {Transfer} event.\\n   */\\n  function transfer(address recipient, uint256 amount) external returns (bool);\\n\\n  /**\\n   * @dev Returns the remaining number of tokens that `spender` will be\\n   * allowed to spend on behalf of `owner` through {transferFrom}. This is\\n   * zero by default.\\n   *\\n   * This value changes when {approve} or {transferFrom} are called.\\n   */\\n  function allowance(address owner, address spender) external view returns (uint256);\\n\\n  /**\\n   * @dev Sets `amount` as the allowance of `spender` over the caller's tokens.\\n   *\\n   * Returns a boolean value indicating whether the operation succeeded.\\n   *\\n   * IMPORTANT: Beware that changing an allowance with this method brings the risk\\n   * that someone may use both the old and the new allowance by unfortunate\\n   * transaction ordering. One possible solution to mitigate this race\\n   * condition is to first reduce the spender's allowance to 0 and set the\\n   * desired value afterwards:\\n   * https://github.com/ethereum/EIPs/issues/20#issuecomment-263524729\\n   *\\n   * Emits an {Approval} event.\\n   */\\n  function approve(address spender, uint256 amount) external returns (bool);\\n\\n  /**\\n   * @dev Moves `amount` tokens from `sender` to `recipient` using the\\n   * allowance mechanism. `amount` is then deducted from the caller's\\n   * allowance.\\n   *\\n   * Returns a boolean value indicating whether the operation succeeded.\\n   *\\n   * Emits a {Transfer} event.\\n   */\\n  function transferFrom(address sender, address recipient, uint256 amount) external returns (bool);\\n\\n  /**\\n   * @dev Emitted when `value` tokens are moved from one account (`from`) to\\n   * another (`to`).\\n   *\\n   * Note that `value` may be zero.\\n   */\\n  event Transfer(address indexed from, address indexed to, uint256 value);\\n\\n  /**\\n   * @dev Emitted when the allowance of a `spender` for an `owner` is set by\\n   * a call to {approve}. `value` is the new allowance.\\n   */\\n  event Approval(address indexed owner, address indexed spender, uint256 value);\\n}\\n\",\"keccak256\":\"0xf57d62241e553696a1324d225663ba2e1a51db0a51ca236d0c1b009d89b6284c\",\"license\":\"AGPL-3.0\"},\"@aave/core-v3/contracts/interfaces/IDefaultInterestRateStrategy.sol\":{\"content\":\"// SPDX-License-Identifier: AGPL-3.0\\npragma solidity ^0.8.0;\\n\\nimport {IReserveInterestRateStrategy} from './IReserveInterestRateStrategy.sol';\\nimport {IPoolAddressesProvider} from './IPoolAddressesProvider.sol';\\n\\n/**\\n * @title IDefaultInterestRateStrategy\\n * @author Aave\\n * @notice Defines the basic interface of the DefaultReserveInterestRateStrategy\\n */\\ninterface IDefaultInterestRateStrategy is IReserveInterestRateStrategy {\\n  /**\\n   * @notice Returns the usage ratio at which the pool aims to obtain most competitive borrow rates.\\n   * @return The optimal usage ratio, expressed in ray.\\n   */\\n  function OPTIMAL_USAGE_RATIO() external view returns (uint256);\\n\\n  /**\\n   * @notice Returns the optimal stable to total debt ratio of the reserve.\\n   * @return The optimal stable to total debt ratio, expressed in ray.\\n   */\\n  function OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO() external view returns (uint256);\\n\\n  /**\\n   * @notice Returns the excess usage ratio above the optimal.\\n   * @dev It's always equal to 1-optimal usage ratio (added as constant for gas optimizations)\\n   * @return The max excess usage ratio, expressed in ray.\\n   */\\n  function MAX_EXCESS_USAGE_RATIO() external view returns (uint256);\\n\\n  /**\\n   * @notice Returns the excess stable debt ratio above the optimal.\\n   * @dev It's always equal to 1-optimal stable to total debt ratio (added as constant for gas optimizations)\\n   * @return The max excess stable to total debt ratio, expressed in ray.\\n   */\\n  function MAX_EXCESS_STABLE_TO_TOTAL_DEBT_RATIO() external view returns (uint256);\\n\\n  /**\\n   * @notice Returns the address of the PoolAddressesProvider\\n   * @return The address of the PoolAddressesProvider contract\\n   */\\n  function ADDRESSES_PROVIDER() external view returns (IPoolAddressesProvider);\\n\\n  /**\\n   * @notice Returns the variable rate slope below optimal usage ratio\\n   * @dev It's the variable rate when usage ratio > 0 and <= OPTIMAL_USAGE_RATIO\\n   * @return The variable rate slope, expressed in ray\\n   */\\n  function getVariableRateSlope1() external view returns (uint256);\\n\\n  /**\\n   * @notice Returns the variable rate slope above optimal usage ratio\\n   * @dev It's the variable rate when usage ratio > OPTIMAL_USAGE_RATIO\\n   * @return The variable rate slope, expressed in ray\\n   */\\n  function getVariableRateSlope2() external view returns (uint256);\\n\\n  /**\\n   * @notice Returns the stable rate slope below optimal usage ratio\\n   * @dev It's the stable rate when usage ratio > 0 and <= OPTIMAL_USAGE_RATIO\\n   * @return The stable rate slope, expressed in ray\\n   */\\n  function getStableRateSlope1() external view returns (uint256);\\n\\n  /**\\n   * @notice Returns the stable rate slope above optimal usage ratio\\n   * @dev It's the variable rate when usage ratio > OPTIMAL_USAGE_RATIO\\n   * @return The stable rate slope, expressed in ray\\n   */\\n  function getStableRateSlope2() external view returns (uint256);\\n\\n  /**\\n   * @notice Returns the stable rate excess offset\\n   * @dev It's an additional premium applied to the stable when stable debt > OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO\\n   * @return The stable rate excess offset, expressed in ray\\n   */\\n  function getStableRateExcessOffset() external view returns (uint256);\\n\\n  /**\\n   * @notice Returns the base stable borrow rate\\n   * @return The base stable borrow rate, expressed in ray\\n   */\\n  function getBaseStableBorrowRate() external view returns (uint256);\\n\\n  /**\\n   * @notice Returns the base variable borrow rate\\n   * @return The base variable borrow rate, expressed in ray\\n   */\\n  function getBaseVariableBorrowRate() external view returns (uint256);\\n\\n  /**\\n   * @notice Returns the maximum variable borrow rate\\n   * @return The maximum variable borrow rate, expressed in ray\\n   */\\n  function getMaxVariableBorrowRate() external view returns (uint256);\\n}\\n\",\"keccak256\":\"0xb7351f5dc779d86fc6d4aafb2fe48622b2dae3a00724923b8cd92b5c676ca893\",\"license\":\"AGPL-3.0\"},\"@aave/core-v3/contracts/interfaces/IPoolAddressesProvider.sol\":{\"content\":\"// SPDX-License-Identifier: AGPL-3.0\\npragma solidity ^0.8.0;\\n\\n/**\\n * @title IPoolAddressesProvider\\n * @author Aave\\n * @notice Defines the basic interface for a Pool Addresses Provider.\\n */\\ninterface IPoolAddressesProvider {\\n  /**\\n   * @dev Emitted when the market identifier is updated.\\n   * @param oldMarketId The old id of the market\\n   * @param newMarketId The new id of the market\\n   */\\n  event MarketIdSet(string indexed oldMarketId, string indexed newMarketId);\\n\\n  /**\\n   * @dev Emitted when the pool is updated.\\n   * @param oldAddress The old address of the Pool\\n   * @param newAddress The new address of the Pool\\n   */\\n  event PoolUpdated(address indexed oldAddress, address indexed newAddress);\\n\\n  /**\\n   * @dev Emitted when the pool configurator is updated.\\n   * @param oldAddress The old address of the PoolConfigurator\\n   * @param newAddress The new address of the PoolConfigurator\\n   */\\n  event PoolConfiguratorUpdated(address indexed oldAddress, address indexed newAddress);\\n\\n  /**\\n   * @dev Emitted when the price oracle is updated.\\n   * @param oldAddress The old address of the PriceOracle\\n   * @param newAddress The new address of the PriceOracle\\n   */\\n  event PriceOracleUpdated(address indexed oldAddress, address indexed newAddress);\\n\\n  /**\\n   * @dev Emitted when the ACL manager is updated.\\n   * @param oldAddress The old address of the ACLManager\\n   * @param newAddress The new address of the ACLManager\\n   */\\n  event ACLManagerUpdated(address indexed oldAddress, address indexed newAddress);\\n\\n  /**\\n   * @dev Emitted when the ACL admin is updated.\\n   * @param oldAddress The old address of the ACLAdmin\\n   * @param newAddress The new address of the ACLAdmin\\n   */\\n  event ACLAdminUpdated(address indexed oldAddress, address indexed newAddress);\\n\\n  /**\\n   * @dev Emitted when the price oracle sentinel is updated.\\n   * @param oldAddress The old address of the PriceOracleSentinel\\n   * @param newAddress The new address of the PriceOracleSentinel\\n   */\\n  event PriceOracleSentinelUpdated(address indexed oldAddress, address indexed newAddress);\\n\\n  /**\\n   * @dev Emitted when the pool data provider is updated.\\n   * @param oldAddress The old address of the PoolDataProvider\\n   * @param newAddress The new address of the PoolDataProvider\\n   */\\n  event PoolDataProviderUpdated(address indexed oldAddress, address indexed newAddress);\\n\\n  /**\\n   * @dev Emitted when a new proxy is created.\\n   * @param id The identifier of the proxy\\n   * @param proxyAddress The address of the created proxy contract\\n   * @param implementationAddress The address of the implementation contract\\n   */\\n  event ProxyCreated(\\n    bytes32 indexed id,\\n    address indexed proxyAddress,\\n    address indexed implementationAddress\\n  );\\n\\n  /**\\n   * @dev Emitted when a new non-proxied contract address is registered.\\n   * @param id The identifier of the contract\\n   * @param oldAddress The address of the old contract\\n   * @param newAddress The address of the new contract\\n   */\\n  event AddressSet(bytes32 indexed id, address indexed oldAddress, address indexed newAddress);\\n\\n  /**\\n   * @dev Emitted when the implementation of the proxy registered with id is updated\\n   * @param id The identifier of the contract\\n   * @param proxyAddress The address of the proxy contract\\n   * @param oldImplementationAddress The address of the old implementation contract\\n   * @param newImplementationAddress The address of the new implementation contract\\n   */\\n  event AddressSetAsProxy(\\n    bytes32 indexed id,\\n    address indexed proxyAddress,\\n    address oldImplementationAddress,\\n    address indexed newImplementationAddress\\n  );\\n\\n  /**\\n   * @notice Returns the id of the Aave market to which this contract points to.\\n   * @return The market id\\n   */\\n  function getMarketId() external view returns (string memory);\\n\\n  /**\\n   * @notice Associates an id with a specific PoolAddressesProvider.\\n   * @dev This can be used to create an onchain registry of PoolAddressesProviders to\\n   * identify and validate multiple Aave markets.\\n   * @param newMarketId The market id\\n   */\\n  function setMarketId(string calldata newMarketId) external;\\n\\n  /**\\n   * @notice Returns an address by its identifier.\\n   * @dev The returned address might be an EOA or a contract, potentially proxied\\n   * @dev It returns ZERO if there is no registered address with the given id\\n   * @param id The id\\n   * @return The address of the registered for the specified id\\n   */\\n  function getAddress(bytes32 id) external view returns (address);\\n\\n  /**\\n   * @notice General function to update the implementation of a proxy registered with\\n   * certain `id`. If there is no proxy registered, it will instantiate one and\\n   * set as implementation the `newImplementationAddress`.\\n   * @dev IMPORTANT Use this function carefully, only for ids that don't have an explicit\\n   * setter function, in order to avoid unexpected consequences\\n   * @param id The id\\n   * @param newImplementationAddress The address of the new implementation\\n   */\\n  function setAddressAsProxy(bytes32 id, address newImplementationAddress) external;\\n\\n  /**\\n   * @notice Sets an address for an id replacing the address saved in the addresses map.\\n   * @dev IMPORTANT Use this function carefully, as it will do a hard replacement\\n   * @param id The id\\n   * @param newAddress The address to set\\n   */\\n  function setAddress(bytes32 id, address newAddress) external;\\n\\n  /**\\n   * @notice Returns the address of the Pool proxy.\\n   * @return The Pool proxy address\\n   */\\n  function getPool() external view returns (address);\\n\\n  /**\\n   * @notice Updates the implementation of the Pool, or creates a proxy\\n   * setting the new `pool` implementation when the function is called for the first time.\\n   * @param newPoolImpl The new Pool implementation\\n   */\\n  function setPoolImpl(address newPoolImpl) external;\\n\\n  /**\\n   * @notice Returns the address of the PoolConfigurator proxy.\\n   * @return The PoolConfigurator proxy address\\n   */\\n  function getPoolConfigurator() external view returns (address);\\n\\n  /**\\n   * @notice Updates the implementation of the PoolConfigurator, or creates a proxy\\n   * setting the new `PoolConfigurator` implementation when the function is called for the first time.\\n   * @param newPoolConfiguratorImpl The new PoolConfigurator implementation\\n   */\\n  function setPoolConfiguratorImpl(address newPoolConfiguratorImpl) external;\\n\\n  /**\\n   * @notice Returns the address of the price oracle.\\n   * @return The address of the PriceOracle\\n   */\\n  function getPriceOracle() external view returns (address);\\n\\n  /**\\n   * @notice Updates the address of the price oracle.\\n   * @param newPriceOracle The address of the new PriceOracle\\n   */\\n  function setPriceOracle(address newPriceOracle) external;\\n\\n  /**\\n   * @notice Returns the address of the ACL manager.\\n   * @return The address of the ACLManager\\n   */\\n  function getACLManager() external view returns (address);\\n\\n  /**\\n   * @notice Updates the address of the ACL manager.\\n   * @param newAclManager The address of the new ACLManager\\n   */\\n  function setACLManager(address newAclManager) external;\\n\\n  /**\\n   * @notice Returns the address of the ACL admin.\\n   * @return The address of the ACL admin\\n   */\\n  function getACLAdmin() external view returns (address);\\n\\n  /**\\n   * @notice Updates the address of the ACL admin.\\n   * @param newAclAdmin The address of the new ACL admin\\n   */\\n  function setACLAdmin(address newAclAdmin) external;\\n\\n  /**\\n   * @notice Returns the address of the price oracle sentinel.\\n   * @return The address of the PriceOracleSentinel\\n   */\\n  function getPriceOracleSentinel() external view returns (address);\\n\\n  /**\\n   * @notice Updates the address of the price oracle sentinel.\\n   * @param newPriceOracleSentinel The address of the new PriceOracleSentinel\\n   */\\n  function setPriceOracleSentinel(address newPriceOracleSentinel) external;\\n\\n  /**\\n   * @notice Returns the address of the data provider.\\n   * @return The address of the DataProvider\\n   */\\n  function getPoolDataProvider() external view returns (address);\\n\\n  /**\\n   * @notice Updates the address of the data provider.\\n   * @param newDataProvider The address of the new DataProvider\\n   */\\n  function setPoolDataProvider(address newDataProvider) external;\\n}\\n\",\"keccak256\":\"0x33d4308d9407b4ee2297fc4ba5acce1a96a6c658189e2778a4f6b90e032fb3b5\",\"license\":\"AGPL-3.0\"},\"@aave/core-v3/contracts/interfaces/IReserveInterestRateStrategy.sol\":{\"content\":\"// SPDX-License-Identifier: AGPL-3.0\\npragma solidity ^0.8.0;\\n\\nimport {DataTypes} from '../protocol/libraries/types/DataTypes.sol';\\n\\n/**\\n * @title IReserveInterestRateStrategy\\n * @author Aave\\n * @notice Interface for the calculation of the interest rates\\n */\\ninterface IReserveInterestRateStrategy {\\n  /**\\n   * @notice Calculates the interest rates depending on the reserve's state and configurations\\n   * @param params The parameters needed to calculate interest rates\\n   * @return liquidityRate The liquidity rate expressed in rays\\n   * @return stableBorrowRate The stable borrow rate expressed in rays\\n   * @return variableBorrowRate The variable borrow rate expressed in rays\\n   */\\n  function calculateInterestRates(\\n    DataTypes.CalculateInterestRatesParams memory params\\n  ) external view returns (uint256, uint256, uint256);\\n}\\n\",\"keccak256\":\"0x9028d29b6fda6f89b887a627ce5e03a401c4ccac98bfe14afcaf69ff09312202\",\"license\":\"AGPL-3.0\"},\"@aave/core-v3/contracts/protocol/libraries/helpers/Errors.sol\":{\"content\":\"// SPDX-License-Identifier: BUSL-1.1\\npragma solidity ^0.8.0;\\n\\n/**\\n * @title Errors library\\n * @author Aave\\n * @notice Defines the error messages emitted by the different contracts of the Aave protocol\\n */\\nlibrary Errors {\\n  string public constant CALLER_NOT_POOL_ADMIN = '1'; // 'The caller of the function is not a pool admin'\\n  string public constant CALLER_NOT_EMERGENCY_ADMIN = '2'; // 'The caller of the function is not an emergency admin'\\n  string public constant CALLER_NOT_POOL_OR_EMERGENCY_ADMIN = '3'; // 'The caller of the function is not a pool or emergency admin'\\n  string public constant CALLER_NOT_RISK_OR_POOL_ADMIN = '4'; // 'The caller of the function is not a risk or pool admin'\\n  string public constant CALLER_NOT_ASSET_LISTING_OR_POOL_ADMIN = '5'; // 'The caller of the function is not an asset listing or pool admin'\\n  string public constant CALLER_NOT_BRIDGE = '6'; // 'The caller of the function is not a bridge'\\n  string public constant ADDRESSES_PROVIDER_NOT_REGISTERED = '7'; // 'Pool addresses provider is not registered'\\n  string public constant INVALID_ADDRESSES_PROVIDER_ID = '8'; // 'Invalid id for the pool addresses provider'\\n  string public constant NOT_CONTRACT = '9'; // 'Address is not a contract'\\n  string public constant CALLER_NOT_POOL_CONFIGURATOR = '10'; // 'The caller of the function is not the pool configurator'\\n  string public constant CALLER_NOT_ATOKEN = '11'; // 'The caller of the function is not an AToken'\\n  string public constant INVALID_ADDRESSES_PROVIDER = '12'; // 'The address of the pool addresses provider is invalid'\\n  string public constant INVALID_FLASHLOAN_EXECUTOR_RETURN = '13'; // 'Invalid return value of the flashloan executor function'\\n  string public constant RESERVE_ALREADY_ADDED = '14'; // 'Reserve has already been added to reserve list'\\n  string public constant NO_MORE_RESERVES_ALLOWED = '15'; // 'Maximum amount of reserves in the pool reached'\\n  string public constant EMODE_CATEGORY_RESERVED = '16'; // 'Zero eMode category is reserved for volatile heterogeneous assets'\\n  string public constant INVALID_EMODE_CATEGORY_ASSIGNMENT = '17'; // 'Invalid eMode category assignment to asset'\\n  string public constant RESERVE_LIQUIDITY_NOT_ZERO = '18'; // 'The liquidity of the reserve needs to be 0'\\n  string public constant FLASHLOAN_PREMIUM_INVALID = '19'; // 'Invalid flashloan premium'\\n  string public constant INVALID_RESERVE_PARAMS = '20'; // 'Invalid risk parameters for the reserve'\\n  string public constant INVALID_EMODE_CATEGORY_PARAMS = '21'; // 'Invalid risk parameters for the eMode category'\\n  string public constant BRIDGE_PROTOCOL_FEE_INVALID = '22'; // 'Invalid bridge protocol fee'\\n  string public constant CALLER_MUST_BE_POOL = '23'; // 'The caller of this function must be a pool'\\n  string public constant INVALID_MINT_AMOUNT = '24'; // 'Invalid amount to mint'\\n  string public constant INVALID_BURN_AMOUNT = '25'; // 'Invalid amount to burn'\\n  string public constant INVALID_AMOUNT = '26'; // 'Amount must be greater than 0'\\n  string public constant RESERVE_INACTIVE = '27'; // 'Action requires an active reserve'\\n  string public constant RESERVE_FROZEN = '28'; // 'Action cannot be performed because the reserve is frozen'\\n  string public constant RESERVE_PAUSED = '29'; // 'Action cannot be performed because the reserve is paused'\\n  string public constant BORROWING_NOT_ENABLED = '30'; // 'Borrowing is not enabled'\\n  string public constant STABLE_BORROWING_NOT_ENABLED = '31'; // 'Stable borrowing is not enabled'\\n  string public constant NOT_ENOUGH_AVAILABLE_USER_BALANCE = '32'; // 'User cannot withdraw more than the available balance'\\n  string public constant INVALID_INTEREST_RATE_MODE_SELECTED = '33'; // 'Invalid interest rate mode selected'\\n  string public constant COLLATERAL_BALANCE_IS_ZERO = '34'; // 'The collateral balance is 0'\\n  string public constant HEALTH_FACTOR_LOWER_THAN_LIQUIDATION_THRESHOLD = '35'; // 'Health factor is lesser than the liquidation threshold'\\n  string public constant COLLATERAL_CANNOT_COVER_NEW_BORROW = '36'; // 'There is not enough collateral to cover a new borrow'\\n  string public constant COLLATERAL_SAME_AS_BORROWING_CURRENCY = '37'; // 'Collateral is (mostly) the same currency that is being borrowed'\\n  string public constant AMOUNT_BIGGER_THAN_MAX_LOAN_SIZE_STABLE = '38'; // 'The requested amount is greater than the max loan size in stable rate mode'\\n  string public constant NO_DEBT_OF_SELECTED_TYPE = '39'; // 'For repayment of a specific type of debt, the user needs to have debt that type'\\n  string public constant NO_EXPLICIT_AMOUNT_TO_REPAY_ON_BEHALF = '40'; // 'To repay on behalf of a user an explicit amount to repay is needed'\\n  string public constant NO_OUTSTANDING_STABLE_DEBT = '41'; // 'User does not have outstanding stable rate debt on this reserve'\\n  string public constant NO_OUTSTANDING_VARIABLE_DEBT = '42'; // 'User does not have outstanding variable rate debt on this reserve'\\n  string public constant UNDERLYING_BALANCE_ZERO = '43'; // 'The underlying balance needs to be greater than 0'\\n  string public constant INTEREST_RATE_REBALANCE_CONDITIONS_NOT_MET = '44'; // 'Interest rate rebalance conditions were not met'\\n  string public constant HEALTH_FACTOR_NOT_BELOW_THRESHOLD = '45'; // 'Health factor is not below the threshold'\\n  string public constant COLLATERAL_CANNOT_BE_LIQUIDATED = '46'; // 'The collateral chosen cannot be liquidated'\\n  string public constant SPECIFIED_CURRENCY_NOT_BORROWED_BY_USER = '47'; // 'User did not borrow the specified currency'\\n  string public constant INCONSISTENT_FLASHLOAN_PARAMS = '49'; // 'Inconsistent flashloan parameters'\\n  string public constant BORROW_CAP_EXCEEDED = '50'; // 'Borrow cap is exceeded'\\n  string public constant SUPPLY_CAP_EXCEEDED = '51'; // 'Supply cap is exceeded'\\n  string public constant UNBACKED_MINT_CAP_EXCEEDED = '52'; // 'Unbacked mint cap is exceeded'\\n  string public constant DEBT_CEILING_EXCEEDED = '53'; // 'Debt ceiling is exceeded'\\n  string public constant UNDERLYING_CLAIMABLE_RIGHTS_NOT_ZERO = '54'; // 'Claimable rights over underlying not zero (aToken supply or accruedToTreasury)'\\n  string public constant STABLE_DEBT_NOT_ZERO = '55'; // 'Stable debt supply is not zero'\\n  string public constant VARIABLE_DEBT_SUPPLY_NOT_ZERO = '56'; // 'Variable debt supply is not zero'\\n  string public constant LTV_VALIDATION_FAILED = '57'; // 'Ltv validation failed'\\n  string public constant INCONSISTENT_EMODE_CATEGORY = '58'; // 'Inconsistent eMode category'\\n  string public constant PRICE_ORACLE_SENTINEL_CHECK_FAILED = '59'; // 'Price oracle sentinel validation failed'\\n  string public constant ASSET_NOT_BORROWABLE_IN_ISOLATION = '60'; // 'Asset is not borrowable in isolation mode'\\n  string public constant RESERVE_ALREADY_INITIALIZED = '61'; // 'Reserve has already been initialized'\\n  string public constant USER_IN_ISOLATION_MODE_OR_LTV_ZERO = '62'; // 'User is in isolation mode or ltv is zero'\\n  string public constant INVALID_LTV = '63'; // 'Invalid ltv parameter for the reserve'\\n  string public constant INVALID_LIQ_THRESHOLD = '64'; // 'Invalid liquidity threshold parameter for the reserve'\\n  string public constant INVALID_LIQ_BONUS = '65'; // 'Invalid liquidity bonus parameter for the reserve'\\n  string public constant INVALID_DECIMALS = '66'; // 'Invalid decimals parameter of the underlying asset of the reserve'\\n  string public constant INVALID_RESERVE_FACTOR = '67'; // 'Invalid reserve factor parameter for the reserve'\\n  string public constant INVALID_BORROW_CAP = '68'; // 'Invalid borrow cap for the reserve'\\n  string public constant INVALID_SUPPLY_CAP = '69'; // 'Invalid supply cap for the reserve'\\n  string public constant INVALID_LIQUIDATION_PROTOCOL_FEE = '70'; // 'Invalid liquidation protocol fee for the reserve'\\n  string public constant INVALID_EMODE_CATEGORY = '71'; // 'Invalid eMode category for the reserve'\\n  string public constant INVALID_UNBACKED_MINT_CAP = '72'; // 'Invalid unbacked mint cap for the reserve'\\n  string public constant INVALID_DEBT_CEILING = '73'; // 'Invalid debt ceiling for the reserve\\n  string public constant INVALID_RESERVE_INDEX = '74'; // 'Invalid reserve index'\\n  string public constant ACL_ADMIN_CANNOT_BE_ZERO = '75'; // 'ACL admin cannot be set to the zero address'\\n  string public constant INCONSISTENT_PARAMS_LENGTH = '76'; // 'Array parameters that should be equal length are not'\\n  string public constant ZERO_ADDRESS_NOT_VALID = '77'; // 'Zero address not valid'\\n  string public constant INVALID_EXPIRATION = '78'; // 'Invalid expiration'\\n  string public constant INVALID_SIGNATURE = '79'; // 'Invalid signature'\\n  string public constant OPERATION_NOT_SUPPORTED = '80'; // 'Operation not supported'\\n  string public constant DEBT_CEILING_NOT_ZERO = '81'; // 'Debt ceiling is not zero'\\n  string public constant ASSET_NOT_LISTED = '82'; // 'Asset is not listed'\\n  string public constant INVALID_OPTIMAL_USAGE_RATIO = '83'; // 'Invalid optimal usage ratio'\\n  string public constant INVALID_OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO = '84'; // 'Invalid optimal stable to total debt ratio'\\n  string public constant UNDERLYING_CANNOT_BE_RESCUED = '85'; // 'The underlying asset cannot be rescued'\\n  string public constant ADDRESSES_PROVIDER_ALREADY_ADDED = '86'; // 'Reserve has already been added to reserve list'\\n  string public constant POOL_ADDRESSES_DO_NOT_MATCH = '87'; // 'The token implementation pool address and the pool address provided by the initializing pool do not match'\\n  string public constant STABLE_BORROWING_ENABLED = '88'; // 'Stable borrowing is enabled'\\n  string public constant SILOED_BORROWING_VIOLATION = '89'; // 'User is trying to borrow multiple assets including a siloed one'\\n  string public constant RESERVE_DEBT_NOT_ZERO = '90'; // the total debt of the reserve needs to be 0\\n  string public constant FLASHLOAN_DISABLED = '91'; // FlashLoaning for this asset is disabled\\n}\\n\",\"keccak256\":\"0x61757945ed506349f2cec8b99806124ef17f70644faba9860fb134df8ca34e86\",\"license\":\"BUSL-1.1\"},\"@aave/core-v3/contracts/protocol/libraries/math/PercentageMath.sol\":{\"content\":\"// SPDX-License-Identifier: BUSL-1.1\\npragma solidity ^0.8.0;\\n\\n/**\\n * @title PercentageMath library\\n * @author Aave\\n * @notice Provides functions to perform percentage calculations\\n * @dev Percentages are defined by default with 2 decimals of precision (100.00). The precision is indicated by PERCENTAGE_FACTOR\\n * @dev Operations are rounded. If a value is >=.5, will be rounded up, otherwise rounded down.\\n */\\nlibrary PercentageMath {\\n  // Maximum percentage factor (100.00%)\\n  uint256 internal constant PERCENTAGE_FACTOR = 1e4;\\n\\n  // Half percentage factor (50.00%)\\n  uint256 internal constant HALF_PERCENTAGE_FACTOR = 0.5e4;\\n\\n  /**\\n   * @notice Executes a percentage multiplication\\n   * @dev assembly optimized for improved gas savings, see https://twitter.com/transmissions11/status/1451131036377571328\\n   * @param value The value of which the percentage needs to be calculated\\n   * @param percentage The percentage of the value to be calculated\\n   * @return result value percentmul percentage\\n   */\\n  function percentMul(uint256 value, uint256 percentage) internal pure returns (uint256 result) {\\n    // to avoid overflow, value <= (type(uint256).max - HALF_PERCENTAGE_FACTOR) / percentage\\n    assembly {\\n      if iszero(\\n        or(\\n          iszero(percentage),\\n          iszero(gt(value, div(sub(not(0), HALF_PERCENTAGE_FACTOR), percentage)))\\n        )\\n      ) {\\n        revert(0, 0)\\n      }\\n\\n      result := div(add(mul(value, percentage), HALF_PERCENTAGE_FACTOR), PERCENTAGE_FACTOR)\\n    }\\n  }\\n\\n  /**\\n   * @notice Executes a percentage division\\n   * @dev assembly optimized for improved gas savings, see https://twitter.com/transmissions11/status/1451131036377571328\\n   * @param value The value of which the percentage needs to be calculated\\n   * @param percentage The percentage of the value to be calculated\\n   * @return result value percentdiv percentage\\n   */\\n  function percentDiv(uint256 value, uint256 percentage) internal pure returns (uint256 result) {\\n    // to avoid overflow, value <= (type(uint256).max - halfPercentage) / PERCENTAGE_FACTOR\\n    assembly {\\n      if or(\\n        iszero(percentage),\\n        iszero(iszero(gt(value, div(sub(not(0), div(percentage, 2)), PERCENTAGE_FACTOR))))\\n      ) {\\n        revert(0, 0)\\n      }\\n\\n      result := div(add(mul(value, PERCENTAGE_FACTOR), div(percentage, 2)), percentage)\\n    }\\n  }\\n}\\n\",\"keccak256\":\"0x6a7dcf18e1af47b69c8dd58093b0134e3689bf719ba63eae485d8f9dfc10cac7\",\"license\":\"BUSL-1.1\"},\"@aave/core-v3/contracts/protocol/libraries/math/WadRayMath.sol\":{\"content\":\"// SPDX-License-Identifier: BUSL-1.1\\npragma solidity ^0.8.0;\\n\\n/**\\n * @title WadRayMath library\\n * @author Aave\\n * @notice Provides functions to perform calculations with Wad and Ray units\\n * @dev Provides mul and div function for wads (decimal numbers with 18 digits of precision) and rays (decimal numbers\\n * with 27 digits of precision)\\n * @dev Operations are rounded. If a value is >=.5, will be rounded up, otherwise rounded down.\\n */\\nlibrary WadRayMath {\\n  // HALF_WAD and HALF_RAY expressed with extended notation as constant with operations are not supported in Yul assembly\\n  uint256 internal constant WAD = 1e18;\\n  uint256 internal constant HALF_WAD = 0.5e18;\\n\\n  uint256 internal constant RAY = 1e27;\\n  uint256 internal constant HALF_RAY = 0.5e27;\\n\\n  uint256 internal constant WAD_RAY_RATIO = 1e9;\\n\\n  /**\\n   * @dev Multiplies two wad, rounding half up to the nearest wad\\n   * @dev assembly optimized for improved gas savings, see https://twitter.com/transmissions11/status/1451131036377571328\\n   * @param a Wad\\n   * @param b Wad\\n   * @return c = a*b, in wad\\n   */\\n  function wadMul(uint256 a, uint256 b) internal pure returns (uint256 c) {\\n    // to avoid overflow, a <= (type(uint256).max - HALF_WAD) / b\\n    assembly {\\n      if iszero(or(iszero(b), iszero(gt(a, div(sub(not(0), HALF_WAD), b))))) {\\n        revert(0, 0)\\n      }\\n\\n      c := div(add(mul(a, b), HALF_WAD), WAD)\\n    }\\n  }\\n\\n  /**\\n   * @dev Divides two wad, rounding half up to the nearest wad\\n   * @dev assembly optimized for improved gas savings, see https://twitter.com/transmissions11/status/1451131036377571328\\n   * @param a Wad\\n   * @param b Wad\\n   * @return c = a/b, in wad\\n   */\\n  function wadDiv(uint256 a, uint256 b) internal pure returns (uint256 c) {\\n    // to avoid overflow, a <= (type(uint256).max - halfB) / WAD\\n    assembly {\\n      if or(iszero(b), iszero(iszero(gt(a, div(sub(not(0), div(b, 2)), WAD))))) {\\n        revert(0, 0)\\n      }\\n\\n      c := div(add(mul(a, WAD), div(b, 2)), b)\\n    }\\n  }\\n\\n  /**\\n   * @notice Multiplies two ray, rounding half up to the nearest ray\\n   * @dev assembly optimized for improved gas savings, see https://twitter.com/transmissions11/status/1451131036377571328\\n   * @param a Ray\\n   * @param b Ray\\n   * @return c = a raymul b\\n   */\\n  function rayMul(uint256 a, uint256 b) internal pure returns (uint256 c) {\\n    // to avoid overflow, a <= (type(uint256).max - HALF_RAY) / b\\n    assembly {\\n      if iszero(or(iszero(b), iszero(gt(a, div(sub(not(0), HALF_RAY), b))))) {\\n        revert(0, 0)\\n      }\\n\\n      c := div(add(mul(a, b), HALF_RAY), RAY)\\n    }\\n  }\\n\\n  /**\\n   * @notice Divides two ray, rounding half up to the nearest ray\\n   * @dev assembly optimized for improved gas savings, see https://twitter.com/transmissions11/status/1451131036377571328\\n   * @param a Ray\\n   * @param b Ray\\n   * @return c = a raydiv b\\n   */\\n  function rayDiv(uint256 a, uint256 b) internal pure returns (uint256 c) {\\n    // to avoid overflow, a <= (type(uint256).max - halfB) / RAY\\n    assembly {\\n      if or(iszero(b), iszero(iszero(gt(a, div(sub(not(0), div(b, 2)), RAY))))) {\\n        revert(0, 0)\\n      }\\n\\n      c := div(add(mul(a, RAY), div(b, 2)), b)\\n    }\\n  }\\n\\n  /**\\n   * @dev Casts ray down to wad\\n   * @dev assembly optimized for improved gas savings, see https://twitter.com/transmissions11/status/1451131036377571328\\n   * @param a Ray\\n   * @return b = a converted to wad, rounded half up to the nearest wad\\n   */\\n  function rayToWad(uint256 a) internal pure returns (uint256 b) {\\n    assembly {\\n      b := div(a, WAD_RAY_RATIO)\\n      let remainder := mod(a, WAD_RAY_RATIO)\\n      if iszero(lt(remainder, div(WAD_RAY_RATIO, 2))) {\\n        b := add(b, 1)\\n      }\\n    }\\n  }\\n\\n  /**\\n   * @dev Converts wad up to ray\\n   * @dev assembly optimized for improved gas savings, see https://twitter.com/transmissions11/status/1451131036377571328\\n   * @param a Wad\\n   * @return b = a converted in ray\\n   */\\n  function wadToRay(uint256 a) internal pure returns (uint256 b) {\\n    // to avoid overflow, b/WAD_RAY_RATIO == a\\n    assembly {\\n      b := mul(a, WAD_RAY_RATIO)\\n\\n      if iszero(eq(div(b, WAD_RAY_RATIO), a)) {\\n        revert(0, 0)\\n      }\\n    }\\n  }\\n}\\n\",\"keccak256\":\"0x618fe1876e322a10269e4a96e61e516bbbec883cb79e20b508f8010027178f07\",\"license\":\"BUSL-1.1\"},\"@aave/core-v3/contracts/protocol/libraries/types/DataTypes.sol\":{\"content\":\"// SPDX-License-Identifier: BUSL-1.1\\npragma solidity ^0.8.0;\\n\\nlibrary DataTypes {\\n  struct ReserveData {\\n    //stores the reserve configuration\\n    ReserveConfigurationMap configuration;\\n    //the liquidity index. Expressed in ray\\n    uint128 liquidityIndex;\\n    //the current supply rate. Expressed in ray\\n    uint128 currentLiquidityRate;\\n    //variable borrow index. Expressed in ray\\n    uint128 variableBorrowIndex;\\n    //the current variable borrow rate. Expressed in ray\\n    uint128 currentVariableBorrowRate;\\n    //the current stable borrow rate. Expressed in ray\\n    uint128 currentStableBorrowRate;\\n    //timestamp of last update\\n    uint40 lastUpdateTimestamp;\\n    //the id of the reserve. Represents the position in the list of the active reserves\\n    uint16 id;\\n    //aToken address\\n    address aTokenAddress;\\n    //stableDebtToken address\\n    address stableDebtTokenAddress;\\n    //variableDebtToken address\\n    address variableDebtTokenAddress;\\n    //address of the interest rate strategy\\n    address interestRateStrategyAddress;\\n    //the current treasury balance, scaled\\n    uint128 accruedToTreasury;\\n    //the outstanding unbacked aTokens minted through the bridging feature\\n    uint128 unbacked;\\n    //the outstanding debt borrowed against this asset in isolation mode\\n    uint128 isolationModeTotalDebt;\\n  }\\n\\n  struct ReserveConfigurationMap {\\n    //bit 0-15: LTV\\n    //bit 16-31: Liq. threshold\\n    //bit 32-47: Liq. bonus\\n    //bit 48-55: Decimals\\n    //bit 56: reserve is active\\n    //bit 57: reserve is frozen\\n    //bit 58: borrowing is enabled\\n    //bit 59: stable rate borrowing enabled\\n    //bit 60: asset is paused\\n    //bit 61: borrowing in isolation mode is enabled\\n    //bit 62: siloed borrowing enabled\\n    //bit 63: flashloaning enabled\\n    //bit 64-79: reserve factor\\n    //bit 80-115 borrow cap in whole tokens, borrowCap == 0 => no cap\\n    //bit 116-151 supply cap in whole tokens, supplyCap == 0 => no cap\\n    //bit 152-167 liquidation protocol fee\\n    //bit 168-175 eMode category\\n    //bit 176-211 unbacked mint cap in whole tokens, unbackedMintCap == 0 => minting disabled\\n    //bit 212-251 debt ceiling for isolation mode with (ReserveConfiguration::DEBT_CEILING_DECIMALS) decimals\\n    //bit 252-255 unused\\n\\n    uint256 data;\\n  }\\n\\n  struct UserConfigurationMap {\\n    /**\\n     * @dev Bitmap of the users collaterals and borrows. It is divided in pairs of bits, one pair per asset.\\n     * The first bit indicates if an asset is used as collateral by the user, the second whether an\\n     * asset is borrowed by the user.\\n     */\\n    uint256 data;\\n  }\\n\\n  struct EModeCategory {\\n    // each eMode category has a custom ltv and liquidation threshold\\n    uint16 ltv;\\n    uint16 liquidationThreshold;\\n    uint16 liquidationBonus;\\n    // each eMode category may or may not have a custom oracle to override the individual assets price oracles\\n    address priceSource;\\n    string label;\\n  }\\n\\n  enum InterestRateMode {NONE, STABLE, VARIABLE}\\n\\n  struct ReserveCache {\\n    uint256 currScaledVariableDebt;\\n    uint256 nextScaledVariableDebt;\\n    uint256 currPrincipalStableDebt;\\n    uint256 currAvgStableBorrowRate;\\n    uint256 currTotalStableDebt;\\n    uint256 nextAvgStableBorrowRate;\\n    uint256 nextTotalStableDebt;\\n    uint256 currLiquidityIndex;\\n    uint256 nextLiquidityIndex;\\n    uint256 currVariableBorrowIndex;\\n    uint256 nextVariableBorrowIndex;\\n    uint256 currLiquidityRate;\\n    uint256 currVariableBorrowRate;\\n    uint256 reserveFactor;\\n    ReserveConfigurationMap reserveConfiguration;\\n    address aTokenAddress;\\n    address stableDebtTokenAddress;\\n    address variableDebtTokenAddress;\\n    uint40 reserveLastUpdateTimestamp;\\n    uint40 stableDebtLastUpdateTimestamp;\\n  }\\n\\n  struct ExecuteLiquidationCallParams {\\n    uint256 reservesCount;\\n    uint256 debtToCover;\\n    address collateralAsset;\\n    address debtAsset;\\n    address user;\\n    bool receiveAToken;\\n    address priceOracle;\\n    uint8 userEModeCategory;\\n    address priceOracleSentinel;\\n  }\\n\\n  struct ExecuteSupplyParams {\\n    address asset;\\n    uint256 amount;\\n    address onBehalfOf;\\n    uint16 referralCode;\\n  }\\n\\n  struct ExecuteBorrowParams {\\n    address asset;\\n    address user;\\n    address onBehalfOf;\\n    uint256 amount;\\n    InterestRateMode interestRateMode;\\n    uint16 referralCode;\\n    bool releaseUnderlying;\\n    uint256 maxStableRateBorrowSizePercent;\\n    uint256 reservesCount;\\n    address oracle;\\n    uint8 userEModeCategory;\\n    address priceOracleSentinel;\\n  }\\n\\n  struct ExecuteRepayParams {\\n    address asset;\\n    uint256 amount;\\n    InterestRateMode interestRateMode;\\n    address onBehalfOf;\\n    bool useATokens;\\n  }\\n\\n  struct ExecuteWithdrawParams {\\n    address asset;\\n    uint256 amount;\\n    address to;\\n    uint256 reservesCount;\\n    address oracle;\\n    uint8 userEModeCategory;\\n  }\\n\\n  struct ExecuteSetUserEModeParams {\\n    uint256 reservesCount;\\n    address oracle;\\n    uint8 categoryId;\\n  }\\n\\n  struct FinalizeTransferParams {\\n    address asset;\\n    address from;\\n    address to;\\n    uint256 amount;\\n    uint256 balanceFromBefore;\\n    uint256 balanceToBefore;\\n    uint256 reservesCount;\\n    address oracle;\\n    uint8 fromEModeCategory;\\n  }\\n\\n  struct FlashloanParams {\\n    address receiverAddress;\\n    address[] assets;\\n    uint256[] amounts;\\n    uint256[] interestRateModes;\\n    address onBehalfOf;\\n    bytes params;\\n    uint16 referralCode;\\n    uint256 flashLoanPremiumToProtocol;\\n    uint256 flashLoanPremiumTotal;\\n    uint256 maxStableRateBorrowSizePercent;\\n    uint256 reservesCount;\\n    address addressesProvider;\\n    uint8 userEModeCategory;\\n    bool isAuthorizedFlashBorrower;\\n  }\\n\\n  struct FlashloanSimpleParams {\\n    address receiverAddress;\\n    address asset;\\n    uint256 amount;\\n    bytes params;\\n    uint16 referralCode;\\n    uint256 flashLoanPremiumToProtocol;\\n    uint256 flashLoanPremiumTotal;\\n  }\\n\\n  struct FlashLoanRepaymentParams {\\n    uint256 amount;\\n    uint256 totalPremium;\\n    uint256 flashLoanPremiumToProtocol;\\n    address asset;\\n    address receiverAddress;\\n    uint16 referralCode;\\n  }\\n\\n  struct CalculateUserAccountDataParams {\\n    UserConfigurationMap userConfig;\\n    uint256 reservesCount;\\n    address user;\\n    address oracle;\\n    uint8 userEModeCategory;\\n  }\\n\\n  struct ValidateBorrowParams {\\n    ReserveCache reserveCache;\\n    UserConfigurationMap userConfig;\\n    address asset;\\n    address userAddress;\\n    uint256 amount;\\n    InterestRateMode interestRateMode;\\n    uint256 maxStableLoanPercent;\\n    uint256 reservesCount;\\n    address oracle;\\n    uint8 userEModeCategory;\\n    address priceOracleSentinel;\\n    bool isolationModeActive;\\n    address isolationModeCollateralAddress;\\n    uint256 isolationModeDebtCeiling;\\n  }\\n\\n  struct ValidateLiquidationCallParams {\\n    ReserveCache debtReserveCache;\\n    uint256 totalDebt;\\n    uint256 healthFactor;\\n    address priceOracleSentinel;\\n  }\\n\\n  struct CalculateInterestRatesParams {\\n    uint256 unbacked;\\n    uint256 liquidityAdded;\\n    uint256 liquidityTaken;\\n    uint256 totalStableDebt;\\n    uint256 totalVariableDebt;\\n    uint256 averageStableBorrowRate;\\n    uint256 reserveFactor;\\n    address reserve;\\n    address aToken;\\n  }\\n\\n  struct InitReserveParams {\\n    address asset;\\n    address aTokenAddress;\\n    address stableDebtAddress;\\n    address variableDebtAddress;\\n    address interestRateStrategyAddress;\\n    uint16 reservesCount;\\n    uint16 maxNumberReserves;\\n  }\\n}\\n\",\"keccak256\":\"0x771cb99fd8519c974f7e12130387c4d9a997a6e8d0ac10e4303b842fe53efa88\",\"license\":\"BUSL-1.1\"},\"@aave/core-v3/contracts/protocol/pool/DefaultReserveInterestRateStrategy.sol\":{\"content\":\"// SPDX-License-Identifier: BUSL-1.1\\npragma solidity ^0.8.10;\\n\\nimport {IERC20} from '../../dependencies/openzeppelin/contracts/IERC20.sol';\\nimport {WadRayMath} from '../libraries/math/WadRayMath.sol';\\nimport {PercentageMath} from '../libraries/math/PercentageMath.sol';\\nimport {DataTypes} from '../libraries/types/DataTypes.sol';\\nimport {Errors} from '../libraries/helpers/Errors.sol';\\nimport {IDefaultInterestRateStrategy} from '../../interfaces/IDefaultInterestRateStrategy.sol';\\nimport {IReserveInterestRateStrategy} from '../../interfaces/IReserveInterestRateStrategy.sol';\\nimport {IPoolAddressesProvider} from '../../interfaces/IPoolAddressesProvider.sol';\\n\\n/**\\n * @title DefaultReserveInterestRateStrategy contract\\n * @author Aave\\n * @notice Implements the calculation of the interest rates depending on the reserve state\\n * @dev The model of interest rate is based on 2 slopes, one before the `OPTIMAL_USAGE_RATIO`\\n * point of usage and another from that one to 100%.\\n * - An instance of this same contract, can't be used across different Aave markets, due to the caching\\n *   of the PoolAddressesProvider\\n */\\ncontract DefaultReserveInterestRateStrategy is IDefaultInterestRateStrategy {\\n  using WadRayMath for uint256;\\n  using PercentageMath for uint256;\\n\\n  /// @inheritdoc IDefaultInterestRateStrategy\\n  uint256 public immutable OPTIMAL_USAGE_RATIO;\\n\\n  /// @inheritdoc IDefaultInterestRateStrategy\\n  uint256 public immutable OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO;\\n\\n  /// @inheritdoc IDefaultInterestRateStrategy\\n  uint256 public immutable MAX_EXCESS_USAGE_RATIO;\\n\\n  /// @inheritdoc IDefaultInterestRateStrategy\\n  uint256 public immutable MAX_EXCESS_STABLE_TO_TOTAL_DEBT_RATIO;\\n\\n  IPoolAddressesProvider public immutable ADDRESSES_PROVIDER;\\n\\n  // Base variable borrow rate when usage rate = 0. Expressed in ray\\n  uint256 internal immutable _baseVariableBorrowRate;\\n\\n  // Slope of the variable interest curve when usage ratio > 0 and <= OPTIMAL_USAGE_RATIO. Expressed in ray\\n  uint256 internal immutable _variableRateSlope1;\\n\\n  // Slope of the variable interest curve when usage ratio > OPTIMAL_USAGE_RATIO. Expressed in ray\\n  uint256 internal immutable _variableRateSlope2;\\n\\n  // Slope of the stable interest curve when usage ratio > 0 and <= OPTIMAL_USAGE_RATIO. Expressed in ray\\n  uint256 internal immutable _stableRateSlope1;\\n\\n  // Slope of the stable interest curve when usage ratio > OPTIMAL_USAGE_RATIO. Expressed in ray\\n  uint256 internal immutable _stableRateSlope2;\\n\\n  // Premium on top of `_variableRateSlope1` for base stable borrowing rate\\n  uint256 internal immutable _baseStableRateOffset;\\n\\n  // Additional premium applied to stable rate when stable debt surpass `OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO`\\n  uint256 internal immutable _stableRateExcessOffset;\\n\\n  /**\\n   * @dev Constructor.\\n   * @param provider The address of the PoolAddressesProvider contract\\n   * @param optimalUsageRatio The optimal usage ratio\\n   * @param baseVariableBorrowRate The base variable borrow rate\\n   * @param variableRateSlope1 The variable rate slope below optimal usage ratio\\n   * @param variableRateSlope2 The variable rate slope above optimal usage ratio\\n   * @param stableRateSlope1 The stable rate slope below optimal usage ratio\\n   * @param stableRateSlope2 The stable rate slope above optimal usage ratio\\n   * @param baseStableRateOffset The premium on top of variable rate for base stable borrowing rate\\n   * @param stableRateExcessOffset The premium on top of stable rate when there stable debt surpass the threshold\\n   * @param optimalStableToTotalDebtRatio The optimal stable debt to total debt ratio of the reserve\\n   */\\n  constructor(\\n    IPoolAddressesProvider provider,\\n    uint256 optimalUsageRatio,\\n    uint256 baseVariableBorrowRate,\\n    uint256 variableRateSlope1,\\n    uint256 variableRateSlope2,\\n    uint256 stableRateSlope1,\\n    uint256 stableRateSlope2,\\n    uint256 baseStableRateOffset,\\n    uint256 stableRateExcessOffset,\\n    uint256 optimalStableToTotalDebtRatio\\n  ) {\\n    require(WadRayMath.RAY >= optimalUsageRatio, Errors.INVALID_OPTIMAL_USAGE_RATIO);\\n    require(\\n      WadRayMath.RAY >= optimalStableToTotalDebtRatio,\\n      Errors.INVALID_OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO\\n    );\\n    OPTIMAL_USAGE_RATIO = optimalUsageRatio;\\n    MAX_EXCESS_USAGE_RATIO = WadRayMath.RAY - optimalUsageRatio;\\n    OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO = optimalStableToTotalDebtRatio;\\n    MAX_EXCESS_STABLE_TO_TOTAL_DEBT_RATIO = WadRayMath.RAY - optimalStableToTotalDebtRatio;\\n    ADDRESSES_PROVIDER = provider;\\n    _baseVariableBorrowRate = baseVariableBorrowRate;\\n    _variableRateSlope1 = variableRateSlope1;\\n    _variableRateSlope2 = variableRateSlope2;\\n    _stableRateSlope1 = stableRateSlope1;\\n    _stableRateSlope2 = stableRateSlope2;\\n    _baseStableRateOffset = baseStableRateOffset;\\n    _stableRateExcessOffset = stableRateExcessOffset;\\n  }\\n\\n  /// @inheritdoc IDefaultInterestRateStrategy\\n  function getVariableRateSlope1() external view returns (uint256) {\\n    return _variableRateSlope1;\\n  }\\n\\n  /// @inheritdoc IDefaultInterestRateStrategy\\n  function getVariableRateSlope2() external view returns (uint256) {\\n    return _variableRateSlope2;\\n  }\\n\\n  /// @inheritdoc IDefaultInterestRateStrategy\\n  function getStableRateSlope1() external view returns (uint256) {\\n    return _stableRateSlope1;\\n  }\\n\\n  /// @inheritdoc IDefaultInterestRateStrategy\\n  function getStableRateSlope2() external view returns (uint256) {\\n    return _stableRateSlope2;\\n  }\\n\\n  /// @inheritdoc IDefaultInterestRateStrategy\\n  function getStableRateExcessOffset() external view returns (uint256) {\\n    return _stableRateExcessOffset;\\n  }\\n\\n  /// @inheritdoc IDefaultInterestRateStrategy\\n  function getBaseStableBorrowRate() public view returns (uint256) {\\n    return _variableRateSlope1 + _baseStableRateOffset;\\n  }\\n\\n  /// @inheritdoc IDefaultInterestRateStrategy\\n  function getBaseVariableBorrowRate() external view override returns (uint256) {\\n    return _baseVariableBorrowRate;\\n  }\\n\\n  /// @inheritdoc IDefaultInterestRateStrategy\\n  function getMaxVariableBorrowRate() external view override returns (uint256) {\\n    return _baseVariableBorrowRate + _variableRateSlope1 + _variableRateSlope2;\\n  }\\n\\n  struct CalcInterestRatesLocalVars {\\n    uint256 availableLiquidity;\\n    uint256 totalDebt;\\n    uint256 currentVariableBorrowRate;\\n    uint256 currentStableBorrowRate;\\n    uint256 currentLiquidityRate;\\n    uint256 borrowUsageRatio;\\n    uint256 supplyUsageRatio;\\n    uint256 stableToTotalDebtRatio;\\n    uint256 availableLiquidityPlusDebt;\\n  }\\n\\n  /// @inheritdoc IReserveInterestRateStrategy\\n  function calculateInterestRates(\\n    DataTypes.CalculateInterestRatesParams memory params\\n  ) public view override returns (uint256, uint256, uint256) {\\n    CalcInterestRatesLocalVars memory vars;\\n\\n    vars.totalDebt = params.totalStableDebt + params.totalVariableDebt;\\n\\n    vars.currentLiquidityRate = 0;\\n    vars.currentVariableBorrowRate = _baseVariableBorrowRate;\\n    vars.currentStableBorrowRate = getBaseStableBorrowRate();\\n\\n    if (vars.totalDebt != 0) {\\n      vars.stableToTotalDebtRatio = params.totalStableDebt.rayDiv(vars.totalDebt);\\n      vars.availableLiquidity =\\n        IERC20(params.reserve).balanceOf(params.aToken) +\\n        params.liquidityAdded -\\n        params.liquidityTaken;\\n\\n      vars.availableLiquidityPlusDebt = vars.availableLiquidity + vars.totalDebt;\\n      vars.borrowUsageRatio = vars.totalDebt.rayDiv(vars.availableLiquidityPlusDebt);\\n      vars.supplyUsageRatio = vars.totalDebt.rayDiv(\\n        vars.availableLiquidityPlusDebt + params.unbacked\\n      );\\n    }\\n\\n    if (vars.borrowUsageRatio > OPTIMAL_USAGE_RATIO) {\\n      uint256 excessBorrowUsageRatio = (vars.borrowUsageRatio - OPTIMAL_USAGE_RATIO).rayDiv(\\n        MAX_EXCESS_USAGE_RATIO\\n      );\\n\\n      vars.currentStableBorrowRate +=\\n        _stableRateSlope1 +\\n        _stableRateSlope2.rayMul(excessBorrowUsageRatio);\\n\\n      vars.currentVariableBorrowRate +=\\n        _variableRateSlope1 +\\n        _variableRateSlope2.rayMul(excessBorrowUsageRatio);\\n    } else {\\n      vars.currentStableBorrowRate += _stableRateSlope1.rayMul(vars.borrowUsageRatio).rayDiv(\\n        OPTIMAL_USAGE_RATIO\\n      );\\n\\n      vars.currentVariableBorrowRate += _variableRateSlope1.rayMul(vars.borrowUsageRatio).rayDiv(\\n        OPTIMAL_USAGE_RATIO\\n      );\\n    }\\n\\n    if (vars.stableToTotalDebtRatio > OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO) {\\n      uint256 excessStableDebtRatio = (vars.stableToTotalDebtRatio -\\n        OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO).rayDiv(MAX_EXCESS_STABLE_TO_TOTAL_DEBT_RATIO);\\n      vars.currentStableBorrowRate += _stableRateExcessOffset.rayMul(excessStableDebtRatio);\\n    }\\n\\n    vars.currentLiquidityRate = _getOverallBorrowRate(\\n      params.totalStableDebt,\\n      params.totalVariableDebt,\\n      vars.currentVariableBorrowRate,\\n      params.averageStableBorrowRate\\n    ).rayMul(vars.supplyUsageRatio).percentMul(\\n        PercentageMath.PERCENTAGE_FACTOR - params.reserveFactor\\n      );\\n\\n    return (\\n      vars.currentLiquidityRate,\\n      vars.currentStableBorrowRate,\\n      vars.currentVariableBorrowRate\\n    );\\n  }\\n\\n  /**\\n   * @dev Calculates the overall borrow rate as the weighted average between the total variable debt and total stable\\n   * debt\\n   * @param totalStableDebt The total borrowed from the reserve at a stable rate\\n   * @param totalVariableDebt The total borrowed from the reserve at a variable rate\\n   * @param currentVariableBorrowRate The current variable borrow rate of the reserve\\n   * @param currentAverageStableBorrowRate The current weighted average of all the stable rate loans\\n   * @return The weighted averaged borrow rate\\n   */\\n  function _getOverallBorrowRate(\\n    uint256 totalStableDebt,\\n    uint256 totalVariableDebt,\\n    uint256 currentVariableBorrowRate,\\n    uint256 currentAverageStableBorrowRate\\n  ) internal pure returns (uint256) {\\n    uint256 totalDebt = totalStableDebt + totalVariableDebt;\\n\\n    if (totalDebt == 0) return 0;\\n\\n    uint256 weightedVariableRate = totalVariableDebt.wadToRay().rayMul(currentVariableBorrowRate);\\n\\n    uint256 weightedStableRate = totalStableDebt.wadToRay().rayMul(currentAverageStableBorrowRate);\\n\\n    uint256 overallBorrowRate = (weightedVariableRate + weightedStableRate).rayDiv(\\n      totalDebt.wadToRay()\\n    );\\n\\n    return overallBorrowRate;\\n  }\\n}\\n\",\"keccak256\":\"0x01d746c72a9ace142997f4f66226b3a0005fbdc7b0e828915b837e156c4f520a\",\"license\":\"BUSL-1.1\"}},\"version\":1}",
+  "bytecode": "0x61020060405234801561001157600080fd5b5060405162000f7538038062000f7583398101604081905261003291610146565b886b033b2e3c9fd0803ce8000000101560405180604001604052806002815260200161383360f01b815250906100845760405162461bcd60e51b815260040161007b91906101d1565b60405180910390fd5b50806b033b2e3c9fd0803ce80000001015604051806040016040528060028152602001610e0d60f21b815250906100ce5760405162461bcd60e51b815260040161007b91906101d1565b5060808990526100ea896b033b2e3c9fd0803ce8000000610226565b60c05260a0819052610108816b033b2e3c9fd0803ce8000000610226565b60e052506001600160a01b0390981661010052610120959095526101409390935261016091909152610180526101a0526101c052506101e05261024b565b6000806000806000806000806000806101408b8d03121561016657600080fd5b8a516001600160a01b038116811461017d57600080fd5b809a505060208b0151985060408b0151975060608b0151965060808b0151955060a08b0151945060c08b0151935060e08b015192506101008b015191506101208b015190509295989b9194979a5092959850565b600060208083528351808285015260005b818110156101fe578581018301518582016040015282016101e2565b81811115610210576000604083870101525b50601f01601f1916929092016040019392505050565b60008282101561024657634e487b7160e01b600052601160045260246000fd5b500390565b60805160a05160c05160e05161010051610120516101405161016051610180516101a0516101c0516101e051610c0d62000368600039600081816102710152610821015260006108c601526000818161017201526105ec0152600081816102970152818161061701526106ec0152600081816102bd0152818161030c0152610654015260008181610142015281816103300152818161067f0152818161075e01526108e70152600081816101980152818161035101526103fa0152600060f40152600081816102e601526107cb01526000818161024501526105900152600081816101e80152818161079a01526107ec0152600081816101c10152818161055f015281816105b1015281816106c301526107380152610c0d6000f3fe608060405234801561001057600080fd5b50600436106100ea5760003560e01c8063a58987091161008c578063bc62690811610066578063bc6269081461026f578063d5cd739114610295578063f4202409146102bb578063fe5fd698146102e157600080fd5b8063a589870914610212578063a9c622f814610240578063acd786861461026757600080fd5b806334762ca5116100c857806334762ca51461019657806354c365c6146101bc5780636fb92589146101e357806380031e371461020a57600080fd5b80630542975c146100ef5780630b3429a21461014057806314e32da414610170575b600080fd5b6101167f000000000000000000000000000000000000000000000000000000000000000081565b60405173ffffffffffffffffffffffffffffffffffffffff90911681526020015b60405180910390f35b7f00000000000000000000000000000000000000000000000000000000000000005b604051908152602001610137565b7f0000000000000000000000000000000000000000000000000000000000000000610162565b7f0000000000000000000000000000000000000000000000000000000000000000610162565b6101627f000000000000000000000000000000000000000000000000000000000000000081565b6101627f000000000000000000000000000000000000000000000000000000000000000081565b610162610308565b610225610220366004610adb565b610384565b60408051938452602084019290925290820152606001610137565b6101627f000000000000000000000000000000000000000000000000000000000000000081565b6101626108bf565b7f0000000000000000000000000000000000000000000000000000000000000000610162565b7f0000000000000000000000000000000000000000000000000000000000000000610162565b7f0000000000000000000000000000000000000000000000000000000000000000610162565b6101627f000000000000000000000000000000000000000000000000000000000000000081565b60007f00000000000000000000000000000000000000000000000000000000000000006103757f00000000000000000000000000000000000000000000000000000000000000007f0000000000000000000000000000000000000000000000000000000000000000610b8f565b61037f9190610b8f565b905090565b60008060006103d86040518061012001604052806000815260200160008152602001600081526020016000815260200160008152602001600081526020016000815260200160008152602001600081525090565b846080015185606001516103ec9190610b8f565b6020820152600060808201527f000000000000000000000000000000000000000000000000000000000000000060408201526104266108bf565b606082015260208101511561055d57602081015160608601516104489161090b565b60e08083019190915260408087015160208801519288015161010089015192517f70a0823100000000000000000000000000000000000000000000000000000000815273ffffffffffffffffffffffffffffffffffffffff938416600482015291939216906370a0823190602401602060405180830381865afa1580156104d3573d6000803e3d6000fd5b505050506040513d601f19601f820116820180604052508101906104f79190610ba7565b6105019190610b8f565b61050b9190610bc0565b808252602082015161051c91610b8f565b610100820181905260208201516105329161090b565b60a082015284516101008201516105579161054c91610b8f565b60208301519061090b565b60c08201525b7f00000000000000000000000000000000000000000000000000000000000000008160a0015111156106be5760006105e57f00000000000000000000000000000000000000000000000000000000000000007f00000000000000000000000000000000000000000000000000000000000000008460a001516105df9190610bc0565b9061090b565b90506106117f00000000000000000000000000000000000000000000000000000000000000008261094a565b61063b907f0000000000000000000000000000000000000000000000000000000000000000610b8f565b8260600181815161064c9190610b8f565b9052506106797f00000000000000000000000000000000000000000000000000000000000000008261094a565b6106a3907f0000000000000000000000000000000000000000000000000000000000000000610b8f565b826040018181516106b49190610b8f565b9052506107989050565b6107197f00000000000000000000000000000000000000000000000000000000000000006105df8360a001517f000000000000000000000000000000000000000000000000000000000000000061094a90919063ffffffff16565b8160600181815161072a9190610b8f565b90525060a0810151610783907f0000000000000000000000000000000000000000000000000000000000000000906105df907f00000000000000000000000000000000000000000000000000000000000000009061094a565b816040018181516107949190610b8f565b9052505b7f00000000000000000000000000000000000000000000000000000000000000008160e00151111561085c57600061081a7f00000000000000000000000000000000000000000000000000000000000000007f00000000000000000000000000000000000000000000000000000000000000008460e001516105df9190610bc0565b90506108467f00000000000000000000000000000000000000000000000000000000000000008261094a565b826060018181516108579190610b8f565b905250505b6108a18560c001516127106108719190610bc0565b61089b8360c0015161089589606001518a6080015187604001518c60a001516109a1565b9061094a565b90610a08565b60808201819052606082015160409092015190969195509350915050565b600061037f7f00000000000000000000000000000000000000000000000000000000000000007f0000000000000000000000000000000000000000000000000000000000000000610b8f565b600081156b033b2e3c9fd0803ce80000006002840419048411171561092f57600080fd5b506b033b2e3c9fd0803ce80000009190910260028204010490565b600081157ffffffffffffffffffffffffffffffffffffffffffe6268e1b017bfe18bffffff8390048411151761097f57600080fd5b506b033b2e3c9fd0803ce800000091026b019d971e4fe8401e74000000010490565b6000806109ae8587610b8f565b9050806109bf576000915050610a00565b60006109ce8561089588610a4b565b905060006109df856108958a610a4b565b905060006109f96109ef85610a4b565b6105df8486610b8f565b9450505050505b949350505050565b600081157fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffec7783900484111517610a3d57600080fd5b506127109102611388010490565b633b9aca008181029081048214610a6157600080fd5b919050565b604051610120810167ffffffffffffffff81118282101715610ab1577f4e487b7100000000000000000000000000000000000000000000000000000000600052604160045260246000fd5b60405290565b803573ffffffffffffffffffffffffffffffffffffffff81168114610a6157600080fd5b60006101208284031215610aee57600080fd5b610af6610a66565b823581526020830135602082015260408301356040820152606083013560608201526080830135608082015260a083013560a082015260c083013560c0820152610b4260e08401610ab7565b60e0820152610100610b55818501610ab7565b908201529392505050565b7f4e487b7100000000000000000000000000000000000000000000000000000000600052601160045260246000fd5b60008219821115610ba257610ba2610b60565b500190565b600060208284031215610bb957600080fd5b5051919050565b600082821015610bd257610bd2610b60565b50039056fea26469706673582212202429128531aba381237b8b5630526b46e16fae03dbb463f5a83786873419101a64736f6c634300080a0033",
+  "deployedBytecode": "0x608060405234801561001057600080fd5b50600436106100ea5760003560e01c8063a58987091161008c578063bc62690811610066578063bc6269081461026f578063d5cd739114610295578063f4202409146102bb578063fe5fd698146102e157600080fd5b8063a589870914610212578063a9c622f814610240578063acd786861461026757600080fd5b806334762ca5116100c857806334762ca51461019657806354c365c6146101bc5780636fb92589146101e357806380031e371461020a57600080fd5b80630542975c146100ef5780630b3429a21461014057806314e32da414610170575b600080fd5b6101167f000000000000000000000000000000000000000000000000000000000000000081565b60405173ffffffffffffffffffffffffffffffffffffffff90911681526020015b60405180910390f35b7f00000000000000000000000000000000000000000000000000000000000000005b604051908152602001610137565b7f0000000000000000000000000000000000000000000000000000000000000000610162565b7f0000000000000000000000000000000000000000000000000000000000000000610162565b6101627f000000000000000000000000000000000000000000000000000000000000000081565b6101627f000000000000000000000000000000000000000000000000000000000000000081565b610162610308565b610225610220366004610adb565b610384565b60408051938452602084019290925290820152606001610137565b6101627f000000000000000000000000000000000000000000000000000000000000000081565b6101626108bf565b7f0000000000000000000000000000000000000000000000000000000000000000610162565b7f0000000000000000000000000000000000000000000000000000000000000000610162565b7f0000000000000000000000000000000000000000000000000000000000000000610162565b6101627f000000000000000000000000000000000000000000000000000000000000000081565b60007f00000000000000000000000000000000000000000000000000000000000000006103757f00000000000000000000000000000000000000000000000000000000000000007f0000000000000000000000000000000000000000000000000000000000000000610b8f565b61037f9190610b8f565b905090565b60008060006103d86040518061012001604052806000815260200160008152602001600081526020016000815260200160008152602001600081526020016000815260200160008152602001600081525090565b846080015185606001516103ec9190610b8f565b6020820152600060808201527f000000000000000000000000000000000000000000000000000000000000000060408201526104266108bf565b606082015260208101511561055d57602081015160608601516104489161090b565b60e08083019190915260408087015160208801519288015161010089015192517f70a0823100000000000000000000000000000000000000000000000000000000815273ffffffffffffffffffffffffffffffffffffffff938416600482015291939216906370a0823190602401602060405180830381865afa1580156104d3573d6000803e3d6000fd5b505050506040513d601f19601f820116820180604052508101906104f79190610ba7565b6105019190610b8f565b61050b9190610bc0565b808252602082015161051c91610b8f565b610100820181905260208201516105329161090b565b60a082015284516101008201516105579161054c91610b8f565b60208301519061090b565b60c08201525b7f00000000000000000000000000000000000000000000000000000000000000008160a0015111156106be5760006105e57f00000000000000000000000000000000000000000000000000000000000000007f00000000000000000000000000000000000000000000000000000000000000008460a001516105df9190610bc0565b9061090b565b90506106117f00000000000000000000000000000000000000000000000000000000000000008261094a565b61063b907f0000000000000000000000000000000000000000000000000000000000000000610b8f565b8260600181815161064c9190610b8f565b9052506106797f00000000000000000000000000000000000000000000000000000000000000008261094a565b6106a3907f0000000000000000000000000000000000000000000000000000000000000000610b8f565b826040018181516106b49190610b8f565b9052506107989050565b6107197f00000000000000000000000000000000000000000000000000000000000000006105df8360a001517f000000000000000000000000000000000000000000000000000000000000000061094a90919063ffffffff16565b8160600181815161072a9190610b8f565b90525060a0810151610783907f0000000000000000000000000000000000000000000000000000000000000000906105df907f00000000000000000000000000000000000000000000000000000000000000009061094a565b816040018181516107949190610b8f565b9052505b7f00000000000000000000000000000000000000000000000000000000000000008160e00151111561085c57600061081a7f00000000000000000000000000000000000000000000000000000000000000007f00000000000000000000000000000000000000000000000000000000000000008460e001516105df9190610bc0565b90506108467f00000000000000000000000000000000000000000000000000000000000000008261094a565b826060018181516108579190610b8f565b905250505b6108a18560c001516127106108719190610bc0565b61089b8360c0015161089589606001518a6080015187604001518c60a001516109a1565b9061094a565b90610a08565b60808201819052606082015160409092015190969195509350915050565b600061037f7f00000000000000000000000000000000000000000000000000000000000000007f0000000000000000000000000000000000000000000000000000000000000000610b8f565b600081156b033b2e3c9fd0803ce80000006002840419048411171561092f57600080fd5b506b033b2e3c9fd0803ce80000009190910260028204010490565b600081157ffffffffffffffffffffffffffffffffffffffffffe6268e1b017bfe18bffffff8390048411151761097f57600080fd5b506b033b2e3c9fd0803ce800000091026b019d971e4fe8401e74000000010490565b6000806109ae8587610b8f565b9050806109bf576000915050610a00565b60006109ce8561089588610a4b565b905060006109df856108958a610a4b565b905060006109f96109ef85610a4b565b6105df8486610b8f565b9450505050505b949350505050565b600081157fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffec7783900484111517610a3d57600080fd5b506127109102611388010490565b633b9aca008181029081048214610a6157600080fd5b919050565b604051610120810167ffffffffffffffff81118282101715610ab1577f4e487b7100000000000000000000000000000000000000000000000000000000600052604160045260246000fd5b60405290565b803573ffffffffffffffffffffffffffffffffffffffff81168114610a6157600080fd5b60006101208284031215610aee57600080fd5b610af6610a66565b823581526020830135602082015260408301356040820152606083013560608201526080830135608082015260a083013560a082015260c083013560c0820152610b4260e08401610ab7565b60e0820152610100610b55818501610ab7565b908201529392505050565b7f4e487b7100000000000000000000000000000000000000000000000000000000600052601160045260246000fd5b60008219821115610ba257610ba2610b60565b500190565b600060208284031215610bb957600080fd5b5051919050565b600082821015610bd257610bd2610b60565b50039056fea26469706673582212202429128531aba381237b8b5630526b46e16fae03dbb463f5a83786873419101a64736f6c634300080a0033",
+  "devdoc": {
+    "author": "Aave",
+    "details": "The model of interest rate is based on 2 slopes, one before the `OPTIMAL_USAGE_RATIO` point of usage and another from that one to 100%. - An instance of this same contract, can't be used across different Aave markets, due to the caching   of the PoolAddressesProvider",
+    "kind": "dev",
+    "methods": {
+      "calculateInterestRates((uint256,uint256,uint256,uint256,uint256,uint256,uint256,address,address))": {
+        "params": {
+          "params": "The parameters needed to calculate interest rates"
+        },
+        "returns": {
+          "_0": "liquidityRate The liquidity rate expressed in rays",
+          "_1": "stableBorrowRate The stable borrow rate expressed in rays",
+          "_2": "variableBorrowRate The variable borrow rate expressed in rays"
+        }
+      },
+      "constructor": {
+        "details": "Constructor.",
+        "params": {
+          "baseStableRateOffset": "The premium on top of variable rate for base stable borrowing rate",
+          "baseVariableBorrowRate": "The base variable borrow rate",
+          "optimalStableToTotalDebtRatio": "The optimal stable debt to total debt ratio of the reserve",
+          "optimalUsageRatio": "The optimal usage ratio",
+          "provider": "The address of the PoolAddressesProvider contract",
+          "stableRateExcessOffset": "The premium on top of stable rate when there stable debt surpass the threshold",
+          "stableRateSlope1": "The stable rate slope below optimal usage ratio",
+          "stableRateSlope2": "The stable rate slope above optimal usage ratio",
+          "variableRateSlope1": "The variable rate slope below optimal usage ratio",
+          "variableRateSlope2": "The variable rate slope above optimal usage ratio"
+        }
+      },
+      "getBaseStableBorrowRate()": {
+        "returns": {
+          "_0": "The base stable borrow rate, expressed in ray"
+        }
+      },
+      "getBaseVariableBorrowRate()": {
+        "returns": {
+          "_0": "The base variable borrow rate, expressed in ray"
+        }
+      },
+      "getMaxVariableBorrowRate()": {
+        "returns": {
+          "_0": "The maximum variable borrow rate, expressed in ray"
+        }
+      },
+      "getStableRateExcessOffset()": {
+        "details": "It's an additional premium applied to the stable when stable debt > OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO",
+        "returns": {
+          "_0": "The stable rate excess offset, expressed in ray"
+        }
+      },
+      "getStableRateSlope1()": {
+        "details": "It's the stable rate when usage ratio > 0 and <= OPTIMAL_USAGE_RATIO",
+        "returns": {
+          "_0": "The stable rate slope, expressed in ray"
+        }
+      },
+      "getStableRateSlope2()": {
+        "details": "It's the variable rate when usage ratio > OPTIMAL_USAGE_RATIO",
+        "returns": {
+          "_0": "The stable rate slope, expressed in ray"
+        }
+      },
+      "getVariableRateSlope1()": {
+        "details": "It's the variable rate when usage ratio > 0 and <= OPTIMAL_USAGE_RATIO",
+        "returns": {
+          "_0": "The variable rate slope, expressed in ray"
+        }
+      },
+      "getVariableRateSlope2()": {
+        "details": "It's the variable rate when usage ratio > OPTIMAL_USAGE_RATIO",
+        "returns": {
+          "_0": "The variable rate slope, expressed in ray"
+        }
+      }
+    },
+    "stateVariables": {
+      "ADDRESSES_PROVIDER": {
+        "return": "The address of the PoolAddressesProvider contract",
+        "returns": {
+          "_0": "The address of the PoolAddressesProvider contract"
+        }
+      },
+      "MAX_EXCESS_STABLE_TO_TOTAL_DEBT_RATIO": {
+        "details": "It's always equal to 1-optimal stable to total debt ratio (added as constant for gas optimizations)",
+        "return": "The max excess stable to total debt ratio, expressed in ray.",
+        "returns": {
+          "_0": "The max excess stable to total debt ratio, expressed in ray."
+        }
+      },
+      "MAX_EXCESS_USAGE_RATIO": {
+        "details": "It's always equal to 1-optimal usage ratio (added as constant for gas optimizations)",
+        "return": "The max excess usage ratio, expressed in ray.",
+        "returns": {
+          "_0": "The max excess usage ratio, expressed in ray."
+        }
+      },
+      "OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO": {
+        "return": "The optimal stable to total debt ratio, expressed in ray.",
+        "returns": {
+          "_0": "The optimal stable to total debt ratio, expressed in ray."
+        }
+      },
+      "OPTIMAL_USAGE_RATIO": {
+        "return": "The optimal usage ratio, expressed in ray.",
+        "returns": {
+          "_0": "The optimal usage ratio, expressed in ray."
+        }
+      }
+    },
+    "title": "DefaultReserveInterestRateStrategy contract",
+    "version": 1
+  },
+  "userdoc": {
+    "kind": "user",
+    "methods": {
+      "ADDRESSES_PROVIDER()": {
+        "notice": "Returns the address of the PoolAddressesProvider"
+      },
+      "MAX_EXCESS_STABLE_TO_TOTAL_DEBT_RATIO()": {
+        "notice": "Returns the excess stable debt ratio above the optimal."
+      },
+      "MAX_EXCESS_USAGE_RATIO()": {
+        "notice": "Returns the excess usage ratio above the optimal."
+      },
+      "OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO()": {
+        "notice": "Returns the optimal stable to total debt ratio of the reserve."
+      },
+      "OPTIMAL_USAGE_RATIO()": {
+        "notice": "Returns the usage ratio at which the pool aims to obtain most competitive borrow rates."
+      },
+      "calculateInterestRates((uint256,uint256,uint256,uint256,uint256,uint256,uint256,address,address))": {
+        "notice": "Calculates the interest rates depending on the reserve's state and configurations"
+      },
+      "getBaseStableBorrowRate()": {
+        "notice": "Returns the base stable borrow rate"
+      },
+      "getBaseVariableBorrowRate()": {
+        "notice": "Returns the base variable borrow rate"
+      },
+      "getMaxVariableBorrowRate()": {
+        "notice": "Returns the maximum variable borrow rate"
+      },
+      "getStableRateExcessOffset()": {
+        "notice": "Returns the stable rate excess offset"
+      },
+      "getStableRateSlope1()": {
+        "notice": "Returns the stable rate slope below optimal usage ratio"
+      },
+      "getStableRateSlope2()": {
+        "notice": "Returns the stable rate slope above optimal usage ratio"
+      },
+      "getVariableRateSlope1()": {
+        "notice": "Returns the variable rate slope below optimal usage ratio"
+      },
+      "getVariableRateSlope2()": {
+        "notice": "Returns the variable rate slope above optimal usage ratio"
+      }
+    },
+    "notice": "Implements the calculation of the interest rates depending on the reserve state",
+    "version": 1
+  },
+  "storageLayout": {
+    "storage": [],
+    "types": null
+  }
+}
diff --git a/apps/frontend/src/hooks/aave/constants.ts b/apps/frontend/src/hooks/aave/constants.ts
new file mode 100644
index 000000000..71536a314
--- /dev/null
+++ b/apps/frontend/src/hooks/aave/constants.ts
@@ -0,0 +1 @@
+export const BIG_NUMBER_PRECISION_TWENTY_SEVEN = 27;
diff --git a/apps/frontend/src/hooks/aave/useAaveRates.tsx b/apps/frontend/src/hooks/aave/useAaveRates.tsx
new file mode 100644
index 000000000..d339c08e6
--- /dev/null
+++ b/apps/frontend/src/hooks/aave/useAaveRates.tsx
@@ -0,0 +1,149 @@
+import { useMemo, useState } from 'react';
+
+import { BigNumber, Contract } from 'ethers';
+import { formatUnits } from 'ethers/lib/utils';
+import { useSearchParams } from 'react-router-dom';
+
+import { useAccount } from '../useAccount';
+import rateStrategy from './ReserveStrategy-rateStrategyStableOne.json';
+import { BIG_NUMBER_PRECISION_TWENTY_SEVEN } from './constants';
+import { useAaveReservesData } from './useAaveReservesData';
+
+export interface IRatesDataResult {
+  currentUsageRatio: string;
+  baseStableBorrowRate: string;
+  optimalUsageRatio: string;
+  baseVariableBorrowRate: string;
+  variableRateSlope1: string;
+  variableRateSlope2: string;
+  stableRateSlope1: string;
+  stableRateSlope2: string;
+  //baseStableRateOffset: string;
+  stableRateExcessOffset: string;
+  optimalStableToTotalDebtRatio: string;
+  underlyingAsset: string;
+  name: string;
+  symbol: string;
+  decimals: string;
+}
+
+function calculateUtilizationRate(
+  totalDebt: string,
+  availableLiquidity: string,
+): string {
+  // Convert inputs to BigNumber
+  const _totalDebt: BigNumber = BigNumber.from(totalDebt);
+  const _liquidity: BigNumber = BigNumber.from(availableLiquidity);
+
+  return _totalDebt.div(_totalDebt.add(_liquidity)).toString();
+}
+
+export const useAaveInterestRatesData = (): {
+  data: IRatesDataResult | null;
+  error: string | null;
+  loading: boolean;
+} => {
+  const [data, setData] = useState<any>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const { provider } = useAccount();
+
+  // const { provider } = useAccount();
+  const [searchParams] = useSearchParams();
+  const symbol = searchParams.get('asset') || '';
+  const { reserves } = useAaveReservesData();
+  const reserveAsset = reserves.find(
+    r => r.symbol.toLocaleLowerCase() === symbol.toLocaleLowerCase(),
+  );
+  const interestRateStrategyAddress = reserveAsset?.interestRateStrategyAddress;
+  console.log('reserves', reserves);
+  console.log('reserveAsset', reserveAsset);
+  console.log('interestRateStrategyAddress', interestRateStrategyAddress);
+
+  useMemo(() => {
+    const fetchData = async () => {
+      try {
+        if (!interestRateStrategyAddress) {
+          console.log(
+            'Interest Rate Strategy Address not found',
+            reserveAsset,
+            reserveAsset?.interestRateStrategyAddress,
+          );
+          setError('Interest Rate Strategy Address not found');
+          return;
+        }
+        const ratesStrategy = new Contract(
+          interestRateStrategyAddress as string,
+          rateStrategy.abi,
+          provider,
+        );
+        const utilizationRate = calculateUtilizationRate(
+          reserveAsset.totalDebt,
+          reserveAsset.availableLiquidity,
+        );
+        console.log('utilizationRate', utilizationRate);
+
+        const [stableRateExcessOffset, optimalStableToTotalDebtRatio] =
+          await Promise.all([
+            ratesStrategy.getStableRateExcessOffset(),
+            ratesStrategy.OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO(),
+          ]);
+
+        const ratesData = {
+          currentUsageRatio: formatUnits(utilizationRate, 2).toString(),
+          optimalUsageRatio: formatUnits(
+            reserveAsset.optimalUsageRatio,
+            BIG_NUMBER_PRECISION_TWENTY_SEVEN,
+          ).toString(),
+          baseVariableBorrowRate: formatUnits(
+            reserveAsset.baseVariableBorrowRate,
+            BIG_NUMBER_PRECISION_TWENTY_SEVEN,
+          ).toString(),
+          variableRateSlope1: formatUnits(
+            reserveAsset.variableRateSlope1,
+            BIG_NUMBER_PRECISION_TWENTY_SEVEN,
+          ).toString(),
+          variableRateSlope2: formatUnits(
+            reserveAsset.variableRateSlope2,
+            BIG_NUMBER_PRECISION_TWENTY_SEVEN,
+          ).toString(),
+          stableRateSlope1: formatUnits(
+            reserveAsset.stableRateSlope1,
+            BIG_NUMBER_PRECISION_TWENTY_SEVEN,
+          ).toString(),
+          stableRateSlope2: formatUnits(
+            reserveAsset.stableRateSlope2,
+            BIG_NUMBER_PRECISION_TWENTY_SEVEN,
+          ).toString(),
+          baseStableBorrowRate: formatUnits(
+            reserveAsset.baseStableBorrowRate,
+            BIG_NUMBER_PRECISION_TWENTY_SEVEN,
+          ).toString(),
+          stableRateExcessOffset: formatUnits(
+            stableRateExcessOffset,
+            BIG_NUMBER_PRECISION_TWENTY_SEVEN,
+          ).toString(),
+          optimalStableToTotalDebtRatio: formatUnits(
+            optimalStableToTotalDebtRatio,
+            BIG_NUMBER_PRECISION_TWENTY_SEVEN,
+          ).toString(),
+          underlyingAsset: reserveAsset.underlyingAsset.toString(),
+          name: reserveAsset.name.toString(),
+          symbol: reserveAsset.symbol.toString(),
+          decimals: reserveAsset.decimals.toString(),
+        };
+        setData(ratesData);
+      } catch (error) {
+        setError(error.message);
+      } finally {
+        setLoading(false);
+      }
+
+      return data;
+    };
+    fetchData();
+  }, [data, interestRateStrategyAddress, provider, reserveAsset]);
+
+  return { data, loading, error };
+};
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index cc44fef38..ba97e0049 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -945,7 +945,13 @@
             "reserveSize": "Reserve size",
             "availableLiquidity": "Available liquidity",
             "utilizationRate": "Utilization rate",
-            "oraclePrice": "Oracle price"
+            "oraclePrice": "Oracle price",
+            "underlyingToken": "Underlying token",
+            "aToken": "aToken",
+            "variableDebtToken": "Variable debt token",
+            "variableDebtTokenName": "Variable debt {{symbol}}",
+            "stableDebtToken": "Stable debt token",
+            "stableDebtTokenName": "Stable debt {{symbol}}"
         },
         "reserveStatusTab": {
             "title": "Reserve status",

From d8842457e3e0208626453b31152fb2c40e7928c4 Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Thu, 5 Sep 2024 16:58:31 +0300
Subject: [PATCH 077/116] Saf 20/pool details integration sidebar (#41)

* cleanup

* fixes

* fixes. Connect provider. Fix repay adding proper allowance. Fix switch collateral token.address instead of token

* refetch user data based on blocknumber

* fix modal closing on lending positions change plus style adjustments

* fix withdraw modals

* modal fixes

* fix calculation
add balances and filter zero balances

* use memo items

* fix dependencies

* data normalizers

* Apply suggestions from code review

Co-authored-by: Juan <juandahl@users.noreply.github.com>

* Update apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx

Co-authored-by: Juan <juandahl@users.noreply.github.com>

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

Co-authored-by: Juan <juandahl@users.noreply.github.com>

* wip refactor done. Missing hooks merge

* implementations and cleanup

* cleanup

* cleanup

* math safety

* more math safety

* cleanup

* clenaup

* emode mocks

* enable emode working

* emode working

* fixes and cleanup

* remove whitelist

* toggle lend mode working

* fixes and cleanup

* add collateral check

* fix collateral

* fixes

* Fix. Missing fix on borrow.

* fix borrow power to match desired collateral ratio

* rollback to working contracts for borrow eth

* fixes

* fixes and max amount

* loading when account changes

* close emode on complete

* disable emode if just one category

* error handling

* fixes. Connect provider. Fix repay adding proper allowance. Fix switch collateral token.address instead of token

* refetch user data based on blocknumber

* fix calculation
add balances and filter zero balances

* [SAF-20] wip testing rates data from contract Reserve Rate Strategy

* [SAF-20] wip integrating useAaveRates hook

* [SAF-20] fix hook useAaveRates

* connect topbar

* tokens links

* add link to oracle

* [SAF_20] fix: parse totalDebt using decimals

* sidebar integration

* Connect topbar, add token links and add to wallet (#37)

* connect topbar

* tokens links

* add link to oracle

* fix merge error

---------

Co-authored-by: Juan <juandahl@users.noreply.github.com>
Co-authored-by: Luciano Perez Cerra <luchopcerra@gmail.com>
---
 .../AaveReserveOverviewPage.tsx               |   7 +-
 .../InterestRateModelGraph.tsx                |   4 +-
 .../WalletOverview/WalletOverview.tsx         | 101 +++++++++---------
 .../components/BorrowAction/BorrowAction.tsx  |  50 +++++++--
 .../components/SupplyAction/SupplyAction.tsx  |  50 +++++++--
 .../frontend/src/locales/en/translations.json |   4 +-
 .../src/utils/aave/AaveUserReservesSummary.ts |   2 +
 7 files changed, 141 insertions(+), 77 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
index 55f11a7b2..6b43554d9 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
@@ -121,7 +121,10 @@ const AaveReserveOverviewPage: FC = () => {
             <BorrowDetailsGraph />
             <EModeDetails />
             {interestRatesData && (
-              <InterestRateModelGraph rates={interestRatesData} />
+              <InterestRateModelGraph
+                rates={interestRatesData}
+                reserveFactor={reserve?.reserveFactor}
+              />
             )}
           </div>
 
@@ -132,7 +135,7 @@ const AaveReserveOverviewPage: FC = () => {
               'lg:block space-y-4 w-[450px] shrink-0',
             )}
           >
-            <WalletOverview asset={{ symbol: 'btc', name: 'bitcoin' }} />
+            <WalletOverview symbol={symbol} />
           </div>
         </div>
       </div>
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
index db244de56..d850c613d 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
@@ -16,10 +16,12 @@ const pageTranslations = translations.aaveReserveOverviewPage.interestRateModel;
 
 type InterestRateModelGraphProps = {
   rates: IRatesDataResult;
+  reserveFactor: string | undefined;
 };
 
 export const InterestRateModelGraph: FC<InterestRateModelGraphProps> = ({
   rates,
+  reserveFactor,
 }) => {
   const [open, setOpen] = useState<boolean>(true);
   const { isMobile } = useIsMobile();
@@ -64,7 +66,7 @@ export const InterestRateModelGraph: FC<InterestRateModelGraphProps> = ({
             <StatisticsCard
               label={t(pageTranslations.reserveFactor)}
               help={t(pageTranslations.reserveFactorInfo)}
-              value={<AmountRenderer value={85.94} suffix="%" />}
+              value={<AmountRenderer value={reserveFactor ?? 0} suffix="%" />}
             />
             <StatisticsCard
               label={t(pageTranslations.collectorContract)}
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/WalletOverview.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/WalletOverview.tsx
index c41e59ba6..ef9b931e6 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/WalletOverview.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/WalletOverview.tsx
@@ -1,45 +1,44 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useEffect, useMemo, useState } from 'react';
 
 import { t } from 'i18next';
 
+import { AssetDetailsData, getAssetData } from '@sovryn/contracts';
 import {
   Button,
   ErrorBadge,
   ErrorLevel,
   Paragraph,
   ParagraphSize,
-  Tabs,
-  TabSize,
-  TabType,
 } from '@sovryn/ui';
 import { Decimal } from '@sovryn/utils';
 
+import { BOB_CHAIN_ID } from '../../../../../config/chains';
+
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
-import { ETH, WETH } from '../../../../../constants/currencies';
 import { useWalletConnect } from '../../../../../hooks';
+import { useAaveUserReservesData } from '../../../../../hooks/aave/useAaveUserReservesData';
 import { translations } from '../../../../../locales/i18n';
 import { BorrowAction } from './components/BorrowAction/BorrowAction';
 import { SupplyAction } from './components/SupplyAction/SupplyAction';
 
 const pageTranslations = translations.aaveReserveOverviewPage;
 
-const ETH_ASSET_SYMBOLS = [ETH, WETH];
-
 type WalletOverviewProps = {
-  asset: {
-    symbol: string;
-    name: string;
-  };
+  symbol: string;
 };
 
-export const WalletOverview: FC<WalletOverviewProps> = ({
-  asset: initialAsset,
-}) => {
-  const [asset, setAsset] = useState(initialAsset.symbol);
+export const WalletOverview: FC<WalletOverviewProps> = ({ symbol }) => {
+  const [asset, setAsset] = useState<AssetDetailsData | null>();
   const { account, connectWallet, pending } = useWalletConnect();
+  const { summary } = useAaveUserReservesData();
+
+  useEffect(() => {
+    getAssetData(symbol, BOB_CHAIN_ID).then(setAsset);
+  }, [symbol]);
 
-  const assetBalance = Decimal.from(0); // TODO: mocked
-  const maxSupplyCap = true; // TODO: mocked
+  const reserveSummary = useMemo(() => {
+    return summary.reserves.find(r => r.reserve.symbol === symbol);
+  }, [summary, symbol]);
 
   return (
     <div className="bg-gray-90 p-6 rounded space-y-6 lg:bg-gray-90 lg:p-6 border border-gray-60">
@@ -50,47 +49,47 @@ export const WalletOverview: FC<WalletOverviewProps> = ({
       {account ? (
         <>
           <div>
-            {ETH_ASSET_SYMBOLS.includes(asset) && (
-              <Tabs
-                className="mb-5"
-                index={ETH_ASSET_SYMBOLS.indexOf(asset)}
-                onChange={e => setAsset(ETH_ASSET_SYMBOLS[e])}
-                items={ETH_ASSET_SYMBOLS.map(s => ({
-                  activeClassName: 'text-primary-20',
-                  dataAttribute: s,
-                  label: s,
-                }))}
-                size={TabSize.normal}
-                type={TabType.secondary}
+            <Paragraph
+              size={ParagraphSize.small}
+              className="text-gray-30 lg:ml-3 lg:mb-2"
+            >
+              {t(pageTranslations.yourWalletTab.walletBalance)}
+            </Paragraph>
+            <div className="lg:px-3 lg:py-6 lg:bg-gray-80 lg:rounded lg:w-full">
+              <AmountRenderer
+                value={reserveSummary?.walletBalance ?? 0}
+                precision={2}
+                suffix={asset?.symbol ?? ''}
+                className="text-2xl text-white font-medium"
               />
-            )}
-
-            <div>
-              <Paragraph
-                size={ParagraphSize.small}
-                className="text-gray-30 lg:ml-3 lg:mb-2"
-              >
-                {t(pageTranslations.yourWalletTab.walletBalance)}
-              </Paragraph>
-              <div className="lg:px-3 lg:py-6 lg:bg-gray-80 lg:rounded lg:w-full">
-                <AmountRenderer
-                  value={0}
-                  suffix={asset}
-                  className="text-2xl text-white font-medium"
-                />
-              </div>
             </div>
           </div>
 
-          <div className="space-y-2">
+          <div className="space-y-3">
             {/* Supply */}
-            <SupplyAction asset={asset} />
+            <SupplyAction
+              asset={asset?.symbol ?? ''}
+              availableToSupply={Decimal.from(
+                reserveSummary?.walletBalance ?? 0,
+              )}
+              availableToSupplyUSD={Decimal.from(
+                reserveSummary?.walletBalanceUsd ?? 0,
+              )}
+            />
 
             {/* Borrow */}
-            <BorrowAction asset={asset} />
+            <BorrowAction
+              asset={asset?.symbol ?? ''}
+              availableToBorrow={Decimal.from(
+                reserveSummary?.availableToBorrow ?? 0,
+              )}
+              availableToBorrowUsd={Decimal.from(
+                reserveSummary?.availableToBorrowUSD ?? 0,
+              )}
+            />
           </div>
 
-          {assetBalance.lte(0) && (
+          {reserveSummary?.walletBalance.lte(0) && (
             <ErrorBadge
               level={ErrorLevel.Warning}
               message={t(pageTranslations.yourWalletTab.yourWalletIsEmpty)}
@@ -98,7 +97,9 @@ export const WalletOverview: FC<WalletOverviewProps> = ({
             />
           )}
 
-          {maxSupplyCap && (
+          {Decimal.from(reserveSummary?.reserve.supplyUsageRatio ?? 0).gte(
+            1,
+          ) && (
             <ErrorBadge
               level={ErrorLevel.Critical}
               message={t(pageTranslations.yourWalletTab.noSupply)}
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx
index 950795d40..d7a17f933 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx
@@ -1,31 +1,48 @@
-import React, { FC, useMemo } from 'react';
+import React, { FC, useCallback, useState } from 'react';
 
 import { t } from 'i18next';
 
-import { Button, HelperButton, Paragraph, ParagraphSize } from '@sovryn/ui';
+import {
+  Button,
+  Dialog,
+  DialogBody,
+  DialogHeader,
+  HelperButton,
+  Paragraph,
+  ParagraphSize,
+} from '@sovryn/ui';
 import { Decimal } from '@sovryn/utils';
 
 import { AssetAmountPriceRenderer } from '../../../../../../2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer';
 import { translations } from '../../../../../../../locales/i18n';
+import { BorrowForm } from '../../../../../AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm';
 
 const pageTranslations = translations.aaveReserveOverviewPage;
 
 type BorrowActionProps = {
   asset: string;
+  availableToBorrow: Decimal;
+  availableToBorrowUsd: Decimal;
 };
 
-export const BorrowAction: FC<BorrowActionProps> = ({ asset }) => {
-  const availableToBorrow = 0; // TODO: this is mocked
-  const availableToBorrowUsd = 0;
+export const BorrowAction: FC<BorrowActionProps> = ({
+  asset,
+  availableToBorrow,
+  availableToBorrowUsd,
+}) => {
+  const [open, setOpen] = useState(false);
 
-  const isBorrowDisabled = useMemo(() => {
-    // TODO: add conditions
-    return Decimal.from(availableToBorrow).lte(0);
-  }, [availableToBorrow]);
+  const onBorrowClose = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  const onBorrowOpen = useCallback(() => {
+    setOpen(true);
+  }, []);
 
   return (
     <div className="flex justify-between items-center">
-      <div>
+      <div className="space-y-2">
         <Paragraph
           size={ParagraphSize.small}
           className="text-gray-30 flex items-center gap-1"
@@ -45,9 +62,20 @@ export const BorrowAction: FC<BorrowActionProps> = ({ asset }) => {
       </div>
 
       <Button
+        onClick={onBorrowOpen}
         text={t(pageTranslations.yourWalletTab.borrow)}
-        disabled={isBorrowDisabled}
+        disabled={availableToBorrow.lte(0)}
       />
+
+      <Dialog disableFocusTrap isOpen={open}>
+        <DialogHeader
+          title={t(translations.aavePage.common.borrow)}
+          onClose={onBorrowClose}
+        />
+        <DialogBody className="flex flex-col gap-6">
+          <BorrowForm asset={asset} onComplete={onBorrowClose} />
+        </DialogBody>
+      </Dialog>
     </div>
   );
 };
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx
index 02f730782..44d2e78de 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx
@@ -1,31 +1,48 @@
-import React, { FC, useMemo } from 'react';
+import React, { FC, useCallback, useState } from 'react';
 
 import { t } from 'i18next';
 
-import { Button, HelperButton, Paragraph, ParagraphSize } from '@sovryn/ui';
+import {
+  Button,
+  Dialog,
+  DialogBody,
+  DialogHeader,
+  HelperButton,
+  Paragraph,
+  ParagraphSize,
+} from '@sovryn/ui';
 import { Decimal } from '@sovryn/utils';
 
 import { AssetAmountPriceRenderer } from '../../../../../../2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer';
 import { translations } from '../../../../../../../locales/i18n';
+import { LendForm } from '../../../../../AavePage/components/LendAssetsList/components/LendForm/LendForm';
 
 const pageTranslations = translations.aaveReserveOverviewPage;
 
 type SupplyActionProps = {
   asset: string;
+  availableToSupply: Decimal;
+  availableToSupplyUSD: Decimal;
 };
 
-export const SupplyAction: FC<SupplyActionProps> = ({ asset }) => {
-  const availableToSupply = 0; // TODO: this is mocked.
-  const availableToSupplyUSD = 0; // TODO: this is mocked.
+export const SupplyAction: FC<SupplyActionProps> = ({
+  asset,
+  availableToSupply,
+  availableToSupplyUSD,
+}) => {
+  const [open, setOpen] = useState(false);
 
-  const isSupplyDisabled = useMemo(() => {
-    // TODO: add conditions
-    return Decimal.from(availableToSupply).lte(0);
-  }, [availableToSupply]);
+  const onSupplyClose = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  const onSupplyOpen = useCallback(() => {
+    setOpen(true);
+  }, []);
 
   return (
     <div className="flex justify-between items-center">
-      <div>
+      <div className="space-y-2">
         <div className="flex items-center gap-1">
           <Paragraph size={ParagraphSize.small} className="text-gray-30">
             {t(pageTranslations.yourWalletTab.availableToSupply)}{' '}
@@ -44,9 +61,20 @@ export const SupplyAction: FC<SupplyActionProps> = ({ asset }) => {
       </div>
 
       <Button
+        onClick={onSupplyOpen}
         text={t(pageTranslations.yourWalletTab.supply)}
-        disabled={isSupplyDisabled}
+        disabled={availableToSupply.lte(0)}
       />
+
+      <Dialog disableFocusTrap isOpen={open}>
+        <DialogHeader
+          title={t(pageTranslations.yourWalletTab.supply)}
+          onClose={onSupplyClose}
+        />
+        <DialogBody className="flex flex-col gap-6">
+          <LendForm asset={asset} onComplete={onSupplyClose} />
+        </DialogBody>
+      </Dialog>
     </div>
   );
 };
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index ba97e0049..646b4d232 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -961,9 +961,9 @@
             "title": "Your wallet",
             "walletBalance": "Wallet balance",
             "availableToSupply": "Available to supply",
-            "availableToSupplyInfo": "How much you can borrow of this token with this wallet",
+            "availableToSupplyInfo": "This is the total amount that you are able to supply to in this reserve. You are able to supply your wallet balance up until the supply cap is reached.",
             "availableToBorrow": "Available to borrow",
-            "availableToBorrowInfo": "How much you can borrow of this token with this wallet",
+            "availableToBorrowInfo": "This is the total amount available for you to borrow. You can borrow based on your collateral and until the borrow cap is reached.",
             "supply": "Supply",
             "borrow": "Borrow",
             "yourWalletIsEmpty": "Your wallet is empty. Purchase or transfer assets",
diff --git a/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts b/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
index 9c51c2caa..eb7444296 100644
--- a/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
+++ b/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
@@ -40,6 +40,7 @@ export type ReserveSummary = {
   borrowedUSD: Decimal;
   borrowRateMode: BorrowRateMode;
   availableToBorrow: Decimal;
+  availableToBorrowUSD: Decimal;
 };
 
 export type AaveUserReservesSummary = {
@@ -99,6 +100,7 @@ export class AaveUserReservesSummaryFactory {
         borrowedUSD: Decimal.ZERO,
         borrowRateMode: BorrowRateMode.VARIABLE,
         availableToBorrow: Decimal.ZERO,
+        availableToBorrowUSD: Decimal.ZERO,
       })),
     };
   }

From 7b729323bdd353ab0c1c552c76b5c677c4a803b2 Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Fri, 6 Sep 2024 15:28:32 +0300
Subject: [PATCH 078/116] Saf 20/pool details integration graphs stats (#42)

* cleanup

* fixes

* fixes. Connect provider. Fix repay adding proper allowance. Fix switch collateral token.address instead of token

* refetch user data based on blocknumber

* fix modal closing on lending positions change plus style adjustments

* fix withdraw modals

* modal fixes

* fix calculation
add balances and filter zero balances

* use memo items

* fix dependencies

* data normalizers

* Apply suggestions from code review

Co-authored-by: Juan <juandahl@users.noreply.github.com>

* Update apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx

Co-authored-by: Juan <juandahl@users.noreply.github.com>

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

Co-authored-by: Juan <juandahl@users.noreply.github.com>

* wip refactor done. Missing hooks merge

* implementations and cleanup

* cleanup

* cleanup

* math safety

* more math safety

* cleanup

* clenaup

* emode mocks

* enable emode working

* emode working

* fixes and cleanup

* remove whitelist

* toggle lend mode working

* fixes and cleanup

* add collateral check

* fix collateral

* fixes

* Fix. Missing fix on borrow.

* fix borrow power to match desired collateral ratio

* rollback to working contracts for borrow eth

* fixes

* fixes and max amount

* loading when account changes

* close emode on complete

* disable emode if just one category

* error handling

* fixes. Connect provider. Fix repay adding proper allowance. Fix switch collateral token.address instead of token

* refetch user data based on blocknumber

* fix calculation
add balances and filter zero balances

* [SAF-20] wip testing rates data from contract Reserve Rate Strategy

* [SAF-20] wip integrating useAaveRates hook

* [SAF-20] fix hook useAaveRates

* [SAF_20] fix: parse totalDebt using decimals

* Connect topbar, add token links and add to wallet (#37)

* connect topbar

* tokens links

* add link to oracle

* Money Market Mockups (#990)

* aave page static components, mobile first

* responsive panels

* functional static borrow asset list

* cleanup

* renaming

* lend assets list

* Lend positions list

* fixes and cleanup

* cleanup

* cleanup

* cleanup

* static ui done. missing validations

* add validations

* add validations

* move errors down

* borrow form modal

* pr comments

* pr comments

* fix typo

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

Co-authored-by: Juan Dahl <juandahl@users.noreply.github.com>

* repay modals

* lend modal

* use simple table row

* asset amount input

* add missing translations

* fix translation

* units and prices mock

* setup layout for pool details screen

* wallet overview panel

* emode card mock

* max with for emode category

* top bar mock

* network switch

* cleanup

* ui fixes

* ui fixes, usd prices

* Efficiency card

* ordering

* fix filter 0 balances checkbox

* pr comment

* token

* Mocked table cards plus refactor of statistics card (#14)

* mocked table cards plus refactor of statistics card

* ui fixes

* Saf 41 charts (#16)

* mocked table cards plus refactor of statistics card

* ui fixes

* [SAF-41] give each graph it's own chart component

* [SAF-41] add htmlLegend plugin in charts; remove comments and refactor some colors moving them to constants

---------

Co-authored-by: matzapata <matuzapata@gmail.com>

* removed view transactions button (out of scope)

* fix breakpoints

* [SAF-41] fix color constant and background for mobile vs desktop views (#20)

* [SAF-41] fix color constant and background for mobile vs desktop views

* [SAF-41] use theme variables for colors and breakpoint usage for better consistency

* Apply suggestions from code review

Co-authored-by: Juan Dahl <juandahl@users.noreply.github.com>

---------

Co-authored-by: Juan Dahl <juandahl@users.noreply.github.com>

* Update apps/frontend/package.json

Co-authored-by: Pietro <74987028+pietro-maximoff@users.noreply.github.com>

* Update apps/frontend/src/app/2_molecules/AmountTransition/AmountTransition.tsx

Co-authored-by: Pietro <74987028+pietro-maximoff@users.noreply.github.com>

* Update apps/frontend/src/app/2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx

Co-authored-by: Pietro <74987028+pietro-maximoff@users.noreply.github.com>

* Update apps/frontend/src/app/2_molecules/NetworkSwitch/NetworkSwitch.tsx

Co-authored-by: Pietro <74987028+pietro-maximoff@users.noreply.github.com>

* Update apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx

Co-authored-by: Pietro <74987028+pietro-maximoff@users.noreply.github.com>

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

Co-authored-by: Pietro <74987028+pietro-maximoff@users.noreply.github.com>

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

Co-authored-by: Pietro <74987028+pietro-maximoff@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: Pietro <74987028+pietro-maximoff@users.noreply.github.com>

* remove LinkIcon

* Apply suggestions from code review

Co-authored-by: Pietro <74987028+pietro-maximoff@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: Pietro <74987028+pietro-maximoff@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: Pietro <74987028+pietro-maximoff@users.noreply.github.com>

* pr comments

* fixes

---------

Co-authored-by: matzapata <matuzapata@gmail.com>
Co-authored-by: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Co-authored-by: Juan Dahl <juandahl@users.noreply.github.com>
Co-authored-by: Luciano Perez Cerra <perezcerraluciano@gmail.com>
Co-authored-by: Pietro <74987028+pietro-maximoff@users.noreply.github.com>

* chore: cleanup

* connected graphs

* cleanup

* cleanup

* cleanup

---------

Co-authored-by: Juan <juandahl@users.noreply.github.com>
Co-authored-by: Luciano Perez Cerra <luchopcerra@gmail.com>
Co-authored-by: Christian Escalante <chescalante.ar@gmail.com>
Co-authored-by: Luciano Perez Cerra <perezcerraluciano@gmail.com>
Co-authored-by: Pietro <74987028+pietro-maximoff@users.noreply.github.com>
Co-authored-by: Pietro <pietro.maxim.official@protonmail.com>
---
 apps/frontend/package.json                    |   6 +-
 .../AssetAmountInput/AssetAmountInput.tsx     |   8 +-
 .../src/app/5_pages/AavePage/AavePage.tsx     |  24 +--
 .../app/5_pages/AavePage/AavePage.utils.tsx   |  40 ++--
 .../BorrowAssetDetails/BorrowAssetDetails.tsx |   2 +-
 .../components/BorrowModal/BorrowForm.tsx     |  13 +-
 .../BorrowModal/BorrowForm.utils.ts           |  14 ++
 .../BorrowModal/BorrowModalContainer.tsx      |  28 +++
 .../BorrowPositionsList.tsx                   |   4 +-
 .../BorrowRateModeSelect.tsx                  |   1 +
 .../EfficiencyModeCard/EfficiencyModeCard.tsx |  53 ++---
 .../DisableEModeForm/DisableEModeForm.tsx     |  10 +-
 .../EnableEModeForm/EnableEModeForm.tsx       |   2 +-
 .../SwitchEModeForm/SwitchEModeForm.tsx       |   8 +-
 .../RepayForm/RepayWithCollateralForm.tsx     |   4 +
 .../RepayForm/RepayWithWalletBalanceForm.tsx  |   1 +
 .../RepayModal/RepayModalContainer.tsx        |  77 +++++++
 .../RepayModal/RepayWithCollateralForm.tsx    | 197 ++++++++++++++++++
 .../RepayModal/RepayWithWalletBalanceForm.tsx | 140 +++++++++++++
 .../LendAssetsList.constants.tsx              |   2 +-
 .../components/AssetBalance/AssetBalance.tsx  |  27 ---
 .../LendAssetAction/LendAssetAction.tsx       |   8 +-
 .../LendAssetDetails/LendAssetDetails.tsx     |   3 +-
 .../components/LendForm/LendForm.tsx          |  10 +-
 .../components/LendModal/LendForm.tsx         | 102 +++++++++
 .../LendModal/LendModalContainer.tsx          |  28 +++
 .../LendPositionsList/LendPositionsList.tsx   |  21 +-
 .../LendPositionDetails.tsx                   |   2 +-
 .../ToggleCollateralAction.tsx                |   8 +-
 .../components/WithdrawForm/WithdrawForm.tsx  |   1 +
 .../components/WithdrawModal/WithdrawForm.tsx | 161 ++++++++++++++
 .../WithdrawModal/WithdrawModalContainer.tsx  |  28 +++
 .../AaveReserveOverviewPage.tsx               |  61 +-----
 .../BorrowDetailsGraph/BorrowDetailsGraph.tsx | 103 +++++++--
 .../BorrowDetailsGraph.utils.ts               |  21 ++
 .../components/EModeDetails/EModeDetails.tsx  |  40 +++-
 .../EModeDetails/EModeDetails.utils.ts        |  15 ++
 .../InterestRateModelGraph.tsx                |  87 ++++----
 .../components/Chart/Chart.tsx                |   1 -
 .../SupplyDetailsGraph/SupplyDetailsGraph.tsx | 120 +++++++++--
 .../SupplyDetailsGraph.utils.tsx              |  25 +++
 .../components/TopPanel/TopPanel.tsx          |  60 +++---
 .../components/TopPanel/TopPanel.utils.tsx    |  14 --
 .../ReserveTokens/ReserveTokens.tsx           |  12 +-
 .../components/TokenButton/TokenButton.tsx    |   1 +
 .../components/SupplyAction/SupplyAction.tsx  |   2 +-
 apps/frontend/src/constants/aave.ts           |   2 +
 apps/frontend/src/hooks/aave/constants.ts     |   1 -
 .../frontend/src/hooks/aave/useAaveBorrow.tsx |  28 ++-
 .../src/hooks/aave/useAaveEModeCategories.tsx |  25 +--
 apps/frontend/src/hooks/aave/useAaveRates.tsx |  42 ++--
 .../src/hooks/aave/useAaveReservesData.tsx    |  67 +++---
 .../src/hooks/aave/useAaveSetUserEMode.tsx    |  24 ++-
 .../hooks/aave/useAaveUserReservesData.tsx    |  20 +-
 .../src/hooks/useAddTokenToWallet.tsx         |  35 ++++
 .../frontend/src/locales/en/translations.json |   2 +-
 .../src/utils/aave/AaveEModeCategories.ts     |   6 +-
 .../aave/AaveRepayTransactionsFactory.ts      |   4 +-
 .../src/utils/aave/AaveUserReservesSummary.ts |  11 +-
 .../aave/AaveWithdrawTransactionsFactory.ts   |   2 +-
 apps/frontend/src/utils/math.ts               |  23 ++
 61 files changed, 1436 insertions(+), 451 deletions(-)
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.utils.ts
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowModalContainer.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithCollateralForm.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx
 delete mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/AssetBalance/AssetBalance.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendModalContainer.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.utils.ts
 create mode 100644 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.utils.ts
 create mode 100644 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.utils.tsx
 delete mode 100644 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.utils.tsx
 delete mode 100644 apps/frontend/src/hooks/aave/constants.ts
 create mode 100644 apps/frontend/src/hooks/useAddTokenToWallet.tsx

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 02a7f905c..29c9c8048 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -4,8 +4,8 @@
   "homepage": ".",
   "private": true,
   "dependencies": {
-    "@aave/contract-helpers": "^1.29.1",
-    "@aave/math-utils": "^1.29.1",
+    "@aave/contract-helpers": "1.29.1",
+    "@aave/math-utils": "1.29.1",
     "@apollo/client": "3.7.1",
     "@apollo/react-hooks": "4.0.0",
     "@loadable/component": "5.15.2",
@@ -57,7 +57,7 @@
     "react-slider": "2.0.6",
     "react-timer-hook": "3.0.7",
     "reactjs-localstorage": "1.0.1",
-    "reflect-metadata": "^0.2.2",
+    "reflect-metadata": "0.2.2",
     "remark-gfm": "3.0.1",
     "rxjs": "7.5.6",
     "sanitize-html": "2.11.0",
diff --git a/apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx b/apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx
index fd500f1d9..5e664e374 100644
--- a/apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx
+++ b/apps/frontend/src/app/2_molecules/AssetAmountInput/AssetAmountInput.tsx
@@ -3,14 +3,13 @@ import React, { FC, useCallback } from 'react';
 import { AmountInput, Paragraph, Select, SelectOption } from '@sovryn/ui';
 import { Decimal, Decimalish } from '@sovryn/utils';
 
-import { BOB_CHAIN_ID } from '../../../config/chains';
-
 import { AmountRenderer } from '../AmountRenderer/AmountRenderer';
 import { AssetRenderer } from '../AssetRenderer/AssetRenderer';
 import { MaxButton } from '../MaxButton/MaxButton';
 
 type AssetAmountInputProps = {
   label?: string;
+  chainId?: string | undefined;
   maxAmount?: Decimalish;
   invalid?: boolean;
   amountLabel?: string;
@@ -24,6 +23,7 @@ type AssetAmountInputProps = {
 
 export const AssetAmountInput: FC<AssetAmountInputProps> = ({
   label,
+  chainId,
   maxAmount,
   amountLabel,
   amountValue,
@@ -37,13 +37,13 @@ export const AssetAmountInput: FC<AssetAmountInputProps> = ({
   const assetOptionRenderer = useCallback(
     ({ value }) => (
       <AssetRenderer
-        chainId={BOB_CHAIN_ID}
+        chainId={chainId}
         dataAttribute="asset-amount"
         showAssetLogo
         asset={value}
       />
     ),
-    [],
+    [chainId],
   );
 
   return (
diff --git a/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx b/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
index 3def8a6e7..f7644b114 100644
--- a/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/AavePage.tsx
@@ -14,6 +14,7 @@ import {
   normalizeBorrowPositions,
   normalizeLendPoolDetails,
   normalizeLendPositions,
+  tabsItems,
 } from './AavePage.utils';
 import { BorrowAssetsList } from './components/BorrowAssetsList/BorrowAssetsList';
 import { BorrowPoolDetails } from './components/BorrowAssetsList/BorrowAssetsList.types';
@@ -54,22 +55,6 @@ const AavePage: FC = () => {
     [reserves, summary],
   );
 
-  const tabsItems = useMemo(
-    () => [
-      {
-        activeClassName: 'text-primary-20',
-        dataAttribute: 'lending',
-        label: t(pageTranslations.common.lend),
-      },
-      {
-        activeClassName: 'text-primary-20',
-        dataAttribute: 'borrowing',
-        label: t(pageTranslations.common.borrow),
-      },
-    ],
-    [],
-  );
-
   return (
     <div className="w-full pb-6 2xl:px-12">
       <Helmet>
@@ -77,9 +62,9 @@ const AavePage: FC = () => {
       </Helmet>
 
       <TopPanel
-        healthFactor={summary?.healthFactor}
-        netApy={summary?.netApy}
-        netWorth={summary?.netWorth}
+        healthFactor={summary.healthFactor}
+        netApy={summary.netApy}
+        netWorth={summary.netWorth}
       />
 
       <div className="pt-6 mt-6 space-y-6 2xl:pt-0 2xl:mt-0 2xl:space-y-0">
@@ -140,5 +125,4 @@ const AavePage: FC = () => {
     </div>
   );
 };
-
 export default AavePage;
diff --git a/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx b/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
index 0f09428db..5b01426ef 100644
--- a/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
@@ -1,6 +1,9 @@
+import { t } from 'i18next';
+
 import { Decimal } from '@sovryn/utils';
 
 import { Reserve } from '../../../hooks/aave/useAaveReservesData';
+import { translations } from '../../../locales/i18n';
 import { BorrowRateMode } from '../../../types/aave';
 import { AaveUserReservesSummary } from '../../../utils/aave/AaveUserReservesSummary';
 import { BorrowPoolDetails } from './components/BorrowAssetsList/BorrowAssetsList.types';
@@ -8,9 +11,22 @@ import { BorrowPosition } from './components/BorrowPositionsList/BorrowPositions
 import { LendPoolDetails } from './components/LendAssetsList/LendAssetsList.types';
 import { LendPosition } from './components/LendPositionsList/LendPositionsList.types';
 
-export function normalizeLendPositions(
+export const tabsItems = [
+  {
+    activeClassName: 'text-primary-20',
+    dataAttribute: 'lending',
+    label: t(translations.aavePage.common.lend),
+  },
+  {
+    activeClassName: 'text-primary-20',
+    dataAttribute: 'borrowing',
+    label: t(translations.aavePage.common.borrow),
+  },
+];
+
+export const normalizeLendPositions = (
   userReservesSummary: AaveUserReservesSummary,
-): LendPosition[] {
+): LendPosition[] => {
   return userReservesSummary.reserves.reduce((acc, r) => {
     if (r.supplied.gt(0)) {
       acc.push({
@@ -23,11 +39,11 @@ export function normalizeLendPositions(
     }
     return acc;
   }, [] as LendPosition[]);
-}
+};
 
-export function normalizeBorrowPositions(
+export const normalizeBorrowPositions = (
   userReservesSummary: AaveUserReservesSummary,
-): BorrowPosition[] {
+): BorrowPosition[] => {
   return userReservesSummary.reserves.reduce((acc, r) => {
     if (r.borrowed.gt(0)) {
       acc.push({
@@ -48,12 +64,12 @@ export function normalizeBorrowPositions(
     }
     return acc;
   }, [] as BorrowPosition[]);
-}
+};
 
-export function normalizeBorrowPoolDetails(
+export const normalizeBorrowPoolDetails = (
   reserves: Reserve[],
   userReservesSummary: AaveUserReservesSummary,
-): BorrowPoolDetails[] {
+): BorrowPoolDetails[] => {
   if (userReservesSummary.reserves.length === 0) {
     return reserves.reduce((acc, r) => {
       if (r.borrowingEnabled) {
@@ -84,12 +100,12 @@ export function normalizeBorrowPoolDetails(
       return acc;
     }, [] as BorrowPoolDetails[]);
   }
-}
+};
 
-export function normalizeLendPoolDetails(
+export const normalizeLendPoolDetails = (
   reserves: Reserve[],
   userReservesSummary: AaveUserReservesSummary,
-): LendPoolDetails[] {
+): LendPoolDetails[] => {
   if (userReservesSummary.reserves.length === 0) {
     return reserves.map(r => ({
       asset: r.symbol,
@@ -105,4 +121,4 @@ export function normalizeLendPoolDetails(
       walletBalance: r.walletBalance,
     }));
   }
-}
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
index c087ba1c6..620e7deea 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
@@ -31,7 +31,7 @@ export const BorrowAssetDetails: FC<BorrowAssetDetailsProps> = ({
             <HelperButton content={t(pageTranslations.common.apyInfo)} />
           </span>
         }
-        value={<AmountRenderer value={pool.apy} suffix="%" />}
+        value={<AmountRenderer value={pool.apy} suffix="%" precision={2} />}
       />
 
       {/* Available */}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
index d9b5dccef..b56df01bd 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
@@ -93,6 +93,10 @@ export const BorrowForm: FC<BorrowFormProps> = ({ asset, onComplete }) => {
     summary.collateralBalance,
   ]);
 
+  const borrowApr = useMemo(() => {
+    return Decimal.from(borrowReserve?.reserve.variableBorrowAPR ?? 0).mul(100);
+  }, [borrowReserve?.reserve.variableBorrowAPR]);
+
   const isValidBorrowAmount = useMemo(
     () => (borrowSize.gt(0) ? borrowSize.lte(maximumBorrowAmount) : true),
     [borrowSize, maximumBorrowAmount],
@@ -112,6 +116,7 @@ export const BorrowForm: FC<BorrowFormProps> = ({ asset, onComplete }) => {
       <div className="space-y-3">
         <AssetAmountInput
           label={t(translations.aavePage.common.borrow)}
+          chainId={BOB_CHAIN_ID}
           amountLabel={t(translations.common.amount)}
           amountValue={borrowAmount}
           assetUsdValue={borrowUsdAmount}
@@ -135,13 +140,7 @@ export const BorrowForm: FC<BorrowFormProps> = ({ asset, onComplete }) => {
       <SimpleTable>
         <SimpleTableRow
           label={t(translations.aavePage.borrowForm.borrowApr)}
-          value={
-            <AmountRenderer
-              value={borrowReserve?.reserve.variableBorrowAPR ?? 0}
-              suffix="%"
-              precision={2}
-            />
-          }
+          value={<AmountRenderer value={borrowApr} suffix="%" precision={2} />}
         />
       </SimpleTable>
 
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.utils.ts b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.utils.ts
new file mode 100644
index 000000000..f55b40d9e
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.utils.ts
@@ -0,0 +1,14 @@
+import { MINIMUM_COLLATERAL_RATIO_LENDING_POOLS } from '../../../../../../../constants/lending';
+
+export const getCollateralRatioThresholds = () => {
+  // TODO: recheck this and adjust based on aave
+  const minimumCollateralRatio =
+    MINIMUM_COLLATERAL_RATIO_LENDING_POOLS.mul(100);
+
+  return {
+    START: minimumCollateralRatio.mul(0.9).toNumber(),
+    MIDDLE_START: minimumCollateralRatio.toNumber() - 0.1,
+    MIDDLE_END: minimumCollateralRatio.mul(1.2).toNumber(),
+    END: minimumCollateralRatio.mul(1.6).toNumber(),
+  };
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowModalContainer.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowModalContainer.tsx
new file mode 100644
index 000000000..5927b58df
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowModalContainer.tsx
@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+
+import { t } from 'i18next';
+
+import { Dialog, DialogBody, DialogHeader } from '@sovryn/ui';
+
+import { translations } from '../../../../../../../locales/i18n';
+import { BorrowForm } from './BorrowForm';
+
+type BorrowModalContainerProps = {
+  isOpen: boolean;
+  handleCloseModal: () => void;
+};
+
+export const BorrowModalContainer: FC<BorrowModalContainerProps> = ({
+  isOpen,
+  handleCloseModal,
+}) => (
+  <Dialog disableFocusTrap isOpen={isOpen}>
+    <DialogHeader
+      title={t(translations.aavePage.common.borrow)}
+      onClose={handleCloseModal}
+    />
+    <DialogBody className="flex flex-col gap-6">
+      <BorrowForm onSuccess={handleCloseModal} />
+    </DialogBody>
+  </Dialog>
+);
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
index 8903daa54..e0c699256 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
@@ -45,9 +45,7 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = ({
   const { account } = useAccount();
   const [open, setOpen] = useState(true);
   const [orderOptions, setOrderOptions] = useState<OrderOptions>();
-  const [repayAssetDialog, setRepayAssetDialog] = useState<
-    string | undefined
-  >();
+  const [repayAssetDialog, setRepayAssetDialog] = useState<string>();
 
   const onRepayClick = useCallback((asset: string) => {
     setRepayAssetDialog(asset);
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowRateModeSelect/BorrowRateModeSelect.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowRateModeSelect/BorrowRateModeSelect.tsx
index aa08eb1ff..e57ef2ce8 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowRateModeSelect/BorrowRateModeSelect.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowRateModeSelect/BorrowRateModeSelect.tsx
@@ -32,6 +32,7 @@ export const BorrowRateModeSelect: FC<BorrowRateModeSelectProps> = ({
     ];
 
     if (
+      // cannot be collateral for stable borrows
       (position.stableBorrowEnabled && !position.isCollateral) ||
       position.borrowRateMode === BorrowRateMode.STABLE
     ) {
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx
index 82d1a9079..72a9d44f6 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx
@@ -20,7 +20,6 @@ import {
 import { EModeIcon } from '../../../../../../1_atoms/Icons/Icons';
 import { useAaveEModeCategories } from '../../../../../../../hooks/aave/useAaveEModeCategories';
 import { translations } from '../../../../../../../locales/i18n';
-import { EModeCategory } from '../../../../../../../types/aave';
 import { DisableEModeForm } from './components/DisableEModeForm/DisableEModeForm';
 import { EnableEModeForm } from './components/EnableEModeForm/EnableEModeForm';
 import { SwitchEModeForm } from './components/SwitchEModeForm/SwitchEModeForm';
@@ -146,32 +145,36 @@ export const EfficiencyModeCard: FC<EfficiencyModeCardProps> = ({
         </DialogBody>
       </Dialog>
 
-      <Dialog disableFocusTrap isOpen={switchEModeOpen}>
-        <DialogHeader
-          title={t(translations.aavePage.eMode.switchCategory)}
-          onClose={onSwitchEModeClose}
-        />
-        <DialogBody>
-          <SwitchEModeForm
-            categories={eModeCategories}
-            current={currentCategory as EModeCategory}
-            onComplete={onSwitchEModeClose}
+      {currentCategory && (
+        <Dialog disableFocusTrap isOpen={switchEModeOpen}>
+          <DialogHeader
+            title={t(translations.aavePage.eMode.switchCategory)}
+            onClose={onSwitchEModeClose}
           />
-        </DialogBody>
-      </Dialog>
-
-      <Dialog disableFocusTrap isOpen={disableEModeOpen}>
-        <DialogHeader
-          title={t(translations.aavePage.eMode.disableEMode)}
-          onClose={onDisableEModeClose}
-        />
-        <DialogBody>
-          <DisableEModeForm
-            current={currentCategory as EModeCategory}
-            onComplete={onDisableEModeClose}
+          <DialogBody>
+            <SwitchEModeForm
+              categories={eModeCategories}
+              current={currentCategory}
+              onComplete={onSwitchEModeClose}
+            />
+          </DialogBody>
+        </Dialog>
+      )}
+
+      {currentCategory && (
+        <Dialog disableFocusTrap isOpen={disableEModeOpen}>
+          <DialogHeader
+            title={t(translations.aavePage.eMode.disableEMode)}
+            onClose={onDisableEModeClose}
           />
-        </DialogBody>
-      </Dialog>
+          <DialogBody>
+            <DisableEModeForm
+              current={currentCategory!}
+              onComplete={onDisableEModeClose}
+            />
+          </DialogBody>
+        </Dialog>
+      )}
     </>
   );
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx
index 30a0e83b9..e06229584 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx
@@ -69,6 +69,7 @@ export const DisableEModeForm: FC<DisableEModeFormProps> = ({
     if (!newSummary) {
       return Decimal.from(0);
     }
+
     return AaveCalculations.computeCollateralRatio(
       Decimal.from(newSummary.totalCollateralUSD),
       Decimal.from(newSummary.totalBorrowsUSD),
@@ -76,10 +77,9 @@ export const DisableEModeForm: FC<DisableEModeFormProps> = ({
   }, [newSummary]);
 
   const liquidationRisk = useMemo(() => {
-    if (newSummary?.healthFactor === '-1') {
-      return false;
-    }
-    return Decimal.from(newSummary?.healthFactor ?? 0).lte(1);
+    // if health factor is below 1 we're at risk. Negative means doesn't apply
+    const healthFactor = Decimal.from(newSummary?.healthFactor ?? 0);
+    return healthFactor.lte(1) && healthFactor.gt(0);
   }, [newSummary?.healthFactor]);
 
   const confirmEnabled = useMemo(() => {
@@ -138,7 +138,7 @@ export const DisableEModeForm: FC<DisableEModeFormProps> = ({
           value={
             <div className={'flex items-center justify-end gap-1'}>
               <AmountRenderer
-                value={Decimal.from(current?.ltv ?? 0).div(100)}
+                value={Decimal.from(current?.ltv ?? 0)}
                 precision={2}
                 suffix="%"
               />
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/EnableEModeForm/EnableEModeForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/EnableEModeForm/EnableEModeForm.tsx
index 4e1331450..11809741e 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/EnableEModeForm/EnableEModeForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/EnableEModeForm/EnableEModeForm.tsx
@@ -83,7 +83,7 @@ export const EnableEModeForm: FC<EnableEModeFormProps> = ({
           label={t(translations.aavePage.eMode.maxLoanToValue)}
           value={
             <AmountRenderer
-              value={selectedCategory ? selectedCategory.ltv.div(100) : 0}
+              value={selectedCategory ? selectedCategory.ltv : 0}
               suffix="%"
               precision={2}
             />
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx
index 9d33fa198..f6014d3ac 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx
@@ -153,17 +153,13 @@ export const SwitchEModeForm: FC<SwitchEModeFormProps> = ({
           label={t(translations.aavePage.eMode.maxLoanToValue)}
           value={
             <div className={'flex items-center justify-end gap-1'}>
-              <AmountRenderer
-                value={current?.ltv.div(100)}
-                precision={2}
-                suffix="%"
-              />
+              <AmountRenderer value={current?.ltv} precision={2} suffix="%" />
               <Icon
                 icon={IconNames.ARROW_RIGHT}
                 className="h-2 flex-shrink-0"
               />
               <AmountRenderer
-                value={Decimal.from(selectedCategory?.ltv ?? 0).div(100)}
+                value={Decimal.from(selectedCategory?.ltv ?? 0)}
                 precision={2}
                 suffix="%"
               />
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithCollateralForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithCollateralForm.tsx
index 5fd392d66..6bd3e9754 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithCollateralForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithCollateralForm.tsx
@@ -12,6 +12,8 @@ import {
 } from '@sovryn/ui';
 import { Decimal } from '@sovryn/utils';
 
+import { BOB_CHAIN_ID } from '../../../../../../../config/chains';
+
 import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { AmountTransition } from '../../../../../../2_molecules/AmountTransition/AmountTransition';
 import { AssetAmountInput } from '../../../../../../2_molecules/AssetAmountInput/AssetAmountInput';
@@ -98,6 +100,7 @@ export const RepayWithCollateralForm: FC<RepayWithCollateralFormProps> = () => {
         <AssetAmountInput
           label={t(translations.aavePage.repayModal.expectedAmountToRepay)}
           maxAmount={maximumRepayAmount}
+          chainId={BOB_CHAIN_ID}
           amountLabel={t(translations.common.amount)}
           amountValue={repayAmount}
           onAmountChange={setRepayAmount}
@@ -120,6 +123,7 @@ export const RepayWithCollateralForm: FC<RepayWithCollateralFormProps> = () => {
         <AssetAmountInput
           label={t(translations.aavePage.repayModal.collateralToRepayWith)}
           maxAmount={maximumRepayWithAmount}
+          chainId={BOB_CHAIN_ID}
           amountLabel={t(translations.common.amount)}
           amountValue={repayWithAmount}
           onAmountChange={setRepayWithAmount}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx
index 14a815902..6d12296d1 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx
@@ -127,6 +127,7 @@ export const RepayWithWalletBalanceForm: FC<
     <form className="flex flex-col gap-6 relative">
       <div className="space-y-3">
         <AssetAmountInput
+          chainId={BOB_CHAIN_ID}
           maxAmount={maximumRepayAmount}
           amountLabel={t(translations.common.amount)}
           amountValue={repayAmount}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx
new file mode 100644
index 000000000..448de1cf4
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx
@@ -0,0 +1,77 @@
+import React, { FC, useState } from 'react';
+
+import { t } from 'i18next';
+
+import {
+  Dialog,
+  DialogBody,
+  DialogHeader,
+  Paragraph,
+  ParagraphSize,
+  Tabs,
+  TabType,
+} from '@sovryn/ui';
+
+import { translations } from '../../../../../../../locales/i18n';
+import { RepayWithCollateralForm } from './RepayWithCollateralForm';
+import { RepayWithWalletBalanceForm } from './RepayWithWalletBalanceForm';
+
+type RepayModalContainerProps = {
+  isOpen: boolean;
+  handleCloseModal: () => void;
+};
+
+enum RepayWith {
+  BALANCE = 0,
+  COLLATERAL,
+}
+
+export const RepayModalContainer: FC<RepayModalContainerProps> = ({
+  isOpen,
+  handleCloseModal,
+}) => {
+  const [activeTab, setActiveTab] = useState<RepayWith>(RepayWith.BALANCE);
+
+  return (
+    <Dialog disableFocusTrap isOpen={isOpen}>
+      <DialogHeader
+        title={t(translations.aavePage.repayModal.title)}
+        onClose={handleCloseModal}
+      />
+      <DialogBody className="space-y-3">
+        <Paragraph
+          size={ParagraphSize.small}
+          className="font-medium text-gray-30"
+        >
+          {t(translations.aavePage.repayModal.repayWith)}
+        </Paragraph>
+
+        <Tabs
+          className="flex-grow-0"
+          contentClassName="p-4"
+          index={activeTab}
+          onChange={setActiveTab}
+          items={[
+            {
+              activeClassName: 'text-primary-20',
+              dataAttribute: 'wallet-balance',
+              label: t(translations.aavePage.repayModal.walletBalance),
+            },
+            {
+              activeClassName: 'text-primary-20',
+              dataAttribute: 'collateral',
+              label: t(translations.aavePage.common.collateral),
+            },
+          ]}
+          type={TabType.secondary}
+        />
+
+        {activeTab === RepayWith.BALANCE ? (
+          <RepayWithWalletBalanceForm onSuccess={handleCloseModal} />
+        ) : (
+          <RepayWithCollateralForm onSuccess={handleCloseModal} />
+        )}
+      </DialogBody>
+    </Dialog>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithCollateralForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithCollateralForm.tsx
new file mode 100644
index 000000000..c38e71287
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithCollateralForm.tsx
@@ -0,0 +1,197 @@
+import React, { FC, useMemo, useState } from 'react';
+
+import { t } from 'i18next';
+
+import {
+  Button,
+  ErrorBadge,
+  ErrorLevel,
+  HelperButton,
+  SimpleTable,
+  SimpleTableRow,
+} from '@sovryn/ui';
+import { Decimal } from '@sovryn/utils';
+
+import { BOB_CHAIN_ID } from '../../../../../../../config/chains';
+
+import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
+import { AmountTransition } from '../../../../../../2_molecules/AmountTransition/AmountTransition';
+import { AssetAmountInput } from '../../../../../../2_molecules/AssetAmountInput/AssetAmountInput';
+import { AssetRenderer } from '../../../../../../2_molecules/AssetRenderer/AssetRenderer';
+import { config } from '../../../../../../../constants/aave';
+import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
+import { translations } from '../../../../../../../locales/i18n';
+import { CollateralRatioHealthBar } from '../../../CollateralRatioHealthBar/CollateralRatioHealthBar';
+
+const pageTranslations = translations.aavePage;
+
+type RepayWithCollateralFormProps = {
+  onSuccess: () => void;
+};
+
+export const RepayWithCollateralForm: FC<RepayWithCollateralFormProps> = () => {
+  const assetPrice = 3258.47; // TODO: this is mocked data. Replace with proper hook
+  const totalBorrowed = Decimal.from(10); // TODO: this is mocked data. Replace with proper hook
+  const collateralToLoanRate = Decimal.from(10); // TODO: this is mocked data. Replace with proper hook
+  const collateralSize = Decimal.from(10); // TODO: this is mockd data. Replace with proper hook
+  const assets = useMemo(() => ['BTC', 'SOV'], []); // TODO: this is mocked data. Replace with proper hook
+  const [maximumRepayAmount] = useState(Decimal.from(10)); // TODO: this is mocked data. Replace with proper hook
+  const [maximumRepayWithAmount] = useState(Decimal.from(10)); // TODO: this is mocked data. Replace with proper hook
+  const [repayAsset, setRepayAsset] = useState<string>(assets[0]);
+  const [repayAmount, setRepayAmount, repaySize] = useDecimalAmountInput('');
+  const [repayWithAsset, setRepayWithAsset] = useState<string>(assets[0]);
+  const [repayWithAmount, setRepayWithAmount, repayWithSize] =
+    useDecimalAmountInput('');
+
+  const repayAssetsOptions = useMemo(
+    () =>
+      assets.map(token => ({
+        value: token,
+        label: (
+          <AssetRenderer
+            showAssetLogo
+            asset={token}
+            assetClassName="font-medium"
+          />
+        ),
+      })),
+    [assets],
+  );
+
+  const remainingDebt = useMemo(
+    () => maximumRepayAmount.sub(repaySize),
+    [repaySize, maximumRepayAmount],
+  );
+
+  const collateralRatio = useMemo(() => {
+    if ([collateralSize, totalBorrowed, repaySize].some(v => v.isZero())) {
+      return Decimal.from(0);
+    }
+
+    return collateralSize.mul(collateralToLoanRate).div(totalBorrowed).mul(100);
+  }, [collateralSize, totalBorrowed, repaySize, collateralToLoanRate]);
+
+  // TODO: add more validations
+  const isValidRepayAmount = useMemo(
+    () => (repaySize.gt(0) ? repaySize.lte(maximumRepayAmount) : true),
+    [repaySize, maximumRepayAmount],
+  );
+
+  // TODO: add more validations
+  const isValidRepayWithAmount = useMemo(
+    () =>
+      repayWithSize.gt(0) ? repayWithSize.lte(maximumRepayWithAmount) : true,
+    [repayWithSize, maximumRepayWithAmount],
+  );
+
+  // TODO: add more validations
+  const submitButtonDisabled = useMemo(
+    () =>
+      !isValidRepayAmount ||
+      repaySize.lte(0) ||
+      !isValidRepayWithAmount ||
+      repayWithSize.lte(0),
+    [isValidRepayAmount, repaySize, isValidRepayWithAmount, repayWithSize],
+  );
+
+  return (
+    <form className="flex flex-col gap-6">
+      <div className="flex flex-col gap-3">
+        <AssetAmountInput
+          chainId={BOB_CHAIN_ID}
+          label={t(translations.aavePage.repayModal.expectedAmountToRepay)}
+          maxAmount={maximumRepayAmount}
+          amountLabel={t(translations.common.amount)}
+          amountValue={repayAmount}
+          onAmountChange={setRepayAmount}
+          invalid={!isValidRepayAmount}
+          assetValue={repayAsset}
+          onAssetChange={setRepayAsset}
+          assetOptions={repayAssetsOptions}
+        />
+
+        {!isValidRepayAmount && (
+          <ErrorBadge
+            level={ErrorLevel.Critical}
+            message={t(pageTranslations.repayModal.invalidAmountError)}
+            dataAttribute="repay-amount-error"
+          />
+        )}
+      </div>
+
+      <div className="flex flex-col gap-3">
+        <AssetAmountInput
+          label={t(translations.aavePage.repayModal.collateralToRepayWith)}
+          chainId={BOB_CHAIN_ID}
+          maxAmount={maximumRepayWithAmount}
+          amountLabel={t(translations.common.amount)}
+          amountValue={repayWithAmount}
+          onAmountChange={setRepayWithAmount}
+          invalid={!isValidRepayWithAmount}
+          assetValue={repayWithAsset}
+          onAssetChange={setRepayWithAsset}
+          assetOptions={repayAssetsOptions}
+        />
+
+        {!isValidRepayWithAmount && (
+          <ErrorBadge
+            level={ErrorLevel.Critical}
+            message={t(pageTranslations.repayModal.invalidAmountError)}
+            dataAttribute="repay-with-amount-error"
+          />
+        )}
+      </div>
+
+      <CollateralRatioHealthBar
+        ratio={collateralRatio}
+        minimum={config.MinCollateralRatio}
+      />
+
+      <SimpleTable>
+        <SimpleTableRow
+          label={t(translations.aavePage.repayModal.remainingDebt)}
+          value={
+            <AmountTransition
+              className="justify-end"
+              from={{ value: remainingDebt, suffix: '%' }}
+              to={{ value: 0, suffix: '%', className: 'text-primary-10' }}
+            />
+          }
+        />
+        <SimpleTableRow
+          label={t(translations.aavePage.repayModal.newCollateralBalance)}
+          value={
+            <div className="space-y-1">
+              <AmountTransition
+                className="justify-end"
+                from={{ value: 10, suffix: 'USDT' }}
+                to={{ value: 10, suffix: 'USDT' }}
+              />
+              <AmountTransition
+                className="justify-end text-gray-40"
+                from={{ value: 10, prefix: '$' }}
+                to={{ value: 10, prefix: '$' }}
+              />
+            </div>
+          }
+        />
+        <SimpleTableRow
+          label={
+            <div className="flex space-x-1">
+              <span>{t(translations.aavePage.repayModal.priceImpact)}</span>{' '}
+              <HelperButton
+                content={t(translations.aavePage.repayModal.priceImpactInfo)}
+              />
+            </div>
+          }
+          value={<AmountRenderer value={assetPrice} prefix="$" />}
+        />
+      </SimpleTable>
+
+      <Button
+        disabled={submitButtonDisabled}
+        text={t(translations.common.buttons.confirm)}
+      />
+    </form>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx
new file mode 100644
index 000000000..61e8d0a2a
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx
@@ -0,0 +1,140 @@
+import React, { FC, useMemo, useState } from 'react';
+
+import { t } from 'i18next';
+
+import {
+  Button,
+  ErrorBadge,
+  ErrorLevel,
+  SimpleTable,
+  SimpleTableRow,
+} from '@sovryn/ui';
+import { Decimal } from '@sovryn/utils';
+
+import { BOB_CHAIN_ID } from '../../../../../../../config/chains';
+
+import { AmountTransition } from '../../../../../../2_molecules/AmountTransition/AmountTransition';
+import { AssetAmountInput } from '../../../../../../2_molecules/AssetAmountInput/AssetAmountInput';
+import { AssetRenderer } from '../../../../../../2_molecules/AssetRenderer/AssetRenderer';
+import { config } from '../../../../../../../constants/aave';
+import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
+import { translations } from '../../../../../../../locales/i18n';
+import { CollateralRatioHealthBar } from '../../../CollateralRatioHealthBar/CollateralRatioHealthBar';
+
+const pageTranslations = translations.aavePage;
+
+type RepayWithWalletBalanceFormProps = {
+  onSuccess: () => void;
+};
+
+export const RepayWithWalletBalanceForm: FC<
+  RepayWithWalletBalanceFormProps
+> = () => {
+  const totalBorrowed = Decimal.from(10); // TODO: this is mocked data. Replace with proper hook
+  const collateralToLoanRate = Decimal.from(10); // TODO: this is mocked data. Replace with proper hook
+  const collateralSize = Decimal.from(10); // TODO: this is mockd data. Replace with proper hook
+  const assetsToRepay = useMemo(() => ['BTC', 'SOV'], []); // TODO: this is mocked data. Replace with proper hook
+  const [maximumRepayAmount] = useState(Decimal.from(10)); // TODO: this is mocked data. Replace with proper hook
+  const [repayAsset, setRepayAsset] = useState<string>(assetsToRepay[0]);
+  const [repayAmount, setRepayAmount, repaySize] = useDecimalAmountInput('');
+
+  const repayAssetsOptions = useMemo(
+    () =>
+      assetsToRepay.map(token => ({
+        value: token,
+        label: (
+          <AssetRenderer
+            showAssetLogo
+            asset={token}
+            assetClassName="font-medium"
+          />
+        ),
+      })),
+    [assetsToRepay],
+  );
+
+  const isValidRepayAmount = useMemo(
+    () => (repaySize.gt(0) ? repaySize.lte(maximumRepayAmount) : true),
+    [repaySize, maximumRepayAmount],
+  );
+
+  const collateralRatio = useMemo(() => {
+    if ([collateralSize, totalBorrowed, repaySize].some(v => v.isZero())) {
+      return Decimal.from(0);
+    }
+
+    return collateralSize.mul(collateralToLoanRate).div(totalBorrowed).mul(100);
+  }, [collateralSize, totalBorrowed, repaySize, collateralToLoanRate]);
+
+  // TODO: Add validations
+  const submitButtonDisabled = useMemo(
+    () => !isValidRepayAmount || repaySize.lte(0),
+    [isValidRepayAmount, repaySize],
+  );
+
+  return (
+    <form className="flex flex-col gap-6 relative">
+      <div className="space-y-3">
+        <AssetAmountInput
+          chainId={BOB_CHAIN_ID}
+          maxAmount={maximumRepayAmount}
+          amountLabel={t(translations.common.amount)}
+          amountValue={repayAmount}
+          onAmountChange={setRepayAmount}
+          invalid={!isValidRepayAmount}
+          assetValue={repayAsset}
+          onAssetChange={setRepayAsset}
+          assetOptions={repayAssetsOptions}
+        />
+
+        {!isValidRepayAmount && (
+          <ErrorBadge
+            level={ErrorLevel.Critical}
+            message={t(pageTranslations.repayModal.invalidAmountError)}
+            dataAttribute="repay-amount-error"
+          />
+        )}
+      </div>
+
+      <CollateralRatioHealthBar
+        ratio={collateralRatio}
+        minimum={config.MinCollateralRatio}
+      />
+
+      <SimpleTable>
+        <SimpleTableRow
+          label={t(translations.aavePage.repayModal.remainingDebt)}
+          value={
+            <AmountTransition
+              className="justify-end"
+              from={{ value: 0.002429, suffix: '%' }}
+              to={{ value: 0, suffix: '%', className: 'text-primary-10' }}
+            />
+          }
+        />
+        <SimpleTableRow
+          label={t(translations.aavePage.repayModal.newCollateralBalance)}
+          value={
+            <div className="space-y-1">
+              <AmountTransition
+                className="justify-end"
+                from={{ value: 10, suffix: 'USDT' }}
+                to={{ value: 10, suffix: 'USDT' }}
+              />
+              <AmountTransition
+                className="justify-end text-gray-40"
+                from={{ value: 10, prefix: '$' }}
+                to={{ value: 10, prefix: '$' }}
+              />
+            </div>
+          }
+        />
+      </SimpleTable>
+
+      <Button
+        disabled={submitButtonDisabled}
+        text={t(translations.common.buttons.confirm)}
+      />
+    </form>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
index 93d23297f..7db142116 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
@@ -60,7 +60,7 @@ export const COLUMNS_CONFIG = (onLendClick: (asset: string) => unknown) => [
       </span>
     ),
     cellRenderer: (pool: LendPoolDetails) => (
-      <AmountRenderer value={pool.apy} suffix={'%'} precision={2} />
+      <AmountRenderer value={pool.apy} suffix="%" precision={2} />
     ),
   },
   {
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/AssetBalance/AssetBalance.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/AssetBalance/AssetBalance.tsx
deleted file mode 100644
index b52ea6ddf..000000000
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/AssetBalance/AssetBalance.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { FC } from 'react';
-
-import { BOB_CHAIN_ID } from '../../../../../../../config/chains';
-
-import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
-import { useAccount } from '../../../../../../../hooks/useAccount';
-import { useAssetBalance } from '../../../../../../../hooks/useAssetBalance';
-
-export type AssetBalanceRendererProps = {
-  asset: string;
-};
-
-export const AssetBalanceRenderer: FC<AssetBalanceRendererProps> = ({
-  asset,
-}) => {
-  const { account } = useAccount();
-  const balance = useAssetBalance(asset, BOB_CHAIN_ID);
-
-  return account ? (
-    <AmountRenderer
-      value={balance.balance}
-      precision={balance.decimalPrecision}
-    />
-  ) : (
-    <span>-</span>
-  );
-};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
index 40e189e71..2aa041384 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback } from 'react';
 
 import { t } from 'i18next';
 import { useNavigate } from 'react-router-dom';
@@ -20,6 +20,10 @@ export const LendAssetAction: FC<LendAssetActionProps> = ({
 }) => {
   const navigate = useNavigate();
 
+  const onDetailsClick = useCallback(() => {
+    navigate(`/aave/reserve-overview?asset=${asset}`);
+  }, [navigate, asset]);
+
   return (
     <div className="flex items-center justify-center lg:justify-end space-x-2">
       <Button
@@ -33,7 +37,7 @@ export const LendAssetAction: FC<LendAssetActionProps> = ({
         className="flex-grow lg:flex-grow-0 lg:w-min"
         text={t(translations.aavePage.common.details)}
         style={ButtonStyle.secondary}
-        onClick={() => navigate(`/aave/reserve-overview?asset=${asset}`)}
+        onClick={onDetailsClick}
       />
     </div>
   );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
index 0bc9c1b20..f14b941a7 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
@@ -8,7 +8,6 @@ import { HelperButton, Icon, IconNames, SimpleTableRow } from '@sovryn/ui';
 import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { translations } from '../../../../../../../locales/i18n';
 import { LendPoolDetails } from '../../LendAssetsList.types';
-import { AssetBalanceRenderer } from '../AssetBalance/AssetBalance';
 import { LendAssetAction } from '../LendAssetAction/LendAssetAction';
 
 type LendAssetDetailsProps = {
@@ -25,7 +24,7 @@ export const LendAssetDetails: FC<LendAssetDetailsProps> = ({
       {/* Available */}
       <SimpleTableRow
         label={t(translations.aavePage.lendAssetsList.walletBalance)}
-        value={<AssetBalanceRenderer asset={pool.asset} />}
+        value={<AmountRenderer value={pool.walletBalance} precision={2} />}
       />
 
       <SimpleTableRow
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendForm/LendForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendForm/LendForm.tsx
index 12f96e27e..3e69940f5 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendForm/LendForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendForm/LendForm.tsx
@@ -74,7 +74,12 @@ export const LendForm: FC<LendFormProps> = ({
     [lendSize, lendAssetBalance],
   );
 
-  const onConfirm = useCallback(async () => {
+  const isDepositEnabled = useMemo(
+    () => lendSize.gt(0) && isValidLendAmount,
+    [lendSize, isValidLendAmount],
+  );
+
+  const onConfirm = useCallback(() => {
     handleDeposit(lendSize, reserve.symbol, { onComplete });
   }, [handleDeposit, lendSize, reserve, onComplete]);
 
@@ -82,6 +87,7 @@ export const LendForm: FC<LendFormProps> = ({
     <form className="flex flex-col gap-6">
       <div>
         <AssetAmountInput
+          chainId={BOB_CHAIN_ID}
           label={t(translations.aavePage.common.lend)}
           maxAmount={lendAssetBalance}
           amountLabel={t(translations.common.amount)}
@@ -125,7 +131,7 @@ export const LendForm: FC<LendFormProps> = ({
       </SimpleTable>
 
       <Button
-        disabled={!isValidLendAmount || lendSize.lte(0)}
+        disabled={!isDepositEnabled}
         onClick={onConfirm}
         text={t(translations.aavePage.lendModal.deposit)}
       />
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx
new file mode 100644
index 000000000..967fd13cb
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx
@@ -0,0 +1,102 @@
+import React, { FC, useMemo, useState } from 'react';
+
+import { t } from 'i18next';
+
+import {
+  Button,
+  ErrorBadge,
+  ErrorLevel,
+  SimpleTable,
+  SimpleTableRow,
+} from '@sovryn/ui';
+import { Decimal } from '@sovryn/utils';
+
+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 { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
+import { translations } from '../../../../../../../locales/i18n';
+
+const pageTranslations = translations.aavePage;
+
+type LendFormProps = {
+  onSuccess: () => void;
+};
+
+export const LendForm: FC<LendFormProps> = () => {
+  const lendApy = 4.01; // TODO: this is mocked data. Replace with proper hook
+  const lendAssets = useMemo(() => ['BTC', 'SOV'], []); // TODO: this is mocked data. Replace with proper hook
+  const [maximumLendAmount] = useState<Decimal>(Decimal.from(10)); // TODO: this is mocked data. Replace with proper hook
+  const [lendAsset, setLendAsset] = useState<string>(lendAssets[0]);
+  const [lendAmount, setLendAmount, lendSize] = useDecimalAmountInput('');
+
+  const lendAssetsOptions = useMemo(
+    () =>
+      lendAssets.map(token => ({
+        value: token,
+        label: (
+          <AssetRenderer
+            showAssetLogo
+            asset={token}
+            assetClassName="font-medium"
+          />
+        ),
+      })),
+    [lendAssets],
+  );
+
+  const isValidLendAmount = useMemo(
+    () => (lendSize.gt(0) ? lendSize.lte(maximumLendAmount) : true),
+    [lendSize, maximumLendAmount],
+  );
+
+  const submitButtonDisabled = useMemo(
+    () => !isValidLendAmount || lendSize.lte(0),
+    [isValidLendAmount, lendSize],
+  );
+
+  return (
+    <form className="flex flex-col gap-6">
+      <div>
+        <AssetAmountInput
+          chainId={BOB_CHAIN_ID}
+          label={t(translations.aavePage.common.lend)}
+          maxAmount={maximumLendAmount}
+          amountLabel={t(translations.common.amount)}
+          amountValue={lendAmount}
+          onAmountChange={setLendAmount}
+          invalid={!isValidLendAmount}
+          assetValue={lendAsset}
+          onAssetChange={setLendAsset}
+          assetOptions={lendAssetsOptions}
+        />
+
+        {!isValidLendAmount && (
+          <ErrorBadge
+            level={ErrorLevel.Critical}
+            message={t(pageTranslations.lendModal.invalidAmountError)}
+            dataAttribute="lend-amount-error"
+          />
+        )}
+      </div>
+
+      <SimpleTable>
+        <SimpleTableRow
+          label={t(translations.aavePage.lendModal.lendApy)}
+          value={<AmountRenderer value={lendApy} suffix="%" />}
+        />
+        <SimpleTableRow
+          label={t(translations.aavePage.lendModal.collateralization)}
+          value={t(translations.aavePage.lendModal.enabled)}
+        />
+      </SimpleTable>
+
+      <Button
+        disabled={submitButtonDisabled}
+        text={t(translations.aavePage.lendModal.deposit)}
+      />
+    </form>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendModalContainer.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendModalContainer.tsx
new file mode 100644
index 000000000..31e72739b
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendModalContainer.tsx
@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+
+import { t } from 'i18next';
+
+import { Dialog, DialogBody, DialogHeader } from '@sovryn/ui';
+
+import { translations } from '../../../../../../../locales/i18n';
+import { LendForm } from './LendForm';
+
+type LendModalContainerProps = {
+  isOpen: boolean;
+  handleCloseModal: () => void;
+};
+
+export const LendModalContainer: FC<LendModalContainerProps> = ({
+  isOpen,
+  handleCloseModal,
+}) => (
+  <Dialog disableFocusTrap isOpen={isOpen}>
+    <DialogHeader
+      title={t(translations.aavePage.lendModal.title)}
+      onClose={handleCloseModal}
+    />
+    <DialogBody className="flex flex-col gap-6">
+      <LendForm onSuccess={handleCloseModal} />
+    </DialogBody>
+  </Dialog>
+);
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
index 98229eb9f..19d114a4d 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
@@ -41,26 +41,25 @@ export const LendPositionsList: FC<LendPositionsListProps> = ({
   loading,
 }) => {
   const { account } = useAccount();
-  const [open, setOpen] = useState<boolean>(true);
-  const [withdrawAssetDialog, setWithdrawAssetDialog] = useState<
-    string | undefined
-  >();
+  const [open, setOpen] = useState(true);
+  const [withdrawAssetDialog, setWithdrawAssetDialog] = useState<string>();
   const [orderOptions, setOrderOptions] = useState<OrderOptions>({
     orderBy: 'balance',
     orderDirection: OrderDirection.Asc,
   });
 
-  const onWithdrawClick = useCallback((asset: string) => {
-    setWithdrawAssetDialog(asset);
-  }, []);
-
   const onWithdrawClose = useCallback(() => {
     setWithdrawAssetDialog(undefined);
   }, []);
 
   const mobileRenderer = useCallback(
-    p => <LendPositionDetails position={p} onWithdrawClick={onWithdrawClick} />,
-    [onWithdrawClick],
+    p => (
+      <LendPositionDetails
+        position={p}
+        onWithdrawClick={setWithdrawAssetDialog}
+      />
+    ),
+    [setWithdrawAssetDialog],
   );
 
   const rowTitleRenderer = useCallback(
@@ -114,7 +113,7 @@ export const LendPositionsList: FC<LendPositionsListProps> = ({
 
           <Table
             isLoading={loading}
-            columns={COLUMNS_CONFIG(onWithdrawClick)}
+            columns={COLUMNS_CONFIG(setWithdrawAssetDialog)}
             rowClassName="bg-gray-80"
             accordionClassName="bg-gray-60 border border-gray-70"
             rowTitle={rowTitleRenderer}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
index 58ed5a6b1..34a8b6a1f 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
@@ -45,7 +45,7 @@ export const LendPositionDetails: FC<LendPositionDetailsProps> = ({
             />
           </span>
         }
-        value={<AmountRenderer value={position.apy} suffix={'%'} />}
+        value={<AmountRenderer value={position.apy} suffix="%" />}
       />
 
       {/* Can be collateral */}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx
index 46e4d21cc..d6d4a477c 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useCallback, useState } from 'react';
 
 import { Toggle } from '@sovryn/ui';
 
@@ -15,11 +15,11 @@ export const ToggleCollateralAction: FC<ToggleCollateralActionProps> = ({
   const { handleSwitchCollateral } = useAaveSupply();
   const [isCollateral, setIsCollateral] = useState(position.collateral);
 
-  const toggleCollateral = async () => {
-    await handleSwitchCollateral(position.asset, !isCollateral, {
+  const toggleCollateral = useCallback(() => {
+    handleSwitchCollateral(position.asset, !isCollateral, {
       onComplete: () => setIsCollateral(!isCollateral),
     });
-  };
+  }, [handleSwitchCollateral, setIsCollateral, isCollateral, position.asset]);
 
   return (
     <Toggle
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx
index 630ce87c8..40d120616 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx
@@ -118,6 +118,7 @@ export const WithdrawForm: FC<WithdrawFormProps> = ({ asset, onComplete }) => {
 
         <div className="space-y-3">
           <AssetAmountInput
+            chainId={BOB_CHAIN_ID}
             amountValue={withdrawAmount}
             assetUsdValue={withdrawAmountUsd}
             onAmountChange={setWithdrawAmount}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
new file mode 100644
index 000000000..40d120616
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
@@ -0,0 +1,161 @@
+import React, { FC, useCallback, useMemo, useState } from 'react';
+
+import { t } from 'i18next';
+
+import {
+  Button,
+  ErrorBadge,
+  ErrorLevel,
+  SimpleTable,
+  SimpleTableRow,
+  Tabs,
+  TabType,
+} from '@sovryn/ui';
+import { Decimal } from '@sovryn/utils';
+
+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 { useAaveUserReservesData } from '../../../../../../../hooks/aave/useAaveUserReservesData';
+import { useAaveWithdraw } from '../../../../../../../hooks/aave/useAaveWithdraw';
+import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
+import { translations } from '../../../../../../../locales/i18n';
+
+const pageTranslations = translations.aavePage;
+
+type WithdrawFormProps = {
+  asset: string;
+  onComplete: () => void;
+};
+
+export const WithdrawForm: FC<WithdrawFormProps> = ({ asset, onComplete }) => {
+  const { handleWithdraw } = useAaveWithdraw();
+  const { summary } = useAaveUserReservesData();
+  const [withdrawAsset, setWithdrawAsset] = useState<string>(asset);
+  const [withdrawAmount, setWithdrawAmount, withdrawSize] =
+    useDecimalAmountInput('');
+
+  const withdrawableAssetsOptions = useMemo(
+    () =>
+      summary.reserves
+        .filter(r => r.supplied.gt(0))
+        .map(sa => ({
+          value: sa.asset,
+          label: (
+            <AssetRenderer
+              showAssetLogo
+              asset={sa.asset}
+              assetClassName="font-medium"
+              chainId={BOB_CHAIN_ID}
+            />
+          ),
+        })),
+    [summary],
+  );
+
+  const withdrawReserve = useMemo(() => {
+    return summary.reserves.find(r => r.reserve.symbol === withdrawAsset);
+  }, [withdrawAsset, summary]);
+
+  const maximumWithdrawAmount: Decimal = useMemo(() => {
+    return withdrawReserve ? withdrawReserve.supplied : Decimal.from(0);
+  }, [withdrawReserve]);
+
+  const withdrawAmountUsd: Decimal = useMemo(() => {
+    return withdrawReserve
+      ? withdrawSize.mul(withdrawReserve.reserve.priceInUSD)
+      : Decimal.from(0);
+  }, [withdrawSize, withdrawReserve]);
+
+  const remainingSupply = useMemo(
+    () => maximumWithdrawAmount.sub(withdrawSize),
+    [withdrawSize, maximumWithdrawAmount],
+  );
+
+  const isValidWithdrawAmount = useMemo(
+    () => (withdrawSize.gt(0) ? withdrawSize.lte(maximumWithdrawAmount) : true),
+    [withdrawSize, maximumWithdrawAmount],
+  );
+
+  const submitButtonDisabled = useMemo(
+    () => !isValidWithdrawAmount || withdrawSize.lte(0),
+    [isValidWithdrawAmount, withdrawSize],
+  );
+
+  const tabItems = useMemo(
+    () => [
+      // For now just withdraw is supported
+      {
+        activeClassName: 'text-primary-20',
+        dataAttribute: 'withdraw',
+        label: t(translations.common.withdraw),
+      },
+    ],
+    [],
+  );
+
+  const onConfirm = useCallback(() => {
+    handleWithdraw(
+      withdrawSize,
+      withdrawAsset,
+      withdrawSize.eq(maximumWithdrawAmount),
+      { onComplete },
+    );
+  }, [
+    handleWithdraw,
+    withdrawSize,
+    withdrawAsset,
+    onComplete,
+    maximumWithdrawAmount,
+  ]);
+
+  return (
+    <form className="flex flex-col gap-6">
+      <div className="space-y-2">
+        <Tabs type={TabType.secondary} index={0} items={tabItems} />
+
+        <div className="space-y-3">
+          <AssetAmountInput
+            chainId={BOB_CHAIN_ID}
+            amountValue={withdrawAmount}
+            assetUsdValue={withdrawAmountUsd}
+            onAmountChange={setWithdrawAmount}
+            invalid={!isValidWithdrawAmount}
+            maxAmount={maximumWithdrawAmount}
+            assetOptions={withdrawableAssetsOptions}
+            onAssetChange={setWithdrawAsset}
+            assetValue={withdrawAsset}
+            amountLabel={t(translations.common.amount)}
+          />
+          {!isValidWithdrawAmount && (
+            <ErrorBadge
+              level={ErrorLevel.Critical}
+              message={t(pageTranslations.withdrawForm.invalidAmountError)}
+              dataAttribute="withdraw-amount-error"
+            />
+          )}
+        </div>
+      </div>
+
+      <SimpleTable>
+        <SimpleTableRow
+          label={t(translations.aavePage.withdrawForm.remainingSupply)}
+          value={
+            <AmountRenderer
+              value={remainingSupply.toNumber()}
+              suffix={withdrawAsset}
+            />
+          }
+        />
+      </SimpleTable>
+
+      <Button
+        disabled={submitButtonDisabled}
+        onClick={onConfirm}
+        text={t(translations.common.buttons.confirm)}
+      />
+    </form>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx
new file mode 100644
index 000000000..33000377a
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx
@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+
+import { t } from 'i18next';
+
+import { Dialog, DialogBody, DialogHeader } from '@sovryn/ui';
+
+import { translations } from '../../../../../../../locales/i18n';
+import { WithdrawForm } from './WithdrawForm';
+
+type WithdrawModalContainerProps = {
+  isOpen: boolean;
+  handleCloseModal: () => void;
+};
+
+export const WithdrawModalContainer: FC<WithdrawModalContainerProps> = ({
+  isOpen,
+  handleCloseModal,
+}) => (
+  <Dialog disableFocusTrap isOpen={isOpen}>
+    <DialogHeader
+      title={t(translations.aavePage.common.withdraw)}
+      onClose={handleCloseModal}
+    />
+    <DialogBody className="flex flex-col gap-6">
+      <WithdrawForm onSuccess={handleCloseModal} />
+    </DialogBody>
+  </Dialog>
+);
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
index 6b43554d9..cc69a4756 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
@@ -6,16 +6,14 @@ import { Helmet } from 'react-helmet-async';
 import { useSearchParams } from 'react-router-dom';
 
 import { Paragraph, Tabs, TabSize, TabType } from '@sovryn/ui';
-import { Decimal } from '@sovryn/utils';
 
-import { useAaveInterestRatesData } from '../../../hooks/aave/useAaveRates';
 import { useAaveReservesData } from '../../../hooks/aave/useAaveReservesData';
 import { translations } from '../../../locales/i18n';
 import { BorrowDetailsGraph } from './components/BorrowDetailsGraph/BorrowDetailsGraph';
 import { EModeDetails } from './components/EModeDetails/EModeDetails';
 import { InterestRateModelGraph } from './components/InterestRateModelGraph/InterestRateModelGraph';
 import { SupplyDetailsGraph } from './components/SupplyDetailsGraph/SupplyDetailsGraph';
-import { ReserveOverview, TopPanel } from './components/TopPanel/TopPanel';
+import { TopPanel } from './components/TopPanel/TopPanel';
 import { WalletOverview } from './components/WalletOverview/WalletOverview';
 
 const pageTranslations = translations.aaveReserveOverviewPage;
@@ -29,7 +27,6 @@ const AaveReserveOverviewPage: FC = () => {
   const [searchParams] = useSearchParams();
   const symbol = searchParams.get('asset') || 'ETH';
   const { reserves } = useAaveReservesData();
-  const { data: interestRatesData } = useAaveInterestRatesData();
   const [activeOverviewTab, setActiveOverviewTab] = useState<OverviewTab>(
     OverviewTab.RESERVE,
   );
@@ -39,50 +36,14 @@ const AaveReserveOverviewPage: FC = () => {
     [reserves, symbol],
   );
 
-  const reserveOverview: ReserveOverview = useMemo(() => {
-    if (!reserve) {
-      return {
-        symbol,
-        name: symbol,
-        underlyingAsset: '',
-        aTokenAddress: '',
-        variableDebtTokenAddress: '',
-        stableDebtTokenAddress: '',
-        reserveSize: Decimal.from(0),
-        availableLiquidity: Decimal.from(0),
-        utilizationRate: Decimal.from(0),
-        oraclePrice: Decimal.from(0),
-        oracleAddress: '',
-      };
-    }
-
-    return {
-      symbol: reserve.symbol,
-      name: reserve.name,
-      underlyingAsset: reserve.underlyingAsset,
-      aTokenAddress: reserve.aTokenAddress,
-      variableDebtTokenAddress: reserve.variableDebtTokenAddress,
-      stableDebtTokenAddress: reserve.stableDebtTokenAddress,
-      reserveSize: Decimal.from(reserve?.availableLiquidityUSD ?? 0).add(
-        reserve?.totalDebtUSD ?? 0,
-      ),
-      availableLiquidity: Decimal.from(reserve.availableLiquidityUSD),
-      utilizationRate: Decimal.from(reserve.borrowUsageRatio),
-      oraclePrice: Decimal.from(reserve.priceInUSD),
-      oracleAddress: reserve.priceOracle,
-    };
-  }, [reserve, symbol]);
-
+  if (!reserve) return null;
   return (
     <div className="w-full pb-6 2xl:px-12">
       <Helmet>
         <title>{t(pageTranslations.meta.title)}</title>
       </Helmet>
 
-      <TopPanel
-        reserve={reserveOverview}
-        className="lg:mb-[110px] lg:mt-[52px]"
-      />
+      <TopPanel reserve={reserve} className="lg:mb-[110px] lg:mt-[52px]" />
 
       <Paragraph className="text-base mb-4 hidden lg:block">
         {t(pageTranslations.reserveStatusTab.fullTitle)}
@@ -117,15 +78,13 @@ const AaveReserveOverviewPage: FC = () => {
               'lg:block space-y-4 flex-grow w-min',
             )}
           >
-            <SupplyDetailsGraph />
-            <BorrowDetailsGraph />
-            <EModeDetails />
-            {interestRatesData && (
-              <InterestRateModelGraph
-                rates={interestRatesData}
-                reserveFactor={reserve?.reserveFactor}
-              />
-            )}
+            <SupplyDetailsGraph reserve={reserve} />
+
+            <BorrowDetailsGraph reserve={reserve} />
+
+            <EModeDetails reserve={reserve} />
+
+            <InterestRateModelGraph reserve={reserve} />
           </div>
 
           {/* wallet column */}
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
index 4e34cfd07..a689572f4 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
@@ -7,15 +7,24 @@ import { Accordion, Link, Paragraph } from '@sovryn/ui';
 
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
+import { Reserve } from '../../../../../hooks/aave/useAaveReservesData';
 import { useIsMobile } from '../../../../../hooks/useIsMobile';
 import { translations } from '../../../../../locales/i18n';
+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;
 
-export const BorrowDetailsGraph: FC = () => {
+type BorrowDetailsGraphProps = {
+  reserve: Reserve;
+};
+
+export const BorrowDetailsGraph: FC<BorrowDetailsGraphProps> = ({
+  reserve,
+}) => {
   const [open, setOpen] = useState(true);
   const { isMobile } = useIsMobile();
 
@@ -31,6 +40,10 @@ export const BorrowDetailsGraph: FC = () => {
     };
   }, []);
 
+  const borrowStats = useMemo(() => {
+    return normalizeBorrowStats(reserve);
+  }, [reserve]);
+
   return (
     <Accordion
       label={
@@ -52,32 +65,73 @@ export const BorrowDetailsGraph: FC = () => {
             value={
               <div>
                 <div className="space-x-1 font-medium text-base">
-                  <AmountRenderer value={100} suffix="B" />
-                  <span>{t(pageTranslations.of)}</span>
-                  <AmountRenderer value={100} suffix="B" />
+                  <AmountRenderer
+                    precision={2}
+                    {...formatAmountWithSuffix(borrowStats.totalBorrowed)}
+                  />
+                  {borrowStats.borrowCap.gt(0) && (
+                    <>
+                      <span>{t(pageTranslations.of)}</span>
+                      <AmountRenderer
+                        precision={2}
+                        {...formatAmountWithSuffix(borrowStats.borrowCap)}
+                      />
+                    </>
+                  )}
                 </div>
+
                 <div className="space-x-1 text-gray-40 text-xs font-semibold">
-                  <AmountRenderer value={100} suffix="B" />
-                  <span>{t(pageTranslations.of)}</span>
-                  <AmountRenderer value={100} suffix="B" />
+                  <AmountRenderer
+                    prefix="$"
+                    precision={2}
+                    {...formatAmountWithSuffix(borrowStats.totalBorrowedUSD)}
+                  />
+                  {borrowStats.borrowCap.gt(0) && (
+                    <>
+                      <span>{t(pageTranslations.of)}</span>
+                      <AmountRenderer
+                        prefix="$"
+                        precision={2}
+                        {...formatAmountWithSuffix(borrowStats.borrowCapUSD)}
+                      />
+                    </>
+                  )}
                 </div>
 
                 {/* Progress bar */}
-                <div className="mt-2 h-[3px] w-[160px] bg-gray-70 rounded-full">
-                  <div className="h-full bg-primary-30 w-[80%]"></div>
-                </div>
+                {borrowStats.borrowCap.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}%]`}
+                    ></div>
+                  </div>
+                )}
               </div>
             }
           />
           <div className="flex gap-8">
             <StatisticsCard
               label={t(pageTranslations.apr)}
-              value={<AmountRenderer value={5.94} suffix="%" />}
-            />
-            <StatisticsCard
-              label={t(pageTranslations.borrowCap)}
-              value={<AmountRenderer value={1.4} suffix="M" />}
+              value={
+                <AmountRenderer
+                  value={borrowStats.apr}
+                  suffix="%"
+                  precision={2}
+                />
+              }
             />
+
+            {borrowStats.borrowCap.gt(0) && (
+              <StatisticsCard
+                label={t(pageTranslations.borrowCap)}
+                value={
+                  <AmountRenderer
+                    precision={2}
+                    {...formatAmountWithSuffix(borrowStats.borrowCap)}
+                  />
+                }
+              />
+            )}
           </div>
         </div>
 
@@ -88,16 +142,29 @@ export const BorrowDetailsGraph: FC = () => {
             {t(pageTranslations.collectorInfo)}
           </Paragraph>
 
-          {/* statistics */}
+          {/* reserve factor */}
           <div className="flex gap-8">
             <StatisticsCard
               label={t(pageTranslations.reserveFactor)}
               help={t(pageTranslations.reserveFactorInfo)}
-              value={<AmountRenderer value={85.94} suffix="%" />}
+              value={
+                <AmountRenderer
+                  value={borrowStats.reserveFactor}
+                  precision={2}
+                  suffix="%"
+                />
+              }
             />
+
             <StatisticsCard
               label={t(pageTranslations.collectorContract)}
-              value={<Link href="#" text={t(pageTranslations.viewContract)} />}
+              value={
+                <Link
+                  openNewTab
+                  href={borrowStats.collectorContractLink}
+                  text={t(pageTranslations.viewContract)}
+                />
+              }
             />
           </div>
         </div>
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.utils.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.utils.ts
new file mode 100644
index 000000000..82cbf0f72
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.utils.ts
@@ -0,0 +1,21 @@
+import { Decimal } from '@sovryn/utils';
+
+import { config } from '../../../../../constants/aave';
+import { Reserve } from '../../../../../hooks/aave/useAaveReservesData';
+import { getBobExplorerUrl } from '../../../../../utils/helpers';
+
+export const normalizeBorrowStats = (reserve: Reserve) => ({
+  apr: Decimal.from(reserve.variableBorrowAPR).mul(100),
+  totalBorrowed: Decimal.from(reserve.totalDebt),
+  totalBorrowedUSD: Decimal.from(reserve.totalDebtUSD),
+  borrowCap: Decimal.from(reserve.borrowCap),
+  borrowCapUSD: Decimal.from(reserve.borrowCapUSD),
+  borrowedPercentage: Decimal.from(reserve.totalDebtUSD)
+    .div(Decimal.from(reserve.debtCeilingUSD))
+    .mul(100)
+    .toString(0),
+  collectorContractLink: `${getBobExplorerUrl()}/address/${
+    config.TreasuryAddress
+  }`,
+  reserveFactor: Decimal.from(reserve.reserveFactor).mul(100),
+});
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx
index e29fc6d04..b9e16f9f4 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useMemo, useState } from 'react';
 
 import { t } from 'i18next';
 
@@ -7,20 +7,26 @@ import { Accordion, Icon, Link, Paragraph } from '@sovryn/ui';
 import { EModeIcon } from '../../../../1_atoms/Icons/Icons';
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
+import { Reserve } from '../../../../../hooks/aave/useAaveReservesData';
 import { useIsMobile } from '../../../../../hooks/useIsMobile';
 import { translations } from '../../../../../locales/i18n';
+import { normalizeEModeStats } from './EModeDetails.utils';
 
 const pageTranslations = translations.aaveReserveOverviewPage.eModeDetails;
 
-export const EModeDetails: FC = () => {
+export type EModeDetailsProps = {
+  reserve: Reserve;
+};
+
+export const EModeDetails: FC<EModeDetailsProps> = ({ reserve }) => {
   const [open, setOpen] = useState(true);
   const { isMobile } = useIsMobile();
 
-  // TODO: All this data is mocked
-  const maxLtv = 93;
-  const liquidationThreshold = 94;
-  const liquidationPenalty = 1;
+  const eModeStats = useMemo(() => {
+    return normalizeEModeStats(reserve);
+  }, [reserve]);
 
+  if (!eModeStats.enabled) return null;
   return (
     <Accordion
       label={
@@ -43,7 +49,7 @@ export const EModeDetails: FC = () => {
           <div className="flex items-center">
             <Icon size={16} className="mr-2 text-primary-30" icon={EModeIcon} />
             <Paragraph className="text-sm font-medium">
-              {t(pageTranslations.ethCorrelatedCategory)}
+              {eModeStats.label}
             </Paragraph>
           </div>
         </div>
@@ -53,19 +59,33 @@ export const EModeDetails: FC = () => {
             label={t(pageTranslations.maxLtv)}
             className="space-y-2"
             help={t(pageTranslations.maxLtvInfo)}
-            value={<AmountRenderer value={maxLtv} suffix="%" />}
+            value={
+              <AmountRenderer value={eModeStats.ltv} suffix="%" precision={2} />
+            }
           />
           <StatisticsCard
             label={t(pageTranslations.liquidationThreshold)}
             className="space-y-2 "
             help={t(pageTranslations.liquidationThresholdInfo)}
-            value={<AmountRenderer value={liquidationThreshold} suffix="%" />}
+            value={
+              <AmountRenderer
+                value={eModeStats.liquidationThreshold}
+                suffix="%"
+                precision={2}
+              />
+            }
           />
           <StatisticsCard
             label={t(pageTranslations.liquidationPenalty)}
             className="space-y-2"
             help={t(pageTranslations.liquidationPenaltyInfo)}
-            value={<AmountRenderer value={liquidationPenalty} suffix="%" />}
+            value={
+              <AmountRenderer
+                value={eModeStats.liquidationPenalty}
+                suffix="%"
+                precision={2}
+              />
+            }
           />
         </div>
 
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.utils.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.utils.ts
new file mode 100644
index 000000000..773dfac5b
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.utils.ts
@@ -0,0 +1,15 @@
+import { Decimal } from '@sovryn/utils';
+
+import { Reserve } from '../../../../../hooks/aave/useAaveReservesData';
+
+export const normalizeEModeStats = (reserve: Reserve) => ({
+  label: reserve.eModeLabel,
+  enabled: reserve.eModeCategoryId !== 0,
+  ltv: Decimal.from(reserve.formattedEModeLtv).mul(100),
+  liquidationThreshold: Decimal.from(
+    reserve.formattedEModeLiquidationThreshold,
+  ).mul(100),
+  liquidationPenalty: Decimal.from(reserve.formattedEModeLiquidationBonus).mul(
+    100,
+  ),
+});
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
index d850c613d..c6acc0f1e 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
@@ -4,10 +4,12 @@ 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 { IRatesDataResult } from '../../../../../hooks/aave/useAaveRates';
+import { useAaveInterestRatesData } from '../../../../../hooks/aave/useAaveRates';
+import { Reserve } from '../../../../../hooks/aave/useAaveReservesData';
 import { useIsMobile } from '../../../../../hooks/useIsMobile';
 import { translations } from '../../../../../locales/i18n';
 import { Chart } from './components/Chart/Chart';
@@ -15,22 +17,17 @@ import { Chart } from './components/Chart/Chart';
 const pageTranslations = translations.aaveReserveOverviewPage.interestRateModel;
 
 type InterestRateModelGraphProps = {
-  rates: IRatesDataResult;
-  reserveFactor: string | undefined;
+  reserve: Reserve;
 };
 
 export const InterestRateModelGraph: FC<InterestRateModelGraphProps> = ({
-  rates,
-  reserveFactor,
+  reserve,
 }) => {
-  const [open, setOpen] = useState<boolean>(true);
   const { isMobile } = useIsMobile();
+  const [open, setOpen] = useState<boolean>(true);
+  const { rates } = useAaveInterestRatesData();
 
-  const meta = {
-    label: t(pageTranslations.chart.label1),
-    lineColor: theme.colors['primary-30'],
-  };
-
+  if (!rates) return null;
   return (
     <Accordion
       label={
@@ -45,36 +42,48 @@ export const InterestRateModelGraph: FC<InterestRateModelGraphProps> = ({
       flatMode={!isMobile}
       dataAttribute="interest-rate-model"
     >
-      {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}
-                  suffix="%"
-                />
-              }
-            />
-            <Link href="#" text={t(pageTranslations.interestRateStrategy)} />
-          </div>
+      <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}
+        />
 
-          <Chart meta={meta} rates={rates} />
-          {/* statistics */}
-          <div className="flex gap-8">
-            <StatisticsCard
-              label={t(pageTranslations.reserveFactor)}
-              help={t(pageTranslations.reserveFactorInfo)}
-              value={<AmountRenderer value={reserveFactor ?? 0} suffix="%" />}
-            />
-            <StatisticsCard
-              label={t(pageTranslations.collectorContract)}
-              value={<Link href="#" text={t(pageTranslations.viewContract)} />}
-            />
-          </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)} />}
+          />
         </div>
-      )}
+      </div>
     </Accordion>
   );
 };
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
index f2050954e..3ebca6814 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
@@ -132,7 +132,6 @@ export const Chart: FC<ChartProps> = ({ meta, rates }) => {
               callback: function (value) {
                 return value + '%';
               },
-              //maxTicksLimit: 5,
             },
           },
           y: {
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
index ad1e28006..8dd6287f4 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
@@ -1,5 +1,6 @@
 import React, { FC, useMemo, useState } from 'react';
 
+import classNames from 'classnames';
 import { t } from 'i18next';
 
 import { theme } from '@sovryn/tailwindcss-config';
@@ -7,17 +8,27 @@ import { Accordion, Icon, IconNames, Paragraph } from '@sovryn/ui';
 
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
+import { Reserve } from '../../../../../hooks/aave/useAaveReservesData';
 import { useIsMobile } from '../../../../../hooks/useIsMobile';
 import { translations } from '../../../../../locales/i18n';
+import { formatAmountWithSuffix } from '../../../../../utils/math';
+import { normalizeSupplyStats } from './SupplyDetailsGraph.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.supplyDetails;
 
-export const SupplyDetailsGraph: FC = () => {
+export type SupplyDetailsGraphProps = {
+  reserve: Reserve;
+};
+
+export const SupplyDetailsGraph: FC<SupplyDetailsGraphProps> = ({
+  reserve,
+}) => {
   const [open, setOpen] = useState(true);
   const { isMobile } = useIsMobile();
+
   // TODO: mocked amounts
   const mockData: MockData<{ x: string; y: number }> = useMemo(() => {
     const data1 = harcodedData;
@@ -30,6 +41,10 @@ export const SupplyDetailsGraph: FC = () => {
     };
   }, []);
 
+  const supplyStats = useMemo(() => {
+    return normalizeSupplyStats(reserve);
+  }, [reserve]);
+
   return (
     <Accordion
       label={
@@ -52,65 +67,134 @@ export const SupplyDetailsGraph: FC = () => {
             value={
               <div>
                 <div className="space-x-1 font-medium text-base">
-                  <AmountRenderer value={100} suffix="B" />
-                  <span>{t(pageTranslations.of)}</span>
-                  <AmountRenderer value={100} suffix="B" />
+                  <AmountRenderer
+                    precision={2}
+                    {...formatAmountWithSuffix(supplyStats.totalSupplied)}
+                  />
+                  {supplyStats.supplyCap.gt(0) && (
+                    <>
+                      <span>{t(pageTranslations.of)}</span>
+                      <AmountRenderer
+                        precision={2}
+                        {...formatAmountWithSuffix(supplyStats.supplyCap)}
+                      />
+                    </>
+                  )}
                 </div>
+
                 <div className="space-x-1 text-gray-40 text-xs font-semibold">
-                  <AmountRenderer value={100} suffix="B" />
-                  <span>{t(pageTranslations.of)}</span>
-                  <AmountRenderer value={100} suffix="B" />
+                  <AmountRenderer
+                    prefix="$"
+                    precision={2}
+                    {...formatAmountWithSuffix(supplyStats.totalSuppliedUSD)}
+                  />
+                  {supplyStats.supplyCap.gt(0) && (
+                    <>
+                      <span>{t(pageTranslations.of)}</span>
+                      <AmountRenderer
+                        prefix="$"
+                        precision={2}
+                        {...formatAmountWithSuffix(supplyStats.supplyCapUSD)}
+                      />
+                    </>
+                  )}
                 </div>
 
                 {/* Progress bar */}
-                <div className="mt-2 h-[3px] w-[160px] bg-gray-70 rounded-full">
-                  <div className="h-full bg-primary-30 w-[80%]"></div>
-                </div>
+                {supplyStats.supplyCap.gt(0) && (
+                  <div className="mt-2 h-[3px] w-[160px] bg-gray-70 rounded-full">
+                    <div
+                      className={`h-full bg-primary-30 w-[${supplyStats.suppliedPercentage.toString(
+                        0,
+                      )}%]`}
+                    ></div>
+                  </div>
+                )}
               </div>
             }
           />
           <StatisticsCard
             label={t(pageTranslations.apy)}
-            value={<AmountRenderer value={5.94} suffix="%" />}
+            value={
+              <AmountRenderer
+                value={supplyStats.supplyApy}
+                suffix="%"
+                precision={2}
+              />
+            }
           />
         </div>
 
         <Chart mockData={mockData} yLabel1="" />
 
         <div className="space-y-6">
-          {/* heading */}
+          {/* collateral usage */}
           <div className="flex gap-8">
             <Paragraph className="text-base">
               {t(pageTranslations.collateralUsage)}
             </Paragraph>
             <div className="flex gap-2 items-center">
               <Icon
-                icon={IconNames.CHECK}
-                className="text-positive h-3 w-3"
+                icon={
+                  reserve.usageAsCollateralEnabled
+                    ? IconNames.CHECK
+                    : IconNames.X_MARK
+                }
+                className={classNames('h-3 w-3', {
+                  'text-positive': reserve.usageAsCollateralEnabled,
+                  'text-negative': !reserve.usageAsCollateralEnabled,
+                })}
                 size={16}
               />
               <span className="text-sm text-gray-30">
-                {t(pageTranslations.canBeCollateral)}
+                {t(
+                  reserve.usageAsCollateralEnabled
+                    ? pageTranslations.canBeCollateral
+                    : pageTranslations.cannotBeCollateral,
+                )}
               </span>
             </div>
           </div>
 
           {/* statistics */}
           <div className="flex flex-col sm:flex-row justify-between gap-4 lg:justify-start lg:gap-8">
+            {/* maxLTV */}
             <StatisticsCard
               label={t(pageTranslations.maxLtv)}
               help={t(pageTranslations.maxLtvInfo)}
-              value={<AmountRenderer value={85.94} suffix="%" />}
+              value={
+                <AmountRenderer
+                  value={supplyStats.maxLTV}
+                  suffix="%"
+                  precision={2}
+                />
+              }
             />
+
+            {/* liquidation threshold */}
             <StatisticsCard
               label={t(pageTranslations.liquidationThreshold)}
               help={t(pageTranslations.liquidationThresholdInfo)}
-              value={<AmountRenderer value={83.01} suffix="%" />}
+              value={
+                <AmountRenderer
+                  value={supplyStats.liquidationThreshold}
+                  suffix="%"
+                  precision={2}
+                />
+              }
             />
+
+            {/* liquidation penalty */}
             <StatisticsCard
               label={t(pageTranslations.liquidationPenalty)}
               help={t(pageTranslations.liquidationPenaltyInfo)}
-              value={<AmountRenderer value={5.0} suffix="%" />}
+              value={
+                <AmountRenderer
+                  value={supplyStats.liquidationPenalty}
+                  suffix="%"
+                  precision={2}
+                />
+              }
             />
           </div>
         </div>
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.utils.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.utils.tsx
new file mode 100644
index 000000000..7430758d0
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.utils.tsx
@@ -0,0 +1,25 @@
+import { Decimal } from '@sovryn/utils';
+
+import { Reserve } from '../../../../../hooks/aave/useAaveReservesData';
+
+export const normalizeSupplyStats = (reserve: Reserve) => ({
+  totalSupplied: Decimal.from(reserve.formattedAvailableLiquidity).add(
+    reserve.totalDebt,
+  ),
+  totalSuppliedUSD: Decimal.from(reserve.availableLiquidityUSD).add(
+    reserve.totalDebtUSD,
+  ),
+  supplyApy: Decimal.from(reserve.supplyAPY).mul(100),
+  supplyCap: Decimal.from(reserve.supplyCap),
+  supplyCapUSD: Decimal.from(reserve.supplyCapUSD),
+  suppliedPercentage: Decimal.from(reserve.supplyCapUSD)
+    .div(Decimal.from(reserve.supplyCapUSD))
+    .mul(100),
+  maxLTV: Decimal.from(reserve.baseLTVasCollateral).div(100),
+  liquidationThreshold: Decimal.from(
+    reserve.formattedReserveLiquidationThreshold,
+  ).mul(100),
+  liquidationPenalty: Decimal.from(
+    reserve.formattedReserveLiquidationBonus,
+  ).mul(100),
+});
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
index c4240d299..041a8d0bb 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
@@ -21,10 +21,11 @@ import { WalletIcon } from '../../../../1_atoms/Icons/Icons';
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
 import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
-import { useNotifyError } from '../../../../../hooks/useNotifyError';
+import { Reserve } from '../../../../../hooks/aave/useAaveReservesData';
+import { useAddTokenToWallet } from '../../../../../hooks/useAddTokenToWallet';
 import { translations } from '../../../../../locales/i18n';
 import { getBobExplorerUrl } from '../../../../../utils/helpers';
-import { formatUsdAmount } from './TopPanel.utils';
+import { formatAmountWithSuffix } from '../../../../../utils/math';
 import { ReserveTokens } from './components/ReserveTokens/ReserveTokens';
 
 const pageTranslations = translations.aaveReserveOverviewPage.topPanel;
@@ -44,45 +45,32 @@ export type ReserveOverview = {
 };
 
 type TopPanelProps = {
-  reserve: ReserveOverview;
+  reserve: Reserve;
   className?: string;
 };
 
 export const TopPanel: FC<TopPanelProps> = ({ reserve, className }) => {
-  const { notifyError } = useNotifyError();
+  const { addTokenToWallet } = useAddTokenToWallet();
 
   const openInExplorer = useCallback((tokenAddress: string) => {
     const explorer = getBobExplorerUrl();
     window.open(`${explorer}/address/${tokenAddress}`, '_blank');
   }, []);
 
-  const addToWallet = useCallback(
-    (token: string) => {
-      try {
-        if (!(window as any)?.ethereum) {
-          throw new Error('Wallet not available');
-        }
-
-        (window as any)?.ethereum.request({
-          method: 'wallet_watchAsset',
-          params: {
-            type: 'ERC20',
-            options: {
-              chainId: BOB_CHAIN_ID,
-              address: token,
-            },
-          },
-        });
-      } catch (error) {
-        notifyError(error);
-      }
-    },
-    [notifyError],
-  );
-
   const oracleLink = useMemo(() => {
-    return getBobExplorerUrl() + '/address/' + reserve.oracleAddress;
-  }, [reserve.oracleAddress]);
+    return getBobExplorerUrl() + '/address/' + reserve.priceOracle;
+  }, [reserve.priceOracle]);
+
+  const reserveSize = useMemo(() => {
+    return Decimal.from(reserve.availableLiquidityUSD).add(
+      reserve.totalDebtUSD,
+    );
+  }, [reserve]);
+
+  const onTokenClick = useCallback(
+    (tokenAddress: string) => addTokenToWallet(tokenAddress, BOB_CHAIN_ID),
+    [addTokenToWallet],
+  );
 
   return (
     <div className={classNames('w-full flex flex-col gap-6', className)}>
@@ -124,7 +112,7 @@ export const TopPanel: FC<TopPanelProps> = ({ reserve, className }) => {
                   underlyingTokenAddress={reserve.underlyingAsset}
                   variableDebtTokenAddress={reserve.variableDebtTokenAddress}
                   stableDebtTokenAddress={reserve.stableDebtTokenAddress}
-                  onClick={openInExplorer}
+                  onTokenClick={openInExplorer}
                 />
               }
             >
@@ -150,7 +138,7 @@ export const TopPanel: FC<TopPanelProps> = ({ reserve, className }) => {
                   underlyingTokenAddress={reserve.underlyingAsset}
                   variableDebtTokenAddress={reserve.variableDebtTokenAddress}
                   stableDebtTokenAddress={reserve.stableDebtTokenAddress}
-                  onClick={addToWallet}
+                  onTokenClick={onTokenClick}
                 />
               }
             >
@@ -171,7 +159,7 @@ export const TopPanel: FC<TopPanelProps> = ({ reserve, className }) => {
             <AmountRenderer
               prefix="$"
               className="text-2xl"
-              {...formatUsdAmount(reserve.reserveSize)}
+              {...formatAmountWithSuffix(reserveSize)}
             />
           }
         />
@@ -181,7 +169,7 @@ export const TopPanel: FC<TopPanelProps> = ({ reserve, className }) => {
             <AmountRenderer
               prefix="$"
               className="text-2xl"
-              {...formatUsdAmount(reserve.availableLiquidity)}
+              {...formatAmountWithSuffix(reserve.formattedAvailableLiquidity)}
             />
           }
         />
@@ -190,7 +178,7 @@ export const TopPanel: FC<TopPanelProps> = ({ reserve, className }) => {
           value={
             <AmountRenderer
               suffix="%"
-              value={reserve.utilizationRate}
+              value={reserve.borrowUsageRatio}
               precision={2}
               className="text-2xl"
             />
@@ -202,7 +190,7 @@ export const TopPanel: FC<TopPanelProps> = ({ reserve, className }) => {
           value={
             <AmountRenderer
               prefix="$"
-              value={reserve.oraclePrice}
+              value={reserve.priceInUSD}
               precision={2}
               className="text-2xl"
             />
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.utils.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.utils.tsx
deleted file mode 100644
index f766624e0..000000000
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.utils.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Decimal } from '@sovryn/utils';
-
-export function formatUsdAmount(value: Decimal): {
-  value: string;
-  suffix: string;
-} {
-  if (value.gte(1e6)) {
-    return { value: value.div(1e6).toString(1), suffix: 'M' };
-  } else if (value.gte(1e3)) {
-    return { value: value.div(1e3).toString(1), suffix: 'K' };
-  } else {
-    return { value: value.toString(), suffix: '' };
-  }
-}
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/components/ReserveTokens/ReserveTokens.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/components/ReserveTokens/ReserveTokens.tsx
index ff929aa9e..6523b7382 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/components/ReserveTokens/ReserveTokens.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/components/ReserveTokens/ReserveTokens.tsx
@@ -16,13 +16,13 @@ type ReserveTokensProps = {
   aTokenAddress: string;
   variableDebtTokenAddress: string;
   stableDebtTokenAddress: string;
-  onClick: (tokenAddress: string) => void;
+  onTokenClick: (tokenAddress: string) => void;
   className?: string;
 };
 
 export const ReserveTokens: FC<ReserveTokensProps> = ({
   symbol,
-  onClick,
+  onTokenClick,
   underlyingTokenAddress,
   aTokenAddress,
   variableDebtTokenAddress,
@@ -48,14 +48,14 @@ export const ReserveTokens: FC<ReserveTokensProps> = ({
         title={t(translations.aaveReserveOverviewPage.topPanel.underlyingToken)}
         label={symbol}
         logo={TokenLogo}
-        onClick={() => onClick(underlyingTokenAddress)}
+        onClick={() => onTokenClick(underlyingTokenAddress)}
       />
 
       <TokenButton
         title={t(translations.aaveReserveOverviewPage.topPanel.aToken)}
         label={`a${symbol}`}
         logo={TokenLogo}
-        onClick={() => onClick(aTokenAddress)}
+        onClick={() => onTokenClick(aTokenAddress)}
       />
 
       <TokenButton
@@ -67,7 +67,7 @@ export const ReserveTokens: FC<ReserveTokensProps> = ({
           { symbol },
         )}
         logo={TokenLogo}
-        onClick={() => onClick(variableDebtTokenAddress)}
+        onClick={() => onTokenClick(variableDebtTokenAddress)}
       />
 
       <TokenButton
@@ -77,7 +77,7 @@ export const ReserveTokens: FC<ReserveTokensProps> = ({
           { symbol },
         )}
         logo={TokenLogo}
-        onClick={() => onClick(stableDebtTokenAddress)}
+        onClick={() => onTokenClick(stableDebtTokenAddress)}
       />
     </div>
   );
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/components/ReserveTokens/components/TokenButton/TokenButton.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/components/ReserveTokens/components/TokenButton/TokenButton.tsx
index e25fa0012..b8c4f3758 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/components/ReserveTokens/components/TokenButton/TokenButton.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/components/ReserveTokens/components/TokenButton/TokenButton.tsx
@@ -25,6 +25,7 @@ export const TokenButton: FC<TokenButtonProps> = ({
       </Paragraph>
     </div>
     <button
+      type="button"
       onClick={onClick}
       className="flex items-center gap-3 px-4 py-3 w-full hover:bg-gray-20"
     >
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx
index 44d2e78de..ba9809f55 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx
@@ -45,7 +45,7 @@ export const SupplyAction: FC<SupplyActionProps> = ({
       <div className="space-y-2">
         <div className="flex items-center gap-1">
           <Paragraph size={ParagraphSize.small} className="text-gray-30">
-            {t(pageTranslations.yourWalletTab.availableToSupply)}{' '}
+            {t(pageTranslations.yourWalletTab.availableToSupply)}
           </Paragraph>
           <HelperButton
             content={t(pageTranslations.yourWalletTab.availableToSupplyInfo)}
diff --git a/apps/frontend/src/constants/aave.ts b/apps/frontend/src/constants/aave.ts
index 9b8e943e7..39de6363e 100644
--- a/apps/frontend/src/constants/aave.ts
+++ b/apps/frontend/src/constants/aave.ts
@@ -2,10 +2,12 @@ import { decimalic } from '../utils/math';
 
 export const config = {
   MinCollateralRatio: decimalic(1.5),
+  RepayAllETHSurplus: '1000000',
   PoolAddress: '0xFbdc7303cc2046Ff6c340F94F71aB01517b42476',
   WETHGatewayAddress: '0x50ff0B7a3e7af6F896CA81aF2E563814Eee7A3c0',
   UiPoolDataProviderV3Address: '0x5E7F300702D15d8B661aed2B67dc68f8e48B3b55',
   PoolAddressesProviderAddress: '0xc187B9083fF15B3Ae4eA56f8ab82DF52474B4E58',
   VariableDebtWETHAddress: '0x8bA8F81a5c2F406f3eD8FE18A94AecE3E27C2831',
   WETHAddress: '0x8CEc2719a2e896A11eA3f10406EfDb6Ad87281D9',
+  TreasuryAddress: '0x2a9d8f5b2f7b8f5b4b5d5e7f3b4b5d5b5d5d5d5d',
 };
diff --git a/apps/frontend/src/hooks/aave/constants.ts b/apps/frontend/src/hooks/aave/constants.ts
deleted file mode 100644
index 71536a314..000000000
--- a/apps/frontend/src/hooks/aave/constants.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const BIG_NUMBER_PRECISION_TWENTY_SEVEN = 27;
diff --git a/apps/frontend/src/hooks/aave/useAaveBorrow.tsx b/apps/frontend/src/hooks/aave/useAaveBorrow.tsx
index 2e85ae980..cba302881 100644
--- a/apps/frontend/src/hooks/aave/useAaveBorrow.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveBorrow.tsx
@@ -77,18 +77,24 @@ export const useAaveBorrow = () => {
       currentRateMode: BorrowRateMode,
       opts?: TransactionFactoryOptions,
     ) => {
-      if (!aaveBorrowTransactionsFactory) {
-        return;
-      }
+      try {
+        if (!aaveBorrowTransactionsFactory) {
+          throw new Error('Transactions factory not available');
+        }
+
+        const transactions =
+          await aaveBorrowTransactionsFactory.swapBorrowRateMode(
+            asset,
+            currentRateMode,
+            opts,
+          );
 
-      aaveBorrowTransactionsFactory
-        .swapBorrowRateMode(asset, currentRateMode, opts)
-        .then(transactions => {
-          setTransactions(transactions);
-          setTitle(t(translations.aavePage.tx.swapBorrowRateModeTitle));
-          setIsOpen(true);
-        })
-        .catch(notifyError);
+        setTransactions(transactions);
+        setTitle(t(translations.aavePage.tx.swapBorrowRateModeTitle));
+        setIsOpen(true);
+      } catch (e) {
+        notifyError(e);
+      }
     },
     [
       setIsOpen,
diff --git a/apps/frontend/src/hooks/aave/useAaveEModeCategories.tsx b/apps/frontend/src/hooks/aave/useAaveEModeCategories.tsx
index 392e4329a..853f846d4 100644
--- a/apps/frontend/src/hooks/aave/useAaveEModeCategories.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveEModeCategories.tsx
@@ -1,32 +1,29 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
+
+import { getProvider } from '@sovryn/ethers-provider';
+
+import { BOB_CHAIN_ID } from '../../config/chains';
 
 import { config } from '../../constants/aave';
 import { EModeCategory } from '../../types/aave';
 import { AaveEModeCategories } from '../../utils/aave/AaveEModeCategories';
-import { useAccount } from '../useAccount';
 import { useAaveReservesData } from './useAaveReservesData';
 
+const eModeCategoriesFetcher = new AaveEModeCategories(
+  config.PoolAddress,
+  getProvider(BOB_CHAIN_ID),
+);
+
 export const useAaveEModeCategories = (): EModeCategory[] => {
   const { reserves } = useAaveReservesData();
-  const { provider } = useAccount();
   const [categories, setCategories] = useState<EModeCategory[]>([]);
 
-  const eModeCategoriesFetcher = useMemo(
-    () =>
-      provider ? new AaveEModeCategories(config.PoolAddress, provider) : null,
-    [provider],
-  );
-
   useEffect(() => {
-    if (!eModeCategoriesFetcher) {
-      return;
-    }
-
     eModeCategoriesFetcher
       .getAllEModeCategories(reserves)
       .then(setCategories)
       .catch(console.error);
-  }, [eModeCategoriesFetcher, reserves]);
+  }, [reserves]);
 
   return categories;
 };
diff --git a/apps/frontend/src/hooks/aave/useAaveRates.tsx b/apps/frontend/src/hooks/aave/useAaveRates.tsx
index d339c08e6..b05069b49 100644
--- a/apps/frontend/src/hooks/aave/useAaveRates.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveRates.tsx
@@ -1,4 +1,6 @@
-import { useMemo, useState } from 'react';
+import { RAY_DECIMALS } from '@aave/math-utils';
+
+import { useEffect, useState } from 'react';
 
 import { BigNumber, Contract } from 'ethers';
 import { formatUnits } from 'ethers/lib/utils';
@@ -6,7 +8,6 @@ import { useSearchParams } from 'react-router-dom';
 
 import { useAccount } from '../useAccount';
 import rateStrategy from './ReserveStrategy-rateStrategyStableOne.json';
-import { BIG_NUMBER_PRECISION_TWENTY_SEVEN } from './constants';
 import { useAaveReservesData } from './useAaveReservesData';
 
 export interface IRatesDataResult {
@@ -18,7 +19,6 @@ export interface IRatesDataResult {
   variableRateSlope2: string;
   stableRateSlope1: string;
   stableRateSlope2: string;
-  //baseStableRateOffset: string;
   stableRateExcessOffset: string;
   optimalStableToTotalDebtRatio: string;
   underlyingAsset: string;
@@ -39,17 +39,16 @@ function calculateUtilizationRate(
 }
 
 export const useAaveInterestRatesData = (): {
-  data: IRatesDataResult | null;
+  rates: IRatesDataResult | null;
   error: string | null;
   loading: boolean;
 } => {
-  const [data, setData] = useState<any>(null);
+  const [rates, setRates] = useState<any>(null);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
 
   const { provider } = useAccount();
 
-  // const { provider } = useAccount();
   const [searchParams] = useSearchParams();
   const symbol = searchParams.get('asset') || '';
   const { reserves } = useAaveReservesData();
@@ -57,11 +56,8 @@ export const useAaveInterestRatesData = (): {
     r => r.symbol.toLocaleLowerCase() === symbol.toLocaleLowerCase(),
   );
   const interestRateStrategyAddress = reserveAsset?.interestRateStrategyAddress;
-  console.log('reserves', reserves);
-  console.log('reserveAsset', reserveAsset);
-  console.log('interestRateStrategyAddress', interestRateStrategyAddress);
 
-  useMemo(() => {
+  useEffect(() => {
     const fetchData = async () => {
       try {
         if (!interestRateStrategyAddress) {
@@ -94,56 +90,54 @@ export const useAaveInterestRatesData = (): {
           currentUsageRatio: formatUnits(utilizationRate, 2).toString(),
           optimalUsageRatio: formatUnits(
             reserveAsset.optimalUsageRatio,
-            BIG_NUMBER_PRECISION_TWENTY_SEVEN,
+            RAY_DECIMALS,
           ).toString(),
           baseVariableBorrowRate: formatUnits(
             reserveAsset.baseVariableBorrowRate,
-            BIG_NUMBER_PRECISION_TWENTY_SEVEN,
+            RAY_DECIMALS,
           ).toString(),
           variableRateSlope1: formatUnits(
             reserveAsset.variableRateSlope1,
-            BIG_NUMBER_PRECISION_TWENTY_SEVEN,
+            RAY_DECIMALS,
           ).toString(),
           variableRateSlope2: formatUnits(
             reserveAsset.variableRateSlope2,
-            BIG_NUMBER_PRECISION_TWENTY_SEVEN,
+            RAY_DECIMALS,
           ).toString(),
           stableRateSlope1: formatUnits(
             reserveAsset.stableRateSlope1,
-            BIG_NUMBER_PRECISION_TWENTY_SEVEN,
+            RAY_DECIMALS,
           ).toString(),
           stableRateSlope2: formatUnits(
             reserveAsset.stableRateSlope2,
-            BIG_NUMBER_PRECISION_TWENTY_SEVEN,
+            RAY_DECIMALS,
           ).toString(),
           baseStableBorrowRate: formatUnits(
             reserveAsset.baseStableBorrowRate,
-            BIG_NUMBER_PRECISION_TWENTY_SEVEN,
+            RAY_DECIMALS,
           ).toString(),
           stableRateExcessOffset: formatUnits(
             stableRateExcessOffset,
-            BIG_NUMBER_PRECISION_TWENTY_SEVEN,
+            RAY_DECIMALS,
           ).toString(),
           optimalStableToTotalDebtRatio: formatUnits(
             optimalStableToTotalDebtRatio,
-            BIG_NUMBER_PRECISION_TWENTY_SEVEN,
+            RAY_DECIMALS,
           ).toString(),
           underlyingAsset: reserveAsset.underlyingAsset.toString(),
           name: reserveAsset.name.toString(),
           symbol: reserveAsset.symbol.toString(),
           decimals: reserveAsset.decimals.toString(),
         };
-        setData(ratesData);
+        setRates(ratesData);
       } catch (error) {
         setError(error.message);
       } finally {
         setLoading(false);
       }
-
-      return data;
     };
     fetchData();
-  }, [data, interestRateStrategyAddress, provider, reserveAsset]);
+  }, [rates, interestRateStrategyAddress, provider, reserveAsset]);
 
-  return { data, loading, error };
+  return { rates, loading, error };
 };
diff --git a/apps/frontend/src/hooks/aave/useAaveReservesData.tsx b/apps/frontend/src/hooks/aave/useAaveReservesData.tsx
index b9155411c..164acc87a 100644
--- a/apps/frontend/src/hooks/aave/useAaveReservesData.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveReservesData.tsx
@@ -4,7 +4,7 @@ import {
 } from '@aave/contract-helpers';
 import { formatReserves, FormatReserveUSDResponse } from '@aave/math-utils';
 
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import dayjs from 'dayjs';
 
@@ -17,49 +17,42 @@ import { config } from '../../constants/aave';
 export type Reserve = ReserveDataHumanized & FormatReserveUSDResponse;
 export type ReserveData = { reserves: Reserve[]; loading: boolean };
 
+const uiPoolDataProvider = new UiPoolDataProvider({
+  provider: getProvider(BOB_CHAIN_ID),
+  uiPoolDataProviderAddress: config.UiPoolDataProviderV3Address,
+  chainId: Number(BOB_CHAIN_ID),
+});
+
 export const useAaveReservesData = (): ReserveData => {
   const [reserves, setReserves] = useState<Reserve[]>([]);
   const [loading, setLoading] = useState(false);
 
-  const uiPoolDataProvider = useMemo(
-    () =>
-      new UiPoolDataProvider({
-        provider: getProvider(BOB_CHAIN_ID),
-        uiPoolDataProviderAddress: config.UiPoolDataProviderV3Address,
-        chainId: Number(BOB_CHAIN_ID),
-      }),
-    [],
-  );
-
-  const fetchReservesData = useCallback(
-    async (uiPoolDataProvider: UiPoolDataProvider) => {
-      const currentTimestamp = dayjs().unix();
-      const reservesData = await uiPoolDataProvider.getReservesHumanized({
-        lendingPoolAddressProvider: config.PoolAddressesProviderAddress,
-      });
-      const formattedReserves = formatReserves({
-        reserves: reservesData.reservesData,
-        currentTimestamp,
-        marketReferenceCurrencyDecimals:
-          reservesData.baseCurrencyData.marketReferenceCurrencyDecimals,
-        marketReferencePriceInUsd:
-          reservesData.baseCurrencyData.marketReferenceCurrencyPriceInUsd,
-      });
-
-      setReserves(
-        // rename weth to eth. We don't expose WETH through ui.
-        formattedReserves.map(r =>
-          r.symbol === 'WETH' ? { ...r, symbol: 'ETH' } : r,
-        ),
-      );
-    },
-    [setReserves],
-  );
+  const fetchReservesData = useCallback(async () => {
+    const currentTimestamp = dayjs().unix();
+    const reservesData = await uiPoolDataProvider.getReservesHumanized({
+      lendingPoolAddressProvider: config.PoolAddressesProviderAddress,
+    });
+    const formattedReserves = formatReserves({
+      reserves: reservesData.reservesData,
+      currentTimestamp,
+      marketReferenceCurrencyDecimals:
+        reservesData.baseCurrencyData.marketReferenceCurrencyDecimals,
+      marketReferencePriceInUsd:
+        reservesData.baseCurrencyData.marketReferenceCurrencyPriceInUsd,
+    });
+
+    setReserves(
+      // rename weth to eth. We don't expose WETH through ui.
+      formattedReserves.map(r =>
+        r.symbol === 'WETH' ? { ...r, symbol: 'ETH' } : r,
+      ),
+    );
+  }, [setReserves]);
 
   useEffect(() => {
     setLoading(true);
-    fetchReservesData(uiPoolDataProvider).finally(() => setLoading(false));
-  }, [uiPoolDataProvider, fetchReservesData]);
+    fetchReservesData().finally(() => setLoading(false));
+  }, [fetchReservesData]);
 
   return { reserves, loading };
 };
diff --git a/apps/frontend/src/hooks/aave/useAaveSetUserEMode.tsx b/apps/frontend/src/hooks/aave/useAaveSetUserEMode.tsx
index eee1b8da0..42bc7ce2d 100644
--- a/apps/frontend/src/hooks/aave/useAaveSetUserEMode.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveSetUserEMode.tsx
@@ -53,18 +53,20 @@ export const useAaveSetUserEMode = () => {
 
   const handleDisableUserEMode = useCallback(
     async (opts?: TransactionFactoryOptions) => {
-      if (!aaveEModeTransactionsFactory) {
-        return;
-      }
+      try {
+        if (!aaveEModeTransactionsFactory) {
+          throw new Error('Transactions factory not available');
+        }
 
-      aaveEModeTransactionsFactory
-        .disableEMode(opts)
-        .then(txs => {
-          setTransactions(txs);
-          setTitle(t(translations.aavePage.tx.disableEModeTitle));
-          setIsOpen(true);
-        })
-        .catch(notifyError);
+        const transactions = await aaveEModeTransactionsFactory.disableEMode(
+          opts,
+        );
+        setTransactions(transactions);
+        setTitle(t(translations.aavePage.tx.disableEModeTitle));
+        setIsOpen(true);
+      } catch (e) {
+        notifyError(e);
+      }
     },
     [
       aaveEModeTransactionsFactory,
diff --git a/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx b/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx
index 80de09b8a..e1658dd85 100644
--- a/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx
@@ -3,7 +3,7 @@ import {
   UiPoolDataProvider,
 } from '@aave/contract-helpers';
 
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import dayjs from 'dayjs';
 
@@ -20,6 +20,12 @@ import {
 import { useAccount } from '../useAccount';
 import { useBlockNumber } from '../useBlockNumber';
 
+const uiPoolDataProvider = new UiPoolDataProvider({
+  provider: getProvider(BOB_CHAIN_ID),
+  uiPoolDataProviderAddress: config.UiPoolDataProviderV3Address,
+  chainId: Number(BOB_CHAIN_ID),
+});
+
 export const useAaveUserReservesData = (): {
   summary: AaveUserReservesSummary;
   reservesData: ReservesDataHumanized | undefined;
@@ -38,16 +44,6 @@ export const useAaveUserReservesData = (): {
   );
   const [loading, setLoading] = useState(false);
 
-  const uiPoolDataProvider = useMemo(
-    () =>
-      new UiPoolDataProvider({
-        provider: getProvider(BOB_CHAIN_ID),
-        uiPoolDataProviderAddress: config.UiPoolDataProviderV3Address,
-        chainId: Number(BOB_CHAIN_ID),
-      }),
-    [],
-  );
-
   const loadUserReservesData = useCallback(async () => {
     if (!account || !blockNumber) {
       return null;
@@ -82,7 +78,7 @@ export const useAaveUserReservesData = (): {
     } catch (e) {
       console.error(e);
     }
-  }, [account, uiPoolDataProvider, blockNumber]);
+  }, [account, blockNumber]);
 
   useEffect(() => {
     if (blockNumber !== processedBlock) {
diff --git a/apps/frontend/src/hooks/useAddTokenToWallet.tsx b/apps/frontend/src/hooks/useAddTokenToWallet.tsx
new file mode 100644
index 000000000..533a347b2
--- /dev/null
+++ b/apps/frontend/src/hooks/useAddTokenToWallet.tsx
@@ -0,0 +1,35 @@
+import { useCallback } from 'react';
+
+import { useNotifyError } from './useNotifyError';
+
+export const useAddTokenToWallet = (): {
+  addTokenToWallet: (tokenAddress: string, chainId: string) => void;
+} => {
+  const { notifyError } = useNotifyError();
+
+  const addTokenToWallet = useCallback(
+    (tokenAddress: string, chainId: string) => {
+      try {
+        if (!(window as any)?.ethereum) {
+          throw new Error('Wallet not available');
+        }
+
+        (window as any)?.ethereum.request({
+          method: 'wallet_watchAsset',
+          params: {
+            type: 'ERC20',
+            options: {
+              chainId,
+              address: tokenAddress,
+            },
+          },
+        });
+      } catch (error) {
+        notifyError(error);
+      }
+    },
+    [notifyError],
+  );
+
+  return { addTokenToWallet };
+};
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index 646b4d232..9c990d275 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -974,7 +974,6 @@
         "eModeDetails": {
             "title": "E-Mode details",
             "category": "E-Mode category",
-            "ethCorrelatedCategory": "ETH correlated",
             "maxLtv": "Max LTV",
             "maxLtvInfo": "The Maximum LTV ratio represents the maximum borrowing power of a specific collateral. For example, if a collateral has an LTV of 75%, the user can borrow up to 0.75 worth of ETH in the principal currency for every 1 ETH worth of collateral.",
             "liquidationThreshold": "Liquidation threshold",
@@ -994,6 +993,7 @@
             "liquidationPenaltyInfo": "When a liquidation occurs, liquidators repay up to 50% of the outstanding borrowed amount on behalf of the borrower. In return, they can buy the collateral at a discount and keep the difference (liquidation penalty) as a bonus.",
             "collateralUsage": "Collateral usage",
             "canBeCollateral": "Can be collateral",
+            "cannotBeCollateral": "Can't be collateral",
             "totalSupplied": "Total supplied",
             "totalSuppliedInfo": "Asset supply is limited to a certain amount to reduce protocol exposure to the asset and to help manage risks involved.",
             "of": "of",
diff --git a/apps/frontend/src/utils/aave/AaveEModeCategories.ts b/apps/frontend/src/utils/aave/AaveEModeCategories.ts
index 919d94801..d59123b44 100644
--- a/apps/frontend/src/utils/aave/AaveEModeCategories.ts
+++ b/apps/frontend/src/utils/aave/AaveEModeCategories.ts
@@ -95,9 +95,9 @@ export class AaveEModeCategories {
 
     return {
       id: categoryId,
-      ltv: Decimal.from(ltv),
-      liquidationThreshold: Decimal.from(liquidationThreshold),
-      liquidationBonus: Decimal.from(liquidationBonus),
+      ltv: Decimal.from(ltv).mul(100),
+      liquidationThreshold: Decimal.from(liquidationThreshold).mul(100),
+      liquidationBonus: Decimal.from(liquidationBonus).mul(100),
       label,
       assets,
     };
diff --git a/apps/frontend/src/utils/aave/AaveRepayTransactionsFactory.ts b/apps/frontend/src/utils/aave/AaveRepayTransactionsFactory.ts
index a81ae21d7..98c94269f 100644
--- a/apps/frontend/src/utils/aave/AaveRepayTransactionsFactory.ts
+++ b/apps/frontend/src/utils/aave/AaveRepayTransactionsFactory.ts
@@ -67,7 +67,7 @@ export class AaveRepayTransactionsFactory {
       spender: this.PoolAddress,
       token: asset.symbol,
       contract: new Contract(asset.address, asset.abi, this.signer),
-      amount: constants.MaxUint256,
+      amount: isEntireDebt ? constants.MaxUint256 : amount,
       chain: BOB_CHAIN_ID,
     });
     const transactions: Transaction[] = approval ? [approval] : [];
@@ -108,7 +108,7 @@ export class AaveRepayTransactionsFactory {
       constants.AddressZero,
       BOB_CHAIN_ID,
     );
-    amount = isEntireDebt ? amount.add('1000000') : amount;
+    amount = isEntireDebt ? amount.add(config.RepayAllETHSurplus) : amount;
 
     return [
       {
diff --git a/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts b/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
index eb7444296..a3870f25a 100644
--- a/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
+++ b/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
@@ -209,6 +209,12 @@ export class AaveUserReservesSummaryFactory {
           const availableLiquidity = Decimal.from(
             formatUnits(r.reserve.availableLiquidity, r.reserve.decimals),
           );
+          const availableToBorrow = availableLiquidity.lt(canBorrow)
+            ? availableLiquidity
+            : canBorrow;
+          const availableToBorrowUSD = availableToBorrow.mul(
+            r.reserve.priceInUSD,
+          );
 
           return {
             asset: symbol,
@@ -222,9 +228,8 @@ export class AaveUserReservesSummaryFactory {
             suppliedUSD: Decimal.from(r.underlyingBalanceUSD),
             borrowed: Decimal.from(r.totalBorrows),
             borrowedUSD: Decimal.from(r.totalBorrowsUSD),
-            availableToBorrow: availableLiquidity.lt(canBorrow)
-              ? availableLiquidity
-              : canBorrow,
+            availableToBorrow,
+            availableToBorrowUSD,
 
             borrowRateMode: Decimal.from(r.variableBorrows).gt(0)
               ? BorrowRateMode.VARIABLE
diff --git a/apps/frontend/src/utils/aave/AaveWithdrawTransactionsFactory.ts b/apps/frontend/src/utils/aave/AaveWithdrawTransactionsFactory.ts
index f599ff522..dfbab462a 100644
--- a/apps/frontend/src/utils/aave/AaveWithdrawTransactionsFactory.ts
+++ b/apps/frontend/src/utils/aave/AaveWithdrawTransactionsFactory.ts
@@ -91,7 +91,7 @@ export class AaveWithdrawTransactionsFactory {
       spender: this.WETHGatewayAddress,
       token: aWETH.symbol,
       contract: new Contract(aWETH.address, aWETH.abi, this.signer),
-      amount: constants.MaxUint256,
+      amount: isMaxAmount ? constants.MaxUint256 : amount,
       chain: BOB_CHAIN_ID,
     });
     const transactions: Transaction[] = approval ? [approval] : [];
diff --git a/apps/frontend/src/utils/math.ts b/apps/frontend/src/utils/math.ts
index 1f5f42d1d..2874d6e28 100644
--- a/apps/frontend/src/utils/math.ts
+++ b/apps/frontend/src/utils/math.ts
@@ -5,14 +5,24 @@ import { formatUnits, parseUnits } from 'ethers/lib/utils';
 
 import { Decimal, Decimalish } from '@sovryn/utils';
 
+export const RAY_DECIMALS = 27;
 const DEFAULT_UNIT = 18;
 const DEFAULT_DECIMALS = 6;
 
+const THOUSAND = 1e3;
+const MILLION = 1e6;
+const BILLION = 1e9;
+
 const DEFAULT_DECIMALS_SEPARATOR = '.';
 const DEFAULT_THOUSANDS_SEPARATOR = ',';
 
 const unitNames = ['wei', 'kwei', 'mwei', 'gwei', 'szabo', 'finney', 'ether'];
 
+export interface FormattedAmount {
+  value: string;
+  suffix: string;
+}
+
 // helper function to convert any type of ethers value to wei.
 export const toWei = (
   value: BigNumberish,
@@ -160,3 +170,16 @@ export const bigNumberic = (
 
 export const isScientificNumber = (value: number) =>
   String(value).search(/e[-+]?/) > 0;
+
+export const formatAmountWithSuffix = (_value: Decimalish): FormattedAmount => {
+  const value = Decimal.from(_value);
+  if (value.gte(BILLION)) {
+    return { value: value.div(BILLION).toString(1), suffix: 'B' };
+  } else if (value.gte(MILLION)) {
+    return { value: value.div(MILLION).toString(1), suffix: 'M' };
+  } else if (value.gte(THOUSAND)) {
+    return { value: value.div(THOUSAND).toString(1), suffix: 'K' };
+  } else {
+    return { value: value.toString(), suffix: '' };
+  }
+};

From fe0ed742f9deb2332f5d8c948ef035be56c7c75e Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Fri, 6 Sep 2024 16:00:38 +0300
Subject: [PATCH 079/116] fixes

---
 .../components/BorrowModal/BorrowModalContainer.tsx           | 4 +++-
 .../components/WithdrawModal/WithdrawModalContainer.tsx       | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowModalContainer.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowModalContainer.tsx
index 5927b58df..e169e6b0f 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowModalContainer.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowModalContainer.tsx
@@ -8,11 +8,13 @@ import { translations } from '../../../../../../../locales/i18n';
 import { BorrowForm } from './BorrowForm';
 
 type BorrowModalContainerProps = {
+  asset: string;
   isOpen: boolean;
   handleCloseModal: () => void;
 };
 
 export const BorrowModalContainer: FC<BorrowModalContainerProps> = ({
+  asset,
   isOpen,
   handleCloseModal,
 }) => (
@@ -22,7 +24,7 @@ export const BorrowModalContainer: FC<BorrowModalContainerProps> = ({
       onClose={handleCloseModal}
     />
     <DialogBody className="flex flex-col gap-6">
-      <BorrowForm onSuccess={handleCloseModal} />
+      <BorrowForm asset={asset} onComplete={handleCloseModal} />
     </DialogBody>
   </Dialog>
 );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx
index 33000377a..dfa71b48a 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx
@@ -8,11 +8,13 @@ import { translations } from '../../../../../../../locales/i18n';
 import { WithdrawForm } from './WithdrawForm';
 
 type WithdrawModalContainerProps = {
+  asset: string;
   isOpen: boolean;
   handleCloseModal: () => void;
 };
 
 export const WithdrawModalContainer: FC<WithdrawModalContainerProps> = ({
+  asset,
   isOpen,
   handleCloseModal,
 }) => (
@@ -22,7 +24,7 @@ export const WithdrawModalContainer: FC<WithdrawModalContainerProps> = ({
       onClose={handleCloseModal}
     />
     <DialogBody className="flex flex-col gap-6">
-      <WithdrawForm onSuccess={handleCloseModal} />
+      <WithdrawForm asset={asset} onComplete={handleCloseModal} />
     </DialogBody>
   </Dialog>
 );

From 5870b39bc05924875da7b2b8e86e26bb77e522de Mon Sep 17 00:00:00 2001
From: Luciano Perez Cerra <perezcerraluciano@gmail.com>
Date: Fri, 6 Sep 2024 11:11:59 -0300
Subject: [PATCH 080/116] Saf 20/charts integration (exclude supply and borrow
 by now) (#46)

* [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
---
 .../AaveReserveOverviewPage.tsx               |   4 +-
 .../BorrowDetailsGraph/BorrowDetailsGraph.tsx |  82 ++-
 .../components/Chart/Chart.tsx                |  17 +-
 .../components/Chart/Chart.types.ts           |   7 +-
 .../InterestRateModelGraph.tsx                |  96 ++--
 .../components/Chart/Chart.tsx                |  15 +-
 .../SupplyDetailsGraph/SupplyDetailsGraph.tsx |  85 +--
 .../components/Chart/Chart.constants.ts       |  50 --
 .../components/Chart/Chart.tsx                |  15 +-
 .../components/Chart/Chart.types.ts           |   7 +-
 .../components/TopPanel/TopPanel.tsx          |  37 +-
 apps/frontend/src/constants/aave.ts           |   4 +-
 ...ReserveStrategy-rateStrategyStableOne.json | 505 ------------------
 apps/frontend/src/hooks/aave/constants.ts     |   2 +
 apps/frontend/src/hooks/aave/useAaveRates.tsx | 375 +++++++++----
 .../src/hooks/aave/useReservesHistory.tsx     | 173 ++++++
 apps/frontend/src/hooks/aave/utils.ts         |  22 +
 .../src/utils/aave/AaveUserReservesSummary.ts |  14 +-
 apps/frontend/src/utils/math.ts               |  27 +-
 19 files changed, 698 insertions(+), 839 deletions(-)
 delete mode 100644 apps/frontend/src/hooks/aave/ReserveStrategy-rateStrategyStableOne.json
 create mode 100644 apps/frontend/src/hooks/aave/constants.ts
 create mode 100644 apps/frontend/src/hooks/aave/useReservesHistory.tsx
 create mode 100644 apps/frontend/src/hooks/aave/utils.ts

diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
index cc69a4756..f6ae1dc64 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
+++ b/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} />
 
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
index a689572f4..736e438f1 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
+++ b/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,20 +140,20 @@ 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)}
                   />
                 }
               />
@@ -135,7 +161,7 @@ export const BorrowDetailsGraph: FC<BorrowDetailsGraphProps> = ({
           </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)}
                 />
               }
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx
index 90fd79cc8..bf051e141 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx
+++ b/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>) => {
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.types.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.types.ts
index 95e2c0bf1..32de155a8 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.types.ts
+++ b/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[];
 };
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
index c6acc0f1e..0405ce4a0 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
+++ b/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>
   );
 };
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
index 3ebca6814..7b1fee072 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
@@ -5,7 +5,7 @@ import 'chartjs-adapter-date-fns';
 
 import { theme } from '@sovryn/tailwindcss-config';
 
-import { IRatesDataResult } from '../../../../../../../hooks/aave/useAaveRates';
+import { RatesDataResult } from '../../../../../../../hooks/aave/useAaveRates';
 import {
   CUSTOM_CANVAS_BACKGROUND_COLOR,
   GRID_COLOR,
@@ -18,7 +18,7 @@ type ChartProps = {
     label: string;
     lineColor: string;
   };
-  rates: IRatesDataResult;
+  rates: RatesDataResult;
 };
 
 const calcInterestRateModel = (
@@ -35,7 +35,7 @@ const calcInterestRateModel = (
   return base + slope1 + ((u - optimal) / (1 - optimal)) * slope2;
 };
 
-const calcVariableInterestRateModel = (u: number, rates: IRatesDataResult) => {
+const calcVariableInterestRateModel = (u: number, rates: RatesDataResult) => {
   const base = parseFloat(rates.baseVariableBorrowRate);
   const optimal = parseFloat(rates.optimalUsageRatio);
   const slope1 = parseFloat(rates.variableRateSlope1);
@@ -58,8 +58,12 @@ export const Chart: FC<ChartProps> = ({ meta, rates }) => {
     [rates],
   );
 
-  const optimalPercentage = parseFloat(rates.optimalUsageRatio) * 100;
-  const currentPercentage = parseFloat(rates.currentUsageRatio) * 100;
+  const optimalPercentage = parseFloat(
+    (parseFloat(rates.optimalUsageRatio) * 100).toFixed(2),
+  );
+  const currentPercentage = parseFloat(
+    (parseFloat(rates.currentUsageRatio) * 100).toFixed(2),
+  );
 
   const optimalValue = useMemo(() => {
     return [
@@ -132,6 +136,7 @@ export const Chart: FC<ChartProps> = ({ meta, rates }) => {
               callback: function (value) {
                 return value + '%';
               },
+              //maxTicksLimit: 5,
             },
           },
           y: {
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
index 8dd6287f4..3e1ae6e76 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
@@ -5,44 +5,67 @@ import { t } from 'i18next';
 
 import { theme } from '@sovryn/tailwindcss-config';
 import { Accordion, Icon, IconNames, Paragraph } from '@sovryn/ui';
+import { Decimal } from '@sovryn/utils';
 
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
 import { Reserve } from '../../../../../hooks/aave/useAaveReservesData';
+import { FormattedReserveHistoryItem } from '../../../../../hooks/aave/useReservesHistory';
 import { useIsMobile } from '../../../../../hooks/useIsMobile';
 import { translations } from '../../../../../locales/i18n';
 import { formatAmountWithSuffix } from '../../../../../utils/math';
-import { normalizeSupplyStats } from './SupplyDetailsGraph.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.supplyDetails;
 
-export type SupplyDetailsGraphProps = {
+type SupplyDetailsGraphProps = {
+  history: FormattedReserveHistoryItem[];
   reserve: Reserve;
 };
 
 export const SupplyDetailsGraph: FC<SupplyDetailsGraphProps> = ({
+  history,
   reserve,
 }) => {
   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.liquidityRate * 100 }));
     return {
-      data1,
-      label1: t(pageTranslations.chart.label1),
+      data,
+      label: t(pageTranslations.chart.label1),
       lineColor: theme.colors['primary-30'],
-      xLabels: data1.map(item => item.x),
     };
-  }, []);
+  }, [history]);
+
+  const totalSupplied = useMemo(() => {
+    return Decimal.from(reserve.availableLiquidity).add(reserve.totalDebt);
+  }, [reserve]);
+
+  const totalSuppliedUSD = useMemo(() => {
+    return Decimal.from(reserve.availableLiquidityUSD).add(
+      reserve.totalDebtUSD,
+    );
+  }, [reserve]);
+
+  const supplyCap = useMemo(() => {
+    return Decimal.from(reserve.supplyCap);
+  }, [reserve]);
+
+  const supplyCapUSD = useMemo(() => {
+    return Decimal.from(reserve.supplyCapUSD);
+  }, [reserve]);
+
+  const suppliedPercentage = useMemo(() => {
+    return Decimal.from(totalSuppliedUSD)
+      .div(Decimal.from(reserve.supplyCapUSD))
+      .mul(100)
+      .toString(0);
+  }, [reserve, totalSuppliedUSD]);
 
-  const supplyStats = useMemo(() => {
-    return normalizeSupplyStats(reserve);
+  const maxLTV = useMemo(() => {
+    return Decimal.from(reserve.baseLTVasCollateral).div(100);
   }, [reserve]);
 
   return (
@@ -69,14 +92,14 @@ export const SupplyDetailsGraph: FC<SupplyDetailsGraphProps> = ({
                 <div className="space-x-1 font-medium text-base">
                   <AmountRenderer
                     precision={2}
-                    {...formatAmountWithSuffix(supplyStats.totalSupplied)}
+                    {...formatAmountWithSuffix(totalSupplied)}
                   />
-                  {supplyStats.supplyCap.gt(0) && (
+                  {supplyCap.gt(0) && (
                     <>
                       <span>{t(pageTranslations.of)}</span>
                       <AmountRenderer
                         precision={2}
-                        {...formatAmountWithSuffix(supplyStats.supplyCap)}
+                        {...formatAmountWithSuffix(supplyCap)}
                       />
                     </>
                   )}
@@ -86,27 +109,25 @@ export const SupplyDetailsGraph: FC<SupplyDetailsGraphProps> = ({
                   <AmountRenderer
                     prefix="$"
                     precision={2}
-                    {...formatAmountWithSuffix(supplyStats.totalSuppliedUSD)}
+                    {...formatAmountWithSuffix(totalSuppliedUSD)}
                   />
-                  {supplyStats.supplyCap.gt(0) && (
+                  {supplyCap.gt(0) && (
                     <>
                       <span>{t(pageTranslations.of)}</span>
                       <AmountRenderer
                         prefix="$"
                         precision={2}
-                        {...formatAmountWithSuffix(supplyStats.supplyCapUSD)}
+                        {...formatAmountWithSuffix(supplyCapUSD)}
                       />
                     </>
                   )}
                 </div>
 
                 {/* Progress bar */}
-                {supplyStats.supplyCap.gt(0) && (
+                {supplyCap.gt(0) && (
                   <div className="mt-2 h-[3px] w-[160px] bg-gray-70 rounded-full">
                     <div
-                      className={`h-full bg-primary-30 w-[${supplyStats.suppliedPercentage.toString(
-                        0,
-                      )}%]`}
+                      className={`h-full bg-primary-30 w-[${suppliedPercentage}%]`}
                     ></div>
                   </div>
                 )}
@@ -117,7 +138,7 @@ export const SupplyDetailsGraph: FC<SupplyDetailsGraphProps> = ({
             label={t(pageTranslations.apy)}
             value={
               <AmountRenderer
-                value={supplyStats.supplyApy}
+                value={reserve.supplyAPY}
                 suffix="%"
                 precision={2}
               />
@@ -125,7 +146,7 @@ export const SupplyDetailsGraph: FC<SupplyDetailsGraphProps> = ({
           />
         </div>
 
-        <Chart mockData={mockData} yLabel1="" />
+        <Chart input={inputData} />
 
         <div className="space-y-6">
           {/* collateral usage */}
@@ -162,13 +183,7 @@ export const SupplyDetailsGraph: FC<SupplyDetailsGraphProps> = ({
             <StatisticsCard
               label={t(pageTranslations.maxLtv)}
               help={t(pageTranslations.maxLtvInfo)}
-              value={
-                <AmountRenderer
-                  value={supplyStats.maxLTV}
-                  suffix="%"
-                  precision={2}
-                />
-              }
+              value={<AmountRenderer value={maxLTV} suffix="%" precision={2} />}
             />
 
             {/* liquidation threshold */}
@@ -177,7 +192,7 @@ export const SupplyDetailsGraph: FC<SupplyDetailsGraphProps> = ({
               help={t(pageTranslations.liquidationThresholdInfo)}
               value={
                 <AmountRenderer
-                  value={supplyStats.liquidationThreshold}
+                  value={reserve.reserveLiquidationThreshold}
                   suffix="%"
                   precision={2}
                 />
@@ -190,7 +205,7 @@ export const SupplyDetailsGraph: FC<SupplyDetailsGraphProps> = ({
               help={t(pageTranslations.liquidationPenaltyInfo)}
               value={
                 <AmountRenderer
-                  value={supplyStats.liquidationPenalty}
+                  value={reserve.reserveLiquidationBonus}
                   suffix="%"
                   precision={2}
                 />
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.constants.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.constants.ts
index 5a615f6bb..a172974f3 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.constants.ts
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.constants.ts
@@ -21,53 +21,3 @@ export const CUSTOM_CANVAS_BACKGROUND_COLOR = {
     ctx.restore();
   },
 };
-
-export const harcodedData = [
-  { x: '2023-06-15T00:00:00Z', y: 2.5 },
-  { x: '2023-06-16T00:00:00Z', y: 2.6 },
-  { x: '2023-06-17T00:00:00Z', y: 2.7 },
-  { x: '2023-06-18T00:00:00Z', y: 2.7 },
-  { x: '2023-06-19T00:00:00Z', y: 2.8 },
-  { x: '2023-06-20T00:00:00Z', y: 2.9 },
-  { x: '2023-06-21T00:00:00Z', y: 3.0 },
-  { x: '2023-06-22T00:00:00Z', y: 3.0 },
-  { x: '2023-06-23T00:00:00Z', y: 3.1 },
-  { x: '2023-06-24T00:00:00Z', y: 3.1 },
-  { x: '2023-06-25T00:00:00Z', y: 3.2 },
-  { x: '2023-06-26T00:00:00Z', y: 3.3 },
-  { x: '2023-06-27T00:00:00Z', y: 3.4 },
-  { x: '2023-06-28T00:00:00Z', y: 3.5 },
-  { x: '2023-06-29T00:00:00Z', y: 3.7 },
-  { x: '2023-06-30T00:00:00Z', y: 4.0 },
-  { x: '2023-07-01T00:00:00Z', y: 4.2 },
-  { x: '2023-07-02T00:00:00Z', y: 4.0 },
-  { x: '2023-07-03T00:00:00Z', y: 3.9 },
-  { x: '2023-07-04T00:00:00Z', y: 3.8 },
-  { x: '2023-07-05T00:00:00Z', y: 3.8 },
-  { x: '2023-07-06T00:00:00Z', y: 3.7 },
-  { x: '2023-07-07T00:00:00Z', y: 3.7 },
-  { x: '2023-07-08T00:00:00Z', y: 3.6 },
-  { x: '2023-07-09T00:00:00Z', y: 3.6 },
-  { x: '2023-07-10T00:00:00Z', y: 3.5 },
-  { x: '2023-07-11T00:00:00Z', y: 3.5 },
-  { x: '2023-07-12T00:00:00Z', y: 3.5 },
-  { x: '2023-07-13T00:00:00Z', y: 3.4 },
-  { x: '2023-07-14T00:00:00Z', y: 3.4 },
-  { x: '2023-07-15T00:00:00Z', y: 3.3 },
-  { x: '2023-07-16T00:00:00Z', y: 3.3 },
-  { x: '2023-07-17T00:00:00Z', y: 3.3 },
-  { x: '2023-07-18T00:00:00Z', y: 3.3 },
-  { x: '2023-07-19T00:00:00Z', y: 3.3 },
-  { x: '2023-07-20T00:00:00Z', y: 3.2 },
-  { x: '2023-07-21T00:00:00Z', y: 3.2 },
-  { x: '2023-07-22T00:00:00Z', y: 3.2 },
-  { x: '2023-07-23T00:00:00Z', y: 3.2 },
-  { x: '2023-07-24T00:00:00Z', y: 3.2 },
-  { x: '2023-07-25T00:00:00Z', y: 3.2 },
-  { x: '2023-07-26T00:00:00Z', y: 3.1 },
-  { x: '2023-07-27T00:00:00Z', y: 3.1 },
-  { x: '2023-07-28T00:00:00Z', y: 3.1 },
-  { x: '2023-07-29T00:00:00Z', y: 3.1 },
-  { x: '2023-07-30T00:00:00Z', y: 3.1 },
-  { x: '2023-07-31T00:00:00Z', y: 3.1 },
-];
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.tsx
index 279d2e8b4..95525e619 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/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<{ x: number; y: number }>;
 };
 
-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,
+            label: input.label,
+            data: input.data,
             backgroundColor: 'rgba(245, 140, 49, 1)',
-            borderColor: mockData.lineColor,
+            borderColor: input.lineColor,
             borderWidth: 2,
             fill: false,
             pointRadius: 0,
@@ -103,7 +102,7 @@ export const Chart: FC<ChartProps> = ({ mockData }) => {
         chartRef.current.destroy();
       }
     };
-  }, [mockData]);
+  }, [input]);
 
   const stopPropagation = useCallback(
     (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.types.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.types.ts
index 95e2c0bf1..32de155a8 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.types.ts
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/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[];
 };
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
index 041a8d0bb..82bdf38bf 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
@@ -22,7 +22,7 @@ import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRen
 import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
 import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
 import { Reserve } from '../../../../../hooks/aave/useAaveReservesData';
-import { useAddTokenToWallet } from '../../../../../hooks/useAddTokenToWallet';
+import { useNotifyError } from '../../../../../hooks/useNotifyError';
 import { translations } from '../../../../../locales/i18n';
 import { getBobExplorerUrl } from '../../../../../utils/helpers';
 import { formatAmountWithSuffix } from '../../../../../utils/math';
@@ -50,13 +50,37 @@ type TopPanelProps = {
 };
 
 export const TopPanel: FC<TopPanelProps> = ({ reserve, className }) => {
-  const { addTokenToWallet } = useAddTokenToWallet();
+  const { notifyError } = useNotifyError();
 
   const openInExplorer = useCallback((tokenAddress: string) => {
     const explorer = getBobExplorerUrl();
     window.open(`${explorer}/address/${tokenAddress}`, '_blank');
   }, []);
 
+  const addToWallet = useCallback(
+    (token: string) => {
+      try {
+        if (!(window as any)?.ethereum) {
+          throw new Error('Wallet not available');
+        }
+
+        (window as any)?.ethereum.request({
+          method: 'wallet_watchAsset',
+          params: {
+            type: 'ERC20',
+            options: {
+              chainId: BOB_CHAIN_ID,
+              address: token,
+            },
+          },
+        });
+      } catch (error) {
+        notifyError(error);
+      }
+    },
+    [notifyError],
+  );
+
   const oracleLink = useMemo(() => {
     return getBobExplorerUrl() + '/address/' + reserve.priceOracle;
   }, [reserve.priceOracle]);
@@ -67,11 +91,6 @@ export const TopPanel: FC<TopPanelProps> = ({ reserve, className }) => {
     );
   }, [reserve]);
 
-  const onTokenClick = useCallback(
-    (tokenAddress: string) => addTokenToWallet(tokenAddress, BOB_CHAIN_ID),
-    [addTokenToWallet],
-  );
-
   return (
     <div className={classNames('w-full flex flex-col gap-6', className)}>
       <div className="text-center py-6 px-10 space-y-3 lg:hidden">
@@ -138,7 +157,7 @@ export const TopPanel: FC<TopPanelProps> = ({ reserve, className }) => {
                   underlyingTokenAddress={reserve.underlyingAsset}
                   variableDebtTokenAddress={reserve.variableDebtTokenAddress}
                   stableDebtTokenAddress={reserve.stableDebtTokenAddress}
-                  onTokenClick={onTokenClick}
+                  onTokenClick={addToWallet}
                 />
               }
             >
@@ -169,7 +188,7 @@ export const TopPanel: FC<TopPanelProps> = ({ reserve, className }) => {
             <AmountRenderer
               prefix="$"
               className="text-2xl"
-              {...formatAmountWithSuffix(reserve.formattedAvailableLiquidity)}
+              {...formatAmountWithSuffix(reserve.availableLiquidity)}
             />
           }
         />
diff --git a/apps/frontend/src/constants/aave.ts b/apps/frontend/src/constants/aave.ts
index 39de6363e..c31379541 100644
--- a/apps/frontend/src/constants/aave.ts
+++ b/apps/frontend/src/constants/aave.ts
@@ -2,7 +2,6 @@ import { decimalic } from '../utils/math';
 
 export const config = {
   MinCollateralRatio: decimalic(1.5),
-  RepayAllETHSurplus: '1000000',
   PoolAddress: '0xFbdc7303cc2046Ff6c340F94F71aB01517b42476',
   WETHGatewayAddress: '0x50ff0B7a3e7af6F896CA81aF2E563814Eee7A3c0',
   UiPoolDataProviderV3Address: '0x5E7F300702D15d8B661aed2B67dc68f8e48B3b55',
@@ -10,4 +9,7 @@ export const config = {
   VariableDebtWETHAddress: '0x8bA8F81a5c2F406f3eD8FE18A94AecE3E27C2831',
   WETHAddress: '0x8CEc2719a2e896A11eA3f10406EfDb6Ad87281D9',
   TreasuryAddress: '0x2a9d8f5b2f7b8f5b4b5d5e7f3b4b5d5b5d5d5d5d',
+  InterestRateStrategyAddress: '0x847A3364Cc5fE389283bD821cfC8A477288D9e82',
+  RepayAllETHSurplus: '1000000',
+  ratesHistoryApiUrl: process.env.REACT_APP_AAVE_API_URI,
 };
diff --git a/apps/frontend/src/hooks/aave/ReserveStrategy-rateStrategyStableOne.json b/apps/frontend/src/hooks/aave/ReserveStrategy-rateStrategyStableOne.json
deleted file mode 100644
index 16e065227..000000000
--- a/apps/frontend/src/hooks/aave/ReserveStrategy-rateStrategyStableOne.json
+++ /dev/null
@@ -1,505 +0,0 @@
-{
-  "address": "0x94b5304ec379Dc28f664c8762182d1d12d2ce4A1",
-  "abi": [
-    {
-      "inputs": [
-        {
-          "internalType": "contract IPoolAddressesProvider",
-          "name": "provider",
-          "type": "address"
-        },
-        {
-          "internalType": "uint256",
-          "name": "optimalUsageRatio",
-          "type": "uint256"
-        },
-        {
-          "internalType": "uint256",
-          "name": "baseVariableBorrowRate",
-          "type": "uint256"
-        },
-        {
-          "internalType": "uint256",
-          "name": "variableRateSlope1",
-          "type": "uint256"
-        },
-        {
-          "internalType": "uint256",
-          "name": "variableRateSlope2",
-          "type": "uint256"
-        },
-        {
-          "internalType": "uint256",
-          "name": "stableRateSlope1",
-          "type": "uint256"
-        },
-        {
-          "internalType": "uint256",
-          "name": "stableRateSlope2",
-          "type": "uint256"
-        },
-        {
-          "internalType": "uint256",
-          "name": "baseStableRateOffset",
-          "type": "uint256"
-        },
-        {
-          "internalType": "uint256",
-          "name": "stableRateExcessOffset",
-          "type": "uint256"
-        },
-        {
-          "internalType": "uint256",
-          "name": "optimalStableToTotalDebtRatio",
-          "type": "uint256"
-        }
-      ],
-      "stateMutability": "nonpayable",
-      "type": "constructor"
-    },
-    {
-      "inputs": [],
-      "name": "ADDRESSES_PROVIDER",
-      "outputs": [
-        {
-          "internalType": "contract IPoolAddressesProvider",
-          "name": "",
-          "type": "address"
-        }
-      ],
-      "stateMutability": "view",
-      "type": "function"
-    },
-    {
-      "inputs": [],
-      "name": "MAX_EXCESS_STABLE_TO_TOTAL_DEBT_RATIO",
-      "outputs": [
-        {
-          "internalType": "uint256",
-          "name": "",
-          "type": "uint256"
-        }
-      ],
-      "stateMutability": "view",
-      "type": "function"
-    },
-    {
-      "inputs": [],
-      "name": "MAX_EXCESS_USAGE_RATIO",
-      "outputs": [
-        {
-          "internalType": "uint256",
-          "name": "",
-          "type": "uint256"
-        }
-      ],
-      "stateMutability": "view",
-      "type": "function"
-    },
-    {
-      "inputs": [],
-      "name": "OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO",
-      "outputs": [
-        {
-          "internalType": "uint256",
-          "name": "",
-          "type": "uint256"
-        }
-      ],
-      "stateMutability": "view",
-      "type": "function"
-    },
-    {
-      "inputs": [],
-      "name": "OPTIMAL_USAGE_RATIO",
-      "outputs": [
-        {
-          "internalType": "uint256",
-          "name": "",
-          "type": "uint256"
-        }
-      ],
-      "stateMutability": "view",
-      "type": "function"
-    },
-    {
-      "inputs": [
-        {
-          "components": [
-            {
-              "internalType": "uint256",
-              "name": "unbacked",
-              "type": "uint256"
-            },
-            {
-              "internalType": "uint256",
-              "name": "liquidityAdded",
-              "type": "uint256"
-            },
-            {
-              "internalType": "uint256",
-              "name": "liquidityTaken",
-              "type": "uint256"
-            },
-            {
-              "internalType": "uint256",
-              "name": "totalStableDebt",
-              "type": "uint256"
-            },
-            {
-              "internalType": "uint256",
-              "name": "totalVariableDebt",
-              "type": "uint256"
-            },
-            {
-              "internalType": "uint256",
-              "name": "averageStableBorrowRate",
-              "type": "uint256"
-            },
-            {
-              "internalType": "uint256",
-              "name": "reserveFactor",
-              "type": "uint256"
-            },
-            {
-              "internalType": "address",
-              "name": "reserve",
-              "type": "address"
-            },
-            {
-              "internalType": "address",
-              "name": "aToken",
-              "type": "address"
-            }
-          ],
-          "internalType": "struct DataTypes.CalculateInterestRatesParams",
-          "name": "params",
-          "type": "tuple"
-        }
-      ],
-      "name": "calculateInterestRates",
-      "outputs": [
-        {
-          "internalType": "uint256",
-          "name": "",
-          "type": "uint256"
-        },
-        {
-          "internalType": "uint256",
-          "name": "",
-          "type": "uint256"
-        },
-        {
-          "internalType": "uint256",
-          "name": "",
-          "type": "uint256"
-        }
-      ],
-      "stateMutability": "view",
-      "type": "function"
-    },
-    {
-      "inputs": [],
-      "name": "getBaseStableBorrowRate",
-      "outputs": [
-        {
-          "internalType": "uint256",
-          "name": "",
-          "type": "uint256"
-        }
-      ],
-      "stateMutability": "view",
-      "type": "function"
-    },
-    {
-      "inputs": [],
-      "name": "getBaseVariableBorrowRate",
-      "outputs": [
-        {
-          "internalType": "uint256",
-          "name": "",
-          "type": "uint256"
-        }
-      ],
-      "stateMutability": "view",
-      "type": "function"
-    },
-    {
-      "inputs": [],
-      "name": "getMaxVariableBorrowRate",
-      "outputs": [
-        {
-          "internalType": "uint256",
-          "name": "",
-          "type": "uint256"
-        }
-      ],
-      "stateMutability": "view",
-      "type": "function"
-    },
-    {
-      "inputs": [],
-      "name": "getStableRateExcessOffset",
-      "outputs": [
-        {
-          "internalType": "uint256",
-          "name": "",
-          "type": "uint256"
-        }
-      ],
-      "stateMutability": "view",
-      "type": "function"
-    },
-    {
-      "inputs": [],
-      "name": "getStableRateSlope1",
-      "outputs": [
-        {
-          "internalType": "uint256",
-          "name": "",
-          "type": "uint256"
-        }
-      ],
-      "stateMutability": "view",
-      "type": "function"
-    },
-    {
-      "inputs": [],
-      "name": "getStableRateSlope2",
-      "outputs": [
-        {
-          "internalType": "uint256",
-          "name": "",
-          "type": "uint256"
-        }
-      ],
-      "stateMutability": "view",
-      "type": "function"
-    },
-    {
-      "inputs": [],
-      "name": "getVariableRateSlope1",
-      "outputs": [
-        {
-          "internalType": "uint256",
-          "name": "",
-          "type": "uint256"
-        }
-      ],
-      "stateMutability": "view",
-      "type": "function"
-    },
-    {
-      "inputs": [],
-      "name": "getVariableRateSlope2",
-      "outputs": [
-        {
-          "internalType": "uint256",
-          "name": "",
-          "type": "uint256"
-        }
-      ],
-      "stateMutability": "view",
-      "type": "function"
-    }
-  ],
-  "transactionHash": "0x8232b5ee9f78a2d8f2acf291a7c8c5636e7a8cbff634159dc7e30d5bc14c33fc",
-  "receipt": {
-    "to": null,
-    "from": "0xb7ba1Dea4a3745e58959a2091b47096cc197be5A",
-    "contractAddress": "0x94b5304ec379Dc28f664c8762182d1d12d2ce4A1",
-    "transactionIndex": 1,
-    "gasUsed": "723108",
-    "logsBloom": "0x00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000",
-    "blockHash": "0x1777b89670c47f8c37c2848d37c3c885742b9259901c4eb71b27c0cf1016fc46",
-    "transactionHash": "0x8232b5ee9f78a2d8f2acf291a7c8c5636e7a8cbff634159dc7e30d5bc14c33fc",
-    "logs": [],
-    "blockNumber": 13795948,
-    "cumulativeGasUsed": "766971",
-    "status": 1,
-    "byzantium": true
-  },
-  "args": [
-    "0xAE73edfC71af8f5fb7d8840887E8EE4317989456",
-    "900000000000000000000000000",
-    "0",
-    "40000000000000000000000000",
-    "600000000000000000000000000",
-    "5000000000000000000000000",
-    "600000000000000000000000000",
-    "10000000000000000000000000",
-    "80000000000000000000000000",
-    "200000000000000000000000000"
-  ],
-  "numDeployments": 1,
-  "solcInputHash": "f83ccc030186e5b58439131350431de3",
-  "metadata": "{\"compiler\":{\"version\":\"0.8.10+commit.fc410830\"},\"language\":\"Solidity\",\"output\":{\"abi\":[{\"inputs\":[{\"internalType\":\"contract IPoolAddressesProvider\",\"name\":\"provider\",\"type\":\"address\"},{\"internalType\":\"uint256\",\"name\":\"optimalUsageRatio\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"baseVariableBorrowRate\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"variableRateSlope1\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"variableRateSlope2\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"stableRateSlope1\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"stableRateSlope2\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"baseStableRateOffset\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"stableRateExcessOffset\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"optimalStableToTotalDebtRatio\",\"type\":\"uint256\"}],\"stateMutability\":\"nonpayable\",\"type\":\"constructor\"},{\"inputs\":[],\"name\":\"ADDRESSES_PROVIDER\",\"outputs\":[{\"internalType\":\"contract IPoolAddressesProvider\",\"name\":\"\",\"type\":\"address\"}],\"stateMutability\":\"view\",\"type\":\"function\"},{\"inputs\":[],\"name\":\"MAX_EXCESS_STABLE_TO_TOTAL_DEBT_RATIO\",\"outputs\":[{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"}],\"stateMutability\":\"view\",\"type\":\"function\"},{\"inputs\":[],\"name\":\"MAX_EXCESS_USAGE_RATIO\",\"outputs\":[{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"}],\"stateMutability\":\"view\",\"type\":\"function\"},{\"inputs\":[],\"name\":\"OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO\",\"outputs\":[{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"}],\"stateMutability\":\"view\",\"type\":\"function\"},{\"inputs\":[],\"name\":\"OPTIMAL_USAGE_RATIO\",\"outputs\":[{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"}],\"stateMutability\":\"view\",\"type\":\"function\"},{\"inputs\":[{\"components\":[{\"internalType\":\"uint256\",\"name\":\"unbacked\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"liquidityAdded\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"liquidityTaken\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"totalStableDebt\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"totalVariableDebt\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"averageStableBorrowRate\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"reserveFactor\",\"type\":\"uint256\"},{\"internalType\":\"address\",\"name\":\"reserve\",\"type\":\"address\"},{\"internalType\":\"address\",\"name\":\"aToken\",\"type\":\"address\"}],\"internalType\":\"struct DataTypes.CalculateInterestRatesParams\",\"name\":\"params\",\"type\":\"tuple\"}],\"name\":\"calculateInterestRates\",\"outputs\":[{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"},{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"}],\"stateMutability\":\"view\",\"type\":\"function\"},{\"inputs\":[],\"name\":\"getBaseStableBorrowRate\",\"outputs\":[{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"}],\"stateMutability\":\"view\",\"type\":\"function\"},{\"inputs\":[],\"name\":\"getBaseVariableBorrowRate\",\"outputs\":[{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"}],\"stateMutability\":\"view\",\"type\":\"function\"},{\"inputs\":[],\"name\":\"getMaxVariableBorrowRate\",\"outputs\":[{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"}],\"stateMutability\":\"view\",\"type\":\"function\"},{\"inputs\":[],\"name\":\"getStableRateExcessOffset\",\"outputs\":[{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"}],\"stateMutability\":\"view\",\"type\":\"function\"},{\"inputs\":[],\"name\":\"getStableRateSlope1\",\"outputs\":[{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"}],\"stateMutability\":\"view\",\"type\":\"function\"},{\"inputs\":[],\"name\":\"getStableRateSlope2\",\"outputs\":[{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"}],\"stateMutability\":\"view\",\"type\":\"function\"},{\"inputs\":[],\"name\":\"getVariableRateSlope1\",\"outputs\":[{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"}],\"stateMutability\":\"view\",\"type\":\"function\"},{\"inputs\":[],\"name\":\"getVariableRateSlope2\",\"outputs\":[{\"internalType\":\"uint256\",\"name\":\"\",\"type\":\"uint256\"}],\"stateMutability\":\"view\",\"type\":\"function\"}],\"devdoc\":{\"author\":\"Aave\",\"details\":\"The model of interest rate is based on 2 slopes, one before the `OPTIMAL_USAGE_RATIO` point of usage and another from that one to 100%. - An instance of this same contract, can't be used across different Aave markets, due to the caching   of the PoolAddressesProvider\",\"kind\":\"dev\",\"methods\":{\"calculateInterestRates((uint256,uint256,uint256,uint256,uint256,uint256,uint256,address,address))\":{\"params\":{\"params\":\"The parameters needed to calculate interest rates\"},\"returns\":{\"_0\":\"liquidityRate The liquidity rate expressed in rays\",\"_1\":\"stableBorrowRate The stable borrow rate expressed in rays\",\"_2\":\"variableBorrowRate The variable borrow rate expressed in rays\"}},\"constructor\":{\"details\":\"Constructor.\",\"params\":{\"baseStableRateOffset\":\"The premium on top of variable rate for base stable borrowing rate\",\"baseVariableBorrowRate\":\"The base variable borrow rate\",\"optimalStableToTotalDebtRatio\":\"The optimal stable debt to total debt ratio of the reserve\",\"optimalUsageRatio\":\"The optimal usage ratio\",\"provider\":\"The address of the PoolAddressesProvider contract\",\"stableRateExcessOffset\":\"The premium on top of stable rate when there stable debt surpass the threshold\",\"stableRateSlope1\":\"The stable rate slope below optimal usage ratio\",\"stableRateSlope2\":\"The stable rate slope above optimal usage ratio\",\"variableRateSlope1\":\"The variable rate slope below optimal usage ratio\",\"variableRateSlope2\":\"The variable rate slope above optimal usage ratio\"}},\"getBaseStableBorrowRate()\":{\"returns\":{\"_0\":\"The base stable borrow rate, expressed in ray\"}},\"getBaseVariableBorrowRate()\":{\"returns\":{\"_0\":\"The base variable borrow rate, expressed in ray\"}},\"getMaxVariableBorrowRate()\":{\"returns\":{\"_0\":\"The maximum variable borrow rate, expressed in ray\"}},\"getStableRateExcessOffset()\":{\"details\":\"It's an additional premium applied to the stable when stable debt > OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO\",\"returns\":{\"_0\":\"The stable rate excess offset, expressed in ray\"}},\"getStableRateSlope1()\":{\"details\":\"It's the stable rate when usage ratio > 0 and <= OPTIMAL_USAGE_RATIO\",\"returns\":{\"_0\":\"The stable rate slope, expressed in ray\"}},\"getStableRateSlope2()\":{\"details\":\"It's the variable rate when usage ratio > OPTIMAL_USAGE_RATIO\",\"returns\":{\"_0\":\"The stable rate slope, expressed in ray\"}},\"getVariableRateSlope1()\":{\"details\":\"It's the variable rate when usage ratio > 0 and <= OPTIMAL_USAGE_RATIO\",\"returns\":{\"_0\":\"The variable rate slope, expressed in ray\"}},\"getVariableRateSlope2()\":{\"details\":\"It's the variable rate when usage ratio > OPTIMAL_USAGE_RATIO\",\"returns\":{\"_0\":\"The variable rate slope, expressed in ray\"}}},\"stateVariables\":{\"ADDRESSES_PROVIDER\":{\"return\":\"The address of the PoolAddressesProvider contract\",\"returns\":{\"_0\":\"The address of the PoolAddressesProvider contract\"}},\"MAX_EXCESS_STABLE_TO_TOTAL_DEBT_RATIO\":{\"details\":\"It's always equal to 1-optimal stable to total debt ratio (added as constant for gas optimizations)\",\"return\":\"The max excess stable to total debt ratio, expressed in ray.\",\"returns\":{\"_0\":\"The max excess stable to total debt ratio, expressed in ray.\"}},\"MAX_EXCESS_USAGE_RATIO\":{\"details\":\"It's always equal to 1-optimal usage ratio (added as constant for gas optimizations)\",\"return\":\"The max excess usage ratio, expressed in ray.\",\"returns\":{\"_0\":\"The max excess usage ratio, expressed in ray.\"}},\"OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO\":{\"return\":\"The optimal stable to total debt ratio, expressed in ray.\",\"returns\":{\"_0\":\"The optimal stable to total debt ratio, expressed in ray.\"}},\"OPTIMAL_USAGE_RATIO\":{\"return\":\"The optimal usage ratio, expressed in ray.\",\"returns\":{\"_0\":\"The optimal usage ratio, expressed in ray.\"}}},\"title\":\"DefaultReserveInterestRateStrategy contract\",\"version\":1},\"userdoc\":{\"kind\":\"user\",\"methods\":{\"ADDRESSES_PROVIDER()\":{\"notice\":\"Returns the address of the PoolAddressesProvider\"},\"MAX_EXCESS_STABLE_TO_TOTAL_DEBT_RATIO()\":{\"notice\":\"Returns the excess stable debt ratio above the optimal.\"},\"MAX_EXCESS_USAGE_RATIO()\":{\"notice\":\"Returns the excess usage ratio above the optimal.\"},\"OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO()\":{\"notice\":\"Returns the optimal stable to total debt ratio of the reserve.\"},\"OPTIMAL_USAGE_RATIO()\":{\"notice\":\"Returns the usage ratio at which the pool aims to obtain most competitive borrow rates.\"},\"calculateInterestRates((uint256,uint256,uint256,uint256,uint256,uint256,uint256,address,address))\":{\"notice\":\"Calculates the interest rates depending on the reserve's state and configurations\"},\"getBaseStableBorrowRate()\":{\"notice\":\"Returns the base stable borrow rate\"},\"getBaseVariableBorrowRate()\":{\"notice\":\"Returns the base variable borrow rate\"},\"getMaxVariableBorrowRate()\":{\"notice\":\"Returns the maximum variable borrow rate\"},\"getStableRateExcessOffset()\":{\"notice\":\"Returns the stable rate excess offset\"},\"getStableRateSlope1()\":{\"notice\":\"Returns the stable rate slope below optimal usage ratio\"},\"getStableRateSlope2()\":{\"notice\":\"Returns the stable rate slope above optimal usage ratio\"},\"getVariableRateSlope1()\":{\"notice\":\"Returns the variable rate slope below optimal usage ratio\"},\"getVariableRateSlope2()\":{\"notice\":\"Returns the variable rate slope above optimal usage ratio\"}},\"notice\":\"Implements the calculation of the interest rates depending on the reserve state\",\"version\":1}},\"settings\":{\"compilationTarget\":{\"@aave/core-v3/contracts/protocol/pool/DefaultReserveInterestRateStrategy.sol\":\"DefaultReserveInterestRateStrategy\"},\"evmVersion\":\"berlin\",\"libraries\":{},\"metadata\":{\"bytecodeHash\":\"ipfs\",\"useLiteralContent\":true},\"optimizer\":{\"enabled\":true,\"runs\":100000},\"remappings\":[]},\"sources\":{\"@aave/core-v3/contracts/dependencies/openzeppelin/contracts/IERC20.sol\":{\"content\":\"// SPDX-License-Identifier: AGPL-3.0\\npragma solidity ^0.8.0;\\n\\n/**\\n * @dev Interface of the ERC20 standard as defined in the EIP.\\n */\\ninterface IERC20 {\\n  /**\\n   * @dev Returns the amount of tokens in existence.\\n   */\\n  function totalSupply() external view returns (uint256);\\n\\n  /**\\n   * @dev Returns the amount of tokens owned by `account`.\\n   */\\n  function balanceOf(address account) external view returns (uint256);\\n\\n  /**\\n   * @dev Moves `amount` tokens from the caller's account to `recipient`.\\n   *\\n   * Returns a boolean value indicating whether the operation succeeded.\\n   *\\n   * Emits a {Transfer} event.\\n   */\\n  function transfer(address recipient, uint256 amount) external returns (bool);\\n\\n  /**\\n   * @dev Returns the remaining number of tokens that `spender` will be\\n   * allowed to spend on behalf of `owner` through {transferFrom}. This is\\n   * zero by default.\\n   *\\n   * This value changes when {approve} or {transferFrom} are called.\\n   */\\n  function allowance(address owner, address spender) external view returns (uint256);\\n\\n  /**\\n   * @dev Sets `amount` as the allowance of `spender` over the caller's tokens.\\n   *\\n   * Returns a boolean value indicating whether the operation succeeded.\\n   *\\n   * IMPORTANT: Beware that changing an allowance with this method brings the risk\\n   * that someone may use both the old and the new allowance by unfortunate\\n   * transaction ordering. One possible solution to mitigate this race\\n   * condition is to first reduce the spender's allowance to 0 and set the\\n   * desired value afterwards:\\n   * https://github.com/ethereum/EIPs/issues/20#issuecomment-263524729\\n   *\\n   * Emits an {Approval} event.\\n   */\\n  function approve(address spender, uint256 amount) external returns (bool);\\n\\n  /**\\n   * @dev Moves `amount` tokens from `sender` to `recipient` using the\\n   * allowance mechanism. `amount` is then deducted from the caller's\\n   * allowance.\\n   *\\n   * Returns a boolean value indicating whether the operation succeeded.\\n   *\\n   * Emits a {Transfer} event.\\n   */\\n  function transferFrom(address sender, address recipient, uint256 amount) external returns (bool);\\n\\n  /**\\n   * @dev Emitted when `value` tokens are moved from one account (`from`) to\\n   * another (`to`).\\n   *\\n   * Note that `value` may be zero.\\n   */\\n  event Transfer(address indexed from, address indexed to, uint256 value);\\n\\n  /**\\n   * @dev Emitted when the allowance of a `spender` for an `owner` is set by\\n   * a call to {approve}. `value` is the new allowance.\\n   */\\n  event Approval(address indexed owner, address indexed spender, uint256 value);\\n}\\n\",\"keccak256\":\"0xf57d62241e553696a1324d225663ba2e1a51db0a51ca236d0c1b009d89b6284c\",\"license\":\"AGPL-3.0\"},\"@aave/core-v3/contracts/interfaces/IDefaultInterestRateStrategy.sol\":{\"content\":\"// SPDX-License-Identifier: AGPL-3.0\\npragma solidity ^0.8.0;\\n\\nimport {IReserveInterestRateStrategy} from './IReserveInterestRateStrategy.sol';\\nimport {IPoolAddressesProvider} from './IPoolAddressesProvider.sol';\\n\\n/**\\n * @title IDefaultInterestRateStrategy\\n * @author Aave\\n * @notice Defines the basic interface of the DefaultReserveInterestRateStrategy\\n */\\ninterface IDefaultInterestRateStrategy is IReserveInterestRateStrategy {\\n  /**\\n   * @notice Returns the usage ratio at which the pool aims to obtain most competitive borrow rates.\\n   * @return The optimal usage ratio, expressed in ray.\\n   */\\n  function OPTIMAL_USAGE_RATIO() external view returns (uint256);\\n\\n  /**\\n   * @notice Returns the optimal stable to total debt ratio of the reserve.\\n   * @return The optimal stable to total debt ratio, expressed in ray.\\n   */\\n  function OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO() external view returns (uint256);\\n\\n  /**\\n   * @notice Returns the excess usage ratio above the optimal.\\n   * @dev It's always equal to 1-optimal usage ratio (added as constant for gas optimizations)\\n   * @return The max excess usage ratio, expressed in ray.\\n   */\\n  function MAX_EXCESS_USAGE_RATIO() external view returns (uint256);\\n\\n  /**\\n   * @notice Returns the excess stable debt ratio above the optimal.\\n   * @dev It's always equal to 1-optimal stable to total debt ratio (added as constant for gas optimizations)\\n   * @return The max excess stable to total debt ratio, expressed in ray.\\n   */\\n  function MAX_EXCESS_STABLE_TO_TOTAL_DEBT_RATIO() external view returns (uint256);\\n\\n  /**\\n   * @notice Returns the address of the PoolAddressesProvider\\n   * @return The address of the PoolAddressesProvider contract\\n   */\\n  function ADDRESSES_PROVIDER() external view returns (IPoolAddressesProvider);\\n\\n  /**\\n   * @notice Returns the variable rate slope below optimal usage ratio\\n   * @dev It's the variable rate when usage ratio > 0 and <= OPTIMAL_USAGE_RATIO\\n   * @return The variable rate slope, expressed in ray\\n   */\\n  function getVariableRateSlope1() external view returns (uint256);\\n\\n  /**\\n   * @notice Returns the variable rate slope above optimal usage ratio\\n   * @dev It's the variable rate when usage ratio > OPTIMAL_USAGE_RATIO\\n   * @return The variable rate slope, expressed in ray\\n   */\\n  function getVariableRateSlope2() external view returns (uint256);\\n\\n  /**\\n   * @notice Returns the stable rate slope below optimal usage ratio\\n   * @dev It's the stable rate when usage ratio > 0 and <= OPTIMAL_USAGE_RATIO\\n   * @return The stable rate slope, expressed in ray\\n   */\\n  function getStableRateSlope1() external view returns (uint256);\\n\\n  /**\\n   * @notice Returns the stable rate slope above optimal usage ratio\\n   * @dev It's the variable rate when usage ratio > OPTIMAL_USAGE_RATIO\\n   * @return The stable rate slope, expressed in ray\\n   */\\n  function getStableRateSlope2() external view returns (uint256);\\n\\n  /**\\n   * @notice Returns the stable rate excess offset\\n   * @dev It's an additional premium applied to the stable when stable debt > OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO\\n   * @return The stable rate excess offset, expressed in ray\\n   */\\n  function getStableRateExcessOffset() external view returns (uint256);\\n\\n  /**\\n   * @notice Returns the base stable borrow rate\\n   * @return The base stable borrow rate, expressed in ray\\n   */\\n  function getBaseStableBorrowRate() external view returns (uint256);\\n\\n  /**\\n   * @notice Returns the base variable borrow rate\\n   * @return The base variable borrow rate, expressed in ray\\n   */\\n  function getBaseVariableBorrowRate() external view returns (uint256);\\n\\n  /**\\n   * @notice Returns the maximum variable borrow rate\\n   * @return The maximum variable borrow rate, expressed in ray\\n   */\\n  function getMaxVariableBorrowRate() external view returns (uint256);\\n}\\n\",\"keccak256\":\"0xb7351f5dc779d86fc6d4aafb2fe48622b2dae3a00724923b8cd92b5c676ca893\",\"license\":\"AGPL-3.0\"},\"@aave/core-v3/contracts/interfaces/IPoolAddressesProvider.sol\":{\"content\":\"// SPDX-License-Identifier: AGPL-3.0\\npragma solidity ^0.8.0;\\n\\n/**\\n * @title IPoolAddressesProvider\\n * @author Aave\\n * @notice Defines the basic interface for a Pool Addresses Provider.\\n */\\ninterface IPoolAddressesProvider {\\n  /**\\n   * @dev Emitted when the market identifier is updated.\\n   * @param oldMarketId The old id of the market\\n   * @param newMarketId The new id of the market\\n   */\\n  event MarketIdSet(string indexed oldMarketId, string indexed newMarketId);\\n\\n  /**\\n   * @dev Emitted when the pool is updated.\\n   * @param oldAddress The old address of the Pool\\n   * @param newAddress The new address of the Pool\\n   */\\n  event PoolUpdated(address indexed oldAddress, address indexed newAddress);\\n\\n  /**\\n   * @dev Emitted when the pool configurator is updated.\\n   * @param oldAddress The old address of the PoolConfigurator\\n   * @param newAddress The new address of the PoolConfigurator\\n   */\\n  event PoolConfiguratorUpdated(address indexed oldAddress, address indexed newAddress);\\n\\n  /**\\n   * @dev Emitted when the price oracle is updated.\\n   * @param oldAddress The old address of the PriceOracle\\n   * @param newAddress The new address of the PriceOracle\\n   */\\n  event PriceOracleUpdated(address indexed oldAddress, address indexed newAddress);\\n\\n  /**\\n   * @dev Emitted when the ACL manager is updated.\\n   * @param oldAddress The old address of the ACLManager\\n   * @param newAddress The new address of the ACLManager\\n   */\\n  event ACLManagerUpdated(address indexed oldAddress, address indexed newAddress);\\n\\n  /**\\n   * @dev Emitted when the ACL admin is updated.\\n   * @param oldAddress The old address of the ACLAdmin\\n   * @param newAddress The new address of the ACLAdmin\\n   */\\n  event ACLAdminUpdated(address indexed oldAddress, address indexed newAddress);\\n\\n  /**\\n   * @dev Emitted when the price oracle sentinel is updated.\\n   * @param oldAddress The old address of the PriceOracleSentinel\\n   * @param newAddress The new address of the PriceOracleSentinel\\n   */\\n  event PriceOracleSentinelUpdated(address indexed oldAddress, address indexed newAddress);\\n\\n  /**\\n   * @dev Emitted when the pool data provider is updated.\\n   * @param oldAddress The old address of the PoolDataProvider\\n   * @param newAddress The new address of the PoolDataProvider\\n   */\\n  event PoolDataProviderUpdated(address indexed oldAddress, address indexed newAddress);\\n\\n  /**\\n   * @dev Emitted when a new proxy is created.\\n   * @param id The identifier of the proxy\\n   * @param proxyAddress The address of the created proxy contract\\n   * @param implementationAddress The address of the implementation contract\\n   */\\n  event ProxyCreated(\\n    bytes32 indexed id,\\n    address indexed proxyAddress,\\n    address indexed implementationAddress\\n  );\\n\\n  /**\\n   * @dev Emitted when a new non-proxied contract address is registered.\\n   * @param id The identifier of the contract\\n   * @param oldAddress The address of the old contract\\n   * @param newAddress The address of the new contract\\n   */\\n  event AddressSet(bytes32 indexed id, address indexed oldAddress, address indexed newAddress);\\n\\n  /**\\n   * @dev Emitted when the implementation of the proxy registered with id is updated\\n   * @param id The identifier of the contract\\n   * @param proxyAddress The address of the proxy contract\\n   * @param oldImplementationAddress The address of the old implementation contract\\n   * @param newImplementationAddress The address of the new implementation contract\\n   */\\n  event AddressSetAsProxy(\\n    bytes32 indexed id,\\n    address indexed proxyAddress,\\n    address oldImplementationAddress,\\n    address indexed newImplementationAddress\\n  );\\n\\n  /**\\n   * @notice Returns the id of the Aave market to which this contract points to.\\n   * @return The market id\\n   */\\n  function getMarketId() external view returns (string memory);\\n\\n  /**\\n   * @notice Associates an id with a specific PoolAddressesProvider.\\n   * @dev This can be used to create an onchain registry of PoolAddressesProviders to\\n   * identify and validate multiple Aave markets.\\n   * @param newMarketId The market id\\n   */\\n  function setMarketId(string calldata newMarketId) external;\\n\\n  /**\\n   * @notice Returns an address by its identifier.\\n   * @dev The returned address might be an EOA or a contract, potentially proxied\\n   * @dev It returns ZERO if there is no registered address with the given id\\n   * @param id The id\\n   * @return The address of the registered for the specified id\\n   */\\n  function getAddress(bytes32 id) external view returns (address);\\n\\n  /**\\n   * @notice General function to update the implementation of a proxy registered with\\n   * certain `id`. If there is no proxy registered, it will instantiate one and\\n   * set as implementation the `newImplementationAddress`.\\n   * @dev IMPORTANT Use this function carefully, only for ids that don't have an explicit\\n   * setter function, in order to avoid unexpected consequences\\n   * @param id The id\\n   * @param newImplementationAddress The address of the new implementation\\n   */\\n  function setAddressAsProxy(bytes32 id, address newImplementationAddress) external;\\n\\n  /**\\n   * @notice Sets an address for an id replacing the address saved in the addresses map.\\n   * @dev IMPORTANT Use this function carefully, as it will do a hard replacement\\n   * @param id The id\\n   * @param newAddress The address to set\\n   */\\n  function setAddress(bytes32 id, address newAddress) external;\\n\\n  /**\\n   * @notice Returns the address of the Pool proxy.\\n   * @return The Pool proxy address\\n   */\\n  function getPool() external view returns (address);\\n\\n  /**\\n   * @notice Updates the implementation of the Pool, or creates a proxy\\n   * setting the new `pool` implementation when the function is called for the first time.\\n   * @param newPoolImpl The new Pool implementation\\n   */\\n  function setPoolImpl(address newPoolImpl) external;\\n\\n  /**\\n   * @notice Returns the address of the PoolConfigurator proxy.\\n   * @return The PoolConfigurator proxy address\\n   */\\n  function getPoolConfigurator() external view returns (address);\\n\\n  /**\\n   * @notice Updates the implementation of the PoolConfigurator, or creates a proxy\\n   * setting the new `PoolConfigurator` implementation when the function is called for the first time.\\n   * @param newPoolConfiguratorImpl The new PoolConfigurator implementation\\n   */\\n  function setPoolConfiguratorImpl(address newPoolConfiguratorImpl) external;\\n\\n  /**\\n   * @notice Returns the address of the price oracle.\\n   * @return The address of the PriceOracle\\n   */\\n  function getPriceOracle() external view returns (address);\\n\\n  /**\\n   * @notice Updates the address of the price oracle.\\n   * @param newPriceOracle The address of the new PriceOracle\\n   */\\n  function setPriceOracle(address newPriceOracle) external;\\n\\n  /**\\n   * @notice Returns the address of the ACL manager.\\n   * @return The address of the ACLManager\\n   */\\n  function getACLManager() external view returns (address);\\n\\n  /**\\n   * @notice Updates the address of the ACL manager.\\n   * @param newAclManager The address of the new ACLManager\\n   */\\n  function setACLManager(address newAclManager) external;\\n\\n  /**\\n   * @notice Returns the address of the ACL admin.\\n   * @return The address of the ACL admin\\n   */\\n  function getACLAdmin() external view returns (address);\\n\\n  /**\\n   * @notice Updates the address of the ACL admin.\\n   * @param newAclAdmin The address of the new ACL admin\\n   */\\n  function setACLAdmin(address newAclAdmin) external;\\n\\n  /**\\n   * @notice Returns the address of the price oracle sentinel.\\n   * @return The address of the PriceOracleSentinel\\n   */\\n  function getPriceOracleSentinel() external view returns (address);\\n\\n  /**\\n   * @notice Updates the address of the price oracle sentinel.\\n   * @param newPriceOracleSentinel The address of the new PriceOracleSentinel\\n   */\\n  function setPriceOracleSentinel(address newPriceOracleSentinel) external;\\n\\n  /**\\n   * @notice Returns the address of the data provider.\\n   * @return The address of the DataProvider\\n   */\\n  function getPoolDataProvider() external view returns (address);\\n\\n  /**\\n   * @notice Updates the address of the data provider.\\n   * @param newDataProvider The address of the new DataProvider\\n   */\\n  function setPoolDataProvider(address newDataProvider) external;\\n}\\n\",\"keccak256\":\"0x33d4308d9407b4ee2297fc4ba5acce1a96a6c658189e2778a4f6b90e032fb3b5\",\"license\":\"AGPL-3.0\"},\"@aave/core-v3/contracts/interfaces/IReserveInterestRateStrategy.sol\":{\"content\":\"// SPDX-License-Identifier: AGPL-3.0\\npragma solidity ^0.8.0;\\n\\nimport {DataTypes} from '../protocol/libraries/types/DataTypes.sol';\\n\\n/**\\n * @title IReserveInterestRateStrategy\\n * @author Aave\\n * @notice Interface for the calculation of the interest rates\\n */\\ninterface IReserveInterestRateStrategy {\\n  /**\\n   * @notice Calculates the interest rates depending on the reserve's state and configurations\\n   * @param params The parameters needed to calculate interest rates\\n   * @return liquidityRate The liquidity rate expressed in rays\\n   * @return stableBorrowRate The stable borrow rate expressed in rays\\n   * @return variableBorrowRate The variable borrow rate expressed in rays\\n   */\\n  function calculateInterestRates(\\n    DataTypes.CalculateInterestRatesParams memory params\\n  ) external view returns (uint256, uint256, uint256);\\n}\\n\",\"keccak256\":\"0x9028d29b6fda6f89b887a627ce5e03a401c4ccac98bfe14afcaf69ff09312202\",\"license\":\"AGPL-3.0\"},\"@aave/core-v3/contracts/protocol/libraries/helpers/Errors.sol\":{\"content\":\"// SPDX-License-Identifier: BUSL-1.1\\npragma solidity ^0.8.0;\\n\\n/**\\n * @title Errors library\\n * @author Aave\\n * @notice Defines the error messages emitted by the different contracts of the Aave protocol\\n */\\nlibrary Errors {\\n  string public constant CALLER_NOT_POOL_ADMIN = '1'; // 'The caller of the function is not a pool admin'\\n  string public constant CALLER_NOT_EMERGENCY_ADMIN = '2'; // 'The caller of the function is not an emergency admin'\\n  string public constant CALLER_NOT_POOL_OR_EMERGENCY_ADMIN = '3'; // 'The caller of the function is not a pool or emergency admin'\\n  string public constant CALLER_NOT_RISK_OR_POOL_ADMIN = '4'; // 'The caller of the function is not a risk or pool admin'\\n  string public constant CALLER_NOT_ASSET_LISTING_OR_POOL_ADMIN = '5'; // 'The caller of the function is not an asset listing or pool admin'\\n  string public constant CALLER_NOT_BRIDGE = '6'; // 'The caller of the function is not a bridge'\\n  string public constant ADDRESSES_PROVIDER_NOT_REGISTERED = '7'; // 'Pool addresses provider is not registered'\\n  string public constant INVALID_ADDRESSES_PROVIDER_ID = '8'; // 'Invalid id for the pool addresses provider'\\n  string public constant NOT_CONTRACT = '9'; // 'Address is not a contract'\\n  string public constant CALLER_NOT_POOL_CONFIGURATOR = '10'; // 'The caller of the function is not the pool configurator'\\n  string public constant CALLER_NOT_ATOKEN = '11'; // 'The caller of the function is not an AToken'\\n  string public constant INVALID_ADDRESSES_PROVIDER = '12'; // 'The address of the pool addresses provider is invalid'\\n  string public constant INVALID_FLASHLOAN_EXECUTOR_RETURN = '13'; // 'Invalid return value of the flashloan executor function'\\n  string public constant RESERVE_ALREADY_ADDED = '14'; // 'Reserve has already been added to reserve list'\\n  string public constant NO_MORE_RESERVES_ALLOWED = '15'; // 'Maximum amount of reserves in the pool reached'\\n  string public constant EMODE_CATEGORY_RESERVED = '16'; // 'Zero eMode category is reserved for volatile heterogeneous assets'\\n  string public constant INVALID_EMODE_CATEGORY_ASSIGNMENT = '17'; // 'Invalid eMode category assignment to asset'\\n  string public constant RESERVE_LIQUIDITY_NOT_ZERO = '18'; // 'The liquidity of the reserve needs to be 0'\\n  string public constant FLASHLOAN_PREMIUM_INVALID = '19'; // 'Invalid flashloan premium'\\n  string public constant INVALID_RESERVE_PARAMS = '20'; // 'Invalid risk parameters for the reserve'\\n  string public constant INVALID_EMODE_CATEGORY_PARAMS = '21'; // 'Invalid risk parameters for the eMode category'\\n  string public constant BRIDGE_PROTOCOL_FEE_INVALID = '22'; // 'Invalid bridge protocol fee'\\n  string public constant CALLER_MUST_BE_POOL = '23'; // 'The caller of this function must be a pool'\\n  string public constant INVALID_MINT_AMOUNT = '24'; // 'Invalid amount to mint'\\n  string public constant INVALID_BURN_AMOUNT = '25'; // 'Invalid amount to burn'\\n  string public constant INVALID_AMOUNT = '26'; // 'Amount must be greater than 0'\\n  string public constant RESERVE_INACTIVE = '27'; // 'Action requires an active reserve'\\n  string public constant RESERVE_FROZEN = '28'; // 'Action cannot be performed because the reserve is frozen'\\n  string public constant RESERVE_PAUSED = '29'; // 'Action cannot be performed because the reserve is paused'\\n  string public constant BORROWING_NOT_ENABLED = '30'; // 'Borrowing is not enabled'\\n  string public constant STABLE_BORROWING_NOT_ENABLED = '31'; // 'Stable borrowing is not enabled'\\n  string public constant NOT_ENOUGH_AVAILABLE_USER_BALANCE = '32'; // 'User cannot withdraw more than the available balance'\\n  string public constant INVALID_INTEREST_RATE_MODE_SELECTED = '33'; // 'Invalid interest rate mode selected'\\n  string public constant COLLATERAL_BALANCE_IS_ZERO = '34'; // 'The collateral balance is 0'\\n  string public constant HEALTH_FACTOR_LOWER_THAN_LIQUIDATION_THRESHOLD = '35'; // 'Health factor is lesser than the liquidation threshold'\\n  string public constant COLLATERAL_CANNOT_COVER_NEW_BORROW = '36'; // 'There is not enough collateral to cover a new borrow'\\n  string public constant COLLATERAL_SAME_AS_BORROWING_CURRENCY = '37'; // 'Collateral is (mostly) the same currency that is being borrowed'\\n  string public constant AMOUNT_BIGGER_THAN_MAX_LOAN_SIZE_STABLE = '38'; // 'The requested amount is greater than the max loan size in stable rate mode'\\n  string public constant NO_DEBT_OF_SELECTED_TYPE = '39'; // 'For repayment of a specific type of debt, the user needs to have debt that type'\\n  string public constant NO_EXPLICIT_AMOUNT_TO_REPAY_ON_BEHALF = '40'; // 'To repay on behalf of a user an explicit amount to repay is needed'\\n  string public constant NO_OUTSTANDING_STABLE_DEBT = '41'; // 'User does not have outstanding stable rate debt on this reserve'\\n  string public constant NO_OUTSTANDING_VARIABLE_DEBT = '42'; // 'User does not have outstanding variable rate debt on this reserve'\\n  string public constant UNDERLYING_BALANCE_ZERO = '43'; // 'The underlying balance needs to be greater than 0'\\n  string public constant INTEREST_RATE_REBALANCE_CONDITIONS_NOT_MET = '44'; // 'Interest rate rebalance conditions were not met'\\n  string public constant HEALTH_FACTOR_NOT_BELOW_THRESHOLD = '45'; // 'Health factor is not below the threshold'\\n  string public constant COLLATERAL_CANNOT_BE_LIQUIDATED = '46'; // 'The collateral chosen cannot be liquidated'\\n  string public constant SPECIFIED_CURRENCY_NOT_BORROWED_BY_USER = '47'; // 'User did not borrow the specified currency'\\n  string public constant INCONSISTENT_FLASHLOAN_PARAMS = '49'; // 'Inconsistent flashloan parameters'\\n  string public constant BORROW_CAP_EXCEEDED = '50'; // 'Borrow cap is exceeded'\\n  string public constant SUPPLY_CAP_EXCEEDED = '51'; // 'Supply cap is exceeded'\\n  string public constant UNBACKED_MINT_CAP_EXCEEDED = '52'; // 'Unbacked mint cap is exceeded'\\n  string public constant DEBT_CEILING_EXCEEDED = '53'; // 'Debt ceiling is exceeded'\\n  string public constant UNDERLYING_CLAIMABLE_RIGHTS_NOT_ZERO = '54'; // 'Claimable rights over underlying not zero (aToken supply or accruedToTreasury)'\\n  string public constant STABLE_DEBT_NOT_ZERO = '55'; // 'Stable debt supply is not zero'\\n  string public constant VARIABLE_DEBT_SUPPLY_NOT_ZERO = '56'; // 'Variable debt supply is not zero'\\n  string public constant LTV_VALIDATION_FAILED = '57'; // 'Ltv validation failed'\\n  string public constant INCONSISTENT_EMODE_CATEGORY = '58'; // 'Inconsistent eMode category'\\n  string public constant PRICE_ORACLE_SENTINEL_CHECK_FAILED = '59'; // 'Price oracle sentinel validation failed'\\n  string public constant ASSET_NOT_BORROWABLE_IN_ISOLATION = '60'; // 'Asset is not borrowable in isolation mode'\\n  string public constant RESERVE_ALREADY_INITIALIZED = '61'; // 'Reserve has already been initialized'\\n  string public constant USER_IN_ISOLATION_MODE_OR_LTV_ZERO = '62'; // 'User is in isolation mode or ltv is zero'\\n  string public constant INVALID_LTV = '63'; // 'Invalid ltv parameter for the reserve'\\n  string public constant INVALID_LIQ_THRESHOLD = '64'; // 'Invalid liquidity threshold parameter for the reserve'\\n  string public constant INVALID_LIQ_BONUS = '65'; // 'Invalid liquidity bonus parameter for the reserve'\\n  string public constant INVALID_DECIMALS = '66'; // 'Invalid decimals parameter of the underlying asset of the reserve'\\n  string public constant INVALID_RESERVE_FACTOR = '67'; // 'Invalid reserve factor parameter for the reserve'\\n  string public constant INVALID_BORROW_CAP = '68'; // 'Invalid borrow cap for the reserve'\\n  string public constant INVALID_SUPPLY_CAP = '69'; // 'Invalid supply cap for the reserve'\\n  string public constant INVALID_LIQUIDATION_PROTOCOL_FEE = '70'; // 'Invalid liquidation protocol fee for the reserve'\\n  string public constant INVALID_EMODE_CATEGORY = '71'; // 'Invalid eMode category for the reserve'\\n  string public constant INVALID_UNBACKED_MINT_CAP = '72'; // 'Invalid unbacked mint cap for the reserve'\\n  string public constant INVALID_DEBT_CEILING = '73'; // 'Invalid debt ceiling for the reserve\\n  string public constant INVALID_RESERVE_INDEX = '74'; // 'Invalid reserve index'\\n  string public constant ACL_ADMIN_CANNOT_BE_ZERO = '75'; // 'ACL admin cannot be set to the zero address'\\n  string public constant INCONSISTENT_PARAMS_LENGTH = '76'; // 'Array parameters that should be equal length are not'\\n  string public constant ZERO_ADDRESS_NOT_VALID = '77'; // 'Zero address not valid'\\n  string public constant INVALID_EXPIRATION = '78'; // 'Invalid expiration'\\n  string public constant INVALID_SIGNATURE = '79'; // 'Invalid signature'\\n  string public constant OPERATION_NOT_SUPPORTED = '80'; // 'Operation not supported'\\n  string public constant DEBT_CEILING_NOT_ZERO = '81'; // 'Debt ceiling is not zero'\\n  string public constant ASSET_NOT_LISTED = '82'; // 'Asset is not listed'\\n  string public constant INVALID_OPTIMAL_USAGE_RATIO = '83'; // 'Invalid optimal usage ratio'\\n  string public constant INVALID_OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO = '84'; // 'Invalid optimal stable to total debt ratio'\\n  string public constant UNDERLYING_CANNOT_BE_RESCUED = '85'; // 'The underlying asset cannot be rescued'\\n  string public constant ADDRESSES_PROVIDER_ALREADY_ADDED = '86'; // 'Reserve has already been added to reserve list'\\n  string public constant POOL_ADDRESSES_DO_NOT_MATCH = '87'; // 'The token implementation pool address and the pool address provided by the initializing pool do not match'\\n  string public constant STABLE_BORROWING_ENABLED = '88'; // 'Stable borrowing is enabled'\\n  string public constant SILOED_BORROWING_VIOLATION = '89'; // 'User is trying to borrow multiple assets including a siloed one'\\n  string public constant RESERVE_DEBT_NOT_ZERO = '90'; // the total debt of the reserve needs to be 0\\n  string public constant FLASHLOAN_DISABLED = '91'; // FlashLoaning for this asset is disabled\\n}\\n\",\"keccak256\":\"0x61757945ed506349f2cec8b99806124ef17f70644faba9860fb134df8ca34e86\",\"license\":\"BUSL-1.1\"},\"@aave/core-v3/contracts/protocol/libraries/math/PercentageMath.sol\":{\"content\":\"// SPDX-License-Identifier: BUSL-1.1\\npragma solidity ^0.8.0;\\n\\n/**\\n * @title PercentageMath library\\n * @author Aave\\n * @notice Provides functions to perform percentage calculations\\n * @dev Percentages are defined by default with 2 decimals of precision (100.00). The precision is indicated by PERCENTAGE_FACTOR\\n * @dev Operations are rounded. If a value is >=.5, will be rounded up, otherwise rounded down.\\n */\\nlibrary PercentageMath {\\n  // Maximum percentage factor (100.00%)\\n  uint256 internal constant PERCENTAGE_FACTOR = 1e4;\\n\\n  // Half percentage factor (50.00%)\\n  uint256 internal constant HALF_PERCENTAGE_FACTOR = 0.5e4;\\n\\n  /**\\n   * @notice Executes a percentage multiplication\\n   * @dev assembly optimized for improved gas savings, see https://twitter.com/transmissions11/status/1451131036377571328\\n   * @param value The value of which the percentage needs to be calculated\\n   * @param percentage The percentage of the value to be calculated\\n   * @return result value percentmul percentage\\n   */\\n  function percentMul(uint256 value, uint256 percentage) internal pure returns (uint256 result) {\\n    // to avoid overflow, value <= (type(uint256).max - HALF_PERCENTAGE_FACTOR) / percentage\\n    assembly {\\n      if iszero(\\n        or(\\n          iszero(percentage),\\n          iszero(gt(value, div(sub(not(0), HALF_PERCENTAGE_FACTOR), percentage)))\\n        )\\n      ) {\\n        revert(0, 0)\\n      }\\n\\n      result := div(add(mul(value, percentage), HALF_PERCENTAGE_FACTOR), PERCENTAGE_FACTOR)\\n    }\\n  }\\n\\n  /**\\n   * @notice Executes a percentage division\\n   * @dev assembly optimized for improved gas savings, see https://twitter.com/transmissions11/status/1451131036377571328\\n   * @param value The value of which the percentage needs to be calculated\\n   * @param percentage The percentage of the value to be calculated\\n   * @return result value percentdiv percentage\\n   */\\n  function percentDiv(uint256 value, uint256 percentage) internal pure returns (uint256 result) {\\n    // to avoid overflow, value <= (type(uint256).max - halfPercentage) / PERCENTAGE_FACTOR\\n    assembly {\\n      if or(\\n        iszero(percentage),\\n        iszero(iszero(gt(value, div(sub(not(0), div(percentage, 2)), PERCENTAGE_FACTOR))))\\n      ) {\\n        revert(0, 0)\\n      }\\n\\n      result := div(add(mul(value, PERCENTAGE_FACTOR), div(percentage, 2)), percentage)\\n    }\\n  }\\n}\\n\",\"keccak256\":\"0x6a7dcf18e1af47b69c8dd58093b0134e3689bf719ba63eae485d8f9dfc10cac7\",\"license\":\"BUSL-1.1\"},\"@aave/core-v3/contracts/protocol/libraries/math/WadRayMath.sol\":{\"content\":\"// SPDX-License-Identifier: BUSL-1.1\\npragma solidity ^0.8.0;\\n\\n/**\\n * @title WadRayMath library\\n * @author Aave\\n * @notice Provides functions to perform calculations with Wad and Ray units\\n * @dev Provides mul and div function for wads (decimal numbers with 18 digits of precision) and rays (decimal numbers\\n * with 27 digits of precision)\\n * @dev Operations are rounded. If a value is >=.5, will be rounded up, otherwise rounded down.\\n */\\nlibrary WadRayMath {\\n  // HALF_WAD and HALF_RAY expressed with extended notation as constant with operations are not supported in Yul assembly\\n  uint256 internal constant WAD = 1e18;\\n  uint256 internal constant HALF_WAD = 0.5e18;\\n\\n  uint256 internal constant RAY = 1e27;\\n  uint256 internal constant HALF_RAY = 0.5e27;\\n\\n  uint256 internal constant WAD_RAY_RATIO = 1e9;\\n\\n  /**\\n   * @dev Multiplies two wad, rounding half up to the nearest wad\\n   * @dev assembly optimized for improved gas savings, see https://twitter.com/transmissions11/status/1451131036377571328\\n   * @param a Wad\\n   * @param b Wad\\n   * @return c = a*b, in wad\\n   */\\n  function wadMul(uint256 a, uint256 b) internal pure returns (uint256 c) {\\n    // to avoid overflow, a <= (type(uint256).max - HALF_WAD) / b\\n    assembly {\\n      if iszero(or(iszero(b), iszero(gt(a, div(sub(not(0), HALF_WAD), b))))) {\\n        revert(0, 0)\\n      }\\n\\n      c := div(add(mul(a, b), HALF_WAD), WAD)\\n    }\\n  }\\n\\n  /**\\n   * @dev Divides two wad, rounding half up to the nearest wad\\n   * @dev assembly optimized for improved gas savings, see https://twitter.com/transmissions11/status/1451131036377571328\\n   * @param a Wad\\n   * @param b Wad\\n   * @return c = a/b, in wad\\n   */\\n  function wadDiv(uint256 a, uint256 b) internal pure returns (uint256 c) {\\n    // to avoid overflow, a <= (type(uint256).max - halfB) / WAD\\n    assembly {\\n      if or(iszero(b), iszero(iszero(gt(a, div(sub(not(0), div(b, 2)), WAD))))) {\\n        revert(0, 0)\\n      }\\n\\n      c := div(add(mul(a, WAD), div(b, 2)), b)\\n    }\\n  }\\n\\n  /**\\n   * @notice Multiplies two ray, rounding half up to the nearest ray\\n   * @dev assembly optimized for improved gas savings, see https://twitter.com/transmissions11/status/1451131036377571328\\n   * @param a Ray\\n   * @param b Ray\\n   * @return c = a raymul b\\n   */\\n  function rayMul(uint256 a, uint256 b) internal pure returns (uint256 c) {\\n    // to avoid overflow, a <= (type(uint256).max - HALF_RAY) / b\\n    assembly {\\n      if iszero(or(iszero(b), iszero(gt(a, div(sub(not(0), HALF_RAY), b))))) {\\n        revert(0, 0)\\n      }\\n\\n      c := div(add(mul(a, b), HALF_RAY), RAY)\\n    }\\n  }\\n\\n  /**\\n   * @notice Divides two ray, rounding half up to the nearest ray\\n   * @dev assembly optimized for improved gas savings, see https://twitter.com/transmissions11/status/1451131036377571328\\n   * @param a Ray\\n   * @param b Ray\\n   * @return c = a raydiv b\\n   */\\n  function rayDiv(uint256 a, uint256 b) internal pure returns (uint256 c) {\\n    // to avoid overflow, a <= (type(uint256).max - halfB) / RAY\\n    assembly {\\n      if or(iszero(b), iszero(iszero(gt(a, div(sub(not(0), div(b, 2)), RAY))))) {\\n        revert(0, 0)\\n      }\\n\\n      c := div(add(mul(a, RAY), div(b, 2)), b)\\n    }\\n  }\\n\\n  /**\\n   * @dev Casts ray down to wad\\n   * @dev assembly optimized for improved gas savings, see https://twitter.com/transmissions11/status/1451131036377571328\\n   * @param a Ray\\n   * @return b = a converted to wad, rounded half up to the nearest wad\\n   */\\n  function rayToWad(uint256 a) internal pure returns (uint256 b) {\\n    assembly {\\n      b := div(a, WAD_RAY_RATIO)\\n      let remainder := mod(a, WAD_RAY_RATIO)\\n      if iszero(lt(remainder, div(WAD_RAY_RATIO, 2))) {\\n        b := add(b, 1)\\n      }\\n    }\\n  }\\n\\n  /**\\n   * @dev Converts wad up to ray\\n   * @dev assembly optimized for improved gas savings, see https://twitter.com/transmissions11/status/1451131036377571328\\n   * @param a Wad\\n   * @return b = a converted in ray\\n   */\\n  function wadToRay(uint256 a) internal pure returns (uint256 b) {\\n    // to avoid overflow, b/WAD_RAY_RATIO == a\\n    assembly {\\n      b := mul(a, WAD_RAY_RATIO)\\n\\n      if iszero(eq(div(b, WAD_RAY_RATIO), a)) {\\n        revert(0, 0)\\n      }\\n    }\\n  }\\n}\\n\",\"keccak256\":\"0x618fe1876e322a10269e4a96e61e516bbbec883cb79e20b508f8010027178f07\",\"license\":\"BUSL-1.1\"},\"@aave/core-v3/contracts/protocol/libraries/types/DataTypes.sol\":{\"content\":\"// SPDX-License-Identifier: BUSL-1.1\\npragma solidity ^0.8.0;\\n\\nlibrary DataTypes {\\n  struct ReserveData {\\n    //stores the reserve configuration\\n    ReserveConfigurationMap configuration;\\n    //the liquidity index. Expressed in ray\\n    uint128 liquidityIndex;\\n    //the current supply rate. Expressed in ray\\n    uint128 currentLiquidityRate;\\n    //variable borrow index. Expressed in ray\\n    uint128 variableBorrowIndex;\\n    //the current variable borrow rate. Expressed in ray\\n    uint128 currentVariableBorrowRate;\\n    //the current stable borrow rate. Expressed in ray\\n    uint128 currentStableBorrowRate;\\n    //timestamp of last update\\n    uint40 lastUpdateTimestamp;\\n    //the id of the reserve. Represents the position in the list of the active reserves\\n    uint16 id;\\n    //aToken address\\n    address aTokenAddress;\\n    //stableDebtToken address\\n    address stableDebtTokenAddress;\\n    //variableDebtToken address\\n    address variableDebtTokenAddress;\\n    //address of the interest rate strategy\\n    address interestRateStrategyAddress;\\n    //the current treasury balance, scaled\\n    uint128 accruedToTreasury;\\n    //the outstanding unbacked aTokens minted through the bridging feature\\n    uint128 unbacked;\\n    //the outstanding debt borrowed against this asset in isolation mode\\n    uint128 isolationModeTotalDebt;\\n  }\\n\\n  struct ReserveConfigurationMap {\\n    //bit 0-15: LTV\\n    //bit 16-31: Liq. threshold\\n    //bit 32-47: Liq. bonus\\n    //bit 48-55: Decimals\\n    //bit 56: reserve is active\\n    //bit 57: reserve is frozen\\n    //bit 58: borrowing is enabled\\n    //bit 59: stable rate borrowing enabled\\n    //bit 60: asset is paused\\n    //bit 61: borrowing in isolation mode is enabled\\n    //bit 62: siloed borrowing enabled\\n    //bit 63: flashloaning enabled\\n    //bit 64-79: reserve factor\\n    //bit 80-115 borrow cap in whole tokens, borrowCap == 0 => no cap\\n    //bit 116-151 supply cap in whole tokens, supplyCap == 0 => no cap\\n    //bit 152-167 liquidation protocol fee\\n    //bit 168-175 eMode category\\n    //bit 176-211 unbacked mint cap in whole tokens, unbackedMintCap == 0 => minting disabled\\n    //bit 212-251 debt ceiling for isolation mode with (ReserveConfiguration::DEBT_CEILING_DECIMALS) decimals\\n    //bit 252-255 unused\\n\\n    uint256 data;\\n  }\\n\\n  struct UserConfigurationMap {\\n    /**\\n     * @dev Bitmap of the users collaterals and borrows. It is divided in pairs of bits, one pair per asset.\\n     * The first bit indicates if an asset is used as collateral by the user, the second whether an\\n     * asset is borrowed by the user.\\n     */\\n    uint256 data;\\n  }\\n\\n  struct EModeCategory {\\n    // each eMode category has a custom ltv and liquidation threshold\\n    uint16 ltv;\\n    uint16 liquidationThreshold;\\n    uint16 liquidationBonus;\\n    // each eMode category may or may not have a custom oracle to override the individual assets price oracles\\n    address priceSource;\\n    string label;\\n  }\\n\\n  enum InterestRateMode {NONE, STABLE, VARIABLE}\\n\\n  struct ReserveCache {\\n    uint256 currScaledVariableDebt;\\n    uint256 nextScaledVariableDebt;\\n    uint256 currPrincipalStableDebt;\\n    uint256 currAvgStableBorrowRate;\\n    uint256 currTotalStableDebt;\\n    uint256 nextAvgStableBorrowRate;\\n    uint256 nextTotalStableDebt;\\n    uint256 currLiquidityIndex;\\n    uint256 nextLiquidityIndex;\\n    uint256 currVariableBorrowIndex;\\n    uint256 nextVariableBorrowIndex;\\n    uint256 currLiquidityRate;\\n    uint256 currVariableBorrowRate;\\n    uint256 reserveFactor;\\n    ReserveConfigurationMap reserveConfiguration;\\n    address aTokenAddress;\\n    address stableDebtTokenAddress;\\n    address variableDebtTokenAddress;\\n    uint40 reserveLastUpdateTimestamp;\\n    uint40 stableDebtLastUpdateTimestamp;\\n  }\\n\\n  struct ExecuteLiquidationCallParams {\\n    uint256 reservesCount;\\n    uint256 debtToCover;\\n    address collateralAsset;\\n    address debtAsset;\\n    address user;\\n    bool receiveAToken;\\n    address priceOracle;\\n    uint8 userEModeCategory;\\n    address priceOracleSentinel;\\n  }\\n\\n  struct ExecuteSupplyParams {\\n    address asset;\\n    uint256 amount;\\n    address onBehalfOf;\\n    uint16 referralCode;\\n  }\\n\\n  struct ExecuteBorrowParams {\\n    address asset;\\n    address user;\\n    address onBehalfOf;\\n    uint256 amount;\\n    InterestRateMode interestRateMode;\\n    uint16 referralCode;\\n    bool releaseUnderlying;\\n    uint256 maxStableRateBorrowSizePercent;\\n    uint256 reservesCount;\\n    address oracle;\\n    uint8 userEModeCategory;\\n    address priceOracleSentinel;\\n  }\\n\\n  struct ExecuteRepayParams {\\n    address asset;\\n    uint256 amount;\\n    InterestRateMode interestRateMode;\\n    address onBehalfOf;\\n    bool useATokens;\\n  }\\n\\n  struct ExecuteWithdrawParams {\\n    address asset;\\n    uint256 amount;\\n    address to;\\n    uint256 reservesCount;\\n    address oracle;\\n    uint8 userEModeCategory;\\n  }\\n\\n  struct ExecuteSetUserEModeParams {\\n    uint256 reservesCount;\\n    address oracle;\\n    uint8 categoryId;\\n  }\\n\\n  struct FinalizeTransferParams {\\n    address asset;\\n    address from;\\n    address to;\\n    uint256 amount;\\n    uint256 balanceFromBefore;\\n    uint256 balanceToBefore;\\n    uint256 reservesCount;\\n    address oracle;\\n    uint8 fromEModeCategory;\\n  }\\n\\n  struct FlashloanParams {\\n    address receiverAddress;\\n    address[] assets;\\n    uint256[] amounts;\\n    uint256[] interestRateModes;\\n    address onBehalfOf;\\n    bytes params;\\n    uint16 referralCode;\\n    uint256 flashLoanPremiumToProtocol;\\n    uint256 flashLoanPremiumTotal;\\n    uint256 maxStableRateBorrowSizePercent;\\n    uint256 reservesCount;\\n    address addressesProvider;\\n    uint8 userEModeCategory;\\n    bool isAuthorizedFlashBorrower;\\n  }\\n\\n  struct FlashloanSimpleParams {\\n    address receiverAddress;\\n    address asset;\\n    uint256 amount;\\n    bytes params;\\n    uint16 referralCode;\\n    uint256 flashLoanPremiumToProtocol;\\n    uint256 flashLoanPremiumTotal;\\n  }\\n\\n  struct FlashLoanRepaymentParams {\\n    uint256 amount;\\n    uint256 totalPremium;\\n    uint256 flashLoanPremiumToProtocol;\\n    address asset;\\n    address receiverAddress;\\n    uint16 referralCode;\\n  }\\n\\n  struct CalculateUserAccountDataParams {\\n    UserConfigurationMap userConfig;\\n    uint256 reservesCount;\\n    address user;\\n    address oracle;\\n    uint8 userEModeCategory;\\n  }\\n\\n  struct ValidateBorrowParams {\\n    ReserveCache reserveCache;\\n    UserConfigurationMap userConfig;\\n    address asset;\\n    address userAddress;\\n    uint256 amount;\\n    InterestRateMode interestRateMode;\\n    uint256 maxStableLoanPercent;\\n    uint256 reservesCount;\\n    address oracle;\\n    uint8 userEModeCategory;\\n    address priceOracleSentinel;\\n    bool isolationModeActive;\\n    address isolationModeCollateralAddress;\\n    uint256 isolationModeDebtCeiling;\\n  }\\n\\n  struct ValidateLiquidationCallParams {\\n    ReserveCache debtReserveCache;\\n    uint256 totalDebt;\\n    uint256 healthFactor;\\n    address priceOracleSentinel;\\n  }\\n\\n  struct CalculateInterestRatesParams {\\n    uint256 unbacked;\\n    uint256 liquidityAdded;\\n    uint256 liquidityTaken;\\n    uint256 totalStableDebt;\\n    uint256 totalVariableDebt;\\n    uint256 averageStableBorrowRate;\\n    uint256 reserveFactor;\\n    address reserve;\\n    address aToken;\\n  }\\n\\n  struct InitReserveParams {\\n    address asset;\\n    address aTokenAddress;\\n    address stableDebtAddress;\\n    address variableDebtAddress;\\n    address interestRateStrategyAddress;\\n    uint16 reservesCount;\\n    uint16 maxNumberReserves;\\n  }\\n}\\n\",\"keccak256\":\"0x771cb99fd8519c974f7e12130387c4d9a997a6e8d0ac10e4303b842fe53efa88\",\"license\":\"BUSL-1.1\"},\"@aave/core-v3/contracts/protocol/pool/DefaultReserveInterestRateStrategy.sol\":{\"content\":\"// SPDX-License-Identifier: BUSL-1.1\\npragma solidity ^0.8.10;\\n\\nimport {IERC20} from '../../dependencies/openzeppelin/contracts/IERC20.sol';\\nimport {WadRayMath} from '../libraries/math/WadRayMath.sol';\\nimport {PercentageMath} from '../libraries/math/PercentageMath.sol';\\nimport {DataTypes} from '../libraries/types/DataTypes.sol';\\nimport {Errors} from '../libraries/helpers/Errors.sol';\\nimport {IDefaultInterestRateStrategy} from '../../interfaces/IDefaultInterestRateStrategy.sol';\\nimport {IReserveInterestRateStrategy} from '../../interfaces/IReserveInterestRateStrategy.sol';\\nimport {IPoolAddressesProvider} from '../../interfaces/IPoolAddressesProvider.sol';\\n\\n/**\\n * @title DefaultReserveInterestRateStrategy contract\\n * @author Aave\\n * @notice Implements the calculation of the interest rates depending on the reserve state\\n * @dev The model of interest rate is based on 2 slopes, one before the `OPTIMAL_USAGE_RATIO`\\n * point of usage and another from that one to 100%.\\n * - An instance of this same contract, can't be used across different Aave markets, due to the caching\\n *   of the PoolAddressesProvider\\n */\\ncontract DefaultReserveInterestRateStrategy is IDefaultInterestRateStrategy {\\n  using WadRayMath for uint256;\\n  using PercentageMath for uint256;\\n\\n  /// @inheritdoc IDefaultInterestRateStrategy\\n  uint256 public immutable OPTIMAL_USAGE_RATIO;\\n\\n  /// @inheritdoc IDefaultInterestRateStrategy\\n  uint256 public immutable OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO;\\n\\n  /// @inheritdoc IDefaultInterestRateStrategy\\n  uint256 public immutable MAX_EXCESS_USAGE_RATIO;\\n\\n  /// @inheritdoc IDefaultInterestRateStrategy\\n  uint256 public immutable MAX_EXCESS_STABLE_TO_TOTAL_DEBT_RATIO;\\n\\n  IPoolAddressesProvider public immutable ADDRESSES_PROVIDER;\\n\\n  // Base variable borrow rate when usage rate = 0. Expressed in ray\\n  uint256 internal immutable _baseVariableBorrowRate;\\n\\n  // Slope of the variable interest curve when usage ratio > 0 and <= OPTIMAL_USAGE_RATIO. Expressed in ray\\n  uint256 internal immutable _variableRateSlope1;\\n\\n  // Slope of the variable interest curve when usage ratio > OPTIMAL_USAGE_RATIO. Expressed in ray\\n  uint256 internal immutable _variableRateSlope2;\\n\\n  // Slope of the stable interest curve when usage ratio > 0 and <= OPTIMAL_USAGE_RATIO. Expressed in ray\\n  uint256 internal immutable _stableRateSlope1;\\n\\n  // Slope of the stable interest curve when usage ratio > OPTIMAL_USAGE_RATIO. Expressed in ray\\n  uint256 internal immutable _stableRateSlope2;\\n\\n  // Premium on top of `_variableRateSlope1` for base stable borrowing rate\\n  uint256 internal immutable _baseStableRateOffset;\\n\\n  // Additional premium applied to stable rate when stable debt surpass `OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO`\\n  uint256 internal immutable _stableRateExcessOffset;\\n\\n  /**\\n   * @dev Constructor.\\n   * @param provider The address of the PoolAddressesProvider contract\\n   * @param optimalUsageRatio The optimal usage ratio\\n   * @param baseVariableBorrowRate The base variable borrow rate\\n   * @param variableRateSlope1 The variable rate slope below optimal usage ratio\\n   * @param variableRateSlope2 The variable rate slope above optimal usage ratio\\n   * @param stableRateSlope1 The stable rate slope below optimal usage ratio\\n   * @param stableRateSlope2 The stable rate slope above optimal usage ratio\\n   * @param baseStableRateOffset The premium on top of variable rate for base stable borrowing rate\\n   * @param stableRateExcessOffset The premium on top of stable rate when there stable debt surpass the threshold\\n   * @param optimalStableToTotalDebtRatio The optimal stable debt to total debt ratio of the reserve\\n   */\\n  constructor(\\n    IPoolAddressesProvider provider,\\n    uint256 optimalUsageRatio,\\n    uint256 baseVariableBorrowRate,\\n    uint256 variableRateSlope1,\\n    uint256 variableRateSlope2,\\n    uint256 stableRateSlope1,\\n    uint256 stableRateSlope2,\\n    uint256 baseStableRateOffset,\\n    uint256 stableRateExcessOffset,\\n    uint256 optimalStableToTotalDebtRatio\\n  ) {\\n    require(WadRayMath.RAY >= optimalUsageRatio, Errors.INVALID_OPTIMAL_USAGE_RATIO);\\n    require(\\n      WadRayMath.RAY >= optimalStableToTotalDebtRatio,\\n      Errors.INVALID_OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO\\n    );\\n    OPTIMAL_USAGE_RATIO = optimalUsageRatio;\\n    MAX_EXCESS_USAGE_RATIO = WadRayMath.RAY - optimalUsageRatio;\\n    OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO = optimalStableToTotalDebtRatio;\\n    MAX_EXCESS_STABLE_TO_TOTAL_DEBT_RATIO = WadRayMath.RAY - optimalStableToTotalDebtRatio;\\n    ADDRESSES_PROVIDER = provider;\\n    _baseVariableBorrowRate = baseVariableBorrowRate;\\n    _variableRateSlope1 = variableRateSlope1;\\n    _variableRateSlope2 = variableRateSlope2;\\n    _stableRateSlope1 = stableRateSlope1;\\n    _stableRateSlope2 = stableRateSlope2;\\n    _baseStableRateOffset = baseStableRateOffset;\\n    _stableRateExcessOffset = stableRateExcessOffset;\\n  }\\n\\n  /// @inheritdoc IDefaultInterestRateStrategy\\n  function getVariableRateSlope1() external view returns (uint256) {\\n    return _variableRateSlope1;\\n  }\\n\\n  /// @inheritdoc IDefaultInterestRateStrategy\\n  function getVariableRateSlope2() external view returns (uint256) {\\n    return _variableRateSlope2;\\n  }\\n\\n  /// @inheritdoc IDefaultInterestRateStrategy\\n  function getStableRateSlope1() external view returns (uint256) {\\n    return _stableRateSlope1;\\n  }\\n\\n  /// @inheritdoc IDefaultInterestRateStrategy\\n  function getStableRateSlope2() external view returns (uint256) {\\n    return _stableRateSlope2;\\n  }\\n\\n  /// @inheritdoc IDefaultInterestRateStrategy\\n  function getStableRateExcessOffset() external view returns (uint256) {\\n    return _stableRateExcessOffset;\\n  }\\n\\n  /// @inheritdoc IDefaultInterestRateStrategy\\n  function getBaseStableBorrowRate() public view returns (uint256) {\\n    return _variableRateSlope1 + _baseStableRateOffset;\\n  }\\n\\n  /// @inheritdoc IDefaultInterestRateStrategy\\n  function getBaseVariableBorrowRate() external view override returns (uint256) {\\n    return _baseVariableBorrowRate;\\n  }\\n\\n  /// @inheritdoc IDefaultInterestRateStrategy\\n  function getMaxVariableBorrowRate() external view override returns (uint256) {\\n    return _baseVariableBorrowRate + _variableRateSlope1 + _variableRateSlope2;\\n  }\\n\\n  struct CalcInterestRatesLocalVars {\\n    uint256 availableLiquidity;\\n    uint256 totalDebt;\\n    uint256 currentVariableBorrowRate;\\n    uint256 currentStableBorrowRate;\\n    uint256 currentLiquidityRate;\\n    uint256 borrowUsageRatio;\\n    uint256 supplyUsageRatio;\\n    uint256 stableToTotalDebtRatio;\\n    uint256 availableLiquidityPlusDebt;\\n  }\\n\\n  /// @inheritdoc IReserveInterestRateStrategy\\n  function calculateInterestRates(\\n    DataTypes.CalculateInterestRatesParams memory params\\n  ) public view override returns (uint256, uint256, uint256) {\\n    CalcInterestRatesLocalVars memory vars;\\n\\n    vars.totalDebt = params.totalStableDebt + params.totalVariableDebt;\\n\\n    vars.currentLiquidityRate = 0;\\n    vars.currentVariableBorrowRate = _baseVariableBorrowRate;\\n    vars.currentStableBorrowRate = getBaseStableBorrowRate();\\n\\n    if (vars.totalDebt != 0) {\\n      vars.stableToTotalDebtRatio = params.totalStableDebt.rayDiv(vars.totalDebt);\\n      vars.availableLiquidity =\\n        IERC20(params.reserve).balanceOf(params.aToken) +\\n        params.liquidityAdded -\\n        params.liquidityTaken;\\n\\n      vars.availableLiquidityPlusDebt = vars.availableLiquidity + vars.totalDebt;\\n      vars.borrowUsageRatio = vars.totalDebt.rayDiv(vars.availableLiquidityPlusDebt);\\n      vars.supplyUsageRatio = vars.totalDebt.rayDiv(\\n        vars.availableLiquidityPlusDebt + params.unbacked\\n      );\\n    }\\n\\n    if (vars.borrowUsageRatio > OPTIMAL_USAGE_RATIO) {\\n      uint256 excessBorrowUsageRatio = (vars.borrowUsageRatio - OPTIMAL_USAGE_RATIO).rayDiv(\\n        MAX_EXCESS_USAGE_RATIO\\n      );\\n\\n      vars.currentStableBorrowRate +=\\n        _stableRateSlope1 +\\n        _stableRateSlope2.rayMul(excessBorrowUsageRatio);\\n\\n      vars.currentVariableBorrowRate +=\\n        _variableRateSlope1 +\\n        _variableRateSlope2.rayMul(excessBorrowUsageRatio);\\n    } else {\\n      vars.currentStableBorrowRate += _stableRateSlope1.rayMul(vars.borrowUsageRatio).rayDiv(\\n        OPTIMAL_USAGE_RATIO\\n      );\\n\\n      vars.currentVariableBorrowRate += _variableRateSlope1.rayMul(vars.borrowUsageRatio).rayDiv(\\n        OPTIMAL_USAGE_RATIO\\n      );\\n    }\\n\\n    if (vars.stableToTotalDebtRatio > OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO) {\\n      uint256 excessStableDebtRatio = (vars.stableToTotalDebtRatio -\\n        OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO).rayDiv(MAX_EXCESS_STABLE_TO_TOTAL_DEBT_RATIO);\\n      vars.currentStableBorrowRate += _stableRateExcessOffset.rayMul(excessStableDebtRatio);\\n    }\\n\\n    vars.currentLiquidityRate = _getOverallBorrowRate(\\n      params.totalStableDebt,\\n      params.totalVariableDebt,\\n      vars.currentVariableBorrowRate,\\n      params.averageStableBorrowRate\\n    ).rayMul(vars.supplyUsageRatio).percentMul(\\n        PercentageMath.PERCENTAGE_FACTOR - params.reserveFactor\\n      );\\n\\n    return (\\n      vars.currentLiquidityRate,\\n      vars.currentStableBorrowRate,\\n      vars.currentVariableBorrowRate\\n    );\\n  }\\n\\n  /**\\n   * @dev Calculates the overall borrow rate as the weighted average between the total variable debt and total stable\\n   * debt\\n   * @param totalStableDebt The total borrowed from the reserve at a stable rate\\n   * @param totalVariableDebt The total borrowed from the reserve at a variable rate\\n   * @param currentVariableBorrowRate The current variable borrow rate of the reserve\\n   * @param currentAverageStableBorrowRate The current weighted average of all the stable rate loans\\n   * @return The weighted averaged borrow rate\\n   */\\n  function _getOverallBorrowRate(\\n    uint256 totalStableDebt,\\n    uint256 totalVariableDebt,\\n    uint256 currentVariableBorrowRate,\\n    uint256 currentAverageStableBorrowRate\\n  ) internal pure returns (uint256) {\\n    uint256 totalDebt = totalStableDebt + totalVariableDebt;\\n\\n    if (totalDebt == 0) return 0;\\n\\n    uint256 weightedVariableRate = totalVariableDebt.wadToRay().rayMul(currentVariableBorrowRate);\\n\\n    uint256 weightedStableRate = totalStableDebt.wadToRay().rayMul(currentAverageStableBorrowRate);\\n\\n    uint256 overallBorrowRate = (weightedVariableRate + weightedStableRate).rayDiv(\\n      totalDebt.wadToRay()\\n    );\\n\\n    return overallBorrowRate;\\n  }\\n}\\n\",\"keccak256\":\"0x01d746c72a9ace142997f4f66226b3a0005fbdc7b0e828915b837e156c4f520a\",\"license\":\"BUSL-1.1\"}},\"version\":1}",
-  "bytecode": "0x61020060405234801561001157600080fd5b5060405162000f7538038062000f7583398101604081905261003291610146565b886b033b2e3c9fd0803ce8000000101560405180604001604052806002815260200161383360f01b815250906100845760405162461bcd60e51b815260040161007b91906101d1565b60405180910390fd5b50806b033b2e3c9fd0803ce80000001015604051806040016040528060028152602001610e0d60f21b815250906100ce5760405162461bcd60e51b815260040161007b91906101d1565b5060808990526100ea896b033b2e3c9fd0803ce8000000610226565b60c05260a0819052610108816b033b2e3c9fd0803ce8000000610226565b60e052506001600160a01b0390981661010052610120959095526101409390935261016091909152610180526101a0526101c052506101e05261024b565b6000806000806000806000806000806101408b8d03121561016657600080fd5b8a516001600160a01b038116811461017d57600080fd5b809a505060208b0151985060408b0151975060608b0151965060808b0151955060a08b0151945060c08b0151935060e08b015192506101008b015191506101208b015190509295989b9194979a5092959850565b600060208083528351808285015260005b818110156101fe578581018301518582016040015282016101e2565b81811115610210576000604083870101525b50601f01601f1916929092016040019392505050565b60008282101561024657634e487b7160e01b600052601160045260246000fd5b500390565b60805160a05160c05160e05161010051610120516101405161016051610180516101a0516101c0516101e051610c0d62000368600039600081816102710152610821015260006108c601526000818161017201526105ec0152600081816102970152818161061701526106ec0152600081816102bd0152818161030c0152610654015260008181610142015281816103300152818161067f0152818161075e01526108e70152600081816101980152818161035101526103fa0152600060f40152600081816102e601526107cb01526000818161024501526105900152600081816101e80152818161079a01526107ec0152600081816101c10152818161055f015281816105b1015281816106c301526107380152610c0d6000f3fe608060405234801561001057600080fd5b50600436106100ea5760003560e01c8063a58987091161008c578063bc62690811610066578063bc6269081461026f578063d5cd739114610295578063f4202409146102bb578063fe5fd698146102e157600080fd5b8063a589870914610212578063a9c622f814610240578063acd786861461026757600080fd5b806334762ca5116100c857806334762ca51461019657806354c365c6146101bc5780636fb92589146101e357806380031e371461020a57600080fd5b80630542975c146100ef5780630b3429a21461014057806314e32da414610170575b600080fd5b6101167f000000000000000000000000000000000000000000000000000000000000000081565b60405173ffffffffffffffffffffffffffffffffffffffff90911681526020015b60405180910390f35b7f00000000000000000000000000000000000000000000000000000000000000005b604051908152602001610137565b7f0000000000000000000000000000000000000000000000000000000000000000610162565b7f0000000000000000000000000000000000000000000000000000000000000000610162565b6101627f000000000000000000000000000000000000000000000000000000000000000081565b6101627f000000000000000000000000000000000000000000000000000000000000000081565b610162610308565b610225610220366004610adb565b610384565b60408051938452602084019290925290820152606001610137565b6101627f000000000000000000000000000000000000000000000000000000000000000081565b6101626108bf565b7f0000000000000000000000000000000000000000000000000000000000000000610162565b7f0000000000000000000000000000000000000000000000000000000000000000610162565b7f0000000000000000000000000000000000000000000000000000000000000000610162565b6101627f000000000000000000000000000000000000000000000000000000000000000081565b60007f00000000000000000000000000000000000000000000000000000000000000006103757f00000000000000000000000000000000000000000000000000000000000000007f0000000000000000000000000000000000000000000000000000000000000000610b8f565b61037f9190610b8f565b905090565b60008060006103d86040518061012001604052806000815260200160008152602001600081526020016000815260200160008152602001600081526020016000815260200160008152602001600081525090565b846080015185606001516103ec9190610b8f565b6020820152600060808201527f000000000000000000000000000000000000000000000000000000000000000060408201526104266108bf565b606082015260208101511561055d57602081015160608601516104489161090b565b60e08083019190915260408087015160208801519288015161010089015192517f70a0823100000000000000000000000000000000000000000000000000000000815273ffffffffffffffffffffffffffffffffffffffff938416600482015291939216906370a0823190602401602060405180830381865afa1580156104d3573d6000803e3d6000fd5b505050506040513d601f19601f820116820180604052508101906104f79190610ba7565b6105019190610b8f565b61050b9190610bc0565b808252602082015161051c91610b8f565b610100820181905260208201516105329161090b565b60a082015284516101008201516105579161054c91610b8f565b60208301519061090b565b60c08201525b7f00000000000000000000000000000000000000000000000000000000000000008160a0015111156106be5760006105e57f00000000000000000000000000000000000000000000000000000000000000007f00000000000000000000000000000000000000000000000000000000000000008460a001516105df9190610bc0565b9061090b565b90506106117f00000000000000000000000000000000000000000000000000000000000000008261094a565b61063b907f0000000000000000000000000000000000000000000000000000000000000000610b8f565b8260600181815161064c9190610b8f565b9052506106797f00000000000000000000000000000000000000000000000000000000000000008261094a565b6106a3907f0000000000000000000000000000000000000000000000000000000000000000610b8f565b826040018181516106b49190610b8f565b9052506107989050565b6107197f00000000000000000000000000000000000000000000000000000000000000006105df8360a001517f000000000000000000000000000000000000000000000000000000000000000061094a90919063ffffffff16565b8160600181815161072a9190610b8f565b90525060a0810151610783907f0000000000000000000000000000000000000000000000000000000000000000906105df907f00000000000000000000000000000000000000000000000000000000000000009061094a565b816040018181516107949190610b8f565b9052505b7f00000000000000000000000000000000000000000000000000000000000000008160e00151111561085c57600061081a7f00000000000000000000000000000000000000000000000000000000000000007f00000000000000000000000000000000000000000000000000000000000000008460e001516105df9190610bc0565b90506108467f00000000000000000000000000000000000000000000000000000000000000008261094a565b826060018181516108579190610b8f565b905250505b6108a18560c001516127106108719190610bc0565b61089b8360c0015161089589606001518a6080015187604001518c60a001516109a1565b9061094a565b90610a08565b60808201819052606082015160409092015190969195509350915050565b600061037f7f00000000000000000000000000000000000000000000000000000000000000007f0000000000000000000000000000000000000000000000000000000000000000610b8f565b600081156b033b2e3c9fd0803ce80000006002840419048411171561092f57600080fd5b506b033b2e3c9fd0803ce80000009190910260028204010490565b600081157ffffffffffffffffffffffffffffffffffffffffffe6268e1b017bfe18bffffff8390048411151761097f57600080fd5b506b033b2e3c9fd0803ce800000091026b019d971e4fe8401e74000000010490565b6000806109ae8587610b8f565b9050806109bf576000915050610a00565b60006109ce8561089588610a4b565b905060006109df856108958a610a4b565b905060006109f96109ef85610a4b565b6105df8486610b8f565b9450505050505b949350505050565b600081157fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffec7783900484111517610a3d57600080fd5b506127109102611388010490565b633b9aca008181029081048214610a6157600080fd5b919050565b604051610120810167ffffffffffffffff81118282101715610ab1577f4e487b7100000000000000000000000000000000000000000000000000000000600052604160045260246000fd5b60405290565b803573ffffffffffffffffffffffffffffffffffffffff81168114610a6157600080fd5b60006101208284031215610aee57600080fd5b610af6610a66565b823581526020830135602082015260408301356040820152606083013560608201526080830135608082015260a083013560a082015260c083013560c0820152610b4260e08401610ab7565b60e0820152610100610b55818501610ab7565b908201529392505050565b7f4e487b7100000000000000000000000000000000000000000000000000000000600052601160045260246000fd5b60008219821115610ba257610ba2610b60565b500190565b600060208284031215610bb957600080fd5b5051919050565b600082821015610bd257610bd2610b60565b50039056fea26469706673582212202429128531aba381237b8b5630526b46e16fae03dbb463f5a83786873419101a64736f6c634300080a0033",
-  "deployedBytecode": "0x608060405234801561001057600080fd5b50600436106100ea5760003560e01c8063a58987091161008c578063bc62690811610066578063bc6269081461026f578063d5cd739114610295578063f4202409146102bb578063fe5fd698146102e157600080fd5b8063a589870914610212578063a9c622f814610240578063acd786861461026757600080fd5b806334762ca5116100c857806334762ca51461019657806354c365c6146101bc5780636fb92589146101e357806380031e371461020a57600080fd5b80630542975c146100ef5780630b3429a21461014057806314e32da414610170575b600080fd5b6101167f000000000000000000000000000000000000000000000000000000000000000081565b60405173ffffffffffffffffffffffffffffffffffffffff90911681526020015b60405180910390f35b7f00000000000000000000000000000000000000000000000000000000000000005b604051908152602001610137565b7f0000000000000000000000000000000000000000000000000000000000000000610162565b7f0000000000000000000000000000000000000000000000000000000000000000610162565b6101627f000000000000000000000000000000000000000000000000000000000000000081565b6101627f000000000000000000000000000000000000000000000000000000000000000081565b610162610308565b610225610220366004610adb565b610384565b60408051938452602084019290925290820152606001610137565b6101627f000000000000000000000000000000000000000000000000000000000000000081565b6101626108bf565b7f0000000000000000000000000000000000000000000000000000000000000000610162565b7f0000000000000000000000000000000000000000000000000000000000000000610162565b7f0000000000000000000000000000000000000000000000000000000000000000610162565b6101627f000000000000000000000000000000000000000000000000000000000000000081565b60007f00000000000000000000000000000000000000000000000000000000000000006103757f00000000000000000000000000000000000000000000000000000000000000007f0000000000000000000000000000000000000000000000000000000000000000610b8f565b61037f9190610b8f565b905090565b60008060006103d86040518061012001604052806000815260200160008152602001600081526020016000815260200160008152602001600081526020016000815260200160008152602001600081525090565b846080015185606001516103ec9190610b8f565b6020820152600060808201527f000000000000000000000000000000000000000000000000000000000000000060408201526104266108bf565b606082015260208101511561055d57602081015160608601516104489161090b565b60e08083019190915260408087015160208801519288015161010089015192517f70a0823100000000000000000000000000000000000000000000000000000000815273ffffffffffffffffffffffffffffffffffffffff938416600482015291939216906370a0823190602401602060405180830381865afa1580156104d3573d6000803e3d6000fd5b505050506040513d601f19601f820116820180604052508101906104f79190610ba7565b6105019190610b8f565b61050b9190610bc0565b808252602082015161051c91610b8f565b610100820181905260208201516105329161090b565b60a082015284516101008201516105579161054c91610b8f565b60208301519061090b565b60c08201525b7f00000000000000000000000000000000000000000000000000000000000000008160a0015111156106be5760006105e57f00000000000000000000000000000000000000000000000000000000000000007f00000000000000000000000000000000000000000000000000000000000000008460a001516105df9190610bc0565b9061090b565b90506106117f00000000000000000000000000000000000000000000000000000000000000008261094a565b61063b907f0000000000000000000000000000000000000000000000000000000000000000610b8f565b8260600181815161064c9190610b8f565b9052506106797f00000000000000000000000000000000000000000000000000000000000000008261094a565b6106a3907f0000000000000000000000000000000000000000000000000000000000000000610b8f565b826040018181516106b49190610b8f565b9052506107989050565b6107197f00000000000000000000000000000000000000000000000000000000000000006105df8360a001517f000000000000000000000000000000000000000000000000000000000000000061094a90919063ffffffff16565b8160600181815161072a9190610b8f565b90525060a0810151610783907f0000000000000000000000000000000000000000000000000000000000000000906105df907f00000000000000000000000000000000000000000000000000000000000000009061094a565b816040018181516107949190610b8f565b9052505b7f00000000000000000000000000000000000000000000000000000000000000008160e00151111561085c57600061081a7f00000000000000000000000000000000000000000000000000000000000000007f00000000000000000000000000000000000000000000000000000000000000008460e001516105df9190610bc0565b90506108467f00000000000000000000000000000000000000000000000000000000000000008261094a565b826060018181516108579190610b8f565b905250505b6108a18560c001516127106108719190610bc0565b61089b8360c0015161089589606001518a6080015187604001518c60a001516109a1565b9061094a565b90610a08565b60808201819052606082015160409092015190969195509350915050565b600061037f7f00000000000000000000000000000000000000000000000000000000000000007f0000000000000000000000000000000000000000000000000000000000000000610b8f565b600081156b033b2e3c9fd0803ce80000006002840419048411171561092f57600080fd5b506b033b2e3c9fd0803ce80000009190910260028204010490565b600081157ffffffffffffffffffffffffffffffffffffffffffe6268e1b017bfe18bffffff8390048411151761097f57600080fd5b506b033b2e3c9fd0803ce800000091026b019d971e4fe8401e74000000010490565b6000806109ae8587610b8f565b9050806109bf576000915050610a00565b60006109ce8561089588610a4b565b905060006109df856108958a610a4b565b905060006109f96109ef85610a4b565b6105df8486610b8f565b9450505050505b949350505050565b600081157fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffec7783900484111517610a3d57600080fd5b506127109102611388010490565b633b9aca008181029081048214610a6157600080fd5b919050565b604051610120810167ffffffffffffffff81118282101715610ab1577f4e487b7100000000000000000000000000000000000000000000000000000000600052604160045260246000fd5b60405290565b803573ffffffffffffffffffffffffffffffffffffffff81168114610a6157600080fd5b60006101208284031215610aee57600080fd5b610af6610a66565b823581526020830135602082015260408301356040820152606083013560608201526080830135608082015260a083013560a082015260c083013560c0820152610b4260e08401610ab7565b60e0820152610100610b55818501610ab7565b908201529392505050565b7f4e487b7100000000000000000000000000000000000000000000000000000000600052601160045260246000fd5b60008219821115610ba257610ba2610b60565b500190565b600060208284031215610bb957600080fd5b5051919050565b600082821015610bd257610bd2610b60565b50039056fea26469706673582212202429128531aba381237b8b5630526b46e16fae03dbb463f5a83786873419101a64736f6c634300080a0033",
-  "devdoc": {
-    "author": "Aave",
-    "details": "The model of interest rate is based on 2 slopes, one before the `OPTIMAL_USAGE_RATIO` point of usage and another from that one to 100%. - An instance of this same contract, can't be used across different Aave markets, due to the caching   of the PoolAddressesProvider",
-    "kind": "dev",
-    "methods": {
-      "calculateInterestRates((uint256,uint256,uint256,uint256,uint256,uint256,uint256,address,address))": {
-        "params": {
-          "params": "The parameters needed to calculate interest rates"
-        },
-        "returns": {
-          "_0": "liquidityRate The liquidity rate expressed in rays",
-          "_1": "stableBorrowRate The stable borrow rate expressed in rays",
-          "_2": "variableBorrowRate The variable borrow rate expressed in rays"
-        }
-      },
-      "constructor": {
-        "details": "Constructor.",
-        "params": {
-          "baseStableRateOffset": "The premium on top of variable rate for base stable borrowing rate",
-          "baseVariableBorrowRate": "The base variable borrow rate",
-          "optimalStableToTotalDebtRatio": "The optimal stable debt to total debt ratio of the reserve",
-          "optimalUsageRatio": "The optimal usage ratio",
-          "provider": "The address of the PoolAddressesProvider contract",
-          "stableRateExcessOffset": "The premium on top of stable rate when there stable debt surpass the threshold",
-          "stableRateSlope1": "The stable rate slope below optimal usage ratio",
-          "stableRateSlope2": "The stable rate slope above optimal usage ratio",
-          "variableRateSlope1": "The variable rate slope below optimal usage ratio",
-          "variableRateSlope2": "The variable rate slope above optimal usage ratio"
-        }
-      },
-      "getBaseStableBorrowRate()": {
-        "returns": {
-          "_0": "The base stable borrow rate, expressed in ray"
-        }
-      },
-      "getBaseVariableBorrowRate()": {
-        "returns": {
-          "_0": "The base variable borrow rate, expressed in ray"
-        }
-      },
-      "getMaxVariableBorrowRate()": {
-        "returns": {
-          "_0": "The maximum variable borrow rate, expressed in ray"
-        }
-      },
-      "getStableRateExcessOffset()": {
-        "details": "It's an additional premium applied to the stable when stable debt > OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO",
-        "returns": {
-          "_0": "The stable rate excess offset, expressed in ray"
-        }
-      },
-      "getStableRateSlope1()": {
-        "details": "It's the stable rate when usage ratio > 0 and <= OPTIMAL_USAGE_RATIO",
-        "returns": {
-          "_0": "The stable rate slope, expressed in ray"
-        }
-      },
-      "getStableRateSlope2()": {
-        "details": "It's the variable rate when usage ratio > OPTIMAL_USAGE_RATIO",
-        "returns": {
-          "_0": "The stable rate slope, expressed in ray"
-        }
-      },
-      "getVariableRateSlope1()": {
-        "details": "It's the variable rate when usage ratio > 0 and <= OPTIMAL_USAGE_RATIO",
-        "returns": {
-          "_0": "The variable rate slope, expressed in ray"
-        }
-      },
-      "getVariableRateSlope2()": {
-        "details": "It's the variable rate when usage ratio > OPTIMAL_USAGE_RATIO",
-        "returns": {
-          "_0": "The variable rate slope, expressed in ray"
-        }
-      }
-    },
-    "stateVariables": {
-      "ADDRESSES_PROVIDER": {
-        "return": "The address of the PoolAddressesProvider contract",
-        "returns": {
-          "_0": "The address of the PoolAddressesProvider contract"
-        }
-      },
-      "MAX_EXCESS_STABLE_TO_TOTAL_DEBT_RATIO": {
-        "details": "It's always equal to 1-optimal stable to total debt ratio (added as constant for gas optimizations)",
-        "return": "The max excess stable to total debt ratio, expressed in ray.",
-        "returns": {
-          "_0": "The max excess stable to total debt ratio, expressed in ray."
-        }
-      },
-      "MAX_EXCESS_USAGE_RATIO": {
-        "details": "It's always equal to 1-optimal usage ratio (added as constant for gas optimizations)",
-        "return": "The max excess usage ratio, expressed in ray.",
-        "returns": {
-          "_0": "The max excess usage ratio, expressed in ray."
-        }
-      },
-      "OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO": {
-        "return": "The optimal stable to total debt ratio, expressed in ray.",
-        "returns": {
-          "_0": "The optimal stable to total debt ratio, expressed in ray."
-        }
-      },
-      "OPTIMAL_USAGE_RATIO": {
-        "return": "The optimal usage ratio, expressed in ray.",
-        "returns": {
-          "_0": "The optimal usage ratio, expressed in ray."
-        }
-      }
-    },
-    "title": "DefaultReserveInterestRateStrategy contract",
-    "version": 1
-  },
-  "userdoc": {
-    "kind": "user",
-    "methods": {
-      "ADDRESSES_PROVIDER()": {
-        "notice": "Returns the address of the PoolAddressesProvider"
-      },
-      "MAX_EXCESS_STABLE_TO_TOTAL_DEBT_RATIO()": {
-        "notice": "Returns the excess stable debt ratio above the optimal."
-      },
-      "MAX_EXCESS_USAGE_RATIO()": {
-        "notice": "Returns the excess usage ratio above the optimal."
-      },
-      "OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO()": {
-        "notice": "Returns the optimal stable to total debt ratio of the reserve."
-      },
-      "OPTIMAL_USAGE_RATIO()": {
-        "notice": "Returns the usage ratio at which the pool aims to obtain most competitive borrow rates."
-      },
-      "calculateInterestRates((uint256,uint256,uint256,uint256,uint256,uint256,uint256,address,address))": {
-        "notice": "Calculates the interest rates depending on the reserve's state and configurations"
-      },
-      "getBaseStableBorrowRate()": {
-        "notice": "Returns the base stable borrow rate"
-      },
-      "getBaseVariableBorrowRate()": {
-        "notice": "Returns the base variable borrow rate"
-      },
-      "getMaxVariableBorrowRate()": {
-        "notice": "Returns the maximum variable borrow rate"
-      },
-      "getStableRateExcessOffset()": {
-        "notice": "Returns the stable rate excess offset"
-      },
-      "getStableRateSlope1()": {
-        "notice": "Returns the stable rate slope below optimal usage ratio"
-      },
-      "getStableRateSlope2()": {
-        "notice": "Returns the stable rate slope above optimal usage ratio"
-      },
-      "getVariableRateSlope1()": {
-        "notice": "Returns the variable rate slope below optimal usage ratio"
-      },
-      "getVariableRateSlope2()": {
-        "notice": "Returns the variable rate slope above optimal usage ratio"
-      }
-    },
-    "notice": "Implements the calculation of the interest rates depending on the reserve state",
-    "version": 1
-  },
-  "storageLayout": {
-    "storage": [],
-    "types": null
-  }
-}
diff --git a/apps/frontend/src/hooks/aave/constants.ts b/apps/frontend/src/hooks/aave/constants.ts
new file mode 100644
index 000000000..596d3e9b9
--- /dev/null
+++ b/apps/frontend/src/hooks/aave/constants.ts
@@ -0,0 +1,2 @@
+export const BIG_NUMBER_PRECISION_TWENTY_SEVEN = 27;
+export const BIG_NUMBER_PRECISION_EIGHTEEN = 18;
diff --git a/apps/frontend/src/hooks/aave/useAaveRates.tsx b/apps/frontend/src/hooks/aave/useAaveRates.tsx
index b05069b49..9e5bebd29 100644
--- a/apps/frontend/src/hooks/aave/useAaveRates.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveRates.tsx
@@ -1,143 +1,300 @@
-import { RAY_DECIMALS } from '@aave/math-utils';
+import { useEffect, useMemo, useState } from 'react';
 
-import { useEffect, useState } from 'react';
-
-import { BigNumber, Contract } from 'ethers';
+import { Contract, utils } from 'ethers';
 import { formatUnits } from 'ethers/lib/utils';
 import { useSearchParams } from 'react-router-dom';
 
 import { useAccount } from '../useAccount';
-import rateStrategy from './ReserveStrategy-rateStrategyStableOne.json';
-import { useAaveReservesData } from './useAaveReservesData';
+import {
+  BIG_NUMBER_PRECISION_EIGHTEEN,
+  BIG_NUMBER_PRECISION_TWENTY_SEVEN,
+} from './constants';
+import { Reserve, useAaveReservesData } from './useAaveReservesData';
+
+const INTEREST_RATE_STRATEGY_ABI = [
+  {
+    inputs: [
+      {
+        internalType: 'contract IPoolAddressesProvider',
+        name: 'provider',
+        type: 'address',
+      },
+      {
+        internalType: 'uint256',
+        name: 'optimalUsageRatio',
+        type: 'uint256',
+      },
+      {
+        internalType: 'uint256',
+        name: 'baseVariableBorrowRate',
+        type: 'uint256',
+      },
+      {
+        internalType: 'uint256',
+        name: 'variableRateSlope1',
+        type: 'uint256',
+      },
+      {
+        internalType: 'uint256',
+        name: 'variableRateSlope2',
+        type: 'uint256',
+      },
+    ],
+    stateMutability: 'nonpayable',
+    type: 'constructor',
+  },
+  {
+    inputs: [],
+    name: 'ADDRESSES_PROVIDER',
+    outputs: [
+      {
+        internalType: 'contract IPoolAddressesProvider',
+        name: '',
+        type: 'address',
+      },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'MAX_EXCESS_USAGE_RATIO',
+    outputs: [
+      {
+        internalType: 'uint256',
+        name: '',
+        type: 'uint256',
+      },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'OPTIMAL_USAGE_RATIO',
+    outputs: [
+      {
+        internalType: 'uint256',
+        name: '',
+        type: 'uint256',
+      },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [
+      {
+        components: [
+          {
+            internalType: 'uint256',
+            name: 'unbacked',
+            type: 'uint256',
+          },
+          {
+            internalType: 'uint256',
+            name: 'liquidityAdded',
+            type: 'uint256',
+          },
+          {
+            internalType: 'uint256',
+            name: 'liquidityTaken',
+            type: 'uint256',
+          },
+          {
+            internalType: 'uint256',
+            name: 'totalVariableDebt',
+            type: 'uint256',
+          },
+          {
+            internalType: 'uint256',
+            name: 'reserveFactor',
+            type: 'uint256',
+          },
+          {
+            internalType: 'address',
+            name: 'reserve',
+            type: 'address',
+          },
+          {
+            internalType: 'address',
+            name: 'aToken',
+            type: 'address',
+          },
+        ],
+        internalType: 'struct DataTypes.CalculateInterestRatesParams',
+        name: 'params',
+        type: 'tuple',
+      },
+    ],
+    name: 'calculateInterestRates',
+    outputs: [
+      {
+        internalType: 'uint256',
+        name: '',
+        type: 'uint256',
+      },
+      {
+        internalType: 'uint256',
+        name: '',
+        type: 'uint256',
+      },
+      {
+        internalType: 'uint256',
+        name: '',
+        type: 'uint256',
+      },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'getBaseVariableBorrowRate',
+    outputs: [
+      {
+        internalType: 'uint256',
+        name: '',
+        type: 'uint256',
+      },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'getMaxVariableBorrowRate',
+    outputs: [
+      {
+        internalType: 'uint256',
+        name: '',
+        type: 'uint256',
+      },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'getVariableRateSlope1',
+    outputs: [
+      {
+        internalType: 'uint256',
+        name: '',
+        type: 'uint256',
+      },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'getVariableRateSlope2',
+    outputs: [
+      {
+        internalType: 'uint256',
+        name: '',
+        type: 'uint256',
+      },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+];
 
-export interface IRatesDataResult {
+export interface RatesDataResult {
   currentUsageRatio: string;
-  baseStableBorrowRate: string;
   optimalUsageRatio: string;
   baseVariableBorrowRate: string;
   variableRateSlope1: string;
   variableRateSlope2: string;
-  stableRateSlope1: string;
-  stableRateSlope2: string;
-  stableRateExcessOffset: string;
-  optimalStableToTotalDebtRatio: string;
   underlyingAsset: string;
   name: string;
   symbol: string;
   decimals: string;
 }
 
-function calculateUtilizationRate(
+const calculateUtilizationRate = (
+  decimals: number,
   totalDebt: string,
   availableLiquidity: string,
-): string {
-  // Convert inputs to BigNumber
-  const _totalDebt: BigNumber = BigNumber.from(totalDebt);
-  const _liquidity: BigNumber = BigNumber.from(availableLiquidity);
-
-  return _totalDebt.div(_totalDebt.add(_liquidity)).toString();
-}
+): bigint => {
+  // Create BigNumber instances
+  const totalBorrow = BigInt(utils.parseUnits(totalDebt, decimals).toString());
+  const totalSupply = BigInt(availableLiquidity) + totalBorrow;
+  // Perform division
+  return (totalBorrow * BigInt(10 ** 18)) / totalSupply;
+};
 
 export const useAaveInterestRatesData = (): {
-  rates: IRatesDataResult | null;
+  data: RatesDataResult | null;
   error: string | null;
-  loading: boolean;
 } => {
-  const [rates, setRates] = useState<any>(null);
-  const [loading, setLoading] = useState<boolean>(true);
+  const [data, setData] = useState<RatesDataResult | null>(null);
   const [error, setError] = useState<string | null>(null);
 
   const { provider } = useAccount();
 
   const [searchParams] = useSearchParams();
-  const symbol = searchParams.get('asset') || '';
-  const { reserves } = useAaveReservesData();
-  const reserveAsset = reserves.find(
+  const symbol = searchParams.get('asset') || 'ETH';
+  const { reserves, loading } = useAaveReservesData();
+  const reserve: Reserve | undefined = reserves.find(
     r => r.symbol.toLocaleLowerCase() === symbol.toLocaleLowerCase(),
   );
-  const interestRateStrategyAddress = reserveAsset?.interestRateStrategyAddress;
+  const interestRateStrategyAddress = reserve?.interestRateStrategyAddress;
 
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        if (!interestRateStrategyAddress) {
-          console.log(
-            'Interest Rate Strategy Address not found',
-            reserveAsset,
-            reserveAsset?.interestRateStrategyAddress,
-          );
-          setError('Interest Rate Strategy Address not found');
-          return;
-        }
-        const ratesStrategy = new Contract(
-          interestRateStrategyAddress as string,
-          rateStrategy.abi,
-          provider,
-        );
-        const utilizationRate = calculateUtilizationRate(
-          reserveAsset.totalDebt,
-          reserveAsset.availableLiquidity,
-        );
-        console.log('utilizationRate', utilizationRate);
-
-        const [stableRateExcessOffset, optimalStableToTotalDebtRatio] =
-          await Promise.all([
-            ratesStrategy.getStableRateExcessOffset(),
-            ratesStrategy.OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO(),
-          ]);
+  const rateContract = useMemo(
+    () =>
+      provider && interestRateStrategyAddress && !loading
+        ? new Contract(
+            interestRateStrategyAddress,
+            INTEREST_RATE_STRATEGY_ABI,
+            provider,
+          )
+        : null,
+    [loading, interestRateStrategyAddress, provider],
+  );
 
-        const ratesData = {
-          currentUsageRatio: formatUnits(utilizationRate, 2).toString(),
-          optimalUsageRatio: formatUnits(
-            reserveAsset.optimalUsageRatio,
-            RAY_DECIMALS,
-          ).toString(),
-          baseVariableBorrowRate: formatUnits(
-            reserveAsset.baseVariableBorrowRate,
-            RAY_DECIMALS,
-          ).toString(),
-          variableRateSlope1: formatUnits(
-            reserveAsset.variableRateSlope1,
-            RAY_DECIMALS,
-          ).toString(),
-          variableRateSlope2: formatUnits(
-            reserveAsset.variableRateSlope2,
-            RAY_DECIMALS,
-          ).toString(),
-          stableRateSlope1: formatUnits(
-            reserveAsset.stableRateSlope1,
-            RAY_DECIMALS,
-          ).toString(),
-          stableRateSlope2: formatUnits(
-            reserveAsset.stableRateSlope2,
-            RAY_DECIMALS,
-          ).toString(),
-          baseStableBorrowRate: formatUnits(
-            reserveAsset.baseStableBorrowRate,
-            RAY_DECIMALS,
-          ).toString(),
-          stableRateExcessOffset: formatUnits(
-            stableRateExcessOffset,
-            RAY_DECIMALS,
-          ).toString(),
-          optimalStableToTotalDebtRatio: formatUnits(
-            optimalStableToTotalDebtRatio,
-            RAY_DECIMALS,
-          ).toString(),
-          underlyingAsset: reserveAsset.underlyingAsset.toString(),
-          name: reserveAsset.name.toString(),
-          symbol: reserveAsset.symbol.toString(),
-          decimals: reserveAsset.decimals.toString(),
-        };
-        setRates(ratesData);
-      } catch (error) {
-        setError(error.message);
-      } finally {
-        setLoading(false);
-      }
-    };
-    fetchData();
-  }, [rates, interestRateStrategyAddress, provider, reserveAsset]);
+  useEffect(() => {
+    if (loading || !rateContract || !reserve) return;
+    let ratesData: RatesDataResult;
+    try {
+      const utilizationRate = calculateUtilizationRate(
+        reserve.decimals,
+        reserve.totalDebt,
+        reserve.availableLiquidity,
+      );
+      ratesData = {
+        currentUsageRatio: formatUnits(
+          utilizationRate,
+          BIG_NUMBER_PRECISION_EIGHTEEN,
+        ),
+        optimalUsageRatio: formatUnits(
+          reserve.optimalUsageRatio,
+          BIG_NUMBER_PRECISION_TWENTY_SEVEN,
+        ).toString(),
+        baseVariableBorrowRate: formatUnits(
+          reserve.baseVariableBorrowRate,
+          BIG_NUMBER_PRECISION_TWENTY_SEVEN,
+        ).toString(),
+        variableRateSlope1: formatUnits(
+          reserve.variableRateSlope1,
+          BIG_NUMBER_PRECISION_TWENTY_SEVEN,
+        ).toString(),
+        variableRateSlope2: formatUnits(
+          reserve.variableRateSlope2,
+          BIG_NUMBER_PRECISION_TWENTY_SEVEN,
+        ).toString(),
+        underlyingAsset: reserve.underlyingAsset,
+        name: reserve.name,
+        symbol: reserve.symbol,
+        decimals: reserve.decimals.toString(),
+      };
+      setData(ratesData);
+    } catch (error) {
+      setError(error.message);
+    }
+  }, [symbol, loading, reserve, rateContract]);
 
-  return { rates, loading, error };
+  return { data, error };
 };
diff --git a/apps/frontend/src/hooks/aave/useReservesHistory.tsx b/apps/frontend/src/hooks/aave/useReservesHistory.tsx
new file mode 100644
index 000000000..f35fb0c5d
--- /dev/null
+++ b/apps/frontend/src/hooks/aave/useReservesHistory.tsx
@@ -0,0 +1,173 @@
+/**
+ * This hook is used for getting historical reserve data, and it is primarily used with charts.
+ * In particular, this hook is used in the  ̶A̶p̶y̶G̶r̶a̶p̶h̶ AaveReserveOverviewPage (chartJS).
+ */
+import { useCallback, useEffect, useState } from 'react';
+
+import dayjs from 'dayjs';
+
+import { config } from '../../constants/aave';
+import { makeCancelable } from './utils';
+
+export enum ESupportedTimeRanges {
+  OneMonth = '1m',
+  ThreeMonths = '3m',
+  SixMonths = '6m',
+  OneYear = '1y',
+  TwoYears = '2y',
+  FiveYears = '5y',
+}
+
+export const reserveRateTimeRangeOptions = [
+  ESupportedTimeRanges.OneMonth,
+  ESupportedTimeRanges.SixMonths,
+  ESupportedTimeRanges.OneYear,
+];
+export type ReserveRateTimeRange = typeof reserveRateTimeRangeOptions[number];
+
+type RatesHistoryParams = {
+  from: number;
+  resolutionInHours: number;
+};
+
+type APIResponse = {
+  liquidityRate_avg: number;
+  variableBorrowRate_avg: number;
+  stableBorrowRate_avg: number;
+  utilizationRate_avg: number;
+  x: { year: number; month: number; date: number; hours: number };
+};
+
+const fetchStats = async (
+  address: string,
+  timeRange: ReserveRateTimeRange,
+  endpointURL: string,
+): Promise<APIResponse[]> => {
+  const { from, resolutionInHours } = resolutionForTimeRange(timeRange);
+
+  try {
+    const url = `${endpointURL}?reserveId=${address}&from=${from}&resolutionInHours=${resolutionInHours}`;
+    const result = await fetch(url);
+    const json = await result.json();
+    return json;
+  } catch (e) {
+    return [];
+  }
+};
+
+// TODO: there is possibly a bug here, as Polygon and Avalanche v2 data is coming through empty and erroring in our hook
+// The same asset without the 'from' field comes through just fine.
+const resolutionForTimeRange = (
+  timeRange: ReserveRateTimeRange,
+): RatesHistoryParams => {
+  // Return today as a fallback
+  let calculatedDate = dayjs().unix();
+  switch (timeRange) {
+    case ESupportedTimeRanges.OneMonth:
+      calculatedDate = dayjs().subtract(30, 'day').unix();
+      return {
+        from: calculatedDate,
+        resolutionInHours: 6,
+      };
+    case ESupportedTimeRanges.SixMonths:
+      calculatedDate = dayjs().subtract(6, 'month').unix();
+      return {
+        from: calculatedDate,
+        resolutionInHours: 24,
+      };
+    case ESupportedTimeRanges.OneYear:
+      calculatedDate = dayjs().subtract(1, 'year').unix();
+      return {
+        from: calculatedDate,
+        resolutionInHours: 24,
+      };
+    default:
+      return {
+        from: calculatedDate,
+        resolutionInHours: 6,
+      };
+  }
+};
+
+export type FormattedReserveHistoryItem = {
+  date: number;
+  liquidityRate: number;
+  utilizationRate: number;
+  stableBorrowRate: number;
+  variableBorrowRate: number;
+};
+
+// TODO: api need to be altered to expect chainId underlying asset and poolConfig
+/**
+ *
+ * @param reserveAddress
+ * @param timeRange
+ * @returns
+ */
+export function useReserveRatesHistory(
+  reserveAddress: string,
+  timeRange: ReserveRateTimeRange,
+) {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [data, setData] = useState<FormattedReserveHistoryItem[]>([]);
+
+  const ratesHistoryApiUrl = config.ratesHistoryApiUrl;
+
+  const refetchData = useCallback<() => () => void>(() => {
+    // reset
+    setLoading(true);
+    setError(false);
+    setData([]);
+
+    if (reserveAddress && ratesHistoryApiUrl) {
+      const cancelable = makeCancelable(
+        fetchStats(reserveAddress, timeRange, ratesHistoryApiUrl),
+      );
+
+      cancelable.promise
+        .then((data: APIResponse[]) => {
+          setData(
+            data.map(d => ({
+              date: new Date(
+                d.x.year,
+                d.x.month,
+                d.x.date,
+                d.x.hours,
+              ).getTime(),
+              liquidityRate: d.liquidityRate_avg,
+              variableBorrowRate: d.variableBorrowRate_avg,
+              utilizationRate: d.utilizationRate_avg,
+              stableBorrowRate: d.stableBorrowRate_avg,
+            })),
+          );
+          setLoading(false);
+        })
+        .catch(e => {
+          console.error(
+            'useReservesHistory(): Failed to fetch historical reserve data.',
+            e,
+          );
+          setError(true);
+          setLoading(false);
+        });
+
+      return cancelable.cancel;
+    }
+
+    setLoading(false);
+    return () => null;
+  }, [reserveAddress, timeRange, ratesHistoryApiUrl]);
+
+  useEffect(() => {
+    const cancel = refetchData();
+    return () => cancel();
+  }, [refetchData]);
+
+  return {
+    loading,
+    data,
+    error,
+    refetch: refetchData,
+  };
+}
diff --git a/apps/frontend/src/hooks/aave/utils.ts b/apps/frontend/src/hooks/aave/utils.ts
new file mode 100644
index 000000000..13bbb98f4
--- /dev/null
+++ b/apps/frontend/src/hooks/aave/utils.ts
@@ -0,0 +1,22 @@
+export interface CancelablePromise<T = unknown> {
+  promise: Promise<T>;
+  cancel: () => void;
+}
+
+export const makeCancelable = <T>(promise: Promise<T>) => {
+  let hasCanceled_ = false;
+
+  const wrappedPromise = new Promise<T>((resolve, reject) => {
+    promise.then(
+      val => (hasCanceled_ ? reject({ isCanceled: true }) : resolve(val)),
+      error => (hasCanceled_ ? reject({ isCanceled: true }) : reject(error)),
+    );
+  });
+
+  return {
+    promise: wrappedPromise,
+    cancel() {
+      hasCanceled_ = true;
+    },
+  };
+};
diff --git a/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts b/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
index a3870f25a..8f1f1ee93 100644
--- a/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
+++ b/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
@@ -61,7 +61,6 @@ export type AaveUserReservesSummary = {
   borrowPowerUsed: Decimal;
   eModeEnabled: boolean;
   eModeCategoryId: number;
-
   reserves: ReserveSummary[];
 };
 
@@ -209,12 +208,6 @@ export class AaveUserReservesSummaryFactory {
           const availableLiquidity = Decimal.from(
             formatUnits(r.reserve.availableLiquidity, r.reserve.decimals),
           );
-          const availableToBorrow = availableLiquidity.lt(canBorrow)
-            ? availableLiquidity
-            : canBorrow;
-          const availableToBorrowUSD = availableToBorrow.mul(
-            r.reserve.priceInUSD,
-          );
 
           return {
             asset: symbol,
@@ -228,13 +221,14 @@ export class AaveUserReservesSummaryFactory {
             suppliedUSD: Decimal.from(r.underlyingBalanceUSD),
             borrowed: Decimal.from(r.totalBorrows),
             borrowedUSD: Decimal.from(r.totalBorrowsUSD),
-            availableToBorrow,
-            availableToBorrowUSD,
+            availableToBorrow: availableLiquidity.lt(canBorrow)
+              ? availableLiquidity
+              : canBorrow,
 
             borrowRateMode: Decimal.from(r.variableBorrows).gt(0)
               ? BorrowRateMode.VARIABLE
               : BorrowRateMode.STABLE,
-          };
+          } as ReserveSummary;
         }),
       ),
     };
diff --git a/apps/frontend/src/utils/math.ts b/apps/frontend/src/utils/math.ts
index 2874d6e28..08ca66913 100644
--- a/apps/frontend/src/utils/math.ts
+++ b/apps/frontend/src/utils/math.ts
@@ -5,24 +5,14 @@ import { formatUnits, parseUnits } from 'ethers/lib/utils';
 
 import { Decimal, Decimalish } from '@sovryn/utils';
 
-export const RAY_DECIMALS = 27;
 const DEFAULT_UNIT = 18;
 const DEFAULT_DECIMALS = 6;
 
-const THOUSAND = 1e3;
-const MILLION = 1e6;
-const BILLION = 1e9;
-
 const DEFAULT_DECIMALS_SEPARATOR = '.';
 const DEFAULT_THOUSANDS_SEPARATOR = ',';
 
 const unitNames = ['wei', 'kwei', 'mwei', 'gwei', 'szabo', 'finney', 'ether'];
 
-export interface FormattedAmount {
-  value: string;
-  suffix: string;
-}
-
 // helper function to convert any type of ethers value to wei.
 export const toWei = (
   value: BigNumberish,
@@ -171,14 +161,17 @@ export const bigNumberic = (
 export const isScientificNumber = (value: number) =>
   String(value).search(/e[-+]?/) > 0;
 
-export const formatAmountWithSuffix = (_value: Decimalish): FormattedAmount => {
+export const formatAmountWithSuffix = (
+  _value: Decimalish,
+): {
+  value: string;
+  suffix: string;
+} => {
   const value = Decimal.from(_value);
-  if (value.gte(BILLION)) {
-    return { value: value.div(BILLION).toString(1), suffix: 'B' };
-  } else if (value.gte(MILLION)) {
-    return { value: value.div(MILLION).toString(1), suffix: 'M' };
-  } else if (value.gte(THOUSAND)) {
-    return { value: value.div(THOUSAND).toString(1), suffix: 'K' };
+  if (value.gte(1e6)) {
+    return { value: value.div(1e6).toString(1), suffix: 'M' };
+  } else if (value.gte(1e3)) {
+    return { value: value.div(1e3).toString(1), suffix: 'K' };
   } else {
     return { value: value.toString(), suffix: '' };
   }

From b137a7adbd4ca0f8a6641d3ac1eb4880be911b7f Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Fri, 6 Sep 2024 18:56:08 +0300
Subject: [PATCH 081/116] cleanup

---
 .../BorrowAssetsList/BorrowAssetsList.tsx     |  14 +-
 .../BorrowPositionsList.constants.tsx         |   2 +-
 .../BorrowPositionsList.tsx                   |  10 +-
 .../EfficencyModeCard.utils.ts                |  59 ++++
 .../EfficiencyModeCard/EfficiencyModeCard.tsx |   2 +-
 .../DisableEModeForm/DisableEModeForm.tsx     |  62 +---
 .../SwitchEModeForm/SwitchEModeForm.tsx       |  49 +--
 .../RepayForm/RepayForm.constants.ts          |  17 +
 .../components/RepayForm/RepayForm.tsx        |  19 +-
 .../LendAssetsList/LendAssetsList.tsx         |  21 +-
 .../components/LendForm/LendForm.tsx          |  14 +-
 .../WithdrawForm/WithdrawForm.constants.ts    |  12 +
 .../components/WithdrawForm/WithdrawForm.tsx  |  15 +-
 .../AaveReserveOverviewPage.tsx               |   4 +-
 .../BorrowDetailsGraph/BorrowDetailsGraph.tsx |  81 ++---
 .../BorrowDetailsGraph.utils.ts               |   5 +-
 .../components/Chart/Chart.tsx                |   4 +-
 .../components/Chart/Chart.types.ts           |   4 +-
 .../InterestRateModelGraph.tsx                |  98 +++---
 .../components/Chart/Chart.tsx                |   6 +-
 .../components/Chart/Chart.types.ts           |  12 +
 .../SupplyDetailsGraph/SupplyDetailsGraph.tsx |  21 +-
 apps/frontend/src/hooks/aave/constants.ts     |   2 -
 apps/frontend/src/hooks/aave/useAaveRates.tsx | 300 ------------------
 .../src/hooks/aave/useReservesHistory.tsx     | 173 ----------
 apps/frontend/src/hooks/aave/utils.ts         |  22 --
 .../src/hooks/useAddTokenToWallet.tsx         |   2 +-
 apps/frontend/src/hooks/useNotifyError.tsx    |   4 +-
 yarn.lock                                     |   6 +-
 29 files changed, 255 insertions(+), 785 deletions(-)
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficencyModeCard.utils.ts
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.constants.ts
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.constants.ts
 delete mode 100644 apps/frontend/src/hooks/aave/constants.ts
 delete mode 100644 apps/frontend/src/hooks/aave/useAaveRates.tsx
 delete mode 100644 apps/frontend/src/hooks/aave/useReservesHistory.tsx
 delete mode 100644 apps/frontend/src/hooks/aave/utils.ts

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
index 885866d2e..18fc484ff 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
@@ -35,13 +35,7 @@ export const BorrowAssetsList: FC<BorrowAssetsListProps> = ({
 }) => {
   const [open, setOpen] = useState(true);
   const [orderOptions, setOrderOptions] = useState<OrderOptions>();
-  const [borrowAssetDialog, setBorrowAssetDialog] = useState<
-    string | undefined
-  >();
-
-  const onBorrowClick = useCallback((asset: string) => {
-    setBorrowAssetDialog(asset);
-  }, []);
+  const [borrowAssetDialog, setBorrowAssetDialog] = useState<string>();
 
   const onBorrowClose = useCallback(() => {
     setBorrowAssetDialog(undefined);
@@ -63,11 +57,11 @@ export const BorrowAssetsList: FC<BorrowAssetsListProps> = ({
   const mobileRenderer = useCallback(
     p => (
       <BorrowAssetDetails
-        onBorrowClick={() => onBorrowClick(p.asset)}
+        onBorrowClick={() => setBorrowAssetDialog(p.asset)}
         pool={p}
       />
     ),
-    [onBorrowClick],
+    [setBorrowAssetDialog],
   );
 
   return (
@@ -93,7 +87,7 @@ export const BorrowAssetsList: FC<BorrowAssetsListProps> = ({
       <Table
         isLoading={loading}
         className="mt-4"
-        columns={COLUMNS_CONFIG(onBorrowClick)}
+        columns={COLUMNS_CONFIG(setBorrowAssetDialog)}
         rowClassName="bg-gray-80"
         accordionClassName="bg-gray-60 border border-gray-70"
         rowTitle={rowTitleRenderer}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
index 8e5209c7a..88f3f0c6e 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
@@ -60,7 +60,7 @@ export const COLUMNS_CONFIG = (onRepayClick: (asset: string) => unknown) => [
       </span>
     ),
     cellRenderer: (position: BorrowPosition) => (
-      <AmountRenderer value={position.apy} suffix={'%'} precision={2} />
+      <AmountRenderer value={position.apy} suffix="%" precision={2} />
     ),
   },
   {
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
index e0c699256..5baec6ea6 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
@@ -47,10 +47,6 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = ({
   const [orderOptions, setOrderOptions] = useState<OrderOptions>();
   const [repayAssetDialog, setRepayAssetDialog] = useState<string>();
 
-  const onRepayClick = useCallback((asset: string) => {
-    setRepayAssetDialog(asset);
-  }, []);
-
   const onRepayClose = useCallback(() => {
     setRepayAssetDialog(undefined);
   }, []);
@@ -71,10 +67,10 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = ({
     p => (
       <BorrowPositionDetails
         position={p}
-        onRepayClick={() => onRepayClick(p.asset)}
+        onRepayClick={() => setRepayAssetDialog(p.asset)}
       />
     ),
-    [onRepayClick],
+    [setRepayAssetDialog],
   );
 
   return (
@@ -128,7 +124,7 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = ({
 
           <Table
             isLoading={loading}
-            columns={COLUMNS_CONFIG(onRepayClick)}
+            columns={COLUMNS_CONFIG(setRepayAssetDialog)}
             rowClassName="bg-gray-80"
             accordionClassName="bg-gray-60 border border-gray-70"
             rowTitle={rowTitleRenderer}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficencyModeCard.utils.ts b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficencyModeCard.utils.ts
new file mode 100644
index 000000000..9ee152a6b
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficencyModeCard.utils.ts
@@ -0,0 +1,59 @@
+import { ReservesDataHumanized } from '@aave/contract-helpers';
+import { formatReserves, formatUserSummary } from '@aave/math-utils';
+
+import { Decimal } from '@sovryn/utils';
+
+import { UserReservesData } from '../../../../../../../types/aave';
+import { AaveCalculations } from '../../../../../../../utils/aave/AaveCalculations';
+
+export const normalizeEModeSummary = (
+  eModeCategoryId: number,
+  reservesData?: ReservesDataHumanized,
+  userReservesData?: UserReservesData,
+  timestamp?: number,
+): {
+  ltv: Decimal;
+  collateralRatio: Decimal;
+  liquidationRisk: boolean;
+} => {
+  if (!reservesData || !userReservesData || !timestamp) {
+    return {
+      ltv: Decimal.from(0),
+      collateralRatio: Decimal.from(0),
+      liquidationRisk: false,
+    };
+  }
+
+  const {
+    marketReferenceCurrencyDecimals,
+    marketReferenceCurrencyPriceInUsd: marketReferencePriceInUsd,
+  } = reservesData.baseCurrencyData;
+  const summary = formatUserSummary({
+    userEmodeCategoryId: eModeCategoryId,
+    currentTimestamp: timestamp,
+    marketReferencePriceInUsd,
+    marketReferenceCurrencyDecimals,
+    userReserves: userReservesData.userReserves,
+    formattedReserves: formatReserves({
+      currentTimestamp: timestamp,
+      marketReferencePriceInUsd,
+      marketReferenceCurrencyDecimals,
+      reserves: reservesData.reservesData,
+    }),
+  });
+
+  // if health factor is below 1 we're at risk. Negative means doesn't apply
+  const healthFactor = Decimal.from(summary.healthFactor);
+  const liquidationRisk = healthFactor.lte(1) && healthFactor.gt(0);
+
+  const collateralRatio = AaveCalculations.computeCollateralRatio(
+    Decimal.from(summary.totalCollateralUSD),
+    Decimal.from(summary.totalBorrowsUSD),
+  );
+
+  return {
+    ltv: Decimal.from(summary.currentLoanToValue).mul(100),
+    collateralRatio,
+    liquidationRisk,
+  };
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx
index 72a9d44f6..fb4fc18d0 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx
@@ -169,7 +169,7 @@ export const EfficiencyModeCard: FC<EfficiencyModeCardProps> = ({
           />
           <DialogBody>
             <DisableEModeForm
-              current={currentCategory!}
+              current={currentCategory}
               onComplete={onDisableEModeClose}
             />
           </DialogBody>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx
index e06229584..cca226a60 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx
@@ -1,5 +1,3 @@
-import { formatReserves, formatUserSummary } from '@aave/math-utils';
-
 import React, { FC, useCallback, useMemo } from 'react';
 
 import { t } from 'i18next';
@@ -21,8 +19,8 @@ import { useAaveSetUserEMode } from '../../../../../../../../../hooks/aave/useAa
 import { useAaveUserReservesData } from '../../../../../../../../../hooks/aave/useAaveUserReservesData';
 import { translations } from '../../../../../../../../../locales/i18n';
 import { EModeCategory } from '../../../../../../../../../types/aave';
-import { AaveCalculations } from '../../../../../../../../../utils/aave/AaveCalculations';
 import { CollateralRatioHealthBar } from '../../../../../CollateralRatioHealthBar/CollateralRatioHealthBar';
+import { normalizeEModeSummary } from '../../EfficencyModeCard.utils';
 
 type DisableEModeFormProps = {
   current: EModeCategory;
@@ -41,55 +39,23 @@ export const DisableEModeForm: FC<DisableEModeFormProps> = ({
     handleDisableUserEMode({ onComplete });
   }, [handleDisableUserEMode, onComplete]);
 
-  const newSummary = useMemo(() => {
-    if (!userReservesData || !reservesData) {
-      return;
-    }
-
-    const {
-      marketReferenceCurrencyDecimals,
-      marketReferenceCurrencyPriceInUsd: marketReferencePriceInUsd,
-    } = reservesData.baseCurrencyData;
-    return formatUserSummary({
-      userEmodeCategoryId: 0, // disable mode
-      currentTimestamp: timestamp,
-      marketReferencePriceInUsd,
-      marketReferenceCurrencyDecimals,
-      userReserves: userReservesData.userReserves,
-      formattedReserves: formatReserves({
-        currentTimestamp: timestamp,
-        marketReferencePriceInUsd,
-        marketReferenceCurrencyDecimals,
-        reserves: reservesData.reservesData,
-      }),
-    });
-  }, [userReservesData, reservesData, timestamp]);
-
-  const newCollateralRatio = useMemo(() => {
-    if (!newSummary) {
-      return Decimal.from(0);
-    }
-
-    return AaveCalculations.computeCollateralRatio(
-      Decimal.from(newSummary.totalCollateralUSD),
-      Decimal.from(newSummary.totalBorrowsUSD),
+  const summaryAfterDisabled = useMemo(() => {
+    return normalizeEModeSummary(
+      0, // disabled
+      reservesData,
+      userReservesData,
+      timestamp,
     );
-  }, [newSummary]);
-
-  const liquidationRisk = useMemo(() => {
-    // if health factor is below 1 we're at risk. Negative means doesn't apply
-    const healthFactor = Decimal.from(newSummary?.healthFactor ?? 0);
-    return healthFactor.lte(1) && healthFactor.gt(0);
-  }, [newSummary?.healthFactor]);
+  }, [userReservesData, reservesData, timestamp]);
 
   const confirmEnabled = useMemo(() => {
     // cannot disable if undercollateralized
-    return !liquidationRisk;
-  }, [liquidationRisk]);
+    return !summaryAfterDisabled.liquidationRisk;
+  }, [summaryAfterDisabled.liquidationRisk]);
 
   return (
     <div className="space-y-6">
-      {liquidationRisk && (
+      {summaryAfterDisabled.liquidationRisk && (
         <ErrorBadge
           level={ErrorLevel.Critical}
           message={t(translations.aavePage.eMode.liquidationRiskWarning)}
@@ -98,7 +64,7 @@ export const DisableEModeForm: FC<DisableEModeFormProps> = ({
       )}
 
       <CollateralRatioHealthBar
-        ratio={newCollateralRatio}
+        ratio={summaryAfterDisabled.collateralRatio}
         minimum={config.MinCollateralRatio}
       />
 
@@ -147,9 +113,7 @@ export const DisableEModeForm: FC<DisableEModeFormProps> = ({
                 className="h-2 flex-shrink-0"
               />
               <AmountRenderer
-                value={Decimal.from(newSummary?.currentLoanToValue ?? 0).mul(
-                  100,
-                )}
+                value={summaryAfterDisabled.ltv}
                 precision={2}
                 suffix="%"
               />
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx
index f6014d3ac..766f8abb6 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx
@@ -1,5 +1,3 @@
-import { formatReserves, formatUserSummary } from '@aave/math-utils';
-
 import React, { FC, useCallback, useMemo, useState } from 'react';
 
 import { t } from 'i18next';
@@ -23,8 +21,8 @@ import { useAaveSetUserEMode } from '../../../../../../../../../hooks/aave/useAa
 import { useAaveUserReservesData } from '../../../../../../../../../hooks/aave/useAaveUserReservesData';
 import { translations } from '../../../../../../../../../locales/i18n';
 import { EModeCategory } from '../../../../../../../../../types/aave';
-import { AaveCalculations } from '../../../../../../../../../utils/aave/AaveCalculations';
 import { CollateralRatioHealthBar } from '../../../../../CollateralRatioHealthBar/CollateralRatioHealthBar';
+import { normalizeEModeSummary } from '../../EfficencyModeCard.utils';
 
 type SwitchEModeFormProps = {
   current: EModeCategory;
@@ -55,39 +53,14 @@ export const SwitchEModeForm: FC<SwitchEModeFormProps> = ({
     return categories.find(c => c.id === Number(category));
   }, [category, categories]);
 
-  const newSummary = useMemo(() => {
-    if (!userReservesData || !reservesData) {
-      return;
-    }
-
-    const {
-      marketReferenceCurrencyDecimals,
-      marketReferenceCurrencyPriceInUsd: marketReferencePriceInUsd,
-    } = reservesData.baseCurrencyData;
-    return formatUserSummary({
-      userEmodeCategoryId: selectedCategory?.id ?? 0,
-      currentTimestamp: timestamp,
-      marketReferencePriceInUsd,
-      marketReferenceCurrencyDecimals,
-      userReserves: userReservesData.userReserves,
-      formattedReserves: formatReserves({
-        currentTimestamp: timestamp,
-        marketReferencePriceInUsd,
-        marketReferenceCurrencyDecimals,
-        reserves: reservesData.reservesData,
-      }),
-    });
-  }, [userReservesData, reservesData, timestamp, selectedCategory?.id]);
-
-  const newCollateralRatio = useMemo(() => {
-    if (!newSummary) {
-      return Decimal.from(0);
-    }
-    return AaveCalculations.computeCollateralRatio(
-      Decimal.from(newSummary.totalCollateralUSD),
-      Decimal.from(newSummary.totalBorrowsUSD),
+  const summaryAfterSwitch = useMemo(() => {
+    return normalizeEModeSummary(
+      selectedCategory?.id ?? 0,
+      reservesData,
+      userReservesData,
+      timestamp,
     );
-  }, [newSummary]);
+  }, [userReservesData, reservesData, timestamp, selectedCategory?.id]);
 
   const positionsInOtherCategories = useMemo(() => {
     return summary.reserves.some(
@@ -98,11 +71,11 @@ export const SwitchEModeForm: FC<SwitchEModeFormProps> = ({
   const confirmEnabled = useMemo(() => {
     // cannot switch if undercollateralized or have positions in other categories
     return (
-      Decimal.from(newSummary?.healthFactor ?? 0).lte(1) &&
+      !summaryAfterSwitch.liquidationRisk &&
       !positionsInOtherCategories &&
       selectedCategory
     );
-  }, [newSummary, positionsInOtherCategories, selectedCategory]);
+  }, [summaryAfterSwitch, positionsInOtherCategories, selectedCategory]);
 
   const onConfirm = useCallback(() => {
     if (!selectedCategory) return;
@@ -125,7 +98,7 @@ export const SwitchEModeForm: FC<SwitchEModeFormProps> = ({
       </div>
 
       <CollateralRatioHealthBar
-        ratio={newCollateralRatio}
+        ratio={summaryAfterSwitch.collateralRatio}
         minimum={config.MinCollateralRatio}
       />
 
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.constants.ts b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.constants.ts
new file mode 100644
index 000000000..cfee00c96
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.constants.ts
@@ -0,0 +1,17 @@
+import { t } from 'i18next';
+
+import { translations } from '../../../../../../../locales/i18n';
+
+export const tabItems = [
+  {
+    activeClassName: 'text-primary-20',
+    dataAttribute: 'wallet-balance',
+    label: t(translations.aavePage.repayModal.walletBalance),
+  },
+  {
+    activeClassName: 'text-primary-20',
+    dataAttribute: 'collateral',
+    label: t(translations.aavePage.common.collateral),
+    disabled: true,
+  },
+];
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.tsx
index e964088b5..fa3be9c91 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.tsx
@@ -1,10 +1,11 @@
-import React, { FC, useMemo, useState } from 'react';
+import React, { FC, useState } from 'react';
 
 import { t } from 'i18next';
 
 import { Paragraph, ParagraphSize, Tabs, TabType } from '@sovryn/ui';
 
 import { translations } from '../../../../../../../locales/i18n';
+import { tabItems } from './RepayForm.constants';
 import { RepayWithCollateralForm } from './RepayWithCollateralForm';
 import { RepayWithWalletBalanceForm } from './RepayWithWalletBalanceForm';
 
@@ -21,22 +22,6 @@ enum RepayWith {
 export const RepayForm: FC<RepayFormProps> = ({ asset, onComplete }) => {
   const [activeTab, setActiveTab] = useState<RepayWith>(RepayWith.BALANCE);
 
-  const tabItems = useMemo(() => {
-    return [
-      {
-        activeClassName: 'text-primary-20',
-        dataAttribute: 'wallet-balance',
-        label: t(translations.aavePage.repayModal.walletBalance),
-      },
-      {
-        activeClassName: 'text-primary-20',
-        dataAttribute: 'collateral',
-        label: t(translations.aavePage.common.collateral),
-        disabled: true,
-      },
-    ];
-  }, []);
-
   return (
     <div className="space-y-2">
       <Paragraph
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
index 42c170d53..a64028e17 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
@@ -35,17 +35,18 @@ export const LendAssetsList: FC<LendAssetsListProps> = ({
   const [orderOptions, setOrderOptions] = useState<OrderOptions>();
   const [lendAssetDialog, setLendAssetDialog] = useState<string | undefined>();
 
-  const onLendClick = useCallback((asset: string) => {
-    setLendAssetDialog(asset);
-  }, []);
-
   const onLendClose = useCallback(() => {
     setLendAssetDialog(undefined);
   }, []);
 
   const mobileRenderer = useCallback(
-    p => <LendAssetDetails pool={p} onLendClick={() => onLendClick(p.asset)} />,
-    [onLendClick],
+    p => (
+      <LendAssetDetails
+        pool={p}
+        onLendClick={() => setLendAssetDialog(p.asset)}
+      />
+    ),
+    [setLendAssetDialog],
   );
 
   const rowTitleRenderer = useCallback(
@@ -62,10 +63,10 @@ export const LendAssetsList: FC<LendAssetsListProps> = ({
   );
 
   const filteredLendPools = useMemo(() => {
-    if (!showZeroBalances) {
-      return lendPools.filter(p => p.walletBalance.gt(0));
+    if (showZeroBalances) {
+      return lendPools;
     }
-    return lendPools;
+    return lendPools.filter(p => p.walletBalance.gt(0));
   }, [lendPools, showZeroBalances]);
 
   return (
@@ -89,7 +90,7 @@ export const LendAssetsList: FC<LendAssetsListProps> = ({
 
       <Table
         isLoading={loading}
-        columns={COLUMNS_CONFIG(onLendClick)}
+        columns={COLUMNS_CONFIG(setLendAssetDialog)}
         rowClassName="bg-gray-80"
         accordionClassName="bg-gray-60 border border-gray-70"
         rowTitle={rowTitleRenderer}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendForm/LendForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendForm/LendForm.tsx
index 3e69940f5..5b1eb8544 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendForm/LendForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendForm/LendForm.tsx
@@ -36,7 +36,7 @@ export const LendForm: FC<LendFormProps> = ({
 }) => {
   const { account } = useAccount();
   const { reserves } = useAaveReservesData();
-  const [lendAsset, setLendAsset] = useState<string>(initialAsset);
+  const [lendAsset, setLendAsset] = useState(initialAsset);
   const [lendAmount, setLendAmount, lendSize] = useDecimalAmountInput('');
   const { balance: lendAssetBalance } = useAssetBalance(
     lendAsset,
@@ -69,6 +69,10 @@ export const LendForm: FC<LendFormProps> = ({
     return Decimal.from(reserve?.priceInUSD ?? 0).mul(lendSize);
   }, [reserve, lendSize]);
 
+  const supplyApy = useMemo(() => {
+    return Decimal.from(reserve?.supplyAPY ?? 0).mul(100);
+  }, [reserve]);
+
   const isValidLendAmount = useMemo(
     () => (lendSize.gt(0) ? lendSize.lte(lendAssetBalance) : true),
     [lendSize, lendAssetBalance],
@@ -112,13 +116,7 @@ export const LendForm: FC<LendFormProps> = ({
       <SimpleTable>
         <SimpleTableRow
           label={t(translations.aavePage.lendModal.lendApy)}
-          value={
-            <AmountRenderer
-              value={Decimal.from(reserve?.supplyAPY ?? 0).mul(100)}
-              suffix="%"
-              precision={2}
-            />
-          }
+          value={<AmountRenderer value={supplyApy} suffix="%" precision={2} />}
         />
         <SimpleTableRow
           label={t(translations.aavePage.lendModal.collateralization)}
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.constants.ts b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.constants.ts
new file mode 100644
index 000000000..9e096ee95
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.constants.ts
@@ -0,0 +1,12 @@
+import { t } from 'i18next';
+
+import { translations } from '../../../../../../../locales/i18n';
+
+export const tabItems = [
+  // For now just withdraw is supported
+  {
+    activeClassName: 'text-primary-20',
+    dataAttribute: 'withdraw',
+    label: t(translations.common.withdraw),
+  },
+];
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx
index 40d120616..4234eb6ed 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx
@@ -22,6 +22,7 @@ import { useAaveUserReservesData } from '../../../../../../../hooks/aave/useAave
 import { useAaveWithdraw } from '../../../../../../../hooks/aave/useAaveWithdraw';
 import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
 import { translations } from '../../../../../../../locales/i18n';
+import { tabItems } from './WithdrawForm.constants';
 
 const pageTranslations = translations.aavePage;
 
@@ -33,7 +34,7 @@ type WithdrawFormProps = {
 export const WithdrawForm: FC<WithdrawFormProps> = ({ asset, onComplete }) => {
   const { handleWithdraw } = useAaveWithdraw();
   const { summary } = useAaveUserReservesData();
-  const [withdrawAsset, setWithdrawAsset] = useState<string>(asset);
+  const [withdrawAsset, setWithdrawAsset] = useState(asset);
   const [withdrawAmount, setWithdrawAmount, withdrawSize] =
     useDecimalAmountInput('');
 
@@ -84,18 +85,6 @@ export const WithdrawForm: FC<WithdrawFormProps> = ({ asset, onComplete }) => {
     [isValidWithdrawAmount, withdrawSize],
   );
 
-  const tabItems = useMemo(
-    () => [
-      // For now just withdraw is supported
-      {
-        activeClassName: 'text-primary-20',
-        dataAttribute: 'withdraw',
-        label: t(translations.common.withdraw),
-      },
-    ],
-    [],
-  );
-
   const onConfirm = useCallback(() => {
     handleWithdraw(
       withdrawSize,
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
index f6ae1dc64..cc69a4756 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
+++ b/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} history={[]} />
+            <SupplyDetailsGraph reserve={reserve} />
 
-            <BorrowDetailsGraph reserve={reserve} history={[]} />
+            <BorrowDetailsGraph reserve={reserve} />
 
             <EModeDetails reserve={reserve} />
 
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
index 736e438f1..747f2f774 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
@@ -4,72 +4,32 @@ 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';
 
 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();
+  const [open, setOpen] = useState(true);
 
-  const inputData = useMemo(() => {
-    const data = history.map(i => ({
-      x: i.date,
-      y: i.variableBorrowRate * 100,
-    }));
-    return {
-      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 debtCap = useMemo(() => {
-    return Decimal.from(reserve.debtCeiling);
-  }, [reserve]);
-
-  const debtCapUSD = useMemo(() => {
-    return Decimal.from(reserve.debtCeilingUSD);
+  const borrowStats = useMemo(() => {
+    return normalizeBorrowStats(reserve);
   }, [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={
@@ -93,14 +53,14 @@ export const BorrowDetailsGraph: FC<BorrowDetailsGraphProps> = ({
                 <div className="space-x-1 font-medium text-base">
                   <AmountRenderer
                     precision={2}
-                    {...formatAmountWithSuffix(totalBorrowed)}
+                    {...formatAmountWithSuffix(borrowStats.totalBorrowed)}
                   />
-                  {debtCap.gt(0) && (
+                  {borrowStats.borrowCap.gt(0) && (
                     <>
                       <span>{t(pageTranslations.of)}</span>
                       <AmountRenderer
                         precision={2}
-                        {...formatAmountWithSuffix(debtCap)}
+                        {...formatAmountWithSuffix(borrowStats.borrowCap)}
                       />
                     </>
                   )}
@@ -110,25 +70,27 @@ export const BorrowDetailsGraph: FC<BorrowDetailsGraphProps> = ({
                   <AmountRenderer
                     prefix="$"
                     precision={2}
-                    {...formatAmountWithSuffix(totalBorrowedUSD)}
+                    {...formatAmountWithSuffix(borrowStats.totalBorrowedUSD)}
                   />
-                  {debtCap.gt(0) && (
+                  {borrowStats.borrowCap.gt(0) && (
                     <>
                       <span>{t(pageTranslations.of)}</span>
                       <AmountRenderer
                         prefix="$"
                         precision={2}
-                        {...formatAmountWithSuffix(debtCapUSD)}
+                        {...formatAmountWithSuffix(borrowStats.borrowCapUSD)}
                       />
                     </>
                   )}
                 </div>
 
                 {/* Progress bar */}
-                {debtCap.gt(0) && (
+                {borrowStats.borrowCap.gt(0) && (
                   <div className="mt-2 h-[3px] w-[160px] bg-gray-70 rounded-full">
                     <div
-                      className={`h-full bg-primary-30 w-[${borrowedPercentage}%]`}
+                      className={`h-full bg-primary-30 w-[${borrowStats.borrowedPercentage.toString(
+                        0,
+                      )}%]`}
                     ></div>
                   </div>
                 )}
@@ -147,13 +109,13 @@ export const BorrowDetailsGraph: FC<BorrowDetailsGraphProps> = ({
               }
             />
 
-            {debtCap.gt(0) && (
+            {borrowStats.borrowCap.gt(0) && (
               <StatisticsCard
                 label={t(pageTranslations.borrowCap)}
                 value={
                   <AmountRenderer
                     precision={2}
-                    {...formatAmountWithSuffix(debtCap)}
+                    {...formatAmountWithSuffix(borrowStats.borrowCap)}
                   />
                 }
               />
@@ -161,7 +123,14 @@ export const BorrowDetailsGraph: FC<BorrowDetailsGraphProps> = ({
           </div>
         </div>
 
-        <Chart input={inputData} />
+        <Chart
+          input={{
+            // TODO: implement once data is available
+            data: [],
+            label: '',
+            lineColor: theme.colors.primary[30],
+          }}
+        />
 
         <div className="space-y-6">
           <Paragraph className="text-base">
@@ -187,7 +156,7 @@ export const BorrowDetailsGraph: FC<BorrowDetailsGraphProps> = ({
               value={
                 <Link
                   openNewTab
-                  href={collectorContractLink}
+                  href={borrowStats.collectorContractLink}
                   text={t(pageTranslations.viewContract)}
                 />
               }
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.utils.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.utils.ts
index 82cbf0f72..66e576501 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.utils.ts
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.utils.ts
@@ -12,10 +12,9 @@ export const normalizeBorrowStats = (reserve: Reserve) => ({
   borrowCapUSD: Decimal.from(reserve.borrowCapUSD),
   borrowedPercentage: Decimal.from(reserve.totalDebtUSD)
     .div(Decimal.from(reserve.debtCeilingUSD))
-    .mul(100)
-    .toString(0),
+    .mul(100),
+  reserveFactor: Decimal.from(reserve.reserveFactor).mul(100),
   collectorContractLink: `${getBobExplorerUrl()}/address/${
     config.TreasuryAddress
   }`,
-  reserveFactor: Decimal.from(reserve.reserveFactor).mul(100),
 });
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx
index bf051e141..77febba4a 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx
@@ -8,11 +8,11 @@ import {
   GRID_COLOR,
   TICK_COLOR,
 } from './Chart.constants';
-import { InputData } from './Chart.types';
+import { ChartData } from './Chart.types';
 import { htmlLegendPlugin } from './Chart.utils';
 
 type ChartProps = {
-  input: InputData<any>;
+  input: ChartData;
 };
 
 export const Chart: FC<ChartProps> = ({ input }) => {
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.types.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.types.ts
index 32de155a8..fdaeb8387 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.types.ts
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.types.ts
@@ -1,5 +1,5 @@
-export type InputData<T> = {
-  data: T[];
+export type ChartData = {
+  data: { x: number; y: number }[];
   label: string;
   lineColor: string;
 };
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
index 0405ce4a0..0a1246913 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
@@ -4,16 +4,17 @@ 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';
+import { RatesData } from './components/Chart/Chart.types';
 
 const pageTranslations = translations.aaveReserveOverviewPage.interestRateModel;
 
@@ -25,21 +26,18 @@ export const InterestRateModelGraph: FC<InterestRateModelGraphProps> = ({
   reserve,
 }) => {
   const { isMobile } = useIsMobile();
+  const [open, setOpen] = useState(true);
+
   const interestRateStrategyUrl = useMemo(() => {
     return `${getBobExplorerUrl()}/address/${
       config.InterestRateStrategyAddress
     }`;
   }, []);
 
-  const [open, setOpen] = useState<boolean>(true);
-  const { data: rates } = useAaveInterestRatesData();
-
-  const meta = {
-    label: t(pageTranslations.chart.label1),
-    lineColor: theme.colors['primary-30'],
-  };
+  const currentUsageRatio = useMemo(() => {
+    return Decimal.from(reserve.borrowUsageRatio).mul(100);
+  }, [reserve.borrowUsageRatio]);
 
-  if (!rates) return null;
   return (
     <Accordion
       label={
@@ -54,46 +52,52 @@ export const InterestRateModelGraph: FC<InterestRateModelGraphProps> = ({
       flatMode={!isMobile}
       dataAttribute="interest-rate-model"
     >
-      {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>
+      <div className="space-y-8 pt-2">
+        <div className="flex justify-between items-end">
+          <StatisticsCard
+            label={t(pageTranslations.utilizationRate)}
+            value={
+              <AmountRenderer
+                value={currentUsageRatio}
+                precision={2}
+                suffix="%"
+              />
+            }
+          />
+          <Link
+            href={interestRateStrategyUrl}
+            text={t(pageTranslations.interestRateStrategy)}
+          />
+        </div>
+
+        <Chart
+          meta={{
+            // TODO: implement this once data is available
+            label: t(pageTranslations.chart.label1),
+            lineColor: theme.colors['primary-30'],
+          }}
+          rates={{} as RatesData}
+        />
 
-          <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>
+        {/* statistics */}
+        <div className="flex gap-8">
+          <StatisticsCard
+            label={t(pageTranslations.reserveFactor)}
+            help={t(pageTranslations.reserveFactorInfo)}
+            value={
+              <AmountRenderer
+                value={Decimal.from(reserve.reserveFactor).mul(100)}
+                suffix="%"
+                precision={2}
+              />
+            }
+          />
+          <StatisticsCard
+            label={t(pageTranslations.collectorContract)}
+            value={<Link href="#" text={t(pageTranslations.viewContract)} />}
+          />
         </div>
-      )}
+      </div>
     </Accordion>
   );
 };
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
index 7b1fee072..8b4895318 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
@@ -5,12 +5,12 @@ import 'chartjs-adapter-date-fns';
 
 import { theme } from '@sovryn/tailwindcss-config';
 
-import { RatesDataResult } from '../../../../../../../hooks/aave/useAaveRates';
 import {
   CUSTOM_CANVAS_BACKGROUND_COLOR,
   GRID_COLOR,
   TICK_COLOR,
 } from './Chart.constants';
+import { RatesData } from './Chart.types';
 import { htmlLegendPlugin } from './Chart.utils';
 
 type ChartProps = {
@@ -18,7 +18,7 @@ type ChartProps = {
     label: string;
     lineColor: string;
   };
-  rates: RatesDataResult;
+  rates: RatesData;
 };
 
 const calcInterestRateModel = (
@@ -35,7 +35,7 @@ const calcInterestRateModel = (
   return base + slope1 + ((u - optimal) / (1 - optimal)) * slope2;
 };
 
-const calcVariableInterestRateModel = (u: number, rates: RatesDataResult) => {
+const calcVariableInterestRateModel = (u: number, rates: RatesData) => {
   const base = parseFloat(rates.baseVariableBorrowRate);
   const optimal = parseFloat(rates.optimalUsageRatio);
   const slope1 = parseFloat(rates.variableRateSlope1);
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.types.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.types.ts
index cc3d258c6..8a45374fa 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.types.ts
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.types.ts
@@ -6,3 +6,15 @@ export type MockData<T> = {
   lineColor: string;
   xLabels: string[];
 };
+
+export interface RatesData {
+  currentUsageRatio: string;
+  optimalUsageRatio: string;
+  baseVariableBorrowRate: string;
+  variableRateSlope1: string;
+  variableRateSlope2: string;
+  underlyingAsset: string;
+  name: string;
+  symbol: string;
+  decimals: string;
+}
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
index 3e1ae6e76..4678feea7 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
@@ -10,7 +10,6 @@ import { Decimal } from '@sovryn/utils';
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
 import { Reserve } from '../../../../../hooks/aave/useAaveReservesData';
-import { FormattedReserveHistoryItem } from '../../../../../hooks/aave/useReservesHistory';
 import { useIsMobile } from '../../../../../hooks/useIsMobile';
 import { translations } from '../../../../../locales/i18n';
 import { formatAmountWithSuffix } from '../../../../../utils/math';
@@ -19,26 +18,15 @@ import { Chart } from './components/Chart/Chart';
 const pageTranslations = translations.aaveReserveOverviewPage.supplyDetails;
 
 type SupplyDetailsGraphProps = {
-  history: FormattedReserveHistoryItem[];
   reserve: Reserve;
 };
 
 export const SupplyDetailsGraph: FC<SupplyDetailsGraphProps> = ({
-  history,
   reserve,
 }) => {
   const [open, setOpen] = useState(true);
   const { isMobile } = useIsMobile();
 
-  const inputData = useMemo(() => {
-    const data = history.map(i => ({ x: i.date, y: i.liquidityRate * 100 }));
-    return {
-      data,
-      label: t(pageTranslations.chart.label1),
-      lineColor: theme.colors['primary-30'],
-    };
-  }, [history]);
-
   const totalSupplied = useMemo(() => {
     return Decimal.from(reserve.availableLiquidity).add(reserve.totalDebt);
   }, [reserve]);
@@ -146,7 +134,14 @@ export const SupplyDetailsGraph: FC<SupplyDetailsGraphProps> = ({
           />
         </div>
 
-        <Chart input={inputData} />
+        <Chart
+          input={{
+            // TODO: implement once data is available
+            data: [],
+            label: t(pageTranslations.chart.label1),
+            lineColor: theme.colors['primary-30'],
+          }}
+        />
 
         <div className="space-y-6">
           {/* collateral usage */}
diff --git a/apps/frontend/src/hooks/aave/constants.ts b/apps/frontend/src/hooks/aave/constants.ts
deleted file mode 100644
index 596d3e9b9..000000000
--- a/apps/frontend/src/hooks/aave/constants.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export const BIG_NUMBER_PRECISION_TWENTY_SEVEN = 27;
-export const BIG_NUMBER_PRECISION_EIGHTEEN = 18;
diff --git a/apps/frontend/src/hooks/aave/useAaveRates.tsx b/apps/frontend/src/hooks/aave/useAaveRates.tsx
deleted file mode 100644
index 9e5bebd29..000000000
--- a/apps/frontend/src/hooks/aave/useAaveRates.tsx
+++ /dev/null
@@ -1,300 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-
-import { Contract, utils } from 'ethers';
-import { formatUnits } from 'ethers/lib/utils';
-import { useSearchParams } from 'react-router-dom';
-
-import { useAccount } from '../useAccount';
-import {
-  BIG_NUMBER_PRECISION_EIGHTEEN,
-  BIG_NUMBER_PRECISION_TWENTY_SEVEN,
-} from './constants';
-import { Reserve, useAaveReservesData } from './useAaveReservesData';
-
-const INTEREST_RATE_STRATEGY_ABI = [
-  {
-    inputs: [
-      {
-        internalType: 'contract IPoolAddressesProvider',
-        name: 'provider',
-        type: 'address',
-      },
-      {
-        internalType: 'uint256',
-        name: 'optimalUsageRatio',
-        type: 'uint256',
-      },
-      {
-        internalType: 'uint256',
-        name: 'baseVariableBorrowRate',
-        type: 'uint256',
-      },
-      {
-        internalType: 'uint256',
-        name: 'variableRateSlope1',
-        type: 'uint256',
-      },
-      {
-        internalType: 'uint256',
-        name: 'variableRateSlope2',
-        type: 'uint256',
-      },
-    ],
-    stateMutability: 'nonpayable',
-    type: 'constructor',
-  },
-  {
-    inputs: [],
-    name: 'ADDRESSES_PROVIDER',
-    outputs: [
-      {
-        internalType: 'contract IPoolAddressesProvider',
-        name: '',
-        type: 'address',
-      },
-    ],
-    stateMutability: 'view',
-    type: 'function',
-  },
-  {
-    inputs: [],
-    name: 'MAX_EXCESS_USAGE_RATIO',
-    outputs: [
-      {
-        internalType: 'uint256',
-        name: '',
-        type: 'uint256',
-      },
-    ],
-    stateMutability: 'view',
-    type: 'function',
-  },
-  {
-    inputs: [],
-    name: 'OPTIMAL_USAGE_RATIO',
-    outputs: [
-      {
-        internalType: 'uint256',
-        name: '',
-        type: 'uint256',
-      },
-    ],
-    stateMutability: 'view',
-    type: 'function',
-  },
-  {
-    inputs: [
-      {
-        components: [
-          {
-            internalType: 'uint256',
-            name: 'unbacked',
-            type: 'uint256',
-          },
-          {
-            internalType: 'uint256',
-            name: 'liquidityAdded',
-            type: 'uint256',
-          },
-          {
-            internalType: 'uint256',
-            name: 'liquidityTaken',
-            type: 'uint256',
-          },
-          {
-            internalType: 'uint256',
-            name: 'totalVariableDebt',
-            type: 'uint256',
-          },
-          {
-            internalType: 'uint256',
-            name: 'reserveFactor',
-            type: 'uint256',
-          },
-          {
-            internalType: 'address',
-            name: 'reserve',
-            type: 'address',
-          },
-          {
-            internalType: 'address',
-            name: 'aToken',
-            type: 'address',
-          },
-        ],
-        internalType: 'struct DataTypes.CalculateInterestRatesParams',
-        name: 'params',
-        type: 'tuple',
-      },
-    ],
-    name: 'calculateInterestRates',
-    outputs: [
-      {
-        internalType: 'uint256',
-        name: '',
-        type: 'uint256',
-      },
-      {
-        internalType: 'uint256',
-        name: '',
-        type: 'uint256',
-      },
-      {
-        internalType: 'uint256',
-        name: '',
-        type: 'uint256',
-      },
-    ],
-    stateMutability: 'view',
-    type: 'function',
-  },
-  {
-    inputs: [],
-    name: 'getBaseVariableBorrowRate',
-    outputs: [
-      {
-        internalType: 'uint256',
-        name: '',
-        type: 'uint256',
-      },
-    ],
-    stateMutability: 'view',
-    type: 'function',
-  },
-  {
-    inputs: [],
-    name: 'getMaxVariableBorrowRate',
-    outputs: [
-      {
-        internalType: 'uint256',
-        name: '',
-        type: 'uint256',
-      },
-    ],
-    stateMutability: 'view',
-    type: 'function',
-  },
-  {
-    inputs: [],
-    name: 'getVariableRateSlope1',
-    outputs: [
-      {
-        internalType: 'uint256',
-        name: '',
-        type: 'uint256',
-      },
-    ],
-    stateMutability: 'view',
-    type: 'function',
-  },
-  {
-    inputs: [],
-    name: 'getVariableRateSlope2',
-    outputs: [
-      {
-        internalType: 'uint256',
-        name: '',
-        type: 'uint256',
-      },
-    ],
-    stateMutability: 'view',
-    type: 'function',
-  },
-];
-
-export interface RatesDataResult {
-  currentUsageRatio: string;
-  optimalUsageRatio: string;
-  baseVariableBorrowRate: string;
-  variableRateSlope1: string;
-  variableRateSlope2: string;
-  underlyingAsset: string;
-  name: string;
-  symbol: string;
-  decimals: string;
-}
-
-const calculateUtilizationRate = (
-  decimals: number,
-  totalDebt: string,
-  availableLiquidity: string,
-): bigint => {
-  // Create BigNumber instances
-  const totalBorrow = BigInt(utils.parseUnits(totalDebt, decimals).toString());
-  const totalSupply = BigInt(availableLiquidity) + totalBorrow;
-  // Perform division
-  return (totalBorrow * BigInt(10 ** 18)) / totalSupply;
-};
-
-export const useAaveInterestRatesData = (): {
-  data: RatesDataResult | null;
-  error: string | null;
-} => {
-  const [data, setData] = useState<RatesDataResult | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  const { provider } = useAccount();
-
-  const [searchParams] = useSearchParams();
-  const symbol = searchParams.get('asset') || 'ETH';
-  const { reserves, loading } = useAaveReservesData();
-  const reserve: Reserve | undefined = reserves.find(
-    r => r.symbol.toLocaleLowerCase() === symbol.toLocaleLowerCase(),
-  );
-  const interestRateStrategyAddress = reserve?.interestRateStrategyAddress;
-
-  const rateContract = useMemo(
-    () =>
-      provider && interestRateStrategyAddress && !loading
-        ? new Contract(
-            interestRateStrategyAddress,
-            INTEREST_RATE_STRATEGY_ABI,
-            provider,
-          )
-        : null,
-    [loading, interestRateStrategyAddress, provider],
-  );
-
-  useEffect(() => {
-    if (loading || !rateContract || !reserve) return;
-    let ratesData: RatesDataResult;
-    try {
-      const utilizationRate = calculateUtilizationRate(
-        reserve.decimals,
-        reserve.totalDebt,
-        reserve.availableLiquidity,
-      );
-      ratesData = {
-        currentUsageRatio: formatUnits(
-          utilizationRate,
-          BIG_NUMBER_PRECISION_EIGHTEEN,
-        ),
-        optimalUsageRatio: formatUnits(
-          reserve.optimalUsageRatio,
-          BIG_NUMBER_PRECISION_TWENTY_SEVEN,
-        ).toString(),
-        baseVariableBorrowRate: formatUnits(
-          reserve.baseVariableBorrowRate,
-          BIG_NUMBER_PRECISION_TWENTY_SEVEN,
-        ).toString(),
-        variableRateSlope1: formatUnits(
-          reserve.variableRateSlope1,
-          BIG_NUMBER_PRECISION_TWENTY_SEVEN,
-        ).toString(),
-        variableRateSlope2: formatUnits(
-          reserve.variableRateSlope2,
-          BIG_NUMBER_PRECISION_TWENTY_SEVEN,
-        ).toString(),
-        underlyingAsset: reserve.underlyingAsset,
-        name: reserve.name,
-        symbol: reserve.symbol,
-        decimals: reserve.decimals.toString(),
-      };
-      setData(ratesData);
-    } catch (error) {
-      setError(error.message);
-    }
-  }, [symbol, loading, reserve, rateContract]);
-
-  return { data, error };
-};
diff --git a/apps/frontend/src/hooks/aave/useReservesHistory.tsx b/apps/frontend/src/hooks/aave/useReservesHistory.tsx
deleted file mode 100644
index f35fb0c5d..000000000
--- a/apps/frontend/src/hooks/aave/useReservesHistory.tsx
+++ /dev/null
@@ -1,173 +0,0 @@
-/**
- * This hook is used for getting historical reserve data, and it is primarily used with charts.
- * In particular, this hook is used in the  ̶A̶p̶y̶G̶r̶a̶p̶h̶ AaveReserveOverviewPage (chartJS).
- */
-import { useCallback, useEffect, useState } from 'react';
-
-import dayjs from 'dayjs';
-
-import { config } from '../../constants/aave';
-import { makeCancelable } from './utils';
-
-export enum ESupportedTimeRanges {
-  OneMonth = '1m',
-  ThreeMonths = '3m',
-  SixMonths = '6m',
-  OneYear = '1y',
-  TwoYears = '2y',
-  FiveYears = '5y',
-}
-
-export const reserveRateTimeRangeOptions = [
-  ESupportedTimeRanges.OneMonth,
-  ESupportedTimeRanges.SixMonths,
-  ESupportedTimeRanges.OneYear,
-];
-export type ReserveRateTimeRange = typeof reserveRateTimeRangeOptions[number];
-
-type RatesHistoryParams = {
-  from: number;
-  resolutionInHours: number;
-};
-
-type APIResponse = {
-  liquidityRate_avg: number;
-  variableBorrowRate_avg: number;
-  stableBorrowRate_avg: number;
-  utilizationRate_avg: number;
-  x: { year: number; month: number; date: number; hours: number };
-};
-
-const fetchStats = async (
-  address: string,
-  timeRange: ReserveRateTimeRange,
-  endpointURL: string,
-): Promise<APIResponse[]> => {
-  const { from, resolutionInHours } = resolutionForTimeRange(timeRange);
-
-  try {
-    const url = `${endpointURL}?reserveId=${address}&from=${from}&resolutionInHours=${resolutionInHours}`;
-    const result = await fetch(url);
-    const json = await result.json();
-    return json;
-  } catch (e) {
-    return [];
-  }
-};
-
-// TODO: there is possibly a bug here, as Polygon and Avalanche v2 data is coming through empty and erroring in our hook
-// The same asset without the 'from' field comes through just fine.
-const resolutionForTimeRange = (
-  timeRange: ReserveRateTimeRange,
-): RatesHistoryParams => {
-  // Return today as a fallback
-  let calculatedDate = dayjs().unix();
-  switch (timeRange) {
-    case ESupportedTimeRanges.OneMonth:
-      calculatedDate = dayjs().subtract(30, 'day').unix();
-      return {
-        from: calculatedDate,
-        resolutionInHours: 6,
-      };
-    case ESupportedTimeRanges.SixMonths:
-      calculatedDate = dayjs().subtract(6, 'month').unix();
-      return {
-        from: calculatedDate,
-        resolutionInHours: 24,
-      };
-    case ESupportedTimeRanges.OneYear:
-      calculatedDate = dayjs().subtract(1, 'year').unix();
-      return {
-        from: calculatedDate,
-        resolutionInHours: 24,
-      };
-    default:
-      return {
-        from: calculatedDate,
-        resolutionInHours: 6,
-      };
-  }
-};
-
-export type FormattedReserveHistoryItem = {
-  date: number;
-  liquidityRate: number;
-  utilizationRate: number;
-  stableBorrowRate: number;
-  variableBorrowRate: number;
-};
-
-// TODO: api need to be altered to expect chainId underlying asset and poolConfig
-/**
- *
- * @param reserveAddress
- * @param timeRange
- * @returns
- */
-export function useReserveRatesHistory(
-  reserveAddress: string,
-  timeRange: ReserveRateTimeRange,
-) {
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(false);
-  const [data, setData] = useState<FormattedReserveHistoryItem[]>([]);
-
-  const ratesHistoryApiUrl = config.ratesHistoryApiUrl;
-
-  const refetchData = useCallback<() => () => void>(() => {
-    // reset
-    setLoading(true);
-    setError(false);
-    setData([]);
-
-    if (reserveAddress && ratesHistoryApiUrl) {
-      const cancelable = makeCancelable(
-        fetchStats(reserveAddress, timeRange, ratesHistoryApiUrl),
-      );
-
-      cancelable.promise
-        .then((data: APIResponse[]) => {
-          setData(
-            data.map(d => ({
-              date: new Date(
-                d.x.year,
-                d.x.month,
-                d.x.date,
-                d.x.hours,
-              ).getTime(),
-              liquidityRate: d.liquidityRate_avg,
-              variableBorrowRate: d.variableBorrowRate_avg,
-              utilizationRate: d.utilizationRate_avg,
-              stableBorrowRate: d.stableBorrowRate_avg,
-            })),
-          );
-          setLoading(false);
-        })
-        .catch(e => {
-          console.error(
-            'useReservesHistory(): Failed to fetch historical reserve data.',
-            e,
-          );
-          setError(true);
-          setLoading(false);
-        });
-
-      return cancelable.cancel;
-    }
-
-    setLoading(false);
-    return () => null;
-  }, [reserveAddress, timeRange, ratesHistoryApiUrl]);
-
-  useEffect(() => {
-    const cancel = refetchData();
-    return () => cancel();
-  }, [refetchData]);
-
-  return {
-    loading,
-    data,
-    error,
-    refetch: refetchData,
-  };
-}
diff --git a/apps/frontend/src/hooks/aave/utils.ts b/apps/frontend/src/hooks/aave/utils.ts
deleted file mode 100644
index 13bbb98f4..000000000
--- a/apps/frontend/src/hooks/aave/utils.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-export interface CancelablePromise<T = unknown> {
-  promise: Promise<T>;
-  cancel: () => void;
-}
-
-export const makeCancelable = <T>(promise: Promise<T>) => {
-  let hasCanceled_ = false;
-
-  const wrappedPromise = new Promise<T>((resolve, reject) => {
-    promise.then(
-      val => (hasCanceled_ ? reject({ isCanceled: true }) : resolve(val)),
-      error => (hasCanceled_ ? reject({ isCanceled: true }) : reject(error)),
-    );
-  });
-
-  return {
-    promise: wrappedPromise,
-    cancel() {
-      hasCanceled_ = true;
-    },
-  };
-};
diff --git a/apps/frontend/src/hooks/useAddTokenToWallet.tsx b/apps/frontend/src/hooks/useAddTokenToWallet.tsx
index 533a347b2..76c6dba32 100644
--- a/apps/frontend/src/hooks/useAddTokenToWallet.tsx
+++ b/apps/frontend/src/hooks/useAddTokenToWallet.tsx
@@ -14,7 +14,7 @@ export const useAddTokenToWallet = (): {
           throw new Error('Wallet not available');
         }
 
-        (window as any)?.ethereum.request({
+        (window as any).ethereum.request({
           method: 'wallet_watchAsset',
           params: {
             type: 'ERC20',
diff --git a/apps/frontend/src/hooks/useNotifyError.tsx b/apps/frontend/src/hooks/useNotifyError.tsx
index 1e8fed183..e32e34a1f 100644
--- a/apps/frontend/src/hooks/useNotifyError.tsx
+++ b/apps/frontend/src/hooks/useNotifyError.tsx
@@ -12,10 +12,10 @@ export const useNotifyError = () => {
   const { addNotification } = useNotificationContext();
 
   const notifyError = useCallback(
-    (error: Error) => {
+    (error: Error, title?: string) => {
       addNotification({
         type: NotificationType.error,
-        title: t(translations.common.somethingWentWrong),
+        title: title ?? t(translations.common.somethingWentWrong),
         content: error.message,
         dismissible: true,
         id: nanoid(),
diff --git a/yarn.lock b/yarn.lock
index b6125fd33..d72a13f05 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7,14 +7,14 @@
   resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf"
   integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
 
-"@aave/contract-helpers@^1.29.1":
+"@aave/contract-helpers@1.29.1":
   version "1.29.1"
   resolved "https://registry.yarnpkg.com/@aave/contract-helpers/-/contract-helpers-1.29.1.tgz#34beab8afa35bbfc6168c78ced8317d96a493fe0"
   integrity sha512-34z5CKpNdEx26G+DSezovdR3PyAf0v0Typbf2udaKG4GrOBgqbKqxr4zqS/dpFO5aAQJJ+nuEM19lKRK4sMcpg==
   dependencies:
     isomorphic-unfetch "^3.1.0"
 
-"@aave/math-utils@^1.29.1":
+"@aave/math-utils@1.29.1":
   version "1.29.1"
   resolved "https://registry.yarnpkg.com/@aave/math-utils/-/math-utils-1.29.1.tgz#fcb9499bd472bde7b80429c7dbe63d4358852697"
   integrity sha512-a+L2+vjza/nH4BxUTzwDcoJH/Qr6UP+g+9YSwG7YKUgoVfdy8gJs5VyXjfDDEVe9lMeZuPJq7CqrgV4P2M6Nkg==
@@ -21052,7 +21052,7 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
-reflect-metadata@^0.2.2:
+reflect-metadata@0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.2.2.tgz#400c845b6cba87a21f2c65c4aeb158f4fa4d9c5b"
   integrity sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==

From 8db5467c5ad7fa35de74a4d1f42473d378d5ff89 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Fri, 6 Sep 2024 19:40:24 +0300
Subject: [PATCH 082/116] cleanup

---
 .../InterestRateModelGraph.tsx                | 12 +++-
 .../components/Chart/Chart.constants.ts       |  2 +
 .../components/Chart/Chart.tsx                | 33 ++---------
 .../components/Chart/Chart.utils.ts           | 28 +++++++++
 .../SupplyDetailsGraph/SupplyDetailsGraph.tsx | 57 +++++++------------
 .../components/TopPanel/TopPanel.tsx          | 30 +---------
 .../WalletOverview/WalletOverview.tsx         | 10 ++--
 .../components/BorrowAction/BorrowAction.tsx  |  8 ++-
 apps/frontend/src/constants/aave.ts           |  1 -
 .../src/hooks/aave/useAaveReservesData.tsx    |  3 +-
 .../src/hooks/useAddTokenToWallet.tsx         | 10 ++--
 .../aave/AaveBorrowTransactionsFactory.ts     |  4 +-
 .../src/utils/aave/AaveCalculations.ts        |  9 ---
 13 files changed, 93 insertions(+), 114 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
index 0a1246913..2d91d245e 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
@@ -34,6 +34,10 @@ export const InterestRateModelGraph: FC<InterestRateModelGraphProps> = ({
     }`;
   }, []);
 
+  const collectorContractUrl = useMemo(() => {
+    return `${getBobExplorerUrl()}/address/${config.TreasuryAddress}`;
+  }, []);
+
   const currentUsageRatio = useMemo(() => {
     return Decimal.from(reserve.borrowUsageRatio).mul(100);
   }, [reserve.borrowUsageRatio]);
@@ -94,7 +98,13 @@ export const InterestRateModelGraph: FC<InterestRateModelGraphProps> = ({
           />
           <StatisticsCard
             label={t(pageTranslations.collectorContract)}
-            value={<Link href="#" text={t(pageTranslations.viewContract)} />}
+            value={
+              <Link
+                openNewTab
+                href={collectorContractUrl}
+                text={t(pageTranslations.viewContract)}
+              />
+            }
           />
         </div>
       </div>
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.constants.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.constants.ts
index b5fc9efd5..1616f5f2f 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.constants.ts
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.constants.ts
@@ -2,6 +2,8 @@ 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;
 
 export const CUSTOM_CANVAS_BACKGROUND_COLOR = {
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
index 8b4895318..a31914864 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
@@ -6,12 +6,16 @@ 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 { htmlLegendPlugin } from './Chart.utils';
+import {
+  calculateVariableInterestRateModel,
+  htmlLegendPlugin,
+} from './Chart.utils';
 
 type ChartProps = {
   meta: {
@@ -21,30 +25,6 @@ type ChartProps = {
   rates: RatesData;
 };
 
-const calcInterestRateModel = (
-  u: number,
-  base: number,
-  optimal: number,
-  slope1: number,
-  slope2: number,
-) => {
-  if (u === 0) return 0;
-
-  if (u <= optimal) return base + (u / optimal) * slope1;
-
-  return base + slope1 + ((u - optimal) / (1 - optimal)) * slope2;
-};
-
-const calcVariableInterestRateModel = (u: number, rates: RatesData) => {
-  const base = parseFloat(rates.baseVariableBorrowRate);
-  const optimal = parseFloat(rates.optimalUsageRatio);
-  const slope1 = parseFloat(rates.variableRateSlope1);
-  const slope2 = parseFloat(rates.variableRateSlope2);
-
-  return calcInterestRateModel(u, base, optimal, slope1, slope2);
-};
-const CHART_PERCENTAGES = [0, 0.25, 0.5, 0.75, 1];
-
 export const Chart: FC<ChartProps> = ({ meta, rates }) => {
   const canvas = useRef<HTMLCanvasElement>(null);
   const chartRef = useRef<ChartLibrary | null>(null);
@@ -53,7 +33,7 @@ export const Chart: FC<ChartProps> = ({ meta, rates }) => {
     () =>
       CHART_PERCENTAGES.map(x => ({
         x: x * 100,
-        y: calcVariableInterestRateModel(x, rates) * 100,
+        y: calculateVariableInterestRateModel(x, rates) * 100,
       })),
     [rates],
   );
@@ -136,7 +116,6 @@ export const Chart: FC<ChartProps> = ({ meta, rates }) => {
               callback: function (value) {
                 return value + '%';
               },
-              //maxTicksLimit: 5,
             },
           },
           y: {
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.utils.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.utils.ts
index 40a303ffa..28f4bf540 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.utils.ts
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.utils.ts
@@ -1,3 +1,5 @@
+import { RatesData } from './Chart.types';
+
 const getOrCreateLegendList = id => {
   const legendContainer = document.getElementById(id);
   if (!legendContainer) {
@@ -87,3 +89,29 @@ export const htmlLegendPlugin = {
     });
   },
 };
+
+export const calculateInterestRateModel = (
+  u: number,
+  base: number,
+  optimal: number,
+  slope1: number,
+  slope2: number,
+) => {
+  if (u === 0) return 0;
+
+  if (u <= optimal) return base + (u / optimal) * slope1;
+
+  return base + slope1 + ((u - optimal) / (1 - optimal)) * slope2;
+};
+
+export const calculateVariableInterestRateModel = (
+  u: number,
+  rates: RatesData,
+) => {
+  const base = parseFloat(rates.baseVariableBorrowRate);
+  const optimal = parseFloat(rates.optimalUsageRatio);
+  const slope1 = parseFloat(rates.variableRateSlope1);
+  const slope2 = parseFloat(rates.variableRateSlope2);
+
+  return calculateInterestRateModel(u, base, optimal, slope1, slope2);
+};
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
index 4678feea7..b77fc7d08 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
@@ -5,7 +5,6 @@ import { t } from 'i18next';
 
 import { theme } from '@sovryn/tailwindcss-config';
 import { Accordion, Icon, IconNames, Paragraph } from '@sovryn/ui';
-import { Decimal } from '@sovryn/utils';
 
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
@@ -13,6 +12,7 @@ import { Reserve } from '../../../../../hooks/aave/useAaveReservesData';
 import { useIsMobile } from '../../../../../hooks/useIsMobile';
 import { translations } from '../../../../../locales/i18n';
 import { formatAmountWithSuffix } from '../../../../../utils/math';
+import { normalizeSupplyStats } from './SupplyDetailsGraph.utils';
 import { Chart } from './components/Chart/Chart';
 
 const pageTranslations = translations.aaveReserveOverviewPage.supplyDetails;
@@ -27,33 +27,8 @@ export const SupplyDetailsGraph: FC<SupplyDetailsGraphProps> = ({
   const [open, setOpen] = useState(true);
   const { isMobile } = useIsMobile();
 
-  const totalSupplied = useMemo(() => {
-    return Decimal.from(reserve.availableLiquidity).add(reserve.totalDebt);
-  }, [reserve]);
-
-  const totalSuppliedUSD = useMemo(() => {
-    return Decimal.from(reserve.availableLiquidityUSD).add(
-      reserve.totalDebtUSD,
-    );
-  }, [reserve]);
-
-  const supplyCap = useMemo(() => {
-    return Decimal.from(reserve.supplyCap);
-  }, [reserve]);
-
-  const supplyCapUSD = useMemo(() => {
-    return Decimal.from(reserve.supplyCapUSD);
-  }, [reserve]);
-
-  const suppliedPercentage = useMemo(() => {
-    return Decimal.from(totalSuppliedUSD)
-      .div(Decimal.from(reserve.supplyCapUSD))
-      .mul(100)
-      .toString(0);
-  }, [reserve, totalSuppliedUSD]);
-
-  const maxLTV = useMemo(() => {
-    return Decimal.from(reserve.baseLTVasCollateral).div(100);
+  const supplyStats = useMemo(() => {
+    return normalizeSupplyStats(reserve);
   }, [reserve]);
 
   return (
@@ -80,14 +55,14 @@ export const SupplyDetailsGraph: FC<SupplyDetailsGraphProps> = ({
                 <div className="space-x-1 font-medium text-base">
                   <AmountRenderer
                     precision={2}
-                    {...formatAmountWithSuffix(totalSupplied)}
+                    {...formatAmountWithSuffix(supplyStats.totalSupplied)}
                   />
-                  {supplyCap.gt(0) && (
+                  {supplyStats.supplyCap.gt(0) && (
                     <>
                       <span>{t(pageTranslations.of)}</span>
                       <AmountRenderer
                         precision={2}
-                        {...formatAmountWithSuffix(supplyCap)}
+                        {...formatAmountWithSuffix(supplyStats.supplyCap)}
                       />
                     </>
                   )}
@@ -97,25 +72,27 @@ export const SupplyDetailsGraph: FC<SupplyDetailsGraphProps> = ({
                   <AmountRenderer
                     prefix="$"
                     precision={2}
-                    {...formatAmountWithSuffix(totalSuppliedUSD)}
+                    {...formatAmountWithSuffix(supplyStats.totalSuppliedUSD)}
                   />
-                  {supplyCap.gt(0) && (
+                  {supplyStats.supplyCap.gt(0) && (
                     <>
                       <span>{t(pageTranslations.of)}</span>
                       <AmountRenderer
                         prefix="$"
                         precision={2}
-                        {...formatAmountWithSuffix(supplyCapUSD)}
+                        {...formatAmountWithSuffix(supplyStats.supplyCapUSD)}
                       />
                     </>
                   )}
                 </div>
 
                 {/* Progress bar */}
-                {supplyCap.gt(0) && (
+                {supplyStats.supplyCap.gt(0) && (
                   <div className="mt-2 h-[3px] w-[160px] bg-gray-70 rounded-full">
                     <div
-                      className={`h-full bg-primary-30 w-[${suppliedPercentage}%]`}
+                      className={`h-full bg-primary-30 w-[${supplyStats.suppliedPercentage.toString(
+                        0,
+                      )}%]`}
                     ></div>
                   </div>
                 )}
@@ -178,7 +155,13 @@ export const SupplyDetailsGraph: FC<SupplyDetailsGraphProps> = ({
             <StatisticsCard
               label={t(pageTranslations.maxLtv)}
               help={t(pageTranslations.maxLtvInfo)}
-              value={<AmountRenderer value={maxLTV} suffix="%" precision={2} />}
+              value={
+                <AmountRenderer
+                  value={supplyStats.maxLTV}
+                  suffix="%"
+                  precision={2}
+                />
+              }
             />
 
             {/* liquidation threshold */}
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
index 82bdf38bf..e78e7d8d9 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
@@ -22,7 +22,7 @@ import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRen
 import { AssetRenderer } from '../../../../2_molecules/AssetRenderer/AssetRenderer';
 import { StatisticsCard } from '../../../../2_molecules/StatisticsCard/StatisticsCard';
 import { Reserve } from '../../../../../hooks/aave/useAaveReservesData';
-import { useNotifyError } from '../../../../../hooks/useNotifyError';
+import { useAddTokenToWallet } from '../../../../../hooks/useAddTokenToWallet';
 import { translations } from '../../../../../locales/i18n';
 import { getBobExplorerUrl } from '../../../../../utils/helpers';
 import { formatAmountWithSuffix } from '../../../../../utils/math';
@@ -50,37 +50,13 @@ type TopPanelProps = {
 };
 
 export const TopPanel: FC<TopPanelProps> = ({ reserve, className }) => {
-  const { notifyError } = useNotifyError();
+  const { addTokenToWallet } = useAddTokenToWallet(BOB_CHAIN_ID);
 
   const openInExplorer = useCallback((tokenAddress: string) => {
     const explorer = getBobExplorerUrl();
     window.open(`${explorer}/address/${tokenAddress}`, '_blank');
   }, []);
 
-  const addToWallet = useCallback(
-    (token: string) => {
-      try {
-        if (!(window as any)?.ethereum) {
-          throw new Error('Wallet not available');
-        }
-
-        (window as any)?.ethereum.request({
-          method: 'wallet_watchAsset',
-          params: {
-            type: 'ERC20',
-            options: {
-              chainId: BOB_CHAIN_ID,
-              address: token,
-            },
-          },
-        });
-      } catch (error) {
-        notifyError(error);
-      }
-    },
-    [notifyError],
-  );
-
   const oracleLink = useMemo(() => {
     return getBobExplorerUrl() + '/address/' + reserve.priceOracle;
   }, [reserve.priceOracle]);
@@ -157,7 +133,7 @@ export const TopPanel: FC<TopPanelProps> = ({ reserve, className }) => {
                   underlyingTokenAddress={reserve.underlyingAsset}
                   variableDebtTokenAddress={reserve.variableDebtTokenAddress}
                   stableDebtTokenAddress={reserve.stableDebtTokenAddress}
-                  onTokenClick={addToWallet}
+                  onTokenClick={addTokenToWallet}
                 />
               }
             >
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/WalletOverview.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/WalletOverview.tsx
index ef9b931e6..cc36fcced 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/WalletOverview.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/WalletOverview.tsx
@@ -28,7 +28,7 @@ type WalletOverviewProps = {
 };
 
 export const WalletOverview: FC<WalletOverviewProps> = ({ symbol }) => {
-  const [asset, setAsset] = useState<AssetDetailsData | null>();
+  const [asset, setAsset] = useState<AssetDetailsData>();
   const { account, connectWallet, pending } = useWalletConnect();
   const { summary } = useAaveUserReservesData();
 
@@ -40,6 +40,10 @@ export const WalletOverview: FC<WalletOverviewProps> = ({ symbol }) => {
     return summary.reserves.find(r => r.reserve.symbol === symbol);
   }, [summary, symbol]);
 
+  const supplyCapReached = useMemo(() => {
+    return Decimal.from(reserveSummary?.reserve.supplyUsageRatio ?? 0).gte(1);
+  }, [reserveSummary?.reserve.supplyUsageRatio]);
+
   return (
     <div className="bg-gray-90 p-6 rounded space-y-6 lg:bg-gray-90 lg:p-6 border border-gray-60">
       <Paragraph className="text-base">
@@ -97,9 +101,7 @@ export const WalletOverview: FC<WalletOverviewProps> = ({ symbol }) => {
             />
           )}
 
-          {Decimal.from(reserveSummary?.reserve.supplyUsageRatio ?? 0).gte(
-            1,
-          ) && (
+          {supplyCapReached && (
             <ErrorBadge
               level={ErrorLevel.Critical}
               message={t(pageTranslations.yourWalletTab.noSupply)}
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx
index d7a17f933..32d3c7bfb 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useState } from 'react';
+import React, { FC, useCallback, useMemo, useState } from 'react';
 
 import { t } from 'i18next';
 
@@ -40,6 +40,10 @@ export const BorrowAction: FC<BorrowActionProps> = ({
     setOpen(true);
   }, []);
 
+  const isBorrowDisabled = useMemo(() => {
+    return availableToBorrow.lte(0);
+  }, [availableToBorrow]);
+
   return (
     <div className="flex justify-between items-center">
       <div className="space-y-2">
@@ -64,7 +68,7 @@ export const BorrowAction: FC<BorrowActionProps> = ({
       <Button
         onClick={onBorrowOpen}
         text={t(pageTranslations.yourWalletTab.borrow)}
-        disabled={availableToBorrow.lte(0)}
+        disabled={isBorrowDisabled}
       />
 
       <Dialog disableFocusTrap isOpen={open}>
diff --git a/apps/frontend/src/constants/aave.ts b/apps/frontend/src/constants/aave.ts
index c31379541..653a4e14a 100644
--- a/apps/frontend/src/constants/aave.ts
+++ b/apps/frontend/src/constants/aave.ts
@@ -11,5 +11,4 @@ export const config = {
   TreasuryAddress: '0x2a9d8f5b2f7b8f5b4b5d5e7f3b4b5d5b5d5d5d5d',
   InterestRateStrategyAddress: '0x847A3364Cc5fE389283bD821cfC8A477288D9e82',
   RepayAllETHSurplus: '1000000',
-  ratesHistoryApiUrl: process.env.REACT_APP_AAVE_API_URI,
 };
diff --git a/apps/frontend/src/hooks/aave/useAaveReservesData.tsx b/apps/frontend/src/hooks/aave/useAaveReservesData.tsx
index 164acc87a..ca7172432 100644
--- a/apps/frontend/src/hooks/aave/useAaveReservesData.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveReservesData.tsx
@@ -13,6 +13,7 @@ import { getProvider } from '@sovryn/ethers-provider';
 import { BOB_CHAIN_ID } from '../../config/chains';
 
 import { config } from '../../constants/aave';
+import { ETH, WETH } from '../../constants/currencies';
 
 export type Reserve = ReserveDataHumanized & FormatReserveUSDResponse;
 export type ReserveData = { reserves: Reserve[]; loading: boolean };
@@ -44,7 +45,7 @@ export const useAaveReservesData = (): ReserveData => {
     setReserves(
       // rename weth to eth. We don't expose WETH through ui.
       formattedReserves.map(r =>
-        r.symbol === 'WETH' ? { ...r, symbol: 'ETH' } : r,
+        r.symbol === WETH ? { ...r, symbol: ETH } : r,
       ),
     );
   }, [setReserves]);
diff --git a/apps/frontend/src/hooks/useAddTokenToWallet.tsx b/apps/frontend/src/hooks/useAddTokenToWallet.tsx
index 76c6dba32..9817f4da8 100644
--- a/apps/frontend/src/hooks/useAddTokenToWallet.tsx
+++ b/apps/frontend/src/hooks/useAddTokenToWallet.tsx
@@ -2,13 +2,15 @@ import { useCallback } from 'react';
 
 import { useNotifyError } from './useNotifyError';
 
-export const useAddTokenToWallet = (): {
-  addTokenToWallet: (tokenAddress: string, chainId: string) => void;
+export const useAddTokenToWallet = (
+  chainId: string,
+): {
+  addTokenToWallet: (tokenAddress: string) => void;
 } => {
   const { notifyError } = useNotifyError();
 
   const addTokenToWallet = useCallback(
-    (tokenAddress: string, chainId: string) => {
+    (tokenAddress: string) => {
       try {
         if (!(window as any)?.ethereum) {
           throw new Error('Wallet not available');
@@ -28,7 +30,7 @@ export const useAddTokenToWallet = (): {
         notifyError(error);
       }
     },
-    [notifyError],
+    [notifyError, chainId],
   );
 
   return { addTokenToWallet };
diff --git a/apps/frontend/src/utils/aave/AaveBorrowTransactionsFactory.ts b/apps/frontend/src/utils/aave/AaveBorrowTransactionsFactory.ts
index 59b3a6d71..b16da8fcf 100644
--- a/apps/frontend/src/utils/aave/AaveBorrowTransactionsFactory.ts
+++ b/apps/frontend/src/utils/aave/AaveBorrowTransactionsFactory.ts
@@ -73,7 +73,9 @@ export class AaveBorrowTransactionsFactory {
         subtitle: t(translations.aavePage.tx.swapBorrowRateModeSubtitle, {
           symbol: asset.symbol,
           mode:
-            currentRateMode === BorrowRateMode.VARIABLE ? 'stable' : 'variable',
+            currentRateMode === BorrowRateMode.VARIABLE
+              ? t(translations.aavePage.common.stable)
+              : t(translations.aavePage.common.variable),
         }),
         request: {
           type: TransactionType.signTransaction,
diff --git a/apps/frontend/src/utils/aave/AaveCalculations.ts b/apps/frontend/src/utils/aave/AaveCalculations.ts
index 4d9b692b6..088598c13 100644
--- a/apps/frontend/src/utils/aave/AaveCalculations.ts
+++ b/apps/frontend/src/utils/aave/AaveCalculations.ts
@@ -29,15 +29,6 @@ export class AaveCalculations {
     );
   }
 
-  static computeBorrowedBalance(
-    reserves: UserSummary['userReservesData'],
-  ): Decimal {
-    return reserves.reduce(
-      (borrowedBalance, r) => borrowedBalance.add(r.totalBorrows),
-      Decimal.from(0),
-    );
-  }
-
   static computeBorrowPower(
     minCollateralRatio: Decimal,
     collateralBalance: Decimal,

From 292170ec4df76980d2dd43591726535488580213 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Fri, 6 Sep 2024 21:11:40 +0300
Subject: [PATCH 083/116] fixes

---
 .../EfficiencyModeCard/EfficencyModeCard.utils.ts     |  2 +-
 apps/frontend/src/utils/aave/AaveEModeCategories.ts   |  2 +-
 .../src/utils/aave/AaveUserReservesSummary.ts         | 11 ++++++++---
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficencyModeCard.utils.ts b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficencyModeCard.utils.ts
index 9ee152a6b..bb79bd4f5 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficencyModeCard.utils.ts
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficencyModeCard.utils.ts
@@ -52,7 +52,7 @@ export const normalizeEModeSummary = (
   );
 
   return {
-    ltv: Decimal.from(summary.currentLoanToValue).mul(100),
+    ltv: Decimal.from(summary.currentLoanToValue).div(100),
     collateralRatio,
     liquidationRisk,
   };
diff --git a/apps/frontend/src/utils/aave/AaveEModeCategories.ts b/apps/frontend/src/utils/aave/AaveEModeCategories.ts
index d59123b44..18379b821 100644
--- a/apps/frontend/src/utils/aave/AaveEModeCategories.ts
+++ b/apps/frontend/src/utils/aave/AaveEModeCategories.ts
@@ -95,7 +95,7 @@ export class AaveEModeCategories {
 
     return {
       id: categoryId,
-      ltv: Decimal.from(ltv).mul(100),
+      ltv: Decimal.from(ltv).div(100),
       liquidationThreshold: Decimal.from(liquidationThreshold).mul(100),
       liquidationBonus: Decimal.from(liquidationBonus).mul(100),
       label,
diff --git a/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts b/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
index 8f1f1ee93..f28073a47 100644
--- a/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
+++ b/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
@@ -208,6 +208,12 @@ export class AaveUserReservesSummaryFactory {
           const availableLiquidity = Decimal.from(
             formatUnits(r.reserve.availableLiquidity, r.reserve.decimals),
           );
+          const availableToBorrow = availableLiquidity.lt(canBorrow)
+            ? availableLiquidity
+            : canBorrow;
+          const availableToBorrowUSD = availableToBorrow.mul(
+            r.reserve.priceInUSD,
+          );
 
           return {
             asset: symbol,
@@ -221,9 +227,8 @@ export class AaveUserReservesSummaryFactory {
             suppliedUSD: Decimal.from(r.underlyingBalanceUSD),
             borrowed: Decimal.from(r.totalBorrows),
             borrowedUSD: Decimal.from(r.totalBorrowsUSD),
-            availableToBorrow: availableLiquidity.lt(canBorrow)
-              ? availableLiquidity
-              : canBorrow,
+            availableToBorrow,
+            availableToBorrowUSD,
 
             borrowRateMode: Decimal.from(r.variableBorrows).gt(0)
               ? BorrowRateMode.VARIABLE

From 2b0cbf635b3d000580d29dff5b36ea271813fab1 Mon Sep 17 00:00:00 2001
From: Luciano Perez Cerra <luchopcerra@gmail.com>
Date: Fri, 6 Sep 2024 15:36:15 -0300
Subject: [PATCH 084/116] fix: prevent NaN in interest rate charts when no data
 is retrieved

---
 .../components/Chart/Chart.tsx                  | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
index a31914864..8e4cb6d53 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
@@ -38,12 +38,17 @@ export const Chart: FC<ChartProps> = ({ meta, rates }) => {
     [rates],
   );
 
-  const optimalPercentage = parseFloat(
-    (parseFloat(rates.optimalUsageRatio) * 100).toFixed(2),
-  );
-  const currentPercentage = parseFloat(
-    (parseFloat(rates.currentUsageRatio) * 100).toFixed(2),
-  );
+  const optimalPercentage = useMemo(() => {
+    return rates.optimalUsageRatio
+      ? parseFloat((parseFloat(rates.optimalUsageRatio) * 100).toFixed(2))
+      : 0;
+  }, [rates.optimalUsageRatio]);
+
+  const currentPercentage = useMemo(() => {
+    return rates.currentUsageRatio
+      ? parseFloat((parseFloat(rates.currentUsageRatio) * 100).toFixed(2))
+      : 0;
+  }, [rates.currentUsageRatio]);
 
   const optimalValue = useMemo(() => {
     return [

From 7b64c5ed1cb64302e68607a8232ceec0f3780d5f Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Fri, 6 Sep 2024 21:52:01 +0300
Subject: [PATCH 085/116] fix stats

---
 .../AaveReserveOverviewPage.constants.tsx        | 16 ++++++++++++++++
 .../AaveReserveOverviewPage.tsx                  | 14 ++------------
 .../SupplyDetailsGraph/SupplyDetailsGraph.tsx    |  4 ++--
 3 files changed, 20 insertions(+), 14 deletions(-)
 create mode 100644 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.constants.tsx

diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.constants.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.constants.tsx
new file mode 100644
index 000000000..2bed454fe
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.constants.tsx
@@ -0,0 +1,16 @@
+import { t } from 'i18next';
+
+import { translations } from '../../../locales/i18n';
+
+export const tabItems = [
+  {
+    activeClassName: 'text-primary-20',
+    dataAttribute: 'reserve-status',
+    label: t(translations.aaveReserveOverviewPage.reserveStatusTab.title),
+  },
+  {
+    activeClassName: 'text-primary-20',
+    dataAttribute: 'your-wallet',
+    label: t(translations.aaveReserveOverviewPage.yourWalletTab.title),
+  },
+];
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
index cc69a4756..6bdc4f586 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
@@ -9,6 +9,7 @@ import { Paragraph, Tabs, TabSize, TabType } from '@sovryn/ui';
 
 import { useAaveReservesData } from '../../../hooks/aave/useAaveReservesData';
 import { translations } from '../../../locales/i18n';
+import { tabItems } from '../AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.constants';
 import { BorrowDetailsGraph } from './components/BorrowDetailsGraph/BorrowDetailsGraph';
 import { EModeDetails } from './components/EModeDetails/EModeDetails';
 import { InterestRateModelGraph } from './components/InterestRateModelGraph/InterestRateModelGraph';
@@ -53,18 +54,7 @@ const AaveReserveOverviewPage: FC = () => {
         <Tabs
           className="w-full bg-gray-80 rounded p-1 border border-gray-60 lg:hidden"
           index={activeOverviewTab}
-          items={[
-            {
-              activeClassName: 'text-primary-20',
-              dataAttribute: 'reserve-status',
-              label: t(pageTranslations.reserveStatusTab.title),
-            },
-            {
-              activeClassName: 'text-primary-20',
-              dataAttribute: 'your-wallet',
-              label: t(pageTranslations.yourWalletTab.title),
-            },
-          ]}
+          items={tabItems}
           onChange={e => setActiveOverviewTab(e)}
           size={TabSize.normal}
           type={TabType.secondary}
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
index b77fc7d08..877aa801f 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
@@ -170,7 +170,7 @@ export const SupplyDetailsGraph: FC<SupplyDetailsGraphProps> = ({
               help={t(pageTranslations.liquidationThresholdInfo)}
               value={
                 <AmountRenderer
-                  value={reserve.reserveLiquidationThreshold}
+                  value={supplyStats.liquidationThreshold}
                   suffix="%"
                   precision={2}
                 />
@@ -183,7 +183,7 @@ export const SupplyDetailsGraph: FC<SupplyDetailsGraphProps> = ({
               help={t(pageTranslations.liquidationPenaltyInfo)}
               value={
                 <AmountRenderer
-                  value={reserve.reserveLiquidationBonus}
+                  value={supplyStats.liquidationPenalty}
                   suffix="%"
                   precision={2}
                 />

From 0e00afe6deb769c533d440b909991b38b13e5615 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Fri, 6 Sep 2024 21:56:17 +0300
Subject: [PATCH 086/116] fix available liquidity

---
 .../AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
index e78e7d8d9..9f0e48463 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
@@ -164,7 +164,7 @@ export const TopPanel: FC<TopPanelProps> = ({ reserve, className }) => {
             <AmountRenderer
               prefix="$"
               className="text-2xl"
-              {...formatAmountWithSuffix(reserve.availableLiquidity)}
+              {...formatAmountWithSuffix(reserve.formattedAvailableLiquidity)}
             />
           }
         />

From 1b0a825bcbdbbb00de4808ecf25d2a822813054a Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Fri, 6 Sep 2024 17:46:03 -0300
Subject: [PATCH 087/116] Update
 apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx

Co-authored-by: Juan <juandahl@users.noreply.github.com>
---
 .../components/LendAssetsList/LendAssetsList.constants.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
index 7db142116..913288f5a 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.constants.tsx
@@ -14,7 +14,7 @@ import { LendAssetAction } from './components/LendAssetAction/LendAssetAction';
 
 const pageTranslations = translations.aavePage;
 
-export const COLUMNS_CONFIG = (onLendClick: (asset: string) => unknown) => [
+export const COLUMNS_CONFIG = (onLendClick: (asset: string) => void) => [
   {
     id: 'asset',
     sortable: true,

From f16fd719873ab0eb687901d2e78c4c6b5ddb041d Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Fri, 6 Sep 2024 17:48:28 -0300
Subject: [PATCH 088/116] Update
 apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx

Co-authored-by: Juan <juandahl@users.noreply.github.com>
---
 .../components/BorrowPositionDetails/BorrowPositionDetails.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
index b6865e22f..e69276233 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
@@ -13,7 +13,7 @@ import { BorrowRateModeSelect } from '../BorrowRateModeSelect/BorrowRateModeSele
 
 type BorrowPositionDetailsProps = {
   position: BorrowPosition;
-  onRepayClick: () => unknown;
+  onRepayClick: () => void;
 };
 
 export const BorrowPositionDetails: FC<BorrowPositionDetailsProps> = ({

From f8a4b5f23009c289bc9e20e51f4e4c0bdf881529 Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Fri, 6 Sep 2024 17:52:05 -0300
Subject: [PATCH 089/116] Update
 apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx

Co-authored-by: Juan <juandahl@users.noreply.github.com>
---
 .../BorrowPositionsList/BorrowPositionsList.constants.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
index 88f3f0c6e..9512277dd 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
@@ -15,7 +15,7 @@ import { BorrowRateModeSelect } from './components/BorrowRateModeSelect/BorrowRa
 
 const pageTranslations = translations.aavePage;
 
-export const COLUMNS_CONFIG = (onRepayClick: (asset: string) => unknown) => [
+export const COLUMNS_CONFIG = (onRepayClick: (asset: string) => void) => [
   {
     id: 'asset',
     sortable: true,

From cde6014cf83b6e033708faace367e68adfb89cdc Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Sat, 7 Sep 2024 00:09:36 +0300
Subject: [PATCH 090/116] coments

---
 .../components/BorrowAssetAction/BorrowAssetAction.tsx   | 9 +++++++--
 .../components/BorrowModal/BorrowForm.tsx                | 3 ++-
 .../components/DisableEModeForm/DisableEModeForm.tsx     | 7 +++++--
 .../components/LendAssetDetails/LendAssetDetails.tsx     | 2 +-
 apps/frontend/src/constants/aave.ts                      | 2 ++
 5 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
index b0c4b40c1..fcaf49d30 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback } from 'react';
 
 import { t } from 'i18next';
 import { useNavigate } from 'react-router-dom';
@@ -22,6 +22,11 @@ export const BorrowAssetAction: FC<BorrowAssetActionProps> = ({
 }) => {
   const navigate = useNavigate();
 
+  const onDetailsClick = useCallback(
+    () => navigate(`/aave/reserve-overview?asset=${asset}`),
+    [navigate, asset],
+  );
+
   return (
     <div className="flex items-center justify-center lg:justify-end space-x-2">
       <Button
@@ -35,7 +40,7 @@ export const BorrowAssetAction: FC<BorrowAssetActionProps> = ({
         className="flex-grow lg:flex-grow-0 lg:w-min"
         text={t(pageTranslations.common.details)}
         style={ButtonStyle.secondary}
-        onClick={() => navigate(`/aave/reserve-overview?asset=${asset}`)}
+        onClick={onDetailsClick}
       />
     </div>
   );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
index b56df01bd..fb1a84ad4 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
@@ -8,6 +8,7 @@ import {
   ErrorBadge,
   ErrorLevel,
   Link,
+  SelectOption,
   SimpleTable,
   SimpleTableRow,
 } from '@sovryn/ui';
@@ -58,7 +59,7 @@ export const BorrowForm: FC<BorrowFormProps> = ({ asset, onComplete }) => {
           });
         }
         return acc;
-      }, [] as { value: string; label: JSX.Element }[]),
+      }, [] as SelectOption<string>[]),
     [summary.reserves],
   );
 
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx
index cca226a60..de59e60d3 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx
@@ -14,7 +14,10 @@ import {
 import { Decimal } from '@sovryn/utils';
 
 import { AmountRenderer } from '../../../../../../../../2_molecules/AmountRenderer/AmountRenderer';
-import { config } from '../../../../../../../../../constants/aave';
+import {
+  config,
+  EMODE_DISABLED_ID,
+} from '../../../../../../../../../constants/aave';
 import { useAaveSetUserEMode } from '../../../../../../../../../hooks/aave/useAaveSetUserEMode';
 import { useAaveUserReservesData } from '../../../../../../../../../hooks/aave/useAaveUserReservesData';
 import { translations } from '../../../../../../../../../locales/i18n';
@@ -41,7 +44,7 @@ export const DisableEModeForm: FC<DisableEModeFormProps> = ({
 
   const summaryAfterDisabled = useMemo(() => {
     return normalizeEModeSummary(
-      0, // disabled
+      EMODE_DISABLED_ID,
       reservesData,
       userReservesData,
       timestamp,
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
index f14b941a7..02538672a 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
@@ -12,7 +12,7 @@ import { LendAssetAction } from '../LendAssetAction/LendAssetAction';
 
 type LendAssetDetailsProps = {
   pool: LendPoolDetails;
-  onLendClick: () => unknown;
+  onLendClick: () => void;
 };
 
 export const LendAssetDetails: FC<LendAssetDetailsProps> = ({
diff --git a/apps/frontend/src/constants/aave.ts b/apps/frontend/src/constants/aave.ts
index 653a4e14a..feacb47a1 100644
--- a/apps/frontend/src/constants/aave.ts
+++ b/apps/frontend/src/constants/aave.ts
@@ -12,3 +12,5 @@ export const config = {
   InterestRateStrategyAddress: '0x847A3364Cc5fE389283bD821cfC8A477288D9e82',
   RepayAllETHSurplus: '1000000',
 };
+
+export const EMODE_DISABLED_ID = 0;

From a6054bd4132cd728d77bd3a822bf46ce0bd57ac3 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Mon, 9 Sep 2024 11:42:56 +0400
Subject: [PATCH 091/116] fix borrow power

---
 .../app/5_pages/AavePage/AavePage.utils.tsx   | 32 ++++++++++++-------
 .../src/utils/aave/AaveUserReservesSummary.ts |  8 ++++-
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx b/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
index 5b01426ef..b7ef0d1fe 100644
--- a/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
@@ -82,21 +82,29 @@ export const normalizeBorrowPoolDetails = (
     }, [] as BorrowPoolDetails[]);
   } else {
     return reserves.reduce((acc, r) => {
+      // skip borrow pools that are not enabled
+      if (!r.borrowingEnabled) {
+        return acc;
+      }
+
+      // skip borrow pools that are not enabled for the user
       if (
-        r.borrowingEnabled &&
-        (userReservesSummary.eModeCategoryId === r.eModeCategoryId ||
-          userReservesSummary.eModeCategoryId === 0)
+        userReservesSummary.eModeCategoryId !== r.eModeCategoryId &&
+        userReservesSummary.eModeCategoryId !== 0
       ) {
-        acc.push({
-          asset: r.symbol,
-          apy: Decimal.from(r.variableBorrowAPY).mul(100),
-          available:
-            userReservesSummary.reserves.find(
-              userReserve => r.symbol === userReserve.asset,
-            )?.availableToBorrow || Decimal.from(0),
-          availableUSD: userReservesSummary.borrowPower,
-        });
+        return acc;
       }
+
+      const userSummary = userReservesSummary.reserves.find(
+        userReserve => r.symbol === userReserve.asset,
+      );
+      acc.push({
+        asset: r.symbol,
+        apy: Decimal.from(r.variableBorrowAPY).mul(100),
+        available: userSummary?.availableToBorrow,
+        availableUSD: userSummary?.availableToBorrowUSD,
+      });
+
       return acc;
     }, [] as BorrowPoolDetails[]);
   }
diff --git a/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts b/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
index f28073a47..0dfeaaf7b 100644
--- a/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
+++ b/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
@@ -204,10 +204,16 @@ export class AaveUserReservesSummaryFactory {
           const asset = await getAssetData(symbol, BOB_CHAIN_ID);
           const balance = await getBalance(asset, account, provider);
           const decimalBalance = decimalic(fromWei(balance, asset.decimals));
-          const canBorrow = borrowPower.div(r.reserve.priceInUSD);
           const availableLiquidity = Decimal.from(
             formatUnits(r.reserve.availableLiquidity, r.reserve.decimals),
           );
+
+          // how much the user can borrow if there's no limit of supply
+          const canBorrow = borrowPower
+            .sub(borrowBalance)
+            .div(r.reserve.priceInUSD);
+
+          // available to borrow for user including liquidity limitation
           const availableToBorrow = availableLiquidity.lt(canBorrow)
             ? availableLiquidity
             : canBorrow;

From b3b476473ab3c83669dd75230eba0f5f46cfcd17 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Mon, 9 Sep 2024 11:49:54 +0400
Subject: [PATCH 092/116] fixes and cleanup

---
 .../app/5_pages/AavePage/AavePage.utils.tsx   | 69 ++++++++++---------
 1 file changed, 36 insertions(+), 33 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx b/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
index b7ef0d1fe..51026f5fe 100644
--- a/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
@@ -2,6 +2,7 @@ import { t } from 'i18next';
 
 import { Decimal } from '@sovryn/utils';
 
+import { EMODE_DISABLED_ID } from '../../../constants/aave';
 import { Reserve } from '../../../hooks/aave/useAaveReservesData';
 import { translations } from '../../../locales/i18n';
 import { BorrowRateMode } from '../../../types/aave';
@@ -31,7 +32,7 @@ export const normalizeLendPositions = (
     if (r.supplied.gt(0)) {
       acc.push({
         asset: r.reserve.symbol,
-        apy: Decimal.from(r.reserve.variableBorrowAPY),
+        apy: Decimal.from(r.reserve.supplyAPY).mul(100),
         supplied: r.supplied,
         suppliedUSD: r.suppliedUSD,
         collateral: r.collateral,
@@ -70,6 +71,7 @@ export const normalizeBorrowPoolDetails = (
   reserves: Reserve[],
   userReservesSummary: AaveUserReservesSummary,
 ): BorrowPoolDetails[] => {
+  // wallet not connected or summary not available at this point
   if (userReservesSummary.reserves.length === 0) {
     return reserves.reduce((acc, r) => {
       if (r.borrowingEnabled) {
@@ -80,40 +82,41 @@ export const normalizeBorrowPoolDetails = (
       }
       return acc;
     }, [] as BorrowPoolDetails[]);
-  } else {
-    return reserves.reduce((acc, r) => {
-      // skip borrow pools that are not enabled
-      if (!r.borrowingEnabled) {
-        return acc;
-      }
-
-      // skip borrow pools that are not enabled for the user
-      if (
-        userReservesSummary.eModeCategoryId !== r.eModeCategoryId &&
-        userReservesSummary.eModeCategoryId !== 0
-      ) {
-        return acc;
-      }
+  }
 
-      const userSummary = userReservesSummary.reserves.find(
-        userReserve => r.symbol === userReserve.asset,
-      );
-      acc.push({
-        asset: r.symbol,
-        apy: Decimal.from(r.variableBorrowAPY).mul(100),
-        available: userSummary?.availableToBorrow,
-        availableUSD: userSummary?.availableToBorrowUSD,
-      });
+  return reserves.reduce((acc, r) => {
+    // skip borrow pools that are not enabled
+    if (!r.borrowingEnabled) {
+      return acc;
+    }
 
+    // skip borrow pools that are not enabled for the user
+    if (
+      userReservesSummary.eModeCategoryId !== r.eModeCategoryId &&
+      userReservesSummary.eModeCategoryId !== EMODE_DISABLED_ID
+    ) {
       return acc;
-    }, [] as BorrowPoolDetails[]);
-  }
+    }
+
+    const userSummary = userReservesSummary.reserves.find(
+      userReserve => r.symbol === userReserve.asset,
+    );
+    acc.push({
+      asset: r.symbol,
+      apy: Decimal.from(r.variableBorrowAPY).mul(100),
+      available: userSummary?.availableToBorrow,
+      availableUSD: userSummary?.availableToBorrowUSD,
+    });
+
+    return acc;
+  }, [] as BorrowPoolDetails[]);
 };
 
 export const normalizeLendPoolDetails = (
   reserves: Reserve[],
   userReservesSummary: AaveUserReservesSummary,
 ): LendPoolDetails[] => {
+  // wallet not connected or summary not available at this point
   if (userReservesSummary.reserves.length === 0) {
     return reserves.map(r => ({
       asset: r.symbol,
@@ -121,12 +124,12 @@ export const normalizeLendPoolDetails = (
       canBeCollateral: r.usageAsCollateralEnabled,
       walletBalance: Decimal.from(0),
     }));
-  } else {
-    return userReservesSummary.reserves.map(r => ({
-      asset: r.reserve.symbol,
-      apy: Decimal.from(r.reserve.supplyAPY).mul(100),
-      canBeCollateral: r.reserve.usageAsCollateralEnabled,
-      walletBalance: r.walletBalance,
-    }));
   }
+
+  return userReservesSummary.reserves.map(r => ({
+    asset: r.reserve.symbol,
+    apy: Decimal.from(r.reserve.supplyAPY).mul(100),
+    canBeCollateral: r.reserve.usageAsCollateralEnabled,
+    walletBalance: r.walletBalance,
+  }));
 };

From b58373a31a891d3f03d2debec53f5d90f4fc2e57 Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Mon, 9 Sep 2024 10:50:32 +0300
Subject: [PATCH 093/116] Fixes and cleanup (#48)

* coments

* fix borrow power

* fixes and cleanup
---
 .../app/5_pages/AavePage/AavePage.utils.tsx   | 65 +++++++++++--------
 .../BorrowAssetAction/BorrowAssetAction.tsx   |  9 ++-
 .../components/BorrowModal/BorrowForm.tsx     |  3 +-
 .../DisableEModeForm/DisableEModeForm.tsx     |  7 +-
 .../LendAssetDetails/LendAssetDetails.tsx     |  2 +-
 apps/frontend/src/constants/aave.ts           |  2 +
 .../src/utils/aave/AaveUserReservesSummary.ts |  8 ++-
 7 files changed, 62 insertions(+), 34 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx b/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
index 5b01426ef..51026f5fe 100644
--- a/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
@@ -2,6 +2,7 @@ import { t } from 'i18next';
 
 import { Decimal } from '@sovryn/utils';
 
+import { EMODE_DISABLED_ID } from '../../../constants/aave';
 import { Reserve } from '../../../hooks/aave/useAaveReservesData';
 import { translations } from '../../../locales/i18n';
 import { BorrowRateMode } from '../../../types/aave';
@@ -31,7 +32,7 @@ export const normalizeLendPositions = (
     if (r.supplied.gt(0)) {
       acc.push({
         asset: r.reserve.symbol,
-        apy: Decimal.from(r.reserve.variableBorrowAPY),
+        apy: Decimal.from(r.reserve.supplyAPY).mul(100),
         supplied: r.supplied,
         suppliedUSD: r.suppliedUSD,
         collateral: r.collateral,
@@ -70,6 +71,7 @@ export const normalizeBorrowPoolDetails = (
   reserves: Reserve[],
   userReservesSummary: AaveUserReservesSummary,
 ): BorrowPoolDetails[] => {
+  // wallet not connected or summary not available at this point
   if (userReservesSummary.reserves.length === 0) {
     return reserves.reduce((acc, r) => {
       if (r.borrowingEnabled) {
@@ -80,32 +82,41 @@ export const normalizeBorrowPoolDetails = (
       }
       return acc;
     }, [] as BorrowPoolDetails[]);
-  } else {
-    return reserves.reduce((acc, r) => {
-      if (
-        r.borrowingEnabled &&
-        (userReservesSummary.eModeCategoryId === r.eModeCategoryId ||
-          userReservesSummary.eModeCategoryId === 0)
-      ) {
-        acc.push({
-          asset: r.symbol,
-          apy: Decimal.from(r.variableBorrowAPY).mul(100),
-          available:
-            userReservesSummary.reserves.find(
-              userReserve => r.symbol === userReserve.asset,
-            )?.availableToBorrow || Decimal.from(0),
-          availableUSD: userReservesSummary.borrowPower,
-        });
-      }
-      return acc;
-    }, [] as BorrowPoolDetails[]);
   }
+
+  return reserves.reduce((acc, r) => {
+    // skip borrow pools that are not enabled
+    if (!r.borrowingEnabled) {
+      return acc;
+    }
+
+    // skip borrow pools that are not enabled for the user
+    if (
+      userReservesSummary.eModeCategoryId !== r.eModeCategoryId &&
+      userReservesSummary.eModeCategoryId !== EMODE_DISABLED_ID
+    ) {
+      return acc;
+    }
+
+    const userSummary = userReservesSummary.reserves.find(
+      userReserve => r.symbol === userReserve.asset,
+    );
+    acc.push({
+      asset: r.symbol,
+      apy: Decimal.from(r.variableBorrowAPY).mul(100),
+      available: userSummary?.availableToBorrow,
+      availableUSD: userSummary?.availableToBorrowUSD,
+    });
+
+    return acc;
+  }, [] as BorrowPoolDetails[]);
 };
 
 export const normalizeLendPoolDetails = (
   reserves: Reserve[],
   userReservesSummary: AaveUserReservesSummary,
 ): LendPoolDetails[] => {
+  // wallet not connected or summary not available at this point
   if (userReservesSummary.reserves.length === 0) {
     return reserves.map(r => ({
       asset: r.symbol,
@@ -113,12 +124,12 @@ export const normalizeLendPoolDetails = (
       canBeCollateral: r.usageAsCollateralEnabled,
       walletBalance: Decimal.from(0),
     }));
-  } else {
-    return userReservesSummary.reserves.map(r => ({
-      asset: r.reserve.symbol,
-      apy: Decimal.from(r.reserve.supplyAPY).mul(100),
-      canBeCollateral: r.reserve.usageAsCollateralEnabled,
-      walletBalance: r.walletBalance,
-    }));
   }
+
+  return userReservesSummary.reserves.map(r => ({
+    asset: r.reserve.symbol,
+    apy: Decimal.from(r.reserve.supplyAPY).mul(100),
+    canBeCollateral: r.reserve.usageAsCollateralEnabled,
+    walletBalance: r.walletBalance,
+  }));
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
index b0c4b40c1..fcaf49d30 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetAction/BorrowAssetAction.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback } from 'react';
 
 import { t } from 'i18next';
 import { useNavigate } from 'react-router-dom';
@@ -22,6 +22,11 @@ export const BorrowAssetAction: FC<BorrowAssetActionProps> = ({
 }) => {
   const navigate = useNavigate();
 
+  const onDetailsClick = useCallback(
+    () => navigate(`/aave/reserve-overview?asset=${asset}`),
+    [navigate, asset],
+  );
+
   return (
     <div className="flex items-center justify-center lg:justify-end space-x-2">
       <Button
@@ -35,7 +40,7 @@ export const BorrowAssetAction: FC<BorrowAssetActionProps> = ({
         className="flex-grow lg:flex-grow-0 lg:w-min"
         text={t(pageTranslations.common.details)}
         style={ButtonStyle.secondary}
-        onClick={() => navigate(`/aave/reserve-overview?asset=${asset}`)}
+        onClick={onDetailsClick}
       />
     </div>
   );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
index b56df01bd..fb1a84ad4 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
@@ -8,6 +8,7 @@ import {
   ErrorBadge,
   ErrorLevel,
   Link,
+  SelectOption,
   SimpleTable,
   SimpleTableRow,
 } from '@sovryn/ui';
@@ -58,7 +59,7 @@ export const BorrowForm: FC<BorrowFormProps> = ({ asset, onComplete }) => {
           });
         }
         return acc;
-      }, [] as { value: string; label: JSX.Element }[]),
+      }, [] as SelectOption<string>[]),
     [summary.reserves],
   );
 
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx
index cca226a60..de59e60d3 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx
@@ -14,7 +14,10 @@ import {
 import { Decimal } from '@sovryn/utils';
 
 import { AmountRenderer } from '../../../../../../../../2_molecules/AmountRenderer/AmountRenderer';
-import { config } from '../../../../../../../../../constants/aave';
+import {
+  config,
+  EMODE_DISABLED_ID,
+} from '../../../../../../../../../constants/aave';
 import { useAaveSetUserEMode } from '../../../../../../../../../hooks/aave/useAaveSetUserEMode';
 import { useAaveUserReservesData } from '../../../../../../../../../hooks/aave/useAaveUserReservesData';
 import { translations } from '../../../../../../../../../locales/i18n';
@@ -41,7 +44,7 @@ export const DisableEModeForm: FC<DisableEModeFormProps> = ({
 
   const summaryAfterDisabled = useMemo(() => {
     return normalizeEModeSummary(
-      0, // disabled
+      EMODE_DISABLED_ID,
       reservesData,
       userReservesData,
       timestamp,
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
index f14b941a7..02538672a 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetDetails/LendAssetDetails.tsx
@@ -12,7 +12,7 @@ import { LendAssetAction } from '../LendAssetAction/LendAssetAction';
 
 type LendAssetDetailsProps = {
   pool: LendPoolDetails;
-  onLendClick: () => unknown;
+  onLendClick: () => void;
 };
 
 export const LendAssetDetails: FC<LendAssetDetailsProps> = ({
diff --git a/apps/frontend/src/constants/aave.ts b/apps/frontend/src/constants/aave.ts
index 653a4e14a..feacb47a1 100644
--- a/apps/frontend/src/constants/aave.ts
+++ b/apps/frontend/src/constants/aave.ts
@@ -12,3 +12,5 @@ export const config = {
   InterestRateStrategyAddress: '0x847A3364Cc5fE389283bD821cfC8A477288D9e82',
   RepayAllETHSurplus: '1000000',
 };
+
+export const EMODE_DISABLED_ID = 0;
diff --git a/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts b/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
index f28073a47..0dfeaaf7b 100644
--- a/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
+++ b/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
@@ -204,10 +204,16 @@ export class AaveUserReservesSummaryFactory {
           const asset = await getAssetData(symbol, BOB_CHAIN_ID);
           const balance = await getBalance(asset, account, provider);
           const decimalBalance = decimalic(fromWei(balance, asset.decimals));
-          const canBorrow = borrowPower.div(r.reserve.priceInUSD);
           const availableLiquidity = Decimal.from(
             formatUnits(r.reserve.availableLiquidity, r.reserve.decimals),
           );
+
+          // how much the user can borrow if there's no limit of supply
+          const canBorrow = borrowPower
+            .sub(borrowBalance)
+            .div(r.reserve.priceInUSD);
+
+          // available to borrow for user including liquidity limitation
           const availableToBorrow = availableLiquidity.lt(canBorrow)
             ? availableLiquidity
             : canBorrow;

From 60f93c273012c2fc8153bf3bdc9adf4d326a6197 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Mon, 9 Sep 2024 13:08:18 +0400
Subject: [PATCH 094/116] cleanup

---
 .../app/2_molecules/AssetIcon/AssetIcon.tsx   | 44 +++++++++
 .../SwitchEModeForm/SwitchEModeForm.tsx       | 23 +++--
 .../RepayForm/RepayForm.constants.ts          |  2 +-
 .../components/RepayForm/RepayForm.tsx        |  6 +-
 .../LendPositionAction/LendPositionAction.tsx |  2 +-
 .../WithdrawForm/WithdrawForm.constants.ts    |  2 +-
 .../components/WithdrawForm/WithdrawForm.tsx  |  4 +-
 .../WithdrawModal/WithdrawForm.constants.ts   | 12 +++
 .../components/WithdrawModal/WithdrawForm.tsx | 50 +++++------
 .../AaveReserveOverviewPage.constants.tsx     |  2 +-
 .../AaveReserveOverviewPage.tsx               |  4 +-
 .../ReserveTokens/ReserveTokens.tsx           | 90 ++++++++-----------
 .../src/utils/aave/AaveEModeCategories.ts     | 14 +--
 13 files changed, 150 insertions(+), 105 deletions(-)
 create mode 100644 apps/frontend/src/app/2_molecules/AssetIcon/AssetIcon.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.constants.ts

diff --git a/apps/frontend/src/app/2_molecules/AssetIcon/AssetIcon.tsx b/apps/frontend/src/app/2_molecules/AssetIcon/AssetIcon.tsx
new file mode 100644
index 000000000..725d97ca6
--- /dev/null
+++ b/apps/frontend/src/app/2_molecules/AssetIcon/AssetIcon.tsx
@@ -0,0 +1,44 @@
+import React, { FC, useEffect } from 'react';
+
+import { getAssetData } from '@sovryn/contracts';
+import { ChainId } from '@sovryn/ethers-provider';
+
+type AssetIconProps = {
+  symbol: string;
+  chainId: ChainId;
+  className?: string;
+  size?: number;
+};
+
+export const AssetIcon: FC<AssetIconProps> = ({
+  symbol,
+  chainId,
+  className,
+  size = 24,
+}) => {
+  const [tokenLogo, setTokenLogo] = React.useState<string>();
+
+  useEffect(() => {
+    getAssetData(symbol, chainId).then(data => {
+      setTokenLogo(data.icon);
+    });
+  }, [symbol, chainId]);
+
+  if (!tokenLogo) {
+    return (
+      <div
+        style={{ width: size, height: size }}
+        className="text-gray-50 rounded-full bg-gray-30 grid place-items-center"
+      >
+        {symbol.slice(0, 1).toUpperCase()}
+      </div>
+    );
+  }
+  return (
+    <div
+      className={className}
+      style={{ width: size, height: size }}
+      dangerouslySetInnerHTML={{ __html: tokenLogo }}
+    />
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx
index 766f8abb6..4c2e76190 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx
@@ -10,6 +10,7 @@ import {
   IconNames,
   Paragraph,
   Select,
+  SelectOption,
   SimpleTable,
   SimpleTableRow,
 } from '@sovryn/ui';
@@ -41,12 +42,19 @@ export const SwitchEModeForm: FC<SwitchEModeFormProps> = ({
     useAaveUserReservesData();
 
   const categoriesOptions = useMemo(() => {
-    return categories
-      .filter(c => c.id !== current.id)
-      .map(category => ({
-        label: category.label,
-        value: String(category.id),
-      }));
+    return categories.reduce((acc, category) => {
+      if (category.id === current?.id) {
+        return acc; // skip current category
+      }
+
+      return [
+        ...acc,
+        {
+          label: category.label,
+          value: String(category.id),
+        },
+      ];
+    }, [] as SelectOption[]);
   }, [categories, current?.id]);
 
   const selectedCategory = useMemo(() => {
@@ -78,8 +86,7 @@ export const SwitchEModeForm: FC<SwitchEModeFormProps> = ({
   }, [summaryAfterSwitch, positionsInOtherCategories, selectedCategory]);
 
   const onConfirm = useCallback(() => {
-    if (!selectedCategory) return;
-    handleSetUserEMode(selectedCategory, { onComplete });
+    handleSetUserEMode(selectedCategory!, { onComplete });
   }, [handleSetUserEMode, selectedCategory, onComplete]);
 
   return (
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.constants.ts b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.constants.ts
index cfee00c96..2ed032d02 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.constants.ts
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.constants.ts
@@ -2,7 +2,7 @@ import { t } from 'i18next';
 
 import { translations } from '../../../../../../../locales/i18n';
 
-export const tabItems = [
+export const TAB_ITEMS = [
   {
     activeClassName: 'text-primary-20',
     dataAttribute: 'wallet-balance',
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.tsx
index fa3be9c91..012bd197e 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.tsx
@@ -5,13 +5,13 @@ import { t } from 'i18next';
 import { Paragraph, ParagraphSize, Tabs, TabType } from '@sovryn/ui';
 
 import { translations } from '../../../../../../../locales/i18n';
-import { tabItems } from './RepayForm.constants';
+import { TAB_ITEMS } from './RepayForm.constants';
 import { RepayWithCollateralForm } from './RepayWithCollateralForm';
 import { RepayWithWalletBalanceForm } from './RepayWithWalletBalanceForm';
 
 type RepayFormProps = {
   asset: string;
-  onComplete: () => unknown;
+  onComplete: () => void;
 };
 
 enum RepayWith {
@@ -36,7 +36,7 @@ export const RepayForm: FC<RepayFormProps> = ({ asset, onComplete }) => {
         contentClassName="p-4"
         index={activeTab}
         onChange={setActiveTab}
-        items={tabItems}
+        items={TAB_ITEMS}
         type={TabType.secondary}
       />
 
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
index 3b1c98047..f7151aaa6 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
@@ -7,7 +7,7 @@ import { Button, ButtonStyle } from '@sovryn/ui';
 import { translations } from '../../../../../../../locales/i18n';
 
 type LendPositionActionProps = {
-  onWithdrawClick: () => unknown;
+  onWithdrawClick: () => void;
 };
 
 export const LendPositionAction: FC<LendPositionActionProps> = ({
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.constants.ts b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.constants.ts
index 9e096ee95..4af131e11 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.constants.ts
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.constants.ts
@@ -2,7 +2,7 @@ import { t } from 'i18next';
 
 import { translations } from '../../../../../../../locales/i18n';
 
-export const tabItems = [
+export const TAB_ITEMS = [
   // For now just withdraw is supported
   {
     activeClassName: 'text-primary-20',
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx
index 4234eb6ed..08ad11d45 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx
@@ -22,7 +22,7 @@ import { useAaveUserReservesData } from '../../../../../../../hooks/aave/useAave
 import { useAaveWithdraw } from '../../../../../../../hooks/aave/useAaveWithdraw';
 import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
 import { translations } from '../../../../../../../locales/i18n';
-import { tabItems } from './WithdrawForm.constants';
+import { TAB_ITEMS } from './WithdrawForm.constants';
 
 const pageTranslations = translations.aavePage;
 
@@ -103,7 +103,7 @@ export const WithdrawForm: FC<WithdrawFormProps> = ({ asset, onComplete }) => {
   return (
     <form className="flex flex-col gap-6">
       <div className="space-y-2">
-        <Tabs type={TabType.secondary} index={0} items={tabItems} />
+        <Tabs type={TabType.secondary} index={0} items={TAB_ITEMS} />
 
         <div className="space-y-3">
           <AssetAmountInput
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.constants.ts b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.constants.ts
new file mode 100644
index 000000000..17fb9412f
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.constants.ts
@@ -0,0 +1,12 @@
+import { t } from 'i18next';
+
+import { translations } from '../../../../../../../locales/i18n';
+
+// For now just withdraw is supported
+export const TAB_ITEMS = [
+  {
+    activeClassName: 'text-primary-20',
+    dataAttribute: 'withdraw',
+    label: t(translations.common.withdraw),
+  },
+];
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
index 40d120616..cae18f22c 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
@@ -6,6 +6,7 @@ import {
   Button,
   ErrorBadge,
   ErrorLevel,
+  SelectOption,
   SimpleTable,
   SimpleTableRow,
   Tabs,
@@ -22,6 +23,7 @@ import { useAaveUserReservesData } from '../../../../../../../hooks/aave/useAave
 import { useAaveWithdraw } from '../../../../../../../hooks/aave/useAaveWithdraw';
 import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
 import { translations } from '../../../../../../../locales/i18n';
+import { TAB_ITEMS } from './WithdrawForm.constants';
 
 const pageTranslations = translations.aavePage;
 
@@ -39,19 +41,27 @@ export const WithdrawForm: FC<WithdrawFormProps> = ({ asset, onComplete }) => {
 
   const withdrawableAssetsOptions = useMemo(
     () =>
-      summary.reserves
-        .filter(r => r.supplied.gt(0))
-        .map(sa => ({
-          value: sa.asset,
-          label: (
-            <AssetRenderer
-              showAssetLogo
-              asset={sa.asset}
-              assetClassName="font-medium"
-              chainId={BOB_CHAIN_ID}
-            />
-          ),
-        })),
+      summary.reserves.reduce((acc, r) => {
+        if (r.supplied.lte(0)) {
+          return acc;
+        }
+
+        return [
+          ...acc,
+          {
+            value: r.asset,
+            label: (
+              <AssetRenderer
+                showAssetLogo
+                asset={r.asset}
+                assetClassName="font-medium"
+                chainId={BOB_CHAIN_ID}
+              />
+            ),
+          },
+        ];
+      }, [] as SelectOption<string>[]),
+
     [summary],
   );
 
@@ -84,18 +94,6 @@ export const WithdrawForm: FC<WithdrawFormProps> = ({ asset, onComplete }) => {
     [isValidWithdrawAmount, withdrawSize],
   );
 
-  const tabItems = useMemo(
-    () => [
-      // For now just withdraw is supported
-      {
-        activeClassName: 'text-primary-20',
-        dataAttribute: 'withdraw',
-        label: t(translations.common.withdraw),
-      },
-    ],
-    [],
-  );
-
   const onConfirm = useCallback(() => {
     handleWithdraw(
       withdrawSize,
@@ -114,7 +112,7 @@ export const WithdrawForm: FC<WithdrawFormProps> = ({ asset, onComplete }) => {
   return (
     <form className="flex flex-col gap-6">
       <div className="space-y-2">
-        <Tabs type={TabType.secondary} index={0} items={tabItems} />
+        <Tabs type={TabType.secondary} index={0} items={TAB_ITEMS} />
 
         <div className="space-y-3">
           <AssetAmountInput
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.constants.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.constants.tsx
index 2bed454fe..37e5b968c 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.constants.tsx
@@ -2,7 +2,7 @@ import { t } from 'i18next';
 
 import { translations } from '../../../locales/i18n';
 
-export const tabItems = [
+export const TAB_ITEMS = [
   {
     activeClassName: 'text-primary-20',
     dataAttribute: 'reserve-status',
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
index 6bdc4f586..f0a91a72c 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
@@ -9,7 +9,7 @@ import { Paragraph, Tabs, TabSize, TabType } from '@sovryn/ui';
 
 import { useAaveReservesData } from '../../../hooks/aave/useAaveReservesData';
 import { translations } from '../../../locales/i18n';
-import { tabItems } from '../AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.constants';
+import { TAB_ITEMS } from './AaveReserveOverviewPage.constants';
 import { BorrowDetailsGraph } from './components/BorrowDetailsGraph/BorrowDetailsGraph';
 import { EModeDetails } from './components/EModeDetails/EModeDetails';
 import { InterestRateModelGraph } from './components/InterestRateModelGraph/InterestRateModelGraph';
@@ -54,7 +54,7 @@ const AaveReserveOverviewPage: FC = () => {
         <Tabs
           className="w-full bg-gray-80 rounded p-1 border border-gray-60 lg:hidden"
           index={activeOverviewTab}
-          items={tabItems}
+          items={TAB_ITEMS}
           onChange={e => setActiveOverviewTab(e)}
           size={TabSize.normal}
           type={TabType.secondary}
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/components/ReserveTokens/ReserveTokens.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/components/ReserveTokens/ReserveTokens.tsx
index 6523b7382..22040c7af 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/components/ReserveTokens/ReserveTokens.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/components/ReserveTokens/ReserveTokens.tsx
@@ -1,12 +1,11 @@
-import React, { FC, ReactElement, useEffect, useMemo } from 'react';
+import React, { FC } from 'react';
 
 import classNames from 'classnames';
 import { t } from 'i18next';
 
-import { getAssetData } from '@sovryn/contracts';
-
 import { BOB_CHAIN_ID } from '../../../../../../../config/chains';
 
+import { AssetIcon } from '../../../../../../2_molecules/AssetIcon/AssetIcon';
 import { translations } from '../../../../../../../locales/i18n';
 import { TokenButton } from './components/TokenButton/TokenButton';
 
@@ -28,57 +27,40 @@ export const ReserveTokens: FC<ReserveTokensProps> = ({
   variableDebtTokenAddress,
   stableDebtTokenAddress,
   className,
-}) => {
-  const [tokenLogo, setTokenLogo] = React.useState<string>();
-
-  useEffect(() => {
-    getAssetData(symbol, BOB_CHAIN_ID).then(data => {
-      setTokenLogo(data.icon);
-    });
-  }, [symbol]);
-
-  const TokenLogo: ReactElement = useMemo(() => {
-    if (!tokenLogo) return <></>;
-    else return <div dangerouslySetInnerHTML={{ __html: tokenLogo }} />;
-  }, [tokenLogo]);
+}) => (
+  <div className={classNames('divide-y divide-gray-20', className)}>
+    <TokenButton
+      title={t(translations.aaveReserveOverviewPage.topPanel.underlyingToken)}
+      label={symbol}
+      logo={<AssetIcon chainId={BOB_CHAIN_ID} symbol={symbol} />}
+      onClick={() => onTokenClick(underlyingTokenAddress)}
+    />
 
-  return (
-    <div className={classNames('divide-y divide-gray-20', className)}>
-      <TokenButton
-        title={t(translations.aaveReserveOverviewPage.topPanel.underlyingToken)}
-        label={symbol}
-        logo={TokenLogo}
-        onClick={() => onTokenClick(underlyingTokenAddress)}
-      />
+    <TokenButton
+      title={t(translations.aaveReserveOverviewPage.topPanel.aToken)}
+      label={`a${symbol}`}
+      logo={<AssetIcon chainId={BOB_CHAIN_ID} symbol={symbol} />}
+      onClick={() => onTokenClick(aTokenAddress)}
+    />
 
-      <TokenButton
-        title={t(translations.aaveReserveOverviewPage.topPanel.aToken)}
-        label={`a${symbol}`}
-        logo={TokenLogo}
-        onClick={() => onTokenClick(aTokenAddress)}
-      />
+    <TokenButton
+      title={t(translations.aaveReserveOverviewPage.topPanel.variableDebtToken)}
+      label={t(
+        translations.aaveReserveOverviewPage.topPanel.variableDebtTokenName,
+        { symbol },
+      )}
+      logo={<AssetIcon chainId={BOB_CHAIN_ID} symbol={symbol} />}
+      onClick={() => onTokenClick(variableDebtTokenAddress)}
+    />
 
-      <TokenButton
-        title={t(
-          translations.aaveReserveOverviewPage.topPanel.variableDebtToken,
-        )}
-        label={t(
-          translations.aaveReserveOverviewPage.topPanel.variableDebtTokenName,
-          { symbol },
-        )}
-        logo={TokenLogo}
-        onClick={() => onTokenClick(variableDebtTokenAddress)}
-      />
-
-      <TokenButton
-        title={t(translations.aaveReserveOverviewPage.topPanel.stableDebtToken)}
-        label={t(
-          translations.aaveReserveOverviewPage.topPanel.stableDebtTokenName,
-          { symbol },
-        )}
-        logo={TokenLogo}
-        onClick={() => onTokenClick(stableDebtTokenAddress)}
-      />
-    </div>
-  );
-};
+    <TokenButton
+      title={t(translations.aaveReserveOverviewPage.topPanel.stableDebtToken)}
+      label={t(
+        translations.aaveReserveOverviewPage.topPanel.stableDebtTokenName,
+        { symbol },
+      )}
+      logo={<AssetIcon chainId={BOB_CHAIN_ID} symbol={symbol} />}
+      onClick={() => onTokenClick(stableDebtTokenAddress)}
+    />
+  </div>
+);
diff --git a/apps/frontend/src/utils/aave/AaveEModeCategories.ts b/apps/frontend/src/utils/aave/AaveEModeCategories.ts
index 18379b821..3b42cee25 100644
--- a/apps/frontend/src/utils/aave/AaveEModeCategories.ts
+++ b/apps/frontend/src/utils/aave/AaveEModeCategories.ts
@@ -76,9 +76,10 @@ export class AaveEModeCategories {
         this.getEModeCategory(categoryId, reserves),
       ),
     ).then(res =>
-      res
-        .filter(r => r.status === 'fulfilled')
-        .map(r => (r as PromiseFulfilledResult<EModeCategory>).value),
+      res.reduce(
+        (acc, r) => (r.status === 'fulfilled' ? [...acc, r.value] : acc),
+        [] as EModeCategory[],
+      ),
     );
   }
 
@@ -89,9 +90,10 @@ export class AaveEModeCategories {
     const [ltv, liquidationThreshold, liquidationBonus, , label] =
       await this.Pool.getEModeCategoryData(categoryId);
 
-    const assets = reserves
-      .filter(r => r.eModeCategoryId === categoryId)
-      .map(r => r.symbol);
+    const assets = reserves.reduce(
+      (acc, r) => (r.eModeCategoryId === categoryId ? [...acc, r.symbol] : acc),
+      [] as string[],
+    );
 
     return {
       id: categoryId,

From 4064d8bf5d1c785f33ec86c46008d6d4bf9abfa9 Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Mon, 9 Sep 2024 12:11:47 +0300
Subject: [PATCH 095/116] Cleanup (#49)

* coments

* fix borrow power

* fixes and cleanup

* cleanup
---
 .../app/2_molecules/AssetIcon/AssetIcon.tsx   | 44 +++++++++
 .../SwitchEModeForm/SwitchEModeForm.tsx       | 23 +++--
 .../RepayForm/RepayForm.constants.ts          |  2 +-
 .../components/RepayForm/RepayForm.tsx        |  6 +-
 .../LendPositionAction/LendPositionAction.tsx |  2 +-
 .../WithdrawForm/WithdrawForm.constants.ts    |  2 +-
 .../components/WithdrawForm/WithdrawForm.tsx  |  4 +-
 .../WithdrawModal/WithdrawForm.constants.ts   | 12 +++
 .../components/WithdrawModal/WithdrawForm.tsx | 50 +++++------
 .../AaveReserveOverviewPage.constants.tsx     |  2 +-
 .../AaveReserveOverviewPage.tsx               |  4 +-
 .../ReserveTokens/ReserveTokens.tsx           | 90 ++++++++-----------
 .../src/utils/aave/AaveEModeCategories.ts     | 14 +--
 13 files changed, 150 insertions(+), 105 deletions(-)
 create mode 100644 apps/frontend/src/app/2_molecules/AssetIcon/AssetIcon.tsx
 create mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.constants.ts

diff --git a/apps/frontend/src/app/2_molecules/AssetIcon/AssetIcon.tsx b/apps/frontend/src/app/2_molecules/AssetIcon/AssetIcon.tsx
new file mode 100644
index 000000000..725d97ca6
--- /dev/null
+++ b/apps/frontend/src/app/2_molecules/AssetIcon/AssetIcon.tsx
@@ -0,0 +1,44 @@
+import React, { FC, useEffect } from 'react';
+
+import { getAssetData } from '@sovryn/contracts';
+import { ChainId } from '@sovryn/ethers-provider';
+
+type AssetIconProps = {
+  symbol: string;
+  chainId: ChainId;
+  className?: string;
+  size?: number;
+};
+
+export const AssetIcon: FC<AssetIconProps> = ({
+  symbol,
+  chainId,
+  className,
+  size = 24,
+}) => {
+  const [tokenLogo, setTokenLogo] = React.useState<string>();
+
+  useEffect(() => {
+    getAssetData(symbol, chainId).then(data => {
+      setTokenLogo(data.icon);
+    });
+  }, [symbol, chainId]);
+
+  if (!tokenLogo) {
+    return (
+      <div
+        style={{ width: size, height: size }}
+        className="text-gray-50 rounded-full bg-gray-30 grid place-items-center"
+      >
+        {symbol.slice(0, 1).toUpperCase()}
+      </div>
+    );
+  }
+  return (
+    <div
+      className={className}
+      style={{ width: size, height: size }}
+      dangerouslySetInnerHTML={{ __html: tokenLogo }}
+    />
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx
index 766f8abb6..4c2e76190 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx
@@ -10,6 +10,7 @@ import {
   IconNames,
   Paragraph,
   Select,
+  SelectOption,
   SimpleTable,
   SimpleTableRow,
 } from '@sovryn/ui';
@@ -41,12 +42,19 @@ export const SwitchEModeForm: FC<SwitchEModeFormProps> = ({
     useAaveUserReservesData();
 
   const categoriesOptions = useMemo(() => {
-    return categories
-      .filter(c => c.id !== current.id)
-      .map(category => ({
-        label: category.label,
-        value: String(category.id),
-      }));
+    return categories.reduce((acc, category) => {
+      if (category.id === current?.id) {
+        return acc; // skip current category
+      }
+
+      return [
+        ...acc,
+        {
+          label: category.label,
+          value: String(category.id),
+        },
+      ];
+    }, [] as SelectOption[]);
   }, [categories, current?.id]);
 
   const selectedCategory = useMemo(() => {
@@ -78,8 +86,7 @@ export const SwitchEModeForm: FC<SwitchEModeFormProps> = ({
   }, [summaryAfterSwitch, positionsInOtherCategories, selectedCategory]);
 
   const onConfirm = useCallback(() => {
-    if (!selectedCategory) return;
-    handleSetUserEMode(selectedCategory, { onComplete });
+    handleSetUserEMode(selectedCategory!, { onComplete });
   }, [handleSetUserEMode, selectedCategory, onComplete]);
 
   return (
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.constants.ts b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.constants.ts
index cfee00c96..2ed032d02 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.constants.ts
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.constants.ts
@@ -2,7 +2,7 @@ import { t } from 'i18next';
 
 import { translations } from '../../../../../../../locales/i18n';
 
-export const tabItems = [
+export const TAB_ITEMS = [
   {
     activeClassName: 'text-primary-20',
     dataAttribute: 'wallet-balance',
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.tsx
index fa3be9c91..012bd197e 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.tsx
@@ -5,13 +5,13 @@ import { t } from 'i18next';
 import { Paragraph, ParagraphSize, Tabs, TabType } from '@sovryn/ui';
 
 import { translations } from '../../../../../../../locales/i18n';
-import { tabItems } from './RepayForm.constants';
+import { TAB_ITEMS } from './RepayForm.constants';
 import { RepayWithCollateralForm } from './RepayWithCollateralForm';
 import { RepayWithWalletBalanceForm } from './RepayWithWalletBalanceForm';
 
 type RepayFormProps = {
   asset: string;
-  onComplete: () => unknown;
+  onComplete: () => void;
 };
 
 enum RepayWith {
@@ -36,7 +36,7 @@ export const RepayForm: FC<RepayFormProps> = ({ asset, onComplete }) => {
         contentClassName="p-4"
         index={activeTab}
         onChange={setActiveTab}
-        items={tabItems}
+        items={TAB_ITEMS}
         type={TabType.secondary}
       />
 
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
index 3b1c98047..f7151aaa6 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionAction/LendPositionAction.tsx
@@ -7,7 +7,7 @@ import { Button, ButtonStyle } from '@sovryn/ui';
 import { translations } from '../../../../../../../locales/i18n';
 
 type LendPositionActionProps = {
-  onWithdrawClick: () => unknown;
+  onWithdrawClick: () => void;
 };
 
 export const LendPositionAction: FC<LendPositionActionProps> = ({
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.constants.ts b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.constants.ts
index 9e096ee95..4af131e11 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.constants.ts
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.constants.ts
@@ -2,7 +2,7 @@ import { t } from 'i18next';
 
 import { translations } from '../../../../../../../locales/i18n';
 
-export const tabItems = [
+export const TAB_ITEMS = [
   // For now just withdraw is supported
   {
     activeClassName: 'text-primary-20',
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx
index 4234eb6ed..08ad11d45 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx
@@ -22,7 +22,7 @@ import { useAaveUserReservesData } from '../../../../../../../hooks/aave/useAave
 import { useAaveWithdraw } from '../../../../../../../hooks/aave/useAaveWithdraw';
 import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
 import { translations } from '../../../../../../../locales/i18n';
-import { tabItems } from './WithdrawForm.constants';
+import { TAB_ITEMS } from './WithdrawForm.constants';
 
 const pageTranslations = translations.aavePage;
 
@@ -103,7 +103,7 @@ export const WithdrawForm: FC<WithdrawFormProps> = ({ asset, onComplete }) => {
   return (
     <form className="flex flex-col gap-6">
       <div className="space-y-2">
-        <Tabs type={TabType.secondary} index={0} items={tabItems} />
+        <Tabs type={TabType.secondary} index={0} items={TAB_ITEMS} />
 
         <div className="space-y-3">
           <AssetAmountInput
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.constants.ts b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.constants.ts
new file mode 100644
index 000000000..17fb9412f
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.constants.ts
@@ -0,0 +1,12 @@
+import { t } from 'i18next';
+
+import { translations } from '../../../../../../../locales/i18n';
+
+// For now just withdraw is supported
+export const TAB_ITEMS = [
+  {
+    activeClassName: 'text-primary-20',
+    dataAttribute: 'withdraw',
+    label: t(translations.common.withdraw),
+  },
+];
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
index 40d120616..cae18f22c 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
@@ -6,6 +6,7 @@ import {
   Button,
   ErrorBadge,
   ErrorLevel,
+  SelectOption,
   SimpleTable,
   SimpleTableRow,
   Tabs,
@@ -22,6 +23,7 @@ import { useAaveUserReservesData } from '../../../../../../../hooks/aave/useAave
 import { useAaveWithdraw } from '../../../../../../../hooks/aave/useAaveWithdraw';
 import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
 import { translations } from '../../../../../../../locales/i18n';
+import { TAB_ITEMS } from './WithdrawForm.constants';
 
 const pageTranslations = translations.aavePage;
 
@@ -39,19 +41,27 @@ export const WithdrawForm: FC<WithdrawFormProps> = ({ asset, onComplete }) => {
 
   const withdrawableAssetsOptions = useMemo(
     () =>
-      summary.reserves
-        .filter(r => r.supplied.gt(0))
-        .map(sa => ({
-          value: sa.asset,
-          label: (
-            <AssetRenderer
-              showAssetLogo
-              asset={sa.asset}
-              assetClassName="font-medium"
-              chainId={BOB_CHAIN_ID}
-            />
-          ),
-        })),
+      summary.reserves.reduce((acc, r) => {
+        if (r.supplied.lte(0)) {
+          return acc;
+        }
+
+        return [
+          ...acc,
+          {
+            value: r.asset,
+            label: (
+              <AssetRenderer
+                showAssetLogo
+                asset={r.asset}
+                assetClassName="font-medium"
+                chainId={BOB_CHAIN_ID}
+              />
+            ),
+          },
+        ];
+      }, [] as SelectOption<string>[]),
+
     [summary],
   );
 
@@ -84,18 +94,6 @@ export const WithdrawForm: FC<WithdrawFormProps> = ({ asset, onComplete }) => {
     [isValidWithdrawAmount, withdrawSize],
   );
 
-  const tabItems = useMemo(
-    () => [
-      // For now just withdraw is supported
-      {
-        activeClassName: 'text-primary-20',
-        dataAttribute: 'withdraw',
-        label: t(translations.common.withdraw),
-      },
-    ],
-    [],
-  );
-
   const onConfirm = useCallback(() => {
     handleWithdraw(
       withdrawSize,
@@ -114,7 +112,7 @@ export const WithdrawForm: FC<WithdrawFormProps> = ({ asset, onComplete }) => {
   return (
     <form className="flex flex-col gap-6">
       <div className="space-y-2">
-        <Tabs type={TabType.secondary} index={0} items={tabItems} />
+        <Tabs type={TabType.secondary} index={0} items={TAB_ITEMS} />
 
         <div className="space-y-3">
           <AssetAmountInput
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.constants.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.constants.tsx
index 2bed454fe..37e5b968c 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.constants.tsx
@@ -2,7 +2,7 @@ import { t } from 'i18next';
 
 import { translations } from '../../../locales/i18n';
 
-export const tabItems = [
+export const TAB_ITEMS = [
   {
     activeClassName: 'text-primary-20',
     dataAttribute: 'reserve-status',
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
index 6bdc4f586..f0a91a72c 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
@@ -9,7 +9,7 @@ import { Paragraph, Tabs, TabSize, TabType } from '@sovryn/ui';
 
 import { useAaveReservesData } from '../../../hooks/aave/useAaveReservesData';
 import { translations } from '../../../locales/i18n';
-import { tabItems } from '../AavePage/components/BorrowPositionsList/components/RepayForm/RepayForm.constants';
+import { TAB_ITEMS } from './AaveReserveOverviewPage.constants';
 import { BorrowDetailsGraph } from './components/BorrowDetailsGraph/BorrowDetailsGraph';
 import { EModeDetails } from './components/EModeDetails/EModeDetails';
 import { InterestRateModelGraph } from './components/InterestRateModelGraph/InterestRateModelGraph';
@@ -54,7 +54,7 @@ const AaveReserveOverviewPage: FC = () => {
         <Tabs
           className="w-full bg-gray-80 rounded p-1 border border-gray-60 lg:hidden"
           index={activeOverviewTab}
-          items={tabItems}
+          items={TAB_ITEMS}
           onChange={e => setActiveOverviewTab(e)}
           size={TabSize.normal}
           type={TabType.secondary}
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/components/ReserveTokens/ReserveTokens.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/components/ReserveTokens/ReserveTokens.tsx
index 6523b7382..22040c7af 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/components/ReserveTokens/ReserveTokens.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/components/ReserveTokens/ReserveTokens.tsx
@@ -1,12 +1,11 @@
-import React, { FC, ReactElement, useEffect, useMemo } from 'react';
+import React, { FC } from 'react';
 
 import classNames from 'classnames';
 import { t } from 'i18next';
 
-import { getAssetData } from '@sovryn/contracts';
-
 import { BOB_CHAIN_ID } from '../../../../../../../config/chains';
 
+import { AssetIcon } from '../../../../../../2_molecules/AssetIcon/AssetIcon';
 import { translations } from '../../../../../../../locales/i18n';
 import { TokenButton } from './components/TokenButton/TokenButton';
 
@@ -28,57 +27,40 @@ export const ReserveTokens: FC<ReserveTokensProps> = ({
   variableDebtTokenAddress,
   stableDebtTokenAddress,
   className,
-}) => {
-  const [tokenLogo, setTokenLogo] = React.useState<string>();
-
-  useEffect(() => {
-    getAssetData(symbol, BOB_CHAIN_ID).then(data => {
-      setTokenLogo(data.icon);
-    });
-  }, [symbol]);
-
-  const TokenLogo: ReactElement = useMemo(() => {
-    if (!tokenLogo) return <></>;
-    else return <div dangerouslySetInnerHTML={{ __html: tokenLogo }} />;
-  }, [tokenLogo]);
+}) => (
+  <div className={classNames('divide-y divide-gray-20', className)}>
+    <TokenButton
+      title={t(translations.aaveReserveOverviewPage.topPanel.underlyingToken)}
+      label={symbol}
+      logo={<AssetIcon chainId={BOB_CHAIN_ID} symbol={symbol} />}
+      onClick={() => onTokenClick(underlyingTokenAddress)}
+    />
 
-  return (
-    <div className={classNames('divide-y divide-gray-20', className)}>
-      <TokenButton
-        title={t(translations.aaveReserveOverviewPage.topPanel.underlyingToken)}
-        label={symbol}
-        logo={TokenLogo}
-        onClick={() => onTokenClick(underlyingTokenAddress)}
-      />
+    <TokenButton
+      title={t(translations.aaveReserveOverviewPage.topPanel.aToken)}
+      label={`a${symbol}`}
+      logo={<AssetIcon chainId={BOB_CHAIN_ID} symbol={symbol} />}
+      onClick={() => onTokenClick(aTokenAddress)}
+    />
 
-      <TokenButton
-        title={t(translations.aaveReserveOverviewPage.topPanel.aToken)}
-        label={`a${symbol}`}
-        logo={TokenLogo}
-        onClick={() => onTokenClick(aTokenAddress)}
-      />
+    <TokenButton
+      title={t(translations.aaveReserveOverviewPage.topPanel.variableDebtToken)}
+      label={t(
+        translations.aaveReserveOverviewPage.topPanel.variableDebtTokenName,
+        { symbol },
+      )}
+      logo={<AssetIcon chainId={BOB_CHAIN_ID} symbol={symbol} />}
+      onClick={() => onTokenClick(variableDebtTokenAddress)}
+    />
 
-      <TokenButton
-        title={t(
-          translations.aaveReserveOverviewPage.topPanel.variableDebtToken,
-        )}
-        label={t(
-          translations.aaveReserveOverviewPage.topPanel.variableDebtTokenName,
-          { symbol },
-        )}
-        logo={TokenLogo}
-        onClick={() => onTokenClick(variableDebtTokenAddress)}
-      />
-
-      <TokenButton
-        title={t(translations.aaveReserveOverviewPage.topPanel.stableDebtToken)}
-        label={t(
-          translations.aaveReserveOverviewPage.topPanel.stableDebtTokenName,
-          { symbol },
-        )}
-        logo={TokenLogo}
-        onClick={() => onTokenClick(stableDebtTokenAddress)}
-      />
-    </div>
-  );
-};
+    <TokenButton
+      title={t(translations.aaveReserveOverviewPage.topPanel.stableDebtToken)}
+      label={t(
+        translations.aaveReserveOverviewPage.topPanel.stableDebtTokenName,
+        { symbol },
+      )}
+      logo={<AssetIcon chainId={BOB_CHAIN_ID} symbol={symbol} />}
+      onClick={() => onTokenClick(stableDebtTokenAddress)}
+    />
+  </div>
+);
diff --git a/apps/frontend/src/utils/aave/AaveEModeCategories.ts b/apps/frontend/src/utils/aave/AaveEModeCategories.ts
index 18379b821..3b42cee25 100644
--- a/apps/frontend/src/utils/aave/AaveEModeCategories.ts
+++ b/apps/frontend/src/utils/aave/AaveEModeCategories.ts
@@ -76,9 +76,10 @@ export class AaveEModeCategories {
         this.getEModeCategory(categoryId, reserves),
       ),
     ).then(res =>
-      res
-        .filter(r => r.status === 'fulfilled')
-        .map(r => (r as PromiseFulfilledResult<EModeCategory>).value),
+      res.reduce(
+        (acc, r) => (r.status === 'fulfilled' ? [...acc, r.value] : acc),
+        [] as EModeCategory[],
+      ),
     );
   }
 
@@ -89,9 +90,10 @@ export class AaveEModeCategories {
     const [ltv, liquidationThreshold, liquidationBonus, , label] =
       await this.Pool.getEModeCategoryData(categoryId);
 
-    const assets = reserves
-      .filter(r => r.eModeCategoryId === categoryId)
-      .map(r => r.symbol);
+    const assets = reserves.reduce(
+      (acc, r) => (r.eModeCategoryId === categoryId ? [...acc, r.symbol] : acc),
+      [] as string[],
+    );
 
     return {
       id: categoryId,

From dd1df1f5729c17f88c9c07a857914ee5005a52ec Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Mon, 9 Sep 2024 13:30:16 +0400
Subject: [PATCH 096/116] refactor config for same code style and handle
 mainnet config

---
 .../components/BorrowModal/BorrowForm.tsx     |  4 +-
 .../DisableEModeForm/DisableEModeForm.tsx     |  4 +-
 .../SwitchEModeForm/SwitchEModeForm.tsx       |  4 +-
 .../RepayForm/RepayWithCollateralForm.tsx     |  4 +-
 .../RepayForm/RepayWithWalletBalanceForm.tsx  |  4 +-
 .../RepayModal/RepayWithCollateralForm.tsx    |  4 +-
 .../RepayModal/RepayWithWalletBalanceForm.tsx |  4 +-
 .../BorrowDetailsGraph.utils.ts               |  4 +-
 .../InterestRateModelGraph.tsx                |  6 +--
 apps/frontend/src/config/chains.ts            |  3 +-
 apps/frontend/src/constants/aave.ts           | 39 ++++++++++++-------
 .../frontend/src/hooks/aave/useAaveBorrow.tsx |  8 ++--
 .../src/hooks/aave/useAaveEModeCategories.tsx |  4 +-
 apps/frontend/src/hooks/aave/useAaveRepay.tsx |  6 +--
 .../src/hooks/aave/useAaveReservesData.tsx    |  7 ++--
 .../src/hooks/aave/useAaveSetUserEMode.tsx    | 12 ++++--
 .../frontend/src/hooks/aave/useAaveSupply.tsx |  6 +--
 .../hooks/aave/useAaveUserReservesData.tsx    | 10 +++--
 .../src/hooks/aave/useAaveWithdraw.tsx        |  6 +--
 .../aave/AaveBorrowTransactionsFactory.ts     |  4 +-
 .../aave/AaveRepayTransactionsFactory.ts      |  9 +++--
 .../aave/AaveSupplyTransactionsFactory.ts     |  8 ++--
 .../src/utils/aave/AaveUserReservesSummary.ts |  4 +-
 .../aave/AaveWithdrawTransactionsFactory.ts   |  4 +-
 24 files changed, 98 insertions(+), 70 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
index fb1a84ad4..12c02ccd4 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
@@ -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 { config } from '../../../../../../../constants/aave';
+import { MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE } from '../../../../../../../constants/aave';
 import { useAaveBorrow } from '../../../../../../../hooks/aave/useAaveBorrow';
 import { useAaveUserReservesData } from '../../../../../../../hooks/aave/useAaveUserReservesData';
 import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
@@ -147,7 +147,7 @@ export const BorrowForm: FC<BorrowFormProps> = ({ asset, onComplete }) => {
 
       <CollateralRatioHealthBar
         ratio={Decimal.from(newCollateralRatio)}
-        minimum={config.MinCollateralRatio}
+        minimum={MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE}
       />
 
       <SimpleTable>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx
index de59e60d3..d98b970ba 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx
@@ -15,8 +15,8 @@ import { Decimal } from '@sovryn/utils';
 
 import { AmountRenderer } from '../../../../../../../../2_molecules/AmountRenderer/AmountRenderer';
 import {
-  config,
   EMODE_DISABLED_ID,
+  MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE,
 } from '../../../../../../../../../constants/aave';
 import { useAaveSetUserEMode } from '../../../../../../../../../hooks/aave/useAaveSetUserEMode';
 import { useAaveUserReservesData } from '../../../../../../../../../hooks/aave/useAaveUserReservesData';
@@ -68,7 +68,7 @@ export const DisableEModeForm: FC<DisableEModeFormProps> = ({
 
       <CollateralRatioHealthBar
         ratio={summaryAfterDisabled.collateralRatio}
-        minimum={config.MinCollateralRatio}
+        minimum={MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE}
       />
 
       <SimpleTable>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx
index 4c2e76190..d46856581 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx
@@ -17,7 +17,7 @@ import {
 import { Decimal } from '@sovryn/utils';
 
 import { AmountRenderer } from '../../../../../../../../2_molecules/AmountRenderer/AmountRenderer';
-import { config } from '../../../../../../../../../constants/aave';
+import { MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE } from '../../../../../../../../../constants/aave';
 import { useAaveSetUserEMode } from '../../../../../../../../../hooks/aave/useAaveSetUserEMode';
 import { useAaveUserReservesData } from '../../../../../../../../../hooks/aave/useAaveUserReservesData';
 import { translations } from '../../../../../../../../../locales/i18n';
@@ -106,7 +106,7 @@ export const SwitchEModeForm: FC<SwitchEModeFormProps> = ({
 
       <CollateralRatioHealthBar
         ratio={summaryAfterSwitch.collateralRatio}
-        minimum={config.MinCollateralRatio}
+        minimum={MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE}
       />
 
       <SimpleTable>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithCollateralForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithCollateralForm.tsx
index 6bd3e9754..30a3db373 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithCollateralForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithCollateralForm.tsx
@@ -18,7 +18,7 @@ import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/Amo
 import { AmountTransition } from '../../../../../../2_molecules/AmountTransition/AmountTransition';
 import { AssetAmountInput } from '../../../../../../2_molecules/AssetAmountInput/AssetAmountInput';
 import { AssetRenderer } from '../../../../../../2_molecules/AssetRenderer/AssetRenderer';
-import { config } from '../../../../../../../constants/aave';
+import { MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE } from '../../../../../../../constants/aave';
 import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
 import { translations } from '../../../../../../../locales/i18n';
 import { CollateralRatioHealthBar } from '../../../CollateralRatioHealthBar/CollateralRatioHealthBar';
@@ -144,7 +144,7 @@ export const RepayWithCollateralForm: FC<RepayWithCollateralFormProps> = () => {
 
       <CollateralRatioHealthBar
         ratio={collateralRatio}
-        minimum={config.MinCollateralRatio}
+        minimum={MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE}
       />
 
       <SimpleTable>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx
index 6d12296d1..a7688a30d 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx
@@ -16,7 +16,7 @@ import { BOB_CHAIN_ID } from '../../../../../../../config/chains';
 import { AmountTransition } from '../../../../../../2_molecules/AmountTransition/AmountTransition';
 import { AssetAmountInput } from '../../../../../../2_molecules/AssetAmountInput/AssetAmountInput';
 import { AssetRenderer } from '../../../../../../2_molecules/AssetRenderer/AssetRenderer';
-import { config } from '../../../../../../../constants/aave';
+import { MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE } from '../../../../../../../constants/aave';
 import { useAaveRepay } from '../../../../../../../hooks/aave/useAaveRepay';
 import { useAaveUserReservesData } from '../../../../../../../hooks/aave/useAaveUserReservesData';
 import { useAccount } from '../../../../../../../hooks/useAccount';
@@ -150,7 +150,7 @@ export const RepayWithWalletBalanceForm: FC<
 
       <CollateralRatioHealthBar
         ratio={newCollateralRatio}
-        minimum={config.MinCollateralRatio}
+        minimum={MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE}
       />
 
       <SimpleTable>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithCollateralForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithCollateralForm.tsx
index c38e71287..f182a4eeb 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithCollateralForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithCollateralForm.tsx
@@ -18,7 +18,7 @@ import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/Amo
 import { AmountTransition } from '../../../../../../2_molecules/AmountTransition/AmountTransition';
 import { AssetAmountInput } from '../../../../../../2_molecules/AssetAmountInput/AssetAmountInput';
 import { AssetRenderer } from '../../../../../../2_molecules/AssetRenderer/AssetRenderer';
-import { config } from '../../../../../../../constants/aave';
+import { MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE } from '../../../../../../../constants/aave';
 import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
 import { translations } from '../../../../../../../locales/i18n';
 import { CollateralRatioHealthBar } from '../../../CollateralRatioHealthBar/CollateralRatioHealthBar';
@@ -144,7 +144,7 @@ export const RepayWithCollateralForm: FC<RepayWithCollateralFormProps> = () => {
 
       <CollateralRatioHealthBar
         ratio={collateralRatio}
-        minimum={config.MinCollateralRatio}
+        minimum={MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE}
       />
 
       <SimpleTable>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx
index 61e8d0a2a..af45354bd 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx
@@ -16,7 +16,7 @@ import { BOB_CHAIN_ID } from '../../../../../../../config/chains';
 import { AmountTransition } from '../../../../../../2_molecules/AmountTransition/AmountTransition';
 import { AssetAmountInput } from '../../../../../../2_molecules/AssetAmountInput/AssetAmountInput';
 import { AssetRenderer } from '../../../../../../2_molecules/AssetRenderer/AssetRenderer';
-import { config } from '../../../../../../../constants/aave';
+import { MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE } from '../../../../../../../constants/aave';
 import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
 import { translations } from '../../../../../../../locales/i18n';
 import { CollateralRatioHealthBar } from '../../../CollateralRatioHealthBar/CollateralRatioHealthBar';
@@ -98,7 +98,7 @@ export const RepayWithWalletBalanceForm: FC<
 
       <CollateralRatioHealthBar
         ratio={collateralRatio}
-        minimum={config.MinCollateralRatio}
+        minimum={MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE}
       />
 
       <SimpleTable>
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.utils.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.utils.ts
index 66e576501..e69b02b58 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.utils.ts
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.utils.ts
@@ -1,6 +1,6 @@
 import { Decimal } from '@sovryn/utils';
 
-import { config } from '../../../../../constants/aave';
+import { AAVE_CONTRACT_ADDRESSES } from '../../../../../constants/aave';
 import { Reserve } from '../../../../../hooks/aave/useAaveReservesData';
 import { getBobExplorerUrl } from '../../../../../utils/helpers';
 
@@ -15,6 +15,6 @@ export const normalizeBorrowStats = (reserve: Reserve) => ({
     .mul(100),
   reserveFactor: Decimal.from(reserve.reserveFactor).mul(100),
   collectorContractLink: `${getBobExplorerUrl()}/address/${
-    config.TreasuryAddress
+    AAVE_CONTRACT_ADDRESSES.TREASURY
   }`,
 });
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
index 2d91d245e..f74cd192d 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
@@ -8,7 +8,7 @@ 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 { AAVE_CONTRACT_ADDRESSES } from '../../../../../constants/aave';
 import { Reserve } from '../../../../../hooks/aave/useAaveReservesData';
 import { useIsMobile } from '../../../../../hooks/useIsMobile';
 import { translations } from '../../../../../locales/i18n';
@@ -30,12 +30,12 @@ export const InterestRateModelGraph: FC<InterestRateModelGraphProps> = ({
 
   const interestRateStrategyUrl = useMemo(() => {
     return `${getBobExplorerUrl()}/address/${
-      config.InterestRateStrategyAddress
+      AAVE_CONTRACT_ADDRESSES.INTEREST_RATE_STRATEGY
     }`;
   }, []);
 
   const collectorContractUrl = useMemo(() => {
-    return `${getBobExplorerUrl()}/address/${config.TreasuryAddress}`;
+    return `${getBobExplorerUrl()}/address/${AAVE_CONTRACT_ADDRESSES.TREASURY}`;
   }, []);
 
   const currentUsageRatio = useMemo(() => {
diff --git a/apps/frontend/src/config/chains.ts b/apps/frontend/src/config/chains.ts
index e9fe504d3..ea73a5714 100644
--- a/apps/frontend/src/config/chains.ts
+++ b/apps/frontend/src/config/chains.ts
@@ -10,7 +10,8 @@ import { RSK } from '../constants/infrastructure/rsk';
 import { SEPOLIA } from '../constants/infrastructure/sepolia';
 import { Environments } from '../types/global';
 
-const IS_MAINNET = process.env.REACT_APP_NETWORK === Environments.Mainnet;
+export const IS_MAINNET =
+  process.env.REACT_APP_NETWORK === Environments.Mainnet;
 
 export enum Chains {
   RSK = 'rsk',
diff --git a/apps/frontend/src/constants/aave.ts b/apps/frontend/src/constants/aave.ts
index feacb47a1..6ff518320 100644
--- a/apps/frontend/src/constants/aave.ts
+++ b/apps/frontend/src/constants/aave.ts
@@ -1,16 +1,29 @@
-import { decimalic } from '../utils/math';
+import { IS_MAINNET } from '../config/chains';
 
-export const config = {
-  MinCollateralRatio: decimalic(1.5),
-  PoolAddress: '0xFbdc7303cc2046Ff6c340F94F71aB01517b42476',
-  WETHGatewayAddress: '0x50ff0B7a3e7af6F896CA81aF2E563814Eee7A3c0',
-  UiPoolDataProviderV3Address: '0x5E7F300702D15d8B661aed2B67dc68f8e48B3b55',
-  PoolAddressesProviderAddress: '0xc187B9083fF15B3Ae4eA56f8ab82DF52474B4E58',
-  VariableDebtWETHAddress: '0x8bA8F81a5c2F406f3eD8FE18A94AecE3E27C2831',
-  WETHAddress: '0x8CEc2719a2e896A11eA3f10406EfDb6Ad87281D9',
-  TreasuryAddress: '0x2a9d8f5b2f7b8f5b4b5d5e7f3b4b5d5b5d5d5d5d',
-  InterestRateStrategyAddress: '0x847A3364Cc5fE389283bD821cfC8A477288D9e82',
-  RepayAllETHSurplus: '1000000',
-};
+import { decimalic } from '../utils/math';
 
 export const EMODE_DISABLED_ID = 0;
+export const MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE = decimalic(1.5);
+export const REPAY_ALL_ETH_SURPLUS_AAVE = '1000000';
+
+export const AAVE_CONTRACT_ADDRESSES = IS_MAINNET
+  ? {
+      POOL: '',
+      WETH_GATEWAY: '',
+      UI_POOL_DATA_PROVIDER: '',
+      POOL_ADDRESSES_PROVIDER: '',
+      VARIABLE_DEBT_ETH: '',
+      WETH: '',
+      TREASURY: '',
+      INTEREST_RATE_STRATEGY: '',
+    }
+  : {
+      POOL: '0xFbdc7303cc2046Ff6c340F94F71aB01517b42476',
+      WETH_GATEWAY: '0x50ff0B7a3e7af6F896CA81aF2E563814Eee7A3c0',
+      UI_POOL_DATA_PROVIDER: '0x5E7F300702D15d8B661aed2B67dc68f8e48B3b55',
+      POOL_ADDRESSES_PROVIDER: '0xc187B9083fF15B3Ae4eA56f8ab82DF52474B4E58',
+      VARIABLE_DEBT_ETH: '0x8bA8F81a5c2F406f3eD8FE18A94AecE3E27C2831',
+      WETH: '0x8CEc2719a2e896A11eA3f10406EfDb6Ad87281D9',
+      TREASURY: '0x2a9d8f5b2f7b8f5b4b5d5e7f3b4b5d5b5d5d5d5d',
+      INTEREST_RATE_STRATEGY: '0x847A3364Cc5fE389283bD821cfC8A477288D9e82',
+    };
diff --git a/apps/frontend/src/hooks/aave/useAaveBorrow.tsx b/apps/frontend/src/hooks/aave/useAaveBorrow.tsx
index cba302881..c9baee288 100644
--- a/apps/frontend/src/hooks/aave/useAaveBorrow.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveBorrow.tsx
@@ -8,7 +8,7 @@ import { Decimal } from '@sovryn/utils';
 
 import { BOB_CHAIN_ID } from '../../config/chains';
 
-import { config } from '../../constants/aave';
+import { AAVE_CONTRACT_ADDRESSES } from '../../constants/aave';
 import { useTransactionContext } from '../../contexts/TransactionContext';
 import { translations } from '../../locales/i18n';
 import { BorrowRateMode, TransactionFactoryOptions } from '../../types/aave';
@@ -24,9 +24,9 @@ export const useAaveBorrow = () => {
   const aaveBorrowTransactionsFactory = useMemo(() => {
     if (!signer) return null;
     return new AaveBorrowTransactionsFactory(
-      config.PoolAddress,
-      config.WETHGatewayAddress,
-      config.VariableDebtWETHAddress,
+      AAVE_CONTRACT_ADDRESSES.POOL,
+      AAVE_CONTRACT_ADDRESSES.WETH_GATEWAY,
+      AAVE_CONTRACT_ADDRESSES.VARIABLE_DEBT_ETH,
       signer,
     );
   }, [signer]);
diff --git a/apps/frontend/src/hooks/aave/useAaveEModeCategories.tsx b/apps/frontend/src/hooks/aave/useAaveEModeCategories.tsx
index 853f846d4..21271520a 100644
--- a/apps/frontend/src/hooks/aave/useAaveEModeCategories.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveEModeCategories.tsx
@@ -4,13 +4,13 @@ import { getProvider } from '@sovryn/ethers-provider';
 
 import { BOB_CHAIN_ID } from '../../config/chains';
 
-import { config } from '../../constants/aave';
+import { AAVE_CONTRACT_ADDRESSES } from '../../constants/aave';
 import { EModeCategory } from '../../types/aave';
 import { AaveEModeCategories } from '../../utils/aave/AaveEModeCategories';
 import { useAaveReservesData } from './useAaveReservesData';
 
 const eModeCategoriesFetcher = new AaveEModeCategories(
-  config.PoolAddress,
+  AAVE_CONTRACT_ADDRESSES.POOL,
   getProvider(BOB_CHAIN_ID),
 );
 
diff --git a/apps/frontend/src/hooks/aave/useAaveRepay.tsx b/apps/frontend/src/hooks/aave/useAaveRepay.tsx
index 33500bba3..5d0f8cc05 100644
--- a/apps/frontend/src/hooks/aave/useAaveRepay.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveRepay.tsx
@@ -8,7 +8,7 @@ import { Decimal } from '@sovryn/utils';
 
 import { BOB_CHAIN_ID } from '../../config/chains';
 
-import { config } from '../../constants/aave';
+import { AAVE_CONTRACT_ADDRESSES } from '../../constants/aave';
 import { useTransactionContext } from '../../contexts/TransactionContext';
 import { translations } from '../../locales/i18n';
 import { BorrowRateMode, TransactionFactoryOptions } from '../../types/aave';
@@ -24,8 +24,8 @@ export const useAaveRepay = () => {
   const aaveRepayTransactionsFactory = useMemo(() => {
     if (!signer) return null;
     return new AaveRepayTransactionsFactory(
-      config.PoolAddress,
-      config.WETHGatewayAddress,
+      AAVE_CONTRACT_ADDRESSES.POOL,
+      AAVE_CONTRACT_ADDRESSES.WETH_GATEWAY,
       signer,
     );
   }, [signer]);
diff --git a/apps/frontend/src/hooks/aave/useAaveReservesData.tsx b/apps/frontend/src/hooks/aave/useAaveReservesData.tsx
index ca7172432..7e493d3c5 100644
--- a/apps/frontend/src/hooks/aave/useAaveReservesData.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveReservesData.tsx
@@ -12,7 +12,7 @@ import { getProvider } from '@sovryn/ethers-provider';
 
 import { BOB_CHAIN_ID } from '../../config/chains';
 
-import { config } from '../../constants/aave';
+import { AAVE_CONTRACT_ADDRESSES } from '../../constants/aave';
 import { ETH, WETH } from '../../constants/currencies';
 
 export type Reserve = ReserveDataHumanized & FormatReserveUSDResponse;
@@ -20,7 +20,7 @@ export type ReserveData = { reserves: Reserve[]; loading: boolean };
 
 const uiPoolDataProvider = new UiPoolDataProvider({
   provider: getProvider(BOB_CHAIN_ID),
-  uiPoolDataProviderAddress: config.UiPoolDataProviderV3Address,
+  uiPoolDataProviderAddress: AAVE_CONTRACT_ADDRESSES.UI_POOL_DATA_PROVIDER,
   chainId: Number(BOB_CHAIN_ID),
 });
 
@@ -31,7 +31,8 @@ export const useAaveReservesData = (): ReserveData => {
   const fetchReservesData = useCallback(async () => {
     const currentTimestamp = dayjs().unix();
     const reservesData = await uiPoolDataProvider.getReservesHumanized({
-      lendingPoolAddressProvider: config.PoolAddressesProviderAddress,
+      lendingPoolAddressProvider:
+        AAVE_CONTRACT_ADDRESSES.POOL_ADDRESSES_PROVIDER,
     });
     const formattedReserves = formatReserves({
       reserves: reservesData.reservesData,
diff --git a/apps/frontend/src/hooks/aave/useAaveSetUserEMode.tsx b/apps/frontend/src/hooks/aave/useAaveSetUserEMode.tsx
index 42bc7ce2d..eeecd3a4d 100644
--- a/apps/frontend/src/hooks/aave/useAaveSetUserEMode.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveSetUserEMode.tsx
@@ -2,7 +2,7 @@ import { useCallback, useMemo } from 'react';
 
 import { t } from 'i18next';
 
-import { config } from '../../constants/aave';
+import { AAVE_CONTRACT_ADDRESSES } from '../../constants/aave';
 import { useTransactionContext } from '../../contexts/TransactionContext';
 import { translations } from '../../locales/i18n';
 import { EModeCategory, TransactionFactoryOptions } from '../../types/aave';
@@ -16,8 +16,14 @@ export const useAaveSetUserEMode = () => {
   const { setTransactions, setIsOpen, setTitle } = useTransactionContext();
 
   const aaveEModeTransactionsFactory = useMemo(() => {
-    if (!signer) return null;
-    return new AaveEModeTransactionsFactory(config.PoolAddress, signer);
+    if (!signer) {
+      return null;
+    }
+
+    return new AaveEModeTransactionsFactory(
+      AAVE_CONTRACT_ADDRESSES.POOL,
+      signer,
+    );
   }, [signer]);
 
   const handleSetUserEMode = useCallback(
diff --git a/apps/frontend/src/hooks/aave/useAaveSupply.tsx b/apps/frontend/src/hooks/aave/useAaveSupply.tsx
index 7a952382e..73aad67e3 100644
--- a/apps/frontend/src/hooks/aave/useAaveSupply.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveSupply.tsx
@@ -8,7 +8,7 @@ import { Decimal } from '@sovryn/utils';
 
 import { BOB_CHAIN_ID } from '../../config/chains';
 
-import { config } from '../../constants/aave';
+import { AAVE_CONTRACT_ADDRESSES } from '../../constants/aave';
 import { useTransactionContext } from '../../contexts/TransactionContext';
 import { translations } from '../../locales/i18n';
 import { TransactionFactoryOptions } from '../../types/aave';
@@ -24,8 +24,8 @@ export const useAaveSupply = () => {
   const aaveSupplyTransactionsFactory = useMemo(() => {
     if (!signer) return null;
     return new AaveSupplyTransactionsFactory(
-      config.PoolAddress,
-      config.WETHGatewayAddress,
+      AAVE_CONTRACT_ADDRESSES.POOL,
+      AAVE_CONTRACT_ADDRESSES.WETH_GATEWAY,
       signer,
     );
   }, [signer]);
diff --git a/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx b/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx
index e1658dd85..b325b4fad 100644
--- a/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx
@@ -11,7 +11,7 @@ import { getProvider } from '@sovryn/ethers-provider';
 
 import { BOB_CHAIN_ID } from '../../config/chains';
 
-import { config } from '../../constants/aave';
+import { AAVE_CONTRACT_ADDRESSES } from '../../constants/aave';
 import { UserReservesData } from '../../types/aave';
 import {
   AaveUserReservesSummary,
@@ -22,7 +22,7 @@ import { useBlockNumber } from '../useBlockNumber';
 
 const uiPoolDataProvider = new UiPoolDataProvider({
   provider: getProvider(BOB_CHAIN_ID),
-  uiPoolDataProviderAddress: config.UiPoolDataProviderV3Address,
+  uiPoolDataProviderAddress: AAVE_CONTRACT_ADDRESSES.UI_POOL_DATA_PROVIDER,
   chainId: Number(BOB_CHAIN_ID),
 });
 
@@ -52,10 +52,12 @@ export const useAaveUserReservesData = (): {
     try {
       const [reservesData, userReservesData] = await Promise.all([
         uiPoolDataProvider.getReservesHumanized({
-          lendingPoolAddressProvider: config.PoolAddressesProviderAddress,
+          lendingPoolAddressProvider:
+            AAVE_CONTRACT_ADDRESSES.POOL_ADDRESSES_PROVIDER,
         }),
         uiPoolDataProvider.getUserReservesHumanized({
-          lendingPoolAddressProvider: config.PoolAddressesProviderAddress,
+          lendingPoolAddressProvider:
+            AAVE_CONTRACT_ADDRESSES.POOL_ADDRESSES_PROVIDER,
           user: account,
         }),
       ]);
diff --git a/apps/frontend/src/hooks/aave/useAaveWithdraw.tsx b/apps/frontend/src/hooks/aave/useAaveWithdraw.tsx
index f394bc80e..f2f946a77 100644
--- a/apps/frontend/src/hooks/aave/useAaveWithdraw.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveWithdraw.tsx
@@ -8,7 +8,7 @@ import { Decimal } from '@sovryn/utils';
 
 import { BOB_CHAIN_ID } from '../../config/chains';
 
-import { config } from '../../constants/aave';
+import { AAVE_CONTRACT_ADDRESSES } from '../../constants/aave';
 import { useTransactionContext } from '../../contexts/TransactionContext';
 import { translations } from '../../locales/i18n';
 import { TransactionFactoryOptions } from '../../types/aave';
@@ -24,8 +24,8 @@ export const useAaveWithdraw = () => {
   const aaveWithdrawTransactionsFactory = useMemo(() => {
     if (!signer) return null;
     return new AaveWithdrawTransactionsFactory(
-      config.PoolAddress,
-      config.WETHGatewayAddress,
+      AAVE_CONTRACT_ADDRESSES.POOL,
+      AAVE_CONTRACT_ADDRESSES.WETH_GATEWAY,
       signer,
     );
   }, [signer]);
diff --git a/apps/frontend/src/utils/aave/AaveBorrowTransactionsFactory.ts b/apps/frontend/src/utils/aave/AaveBorrowTransactionsFactory.ts
index b16da8fcf..75d822dcb 100644
--- a/apps/frontend/src/utils/aave/AaveBorrowTransactionsFactory.ts
+++ b/apps/frontend/src/utils/aave/AaveBorrowTransactionsFactory.ts
@@ -9,7 +9,7 @@ import {
   Transaction,
   TransactionType,
 } from '../../app/3_organisms/TransactionStepDialog/TransactionStepDialog.types';
-import { config } from '../../constants/aave';
+import { AAVE_CONTRACT_ADDRESSES } from '../../constants/aave';
 import { translations } from '../../locales/i18n';
 import { BorrowRateMode, TransactionFactoryOptions } from '../../types/aave';
 
@@ -56,7 +56,7 @@ export class AaveBorrowTransactionsFactory {
   ): Promise<Transaction[]> {
     if (
       asset.isNative ||
-      asset.address.toLowerCase() === config.WETHAddress.toLowerCase()
+      asset.address.toLowerCase() === AAVE_CONTRACT_ADDRESSES.WETH.toLowerCase()
     ) {
       return this.borrowNative(amount, rateMode, opts);
     } else return this.borrowToken(asset, amount, rateMode, opts);
diff --git a/apps/frontend/src/utils/aave/AaveRepayTransactionsFactory.ts b/apps/frontend/src/utils/aave/AaveRepayTransactionsFactory.ts
index 98c94269f..441a12e9f 100644
--- a/apps/frontend/src/utils/aave/AaveRepayTransactionsFactory.ts
+++ b/apps/frontend/src/utils/aave/AaveRepayTransactionsFactory.ts
@@ -9,7 +9,10 @@ import {
   Transaction,
   TransactionType,
 } from '../../app/3_organisms/TransactionStepDialog/TransactionStepDialog.types';
-import { config } from '../../constants/aave';
+import {
+  AAVE_CONTRACT_ADDRESSES,
+  REPAY_ALL_ETH_SURPLUS_AAVE,
+} from '../../constants/aave';
 import { translations } from '../../locales/i18n';
 import { BorrowRateMode, TransactionFactoryOptions } from '../../types/aave';
 import { prepareApproveTransaction } from '../transactions';
@@ -49,7 +52,7 @@ export class AaveRepayTransactionsFactory {
   ): Promise<Transaction[]> {
     if (
       token.isNative ||
-      token.address.toLowerCase() === config.WETHAddress.toLowerCase()
+      token.address.toLowerCase() === AAVE_CONTRACT_ADDRESSES.WETH.toLowerCase()
     ) {
       return this.repayNative(amount, isEntireDebt, borrowRateMode, opts);
     } else
@@ -108,7 +111,7 @@ export class AaveRepayTransactionsFactory {
       constants.AddressZero,
       BOB_CHAIN_ID,
     );
-    amount = isEntireDebt ? amount.add(config.RepayAllETHSurplus) : amount;
+    amount = isEntireDebt ? amount.add(REPAY_ALL_ETH_SURPLUS_AAVE) : amount;
 
     return [
       {
diff --git a/apps/frontend/src/utils/aave/AaveSupplyTransactionsFactory.ts b/apps/frontend/src/utils/aave/AaveSupplyTransactionsFactory.ts
index 09c017444..c5c2bb43b 100644
--- a/apps/frontend/src/utils/aave/AaveSupplyTransactionsFactory.ts
+++ b/apps/frontend/src/utils/aave/AaveSupplyTransactionsFactory.ts
@@ -9,7 +9,7 @@ import {
   Transaction,
   TransactionType,
 } from '../../app/3_organisms/TransactionStepDialog/TransactionStepDialog.types';
-import { config } from '../../constants/aave';
+import { AAVE_CONTRACT_ADDRESSES } from '../../constants/aave';
 import { translations } from '../../locales/i18n';
 import { TransactionFactoryOptions } from '../../types/aave';
 import { prepareApproveTransaction } from '../transactions';
@@ -48,7 +48,7 @@ export class AaveSupplyTransactionsFactory {
   ): Promise<Transaction[]> {
     if (
       token.isNative ||
-      token.address.toLowerCase() === config.WETHAddress.toLowerCase()
+      token.address.toLowerCase() === AAVE_CONTRACT_ADDRESSES.WETH.toLowerCase()
     ) {
       return this.supplyNative(amount, opts);
     } else return this.supplyToken(token, amount, opts);
@@ -59,7 +59,9 @@ export class AaveSupplyTransactionsFactory {
     useAsCollateral: boolean,
     opts?: TransactionFactoryOptions,
   ): Promise<Transaction[]> {
-    const tokenAddress = token.isNative ? config.WETHAddress : token.address;
+    const tokenAddress = token.isNative
+      ? AAVE_CONTRACT_ADDRESSES.WETH
+      : token.address;
 
     return [
       {
diff --git a/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts b/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
index 0dfeaaf7b..32fab812f 100644
--- a/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
+++ b/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
@@ -17,7 +17,7 @@ import { Decimal } from '@sovryn/utils';
 
 import { BOB_CHAIN_ID } from '../../config/chains';
 
-import { config } from '../../constants/aave';
+import { MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE } from '../../constants/aave';
 import { Reserve } from '../../hooks/aave/useAaveReservesData';
 import { BorrowRateMode, UserReservesData } from '../../types/aave';
 import { decimalic, fromWei } from '../math';
@@ -162,7 +162,7 @@ export class AaveUserReservesSummaryFactory {
       userSummary.currentLiquidationThreshold,
     );
     const borrowPower = AaveCalculations.computeBorrowPower(
-      config.MinCollateralRatio,
+      MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE,
       collateralBalance,
     );
     const borrowPowerUsed = AaveCalculations.computeBorrowPowerUsed(
diff --git a/apps/frontend/src/utils/aave/AaveWithdrawTransactionsFactory.ts b/apps/frontend/src/utils/aave/AaveWithdrawTransactionsFactory.ts
index dfbab462a..81ea5eb89 100644
--- a/apps/frontend/src/utils/aave/AaveWithdrawTransactionsFactory.ts
+++ b/apps/frontend/src/utils/aave/AaveWithdrawTransactionsFactory.ts
@@ -9,7 +9,7 @@ import {
   Transaction,
   TransactionType,
 } from '../../app/3_organisms/TransactionStepDialog/TransactionStepDialog.types';
-import { config } from '../../constants/aave';
+import { AAVE_CONTRACT_ADDRESSES } from '../../constants/aave';
 import { translations } from '../../locales/i18n';
 import { TransactionFactoryOptions } from '../../types/aave';
 import { prepareApproveTransaction } from '../transactions';
@@ -44,7 +44,7 @@ export class AaveWithdrawTransactionsFactory {
   ): Promise<Transaction[]> {
     if (
       token.isNative ||
-      token.address.toLowerCase() === config.WETHAddress.toLowerCase()
+      token.address.toLowerCase() === AAVE_CONTRACT_ADDRESSES.WETH.toLowerCase()
     ) {
       return this.withdrawNative(amount, isMaxAmount, opts);
     } else return this.withdrawToken(token, amount, isMaxAmount, opts);

From 28b105d32d7f930c5b7c58d9c3a6a91875a69308 Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Mon, 9 Sep 2024 12:36:32 +0300
Subject: [PATCH 097/116] Refactor config for same code style and handle
 mainnet config (#50)

* coments

* fix borrow power

* fixes and cleanup

* cleanup

* refactor config for same code style and handle mainnet config
---
 .../components/BorrowModal/BorrowForm.tsx     |  4 +-
 .../DisableEModeForm/DisableEModeForm.tsx     |  4 +-
 .../SwitchEModeForm/SwitchEModeForm.tsx       |  4 +-
 .../RepayForm/RepayWithCollateralForm.tsx     |  4 +-
 .../RepayForm/RepayWithWalletBalanceForm.tsx  |  4 +-
 .../RepayModal/RepayWithCollateralForm.tsx    |  4 +-
 .../RepayModal/RepayWithWalletBalanceForm.tsx |  4 +-
 .../BorrowDetailsGraph.utils.ts               |  4 +-
 .../InterestRateModelGraph.tsx                |  6 +--
 apps/frontend/src/config/chains.ts            |  3 +-
 apps/frontend/src/constants/aave.ts           | 38 ++++++++++++-------
 .../frontend/src/hooks/aave/useAaveBorrow.tsx |  8 ++--
 .../src/hooks/aave/useAaveEModeCategories.tsx |  4 +-
 apps/frontend/src/hooks/aave/useAaveRepay.tsx |  6 +--
 .../src/hooks/aave/useAaveReservesData.tsx    |  7 ++--
 .../src/hooks/aave/useAaveSetUserEMode.tsx    | 12 ++++--
 .../frontend/src/hooks/aave/useAaveSupply.tsx |  6 +--
 .../hooks/aave/useAaveUserReservesData.tsx    | 10 +++--
 .../src/hooks/aave/useAaveWithdraw.tsx        |  6 +--
 .../aave/AaveBorrowTransactionsFactory.ts     |  4 +-
 .../aave/AaveRepayTransactionsFactory.ts      |  9 +++--
 .../aave/AaveSupplyTransactionsFactory.ts     |  8 ++--
 .../src/utils/aave/AaveUserReservesSummary.ts |  4 +-
 .../aave/AaveWithdrawTransactionsFactory.ts   |  4 +-
 24 files changed, 97 insertions(+), 70 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
index fb1a84ad4..12c02ccd4 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
@@ -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 { config } from '../../../../../../../constants/aave';
+import { MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE } from '../../../../../../../constants/aave';
 import { useAaveBorrow } from '../../../../../../../hooks/aave/useAaveBorrow';
 import { useAaveUserReservesData } from '../../../../../../../hooks/aave/useAaveUserReservesData';
 import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
@@ -147,7 +147,7 @@ export const BorrowForm: FC<BorrowFormProps> = ({ asset, onComplete }) => {
 
       <CollateralRatioHealthBar
         ratio={Decimal.from(newCollateralRatio)}
-        minimum={config.MinCollateralRatio}
+        minimum={MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE}
       />
 
       <SimpleTable>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx
index de59e60d3..d98b970ba 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx
@@ -15,8 +15,8 @@ import { Decimal } from '@sovryn/utils';
 
 import { AmountRenderer } from '../../../../../../../../2_molecules/AmountRenderer/AmountRenderer';
 import {
-  config,
   EMODE_DISABLED_ID,
+  MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE,
 } from '../../../../../../../../../constants/aave';
 import { useAaveSetUserEMode } from '../../../../../../../../../hooks/aave/useAaveSetUserEMode';
 import { useAaveUserReservesData } from '../../../../../../../../../hooks/aave/useAaveUserReservesData';
@@ -68,7 +68,7 @@ export const DisableEModeForm: FC<DisableEModeFormProps> = ({
 
       <CollateralRatioHealthBar
         ratio={summaryAfterDisabled.collateralRatio}
-        minimum={config.MinCollateralRatio}
+        minimum={MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE}
       />
 
       <SimpleTable>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx
index 4c2e76190..d46856581 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx
@@ -17,7 +17,7 @@ import {
 import { Decimal } from '@sovryn/utils';
 
 import { AmountRenderer } from '../../../../../../../../2_molecules/AmountRenderer/AmountRenderer';
-import { config } from '../../../../../../../../../constants/aave';
+import { MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE } from '../../../../../../../../../constants/aave';
 import { useAaveSetUserEMode } from '../../../../../../../../../hooks/aave/useAaveSetUserEMode';
 import { useAaveUserReservesData } from '../../../../../../../../../hooks/aave/useAaveUserReservesData';
 import { translations } from '../../../../../../../../../locales/i18n';
@@ -106,7 +106,7 @@ export const SwitchEModeForm: FC<SwitchEModeFormProps> = ({
 
       <CollateralRatioHealthBar
         ratio={summaryAfterSwitch.collateralRatio}
-        minimum={config.MinCollateralRatio}
+        minimum={MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE}
       />
 
       <SimpleTable>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithCollateralForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithCollateralForm.tsx
index 6bd3e9754..30a3db373 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithCollateralForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithCollateralForm.tsx
@@ -18,7 +18,7 @@ import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/Amo
 import { AmountTransition } from '../../../../../../2_molecules/AmountTransition/AmountTransition';
 import { AssetAmountInput } from '../../../../../../2_molecules/AssetAmountInput/AssetAmountInput';
 import { AssetRenderer } from '../../../../../../2_molecules/AssetRenderer/AssetRenderer';
-import { config } from '../../../../../../../constants/aave';
+import { MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE } from '../../../../../../../constants/aave';
 import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
 import { translations } from '../../../../../../../locales/i18n';
 import { CollateralRatioHealthBar } from '../../../CollateralRatioHealthBar/CollateralRatioHealthBar';
@@ -144,7 +144,7 @@ export const RepayWithCollateralForm: FC<RepayWithCollateralFormProps> = () => {
 
       <CollateralRatioHealthBar
         ratio={collateralRatio}
-        minimum={config.MinCollateralRatio}
+        minimum={MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE}
       />
 
       <SimpleTable>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx
index 6d12296d1..a7688a30d 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx
@@ -16,7 +16,7 @@ import { BOB_CHAIN_ID } from '../../../../../../../config/chains';
 import { AmountTransition } from '../../../../../../2_molecules/AmountTransition/AmountTransition';
 import { AssetAmountInput } from '../../../../../../2_molecules/AssetAmountInput/AssetAmountInput';
 import { AssetRenderer } from '../../../../../../2_molecules/AssetRenderer/AssetRenderer';
-import { config } from '../../../../../../../constants/aave';
+import { MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE } from '../../../../../../../constants/aave';
 import { useAaveRepay } from '../../../../../../../hooks/aave/useAaveRepay';
 import { useAaveUserReservesData } from '../../../../../../../hooks/aave/useAaveUserReservesData';
 import { useAccount } from '../../../../../../../hooks/useAccount';
@@ -150,7 +150,7 @@ export const RepayWithWalletBalanceForm: FC<
 
       <CollateralRatioHealthBar
         ratio={newCollateralRatio}
-        minimum={config.MinCollateralRatio}
+        minimum={MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE}
       />
 
       <SimpleTable>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithCollateralForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithCollateralForm.tsx
index c38e71287..f182a4eeb 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithCollateralForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithCollateralForm.tsx
@@ -18,7 +18,7 @@ import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/Amo
 import { AmountTransition } from '../../../../../../2_molecules/AmountTransition/AmountTransition';
 import { AssetAmountInput } from '../../../../../../2_molecules/AssetAmountInput/AssetAmountInput';
 import { AssetRenderer } from '../../../../../../2_molecules/AssetRenderer/AssetRenderer';
-import { config } from '../../../../../../../constants/aave';
+import { MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE } from '../../../../../../../constants/aave';
 import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
 import { translations } from '../../../../../../../locales/i18n';
 import { CollateralRatioHealthBar } from '../../../CollateralRatioHealthBar/CollateralRatioHealthBar';
@@ -144,7 +144,7 @@ export const RepayWithCollateralForm: FC<RepayWithCollateralFormProps> = () => {
 
       <CollateralRatioHealthBar
         ratio={collateralRatio}
-        minimum={config.MinCollateralRatio}
+        minimum={MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE}
       />
 
       <SimpleTable>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx
index 61e8d0a2a..af45354bd 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx
@@ -16,7 +16,7 @@ import { BOB_CHAIN_ID } from '../../../../../../../config/chains';
 import { AmountTransition } from '../../../../../../2_molecules/AmountTransition/AmountTransition';
 import { AssetAmountInput } from '../../../../../../2_molecules/AssetAmountInput/AssetAmountInput';
 import { AssetRenderer } from '../../../../../../2_molecules/AssetRenderer/AssetRenderer';
-import { config } from '../../../../../../../constants/aave';
+import { MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE } from '../../../../../../../constants/aave';
 import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
 import { translations } from '../../../../../../../locales/i18n';
 import { CollateralRatioHealthBar } from '../../../CollateralRatioHealthBar/CollateralRatioHealthBar';
@@ -98,7 +98,7 @@ export const RepayWithWalletBalanceForm: FC<
 
       <CollateralRatioHealthBar
         ratio={collateralRatio}
-        minimum={config.MinCollateralRatio}
+        minimum={MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE}
       />
 
       <SimpleTable>
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.utils.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.utils.ts
index 66e576501..e69b02b58 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.utils.ts
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.utils.ts
@@ -1,6 +1,6 @@
 import { Decimal } from '@sovryn/utils';
 
-import { config } from '../../../../../constants/aave';
+import { AAVE_CONTRACT_ADDRESSES } from '../../../../../constants/aave';
 import { Reserve } from '../../../../../hooks/aave/useAaveReservesData';
 import { getBobExplorerUrl } from '../../../../../utils/helpers';
 
@@ -15,6 +15,6 @@ export const normalizeBorrowStats = (reserve: Reserve) => ({
     .mul(100),
   reserveFactor: Decimal.from(reserve.reserveFactor).mul(100),
   collectorContractLink: `${getBobExplorerUrl()}/address/${
-    config.TreasuryAddress
+    AAVE_CONTRACT_ADDRESSES.TREASURY
   }`,
 });
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
index 2d91d245e..f74cd192d 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
@@ -8,7 +8,7 @@ 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 { AAVE_CONTRACT_ADDRESSES } from '../../../../../constants/aave';
 import { Reserve } from '../../../../../hooks/aave/useAaveReservesData';
 import { useIsMobile } from '../../../../../hooks/useIsMobile';
 import { translations } from '../../../../../locales/i18n';
@@ -30,12 +30,12 @@ export const InterestRateModelGraph: FC<InterestRateModelGraphProps> = ({
 
   const interestRateStrategyUrl = useMemo(() => {
     return `${getBobExplorerUrl()}/address/${
-      config.InterestRateStrategyAddress
+      AAVE_CONTRACT_ADDRESSES.INTEREST_RATE_STRATEGY
     }`;
   }, []);
 
   const collectorContractUrl = useMemo(() => {
-    return `${getBobExplorerUrl()}/address/${config.TreasuryAddress}`;
+    return `${getBobExplorerUrl()}/address/${AAVE_CONTRACT_ADDRESSES.TREASURY}`;
   }, []);
 
   const currentUsageRatio = useMemo(() => {
diff --git a/apps/frontend/src/config/chains.ts b/apps/frontend/src/config/chains.ts
index e9fe504d3..ea73a5714 100644
--- a/apps/frontend/src/config/chains.ts
+++ b/apps/frontend/src/config/chains.ts
@@ -10,7 +10,8 @@ import { RSK } from '../constants/infrastructure/rsk';
 import { SEPOLIA } from '../constants/infrastructure/sepolia';
 import { Environments } from '../types/global';
 
-const IS_MAINNET = process.env.REACT_APP_NETWORK === Environments.Mainnet;
+export const IS_MAINNET =
+  process.env.REACT_APP_NETWORK === Environments.Mainnet;
 
 export enum Chains {
   RSK = 'rsk',
diff --git a/apps/frontend/src/constants/aave.ts b/apps/frontend/src/constants/aave.ts
index feacb47a1..9c5fa4dfb 100644
--- a/apps/frontend/src/constants/aave.ts
+++ b/apps/frontend/src/constants/aave.ts
@@ -1,16 +1,28 @@
+import { IS_MAINNET } from '../config/chains';
 import { decimalic } from '../utils/math';
 
-export const config = {
-  MinCollateralRatio: decimalic(1.5),
-  PoolAddress: '0xFbdc7303cc2046Ff6c340F94F71aB01517b42476',
-  WETHGatewayAddress: '0x50ff0B7a3e7af6F896CA81aF2E563814Eee7A3c0',
-  UiPoolDataProviderV3Address: '0x5E7F300702D15d8B661aed2B67dc68f8e48B3b55',
-  PoolAddressesProviderAddress: '0xc187B9083fF15B3Ae4eA56f8ab82DF52474B4E58',
-  VariableDebtWETHAddress: '0x8bA8F81a5c2F406f3eD8FE18A94AecE3E27C2831',
-  WETHAddress: '0x8CEc2719a2e896A11eA3f10406EfDb6Ad87281D9',
-  TreasuryAddress: '0x2a9d8f5b2f7b8f5b4b5d5e7f3b4b5d5b5d5d5d5d',
-  InterestRateStrategyAddress: '0x847A3364Cc5fE389283bD821cfC8A477288D9e82',
-  RepayAllETHSurplus: '1000000',
-};
-
 export const EMODE_DISABLED_ID = 0;
+export const MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE = decimalic(1.5);
+export const REPAY_ALL_ETH_SURPLUS_AAVE = '1000000';
+
+export const AAVE_CONTRACT_ADDRESSES = IS_MAINNET
+  ? {
+      POOL: '',
+      WETH_GATEWAY: '',
+      UI_POOL_DATA_PROVIDER: '',
+      POOL_ADDRESSES_PROVIDER: '',
+      VARIABLE_DEBT_ETH: '',
+      WETH: '',
+      TREASURY: '',
+      INTEREST_RATE_STRATEGY: '',
+    }
+  : {
+      POOL: '0xFbdc7303cc2046Ff6c340F94F71aB01517b42476',
+      WETH_GATEWAY: '0x50ff0B7a3e7af6F896CA81aF2E563814Eee7A3c0',
+      UI_POOL_DATA_PROVIDER: '0x5E7F300702D15d8B661aed2B67dc68f8e48B3b55',
+      POOL_ADDRESSES_PROVIDER: '0xc187B9083fF15B3Ae4eA56f8ab82DF52474B4E58',
+      VARIABLE_DEBT_ETH: '0x8bA8F81a5c2F406f3eD8FE18A94AecE3E27C2831',
+      WETH: '0x8CEc2719a2e896A11eA3f10406EfDb6Ad87281D9',
+      TREASURY: '0x2a9d8f5b2f7b8f5b4b5d5e7f3b4b5d5b5d5d5d5d',
+      INTEREST_RATE_STRATEGY: '0x847A3364Cc5fE389283bD821cfC8A477288D9e82',
+    };
diff --git a/apps/frontend/src/hooks/aave/useAaveBorrow.tsx b/apps/frontend/src/hooks/aave/useAaveBorrow.tsx
index cba302881..c9baee288 100644
--- a/apps/frontend/src/hooks/aave/useAaveBorrow.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveBorrow.tsx
@@ -8,7 +8,7 @@ import { Decimal } from '@sovryn/utils';
 
 import { BOB_CHAIN_ID } from '../../config/chains';
 
-import { config } from '../../constants/aave';
+import { AAVE_CONTRACT_ADDRESSES } from '../../constants/aave';
 import { useTransactionContext } from '../../contexts/TransactionContext';
 import { translations } from '../../locales/i18n';
 import { BorrowRateMode, TransactionFactoryOptions } from '../../types/aave';
@@ -24,9 +24,9 @@ export const useAaveBorrow = () => {
   const aaveBorrowTransactionsFactory = useMemo(() => {
     if (!signer) return null;
     return new AaveBorrowTransactionsFactory(
-      config.PoolAddress,
-      config.WETHGatewayAddress,
-      config.VariableDebtWETHAddress,
+      AAVE_CONTRACT_ADDRESSES.POOL,
+      AAVE_CONTRACT_ADDRESSES.WETH_GATEWAY,
+      AAVE_CONTRACT_ADDRESSES.VARIABLE_DEBT_ETH,
       signer,
     );
   }, [signer]);
diff --git a/apps/frontend/src/hooks/aave/useAaveEModeCategories.tsx b/apps/frontend/src/hooks/aave/useAaveEModeCategories.tsx
index 853f846d4..21271520a 100644
--- a/apps/frontend/src/hooks/aave/useAaveEModeCategories.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveEModeCategories.tsx
@@ -4,13 +4,13 @@ import { getProvider } from '@sovryn/ethers-provider';
 
 import { BOB_CHAIN_ID } from '../../config/chains';
 
-import { config } from '../../constants/aave';
+import { AAVE_CONTRACT_ADDRESSES } from '../../constants/aave';
 import { EModeCategory } from '../../types/aave';
 import { AaveEModeCategories } from '../../utils/aave/AaveEModeCategories';
 import { useAaveReservesData } from './useAaveReservesData';
 
 const eModeCategoriesFetcher = new AaveEModeCategories(
-  config.PoolAddress,
+  AAVE_CONTRACT_ADDRESSES.POOL,
   getProvider(BOB_CHAIN_ID),
 );
 
diff --git a/apps/frontend/src/hooks/aave/useAaveRepay.tsx b/apps/frontend/src/hooks/aave/useAaveRepay.tsx
index 33500bba3..5d0f8cc05 100644
--- a/apps/frontend/src/hooks/aave/useAaveRepay.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveRepay.tsx
@@ -8,7 +8,7 @@ import { Decimal } from '@sovryn/utils';
 
 import { BOB_CHAIN_ID } from '../../config/chains';
 
-import { config } from '../../constants/aave';
+import { AAVE_CONTRACT_ADDRESSES } from '../../constants/aave';
 import { useTransactionContext } from '../../contexts/TransactionContext';
 import { translations } from '../../locales/i18n';
 import { BorrowRateMode, TransactionFactoryOptions } from '../../types/aave';
@@ -24,8 +24,8 @@ export const useAaveRepay = () => {
   const aaveRepayTransactionsFactory = useMemo(() => {
     if (!signer) return null;
     return new AaveRepayTransactionsFactory(
-      config.PoolAddress,
-      config.WETHGatewayAddress,
+      AAVE_CONTRACT_ADDRESSES.POOL,
+      AAVE_CONTRACT_ADDRESSES.WETH_GATEWAY,
       signer,
     );
   }, [signer]);
diff --git a/apps/frontend/src/hooks/aave/useAaveReservesData.tsx b/apps/frontend/src/hooks/aave/useAaveReservesData.tsx
index ca7172432..7e493d3c5 100644
--- a/apps/frontend/src/hooks/aave/useAaveReservesData.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveReservesData.tsx
@@ -12,7 +12,7 @@ import { getProvider } from '@sovryn/ethers-provider';
 
 import { BOB_CHAIN_ID } from '../../config/chains';
 
-import { config } from '../../constants/aave';
+import { AAVE_CONTRACT_ADDRESSES } from '../../constants/aave';
 import { ETH, WETH } from '../../constants/currencies';
 
 export type Reserve = ReserveDataHumanized & FormatReserveUSDResponse;
@@ -20,7 +20,7 @@ export type ReserveData = { reserves: Reserve[]; loading: boolean };
 
 const uiPoolDataProvider = new UiPoolDataProvider({
   provider: getProvider(BOB_CHAIN_ID),
-  uiPoolDataProviderAddress: config.UiPoolDataProviderV3Address,
+  uiPoolDataProviderAddress: AAVE_CONTRACT_ADDRESSES.UI_POOL_DATA_PROVIDER,
   chainId: Number(BOB_CHAIN_ID),
 });
 
@@ -31,7 +31,8 @@ export const useAaveReservesData = (): ReserveData => {
   const fetchReservesData = useCallback(async () => {
     const currentTimestamp = dayjs().unix();
     const reservesData = await uiPoolDataProvider.getReservesHumanized({
-      lendingPoolAddressProvider: config.PoolAddressesProviderAddress,
+      lendingPoolAddressProvider:
+        AAVE_CONTRACT_ADDRESSES.POOL_ADDRESSES_PROVIDER,
     });
     const formattedReserves = formatReserves({
       reserves: reservesData.reservesData,
diff --git a/apps/frontend/src/hooks/aave/useAaveSetUserEMode.tsx b/apps/frontend/src/hooks/aave/useAaveSetUserEMode.tsx
index 42bc7ce2d..eeecd3a4d 100644
--- a/apps/frontend/src/hooks/aave/useAaveSetUserEMode.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveSetUserEMode.tsx
@@ -2,7 +2,7 @@ import { useCallback, useMemo } from 'react';
 
 import { t } from 'i18next';
 
-import { config } from '../../constants/aave';
+import { AAVE_CONTRACT_ADDRESSES } from '../../constants/aave';
 import { useTransactionContext } from '../../contexts/TransactionContext';
 import { translations } from '../../locales/i18n';
 import { EModeCategory, TransactionFactoryOptions } from '../../types/aave';
@@ -16,8 +16,14 @@ export const useAaveSetUserEMode = () => {
   const { setTransactions, setIsOpen, setTitle } = useTransactionContext();
 
   const aaveEModeTransactionsFactory = useMemo(() => {
-    if (!signer) return null;
-    return new AaveEModeTransactionsFactory(config.PoolAddress, signer);
+    if (!signer) {
+      return null;
+    }
+
+    return new AaveEModeTransactionsFactory(
+      AAVE_CONTRACT_ADDRESSES.POOL,
+      signer,
+    );
   }, [signer]);
 
   const handleSetUserEMode = useCallback(
diff --git a/apps/frontend/src/hooks/aave/useAaveSupply.tsx b/apps/frontend/src/hooks/aave/useAaveSupply.tsx
index 7a952382e..73aad67e3 100644
--- a/apps/frontend/src/hooks/aave/useAaveSupply.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveSupply.tsx
@@ -8,7 +8,7 @@ import { Decimal } from '@sovryn/utils';
 
 import { BOB_CHAIN_ID } from '../../config/chains';
 
-import { config } from '../../constants/aave';
+import { AAVE_CONTRACT_ADDRESSES } from '../../constants/aave';
 import { useTransactionContext } from '../../contexts/TransactionContext';
 import { translations } from '../../locales/i18n';
 import { TransactionFactoryOptions } from '../../types/aave';
@@ -24,8 +24,8 @@ export const useAaveSupply = () => {
   const aaveSupplyTransactionsFactory = useMemo(() => {
     if (!signer) return null;
     return new AaveSupplyTransactionsFactory(
-      config.PoolAddress,
-      config.WETHGatewayAddress,
+      AAVE_CONTRACT_ADDRESSES.POOL,
+      AAVE_CONTRACT_ADDRESSES.WETH_GATEWAY,
       signer,
     );
   }, [signer]);
diff --git a/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx b/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx
index e1658dd85..b325b4fad 100644
--- a/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveUserReservesData.tsx
@@ -11,7 +11,7 @@ import { getProvider } from '@sovryn/ethers-provider';
 
 import { BOB_CHAIN_ID } from '../../config/chains';
 
-import { config } from '../../constants/aave';
+import { AAVE_CONTRACT_ADDRESSES } from '../../constants/aave';
 import { UserReservesData } from '../../types/aave';
 import {
   AaveUserReservesSummary,
@@ -22,7 +22,7 @@ import { useBlockNumber } from '../useBlockNumber';
 
 const uiPoolDataProvider = new UiPoolDataProvider({
   provider: getProvider(BOB_CHAIN_ID),
-  uiPoolDataProviderAddress: config.UiPoolDataProviderV3Address,
+  uiPoolDataProviderAddress: AAVE_CONTRACT_ADDRESSES.UI_POOL_DATA_PROVIDER,
   chainId: Number(BOB_CHAIN_ID),
 });
 
@@ -52,10 +52,12 @@ export const useAaveUserReservesData = (): {
     try {
       const [reservesData, userReservesData] = await Promise.all([
         uiPoolDataProvider.getReservesHumanized({
-          lendingPoolAddressProvider: config.PoolAddressesProviderAddress,
+          lendingPoolAddressProvider:
+            AAVE_CONTRACT_ADDRESSES.POOL_ADDRESSES_PROVIDER,
         }),
         uiPoolDataProvider.getUserReservesHumanized({
-          lendingPoolAddressProvider: config.PoolAddressesProviderAddress,
+          lendingPoolAddressProvider:
+            AAVE_CONTRACT_ADDRESSES.POOL_ADDRESSES_PROVIDER,
           user: account,
         }),
       ]);
diff --git a/apps/frontend/src/hooks/aave/useAaveWithdraw.tsx b/apps/frontend/src/hooks/aave/useAaveWithdraw.tsx
index f394bc80e..f2f946a77 100644
--- a/apps/frontend/src/hooks/aave/useAaveWithdraw.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveWithdraw.tsx
@@ -8,7 +8,7 @@ import { Decimal } from '@sovryn/utils';
 
 import { BOB_CHAIN_ID } from '../../config/chains';
 
-import { config } from '../../constants/aave';
+import { AAVE_CONTRACT_ADDRESSES } from '../../constants/aave';
 import { useTransactionContext } from '../../contexts/TransactionContext';
 import { translations } from '../../locales/i18n';
 import { TransactionFactoryOptions } from '../../types/aave';
@@ -24,8 +24,8 @@ export const useAaveWithdraw = () => {
   const aaveWithdrawTransactionsFactory = useMemo(() => {
     if (!signer) return null;
     return new AaveWithdrawTransactionsFactory(
-      config.PoolAddress,
-      config.WETHGatewayAddress,
+      AAVE_CONTRACT_ADDRESSES.POOL,
+      AAVE_CONTRACT_ADDRESSES.WETH_GATEWAY,
       signer,
     );
   }, [signer]);
diff --git a/apps/frontend/src/utils/aave/AaveBorrowTransactionsFactory.ts b/apps/frontend/src/utils/aave/AaveBorrowTransactionsFactory.ts
index b16da8fcf..75d822dcb 100644
--- a/apps/frontend/src/utils/aave/AaveBorrowTransactionsFactory.ts
+++ b/apps/frontend/src/utils/aave/AaveBorrowTransactionsFactory.ts
@@ -9,7 +9,7 @@ import {
   Transaction,
   TransactionType,
 } from '../../app/3_organisms/TransactionStepDialog/TransactionStepDialog.types';
-import { config } from '../../constants/aave';
+import { AAVE_CONTRACT_ADDRESSES } from '../../constants/aave';
 import { translations } from '../../locales/i18n';
 import { BorrowRateMode, TransactionFactoryOptions } from '../../types/aave';
 
@@ -56,7 +56,7 @@ export class AaveBorrowTransactionsFactory {
   ): Promise<Transaction[]> {
     if (
       asset.isNative ||
-      asset.address.toLowerCase() === config.WETHAddress.toLowerCase()
+      asset.address.toLowerCase() === AAVE_CONTRACT_ADDRESSES.WETH.toLowerCase()
     ) {
       return this.borrowNative(amount, rateMode, opts);
     } else return this.borrowToken(asset, amount, rateMode, opts);
diff --git a/apps/frontend/src/utils/aave/AaveRepayTransactionsFactory.ts b/apps/frontend/src/utils/aave/AaveRepayTransactionsFactory.ts
index 98c94269f..441a12e9f 100644
--- a/apps/frontend/src/utils/aave/AaveRepayTransactionsFactory.ts
+++ b/apps/frontend/src/utils/aave/AaveRepayTransactionsFactory.ts
@@ -9,7 +9,10 @@ import {
   Transaction,
   TransactionType,
 } from '../../app/3_organisms/TransactionStepDialog/TransactionStepDialog.types';
-import { config } from '../../constants/aave';
+import {
+  AAVE_CONTRACT_ADDRESSES,
+  REPAY_ALL_ETH_SURPLUS_AAVE,
+} from '../../constants/aave';
 import { translations } from '../../locales/i18n';
 import { BorrowRateMode, TransactionFactoryOptions } from '../../types/aave';
 import { prepareApproveTransaction } from '../transactions';
@@ -49,7 +52,7 @@ export class AaveRepayTransactionsFactory {
   ): Promise<Transaction[]> {
     if (
       token.isNative ||
-      token.address.toLowerCase() === config.WETHAddress.toLowerCase()
+      token.address.toLowerCase() === AAVE_CONTRACT_ADDRESSES.WETH.toLowerCase()
     ) {
       return this.repayNative(amount, isEntireDebt, borrowRateMode, opts);
     } else
@@ -108,7 +111,7 @@ export class AaveRepayTransactionsFactory {
       constants.AddressZero,
       BOB_CHAIN_ID,
     );
-    amount = isEntireDebt ? amount.add(config.RepayAllETHSurplus) : amount;
+    amount = isEntireDebt ? amount.add(REPAY_ALL_ETH_SURPLUS_AAVE) : amount;
 
     return [
       {
diff --git a/apps/frontend/src/utils/aave/AaveSupplyTransactionsFactory.ts b/apps/frontend/src/utils/aave/AaveSupplyTransactionsFactory.ts
index 09c017444..c5c2bb43b 100644
--- a/apps/frontend/src/utils/aave/AaveSupplyTransactionsFactory.ts
+++ b/apps/frontend/src/utils/aave/AaveSupplyTransactionsFactory.ts
@@ -9,7 +9,7 @@ import {
   Transaction,
   TransactionType,
 } from '../../app/3_organisms/TransactionStepDialog/TransactionStepDialog.types';
-import { config } from '../../constants/aave';
+import { AAVE_CONTRACT_ADDRESSES } from '../../constants/aave';
 import { translations } from '../../locales/i18n';
 import { TransactionFactoryOptions } from '../../types/aave';
 import { prepareApproveTransaction } from '../transactions';
@@ -48,7 +48,7 @@ export class AaveSupplyTransactionsFactory {
   ): Promise<Transaction[]> {
     if (
       token.isNative ||
-      token.address.toLowerCase() === config.WETHAddress.toLowerCase()
+      token.address.toLowerCase() === AAVE_CONTRACT_ADDRESSES.WETH.toLowerCase()
     ) {
       return this.supplyNative(amount, opts);
     } else return this.supplyToken(token, amount, opts);
@@ -59,7 +59,9 @@ export class AaveSupplyTransactionsFactory {
     useAsCollateral: boolean,
     opts?: TransactionFactoryOptions,
   ): Promise<Transaction[]> {
-    const tokenAddress = token.isNative ? config.WETHAddress : token.address;
+    const tokenAddress = token.isNative
+      ? AAVE_CONTRACT_ADDRESSES.WETH
+      : token.address;
 
     return [
       {
diff --git a/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts b/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
index 0dfeaaf7b..32fab812f 100644
--- a/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
+++ b/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
@@ -17,7 +17,7 @@ import { Decimal } from '@sovryn/utils';
 
 import { BOB_CHAIN_ID } from '../../config/chains';
 
-import { config } from '../../constants/aave';
+import { MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE } from '../../constants/aave';
 import { Reserve } from '../../hooks/aave/useAaveReservesData';
 import { BorrowRateMode, UserReservesData } from '../../types/aave';
 import { decimalic, fromWei } from '../math';
@@ -162,7 +162,7 @@ export class AaveUserReservesSummaryFactory {
       userSummary.currentLiquidationThreshold,
     );
     const borrowPower = AaveCalculations.computeBorrowPower(
-      config.MinCollateralRatio,
+      MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE,
       collateralBalance,
     );
     const borrowPowerUsed = AaveCalculations.computeBorrowPowerUsed(
diff --git a/apps/frontend/src/utils/aave/AaveWithdrawTransactionsFactory.ts b/apps/frontend/src/utils/aave/AaveWithdrawTransactionsFactory.ts
index dfbab462a..81ea5eb89 100644
--- a/apps/frontend/src/utils/aave/AaveWithdrawTransactionsFactory.ts
+++ b/apps/frontend/src/utils/aave/AaveWithdrawTransactionsFactory.ts
@@ -9,7 +9,7 @@ import {
   Transaction,
   TransactionType,
 } from '../../app/3_organisms/TransactionStepDialog/TransactionStepDialog.types';
-import { config } from '../../constants/aave';
+import { AAVE_CONTRACT_ADDRESSES } from '../../constants/aave';
 import { translations } from '../../locales/i18n';
 import { TransactionFactoryOptions } from '../../types/aave';
 import { prepareApproveTransaction } from '../transactions';
@@ -44,7 +44,7 @@ export class AaveWithdrawTransactionsFactory {
   ): Promise<Transaction[]> {
     if (
       token.isNative ||
-      token.address.toLowerCase() === config.WETHAddress.toLowerCase()
+      token.address.toLowerCase() === AAVE_CONTRACT_ADDRESSES.WETH.toLowerCase()
     ) {
       return this.withdrawNative(amount, isMaxAmount, opts);
     } else return this.withdrawToken(token, amount, isMaxAmount, opts);

From 6968768e67687c282dd86ed983e726bc1625e918 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Mon, 9 Sep 2024 16:38:40 +0400
Subject: [PATCH 098/116] small fixes

---
 .../components/BorrowDetailsGraph/BorrowDetailsGraph.tsx      | 4 ++--
 .../components/SupplyDetailsGraph/SupplyDetailsGraph.tsx      | 2 +-
 apps/frontend/src/utils/math.ts                               | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
index 747f2f774..16c1bd5f8 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
@@ -102,7 +102,7 @@ export const BorrowDetailsGraph: FC<BorrowDetailsGraphProps> = ({
               label={t(pageTranslations.apr)}
               value={
                 <AmountRenderer
-                  value={reserve.variableBorrowAPR}
+                  value={borrowStats.apr}
                   suffix="%"
                   precision={2}
                 />
@@ -144,7 +144,7 @@ export const BorrowDetailsGraph: FC<BorrowDetailsGraphProps> = ({
               help={t(pageTranslations.reserveFactorInfo)}
               value={
                 <AmountRenderer
-                  value={reserve.reserveFactor}
+                  value={borrowStats.reserveFactor}
                   precision={2}
                   suffix="%"
                 />
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
index 877aa801f..2693d8687 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
@@ -103,7 +103,7 @@ export const SupplyDetailsGraph: FC<SupplyDetailsGraphProps> = ({
             label={t(pageTranslations.apy)}
             value={
               <AmountRenderer
-                value={reserve.supplyAPY}
+                value={supplyStats.supplyApy}
                 suffix="%"
                 precision={2}
               />
diff --git a/apps/frontend/src/utils/math.ts b/apps/frontend/src/utils/math.ts
index 08ca66913..68b86bf6c 100644
--- a/apps/frontend/src/utils/math.ts
+++ b/apps/frontend/src/utils/math.ts
@@ -173,6 +173,6 @@ export const formatAmountWithSuffix = (
   } else if (value.gte(1e3)) {
     return { value: value.div(1e3).toString(1), suffix: 'K' };
   } else {
-    return { value: value.toString(), suffix: '' };
+    return { value: value.toString(1), suffix: '' };
   }
 };

From c9256bee91fa9f75397ce2db16d7945423d522f4 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Mon, 9 Sep 2024 17:06:06 +0400
Subject: [PATCH 099/116] remove unused files and fix repay with balance future
 collateral ratio

---
 .../RepayForm/RepayWithWalletBalanceForm.tsx  |   4 +-
 .../RepayModal/RepayModalContainer.tsx        |  77 -------
 .../RepayModal/RepayWithCollateralForm.tsx    | 197 ------------------
 .../RepayModal/RepayWithWalletBalanceForm.tsx | 140 -------------
 4 files changed, 2 insertions(+), 416 deletions(-)
 delete mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx
 delete mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithCollateralForm.tsx
 delete mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx
index a7688a30d..a97d535c7 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx
@@ -97,9 +97,9 @@ export const RepayWithWalletBalanceForm: FC<
   const newCollateralRatio = useMemo(() => {
     return AaveCalculations.computeCollateralRatio(
       summary.collateralBalance,
-      summary.borrowBalance.add(newDebtAmountUSD),
+      summary.borrowBalance.sub(repayUsdAmount),
     );
-  }, [summary, newDebtAmountUSD]);
+  }, [summary, repayUsdAmount]);
 
   const isValidRepayAmount = useMemo(
     () => (repaySize.gt(0) ? repaySize.lte(maximumRepayAmount) : true),
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx
deleted file mode 100644
index 448de1cf4..000000000
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React, { FC, useState } from 'react';
-
-import { t } from 'i18next';
-
-import {
-  Dialog,
-  DialogBody,
-  DialogHeader,
-  Paragraph,
-  ParagraphSize,
-  Tabs,
-  TabType,
-} from '@sovryn/ui';
-
-import { translations } from '../../../../../../../locales/i18n';
-import { RepayWithCollateralForm } from './RepayWithCollateralForm';
-import { RepayWithWalletBalanceForm } from './RepayWithWalletBalanceForm';
-
-type RepayModalContainerProps = {
-  isOpen: boolean;
-  handleCloseModal: () => void;
-};
-
-enum RepayWith {
-  BALANCE = 0,
-  COLLATERAL,
-}
-
-export const RepayModalContainer: FC<RepayModalContainerProps> = ({
-  isOpen,
-  handleCloseModal,
-}) => {
-  const [activeTab, setActiveTab] = useState<RepayWith>(RepayWith.BALANCE);
-
-  return (
-    <Dialog disableFocusTrap isOpen={isOpen}>
-      <DialogHeader
-        title={t(translations.aavePage.repayModal.title)}
-        onClose={handleCloseModal}
-      />
-      <DialogBody className="space-y-3">
-        <Paragraph
-          size={ParagraphSize.small}
-          className="font-medium text-gray-30"
-        >
-          {t(translations.aavePage.repayModal.repayWith)}
-        </Paragraph>
-
-        <Tabs
-          className="flex-grow-0"
-          contentClassName="p-4"
-          index={activeTab}
-          onChange={setActiveTab}
-          items={[
-            {
-              activeClassName: 'text-primary-20',
-              dataAttribute: 'wallet-balance',
-              label: t(translations.aavePage.repayModal.walletBalance),
-            },
-            {
-              activeClassName: 'text-primary-20',
-              dataAttribute: 'collateral',
-              label: t(translations.aavePage.common.collateral),
-            },
-          ]}
-          type={TabType.secondary}
-        />
-
-        {activeTab === RepayWith.BALANCE ? (
-          <RepayWithWalletBalanceForm onSuccess={handleCloseModal} />
-        ) : (
-          <RepayWithCollateralForm onSuccess={handleCloseModal} />
-        )}
-      </DialogBody>
-    </Dialog>
-  );
-};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithCollateralForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithCollateralForm.tsx
deleted file mode 100644
index f182a4eeb..000000000
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithCollateralForm.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-import React, { FC, useMemo, useState } from 'react';
-
-import { t } from 'i18next';
-
-import {
-  Button,
-  ErrorBadge,
-  ErrorLevel,
-  HelperButton,
-  SimpleTable,
-  SimpleTableRow,
-} from '@sovryn/ui';
-import { Decimal } from '@sovryn/utils';
-
-import { BOB_CHAIN_ID } from '../../../../../../../config/chains';
-
-import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
-import { AmountTransition } from '../../../../../../2_molecules/AmountTransition/AmountTransition';
-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 { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
-import { translations } from '../../../../../../../locales/i18n';
-import { CollateralRatioHealthBar } from '../../../CollateralRatioHealthBar/CollateralRatioHealthBar';
-
-const pageTranslations = translations.aavePage;
-
-type RepayWithCollateralFormProps = {
-  onSuccess: () => void;
-};
-
-export const RepayWithCollateralForm: FC<RepayWithCollateralFormProps> = () => {
-  const assetPrice = 3258.47; // TODO: this is mocked data. Replace with proper hook
-  const totalBorrowed = Decimal.from(10); // TODO: this is mocked data. Replace with proper hook
-  const collateralToLoanRate = Decimal.from(10); // TODO: this is mocked data. Replace with proper hook
-  const collateralSize = Decimal.from(10); // TODO: this is mockd data. Replace with proper hook
-  const assets = useMemo(() => ['BTC', 'SOV'], []); // TODO: this is mocked data. Replace with proper hook
-  const [maximumRepayAmount] = useState(Decimal.from(10)); // TODO: this is mocked data. Replace with proper hook
-  const [maximumRepayWithAmount] = useState(Decimal.from(10)); // TODO: this is mocked data. Replace with proper hook
-  const [repayAsset, setRepayAsset] = useState<string>(assets[0]);
-  const [repayAmount, setRepayAmount, repaySize] = useDecimalAmountInput('');
-  const [repayWithAsset, setRepayWithAsset] = useState<string>(assets[0]);
-  const [repayWithAmount, setRepayWithAmount, repayWithSize] =
-    useDecimalAmountInput('');
-
-  const repayAssetsOptions = useMemo(
-    () =>
-      assets.map(token => ({
-        value: token,
-        label: (
-          <AssetRenderer
-            showAssetLogo
-            asset={token}
-            assetClassName="font-medium"
-          />
-        ),
-      })),
-    [assets],
-  );
-
-  const remainingDebt = useMemo(
-    () => maximumRepayAmount.sub(repaySize),
-    [repaySize, maximumRepayAmount],
-  );
-
-  const collateralRatio = useMemo(() => {
-    if ([collateralSize, totalBorrowed, repaySize].some(v => v.isZero())) {
-      return Decimal.from(0);
-    }
-
-    return collateralSize.mul(collateralToLoanRate).div(totalBorrowed).mul(100);
-  }, [collateralSize, totalBorrowed, repaySize, collateralToLoanRate]);
-
-  // TODO: add more validations
-  const isValidRepayAmount = useMemo(
-    () => (repaySize.gt(0) ? repaySize.lte(maximumRepayAmount) : true),
-    [repaySize, maximumRepayAmount],
-  );
-
-  // TODO: add more validations
-  const isValidRepayWithAmount = useMemo(
-    () =>
-      repayWithSize.gt(0) ? repayWithSize.lte(maximumRepayWithAmount) : true,
-    [repayWithSize, maximumRepayWithAmount],
-  );
-
-  // TODO: add more validations
-  const submitButtonDisabled = useMemo(
-    () =>
-      !isValidRepayAmount ||
-      repaySize.lte(0) ||
-      !isValidRepayWithAmount ||
-      repayWithSize.lte(0),
-    [isValidRepayAmount, repaySize, isValidRepayWithAmount, repayWithSize],
-  );
-
-  return (
-    <form className="flex flex-col gap-6">
-      <div className="flex flex-col gap-3">
-        <AssetAmountInput
-          chainId={BOB_CHAIN_ID}
-          label={t(translations.aavePage.repayModal.expectedAmountToRepay)}
-          maxAmount={maximumRepayAmount}
-          amountLabel={t(translations.common.amount)}
-          amountValue={repayAmount}
-          onAmountChange={setRepayAmount}
-          invalid={!isValidRepayAmount}
-          assetValue={repayAsset}
-          onAssetChange={setRepayAsset}
-          assetOptions={repayAssetsOptions}
-        />
-
-        {!isValidRepayAmount && (
-          <ErrorBadge
-            level={ErrorLevel.Critical}
-            message={t(pageTranslations.repayModal.invalidAmountError)}
-            dataAttribute="repay-amount-error"
-          />
-        )}
-      </div>
-
-      <div className="flex flex-col gap-3">
-        <AssetAmountInput
-          label={t(translations.aavePage.repayModal.collateralToRepayWith)}
-          chainId={BOB_CHAIN_ID}
-          maxAmount={maximumRepayWithAmount}
-          amountLabel={t(translations.common.amount)}
-          amountValue={repayWithAmount}
-          onAmountChange={setRepayWithAmount}
-          invalid={!isValidRepayWithAmount}
-          assetValue={repayWithAsset}
-          onAssetChange={setRepayWithAsset}
-          assetOptions={repayAssetsOptions}
-        />
-
-        {!isValidRepayWithAmount && (
-          <ErrorBadge
-            level={ErrorLevel.Critical}
-            message={t(pageTranslations.repayModal.invalidAmountError)}
-            dataAttribute="repay-with-amount-error"
-          />
-        )}
-      </div>
-
-      <CollateralRatioHealthBar
-        ratio={collateralRatio}
-        minimum={MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE}
-      />
-
-      <SimpleTable>
-        <SimpleTableRow
-          label={t(translations.aavePage.repayModal.remainingDebt)}
-          value={
-            <AmountTransition
-              className="justify-end"
-              from={{ value: remainingDebt, suffix: '%' }}
-              to={{ value: 0, suffix: '%', className: 'text-primary-10' }}
-            />
-          }
-        />
-        <SimpleTableRow
-          label={t(translations.aavePage.repayModal.newCollateralBalance)}
-          value={
-            <div className="space-y-1">
-              <AmountTransition
-                className="justify-end"
-                from={{ value: 10, suffix: 'USDT' }}
-                to={{ value: 10, suffix: 'USDT' }}
-              />
-              <AmountTransition
-                className="justify-end text-gray-40"
-                from={{ value: 10, prefix: '$' }}
-                to={{ value: 10, prefix: '$' }}
-              />
-            </div>
-          }
-        />
-        <SimpleTableRow
-          label={
-            <div className="flex space-x-1">
-              <span>{t(translations.aavePage.repayModal.priceImpact)}</span>{' '}
-              <HelperButton
-                content={t(translations.aavePage.repayModal.priceImpactInfo)}
-              />
-            </div>
-          }
-          value={<AmountRenderer value={assetPrice} prefix="$" />}
-        />
-      </SimpleTable>
-
-      <Button
-        disabled={submitButtonDisabled}
-        text={t(translations.common.buttons.confirm)}
-      />
-    </form>
-  );
-};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx
deleted file mode 100644
index af45354bd..000000000
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import React, { FC, useMemo, useState } from 'react';
-
-import { t } from 'i18next';
-
-import {
-  Button,
-  ErrorBadge,
-  ErrorLevel,
-  SimpleTable,
-  SimpleTableRow,
-} from '@sovryn/ui';
-import { Decimal } from '@sovryn/utils';
-
-import { BOB_CHAIN_ID } from '../../../../../../../config/chains';
-
-import { AmountTransition } from '../../../../../../2_molecules/AmountTransition/AmountTransition';
-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 { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
-import { translations } from '../../../../../../../locales/i18n';
-import { CollateralRatioHealthBar } from '../../../CollateralRatioHealthBar/CollateralRatioHealthBar';
-
-const pageTranslations = translations.aavePage;
-
-type RepayWithWalletBalanceFormProps = {
-  onSuccess: () => void;
-};
-
-export const RepayWithWalletBalanceForm: FC<
-  RepayWithWalletBalanceFormProps
-> = () => {
-  const totalBorrowed = Decimal.from(10); // TODO: this is mocked data. Replace with proper hook
-  const collateralToLoanRate = Decimal.from(10); // TODO: this is mocked data. Replace with proper hook
-  const collateralSize = Decimal.from(10); // TODO: this is mockd data. Replace with proper hook
-  const assetsToRepay = useMemo(() => ['BTC', 'SOV'], []); // TODO: this is mocked data. Replace with proper hook
-  const [maximumRepayAmount] = useState(Decimal.from(10)); // TODO: this is mocked data. Replace with proper hook
-  const [repayAsset, setRepayAsset] = useState<string>(assetsToRepay[0]);
-  const [repayAmount, setRepayAmount, repaySize] = useDecimalAmountInput('');
-
-  const repayAssetsOptions = useMemo(
-    () =>
-      assetsToRepay.map(token => ({
-        value: token,
-        label: (
-          <AssetRenderer
-            showAssetLogo
-            asset={token}
-            assetClassName="font-medium"
-          />
-        ),
-      })),
-    [assetsToRepay],
-  );
-
-  const isValidRepayAmount = useMemo(
-    () => (repaySize.gt(0) ? repaySize.lte(maximumRepayAmount) : true),
-    [repaySize, maximumRepayAmount],
-  );
-
-  const collateralRatio = useMemo(() => {
-    if ([collateralSize, totalBorrowed, repaySize].some(v => v.isZero())) {
-      return Decimal.from(0);
-    }
-
-    return collateralSize.mul(collateralToLoanRate).div(totalBorrowed).mul(100);
-  }, [collateralSize, totalBorrowed, repaySize, collateralToLoanRate]);
-
-  // TODO: Add validations
-  const submitButtonDisabled = useMemo(
-    () => !isValidRepayAmount || repaySize.lte(0),
-    [isValidRepayAmount, repaySize],
-  );
-
-  return (
-    <form className="flex flex-col gap-6 relative">
-      <div className="space-y-3">
-        <AssetAmountInput
-          chainId={BOB_CHAIN_ID}
-          maxAmount={maximumRepayAmount}
-          amountLabel={t(translations.common.amount)}
-          amountValue={repayAmount}
-          onAmountChange={setRepayAmount}
-          invalid={!isValidRepayAmount}
-          assetValue={repayAsset}
-          onAssetChange={setRepayAsset}
-          assetOptions={repayAssetsOptions}
-        />
-
-        {!isValidRepayAmount && (
-          <ErrorBadge
-            level={ErrorLevel.Critical}
-            message={t(pageTranslations.repayModal.invalidAmountError)}
-            dataAttribute="repay-amount-error"
-          />
-        )}
-      </div>
-
-      <CollateralRatioHealthBar
-        ratio={collateralRatio}
-        minimum={MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE}
-      />
-
-      <SimpleTable>
-        <SimpleTableRow
-          label={t(translations.aavePage.repayModal.remainingDebt)}
-          value={
-            <AmountTransition
-              className="justify-end"
-              from={{ value: 0.002429, suffix: '%' }}
-              to={{ value: 0, suffix: '%', className: 'text-primary-10' }}
-            />
-          }
-        />
-        <SimpleTableRow
-          label={t(translations.aavePage.repayModal.newCollateralBalance)}
-          value={
-            <div className="space-y-1">
-              <AmountTransition
-                className="justify-end"
-                from={{ value: 10, suffix: 'USDT' }}
-                to={{ value: 10, suffix: 'USDT' }}
-              />
-              <AmountTransition
-                className="justify-end text-gray-40"
-                from={{ value: 10, prefix: '$' }}
-                to={{ value: 10, prefix: '$' }}
-              />
-            </div>
-          }
-        />
-      </SimpleTable>
-
-      <Button
-        disabled={submitButtonDisabled}
-        text={t(translations.common.buttons.confirm)}
-      />
-    </form>
-  );
-};

From e48cb0c27b655f93a5ab4a53802bd3d05c6de37f Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Mon, 9 Sep 2024 16:17:43 +0300
Subject: [PATCH 100/116] remove unused files and fix repay with balance future
 collateral ratio (#51)

* coments

* fix borrow power

* fixes and cleanup

* cleanup

* refactor config for same code style and handle mainnet config

* small fixes

* remove unused files and fix repay with balance future collateral ratio
---
 .../RepayForm/RepayWithWalletBalanceForm.tsx  |   4 +-
 .../RepayModal/RepayModalContainer.tsx        |  77 -------
 .../RepayModal/RepayWithCollateralForm.tsx    | 197 ------------------
 .../RepayModal/RepayWithWalletBalanceForm.tsx | 140 -------------
 .../BorrowDetailsGraph/BorrowDetailsGraph.tsx |   4 +-
 .../SupplyDetailsGraph/SupplyDetailsGraph.tsx |   2 +-
 apps/frontend/src/utils/math.ts               |   2 +-
 7 files changed, 6 insertions(+), 420 deletions(-)
 delete mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx
 delete mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithCollateralForm.tsx
 delete mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx
index a7688a30d..a97d535c7 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx
@@ -97,9 +97,9 @@ export const RepayWithWalletBalanceForm: FC<
   const newCollateralRatio = useMemo(() => {
     return AaveCalculations.computeCollateralRatio(
       summary.collateralBalance,
-      summary.borrowBalance.add(newDebtAmountUSD),
+      summary.borrowBalance.sub(repayUsdAmount),
     );
-  }, [summary, newDebtAmountUSD]);
+  }, [summary, repayUsdAmount]);
 
   const isValidRepayAmount = useMemo(
     () => (repaySize.gt(0) ? repaySize.lte(maximumRepayAmount) : true),
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx
deleted file mode 100644
index 448de1cf4..000000000
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayModalContainer.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React, { FC, useState } from 'react';
-
-import { t } from 'i18next';
-
-import {
-  Dialog,
-  DialogBody,
-  DialogHeader,
-  Paragraph,
-  ParagraphSize,
-  Tabs,
-  TabType,
-} from '@sovryn/ui';
-
-import { translations } from '../../../../../../../locales/i18n';
-import { RepayWithCollateralForm } from './RepayWithCollateralForm';
-import { RepayWithWalletBalanceForm } from './RepayWithWalletBalanceForm';
-
-type RepayModalContainerProps = {
-  isOpen: boolean;
-  handleCloseModal: () => void;
-};
-
-enum RepayWith {
-  BALANCE = 0,
-  COLLATERAL,
-}
-
-export const RepayModalContainer: FC<RepayModalContainerProps> = ({
-  isOpen,
-  handleCloseModal,
-}) => {
-  const [activeTab, setActiveTab] = useState<RepayWith>(RepayWith.BALANCE);
-
-  return (
-    <Dialog disableFocusTrap isOpen={isOpen}>
-      <DialogHeader
-        title={t(translations.aavePage.repayModal.title)}
-        onClose={handleCloseModal}
-      />
-      <DialogBody className="space-y-3">
-        <Paragraph
-          size={ParagraphSize.small}
-          className="font-medium text-gray-30"
-        >
-          {t(translations.aavePage.repayModal.repayWith)}
-        </Paragraph>
-
-        <Tabs
-          className="flex-grow-0"
-          contentClassName="p-4"
-          index={activeTab}
-          onChange={setActiveTab}
-          items={[
-            {
-              activeClassName: 'text-primary-20',
-              dataAttribute: 'wallet-balance',
-              label: t(translations.aavePage.repayModal.walletBalance),
-            },
-            {
-              activeClassName: 'text-primary-20',
-              dataAttribute: 'collateral',
-              label: t(translations.aavePage.common.collateral),
-            },
-          ]}
-          type={TabType.secondary}
-        />
-
-        {activeTab === RepayWith.BALANCE ? (
-          <RepayWithWalletBalanceForm onSuccess={handleCloseModal} />
-        ) : (
-          <RepayWithCollateralForm onSuccess={handleCloseModal} />
-        )}
-      </DialogBody>
-    </Dialog>
-  );
-};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithCollateralForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithCollateralForm.tsx
deleted file mode 100644
index f182a4eeb..000000000
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithCollateralForm.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-import React, { FC, useMemo, useState } from 'react';
-
-import { t } from 'i18next';
-
-import {
-  Button,
-  ErrorBadge,
-  ErrorLevel,
-  HelperButton,
-  SimpleTable,
-  SimpleTableRow,
-} from '@sovryn/ui';
-import { Decimal } from '@sovryn/utils';
-
-import { BOB_CHAIN_ID } from '../../../../../../../config/chains';
-
-import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
-import { AmountTransition } from '../../../../../../2_molecules/AmountTransition/AmountTransition';
-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 { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
-import { translations } from '../../../../../../../locales/i18n';
-import { CollateralRatioHealthBar } from '../../../CollateralRatioHealthBar/CollateralRatioHealthBar';
-
-const pageTranslations = translations.aavePage;
-
-type RepayWithCollateralFormProps = {
-  onSuccess: () => void;
-};
-
-export const RepayWithCollateralForm: FC<RepayWithCollateralFormProps> = () => {
-  const assetPrice = 3258.47; // TODO: this is mocked data. Replace with proper hook
-  const totalBorrowed = Decimal.from(10); // TODO: this is mocked data. Replace with proper hook
-  const collateralToLoanRate = Decimal.from(10); // TODO: this is mocked data. Replace with proper hook
-  const collateralSize = Decimal.from(10); // TODO: this is mockd data. Replace with proper hook
-  const assets = useMemo(() => ['BTC', 'SOV'], []); // TODO: this is mocked data. Replace with proper hook
-  const [maximumRepayAmount] = useState(Decimal.from(10)); // TODO: this is mocked data. Replace with proper hook
-  const [maximumRepayWithAmount] = useState(Decimal.from(10)); // TODO: this is mocked data. Replace with proper hook
-  const [repayAsset, setRepayAsset] = useState<string>(assets[0]);
-  const [repayAmount, setRepayAmount, repaySize] = useDecimalAmountInput('');
-  const [repayWithAsset, setRepayWithAsset] = useState<string>(assets[0]);
-  const [repayWithAmount, setRepayWithAmount, repayWithSize] =
-    useDecimalAmountInput('');
-
-  const repayAssetsOptions = useMemo(
-    () =>
-      assets.map(token => ({
-        value: token,
-        label: (
-          <AssetRenderer
-            showAssetLogo
-            asset={token}
-            assetClassName="font-medium"
-          />
-        ),
-      })),
-    [assets],
-  );
-
-  const remainingDebt = useMemo(
-    () => maximumRepayAmount.sub(repaySize),
-    [repaySize, maximumRepayAmount],
-  );
-
-  const collateralRatio = useMemo(() => {
-    if ([collateralSize, totalBorrowed, repaySize].some(v => v.isZero())) {
-      return Decimal.from(0);
-    }
-
-    return collateralSize.mul(collateralToLoanRate).div(totalBorrowed).mul(100);
-  }, [collateralSize, totalBorrowed, repaySize, collateralToLoanRate]);
-
-  // TODO: add more validations
-  const isValidRepayAmount = useMemo(
-    () => (repaySize.gt(0) ? repaySize.lte(maximumRepayAmount) : true),
-    [repaySize, maximumRepayAmount],
-  );
-
-  // TODO: add more validations
-  const isValidRepayWithAmount = useMemo(
-    () =>
-      repayWithSize.gt(0) ? repayWithSize.lte(maximumRepayWithAmount) : true,
-    [repayWithSize, maximumRepayWithAmount],
-  );
-
-  // TODO: add more validations
-  const submitButtonDisabled = useMemo(
-    () =>
-      !isValidRepayAmount ||
-      repaySize.lte(0) ||
-      !isValidRepayWithAmount ||
-      repayWithSize.lte(0),
-    [isValidRepayAmount, repaySize, isValidRepayWithAmount, repayWithSize],
-  );
-
-  return (
-    <form className="flex flex-col gap-6">
-      <div className="flex flex-col gap-3">
-        <AssetAmountInput
-          chainId={BOB_CHAIN_ID}
-          label={t(translations.aavePage.repayModal.expectedAmountToRepay)}
-          maxAmount={maximumRepayAmount}
-          amountLabel={t(translations.common.amount)}
-          amountValue={repayAmount}
-          onAmountChange={setRepayAmount}
-          invalid={!isValidRepayAmount}
-          assetValue={repayAsset}
-          onAssetChange={setRepayAsset}
-          assetOptions={repayAssetsOptions}
-        />
-
-        {!isValidRepayAmount && (
-          <ErrorBadge
-            level={ErrorLevel.Critical}
-            message={t(pageTranslations.repayModal.invalidAmountError)}
-            dataAttribute="repay-amount-error"
-          />
-        )}
-      </div>
-
-      <div className="flex flex-col gap-3">
-        <AssetAmountInput
-          label={t(translations.aavePage.repayModal.collateralToRepayWith)}
-          chainId={BOB_CHAIN_ID}
-          maxAmount={maximumRepayWithAmount}
-          amountLabel={t(translations.common.amount)}
-          amountValue={repayWithAmount}
-          onAmountChange={setRepayWithAmount}
-          invalid={!isValidRepayWithAmount}
-          assetValue={repayWithAsset}
-          onAssetChange={setRepayWithAsset}
-          assetOptions={repayAssetsOptions}
-        />
-
-        {!isValidRepayWithAmount && (
-          <ErrorBadge
-            level={ErrorLevel.Critical}
-            message={t(pageTranslations.repayModal.invalidAmountError)}
-            dataAttribute="repay-with-amount-error"
-          />
-        )}
-      </div>
-
-      <CollateralRatioHealthBar
-        ratio={collateralRatio}
-        minimum={MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE}
-      />
-
-      <SimpleTable>
-        <SimpleTableRow
-          label={t(translations.aavePage.repayModal.remainingDebt)}
-          value={
-            <AmountTransition
-              className="justify-end"
-              from={{ value: remainingDebt, suffix: '%' }}
-              to={{ value: 0, suffix: '%', className: 'text-primary-10' }}
-            />
-          }
-        />
-        <SimpleTableRow
-          label={t(translations.aavePage.repayModal.newCollateralBalance)}
-          value={
-            <div className="space-y-1">
-              <AmountTransition
-                className="justify-end"
-                from={{ value: 10, suffix: 'USDT' }}
-                to={{ value: 10, suffix: 'USDT' }}
-              />
-              <AmountTransition
-                className="justify-end text-gray-40"
-                from={{ value: 10, prefix: '$' }}
-                to={{ value: 10, prefix: '$' }}
-              />
-            </div>
-          }
-        />
-        <SimpleTableRow
-          label={
-            <div className="flex space-x-1">
-              <span>{t(translations.aavePage.repayModal.priceImpact)}</span>{' '}
-              <HelperButton
-                content={t(translations.aavePage.repayModal.priceImpactInfo)}
-              />
-            </div>
-          }
-          value={<AmountRenderer value={assetPrice} prefix="$" />}
-        />
-      </SimpleTable>
-
-      <Button
-        disabled={submitButtonDisabled}
-        text={t(translations.common.buttons.confirm)}
-      />
-    </form>
-  );
-};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx
deleted file mode 100644
index af45354bd..000000000
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayModal/RepayWithWalletBalanceForm.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import React, { FC, useMemo, useState } from 'react';
-
-import { t } from 'i18next';
-
-import {
-  Button,
-  ErrorBadge,
-  ErrorLevel,
-  SimpleTable,
-  SimpleTableRow,
-} from '@sovryn/ui';
-import { Decimal } from '@sovryn/utils';
-
-import { BOB_CHAIN_ID } from '../../../../../../../config/chains';
-
-import { AmountTransition } from '../../../../../../2_molecules/AmountTransition/AmountTransition';
-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 { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
-import { translations } from '../../../../../../../locales/i18n';
-import { CollateralRatioHealthBar } from '../../../CollateralRatioHealthBar/CollateralRatioHealthBar';
-
-const pageTranslations = translations.aavePage;
-
-type RepayWithWalletBalanceFormProps = {
-  onSuccess: () => void;
-};
-
-export const RepayWithWalletBalanceForm: FC<
-  RepayWithWalletBalanceFormProps
-> = () => {
-  const totalBorrowed = Decimal.from(10); // TODO: this is mocked data. Replace with proper hook
-  const collateralToLoanRate = Decimal.from(10); // TODO: this is mocked data. Replace with proper hook
-  const collateralSize = Decimal.from(10); // TODO: this is mockd data. Replace with proper hook
-  const assetsToRepay = useMemo(() => ['BTC', 'SOV'], []); // TODO: this is mocked data. Replace with proper hook
-  const [maximumRepayAmount] = useState(Decimal.from(10)); // TODO: this is mocked data. Replace with proper hook
-  const [repayAsset, setRepayAsset] = useState<string>(assetsToRepay[0]);
-  const [repayAmount, setRepayAmount, repaySize] = useDecimalAmountInput('');
-
-  const repayAssetsOptions = useMemo(
-    () =>
-      assetsToRepay.map(token => ({
-        value: token,
-        label: (
-          <AssetRenderer
-            showAssetLogo
-            asset={token}
-            assetClassName="font-medium"
-          />
-        ),
-      })),
-    [assetsToRepay],
-  );
-
-  const isValidRepayAmount = useMemo(
-    () => (repaySize.gt(0) ? repaySize.lte(maximumRepayAmount) : true),
-    [repaySize, maximumRepayAmount],
-  );
-
-  const collateralRatio = useMemo(() => {
-    if ([collateralSize, totalBorrowed, repaySize].some(v => v.isZero())) {
-      return Decimal.from(0);
-    }
-
-    return collateralSize.mul(collateralToLoanRate).div(totalBorrowed).mul(100);
-  }, [collateralSize, totalBorrowed, repaySize, collateralToLoanRate]);
-
-  // TODO: Add validations
-  const submitButtonDisabled = useMemo(
-    () => !isValidRepayAmount || repaySize.lte(0),
-    [isValidRepayAmount, repaySize],
-  );
-
-  return (
-    <form className="flex flex-col gap-6 relative">
-      <div className="space-y-3">
-        <AssetAmountInput
-          chainId={BOB_CHAIN_ID}
-          maxAmount={maximumRepayAmount}
-          amountLabel={t(translations.common.amount)}
-          amountValue={repayAmount}
-          onAmountChange={setRepayAmount}
-          invalid={!isValidRepayAmount}
-          assetValue={repayAsset}
-          onAssetChange={setRepayAsset}
-          assetOptions={repayAssetsOptions}
-        />
-
-        {!isValidRepayAmount && (
-          <ErrorBadge
-            level={ErrorLevel.Critical}
-            message={t(pageTranslations.repayModal.invalidAmountError)}
-            dataAttribute="repay-amount-error"
-          />
-        )}
-      </div>
-
-      <CollateralRatioHealthBar
-        ratio={collateralRatio}
-        minimum={MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE}
-      />
-
-      <SimpleTable>
-        <SimpleTableRow
-          label={t(translations.aavePage.repayModal.remainingDebt)}
-          value={
-            <AmountTransition
-              className="justify-end"
-              from={{ value: 0.002429, suffix: '%' }}
-              to={{ value: 0, suffix: '%', className: 'text-primary-10' }}
-            />
-          }
-        />
-        <SimpleTableRow
-          label={t(translations.aavePage.repayModal.newCollateralBalance)}
-          value={
-            <div className="space-y-1">
-              <AmountTransition
-                className="justify-end"
-                from={{ value: 10, suffix: 'USDT' }}
-                to={{ value: 10, suffix: 'USDT' }}
-              />
-              <AmountTransition
-                className="justify-end text-gray-40"
-                from={{ value: 10, prefix: '$' }}
-                to={{ value: 10, prefix: '$' }}
-              />
-            </div>
-          }
-        />
-      </SimpleTable>
-
-      <Button
-        disabled={submitButtonDisabled}
-        text={t(translations.common.buttons.confirm)}
-      />
-    </form>
-  );
-};
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
index 747f2f774..16c1bd5f8 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
@@ -102,7 +102,7 @@ export const BorrowDetailsGraph: FC<BorrowDetailsGraphProps> = ({
               label={t(pageTranslations.apr)}
               value={
                 <AmountRenderer
-                  value={reserve.variableBorrowAPR}
+                  value={borrowStats.apr}
                   suffix="%"
                   precision={2}
                 />
@@ -144,7 +144,7 @@ export const BorrowDetailsGraph: FC<BorrowDetailsGraphProps> = ({
               help={t(pageTranslations.reserveFactorInfo)}
               value={
                 <AmountRenderer
-                  value={reserve.reserveFactor}
+                  value={borrowStats.reserveFactor}
                   precision={2}
                   suffix="%"
                 />
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
index 877aa801f..2693d8687 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
@@ -103,7 +103,7 @@ export const SupplyDetailsGraph: FC<SupplyDetailsGraphProps> = ({
             label={t(pageTranslations.apy)}
             value={
               <AmountRenderer
-                value={reserve.supplyAPY}
+                value={supplyStats.supplyApy}
                 suffix="%"
                 precision={2}
               />
diff --git a/apps/frontend/src/utils/math.ts b/apps/frontend/src/utils/math.ts
index 08ca66913..68b86bf6c 100644
--- a/apps/frontend/src/utils/math.ts
+++ b/apps/frontend/src/utils/math.ts
@@ -173,6 +173,6 @@ export const formatAmountWithSuffix = (
   } else if (value.gte(1e3)) {
     return { value: value.div(1e3).toString(1), suffix: 'K' };
   } else {
-    return { value: value.toString(), suffix: '' };
+    return { value: value.toString(1), suffix: '' };
   }
 };

From c2917c3d88b4676da56b2f4d4ab5f525932a394f Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Mon, 9 Sep 2024 17:53:36 +0400
Subject: [PATCH 101/116] cleanup and fixes

---
 .../BorrowModal/BorrowForm.utils.ts           |   1 -
 .../components/LendModal/LendForm.tsx         | 102 -----------
 .../LendModal/LendModalContainer.tsx          |  28 ---
 .../components/WithdrawForm/WithdrawForm.tsx  |  63 ++++---
 .../WithdrawModal/WithdrawForm.constants.ts   |  12 --
 .../components/WithdrawModal/WithdrawForm.tsx | 159 ------------------
 .../WithdrawModal/WithdrawModalContainer.tsx  |  30 ----
 7 files changed, 41 insertions(+), 354 deletions(-)
 delete mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx
 delete mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendModalContainer.tsx
 delete mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.constants.ts
 delete mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
 delete mode 100644 apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.utils.ts b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.utils.ts
index f55b40d9e..80e95bfa1 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.utils.ts
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.utils.ts
@@ -1,7 +1,6 @@
 import { MINIMUM_COLLATERAL_RATIO_LENDING_POOLS } from '../../../../../../../constants/lending';
 
 export const getCollateralRatioThresholds = () => {
-  // TODO: recheck this and adjust based on aave
   const minimumCollateralRatio =
     MINIMUM_COLLATERAL_RATIO_LENDING_POOLS.mul(100);
 
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx
deleted file mode 100644
index 967fd13cb..000000000
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendForm.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import React, { FC, useMemo, useState } from 'react';
-
-import { t } from 'i18next';
-
-import {
-  Button,
-  ErrorBadge,
-  ErrorLevel,
-  SimpleTable,
-  SimpleTableRow,
-} from '@sovryn/ui';
-import { Decimal } from '@sovryn/utils';
-
-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 { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
-import { translations } from '../../../../../../../locales/i18n';
-
-const pageTranslations = translations.aavePage;
-
-type LendFormProps = {
-  onSuccess: () => void;
-};
-
-export const LendForm: FC<LendFormProps> = () => {
-  const lendApy = 4.01; // TODO: this is mocked data. Replace with proper hook
-  const lendAssets = useMemo(() => ['BTC', 'SOV'], []); // TODO: this is mocked data. Replace with proper hook
-  const [maximumLendAmount] = useState<Decimal>(Decimal.from(10)); // TODO: this is mocked data. Replace with proper hook
-  const [lendAsset, setLendAsset] = useState<string>(lendAssets[0]);
-  const [lendAmount, setLendAmount, lendSize] = useDecimalAmountInput('');
-
-  const lendAssetsOptions = useMemo(
-    () =>
-      lendAssets.map(token => ({
-        value: token,
-        label: (
-          <AssetRenderer
-            showAssetLogo
-            asset={token}
-            assetClassName="font-medium"
-          />
-        ),
-      })),
-    [lendAssets],
-  );
-
-  const isValidLendAmount = useMemo(
-    () => (lendSize.gt(0) ? lendSize.lte(maximumLendAmount) : true),
-    [lendSize, maximumLendAmount],
-  );
-
-  const submitButtonDisabled = useMemo(
-    () => !isValidLendAmount || lendSize.lte(0),
-    [isValidLendAmount, lendSize],
-  );
-
-  return (
-    <form className="flex flex-col gap-6">
-      <div>
-        <AssetAmountInput
-          chainId={BOB_CHAIN_ID}
-          label={t(translations.aavePage.common.lend)}
-          maxAmount={maximumLendAmount}
-          amountLabel={t(translations.common.amount)}
-          amountValue={lendAmount}
-          onAmountChange={setLendAmount}
-          invalid={!isValidLendAmount}
-          assetValue={lendAsset}
-          onAssetChange={setLendAsset}
-          assetOptions={lendAssetsOptions}
-        />
-
-        {!isValidLendAmount && (
-          <ErrorBadge
-            level={ErrorLevel.Critical}
-            message={t(pageTranslations.lendModal.invalidAmountError)}
-            dataAttribute="lend-amount-error"
-          />
-        )}
-      </div>
-
-      <SimpleTable>
-        <SimpleTableRow
-          label={t(translations.aavePage.lendModal.lendApy)}
-          value={<AmountRenderer value={lendApy} suffix="%" />}
-        />
-        <SimpleTableRow
-          label={t(translations.aavePage.lendModal.collateralization)}
-          value={t(translations.aavePage.lendModal.enabled)}
-        />
-      </SimpleTable>
-
-      <Button
-        disabled={submitButtonDisabled}
-        text={t(translations.aavePage.lendModal.deposit)}
-      />
-    </form>
-  );
-};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendModalContainer.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendModalContainer.tsx
deleted file mode 100644
index 31e72739b..000000000
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendModal/LendModalContainer.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, { FC } from 'react';
-
-import { t } from 'i18next';
-
-import { Dialog, DialogBody, DialogHeader } from '@sovryn/ui';
-
-import { translations } from '../../../../../../../locales/i18n';
-import { LendForm } from './LendForm';
-
-type LendModalContainerProps = {
-  isOpen: boolean;
-  handleCloseModal: () => void;
-};
-
-export const LendModalContainer: FC<LendModalContainerProps> = ({
-  isOpen,
-  handleCloseModal,
-}) => (
-  <Dialog disableFocusTrap isOpen={isOpen}>
-    <DialogHeader
-      title={t(translations.aavePage.lendModal.title)}
-      onClose={handleCloseModal}
-    />
-    <DialogBody className="flex flex-col gap-6">
-      <LendForm onSuccess={handleCloseModal} />
-    </DialogBody>
-  </Dialog>
-);
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx
index 08ad11d45..6448114ee 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx
@@ -6,6 +6,7 @@ import {
   Button,
   ErrorBadge,
   ErrorLevel,
+  SelectOption,
   SimpleTable,
   SimpleTableRow,
   Tabs,
@@ -18,6 +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 { useAaveUserReservesData } from '../../../../../../../hooks/aave/useAaveUserReservesData';
 import { useAaveWithdraw } from '../../../../../../../hooks/aave/useAaveWithdraw';
 import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
@@ -40,19 +42,26 @@ export const WithdrawForm: FC<WithdrawFormProps> = ({ asset, onComplete }) => {
 
   const withdrawableAssetsOptions = useMemo(
     () =>
-      summary.reserves
-        .filter(r => r.supplied.gt(0))
-        .map(sa => ({
-          value: sa.asset,
-          label: (
-            <AssetRenderer
-              showAssetLogo
-              asset={sa.asset}
-              assetClassName="font-medium"
-              chainId={BOB_CHAIN_ID}
-            />
-          ),
-        })),
+      summary.reserves.reduce((acc, r) => {
+        if (r.supplied.lte(0)) {
+          return acc;
+        }
+
+        return [
+          ...acc,
+          {
+            value: r.asset,
+            label: (
+              <AssetRenderer
+                showAssetLogo
+                asset={r.asset}
+                assetClassName="font-medium"
+                chainId={BOB_CHAIN_ID}
+              />
+            ),
+          },
+        ];
+      }, [] as SelectOption<string>[]),
     [summary],
   );
 
@@ -60,19 +69,29 @@ export const WithdrawForm: FC<WithdrawFormProps> = ({ asset, onComplete }) => {
     return summary.reserves.find(r => r.reserve.symbol === withdrawAsset);
   }, [withdrawAsset, summary]);
 
-  const maximumWithdrawAmount: Decimal = useMemo(() => {
-    return withdrawReserve ? withdrawReserve.supplied : Decimal.from(0);
-  }, [withdrawReserve]);
+  const maximumWithdrawAmount = useMemo(() => {
+    if (!withdrawReserve) {
+      return Decimal.from(0);
+    }
+
+    // min collateral at which we reach minimum collateral ratio
+    const minCollateralUSD = MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE.mul(
+      withdrawReserve.borrowedUSD,
+    );
+    const maxUSDWithdrawal = summary.supplyBalance.sub(minCollateralUSD);
 
-  const withdrawAmountUsd: Decimal = useMemo(() => {
-    return withdrawReserve
-      ? withdrawSize.mul(withdrawReserve.reserve.priceInUSD)
-      : Decimal.from(0);
+    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]);
+
+  const withdrawAmountUsd = useMemo(() => {
+    return withdrawSize.mul(withdrawReserve?.reserve.priceInUSD ?? 0);
   }, [withdrawSize, withdrawReserve]);
 
   const remainingSupply = useMemo(
-    () => maximumWithdrawAmount.sub(withdrawSize),
-    [withdrawSize, maximumWithdrawAmount],
+    () => withdrawReserve?.supplied.sub(withdrawSize) ?? Decimal.from(0),
+    [withdrawSize, withdrawReserve?.supplied],
   );
 
   const isValidWithdrawAmount = useMemo(
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.constants.ts b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.constants.ts
deleted file mode 100644
index 17fb9412f..000000000
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.constants.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { t } from 'i18next';
-
-import { translations } from '../../../../../../../locales/i18n';
-
-// For now just withdraw is supported
-export const TAB_ITEMS = [
-  {
-    activeClassName: 'text-primary-20',
-    dataAttribute: 'withdraw',
-    label: t(translations.common.withdraw),
-  },
-];
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
deleted file mode 100644
index cae18f22c..000000000
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawForm.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import React, { FC, useCallback, useMemo, useState } from 'react';
-
-import { t } from 'i18next';
-
-import {
-  Button,
-  ErrorBadge,
-  ErrorLevel,
-  SelectOption,
-  SimpleTable,
-  SimpleTableRow,
-  Tabs,
-  TabType,
-} from '@sovryn/ui';
-import { Decimal } from '@sovryn/utils';
-
-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 { useAaveUserReservesData } from '../../../../../../../hooks/aave/useAaveUserReservesData';
-import { useAaveWithdraw } from '../../../../../../../hooks/aave/useAaveWithdraw';
-import { useDecimalAmountInput } from '../../../../../../../hooks/useDecimalAmountInput';
-import { translations } from '../../../../../../../locales/i18n';
-import { TAB_ITEMS } from './WithdrawForm.constants';
-
-const pageTranslations = translations.aavePage;
-
-type WithdrawFormProps = {
-  asset: string;
-  onComplete: () => void;
-};
-
-export const WithdrawForm: FC<WithdrawFormProps> = ({ asset, onComplete }) => {
-  const { handleWithdraw } = useAaveWithdraw();
-  const { summary } = useAaveUserReservesData();
-  const [withdrawAsset, setWithdrawAsset] = useState<string>(asset);
-  const [withdrawAmount, setWithdrawAmount, withdrawSize] =
-    useDecimalAmountInput('');
-
-  const withdrawableAssetsOptions = useMemo(
-    () =>
-      summary.reserves.reduce((acc, r) => {
-        if (r.supplied.lte(0)) {
-          return acc;
-        }
-
-        return [
-          ...acc,
-          {
-            value: r.asset,
-            label: (
-              <AssetRenderer
-                showAssetLogo
-                asset={r.asset}
-                assetClassName="font-medium"
-                chainId={BOB_CHAIN_ID}
-              />
-            ),
-          },
-        ];
-      }, [] as SelectOption<string>[]),
-
-    [summary],
-  );
-
-  const withdrawReserve = useMemo(() => {
-    return summary.reserves.find(r => r.reserve.symbol === withdrawAsset);
-  }, [withdrawAsset, summary]);
-
-  const maximumWithdrawAmount: Decimal = useMemo(() => {
-    return withdrawReserve ? withdrawReserve.supplied : Decimal.from(0);
-  }, [withdrawReserve]);
-
-  const withdrawAmountUsd: Decimal = useMemo(() => {
-    return withdrawReserve
-      ? withdrawSize.mul(withdrawReserve.reserve.priceInUSD)
-      : Decimal.from(0);
-  }, [withdrawSize, withdrawReserve]);
-
-  const remainingSupply = useMemo(
-    () => maximumWithdrawAmount.sub(withdrawSize),
-    [withdrawSize, maximumWithdrawAmount],
-  );
-
-  const isValidWithdrawAmount = useMemo(
-    () => (withdrawSize.gt(0) ? withdrawSize.lte(maximumWithdrawAmount) : true),
-    [withdrawSize, maximumWithdrawAmount],
-  );
-
-  const submitButtonDisabled = useMemo(
-    () => !isValidWithdrawAmount || withdrawSize.lte(0),
-    [isValidWithdrawAmount, withdrawSize],
-  );
-
-  const onConfirm = useCallback(() => {
-    handleWithdraw(
-      withdrawSize,
-      withdrawAsset,
-      withdrawSize.eq(maximumWithdrawAmount),
-      { onComplete },
-    );
-  }, [
-    handleWithdraw,
-    withdrawSize,
-    withdrawAsset,
-    onComplete,
-    maximumWithdrawAmount,
-  ]);
-
-  return (
-    <form className="flex flex-col gap-6">
-      <div className="space-y-2">
-        <Tabs type={TabType.secondary} index={0} items={TAB_ITEMS} />
-
-        <div className="space-y-3">
-          <AssetAmountInput
-            chainId={BOB_CHAIN_ID}
-            amountValue={withdrawAmount}
-            assetUsdValue={withdrawAmountUsd}
-            onAmountChange={setWithdrawAmount}
-            invalid={!isValidWithdrawAmount}
-            maxAmount={maximumWithdrawAmount}
-            assetOptions={withdrawableAssetsOptions}
-            onAssetChange={setWithdrawAsset}
-            assetValue={withdrawAsset}
-            amountLabel={t(translations.common.amount)}
-          />
-          {!isValidWithdrawAmount && (
-            <ErrorBadge
-              level={ErrorLevel.Critical}
-              message={t(pageTranslations.withdrawForm.invalidAmountError)}
-              dataAttribute="withdraw-amount-error"
-            />
-          )}
-        </div>
-      </div>
-
-      <SimpleTable>
-        <SimpleTableRow
-          label={t(translations.aavePage.withdrawForm.remainingSupply)}
-          value={
-            <AmountRenderer
-              value={remainingSupply.toNumber()}
-              suffix={withdrawAsset}
-            />
-          }
-        />
-      </SimpleTable>
-
-      <Button
-        disabled={submitButtonDisabled}
-        onClick={onConfirm}
-        text={t(translations.common.buttons.confirm)}
-      />
-    </form>
-  );
-};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx
deleted file mode 100644
index dfa71b48a..000000000
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawModal/WithdrawModalContainer.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React, { FC } from 'react';
-
-import { t } from 'i18next';
-
-import { Dialog, DialogBody, DialogHeader } from '@sovryn/ui';
-
-import { translations } from '../../../../../../../locales/i18n';
-import { WithdrawForm } from './WithdrawForm';
-
-type WithdrawModalContainerProps = {
-  asset: string;
-  isOpen: boolean;
-  handleCloseModal: () => void;
-};
-
-export const WithdrawModalContainer: FC<WithdrawModalContainerProps> = ({
-  asset,
-  isOpen,
-  handleCloseModal,
-}) => (
-  <Dialog disableFocusTrap isOpen={isOpen}>
-    <DialogHeader
-      title={t(translations.aavePage.common.withdraw)}
-      onClose={handleCloseModal}
-    />
-    <DialogBody className="flex flex-col gap-6">
-      <WithdrawForm asset={asset} onComplete={handleCloseModal} />
-    </DialogBody>
-  </Dialog>
-);

From 47a41eb67fc921eb80b2625b94c6063598f1cd08 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Mon, 9 Sep 2024 18:02:11 +0400
Subject: [PATCH 102/116] disable collateral toggle if liquidation risk arises
 from it

---
 .../src/app/5_pages/AavePage/AavePage.utils.tsx   | 15 ++++++++++++++-
 .../LendPositionsList/LendPositionsList.types.tsx |  1 +
 .../ToggleCollateralAction.tsx                    |  1 +
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx b/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
index 51026f5fe..ee7a0f092 100644
--- a/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
@@ -2,10 +2,14 @@ import { t } from 'i18next';
 
 import { Decimal } from '@sovryn/utils';
 
-import { EMODE_DISABLED_ID } from '../../../constants/aave';
+import {
+  EMODE_DISABLED_ID,
+  MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE,
+} from '../../../constants/aave';
 import { Reserve } from '../../../hooks/aave/useAaveReservesData';
 import { translations } from '../../../locales/i18n';
 import { BorrowRateMode } from '../../../types/aave';
+import { AaveCalculations } from '../../../utils/aave/AaveCalculations';
 import { AaveUserReservesSummary } from '../../../utils/aave/AaveUserReservesSummary';
 import { BorrowPoolDetails } from './components/BorrowAssetsList/BorrowAssetsList.types';
 import { BorrowPosition } from './components/BorrowPositionsList/BorrowPositionsList.types';
@@ -30,12 +34,21 @@ export const normalizeLendPositions = (
 ): LendPosition[] => {
   return userReservesSummary.reserves.reduce((acc, r) => {
     if (r.supplied.gt(0)) {
+      // can toggle if disabled or if after disabling collateralRatio is still above minimum
+      const canToggleCollateral =
+        !r.collateral ||
+        AaveCalculations.computeCollateralRatio(
+          userReservesSummary.collateralBalance.sub(r.suppliedUSD),
+          userReservesSummary.borrowBalance,
+        ).gt(MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE);
+
       acc.push({
         asset: r.reserve.symbol,
         apy: Decimal.from(r.reserve.supplyAPY).mul(100),
         supplied: r.supplied,
         suppliedUSD: r.suppliedUSD,
         collateral: r.collateral,
+        canToggleCollateral,
       });
     }
     return acc;
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.types.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.types.tsx
index c3f52e519..a5967160f 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.types.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.types.tsx
@@ -6,4 +6,5 @@ export type LendPosition = {
   suppliedUSD: Decimal;
   apy: Decimal;
   collateral: boolean;
+  canToggleCollateral: boolean;
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx
index d6d4a477c..4dd25f2d6 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx
@@ -26,6 +26,7 @@ export const ToggleCollateralAction: FC<ToggleCollateralActionProps> = ({
       className="[&_*]:ml-0"
       checked={isCollateral}
       onChange={toggleCollateral}
+      disabled={position.canToggleCollateral === false}
     />
   );
 };

From 97e840f45c797b888e6fa615240541ed9f5b9baf Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Mon, 9 Sep 2024 18:35:27 +0400
Subject: [PATCH 103/116] add sorting in tables

---
 .../app/5_pages/AavePage/AavePage.utils.tsx   | 13 +++++++++++
 .../BorrowAssetsList.constants.tsx            |  6 ++---
 .../BorrowAssetsList/BorrowAssetsList.tsx     | 18 +++++++++++----
 .../BorrowPositionsList.constants.tsx         |  4 ++--
 .../BorrowPositionsList.tsx                   | 16 +++++++++++---
 .../LendAssetsList/LendAssetsList.tsx         | 22 ++++++++++++-------
 .../LendPositionsList.constants.tsx           |  2 +-
 .../LendPositionsList/LendPositionsList.tsx   | 14 ++++++++----
 8 files changed, 70 insertions(+), 25 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx b/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
index ee7a0f092..89dc53b25 100644
--- a/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
@@ -1,5 +1,6 @@
 import { t } from 'i18next';
 
+import { OrderDirection, OrderOptions } from '@sovryn/ui';
 import { Decimal } from '@sovryn/utils';
 
 import {
@@ -146,3 +147,15 @@ export const normalizeLendPoolDetails = (
     walletBalance: r.walletBalance,
   }));
 };
+
+export const sortRowsByOrderOptions = (
+  orderOptions: OrderOptions,
+  rows: any[],
+) => {
+  const direction = orderOptions.orderDirection === OrderDirection.Asc ? 1 : -1;
+  return rows.sort((a, b) =>
+    b[orderOptions.orderBy || ''] > a[orderOptions.orderBy || '']
+      ? direction
+      : -direction,
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
index a4a4a7235..9d7061c2d 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
@@ -35,7 +35,7 @@ export const COLUMNS_CONFIG = (onBorrowClick: (asset: string) => void) => [
     ),
   },
   {
-    id: 'available',
+    id: 'availableUSD',
     sortable: true,
     align: Align.center,
     className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
@@ -66,8 +66,8 @@ export const COLUMNS_CONFIG = (onBorrowClick: (asset: string) => void) => [
     className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
     title: (
       <span className="flex items-center gap-1 text-gray-30">
-        {t(pageTranslations.common.apr)}{' '}
-        <HelperButton content={t(pageTranslations.common.aprInfo)} />
+        {t(pageTranslations.common.apy)}{' '}
+        <HelperButton content={t(pageTranslations.common.apyInfo)} />
       </span>
     ),
     cellRenderer: (pool: BorrowPoolDetails) => (
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
index 18fc484ff..4f0c21297 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useState } from 'react';
+import React, { FC, useCallback, useMemo, useState } from 'react';
 
 import { t } from 'i18next';
 
@@ -9,12 +9,14 @@ import {
   DialogHeader,
   ErrorBadge,
   ErrorLevel,
+  OrderDirection,
   OrderOptions,
   Table,
 } from '@sovryn/ui';
 
 import { AaveRowTitle } from '../../../../2_molecules/AavePoolRowTitle/AavePoolRowTitle';
 import { translations } from '../../../../../locales/i18n';
+import { sortRowsByOrderOptions } from '../../AavePage.utils';
 import { COLUMNS_CONFIG } from './BorrowAssetsList.constants';
 import { BorrowPoolDetails } from './BorrowAssetsList.types';
 import { BorrowAssetDetails } from './components/BorrowAssetDetails/BorrowAssetDetails';
@@ -34,7 +36,10 @@ export const BorrowAssetsList: FC<BorrowAssetsListProps> = ({
   loading,
 }) => {
   const [open, setOpen] = useState(true);
-  const [orderOptions, setOrderOptions] = useState<OrderOptions>();
+  const [orderOptions, setOrderOptions] = useState<OrderOptions>({
+    orderBy: 'asset',
+    orderDirection: OrderDirection.Desc,
+  });
   const [borrowAssetDialog, setBorrowAssetDialog] = useState<string>();
 
   const onBorrowClose = useCallback(() => {
@@ -47,7 +52,7 @@ export const BorrowAssetsList: FC<BorrowAssetsListProps> = ({
         asset={row.asset}
         value={row.apy}
         suffix="%"
-        label={t(translations.aavePage.common.apy)}
+        label={t(translations.aavePage.common.apr)}
         precision={2}
       />
     ),
@@ -64,6 +69,11 @@ export const BorrowAssetsList: FC<BorrowAssetsListProps> = ({
     [setBorrowAssetDialog],
   );
 
+  const rows = useMemo(
+    () => sortRowsByOrderOptions(orderOptions, borrowPools),
+    [orderOptions, borrowPools],
+  );
+
   return (
     <Accordion
       label={
@@ -92,7 +102,7 @@ export const BorrowAssetsList: FC<BorrowAssetsListProps> = ({
         accordionClassName="bg-gray-60 border border-gray-70"
         rowTitle={rowTitleRenderer}
         mobileRenderer={mobileRenderer}
-        rows={borrowPools}
+        rows={rows}
         orderOptions={orderOptions}
         setOrderOptions={setOrderOptions}
       />
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
index 9512277dd..f45c92b5a 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
@@ -35,7 +35,7 @@ export const COLUMNS_CONFIG = (onRepayClick: (asset: string) => void) => [
     ),
   },
   {
-    id: 'balance',
+    id: 'borrowed',
     sortable: true,
     align: Align.center,
     className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
@@ -64,7 +64,7 @@ export const COLUMNS_CONFIG = (onRepayClick: (asset: string) => void) => [
     ),
   },
   {
-    id: 'apyType',
+    id: 'borrowRateMode',
     sortable: true,
     align: Align.center,
     className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
index 5baec6ea6..04204d48c 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useState } from 'react';
+import React, { FC, useCallback, useMemo, useState } from 'react';
 
 import { t } from 'i18next';
 
@@ -7,6 +7,7 @@ import {
   Dialog,
   DialogBody,
   DialogHeader,
+  OrderDirection,
   OrderOptions,
   Paragraph,
   Table,
@@ -16,6 +17,7 @@ import { Decimal } from '@sovryn/utils';
 import { AaveRowTitle } from '../../../../2_molecules/AavePoolRowTitle/AavePoolRowTitle';
 import { useAccount } from '../../../../../hooks/useAccount';
 import { translations } from '../../../../../locales/i18n';
+import { sortRowsByOrderOptions } from '../../AavePage.utils';
 import { PoolPositionStat } from '../PoolPositionStat/PoolPositionStat';
 import { COLUMNS_CONFIG } from './BorrowPositionsList.constants';
 import { BorrowPosition } from './BorrowPositionsList.types';
@@ -44,7 +46,10 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = ({
 }) => {
   const { account } = useAccount();
   const [open, setOpen] = useState(true);
-  const [orderOptions, setOrderOptions] = useState<OrderOptions>();
+  const [orderOptions, setOrderOptions] = useState<OrderOptions>({
+    orderBy: 'asset',
+    orderDirection: OrderDirection.Desc,
+  });
   const [repayAssetDialog, setRepayAssetDialog] = useState<string>();
 
   const onRepayClose = useCallback(() => {
@@ -73,6 +78,11 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = ({
     [setRepayAssetDialog],
   );
 
+  const rows = useMemo(
+    () => sortRowsByOrderOptions(orderOptions, borrowPositions),
+    [orderOptions, borrowPositions],
+  );
+
   return (
     <Accordion
       label={
@@ -129,7 +139,7 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = ({
             accordionClassName="bg-gray-60 border border-gray-70"
             rowTitle={rowTitleRenderer}
             mobileRenderer={mobileRenderer}
-            rows={borrowPositions}
+            rows={rows}
             orderOptions={orderOptions}
             setOrderOptions={setOrderOptions}
           />
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
index a64028e17..0a7c024df 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
@@ -8,12 +8,14 @@ import {
   Dialog,
   DialogBody,
   DialogHeader,
+  OrderDirection,
   OrderOptions,
   Table,
 } from '@sovryn/ui';
 
 import { AaveRowTitle } from '../../../../2_molecules/AavePoolRowTitle/AavePoolRowTitle';
 import { translations } from '../../../../../locales/i18n';
+import { sortRowsByOrderOptions } from '../../AavePage.utils';
 import { COLUMNS_CONFIG } from './LendAssetsList.constants';
 import { LendPoolDetails } from './LendAssetsList.types';
 import { LendAssetDetails } from './components/LendAssetDetails/LendAssetDetails';
@@ -32,7 +34,10 @@ export const LendAssetsList: FC<LendAssetsListProps> = ({
 }) => {
   const [open, setOpen] = useState(true);
   const [showZeroBalances, setShowZeroBalances] = useState(true);
-  const [orderOptions, setOrderOptions] = useState<OrderOptions>();
+  const [orderOptions, setOrderOptions] = useState<OrderOptions>({
+    orderBy: 'asset',
+    orderDirection: OrderDirection.Desc,
+  });
   const [lendAssetDialog, setLendAssetDialog] = useState<string | undefined>();
 
   const onLendClose = useCallback(() => {
@@ -62,12 +67,13 @@ export const LendAssetsList: FC<LendAssetsListProps> = ({
     [],
   );
 
-  const filteredLendPools = useMemo(() => {
-    if (showZeroBalances) {
-      return lendPools;
-    }
-    return lendPools.filter(p => p.walletBalance.gt(0));
-  }, [lendPools, showZeroBalances]);
+  const rows = useMemo(() => {
+    const filtered = showZeroBalances
+      ? lendPools
+      : lendPools.filter(p => p.walletBalance.gt(0));
+
+    return sortRowsByOrderOptions(orderOptions, filtered);
+  }, [lendPools, showZeroBalances, orderOptions]);
 
   return (
     <Accordion
@@ -95,7 +101,7 @@ export const LendAssetsList: FC<LendAssetsListProps> = ({
         accordionClassName="bg-gray-60 border border-gray-70"
         rowTitle={rowTitleRenderer}
         mobileRenderer={mobileRenderer}
-        rows={filteredLendPools}
+        rows={rows}
         orderOptions={orderOptions}
         setOrderOptions={setOrderOptions}
       />
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
index cff94bf4f..ba4967a3f 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
@@ -36,7 +36,7 @@ export const COLUMNS_CONFIG = (onWithdrawClick: (asset: string) => void) => [
     ),
   },
   {
-    id: 'balance',
+    id: 'suppliedUSD',
     sortable: true,
     align: Align.center,
     className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
index 19d114a4d..e4bd6704f 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useState } from 'react';
+import React, { FC, useCallback, useMemo, useState } from 'react';
 
 import { t } from 'i18next';
 
@@ -17,6 +17,7 @@ import { Decimal } from '@sovryn/utils';
 import { AaveRowTitle } from '../../../../2_molecules/AavePoolRowTitle/AavePoolRowTitle';
 import { useAccount } from '../../../../../hooks/useAccount';
 import { translations } from '../../../../../locales/i18n';
+import { sortRowsByOrderOptions } from '../../AavePage.utils';
 import { PoolPositionStat } from '../PoolPositionStat/PoolPositionStat';
 import { COLUMNS_CONFIG } from './LendPositionsList.constants';
 import { LendPosition } from './LendPositionsList.types';
@@ -44,8 +45,8 @@ export const LendPositionsList: FC<LendPositionsListProps> = ({
   const [open, setOpen] = useState(true);
   const [withdrawAssetDialog, setWithdrawAssetDialog] = useState<string>();
   const [orderOptions, setOrderOptions] = useState<OrderOptions>({
-    orderBy: 'balance',
-    orderDirection: OrderDirection.Asc,
+    orderBy: 'asset',
+    orderDirection: OrderDirection.Desc,
   });
 
   const onWithdrawClose = useCallback(() => {
@@ -74,6 +75,11 @@ export const LendPositionsList: FC<LendPositionsListProps> = ({
     [],
   );
 
+  const rows = useMemo(
+    () => sortRowsByOrderOptions(orderOptions, lendPositions),
+    [orderOptions, lendPositions],
+  );
+
   return (
     <Accordion
       label={
@@ -118,7 +124,7 @@ export const LendPositionsList: FC<LendPositionsListProps> = ({
             accordionClassName="bg-gray-60 border border-gray-70"
             rowTitle={rowTitleRenderer}
             mobileRenderer={mobileRenderer}
-            rows={lendPositions}
+            rows={rows}
             orderOptions={orderOptions}
             setOrderOptions={setOrderOptions}
           />

From 4ec86863d26c787207bc0ed3e4347a532171dfb6 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Mon, 9 Sep 2024 19:53:12 +0400
Subject: [PATCH 104/116] precision and percentage

---
 .../BorrowPositionsList/BorrowPositionsList.constants.tsx     | 2 +-
 apps/frontend/src/locales/en/translations.json                | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
index f45c92b5a..d466c39cc 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.constants.tsx
@@ -45,7 +45,7 @@ export const COLUMNS_CONFIG = (onRepayClick: (asset: string) => void) => [
       </span>
     ),
     cellRenderer: (pool: BorrowPosition) => (
-      <AmountRenderer value={pool.borrowed} suffix={pool.asset} />
+      <AmountRenderer value={pool.borrowed} suffix={pool.asset} precision={2} />
     ),
   },
   {
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index 9c990d275..3767d3445 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -872,8 +872,8 @@
             "borrowPowerUsed": "Borrow power used",
             "borrowPowerUsedInfo": "The % of your total borrowing power used. This is based on the amount of your collateral supplied and the total amount that you can borrow.",
             "eMode": "E-Mode",
-            "selectVariableApy": "APY, variable {{apy}}",
-            "selectStableApy": "APY, stable {{apy}}",
+            "selectVariableApy": "APY, variable {{apy}} %",
+            "selectStableApy": "APY, stable {{apy}} %",
             "apyInfo": "The weighted average of APY for all borrowed assets, including incentives."
         },
         "borrowAssetsList": {

From 83ae7f5d832cc737a54210fb8eade30408a161f1 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Tue, 10 Sep 2024 20:44:35 +0400
Subject: [PATCH 105/116] fix hex chainId

---
 packages/sdex/src/constants.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sdex/src/constants.ts b/packages/sdex/src/constants.ts
index ed5bbee82..9e25d8cb6 100644
--- a/packages/sdex/src/constants.ts
+++ b/packages/sdex/src/constants.ts
@@ -138,7 +138,7 @@ const LOCAL_FORK_CHAIN: ChainSpec = Object.assign({}, SEPOLIA_CHAIN, {
 
 export const CHAIN_SPECS: { [chainId: string]: ChainSpec } = {
   '0xed88': BOB_CHAIN,
-  '0x6f': BOB_TESTNET_CHAIN,
+  '0xc576d': BOB_TESTNET_CHAIN,
   '0x7a69': LOCAL_FORK_CHAIN,
   '0xaa36a7': SEPOLIA_CHAIN,
   '0x1b669': TENDERLY_FORK,

From a497df393b75efb6a97bd1a6cc468bf42b0692de Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Tue, 10 Sep 2024 21:56:58 +0400
Subject: [PATCH 106/116] fix chain id

---
 packages/sdex/src/constants.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sdex/src/constants.ts b/packages/sdex/src/constants.ts
index ed5bbee82..9e25d8cb6 100644
--- a/packages/sdex/src/constants.ts
+++ b/packages/sdex/src/constants.ts
@@ -138,7 +138,7 @@ const LOCAL_FORK_CHAIN: ChainSpec = Object.assign({}, SEPOLIA_CHAIN, {
 
 export const CHAIN_SPECS: { [chainId: string]: ChainSpec } = {
   '0xed88': BOB_CHAIN,
-  '0x6f': BOB_TESTNET_CHAIN,
+  '0xc576d': BOB_TESTNET_CHAIN,
   '0x7a69': LOCAL_FORK_CHAIN,
   '0xaa36a7': SEPOLIA_CHAIN,
   '0x1b669': TENDERLY_FORK,

From cb7aabf9cc039574926ef3f3f40fb4c2f6d60413 Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Wed, 11 Sep 2024 08:42:15 -0300
Subject: [PATCH 107/116] Apply suggestions from code review

Co-authored-by: Pietro <74987028+pietro-maximoff@users.noreply.github.com>
---
 .../app/5_pages/AavePage/AavePage.utils.tsx   |  5 +-
 .../components/BorrowModal/BorrowForm.tsx     | 80 ++++++++-------
 .../BorrowPositionsList.tsx                   |  4 +-
 .../EfficiencyModeCard/EfficiencyModeCard.tsx | 19 ++--
 .../DisableEModeForm/DisableEModeForm.tsx     | 35 ++++---
 .../EnableEModeForm/EnableEModeForm.tsx       | 37 ++++---
 .../SwitchEModeForm/SwitchEModeForm.tsx       | 99 ++++++++++---------
 .../RepayForm/RepayWithWalletBalanceForm.tsx  | 83 +++++++++-------
 .../LendAssetsList/LendAssetsList.tsx         |  4 +-
 .../LendAssetAction/LendAssetAction.tsx       |  7 +-
 .../components/LendForm/LendForm.tsx          | 28 +++---
 .../LendPositionsList/LendPositionsList.tsx   |  7 +-
 .../ToggleCollateralAction.tsx                | 12 ++-
 .../components/WithdrawForm/WithdrawForm.tsx  | 40 ++++----
 .../AaveReserveOverviewPage.tsx               |  9 +-
 .../BorrowDetailsGraph/BorrowDetailsGraph.tsx |  4 +-
 .../components/EModeDetails/EModeDetails.tsx  |  8 +-
 .../InterestRateModelGraph.tsx                | 26 ++---
 .../components/Chart/Chart.tsx                | 46 +++++----
 .../components/Chart/Chart.utils.ts           | 22 +++--
 .../SupplyDetailsGraph/SupplyDetailsGraph.tsx |  4 +-
 .../components/TopPanel/TopPanel.tsx          | 18 ++--
 .../WalletOverview/WalletOverview.tsx         | 14 +--
 .../components/BorrowAction/BorrowAction.tsx  |  8 +-
 .../components/SupplyAction/SupplyAction.tsx  |  8 +-
 25 files changed, 337 insertions(+), 290 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx b/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
index 89dc53b25..72b268c5d 100644
--- a/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
@@ -58,8 +58,8 @@ export const normalizeLendPositions = (
 
 export const normalizeBorrowPositions = (
   userReservesSummary: AaveUserReservesSummary,
-): BorrowPosition[] => {
-  return userReservesSummary.reserves.reduce((acc, r) => {
+): BorrowPosition[] =>
+  userReservesSummary.reserves.reduce((acc, r) => {
     if (r.borrowed.gt(0)) {
       acc.push({
         asset: r.reserve.symbol,
@@ -79,7 +79,6 @@ export const normalizeBorrowPositions = (
     }
     return acc;
   }, [] as BorrowPosition[]);
-};
 
 export const normalizeBorrowPoolDetails = (
   reserves: Reserve[],
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
index 12c02ccd4..fe2ba58ca 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
@@ -39,7 +39,7 @@ export const BorrowForm: FC<BorrowFormProps> = ({ asset, onComplete }) => {
   const { summary } = useAaveUserReservesData();
   const [borrowAsset, setBorrowAsset] = useState<string>(asset);
   const [borrowAmount, setBorrowAmount, borrowSize] = useDecimalAmountInput('');
-  const [acknowledge, setAcknowledge] = useState<boolean>(false);
+  const [acknowledge, setAcknowledge] = useState(false);
   const { handleBorrow } = useAaveBorrow();
 
   const borrowableAssetsOptions = useMemo(
@@ -63,54 +63,64 @@ export const BorrowForm: FC<BorrowFormProps> = ({ asset, onComplete }) => {
     [summary.reserves],
   );
 
-  const borrowReserve = useMemo(() => {
-    return summary.reserves.find(r => r.reserve.symbol === borrowAsset);
-  }, [summary.reserves, borrowAsset]);
+  const borrowReserve = useMemo(
+    () => summary.reserves.find(r => r.reserve.symbol === borrowAsset),
+    [summary.reserves, borrowAsset],
+  );
 
-  const borrowUsdAmount = useMemo(() => {
-    return borrowSize.mul(borrowReserve?.reserve.priceInUSD ?? 0);
-  }, [borrowSize, borrowReserve?.reserve.priceInUSD]);
+  const borrowUsdAmount = useMemo(
+    () => borrowSize.mul(borrowReserve?.reserve.priceInUSD ?? 0),
+    [borrowSize, borrowReserve?.reserve.priceInUSD],
+  );
 
-  const maximumBorrowAmount = useMemo(() => {
-    return borrowReserve?.availableToBorrow ?? Decimal.from(0);
-  }, [borrowReserve?.availableToBorrow]);
+  const maximumBorrowAmount = useMemo(
+    () => borrowReserve?.availableToBorrow ?? Decimal.from(0),
+    [borrowReserve?.availableToBorrow],
+  );
 
-  const newCollateralRatio = useMemo(() => {
-    return AaveCalculations.computeCollateralRatio(
-      summary.collateralBalance,
-      summary.borrowBalance.add(borrowUsdAmount),
-    );
-  }, [summary.collateralBalance, summary.borrowBalance, borrowUsdAmount]);
+  const newCollateralRatio = useMemo(
+    () =>
+      AaveCalculations.computeCollateralRatio(
+        summary.collateralBalance,
+        summary.borrowBalance.add(borrowUsdAmount),
+      ),
+    [summary.collateralBalance, summary.borrowBalance, borrowUsdAmount],
+  );
 
-  const liquidationPrice = useMemo(() => {
-    return AaveCalculations.computeLiquidationPrice(
+  const liquidationPrice = useMemo(
+    () =>
+      AaveCalculations.computeLiquidationPrice(
+        borrowSize,
+        summary.currentLiquidationThreshold,
+        summary.collateralBalance,
+      ),
+    [
       borrowSize,
       summary.currentLiquidationThreshold,
       summary.collateralBalance,
-    );
-  }, [
-    borrowSize,
-    summary.currentLiquidationThreshold,
-    summary.collateralBalance,
-  ]);
+    ],
+  );
 
-  const borrowApr = useMemo(() => {
-    return Decimal.from(borrowReserve?.reserve.variableBorrowAPR ?? 0).mul(100);
-  }, [borrowReserve?.reserve.variableBorrowAPR]);
+  const borrowApr = useMemo(
+    () => Decimal.from(borrowReserve?.reserve.variableBorrowAPR ?? 0).mul(100),
+    [borrowReserve?.reserve.variableBorrowAPR],
+  );
 
   const isValidBorrowAmount = useMemo(
     () => (borrowSize.gt(0) ? borrowSize.lte(maximumBorrowAmount) : true),
     [borrowSize, maximumBorrowAmount],
   );
 
-  const onConfirm = useCallback(() => {
-    handleBorrow(
-      borrowSize,
-      borrowReserve!.reserve.symbol,
-      BorrowRateMode.VARIABLE,
-      { onComplete },
-    );
-  }, [onComplete, borrowSize, borrowReserve, handleBorrow]);
+  const onConfirm = useCallback(
+    () =>
+      handleBorrow(
+        borrowSize,
+        borrowReserve!.reserve.symbol,
+        BorrowRateMode.VARIABLE,
+        { onComplete },
+      ),
+    [onComplete, borrowSize, borrowReserve, handleBorrow],
+  );
 
   return (
     <form className="flex flex-col gap-6">
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
index 04204d48c..50775187f 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
@@ -52,9 +52,7 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = ({
   });
   const [repayAssetDialog, setRepayAssetDialog] = useState<string>();
 
-  const onRepayClose = useCallback(() => {
-    setRepayAssetDialog(undefined);
-  }, []);
+  const onBorrowClose = useCallback(() => setBorrowAssetDialog(undefined), []);
 
   const rowTitleRenderer = useCallback(
     (r: BorrowPosition) => (
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx
index fb4fc18d0..1ca79883c 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx
@@ -38,21 +38,16 @@ export const EfficiencyModeCard: FC<EfficiencyModeCardProps> = ({
   const [disableEModeOpen, setDisableEModeOpen] = useState(false);
   const [switchEModeOpen, setSwitchEModeOpen] = useState(false);
 
-  const onEnableEModeClose = useCallback(() => {
-    setEnableEModeOpen(false);
-  }, []);
+  const onEnableEModeClose = useCallback(() => setEnableEModeOpen(false), []);
 
-  const onDisableEModeClose = useCallback(() => {
-    setDisableEModeOpen(false);
-  }, []);
+const onDisableEModeClose = useCallback(() => setDisableEModeOpen(false), []);
 
-  const onSwitchEModeClose = useCallback(() => {
-    setSwitchEModeOpen(false);
-  }, []);
+const onSwitchEModeClose = useCallback(() => setSwitchEModeOpen(false), []);
 
-  const currentCategory = useMemo(() => {
-    return eModeCategories.find(c => c.id === eModeCategoryId);
-  }, [eModeCategories, eModeCategoryId]);
+  const currentCategory = useMemo(
+    () => eModeCategories.find(c => c.id === eModeCategoryId),
+    [eModeCategories, eModeCategoryId],
+  );
 
   return (
     <>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx
index d98b970ba..a2859efdc 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx
@@ -38,23 +38,26 @@ export const DisableEModeForm: FC<DisableEModeFormProps> = ({
   const { userReservesData, reservesData, timestamp } =
     useAaveUserReservesData();
 
-  const onConfirm = useCallback(() => {
-    handleDisableUserEMode({ onComplete });
-  }, [handleDisableUserEMode, onComplete]);
+  const onConfirm = useCallback(
+    () => handleDisableUserEMode({ onComplete }),
+    [handleDisableUserEMode, onComplete],
+  );
 
-  const summaryAfterDisabled = useMemo(() => {
-    return normalizeEModeSummary(
-      EMODE_DISABLED_ID,
-      reservesData,
-      userReservesData,
-      timestamp,
-    );
-  }, [userReservesData, reservesData, timestamp]);
+  const summaryAfterDisabled = useMemo(
+    () =>
+      normalizeEModeSummary(
+        EMODE_DISABLED_ID,
+        reservesData,
+        userReservesData,
+        timestamp,
+      ),
+    [userReservesData, reservesData, timestamp],
+  );
 
-  const confirmEnabled = useMemo(() => {
-    // cannot disable if undercollateralized
-    return !summaryAfterDisabled.liquidationRisk;
-  }, [summaryAfterDisabled.liquidationRisk]);
+  const isConfirmEnabled = useMemo(
+    () => !summaryAfterDisabled.liquidationRisk,
+    [summaryAfterDisabled.liquidationRisk],
+  );```
 
   return (
     <div className="space-y-6">
@@ -127,7 +130,7 @@ export const DisableEModeForm: FC<DisableEModeFormProps> = ({
 
       <Button
         className="w-full"
-        disabled={!confirmEnabled}
+        disabled={!isConfirmEnabled}
         text={t(translations.aavePage.eMode.disableEMode)}
         onClick={onConfirm}
       />
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/EnableEModeForm/EnableEModeForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/EnableEModeForm/EnableEModeForm.tsx
index 11809741e..9ab52b45b 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/EnableEModeForm/EnableEModeForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/EnableEModeForm/EnableEModeForm.tsx
@@ -31,25 +31,32 @@ export const EnableEModeForm: FC<EnableEModeFormProps> = ({
   const { summary } = useAaveUserReservesData();
   const { handleSetUserEMode } = useAaveSetUserEMode();
 
-  const categoriesOptions = useMemo(() => {
-    return categories.map(category => ({
-      label: category.label,
-      value: String(category?.id),
-    }));
-  }, [categories]);
+  const categoriesOptions = useMemo(
+    () =>
+      categories.map(category => ({
+        label: category.label,
+        value: String(category?.id),
+      })),
+    [categories],
+  );
 
-  const selectedCategory = useMemo(() => {
-    return categories.find(c => c?.id === Number(category));
-  }, [category, categories]);
+  const selectedCategory = useMemo(
+    () => categories.find(c => c?.id === Number(category)),
+    [category, categories],
+  );
 
-  const positionsInOtherCategories = useMemo(() => {
-    return summary.reserves.some(
-      r => r.reserve.eModeCategoryId !== Number(category) && r.borrowed.gt(0),
-    );
-  }, [summary, category]);
+  const positionsInOtherCategories = useMemo(
+    () =>
+      summary.reserves.some(
+        r => r.reserve.eModeCategoryId !== Number(category) && r.borrowed.gt(0),
+      ),
+    [summary, category],
+  );
 
   const onConfirmClick = useCallback(() => {
-    if (!selectedCategory) return;
+    if (!selectedCategory) {
+      return;
+    }
     handleSetUserEMode(selectedCategory, { onComplete });
   }, [handleSetUserEMode, selectedCategory, onComplete]);
 
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx
index d46856581..0b32e0b67 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/SwitchEModeForm/SwitchEModeForm.tsx
@@ -37,57 +37,64 @@ export const SwitchEModeForm: FC<SwitchEModeFormProps> = ({
   onComplete,
 }) => {
   const { handleSetUserEMode } = useAaveSetUserEMode();
-  const [category, setCategory] = useState<string>('');
+  const [category, setCategory] = useState('');
   const { summary, userReservesData, reservesData, timestamp } =
     useAaveUserReservesData();
 
-  const categoriesOptions = useMemo(() => {
-    return categories.reduce((acc, category) => {
-      if (category.id === current?.id) {
-        return acc; // skip current category
-      }
-
-      return [
-        ...acc,
-        {
-          label: category.label,
-          value: String(category.id),
-        },
-      ];
-    }, [] as SelectOption[]);
-  }, [categories, current?.id]);
-
-  const selectedCategory = useMemo(() => {
-    return categories.find(c => c.id === Number(category));
-  }, [category, categories]);
-
-  const summaryAfterSwitch = useMemo(() => {
-    return normalizeEModeSummary(
-      selectedCategory?.id ?? 0,
-      reservesData,
-      userReservesData,
-      timestamp,
-    );
-  }, [userReservesData, reservesData, timestamp, selectedCategory?.id]);
-
-  const positionsInOtherCategories = useMemo(() => {
-    return summary.reserves.some(
-      r => r.reserve.eModeCategoryId !== Number(category) && r.borrowed.gt(0),
-    );
-  }, [summary, category]);
-
-  const confirmEnabled = useMemo(() => {
-    // cannot switch if undercollateralized or have positions in other categories
-    return (
+  const categoriesOptions = useMemo(
+    () =>
+      categories.reduce((acc, category) => {
+        if (category.id === current?.id) {
+          return acc; // skip current category
+        }
+
+        return [
+          ...acc,
+          {
+            label: category.label,
+            value: String(category.id),
+          },
+        ];
+      }, [] as SelectOption[]),
+    [categories, current?.id],
+  );
+
+  const selectedCategory = useMemo(
+    () => categories.find(c => c.id === Number(category)),
+    [category, categories],
+  );
+
+  const summaryAfterSwitch = useMemo(
+    () =>
+      normalizeEModeSummary(
+        selectedCategory?.id ?? 0,
+        reservesData,
+        userReservesData,
+        timestamp,
+      ),
+    [userReservesData, reservesData, timestamp, selectedCategory?.id],
+  );
+
+  const positionsInOtherCategories = useMemo(
+    () =>
+      summary.reserves.some(
+        r => r.reserve.eModeCategoryId !== Number(category) && r.borrowed.gt(0),
+      ),
+    [summary, category],
+  );
+
+  const isConfirmEnabled = useMemo(
+    () =>
       !summaryAfterSwitch.liquidationRisk &&
       !positionsInOtherCategories &&
-      selectedCategory
-    );
-  }, [summaryAfterSwitch, positionsInOtherCategories, selectedCategory]);
+      selectedCategory,
+    [summaryAfterSwitch, positionsInOtherCategories, selectedCategory],
+  );
 
-  const onConfirm = useCallback(() => {
-    handleSetUserEMode(selectedCategory!, { onComplete });
-  }, [handleSetUserEMode, selectedCategory, onComplete]);
+  const onConfirm = useCallback(
+    () => handleSetUserEMode(selectedCategory!, { onComplete }),
+    [handleSetUserEMode, selectedCategory, onComplete],
+  );
 
   return (
     <div className="space-y-6">
@@ -160,7 +167,7 @@ export const SwitchEModeForm: FC<SwitchEModeFormProps> = ({
 
       <Button
         className="w-full"
-        disabled={!confirmEnabled}
+        disabled={!isConfirmEnabled}
         text={t(translations.aavePage.eMode.switchCategory)}
         onClick={onConfirm}
       />
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx
index a97d535c7..ce1b10584 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx
@@ -65,21 +65,25 @@ export const RepayWithWalletBalanceForm: FC<
     [summary],
   );
 
-  const repayReserve = useMemo(() => {
-    return summary.reserves.find(r => r.reserve.symbol === repayAsset);
-  }, [summary.reserves, repayAsset]);
-
-  const maximumRepayAmount = useMemo(() => {
-    return repayReserve
-      ? repayReserve.borrowed.gt(repayAssetBalance)
-        ? repayAssetBalance
-        : repayReserve.borrowed
-      : Decimal.from(0);
-  }, [repayReserve, repayAssetBalance]);
+  const repayReserve = useMemo(
+    () => summary.reserves.find(r => r.reserve.symbol === repayAsset),
+    [summary.reserves, repayAsset],
+  );
+
+  const maximumRepayAmount = useMemo(
+    () =>
+      repayReserve
+        ? repayReserve.borrowed.gt(repayAssetBalance)
+          ? repayAssetBalance
+          : repayReserve.borrowed
+        : Decimal.from(0),
+    [repayReserve, repayAssetBalance],
+  );
 
-  const repayUsdAmount = useMemo(() => {
-    return repaySize.mul(repayReserve?.reserve.priceInUSD ?? 0);
-  }, [repaySize, repayReserve]);
+  const repayUsdAmount = useMemo(
+    () => repaySize.mul(repayReserve?.reserve.priceInUSD ?? 0),
+    [repaySize, repayReserve],
+  );
 
   const newDebtAmount = useMemo(() => {
     const newDebt = repayReserve?.borrowed
@@ -90,38 +94,43 @@ export const RepayWithWalletBalanceForm: FC<
     return newDebt.gt(0) ? newDebt : Decimal.from(0);
   }, [repayReserve?.borrowed, repaySize]);
 
-  const newDebtAmountUSD = useMemo(() => {
-    return newDebtAmount.mul(repayReserve?.reserve.priceInUSD ?? 0);
-  }, [newDebtAmount, repayReserve]);
+  const newDebtAmountUsd = useMemo(
+    () => newDebtAmount.mul(repayReserve?.reserve.priceInUSD ?? 0),
+    [newDebtAmount, repayReserve],
+  );
 
-  const newCollateralRatio = useMemo(() => {
-    return AaveCalculations.computeCollateralRatio(
-      summary.collateralBalance,
-      summary.borrowBalance.sub(repayUsdAmount),
-    );
-  }, [summary, repayUsdAmount]);
+  const newCollateralRatio = useMemo(
+    () =>
+      AaveCalculations.computeCollateralRatio(
+        summary.collateralBalance,
+        summary.borrowBalance.sub(repayUsdAmount),
+      ),
+    [summary, repayUsdAmount],
+  );
 
   const isValidRepayAmount = useMemo(
     () => (repaySize.gt(0) ? repaySize.lte(maximumRepayAmount) : true),
     [repaySize, maximumRepayAmount],
   );
 
-  const onConfirm = useCallback(() => {
-    handleRepay(
+  const onConfirm = useCallback(
+    () =>
+      handleRepay(
+        repayAsset,
+        repaySize,
+        repaySize.eq(maximumRepayAmount),
+        repayReserve!.borrowRateMode,
+        { onComplete },
+      ),
+    [
+      handleRepay,
       repayAsset,
       repaySize,
-      repaySize.eq(maximumRepayAmount),
-      repayReserve!.borrowRateMode,
-      { onComplete },
-    );
-  }, [
-    handleRepay,
-    repayAsset,
-    repaySize,
-    onComplete,
-    repayReserve,
-    maximumRepayAmount,
-  ]);
+      onComplete,
+      repayReserve,
+      maximumRepayAmount,
+    ],
+  );
 
   return (
     <form className="flex flex-col gap-6 relative">
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
index 0a7c024df..defb938ca 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/LendAssetsList.tsx
@@ -40,9 +40,7 @@ export const LendAssetsList: FC<LendAssetsListProps> = ({
   });
   const [lendAssetDialog, setLendAssetDialog] = useState<string | undefined>();
 
-  const onLendClose = useCallback(() => {
-    setLendAssetDialog(undefined);
-  }, []);
+  const onLendClose = useCallback(() => setLendAssetDialog(undefined), []);
 
   const mobileRenderer = useCallback(
     p => (
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
index 2aa041384..9a289710d 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx
@@ -20,9 +20,10 @@ export const LendAssetAction: FC<LendAssetActionProps> = ({
 }) => {
   const navigate = useNavigate();
 
-  const onDetailsClick = useCallback(() => {
-    navigate(`/aave/reserve-overview?asset=${asset}`);
-  }, [navigate, asset]);
+  const onDetailsClick = useCallback(
+    () => navigate(`/aave/reserve-overview?asset=${asset}`),
+    [navigate, asset],
+  );
 
   return (
     <div className="flex items-center justify-center lg:justify-end space-x-2">
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendForm/LendForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendForm/LendForm.tsx
index 5b1eb8544..761366f03 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendForm/LendForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendForm/LendForm.tsx
@@ -61,17 +61,20 @@ export const LendForm: FC<LendFormProps> = ({
     [reserves],
   );
 
-  const reserve = useMemo(() => {
-    return reserves.find(r => r.symbol === lendAsset) ?? reserves[0];
-  }, [reserves, lendAsset]);
+  const reserve = useMemo(
+    () => reserves.find(r => r.symbol === lendAsset) ?? reserves[0],
+    [reserves, lendAsset],
+  );
 
-  const assetUsdValue = useMemo(() => {
-    return Decimal.from(reserve?.priceInUSD ?? 0).mul(lendSize);
-  }, [reserve, lendSize]);
+ const assetUsdValue = useMemo(
+    () => Decimal.from(reserve?.priceInUSD ?? 0).mul(lendSize),
+    [reserve, lendSize],
+  );
 
-  const supplyApy = useMemo(() => {
-    return Decimal.from(reserve?.supplyAPY ?? 0).mul(100);
-  }, [reserve]);
+  const supplyApy = useMemo(
+    () => Decimal.from(reserve?.supplyAPY ?? 0).mul(100),
+    [reserve],
+  );
 
   const isValidLendAmount = useMemo(
     () => (lendSize.gt(0) ? lendSize.lte(lendAssetBalance) : true),
@@ -83,9 +86,10 @@ export const LendForm: FC<LendFormProps> = ({
     [lendSize, isValidLendAmount],
   );
 
-  const onConfirm = useCallback(() => {
-    handleDeposit(lendSize, reserve.symbol, { onComplete });
-  }, [handleDeposit, lendSize, reserve, onComplete]);
+  const onConfirm = useCallback(
+    () => handleDeposit(lendSize, reserve.symbol, { onComplete }),
+    [handleDeposit, lendSize, reserve, onComplete],
+  );
 
   return (
     <form className="flex flex-col gap-6">
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
index e4bd6704f..191f53bad 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.tsx
@@ -49,9 +49,10 @@ export const LendPositionsList: FC<LendPositionsListProps> = ({
     orderDirection: OrderDirection.Desc,
   });
 
-  const onWithdrawClose = useCallback(() => {
-    setWithdrawAssetDialog(undefined);
-  }, []);
+  const onWithdrawClose = useCallback(
+    () => setWithdrawAssetDialog(undefined),
+    [],
+  );
 
   const mobileRenderer = useCallback(
     p => (
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx
index 4dd25f2d6..42fe90717 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx
@@ -15,11 +15,13 @@ export const ToggleCollateralAction: FC<ToggleCollateralActionProps> = ({
   const { handleSwitchCollateral } = useAaveSupply();
   const [isCollateral, setIsCollateral] = useState(position.collateral);
 
-  const toggleCollateral = useCallback(() => {
-    handleSwitchCollateral(position.asset, !isCollateral, {
-      onComplete: () => setIsCollateral(!isCollateral),
-    });
-  }, [handleSwitchCollateral, setIsCollateral, isCollateral, position.asset]);
+ const toggleCollateral = useCallback(
+    () =>
+      handleSwitchCollateral(position.asset, !isCollateral, {
+        onComplete: () => setIsCollateral(!isCollateral),
+      }),
+    [handleSwitchCollateral, setIsCollateral, isCollateral, position.asset],
+  );
 
   return (
     <Toggle
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx
index 6448114ee..e8d74f6b1 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx
@@ -65,9 +65,10 @@ export const WithdrawForm: FC<WithdrawFormProps> = ({ asset, onComplete }) => {
     [summary],
   );
 
-  const withdrawReserve = useMemo(() => {
-    return summary.reserves.find(r => r.reserve.symbol === withdrawAsset);
-  }, [withdrawAsset, summary]);
+  const withdrawReserve = useMemo(
+    () => summary.reserves.find(r => r.reserve.symbol === withdrawAsset),
+    [withdrawAsset, summary],
+  );
 
   const maximumWithdrawAmount = useMemo(() => {
     if (!withdrawReserve) {
@@ -85,9 +86,10 @@ export const WithdrawForm: FC<WithdrawFormProps> = ({ asset, onComplete }) => {
       : maxUSDWithdrawal.div(withdrawReserve.reserve.priceInUSD); // only partial withdraw
   }, [withdrawReserve, summary.supplyBalance]);
 
-  const withdrawAmountUsd = useMemo(() => {
-    return withdrawSize.mul(withdrawReserve?.reserve.priceInUSD ?? 0);
-  }, [withdrawSize, withdrawReserve]);
+  const withdrawAmountUsd = useMemo(
+    () => withdrawSize.mul(withdrawReserve?.reserve.priceInUSD ?? 0),
+    [withdrawSize, withdrawReserve],
+  );
 
   const remainingSupply = useMemo(
     () => withdrawReserve?.supplied.sub(withdrawSize) ?? Decimal.from(0),
@@ -104,20 +106,22 @@ export const WithdrawForm: FC<WithdrawFormProps> = ({ asset, onComplete }) => {
     [isValidWithdrawAmount, withdrawSize],
   );
 
-  const onConfirm = useCallback(() => {
-    handleWithdraw(
+  const onConfirm = useCallback(
+    () =>
+      handleWithdraw(
+        withdrawSize,
+        withdrawAsset,
+        withdrawSize.eq(maximumWithdrawAmount),
+        { onComplete },
+      ),
+    [
+      handleWithdraw,
       withdrawSize,
       withdrawAsset,
-      withdrawSize.eq(maximumWithdrawAmount),
-      { onComplete },
-    );
-  }, [
-    handleWithdraw,
-    withdrawSize,
-    withdrawAsset,
-    onComplete,
-    maximumWithdrawAmount,
-  ]);
+      onComplete,
+      maximumWithdrawAmount,
+    ],
+  );
 
   return (
     <form className="flex flex-col gap-6">
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
index f0a91a72c..68857ca5c 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
@@ -10,6 +10,7 @@ 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 { BorrowDetailsGraph } from './components/BorrowDetailsGraph/BorrowDetailsGraph';
 import { EModeDetails } from './components/EModeDetails/EModeDetails';
 import { InterestRateModelGraph } from './components/InterestRateModelGraph/InterestRateModelGraph';
@@ -26,7 +27,7 @@ enum OverviewTab {
 
 const AaveReserveOverviewPage: FC = () => {
   const [searchParams] = useSearchParams();
-  const symbol = searchParams.get('asset') || 'ETH';
+  const symbol = searchParams.get('asset') || COMMON_SYMBOLS.ETH;
   const { reserves } = useAaveReservesData();
   const [activeOverviewTab, setActiveOverviewTab] = useState<OverviewTab>(
     OverviewTab.RESERVE,
@@ -37,7 +38,9 @@ const AaveReserveOverviewPage: FC = () => {
     [reserves, symbol],
   );
 
-  if (!reserve) return null;
+  if (!reserve) {
+    return null;
+  }
   return (
     <div className="w-full pb-6 2xl:px-12">
       <Helmet>
@@ -55,7 +58,7 @@ const AaveReserveOverviewPage: FC = () => {
           className="w-full bg-gray-80 rounded p-1 border border-gray-60 lg:hidden"
           index={activeOverviewTab}
           items={TAB_ITEMS}
-          onChange={e => setActiveOverviewTab(e)}
+          onChange={setActiveOverviewTab}
           size={TabSize.normal}
           type={TabType.secondary}
         />
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
index 16c1bd5f8..64a53d741 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
@@ -26,9 +26,7 @@ export const BorrowDetailsGraph: FC<BorrowDetailsGraphProps> = ({
   const { isMobile } = useIsMobile();
   const [open, setOpen] = useState(true);
 
-  const borrowStats = useMemo(() => {
-    return normalizeBorrowStats(reserve);
-  }, [reserve]);
+  const borrowStats = useMemo(() => normalizeBorrowStats(reserve), [reserve]);
 
   return (
     <Accordion
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx
index b9e16f9f4..1c1c8704b 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx
@@ -22,11 +22,11 @@ export const EModeDetails: FC<EModeDetailsProps> = ({ reserve }) => {
   const [open, setOpen] = useState(true);
   const { isMobile } = useIsMobile();
 
-  const eModeStats = useMemo(() => {
-    return normalizeEModeStats(reserve);
-  }, [reserve]);
+  const eModeStats = useMemo(() => normalizeEModeStats(reserve), [reserve]);
 
-  if (!eModeStats.enabled) return null;
+  if (!eModeStats.enabled) {
+    return null;
+  }
   return (
     <Accordion
       label={
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
index f74cd192d..9bd05ed4d 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
@@ -28,19 +28,23 @@ export const InterestRateModelGraph: FC<InterestRateModelGraphProps> = ({
   const { isMobile } = useIsMobile();
   const [open, setOpen] = useState(true);
 
-  const interestRateStrategyUrl = useMemo(() => {
-    return `${getBobExplorerUrl()}/address/${
-      AAVE_CONTRACT_ADDRESSES.INTEREST_RATE_STRATEGY
-    }`;
-  }, []);
+  const interestRateStrategyUrl = useMemo(
+    () =>
+      `${getBobExplorerUrl()}/address/${
+        AAVE_CONTRACT_ADDRESSES.INTEREST_RATE_STRATEGY
+      }`,
+    [],
+  );
 
-  const collectorContractUrl = useMemo(() => {
-    return `${getBobExplorerUrl()}/address/${AAVE_CONTRACT_ADDRESSES.TREASURY}`;
-  }, []);
+  const collectorContractUrl = useMemo(
+    () => `${getBobExplorerUrl()}/address/${AAVE_CONTRACT_ADDRESSES.TREASURY}`,
+    [],
+  );
 
-  const currentUsageRatio = useMemo(() => {
-    return Decimal.from(reserve.borrowUsageRatio).mul(100);
-  }, [reserve.borrowUsageRatio]);
+  const currentUsageRatio = useMemo(
+    () => Decimal.from(reserve.borrowUsageRatio).mul(100),
+    [reserve.borrowUsageRatio],
+  );
 
   return (
     <Accordion
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
index 8e4cb6d53..8ef847dc6 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
@@ -38,31 +38,37 @@ export const Chart: FC<ChartProps> = ({ meta, rates }) => {
     [rates],
   );
 
-  const optimalPercentage = useMemo(() => {
-    return rates.optimalUsageRatio
-      ? parseFloat((parseFloat(rates.optimalUsageRatio) * 100).toFixed(2))
-      : 0;
-  }, [rates.optimalUsageRatio]);
-
-  const currentPercentage = useMemo(() => {
-    return rates.currentUsageRatio
-      ? parseFloat((parseFloat(rates.currentUsageRatio) * 100).toFixed(2))
-      : 0;
-  }, [rates.currentUsageRatio]);
-
-  const optimalValue = useMemo(() => {
-    return [
+  const optimalPercentage = useMemo(
+    () =>
+      rates.optimalUsageRatio
+        ? parseFloat((parseFloat(rates.optimalUsageRatio) * 100).toFixed(2))
+        : 0,
+    [rates.optimalUsageRatio],
+  );
+
+  const currentPercentage = useMemo(
+    () =>
+      rates.currentUsageRatio
+        ? parseFloat((parseFloat(rates.currentUsageRatio) * 100).toFixed(2))
+        : 0,
+    [rates.currentUsageRatio],
+  );
+
+  const optimalValue = useMemo(
+    () => [
       { x: optimalPercentage, y: 0 },
       { x: optimalPercentage, y: 75 },
-    ];
-  }, [optimalPercentage]);
+    ],
+    [optimalPercentage],
+  );
 
-  const currentValue = useMemo(() => {
-    return [
+  const currentValue = useMemo(
+    () => [
       { x: currentPercentage, y: 0 },
       { x: currentPercentage, y: 75 },
-    ];
-  }, [currentPercentage]);
+    ],
+    [currentPercentage],
+  );
 
   useEffect(() => {
     if (chartRef.current) {
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.utils.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.utils.ts
index 28f4bf540..db454110f 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.utils.ts
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.utils.ts
@@ -105,13 +105,19 @@ export const calculateInterestRateModel = (
 };
 
 export const calculateVariableInterestRateModel = (
-  u: number,
+  utilization: number,
   rates: RatesData,
-) => {
-  const base = parseFloat(rates.baseVariableBorrowRate);
-  const optimal = parseFloat(rates.optimalUsageRatio);
-  const slope1 = parseFloat(rates.variableRateSlope1);
-  const slope2 = parseFloat(rates.variableRateSlope2);
-
-  return calculateInterestRateModel(u, base, optimal, slope1, slope2);
+): number => {
+  const baseRate = parseFloat(rates.baseVariableBorrowRate);
+  const optimalUtilization = parseFloat(rates.optimalUsageRatio);
+  const initialSlope = parseFloat(rates.variableRateSlope1);
+  const secondarySlope = parseFloat(rates.variableRateSlope2);
+
+  return calculateInterestRateModel(
+    utilization,
+    baseRate,
+    optimalUtilization,
+    initialSlope,
+    secondarySlope,
+  );
 };
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
index 2693d8687..589825f24 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
@@ -27,9 +27,7 @@ export const SupplyDetailsGraph: FC<SupplyDetailsGraphProps> = ({
   const [open, setOpen] = useState(true);
   const { isMobile } = useIsMobile();
 
-  const supplyStats = useMemo(() => {
-    return normalizeSupplyStats(reserve);
-  }, [reserve]);
+  const supplyStats = useMemo(() => normalizeSupplyStats(reserve), [reserve]);
 
   return (
     <Accordion
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
index 9f0e48463..ec9251a34 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TopPanel/TopPanel.tsx
@@ -57,15 +57,15 @@ export const TopPanel: FC<TopPanelProps> = ({ reserve, className }) => {
     window.open(`${explorer}/address/${tokenAddress}`, '_blank');
   }, []);
 
-  const oracleLink = useMemo(() => {
-    return getBobExplorerUrl() + '/address/' + reserve.priceOracle;
-  }, [reserve.priceOracle]);
-
-  const reserveSize = useMemo(() => {
-    return Decimal.from(reserve.availableLiquidityUSD).add(
-      reserve.totalDebtUSD,
-    );
-  }, [reserve]);
+  const oracleLink = useMemo(
+    () => getBobExplorerUrl() + '/address/' + reserve.priceOracle,
+    [reserve.priceOracle],
+  );
+
+  const reserveSize = useMemo(
+    () => Decimal.from(reserve.availableLiquidityUSD).add(reserve.totalDebtUSD),
+    [reserve],
+  );
 
   return (
     <div className={classNames('w-full flex flex-col gap-6', className)}>
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/WalletOverview.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/WalletOverview.tsx
index cc36fcced..09fe2563d 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/WalletOverview.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/WalletOverview.tsx
@@ -36,13 +36,15 @@ export const WalletOverview: FC<WalletOverviewProps> = ({ symbol }) => {
     getAssetData(symbol, BOB_CHAIN_ID).then(setAsset);
   }, [symbol]);
 
-  const reserveSummary = useMemo(() => {
-    return summary.reserves.find(r => r.reserve.symbol === symbol);
-  }, [summary, symbol]);
+  const reserveSummary = useMemo(
+    () => summary.reserves.find(r => r.reserve.symbol === symbol),
+    [summary, symbol],
+  );
 
-  const supplyCapReached = useMemo(() => {
-    return Decimal.from(reserveSummary?.reserve.supplyUsageRatio ?? 0).gte(1);
-  }, [reserveSummary?.reserve.supplyUsageRatio]);
+  const supplyCapReached = useMemo(
+    () => Decimal.from(reserveSummary?.reserve.supplyUsageRatio ?? 0).gte(1),
+    [reserveSummary?.reserve.supplyUsageRatio],
+  );
 
   return (
     <div className="bg-gray-90 p-6 rounded space-y-6 lg:bg-gray-90 lg:p-6 border border-gray-60">
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx
index 32d3c7bfb..52cfaca5a 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx
@@ -32,13 +32,9 @@ export const BorrowAction: FC<BorrowActionProps> = ({
 }) => {
   const [open, setOpen] = useState(false);
 
-  const onBorrowClose = useCallback(() => {
-    setOpen(false);
-  }, []);
+  const onBorrowClose = useCallback(() => setOpen(false), []);
 
-  const onBorrowOpen = useCallback(() => {
-    setOpen(true);
-  }, []);
+  const onBorrowOpen = useCallback(() => setOpen(true), []);
 
   const isBorrowDisabled = useMemo(() => {
     return availableToBorrow.lte(0);
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx
index ba9809f55..835337cd8 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx
@@ -32,13 +32,9 @@ export const SupplyAction: FC<SupplyActionProps> = ({
 }) => {
   const [open, setOpen] = useState(false);
 
-  const onSupplyClose = useCallback(() => {
-    setOpen(false);
-  }, []);
+  const onSupplyClose = useCallback(() => setOpen(false), []);
 
-  const onSupplyOpen = useCallback(() => {
-    setOpen(true);
-  }, []);
+  const onSupplyOpen = useCallback(() => setOpen(true), []);
 
   return (
     <div className="flex justify-between items-center">

From 09357731b8443a9e3cd716c523f4530d383abe36 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Wed, 11 Sep 2024 16:48:00 +0400
Subject: [PATCH 108/116] rename USD to Usd

---
 .../AssetAmountPriceRenderer.tsx              |  6 ++---
 .../app/5_pages/AavePage/AavePage.utils.tsx   |  8 +++----
 .../BorrowAssetsList.constants.tsx            |  6 ++---
 .../BorrowAssetsList.types.tsx                |  2 +-
 .../BorrowAssetDetails/BorrowAssetDetails.tsx |  4 ++--
 .../BorrowPositionsList.tsx                   |  2 +-
 .../BorrowPositionsList.types.tsx             |  2 +-
 .../BorrowPositionDetails.tsx                 |  2 +-
 .../EfficiencyModeCard/EfficiencyModeCard.tsx |  4 ++--
 .../DisableEModeForm/DisableEModeForm.tsx     |  2 +-
 .../RepayForm/RepayWithWalletBalanceForm.tsx  |  4 ++--
 .../components/LendForm/LendForm.tsx          |  2 +-
 .../LendPositionsList.constants.tsx           |  4 ++--
 .../LendPositionsList.types.tsx               |  2 +-
 .../LendPositionDetails.tsx                   |  2 +-
 .../ToggleCollateralAction.tsx                |  2 +-
 .../components/WithdrawForm/WithdrawForm.tsx  | 10 ++++----
 .../BorrowDetailsGraph/BorrowDetailsGraph.tsx |  4 ++--
 .../BorrowDetailsGraph.utils.ts               |  4 ++--
 .../SupplyDetailsGraph/SupplyDetailsGraph.tsx |  4 ++--
 .../SupplyDetailsGraph.utils.tsx              |  4 ++--
 .../WalletOverview/WalletOverview.tsx         |  4 ++--
 .../components/BorrowAction/BorrowAction.tsx  |  2 +-
 .../components/SupplyAction/SupplyAction.tsx  |  6 ++---
 .../src/utils/aave/AaveCalculations.ts        | 24 +++++++++----------
 .../src/utils/aave/AaveUserReservesSummary.ts | 20 ++++++++--------
 26 files changed, 68 insertions(+), 68 deletions(-)

diff --git a/apps/frontend/src/app/2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx b/apps/frontend/src/app/2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx
index e28e4ca3d..602e592cd 100644
--- a/apps/frontend/src/app/2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx
+++ b/apps/frontend/src/app/2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx
@@ -9,7 +9,7 @@ import { AmountRenderer } from '../AmountRenderer/AmountRenderer';
 type AssetAmountPriceRendererProps = {
   asset: string;
   value: Decimalish;
-  valueUSD: Decimalish;
+  valueUsd: Decimalish;
   className?: string;
   valueClassName?: string;
   priceClassName?: string;
@@ -18,7 +18,7 @@ type AssetAmountPriceRendererProps = {
 export const AssetAmountPriceRenderer: FC<AssetAmountPriceRendererProps> = ({
   asset,
   value,
-  valueUSD,
+  valueUsd,
   className,
   valueClassName,
   priceClassName,
@@ -32,7 +32,7 @@ export const AssetAmountPriceRenderer: FC<AssetAmountPriceRendererProps> = ({
         precision={2}
       />
       <AmountRenderer
-        value={valueUSD}
+        value={valueUsd}
         prefix="$"
         precision={2}
         className={classNames(
diff --git a/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx b/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
index 72b268c5d..80d223d3c 100644
--- a/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/AavePage.utils.tsx
@@ -39,7 +39,7 @@ export const normalizeLendPositions = (
       const canToggleCollateral =
         !r.collateral ||
         AaveCalculations.computeCollateralRatio(
-          userReservesSummary.collateralBalance.sub(r.suppliedUSD),
+          userReservesSummary.collateralBalance.sub(r.suppliedUsd),
           userReservesSummary.borrowBalance,
         ).gt(MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE);
 
@@ -47,7 +47,7 @@ export const normalizeLendPositions = (
         asset: r.reserve.symbol,
         apy: Decimal.from(r.reserve.supplyAPY).mul(100),
         supplied: r.supplied,
-        suppliedUSD: r.suppliedUSD,
+        suppliedUsd: r.suppliedUsd,
         collateral: r.collateral,
         canToggleCollateral,
       });
@@ -73,7 +73,7 @@ export const normalizeBorrowPositions = (
         variableApy: Decimal.from(r.reserve.variableBorrowAPY).mul(100),
         stableBorrowEnabled: r.reserve.stableBorrowRateEnabled,
         borrowed: r.borrowed,
-        borrowedUSD: r.borrowedUSD,
+        borrowedUsd: r.borrowedUsd,
         isCollateral: r.collateral,
       });
     }
@@ -118,7 +118,7 @@ export const normalizeBorrowPoolDetails = (
       asset: r.symbol,
       apy: Decimal.from(r.variableBorrowAPY).mul(100),
       available: userSummary?.availableToBorrow,
-      availableUSD: userSummary?.availableToBorrowUSD,
+      availableUsd: userSummary?.availableToBorrowUsd,
     });
 
     return acc;
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
index 9d7061c2d..e46a7386e 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.constants.tsx
@@ -35,7 +35,7 @@ export const COLUMNS_CONFIG = (onBorrowClick: (asset: string) => void) => [
     ),
   },
   {
-    id: 'availableUSD',
+    id: 'availableUsd',
     sortable: true,
     align: Align.center,
     className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
@@ -49,10 +49,10 @@ export const COLUMNS_CONFIG = (onBorrowClick: (asset: string) => void) => [
     ),
     cellRenderer: (position: BorrowPoolDetails) =>
       position.available !== undefined &&
-      position.availableUSD !== undefined ? (
+      position.availableUsd !== undefined ? (
         <AssetAmountPriceRenderer
           value={position.available}
-          valueUSD={position.availableUSD}
+          valueUsd={position.availableUsd}
           asset={position.asset}
         />
       ) : (
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.types.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.types.tsx
index 79467e255..0c68fbb0a 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.types.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.types.tsx
@@ -4,5 +4,5 @@ export type BorrowPoolDetails = {
   asset: string;
   apy: Decimal;
   available?: Decimal;
-  availableUSD?: Decimal;
+  availableUsd?: Decimal;
 };
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
index 620e7deea..8712f02d3 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx
@@ -38,10 +38,10 @@ export const BorrowAssetDetails: FC<BorrowAssetDetailsProps> = ({
       <SimpleTableRow
         label={t(pageTranslations.borrowAssetsList.available)}
         value={
-          pool.available && pool.availableUSD ? (
+          pool.available && pool.availableUsd ? (
             <AssetAmountPriceRenderer
               value={pool.available}
-              valueUSD={pool.availableUSD}
+              valueUsd={pool.availableUsd}
               asset={pool.asset}
             />
           ) : (
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
index 50775187f..a1496f8bb 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx
@@ -52,7 +52,7 @@ export const BorrowPositionsList: FC<BorrowPositionsListProps> = ({
   });
   const [repayAssetDialog, setRepayAssetDialog] = useState<string>();
 
-  const onBorrowClose = useCallback(() => setBorrowAssetDialog(undefined), []);
+  const onRepayClose = useCallback(() => setRepayAssetDialog(undefined), []);
 
   const rowTitleRenderer = useCallback(
     (r: BorrowPosition) => (
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.types.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.types.tsx
index 5bd3dbd53..b3c137fbe 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.types.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.types.tsx
@@ -5,7 +5,7 @@ import { BorrowRateMode } from '../../../../../types/aave';
 export type BorrowPosition = {
   asset: string;
   borrowed: Decimal;
-  borrowedUSD: Decimal;
+  borrowedUsd: Decimal;
   apy: Decimal;
   variableApy: Decimal;
   stableApy: Decimal;
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
index e69276233..5673bee65 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/BorrowPositionDetails/BorrowPositionDetails.tsx
@@ -29,7 +29,7 @@ export const BorrowPositionDetails: FC<BorrowPositionDetailsProps> = ({
           <AssetAmountPriceRenderer
             asset={position.asset}
             value={position.borrowed}
-            valueUSD={position.borrowedUSD}
+            valueUsd={position.borrowedUsd}
           />
         }
       />
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx
index 1ca79883c..954b4bfcb 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx
@@ -40,9 +40,9 @@ export const EfficiencyModeCard: FC<EfficiencyModeCardProps> = ({
 
   const onEnableEModeClose = useCallback(() => setEnableEModeOpen(false), []);
 
-const onDisableEModeClose = useCallback(() => setDisableEModeOpen(false), []);
+  const onDisableEModeClose = useCallback(() => setDisableEModeOpen(false), []);
 
-const onSwitchEModeClose = useCallback(() => setSwitchEModeOpen(false), []);
+  const onSwitchEModeClose = useCallback(() => setSwitchEModeOpen(false), []);
 
   const currentCategory = useMemo(
     () => eModeCategories.find(c => c.id === eModeCategoryId),
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx
index a2859efdc..8c671296e 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/EfficiencyModeCard/components/DisableEModeForm/DisableEModeForm.tsx
@@ -57,7 +57,7 @@ export const DisableEModeForm: FC<DisableEModeFormProps> = ({
   const isConfirmEnabled = useMemo(
     () => !summaryAfterDisabled.liquidationRisk,
     [summaryAfterDisabled.liquidationRisk],
-  );```
+  );
 
   return (
     <div className="space-y-6">
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx
index ce1b10584..48b7bbc91 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/components/RepayForm/RepayWithWalletBalanceForm.tsx
@@ -180,12 +180,12 @@ export const RepayWithWalletBalanceForm: FC<
                 className="justify-end text-gray-40"
                 from={{
                   precision: 2,
-                  value: repayReserve?.borrowedUSD ?? Decimal.from(0),
+                  value: repayReserve?.borrowedUsd ?? Decimal.from(0),
                   prefix: '$',
                 }}
                 to={{
                   precision: 2,
-                  value: newDebtAmountUSD,
+                  value: newDebtAmountUsd,
                   prefix: '$',
                 }}
               />
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendForm/LendForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendForm/LendForm.tsx
index 761366f03..6b645028a 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendForm/LendForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendForm/LendForm.tsx
@@ -66,7 +66,7 @@ export const LendForm: FC<LendFormProps> = ({
     [reserves, lendAsset],
   );
 
- const assetUsdValue = useMemo(
+  const assetUsdValue = useMemo(
     () => Decimal.from(reserve?.priceInUSD ?? 0).mul(lendSize),
     [reserve, lendSize],
   );
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
index ba4967a3f..57ab60c78 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx
@@ -36,7 +36,7 @@ export const COLUMNS_CONFIG = (onWithdrawClick: (asset: string) => void) => [
     ),
   },
   {
-    id: 'suppliedUSD',
+    id: 'suppliedUsd',
     sortable: true,
     align: Align.center,
     className: '[&_*]:mx-auto [&_*]:space-x-2', // center head
@@ -46,7 +46,7 @@ export const COLUMNS_CONFIG = (onWithdrawClick: (asset: string) => void) => [
     cellRenderer: (position: LendPosition) => (
       <AssetAmountPriceRenderer
         value={position.supplied}
-        valueUSD={position.suppliedUSD}
+        valueUsd={position.suppliedUsd}
         asset={position.asset}
       />
     ),
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.types.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.types.tsx
index a5967160f..3e85e23be 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.types.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.types.tsx
@@ -3,7 +3,7 @@ import { Decimal } from '@sovryn/utils';
 export type LendPosition = {
   asset: string;
   supplied: Decimal;
-  suppliedUSD: Decimal;
+  suppliedUsd: Decimal;
   apy: Decimal;
   collateral: boolean;
   canToggleCollateral: boolean;
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
index 34a8b6a1f..a7f66cc86 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/LendPositionDetails/LendPositionDetails.tsx
@@ -28,7 +28,7 @@ export const LendPositionDetails: FC<LendPositionDetailsProps> = ({
         value={
           <AssetAmountPriceRenderer
             value={position.supplied}
-            valueUSD={position.suppliedUSD}
+            valueUsd={position.suppliedUsd}
             asset={position.asset}
           />
         }
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx
index 42fe90717..bd35bd5bf 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/ToggleCollateralAction/ToggleCollateralAction.tsx
@@ -15,7 +15,7 @@ export const ToggleCollateralAction: FC<ToggleCollateralActionProps> = ({
   const { handleSwitchCollateral } = useAaveSupply();
   const [isCollateral, setIsCollateral] = useState(position.collateral);
 
- const toggleCollateral = useCallback(
+  const toggleCollateral = useCallback(
     () =>
       handleSwitchCollateral(position.asset, !isCollateral, {
         onComplete: () => setIsCollateral(!isCollateral),
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx
index e8d74f6b1..9b956cd44 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/components/WithdrawForm/WithdrawForm.tsx
@@ -76,14 +76,14 @@ export const WithdrawForm: FC<WithdrawFormProps> = ({ asset, onComplete }) => {
     }
 
     // min collateral at which we reach minimum collateral ratio
-    const minCollateralUSD = MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE.mul(
-      withdrawReserve.borrowedUSD,
+    const minCollateralUsd = MINIMUM_COLLATERAL_RATIO_LENDING_POOLS_AAVE.mul(
+      withdrawReserve.borrowedUsd,
     );
-    const maxUSDWithdrawal = summary.supplyBalance.sub(minCollateralUSD);
+    const maxUsdWithdrawal = summary.supplyBalance.sub(minCollateralUsd);
 
-    return maxUSDWithdrawal.gt(withdrawReserve.suppliedUSD)
+    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
+      : maxUsdWithdrawal.div(withdrawReserve.reserve.priceInUSD); // only partial withdraw
   }, [withdrawReserve, summary.supplyBalance]);
 
   const withdrawAmountUsd = useMemo(
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
index 64a53d741..ae6ce89e1 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
@@ -68,7 +68,7 @@ export const BorrowDetailsGraph: FC<BorrowDetailsGraphProps> = ({
                   <AmountRenderer
                     prefix="$"
                     precision={2}
-                    {...formatAmountWithSuffix(borrowStats.totalBorrowedUSD)}
+                    {...formatAmountWithSuffix(borrowStats.totalBorrowedUsd)}
                   />
                   {borrowStats.borrowCap.gt(0) && (
                     <>
@@ -76,7 +76,7 @@ export const BorrowDetailsGraph: FC<BorrowDetailsGraphProps> = ({
                       <AmountRenderer
                         prefix="$"
                         precision={2}
-                        {...formatAmountWithSuffix(borrowStats.borrowCapUSD)}
+                        {...formatAmountWithSuffix(borrowStats.borrowCapUsd)}
                       />
                     </>
                   )}
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.utils.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.utils.ts
index e69b02b58..ed6f6ec93 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.utils.ts
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.utils.ts
@@ -7,9 +7,9 @@ import { getBobExplorerUrl } from '../../../../../utils/helpers';
 export const normalizeBorrowStats = (reserve: Reserve) => ({
   apr: Decimal.from(reserve.variableBorrowAPR).mul(100),
   totalBorrowed: Decimal.from(reserve.totalDebt),
-  totalBorrowedUSD: Decimal.from(reserve.totalDebtUSD),
+  totalBorrowedUsd: Decimal.from(reserve.totalDebtUSD),
   borrowCap: Decimal.from(reserve.borrowCap),
-  borrowCapUSD: Decimal.from(reserve.borrowCapUSD),
+  borrowCapUsd: Decimal.from(reserve.borrowCapUSD),
   borrowedPercentage: Decimal.from(reserve.totalDebtUSD)
     .div(Decimal.from(reserve.debtCeilingUSD))
     .mul(100),
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
index 589825f24..81e49fece 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
@@ -70,7 +70,7 @@ export const SupplyDetailsGraph: FC<SupplyDetailsGraphProps> = ({
                   <AmountRenderer
                     prefix="$"
                     precision={2}
-                    {...formatAmountWithSuffix(supplyStats.totalSuppliedUSD)}
+                    {...formatAmountWithSuffix(supplyStats.totalSuppliedUsd)}
                   />
                   {supplyStats.supplyCap.gt(0) && (
                     <>
@@ -78,7 +78,7 @@ export const SupplyDetailsGraph: FC<SupplyDetailsGraphProps> = ({
                       <AmountRenderer
                         prefix="$"
                         precision={2}
-                        {...formatAmountWithSuffix(supplyStats.supplyCapUSD)}
+                        {...formatAmountWithSuffix(supplyStats.supplyCapUsd)}
                       />
                     </>
                   )}
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.utils.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.utils.tsx
index 7430758d0..3aa6451db 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.utils.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.utils.tsx
@@ -6,12 +6,12 @@ export const normalizeSupplyStats = (reserve: Reserve) => ({
   totalSupplied: Decimal.from(reserve.formattedAvailableLiquidity).add(
     reserve.totalDebt,
   ),
-  totalSuppliedUSD: Decimal.from(reserve.availableLiquidityUSD).add(
+  totalSuppliedUsd: Decimal.from(reserve.availableLiquidityUSD).add(
     reserve.totalDebtUSD,
   ),
   supplyApy: Decimal.from(reserve.supplyAPY).mul(100),
   supplyCap: Decimal.from(reserve.supplyCap),
-  supplyCapUSD: Decimal.from(reserve.supplyCapUSD),
+  supplyCapUsd: Decimal.from(reserve.supplyCapUSD),
   suppliedPercentage: Decimal.from(reserve.supplyCapUSD)
     .div(Decimal.from(reserve.supplyCapUSD))
     .mul(100),
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/WalletOverview.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/WalletOverview.tsx
index 09fe2563d..29a665547 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/WalletOverview.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/WalletOverview.tsx
@@ -78,7 +78,7 @@ export const WalletOverview: FC<WalletOverviewProps> = ({ symbol }) => {
               availableToSupply={Decimal.from(
                 reserveSummary?.walletBalance ?? 0,
               )}
-              availableToSupplyUSD={Decimal.from(
+              availableToSupplyUsd={Decimal.from(
                 reserveSummary?.walletBalanceUsd ?? 0,
               )}
             />
@@ -90,7 +90,7 @@ export const WalletOverview: FC<WalletOverviewProps> = ({ symbol }) => {
                 reserveSummary?.availableToBorrow ?? 0,
               )}
               availableToBorrowUsd={Decimal.from(
-                reserveSummary?.availableToBorrowUSD ?? 0,
+                reserveSummary?.availableToBorrowUsd ?? 0,
               )}
             />
           </div>
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx
index 52cfaca5a..e36beb23b 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx
@@ -54,7 +54,7 @@ export const BorrowAction: FC<BorrowActionProps> = ({
         </Paragraph>
         <AssetAmountPriceRenderer
           value={availableToBorrow}
-          valueUSD={availableToBorrowUsd}
+          valueUsd={availableToBorrowUsd}
           asset={asset}
           className="text-left flex flex-col"
           valueClassName="font-medium"
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx
index 835337cd8..52f44cb45 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/SupplyAction/SupplyAction.tsx
@@ -22,13 +22,13 @@ const pageTranslations = translations.aaveReserveOverviewPage;
 type SupplyActionProps = {
   asset: string;
   availableToSupply: Decimal;
-  availableToSupplyUSD: Decimal;
+  availableToSupplyUsd: Decimal;
 };
 
 export const SupplyAction: FC<SupplyActionProps> = ({
   asset,
   availableToSupply,
-  availableToSupplyUSD,
+  availableToSupplyUsd,
 }) => {
   const [open, setOpen] = useState(false);
 
@@ -49,7 +49,7 @@ export const SupplyAction: FC<SupplyActionProps> = ({
         </div>
         <AssetAmountPriceRenderer
           value={availableToSupply}
-          valueUSD={availableToSupplyUSD}
+          valueUsd={availableToSupplyUsd}
           asset={asset}
           className="text-left flex flex-col"
           valueClassName="font-medium"
diff --git a/apps/frontend/src/utils/aave/AaveCalculations.ts b/apps/frontend/src/utils/aave/AaveCalculations.ts
index 088598c13..910b964b5 100644
--- a/apps/frontend/src/utils/aave/AaveCalculations.ts
+++ b/apps/frontend/src/utils/aave/AaveCalculations.ts
@@ -77,45 +77,45 @@ export class AaveCalculations {
   static computeWeightedBorrowApy(
     reserves: UserSummary['userReservesData'],
   ): Decimal {
-    let totalBorrowedUSD = Decimal.from(0);
+    let totalBorrowedUsd = Decimal.from(0);
     let weightedBorrowAPYSum = Decimal.from(0);
 
     reserves.forEach(reserve => {
-      const borrowedAmountUSD = Decimal.from(reserve.totalBorrowsUSD);
+      const borrowedAmountUsd = Decimal.from(reserve.totalBorrowsUSD);
       const borrowAPY = Decimal.from(reserve.reserve.variableBorrowAPY);
 
       weightedBorrowAPYSum = weightedBorrowAPYSum.add(
-        borrowAPY.mul(borrowedAmountUSD),
+        borrowAPY.mul(borrowedAmountUsd),
       );
-      totalBorrowedUSD = totalBorrowedUSD.add(borrowedAmountUSD);
+      totalBorrowedUsd = totalBorrowedUsd.add(borrowedAmountUsd);
     });
 
-    if (totalBorrowedUSD.eq(0) || weightedBorrowAPYSum.eq(0)) {
+    if (totalBorrowedUsd.eq(0) || weightedBorrowAPYSum.eq(0)) {
       return Decimal.from(0);
     }
-    return weightedBorrowAPYSum.div(totalBorrowedUSD).mul(100);
+    return weightedBorrowAPYSum.div(totalBorrowedUsd).mul(100);
   }
 
   static computeWeightedSupplyApy(
     reserves: UserSummary['userReservesData'],
   ): Decimal {
-    let totalSuppliedUSD = Decimal.from(0);
+    let totalSuppliedUsd = Decimal.from(0);
     let weightedSupplyAPYSum = Decimal.from(0);
 
     reserves.forEach(reserve => {
-      const suppliedAmountUSD = Decimal.from(reserve.underlyingBalanceUSD);
+      const suppliedAmountUsd = Decimal.from(reserve.underlyingBalanceUSD);
       const supplyAPY = Decimal.from(reserve.reserve.supplyAPY);
 
       weightedSupplyAPYSum = weightedSupplyAPYSum.add(
-        supplyAPY.mul(suppliedAmountUSD),
+        supplyAPY.mul(suppliedAmountUsd),
       );
-      totalSuppliedUSD = totalSuppliedUSD.add(suppliedAmountUSD);
+      totalSuppliedUsd = totalSuppliedUsd.add(suppliedAmountUsd);
     });
 
-    if (totalSuppliedUSD.eq(0) || weightedSupplyAPYSum.eq(0)) {
+    if (totalSuppliedUsd.eq(0) || weightedSupplyAPYSum.eq(0)) {
       return Decimal.from(0);
     }
-    return weightedSupplyAPYSum.div(totalSuppliedUSD).mul(100);
+    return weightedSupplyAPYSum.div(totalSuppliedUsd).mul(100);
   }
 
   static computeLiquidationPrice(
diff --git a/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts b/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
index 32fab812f..0ef6dfb34 100644
--- a/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
+++ b/apps/frontend/src/utils/aave/AaveUserReservesSummary.ts
@@ -35,12 +35,12 @@ export type ReserveSummary = {
   walletBalanceUsd: Decimal;
   collateral: boolean;
   supplied: Decimal;
-  suppliedUSD: Decimal;
+  suppliedUsd: Decimal;
   borrowed: Decimal;
-  borrowedUSD: Decimal;
+  borrowedUsd: Decimal;
   borrowRateMode: BorrowRateMode;
   availableToBorrow: Decimal;
-  availableToBorrowUSD: Decimal;
+  availableToBorrowUsd: Decimal;
 };
 
 export type AaveUserReservesSummary = {
@@ -93,13 +93,13 @@ export class AaveUserReservesSummaryFactory {
         walletBalanceUsd: Decimal.ZERO,
         collateral: false,
         supplied: Decimal.ZERO,
-        suppliedUSD: Decimal.ZERO,
+        suppliedUsd: Decimal.ZERO,
         availableToSupply: Decimal.ZERO,
         borrowed: Decimal.ZERO,
-        borrowedUSD: Decimal.ZERO,
+        borrowedUsd: Decimal.ZERO,
         borrowRateMode: BorrowRateMode.VARIABLE,
         availableToBorrow: Decimal.ZERO,
-        availableToBorrowUSD: Decimal.ZERO,
+        availableToBorrowUsd: Decimal.ZERO,
       })),
     };
   }
@@ -217,7 +217,7 @@ export class AaveUserReservesSummaryFactory {
           const availableToBorrow = availableLiquidity.lt(canBorrow)
             ? availableLiquidity
             : canBorrow;
-          const availableToBorrowUSD = availableToBorrow.mul(
+          const availableToBorrowUsd = availableToBorrow.mul(
             r.reserve.priceInUSD,
           );
 
@@ -230,11 +230,11 @@ export class AaveUserReservesSummaryFactory {
             collateral: r.usageAsCollateralEnabledOnUser,
 
             supplied: Decimal.from(r.underlyingBalance),
-            suppliedUSD: Decimal.from(r.underlyingBalanceUSD),
+            suppliedUsd: Decimal.from(r.underlyingBalanceUSD),
             borrowed: Decimal.from(r.totalBorrows),
-            borrowedUSD: Decimal.from(r.totalBorrowsUSD),
+            borrowedUsd: Decimal.from(r.totalBorrowsUSD),
             availableToBorrow,
-            availableToBorrowUSD,
+            availableToBorrowUsd,
 
             borrowRateMode: Decimal.from(r.variableBorrows).gt(0)
               ? BorrowRateMode.VARIABLE

From 67fa6f00059fb7b1dfffa32d0c5e1188a7406b06 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Wed, 11 Sep 2024 16:53:38 +0400
Subject: [PATCH 109/116] pr comments

---
 .../StatisticsCard/StatisticsCard.tsx         |  5 +++-
 .../BorrowAssetsList/BorrowAssetsList.tsx     |  2 +-
 .../BorrowForm.tsx                            | 16 ++++++----
 .../BorrowForm.utils.ts                       |  0
 .../BorrowModal/BorrowModalContainer.tsx      | 30 -------------------
 .../components/BorrowAction/BorrowAction.tsx  |  2 +-
 6 files changed, 16 insertions(+), 39 deletions(-)
 rename apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/{BorrowModal => BorrowForm}/BorrowForm.tsx (95%)
 rename apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/{BorrowModal => BorrowForm}/BorrowForm.utils.ts (100%)
 delete mode 100644 apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowModalContainer.tsx

diff --git a/apps/frontend/src/app/2_molecules/StatisticsCard/StatisticsCard.tsx b/apps/frontend/src/app/2_molecules/StatisticsCard/StatisticsCard.tsx
index 07c7d02da..744464abf 100644
--- a/apps/frontend/src/app/2_molecules/StatisticsCard/StatisticsCard.tsx
+++ b/apps/frontend/src/app/2_molecules/StatisticsCard/StatisticsCard.tsx
@@ -1,10 +1,13 @@
 import React, { FC } from 'react';
 
 import classNames from 'classnames';
+import { t } from 'i18next';
 import { ReactElement } from 'react-markdown/lib/react-markdown';
 
 import { HelperButton, Icon, IconNames } from '@sovryn/ui';
 
+import { translations } from '../../../locales/i18n';
+
 type StatisticsCardProps = {
   label: string;
   value?: ReactElement;
@@ -42,7 +45,7 @@ export const StatisticsCard: FC<StatisticsCardProps> = ({
             )}
           </>
         ) : (
-          <span>---</span>
+          <span>{t(translations.common.na)}</span>
         )}
       </div>
     </div>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
index 4f0c21297..5d1baeb8d 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/BorrowAssetsList.tsx
@@ -20,7 +20,7 @@ import { sortRowsByOrderOptions } from '../../AavePage.utils';
 import { COLUMNS_CONFIG } from './BorrowAssetsList.constants';
 import { BorrowPoolDetails } from './BorrowAssetsList.types';
 import { BorrowAssetDetails } from './components/BorrowAssetDetails/BorrowAssetDetails';
-import { BorrowForm } from './components/BorrowModal/BorrowForm';
+import { BorrowForm } from './components/BorrowForm/BorrowForm';
 
 const pageTranslations = translations.aavePage.borrowAssetsList;
 
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowForm/BorrowForm.tsx
similarity index 95%
rename from apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
rename to apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowForm/BorrowForm.tsx
index fe2ba58ca..9daf988b3 100644
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx
+++ b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowForm/BorrowForm.tsx
@@ -122,6 +122,15 @@ export const BorrowForm: FC<BorrowFormProps> = ({ asset, onComplete }) => {
     [onComplete, borrowSize, borrowReserve, handleBorrow],
   );
 
+  const isConfirmDisabled = useMemo(() => {
+    return (
+      !isValidBorrowAmount ||
+      borrowSize.lte(0) ||
+      !acknowledge ||
+      !borrowReserve
+    );
+  }, [isValidBorrowAmount, borrowSize, acknowledge, borrowReserve]);
+
   return (
     <form className="flex flex-col gap-6">
       <div className="space-y-3">
@@ -198,12 +207,7 @@ export const BorrowForm: FC<BorrowFormProps> = ({ asset, onComplete }) => {
 
       <Button
         onClick={onConfirm}
-        disabled={
-          !isValidBorrowAmount ||
-          borrowSize.lte(0) ||
-          !acknowledge ||
-          !borrowReserve
-        }
+        disabled={isConfirmDisabled}
         text={t(translations.common.buttons.confirm)}
       />
     </form>
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.utils.ts b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowForm/BorrowForm.utils.ts
similarity index 100%
rename from apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.utils.ts
rename to apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowForm/BorrowForm.utils.ts
diff --git a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowModalContainer.tsx b/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowModalContainer.tsx
deleted file mode 100644
index e169e6b0f..000000000
--- a/apps/frontend/src/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowModalContainer.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React, { FC } from 'react';
-
-import { t } from 'i18next';
-
-import { Dialog, DialogBody, DialogHeader } from '@sovryn/ui';
-
-import { translations } from '../../../../../../../locales/i18n';
-import { BorrowForm } from './BorrowForm';
-
-type BorrowModalContainerProps = {
-  asset: string;
-  isOpen: boolean;
-  handleCloseModal: () => void;
-};
-
-export const BorrowModalContainer: FC<BorrowModalContainerProps> = ({
-  asset,
-  isOpen,
-  handleCloseModal,
-}) => (
-  <Dialog disableFocusTrap isOpen={isOpen}>
-    <DialogHeader
-      title={t(translations.aavePage.common.borrow)}
-      onClose={handleCloseModal}
-    />
-    <DialogBody className="flex flex-col gap-6">
-      <BorrowForm asset={asset} onComplete={handleCloseModal} />
-    </DialogBody>
-  </Dialog>
-);
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx
index e36beb23b..d904689de 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx
@@ -15,7 +15,7 @@ import { Decimal } from '@sovryn/utils';
 
 import { AssetAmountPriceRenderer } from '../../../../../../2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer';
 import { translations } from '../../../../../../../locales/i18n';
-import { BorrowForm } from '../../../../../AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm';
+import { BorrowForm } from '../../../../../AavePage/components/BorrowAssetsList/components/BorrowForm/BorrowForm';
 
 const pageTranslations = translations.aaveReserveOverviewPage;
 

From ba4e5956330062e83b030b7b755e1786727b43c1 Mon Sep 17 00:00:00 2001
From: Matias Zapata <42716817+matzapata@users.noreply.github.com>
Date: Wed, 11 Sep 2024 10:11:24 -0300
Subject: [PATCH 110/116] Update
 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.utils.ts

Co-authored-by: Pietro <74987028+pietro-maximoff@users.noreply.github.com>
---
 .../components/Chart/Chart.utils.ts           | 27 ++++++++++++-------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.utils.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.utils.ts
index db454110f..2588ef4e6 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.utils.ts
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.utils.ts
@@ -91,17 +91,26 @@ export const htmlLegendPlugin = {
 };
 
 export const calculateInterestRateModel = (
-  u: number,
-  base: number,
-  optimal: number,
-  slope1: number,
-  slope2: number,
-) => {
-  if (u === 0) return 0;
+  utilization: number,
+  baseRate: number,
+  optimalUtilization: number,
+  initialSlope: number,
+  secondarySlope: number,
+): number => {
+  if (utilization === 0) {
+    return 0;
+  }
 
-  if (u <= optimal) return base + (u / optimal) * slope1;
+  if (utilization <= optimalUtilization) {
+    return baseRate + (utilization / optimalUtilization) * initialSlope;
+  }
 
-  return base + slope1 + ((u - optimal) / (1 - optimal)) * slope2;
+  return (
+    baseRate +
+    initialSlope +
+    ((utilization - optimalUtilization) / (1 - optimalUtilization)) *
+      secondarySlope
+  );
 };
 
 export const calculateVariableInterestRateModel = (

From 836432424e1586262a5e97a9ac4a8c5e657b2506 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Wed, 11 Sep 2024 17:13:08 +0400
Subject: [PATCH 111/116] pr comment

---
 .../components/BorrowAction/BorrowAction.tsx          | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx
index d904689de..91ef11521 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/WalletOverview/components/BorrowAction/BorrowAction.tsx
@@ -43,15 +43,14 @@ export const BorrowAction: FC<BorrowActionProps> = ({
   return (
     <div className="flex justify-between items-center">
       <div className="space-y-2">
-        <Paragraph
-          size={ParagraphSize.small}
-          className="text-gray-30 flex items-center gap-1"
-        >
-          {t(pageTranslations.yourWalletTab.availableToBorrow)}{' '}
+        <div className="flex items-center gap-1">
+          <Paragraph size={ParagraphSize.small} className="text-gray-30 ">
+            {t(pageTranslations.yourWalletTab.availableToBorrow)}{' '}
+          </Paragraph>
           <HelperButton
             content={t(pageTranslations.yourWalletTab.availableToBorrowInfo)}
           />
-        </Paragraph>
+        </div>
         <AssetAmountPriceRenderer
           value={availableToBorrow}
           valueUsd={availableToBorrowUsd}

From 47deadf1896f4230928ecbd5c653661260a15f44 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Wed, 11 Sep 2024 17:19:41 +0400
Subject: [PATCH 112/116] disable tooltip for infinite

---
 .../app/2_molecules/AmountRenderer/AmountRenderer.tsx    | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/app/2_molecules/AmountRenderer/AmountRenderer.tsx b/apps/frontend/src/app/2_molecules/AmountRenderer/AmountRenderer.tsx
index 9b2fef6b3..b8d3cb01b 100644
--- a/apps/frontend/src/app/2_molecules/AmountRenderer/AmountRenderer.tsx
+++ b/apps/frontend/src/app/2_molecules/AmountRenderer/AmountRenderer.tsx
@@ -131,6 +131,11 @@ export const AmountRenderer: FC<AmountRendererProps> = ({
     [adjustedValue, calculatedPrecision, precision],
   );
 
+  const isInfinite = useMemo(
+    () => !!(infiniteFrom && Decimal.from(value).gt(infiniteFrom)),
+    [infiniteFrom, value],
+  );
+
   return (
     <Tooltip
       content={
@@ -145,7 +150,7 @@ export const AmountRenderer: FC<AmountRendererProps> = ({
         </span>
       }
       className={classNames({ 'cursor-pointer': shouldShowTooltip }, className)}
-      disabled={!shouldShowTooltip}
+      disabled={!shouldShowTooltip || isInfinite}
       trigger={trigger}
       dataAttribute={dataAttribute}
     >
@@ -160,7 +165,7 @@ export const AmountRenderer: FC<AmountRendererProps> = ({
           prefix={shouldShowRoundingPrefix ? `~ ${prefix}` : `${prefix}`}
           suffix={` ${suffix}`}
         />
-      ) : infiniteFrom && Decimal.from(value).gt(infiniteFrom) ? (
+      ) : isInfinite ? (
         <span>∞</span>
       ) : (
         <span>

From 132dfca60d64fb6f448fbe87707d39c53bdccd81 Mon Sep 17 00:00:00 2001
From: Luciano Perez Cerra <perezcerraluciano@gmail.com>
Date: Thu, 12 Sep 2024 10:42:29 -0300
Subject: [PATCH 113/116] [SAF_20] integrate charts data and api (#47)

* [SAF_20] integrate charts data and api

* [SAF_20] rewrite useAaveReservesHistory without using cancelable

* [SAF_20] remove type

* [SAF_20] remove jsdocs; use Decimal instead of number

* [SAF_20] remove unnecesary variable calculatedDate ; replace native fetch by axios

* [SAF_20] remove comments

* [SAF_20] move 18,27 decimals constants to math; move abi to constant file and remove unnecesary fields

* [SAF_20] use getProvider with bob chain id

* [SAF_20] remove unnecesary typed expression

* [SAF-20] add use memo

* [SAF-20] remove redundant use of loading

* [SAF-20] remove let by const

* [SAF-20] refactor supply and borrow chart data setup

* [SAF-20] refactor useRate giving symbol as a paramter

* [SAF-20] add manually time controls to charts (#52)

* [SAF-20] add manually time controls to charts

* [SAF-20] use enum from history hook to type TimeRangeButtons

* [SAF-20] replace color codes by theme variables

* [SAF-20] translate rate results from string to Decimal type ; delete unnecesary contract for the rate calculation that was introduced for reading getStableRateExcessOffset and OPTIMAL_STABLE_TO_TOTAL_DEBT_RATIO

* [SAF-20] rebase develop; resolve conflicts

* [SAF-20] rename text variable

* [SAF-20] fix calculation of utilization ratio

* [SAF-20] integrate REACT_APP_RATES_HISTORY_API_URL

* [SAF-20] improve calculateUtilizationRate

* [SAF-20] extract calculateUtilizationRate to util file; add check for value between zero and one ; add tests

* Update .env.example

* [SAF-20] remove unnecesary WEI def

* [SAF-20] wrapp describes

* [SAF-20] map values into Decimal

* [SAF-20] fix building reserve address

* [SAF-20] remove comment about a possible BUG; doesnt apply

* [SAF-20] move checkinig isBetweenZeroAndOne to inner function calculateUtilizationRate and return Zero in that case

* [SAF-20] rename parameter

* [SAF-20] move URL to constants

* [SAF-20] remove useless comments

* [SAF-20] add missing useCallback

* [SAF-20] rename parameter

* [SAF-20] remove isBetweenZeroAndOne leave the check inside calculation; move calculateUtilizationRate into AaveCalculations class

* [SAF-20] Use the same naming convention for RatesHistoryApiUrl as the rest of the constants

* [SAF-20] simplify hook useAaveRates with just one memo hook

* [SAF-20] simplify history data by removing unused utilizationRate and stableBorrowRate ; return just a type number to avoid unnecesary conversions

* [SAF-20] use Decimal to calculate interest rates
---
 apps/frontend/.env.example                    |   4 +-
 .../BorrowDetailsGraph/BorrowDetailsGraph.tsx |  31 +++-
 .../components/Chart/Chart.tsx                |  10 +-
 .../InterestRateModelGraph.tsx                |  12 +-
 .../components/Chart/Chart.tsx                |   6 +-
 .../components/Chart/Chart.types.ts           |  14 +-
 .../components/Chart/Chart.utils.ts           |  48 +++---
 .../SupplyDetailsGraph/SupplyDetailsGraph.tsx |  29 +++-
 .../components/Chart/Chart.tsx                |  10 +-
 .../TimeRangeButtons/TimeRangeButtons.tsx     |  60 +++++++
 apps/frontend/src/constants/aave.ts           |   2 +
 apps/frontend/src/hooks/aave/useAaveRates.tsx |  68 ++++++++
 .../src/hooks/aave/useAaveReservesHistory.tsx | 152 ++++++++++++++++++
 .../frontend/src/locales/en/translations.json |   6 +-
 .../src/utils/aave/AaveCalculations.ts        |  39 +++++
 apps/frontend/src/utils/math.ts               |   2 +
 16 files changed, 445 insertions(+), 48 deletions(-)
 create mode 100644 apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TimeRangeButtons/TimeRangeButtons.tsx
 create mode 100644 apps/frontend/src/hooks/aave/useAaveRates.tsx
 create mode 100644 apps/frontend/src/hooks/aave/useAaveReservesHistory.tsx

diff --git a/apps/frontend/.env.example b/apps/frontend/.env.example
index 30a2abf58..24959e971 100644
--- a/apps/frontend/.env.example
+++ b/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=
\ No newline at end of file
+REACT_APP_DATADOG_CLIENT_TOKEN=
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
index ae6ce89e1..68e9fdb7f 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/BorrowDetailsGraph.tsx
+++ b/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">
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx
index 77febba4a..9f93e5f24 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/BorrowDetailsGraph/components/Chart/Chart.tsx
+++ b/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>
   );
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
index 9bd05ed4d..6c2e7f447 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
+++ b/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 */}
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
index 8ef847dc6..36b05f3a5 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.tsx
@@ -33,7 +33,7 @@ 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],
   );
@@ -41,7 +41,7 @@ export const Chart: FC<ChartProps> = ({ meta, 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],
   );
@@ -49,7 +49,7 @@ export const Chart: FC<ChartProps> = ({ meta, rates }) => {
   const currentPercentage = useMemo(
     () =>
       rates.currentUsageRatio
-        ? parseFloat((parseFloat(rates.currentUsageRatio) * 100).toFixed(2))
+        ? Math.round(rates.currentUsageRatio.mul(100).toNumber() * 100) / 100
         : 0,
     [rates.currentUsageRatio],
   );
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.types.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.types.ts
index 8a45374fa..11a089eb5 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.types.ts
+++ b/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;
 }
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.utils.ts b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.utils.ts
index 2588ef4e6..463bfc902 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/components/Chart/Chart.utils.ts
+++ b/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,
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
index 81e49fece..1f24b7766 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx
+++ b/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">
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.tsx
index 95525e619..10b4d6097 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/components/Chart/Chart.tsx
+++ b/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>
   );
diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TimeRangeButtons/TimeRangeButtons.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TimeRangeButtons/TimeRangeButtons.tsx
new file mode 100644
index 000000000..7c634cce2
--- /dev/null
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/TimeRangeButtons/TimeRangeButtons.tsx
@@ -0,0 +1,60 @@
+import React, { FC, useCallback, useState } from 'react';
+
+import {
+  ESupportedTimeRanges,
+  ReserveRateTimeRange,
+} from '../../../../../hooks/aave/useAaveReservesHistory';
+
+interface TimeRangeButtonsProps {
+  onChange: (range: ReserveRateTimeRange) => void;
+}
+
+export const TimeRangeButtons: FC<TimeRangeButtonsProps> = ({ onChange }) => {
+  const [activeRange, setActiveRange] = useState<ReserveRateTimeRange>(
+    ESupportedTimeRanges.OneMonth,
+  );
+
+  const handleClick = useCallback(
+    (range: ReserveRateTimeRange) => {
+      setActiveRange(range);
+      onChange(range);
+    },
+    [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.OneMonth
+            ? 'bg-gray-50 text-white'
+            : 'bg-gray-70 text-gray-400'
+        }`}
+        onClick={() => handleClick(ESupportedTimeRanges.OneMonth)}
+      >
+        {ESupportedTimeRanges.OneMonth}
+      </button>
+      <button
+        className={`py-1.5 px-4 rounded-md text-sm font-medium ${
+          activeRange === ESupportedTimeRanges.SixMonths
+            ? 'bg-gray-50 text-white'
+            : 'bg-gray-70 text-gray-400'
+        }`}
+        onClick={() => handleClick(ESupportedTimeRanges.SixMonths)}
+      >
+        {ESupportedTimeRanges.SixMonths}
+      </button>
+      <button
+        className={`py-1.5 px-4 rounded-md text-sm font-medium ${
+          activeRange === ESupportedTimeRanges.OneYear
+            ? 'bg-gray-50 text-white'
+            : 'bg-gray-70 text-gray-400'
+        }`}
+        onClick={() => handleClick(ESupportedTimeRanges.OneYear)}
+      >
+        {ESupportedTimeRanges.OneYear}
+      </button>
+    </div>
+  );
+};
diff --git a/apps/frontend/src/constants/aave.ts b/apps/frontend/src/constants/aave.ts
index 9c5fa4dfb..fe83dccc3 100644
--- a/apps/frontend/src/constants/aave.ts
+++ b/apps/frontend/src/constants/aave.ts
@@ -1,4 +1,5 @@
 import { IS_MAINNET } from '../config/chains';
+
 import { decimalic } from '../utils/math';
 
 export const EMODE_DISABLED_ID = 0;
@@ -25,4 +26,5 @@ export const AAVE_CONTRACT_ADDRESSES = IS_MAINNET
       WETH: '0x8CEc2719a2e896A11eA3f10406EfDb6Ad87281D9',
       TREASURY: '0x2a9d8f5b2f7b8f5b4b5d5e7f3b4b5d5b5d5d5d5d',
       INTEREST_RATE_STRATEGY: '0x847A3364Cc5fE389283bD821cfC8A477288D9e82',
+      RATES_HISTORY_API_URL: process.env.REACT_APP_RATES_HISTORY_API_URL,
     };
diff --git a/apps/frontend/src/hooks/aave/useAaveRates.tsx b/apps/frontend/src/hooks/aave/useAaveRates.tsx
new file mode 100644
index 000000000..0256f4f99
--- /dev/null
+++ b/apps/frontend/src/hooks/aave/useAaveRates.tsx
@@ -0,0 +1,68 @@
+import { useMemo, useState } from 'react';
+
+import { formatUnits } from 'ethers/lib/utils';
+
+import { Decimal } from '@sovryn/utils';
+
+import { AaveCalculations } from '../../utils/aave/AaveCalculations';
+import { RAY_DECIMALS } from '../../utils/math';
+import { useAaveReservesData } from './useAaveReservesData';
+
+export interface RatesDataResult {
+  currentUsageRatio: Decimal;
+  optimalUsageRatio: Decimal;
+  baseVariableBorrowRate: Decimal;
+  variableRateSlope1: Decimal;
+  variableRateSlope2: Decimal;
+  underlyingAsset: string;
+  name: string;
+  symbol: string;
+  decimals: number;
+}
+
+export const useAaveInterestRatesData = (
+  symbol: string,
+): {
+  data: RatesDataResult | null;
+  error: string | null;
+} => {
+  const [data, setData] = useState<RatesDataResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const { reserves } = useAaveReservesData();
+  useMemo(() => {
+    const reserve = reserves.find(
+      r => r.symbol.toLocaleLowerCase() === symbol.toLocaleLowerCase(),
+    );
+    if (!reserve) return;
+    try {
+      const utilizationRate = AaveCalculations.calculateUtilizationRate(
+        reserve.decimals,
+        reserve.totalDebt,
+        reserve.availableLiquidity,
+      );
+      setData({
+        currentUsageRatio: utilizationRate,
+        optimalUsageRatio: Decimal.from(
+          formatUnits(reserve.optimalUsageRatio, RAY_DECIMALS),
+        ),
+        baseVariableBorrowRate: Decimal.from(
+          formatUnits(reserve.baseVariableBorrowRate, RAY_DECIMALS),
+        ),
+        variableRateSlope1: Decimal.from(
+          formatUnits(reserve.variableRateSlope1, RAY_DECIMALS),
+        ),
+        variableRateSlope2: Decimal.from(
+          formatUnits(reserve.variableRateSlope2, RAY_DECIMALS),
+        ),
+        underlyingAsset: reserve.underlyingAsset,
+        name: reserve.name,
+        symbol: reserve.symbol,
+        decimals: reserve.decimals,
+      });
+    } catch (error) {
+      setError(error.message);
+    }
+  }, [reserves, symbol]);
+
+  return { data, error };
+};
diff --git a/apps/frontend/src/hooks/aave/useAaveReservesHistory.tsx b/apps/frontend/src/hooks/aave/useAaveReservesHistory.tsx
new file mode 100644
index 000000000..790dbb950
--- /dev/null
+++ b/apps/frontend/src/hooks/aave/useAaveReservesHistory.tsx
@@ -0,0 +1,152 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import axios from 'axios';
+import dayjs from 'dayjs';
+
+import { AAVE_CONTRACT_ADDRESSES } from '../../constants/aave';
+
+export enum ESupportedTimeRanges {
+  OneMonth = '1m',
+  ThreeMonths = '3m',
+  SixMonths = '6m',
+  OneYear = '1y',
+  TwoYears = '2y',
+  FiveYears = '5y',
+}
+
+export const reserveRateTimeRangeOptions = [
+  ESupportedTimeRanges.OneMonth,
+  ESupportedTimeRanges.SixMonths,
+  ESupportedTimeRanges.OneYear,
+];
+export type ReserveRateTimeRange = typeof reserveRateTimeRangeOptions[number];
+
+type RatesHistoryParams = {
+  from: number;
+  resolutionInHours: number;
+};
+
+type APIResponse = {
+  liquidityRate_avg: number;
+  variableBorrowRate_avg: number;
+  stableBorrowRate_avg: number;
+  utilizationRate_avg: number;
+  x: { year: number; month: number; date: number; hours: number };
+};
+
+const requestCache = new Map<string, Promise<APIResponse[]>>();
+const fetchStats = async (
+  reserveId: string,
+  timeRange: ReserveRateTimeRange,
+  endpointURL: string,
+): Promise<APIResponse[]> => {
+  const { from, resolutionInHours } = resolutionForTimeRange(timeRange);
+  const qs = `reserveId=${reserveId}&from=${from}&resolutionInHours=${resolutionInHours}`;
+  const url = `${endpointURL}?${qs}`;
+
+  if (requestCache.has(url)) {
+    return requestCache.get(url)!;
+  }
+
+  const requestPromise = axios
+    .get<APIResponse[]>(url)
+    .then(response => response.data)
+    .finally(() => {
+      requestCache.delete(url);
+    });
+
+  requestCache.set(url, requestPromise);
+
+  return requestPromise;
+};
+
+const resolutionForTimeRange = (
+  timeRange: ReserveRateTimeRange,
+): RatesHistoryParams => {
+  switch (timeRange) {
+    case ESupportedTimeRanges.OneMonth:
+      return {
+        from: dayjs().subtract(30, 'day').unix(),
+        resolutionInHours: 6,
+      };
+    case ESupportedTimeRanges.SixMonths:
+      return {
+        from: dayjs().subtract(6, 'month').unix(),
+        resolutionInHours: 24,
+      };
+    case ESupportedTimeRanges.OneYear:
+      return {
+        from: dayjs().subtract(1, 'year').unix(),
+        resolutionInHours: 24,
+      };
+    default:
+      return {
+        // Return today as a fallback
+        from: dayjs().unix(),
+        resolutionInHours: 6,
+      };
+  }
+};
+
+export type FormattedReserveHistoryItem = {
+  date: number;
+  liquidityRate: number;
+  variableBorrowRate: number;
+};
+
+export function useAaveReservesHistory(
+  reserveId: string,
+  timeRange: ReserveRateTimeRange,
+) {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [data, setData] = useState<FormattedReserveHistoryItem[]>([]);
+
+  const refetchData = useCallback(() => {
+    if (reserveId && AAVE_CONTRACT_ADDRESSES.RATES_HISTORY_API_URL) {
+      // reset
+      setLoading(true);
+      setError(false);
+      setData([]);
+      fetchStats(
+        reserveId,
+        timeRange,
+        AAVE_CONTRACT_ADDRESSES.RATES_HISTORY_API_URL,
+      )
+        .then((data: APIResponse[]) => {
+          setData(
+            data.map(d => ({
+              date: dayjs()
+                .set('year', d.x.year)
+                .set('month', d.x.month)
+                .set('date', d.x.date)
+                .set('hour', d.x.hours)
+                .valueOf(),
+              liquidityRate: d.liquidityRate_avg,
+              variableBorrowRate: d.variableBorrowRate_avg,
+            })),
+          );
+        })
+        .catch(e => {
+          console.error(
+            'useReservesHistory(): Failed to fetch historical reserve data.',
+            e,
+          );
+          setError(true);
+        })
+        .finally(() => setLoading(false));
+    }
+
+    return () => null;
+  }, [reserveId, timeRange]);
+
+  useEffect(() => {
+    refetchData();
+  }, [refetchData]);
+  return {
+    loading,
+    data,
+    error,
+    refetch: refetchData,
+  };
+}
diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json
index 3767d3445..cae5b345c 100644
--- a/apps/frontend/src/locales/en/translations.json
+++ b/apps/frontend/src/locales/en/translations.json
@@ -999,7 +999,7 @@
             "of": "of",
             "apy": "APY",
             "chart": {
-                "label1": "Supply APR"
+                "suppApr": "Supply APR"
             }
         },
         "borrowDetails": {
@@ -1015,7 +1015,7 @@
             "collectorContract": "Collector contract",
             "viewContract": "View contract",
             "chart": {
-                "label1": "Borrow APR, variable"
+                "aprVarLabel": "Borrow APR, variable"
             }
         },
         "interestRateModel": {
@@ -1027,7 +1027,7 @@
             "collectorContract": "Collector contract",
             "viewContract": "View contract",
             "chart": {
-                "label1": "Borrow APR, variable"
+                "aprVarLabel": "Borrow APR, variable"
             }
         }
     },
diff --git a/apps/frontend/src/utils/aave/AaveCalculations.ts b/apps/frontend/src/utils/aave/AaveCalculations.ts
index 910b964b5..00246dabd 100644
--- a/apps/frontend/src/utils/aave/AaveCalculations.ts
+++ b/apps/frontend/src/utils/aave/AaveCalculations.ts
@@ -1,3 +1,5 @@
+import { utils } from 'ethers';
+
 import { Decimal } from '@sovryn/utils';
 
 import { UserSummary } from './AaveUserReservesSummary';
@@ -128,4 +130,41 @@ export class AaveCalculations {
     }
     return borrowSize.mul(currentLiquidationThreshold).div(collateralBalance);
   }
+
+  static calculateUtilizationRate = (
+    decimals: number,
+    totalDebt: string,
+    availableLiquidity: string,
+  ): Decimal => {
+    const totalBorrowBigInt = BigInt(
+      utils.parseUnits(totalDebt, decimals).toString(),
+    );
+    const availableLiquidityBigInt = BigInt(availableLiquidity);
+
+    const totalSupplyBigInt = totalBorrowBigInt + availableLiquidityBigInt;
+
+    if (totalSupplyBigInt === BigInt(0)) {
+      return Decimal.from(0);
+    }
+
+    const utilizationRateBigInt =
+      (totalBorrowBigInt * BigInt(10 ** decimals)) / totalSupplyBigInt;
+
+    const utilizationRate = utils.formatUnits(
+      utilizationRateBigInt.toString(),
+      decimals,
+    );
+
+    const utilizationRateDecimal = Decimal.from(utilizationRate);
+
+    const isBetweenZeroAndOne =
+      utilizationRateDecimal.gte(Decimal.from(0)) &&
+      utilizationRateDecimal.lte(Decimal.from(1));
+
+    if (!isBetweenZeroAndOne) {
+      return Decimal.from(0);
+    }
+
+    return utilizationRateDecimal;
+  };
 }
diff --git a/apps/frontend/src/utils/math.ts b/apps/frontend/src/utils/math.ts
index 68b86bf6c..cd4b0d1a3 100644
--- a/apps/frontend/src/utils/math.ts
+++ b/apps/frontend/src/utils/math.ts
@@ -11,6 +11,8 @@ const DEFAULT_DECIMALS = 6;
 const DEFAULT_DECIMALS_SEPARATOR = '.';
 const DEFAULT_THOUSANDS_SEPARATOR = ',';
 
+export const RAY_DECIMALS = 27;
+
 const unitNames = ['wei', 'kwei', 'mwei', 'gwei', 'szabo', 'finney', 'ether'];
 
 // helper function to convert any type of ethers value to wei.

From 783e1450aa67ca1be4a275e844958d07cfd765a4 Mon Sep 17 00:00:00 2001
From: juandahl <juandahl20@gmail.com>
Date: Thu, 12 Sep 2024 17:26:42 -0300
Subject: [PATCH 114/116] fix(ui): fix size of wallet card

---
 .../5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
index b0109e6fa..eea55516d 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/AaveReserveOverviewPage.tsx
@@ -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} />

From 549748a01a8ab340fa55b5e3823de7468ace2bba Mon Sep 17 00:00:00 2001
From: Luciano Perez Cerra <perezcerraluciano@gmail.com>
Date: Fri, 13 Sep 2024 10:14:00 -0300
Subject: [PATCH 115/116] Apply suggestions from code review

Co-authored-by: Pietro <74987028+pietro-maximoff@users.noreply.github.com>
---
 .../InterestRateModelGraph/InterestRateModelGraph.tsx      | 7 +++++--
 apps/frontend/src/hooks/aave/useAaveRates.tsx              | 4 +++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
index 6c2e7f447..98e9dd2ee 100644
--- a/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
+++ b/apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/InterestRateModelGraph/InterestRateModelGraph.tsx
@@ -16,6 +16,7 @@ import { useIsMobile } from '../../../../../hooks/useIsMobile';
 import { translations } from '../../../../../locales/i18n';
 import { getBobExplorerUrl } from '../../../../../utils/helpers';
 import { Chart } from './components/Chart/Chart';
+import { COMMON_SYMBOLS } from '../../../../../utils/asset';
 
 const pageTranslations = translations.aaveReserveOverviewPage.interestRateModel;
 
@@ -27,7 +28,7 @@ export const InterestRateModelGraph: FC<InterestRateModelGraphProps> = ({
   reserve,
 }) => {
   const [searchParams] = useSearchParams();
-  const symbol = searchParams.get('asset') || 'ETH';
+  const symbol = searchParams.get('asset') || COMMON_SYMBOLS.ETH;
   const { data: rates } = useAaveInterestRatesData(symbol);
   const { isMobile } = useIsMobile();
   const [open, setOpen] = useState(true);
@@ -50,7 +51,9 @@ export const InterestRateModelGraph: FC<InterestRateModelGraphProps> = ({
     [reserve.borrowUsageRatio],
   );
 
-  if (!rates) return null;
+  if (!rates) {
+    return null;
+  }
   return (
     <Accordion
       label={
diff --git a/apps/frontend/src/hooks/aave/useAaveRates.tsx b/apps/frontend/src/hooks/aave/useAaveRates.tsx
index 0256f4f99..24bf33a58 100644
--- a/apps/frontend/src/hooks/aave/useAaveRates.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveRates.tsx
@@ -33,7 +33,9 @@ export const useAaveInterestRatesData = (
     const reserve = reserves.find(
       r => r.symbol.toLocaleLowerCase() === symbol.toLocaleLowerCase(),
     );
-    if (!reserve) return;
+    if (!reserve) {
+      return;
+    }
     try {
       const utilizationRate = AaveCalculations.calculateUtilizationRate(
         reserve.decimals,

From 500fe4c650d9395c5d2ccd4a1397d8541e7736ee Mon Sep 17 00:00:00 2001
From: Luciano Perez Cerra <luchopcerra@gmail.com>
Date: Fri, 13 Sep 2024 10:18:23 -0300
Subject: [PATCH 116/116] @pietro-maximoff suggestion applied: 'it doesn't need
 to be changed'

---
 apps/frontend/src/hooks/aave/useAaveBorrow.tsx   | 4 +++-
 apps/frontend/src/hooks/aave/useAaveRepay.tsx    | 4 +++-
 apps/frontend/src/hooks/aave/useAaveSupply.tsx   | 4 +++-
 apps/frontend/src/hooks/aave/useAaveWithdraw.tsx | 4 +++-
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/src/hooks/aave/useAaveBorrow.tsx b/apps/frontend/src/hooks/aave/useAaveBorrow.tsx
index c9baee288..2b1587021 100644
--- a/apps/frontend/src/hooks/aave/useAaveBorrow.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveBorrow.tsx
@@ -22,7 +22,9 @@ export const useAaveBorrow = () => {
   const { setTransactions, setIsOpen, setTitle } = useTransactionContext();
 
   const aaveBorrowTransactionsFactory = useMemo(() => {
-    if (!signer) return null;
+    if (!signer) {
+      return null;
+    }
     return new AaveBorrowTransactionsFactory(
       AAVE_CONTRACT_ADDRESSES.POOL,
       AAVE_CONTRACT_ADDRESSES.WETH_GATEWAY,
diff --git a/apps/frontend/src/hooks/aave/useAaveRepay.tsx b/apps/frontend/src/hooks/aave/useAaveRepay.tsx
index 5d0f8cc05..f76a41695 100644
--- a/apps/frontend/src/hooks/aave/useAaveRepay.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveRepay.tsx
@@ -22,7 +22,9 @@ export const useAaveRepay = () => {
   const { setTransactions, setIsOpen, setTitle } = useTransactionContext();
 
   const aaveRepayTransactionsFactory = useMemo(() => {
-    if (!signer) return null;
+    if (!signer) {
+      return null;
+    }
     return new AaveRepayTransactionsFactory(
       AAVE_CONTRACT_ADDRESSES.POOL,
       AAVE_CONTRACT_ADDRESSES.WETH_GATEWAY,
diff --git a/apps/frontend/src/hooks/aave/useAaveSupply.tsx b/apps/frontend/src/hooks/aave/useAaveSupply.tsx
index 73aad67e3..ebd6595ec 100644
--- a/apps/frontend/src/hooks/aave/useAaveSupply.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveSupply.tsx
@@ -22,7 +22,9 @@ export const useAaveSupply = () => {
   const { setTransactions, setIsOpen, setTitle } = useTransactionContext();
 
   const aaveSupplyTransactionsFactory = useMemo(() => {
-    if (!signer) return null;
+    if (!signer) {
+      return null;
+    }
     return new AaveSupplyTransactionsFactory(
       AAVE_CONTRACT_ADDRESSES.POOL,
       AAVE_CONTRACT_ADDRESSES.WETH_GATEWAY,
diff --git a/apps/frontend/src/hooks/aave/useAaveWithdraw.tsx b/apps/frontend/src/hooks/aave/useAaveWithdraw.tsx
index f2f946a77..cfa18870c 100644
--- a/apps/frontend/src/hooks/aave/useAaveWithdraw.tsx
+++ b/apps/frontend/src/hooks/aave/useAaveWithdraw.tsx
@@ -22,7 +22,9 @@ export const useAaveWithdraw = () => {
   const { setTransactions, setIsOpen, setTitle } = useTransactionContext();
 
   const aaveWithdrawTransactionsFactory = useMemo(() => {
-    if (!signer) return null;
+    if (!signer) {
+      return null;
+    }
     return new AaveWithdrawTransactionsFactory(
       AAVE_CONTRACT_ADDRESSES.POOL,
       AAVE_CONTRACT_ADDRESSES.WETH_GATEWAY,