mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

refactored the code of terminal. fixed css naming. Cleanedup.

Browse Source
pull/1908/head
lianahus 3 years ago
parent 4fdf4ad94f
commit 6dbf58cafe
9 changed files with 245 additions and 312 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 8
      libs/remix-ui/terminal/src/lib/components/ChechTxStatus.tsx
  2. 48
      libs/remix-ui/terminal/src/lib/components/Context.tsx
  3. 19
      libs/remix-ui/terminal/src/lib/components/RenderCall.tsx
  4. 13
      libs/remix-ui/terminal/src/lib/components/RenderKnownTransactions.tsx
  5. 13
      libs/remix-ui/terminal/src/lib/components/RenderUnknownTransactions.tsx
  6. 84
      libs/remix-ui/terminal/src/lib/components/Table.tsx
  7. 255
      libs/remix-ui/terminal/src/lib/remix-ui-terminal.css
  8. 111
      libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
  9. 6
      libs/remix-ui/terminal/src/lib/terminalWelcome.tsx

8
libs/remix-ui/terminal/src/lib/components/ChechTxStatus.tsx
Unescape View File

@ -2,14 +2,14 @@ import React from 'react' // eslint-disable-line
const CheckTxStatus = ({ tx, type }) => {
if (tx.status === '0x1' || tx.status === true) {
return (<i className='txStatus succeeded fas fa-check-circle'></i>)
return (<i className='remix_ui_terminal_txStatus remix_ui_terminal_succeeded fas fa-check-circle'></i>)
}
if (type === 'call' || type === 'unknownCall' || type === 'unknown') {
return (<i className='txStatus call'>call</i>)
return (<i className='remix_ui_terminal_txStatus remix_ui_terminal_call'>call</i>)
} else if (tx.status === '0x0' || tx.status === false) {
return (<i className='txStatus failed fas fa-times-circle'></i>)
return (<i className='remix_ui_terminal_txStatus remix_ui_terminal_failed fas fa-times-circle'></i>)
} else {
return (<i className='txStatus notavailable fas fa-circle-thin' title='Status not available' ></i>)
return (<i className='remix_ui_terminal_txStatus fas fa-circle-thin' title='Status not available' ></i>)
}
}

48
libs/remix-ui/terminal/src/lib/components/Context.tsx
Unescape View File

@ -19,41 +19,41 @@ const Context = ({ opts, blockchain }) => {
if (blockchain.getProvider() === 'vm') {
return (
<div>
<span className='txLog_7Xiho'>
<span className='tx'>[vm]</span>
<div className='txItem'><span className='txItemTitle'>from:</span> {from}</div>
<div className='txItem'><span className='txItemTitle'>to:</span> {to}</div>
<div className='txItem'><span className='txItemTitle'>value:</span> {value} wei</div>
<div className='txItem'><span className='txItemTitle'>data:</span> {input}</div>
<div className='txItem'><span className='txItemTitle'>logs:</span> {logs}</div>
<div className='txItem'><span className='txItemTitle'>hash:</span> {hash}</div>
<span>
<span className='remix_ui_terminal_tx'>[vm]</span>
<div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>from:</span> {from}</div>
<div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>to:</span> {to}</div>
<div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>value:</span> {value} wei</div>
<div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>data:</span> {input}</div>
<div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>logs:</span> {logs}</div>
<div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>hash:</span> {hash}</div>
</span>
</div>)
} else if (blockchain.getProvider() !== 'vm' && data.resolvedData) {
return (
<div>
<span className='txLog_7Xiho'>
<span className='tx'>[block:{block} txIndex:{i}]</span>
<div className='txItem'><span className='txItemTitle'>from:</span> {from}</div>
<div className='txItem'><span className='txItemTitle'>to:</span> {to}</div>
<div className='txItem'><span className='txItemTitle'>value:</span> {value} wei</div>
<div className='txItem'><span className='txItemTitle'>data:</span> {input}</div>
<div className='txItem'><span className='txItemTitle'>logs:</span> {logs}</div>
<div className='txItem'><span className='txItemTitle'>hash:</span> {hash}</div>
<span>
<span className='remix_ui_terminal_tx'>[block:{block} txIndex:{i}]</span>
<div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>from:</span> {from}</div>
<div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>to:</span> {to}</div>
<div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>value:</span> {value} wei</div>
<div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>data:</span> {input}</div>
<div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>logs:</span> {logs}</div>
<div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>hash:</span> {hash}</div>
</span>
</div>)
} else {
hash = helper.shortenHexData(data.blockHash)
return (
<div>
<span className='txLog'>
<span className='tx'>[block:{block} txIndex:{i}]</span>
<div className='txItem'><span className='txItemTitle'>from:</span> {from}</div>
<div className='txItem'><span className='txItemTitle'>to:</span> {to}</div>
<div className='txItem'><span className='txItemTitle'>value:</span> {value} wei</div>
<div className='txItem'><span className='txItemTitle'>data:</span> {input}</div>
<div className='txItem'><span className='txItemTitle'>logs:</span> {logs}</div>
<div className='txItem'><span className='txItemTitle'>hash:</span> {hash}</div>
<span>
<span className='remix_ui_terminal_tx'>[block:{block} txIndex:{i}]</span>
<div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>from:</span> {from}</div>
<div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>to:</span> {to}</div>
<div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>value:</span> {value} wei</div>
<div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>data:</span> {input}</div>
<div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>logs:</span> {logs}</div>
<div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>hash:</span> {hash}</div>
</span>
</div>)
}

19
libs/remix-ui/terminal/src/lib/components/RenderCall.tsx
Unescape View File

@ -1,9 +1,8 @@
import React, { useState } from 'react' // eslint-disable-line
import { ModalDialog } from '@remix-ui/modal-dialog' // eslint-disable-line
import helper from 'apps/remix-ide/src/lib/helper'
import CheckTxStatus from './ChechTxStatus' // eslint-disable-line
import showTable from './Table'
import { ModalDialog } from '@remix-ui/modal-dialog' // eslint-disable-line
const remixLib = require('@remix-project/remix-lib')
const typeConversion = remixLib.execution.typeConversion
@ -25,18 +24,18 @@ const RenderCall = ({ tx, resolvedData, logs, index, plugin, showTableHash, txDe
return (
<span id={`tx${tx.hash}`} key={index}>
<div className="log" onClick={(event) => txDetails(event, tx)}>
<div className="remix_ui_terminal_log" onClick={(event) => txDetails(event, tx)}>
<CheckTxStatus tx={tx} type={txType} />
<span className="txLog">
<span>
<span className="tx">[call]</span>
<div className='txItem'><span className='txItemTitle'>from:</span> {from}</div>
<div className='txItem'><span className='txItemTitle'>to:</span> {to}</div>
<div className='txItem'><span className='txItemTitle'>data:</span> {input}</div>
<div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>from:</span> {from}</div>
<div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>to:</span> {to}</div>
<div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>data:</span> {input}</div>
</span>
<div className='buttons'>
<div className="debug btn btn-primary btn-sm" onClick={(event) => debug(event, tx)}>Debug</div>
<div className='remix_ui_terminal_buttons'>
<div className="remix_ui_terminal_debug btn btn-primary btn-sm" onClick={(event) => debug(event, tx)}>Debug</div>
</div>
<i className="terminal_arrow fas fa-angle-down"></i>
<i className="remix_ui_terminal_terminal_arrow fas fa-angle-down"></i>
</div>
{showTableHash.includes(tx.hash) ? showTable({
hash: tx.hash,

13
libs/remix-ui/terminal/src/lib/components/RenderKnownTransactions.tsx
Unescape View File

@ -24,13 +24,18 @@ const RenderKnownTransactions = ({ tx, receipt, resolvedData, logs, index, plugi
const options = { from, to, tx, logs }
return (
<span id={`tx${tx.hash}`} key={index}>
<div className="log" onClick={(event) => txDetails(event, tx)}>
<div className="remix_ui_terminal_log" onClick={(event) => txDetails(event, tx)}>
<CheckTxStatus tx={receipt} type={txType} />
<Context opts = { options } blockchain={plugin.blockchain} />
<div className='buttons'>
<div className='debug btn btn-primary btn-sm' data-shared='txLoggerDebugButton' data-id={`txLoggerDebugButton${tx.hash}`} onClick={(event) => debug(event, tx)}>Debug</div>
<div className='remix_ui_terminal_buttons'>
<div
className='remix_ui_terminal_debug btn btn-primary btn-sm'
data-shared='txLoggerDebugButton'
data-id={`txLoggerDebugButton${tx.hash}`}
onClick={(event) => debug(event, tx)}
>Debug</div>
</div>
<i className = {`terminal_arrow fas ${(showTableHash.includes(tx.hash)) ? 'fa-angle-up' : 'fa-angle-down'}`}></i>
<i className={`remix_ui_terminal_arrow fas ${(showTableHash.includes(tx.hash)) ? 'fa-angle-up' : 'fa-angle-down'}`}></i>
</div>
{showTableHash.includes(tx.hash) ? showTable({
hash: tx.hash,

13
libs/remix-ui/terminal/src/lib/components/RenderUnknownTransactions.tsx
Unescape View File

@ -1,5 +1,4 @@
import React, { useState } from 'react' // eslint-disable-line
import { ModalDialog } from '@remix-ui/modal-dialog'// eslint-disable-line
import CheckTxStatus from './ChechTxStatus' // eslint-disable-line
import Context from './Context' // eslint-disable-line
import showTable from './Table'
@ -20,13 +19,17 @@ const RenderUnKnownTransactions = ({ tx, receipt, index, plugin, showTableHash,
const options = { from, to, tx }
return (
<span id={`tx${tx.hash}`} key={index}>
<div className="log" onClick={(event) => txDetails(event, tx)}>
<div className="remix_ui_terminal_log" onClick={(event) => txDetails(event, tx)}>
<CheckTxStatus tx={receipt || tx} type={txType} />
<Context opts = { options } blockchain={plugin.blockchain} />
<div className='buttons'>
<div className='debug btn btn-primary btn-sm' data-shared='txLoggerDebugButton' data-id={`txLoggerDebugButton${tx.hash}`} onClick={(event) => debug(event, tx)}>Debug</div>
<div className='remix_ui_terminal_buttons'>
<div className='remix_ui_terminal_debug btn btn-primary btn-sm'
data-shared='txLoggerDebugButton'
data-id={`txLoggerDebugButton${tx.hash}`}
onClick={(event) => debug(event, tx)}
>Debug</div>
</div>
<i className = {`terminal_arrow fas ${(showTableHash.includes(tx.hash)) ? 'fa-angle-up' : 'fa-angle-down'}`}></i>
<i className = {`remix_ui_terminal_arrow fas ${(showTableHash.includes(tx.hash)) ? 'fa-angle-up' : 'fa-angle-down'}`}></i>
</div>
{showTableHash.includes(tx.hash) ? showTable({
hash: tx.hash,

84
libs/remix-ui/terminal/src/lib/components/Table.tsx
Unescape View File

@ -37,30 +37,30 @@ const showTable = (opts, showTableHash) => {
const val = opts.val != null ? typeConversion.toInt(opts.val) : 0
return (
<table
className={`txTable ${showTableHash.includes(opts.hash) ? 'active' : ''}`}
className={`remix_ui_terminal_txTable ${showTableHash.includes(opts.hash) ? 'active' : ''}`}
id="txTable"
data-id={`txLoggerTable${opts.hash}`}
>
<tbody>
{opts.status !== undefined ? (
<tr className="tr">
<td className="td" data-shared={`key_${opts.hash}`}>
<tr className="remix_ui_terminal_tr">
<td className="remix_ui_terminal_td" data-shared={`key_${opts.hash}`}>
status
</td>
<td
className="td"
className="remix_ui_terminal_td"
data-id={`txLoggerTableStatus${opts.hash}`}
data-shared={`pair_${opts.hash}`}
>{`${opts.status} ${msg}`}</td>
</tr>
) : null}
{opts.hash && !opts.isCall ? (
<tr className="tr">
<td className="td" data-shared={`key_${opts.hash}`}>
<tr className="remix_ui_terminal_tr">
<td className="remix_ui_terminal_td" data-shared={`key_${opts.hash}`}>
transaction hash
</td>
<td
className="td"
className="remix_ui_terminal_td"
data-id={`txLoggerTableHash${opts.hash}`}
data-shared={`pair_${opts.hash}`}
>
@ -70,12 +70,12 @@ const showTable = (opts, showTableHash) => {
</tr>
) : null}
{opts.contractAddress ? (
<tr className="tr">
<td className="td" data-shared={`key_${opts.hash}`}>
<tr className="remix_ui_terminal_tr">
<td className="remix_ui_terminal_td" data-shared={`key_${opts.hash}`}>
contract address
</td>
<td
className="td"
className="remix_ui_terminal_td"
data-id={`txLoggerTableContractAddress${opts.hash}`}
data-shared={`pair_${opts.hash}`}
>
@ -85,12 +85,12 @@ const showTable = (opts, showTableHash) => {
</tr>
) : null}
{opts.from ? (
<tr className="tr">
<tr className="remix_ui_terminal_tr">
<td className="td tableTitle" data-shared={`key_${opts.hash}`}>
from
</td>
<td
className="td"
className="remix_ui_terminal_td"
data-id={`txLoggerTableFrom${opts.hash}`}
data-shared={`pair_${opts.hash}`}
>
@ -100,12 +100,12 @@ const showTable = (opts, showTableHash) => {
</tr>
) : null}
{opts.to ? (
<tr className="tr">
<td className="td" data-shared={`key_${opts.hash}`}>
<tr className="remix_ui_terminal_tr">
<td className="remix_ui_terminal_td" data-shared={`key_${opts.hash}`}>
to
</td>
<td
className="td"
className="remix_ui_terminal_td"
data-id={`txLoggerTableTo${opts.hash}`}
data-shared={`pair_${opts.hash}`}
>
@ -115,12 +115,12 @@ const showTable = (opts, showTableHash) => {
</tr>
) : null}
{opts.gas ? (
<tr className="tr">
<td className="td" data-shared={`key_${opts.hash}`}>
<tr className="remix_ui_terminal_tr">
<td className="remix_ui_terminal_td" data-shared={`key_${opts.hash}`}>
gas
</td>
<td
className="td"
className="remix_ui_terminal_td"
data-id={`txLoggerTableGas${opts.hash}`}
data-shared={`pair_${opts.hash}`}
>
@ -130,12 +130,12 @@ const showTable = (opts, showTableHash) => {
</tr>
) : null}
{opts.transactionCost ? (
<tr className="tr">
<td className="td" data-shared={`key_${opts.hash}`}>
<tr className="remix_ui_terminal_tr">
<td className="remix_ui_terminal_td" data-shared={`key_${opts.hash}`}>
transaction cost
</td>
<td
className="td"
className="remix_ui_terminal_td"
data-id={`txLoggerTableTransactionCost${opts.hash}`}
data-shared={`pair_${opts.hash}`}
>
@ -145,12 +145,12 @@ const showTable = (opts, showTableHash) => {
</tr>
) : null}
{opts.executionCost ? (
<tr className="tr">
<td className="td" data-shared={`key_${opts.hash}`}>
<tr className="remix_ui_terminal_tr">
<td className="remix_ui_terminal_td" data-shared={`key_${opts.hash}`}>
execution cost
</td>
<td
className="td"
className="remix_ui_terminal_td"
data-id={`txLoggerTableExecutionHash${opts.hash}`}
data-shared={`pair_${opts.hash}`}
>
@ -160,12 +160,12 @@ const showTable = (opts, showTableHash) => {
</tr>
) : null}
{opts.hash ? (
<tr className="tr">
<td className="td" data-shared={`key_${opts.hash}`}>
<tr className="remix_ui_terminal_tr">
<td className="remix_ui_terminal_td" data-shared={`key_${opts.hash}`}>
hash
</td>
<td
className="td"
className="remix_ui_terminal_td"
data-id={`txLoggerTableHash${opts.hash}`}
data-shared={`pair_${opts.hash}`}
>
@ -175,12 +175,12 @@ const showTable = (opts, showTableHash) => {
</tr>
) : null}
{opts.input ? (
<tr className="tr">
<td className="td" data-shared={`key_${opts.hash}`}>
<tr className="remix_ui_terminal_tr">
<td className="remix_ui_terminal_td" data-shared={`key_${opts.hash}`}>
input
</td>
<td
className="td"
className="remix_ui_terminal_td"
data-id={`txLoggerTableHash${opts.hash}`}
data-shared={`pair_${opts.hash}`}
>
@ -190,12 +190,12 @@ const showTable = (opts, showTableHash) => {
</tr>
) : null}
{opts['decoded input'] ? (
<tr className="tr">
<td className="td" data-shared={`key_${opts.hash}`}>
<tr className="remix_ui_terminal_tr">
<td className="remix_ui_terminal_td" data-shared={`key_${opts.hash}`}>
decoded input
</td>
<td
className="td"
className="remix_ui_terminal_td"
data-id={`txLoggerTableHash${opts.hash}`}
data-shared={`pair_${opts.hash}`}
>
@ -205,12 +205,12 @@ const showTable = (opts, showTableHash) => {
</tr>
) : null}
{opts['decoded output'] ? (
<tr className="tr">
<td className="td" data-shared={`key_${opts.hash}`}>
<tr className="remix_ui_terminal_tr">
<td className="remix_ui_terminal_td" data-shared={`key_${opts.hash}`}>
decoded output
</td>
<td
className="td"
className="remix_ui_terminal_td"
data-id={`txLoggerTableHash${opts.hash}`}
data-shared={`pair_${opts.hash}`}
>
@ -220,12 +220,12 @@ const showTable = (opts, showTableHash) => {
</tr>
) : null}
{opts.logs ? (
<tr className="tr">
<td className="td" data-shared={`key_${opts.hash}`}>
<tr className="remix_ui_terminal_tr">
<td className="remix_ui_terminal_td" data-shared={`key_${opts.hash}`}>
logs
</td>
<td
className="td"
className="remix_ui_terminal_td"
data-id={`txLoggerTableHash${opts.hash}`}
data-shared={`pair_${opts.hash}`}
>
@ -238,12 +238,12 @@ const showTable = (opts, showTableHash) => {
</tr>
) : null}
{opts.val ? (
<tr className="tr">
<td className="td" data-shared={`key_${opts.hash}`}>
<tr className="remix_ui_terminal_tr">
<td className="remix_ui_terminal_td" data-shared={`key_${opts.hash}`}>
val
</td>
<td
className="td"
className="remix_ui_terminal_td"
data-id={`txLoggerTableHash${opts.hash}`}
data-shared={`pair_${opts.hash}`}
>

255
libs/remix-ui/terminal/src/lib/remix-ui-terminal.css
Unescape View File

@ -5,194 +5,93 @@ element.style {
#terminalCliInput{
width: 95%;
background: transparent;
border: none;
font-weight: bold;
color: #a2a3b4;
border-top-style: hidden;
border-right-style: hidden;
border-left-style: hidden;
border-bottom-style: hidden;
}
#terminalCliInput:focus {
outline: none;
}
.border-primary {
border-color: #007aa6!important;
}
/* seleted option should reflect the theme color */
.selectedOptions {
background-color: #222336;
}
.panel {
.remix_ui_terminal_panel {
position : relative;
display : flex;
flex-direction : column;
font-size : 12px;
min-height : 3em;
}
.bar {
display : flex;
.remix_ui_terminal_bar {
z-index : 2;
}
.menu {
position : relative;
display : flex;
align-items : center;
width : 100%;
.remix_ui_terminal_menu {
max-height : 35px;
min-height : 35px;
}
.toggleTerminal {
.remix_ui_terminal_toggleTerminal {
cursor : pointer;
}
.toggleTerminal:hover {
.remix_ui_terminal_toggleTerminal:hover {
color : var(--secondary);
}
.terminal_container {
display : flex;
flex-direction : column;
height : 100%;
.remix_ui_terminal_container {
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 {
.remix_ui_terminal_journal {
margin-top : auto;
font-family : monospace;
overflow-y : scroll;
}
.block {
word-break : break-word;
.remix_ui_terminal_block {
white-space : pre-wrap;
font-family : monospace;
line-height : 2ch;
padding : 1ch;
margin-top : 2ch;
}
.block > pre {
.remix_ui_terminal_block > pre {
max-height : 200px;
}
.cli {
.remix_ui_terminal_cli {
line-height : 1.7em;
font-family : monospace;
padding : .4em;
color : var(--primary);
}
.prompt {
margin-right : 0.5em;
.remix_ui_terminal_prompt {
font-family : monospace;
font-weight : bold;
font-size : 14px;
color : lightgray;
}
.input {
word-break : break-word;
.remix_ui_terminal_input {
outline : none;
font-family : monospace;
}
.search {
display : flex;
align-items : center;
.remix_ui_terminal_search {
width : 330px;
padding-left : 20px;
height : 100%;
padding-top : 1px;
padding-bottom : 1px;
}
.filter {
.remix_ui_terminal_filter {
height : 80%;
white-space : nowrap;
overflow : hidden;
text-overflow : ellipsis;
}
.searchIcon {
.remix_ui_terminal_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.2em;
right : 0;
left : 0;
cursor : row-resize;
z-index : 999;
}
.dragbarDragging {
background-color: var(--primary);
border: 2px solid var(--primary);
}
.console {
.remix_ui_terminal_console {
cursor : pointer;
}
.dragbarHorizontal:hover {
background-color: var(--secondary);
border:2px solid var(--secondary);
}
.listenOnNetwork {
.remix_ui_terminal_listenOnNetwork {
min-height: auto;
}
.ghostbar {
position : absolute;
height : 6px;
opacity : 0.5;
cursor : row-resize;
z-index : 9999;
left : 0;
right : 0;
}
.divider-hitbox {
color: white;
cursor: row-resize;
align-self: stretch;
display: flex;
align-items: center;
padding: 0 1rem;
}
.ul {margin-left: 0; padding-left: 20px;}
.popup {
position : absolute;
text-align : left;
.remix_ui_terminal_popup {
width : 95%;
font-family : monospace;
background-color : var(--secondary);
@ -205,100 +104,74 @@ element.style {
overflow-y : scroll;
}
.autoCompleteItem {
.remix_ui_terminal_autoCompleteItem {
padding : 4px;
border-radius : 2px;
}
.popup a {
.remix_ui_terminal_popup a {
cursor : pointer;
}
.listHandlerShow {
display : block;
}
.listHandlerHide {
display : none;
}
.listHandlerButtonShow {
position : fixed;
width : 46%;
}
.pageNumberAlignment {
font-size : 10px;
float : right;
}
.modalContent {
position : absolute;
margin-left : 20%;
margin-bottom : 32px;
bottom : 0px;
padding : 0;
line-height : 18px;
font-size : 12px;
width : 40%;
box-shadow : 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 0.4s;
animation-name : animatetop;
animation-duration: 0.4s
.call {
font-size: 7px;
border-radius: 50%;
min-width: 20px;
min-height: 20px;
display: flex;
justify-content: center;
align-items: center;
color: var(--text-info);
text-transform: uppercase;
font-weight: bold;
}
@-webkit-keyframes animatetop {
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
.remix_ui_terminal_txItem {
color: var(--text-info);
margin-right: 5px;
float: left;
}
@keyframes animatetop {
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
.remix_ui_terminal_txItemTitle {
font-weight: bold;
}
/* tx logger css*/
.log {
.remix_ui_terminal_log {
display: flex;
cursor: pointer;
align-items: center;
cursor: pointer;
}
.log:hover {
.remix_ui_terminal_log:hover {
opacity: 0.8;
}
.txStatus {
.remix_ui_terminal_txStatus {
display: flex;
font-size: 20px;
margin-right: 20px;
float: left;
}
.succeeded {
.remix_ui_terminal_succeeded {
color: var(--success);
}
.failed {
.remix_ui_terminal_failed {
color: var(--danger);
}
.terminal_arrow {
.remix_ui_terminal_arrow {
color: var(--text-info);
font-size: 20px;
cursor: pointer;
display: flex;
margin-left: 10px;
}
.terminal_arrow:hover {
.remix_ui_terminal_arrow:hover {
color: var(--secondary);
}
.notavailable {
}
.call {
.remix_ui_terminal_call {
font-size: 7px;
border-radius: 50%;
min-width: 20px;
@ -310,23 +183,16 @@ element.style {
text-transform: uppercase;
font-weight: bold;
}
.txItem {
color: var(--text-info);
margin-right: 5px;
float: left;
}
.txItemTitle {
font-weight: bold;
}
.tx {
.remix_ui_terminal_tx {
color: var(--text-info);
font-weight: bold;
float: left;
margin-right: 10px;
}
.txTable,
.tr,
.td {
.remix_ui_terminal_tr,
.remix_ui_terminal_td {
border-collapse: collapse;
font-size: 10px;
color: var(--text-info);
@ -342,27 +208,27 @@ element.style {
align-self: center;
width: 85%;
}
.tr, .td {
.remix_ui_terminal_tr, .remix_ui_terminal_td {
padding: 4px;
vertical-align: baseline;
}
.td:first-child {
.remix_ui_terminal_td:first-child {
min-width: 30%;
width: 30%;
align-items: baseline;
font-weight: bold;
}
.tableTitle {
.remix_ui_terminal_tableTitle {
width: 25%;
}
.buttons {
.remix_ui_terminal_buttons {
display: flex;
margin-left: auto;
}
.debug {
.remix_ui_terminal_debug {
white-space: nowrap;
}
.debug:hover {
.remix_ui_terminal_debug:hover {
opacity: 0.8;
}
@ -424,4 +290,3 @@ element.style {
font-size: 14px;
padding: 18px;
}

111
libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
Unescape View File

@ -384,11 +384,20 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
}
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 position-absolute text-left alert alert-secondary'
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 d-none item ${autoCompletState.data._options[autoCompletState.activeSuggestion] === item ? 'border border-primary ' : ''}`}
onKeyDown={ handleSelect }
onClick={() => handleClickSelect(item)}
>
<div>
{getKeyOf(item)}
</div>
@ -413,17 +422,19 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
props.plugin.call('layout', 'minimize', props.plugin.profile.name, isOpen)
}
const classNameBlock = 'remix_ui_terminal_block px-4 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,19 +450,22 @@ 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 filter form-control"
className="remix_ui_terminal_filter border 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()
}
@ -462,24 +476,60 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
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 pt-3 pb-4 px-2 m-2' 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}
/> : (<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>
)
})
} else if (Array.isArray(x.message)) {
return x.message.map((msg, i) => {
@ -489,27 +539,38 @@ 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>
<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 bg-dark ml-3 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>

6
libs/remix-ui/terminal/src/lib/terminalWelcome.tsx
Unescape View File

@ -2,10 +2,10 @@ import React from 'react' // eslint-disable-line
const TerminalWelcomeMessage = ({ packageJson }) => {
return (
<div className="px-4 block" data-id="block_null">
<div className="remix_ui_terminal_block px-4 " data-id="block_null">
<div> - Welcome to Remix {packageJson} - </div><br />
<div>You can use this terminal to: </div>
<ul className='ul'>
<ul className='ml-0 mr-4'>
<li>Check transactions details and start debugging.</li>
<li>Execute JavaScript scripts:
<br />
@ -17,7 +17,7 @@ const TerminalWelcomeMessage = ({ packageJson }) => {
</li>
</ul>
<div>The following libraries are accessible:</div>
<ul className='ul'>
<ul className='ml-0 mr-4'>
<li><a target="_blank" href="https://web3js.readthedocs.io/en/1.0/">web3 version 1.5.2</a></li>
<li><a target="_blank" href="https://docs.ethers.io">ethers.js</a> </li>
<li>remix (run remix.help() for more info)</li>

Write Preview
Loading…
Cancel
Save