A Metamask fork with Infura removed and default networks editable
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
ciphermask/ui/app/pages/swaps/fee-card/fee-card.js

99 lines
3.0 KiB

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,
sourceTokenSymbol,
onFeeCardTokenApprovalClick,
}) {
const t = useContext(I18nContext)
return (
<div className="fee-card">
<div className="fee-card__main">
<div className="fee-card__row-header">
<div>
<div className="fee-card__row-header-text--bold">
{t('swapEstimatedNetworkFee')}
</div>
</div>
<div>
<div className="fee-card__row-header-secondary--bold">
{primaryFee.fee}
</div>
{secondaryFee && (
<div className="fee-card__row-header-primary--bold">
{secondaryFee.fee}
</div>
)}
</div>
</div>
<div className="fee-card__row-header" onClick={() => onFeeCardMaxRowClick()}>
<div>
<div className="fee-card__row-header-text">
{t('swapMaxNetworkFees')}
</div>
<div className="fee-card__link">
{t('edit')}
</div>
<div className="fee-card__row-label">
<InfoTooltip
position="top"
contentText={t('swapMaxNetworkFeeInfo')}
/>
</div>
</div>
<div>
<div className="fee-card__row-header-secondary">
{primaryFee.maxFee}
</div>
{secondaryFee?.maxFee !== undefined && (
<div className="fee-card__row-header-primary">
{secondaryFee.maxFee}
</div>
)}
</div>
</div>
{!hideTokenApprovalRow && (
<div className="fee-card__top-bordered-row">
<div className="fee-card__row-label">
<div className="fee-card__row-header-text">
{t('swapThisWillAllowApprove', [tokenApprovalTextComponent])}
</div>
<div className="fee-card__link" onClick={() => onFeeCardTokenApprovalClick()}>
{t('swapEditLimit')}
</div>
<InfoTooltip
position="top"
contentText={t('swapEnableDescription', [sourceTokenSymbol])}
/>
</div>
</div>
)}
</div>
</div>
)
}
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,
sourceTokenSymbol: PropTypes.string,
onFeeCardTokenApprovalClick: PropTypes.func,
}