Merge pull request #1543 from ethereum/debCh

show checkbox in debugger only for web3

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

@@ -62,6 +62,10 @@ export const DebuggerApiMixin = (Base) => class extends Base {
     this.onEditorContentChangedListener = listener
   }
 
+  onEnvChanged (listener) {
+    this.onEnvChangedListener = listener
+  }
+
   onDebugRequested (listener) {
     this.onDebugRequestedListener = listener
   }
@@ -126,6 +130,7 @@ export const DebuggerApiMixin = (Base) => class extends Base {
     this.on('editor', 'breakpointCleared', (fileName, row) => { if (this.onBreakpointClearedListener) this.onBreakpointClearedListener(fileName, row) })
     this.on('editor', 'breakpointAdded', (fileName, row) => { if (this.onBreakpointAddedListener) this.onBreakpointAddedListener(fileName, row) })
     this.on('editor', 'contentChanged', () => { if (this.onEditorContentChangedListener) this.onEditorContentChangedListener() })  
+    this.on('network', 'providerChanged', (provider) => { if (this.onEnvChangedListener) this.onEnvChangedListener(provider) })
   }
 
   onDeactivation () {

apps/debugger/src/app/debugger.ts

@@ -1,7 +1,7 @@
 import { PluginClient } from "@remixproject/plugin";
 import { createClient } from "@remixproject/plugin-webview";
 import { IDebuggerApi, RawLocation, Sources, Asts, LineColumnLocation, 
-  onBreakpointClearedListener, onBreakpointAddedListener, onEditorContentChanged, TransactionReceipt } from '@remix-ui/debugger-ui'
+  onBreakpointClearedListener, onBreakpointAddedListener, onEditorContentChanged, onEnvChangedListener, TransactionReceipt } from '@remix-ui/debugger-ui'
 import { DebuggerApiMixin, CompilerAbstract} from './debugger-api'
 
 export class DebuggerClientApi extends DebuggerApiMixin(PluginClient) {  
@@ -18,6 +18,7 @@ export class DebuggerClientApi extends DebuggerApiMixin(PluginClient) {
   onBreakpointCleared: (listener: onBreakpointClearedListener) => void
   onBreakpointAdded: (listener: onBreakpointAddedListener) => void
   onEditorContentChanged: (listener: onEditorContentChanged) => void
+  onEnvChanged: (listener: onEnvChangedListener) => void
   discardHighlight: () => Promise<void>
   highlight: (lineColumnPos: LineColumnLocation, path: string) => Promise<void>
   fetchContractAndCompile: (address: string, currentReceipt: TransactionReceipt) => Promise<CompilerAbstract>

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

@@ -31,7 +31,8 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
     },
     toastMessage: '',
     validationError: '',
-    txNumberIsEmpty: true
+    txNumberIsEmpty: true,
+    isLocalNodeUsed: false
   })
 
   useEffect(() => {
@@ -62,6 +63,17 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
     }
 
     setEditor()
+
+    const providerChanged = () => {
+      debuggerModule.onEnvChanged((provider) => {
+        setState(prevState => {
+          const isLocalNodeUsed = provider !== 'vm' && provider !== 'injected'
+          return { ...prevState, isLocalNodeUsed: isLocalNodeUsed }
+        })
+      })
+    }
+
+    providerChanged()
   }, [state.debugger])
 
   const listenToEvents = (debuggerInstance, currentReceipt) => {
@@ -289,7 +301,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
             }} 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">
+          { state.isLocalNodeUsed && <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 } }
@@ -297,6 +309,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
             }} 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 } />

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

@@ -46,6 +46,7 @@ export type onBreakpointClearedListener = (params: string, row: number) => void
 export type onBreakpointAddedListener = (params: string, row: number) => void
 export type onEditorContentChanged = () => void
 export type onDebugRequested = (hash: string) => void
+export type onEnvChangedListener = (provider: string) => void
 
 export interface IDebuggerApi {
     offsetToLineColumnConverter: { offsetToLineColumn: (sourceLocation: RawLocation, file: number, contents: Sources, asts: Asts) => Promise<LineColumnLocation> }
@@ -57,6 +58,7 @@ export interface IDebuggerApi {
     onBreakpointCleared: (listener: onBreakpointClearedListener) => void
     onBreakpointAdded: (listener: onBreakpointAddedListener) => void
     onEditorContentChanged: (listener: onEditorContentChanged) => void
+    onEnvChanged: (listener: onEnvChangedListener) => void
     discardHighlight: () => Promise<void>
     highlight: (lineColumnPos: LineColumnLocation, path: string) => Promise<void>
     fetchContractAndCompile: (address: string, currentReceipt: TransactionReceipt) => Promise<CompilationOutput>