Refactor dropdown panel component

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

@@ -44,7 +44,7 @@ export const ButtonNavigation = ({ stepManager, revertedReason, stepState, jumpO
         jumpPreviousBreakpointDisabled: stepState === 'initial',
         intoForwardDisabled: stepState === 'end',
         overForwardDisabled: stepState === 'end',
-        jumpNextBreakpointDisabled: jumpOutDisabled ? jumpOutDisabled : stepState === 'end',
+        jumpNextBreakpointDisabled: stepState === 'end',
         jumpOutDisabled: jumpOutDisabled ? jumpOutDisabled : true
       }
     })

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

@@ -5,15 +5,10 @@ import VmDebugger from './vm-debugger/vm-debugger'
 import VmDebuggerHead from './vm-debugger/vm-debugger-head'
 import remixDebug, { TransactionDebugger as Debugger } from '@remix-project/remix-debug'
 /* eslint-disable-next-line */
-import toaster from '../../../../../apps/remix-ide/src/app/ui/tooltip'
-/* eslint-disable-next-line */
-import SourceHighlighter from '../../../../../apps/remix-ide/src/app/editor/sourceHighlighter'
-/* eslint-disable-next-line */
 import globalRegistry from '../../../../../apps/remix-ide/src/global/registry'
 import './debugger-ui.css'
 
 export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash, getTraceHash, removeHighlights }) => {
-  const sourceHighlighter = new SourceHighlighter()
   const init = remixDebug.init
   const [state, setState] = useState({
     isActive: false,
@@ -144,6 +139,7 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash,
   }
 
   const startDebugging = async (blockNumber, txNumber, tx) => {
+    if (state.debugger) unLoad()
     const web3 = await getDebugWeb3()
     const currentReceipt = await web3.eth.getTransactionReceipt(txNumber)
     const debuggerInstance = new Debugger({
@@ -159,8 +155,6 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash,
       }
     })
     debuggerInstance.debug(blockNumber, txNumber, tx, () => {
-      // this.stepManager = new StepManagerUI(this.debugger.step_manager)
-      // this.vmDebugger = new VmDebugger(this.debugger.vmDebuggerLogic)
       listenToEvents(debuggerInstance, currentReceipt)
       setState(prevState => {
         return {
@@ -172,9 +166,8 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash,
           debugger: debuggerInstance
         }
       })
-      // this.renderDebugger()
     }).catch((error) => {
-      toaster(error, null, null)
+      // toaster(error, null, null)
       unLoad()
     })
 }
@@ -244,10 +237,6 @@ 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>`
-
   return (
       <div>
         <div className="px-2">

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

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

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

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

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

@@ -8,12 +8,10 @@ import { CopyToClipboard } from '@remix-ui/clipboard'
 import './styles/dropdown-panel.css'
 
 export const DropdownPanel = (props: DropdownPanelProps) => {
-    const { dropdownName, dropdownMessage, opts, calldata, header, loading, extractFunc, formatSelfFunc } = props
+    const { dropdownName, dropdownMessage, calldata, header, loading, extractFunc, formatSelfFunc } = props
     const data = useExtractData(calldata, extractFunc)
-    const dropdownRawEl = useRef(null)
     const [state, setState] = useState({
         header: '',
-        json: opts.json,
         toggleDropdown: true,
         message: {
             innerText: '',
@@ -52,10 +50,6 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
         })
     }
 
-    const copyClipboard = () => {
-        return dropdownRawEl.current.innerText ? dropdownRawEl.current.innerText : dropdownRawEl.current.textContent
-    }
-
     const message = (message) => {
         if (message === state.message.innerText) return
         setState(prevState => {
@@ -133,29 +127,23 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
         }
     }
 
-    let content: JSX.Element | JSX.Element[] = <div>Empty</div>
-    if (state.json) {
-        content = (data).map((item, index) => {
-            return (
-                <TreeView id={item.key} key={index}>
-                    { renderData(item.data, item.key) }
-                </TreeView>
-            )
-        })
-    }
-    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}>{ header }</span>
-        <CopyToClipboard content={state.copiableContent} />
-    </div>
-
     return (
         <div className="border rounded px-1 mt-1 bg-light">
-            { 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}>{ header }</span>
+                <CopyToClipboard content={state.copiableContent} />
+            </div>
             <div className='dropdownpanel' style={{ display: state.toggleDropdown ? 'block' : 'none' }}>
                 <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 }}>
-                    { content }
+                    { data.map((item, index) => {
+                        return (
+                            <TreeView id={item.key} key={index}>
+                                { renderData(item.data, item.key) }
+                            </TreeView>
+                        )
+                    }) }
                 </div>
                 <div className='message' style={{ display: state.message.display }}>{ state.message.innerText }</div>
             </div>

libs/remix-ui/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import { DropdownPanel } from './dropdown-panel'
 
-export const FullStoragesChanges = ({ storageData }) => {
+export const FullStoragesChanges = ({ calldata }) => {
     return (
         <div id='fullstorageschangespanel'>
-            <DropdownPanel dropdownName='Full Storages Changes' opts={{ json: true }} calldata={ storageData } />
+            <DropdownPanel dropdownName='Full Storages Changes' calldata={ calldata } />
         </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 }} calldata={calldata} />
+            <DropdownPanel dropdownName='Function Stack' calldata={calldata} />
         </div>
     )
 }

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

@@ -3,13 +3,7 @@ import DropdownPanel from './dropdown-panel'
 
 export const MemoryPanel = ({ calldata }) => {
     return (
-        <DropdownPanel  dropdownName='Memory' opts={{
-            json: true,
-            css: {
-              'font-family': 'monospace'
-            }}} 
-            calldata={calldata}
-        />
+        <DropdownPanel  dropdownName='Memory' calldata={calldata} />
     )
 }
 

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

@@ -36,7 +36,7 @@ export const SolidityLocals = ({ calldata, message }) => {
 
     return (
         <div id='soliditylocals' data-id="solidityLocals">
-            <DropdownPanel dropdownName='Solidity Locals' dropdownMessage={message} opts={{ json: true }} calldata={calldata}  extractFunc={extractData} formatSelfFunc={formatSelf} />
+            <DropdownPanel dropdownName='Solidity Locals' dropdownMessage={message} calldata={calldata}  extractFunc={extractData} formatSelfFunc={formatSelf} />
         </div>
     )
 }

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

@@ -36,7 +36,7 @@ export const SolidityState = ({ calldata, message }) => {
     return (
         <div id='soliditylocals' data-id='solidityLocals'>
             {
-                <DropdownPanel dropdownName='Solidity State' dropdownMessage={message} opts={{ json: true }} calldata={calldata} formatSelfFunc={formatSelf} extractFunc={extractData} />
+                <DropdownPanel dropdownName='Solidity State' dropdownMessage={message} calldata={calldata} formatSelfFunc={formatSelf} extractFunc={extractData} />
             }
         </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 }} calldata={calldata} />
+            <DropdownPanel dropdownName='Stack' calldata={calldata} />
         </div>
     )
 }

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

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

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

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

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

@@ -6,14 +6,6 @@ import SolidityState from './solidity-state'
 import SolidityLocals from './solidity-locals'
 
 export const VmDebuggerHead = ({ vmDebuggerLogic, ready }) => {
-  const [panelVisibility, setPanelVisibility] = useState({
-    functionPanel: true,
-    stepDetail: true,
-    solidityState: true,
-    solidityLocals: true,
-    returnValuesPanel: true,
-    fullStoragesChangesPanel: true
-  })
   const [asm, setAsm] = useState({
     code: null,
     address: null,
@@ -89,16 +81,6 @@ export const VmDebuggerHead = ({ vmDebuggerLogic, ready }) => {
       vmDebuggerLogic.event.register('solidityLocalsMessage', (message) => {
         setSolidityLocals({ ...solidityLocals, message })
       })
-      vmDebuggerLogic.event.register('newTrace', () => {
-        setPanelVisibility({
-          functionPanel: true,
-          stepDetail: true,
-          solidityState: true,
-          solidityLocals: true,
-          returnValuesPanel: true,
-          fullStoragesChangesPanel: true
-        })
-      })
       ready()
     }
   }, [vmDebuggerLogic])

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

@@ -4,16 +4,10 @@ import MemoryPanel from './memory-panel'
 import CallstackPanel from './callstack-panel'
 import StackPanel from './stack-panel'
 import StoragePanel from './storage-panel'
+import ReturnValuesPanel from './dropdown-panel'
+import FullStoragesChangesPanel from './full-storages-changes'
 
 export const VmDebugger = ({ vmDebuggerLogic, ready }) => {
-  const [panelVisibility, setPanelVisibility] = useState({
-    asmCode: true,
-    stackPanel: true,
-    storagePanel: true,
-    memoryPanel: true,
-    calldataPanel: true,
-    callstackPanel: true,
-  })
   const [calldataPanel, setCalldataPanel] = useState(null)
   const [memoryPanel, setMemoryPanel] = useState(null)
   const [callStackPanel, setCallStackPanel] = useState(null)
@@ -22,6 +16,8 @@ export const VmDebugger = ({ vmDebuggerLogic, ready }) => {
     calldata: null,
     header: null
   })
+  const [returnValuesPanel, setReturnValuesPanel] = useState(null)
+  const [fullStoragesChangesPanel, setFullStoragesChangesPanel] = useState(null)
 
   useEffect(() => {
     if (vmDebuggerLogic) {
@@ -40,22 +36,15 @@ export const VmDebugger = ({ vmDebuggerLogic, ready }) => {
       vmDebuggerLogic.event.register('traceManagerStorageUpdate', (calldata, header) => {
         setStoragePanel({ calldata, header })
       })
-      vmDebuggerLogic.event.register('newTrace', () => {
-        setPanelVisibility({
-          asmCode: true,
-          stackPanel: true,
-          storagePanel: true,
-          memoryPanel: true,
-          calldataPanel: true,
-          callstackPanel: true,
-        })
+      vmDebuggerLogic.event.register('traceReturnValueUpdate', (calldata) => {
+        setReturnValuesPanel(calldata)
+      })
+      vmDebuggerLogic.event.register('traceAddressesUpdate', (calldata) => {
+        setFullStoragesChangesPanel({})
+      })
+      vmDebuggerLogic.event.register('traceStorageUpdate', (calldata) => {
+        setFullStoragesChangesPanel(calldata)
       })
-      // vmDebuggerLogic.event.register('newCallTree', () => {
-      //   setPanelVisibility({
-      //     ...panelVisibility,
-      //     solidityPanel: false
-      //   })
-      // })
       ready()
     }
   }, [vmDebuggerLogic])
@@ -68,6 +57,8 @@ export const VmDebugger = ({ vmDebuggerLogic, ready }) => {
         <StoragePanel storage={storagePanel.calldata || {}} header={storagePanel.header} />
         <CallstackPanel calldata={callStackPanel || {}} />
         <CalldataPanel calldata={calldataPanel || {}} />
+        <ReturnValuesPanel dropdownName="Return Value" calldata={returnValuesPanel || {}} />
+        <FullStoragesChangesPanel calldata={fullStoragesChangesPanel || {}} />
       </div>
     </div>
   )

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

@@ -15,12 +15,6 @@ export type ExtractFunc = (json: any, parent?: any) => ExtractData
 export interface DropdownPanelProps {
     dropdownName: string,
     dropdownMessage?: string,
-    opts: {
-        json: boolean,
-        css?: {
-            [key: string]: string
-        }
-    },
     calldata?: {
         [key: string]: string
     },