Fix debouncedRouteRequestEffect (#239)

skip-mev · Sep 13, 2024 · 9030799 · 9030799
1 parent 0caa740
commit 9030799
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 41 deletions.
diff --git a/packages/widget-v2/src/pages/SwapPage/SwapPage.tsx b/packages/widget-v2/src/pages/SwapPage/SwapPage.tsx
@@ -15,6 +15,8 @@ import {
   sourceAssetAtom,
   destinationAssetAtom,
   swapDirectionAtom,
+  sourceAssetAmount,
+  destinationAssetAmount,
 } from "@/state/swapPage";
 import { TokenAndChainSelectorModal } from "@/modals/TokenAndChainSelectorModal/TokenAndChainSelectorModal";
 import { SwapPageSettings } from "./SwapPageSettings";
@@ -25,12 +27,14 @@ import { useModal } from "@/components/Modal";
 
 const sourceAssetBalance = 125;
 
-export const SwapPage = () => {  
+export const SwapPage = () => {
   const [container, setContainer] = useState<HTMLDivElement>();
   const [drawerOpen, setDrawerOpen] = useState(false);
   const [sourceAsset, setSourceAsset] = useAtom(sourceAssetAtom);
+  const setSourceAssetAmount = useSetAtom(sourceAssetAmount);
+  const setDestinationAssetAmount = useSetAtom(destinationAssetAmount);
   const [destinationAsset, setDestinationAsset] = useAtom(destinationAssetAtom);
-  const setSwapDirection = useSetAtom(swapDirectionAtom)
+  const setSwapDirection = useSetAtom(swapDirectionAtom);
   const [{ data: assets }] = useAtom(skipAssetsAtom);
   const [{ data: chains }] = useAtom(skipChainsAtom);
   const { isLoading: isRouteLoading, isError: isRouteError, error: routeError } = useAtomValue(skipRouteAtom);
@@ -164,7 +168,7 @@ export const SwapPage = () => {
             handleChangeChain={handleChangeSourceChain}
             value={sourceAsset?.amount}
             onChangeValue={(newValue) => {
-              setSourceAsset((old) => ({ ...old, amount: newValue }));
+              setSourceAssetAmount(newValue);
               setSwapDirection("swap-in");
             }}
           />
@@ -175,7 +179,7 @@ export const SwapPage = () => {
             handleChangeChain={handleChangeDestinationChain}
             value={destinationAsset?.amount}
             onChangeValue={(newValue) => {
-              setDestinationAsset((old) => ({ ...old, amount: newValue }));
+              setDestinationAssetAmount(newValue);
               setSwapDirection("swap-out");
             }}
           />

diff --git a/packages/widget-v2/src/state/skipClient.ts b/packages/widget-v2/src/state/skipClient.ts
@@ -8,10 +8,8 @@ import {
 } from "@skip-go/client";
 import { atomWithQuery } from "jotai-tanstack-query";
 import { apiURL, endpointOptions } from "@/constants/skipClientDefault";
-import { destinationAssetAtom, routeAmountEffect, sourceAssetAtom, swapDirectionAtom } from "./swapPage";
+import { debouncedDestinationAssetAmount, debouncedSourceAssetAmount, destinationAssetAtom, routeAmountEffect, sourceAssetAtom, swapDirectionAtom } from "./swapPage";
 import { getAmountWei } from "@/utils/number";
-import { atomWithDebounce } from "@/utils/atomWithDebounce";
-import { atomEffect } from "jotai-effect";
 
 export const skipClientConfigAtom = atom<SkipClientOptions>({
   apiURL,
@@ -97,23 +95,19 @@ export const skipSwapVenuesAtom = atomWithQuery((get) => {
   };
 });
 
-const ROUTE_REQUEST_DEBOUNCE_DELAY = 500;
-
-export const { debouncedValueAtom: debouncedSkipRouteRequestAtom } = atomWithDebounce<RouteRequest | undefined>(
-  undefined,
-  ROUTE_REQUEST_DEBOUNCE_DELAY,
-);
-
 const skipRouteRequestAtom = atom<RouteRequest | undefined>((get) => {
   const sourceAsset = get(sourceAssetAtom);
   const destinationAsset = get(destinationAssetAtom);
   const direction = get(swapDirectionAtom);
+  const sourceAssetAmount = get(debouncedSourceAssetAmount);
+  const destinationAssetAmount = get(debouncedDestinationAssetAmount);
+
   if (!sourceAsset?.chainID || !sourceAsset.denom || !destinationAsset?.chainID || !destinationAsset.denom) {
     return undefined;
   }
   const amount = direction === "swap-in"
-    ? { amountIn: getAmountWei(sourceAsset.amount, sourceAsset.decimals) || "0" }
-    : { amountOut: getAmountWei(destinationAsset.amount, destinationAsset.decimals) || "0" };
+    ? { amountIn: getAmountWei(sourceAssetAmount, sourceAsset.decimals) || "0" }
+    : { amountOut: getAmountWei(destinationAssetAmount, destinationAsset.decimals) || "0" };
 
   return {
     ...amount,
@@ -124,18 +118,11 @@ const skipRouteRequestAtom = atom<RouteRequest | undefined>((get) => {
   };
 });
 
-export const debouncedRouteRequestEffect = atomEffect((get, set) => {
-  const routeRequest = get(skipRouteRequestAtom);
-  set(debouncedSkipRouteRequestAtom, routeRequest);
-});
-
-
 export const skipRouteAtom = atomWithQuery((get) => {
   const skip = get(skipClient);
-  const params = get(debouncedSkipRouteRequestAtom);
+  const params = get(skipRouteRequestAtom);
 
   get(routeAmountEffect);
-  get(debouncedRouteRequestEffect);
 
   return {
     queryKey: ["skipRoute", params],

diff --git a/packages/widget-v2/src/state/swapPage.ts b/packages/widget-v2/src/state/swapPage.ts
@@ -3,44 +3,74 @@ import { ClientAsset, skipRouteAtom } from "./skipClient";
 import { Wallet } from "@/components/RenderWalletList";
 import { atomEffect } from "jotai-effect";
 import { parseAmountWei } from "@/utils/number";
+import { atomWithDebounce } from "@/utils/atomWithDebounce";
 
 export type AssetAtom = Partial<ClientAsset> & {
   amount?: string;
 };
 
+const ROUTE_REQUEST_DEBOUNCE_DELAY = 500;
+
+export const { debouncedValueAtom: debouncedSourceAssetAmount } = atomWithDebounce<string | undefined>(
+  undefined,
+  ROUTE_REQUEST_DEBOUNCE_DELAY,
+);
+
+export const { debouncedValueAtom: debouncedDestinationAssetAmount } = atomWithDebounce<string | undefined>(
+  undefined,
+  ROUTE_REQUEST_DEBOUNCE_DELAY,
+);
+
 export const sourceAssetAtom = atom<AssetAtom>();
 
+export const sourceAssetAmount = atom(
+  (get) => get(sourceAssetAtom)?.amount,
+  (get, set, newAmount: string) => {
+    const oldSourceAsset = get(sourceAssetAtom);
+    set(sourceAssetAtom, { ...oldSourceAsset, amount: newAmount });
+    set(debouncedSourceAssetAmount, newAmount);
+  },
+);
+
 export const destinationAssetAtom = atom<AssetAtom>();
 
+export const destinationAssetAmount = atom(
+  (get) => get(destinationAssetAtom)?.amount,
+  (get, set, newAmount: string) => {
+    const oldDestinationAsset = get(destinationAssetAtom);
+    set(destinationAssetAtom, { ...oldDestinationAsset, amount: newAmount });
+    set(debouncedDestinationAssetAmount, newAmount);
+  },
+);
+
 export const swapDirectionAtom = atom<"swap-in" | "swap-out">("swap-in");
 
 export const connectedWalletAtom = atom<Wallet>();
 
 export const destinationWalletAtom = atom<Wallet>();
 
-
 export const routeAmountEffect = atomEffect((get, set) => {
-  const route = get(skipRouteAtom)
-  const direction = get(swapDirectionAtom)
-  const sourceAsset = get(sourceAssetAtom)
-  const destinationAsset = get(destinationAssetAtom)
+  const route = get(skipRouteAtom);
+  const direction = get(swapDirectionAtom);
+  const sourceAsset = get(sourceAssetAtom);
+  const destinationAsset = get(destinationAssetAtom);
 
-  const isSwapIn = direction === "swap-in";
+  if (!route.data || !sourceAsset || !destinationAsset) return;
 
-  if (!route.data || !sourceAsset || !destinationAsset) return
+  const swapInAmount = parseAmountWei(route.data.amountOut, destinationAsset.decimals);
+  const swapOutAmount = parseAmountWei(route.data.amountIn, sourceAsset.decimals);
+  const swapInAmountChanged = swapInAmount !== destinationAsset.amount;
+  const swapOutAmountChanged = swapOutAmount !== sourceAsset.amount;
 
-  if (isSwapIn) {
-    const amount = parseAmountWei(route.data.amountOut, destinationAsset.decimals)
+  if (direction === "swap-in" && swapInAmountChanged) {
     set(destinationAssetAtom, (old) => ({
       ...old,
-      amount,
-    }))
-  }
-  else {
-    const amount = parseAmountWei(route.data.amountIn, sourceAsset.decimals)
+      amount: swapInAmount,
+    }));
+  } else if (direction === "swap-out" && swapOutAmountChanged) {
     set(sourceAssetAtom, (old) => ({
       ...old,
-      amount,
-    }))
+      amount: swapOutAmount,
+    }));
   }
-})
+});