import React, { useContext } from 'react' import PropTypes from 'prop-types' import { useSelector } from 'react-redux' import { I18nContext } from '../../../../contexts/i18n' import { getMetaMaskFeeAmount } from '../../../../ducks/swaps/swaps' import InfoTooltip from '../../../../components/ui/info-tooltip' import ExchangeRateDisplay from '../../exchange-rate-display' const QuoteDetails = ({ slippage, sourceTokenValue, sourceTokenSymbol, destinationTokenValue, destinationTokenSymbol, liquiditySourceKey, minimumAmountReceived, feeInEth, networkFees, }) => { const t = useContext(I18nContext) const metaMaskFee = useSelector(getMetaMaskFeeAmount) return (
{t('swapRate')}
{t('swapMaxSlippage')}
{`${slippage}%`}
{t('swapAmountReceived')}
{minimumAmountReceived}{` ${destinationTokenSymbol}`}
{t('swapEstimatedNetworkFees')}
{feeInEth}{` (${networkFees})`}
{t('swapSource')}
{t(liquiditySourceKey)}
{t('swapMetaMaskFee')}
{t('swapMetaMaskFeeDescription', [metaMaskFee])}
) } QuoteDetails.propTypes = { slippage: PropTypes.number.isRequired, sourceTokenValue: PropTypes.string.isRequired, sourceTokenSymbol: PropTypes.string.isRequired, destinationTokenValue: PropTypes.string.isRequired, destinationTokenSymbol: PropTypes.string.isRequired, liquiditySourceKey: PropTypes.string.isRequired, minimumAmountReceived: PropTypes.string.isRequired, feeInEth: PropTypes.string.isRequired, networkFees: PropTypes.string.isRequired, } export default QuoteDetails