Merge pull request #3481 from ethereum/less_set_interval

Decrease the setInterval timeout and use injected api to update accounts list and chain context

apps/debugger/webpack.config.js

@@ -79,5 +79,9 @@ module.exports = composePlugins(withNx(), (config) => {
     new CssMinimizerPlugin(),
   ];
 
+  config.watchOptions = {
+    ignored: /node_modules/
+  }
+
   return config;
 });

apps/etherscan/webpack.config.js

@@ -78,5 +78,9 @@ module.exports = composePlugins(withNx(), (config) => {
     new CssMinimizerPlugin(),
   ];
 
+  config.watchOptions = {
+    ignored: /node_modules/
+  }
+
   return config;
 });

apps/remix-ide-e2e/src/local-plugin/webpack.config.js

@@ -17,5 +17,9 @@ module.exports = composePlugins(withNx(), (config) => {
 
   config.ignoreWarnings = [/Failed to parse source map/] // ignore source-map-loader warnings
 
+  config.watchOptions = {
+    ignored: /node_modules/
+  }
+
   return config;
 });

apps/remix-ide/src/app/providers/injected-provider.tsx

@@ -10,14 +10,32 @@ const noInjectedProviderMsg = 'No injected provider found. Make sure your provid
 export class InjectedProvider extends Plugin implements IProvider {
   provider: any
   options: { [id: string] : any } = {}
+  listenerAccountsChanged: (accounts: Array<string>) => void
+  listenerChainChanged: (chainId: number) => void
 
   constructor (profile) {
     super(profile)
+    this.listenerAccountsChanged = (accounts: Array<string>) => {
+      this.emit('accountsChanged', accounts)
+    }
+    this.listenerChainChanged = (chainId: number) => {
+      this.emit('chainChanged', chainId)
+    }
     if ((window as any).ethereum) {
       this.provider = new Web3((window as any).ethereum)
     }
   }
 
+  onActivation(): void {    
+    (window as any).ethereum.on('accountsChanged', this.listenerAccountsChanged);
+    (window as any).ethereum.on('chainChanged', this.listenerChainChanged);
+  }
+
+  onDeactivation(): void {
+    (window as any).ethereum.removeListener('accountsChanged', this.listenerAccountsChanged)
+    (window as any).ethereum.removeListener('chainChanged', this.listenerChainChanged)
+  }
+
   askPermission (throwIfNoInjectedProvider) {
     if ((typeof (window as any).ethereum) !== "undefined" && (typeof (window as any).ethereum.request) === "function") {
       (window as any).ethereum.request({ method: "eth_requestAccounts" })

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

@@ -23,7 +23,7 @@ const profile = {
   name: 'blockchain',
   displayName: 'Blockchain',
   description: 'Blockchain - Logic',
-  methods: ['getCode', 'getTransactionReceipt', 'addProvider', 'removeProvider', 'getCurrentFork', 'web3VM'],
+  methods: ['getCode', 'getTransactionReceipt', 'addProvider', 'removeProvider', 'getCurrentFork', 'web3VM', 'getProvider'],
   version: packageJson.version
 }
 
@@ -48,33 +48,54 @@ export class Blockchain extends Plugin {
     }, _ => this.executionContext.web3(), _ => this.executionContext.currentblockGasLimit())
     this.txRunner = new TxRunner(web3Runner, { runAsync: true })
 
-    this.executionContext.event.register('contextChanged', this.resetEnvironment.bind(this))
-
     this.networkcallid = 0
-    this.networkStatus = { name: ' - ', id: ' - ' }
+    this.networkStatus = { network: { name: ' - ', id: ' - ' } }
     this.setupEvents()
     this.setupProviders()
   }
 
+  _triggerEvent (name, args) {
+    this.event.trigger(name, args)
+    this.emit(name, ...args)
+  }
+
+  onActivation () {
+    this.on('injected', 'chainChanged', () => {
+      this.detectNetwork((error, network) => {
+        this.networkStatus = { network, error }
+        this._triggerEvent('networkStatus', [this.networkStatus])
+      })
+    })
+  }
+
+  onDeactivation () {
+    this.off('injected', 'chainChanged')
+  }
+
   setupEvents () {
-    this.executionContext.event.register('contextChanged', (context, silent) => {
-      this.event.trigger('contextChanged', [context, silent])
+    this.executionContext.event.register('contextChanged', async (context) => {
+      await this.resetEnvironment()
+      this._triggerEvent('contextChanged', [context])
+      this.detectNetwork((error, network) => {
+        this.networkStatus = { network, error }
+        this._triggerEvent('networkStatus', [this.networkStatus])
+      })
     })
 
     this.executionContext.event.register('addProvider', (network) => {
-      this.event.trigger('addProvider', [network])
+      this._triggerEvent('addProvider', [network])
     })
 
     this.executionContext.event.register('removeProvider', (name) => {
-      this.event.trigger('removeProvider', [name])
+      this._triggerEvent('removeProvider', [name])
     })
 
     setInterval(() => {
       this.detectNetwork((error, network) => {
         this.networkStatus = { network, error }
-        this.event.trigger('networkStatus', [this.networkStatus])
+        this._triggerEvent('networkStatus', [this.networkStatus])
       })
-    }, 1000)
+    }, 30000)
   }
 
   getCurrentNetworkStatus () {
@@ -480,12 +501,11 @@ export class Blockchain extends Plugin {
 
   // NOTE: the config is only needed because exectuionContext.init does
   // if config.get('settings/always-use-vm'), we can simplify this later
-  resetAndInit (config, transactionContextAPI) {
+  async resetAndInit (config, transactionContextAPI) {
     this.transactionContextAPI = transactionContextAPI
     this.executionContext.init(config)
     this.executionContext.stopListenOnLastBlock()
     this.executionContext.listenOnLastBlock()
-    this.resetEnvironment()
   }
 
   addProvider (provider) {
@@ -504,8 +524,8 @@ export class Blockchain extends Plugin {
     })
   }
 
-  resetEnvironment () {
-    this.getCurrentProvider().resetEnvironment()
+  async resetEnvironment () {
+    await this.getCurrentProvider().resetEnvironment()
     // TODO: most params here can be refactored away in txRunner
     const web3Runner = new TxRunnerWeb3({
       config: this.config,
@@ -551,8 +571,8 @@ export class Blockchain extends Plugin {
   }
 
   /** Get the balance of an address, and convert wei to ether */
-  getBalanceInEther (address, cb) {
-    this.getCurrentProvider().getBalanceInEther(address, cb)
+  getBalanceInEther (address) {
+    return this.getCurrentProvider().getBalanceInEther(address)
   }
 
   pendingTransactionsCount () {
@@ -674,7 +694,7 @@ export class Blockchain extends Plugin {
         if (!tx.timestamp) tx.timestamp = Date.now()
         const timestamp = tx.timestamp
 
-        this.event.trigger('initiatingTransaction', [timestamp, tx, payLoad])
+        this._triggerEvent('initiatingTransaction', [timestamp, tx, payLoad])
         try {
           this.txRunner.rawRun(tx, confirmationCb, continueCb, promptCb,
             async (error, result) => {
@@ -698,7 +718,7 @@ export class Blockchain extends Plugin {
               }
               const eventName = (tx.useCall ? 'callExecuted' : 'transactionExecuted')
 
-              this.event.trigger(eventName, [error, tx.from, tx.to, tx.data, tx.useCall, result, timestamp, payLoad])
+              this._triggerEvent(eventName, [error, tx.from, tx.to, tx.data, tx.useCall, result, timestamp, payLoad])
               return resolve({ result, tx })
             }
           )

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

@@ -37,6 +37,7 @@ export class ExecutionContext {
     if (config.get('settings/always-use-vm')) {
       this.executionContext = 'vm-merge'
     }
+    this.event.trigger('contextChanged', [this.executionContext])
   }  
 
   getProvider () {

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

@@ -16,17 +16,13 @@ class InjectedProvider {
     })
   }
 
-  resetEnvironment () {
+  async resetEnvironment () {
      /* Do nothing. */ 
   }
 
-  getBalanceInEther (address, cb) {
-    this.executionContext.web3().eth.getBalance(address, (err, res) => {
-      if (err) {
-        return cb(err)
-      }
-      cb(null, Web3.utils.fromWei(res.toString(10), 'ether'))
-    })
+  async getBalanceInEther (address) {
+    const balance = await this.executionContext.web3().eth.getBalance(address)
+    return Web3.utils.fromWei(balance.toString(10), 'ether')
   }
 
   getGasPrice (cb) {

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

@@ -24,17 +24,13 @@ class NodeProvider {
     })
   }
 
-  resetEnvironment () {
+  async resetEnvironment () {
      /* Do nothing. */
   }
 
-  getBalanceInEther (address, cb) {
-    this.executionContext.web3().eth.getBalance(address, (err, res) => {
-      if (err) {
-        return cb(err)
-      }
-      cb(null, Web3.utils.fromWei(res.toString(10), 'ether'))
-    })
+  async getBalanceInEther (address) {
+    const balance = await this.executionContext.web3().eth.getBalance(address)
+    return Web3.utils.fromWei(balance.toString(10), 'ether')
   }
 
   getGasPrice (cb) {

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

@@ -18,7 +18,7 @@ class VMProvider {
     })
   }
 
-  resetEnvironment () {
+  async resetEnvironment () {
     if (this.worker) this.worker.terminate()
     this.accounts = {}
     this.worker = new Worker(new URL('./worker-vm', import.meta.url))
@@ -26,28 +26,33 @@ class VMProvider {
 
     let incr = 0
     const stamps = {}
-    this.worker.addEventListener('message', (msg) => {
-      if (msg.data.cmd === 'sendAsyncResult' && stamps[msg.data.stamp]) {
-        stamps[msg.data.stamp](msg.data.error, msg.data.result)
-      } else if (msg.data.cmd === 'initiateResult') {
-        if (!msg.data.error) {
-          this.provider = {
-            sendAsync: (query, callback) => {
-              const stamp = Date.now() + incr
-              incr++
-              stamps[stamp] = callback
-              this.worker.postMessage({ cmd: 'sendAsync', query, stamp })
+    
+    return new Promise((resolve, reject) => { 
+      this.worker.addEventListener('message', (msg) => {
+        if (msg.data.cmd === 'sendAsyncResult' && stamps[msg.data.stamp]) {
+          stamps[msg.data.stamp](msg.data.error, msg.data.result)
+        } else if (msg.data.cmd === 'initiateResult') {
+          if (!msg.data.error) {
+            this.provider = {
+              sendAsync: (query, callback) => {
+                const stamp = Date.now() + incr
+                incr++
+                stamps[stamp] = callback
+                this.worker.postMessage({ cmd: 'sendAsync', query, stamp })
+              }
             }
+            this.web3 = new Web3(this.provider)
+            extend(this.web3)
+            this.accounts = {}
+            this.executionContext.setWeb3(this.executionContext.getProvider(), this.web3)
+            resolve({})
+          } else {
+            reject(new Error(msg.data.error))
           }
-          this.web3 = new Web3(this.provider)
-          extend(this.web3)
-          this.accounts = {}
-          this.executionContext.setWeb3(this.executionContext.getProvider(), this.web3)
         }
-      }
-    })
-
-    this.worker.postMessage({ cmd: 'init', fork: this.executionContext.getCurrentFork(), nodeUrl: provider?.options['nodeUrl'], blockNumber: provider?.options['blockNumber']})
+      })
+      this.worker.postMessage({ cmd: 'init', fork: this.executionContext.getCurrentFork(), nodeUrl: provider?.options['nodeUrl'], blockNumber: provider?.options['blockNumber']})
+    })    
   }
 
   // TODO: is still here because of the plugin API
@@ -63,13 +68,9 @@ class VMProvider {
     this.RemixSimulatorProvider.Accounts.newAccount(cb)
   }
 
-  getBalanceInEther (address, cb) {
-    this.web3.eth.getBalance(address, (err, res) => {
-      if (err) {
-        return cb(err)
-      }
-      cb(null, Web3.utils.fromWei(new BN(res).toString(10), 'ether'))
-    })
+  async getBalanceInEther (address) {
+    const balance = await this.web3.eth.getBalance(address)
+    return Web3.utils.fromWei(new BN(balance).toString(10), 'ether')
   }
 
   getGasPrice (cb) {

apps/remix-ide/webpack.config.js

@@ -96,5 +96,9 @@ module.exports = composePlugins(withNx(), withReact(), (config) => {
     new CssMinimizerPlugin(),
   ];
 
+  config.watchOptions = {
+    ignored: /node_modules/
+  }
+
   return config;
 });

apps/solidity-compiler/webpack.config.js

@@ -89,5 +89,9 @@ module.exports = composePlugins(withNx(), withReact(), (config) => {
     new CssMinimizerPlugin(),
   ];
 
+  config.watchOptions = {
+    ignored: /node_modules/
+  }
+
   return config;
 });

apps/vyper/webpack.config.js

@@ -79,5 +79,9 @@ module.exports = composePlugins(withNx(), (config) => {
     new CssMinimizerPlugin(),
   ];
 
+  config.watchOptions = {
+    ignored: /node_modules/
+  }
+
   return config;
 });

libs/remix-core-plugin/src/lib/compiler-fetch-and-compile.ts

@@ -134,7 +134,18 @@ export class FetchAndCompile extends Plugin {
     if (!data) {
       setTimeout(_ => this.emit('notFound', contractAddress), 0)
       this.unresolvedAddresses.push(contractAddress)
-      return localCompilation()
+      const compilation = await localCompilation()
+      if (compilation) {
+        let found = false
+        compilation.visitContracts((contract) => {
+          found = util.compareByteCode(codeAtAddress, '0x' + contract.object.evm.deployedBytecode.object)
+          return found
+        })
+        if (found) {
+          await this.call('compilerArtefacts', 'addResolvedContract', contractAddress, compilation)
+          return compilation
+        }
+      }
     }
     const { settings, compilationTargets } = data
    

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

@@ -3,17 +3,14 @@ import { RunTab } from "../types/run-tab"
 import { clearInstances, setAccount, setExecEnv } from "./actions"
 import { displayNotification, displayPopUp, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, setExternalEndpoint, setMatchPassphrase, setPassphrase } from "./payload"
 
-export const updateAccountBalances = (plugin: RunTab, dispatch: React.Dispatch<any>) => {
+export const updateAccountBalances = async (plugin: RunTab, dispatch: React.Dispatch<any>) => {
   const accounts = plugin.REACT_API.accounts.loadedAccounts
 
-  Object.keys(accounts).map((value) => {
-    plugin.blockchain.getBalanceInEther(value, (err, balance) => {
-      if (err) return
-      const updated = shortenAddress(value, balance)
-
-      accounts[value] = updated
-    })
-  })
+  for (const account of Object.keys(accounts)) {
+    const balance = await plugin.blockchain.getBalanceInEther(account)
+    const updated = shortenAddress(account, balance)
+    accounts[account] = updated
+  }
   dispatch(fetchAccountsListSuccess(accounts))
 }
 
@@ -31,17 +28,10 @@ export const fillAccountsList = async (plugin: RunTab, dispatch: React.Dispatch<
       // - all the promises resolve
       // - at least one reject
       // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
-      await (Promise as any).all(accounts.map((account) => {
-        return new Promise((resolve, reject) => {
-          plugin.blockchain.getBalanceInEther(account, (err, balance) => {
-            if (err) return reject(err)
-            const updated = shortenAddress(account, balance)
-
-            loadedAccounts[account] = updated
-            resolve(account)
-          })
-        })
-      }))
+      for (const account of accounts) {
+        const balance = await plugin.blockchain.getBalanceInEther(account)
+        loadedAccounts[account] =  shortenAddress(account, balance)
+      }     
       const provider = plugin.blockchain.getProvider()
 
       if (provider === 'injected') {
@@ -59,6 +49,7 @@ export const fillAccountsList = async (plugin: RunTab, dispatch: React.Dispatch<
 }
 
 export const setFinalContext = (plugin: RunTab, dispatch: React.Dispatch<any>) => {
+  dispatch(fetchAccountsListRequest())
   // set the final context. Cause it is possible that this is not the one we've originaly selected
   const value = _getProviderDropdownValue(plugin)
 

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

@@ -6,7 +6,7 @@ import { SolcInput, SolcOutput } from "@openzeppelin/upgrades-core"
 // Used direct path to UpgradeableContract class to fix cyclic dependency error from @openzeppelin/upgrades-core library
 import { UpgradeableContract } from '../../../../../../node_modules/@openzeppelin/upgrades-core/dist/standalone'
 import { DeployMode, MainnetPrompt } from "../types"
-import { displayNotification, displayPopUp, fetchProxyDeploymentsSuccess, setDecodedResponse } from "./payload"
+import { displayNotification, displayPopUp, fetchProxyDeploymentsSuccess, setDecodedResponse, updateInstancesBalance } from "./payload"
 import { addInstance } from "./actions"
 import { addressToString, logBuilder } from "@remix-ui/helper"
 import Web3 from "web3"
@@ -318,14 +318,15 @@ export const getFuncABIInputs = (plugin: RunTab, funcABI: FuncABI) => {
   return plugin.blockchain.getInputs(funcABI)
 }
 
-export const updateInstanceBalance = (plugin: RunTab) => {
+export const updateInstanceBalance = async (plugin: RunTab, dispatch: React.Dispatch<any>) => {
   if (plugin.REACT_API?.instances?.instanceList?.length) {
-    for (const instance of plugin.REACT_API.instances.instanceList) {
-      plugin.blockchain.getBalanceInEther(instance.address, (err, balInEth) => {
-        if (!err) instance.balance = balInEth
-      })
+    const instances = plugin.REACT_API?.instances?.instanceList
+    for (const instance of instances) {
+      const balInEth = await plugin.blockchain.getBalanceInEther(instance.address)
+      instance.balance = balInEth
     }
-  }
+    dispatch(updateInstanceBalance(instances, dispatch))
+  } 
 }
 
 export const isValidContractAddress = async (plugin: RunTab, address: string) => {

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

@@ -1,13 +1,15 @@
 import { envChangeNotification } from "@remix-ui/helper"
 import { RunTab } from "../types/run-tab"
-import { setExecutionContext, setFinalContext, updateAccountBalances } from "./account"
+import { setExecutionContext, setFinalContext, updateAccountBalances, fillAccountsList } from "./account"
 import { addExternalProvider, addInstance, addNewProxyDeployment, removeExternalProvider, setNetworkNameFromProvider } from "./actions"
-import { addDeployOption, clearAllInstances, clearRecorderCount, fetchContractListSuccess, resetProxyDeployments, resetUdapp, setCurrentContract, setCurrentFile, setLoadType, setRecorderCount, setRemixDActivated, setSendValue } from "./payload"
+import { addDeployOption, clearAllInstances, clearRecorderCount, fetchContractListSuccess, resetProxyDeployments, resetUdapp, setCurrentContract, setCurrentFile, setLoadType, setRecorderCount, setRemixDActivated, setSendValue, fetchAccountsListSuccess } from "./payload"
+import { updateInstanceBalance } from './deploy'
 import { CompilerAbstract } from '@remix-project/remix-solidity'
 import BN from 'bn.js'
 import Web3 from 'web3'
 import { Plugin } from "@remixproject/engine"
 import { getNetworkProxyAddresses } from "./deploy"
+import { shortenAddress } from "@remix-ui/helper"
 
 const _paq = window._paq = window._paq || []
 
@@ -20,12 +22,15 @@ export const setupEvents = (plugin: RunTab, dispatch: React.Dispatch<any>) => {
     if (!lookupOnly) dispatch(setSendValue('0'))
     if (error) return
     updateAccountBalances(plugin, dispatch)
+    updateInstanceBalance(plugin, dispatch)
   })
 
-  plugin.blockchain.event.register('contextChanged', (context, silent) => {
+  plugin.blockchain.event.register('contextChanged', (context) => {
     dispatch(resetProxyDeployments())
     if (!context.startsWith('vm')) getNetworkProxyAddresses(plugin, dispatch)
     setFinalContext(plugin, dispatch)
+    fillAccountsList(plugin, dispatch)
+    updateAccountBalances(plugin, dispatch)
   })
 
   plugin.blockchain.event.register('networkStatus', ({ error, network }) => {
@@ -117,6 +122,17 @@ export const setupEvents = (plugin: RunTab, dispatch: React.Dispatch<any>) => {
   plugin.event.register('cleared', () => {
     dispatch(clearRecorderCount())
   })
+
+  plugin.on('injected', 'accountsChanged', (accounts: Array<string>) => {
+    const accountsMap = {}
+    accounts.map(account => { accountsMap[account] = shortenAddress(account, '0')})
+    dispatch(fetchAccountsListSuccess(accountsMap))
+  })
+
+  setInterval(() => {
+    fillAccountsList(plugin, dispatch)
+    updateInstanceBalance(plugin, dispatch)
+  }, 30000)  
 }
 
 const broadcastCompilationResult = async (compilerName: string, plugin: RunTab, dispatch: React.Dispatch<any>, file, source, languageVersion, data, input?) => {

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

@@ -2,7 +2,7 @@
 import React from 'react'
 import { RunTab } from '../types/run-tab'
 import { resetAndInit, setupEvents } from './events'
-import { createNewBlockchainAccount, fillAccountsList, setExecutionContext, signMessageWithAddress } from './account'
+import { createNewBlockchainAccount, setExecutionContext, signMessageWithAddress } from './account'
 import { clearInstances, clearPopUp, removeInstance, setAccount, setGasFee, setMatchPassphrasePrompt, 
   setNetworkNameFromProvider, setPassphrasePrompt, setSelectedContract, setSendTransactionValue, setUnit, 
   updateBaseFeePerGas, updateConfirmSettings, updateGasPrice, updateGasPriceStatus, updateMaxFee, updateMaxPriorityFee, updateScenarioPath } from './actions'
@@ -25,12 +25,8 @@ let plugin: RunTab, dispatch: React.Dispatch<any>
 export const initRunTab = (udapp: RunTab) => async (reducerDispatch: React.Dispatch<any>) => {
   plugin = udapp
   dispatch = reducerDispatch
+  setupEvents(plugin, dispatch)  
   resetAndInit(plugin)
-  setupEvents(plugin, dispatch)
-  setInterval(() => {
-    fillAccountsList(plugin, dispatch)
-    updateInstanceBalance(plugin)
-  }, 1000)
 }
 
 export const setAccountAddress = (account: string) => setAccount(dispatch, account)

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

@@ -1,5 +1,5 @@
 import { ContractData } from '@remix-project/core-plugin'
-import { ADD_DEPLOY_OPTION, ADD_INSTANCE, ADD_PROVIDER, CLEAR_INSTANCES, CLEAR_RECORDER_COUNT, DISPLAY_NOTIFICATION, DISPLAY_POPUP_MESSAGE, FETCH_ACCOUNTS_LIST_FAILED, FETCH_ACCOUNTS_LIST_REQUEST, FETCH_ACCOUNTS_LIST_SUCCESS, FETCH_CONTRACT_LIST_FAILED, FETCH_CONTRACT_LIST_REQUEST, FETCH_CONTRACT_LIST_SUCCESS, HIDE_NOTIFICATION, HIDE_POPUP_MESSAGE, REMOVE_DEPLOY_OPTION, REMOVE_INSTANCE, REMOVE_PROVIDER, RESET_STATE, SET_BASE_FEE_PER_GAS, SET_CONFIRM_SETTINGS, SET_CURRENT_CONTRACT, SET_CURRENT_FILE, SET_DECODED_RESPONSE, SET_DEPLOY_OPTIONS, SET_EXECUTION_ENVIRONMENT, SET_EXTERNAL_WEB3_ENDPOINT, SET_GAS_LIMIT, SET_GAS_PRICE, SET_GAS_PRICE_STATUS, SET_IPFS_CHECKED_STATE, SET_LOAD_TYPE, SET_MATCH_PASSPHRASE, SET_MAX_FEE, SET_MAX_PRIORITY_FEE, SET_NETWORK_NAME, SET_PASSPHRASE, SET_PATH_TO_SCENARIO, SET_PERSONAL_MODE, SET_RECORDER_COUNT, SET_SELECTED_ACCOUNT, SET_SEND_UNIT, SET_SEND_VALUE, SET_REMIXD_ACTIVATED, FETCH_PROXY_DEPLOYMENTS, NEW_PROXY_DEPLOYMENT, RESET_PROXY_DEPLOYMENTS } from '../constants'
+import { ADD_DEPLOY_OPTION, ADD_INSTANCE, UPDATE_INSTANCES_BALANCE, ADD_PROVIDER, CLEAR_INSTANCES, CLEAR_RECORDER_COUNT, DISPLAY_NOTIFICATION, DISPLAY_POPUP_MESSAGE, FETCH_ACCOUNTS_LIST_FAILED, FETCH_ACCOUNTS_LIST_REQUEST, FETCH_ACCOUNTS_LIST_SUCCESS, FETCH_CONTRACT_LIST_FAILED, FETCH_CONTRACT_LIST_REQUEST, FETCH_CONTRACT_LIST_SUCCESS, HIDE_NOTIFICATION, HIDE_POPUP_MESSAGE, REMOVE_DEPLOY_OPTION, REMOVE_INSTANCE, REMOVE_PROVIDER, RESET_STATE, SET_BASE_FEE_PER_GAS, SET_CONFIRM_SETTINGS, SET_CURRENT_CONTRACT, SET_CURRENT_FILE, SET_DECODED_RESPONSE, SET_DEPLOY_OPTIONS, SET_EXECUTION_ENVIRONMENT, SET_EXTERNAL_WEB3_ENDPOINT, SET_GAS_LIMIT, SET_GAS_PRICE, SET_GAS_PRICE_STATUS, SET_IPFS_CHECKED_STATE, SET_LOAD_TYPE, SET_MATCH_PASSPHRASE, SET_MAX_FEE, SET_MAX_PRIORITY_FEE, SET_NETWORK_NAME, SET_PASSPHRASE, SET_PATH_TO_SCENARIO, SET_PERSONAL_MODE, SET_RECORDER_COUNT, SET_SELECTED_ACCOUNT, SET_SEND_UNIT, SET_SEND_VALUE, SET_REMIXD_ACTIVATED, FETCH_PROXY_DEPLOYMENTS, NEW_PROXY_DEPLOYMENT, RESET_PROXY_DEPLOYMENTS } from '../constants'
 import { ContractList, DeployOptions } from '../types'
 
 export const fetchAccountsListRequest = () => {
@@ -216,6 +216,13 @@ export const setGasPrice = (price: string) => {
   }
 }
 
+export const updateInstancesBalance = (instances: Array<{ contractData?: ContractData, address: string, name: string, abi?: any }>) => {
+  return {
+    type: UPDATE_INSTANCES_BALANCE,
+    payload: instances
+  }
+}
+
 export const addNewInstance = (instance: { contractData?: ContractData, address: string, name: string, abi?: any }) => {
   return {
     type: ADD_INSTANCE,

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

@@ -154,6 +154,7 @@ export function AccountUI (props: AccountProps) {
             <i id="remixRunPlus" className={`fas fa-plus-circle udapp_icon ${plusOpt.classList}`} aria-hidden="true" onClick={newAccount}></i>
           </span>
         </CustomTooltip>
+        { props.accounts.isRequesting && <i className="fa fa-spinner fa-pulse ml-2" aria-hidden="true"></i> }
       </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) => { props.setAccount(e.target.value) }}>

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

@@ -33,6 +33,7 @@ export const SET_MAX_PRIORITY_FEE = 'SET_MAX_PRIORITY_FEE'
 export const SET_BASE_FEE_PER_GAS = 'SET_BASE_FEE_PER_GAS'
 export const SET_GAS_PRICE = 'SET_GAS_PRICE'
 export const ADD_INSTANCE = 'ADD_INSTANCE'
+export const UPDATE_INSTANCES_BALANCE = 'UPDATE_INSTANCES_BALANCE'
 export const REMOVE_INSTANCE = 'REMOVE_INSTANCE'
 export const CLEAR_INSTANCES = 'CLEAR_INSTANCES'
 export const SET_DECODED_RESPONSE = 'SET_DECODED_RESPONSE'

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

@@ -1,6 +1,6 @@
 import { ContractData } from '@remix-project/core-plugin'
 import { ContractList, DeployOptions, RunTabState } from '../types'
-import { ADD_INSTANCE, ADD_PROVIDER, CLEAR_INSTANCES, CLEAR_RECORDER_COUNT, DISPLAY_NOTIFICATION, DISPLAY_POPUP_MESSAGE, FETCH_ACCOUNTS_LIST_FAILED, FETCH_ACCOUNTS_LIST_REQUEST, FETCH_ACCOUNTS_LIST_SUCCESS, FETCH_CONTRACT_LIST_FAILED, FETCH_CONTRACT_LIST_REQUEST, FETCH_CONTRACT_LIST_SUCCESS, FETCH_PROVIDER_LIST_FAILED, FETCH_PROVIDER_LIST_REQUEST, FETCH_PROVIDER_LIST_SUCCESS, HIDE_NOTIFICATION, HIDE_POPUP_MESSAGE, REMOVE_INSTANCE, REMOVE_PROVIDER, RESET_STATE, SET_BASE_FEE_PER_GAS, SET_CONFIRM_SETTINGS, SET_CURRENT_CONTRACT, SET_CURRENT_FILE, SET_DECODED_RESPONSE, SET_DEPLOY_OPTIONS, SET_EXECUTION_ENVIRONMENT, SET_EXTERNAL_WEB3_ENDPOINT, SET_GAS_LIMIT, SET_GAS_PRICE, SET_GAS_PRICE_STATUS, SET_IPFS_CHECKED_STATE, SET_LOAD_TYPE, SET_MATCH_PASSPHRASE, SET_MAX_FEE, SET_MAX_PRIORITY_FEE, SET_NETWORK_NAME, SET_PASSPHRASE, SET_PATH_TO_SCENARIO, SET_PERSONAL_MODE, SET_RECORDER_COUNT, SET_SELECTED_ACCOUNT, SET_SEND_UNIT, SET_SEND_VALUE, ADD_DEPLOY_OPTION, REMOVE_DEPLOY_OPTION, SET_REMIXD_ACTIVATED, FETCH_PROXY_DEPLOYMENTS, NEW_PROXY_DEPLOYMENT, RESET_PROXY_DEPLOYMENTS } from '../constants'
+import { ADD_INSTANCE, UPDATE_INSTANCES_BALANCE, ADD_PROVIDER, CLEAR_INSTANCES, CLEAR_RECORDER_COUNT, DISPLAY_NOTIFICATION, DISPLAY_POPUP_MESSAGE, FETCH_ACCOUNTS_LIST_FAILED, FETCH_ACCOUNTS_LIST_REQUEST, FETCH_ACCOUNTS_LIST_SUCCESS, FETCH_CONTRACT_LIST_FAILED, FETCH_CONTRACT_LIST_REQUEST, FETCH_CONTRACT_LIST_SUCCESS, FETCH_PROVIDER_LIST_FAILED, FETCH_PROVIDER_LIST_REQUEST, FETCH_PROVIDER_LIST_SUCCESS, HIDE_NOTIFICATION, HIDE_POPUP_MESSAGE, REMOVE_INSTANCE, REMOVE_PROVIDER, RESET_STATE, SET_BASE_FEE_PER_GAS, SET_CONFIRM_SETTINGS, SET_CURRENT_CONTRACT, SET_CURRENT_FILE, SET_DECODED_RESPONSE, SET_DEPLOY_OPTIONS, SET_EXECUTION_ENVIRONMENT, SET_EXTERNAL_WEB3_ENDPOINT, SET_GAS_LIMIT, SET_GAS_PRICE, SET_GAS_PRICE_STATUS, SET_IPFS_CHECKED_STATE, SET_LOAD_TYPE, SET_MATCH_PASSPHRASE, SET_MAX_FEE, SET_MAX_PRIORITY_FEE, SET_NETWORK_NAME, SET_PASSPHRASE, SET_PATH_TO_SCENARIO, SET_PERSONAL_MODE, SET_RECORDER_COUNT, SET_SELECTED_ACCOUNT, SET_SEND_UNIT, SET_SEND_VALUE, ADD_DEPLOY_OPTION, REMOVE_DEPLOY_OPTION, SET_REMIXD_ACTIVATED, FETCH_PROXY_DEPLOYMENTS, NEW_PROXY_DEPLOYMENT, RESET_PROXY_DEPLOYMENTS } from '../constants'
 
 declare const window: any
 interface Action {
@@ -487,6 +487,18 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
       }
     }
 
+    case UPDATE_INSTANCES_BALANCE: {
+      const payload: Array<{ contractData: ContractData, address: string, balance: number, name: string, abi?: any, decodedResponse?: Record<number, any> }> = action.payload
+
+      return {
+        ...state,
+        instances: {
+          ...state.instances,
+          instanceList: payload
+        }
+      }
+    }
+
     case REMOVE_INSTANCE: {
       const payload: number = action.payload
 

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

@@ -60,7 +60,7 @@ export class Blockchain extends Plugin<any, any> {
     removeProvider(name: any): void;
     /** Listen on New Transaction. (Cannot be done inside constructor because txlistener doesn't exist yet) */
     startListening(txlistener: any): void;
-    resetEnvironment(): void;
+    resetEnvironment(): Promise<void>;
     /**
      * Create a VM Account
      * @param {{privateKey: string, balance: string}} newAccount The new account to create
@@ -71,7 +71,7 @@ export class Blockchain extends Plugin<any, any> {
     }): any;
     newAccount(_password: any, passwordPromptCb: any, cb: any): any;
     /** Get the balance of an address, and convert wei to ether */
-    getBalanceInEther(address: any, cb: any): void;
+    getBalanceInEther(address: any): Promise<string>;
     pendingTransactionsCount(): number;
     /**
      * This function send a tx only to Remix VM or testnet, will return an error for the mainnet

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

@@ -4,8 +4,8 @@ declare class InjectedProvider {
     executionContext: any;
     getAccounts(cb: any): any;
     newAccount(passwordPromptCb: any, cb: any): void;
-    resetEnvironment(): void;
-    getBalanceInEther(address: any, cb: any): void;
+    resetEnvironment(): Promise<void>;
+    getBalanceInEther(address: any): Promise<string>;
     getGasPrice(cb: any): void;
     signMessage(message: any, account: any, _passphrase: any, cb: any): void;
     getProvider(): string;

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

@@ -5,8 +5,8 @@ declare class NodeProvider {
     config: any;
     getAccounts(cb: any): any;
     newAccount(passwordPromptCb: any, cb: any): any;
-    resetEnvironment(): void;
-    getBalanceInEther(address: any, cb: any): void;
+    resetEnvironment(): Promise<void>;
+    getBalanceInEther(address: any): Promise<string>;
     getGasPrice(cb: any): void;
     signMessage(message: any, account: any, passphrase: any, cb: any): void;
     getProvider(): any;

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

@@ -3,13 +3,13 @@ declare class VMProvider {
     constructor(executionContext: any);
     executionContext: any;
     getAccounts(cb: any): void;
-    resetEnvironment(): void;
+    resetEnvironment(): Promise<void>;
     accounts: any;
     RemixSimulatorProvider: any;
     web3: any;
     createVMAccount(newAccount: any): string;
     newAccount(_passwordPromptCb: any, cb: any): void;
-    getBalanceInEther(address: any, cb: any): void;
+    getBalanceInEther(address: any): Promise<string>;
     getGasPrice(cb: any): void;
     signMessage(message: any, account: any, _passphrase: any, cb: any): void;
     getProvider(): string;