feat(mfi-v2-ui): portfolio upgrades

apps/marginfi-v2-ui/src/components/common/Portfolio/components/asset-card/portfolio-asset-card.tsx

@@ -3,7 +3,12 @@ import React from "react";
 import Image from "next/image";
 import { IconAlertTriangle, IconFolderShare } from "@tabler/icons-react";
 
-import { usdFormatter, dynamicNumeralFormatter, groupedNumberFormatter } from "@mrgnlabs/mrgn-common";
+import {
+  usdFormatter,
+  dynamicNumeralFormatter,
+  groupedNumberFormatter,
+  tokenPriceFormatter,
+} from "@mrgnlabs/mrgn-common";
 import { ActiveBankInfo, ActionType, ExtendedBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";
 import { capture } from "@mrgnlabs/mrgn-utils";
 import { ActionBox } from "@mrgnlabs/mrgn-ui";
@@ -94,11 +99,16 @@ export const PortfolioAssetCard = ({ bank, isInLendingMode, isBorrower = true }:
                   </dd>
                 </dl>
               </div>
-              <div className="font-medium text-lg mr-2">
-                {dynamicNumeralFormatter(bank.position.amount, {
-                  tokenPrice: bank.info.oraclePrice.priceRealtime.price.toNumber(),
-                })}
-                {" " + bank.meta.tokenSymbol}
+              <div className="flex flex-col items-end mr-2">
+                <div className="font-medium text-lg">
+                  {dynamicNumeralFormatter(bank.position.amount, {
+                    tokenPrice: bank.info.oraclePrice.priceRealtime.price.toNumber(),
+                  })}
+                  {" " + bank.meta.tokenSymbol}
+                </div>
+                <span className="text-muted-foreground font-normal text-sm">
+                  {usdFormatter.format(bank.position.usdValue)}
+                </span>
               </div>
             </div>
             <div className="flex flex-row w-full gap-2">
@@ -143,15 +153,13 @@ export const PortfolioAssetCard = ({ bank, isInLendingMode, isBorrower = true }:
             <dl className="grid grid-cols-2 gap-y-0.5">
               <dt className="text-muted-foreground">Value</dt>
               <dd className="text-right text-white">
-                {bank.position.amount < 0.01 ? "< $0.01" : groupedNumberFormatter.format(bank.position.amount)}
+                {groupedNumberFormatter.format(bank.position.amount)}
                 {" " + bank.meta.tokenSymbol}
               </dd>
               <dt className="text-muted-foreground">USD value</dt>
-              <dd className="text-right text-white">
-                {bank.position.usdValue < 0.01 ? "< $0.01" : usdFormatter.format(bank.position.usdValue)}
-              </dd>
+              <dd className="text-right text-white">{usdFormatter.format(bank.position.usdValue)}</dd>
               <dt className="text-muted-foreground">Current price</dt>
-              <dd className="text-right text-white">{usdFormatter.format(bank.info.state.price)}</dd>
+              <dd className="text-right text-white">{tokenPriceFormatter(bank.info.state.price)}</dd>
               {bank.position.liquidationPrice && (
                 <>
                   <dt className="text-muted-foreground">Liquidation price</dt>
@@ -162,9 +170,7 @@ export const PortfolioAssetCard = ({ bank, isInLendingMode, isBorrower = true }:
                     )}
                   >
                     {isUserPositionPoorHealth && <IconAlertTriangle width={"16px"} height={"16px"} />}
-                    {bank.position.liquidationPrice > 0.01
-                      ? usdFormatter.format(bank.position.liquidationPrice)
-                      : `$${bank.position.liquidationPrice.toExponential(2)}`}
+                    {tokenPriceFormatter(bank.position.liquidationPrice)}
                   </dd>
                 </>
               )}

apps/marginfi-v2-ui/src/components/common/Portfolio/lending-portfolio.tsx

@@ -334,9 +334,9 @@ export const LendingPortfolio = () => {
         </div>
         <div className="flex flex-col md:flex-row justify-between flex-wrap gap-8 md:gap-20">
           <div className="flex flex-col flex-1 gap-4 md:min-w-[340px]">
-            <dl className="flex justify-between items-center gap-2 ">
-              <dt className="text-xl font-medium">Supplied</dt>
-              <dt className="text-muted-foreground">{accountSupplied}</dt>
+            <dl className="flex justify-between items-center gap-2 text-xl font-medium">
+              <dt>Supplied</dt>
+              <dd className="text-lg">{accountSupplied}</dd>
             </dl>
             {isStoreInitialized ? (
               lendingBanks.length > 0 ? (
@@ -360,9 +360,9 @@ export const LendingPortfolio = () => {
             )}
           </div>
           <div className="flex flex-col flex-1 gap-4 md:min-w-[340px]">
-            <dl className="flex justify-between items-center gap-2">
-              <dt className="text-xl font-medium">Borrowed</dt>
-              <dt className="text-muted-foreground">{accountBorrowed}</dt>
+            <dl className="flex justify-between items-center gap-2 text-xl font-medium">
+              <dt>Borrowed</dt>
+              <dd className="text-lg">{accountBorrowed}</dd>
             </dl>
             {isStoreInitialized ? (
               borrowingBanks.length > 0 ? (

packages/mrgn-common/src/utils/formatters.utils.ts

@@ -16,7 +16,7 @@ class CustomNumberFormat extends Intl.NumberFormat {
 
 const groupedNumberFormatter = new CustomNumberFormat("en-US", {
   useGrouping: true,
-  minimumFractionDigits: 2,
+  minimumFractionDigits: 0,
   maximumFractionDigits: 2,
 });
 
@@ -43,11 +43,11 @@ export const dynamicNumeralFormatter = (value: number, options: dynamicNumeralFo
   }
 
   if (Math.abs(value) >= 0.01) {
-    return numeral(value).format("0.00a");
+    return numeral(value).format("0,0.[0000]a");
   }
 
   if (tokenPrice) {
-    const minUsdDisplay = 0.01;
+    const minUsdDisplay = 0.00000001;
     const smallestUnit = minUsdDisplay / tokenPrice;
 
     const requiredDecimals = Math.max(2, Math.ceil(-Math.log10(smallestUnit)) + 1);
@@ -110,6 +110,10 @@ const tokenPriceFormatter = (price: number, style: "currency" | "decimal" = "cur
   }
   const reformatNum = Number(price.toFixed(20));
 
+  if (price === 0) {
+    return 0;
+  }
+
   if (reformatNum < 0.00000001) {
     return price.toExponential(2);
   }

packages/mrgn-ui/src/components/action-complete/screens/lending-screen.tsx

@@ -85,14 +85,23 @@ export const LendingScreen = ({ amount, bank, type, txn, txnLink, collatRepay }:
           <h3 className="text-2xl font-medium text-center">
             {type === ActionType.RepayCollat ? (
               <>
-                You repaid {dynamicNumeralFormatter(amount ?? 0, { minDisplay: 0.01 })}{" "}
+                You repaid{" "}
+                {dynamicNumeralFormatter(amount, {
+                  tokenPrice: collatRepay?.borrowBank.info.state.price,
+                })}{" "}
                 {bank?.meta.tokenSymbol.toUpperCase()} with{" "}
-                {dynamicNumeralFormatter(collatRepay?.withdrawAmount ?? 0, { minDisplay: 0.01 })}{" "}
+                {dynamicNumeralFormatter(collatRepay?.withdrawAmount ?? 0, {
+                  tokenPrice: collatRepay?.withdrawBank.info.state.price,
+                })}{" "}
                 {collatRepay?.withdrawBank.meta.tokenSymbol.toUpperCase()}
               </>
             ) : (
               <>
-                You {type === ActionType.Deposit ? "deposited" : "borrowed"} {amount} {bank?.meta.tokenSymbol}
+                You {type === ActionType.Deposit ? "deposited" : "borrowed"}{" "}
+                {dynamicNumeralFormatter(amount, {
+                  tokenPrice: bank?.info.state.price,
+                })}{" "}
+                {bank?.meta.tokenSymbol}
               </>
             )}
           </h3>

packages/mrgn-ui/src/components/action-complete/screens/loop-screen.tsx

@@ -76,9 +76,9 @@ export const LoopScreen = ({
 
         <div className="flex flex-col gap-2 justify-center items-center">
           <h3 className="text-2xl font-medium">
-            You looped {dynamicNumeralFormatter(depositAmount, { minDisplay: 0.01 })}{" "}
+            You looped {dynamicNumeralFormatter(depositAmount)}{" "}
             {depositBank.meta.tokenSymbol.toUpperCase()} with{" "}
-            {dynamicNumeralFormatter(borrowAmount, { minDisplay: 0.01 })} {borrowBank.meta.tokenSymbol.toUpperCase()}
+            {dynamicNumeralFormatter(borrowAmount)} {borrowBank.meta.tokenSymbol.toUpperCase()}
           </h3>
           <h4 className="text-xl text-muted-foreground">Leverage: {leverage}x</h4>
         </div>

packages/mrgn-ui/src/components/action-complete/screens/stake-screen.tsx

@@ -1,9 +1,11 @@
 import React from "react";
 import Link from "next/link";
+import Image from "next/image";
+
 import { IconExternalLink } from "@tabler/icons-react";
 
 import { ActionType, ExtendedBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";
-import { numeralFormatter, shortenAddress } from "@mrgnlabs/mrgn-common";
+import { dynamicNumeralFormatter, shortenAddress } from "@mrgnlabs/mrgn-common";
 
 import { IconSol, IconLST } from "~/components/ui/icons";
 
@@ -21,18 +23,50 @@ interface Props {
 export const StakingScreen = ({ amount, type, txn, originDetails, txnLink }: Props) => {
   return (
     <>
-      <div className="flex flex-col items-center gap-2 border-b border-border pb-10">
-        <div className="flex items-center justify-center gap-2">
-          <h3 className="text-4xl font-medium">
-            {amount <= 0.01 ? "<0.01" : numeralFormatter(amount)} {type === ActionType.MintLST ? "LST" : "SOL"}
-          </h3>
-          {type === ActionType.MintLST ? <IconLST size={32} /> : <IconSol />}
+      <div className="flex flex-col items-center gap-4 border-b border-border pb-10">
+        <div className="flex items-center">
+          <Image
+            className="rounded-full"
+            src={originDetails.bank.meta.tokenLogoUri}
+            alt={(originDetails.bank.meta.tokenLogoUri || "Token") + "  logo"}
+            width={48}
+            height={48}
+          />
+          {type === ActionType.MintLST ? (
+            <IconLST size={48} className="-ml-2 relative z-10" />
+          ) : (
+            <IconSol size={48} className="-ml-2 relative z-10" />
+          )}
         </div>
+        <h3 className="text-2xl font-medium">
+          {/* {dynamicNumeralFormatter(amount)} {type === ActionType.MintLST ? "LST" : "SOL"} */}
+          {type === ActionType.MintLST
+            ? `You staked ${dynamicNumeralFormatter(originDetails.amount, {
+                minDisplay: 0.01,
+              })} ${originDetails.bank.meta.tokenSymbol.toUpperCase()} for ${dynamicNumeralFormatter(amount, {
+                minDisplay: 0.01,
+              })} LST`
+            : `You swapped ${dynamicNumeralFormatter(originDetails.amount, {
+                minDisplay: 0.01,
+              })} LST for ${dynamicNumeralFormatter(amount, {
+                minDisplay: 0.01,
+              })} SOL`}
+        </h3>
       </div>
       <dl className="grid grid-cols-2 w-full text-muted-foreground gap-x-8 gap-y-2">
         <dt>Paid</dt>
         <dt className="text-right">
-          {numeralFormatter(originDetails?.amount)} {originDetails?.bank.meta.tokenSymbol}
+          {dynamicNumeralFormatter(originDetails?.amount, {
+            minDisplay: 0.01,
+          })}{" "}
+          {originDetails?.bank.meta.tokenSymbol}
+        </dt>
+        <dt>Received</dt>
+        <dt className="text-right">
+          {dynamicNumeralFormatter(amount, {
+            minDisplay: 0.01,
+          })}{" "}
+          {type === ActionType.MintLST ? "LST" : "SOL"}
         </dt>
 
         <dd>Transaction</dd>

packages/mrgn-ui/src/components/ui/accordion.tsx

@@ -30,7 +30,7 @@ const AccordionTrigger = React.forwardRef<
       {...props}
     >
       {children}
-      <div className={cn(variant === "default" && "", variant === "portfolio" && "h-full pt-4")}>
+      <div className={cn(variant === "default" && "", variant === "portfolio" && "h-full pt-2")}>
         <ChevronDown
           className={cn("shrink-0 transition-transform duration-200", variant === "wallet" ? "h-6 w-6" : "h-4 w-4")}
         />