diff --git a/packages/widget/src/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx b/packages/widget/src/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx index 78a7eed82..a6adc38c2 100644 --- a/packages/widget/src/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx +++ b/packages/widget/src/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx @@ -1,4 +1,4 @@ -import type { ChangeEventHandler } from 'react'; +import type { ChangeEventHandler, FocusEventHandler } from 'react'; import { useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import PercentIcon from '@mui/icons-material/Percent'; @@ -32,7 +32,22 @@ export const SlippageSettings: React.FC = () => { const handleInputUpdate: ChangeEventHandler = (event) => { const { value } = event.target; - setValue('slippage', formatSlippage(value, defaultValue.current, true)); + + setValue( + 'slippage', + formatSlippage(value || slippageDefault, defaultValue.current, true), + ); + }; + + const handleInputBlur: FocusEventHandler = (event) => { + setFocused(undefined); + + const { value } = event.target; + + setValue( + 'slippage', + formatSlippage(value || slippageDefault, defaultValue.current), + ); }; const customInputValue = @@ -80,9 +95,7 @@ export const SlippageSettings: React.FC = () => { onFocus={() => { setFocused('input'); }} - onBlur={() => { - setFocused(undefined); - }} + onBlur={handleInputBlur} value={customInputValue} autoComplete="off" />