Render logs to terminal

apps/remix-ide/src/app/udapp/run-tab.js

@@ -68,8 +68,7 @@ export class RunTab extends ViewPlugin {
           selectedAccount: this.settingsUI.getSelectedAccount(),
           selectedEnvMode: this.blockchain.getProvider(),
           networkEnvironment: this.container.querySelector('*[data-id="settingsNetworkEnv"]').textContent
-        }
-        )
+        })
       }
     })
   }

libs/remix-lib/src/execution/txRunnerWeb3.ts

@@ -16,6 +16,7 @@ export class TxRunnerWeb3 {
   }
 
   _executeTx (tx, network, txFee, api, promptCb, callback) {
+    console.log('tx: ', tx)
     if (network && network.lastBlock && network.lastBlock.baseFeePerGas) {
       // the sending stack (web3.js / metamask need to have the type defined)
       // this is to avoid the following issue: https://github.com/MetaMask/metamask-extension/issues/11824
@@ -57,6 +58,7 @@ export class TxRunnerWeb3 {
         return new Promise(async (resolve, reject) => {
           const receipt = await tryTillReceiptAvailable(resp, this.getWeb3())
           tx = await tryTillTxAvailable(resp, this.getWeb3())
+          console.log(receipt, tx, receipt['transactionHash'])
           resolve({
             receipt,
             tx,
@@ -80,6 +82,9 @@ export class TxRunnerWeb3 {
       data = '0x' + data
     }
 
+    console.log('data: ', data)
+    console.log('args: ', args)
+
     return this.runInNode(args.from, args.to, data, args.value, args.gasLimit, args.useCall, args.timestamp, confirmationCb, gasEstimationForceSend, promptCb, callback)
   }
 
@@ -112,10 +117,17 @@ export class TxRunnerWeb3 {
           }
 
           if (this._api.config.getUnpersistedProperty('doNotShowTransactionConfirmationAgain')) {
+            console.log('tx: ', tx)
+            console.log('network: ', network)
+            console.log('this._api: ', this._api)
             return this._executeTx(tx, network, null, this._api, promptCb, callback)
           }
 
           confirmCb(network, tx, tx['gas'], (txFee) => {
+            console.log('tx: ', tx)
+            console.log('network: ', network)
+            console.log('txFee: ', txFee)
+            console.log('this._api: ', this._api)
             return this._executeTx(tx, network, txFee, this._api, promptCb, callback)
           }, (error) => {
             callback(error)

libs/remix-ui/run-tab/src/lib/actions/index.ts

@@ -60,7 +60,7 @@ const setupEvents = () => {
   })
 
   plugin.blockchain.event.register('transactionExecuted', (error, from, to, data, lookupOnly, txResult) => {
-    if (!lookupOnly) dispatch(setSendValue(0))
+    if (!lookupOnly) dispatch(setSendValue('0'))
     if (error) return
     updateAccountBalances()
   })

libs/remix-ui/run-tab/src/lib/actions/payload.ts

@@ -19,7 +19,7 @@ export const fetchAccountsListFailed = (error: string) => {
   }
 }
 
-export const setSendValue = (value: number) => {
+export const setSendValue = (value: string) => {
   return {
     type: 'SET_SEND_VALUE',
     payload: value

libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx

@@ -363,6 +363,8 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
       updateMaxPriorityFee={props.updateMaxPriorityFee}
       setTxFeeContent={props.updateTxFeeContent}
       txFeeContent={props.txFeeContent}
+      maxFee={props.maxFee}
+      maxPriorityFee={props.maxPriorityFee}
     />
   }
 

libs/remix-ui/run-tab/src/lib/components/mainnet.tsx

@@ -1,20 +1,28 @@
 // eslint-disable-next-line no-use-before-define
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { CopyToClipboard } from '@remix-ui/clipboard'
 import Web3 from 'web3'
 import { MainnetProps } from '../types'
 
 export function MainnetPrompt (props: MainnetProps) {
+  const [baseFee, setBaseFee] = useState<string>('')
+
   useEffect(() => {
     props.init((txFeeText, gasPriceValue, gasPriceStatus) => {
       if (txFeeText) props.setTxFeeContent(txFeeText)
       if (gasPriceValue) onGasPriceChange(gasPriceValue)
-      if (props.network && props.network.lastBlock && props.network.lastBlock.baseFeePerGas) onMaxFeeChange(Web3.utils.fromWei(Web3.utils.toBN(parseInt(props.network.lastBlock.baseFeePerGas, 16)), 'Gwei'))
+      if (props.network && props.network.lastBlock && props.network.lastBlock.baseFeePerGas) {
+        const baseFee = Web3.utils.fromWei(Web3.utils.toBN(parseInt(props.network.lastBlock.baseFeePerGas, 16)), 'Gwei')
+
+        setBaseFee(baseFee)
+        onMaxFeeChange(baseFee)
+      }
       if (gasPriceStatus !== undefined) props.updateGasPriceStatus(gasPriceStatus)
     })
   }, [])
 
   const onMaxFeeChange = (value: string) => {
+    console.log('value: ', value)
     const maxFee = value
     // @ts-ignore
     if (parseInt(props.network.lastBlock.baseFeePerGas, 16) > Web3.utils.toWei(maxFee, 'Gwei')) {
@@ -92,14 +100,14 @@ export function MainnetPrompt (props: MainnetProps) {
               <div className="align-items-center my-1" title="Represents the part of the tx fee that goes to the miner.">
                 <div className='d-flex'>
                   <span className="text-dark mr-2 text-nowrap">Max Priority fee:</span>
-                  <input className="form-control mr-1 text-right" style={{ height: '1.2rem', width: '6rem' }} value="1" id='maxpriorityfee' onInput={(e: any) => onMaxPriorityFeeChange(e.target.value)} />
+                  <input className="form-control mr-1 text-right" style={{ height: '1.2rem', width: '6rem' }} id='maxpriorityfee' onInput={(e: any) => onMaxPriorityFeeChange(e.target.value)} defaultValue={props.maxPriorityFee} />
                   <span title="visit https://ethgasstation.info for current gas price info.">Gwei</span>
                 </div>
               </div>
               <div className="align-items-center my-1" title="Represents the maximum amount of fee that you will pay for this transaction. The minimun needs to be set to base fee.">
                 <div className='d-flex'>
                   <span className="text-dark mr-2 text-nowrap">Max fee (Not less than base fee {Web3.utils.fromWei(Web3.utils.toBN(parseInt(props.network.lastBlock.baseFeePerGas, 16)), 'Gwei')} Gwei):</span>
-                  <input className="form-control mr-1 text-right" style={{ height: '1.2rem', width: '6rem' }} id='maxfee' onInput={(e: any) => onMaxFeeChange(e.target.value)} />
+                  <input className="form-control mr-1 text-right" style={{ height: '1.2rem', width: '6rem' }} id='maxfee' onInput={(e: any) => onMaxFeeChange(e.target.value)} defaultValue={baseFee} />
                   <span>Gwei</span>
                   <span className="text-dark ml-2"></span>
                 </div>

libs/remix-ui/run-tab/src/lib/run-tab.tsx

@@ -187,6 +187,8 @@ export function RunTabUI (props: RunTabProps) {
             updateMaxPriorityFee={updateMaxPriorityFee}
             updateTxFeeContent={updateTxFeeContent}
             txFeeContent={runTab.txFeeContent}
+            maxFee={runTab.maxFee}
+            maxPriorityFee={runTab.maxPriorityFee}
           />
           <RecorderUI />
           <InstanceContainerUI />

libs/remix-ui/run-tab/src/lib/types/index.ts

@@ -172,7 +172,9 @@ export interface ContractDropdownProps {
   updateMaxPriorityFee: (fee: string) => void,
   updateGasPrice: (price: string) => void,
   updateTxFeeContent: (content: string) => void,
-  txFeeContent: string
+  txFeeContent: string,
+  maxFee: string,
+  maxPriorityFee: string
 }
 
 export interface RecorderProps {
@@ -223,5 +225,7 @@ export interface MainnetProps {
   setTxFeeContent: (content: string) => void,
   updateGasPrice: (price: string) => void,
   updateMaxPriorityFee: (fee: string) => void
-  txFeeContent: string
+  txFeeContent: string,
+  maxFee: string,
+  maxPriorityFee: string
 }

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

@@ -86,7 +86,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   useEffect(() => {
     props.onReady({
       logHtml: (html) => {
-        scriptRunnerDispatch({ type: 'html', payload: { message: [html.innerText] } })
+        scriptRunnerDispatch({ type: 'html', payload: { message: [html ? html.innerText ? html.innerText : html : null] } })
       },
 
       log: (message) => {
@@ -483,7 +483,11 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
                 })
               } else if (Array.isArray(x.message)) {
                 return x.message.map((msg, i) => {
-                  if (typeof msg === 'object') {
+                  if (React.isValidElement(msg)) {
+                    return (
+                      <div className="px-4 block" data-id="block" key={i}><span className={x.style}>{ msg }</span></div>
+                    )
+                  } 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>
                     )