Allow 0% slippage, show a warning for 0 < slippage <= 1, disable "Review Swap" button for negative slippage (#10936)

* Allow 0% slippage, show a warning for 0 < slippage <= 1, disable “Review Swap” button for negative slippage

* Update a translation key, use both new and old key until it’s translated everywhere

* Keep an old key for `en`: swapSlippageTooLow

* Fix an ESLint issue

* Only use swapSlippageNegative, remove swapSlippageTooLow

app/_locales/en/messages.json

@@ -1958,8 +1958,8 @@
   "swapSelectQuotePopoverDescription": {
     "message": "Below are all the quotes gathered from multiple liquidity sources."
   },
-  "swapSlippageTooLow": {
+  "swapSlippageNegative": {
-    "message": "Slippage must be greater than zero"
+    "message": "Slippage must be greater or equal to zero"
   },
   "swapSource": {
     "message": "Liquidity source"

app/_locales/es/messages.json

@@ -1690,9 +1690,6 @@
   "swapSelectQuotePopoverDescription": {
     "message": "A continuación se muestran todas las cotizaciones recopiladas de múltiples fuentes de liquidez."
   },
-  "swapSlippageTooLow": {
-    "message": "El deslizamiento debe ser mayor que cero"
-  },
   "swapSource": {
     "message": "Fuente de liquidez"
   },

app/_locales/es_419/messages.json

@@ -1690,9 +1690,6 @@
   "swapSelectQuotePopoverDescription": {
     "message": "A continuación se muestran todas las cotizaciones recopiladas de múltiples fuentes de liquidez."
   },
-  "swapSlippageTooLow": {
-    "message": "El deslizamiento debe ser mayor que cero"
-  },
   "swapSource": {
     "message": "Fuente de liquidez"
   },

app/_locales/hi/messages.json

@@ -1660,9 +1660,6 @@
   "swapSelectQuotePopoverDescription": {
     "message": "नीचे दिए गए सभी उद्धरण कई चलनिधि स्रोतों से एकत्र किए गए हैं।"
   },
-  "swapSlippageTooLow": {
-    "message": "स्लिपेज शून्य से अधिक होना चाहिए"
-  },
   "swapSource": {
     "message": "चलनिधि का स्रोत"
   },

app/_locales/id/messages.json

@@ -1660,9 +1660,6 @@
   "swapSelectQuotePopoverDescription": {
     "message": "Di bawah ini adalah semua kuota yang dikumpulkan dari beberapa sumber likuiditas."
   },
-  "swapSlippageTooLow": {
-    "message": "Slippage harus lebih besar dari nol"
-  },
   "swapSource": {
     "message": "Sumber likuiditas"
   },

app/_locales/it/messages.json

@@ -1702,9 +1702,6 @@
   "swapSelectQuotePopoverDescription": {
     "message": "Sotto trovi tutte le quotazioni raccolte da multiple sorgenti di liquidità."
   },
-  "swapSlippageTooLow": {
-    "message": "Lo slippage deve essere maggiore di zero"
-  },
   "swapSource": {
     "message": "Sorgente di liquidità"
   },

app/_locales/ja/messages.json

@@ -1690,9 +1690,6 @@
   "swapSelectQuotePopoverDescription": {
     "message": "以下は複数の流動性ソースから収集したすべての見積です。"
   },
-  "swapSlippageTooLow": {
-    "message": "スリッページは 0 より多くする必要があります。"
-  },
   "swapSource": {
     "message": "流動性ソース"
   },

app/_locales/ko/messages.json

@@ -1660,9 +1660,6 @@
   "swapSelectQuotePopoverDescription": {
     "message": "다음은 여러 유동성 소스에서 수집한 전체 견적입니다."
   },
-  "swapSlippageTooLow": {
-    "message": "슬리패지는 0보다 커야 합니다."
-  },
   "swapSource": {
     "message": "유동성 소스"
   },

app/_locales/ru/messages.json

@@ -1660,9 +1660,6 @@
   "swapSelectQuotePopoverDescription": {
     "message": "Ниже приведены все котировки, собранные из нескольких источников ликвидности."
   },
-  "swapSlippageTooLow": {
-    "message": "Проскальзывание должно быть больше нуля"
-  },
   "swapSource": {
     "message": "Источник ликвидности"
   },

app/_locales/tl/messages.json

@@ -1657,9 +1657,6 @@
   "swapSelectQuotePopoverDescription": {
     "message": "Makikita sa ibaba ang lahat ng quote na nakuha mula sa maraming pinagkukunan ng liquidity."
   },
-  "swapSlippageTooLow": {
-    "message": "Dapat ay mas malaki sa zero ang slippage"
-  },
   "swapSource": {
     "message": "Pinagkunan ng liquidity"
   },

app/_locales/vi/messages.json

@@ -1660,9 +1660,6 @@
   "swapSelectQuotePopoverDescription": {
     "message": "Dưới đây là tất cả các báo giá thu thập từ nhiều nguồn thanh khoản."
   },
-  "swapSlippageTooLow": {
-    "message": "Mức trượt giá phải lớn hơn 0"
-  },
   "swapSource": {
     "message": "Nguồn thanh khoản"
   },

app/_locales/zh_CN/messages.json

@@ -1690,9 +1690,6 @@
   "swapSelectQuotePopoverDescription": {
     "message": "以下是从多个流动资金来源收集到的所有报价。"
   },
-  "swapSlippageTooLow": {
-    "message": "滑点必须大于零"
-  },
   "swapSource": {
     "message": "流动资金来源"
   },

ui/pages/swaps/build-quote/build-quote.js

@@ -533,7 +533,7 @@ export default function BuildQuote({
           !isFeatureFlagLoaded ||
           !Number(inputValue) ||
           !selectedToToken?.address ||
-          Number(maxSlippage) === 0 ||
+          Number(maxSlippage) < 0 ||
           Number(maxSlippage) > MAX_ALLOWED_SLIPPAGE ||
           (toTokenIsNotDefault && occurances < 2 && !verificationClicked)
         }

ui/pages/swaps/slippage-buttons/slippage-buttons.js

@@ -13,8 +13,12 @@ export default function SlippageButtons({
 }) {
   const t = useContext(I18nContext);
   const [customValue, setCustomValue] = useState(() => {
-    if (currentSlippage && currentSlippage !== 2 && currentSlippage !== 3) {
+    if (
-      return currentSlippage;
+      typeof currentSlippage === 'number' &&
+      currentSlippage !== 2 &&
+      currentSlippage !== 3
+    ) {
+      return currentSlippage.toString();
     }
     return '';
   });
@@ -24,7 +28,7 @@ export default function SlippageButtons({
       return 1;
     } else if (currentSlippage === 2) {
       return 0;
-    } else if (currentSlippage) {
+    } else if (typeof currentSlippage === 'number') {
       return 2;
     }
     return 1; // Choose activeButtonIndex = 1 for 3% slippage by default.
@@ -33,9 +37,12 @@ export default function SlippageButtons({
 
   let errorText = '';
   if (customValue) {
-    if (Number(customValue) <= 0) {
+    // customValue is a string, e.g. '0'
-      errorText = t('swapSlippageTooLow');
+    if (Number(customValue) < 0) {
-    } else if (Number(customValue) < 0.5) {
+      errorText = t('swapSlippageNegative');
+    } else if (Number(customValue) > 0 && Number(customValue) <= 1) {
+      // We will not show this warning for 0% slippage, because we will only
+      // return non-slippage quotes from off-chain makers.
       errorText = t('swapLowSlippageError');
     } else if (
       Number(customValue) >= 5 &&
@@ -136,10 +143,6 @@ export default function SlippageButtons({
                     ref={setInputRef}
                     onBlur={() => {
                       setEnteringCustomValue(false);
-                      if (customValue === '0') {
-                        setCustomValue('');
-                        setActiveButtonIndex(1);
-                      }
                     }}
                     value={customValue || ''}
                   />