From b1a8b22af2f231f3c960356ea4ce8c733c32ad7d Mon Sep 17 00:00:00 2001
From: chambaz <adammchambers@gmail.com>
Date: Wed, 27 Nov 2024 11:29:57 -0500
Subject: [PATCH] feat: add usd value to actionbox / improve numeral formatting

---
 .../mrgn-common/src/utils/formatters.utils.ts |  3 +++
 .../components/action-input/action-input.tsx  | 12 +++++++--
 .../lending-action/lending-action.tsx         |  4 +--
 .../lend-box/components/preview/preview.tsx   |  7 ++++++
 .../actions/lend-box/lend-box.tsx             |  1 +
 .../components/repay-action/repay-action.tsx  | 10 ++++----
 .../components/preview/preview.tsx            |  9 +++++++
 .../utils/stats-preview.utils.tsx             | 25 +++++++++++++++++--
 8 files changed, 60 insertions(+), 11 deletions(-)

diff --git a/packages/mrgn-common/src/utils/formatters.utils.ts b/packages/mrgn-common/src/utils/formatters.utils.ts
index 9950d657ed..d21ef3eaf5 100644
--- a/packages/mrgn-common/src/utils/formatters.utils.ts
+++ b/packages/mrgn-common/src/utils/formatters.utils.ts
@@ -105,6 +105,9 @@ const clampedNumeralFormatter = (value: number) => {
 };
 
 const tokenPriceFormatter = (price: number, style: "currency" | "decimal" = "currency") => {
+  if (price === 0) {
+    return 0;
+  }
   const reformatNum = Number(price.toFixed(20));
 
   if (reformatNum < 0.00000001) {
diff --git a/packages/mrgn-ui/src/components/action-box-v2/actions/lend-box/components/action-input/action-input.tsx b/packages/mrgn-ui/src/components/action-box-v2/actions/lend-box/components/action-input/action-input.tsx
index 844864766a..740f0f9521 100644
--- a/packages/mrgn-ui/src/components/action-box-v2/actions/lend-box/components/action-input/action-input.tsx
+++ b/packages/mrgn-ui/src/components/action-box-v2/actions/lend-box/components/action-input/action-input.tsx
@@ -2,6 +2,7 @@ import React from "react";
 
 import { ActionType, ExtendedBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";
 import { formatAmount } from "@mrgnlabs/mrgn-utils";
+import { usdFormatter, tokenPriceFormatter } from "@mrgnlabs/mrgn-common";
 
 import { Input } from "~/components/ui/input";
 
@@ -9,6 +10,7 @@ import { LendingAction, BankSelect } from "./components";
 
 type ActionInputProps = {
   amountRaw: string;
+  amount: number | null;
   nativeSolBalance: number;
   walletAmount: number | undefined;
   maxAmount: number;
@@ -38,6 +40,7 @@ export const ActionInput = ({
   showTokenSelection,
   showTokenSelectionGroups,
   amountRaw,
+  amount,
   selectedBank,
   lendMode,
   setAmountRaw,
@@ -85,7 +88,7 @@ export const ActionInput = ({
             connected={connected}
           />
         </div>
-        <div className="flex-auto">
+        <div className="flex-auto flex flex-col gap-0 items-end">
           <Input
             type="text"
             ref={amountInputRef}
@@ -94,8 +97,13 @@ export const ActionInput = ({
             disabled={isInputDisabled}
             onChange={(e) => handleInputChange(e.target.value)}
             placeholder="0"
-            className="bg-transparent shadow-none min-w-[130px] text-right outline-none focus-visible:outline-none focus-visible:ring-0 border-none text-base font-medium"
+            className="bg-transparent shadow-none min-w-[130px] text-right h-auto py-0 pr-0 outline-none focus-visible:outline-none focus-visible:ring-0 border-none text-base font-medium"
           />
+          {amount !== null && amount > 0 && selectedBank && (
+            <span className="text-xs text-muted-foreground font-normal">
+              {tokenPriceFormatter(amount * selectedBank.info.oraclePrice.priceRealtime.price.toNumber())}
+            </span>
+          )}
         </div>
       </div>
       <LendingAction
diff --git a/packages/mrgn-ui/src/components/action-box-v2/actions/lend-box/components/action-input/components/lending-action/lending-action.tsx b/packages/mrgn-ui/src/components/action-box-v2/actions/lend-box/components/action-input/components/lending-action/lending-action.tsx
index 5b7438055a..9dda8b41d6 100644
--- a/packages/mrgn-ui/src/components/action-box-v2/actions/lend-box/components/action-input/components/lending-action/lending-action.tsx
+++ b/packages/mrgn-ui/src/components/action-box-v2/actions/lend-box/components/action-input/components/lending-action/lending-action.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 import { ActionType, ExtendedBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";
-import { clampedNumeralFormatter } from "@mrgnlabs/mrgn-common";
+import { dynamicNumeralFormatter } from "@mrgnlabs/mrgn-common";
 
 type LendingActionProps = {
   walletAmount: number | undefined;
@@ -35,7 +35,7 @@ export const LendingAction = ({
     }
 
     const formatAmount = (amount?: number, symbol?: string) =>
-      amount !== undefined ? `${clampedNumeralFormatter(amount)} ${symbol}` : "-";
+      amount !== undefined ? `${dynamicNumeralFormatter(amount)} ${symbol}` : "-";
 
     switch (lendMode) {
       case ActionType.Deposit:
diff --git a/packages/mrgn-ui/src/components/action-box-v2/actions/lend-box/components/preview/preview.tsx b/packages/mrgn-ui/src/components/action-box-v2/actions/lend-box/components/preview/preview.tsx
index c2076086ed..7ae0145aed 100644
--- a/packages/mrgn-ui/src/components/action-box-v2/actions/lend-box/components/preview/preview.tsx
+++ b/packages/mrgn-ui/src/components/action-box-v2/actions/lend-box/components/preview/preview.tsx
@@ -7,6 +7,7 @@ import { ActionStatItem } from "~/components/action-box-v2/components";
 import type { HidePoolStats } from "~/components/action-box-v2";
 import {
   getAmountStat,
+  getAmountUsdStat,
   getHealthStat,
   getLiquidationStat,
   getPoolSizeStat,
@@ -78,6 +79,12 @@ function generateLendingStats(
         summary.actionPreview.positionAmount,
         bank.meta.tokenSymbol,
         summary.simulationPreview?.positionAmount
+      ),
+      getAmountUsdStat(
+        summary.actionPreview.positionAmount,
+        bank.meta.tokenSymbol,
+        bank.info.oraclePrice.priceRealtime.price.toNumber(),
+        summary.simulationPreview?.positionAmount
       )
     );
   }
diff --git a/packages/mrgn-ui/src/components/action-box-v2/actions/lend-box/lend-box.tsx b/packages/mrgn-ui/src/components/action-box-v2/actions/lend-box/lend-box.tsx
index 6adf36eab4..a685ef6122 100644
--- a/packages/mrgn-ui/src/components/action-box-v2/actions/lend-box/lend-box.tsx
+++ b/packages/mrgn-ui/src/components/action-box-v2/actions/lend-box/lend-box.tsx
@@ -476,6 +476,7 @@ export const LendBox = ({
           nativeSolBalance={nativeSolBalance}
           walletAmount={walletAmount}
           amountRaw={amountRaw}
+          amount={debouncedAmount}
           maxAmount={maxAmount}
           connected={connected}
           selectedBank={selectedBank}
diff --git a/packages/mrgn-ui/src/components/action-box-v2/actions/repay-collat-box/components/action-input/components/repay-action/repay-action.tsx b/packages/mrgn-ui/src/components/action-box-v2/actions/repay-collat-box/components/action-input/components/repay-action/repay-action.tsx
index 50b150445d..cbb932eb61 100644
--- a/packages/mrgn-ui/src/components/action-box-v2/actions/repay-collat-box/components/action-input/components/repay-action/repay-action.tsx
+++ b/packages/mrgn-ui/src/components/action-box-v2/actions/repay-collat-box/components/action-input/components/repay-action/repay-action.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { IconArrowRight } from "@tabler/icons-react";
 
 import { ExtendedBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";
-import { clampedNumeralFormatter, numeralFormatter } from "@mrgnlabs/mrgn-common";
+import { clampedNumeralFormatter, dynamicNumeralFormatter } from "@mrgnlabs/mrgn-common";
 
 type RepayActionProps = {
   amountRaw: string;
@@ -28,7 +28,7 @@ export const RepayAction = ({
     showWalletIcon?: boolean;
     label?: string;
   } => {
-    const amountLeft = numeralFormatter(selectedBank?.isActive ? selectedBank.position.amount - repayAmount : 0);
+    const amountLeft = dynamicNumeralFormatter(selectedBank?.isActive ? selectedBank.position.amount - repayAmount : 0);
     return {
       amount: `${amountLeft} ${selectedBank?.meta.tokenSymbol}`,
       label: "Borrowed: ",
@@ -43,7 +43,7 @@ export const RepayAction = ({
         <ul className="flex flex-col gap-0.5 mt-4 text-xs w-full text-muted-foreground">
           <li className="flex justify-between items-center gap-1.5">
             <strong className="mr-auto">{maxLabel.label}</strong>
-            <div className="flex space-x-1">
+            <div className="flex space-x-1 items-center">
               {selectedBank?.isActive && !isUnchanged && (
                 <div>{clampedNumeralFormatter(selectedBank.position.amount)}</div>
               )}
@@ -64,11 +64,11 @@ export const RepayAction = ({
             <strong>Deposited:</strong>
 
             <div className="flex space-x-1.5 items-center">
-              {selectedSecondaryBank?.isActive ? selectedSecondaryBank.position.amount : 0}
+              {selectedSecondaryBank?.isActive ? dynamicNumeralFormatter(selectedSecondaryBank.position.amount) : 0}
               {selectedSecondaryBank?.isActive && !isUnchanged && <IconArrowRight width={12} height={12} />}
               {selectedSecondaryBank?.isActive &&
                 !isUnchanged &&
-                selectedSecondaryBank.position.amount - Number(amountRaw)}{" "}
+                dynamicNumeralFormatter(selectedSecondaryBank.position.amount - Number(amountRaw))}{" "}
               {selectedSecondaryBank?.meta.tokenSymbol}
             </div>
           </li>
diff --git a/packages/mrgn-ui/src/components/action-box-v2/actions/repay-collat-box/components/preview/preview.tsx b/packages/mrgn-ui/src/components/action-box-v2/actions/repay-collat-box/components/preview/preview.tsx
index d9f98c036d..87e6209f23 100644
--- a/packages/mrgn-ui/src/components/action-box-v2/actions/repay-collat-box/components/preview/preview.tsx
+++ b/packages/mrgn-ui/src/components/action-box-v2/actions/repay-collat-box/components/preview/preview.tsx
@@ -6,6 +6,7 @@ import { cn } from "@mrgnlabs/mrgn-utils";
 import { ActionStatItem } from "~/components/action-box-v2/components";
 import {
   getAmountStat,
+  getAmountUsdStat,
   getHealthStat,
   getLiquidationStat,
   getPoolSizeStat,
@@ -65,6 +66,14 @@ function generateRepayCollatStats(summary: ActionSummary, bank: ExtendedBankInfo
       summary.simulationPreview?.positionAmount
     )
   );
+  stats.push(
+    getAmountUsdStat(
+      summary.actionPreview.positionAmount,
+      bank.meta.tokenSymbol,
+      bank.info.oraclePrice.priceRealtime.price.toNumber(),
+      summary.simulationPreview?.positionAmount
+    )
+  );
   if (summary.actionPreview.priceImpactPct) stats.push(getPriceImpactStat(summary.actionPreview.priceImpactPct));
   if (summary.actionPreview.slippageBps) stats.push(getSlippageStat(summary.actionPreview.slippageBps));
 
diff --git a/packages/mrgn-ui/src/components/action-box-v2/utils/stats-preview.utils.tsx b/packages/mrgn-ui/src/components/action-box-v2/utils/stats-preview.utils.tsx
index 580fd7d8e1..44ccfbd8cb 100644
--- a/packages/mrgn-ui/src/components/action-box-v2/utils/stats-preview.utils.tsx
+++ b/packages/mrgn-ui/src/components/action-box-v2/utils/stats-preview.utils.tsx
@@ -5,10 +5,13 @@ import { getPriceWithConfidence } from "@mrgnlabs/marginfi-client-v2";
 import { ActiveBankInfo, ExtendedBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";
 import {
   clampedNumeralFormatter,
+  dynamicNumeralFormatter,
   numeralFormatter,
   percentFormatter,
   percentFormatterDyn,
+  tokenPriceFormatter,
   usdFormatter,
+  usdFormatterDyn,
 } from "@mrgnlabs/mrgn-common";
 import { cn } from "@mrgnlabs/mrgn-utils";
 
@@ -36,9 +39,27 @@ export function getAmountStat(currentAmount: number, symbol: string, simulatedAm
     label: "Your amount",
     value: () => (
       <>
-        {clampedNumeralFormatter(currentAmount)} {symbol}
+        {dynamicNumeralFormatter(currentAmount)} {symbol}
         {simulatedAmount !== undefined ? <IconArrowRight width={12} height={12} /> : <></>}
-        {simulatedAmount !== undefined ? clampedNumeralFormatter(simulatedAmount) + " " + symbol : <></>}
+        {simulatedAmount !== undefined ? dynamicNumeralFormatter(simulatedAmount) + " " + symbol : <></>}
+      </>
+    ),
+  };
+}
+
+export function getAmountUsdStat(
+  currentAmount: number,
+  symbol: string,
+  price: number,
+  simulatedAmount?: number
+): PreviewStat {
+  return {
+    label: "USD Value",
+    value: () => (
+      <>
+        {tokenPriceFormatter(currentAmount)}
+        {simulatedAmount !== undefined ? <IconArrowRight width={12} height={12} /> : <></>}
+        {simulatedAmount !== undefined ? tokenPriceFormatter(simulatedAmount * price) : <></>}
       </>
     ),
   };