completed move to react

apps/remix-ide/src/app/tabs/debugger-tab.js

@@ -2,9 +2,12 @@ const yo = require('yo-yo')
 const remixDebug = require('@remix-project/remix-debug')
 const css = require('./styles/debugger-tab-styles')
 import toaster from '../ui/tooltip'
-const DebuggerUI = require('./debugger/debuggerUI')
+import { DebuggerUI } from '@remix-ui/debugger-ui'
+// const DebuggerUI = require('./debugger/debuggerUI')
 import { ViewPlugin } from '@remixproject/engine'
 import * as packageJson from '../../../../../package.json'
+import React from 'react'
+import ReactDOM from 'react-dom'
 
 const profile = {
   name: 'debugger',
@@ -25,6 +28,9 @@ class DebuggerTab extends ViewPlugin {
     super(profile)
     this.el = null
     this.blockchain = blockchain
+    this.debugHash = null
+    this.getTraceHash = null
+    this.removeHighlights = false
   }
 
   render () {
@@ -55,14 +61,18 @@ class DebuggerTab extends ViewPlugin {
       toaster(yo`<div><b>Source verification plugin not activated or not available.</b> continuing <i>without</i> source code debugging.</div>`)
     })
 
-    this.debuggerUI = new DebuggerUI(
-      this,
-      this.el.querySelector('#debugger'),
-      (address, receipt) => {
-        const target = (address && remixDebug.traceHelper.isContractCreation(address)) ? receipt.contractAddress : address
-        return this.call('fetchAndCompile', 'resolve', target || receipt.contractAddress || receipt.to, '.debug', this.blockchain.web3())
-      }
-    )
+    ReactDOM.render(
+      <DebuggerUI 
+        debuggerModule={this} 
+        fetchContractAndCompile={(address, receipt) => {
+          const target = (address && remixDebug.traceHelper.isContractCreation(address)) ? receipt.contractAddress : address
+
+          return this.call('fetchAndCompile', 'resolve', target || receipt.contractAddress || receipt.to, '.debug', this.blockchain.web3())
+        }}
+        debugHash={this.debugHash}
+        getTraceHash={this.getTraceHash}
+      />
+    , this.el)
 
     this.call('manager', 'activatePlugin', 'source-verification').catch(e => console.log(e.message))
     // this.call('manager', 'activatePlugin', 'udapp')
@@ -71,21 +81,21 @@ class DebuggerTab extends ViewPlugin {
   }
 
   deactivate () {
-    this.debuggerUI.deleteHighlights()
+    this.removeHighlights = true
     super.deactivate()
   }
 
   debug (hash) {
-    if (this.debuggerUI) this.debuggerUI.debug(hash)
+    this.debugHash = hash
   }
 
   getTrace (hash) {
-    return this.debuggerUI.getTrace(hash)
+    this.getTraceHash = hash
   }
 
-  debugger () {
-    return this.debuggerUI
-  }
+  // debugger () {
+  //   return this.debuggerUI
+  // }
 }
 
 module.exports = DebuggerTab

apps/remix-ide/src/app/tabs/debugger/debuggerUI.js

-import React from 'react'
-import ReactDOM from 'react-dom'
-import { TreeView, TreeViewItem } from '@remix-ui/tree-view'
-
 var TxBrowser = require('./debuggerUI/TxBrowser')
 var StepManagerUI = require('./debuggerUI/StepManager')
 var VmDebugger = require('./debuggerUI/VmDebugger')
@@ -247,7 +243,6 @@ class DebuggerUI {
           ${this.debuggerHeadPanelsView}          
         <div class="${css.statusMessage}">${this.statusMessage}</div>
         ${this.debuggerPanelsView}
-        <div id="treeViewReact"></div>
       </div>
     `
     if (!this.view) {
@@ -277,26 +272,6 @@ class DebuggerUI {
     yo.update(this.debuggerHeadPanelsView, this.vmDebugger.renderHead())
     yo.update(this.debuggerPanelsView, this.vmDebugger.render())
     yo.update(this.stepManagerView, this.stepManager.render())
-    ReactDOM.render(
-      <TreeView>
-        <TreeViewItem label="Item 1" />
-        <TreeViewItem label={<strong style={{ color: 'blue' }}>Item 2</strong>} />
-        <TreeViewItem label="Item 3">
-          <TreeView>
-            <TreeViewItem label="Nested 1" />
-            <TreeViewItem label="Nested 2" />
-            <TreeViewItem label="Nested 3">
-              <TreeView>
-                  <TreeViewItem label="Sub Nested 1" />
-                  <TreeViewItem label="Sub Nested 2" />
-              </TreeView>
-            </TreeViewItem>
-            <TreeViewItem label="Nested 4" />
-          </TreeView>
-        </TreeViewItem>
-        <TreeViewItem label="Item 4" />
-      </TreeView>
-      , document.getElementById('treeViewReact'))
   }
 
 }

libs/remix-ui/debugger-ui/src/index.ts

-import StepManager from './lib/step-manager/step-manager'
-
-export { StepManager }
+export * from './lib/debugger-ui'

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

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'
 import TxBrowser from './tx-browser/tx-browser'
 import StepManager from './step-manager/step-manager'
 import VmDebugger from './vm-debugger/vm-debugger'
+import VmDebuggerHead from './vm-debugger/vm-debugger-head'
 import remixDebug, { TransactionDebugger as Debugger } from '@remix-project/remix-debug'
 /* eslint-disable-next-line */
 import toaster from '../../../../../apps/remix-ide/src/app/ui/tooltip'
@@ -13,7 +14,7 @@ import EventManager from '../../../../../apps/remix-ide/src/lib/events'
 import globalRegistry from '../../../../../apps/remix-ide/src/global/registry'
 import './debugger-ui.css'
 
-const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => {
+export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash, getTraceHash, removeHighlights }) => {
   const event = new EventManager()
   const sourceHighlighter = new SourceHighlighter()
   const init = remixDebug.init
@@ -26,7 +27,13 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => {
       to: null
     },
     blockNumber: null,
-    txNumber: null
+    txNumber: null,
+    visibility: {
+      vmDebugger: false,
+      stepManager: false,
+      txBrowser: false
+    },
+    debugging: false
   })
 
   useEffect(() => {
@@ -37,22 +44,35 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => {
         if (state.debugger) state.debugger.breakPointManager.remove({fileName: fileName, row: row})
       })
   
-      this.editor.event.register('breakpointAdded', (fileName, row) => {
+      editor.event.register('breakpointAdded', (fileName, row) => {
         if (state.debugger) state.debugger.breakPointManager.add({fileName: fileName, row: row})
       })
   
-      this.editor.event.register('contentChanged', () => {
+      editor.event.register('contentChanged', () => {
         if (state.debugger) state.debugger.unload()
       })
     }
 
     setEditor()
+    return unLoad()
   }, [])
 
-  const listenToEvents = () => {
-    if (!state.debugger) return
+  useEffect(() => {
+    debug(debugHash)
+  }, [debugHash])
 
-    state.debugger.event.register('debuggerStatus', async (isActive) => {
+  useEffect(() => {
+    getTrace(getTraceHash)
+  }, [getTraceHash])
+
+  useEffect(() => {
+    if (removeHighlights) deleteHighlights()
+  }, [removeHighlights])
+
+  const listenToEvents = (debuggerInstance) => {
+    if (!debuggerInstance) return
+
+    debuggerInstance.event.register('debuggerStatus', async (isActive) => {
       await debuggerModule.call('editor', 'discardHighlight')
       setState(prevState => {
         return {
@@ -62,7 +82,7 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => {
       })
     })
 
-    state.debugger.event.register('newSourceLocation', async (lineColumnPos, rawLocation) => {
+    debuggerInstance.event.register('newSourceLocation', async (lineColumnPos, rawLocation) => {
       const contracts = await fetchContractAndCompile(
         state.currentReceipt.contractAddress || state.currentReceipt.to,
         state.currentReceipt)
@@ -77,7 +97,14 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => {
       }
     })
 
-    // state.debugger.event.register('debuggerUnloaded', () => this.unLoad())
+    debuggerInstance.event.register('debuggerUnloaded', () => unLoad())
+
+    setState(prevState => {
+      return {
+        ...prevState,
+        debugger: debuggerInstance
+      }
+    })
   }
 
   const requestDebug = (blockNumber, txNumber, tx) => {
@@ -89,7 +116,11 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => {
     if (state.debugger) state.debugger.unload()
   }
 
-  const getDebugWeb3 = () => {
+  const isDebuggerActive = () => {
+    return state.isActive
+  }
+
+  const getDebugWeb3 = (): Promise<any> => {
     return new Promise((resolve, reject) => {
       debuggerModule.blockchain.detectNetwork((error, network) => {
         let web3
@@ -105,41 +136,44 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => {
     })
   }
 
-  const unLoad  = async () => {
+  const unLoad = () => {
     // yo.update(this.debuggerHeadPanelsView, yo`<div></div>`)
     // yo.update(this.debuggerPanelsView, yo`<div></div>`)
     // yo.update(this.stepManagerView, yo`<div></div>`)
-    if (this.vmDebugger) this.vmDebugger.remove()
-    if (this.stepManager) this.stepManager.remove()
-    if (this.txBrowser) this.txBrowser.setState({debugging: false})
-    this.vmDebugger = null
-    this.stepManager = null
-    if (this.debugger) delete this.debugger
-    this.event.trigger('traceUnloaded')
+    setState(prevState => {
+      const { visibility } = prevState
+      return {
+        ...prevState,
+        debugger: null,
+        debugging: false,
+        visibility: {
+          ...visibility,
+          vmDebugger: false,
+          stepManager: false
+        }
+      }
+    })
+    event.trigger('traceUnloaded', [])
   }
 
   const startDebugging = async (blockNumber, txNumber, tx) => {
     if (state.debugger) unLoad()
 
-    const web3 = await this.getDebugWeb3()
-    setState({
-      ...state,
-      currentReceipt: await web3.eth.getTransactionReceipt(txNumber),
-      debugger: new Debugger({
-        web3,
-        offsetToLineColumnConverter: globalRegistry.get('offsettolinecolumnconverter').api,
-        compilationResult: async (address) => {
-          try {
-            return await fetchContractAndCompile(address, this.currentReceipt)
-          } catch (e) {
-            console.error(e)
-          }
-          return null
+    const web3 = await getDebugWeb3()
+    const currentReceipt = await web3.eth.getTransactionReceipt(txNumber)
+    const debuggerInstance = new Debugger({
+      web3,
+      offsetToLineColumnConverter: globalRegistry.get('offsettolinecolumnconverter').api,
+      compilationResult: async (address) => {
+        try {
+          return await fetchContractAndCompile(address, currentReceipt)
+        } catch (e) {
+          console.error(e)
         }
-      })
+        return null
+      }
     })
-    listenToEvents()
-    state.debugger.debug(blockNumber, txNumber, tx, () => {
+    debuggerInstance.debug(blockNumber, txNumber, tx, () => {
       // this.stepManager = new StepManagerUI(this.debugger.step_manager)
       // this.vmDebugger = new VmDebugger(this.debugger.vmDebuggerLogic)
       setState(prevState => {
@@ -147,20 +181,71 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => {
           ...prevState,
           blockNumber,
           txNumber,
-          debugging: true
+          debugging: true,
+          currentReceipt
         }
       })
-      this.renderDebugger()
+      listenToEvents(debuggerInstance)
+      // this.renderDebugger()
     }).catch((error) => {
       toaster(error, null, null)
       unLoad()
     })
 }
 
+const debug = (txHash) => {
+  startDebugging(null, txHash, null)
+}
+
+const getTrace = (hash) => {
+  return new Promise(async (resolve, reject) => { /* eslint-disable-line */
+    const web3 = await getDebugWeb3()
+    const currentReceipt = await web3.eth.getTransactionReceipt(hash)
+
+    setState(prevState => {
+      return {
+        ...prevState,
+        currentReceipt
+      }
+    })
+
+    const debug = new Debugger({
+      web3,
+      offsetToLineColumnConverter: globalRegistry.get('offsettolinecolumnconverter').api,
+      compilationResult: async (address) => {
+        try {
+          return await fetchContractAndCompile(address, state.currentReceipt)
+        } catch (e) {
+          console.error(e)
+        }
+        return null
+      }
+    })
+    debug.debugger.traceManager.traceRetriever.getTrace(hash, (error, trace) => {
+      if (error) return reject(error)
+      resolve(trace)
+    })
+  })
+}
+
+const deleteHighlights = async () => {
+  await debuggerModule.call('editor', 'discardHighlight')
+}
+
+// this.debuggerPanelsView = yo`<div class="px-2"></div>`
+// this.debuggerHeadPanelsView = yo`<div class="px-2"></div>`
+// this.stepManagerView = yo`<div class="px-2"></div>`
+
   return (
-    <div>
-      <h1>Welcome to debugger-ui!</h1>
-    </div>
+      <div>
+        <div className="px-2">
+          <TxBrowser requestDebug={requestDebug} unloadRequested={unloadRequested} />
+          {/* <StepManager stepManager={state.debugger.step_manager} />
+          <VmDebuggerHead vmDebuggerLogic={state.debugger.vmDebuggerLogic} /> */}
+        </div>
+        {/* <div className="statusMessage">{state.statusMessage}</div>
+        <VmDebugger vmDebuggerLogic={state.debugger.vmDebuggerLogic} /> */}
+      </div>
   )
 }
 

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

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import './tx-browser.css'
 import EventManager from '../../../../../../apps/remix-ide/src/lib/events'
 
-export const TxBrowser = () => {
+export const TxBrowser = ({ requestDebug, unloadRequested }) => {
   const event = new EventManager()
   const [state, setState] = useState({
     txNumber: undefined,
@@ -13,21 +13,12 @@ export const TxBrowser = () => {
     if (state.debugging) {
       unload()
     } else {
-      event.trigger('requestDebug', [undefined, state.txNumber])
+      requestDebug(undefined, state.txNumber)
     }
   }
   
   const unload = () => {
-    event.trigger('unloadRequested', [])
-  }
-
-  const updateTxN = (ev) => {
-    setState(prevState => {
-      return {
-        ...prevState,
-        txNumber: ev.target.value
-      }
-    })
+    unloadRequested()
   }
 
   const txInputChanged = (e) => {
@@ -50,12 +41,11 @@ export const TxBrowser = () => {
       <div className="txContainer">
         <div className="py-1 d-flex justify-content-center w-100 input-group">
           <input
-            value={state.txNumber || ''}
+            defaultValue={state.txNumber || ''}
             className="form-control m-0 css.txinput"
             id='txinput'
-            onKeyUp={updateTxN}
             type='text'
-            onInput={txInputChanged}
+            onChange={txInputChanged}
             placeholder={'Transaction hash, should start with 0x'}
             data-id="debuggerTransactionInput"
             disabled={state.debugging}

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

@@ -9,4 +9,4 @@ export const FunctionPanel = ({ calldata }) => {
     )
 }
 
-export default FunctionPanel
+export default FunctionPanel
\ No newline at end of file

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

+import React, { useState, useEffect } from 'react'
+import CodeListView from './code-list-view'
+import FunctionPanel from './function-panel'
+import StepDetail from './step-detail'
+import SolidityState from './solidity-state'
+import SolidityLocals from './solidity-locals'
+
+export const VmDebuggerHead = ({ vmDebuggerLogic }) => {
+  const [panelVisibility, setPanelVisibility] = useState({
+    functionPanel: true,
+    stepDetail: true,
+    solidityState: true,
+    solidityLocals: true,
+    returnValuesPanel: true,
+    fullStoragesChangesPanel: true
+  })
+  const [asm, setAsm] = useState({
+    code: null,
+    address: null,
+    index: null
+  })
+  const [functionPanel, setFunctionPanel] = useState(null)
+  const [stepDetail, setStepDetail] = useState({
+    key: null,
+    value: null,
+    reset: false
+  })
+  const [solidityState, setSolidityState] = useState({
+    calldata: null,
+    message: null,
+  })
+  const [solidityLocals, setSolidityLocals] = useState({
+    calldata: null,
+    message: null,
+  })
+
+  useEffect(() => {
+    vmDebuggerLogic.event.register('codeManagerChanged', (code, address, index) => {
+      setAsm({ code, address, index })
+    })
+    vmDebuggerLogic.event.register('traceUnloaded', () => {
+      setAsm({ code: [], address: '', index: -1 })
+    })
+    vmDebuggerLogic.event.register('functionsStackUpdate', (stack) => {
+      if (stack === null) return
+      const functions = []
+  
+      for (const func of stack) {
+        functions.push(func.functionDefinition.attributes.name + '(' + func.inputs.join(', ') + ')')
+      }
+      setFunctionPanel(functions)
+    })
+    vmDebuggerLogic.event.register('traceUnloaded', () => {
+      setStepDetail({ key: null, value: null, reset: true })
+    })
+    vmDebuggerLogic.event.register('newTraceLoaded', () => {
+      setStepDetail({ key: null, value: null, reset: true })
+    })
+    vmDebuggerLogic.event.register('traceCurrentStepUpdate', (error, step) => {
+      setStepDetail({ key: 'execution step', value: (error ? '-' : step), reset: false })
+    })
+    vmDebuggerLogic.event.register('traceMemExpandUpdate', (error, addmem) => {
+      setStepDetail({ key: 'add memory', value: (error ? '-' : addmem), reset: false })
+    })
+    vmDebuggerLogic.event.register('traceStepCostUpdate', (error, gas) => {
+      setStepDetail({ key: 'gas', value: (error ? '-' : gas), reset: false })
+    })
+    vmDebuggerLogic.event.register('traceCurrentCalledAddressAtUpdate', (error, address) => {
+      setStepDetail({ key: 'loaded address', value: (error ? '-' : address), reset: false })
+    })
+    vmDebuggerLogic.event.register('traceRemainingGasUpdate', (error, remainingGas) => {
+      setStepDetail({ key: 'remaining gas', value: (error ? '-' : remainingGas), reset: false })
+    })
+    vmDebuggerLogic.event.register('indexUpdate', (index) => {
+      setStepDetail({ key: 'vm trace step', value: index, reset: false })
+    })
+    vmDebuggerLogic.event.register('solidityState', (calldata) => {
+      setSolidityState({ ...solidityState, calldata })
+    })
+    vmDebuggerLogic.event.register('solidityStateMessage', (message) => {
+      setSolidityState({ ...solidityState, message })
+    })
+    vmDebuggerLogic.event.register('solidityLocals', (calldata) => {
+      setSolidityLocals({ ...solidityState, calldata })
+    })
+    vmDebuggerLogic.event.register('solidityLocalsMessage', (message) => {
+      setSolidityLocals({ ...solidityState, message })
+    })
+    vmDebuggerLogic.event.register('newTrace', () => {
+      setPanelVisibility({
+        functionPanel: true,
+        stepDetail: true,
+        solidityState: true,
+        solidityLocals: true,
+        returnValuesPanel: true,
+        fullStoragesChangesPanel: true
+      })
+    })
+    vmDebuggerLogic.start()
+  }, [])
+
+  return (
+    <div id="vmheadView" className="mt-1 px-0">
+      <div className="d-flex flex-column">
+        <div className="w-100" hidden>
+          <FunctionPanel calldata={functionPanel} />
+          <SolidityLocals calldata={solidityLocals.calldata} message={solidityLocals.message} />
+          <SolidityState calldata={solidityState.calldata} message={solidityState.message} />
+        </div>
+        <div className="w-100"><CodeListView asm={asm} /></div>
+        <div className="w-100"><StepDetail detail={stepDetail} /></div>
+      </div>
+    </div>
+  )
+}
+
+export default VmDebuggerHead;

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

 import React, { useState, useEffect } from 'react'
-import CodeListView from './code-list-view'
 import CalldataPanel from './calldata-panel'
 import MemoryPanel from './memory-panel'
 import CallstackPanel from './callstack-panel'
-import FunctionPanel from './function-panel'
 import StackPanel from './stack-panel'
 import StoragePanel from './storage-panel'
-import StepDetail from './step-detail'
-import SolidityState from './solidity-state'
-import SolidityLocals from './solidity-locals'
-import FullStoragesChangesPanel from './full-storages-changes'
-import DropdownPanel from './dropdown-panel'
-import './vm-debugger.css';
 
 export const VmDebugger = ({ vmDebuggerLogic }) => {
   const [panelVisibility, setPanelVisibility] = useState({
     asmCode: true,
     stackPanel: true,
-    functionPanel: true,
     storagePanel: true,
     memoryPanel: true,
-    stepDetail: true,
     calldataPanel: true,
     callstackPanel: true,
-    solidityState: true,
-    solidityLocals: true,
-    solidityPanel: true,
-    returnValuesPanel: true,
-    fullStoragesChangesPanel: true
-  })
-  const [asm, setAsm] = useState({
-    code: null,
-    address: null,
-    index: null
   })
   const [calldataPanel, setCalldataPanel] = useState(null)
   const [memoryPanel, setMemoryPanel] = useState(null)
   const [callStackPanel, setCallStackPanel] = useState(null)
   const [stackPanel, setStackPanel] = useState(null)
-  const [functionPanel, setFunctionPanel] = useState(null)
   const [storagePanel, setStoragePanel] = useState({
     calldata: null,
     header: null
   })
-  const [stepDetail, setStepDetail] = useState({
-    key: null,
-    value: null,
-    reset: false
-  })
-  const [solidityState, setSolidityState] = useState({
-    calldata: null,
-    message: null,
-  })
-  const [solidityLocals, setSolidityLocals] = useState({
-    calldata: null,
-    message: null,
-  })
-  const [returnValuesPanel, setReturnValuesPanel] = useState({})
-  const [fullStoragesChangesPanel, setFullStoragesChangesPanel] = useState(null)
 
   useEffect(() => {
-    vmDebuggerLogic.event.register('codeManagerChanged', (code, address, index) => {
-      setAsm({ code, address, index })
-    })
-    vmDebuggerLogic.event.register('traceUnloaded', () => {
-      setAsm({ code: [], address: '', index: -1 })
-    })
     vmDebuggerLogic.event.register('traceManagerCallDataUpdate', (calldata) => {
       setCalldataPanel(calldata)
     })
@@ -78,105 +36,28 @@ export const VmDebugger = ({ vmDebuggerLogic }) => {
     vmDebuggerLogic.event.register('traceManagerStackUpdate', (calldata) => {
       setStackPanel(calldata)
     })
-    vmDebuggerLogic.event.register('functionsStackUpdate', (stack) => {
-      if (stack === null) return
-      const functions = []
-  
-      for (const func of stack) {
-        functions.push(func.functionDefinition.attributes.name + '(' + func.inputs.join(', ') + ')')
-      }
-      setFunctionPanel(functions)
-    })
     vmDebuggerLogic.event.register('traceManagerStorageUpdate', (calldata, header) => {
       setStoragePanel({ calldata, header })
     })
-    vmDebuggerLogic.event.register('traceUnloaded', () => {
-      setStepDetail({ key: null, value: null, reset: true })
-    })
-    vmDebuggerLogic.event.register('newTraceLoaded', () => {
-      setStepDetail({ key: null, value: null, reset: true })
-    })
-    vmDebuggerLogic.event.register('traceCurrentStepUpdate', (error, step) => {
-      setStepDetail({ key: 'execution step', value: (error ? '-' : step), reset: false })
-    })
-    vmDebuggerLogic.event.register('traceMemExpandUpdate', (error, addmem) => {
-      setStepDetail({ key: 'add memory', value: (error ? '-' : addmem), reset: false })
-    })
-    vmDebuggerLogic.event.register('traceStepCostUpdate', (error, gas) => {
-      setStepDetail({ key: 'gas', value: (error ? '-' : gas), reset: false })
-    })
-    vmDebuggerLogic.event.register('traceCurrentCalledAddressAtUpdate', (error, address) => {
-      setStepDetail({ key: 'loaded address', value: (error ? '-' : address), reset: false })
-    })
-    vmDebuggerLogic.event.register('traceRemainingGasUpdate', (error, remainingGas) => {
-      setStepDetail({ key: 'remaining gas', value: (error ? '-' : remainingGas), reset: false })
-    })
-    vmDebuggerLogic.event.register('indexUpdate', (index) => {
-      setStepDetail({ key: 'vm trace step', value: index, reset: false })
-    })
-    vmDebuggerLogic.event.register('solidityState', (calldata) => {
-      setSolidityState({ ...solidityState, calldata })
-    })
-    vmDebuggerLogic.event.register('solidityStateMessage', (message) => {
-      setSolidityState({ ...solidityState, message })
-    })
-    vmDebuggerLogic.event.register('solidityLocals', (calldata) => {
-      setSolidityLocals({ ...solidityState, calldata })
-    })
-    vmDebuggerLogic.event.register('solidityLocalsMessage', (message) => {
-      setSolidityLocals({ ...solidityState, message })
-    })
-    vmDebuggerLogic.event.register('traceReturnValueUpdate', (calldata) => {
-      setReturnValuesPanel(calldata)
-    })
-    vmDebuggerLogic.event.register('traceAddressesUpdate', (_addreses) => {
-      setFullStoragesChangesPanel({})
-    })
-    vmDebuggerLogic.event.register('traceStorageUpdate', (calldata) => {
-      setFullStoragesChangesPanel(calldata)
-    })
     vmDebuggerLogic.event.register('newTrace', () => {
       setPanelVisibility({
         asmCode: true,
         stackPanel: true,
-        functionPanel: true,
         storagePanel: true,
         memoryPanel: true,
-        stepDetail: true,
         calldataPanel: true,
         callstackPanel: true,
-        solidityState: true,
-        solidityLocals: true,
-        solidityPanel: true,
-        returnValuesPanel: true,
-        fullStoragesChangesPanel: true
-      })
-    })
-    vmDebuggerLogic.event.register('newCallTree', () => {
-      setPanelVisibility({
-        ...panelVisibility,
-        solidityPanel: false
       })
     })
+    // vmDebuggerLogic.event.register('newCallTree', () => {
+    //   setPanelVisibility({
+    //     ...panelVisibility,
+    //     solidityPanel: false
+    //   })
+    // })
     vmDebuggerLogic.start()
   }, [])
 
-  const renderHead = () => {
-      return (
-        <div id="vmheadView" className="mt-1 px-0">
-          <div className="d-flex flex-column">
-            <div className="w-100" hidden>
-              <FunctionPanel calldata={functionPanel} />
-              <SolidityLocals calldata={solidityLocals.calldata} message={solidityLocals.message} />
-              <SolidityState calldata={solidityState.calldata} message={solidityState.message} />
-            </div>
-            <div className="w-100"><CodeListView asm={asm} /></div>
-            <div className="w-100"><StepDetail detail={stepDetail} /></div>
-          </div>
-        </div>
-      )
-  }
-
   return (
     <div id="vmdebugger" className="px-2">
       <div>
@@ -185,8 +66,6 @@ export const VmDebugger = ({ vmDebuggerLogic }) => {
         <StoragePanel storage={storagePanel.calldata} header={storagePanel.header} />
         <CallstackPanel calldata={callStackPanel} />
         <CalldataPanel calldata={calldataPanel} />
-        <DropdownPanel dropdownName='Return Value' opts={{ json: true }} calldata={returnValuesPanel} />
-        <FullStoragesChangesPanel storageData={fullStoragesChangesPanel} />
       </div>
     </div>
   )

libs/remix-ui/utils/src/index.ts

-export * from './lib/should-render';
+export * from './lib/should-render'

libs/remix-ui/utils/src/lib/should-render.spec.tsx

-import React from 'react';
-import { render } from '@testing-library/react';
-
-import ShouldRender from './should-render';
-
-describe(' ShouldRender', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<ShouldRender />);
-    expect(baseElement).toBeTruthy();
-  });
-});

libs/remix-ui/utils/src/lib/should-render.tsx

-import React from 'react';
-
-import './should-render.css';
+import React from 'react'
 
 /* eslint-disable-next-line */
-export interface ShouldRenderProps {}
+export interface ShouldRenderProps {
+  children?: React.ReactNode,
+  if: boolean
+}
 
 export const ShouldRender = (props: ShouldRenderProps) => {
-  return (
-    <div>
-      <h1>Welcome to shouldRender!</h1>
-    </div>
-  );
-};
+  return props.if ? (
+    props.children
+  ) : null
+}
 
-export default ShouldRender;
+export default ShouldRender