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 <[email protected]> * Update apps/frontend/src/app/5_pages/AavePage/components/LendAssetsList/components/LendAssetAction/LendAssetAction.tsx Co-authored-by: Juan <[email protected]> * Update apps/frontend/src/app/5_pages/AavePage/components/LendPositionsList/LendPositionsList.constants.tsx Co-authored-by: Juan <[email protected]> * 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 (DistributedCollective#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 <[email protected]> * 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 <[email protected]> * 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 <[email protected]> --------- Co-authored-by: Juan Dahl <[email protected]> * Update apps/frontend/package.json Co-authored-by: Pietro <[email protected]> * Update apps/frontend/src/app/2_molecules/AmountTransition/AmountTransition.tsx Co-authored-by: Pietro <[email protected]> * Update apps/frontend/src/app/2_molecules/AssetAmountPriceRenderer/AssetAmountPriceRenderer.tsx Co-authored-by: Pietro <[email protected]> * Update apps/frontend/src/app/2_molecules/NetworkSwitch/NetworkSwitch.tsx Co-authored-by: Pietro <[email protected]> * Update apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/EModeDetails/EModeDetails.tsx Co-authored-by: Pietro <[email protected]> * Update apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx Co-authored-by: Pietro <[email protected]> * Update apps/frontend/src/app/5_pages/AaveReserveOverviewPage/components/SupplyDetailsGraph/SupplyDetailsGraph.tsx Co-authored-by: Pietro <[email protected]> * Apply suggestions from code review Co-authored-by: Pietro <[email protected]> * remove LinkIcon * Apply suggestions from code review Co-authored-by: Pietro <[email protected]> * Apply suggestions from code review Co-authored-by: Pietro <[email protected]> * Apply suggestions from code review Co-authored-by: Pietro <[email protected]> * pr comments * fixes --------- Co-authored-by: matzapata <[email protected]> Co-authored-by: Matias Zapata <[email protected]> Co-authored-by: Juan Dahl <[email protected]> Co-authored-by: Luciano Perez Cerra <[email protected]> Co-authored-by: Pietro <[email protected]> * chore: cleanup * connected graphs * cleanup * cleanup * cleanup --------- Co-authored-by: Juan <[email protected]> Co-authored-by: Luciano Perez Cerra <[email protected]> Co-authored-by: Christian Escalante <[email protected]> Co-authored-by: Luciano Perez Cerra <[email protected]> Co-authored-by: Pietro <[email protected]> Co-authored-by: Pietro <[email protected]>
wakeuplabs-io · Sep 6, 2024 · 7b72932 · 7b72932
1 parent d884245
commit 7b72932
Show file tree

Hide file tree

Showing 61 changed files with 1,436 additions and 451 deletions.
diff --git 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
@@ -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
@@ -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,32 +55,16 @@ 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>
         <title>{t(pageTranslations.meta.title)}</title>
       </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
@@ -1,16 +1,32 @@
+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';
 import { BorrowPosition } from './components/BorrowPositionsList/BorrowPositionsList.types';
 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/...AavePage/components/BorrowAssetsList/components/BorrowAssetDetails/BorrowAssetDetails.tsx b/...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/...rc/app/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.tsx b/...rc/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/...p/5_pages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowForm.utils.ts b/...p/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/...ages/AavePage/components/BorrowAssetsList/components/BorrowModal/BorrowModalContainer.tsx b/...ages/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/.../frontend/src/app/5_pages/AavePage/components/BorrowPositionsList/BorrowPositionsList.tsx b/.../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/...e/components/BorrowPositionsList/components/BorrowRateModeSelect/BorrowRateModeSelect.tsx b/...e/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/...ePage/components/BorrowPositionsList/components/EfficiencyModeCard/EfficiencyModeCard.tsx b/...ePage/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>
+      )}
     </>
   );
 };
-Original file line number
+Diff line change
@@ Expand Up @@
         ];
         if (
+          // cannot be collateral for stable borrows
           (position.stableBorrowEnabled && !position.isCollateral) ||
           position.borrowRateMode === BorrowRateMode.STABLE
         ) {
@@ Expand Down @@