@ -14,20 +14,47 @@ var css = csjs`
} }
` `
// TODO: self is not actually used and can be removed
function confirmDialog ( tx , network , amount , gasEstimation , newGasPriceCb , initialParamsCb ) {
function confirmDialog ( tx , amount , gasEstimation , self , newGasPriceCb , initialParamsCb ) { const onGasPriceChange = function ( ) {
var onGasPriceChange = function ( ) {
var gasPrice = el . querySelector ( '#gasprice' ) . value var gasPrice = el . querySelector ( '#gasprice' ) . value
newGasPriceCb ( gasPrice , ( txFeeText , priceStatus ) => { newGasPriceCb ( gasPrice , ( txFeeText , priceStatus ) => {
el . querySelector ( '#txfee' ) . innerHTML = txFeeText el . querySelector ( '#txfee' ) . innerHTML = txFeeText
el . gasPriceStatus = priceStatus el . gasPriceStatus = priceStatus
el . txFee = { gasPrice }
} ) } )
} }
var el = yo ` 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. Max fee should not be less than Base fee'
el . gasPriceStatus = false
confirmBtn . hidden = true
return
} 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 }
} )
}
const el = yo `
< div > < div >
< div > You are about to create a transaction on the Main Network . 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 the Main Network . < / d i v > < 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 .
< / d i v >
< div class = "mt-3 ${css.txInfoBox}" > < div class = "mt-3 ${css.txInfoBox}" >
< div > < div >
< span class = "text-dark mr-2" > From : < / s p a n > < span class = "text-dark mr-2" > From : < / s p a n >
@ -37,7 +64,11 @@ function confirmDialog (tx, amount, gasEstimation, self, newGasPriceCb, initialP
< span class = "text-dark mr-2" > To : < / s p a n > < span class = "text-dark mr-2" > To : < / s p a n >
< span > $ { tx . to ? tx . to : '(Contract Creation)' } < / s p a n > < span > $ { tx . to ? tx . to : '(Contract Creation)' } < / s p a n >
< / d i v > < / d i v >
< div > < div class = "d-flex align-items-center" >
< span class = "text-dark mr-2" > Data : < / s p a n >
< pre class = "${css.wrapword} mb-0" > $ { tx . data && tx . data . length > 50 ? tx . data . substring ( 0 , 49 ) + '...' : tx . data } $ { copyToClipboard ( ( ) => { return tx . data } ) } < / p r e >
< / d i v >
< div class = "mb-3" >
< span class = "text-dark mr-2" > Amount : < / s p a n > < span class = "text-dark mr-2" > Amount : < / s p a n >
< span > $ { amount } Ether < / s p a n > < span > $ { amount } Ether < / s p a n >
< / d i v > < / d i v >
@ -49,18 +80,32 @@ function confirmDialog (tx, amount, gasEstimation, self, newGasPriceCb, initialP
< span class = "text-dark mr-2" > Gas limit : < / s p a n > < span class = "text-dark mr-2" > Gas limit : < / s p a n >
< span > $ { tx . gas } < / s p a n > < span > $ { tx . gas } < / s p a n >
< / d i v > < / d i v >
< div > $ {
network . lastBlock . baseFeePerGas ? yo `
< div class = "align-items-center my-1" title = "Represents the part of the tx fee that goes to the miner." >
< div class = 'd-flex' >
< span class = "text-dark mr-2 text-nowrap" > Max Priority fee : < / s p a n >
< 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 < / s p a n >
< / d i v >
< / d i v >
< 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 class = 'd-flex' >
< span class = "text-dark mr-2 text-nowrap" > Max fee ( Not less than base fee - $ { parseInt ( network . lastBlock . baseFeePerGas , 16 ) } Gwei ) : < / s p a n >
< input class = "form-control mr-1 text-right" style = 'height: 1.2rem; width: 6rem;' id = 'maxfee' oninput = $ { onMaxFeeChange } / >
< span > Gwei < / s p a n >
< span class = "text-dark ml-2" > < / s p a n >
< / d i v >
< / d i v > `
: yo ` <div class="d-flex align-items-center my-1">
< span class = "text-dark mr-2 text-nowrap" > Gas price : < / s p a n >
< 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 > f o r c u r r e n t g a s p r i c e i n f o . ) < / s p a n >
< / d i v > `
}
< div class = "mb-3" >
< span class = "text-dark mr-2" > Max transaction fee : < / s p a n > < span class = "text-dark mr-2" > Max transaction fee : < / s p a n >
< span id = 'txfee' > < / s p a n > < span class = "text-warning" id = 'txfee' > < / s p a n >
< / d i v >
< div class = "d-flex align-items-center my-1" >
< span class = "text-dark mr-2" > Gas price : < / s p a n >
< input class = "form-control mr-1" style = 'width: 40px; height: 28px;' id = 'gasprice' oninput = $ { onGasPriceChange } / >
< span > Gwei ( visit < a target = '_blank' href = 'https://ethgasstation.info' > ethgasstation . info < / a > f o r c u r r e n t g a s p r i c e i n f o . ) < / s p a n >
< / d i v >
< div class = "d-flex align-items-center" >
< span class = "text-dark mr-2 mb-3" > Data : < / s p a n >
< pre class = $ { css . wrapword } > $ { tx . data && tx . data . length > 50 ? tx . data . substring ( 0 , 49 ) + '...' : tx . data } $ { copyToClipboard ( ( ) => { return tx . data } ) } < / p r e >
< / d i v > < / d i v >
< / d i v > < / d i v >
< 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}" >
@ -74,10 +119,14 @@ function confirmDialog (tx, amount, gasEstimation, self, newGasPriceCb, initialP
if ( txFeeText ) { if ( txFeeText ) {
el . querySelector ( '#txfee' ) . innerHTML = txFeeText el . querySelector ( '#txfee' ) . innerHTML = txFeeText
} }
if ( gasPriceValue ) { if ( el . querySelector ( '#gasprice' ) && gasPriceValue ) {
el . querySelector ( '#gasprice' ) . value = gasPriceValue el . querySelector ( '#gasprice' ) . value = gasPriceValue
onGasPriceChange ( ) onGasPriceChange ( )
} }
if ( el . querySelector ( '#maxfee' ) && network && network . lastBlock && network . lastBlock . baseFeePerGas ) {
el . querySelector ( '#maxfee' ) . value = parseInt ( network . lastBlock . baseFeePerGas , 16 )
onMaxFeeChange ( )
}
if ( gasPriceStatus !== undefined ) { if ( gasPriceStatus !== undefined ) {
el . gasPriceStatus = gasPriceStatus el . gasPriceStatus = gasPriceStatus
} }
Liana Husikyan
3 years ago
committed by
GitHub