Extract button navigator dependencies

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

 import React, { useState, useEffect } from 'react'
 import './button-navigator.css'
 
-export const ButtonNavigation = ({ stepManager, revertedReason, stepState, jumpOutDisabled }) => {
+export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward, stepOverForward, jumpOut, jumpPreviousBreakpoint, jumpNextBreakpoint, jumpToException, revertedReason, stepState, jumpOutDisabled }) => {
   const [state, setState] = useState({
     intoBackDisabled: true,
     overBackDisabled: true,
@@ -53,19 +53,19 @@ export const ButtonNavigation = ({ stepManager, revertedReason, stepState, jumpO
   return (
     <div className="buttons">
       <div className="stepButtons btn-group py-1">
-        <button id='overback' className='btn btn-primary btn-sm navigator stepButton fas fa-reply' title='Step over back' onClick={() => { stepManager.stepOverBack() }} disabled={state.overBackDisabled} ></button>
-        <button id='intoback' data-id="buttonNavigatorIntoBack" className='btn btn-primary btn-sm navigator stepButton fas fa-level-up-alt' title='Step back' onClick={() => { stepManager.stepIntoBack() }} disabled={state.intoBackDisabled}></button>
-        <button id='intoforward' data-id="buttonNavigatorIntoForward" className='btn btn-primary btn-sm navigator stepButton fas fa-level-down-alt' title='Step into' onClick={() => { stepManager.stepIntoForward() }} disabled={state.intoForwardDisabled}></button>
-        <button id='overforward' className='btn btn-primary btn-sm navigator stepButton fas fa-share' title='Step over forward' onClick={() => { stepManager.stepOverForward() }} disabled={state.overForwardDisabled}></button>
+        <button id='overback' className='btn btn-primary btn-sm navigator stepButton fas fa-reply' title='Step over back' onClick={() => { stepOverBack && stepOverBack() }} disabled={state.overBackDisabled} ></button>
+        <button id='intoback' data-id="buttonNavigatorIntoBack" className='btn btn-primary btn-sm navigator stepButton fas fa-level-up-alt' title='Step back' onClick={() => { stepIntoBack && stepIntoBack() }} disabled={state.intoBackDisabled}></button>
+        <button id='intoforward' data-id="buttonNavigatorIntoForward" className='btn btn-primary btn-sm navigator stepButton fas fa-level-down-alt' title='Step into' onClick={() => { stepIntoForward && stepIntoForward() }} disabled={state.intoForwardDisabled}></button>
+        <button id='overforward' className='btn btn-primary btn-sm navigator stepButton fas fa-share' title='Step over forward' onClick={() => { stepOverForward && stepOverForward() }} disabled={state.overForwardDisabled}></button>
       </div>
 
       <div className="jumpButtons btn-group py-1">
-        <button className='btn btn-primary btn-sm navigator jumpButton fas fa-step-backward'  id='jumppreviousbreakpoint' data-id="buttonNavigatorJumpPreviousBreakpoint" title='Jump to the previous breakpoint' onClick={() => { stepManager.jumpPreviousBreakpoint() }} disabled={state.jumpPreviousBreakpointDisabled}></button>
-        <button className='btn btn-primary btn-sm navigator jumpButton fas fa-eject' id='jumpout' title='Jump out' onClick={() => { stepManager.jumpOut() }} disabled={state.jumpOutDisabled}></button>
-        <button className='btn btn-primary btn-sm navigator jumpButton fas fa-step-forward' id='jumpnextbreakpoint' data-id="buttonNavigatorJumpNextBreakpoint" title='Jump to the next breakpoint' onClick={() => { stepManager.jumpNextBreakpoint() }} disabled={state.jumpNextBreakpointDisabled}></button>
+        <button className='btn btn-primary btn-sm navigator jumpButton fas fa-step-backward'  id='jumppreviousbreakpoint' data-id="buttonNavigatorJumpPreviousBreakpoint" title='Jump to the previous breakpoint' onClick={() => { jumpPreviousBreakpoint && jumpPreviousBreakpoint() }} disabled={state.jumpPreviousBreakpointDisabled}></button>
+        <button className='btn btn-primary btn-sm navigator jumpButton fas fa-eject' id='jumpout' title='Jump out' onClick={() => { jumpOut && jumpOut() }} disabled={state.jumpOutDisabled}></button>
+        <button className='btn btn-primary btn-sm navigator jumpButton fas fa-step-forward' id='jumpnextbreakpoint' data-id="buttonNavigatorJumpNextBreakpoint" title='Jump to the next breakpoint' onClick={() => { jumpNextBreakpoint && jumpNextBreakpoint() }} disabled={state.jumpNextBreakpointDisabled}></button>
       </div>
       <div id='reverted' style={{ display: revertedReason === '' ? 'none' : 'block' }}>
-        <button id='jumptoexception' title='Jump to exception' className='btn btn-danger btn-sm navigator button fas fa-exclamation-triangle' onClick={() => { stepManager.jumpToException() }} disabled={state.jumpOutDisabled}>
+        <button id='jumptoexception' title='Jump to exception' className='btn btn-danger btn-sm navigator button fas fa-exclamation-triangle' onClick={() => { jumpToException && jumpToException() }} disabled={state.jumpOutDisabled}>
         </button>
         <span>State changes made during this call will be reverted.</span>
         <span id='outofgas' style={{ display: revertedReason === 'outofgas' ? 'inline' : 'none' }}>This call will run out of gas.</span>

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

@@ -3,6 +3,19 @@ import Slider from '../slider/slider'
 import ButtonNavigator from '../button-navigator/button-navigator'
 
 export const StepManager = ({ stepManager }) => {
+  const { jumpTo, traceLength, stepOverBack, stepIntoBack, stepIntoForward, stepOverForward, jumpOut, jumpPreviousBreakpoint, jumpNextBreakpoint, jumpToException } = stepManager
+  
+  if (stepManager) {
+    jumpTo.bind(stepManager)
+    stepOverBack.bind(stepManager)
+    stepIntoBack.bind(stepManager)
+    stepIntoForward.bind(stepManager)
+    stepOverForward.bind(stepManager)
+    jumpOut.bind(stepManager)
+    jumpPreviousBreakpoint.bind(stepManager)
+    jumpNextBreakpoint.bind(stepManager)
+    jumpToException.bind(stepManager)
+  }
   const [state, setState] = useState({
     sliderValue: 0,
     revertWarning: '',
@@ -28,15 +41,24 @@ export const StepManager = ({ stepManager }) => {
       return { ...prevState, sliderValue: step, stepState, jumpOutDisabled }
     })
   }
-
   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 jumpTo={jumpTo} sliderValue={sliderValue} traceLength={traceLength} />
-      <ButtonNavigator stepManager={stepManager} revertedReason={revertWarning} stepState={stepState} jumpOutDisabled={jumpOutDisabled} />
+      <ButtonNavigator 
+        stepIntoBack={stepIntoBack}
+        stepIntoForward={stepIntoForward}
+        stepOverBack={stepOverBack}
+        stepOverForward={stepOverForward}
+        revertedReason={revertWarning}
+        stepState={stepState}
+        jumpOutDisabled={jumpOutDisabled}
+        jumpOut={jumpOut}
+        jumpNextBreakpoint={jumpNextBreakpoint}
+        jumpPreviousBreakpoint={jumpPreviousBreakpoint}
+        jumpToException={jumpToException}
+      />
     </div>
   )
 }