show local variable value in the editor context

apps/debugger/src/app/debugger-api.ts

@@ -6,6 +6,7 @@ import { lineText } from '@remix-ui/editor'
 export const DebuggerApiMixin = (Base) => class extends Base {
 
   initialWeb3
+  debuggerBackend
 
   initDebuggerApi () {
     const self = this
@@ -148,7 +149,11 @@ export const DebuggerApiMixin = (Base) => class extends Base {
     if (web3) this._web3 = web3
     else this._web3 = this.initialWeb3
     remixDebug.init.extendWeb3(this._web3)
-    if (this.onDebugRequestedListener) this.onDebugRequestedListener(hash, web3)
+    if (this.onDebugRequestedListener) {
+      this.onDebugRequestedListener(hash, web3).then((debuggerBackend) => {
+        this.debuggerBackend = debuggerBackend
+      })
+    }
   }
 
   onActivation () {

apps/remix-ide/src/app/tabs/debugger-tab.js

@@ -10,7 +10,7 @@ const css = require('./styles/debugger-tab-styles')
 const profile = {
   name: 'debugger',
   displayName: 'Debugger',
-  methods: ['debug', 'getTrace'],
+  methods: ['debug', 'getTrace', 'decodeVariable'],
   events: [],
   icon: 'assets/img/debuggerLogo.webp',
   description: 'Debug transactions',
@@ -66,4 +66,8 @@ export class DebuggerTab extends DebuggerApiMixin(ViewPlugin) {
     }
   }
 
+  async decodeVariable (variableId) {
+    if (!this.debuggerBackend) return null
+    return await this.debuggerBackend.debugger.decodeLocalVariableByIdAtCurrentStep(this.debuggerBackend.step_manager.currentStepIndex, variableId)
+  }
 }

libs/remix-debug/src/Ethdebugger.ts

@@ -100,6 +100,17 @@ export class Ethdebugger {
     return this.callTree.findScope(step)
   }
 
+  async decodeLocalVariableByIdAtCurrentStep (step: number, id: number) {
+    const variable = this.callTree.getLocalVariableById(id)
+    if (!variable) return null
+    const stack = this.traceManager.getStackAt(step)
+    const memory = this.traceManager.getMemoryAt(step)
+    const address = this.traceManager.getCurrentCalledAddressAt(step)
+    const calldata = this.traceManager.getCallDataAt(step)
+    const storageViewer = new StorageViewer({ stepIndex: step, tx: this.tx, address: address }, this.storageResolver, this.traceManager)
+    return await variable.type.decodeFromStack(variable.stackDepth, stack, memory, storageViewer, calldata, null, variable)
+  }
+
   async decodeLocalsAt (step, sourceLocation, callback) {
     try {
       const stack = this.traceManager.getStackAt(step)

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

@@ -46,6 +46,9 @@ export class InternalCallTree {
   pendingConstructorId: number
   pendingConstructor
   constructorsStartExecution
+  variables: {
+    [Key: number]: any
+  }
 
   /**
     * constructor
@@ -122,6 +125,7 @@ export class InternalCallTree {
     this.pendingConstructorId = -1
     this.constructorsStartExecution = {}
     this.pendingConstructor = null
+    this.variables = {}
   }
 
   /**
@@ -203,6 +207,10 @@ export class InternalCallTree {
     }
     throw new Error('Could not find gas cost per line')
   }
+  
+  getLocalVariableById (id: number) {
+    return this.variables[id]
+  }
 }
 
 async function buildTree (tree, step, scopeId, isCreation, functionDefinition?, contractObj?, sourceLocation?, validSourceLocation?) {
@@ -407,12 +415,14 @@ async function includeVariableDeclaration (tree, step, sourceLocation, scopeId,
             let location = extractLocationFromAstVariable(variableDeclaration)
             location = location === 'default' ? 'storage' : location
             // we push the new local variable in our tree
-            tree.scopes[scopeId].locals[variableDeclaration.name] = {
+            const newVar = {
               name: variableDeclaration.name,
               type: parseType(variableDeclaration.typeDescriptions.typeString, states, contractObj.name, location),
               stackDepth: stack.length,
               sourceLocation: sourceLocation
             }
+            tree.scopes[scopeId].locals[variableDeclaration.name] = newVar
+            tree.variables[variableDeclaration.id] = newVar
           }
         } catch (error) {
           console.log(error)

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

@@ -63,7 +63,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
   }, [])
 
   debuggerModule.onDebugRequested((hash, web3?) => {
-    if (hash) debug(hash, web3)
+    if (hash) return debug(hash, web3)
   })
 
   debuggerModule.onRemoveHighlights(async () => {
@@ -314,6 +314,8 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
       }
     }, 300)
     handleResize()
+
+    return debuggerInstance
   }
 
   const debug = (txHash, web3?) => {
@@ -325,7 +327,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
         sourceLocationStatus: ''
       }
     })
-    startDebugging(null, txHash, null, web3)
+    return startDebugging(null, txHash, null, web3)
   }
 
   const stepManager = {

libs/remix-ui/editor/src/lib/providers/hoverProvider.ts

@@ -145,6 +145,15 @@ export class RemixHoverProvider implements languages.HoverProvider {
             getLinks(nodeAtPosition)
             getDocs(nodeAtPosition)
             // getScope(nodeAtPosition)
+
+            try {
+                const decodedVar = await this.props.plugin.call('debugger', 'decodeVariable', nodeAtPosition.id)
+                if (decodedVar !== null) {
+                    contents.push({
+                        value: JSON.stringify(decodedVar.value, null, '\t')
+                    })
+                }
+            } catch (e) {}
         }
 
         setTimeout(() => {