London support

apps/remix-ide-e2e/src/tests/ballot.test.ts

@@ -49,7 +49,7 @@ module.exports = {
 
   'Debug Ballot / delegate': function (browser: NightwatchBrowser) {
     browser.pause(500)
-      .click('*[data-id="txLoggerDebugButton0xf88bc0ac0761f78d8c883b32550c68dadcdb095595c30e1a1b7c583e5e958dcb"]')
+      .debugTransaction(1)
       .waitForElementVisible('*[data-id="buttonNavigatorJumpPreviousBreakpoint"]')
       .click('*[data-id="buttonNavigatorJumpPreviousBreakpoint"]')
       .pause(2000)

apps/remix-ide-e2e/src/tests/ballot_0_4_11.spec.ts

@@ -45,7 +45,7 @@ module.exports = {
 
   'Debug Ballot / delegate': function (browser: NightwatchBrowser) {
     browser.pause(500)
-      .click('*[data-id="txLoggerDebugButton0xf88bc0ac0761f78d8c883b32550c68dadcdb095595c30e1a1b7c583e5e958dcb"]')
+      .debugTransaction(1)
       .pause(2000)
       .waitForElementVisible('*[data-id="buttonNavigatorJumpPreviousBreakpoint"]')
       .click('*[data-id="buttonNavigatorJumpPreviousBreakpoint"]')

apps/remix-ide-e2e/src/tests/debugger.spec.ts

@@ -423,7 +423,7 @@ const localVariable_step717_ABIEncoder = { // eslint-disable-line
 
 const jsGetTrace = `(async () => {
   try {
-      const result = await remix.call('debugger', 'getTrace', '0xa38bff6f06e7c4fc91df1db6aa31a69ab5d5882faa953b1e7a88bfa523268ed7')
+      const result = await remix.call('debugger', 'getTrace', '0x9341be49e911afe99bf1abc67cbcf36739d2e6470a08a69511c205a0737d7332')
       console.log('result ', result)
   } catch (e) {
       console.log(e.message)
@@ -432,7 +432,7 @@ const jsGetTrace = `(async () => {
 
 const jsDebug = `(async () => {    
   try {
-      const result = await remix.call('debugger', 'debug', '0xa38bff6f06e7c4fc91df1db6aa31a69ab5d5882faa953b1e7a88bfa523268ed7')
+      const result = await remix.call('debugger', 'debug', '0x9341be49e911afe99bf1abc67cbcf36739d2e6470a08a69511c205a0737d7332')
       console.log('result ', result)
   } catch (e) {
       console.log(e.message)

apps/remix-ide/src/app/tabs/hardhat-provider.js

@@ -65,7 +65,7 @@ export default class HardhatProvider extends Plugin {
         if (error) {
           this.blocked = true
           modalDialogCustom.alert('Hardhat Provider', `Error while connecting to the hardhat provider: ${error.message}`)
-          await this.call('udapp', 'setEnvironmentMode', { context: 'vm', fork: 'berlin' })
+          await this.call('udapp', 'setEnvironmentMode', { context: 'vm', fork: 'london' })
           this.provider = null
           setTimeout(_ => { this.blocked = false }, 1000) // we wait 1 second for letting remix to switch to vm
           return reject(error)

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/tabs/runTab/settings.js

@@ -98,14 +98,14 @@ class SettingsUI {
         </label>
         <div class="${css.environment}">
           <select id="selectExEnvOptions" data-id="settingsSelectEnvOptions" class="form-control ${css.select} custom-select">
-            <option id="vm-mode-berlin" data-id="settingsVMBerlinMode"
-              title="Execution environment does not connect to any node, everything is local and in memory only."
-              value="vm-berlin" name="executionContext" fork="berlin" > JavaScript VM (Berlin)
-            </option>
             <option id="vm-mode-london" data-id="settingsVMLondonMode"
               title="Execution environment does not connect to any node, everything is local and in memory only."
               value="vm-london" name="executionContext" fork="london"> JavaScript VM (London)
             </option>
+            <option id="vm-mode-berlin" data-id="settingsVMBerlinMode"
+              title="Execution environment does not connect to any node, everything is local and in memory only."
+              value="vm-berlin" name="executionContext" fork="berlin" > JavaScript VM (Berlin)
+            </option>
             <option id="injected-mode" data-id="settingsInjectedMode"
               title="Execution environment has been provided by Metamask or similar provider."
               value="injected" name="executionContext"> Injected Web3

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

@@ -14,20 +14,47 @@ 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 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>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 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} Network.
+      </div>
       <div class="mt-3 ${css.txInfoBox}">
         <div>
           <span class="text-dark mr-2">From:</span>
@@ -37,7 +64,11 @@ function confirmDialog (tx, amount, gasEstimation, self, newGasPriceCb, initialP
           <span class="text-dark mr-2">To:</span>
           <span>${tx.to ? tx.to : '(Contract Creation)'}</span>
         </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>${amount} Ether</span>
         </div>
@@ -49,18 +80,32 @@ function confirmDialog (tx, amount, gasEstimation, self, newGasPriceCb, initialP
           <span class="text-dark mr-2">Gas limit:</span>
           <span>${tx.gas}</span>
         </div>
-        <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:</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="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):</span>
+              <input class="form-control mr-1 text-right" style='height: 1.2rem; width: 6rem;' id='maxfee' oninput=${onMaxFeeChange} />
+              <span>Gwei</span>
+              <span class="text-dark ml-2"></span>
+            </div>
+          </div>`
+            : yo`<div class="d-flex align-items-center my-1">
+            <span class="text-dark mr-2 text-nowrap">Gas price:</span>
+            <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>
+          </div>`
+        }
+        <div class="mb-3">
           <span class="text-dark mr-2">Max transaction fee:</span>
-          <span id='txfee'></span>
-        </div>
-        <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} />
-          <span>Gwei (visit <a target='_blank' href='https://ethgasstation.info'>ethgasstation.info</a> for current gas price info.)</span>
-        </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>
+          <span class="text-warning" id='txfee'></span>
         </div>
       </div>
       <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) {
       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').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,9 +20,10 @@ export class ExecutionContext {
   constructor () {
     this.event = new EventManager()
     this.executionContext = null
+    this.lastBlock = null
     this.blockGasLimitDefault = 4300000
     this.blockGasLimit = this.blockGasLimitDefault
-    this.currentFork = 'berlin'
+    this.currentFork = 'london'
     this.mainNetGenesisHash = '0xd4e56740f876aef8c010b86a40d5f56745a118d0906a34e69aec8c0db1cb8fa3'
     this.customNetWorks = {}
     this.blocks = {}
@@ -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,10 +177,11 @@ 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) {
-          this.currentFork = 'berlin'
+          this.currentFork = 'london'
           console.log(`unable to detect fork, defaulting to ${this.currentFork}..`)
           console.error(e)
         }

libs/remix-analyzer/package.json

@@ -19,14 +19,14 @@
     }
   ],
   "dependencies": {
-    "@ethereumjs/block": "^3.3.0",
-    "@ethereumjs/tx": "^3.2.1",
-    "@ethereumjs/vm": "^5.4.1",
+    "@ethereumjs/block": "^3.4.0",
+    "@ethereumjs/tx": "^3.3.0",
+    "@ethereumjs/vm": "^5.5.0",
     "@remix-project/remix-astwalker": "^0.0.26",
     "@remix-project/remix-lib": "^0.5.4",
     "async": "^2.6.2",
     "ethereumjs-util": "^7.0.10",
-    "ethers": "^5.1.4",
+    "ethers": "^5.4.2",
     "string-similarity": "^4.0.4",
     "web3": "1.2.4"
   },

libs/remix-astwalker/package.json

@@ -34,14 +34,14 @@
     ]
   },
   "dependencies": {
-    "@ethereumjs/block": "^3.3.0",
-    "@ethereumjs/tx": "^3.2.1",
-    "@ethereumjs/vm": "^5.4.1",
+    "@ethereumjs/block": "^3.4.0",
+    "@ethereumjs/tx": "^3.3.0",
+    "@ethereumjs/vm": "^5.5.0",
     "@remix-project/remix-lib": "^0.5.4",
     "@types/tape": "^4.2.33",
     "async": "^2.6.2",
     "ethereumjs-util": "^7.0.10",
-    "ethers": "^5.1.4",
+    "ethers": "^5.4.2",
     "nyc": "^13.3.0",
     "string-similarity": "^4.0.4",
     "tape": "^4.10.1",

libs/remix-debug/package.json

@@ -18,17 +18,17 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@ethereumjs/block": "^3.3.0",
+    "@ethereumjs/block": "^3.4.0",
     "@ethereumjs/common": "^2.2.0",
-    "@ethereumjs/tx": "^3.2.1",
-    "@ethereumjs/vm": "^5.4.1",
+    "@ethereumjs/tx": "^3.3.0",
+    "@ethereumjs/vm": "^5.5.0",
     "@remix-project/remix-astwalker": "^0.0.26",
     "@remix-project/remix-lib": "^0.5.4",
     "async": "^2.6.2",
     "commander": "^2.19.0",
     "deep-equal": "^1.0.1",
     "ethereumjs-util": "^7.0.10",
-    "ethers": "^5.1.4",
+    "ethers": "^5.4.2",
     "string-similarity": "^4.0.4",
     "web3": "^1.2.4"
   },

libs/remix-debug/src/code/codeUtils.ts

@@ -46,7 +46,7 @@ type Opcode = {
  * information about the opcode.
  */
 export function parseCode (raw) {
-  const common = new Common({ chain: 'mainnet', hardfork: 'berlin' })
+  const common = new Common({ chain: 'mainnet', hardfork: 'london' })
   const opcodes = getOpcodesForHF(common)
 
   const code = []

libs/remix-debug/src/trace/traceManager.ts

@@ -40,7 +40,7 @@ export class TraceManager {
           const networkId = await this.web3.eth.net.getId()
           this.fork = execution.forkAt(networkId, tx.blockNumber)
         } catch (e) {
-          this.fork = 'berlin'
+          this.fork = 'london'
           console.log(`unable to detect fork, defaulting to ${this.fork}..`)
           console.error(e)
         }

libs/remix-debug/test/decoder/vmCall.ts

@@ -11,7 +11,7 @@ export function sendTx (vm, from, to, value, data, cb?) {
   return new Promise ((resolve, reject) => {
     var tx = new Tx({
       nonce: new BN(from.nonce++),
-      gasPrice: new BN(1),
+      // gasPrice: new BN(1),
       gasLimit: new BN(3000000, 10),
       to: to,
       value: new BN(value, 10),

libs/remix-debug/test/vmCall.ts

@@ -9,7 +9,7 @@ var remixLib = require('@remix-project/remix-lib')
 function sendTx (vm, from, to, value, data, cb) {
   var tx = new Tx({
     nonce: new BN(from.nonce++),
-    gasPrice: new BN(1),
+    // gasPrice: new BN(1),
     gasLimit: new BN(3000000, 10),
     to: to,
     value: new BN(value, 10),