fix: [GSW-1987] Swap Confirm Modal UI

gnoswap-labs · Dec 31, 2024 · cec71f4 · cec71f4
1 parent 0c7ae79
commit cec71f4
Showing 1 changed file with 33 additions and 13 deletions.
diff --git a/packages/web/src/components/swap/confirm-swap-modal/ConfirmSwapModal.tsx b/packages/web/src/components/swap/confirm-swap-modal/ConfirmSwapModal.tsx
@@ -14,8 +14,8 @@ import { PriceImpactStatus } from "@hooks/swap/data/use-swap-handler";
 import { SwapResultInfo } from "@models/swap/swap-result-info";
 import { swapDirectionToGuaranteedType, SwapSummaryInfo } from "@models/swap/swap-summary-info";
 import { SwapTokenInfo } from "@models/swap/swap-token-info";
-import { formatOtherPrice } from "@utils/new-number-utils";
-import { toNumberFormat } from "@utils/number-utils";
+import { floorNumber, toNumberFormat } from "@utils/number-utils";
+import { convertToKMB } from "@utils/stake-position-utils";
 
 import { convertSwapRate } from "../swap-card-content-detail/SwapCardContentDetail";
 
@@ -55,23 +55,27 @@ const ConfirmSwapModal: React.FC<ConfirmSwapModalProps> = ({
   const { t } = useTranslation();
 
   const swapRateDescription = useMemo(() => {
-    const { tokenA, tokenB, swapRate } = swapSummaryInfo;
+    const { tokenA, tokenB, swapRate, swapRateAction } = swapSummaryInfo;
+
+    if (swapRateAction === "ATOB") {
+      return (
+        <>
+          1&nbsp;{tokenA.symbol}&nbsp;=&nbsp;
+          <ExchangeRate value={convertSwapRate(swapRate)} />
+          &nbsp;{tokenB.symbol}
+        </>
+      );
+    }
+
     return (
       <>
-        1&nbsp;{tokenA.symbol}&nbsp;=&nbsp;
+        1&nbsp;{tokenB.symbol}&nbsp;=&nbsp;
         <ExchangeRate value={convertSwapRate(swapRate)} />
-        &nbsp;{tokenB.symbol}
+        &nbsp;{tokenA.symbol}
       </>
     );
   }, [swapSummaryInfo]);
 
-  const swapRateUSDStr = useMemo(() => {
-    const swapRateStr = formatOtherPrice(swapSummaryInfo.swapRateUSD, {
-      isKMB: false,
-    });
-    return `(${swapRateStr})`;
-  }, [swapSummaryInfo.swapRateUSD]);
-
   const priceImpactStr = useMemo(() => {
     const priceImpact = swapSummaryInfo.priceImpact;
     return `${priceImpact}%`;
@@ -123,6 +127,22 @@ const ConfirmSwapModal: React.FC<ConfirmSwapModalProps> = ({
     }
   }, [priceImpactStatus, t]);
 
+  const unitSwapPrice = useMemo(() => {
+    const { swapRateAction, swapRate } = swapSummaryInfo;
+    const { tokenAUSD, tokenBUSD, tokenAAmount, tokenBAmount } = swapTokenInfo;
+    if (swapRateAction === "ATOB") {
+      if (!tokenBUSD || tokenBUSD === 0) return "-";
+      return `($${convertToKMB(floorNumber((tokenBUSD / Number(tokenBAmount)) * swapRate).toFixed(3), {
+        isIgnoreKFormat: true,
+      })})`;
+    } else {
+      if (!tokenAUSD || tokenAUSD === 0) return "-";
+      return `($${convertToKMB(floorNumber((tokenAUSD / Number(tokenAAmount)) * swapRate).toFixed(3), {
+        isIgnoreKFormat: true,
+      })})`;
+    }
+  }, [swapSummaryInfo, swapTokenInfo]);
+
   return (
     <ConfirmModal>
       <div
@@ -193,7 +213,7 @@ const ConfirmSwapModal: React.FC<ConfirmSwapModalProps> = ({
           <div className="swap-info">
             <div className="coin-info">
               <span className="gnos-price">{swapRateDescription}</span>
-              <span className="exchange-price">{swapRateUSDStr}</span>
+              <span className="exchange-price">{unitSwapPrice}</span>
             </div>
           </div>
           <div className="gas-info">