Display assembly items

libs/remix-ui/debugger-ui/src/hooks/extract-data.tsx

@@ -38,7 +38,7 @@ export const useExtractData = (json, extractFunc?: ExtractFunc): Array<{ key: st
             ret.isLeaf = false
         } else if (item instanceof Object) {
             ret.children = Object.keys(item).map((key) => {
-            return {key: key, value: item[key]}
+                return {key: key, value: item[key]}
             })
             ret.self = 'Object'
             ret.isNode = true

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

@@ -2,6 +2,7 @@ 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
     })
@@ -15,38 +16,50 @@ export const AssemblyItems = ({ codeView, index }) => {
     const indexChanged = (index) => {
         if (index < 0) return
         const { selectedItem } = state
-        let currentItem = refs.current[selectedItem].current
+        console.log('selectedItem: ', selectedItem)
+        console.log('refs: ', refs)
+        console.log('refs.current: ', refs.current)
+        let currentItem = refs.current[selectedItem] ? refs.current[selectedItem].current : null
     
-        if (selectedItem) {
-            currentItem.removeAttribute('selected')
-            currentItem.removeAttribute('style')
-            if (currentItem.firstChild) {
-                currentItem.firstChild.removeAttribute('style')
+        if (currentItem) {
+            if (selectedItem) {
+                currentItem.removeAttribute('selected')
+                currentItem.removeAttribute('style')
+                if (currentItem.firstChild) {
+                    currentItem.firstChild.removeAttribute('style')
+                }
             }
-        }
-    
-        const codeView = asmItemsRef.current
+            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)')
-        currentItem.style.setProperty('border-style', 'solid')
-        currentItem.setAttribute('selected', 'selected')
-        codeView.scrollTop = currentItem.offsetTop - parseInt(codeView.offsetTop)
-        setState(prevState => {
-            return {
-                ...prevState,
-                selectedItem: index
-            }
-        })
+            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 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={refs.current[i]}><span>{item}</span></div>
+                            })
+                        }
+                    </div>
+                </div>
+            </div>
         </div>
     )
 }

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

@@ -1,10 +1,7 @@
 import React, { useState, useEffect } from 'react'
-import DropdownPanel from './dropdown-panel'
-/* eslint-disable-next-line */
-import EventManager from '../../../../../../apps/remix-ide/src/lib/events'
+import AssemblyItems from './assembly-items'
 
 export const CodeListView = ({ asm }) => {
-  const event = new EventManager()
   const [state, setState] = useState({
     code: [],
     address: '',
@@ -40,11 +37,11 @@ export const CodeListView = ({ asm }) => {
       }
     })
     indexChanged(index)
-  }
+  } 
 
   return (
     <div id='asmcodes'>
-      <DropdownPanel dropdownName='Instructions' opts={{ json: false, displayContentOnly: true }} codeView={state.code} index={state.index} />
+      <AssemblyItems codeView={state.code || []} index={state.index} />
     </div>
   )
 }

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

@@ -1,5 +1,4 @@
 import React, { useState, useRef, useEffect } from 'react'
-import AssemblyItems from './assembly-items'
 import { TreeView, TreeViewItem } from '@remix-ui/tree-view'
 import useExtractData from '../../hooks/extract-data'
 import { DropdownPanelProps, ExtractData } from '../../types'
@@ -11,15 +10,14 @@ import './styles/dropdown-panel.css'
 import EventManager from '../../../../../../apps/remix-ide/src/lib/events'
 
 export const DropdownPanel = (props: DropdownPanelProps) => {
-    const { dropdownName, dropdownMessage, opts, codeView, index, calldata, header, extractFunc, formatSelfFunc } = props
+    const { dropdownName, dropdownMessage, opts, calldata, header, loading, extractFunc, formatSelfFunc } = props
     const data = useExtractData(calldata, extractFunc)
     const event = new EventManager()
     const dropdownRawEl = useRef(null)
     const [state, setState] = useState({
         header: '',
         json: opts.json,
-        displayContentOnly: opts.displayContentOnly,
-        toggleDropdown: false,
+        toggleDropdown: true,
         message: {
             innerText: '',
             display: 'none'
@@ -36,7 +34,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
             innerText: '',
             display: 'none'
         },
-        showRefreshIcon: false
+        updating: false
     })
 
     useEffect(() => {
@@ -47,6 +45,10 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
         message(dropdownMessage)
     }, [dropdownMessage])
 
+    useEffect(() => {
+        if (loading && !state.updating) setLoading()
+    }, [loading])
+
     const handleToggle = () => {
         setState(prevState => {
             if (prevState.toggleDropdown) event.trigger('hide', [])
@@ -63,22 +65,15 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
     }
 
     const message = (message) => {
-        setState(state => {
+        if (message === state.message.innerText) return
+        setState(prevState => {
             return {
-                ...state,
+                ...prevState,
                 message: {
                     innerText: message,
                     display: message ? 'block' : ''
                 },
-                dropdownRawContent: {
-                    ...state.dropdownRawContent,
-                    display: 'none'
-                },
-                dropdownContent: {
-                    ...state.dropdownContent,
-                    display: 'none'
-                },
-                showRefreshIcon: false
+                updating: false
             }
         })
     }
@@ -99,7 +94,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
                     ...prevState.dropdownContent,
                     display: 'none'
                 },
-                showRefreshIcon: true
+                updating: true
             }
         })
     }
@@ -108,30 +103,17 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
         setState(prevState => {
             return {
                 ...prevState,
-                showRefreshIcon: false,
                 dropdownContent: {
                     ...prevState.dropdownContent,
-                    display: 'none'
+                    display: 'block'
                 },
                 dropdownRawContent: {
                     innerText: JSON.stringify(calldata, null, '\t'),
                     display: 'block'
-                }
+                },
+                updating: false
             }
         })
-        if (!state.displayContentOnly) {
-        //   this.view.querySelector('.title i.fa-copy').style.display = 'block'
-            setState(prevState => {
-                return {
-                    ...prevState,
-                    title: {
-                        innerText: header || '',
-                        display: 'block'
-                    }
-                }
-            })
-        }
-        message('')
     }
 
     const hide = () => {
@@ -164,11 +146,11 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
     }
 
     const renderData = (item: ExtractData, key: string) => {
-        const children = (item.children || []).map((child) => {
+        const children = (item.children || []).map((child, index) => {
             const childKey = key + '/' + child.key
 
             return (
-                <TreeViewItem key={childKey} label={ formatSelfFunc ? formatSelfFunc(childKey, item) : formatSelfDefault(childKey, item)}>
+                <TreeViewItem id={childKey} key={index} label={ formatSelfFunc ? formatSelfFunc(childKey, item) : formatSelfDefault(childKey, item)}>
                     { renderData(child.value, childKey) }
                 </TreeViewItem>
             )
@@ -176,51 +158,41 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
 
         if (children && children.length > 0 ) {
             return (
-                <TreeView key={key}>
+                <TreeView id={key}>
                     { children }
                 </TreeView>
             )
         } else {
-            return <TreeViewItem key={key} label={ formatSelfFunc ? formatSelfFunc(key, item) : formatSelfDefault(key, item) } />
+            return <TreeViewItem id={key} label={ formatSelfFunc ? formatSelfFunc(key, item) : formatSelfDefault(key, item) } />
         }
     }
 
     let content: JSX.Element | JSX.Element[] = <div>Empty</div>
     if (state.json) {
-        content = (data).map(item => {
+        content = (data).map((item, index) => {
             return (
-                <TreeView key={item.key}>
+                <TreeView id={item.key} key={index}>
                     { renderData(item.data, item.key) }
                 </TreeView>
             )
         })
     }
-    const title = !state.displayContentOnly ? 
-    <div className="py-0 px-1 title">
+    const title = <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}>{dropdownName}</div><span className="nameDetail" onClick={handleToggle}></span>
         <CopyToClipboard getContent={copyClipboard} />
-    </div> : <div></div>
-    
-    if (state.displayContentOnly) {
-        setState(prevState => {
-            return {
-                ...prevState,
-                toggleDropdown: true
-            }
-        })
-    }
+    </div>
 
     return (
         <div className="border rounded px-1 mt-1 bg-light">
             { 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>
+                <i className="refresh fas fa-sync" style={{ display: state.updating ? 'inline-block' : 'none' }} aria-hidden="true"></i>
                 <div className='dropdowncontent' style={{ display: state.dropdownContent.display }}>
-                    { codeView ? <AssemblyItems codeView={codeView} index={index} /> : content }
+                    { content }
                 </div>
                 <div className='dropdownrawcontent' style={{ display: state.dropdownRawContent.display }} ref={ dropdownRawEl }></div>
-                <div className='message' style={{ display: state.message.display }}></div>
+                <div className='message' style={{ display: state.message.display }}>{ state.message.innerText }</div>
             </div>
         </div>
     )

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

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

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

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

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

@@ -54,7 +54,7 @@ export const StepDetail = (props: StepDetailProps) => {
 
     return (
         <div id='stepdetail' data-id="stepdetail">
-            <DropdownPanel dropdownName='Step details' opts={{ json: true, displayContentOnly: false }} calldata={ state.detail } />
+            <DropdownPanel dropdownName='Step details' opts={{ json: true }} calldata={ state.detail } />
         </div>
     )
 }

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

@@ -47,7 +47,9 @@ export const VmDebuggerHead = ({ vmDebuggerLogic }) => {
         const functions = []
     
         for (const func of stack) {
-          functions.push(func.functionDefinition.attributes.name + '(' + func.inputs.join(', ') + ')')
+          const functionDefinitionName = func.functionDefinition.name || func.functionDefinition.attributes.name
+
+          functions.push(functionDefinitionName + '(' + func.inputs.join(', ') + ')')
         }
         setFunctionPanel(functions)
       })
@@ -82,10 +84,10 @@ export const VmDebuggerHead = ({ vmDebuggerLogic }) => {
         setSolidityState({ ...solidityState, message })
       })
       vmDebuggerLogic.event.register('solidityLocals', (calldata) => {
-        setSolidityLocals({ ...solidityState, calldata })
+        setSolidityLocals({ ...solidityLocals, calldata })
       })
       vmDebuggerLogic.event.register('solidityLocalsMessage', (message) => {
-        setSolidityLocals({ ...solidityState, message })
+        setSolidityLocals({ ...solidityLocals, message })
       })
       vmDebuggerLogic.event.register('newTrace', () => {
         setPanelVisibility({
@@ -106,10 +108,10 @@ export const VmDebuggerHead = ({ vmDebuggerLogic }) => {
       <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} /> */}
+          <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"><CodeListView asm={asm} /></div>
         {/* <div className="w-100"><StepDetail detail={stepDetail} /></div> */}
       </div>
     </div>

libs/remix-ui/debugger-ui/src/types/index.ts

@@ -17,17 +17,15 @@ export interface DropdownPanelProps {
     dropdownMessage?: string,
     opts: {
         json: boolean,
-        displayContentOnly?: boolean,
         css?: {
             [key: string]: string
         }
     },
-    codeView?: string[],
-    index?: number,
     calldata?: {
         [key: string]: string
     },
     header?: string,
+    loading?: boolean
     extractFunc?: ExtractFunc,
     formatSelfFunc?: FormatSelfFunc
 }

libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.tsx

@@ -4,10 +4,10 @@ import { TreeViewProps } from '../types'
 import './remix-ui-tree-view.css'
 
 export const TreeView = (props: TreeViewProps) => {
-  const { children, key, ...otherProps } = props
+  const { children, id, ...otherProps } = props
   
   return (
-    <ul data-id={`treeViewUl${key}`} className="ul_tv ml-0 px-2" { ...otherProps }>
+    <ul data-id={`treeViewUl${id}`} className="ul_tv ml-0 px-2" { ...otherProps }>
       { children }
     </ul>
   )

libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx

@@ -4,12 +4,12 @@ import { TreeViewItemProps } from '../../types'
 import './tree-view-item.css'
 
 export const TreeViewItem = (props: TreeViewItemProps) => {
-  const { key, children, label, ...otherProps } = props
+  const { id, children, label, ...otherProps } = props
   const [isExpanded, setIsExpanded] = useState(false)
 
   return (
-    <li key={`treeViewLi${key}`} data-id={`treeViewLi${key}`} className='li_tv' {...otherProps}>
-      <div key={`treeViewDiv${key}`} data-id={`treeViewDiv${key}`} className='d-flex flex-row align-items-center' onClick={() => setIsExpanded(!isExpanded)}>
+    <li key={`treeViewLi${id}`} data-id={`treeViewLi${id}`} className='li_tv' {...otherProps}>
+      <div key={`treeViewDiv${id}`} data-id={`treeViewDiv${id}`} className='d-flex flex-row align-items-center' onClick={() => setIsExpanded(!isExpanded)}>
         <div className={isExpanded ? 'px-1 fas fa-caret-down caret caret_tv' : 'px-1 fas fa-caret-right caret caret_tv'}  style={{ visibility: children ? 'visible' : 'hidden' }}></div>
         <span className='w-100 pl-1'>
           { label }

libs/remix-ui/tree-view/src/types/index.ts

@@ -1,10 +1,10 @@
 export interface TreeViewProps {
     children?: React.ReactNode,
-    key: string
+    id: string
 }
 
 export interface TreeViewItemProps {
     children?: React.ReactNode,
-    key: string,
+    id: string,
     label: string | number | React.ReactNode
 }