metamask-extension/ui/app/pages/swaps/slippage-buttons/slippage-buttons.js

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 (
    <div className="slippage-buttons">
      <div
        onClick={() => setOpen(!open)}
        className={classnames('slippage-buttons__header', {
          'slippage-buttons__header--open': open,
        })}
      >
        <div className="slippage-buttons__header-text">{t('swapsAdvancedOptions')}</div>
        {open ? <i className="fa fa-angle-up" /> : <i className="fa fa-angle-down" />}
      </div>
      <div className="slippage-buttons__content">
        {open && (
          <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(1)
                }}
              >
                1%
              </Button>
              <Button
                onClick={() => {
                  setCustomValue('')
                  setEnteringCustomValue(false)
                  setActiveButtonIndex(1)
                  onSelect(2)
                }}
              >
                2%
              </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(event.target.value)
                        }}
                        type="number"
                        step="0.1"
                        ref={setInputRef}
                        onBlur={() => {
                          setEnteringCustomValue(false)
                          if (customValue === '0') {
                            setCustomValue('')
                            setActiveButtonIndex(1)
                          }
                        }}
                        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,
}