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. 253
      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 }) => { const CheckTxStatus = ({ tx, type }) => {
if (tx.status === '0x1' || tx.status === true) { 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') { 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) { } 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 { } 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') { if (blockchain.getProvider() === 'vm') {
return ( return (
<div> <div>
<span className='txLog_7Xiho'> <span>
<span className='tx'>[vm]</span> <span className='remix_ui_terminal_tx'>[vm]</span>
<div className='txItem'><span className='txItemTitle'>from:</span> {from}</div> <div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>from:</span> {from}</div>
<div className='txItem'><span className='txItemTitle'>to:</span> {to}</div> <div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>to:</span> {to}</div>
<div className='txItem'><span className='txItemTitle'>value:</span> {value} wei</div> <div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>value:</span> {value} wei</div>
<div className='txItem'><span className='txItemTitle'>data:</span> {input}</div> <div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>data:</span> {input}</div>
<div className='txItem'><span className='txItemTitle'>logs:</span> {logs}</div> <div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>logs:</span> {logs}</div>
<div className='txItem'><span className='txItemTitle'>hash:</span> {hash}</div> <div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>hash:</span> {hash}</div>
</span> </span>
</div>) </div>)
} else if (blockchain.getProvider() !== 'vm' && data.resolvedData) { } else if (blockchain.getProvider() !== 'vm' && data.resolvedData) {
return ( return (
<div> <div>
<span className='txLog_7Xiho'> <span>
<span className='tx'>[block:{block} txIndex:{i}]</span> <span className='remix_ui_terminal_tx'>[block:{block} txIndex:{i}]</span>
<div className='txItem'><span className='txItemTitle'>from:</span> {from}</div> <div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>from:</span> {from}</div>
<div className='txItem'><span className='txItemTitle'>to:</span> {to}</div> <div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>to:</span> {to}</div>
<div className='txItem'><span className='txItemTitle'>value:</span> {value} wei</div> <div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>value:</span> {value} wei</div>
<div className='txItem'><span className='txItemTitle'>data:</span> {input}</div> <div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>data:</span> {input}</div>
<div className='txItem'><span className='txItemTitle'>logs:</span> {logs}</div> <div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>logs:</span> {logs}</div>
<div className='txItem'><span className='txItemTitle'>hash:</span> {hash}</div> <div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>hash:</span> {hash}</div>
</span> </span>
</div>) </div>)
} else { } else {
hash = helper.shortenHexData(data.blockHash) hash = helper.shortenHexData(data.blockHash)
return ( return (
<div> <div>
<span className='txLog'> <span>
<span className='tx'>[block:{block} txIndex:{i}]</span> <span className='remix_ui_terminal_tx'>[block:{block} txIndex:{i}]</span>
<div className='txItem'><span className='txItemTitle'>from:</span> {from}</div> <div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>from:</span> {from}</div>
<div className='txItem'><span className='txItemTitle'>to:</span> {to}</div> <div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>to:</span> {to}</div>
<div className='txItem'><span className='txItemTitle'>value:</span> {value} wei</div> <div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>value:</span> {value} wei</div>
<div className='txItem'><span className='txItemTitle'>data:</span> {input}</div> <div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>data:</span> {input}</div>
<div className='txItem'><span className='txItemTitle'>logs:</span> {logs}</div> <div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>logs:</span> {logs}</div>
<div className='txItem'><span className='txItemTitle'>hash:</span> {hash}</div> <div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>hash:</span> {hash}</div>
</span> </span>
</div>) </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 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 helper from 'apps/remix-ide/src/lib/helper'
import CheckTxStatus from './ChechTxStatus' // eslint-disable-line import CheckTxStatus from './ChechTxStatus' // eslint-disable-line
import showTable from './Table' import showTable from './Table'
import { ModalDialog } from '@remix-ui/modal-dialog' // eslint-disable-line
const remixLib = require('@remix-project/remix-lib') const remixLib = require('@remix-project/remix-lib')
const typeConversion = remixLib.execution.typeConversion const typeConversion = remixLib.execution.typeConversion
@ -25,18 +24,18 @@ const RenderCall = ({ tx, resolvedData, logs, index, plugin, showTableHash, txDe
return ( return (
<span id={`tx${tx.hash}`} key={index}> <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} /> <CheckTxStatus tx={tx} type={txType} />
<span className="txLog"> <span>
<span className="tx">[call]</span> <span className="tx">[call]</span>
<div className='txItem'><span className='txItemTitle'>from:</span> {from}</div> <div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_txItemTitle'>from:</span> {from}</div>
<div className='txItem'><span className='txItemTitle'>to:</span> {to}</div> <div className='remix_ui_terminal_txItem'><span className='remix_ui_terminal_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'>data:</span> {input}</div>
</span> </span>
<div className='buttons'> <div className='remix_ui_terminal_buttons'>
<div className="debug btn btn-primary btn-sm" onClick={(event) => debug(event, tx)}>Debug</div> <div className="remix_ui_terminal_debug btn btn-primary btn-sm" onClick={(event) => debug(event, tx)}>Debug</div>
</div> </div>
<i className="terminal_arrow fas fa-angle-down"></i> <i className="remix_ui_terminal_terminal_arrow fas fa-angle-down"></i>
</div> </div>
{showTableHash.includes(tx.hash) ? showTable({ {showTableHash.includes(tx.hash) ? showTable({
hash: tx.hash, 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 } const options = { from, to, tx, logs }
return ( return (
<span id={`tx${tx.hash}`} key={index}> <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} /> <CheckTxStatus tx={receipt} type={txType} />
<Context opts = { options } blockchain={plugin.blockchain} /> <Context opts = { options } blockchain={plugin.blockchain} />
<div className='buttons'> <div className='remix_ui_terminal_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_debug btn btn-primary btn-sm'
data-shared='txLoggerDebugButton'
data-id={`txLoggerDebugButton${tx.hash}`}
onClick={(event) => debug(event, tx)}
>Debug</div>
</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> </div>
{showTableHash.includes(tx.hash) ? showTable({ {showTableHash.includes(tx.hash) ? showTable({
hash: tx.hash, 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 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 CheckTxStatus from './ChechTxStatus' // eslint-disable-line
import Context from './Context' // eslint-disable-line import Context from './Context' // eslint-disable-line
import showTable from './Table' import showTable from './Table'
@ -20,13 +19,17 @@ const RenderUnKnownTransactions = ({ tx, receipt, index, plugin, showTableHash,
const options = { from, to, tx } const options = { from, to, tx }
return ( return (
<span id={`tx${tx.hash}`} key={index}> <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} /> <CheckTxStatus tx={receipt || tx} type={txType} />
<Context opts = { options } blockchain={plugin.blockchain} /> <Context opts = { options } blockchain={plugin.blockchain} />
<div className='buttons'> <div className='remix_ui_terminal_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_debug btn btn-primary btn-sm'
data-shared='txLoggerDebugButton'
data-id={`txLoggerDebugButton${tx.hash}`}
onClick={(event) => debug(event, tx)}
>Debug</div>
</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> </div>
{showTableHash.includes(tx.hash) ? showTable({ {showTableHash.includes(tx.hash) ? showTable({
hash: tx.hash, 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 const val = opts.val != null ? typeConversion.toInt(opts.val) : 0
return ( return (
<table <table
className={`txTable ${showTableHash.includes(opts.hash) ? 'active' : ''}`} className={`remix_ui_terminal_txTable ${showTableHash.includes(opts.hash) ? 'active' : ''}`}
id="txTable" id="txTable"
data-id={`txLoggerTable${opts.hash}`} data-id={`txLoggerTable${opts.hash}`}
> >
<tbody> <tbody>
{opts.status !== undefined ? ( {opts.status !== undefined ? (
<tr className="tr"> <tr className="remix_ui_terminal_tr">
<td className="td" data-shared={`key_${opts.hash}`}> <td className="remix_ui_terminal_td" data-shared={`key_${opts.hash}`}>
status status
</td> </td>
<td <td
className="td" className="remix_ui_terminal_td"
data-id={`txLoggerTableStatus${opts.hash}`} data-id={`txLoggerTableStatus${opts.hash}`}
data-shared={`pair_${opts.hash}`} data-shared={`pair_${opts.hash}`}
>{`${opts.status} ${msg}`}</td> >{`${opts.status} ${msg}`}</td>
</tr> </tr>
) : null} ) : null}
{opts.hash && !opts.isCall ? ( {opts.hash && !opts.isCall ? (
<tr className="tr"> <tr className="remix_ui_terminal_tr">
<td className="td" data-shared={`key_${opts.hash}`}> <td className="remix_ui_terminal_td" data-shared={`key_${opts.hash}`}>
transaction hash transaction hash
</td> </td>
<td <td
className="td" className="remix_ui_terminal_td"
data-id={`txLoggerTableHash${opts.hash}`} data-id={`txLoggerTableHash${opts.hash}`}
data-shared={`pair_${opts.hash}`} data-shared={`pair_${opts.hash}`}
> >
@ -70,12 +70,12 @@ const showTable = (opts, showTableHash) => {
</tr> </tr>
) : null} ) : null}
{opts.contractAddress ? ( {opts.contractAddress ? (
<tr className="tr"> <tr className="remix_ui_terminal_tr">
<td className="td" data-shared={`key_${opts.hash}`}> <td className="remix_ui_terminal_td" data-shared={`key_${opts.hash}`}>
contract address contract address
</td> </td>
<td <td
className="td" className="remix_ui_terminal_td"
data-id={`txLoggerTableContractAddress${opts.hash}`} data-id={`txLoggerTableContractAddress${opts.hash}`}
data-shared={`pair_${opts.hash}`} data-shared={`pair_${opts.hash}`}
> >
@ -85,12 +85,12 @@ const showTable = (opts, showTableHash) => {
</tr> </tr>
) : null} ) : null}
{opts.from ? ( {opts.from ? (
<tr className="tr"> <tr className="remix_ui_terminal_tr">
<td className="td tableTitle" data-shared={`key_${opts.hash}`}> <td className="td tableTitle" data-shared={`key_${opts.hash}`}>
from from
</td> </td>
<td <td
className="td" className="remix_ui_terminal_td"
data-id={`txLoggerTableFrom${opts.hash}`} data-id={`txLoggerTableFrom${opts.hash}`}
data-shared={`pair_${opts.hash}`} data-shared={`pair_${opts.hash}`}
> >
@ -100,12 +100,12 @@ const showTable = (opts, showTableHash) => {
</tr> </tr>
) : null} ) : null}
{opts.to ? ( {opts.to ? (
<tr className="tr"> <tr className="remix_ui_terminal_tr">
<td className="td" data-shared={`key_${opts.hash}`}> <td className="remix_ui_terminal_td" data-shared={`key_${opts.hash}`}>
to to
</td> </td>
<td <td
className="td" className="remix_ui_terminal_td"
data-id={`txLoggerTableTo${opts.hash}`} data-id={`txLoggerTableTo${opts.hash}`}
data-shared={`pair_${opts.hash}`} data-shared={`pair_${opts.hash}`}
> >
@ -115,12 +115,12 @@ const showTable = (opts, showTableHash) => {
</tr> </tr>
) : null} ) : null}
{opts.gas ? ( {opts.gas ? (
<tr className="tr"> <tr className="remix_ui_terminal_tr">
<td className="td" data-shared={`key_${opts.hash}`}> <td className="remix_ui_terminal_td" data-shared={`key_${opts.hash}`}>
gas gas
</td> </td>
<td <td
className="td" className="remix_ui_terminal_td"
data-id={`txLoggerTableGas${opts.hash}`} data-id={`txLoggerTableGas${opts.hash}`}
data-shared={`pair_${opts.hash}`} data-shared={`pair_${opts.hash}`}
> >
@ -130,12 +130,12 @@ const showTable = (opts, showTableHash) => {
</tr> </tr>
) : null} ) : null}
{opts.transactionCost ? ( {opts.transactionCost ? (
<tr className="tr"> <tr className="remix_ui_terminal_tr">
<td className="td" data-shared={`key_${opts.hash}`}> <td className="remix_ui_terminal_td" data-shared={`key_${opts.hash}`}>
transaction cost transaction cost
</td> </td>
<td <td
className="td" className="remix_ui_terminal_td"
data-id={`txLoggerTableTransactionCost${opts.hash}`} data-id={`txLoggerTableTransactionCost${opts.hash}`}
data-shared={`pair_${opts.hash}`} data-shared={`pair_${opts.hash}`}
> >
@ -145,12 +145,12 @@ const showTable = (opts, showTableHash) => {
</tr> </tr>
) : null} ) : null}
{opts.executionCost ? ( {opts.executionCost ? (
<tr className="tr"> <tr className="remix_ui_terminal_tr">
<td className="td" data-shared={`key_${opts.hash}`}> <td className="remix_ui_terminal_td" data-shared={`key_${opts.hash}`}>
execution cost execution cost
</td> </td>
<td <td
className="td" className="remix_ui_terminal_td"
data-id={`txLoggerTableExecutionHash${opts.hash}`} data-id={`txLoggerTableExecutionHash${opts.hash}`}
data-shared={`pair_${opts.hash}`} data-shared={`pair_${opts.hash}`}
> >
@ -160,12 +160,12 @@ const showTable = (opts, showTableHash) => {
</tr> </tr>
) : null} ) : null}
{opts.hash ? ( {opts.hash ? (
<tr className="tr"> <tr className="remix_ui_terminal_tr">
<td className="td" data-shared={`key_${opts.hash}`}> <td className="remix_ui_terminal_td" data-shared={`key_${opts.hash}`}>
hash hash
</td> </td>
<td <td
className="td" className="remix_ui_terminal_td"
data-id={`txLoggerTableHash${opts.hash}`} data-id={`txLoggerTableHash${opts.hash}`}
data-shared={`pair_${opts.hash}`} data-shared={`pair_${opts.hash}`}
> >
@ -175,12 +175,12 @@ const showTable = (opts, showTableHash) => {
</tr> </tr>
) : null} ) : null}
{opts.input ? ( {opts.input ? (
<tr className="tr"> <tr className="remix_ui_terminal_tr">
<td className="td" data-shared={`key_${opts.hash}`}> <td className="remix_ui_terminal_td" data-shared={`key_${opts.hash}`}>
input input
</td> </td>
<td <td
className="td" className="remix_ui_terminal_td"
data-id={`txLoggerTableHash${opts.hash}`} data-id={`txLoggerTableHash${opts.hash}`}
data-shared={`pair_${opts.hash}`} data-shared={`pair_${opts.hash}`}
> >
@ -190,12 +190,12 @@ const showTable = (opts, showTableHash) => {
</tr> </tr>
) : null} ) : null}
{opts['decoded input'] ? ( {opts['decoded input'] ? (
<tr className="tr"> <tr className="remix_ui_terminal_tr">
<td className="td" data-shared={`key_${opts.hash}`}> <td className="remix_ui_terminal_td" data-shared={`key_${opts.hash}`}>
decoded input decoded input
</td> </td>
<td <td
className="td" className="remix_ui_terminal_td"
data-id={`txLoggerTableHash${opts.hash}`} data-id={`txLoggerTableHash${opts.hash}`}
data-shared={`pair_${opts.hash}`} data-shared={`pair_${opts.hash}`}
> >
@ -205,12 +205,12 @@ const showTable = (opts, showTableHash) => {
</tr> </tr>
) : null} ) : null}
{opts['decoded output'] ? ( {opts['decoded output'] ? (
<tr className="tr"> <tr className="remix_ui_terminal_tr">
<td className="td" data-shared={`key_${opts.hash}`}> <td className="remix_ui_terminal_td" data-shared={`key_${opts.hash}`}>
decoded output decoded output
</td> </td>
<td <td
className="td" className="remix_ui_terminal_td"
data-id={`txLoggerTableHash${opts.hash}`} data-id={`txLoggerTableHash${opts.hash}`}
data-shared={`pair_${opts.hash}`} data-shared={`pair_${opts.hash}`}
> >
@ -220,12 +220,12 @@ const showTable = (opts, showTableHash) => {
</tr> </tr>
) : null} ) : null}
{opts.logs ? ( {opts.logs ? (
<tr className="tr"> <tr className="remix_ui_terminal_tr">
<td className="td" data-shared={`key_${opts.hash}`}> <td className="remix_ui_terminal_td" data-shared={`key_${opts.hash}`}>
logs logs
</td> </td>
<td <td
className="td" className="remix_ui_terminal_td"
data-id={`txLoggerTableHash${opts.hash}`} data-id={`txLoggerTableHash${opts.hash}`}
data-shared={`pair_${opts.hash}`} data-shared={`pair_${opts.hash}`}
> >
@ -238,12 +238,12 @@ const showTable = (opts, showTableHash) => {
</tr> </tr>
) : null} ) : null}
{opts.val ? ( {opts.val ? (
<tr className="tr"> <tr className="remix_ui_terminal_tr">
<td className="td" data-shared={`key_${opts.hash}`}> <td className="remix_ui_terminal_td" data-shared={`key_${opts.hash}`}>
val val
</td> </td>
<td <td
className="td" className="remix_ui_terminal_td"
data-id={`txLoggerTableHash${opts.hash}`} data-id={`txLoggerTableHash${opts.hash}`}
data-shared={`pair_${opts.hash}`} data-shared={`pair_${opts.hash}`}
> >

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

@ -5,194 +5,93 @@ element.style {
#terminalCliInput{ #terminalCliInput{
width: 95%; width: 95%;
background: transparent; 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 { #terminalCliInput:focus {
outline: none; outline: none;
} }
.border-primary { .remix_ui_terminal_panel {
border-color: #007aa6!important;
}
/* seleted option should reflect the theme color */
.selectedOptions {
background-color: #222336;
}
.panel {
position : relative; position : relative;
display : flex; display : flex;
flex-direction : column; flex-direction : column;
font-size : 12px; font-size : 12px;
min-height : 3em; min-height : 3em;
} }
.bar { .remix_ui_terminal_bar {
display : flex;
z-index : 2; z-index : 2;
} }
.menu { .remix_ui_terminal_menu {
position : relative;
display : flex;
align-items : center;
width : 100%;
max-height : 35px; max-height : 35px;
min-height : 35px; min-height : 35px;
} }
.toggleTerminal { .remix_ui_terminal_toggleTerminal {
cursor : pointer; cursor : pointer;
} }
.toggleTerminal:hover { .remix_ui_terminal_toggleTerminal:hover {
color : var(--secondary); color : var(--secondary);
} }
.terminal_container { .remix_ui_terminal_container {
display : flex;
flex-direction : column;
height : 100%;
overflow-y : auto; overflow-y : auto;
font-family : monospace; font-family : monospace;
margin : 0px;
background-repeat : no-repeat; background-repeat : no-repeat;
background-position : center 15%; background-position : center 15%;
background-size : auto calc(75% - 1.7em); background-size : auto calc(75% - 1.7em);
} }
.terminal {
position : relative; .remix_ui_terminal_journal {
display : flex;
flex-direction : column;
height : 100%;
}
.journal {
margin-top : auto; margin-top : auto;
font-family : monospace; font-family : monospace;
overflow-y : scroll;
} }
.block { .remix_ui_terminal_block {
word-break : break-word;
white-space : pre-wrap; white-space : pre-wrap;
font-family : monospace;
line-height : 2ch; line-height : 2ch;
padding : 1ch;
margin-top : 2ch;
} }
.block > pre { .remix_ui_terminal_block > pre {
max-height : 200px; max-height : 200px;
} }
.cli { .remix_ui_terminal_cli {
line-height : 1.7em; line-height : 1.7em;
font-family : monospace; font-family : monospace;
padding : .4em; padding : .4em;
color : var(--primary); color : var(--primary);
} }
.prompt { .remix_ui_terminal_prompt {
margin-right : 0.5em;
font-family : monospace; font-family : monospace;
font-weight : bold;
font-size : 14px;
color : lightgray;
} }
.input { .remix_ui_terminal_input {
word-break : break-word;
outline : none; outline : none;
font-family : monospace; font-family : monospace;
} }
.search { .remix_ui_terminal_search {
display : flex;
align-items : center;
width : 330px; width : 330px;
padding-left : 20px; padding-left : 20px;
height : 100%;
padding-top : 1px; padding-top : 1px;
padding-bottom : 1px; padding-bottom : 1px;
} }
.filter { .remix_ui_terminal_filter {
height : 80%; height : 80%;
white-space : nowrap; white-space : nowrap;
overflow : hidden; overflow : hidden;
text-overflow : ellipsis; text-overflow : ellipsis;
} }
.searchIcon { .remix_ui_terminal_searchIcon {
width : 25px; width : 25px;
border-top-left-radius : 3px; border-top-left-radius : 3px;
border-bottom-left-radius : 3px; border-bottom-left-radius : 3px;
display : flex;
align-items : center;
justify-content : center;
margin-right : 5px; 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; cursor : pointer;
} }
.dragbarHorizontal:hover { .remix_ui_terminal_listenOnNetwork {
background-color: var(--secondary);
border:2px solid var(--secondary);
}
.listenOnNetwork {
min-height: auto; 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;} .remix_ui_terminal_popup {
.popup {
position : absolute;
text-align : left;
width : 95%; width : 95%;
font-family : monospace; font-family : monospace;
background-color : var(--secondary); background-color : var(--secondary);
@ -205,100 +104,74 @@ element.style {
overflow-y : scroll; overflow-y : scroll;
} }
.autoCompleteItem { .remix_ui_terminal_autoCompleteItem {
padding : 4px; padding : 4px;
border-radius : 2px; border-radius : 2px;
} }
.popup a { .remix_ui_terminal_popup a {
cursor : pointer; cursor : pointer;
} }
.listHandlerShow { .call {
display : block; font-size: 7px;
} border-radius: 50%;
min-width: 20px;
.listHandlerHide { min-height: 20px;
display : none; display: flex;
} justify-content: center;
align-items: center;
.listHandlerButtonShow { color: var(--text-info);
position : fixed; text-transform: uppercase;
width : 46%; font-weight: bold;
}
.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
} }
@-webkit-keyframes animatetop { .remix_ui_terminal_txItem {
from {bottom: -300px; opacity: 0} color: var(--text-info);
to {bottom: 0; opacity: 1} margin-right: 5px;
float: left;
} }
@keyframes animatetop { .remix_ui_terminal_txItemTitle {
from {bottom: -300px; opacity: 0} font-weight: bold;
to {bottom: 0; opacity: 1}
} }
/* tx logger css*/ /* tx logger css*/
.log { .remix_ui_terminal_log {
display: flex; display: flex;
cursor: pointer; cursor: pointer;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
} }
.log:hover { .remix_ui_terminal_log:hover {
opacity: 0.8; opacity: 0.8;
} }
.txStatus { .remix_ui_terminal_txStatus {
display: flex; display: flex;
font-size: 20px; font-size: 20px;
margin-right: 20px; margin-right: 20px;
float: left; float: left;
} }
.succeeded { .remix_ui_terminal_succeeded {
color: var(--success); color: var(--success);
} }
.failed { .remix_ui_terminal_failed {
color: var(--danger); color: var(--danger);
} }
.terminal_arrow { .remix_ui_terminal_arrow {
color: var(--text-info); color: var(--text-info);
font-size: 20px; font-size: 20px;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
margin-left: 10px; margin-left: 10px;
} }
.terminal_arrow:hover { .remix_ui_terminal_arrow:hover {
color: var(--secondary); color: var(--secondary);
} }
.notavailable { .remix_ui_terminal_call {
}
.call {
font-size: 7px; font-size: 7px;
border-radius: 50%; border-radius: 50%;
min-width: 20px; min-width: 20px;
@ -310,23 +183,16 @@ element.style {
text-transform: uppercase; text-transform: uppercase;
font-weight: bold; font-weight: bold;
} }
.txItem {
color: var(--text-info); .remix_ui_terminal_tx {
margin-right: 5px;
float: left;
}
.txItemTitle {
font-weight: bold;
}
.tx {
color: var(--text-info); color: var(--text-info);
font-weight: bold; font-weight: bold;
float: left; float: left;
margin-right: 10px; margin-right: 10px;
} }
.txTable,
.tr, .remix_ui_terminal_tr,
.td { .remix_ui_terminal_td {
border-collapse: collapse; border-collapse: collapse;
font-size: 10px; font-size: 10px;
color: var(--text-info); color: var(--text-info);
@ -342,27 +208,27 @@ element.style {
align-self: center; align-self: center;
width: 85%; width: 85%;
} }
.tr, .td { .remix_ui_terminal_tr, .remix_ui_terminal_td {
padding: 4px; padding: 4px;
vertical-align: baseline; vertical-align: baseline;
} }
.td:first-child { .remix_ui_terminal_td:first-child {
min-width: 30%; min-width: 30%;
width: 30%; width: 30%;
align-items: baseline; align-items: baseline;
font-weight: bold; font-weight: bold;
} }
.tableTitle { .remix_ui_terminal_tableTitle {
width: 25%; width: 25%;
} }
.buttons { .remix_ui_terminal_buttons {
display: flex; display: flex;
margin-left: auto; margin-left: auto;
} }
.debug { .remix_ui_terminal_debug {
white-space: nowrap; white-space: nowrap;
} }
.debug:hover { .remix_ui_terminal_debug:hover {
opacity: 0.8; opacity: 0.8;
} }
@ -424,4 +290,3 @@ element.style {
font-size: 14px; font-size: 14px;
padding: 18px; 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 = () => ( 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> <div>
{autoCompletState.data._options.map((item, index) => { {autoCompletState.data._options.map((item, index) => {
return ( 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> <div>
{getKeyOf(item)} {getKeyOf(item)}
</div> </div>
@ -413,17 +422,19 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
props.plugin.call('layout', 'minimize', props.plugin.profile.name, isOpen) props.plugin.call('layout', 'minimize', props.plugin.profile.name, isOpen)
} }
const classNameBlock = 'remix_ui_terminal_block px-4 text-break'
return ( return (
<div style={{ flexGrow: 1 }} className='panel' ref={panelRef}> <div style={{ flexGrow: 1 }} className='remix_ui_terminal_panel' ref={panelRef}>
<div className="bar"> <div className="remix_ui_terminal_bar d-flex">
<div className="menu border-top border-dark bg-light" ref={terminalMenu} data-id="terminalToggleMenu"> <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 toggleTerminal fas ${isOpen ? 'fa-angle-double-down' : 'fa-angle-double-up'}`} data-id="terminalToggleIcon" onClick={handleToggleTerminal}></i> <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 console" id="clearConsole" data-id="terminalClearConsole" onClick={handleClearConsole} > <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 className="fas fa-ban" aria-hidden="true" title="Clear console"
></i> ></i>
</div> </div>
<div className="mx-2" title='Pending Transactions'>0</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 <input
className="custom-control-input" className="custom-control-input"
id="listenNetworkCheck" id="listenNetworkCheck"
@ -439,19 +450,22 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
listen on network listen on network
</label> </label>
</div> </div>
<div className="search"> <div className="remix_ui_terminal_search d-flex align-items-center h-100">
<i className="fas fa-search searchIcon bg-light" aria-hidden="true"></i> <i
className="remix_ui_terminal_searchIcon d-flex align-items-center justify-content-center fas fa-search bg-light"
aria-hidden="true">
</i>
<input <input
onChange={(event) => setSearchInput(event.target.value.trim()) } onChange={(event) => setSearchInput(event.target.value.trim()) }
type="text" type="text"
className="border filter form-control" className="remix_ui_terminal_filter border form-control"
id="searchInput" id="searchInput"
placeholder="Search with transaction hash or address" placeholder="Search with transaction hash or address"
data-id="terminalInputSearch" /> data-id="terminalInputSearch" />
</div> </div>
</div> </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() handleAutoComplete()
} }
@ -462,24 +476,60 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
opacity: '0.1', opacity: '0.1',
zIndex: -1 zIndex: -1
}}></div> }}></div>
<div className="terminal"> <div className="position-relative d-flex flex-column-reverse h-100">
<div id='journal' className='journal' data-id='terminalJournal'> <div id='journal' className='remix_ui_terminal_journal pt-3 pb-4 px-2 m-2' data-id='terminalJournal'>
{!clearConsole && <TerminalWelcomeMessage packageJson={version}/>} {!clearConsole && <TerminalWelcomeMessage packageJson={version}/>}
{newstate.journalBlocks && newstate.journalBlocks.map((x, index) => { {newstate.journalBlocks && newstate.journalBlocks.map((x, index) => {
if (x.name === EMPTY_BLOCK) { if (x.name === EMPTY_BLOCK) {
return ( return (
<div className="px-4 block" data-id='block' key={index}> <div className={classNameBlock} data-id='block' key={index}>
<span className='txLog'> <span className='remix_ui_terminal_tx'>
<span className='tx'><div className='txItem'>[<span className='txItemTitle'>block:{x.message} - </span> 0 {'transactions'} ] </div></span></span> <div className='remix_ui_terminal_txItem'>[<span className='remix_ui_terminal_txItemTitle'>block:{x.message} - </span> 0 {'transactions'} ]
</div>
</span>
</div> </div>
) )
} else if (x.name === UNKNOWN_TRANSACTION) { } 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 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) { } else if (x.name === KNOWN_TRANSACTION) {
return x.message.map((trans) => { 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)) { } else if (Array.isArray(x.message)) {
return x.message.map((msg, i) => { return x.message.map((msg, i) => {
@ -489,27 +539,38 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
) )
} else if (typeof msg === 'object') { } else if (typeof msg === 'object') {
return ( 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 { } else {
return ( 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 { } else {
if (typeof x.message !== 'function') { if (typeof x.message !== 'function') {
return ( 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 ref={messagesEndRef} />
</div> </div>
<div id="terminalCli" data-id="terminalCli" className="cli" onClick={focusinput}> <div id="terminalCli" data-id="terminalCli" className="remix_ui_terminal_cli position-absolute w-100" onClick={focusinput}>
<span className="prompt">{'>'}</span> <span className="remix_ui_terminal_prompt blink mx-1 font-weight-bold text-dark">{'>'}</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> <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> </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 }) => { const TerminalWelcomeMessage = ({ packageJson }) => {
return ( 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> - Welcome to Remix {packageJson} - </div><br />
<div>You can use this terminal to: </div> <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>Check transactions details and start debugging.</li>
<li>Execute JavaScript scripts: <li>Execute JavaScript scripts:
<br /> <br />
@ -17,7 +17,7 @@ const TerminalWelcomeMessage = ({ packageJson }) => {
</li> </li>
</ul> </ul>
<div>The following libraries are accessible:</div> <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://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><a target="_blank" href="https://docs.ethers.io">ethers.js</a> </li>
<li>remix (run remix.help() for more info)</li> <li>remix (run remix.help() for more info)</li>

Write Preview
Loading…
Cancel
Save