Make slider dependencies independent

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

@@ -151,6 +151,7 @@ class InternalCallTree {
 
 async function buildTree (tree, step, scopeId, isExternalCall, isCreation) {
   let subScope = 1
+  
   tree.scopeStarts[step] = scopeId
   tree.scopes[scopeId] = { firstStep: step, locals: {}, isCreation }
 

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

@@ -9,6 +9,7 @@ import globalRegistry from '../../../../../apps/remix-ide/src/global/registry'
 import './debugger-ui.css'
 
 export const DebuggerUI = ({ debuggerModule }) => {
+  console.log('debuggerModule: ', debuggerModule)
   const init = remixDebug.init
   const [state, setState] = useState({
     isActive: false,

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

@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from 'react'
 
-export const Slider = ({ stepManager, sliderValue }) => {
+export const Slider = ({ jumpTo, sliderValue, traceLength }) => {
+  console.log('slider: >--+>')
   const [state, setState] = useState({
-    currentValue: ''
+    currentValue: 0
   })
 
   useEffect(() => {
@@ -14,7 +15,7 @@ export const Slider = ({ stepManager, sliderValue }) => {
     setState(prevState => {
       return { ...prevState, currentValue: value }
     })
-    stepManager && stepManager.jumpTo(value)
+    jumpTo && jumpTo(value)
   }
 
   const handleChange = (e) => {
@@ -30,10 +31,10 @@ export const Slider = ({ stepManager, sliderValue }) => {
             className='w-100 my-0'
             type='range'
             min={0}
-            max={stepManager ? stepManager.traceLength - 1 : 0}
+            max={traceLength ? traceLength - 1 : 0}
             value={state.currentValue}
             onChange={handleChange}
-            disabled={stepManager ? stepManager.traceLength === 0 : true}
+            disabled={traceLength ? traceLength === 0 : true}
         />
     </div>
   )

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

@@ -30,10 +30,12 @@ export const StepManager = ({ stepManager }) => {
   }
 
   const { sliderValue, revertWarning, stepState, jumpOutDisabled } = state
+  const jumpTo = stepManager ? stepManager.jumpTo.bind(stepManager) : null
+  const traceLength = stepManager ? stepManager.traceLength : null
 
   return (
     <div className="py-1">
-      <Slider stepManager={stepManager} sliderValue={sliderValue} />
+      <Slider jumpTo={jumpTo} sliderValue={sliderValue} traceLength={traceLength} />
       <ButtonNavigator stepManager={stepManager} revertedReason={revertWarning} stepState={stepState} jumpOutDisabled={jumpOutDisabled} />
     </div>
   )