diff --git a/apps/remix-ide/src/app/panels/terminal.js b/apps/remix-ide/src/app/panels/terminal.js index 76b632a649..c595e952f3 100644 --- a/apps/remix-ide/src/app/panels/terminal.js +++ b/apps/remix-ide/src/app/panels/terminal.js @@ -37,7 +37,7 @@ class Terminal extends Plugin { this.registry = registry this.globalRegistry = globalRegistry this.element = document.createElement('div') - this.element.setAttribute('class', 'panel_2A0YE0') + this.element.setAttribute('class', 'panel') this.element.setAttribute('id', 'terminal-view') this.eventsDecoder = this.globalRegistry.get('eventsDecoder').api this.txListener = this.globalRegistry.get('txlistener').api @@ -82,6 +82,12 @@ class Terminal extends Plugin { this._INDEX.commandsMain = {} if (opts.shell) this._shell = opts.shell // ??? register(this) + this.event.register('debuggingRequested', async (hash) => { + // TODO should probably be in the run module + if (!await this._opts.appManager.isActive('debugger')) await this._opts.appManager.activatePlugin('debugger') + this.call('menuicons', 'select', 'debugger') + this.call('debugger', 'debug', hash) + }) } onActivation () { diff --git a/apps/remix-ide/src/lib/cmdInterpreterAPI.js b/apps/remix-ide/src/lib/cmdInterpreterAPI.js index 9c79cae25b..7468a7f334 100644 --- a/apps/remix-ide/src/lib/cmdInterpreterAPI.js +++ b/apps/remix-ide/src/lib/cmdInterpreterAPI.js @@ -93,7 +93,7 @@ class CmdInterpreterAPI { if (cb) cb() return } - + console.log({ content }, ' contents') self._components.terminal.commands.script(content) } diff --git a/libs/remix-ui/terminal/src/lib/commands.ts b/libs/remix-ui/terminal/src/lib/commands.ts index 14a3cbb97b..62eaafa0a0 100644 --- a/libs/remix-ui/terminal/src/lib/commands.ts +++ b/libs/remix-ui/terminal/src/lib/commands.ts @@ -2,13 +2,13 @@ export const allPrograms = [ { ethers: 'The ethers.js library is a compact and complete JavaScript library for Ethereum.' }, { remix: 'Ethereum IDE and tools for the web.' }, { web3: 'The web3.js library is a collection of modules which contain specific functionality for the ethereum ecosystem.' }, - { swarmgw: 'This library can be used to upload/download files to Swarm via https://swarm-gateways.net/.' } + // { swarmgw: 'This library can be used to upload/download files to Swarm via https://swarm-gateways.net/.' } ] export const allCommands = [ - { 'remix.execute(filepath)': 'Run the script specified by file path. If filepath is empty, script currently displayed in the editor is executed.' }, + // { 'remix.execute(filepath)': 'Run the script specified by file path. If filepath is empty, script currently displayed in the editor is executed.' }, { 'remix.exeCurrent()': 'Run the script currently displayed in the editor.' }, - { 'remix.help()': 'Display this help message.' }, + // { 'remix.help()': 'Display this help message.' }, { 'remix.loadgist(id)': 'Load a gist in the file explorer.' }, { 'remix.loadurl(url)': 'Load the given url in the file explorer. The url can be of type github, swarm or ipfs.' }, 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 abd5c36476..f757b1b3e8 100644 --- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.css +++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.css @@ -14,9 +14,6 @@ element.style { #terminalCliInput:focus { outline: none; } -input #terminalCliInput { - -} .border-primary { border-color: #007aa6!important; @@ -90,13 +87,13 @@ input #terminalCliInput { 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; + color : lightgray; } .input { word-break : break-word; @@ -275,8 +272,6 @@ input #terminalCliInput { .arrow:hover { color: var(--secondary); } - .txLog { - } .txStatus { display: flex; font-size: 20px; @@ -324,6 +319,10 @@ input #terminalCliInput { font-size: 10px; color: var(--text-info); border: 1px solid var(--text-info); + transition: max-height 0.3s, padding 0.3s; + } + table .active { + transition: max-height 0.6s, padding 0.6s; } #txTable { margin-top: 1%; 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 32a23f19e5..9be04ca258 100644 --- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx +++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx @@ -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 extends SyntheticEvent { 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 = +`
{k}: ${result[k]}

` - } - } - } - - 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) => { - // 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 { // 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('disable up an down key in input box') + 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) { // 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 ( - +
@@ -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 ( @@ -840,9 +716,9 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
debug(event, tx)}>Debug
- + - {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) => {
{autoCompletState.data._options.map((item, index) => { return ( -
+
{getKeyOf(item)}
@@ -884,23 +760,23 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => { /* end of autoComplete */ return ( -
+
{console.log({ newstate })} {console.log({ props })} -
+
{/* ${self._view.dragbar} */}
-
+
{/* ${self._view.icon} */} - +
{/* ${self._view.pendingTxCount} */}
0
-
-
+
+
{ listen on network
-
- +
+ {/* ${self._view.inputSearch} */} 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) => {
-
+
{ handleAutoComplete() } @@ -942,38 +818,34 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => { opacity: '0.1', zIndex: -1 }}>
-
-
+
+
+ {!clearConsole && } {newstate.journalBlocks && newstate.journalBlocks.map((x, index) => { if (x.name === 'emptyBlock') { return ( -
+
[block:{x.message} - 0 {'transactions'} ]
) } 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 (
{renderKnownTransactions(trans.tx, trans.receipt, index)}
) + return (
{renderKnownTransactions(trans.tx, trans.receipt, index)}
) }) } else { return ( -
+
{x.message}
) } })} -
- {/* ${background} */} -
- {/* ${text} */} -
-
+
-
- {'>'} - onChange(event)} onKeyDown={(event) => handleKeyDown(event) } value={autoCompletState.userInput}> +
+ {'>'} + onChange(event)} onKeyDown={(event) => handleKeyDown(event) } value={autoCompletState.userInput}>
diff --git a/libs/remix-ui/terminal/src/lib/terminalWelcome.tsx b/libs/remix-ui/terminal/src/lib/terminalWelcome.tsx new file mode 100644 index 0000000000..7d9c1a4055 --- /dev/null +++ b/libs/remix-ui/terminal/src/lib/terminalWelcome.tsx @@ -0,0 +1,30 @@ +import React from 'react' + +const TerminalWelcomeMessage = ({ packageJson }) => { + return ( +
+
- Welcome to Remix {packageJson} -

+
You can use this terminal to:
+
    +
  • Check transactions details and start debugging.
    • +
  • Execute JavaScript scripts: +
    + - Input a script directly in the command line interface +
    + - Select a Javascript file in the file explorer and then run \`remix.execute()\` or \`remix.exeCurrent()\` in the command line interface +
    + - Right click on a JavaScript file in the file explorer and then click \`Run\` +
    • +
+
The following libraries are accessible:
+ +
+ ) +} + +export default TerminalWelcomeMessage diff --git a/libs/remix-ui/terminal/src/lib/utils/helper.ts b/libs/remix-ui/terminal/src/lib/utils/helper.ts deleted file mode 100644 index 56b50a4377..0000000000 --- a/libs/remix-ui/terminal/src/lib/utils/helper.ts +++ /dev/null @@ -1,176 +0,0 @@ -// var async = require('async') -// const ethJSUtil = require('ethereumjs-util') - -// export const shortenAddress = (address, etherBalance) => { -// var len = address.length -// return address.slice(0, 5) + '...' + address.slice(len - 5, len) + (etherBalance ? ' (' + etherBalance.toString() + ' ether)' : '') -// } - -// export const addressToString = (address) => { -// if (!address) return null -// if (typeof address !== 'string') { -// address = address.toString('hex') -// } -// if (address.indexOf('0x') === -1) { -// address = '0x' + address -// } -// return ethJSUtil.toChecksumAddress(address) -// } - -// export const shortenHexData = (data) => { -// if (!data) return '' -// if (data.length < 5) return data -// var len = data.length -// return data.slice(0, 5) + '...' + data.slice(len - 5, len) -// } - -// export const createNonClashingNameWithPrefix = (name, fileProvider, prefix, cb) => { -// if (!name) name = 'Undefined' -// var counter = '' -// var ext = 'sol' -// var reg = /(.*)\.([^.]+)/g -// var split = reg.exec(name) -// if (split) { -// name = split[1] -// ext = split[2] -// } -// var exist = true -// async.whilst( -// () => { return exist }, -// (callback) => { -// fileProvider.exists(name + counter + prefix + '.' + ext).then(currentExist => { -// exist = currentExist -// if (exist) counter = (counter | 0) + 1 -// callback() -// }).catch(error => { -// if (error) console.log(error) -// }) -// }, -// (error) => { cb(error, name + counter + prefix + '.' + ext) } -// ) -// } - -// export const createNonClashingName = (name, fileProvider, cb) => { -// this.createNonClashingNameWithPrefix(name, fileProvider, '', cb) -// }, -// export const createNonClashingNameAsync = async (name, fileManager, prefix = '') => { -// if (!name) name = 'Undefined' -// let counter = '' -// let ext = 'sol' -// const reg = /(.*)\.([^.]+)/g -// const split = reg.exec(name) -// if (split) { -// name = split[1] -// ext = split[2] -// } -// let exist = true - -// do { -// const isDuplicate = await fileManager.exists(name + counter + prefix + '.' + ext) - -// if (isDuplicate) counter = (counter | 0) + 1 -// else exist = false -// } while (exist) - -// return name + counter + prefix + '.' + ext -// } - -// export const createNonClashingDirNameAsync = async (name, fileManager) => { -// if (!name) name = 'Undefined' -// let counter = '' -// let exist = true - -// do { -// const isDuplicate = await fileManager.exists(name + counter) - -// if (isDuplicate) counter = (counter | 0) + 1 -// else exist = false -// } while (exist) - -// return name + counter -// } - -// export const checkSpecialChars = (name) => { -// return name.match(/[:*?"<>\\'|]/) != null -// } - -// export const checkSlash = (name) => { -// return name.match(/\//) != null -// } - -// export const isHexadecimal = (value) => { -// return /^[0-9a-fA-F]+$/.test(value) && (value.length % 2 === 0) -// } - -// export const is0XPrefixed = (value) => { -// return value.substr(0, 2) === '0x' -// } - -// export const isNumeric = (value) => { -// return /^\+?(0|[1-9]\d*)$/.test(value) -// } - -// export const isValidHash = (hash) => { // 0x prefixed, hexadecimal, 64digit -// const hexValue = hash.slice(2, hash.length) -// return this.is0XPrefixed(hash) && /^[0-9a-fA-F]{64}$/.test(hexValue) -// } - -// export const removeTrailingSlashes = (text) { -// // Remove single or consecutive trailing slashes -// return text.replace(/\/+$/g, '') -// }, -// removeMultipleSlashes (text) { -// // Replace consecutive slashes with '/' -// return text.replace(/\/+/g, '/') -// }, -// find: find, -// getPathIcon (path) { -// return path.endsWith('.txt') -// ? 'far fa-file-alt' : path.endsWith('.md') -// ? 'far fa-file-alt' : path.endsWith('.sol') -// ? 'fak fa-solidity-mono' : path.endsWith('.js') -// ? 'fab fa-js' : path.endsWith('.json') -// ? 'fas fa-brackets-curly' : path.endsWith('.vy') -// ? 'fak fa-vyper-mono' : path.endsWith('.lex') -// ? 'fak fa-lexon' : path.endsWith('.contract') -// ? 'fab fa-ethereum' : 'far fa-file' -// }, -// joinPath (...paths) { -// paths = paths.filter((value) => value !== '').map((path) => path.replace(/^\/|\/$/g, '')) // remove first and last slash) -// if (paths.length === 1) return paths[0] -// return paths.join('/') -// }, -// extractNameFromKey (key) { -// const keyPath = key.split('/') - -// return keyPath[keyPath.length - 1] -// } - -// const findDeep = (object, fn, found = { break: false, value: undefined }) => { -// if (typeof object !== 'object' || object === null) return -// for (var i in object) { -// if (found.break) break -// var el = object[i] -// if (el && el.innerText !== undefined && el.innerText !== null) el = el.innerText -// if (fn(el, i, object)) { -// found.value = el -// found.break = true -// break -// } else { -// findDeep(el, fn, found) -// } -// } -// return found.value -// } - -// const find = (args, query) => { -// query = query.trim() -// var isMatch = !!findDeep(args, function check (value, key) { -// if (value === undefined || value === null) return false -// if (typeof value === 'function') return false -// if (typeof value === 'object') return false -// var contains = String(value).indexOf(query.trim()) !== -1 -// return contains -// }) -// return isMatch -// }
status {opts.status}{msg}