@ -1,23 +1,21 @@
import React , { useState , useEffect , useReducer , useRef , SyntheticEvent , MouseEvent } from 'react' // eslint-disable-line
import { useKeyPress } from './custom-hooks/useKeyPress' // eslint-disable-line
import { useWindowResize } from 'beautiful-react-hooks'
import { registerCommandAction , filterFnAction , registerLogScriptRunnerAction , registerInfoScriptRunnerAction , registerErrorScriptRunnerAction , registerWarnScriptRunnerAction , registerRemixWelcomeTextAction , listenOnNetworkAction , initListeningOnNetwork } from './actions/terminalAction'
import { registerCommandAction , registerLogScriptRunnerAction , registerInfoScriptRunnerAction , registerErrorScriptRunnerAction , registerWarnScriptRunnerAction , registerRemixWelcomeTextAction , listenOnNetworkAction , initListeningOnNetwork } from './actions/terminalAction'
import { initialState , registerCommandReducer , registerFilterReducer , addCommandHistoryReducer , registerScriptRunnerReducer , remixWelcomeTextReducer } from './reducers/terminalReducer'
import { remixWelcome } from './reducers/remixWelcom'
import { getKeyOf , getValueOf , Objectfilter , matched , find } from './utils/utils'
import { remixWelcome } from './reducers/remixWelcom' // eslint-disable-line
import { getKeyOf , getValueOf , Objectfilter , matched } from './utils/utils'
import { allCommands , allPrograms } from './commands' // eslint-disable-line
import { CopyToClipboard } from '@remix-ui/clipboard' // eslint-disable-line
import { ModalDialog } from '@remix-ui/modal-dialog'
import { ModalDialog } from '@remix-ui/modal-dialog' // eslint-disable-line
import TerminalWelcomeMessage from './terminalWelcome' // eslint-disable-line
import './remix-ui-terminal.css'
// const TxLogger from '../../../apps/'
import vm from 'vm'
import javascriptserialize from 'javascript-serialize'
import jsbeautify from 'js-beautify'
import helper from '../../../../../apps/remix-ide/src/lib/helper'
import parse from 'html-react-parser'
import './remix-ui-terminal.css'
import { debug } from 'console'
import { eventNames } from 'process'
const remixLib = require ( '@remix-project/remix-lib' )
var typeConversion = remixLib . execution . typeConversion
@ -55,7 +53,6 @@ export interface ClipboardEvent<T = Element> extends SyntheticEvent<T, any> {
export const RemixUiTerminal = ( props : RemixUiTerminalProps ) = > {
const [ toggleDownUp , setToggleDownUp ] = useState ( 'fa-angle-double-down' )
const [ inserted , setInserted ] = useState ( false )
const [ _cmdIndex , setCmdIndex ] = useState ( - 1 )
const [ _cmdTemp , setCmdTemp ] = useState ( '' )
const [ _cmdHistory , setCmdHistory ] = useState ( [ ] )
@ -66,11 +63,10 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
const [ dragging , setDragging ] = useState ( false )
const [ newstate , dispatch ] = useReducer ( registerCommandReducer , initialState )
const [ filterState , filterDispatch ] = useReducer ( registerFilterReducer , initialState )
const [ cmdHistory , cmdHistoryDispatch ] = useReducer ( addCommandHistoryReducer , initialState )
const [ scriptRunnserState , scriptRunnerDispatch ] = useReducer ( registerScriptRunnerReducer , initialState )
const [ welcomeTextState , welcomTextDispath ] = useReducer ( remixWelcomeTextReducer , initialState )
const [ isListeningOnNetwork , setIsListeningOnNetwork ] = useState ( false )
const [ clearConsole , setClearConsole ] = useState ( false )
const [ autoCompletState , setAutoCompleteState ] = useState ( {
activeSuggestion : 0 ,
data : {
@ -91,7 +87,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
const [ searchInput , setSearchInput ] = useState ( '' )
// const [showTableDetails, setShowTableDetails] = useState([])
const [ showTableDetails , setShowTableDetails ] = useState ( null )
const [ showTableHash , setShowTableHash ] = useState ( [ ] )
useWindowResize ( ( ) = > {
setWindowHeight ( window . innerHeight )
@ -99,14 +95,20 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
// terminal inputRef
const inputEl = useRef ( null )
const messagesEndRef = useRef ( null )
const scrollToBottom = ( ) = > {
messagesEndRef . current . scrollIntoView ( { behavior : 'smooth' } )
}
// events
useEffect ( ( ) = > {
initListeningOnNetwork ( props , scriptRunnerDispatch )
// registerRemixWelcomeTextAction(remixWelcome, welcomTextDispath)
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 )
registerCommandAction ( 'html' , _blocksRenderer ( 'html' ) , { activate : true } , dispatch )
registerCommandAction ( 'log' , _blocksRenderer ( 'log' ) , { activate : true } , dispatch )
registerCommandAction ( 'info' , _blocksRenderer ( 'info' ) , { activate : true } , dispatch )
@ -115,51 +117,20 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
registerCommandAction ( 'script' , function execute ( args , scopedCommands , append ) {
var script = String ( args [ 0 ] )
console . log ( { script } )
console . log ( { scopedCommands } )
_shell ( script , scopedCommands , function ( error , output ) {
if ( error ) scriptRunnerDispatch ( { type : 'error' , payload : { message : error } } )
if ( output ) scriptRunnerDispatch ( { type : 'script' , payload : { message : '5' } } )
} )
} , { activate : true } , dispatch )
filterFnAction ( 'log' , basicFilter , filterDispatch )
filterFnAction ( 'info' , basicFilter , filterDispatch )
filterFnAction ( 'warn' , basicFilter , filterDispatch )
filterFnAction ( 'error' , basicFilter , filterDispatch )
filterFnAction ( 'script' , basicFilter , filterDispatch )
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 )
// console.log({ htmlresullt }, { logresult })
// dispatch({ type: 'html', payload: { commands: htmlresullt.commands } })
// dispatch({ type: 'log', payload: { _commands: logresult._commands } })
// registerCommand('log', _blocksRenderer('log'), { activate: true })
} , [ props . thisState . autoCompletePopup , autoCompletState . text ] )
const placeCaretAtEnd = ( el ) = > {
el . focus ( )
const range = document . createRange ( )
range . selectNodeContents ( el )
range . collapse ( false )
const sel = window . getSelection ( )
sel . removeAllRanges ( )
sel . addRange ( range )
}
const domTerminalFeatures = ( ) = > {
return {
remix : props.cmdInterpreter
}
}
function exeCurrent ( cb ) {
return execute ( undefined , cb )
}
useEffect ( ( ) = > {
scrollToBottom ( )
console . log ( { messagesEndRef : messagesEndRef.current } , ' onScroll' )
} , [ newstate . journalBlocks . length ] )
function execute ( file , cb ) {
console . log ( 'called execute scriptRunner' )
function _execute ( content , cb ) {
if ( ! content ) {
// toolTip('no content to execute')
@ -194,44 +165,36 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
_execute ( content , cb )
} )
return ''
}
const _shell = async ( script , scopedCommands , done ) = > { // default shell
if ( script . indexOf ( 'remix:' ) === 0 ) {
return done ( null , 'This type of command has been deprecated and is not functionning anymore. Please run remix.help() to list available commands.' )
}
if ( script . indexOf ( 'remix.' ) === 0 ) {
// we keep the old feature. This will basically only be called when the command is querying the "remix" object.
// for all the other case, we use the Code Executor plugin
var context = domTerminalFeatures ( )
const context = execute ( undefined , undefined )
try {
const cmds = vm . createContext ( context )
// const result
let result = vm . runInContext ( script , cmds )
if ( script === 'remix.exeCurrent()' ) {
result = exeCurrent ( undefined )
} else {
if ( result === { } ) {
for ( const k in result ) {
result = + ` <div> {k}: ${ result [ k ] } </div> <br> `
}
}
}
console . log ( result === { } , ' is result === object' )
console . log ( { result } )
return done ( null , '' )
const result = vm . runInContext ( script , cmds )
console . log ( done , ' done func' )
return done ( null , result )
} catch ( error ) {
return done ( error . message )
}
}
try {
console . log ( ' remix command by david 2' )
let result : any
if ( script . trim ( ) . startsWith ( 'git' ) ) {
// result = await this.call('git', 'execute', script)
} else {
console . log ( ' remix command by david 3' )
result = await props . thisState . call ( 'scriptRunner' , 'execute' , script )
console . log ( { result } , ' me ' )
}
console . log ( { result } )
done ( )
@ -240,25 +203,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
}
}
// handle events
const handlePaste = ( event : ClipboardEvent < HTMLInputElement > ) = > {
// Do something
const selection = window . getSelection ( )
if ( ! selection . rangeCount ) return false
event . preventDefault ( )
event . stopPropagation ( )
const clipboard = ( event . clipboardData ) // || window.clipboardData
let text = clipboard . getData ( 'text/plain' )
text = text . replace ( /[^\x20-\xFF]/gi , '' ) // remove non-UTF-8 characters
const temp = document . createElement ( 'div' )
temp . innerHTML = text
const textnode = document . createTextNode ( temp . textContent )
selection . getRangeAt ( 0 ) . insertNode ( textnode )
selection . empty ( )
// self.scroll2bottom()
placeCaretAtEnd ( event . currentTarget )
}
const handleMinimizeTerminal = ( event ) = > {
event . preventDefault ( )
event . stopPropagation ( )
@ -273,20 +217,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
}
}
const _appendItem = ( item : any ) = > {
let { _JOURNAL , _jobs , data } = state
const self = props
const { el , gidx } = item
_JOURNAL [ gidx ] = item
if ( ! _jobs . length ) {
// requestAnimationFrame(function updateTerminal () {
// self._jobs.forEach(el => self._view.journal.appendChild(el))
// self.scroll2bottom()
_jobs = [ ]
}
if ( data . activeFilters . commands [ item . cmd ] ) _jobs . push ( el )
}
const focusinput = ( ) = > {
inputEl . current . focus ( )
}
@ -311,15 +241,19 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
const handleKeyDown = ( event ) = > {
const suggestionCount = autoCompletState . activeSuggestion
if ( autoCompletState . userInput !== '' && ( event . which === 27 || event . which === 8 || event . which === 46 ) ) {
console . log ( ' enter esc and delete' )
// backspace or any key that should remove the autocompletion
setAutoCompleteState ( prevState = > ( { . . . prevState , showSuggestions : false } ) )
}
if ( autoCompletState . showSuggestions && ( event . which === 13 || event . which === 9 ) ) {
if ( autoCompletState . userInput . length === 1 ) {
setAutoCompleteState ( prevState = > ( { . . . prevState , showSuggestions : false , userInput : Object.keys ( autoCompletState . data . _options [ 0 ] ) . toString ( ) } ) )
} else {
setAutoCompleteState ( prevState = > ( { . . . prevState , showSuggestions : false , userInput : autoCompletState.userInput } ) )
setAutoCompleteState ( prevState = > ( { . . . prevState , activeSuggestion : 0 , showSuggestions : false , userInput : Object.keys ( autoCompletState . data . _options [ 0 ] ) . toString ( ) } ) )
}
// else if (autoCompletState.activeSuggestion === 0) {
// setAutoCompleteState(prevState => ({ ...prevState, activeSuggestion: 0, showSuggestions: false, userInput: autoCompletState.userInput }))
// }
else {
console . log ( autoCompletState . activeSuggestion , 'autoCompletState.userInput.length' )
setAutoCompleteState ( prevState = > ( { . . . prevState , activeSuggestion : 0 , showSuggestions : false , userInput : Object.keys ( autoCompletState . data . _options [ autoCompletState . activeSuggestion ] ) . toString ( ) } ) )
}
}
if ( event . which === 13 && ! autoCompletState . showSuggestions ) {
@ -328,7 +262,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
inputEl . current . focus ( )
} else { // <enter>
event . preventDefault ( )
console . log ( 'hit enter' )
setCmdIndex ( - 1 )
setCmdTemp ( '' )
const script = autoCompletState . userInput . trim ( ) // inputEl.current.innerText.trim()
@ -347,43 +280,13 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
event . preventDefault ( )
console . log ( newstate . _commandHistory [ 0 ] , ' up value' )
setAutoCompleteState ( prevState = > ( { . . . prevState , userInput : newstate._commandHistory [ 0 ] } ) )
// }
// else if (newstate._commandHistory.length < autoCompletState.commandHistoryIndex) {
// setAutoCompleteState(prevState => ({ ...prevState, commandHistoryIndex: --autoCompletState.commandHistoryIndex }))
// console.log(newstate._commandHistory[newstate._commandHistory.length > 1 ? autoCompletState.commandHistoryIndex-- : newstate._commandHistory.length + 1], ' up value')
// } else if (newstate._commandHistory.length === autoCompletState.commandHistoryIndex) {
// console.log(newstate._commandHistory.length === autoCompletState.commandHistoryIndex, ' up value middle')
// setAutoCompleteState(prevState => ({ ...prevState, commandHistoryIndex: autoCompletState.commandHistoryIndex - 2, userInput: newstate._commandHistory[autoCompletState.commandHistoryIndex] }))
// } else {
// setAutoCompleteState(prevState => ({ ...prevState, commandHistoryIndex: autoCompletState.commandHistoryIndex - 1, userInput: newstate._commandHistory[autoCompletState.commandHistoryIndex] }))
// console.log(newstate._commandHistory[newstate._commandHistory.length - 1], ' up value last')
// }
// if (newstate._commandHistory.length === 0) {
// setAutoCompleteState(prevState => ({ ...prevState, userInput: newstate[0] }))
// }
// setAutoCompleteState(prevState => ({ ...prevState, userInput: newstate[autoCompletState.commandHistoryIndex] }))
// TODO: giving error => need to work on the logic
// // } else if (newstate._commandHistory.length && event.which === 40 && !autoCompletState.showSuggestions && (autoCompletState.userInput !== '')) {
// // console.log('previous command down')
// // if (autoCompletState.commandHistoryIndex < newstate._commandHistory.length) {
// // setAutoCompleteState(prevState => ({ ...prevState, commandHistoryIndex: autoCompletState.commandHistoryIndex + 1, userInput: newstate._commandHistory[autoCompletState.commandHistoryIndex + 1] }))
// // console.log(newstate._commandHistory[newstate._commandHistory.length > 1 ? autoCompletState.commandHistoryIndex++ : newstate._commandHistory.length - 1], ' down ++ value')
// // } else {
// // console.log(newstate._commandHistory[newstate._commandHistory.length - 1], ' down value last')
// // setAutoCompleteState(prevState => ({ ...prevState, commandHistoryIndex: newstate._commandHistory.length - 1, userInput: newstate._commandHistory[newstate._commandHistory.length - 1] }))
// // }
// // // if (autoCompletState.commandHistoryIndex === newstate._commandHistory.length) {
// // // return
// // // }
// setAutoCompleteState(prevState => ({ ...prevState, userInput: newstate[autoCompletState.commandHistoryIndex] + 1 }))
} else if ( event . which === 38 && autoCompletState . showSuggestions ) {
event . preventDefault ( )
if ( autoCompletState . activeSuggestion === 0 ) {
return
}
setAutoCompleteState ( prevState = > ( { . . . prevState , activeSuggestion : suggestionCount - 1 , userInput : Object.keys ( autoCompletState . data . _options [ autoCompletState . activeSuggestion - 1 ] ) . toString ( ) } ) )
console . log ( )
setAutoCompleteState ( prevState = > ( { . . . prevState , activeSuggestion : suggestionCount - 1 , userInput : Object.keys ( autoCompletState . data . _options [ autoCompletState . activeSuggestion ] ) . toString ( ) } ) )
console . log ( { autoCompletState } , 'disable up an down key in input box' )
} else if ( event . which === 38 && ! autoCompletState . showSuggestions ) { // <arrowUp>
const len = _cmdHistory . length
if ( len === 0 ) event . preventDefault ( )
@ -408,21 +311,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
} else {
setCmdTemp ( inputEl . current . innerText )
}
console . log ( { autoCompletState } )
}
const moveGhostbar = ( event ) = > {
return props . api . getPosition ( event ) + 'px'
}
const removeGhostbar = ( event ) = > {
if ( toggleDownUp === 'fa-angle-double-up' ) {
console . log ( 'remove event' )
setToggleDownUp ( 'fa-angle-double-down' )
}
const value = props . event . get ( 'resize' )
console . log ( { value } )
props . event . trigger ( 'resize' , [ value ] )
}
/* start of mouse events */
@ -513,15 +401,10 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
}
}
function basicFilter ( value , query ) { try { return value . indexOf ( query ) !== - 1 } catch ( e ) { return false } }
const registerCommand = ( name , command , opts ) = > {
// setState((prevState) => ({ ...prevState, _commands[name]: command }))
}
/* end of block content that gets rendered from script Runner */
const handleClearConsole = ( ) = > {
setClearConsole ( true )
dispatch ( { type : 'clearconsole' , payload : [ ] } )
inputEl . current . focus ( )
}
@ -637,21 +520,15 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
}
const txDetails = ( event , tx , obj ) = > {
if ( showTableDetails === null ) {
setShowTableDetails ( true )
console . log ( { tx : tx.hash } )
if ( showTableHash . includes ( tx . hash ) ) {
const index = showTableHash . indexOf ( tx . hash )
console . log ( { index } )
if ( index > - 1 ) {
setShowTableHash ( ( prevState ) = > prevState . filter ( ( x ) = > x !== tx . hash ) )
}
} else {
setShowTableDetails ( null )
setShowTableHash ( ( prevState ) = > ( [ . . . prevState , tx . hash ] ) )
}
// if (showTableDetails.length === 0) {
// setShowTableDetails([{ hash: tx.hash, show: true }])
// }
// const id = showTableDetails.filter(x => x.hash !== tx.hash)
// if ((showTableDetails.length !== 0) && (id[0] === tx.hash)) {
// setShowTableDetails(currentState => ([...currentState, { hash: tx.hash, show: false }]))
// }
// console.log((showTableDetails.length !== 0) && (id[0] === tx.hash))
// console.log({ showTableDetails }, ' clicked button')
}
const showTable = ( opts ) = > {
@ -685,7 +562,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
}
const val = opts . val != null ? typeConversion . toInt ( opts . val ) : 0
return (
< table className = 'txTable' id = 'txTable' data - id = { ` txLoggerTable ${ opts . hash } ` } >
< table className = { ` txTable ${ showTableHash . includes ( opts . hash ) ? 'active' : '' } ` } id = 'txTable' data - id = { ` txLoggerTable ${ opts . hash } ` } >
< tr className = 'tr' >
< td className = 'td' data - shared = { ` key_ ${ opts . hash } ` } > status < / td >
< td className = 'td' data - id = { ` txLoggerTableStatus ${ opts . hash } ` } data - shared = { ` pair_ ${ opts . hash } ` } > { opts . status } { msg } < / td >
@ -829,7 +706,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
const from = tx . from
const to = tx . to
const obj = { from , to }
const showDetails = showTableDetails === tx . from
const txType = 'unknown' + ( tx . isCall ? 'Call' : 'Tx' )
return (
< span id = { ` tx ${ tx . hash } ` } key = { index } >
@ -840,9 +716,9 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
< div className = 'buttons' >
< div className = 'debug btn btn-primary btn-sm' onClick = { ( event ) = > debug ( event , tx ) } > Debug < / div >
< / div >
< i className = { ` arrow fas ${ ( showDetails ) ? 'fa-angle-up' : 'fa-angle-down' } ` } > < / i >
< i className = { ` arrow fas ${ ( showTableHash . includes ( tx . hash ) ) ? 'fa-angle-up' : 'fa-angle-down' } ` } > < / i >
< / div >
{ showTableDetails ? showTable ( {
{ showTableHash . includes ( tx . hash ) ? showTable ( {
hash : tx.hash ,
status : receipt !== null ? receipt.status : null ,
isCall : tx.isCall ,
@ -868,7 +744,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
< div >
{ autoCompletState . data . _options . map ( ( item , index ) = > {
return (
< div key = { index } data - id = "autoCompletePopUpAutoCompleteItem" className = { ` autoCompleteItem listHandlerShow item ${ autoCompletState . data . _options [ autoCompletState . activeSuggestion ] === item ? 'border border-primary selectedOptions' : '' } ` } onKeyDown = { handleSelect } >
< div key = { index } data - id = "autoCompletePopUpAutoCompleteItem" className = { ` autoCompleteItem listHandlerShow item ${ autoCompletState . data . _options [ autoCompletState . activeSuggestion ] === item ? 'border border-primary selectedOptions' : '' } ` } onKeyDown = { handleSelect } >
< div >
{ getKeyOf ( item ) }
< / div >
@ -884,23 +760,23 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
/* end of autoComplete */
return (
< div style = { { height : '323px' , flexGrow : 1 } } className = 'panel_2A0YE0 ' >
< div style = { { height : '323px' , flexGrow : 1 } } className = 'panel' >
{ console . log ( { newstate } ) }
{ console . log ( { props } ) }
< div className = "bar_2A0YE0 " >
< div className = "bar" >
{ /* ${self._view.dragbar} */ }
< div className = "dragbarHorizontal" onMouseDown = { mousedown } id = 'dragId' > < / div >
< div className = "menu_2A0YE0 border-top border-dark bg-light" data - id = "terminalToggleMenu" >
< div className = "menu border-top border-dark bg-light" data - id = "terminalToggleMenu" >
{ /* ${self._view.icon} */ }
< i className = { ` mx-2 toggleTerminal_2A0YE0 fas ${ toggleDownUp } ` } data - id = "terminalToggleIcon" onClick = { handleMinimizeTerminal } > < / i >
< i className = { ` mx-2 toggleTerminal fas ${ toggleDownUp } ` } data - id = "terminalToggleIcon" onClick = { handleMinimizeTerminal } > < / i >
< div className = "mx-2 console" id = "clearConsole" data - id = "terminalClearConsole" onClick = { handleClearConsole } >
< 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_2A0YE0 " > < / div >
< div className = "pt-1 h-80 mx-3 align-items-center listenOnNetwork_2A0YE0 custom-control custom-checkbox" >
< 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"
@ -916,14 +792,14 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
listen on network
< / label >
< / div >
< div className = "search_2A0YE0 " >
< i className = "fas fa-search searchIcon_2A0YE0 bg-light" aria - hidden = "true" > < / i >
< div className = "search" >
< i className = "fas fa-search searchIcon bg-light" aria - hidden = "true" > < / i >
{ /* ${self._view.inputSearch} */ }
< input
// spellcheck = "false"
onChange = { ( event ) = > setSearchInput ( event . target . value ) }
type = "text"
className = "border filter_2A0YE0 form-control"
className = "border filter form-control"
id = "searchInput"
// onkeydown=${filter}
placeholder = "Search with transaction hash or address"
@ -931,7 +807,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
< / div >
< / div >
< / div >
< div tabIndex = { - 1 } className = "terminal_container_2A0YE0 " data - id = "terminalContainer" >
< div tabIndex = { - 1 } className = "terminal_container" data - id = "terminalContainer" >
{
handleAutoComplete ( )
}
@ -942,38 +818,34 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
opacity : '0.1' ,
zIndex : - 1
} } > < / div >
< div className = "terminal_2A0YE0" >
< div id = "journal" className = "journal_2A0YE0" data - id = "terminalJournal" >
< div className = "terminal" >
< div id = "journal" className = "journal" data - id = "terminalJournal" >
{ ! clearConsole && < TerminalWelcomeMessage packageJson = { props . version } / > }
{ newstate . journalBlocks && newstate . journalBlocks . map ( ( x , index ) = > {
if ( x . name === 'emptyBlock' ) {
return (
< div className = "px-4 block_2A0YE0 " data - id = "block_null" key = { index } >
< div className = "px-4 block" data - id = "block_null" key = { index } >
< span className = 'txLog' >
< span className = 'tx' > < div className = 'txItem' > [ < span className = 'txItemTitle' > block : { x . message } - < / span > 0 { 'transactions' } ] < / div > < / span > < / span >
< / div >
)
} else if ( x . name === 'unknownTransaction' || x . name === 'knownTransaction' ) {
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_2A0YE0 ' data - id = { ` block_tx ${ trans . tx . hash } ` } > { renderKnownTransactions ( trans . tx , trans . receipt , index ) } < / div > )
return ( < div className = 'px-4 block' data - id = { ` block_tx ${ trans . tx . hash } ` } > { renderKnownTransactions ( trans . tx , trans . receipt , index ) } < / div > )
} )
} else {
return (
< div className = "px-4 block_2A0YE0 " data - id = "block_null" key = { index } >
< div className = "px-4 block" data - id = "block_null" key = { index } >
< span className = { x . style } > { x . message } < / span >
< / div >
)
}
} ) }
< div className = "anchor" >
{ /* ${background} */ }
< div className = "overlay background" > < / div >
{ /* ${text} */ }
< div className = "overlay text" > < / div >
< / div >
< div ref = { messagesEndRef } / >
< / div >
< div id = "terminalCli" data - id = "terminalCli" className = "cli_2A0YE0 " onClick = { focusinput } >
< span className = "prompt_2A0YE0 " > { '>' } < / span >
< input className = "input_2A0YE0 " ref = { inputEl } spellCheck = "false" contentEditable = "true" id = "terminalCliInput" data - id = "terminalCliInput" onChange = { ( event ) = > onChange ( event ) } onKeyDown = { ( event ) = > handleKeyDown ( event ) } value = { autoCompletState . userInput } > < / input >
< div id = "terminalCli" data - id = "terminalCli" className = "cli" onClick = { focusinput } >
< span className = "prompt" > { '>' } < / span >
< input className = "input" ref = { inputEl } spellCheck = "false" contentEditable = "true" id = "terminalCliInput" data - id = "terminalCliInput" onChange = { ( event ) = > onChange ( event ) } onKeyDown = { ( event ) = > handleKeyDown ( event ) } value = { autoCompletState . userInput } > < / input >
< / div >
< / div >
< / div >
davidzagi93@gmail.com
3 years ago