From c2ea04c7752efe136810fbdd66cbcf9e0cc0db18 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Mon, 29 Nov 2021 13:23:37 -0330 Subject: [PATCH] Adds multilayer fee display to erc20 token approval screen (#12824) * Adds multilayer fee display to erc20 token approval screen * Change bold property name --- .../multi-layer-fee-message.js | 6 +++ .../app/transaction-detail-item/index.scss | 4 ++ .../transaction-detail-item.component.js | 15 +++++-- .../confirm-approve-content.component.js | 43 ++++++++++++++----- .../confirm-approve-content/index.scss | 18 +++++++- ui/pages/confirm-approve/confirm-approve.js | 12 ++++-- 6 files changed, 81 insertions(+), 17 deletions(-) diff --git a/ui/components/app/multilayer-fee-message/multi-layer-fee-message.js b/ui/components/app/multilayer-fee-message/multi-layer-fee-message.js index 6dc671c89..22368d146 100644 --- a/ui/components/app/multilayer-fee-message/multi-layer-fee-message.js +++ b/ui/components/app/multilayer-fee-message/multi-layer-fee-message.js @@ -14,6 +14,7 @@ export default function MultilayerFeeMessage({ transaction, layer2fee, nativeCurrency, + plainStyle, }) { const t = useContext(I18nContext); @@ -57,12 +58,16 @@ export default function MultilayerFeeMessage({ key="total-item" detailTitle={t('layer1Fees')} detailTotal={layer1Total} + noBold={plainStyle} + flexWidthValues={plainStyle} /> ); @@ -72,4 +77,5 @@ MultilayerFeeMessage.propTypes = { transaction: PropTypes.object, layer2fee: PropTypes.string, nativeCurrency: PropTypes.string, + plainStyle: PropTypes.bool, }; diff --git a/ui/components/app/transaction-detail-item/index.scss b/ui/components/app/transaction-detail-item/index.scss index 5732e92c5..34c586d5d 100644 --- a/ui/components/app/transaction-detail-item/index.scss +++ b/ui/components/app/transaction-detail-item/index.scss @@ -14,6 +14,10 @@ flex-wrap: wrap; justify-content: end; width: 55%; + + &--flex-width { + width: auto; + } } .info-tooltip { diff --git a/ui/components/app/transaction-detail-item/transaction-detail-item.component.js b/ui/components/app/transaction-detail-item/transaction-detail-item.component.js index 463f52ade..3cc51414e 100644 --- a/ui/components/app/transaction-detail-item/transaction-detail-item.component.js +++ b/ui/components/app/transaction-detail-item/transaction-detail-item.component.js @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import classnames from 'classnames'; import Typography from '../../ui/typography/typography'; import { @@ -15,18 +16,24 @@ export default function TransactionDetailItem({ detailTotal = '', subTitle = '', subText = '', + boldHeadings = true, + flexWidthValues = false, }) { return (
{detailTitle} -
+
{detailText && ( {detailText} @@ -34,7 +41,7 @@ export default function TransactionDetailItem({ )} @@ -66,4 +73,6 @@ TransactionDetailItem.propTypes = { detailTotal: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), subTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), subText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), + boldHeadings: PropTypes.bool, + flexWidthValues: PropTypes.bool, }; diff --git a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js index a00a46e0d..47475b5a4 100644 --- a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js +++ b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js @@ -13,6 +13,7 @@ import Box from '../../../components/ui/box'; import Button from '../../../components/ui/button'; import MetaFoxLogo from '../../../components/ui/metafox-logo'; import Identicon from '../../../components/ui/identicon'; +import MultiLayerFeeMessage from '../../../components/app/multilayer-fee-message'; import CopyIcon from '../../../components/ui/icon/copy-icon.component'; import { TYPOGRAPHY, @@ -61,6 +62,8 @@ export default class ConfirmApproveContent extends Component { chainId: PropTypes.string, rpcPrefs: PropTypes.object, isContract: PropTypes.bool, + hexTransactionTotal: PropTypes.string, + isMultiLayerFeeNetwork: PropTypes.bool, }; state = { @@ -121,20 +124,40 @@ export default class ConfirmApproveContent extends Component { nativeCurrency, ethTransactionTotal, fiatTransactionTotal, + hexTransactionTotal, + txData, + isMultiLayerFeeNetwork, } = this.props; return (
-
- {t('feeAssociatedRequest')} -
-
-
- {formatCurrency(fiatTransactionTotal, currentCurrency)} + {isMultiLayerFeeNetwork ? ( +
+
+ {t('transactionDetailLayer2GasHeading')} + {`${ethTransactionTotal} ${nativeCurrency}`} +
+
-
- {`${ethTransactionTotal} ${nativeCurrency}`} -
-
+ ) : ( + <> +
+ {t('feeAssociatedRequest')} +
+
+
+ {formatCurrency(fiatTransactionTotal, currentCurrency)} +
+
+ {`${ethTransactionTotal} ${nativeCurrency}`} +
+
+ + )}
); } diff --git a/ui/pages/confirm-approve/confirm-approve-content/index.scss b/ui/pages/confirm-approve/confirm-approve-content/index.scss index 6422693e7..31bbd8458 100644 --- a/ui/pages/confirm-approve/confirm-approve-content/index.scss +++ b/ui/pages/confirm-approve/confirm-approve-content/index.scss @@ -254,12 +254,28 @@ color: #000; } - &__secondary-fee { + &__secondary-fee, + &__labelled-fee { @include H6; font-weight: normal; color: #8c8e94; } + + &__labelled-fee { + display: flex; + justify-content: space-between; + + h6.typography--h6 { + font-weight: normal; + } + } + } + + &__transaction-details-extra-content { + display: flex; + flex-flow: column; + width: 100%; } &__view-full-tx-button-wrapper { diff --git a/ui/pages/confirm-approve/confirm-approve.js b/ui/pages/confirm-approve/confirm-approve.js index a95f1ddf5..4d4aa1614 100644 --- a/ui/pages/confirm-approve/confirm-approve.js +++ b/ui/pages/confirm-approve/confirm-approve.js @@ -31,6 +31,7 @@ import { getNextSuggestedNonce, getCurrentChainId, getRpcPrefsForCurrentProvider, + getIsMultiLayerFeeNetwork, } from '../../selectors'; import { useApproveTransaction } from '../../hooks/useApproveTransaction'; @@ -64,6 +65,7 @@ export default function ConfirmApprove() { const customNonceValue = useSelector(getCustomNonceValue); const chainId = useSelector(getCurrentChainId); const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider); + const isMultiLayerFeeNetwork = useSelector(getIsMultiLayerFeeNetwork); const fromAddressIsLedger = useSelector(isAddressLedgerByFromAddress(from)); @@ -71,9 +73,11 @@ export default function ConfirmApprove() { currentNetworkTxList.find( ({ id }) => id === (Number(paramsTransactionId) || transactionId), ) || {}; - const { ethTransactionTotal, fiatTransactionTotal } = useSelector((state) => - transactionFeeSelector(state, transaction), - ); + const { + ethTransactionTotal, + fiatTransactionTotal, + hexTransactionTotal, + } = useSelector((state) => transactionFeeSelector(state, transaction)); const currentToken = (tokens && tokens.find(({ address }) => @@ -207,6 +211,7 @@ export default function ConfirmApprove() { nativeCurrency={nativeCurrency} ethTransactionTotal={ethTransactionTotal} fiatTransactionTotal={fiatTransactionTotal} + hexTransactionTotal={hexTransactionTotal} useNonceField={useNonceField} nextNonce={nextNonce} customNonceValue={customNonceValue} @@ -240,6 +245,7 @@ export default function ConfirmApprove() { chainId={chainId} rpcPrefs={rpcPrefs} isContract={isContract} + isMultiLayerFeeNetwork={isMultiLayerFeeNetwork} /> {showCustomizeGasPopover && (