import React, { useContext } from 'react' import PropTypes from 'prop-types' import { I18nContext } from '../../../contexts/i18n' import InfoTooltip from '../../../components/ui/info-tooltip' export default function FeeCard ({ primaryFee, secondaryFee, hideTokenApprovalRow, onFeeCardMaxRowClick, tokenApprovalTextComponent, tokenApprovalSourceTokenSymbol, onTokenApprovalClick, }) { const t = useContext(I18nContext) return (
{t('swapEstimatedNetworkFee')}

{ t('swapNetworkFeeSummary') }

{ 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')}
)}
) } 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, }