fix: Warning not seen trx deadline setting, set value only when losin…

…g focus
pancakeswap · Nov 3, 2024 · 9ceff81 · 9ceff81
1 parent 85bd0d2
commit 9ceff81
Showing 1 changed file with 20 additions and 11 deletions.
diff --git a/apps/web/src/components/Menu/GlobalSettings/TransactionSettings.tsx b/apps/web/src/components/Menu/GlobalSettings/TransactionSettings.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from '@pancakeswap/localization'
 import { Box, Button, Flex, FlexGap, Input, Message, QuestionHelper, Text } from '@pancakeswap/uikit'
 import { useUserSlippage } from '@pancakeswap/utils/user'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { escapeRegExp } from 'utils'
 
 import { VerticalDivider } from '@pancakeswap/widgets-internal'
@@ -73,12 +73,15 @@ const SlippageTabs = () => {
     slippageError = undefined
   }
 
-  let deadlineError: DeadlineError | undefined
-  if (deadlineInput !== '' && !deadlineInputIsValid) {
-    deadlineError = DeadlineError.InvalidInput
-  } else {
-    deadlineError = undefined
-  }
+  const [deadlineError, setDeadlineError] = useState<DeadlineError | undefined>()
+
+  useEffect(() => {
+    if (deadlineInput !== '' && !deadlineInputIsValid) {
+      setDeadlineError(DeadlineError.InvalidInput)
+    } else {
+      setDeadlineError(undefined)
+    }
+  }, [deadlineInput, deadlineInputIsValid])
 
   const parseCustomSlippage = (value: string) => {
     if (value === '' || inputRegex.test(escapeRegExp(value))) {
@@ -96,14 +99,12 @@ const SlippageTabs = () => {
   }
 
   const parseCustomDeadline = (value: string) => {
-    setDeadlineInput(value)
-
     try {
       const valueAsInt: number = Number.parseInt(value) * 60
       if (!Number.isNaN(valueAsInt) && valueAsInt > 60 && valueAsInt < THREE_DAYS_IN_SECONDS) {
         setTTL(valueAsInt)
       } else {
-        deadlineError = DeadlineError.InvalidInput
+        setDeadlineError(DeadlineError.InvalidInput)
       }
     } catch (error) {
       console.error(error)
@@ -244,6 +245,11 @@ const SlippageTabs = () => {
               placeholder={(Number(ttl) / 60).toString()}
               value={deadlineInput}
               onChange={(event) => {
+                if (event.currentTarget.validity.valid) {
+                  setDeadlineInput(event.target.value)
+                }
+              }}
+              onBlur={(event) => {
                 if (event.currentTarget.validity.valid) {
                   parseCustomDeadline(event.target.value)
                 }
@@ -262,7 +268,10 @@ const SlippageTabs = () => {
             mt="3px"
             variant="text"
             scale="sm"
-            onClick={() => parseCustomDeadline(DEFAULT_TXN_DEADLINE.toString())}
+            onClick={() => {
+              setDeadlineInput('')
+              parseCustomDeadline(DEFAULT_TXN_DEADLINE.toString())
+            }}
           >
             {t('Reset')}
           </PrimaryOutlineButton>