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

@@ -13,6 +13,17 @@
     word-break: break-word;
   }
 
+  &__detail-values {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: end;
+    width: 55%;
+
+    &--flex-width {
+      width: auto;
+    }
+  }
+
   .info-tooltip {
     display: inline-block;
     margin-inline-start: 4px;

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,26 +16,35 @@ 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}
           className="transaction-detail-item__title"
         >
           {detailTitle}
         </Typography>
         {detailText && (
+          <div
+            className={classnames('transaction-detail-item__detail-values', {
+              'transaction-detail-item__detail-values--flex-width': flexWidthValues,
+            })}
+          >
             <Typography
+              fontWeight={boldHeadings ? FONT_WEIGHT.BOLD : FONT_WEIGHT.NORMAL}
               variant={TYPOGRAPHY.H6}
               className="transaction-detail-item__detail-text"
               color={COLORS.UI4}
             >
               {detailText}
             </Typography>
+          </div>
         )}
         <Typography
           color={COLORS.BLACK}
@@ -77,4 +87,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,9 +124,27 @@ export default class ConfirmApproveContent extends Component {
       nativeCurrency,
       ethTransactionTotal,
       fiatTransactionTotal,
+      hexTransactionTotal,
+      txData,
+      isMultiLayerFeeNetwork,
     } = this.props;
     return (
       <div className="confirm-approve-content__transaction-details-content">
+        {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__small-text">
               {t('feeAssociatedRequest')}
             </div>
@@ -135,6 +156,8 @@ export default class ConfirmApproveContent extends Component {
                 {`${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) =>
+  const {
-    transactionFeeSelector(state, transaction),
+    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