diff --git a/apps/remix-ide/src/app/panels/terminal.js b/apps/remix-ide/src/app/panels/terminal.js
index a75f87187c..64404fe87f 100644
--- a/apps/remix-ide/src/app/panels/terminal.js
+++ b/apps/remix-ide/src/app/panels/terminal.js
@@ -1,10 +1,10 @@
 /* global Node, requestAnimationFrame */
-
+import React from 'react' // eslint-disable-line
 import ReactDOM from 'react-dom'
+import { RemixUiTerminal } from '@remix-ui/terminal'
 import { Plugin } from '@remixproject/engine'
 import * as packageJson from '../../../../../package.json'
 import * as remixBleach from '../../lib/remixBleach'
-import { RemixUiTerminal } from '@remix-ui/terminal'
 
 var yo = require('yo-yo')
 var javascriptserialize = require('javascript-serialize')
@@ -40,7 +40,7 @@ class Terminal extends Plugin {
   constructor (opts, api) {
     super(profile)
     this.element = document.createElement('div')
-    this.element.setAttribute('id', 'terminalView  ')
+    this.element.setAttribute('id', 'terminalView')
     var self = this
     self.event = new EventManager()
     self.blockchain = opts.blockchain
@@ -98,561 +98,565 @@ class Terminal extends Plugin {
   }
 
   onActivation () {
-    this.on('scriptRunner', 'log', (msg) => {
-      this.commands.log.apply(this.commands, msg.data)
-    })
-    this.on('scriptRunner', 'info', (msg) => {
-      this.commands.info.apply(this.commands, msg.data)
-    })
-    this.on('scriptRunner', 'warn', (msg) => {
-      this.commands.warn.apply(this.commands, msg.data)
-    })
-    this.on('scriptRunner', 'error', (msg) => {
-      this.commands.error.apply(this.commands, msg.data)
-    })
-  }
-
-  onDeactivation () {
-    this.off('scriptRunner', 'log')
-    this.off('scriptRunner', 'info')
-    this.off('scriptRunner', 'warn')
-    this.off('scriptRunner', 'error')
-  }
-
-  log (message) {
-    var command = this.commands[message.type]
-    if (typeof command === 'function') {
-      if (typeof message.value === 'string' && message.type === 'html') {
-        var el = document.createElement('div')
-        el.innerHTML = remixBleach.sanitize(message.value, {
-          list: [
-            'a',
-            'b',
-            'p',
-            'em',
-            'strong',
-            'div',
-            'span',
-            'ul',
-            'li',
-            'ol',
-            'hr'
-          ]
-        })
-        message.value = el
-      }
-      command(message.value)
-    };
-  }
-
-  logHtml (html) {
-    var command = this.commands.html
-    if (typeof command === 'function') command(html)
+    this.renderComponent()
   }
 
-  focus () {
-    if (this._view.input) this._view.input.focus()
-  }
-
-  // render () {
-  //   var self = this
-  //   if (self._view.el) return self._view.el
-  //   self._view.journal = yo`<div id="journal" class=${css.journal} data-id="terminalJournal"></div>`
-  //   self._view.input = yo`
-  //     <span class=${css.input} onload=${() => { this.focus() }} onpaste=${paste} onkeydown=${change}></span>
-  //   `
-  //   self._view.input.setAttribute('spellcheck', 'false')
-  //   self._view.input.setAttribute('contenteditable', 'true')
-  //   self._view.input.setAttribute('id', 'terminalCliInput')
-  //   self._view.input.setAttribute('data-id', 'terminalCliInput')
-
-  //   self._view.input.innerText = '\n'
-  //   self._view.cli = yo`
-  //     <div id="terminalCli" data-id="terminalCli" class="${css.cli}" onclick=${focusinput}>
-  //       <span class=${css.prompt}>${'>'}</span>
-  //       ${self._view.input}
-  //     </div>
-  //   `
-
-  //   self._view.icon = yo`
-  //     <i onmouseenter=${hover} onmouseleave=${hover} onmousedown=${minimize}
-  //     class="mx-2 ${css.toggleTerminal} fas fa-angle-double-down" data-id="terminalToggleIcon"></i>`
-  //   self._view.dragbar = yo`
-  //     <div onmousedown=${mousedown} class=${css.dragbarHorizontal}></div>`
-
-  //   self._view.pendingTxCount = yo`<div class="mx-2" title='Pending Transactions'>0</div>`
-  //   self._view.inputSearch = yo`<input
-  //     spellcheck="false"
-  //     type="text"
-  //     class="border ${css.filter} form-control"
-  //     id="searchInput"
-  //     onkeydown=${filter}
-  //     placeholder="Search with transaction hash or address"
-  //     data-id="terminalInputSearch">
-  //   </input>`
-  //   self._view.bar = yo`
-  //     <div class="${css.bar}">
-  //       ${self._view.dragbar}
-  //       <div class="${css.menu} border-top border-dark bg-light" data-id="terminalToggleMenu">
-  //         ${self._view.icon}
-  //         <div class="mx-2" id="clearConsole" data-id="terminalClearConsole" onclick=${clear}>
-  //           <i class="fas fa-ban" aria-hidden="true" title="Clear console"
-  //           onmouseenter=${hover} onmouseleave=${hover}></i>
-  //         </div>
-  //         ${self._view.pendingTxCount}
-  //         <div class=${css.verticalLine}></div>
-  //         <div class="pt-1 h-80 mx-3 align-items-center ${css.listenOnNetwork} custom-control custom-checkbox">
-  //           <input
-  //             class="custom-control-input"
-  //             id="listenNetworkCheck"
-  //             onchange=${listenOnNetwork}
-  //             type="checkbox"
-  //             title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you"
-  //           >
-  //           <label
-  //             class="pt-1 form-check-label custom-control-label text-nowrap""
-  //             title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you"
-  //             for="listenNetworkCheck"
-  //           >
-  //             listen on network
-  //           </label>
-  //         </div>
-  //         <div class=${css.search}>
-  //           <i class="fas fa-search ${css.searchIcon} bg-light" aria-hidden="true"></i>
-  //           ${self._view.inputSearch}
-  //         </div>
-  //       </div>
-  //     </div>
-  //   `
-  //   self._view.term = yo`
-  //     <div class="${css.terminal_container}" tabindex="-1" data-id="terminalContainer" onscroll=${throttle(reattach, 10)} onkeydown=${focusinput}>
-  //       ${self._components.autoCompletePopup.render()}
-  //       <div data-id="terminalContainerDisplay" style="
-  //         position: absolute;
-  //         height: 100%;
-  //         width: 100%;
-  //         opacity: 0.1;
-  //         z-index: -1;
-  //       "></div>
-  //       <div class=${css.terminal}>
-  //           ${self._view.journal}
-  //           ${self._view.cli}
-  //       </div>
-  //     </div>
-  //   `
-  //   self._view.el = yo`
-  //     <div class="${css.panel}" style="height: 180px;">
-  //       ${self._view.bar}
-  //       ${self._view.term}
-  //     </div>
-  //   `
-  //   setInterval(async () => {
-  //     try {
-  //       self._view.pendingTxCount.innerHTML = await self.call('udapp', 'pendingTransactionsCount')
-  //     } catch (err) {}
-  //   }, 1000)
-
-  //   function listenOnNetwork (ev) {
-  //     self.event.trigger('listenOnNetWork', [ev.currentTarget.checked])
-  //   }
-  //   function paste (event) {
-  //     const selection = window.getSelection()
-  //     if (!selection.rangeCount) return false
-  //     event.preventDefault()
-  //     event.stopPropagation()
-  //     var clipboard = (event.clipboardData || window.clipboardData)
-  //     var text = clipboard.getData('text/plain')
-  //     text = text.replace(/[^\x20-\xFF]/gi, '') // remove non-UTF-8 characters
-  //     var temp = document.createElement('div')
-  //     temp.innerHTML = text
-  //     var textnode = document.createTextNode(temp.textContent)
-  //     selection.getRangeAt(0).insertNode(textnode)
-  //     selection.empty()
-  //     self.scroll2bottom()
-  //     placeCaretAtEnd(event.currentTarget)
-  //   }
-  //   function placeCaretAtEnd (el) {
-  //     el.focus()
-  //     var range = document.createRange()
-  //     range.selectNodeContents(el)
-  //     range.collapse(false)
-  //     var sel = window.getSelection()
-  //     sel.removeAllRanges()
-  //     sel.addRange(range)
-  //   }
-  //   function throttle (fn, wait) {
-  //     var time = Date.now()
-  //     return function debounce () {
-  //       if ((time + wait - Date.now()) < 0) {
-  //         fn.apply(this, arguments)
-  //         time = Date.now()
-  //       }
-  //     }
-  //   }
-  //   var css2 = csjs`
-  //     .anchor            {
-  //       position         : static;
-  //       border-top       : 2px dotted blue;
-  //       height           : 10px;
-  //     }
-  //     .overlay           {
-  //       position         : absolute;
-  //       width            : 100%;
-  //       display          : flex;
-  //       align-items      : center;
-  //       justify-content  : center;
-  //       bottom           : 0;
-  //       right            : 15px;
-  //       min-height       : 20px;
-  //     }
-  //     .text              {
-  //       z-index          : 2;
-  //       color            : black;
-  //       font-weight      : bold;
-  //       pointer-events   : none;
-  //     }
-  //     .background        {
-  //       z-index          : 1;
-  //       opacity          : 0.8;
-  //       background-color : #a6aeba;
-  //       cursor           : pointer;
-  //     }
-  //     .ul                 {
-  //       padding-left     : 20px;
-  //       padding-bottom   : 5px;
-  //     }
-  //   `
-  //   var text = yo`<div class="${css2.overlay} ${css2.text}"></div>`
-  //   var background = yo`<div class="${css2.overlay} ${css2.background}"></div>`
-  //   var placeholder = yo`<div class=${css2.anchor}>${background}${text}</div>`
-  //   var inserted = false
-
-  //   window.addEventListener('resize', function (event) {
-  //     self.event.trigger('resize', [])
-  //     self.event.trigger('resize', [])
+  // onActivation () {
+  //   this.on('scriptRunner', 'log', (msg) => {
+  //     this.commands.log.apply(this.commands, msg.data)
+  //   })
+  //   this.on('scriptRunner', 'info', (msg) => {
+  //     this.commands.info.apply(this.commands, msg.data)
+  //   })
+  //   this.on('scriptRunner', 'warn', (msg) => {
+  //     this.commands.warn.apply(this.commands, msg.data)
+  //   })
+  //   this.on('scriptRunner', 'error', (msg) => {
+  //     this.commands.error.apply(this.commands, msg.data)
   //   })
+  // }
 
-  //   function focusinput (event) {
-  //     if (
-  //       event.altKey ||
-  //       event.ctrlKey ||
-  //       event.metaKey ||
-  //       event.shiftKey ||
-  //       event.key === 'Down' ||
-  //       event.key === 'ArrowDown' ||
-  //       event.key === 'Up' ||
-  //       event.key === 'ArrowUp' ||
-  //       event.key === 'Left' ||
-  //       event.key === 'ArrowLeft' ||
-  //       event.key === 'Right' ||
-  //       event.key === 'ArrowRight' ||
-  //       event.key === 'Esc' ||
-  //       event.key === 'Escape'
-  //     ) return
-
-  //     refocus()
-  //   }
+  // onDeactivation () {
+  //   this.off('scriptRunner', 'log')
+  //   this.off('scriptRunner', 'info')
+  //   this.off('scriptRunner', 'warn')
+  //   this.off('scriptRunner', 'error')
+  // }
 
-  //   function refocus () {
-  //     self._view.input.focus()
-  //     reattach({ currentTarget: self._view.term })
-  //     delete self.scroll2bottom
-  //     self.scroll2bottom()
-  //   }
-  //   function reattach (event) {
-  //     var el = event.currentTarget
-  //     var isBottomed = el.scrollHeight - el.scrollTop - el.clientHeight < 30
-  //     if (isBottomed) {
-  //       if (inserted) {
-  //         text.innerText = ''
-  //         background.onclick = undefined
-  //         if (placeholder.parentElement) self._view.journal.removeChild(placeholder)
-  //       }
-  //       inserted = false
-  //       delete self.scroll2bottom
-  //     } else {
-  //       if (!inserted) self._view.journal.appendChild(placeholder)
-  //       inserted = true
-  //       check()
-  //       if (!placeholder.nextElementSibling) {
-  //         placeholder.style.display = 'none'
-  //       } else {
-  //         placeholder.style = ''
-  //       }
-  //       self.scroll2bottom = function () {
-  //         var next = placeholder.nextElementSibling
-  //         if (next) {
-  //           placeholder.style = ''
-  //           check()
-  //           var messages = 1
-  //           while ((next = next.nextElementSibling)) messages += 1
-  //           text.innerText = `${messages} new unread log entries`
-  //         } else {
-  //           placeholder.style.display = 'none'
-  //         }
-  //       }
-  //     }
-  //   }
-  //   function check () {
-  //     var pos1 = self._view.term.offsetHeight + self._view.term.scrollTop - (self._view.el.offsetHeight * 0.15)
-  //     var pos2 = placeholder.offsetTop
-  //     if ((pos1 - pos2) > 0) {
-  //       text.style.display = 'none'
-  //       background.style.position = 'relative'
-  //       background.style.opacity = 0.3
-  //       background.style.right = 0
-  //       background.style.borderBox = 'content-box'
-  //       background.style.padding = '2px'
-  //       background.style.height = (self._view.journal.offsetHeight - (placeholder.offsetTop + placeholder.offsetHeight)) + 'px'
-  //       background.onclick = undefined
-  //       background.style.cursor = 'default'
-  //       background.style.pointerEvents = 'none'
-  //     } else {
-  //       background.style = ''
-  //       text.style = ''
-  //       background.onclick = function (event) {
-  //         placeholder.scrollIntoView()
-  //         check()
-  //       }
-  //     }
-  //   }
-  //   function hover (event) { event.currentTarget.classList.toggle(css.hover) }
-  //   function minimize (event) {
-  //     event.preventDefault()
-  //     event.stopPropagation()
-  //     if (event.button === 0) {
-  //       var classList = self._view.icon.classList
-  //       classList.toggle('fa-angle-double-down')
-  //       classList.toggle('fa-angle-double-up')
-  //       self.event.trigger('resize', [])
-  //     }
-  //   }
-  //   var filtertimeout = null
-  //   function filter (event) {
-  //     if (filtertimeout) {
-  //       clearTimeout(filtertimeout)
-  //     }
-  //     filtertimeout = setTimeout(() => {
-  //       self.updateJournal({ type: 'search', value: self._view.inputSearch.value })
-  //       self.scroll2bottom()
-  //     }, 500)
-  //   }
-  //   function clear (event) {
-  //     refocus()
-  //     self._view.journal.innerHTML = ''
-  //   }
-  //   // ----------------- resizeable ui ---------------
-  //   function mousedown (event) {
-  //     event.preventDefault()
-  //     if (event.which === 1) {
-  //       moveGhostbar(event)
-  //       document.body.appendChild(ghostbar)
-  //       document.addEventListener('mousemove', moveGhostbar)
-  //       document.addEventListener('mouseup', removeGhostbar)
-  //       document.addEventListener('keydown', cancelGhostbar)
-  //     }
-  //   }
-  //   function cancelGhostbar (event) {
-  //     if (event.keyCode === 27) {
-  //       document.body.removeChild(ghostbar)
-  //       document.removeEventListener('mousemove', moveGhostbar)
-  //       document.removeEventListener('mouseup', removeGhostbar)
-  //       document.removeEventListener('keydown', cancelGhostbar)
-  //     }
-  //   }
-  //   function moveGhostbar (event) { // @NOTE HORIZONTAL ghostbar
-  //     ghostbar.style.top = self._api.getPosition(event) + 'px'
-  //   }
-  //   function removeGhostbar (event) {
-  //     if (self._view.icon.classList.contains('fa-angle-double-up')) {
-  //       self._view.icon.classList.toggle('fa-angle-double-down')
-  //       self._view.icon.classList.toggle('fa-angle-double-up')
+  // log (message) {
+  //   var command = this.commands[message.type]
+  //   if (typeof command === 'function') {
+  //     if (typeof message.value === 'string' && message.type === 'html') {
+  //       var el = document.createElement('div')
+  //       el.innerHTML = remixBleach.sanitize(message.value, {
+  //         list: [
+  //           'a',
+  //           'b',
+  //           'p',
+  //           'em',
+  //           'strong',
+  //           'div',
+  //           'span',
+  //           'ul',
+  //           'li',
+  //           'ol',
+  //           'hr'
+  //         ]
+  //       })
+  //       message.value = el
   //     }
-  //     document.body.removeChild(ghostbar)
-  //     document.removeEventListener('mousemove', moveGhostbar)
-  //     document.removeEventListener('mouseup', removeGhostbar)
-  //     document.removeEventListener('keydown', cancelGhostbar)
-  //     self.event.trigger('resize', [self._api.getPosition(event)])
-  //   }
+  //     command(message.value)
+  //   };
+  // }
 
-  //   self._cmdHistory = []
-  //   self._cmdIndex = -1
-  //   self._cmdTemp = ''
-
-  //   var intro = yo`
-  //     <div><div> - Welcome to Remix ${packageJson.version} - </div><br>
-  //     <div>You can use this terminal to: </div>
-  //     <ul class=${css2.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 class=${css2.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>
-  //   `
-
-  //   self._shell('remix.help()', self.commands, () => {})
-  //   self.commands.html(intro)
-
-  //   self._components.txLogger = new TxLogger(this, self.blockchain)
-  //   self._components.txLogger.event.register('debuggingRequested', async (hash) => {
-  //     // TODO should probably be in the run module
-  //     if (!await self._opts.appManager.isActive('debugger')) await self._opts.appManager.activatePlugin('debugger')
-  //     this.call('menuicons', 'select', 'debugger')
-  //     this.call('debugger', 'debug', hash)
-  //   })
+  // logHtml (html) {
+  //   var command = this.commands.html
+  //   if (typeof command === 'function') command(html)
+  // }
 
-  //   return self._view.el
-
-  //   function wrapScript (script) {
-  //     const isKnownScript = ['remix.', 'git'].some(prefix => script.trim().startsWith(prefix))
-  //     if (isKnownScript) return script
-  //     return `
-  //       try {
-  //         const ret = ${script};
-  //         if (ret instanceof Promise) {
-  //           ret.then((result) => { console.log(result) }).catch((error) => { console.log(error) })
-  //         } else {
-  //           console.log(ret)
-  //         }   
-  //       } catch (e) {
-  //         console.log(e.message)
-  //       }
-  //       `
-  //   }
-  //   function change (event) {
-  //     if (self._components.autoCompletePopup.handleAutoComplete(
-  //       event,
-  //       self._view.input.innerText)) return
-  //     if (self._view.input.innerText.length === 0) self._view.input.innerText += '\n'
-  //     if (event.which === 13) {
-  //       if (event.ctrlKey) { // <ctrl+enter>
-  //         self._view.input.innerText += '\n'
-  //         self.putCursor2End(self._view.input)
-  //         self.scroll2bottom()
-  //         self._components.autoCompletePopup.removeAutoComplete()
-  //       } else { // <enter>
-  //         self._cmdIndex = -1
-  //         self._cmdTemp = ''
-  //         event.preventDefault()
-  //         var script = self._view.input.innerText.trim()
-  //         self._view.input.innerText = '\n'
-  //         if (script.length) {
-  //           self._cmdHistory.unshift(script)
-  //           self.commands.script(wrapScript(script))
-  //         }
-  //         self._components.autoCompletePopup.removeAutoComplete()
-  //       }
-  //     } else if (event.which === 38) { // <arrowUp>
-  //       var len = self._cmdHistory.length
-  //       if (len === 0) return event.preventDefault()
-  //       if (self._cmdHistory.length - 1 > self._cmdIndex) {
-  //         self._cmdIndex++
-  //       }
-  //       self._view.input.innerText = self._cmdHistory[self._cmdIndex]
-  //       self.putCursor2End(self._view.input)
-  //       self.scroll2bottom()
-  //     } else if (event.which === 40) { // <arrowDown>
-  //       if (self._cmdIndex > -1) {
-  //         self._cmdIndex--
-  //       }
-  //       self._view.input.innerText = self._cmdIndex >= 0 ? self._cmdHistory[self._cmdIndex] : self._cmdTemp
-  //       self.putCursor2End(self._view.input)
-  //       self.scroll2bottom()
-  //     } else {
-  //       self._cmdTemp = self._view.input.innerText
-  //     }
-  //   }
+  // focus () {
+  //   if (this._view.input) this._view.input.focus()
   // }
 
   render () {
+    // var self = this
+    // if (self._view.el) return self._view.el
+    //self._view.journal = yo`<div id="journal" class=${css.journal} data-id="terminalJournal"></div>`
+    // self._view.input = yo`
+    //   <span class=${css.input} onload=${() => { this.focus() }} onpaste=${paste} onkeydown=${change}></span>
+    // `
+   // self._view.input.setAttribute('spellcheck', 'false')
+    // self._view.input.setAttribute('contenteditable', 'true')
+    // self._view.input.setAttribute('id', 'terminalCliInput')
+    // self._view.input.setAttribute('data-id', 'terminalCliInput')
+
+    // self._view.input.innerText = '\n'
+    // self._view.cli = yo`
+    //   <div id="terminalCli" data-id="terminalCli" class="${css.cli}" onclick=${focusinput}>
+    //     <span class=${css.prompt}>${'>'}</span>
+    //     ${self._view.input}
+    //   </div>
+    // `
+
+    // self._view.icon = yo`
+    //   <i onmouseenter=${hover} onmouseleave=${hover} onmousedown=${minimize}
+    //   class="mx-2 ${css.toggleTerminal} fas fa-angle-double-down" data-id="terminalToggleIcon"></i>`
+    // self._view.dragbar = yo`
+    //   <div onmousedown=${mousedown} class=${css.dragbarHorizontal}></div>`
+
+    // self._view.pendingTxCount = yo`<div class="mx-2" title='Pending Transactions'>0</div>`
+    // self._view.inputSearch = yo`<input
+    //   spellcheck="false"
+    //   type="text"
+    //   class="border ${css.filter} form-control"
+    //   id="searchInput"
+    //   onkeydown=${filter}
+    //   placeholder="Search with transaction hash or address"
+    //   data-id="terminalInputSearch">
+    // </input>`
+    // self._view.bar = yo`
+    //   <div class="${css.bar}">
+    //     ${self._view.dragbar}
+    //     <div class="${css.menu} border-top border-dark bg-light" data-id="terminalToggleMenu">
+    //       ${self._view.icon}
+    //       <div class="mx-2" id="clearConsole" data-id="terminalClearConsole" onclick=${clear}>
+    //         <i class="fas fa-ban" aria-hidden="true" title="Clear console"
+    //         onmouseenter=${hover} onmouseleave=${hover}></i>
+    //       </div>
+    //       ${self._view.pendingTxCount}
+    //       <div class=${css.verticalLine}></div>
+    //       <div class="pt-1 h-80 mx-3 align-items-center ${css.listenOnNetwork} custom-control custom-checkbox">
+    //         <input
+    //           class="custom-control-input"
+    //           id="listenNetworkCheck"
+    //           onchange=${listenOnNetwork}
+    //           type="checkbox"
+    //           title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you"
+    //         >
+    //         <label
+    //           class="pt-1 form-check-label custom-control-label text-nowrap""
+    //           title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you"
+    //           for="listenNetworkCheck"
+    //         >
+    //           listen on network
+    //         </label>
+    //       </div>
+    //       <div class=${css.search}>
+    //         <i class="fas fa-search ${css.searchIcon} bg-light" aria-hidden="true"></i>
+    //         ${self._view.inputSearch}
+    //       </div>
+    //     </div>
+    //   </div>
+    // `
+    // self._view.term = yo`
+    //   <div class="${css.terminal_container}" tabindex="-1" data-id="terminalContainer" onscroll=${throttle(reattach, 10)} onkeydown=${focusinput}>
+    //     ${self._components.autoCompletePopup.render()}
+    //     <div data-id="terminalContainerDisplay" style="
+    //       position: absolute;
+    //       height: 100%;
+    //       width: 100%;
+    //       opacity: 0.1;
+    //       z-index: -1;
+    //     "></div>
+    //     <div class=${css.terminal}>
+    //         ${self._view.journal}
+    //         ${self._view.cli}
+    //     </div>
+    //   </div>
+    // `
+    // self._view.el = yo`
+    //   <div class="${css.panel}" style="height: 180px;">
+    //     ${self._view.bar}
+    //     ${self._view.term}
+    //   </div>
+    // `
+    // setInterval(async () => {
+    //   try {
+    //     self._view.pendingTxCount.innerHTML = await self.call('udapp', 'pendingTransactionsCount')
+    //   } catch (err) {}
+    // }, 1000)
+
+    // function listenOnNetwork (ev) {
+    //   self.event.trigger('listenOnNetWork', [ev.currentTarget.checked])
+    // }
+    //function paste (event) {
+      // const selection = window.getSelection()
+      // if (!selection.rangeCount) return false
+      // event.preventDefault()
+      // event.stopPropagation()
+      // var clipboard = (event.clipboardData || window.clipboardData)
+      // var text = clipboard.getData('text/plain')
+      // text = text.replace(/[^\x20-\xFF]/gi, '') // remove non-UTF-8 characters
+      // var temp = document.createElement('div')
+      // temp.innerHTML = text
+      // var textnode = document.createTextNode(temp.textContent)
+      // selection.getRangeAt(0).insertNode(textnode)
+      // selection.empty()
+      // self.scroll2bottom()
+      // placeCaretAtEnd(event.currentTarget)
+    //}
+    //function placeCaretAtEnd (el) {
+      // el.focus()
+      // var range = document.createRange()
+      // range.selectNodeContents(el)
+      // range.collapse(false)
+      // var sel = window.getSelection()
+      // sel.removeAllRanges()
+      // sel.addRange(range)
+   // }
+   // function throttle (fn, wait) {
+      // var time = Date.now()
+      // return function debounce () {
+      //   if ((time + wait - Date.now()) < 0) {
+      //     fn.apply(this, arguments)
+      //     time = Date.now()
+      //   }
+      // }
+   // }
+    // var css2 = csjs`
+    //   .anchor            {
+    //     position         : static;
+    //     border-top       : 2px dotted blue;
+    //     height           : 10px;
+    //   }
+    //   .overlay           {
+    //     position         : absolute;
+    //     width            : 100%;
+    //     display          : flex;
+    //     align-items      : center;
+    //     justify-content  : center;
+    //     bottom           : 0;
+    //     right            : 15px;
+    //     min-height       : 20px;
+    //   }
+    //   .text              {
+    //     z-index          : 2;
+    //     color            : black;
+    //     font-weight      : bold;
+    //     pointer-events   : none;
+    //   }
+    //   .background        {
+    //     z-index          : 1;
+    //     opacity          : 0.8;
+    //     background-color : #a6aeba;
+    //     cursor           : pointer;
+    //   }
+    //   .ul                 {
+    //     padding-left     : 20px;
+    //     padding-bottom   : 5px;
+    //   }
+    // `
+    // var text = yo`<div class="${css2.overlay} ${css2.text}"></div>`
+    // var background = yo`<div class="${css2.overlay} ${css2.background}"></div>`
+    // var placeholder = yo`<div class=${css2.anchor}>${background}${text}</div>`
+    // var inserted = false
+
+    // window.addEventListener('resize', function (event) {
+    //   self.event.trigger('resize', [])
+    //   self.event.trigger('resize', [])
+    // })
+
+    //function focusinput (event) {
+      // if (
+      //   event.altKey ||
+      //   event.ctrlKey ||
+      //   event.metaKey ||
+      //   event.shiftKey ||
+      //   event.key === 'Down' ||
+      //   event.key === 'ArrowDown' ||
+      //   event.key === 'Up' ||
+      //   event.key === 'ArrowUp' ||
+      //   event.key === 'Left' ||
+      //   event.key === 'ArrowLeft' ||
+      //   event.key === 'Right' ||
+      //   event.key === 'ArrowRight' ||
+      //   event.key === 'Esc' ||
+      //   event.key === 'Escape'
+      // ) return
+
+      // refocus()
+    //}
+
+    // function refocus () {
+    //   self._view.input.focus()
+    //   reattach({ currentTarget: self._view.term })
+    //   delete self.scroll2bottom
+    //   self.scroll2bottom()
+    // }
+    //function reattach (event) {
+      // var el = event.currentTarget
+      // var isBottomed = el.scrollHeight - el.scrollTop - el.clientHeight < 30
+      // if (isBottomed) {
+      //   if (inserted) {
+      //     text.innerText = ''
+      //     background.onclick = undefined
+      //     if (placeholder.parentElement) self._view.journal.removeChild(placeholder)
+      //   }
+      //   inserted = false
+      //   delete self.scroll2bottom
+      // } else {
+      //   if (!inserted) self._view.journal.appendChild(placeholder)
+      //   inserted = true
+      //   check()
+      //   if (!placeholder.nextElementSibling) {
+      //     placeholder.style.display = 'none'
+      //   } else {
+      //     placeholder.style = ''
+      //   }
+      //   self.scroll2bottom = function () {
+      //     var next = placeholder.nextElementSibling
+      //     if (next) {
+      //       placeholder.style = ''
+      //       check()
+      //       var messages = 1
+      //       while ((next = next.nextElementSibling)) messages += 1
+      //       text.innerText = `${messages} new unread log entries`
+      //     } else {
+      //       placeholder.style.display = 'none'
+      //     }
+      //   }
+      // }
+    //}
+    //function check () {
+      // var pos1 = self._view.term.offsetHeight + self._view.term.scrollTop - (self._view.el.offsetHeight * 0.15)
+      // var pos2 = placeholder.offsetTop
+      // if ((pos1 - pos2) > 0) {
+      //   text.style.display = 'none'
+      //   background.style.position = 'relative'
+      //   background.style.opacity = 0.3
+      //   background.style.right = 0
+      //   background.style.borderBox = 'content-box'
+      //   background.style.padding = '2px'
+      //   background.style.height = (self._view.journal.offsetHeight - (placeholder.offsetTop + placeholder.offsetHeight)) + 'px'
+      //   background.onclick = undefined
+      //   background.style.cursor = 'default'
+      //   background.style.pointerEvents = 'none'
+      // } else {
+      //   background.style = ''
+      //   text.style = ''
+      //   background.onclick = function (event) {
+      //     placeholder.scrollIntoView()
+      //     check()
+      //   }
+      // }
+    //}
+    //function hover (event) { event.currentTarget.classList.toggle(css.hover) }
+    //function minimize (event) {
+      // event.preventDefault()
+      // event.stopPropagation()
+      // if (event.button === 0) {
+      //   var classList = self._view.icon.classList
+      //   classList.toggle('fa-angle-double-down')
+      //   classList.toggle('fa-angle-double-up')
+      //   self.event.trigger('resize', [])
+      // }
+    //}
+   // var filtertimeout = null
+    //function filter (event) {
+      // if (filtertimeout) {
+      //   clearTimeout(filtertimeout)
+      // }
+      // filtertimeout = setTimeout(() => {
+      //   self.updateJournal({ type: 'search', value: self._view.inputSearch.value })
+      //   self.scroll2bottom()
+      // }, 500)
+   // }
+    // function clear (event) {
+    //   refocus()
+    //   self._view.journal.innerHTML = ''
+    // }
+    // ----------------- resizeable ui ---------------
+    //function mousedown (event) {
+      // event.preventDefault()
+      // if (event.which === 1) {
+      //   moveGhostbar(event)
+      //   document.body.appendChild(ghostbar)
+      //   document.addEventListener('mousemove', moveGhostbar)
+      //   document.addEventListener('mouseup', removeGhostbar)
+      //   document.addEventListener('keydown', cancelGhostbar)
+      // }
+    //}
+    //function cancelGhostbar (event) {
+      // if (event.keyCode === 27) {
+      //   document.body.removeChild(ghostbar)
+      //   document.removeEventListener('mousemove', moveGhostbar)
+      //   document.removeEventListener('mouseup', removeGhostbar)
+      //   document.removeEventListener('keydown', cancelGhostbar)
+      // }
+   // }
+    // function moveGhostbar (event) { // @NOTE HORIZONTAL ghostbar
+    //   ghostbar.style.top = self._api.getPosition(event) + 'px'
+    // }
+    // function removeGhostbar (event) {
+    //   if (self._view.icon.classList.contains('fa-angle-double-up')) {
+    //     self._view.icon.classList.toggle('fa-angle-double-down')
+    //     self._view.icon.classList.toggle('fa-angle-double-up')
+    //   }
+    //   document.body.removeChild(ghostbar)
+    //   document.removeEventListener('mousemove', moveGhostbar)
+    //   document.removeEventListener('mouseup', removeGhostbar)
+    //   document.removeEventListener('keydown', cancelGhostbar)
+    //   self.event.trigger('resize', [self._api.getPosition(event)])
+    // }
+
+    // self._cmdHistory = []
+    // self._cmdIndex = -1
+    // self._cmdTemp = ''
+
+    // var intro = yo`
+    //   <div><div> - Welcome to Remix ${packageJson.version} - </div><br>
+    //   <div>You can use this terminal to: </div>
+    //   <ul class=${css2.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 class=${css2.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>
+    // `
+
+    //self._shell('remix.help()', self.commands, () => {})
+    //self.commands.html(intro)
+
+    //self._components.txLogger = new TxLogger(this, self.blockchain)
+    // self._components.txLogger.event.register('debuggingRequested', async (hash) => {
+    //   // TODO should probably be in the run module
+    //   if (!await self._opts.appManager.isActive('debugger')) await self._opts.appManager.activatePlugin('debugger')
+    //   this.call('menuicons', 'select', 'debugger')
+    //   this.call('debugger', 'debug', hash)
+    // })
+
+   // return self._view.el
     return this.element
+    // function wrapScript (script) {
+    //   const isKnownScript = ['remix.', 'git'].some(prefix => script.trim().startsWith(prefix))
+    //   if (isKnownScript) return script
+    //   return `
+    //     try {
+    //       const ret = ${script};
+    //       if (ret instanceof Promise) {
+    //         ret.then((result) => { console.log(result) }).catch((error) => { console.log(error) })
+    //       } else {
+    //         console.log(ret)
+    //       }   
+    //     } catch (e) {
+    //       console.log(e.message)
+    //     }
+    //     `
+    // }
+    //function change (event) {
+    //   if (self._components.autoCompletePopup.handleAutoComplete(
+    //     event,
+    //     self._view.input.innerText)) return
+    //   if (self._view.input.innerText.length === 0) self._view.input.innerText += '\n'
+    //   if (event.which === 13) {
+    //     if (event.ctrlKey) { // <ctrl+enter>
+    //       self._view.input.innerText += '\n'
+    //       self.putCursor2End(self._view.input)
+    //       self.scroll2bottom()
+    //       self._components.autoCompletePopup.removeAutoComplete()
+    //     } else { // <enter>
+    //       self._cmdIndex = -1
+    //       self._cmdTemp = ''
+    //       event.preventDefault()
+    //       var script = self._view.input.innerText.trim()
+    //       self._view.input.innerText = '\n'
+    //       if (script.length) {
+    //         self._cmdHistory.unshift(script)
+    //         self.commands.script(wrapScript(script))
+    //       }
+    //       self._components.autoCompletePopup.removeAutoComplete()
+    //     }
+    //   } else if (event.which === 38) { // <arrowUp>
+    //     var len = self._cmdHistory.length
+    //     if (len === 0) return event.preventDefault()
+    //     if (self._cmdHistory.length - 1 > self._cmdIndex) {
+    //       self._cmdIndex++
+    //     }
+    //     self._view.input.innerText = self._cmdHistory[self._cmdIndex]
+    //     self.putCursor2End(self._view.input)
+    //     self.scroll2bottom()
+    //   } else if (event.which === 40) { // <arrowDown>
+    //     if (self._cmdIndex > -1) {
+    //       self._cmdIndex--
+    //     }
+    //     self._view.input.innerText = self._cmdIndex >= 0 ? self._cmdHistory[self._cmdIndex] : self._cmdTemp
+    //     self.putCursor2End(self._view.input)
+    //     self.scroll2bottom()
+    //   } else {
+    //     self._cmdTemp = self._view.input.innerText
+    //   }
+    //}
   }
 
   renderComponent () {
-    ReactDOM.render(<RemixUiTerminal/>, this.element)
+    ReactDOM.render(
+      <RemixUiTerminal />,
+      this.element
+    )
   }
 
-  putCursor2End (editable) {
-    var range = document.createRange()
-    range.selectNode(editable)
-    var child = editable
-    var chars
-
-    while (child) {
-      if (child.lastChild) child = child.lastChild
-      else break
-      if (child.nodeType === Node.TEXT_NODE) {
-        chars = child.textContent.length
-      } else {
-        chars = child.innerHTML.length
-      }
-    }
+  // putCursor2End (editable) {
+  //   var range = document.createRange()
+  //   range.selectNode(editable)
+  //   var child = editable
+  //   var chars
+
+  //   while (child) {
+  //     if (child.lastChild) child = child.lastChild
+  //     else break
+  //     if (child.nodeType === Node.TEXT_NODE) {
+  //       chars = child.textContent.length
+  //     } else {
+  //       chars = child.innerHTML.length
+  //     }
+  //   }
 
-    range.setEnd(child, chars)
-    var toStart = true
-    var toEnd = !toStart
-    range.collapse(toEnd)
+  //   range.setEnd(child, chars)
+  //   var toStart = true
+  //   var toEnd = !toStart
+  //   range.collapse(toEnd)
 
-    var sel = window.getSelection()
-    sel.removeAllRanges()
-    sel.addRange(range)
+  //   var sel = window.getSelection()
+  //   sel.removeAllRanges()
+  //   sel.addRange(range)
 
-    editable.focus()
-  }
+  //   editable.focus()
+  // }
 
-  updateJournal (filterEvent) {
-    var self = this
-    var commands = self.data.activeFilters.commands
-    var value = filterEvent.value
-    if (filterEvent.type === 'select') {
-      commands[value] = true
-      if (!self._INDEX.commandsMain[value]) return
-      self._INDEX.commandsMain[value].forEach(item => {
-        item.root.steps.forEach(item => { self._JOURNAL[item.gidx] = item })
-        self._JOURNAL[item.gidx] = item
-      })
-    } else if (filterEvent.type === 'deselect') {
-      commands[value] = false
-      if (!self._INDEX.commandsMain[value]) return
-      self._INDEX.commandsMain[value].forEach(item => {
-        item.root.steps.forEach(item => { self._JOURNAL[item.gidx].hide = true })
-        self._JOURNAL[item.gidx].hide = true
-      })
-    } else if (filterEvent.type === 'search') {
-      if (value !== self.data.activeFilters.input) {
-        var query = self.data.activeFilters.input = value
-        var items = self._JOURNAL
-        for (var gidx = 0, len = items.length; gidx < len; gidx++) {
-          var item = items[gidx]
-          if (item && self.data.filterFns[item.cmd]) {
-            var show = query.length ? self.data.filterFns[item.cmd](item.args, query) : true
-            item.hide = !show
-          }
-        }
-      }
-    }
-    var df = document.createDocumentFragment()
-    self._JOURNAL.forEach(item => {
-      if (item && item.el && !item.hide) df.appendChild(item.el)
-    })
-    self._view.journal.innerHTML = ''
-    requestAnimationFrame(function updateDOM () {
-      self._view.journal.appendChild(df)
-    })
-  }
+  //updateJournal (filterEvent) {
+    // var self = this
+    // var commands = self.data.activeFilters.commands
+    // var value = filterEvent.value
+    // if (filterEvent.type === 'select') {
+    //   commands[value] = true
+    //   if (!self._INDEX.commandsMain[value]) return
+    //   self._INDEX.commandsMain[value].forEach(item => {
+    //     item.root.steps.forEach(item => { self._JOURNAL[item.gidx] = item })
+    //     self._JOURNAL[item.gidx] = item
+    //   })
+    // } 
+    // else if (filterEvent.type === 'deselect') {
+    //   commands[value] = false
+    //   if (!self._INDEX.commandsMain[value]) return
+    //   self._INDEX.commandsMain[value].forEach(item => {
+    //     item.root.steps.forEach(item => { self._JOURNAL[item.gidx].hide = true })
+    //     self._JOURNAL[item.gidx].hide = true
+    //   })
+    // } else if (filterEvent.type === 'search') {
+    //   if (value !== self.data.activeFilters.input) {
+    //     var query = self.data.activeFilters.input = value
+    //     var items = self._JOURNAL
+    //     for (var gidx = 0, len = items.length; gidx < len; gidx++) {
+    //       var item = items[gidx]
+    //       if (item && self.data.filterFns[item.cmd]) {
+    //         var show = query.length ? self.data.filterFns[item.cmd](item.args, query) : true
+    //         item.hide = !show
+    //       }
+    //     }
+    //   }
+    // }
+    // var df = document.createDocumentFragment()
+    // self._JOURNAL.forEach(item => {
+    //   if (item && item.el && !item.hide) df.appendChild(item.el)
+    // })
+    // self._view.journal.innerHTML = ''
+    // requestAnimationFrame(function updateDOM () {
+    //   self._view.journal.appendChild(df)
+    // })
+  //}
 
   _appendItem (item) {
     var self = this
@@ -805,11 +809,11 @@ class Terminal extends Plugin {
   }
 }
 
-function domTerminalFeatures (self, scopedCommands, blockchain) {
-  return {
-    remix: self._components.cmdInterpreter
-  }
-}
+// function domTerminalFeatures (self, scopedCommands, blockchain) {
+//   return {
+//     remix: self._components.cmdInterpreter
+//   }
+// }
 
 function blockify (el) { return yo`<div class="px-4 ${css.block}" data-id="block_${el.getAttribute ? el.getAttribute('id') : ''}">${el}</div>` }
 
diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.css b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.css
index e69de29bb2..a8870af675 100644
--- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.css
+++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.css
@@ -0,0 +1,133 @@
+.panel              {
+    position          : relative;
+    display           : flex;
+    flex-direction    : column;
+    font-size         : 12px;
+    min-height        : 3em;
+  }
+  .bar                {
+    display           : flex;
+    z-index           : 2;
+  }
+  .menu               {
+    position             : relative;
+    display              : flex;
+    align-items          : center;
+    width                : 100%;
+    max-height           : 35px;
+    min-height           : 35px;
+  }
+  .toggleTerminal              {
+    cursor            : pointer;
+  }
+  .toggleTerminal:hover              {
+    color             : var(--secondary);
+  }
+  .terminal_container   {
+    display             : flex;
+    flex-direction      : column;
+    height              : 100%;
+    overflow-y          : auto;
+    font-family         : monospace;
+    margin              : 0px;
+    background-repeat   : no-repeat;
+    background-position : center 15%;
+    background-size     : auto calc(75% -  1.7em);
+  }
+  .terminal    {
+    position          : relative;
+    display           : flex;
+    flex-direction    : column;
+    height            : 100%;
+  }
+  .journal            {
+    margin-top        : auto;
+    font-family       : monospace;
+  }
+  .block              {
+    word-break        : break-word;
+    white-space       : pre-wrap;
+    line-height       : 2ch;
+    padding           : 1ch;
+    margin-top        : 2ch;
+  }
+  .block > pre        {
+    max-height        : 200px;
+  }
+  .cli                {
+    line-height       : 1.7em;
+    font-family       : monospace;
+    padding           : .4em;
+    color             : var(--primary);
+    border-top        : solid 2px var(--secondary);
+  }
+  .prompt             {
+    margin-right      : 0.5em;
+    font-family       : monospace;
+    font-weight       : bold;
+    font-size         : 14px;
+  }
+  .input              {
+    word-break        : break-word;
+    outline           : none;
+    font-family       : monospace;
+  }
+  .search {
+    display           : flex;
+    align-items       : center;
+    width             : 330px;
+    padding-left      : 20px;
+    height            : 100%;
+    padding-top       : 1px;
+    padding-bottom    : 1px;
+  }
+  .filter                       {
+    height                      : 80%;
+    white-space                 : nowrap;
+    overflow                    : hidden;
+    text-overflow               : ellipsis;
+  }
+  .searchIcon                   {
+    width                       : 25px;
+    border-top-left-radius      : 3px;
+    border-bottom-left-radius   : 3px;
+    display                     : flex;
+    align-items                 : center;
+    justify-content             : center;
+    margin-right                : 5px;
+  }
+  .listen         {
+    margin-right  : 30px;
+    min-width     : 40px;
+    height        : 13px;
+    display       : flex;
+    align-items   : center;
+  }
+  .listenLabel {
+    min-width: 50px;
+  }
+  .verticalLine {
+    border-left       : 1px solid var(--secondary);
+    height            : 65%;
+  }
+  .dragbarHorizontal  {
+    position          : absolute;
+    top               : 0;
+    height            : 0.5em;
+    right             : 0;
+    left              : 0;
+    cursor            : ns-resize;
+    z-index           : 999;
+  }
+  .listenOnNetwork {
+    min-height: auto;
+  }
+  .ghostbar           {
+    position          : absolute;
+    height            : 6px;
+    opacity           : 0.5;
+    cursor            : row-resize;
+    z-index           : 9999;
+    left              : 0;
+    right             : 0;
+  }
\ No newline at end of file
diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
index f8418db3f2..106f5812a9 100644
--- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
+++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
@@ -1,14 +1,74 @@
-import React from 'react'
+import React, { useState } from 'react' // eslint-disable-line
 
 import './remix-ui-terminal.css'
 
 /* eslint-disable-next-line */
-export interface RemixUiTerminalProps {}
+export interface RemixUiTerminalProps {
+  propterties: any
+}
 
 export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
+
+  const [toggleDownUp, setToggleDownUp] = useState('fa-angle-double-down')
+
+  const handleMinimizeTerminal = (event) => {
+    console.log('clikced')
+    if (toggleDownUp === 'fa-angle-double-down') {
+      console.log('clikced down')
+      setToggleDownUp('fa-angle-double-up')
+    } else {
+      console.log('clikced up')
+      // event.trigger('resize', [])
+      setToggleDownUp('fa-angle-double-down')
+    }
+  }
   return (
     <div>
-      Welcome to remix-ui-terminal
+      {console.log({ toggleDownUp })}
+      <div className="bar">
+        {/* ${self._view.dragbar} */}
+        <div className="dragbarHorizontal"></div>
+        <div className="menu border-top border-dark bg-light" data-id="terminalToggleMenu">
+          {/* ${self._view.icon} */}
+          <i className={`mx-2 toggleTerminal fas ${toggleDownUp}`} data-id="terminalToggleIcon" onClick={ handleMinimizeTerminal }></i>
+          <div className="mx-2" id="clearConsole" data-id="terminalClearConsole" >
+            <i className="fas fa-ban" aria-hidden="true" title="Clear console"
+            ></i>
+          </div>
+          {/* ${self._view.pendingTxCount} */}
+          <div className="mx-2" title='Pending Transactions'>0</div>
+          <div className="verticalLine"></div>
+          <div className="pt-1 h-80 mx-3 align-items-center listenOnNetwork custom-control custom-checkbox">
+            <input
+              className="custom-control-input"
+              id="listenNetworkCheck"
+              // onChange=${listenOnNetwork}
+              type="checkbox"
+              title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you"
+            />
+            <label
+              className="pt-1 form-check-label custom-control-label text-nowrap"
+              title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you"
+              htmlFor="listenNetworkCheck"
+            >
+              listen on network
+            </label>
+          </div>
+          <div className="search">
+            <i className="fas fa-search searchIcon bg-light" aria-hidden="true"></i>
+            {/* ${self._view.inputSearch} */}
+            <input
+              // spellcheck = "false"
+              type="text"
+              className="border filter form-control"
+              id="searchInput"
+              // onkeydown=${filter}
+              placeholder="Search with transaction hash or address"
+              data-id="terminalInputSearch" />
+          </div>
+        </div>
+      </div>
+      Welcome to remix-ui-terminal {console.log(props.propterties, ' properties david')}
     </div>
   )
 }