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 = (
+