Merge branch 'master' of https://github.com/ethereum/remix-project into panels

apps/remix-ide/src/app.js

@@ -18,11 +18,12 @@ import { WalkthroughService } from './walkthroughService'
 import { OffsetToLineColumnConverter, CompilerMetadata, CompilerArtefacts, FetchAndCompile, CompilerImports, EditorContextListener } from '@remix-project/core-plugin'
 
 import migrateFileSystem from './migrateFileSystem'
+import Registry from './app/state/registry'
+import { ConfigPlugin } from './app/plugins/config'
 
 const isElectron = require('is-electron')
 
 const remixLib = require('@remix-project/remix-lib')
-const registry = require('./global/registry')
 
 const QueryParams = require('./lib/query-params')
 const Storage = remixLib.Storage
@@ -50,28 +51,28 @@ const Editor = require('./app/editor/editor')
 const Terminal = require('./app/panels/terminal')
 
 class AppComponent {
-  constructor (api = {}, events = {}, opts = {}) {
+  constructor () {
     const self = this
     self.appManager = new RemixAppManager({})
+    self.queryParams = new QueryParams()
     self._components = {}
-    self.registry = registry
     // setup storage
     const configStorage = new Storage('config-v0.8:')
 
     // load app config
     const config = new Config(configStorage)
-    registry.put({ api: config, name: 'config' })
+    Registry.getInstance().put({ api: config, name: 'config' })
 
     // load file system
     self._components.filesProviders = {}
     self._components.filesProviders.browser = new FileProvider('browser')
-    registry.put({ api: self._components.filesProviders.browser, name: 'fileproviders/browser' })
+    Registry.getInstance().put({ api: self._components.filesProviders.browser, name: 'fileproviders/browser' })
     self._components.filesProviders.localhost = new RemixDProvider(self.appManager)
-    registry.put({ api: self._components.filesProviders.localhost, name: 'fileproviders/localhost' })
+    Registry.getInstance().put({ api: self._components.filesProviders.localhost, name: 'fileproviders/localhost' })
     self._components.filesProviders.workspace = new WorkspaceFileProvider()
-    registry.put({ api: self._components.filesProviders.workspace, name: 'fileproviders/workspace' })
+    Registry.getInstance().put({ api: self._components.filesProviders.workspace, name: 'fileproviders/workspace' })
 
-    registry.put({ api: self._components.filesProviders, name: 'fileproviders' })
+    Registry.getInstance().put({ api: self._components.filesProviders, name: 'fileproviders' })
 
     migrateFileSystem(self._components.filesProviders.browser)
   }
@@ -90,7 +91,7 @@ class AppComponent {
       'remix-beta.ethereum.org': 25,
       'remix.ethereum.org': 23
     }
-    self.showMatamo = (matomoDomains[window.location.hostname] && !registry.get('config').api.exists('settings/matomo-analytics'))
+    self.showMatamo = (matomoDomains[window.location.hostname] && !Registry.getInstance().get('config').api.exists('settings/matomo-analytics'))
     self.walkthroughService = new WalkthroughService(appManager, self.showMatamo)
 
     const hosts = ['127.0.0.1:8080', '192.168.0.101:8080', 'localhost:8080']
@@ -104,30 +105,30 @@ class AppComponent {
 
     // SERVICES
     // ----------------- theme service ---------------------------------
-    self.themeModule = new ThemeModule(registry)
+    self.themeModule = new ThemeModule()
-    registry.put({ api: self.themeModule, name: 'themeModule' })
+    Registry.getInstance().put({ api: self.themeModule, name: 'themeModule' })
 
     // ----------------- editor service ----------------------------
     const editor = new Editor() // wrapper around ace editor
-    registry.put({ api: editor, name: 'editor' })
+    Registry.getInstance().put({ api: editor, name: 'editor' })
     editor.event.register('requiringToSaveCurrentfile', () => fileManager.saveCurrentFile())
 
     // ----------------- fileManager service ----------------------------
     const fileManager = new FileManager(editor, appManager)
-    registry.put({ api: fileManager, name: 'filemanager' })
+    Registry.getInstance().put({ api: fileManager, name: 'filemanager' })
     // ----------------- dGit provider ---------------------------------
     const dGitProvider = new DGitProvider()
 
     // ----------------- import content service ------------------------
     const contentImport = new CompilerImports()
 
-    const blockchain = new Blockchain(registry.get('config').api)
+    const blockchain = new Blockchain(Registry.getInstance().get('config').api)
 
     // ----------------- compilation metadata generation service ---------
     const compilerMetadataGenerator = new CompilerMetadata()
     // ----------------- compilation result service (can keep track of compilation results) ----------------------------
     const compilersArtefacts = new CompilerArtefacts() // store all the compilation results (key represent a compiler name)
-    registry.put({ api: compilersArtefacts, name: 'compilersartefacts' })
+    Registry.getInstance().put({ api: compilersArtefacts, name: 'compilersartefacts' })
 
     // service which fetch contract artifacts from sourve-verify, put artifacts in remix and compile it
     const fetchAndCompile = new FetchAndCompile()
@@ -138,7 +139,7 @@ class AppComponent {
     const hardhatProvider = new HardhatProvider(blockchain)
     // ----------------- convert offset to line/column service -----------
     const offsetToLineColumnConverter = new OffsetToLineColumnConverter()
-    registry.put({ api: offsetToLineColumnConverter, name: 'offsettolinecolumnconverter' })
+    Registry.getInstance().put({ api: offsetToLineColumnConverter, name: 'offsettolinecolumnconverter' })
 
     // -------------------Terminal----------------------------------------
     makeUdapp(blockchain, compilersArtefacts, (domEl) => terminal.logHtml(domEl))
@@ -157,7 +158,10 @@ class AppComponent {
     )
     const contextualListener = new EditorContextListener()
 
+    const configPlugin = new ConfigPlugin()
+
     self.engine.register([
+      configPlugin,
       blockchain,
       contentImport,
       self.themeModule,
@@ -179,7 +183,7 @@ class AppComponent {
     // LAYOUT & SYSTEM VIEWS
     const appPanel = new MainPanel()
     self.mainview = new MainView(contextualListener, editor, appPanel, fileManager, appManager, terminal)
-    registry.put({ api: self.mainview, name: 'mainview' })
+    Registry.getInstance().put({ api: self.mainview, name: 'mainview' })
 
     self.engine.register([
       appPanel,
@@ -195,7 +199,7 @@ class AppComponent {
     const filePanel = new FilePanel(appManager)
     const landingPage = new LandingPage(appManager, self.menuicons, fileManager, filePanel, contentImport)
     self.settings = new SettingsTab(
-      registry.get('config').api,
+      Registry.getInstance().get('config').api,
       editor,
       appManager
     )
@@ -211,22 +215,23 @@ class AppComponent {
     ])
 
     // CONTENT VIEWS & DEFAULT PLUGINS
-    const compileTab = new CompileTab(registry.get('config').api, registry.get('filemanager').api)
+    const compileTab = new CompileTab(Registry.getInstance().get('config').api, Registry.getInstance().get('filemanager').api)
     const run = new RunTab(
       blockchain,
-      registry.get('config').api,
+      Registry.getInstance().get('config').api,
-      registry.get('filemanager').api,
+      Registry.getInstance().get('filemanager').api,
-      registry.get('editor').api,
+      Registry.getInstance().get('editor').api,
       filePanel,
-      registry.get('compilersartefacts').api,
+      Registry.getInstance().get('compilersartefacts').api,
       networkModule,
-      registry.get('fileproviders/browser').api
+      self.mainview,
+      Registry.getInstance().get('fileproviders/browser').api
     )
-    const analysis = new AnalysisTab(registry)
+    const analysis = new AnalysisTab()
     const debug = new DebuggerTab()
     const test = new TestTab(
-      registry.get('filemanager').api,
+      Registry.getInstance().get('filemanager').api,
-      registry.get('offsettolinecolumnconverter').api,
+      Registry.getInstance().get('offsettolinecolumnconverter').api,
       filePanel,
       compileTab,
       appManager,
@@ -266,7 +271,7 @@ class AppComponent {
     await self.appManager.activatePlugin(['mainPanel', 'menuicons', 'tabs'])
     await self.appManager.activatePlugin(['sidePanel']) // activating  host plugin separately
     await self.appManager.activatePlugin(['home'])
-    await self.appManager.activatePlugin(['settings'])
+    await self.appManager.activatePlugin(['settings', 'config'])
     await self.appManager.activatePlugin(['hiddenPanel', 'pluginManager', 'contextualListener', 'terminal', 'blockchain', 'fetchAndCompile', 'contentImport'])
     await self.appManager.activatePlugin(['settings'])
     await self.appManager.activatePlugin(['walkthrough'])

apps/remix-ide/src/app/components/vertical-icons.js

@@ -5,8 +5,8 @@ import ReactDOM from 'react-dom'
 import React from 'react' // eslint-disable-line
 // eslint-disable-next-line no-unused-vars
 import { RemixUiVerticalIconsPanel } from '@remix-ui/vertical-icons-panel'
+import Registry from '../state/registry'
 // var helper = require('../../lib/helper')
-const globalRegistry = require('../../global/registry')
 const { Plugin } = require('@remixproject/engine')
 const EventEmitter = require('events')
 
@@ -32,7 +32,7 @@ export class VerticalIcons extends Plugin {
     this.defaultProfile = profile
     this.targetProfileForChange = {}
     this.targetProfileForRemoval = {}
-    this.registry = globalRegistry
+    this.registry = Registry.getInstance()
     this.keys = ['succeed', 'edited', 'none', 'loading', 'failed']
     this.types = ['error', 'warning', 'success', 'info', '']
   }

apps/remix-ide/src/app/editor/contextView.js

@@ -0,0 +1,194 @@
+'use strict'
+import { sourceMappingDecoder } from '@remix-project/remix-debug'
+import Registry from '../state/registry'
+const yo = require('yo-yo')
+
+const css = require('./styles/contextView-styles')
+
+/*
+  Display information about the current focused code:
+   - if it's a reference, display information about the declaration
+   - jump to the declaration
+   - number of references
+   - rename declaration/references
+*/
+class ContextView {
+  constructor (opts) {
+    this._components = {}
+    this._components.registry = Registry.getInstance()
+    this.contextualListener = opts.contextualListener
+    this.editor = opts.editor
+    this._deps = {
+      compilersArtefacts: this._components.registry.get('compilersartefacts').api,
+      offsetToLineColumnConverter: this._components.registry.get('offsettolinecolumnconverter').api,
+      config: this._components.registry.get('config').api,
+      fileManager: this._components.registry.get('filemanager').api
+    }
+    this._view = null
+    this._nodes = null
+    this._current = null
+    this.sourceMappingDecoder = sourceMappingDecoder
+    this.previousElement = null
+    this.contextualListener.event.register('contextChanged', nodes => {
+      this.show()
+      this._nodes = nodes
+      this.update()
+    })
+    this.contextualListener.event.register('stopHighlighting', () => {
+    })
+  }
+
+  render () {
+    const view = yo`
+      <div class="${css.contextview} ${css.contextviewcontainer} bg-light text-dark border-0">
+        <div class=${css.container}>
+          ${this._renderTarget()}
+        </div>
+      </div>`
+    if (!this._view) {
+      this._view = view
+    }
+    return view
+  }
+
+  hide () {
+    if (this._view) {
+      this._view.style.display = 'none'
+    }
+  }
+
+  show () {
+    if (this._view) {
+      this._view.style.display = 'block'
+    }
+  }
+
+  update () {
+    if (this._view) {
+      yo.update(this._view, this.render())
+    }
+  }
+
+  _renderTarget () {
+    let last
+    const previous = this._current
+    if (this._nodes && this._nodes.length) {
+      last = this._nodes[this._nodes.length - 1]
+      if (isDefinition(last)) {
+        this._current = last
+      } else {
+        const target = this.contextualListener.declarationOf(last)
+        if (target) {
+          this._current = target
+        } else {
+          this._current = null
+        }
+      }
+    }
+    if (!this._current || !previous || previous.id !== this._current.id || (this.previousElement && !this.previousElement.children.length)) {
+      this.previousElement = this._render(this._current, last)
+    }
+    return this.previousElement
+  }
+
+  _jumpToInternal (position) {
+    const jumpToLine = (lineColumn) => {
+      if (lineColumn.start && lineColumn.start.line && lineColumn.start.column) {
+        this.editor.gotoLine(lineColumn.start.line, lineColumn.end.column + 1)
+      }
+    }
+    const lastCompilationResult = this._deps.compilersArtefacts.__last
+    if (lastCompilationResult && lastCompilationResult.languageversion.indexOf('soljson') === 0 && lastCompilationResult.data) {
+      const lineColumn = this._deps.offsetToLineColumnConverter.offsetToLineColumn(
+        position,
+        position.file,
+        lastCompilationResult.getSourceCode().sources,
+        lastCompilationResult.getAsts())
+      const filename = lastCompilationResult.getSourceName(position.file)
+      // TODO: refactor with rendererAPI.errorClick
+      if (filename !== this._deps.config.get('currentFile')) {
+        const provider = this._deps.fileManager.fileProviderOf(filename)
+        if (provider) {
+          provider.exists(filename).then(exist => {
+            this._deps.fileManager.open(filename)
+            jumpToLine(lineColumn)
+          }).catch(error => {
+            if (error) return console.log(error)
+          })
+        }
+      } else {
+        jumpToLine(lineColumn)
+      }
+    }
+  }
+
+  _render (node, nodeAtCursorPosition) {
+    if (!node) return yo`<div></div>`
+    let references = this.contextualListener.referencesOf(node)
+    const type = node.typeDescriptions && node.typeDescriptions.typeString ? node.typeDescriptions.typeString : node.nodeType
+    references = `${references ? references.length : '0'} reference(s)`
+
+    let ref = 0
+    const nodes = this.contextualListener.getActiveHighlights()
+    for (const k in nodes) {
+      if (nodeAtCursorPosition.id === nodes[k].nodeId) {
+        ref = k
+        break
+      }
+    }
+
+    // JUMP BETWEEN REFERENCES
+    const jump = (e) => {
+      e.target.dataset.action === 'next' ? ref++ : ref--
+      if (ref < 0) ref = nodes.length - 1
+      if (ref >= nodes.length) ref = 0
+      this._jumpToInternal(nodes[ref].position)
+    }
+
+    const jumpTo = () => {
+      if (node && node.src) {
+        const position = this.sourceMappingDecoder.decode(node.src)
+        if (position) {
+          this._jumpToInternal(position)
+        }
+      }
+    }
+
+    const showGasEstimation = () => {
+      if (node.nodeType === 'FunctionDefinition') {
+        const result = this.contextualListener.gasEstimation(node)
+        const executionCost = ' Execution cost: ' + result.executionCost + ' gas'
+        const codeDepositCost = 'Code deposit cost: ' + result.codeDepositCost + ' gas'
+        const estimatedGas = result.codeDepositCost ? `${codeDepositCost}, ${executionCost}` : `${executionCost}`
+        return yo`
+          <div class=${css.gasEstimation}>
+            <i class="fas fa-gas-pump ${css.gasStationIcon}" title='Gas estimation'></i>
+            <span>${estimatedGas}</span>
+          </div>
+        `
+      }
+    }
+
+    return yo`
+      <div class=${css.line}>${showGasEstimation()}
+        <div title=${type} class=${css.type}>${type}</div>
+        <div title=${node.name} class=${css.name}>${node.name}</div>
+        <i class="fas fa-share ${css.jump}" aria-hidden="true" onclick=${jumpTo}></i>
+        <span class=${css.referencesnb}>${references}</span>
+        <i data-action='previous' class="fas fa-chevron-up ${css.jump}" aria-hidden="true" onclick=${jump}></i>
+        <i data-action='next' class="fas fa-chevron-down ${css.jump}" aria-hidden="true" onclick=${jump}></i>
+      </div>
+    `
+  }
+}
+
+function isDefinition (node) {
+  return node.nodeType === 'ContractDefinition' ||
+  node.nodeType === 'FunctionDefinition' ||
+  node.nodeType === 'ModifierDefinition' ||
+  node.nodeType === 'VariableDeclaration' ||
+  node.nodeType === 'StructDefinition' ||
+  node.nodeType === 'EventDefinition'
+}
+
+module.exports = ContextView

apps/remix-ide/src/app/files/fileManager.js

@@ -4,8 +4,8 @@ import yo from 'yo-yo'
 import async from 'async'
 import { Plugin } from '@remixproject/engine'
 import * as packageJson from '../../../../../package.json'
+import Registry from '../state/registry'
 const EventEmitter = require('events')
-const globalRegistry = require('../../global/registry')
 const toaster = require('../ui/tooltip')
 const modalDialogCustom = require('../ui/modal-dialog-custom')
 const helper = require('../../lib/helper.js')
@@ -44,7 +44,7 @@ class FileManager extends Plugin {
     this.events = new EventEmitter()
     this.editor = editor
     this._components = {}
-    this._components.registry = globalRegistry
+    this._components.registry = Registry.getInstance()
     this.appManager = appManager
     this.init()
   }

apps/remix-ide/src/app/panels/file-panel.js

@@ -4,11 +4,12 @@ import * as packageJson from '../../../../../package.json'
 import React from 'react' // eslint-disable-line
 import ReactDOM from 'react-dom'
 import { FileSystemProvider } from '@remix-ui/workspace' // eslint-disable-line
+import Registry from '../state/registry'
 const { RemixdHandle } = require('../files/remixd-handle.js')
 const { GitHandle } = require('../files/git-handle.js')
 const { HardhatHandle } = require('../files/hardhat-handle.js')
 const { SlitherHandle } = require('../files/slither-handle.js')
-const globalRegistry = require('../../global/registry')
+
 /*
   Overview of APIs:
    * fileManager: @args fileProviders (browser, shared-folder, swarm, github, etc ...) & config & editor
@@ -41,7 +42,7 @@ const profile = {
 module.exports = class Filepanel extends ViewPlugin {
   constructor (appManager) {
     super(profile)
-    this.registry = globalRegistry
+    this.registry = Registry.getInstance()
     this.fileProviders = this.registry.get('fileproviders').api
     this.fileManager = this.registry.get('filemanager').api
 

apps/remix-ide/src/app/panels/main-view.js

@@ -1,7 +1,8 @@
+import Registry from '../state/registry'
+
 var yo = require('yo-yo')
 var EventManager = require('../../lib/events')
 
-var globalRegistry = require('../../global/registry')
 var { TabProxy } = require('./tab-proxy.js')
 
 var csjs = require('csjs-inject')
@@ -22,12 +23,12 @@ export class MainView {
     self.event = new EventManager()
     self._view = {}
     self._components = {}
-    self._components.registry = globalRegistry
+    self._components.registry = Registry.getInstance()
     self.contextualListener = contextualListener
     self.editor = editor
     self.fileManager = fileManager
     self.mainPanel = mainPanel
-    self.txListener = globalRegistry.get('txlistener').api
+    self.txListener = Registry.getInstance().get('txlistener').api
     self._components.terminal = terminal
     this.appManager = appManager
     this.init()

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

@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom'
 import { RemixUiTerminal } from '@remix-ui/terminal' // eslint-disable-line
 import { Plugin } from '@remixproject/engine'
 import * as packageJson from '../../../../../package.json'
+import Registry from '../state/registry'
 const vm = require('vm')
 const EventManager = require('../../lib/events')
 
@@ -11,7 +12,7 @@ const CommandInterpreterAPI = require('../../lib/cmdInterpreterAPI')
 const AutoCompletePopup = require('../ui/auto-complete-popup')
 
 import { CompilerImports } from '@remix-project/core-plugin' // eslint-disable-line
-const globalRegistry = require('../../global/registry')
+
 const GistHandler = require('../../lib/gist-handler')
 
 const KONSOLES = []
@@ -33,7 +34,7 @@ class Terminal extends Plugin {
     this.fileImport = new CompilerImports()
     this.gistHandler = new GistHandler()
     this.event = new EventManager()
-    this.globalRegistry = globalRegistry
+    this.globalRegistry = Registry.getInstance()
     this.element = document.createElement('div')
     this.element.setAttribute('class', 'panel')
     this.element.setAttribute('id', 'terminal-view')
@@ -67,7 +68,7 @@ class Terminal extends Plugin {
     }
     this._view = { el: null, bar: null, input: null, term: null, journal: null, cli: null }
     this._components = {}
-    this._components.cmdInterpreter = new CommandInterpreterAPI(this, null, this.blockchain)
+    this._components.cmdInterpreter = new CommandInterpreterAPI(this, this.blockchain)
     this._components.autoCompletePopup = new AutoCompletePopup(this._opts)
     this._commands = {}
     this.commands = {}

apps/remix-ide/src/app/plugins/config.ts

@@ -0,0 +1,31 @@
+import { Plugin } from '@remixproject/engine'
+import QueryParams from '../../lib/query-params'
+import Registry from '../state/registry'
+
+const profile = {
+  name: 'config',
+  displayName: 'Config',
+  description: 'Config',
+  methods: ['getAppParameter', 'setAppParameter']
+}
+
+export class ConfigPlugin extends Plugin {
+  constructor () {
+    super(profile)
+  }
+
+  getAppParameter (name: string) {
+    const queryParams = new QueryParams()
+    const params = queryParams.get()
+    const config = Registry.getInstance().get('config').api
+    const param = params[name] ? params[name] : config.get(name)
+    if (param === 'true') return true
+    if (param === 'false') return false
+    return param
+  }
+
+  setAppParameter (name: string, value: any) {
+    const config = Registry.getInstance().get('config').api
+    config.set(name, value)
+  }
+}

apps/remix-ide/src/app/state/registry.ts

@@ -0,0 +1,38 @@
+type registryEntry = {
+    api: any,
+    name: string
+}
+
+export default class Registry {
+    private static instance: Registry;
+    private state: any
+
+    private constructor () {
+      this.state = {}
+    }
+
+    public static getInstance (): Registry {
+      if (!Registry.instance) {
+        Registry.instance = new Registry()
+      }
+
+      return Registry.instance
+    }
+
+    public put (entry: registryEntry) {
+      if (this.state[entry.name]) return this.state[entry.name]
+      const server = {
+      // uid: serveruid,
+        api: entry.api
+      }
+      this.state[entry.name] = { server }
+      return server
+    }
+
+    public get (name: string) {
+      const state = this.state[name]
+      if (!state) return
+      const server = state.server
+      return server
+    }
+}

apps/remix-ide/src/app/tabs/analysis-tab.js

@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom'
 import { EventEmitter } from 'events'
 import {RemixUiStaticAnalyser} from '@remix-ui/static-analyser' // eslint-disable-line
 import * as packageJson from '../../../../../package.json'
+import Registry from '../state/registry'
 var Renderer = require('../ui/renderer')
 
 var EventManager = require('../../lib/events')
@@ -22,11 +23,11 @@ const profile = {
 }
 
 class AnalysisTab extends ViewPlugin {
-  constructor (registry) {
+  constructor () {
     super(profile)
     this.event = new EventManager()
     this.events = new EventEmitter()
-    this.registry = registry
+    this.registry = Registry.getInstance()
     this.element = document.createElement('div')
     this.element.setAttribute('id', 'staticAnalyserView')
     this._components = {

apps/remix-ide/src/app/tabs/compile-tab.js

@@ -144,17 +144,12 @@ class CompileTab extends CompilerApiMixin(ViewPlugin) { // implements ICompilerA
     this.queryParams.update(params)
   }
 
-  getAppParameter (name) {
+  async getAppParameter (name) {
-    // first look in the URL params then in the local storage
+    return await this.call('config', 'getAppParameter', name)
-    const params = this.queryParams.get()
-    const param = params[name] ? params[name] : this.config.get(name)
-    if (param === 'true') return true
-    if (param === 'false') return false
-    return param
   }
 
-  setAppParameter (name, value) {
+  async setAppParameter (name, value) {
-    this.config.set(name, value)
+    await this.call('config', 'setAppParameter', name, value)
   }
 }
 

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

@@ -1,4 +1,5 @@
 import { BN } from 'ethereumjs-util'
+import Registry from '../../state/registry'
 const $ = require('jquery')
 const yo = require('yo-yo')
 const remixLib = require('@remix-project/remix-lib')
@@ -8,7 +9,6 @@ const copyToClipboard = require('../../ui/copy-to-clipboard')
 const modalDialogCustom = require('../../ui/modal-dialog-custom')
 const addTooltip = require('../../ui/tooltip')
 const helper = require('../../../lib/helper.js')
-const globalRegistry = require('../../../global/registry')
 
 class SettingsUI {
   constructor (blockchain, networkModule) {
@@ -22,10 +22,10 @@ class SettingsUI {
       this.updateAccountBalances()
     })
     this._components = {
-      registry: globalRegistry,
+      registry: Registry.getInstance(),
       networkModule: networkModule
     }
-    this._components.registry = globalRegistry
+    this._components.registry = Registry.getInstance()
     this._deps = {
       config: this._components.registry.get('config').api
     }

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

@@ -3,7 +3,7 @@ import { ViewPlugin } from '@remixproject/engine-web'
 import ReactDOM from 'react-dom'
 import * as packageJson from '../../../../../package.json'
 import { RemixUiSettings } from '@remix-ui/settings' //eslint-disable-line
-const globalRegistry = require('../../global/registry')
+import Registry from '../state/registry'
 
 const profile = {
   name: 'settings',
@@ -25,7 +25,7 @@ module.exports = class SettingsTab extends ViewPlugin {
     this.config = config
     this.editor = editor
     this._deps = {
-      themeModule: globalRegistry.get('themeModule').api
+      themeModule: Registry.getInstance().get('themeModule').api
     }
     this.element = document.createElement('div')
     this.element.setAttribute('id', 'settingsTab')

apps/remix-ide/src/app/tabs/theme-module.js

@@ -2,6 +2,7 @@ import { Plugin } from '@remixproject/engine'
 import { EventEmitter } from 'events'
 import QueryParams from '../../lib/query-params'
 import * as packageJson from '../../../../../package.json'
+import Registry from '../state/registry'
 const _paq = window._paq = window._paq || []
 
 const themes = [
@@ -26,11 +27,11 @@ const profile = {
 }
 
 export class ThemeModule extends Plugin {
-  constructor (registry) {
+  constructor () {
     super(profile)
     this.events = new EventEmitter()
     this._deps = {
-      config: registry.get('config').api
+      config: Registry.getInstance().get('config').api
     }
     this.themes = themes.reduce((acc, theme) => {
       theme.url = window.location.origin + window.location.pathname + theme.url

apps/remix-ide/src/app/udapp/make-udapp.js

@@ -1,4 +1,5 @@
-var registry = require('../../global/registry')
+import Registry from '../state/registry'
+
 var remixLib = require('@remix-project/remix-lib')
 var yo = require('yo-yo')
 var EventsDecoder = remixLib.execution.EventsDecoder
@@ -50,12 +51,12 @@ export function makeUdapp (blockchain, compilersArtefacts, logHtmlCallback) {
     }
   })
 
-  registry.put({ api: txlistener, name: 'txlistener' })
+  Registry.getInstance().put({ api: txlistener, name: 'txlistener' })
   blockchain.startListening(txlistener)
 
   const eventsDecoder = new EventsDecoder({
     resolveReceipt: transactionReceiptResolver
   })
   txlistener.startListening()
-  registry.put({ api: eventsDecoder, name: 'eventsDecoder' })
+  Registry.getInstance().put({ api: eventsDecoder, name: 'eventsDecoder' })
 }

apps/remix-ide/src/app/ui/persmission-handler.js

@@ -1,9 +1,10 @@
+import Registry from '../state/registry'
+
 /* global localStorage */
 const yo = require('yo-yo')
 const csjs = require('csjs-inject')
 const addTooltip = require('./tooltip')
 const modalDialog = require('./modaldialog')
-const globalRegistry = require('../../global/registry')
 
 const css = csjs`
 .permission h4 {
@@ -167,8 +168,8 @@ export class PermissionHandler {
       </article>
     `
 
-    globalRegistry.get('themeModule').api.fixInvert(imgFrom)
+    Registry.getInstance().get('themeModule').api.fixInvert(imgFrom)
-    globalRegistry.get('themeModule').api.fixInvert(imgTo)
+    Registry.getInstance().get('themeModule').api.fixInvert(imgTo)
 
     const pluginMessage = message ? yo`
       <div>

apps/remix-ide/src/app/ui/renderer.js

@@ -2,8 +2,8 @@
 
 var $ = require('jquery')
 var yo = require('yo-yo')
+const { default: Registry } = require('../state/registry')
 var css = require('./styles/renderer-styles')
-var globlalRegistry = require('../../global/registry')
 
 /**
  * After refactor, the renderer is only used to render error/warning
@@ -14,7 +14,7 @@ function Renderer (service) {
   const self = this
   self.service = service
   self._components = {}
-  self._components.registry = globlalRegistry
+  self._components.registry = Registry.getInstance()
   // dependencies
   self._deps = {
     fileManager: self._components.registry.get('filemanager').api,

apps/remix-ide/src/app/ui/txLogger.js

@@ -9,8 +9,9 @@ var remixLib = require('@remix-project/remix-lib')
 var EventManager = require('../../lib/events')
 var helper = require('../../lib/helper')
 var modalDialog = require('./modal-dialog-custom')
+const { default: Registry } = require('../state/registry')
+
 var typeConversion = remixLib.execution.typeConversion
-var globlalRegistry = require('../../global/registry')
 
 var css = csjs`
   .log {
@@ -125,12 +126,12 @@ class TxLogger {
       }
       return false
     }
-    this.eventsDecoder = globlalRegistry.get('eventsDecoder').api
+    this.eventsDecoder = Registry.getInstance().get('eventsDecoder').api
-    this.txListener = globlalRegistry.get('txlistener').api
+    this.txListener = Registry.getInstance().get('txlistener').api
     this.terminal = terminal
     // dependencies
     this._deps = {
-      compilersArtefacts: globlalRegistry.get('compilersartefacts').api
+      compilersArtefacts: Registry.getInstance().get('compilersartefacts').api
     }
 
     this.logKnownTX = this.terminal.registerCommand('knownTransaction', (args, cmds, append) => {

apps/remix-ide/src/lib/cmdInterpreterAPI.js

@@ -1,20 +1,20 @@
 'use strict'
 import { CompilerImports } from '@remix-project/core-plugin'
+import Registry from '../app/state/registry'
 var yo = require('yo-yo')
 var async = require('async')
 var EventManager = require('../lib/events')
 
 var toolTip = require('../app/ui/tooltip')
-var globalRegistry = require('../global/registry')
 var GistHandler = require('./gist-handler')
 
 class CmdInterpreterAPI {
-  constructor (terminal, localRegistry, blockchain) {
+  constructor (terminal, blockchain) {
     const self = this
     self.event = new EventManager()
     self.blockchain = blockchain
     self._components = {}
-    self._components.registry = localRegistry || globalRegistry
+    self._components.registry = Registry.getInstance()
     self._components.terminal = terminal
     self._components.fileImport = new CompilerImports()
     self._components.gistHandler = new GistHandler()

apps/remix-ide/src/remixAppManager.js

@@ -8,7 +8,7 @@ import { IframePlugin } from '@remixproject/engine-web'
 const _paq = window._paq = window._paq || []
 
 const requiredModules = [ // services + layout views + system views
-  'manager', 'compilerArtefacts', 'compilerMetadata', 'contextualListener', 'editor', 'offsetToLineColumnConverter', 'network', 'theme',
+  'manager', 'config', 'compilerArtefacts', 'compilerMetadata', 'contextualListener', 'editor', 'offsetToLineColumnConverter', 'network', 'theme',
   'fileManager', 'contentImport', 'blockchain', 'web3Provider', 'scriptRunner', 'fetchAndCompile', 'mainPanel', 'hiddenPanel', 'sidePanel', 'menuicons',
   'filePanel', 'terminal', 'settings', 'pluginManager', 'tabs', 'udapp', 'dGitProvider', 'solidity-logic']
 

apps/solidity-compiler/src/app/compiler-api.ts

@@ -291,11 +291,11 @@ export const CompilerApiMixin = (Base) => class extends Base {
     this.on('themeModule', 'themeChanged', this.data.eventHandlers.onThemeChanged)
 
     // Run the compiler instead of trying to save the website
-    this.data.eventHandlers.onKeyDown = (e) => {
+    this.data.eventHandlers.onKeyDown = async (e) => {
       // ctrl+s or command+s
       if ((e.metaKey || e.ctrlKey) && e.keyCode === 83 && this.currentFile !== '') {
         e.preventDefault()
-        this.compileTabLogic.runCompiler(this.getAppParameter('hardhat-compilation'))
+        this.compileTabLogic.runCompiler(await this.getAppParameter('hardhat-compilation'))
       }
     }
     window.document.addEventListener('keydown', this.data.eventHandlers.onKeyDown)

apps/solidity-compiler/src/app/compiler.ts

@@ -59,15 +59,12 @@ export class CompilerClientApi extends CompilerApiMixin(PluginClient) implements
     }
   }
 
-  getAppParameter (name) {
+  async getAppParameter (name) {
-    const param = localStorage.getItem(name) || defaultAppParameters[name]
+    return await PluginClient.call('config', 'getAppParameter', name)
-    if (param === 'true') return true
-    if (param === 'false') return false
-    return param
   }
 
-  setAppParameter (name, value) {
+  async setAppParameter (name, value) {
-    localStorage.setItem(name, value)
+    await PluginClient.call('config', 'setAppParameter', name, value)
   }
 
   getFileManagerMode () {

libs/remix-lib/src/types/ICompilerApi.ts

@@ -11,7 +11,7 @@ export interface ICompilerApi {
     getCompilerParameters: () => ConfigurationSettings
     setCompilerParameters: (ConfigurationSettings?) => void
 
-    getAppParameter: (value: string) => string | boolean
+    getAppParameter: (value: string) => Promise<any>
     setAppParameter: (name: string, value: string | boolean) => void
 
     getFileManagerMode: () => string

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

@@ -68,9 +68,9 @@ export const Renderer = ({ message, opt = {}, plugin }: RendererProps) => {
     return result
   }
 
-  const addAnnotation = (file, error) => {
+  const addAnnotation = async (file, error) => {
-    if (file === plugin.getAppParameter('currentFile')) {
+    if (file === await plugin.call('config', 'getAppParameter', 'currentFile')) {
-      plugin.call('editor', 'addAnnotation', error, file)
+      await plugin.call('editor', 'addAnnotation', error, file)
     }
   }
 
@@ -87,14 +87,14 @@ export const Renderer = ({ message, opt = {}, plugin }: RendererProps) => {
   }
 
   const _errorClick = async (errFile, errLine, errCol) => {
-    if (errFile !== plugin.getAppParameter('currentFile')) {
+    if (errFile !== await plugin.call('config', 'getAppParameter', 'currentFile')) {
       // TODO: refactor with this._components.contextView.jumpTo
-      if (await plugin.fileExists(errFile)) {
+      if (await plugin.call('fileManager', 'exists', errFile)) {
-        plugin.open(errFile)
+        await plugin.call('fileManager', 'open', errFile)
-        plugin.call('editor', 'gotoLine', errLine, errCol)
+        await plugin.call('editor', 'gotoLine', errLine, errCol)
       }
     } else {
-      plugin.call('editor', 'gotoLine', errLine, errCol)
+      await plugin.call('editor', 'gotoLine', errLine, errCol)
     }
   }
 

libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx

@@ -64,23 +64,29 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
   }, [])
 
   useEffect(() => {
-    if (compileTabLogic && compileTabLogic.compiler) {
+    (async () => {
-      setState(prevState => {
+      if (compileTabLogic && compileTabLogic.compiler) {
-        const params = api.getCompilerParameters()
+        const autocompile = await api.getAppParameter('autoCompile') as boolean || false
-        const optimize = params.optimize
+        const hideWarnings = await api.getAppParameter('hideWarnings') as boolean || false
-        const runs = params.runs as string
+        const includeNightlies = await api.getAppParameter('includeNightlies') as boolean || false
-        const evmVersion = params.evmVersion
+        setState(prevState => {
-        return {
+          const params = api.getCompilerParameters()
-          ...prevState,
+          const optimize = params.optimize
-          hideWarnings: api.getAppParameter('hideWarnings') as boolean || false,
+          const runs = params.runs as string
-          autoCompile: api.getAppParameter('autoCompile') as boolean || false,
+          const evmVersion = params.evmVersion
-          includeNightlies: api.getAppParameter('includeNightlies') as boolean || false,
+
-          optimize: optimize,
+          return {
-          runs: runs,
+            ...prevState,
-          evmVersion: (evmVersion !== null) && (evmVersion !== 'null') && (evmVersion !== undefined) && (evmVersion !== 'undefined') ? evmVersion : 'default'
+            hideWarnings: hideWarnings,
-        }
+            autoCompile: autocompile,
-      })
+            includeNightlies: includeNightlies,
-    }
+            optimize: optimize,
+            runs: runs,
+            evmVersion: (evmVersion !== null) && (evmVersion !== 'null') && (evmVersion !== undefined) && (evmVersion !== 'undefined') ? evmVersion : 'default'
+          }
+        })
+      }
+    })()
   }, [compileTabLogic])
 
   useEffect(() => {

libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react' // eslint-disable-line
+import React, { useEffect, useState } from 'react' // eslint-disable-line
 import { SolidityCompilerProps } from './types'
 import { CompilerContainer } from './compiler-container' // eslint-disable-line
 import { ContractSelection } from './contract-selection' // eslint-disable-line
@@ -31,6 +31,14 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => {
     }
   })
   const [currentVersion, setCurrentVersion] = useState('')
+  const [hideWarnings, setHideWarnings] = useState<boolean>(false)
+
+  useEffect(() => {
+    (async () => {
+      const hide = await api.getAppParameter('hideWarnings') as boolean || false
+      setHideWarnings(hide)
+    })()
+  }, [])
 
   api.onCurrentFileChanged = (currentFile: string) => {
     setState(prevState => {
@@ -118,7 +126,7 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => {
           { compileErrors.error && <Renderer message={compileErrors.error.formattedMessage || compileErrors.error} plugin={api} opt={{ type: compileErrors.error.severity || 'error', errorType: compileErrors.error.type }} /> }
           { compileErrors.error && (compileErrors.error.mode === 'panic') && modal('Error', panicMessage(compileErrors.error.formattedMessage), 'Close', null) }
           { compileErrors.errors && compileErrors.errors.length && compileErrors.errors.map((err, index) => {
-            if (api.getAppParameter('hideWarnings')) {
+            if (hideWarnings) {
               if (err.severity !== 'warning') {
                 return <Renderer key={index} message={err.formattedMessage} plugin={api} opt={{ type: err.severity, errorType: err.type }} />
               }

libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel.d.ts

@@ -2,7 +2,8 @@
 /* eslint-disable no-use-before-define */
 import { Plugin } from '@remixproject/engine/lib/abstract'
 import * as packageJson from '../../../../package.json'
-import * as registry from 'apps/remix-ide/src/global/registry'
+import Registry from 'apps/remix-ide/src/app/state/registry'
+
 import { RemixAppManager } from '@remix-ui/plugin-manager'
 
 export type Kind =
@@ -52,7 +53,7 @@ export class VerticalIcons extends Plugin<any, any> {
   defaultProfile: defaultModuleProfile
   targetProfileForChange: any
   targetProfileForRemoval: any
-  registry: registry
+  registry: Registry
   keys: string[]
   types: string[]
   renderComponent(): void