mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-05 23:44:56 +01:00
d7754f39bd
* Allow 0% slippage, show a warning for 0 < slippage <= 1, disable “Review Swap” button for negative slippage * Update a translation key, use both new and old key until it’s translated everywhere * Keep an old key for `en`: swapSlippageTooLow * Fix an ESLint issue * Only use swapSlippageNegative, remove swapSlippageTooLow
172 lines
5.3 KiB
JavaScript
172 lines
5.3 KiB
JavaScript
import React, { useState, useEffect, useContext } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classnames from 'classnames';
|
|
import { I18nContext } from '../../../contexts/i18n';
|
|
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,
|
|
currentSlippage,
|
|
}) {
|
|
const t = useContext(I18nContext);
|
|
const [customValue, setCustomValue] = useState(() => {
|
|
if (
|
|
typeof currentSlippage === 'number' &&
|
|
currentSlippage !== 2 &&
|
|
currentSlippage !== 3
|
|
) {
|
|
return currentSlippage.toString();
|
|
}
|
|
return '';
|
|
});
|
|
const [enteringCustomValue, setEnteringCustomValue] = useState(false);
|
|
const [activeButtonIndex, setActiveButtonIndex] = useState(() => {
|
|
if (currentSlippage === 3) {
|
|
return 1;
|
|
} else if (currentSlippage === 2) {
|
|
return 0;
|
|
} else if (typeof currentSlippage === 'number') {
|
|
return 2;
|
|
}
|
|
return 1; // Choose activeButtonIndex = 1 for 3% slippage by default.
|
|
});
|
|
const [inputRef, setInputRef] = useState(null);
|
|
|
|
let errorText = '';
|
|
if (customValue) {
|
|
// customValue is a string, e.g. '0'
|
|
if (Number(customValue) < 0) {
|
|
errorText = t('swapSlippageNegative');
|
|
} else if (Number(customValue) > 0 && Number(customValue) <= 1) {
|
|
// We will not show this warning for 0% slippage, because we will only
|
|
// return non-slippage quotes from off-chain makers.
|
|
errorText = t('swapLowSlippageError');
|
|
} else if (
|
|
Number(customValue) >= 5 &&
|
|
Number(customValue) <= maxAllowedSlippage
|
|
) {
|
|
errorText = t('swapHighSlippageWarning');
|
|
} else if (Number(customValue) > maxAllowedSlippage) {
|
|
errorText = t('swapsExcessiveSlippageWarning');
|
|
}
|
|
}
|
|
|
|
const customValueText = customValue || t('swapCustom');
|
|
|
|
useEffect(() => {
|
|
if (
|
|
inputRef &&
|
|
enteringCustomValue &&
|
|
window.document.activeElement !== inputRef
|
|
) {
|
|
inputRef.focus();
|
|
}
|
|
}, [inputRef, enteringCustomValue]);
|
|
|
|
return (
|
|
<div className="slippage-buttons">
|
|
<div className="slippage-buttons__header">
|
|
<div className="slippage-buttons__header-text">
|
|
{t('swapsAdvancedOptions')}
|
|
</div>
|
|
</div>
|
|
<div className="slippage-buttons__content">
|
|
<div className="slippage-buttons__dropdown-content">
|
|
<div className="slippage-buttons__buttons-prefix">
|
|
<div className="slippage-buttons__prefix-text">
|
|
{t('swapsMaxSlippage')}
|
|
</div>
|
|
<InfoTooltip
|
|
position="top"
|
|
contentText={t('swapAdvancedSlippageInfo')}
|
|
/>
|
|
</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);
|
|
}}
|
|
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>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
SlippageButtons.propTypes = {
|
|
onSelect: PropTypes.func.isRequired,
|
|
maxAllowedSlippage: PropTypes.number.isRequired,
|
|
currentSlippage: PropTypes.number,
|
|
};
|