Adds multilayer fee display to erc20 token approval screen (#12824)

* Adds multilayer fee display to erc20 token approval screen

* Change bold property name

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}
       />
       <TransactionDetailItem
         key="total-item"
         detailTitle={t('total')}
         detailTotal={totalInEth}
         subTitle={t('transactionDetailMultiLayerTotalSubtitle')}
+        noBold={plainStyle}
+        flexWidthValues={plainStyle}
       />
     </>
   );
@@ -72,4 +77,5 @@ MultilayerFeeMessage.propTypes = {
   transaction: PropTypes.object,
   layer2fee: PropTypes.string,
   nativeCurrency: PropTypes.string,
+  plainStyle: PropTypes.bool,
 };

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 {

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 (
     <div className="transaction-detail-item">
       <div className="transaction-detail-item__row">
         <Typography
           color={detailTitleColor}
-          fontWeight={FONT_WEIGHT.BOLD}
+          fontWeight={boldHeadings ? FONT_WEIGHT.BOLD : FONT_WEIGHT.NORMAL}
           variant={TYPOGRAPHY.H6}
         >
           {detailTitle}
         </Typography>
-        <div className="transaction-detail-item__detail-values">
+        <div
+          className={classnames('transaction-detail-item__detail-values', {
+            'transaction-detail-item__detail-values--flex-width': flexWidthValues,
+          })}
+        >
           {detailText && (
             <Typography variant={TYPOGRAPHY.H6} color={COLORS.UI4}>
               {detailText}
@@ -34,7 +41,7 @@ export default function TransactionDetailItem({
           )}
           <Typography
             color={COLORS.BLACK}
-            fontWeight={FONT_WEIGHT.BOLD}
+            fontWeight={boldHeadings ? FONT_WEIGHT.BOLD : FONT_WEIGHT.NORMAL}
             variant={TYPOGRAPHY.H6}
             margin={[1, 0, 1, 1]}
           >
@@ -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,
 };

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 (
       <div className="confirm-approve-content__transaction-details-content">
-        <div className="confirm-approve-content__small-text">
-          {t('feeAssociatedRequest')}
-        </div>
-        <div className="confirm-approve-content__transaction-details-content__fee">
-          <div className="confirm-approve-content__transaction-details-content__primary-fee">
-            {formatCurrency(fiatTransactionTotal, currentCurrency)}
+        {isMultiLayerFeeNetwork ? (
+          <div className="confirm-approve-content__transaction-details-extra-content">
+            <div className="confirm-approve-content__transaction-details-content__labelled-fee">
+              <span>{t('transactionDetailLayer2GasHeading')}</span>
+              {`${ethTransactionTotal} ${nativeCurrency}`}
+            </div>
+            <MultiLayerFeeMessage
+              transaction={txData}
+              layer2fee={hexTransactionTotal}
+              nativeCurrency={nativeCurrency}
+              plainStyle
+            />
           </div>
-          <div className="confirm-approve-content__transaction-details-content__secondary-fee">
-            {`${ethTransactionTotal} ${nativeCurrency}`}
-          </div>
-        </div>
+        ) : (
+          <>
+            <div className="confirm-approve-content__small-text">
+              {t('feeAssociatedRequest')}
+            </div>
+            <div className="confirm-approve-content__transaction-details-content__fee">
+              <div className="confirm-approve-content__transaction-details-content__primary-fee">
+                {formatCurrency(fiatTransactionTotal, currentCurrency)}
+              </div>
+              <div className="confirm-approve-content__transaction-details-content__secondary-fee">
+                {`${ethTransactionTotal} ${nativeCurrency}`}
+              </div>
+            </div>
+          </>
+        )}
       </div>
     );
   }

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 {

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 && (
             <EditGasPopover