From 888bea581d10e96eab0d139234cdcd91ef1622a9 Mon Sep 17 00:00:00 2001
From: Nathan Richards <nathan@li.finance>
Date: Mon, 27 Nov 2023 10:52:12 +0100
Subject: [PATCH] fix: bug that allowed the slippage percentage to be set as an
 empty string

---
 .../SlippageSettings/SlippageSettings.tsx     | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

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<HTMLInputElement> = (event) => {
     const { value } = event.target;
-    setValue('slippage', formatSlippage(value, defaultValue.current, true));
+
+    setValue(
+      'slippage',
+      formatSlippage(value || slippageDefault, defaultValue.current, true),
+    );
+  };
+
+  const handleInputBlur: FocusEventHandler<HTMLInputElement> = (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"
           />