implement terminal bar func

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

@@ -1,13 +1,12 @@
 import { CustomTooltip } from '@remix-ui/helper'
-import React, { useState, useEffect, useReducer, useRef, useContext } from 'react' // eslint-disable-line
+import React, { useState, useEffect, useRef, useContext } from 'react' // eslint-disable-line
 import { FormattedMessage, useIntl } from 'react-intl'
+import { listenOnNetworkAction } from '../actions/terminalAction'
 import { TerminalContext } from '../context/context'
-import { initialState, registerCommandReducer } from '../reducers/terminalReducer'
 import { RemixUiTerminalProps } from '../types/terminalTypes'
 
 export const RemixUITerminalBar = (props: RemixUiTerminalProps) => {
   const { newstate: state, dispatch } = useContext(TerminalContext)
-  const [isVM, setIsVM] = useState(false)
   const intl = useIntl()
   const terminalMenu = useRef(null)
 
@@ -28,11 +27,12 @@ export const RemixUITerminalBar = (props: RemixUiTerminalProps) => {
   }
 
   function listenOnNetwork(event: any): void {
-    throw new Error('Function not implemented.')
+    const isListening = event.target.checked
+    listenOnNetworkAction(props.plugin, isListening)
   }
 
   function setSearchInput(arg0: string): void {
-    throw new Error('Function not implemented.')
+    dispatch({ type: 'search', payload: arg0 })
   }
 
   return (<>
@@ -62,7 +62,7 @@ export const RemixUITerminalBar = (props: RemixUiTerminalProps) => {
           placement="top"
           tooltipId="terminalClear"
           tooltipClasses="text-nowrap"
-          tooltipText={intl.formatMessage({ id: isVM ? 'terminal.listenVM' : 'terminal.listenTitle' })}
+          tooltipText={intl.formatMessage({ id: state.isVM ? 'terminal.listenVM' : 'terminal.listenTitle' })}
         >
           <div className="h-80 mx-3 align-items-center remix_ui_terminal_listenOnNetwork custom-control custom-checkbox">
             <CustomTooltip placement="top" tooltipId="terminalClear" tooltipClasses="text-nowrap" tooltipText={intl.formatMessage({ id: 'terminal.listenTitle' })}>
@@ -71,7 +71,7 @@ export const RemixUITerminalBar = (props: RemixUiTerminalProps) => {
                 id="listenNetworkCheck"
                 onChange={listenOnNetwork}
                 type="checkbox"
-                disabled={isVM}
+                disabled={state.isVM}
               />
             </CustomTooltip>
             <label

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

@@ -1,4 +1,4 @@
-import {CLEAR_CONSOLE, CMD_HISTORY, EMPTY_BLOCK, ERROR, HTML, INFO, KNOWN_TRANSACTION, LISTEN_ON_NETWORK, LOG, TYPEWRITERLOG, TYPEWRITERWARNING, TYPEWRITERSUCCESS, NEW_TRANSACTION, SCRIPT, UNKNOWN_TRANSACTION, WARN, TOGGLE} from '../types/terminalTypes'
+import {CLEAR_CONSOLE, CMD_HISTORY, EMPTY_BLOCK, ERROR, HTML, INFO, KNOWN_TRANSACTION, LISTEN_ON_NETWORK, LOG, TYPEWRITERLOG, TYPEWRITERWARNING, TYPEWRITERSUCCESS, NEW_TRANSACTION, SCRIPT, UNKNOWN_TRANSACTION, WARN, TOGGLE, SEARCH, SET_ISVM} from '../types/terminalTypes'
 
 export const initialState = {
   journalBlocks: [],
@@ -20,6 +20,9 @@ export const initialState = {
   _INDEXcommandsMain: {},
   message: [],
   isOpen: true,
+  searchInput: '',
+  clearConsole: false,
+  isVM: true
 }
 
 export const registerCommandReducer = (state, action) => {
@@ -71,6 +74,13 @@ export const registerCommandReducer = (state, action) => {
       return {
         ...state,
         ...state.journalBlocks.splice(0),
+        clearConsole: true,
+      }
+
+    case SEARCH:
+      return {
+        ...state,
+        searchInput: action.payload,
       }
 
     case TOGGLE:
@@ -78,11 +88,18 @@ export const registerCommandReducer = (state, action) => {
         ...state,
         isOpen: !state.isOpen,
       }
+
     case LISTEN_ON_NETWORK:
       return {
         ...state,
         journalBlocks: initialState.journalBlocks.push({message: action.payload.message, style: 'text-log'}),
       }
+
+    case SET_ISVM:
+      return {
+        ...state,
+        isVM: action.payload,
+      }
     default:
       return {state}
   }

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

@@ -26,7 +26,7 @@ import RenderUnKnownTransactions from './components/RenderUnknownTransactions' /
 import RenderCall from './components/RenderCall' // eslint-disable-line
 import RenderKnownTransactions from './components/RenderKnownTransactions' // eslint-disable-line
 import parse from 'html-react-parser'
-import { EMPTY_BLOCK, KNOWN_TRANSACTION, RemixUiTerminalProps, UNKNOWN_TRANSACTION } from './types/terminalTypes'
+import { EMPTY_BLOCK, KNOWN_TRANSACTION, RemixUiTerminalProps, SET_ISVM, UNKNOWN_TRANSACTION } from './types/terminalTypes'
 import { wrapScript } from './utils/wrapScript'
 import { TerminalContext } from './context/context'
 const _paq = (window._paq = window._paq || [])
@@ -59,7 +59,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
     handleHide: () => {},
   })
 
-  const [clearConsole, setClearConsole] = useState(false)
   const [isVM, setIsVM] = useState(false)
   const [paste, setPaste] = useState(false)
   const [storage, setStorage] = useState<any>(null)
@@ -81,7 +80,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
     commandHistoryIndex: 0,
   })
 
-  const [searchInput, setSearchInput] = useState('')
   const [showTableHash, setShowTableHash] = useState([])
 
   // terminal inputRef
@@ -101,7 +99,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
 
   useEffect(() => {
     props.plugin.on('network', 'providerChanged', (provider) => {
-      setIsVM(provider.startsWith('vm-'))
+      dispatch({ type: SET_ISVM, payload: provider.startsWith('vm-') })
     })
 
     props.onReady({
@@ -402,21 +400,18 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
     }
   }
 
+  useEffect(() => {
+    console.log('clearConsole change', newstate.clearConsole)
+    if(newstate.clearConsole){
+      typeWriterIndexes.current = []
+      inputEl.current.focus()
+    }
+  },[newstate.clearConsole])
+
   /* end of block content that gets rendered from script Runner */
 
-  const handleClearConsole = () => {
-    setClearConsole(true)
-    typeWriterIndexes.current = []
-    dispatch({ type: 'clearconsole', payload: [] })
-    inputEl.current.focus()
-  }
   /* start of autoComplete */
 
-  const listenOnNetwork = (e: any) => {
-    const isListening = e.target.checked
-    listenOnNetworkAction(props.plugin, isListening)
-  }
-
   const onChange = (event: any) => {
     event.preventDefault()
     const inputString = event.target.value
@@ -597,7 +592,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
           {handleAutoComplete()}
           <div className="position-relative d-flex flex-column-reverse h-100">
             <div id="journal" className="remix_ui_terminal_journal d-flex flex-column pt-3 pb-4 px-2 mx-2 mr-0" data-id="terminalJournal">
-              {!clearConsole && <TerminalWelcomeMessage storage={storage} packageJson={version} />}
+              {!newstate.clearConsole && <TerminalWelcomeMessage storage={storage} packageJson={version} />}
               {newstate.journalBlocks &&
               newstate.journalBlocks.map((x, index) => {
                 if (x.name === EMPTY_BLOCK) {
@@ -612,7 +607,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
                   )
                 } else if (x.name === UNKNOWN_TRANSACTION) {
                   return x.message
-                    .filter((x) => x.tx.hash.includes(searchInput) || x.tx.from.includes(searchInput) || x.tx.to.includes(searchInput))
+                    .filter((x) => x.tx.hash.includes(newstate.searchInput) || x.tx.from.includes(newstate.searchInput) || x.tx.to.includes(newstate.searchInput))
                     .map((trans) => {
                       return (
                         <div className={classNameBlock} data-id={`block_tx${trans.tx.hash}`} key={index}>

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

@@ -26,6 +26,8 @@ export const CLEAR_CONSOLE = 'clearconsole'
 export const TOGGLE = 'toggle'
 export const LISTEN_ON_NETWORK = 'listenOnNetWork'
 export const CMD_HISTORY = 'cmdHistory'
+export const SEARCH = 'search'
+export const SET_ISVM = 'setIsVM'
 
 export interface RemixUiTerminalProps {
     plugin: any,