maxFee and maxPriorityFee for eip1559

apps/remix-ide/src/app/tabs/runTab/contractDropdown.js

@@ -361,7 +361,7 @@ class ContractDropdownUI {
         return continueTxExecution(null)
       }
       const amount = this.blockchain.fromWei(tx.value, true, 'ether')
-      const content = confirmDialog(tx, amount, gasEstimation, null, this.blockchain.determineGasFees(tx), this.blockchain.determineGasPrice.bind(this.blockchain))
+      const content = confirmDialog(tx, network, amount, gasEstimation, this.blockchain.determineGasFees(tx), this.blockchain.determineGasPrice.bind(this.blockchain))
 
       modalDialog('Confirm transaction', content,
         {
@@ -370,10 +370,9 @@ class ContractDropdownUI {
             this.blockchain.config.setUnpersistedProperty('doNotShowTransactionConfirmationAgain', content.querySelector('input#confirmsetting').checked)
             // TODO: check if this is check is still valid given the refactor
             if (!content.gasPriceStatus) {
-              cancelCb('Given gas price is not correct')
+              cancelCb('Given transaction fee is not correct')
             } else {
-              var gasPrice = this.blockchain.toWei(content.querySelector('#gasprice').value, 'gwei')
-              continueTxExecution(gasPrice)
+              continueTxExecution(content.txFee)
             }
           }
         }, {

apps/remix-ide/src/app/tabs/runTab/recorder.js

@@ -104,7 +104,7 @@ class RecorderUI extends Plugin {
         return continueTxExecution(null)
       }
       const amount = this.blockchain.fromWei(tx.value, true, 'ether')
-      const content = confirmDialog(tx, amount, gasEstimation, null, this.blockchain.determineGasFees(tx), this.blockchain.determineGasPrice.bind(this.blockchain))
+      const content = confirmDialog(tx, network, amount, gasEstimation, this.blockchain.determineGasFees(tx), this.blockchain.determineGasPrice.bind(this.blockchain))
 
       modalDialog('Confirm transaction', content,
         {
@@ -113,10 +113,9 @@ class RecorderUI extends Plugin {
             this.config.setUnpersistedProperty('doNotShowTransactionConfirmationAgain', content.querySelector('input#confirmsetting').checked)
             // TODO: check if this is check is still valid given the refactor
             if (!content.gasPriceStatus) {
-              cancelCb('Given gas price is not correct')
+              cancelCb('Given transaction fee is not correct')
             } else {
-              var gasPrice = this.blockchain.toWei(content.querySelector('#gasprice').value, 'gwei')
-              continueTxExecution(gasPrice)
+              continueTxExecution(content.txFee)
             }
           }
         }, {

apps/remix-ide/src/app/ui/confirmDialog.js

@@ -14,20 +14,36 @@ var css = csjs`
   }
 `
 
-// TODO: self is not actually used and can be removed
-function confirmDialog (tx, amount, gasEstimation, self, newGasPriceCb, initialParamsCb) {
-  var onGasPriceChange = function () {
+function confirmDialog (tx, network, amount, gasEstimation, newGasPriceCb, initialParamsCb) {
+  const onGasPriceChange = function () {
     var gasPrice = el.querySelector('#gasprice').value
     newGasPriceCb(gasPrice, (txFeeText, priceStatus) => {
       el.querySelector('#txfee').innerHTML = txFeeText
       el.gasPriceStatus = priceStatus
+      el.txFee = { gasPrice }
     })
   }
 
-  var el = yo`
+  const onMaxFeeChange = function () {
+    var maxFee = el.querySelector('#maxfee').value
+    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.gasPriceStatus = false
+      return
+    } else el.gasPriceStatus = true
+
+    newGasPriceCb(maxFee, (txFeeText, priceStatus) => {
+      el.querySelector('#txfee').innerHTML = txFeeText
+      el.gasPriceStatus = priceStatus
+      el.txFee = { maxFee, maxPriorityFee, baseFeePerGas: network.lastBlock.baseFeePerGas }
+    })
+  }
+
+  const el = yo`
     <div>
-      <div>You are about to create a transaction on the Main 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.</div>
+      <div>You are about to create a transaction on ${network.name}. 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>
       <div class="mt-3 ${css.txInfoBox}">
         <div>
           <span class="text-dark mr-2">From:</span>
@@ -53,11 +69,29 @@ function confirmDialog (tx, amount, gasEstimation, self, newGasPriceCb, initialP
           <span class="text-dark mr-2">Max transaction fee:</span>
           <span id='txfee'></span>
         </div>
-        <div class="d-flex align-items-center my-1">
+        ${
+          network.lastBlock.baseFeePerGas ? yo`<div class="align-items-center my-1">
+            <div>
+              <span class="text-dark mr-2">Max Priority fee:</span>
+              <input class="form-control mr-1" style='height: 28px;' value="0" id='maxpriorityfee' />
+              <span>Gwei</span>
+            </div>            
+            <div class="text-dark mr-2 font-italic">Represents the part of the tx fee that goes to the miner</div>
+          </div>
+          <div class="align-items-center my-1">
+            <div>
+              <span class="text-dark mr-2">Max fee:</span> 
+              <input class="form-control mr-1" style='height: 28px;' id='maxfee' oninput=${onMaxFeeChange} />
+              <span>Gwei</span>            
+            </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>`
+            : yo`<div class="d-flex align-items-center my-1">
             <span class="text-dark mr-2">Gas price:</span>
-          <input class="form-control mr-1" style='width: 40px; height: 28px;'id='gasprice' oninput=${onGasPriceChange} />
+            <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> for current gas price info.)</span>
-        </div>
+          </div>`
+        }
         <div class="d-flex align-items-center">
           <span class="text-dark mr-2 mb-3">Data:</span>
           <pre class=${css.wrapword}>${tx.data && tx.data.length > 50 ? tx.data.substring(0, 49) + '...' : tx.data} ${copyToClipboard(() => { return tx.data })}</pre>
@@ -74,10 +108,14 @@ function confirmDialog (tx, amount, gasEstimation, self, newGasPriceCb, initialP
     if (txFeeText) {
       el.querySelector('#txfee').innerHTML = txFeeText
     }
-    if (gasPriceValue) {
+    if (el.querySelector('#gasprice') && gasPriceValue) {
       el.querySelector('#gasprice').value = gasPriceValue
       onGasPriceChange()
     }
+    if (el.querySelector('#maxfee') && network && network.lastBlock && network.lastBlock.baseFeePerGas && el.querySelector('#maxfee')) {
+      el.querySelector('#maxfee').value = parseInt(network.lastBlock.baseFeePerGas, 16)
+      onMaxFeeChange()
+    }
     if (gasPriceStatus !== undefined) {
       el.gasPriceStatus = gasPriceStatus
     }

apps/remix-ide/src/app/ui/sendTxCallbacks.js

@@ -51,7 +51,7 @@ const confirmationCb = function (network, tx, gasEstimation, continueTxExecution
     return continueTxExecution(null)
   }
   var amount = Web3.utils.fromWei(typeConversion.toInt(tx.value), 'ether')
-  var content = confirmDialog(tx, amount, gasEstimation, self.udappUI,
+  var content = confirmDialog(tx, network, amount, gasEstimation,
     (gasPrice, cb) => {
       let txFeeText, priceStatus
       // TODO: this try catch feels like an anti pattern, can/should be
@@ -93,10 +93,9 @@ const confirmationCb = function (network, tx, gasEstimation, continueTxExecution
         )
         // TODO: check if this is check is still valid given the refactor
         if (!content.gasPriceStatus) {
-          cancelCb('Given gas price is not correct')
+          cancelCb('Given transaction fee is not correct')
         } else {
-          var gasPrice = Web3.utils.toWei(content.querySelector('#gasprice').value, 'gwei')
-          continueTxExecution(gasPrice)
+          continueTxExecution(content.txFee)
         }
       }
     },

apps/remix-ide/src/blockchain/execution-context.js

@@ -20,6 +20,7 @@ export class ExecutionContext {
   constructor () {
     this.event = new EventManager()
     this.executionContext = null
+    this.lastBlock = null
     this.blockGasLimitDefault = 4300000
     this.blockGasLimit = this.blockGasLimitDefault
     this.currentFork = 'berlin'
@@ -86,10 +87,10 @@ export class ExecutionContext {
           web3.eth.getBlock(0, (error, block) => {
             if (error) console.log('cant query first block')
             if (block && block.hash !== this.mainNetGenesisHash) name = 'Custom'
-            callback(err, { id, name })
+            callback(err, { id, name, lastBlock: this.lastBlock, currentFork: this.currentFork })
           })
         } else {
-          callback(err, { id, name })
+          callback(err, { id, name, lastBlock: this.lastBlock, currentFork: this.currentFork })
         }
       })
     }
@@ -176,6 +177,7 @@ export class ExecutionContext {
         const block = await web3.eth.getBlock('latest')
         // we can't use the blockGasLimit cause the next blocks could have a lower limit : https://github.com/ethereum/remix/issues/506
         this.blockGasLimit = (block && block.gasLimit) ? Math.floor(block.gasLimit - (5 * block.gasLimit) / 1024) : this.blockGasLimitDefault
+        this.lastBlock = block
         try {
           this.currentFork = execution.forkAt(await web3.eth.net.getId(), block.number)
         } catch (e) {

libs/remix-lib/src/execution/txRunnerWeb3.ts

@@ -15,8 +15,18 @@ export class TxRunnerWeb3 {
     this._api = api
   }
 
-  _executeTx (tx, gasPrice, api, promptCb, callback) {
-    if (gasPrice) tx.gasPrice = this.getWeb3().utils.toHex(gasPrice)
+  _executeTx (tx, txFee, api, promptCb, callback) {
+    if (txFee) {
+      if (txFee.baseFeePerGas) {
+        tx.maxPriorityFee = this.getWeb3().utils.toHex(this.getWeb3().utils.toWei(txFee.maxPriorityFee, 'gwei'))
+        tx.maxFee = this.getWeb3().utils.toHex(this.getWeb3().utils.toWei(txFee.maxFee, 'gwei'))
+        tx.type = 2
+      } else {
+        tx.gasPrice = this.getWeb3().utils.toHex(this.getWeb3().utils.toWei(txFee.gasPrice, 'gwei'))
+        tx.type = 1
+      }
+    }
+
     if (api.personalMode()) {
       promptCb(
         (value) => {
@@ -100,8 +110,8 @@ export class TxRunnerWeb3 {
             return
           }
 
-          confirmCb(network, tx, tx['gas'], (gasPrice) => {
-            return this._executeTx(tx, gasPrice, this._api, promptCb, callback)
+          confirmCb(network, tx, tx['gas'], (txFee) => {
+            return this._executeTx(tx, txFee, this._api, promptCb, callback)
           }, (error) => {
             callback(error)
           })