diff --git a/ui/app/pages/swaps/build-quote/build-quote.js b/ui/app/pages/swaps/build-quote/build-quote.js index dce6ffafc..10008e4ae 100644 --- a/ui/app/pages/swaps/build-quote/build-quote.js +++ b/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} /> diff --git a/ui/app/pages/swaps/index.js b/ui/app/pages/swaps/index.js index 04f4505b3..d4a350cbf 100644 --- a/ui/app/pages/swaps/index.js +++ b/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); diff --git a/ui/app/pages/swaps/slippage-buttons/index.scss b/ui/app/pages/swaps/slippage-buttons/index.scss index 430c9b259..f9e2df7bc 100644 --- a/ui/app/pages/swaps/slippage-buttons/index.scss +++ b/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; - } + margin-bottom: 8px; } &__header-text { @include H6; margin-right: 6px; - color: $Blue-500; font-weight: 900; } diff --git a/ui/app/pages/swaps/slippage-buttons/slippage-buttons.js b/ui/app/pages/swaps/slippage-buttons/slippage-buttons.js index 04269f3fe..83b230062 100644 --- a/ui/app/pages/swaps/slippage-buttons/slippage-buttons.js +++ b/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 (
- +
- {open && ( -
-
-
- {t('swapsMaxSlippage')} -
- +
+
+
+ {t('swapsMaxSlippage')}
- +
+ + + + - - - -
- )} + {enteringCustomValue ? ( +
+ { + 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 || ''} + /> +
+ ) : ( + customValueText + )} + {(customValue || enteringCustomValue) && ( +
%
+ )} + + +
{errorText && (
{errorText}
)} @@ -159,4 +164,5 @@ export default function SlippageButtons({ onSelect, maxAllowedSlippage }) { SlippageButtons.propTypes = { onSelect: PropTypes.func.isRequired, maxAllowedSlippage: PropTypes.number.isRequired, + currentSlippage: PropTypes.number, };