listen on network is active for !vm

Author: LianaHus

apps/remix-ide/src/app/tabs/network-module.js

@@ -19,12 +19,18 @@ export class NetworkModule extends Plugin {
   constructor (blockchain) {
     super(profile)
     this.blockchain = blockchain
+
     // TODO: See with remix-lib to make sementic coherent
     this.blockchain.event.register('contextChanged', (provider) => {
       this.emit('providerChanged', provider)
     })
   }
 
+  onActivation () {
+    // emit the initial provider type
+    this.emit('providerChanged', this.blockchain.getProvider)
+  }
+
   /** Return the current network provider (web3, vm, injected) */
   getNetworkProvider () {
     return this.blockchain.getProvider()

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

@@ -59,6 +59,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   })
 
   const [clearConsole, setClearConsole] = useState(false)
+  const [isVM, setIsVM] = useState(false)
   const [paste, setPaste] = useState(false)
   const [storage, setStorage] = useState<any>(null)
   const [autoCompletState, setAutoCompleteState] = useState({
@@ -98,6 +99,10 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   }
 
   useEffect(() => {
+    props.plugin.on('network', 'providerChanged', (provider) => {
+      setIsVM(provider.startsWith('vm-'))
+    })
+
     props.onReady({
       logHtml: (html) => {
         scriptRunnerDispatch({
@@ -603,11 +608,22 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
             <CustomTooltip placement="top" tooltipId="terminalClear" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="terminal.pendingTransactions" />}>
               <div className="mx-2">0</div>
             </CustomTooltip>
-            <div className="h-80 mx-3 align-items-center remix_ui_terminal_listenOnNetwork custom-control custom-checkbox">
-              <CustomTooltip placement="top" tooltipId="terminalClear" tooltipClasses="text-nowrap" tooltipText={intl.formatMessage({ id: 'terminal.listenTitle' })}>
-                <input className="custom-control-input" id="listenNetworkCheck" onChange={listenOnNetwork} type="checkbox" />
-              </CustomTooltip>
-              <CustomTooltip placement="top" tooltipId="terminalClear" tooltipClasses="text-nowrap" tooltipText={intl.formatMessage({ id: 'terminal.listenTitle' })}>
+            <CustomTooltip
+              placement="top"
+              tooltipId="terminalClear"
+              tooltipClasses="text-nowrap"
+              tooltipText={intl.formatMessage({ id: isVM ? 'terminal.listenVM' : 'terminal.listenTitle'})}
+            >
+              <div className="h-80 mx-3 align-items-center remix_ui_terminal_listenOnNetwork custom-control custom-checkbox">
+                <CustomTooltip placement="top" tooltipId="terminalClear" tooltipClasses="text-nowrap" tooltipText={intl.formatMessage({ id: 'terminal.listenTitle' })}>
+                  <input
+                    className="custom-control-input"
+                    id="listenNetworkCheck"
+                    onChange={listenOnNetwork}
+                    type="checkbox"
+                    disabled={isVM}
+                  />
+                </CustomTooltip>
                 <label
                   className="form-check-label custom-control-label text-nowrap"
                   style={{ paddingTop: '0.125rem' }}
@@ -616,8 +632,8 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
                 >
                   <FormattedMessage id="terminal.listen" />
                 </label>
-              </CustomTooltip>
-            </div>
+              </div>
+            </CustomTooltip>
             <div className="remix_ui_terminal_search d-flex align-items-center h-100">
               <i className="remix_ui_terminal_searchIcon d-flex align-items-center justify-content-center fas fa-search bg-light" aria-hidden="true"></i>
               <input