Include registerEvent for vmDebugger

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

@@ -225,7 +225,7 @@ const stepManager = {
   traceLength: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.traceLength : null,
   registerEvent: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.event.register.bind(state.debugger.step_manager.event) : null,
 }
-const vmDebuggerHead = {
+const vmDebugger = {
   registerEvent: state.debugger && state.debugger.vmDebuggerLogic ? state.debugger.vmDebuggerLogic.event.register.bind(state.debugger.vmDebuggerLogic.event) : null
 }
 
@@ -234,10 +234,10 @@ const vmDebuggerHead = {
         <div className="px-2">
           <TxBrowser requestDebug={ requestDebug } unloadRequested={ unloadRequested } transactionNumber={ state.txNumber } debugging={ state.debugging } />
   { state.debugging && <StepManager stepManager={ stepManager } /> }
-  { state.debugging && <VmDebuggerHead vmDebuggerHead={ vmDebuggerHead } /> }
+  { state.debugging && <VmDebuggerHead vmDebugger={ vmDebugger } /> }
         </div>
-  {/* { state.debugging && <div className="statusMessage">{ state.statusMessage }</div> }
-  { state.debugging && <VmDebugger vmDebuggerLogic={ state.debugger ? state.debugger.vmDebuggerLogic : null } ready={vmDebuggerReady} /> } */}
+  { state.debugging && <div className="statusMessage">{ state.statusMessage }</div> }
+  { state.debugging && <VmDebugger vmDebugger={ vmDebugger } /> }
       </div>
   )
 }

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

-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useReducer } from 'react'
 import { TreeView, TreeViewItem } from '@remix-ui/tree-view'
 import { DropdownPanelProps, ExtractData, ExtractFunc } from '../../types'
 import { CopyToClipboard } from '@remix-ui/clipboard'
 import { default as deepequal } from 'deep-equal'
+import { initialState, reducer } from '../../reducers/calldata'
 import './styles/dropdown-panel.css'
 
 export const DropdownPanel = (props: DropdownPanelProps) => {
+    const [calldata, dispatch] = useReducer(reducer, initialState)
     const { dropdownName, dropdownMessage, calldata, header, loading, extractFunc, formatSelfFunc } = props
     const extractDataDefault: ExtractFunc = (item, parent?) => {
         const ret: ExtractData = {}

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

@@ -5,7 +5,7 @@ import StepDetail from './step-detail'
 import SolidityState from './solidity-state'
 import SolidityLocals from './solidity-locals'
 
-export const VmDebuggerHead = ({ vmDebuggerHead: { registerEvent } }) => {
+export const VmDebuggerHead = ({ vmDebugger: { registerEvent } }) => {
   const [asm, setAsm] = useState({
     code: null,
     address: null,
@@ -117,10 +117,10 @@ export const VmDebuggerHead = ({ vmDebuggerHead: { registerEvent } }) => {
         <div className="w-100">
           <FunctionPanel data={functionPanel} />
           <SolidityLocals data={solidityLocals.calldata} message={solidityLocals.message} />
-          {/* <SolidityState calldata={solidityState.calldata} message={solidityState.message} /> */}
+          <SolidityState calldata={solidityState.calldata} message={solidityState.message} />
         </div>
         <div className="w-100"><CodeListView registerEvent={registerEvent} /></div>
-        {/* <div className="w-100"><StepDetail stepDetail={stepDetail} /></div> */}
+        <div className="w-100"><StepDetail stepDetail={stepDetail} /></div>
       </div>
     </div>
   )

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

@@ -7,7 +7,7 @@ import StoragePanel from './storage-panel'
 import ReturnValuesPanel from './dropdown-panel'
 import FullStoragesChangesPanel from './full-storages-changes'
 
-export const VmDebugger = ({ vmDebuggerLogic, ready }) => {
+export const VmDebugger = ({ vmDebugger: { registerEvent } }) => {
   const [calldataPanel, setCalldataPanel] = useState(null)
   const [memoryPanel, setMemoryPanel] = useState(null)
   const [callStackPanel, setCallStackPanel] = useState(null)
@@ -20,39 +20,35 @@ export const VmDebugger = ({ vmDebuggerLogic, ready }) => {
   const [fullStoragesChangesPanel, setFullStoragesChangesPanel] = useState(null)
 
   useEffect(() => {
-    console.log('vmDebuggerLogic: ', vmDebuggerLogic)
-    if (vmDebuggerLogic) {
-      vmDebuggerLogic.event.register('traceManagerCallDataUpdate', (calldata) => {
+    registerEvent && registerEvent('traceManagerCallDataUpdate', (calldata) => {
       setCalldataPanel(() => calldata)
     })
-      vmDebuggerLogic.event.register('traceManagerMemoryUpdate', (calldata) => {
+    registerEvent && registerEvent('traceManagerMemoryUpdate', (calldata) => {
       setMemoryPanel(() => calldata)
     })
-      vmDebuggerLogic.event.register('traceManagerCallStackUpdate', (calldata) => {
+    registerEvent && registerEvent('traceManagerCallStackUpdate', (calldata) => {
       setCallStackPanel(() => calldata)
     })
-      vmDebuggerLogic.event.register('traceManagerStackUpdate', (calldata) => {
+    registerEvent && registerEvent('traceManagerStackUpdate', (calldata) => {
       setStackPanel(() => calldata)
     })
-      vmDebuggerLogic.event.register('traceManagerStorageUpdate', (calldata, header) => {
+    registerEvent && registerEvent('traceManagerStorageUpdate', (calldata, header) => {
       setStoragePanel(() => {
         return { calldata, header }
       })
     })
-      vmDebuggerLogic.event.register('traceReturnValueUpdate', (calldata) => {
+    registerEvent && registerEvent('traceReturnValueUpdate', (calldata) => {
       setReturnValuesPanel(() => calldata)
     })
-      vmDebuggerLogic.event.register('traceAddressesUpdate', (calldata) => {
+    registerEvent && registerEvent('traceAddressesUpdate', (calldata) => {
       setFullStoragesChangesPanel(() => {
         return {}
       })
     })
-      vmDebuggerLogic.event.register('traceStorageUpdate', (calldata) => {
+    registerEvent && registerEvent('traceStorageUpdate', (calldata) => {
       setFullStoragesChangesPanel(() => calldata)
     })
-      ready()
-    }
-  }, [vmDebuggerLogic])
+  }, [registerEvent])
 
   return (
     <div id="vmdebugger" className="px-2">

libs/remix-ui/debugger-ui/src/reducers/calldata.ts

@@ -21,7 +21,7 @@ export const reducer = (state = initialState, action: Action) => {
       };
     case 'FETCH_CALLDATA_SUCCESS':
       return {
-          opCodes: action.payload,
+          calldata: action.payload,
           isRequesting: false,
           isSuccessful: true,
           hasError: null