From e1892f2ee8697ea5b80be2dcc23bec7b7a7129b9 Mon Sep 17 00:00:00 2001 From: lianahus Date: Mon, 2 Aug 2021 16:14:49 +0200 Subject: [PATCH] Improved designe of confirmation dialog --- apps/remix-ide/src/app/ui/confirmDialog.js | 63 +++++++++++++--------- 1 file changed, 37 insertions(+), 26 deletions(-) diff --git a/apps/remix-ide/src/app/ui/confirmDialog.js b/apps/remix-ide/src/app/ui/confirmDialog.js index 670470597f..d4b41838f1 100644 --- a/apps/remix-ide/src/app/ui/confirmDialog.js +++ b/apps/remix-ide/src/app/ui/confirmDialog.js @@ -26,15 +26,25 @@ function confirmDialog (tx, network, amount, gasEstimation, newGasPriceCb, initi const onMaxFeeChange = function () { var maxFee = el.querySelector('#maxfee').value + var confirmBtn = document.querySelector('#modal-footer-ok') var maxPriorityFee = el.querySelector('#maxpriorityfee').value if (parseInt(network.lastBlock.baseFeePerGas, 16) > parseInt(maxFee)) { - el.querySelector('#txfee').innerHTML = 'Transaction is invalid. Base fee should not be bigger than Max fee' + el.querySelector('#txfee').innerHTML = 'Transaction is invalid. Max fee should not be less than Base fee' el.gasPriceStatus = false + confirmBtn.hidden = true return - } else el.gasPriceStatus = true + } else { + el.gasPriceStatus = true + confirmBtn.hidden = false + } newGasPriceCb(maxFee, (txFeeText, priceStatus) => { el.querySelector('#txfee').innerHTML = txFeeText + if (priceStatus) { + confirmBtn.hidden = false + } else { + confirmBtn.hidden = true + } el.gasPriceStatus = priceStatus el.txFee = { maxFee, maxPriorityFee, baseFeePerGas: network.lastBlock.baseFeePerGas } }) @@ -42,8 +52,9 @@ function confirmDialog (tx, network, amount, gasEstimation, newGasPriceCb, initi const el = yo`
-
You are about to create a transaction on ${network.name}. Confirm the details to send the info to your provider. -
The provider for many users is MetaMask. The provider will ask you to sign the transaction before it is sent to ${network.name}.
+
You are about to create a transaction on ${network.name} Network. Confirm the details to send the info to your provider. +
The provider for many users is MetaMask. The provider will ask you to sign the transaction before it is sent to ${network.name} Network. +
From: @@ -53,7 +64,11 @@ function confirmDialog (tx, network, amount, gasEstimation, newGasPriceCb, initi To: ${tx.to ? tx.to : '(Contract Creation)'}
-
+
+ Data: + 
${tx.data && tx.data.length > 50 ? tx.data.substring(0, 49) + '...' : tx.data} ${copyToClipboard(() => { return tx.data })}
+
+
Amount: ${amount} Ether
@@ -65,36 +80,32 @@ function confirmDialog (tx, network, amount, gasEstimation, newGasPriceCb, initi Gas limit: ${tx.gas}
-
- Max transaction fee: - -
${ - network.lastBlock.baseFeePerGas ? yo`
-
- Max Priority fee: - - Gwei + network.lastBlock.baseFeePerGas ? yo` +
+
+ Max Priority fee: + + Gwei
-
Represents the part of the tx fee that goes to the miner
-
-
- Max fee: - - Gwei +
+
+ Max fee (Not less than base fee - ${parseInt(network.lastBlock.baseFeePerGas, 16)} Gwei): + + Gwei +
-
Represents the maximum amount of fee that you will pay for this transaction. The minimun needs to be set to base fee.
` : yo`
- Gas price: - + Gas price: + Gwei (visit ethgasstation.info for current gas price info.)
` } -
- Data: - 
${tx.data && tx.data.length > 50 ? tx.data.substring(0, 49) + '...' : tx.data} ${copyToClipboard(() => { return tx.data })}
+
+ Max transaction fee: +