fixed some errors. Todo: Home is broken

src/app.js

@@ -384,12 +384,12 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
     console.log('couldn\'t register iframe plugins', e.message)
   }
 
-  await appManager.activate(['contentImport', 'theme', 'editor', 'fileManager', 'compilerMetadata', 'compilerArtefacts', 'network', 'offsetToLineColumnConverter'])
-  await appManager.activate(['mainPanel'])
-  await appManager.activate(['menuicons', 'home', 'sidePanel', 'pluginManager', 'fileExplorers', 'settings', 'contextualListener', 'terminal'])
+  await appManager.activatePlugin(['contentImport', 'theme', 'editor', 'fileManager', 'compilerMetadata', 'compilerArtefacts', 'network', 'offsetToLineColumnConverter'])
+  await appManager.activatePlugin(['mainPanel', 'menuicons'])
+  await appManager.activatePlugin(['home', 'sidePanel', 'pluginManager', 'fileExplorers', 'settings', 'contextualListener', 'terminal'])
 
   // Set workspace after initial activation
-  if (Array.isArray(workspace)) await appManager.activate(workspace)
+  if (Array.isArray(workspace)) await appManager.activatePlugin(workspace)
 
   // Load and start the service who manager layout and frame
   const framingService = new FramingService(sidePanel, menuicons, mainview, this._components.resizeFeature)
@@ -415,6 +415,6 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   }
 
   if (isElectron()) {
-    appManager.activate(['remixd'])
+    appManager.activatePlugin(['remixd'])
   }
 }

src/app/components/hidden-panel.js

@@ -14,7 +14,7 @@ const profile = {
   displayName: 'Hidden Panel',
   description: '',
   version: packageJson.version,
-  methods: {}
+  methods: []
 }
 
 export class HiddenPanel extends AbstractPanel {

src/app/components/panel.js

 import { EventEmitter } from 'events'
 const csjs = require('csjs-inject')
 const yo = require('yo-yo')
-const { HostPlugin } = require('@remixproject/engine')
+import { HostPlugin } from '@remixproject/engine'
 
 const css = csjs`
   .plugins        {

src/app/components/side-panel.js

@@ -62,7 +62,8 @@ export class SidePanel extends AbstractPanel {
   constructor (appManager, verticalIcons) {
     super(sidePanel)
     this.appManager = appManager
-    this.header = this.renderHeader()
+    this.header = yo`<header></header>`
+    this.renderHeader()
     this.verticalIcons = verticalIcons
 
     // Toggle content
@@ -103,18 +104,18 @@ export class SidePanel extends AbstractPanel {
    * Display content and update the header
    * @param {String} name The name of the plugin to display
    */
-  showContent (name) {
+  async showContent (name) {
     super.showContent(name)
-    yo.update(this.header, this.renderHeader())
+    this.renderHeader()
   }
 
   /** The header of the side panel */
-  renderHeader () {
+  async renderHeader () {
     let name = ' - '
     let docLink = ''
     let versionWarning
     if (this.active) {
-      const { profile } = this.appManager.getPlugin(this.active)
+      const profile = await this.appManager.getProfile(this.active)
       name = profile.displayName ? profile.displayName : profile.name
       docLink = profile.documentation ? yo`<a href="${profile.documentation}" class="${css.titleInfo}" title="link to documentation" target="_blank"><i aria-hidden="true" class="fas fa-book"></i></a>` : ''
       if (profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)) {
@@ -126,13 +127,14 @@ export class SidePanel extends AbstractPanel {
       }
     }
 
-    return yo`
+    const header =  yo`
       <header class="${css.swapitHeader} px-3">
         <h6 class="${css.swapitTitle}" data-id="sidePanelSwapitTitle">${name}</h6>
         ${docLink}
         ${versionWarning}
       </header>
     `
+    yo.update(this.header, header)
   }
 
   render () {

src/app/panels/terminal.js

@@ -98,9 +98,6 @@ class Terminal extends Plugin {
     if (opts.shell) self._shell = opts.shell // ???
     register(self)
   }
-  setTxListener(txListener) {
-    this._opts.txListener = txListener
-  }
   logHtml (html) {
     var command = this.commands['html']
     if (typeof command === 'function') command(html)
@@ -137,7 +134,7 @@ class Terminal extends Plugin {
     self._view.inputSearch = yo`<input
       spellcheck="false"
       type="text"
-      class="${css.filter} form-control"
+      class="border ${css.filter} form-control"
       id="searchInput"
       onkeydown=${filter}
       placeholder="Search with transaction hash or address">
@@ -436,7 +433,7 @@ class Terminal extends Plugin {
     self._shell('remix.help()', self.commands, () => {})
     self.commands.html(intro)
 
-    self._components.txLogger = new TxLogger(self._opts.eventsDecoder, self._opts.txListener, this, self.blockchain)
+    self._components.txLogger = new TxLogger(this, self.blockchain)
     self._components.txLogger.event.register('debuggingRequested', (hash) => {
       // TODO should probably be in the run module
       if (!self._opts.appManager.isActive('debugger')) self._opts.appManager.activatePlugin('debugger')

src/app/ui/auto-complete-popup.js

@@ -189,8 +189,8 @@ class AutoCompletePopup {
 
   extendAutocompletion () {
     // TODO: this is not using the appManager interface. Terminal should be put as module
-    this.opts.appManager.event.on('activate', (id) => {
-      const profile = this.opts.appManager.getPlugin(id).profile
+    this.opts.appManager.event.on('activate', async (id) => {
+      const profile = await this.opts.appManager.getProfile(id)
       if (!profile.methods) return
       profile.methods.forEach((method) => {
         const key = `remix.call({name: '${id}', key:'${method}', payload: []}).then((result) => { console.log(result) }).catch((error) => { console.log(error) })`

src/app/ui/txLogger.js

@@ -125,8 +125,8 @@ class TxLogger {
       }
       return false
     }
-    this.eventsDecoder = globalRegistry.get('eventsDecoder').api
-    this.txListener = globalRegistry.get('txListener').api
+    this.eventsDecoder = globlalRegistry.get('eventsDecoder').api
+    this.txListener = globlalRegistry.get('txlistener').api
     this.terminal = terminal
     // dependencies
     this._deps = {

src/remixAppManager.js

@@ -8,9 +8,9 @@ const requiredModules = [ // services + layout views + system views
   'mainPanel', 'hiddenPanel', 'sidePanel', 'menuicons', 'fileExplorers',
   'terminal', 'settings', 'pluginManager']
 
-export function isNative(name) {
+export function isNative  (name) {
   const nativePlugins = ['vyper', 'workshops', 'ethdoc', 'etherscan']
-  return nativePlugins.includes(name)
+  return nativePlugins.includes(name) || requiredModules.includes(name)
 }
 
 export class RemixAppManager extends PluginManager {