Fixed step details bug

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

@@ -2,11 +2,10 @@ import React, { useState, useRef, useEffect } from 'react'
 import './styles/assembly-items.css'
 
 export const AssemblyItems = ({ codeView, index }) => {
-    console.log('codeView: ', codeView)
     const [state, setState] = useState({
-        selectedItem: null
+        selectedItem: 0
     })
-    const refs = useRef(codeView.map(React.createRef))
+    const refs = useRef({})
     const asmItemsRef = useRef(null)
 
     useEffect(() => {
@@ -16,10 +15,7 @@ export const AssemblyItems = ({ codeView, index }) => {
     const indexChanged = (index) => {
         if (index < 0) return
         const { selectedItem } = state
-        console.log('selectedItem: ', selectedItem)
-        console.log('refs: ', refs)
-        console.log('refs.current: ', refs.current)
-        let currentItem = refs.current[selectedItem] ? refs.current[selectedItem].current : null
+        let currentItem = refs.current[selectedItem] ? refs.current[selectedItem] : null
     
         if (currentItem) {
             if (selectedItem) {
@@ -30,8 +26,6 @@ export const AssemblyItems = ({ codeView, index }) => {
                 }
             }
             const codeView = asmItemsRef.current
-            console.log('asmItemsRef: ', asmItemsRef)
-            console.log('asmItemsRef.current: ', asmItemsRef.current)
 
             currentItem = codeView.children[index]
             currentItem.style.setProperty('border-color', 'var(--primary)')
@@ -54,7 +48,7 @@ export const AssemblyItems = ({ codeView, index }) => {
                     <div className="pl-2 my-1 small instructions" id='asmitems' ref={asmItemsRef}>
                         { 
                             codeView.map((item, i) => {
-                                return <div className="px-1" key={i} ref={refs.current[i]}><span>{item}</span></div>
+                                return <div className="px-1" key={i} ref={ref => refs.current[i] = ref}><span>{item}</span></div>
                             })
                         }
                     </div>

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import DropdownPanel from './dropdown-panel'
 
 export interface StepDetailProps {
-    detail: {
+    stepDetail: {
         key: string,
         value: string,
         reset: boolean
@@ -10,43 +10,39 @@ export interface StepDetailProps {
 } 
 
 export const StepDetail = (props: StepDetailProps) => {
-    const { detail } = props
-    const [state, setState] = useState({
-        detail: {
-            'vm trace step': '-',
-            'execution step': '-',
-            'add memory': '',
-            'gas': '',
-            'remaining gas': '-',
-            'loaded address': '-'
-        }
+    const { stepDetail } = props
+    const [detail, setDetail] = useState({
+        'vm trace step': '-',
+        'execution step': '-',
+        'add memory': '',
+        'gas': '',
+        'remaining gas': '-',
+        'loaded address': '-'
     })
 
     useEffect(() => {
-        updateField(detail.key, detail.value, detail.reset)
-    }, [detail])
+        updateField(stepDetail.key, stepDetail.value, stepDetail.reset)
+    }, [stepDetail])
 
     const updateField = (key, value, reset) => {
+        if (!key) return
+
         if (reset) {
-            setState(() => {
+            setDetail(() => {
                 return {
-                    detail: {
-                        'vm trace step': '-',
-                        'execution step': '-',
-                        'add memory': '',
-                        'gas': '',
-                        'remaining gas': '-',
-                        'loaded address': '-'
-                    }
+                    'vm trace step': '-',
+                    'execution step': '-',
+                    'add memory': '',
+                    'gas': '',
+                    'remaining gas': '-',
+                    'loaded address': '-'
                 }
             })
         } else {
-            setState(prevState => {
-                const { detail } = prevState
-    
-                detail[key] = value
+            setDetail(prevDetail => {
                 return {
-                    detail
+                    ...prevDetail,
+                    [key]: value
                 }
             })
         }
@@ -54,7 +50,7 @@ export const StepDetail = (props: StepDetailProps) => {
 
     return (
         <div id='stepdetail' data-id="stepdetail">
-            <DropdownPanel dropdownName='Step details' opts={{ json: true }} calldata={ state.detail } />
+            <DropdownPanel dropdownName='Step details' opts={{ json: true }} calldata={ detail } />
         </div>
     )
 }

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

@@ -112,7 +112,7 @@ export const VmDebuggerHead = ({ vmDebuggerLogic }) => {
           <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 className="w-100"><StepDetail stepDetail={stepDetail} /></div>
       </div>
     </div>
   )