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 (