From d6a353f3551a0010a819f55704ff39a708a30001 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Mon, 19 Oct 2020 15:56:05 +0100
Subject: [PATCH] Make slider dependencies independent

---
 .../src/solidity-decoder/internalCallTree.js          |  1 +
 libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx     |  1 +
 libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx   | 11 ++++++-----
 .../debugger-ui/src/lib/step-manager/step-manager.tsx |  4 +++-
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/libs/remix-debug/src/solidity-decoder/internalCallTree.js b/libs/remix-debug/src/solidity-decoder/internalCallTree.js
index 9053caaf32..8095cd9371 100644
--- a/libs/remix-debug/src/solidity-decoder/internalCallTree.js
+++ b/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 }
 
diff --git a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
index 84f883ffa2..f6fbc696c4 100644
--- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
+++ b/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,
diff --git a/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx b/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx
index 8ce1ac31c6..ece4320513 100644
--- a/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx
+++ b/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>
   )
diff --git a/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx b/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx
index 63d517ee53..4745b03b22 100644
--- a/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx
+++ b/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>
   )