slippage bug fixed (#1021)

* slippage updated to use strings * rename AUTO_SLIPPAGE_AMOUNT
delvtech · Apr 30, 2024 · 236cf07 · 236cf07
1 parent 2e9df1f
commit 236cf07
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 42 deletions.
diff --git a/apps/hyperdrive-trading/src/ui/base/components/PercentInput.tsx b/apps/hyperdrive-trading/src/ui/base/components/PercentInput.tsx
@@ -1,13 +1,12 @@
 import classNames from "classnames";
-import { ChangeEvent } from "react";
 import { HIDE_NUMERIC_INPUT_ARROWS_CLASS } from "src/ui/base/numericInput";
 
 export function PercentInput({
   value,
   onChange,
 }: {
   value: string;
-  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  onChange: (e: string) => void;
 }): JSX.Element {
   return (
     <div className="relative">
@@ -17,7 +16,7 @@ export function PercentInput({
         step="any"
         type="number"
         value={value}
-        onChange={(e) => onChange(e)}
+        onChange={(event) => onChange(event.target.value)}
         className={classNames(
           "daisy-input daisy-input-bordered h-8 max-w-24 text-sm",
           HIDE_NUMERIC_INPUT_ARROWS_CLASS,

diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx
@@ -5,7 +5,6 @@ import {
   HyperdriveConfig,
 } from "@hyperdrive/appconfig";
 
-import * as dnum from "dnum";
 import { MouseEvent, ReactElement } from "react";
 import { getIsValidTradeSize } from "src/hyperdrive/getIsValidTradeSize";
 import { getHasEnoughAllowance } from "src/token/getHasEnoughAllowance";
@@ -148,6 +147,7 @@ export function OpenLongForm({
   const {
     setSlippage,
     slippage,
+    slippageAsBigInt,
     activeOption: activeSlippageOption,
     setActiveOption: setActiveSlippageOption,
   } = useSlippageSettings({ decimals: activeToken.decimals });
@@ -156,7 +156,7 @@ export function OpenLongForm({
     bondsReceived &&
     adjustAmountByPercentage({
       amount: bondsReceived,
-      percentage: slippage,
+      percentage: slippageAsBigInt,
       decimals: activeToken.decimals,
       direction: "down",
     });
@@ -198,7 +198,6 @@ export function OpenLongForm({
             <SlippageSettings
               onSlippageChange={setSlippage}
               slippage={slippage}
-              decimals={activeToken.decimals}
               activeOption={activeSlippageOption}
               onActiveOptionChange={setActiveSlippageOption}
               tooltip="Your transaction will revert if the price changes unfavorably by more than this percentage."
@@ -231,9 +230,7 @@ export function OpenLongForm({
                     })} ${activeToken.symbol}`
                   : undefined}
               </span>
-              <span>
-                {`Slippage: ${dnum.format([slippage, activeToken.decimals])}%`}
-              </span>
+              <span>{`Slippage: ${slippage || "0.5"}%`}</span>
             </div>
           }
           onChange={(newAmount) => setAmount(newAmount)}

diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx
@@ -131,12 +131,17 @@ export function AddLiquidityForm({
     amount: depositAmountAsBigInt,
   });
 
-  const { activeOption, setActiveOption, setSlippage, slippage } =
-    useSlippageSettings({ decimals: activeToken.decimals });
+  const {
+    activeOption,
+    setActiveOption,
+    setSlippage,
+    slippage,
+    slippageAsBigInt,
+  } = useSlippageSettings({ decimals: activeToken.decimals });
 
   const minLpSharePriceAfterSlippage = adjustAmountByPercentage({
     amount: poolInfo?.lpSharePrice || 0n,
-    percentage: slippage,
+    percentage: slippageAsBigInt,
     decimals: activeToken.decimals,
     direction: "down",
   });
@@ -189,7 +194,6 @@ export function AddLiquidityForm({
             <SlippageSettings
               onSlippageChange={setSlippage}
               slippage={slippage}
-              decimals={activeToken.decimals}
               activeOption={activeOption}
               onActiveOptionChange={setActiveOption}
               tooltip="Your transaction will revert if the liquidity provider share price changes unfavorably by more than this percentage."
@@ -211,13 +215,18 @@ export function AddLiquidityForm({
           maxValue={activeTokenBalance?.formatted}
           inputLabel="Amount to deposit"
           stat={
-            activeTokenBalance
-              ? `Balance: ${formatBalance({
-                  balance: activeTokenBalance?.value,
-                  decimals: activeToken.decimals,
-                  places: activeToken.places,
-                })} ${activeToken.symbol}`
-              : undefined
+            <div className="flex flex-col gap-1 text-xs text-neutral-content">
+              <span>
+                {activeTokenBalance
+                  ? `Balance: ${formatBalance({
+                      balance: activeTokenBalance?.value,
+                      decimals: activeToken.decimals,
+                      places: activeToken.places,
+                    })} ${activeToken.symbol}`
+                  : undefined}
+              </span>
+              <span>{`Slippage: ${slippage || "0.5"}%`}</span>
+            </div>
           }
           onChange={(newAmount) => setAmount(newAmount)}
         />

diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx
@@ -4,7 +4,6 @@ import {
   findYieldSourceToken,
   HyperdriveConfig,
 } from "@hyperdrive/appconfig";
-import * as dnum from "dnum";
 import { MouseEvent, ReactElement } from "react";
 import { convertMillisecondsToDays } from "src/base/convertMillisecondsToDays";
 import { getIsValidTradeSize } from "src/hyperdrive/getIsValidTradeSize";
@@ -159,6 +158,7 @@ export function OpenShortForm({
   const {
     setSlippage,
     slippage,
+    slippageAsBigInt,
     activeOption: activeSlippageOption,
     setActiveOption: setActiveSlippageOption,
   } = useSlippageSettings({ decimals: activeToken.decimals });
@@ -169,7 +169,7 @@ export function OpenShortForm({
       amount: traderDeposit,
       decimals: activeToken.decimals,
       direction: "up",
-      percentage: slippage,
+      percentage: slippageAsBigInt,
     });
 
   const { openShort, openShortStatus } = useOpenShort({
@@ -202,16 +202,13 @@ export function OpenShortForm({
           onChange={(newAmount) => setAmount(newAmount)}
           stat={
             <div className="flex flex-col gap-1 text-xs text-neutral-content">
-              <span>
-                {`Slippage: ${dnum.format([slippage, activeToken.decimals])}%`}
-              </span>
+              <span>{`Slippage: ${slippage || "0.5"}%`}</span>
             </div>
           }
           settings={
             <SlippageSettings
               onSlippageChange={setSlippage}
               slippage={slippage}
-              decimals={activeToken.decimals}
               activeOption={activeSlippageOption}
               onActiveOptionChange={setActiveSlippageOption}
               tooltip="Your transaction will revert if the price changes unfavorably by more than this percentage."

diff --git a/apps/hyperdrive-trading/src/ui/token/SlippageSettings.tsx b/apps/hyperdrive-trading/src/ui/token/SlippageSettings.tsx
@@ -1,22 +1,18 @@
 import { InformationCircleIcon } from "@heroicons/react/24/outline";
 import classNames from "classnames";
-import * as dnum from "dnum";
 import { PercentInput } from "src/ui/base/components/PercentInput";
 
-export const AUTO_SLIPPAGE_AMOUNT = (decimals: number): bigint =>
-  dnum.from("0.5", decimals)[0];
+export const DEFAULT_SLIPPAGE_AMOUNT = "0.5";
 
 export function SlippageSettings({
   slippage,
   onSlippageChange,
-  decimals,
   activeOption,
   onActiveOptionChange,
   tooltip,
 }: {
-  slippage: bigint;
-  onSlippageChange: (slippage: bigint) => void;
-  decimals: number;
+  slippage: string;
+  onSlippageChange: (slippage: string) => void;
   activeOption: "auto" | "custom";
   onActiveOptionChange: (activeTab: "auto" | "custom") => void;
   tooltip?: string;
@@ -38,7 +34,7 @@ export function SlippageSettings({
             onClick={(e) => {
               e.preventDefault();
               onActiveOptionChange("auto");
-              onSlippageChange(AUTO_SLIPPAGE_AMOUNT(decimals));
+              onSlippageChange(DEFAULT_SLIPPAGE_AMOUNT);
             }}
             className={classNames("daisy-tab text-sm", {
               "font-bold": activeOption === "auto",
@@ -59,10 +55,10 @@ export function SlippageSettings({
           </button>
         </div>
         <PercentInput
-          value={dnum.format([slippage, decimals])}
+          value={slippage}
           onChange={(e) => {
             onActiveOptionChange("custom");
-            onSlippageChange(dnum.from(e.target.value, decimals)[0]);
+            onSlippageChange(e);
           }}
         />
       </div>

diff --git a/apps/hyperdrive-trading/src/ui/token/hooks/useSlippageSettings.ts b/apps/hyperdrive-trading/src/ui/token/hooks/useSlippageSettings.ts
@@ -1,18 +1,22 @@
+import * as dnum from "dnum";
 import { useState } from "react";
-import { AUTO_SLIPPAGE_AMOUNT } from "src/ui/token/SlippageSettings";
+import { DEFAULT_SLIPPAGE_AMOUNT } from "src/ui/token/SlippageSettings";
 export function useSlippageSettings({ decimals }: { decimals: number }): {
-  slippage: bigint;
-  setSlippage: (slippage: bigint) => void;
+  slippage: string;
+  slippageAsBigInt: bigint;
+  setSlippage: (slippage: string) => void;
   activeOption: "auto" | "custom";
   setActiveOption: (activeOption: "auto" | "custom") => void;
 } {
-  const [slippage, setSlippage] = useState<bigint>(
-    AUTO_SLIPPAGE_AMOUNT(decimals),
-  );
+  const [slippage, setSlippage] = useState<string>(DEFAULT_SLIPPAGE_AMOUNT);
+  const slippageAsBigInt = slippage
+    ? dnum.from(slippage, decimals)[0]
+    : dnum.from(DEFAULT_SLIPPAGE_AMOUNT, decimals)[0];
   const [activeOption, setActiveOption] = useState<"auto" | "custom">("auto");
 
   return {
     slippage,
+    slippageAsBigInt,
     setSlippage,
     activeOption,
     setActiveOption,