VMDebugger components refactor

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

@@ -0,0 +1,54 @@
+import React, { useState, useRef, useEffect } from 'react'
+import './styles/assembly-items.css'
+
+export const AssemblyItems = ({ codeView, index }) => {
+    const [state, setState] = useState({
+        selectedItem: null
+    })
+    const refs = useRef(codeView.map(React.createRef))
+    const asmItemsRef = useRef(null)
+
+    useEffect(() => {
+        indexChanged(index)
+    }, [index])
+
+    const indexChanged = (index) => {
+        if (index < 0) return
+        const { selectedItem } = state
+        let currentItem = refs.current[selectedItem].current
+    
+        if (selectedItem) {
+            currentItem.removeAttribute('selected')
+            currentItem.removeAttribute('style')
+            if (currentItem.firstChild) {
+                currentItem.firstChild.removeAttribute('style')
+            }
+        }
+    
+        const codeView = asmItemsRef.current
+
+        currentItem = codeView.children[index]
+        currentItem.style.setProperty('border-color', 'var(--primary)')
+        currentItem.style.setProperty('border-style', 'solid')
+        currentItem.setAttribute('selected', 'selected')
+        codeView.scrollTop = currentItem.offsetTop - parseInt(codeView.offsetTop)
+        setState(prevState => {
+            return {
+                ...prevState,
+                selectedItem: index
+            }
+        })
+    }
+
+    return (
+        <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>
+                }) 
+            }
+        </div>
+    )
+}
+
+export default AssemblyItems

libs/debugger-ui/src/lib/vm-debugger/calldata-panel.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import DropdownPanel from './dropdown-panel'
+
+export const CalldataPanel = ({ calldata }) => {
+    return (
+        <div id='calldatapanel'>
+            <DropdownPanel dropdownName='Call Data' opts={{ json: true }} calldata={calldata} />
+        </div>
+    )
+}
+
+export default CalldataPanel

libs/debugger-ui/src/lib/vm-debugger/callstack-panel.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import DropdownPanel from './dropdown-panel'
+
+export const CallstackPanel = ({ calldata }) => {
+    return (
+        <div id='callstackpanel'>
+            <DropdownPanel dropdownName='Call Stack' opts={{ json: true }} calldata={calldata} />
+        </div>
+    )
+}
+
+export default CallstackPanel

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

@@ -1,21 +1,50 @@
-import React, { useState } from 'react'
-import './styles/code-list-view.css'
+import React, { useState, useRef } from 'react'
+import DropdownPanel from './dropdown-panel'
 import EventManager from '../../../../../apps/remix-ide/src/lib/events'
 
-export const VmDebugger = ({ vmDebuggerLogic }) => {
+export const CodeListView = ({ vmDebuggerLogic }) => {
   const event = new EventManager()
   const [state, setState] = useState({
     code: '',
     address: '',
     itemSelected: null,
-    
+    index: null
   })
 
+  const indexChanged = (index) => {
+    if(index < 0) return
+    setState(prevState => {
+      return {
+        ...prevState,
+        index
+      }
+    })
+  }
+
+  const reset = () => {
+    changed([], '', -1)
+  }
+
+  const changed = (code, address, index) => {
+    if (state.address === address) {
+      return indexChanged(index)
+    }
+    setState(prevState => {
+      return {
+        ...prevState,
+        code,
+        address
+      }
+    })
+    this.basicPanel.setContent(this.renderAssemblyItems())
+    indexChanged(index)
+  }
+
   return (
-    <div>
-      <h1>Welcome to vmDebugger!</h1>
+    <div id='asmcodes'>
+      <DropdownPanel dropdownName='Instructions' opts={{ json: false, displayContentOnly: true }} codeView={state.code} index={state.index} />
     </div>
   )
 }
 
-export default VmDebugger
+export default CodeListView

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

@@ -1,12 +1,32 @@
-import React, { useState, useRef } from 'react'
+import React, { useState, useRef, useEffect } from 'react'
+import AssemblyItems from './assembly-items'
 import './styles/dropdown-panel.css'
 import EventManager from '../../../../../apps/remix-ide/src/lib/events'
 import TreeView from '../../../../../apps/remix-ide/src/app/ui/TreeView'
 import copyToClipboard from '../../../../../apps/remix-ide/src/app/ui/copy-to-clipboard'
 
-export const DropdownPanel = ({ name, opts, node }) => {
+export interface DropdownPanelProps {
+    dropdownName: string,
+    opts: {
+        json: boolean,
+        displayContentOnly?: boolean,
+        css?: {
+            [key: string]: string
+        }
+    },
+    codeView?: string[],
+    index?: number,
+    calldata?: {
+        [key: string]: string
+    },
+    header?: string
+}
+
+export const DropdownPanel = (props: DropdownPanelProps) => {
+    const { dropdownName, opts, codeView, index, calldata, header } = props
     const event = new EventManager()
     const treeView = new TreeView(opts)
+    const dropdownRawEl = useRef(null)
     const [state, setState] = useState({
         header: '',
         json: opts.json,
@@ -30,7 +50,10 @@ export const DropdownPanel = ({ name, opts, node }) => {
         },
         showRefreshIcon: false
     })
-    const dropdownRawEl = useRef(null)
+
+    useEffect(() => {
+        update(calldata, header)
+    }, [calldata, header])
 
     const handleToggle = () => {
         setState(prevState => {
@@ -149,7 +172,7 @@ export const DropdownPanel = ({ name, opts, node }) => {
     const title = !state.displayContentOnly ? 
     <div className="py-0 px-1 title">
         <div className={state.toggleDropdown ? 'icon fas fa-caret-down' : 'icon fas fa-caret-right'} onClick={handleToggle}></div>
-        <div className="name" onClick={handleToggle}>{name}</div><span className="nameDetail" onClick={handleToggle}></span>
+        <div className="name" onClick={handleToggle}>{dropdownName}</div><span className="nameDetail" onClick={handleToggle}></span>
         {copyToClipboard(() => copyClipboard())}
     </div> : <div></div>
     
@@ -167,7 +190,9 @@ export const DropdownPanel = ({ name, opts, node }) => {
             { title }
             <div className='dropdownpanel' style={{ display: state.toggleDropdown ? 'block' : 'none' }}>
                 <i className="refresh fas fa-sync" style={{ display: state.showRefreshIcon ? 'inline-block' : 'none' }} aria-hidden="true"></i>
-                <div className='dropdowncontent' style={{ display: state.dropdownContent.display }}>{node || content }</div>
+                <div className='dropdowncontent' style={{ display: state.dropdownContent.display }}>
+                    { codeView ? <AssemblyItems codeView={codeView} index={index} /> : content }
+                </div>
                 <div className='dropdownrawcontent' style={{ display: state.dropdownRawContent.display }} ref={ dropdownRawEl }></div>
                 <div className='message' style={{ display: state.message.display }}></div>
             </div>

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

@@ -0,0 +1,12 @@
+import React from 'react'
+import DropdownPanel from './dropdown-panel'
+
+export const FunctionPanel = ({ calldata }) => {
+    return (
+        <div id="FunctionPanel">
+            <DropdownPanel dropdownName='Function Stack' opts={{ json: true, displayContentOnly: false }} calldata={calldata} />
+        </div>
+    )
+}
+
+export default FunctionPanel

libs/debugger-ui/src/lib/vm-debugger/memory-panel.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import DropdownPanel from './dropdown-panel'
+
+export const MemoryPanel = ({ calldata }) => {
+    return (
+        <DropdownPanel  dropdownName='Memory' opts={{
+            json: true,
+            css: {
+              'font-family': 'monospace'
+            }}} 
+            calldata={calldata}
+        />
+    )
+}
+
+export default MemoryPanel

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

@@ -0,0 +1,12 @@
+import React from 'react'
+import DropdownPanel from './dropdown-panel'
+
+export const StackPanel = ({ calldata }) => {
+    return (
+        <div id="stackpanel">
+            <DropdownPanel dropdownName='Stack' opts={{ json: true, displayContentOnly: false }} calldata={calldata} />
+        </div>
+    )
+}
+
+export default StackPanel

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

@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react'
+import DropdownPanel from './dropdown-panel'
+
+export interface StepDetailProps {
+    resetStep: boolean,
+    detail: {
+        key: string,
+        value: string
+    }
+} 
+
+export const StepDetail = (props: StepDetailProps) => {
+    const { resetStep, detail } = props
+    const [state, setState] = useState({
+        detail: {
+            'vm trace step': '-',
+            'execution step': '-',
+            'add memory': '',
+            'gas': '',
+            'remaining gas': '-',
+            'loaded address': '-'
+        }
+    })
+
+    useEffect(() => {
+        reset()
+    }, [resetStep])
+
+    useEffect(() => {
+        updateField(detail.key, detail.value)
+    }, [detail])
+
+    const reset = () => {
+        setState(() => {
+            return {
+                detail: {
+                    'vm trace step': '-',
+                    'execution step': '-',
+                    'add memory': '',
+                    'gas': '',
+                    'remaining gas': '-',
+                    'loaded address': '-'
+                }
+            }
+        })
+    }
+
+    const updateField = (key, value) => {
+        setState(prevState => {
+            const { detail } = prevState
+
+            detail[key] = value
+            return {
+                detail
+            }
+        })
+    }
+
+    return (
+        <div id='stepdetail' data-id="stepdetail">
+            <DropdownPanel dropdownName='Step details' opts={{ json: true, displayContentOnly: false }} calldata={ state.detail } />
+        </div>
+    )
+}
+
+export default StepDetail

libs/debugger-ui/src/lib/vm-debugger/storage-panel.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import DropdownPanel from './dropdown-panel'
+
+export const StoragePanel = ({ storage, header }) => {
+    return (
+        <div id='storagepanel'>
+            <DropdownPanel dropdownName='Storage' opts={{ json: true }} calldata={storage} header={header} />
+        </div>
+    )
+}
+
+export default StoragePanel

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

@@ -1,9 +1,10 @@
-import React, { useState } from 'react';
+import React, { useState } from 'react'
+import CodeListView from './code-list-view'
 import './vm-debugger.css';
 
 export const VmDebugger = ({ vmDebuggerLogic }) => {
   const [state, setState] = useState({
-    asmCode 
+ 
   })
 
   return (