Merge pull request #207 from gnoswap-labs/GSW-371-manage-slippage-on-…

…local-storage

[GSW-371] fix: Manage slippage on local storage

packages/web/src/constants/option.constant.ts

@@ -77,3 +77,5 @@ export const PriceRangeTooltip: {
     "A passive price range of [-50% ~ +100%] for moderate risks & returns.",
   Custom: undefined,
 };
+
+export const DEFAULT_SLIPPAGE = 0.5;

packages/web/src/hooks/common/use-slippage.ts

@@ -0,0 +1,22 @@
+import { useAtom } from "jotai";
+import { CommonState } from "@states/index";
+import { useCallback } from "react";
+import { DEFAULT_SLIPPAGE } from "@constants/option.constant";
+
+export const useSlippage = () => {
+  const [slippage, setSlippage] = useAtom(CommonState.slippage);
+
+  const changeSlippage = useCallback(
+    (slippage: number) => {
+      const changedSlippage = Math.min(100, Math.max(0, slippage));
+      setSlippage(changedSlippage);
+    },
+    [setSlippage],
+  );
+
+  const resetSlippage = useCallback(() => {
+    setSlippage(DEFAULT_SLIPPAGE);
+  }, [setSlippage]);
+
+  return { slippage, changeSlippage, resetSlippage };
+};

packages/web/src/states/common.ts

@@ -2,6 +2,8 @@ import { NetworkModel } from "@models/common/network-model";
 import { DEVICE_TYPE } from "@styles/media";
 import { atom } from "jotai";
 import NetworkData from "@resources/chains.json";
+import { atomWithStorage } from "jotai/utils";
+import { DEFAULT_SLIPPAGE } from "@constants/option.constant";
 
 interface HeaderToggleProps {
   walletConnect: boolean;
@@ -20,3 +22,5 @@ export const modalContent = atom<React.ReactNode | null>(null);
 export const breakpoint = atom<DEVICE_TYPE>(DEVICE_TYPE.WEB);
 
 export const network = atom<NetworkModel>(NetworkData[0]);
+
+export const slippage = atomWithStorage<number>("slippage", DEFAULT_SLIPPAGE);

packages/web/src/utils/number-utils.ts

@@ -114,3 +114,12 @@ export const toUnitFormat = (
   // TODO : Else Return Type
   return (usd ? "$" : "") + bigNumber.decimalPlaces(2).toString();
 };
+
+export function toDecimalNumber(
+  value: BigNumber | string | number,
+  decimals?: number,
+) {
+  const powers = 10 ** (decimals || 0);
+  const num = BigNumber(value).toNumber();
+  return Math.round(num * powers) / powers;
+}