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;
-
+    margin-bottom: 8px;
-    &--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,110 +61,98 @@ export default function SlippageButtons({ onSelect, maxAllowedSlippage }) {
 
   return (
     <div className="slippage-buttons">
-      <button
+      <div className="slippage-buttons__header">
-        onClick={() => setOpen(!open)}
-        className={classnames('slippage-buttons__header', {
-          'slippage-buttons__header--open': open,
-        })}
-      >
         <div className="slippage-buttons__header-text">
           {t('swapsAdvancedOptions')}
         </div>
-        {open ? (
+      </div>
-          <i className="fa fa-angle-up" />
-        ) : (
-          <i className="fa fa-angle-down" />
-        )}
-      </button>
       <div className="slippage-buttons__content">
-        {open && (
+        <div className="slippage-buttons__dropdown-content">
-          <div className="slippage-buttons__dropdown-content">
+          <div className="slippage-buttons__buttons-prefix">
-            <div className="slippage-buttons__buttons-prefix">
+            <div className="slippage-buttons__prefix-text">
-              <div className="slippage-buttons__prefix-text">
+              {t('swapsMaxSlippage')}
-                {t('swapsMaxSlippage')}
-              </div>
-              <InfoTooltip
-                position="top"
-                contentText={t('swapAdvancedSlippageInfo')}
-              />
             </div>
-            <ButtonGroup
+            <InfoTooltip
-              defaultActiveButtonIndex={
+              position="top"
-                activeButtonIndex === 2 && !customValue ? 1 : activeButtonIndex
+              contentText={t('swapAdvancedSlippageInfo')}
-              }
+            />
-              variant="radiogroup"
-              newActiveButtonIndex={activeButtonIndex}
-              className={classnames(
-                'button-group',
-                'slippage-buttons__button-group',
-              )}
-            >
-              <Button
-                onClick={() => {
-                  setCustomValue('');
-                  setEnteringCustomValue(false);
-                  setActiveButtonIndex(0);
-                  onSelect(1);
-                }}
-              >
-                1%
-              </Button>
-              <Button
-                onClick={() => {
-                  setCustomValue('');
-                  setEnteringCustomValue(false);
-                  setActiveButtonIndex(1);
-                  onSelect(2);
-                }}
-              >
-                2%
-              </Button>
-              <Button
-                className={classnames(
-                  'slippage-buttons__button-group-custom-button',
-                  {
-                    'radio-button--danger': errorText,
-                  },
-                )}
-                onClick={() => {
-                  setActiveButtonIndex(2);
-                  setEnteringCustomValue(true);
-                }}
-              >
-                {enteringCustomValue ? (
-                  <div
-                    className={classnames('slippage-buttons__custom-input', {
-                      'slippage-buttons__custom-input--danger': errorText,
-                    })}
-                  >
-                    <input
-                      onChange={(event) => {
-                        setCustomValue(event.target.value);
-                        onSelect(Number(event.target.value));
-                      }}
-                      type="number"
-                      step="0.1"
-                      ref={setInputRef}
-                      onBlur={() => {
-                        setEnteringCustomValue(false);
-                        if (customValue === '0') {
-                          setCustomValue('');
-                          setActiveButtonIndex(1);
-                        }
-                      }}
-                      value={customValue || ''}
-                    />
-                  </div>
-                ) : (
-                  customValueText
-                )}
-                {(customValue || enteringCustomValue) && (
-                  <div className="slippage-buttons__percentage-suffix">%</div>
-                )}
-              </Button>
-            </ButtonGroup>
           </div>
-        )}
+          <ButtonGroup
+            defaultActiveButtonIndex={
+              activeButtonIndex === 2 && !customValue ? 1 : activeButtonIndex
+            }
+            variant="radiogroup"
+            newActiveButtonIndex={activeButtonIndex}
+            className={classnames(
+              'button-group',
+              'slippage-buttons__button-group',
+            )}
+          >
+            <Button
+              onClick={() => {
+                setCustomValue('');
+                setEnteringCustomValue(false);
+                setActiveButtonIndex(0);
+                onSelect(2);
+              }}
+            >
+              2%
+            </Button>
+            <Button
+              onClick={() => {
+                setCustomValue('');
+                setEnteringCustomValue(false);
+                setActiveButtonIndex(1);
+                onSelect(3);
+              }}
+            >
+              3%
+            </Button>
+            <Button
+              className={classnames(
+                'slippage-buttons__button-group-custom-button',
+                {
+                  'radio-button--danger': errorText,
+                },
+              )}
+              onClick={() => {
+                setActiveButtonIndex(2);
+                setEnteringCustomValue(true);
+              }}
+            >
+              {enteringCustomValue ? (
+                <div
+                  className={classnames('slippage-buttons__custom-input', {
+                    'slippage-buttons__custom-input--danger': errorText,
+                  })}
+                >
+                  <input
+                    onChange={(event) => {
+                      setCustomValue(event.target.value);
+                      onSelect(Number(event.target.value));
+                    }}
+                    type="number"
+                    step="0.1"
+                    ref={setInputRef}
+                    onBlur={() => {
+                      setEnteringCustomValue(false);
+                      if (customValue === '0') {
+                        setCustomValue('');
+                        setActiveButtonIndex(1);
+                      }
+                    }}
+                    value={customValue || ''}
+                  />
+                </div>
+              ) : (
+                customValueText
+              )}
+              {(customValue || enteringCustomValue) && (
+                <div className="slippage-buttons__percentage-suffix">%</div>
+              )}
+            </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,
 };