diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js b/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js index 9c8969085..061f43a95 100644 --- a/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js +++ b/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js @@ -51,9 +51,9 @@ export default class GasModalPageContainer extends Component { isEthereumNetwork: PropTypes.bool, customGasLimitMessage: PropTypes.string, customTotalSupplement: PropTypes.string, - isSwap: PropTypes.boolean, + isSwap: PropTypes.bool, value: PropTypes.string, - conversionRate: PropTypes.string, + conversionRate: PropTypes.number, } state = { diff --git a/ui/app/pages/swaps/fee-card/fee-card.js b/ui/app/pages/swaps/fee-card/fee-card.js index d8caf51ad..61c173015 100644 --- a/ui/app/pages/swaps/fee-card/fee-card.js +++ b/ui/app/pages/swaps/fee-card/fee-card.js @@ -1,21 +1,26 @@ -import React from 'react' +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 ({ - feeRowText, primaryFee, secondaryFee, - thirdRow, - maxFeeRow, + hideTokenApprovalRow, + onFeeCardMaxRowClick, + tokenApprovalTextComponent, + tokenApprovalSourceTokenSymbol, + onTokenApprovalClick, }) { + const t = useContext(I18nContext) + return (
- {feeRowText} + {t('swapEstimatedNetworkFee')}
@@ -29,18 +34,18 @@ export default function FeeCard ({ )}
-
maxFeeRow.onClick()}> +
onFeeCardMaxRowClick()}>
- {maxFeeRow.text} + {t('swapMaxNetworkFees')}
- {maxFeeRow.linkText} + {t('edit')}
@@ -55,18 +60,18 @@ export default function FeeCard ({ )}
- {thirdRow && !thirdRow.hide && ( + {!hideTokenApprovalRow && (
- {thirdRow.text} + {t('swapThisWillAllowApprove', [tokenApprovalTextComponent])}
-
thirdRow.onClick()}> - {thirdRow.linkText} +
onTokenApprovalClick()}> + {t('swapEditLimit')}
@@ -77,7 +82,6 @@ export default function FeeCard ({ } FeeCard.propTypes = { - feeRowText: PropTypes.string.isRequired, primaryFee: PropTypes.shape({ fee: PropTypes.string.isRequired, maxFee: PropTypes.string.isRequired, @@ -86,23 +90,9 @@ FeeCard.propTypes = { fee: PropTypes.string.isRequired, maxFee: PropTypes.string.isRequired, }), - maxFeeRow: PropTypes.shape({ - text: PropTypes.string.isRequired, - linkText: PropTypes.string.isRequired, - tooltipText: PropTypes.string.isRequired, - onClick: PropTypes.func.isRequired, - }).isRequired, - thirdRow: PropTypes.shape({ - text: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.node, - ]).isRequired, - linkText: PropTypes.string.isRequired, - tooltipText: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.node, - ]).isRequired, - onClick: PropTypes.func.isRequired, - hide: PropTypes.bool.isRequired, - }), + onFeeCardMaxRowClick: PropTypes.func.isRequired, + hideTokenApprovalRow: PropTypes.bool.isRequired, + tokenApprovalTextComponent: PropTypes.node, + tokenApprovalSourceTokenSymbol: PropTypes.string, + onTokenApprovalClick: PropTypes.func, } diff --git a/ui/app/pages/swaps/select-quote-popover/select-quote-popover-constants.js b/ui/app/pages/swaps/select-quote-popover/select-quote-popover-constants.js index 2812b68d5..27f99be04 100644 --- a/ui/app/pages/swaps/select-quote-popover/select-quote-popover-constants.js +++ b/ui/app/pages/swaps/select-quote-popover/select-quote-popover-constants.js @@ -6,7 +6,7 @@ export const QUOTE_DATA_ROWS_PROPTYPES_SHAPE = PropTypes.shape({ destinationTokenDecimals: PropTypes.number.isRequired, destinationTokenSymbol: PropTypes.string.isRequired, destinationTokenValue: PropTypes.string.isRequired, - isBestQuote: PropTypes.bool.isRequired, + isBestQuote: PropTypes.bool, liquiditySource: PropTypes.string.isRequired, metaMaskFee: PropTypes.string.isRequired, networkFees: PropTypes.string.isRequired, diff --git a/ui/app/pages/swaps/view-quote/view-quote.js b/ui/app/pages/swaps/view-quote/view-quote.js index 19a19125f..a94b2319b 100644 --- a/ui/app/pages/swaps/view-quote/view-quote.js +++ b/ui/app/pages/swaps/view-quote/view-quote.js @@ -340,7 +340,7 @@ export default function ViewQuote () { } }, [sourceTokenSymbol, sourceTokenValue, destinationTokenSymbol, destinationTokenValue, fetchParams, topQuote, numberOfQuotes, feeInFiat, bestQuoteReviewedEvent, anonymousBestQuoteReviewedEvent]) - const onFeeCardThirdRowClickHandler = () => { + const onFeeCardTokenApprovalClick = () => { anonymousEditSpendLimitOpened() editSpendLimitOpened() dispatch(showModal({ @@ -375,7 +375,7 @@ export default function ViewQuote () { })) } - const onFeeCardMaxRowClickHandler = () => dispatch(showModal({ + const onFeeCardMaxRowClick = () => dispatch(showModal({ name: 'CUSTOMIZE_GAS', txData: { txParams: { ...tradeTxParams, gas: maxGasLimit } }, isSwap: true, @@ -396,7 +396,7 @@ export default function ViewQuote () { useFastestButtons: true, })) - const thirdRowTextComponent = ( + const tokenApprovalTextComponent = (