fixing review comment by David Disu

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

@@ -53,8 +53,6 @@ module.exports = {
       .assert.elementPresent('div[data-id="terminalContainerDisplay"]')
       .click('i[data-id="terminalToggleIcon"]')
       .checkElementStyle('div[data-id="terminalContainer-view"]', 'height', '36px')
-      // .click('i[data-id="terminalToggleIcon"]')
-      // .assert.visible('div[data-id="terminalContainerDisplay"]')
   },
 
   'Switch Tabs using tabs icon': function (browser: NightwatchBrowser) {

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

@@ -77,7 +77,7 @@ function checkDeployShouldFail (browser: NightwatchBrowser, callback: VoidFuncti
     .clickLaunchIcon('udapp')
     .selectContract('test') // deploy lib
     .createContract('')
-    .pause(60000)
+    .pause(2000)
     .getText('div[class^="terminal"]', (value) => {
       console.log('value: ', value)
     })

apps/remix-ide-e2e/src/tests/solidityUnittests.spec.ts

@@ -150,7 +150,7 @@ module.exports = {
       .clickLaunchIcon('solidityUnitTesting')
       .waitForElementPresent('*[data-id="uiPathInput"]', 3000)
       .clearValue('*[data-id="uiPathInput"]')
-      .setValue('*[data-id="uiPathInput"]', 'tests')
+      .setValue('*[data-id="uiPathInput"]', 'tests1')
       .click('*[data-id="testTabGenerateTestFolder"]')
       .clickLaunchIcon('filePanel')
       // creating a new workspace
@@ -198,13 +198,13 @@ module.exports = {
       .waitForElementVisible('*[data-id="testTabSolidityUnitTestsOutputheader"]', 120000)
       .waitForElementPresent('#solidityUnittestsOutput div[class^="testPass"]', 60000)
       .waitForElementContainsText('#solidityUnittestsOutput', 'tests/hhLogs_test.sol', 60000)
-      .assert.containsText('#journal > div:nth-child(2) > span ', 'Before all:')
-      .assert.containsText('#journal > div:nth-child(2) > span', 'Inside beforeAll')
-      .assert.containsText('#journal > div:nth-child(3) > span', 'Check sender:')
-      .assert.containsText('#journal > div:nth-child(3) > span', 'msg.sender is 0x5B38Da6a701c568545dCfcB03FcB875f56beddC4')
-      .assert.containsText('#journal > div:nth-child(4) > span', 'Check int logs:')
-      .assert.containsText('#journal > div:nth-child(4) > span', '10 20')
-      .assert.containsText('#journal > div:nth-child(4) > span', 'Number is 25')
+      .assert.containsText('#journal > div:nth-child(3) > span', 'Before all:')
+      .assert.containsText('#journal > div:nth-child(3) > span', 'Inside beforeAll')
+      .assert.containsText('#journal > div:nth-child(4) > span', 'Check sender:')
+      .assert.containsText('#journal > div:nth-child(4) > span', 'msg.sender is 0x5B38Da6a701c568545dCfcB03FcB875f56beddC4')
+      .assert.containsText('#journal > div:nth-child(5) > span', 'Check int logs:')
+      .assert.containsText('#journal > div:nth-child(5) > span', '10 20')
+      .assert.containsText('#journal > div:nth-child(5) > span', 'Number is 25')
       .openFile('tests/hhLogs_test.sol')
       .removeFile('tests/hhLogs_test.sol', 'workspace_new')
   },

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

@@ -50,7 +50,7 @@ module.exports = {
       .execute(function () { document.querySelector('*[data-id="modalDialogCustomPromptTextCreate"]')['value'] = 'workspace_name_1' })
       .waitForElementVisible('span[data-id="workspacesModalDialog-modal-footer-ok-react"]')
     // eslint-disable-next-line dot-notation
-      // .execute(function () { document.querySelector('span[data-id="workspacesModalDialog-modal-footer-ok-react"]') })
+      .execute(function () { document.querySelector('span[data-id="workspacesModalDialog-modal-footer-ok-react"]') })
       .pause(2000)
       .click('span[data-id="workspacesModalDialog-modal-footer-ok-react"]')
       .waitForElementVisible('*[data-id="treeViewLitreeViewItemtests"]')

apps/remix-ide/src/app/panels/terminal.js

@@ -108,12 +108,20 @@ class Terminal extends Plugin {
     // console.log({ html: html.innerText })
     this.logHtmlResponse.push(html.innerText)
     this.renderComponent()
+    this.resetLogHtml()
+  }
+
+  resetLogHtml () {
     this.logHtmlResponse = []
   }
 
   log (message) {
     this.logResponse.push(message)
     this.renderComponent()
+    this.resetLog()
+  }
+
+  resetLog () {
     this.logResponse = []
   }
 
@@ -124,25 +132,7 @@ class Terminal extends Plugin {
   renderComponent () {
     ReactDOM.render(
       <RemixUiTerminal
-        event = {this.event}
-        blockchain = {this.blockchain}
-        api = {this._api}
-        options = {this._opts}
-        registerCommand = {this.registerCommand}
-        version = {this.version}
-        config = {this.config}
-        thisState = {this}
-        blockchain = {this.blockchain}
-        event = {this.event}
-        _deps = {this._deps}
-        fileImport = {this.fileImport}
-        sourceHighlighter = {this.sourceHighlighter}
-        gistHandler ={this.gistHandler}
-        registry = {this.registry}
-        txListener = {this.txListener}
-        eventsDecoder = {this.eventsDecoder}
-        logHtml = {this.logHtmlResponse}
-        logResponse = {this.logResponse}
+        plugin = {this}
       />,
       this.element
     )

apps/remix-ide/src/lib/cmdInterpreterAPI.js

@@ -93,7 +93,6 @@ class CmdInterpreterAPI {
         if (cb) cb()
         return
       }
-      console.log({ content }, ' contents')
       self._components.terminal.commands.script(content)
     }
 

libs/remix-lib/src/types/ICompilerApi.ts

@@ -50,8 +50,4 @@ export interface ConfigurationSettings {
     language: string,
     optimize: boolean,
     runs: string
-<<<<<<< HEAD
-
-=======
->>>>>>> 0e36c001f098047cf4fec47ae9611d1e4e4a8355
 }

libs/remix-ui/terminal/src/lib/actions/terminalAction.ts

+import { EmptyBlock, KnownTransaction, NewBlock, NewCall, NewTransaction, UnknownTransaction } from '../types/terminalTypes'
+
 export const registerCommandAction = (name, command, activate, dispatch) => {
   const commands: any = {}
   const _commands: any = {}
   _commands[name] = command
   const data: any = {
-    // lineLength: props.options.lineLength || 80,
     session: [],
     activeFilters: { commands: {}, input: '' },
     filterFns: {}
@@ -25,7 +26,6 @@ export const registerCommandAction = (name, command, activate, dispatch) => {
     const root = { steps, cmd: name, gidx: 0, idx: 0 }
     const ITEM = { root, cmd: name }
     root.gidx = _INDEX.allMain.push(ITEM) - 1
-    // root.idx = _INDEX.commandsMain[name].push(ITEM) - 1
     let item
     function append (cmd, params, el) {
       if (cmd) { // subcommand
@@ -39,11 +39,9 @@ export const registerCommandAction = (name, command, activate, dispatch) => {
       item.idx = _INDEX.commands[cmd].push(item) - 1
       item.step = steps.push(item) - 1
       item.args = params
-      // _appendItem(item)
-      // self._appendItem(item)
     }
-    var scopedCommands = _scopeCommands(append)
-    command(args, scopedCommands, el => append(null, args, blockify(el)))
+    const scopedCommands = _scopeCommands(append)
+    command(args, scopedCommands, el => append(null, args, el))
   }
   const help = typeof command.help === 'string' ? command.help : [
     '// no help available for:', `terminal.command.${name}`
@@ -54,20 +52,17 @@ export const registerCommandAction = (name, command, activate, dispatch) => {
   if (activate.filterFn) {
     registerFilter(name, activate.filterFn)
   }
-  if (name !== ('knownTransaction' || 'unkownTransaction' || 'emptyBlock')) {
+  if (name !== (KnownTransaction || UnknownTransaction || EmptyBlock)) {
     dispatch({ type: name, payload: { commands: commands, _commands: _commands, data: data } })
   }
-  const blockify = (el) => {
-    return `<div class="px-4 block_2A0YE0" data-id="block_null">${el}</div>`
-  }
 
   const _scopeCommands = (append) => {
     const scopedCommands = {}
     Object.keys(commands).forEach(function makeScopedCommand (cmd) {
-      var command = _commands[cmd]
+      const command = _commands[cmd]
       scopedCommands[cmd] = function _command () {
-        var args = [...arguments]
-        command(args, scopedCommands, el => append(cmd, args, blockify(el)))
+        const args = [...arguments]
+        command(args, scopedCommands, el => append(cmd, args, el))
       }
     })
     return scopedCommands
@@ -76,89 +71,85 @@ export const registerCommandAction = (name, command, activate, dispatch) => {
 
 export const filterFnAction = (name, filterFn, dispatch) => {
   const data: any = {
-    // session: [],
-    // activeFilters: { commands: {}, input: '' },
     filterFns: {}
   }
   data.filterFns[name] = filterFn
   dispatch({ type: name, payload: { data: data } })
 }
 
-export const registerLogScriptRunnerAction = (event, commandName, commandFn, dispatch) => {
-  event.on('scriptRunner', commandName, (msg) => {
+export const registerLogScriptRunnerAction = (on, commandName, commandFn, dispatch) => {
+  on('scriptRunner', commandName, (msg) => {
     commandFn.log.apply(commandFn, msg.data)
     dispatch({ type: commandName, payload: { commandFn, message: msg.data } })
   })
 }
 
-export const registerInfoScriptRunnerAction = (event, commandName, commandFn, dispatch) => {
-  event.on('scriptRunner', commandName, (msg) => {
+export const registerInfoScriptRunnerAction = (on, commandName, commandFn, dispatch) => {
+  on('scriptRunner', commandName, (msg) => {
     commandFn.info.apply(commandFn, msg.data)
     dispatch({ type: commandName, payload: { commandFn, message: msg.data } })
   })
 }
 
-export const registerWarnScriptRunnerAction = (event, commandName, commandFn, dispatch) => {
-  event.on('scriptRunner', commandName, (msg) => {
+export const registerWarnScriptRunnerAction = (on, commandName, commandFn, dispatch) => {
+  on('scriptRunner', commandName, (msg) => {
     commandFn.warn.apply(commandFn, msg.data)
     dispatch({ type: commandName, payload: { commandFn, message: msg.data } })
   })
 }
 
-export const registerErrorScriptRunnerAction = (event, commandName, commandFn, dispatch) => {
-  event.on('scriptRunner', commandName, (msg) => {
+export const registerErrorScriptRunnerAction = (on, commandName, commandFn, dispatch) => {
+  on('scriptRunner', commandName, (msg) => {
     commandFn.error.apply(commandFn, msg.data)
     dispatch({ type: commandName, payload: { commandFn, message: msg.data } })
   })
 }
 
-export const registerRemixWelcomeTextAction = (welcomeText, dispatch) => {
-  dispatch({ type: 'welcomeText', payload: { welcomeText } })
-}
+// export const registerRemixWelcomeTextAction = (welcomeText, dispatch) => {
+//   dispatch({ type: 'welcomeText', payload: { welcomeText } })
+// }
 
-export const listenOnNetworkAction = async (props, isListening) => {
-  props.event.trigger('listenOnNetWork', [isListening])
+export const listenOnNetworkAction = async (event, isListening) => {
+  event.trigger('listenOnNetWork', [isListening])
 }
 
 export const initListeningOnNetwork = (props, dispatch) => {
-  props.txListener.event.register('newBlock', (block) => {
+  props.txListener.event.register(NewBlock, (block) => {
     if (!block.transactions || (block.transactions && !block.transactions.length)) {
-      dispatch({ type: 'emptyBlock', payload: { message: 0 } })
+      dispatch({ type: EmptyBlock, payload: { message: 0 } })
     }
   })
-  props.txListener.event.register('knownTransaction', () => {
+  props.txListener.event.register(KnownTransaction, () => {
   })
-  props.txListener.event.register('newCall', (tx, receipt) => {
+  props.txListener.event.register(NewCall, (tx, receipt) => {
     log(props, tx, receipt, dispatch)
     // log(this, tx, null)
   })
-  props.txListener.event.register('newTransaction', (tx, receipt) => {
+  props.txListener.event.register(NewTransaction, (tx, receipt) => {
     log(props, tx, receipt, dispatch)
   })
 
   const log = async (props, tx, receipt, dispatch) => {
     const resolvedTransaction = await props.txListener.resolvedTransaction(tx.hash)
     if (resolvedTransaction) {
-      var compiledContracts = null
+      let compiledContracts = null
       if (props._deps.compilersArtefacts.__last) {
         compiledContracts = await props._deps.compilersArtefacts.__last.getContracts()
       }
       await props.eventsDecoder.parseLogs(tx, resolvedTransaction.contractName, compiledContracts, async (error, logs) => {
         if (!error) {
-          await dispatch({ type: 'knownTransaction', payload: { message: [{ tx: tx, receipt: receipt, resolvedData: resolvedTransaction, logs: logs }] } })
+          await dispatch({ type: KnownTransaction, payload: { message: [{ tx: tx, receipt: receipt, resolvedData: resolvedTransaction, logs: logs }] } })
         }
       })
     } else {
-      // contract unknown - just displaying raw tx.
-      // logUnknownTX({ tx: tx, receipt: receipt })
-      await dispatch({ type: 'unknownTransaction', payload: { message: [{ tx: tx, receipt: receipt }] } })
+      await dispatch({ type: UnknownTransaction, payload: { message: [{ tx: tx, receipt: receipt }] } })
     }
   }
 
   props.txListener.event.register('debuggingRequested', async (hash) => {
     // TODO should probably be in the run module
     if (!await props.options.appManager.isActive('debugger')) await props.options.appManager.activatePlugin('debugger')
-    props.thisState.call('menuicons', 'select', 'debugger')
-    props.thisState.call('debugger', 'debug', hash)
+    props.call('menuicons', 'select', 'debugger')
+    props.call('debugger', 'debug', hash)
   })
 }

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

 import React from 'react' // eslint-disable-line
 
-const checkTxStatus = (tx, type) => {
+const CheckTxStatus = ({ tx, type }) => {
   if (tx.status === '0x1' || tx.status === true) {
     return (<i className='txStatus succeeded fas fa-check-circle'></i>)
   }
@@ -13,4 +13,4 @@ const checkTxStatus = (tx, type) => {
   }
 }
 
-export default checkTxStatus
+export default CheckTxStatus

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

@@ -4,7 +4,7 @@ import helper from 'apps/remix-ide/src/lib/helper'
 const remixLib = require('@remix-project/remix-lib')
 var typeConversion = remixLib.execution.typeConversion
 
-const context = (opts, blockchain) => {
+const Context = ({ opts, blockchain }) => {
   const data = opts.tx || ''
   const from = opts.from ? helper.shortenHexData(opts.from) : ''
   let to = opts.to
@@ -59,4 +59,4 @@ const context = (opts, blockchain) => {
   }
 }
 
-export default context
+export default Context

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

 import React, { useState } from 'react'  // eslint-disable-line
 
 import helper from 'apps/remix-ide/src/lib/helper'
-import checkTxStatus from './ChechTxStatus'
+import CheckTxStatus from './ChechTxStatus' // eslint-disable-line
 import showTable from './Table'
 import { ModalDialog } from '@remix-ui/modal-dialog' // eslint-disable-line
 
 const remixLib = require('@remix-project/remix-lib')
 var typeConversion = remixLib.execution.typeConversion
 
-const renderCall = (tx, resolvedData, logs, index, props, showTableHash, txDetails) => {
+const RenderCall = ({ tx, resolvedData, logs, index, plugin, showTableHash, txDetails }) => {
   const to = resolvedData.contractName + '.' + resolvedData.fn
   const from = tx.from ? tx.from : ' - '
   const input = tx.input ? helper.shortenHexData(tx.input) : ''
@@ -23,14 +23,14 @@ const renderCall = (tx, resolvedData, logs, index, props, showTableHash, txDetai
         message="Cannot debug this call. Debugging calls is only possible in JavaScript VM mode."
       />)
     } else {
-      props.event.trigger('debuggingRequested', [tx.hash])
+      plugin.event.trigger('debuggingRequested', [tx.hash])
     }
   }
 
   return (
     <span id={`tx${tx.hash}`} key={index}>
       <div className="log" onClick={(event) => txDetails(event, tx)}>
-        {checkTxStatus(tx, txType)}
+        <CheckTxStatus tx={tx} type={txType} />
         <span className="txLog">
           <span className="tx">[call]</span>
           <div className='txItem'><span className='txItemTitle'>from:</span> {from}</div>
@@ -62,4 +62,4 @@ const renderCall = (tx, resolvedData, logs, index, props, showTableHash, txDetai
   )
 }
 
-export default renderCall
+export default RenderCall

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

 
 import React, { useState } from 'react' // eslint-disable-line
 import { ModalDialog } from '@remix-ui/modal-dialog' // eslint-disable-line
-import checkTxStatus from './ChechTxStatus'
-import context from './Context'
+import CheckTxStatus from './ChechTxStatus' // eslint-disable-line
+import Context from './Context' // eslint-disable-line
 import showTable from './Table'
 
 const remixLib = require('@remix-project/remix-lib')
 const typeConversion = remixLib.execution.typeConversion
 
-const renderKnownTransactions = (tx, receipt, resolvedData, logs, index, props, showTableHash, txDetails) => {
+const RenderKnownTransactions = ({ tx, receipt, resolvedData, logs, index, plugin, showTableHash, txDetails }) => {
   const debug = (event, tx) => {
     event.stopPropagation()
     if (tx.isCall && tx.envMode !== 'vm') {
@@ -18,7 +18,7 @@ const renderKnownTransactions = (tx, receipt, resolvedData, logs, index, props,
         message="Cannot debug this call. Debugging calls is only possible in JavaScript VM mode."
       />)
     } else {
-      props.event.trigger('debuggingRequested', [tx.hash])
+      plugin.event.trigger('debuggingRequested', [tx.hash])
     }
   }
 
@@ -26,11 +26,12 @@ const renderKnownTransactions = (tx, receipt, resolvedData, logs, index, props,
   const to = resolvedData.contractName + '.' + resolvedData.fn
   // const obj = { from, to }
   const txType = 'knownTx'
+  const options = { from, to, tx }
   return (
     <span id={`tx${tx.hash}`} key={index}>
       <div className="log" onClick={(event) => txDetails(event, tx)}>
-        {checkTxStatus(receipt, txType)}
-        {context({ from, to, tx }, props.blockchain)}
+        <CheckTxStatus tx={tx} type={txType} />
+        <Context opts = { options } blockchain={plugin.blockchain} />
         <div className='buttons'>
           <div className='debug btn btn-primary btn-sm' data-shared='txLoggerDebugButton' data-id={`txLoggerDebugButton${tx.hash}`} onClick={(event) => debug(event, tx)}>Debug</div>
         </div>
@@ -58,4 +59,4 @@ const renderKnownTransactions = (tx, receipt, resolvedData, logs, index, props,
   )
 }
 
-export default renderKnownTransactions
+export default RenderKnownTransactions

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

 import React, { useState } from 'react' // eslint-disable-line
 import { ModalDialog } from '@remix-ui/modal-dialog'// eslint-disable-line
-import checkTxStatus from './ChechTxStatus'
-import context from './Context'
+import CheckTxStatus from './ChechTxStatus' // eslint-disable-line
+import Context from './Context' // eslint-disable-line
 import showTable from './Table'
 
-const renderUnKnownTransactions = (tx, receipt, index, props, showTableHash, txDetails) => {
+const RenderUnKnownTransactions = ({ tx, receipt, index, plugin, showTableHash, txDetails }) => {
   const debug = (event, tx) => {
     event.stopPropagation()
     if (tx.isCall && tx.envMode !== 'vm') {
@@ -14,7 +14,7 @@ const renderUnKnownTransactions = (tx, receipt, index, props, showTableHash, txD
         message="Cannot debug this call. Debugging calls is only possible in JavaScript VM mode."
       />)
     } else {
-      props.event.trigger('debuggingRequested', [tx.hash])
+      plugin.event.trigger('debuggingRequested', [tx.hash])
     }
   }
 
@@ -22,11 +22,12 @@ const renderUnKnownTransactions = (tx, receipt, index, props, showTableHash, txD
   const to = tx.to
   // const obj = { from, to }
   const txType = 'unknown' + (tx.isCall ? 'Call' : 'Tx')
+  const options = { from, to, tx }
   return (
     <span id={`tx${tx.hash}`} key={index}>
       <div className="log" onClick={(event) => txDetails(event, tx)}>
-        {checkTxStatus(receipt || tx, txType)}
-        {context({ from, to, tx }, props.blockchain)}
+        <CheckTxStatus tx={tx} type={txType} />
+        <Context opts = { options } blockchain={plugin.blockchain} />
         <div className='buttons'>
           <div className='debug btn btn-primary btn-sm' data-shared='txLoggerDebugButton' data-id={`txLoggerDebugButton${tx.hash}`} onClick={(event) => debug(event, tx)}>Debug</div>
         </div>
@@ -51,4 +52,4 @@ const renderUnKnownTransactions = (tx, receipt, index, props, showTableHash, txD
   )
 }
 
-export default renderUnKnownTransactions
+export default RenderUnKnownTransactions

libs/remix-ui/terminal/src/lib/reducers/remixWelcome.ts

-export const remixWelcome = () => {
-  return `<div>
-    <div> - Welcome to Remix {props.version} - </div>
-    <br/>
-    <div>You can use this terminal to: </div>
-    <ul className='ul'>
-      <li>Check transactions details and start debugging.</li>
-      <li>Execute JavaScript scripts:
-        <br />
-        <i> - Input a script directly in the command line interface </i>
-        <br />
-        <i> - Select a Javascript file in the file explorer and then run \`remix.execute()\` or \`remix.exeCurrent()\`  in the command line interface  </i>
-        <br />
-        <i> - Right click on a JavaScript file in the file explorer and then click \`Run\` </i>
-      </li>
-    </ul>
-    <div>The following libraries are accessible:</div>
-    <ul className='ul'>
-      <li><a target="_blank" href="https://web3js.readthedocs.io/en/1.0/">web3 version 1.0.0</a></li>
-      <li><a target="_blank" href="https://docs.ethers.io">ethers.js</a> </li>
-      <li><a target="_blank" href="https://www.npmjs.com/package/swarmgw">swarmgw</a> </li>
-      <li>remix (run remix.help() for more info)</li>
-    </ul>
-  </div>`
-}

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

@@ -10,9 +10,9 @@ import './remix-ui-terminal.css'
 import vm from 'vm'
 import javascriptserialize from 'javascript-serialize'
 import jsbeautify from 'js-beautify'
-import renderUnKnownTransactions from './components/RenderUnknownTransactions'
-import renderCall from './components/RenderCall'
-import renderKnownTransactions from './components/RenderKnownTransactions'
+import RenderUnKnownTransactions from './components/RenderUnknownTransactions' // eslint-disable-line
+import RenderCall from './components/RenderCall' // eslint-disable-line
+import RenderKnownTransactions from './components/RenderKnownTransactions' // eslint-disable-line
 import parse from 'html-react-parser'
 import { RemixUiTerminalProps } from './types/terminalTypes'
 import { wrapScript } from './utils/wrapScript'
@@ -24,6 +24,7 @@ export interface ClipboardEvent<T = Element> extends SyntheticEvent<T, any> {
 }
 
 export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
+  const { call, _deps, on, config, event, gistHandler, logHtml, logResponse, version } = props.plugin
   const [toggleDownUp, setToggleDownUp] = useState('fa-angle-double-down')
   const [_cmdIndex, setCmdIndex] = useState(-1)
   const [_cmdTemp, setCmdTemp] = useState('')
@@ -73,20 +74,20 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   }
 
   useEffect(() => {
-    scriptRunnerDispatch({ type: 'html', payload: { message: props.logHtml } })
-  }, [props.logHtml])
+    scriptRunnerDispatch({ type: 'html', payload: { message: logHtml } })
+  }, [logHtml])
 
   useEffect(() => {
-    scriptRunnerDispatch({ type: 'log', payload: { message: props.logResponse } })
-  }, [props.logResponse])
+    scriptRunnerDispatch({ type: 'log', payload: { message: logResponse } })
+  }, [logResponse])
 
   // events
   useEffect(() => {
-    initListeningOnNetwork(props, scriptRunnerDispatch)
-    registerLogScriptRunnerAction(props.thisState, 'log', newstate.commands, scriptRunnerDispatch)
-    registerInfoScriptRunnerAction(props.thisState, 'info', newstate.commands, scriptRunnerDispatch)
-    registerWarnScriptRunnerAction(props.thisState, 'warn', newstate.commands, scriptRunnerDispatch)
-    registerErrorScriptRunnerAction(props.thisState, 'error', newstate.commands, scriptRunnerDispatch)
+    initListeningOnNetwork(props.plugin, scriptRunnerDispatch)
+    registerLogScriptRunnerAction(on, 'log', newstate.commands, scriptRunnerDispatch)
+    registerInfoScriptRunnerAction(on, 'info', newstate.commands, scriptRunnerDispatch)
+    registerWarnScriptRunnerAction(on, 'warn', newstate.commands, scriptRunnerDispatch)
+    registerErrorScriptRunnerAction(on, 'error', newstate.commands, scriptRunnerDispatch)
     registerCommandAction('html', _blocksRenderer('html'), { activate: true }, dispatch)
     registerCommandAction('log', _blocksRenderer('log'), { activate: true }, dispatch)
     registerCommandAction('info', _blocksRenderer('info'), { activate: true }, dispatch)
@@ -100,11 +101,11 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
         if (output) scriptRunnerDispatch({ type: 'script', payload: { message: '5' } })
       })
     }, { activate: true }, dispatch)
-  }, [props.thisState.autoCompletePopup, autoCompletState.text])
+  }, [autoCompletState.text])
 
   useEffect(() => {
     scrollToBottom()
-  }, [newstate.journalBlocks.length, props.logHtml.length])
+  }, [newstate.journalBlocks.length, logHtml.length])
 
   function execute (file, cb) {
     function _execute (content, cb) {
@@ -117,12 +118,12 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
     }
 
     if (typeof file === 'undefined') {
-      var content = props._deps.editor.currentContent()
+      var content = _deps.editor.currentContent()
       _execute(content, cb)
       return
     }
 
-    var provider = props._deps.fileManager.fileProviderOf(file)
+    var provider = _deps.fileManager.fileProviderOf(file)
 
     if (!provider) {
       // toolTip(`provider for path ${file} not found`)
@@ -144,7 +145,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   }
 
   function loadgist (id, cb) {
-    props.gistHandler.loadFromGist({ gist: id }, props._deps.fileManager)
+    gistHandler.loadFromGist({ gist: id }, _deps.fileManager)
     if (cb) cb()
   }
 
@@ -167,9 +168,9 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
     try {
       let result: any // eslint-disable-line
       if (script.trim().startsWith('git')) {
-        // result = await this.call('git', 'execute', script)
+        // result = await this.call('git', 'execute', script) code might be used in the future
       } else {
-        result = await props.thisState.call('scriptRunner', 'execute', script)
+        result = await call('scriptRunner', 'execute', script)
       }
       done()
     } catch (error) {
@@ -182,10 +183,10 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
     event.stopPropagation()
     if (toggleDownUp === 'fa-angle-double-down') {
       setToggleDownUp('fa-angle-double-up')
-      props.event.trigger('resize', [])
+      event.trigger('resize', [])
     } else {
-      const terminalTopOffset = props.config.config.get('terminal-top-offset')
-      props.event.trigger('resize', [terminalTopOffset])
+      const terminalTopOffset = config.get('terminal-top-offset')
+      event.trigger('resize', [terminalTopOffset])
       setToggleDownUp('fa-angle-double-down')
     }
   }
@@ -230,7 +231,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
         setAutoCompleteState(prevState => ({ ...prevState, showSuggestions: false }))
       }
     } else if (newstate._commandHistory.length && event.which === 38 && !autoCompletState.showSuggestions && (autoCompletState.userInput === '')) {
-      // if (autoCompletState.commandHistoryIndex < 1) {
       event.preventDefault()
       setAutoCompleteState(prevState => ({ ...prevState, userInput: newstate._commandHistory[0] }))
     } else if (event.which === 38 && autoCompletState.showSuggestions) {
@@ -240,8 +240,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
       }
       setAutoCompleteState(prevState => ({ ...prevState, activeSuggestion: suggestionCount - 1, userInput: Object.keys(autoCompletState.data._options[autoCompletState.activeSuggestion]).toString() }))
     } else if (event.which === 38 && !autoCompletState.showSuggestions) { // <arrowUp>
-      // const len = _cmdHistory.length
-      // if (len === 0) event.preventDefault()
       if (cmdHistory.length - 1 > _cmdIndex) {
         setCmdIndex(prevState => prevState++)
       }
@@ -277,11 +275,10 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   const onMouseMove: any = (e: MouseEvent) => {
     e.preventDefault()
     if (dragging && leftHeight && separatorYPosition) {
-      // const newEditorHeight = leftHeight - e.clientY + separatorYPosition
       const newLeftHeight = leftHeight + separatorYPosition - e.clientY
       setSeparatorYPosition(e.clientY)
       setLeftHeight(newLeftHeight)
-      props.event.trigger('resize', [newLeftHeight + 32])
+      event.trigger('resize', [newLeftHeight + 32])
     }
   }
 
@@ -306,7 +303,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
 
   React.useEffect(() => {
     const leftRef = document.getElementById('terminal-view')
-    // const editorRef = document.getElementById('mainPanelPluginsContainer-id')
     if (leftRef) {
       if (!leftHeight) {
         setLeftHeight(leftRef.offsetHeight)
@@ -364,10 +360,10 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   }
   /* start of autoComplete */
 
-  const listenOnNetwork = (event: any) => {
-    const isListening = event.target.checked
+  const listenOnNetwork = (e: any) => {
+    const isListening = e.target.checked
     setIsListeningOnNetwork(isListening)
-    listenOnNetworkAction(props, isListening)
+    listenOnNetworkAction(event, isListening)
   }
 
   const onChange = (event: any) => {
@@ -408,7 +404,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
       }
       setAutoCompleteState(prevState => ({ ...prevState, activeSuggestion: suggestionCount + 1 }))
     }
-    // props.thisState.event.trigger('handleSelect', [text])
   }
 
   const txDetails = (event, tx) => {
@@ -450,7 +445,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   return (
     <div style={{ height: '323px', flexGrow: 1 }} className='panel'>
       <div className="bar">
-        {/* ${self._view.dragbar} */}
         <div className="dragbarHorizontal" onMouseDown={mousedown} id='dragId'></div>
         <div className="menu border-top border-dark bg-light" data-id="terminalToggleMenu">
           {/* ${self._view.icon} */}
@@ -505,7 +499,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
         }}></div>
         <div className="terminal">
           <div id='journal' className='journal' data-id='terminalJournal'>
-            {!clearConsole && <TerminalWelcomeMessage packageJson={props.version}/>}
+            {!clearConsole && <TerminalWelcomeMessage packageJson={version}/>}
             {newstate.journalBlocks && newstate.journalBlocks.map((x, index) => {
               if (x.name === 'emptyBlock') {
                 return (
@@ -516,11 +510,11 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
                 )
               } else if (x.name === 'unknownTransaction') {
                 return x.message.filter(x => x.tx.hash.includes(searchInput) || x.tx.from.includes(searchInput) || (x.tx.to.includes(searchInput))).map((trans) => {
-                  return (<div className='px-4 block' data-id={`block_tx${trans.tx.hash}`} key={index}> {renderUnKnownTransactions(trans.tx, trans.receipt, index, props, showTableHash, txDetails)} </div>)
+                  return (<div className='px-4 block' data-id={`block_tx${trans.tx.hash}`} key={index}> { <RenderUnKnownTransactions tx={trans.tx} receipt={trans.receipt} index={index} plugin={props.plugin} showTableHash={showTableHash} txDetails={txDetails} />} </div>)
                 })
               } else if (x.name === 'knownTransaction') {
                 return x.message.map((trans) => {
-                  return (<div className='px-4 block' data-id={`block_tx${trans.tx.hash}`} key={index}> { trans.tx.isCall ? renderCall(trans.tx, trans.resolvedData, trans.logs, index, props, showTableHash, txDetails) : renderKnownTransactions(trans.tx, trans.receipt, trans.resolvedData, trans.logs, index, props, showTableHash, txDetails)} </div>)
+                  return (<div className='px-4 block' data-id={`block_tx${trans.tx.hash}`} key={index}> { trans.tx.isCall ? <RenderCall tx={trans.tx} resolvedData={trans.resolvedData} logs={trans.logs} index={index} plugin={props.plugin} showTableHash={showTableHash} txDetails={txDetails} /> : (<RenderKnownTransactions tx = { trans.tx } receipt = { trans.receipt } resolvedData = { trans.resolvedData } logs = {trans.logs } index = { index } plugin = { props.plugin } showTableHash = { showTableHash } txDetails = { txDetails } />) } </div>)
                 })
               } else if (Array.isArray(x.message)) {
                 return x.message.map((msg, i) => {
@@ -536,7 +530,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
                 })
               } else {
                 return (
-                  <div className="px-4 block" data-id="block_null" key={index}> <span className={`${x.style}`}> {x.message}</span></div>
+                  <div className="px-4 block" data-id="block_null" key={index}> <span className={x.style}> {x.message}</span></div>
                 )
               }
             })}

libs/remix-ui/terminal/src/lib/types/terminalTypes.ts

@@ -6,24 +6,13 @@ export interface ROOTS {
     idx: number
 }
 
+export const KnownTransaction = 'knownTransaction'
+export const UnknownTransaction = 'unkownTransaction'
+export const EmptyBlock = 'emptyBlock'
+export const NewTransaction = 'newTransaction'
+export const NewBlock = 'newBlock'
+export const NewCall = 'newCall'
+
 export interface RemixUiTerminalProps {
-    propterties: any
-    event: any
-    blockchain: any
-    api: any
-    options: any
-    version: any
-    config: any
-    thisState: any
-    commandHelp: any,
-    _deps: any,
-    fileImport: any,
-    gistHandler: any,
-    sourceHighlighter: any,
-    registry: any,
-    commands: any,
-    txListener: any,
-    eventsDecoder: any,
-    logHtml: any,
-    logResponse: any
+    plugin: any
 }

nx.json

@@ -122,12 +122,6 @@
       "tags": []
     },
     "remix-ui-terminal": {
-<<<<<<< HEAD
-=======
-          "tags": []
-    },
-    "solidity-compiler": {
->>>>>>> 0e36c001f098047cf4fec47ae9611d1e4e4a8355
       "tags": []
     },
     "solidity-compiler": {