diff --git a/app/_locales/de/messages.json b/app/_locales/de/messages.json index fc21b907a..4c7749a01 100644 --- a/app/_locales/de/messages.json +++ b/app/_locales/de/messages.json @@ -1408,9 +1408,6 @@ "lastConnected": { "message": "Zuletzt verbunden" }, - "layer1Fees": { - "message": "Ebene 1 Gebühren" - }, "learmMoreAboutGas": { "message": "Wollen Sie 1 $ über Gas?" }, diff --git a/app/_locales/el/messages.json b/app/_locales/el/messages.json index 9361040d8..f91fc7653 100644 --- a/app/_locales/el/messages.json +++ b/app/_locales/el/messages.json @@ -1405,9 +1405,6 @@ "lastConnected": { "message": "Τελευταία Σύνδεση" }, - "layer1Fees": { - "message": "Τέλη επιπέδου 1" - }, "learmMoreAboutGas": { "message": "Θέλετε να $1 για το τέλος συναλλαγής;" }, diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 856d88103..95e2c1b45 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -1277,6 +1277,9 @@ "gasEstimatesUnavailableWarning": { "message": "Our low, medium and high estimates are not available." }, + "gasFee": { + "message": "Gas Fee" + }, "gasLimit": { "message": "Gas Limit" }, @@ -1629,9 +1632,6 @@ "lastConnected": { "message": "Last Connected" }, - "layer1Fees": { - "message": "Layer 1 fees" - }, "learmMoreAboutGas": { "message": "Want to $1 about gas?" }, diff --git a/app/_locales/es_419/messages.json b/app/_locales/es_419/messages.json index 623e3fae0..759bc10bf 100644 --- a/app/_locales/es_419/messages.json +++ b/app/_locales/es_419/messages.json @@ -1454,9 +1454,6 @@ "lastConnected": { "message": "Última conexión" }, - "layer1Fees": { - "message": "Cargos de capa 1" - }, "learmMoreAboutGas": { "message": "¿Quiere $1 sobre el gas?" }, diff --git a/app/_locales/fr/messages.json b/app/_locales/fr/messages.json index eaf0e1fd6..69d8a2d5a 100644 --- a/app/_locales/fr/messages.json +++ b/app/_locales/fr/messages.json @@ -1405,9 +1405,6 @@ "lastConnected": { "message": "Dernière connexion" }, - "layer1Fees": { - "message": "Frais de couche 1 (L1)" - }, "learmMoreAboutGas": { "message": "Souhaitez-vous $1 sur le carburant ?" }, diff --git a/app/_locales/hi/messages.json b/app/_locales/hi/messages.json index 9d0120286..69b111159 100644 --- a/app/_locales/hi/messages.json +++ b/app/_locales/hi/messages.json @@ -1405,9 +1405,6 @@ "lastConnected": { "message": "अंतिम बार कनेक्ट किया गया" }, - "layer1Fees": { - "message": "लेयर 1 शुल्क" - }, "learmMoreAboutGas": { "message": "गैस के बारे में $1 चाहते हैं?" }, diff --git a/app/_locales/id/messages.json b/app/_locales/id/messages.json index 91dc8d786..720cbd97d 100644 --- a/app/_locales/id/messages.json +++ b/app/_locales/id/messages.json @@ -1405,9 +1405,6 @@ "lastConnected": { "message": "Terakhir Terhubung" }, - "layer1Fees": { - "message": "Biaya lapis 1" - }, "learmMoreAboutGas": { "message": "Ingin $1 seputar gas?" }, diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json index ff040b63c..4107b4396 100644 --- a/app/_locales/ja/messages.json +++ b/app/_locales/ja/messages.json @@ -1405,9 +1405,6 @@ "lastConnected": { "message": "前回の接続" }, - "layer1Fees": { - "message": "レイヤー1手数料" - }, "learmMoreAboutGas": { "message": "ガスについて$1しますか?" }, diff --git a/app/_locales/ko/messages.json b/app/_locales/ko/messages.json index d69803bf2..35c9e2c4d 100644 --- a/app/_locales/ko/messages.json +++ b/app/_locales/ko/messages.json @@ -1405,9 +1405,6 @@ "lastConnected": { "message": "마지막 연결" }, - "layer1Fees": { - "message": "레이어 1 요금" - }, "learmMoreAboutGas": { "message": "가스에 대해 $1하시겠습니까?" }, diff --git a/app/_locales/pt_BR/messages.json b/app/_locales/pt_BR/messages.json index 709976533..793a95650 100644 --- a/app/_locales/pt_BR/messages.json +++ b/app/_locales/pt_BR/messages.json @@ -1438,9 +1438,6 @@ "lastConnected": { "message": "Conectado pela última vez em" }, - "layer1Fees": { - "message": "Taxas de camada 1" - }, "learmMoreAboutGas": { "message": "Quer $1 sobre o gás?" }, diff --git a/app/_locales/ru/messages.json b/app/_locales/ru/messages.json index ed4f7be2d..fed0f9550 100644 --- a/app/_locales/ru/messages.json +++ b/app/_locales/ru/messages.json @@ -1405,9 +1405,6 @@ "lastConnected": { "message": "Последнее подключение" }, - "layer1Fees": { - "message": "Комиссии 1-го уровня" - }, "learmMoreAboutGas": { "message": "Хотите $1 о газе?" }, diff --git a/app/_locales/tl/messages.json b/app/_locales/tl/messages.json index bbe4ee146..fa2d0773f 100644 --- a/app/_locales/tl/messages.json +++ b/app/_locales/tl/messages.json @@ -1405,9 +1405,6 @@ "lastConnected": { "message": "Huling Kumonekta" }, - "layer1Fees": { - "message": "Layer 1 fees" - }, "learmMoreAboutGas": { "message": "Gusto mo bang $1 ang tungkol sa gas?" }, diff --git a/app/_locales/tr/messages.json b/app/_locales/tr/messages.json index 6b6d16d82..6633eccba 100644 --- a/app/_locales/tr/messages.json +++ b/app/_locales/tr/messages.json @@ -1405,9 +1405,6 @@ "lastConnected": { "message": "Son Bağlanma" }, - "layer1Fees": { - "message": "Aşama 1 ücretleri" - }, "learmMoreAboutGas": { "message": "Gaz hakkında $1 istiyor musunuz?" }, diff --git a/app/_locales/vi/messages.json b/app/_locales/vi/messages.json index ec79f2710..d2e38f2f1 100644 --- a/app/_locales/vi/messages.json +++ b/app/_locales/vi/messages.json @@ -1405,9 +1405,6 @@ "lastConnected": { "message": "Đã kết nối lần cuối" }, - "layer1Fees": { - "message": "Phí Lớp 1" - }, "learmMoreAboutGas": { "message": "Muốn $1 về gas?" }, diff --git a/app/_locales/zh_CN/messages.json b/app/_locales/zh_CN/messages.json index e09b89ad4..94bc07f8f 100644 --- a/app/_locales/zh_CN/messages.json +++ b/app/_locales/zh_CN/messages.json @@ -1405,9 +1405,6 @@ "lastConnected": { "message": "最后连接" }, - "layer1Fees": { - "message": "1层费用" - }, "learmMoreAboutGas": { "message": "想要有关燃料$1?" }, diff --git a/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js b/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js index 62edad403..cc2e09680 100644 --- a/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js +++ b/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js @@ -7,7 +7,7 @@ import FormField from '../../ui/form-field'; import { GAS_ESTIMATE_TYPES } from '../../../../shared/constants/gas'; import { getGasFormErrorText } from '../../../helpers/constants/gas'; import { getIsGasEstimatesLoading } from '../../../ducks/metamask/metamask'; -import { getNetworkSupportsSettingGasPrice } from '../../../selectors'; +import { getNetworkSupportsSettingGasFees } from '../../../selectors'; export default function AdvancedGasControls({ gasEstimateType, @@ -35,8 +35,8 @@ export default function AdvancedGasControls({ gasEstimateType === GAS_ESTIMATE_TYPES.ETH_GASPRICE || isGasEstimatesLoading); - const networkSupportsSettingGasPrice = useSelector( - getNetworkSupportsSettingGasPrice, + const networkSupportsSettingGasFees = useSelector( + getNetworkSupportsSettingGasFees, ); return ( @@ -55,6 +55,7 @@ export default function AdvancedGasControls({ tooltipText={t('editGasLimitTooltip')} value={gasLimit} allowDecimals={false} + disabled={!networkSupportsSettingGasFees} numeric /> {showFeeMarketFields ? ( @@ -111,7 +112,7 @@ export default function AdvancedGasControls({ ? getGasFormErrorText(gasErrors.gasPrice, t) : null } - disabled={!networkSupportsSettingGasPrice} + disabled={!networkSupportsSettingGasFees} /> )} diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss index 9a53b3f2b..4a49ad110 100644 --- a/ui/components/app/app-components.scss +++ b/ui/components/app/app-components.scss @@ -45,6 +45,7 @@ @import 'menu-bar/index'; @import 'modal/index'; @import 'modals/index'; +@import 'multilayer-fee-message/index'; @import 'multiple-notifications/index'; @import 'network-display/index'; @import 'permission-page-container/index'; diff --git a/ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js b/ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js index 128b8361f..9de986699 100644 --- a/ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js +++ b/ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js @@ -20,12 +20,12 @@ export default class AdvancedGasInputs extends Component { customGasLimitMessage: PropTypes.string, minimumGasLimit: PropTypes.number, customPriceIsExcessive: PropTypes.bool, - networkSupportsSettingGasPrice: PropTypes.bool, + networkSupportsSettingGasFees: PropTypes.bool, }; static defaultProps = { customPriceIsExcessive: false, - networkSupportsSettingGasPrice: true, + networkSupportsSettingGasFees: true, }; constructor(props) { @@ -202,10 +202,14 @@ export default class AdvancedGasInputs extends Component { customGasLimitMessage, minimumGasLimit, customPriceIsExcessive, - networkSupportsSettingGasPrice, + networkSupportsSettingGasFees, } = this.props; const { gasPrice, gasLimit } = this.state; + if (!networkSupportsSettingGasFees) { + return null; + } + const { errorText: gasPriceErrorText, errorType: gasPriceErrorType, @@ -252,7 +256,7 @@ export default class AdvancedGasInputs extends Component { onChange: this.onChangeGasPrice, errorComponent: gasPriceErrorComponent, errorType: gasPriceErrorType, - disabled: !networkSupportsSettingGasPrice, + disabled: !networkSupportsSettingGasFees, })} {this.renderGasInput({ label: this.context.t('gasLimit'), @@ -263,6 +267,7 @@ export default class AdvancedGasInputs extends Component { errorComponent: gasLimitErrorComponent, customMessageComponent: gasLimitCustomMessageComponent, errorType: gasLimitErrorType, + disabled: !networkSupportsSettingGasFees, })} ); diff --git a/ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.container.js b/ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.container.js index 314410aa5..eca645f55 100644 --- a/ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.container.js +++ b/ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.container.js @@ -4,7 +4,7 @@ import { decimalToHex, hexWEIToDecGWEI, } from '../../../../helpers/utils/conversions.util'; -import { getNetworkSupportsSettingGasPrice } from '../../../../selectors/selectors'; +import { getNetworkSupportsSettingGasFees } from '../../../../selectors/selectors'; import { MIN_GAS_LIMIT_DEC } from '../../../../pages/send/send.constants'; import AdvancedGasInputs from './advanced-gas-inputs.component'; @@ -22,7 +22,7 @@ function convertMinimumGasLimitForInputs(minimumGasLimit = MIN_GAS_LIMIT_DEC) { function mapStateToProps(state) { return { - networkSupportsSettingGasPrice: getNetworkSupportsSettingGasPrice(state), + networkSupportsSettingGasFees: getNetworkSupportsSettingGasFees(state), }; } diff --git a/ui/components/app/multilayer-fee-message/index.scss b/ui/components/app/multilayer-fee-message/index.scss new file mode 100644 index 000000000..f4b684ecd --- /dev/null +++ b/ui/components/app/multilayer-fee-message/index.scss @@ -0,0 +1,3 @@ +.multi-layer-fee-message { + padding-top: 24px; +} 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 22368d146..e5ad8d6fd 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 @@ -2,7 +2,9 @@ import React, { useContext, useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import { captureException } from '@sentry/browser'; import TransactionDetailItem from '../transaction-detail-item/transaction-detail-item.component'; +import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display'; import fetchEstimatedL1Fee from '../../../helpers/utils/optimism/fetchEstimatedL1Fee'; +import { SECONDARY } from '../../../helpers/constants/common'; import { I18nContext } from '../../../contexts/i18n'; import { sumHexes } from '../../../helpers/utils/transactions.util'; import { @@ -21,23 +23,26 @@ export default function MultilayerFeeMessage({ const [fetchedLayer1Total, setLayer1Total] = useState(null); let layer1Total = 'unknown'; + let layer1TotalBN; if (fetchedLayer1Total !== null) { - const layer1TotalBN = toBigNumber.hex(fetchedLayer1Total); + layer1TotalBN = toBigNumber.hex(fetchedLayer1Total); layer1Total = `${toNormalizedDenomination .WEI(layer1TotalBN) - .toString(10)} ${nativeCurrency}`; + .toFixed(12)} ${nativeCurrency}`; } + const feeTotal = sumHexes(layer2fee || '0x0', fetchedLayer1Total || '0x0'); + const totalInWeiHex = sumHexes( - layer2fee || '0x0', - fetchedLayer1Total || '0x0', + feeTotal || '0x0', transaction.txParams.value || '0x0', ); + const totalBN = toBigNumber.hex(totalInWeiHex); const totalInEth = `${toNormalizedDenomination .WEI(totalBN) - .toString(10)} ${nativeCurrency}`; + .toFixed(12)} ${nativeCurrency}`; useEffect(() => { const getEstimatedL1Fee = async () => { @@ -52,12 +57,31 @@ export default function MultilayerFeeMessage({ getEstimatedL1Fee(); }, [transaction]); + const feeTotalInFiat = ( + + ); + + const totalInFiat = ( + + ); + return ( - <> +
@@ -65,11 +89,12 @@ export default function MultilayerFeeMessage({ key="total-item" detailTitle={t('total')} detailTotal={totalInEth} + detailText={totalInFiat} subTitle={t('transactionDetailMultiLayerTotalSubtitle')} noBold={plainStyle} flexWidthValues={plainStyle} /> - +
); } diff --git a/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js b/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js index 6589a818e..c2beced07 100644 --- a/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js +++ b/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js @@ -12,12 +12,14 @@ export default function UserPreferencedCurrencyDisplay({ numberOfDecimals: propsNumberOfDecimals, showEthLogo, type, + showFiat, ...restProps }) { const { currency, numberOfDecimals } = useUserPreferencedCurrency(type, { ethNumberOfDecimals, fiatNumberOfDecimals, numberOfDecimals: propsNumberOfDecimals, + showFiatOverride: showFiat, }); const prefixComponent = useMemo(() => { return ( @@ -65,4 +67,5 @@ UserPreferencedCurrencyDisplay.propTypes = { PropTypes.string, PropTypes.number, ]), + showFiat: PropTypes.boolean, }; diff --git a/ui/ducks/send/send.js b/ui/ducks/send/send.js index 3a0f07c2e..e4a541ffc 100644 --- a/ui/ducks/send/send.js +++ b/ui/ducks/send/send.js @@ -44,6 +44,7 @@ import { getUseTokenDetection, getTokenList, getAddressBookEntryOrAccountName, + getIsMultiLayerFeeNetwork, } from '../../selectors'; import { disconnectGasFeeEstimatePoller, @@ -91,6 +92,9 @@ import { isBurnAddress, isValidHexAddress, } from '../../../shared/modules/hexstring-utils'; +import { sumHexes } from '../../helpers/utils/transactions.util'; +import fetchEstimatedL1Fee from '../../helpers/utils/optimism/fetchEstimatedL1Fee'; + import { CHAIN_ID_TO_GAS_LIMIT_BUFFER_MAP } from '../../../shared/constants/network'; import { ERC20, @@ -192,6 +196,7 @@ async function estimateGasLimitForSend({ data, isNonStandardEthChain, chainId, + gasLimit, ...options }) { let isSimpleSendOnNonStandardNetwork = false; @@ -313,12 +318,14 @@ async function estimateGasLimitForSend({ error.message.includes('Transaction execution error.') || error.message.includes( 'gas required exceeds allowance or always failing transaction', - ); + ) || + (CHAIN_ID_TO_GAS_LIMIT_BUFFER_MAP[chainId] && + error.message.includes('gas required exceeds allowance')); if (simulationFailed) { const estimateWithBuffer = addGasBuffer( - paramsForGasEstimate.gas, + paramsForGasEstimate?.gas ?? gasLimit, blockGasLimit, - 1.5, + bufferMultiplier, ); return addHexPrefix(estimateWithBuffer); } @@ -362,9 +369,29 @@ export const computeEstimatedGasLimit = createAsyncThunk( const state = thunkApi.getState(); const { send, metamask } = state; const unapprovedTxs = getUnapprovedTxs(state); + const isMultiLayerFeeNetwork = getIsMultiLayerFeeNetwork(state); const transaction = unapprovedTxs[send.draftTransaction.id]; const isNonStandardEthChain = getIsNonStandardEthChain(state); const chainId = getCurrentChainId(state); + + let layer1GasTotal; + if (isMultiLayerFeeNetwork) { + layer1GasTotal = await fetchEstimatedL1Fee(global.eth, { + txParams: { + gasPrice: send.gas.gasPrice, + gas: send.gas.gasLimit, + to: send.recipient.address?.toLowerCase(), + value: + send.amount.mode === 'MAX' + ? send.account.balance + : send.amount.value, + from: send.account.address, + data: send.draftTransaction.userInputHexData, + type: '0x0', + }, + }); + } + if ( send.stage !== SEND_STAGES.EDIT || !transaction.dappSuggestedGasFees?.gas || @@ -380,10 +407,12 @@ export const computeEstimatedGasLimit = createAsyncThunk( data: send.draftTransaction.userInputHexData, isNonStandardEthChain, chainId, + gasLimit: send.gas.gasLimit, }); await thunkApi.dispatch(setCustomGasLimit(gasLimit)); return { gasLimit, + layer1GasTotal, }; } return null; @@ -651,6 +680,10 @@ export const initialState = { // Warning to display on the address field warning: null, }, + multiLayerFees: { + // Layer 1 gas fee total on multi-layer fee networks + layer1GasTotal: '0x0', + }, }; const slice = createSlice({ @@ -697,9 +730,13 @@ const slice = createSlice({ multiplierBase: 10, }); } else { + const _gasTotal = sumHexes( + state.gas.gasTotal || '0x0', + state.multiLayerFees?.layer1GasTotal || '0x0', + ); amount = subtractCurrencies( addHexPrefix(state.asset.balance), - addHexPrefix(state.gas.gasTotal), + addHexPrefix(_gasTotal), { toNumericBase: 'hex', aBase: 16, @@ -881,6 +918,21 @@ const slice = createSlice({ // Record the latest gasPriceEstimate for future comparisons state.gas.gasPriceEstimate = addHexPrefix(gasPriceEstimate); }, + /** + * sets the layer 1 fees total (for a multi-layer fee network) + * + * @param state + * @param action + */ + updateLayer1Fees: (state, action) => { + state.multiLayerFees.layer1GasTotal = action.payload; + if ( + state.amount.mode === AMOUNT_MODES.MAX && + state.asset.type === ASSET_TYPES.NATIVE + ) { + slice.caseReducers.updateAmountToMax(state); + } + }, /** * sets the amount mode to the provided value as long as it is one of the * supported modes (MAX|INPUT) @@ -1319,6 +1371,11 @@ const slice = createSlice({ payload: action.payload.gasLimit, }); } + if (action.payload?.layer1GasTotal) { + slice.caseReducers.updateLayer1Fees(state, { + payload: action.payload.layer1GasTotal, + }); + } }) .addCase(computeEstimatedGasLimit.rejected, (state) => { // If gas estimation fails, we should set the loading state to false, diff --git a/ui/hooks/useUserPreferencedCurrency.js b/ui/hooks/useUserPreferencedCurrency.js index 79774e925..2559a29c3 100644 --- a/ui/hooks/useUserPreferencedCurrency.js +++ b/ui/hooks/useUserPreferencedCurrency.js @@ -44,7 +44,7 @@ export function useUserPreferencedCurrency(type, opts = {}) { getPreferences, shallowEqual, ); - const showFiat = useSelector(getShouldShowFiat); + const showFiat = useSelector(getShouldShowFiat) || opts.showFiatOverride; const currentCurrency = useSelector(getCurrentCurrency); let currency, numberOfDecimals; diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js index a46c72f2f..097aa7f25 100644 --- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js +++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js @@ -449,9 +449,7 @@ export default class ConfirmTransactionBase extends Component { detailTitle={ txData.dappSuggestedGasFees ? ( <> - {isMultiLayerFeeNetwork - ? t('transactionDetailLayer2GasHeading') - : t('transactionDetailGasHeading')} + {t('transactionDetailGasHeading')} ) : ( <> - {isMultiLayerFeeNetwork - ? t('transactionDetailLayer2GasHeading') - : t('transactionDetailGasHeading')} + {t('transactionDetailGasHeading')} @@ -492,16 +488,14 @@ export default class ConfirmTransactionBase extends Component { ) } detailText={ - !isMultiLayerFeeNetwork && ( -
- {renderHeartBeatIfNotInTest()} - -
- ) +
+ {renderHeartBeatIfNotInTest()} + +
} detailTotal={
@@ -510,30 +504,28 @@ export default class ConfirmTransactionBase extends Component { type={PRIMARY} value={hexMinimumTransactionFee} hideLabel={!useNativeCurrencyAsPrimaryCurrency} - numberOfDecimals={isMultiLayerFeeNetwork ? 18 : 6} + numberOfDecimals={6} />
} subText={ - !isMultiLayerFeeNetwork && ( - <> - - {t('editGasSubTextFeeLabel')} - -
- {renderHeartBeatIfNotInTest()} - -
- - ) + <> + + {t('editGasSubTextFeeLabel')} + +
+ {renderHeartBeatIfNotInTest()} + +
+ } subTitle={ <> @@ -596,11 +588,15 @@ export default class ConfirmTransactionBase extends Component { disabled={isDisabled()} userAcknowledgedGasMissing={userAcknowledgedGasMissing} onEdit={ - renderSimulationFailureWarning ? null : () => this.handleEditGas() + renderSimulationFailureWarning || isMultiLayerFeeNetwork + ? null + : () => this.handleEditGas() } rows={[ renderSimulationFailureWarning && simulationFailureWarning(), - !renderSimulationFailureWarning && renderGasDetailsItem(), + !renderSimulationFailureWarning && + !isMultiLayerFeeNetwork && + renderGasDetailsItem(), !renderSimulationFailureWarning && isMultiLayerFeeNetwork && (