[GSW-1982] sync price impact calculation

packages/web/src/hooks/swap/data/use-swap-handler.tsx

@@ -32,6 +32,7 @@ import { formatPrice } from "@utils/new-number-utils";
 import { matchInputNumber } from "@utils/number-utils";
 import { makeDisplayTokenAmount } from "@utils/token-utils";
 import { isEmptyObject } from "@utils/validation-utils";
+import { nullish } from "@utils/nullish-utils";
 
 import { useTransactionEventStore } from "@hooks/common/use-transaction-event-store";
 import { rawBySqrtX96 } from "@utils/swap-utils";
@@ -144,6 +145,8 @@ export const useSwapHandler = () => {
     !defaultTokenAAmount ? (defaultTokenBAmount ? defaultTokenBAmount : undefined) : undefined,
   );
 
+  const prevPriceImpact = useRef<BigNumber>(BigNumber(0));
+
   const [submitted, setSubmitted] = useState(false);
 
   const [copied, setCopied] = useState(false);
@@ -256,6 +259,16 @@ export const useSwapHandler = () => {
       return BigNumber(0);
     }
 
+    if (estimatedAmount === null) {
+      return prevPriceImpact.current || BigNumber(0);
+    }
+
+    if (type === "EXACT_IN") {
+      setTokenBAmount(estimatedAmount);
+    } else {
+      setTokenAAmount(estimatedAmount);
+    }
+
     const hasUSDPrice =
       !!tokenPrices[checkGnotPath(tokenA.path)]?.usd && !!tokenPrices[checkGnotPath(tokenB.path)]?.usd;
 
@@ -285,6 +298,7 @@ export const useSwapHandler = () => {
       estimatedRoutes,
       (swapFee || 0) / 100,
     );
+    prevPriceImpact.current = BigNumber(priceImpactNum.toFixed(2));
     return BigNumber(priceImpactNum.toFixed(2));
   }, [estimatedRoutes, swapFee, tokenA, tokenAAmount, tokenB, tokenBAmount, tokenPrices]);
 
@@ -936,8 +950,8 @@ export const useSwapHandler = () => {
     const broadcastMessage = {
       tokenASymbol: tokenA.symbol,
       tokenBSymbol: tokenB.symbol,
-      tokenAAmount: isExactIn ? tokenAAmount : makeDisplayTokenAmount(tokenA, estimatedAmount || 0)?.toString() || "0",
-      tokenBAmount: isExactIn ? makeDisplayTokenAmount(tokenB, estimatedAmount || 0)?.toString() || "0" : tokenBAmount,
+      tokenAAmount: isExactIn ? tokenAAmount : nullish.handleFalsy(estimatedAmount, "0"),
+      tokenBAmount: isExactIn ? nullish.handleFalsy(estimatedAmount, "0") : tokenBAmount,
     };
 
     // Handle Wrap and Unwrap
@@ -1027,16 +1041,6 @@ export const useSwapHandler = () => {
         }
         return;
       }
-
-      return;
-    }
-
-    if (type === "EXACT_IN") {
-      const amount = makeDisplayTokenAmount(tokenB, estimatedAmount || 0) || 0;
-      setTokenBAmount(amount.toString());
-    } else {
-      const amount = makeDisplayTokenAmount(tokenA, estimatedAmount || 0) || 0;
-      setTokenAAmount(amount.toString());
     }
   }, [swapState, estimatedAmount, type, tokenA, tokenB]);
 

packages/web/src/hooks/swap/data/use-swap.tsx

@@ -104,6 +104,10 @@ export const useSwap = ({ tokenA, tokenB, direction, slippage, swapFee = 15 }: U
   }, [swapState, estimatedSwapResult, swapAmount]);
 
   const estimatedAmount: string | null = useMemo(() => {
+    if (!tokenA || !tokenB) {
+      return null;
+    }
+
     if (!swapAmount || error) {
       return null;
     }
@@ -112,7 +116,10 @@ export const useSwap = ({ tokenA, tokenB, direction, slippage, swapFee = 15 }: U
       return null;
     }
 
-    return estimatedSwapResult.amount;
+    const amount = estimatedSwapResult.amount;
+    return direction === "EXACT_IN"
+      ? makeDisplayTokenAmount(tokenB, amount)?.toString() || null
+      : makeDisplayTokenAmount(tokenA, amount)?.toString() || null;
   }, [swapAmount, error, swapState, estimatedSwapResult]);
 
   const tokenAmountLimit = useMemo(() => {
@@ -130,7 +137,7 @@ export const useSwap = ({ tokenA, tokenB, direction, slippage, swapFee = 15 }: U
         return 0;
       }
 
-      return tokenA ? makeDisplayTokenAmount(tokenA, tokenAmountLimit) || 0 : 0;
+      return tokenA ? tokenAmountLimit || 0 : 0;
     }
     return 0;
   }, [direction, estimatedAmount, slippage, tokenA]);
@@ -239,6 +246,7 @@ export const useSwap = ({ tokenA, tokenB, direction, slippage, swapFee = 15 }: U
     wrap,
     unwrap,
     updateSwapAmount,
+    isEstimatedSwapLoading,
     resetSwapAmount: () => setSwapAmount(0),
   };
 };

packages/web/src/react-query/router/use-get-routes.ts

@@ -7,6 +7,7 @@ import { GetRoutesResponse } from "@repositories/swap/response/get-routes-respon
 import { wait } from "@utils/common";
 
 import { QUERY_KEY } from "../query-keys";
+import { useGetAllTokenPrices } from "@query/token";
 
 const REFETCH_INTERVAL = 10_000;
 const STALE_TIME = 10_000;
@@ -21,6 +22,7 @@ export const useGetRoutes = (
   options?: UseQueryOptions<GetRoutesResponse, Error>,
 ) => {
   const { swapRouterRepository } = useGnoswapContext();
+  const { refetch: refetchAllTokenPrices } = useGetAllTokenPrices();
 
   return useQuery<GetRoutesResponse, Error>({
     queryKey: [
@@ -59,6 +61,9 @@ export const useGetRoutes = (
         throw new SwapError("NOT_FOUND_SWAP_POOL");
       }
 
+      // Updating Swap Route Data while also updating token price information
+      refetchAllTokenPrices();
+
       const availRoute = result.estimatedRoutes.reduce((accumulated, current) => accumulated + current.quote, 0);
 
       if (availRoute < 100) {