feat: TODO's & QA fixes

mrgnlabs · Dec 13, 2024 · 2de1af4 · 2de1af4
1 parent b7dea1b
commit 2de1af4
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 33 deletions.
diff --git a/...fi-v2-trading/src/components/common/trade-box-v2/components/amount-input/amount-input.tsx b/...fi-v2-trading/src/components/common/trade-box-v2/components/amount-input/amount-input.tsx
@@ -1,10 +1,8 @@
 import React from "react";
 
-import { ExtendedBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";
 import { Input } from "~/components/ui/input";
 import { MaxAction } from "./components";
 import { ArenaBank } from "~/store/tradeStoreV2";
-import { tokenPriceFormatter } from "@mrgnlabs/mrgn-common";
 
 interface AmountInputProps {
   maxAmount: number;

diff --git a/...mponents/common/trade-box-v2/components/amount-input/components/max-action/max-action.tsx b/...mponents/common/trade-box-v2/components/amount-input/components/max-action/max-action.tsx
@@ -1,5 +1,4 @@
-import { ExtendedBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";
-import { clampedNumeralFormatter } from "@mrgnlabs/mrgn-common";
+import { dynamicNumeralFormatter } from "@mrgnlabs/mrgn-common";
 import React from "react";
 import { ArenaBank } from "~/store/tradeStoreV2";
 
@@ -11,8 +10,6 @@ interface TradeActionProps {
 }
 
 export const MaxAction = ({ maxAmount, collateralBank, setAmount }: TradeActionProps) => {
-  const numberFormater = React.useMemo(() => new Intl.NumberFormat("en-US", { maximumFractionDigits: 10 }), []); // TODO: remove this
-
   const maxLabel = React.useMemo((): {
     amount: string;
     showWalletIcon?: boolean;
@@ -26,7 +23,7 @@ export const MaxAction = ({ maxAmount, collateralBank, setAmount }: TradeActionP
     }
 
     const formatAmount = (maxAmount?: number, symbol?: string) =>
-      maxAmount !== undefined ? `${clampedNumeralFormatter(maxAmount)} ${symbol?.toUpperCase()}` : "-"; // TODO: use dynamicNumeralFormatter
+      maxAmount !== undefined ? `${dynamicNumeralFormatter(maxAmount)} ${symbol?.toUpperCase()}` : "-";
 
     return {
       amount: formatAmount(maxAmount, collateralBank.meta.tokenSymbol),
@@ -45,7 +42,9 @@ export const MaxAction = ({ maxAmount, collateralBank, setAmount }: TradeActionP
               <button
                 className="cursor-pointer border-b border-transparent transition text-mfi-action-box-highlight hover:border-mfi-action-box-highlight"
                 disabled={maxAmount === 0}
-                onClick={() => setAmount(numberFormater.format(maxAmount))}
+                onClick={() => {
+                  setAmount(maxAmount.toString());
+                }}
               >
                 MAX
               </button>

diff --git a/...2-trading/src/components/common/trade-box-v2/components/amount-preview/amount-preview.tsx b/...2-trading/src/components/common/trade-box-v2/components/amount-preview/amount-preview.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { numeralFormatter } from "@mrgnlabs/mrgn-common";
+import { dynamicNumeralFormatter } from "@mrgnlabs/mrgn-common";
 import { cn } from "@mrgnlabs/mrgn-utils";
 
 import { IconLoader } from "~/components/ui/icons";
@@ -9,7 +9,7 @@ import { ArenaBank } from "~/store/tradeStoreV2";
 interface AmountPreviewProps {
   tradeSide: "long" | "short";
   selectedBank: ArenaBank | null;
-  amount?: number;
+  amount: number;
   isLoading?: boolean;
 }
 
@@ -18,18 +18,7 @@ export const AmountPreview = ({ tradeSide, amount, isLoading, selectedBank }: Am
     <div className="flex flex-col gap-6">
       <dl className="grid grid-cols-2 gap-y-2 text-base">
         <Stat label={`Size of ${tradeSide}`}>
-          {isLoading ? (
-            <IconLoader size={16} />
-          ) : amount ? (
-            amount < 0.01 && amount > 0 ? (
-              "< 0.01"
-            ) : (
-              numeralFormatter(amount)
-            )
-          ) : (
-            "-"
-          )}{" "}
-          {/* TODO: get rid of the amount check above and use dynamicnumeralformatter */}
+          {isLoading ? <IconLoader size={16} /> : dynamicNumeralFormatter(amount)}{" "}
           {selectedBank?.meta.tokenSymbol.toUpperCase()}
         </Stat>
       </dl>

diff --git a/apps/marginfi-v2-trading/src/components/common/trade-box-v2/hooks/use-trade-simulation.ts b/apps/marginfi-v2-trading/src/components/common/trade-box-v2/hooks/use-trade-simulation.ts
@@ -142,10 +142,6 @@ export function useTradeSimulation({
 
         if (loopingResult && "actionQuote" in loopingResult) {
           setActionTxns(loopingResult);
-          handleSimulation([
-            ...(actionTxns?.additionalTxns ?? []),
-            ...(actionTxns?.actionTxn ? [actionTxns?.actionTxn] : []),
-          ]);
         } else {
           const errorMessage =
             loopingResult ??
@@ -200,6 +196,20 @@ export function useTradeSimulation({
     }
   }, [debouncedAmount, debouncedLeverage, fetchTradeTxns, prevDebouncedAmount, prevDebouncedLeverage]);
 
+  React.useEffect(() => {
+    // Only run simulation if we have transactions to simulate
+    if (actionTxns?.actionTxn || (actionTxns?.additionalTxns?.length ?? 0) > 0) {
+      handleSimulation([
+        ...(actionTxns?.additionalTxns ?? []),
+        ...(actionTxns?.actionTxn ? [actionTxns?.actionTxn] : []),
+      ]);
+    } else {
+      // If no transactions, move back to idle state
+      setIsLoading({ isLoading: false, status: SimulationStatus.IDLE });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [actionTxns]);
+
   // Fetch max leverage based when the secondary bank changes
   React.useEffect(() => {
     if (!selectedSecondaryBank) {

diff --git a/apps/marginfi-v2-trading/src/components/common/trade-box-v2/trade-box.tsx b/apps/marginfi-v2-trading/src/components/common/trade-box-v2/trade-box.tsx
@@ -418,12 +418,14 @@ export const TradeBoxV2 = ({ activePool, side = "long" }: TradeBoxV2Props) => {
             maxLeverage={maxLeverage}
             setLeverageAmount={setLeverage}
           />
-          <AmountPreview
-            tradeSide={tradeState}
-            amount={leveragedAmount}
-            isLoading={isLoading}
-            selectedBank={activePoolExtended.tokenBank}
-          />
+          {leveragedAmount > 0 && (
+            <AmountPreview
+              tradeSide={tradeState}
+              amount={leveragedAmount}
+              isLoading={isLoading}
+              selectedBank={activePoolExtended.tokenBank}
+            />
+          )}
           {actionMethods && actionMethods.concat(additionalActionMessages).some((method) => method.description) && (
             <InfoMessages
               connected={connected}

diff --git a/packages/mrgn-common/src/utils/formatters.utils.ts b/packages/mrgn-common/src/utils/formatters.utils.ts
@@ -46,7 +46,7 @@ export const dynamicNumeralFormatter = (value: number, options: dynamicNumeralFo
     return numeral(value).format("0,0.[00]a");
   }
 
-  if (Math.abs(value) >= 0.01) {
+  if (Math.abs(value) >= minDisplay) {
     return numeral(value).format("0,0.[0000]a");
   }