Increase default slippage from 2% to 3%, show Advanced Options by default (#10842)

* Increase default slippage from 2% to 3%, show Advanced Options by default

* Disable opening / closing of Advanced Options on the Swap page

* Pre-select previously used slippage value when going back to the Swap page

* Fix lint issues

* Use a callback for setting up an initial customValue

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

@@ -512,6 +512,7 @@ export default function BuildQuote({
               setMaxSlippage(newSlippage);
             }}
             maxAllowedSlippage={MAX_ALLOWED_SLIPPAGE}
+            currentSlippage={maxSlippage}
           />
         </div>
       </div>

ui/app/pages/swaps/index.js

@@ -84,7 +84,7 @@ export default function Swap() {
   const { destinationTokenInfo = {} } = fetchParams?.metaData || {};
 
   const [inputValue, setInputValue] = useState(fetchParams?.value || '');
-  const [maxSlippage, setMaxSlippage] = useState(fetchParams?.slippage || 2);
+  const [maxSlippage, setMaxSlippage] = useState(fetchParams?.slippage || 3);
 
   const routeState = useSelector(getBackgroundSwapRouteState);
   const selectedAccount = useSelector(getSelectedAccount);

ui/app/pages/swaps/slippage-buttons/index.scss

@@ -7,23 +7,18 @@
   &__header {
     display: flex;
     align-items: center;
-    color: $Blue-500;
     margin-bottom: 0;
     margin-left: auto;
     margin-right: auto;
     cursor: pointer;
     background: unset;
-
-    &--open {
     margin-bottom: 8px;
   }
-  }
 
   &__header-text {
     @include H6;
 
     margin-right: 6px;
-    color: $Blue-500;
     font-weight: 900;
   }
 

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

@@ -6,12 +6,29 @@ 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, maxAllowedSlippage }) {
+export default function SlippageButtons({
+  onSelect,
+  maxAllowedSlippage,
+  currentSlippage,
+}) {
   const t = useContext(I18nContext);
-  const [open, setOpen] = useState(false);
-  const [customValue, setCustomValue] = useState('');
+  const [customValue, setCustomValue] = useState(() => {
+    if (currentSlippage && currentSlippage !== 2 && currentSlippage !== 3) {
+      return currentSlippage;
+    }
+    return '';
+  });
   const [enteringCustomValue, setEnteringCustomValue] = useState(false);
-  const [activeButtonIndex, setActiveButtonIndex] = useState(1);
+  const [activeButtonIndex, setActiveButtonIndex] = useState(() => {
+    if (currentSlippage === 3) {
+      return 1;
+    } else if (currentSlippage === 2) {
+      return 0;
+    } else if (currentSlippage) {
+      return 2;
+    }
+    return 1; // Choose activeButtonIndex = 1 for 3% slippage by default.
+  });
   const [inputRef, setInputRef] = useState(null);
 
   let errorText = '';
@@ -44,23 +61,12 @@ export default function SlippageButtons({ onSelect, maxAllowedSlippage }) {
 
   return (
     <div className="slippage-buttons">
-      <button
-        onClick={() => setOpen(!open)}
-        className={classnames('slippage-buttons__header', {
-          'slippage-buttons__header--open': open,
-        })}
-      >
+      <div className="slippage-buttons__header">
         <div className="slippage-buttons__header-text">
           {t('swapsAdvancedOptions')}
         </div>
-        {open ? (
-          <i className="fa fa-angle-up" />
-        ) : (
-          <i className="fa fa-angle-down" />
-        )}
-      </button>
+      </div>
       <div className="slippage-buttons__content">
-        {open && (
         <div className="slippage-buttons__dropdown-content">
           <div className="slippage-buttons__buttons-prefix">
             <div className="slippage-buttons__prefix-text">
@@ -87,20 +93,20 @@ export default function SlippageButtons({ onSelect, maxAllowedSlippage }) {
                 setCustomValue('');
                 setEnteringCustomValue(false);
                 setActiveButtonIndex(0);
-                  onSelect(1);
+                onSelect(2);
               }}
             >
-                1%
+              2%
             </Button>
             <Button
               onClick={() => {
                 setCustomValue('');
                 setEnteringCustomValue(false);
                 setActiveButtonIndex(1);
-                  onSelect(2);
+                onSelect(3);
               }}
             >
-                2%
+              3%
             </Button>
             <Button
               className={classnames(
@@ -147,7 +153,6 @@ export default function SlippageButtons({ onSelect, maxAllowedSlippage }) {
             </Button>
           </ButtonGroup>
         </div>
-        )}
         {errorText && (
           <div className="slippage-buttons__error-text">{errorText}</div>
         )}
@@ -159,4 +164,5 @@ export default function SlippageButtons({ onSelect, maxAllowedSlippage }) {
 SlippageButtons.propTypes = {
   onSelect: PropTypes.func.isRequired,
   maxAllowedSlippage: PropTypes.number.isRequired,
+  currentSlippage: PropTypes.number,
 };