pass lightweight props

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

@@ -9,7 +9,6 @@ import globalRegistry from '../../../../../apps/remix-ide/src/global/registry'
 import './debugger-ui.css'
 
 export const DebuggerUI = ({ debuggerModule }) => {
-  console.log('debuggerModule: ', debuggerModule)
   const init = remixDebug.init
   const [state, setState] = useState({
     isActive: false,
@@ -21,10 +20,6 @@ export const DebuggerUI = ({ debuggerModule }) => {
     },
     blockNumber: null,
     txNumber: '',
-    ready: {
-      vmDebugger: false,
-      vmDebuggerHead: false
-    },
     debugging: false
   })
 
@@ -217,43 +212,32 @@ const deleteHighlights = async () => {
   await debuggerModule.call('editor', 'discardHighlight')
 }
 
-const vmDebuggerReady = () => {
-  setState(prevState => {
-    return {
-      ...prevState,
-      ready: {
-        ...prevState.ready,
-        vmDebugger: true
-      }
-    }
-  })
-}
-
-const vmDebuggerHeadReady = () => {
-  setState(prevState => {
-    return {
-      ...prevState,
-      ready: {
-        ...prevState.ready,
-        vmDebuggerHead: true
-      }
-    }
-  })
+const stepManager = {
+  jumpTo: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpTo.bind(state.debugger.step_manager) : null,
+  stepOverBack: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepOverBack.bind(state.debugger.step_manager) : null,
+  stepIntoBack: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepIntoBack.bind(state.debugger.step_manager) : null,
+  stepIntoForward: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepIntoForward.bind(state.debugger.step_manager) : null,
+  stepOverForward: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepOverForward.bind(state.debugger.step_manager) : null,
+  jumpOut: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpOut.bind(state.debugger.step_manager) : null,
+  jumpPreviousBreakpoint: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpPreviousBreakpoint.bind(state.debugger.step_manager) : null,
+  jumpNextBreakpoint: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpNextBreakpoint.bind(state.debugger.step_manager) : null,
+  jumpToException: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpToException.bind(state.debugger.step_manager) : null,
+  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,
 }
-
-if (state.ready.vmDebugger && state.ready.vmDebuggerHead) {
-  state.debugger.vmDebuggerLogic.start()
+const vmDebuggerHead = {
+  registerEvent: state.debugger && state.debugger.vmDebuggerLogic ? state.debugger.vmDebuggerLogic.event.register.bind(state.debugger.vmDebuggerLogic.event) : null
 }
 
   return (
       <div>
         <div className="px-2">
           <TxBrowser requestDebug={ requestDebug } unloadRequested={ unloadRequested } transactionNumber={ state.txNumber } debugging={ state.debugging } />
-  { state.debugging && <StepManager stepManager={ state.debugger ? state.debugger.step_manager : null } /> }
-  { state.debugging && <VmDebuggerHead vmDebuggerLogic={ state.debugger ? state.debugger.vmDebuggerLogic : null } ready={vmDebuggerHeadReady} /> }
+  { state.debugging && <StepManager stepManager={ stepManager } /> }
+  { state.debugging && <VmDebuggerHead vmDebuggerHead={ vmDebuggerHead } /> }
         </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 vmDebuggerLogic={ state.debugger ? state.debugger.vmDebuggerLogic : null } ready={vmDebuggerReady} /> } */}
       </div>
   )
 }

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

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react'
 
 export const Slider = ({ jumpTo, sliderValue, traceLength }) => {
-  console.log('slider: >--+>')
   const [state, setState] = useState({
     currentValue: 0
   })

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

@@ -2,20 +2,7 @@ import React, { useState, useEffect } from 'react'
 import Slider from '../slider/slider'
 import ButtonNavigator from '../button-navigator/button-navigator'
 
-export const StepManager = ({ stepManager }) => {
-  const { jumpTo, traceLength, stepOverBack, stepIntoBack, stepIntoForward, stepOverForward, jumpOut, jumpPreviousBreakpoint, jumpNextBreakpoint, jumpToException } = stepManager
-  
-  if (stepManager) {
-    jumpTo.bind(stepManager)
-    stepOverBack.bind(stepManager)
-    stepIntoBack.bind(stepManager)
-    stepIntoForward.bind(stepManager)
-    stepOverForward.bind(stepManager)
-    jumpOut.bind(stepManager)
-    jumpPreviousBreakpoint.bind(stepManager)
-    jumpNextBreakpoint.bind(stepManager)
-    jumpToException.bind(stepManager)
-  }
+export const StepManager = ({ stepManager, stepManager: { jumpTo, traceLength, stepIntoBack, stepIntoForward, stepOverBack, stepOverForward, jumpOut, jumpNextBreakpoint, jumpPreviousBreakpoint, jumpToException, registerEvent } }) => {
   const [state, setState] = useState({
     sliderValue: 0,
     revertWarning: '',
@@ -24,11 +11,9 @@ export const StepManager = ({ stepManager }) => {
   })
 
   useEffect(() => {
-    if (stepManager) {
-      stepManager.event.register('revertWarning', setRevertWarning)
-      stepManager.event.register('stepChanged', updateStep)
-    }
-  }, [stepManager])
+    registerEvent && registerEvent('revertWarning', setRevertWarning)
+    registerEvent && registerEvent('stepChanged', updateStep)
+  }, [registerEvent])
 
   const setRevertWarning = (warning) => {
     setState(prevState => {

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

@@ -3,7 +3,8 @@ import './styles/assembly-items.css'
 
 export const AssemblyItems = ({ codeView, index }) => {
     const [state, setState] = useState({
-        selectedItem: 0
+        selectedItem: 0,
+        opCode: []
     })
     const refs = useRef({})
     const asmItemsRef = useRef(null)
@@ -12,6 +13,10 @@ export const AssemblyItems = ({ codeView, index }) => {
         indexChanged(index)
     }, [index])
 
+    useEffect(() => {
+        opCodeChanged(codeView)
+    }, [codeView])
+
     const indexChanged = (index) => {
         if (index < 0) return
         const { selectedItem } = state
@@ -39,15 +44,24 @@ export const AssemblyItems = ({ codeView, index }) => {
         }
     }
 
+    const opCodeChanged = (codeView) => {
+        setState(prevState => {
+            return {
+                ...prevState,
+                opCode: codeView
+            }
+        })
+    }
+
     return (
         <div className="border rounded px-1 mt-1 bg-light">
             <div className='dropdownpanel'>
                 <div className='dropdowncontent'>
                     <div className="pl-2 my-1 small instructions" id='asmitems' ref={asmItemsRef}>
-                        { 
-                            codeView.map((item, i) => {
-                                return <div className="px-1" key={i} ref={ref => refs.current[i] = ref}><span>{item}</span></div>
-                            })
+                        {
+                            // state.opCode.map((item, i) => {
+                            //     return <div className="px-1" key={i} ref={ref => refs.current[i] = ref}><span>{item}</span></div>
+                            // })
                         }
                     </div>
                 </div>

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

@@ -1,7 +1,13 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import DropdownPanel from './dropdown-panel'
 
-export const FunctionPanel = ({ calldata }) => {
+export const FunctionPanel = ({ data }) => {
+    const [calldata, setCalldata] = useState(null)
+
+    useEffect(() => {
+        setCalldata(data)
+    }, [data])
+
     return (
         <div id="FunctionPanel">
             <DropdownPanel dropdownName='Function Stack' calldata={calldata || {}} />

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 = ({ vmDebuggerLogic, ready }) => {
+export const VmDebuggerHead = ({ vmDebuggerHead: { registerEvent } }) => {
   const [asm, setAsm] = useState({
     code: null,
     address: null,
@@ -30,101 +30,97 @@ export const VmDebuggerHead = ({ vmDebuggerLogic, ready }) => {
   })
 
   useEffect(() => {
-    console.log('vmDebuggerLogicHead: ', vmDebuggerLogic)
-    if (vmDebuggerLogic) {
-      vmDebuggerLogic.event.register('codeManagerChanged', (code, address, index) => {
-        setAsm(() => {
-          return { code, address, index }
-        })
+    registerEvent && registerEvent('codeManagerChanged', (code, address, index) => {
+      setAsm(() => {
+        return { code, address, index }
       })
-      vmDebuggerLogic.event.register('traceUnloaded', () => {
-        setAsm(() => {
-          return { code: [], address: '', index: -1 }
-        })
+    })
+    registerEvent && registerEvent('traceUnloaded', () => {
+      setAsm(() => {
+        return { code: [], address: '', index: -1 }
       })
-      vmDebuggerLogic.event.register('functionsStackUpdate', (stack) => {
-        if (stack === null || stack.length === 0) return
-        const functions = []
-    
-        for (const func of stack) {
-          functions.push(func.functionDefinition.name + '(' + func.inputs.join(', ') + ')')
-        }
-        setFunctionPanel(() => functions)
+    })
+    registerEvent && registerEvent('functionsStackUpdate', (stack) => {
+      if (stack === null || stack.length === 0) return
+      const functions = []
+  
+      for (const func of stack) {
+        functions.push(func.functionDefinition.name + '(' + func.inputs.join(', ') + ')')
+      }
+      setFunctionPanel(() => functions)
+    })
+    registerEvent && registerEvent('traceUnloaded', () => {
+      setStepDetail(() => {
+        return { 'vm trace step': '-', 'execution step': '-', 'add memory': '', 'gas': '', 'remaining gas': '-', 'loaded address': '-' }
       })
-      vmDebuggerLogic.event.register('traceUnloaded', () => {
-        setStepDetail(() => {
-          return { 'vm trace step': '-', 'execution step': '-', 'add memory': '', 'gas': '', 'remaining gas': '-', 'loaded address': '-' }
-        })
+    })
+    registerEvent && registerEvent('newTraceLoaded', () => {
+      setStepDetail(() => {
+        return { 'vm trace step': '-', 'execution step': '-', 'add memory': '', 'gas': '', 'remaining gas': '-', 'loaded address': '-' }
       })
-      vmDebuggerLogic.event.register('newTraceLoaded', () => {
-        setStepDetail(() => {
-          return { 'vm trace step': '-', 'execution step': '-', 'add memory': '', 'gas': '', 'remaining gas': '-', 'loaded address': '-' }
-        })
+    })
+    registerEvent && registerEvent('traceCurrentStepUpdate', (error, step) => {
+      setStepDetail(prevState => {
+        return { ...prevState, 'execution step': (error ? '-' : step) }
       })
-      vmDebuggerLogic.event.register('traceCurrentStepUpdate', (error, step) => {
-        setStepDetail(prevState => {
-          return { ...prevState, 'execution step': (error ? '-' : step) }
-        })
+    })
+    registerEvent && registerEvent('traceMemExpandUpdate', (error, addmem) => {
+      setStepDetail(prevState => {
+        return { ...prevState, 'add memory': (error ? '-' : addmem) }
       })
-      vmDebuggerLogic.event.register('traceMemExpandUpdate', (error, addmem) => {
-        setStepDetail(prevState => {
-          return { ...prevState, 'add memory': (error ? '-' : addmem) }
-        })
+    })
+    registerEvent && registerEvent('traceStepCostUpdate', (error, gas) => {
+      setStepDetail(prevState => {
+        return { ...prevState, 'gas': (error ? '-' : gas) }
       })
-      vmDebuggerLogic.event.register('traceStepCostUpdate', (error, gas) => {
-        setStepDetail(prevState => {
-          return { ...prevState, 'gas': (error ? '-' : gas) }
-        })
+    })
+    registerEvent && registerEvent('traceCurrentCalledAddressAtUpdate', (error, address) => {
+      setStepDetail(prevState => {
+        return { ...prevState, 'loaded address': (error ? '-' : address) }
       })
-      vmDebuggerLogic.event.register('traceCurrentCalledAddressAtUpdate', (error, address) => {
-        setStepDetail(prevState => {
-          return { ...prevState, 'loaded address': (error ? '-' : address) }
-        })
+    })
+    registerEvent && registerEvent('traceRemainingGasUpdate', (error, remainingGas) => {
+      setStepDetail(prevState => {
+        return { ...prevState, 'remaining gas': (error ? '-' : remainingGas) }
       })
-      vmDebuggerLogic.event.register('traceRemainingGasUpdate', (error, remainingGas) => {
-        setStepDetail(prevState => {
-          return { ...prevState, 'remaining gas': (error ? '-' : remainingGas) }
-        })
+    })
+    registerEvent && registerEvent('indexUpdate', (index) => {
+      setStepDetail(prevState => {
+        return { ...prevState, 'vm trace step': index }
       })
-      vmDebuggerLogic.event.register('indexUpdate', (index) => {
-        setStepDetail(prevState => {
-          return { ...prevState, 'vm trace step': index }
-        })
+    })
+    registerEvent && registerEvent('solidityState', (calldata) => {
+      setSolidityState(() => {
+        return { ...solidityState, calldata }
       })
-      vmDebuggerLogic.event.register('solidityState', (calldata) => {
-        setSolidityState(() => {
-          return { ...solidityState, calldata }
-        })
+    })
+    registerEvent && registerEvent('solidityStateMessage', (message) => {
+      setSolidityState(() => {
+        return { ...solidityState, message }
       })
-      vmDebuggerLogic.event.register('solidityStateMessage', (message) => {
-        setSolidityState(() => {
-          return { ...solidityState, message }
-        })
+    })
+    registerEvent && registerEvent('solidityLocals', (calldata) => {
+      setSolidityLocals(() => {
+        return { ...solidityLocals, calldata }
       })
-      vmDebuggerLogic.event.register('solidityLocals', (calldata) => {
-        setSolidityLocals(() => {
-          return { ...solidityLocals, calldata }
-        })
+    })
+    registerEvent && registerEvent('solidityLocalsMessage', (message) => {
+      setSolidityLocals(() => {
+        return { ...solidityLocals, message }
       })
-      vmDebuggerLogic.event.register('solidityLocalsMessage', (message) => {
-        setSolidityLocals(() => {
-          return { ...solidityLocals, message }
-        })
-      })
-      ready()
-    }
-  }, [vmDebuggerLogic])
+    })
+  }, [registerEvent])
 
   return (
     <div id="vmheadView" className="mt-1 px-0">
       <div className="d-flex flex-column">
         <div className="w-100">
-          <FunctionPanel calldata={functionPanel} />
-          <SolidityLocals calldata={solidityLocals.calldata} message={solidityLocals.message} />
-          <SolidityState calldata={solidityState.calldata} message={solidityState.message} />
+          <FunctionPanel data={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 stepDetail={stepDetail} /></div>
+        {/* <div className="w-100"><CodeListView asm={asm} /></div>
+        <div className="w-100"><StepDetail stepDetail={stepDetail} /></div> */}
       </div>
     </div>
   )