display global variables while debugging

libs/remix-simulator/src/methods/blocks.ts

@@ -41,6 +41,7 @@ export class Blocks {
     }
 
     const b = {
+      baseFeePerGas: '0x01',
       number: this.toHex(block.header.number),
       hash: this.toHex(block.hash()),
       parentHash: this.toHex(block.header.parentHash),
@@ -73,6 +74,7 @@ export class Blocks {
     const block = this.vmContext.blocks[payload.params[0]]
 
     const b = {
+      baseFeePerGas: '0x01',
       number: this.toHex(block.header.number),
       hash: this.toHex(block.hash()),
       parentHash: this.toHex(block.header.parentHash),

libs/remix-simulator/src/methods/transactions.ts

@@ -193,6 +193,7 @@ export class Transactions {
         blockNumber: '0x' + txBlock.header.number.toString('hex'),
         from: receipt.from,
         gas: Web3.utils.toHex(receipt.gas),
+        chainId: '0xb',
         // 'gasPrice': '2000000000000', // 0x123
         gasPrice: '0x4a817c800', // 20000000000
         hash: receipt.transactionHash,
@@ -239,6 +240,7 @@ export class Transactions {
         blockNumber: '0x' + txBlock.header.number.toString('hex'),
         from: receipt.from,
         gas: Web3.utils.toHex(receipt.gas),
+        chainId: '0xb',
         // 'gasPrice': '2000000000000', // 0x123
         gasPrice: '0x4a817c800', // 20000000000
         hash: receipt.transactionHash,
@@ -282,6 +284,7 @@ export class Transactions {
         from: receipt.from,
         gas: Web3.utils.toHex(receipt.gas),
         // 'gasPrice': '2000000000000', // 0x123
+        chainId: '0xb',
         gasPrice: '0x4a817c800', // 20000000000
         hash: receipt.transactionHash,
         input: receipt.input,

libs/remix-simulator/test/blocks.ts

@@ -18,6 +18,7 @@ describe('blocks', () => {
       const block = await web3.eth.getBlock(0)
 
       const expectedBlock = {
+        baseFeePerGas: '0x01',
         difficulty: '69762765929000',
         extraData: '0x0',
         gasLimit: 8000000,

libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx

@@ -20,6 +20,8 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
       contractAddress: null,
       to: null
     },
+    currentBlock: null,
+    currentTransaction: null,
     blockNumber: null,
     txNumber: '',
     debugging: false,
@@ -137,6 +139,8 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
           contractAddress: null,
           to: null
         },
+        currentBlock: null,
+        currentTransaction: null,
         blockNumber: null,
         ready: {
           vmDebugger: false,
@@ -182,8 +186,12 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
       console.error(e)
     }
     let currentReceipt
+    let currentBlock
+    let currentTransaction
     try {
       currentReceipt = await web3.eth.getTransactionReceipt(txNumber)
+      currentBlock = await web3.eth.getBlock(currentReceipt.blockHash)
+      currentTransaction = await web3.eth.getTransaction(txNumber)
     } catch (e) {
       setState(prevState => {
         return {
@@ -220,6 +228,8 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
             txNumber,
             debugging: true,
             currentReceipt,
+            currentBlock,
+            currentTransaction,
             debugger: debuggerInstance,
             toastMessage: `debugging ${txNumber}`,
             validationError: ''
@@ -293,7 +303,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
         { state.debugging && <StepManager stepManager={ stepManager } /> }
         { state.debugging && <VmDebuggerHead vmDebugger={ vmDebugger } /> }
       </div>
-      { state.debugging && <VmDebugger vmDebugger={ vmDebugger } /> }
+      { state.debugging && <VmDebugger vmDebugger={ vmDebugger } currentBlock={ state.currentBlock } currentReceipt={ state.currentReceipt } currentTransaction={ state.currentTransaction } /> }
     </div>
   )
 }

libs/remix-ui/debugger-ui/src/lib/vm-debugger/global-variables.tsx

+import React from 'react' // eslint-disable-line
+import DropdownPanel from './dropdown-panel' // eslint-disable-line
+import { BN } from 'ethereumjs-util'
+
+export const GlobalVariables = ({ block, receipt, tx }) => {
+  console.log(block, receipt, tx)
+  // see https://docs.soliditylang.org/en/latest/units-and-global-variables.html#block-and-transaction-properties
+  const globals = {
+    'block.basefee': (new BN(block.baseFeePerGas.replace('0x', ''), 'hex')).toString(10) + ` Wei (${block.baseFeePerGas})`,
+    'block.chainid': tx.chainId,
+    'block.coinbase': block.miner,
+    'block.difficulty': block.difficulty,
+    'block.gaslimit': block.gasLimit,
+    'block.number': block.number,
+    'block.timestamp': block.timestamp,
+    'msg.sender': tx.from,
+    'msg.sig': tx.input.substring(0, 10),
+    'msg.value': tx.value + ' Wei',
+    'tx.origin': tx.from
+  }
+  return (
+    <div id='globalvariable' data-id='globalvariable'>
+      <DropdownPanel hexHighlight={false} bodyStyle={{ fontFamily: 'monospace' }} dropdownName='Global Variables' calldata={globals || {}} />
+    </div>
+  )
+}
+
+export default GlobalVariables

libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx

@@ -15,6 +15,7 @@ export const VmDebuggerHead = ({ vmDebugger: { registerEvent, triggerEvent } })
     'remaining gas': '-',
     'loaded address': '-'
   })
+
   const [solidityState, setSolidityState] = useState({
     calldata: null,
     message: null

libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx

@@ -6,8 +6,9 @@ import StackPanel from './stack-panel' // eslint-disable-line
 import StoragePanel from './storage-panel' // eslint-disable-line
 import ReturnValuesPanel from './dropdown-panel' // eslint-disable-line
 import FullStoragesChangesPanel from './full-storages-changes' // eslint-disable-line
+import GlobalVariables from './global-variables' // eslint-disable-line
 
-export const VmDebugger = ({ vmDebugger: { registerEvent } }) => {
+export const VmDebugger = ({ vmDebugger: { registerEvent }, currentBlock, currentReceipt, currentTransaction }) => {
   const [calldataPanel, setCalldataPanel] = useState(null)
   const [memoryPanel, setMemoryPanel] = useState(null)
   const [callStackPanel, setCallStackPanel] = useState(null)
@@ -58,6 +59,7 @@ export const VmDebugger = ({ vmDebugger: { registerEvent } }) => {
         <StoragePanel calldata={storagePanel.calldata} header={storagePanel.header} />
         <CallstackPanel calldata={callStackPanel} />
         <CalldataPanel calldata={calldataPanel} />
+        <GlobalVariables block={currentBlock} receipt={currentReceipt} tx={currentTransaction} />
         <ReturnValuesPanel dropdownName='Return Value' calldata={returnValuesPanel || {}} />
         <FullStoragesChangesPanel calldata={fullStoragesChangesPanel} />
       </div>