@ -72,13 +72,9 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
const messagesEndRef = useRef ( null )
// terminal dragable
const leftRef = useRef ( null )
const panelRef = useRef ( null )
const terminalMenu = useRef ( null )
const terminalMenuOffsetHeight = ( terminalMenu . current && terminalMenu . current . offsetHeight ) || 35
const terminalDefaultPosition = config . get ( 'terminal-top-offset' )
const scrollToBottom = ( ) = > {
messagesEndRef . current . scrollIntoView ( { behavior : 'smooth' } )
}
@ -381,14 +377,24 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
} else {
setShowTableHash ( ( prevState ) = > ( [ . . . prevState , tx . hash ] ) )
}
scrollToBottom ( )
}
const handleAutoComplete = ( ) = > (
< div className = 'popup alert alert-secondary' style = { { display : ( autoCompletState . showSuggestions && autoCompletState . userInput !== '' && ( autoCompletState . userInput . length > 2 ) ) && autoCompletState . data . _options . length > 0 ? 'block' : 'none' } } >
< div
className = 'remix_ui_terminal_popup bg-light ml-4 p-2 position-absolute text-left '
style = { { display : ( autoCompletState . showSuggestions && autoCompletState . userInput !== '' && ( autoCompletState . userInput . length > 2 ) ) && autoCompletState . data . _options . length > 0 ? 'block' : 'none' } }
>
< 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 ' : '' } ` } onKeyDown = { handleSelect } onClick = { ( ) = > handleClickSelect ( item ) } >
< div
key = { index }
data - id = "autoCompletePopUpAutoCompleteItem"
className = { ` remix_ui_terminal_autoCompleteItem item ${ autoCompletState . data . _options [ autoCompletState . activeSuggestion ] === item ? 'border border-primary ' : '' } ` }
onKeyDown = { handleSelect }
onClick = { ( ) = > handleClickSelect ( item ) }
>
< div >
{ getKeyOf ( item ) }
< / div >
@ -413,17 +419,19 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
props . plugin . call ( 'layout' , 'minimize' , props . plugin . profile . name , isOpen )
}
const classNameBlock = 'remix_ui_terminal_block px-4 py-1 text-break'
return (
< div style = { { flexGrow : 1 } } className = 'panel' ref = { panelRef } >
< div className = "bar" >
< div className = "menu border-top border-dark bg-light" ref = { terminalMenu } data - id = "terminalToggleMenu" >
< i className = { ` mx-2 toggleTerminal fas ${ isOpen ? 'fa-angle-double-down' : 'fa-angle-double-up' } ` } data - id = "terminalToggleIcon" onClick = { handleToggleTerminal } > < / i >
< div className = "mx-2 console" id = "clearConsole" data - id = "terminalClearConsole" onClick = { handleClearConsole } >
< div style = { { flexGrow : 1 } } className = 'remix_ui_terminal_ panel' ref = { panelRef } >
< div className = "remix_ui_terminal_ bar d-flex " >
< div className = "remix_ui_terminal_ menu d-flex w-100 align-items-center position-relative border-top border-dark bg-light" ref = { terminalMenu } data - id = "terminalToggleMenu" >
< i className = { ` mx-2 remix_ui_terminal_ toggleTerminal fas ${ isOpen ? 'fa-angle-double-down' : 'fa-angle-double-up' } ` } data - id = "terminalToggleIcon" onClick = { handleToggleTerminal } > < / i >
< div className = "mx-2 remix_ui_terminal_ console" id = "clearConsole" data - id = "terminalClearConsole" onClick = { handleClearConsole } >
< i className = "fas fa-ban" aria - hidden = "true" title = "Clear console"
> < / i >
< / div >
< div className = "mx-2" title = 'Pending Transactions' > 0 < / div >
< div className = "pt-1 h-80 mx-3 align-items-center listenOnNetwork custom-control custom-checkbox" >
< div className = "pt-1 h-80 mx-3 align-items-center remix_ui_terminal_ listenOnNetwork custom-control custom-checkbox" >
< input
className = "custom-control-input"
id = "listenNetworkCheck"
@ -439,47 +447,79 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
listen on network
< / label >
< / div >
< div className = "search" >
< i className = "fas fa-search searchIcon bg-light" aria - hidden = "true" > < / i >
< div className = "remix_ui_terminal_search d-flex align-items-center h-100" >
< i
className = "remix_ui_terminal_searchIcon d-flex align-items-center justify-content-center fas fa-search bg-light"
aria - hidden = "true" >
< / i >
< input
onChange = { ( event ) = > setSearchInput ( event . target . value . trim ( ) ) }
type = "text"
className = "border filt er form-control"
className = "remix_ui_terminal_filter bord er form-control"
id = "searchInput"
placeholder = "Search with transaction hash or address"
data - id = "terminalInputSearch" / >
< / div >
< / div >
< / div >
< div tabIndex = { - 1 } className = "terminal_container" data - id = "terminalContainer" >
< div tabIndex = { - 1 } className = "remix_ui_ terminal_container d-flex h-100 m-0 flex-column " data - id = "terminalContainer" >
{
handleAutoComplete ( )
}
< div data - id = 'terminalContainerDisplay' style = { {
position : 'relative' ,
height : '100%' ,
width : '100%' ,
opacity : '0.1' ,
zIndex : - 1
} } > < / div >
< div className = "terminal" >
< div id = 'journal' className = 'journal' data - id = 'terminalJournal' >
< 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 packageJson = { version } / > }
{ newstate . journalBlocks && newstate . journalBlocks . map ( ( x , index ) = > {
if ( x . name === EMPTY_BLOCK ) {
return (
< div className = "px-4 block" data - id = 'block' key = { index } >
< span className = 'txLog' >
< span className = 'tx' > < div className = 'txItem' > [ < span className = 'txItemTitle' > block : { x . message } - < / span > 0 { 'transactions' } ] < / div > < / span > < / span >
< div className = { classNameBlock } data - id = 'block' key = { index } >
< span className = 'remix_ui_terminal_tx' >
< div className = 'remix_ui_terminal_txItem' > [ < span className = 'remix_ui_terminal_txItemTitle' > block : { x . message } - < / span > 0 { 'transactions' } ]
< / div >
< / span >
< / div >
)
} 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 ) ) ) . map ( ( trans ) = > {
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 } modal = { modal } / > } < / div > )
return (
< div className = { classNameBlock } 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 }
modal = { modal }
/ > }
< / div >
)
} )
} else if ( x . name === KNOWN_TRANSACTION ) {
return x . message . map ( ( trans ) = > {
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 } modal = { modal } / > : ( < RenderKnownTransactions tx = { trans . tx } receipt = { trans . receipt } resolvedData = { trans . resolvedData } logs = { trans . logs } index = { index } plugin = { props . plugin } showTableHash = { showTableHash } txDetails = { txDetails } modal = { modal } / > ) } < / div > )
return (
< div className = { classNameBlock } 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 }
modal = { modal }
/ > : ( < R e n d e r K n o w n T r a n s a c t i o n s
tx = { trans . tx }
receipt = { trans . receipt }
resolvedData = { trans . resolvedData }
logs = { trans . logs }
index = { index }
plugin = { props . plugin }
showTableHash = { showTableHash }
txDetails = { txDetails }
modal = { modal }
/ > ) }
< / div >
)
} )
} else if ( Array . isArray ( x . message ) ) {
return x . message . map ( ( msg , i ) = > {
@ -489,28 +529,40 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
)
} else if ( typeof msg === 'object' ) {
return (
< div className = "px-4 block" data - id = "block" key = { i } > < span className = { x . style } > { msg . value ? parse ( msg . value ) : JSON . stringify ( msg ) } < / span > < / div >
< div className = { classNameBlock } data - id = "block" key = { i } > < span className = { x . style } > { msg . value ? parse ( msg . value ) : JSON . stringify ( msg ) } < / span > < / div >
)
} else {
return (
< div className = "px-4 block" data - id = "block" key = { i } > < span className = { x . style } > { msg ? msg . toString ( ) . replace ( /,/g , '' ) : msg } < / span > < / div >
< div className = { classNameBlock } data - id = "block" key = { i } > < span className = { x . style } > { msg ? msg . toString ( ) . replace ( /,/g , '' ) : msg } < / span > < / div >
)
}
} )
} else {
if ( typeof x . message !== 'function' ) {
return (
< div className = "px-4 block" data - id = "block" key = { index } > < span className = { x . style } > { x . message } < / span > < / div >
< div className = { classNameBlock } data - id = "block" key = { index } > < span className = { x . style } > { x . message } < / span > < / div >
)
}
}
} ) }
< div ref = { messagesEndRef } / >
< / div >
< 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 } onPaste = { handlePaste } > < / input >
{ isOpen && < div id = "terminalCli" data - id = "terminalCli" className = "remix_ui_terminal_cli position-absolute w-100" onClick = { focusinput } >
< span className = "remix_ui_terminal_prompt blink mx-1 font-weight-bold text-dark" > { '>' } < / span >
< input
className = "remix_ui_terminal_input ml-1 text-dark text-break border-0"
ref = { inputEl }
spellCheck = "false"
contentEditable = "true"
id = "terminalCliInput"
data - id = "terminalCliInput"
onChange = { ( event ) = > onChange ( event ) }
onKeyDown = { ( event ) = > handleKeyDown ( event ) }
value = { autoCompletState . userInput }
onPaste = { handlePaste }
> < / input >
< / div >
}
< / div >
< / div >
< ModalDialog
David Disu
3 years ago
committed by
GitHub