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

3 years ago · 249c59adfc
parent 6df9133b7e 208fce050f
commit 249c59adfc
39 changed files with 531 additions and 227 deletions
--- a/apps/remix-ide-e2e/src/tests/solidityImport_group1.spec.ts
+++ b/apps/remix-ide-e2e/src/tests/solidityImport_group1.spec.ts
@ -1,6 +0,0 @@
-'use strict'
-import * as test from './solidityImport.test'
-import buildGroupTest from '../helpers/buildgrouptest'
-const group = 'group1'
-
-module.exports = buildGroupTest(group, test)
--- a/apps/remix-ide-e2e/src/tests/verticalIconsPanel.test.ts
+++ b/apps/remix-ide-e2e/src/tests/verticalIconsPanel.test.ts
@ -27,6 +27,6 @@ module.exports = {
      .click('*[id="menuitemdeactivate"]')
      .click('*[data-id="verticalIconsKindsettings"]')
      .click('*[data-id="verticalIconsKindpluginManager"]')
-      .waitForElementVisible('*[data-id="pluginManagerComponentActivateButtondebugPlugin"]')
+      .waitForElementVisible('*[data-id="pluginManagerComponentActivateButtondebugger"]')
  }
 }
--- a/apps/remix-ide/src/app.js
+++ b/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)
-    registry.put({ api: self.themeModule, name: 'themeModule' })
+    self.themeModule = new 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,23 +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.get('filemanager').api,
-      registry.get('editor').api,
+      Registry.getInstance().get('config').api,
+      Registry.getInstance().get('filemanager').api,
+      Registry.getInstance().get('editor').api,
      filePanel,
-      registry.get('compilersartefacts').api,
+      Registry.getInstance().get('compilersartefacts').api,
      networkModule,
      self.mainview,
-      registry.get('fileproviders/browser').api
+      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.get('offsettolinecolumnconverter').api,
+      Registry.getInstance().get('filemanager').api,
+      Registry.getInstance().get('offsettolinecolumnconverter').api,
      filePanel,
      compileTab,
      appManager,
@ -267,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'])
--- a/apps/remix-ide/src/app/components/vertical-icons.js
+++ b/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', '']
  }
--- a/apps/remix-ide/src/app/editor/contextView.js
+++ b/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
--- a/apps/remix-ide/src/app/files/fileManager.js
+++ b/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()
  }
--- a/apps/remix-ide/src/app/panels/file-panel.js
+++ b/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

--- a/apps/remix-ide/src/app/panels/main-view.js
+++ b/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()
--- a/apps/remix-ide/src/app/panels/terminal.js
+++ b/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 = {}
--- a/apps/remix-ide/src/app/plugins/config.ts
+++ b/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)
+  }
+}
--- a/apps/remix-ide/src/app/state/registry.ts
+++ b/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
+    }
+}
--- a/apps/remix-ide/src/app/tabs/analysis-tab.js
+++ b/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 = {
--- a/apps/remix-ide/src/app/tabs/compile-tab.js
+++ b/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) {
-    // first look in the URL params then in the local storage
-    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
+  async getAppParameter (name) {
+    return await this.call('config', 'getAppParameter', name)
  }

-  setAppParameter (name, value) {
-    this.config.set(name, value)
+  async setAppParameter (name, value) {
+    await this.call('config', 'setAppParameter', name, value)
  }
 }

--- a/apps/remix-ide/src/app/tabs/plugin-tab.js
+++ b/apps/remix-ide/src/app/tabs/plugin-tab.js
@ -1,22 +0,0 @@
-var yo = require('yo-yo')
-var css = require('./styles/plugin-tab-styles')
-
-class PluginTab {
-  constructor (json) {
-    this.el = null
-    this.data = { json }
-  }
-
-  render () {
-    if (this.el) return this.el
-
-    this.el = yo`
-      <div class="${css.pluginTabView}" id="pluginView">
-        <iframe class="${css.iframe}" src="${this.data.json.url}/index.html"></iframe>
-      </div>`
-
-    return this.el
-  }
-}
-
-module.exports = PluginTab
--- a/apps/remix-ide/src/app/tabs/runTab/settings.js
+++ b/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
    }
--- a/apps/remix-ide/src/app/tabs/settings-tab.js
+++ b/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')
--- a/apps/remix-ide/src/app/tabs/theme-module.js
+++ b/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
--- a/apps/remix-ide/src/app/udapp/make-udapp.js
+++ b/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' })
 }
--- a/apps/remix-ide/src/app/ui/persmission-handler.js
+++ b/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)
-    globalRegistry.get('themeModule').api.fixInvert(imgTo)
+    Registry.getInstance().get('themeModule').api.fixInvert(imgFrom)
+    Registry.getInstance().get('themeModule').api.fixInvert(imgTo)

    const pluginMessage = message ? yo`
      <div>
--- a/apps/remix-ide/src/app/ui/renderer.js
+++ b/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,
--- a/apps/remix-ide/src/app/ui/txLogger.js
+++ b/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.txListener = globlalRegistry.get('txlistener').api
+    this.eventsDecoder = Registry.getInstance().get('eventsDecoder').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) => {
--- a/apps/remix-ide/src/lib/cmdInterpreterAPI.js
+++ b/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()
--- a/apps/remix-ide/src/remixAppManager.js
+++ b/apps/remix-ide/src/remixAppManager.js
@ -7,7 +7,7 @@ import { PermissionHandler } from './app/ui/persmission-handler'
 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']

--- a/apps/solidity-compiler/src/app/compiler-api.ts
+++ b/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)
--- a/apps/solidity-compiler/src/app/compiler.ts
+++ b/apps/solidity-compiler/src/app/compiler.ts
@ -59,15 +59,12 @@ export class CompilerClientApi extends CompilerApiMixin(PluginClient) implements
    }
  }

-  getAppParameter (name) {
-    const param = localStorage.getItem(name) || defaultAppParameters[name]
-    if (param === 'true') return true
-    if (param === 'false') return false
-    return param
+  async getAppParameter (name) {
+    return await PluginClient.call('config', 'getAppParameter', name)
  }

-  setAppParameter (name, value) {
-    localStorage.setItem(name, value)
+  async setAppParameter (name, value) {
+    await PluginClient.call('config', 'setAppParameter', name, value)
  }

  getFileManagerMode () {
--- a/libs/remix-lib/src/types/ICompilerApi.ts
+++ b/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
--- a/libs/remix-ui/editor-context-view/src/index.ts
+++ b/libs/remix-ui/editor-context-view/src/index.ts
@ -1 +1 @@
-export * from './lib/remix-ui-editor-context-view';
+export * from './lib/remix-ui-editor-context-view'
--- a/libs/remix-ui/editor-context-view/src/lib/remix-ui-editor-context-view.tsx
+++ b/libs/remix-ui/editor-context-view/src/lib/remix-ui-editor-context-view.tsx
@ -38,15 +38,13 @@ export interface RemixUiEditorContextViewProps {

 function isDefinition (node: any) {
  return node.nodeType === 'ContractDefinition' ||
-  node.nodeType === 'FunctionDefinition' ||
-  node.nodeType === 'ModifierDefinition' ||
-  node.nodeType === 'VariableDeclaration' ||
-  node.nodeType === 'StructDefinition' ||
-  node.nodeType === 'EventDefinition'
+    node.nodeType === 'FunctionDefinition' ||
+    node.nodeType === 'ModifierDefinition' ||
+    node.nodeType === 'VariableDeclaration' ||
+    node.nodeType === 'StructDefinition' ||
+    node.nodeType === 'EventDefinition'
 }

-
-
 type nullableAstNode = astNode | null

 export function RemixUiEditorContextView (props: RemixUiEditorContextViewProps) {
@ -68,7 +66,7 @@ export function RemixUiEditorContextView (props: RemixUiEditorContextViewProps)
    currentNode: null,
    gasEstimation: { executionCost: '', codeDepositCost: '' }
  })
-  
+
  useEffect(() => {
    props.onContextListenerChanged(async (nodes: Array<astNode>) => {
      if (gotoLineDisableRef.current) {
@ -88,9 +86,9 @@ export function RemixUiEditorContextView (props: RemixUiEditorContextViewProps)
        references = await props.referencesOf(currentNode)
        if (currentNode.nodeType === 'FunctionDefinition') {
          gasEstimation = await props.gasEstimation(currentNode)
-        }        
+        }
      }
-      let activeHighlights = await props.getActiveHighlights()
+      const activeHighlights = await props.getActiveHighlights()
      setState(prevState => {
        return { ...prevState, nodes, references, activeHighlights, currentNode, gasEstimation }
      })
--- a/libs/remix-ui/renderer/src/lib/renderer.tsx
+++ b/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) => {
-    if (file === plugin.getAppParameter('currentFile')) {
-      plugin.call('editor', 'addAnnotation', error, file)
+  const addAnnotation = async (file, error) => {
+    if (file === await plugin.call('config', 'getAppParameter', 'currentFile')) {
+      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)) {
-        plugin.open(errFile)
-        plugin.call('editor', 'gotoLine', errLine, errCol)
+      if (await plugin.call('fileManager', 'exists', errFile)) {
+        await plugin.call('fileManager', 'open', errFile)
+        await plugin.call('editor', 'gotoLine', errLine, errCol)
      }
    } else {
-      plugin.call('editor', 'gotoLine', errLine, errCol)
+      await plugin.call('editor', 'gotoLine', errLine, errCol)
    }
  }

--- a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
+++ b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
@ -64,23 +64,29 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
  }, [])

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

  useEffect(() => {
--- a/libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx
+++ b/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 }} />
              }
--- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.css
+++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.css
@ -202,6 +202,7 @@ element.style {
    bottom           : 1em;
    border-width     : 4px;
    left             : 2em;
+    overflow-y       : scroll;
  }

  .autoCompleteItem {
--- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
+++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
@ -361,6 +361,12 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
    }
  }

+  const handleClickSelect = (item: string) => {
+    const result: string = getKeyOf(item) as string || getValueOf(item) as string
+    setAutoCompleteState(prevState => ({ ...prevState, showSuggestions: false, userInput: result }))
+    inputEl.current.focus()
+  }
+
  const handleSelect = (event) => {
    const suggestionCount = autoCompletState.activeSuggestion
    if (event.keyCode === 38) {
@ -396,11 +402,11 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
  }

  const handleAutoComplete = () => (
-    <div className='popup alert alert-secondary' style={{ display: (autoCompletState.showSuggestions && autoCompletState.userInput !== '') && autoCompletState.data._options.length > 0 ? 'block' : 'none' }}>
+    <div className='popup alert alert-secondary' style={{ display: (autoCompletState.showSuggestions && autoCompletState.userInput !== '' && (autoCompletState.userInput.length > 2)) && autoCompletState.data._options.length > 0 ? 'block' : 'none' }}>
      <div>
        {autoCompletState.data._options.map((item, index) => {
          return (
-            <div key={index} data-id="autoCompletePopUpAutoCompleteItem" className={`autoCompleteItem listHandlerShow item ${autoCompletState.data._options[autoCompletState.activeSuggestion] === item ? 'border border-primary ' : ''}`} onKeyDown={ handleSelect } >
+            <div key={index} data-id="autoCompletePopUpAutoCompleteItem" className={`autoCompleteItem listHandlerShow item ${autoCompletState.data._options[autoCompletState.activeSuggestion] === item ? 'border border-primary ' : ''}`} onKeyDown={ handleSelect } onClick={() => handleClickSelect(item)}>
              <div>
                {getKeyOf(item)}
              </div>
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx
@ -26,31 +26,31 @@ function RequiredSection ({ verticalIconsPlugin, itemContextAction, addActive, r
        removeActive={removeActive}
        itemContextAction={itemContextAction}
      />
-      <PluginManager
+      <Solidity
        verticalIconsPlugin={verticalIconsPlugin}
        addActive={addActive}
        removeActive={removeActive}
        itemContextAction={itemContextAction}
      />
-      <Solidity
+      <Udapp
        verticalIconsPlugin={verticalIconsPlugin}
        addActive={addActive}
        removeActive={removeActive}
        itemContextAction={itemContextAction}
      />
-      <Udapp
+      <SolidityStaticAnalysis
        verticalIconsPlugin={verticalIconsPlugin}
        addActive={addActive}
        removeActive={removeActive}
        itemContextAction={itemContextAction}
      />
-      <SolidityStaticAnalysis
+      <Debugger
        verticalIconsPlugin={verticalIconsPlugin}
        addActive={addActive}
        removeActive={removeActive}
        itemContextAction={itemContextAction}
      />
-      <Debugger
+      <PluginManager
        verticalIconsPlugin={verticalIconsPlugin}
        addActive={addActive}
        removeActive={removeActive}
--- a/libs/remix-ui/vertical-icons-panel/src/lib/reducers/verticalScrollReducer.ts
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/reducers/verticalScrollReducer.ts
@ -0,0 +1,14 @@
+
+export type actionType = {
+  type: 'resize' | 'other'
+  payload: any
+}
+
+export function verticalScrollReducer (prevState: any, actionPayload: actionType) {
+  if (actionPayload.type === 'resize') {
+    let { scrollHeight, clientHeight, scrollState } = actionPayload.payload
+    if (scrollHeight > clientHeight) scrollState = true
+    return { scrollHeight, clientHeight, scrollState }
+  }
+  return prevState
+}
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@ -3,7 +3,9 @@
 import React, {
  Fragment,
  useEffect,
-  useRef
+  useReducer,
+  useRef,
+  useState
 } from 'react'

 import './remix-ui-vertical-icons-panel.css'
@ -12,17 +14,44 @@ import { VerticalIcons } from '../../types/vertical-icons-panel'
 import Home from './components/Home'
 import Settings from './components/Settings'
 import { RequiredSection } from './components/RequiredSection'
+import { verticalScrollReducer } from './reducers/verticalScrollReducer'
 export interface RemixUiVerticalIconsPanelProps {
  verticalIconsPlugin: VerticalIcons
 }

 let scrollHeight: any

+const initialState = {
+  scrollHeight: 0,
+  clientHeight: 0,
+  scrollState: false
+}
+
 export function RemixUiVerticalIconsPanel ({
  verticalIconsPlugin
 }: RemixUiVerticalIconsPanelProps) {
  const scrollableRef = useRef<any>()
  const iconPanelRef = useRef<any>()
+  const [activateScroll, dispatchScrollAction] = useReducer(verticalScrollReducer, initialState)
+
+  useEffect(() => {
+    const evaluateScrollability = (evt: any) => {
+      console.log('resize event answered by dispatch!')
+      dispatchScrollAction({
+        type: 'resize',
+        payload: {
+          scrollHeight: document.querySelector('#remixuiScrollable')?.scrollHeight,
+          clientHeight: document.querySelector('#remixuiScrollable')?.clientHeight,
+          scrollState: false
+        }
+      })
+    }
+    addEventListener('resize', evaluateScrollability)
+
+    return () => {
+      removeEventListener('resize', evaluateScrollability)
+    }
+  })

  function onThemeChanged (themeType: any) {
    const invert = themeType === 'dark' ? 1 : 0
@ -51,6 +80,7 @@ export function RemixUiVerticalIconsPanel ({
  }

  function addActive (name: string) {
+    console.log('addactive has been called now.')
    if (name === 'home') return
    const themeType = verticalIconsPlugin.registry.get('themeModule').api.currentTheme().quality
    const invert = themeType === 'dark' ? 1 : 0
@ -98,7 +128,7 @@ export function RemixUiVerticalIconsPanel ({
      <div className="remixui_icons d-flex flex-column vh-100" ref={iconPanelRef}>
        <Home verticalIconPlugin={verticalIconsPlugin} />
        <div className={scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight
-          ? 'remixui_default-icons-container remixui_requiredSection' : 'remixui_requiredSection'}>
+          ? 'remixui_default-icons-container remixui_requiredSection' : activateScroll && activateScroll.scrollState ? 'remixui_default-icons-container remixui_requiredSection' : 'remixui_requiredSection'}>
          <RequiredSection
            verticalIconsPlugin={verticalIconsPlugin}
            addActive={addActive}
@ -111,7 +141,7 @@ export function RemixUiVerticalIconsPanel ({
          id="remixuiScrollable"
          className={scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight
            ? 'remixui_default-icons-container remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'
-            : 'remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'}
+            : activateScroll && activateScroll.scrollState ? 'remixui_default-icons-container remixui_scrollable-container remixui_scrollbar remixui_hide-scroll' : 'remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'}
          ref={scrollableRef}
        >
          <OtherIcons
--- a/libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel.d.ts
+++ b/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
--- a/package-lock.json
+++ b/package-lock.json
@ -33808,6 +33808,7 @@
        },
        "npm-install-checks": {
          "version": "3.0.0",
+          "resolved": false,
          "integrity": "sha1-1K7N/VGlPjcjt7L5Oy7ijjB7wNc=",
          "requires": {
            "semver": "^2.3.0 || 3.x || 4 || 5"
@ -35469,7 +35470,7 @@
        },
        "cross-spawn": {
          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
+          "resolved": false,
          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
          "dev": true,
          "requires": {
@ -35486,7 +35487,7 @@
        },
        "execa": {
          "version": "0.7.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz",
+          "resolved": false,
          "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=",
          "dev": true,
          "requires": {
@ -35516,19 +35517,19 @@
        },
        "get-stream": {
          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+          "resolved": false,
          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
          "dev": true
        },
        "invert-kv": {
          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
+          "resolved": false,
          "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=",
          "dev": true
        },
        "is-fullwidth-code-point": {
          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "resolved": false,
          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
          "dev": true,
          "requires": {
@ -35537,7 +35538,7 @@
        },
        "is-stream": {
          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+          "resolved": false,
          "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
          "dev": true
        },
@ -35549,7 +35550,7 @@
        },
        "lcid": {
          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
+          "resolved": false,
          "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=",
          "dev": true,
          "requires": {
@ -35568,7 +35569,7 @@
        },
        "lru-cache": {
          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.1.tgz",
+          "resolved": false,
          "integrity": "sha512-q4spe4KTfsAS1SUHLO0wz8Qiyf1+vMIAgpRYioFYDMNqKfHQbg+AVDH3i4fvpl71/P1L0dBl+fQi+P37UYf0ew==",
          "dev": true,
          "requires": {
@ -35578,7 +35579,7 @@
        },
        "mem": {
          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/mem/-/mem-1.1.0.tgz",
+          "resolved": false,
          "integrity": "sha1-Xt1StIXKHZAP5kiVUFOZoN+kX3Y=",
          "dev": true,
          "requires": {
@ -35587,13 +35588,13 @@
        },
        "mimic-fn": {
          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.1.0.tgz",
+          "resolved": false,
          "integrity": "sha1-5md4PZLonb00KBi1IwudYqZyrRg=",
          "dev": true
        },
        "minimist": {
          "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "resolved": false,
          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
          "dev": true
        },
@ -35623,7 +35624,7 @@
        },
        "os-locale": {
          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-2.1.0.tgz",
+          "resolved": false,
          "integrity": "sha512-3sslG3zJbEYcaC4YVAvDorjGxc7tv6KVATnLPZONiljsUncvihe9BQoVCEs0RZ1kmf4Hk9OBqlZfJZWI4GanKA==",
          "dev": true,
          "requires": {
@ -35712,7 +35713,7 @@
        },
        "string-width": {
          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "resolved": false,
          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
          "dev": true,
          "requires": {
@ -35763,19 +35764,19 @@
        },
        "y18n": {
          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
+          "resolved": false,
          "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=",
          "dev": true
        },
        "yallist": {
          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+          "resolved": false,
          "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
          "dev": true
        },
        "yargs": {
          "version": "10.0.3",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-10.0.3.tgz",
+          "resolved": false,
          "integrity": "sha512-DqBpQ8NAUX4GyPP/ijDGHsJya4tYqLQrjPr95HNsr1YwL3+daCfvBwg7+gIC6IdJhR2kATh3hb61vjzMWEtjdw==",
          "dev": true,
          "requires": {
@ -35795,13 +35796,13 @@
          "dependencies": {
            "ansi-regex": {
              "version": "3.0.0",
-              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+              "resolved": false,
              "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
              "dev": true
            },
            "cliui": {
              "version": "3.2.0",
-              "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
+              "resolved": false,
              "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
              "dev": true,
              "requires": {
@ -35812,7 +35813,7 @@
              "dependencies": {
                "string-width": {
                  "version": "1.0.2",
-                  "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+                  "resolved": false,
                  "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
                  "dev": true,
                  "requires": {
@ -35825,7 +35826,7 @@
            },
            "string-width": {
              "version": "2.1.1",
-              "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+              "resolved": false,
              "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
              "dev": true,
              "requires": {
@ -35835,13 +35836,13 @@
              "dependencies": {
                "is-fullwidth-code-point": {
                  "version": "2.0.0",
-                  "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+                  "resolved": false,
                  "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
                  "dev": true
                },
                "strip-ansi": {
                  "version": "4.0.0",
-                  "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+                  "resolved": false,
                  "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
                  "dev": true,
                  "requires": {
@ -35854,7 +35855,7 @@
        },
        "yargs-parser": {
          "version": "8.0.0",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-8.0.0.tgz",
+          "resolved": false,
          "integrity": "sha1-IdR2Mw5agieaS4gTRb8GYQLiGcY=",
          "dev": true,
          "requires": {
@ -35863,7 +35864,7 @@
          "dependencies": {
            "camelcase": {
              "version": "4.1.0",
-              "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
+              "resolved": false,
              "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=",
              "dev": true
            }
@ -36136,7 +36137,7 @@
      "dependencies": {
        "ansi-regex": {
          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "resolved": false,
          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
          "dev": true
        },
@ -36223,7 +36224,7 @@
        },
        "commander": {
          "version": "2.17.1",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
+          "resolved": false,
          "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==",
          "dev": true,
          "optional": true
@ -36251,7 +36252,7 @@
        },
        "cross-spawn": {
          "version": "4.0.2",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-4.0.2.tgz",
+          "resolved": false,
          "integrity": "sha1-e5JHYhwjrf3ThWAEqCPL45dCTUE=",
          "dev": true,
          "requires": {
@ -36261,7 +36262,7 @@
        },
        "debug": {
          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
+          "resolved": false,
          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
          "dev": true,
          "requires": {
@ -36350,7 +36351,7 @@
        },
        "find-up": {
          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "resolved": false,
          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
          "dev": true,
          "requires": {
@ -36467,7 +36468,7 @@
        },
        "inherits": {
          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "resolved": false,
          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
          "dev": true
        },
@ -36491,7 +36492,7 @@
        },
        "is-stream": {
          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+          "resolved": false,
          "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
          "dev": true
        },
@ -36503,7 +36504,7 @@
        },
        "istanbul-lib-coverage": {
          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz",
+          "resolved": false,
          "integrity": "sha512-dKWuzRGCs4G+67VfW9pBFFz2Jpi4vSp/k7zBcJ888ofV5Mi1g5CUML5GvMvV6u9Cjybftu+E8Cgp+k0dI1E5lw==",
          "dev": true
        },
@ -36547,7 +36548,7 @@
        },
        "istanbul-lib-report": {
          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-2.0.4.tgz",
+          "resolved": false,
          "integrity": "sha512-sOiLZLAWpA0+3b5w5/dq0cjm2rrNdAfHWaGhmn7XEFW6X++IV9Ohn+pnELAl9K3rfpaeBfbmH9JU5sejacdLeA==",
          "dev": true,
          "requires": {
@ -36558,7 +36559,7 @@
          "dependencies": {
            "supports-color": {
              "version": "6.1.0",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+              "resolved": false,
              "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
              "dev": true,
              "requires": {
@ -36569,7 +36570,7 @@
        },
        "istanbul-lib-source-maps": {
          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-3.0.2.tgz",
+          "resolved": false,
          "integrity": "sha512-JX4v0CiKTGp9fZPmoxpu9YEkPbEqCqBbO3403VabKjH+NRXo72HafD5UgnjTEqHL2SAjaZK1XDuDOkn6I5QVfQ==",
          "dev": true,
          "requires": {
@ -36582,7 +36583,7 @@
          "dependencies": {
            "source-map": {
              "version": "0.6.1",
-              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+              "resolved": false,
              "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
              "dev": true
            }
@ -36590,7 +36591,7 @@
        },
        "istanbul-reports": {
          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-2.1.1.tgz",
+          "resolved": false,
          "integrity": "sha512-FzNahnidyEPBCI0HcufJoSEoKykesRlFcSzQqjH9x0+LC8tnnE/p/90PBLu8iZTxr8yYZNyTtiAujUqyN+CIxw==",
          "dev": true,
          "requires": {
@ -36626,7 +36627,7 @@
        },
        "locate-path": {
          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "resolved": false,
          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
          "dev": true,
          "requires": {
@ -36648,7 +36649,7 @@
        },
        "lru-cache": {
          "version": "4.1.5",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+          "resolved": false,
          "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
          "dev": true,
          "requires": {
@ -36658,7 +36659,7 @@
        },
        "make-dir": {
          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
+          "resolved": false,
          "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
          "dev": true,
          "requires": {
@ -36687,7 +36688,7 @@
        },
        "merge-source-map": {
          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/merge-source-map/-/merge-source-map-1.1.0.tgz",
+          "resolved": false,
          "integrity": "sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==",
          "dev": true,
          "requires": {
@ -36696,7 +36697,7 @@
          "dependencies": {
            "source-map": {
              "version": "0.6.1",
-              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+              "resolved": false,
              "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
              "dev": true
            }
@ -36704,7 +36705,7 @@
        },
        "mimic-fn": {
          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
+          "resolved": false,
          "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
          "dev": true
        },
@ -36719,7 +36720,7 @@
        },
        "minimist": {
          "version": "0.0.10",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
+          "resolved": false,
          "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=",
          "dev": true
        },
@ -36835,7 +36836,7 @@
        },
        "p-limit": {
          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.1.0.tgz",
+          "resolved": false,
          "integrity": "sha512-NhURkNcrVB+8hNfLuysU8enY5xn2KXphsHBaC2YmRNTZRc7RWusw6apSpdEj3jo4CMb6W9nrF6tTnsJsJeyu6g==",
          "dev": true,
          "requires": {
@ -36844,7 +36845,7 @@
        },
        "p-locate": {
          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "resolved": false,
          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
          "dev": true,
          "requires": {
@ -36853,7 +36854,7 @@
        },
        "p-try": {
          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.0.0.tgz",
+          "resolved": false,
          "integrity": "sha512-hMp0onDKIajHfIkdRk3P4CdCmErkYAxxDtP3Wx/4nZ3aGlau2VKh3mZpcuFkH27WQkL/3WBCPOktzA9ZOAnMQQ==",
          "dev": true
        },
@ -36945,7 +36946,7 @@
        },
        "read-pkg": {
          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
+          "resolved": false,
          "integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=",
          "dev": true,
          "requires": {
@ -36956,7 +36957,7 @@
        },
        "read-pkg-up": {
          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-4.0.0.tgz",
+          "resolved": false,
          "integrity": "sha512-6etQSH7nJGsK0RbG/2TeDzZFa8shjQ1um+SwQQ5cwKy0dhSXdOncEhb1CPpvQG4h7FyOV6EB6YlV0yJvZQNAkA==",
          "dev": true,
          "requires": {
@ -36987,7 +36988,7 @@
        },
        "resolve": {
          "version": "1.10.0",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.10.0.tgz",
+          "resolved": false,
          "integrity": "sha512-3sUr9aq5OfSg2S9pNtPA9hL1FVEAjvfOC4leW0SNf/mpnaakz2a9femSd6LqAww2RaFctwyf1lCqnTHuF1rxDg==",
          "dev": true,
          "requires": {
@ -36996,7 +36997,7 @@
        },
        "resolve-from": {
          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "resolved": false,
          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
          "dev": true
        },
@ -37011,13 +37012,13 @@
        },
        "safe-buffer": {
          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "resolved": false,
          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
          "dev": true
        },
        "semver": {
          "version": "5.6.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.6.0.tgz",
+          "resolved": false,
          "integrity": "sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==",
          "dev": true
        },
@ -37106,7 +37107,7 @@
        },
        "strip-ansi": {
          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "resolved": false,
          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
          "dev": true,
          "requires": {
@ -37127,7 +37128,7 @@
        },
        "test-exclude": {
          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-5.1.0.tgz",
+          "resolved": false,
          "integrity": "sha512-gwf0S2fFsANC55fSeSqpb8BYk6w3FDvwZxfNjeF6FRgvFa43r+7wRiA/Q0IxoRU37wB/LE8IQ4221BsNucTaCA==",
          "dev": true,
          "requires": {
@ -37139,7 +37140,7 @@
        },
        "uglify-js": {
          "version": "3.4.9",
-          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz",
+          "resolved": false,
          "integrity": "sha512-8CJsbKOtEbnJsTyv6LE6m6ZKniqMiFWmm9sRbopbkGs3gMPPfd3Fh8iIA4Ykv5MgaTbqHr4BaoGLJLZNhsrW1Q==",
          "dev": true,
          "optional": true,
@ -37150,7 +37151,7 @@
          "dependencies": {
            "source-map": {
              "version": "0.6.1",
-              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+              "resolved": false,
              "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
              "dev": true,
              "optional": true
@ -37249,7 +37250,7 @@
        },
        "write-file-atomic": {
          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.2.tgz",
+          "resolved": false,
          "integrity": "sha512-s0b6vB3xIVRLWywa6X9TOMA7k9zio0TMOsl9ZnDkliA/cfJlpHXAscj0gbHVJiTdIuAYpIyqS5GW91fqm6gG5g==",
          "dev": true,
          "requires": {
@ -37266,7 +37267,7 @@
        },
        "yallist": {
          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+          "resolved": false,
          "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
          "dev": true
        },
@ -40456,9 +40457,9 @@
      }
    },
    "regenerator-runtime": {
-      "version": "0.13.9",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+      "version": "0.13.7",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
    },
    "regenerator-transform": {
      "version": "0.14.5",
--- a/workspace.json
+++ b/workspace.json
@ -1126,8 +1126,8 @@
          "builder": "@nrwl/linter:lint",
          "options": {
            "linter": "eslint",
-            "tsConfig": ["libs/remix-ui/vertical-icons-panel/tsconfig.lib.json"],
-            "exclude": ["**/node_modules/**", "!libs/remix-ui/vertical-icons-panel/**/*"]
+            "tsConfig": ["libs/remix-ui/editor-context-view/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/editor-context-view/**/*"]
          }
        }
      }