feat: display layer 1 gas fees on scroll network (#23991)

Update the `TransactionController` to automatically populate the `layer1GasFee` when creating transactions on Scroll networks.
Remove the knowledge of layer 2 networks from the UI by replacing conditional rendering via the `getIsMultiLayerFeeNetwork` selector, with simply checking for the presence of a layer 1 gas fee in the `TransactionMeta` or from the action.

lavamoat/browserify/beta/policy.json

@@ -2366,6 +2366,7 @@
         "@metamask/transaction-controller>nonce-tracker": true,
         "@metamask/utils": true,
         "bn.js": true,
+        "browserify>buffer": true,
         "eth-method-registry": true,
         "fast-json-patch": true,
         "lodash": true,

lavamoat/browserify/desktop/policy.json

@@ -2679,6 +2679,7 @@
         "@metamask/transaction-controller>nonce-tracker": true,
         "@metamask/utils": true,
         "bn.js": true,
+        "browserify>buffer": true,
         "eth-method-registry": true,
         "fast-json-patch": true,
         "lodash": true,

lavamoat/browserify/flask/policy.json

@@ -2731,6 +2731,7 @@
         "@metamask/transaction-controller>nonce-tracker": true,
         "@metamask/utils": true,
         "bn.js": true,
+        "browserify>buffer": true,
         "eth-method-registry": true,
         "fast-json-patch": true,
         "lodash": true,

lavamoat/browserify/main/policy.json

@@ -2646,6 +2646,7 @@
         "@metamask/transaction-controller>nonce-tracker": true,
         "@metamask/utils": true,
         "bn.js": true,
+        "browserify>buffer": true,
         "eth-method-registry": true,
         "fast-json-patch": true,
         "lodash": true,

lavamoat/browserify/mmi/policy.json

@@ -2785,6 +2785,7 @@
         "@metamask/transaction-controller>nonce-tracker": true,
         "@metamask/utils": true,
         "bn.js": true,
+        "browserify>buffer": true,
         "eth-method-registry": true,
         "fast-json-patch": true,
         "lodash": true,

package.json

@@ -323,7 +323,7 @@
     "@metamask/snaps-rpc-methods": "^8.0.0",
     "@metamask/snaps-sdk": "^4.0.1",
     "@metamask/snaps-utils": "^7.1.0",
-    "@metamask/transaction-controller": "^28.0.0",
+    "@metamask/transaction-controller": "^28.1.0",
     "@metamask/user-operation-controller": "^6.0.0",
     "@metamask/utils": "^8.2.1",
     "@ngraveio/bc-ur": "^1.1.12",

shared/constants/network.ts

@@ -151,6 +151,8 @@ export const CHAIN_IDS = {
   ARBITRUM_GOERLI: '0x66eed',
   BLAST: '0x13e31',
   FILECOIN: '0x13a',
+  SCROLL: '0x82750',
+  SCROLL_SEPOLIA: '0x8274f',
 } as const;
 
 const CHAINLIST_CHAIN_IDS_MAP = {
@@ -246,6 +248,8 @@ export const GNOSIS_DISPLAY_NAME = 'Gnosis';
 export const ZK_SYNC_ERA_DISPLAY_NAME = 'zkSync Era Mainnet';
 export const BASE_DISPLAY_NAME = 'Base Mainnet';
 export const AURORA_ETH_DISPLAY_NAME = 'Aurora';
+export const SCROLL_DISPLAY_NAME = 'Scroll';
+export const SCROLL_SEPOLIA_DISPLAY_NAME = 'Scroll Sepolia';
 
 export const infuraProjectId = process.env.INFURA_PROJECT_ID;
 export const getRpcUrl = ({
@@ -422,6 +426,7 @@ export const VELAS_EVM_MAINNET_IMAGE_URL = './images/velas.svg';
 export const ZKATANA_MAINNET_IMAGE_URL = './images/zkatana.png';
 export const ZORA_MAINNET_IMAGE_URL = './images/zora.svg';
 export const FILECOIN_MAINNET_IMAGE_URL = './images/filecoin.svg';
+export const SCROLL_IMAGE_URL = './images/scroll.svg';
 
 export const INFURA_PROVIDER_TYPES = [
   NETWORK_TYPES.MAINNET,
@@ -523,6 +528,8 @@ export const NETWORK_TO_NAME_MAP = {
   [CHAIN_IDS.LOCALHOST]: LOCALHOST_DISPLAY_NAME,
   [CHAIN_IDS.OPTIMISM]: OPTIMISM_DISPLAY_NAME,
   [CHAIN_IDS.POLYGON]: POLYGON_DISPLAY_NAME,
+  [CHAIN_IDS.SCROLL]: SCROLL_DISPLAY_NAME,
+  [CHAIN_IDS.SCROLL_SEPOLIA]: SCROLL_SEPOLIA_DISPLAY_NAME,
   [CHAIN_IDS.SEPOLIA]: SEPOLIA_DISPLAY_NAME,
 } as const;
 
@@ -745,6 +752,8 @@ export const CHAIN_ID_TOKEN_IMAGE_MAP = {
   [CHAIN_IDS.GNOSIS]: GNOSIS_TOKEN_IMAGE_URL,
   [CHAIN_IDS.FANTOM]: FTM_TOKEN_IMAGE_URL,
   [CHAIN_IDS.FILECOIN]: FILECOIN_MAINNET_IMAGE_URL,
+  [CHAIN_IDS.SCROLL]: SCROLL_IMAGE_URL,
+  [CHAIN_IDS.SCROLL_SEPOLIA]: SCROLL_IMAGE_URL,
 } as const;
 
 export const INFURA_BLOCKED_KEY = 'countryBlocked';
@@ -886,6 +895,8 @@ export const BUYABLE_CHAINS_MAP: {
     | typeof CHAIN_IDS.ARBITRUM_GOERLI
     | typeof CHAIN_IDS.BLAST
     | typeof CHAIN_IDS.FILECOIN
+    | typeof CHAIN_IDS.SCROLL
+    | typeof CHAIN_IDS.SCROLL_SEPOLIA
   >]: BuyableChainSettings;
 } = {
   [CHAIN_IDS.MAINNET]: {

test/data/mock-send-state.json

@@ -1262,7 +1262,7 @@
     "gasIsSetInModal": false,
     "gasPriceEstimate": "0x0",
     "gasLimitMinimum": "0x5208",
-    "gasTotalForLayer1": "0x0",
+    "gasTotalForLayer1": null,
     "recipientMode": "CONTACT_LIST",
     "recipientInput": "0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b",
     "selectedAccount": {

ui/components/app/transaction-breakdown/transaction-breakdown.component.js

@@ -29,7 +29,6 @@ export default class TransactionBreakdown extends PureComponent {
     priorityFee: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     hexGasTotal: PropTypes.string,
     isEIP1559Transaction: PropTypes.bool,
-    isMultiLayerFeeNetwork: PropTypes.bool,
     l1HexGasTotal: PropTypes.string,
   };
 
@@ -55,7 +54,6 @@ export default class TransactionBreakdown extends PureComponent {
       priorityFee,
       hexGasTotal,
       isEIP1559Transaction,
-      isMultiLayerFeeNetwork,
       l1HexGasTotal,
     } = this.props;
     return (
@@ -81,7 +79,7 @@ export default class TransactionBreakdown extends PureComponent {
         </TransactionBreakdownRow>
         <TransactionBreakdownRow
           title={
-            isMultiLayerFeeNetwork
+            l1HexGasTotal
               ? t('transactionHistoryL2GasLimitLabel')
               : `${t('gasLimit')} (${t('units')})`
           }
@@ -136,7 +134,7 @@ export default class TransactionBreakdown extends PureComponent {
         {!isEIP1559Transaction && (
           <TransactionBreakdownRow
             title={
-              isMultiLayerFeeNetwork
+              l1HexGasTotal
                 ? t('transactionHistoryL2GasPriceLabel')
                 : t('advancedGasPriceTitle')
             }
@@ -198,7 +196,7 @@ export default class TransactionBreakdown extends PureComponent {
             )}
           </TransactionBreakdownRow>
         )}
-        {isMultiLayerFeeNetwork && (
+        {l1HexGasTotal && (
           <TransactionBreakdownRow title={t('transactionHistoryL1GasLabel')}>
             <UserPreferencedCurrencyDisplay
               className="transaction-breakdown__value"
@@ -221,7 +219,7 @@ export default class TransactionBreakdown extends PureComponent {
             className="transaction-breakdown__value transaction-breakdown__value--eth-total"
             type={PRIMARY}
             value={totalInHex}
-            numberOfDecimals={isMultiLayerFeeNetwork ? 18 : null}
+            numberOfDecimals={l1HexGasTotal ? 18 : null}
           />
           {showFiat && (
             <UserPreferencedCurrencyDisplay

ui/components/app/transaction-breakdown/transaction-breakdown.container.js

@@ -1,8 +1,5 @@
 import { connect } from 'react-redux';
-import {
-  getShouldShowFiat,
-  getIsMultiLayerFeeNetwork,
-} from '../../../selectors';
+import { getShouldShowFiat } from '../../../selectors';
 import { getNativeCurrency } from '../../../ducks/metamask/metamask';
 import { getHexGasTotal } from '../../../helpers/utils/confirm-tx.util';
 import { isEIP1559Transaction } from '../../../../shared/modules/transaction.utils';
@@ -40,14 +37,7 @@ const mapStateToProps = (state, ownProps) => {
       getHexGasTotal({ gasLimit, gasPrice: usedGasPrice })) ||
     '0x0';
 
-  let totalInHex = sumHexes(hexGasTotal, value);
-
-  const isMultiLayerFeeNetwork =
-    getIsMultiLayerFeeNetwork(state) && l1HexGasTotal !== undefined;
-
-  if (isMultiLayerFeeNetwork) {
-    totalInHex = sumHexes(totalInHex, l1HexGasTotal);
-  }
+  const totalInHex = sumHexes(hexGasTotal, value, l1HexGasTotal ?? 0);
 
   return {
     nativeCurrency: getNativeCurrency(state),
@@ -62,7 +52,6 @@ const mapStateToProps = (state, ownProps) => {
     priorityFee,
     baseFee: baseFeePerGas,
     isEIP1559Transaction: isEIP1559Transaction(transaction),
-    isMultiLayerFeeNetwork,
     l1HexGasTotal,
   };
 };

ui/ducks/send/send.js

@@ -40,7 +40,6 @@ import {
   getUseTokenDetection,
   getTokenList,
   getAddressBookEntryOrAccountName,
-  getIsMultiLayerFeeNetwork,
   getEnsResolutionByAddress,
   getSelectedAccount,
   getSelectedInternalAccount,
@@ -460,7 +459,7 @@ export const initialState = {
   gasIsSetInModal: false,
   gasPriceEstimate: '0x0',
   gasLimitMinimum: GAS_LIMITS.SIMPLE,
-  gasTotalForLayer1: '0x0',
+  gasTotalForLayer1: null,
   recipientMode: RECIPIENT_SEARCH_MODES.CONTACT_LIST,
   recipientInput: '',
   selectedAccount: {
@@ -508,32 +507,28 @@ export const computeEstimatedGasLimit = createAsyncThunk(
     const draftTransaction =
       send.draftTransactions[send.currentTransactionUUID];
     const unapprovedTxs = getUnapprovedTransactions(state);
-    const isMultiLayerFeeNetwork = getIsMultiLayerFeeNetwork(state);
     const transaction = unapprovedTxs[draftTransaction.id];
     const isNonStandardEthChain = getIsNonStandardEthChain(state);
     const chainId = getCurrentChainId(state);
     const selectedAccount = getSelectedInternalAccountWithBalance(state);
 
-    let gasTotalForLayer1;
-    if (isMultiLayerFeeNetwork) {
-      gasTotalForLayer1 = await thunkApi.dispatch(
-        getLayer1GasFee({
-          transactionParams: {
-            gasPrice: draftTransaction.gas.gasPrice,
-            gas: draftTransaction.gas.gasLimit,
-            to: draftTransaction.recipient.address?.toLowerCase(),
-            value:
-              send.amountMode === AMOUNT_MODES.MAX
-                ? send.selectedAccount.balance
-                : draftTransaction.amount.value,
-            from: send.selectedAccount.address,
-            data: draftTransaction.userInputHexData,
-            type: '0x0',
-          },
-          chainId,
-        }),
-      );
-    }
+    const gasTotalForLayer1 = await thunkApi.dispatch(
+      getLayer1GasFee({
+        transactionParams: {
+          gasPrice: draftTransaction.gas.gasPrice,
+          gas: draftTransaction.gas.gasLimit,
+          to: draftTransaction.recipient.address?.toLowerCase(),
+          value:
+            send.amountMode === AMOUNT_MODES.MAX
+              ? send.selectedAccount.balance
+              : draftTransaction.amount.value,
+          from: send.selectedAccount.address,
+          data: draftTransaction.userInputHexData,
+          type: '0x0',
+        },
+        chainId,
+      }),
+    );
 
     if (
       send.stage !== SEND_STAGES.EDIT ||
@@ -934,7 +929,7 @@ const slice = createSlice({
         const _gasTotal = new Numeric(
           draftTransaction.gas.gasTotal || '0x0',
           16,
-        ).add(new Numeric(state.gasTotalForLayer1 || '0x0', 16));
+        ).add(new Numeric(state.gasTotalForLayer1 ?? '0x0', 16));
 
         amount = new Numeric(draftTransaction.asset.balance, 16)
           .minus(_gasTotal)
@@ -2783,3 +2778,7 @@ export function isSendFormInvalid(state) {
 export function getSendStage(state) {
   return state[name].stage;
 }
+
+export function hasSendLayer1GasFee(state) {
+  return state[name].gasTotalForLayer1 !== null;
+}