Call vmDebuggerLogic d start after event registration

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

@@ -28,10 +28,9 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash,
     },
     blockNumber: null,
     txNumber: '',
-    visibility: {
+    ready: {
       vmDebugger: false,
-      stepManager: false,
-      txBrowser: false
+      vmDebuggerHead: false
     },
     debugging: false
   })
@@ -130,20 +129,20 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash,
     // yo.update(this.debuggerHeadPanelsView, yo`<div></div>`)
     // yo.update(this.debuggerPanelsView, yo`<div></div>`)
     // yo.update(this.stepManagerView, yo`<div></div>`)
-    setState(prevState => {
-      const { visibility } = prevState
+    // setState(prevState => {
+    //   const { visibility } = prevState
 
-      return {
-        ...prevState,
-        debugger: null,
-        debugging: false,
-        visibility: {
-          ...visibility,
-          vmDebugger: false,
-          stepManager: false
-        }
-      }
-    })
+    //   return {
+    //     ...prevState,
+    //     debugger: null,
+    //     debugging: false,
+    //     visibility: {
+    //       ...visibility,
+    //       vmDebugger: false,
+    //       stepManager: false
+    //     }
+    //   }
+    // })
     event.trigger('traceUnloaded', [])
   }
 
@@ -222,6 +221,34 @@ 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
+      }
+    }
+  })
+}
+
+if (state.ready.vmDebugger && state.ready.vmDebuggerHead) {
+  state.debugger.vmDebuggerLogic.start()
+}
+
 // this.debuggerPanelsView = yo`<div class="px-2"></div>`
 // this.debuggerHeadPanelsView = yo`<div class="px-2"></div>`
 // this.stepManagerView = yo`<div class="px-2"></div>`
@@ -231,10 +258,10 @@ const deleteHighlights = async () => {
         <div className="px-2">
           <TxBrowser requestDebug={ requestDebug } unloadRequested={ unloadRequested } transactionNumber={ state.txNumber } debugging={ state.debugging } />
           <StepManager stepManager={ state.debugger ? state.debugger.step_manager : null } />
-          <VmDebuggerHead vmDebuggerLogic={ state.debugger ? state.debugger.vmDebuggerLogic : null } />
+          <VmDebuggerHead vmDebuggerLogic={ state.debugger ? state.debugger.vmDebuggerLogic : null } ready={vmDebuggerHeadReady} />
         </div>
-        {/* <div className="statusMessage">{state.statusMessage}</div>
-        <VmDebugger vmDebuggerLogic={state.debugger.vmDebuggerLogic} /> */}
+        <div className="statusMessage">{ state.statusMessage }</div>
+        <VmDebugger vmDebuggerLogic={ state.debugger ? state.debugger.vmDebuggerLogic : null } ready={vmDebuggerReady} />
       </div>
   )
 }

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

@@ -18,13 +18,11 @@ export const AssemblyItems = ({ codeView, index }) => {
         let currentItem = refs.current[selectedItem] ? refs.current[selectedItem] : null
     
         if (currentItem) {
-            if (selectedItem) {
             currentItem.removeAttribute('selected')
             currentItem.removeAttribute('style')
             if (currentItem.firstChild) {
                 currentItem.firstChild.removeAttribute('style')
             }
-            }
             const codeView = asmItemsRef.current
 
             currentItem = codeView.children[index]

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

@@ -2,6 +2,7 @@ import React from 'react'
 import DropdownPanel from './dropdown-panel'
 
 export const StackPanel = ({ calldata }) => {
+    console.log('calldata: ', calldata)
     return (
         <div id="stackpanel">
             <DropdownPanel dropdownName='Stack' opts={{ json: true }} 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 }) => {
+export const VmDebuggerHead = ({ vmDebuggerLogic, ready }) => {
   const [panelVisibility, setPanelVisibility] = useState({
     functionPanel: true,
     stepDetail: true,
@@ -99,7 +99,7 @@ export const VmDebuggerHead = ({ vmDebuggerLogic }) => {
           fullStoragesChangesPanel: true
         })
       })
-      vmDebuggerLogic.start()
+      ready()
     }
   }, [vmDebuggerLogic])
 
@@ -118,4 +118,4 @@ export const VmDebuggerHead = ({ vmDebuggerLogic }) => {
   )
 }
 
-export default VmDebuggerHead;
+export default VmDebuggerHead

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

@@ -5,7 +5,7 @@ import CallstackPanel from './callstack-panel'
 import StackPanel from './stack-panel'
 import StoragePanel from './storage-panel'
 
-export const VmDebugger = ({ vmDebuggerLogic }) => {
+export const VmDebugger = ({ vmDebuggerLogic, ready }) => {
   const [panelVisibility, setPanelVisibility] = useState({
     asmCode: true,
     stackPanel: true,
@@ -24,6 +24,7 @@ export const VmDebugger = ({ vmDebuggerLogic }) => {
   })
 
   useEffect(() => {
+    if (vmDebuggerLogic) {
       vmDebuggerLogic.event.register('traceManagerCallDataUpdate', (calldata) => {
         setCalldataPanel(calldata)
       })
@@ -55,20 +56,21 @@ export const VmDebugger = ({ vmDebuggerLogic }) => {
       //     solidityPanel: false
       //   })
       // })
-    vmDebuggerLogic.start()
-  }, [])
+      ready()
+    }
+  }, [vmDebuggerLogic])
 
   return (
     <div id="vmdebugger" className="px-2">
       <div>
-        <StackPanel calldata={stackPanel} />
-        <MemoryPanel calldata={memoryPanel} />
-        <StoragePanel storage={storagePanel.calldata} header={storagePanel.header} />
-        <CallstackPanel calldata={callStackPanel} />
-        <CalldataPanel calldata={calldataPanel} />
+        <StackPanel calldata={stackPanel || {}} />
+        {/* <MemoryPanel calldata={memoryPanel} /> */}
+        {/* <StoragePanel storage={storagePanel.calldata} header={storagePanel.header} /> */}
+        {/* <CallstackPanel calldata={callStackPanel} /> */}
+        {/* <CalldataPanel calldata={calldataPanel} /> */}
       </div>
     </div>
   )
 }
 
-export default VmDebugger;
+export default VmDebugger