From e4befeed361a582d2714fc37772bb66f3e803100 Mon Sep 17 00:00:00 2001
From: HoseinBaseri <ho3ein8280@gmail.com>
Date: Tue, 7 Jan 2025 11:26:09 +0330
Subject: [PATCH] refactor: rename disabled class to inactive-border in
 SlippageSetting component

---
 lib/components/Header/SlippageSetting.scss |  4 +-
 lib/components/Header/SlippageSetting.tsx  | 60 +++++++++++-----------
 2 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/lib/components/Header/SlippageSetting.scss b/lib/components/Header/SlippageSetting.scss
index 7be8c58..cab33be 100644
--- a/lib/components/Header/SlippageSetting.scss
+++ b/lib/components/Header/SlippageSetting.scss
@@ -64,7 +64,7 @@
                     &:hover {
                         color: var(--primary-color);
                     }
-                    &.disabled {
+                    &.inactive-border {
                         color: var(--text-fade-color);
                     }
                 }
@@ -103,7 +103,7 @@
                 &:disabled {
                     cursor: not-allowed;
                 }
-                &.disabled {
+                &.inactive-border {
                     background: var(--light-shade-color);
                     color: var(--text-fade-color);
                 }
diff --git a/lib/components/Header/SlippageSetting.tsx b/lib/components/Header/SlippageSetting.tsx
index 224704e..4750e1a 100644
--- a/lib/components/Header/SlippageSetting.tsx
+++ b/lib/components/Header/SlippageSetting.tsx
@@ -1,47 +1,47 @@
-import { ChangeEvent, useState } from "react";
-import { AnimatePresence, motion } from "framer-motion";
-import { useSwapStore } from "../../store/swap.store";
-import "./SlippageSetting.scss";
-import { useTranslation } from "react-i18next";
+import { ChangeEvent, useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useSwapStore } from '../../store/swap.store';
+import './SlippageSetting.scss';
+import { useTranslation } from 'react-i18next';
 
 const SlippageSetting = () => {
     const { t } = useTranslation();
 
     const { slippage, setSlippage } = useSwapStore();
     const [userInput, setUserInput] = useState(
-        slippage === "auto" ? "" : slippage.toString()
+        slippage === 'auto' ? '' : slippage.toString()
     );
 
     const handleSlippageChange = (e: ChangeEvent<HTMLInputElement>) => {
         e.preventDefault();
         const decimalRegexp = /^\d*(?:\.\d{0,1})?$/;
 
-        const userInput = e.target.value.replace(/,/g, ".");
-        let clearedInput = "";
-        if (userInput === "") {
-            clearedInput = "".replace(/^0+$/, "0");
-        } else if (userInput === "." || userInput === "0.") {
-            clearedInput = "0.".replace(/^0+$/, "0");
+        const userInput = e.target.value.replace(/,/g, '.');
+        let clearedInput = '';
+        if (userInput === '') {
+            clearedInput = ''.replace(/^0+$/, '0');
+        } else if (userInput === '.' || userInput === '0.') {
+            clearedInput = '0.'.replace(/^0+$/, '0');
         } else if (decimalRegexp.test(userInput)) {
-            clearedInput = userInput.replace(/^0+$/, "0");
+            clearedInput = userInput.replace(/^0+$/, '0');
         } else {
             return;
         }
-        if (clearedInput.includes(".") || userInput === "0") {
-            setUserInput(clearedInput.replace(/^0+(?=\d)/, ""));
+        if (clearedInput.includes('.') || userInput === '0') {
+            setUserInput(clearedInput.replace(/^0+(?=\d)/, ''));
         }
         if (Number(clearedInput) > 0 && Number(clearedInput) <= 10) {
-            setUserInput(clearedInput.replace(/^0+(?=\d)/, ""));
+            setUserInput(clearedInput.replace(/^0+(?=\d)/, ''));
             setSlippage(+clearedInput);
-        } else if (clearedInput === "") {
-            setUserInput("");
-            setSlippage("auto");
+        } else if (clearedInput === '') {
+            setUserInput('');
+            setSlippage('auto');
         }
     };
 
     const handleOnAutoClick = () => {
-        setUserInput("");
-        setSlippage("auto");
+        setUserInput('');
+        setSlippage('auto');
     };
     const handleOnPercentClick = (percent: number) => {
         setUserInput(percent.toString());
@@ -54,12 +54,12 @@ const SlippageSetting = () => {
             data-testid="slippage-setting"
         >
             <button className="button-container">
-                <div>{t("max_slippage")}</div>
+                <div>{t('max_slippage')}</div>
                 <div
                     className="slippage-indicator"
                     data-testid="slippage-indicator"
                 >
-                    {slippage === "auto" ? t("auto") : `${slippage}%`}{" "}
+                    {slippage === 'auto' ? t('auto') : `${slippage}%`}{' '}
                 </div>
             </button>
             <AnimatePresence>
@@ -72,16 +72,16 @@ const SlippageSetting = () => {
                     <div
                         onClick={handleOnAutoClick}
                         className={`dropdown-item ${
-                            slippage === "auto" ? "active" : "disabled"
+                            slippage === 'auto' ? 'active' : 'inactive-border'
                         }`}
                         data-testid="slippage-setting-auto"
                     >
-                        {t("auto")}
+                        {t('auto')}
                     </div>
                     <div
                         onClick={() => handleOnPercentClick(2)}
                         className={`dropdown-item ${
-                            slippage === 2 ? "active" : "disabled"
+                            slippage === 2 ? 'active' : 'inactive-border'
                         }`}
                         data-testid="slippage-setting-2"
                     >
@@ -90,7 +90,7 @@ const SlippageSetting = () => {
                     <div
                         onClick={() => handleOnPercentClick(5)}
                         className={`dropdown-item ${
-                            slippage === 5 ? "active" : "disabled"
+                            slippage === 5 ? 'active' : 'inactive-border'
                         }`}
                         data-testid="slippage-setting-5"
                     >
@@ -98,9 +98,9 @@ const SlippageSetting = () => {
                     </div>
                     <div
                         className={`controllers dropdown-item ${
-                            ["auto", 2, 5].includes(slippage)
-                                ? "disabled"
-                                : "active"
+                            ['auto', 2, 5].includes(slippage)
+                                ? 'inactive-border'
+                                : 'active'
                         }`}
                     >
                         <input