implementing command execution script in react

apps/remix-ide/src/app/panels/terminal.js

@@ -39,6 +39,7 @@ class Terminal extends Plugin {
     this.element.setAttribute('id', 'terminal-view')
     this.event = new EventManager()
     this.blockchain = opts.blockchain
+    this.vm = vm
     this._api = api
     this._opts = opts
     this.config = config
@@ -75,18 +76,6 @@ class Terminal extends Plugin {
   }
 
   onActivation () {
-    // this.on('scriptRunner', 'log', (msg) => {
-    //   this.commands.log.apply(this.commands, msg.data)
-    // })
-    // this.on('scriptRunner', 'info', (msg) => {
-    //   this.commands.info.apply(this.commands, msg.data)
-    // })
-    // this.on('scriptRunner', 'warn', (msg) => {
-    //   this.commands.warn.apply(this.commands, msg.data)
-    // })
-    // this.on('scriptRunner', 'error', (msg) => {
-    //   this.commands.error.apply(this.commands, msg.data)
-    // })
     this.renderComponent()
   }
 
@@ -148,6 +137,7 @@ class Terminal extends Plugin {
         version = {this.version}
         config = {this.config}
         thisState = {this}
+        vm = {this.vm}
       />,
       this.element
     )

libs/remix-ui/terminal/src/lib/actions/terminalAction.ts

@@ -129,3 +129,7 @@ export const registerErrorScriptRunnerAction = (event, commandName, commandFn, d
     dispatch({ type: commandName, payload: { commandFn, message: msg.data } })
   })
 }
+
+export const registerRemixWelcomeTextAction = (welcomeText, dispatch) => {
+  dispatch({ type: 'welcomeText', payload: { welcomeText } })
+}

libs/remix-ui/terminal/src/lib/commands.ts

+export const allPrograms = [
+  { ethers: 'The ethers.js library is a compact and complete JavaScript library for Ethereum.' },
+  { remix: 'Ethereum IDE and tools for the web.' },
+  { web3: 'The web3.js library is a collection of modules which contain specific functionality for the ethereum ecosystem.' },
+  { swarmgw: 'This library can be used to upload/download files to Swarm via https://swarm-gateways.net/.' }
+]
+
+export const allCommands = [
+  { 'remix.execute(filepath)': 'Run the script specified by file path. If filepath is empty, script currently displayed in the editor is executed.' },
+  { 'remix.exeCurrent()': 'Run the script currently displayed in the editor.' },
+  { 'remix.help()': 'Display this help message.' },
+  { 'remix.loadgist(id)': 'Load a gist in the file explorer.' },
+  { 'remix.loadurl(url)': 'Load the given url in the file explorer. The url can be of type github, swarm or ipfs.' },
+
+  { 'swarmgw.get(url, cb)': 'Download files from Swarm via https://swarm-gateways.net/' },
+  { 'swarmgw.put(content, cb)': 'Upload files to Swarm via https://swarm-gateways.net/' },
+
+  { 'ethers.Contract': 'This API provides a graceful connection to a contract deployed on the blockchain, simplifying calling and querying its functions and handling all the binary protocol and conversion as necessarily.' },
+  { 'ethers.HDNode': 'A Hierarchical Deterministic Wallet represents a large tree of private keys which can reliably be reproduced from an initial seed.' },
+  { 'ethers.Interface': 'The Interface Object is a meta-class that accepts a Solidity (or compatible) Application Binary Interface (ABI) and populates functions to deal with encoding and decoding the parameters to pass in and results returned.' },
+  { 'ethers.providers': 'A Provider abstracts a connection to the Ethereum blockchain, for issuing queries and sending state changing transactions.' },
+  { 'ethers.SigningKey': 'The SigningKey interface provides an abstraction around the secp256k1 elliptic curve cryptography library.' },
+  { 'ethers.utils': 'The utility functions exposed in both the ethers umbrella package and the ethers-utils.' },
+  { 'ethers.utils.AbiCoder': 'Create a new ABI Coder object' },
+  { 'ethers.utils.RLP': 'This encoding method is used internally for several aspects of Ethereum, such as encoding transactions and determining contract addresses.' },
+  { 'ethers.Wallet': 'A wallet manages a private/public key pair which is used to cryptographically sign transactions and prove ownership on the Ethereum network.' },
+  { 'ethers.version': 'Contains the version of the ethers container object.' },
+
+  { 'web3.eth': 'Eth module for interacting with the Ethereum network.' },
+  { 'web3.eth.accounts': 'The web3.eth.accounts contains functions to generate Ethereum accounts and sign transactions and data.' },
+  { 'web3.eth.abi': 'The web3.eth.abi functions let you de- and encode parameters to ABI (Application Binary Interface) for function calls to the EVM (Ethereum Virtual Machine).' },
+  { 'web3.eth.ens': 'The web3.eth.ens functions let you interacting with ENS.' },
+  { 'web3.eth.Iban': 'The web3.eth.Iban function lets convert Ethereum addresses from and to IBAN and BBAN.' },
+  { 'web3.eth.net': 'Net module for interacting with network properties.' },
+  { 'web3.eth.personal': 'Personal module for interacting with the Ethereum accounts.' },
+  { 'web3.eth.subscribe': 'The web3.eth.subscribe function lets you subscribe to specific events in the blockchain.' },
+  { 'web3.givenProvider': 'When using web3.js in an Ethereum compatible browser, it will set with the current native provider by that browser. Will return the given provider by the (browser) environment, otherwise null.' },
+  { 'web3.modules': 'Contains the version of the web3 container object.' },
+  { 'web3.providers': 'Contains the current available providers.' },
+  { 'web3.shh': 'Shh module for interacting with the whisper protocol' },
+  { 'web3.utils': 'This package provides utility functions for Ethereum dapps and other web3.js packages.' },
+  { 'web3.version': 'Contains the version of the web3 container object.' },
+
+  { 'web3.eth.clearSubscriptions();': 'Resets subscriptions.' },
+  { 'web3.eth.Contract(jsonInterface[, address][, options])': 'The web3.eth.Contract object makes it easy to interact with smart contracts on the ethereum blockchain.' },
+  { 'web3.eth.accounts.create([entropy]);': 'The web3.eth.accounts contains functions to generate Ethereum accounts and sign transactions and data.' },
+  { 'web3.eth.getAccounts();': 'Retrieve the list of accounts' },
+  { 'web3.eth.accounts.privateKeyToAccount(privateKey [, ignoreLength ]);': 'Get the account from the private key' },
+  { 'web3.eth.accounts.signTransaction(tx, privateKey [, callback]);': 'Sign Transaction' },
+  { 'web3.eth.accounts.recoverTransaction(rawTransaction);': 'Sign Transaction' },
+  { 'web3.eth.accounts.hashMessage(message);': 'Hash message' }
+]

libs/remix-ui/terminal/src/lib/reducers/remixWelcom.ts

+export const remixWelcome = () => {
+  return `<div>
+    <div> - Welcome to Remix {props.version} - </div>
+    <br/>
+    <div>You can use this terminal to: </div>
+    <ul className='ul'>
+      <li>Check transactions details and start debugging.</li>
+      <li>Execute JavaScript scripts:
+        <br />
+        <i> - Input a script directly in the command line interface </i>
+        <br />
+        <i> - Select a Javascript file in the file explorer and then run \`remix.execute()\` or \`remix.exeCurrent()\`  in the command line interface  </i>
+        <br />
+        <i> - Right click on a JavaScript file in the file explorer and then click \`Run\` </i>
+      </li>
+    </ul>
+    <div>The following libraries are accessible:</div>
+    <ul className='ul'>
+      <li><a target="_blank" href="https://web3js.readthedocs.io/en/1.0/">web3 version 1.0.0</a></li>
+      <li><a target="_blank" href="https://docs.ethers.io">ethers.js</a> </li>
+      <li><a target="_blank" href="https://www.npmjs.com/package/swarmgw">swarmgw</a> </li>
+      <li>remix (run remix.help() for more info)</li>
+    </ul>
+  </div>`
+}
\ No newline at end of file

libs/remix-ui/terminal/src/lib/reducers/terminalReducer.ts

-export const initialState = {
-  journalBlocks: {
 
-  },
+export const initialState = {
+  journalBlocks: [
+  ],
   data: {
     // lineLength: props.options.lineLength || 80,
     session: [],
@@ -121,13 +121,43 @@ export const addCommandHistoryReducer = (state, action) => {
   }
 }
 
+export const remixWelcomeTextReducer = (state, action) => {
+  switch (action.type) {
+    case 'welcomeText' :
+      return {
+        ...state,
+        journalBlocks: initialState.journalBlocks.push(action.payload.welcomeText)
+      }
+  }
+}
+
 export const registerScriptRunnerReducer = (state, action) => {
   console.log({ state }, { action }, 'register script runner reducer')
   switch (action.type) {
     case 'log':
       return {
-        ...state
-        
+        ...state,
+        journalBlocks: initialState.journalBlocks.push({ message: action.payload.message, style: 'text-info' })
+      }
+    case 'info':
+      return {
+        ...state,
+        journalBlocks: initialState.journalBlocks.push({ message: action.payload.message, style: 'text-info' })
+      }
+    case 'warn':
+      return {
+        ...state,
+        journalBlocks: initialState.journalBlocks.push({ message: action.payload.message, style: 'text-warning' })
+      }
+    case 'error':
+      return {
+        ...state,
+        journalBlocks: initialState.journalBlocks.push({ message: action.payload.message, style: 'text-danger' })
+      }
+    case 'script':
+      return {
+        ...state,
+        journalBlocks: initialState.journalBlocks.push({ message: action.payload.message, style: 'text-log' })
       }
   }
 }

libs/remix-ui/terminal/src/lib/remix-ui-terminal.css

@@ -2,6 +2,21 @@
 element.style {
  height: 323px !important;
 }
+#terminalCliInput{
+  width: 95%;
+  background-color: #222336;
+  color: #a2a3bd;
+  border-top-style: hidden;
+  border-right-style: hidden;
+  border-left-style: hidden;
+  border-bottom-style: hidden;
+}
+#terminalCliInput:focus {
+  outline: none;
+}
+input #terminalCliInput {
+
+}
 .panel              {
     position          : relative;
     display           : flex;
@@ -151,4 +166,72 @@ element.style {
     padding: 0 1rem;
   }
 
-  .ul {margin-left: 0; padding-left: 20px;}
+  .ul {margin-left: 0; padding-left: 20px;}
\ No newline at end of file
+
+  .popup             {
+    position         : absolute;
+    text-align       : left;
+    display          : none;
+    width            : 95%;
+    font-family      : monospace;
+    background-color : var(--secondary);
+    overflow         : auto;
+    padding-bottom   : 13px;
+    z-index          : 80;
+    bottom           : 1em;
+    border-width     : 4px;
+    left             : 2em;
+  }
+
+  .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
+  }
+
+  @-webkit-keyframes animatetop {
+    from {bottom: -300px; opacity: 0}
+    to {bottom: 0; opacity: 1}
+  }
+
+  @keyframes animatetop {
+    from {bottom: -300px; opacity: 0}
+    to {bottom: 0; opacity: 1}
+  }
\ No newline at end of file

libs/remix-ui/terminal/src/lib/utils/utils.ts

+
+export const getKeyOf = (item) => {
+  return Object.keys(item)[0]
+}
+
+export const getValueOf = (item) => {
+  return Object.values(item)[0]
+}