m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 19:26:13 +02: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,
customGasLimitMessage: PropTypes.string,
customTotalSupplement: PropTypes.string,
isSwap: PropTypes.boolean,
isSwap: PropTypes.bool,
value: PropTypes.string,
conversionRate: PropTypes.string,
conversionRate: PropTypes.number,
}
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 { I18nContext } from '../../../contexts/i18n'
import InfoTooltip from '../../../components/ui/info-tooltip'
export default function FeeCard ({
feeRowText,
primaryFee,
secondaryFee,
thirdRow,
maxFeeRow,
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">
{feeRowText}
{t('swapEstimatedNetworkFee')}
</div>
</div>
<div>
@ -29,18 +34,18 @@ export default function FeeCard ({
)}
</div>
</div>
<div className="fee-card__row-header" onClick={() => maxFeeRow.onClick()}>
<div className="fee-card__row-header" onClick={() => onFeeCardMaxRowClick()}>
<div>
<div className="fee-card__row-header-text">
{maxFeeRow.text}
{t('swapMaxNetworkFees')}
</div>
<div className="fee-card__link">
{maxFeeRow.linkText}
{t('edit')}
</div>
<div className="fee-card__row-label">
<InfoTooltip
position="top"
contentText={maxFeeRow.tooltipText}
contentText={t('swapMaxNetworkFeeInfo')}
/>
</div>
</div>
@ -55,18 +60,18 @@ export default function FeeCard ({
)}
</div>
</div>
{thirdRow && !thirdRow.hide && (
{!hideTokenApprovalRow && (
<div className="fee-card__top-bordered-row">
<div className="fee-card__row-label">
<div className="fee-card__row-header-text">
{thirdRow.text}
{t('swapThisWillAllowApprove', [tokenApprovalTextComponent])}
</div>
<div className="fee-card__link" onClick={() => thirdRow.onClick()}>
{thirdRow.linkText}
<div className="fee-card__link" onClick={() => onFeeCardTokenApprovalClick()}>
{t('swapEditLimit')}
</div>
<InfoTooltip
position="top"
contentText={thirdRow.tooltipText}
contentText={t('swapEnableDescription', [sourceTokenSymbol])}
/>
</div>
</div>
@ -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,
sourceTokenSymbol: PropTypes.string,
onFeeCardTokenApprovalClick: PropTypes.func,
}

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])
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 = (
<span
key="swaps-view-quote-approve-symbol-1"
className="view-quote__bold"
@ -501,7 +501,6 @@ export default function ViewQuote () {
})}
>
<FeeCard
feeRowText={t('swapEstimatedNetworkFee')}
primaryFee={({
fee: feeInEth,
maxFee: maxFeeInEth,
@ -510,19 +509,13 @@ export default function ViewQuote () {
fee: feeInFiat,
maxFee: maxFeeInFiat,
})}
maxFeeRow={({
text: t('swapMaxNetworkFees'),
linkText: t('edit'),
tooltipText: t('swapMaxNetworkFeeInfo'),
onClick: onFeeCardMaxRowClickHandler,
})}
thirdRow={({
text: t('swapThisWillAllowApprove', [thirdRowTextComponent]),
linkText: t('swapEditLimit'),
tooltipText: t('swapEnableDescription', [sourceTokenSymbol]),
onClick: onFeeCardThirdRowClickHandler,
hide: !approveTxParams || (balanceError && !warningHidden),
})}
onFeeCardMaxRowClick={onFeeCardMaxRowClick}
hideTokenApprovalRow={
!approveTxParams || (balanceError && !warningHidden)
}
tokenApprovalTextComponent={tokenApprovalTextComponent}
sourceTokenSymbol={sourceTokenSymbol}
onFeeCardTokenApprovalClick={onFeeCardTokenApprovalClick}
/>
</div>
</div>