Detect scroll up and scroll down

libs/remix-ui/debugger-ui/.eslintrc

 {
   "rules": {
+    "no-case-declarations": "off",
     "array-callback-return": "warn",
     "dot-location": ["warn", "property"],
     "eqeqeq": ["warn", "smart"],

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import Slider from '../slider/slider'
 import ButtonNavigator from '../button-navigator/button-navigator'
 
-export const StepManager = ({ stepManager, stepManager: { jumpTo, traceLength, stepIntoBack, stepIntoForward, stepOverBack, stepOverForward, jumpOut, jumpNextBreakpoint, jumpPreviousBreakpoint, jumpToException, registerEvent } }) => {
+export const StepManager = ({ stepManager: { jumpTo, traceLength, stepIntoBack, stepIntoForward, stepOverBack, stepOverForward, jumpOut, jumpNextBreakpoint, jumpPreviousBreakpoint, jumpToException, registerEvent } }) => {
   const [state, setState] = useState({
     sliderValue: 0,
     revertWarning: '',

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

-import React, { useState, useRef, useEffect } from 'react'
+import React, { useState, useRef, useEffect, useReducer } from 'react'
+import { initialState, reducer } from '../../reducers/assembly-items'
 import './styles/assembly-items.css'
 
-export const AssemblyItems = ({ codeView, index }) => {
-    const [state, setState] = useState({
-        selectedItem: 0,
-        opCode: []
-    })
+export const AssemblyItems = ({ registerEvent }) => {
+    const [assemblyItems, dispatch] = useReducer(reducer, initialState)
+    const [selectedItem, setSelectedItem] = useState(0)
+    const [scrollHeight, setScrollHeight] = useState(null)
     const refs = useRef({})
     const asmItemsRef = useRef(null)
 
+    useEffect(()=>{
+        registerEvent && registerEvent('codeManagerChanged', (code, address, index) => {
+            dispatch({ type: 'FETCH_OPCODES_SUCCESS', payload: { code, address, index } })
+        })
+    }, [])
+
     useEffect(() => {
-        indexChanged(index)
-    }, [index])
+        indexChanged(assemblyItems.index)
+    }, [assemblyItems.index])
 
     useEffect(() => {
-        opCodeChanged(codeView)
-    }, [codeView])
+        if (asmItemsRef.current.scrollTop > scrollHeight) {
+            console.log('scrolling up')
+        } else if (asmItemsRef.current.scrollTop < scrollHeight) {
+            console.log('scrolling down')
+        }
+    }, [asmItemsRef.current.scrollTop])
 
-    const indexChanged = (index) => {
+    const indexChanged = (index: number) => {
         if (index < 0) return
-        const { selectedItem } = state
         let currentItem = refs.current[selectedItem] ? refs.current[selectedItem] : null
-    
+
         if (currentItem) {
             currentItem.removeAttribute('selected')
             currentItem.removeAttribute('style')
@@ -29,39 +38,31 @@ export const AssemblyItems = ({ codeView, index }) => {
                 currentItem.firstChild.removeAttribute('style')
             }
             const codeView = asmItemsRef.current
-
+    
             currentItem = codeView.children[index]
             currentItem.style.setProperty('border-color', 'var(--primary)')
             currentItem.style.setProperty('border-style', 'solid')
             currentItem.setAttribute('selected', 'selected')
             codeView.scrollTop = currentItem.offsetTop - parseInt(codeView.offsetTop)
-            setState(prevState => {
-                return {
-                    ...prevState,
-                    selectedItem: index
-                }
-            })
+            setSelectedItem(index)
         }
     }
 
-    const opCodeChanged = (codeView) => {
-        setState(prevState => {
-            return {
-                ...prevState,
-                opCode: codeView
-            }
-        })
+    const onScroll = () => {
+
     }
 
+
+
     return (
         <div className="border rounded px-1 mt-1 bg-light">
             <div className='dropdownpanel'>
                 <div className='dropdowncontent'>
-                    <div className="pl-2 my-1 small instructions" id='asmitems' ref={asmItemsRef}>
+                    <div className="pl-2 my-1 small instructions" id='asmitems' ref={asmItemsRef} onScroll={() => setScrollHeight(asmItemsRef.current.scrollTop)}>
                         {
-                            // state.opCode.map((item, i) => {
-                            //     return <div className="px-1" key={i} ref={ref => refs.current[i] = ref}><span>{item}</span></div>
-                            // })
+                            assemblyItems.display.map((item, i) => {
+                                return <div className="px-1" key={i} ref={ref => refs.current[i] = ref}><span>{item}</span></div>
+                            })
                         }
                     </div>
                 </div>

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

 import React, { useState, useEffect } from 'react'
 import AssemblyItems from './assembly-items'
 
-export const CodeListView = ({ asm }) => {
+export const CodeListView = ({ registerEvent }) => {
   const [state, setState] = useState({
     code: [],
     address: '',
@@ -9,12 +9,6 @@ export const CodeListView = ({ asm }) => {
     index: null
   })
 
-  useEffect(() => {
-    const { code, address, index } = asm
-
-    changed(code, address, index)
-  }, [asm])
-
   const indexChanged = (index) => {
     if(index < 0) return
     setState(prevState => {
@@ -41,7 +35,7 @@ export const CodeListView = ({ asm }) => {
 
   return (
     <div id='asmcodes'>
-      <AssemblyItems codeView={state.code || []} index={state.index} />
+      <AssemblyItems registerEvent={registerEvent} />
     </div>
   )
 }

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

@@ -119,8 +119,8 @@ export const VmDebuggerHead = ({ vmDebuggerHead: { registerEvent } }) => {
           <SolidityLocals data={solidityLocals.calldata} message={solidityLocals.message} />
           {/* <SolidityState calldata={solidityState.calldata} message={solidityState.message} /> */}
         </div>
-        {/* <div className="w-100"><CodeListView asm={asm} /></div>
-        <div className="w-100"><StepDetail stepDetail={stepDetail} /></div> */}
+        <div className="w-100"><CodeListView registerEvent={registerEvent} /></div>
+        {/* <div className="w-100"><StepDetail stepDetail={stepDetail} /></div> */}
       </div>
     </div>
   )

libs/remix-ui/debugger-ui/src/reducers/assembly-items.ts

+import { default as deepEqual } from 'deep-equal'
+
+interface Action {
+    type: string;
+    payload: { [key: string]: any };
+}
+
+export const initialState = {
+    opCodes: {
+      code: [],
+      index: 0,
+      address: ''
+    },
+    display: [],
+    index: 0,
+    isRequesting: false,
+    isSuccessful: false,
+    hasError: null
+}
+
+export const reducer = (state = initialState, action: Action) => {
+  switch (action.type) {
+    case 'FETCH_OPCODES_REQUEST':
+      return {
+          ...state,
+          isRequesting: true,
+          isSuccessful: false,
+          hasError: null
+      };
+    case 'FETCH_OPCODES_SUCCESS': 
+      const opCodes = action.payload.address === state.opCodes.address ? { 
+        ...state.opCodes, index: action.payload.index 
+      } : deepEqual(action.payload.code, state.opCodes.code) ? state.opCodes : action.payload
+      const display = opCodes.index > 0 ? opCodes.code.slice(opCodes.index - 1, opCodes.index + 10) : opCodes.code.slice(opCodes.index, opCodes.index + 10)
+
+      return {
+          opCodes,
+          display,
+          index: display.findIndex(code => code === opCodes.code[opCodes.index]),
+          isRequesting: false,
+          isSuccessful: true,
+          hasError: null
+      };
+    case 'FETCH_OPCODES_ERROR':
+        return {
+            ...state,
+            isRequesting: false,
+            isSuccessful: false,
+            hasError: action.payload
+        };
+    default:
+      throw new Error();
+  }
+}
\ No newline at end of file

libs/remix-ui/debugger-ui/src/reducers/calldata.ts

+interface Action {
+    type: string;
+    payload: { [key: string]: any };
+}
+
+export const initialState = {
+    calldata: {},
+    isRequesting: false,
+    isSuccessful: false,
+    hasError: null
+}
+
+export const reducer = (state = initialState, action: Action) => {
+  switch (action.type) {
+    case 'FETCH_CALLDATA_REQUEST':
+      return {
+          ...state,
+          isRequesting: true,
+          isSuccessful: false,
+          hasError: null
+      };
+    case 'FETCH_CALLDATA_SUCCESS':
+      return {
+          opCodes: action.payload,
+          isRequesting: false,
+          isSuccessful: true,
+          hasError: null
+      };
+    case 'FETCH_CALLDATA_ERROR':
+        return {
+            ...state,
+            isRequesting: false,
+            isSuccessful: false,
+            hasError: action.payload
+        };
+    default:
+      throw new Error();
+  }
+}
\ No newline at end of file