fix: clarify dust handling logic and bring back close button ONLY in …

…the withdraw dust case
mrgnlabs · Nov 18, 2023 · 08bc03d · 08bc03d
1 parent 8c8acb7
commit 08bc03d
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 33 deletions.
diff --git a/apps/marginfi-v2-ui/src/components/desktop/AssetsList/AssetRow/AssetRow.tsx b/apps/marginfi-v2-ui/src/components/desktop/AssetsList/AssetRow/AssetRow.tsx
@@ -4,12 +4,7 @@ import Image from "next/image";
 import { TableCell, TableRow, Tooltip, Typography } from "@mui/material";
 import { useMrgnlendStore, useUserProfileStore } from "~/store";
 import Badge from "@mui/material/Badge";
-import {
-  WSOL_MINT,
-  numeralFormatter,
-  percentFormatter,
-  usdFormatter,
-} from "@mrgnlabs/mrgn-common";
+import { WSOL_MINT, numeralFormatter, percentFormatter, uiToNative, usdFormatter } from "@mrgnlabs/mrgn-common";
 import { ExtendedBankInfo, ActionType, getCurrentAction, ExtendedBankMetadata } from "@mrgnlabs/marginfi-v2-ui-state";
 import { MarginfiAccountWrapper, PriceBias } from "@mrgnlabs/marginfi-client-v2";
 import { MrgnTooltip } from "~/components/common/MrgnTooltip";
@@ -67,7 +62,7 @@ const AssetRow: FC<{
   const assetPrice = useMemo(
     () =>
       bank.info.oraclePrice.priceRealtime ? bank.info.oraclePrice.priceRealtime.toNumber() : bank.info.state.price,
-    [bank.info.state.price]
+    [bank.info.oraclePrice.priceRealtime, bank.info.state.price]
   );
 
   const assetPriceOffset = useMemo(
@@ -95,8 +90,9 @@ const AssetRow: FC<{
         return bank.userInfo.maxRepay;
     }
   }, [bank, currentAction]);
-
-  const isDisabled = useMemo(() => maxAmount === 0, [maxAmount]);
+  const isDust = bank.isActive && uiToNative(bank.position.amount, bank.info.state.mintDecimals).isZero();
+  const showCloseBalance = currentAction === ActionType.Withdraw && isDust; // Only case we should show close balance is when we are withdrawing a dust balance, since user receives 0 tokens back (vs repaying a dust balance where the input box will show the smallest unit of the token)
+  const isActionDisabled = maxAmount === 0 && !showCloseBalance;
 
   const actionBorrowOrLend = useCallback(
     async ({
@@ -450,7 +446,7 @@ const AssetRow: FC<{
             maxValue={maxAmount}
             maxDecimals={bank.info.state.mintDecimals}
             inputRefs={inputRefs}
-            disabled={maxAmount === 0}
+            disabled={showCloseBalance || isActionDisabled}
             onEnter={handleBorrowOrLend}
           />
         </Badge>
@@ -468,10 +464,10 @@ const AssetRow: FC<{
                   ? "rgb(227, 227, 227)"
                   : "rgba(0,0,0,0)"
               }
-              onClick={handleBorrowOrLend}
-              disabled={isDisabled}
+              onClick={showCloseBalance ? handleCloseBalance : handleBorrowOrLend}
+              disabled={isActionDisabled}
             >
-              {currentAction}
+              {showCloseBalance ? "Close" : currentAction}
             </AssetRowAction>
           </div>
         </Tooltip>

diff --git a/apps/marginfi-v2-ui/src/components/desktop/UserPositions/UserPositionRow/UserPositionRow.tsx b/apps/marginfi-v2-ui/src/components/desktop/UserPositions/UserPositionRow/UserPositionRow.tsx
@@ -22,23 +22,12 @@ interface UserPositionRowProps {
 const UserPositionRow: FC<UserPositionRowProps> = ({ activeBankInfo, marginfiAccount, reloadPositions }) => {
   const [withdrawOrRepayAmount, setWithdrawOrRepayAmount] = useState(0);
 
-  const maxAmount = useMemo(
-    () => (activeBankInfo.position.isLending ? activeBankInfo.userInfo.maxWithdraw : activeBankInfo.userInfo.maxRepay),
-    [activeBankInfo]
-  );
-
-  const isDust = useMemo(() => {
-    return uiToNative(activeBankInfo.position.amount, activeBankInfo.info.state.mintDecimals).isZero();
-  }, [activeBankInfo]);
-
-  const isDisabled = useMemo(
-    () =>
-      (isDust &&
-        uiToNative(activeBankInfo.userInfo.tokenAccount.balance, activeBankInfo.info.state.mintDecimals).isZero() &&
-        !activeBankInfo.position.isLending) ||
-      (!isDust && maxAmount === 0),
-    [isDust, activeBankInfo, maxAmount]
-  );
+  const maxAmount = activeBankInfo.position.isLending
+    ? activeBankInfo.userInfo.maxWithdraw
+    : activeBankInfo.userInfo.maxRepay;
+  const isDust = uiToNative(activeBankInfo.position.amount, activeBankInfo.info.state.mintDecimals).isZero();
+  const showCloseBalance = activeBankInfo.position.isLending && isDust;
+  const isActionDisabled = maxAmount === 0 && !showCloseBalance;
 
   const closeBalance = useCallback(async () => {
     if (!marginfiAccount) {
@@ -194,16 +183,16 @@ const UserPositionRow: FC<UserPositionRowProps> = ({ activeBankInfo, marginfiAcc
           setValue={setWithdrawOrRepayAmount}
           maxValue={maxAmount}
           maxDecimals={activeBankInfo.info.state.mintDecimals}
-          disabled={maxAmount === 0 || isDisabled}
+          disabled={showCloseBalance || isActionDisabled}
           onEnter={withdrawOrRepay}
         />
       </TableCell>
 
       <TableCell className="text-white font-aeonik p-0 border-none" align="right">
         <div className="h-full w-full flex justify-end items-center pl-2 sm:px-2">
           <UserPositionRowAction
-            onClick={isDust ? closeBalance : withdrawOrRepay}
-            disabled={maxAmount === 0 || isDisabled}
+            onClick={showCloseBalance ? closeBalance : withdrawOrRepay}
+            disabled={isActionDisabled}
           >
             {isDust ? "Close" : activeBankInfo.position.isLending ? "Withdraw" : "Repay"}
           </UserPositionRowAction>