import React, { useContext } from 'react'; import PropTypes from 'prop-types'; import { I18nContext } from '../../../contexts/i18n'; import InfoTooltip from '../../../components/ui/info-tooltip'; import { MAINNET_CHAIN_ID, BSC_CHAIN_ID, LOCALHOST_CHAIN_ID, } from '../../../../../shared/constants/network'; export default function FeeCard({ primaryFee, secondaryFee, hideTokenApprovalRow, onFeeCardMaxRowClick, tokenApprovalTextComponent, tokenApprovalSourceTokenSymbol, onTokenApprovalClick, metaMaskFee, isBestQuote, numberOfQuotes, onQuotesClick, tokenConversionRate, chainId, }) { const t = useContext(I18nContext); let bestQuoteText = ''; if (isBestQuote && tokenConversionRate) { bestQuoteText = t('swapUsingBestQuote'); } else if (tokenConversionRate) { bestQuoteText = t('swapBetterQuoteAvailable'); } const getTranslatedNetworkName = () => { switch (chainId) { case MAINNET_CHAIN_ID: return t('networkNameEthereum'); case BSC_CHAIN_ID: return t('networkNameBSC'); case LOCALHOST_CHAIN_ID: return t('networkNameTestnet'); default: throw new Error('This network is not supported for token swaps'); } }; return (
{bestQuoteText && (

{bestQuoteText}

)}

{t('swapNQuotes', [numberOfQuotes])}

{t('swapEstimatedNetworkFee')}

{t('swapNetworkFeeSummary', [getTranslatedNetworkName()])}

{t('swapEstimatedNetworkFeeSummary', [ {t('swapEstimatedNetworkFee')} , ])}

{t('swapMaxNetworkFeeInfo', [ {t('swapMaxNetworkFees')} , ])}

} containerClassName="fee-card__info-tooltip-content-container" wrapperClassName="fee-card__row-label fee-card__info-tooltip-container" wide />
{primaryFee.fee}
{secondaryFee && (
{secondaryFee.fee}
)}
onFeeCardMaxRowClick()} >
{t('swapMaxNetworkFees')}
{t('edit')}
{primaryFee.maxFee}
{secondaryFee?.maxFee !== undefined && (
{secondaryFee.maxFee}
)}
{!hideTokenApprovalRow && (
{t('swapThisWillAllowApprove', [tokenApprovalTextComponent])}
onTokenApprovalClick()} > {t('swapEditLimit')}
)}
{t('swapQuoteIncludesRate', [metaMaskFee])}
); } FeeCard.propTypes = { primaryFee: PropTypes.shape({ fee: PropTypes.string.isRequired, maxFee: PropTypes.string.isRequired, }).isRequired, secondaryFee: PropTypes.shape({ fee: PropTypes.string.isRequired, maxFee: PropTypes.string.isRequired, }), onFeeCardMaxRowClick: PropTypes.func.isRequired, hideTokenApprovalRow: PropTypes.bool.isRequired, tokenApprovalTextComponent: PropTypes.node, tokenApprovalSourceTokenSymbol: PropTypes.string, onTokenApprovalClick: PropTypes.func, metaMaskFee: PropTypes.string.isRequired, isBestQuote: PropTypes.bool, onQuotesClick: PropTypes.func.isRequired, numberOfQuotes: PropTypes.number.isRequired, tokenConversionRate: PropTypes.number, chainId: PropTypes.string.isRequired, };