From 9c0f054685b1467615e4aef167422853f6ff3af5 Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Sun, 13 Feb 2022 12:41:29 +0100
Subject: [PATCH 01/26] panel renders

---
 .../src/app/components/hidden-panel.tsx       | 13 +++-
 .../src/app/components/side-panel.tsx         | 13 +++-
 .../src/app/components/vertical-icons.tsx     | 23 ++++---
 .../app/src/lib/remix-app/remix-app.tsx       | 66 +++++++++++--------
 4 files changed, 73 insertions(+), 42 deletions(-)

diff --git a/apps/remix-ide/src/app/components/hidden-panel.tsx b/apps/remix-ide/src/app/components/hidden-panel.tsx
index bfdff5a11a..ba5fd4f59c 100644
--- a/apps/remix-ide/src/app/components/hidden-panel.tsx
+++ b/apps/remix-ide/src/app/components/hidden-panel.tsx
@@ -15,6 +15,7 @@ const profile = {
 
 export class HiddenPanel extends AbstractPanel {
   el: HTMLElement
+  dispatch: React.Dispatch<any> = () => {}
   constructor () {
     super(profile)
     this.el = document.createElement('div')
@@ -27,11 +28,17 @@ export class HiddenPanel extends AbstractPanel {
     this.renderComponent()
   }
 
-  render () {
-    return this.el
+  render (state: any) {
+    return <div className='pluginsContainer'><RemixPluginPanel header={<></>} plugins={state.plugins}/></div> 
+  }
+
+  setDispatch (dispatch: React.Dispatch<any>) {
+    this.dispatch = dispatch
   }
 
   renderComponent () {
-    ReactDOM.render(<RemixPluginPanel header={<></>} plugins={this.plugins}/>, this.el)
+    this.dispatch({
+      plugins: this.plugins,
+    })
   }
 }
diff --git a/apps/remix-ide/src/app/components/side-panel.tsx b/apps/remix-ide/src/app/components/side-panel.tsx
index b5e9dcd3df..610653f205 100644
--- a/apps/remix-ide/src/app/components/side-panel.tsx
+++ b/apps/remix-ide/src/app/components/side-panel.tsx
@@ -17,6 +17,7 @@ const sidePanel = {
 
 export class SidePanel extends AbstractPanel {
   sideelement: any
+  dispatch: React.Dispatch<any> = () => {}
   constructor() {
     super(sidePanel)
     this.sideelement = document.createElement('section')
@@ -78,11 +79,17 @@ export class SidePanel extends AbstractPanel {
     this.renderComponent()
   }
 
-  render() {
-    return this.sideelement
+  setDispatch (dispatch: React.Dispatch<any>) {
+    this.dispatch = dispatch
+  }
+
+  render(state: any) {
+    return <section className='panel plugin-manager'> <RemixPluginPanel header={<RemixUIPanelHeader plugins={state.plugins}></RemixUIPanelHeader>} plugins={state.plugins} /> </section>
   }
 
   renderComponent() {
-    ReactDOM.render(<RemixPluginPanel header={<RemixUIPanelHeader plugins={this.plugins}></RemixUIPanelHeader>} plugins={this.plugins} />, this.sideelement)
+    this.dispatch({
+      plugins: this.plugins
+    })
   }
 }
diff --git a/apps/remix-ide/src/app/components/vertical-icons.tsx b/apps/remix-ide/src/app/components/vertical-icons.tsx
index eea114b637..a55dd5a7d4 100644
--- a/apps/remix-ide/src/app/components/vertical-icons.tsx
+++ b/apps/remix-ide/src/app/components/vertical-icons.tsx
@@ -20,6 +20,7 @@ export class VerticalIcons extends Plugin {
   events: EventEmitter
   htmlElement: HTMLDivElement
   icons: Record<string, IconRecord> = {}
+  dispatch: React.Dispatch<any> = () => {}
   constructor () {
     super(profile)
     this.events = new EventEmitter()
@@ -46,12 +47,15 @@ export class VerticalIcons extends Plugin {
       ...divived.filter((value) => { return !value.isRequired })
     ]
 
-    ReactDOM.render(
-      <RemixUiVerticalIconsPanel
-        verticalIconsPlugin={this}
-        icons={sorted}
-      />,
-      this.htmlElement)
+    this.dispatch({
+      verticalIconsPlugin: this,
+      icons: sorted
+    })
+
+  }
+
+  setDispatch (dispatch: React.Dispatch<any>) {
+    this.dispatch = dispatch
   }
 
   onActivation () {
@@ -107,7 +111,10 @@ export class VerticalIcons extends Plugin {
     this.events.emit('toggleContent', name)
   }
 
-  render () {
-    return this.htmlElement
+  render (state: any) {
+    return  <div id='icon-panel'><RemixUiVerticalIconsPanel
+    verticalIconsPlugin={state.verticalIconsPlugin}
+    icons={state.icons}
+  /></div>
   }
 }
diff --git a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx b/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
index 6845ce88b1..97b9fbec81 100644
--- a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
+++ b/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useContext, useEffect, useRef, useState } from 'react'
 import './style/remix-app.css'
 import { RemixUIMainPanel } from '@remix-ui/panel'
 import MatomoDialog from './components/modals/matomo'
@@ -8,6 +8,7 @@ import { AppProvider } from './context/provider'
 import AppDialogs from './components/modals/dialogs'
 import DialogViewPlugin from './components/modals/dialogViewPlugin'
 import { AppContext } from './context/context'
+import { RemixUiVerticalIconsPanel } from '@remix-ui/vertical-icons-panel'
 
 interface IRemixAppUi {
   app: any
@@ -17,31 +18,10 @@ const RemixApp = (props: IRemixAppUi) => {
   const [appReady, setAppReady] = useState<boolean>(false)
   const [hideSidePanel, setHideSidePanel] = useState<boolean>(false)
   const sidePanelRef = useRef(null)
-  const mainPanelRef = useRef(null)
   const iconPanelRef = useRef(null)
   const hiddenPanelRef = useRef(null)
 
   useEffect(() => {
-    if (sidePanelRef.current) {
-      if (props.app.sidePanel) {
-        sidePanelRef.current.appendChild(props.app.sidePanel.render())
-      }
-    }
-    if (mainPanelRef.current) {
-      if (props.app.mainview) {
-        mainPanelRef.current.appendChild(props.app.mainview.render())
-      }
-    }
-    if (iconPanelRef.current) {
-      if (props.app.menuicons) {
-        iconPanelRef.current.appendChild(props.app.menuicons.render())
-      }
-    }
-    if (hiddenPanelRef.current) {
-      if (props.app.hiddenPanel) {
-        hiddenPanelRef.current.appendChild(props.app.hiddenPanel.render())
-      }
-    }
     async function activateApp () {
       props.app.themeModule.initTheme(() => {
         setAppReady(true)
@@ -54,6 +34,11 @@ const RemixApp = (props: IRemixAppUi) => {
     }
   }, [])
 
+
+  useEffect(() => {
+    console.log(props.app.menuicons)
+  }, [props.app.menuicons])
+
   function setListeners () {
     props.app.sidePanel.events.on('toggle', () => {
       setHideSidePanel(prev => {
@@ -73,9 +58,6 @@ const RemixApp = (props: IRemixAppUi) => {
   }
 
   const components = {
-    iconPanel: <div ref={iconPanelRef} id="icon-panel" data-id="remixIdeIconPanel" className="iconpanel bg-light"></div>,
-    sidePanel: <div ref={sidePanelRef} id="side-panel" data-id="remixIdeSidePanel" className={`sidepanel border-right border-left ${hideSidePanel ? 'd-none' : ''}`}></div>,
-    mainPanel: <div ref={mainPanelRef} id="main-panel" data-id="remixIdeMainPanel" className='mainpanel'></div>,
     hiddenPanel: <div ref={hiddenPanelRef}></div>
   }
 
@@ -93,18 +75,46 @@ const RemixApp = (props: IRemixAppUi) => {
       <MatomoDialog hide={!appReady}></MatomoDialog>
 
       <div className={`remixIDE ${appReady ? '' : 'd-none'}`} data-id="remixIDE">
-        {components.iconPanel}
-        {components.sidePanel}
+        <div ref={iconPanelRef} id="icon-panel" data-id="remixIdeIconPanel" className="iconpanel bg-light"><ViewPluginUI plugin={props.app.menuicons}></ViewPluginUI></div>
+        <div ref={sidePanelRef} id="side-panel" data-id="remixIdeSidePanel" className={`sidepanel border-right border-left ${hideSidePanel ? 'd-none' : ''}`}><ViewPluginUI plugin={props.app.sidePanel}></ViewPluginUI></div>
         <DragBar minWidth={250} refObject={sidePanelRef} hidden={hideSidePanel} setHideStatus={setHideSidePanel}></DragBar>
         <div id="main-panel" data-id="remixIdeMainPanel" className='mainpanel'>
           <RemixUIMainPanel Context={AppContext}></RemixUIMainPanel>
         </div>
       </div>
-      {components.hiddenPanel}
+      <div ref={hiddenPanelRef}><ViewPluginUI plugin={props.app.hiddenPanel}></ViewPluginUI></div>
       <AppDialogs></AppDialogs>
       <DialogViewPlugin></DialogViewPlugin>
     </AppProvider>
   )
 }
 
+interface IViewPluginUI {
+  plugin: any
+}
+
+export const ViewPluginUI = (props: IViewPluginUI) => {
+
+  const [state, setState] = useState<any>(null)
+
+  useEffect(() => {
+    console.log(props.plugin)
+    if(props.plugin.setDispatch){
+      props.plugin.setDispatch(setState)
+    }
+  }, [])
+
+  useEffect(() => {
+    console.log(state)
+  }, [state])
+
+  return (
+    <>{state? 
+      props.plugin.render(state)
+    :<></>
+    }</>
+  )
+}
+
+
 export default RemixApp

From c712d34aa0e85cb5de29002c5b69b14027e17522 Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Sun, 13 Feb 2022 12:43:14 +0100
Subject: [PATCH 02/26] cleanup refs

---
 libs/remix-ui/app/src/lib/remix-app/remix-app.tsx | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx b/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
index 97b9fbec81..616400a5a8 100644
--- a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
+++ b/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
@@ -18,8 +18,6 @@ const RemixApp = (props: IRemixAppUi) => {
   const [appReady, setAppReady] = useState<boolean>(false)
   const [hideSidePanel, setHideSidePanel] = useState<boolean>(false)
   const sidePanelRef = useRef(null)
-  const iconPanelRef = useRef(null)
-  const hiddenPanelRef = useRef(null)
 
   useEffect(() => {
     async function activateApp () {
@@ -57,10 +55,6 @@ const RemixApp = (props: IRemixAppUi) => {
     })
   }
 
-  const components = {
-    hiddenPanel: <div ref={hiddenPanelRef}></div>
-  }
-
   const value = {
     settings: props.app.settings,
     showMatamo: props.app.showMatamo,
@@ -75,21 +69,21 @@ const RemixApp = (props: IRemixAppUi) => {
       <MatomoDialog hide={!appReady}></MatomoDialog>
 
       <div className={`remixIDE ${appReady ? '' : 'd-none'}`} data-id="remixIDE">
-        <div ref={iconPanelRef} id="icon-panel" data-id="remixIdeIconPanel" className="iconpanel bg-light"><ViewPluginUI plugin={props.app.menuicons}></ViewPluginUI></div>
+        <div id="icon-panel" data-id="remixIdeIconPanel" className="iconpanel bg-light"><ViewPluginUI plugin={props.app.menuicons}></ViewPluginUI></div>
         <div ref={sidePanelRef} id="side-panel" data-id="remixIdeSidePanel" className={`sidepanel border-right border-left ${hideSidePanel ? 'd-none' : ''}`}><ViewPluginUI plugin={props.app.sidePanel}></ViewPluginUI></div>
         <DragBar minWidth={250} refObject={sidePanelRef} hidden={hideSidePanel} setHideStatus={setHideSidePanel}></DragBar>
         <div id="main-panel" data-id="remixIdeMainPanel" className='mainpanel'>
           <RemixUIMainPanel Context={AppContext}></RemixUIMainPanel>
         </div>
       </div>
-      <div ref={hiddenPanelRef}><ViewPluginUI plugin={props.app.hiddenPanel}></ViewPluginUI></div>
+      <div><ViewPluginUI plugin={props.app.hiddenPanel}></ViewPluginUI></div>
       <AppDialogs></AppDialogs>
       <DialogViewPlugin></DialogViewPlugin>
     </AppProvider>
   )
 }
 
-interface IViewPluginUI {
+export interface IViewPluginUI {
   plugin: any
 }
 

From 64aa324abf4433fcbfa052218818dc658f4de4ae Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Sun, 13 Feb 2022 13:51:44 +0100
Subject: [PATCH 03/26] settings and debugger

---
 apps/remix-ide/src/app/tabs/debugger-tab.js        | 10 ++--------
 apps/remix-ide/src/app/tabs/settings-tab.js        | 14 +++++++++++---
 libs/remix-ui/app/src/lib/remix-app/remix-app.tsx  |  4 ++--
 .../panel/src/lib/plugins/panel-plugin.tsx         |  6 ++++++
 4 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/apps/remix-ide/src/app/tabs/debugger-tab.js b/apps/remix-ide/src/app/tabs/debugger-tab.js
index 6ac7235c09..6253c594e5 100644
--- a/apps/remix-ide/src/app/tabs/debugger-tab.js
+++ b/apps/remix-ide/src/app/tabs/debugger-tab.js
@@ -51,9 +51,8 @@ export class DebuggerTab extends DebuggerApiMixin(ViewPlugin) {
     this.on('fetchAndCompile', 'sourceVerificationNotAvailable', () => {
       this.call('notification', 'toast', sourceVerificationNotAvailableToastMsg())
     })
-
-    this.renderComponent()
-    return this.el
+    
+    return <DebuggerUI debuggerAPI={this} />
   }
 
   showMessage (title, message) {
@@ -68,9 +67,4 @@ export class DebuggerTab extends DebuggerApiMixin(ViewPlugin) {
     }
   }
 
-  renderComponent () {
-    ReactDOM.render(
-      <DebuggerUI debuggerAPI={this} />
-      , this.el)
-  }
 }
diff --git a/apps/remix-ide/src/app/tabs/settings-tab.js b/apps/remix-ide/src/app/tabs/settings-tab.js
index 133ae6ee5f..507a784a69 100644
--- a/apps/remix-ide/src/app/tabs/settings-tab.js
+++ b/apps/remix-ide/src/app/tabs/settings-tab.js
@@ -33,11 +33,19 @@ module.exports = class SettingsTab extends ViewPlugin {
   }
 
   onActivation () {
-    this.renderComponent()
   }
 
-  render () {
-    return this.element
+  render() {
+    return (
+      <div id='settingsTab'>
+      <RemixUiSettings
+        config={this.config}
+        editor={this.editor}
+        _deps={this._deps}
+        useMatomoAnalytics={this.useMatomoAnalytics}
+      />
+      </div>
+    );
   }
 
   renderComponent () {
diff --git a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx b/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
index 616400a5a8..0eb62e790b 100644
--- a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
+++ b/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
@@ -92,14 +92,14 @@ export const ViewPluginUI = (props: IViewPluginUI) => {
   const [state, setState] = useState<any>(null)
 
   useEffect(() => {
-    console.log(props.plugin)
+    // console.log(props.plugin)
     if(props.plugin.setDispatch){
       props.plugin.setDispatch(setState)
     }
   }, [])
 
   useEffect(() => {
-    console.log(state)
+    // console.log(state)
   }, [state])
 
   return (
diff --git a/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx b/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx
index 9eb30391bc..7611b175d0 100644
--- a/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx
+++ b/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx
@@ -10,8 +10,14 @@ const RemixUIPanelPlugin = (props: panelPLuginProps, panelRef: any) => {
   const localRef = useRef<HTMLDivElement>(null)
   const [view, setView] = useState<JSX.Element | HTMLDivElement>()
   useEffect(() => {
+    
     const ref:any = panelRef || localRef
     if (ref.current) {
+      if(React.isValidElement(props.pluginRecord.view)) {
+        console.log('is REACT element', props.pluginRecord.profile.name)
+      }else{
+        console.log('is HTML element', props.pluginRecord.profile.name)
+      }
       if (props.pluginRecord.view) {
         if (React.isValidElement(props.pluginRecord.view)) {
           setView(props.pluginRecord.view)

From 382e51089af21ccfbb3b39b317168a349cbbda95 Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Sun, 13 Feb 2022 13:56:23 +0100
Subject: [PATCH 04/26] empty method

---
 apps/remix-ide/src/app/tabs/settings-tab.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/apps/remix-ide/src/app/tabs/settings-tab.js b/apps/remix-ide/src/app/tabs/settings-tab.js
index 507a784a69..c6df87d901 100644
--- a/apps/remix-ide/src/app/tabs/settings-tab.js
+++ b/apps/remix-ide/src/app/tabs/settings-tab.js
@@ -32,9 +32,6 @@ module.exports = class SettingsTab extends ViewPlugin {
     this.useMatomoAnalytics = null
   }
 
-  onActivation () {
-  }
-
   render() {
     return (
       <div id='settingsTab'>

From a0aafbdfce56dbe6a7dccfd7f309c572457d3e69 Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Sun, 13 Feb 2022 15:15:53 +0100
Subject: [PATCH 05/26] compile settings landing file

---
 apps/remix-ide/src/app.js                     |   1 +
 apps/remix-ide/src/app/panels/file-panel.js   |  12 +-
 apps/remix-ide/src/app/tabs/compile-tab.js    |   8 +-
 apps/remix-ide/src/app/tabs/settings-tab.js   |  69 -----------
 apps/remix-ide/src/app/tabs/settings-tab.tsx  | 114 ++++++++++++++++++
 .../src/app/ui/landing-page/landing-page.js   |  14 +--
 6 files changed, 122 insertions(+), 96 deletions(-)
 delete mode 100644 apps/remix-ide/src/app/tabs/settings-tab.js
 create mode 100644 apps/remix-ide/src/app/tabs/settings-tab.tsx

diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index 25fc2e92b4..cb01462485 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -109,6 +109,7 @@ class AppComponent {
       !Registry.getInstance()
         .get('config')
         .api.exists('settings/matomo-analytics')
+        this.showMatamo = true
     this.walkthroughService = new WalkthroughService(
       appManager,
       this.showMatamo
diff --git a/apps/remix-ide/src/app/panels/file-panel.js b/apps/remix-ide/src/app/panels/file-panel.js
index 47e40a2f5f..75d8f0e7e3 100644
--- a/apps/remix-ide/src/app/panels/file-panel.js
+++ b/apps/remix-ide/src/app/panels/file-panel.js
@@ -58,18 +58,8 @@ module.exports = class Filepanel extends ViewPlugin {
     this.currentWorkspaceMetadata = {}
   }
 
-  onActivation () {
-    this.renderComponent()
-  }
-
   render () {
-    return this.el
-  }
-
-  renderComponent () {
-    ReactDOM.render(
-      <FileSystemProvider plugin={this} />
-      , this.el)
+    return <div id='fileExplorerView'><FileSystemProvider plugin={this} /></div>
   }
 
   /**
diff --git a/apps/remix-ide/src/app/tabs/compile-tab.js b/apps/remix-ide/src/app/tabs/compile-tab.js
index 4718b4dee6..a27abb5e64 100644
--- a/apps/remix-ide/src/app/tabs/compile-tab.js
+++ b/apps/remix-ide/src/app/tabs/compile-tab.js
@@ -42,9 +42,7 @@ class CompileTab extends CompilerApiMixin(ViewPlugin) { // implements ICompilerA
   }
 
   renderComponent () {
-    ReactDOM.render(
-      <SolidityCompiler api={this}/>
-      , this.el)
+    console.log('rendering compile tab')
   }
 
   onCurrentFileChanged () {
@@ -68,9 +66,7 @@ class CompileTab extends CompilerApiMixin(ViewPlugin) { // implements ICompilerA
   }
 
   render () {
-    this.renderComponent()
-
-    return this.el
+    return <div id='compileTabView'><SolidityCompiler api={this}/></div>
   }
 
   async compileWithParameters (compilationTargets, settings) {
diff --git a/apps/remix-ide/src/app/tabs/settings-tab.js b/apps/remix-ide/src/app/tabs/settings-tab.js
deleted file mode 100644
index c6df87d901..0000000000
--- a/apps/remix-ide/src/app/tabs/settings-tab.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from 'react' // eslint-disable-line
-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
-import Registry from '../state/registry'
-
-const profile = {
-  name: 'settings',
-  displayName: 'Settings',
-  methods: ['get'],
-  events: [],
-  icon: 'assets/img/settings.webp',
-  description: 'Remix-IDE settings',
-  kind: 'settings',
-  location: 'sidePanel',
-  documentation: 'https://remix-ide.readthedocs.io/en/latest/settings.html',
-  version: packageJson.version,
-  permission: true
-}
-
-module.exports = class SettingsTab extends ViewPlugin {
-  constructor (config, editor) {
-    super(profile)
-    this.config = config
-    this.editor = editor
-    this._deps = {
-      themeModule: Registry.getInstance().get('themeModule').api
-    }
-    this.element = document.createElement('div')
-    this.element.setAttribute('id', 'settingsTab')
-    this.useMatomoAnalytics = null
-  }
-
-  render() {
-    return (
-      <div id='settingsTab'>
-      <RemixUiSettings
-        config={this.config}
-        editor={this.editor}
-        _deps={this._deps}
-        useMatomoAnalytics={this.useMatomoAnalytics}
-      />
-      </div>
-    );
-  }
-
-  renderComponent () {
-    ReactDOM.render(
-      <RemixUiSettings
-        config = { this.config }
-        editor = { this.editor }
-        _deps = { this._deps }
-        useMatomoAnalytics = {this.useMatomoAnalytics}
-      />,
-      this.element
-    )
-  }
-
-  get (key) {
-    return this.config.get(key)
-  }
-
-  updateMatomoAnalyticsChoice (isChecked) {
-    this.config.set('settings/matomo-analytics', isChecked)
-    this.useMatomoAnalytics = isChecked
-    this.renderComponent()
-  }
-}
diff --git a/apps/remix-ide/src/app/tabs/settings-tab.tsx b/apps/remix-ide/src/app/tabs/settings-tab.tsx
new file mode 100644
index 0000000000..442e3e1256
--- /dev/null
+++ b/apps/remix-ide/src/app/tabs/settings-tab.tsx
@@ -0,0 +1,114 @@
+import React, { useEffect, useState } from 'react' // eslint-disable-line
+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
+import Registry from '../state/registry'
+
+const profile = {
+  name: 'settings',
+  displayName: 'Settings',
+  methods: ['get'],
+  events: [],
+  icon: 'assets/img/settings.webp',
+  description: 'Remix-IDE settings',
+  kind: 'settings',
+  location: 'sidePanel',
+  documentation: 'https://remix-ide.readthedocs.io/en/latest/settings.html',
+  version: packageJson.version,
+  permission: true
+}
+
+module.exports = class SettingsTab extends ViewPlugin {
+  config: any = {}
+  editor: any
+  private _deps: {
+    themeModule: any // eslint-disable-line
+    
+  }
+  element: HTMLDivElement
+  public useMatomoAnalytics: any
+  dispatch: React.Dispatch<any> = () => {}
+  constructor (config, editor) {
+    super(profile)
+    this.config = config
+    this.editor = editor
+    this._deps = {
+      themeModule: Registry.getInstance().get('themeModule').api
+    }
+    this.element = document.createElement('div')
+    this.element.setAttribute('id', 'settingsTab')
+    this.useMatomoAnalytics = null
+  }
+
+  setDispatch (dispatch: React.Dispatch<any>) {
+    this.dispatch = dispatch
+    this.renderComponent()
+  }
+
+  render() {  
+    
+    return (
+      <div id='settingsTab'>
+        <ViewPluginUI plugin={this} />
+      </div>
+    );
+  }
+
+  updateComponent(state: any){
+    console.log('updateComponent', state)
+    return <RemixUiSettings
+    config={state.config}
+    editor={state.editor}
+    _deps={state._deps}
+    useMatomoAnalytics={state.useMatomoAnalytics}
+    themeModule = {state._deps.themeModule}
+  />
+  }
+
+  renderComponent () {
+    console.log('dispatching', this.useMatomoAnalytics, this.dispatch)
+    this.dispatch(this)
+  }
+
+  get (key) {
+    return this.config.get(key)
+  }
+
+  updateMatomoAnalyticsChoice (isChecked) {
+    console.log('update matomo')
+    this.config.set('settings/matomo-analytics', isChecked)
+    this.useMatomoAnalytics = isChecked
+    this.dispatch({
+      ...this
+    })
+  }
+}
+
+
+export interface IViewPluginUI {
+  plugin: any
+}
+
+export const ViewPluginUI = (props: IViewPluginUI) => {
+
+  const [state, setState] = useState<any>(null)
+
+  useEffect(() => {
+    console.log(props.plugin)
+    if(props.plugin.setDispatch){
+      props.plugin.setDispatch(setState)
+    }
+  }, [])
+
+  useEffect(() => {
+    console.log(state)
+  }, [state])
+
+  return (
+    <>{state? 
+      <div>{props.plugin.updateComponent(state)}</div>
+    :<></>
+    }</>
+  )
+}
\ No newline at end of file
diff --git a/apps/remix-ide/src/app/ui/landing-page/landing-page.js b/apps/remix-ide/src/app/ui/landing-page/landing-page.js
index b05271dc96..efdb5031fb 100644
--- a/apps/remix-ide/src/app/ui/landing-page/landing-page.js
+++ b/apps/remix-ide/src/app/ui/landing-page/landing-page.js
@@ -31,15 +31,9 @@ export class LandingPage extends ViewPlugin {
   }
 
   render () {
-    this.renderComponent()
-    return this.el
-  }
-
-  renderComponent () {
-    ReactDOM.render(
-      <RemixUiHomeTab
-        plugin={this}
-      />
-      , this.el)
+    return <div id='landingPageHomeContainer' className='remixui_homeContainer justify-content-between bg-light d-flex' data-id='landingPageHomeContainer'>      <RemixUiHomeTab
+    plugin={this}
+  /></div>
   }
+  
 }

From 3ca67e5865684a2b2e684aae64e0ce0cf807ad8f Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Sun, 13 Feb 2022 15:23:30 +0100
Subject: [PATCH 06/26] change view plugin

---
 .../src/app/plugins/viewReactPlugin.ts        | 27 +++++++++++++++++++
 apps/remix-ide/src/app/tabs/settings-tab.tsx  |  3 ++-
 .../src/app/ui/landing-page/landing-page.js   |  5 ++--
 .../panel/src/lib/plugins/panel-plugin.tsx    |  4 +--
 4 files changed, 34 insertions(+), 5 deletions(-)
 create mode 100644 apps/remix-ide/src/app/plugins/viewReactPlugin.ts

diff --git a/apps/remix-ide/src/app/plugins/viewReactPlugin.ts b/apps/remix-ide/src/app/plugins/viewReactPlugin.ts
new file mode 100644
index 0000000000..da2f108de9
--- /dev/null
+++ b/apps/remix-ide/src/app/plugins/viewReactPlugin.ts
@@ -0,0 +1,27 @@
+import type { Profile, LocationProfile } from '@remixproject/plugin-utils'
+import { Plugin } from '@remixproject/engine'
+
+
+export function isView<P extends Profile>(profile: Profile): profile is (ViewProfile & P) {
+  return !!profile['location']
+}
+
+export type ViewProfile = Profile & LocationProfile
+
+export abstract class ViewReactPlugin extends Plugin {
+  abstract render(): any
+
+  constructor(public profile: ViewProfile) {
+    super(profile)
+  }
+
+  async activate() {
+    await this.call(this.profile.location, 'addView', this.profile, this.render())
+    super.activate()
+  }
+
+  deactivate() {
+    this.call(this.profile.location, 'removeView', this.profile)
+    super.deactivate()
+  }
+}
\ No newline at end of file
diff --git a/apps/remix-ide/src/app/tabs/settings-tab.tsx b/apps/remix-ide/src/app/tabs/settings-tab.tsx
index 442e3e1256..0213123d9f 100644
--- a/apps/remix-ide/src/app/tabs/settings-tab.tsx
+++ b/apps/remix-ide/src/app/tabs/settings-tab.tsx
@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom'
 import * as packageJson from '../../../../../package.json'
 import { RemixUiSettings } from '@remix-ui/settings' //eslint-disable-line
 import Registry from '../state/registry'
+import { ViewReactPlugin } from '../plugins/viewReactPlugin'
 
 const profile = {
   name: 'settings',
@@ -19,7 +20,7 @@ const profile = {
   permission: true
 }
 
-module.exports = class SettingsTab extends ViewPlugin {
+module.exports = class SettingsTab extends ViewReactPlugin {
   config: any = {}
   editor: any
   private _deps: {
diff --git a/apps/remix-ide/src/app/ui/landing-page/landing-page.js b/apps/remix-ide/src/app/ui/landing-page/landing-page.js
index efdb5031fb..7c9268f11c 100644
--- a/apps/remix-ide/src/app/ui/landing-page/landing-page.js
+++ b/apps/remix-ide/src/app/ui/landing-page/landing-page.js
@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom'
 import * as packageJson from '../../../../../../package.json'
 import { ViewPlugin } from '@remixproject/engine-web'
 import { RemixUiHomeTab } from '@remix-ui/home-tab' // eslint-disable-line
+import { ViewReactPlugin } from '../../plugins/viewReactPlugin'
 
 const profile = {
   name: 'home',
@@ -15,7 +16,7 @@ const profile = {
   location: 'mainPanel',
   version: packageJson.version
 }
-export class LandingPage extends ViewPlugin {
+export class LandingPage extends ViewReactPlugin {
   constructor (appManager, verticalIcons, fileManager, filePanel, contentImport) {
     super(profile)
     this.profile = profile
@@ -35,5 +36,5 @@ export class LandingPage extends ViewPlugin {
     plugin={this}
   /></div>
   }
-  
+
 }
diff --git a/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx b/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx
index 7611b175d0..af826ead04 100644
--- a/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx
+++ b/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx
@@ -14,9 +14,9 @@ const RemixUIPanelPlugin = (props: panelPLuginProps, panelRef: any) => {
     const ref:any = panelRef || localRef
     if (ref.current) {
       if(React.isValidElement(props.pluginRecord.view)) {
-        console.log('is REACT element', props.pluginRecord.profile.name)
+        // console.log('is REACT element', props.pluginRecord.profile.name)
       }else{
-        console.log('is HTML element', props.pluginRecord.profile.name)
+        console.info('is HTML element', props.pluginRecord.profile.name)
       }
       if (props.pluginRecord.view) {
         if (React.isValidElement(props.pluginRecord.view)) {

From c9c41b987e7a062b098e6b74e5103356a86d3d47 Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Sun, 13 Feb 2022 15:25:03 +0100
Subject: [PATCH 07/26] rm matomo true

---
 apps/remix-ide/src/app.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index cb01462485..25fc2e92b4 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -109,7 +109,6 @@ class AppComponent {
       !Registry.getInstance()
         .get('config')
         .api.exists('settings/matomo-analytics')
-        this.showMatamo = true
     this.walkthroughService = new WalkthroughService(
       appManager,
       this.showMatamo

From 8e9492e18d9488cc47d8f0a83ed5c02dd3d2754b Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Sun, 13 Feb 2022 15:58:19 +0100
Subject: [PATCH 08/26] plugin manager

---
 .../components/plugin-manager-component.js    | 33 +++++++++++------
 .../src/app/plugins/ViewPluginUI.tsx          | 29 +++++++++++++++
 apps/remix-ide/src/app/tabs/settings-tab.tsx  | 35 ++-----------------
 3 files changed, 53 insertions(+), 44 deletions(-)
 create mode 100644 apps/remix-ide/src/app/plugins/ViewPluginUI.tsx

diff --git a/apps/remix-ide/src/app/components/plugin-manager-component.js b/apps/remix-ide/src/app/components/plugin-manager-component.js
index 72acd7cbf6..6b578743d1 100644
--- a/apps/remix-ide/src/app/components/plugin-manager-component.js
+++ b/apps/remix-ide/src/app/components/plugin-manager-component.js
@@ -3,6 +3,7 @@ import React from 'react' // eslint-disable-line
 import ReactDOM from 'react-dom'
 import {RemixUiPluginManager} from '@remix-ui/plugin-manager' // eslint-disable-line
 import * as packageJson from '../../../../../package.json'
+import { ViewPluginUI } from '../plugins/ViewPluginUI'
 const _paq = window._paq = window._paq || []
 
 const profile = {
@@ -31,6 +32,7 @@ class PluginManagerComponent extends ViewPlugin {
     this.inactivePlugins = []
     this.activeProfiles = this.appManager.actives
     this._paq = _paq
+    this.dispatch = null
     this.listenOnEvent()
   }
 
@@ -40,7 +42,7 @@ class PluginManagerComponent extends ViewPlugin {
    * RemixAppManager
    * @param {string} name name of Plugin
    */
-  isActive (name) {
+  isActive = (name) =>{
     return this.appManager.actives.includes(name)
   }
 
@@ -49,7 +51,7 @@ class PluginManagerComponent extends ViewPlugin {
    * RemixAppManager to enable plugin activation
    * @param {string} name name of Plugin
    */
-  activateP (name) {
+  activateP = (name) => {
     this.appManager.activatePlugin(name)
     _paq.push(['trackEvent', 'manager', 'activate', name])
   }
@@ -60,7 +62,7 @@ class PluginManagerComponent extends ViewPlugin {
    * @param {Profile} pluginName
    * @returns {void}
    */
-  async activateAndRegisterLocalPlugin (localPlugin) {
+  activateAndRegisterLocalPlugin = async (localPlugin) => {
     if (localPlugin) {
       this.engine.register(localPlugin)
       this.appManager.activatePlugin(localPlugin.profile.name)
@@ -75,28 +77,37 @@ class PluginManagerComponent extends ViewPlugin {
    * of the plugin
    * @param {string} name name of Plugin
    */
-  deactivateP (name) {
+  deactivateP = (name) => {
     this.call('manager', 'deactivatePlugin', name)
     _paq.push(['trackEvent', 'manager', 'deactivate', name])
   }
 
   onActivation () {
+
+  }
+
+  setDispatch (dispatch) {
+    this.dispatch = dispatch
     this.renderComponent()
   }
 
+  updateComponent(state){
+    return <div id='pluginManager'><RemixUiPluginManager
+      pluginComponent={state}/></div>
+  }
+
   renderComponent () {
-    ReactDOM.render(
-      <RemixUiPluginManager
-        pluginComponent={this}
-      />,
-      this.htmlElement)
+    if(this.dispatch) this.dispatch({...this, activePlugins: this.activePlugins, inactivePlugins: this.inactivePlugins})
   }
 
   render () {
-    return this.htmlElement
+    return (
+        <ViewPluginUI plugin={this} />
+    );
+    
   }
 
-  getAndFilterPlugins (filter) {
+  getAndFilterPlugins = (filter) => {
     this.filter = typeof filter === 'string' ? filter.toLowerCase() : this.filter
 
     const isFiltered = (profile) => (profile.displayName ? profile.displayName : profile.name).toLowerCase().includes(this.filter)
diff --git a/apps/remix-ide/src/app/plugins/ViewPluginUI.tsx b/apps/remix-ide/src/app/plugins/ViewPluginUI.tsx
new file mode 100644
index 0000000000..61682bb493
--- /dev/null
+++ b/apps/remix-ide/src/app/plugins/ViewPluginUI.tsx
@@ -0,0 +1,29 @@
+import React from "react"
+import { useEffect, useState } from "react"
+
+interface IViewPluginUI {
+    plugin: any
+  }
+  
+export const ViewPluginUI = (props: IViewPluginUI) => {
+  
+    const [state, setState] = useState<any>(null)
+  
+    useEffect(() => {
+      console.log(props.plugin)
+      if(props.plugin.setDispatch){
+        props.plugin.setDispatch(setState)
+      }
+    }, [])
+  
+    useEffect(() => {
+      console.log(state)
+    }, [state])
+  
+    return (
+      <>{state? 
+        <div>{props.plugin.updateComponent(state)}</div>
+      :<></>
+      }</>
+    )
+  }
\ No newline at end of file
diff --git a/apps/remix-ide/src/app/tabs/settings-tab.tsx b/apps/remix-ide/src/app/tabs/settings-tab.tsx
index 0213123d9f..cd5796a426 100644
--- a/apps/remix-ide/src/app/tabs/settings-tab.tsx
+++ b/apps/remix-ide/src/app/tabs/settings-tab.tsx
@@ -5,6 +5,7 @@ import * as packageJson from '../../../../../package.json'
 import { RemixUiSettings } from '@remix-ui/settings' //eslint-disable-line
 import Registry from '../state/registry'
 import { ViewReactPlugin } from '../plugins/viewReactPlugin'
+import { ViewPluginUI } from '../plugins/ViewPluginUI'
 
 const profile = {
   name: 'settings',
@@ -47,8 +48,7 @@ module.exports = class SettingsTab extends ViewReactPlugin {
     this.renderComponent()
   }
 
-  render() {  
-    
+  render() {      
     return (
       <div id='settingsTab'>
         <ViewPluginUI plugin={this} />
@@ -57,7 +57,6 @@ module.exports = class SettingsTab extends ViewReactPlugin {
   }
 
   updateComponent(state: any){
-    console.log('updateComponent', state)
     return <RemixUiSettings
     config={state.config}
     editor={state.editor}
@@ -68,7 +67,6 @@ module.exports = class SettingsTab extends ViewReactPlugin {
   }
 
   renderComponent () {
-    console.log('dispatching', this.useMatomoAnalytics, this.dispatch)
     this.dispatch(this)
   }
 
@@ -77,39 +75,10 @@ module.exports = class SettingsTab extends ViewReactPlugin {
   }
 
   updateMatomoAnalyticsChoice (isChecked) {
-    console.log('update matomo')
     this.config.set('settings/matomo-analytics', isChecked)
     this.useMatomoAnalytics = isChecked
     this.dispatch({
       ...this
     })
   }
-}
-
-
-export interface IViewPluginUI {
-  plugin: any
-}
-
-export const ViewPluginUI = (props: IViewPluginUI) => {
-
-  const [state, setState] = useState<any>(null)
-
-  useEffect(() => {
-    console.log(props.plugin)
-    if(props.plugin.setDispatch){
-      props.plugin.setDispatch(setState)
-    }
-  }, [])
-
-  useEffect(() => {
-    console.log(state)
-  }, [state])
-
-  return (
-    <>{state? 
-      <div>{props.plugin.updateComponent(state)}</div>
-    :<></>
-    }</>
-  )
 }
\ No newline at end of file

From 9c1c1f6e81bbb2ab6906380f13f9ee62b7a0d02e Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Sun, 13 Feb 2022 17:03:23 +0100
Subject: [PATCH 09/26] refactor

---
 .../src/app/components/hidden-panel.tsx       |  9 ++++-
 .../src/app/components/main-panel.tsx         | 20 ++++++++---
 .../components/plugin-manager-component.js    |  4 ---
 .../src/app/components/side-panel.tsx         |  9 ++++-
 .../src/app/components/vertical-icons.tsx     | 11 ++++--
 .../app/src/lib/remix-app/remix-app.tsx       | 34 ++-----------------
 libs/remix-ui/panel/src/lib/plugins/panel.css |  5 ---
 7 files changed, 44 insertions(+), 48 deletions(-)

diff --git a/apps/remix-ide/src/app/components/hidden-panel.tsx b/apps/remix-ide/src/app/components/hidden-panel.tsx
index ba5fd4f59c..fbd1a46790 100644
--- a/apps/remix-ide/src/app/components/hidden-panel.tsx
+++ b/apps/remix-ide/src/app/components/hidden-panel.tsx
@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom' // eslint-disable-line
 import { AbstractPanel } from './panel'
 import * as packageJson from '../../../../../package.json'
 import { RemixPluginPanel } from '@remix-ui/panel'
+import { ViewPluginUI } from '../plugins/ViewPluginUI'
 
 const profile = {
   name: 'hiddenPanel',
@@ -28,7 +29,7 @@ export class HiddenPanel extends AbstractPanel {
     this.renderComponent()
   }
 
-  render (state: any) {
+  updateComponent (state: any) {
     return <div className='pluginsContainer'><RemixPluginPanel header={<></>} plugins={state.plugins}/></div> 
   }
 
@@ -36,6 +37,12 @@ export class HiddenPanel extends AbstractPanel {
     this.dispatch = dispatch
   }
 
+  render() {      
+    return (
+        <ViewPluginUI plugin={this} />
+    );
+  }
+
   renderComponent () {
     this.dispatch({
       plugins: this.plugins,
diff --git a/apps/remix-ide/src/app/components/main-panel.tsx b/apps/remix-ide/src/app/components/main-panel.tsx
index b9d180f194..2fdde8548d 100644
--- a/apps/remix-ide/src/app/components/main-panel.tsx
+++ b/apps/remix-ide/src/app/components/main-panel.tsx
@@ -3,6 +3,7 @@ import { AbstractPanel } from './panel'
 import ReactDOM from 'react-dom' // eslint-disable-line
 import { RemixPluginPanel } from '@remix-ui/panel'
 import packageJson from '../../../../../package.json'
+import { ViewPluginUI } from '../plugins/ViewPluginUI'
 
 const profile = {
   name: 'mainPanel',
@@ -14,6 +15,7 @@ const profile = {
 
 export class MainPanel extends AbstractPanel {
     element: HTMLDivElement
+    dispatch: React.Dispatch<any> = () => {}
     constructor (config) {
       super(profile)
       this.element = document.createElement('div')
@@ -22,6 +24,10 @@ export class MainPanel extends AbstractPanel {
       // this.config = config
     }
 
+    setDispatch (dispatch: React.Dispatch<any>) {
+      this.dispatch = dispatch
+    }
+
     onActivation () {
       this.renderComponent()
     }
@@ -47,11 +53,17 @@ export class MainPanel extends AbstractPanel {
       this.renderComponent()
     }
 
-    render () {
-      return this.element
+    renderComponent () {
+      this.dispatch({
+        plugins: this.plugins
+      })
+    }
+
+    render() {      
+      return <div style={{height: '100%', width: '100%'}} data-id='mainPanelPluginsContainer'><ViewPluginUI plugin={this} /></div>
     }
 
-    renderComponent () {
-      ReactDOM.render(<RemixPluginPanel header={<></>} plugins={this.plugins}/>, this.element)
+    updateComponent (state: any) {
+      return <RemixPluginPanel header={<></>} plugins={state.plugins}/>
     }
 }
diff --git a/apps/remix-ide/src/app/components/plugin-manager-component.js b/apps/remix-ide/src/app/components/plugin-manager-component.js
index 6b578743d1..d2a192dee0 100644
--- a/apps/remix-ide/src/app/components/plugin-manager-component.js
+++ b/apps/remix-ide/src/app/components/plugin-manager-component.js
@@ -82,10 +82,6 @@ class PluginManagerComponent extends ViewPlugin {
     _paq.push(['trackEvent', 'manager', 'deactivate', name])
   }
 
-  onActivation () {
-
-  }
-
   setDispatch (dispatch) {
     this.dispatch = dispatch
     this.renderComponent()
diff --git a/apps/remix-ide/src/app/components/side-panel.tsx b/apps/remix-ide/src/app/components/side-panel.tsx
index 610653f205..9d1d954bb2 100644
--- a/apps/remix-ide/src/app/components/side-panel.tsx
+++ b/apps/remix-ide/src/app/components/side-panel.tsx
@@ -5,6 +5,7 @@ import { AbstractPanel } from './panel'
 import { RemixPluginPanel } from '@remix-ui/panel'
 import packageJson from '../../../../../package.json'
 import RemixUIPanelHeader from 'libs/remix-ui/panel/src/lib/plugins/panel-header'
+import { ViewPluginUI } from '../plugins/ViewPluginUI'
 // const csjs = require('csjs-inject')
 
 const sidePanel = {
@@ -83,7 +84,13 @@ export class SidePanel extends AbstractPanel {
     this.dispatch = dispatch
   }
 
-  render(state: any) {
+  render() {      
+    return (
+        <ViewPluginUI plugin={this} />
+    );
+  }
+
+  updateComponent(state: any) {
     return <section className='panel plugin-manager'> <RemixPluginPanel header={<RemixUIPanelHeader plugins={state.plugins}></RemixUIPanelHeader>} plugins={state.plugins} /> </section>
   }
 
diff --git a/apps/remix-ide/src/app/components/vertical-icons.tsx b/apps/remix-ide/src/app/components/vertical-icons.tsx
index a55dd5a7d4..ed482b740b 100644
--- a/apps/remix-ide/src/app/components/vertical-icons.tsx
+++ b/apps/remix-ide/src/app/components/vertical-icons.tsx
@@ -6,6 +6,7 @@ import { Plugin } from '@remixproject/engine'
 import { EventEmitter } from 'events'
 import { IconRecord, RemixUiVerticalIconsPanel } from '@remix-ui/vertical-icons-panel'
 import { Profile } from '@remixproject/plugin-utils'
+import { ViewPluginUI } from '../plugins/ViewPluginUI'
 
 const profile = {
   name: 'menuicons',
@@ -111,10 +112,16 @@ export class VerticalIcons extends Plugin {
     this.events.emit('toggleContent', name)
   }
 
-  render (state: any) {
+  updateComponent(state: any){
     return  <div id='icon-panel'><RemixUiVerticalIconsPanel
     verticalIconsPlugin={state.verticalIconsPlugin}
     icons={state.icons}
-  /></div>
+    /></div>
+  }
+
+  render() {      
+    return (
+        <ViewPluginUI plugin={this} />
+    );
   }
 }
diff --git a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx b/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
index 0eb62e790b..c4f117c140 100644
--- a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
+++ b/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
@@ -69,46 +69,18 @@ const RemixApp = (props: IRemixAppUi) => {
       <MatomoDialog hide={!appReady}></MatomoDialog>
 
       <div className={`remixIDE ${appReady ? '' : 'd-none'}`} data-id="remixIDE">
-        <div id="icon-panel" data-id="remixIdeIconPanel" className="iconpanel bg-light"><ViewPluginUI plugin={props.app.menuicons}></ViewPluginUI></div>
-        <div ref={sidePanelRef} id="side-panel" data-id="remixIdeSidePanel" className={`sidepanel border-right border-left ${hideSidePanel ? 'd-none' : ''}`}><ViewPluginUI plugin={props.app.sidePanel}></ViewPluginUI></div>
+        <div id="icon-panel" data-id="remixIdeIconPanel" className="iconpanel bg-light">{props.app.menuicons.render()}</div>
+        <div ref={sidePanelRef} id="side-panel" data-id="remixIdeSidePanel" className={`sidepanel border-right border-left ${hideSidePanel ? 'd-none' : ''}`}>{props.app.sidePanel.render()}</div>
         <DragBar minWidth={250} refObject={sidePanelRef} hidden={hideSidePanel} setHideStatus={setHideSidePanel}></DragBar>
         <div id="main-panel" data-id="remixIdeMainPanel" className='mainpanel'>
           <RemixUIMainPanel Context={AppContext}></RemixUIMainPanel>
         </div>
       </div>
-      <div><ViewPluginUI plugin={props.app.hiddenPanel}></ViewPluginUI></div>
+      <div>{props.app.hiddenPanel.render()}</div>
       <AppDialogs></AppDialogs>
       <DialogViewPlugin></DialogViewPlugin>
     </AppProvider>
   )
 }
 
-export interface IViewPluginUI {
-  plugin: any
-}
-
-export const ViewPluginUI = (props: IViewPluginUI) => {
-
-  const [state, setState] = useState<any>(null)
-
-  useEffect(() => {
-    // console.log(props.plugin)
-    if(props.plugin.setDispatch){
-      props.plugin.setDispatch(setState)
-    }
-  }, [])
-
-  useEffect(() => {
-    // console.log(state)
-  }, [state])
-
-  return (
-    <>{state? 
-      props.plugin.render(state)
-    :<></>
-    }</>
-  )
-}
-
-
 export default RemixApp
diff --git a/libs/remix-ui/panel/src/lib/plugins/panel.css b/libs/remix-ui/panel/src/lib/plugins/panel.css
index d2b2133667..8356d6ef15 100644
--- a/libs/remix-ui/panel/src/lib/plugins/panel.css
+++ b/libs/remix-ui/panel/src/lib/plugins/panel.css
@@ -76,11 +76,6 @@ iframe {
     display: block;
 }
 
-.pluginsContainer {
-    height: 100%;
-    overflow-y: hidden;
-}
-
 #editorView {
     height: 100%;
     width: 100%;

From 0463023858a2564feab3e6139082ca31a06e43d3 Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Sun, 13 Feb 2022 17:26:29 +0100
Subject: [PATCH 10/26] udapp

---
 apps/remix-ide/src/app/panels/tab-proxy.js |  1 -
 apps/remix-ide/src/app/udapp/run-tab.js    | 10 +---------
 2 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/apps/remix-ide/src/app/panels/tab-proxy.js b/apps/remix-ide/src/app/panels/tab-proxy.js
index 267b54d853..2277ab07f9 100644
--- a/apps/remix-ide/src/app/panels/tab-proxy.js
+++ b/apps/remix-ide/src/app/panels/tab-proxy.js
@@ -11,7 +11,6 @@ const profile = {
   kind: 'other'
 }
 
-// @todo(#650) Merge this with MainPanel into one plugin
 export class TabProxy extends Plugin {
   constructor (fileManager, editor) {
     super(profile)
diff --git a/apps/remix-ide/src/app/udapp/run-tab.js b/apps/remix-ide/src/app/udapp/run-tab.js
index 5fe56053fa..63de28c3e6 100644
--- a/apps/remix-ide/src/app/udapp/run-tab.js
+++ b/apps/remix-ide/src/app/udapp/run-tab.js
@@ -40,9 +40,6 @@ export class RunTab extends ViewPlugin {
     this.el = document.createElement('div')
   }
 
-  onActivation () {
-    this.renderComponent()
-  }
 
   setupEvents () {
     this.blockchain.events.on('newTransaction', (tx, receipt) => {
@@ -86,14 +83,9 @@ export class RunTab extends ViewPlugin {
   }
 
   render () {
-    return this.el
+    return  <RunTabUI plugin={this} />
   }
 
-  renderComponent () {
-    ReactDOM.render(
-      <RunTabUI plugin={this} />
-      , this.el)
-  }
 
   onReady (api) {
     this.REACT_API = api

From 33d670bcef4b3b4cd1763526e76a6f2d596355e6 Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Sun, 13 Feb 2022 20:44:38 +0100
Subject: [PATCH 11/26] ui fix

---
 apps/remix-ide/src/app/components/hidden-panel.tsx          | 4 ++--
 .../src/app/components/plugin-manager-component.js          | 6 +++---
 apps/remix-ide/src/app/components/side-panel.tsx            | 4 ++--
 apps/remix-ide/src/app/components/vertical-icons.tsx        | 6 +++---
 apps/remix-ide/src/app/tabs/debugger-tab.js                 | 3 +--
 apps/remix-ide/src/app/udapp/run-tab.js                     | 2 +-
 6 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/apps/remix-ide/src/app/components/hidden-panel.tsx b/apps/remix-ide/src/app/components/hidden-panel.tsx
index fbd1a46790..d208a1b79d 100644
--- a/apps/remix-ide/src/app/components/hidden-panel.tsx
+++ b/apps/remix-ide/src/app/components/hidden-panel.tsx
@@ -30,7 +30,7 @@ export class HiddenPanel extends AbstractPanel {
   }
 
   updateComponent (state: any) {
-    return <div className='pluginsContainer'><RemixPluginPanel header={<></>} plugins={state.plugins}/></div> 
+    return <RemixPluginPanel header={<></>} plugins={state.plugins}/>
   }
 
   setDispatch (dispatch: React.Dispatch<any>) {
@@ -39,7 +39,7 @@ export class HiddenPanel extends AbstractPanel {
 
   render() {      
     return (
-        <ViewPluginUI plugin={this} />
+      <div className='pluginsContainer'><ViewPluginUI plugin={this} /></div>
     );
   }
 
diff --git a/apps/remix-ide/src/app/components/plugin-manager-component.js b/apps/remix-ide/src/app/components/plugin-manager-component.js
index d2a192dee0..8836157cc5 100644
--- a/apps/remix-ide/src/app/components/plugin-manager-component.js
+++ b/apps/remix-ide/src/app/components/plugin-manager-component.js
@@ -88,8 +88,8 @@ class PluginManagerComponent extends ViewPlugin {
   }
 
   updateComponent(state){
-    return <div id='pluginManager'><RemixUiPluginManager
-      pluginComponent={state}/></div>
+    return <RemixUiPluginManager
+      pluginComponent={state}/>
   }
 
   renderComponent () {
@@ -98,7 +98,7 @@ class PluginManagerComponent extends ViewPlugin {
 
   render () {
     return (
-        <ViewPluginUI plugin={this} />
+      <div id='pluginManager'><ViewPluginUI plugin={this} /></div>
     );
     
   }
diff --git a/apps/remix-ide/src/app/components/side-panel.tsx b/apps/remix-ide/src/app/components/side-panel.tsx
index 9d1d954bb2..60d323d88e 100644
--- a/apps/remix-ide/src/app/components/side-panel.tsx
+++ b/apps/remix-ide/src/app/components/side-panel.tsx
@@ -86,12 +86,12 @@ export class SidePanel extends AbstractPanel {
 
   render() {      
     return (
-        <ViewPluginUI plugin={this} />
+      <section className='panel plugin-manager'> <ViewPluginUI plugin={this} /></section>
     );
   }
 
   updateComponent(state: any) {
-    return <section className='panel plugin-manager'> <RemixPluginPanel header={<RemixUIPanelHeader plugins={state.plugins}></RemixUIPanelHeader>} plugins={state.plugins} /> </section>
+    return <RemixPluginPanel header={<RemixUIPanelHeader plugins={state.plugins}></RemixUIPanelHeader>} plugins={state.plugins} />
   }
 
   renderComponent() {
diff --git a/apps/remix-ide/src/app/components/vertical-icons.tsx b/apps/remix-ide/src/app/components/vertical-icons.tsx
index ed482b740b..dab66a52cd 100644
--- a/apps/remix-ide/src/app/components/vertical-icons.tsx
+++ b/apps/remix-ide/src/app/components/vertical-icons.tsx
@@ -113,15 +113,15 @@ export class VerticalIcons extends Plugin {
   }
 
   updateComponent(state: any){
-    return  <div id='icon-panel'><RemixUiVerticalIconsPanel
+    return  <RemixUiVerticalIconsPanel
     verticalIconsPlugin={state.verticalIconsPlugin}
     icons={state.icons}
-    /></div>
+    />
   }
 
   render() {      
     return (
-        <ViewPluginUI plugin={this} />
+      <div id='icon-panel'><ViewPluginUI plugin={this} /></div>
     );
   }
 }
diff --git a/apps/remix-ide/src/app/tabs/debugger-tab.js b/apps/remix-ide/src/app/tabs/debugger-tab.js
index 6253c594e5..bd19b88137 100644
--- a/apps/remix-ide/src/app/tabs/debugger-tab.js
+++ b/apps/remix-ide/src/app/tabs/debugger-tab.js
@@ -51,8 +51,7 @@ export class DebuggerTab extends DebuggerApiMixin(ViewPlugin) {
     this.on('fetchAndCompile', 'sourceVerificationNotAvailable', () => {
       this.call('notification', 'toast', sourceVerificationNotAvailableToastMsg())
     })
-    
-    return <DebuggerUI debuggerAPI={this} />
+    return <div className={css.debuggerTabView} id='debugView'><DebuggerUI debuggerAPI={this} /></div>
   }
 
   showMessage (title, message) {
diff --git a/apps/remix-ide/src/app/udapp/run-tab.js b/apps/remix-ide/src/app/udapp/run-tab.js
index 63de28c3e6..10d99bfd2b 100644
--- a/apps/remix-ide/src/app/udapp/run-tab.js
+++ b/apps/remix-ide/src/app/udapp/run-tab.js
@@ -83,7 +83,7 @@ export class RunTab extends ViewPlugin {
   }
 
   render () {
-    return  <RunTabUI plugin={this} />
+    return  <div><RunTabUI plugin={this} /></div>
   }
 
 

From bf85b160407f56f4dab2921bc43dbdb9e40f353b Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Sun, 13 Feb 2022 20:46:38 +0100
Subject: [PATCH 12/26] rm div

---
 apps/remix-ide/src/app/plugins/ViewPluginUI.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/remix-ide/src/app/plugins/ViewPluginUI.tsx b/apps/remix-ide/src/app/plugins/ViewPluginUI.tsx
index 61682bb493..a7be03b76a 100644
--- a/apps/remix-ide/src/app/plugins/ViewPluginUI.tsx
+++ b/apps/remix-ide/src/app/plugins/ViewPluginUI.tsx
@@ -22,7 +22,7 @@ export const ViewPluginUI = (props: IViewPluginUI) => {
   
     return (
       <>{state? 
-        <div>{props.plugin.updateComponent(state)}</div>
+        <>{props.plugin.updateComponent(state)}</>
       :<></>
       }</>
     )

From 6a067f40cc1f9892e3bfccd834e8d9e9ec455f79 Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Sun, 13 Feb 2022 20:54:55 +0100
Subject: [PATCH 13/26] rm consoles

---
 apps/remix-ide/src/app/editor/editor.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/apps/remix-ide/src/app/editor/editor.js b/apps/remix-ide/src/app/editor/editor.js
index 1bc0a00b82..3416af663c 100644
--- a/apps/remix-ide/src/app/editor/editor.js
+++ b/apps/remix-ide/src/app/editor/editor.js
@@ -61,6 +61,12 @@ class Editor extends Plugin {
 
     // to be implemented by the react component
     this.api = {}
+    this.dispatch = null
+  }
+
+  setDispatch (dispatch) {
+    this.dispatch = dispatch
+    this.renderComponent()
   }
 
   render () {

From 1b19874d46d9878de02a62e01abab6b15363f94c Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Sun, 13 Feb 2022 20:55:05 +0100
Subject: [PATCH 14/26] rm console

---
 apps/remix-ide/src/app/plugins/ViewPluginUI.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/remix-ide/src/app/plugins/ViewPluginUI.tsx b/apps/remix-ide/src/app/plugins/ViewPluginUI.tsx
index a7be03b76a..9a4b84489e 100644
--- a/apps/remix-ide/src/app/plugins/ViewPluginUI.tsx
+++ b/apps/remix-ide/src/app/plugins/ViewPluginUI.tsx
@@ -10,14 +10,14 @@ export const ViewPluginUI = (props: IViewPluginUI) => {
     const [state, setState] = useState<any>(null)
   
     useEffect(() => {
-      console.log(props.plugin)
+      // console.log(props.plugin)
       if(props.plugin.setDispatch){
         props.plugin.setDispatch(setState)
       }
     }, [])
   
     useEffect(() => {
-      console.log(state)
+      // console.log(state)
     }, [state])
   
     return (

From ffbe09a017254291abc98dd02ee7c7d640002ae2 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Mon, 14 Feb 2022 20:25:53 +0100
Subject: [PATCH 15/26] editor

---
 apps/remix-ide/src/app/editor/editor.js | 56 ++++++++++++++++++-------
 1 file changed, 41 insertions(+), 15 deletions(-)

diff --git a/apps/remix-ide/src/app/editor/editor.js b/apps/remix-ide/src/app/editor/editor.js
index 3416af663c..2e2de4b8cc 100644
--- a/apps/remix-ide/src/app/editor/editor.js
+++ b/apps/remix-ide/src/app/editor/editor.js
@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom'
 import { EditorUI } from '@remix-ui/editor' // eslint-disable-line
 import { Plugin } from '@remixproject/engine'
 import * as packageJson from '../../../../../package.json'
+import { ViewPluginUI } from '../plugins/ViewPluginUI'
 
 const EventManager = require('../../lib/events')
 
@@ -62,15 +63,39 @@ class Editor extends Plugin {
     // to be implemented by the react component
     this.api = {}
     this.dispatch = null
+    this.ref = null
   }
 
   setDispatch (dispatch) {
     this.dispatch = dispatch
-    this.renderComponent()
+
+    this.ref.currentContent = () => this.currentContent() // used by e2e test
+    this.ref.setCurrentContent = (value) => {
+      if (this.sessions[this.currentFile]) {
+        this.sessions[this.currentFile].setValue(value)
+        this._onChange(this.currentFile)
+      }
+    }
+    this.ref.gotoLine = (line, column) => this.gotoLine(line, column || 0)
+    this.ref.getCursorPosition = () => this.getCursorPosition()
+  }
+
+  updateComponent(state) {
+    console.log(state)
+    return <EditorUI
+    editorAPI={state.api}
+    themeType={state.currentThemeType}
+    currentFile={state.currentFile}
+    sourceAnnotationsPerFile={state.sourceAnnotationsPerFile}
+    markerPerFile={state.markerPerFile}
+    events={state.events}
+    plugin={state.plugin}
+  />
   }
 
   render () {
-    if (this.el) return this.el
+    
+/*     if (this.el) return this.el
 
     this.el = document.createElement('div')
     this.el.setAttribute('id', 'editorView')
@@ -82,22 +107,23 @@ class Editor extends Plugin {
       }
     }
     this.el.gotoLine = (line, column) => this.gotoLine(line, column || 0)
-    this.el.getCursorPosition = () => this.getCursorPosition()
-    return this.el
+    this.el.getCursorPosition = () => this.getCursorPosition() */
+
+    return <div ref={(element)=>{ this.ref = element}} id='editorView'>
+      <ViewPluginUI plugin={this} />
+      </div>
   }
 
   renderComponent () {
-    ReactDOM.render(
-      <EditorUI
-        editorAPI={this.api}
-        themeType={this.currentThemeType}
-        currentFile={this.currentFile}
-        sourceAnnotationsPerFile={this.sourceAnnotationsPerFile}
-        markerPerFile={this.markerPerFile}
-        events={this.events}
-        plugin={this}
-      />
-      , this.el)
+    this.dispatch({
+      api: this.api,
+      currentThemeType: this.currentThemeType,
+      currentFile: this.currentFile,
+      sourceAnnotationsPerFile: this.sourceAnnotationsPerFile,
+      markerPerFile: this.markerPerFile,
+      events: this.events,
+      plugin: this
+    })
   }
 
   triggerEvent (name, params) {

From f75ce40939c71804c06fca1c338229941c472fc9 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Mon, 14 Feb 2022 23:03:43 +0100
Subject: [PATCH 16/26] mv refs

---
 apps/remix-ide/src/app/editor/editor.js | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/apps/remix-ide/src/app/editor/editor.js b/apps/remix-ide/src/app/editor/editor.js
index 2e2de4b8cc..6632b7e186 100644
--- a/apps/remix-ide/src/app/editor/editor.js
+++ b/apps/remix-ide/src/app/editor/editor.js
@@ -69,15 +69,7 @@ class Editor extends Plugin {
   setDispatch (dispatch) {
     this.dispatch = dispatch
 
-    this.ref.currentContent = () => this.currentContent() // used by e2e test
-    this.ref.setCurrentContent = (value) => {
-      if (this.sessions[this.currentFile]) {
-        this.sessions[this.currentFile].setValue(value)
-        this._onChange(this.currentFile)
-      }
-    }
-    this.ref.gotoLine = (line, column) => this.gotoLine(line, column || 0)
-    this.ref.getCursorPosition = () => this.getCursorPosition()
+
   }
 
   updateComponent(state) {
@@ -109,7 +101,18 @@ class Editor extends Plugin {
     this.el.gotoLine = (line, column) => this.gotoLine(line, column || 0)
     this.el.getCursorPosition = () => this.getCursorPosition() */
 
-    return <div ref={(element)=>{ this.ref = element}} id='editorView'>
+    return <div ref={(element)=>{ 
+      this.ref = element
+      this.ref.currentContent = () => this.currentContent() // used by e2e test
+      this.ref.setCurrentContent = (value) => {
+        if (this.sessions[this.currentFile]) {
+          this.sessions[this.currentFile].setValue(value)
+          this._onChange(this.currentFile)
+        }
+      }
+      this.ref.gotoLine = (line, column) => this.gotoLine(line, column || 0)
+      this.ref.getCursorPosition = () => this.getCursorPosition()
+    }} id='editorView'>
       <ViewPluginUI plugin={this} />
       </div>
   }

From 0113d4ccfb98f465c1f41ef7b3e99ba9f22e2c51 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Tue, 15 Feb 2022 10:22:22 +0100
Subject: [PATCH 17/26] analysis

---
 .../{plugins => components}/ViewPluginUI.tsx  |  0
 .../src/app/components/hidden-panel.tsx       |  2 +-
 .../src/app/components/main-panel.tsx         |  2 +-
 .../components/plugin-manager-component.js    |  2 +-
 .../src/app/components/side-panel.tsx         |  2 +-
 .../src/app/components/vertical-icons.tsx     |  2 +-
 apps/remix-ide/src/app/editor/editor.js       |  4 +-
 apps/remix-ide/src/app/tabs/analysis-tab.js   | 52 +++++++++++--------
 apps/remix-ide/src/app/tabs/settings-tab.tsx  |  2 +-
 9 files changed, 37 insertions(+), 31 deletions(-)
 rename apps/remix-ide/src/app/{plugins => components}/ViewPluginUI.tsx (100%)

diff --git a/apps/remix-ide/src/app/plugins/ViewPluginUI.tsx b/apps/remix-ide/src/app/components/ViewPluginUI.tsx
similarity index 100%
rename from apps/remix-ide/src/app/plugins/ViewPluginUI.tsx
rename to apps/remix-ide/src/app/components/ViewPluginUI.tsx
diff --git a/apps/remix-ide/src/app/components/hidden-panel.tsx b/apps/remix-ide/src/app/components/hidden-panel.tsx
index d208a1b79d..1ce2f0b531 100644
--- a/apps/remix-ide/src/app/components/hidden-panel.tsx
+++ b/apps/remix-ide/src/app/components/hidden-panel.tsx
@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom' // eslint-disable-line
 import { AbstractPanel } from './panel'
 import * as packageJson from '../../../../../package.json'
 import { RemixPluginPanel } from '@remix-ui/panel'
-import { ViewPluginUI } from '../plugins/ViewPluginUI'
+import { ViewPluginUI } from '../components/ViewPluginUI'
 
 const profile = {
   name: 'hiddenPanel',
diff --git a/apps/remix-ide/src/app/components/main-panel.tsx b/apps/remix-ide/src/app/components/main-panel.tsx
index 2fdde8548d..65fac2e7f9 100644
--- a/apps/remix-ide/src/app/components/main-panel.tsx
+++ b/apps/remix-ide/src/app/components/main-panel.tsx
@@ -3,7 +3,7 @@ import { AbstractPanel } from './panel'
 import ReactDOM from 'react-dom' // eslint-disable-line
 import { RemixPluginPanel } from '@remix-ui/panel'
 import packageJson from '../../../../../package.json'
-import { ViewPluginUI } from '../plugins/ViewPluginUI'
+import { ViewPluginUI } from '../components/ViewPluginUI'
 
 const profile = {
   name: 'mainPanel',
diff --git a/apps/remix-ide/src/app/components/plugin-manager-component.js b/apps/remix-ide/src/app/components/plugin-manager-component.js
index 8836157cc5..b67e6ecf0e 100644
--- a/apps/remix-ide/src/app/components/plugin-manager-component.js
+++ b/apps/remix-ide/src/app/components/plugin-manager-component.js
@@ -3,7 +3,7 @@ import React from 'react' // eslint-disable-line
 import ReactDOM from 'react-dom'
 import {RemixUiPluginManager} from '@remix-ui/plugin-manager' // eslint-disable-line
 import * as packageJson from '../../../../../package.json'
-import { ViewPluginUI } from '../plugins/ViewPluginUI'
+import { ViewPluginUI } from '../components/ViewPluginUI'
 const _paq = window._paq = window._paq || []
 
 const profile = {
diff --git a/apps/remix-ide/src/app/components/side-panel.tsx b/apps/remix-ide/src/app/components/side-panel.tsx
index 60d323d88e..9c116205c9 100644
--- a/apps/remix-ide/src/app/components/side-panel.tsx
+++ b/apps/remix-ide/src/app/components/side-panel.tsx
@@ -5,7 +5,7 @@ import { AbstractPanel } from './panel'
 import { RemixPluginPanel } from '@remix-ui/panel'
 import packageJson from '../../../../../package.json'
 import RemixUIPanelHeader from 'libs/remix-ui/panel/src/lib/plugins/panel-header'
-import { ViewPluginUI } from '../plugins/ViewPluginUI'
+import { ViewPluginUI } from '../components/ViewPluginUI'
 // const csjs = require('csjs-inject')
 
 const sidePanel = {
diff --git a/apps/remix-ide/src/app/components/vertical-icons.tsx b/apps/remix-ide/src/app/components/vertical-icons.tsx
index dab66a52cd..970b51c36d 100644
--- a/apps/remix-ide/src/app/components/vertical-icons.tsx
+++ b/apps/remix-ide/src/app/components/vertical-icons.tsx
@@ -6,7 +6,7 @@ import { Plugin } from '@remixproject/engine'
 import { EventEmitter } from 'events'
 import { IconRecord, RemixUiVerticalIconsPanel } from '@remix-ui/vertical-icons-panel'
 import { Profile } from '@remixproject/plugin-utils'
-import { ViewPluginUI } from '../plugins/ViewPluginUI'
+import { ViewPluginUI } from '../components/ViewPluginUI'
 
 const profile = {
   name: 'menuicons',
diff --git a/apps/remix-ide/src/app/editor/editor.js b/apps/remix-ide/src/app/editor/editor.js
index 6632b7e186..da700bfd10 100644
--- a/apps/remix-ide/src/app/editor/editor.js
+++ b/apps/remix-ide/src/app/editor/editor.js
@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom'
 import { EditorUI } from '@remix-ui/editor' // eslint-disable-line
 import { Plugin } from '@remixproject/engine'
 import * as packageJson from '../../../../../package.json'
-import { ViewPluginUI } from '../plugins/ViewPluginUI'
+import { ViewPluginUI } from '../components/ViewPluginUI'
 
 const EventManager = require('../../lib/events')
 
@@ -68,8 +68,6 @@ class Editor extends Plugin {
 
   setDispatch (dispatch) {
     this.dispatch = dispatch
-
-
   }
 
   updateComponent(state) {
diff --git a/apps/remix-ide/src/app/tabs/analysis-tab.js b/apps/remix-ide/src/app/tabs/analysis-tab.js
index dcd894d02c..c7872954a1 100644
--- a/apps/remix-ide/src/app/tabs/analysis-tab.js
+++ b/apps/remix-ide/src/app/tabs/analysis-tab.js
@@ -1,10 +1,10 @@
 import React from 'react' // eslint-disable-line
 import { ViewPlugin } from '@remixproject/engine-web'
-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'
+import { ViewPluginUI } from '../components/ViewPluginUI'
 
 var EventManager = require('../../lib/events')
 
@@ -35,6 +35,7 @@ class AnalysisTab extends ViewPlugin {
       offsetToLineColumnConverter: this.registry.get(
         'offsettolinecolumnconverter').api
     }
+    this.dispatch = null
   }
 
   async onActivation () {
@@ -43,33 +44,40 @@ class AnalysisTab extends ViewPlugin {
       await this.call('manager', 'activatePlugin', 'solidity')
     }
     this.renderComponent()
+    this.event.register('staticAnaysisWarning', (count) => {
+      if (count > 0) {
+        this.emit('statusChanged', { key: count, title: `${count} warning${count === 1 ? '' : 's'}`, type: 'warning' })
+      } else if (count === 0) {
+        this.emit('statusChanged', { key: 'succeed', title: 'no warning', type: 'success' })
+      } else {
+        // count ==-1 no compilation result
+        this.emit('statusChanged', { key: 'none' })
+      }
+    })
+  }
+  
+  setDispatch (dispatch) {
+    this.dispatch = dispatch
   }
 
   render () {
-    return this.element
+    return <div id='staticAnalyserView'><ViewPluginUI plugin={this} /></div>
+  }
+
+  updateComponent(state) {
+    return  <RemixUiStaticAnalyser
+    registry={state.registry}
+    analysisModule={state}
+    event={state.event}
+  />
   }
 
   renderComponent () {
-    ReactDOM.render(
-      <RemixUiStaticAnalyser
-        registry={this.registry}
-        analysisModule={this}
-        event={this.event}
-      />,
-      this.element,
-      () => {
-        this.event.register('staticAnaysisWarning', (count) => {
-          if (count > 0) {
-            this.emit('statusChanged', { key: count, title: `${count} warning${count === 1 ? '' : 's'}`, type: 'warning' })
-          } else if (count === 0) {
-            this.emit('statusChanged', { key: 'succeed', title: 'no warning', type: 'success' })
-          } else {
-            // count ==-1 no compilation result
-            this.emit('statusChanged', { key: 'none' })
-          }
-        })
-      }
-    )
+    this.dispatch({
+      registry: this.registry,
+      analysisModule: this,
+      event: this.event
+    })
   }
 }
 
diff --git a/apps/remix-ide/src/app/tabs/settings-tab.tsx b/apps/remix-ide/src/app/tabs/settings-tab.tsx
index cd5796a426..ac174c013f 100644
--- a/apps/remix-ide/src/app/tabs/settings-tab.tsx
+++ b/apps/remix-ide/src/app/tabs/settings-tab.tsx
@@ -5,7 +5,7 @@ import * as packageJson from '../../../../../package.json'
 import { RemixUiSettings } from '@remix-ui/settings' //eslint-disable-line
 import Registry from '../state/registry'
 import { ViewReactPlugin } from '../plugins/viewReactPlugin'
-import { ViewPluginUI } from '../plugins/ViewPluginUI'
+import { ViewPluginUI } from '../components/ViewPluginUI'
 
 const profile = {
   name: 'settings',

From 128979b3f99ea05f41e96e70154e2d47161de462 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Tue, 15 Feb 2022 10:30:20 +0100
Subject: [PATCH 18/26] test tab

---
 apps/remix-ide/src/app/tabs/test-tab.js | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/apps/remix-ide/src/app/tabs/test-tab.js b/apps/remix-ide/src/app/tabs/test-tab.js
index a03d74a846..0ab38fb89c 100644
--- a/apps/remix-ide/src/app/tabs/test-tab.js
+++ b/apps/remix-ide/src/app/tabs/test-tab.js
@@ -7,6 +7,7 @@ import { TestTabLogic } from '@remix-ui/solidity-unit-testing' // eslint-disable
 import { ViewPlugin } from '@remixproject/engine-web'
 import helper from '../../lib/helper'
 import { canUseWorker, urlFromVersion } from '@remix-project/remix-solidity'
+import { ViewPluginUI } from '../components/ViewPluginUI'
 
 var { UnitTestRunner, assertLibCode } = require('@remix-project/remix-tests')
 
@@ -34,6 +35,7 @@ module.exports = class TestTab extends ViewPlugin {
     this.offsetToLineColumnConverter = offsetToLineColumnConverter
     this.allFilesInvolved = ['.deps/remix-tests/remix_tests.sol', '.deps/remix-tests/remix_accounts.sol']
     this.element = document.createElement('div')
+    this.dispatch = null
   }
 
   onActivationInternal () {
@@ -128,15 +130,25 @@ module.exports = class TestTab extends ViewPlugin {
     })
   }
 
+  setDispatch (dispatch) {
+    this.dispatch = dispatch
+    this.renderComponent('tests')
+  }
+
   render () {
     this.onActivationInternal()
-    this.renderComponent('tests')
-    return this.element
+    return <div><ViewPluginUI plugin={this} /></div>
+  }
+
+  updateComponent(state) {
+    return <SolidityUnitTesting testTab={state.testTab} helper={state.helper} initialPath={state.testDirPath} />
   }
 
   renderComponent (testDirPath) {
-    ReactDOM.render(
-      <SolidityUnitTesting testTab={this} helper={helper} initialPath={testDirPath} />
-      , this.element)
+    this.dispatch({
+      testTab: this,
+      helper: this.helper,
+      testDirPath: testDirPath
+    })
   }
 }

From e2f5c442b47213d3d0ddaaba893a473f6e7afbb6 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Tue, 15 Feb 2022 10:34:17 +0100
Subject: [PATCH 19/26] static fix

---
 apps/remix-ide/src/app/tabs/analysis-tab.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/remix-ide/src/app/tabs/analysis-tab.js b/apps/remix-ide/src/app/tabs/analysis-tab.js
index c7872954a1..2378d68faa 100644
--- a/apps/remix-ide/src/app/tabs/analysis-tab.js
+++ b/apps/remix-ide/src/app/tabs/analysis-tab.js
@@ -67,7 +67,7 @@ class AnalysisTab extends ViewPlugin {
   updateComponent(state) {
     return  <RemixUiStaticAnalyser
     registry={state.registry}
-    analysisModule={state}
+    analysisModule={state.analysisModule}
     event={state.event}
   />
   }

From 790ddfacd1572e43100920cbe06c46b1d673df70 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Tue, 15 Feb 2022 10:45:36 +0100
Subject: [PATCH 20/26] tabs

---
 apps/remix-ide/src/app/panels/tab-proxy.js | 24 ++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/apps/remix-ide/src/app/panels/tab-proxy.js b/apps/remix-ide/src/app/panels/tab-proxy.js
index 2277ab07f9..cf3c737c59 100644
--- a/apps/remix-ide/src/app/panels/tab-proxy.js
+++ b/apps/remix-ide/src/app/panels/tab-proxy.js
@@ -2,6 +2,7 @@ import React from 'react' // eslint-disable-line
 import ReactDOM from 'react-dom'
 import { Plugin } from '@remixproject/engine'
 import { TabsUI } from '@remix-ui/tabs'
+import { ViewPluginUI } from '../components/ViewPluginUI'
 const EventEmitter = require('events')
 const helper = require('../../lib/helper')
 
@@ -22,6 +23,7 @@ export class TabProxy extends Plugin {
     this._handlers = {}
     this.loadedTabs = []
     this.el = document.createElement('div')
+    this.dispatch = null
   }
 
   onActivation () {
@@ -285,6 +287,15 @@ export class TabProxy extends Plugin {
     this.handlers[type] = fn
   }
 
+  setDispatch (dispatch) {
+    this.dispatch = dispatch
+    this.renderComponent()
+  }
+
+  updateComponent(state) {
+    return <TabsUI tabs={state.loadedTabs} onSelect={state.onSelect} onClose={state.onClose} onZoomIn={state.onZoomIn} onZoomOut={state.onZoomOut} onReady={state.onReady} />
+  }
+
   renderComponent () {
     const onSelect = (index) => {
       if (this.loadedTabs[index]) {
@@ -307,12 +318,17 @@ export class TabProxy extends Plugin {
 
     const onReady = (api) => { this.tabsApi = api }
 
-    ReactDOM.render(
-      <TabsUI tabs={this.loadedTabs} onSelect={onSelect} onClose={onClose} onZoomIn={onZoomIn} onZoomOut={onZoomOut} onReady={onReady} />
-      , this.el)
+    this.dispatch({
+      loadedTabs: this.loadedTabs,
+      onSelect,
+      onClose,
+      onZoomIn,
+      onZoomOut,
+      onReady
+    })
   }
 
   renderTabsbar () {
-    return this.el
+    return <div><ViewPluginUI plugin={this} /></div>
   }
 }

From 81525107212a875fe09d2127d3ad574b5cd8c9d1 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Tue, 15 Feb 2022 17:19:58 +0100
Subject: [PATCH 21/26] terminal

---
 apps/remix-ide/src/app/panels/terminal.js | 31 ++++++++++++++++-------
 apps/remix-ide/src/index.tsx              |  4 +--
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/apps/remix-ide/src/app/panels/terminal.js b/apps/remix-ide/src/app/panels/terminal.js
index 0854f7586e..f81decf27b 100644
--- a/apps/remix-ide/src/app/panels/terminal.js
+++ b/apps/remix-ide/src/app/panels/terminal.js
@@ -9,6 +9,7 @@ const vm = require('vm')
 const EventManager = require('../../lib/events')
 
 import { CompilerImports } from '@remix-project/core-plugin' // eslint-disable-line
+import { ViewPluginUI } from '../components/ViewPluginUI'
 
 const KONSOLES = []
 
@@ -79,9 +80,12 @@ class Terminal extends Plugin {
       this.call('menuicons', 'select', 'debugger')
       this.call('debugger', 'debug', hash)
     })
+    this.dispatch = null
+    
   }
+  
 
-  onActivation () {
+  onActivation() {
     this.renderComponent()
   }
 
@@ -100,19 +104,28 @@ class Terminal extends Plugin {
     this.terminalApi.log(message)
   }
 
+  setDispatch(dispatch) {
+    this.dispatch = dispatch
+  }
+
   render () {
-    return this.element
+    return <div id='terminal-view' className='panel' data-id='terminalContainer-view'><ViewPluginUI plugin={this}/></div>
+  }
+
+  updateComponent(state) {
+    console.log("render terminal")
+    return <RemixUiTerminal
+    plugin={state.plugin}
+    onReady={state.onReady}
+  />
   }
 
   renderComponent () {
     const onReady = (api) => { this.terminalApi = api }
-    ReactDOM.render(
-      <RemixUiTerminal
-        plugin={this}
-        onReady={onReady}
-      />,
-      this.element
-    )
+    this.dispatch({
+      plugin: this,
+      onReady: onReady
+    })
   }
 
   scroll2bottom () {
diff --git a/apps/remix-ide/src/index.tsx b/apps/remix-ide/src/index.tsx
index fde108b852..a418ecbd49 100644
--- a/apps/remix-ide/src/index.tsx
+++ b/apps/remix-ide/src/index.tsx
@@ -33,9 +33,9 @@ import ('./app').then((AppComponent) => {
   const appComponent = new AppComponent.default()
   appComponent.run().then(() => {
     render(
-      <React.StrictMode>
+      <>
           <RemixApp app={appComponent} />
-      </React.StrictMode>,
+      </>,
       document.getElementById('root')
     )
   })

From 5e38fe3b1e713f058cd8012c028c796269307fa2 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Tue, 15 Feb 2022 18:15:37 +0100
Subject: [PATCH 22/26] plugin rename

---
 apps/remix-ide/src/app/components/main-panel.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/remix-ide/src/app/components/main-panel.tsx b/apps/remix-ide/src/app/components/main-panel.tsx
index 65fac2e7f9..615e03690d 100644
--- a/apps/remix-ide/src/app/components/main-panel.tsx
+++ b/apps/remix-ide/src/app/components/main-panel.tsx
@@ -1,9 +1,8 @@
 import React from 'react' // eslint-disable-line
 import { AbstractPanel } from './panel'
-import ReactDOM from 'react-dom' // eslint-disable-line
 import { RemixPluginPanel } from '@remix-ui/panel'
 import packageJson from '../../../../../package.json'
-import { ViewPluginUI } from '../components/ViewPluginUI'
+import { PluginViewWrapper } from '@remix-ui/helper'
 
 const profile = {
   name: 'mainPanel',
@@ -60,7 +59,7 @@ export class MainPanel extends AbstractPanel {
     }
 
     render() {      
-      return <div style={{height: '100%', width: '100%'}} data-id='mainPanelPluginsContainer'><ViewPluginUI plugin={this} /></div>
+      return <div style={{height: '100%', width: '100%'}} data-id='mainPanelPluginsContainer'><PluginViewWrapper plugin={this} /></div>
     }
 
     updateComponent (state: any) {

From 3ac62b7207241bc1cec532806223806f0c8761c4 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Tue, 15 Feb 2022 18:15:47 +0100
Subject: [PATCH 23/26] plugin rename

---
 .../src/app/components/hidden-panel.tsx       |  5 ++--
 .../components/plugin-manager-component.js    |  5 ++--
 .../src/app/components/side-panel.tsx         |  5 ++--
 .../src/app/components/vertical-icons.tsx     |  5 ++--
 apps/remix-ide/src/app/editor/editor.js       |  5 ++--
 apps/remix-ide/src/app/panels/file-panel.js   |  1 -
 apps/remix-ide/src/app/panels/tab-proxy.js    |  5 ++--
 apps/remix-ide/src/app/panels/terminal.js     |  6 ++---
 .../src/app/plugins/viewReactPlugin.ts        | 27 -------------------
 apps/remix-ide/src/app/tabs/analysis-tab.js   |  4 +--
 apps/remix-ide/src/app/tabs/compile-tab.js    |  1 -
 apps/remix-ide/src/app/tabs/debugger-tab.js   |  1 -
 apps/remix-ide/src/app/tabs/settings-tab.tsx  | 10 +++----
 apps/remix-ide/src/app/tabs/test-tab.js       |  5 ++--
 apps/remix-ide/src/app/udapp/run-tab.js       |  1 -
 .../src/app/ui/landing-page/landing-page.js   |  6 ++---
 libs/remix-ui/helper/src/index.ts             |  1 +
 .../src/lib/components/PluginViewWrapper.tsx  | 11 +++-----
 package.json                                  | 14 +++++-----
 19 files changed, 36 insertions(+), 82 deletions(-)
 delete mode 100644 apps/remix-ide/src/app/plugins/viewReactPlugin.ts
 rename apps/remix-ide/src/app/components/ViewPluginUI.tsx => libs/remix-ui/helper/src/lib/components/PluginViewWrapper.tsx (66%)

diff --git a/apps/remix-ide/src/app/components/hidden-panel.tsx b/apps/remix-ide/src/app/components/hidden-panel.tsx
index 1ce2f0b531..31c7a0cb0b 100644
--- a/apps/remix-ide/src/app/components/hidden-panel.tsx
+++ b/apps/remix-ide/src/app/components/hidden-panel.tsx
@@ -1,10 +1,9 @@
 // eslint-disable-next-line no-use-before-define
 import React from 'react'
-import ReactDOM from 'react-dom' // eslint-disable-line
 import { AbstractPanel } from './panel'
 import * as packageJson from '../../../../../package.json'
 import { RemixPluginPanel } from '@remix-ui/panel'
-import { ViewPluginUI } from '../components/ViewPluginUI'
+import { PluginViewWrapper } from '@remix-ui/helper'
 
 const profile = {
   name: 'hiddenPanel',
@@ -39,7 +38,7 @@ export class HiddenPanel extends AbstractPanel {
 
   render() {      
     return (
-      <div className='pluginsContainer'><ViewPluginUI plugin={this} /></div>
+      <div className='pluginsContainer'><PluginViewWrapper plugin={this} /></div>
     );
   }
 
diff --git a/apps/remix-ide/src/app/components/plugin-manager-component.js b/apps/remix-ide/src/app/components/plugin-manager-component.js
index b67e6ecf0e..00013ee545 100644
--- a/apps/remix-ide/src/app/components/plugin-manager-component.js
+++ b/apps/remix-ide/src/app/components/plugin-manager-component.js
@@ -1,9 +1,8 @@
 import { ViewPlugin } from '@remixproject/engine-web'
 import React from 'react' // eslint-disable-line
-import ReactDOM from 'react-dom'
 import {RemixUiPluginManager} from '@remix-ui/plugin-manager' // eslint-disable-line
 import * as packageJson from '../../../../../package.json'
-import { ViewPluginUI } from '../components/ViewPluginUI'
+import { PluginViewWrapper } from '@remix-ui/helper'
 const _paq = window._paq = window._paq || []
 
 const profile = {
@@ -98,7 +97,7 @@ class PluginManagerComponent extends ViewPlugin {
 
   render () {
     return (
-      <div id='pluginManager'><ViewPluginUI plugin={this} /></div>
+      <div id='pluginManager'><PluginViewWrapper plugin={this} /></div>
     );
     
   }
diff --git a/apps/remix-ide/src/app/components/side-panel.tsx b/apps/remix-ide/src/app/components/side-panel.tsx
index 9c116205c9..bf82defe55 100644
--- a/apps/remix-ide/src/app/components/side-panel.tsx
+++ b/apps/remix-ide/src/app/components/side-panel.tsx
@@ -1,11 +1,10 @@
 // eslint-disable-next-line no-use-before-define
 import React from 'react'
-import ReactDOM from 'react-dom'
 import { AbstractPanel } from './panel'
 import { RemixPluginPanel } from '@remix-ui/panel'
 import packageJson from '../../../../../package.json'
 import RemixUIPanelHeader from 'libs/remix-ui/panel/src/lib/plugins/panel-header'
-import { ViewPluginUI } from '../components/ViewPluginUI'
+import { PluginViewWrapper } from '@remix-ui/helper'
 // const csjs = require('csjs-inject')
 
 const sidePanel = {
@@ -86,7 +85,7 @@ export class SidePanel extends AbstractPanel {
 
   render() {      
     return (
-      <section className='panel plugin-manager'> <ViewPluginUI plugin={this} /></section>
+      <section className='panel plugin-manager'> <PluginViewWrapper plugin={this} /></section>
     );
   }
 
diff --git a/apps/remix-ide/src/app/components/vertical-icons.tsx b/apps/remix-ide/src/app/components/vertical-icons.tsx
index 970b51c36d..bc70fd812c 100644
--- a/apps/remix-ide/src/app/components/vertical-icons.tsx
+++ b/apps/remix-ide/src/app/components/vertical-icons.tsx
@@ -1,12 +1,11 @@
 // eslint-disable-next-line no-use-before-define
 import React from 'react'
-import ReactDOM from 'react-dom'
 import packageJson from '../../../../../package.json'
 import { Plugin } from '@remixproject/engine'
 import { EventEmitter } from 'events'
 import { IconRecord, RemixUiVerticalIconsPanel } from '@remix-ui/vertical-icons-panel'
 import { Profile } from '@remixproject/plugin-utils'
-import { ViewPluginUI } from '../components/ViewPluginUI'
+import { PluginViewWrapper } from '@remix-ui/helper'
 
 const profile = {
   name: 'menuicons',
@@ -121,7 +120,7 @@ export class VerticalIcons extends Plugin {
 
   render() {      
     return (
-      <div id='icon-panel'><ViewPluginUI plugin={this} /></div>
+      <div id='icon-panel'><PluginViewWrapper plugin={this} /></div>
     );
   }
 }
diff --git a/apps/remix-ide/src/app/editor/editor.js b/apps/remix-ide/src/app/editor/editor.js
index da700bfd10..0e745a1cd8 100644
--- a/apps/remix-ide/src/app/editor/editor.js
+++ b/apps/remix-ide/src/app/editor/editor.js
@@ -1,10 +1,9 @@
 'use strict'
 import React from 'react' // eslint-disable-line
-import ReactDOM from 'react-dom'
 import { EditorUI } from '@remix-ui/editor' // eslint-disable-line
 import { Plugin } from '@remixproject/engine'
 import * as packageJson from '../../../../../package.json'
-import { ViewPluginUI } from '../components/ViewPluginUI'
+import { PluginViewWrapper } from '@remix-ui/helper'
 
 const EventManager = require('../../lib/events')
 
@@ -111,7 +110,7 @@ class Editor extends Plugin {
       this.ref.gotoLine = (line, column) => this.gotoLine(line, column || 0)
       this.ref.getCursorPosition = () => this.getCursorPosition()
     }} id='editorView'>
-      <ViewPluginUI plugin={this} />
+      <PluginViewWrapper plugin={this} />
       </div>
   }
 
diff --git a/apps/remix-ide/src/app/panels/file-panel.js b/apps/remix-ide/src/app/panels/file-panel.js
index 75d8f0e7e3..6c5e4d0235 100644
--- a/apps/remix-ide/src/app/panels/file-panel.js
+++ b/apps/remix-ide/src/app/panels/file-panel.js
@@ -2,7 +2,6 @@ import { ViewPlugin } from '@remixproject/engine-web'
 
 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'
 import { RemixdHandle } from '../plugins/remixd-handle'
diff --git a/apps/remix-ide/src/app/panels/tab-proxy.js b/apps/remix-ide/src/app/panels/tab-proxy.js
index cf3c737c59..aa33f4a5ca 100644
--- a/apps/remix-ide/src/app/panels/tab-proxy.js
+++ b/apps/remix-ide/src/app/panels/tab-proxy.js
@@ -1,8 +1,7 @@
 import React from 'react' // eslint-disable-line
-import ReactDOM from 'react-dom'
 import { Plugin } from '@remixproject/engine'
 import { TabsUI } from '@remix-ui/tabs'
-import { ViewPluginUI } from '../components/ViewPluginUI'
+import { PluginViewWrapper } from '@remix-ui/helper'
 const EventEmitter = require('events')
 const helper = require('../../lib/helper')
 
@@ -329,6 +328,6 @@ export class TabProxy extends Plugin {
   }
 
   renderTabsbar () {
-    return <div><ViewPluginUI plugin={this} /></div>
+    return <div><PluginViewWrapper plugin={this} /></div>
   }
 }
diff --git a/apps/remix-ide/src/app/panels/terminal.js b/apps/remix-ide/src/app/panels/terminal.js
index f81decf27b..d99de73d83 100644
--- a/apps/remix-ide/src/app/panels/terminal.js
+++ b/apps/remix-ide/src/app/panels/terminal.js
@@ -1,15 +1,15 @@
 /* global Node, requestAnimationFrame */   // eslint-disable-line
 import React from 'react' // eslint-disable-line
-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'
+import { PluginViewWrapper } from '@remix-ui/helper'
 const vm = require('vm')
 const EventManager = require('../../lib/events')
 
 import { CompilerImports } from '@remix-project/core-plugin' // eslint-disable-line
-import { ViewPluginUI } from '../components/ViewPluginUI'
+
 
 const KONSOLES = []
 
@@ -109,7 +109,7 @@ class Terminal extends Plugin {
   }
 
   render () {
-    return <div id='terminal-view' className='panel' data-id='terminalContainer-view'><ViewPluginUI plugin={this}/></div>
+    return <div id='terminal-view' className='panel' data-id='terminalContainer-view'><PluginViewWrapper plugin={this}/></div>
   }
 
   updateComponent(state) {
diff --git a/apps/remix-ide/src/app/plugins/viewReactPlugin.ts b/apps/remix-ide/src/app/plugins/viewReactPlugin.ts
deleted file mode 100644
index da2f108de9..0000000000
--- a/apps/remix-ide/src/app/plugins/viewReactPlugin.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import type { Profile, LocationProfile } from '@remixproject/plugin-utils'
-import { Plugin } from '@remixproject/engine'
-
-
-export function isView<P extends Profile>(profile: Profile): profile is (ViewProfile & P) {
-  return !!profile['location']
-}
-
-export type ViewProfile = Profile & LocationProfile
-
-export abstract class ViewReactPlugin extends Plugin {
-  abstract render(): any
-
-  constructor(public profile: ViewProfile) {
-    super(profile)
-  }
-
-  async activate() {
-    await this.call(this.profile.location, 'addView', this.profile, this.render())
-    super.activate()
-  }
-
-  deactivate() {
-    this.call(this.profile.location, 'removeView', this.profile)
-    super.deactivate()
-  }
-}
\ No newline at end of file
diff --git a/apps/remix-ide/src/app/tabs/analysis-tab.js b/apps/remix-ide/src/app/tabs/analysis-tab.js
index 2378d68faa..f17b0da52b 100644
--- a/apps/remix-ide/src/app/tabs/analysis-tab.js
+++ b/apps/remix-ide/src/app/tabs/analysis-tab.js
@@ -4,7 +4,7 @@ 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'
-import { ViewPluginUI } from '../components/ViewPluginUI'
+import { PluginViewWrapper } from '@remix-ui/helper'
 
 var EventManager = require('../../lib/events')
 
@@ -61,7 +61,7 @@ class AnalysisTab extends ViewPlugin {
   }
 
   render () {
-    return <div id='staticAnalyserView'><ViewPluginUI plugin={this} /></div>
+    return <div id='staticAnalyserView'><PluginViewWrapper plugin={this} /></div>
   }
 
   updateComponent(state) {
diff --git a/apps/remix-ide/src/app/tabs/compile-tab.js b/apps/remix-ide/src/app/tabs/compile-tab.js
index a27abb5e64..87378d3ef6 100644
--- a/apps/remix-ide/src/app/tabs/compile-tab.js
+++ b/apps/remix-ide/src/app/tabs/compile-tab.js
@@ -1,6 +1,5 @@
 /* global */
 import React from 'react' // eslint-disable-line
-import ReactDOM from 'react-dom'
 import { SolidityCompiler } from '@remix-ui/solidity-compiler' // eslint-disable-line
 import { CompileTabLogic } from '@remix-ui/solidity-compiler' // eslint-disable-line
 import { CompilerApiMixin } from '@remixproject/solidity-compiler-plugin' // eslint-disable-line
diff --git a/apps/remix-ide/src/app/tabs/debugger-tab.js b/apps/remix-ide/src/app/tabs/debugger-tab.js
index bd19b88137..63debf4553 100644
--- a/apps/remix-ide/src/app/tabs/debugger-tab.js
+++ b/apps/remix-ide/src/app/tabs/debugger-tab.js
@@ -3,7 +3,6 @@ import { DebuggerApiMixin } from '@remixproject/debugger-plugin' // eslint-disab
 import { ViewPlugin } from '@remixproject/engine-web'
 import * as packageJson from '../../../../../package.json'
 import React from 'react' // eslint-disable-line
-import ReactDOM from 'react-dom'
 import * as remixBleach from '../../lib/remixBleach'
 import { compilationFinishedToastMsg, compilingToastMsg, localCompilationToastMsg, notFoundToastMsg, sourceVerificationNotAvailableToastMsg } from '@remix-ui/helper'
 const css = require('./styles/debugger-tab-styles')
diff --git a/apps/remix-ide/src/app/tabs/settings-tab.tsx b/apps/remix-ide/src/app/tabs/settings-tab.tsx
index ac174c013f..25ea5fb934 100644
--- a/apps/remix-ide/src/app/tabs/settings-tab.tsx
+++ b/apps/remix-ide/src/app/tabs/settings-tab.tsx
@@ -1,11 +1,9 @@
-import React, { useEffect, useState } from 'react' // eslint-disable-line
+import React from 'react' // eslint-disable-line
 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
 import Registry from '../state/registry'
-import { ViewReactPlugin } from '../plugins/viewReactPlugin'
-import { ViewPluginUI } from '../components/ViewPluginUI'
+import { PluginViewWrapper } from '@remix-ui/helper'
 
 const profile = {
   name: 'settings',
@@ -21,7 +19,7 @@ const profile = {
   permission: true
 }
 
-module.exports = class SettingsTab extends ViewReactPlugin {
+module.exports = class SettingsTab extends ViewPlugin {
   config: any = {}
   editor: any
   private _deps: {
@@ -51,7 +49,7 @@ module.exports = class SettingsTab extends ViewReactPlugin {
   render() {      
     return (
       <div id='settingsTab'>
-        <ViewPluginUI plugin={this} />
+        <PluginViewWrapper plugin={this} />
       </div>
     );
   }
diff --git a/apps/remix-ide/src/app/tabs/test-tab.js b/apps/remix-ide/src/app/tabs/test-tab.js
index 0ab38fb89c..c2af5ce7a7 100644
--- a/apps/remix-ide/src/app/tabs/test-tab.js
+++ b/apps/remix-ide/src/app/tabs/test-tab.js
@@ -1,13 +1,12 @@
 /* global */
 import React from 'react' // eslint-disable-line
-import ReactDOM from 'react-dom'
 import { SolidityUnitTesting } from '@remix-ui/solidity-unit-testing' // eslint-disable-line
 import { TestTabLogic } from '@remix-ui/solidity-unit-testing' // eslint-disable-line
 
 import { ViewPlugin } from '@remixproject/engine-web'
 import helper from '../../lib/helper'
 import { canUseWorker, urlFromVersion } from '@remix-project/remix-solidity'
-import { ViewPluginUI } from '../components/ViewPluginUI'
+import { PluginViewWrapper } from '@remix-ui/helper'
 
 var { UnitTestRunner, assertLibCode } = require('@remix-project/remix-tests')
 
@@ -137,7 +136,7 @@ module.exports = class TestTab extends ViewPlugin {
 
   render () {
     this.onActivationInternal()
-    return <div><ViewPluginUI plugin={this} /></div>
+    return <div><PluginViewWrapper plugin={this} /></div>
   }
 
   updateComponent(state) {
diff --git a/apps/remix-ide/src/app/udapp/run-tab.js b/apps/remix-ide/src/app/udapp/run-tab.js
index 10d99bfd2b..05a015c4fc 100644
--- a/apps/remix-ide/src/app/udapp/run-tab.js
+++ b/apps/remix-ide/src/app/udapp/run-tab.js
@@ -1,5 +1,4 @@
 import React from 'react' // eslint-disable-line
-import ReactDOM from 'react-dom'
 import { RunTabUI } from '@remix-ui/run-tab'
 import { ViewPlugin } from '@remixproject/engine-web'
 import * as packageJson from '../../../../../package.json'
diff --git a/apps/remix-ide/src/app/ui/landing-page/landing-page.js b/apps/remix-ide/src/app/ui/landing-page/landing-page.js
index 7c9268f11c..2f8819fc5f 100644
--- a/apps/remix-ide/src/app/ui/landing-page/landing-page.js
+++ b/apps/remix-ide/src/app/ui/landing-page/landing-page.js
@@ -1,10 +1,8 @@
 /* global */
 import React from 'react' // eslint-disable-line
-import ReactDOM from 'react-dom'
 import * as packageJson from '../../../../../../package.json'
 import { ViewPlugin } from '@remixproject/engine-web'
 import { RemixUiHomeTab } from '@remix-ui/home-tab' // eslint-disable-line
-import { ViewReactPlugin } from '../../plugins/viewReactPlugin'
 
 const profile = {
   name: 'home',
@@ -16,7 +14,7 @@ const profile = {
   location: 'mainPanel',
   version: packageJson.version
 }
-export class LandingPage extends ViewReactPlugin {
+export class LandingPage extends ViewPlugin {
   constructor (appManager, verticalIcons, fileManager, filePanel, contentImport) {
     super(profile)
     this.profile = profile
@@ -32,7 +30,7 @@ export class LandingPage extends ViewReactPlugin {
   }
 
   render () {
-    return <div id='landingPageHomeContainer' className='remixui_homeContainer justify-content-between bg-light d-flex' data-id='landingPageHomeContainer'>      <RemixUiHomeTab
+    return <div id='landingPageHomeContainer' className='remixui_homeContainer justify-content-between bg-light d-flex' data-id='landingPageHomeContainer'><RemixUiHomeTab
     plugin={this}
   /></div>
   }
diff --git a/libs/remix-ui/helper/src/index.ts b/libs/remix-ui/helper/src/index.ts
index 31c21f0564..36d73ef523 100644
--- a/libs/remix-ui/helper/src/index.ts
+++ b/libs/remix-ui/helper/src/index.ts
@@ -1,2 +1,3 @@
 export * from './lib/remix-ui-helper'
 export * from './lib/helper-components'
+export * from './lib/components/PluginViewWrapper'
\ No newline at end of file
diff --git a/apps/remix-ide/src/app/components/ViewPluginUI.tsx b/libs/remix-ui/helper/src/lib/components/PluginViewWrapper.tsx
similarity index 66%
rename from apps/remix-ide/src/app/components/ViewPluginUI.tsx
rename to libs/remix-ui/helper/src/lib/components/PluginViewWrapper.tsx
index 9a4b84489e..058fa3aee0 100644
--- a/apps/remix-ide/src/app/components/ViewPluginUI.tsx
+++ b/libs/remix-ui/helper/src/lib/components/PluginViewWrapper.tsx
@@ -1,25 +1,20 @@
 import React from "react"
 import { useEffect, useState } from "react"
 
-interface IViewPluginUI {
+interface IPluginViewWrapperProps {
     plugin: any
   }
   
-export const ViewPluginUI = (props: IViewPluginUI) => {
+export const PluginViewWrapper = (props: IPluginViewWrapperProps) => {
   
     const [state, setState] = useState<any>(null)
   
     useEffect(() => {
-      // console.log(props.plugin)
       if(props.plugin.setDispatch){
         props.plugin.setDispatch(setState)
       }
     }, [])
-  
-    useEffect(() => {
-      // console.log(state)
-    }, [state])
-  
+    
     return (
       <>{state? 
         <>{props.plugin.updateComponent(state)}</>
diff --git a/package.json b/package.json
index 6a15b5d85e..16e53e4066 100644
--- a/package.json
+++ b/package.json
@@ -147,13 +147,13 @@
     "@ethereumjs/tx": "^3.3.2",
     "@ethereumjs/vm": "^5.5.3",
     "@monaco-editor/react": "^4.3.1",
-    "@remixproject/engine": "^0.3.26",
-    "@remixproject/engine-web": "^0.3.26",
-    "@remixproject/plugin": "^0.3.26",
-    "@remixproject/plugin-api": "^0.3.26",
-    "@remixproject/plugin-utils": "^0.3.26",
-    "@remixproject/plugin-webview": "^0.3.26",
-    "@remixproject/plugin-ws": "^0.3.26",
+    "@remixproject/engine": "^0.3.27",
+    "@remixproject/engine-web": "^0.3.27",
+    "@remixproject/plugin": "^0.3.27",
+    "@remixproject/plugin-api": "^0.3.27",
+    "@remixproject/plugin-utils": "^0.3.27",
+    "@remixproject/plugin-webview": "^0.3.27",
+    "@remixproject/plugin-ws": "^0.3.27",
     "ansi-gray": "^0.1.1",
     "async": "^2.6.2",
     "axios": ">=0.21.1",

From 68109d7d5b8cc630f375cbd488b3cfc2b42a6701 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Tue, 15 Feb 2022 18:21:47 +0100
Subject: [PATCH 24/26] rm consoles

---
 apps/remix-ide/src/app/editor/editor.js              | 1 -
 apps/remix-ide/src/app/panels/terminal.js            | 1 -
 libs/remix-ui/app/src/lib/remix-app/remix-app.tsx    | 5 -----
 libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx | 5 -----
 4 files changed, 12 deletions(-)

diff --git a/apps/remix-ide/src/app/editor/editor.js b/apps/remix-ide/src/app/editor/editor.js
index 0e745a1cd8..6712c7456b 100644
--- a/apps/remix-ide/src/app/editor/editor.js
+++ b/apps/remix-ide/src/app/editor/editor.js
@@ -70,7 +70,6 @@ class Editor extends Plugin {
   }
 
   updateComponent(state) {
-    console.log(state)
     return <EditorUI
     editorAPI={state.api}
     themeType={state.currentThemeType}
diff --git a/apps/remix-ide/src/app/panels/terminal.js b/apps/remix-ide/src/app/panels/terminal.js
index d99de73d83..6eaa65f6e9 100644
--- a/apps/remix-ide/src/app/panels/terminal.js
+++ b/apps/remix-ide/src/app/panels/terminal.js
@@ -113,7 +113,6 @@ class Terminal extends Plugin {
   }
 
   updateComponent(state) {
-    console.log("render terminal")
     return <RemixUiTerminal
     plugin={state.plugin}
     onReady={state.onReady}
diff --git a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx b/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
index c4f117c140..8d0aeec020 100644
--- a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
+++ b/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
@@ -32,11 +32,6 @@ const RemixApp = (props: IRemixAppUi) => {
     }
   }, [])
 
-
-  useEffect(() => {
-    console.log(props.app.menuicons)
-  }, [props.app.menuicons])
-
   function setListeners () {
     props.app.sidePanel.events.on('toggle', () => {
       setHideSidePanel(prev => {
diff --git a/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx b/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx
index af826ead04..35a82ea4a5 100644
--- a/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx
+++ b/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx
@@ -13,11 +13,6 @@ const RemixUIPanelPlugin = (props: panelPLuginProps, panelRef: any) => {
     
     const ref:any = panelRef || localRef
     if (ref.current) {
-      if(React.isValidElement(props.pluginRecord.view)) {
-        // console.log('is REACT element', props.pluginRecord.profile.name)
-      }else{
-        console.info('is HTML element', props.pluginRecord.profile.name)
-      }
       if (props.pluginRecord.view) {
         if (React.isValidElement(props.pluginRecord.view)) {
           setView(props.pluginRecord.view)

From adfc26392e506c0157452f6b0100520c2b473072 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Tue, 15 Feb 2022 22:49:23 +0100
Subject: [PATCH 25/26] UPDATE PLUGIN

---
 package.json | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 99bd654545..d688fc5c17 100644
--- a/package.json
+++ b/package.json
@@ -148,13 +148,13 @@
     "@ethereumjs/tx": "^3.3.2",
     "@ethereumjs/vm": "^5.5.3",
     "@monaco-editor/react": "^4.3.1",
-    "@remixproject/engine": "^0.3.27",
-    "@remixproject/engine-web": "^0.3.27",
-    "@remixproject/plugin": "^0.3.27",
-    "@remixproject/plugin-api": "^0.3.27",
-    "@remixproject/plugin-utils": "^0.3.27",
-    "@remixproject/plugin-webview": "^0.3.27",
-    "@remixproject/plugin-ws": "^0.3.27",
+    "@remixproject/engine": "^0.3.28",
+    "@remixproject/engine-web": "^0.3.28",
+    "@remixproject/plugin": "^0.3.28",
+    "@remixproject/plugin-api": "^0.3.28",
+    "@remixproject/plugin-utils": "^0.3.28",
+    "@remixproject/plugin-webview": "^0.3.28",
+    "@remixproject/plugin-ws": "^0.3.28",
     "ansi-gray": "^0.1.1",
     "async": "^2.6.2",
     "axios": ">=0.21.1",

From 099fdec3f858d5a4f378cb17ca7fc8bdab21ca8b Mon Sep 17 00:00:00 2001
From: bunsenstraat <bunsenstraat@gmail.com>
Date: Tue, 15 Feb 2022 23:15:23 +0100
Subject: [PATCH 26/26] Update compile-tab.js

---
 apps/remix-ide/src/app/tabs/compile-tab.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/remix-ide/src/app/tabs/compile-tab.js b/apps/remix-ide/src/app/tabs/compile-tab.js
index 87378d3ef6..da85e7ea61 100644
--- a/apps/remix-ide/src/app/tabs/compile-tab.js
+++ b/apps/remix-ide/src/app/tabs/compile-tab.js
@@ -41,7 +41,7 @@ class CompileTab extends CompilerApiMixin(ViewPlugin) { // implements ICompilerA
   }
 
   renderComponent () {
-    console.log('rendering compile tab')
+    // empty method, is a state update needed?
   }
 
   onCurrentFileChanged () {