Load more

libs/remix-debug/src/solidity-decoder/types/ArrayType.js

@@ -83,13 +83,13 @@ class ArrayType extends RefType {
     if (isNaN(length)) {
       return {
         value: '<decoding failed - length is NaN>',
-        type: this.typeName
+        type: 'Error'
       }
     }
     if (!skip) skip = 0
     if (skip) offset = offset + (32 * skip)
     let limit = length - skip
-    if (limit > 100) limit = 100
+    if (limit > 10) limit = 10
     for (var k = 0; k < limit; k++) {
       var contentOffset = offset
       ret.push(this.underlyingType.decodeFromMemory(contentOffset, memory))

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

@@ -1,5 +1,6 @@
 {
   "rules": {
+    "@typescript-eslint/ban-types": "off",
     "no-case-declarations": "off",
     "array-callback-return": "warn",
     "dot-location": ["warn", "property"],

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

@@ -248,7 +248,8 @@ const stepManager = {
   registerEvent: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.event.register.bind(state.debugger.step_manager.event) : null,
 }
 const vmDebugger = {
-  registerEvent: state.debugger && state.debugger.vmDebuggerLogic ? state.debugger.vmDebuggerLogic.event.register.bind(state.debugger.vmDebuggerLogic.event) : null
+  registerEvent: state.debugger && state.debugger.vmDebuggerLogic ? state.debugger.vmDebuggerLogic.event.register.bind(state.debugger.vmDebuggerLogic.event) : null,
+  triggerEvent: state.debugger && state.debugger.vmDebuggerLogic ? state.debugger.vmDebuggerLogic.event.trigger.bind(state.debugger.vmDebuggerLogic.event) : null
 }
 
   return (

libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx

@@ -6,7 +6,7 @@ import { default as deepequal } from 'deep-equal'
 import './styles/dropdown-panel.css'
 
 export const DropdownPanel = (props: DropdownPanelProps) => {
-    const { dropdownName, dropdownMessage, calldata, header, loading, extractFunc, formatSelfFunc } = props
+    const { dropdownName, dropdownMessage, calldata, header, loading, extractFunc, formatSelfFunc, loadMore } = props
     const extractDataDefault: ExtractFunc = (item, parent?) => {
         const ret: ExtractData = {}
 
@@ -157,14 +157,15 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
 
         if (children && children.length > 0 ) {
             return (
-                <TreeViewItem id={`treeViewItem${key}`} key={keyPath} label={ formatSelfFunc ? formatSelfFunc(key, data) : formatSelfDefault(key, data) } handleClick={() => handleExpand(keyPath)} expand={state.expandPath.includes(keyPath)}>
+                <TreeViewItem id={`treeViewItem${key}`} key={keyPath} label={ formatSelfFunc ? formatSelfFunc(key, data) : formatSelfDefault(key, data) } onClick={() => handleExpand(keyPath)} expand={state.expandPath.includes(keyPath)}>
                     <TreeView id={`treeView${key}`} key={keyPath}>
                         { children }
+                        { data.hasNext && <TreeViewItem id={`treeViewLoadMore`} className="cursor_pointer" label="Load more" onClick={() => { loadMore(data.cursor) }} /> }
                     </TreeView>
                 </TreeViewItem>
             )
         } else {
-            return <TreeViewItem id={key.toString()} key={keyPath} label={ formatSelfFunc ? formatSelfFunc(key, data) : formatSelfDefault(key, data) } handleClick={() => handleExpand(keyPath)} expand={state.expandPath.includes(keyPath)} />
+            return <TreeViewItem id={key.toString()} key={keyPath} label={ formatSelfFunc ? formatSelfFunc(key, data) : formatSelfDefault(key, data) } onClick={() => handleExpand(keyPath)} expand={state.expandPath.includes(keyPath)} />
         }
     }
 

libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx

@@ -2,15 +2,18 @@ import React, { useState, useEffect } from 'react'
 import DropdownPanel from './dropdown-panel'
 import { extractData } from '../../utils/solidityTypeFormatter'
 import { ExtractData } from '../../types'
-import { default as deepequal } from 'deep-equal'
 
-export const SolidityLocals = ({ data, message }) => {
+export const SolidityLocals = ({ data, updatedData, message, triggerEvent }) => {
     const [calldata, setCalldata] = useState(null)
 
     useEffect(() => {
-        if (!deepequal(calldata, data)) setCalldata(data)
+        data && setCalldata(data)
     }, [data])
 
+    useEffect(() => {
+        updatedData && mergeLocals(updatedData, calldata)
+    }, [updatedData])
+
     const formatSelf = (key: string, data: ExtractData) => {
         let color = 'var(--primary)'
         if (data.isArray || data.isStruct || data.isMapping) {
@@ -43,9 +46,32 @@ export const SolidityLocals = ({ data, message }) => {
         )
     }
 
+    const mergeLocals = (locals1, locals2) => {
+        Object.keys(locals2).map(item => {
+          if (locals2[item].cursor && (parseInt(locals2[item].cursor) < parseInt(locals1[item].cursor))) {
+            locals2[item] = {
+              ...locals1[item],
+              value: [...locals2[item].value, ...locals1[item].value]
+            }
+          }
+        })
+        setCalldata(() => locals2)
+    }
+
+    const loadMore = (cursor) => {
+        triggerEvent('solidityLocalsLoadMore', [cursor])
+    }
+
     return (
         <div id='soliditylocals' data-id="solidityLocals">
-            <DropdownPanel dropdownName='Solidity Locals' calldata={calldata || {}}  extractFunc={extractData} formatSelfFunc={formatSelf} />
+            <DropdownPanel 
+                dropdownName='Solidity Locals'
+                dropdownMessage={message}
+                calldata={calldata || {}}
+                extractFunc={extractData}
+                formatSelfFunc={formatSelf}
+                loadMore={loadMore}
+            />
         </div>
     )
 }

libs/remix-ui/debugger-ui/src/lib/vm-debugger/styles/dropdown-panel.css

@@ -33,6 +33,9 @@
     margin-top: 4px; 
     animation: spin 2s linear infinite;
   }
+  .cursor_pointer {
+    cursor: pointer;
+  }
   @-moz-keyframes spin {
     to { -moz-transform: rotate(359deg); }
   }

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

@@ -5,12 +5,7 @@ import StepDetail from './step-detail'
 import SolidityState from './solidity-state'
 import SolidityLocals from './solidity-locals'
 
-export const VmDebuggerHead = ({ vmDebugger: { registerEvent } }) => {
-  const [asm, setAsm] = useState({
-    code: null,
-    address: null,
-    index: null
-  })
+export const VmDebuggerHead = ({ vmDebugger: { registerEvent, triggerEvent } }) => {
   const [functionPanel, setFunctionPanel] = useState(null)
   const [stepDetail, setStepDetail] = useState({
     'vm trace step': '-',
@@ -28,18 +23,9 @@ export const VmDebuggerHead = ({ vmDebugger: { registerEvent } }) => {
     calldata: null,
     message: null,
   })
+  const [updatedSolidityLocals, setUpdatedSolidityLocals] = useState(null)
 
   useEffect(() => {
-    registerEvent && registerEvent('codeManagerChanged', (code, address, index) => {
-      setAsm(() => {
-        return { code, address, index }
-      })
-    })
-    registerEvent && registerEvent('traceUnloaded', () => {
-      setAsm(() => {
-        return { code: [], address: '', index: -1 }
-      })
-    })
     registerEvent && registerEvent('functionsStackUpdate', (stack) => {
       if (stack === null || stack.length === 0) return
       const functions = []
@@ -100,6 +86,7 @@ export const VmDebuggerHead = ({ vmDebugger: { registerEvent } }) => {
       })
     })
     registerEvent && registerEvent('solidityLocals', (calldata) => {
+      console.log('solidityLocals: ', calldata)
       setSolidityLocals(() => {
         return { ...solidityLocals, calldata }
       })
@@ -109,6 +96,9 @@ export const VmDebuggerHead = ({ vmDebugger: { registerEvent } }) => {
         return { ...solidityLocals, message }
       })
     })
+    registerEvent && registerEvent('solidityLocalsLoadMoreCompleted', (updatedCalldata) => {
+      setUpdatedSolidityLocals(() => updatedCalldata)
+    })
   }, [registerEvent])
 
   return (
@@ -116,7 +106,7 @@ export const VmDebuggerHead = ({ vmDebugger: { registerEvent } }) => {
       <div className="d-flex flex-column">
         <div className="w-100">
           <FunctionPanel data={functionPanel} />
-          <SolidityLocals data={solidityLocals.calldata} message={solidityLocals.message} />
+          <SolidityLocals data={solidityLocals.calldata} updatedData={updatedSolidityLocals} message={solidityLocals.message} triggerEvent={triggerEvent} />
           <SolidityState calldata={solidityState.calldata} message={solidityState.message} />
         </div>
         <div className="w-100"><CodeListView registerEvent={registerEvent} /></div>

libs/remix-ui/debugger-ui/src/types/index.ts

@@ -7,7 +7,9 @@ export interface ExtractData {
     isStruct?: boolean,
     isMapping?: boolean,
     type?: string,
-    isProperty?: boolean
+    isProperty?: boolean,
+    hasNext?: boolean,
+    cursor?: number
 }
 
 export type ExtractFunc = (json: any, parent?: any) => ExtractData
@@ -21,7 +23,8 @@ export interface DropdownPanelProps {
     header?: string,
     loading?: boolean
     extractFunc?: ExtractFunc,
-    formatSelfFunc?: FormatSelfFunc
+    formatSelfFunc?: FormatSelfFunc,
+    loadMore?: Function
 }
 
 export type FormatSelfFunc = (key: string | number, data: ExtractData) => JSX.Element

libs/remix-ui/debugger-ui/src/utils/solidityTypeFormatter.ts

@@ -21,6 +21,8 @@ export function extractData (item, parent): ExtractData {
       })
       ret.isArray = true
       ret.self = parent.isArray ? '' : item.type
+      ret.cursor = item.cursor
+      ret.hasNext = item.hasNext
     } else if (item.type.indexOf('struct') === 0) {
       ret.children = Object.keys((item.value || {})).map(function (key) {
         return {key: key, value: item.value[key]}

libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx

@@ -4,7 +4,7 @@ import { TreeViewItemProps } from '../../types'
 import './tree-view-item.css'
 
 export const TreeViewItem = (props: TreeViewItemProps) => {
-  const { id, children, label, expand, handleClick, ...otherProps } = props
+  const { id, children, label, expand, ...otherProps } = props
   const [isExpanded, setIsExpanded] = useState(false)
 
   useEffect(() => {
@@ -12,7 +12,7 @@ export const TreeViewItem = (props: TreeViewItemProps) => {
   }, [expand])
 
   return (
-    <li key={`treeViewLi${id}`} data-id={`treeViewLi${id}`} className='li_tv' onClick={handleClick} {...otherProps}>
+    <li key={`treeViewLi${id}`} data-id={`treeViewLi${id}`} className='li_tv' {...otherProps}>
       <div key={`treeViewDiv${id}`} data-id={`treeViewDiv${id}`} className='d-flex flex-row align-items-center' onClick={() => setIsExpanded(!isExpanded)}>
         <div className={isExpanded ? 'px-1 fas fa-caret-down caret caret_tv' : 'px-1 fas fa-caret-right caret caret_tv'}  style={{ visibility: children ? 'visible' : 'hidden' }}></div>
         <span className='w-100 pl-1'>

libs/remix-ui/tree-view/src/types/index.ts

@@ -8,5 +8,6 @@ export interface TreeViewItemProps {
     id: string,
     label: string | number | React.ReactNode,
     expand?: boolean,
-    handleClick?: (e) => void
+    onClick?: VoidFunction,
+    className?: string
 }