Refactor debugger-ui props

apps/remix-ide/src/app/tabs/debugger-tab.js

 const yo = require('yo-yo')
-const remixDebug = require('@remix-project/remix-debug')
 const css = require('./styles/debugger-tab-styles')
 import toaster from '../ui/tooltip'
 import { DebuggerUI } from '@remix-ui/debugger-ui'
@@ -71,16 +70,7 @@ class DebuggerTab extends ViewPlugin {
 
   renderComponent () {
     ReactDOM.render(
-      <DebuggerUI 
-        debuggerModule={this} 
-        fetchContractAndCompile={(address, receipt) => {
-          const target = (address && remixDebug.traceHelper.isContractCreation(address)) ? receipt.contractAddress : address
-
-          return this.call('fetchAndCompile', 'resolve', target || receipt.contractAddress || receipt.to, '.debug', this.blockchain.web3())
-        }}
-        debugHash={this.debugHash}
-        getTraceHash={this.getTraceHash}
-      />
+      <DebuggerUI debuggerModule={this} />
     , this.el)
   }
 

libs/remix-debug/src/solidity-decoder/internalCallTree.js

@@ -163,11 +163,11 @@ async function buildTree (tree, step, scopeId, isExternalCall, isCreation) {
 
   function includedSource (source, included) {
     return (included.start !== -1 &&
-        included.length !== -1 &&
-        included.file !== -1 &&
-        included.start >= source.start &&
-        included.start + included.length <= source.start + source.length &&
-        included.file === source.file)
+      included.length !== -1 &&
+      included.file !== -1 &&
+      included.start >= source.start &&
+      included.start + included.length <= source.start + source.length &&
+      included.file === source.file)
   }
 
   let currentSourceLocation = { start: -1, length: -1, file: -1 }

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

@@ -13,7 +13,6 @@ export const ButtonNavigation = ({ stepManager, revertedReason, stepState, jumpO
   })
 
   useEffect(() => {
-    console.log('perfomanceCheck <=> stepChanged')
     stepChanged(stepState, jumpOutDisabled)
   }, [stepState, jumpOutDisabled])
 

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

@@ -8,7 +8,7 @@ import remixDebug, { TransactionDebugger as Debugger } from '@remix-project/remi
 import globalRegistry from '../../../../../apps/remix-ide/src/global/registry'
 import './debugger-ui.css'
 
-export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash, getTraceHash, removeHighlights }) => {
+export const DebuggerUI = ({ debuggerModule }) => {
   const init = remixDebug.init
   const [state, setState] = useState({
     isActive: false,
@@ -28,7 +28,6 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash,
   })
 
   useEffect(() => {
-    console.log('perfomanceCheck <=> setEditor')
     const setEditor = () => {
       const editor = globalRegistry.get('editor').api
 
@@ -50,19 +49,22 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash,
   }, [])
 
   useEffect(() => {
-    console.log('perfomanceCheck <=> debug')
-    debug(debugHash)
-  }, [debugHash])
+    debug(debuggerModule.debugHash)
+  }, [debuggerModule.debugHash])
 
   useEffect(() => {
-    console.log('perfomanceCheck <=> getTrace')
-    getTrace(getTraceHash)
-  }, [getTraceHash])
+    getTrace(debuggerModule.getTraceHash)
+  }, [debuggerModule.getTraceHash])
 
   useEffect(() => {
-    console.log('perfomanceCheck <=> deleteHighlights')
-    if (removeHighlights) deleteHighlights()
-  }, [removeHighlights])
+    if (debuggerModule.removeHighlights) deleteHighlights()
+  }, [debuggerModule.removeHighlights])
+
+  const fetchContractAndCompile = (address, receipt) => {
+    const target = (address && remixDebug.traceHelper.isContractCreation(address)) ? receipt.contractAddress : address
+
+    return debuggerModule.call('fetchAndCompile', 'resolve', target || receipt.contractAddress || receipt.to, '.debug', debuggerModule.blockchain.web3())
+  }
 
   const listenToEvents = (debuggerInstance, currentReceipt) => {
     if (!debuggerInstance) return
@@ -144,6 +146,7 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash,
 
   const startDebugging = async (blockNumber, txNumber, tx) => {
     if (state.debugger) unLoad()
+    if (!txNumber) return
     const web3 = await getDebugWeb3()
     const currentReceipt = await web3.eth.getTransactionReceipt(txNumber)
     const debuggerInstance = new Debugger({

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

@@ -6,7 +6,6 @@ export const Slider = ({ stepManager, sliderValue }) => {
   })
 
   useEffect(() => {
-    console.log('perfomanceCheck <=> sliderValue')
     setValue(sliderValue)
   }, [sliderValue])
 

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

@@ -11,7 +11,6 @@ export const StepManager = ({ stepManager }) => {
   })
 
   useEffect(() => {
-    console.log('perfomanceCheck <=> setRevertWarning/updateStep')
     if (stepManager) {
       stepManager.event.register('revertWarning', setRevertWarning)
       stepManager.event.register('stepChanged', updateStep)

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

@@ -7,7 +7,6 @@ export const TxBrowser = ({ requestDebug, unloadRequested, transactionNumber, de
   })
 
   useEffect(() => {
-    console.log('perfomanceCheck <=> transactionNumber')
     setState(prevState => {
       return {
         ...prevState,

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

@@ -9,7 +9,6 @@ export const AssemblyItems = ({ codeView, index }) => {
     const asmItemsRef = useRef(null)
 
     useEffect(() => {
-        console.log('perfomanceCheck <=> indexChanged')
         indexChanged(index)
     }, [index])
 

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

@@ -10,7 +10,6 @@ export const CodeListView = ({ asm }) => {
   })
 
   useEffect(() => {
-    console.log('perfomanceCheck <=> changed')
     const { code, address, index } = asm
 
     changed(code, address, index)

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

@@ -30,17 +30,14 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
     })
 
     useEffect(() => {
-        console.log('perfomanceCheck <=> update')
         update(calldata)
     }, [calldata])
 
     useEffect(() => {
-        console.log('perfomanceCheck <=> message')
         message(dropdownMessage)
     }, [dropdownMessage])
 
     useEffect(() => {
-        console.log('perfomanceCheck <=> setLoading')
         if (loading && !state.updating) setLoading()
     }, [loading])
 

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

@@ -30,6 +30,7 @@ export const VmDebuggerHead = ({ vmDebuggerLogic, ready }) => {
   })
 
   useEffect(() => {
+    console.log('vmDebuggerLogicHead: ', vmDebuggerLogic)
     if (vmDebuggerLogic) {
       vmDebuggerLogic.event.register('codeManagerChanged', (code, address, index) => {
         setAsm(() => {
@@ -42,13 +43,11 @@ export const VmDebuggerHead = ({ vmDebuggerLogic, ready }) => {
         })
       })
       vmDebuggerLogic.event.register('functionsStackUpdate', (stack) => {
-        if (stack === null) return
+        if (stack === null || stack.length === 0) return
         const functions = []
     
         for (const func of stack) {
-          const functionDefinitionName = func.functionDefinition.name || func.functionDefinition.attributes.name
-
-          functions.push(functionDefinitionName + '(' + func.inputs.join(', ') + ')')
+          functions.push(func.functionDefinition.name + '(' + func.inputs.join(', ') + ')')
         }
         setFunctionPanel(() => functions)
       })

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

@@ -20,6 +20,7 @@ export const VmDebugger = ({ vmDebuggerLogic, ready }) => {
   const [fullStoragesChangesPanel, setFullStoragesChangesPanel] = useState(null)
 
   useEffect(() => {
+    console.log('vmDebuggerLogic: ', vmDebuggerLogic)
     if (vmDebuggerLogic) {
       vmDebuggerLogic.event.register('traceManagerCallDataUpdate', (calldata) => {
         setCalldataPanel(() => calldata)