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 1/6] 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 2/6] 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 3/6] 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 4/6] 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 c59d8f8d0b46aec6b9dc87c17c4452f074d47e63 Mon Sep 17 00:00:00 2001
From: matzapata <matuzapata@gmail.com>
Date: Fri, 9 Aug 2024 18:09:40 +0300
Subject: [PATCH 5/6] 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 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 6/6] 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">