live mode is define from the UI & general improvement

apps/remix-ide-e2e/src/tests/recorder.test.ts

@@ -107,6 +107,7 @@ module.exports = {
       .openFile('scenario_live_mode.json')
       .clickLaunchIcon('udapp')
       .click('*[data-id="deployAndRunClearInstances"]')
+      .click('*[data-id="runtabLivemodeInput"]')
       .click('i.runtransaction')
       .pause(1000)
       .clickInstance(0)

apps/remix-ide/src/app/tabs/runTab/model/recorder.js

@@ -191,15 +191,16 @@ class Recorder extends Plugin {
     * @param {Function} promptCb
     * @param {Function} alertCb
     * @param {Function} logCallBack
-    * @param {Function} live
+    * @param {Function} liveMode
     * @param {Function} newContractFn
     *
     */
-  run (records, accounts, options, abis, linkReferences, confirmationCb, continueCb, promptCb, alertCb, logCallBack, live, newContractFn) {
+  run (records, accounts, options, abis, linkReferences, confirmationCb, continueCb, promptCb, alertCb, logCallBack, liveMode, newContractFn) {
     this.setListen(false)
-    logCallBack(`Running ${records.length} transaction(s) ...`)
+    const liveMsg = liveMode ? ' in live mode' : ''
+    logCallBack(`Running ${records.length} transaction(s)${liveMsg} ...`)
     async.eachOfSeries(records, async (tx, index, cb) => {
-      if (live && tx.record.type === 'constructor') {
+      if (liveMode && tx.record.type === 'constructor') {
         // resolve the bytecode using the contract name, this ensure getting the last compiled one.
         const data = await this.call('compilerArtefacts', 'getArtefactsByContractName', tx.record.contractName)
         tx.record.bytecode = data.artefact.evm.bytecode.object
@@ -282,7 +283,7 @@ class Recorder extends Plugin {
     }, () => { this.setListen(true) })
   }
 
-  runScenario (json, continueCb, promptCb, alertCb, confirmationCb, logCallBack, cb) {
+  runScenario (liveMode, json, continueCb, promptCb, alertCb, confirmationCb, logCallBack, cb) {
     _paq.push(['trackEvent', 'run', 'recorder', 'start'])
     if (!json) {
       _paq.push(['trackEvent', 'run', 'recorder', 'wrong-json'])
@@ -296,13 +297,17 @@ class Recorder extends Plugin {
       }
     }
 
+    let txArray
+    let accounts
+    let options
+    let abis
+    let linkReferences
     try {
-      const txArray = json.transactions || []
-      const accounts = json.accounts || []
-      const options = json.options || {}
-      const abis = json.abis || {}
-      const linkReferences = json.linkReferences || {}
-      const live = json.live || false
+      txArray = json.transactions || []
+      accounts = json.accounts || []
+      options = json.options || {}
+      abis = json.abis || {}
+      linkReferences = json.linkReferences || {}
     } catch (e) {
       return cb('Invalid Scenario File. Please try again')
     }
@@ -311,7 +316,7 @@ class Recorder extends Plugin {
       return
     }
 
-    this.run(txArray, accounts, options, abis, linkReferences, confirmationCb, continueCb, promptCb, alertCb, logCallBack, live, (abi, address, contractName) => {
+    this.run(txArray, accounts, options, abis, linkReferences, confirmationCb, continueCb, promptCb, alertCb, logCallBack, liveMode, (abi, address, contractName) => {
       cb(null, abi, address, contractName)
     })
   }

apps/remix-ide/src/blockchain/blockchain.js

@@ -74,7 +74,7 @@ export class Blockchain extends Plugin {
         this.networkStatus = { network, error }
         this.event.trigger('networkStatus', [this.networkStatus])
       })
-    }, 1000)
+    }, 100000)
   }
 
   getCurrentNetworkStatus () {

libs/remix-ui/run-tab/src/lib/actions/index.ts

@@ -26,7 +26,7 @@ export const initRunTab = (udapp: RunTab) => async (reducerDispatch: React.Dispa
   setupEvents(plugin, dispatch)
   setInterval(() => {
     fillAccountsList(plugin, dispatch)
-  }, 1000)
+  }, 10000000)
 }
 
 export const setAccountAddress = (account: string) => setAccount(dispatch, account)
@@ -54,7 +54,7 @@ export const getExecutionContext = () => getContext(plugin)
 export const executeTransactions = (instanceIndex: number, lookupOnly: boolean, funcABI: FuncABI, inputsValues: string, contractName: string, contractABI, contract, address, logMsg:string, mainnetPrompt: MainnetPrompt, gasEstimationPrompt: (msg: string) => JSX.Element, passphrasePrompt: (msg: string) => JSX.Element, funcIndex?: number) => runTransactions(plugin, dispatch, instanceIndex, lookupOnly, funcABI, inputsValues, contractName, contractABI, contract, address, logMsg, mainnetPrompt, gasEstimationPrompt, passphrasePrompt, funcIndex)
 export const loadFromAddress = (contract: ContractData, address: string) => loadAddress(plugin, dispatch, contract, address)
 export const storeNewScenario = async (prompt: (msg: string, defaultValue: string) => JSX.Element) => storeScenario(plugin, dispatch, prompt)
-export const runScenario = (gasEstimationPrompt: (msg: string) => JSX.Element, passphrasePrompt: (msg: string) => JSX.Element, confirmDialogContent: MainnetPrompt) => runCurrentScenario(plugin, dispatch, gasEstimationPrompt, passphrasePrompt, confirmDialogContent)
+export const runScenario = (liveMode: boolean, gasEstimationPrompt: (msg: string) => JSX.Element, passphrasePrompt: (msg: string) => JSX.Element, confirmDialogContent: MainnetPrompt) => runCurrentScenario(liveMode, plugin, dispatch, gasEstimationPrompt, passphrasePrompt, confirmDialogContent)
 export const setScenarioPath = (path: string) => updateScenarioPath(dispatch, path)
 export const getFuncABIValues = (funcABI: FuncABI) => getFuncABIInputs(plugin, funcABI)
 export const setNetworkName = (networkName: string) => setNetworkNameFromProvider(dispatch, networkName)

libs/remix-ui/run-tab/src/lib/actions/recorder.ts

@@ -36,12 +36,13 @@ export const storeScenario = async (plugin: RunTab, dispatch: React.Dispatch<any
   )
 }
 
-const runScenario = (plugin: RunTab, dispatch: React.Dispatch<any>, file: string, gasEstimationPrompt: (msg: string) => JSX.Element, passphrasePrompt: (msg: string) => JSX.Element, confirmDialogContent: MainnetPrompt) => {
+const runScenario = (liveMode: boolean, plugin: RunTab, dispatch: React.Dispatch<any>, file: string, gasEstimationPrompt: (msg: string) => JSX.Element, passphrasePrompt: (msg: string) => JSX.Element, confirmDialogContent: MainnetPrompt) => {
   if (!file) return dispatch(displayNotification('Alert', 'Unable to run scenerio, no specified scenario file', 'OK', null))
 
   plugin.fileManager.readFile(file).then((json) => {
     // TODO: there is still a UI dependency to remove here, it's still too coupled at this point to remove easily
     plugin.recorder.runScenario(
+      liveMode,
       json,
       (error, continueTxExecution, cancelCb) => {
         continueHandler(dispatch, gasEstimationPrompt, error, continueTxExecution, cancelCb)
@@ -64,9 +65,9 @@ const runScenario = (plugin: RunTab, dispatch: React.Dispatch<any>, file: string
   }).catch((error) => dispatch(displayNotification('Alert', error, 'OK', null)))
 }
 
-export const runCurrentScenario = (plugin: RunTab, dispatch: React.Dispatch<any>, gasEstimationPrompt: (msg: string) => JSX.Element, passphrasePrompt: (msg: string) => JSX.Element, confirmDialogContent: MainnetPrompt) => {
+export const runCurrentScenario = (liveMode: boolean, plugin: RunTab, dispatch: React.Dispatch<any>, gasEstimationPrompt: (msg: string) => JSX.Element, passphrasePrompt: (msg: string) => JSX.Element, confirmDialogContent: MainnetPrompt) => {
   const file = plugin.config.get('currentFile')
 
   if (!file) return dispatch(displayNotification('Alert', 'A scenario file has to be selected', 'Ok', null))
-  runScenario(plugin, dispatch, file, gasEstimationPrompt, passphrasePrompt, confirmDialogContent)
+  runScenario(liveMode, plugin, dispatch, file, gasEstimationPrompt, passphrasePrompt, confirmDialogContent)
 }

libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx

@@ -1,15 +1,18 @@
 // eslint-disable-next-line no-use-before-define
-import React, {useState} from 'react'
+import React, {useRef, useState} from 'react'
 import { RecorderProps } from '../types'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap' // eslint-disable-line
 
 export function RecorderUI (props: RecorderProps) {
+  const inputLive = useRef<HTMLInputElement>()
   const [toggleExpander, setToggleExpander] = useState<boolean>(false)
   const triggerRecordButton = () => {
     props.storeScenario(props.scenarioPrompt)
   }
 
   const handleClickRunButton = () => {
-    props.runCurrentScenario(props.gasEstimationPrompt, props.passphrasePrompt, props.mainnetPrompt)
+    const liveMode = inputLive.current ? inputLive.current.checked : false
+    props.runCurrentScenario(liveMode, props.gasEstimationPrompt, props.passphrasePrompt, props.mainnetPrompt)
   }
 
   const toggleClass = () => {
@@ -22,6 +25,15 @@ export function RecorderUI (props: RecorderProps) {
         <div className="d-flex">
           <label className="mt-1 udapp_recorderSectionLabel">Transactions recorded</label>
           <div className="ml-2 mb-2 badge badge-pill badge-primary" title="The number of recorded transactions">{props.count}</div>
+        <OverlayTrigger placement={'right'} overlay={
+          <Tooltip className="text-nowrap" id="info-recorder">
+            <span>Save transactions (deployed contracts and function executions) and replay then in an
+            another environment. <br/> e.g Transactions created in Javascript VM can be replayed in the Injected Web3.
+          </span>
+          </Tooltip>
+        }>
+          <i style={{ fontSize: 'medium' }} className={'ml-2 fal fa-info-circle'} aria-hidden="true"></i>
+        </OverlayTrigger>
         </div>
         <div>
           <span data-id='udappRecorderTitleExpander' onClick={toggleClass}>
@@ -29,17 +41,29 @@ export function RecorderUI (props: RecorderProps) {
           </span>
         </div>
       </div>
-      <div className={`border-bottom flex-column ${toggleExpander ? "d-flex" : "d-none"}`}>
-        <div className="p-2 mt-2">
-          All transactions (deployed contracts and function executions) can be saved and replayed in
-          another environment. e.g Transactions created in Javascript VM can be replayed in the Injected Web3.
-        </div>
-        <div className="mb-2 udapp_transactionActions">
-          <i className="fas fa-save savetransaction udapp_recorder udapp_icon"
-            onClick={triggerRecordButton} title="Save Transactions" aria-hidden="true">
-          </i>
-          <i className="fas fa-play runtransaction udapp_runTxs udapp_icon" title="Run Transactions" data-id="runtransaction" aria-hidden="true" onClick={handleClickRunButton}></i>
-        </div>
+      <div className={`flex-column ${toggleExpander ? "d-flex" : "d-none"}`}>
+        <div className="mb-1 mt-1 fmt-2 custom-control custom-checkbox mb-1">
+          <input ref={inputLive} type="checkbox" id="livemode-recorder" data-id="runtabLivemodeInput" className="custom-control-input custom-select" name="input-livemode"/>
+          <label className="form-check-label custom-control-label" htmlFor="livemode-recorder">When running transactions, get the contracts bytecodes from the last compilation result.</label>
+        </div>     
+        <div className="mb-1 mt-1 udapp_transactionActions">
+        <OverlayTrigger placement={'right'} overlay={
+          <Tooltip className="text-nowrap" id="tooltip-save-recorder">
+            <span>Save {props.count} transaction(s) to JSON.
+          </span>
+          </Tooltip>
+        }>
+          <button className="btn btn-sm btn-info savetransaction udapp_recorder" onClick={triggerRecordButton}>Save</button>
+        </OverlayTrigger>
+        <OverlayTrigger placement={'right'} overlay={
+          <Tooltip className="text-nowrap" id="tooltip-run-recorder">
+            <span>Run Transaction from the current scenario file.
+          </span>
+          </Tooltip>
+        }>
+          <button className="btn btn-sm btn-info runtransaction udapp_runTxs" data-id="runtransaction" onClick={handleClickRunButton}>Run</button>
+        </OverlayTrigger>
+        </div>        
       </div>
     </div>
   )

libs/remix-ui/run-tab/src/lib/types/index.ts

@@ -166,7 +166,7 @@ export interface ContractDropdownProps {
 
 export interface RecorderProps {
   storeScenario: (prompt: (msg: string, defaultValue: string) => JSX.Element) => void,
-  runCurrentScenario: (gasEstimationPrompt: (msg: string) => JSX.Element, passphrasePrompt: (msg: string) => JSX.Element, confirmDialogContent: MainnetPrompt) => void,
+  runCurrentScenario: (liveMode: boolean, gasEstimationPrompt: (msg: string) => JSX.Element, passphrasePrompt: (msg: string) => JSX.Element, confirmDialogContent: MainnetPrompt) => void,
   mainnetPrompt: MainnetPrompt,
   gasEstimationPrompt: (msg: string) => JSX.Element,
   passphrasePrompt: (msg: string) => JSX.Element,

libs/remix-ui/run-tab/src/lib/types/recorder.d.ts

@@ -9,7 +9,7 @@ export class Recorder {
   getAll: () => void;
   clearAll: () => void;
   run: (records, accounts, options, abis, linkReferences, confirmationCb, continueCb, promptCb, alertCb, logCallBack, newContractFn) => void
-  runScenario: (json, continueCb, promptCb, alertCb, confirmationCb, logCallBack, cb) => void
+  runScenario: (liveMode, json, continueCb, promptCb, alertCb, confirmationCb, logCallBack, cb) => void
 }
 import { Blockchain } from "./blockchain";