conect custom hook to run-tab UI

apps/remix-ide/src/blockchain/blockchain.js

@@ -414,6 +414,7 @@ class Blockchain extends Plugin {
     const self = this
     waterfall([
       function getGasLimit (next) {
+        console.log('called: ', self.transactionContextAPI.gasLimit())
         if (self.transactionContextAPI.getGasLimit) {
           return self.transactionContextAPI.getGasLimit(next)
         }

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

@@ -0,0 +1,89 @@
+// eslint-disable-next-line no-unused-vars
+import React from 'react'
+import * as ethJSUtil from 'ethereumjs-util'
+import Web3 from 'web3'
+import { shortenAddress } from '@remix-ui/helper'
+import { fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, setGasLimit, setSelectedAccount, setSendUnit, setSendValue } from './payload'
+import { runTabInitialState, runTabReducer } from '../reducers/runTab'
+
+export function useRunTabPlugin (plugin) {
+  const [runTab, dispatch] = React.useReducer(runTabReducer, runTabInitialState)
+
+  const setupEvents = () => {
+    plugin.blockchain.events.on('newTransaction', (tx, receipt) => {
+      plugin.emit('newTransaction', tx, receipt)
+    })
+
+    plugin.blockchain.event.register('transactionExecuted', (error, from, to, data, lookupOnly, txResult) => {
+      if (!lookupOnly) dispatch(setSendValue(0))
+      if (error) return
+      updateAccountBalances()
+    })
+
+    plugin.blockchain.resetAndInit(plugin.config, {
+      getAddress: (cb) => {
+        cb(null, runTab.accounts.selectedAccount)
+      },
+      getValue: (cb) => {
+        try {
+          const number = runTab.sendValue
+          const unit = runTab.sendUnit
+
+          cb(null, Web3.utils.toWei(number, unit))
+        } catch (e) {
+          cb(e)
+        }
+      },
+      getGasLimit: (cb) => {
+        try {
+          cb(null, '0x' + new ethJSUtil.BN(runTab.gasLimit, 10).toString(16))
+        } catch (e) {
+          cb(e.message)
+        }
+      }
+    })
+    console.log('called: reset and init')
+  }
+
+  const updateAccountBalances = () => {
+    const accounts = runTab.accounts.loadedAccounts
+
+    Object.keys(accounts).map((value) => {
+      plugin.blockchain.getBalanceInEther(value, (err, balance) => {
+        if (err) return
+        const updated = shortenAddress(value, balance)
+
+        accounts[value] = updated
+      })
+    })
+  }
+
+  const fillAccountsList = async () => {
+    try {
+      dispatch(fetchAccountsListRequest())
+      const promise = plugin.blockchain.getAccounts()
+
+      promise.then((accounts: string[]) => {
+        dispatch(fetchAccountsListSuccess(accounts))
+      }).catch((e) => {
+        dispatch(fetchAccountsListFailed(e.message))
+      })
+    } catch (e) {
+      // addTooltip(`Cannot get account list: ${e}`)
+    }
+  }
+
+  const setAccount = (account: string) => {
+    dispatch(setSelectedAccount(account))
+  }
+
+  const setUnit = (unit: 'ether' | 'finney' | 'gwei' | 'wei') => {
+    dispatch(setSendUnit(unit))
+  }
+
+  const setGasFee = (value: number) => {
+    dispatch(setGasLimit(value))
+  }
+
+  return { runTab, setupEvents, fillAccountsList, setAccount, setUnit, setGasFee }
+}

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

@@ -1,6 +1,7 @@
 export const fetchAccountsListRequest = () => {
   return {
-    type: 'FETCH_ACCOUNTS_LIST_REQUEST'
+    type: 'FETCH_ACCOUNTS_LIST_REQUEST',
+    payload: null
   }
 }
 
@@ -17,3 +18,31 @@ export const fetchAccountsListFailed = (error: string) => {
     payload: error
   }
 }
+
+export const setSendValue = (value: number) => {
+  return {
+    type: 'SET_SEND_VALUE',
+    payload: value
+  }
+}
+
+export const setSelectedAccount = (account: string) => {
+  return {
+    type: 'SET_SELECTED_ACCOUNT',
+    payload: account
+  }
+}
+
+export const setSendUnit = (unit: 'ether' | 'finney' | 'gwei' | 'wei') => {
+  return {
+    type: 'SET_SEND_UNIT',
+    payload: unit
+  }
+}
+
+export const setGasLimit = (gasLimit: number) => {
+  return {
+    type: 'SET_GAS_LIMIT',
+    payload: gasLimit
+  }
+}

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

@@ -1,16 +1,16 @@
 // eslint-disable-next-line no-use-before-define
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { CopyToClipboard } from '@remix-ui/clipboard'
 import { AccountProps } from '../types'
 
 export function AccountUI (props: AccountProps) {
-  const accounts = Object.keys(props.accounts.loadedAccounts)
+  const { selectedAccount, loadedAccounts } = props.accounts
-  const [selectedAccount, setSelectedAccount] = useState<string>('')
+  const accounts = Object.keys(loadedAccounts)
   const plusBtn = useRef(null)
   const plusTitle = useRef(null)
 
   useEffect(() => {
-    if (!selectedAccount && accounts.length > 0) setSelectedAccount(accounts[0])
+    if (!selectedAccount && accounts.length > 0) props.setAccount(accounts[0])
   }, [accounts, selectedAccount])
 
   const updatePlusButton = () => {
@@ -115,9 +115,9 @@ export function AccountUI (props: AccountProps) {
         </span>
       </label>
       <div className="udapp_account">
-        <select id="txorigin" data-id="runTabSelectAccount" name="txorigin" className="form-control udapp_select custom-select pr-4" value={selectedAccount} onChange={(e) => { setSelectedAccount(e.target.value) }}>
+        <select id="txorigin" data-id="runTabSelectAccount" name="txorigin" className="form-control udapp_select custom-select pr-4" value={selectedAccount} onChange={(e) => { props.setAccount(e.target.value) }}>
           {
-            Object.keys(props.accounts.loadedAccounts).map((value) => <option value={value}>{ value }</option>)
+            Object.keys(loadedAccounts).map((value) => <option value={value}>{ loadedAccounts[value] }</option>)
           }
         </select>
         <div style={{ marginLeft: -5 }}><CopyToClipboard content={selectedAccount} direction='top' /></div>

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

@@ -3,10 +3,14 @@ import React from 'react'
 import { GasPriceProps } from '../types'
 
 export function GasPriceUI (props: GasPriceProps) {
+  const handleGasLimit = (e) => {
+    props.setGasFee(e.target.value)
+  }
+
   return (
     <div className="udapp_crow">
       <label className="udapp_settingsLabel">Gas limit</label>
-      <input type="number" className="form-control udapp_gasNval udapp_col2" id="gasLimit" defaultValue="3000000" />
+      <input type="number" className="form-control udapp_gasNval udapp_col2" id="gasLimit" value={props.gasLimit} onChange={handleGasLimit} />
     </div>
   )
 }

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

@@ -129,9 +129,9 @@ export function SettingsUI (props: SettingsProps) {
     <div className="udapp_settings">
       <EnvironmentUI updateExEnv={props.updateExEnv} />
       <NetworkUI />
-      <AccountUI selectExEnv={props.selectExEnv} accounts={props.accounts} />
+      <AccountUI selectExEnv={props.selectExEnv} accounts={props.accounts} setAccount={props.setAccount} />
-      <GasPriceUI />
+      <GasPriceUI gasLimit={props.gasLimit} setGasFee={props.setGasFee} />
-      <ValueUI />
+      <ValueUI setUnit={props.setUnit} sendValue={props.sendValue} sendUnit={props.sendUnit} />
     </div>
   )
 }

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

@@ -52,12 +52,12 @@ export function ValueUI (props: ValueProps) {
           className="form-control udapp_gasNval udapp_col2"
           id="value"
           data-id="dandrValue"
-          value="0"
+          value={props.sendValue}
           title="Enter the value and choose the unit"
           onKeyPress={validateInputKey}
           onChange={validateValue}
         />
-        <select name="unit" className="form-control p-1 udapp_gasNvalUnit udapp_col2_2 custom-select" id="unit">
+        <select name="unit" value={props.sendUnit} className="form-control p-1 udapp_gasNvalUnit udapp_col2_2 custom-select" id="unit" onChange={(e) => { props.setUnit((e.target.value) as 'ether' | 'finney' | 'gwei' | 'wei') }}>
           <option data-unit="wei">Wei</option>
           <option data-unit="gwei">Gwei</option>
           <option data-unit="finney">Finney</option>

libs/remix-ui/run-tab/src/lib/reducers/runTab.ts

@@ -8,17 +8,25 @@ export interface RunTabState {
     loadedAccounts: Record<string, any>,
     isRequesting: boolean,
     isSuccessful: boolean,
-    error: string
+    error: string,
-  }
+    selectedAccount: string
+  },
+  sendValue: string,
+  sendUnit: 'ether' | 'finney' | 'gwei' | 'wei',
+  gasLimit: number
 }
 
-export const runTabInitialState = {
+export const runTabInitialState: RunTabState = {
   accounts: {
     loadedAccounts: {},
     isRequesting: false,
     isSuccessful: false,
-    error: null
+    error: null,
-  }
+    selectedAccount: ''
+  },
+  sendValue: '0',
+  sendUnit: 'ether',
+  gasLimit: 3000000
 }
 
 export const runTabReducer = (state: RunTabState = runTabInitialState, action: Action) => {
@@ -61,6 +69,42 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
         }
       }
     }
+    case 'SET_SEND_VALUE': {
+      const payload = action.payload as string
+
+      return {
+        ...state,
+        sendValue: payload
+      }
+    }
+    case 'SET_SELECTED_ACCOUNT': {
+      const payload = action.payload as string
+
+      return {
+        ...state,
+        accounts: {
+          ...state.accounts,
+          selectedAccount: payload
+        }
+      }
+    }
+    case 'SET_SEND_UNIT': {
+      const payload = action.payload as 'ether' | 'finney' | 'gwei' | 'wei'
+
+      return {
+        ...state,
+        sendUnit: payload
+      }
+    }
+
+    case 'SET_GAS_LIMIT': {
+      const payload = action.payload as number
+
+      return {
+        ...state,
+        gasLimit: payload
+      }
+    }
     default:
       return state
   }
@@ -68,23 +112,19 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
 
 // TODO: unclear what's the goal of accountListCallId, feels like it can be simplified
 const resolveAccountsList = async (state: RunTabState, accounts: string[]) => {
-  // const txOrigin = this.el.querySelector('#txorigin')
   const loadedAccounts = state.accounts.loadedAccounts
 
   if (!accounts) accounts = []
   for (const loadedaddress in loadedAccounts) {
     if (accounts.indexOf(loadedaddress) === -1) {
-      // txOrigin.removeChild(txOrigin.querySelector('option[value="' + loadedaddress + '"]'))
       delete loadedAccounts[loadedaddress]
     }
   }
   for (const i in accounts) {
     const address = accounts[i]
     if (!loadedAccounts[address]) {
-      // txOrigin.appendChild(yo`<option value="${address}" >${address}</option>`)
       loadedAccounts[address] = 1
     }
   }
   return loadedAccounts
-  // txOrigin.setAttribute('value', accounts[0])
 }

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

@@ -1,20 +1,24 @@
 // eslint-disable-next-line no-use-before-define
-import React, { useState, useEffect, useReducer } from 'react'
+import React, { useState, useEffect } from 'react'
-import { initSettingsTab } from './actions'
+import { useRunTabPlugin } from './actions/custom'
 import { ContractDropdownUI } from './components/contractDropdownUI'
 import { InstanceContainerUI } from './components/instanceContainerUI'
 import { RecorderUI } from './components/recorderCardUI'
 import { SettingsUI } from './components/settingsUI'
 import './css/run-tab.css'
-import { runTabInitialState, runTabReducer } from './reducers/runTab'
 import { RunTabProps } from './types'
 
 export function RunTabUI (props: RunTabProps) {
+  const { runTab, setupEvents, fillAccountsList, setAccount, setUnit, setGasFee } = useRunTabPlugin(props.plugin)
   const [selectExEnv, setSelectExEnv] = useState<string>('')
-  const [runTab, runTabDispatch] = useReducer(runTabReducer, runTabInitialState)
 
   useEffect(() => {
-    initSettingsTab(props.plugin)(runTabDispatch)
+    setupEvents()
+
+    setInterval(() => {
+      fillAccountsList()
+    }, 1000)
+    fillAccountsList()
   }, [])
 
   const updateExEnv = (env: string) => {
@@ -24,7 +28,7 @@ export function RunTabUI (props: RunTabProps) {
   return (
     <div className="udapp_runTabView run-tab" id="runTabView" data-id="runTabView">
       <div className="list-group list-group-flush">
-        <SettingsUI selectExEnv={selectExEnv} updateExEnv={updateExEnv} accounts={runTab.accounts} />
+        <SettingsUI selectExEnv={selectExEnv} updateExEnv={updateExEnv} accounts={runTab.accounts} setAccount={setAccount} setUnit={setUnit} sendValue={runTab.sendValue} sendUnit={runTab.sendUnit} gasLimit={runTab.gasLimit} setGasFee={setGasFee} />
         <ContractDropdownUI exEnvironment={selectExEnv} />
         <RecorderUI />
         <InstanceContainerUI />

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

@@ -7,10 +7,17 @@ export interface SettingsProps {
   updateExEnv: (env: string) => void,
   accounts: {
     loadedAccounts: Record<string, any>,
+    selectedAccount: string,
     isRequesting: boolean,
     isSuccessful: boolean,
     error: string
-  }
+  },
+  setAccount: (account: string) => void,
+  setUnit: (unit: 'ether' | 'finney' | 'gwei' | 'wei') => void,
+  sendValue: string,
+  sendUnit: string,
+  gasLimit: number,
+  setGasFee: (value: number) => void
 }
 
 export interface EnvironmentProps {
@@ -25,18 +32,23 @@ export interface AccountProps {
   selectExEnv: string,
   accounts: {
     loadedAccounts: Record<string, any>,
+    selectedAccount: string,
     isRequesting: boolean,
     isSuccessful: boolean,
     error: string
-  }
+  },
+  setAccount: (account: string) => void
 }
 
 export interface GasPriceProps {
-
+  gasLimit: number,
+  setGasFee: (value: number) => void
 }
 
 export interface ValueProps {
-
+  setUnit: (unit: 'ether' | 'finney' | 'gwei' | 'wei') => void,
+  sendValue: string,
+  sendUnit: string
 }
 
 export interface ContractDropdownProps {