vm debugger component

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

 import React from 'react'
+import TxBrowser from './tx-browser/tx-browser'
 import StepManager from './step-manager/step-manager'
-import 
+import VmDebugger from './vm-debugger/vm-debugger'
 
 const DebuggerUI = () => {
   return (

libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx

@@ -3,7 +3,7 @@ import DropdownPanel from './dropdown-panel'
 /* eslint-disable-next-line */
 import EventManager from '../../../../../../apps/remix-ide/src/lib/events'
 
-export const CodeListView = ({ vmDebuggerLogic, asm }) => {
+export const CodeListView = ({ asm }) => {
   const event = new EventManager()
   const [state, setState] = useState({
     code: [],

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

@@ -13,7 +13,7 @@ import EventManager from '../../../../../../apps/remix-ide/src/lib/events'
 import copyToClipboard from '../../../../../../apps/remix-ide/src/app/ui/copy-to-clipboard'
 
 export const DropdownPanel = (props: DropdownPanelProps) => {
-    const { dropdownName, opts, codeView, index, calldata, header, extractFunc, formatSelfFunc } = props
+    const { dropdownName, dropdownMessage, opts, codeView, index, calldata, header, extractFunc, formatSelfFunc } = props
     const data = useExtractData(calldata, extractFunc)
     const event = new EventManager()
     const dropdownRawEl = useRef(null)
@@ -45,6 +45,10 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
         update(calldata, header)
     }, [calldata, header])
 
+    useEffect(() => {
+        message(dropdownMessage)
+    }, [dropdownMessage])
+
     const handleToggle = () => {
         setState(prevState => {
             if (prevState.toggleDropdown) event.trigger('hide', [])

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

@@ -3,7 +3,7 @@ import DropdownPanel from './dropdown-panel'
 import { extractData } from '../../utils/solidityTypeFormatter'
 import { ExtractData } from '../../types'
 
-export const SolidityLocals = () => {
+export const SolidityLocals = ({ calldata, message }) => {
 
     const formatSelf = (key: string, data: ExtractData) => {
         let color = 'var(--primary)'
@@ -36,7 +36,7 @@ export const SolidityLocals = () => {
 
     return (
         <div id='soliditylocals' data-id="solidityLocals">
-            <DropdownPanel dropdownName='Solidity Locals' opts={{ json: true }} extractFunc={extractData} formatSelfFunc={formatSelf} />
+            <DropdownPanel dropdownName='Solidity Locals' dropdownMessage={message} opts={{ json: true }} calldata={calldata}  extractFunc={extractData} formatSelfFunc={formatSelf} />
         </div>
     )
 }

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

@@ -3,7 +3,7 @@ import DropdownPanel from './dropdown-panel'
 import { extractData } from '../../utils/solidityTypeFormatter'
 import { ExtractData } from '../../types'
 
-export const SolidityState = () => {
+export const SolidityState = ({ calldata, message }) => {
     const formatSelf = (key: string, data: ExtractData) => {
         let color = 'var(--primary)'
         if (data.isArray || data.isStruct || data.isMapping) {
@@ -36,7 +36,7 @@ export const SolidityState = () => {
     return (
         <div id='soliditylocals' data-id='solidityLocals'>
             {
-                <DropdownPanel dropdownName='Solidity State' opts={{ json: true }} formatSelfFunc={formatSelf} extractFunc={extractData} />
+                <DropdownPanel dropdownName='Solidity State' dropdownMessage={message} opts={{ json: true }} calldata={calldata} formatSelfFunc={formatSelf} extractFunc={extractData} />
             }
         </div>
     )

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

@@ -2,15 +2,15 @@ import React, { useState, useEffect } from 'react'
 import DropdownPanel from './dropdown-panel'
 
 export interface StepDetailProps {
-    resetStep: boolean,
     detail: {
         key: string,
-        value: string
+        value: string,
+        reset: boolean
     }
 } 
 
 export const StepDetail = (props: StepDetailProps) => {
-    const { resetStep, detail } = props
+    const { detail } = props
     const [state, setState] = useState({
         detail: {
             'vm trace step': '-',
@@ -23,14 +23,11 @@ export const StepDetail = (props: StepDetailProps) => {
     })
 
     useEffect(() => {
-        reset()
-    }, [resetStep])
-
-    useEffect(() => {
-        updateField(detail.key, detail.value)
+        updateField(detail.key, detail.value, detail.reset)
     }, [detail])
 
-    const reset = () => {
+    const updateField = (key, value, reset) => {
+        if (reset) {
             setState(() => {
                 return {
                     detail: {
@@ -43,9 +40,7 @@ export const StepDetail = (props: StepDetailProps) => {
                     }
                 }
             })
-    }
-
-    const updateField = (key, value) => {
+        } else {
             setState(prevState => {
                 const { detail } = prevState
     
@@ -55,6 +50,7 @@ export const StepDetail = (props: StepDetailProps) => {
                 }
             })
         }
+    }
 
     return (
         <div id='stepdetail' data-id="stepdetail">

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

@@ -14,7 +14,20 @@ import DropdownPanel from './dropdown-panel'
 import './vm-debugger.css';
 
 export const VmDebugger = ({ vmDebuggerLogic }) => {
-  const [state, setState] = useState({
+  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,
@@ -24,45 +37,128 @@ export const VmDebugger = ({ vmDebuggerLogic }) => {
   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', updateAsm)
-    vmDebuggerLogic.event.register('traceUnloaded', resetAsm)
-    vmDebuggerLogic.event.register('traceManagerCallDataUpdate', updateCalldataPanel)
-    vmDebuggerLogic.event.register('traceManagerMemoryUpdate', updateMemoryPanel)
-    vmDebuggerLogic.event.register('traceManagerCallStackUpdate', updateCallStackPanel)
-  }, [])
-
-  const updateAsm = (code, address, index) => {
-    setAsm({
-      code,
-      address,
-      index
+    vmDebuggerLogic.event.register('codeManagerChanged', (code, address, index) => {
+      setAsm({ code, address, index })
     })
-  }
-
-  const resetAsm = () => {
-    setAsm({
-      code: [],
-      address: '',
-      index: -1
+    vmDebuggerLogic.event.register('traceUnloaded', () => {
+      setAsm({ code: [], address: '', index: -1 })
     })
-  }
-
-  const updateCalldataPanel = (calldata) => {
+    vmDebuggerLogic.event.register('traceManagerCallDataUpdate', (calldata) => {
       setCalldataPanel(calldata)
-  }
-
-  const updateMemoryPanel = (calldata) => {
+    })
+    vmDebuggerLogic.event.register('traceManagerMemoryUpdate', (calldata) => {
       setMemoryPanel(calldata)
-  }
-
-  const updateCallStackPanel = (calldata) => {
+    })
+    vmDebuggerLogic.event.register('traceManagerCallStackUpdate', (calldata) => {
       setCallStackPanel(calldata)
-  }
+    })
+    vmDebuggerLogic.event.register('traceManagerStackUpdate', (calldata) => {
+      setStackPanel(calldata)
+    })
+    vmDebuggerLogic.event.register('functionsStackUpdate', (stack) => {
+      if (stack === null) return
+      const functions = []
   
-  useEffect(() => {
-    vmDebuggerLogic.event.register('codeManagerChanged', )
+      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.start()
   }, [])
 
   const renderHead = () => {
@@ -70,12 +166,12 @@ export const VmDebugger = ({ vmDebuggerLogic }) => {
         <div id="vmheadView" className="mt-1 px-0">
           <div className="d-flex flex-column">
             <div className="w-100" hidden>
-              {this.functionPanel.render()}
-              {this.solidityLocals.render()}
-              {this.solidityState.render()}
+              <FunctionPanel calldata={functionPanel} />
+              <SolidityLocals calldata={solidityLocals.calldata} message={solidityLocals.message} />
+              <SolidityState calldata={solidityState.calldata} message={solidityState.message} />
             </div>
-            <div className="w-100">{this.asmCode.render()}</div>
-            <div className="w-100">{this.stepDetail.render()}</div>
+            <div className="w-100"><CodeListView asm={asm} /></div>
+            <div className="w-100"><StepDetail detail={stepDetail} /></div>
           </div>
         </div>
       )
@@ -84,16 +180,16 @@ export const VmDebugger = ({ vmDebuggerLogic }) => {
   return (
     <div id="vmdebugger" className="px-2">
       <div>
-        {this.stackPanel.render()}
-        {this.memoryPanel.render()}
-        {this.storagePanel.render()}
-        {this.callstackPanel.render()}
-        {this.calldataPanel.render()}
-        {this.returnValuesPanel.render()}
-        {this.fullStoragesChangesPanel.render()}
+        <StackPanel calldata={stackPanel} />
+        <MemoryPanel calldata={memoryPanel} />
+        <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>
-  );
-};
+  )
+}
 
 export default VmDebugger;

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

@@ -14,6 +14,7 @@ export type ExtractFunc = (json: any, parent?: any) => ExtractData
 
 export interface DropdownPanelProps {
     dropdownName: string,
+    dropdownMessage?: string,
     opts: {
         json: boolean,
         displayContentOnly?: boolean,