Merge pull request #202 from nguvictor/auto-fill-max

Decimals Mask
DeXter-on-Radix · Nov 30, 2023 · 51f18f3 · 51f18f3
2 parents 570e026 + 911f96d
commit 51f18f3
Show file tree

Hide file tree

Showing 10 changed files with 182 additions and 67 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.11.0",
+    "react-imask": "^7.1.3",
     "react-redux": "^8.1.2",
     "tailwindcss": "3.3.2",
     "typescript": "5.1.6"

diff --git a/src/app/components/OrderBook.tsx b/src/app/components/OrderBook.tsx
@@ -51,8 +51,8 @@ function OrderBookRow(props: OrderBookRowProps) {
 function CurrentPriceRow() {
   const trades = useAppSelector((state) => state.accountHistory.trades);
   const orderBook = useAppSelector((state) => state.orderBook);
-  const priceMaxDecimals = useAppSelector(
-    (state) => state.pairSelector.priceMaxDecimals
+  const token2MaxDecimals = useAppSelector(
+    (state) => state.pairSelector.token2.decimals
   );
 
   let spreadString = "";
@@ -73,7 +73,7 @@ function CurrentPriceRow() {
       const spread = utils.displayPositiveNumber(
         orderBook.spread,
         N_DIGITS,
-        priceMaxDecimals
+        token2MaxDecimals
       );
       const spreadPercent = utils.displayPositiveNumber(
         orderBook.spreadPercent,

diff --git a/src/app/components/order_input/AmountInput.tsx b/src/app/components/order_input/AmountInput.tsx
@@ -11,6 +11,7 @@ import {
 } from "redux/orderInputSlice";
 import { BottomRightErrorLabel } from "components/BottomRightErrorLabel";
 import { getLocaleSeparators } from "utils";
+import { IMaskInput } from "react-imask";
 
 export const enum PayReceive {
   PAY = "YOU PAY:",
@@ -21,7 +22,7 @@ interface TokenInputFiledProps extends TokenInput {
   payReceive: string;
   disabled?: boolean;
   onFocus?: () => void;
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onAccept: (value: any) => void;
 }
 
 export function AmountInput(props: TokenInputFiledProps) {
@@ -41,7 +42,7 @@ export function AmountInput(props: TokenInputFiledProps) {
     disabled,
     payReceive,
     onFocus,
-    onChange,
+    onAccept,
   } = props;
 
   const { decimalSeparator } = getLocaleSeparators();
@@ -78,18 +79,22 @@ export function AmountInput(props: TokenInputFiledProps) {
           <span>{symbol}</span>
         </div>
 
-        <input
+        <IMaskInput
           disabled={disabled || false}
-          type="number"
+          min={0}
+          mask={Number}
+          unmask={"typed"}
+          scale={targetToken.decimals}
           placeholder={placeholder}
-          value={amount}
+          radix={decimalSeparator}
+          value={String(amount)}
           className={
             "flex-1 text-end mr-1 min-w-0" +
             (disabled ? " !bg-neutral" : " !bg-base-200")
           }
-          onChange={onChange}
           onFocus={onFocus}
-        ></input>
+          onAccept={onAccept}
+        ></IMaskInput>
       </div>
 
       <BottomRightErrorLabel message={message} />

diff --git a/src/app/components/order_input/LimitOrderInput.tsx b/src/app/components/order_input/LimitOrderInput.tsx
@@ -118,7 +118,9 @@ function PriceInput() {
             value={price}
             onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
               dispatch(
-                orderInputSlice.actions.setPrice(numberOrEmptyInput(event))
+                orderInputSlice.actions.setPrice(
+                  numberOrEmptyInput(event.target.value)
+                )
               );
             }}
           />
@@ -195,9 +197,10 @@ export function LimitOrderInput() {
           payReceive={
             side === OrderSide.BUY ? PayReceive.RECEIVE : PayReceive.PAY
           }
-          onChange={(event) => {
+          onAccept={(value) => {
+            dispatch(orderInputSlice.actions.resetValidation());
             dispatch(
-              orderInputSlice.actions.setAmountToken1(numberOrEmptyInput(event))
+              orderInputSlice.actions.setAmountToken1(numberOrEmptyInput(value))
             );
           }}
         />

diff --git a/src/app/components/order_input/MarketOrderInput.tsx b/src/app/components/order_input/MarketOrderInput.tsx
@@ -49,7 +49,6 @@ export function MarketOrderInput() {
 
   const slippageValidationResult = useAppSelector(validateSlippageInput);
   const dispatch = useAppDispatch();
-
   useEffect(() => {
     if (
       tartgetToken.amount !== "" &&
@@ -89,7 +88,6 @@ export function MarketOrderInput() {
       })
     );
   }, [token2, dispatch]);
-
   return (
     <div className="form-control w-full">
       <div className="mt-4">
@@ -99,23 +97,24 @@ export function MarketOrderInput() {
           onFocus={() => {
             dispatch(orderInputSlice.actions.setSide(OrderSide.SELL));
           }}
-          onChange={(event) => {
+          onAccept={(value) => {
+            dispatch(orderInputSlice.actions.resetValidation());
             dispatch(
-              orderInputSlice.actions.setAmountToken1(numberOrEmptyInput(event))
+              orderInputSlice.actions.setAmountToken1(numberOrEmptyInput(value))
             );
           }}
         />
-
         <SwitchTokenPlacesButton />
         <AmountInput
           {...token2}
           payReceive={PayReceive.RECEIVE}
           onFocus={() => {
             dispatch(orderInputSlice.actions.setSide(OrderSide.BUY));
           }}
-          onChange={(event) => {
+          onAccept={(value) => {
+            dispatch(orderInputSlice.actions.resetValidation());
             dispatch(
-              orderInputSlice.actions.setAmountToken2(numberOrEmptyInput(event))
+              orderInputSlice.actions.setAmountToken2(numberOrEmptyInput(value))
             );
           }}
         />
@@ -148,7 +147,7 @@ export function MarketOrderInput() {
               onChange={(event) => {
                 dispatch(
                   orderInputSlice.actions.setSlippage(
-                    uiSlippageToSlippage(numberOrEmptyInput(event))
+                    uiSlippageToSlippage(numberOrEmptyInput(event.target.value))
                   )
                 );
               }}

diff --git a/src/app/debounce.ts b/src/app/debounce.ts
@@ -0,0 +1,20 @@
+import { useState, useEffect } from "react";
+
+//ToDo: Maybe move to utils.ts?
+// This function allows you to debounce a function call.
+// Which means it will wait for the specified delay before executing the function.
+export default function useDebounce(value: any, delay: number) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}