From 0bce30c3699356010b7d264adfa2a1364d6fd3ee Mon Sep 17 00:00:00 2001
From: Thomas <thomas@dcts.dev>
Date: Thu, 28 Nov 2024 10:57:39 +0100
Subject: [PATCH 1/2] install 'use-debounce'

---
 package-lock.json | 15 ++++++++++++++-
 package.json      |  3 ++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4cb782bc..c539acb6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,7 +39,8 @@
         "resize-observer-polyfill": "^1.5.1",
         "tailwind-merge": "^2.4.0",
         "tailwindcss": "3.3.2",
-        "typescript": "5.1.6"
+        "typescript": "5.1.6",
+        "use-debounce": "^10.0.4"
       },
       "devDependencies": {
         "@playwright/test": "^1.37.1",
@@ -9612,6 +9613,18 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-debounce": {
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.0.4.tgz",
+      "integrity": "sha512-6Cf7Yr7Wk7Kdv77nnJMf6de4HuDE4dTxKij+RqE9rufDsI6zsbjyAxcH5y2ueJCQAnfgKbzXbZHYlkFwmBlWkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16.0.0"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
diff --git a/package.json b/package.json
index 47274ede..916105b8 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,8 @@
     "resize-observer-polyfill": "^1.5.1",
     "tailwind-merge": "^2.4.0",
     "tailwindcss": "3.3.2",
-    "typescript": "5.1.6"
+    "typescript": "5.1.6",
+    "use-debounce": "^10.0.4"
   },
   "devDependencies": {
     "@playwright/test": "^1.37.1",

From a22b9cb8ed9092c2d028081d007c099491ffc53e Mon Sep 17 00:00:00 2001
From: Thomas <thomas@dcts.dev>
Date: Thu, 28 Nov 2024 11:17:54 +0100
Subject: [PATCH 2/2] fix slider causing issues on mobile

---
 src/app/components/OrderInput.tsx | 83 ++++++++++++++++---------------
 1 file changed, 44 insertions(+), 39 deletions(-)

diff --git a/src/app/components/OrderInput.tsx b/src/app/components/OrderInput.tsx
index 360de2f9..d791e2c1 100644
--- a/src/app/components/OrderInput.tsx
+++ b/src/app/components/OrderInput.tsx
@@ -31,6 +31,7 @@ import {
 } from "state/orderInputSlice";
 import { Calculator } from "services/Calculator";
 import { DexterToast } from "components/DexterToaster";
+import { useDebouncedCallback } from "use-debounce";
 
 // XRD reserved for transaction fees
 const XRD_FEE_ALLOWANCE = 3;
@@ -468,47 +469,51 @@ function UserInputContainer() {
   const isBuyOrder = side === "BUY";
   const isSellOrder = side === "SELL";
 
-  const sliderCallback = useCallback(
-    (newPercentage: number) => {
-      const isXRDToken = isBuyOrder
-        ? token2.symbol === "XRD"
-        : token1.symbol === "XRD";
-      let balance = isBuyOrder ? balanceToken2 : balanceToken1;
-
-      if (newPercentage === 100 && isXRDToken) {
-        balance = Math.max(balance - XRD_FEE_ALLOWANCE, 0);
-      }
+  const sliderDebounceMs = 350;
+  const sliderCallback = useDebouncedCallback(
+    useCallback(
+      (newPercentage: number) => {
+        const isXRDToken = isBuyOrder
+          ? token2.symbol === "XRD"
+          : token1.symbol === "XRD";
+        let balance = isBuyOrder ? balanceToken2 : balanceToken1;
+
+        if (newPercentage === 100 && isXRDToken) {
+          balance = Math.max(balance - XRD_FEE_ALLOWANCE, 0);
+        }
 
-      const amount = Calculator.divide(
-        Calculator.multiply(balance, newPercentage),
-        100
-      );
+        const amount = Calculator.divide(
+          Calculator.multiply(balance, newPercentage),
+          100
+        );
 
-      const specifiedToken = isBuyOrder
-        ? SpecifiedToken.TOKEN_2
-        : SpecifiedToken.TOKEN_1;
-
-      dispatch(
-        orderInputSlice.actions.setTokenAmount({
-          amount,
-          bestBuy,
-          bestSell,
-          balanceToken1,
-          balanceToken2,
-          specifiedToken,
-        })
-      );
-    },
-    [
-      isBuyOrder,
-      token1.symbol,
-      token2.symbol,
-      balanceToken1,
-      balanceToken2,
-      bestBuy,
-      bestSell,
-      dispatch,
-    ]
+        const specifiedToken = isBuyOrder
+          ? SpecifiedToken.TOKEN_2
+          : SpecifiedToken.TOKEN_1;
+
+        dispatch(
+          orderInputSlice.actions.setTokenAmount({
+            amount,
+            bestBuy,
+            bestSell,
+            balanceToken1,
+            balanceToken2,
+            specifiedToken,
+          })
+        );
+      },
+      [
+        isBuyOrder,
+        token1.symbol,
+        token2.symbol,
+        balanceToken1,
+        balanceToken2,
+        bestBuy,
+        bestSell,
+        dispatch,
+      ]
+    ),
+    sliderDebounceMs
   );
 
   useEffect(() => {