force using local node

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

@@ -16,6 +16,7 @@ export const DebuggerApiMixin = (Base) => class extends Base {
       }
     }
     this._web3 = new Web3(this.web3Provider)
+    remixDebug.init.extendWeb3(this._web3)
 
     this.offsetToLineColumnConverter = {
       async offsetToLineColumn (rawLocation, file, sources, asts) {

apps/debugger/src/app/debugger.ts

@@ -23,6 +23,7 @@ export class DebuggerClientApi extends DebuggerApiMixin(PluginClient) {
   fetchContractAndCompile: (address: string, currentReceipt: TransactionReceipt) => Promise<CompilerAbstract>
   getFile: (path: string) => Promise<string>
   setFile: (path: string, content: string) => Promise<void>
-  getDebugWeb3: () => any // returns an instance of web3.js  
+  getDebugWeb3: () => any // returns an instance of web3.js, if applicable (mainet, goerli, ...) it returns a reference to a node from devops (so we are sure debug endpoint is available)
+  web3: () => any // returns an instance of web3.js
 }
 

libs/remix-debug/src/Ethdebugger.ts

@@ -33,7 +33,6 @@ export class Ethdebugger {
   storageResolver
   callTree
   breakpointManager
-  statusMessage
 
   constructor (opts) {
     this.compilationResult = opts.compilationResult || function (contractAddress) { return null }
@@ -151,22 +150,19 @@ export class Ethdebugger {
     this.event.trigger('traceUnloaded')
   }
 
-  debug (tx) {
+  async debug (tx) {
     if (this.traceManager.isLoading) {
       return
     }
     tx.to = tx.to || contractCreationToken('0')
     this.tx = tx
 
-    this.traceManager.resolveTrace(tx).then(async (result) => {
-      this.setCompilationResult(await this.compilationResult(tx.to))
-      this.event.trigger('newTraceLoaded', [this.traceManager.trace])
-      if (this.breakpointManager && this.breakpointManager.hasBreakpoint()) {
-        this.breakpointManager.jumpNextBreakpoint(false)
-      }
-      this.storageResolver = new StorageResolver({ web3: this.traceManager.web3 })
-    }).catch((error) => {
-      this.statusMessage = error ? error.message : 'Trace not loaded'
-    })
+    await this.traceManager.resolveTrace(tx)
+    this.setCompilationResult(await this.compilationResult(tx.to))
+    this.event.trigger('newTraceLoaded', [this.traceManager.trace])
+    if (this.breakpointManager && this.breakpointManager.hasBreakpoint()) {
+      this.breakpointManager.jumpNextBreakpoint(false)
+    }
+    this.storageResolver = new StorageResolver({ web3: this.traceManager.web3 })
   }
 }

libs/remix-debug/src/debugger/debugger.ts

@@ -100,9 +100,9 @@ export class Debugger {
   }
 
   debug (blockNumber, txNumber, tx, loadingCb): Promise<void> {
-    const web3 = this.debugger.web3
-
     return new Promise((resolve, reject) => {
+      const web3 = this.debugger.web3
+
       if (this.debugger.traceManager.isLoading) {
         return resolve()
       }
@@ -111,8 +111,7 @@ export class Debugger {
         if (!tx.to) {
           tx.to = contractCreationToken('0')
         }
-        this.debugTx(tx, loadingCb)
-        return resolve()
+        return this.debugTx(tx, loadingCb).then(resolve).catch(reject)
       }
 
       try {
@@ -120,23 +119,21 @@ export class Debugger {
           return web3.eth.getTransaction(txNumber, (_error, tx) => {
             if (_error) return reject(_error)
             if (!tx) return reject(new Error('cannot find transaction ' + txNumber))
-            this.debugTx(tx, loadingCb)
-            return resolve()
+            return this.debugTx(tx, loadingCb).then(resolve).catch(reject)
           })
         }
         web3.eth.getTransactionFromBlock(blockNumber, txNumber, (_error, tx) => {
           if (_error) return reject(_error)
           if (!tx) return reject(new Error('cannot find transaction ' + blockNumber + ' ' + txNumber))
-          this.debugTx(tx, loadingCb)
-          return resolve()
+          return this.debugTx(tx, loadingCb).then(resolve).catch(reject)
         })
       } catch (e) {
-        return reject(e.message)
+        return reject(e)
       }
     })
   }
 
-  debugTx (tx, loadingCb) {
+  async debugTx (tx, loadingCb) {
     this.step_manager = new DebuggerStepManager(this.debugger, this.debugger.traceManager)
 
     this.debugger.codeManager.event.register('changed', this, (code, address, instIndex) => {
@@ -162,7 +159,7 @@ export class Debugger {
     })
 
     loadingCb()
-    this.debugger.debug(tx)
+    await this.debugger.debug(tx)
   }
 
   unload () {

libs/remix-debug/src/trace/traceManager.ts

@@ -30,9 +30,8 @@ export class TraceManager {
     this.init()
     if (!this.web3) throw new Error('web3 not loaded')
     this.isLoading = true
+    const result = await this.getTrace(tx.hash)
     try {
-      const result = await this.getTrace(tx.hash)
-
       if (result['structLogs'].length > 0) {
         this.trace = result['structLogs']
 

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

@@ -15,7 +15,6 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
   const debuggerModule = props.debuggerAPI
   const [state, setState] = useState({
     isActive: false,
-    statusMessage: '',
     debugger: null,
     currentReceipt: {
       contractAddress: null,
@@ -25,7 +24,8 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
     txNumber: '',
     debugging: false,
     opt: {
-      debugWithGeneratedSources: false
+      debugWithGeneratedSources: false,
+      debugWithLocalNode: false
     },
     toastMessage: '',
     validationError: '',
@@ -132,7 +132,6 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
       return {
         ...prevState,
         isActive: false,
-        statusMessage: '',
         debugger: null,
         currentReceipt: {
           contractAddress: null,
@@ -166,7 +165,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
       return
     }
 
-    const web3 = await debuggerModule.getDebugWeb3()
+    const web3 = state.opt.debugWithLocalNode ? await debuggerModule.web3() : await debuggerModule.getDebugWeb3()
     try {
       const networkId = await web3.eth.net.getId()
       _paq.push(['trackEvent', 'debugger', 'startDebugging', networkId])
@@ -211,33 +210,31 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
       debugWithGeneratedSources: state.opt.debugWithGeneratedSources
     })
 
-    debuggerInstance.debug(blockNumber, txNumber, tx, () => {
-      listenToEvents(debuggerInstance, currentReceipt)
-      setState(prevState => {
-        return {
-          ...prevState,
-          blockNumber,
-          txNumber,
-          debugging: true,
-          currentReceipt,
-          debugger: debuggerInstance,
-          toastMessage: `debugging ${txNumber}`,
-          validationError: ''
-        }
-      })
-    }).catch((error) => {
-      if (JSON.stringify(error) !== '{}') {
-        let message = 'Error: ' + JSON.stringify(error)
-        message = message.split('\\"').join('\'')
+    try {
+      await debuggerInstance.debug(blockNumber, txNumber, tx, () => {
+        listenToEvents(debuggerInstance, currentReceipt)
         setState(prevState => {
           return {
             ...prevState,
-            validationError: message
+            blockNumber,
+            txNumber,
+            debugging: true,
+            currentReceipt,
+            debugger: debuggerInstance,
+            toastMessage: `debugging ${txNumber}`,
+            validationError: ''
           }
         })
-      }
+      })
+    } catch (error) {
       unLoad()
-    })
+      setState(prevState => {
+        return {
+          ...prevState,
+          validationError: error.message || error
+        }
+      })
+    }
   }
 
   const debug = (txHash) => {
@@ -277,18 +274,25 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
           <div className="mt-2 mb-2 debuggerConfig custom-control custom-checkbox">
             <input className="custom-control-input" id="debugGeneratedSourcesInput" onChange={({ target: { checked } }) => {
               setState(prevState => {
-                return { ...prevState, opt: { debugWithGeneratedSources: checked } }
+                return { ...prevState, opt: { ...prevState.opt, debugWithGeneratedSources: checked } }
               })
             }} type="checkbox" title="Debug with generated sources" />
             <label data-id="debugGeneratedSourcesLabel" className="form-check-label custom-control-label" htmlFor="debugGeneratedSourcesInput">Use generated sources (from Solidity v0.7.2)</label>
           </div>
+          <div className="mt-2 mb-2 debuggerConfig custom-control custom-checkbox">
+            <input className="custom-control-input" id="debugWithLocalNodeInput" onChange={({ target: { checked } }) => {
+              setState(prevState => {
+                return { ...prevState, opt: { ...prevState.opt, debugWithLocalNode: checked } }
+              })
+            }} type="checkbox" title="Force the debugger to use the current local node" />
+            <label data-id="debugLocaNodeLabel" className="form-check-label custom-control-label" htmlFor="debugWithLocalNodeInput">Force using local node</label>
+          </div>
           { state.validationError && <span className="w-100 py-1 text-danger validationError">{state.validationError}</span> }
         </div>
         <TxBrowser requestDebug={ requestDebug } unloadRequested={ unloadRequested } updateTxNumberFlag={ updateTxNumberFlag } transactionNumber={ state.txNumber } debugging={ state.debugging } />
         { state.debugging && <StepManager stepManager={ stepManager } /> }
         { state.debugging && <VmDebuggerHead vmDebugger={ vmDebugger } /> }
       </div>
-      { state.debugging && <div className="statusMessage">{ state.statusMessage }</div> }
       { state.debugging && <VmDebugger vmDebugger={ vmDebugger } /> }
     </div>
   )

libs/remix-ui/debugger-ui/src/lib/idebugger-api.ts

@@ -62,6 +62,7 @@ export interface IDebuggerApi {
     fetchContractAndCompile: (address: string, currentReceipt: TransactionReceipt) => Promise<CompilationOutput>
     getFile: (path: string) => Promise<string>
     setFile: (path: string, content: string) => Promise<void>
-    getDebugWeb3: () => any // returns an instance of web3.js
+    getDebugWeb3: () => any // returns an instance of web3.js, if applicable (mainet, goerli, ...) it returns a reference to a node from devops (so we are sure debug endpoint is available)
+    web3: () => any // returns an instance of web3.js
     showMessage (title: string, message: string): void
 }