Fixed tx-browser bugs

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

@@ -61,6 +61,15 @@ class DebuggerTab extends ViewPlugin {
       toaster(yo`<div><b>Source verification plugin not activated or not available.</b> continuing <i>without</i> source code debugging.</div>`)
     })
 
+    this.renderComponent()
+
+    this.call('manager', 'activatePlugin', 'source-verification').catch(e => console.log(e.message))
+    // this.call('manager', 'activatePlugin', 'udapp')
+
+    return this.el
+  }
+
+  renderComponent () {
     ReactDOM.render(
       <DebuggerUI 
         debuggerModule={this} 
@@ -73,11 +82,6 @@ class DebuggerTab extends ViewPlugin {
         getTraceHash={this.getTraceHash}
       />
     , this.el)
-
-    this.call('manager', 'activatePlugin', 'source-verification').catch(e => console.log(e.message))
-    // this.call('manager', 'activatePlugin', 'udapp')
-
-    return this.el
   }
 
   deactivate () {
@@ -87,10 +91,12 @@ class DebuggerTab extends ViewPlugin {
 
   debug (hash) {
     this.debugHash = hash
+    this.renderComponent()
   }
 
   getTrace (hash) {
     this.getTraceHash = hash
+    this.renderComponent()
   }
 
   // debugger () {

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

@@ -69,23 +69,18 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash,
     if (removeHighlights) deleteHighlights()
   }, [removeHighlights])
 
-  const listenToEvents = (debuggerInstance) => {
+  const listenToEvents = (debuggerInstance, currentReceipt) => {
     if (!debuggerInstance) return
 
     debuggerInstance.event.register('debuggerStatus', async (isActive) => {
       await debuggerModule.call('editor', 'discardHighlight')
-      setState(prevState => {
-        return {
-          ...prevState,
-          isActive
-        }
-      })
+      setState({ ...state, isActive })
     })
 
     debuggerInstance.event.register('newSourceLocation', async (lineColumnPos, rawLocation) => {
       const contracts = await fetchContractAndCompile(
-        state.currentReceipt.contractAddress || state.currentReceipt.to,
-        state.currentReceipt)
+        currentReceipt.contractAddress || currentReceipt.to,
+        currentReceipt)
 
       if (contracts) {
         const path = contracts.getSourceName(rawLocation.file)
@@ -98,13 +93,6 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash,
     })
 
     debuggerInstance.event.register('debuggerUnloaded', () => unLoad())
-
-    setState(prevState => {
-      return {
-        ...prevState,
-        debugger: debuggerInstance
-      }
-    })
   }
 
   const requestDebug = (blockNumber, txNumber, tx) => {
@@ -142,6 +130,7 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash,
     // yo.update(this.stepManagerView, yo`<div></div>`)
     setState(prevState => {
       const { visibility } = prevState
+
       return {
         ...prevState,
         debugger: null,
@@ -176,16 +165,17 @@ 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 {
           ...prevState,
           blockNumber,
           txNumber,
           debugging: true,
-          currentReceipt
+          currentReceipt,
+          debugger: debuggerInstance
         }
       })
-      listenToEvents(debuggerInstance)
       // this.renderDebugger()
     }).catch((error) => {
       toaster(error, null, null)
@@ -202,12 +192,7 @@ const getTrace = (hash) => {
     const web3 = await getDebugWeb3()
     const currentReceipt = await web3.eth.getTransactionReceipt(hash)
 
-    setState(prevState => {
-      return {
-        ...prevState,
-        currentReceipt
-      }
-    })
+    setState({ ...state, currentReceipt })
 
     const debug = new Debugger({
       web3,
@@ -239,9 +224,9 @@ const deleteHighlights = async () => {
   return (
       <div>
         <div className="px-2">
-          <TxBrowser requestDebug={requestDebug} unloadRequested={unloadRequested} />
-          {/* <StepManager stepManager={state.debugger.step_manager} />
-          <VmDebuggerHead vmDebuggerLogic={state.debugger.vmDebuggerLogic} /> */}
+          <TxBrowser requestDebug={requestDebug} unloadRequested={unloadRequested} transactionNumber={state.txNumber} />
+          <StepManager stepManager={state.debugger ? state.debugger.step_manager : null} />
+          {/*<VmDebuggerHead vmDebuggerLogic={state.debugger.vmDebuggerLogic} /> */}
         </div>
         {/* <div className="statusMessage">{state.statusMessage}</div>
         <VmDebugger vmDebuggerLogic={state.debugger.vmDebuggerLogic} /> */}

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

@@ -25,12 +25,7 @@ export const Slider = ({ stepManager, sliderLength, sliderValue }) => {
   }, [sliderValue])
 
   const setValue = (value) => {
-    setState(prevState => {
-      return {
-        ...prevState,
-        currentValue: value
-      }
-    })
+    setState({ ...state, currentValue: value })
   }
 
   const handleChange = (e) => {
@@ -56,7 +51,7 @@ export const Slider = ({ stepManager, sliderLength, sliderValue }) => {
             type='range'
             min={0}
             max={state.max}
-            value={state.currentValue}
+            defaultValue={state.currentValue}
             onChange={handleChange}
             disabled={state.disabled}
         />

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

@@ -1,14 +1,21 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import './tx-browser.css'
-import EventManager from '../../../../../../apps/remix-ide/src/lib/events'
 
-export const TxBrowser = ({ requestDebug, unloadRequested }) => {
-  const event = new EventManager()
+export const TxBrowser = ({ requestDebug, unloadRequested, transactionNumber }) => {
   const [state, setState] = useState({
     txNumber: undefined,
     debugging: false
   })
 
+  useEffect(() => {
+    setState(prevState => {
+      return {
+        ...prevState,
+        txNumber: transactionNumber
+      }
+    })
+  }, [transactionNumber])
+
   const handleSubmit = () => {
     if (state.debugging) {
       unload()