[GSW-1987] optimize swap route (#596)

* fix: [GSW-1987] Improve SwapRoute FE * fix: [GSW-1987] Swap Confirm Modal UI
gnoswap-labs · Dec 31, 2024 · c2ca3fd · c2ca3fd
1 parent 99a9396
commit c2ca3fd
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 30 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">

diff --git a/packages/web/src/react-query/router/use-get-routes.ts b/packages/web/src/react-query/router/use-get-routes.ts
@@ -4,7 +4,6 @@ import { SwapError } from "@common/errors/swap";
 import { useGnoswapContext } from "@hooks/common/use-gnoswap-context";
 import { TokenModel } from "@models/token/token-model";
 import { GetRoutesResponse } from "@repositories/swap/response/get-routes-response";
-import { wait } from "@utils/common";
 
 import { QUERY_KEY } from "../query-keys";
 import { useGetAllTokenPrices } from "@query/token";
@@ -41,21 +40,17 @@ export const useGetRoutes = (
       const outputToken = request.outputToken;
       const tokenAmount = Number(request.tokenAmount);
 
-      const result = await wait<GetRoutesResponse | null>(
-        async () =>
-          swapRouterRepository
-            .getRoutes({
-              inputToken,
-              outputToken,
-              exactType: request.exactType,
-              tokenAmount,
-            })
-            .catch(e => {
-              console.error(e);
-              return null;
-            }),
-        300,
-      );
+      const result = await swapRouterRepository
+        .getRoutes({
+          inputToken,
+          outputToken,
+          exactType: request.exactType,
+          tokenAmount,
+        })
+        .catch(e => {
+          console.error(e);
+          return null;
+        });
 
       if (!result) {
         throw new SwapError("NOT_FOUND_SWAP_POOL");
@@ -72,7 +67,7 @@ export const useGetRoutes = (
 
       return result;
     },
-    // retry: false,
+    retry: false,
     refetchInterval: REFETCH_INTERVAL,
     staleTime: STALE_TIME,
     enabled: !!request?.inputToken?.path && !!request?.outputToken?.path,