diff --git a/packages/app/mock/transactions/Execute.json b/packages/app/mock/transactions/Execute.json index ade6fbb50d..32b78b14b5 100644 --- a/packages/app/mock/transactions/Execute.json +++ b/packages/app/mock/transactions/Execute.json @@ -165,5 +165,11 @@ ], "isL1BatchSealed": false, "to": "0x4732C03B2CF6eDe46500e799DE79a15Df44929eB", - "value": "0x00" + "value": "0x00", + "gasPrice": "4000", + "gasLimit": "5000", + "gasUsed": "3000", + "gasPerPubdata": "800", + "maxFeePerGas": "7000", + "maxPriorityFeePerGas": "8000" } diff --git a/packages/app/src/components/transactions/infoTable/GeneralInfo.vue b/packages/app/src/components/transactions/infoTable/GeneralInfo.vue index 9141e4769f..eafef5b7ba 100644 --- a/packages/app/src/components/transactions/infoTable/GeneralInfo.vue +++ b/packages/app/src/components/transactions/infoTable/GeneralInfo.vue @@ -166,7 +166,48 @@ - + + + {{ t("transactions.table.gasLimitAndUsed") }} + {{ + t("transactions.table.gasLimitAndUsedTooltip") + }} + + {{ transaction?.gasLimit }} | {{ transaction?.gasUsed }} ({{ gasUsedPercent }}%) + + + + {{ t("transactions.table.gasPerPubdata") }} + {{ + t("transactions.table.gasPerPubdataTooltip") + }} + + {{ transaction.gasPerPubdata }} + + + + {{ t("transactions.table.maxFeePerGas") }} + + {{ t("transactions.table.maxFeePerGasTooltip") }} + + + + + + + + + {{ t("transactions.table.maxPriorityFeePerGas") }} + + {{ t("transactions.table.maxPriorityFeePerGasTooltip") }} + + + + + + {{ t("transactions.table.nonce") }} @@ -242,6 +283,15 @@ const tokenTransfers = computed(() => { // exclude transfers with no amount, such as NFT until we fully support them return props.transaction?.transfers.filter((transfer) => transfer.amount) || []; }); + +const gasUsedPercent = computed(() => { + if (props.transaction) { + const gasLimit = parseInt(props.transaction.gasLimit, 10); + const gasUsed = parseInt(props.transaction.gasUsed, 10); + return parseFloat(((gasUsed / gasLimit) * 100).toFixed(2)); + } + return null; +});