1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 15:35:46 +01:00
metamask-extension/ui/pages/swaps/slippage-buttons/slippage-buttons.js

172 lines
5.3 KiB
JavaScript
Raw Normal View History

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';
2020-10-06 20:28:38 +02:00
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);
2020-10-06 20:28:38 +02:00
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');
}
2020-10-06 20:28:38 +02:00
}
const customValueText = customValue || t('swapCustom');
2020-10-06 20:28:38 +02:00
useEffect(() => {
2020-11-03 00:41:28 +01:00
if (
inputRef &&
enteringCustomValue &&
window.document.activeElement !== inputRef
) {
inputRef.focus();
2020-10-06 20:28:38 +02:00
}
}, [inputRef, enteringCustomValue]);
2020-10-06 20:28:38 +02:00
return (
<div className="slippage-buttons">
<div className="slippage-buttons__header">
2020-11-03 00:41:28 +01:00
<div className="slippage-buttons__header-text">
{t('swapsAdvancedOptions')}
</div>
</div>
2020-10-06 20:28:38 +02:00
<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')}
2020-10-06 20:28:38 +02:00
</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
2020-11-03 00:41:28 +01:00
className={classnames(
'slippage-buttons__button-group-custom-button',
{
'radio-button--danger': errorText,
},
2020-11-03 00:41:28 +01:00
)}
onClick={() => {
setActiveButtonIndex(2);
setEnteringCustomValue(true);
}}
2020-10-06 20:28:38 +02:00
>
{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>
2020-10-06 20:28:38 +02:00
{errorText && (
2020-11-03 00:41:28 +01:00
<div className="slippage-buttons__error-text">{errorText}</div>
2020-10-06 20:28:38 +02:00
)}
</div>
</div>
);
2020-10-06 20:28:38 +02:00
}
SlippageButtons.propTypes = {
onSelect: PropTypes.func.isRequired,
maxAllowedSlippage: PropTypes.number.isRequired,
currentSlippage: PropTypes.number,
};