Reduce the default slippage from 3% to 2% (#14863)

app/_locales/en/messages.json

@@ -3440,6 +3440,10 @@
   "swapSlippageNegative": {
     "message": "Slippage must be greater or equal to zero"
   },
+  "swapSlippagePercent": {
+    "message": "$1%",
+    "description": "$1 is the amount of % for slippage"
+  },
   "swapSource": {
     "message": "Liquidity source"
   },

shared/constants/swaps.js

@@ -206,3 +206,8 @@ export const TOKEN_BUCKET_PRIORITY = {
   OWNED: 'owned',
   TOP: 'top',
 };
+
+export const SLIPPAGE = {
+  DEFAULT: 2,
+  HIGH: 3,
+};

ui/ducks/swaps/swaps.js

@@ -80,6 +80,7 @@ import {
   SWAP_FAILED_ERROR,
   SWAPS_FETCH_ORDER_CONFLICT,
   ALLOWED_SMART_TRANSACTIONS_CHAIN_IDS,
+  SLIPPAGE,
 } from '../../../shared/constants/swaps';
 import {
   TRANSACTION_TYPES,
@@ -108,7 +109,7 @@ const initialState = {
   fromTokenInputValue: '',
   fromTokenError: null,
   isFeatureFlagLoaded: false,
-  maxSlippage: 3,
+  maxSlippage: SLIPPAGE.DEFAULT,
   quotesFetchStartTime: null,
   reviewSwapClickedTimestamp: null,
   topAssets: {},
@@ -733,7 +734,7 @@ export const fetchQuotesAndSetQuoteState = (
         token_to: toTokenSymbol,
         request_type: balanceError ? 'Quote' : 'Order',
         slippage: maxSlippage,
-        custom_slippage: maxSlippage !== 2,
+        custom_slippage: maxSlippage !== SLIPPAGE.DEFAULT,
         is_hardware_wallet: hardwareWalletUsed,
         hardware_wallet_type: hardwareWalletType,
         stx_enabled: smartTransactionsEnabled,
@@ -787,7 +788,7 @@ export const fetchQuotesAndSetQuoteState = (
             token_to: toTokenSymbol,
             request_type: balanceError ? 'Quote' : 'Order',
             slippage: maxSlippage,
-            custom_slippage: maxSlippage !== 2,
+            custom_slippage: maxSlippage !== SLIPPAGE.DEFAULT,
             is_hardware_wallet: hardwareWalletUsed,
             hardware_wallet_type: hardwareWalletType,
             stx_enabled: smartTransactionsEnabled,
@@ -812,7 +813,7 @@ export const fetchQuotesAndSetQuoteState = (
             ),
             request_type: balanceError ? 'Quote' : 'Order',
             slippage: maxSlippage,
-            custom_slippage: maxSlippage !== 2,
+            custom_slippage: maxSlippage !== SLIPPAGE.DEFAULT,
             response_time: Date.now() - fetchStartTime,
             best_quote_source: newSelectedQuote.aggregator,
             available_quotes: Object.values(fetchedQuotes)?.length,

ui/pages/swaps/awaiting-swap/awaiting-swap.test.js

@@ -5,6 +5,7 @@ import {
   renderWithProvider,
   createSwapsMockStore,
 } from '../../../../test/jest';
+import { SLIPPAGE } from '../../../../shared/constants/swaps';
 import AwaitingSwap from '.';
 
 const createProps = (customProps = {}) => {
@@ -14,7 +15,7 @@ const createProps = (customProps = {}) => {
     tokensReceived: 'tokens received:',
     submittingSwap: true,
     inputValue: 5,
-    maxSlippage: 3,
+    maxSlippage: SLIPPAGE.DEFAULT,
     ...customProps,
   };
 };

ui/pages/swaps/build-quote/__snapshots__/build-quote.test.js.snap

@@ -6,16 +6,16 @@ exports[`BuildQuote renders the component with initial props 1`] = `
   role="radiogroup"
 >
   <button
-    aria-checked="false"
-    class="button-group__button radio-button"
+    aria-checked="true"
+    class="button-group__button radio-button button-group__button--active radio-button--active"
     data-testid="button-group__button0"
     role="radio"
   >
     2%
   </button>
   <button
-    aria-checked="true"
-    class="button-group__button radio-button button-group__button--active radio-button--active"
+    aria-checked="false"
+    class="button-group__button radio-button"
     data-testid="button-group__button1"
     role="radio"
   >

ui/pages/swaps/slippage-buttons/__snapshots__/slippage-buttons.test.js.snap

@@ -21,16 +21,16 @@ exports[`SlippageButtons renders the component with initial props 2`] = `
   role="radiogroup"
 >
   <button
-    aria-checked="true"
-    class="button-group__button radio-button button-group__button--active radio-button--active"
+    aria-checked="false"
+    class="button-group__button radio-button"
     data-testid="button-group__button0"
     role="radio"
   >
     2%
   </button>
   <button
-    aria-checked="false"
-    class="button-group__button radio-button"
+    aria-checked="true"
+    class="button-group__button radio-button button-group__button--active radio-button--active"
     data-testid="button-group__button1"
     role="radio"
   >
@@ -68,16 +68,16 @@ exports[`SlippageButtons renders the component with the Smart Transaction opt-in
   role="radiogroup"
 >
   <button
-    aria-checked="true"
-    class="button-group__button radio-button button-group__button--active radio-button--active"
+    aria-checked="false"
+    class="button-group__button radio-button"
     data-testid="button-group__button0"
     role="radio"
   >
     2%
   </button>
   <button
-    aria-checked="false"
-    class="button-group__button radio-button"
+    aria-checked="true"
+    class="button-group__button radio-button button-group__button--active radio-button--active"
     data-testid="button-group__button1"
     role="radio"
   >

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

@@ -15,6 +15,7 @@ import {
   DISPLAY,
 } from '../../../helpers/constants/design-system';
 import { getTranslatedStxErrorMessage } from '../swaps.util';
+import { SLIPPAGE } from '../../../../shared/constants/swaps';
 
 export default function SlippageButtons({
   onSelect,
@@ -30,8 +31,7 @@ export default function SlippageButtons({
   const [customValue, setCustomValue] = useState(() => {
     if (
       typeof currentSlippage === 'number' &&
-      currentSlippage !== 2 &&
-      currentSlippage !== 3
+      !Object.values(SLIPPAGE).includes(currentSlippage)
     ) {
       return currentSlippage.toString();
     }
@@ -39,17 +39,17 @@ export default function SlippageButtons({
   });
   const [enteringCustomValue, setEnteringCustomValue] = useState(false);
   const [activeButtonIndex, setActiveButtonIndex] = useState(() => {
-    if (currentSlippage === 3) {
-      return 1;
-    } else if (currentSlippage === 2) {
-      return 0;
+    if (currentSlippage === SLIPPAGE.HIGH) {
+      return 1; // 3% slippage.
+    } else if (currentSlippage === SLIPPAGE.DEFAULT) {
+      return 0; // 2% slippage.
     } else if (typeof currentSlippage === 'number') {
-      return 2;
+      return 2; // Custom slippage.
     }
-    return 1; // Choose activeButtonIndex = 1 for 3% slippage by default.
+    return 0;
   });
   const [open, setOpen] = useState(() => {
-    return currentSlippage !== 3; // Only open Advanced Options by default if it's not default 3% slippage.
+    return currentSlippage !== SLIPPAGE.DEFAULT; // Only open Advanced Options by default if it's not default slippage.
   });
   const [inputRef, setInputRef] = useState(null);
 
@@ -133,20 +133,20 @@ export default function SlippageButtons({
                       setCustomValue('');
                       setEnteringCustomValue(false);
                       setActiveButtonIndex(0);
-                      onSelect(2);
+                      onSelect(SLIPPAGE.DEFAULT);
                     }}
                   >
-                    2%
+                    {t('swapSlippagePercent', [SLIPPAGE.DEFAULT])}
                   </Button>
                   <Button
                     onClick={() => {
                       setCustomValue('');
                       setEnteringCustomValue(false);
                       setActiveButtonIndex(1);
-                      onSelect(3);
+                      onSelect(SLIPPAGE.HIGH);
                     }}
                   >
-                    3%
+                    {t('swapSlippagePercent', [SLIPPAGE.HIGH])}
                   </Button>
                   <Button
                     className={classnames(

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

@@ -7,7 +7,7 @@ const createProps = (customProps = {}) => {
   return {
     onSelect: jest.fn(),
     maxAllowedSlippage: 15,
-    currentSlippage: 2,
+    currentSlippage: 3,
     smartTransactionsEnabled: false,
     ...customProps,
   };