mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

Improved designe of confirmation dialog

Browse Source
pull/1432/head
lianahus 3 years ago committed by Aniket
parent b1ad95738f
commit e1892f2ee8
1 changed files with 37 additions and 26 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 63
      apps/remix-ide/src/app/ui/confirmDialog.js

63
apps/remix-ide/src/app/ui/confirmDialog.js
Unescape View File

@ -26,15 +26,25 @@ function confirmDialog (tx, network, amount, gasEstimation, newGasPriceCb, initi
const onMaxFeeChange = function () { const onMaxFeeChange = function () {
var maxFee = el.querySelector('#maxfee').value var maxFee = el.querySelector('#maxfee').value
var confirmBtn = document.querySelector('#modal-footer-ok')
var maxPriorityFee = el.querySelector('#maxpriorityfee').value var maxPriorityFee = el.querySelector('#maxpriorityfee').value
if (parseInt(network.lastBlock.baseFeePerGas, 16) > parseInt(maxFee)) { 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 el.gasPriceStatus = false
confirmBtn.hidden = true
return return
} else el.gasPriceStatus = true } else {
el.gasPriceStatus = true
confirmBtn.hidden = false
}
newGasPriceCb(maxFee, (txFeeText, priceStatus) => { newGasPriceCb(maxFee, (txFeeText, priceStatus) => {
el.querySelector('#txfee').innerHTML = txFeeText el.querySelector('#txfee').innerHTML = txFeeText
if (priceStatus) {
confirmBtn.hidden = false
} else {
confirmBtn.hidden = true
}
el.gasPriceStatus = priceStatus el.gasPriceStatus = priceStatus
el.txFee = { maxFee, maxPriorityFee, baseFeePerGas: network.lastBlock.baseFeePerGas } el.txFee = { maxFee, maxPriorityFee, baseFeePerGas: network.lastBlock.baseFeePerGas }
}) })
@ -42,8 +52,9 @@ function confirmDialog (tx, network, amount, gasEstimation, newGasPriceCb, initi
const el = yo` const el = yo`
<div> <div>
<div>You are about to create a transaction on ${network.name}. Confirm the details to send the info to your provider. <div class="text-dark">You are about to create a transaction on ${network.name} Network. Confirm the details to send the info to your provider.
<br>The provider for many users is MetaMask. The provider will ask you to sign the transaction before it is sent to ${network.name}.</div> <br>The provider for many users is MetaMask. The provider will ask you to sign the transaction before it is sent to ${network.name} Network.
</div>
<div class="mt-3 ${css.txInfoBox}"> <div class="mt-3 ${css.txInfoBox}">
<div> <div>
<span class="text-dark mr-2">From:</span> <span class="text-dark mr-2">From:</span>
@ -53,7 +64,11 @@ function confirmDialog (tx, network, amount, gasEstimation, newGasPriceCb, initi
<span class="text-dark mr-2">To:</span> <span class="text-dark mr-2">To:</span>
<span>${tx.to ? tx.to : '(Contract Creation)'}</span> <span>${tx.to ? tx.to : '(Contract Creation)'}</span>
</div> </div>
<div> <div class="d-flex align-items-center">
<span class="text-dark mr-2">Data:</span>
<pre class="${css.wrapword} mb-0">${tx.data && tx.data.length > 50 ? tx.data.substring(0, 49) + '...' : tx.data} ${copyToClipboard(() => { return tx.data })}</pre>
</div>
<div class="mb-3">
<span class="text-dark mr-2">Amount:</span> <span class="text-dark mr-2">Amount:</span>
<span>${amount} Ether</span> <span>${amount} Ether</span>
</div> </div>
@ -65,36 +80,32 @@ function confirmDialog (tx, network, amount, gasEstimation, newGasPriceCb, initi
<span class="text-dark mr-2">Gas limit:</span> <span class="text-dark mr-2">Gas limit:</span>
<span>${tx.gas}</span> <span>${tx.gas}</span>
</div> </div>
<div>
<span class="text-dark mr-2">Max transaction fee:</span>
<span id='txfee'></span>
</div>
${ ${
network.lastBlock.baseFeePerGas ? yo`<div class="align-items-center my-1"> network.lastBlock.baseFeePerGas ? yo`
<div> <div class="align-items-center my-1" title="Represents the part of the tx fee that goes to the miner.">
<span class="text-dark mr-2">Max Priority fee:</span> <div class='d-flex'>
<input class="form-control mr-1" style='height: 28px;' value="0" id='maxpriorityfee' /> <span class="text-dark mr-2 text-nowrap">Max Priority fee:</span>
<span>Gwei</span> <input class="form-control mr-1 text-right" style='height: 1.2rem; width: 6rem;' value="0" id='maxpriorityfee' />
<span title="visit https://ethgasstation.info for current gas price info.">Gwei</span>
</div> </div>
<div class="text-dark mr-2 font-italic">Represents the part of the tx fee that goes to the miner</div>
</div> </div>
<div class="align-items-center my-1"> <div class="align-items-center my-1" title="Represents the maximum amount of fee that you will pay for this transaction. The minimun needs to be set to base fee.">
<div> <div class='d-flex'>
<span class="text-dark mr-2">Max fee:</span> <span class="text-dark mr-2 text-nowrap">Max fee (Not less than base fee - ${parseInt(network.lastBlock.baseFeePerGas, 16)} Gwei):</span>
<input class="form-control mr-1" style='height: 28px;' id='maxfee' oninput=${onMaxFeeChange} /> <input class="form-control mr-1 text-right" style='height: 1.2rem; width: 6rem;' id='maxfee' oninput=${onMaxFeeChange} />
<span>Gwei</span> <span>Gwei</span>
<span class="text-dark ml-2"></span>
</div> </div>
<div class="text-dark mr-2 font-italic">Represents the maximum amount of fee that you will pay for this transaction. The minimun needs to be set to base fee.</div>
</div>` </div>`
: yo`<div class="d-flex align-items-center my-1"> : yo`<div class="d-flex align-items-center my-1">
<span class="text-dark mr-2">Gas price:</span> <span class="text-dark mr-2 text-nowrap">Gas price:</span>
<input class="form-control mr-1" style='width: 40px; height: 28px;' id='gasprice' oninput=${onGasPriceChange} /> <input class="form-control mr-1 text-right" style='width: 40px; height: 28px;' id='gasprice' oninput=${onGasPriceChange} />
<span>Gwei (visit <a target='_blank' href='https://ethgasstation.info'>ethgasstation.info</a> for current gas price info.)</span> <span>Gwei (visit <a target='_blank' href='https://ethgasstation.info'>ethgasstation.info</a> for current gas price info.)</span>
</div>` </div>`
} }
<div class="d-flex align-items-center"> <div class="mb-3">
<span class="text-dark mr-2 mb-3">Data:</span> <span class="text-dark mr-2">Max transaction fee:</span>
<pre class=${css.wrapword}>${tx.data && tx.data.length > 50 ? tx.data.substring(0, 49) + '...' : tx.data} ${copyToClipboard(() => { return tx.data })}</pre> <span class="text-warning" id='txfee'></span>
</div> </div>
</div> </div>
<div class="d-flex py-1 align-items-center custom-control custom-checkbox ${css.checkbox}"> <div class="d-flex py-1 align-items-center custom-control custom-checkbox ${css.checkbox}">

Write Preview
Loading…
Cancel
Save