SAF-49 setup bob

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())

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;

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,
+    }));
+  }
+}

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)} />
     ),
   },
 ];

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>
   );
 };