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 }) { const t = useContext(I18nContext) const [open, setOpen] = useState(false) const [customValue, setCustomValue] = useState('') const [enteringCustomValue, setEnteringCustomValue] = useState(false) const [activeButtonIndex, setActiveButtonIndex] = useState(1) const [inputRef, setInputRef] = useState(null) let errorText = '' if (customValue && Number(customValue) <= 0) { errorText = t('swapSlippageTooLow') } else if (customValue && Number(customValue) < 0.5) { errorText = t('swapLowSlippageError') } else if (customValue && Number(customValue) > 5) { errorText = t('swapHighSlippageWarning') } const customValueText = customValue || t('swapCustom') useEffect(() => { if ( inputRef && enteringCustomValue && window.document.activeElement !== inputRef ) { inputRef.focus() } }, [inputRef, enteringCustomValue]) return (
{open && (
{t('swapsMaxSlippage')}
)} {errorText && (
{errorText}
)}
) } SlippageButtons.propTypes = { onSelect: PropTypes.func.isRequired, }