m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Make FeeCard component specific to swaps

Browse Source
This commit is contained in:
Erik Marks 2020-10-14 10:06:17 -07:00
parent 38a0c5ec75
commit b31816d6f7
3 changed files with 36 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
View File

@ -51,9 +51,9 @@ export default class GasModalPageContainer extends Component {
isEthereumNetwork: PropTypes.bool, isEthereumNetwork: PropTypes.bool,
customGasLimitMessage: PropTypes.string, customGasLimitMessage: PropTypes.string,
customTotalSupplement: PropTypes.string, customTotalSupplement: PropTypes.string,
isSwap: PropTypes.boolean, isSwap: PropTypes.bool,
value: PropTypes.string, value: PropTypes.string,
conversionRate: PropTypes.string, conversionRate: PropTypes.number,
} }
state = { state = {

58
ui/app/pages/swaps/fee-card/fee-card.js
View File

@ -1,21 +1,26 @@
import React from 'react' import React, { useContext } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { I18nContext } from '../../../contexts/i18n'
import InfoTooltip from '../../../components/ui/info-tooltip' import InfoTooltip from '../../../components/ui/info-tooltip'
export default function FeeCard ({ export default function FeeCard ({
feeRowText,
primaryFee, primaryFee,
secondaryFee, secondaryFee,
thirdRow, hideTokenApprovalRow,
maxFeeRow, onFeeCardMaxRowClick,
tokenApprovalTextComponent,
sourceTokenSymbol,
onFeeCardTokenApprovalClick,
}) { }) {
const t = useContext(I18nContext)
return ( return (
<div className="fee-card"> <div className="fee-card">
<div className="fee-card__main"> <div className="fee-card__main">
<div className="fee-card__row-header"> <div className="fee-card__row-header">
<div> <div>
<div className="fee-card__row-header-text--bold"> <div className="fee-card__row-header-text--bold">
{feeRowText} {t('swapEstimatedNetworkFee')}
</div> </div>
</div> </div>
<div> <div>
@ -29,18 +34,18 @@ export default function FeeCard ({
)} )}
</div> </div>
</div> </div>
<div className="fee-card__row-header" onClick={() => maxFeeRow.onClick()}> <div className="fee-card__row-header" onClick={() => onFeeCardMaxRowClick()}>
<div> <div>
<div className="fee-card__row-header-text"> <div className="fee-card__row-header-text">
{maxFeeRow.text} {t('swapMaxNetworkFees')}
</div> </div>
<div className="fee-card__link"> <div className="fee-card__link">
{maxFeeRow.linkText} {t('edit')}
</div> </div>
<div className="fee-card__row-label"> <div className="fee-card__row-label">
<InfoTooltip <InfoTooltip
position="top" position="top"
contentText={maxFeeRow.tooltipText} contentText={t('swapMaxNetworkFeeInfo')}
/> />
</div> </div>
</div> </div>
@ -55,18 +60,18 @@ export default function FeeCard ({
)} )}
</div> </div>
</div> </div>
{thirdRow && !thirdRow.hide && ( {!hideTokenApprovalRow && (
<div className="fee-card__top-bordered-row"> <div className="fee-card__top-bordered-row">
<div className="fee-card__row-label"> <div className="fee-card__row-label">
<div className="fee-card__row-header-text"> <div className="fee-card__row-header-text">
{thirdRow.text} {t('swapThisWillAllowApprove', [tokenApprovalTextComponent])}
</div> </div>
<div className="fee-card__link" onClick={() => thirdRow.onClick()}> <div className="fee-card__link" onClick={() => onFeeCardTokenApprovalClick()}>
{thirdRow.linkText} {t('swapEditLimit')}
</div> </div>
<InfoTooltip <InfoTooltip
position="top" position="top"
contentText={thirdRow.tooltipText} contentText={t('swapEnableDescription', [sourceTokenSymbol])}
/> />
</div> </div>
</div> </div>
@ -77,7 +82,6 @@ export default function FeeCard ({
} }
FeeCard.propTypes = { FeeCard.propTypes = {
feeRowText: PropTypes.string.isRequired,
primaryFee: PropTypes.shape({ primaryFee: PropTypes.shape({
fee: PropTypes.string.isRequired, fee: PropTypes.string.isRequired,
maxFee: PropTypes.string.isRequired, maxFee: PropTypes.string.isRequired,
@ -86,23 +90,9 @@ FeeCard.propTypes = {
fee: PropTypes.string.isRequired, fee: PropTypes.string.isRequired,
maxFee: PropTypes.string.isRequired, maxFee: PropTypes.string.isRequired,
}), }),
maxFeeRow: PropTypes.shape({ onFeeCardMaxRowClick: PropTypes.func.isRequired,
text: PropTypes.string.isRequired, hideTokenApprovalRow: PropTypes.bool.isRequired,
linkText: PropTypes.string.isRequired, tokenApprovalTextComponent: PropTypes.node,
tooltipText: PropTypes.string.isRequired, sourceTokenSymbol: PropTypes.string,
onClick: PropTypes.func.isRequired, onFeeCardTokenApprovalClick: PropTypes.func,
}).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,
}),
} }

27
ui/app/pages/swaps/view-quote/view-quote.js
View File

@ -340,7 +340,7 @@ export default function ViewQuote () {
} }
}, [sourceTokenSymbol, sourceTokenValue, destinationTokenSymbol, destinationTokenValue, fetchParams, topQuote, numberOfQuotes, feeInFiat, bestQuoteReviewedEvent, anonymousBestQuoteReviewedEvent]) }, [sourceTokenSymbol, sourceTokenValue, destinationTokenSymbol, destinationTokenValue, fetchParams, topQuote, numberOfQuotes, feeInFiat, bestQuoteReviewedEvent, anonymousBestQuoteReviewedEvent])
const onFeeCardThirdRowClickHandler = () => { const onFeeCardTokenApprovalClick = () => {
anonymousEditSpendLimitOpened() anonymousEditSpendLimitOpened()
editSpendLimitOpened() editSpendLimitOpened()
dispatch(showModal({ dispatch(showModal({
@ -375,7 +375,7 @@ export default function ViewQuote () {
})) }))
} }
const onFeeCardMaxRowClickHandler = () => dispatch(showModal({ const onFeeCardMaxRowClick = () => dispatch(showModal({
name: 'CUSTOMIZE_GAS', name: 'CUSTOMIZE_GAS',
txData: { txParams: { ...tradeTxParams, gas: maxGasLimit } }, txData: { txParams: { ...tradeTxParams, gas: maxGasLimit } },
isSwap: true, isSwap: true,
@ -396,7 +396,7 @@ export default function ViewQuote () {
useFastestButtons: true, useFastestButtons: true,
})) }))
const thirdRowTextComponent = ( const tokenApprovalTextComponent = (
<span <span
key="swaps-view-quote-approve-symbol-1" key="swaps-view-quote-approve-symbol-1"
className="view-quote__bold" className="view-quote__bold"
@ -501,7 +501,6 @@ export default function ViewQuote () {
})} })}
> >
<FeeCard <FeeCard
feeRowText={t('swapEstimatedNetworkFee')}
primaryFee={({ primaryFee={({
fee: feeInEth, fee: feeInEth,
maxFee: maxFeeInEth, maxFee: maxFeeInEth,
@ -510,19 +509,13 @@ export default function ViewQuote () {
fee: feeInFiat, fee: feeInFiat,
maxFee: maxFeeInFiat, maxFee: maxFeeInFiat,
})} })}
maxFeeRow={({ onFeeCardMaxRowClick={onFeeCardMaxRowClick}
text: t('swapMaxNetworkFees'), hideTokenApprovalRow={
linkText: t('edit'), !approveTxParams || (balanceError && !warningHidden)
tooltipText: t('swapMaxNetworkFeeInfo'), }
onClick: onFeeCardMaxRowClickHandler, tokenApprovalTextComponent={tokenApprovalTextComponent}
})} sourceTokenSymbol={sourceTokenSymbol}
thirdRow={({ onFeeCardTokenApprovalClick={onFeeCardTokenApprovalClick}
text: t('swapThisWillAllowApprove', [thirdRowTextComponent]),
linkText: t('swapEditLimit'),
tooltipText: t('swapEnableDescription', [sourceTokenSymbol]),
onClick: onFeeCardThirdRowClickHandler,
hide: !approveTxParams || (balanceError && !warningHidden),
})}
/> />
</div> </div>
</div> </div>