Fix 9988 - Don't allow more than 15% slippage (#9991)

app/_locales/en/messages.json

@@ -1737,7 +1737,7 @@
     "message": "Quote details"
   },
   "swapQuoteDetailsSlippageInfo": {
-    "message": "If the price changes between the time your order is placed and confirmed it’s called \"slippage\". Your Swap will automatically cancel if slippage exceeds your \"max slippage\" setting."
+    "message": "If the price changes between the time your order is placed and confirmed it’s called \"slippage\". Your Swap will automatically cancel if slippage exceeds your \"slippage tolerance\" setting."
   },
   "swapQuoteIncludesRate": {
     "message": "Quote includes a $1% MetaMask fee",
@@ -1853,8 +1853,11 @@
     "message": "Convert $1 to about",
     "description": "This message is part of a quote for a swap. The $1 is the amount being converted, and the amount it is being swapped for is below this message"
   },
+  "swapsExcessiveSlippageWarning": {
+    "message": "Slippage amount is too high and will result in a bad rate. Please reduce your slippage tolerance to a value below 15%."
+  },
   "swapsMaxSlippage": {
-    "message": "Max slippage"
+    "message": "Slippage Tolerance"
   },
   "swapsNotEnoughForTx": {
     "message": "Not enough $1 to complete this transaction",

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

@@ -47,6 +47,8 @@ const fuseSearchKeys = [
   { name: 'address', weight: 0.002 },
 ]
 
+const MAX_ALLOWED_SLIPPAGE = 15
+
 export default function BuildQuote({
   inputValue,
   onInputChange,
@@ -393,6 +395,7 @@ export default function BuildQuote({
             onSelect={(newSlippage) => {
               setMaxSlippage(newSlippage)
             }}
+            maxAllowedSlippage={MAX_ALLOWED_SLIPPAGE}
           />
         </div>
       </div>
@@ -411,7 +414,8 @@ export default function BuildQuote({
         disabled={
           !Number(inputValue) ||
           !selectedToToken?.address ||
-          Number(maxSlippage) === 0
+          Number(maxSlippage) === 0 ||
+          Number(maxSlippage) > MAX_ALLOWED_SLIPPAGE
         }
         hideCancel
       />

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

@@ -6,7 +6,7 @@ import ButtonGroup from '../../../components/ui/button-group'
 import Button from '../../../components/ui/button'
 import InfoTooltip from '../../../components/ui/info-tooltip'
 
-export default function SlippageButtons({ onSelect }) {
+export default function SlippageButtons({ onSelect, maxAllowedSlippage }) {
   const t = useContext(I18nContext)
   const [open, setOpen] = useState(false)
   const [customValue, setCustomValue] = useState('')
@@ -15,12 +15,19 @@ export default function SlippageButtons({ onSelect }) {
   const [inputRef, setInputRef] = useState(null)
 
   let errorText = ''
-  if (customValue && Number(customValue) <= 0) {
-    errorText = t('swapSlippageTooLow')
-  } else if (customValue && Number(customValue) < 0.5) {
-    errorText = t('swapLowSlippageError')
-  } else if (customValue && Number(customValue) > 5) {
-    errorText = t('swapHighSlippageWarning')
+  if (customValue) {
+    if (Number(customValue) <= 0) {
+      errorText = t('swapSlippageTooLow')
+    } else if (Number(customValue) < 0.5) {
+      errorText = t('swapLowSlippageError')
+    } else if (
+      Number(customValue) >= 5 &&
+      Number(customValue) <= maxAllowedSlippage
+    ) {
+      errorText = t('swapHighSlippageWarning')
+    } else if (Number(customValue) > maxAllowedSlippage) {
+      errorText = t('swapsExcessiveSlippageWarning')
+    }
   }
 
   const customValueText = customValue || t('swapCustom')
@@ -151,4 +158,5 @@ export default function SlippageButtons({ onSelect }) {
 
 SlippageButtons.propTypes = {
   onSelect: PropTypes.func.isRequired,
+  maxAllowedSlippage: PropTypes.number.isRequired,
 }