| + | |
| status | {`${opts.status} ${msg}`} |
| + | |
| transaction hash | @@ -70,12 +70,12 @@ const showTable = (opts, showTableHash) => { |
| + | |
| contract address | @@ -85,12 +85,12 @@ const showTable = (opts, showTableHash) => { |
| from | @@ -100,12 +100,12 @@ const showTable = (opts, showTableHash) => { |
| + | |
| to | @@ -115,12 +115,12 @@ const showTable = (opts, showTableHash) => { |
| + | |
| gas | @@ -130,12 +130,12 @@ const showTable = (opts, showTableHash) => { |
| + | |
| transaction cost | @@ -145,12 +145,12 @@ const showTable = (opts, showTableHash) => { |
| + | |
| execution cost | @@ -160,12 +160,12 @@ const showTable = (opts, showTableHash) => { |
| + | |
| hash | @@ -175,12 +175,12 @@ const showTable = (opts, showTableHash) => { |
| + | |
| input | @@ -190,12 +190,12 @@ const showTable = (opts, showTableHash) => { |
| + | |
| decoded input | @@ -205,12 +205,12 @@ const showTable = (opts, showTableHash) => { |
| + | |
| decoded output | @@ -220,12 +220,12 @@ const showTable = (opts, showTableHash) => { |
| + | |
| logs | @@ -238,12 +238,12 @@ const showTable = (opts, showTableHash) => { |
| + | |
| val |
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 02a4b1f9fa..0ffe440548 100644
--- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.css
+++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.css
@@ -3,425 +3,228 @@ element.style {
height: 323px !important;
}
#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;
+ width: 97%;
+ font-weight: 800;
+ background: var(--body-bg)
}
#terminalCliInput:focus {
outline: none;
}
-.border-primary {
- border-color: #007aa6!important;
+.remix_ui_terminal_panel {
+ position : relative;
+ display : flex;
+ flex-direction : column;
+ font-size : 12px;
+ min-height : 3em;
}
-
-/* seleted option should reflect the theme color */
-.selectedOptions {
- background-color: #222336;
+.remix_ui_terminal_bar {
+ z-index : 2;
+}
+.remix_ui_terminal_menu {
+ max-height : 35px;
+ min-height : 35px;
+}
+.remix_ui_terminal_toggleTerminal {
+ cursor : pointer;
+}
+.remix_ui_terminal_toggleTerminal:hover {
+ color : var(--secondary);
+}
+.remix_ui_terminal_container {
+ overflow-y : auto;
+ font-family : monospace;
+ background-repeat : no-repeat;
+ background-position : center 15%;
+ background-size : auto calc(75% - 1.7em);
}
-.panel {
- position : relative;
- display : flex;
- flex-direction : column;
- font-size : 12px;
- min-height : 3em;
- }
- .bar {
- display : flex;
- z-index : 2;
- }
- .menu {
- position : relative;
- display : flex;
- align-items : center;
- width : 100%;
- max-height : 35px;
- min-height : 35px;
- }
- .toggleTerminal {
- cursor : pointer;
- }
- .toggleTerminal:hover {
- color : var(--secondary);
- }
- .terminal_container {
- display : flex;
- flex-direction : column;
- height : 100%;
- 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 {
- margin-top : auto;
- font-family : monospace;
- }
- .block {
- word-break : break-word;
- white-space : pre-wrap;
- line-height : 2ch;
- padding : 1ch;
- margin-top : 2ch;
- }
- .block > pre {
- max-height : 200px;
- }
- .cli {
- line-height : 1.7em;
- font-family : monospace;
- padding : .4em;
- color : var(--primary);
- }
- .prompt {
- margin-right : 0.5em;
- font-family : monospace;
- font-weight : bold;
- font-size : 14px;
- color : lightgray;
- }
- .input {
- word-break : break-word;
- outline : none;
- font-family : monospace;
- }
- .search {
- display : flex;
- align-items : center;
- width : 330px;
- padding-left : 20px;
- height : 100%;
- padding-top : 1px;
- padding-bottom : 1px;
- }
- .filter {
- height : 80%;
- white-space : nowrap;
- overflow : hidden;
- text-overflow : ellipsis;
- }
- .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 {
- cursor : pointer;
- }
-
- .dragbarHorizontal:hover {
- background-color: var(--secondary);
- border:2px solid var(--secondary);
- }
- .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;
- width : 95%;
- font-family : monospace;
- background-color : var(--secondary);
- overflow : auto;
- padding-bottom : 13px;
- z-index : 80;
- bottom : 1em;
- border-width : 4px;
- left : 2em;
- overflow-y : scroll;
- }
-
- .autoCompleteItem {
- padding : 4px;
- border-radius : 2px;
- }
-
- .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
- }
+.remix_ui_terminal_journal {
+ margin-top : auto;
+ margin-bottom : 2rem;
+ font-family : monospace;
+ overflow-y : scroll;
+}
+.remix_ui_terminal_block {
+ white-space : pre-wrap;
+ font-family : monospace;
+ line-height : 2ch;
+}
+.remix_ui_terminal_block > pre {
+ max-height : 200px;
+}
+.remix_ui_terminal_cli {
+ white-space : nowrap;
+ line-height : 1.7em;
+ font-family : monospace;
+ padding : .4em;
+ color : var(--primary);
+}
+.remix_ui_terminal_prompt {
+ font-family : monospace;
+}
+.remix_ui_terminal_input {
+ outline : none;
+ font-family : monospace;
+}
+.remix_ui_terminal_search {
+ width : 330px;
+ padding-left : 20px;
+ padding-top : 1px;
+ padding-bottom : 1px;
+}
+.remix_ui_terminal_filter {
+ height : 80%;
+ white-space : nowrap;
+ overflow : hidden;
+ text-overflow : ellipsis;
+}
+.remix_ui_terminal_searchIcon {
+ width : 25px;
+ border-top-left-radius : 3px;
+ border-bottom-left-radius : 3px;
+ margin-right : 5px;
+}
- @-webkit-keyframes animatetop {
- from {bottom: -300px; opacity: 0}
- to {bottom: 0; opacity: 1}
- }
+.remix_ui_terminal_console {
+ cursor : pointer;
+}
- @keyframes animatetop {
- from {bottom: -300px; opacity: 0}
- to {bottom: 0; opacity: 1}
- }
+.remix_ui_terminal_listenOnNetwork {
+ min-height: auto;
+}
+.remix_ui_terminal_popup {
+ width : 95%;
+ font-family : monospace;
+ background-color : var(--secondary);
+ overflow : auto;
+ z-index : 80;
+ bottom : 2.2em;
+ border-width : 4px;
+ overflow-y : scroll;
+ box-shadow : 0px 0px 13px -8px;
+}
+.remix_ui_terminal_autoCompleteItem {
+ padding : 4px;
+ border-radius : 2px;
+}
+.remix_ui_terminal_popup a {
+ cursor : pointer;
+}
- /* tx logger css*/
+.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;
+}
- .log {
- display: flex;
- cursor: pointer;
- align-items: center;
- cursor: pointer;
- }
- .log:hover {
- opacity: 0.8;
- }
+.remix_ui_terminal_txItem {
+ color: var(--text-info);
+ margin-right: 5px;
+ float: left;
+}
- .txStatus {
- display: flex;
- font-size: 20px;
- margin-right: 20px;
- float: left;
- }
- .succeeded {
- color: var(--success);
- }
- .failed {
- color: var(--danger);
- }
+.remix_ui_terminal_txItemTitle {
+ font-weight: bold;
+}
- .terminal_arrow {
- color: var(--text-info);
- font-size: 20px;
- cursor: pointer;
- display: flex;
- margin-left: 10px;
- }
- .terminal_arrow:hover {
- color: var(--secondary);
- }
- .notavailable {
- }
- .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;
- }
- .txItem {
- color: var(--text-info);
- margin-right: 5px;
- float: left;
- }
- .txItemTitle {
- font-weight: bold;
- }
- .tx {
- color: var(--text-info);
- font-weight: bold;
- float: left;
- margin-right: 10px;
- }
- .txTable,
- .tr,
- .td {
- border-collapse: collapse;
- 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%;
- margin-bottom: 5%;
- align-self: center;
- width: 85%;
- }
- .tr, .td {
- padding: 4px;
- vertical-align: baseline;
- }
- .td:first-child {
- min-width: 30%;
- width: 30%;
- align-items: baseline;
- font-weight: bold;
- }
- .tableTitle {
- width: 25%;
- }
- .buttons {
- display: flex;
- margin-left: auto;
- }
- .debug {
- white-space: nowrap;
- }
- .debug:hover {
- opacity: 0.8;
- }
+/* tx logger css*/
+.remix_ui_terminal_log {
+ display: flex;
+ cursor: pointer;
+ align-items: center;
+ cursor: pointer;
+ padding-top: 0.5rem;
+}
+.remix_ui_terminal_log:hover {
+ opacity: 0.8;
+}
- /* Style the accordion section */
-.accordion__section {
+.remix_ui_terminal_txStatus {
display: flex;
- flex-direction: column;
+ font-size: 20px;
+ margin-right: 20px;
+ float: left;
+}
+.remix_ui_terminal_succeeded {
+ color: var(--success);
+}
+.remix_ui_terminal_failed {
+ color: var(--danger);
}
-/* Style the buttons that are used to open and close the accordion panel */
-.accordion {
- background-color: #eee;
- color: #444;
+.remix_ui_terminal_arrow {
+ color: var(--text-info);
+ font-size: 20px;
cursor: pointer;
- padding: 18px;
display: flex;
+ margin-left: 10px;
+}
+.remix_ui_terminal_arrow:hover {
+ color: var(--secondary);
+}
+.remix_ui_terminal_call {
+ font-size: 7px;
+ border-radius: 50%;
+ min-width: 20px;
+ min-height: 20px;
+ display: flex;
+ justify-content: center;
align-items: center;
- border: none;
- outline: none;
- transition: background-color 0.6s ease;
+ color: var(--text-info);
+ text-transform: uppercase;
+ font-weight: bold;
}
-/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
-/* .accordion:hover,
-.active {
- background-color: #ccc;
-} */
-
-/* Style the accordion content title */
-.accordion__title {
- font-family: "Open Sans", sans-serif;
- font-weight: 600;
- font-size: 14px;
+.remix_ui_terminal_tx {
+ color: var(--text-info);
+ font-weight: bold;
+ float: left;
+ margin-right: 10px;
}
-/* Style the accordion chevron icon */
-.accordion__icon {
- margin-left: auto;
- transition: transform 0.6s ease;
+.remix_ui_terminal_tr,
+.remix_ui_terminal_td {
+ border-collapse: collapse;
+ font-size: 10px;
+ color: var(--text-info);
+ border: 1px solid var(--text-info);
+ transition: max-height 0.3s, padding 0.3s;
}
-
-/* Style to rotate icon when state is active */
-.rotate {
- transform: rotate(90deg);
+table .active {
+ transition: max-height 0.6s, padding 0.6s;
}
-
-/* Style the accordion content panel. Note: hidden by default */
-.accordion__content {
- background-color: white;
- overflow: hidden;
- transition: max-height 0.6s ease;
+.remix_ui_terminal_tr, .remix_ui_terminal_td {
+ padding: 4px;
+ vertical-align: baseline;
}
-
-/* Style the accordion content text */
-.accordion__text {
- font-family: "Open Sans", sans-serif;
- font-weight: 400;
- font-size: 14px;
- padding: 18px;
+.remix_ui_terminal_td:first-child {
+ min-width: 30%;
+ width: 30%;
+ align-items: baseline;
+ font-weight: bold;
+}
+.remix_ui_terminal_tableTitle {
+ width: 25%;
+}
+.remix_ui_terminal_buttons {
+ display: flex;
+ margin-left: auto;
+}
+.remix_ui_terminal_debug {
+ white-space: nowrap;
+}
+.remix_ui_terminal_debug:hover {
+ opacity: 0.8;
}
-
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 776ca1fbb0..1de6922dce 100644
--- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
+++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
@@ -72,13 +72,9 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
const messagesEndRef = useRef(null)
// terminal dragable
- const leftRef = useRef(null)
const panelRef = useRef(null)
const terminalMenu = useRef(null)
- const terminalMenuOffsetHeight = (terminalMenu.current && terminalMenu.current.offsetHeight) || 35
- const terminalDefaultPosition = config.get('terminal-top-offset')
-
const scrollToBottom = () => {
messagesEndRef.current.scrollIntoView({ behavior: 'smooth' })
}
@@ -381,14 +377,24 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
} else {
setShowTableHash((prevState) => ([...prevState, tx.hash]))
}
+ scrollToBottom()
}
const handleAutoComplete = () => (
- 2)) && autoCompletState.data._options.length > 0 ? 'block' : 'none' }}>
+ 2)) && autoCompletState.data._options.length > 0 ? 'block' : 'none' }}
+ >
{autoCompletState.data._options.map((item, index) => {
return (
- handleClickSelect(item)}>
+ handleClickSelect(item)}
+ >
{getKeyOf(item)}
@@ -413,17 +419,19 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
props.plugin.call('layout', 'minimize', props.plugin.profile.name, isOpen)
}
+ const classNameBlock = 'remix_ui_terminal_block px-4 py-1 text-break'
+
return (
-
-
-
-
-
+
+
+
+
+ 0
-
+
-
{
listen on network
-
-
+
+
+
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" />
+
{
handleAutoComplete()
}
-
-
-
+
+
{!clearConsole &&
-
-
- [block:{x.message} - 0 {'transactions'} ]
+
+
+
)
} 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 ([block:{x.message} - 0 {'transactions'} ]
+
+
{ )
+ return (
+ {
+
+ )
})
} else if (x.name === KNOWN_TRANSACTION) {
return x.message.map((trans) => {
- return ( { trans.tx.isCall ? )
+ return (
+
+ { trans.tx.isCall ?
+ )
})
} else if (Array.isArray(x.message)) {
return x.message.map((msg, i) => {
@@ -489,28 +529,40 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
)
} else if (typeof msg === 'object') {
return (
- { msg.value ? parse(msg.value) : JSON.stringify(msg) }
+ { msg.value ? parse(msg.value) : JSON.stringify(msg) }
)
} else {
return (
- { msg ? msg.toString().replace(/,/g, '') : msg }
+ { msg ? msg.toString().replace(/,/g, '') : msg }
)
}
})
} else {
if (typeof x.message !== 'function') {
return (
- {x.message}
+ {x.message}
)
}
}
})}
- {'>'}
- onChange(event)} onKeyDown={(event) => handleKeyDown(event) } value={autoCompletState.userInput} onPaste={handlePaste}>
+ { isOpen &&
+ {'>'}
+ onChange(event)}
+ onKeyDown={(event) => handleKeyDown(event) }
+ value={autoCompletState.userInput}
+ onPaste={handlePaste}
+ >
+ }
+ - Welcome to Remix {packageJson} - You can use this terminal to:
-
The following libraries are accessible:
-
|