Set account & env (#864)

fix https://github.com/ethereum/remix-project/issues/793

apps/remix-ide/src/app.js

@@ -41,7 +41,6 @@ var CompilerMetadata = require('./app/files/compiler-metadata')
 var CompilerImport = require('./app/compiler/compiler-imports')
 
 const Blockchain = require('./blockchain/blockchain.js')
-const PluginUDapp = require('./blockchain/pluginUDapp.js')
 
 const PluginManagerComponent = require('./app/components/plugin-manager-component')
 const CompilersArtefacts = require('./app/compiler/compiler-artefacts')
@@ -256,7 +255,6 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   const contentImport = new CompilerImport(fileManager)
 
   const blockchain = new Blockchain(registry.get('config').api)
-  const pluginUdapp = new PluginUDapp(blockchain)
 
   // ----------------- compilation metadata generation service ---------
   const compilerMetadataGenerator = new CompilerMetadata(blockchain, fileManager, registry.get('config').api)
@@ -357,7 +355,6 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   )
   const run = new RunTab(
     blockchain,
-    pluginUdapp,
     registry.get('config').api,
     registry.get('filemanager').api,
     registry.get('editor').api,

apps/remix-ide/src/app/tabs/runTab/settings.js

@@ -215,21 +215,25 @@ class SettingsUI {
 
     selectExEnv.addEventListener('change', (event) => {
       const context = selectExEnv.options[selectExEnv.selectedIndex].value
-      this.blockchain.changeExecutionContext(context, () => {
-        modalDialogCustom.prompt('External node request', this.web3ProviderDialogBody(), 'http://127.0.0.1:8545', (target) => {
-          this.blockchain.setProviderFromEndpoint(target, context, (alertMsg) => {
-            if (alertMsg) addTooltip(alertMsg)
-            this.setFinalContext()
-          })
-        }, this.setFinalContext.bind(this))
-      }, (alertMsg) => {
-        addTooltip(alertMsg)
-      }, this.setFinalContext.bind(this))
+      this.setExecutionContext(context)
     })
 
     selectExEnv.value = this.blockchain.getProvider()
   }
 
+  setExecutionContext (context) {
+    this.blockchain.changeExecutionContext(context, () => {
+      modalDialogCustom.prompt('External node request', this.web3ProviderDialogBody(), 'http://127.0.0.1:8545', (target) => {
+        this.blockchain.setProviderFromEndpoint(target, context, (alertMsg) => {
+          if (alertMsg) addTooltip(alertMsg)
+          this.setFinalContext()
+        })
+      }, this.setFinalContext.bind(this))
+    }, (alertMsg) => {
+      addTooltip(alertMsg)
+    }, this.setFinalContext.bind(this))
+  }
+
   web3ProviderDialogBody () {
     const thePath = '<path/to/local/folder/for/test/chain>'
 
@@ -319,6 +323,14 @@ class SettingsUI {
     )
   }
 
+  getSelectedAccount () {
+    return this.el.querySelector('#txorigin').selectedOptions[0].value
+  }
+
+  getEnvironment () {
+    return this.blockchain.getProvider()
+  }
+
   signMessage () {
     this.blockchain.getAccounts((err, accounts) => {
       if (err) {

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

@@ -1,4 +1,4 @@
-import { LibraryPlugin } from '@remixproject/engine'
+import { ViewPlugin } from '@remixproject/engine-web'
 import * as packageJson from '../../../../../package.json'
 
 const $ = require('jquery')
@@ -14,6 +14,7 @@ const Recorder = require('../tabs/runTab/model/recorder.js')
 const RecorderUI = require('../tabs/runTab/recorder.js')
 const DropdownLogic = require('../tabs/runTab/model/dropdownlogic.js')
 const ContractDropdownUI = require('../tabs/runTab/contractDropdown.js')
+const toaster = require('../ui/tooltip')
 
 const UniversalDAppUI = require('../ui/universal-dapp-ui')
 
@@ -28,12 +29,12 @@ const profile = {
   version: packageJson.version,
   permission: true,
   events: ['newTransaction'],
-  methods: ['createVMAccount', 'sendTransaction', 'getAccounts', 'pendingTransactionsCount']
+  methods: ['createVMAccount', 'sendTransaction', 'getAccounts', 'pendingTransactionsCount', 'getSettings', 'setEnvironmentMode']
 }
 
-export class RunTab extends LibraryPlugin {
-  constructor (blockchain, pluginUDapp, config, fileManager, editor, filePanel, compilersArtefacts, networkModule, mainView, fileProvider) {
-    super(pluginUDapp, profile)
+export class RunTab extends ViewPlugin {
+  constructor (blockchain, config, fileManager, editor, filePanel, compilersArtefacts, networkModule, mainView, fileProvider) {
+    super(profile)
     this.event = new EventManager()
     this.config = config
     this.blockchain = blockchain
@@ -44,6 +45,61 @@ export class RunTab extends LibraryPlugin {
     this.compilersArtefacts = compilersArtefacts
     this.networkModule = networkModule
     this.fileProvider = fileProvider
+    this.setupEvents()
+  }
+
+  setupEvents () {
+    this.blockchain.events.on('newTransaction', (tx, receipt) => {
+      this.emit('newTransaction', tx, receipt)
+    })
+  }
+
+  getSettings () {
+    return new Promise((resolve, reject) => {
+      if (!this.container) reject(new Error('UI not ready'))
+      else {
+        resolve({
+          selectedAccount: this.settingsUI.getSelectedAccount(),
+          selectedEnvMode: this.blockchain.getProvider(),
+          networkEnvironment: this.container.querySelector('*[data-id="settingsNetworkEnv"]').textContent
+        }
+        )
+      }
+    })
+  }
+
+  async setEnvironmentMode (env) {
+    const canCall = await this.askUserPermission('setEnvironmentMode', 'change the environment used')
+    if (canCall) {
+      toaster(yo`
+        <div>
+          <i class="fas fa-exclamation-triangle text-danger mr-1"></i>
+          <span>
+            ${this.currentRequest.from}
+            <span class="font-weight-bold text-warning">
+              is changing your environment to
+            </span> ${env}
+          </span>
+        </div>
+      `, '', { time: 3000 })
+      this.settingsUI.setExecutionContext(env)
+    }
+  }
+
+  createVMAccount (newAccount) {
+    return this.blockchain.createVMAccount(newAccount)
+  }
+
+  sendTransaction (tx) {
+    return this.blockchain.sendTransaction(tx)
+  }
+
+  getAccounts (cb) {
+    return this.blockchain.getAccounts(cb)
+  }
+
+  pendingTransactionsCount () {
+    return this.blockchain.pendingTransactionsCount()
   }
 
   renderContainer () {

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

@@ -1,33 +0,0 @@
-const { EventEmitter } = require('events')
-
-class PluginUdapp {
-  constructor (blockchain) {
-    this.blockchain = blockchain
-    this.events = new EventEmitter()
-    this.setupEvents()
-  }
-
-  setupEvents () {
-    this.blockchain.events.on('newTransaction', (tx, receipt) => {
-      this.events.emit('newTransaction', tx, receipt)
-    })
-  }
-
-  createVMAccount (newAccount) {
-    return this.blockchain.createVMAccount(newAccount)
-  }
-
-  sendTransaction (tx) {
-    return this.blockchain.sendTransaction(tx)
-  }
-
-  getAccounts (cb) {
-    return this.blockchain.getAccounts(cb)
-  }
-
-  pendingTransactionsCount () {
-    return this.blockchain.pendingTransactionsCount()
-  }
-}
-
-module.exports = PluginUdapp