From 1e2dbea7cc10ebd6d8aedea988ccc4f7ad030b4f Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 11 Oct 2021 11:46:09 +0100
Subject: [PATCH 01/84] create vertical icons panel react lib

---
 .eslintrc.json                                | 35 +++++++
 libs/remix-ui/vertical-icons-panel/.babelrc   | 12 +++
 .../vertical-icons-panel/.eslintrc.json       | 18 ++++
 libs/remix-ui/vertical-icons-panel/README.md  |  7 ++
 .../vertical-icons-panel/src/index.ts         |  1 +
 .../remix-ui-vertical-icons-panel.module.css  |  0
 .../src/lib/remix-ui-vertical-icons-panel.tsx | 16 ++++
 .../vertical-icons-panel/tsconfig.json        | 20 ++++
 .../vertical-icons-panel/tsconfig.lib.json    | 13 +++
 nx.json                                       | 15 +--
 package.json                                  |  4 +
 tsconfig.base.json                            |  5 +-
 workspace.json                                | 93 ++++++++++++++++---
 13 files changed, 215 insertions(+), 24 deletions(-)
 create mode 100644 .eslintrc.json
 create mode 100644 libs/remix-ui/vertical-icons-panel/.babelrc
 create mode 100644 libs/remix-ui/vertical-icons-panel/.eslintrc.json
 create mode 100644 libs/remix-ui/vertical-icons-panel/README.md
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/index.ts
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
 create mode 100644 libs/remix-ui/vertical-icons-panel/tsconfig.json
 create mode 100644 libs/remix-ui/vertical-icons-panel/tsconfig.lib.json

diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000000..06cc47d9a2
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,35 @@
+{
+  "root": true,
+  "ignorePatterns": ["**/*"],
+  "plugins": ["@nrwl/nx"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@nrwl/nx/enforce-module-boundaries": [
+          "error",
+          {
+            "enforceBuildableLibDependency": true,
+            "allow": [],
+            "depConstraints": [
+              {
+                "sourceTag": "*",
+                "onlyDependOnLibsWithTags": ["*"]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["plugin:@nrwl/nx/typescript"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nrwl/nx/javascript"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/libs/remix-ui/vertical-icons-panel/.babelrc b/libs/remix-ui/vertical-icons-panel/.babelrc
new file mode 100644
index 0000000000..ccae900be4
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/libs/remix-ui/vertical-icons-panel/.eslintrc.json b/libs/remix-ui/vertical-icons-panel/.eslintrc.json
new file mode 100644
index 0000000000..50e59482cf
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/libs/remix-ui/vertical-icons-panel/README.md b/libs/remix-ui/vertical-icons-panel/README.md
new file mode 100644
index 0000000000..3d01813d07
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/README.md
@@ -0,0 +1,7 @@
+# remix-ui-vertical-icons-panel
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test remix-ui-vertical-icons-panel` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/remix-ui/vertical-icons-panel/src/index.ts b/libs/remix-ui/vertical-icons-panel/src/index.ts
new file mode 100644
index 0000000000..5024f5ff7a
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/remix-ui-vertical-icons-panel';
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
new file mode 100644
index 0000000000..e7980c0939
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -0,0 +1,16 @@
+import './remix-ui-vertical-icons-panel.module.css';
+
+/* eslint-disable-next-line */
+export interface RemixUiVerticalIconsPanelProps {}
+
+export function RemixUiVerticalIconsPanel(
+  props: RemixUiVerticalIconsPanelProps
+) {
+  return (
+    <div>
+      <h1>Welcome to remix-ui-vertical-icons-panel!</h1>
+    </div>
+  );
+}
+
+export default RemixUiVerticalIconsPanel;
diff --git a/libs/remix-ui/vertical-icons-panel/tsconfig.json b/libs/remix-ui/vertical-icons-panel/tsconfig.json
new file mode 100644
index 0000000000..8bd701c578
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}
diff --git a/libs/remix-ui/vertical-icons-panel/tsconfig.lib.json b/libs/remix-ui/vertical-icons-panel/tsconfig.lib.json
new file mode 100644
index 0000000000..b560bc4dec
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/tsconfig.lib.json
@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}
diff --git a/nx.json b/nx.json
index 9f4c399b8e..aa46ad3fc7 100644
--- a/nx.json
+++ b/nx.json
@@ -1,5 +1,4 @@
 {
-  "npmScope": "remix-project",
   "implicitDependencies": {
     "workspace.json": "*",
     "package.json": {
@@ -11,6 +10,7 @@
     ".eslintrc": "*",
     "nx.json": "*"
   },
+  "npmScope": "remix-project",
   "tasksRunnerOptions": {
     "default": {
       "runner": "@nrwl/workspace/tasks-runners/default",
@@ -130,19 +130,14 @@
     "remix-ui-editor": {
       "tags": []
     },
-    "remix-ui-helper": {
+    "remix-ui-helper": { 
+      "tags": []
+    },
+    "remix-ui-vertical-icons-panel": {
       "tags": []
     },
     "remix-ui-tabs": {
       "tags": []
     }
-  },
-  "targetDependencies": {
-    "build": [
-      {
-        "target": "build",
-        "projects": "dependencies"
-      }
-    ]
   }
 }
diff --git a/package.json b/package.json
index 4cd3cb70db..5a6030a591 100644
--- a/package.json
+++ b/package.json
@@ -161,6 +161,7 @@
     "chokidar": "^2.1.8",
     "color-support": "^1.1.3",
     "commander": "^2.20.3",
+    "core-js": "^3.6.5",
     "deep-equal": "^1.0.1",
     "document-register-element": "1.13.1",
     "ethereumjs-util": "^7.0.10",
@@ -261,8 +262,11 @@
     "eslint-config-prettier": "^6.11.0",
     "eslint-config-standard": "^14.1.1",
     "eslint-plugin-import": "2.20.2",
+    "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-promise": "4.2.1",
+    "eslint-plugin-react": "7.23.1",
+    "eslint-plugin-react-hooks": "4.2.0",
     "eslint-plugin-standard": "4.0.1",
     "events": "^3.0.0",
     "execr": "^1.0.1",
diff --git a/tsconfig.base.json b/tsconfig.base.json
index c0f4b6f093..c87af8611e 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -66,7 +66,10 @@
       "@remix-ui/plugin-manager": ["libs/remix-ui/plugin-manager/src/index.ts"],
       "@remix-ui/editor": ["libs/remix-ui/editor/src/index.ts"],
       "@remix-ui/tabs": ["libs/remix-ui/tabs/src/index.ts"],
-      "@remix-ui/helper": ["libs/remix-ui/helper/src/index.ts"]
+      "@remix-ui/helper": ["libs/remix-ui/helper/src/index.ts"],
+      "@remix-ui/vertical-icons-panel": [
+        "libs/remix-ui/vertical-icons-panel/src/index.ts"
+      ]
     }
   },
   "exclude": ["node_modules", "tmp"]
diff --git a/workspace.json b/workspace.json
index 217c170d9d..04972f329f 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1,5 +1,71 @@
 {
   "version": 1,
+  "cli": {
+    "defaultCollection": "@nrwl/react"
+  },
+  "defaultProject": "remix-ide",
+  "schematics": {
+    "@nrwl/workspace": {
+      "library": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/cypress": {
+      "cypress-project": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/react": {
+      "application": {
+        "style": "css",
+        "linter": "eslint",
+        "babel": true
+      },
+      "component": {
+        "style": "css"
+      },
+      "library": {
+        "style": "css",
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/next": {
+      "application": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/web": {
+      "application": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/node": {
+      "application": {
+        "linter": "eslint"
+      },
+      "library": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/nx-plugin": {
+      "plugin": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/nest": {
+      "application": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/express": {
+      "application": {
+        "linter": "eslint"
+      },
+      "library": {
+        "linter": "eslint"
+      }
+    }
+  },
   "projects": {
     "remix-ide": {
       "root": "apps/remix-ide",
@@ -1106,19 +1172,20 @@
         "linter": "eslint"
       }
     },
-    "@nrwl/nest": {
-      "application": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/express": {
-      "application": {
-        "linter": "eslint"
-      },
-      "library": {
-        "linter": "eslint"
+    "remix-ui-vertical-icons-panel": {
+      "root": "libs/remix-ui/vertical-icons-panel",
+      "sourceRoot": "libs/remix-ui/vertical-icons-panel/src",
+      "projectType": "library",
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": [
+              "libs/remix-ui/vertical-icons-panel/**/*.{ts,tsx,js,jsx}"
+            ]
+          }
+        }
       }
     }
-  },
-  "defaultProject": "remix-ide"
+  }
 }

From 851e0dd59d1aa7240adbdac2246aa441cbd4d985 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 11 Oct 2021 13:43:57 +0100
Subject: [PATCH 02/84] update components and setttings

---
 .../src/app/components/vertical-icons.js      | 204 ++-------
 libs/remix-ui/vertical-icons-panel/.babelrc   |  12 +-
 .../vertical-icons-panel/.eslintrc.json       |  35 +-
 .../remix-ui/vertical-icons-panel/.prettierrc |   5 +
 .../src/lib/components/BasicLogo.tsx          |  14 +
 .../src/lib/components/Home.tsx               |  26 ++
 .../src/lib/components/Icon.tsx               | 114 +++++
 .../src/lib/components/OtherIcons.tsx         |  15 +
 .../src/lib/components/Settings.tsx           |  15 +
 .../src/lib/remix-ui-vertical-icons-panel.css | 109 +++++
 .../remix-ui-vertical-icons-panel.module.css  |   0
 .../src/lib/remix-ui-vertical-icons-panel.tsx | 422 +++++++++++++++++-
 .../src/lib/vertical-icons-context-menu.tsx   | 113 +++++
 .../vertical-icons-panel/tsconfig.json        |   3 +-
 .../vertical-icons-panel/tsconfig.lib.json    |   3 +-
 .../types/vertical-icons-panel.d.ts           | 112 +++++
 package-lock.json                             |  57 ++-
 17 files changed, 1041 insertions(+), 218 deletions(-)
 create mode 100644 libs/remix-ui/vertical-icons-panel/.prettierrc
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/components/BasicLogo.tsx
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/components/Home.tsx
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
 delete mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/vertical-icons-context-menu.tsx
 create mode 100644 libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel.d.ts

diff --git a/apps/remix-ide/src/app/components/vertical-icons.js b/apps/remix-ide/src/app/components/vertical-icons.js
index 54b77f9720..8ecd2a50ac 100644
--- a/apps/remix-ide/src/app/components/vertical-icons.js
+++ b/apps/remix-ide/src/app/components/vertical-icons.js
@@ -1,13 +1,18 @@
 import * as packageJson from '../../../../../package.json'
+// eslint-disable-next-line no-unused-vars
 import { basicLogo } from '../ui/svgLogo'
+import ReactDOM from 'react-dom'
+import React from 'react' // eslint-disable-line
+// eslint-disable-next-line no-unused-vars
+import { RemixUiVerticalIconsPanel } from '@remix-ui/vertical-icons-panel'
 var yo = require('yo-yo')
 var csjs = require('csjs-inject')
 var helper = require('../../lib/helper')
 const globalRegistry = require('../../global/registry')
-const contextMenu = require('../ui/contextMenu')
+// const contextMenu = require('../ui/contextMenu')
 const { Plugin } = require('@remixproject/engine')
 const EventEmitter = require('events')
-let VERTICALMENU_HANDLE
+// let VERTICALMENU_HANDLE
 
 const profile = {
   name: 'menuicons',
@@ -23,23 +28,39 @@ export class VerticalIcons extends Plugin {
     super(profile)
     this.events = new EventEmitter()
     this.appManager = appManager
+    this.htmlElement = document.createElement('div')
+    this.htmlElement.setAttribute('id', 'icon-panel')
     this.icons = {}
     this.iconKind = {}
     this.iconStatus = {}
+    this.defaultProfile = profile
+    this.targetProfileForChange = {}
+    this.targetProfileForRemoval = {}
+    this.registry = globalRegistry
+  }
+
+  renderComponent () {
+    ReactDOM.render(
+      <RemixUiVerticalIconsPanel
+        verticalIconsPlugin={this}
+      />,
+      this.htmlElement)
+  }
 
-    const themeModule = globalRegistry.get('themeModule').api
-    themeModule.events.on('themeChanged', (theme) => {
-      this.onThemeChanged(theme.quality)
-    })
+  onActivation () {
+    this.renderComponent()
   }
 
   linkContent (profile) {
     if (!profile.icon) return
-    this.addIcon(profile)
+    if (!profile.kind) profile.kind = 'none'
+    this.targetProfileForChange[profile.name] = profile
     this.listenOnStatus(profile)
+    this.renderComponent()
   }
 
   unlinkContent (profile) {
+    this.targetProfileForRemoval = profile
     this.removeIcon(profile)
   }
 
@@ -60,55 +81,6 @@ export class VerticalIcons extends Plugin {
     this.on(profile.name, 'statusChanged', this.iconStatus[profile.name])
   }
 
-  /**
-   * Add an icon to the map
-   * @param {ModuleProfile} profile The profile of the module
-   */
-  addIcon ({ kind, name, icon, displayName, tooltip, documentation }) {
-    let title = (tooltip || displayName || name)
-    title = title.replace(/^\w/, c => c.toUpperCase())
-    this.icons[name] = yo`
-      <div
-        class="${css.icon} m-2"
-        onclick="${() => { this.toggle(name) }}"
-        plugin="${name}"
-        title="${title}"
-        oncontextmenu="${(e) => this.itemContextMenu(e, name, documentation)}"
-        data-id="verticalIconsKind${name}"
-        id="verticalIconsKind${name}"
-      >
-        <img class="image" src="${icon}" alt="${name}" />
-      </div>`
-    this.iconKind[kind || 'none'].appendChild(this.icons[name])
-  }
-
-  /**
-   * resolve a classes list for @arg key
-   * @param {Object} key
-   * @param {Object} type
-   */
-  resolveClasses (key, type) {
-    let classes = css.status
-    switch (key) {
-      case 'succeed':
-        classes += ' fas fa-check-circle text-' + type + ' ' + css.statusCheck
-        break
-      case 'edited':
-        classes += ' fas fa-sync text-' + type + ' ' + css.statusCheck
-        break
-      case 'loading':
-        classes += ' fas fa-spinner text-' + type + ' ' + css.statusCheck
-        break
-      case 'failed':
-        classes += ' fas fa-exclamation-triangle text-' + type + ' ' + css.statusCheck
-        break
-      default: {
-        classes += ' badge badge-pill badge-' + type
-      }
-    }
-    return classes
-  }
-
   /**
    * Set a new status for the @arg name
    * @param {String} name
@@ -137,7 +109,7 @@ export class VerticalIcons extends Plugin {
     const title = helper.checkSpecialChars(status.title) ? '' : status.title
 
     el.appendChild(yo`<i
-      title="${title}"
+    title="${title}"
       class="${this.resolveClasses(key, type)}"
       aria-hidden="true"
     >
@@ -152,41 +124,8 @@ export class VerticalIcons extends Plugin {
    * @param {ModuleProfile} profile The profile of the module
    */
   removeIcon ({ kind, name }) {
-    if (this.icons[name]) this.iconKind[kind || 'none'].removeChild(this.icons[name])
-  }
-
-  /**
-   *  Remove active for the current activated icons
-   */
-  removeActive () {
-    // reset filters
-    const images = this.view.querySelectorAll('.image')
-    images.forEach(function (im) {
-      im.style.setProperty('filter', 'invert(0.5)')
-    })
-
-    // remove active
-    const currentActive = this.view.querySelector('.active')
-    if (currentActive) {
-      currentActive.classList.remove('active')
-    }
-  }
-
-  /**
-   *  Add active for the new activated icon
-   * @param {string} name Name of profile of the module to activate
-   */
-  addActive (name) {
-    if (name === 'home') return
-    const themeType = globalRegistry.get('themeModule').api.currentTheme().quality
-    const invert = themeType === 'dark' ? 1 : 0
-    const brightness = themeType === 'dark' ? '150' : '0' // should be >100 for icons with color
-    const nextActive = this.view.querySelector(`[plugin="${name}"]`)
-    if (nextActive) {
-      const image = nextActive.querySelector('.image')
-      nextActive.classList.add('active')
-      image.style.setProperty('filter', `invert(${invert}) grayscale(1) brightness(${brightness}%)`)
-    }
+    if (this.targetProfileForChange[name]) delete this.targetProfileForChange[name]
+    this.renderComponent()
   }
 
   /**
@@ -194,7 +133,6 @@ export class VerticalIcons extends Plugin {
    * @param {string} name Name of profile of the module to activate
    */
   select (name) {
-    this.updateActivations(name)
     // TODO: Only keep `this.emit` (issue#2210)
     this.emit('showContent', name)
     this.events.emit('showContent', name)
@@ -205,89 +143,13 @@ export class VerticalIcons extends Plugin {
    * @param {string} name Name of profile of the module to activate
    */
   toggle (name) {
-    this.updateActivations(name)
-    // TODO: Only keep `this.emit` (issue#2210)
+    // // TODO: Only keep `this.emit` (issue#2210)
     this.emit('toggleContent', name)
     this.events.emit('toggleContent', name)
   }
 
-  updateActivations (name) {
-    this.removeActive()
-    this.addActive(name)
-  }
-
-  onThemeChanged (themeType) {
-    const invert = themeType === 'dark' ? 1 : 0
-    const active = this.view.querySelector('.active')
-    if (active) {
-      const image = active.querySelector('.image')
-      image.style.setProperty('filter', `invert(${invert})`)
-    }
-  }
-
-  async itemContextMenu (e, name, documentation) {
-    const actions = {}
-    if (await this.appManager.canDeactivatePlugin(profile, { name })) {
-      actions.Deactivate = () => {
-        // this.call('manager', 'deactivatePlugin', name)
-        this.appManager.deactivatePlugin(name)
-        if (e.target.parentElement.classList.contains('active')) {
-          this.select('filePanel')
-        }
-      }
-    }
-    const links = {}
-    if (documentation) {
-      links.Documentation = documentation
-    }
-    if (Object.keys(actions).length || Object.keys(links).length) {
-      VERTICALMENU_HANDLE && VERTICALMENU_HANDLE.hide(null, true)
-      VERTICALMENU_HANDLE = contextMenu(e, actions, links)
-    }
-    e.preventDefault()
-    e.stopPropagation()
-  }
-
   render () {
-    const home = yo`
-      <div
-        class="m-1 mt-2 ${css.homeIcon}"
-        onclick="${async () => {
-          await this.appManager.activatePlugin('home')
-          this.call('tabs', 'focus', 'home')
-        }}"
-        plugin="home" title="Home"
-        data-id="verticalIconsHomeIcon"
-        id="verticalIconsHomeIcon"
-      >
-        ${basicLogo()}
-      </div>
-    `
-    this.iconKind.fileexplorer = yo`<div id='fileExplorerIcons' data-id="verticalIconsFileExplorerIcons"></div>`
-    this.iconKind.compiler = yo`<div id='compileIcons'></div>`
-    this.iconKind.udapp = yo`<div id='runIcons'></div>`
-    this.iconKind.testing = yo`<div id='testingIcons'></div>`
-    this.iconKind.analysis = yo`<div id='analysisIcons'></div>`
-    this.iconKind.debugging = yo`<div id='debuggingIcons' data-id="verticalIconsDebuggingIcons"></div>`
-    this.iconKind.none = yo`<div id='otherIcons'></div>`
-    this.iconKind.settings = yo`<div id='settingsIcons' data-id="verticalIconsSettingsIcons"></div>`
-
-    this.view = yo`
-      <div class="h-100">
-        <div class=${css.icons}>
-          ${home}
-          ${this.iconKind.fileexplorer}
-          ${this.iconKind.compiler}
-          ${this.iconKind.udapp}
-          ${this.iconKind.testing}
-          ${this.iconKind.analysis}
-          ${this.iconKind.debugging}
-          ${this.iconKind.none}
-          ${this.iconKind.settings}
-        </div>
-      </div>
-    `
-    return this.view
+    return this.htmlElement
   }
 }
 
diff --git a/libs/remix-ui/vertical-icons-panel/.babelrc b/libs/remix-ui/vertical-icons-panel/.babelrc
index ccae900be4..64a3748691 100644
--- a/libs/remix-ui/vertical-icons-panel/.babelrc
+++ b/libs/remix-ui/vertical-icons-panel/.babelrc
@@ -1,12 +1,4 @@
 {
-  "presets": [
-    [
-      "@nrwl/react/babel",
-      {
-        "runtime": "automatic",
-        "useBuiltIns": "usage"
-      }
-    ]
-  ],
+  "presets": ["@nrwl/react/babel"],
   "plugins": []
-}
+}
\ No newline at end of file
diff --git a/libs/remix-ui/vertical-icons-panel/.eslintrc.json b/libs/remix-ui/vertical-icons-panel/.eslintrc.json
index 50e59482cf..b545a2cd9e 100644
--- a/libs/remix-ui/vertical-icons-panel/.eslintrc.json
+++ b/libs/remix-ui/vertical-icons-panel/.eslintrc.json
@@ -1,18 +1,19 @@
 {
-  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {}
-    },
-    {
-      "files": ["*.ts", "*.tsx"],
-      "rules": {}
-    },
-    {
-      "files": ["*.js", "*.jsx"],
-      "rules": {}
-    }
-  ]
-}
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "extends": ["../../../.eslintrc"],
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parserOptions": {
+    "ecmaVersion": 11,
+    "sourceType": "module"
+  },
+  "rules": {
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "error"
+  }
+}
\ No newline at end of file
diff --git a/libs/remix-ui/vertical-icons-panel/.prettierrc b/libs/remix-ui/vertical-icons-panel/.prettierrc
new file mode 100644
index 0000000000..591b168cb7
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/.prettierrc
@@ -0,0 +1,5 @@
+{
+    "tabWidth": 2,
+    "singleQuote": true,
+    "semi": false
+}
\ No newline at end of file
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/BasicLogo.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/BasicLogo.tsx
new file mode 100644
index 0000000000..ab4ee414cd
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/BasicLogo.tsx
@@ -0,0 +1,14 @@
+/* eslint-disable no-use-before-define */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react'
+
+function BasicLogo () {
+  return (<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
+    <path d="M91.84,35a.09.09,0,0,1-.1-.07,41,41,0,0,0-79.48,0,.09.09,0,0,1-.1.07C9.45,35,1,35.35,1,42.53c0,8.56,1,16,6,20.32,2.16,1.85,5.81,2.3,9.27,2.22a44.4,44.4,0,0,0,6.45-.68.09.09,0,0,0,.06-.15A34.81,34.81,0,0,1,17,45c0-.1,0-.21,0-.31a35,35,0,0,1,70,0c0,.1,0,.21,0,.31a34.81,34.81,0,0,1-5.78,19.24.09.09,0,0,0,.06.15,44.4,44.4,0,0,0,6.45.68c3.46.08,7.11-.37,9.27-2.22,5-4.27,6-11.76,6-20.32C103,35.35,94.55,35,91.84,35Z"/>
+    <path d="M52,74,25.4,65.13a.1.1,0,0,0-.1.17L51.93,91.93a.1.1,0,0,0,.14,0L78.7,65.3a.1.1,0,0,0-.1-.17L52,74A.06.06,0,0,1,52,74Z"/>
+    <path d="M75.68,46.9,82,45a.09.09,0,0,0,.08-.09,29.91,29.91,0,0,0-.87-6.94.11.11,0,0,0-.09-.08l-6.43-.58a.1.1,0,0,1-.06-.18l4.78-4.18a.13.13,0,0,0,0-.12,30.19,30.19,0,0,0-3.65-6.07.09.09,0,0,0-.11,0l-5.91,2a.1.1,0,0,1-.12-.14L72.19,23a.11.11,0,0,0,0-.12,29.86,29.86,0,0,0-5.84-4.13.09.09,0,0,0-.11,0l-4.47,4.13a.1.1,0,0,1-.17-.07l.09-6a.1.1,0,0,0-.07-.1,30.54,30.54,0,0,0-7-1.47.1.1,0,0,0-.1.07l-2.38,5.54a.1.1,0,0,1-.18,0l-2.37-5.54a.11.11,0,0,0-.11-.06,30,30,0,0,0-7,1.48.12.12,0,0,0-.07.1l.08,6.05a.09.09,0,0,1-.16.07L37.8,18.76a.11.11,0,0,0-.12,0,29.75,29.75,0,0,0-5.83,4.13.11.11,0,0,0,0,.12l2.59,5.6a.11.11,0,0,1-.13.14l-5.9-2a.11.11,0,0,0-.12,0,30.23,30.23,0,0,0-3.62,6.08.11.11,0,0,0,0,.12l4.79,4.19a.1.1,0,0,1-.06.17L23,37.91a.1.1,0,0,0-.09.07A29.9,29.9,0,0,0,22,44.92a.1.1,0,0,0,.07.1L28.4,47a.1.1,0,0,1,0,.18l-5.84,3.26a.16.16,0,0,0,0,.11,30.17,30.17,0,0,0,2.1,6.76c.32.71.67,1.4,1,2.08a.1.1,0,0,0,.06,0L52,68.16H52l26.34-8.78a.1.1,0,0,0,.06-.05,30.48,30.48,0,0,0,3.11-8.88.1.1,0,0,0-.05-.11l-5.83-3.26A.1.1,0,0,1,75.68,46.9Z"/>
+  </svg>
+  )
+}
+
+export default BasicLogo
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Home.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Home.tsx
new file mode 100644
index 0000000000..7490819deb
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Home.tsx
@@ -0,0 +1,26 @@
+/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
+import React, { ReactNode } from 'react'
+import BasicLogo from './BasicLogo'
+interface HomeProps {
+  verticalIconPlugin: VerticalIcons
+}
+
+function Home ({ verticalIconPlugin }: HomeProps) {
+  return (
+    <div
+      className="m-1 mt-2 remixui_homeIcon"
+      onClick={async () => verticalIconPlugin.activateHome()}
+      // @ts-ignore
+      plugin="home"
+      title="Home"
+      data-id="verticalIconsHomeIcon"
+      id="verticalIconsHomeIcon"
+    >
+      <BasicLogo />
+    </div>
+  )
+}
+
+export default Home
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
new file mode 100644
index 0000000000..5369b60acc
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
@@ -0,0 +1,114 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable no-use-before-define */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import VerticalIconsContextMenu from '../vertical-icons-context-menu'
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React, { Fragment, SyntheticEvent, useRef, useState } from 'react'
+import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
+// import helper from 'apps/remix-ide/src/lib/helper'
+
+  interface IconProps {
+    verticalIconPlugin: VerticalIcons
+    kind: string
+    name: string
+    icon: string
+    displayName: string
+    tooltip: string
+    documentation: string
+    contextMenuAction: (evt: any, profileName: string, documentation: string) => void
+    addActive: (profileName: string) => void
+    removeActive: () => void
+  }
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function Icon ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  kind,
+  name,
+  icon,
+  displayName,
+  tooltip,
+  documentation,
+  verticalIconPlugin,
+  contextMenuAction,
+  addActive,
+  removeActive
+}: IconProps) {
+  const [title] = useState(() => {
+    const temp = tooltip || displayName || name
+    return temp.replace(/^\w/, word => word.toUpperCase())
+  })
+  const [links, setLinks] = useState<{ Documentation: string, CanDeactivate: boolean }>(
+      {} as { Documentation: string, CanDeactivate: boolean }
+  )
+  // @ts-ignore
+  const [pageX, setPageX] = useState<number>(null)
+  // @ts-ignore
+  const [pageY, setPageY] = useState<number>(null)
+  const [showContext, setShowContext] = useState(false)
+  const [canDeactivate] = useState(false)
+  const iconRef = useRef(null)
+
+  const handleContextMenu = (e: SyntheticEvent & PointerEvent) => {
+    const deactivationState = verticalIconPlugin.appManager
+      .canDeactivatePlugin(verticalIconPlugin.defaultProfile, { name })
+    if (documentation && documentation.length > 0 && deactivationState) {
+      setLinks({ Documentation: documentation, CanDeactivate: deactivationState })
+    } else {
+      setLinks({ Documentation: documentation, CanDeactivate: deactivationState })
+    }
+    setShowContext(false)
+    setPageX(e.pageX)
+    setPageY(e.pageY)
+    setShowContext(true)
+  }
+  function closeContextMenu () {
+    setShowContext(false)
+  }
+
+  return (
+    <Fragment>
+      <div
+        className="remixui_icon m-2"
+        onLoad={() => {
+          if (name === 'filePanel') {
+            addActive(name)
+          }
+        }}
+        onClick={() => {
+          removeActive()
+          addActive(name)
+          verticalIconPlugin.toggle(name)
+        }}
+        // @ts-ignore
+        plugin={name}
+        title={title}
+        onContextMenu={(e: any) => {
+          e.preventDefault()
+          e.stopPropagation()
+          handleContextMenu(e)
+        }}
+        onBlur={closeContextMenu}
+        data-id={`verticalIconsKind${name}`}
+        id={`verticalIconsKind${name}`}
+        ref={iconRef}
+      >
+        <img className="remixui_image" src={icon} alt={name} />
+      </div>
+      {showContext ? (
+        <VerticalIconsContextMenu
+          pageX={pageX}
+          pageY={pageY}
+          links={links}
+          profileName={name}
+          hideContextMenu={closeContextMenu}
+          canBeDeactivated={canDeactivate}
+          verticalIconPlugin={verticalIconPlugin}
+          contextMenuAction={contextMenuAction}
+        />
+      ) : null}
+    </Fragment>
+  )
+}
+
+export default Icon
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx
new file mode 100644
index 0000000000..50483a330a
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx
@@ -0,0 +1,15 @@
+/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { ReactNode } from 'react'
+
+interface OtherIconsProps {
+  children: ReactNode
+}
+
+function OtherIcons ({ children }: OtherIconsProps) {
+  return (
+    <div id="otherIcons">{ children }</div>
+  )
+}
+
+export default OtherIcons
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
new file mode 100644
index 0000000000..c2543b01bc
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
@@ -0,0 +1,15 @@
+/* eslint-disable no-use-before-define */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React, { ReactNode } from 'react'
+
+interface SettingsProps {
+  children: ReactNode
+}
+
+function Settings ({ children }: SettingsProps) {
+  return (
+    <div id="settingsIcons" data-id="vertialIconsSettingsIcons">{ children }</div>
+  )
+}
+
+export default Settings
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
new file mode 100644
index 0000000000..d8c7e37f15
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
@@ -0,0 +1,109 @@
+.remixui_homeIcon {
+    display: block;
+    width: 42px;
+    height: 42px;
+    margin-bottom: 20px;
+    cursor: pointer;
+  }
+  .remixui_homeIcon svg path {
+    fill: var(--primary);
+  }
+  .remixui_homeIcon svg polygon {
+    fill: var(--primary);
+  }
+  .remixui_icons {
+  }
+  .remixui_icon {
+    cursor: pointer;
+    margin-bottom: 3px;
+    position: 12px;
+    width: 36px;
+    height: 36px;
+    padding: relative;
+    border-radius: 8px;
+  }
+  .remixui_icon img {
+    width: 28px;
+    height: 28px;
+    padding: 4px;
+    filter: invert(0.5);
+  }
+  .remixui_image {
+  }
+  .remixui_icon svg {
+    width: 28px;
+    height: 28px;
+    padding: 4px;
+  }
+  .remixui_icon[title='Settings'] {
+    position: absolute;
+    bottom: 0;
+  }
+  .remixui_status {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+  .remixui_statusCheck {
+    font-size: 1.2em;
+  }
+  .remixui_statusWithBG {
+    border-radius: 8px;
+    background-color: var(--danger);
+    color: var(--light);
+    font-size: 12px;
+    height: 15px;
+    text-align: center;
+    font-weight: bold;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+  
+  .remixui_verticalIconContextcontainer {
+    display: block;
+    position: fixed;
+    border-radius: 2px;
+    z-index: 1000;
+    box-shadow: 0 0 4px var(--dark);
+  }
+  .remixui_liitem {
+    padding: 2px;
+    padding-left: 6px;
+    cursor: pointer;
+    color: var(--text-dark);
+    background-color: var(--light);
+  }
+  .remixui_liitem:hover {
+    background-color: var(--secondary);
+  }
+  
+  .remixui_scrollbar {
+    overflow-y: scroll;
+    scrollbar-width: none; /* Firefox hide scrollbar */
+    -ms-overflow-style: none;
+  }
+  .remixui_scrollable-container {
+    max-height: 500px;
+  }
+  .remixui_scrollbar::-webkit-scrollbar { /* Chrome, Safari and other Webkit browsers*/
+    display: none;
+  }
+  .remixui_hide-scroll {
+    overflow-x: 'hidden';
+  }
+  .remixui_default-icons-container {
+    border-bottom: 1px solid #3f4455;
+  }
+  .remixui_icon-chevron {
+    z-index: 1000;
+  }
+  .remixui_icon-chevron {
+    z-index: 1000;
+  }
+  .remixui_icon-chevron {
+    z-index: 1000;
+  }
+  #menuitems {
+    list-style: none;
+    margin: 0px;
+  }
\ No newline at end of file
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index e7980c0939..fc62cdd5c6 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -1,16 +1,416 @@
-import './remix-ui-vertical-icons-panel.module.css';
+/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, {
+  Fragment,
+  useEffect,
+  useRef
+} from 'react'
 
-/* eslint-disable-next-line */
-export interface RemixUiVerticalIconsPanelProps {}
+import './remix-ui-vertical-icons-panel.css'
+import OtherIcons from './components/OtherIcons'
+import { VerticalIcons } from '../../types/vertical-icons-panel'
+import Home from './components/Home'
+import Icon from './components/Icon'
+import Settings from './components/Settings'
+export interface RemixUiVerticalIconsPanelProps {
+  verticalIconsPlugin: VerticalIcons
+}
+
+let scrollHeight: any
+let clientHeight: any
+
+export function RemixUiVerticalIconsPanel ({
+  verticalIconsPlugin
+}: RemixUiVerticalIconsPanelProps) {
+  const scrollableRef = useRef<any>()
+  const iconPanelRef = useRef<any>()
+  // @ts-ignore
+  // scrollHeight = scrollableRef.current!.scrollHeight
+  // // @ts-ignore
+  // clientHeight = scrollableRef.current!.clientHeight
+
+  function onThemeChanged (themeType: any) {
+    const invert = themeType === 'dark' ? 1 : 0
+    // @ts-ignore
+    const active = iconPanelRef.current.querySelector('.active')
+    if (active) {
+      // @ts-ignore
+      const image = iconPanelRef.current.querySelector('.remixui_image')
+      image.style.setProperty('filter', `invert(${invert})`)
+    }
+  }
+
+  function removeActive () {
+    // @ts-ignore
+    const images = iconPanelRef.current.querySelectorAll('.remixui_image')
+    images.forEach(function (im: any) {
+      im.style.setProperty('filter', 'invert(0.5)')
+    })
+
+    // remove active
+    // @ts-ignore
+    const currentActive = iconPanelRef.current.querySelector('.active')
+    if (currentActive) {
+      currentActive.classList.remove('active')
+    }
+  }
+
+  function addActive (name: string) {
+    if (name === 'home') return
+    const themeType = verticalIconsPlugin.registry.get('themeModule').api.currentTheme().quality
+    const invert = themeType === 'dark' ? 1 : 0
+    const brightness = themeType === 'dark' ? '150' : '0' // should be >100 for icons with color
+    // @ts-ignore
+    const nextActive = iconPanelRef.current.querySelector(`[plugin="${name}"]`)
+    if (nextActive) {
+      const image = nextActive.querySelector('.remixui_image')
+      nextActive.classList.add('active')
+      image.style.setProperty('filter', `invert(${invert}) grayscale(1) brightness(${brightness}%)`)
+    }
+  }
+
+  async function itemContextAction (e: any, name: string, documentation: string) {
+    verticalIconsPlugin.appManager.deactivatePlugin(name)
+    if (e.target.parentElement.classList.contains('active')) {
+      verticalIconsPlugin.select('filePanel')
+    }
+    verticalIconsPlugin.renderComponent()
+  }
+
+  useEffect(() => {
+    console.log('usefRef for scrolling', scrollableRef)
+  })
+
+  useEffect(() => {
+    const themeModule = verticalIconsPlugin.registry.get('themeModule').api
+    themeModule.events.on('themeChanged', (theme: any) => {
+      onThemeChanged(theme.quality)
+    })
+  }, [])
+
+  useEffect(() => {
+    // @ts-ignore
+    scrollHeight = scrollableRef.current.scrollHeight
+    // @ts-ignore
+    clientHeight = scrollableRef.current.clientHeight
+    console.log('scrollHeight ', scrollHeight)
+  }, [])
+
+  useEffect(() => {
+    const themeModule = verticalIconsPlugin.registry.get('themeModule').api
+    themeModule.events.on('themeChanged', (theme: any) => {
+      onThemeChanged(theme.quality)
+    })
+  }, [])
+
+  useEffect(() => {
+    const themeModule = verticalIconsPlugin.registry.get('themeModule').api
+    themeModule.events.on('themeChanged', (theme: any) => {
+      onThemeChanged(theme.quality)
+    })
+  }, [])
 
-export function RemixUiVerticalIconsPanel(
-  props: RemixUiVerticalIconsPanelProps
-) {
   return (
-    <div>
-      <h1>Welcome to remix-ui-vertical-icons-panel!</h1>
+    <div id="iconsP" className="h-100">
+      <div className="remixui_icons" ref={iconPanelRef}>
+        <div className="remixui_default-icons-container">
+          <Home verticalIconPlugin={verticalIconsPlugin} />
+          {verticalIconsPlugin.targetProfileForChange &&
+          Object.keys(verticalIconsPlugin.targetProfileForChange).length
+            ? Object.keys(verticalIconsPlugin.targetProfileForChange)
+              .filter(p => p !== 'settings')
+              .filter(p => p !== 'pluginManager')
+              .filter(p => p === 'filePanel')
+              .map(p => (
+                <div id="fileExplorerIcons" key={
+                  verticalIconsPlugin.targetProfileForChange[p].displayName
+                } data-id="verticalIconsFileExplorerIcons">
+                  <Icon
+                    kind={verticalIconsPlugin.targetProfileForChange[p].kind}
+                    displayName={
+                      verticalIconsPlugin.targetProfileForChange[p].displayName
+                    }
+                    documentation={
+                      verticalIconsPlugin.targetProfileForChange[p]
+                        .documentation
+                    }
+                    icon={verticalIconsPlugin.targetProfileForChange[p].icon}
+                    name={verticalIconsPlugin.targetProfileForChange[p].name}
+                    tooltip={
+                      verticalIconsPlugin.targetProfileForChange[p].tooltip
+                    }
+                    verticalIconPlugin={verticalIconsPlugin}
+                    contextMenuAction={itemContextAction}
+                    addActive={addActive}
+                    removeActive={removeActive}
+                  />
+                </div>
+              ))
+            : null}
+          {verticalIconsPlugin.targetProfileForChange &&
+          Object.keys(verticalIconsPlugin.targetProfileForChange).length
+            ? Object.keys(verticalIconsPlugin.targetProfileForChange)
+              .filter(p => p !== 'settings')
+              .filter(p => p !== 'pluginManager')
+              .filter(p => p === 'solidity')
+              .map(p => (
+                <div id="compileIcons" key={
+                  verticalIconsPlugin.targetProfileForChange[p].displayName
+                }>
+                  <Icon
+                    kind={verticalIconsPlugin.targetProfileForChange[p].kind}
+                    displayName={
+                      verticalIconsPlugin.targetProfileForChange[p].displayName
+                    }
+                    documentation={
+                      verticalIconsPlugin.targetProfileForChange[p]
+                        .documentation
+                    }
+                    icon={verticalIconsPlugin.targetProfileForChange[p].icon}
+                    name={verticalIconsPlugin.targetProfileForChange[p].name}
+                    tooltip={
+                      verticalIconsPlugin.targetProfileForChange[p].tooltip
+                    }
+                    verticalIconPlugin={verticalIconsPlugin}
+                    contextMenuAction={itemContextAction}
+                    addActive={addActive}
+                    removeActive={removeActive}
+                    key={
+                      verticalIconsPlugin.targetProfileForChange[p].displayName
+                    }
+                  />
+                </div>
+              ))
+            : null}
+          {verticalIconsPlugin.targetProfileForChange &&
+          Object.keys(verticalIconsPlugin.targetProfileForChange).length
+            ? Object.keys(verticalIconsPlugin.targetProfileForChange)
+              .filter(p => p !== 'settings')
+              .filter(p => p !== 'pluginManager')
+              .filter(p => p === 'udapp')
+              .map(p => (
+                <div id="compileIcons" key={
+                  verticalIconsPlugin.targetProfileForChange[p].displayName
+                }>
+                  <Icon
+                    kind={verticalIconsPlugin.targetProfileForChange[p].kind}
+                    displayName={
+                      verticalIconsPlugin.targetProfileForChange[p].displayName
+                    }
+                    documentation={
+                      verticalIconsPlugin.targetProfileForChange[p]
+                        .documentation
+                    }
+                    icon={verticalIconsPlugin.targetProfileForChange[p].icon}
+                    name={verticalIconsPlugin.targetProfileForChange[p].name}
+                    tooltip={
+                      verticalIconsPlugin.targetProfileForChange[p].tooltip
+                    }
+                    verticalIconPlugin={verticalIconsPlugin}
+                    contextMenuAction={itemContextAction}
+                    addActive={addActive}
+                    removeActive={removeActive}
+                    key={
+                      verticalIconsPlugin.targetProfileForChange[p].displayName
+                    }
+                  />
+                </div>
+              ))
+            : null}
+          {verticalIconsPlugin.targetProfileForChange &&
+          Object.keys(verticalIconsPlugin.targetProfileForChange).length
+            ? Object.keys(verticalIconsPlugin.targetProfileForChange)
+              .filter(p => p !== 'settings')
+              .filter(p => p !== 'pluginManager')
+              .filter(p => p === 'solidityStaticAnalysis')
+              .map(p => (
+                <div id="analysisIcons" key={
+                  verticalIconsPlugin.targetProfileForChange[p].displayName
+                }>
+                  <Icon
+                    kind={verticalIconsPlugin.targetProfileForChange[p].kind}
+                    displayName={
+                      verticalIconsPlugin.targetProfileForChange[p].displayName
+                    }
+                    documentation={
+                      verticalIconsPlugin.targetProfileForChange[p]
+                        .documentation
+                    }
+                    icon={verticalIconsPlugin.targetProfileForChange[p].icon}
+                    name={verticalIconsPlugin.targetProfileForChange[p].name}
+                    tooltip={
+                      verticalIconsPlugin.targetProfileForChange[p].tooltip
+                    }
+                    verticalIconPlugin={verticalIconsPlugin}
+                    contextMenuAction={itemContextAction}
+                    addActive={addActive}
+                    removeActive={removeActive}
+                    key={
+                      verticalIconsPlugin.targetProfileForChange[p].displayName
+                    }
+                  />
+                </div>
+              ))
+            : null}
+          {verticalIconsPlugin.targetProfileForChange &&
+          Object.keys(verticalIconsPlugin.targetProfileForChange).length
+            ? Object.keys(verticalIconsPlugin.targetProfileForChange)
+              .filter(p => p !== 'settings')
+              .filter(p => p !== 'pluginManager')
+              .filter(p => p === 'debugger')
+              .map(p => (
+                <div id="debuggingIcons" data-id="verticalIconsDebuggingIcons" key={
+                  verticalIconsPlugin.targetProfileForChange[p].displayName
+                }>
+                  <Icon
+                    kind={verticalIconsPlugin.targetProfileForChange[p].kind}
+                    displayName={
+                      verticalIconsPlugin.targetProfileForChange[p].displayName
+                    }
+                    documentation={
+                      verticalIconsPlugin.targetProfileForChange[p]
+                        .documentation
+                    }
+                    icon={verticalIconsPlugin.targetProfileForChange[p].icon}
+                    name={verticalIconsPlugin.targetProfileForChange[p].name}
+                    tooltip={
+                      verticalIconsPlugin.targetProfileForChange[p].tooltip
+                    }
+                    verticalIconPlugin={verticalIconsPlugin}
+                    contextMenuAction={itemContextAction}
+                    addActive={addActive}
+                    removeActive={removeActive}
+                    key={
+                      verticalIconsPlugin.targetProfileForChange[p].displayName
+                    }
+                  />
+                </div>
+              ))
+            : null}
+        </div>
+        <div
+          id="remixuiScrollable"
+          className="remixui_scrollable-container remixui_scrollbar remixui_hide-scroll"
+          ref={scrollableRef}
+        >
+          <OtherIcons>
+            {Object.keys(verticalIconsPlugin.targetProfileForChange)
+              .filter(p => p !== 'settings')
+              .filter(p => p !== 'pluginManager')
+              .filter(p => p !== 'filePanel')
+              .filter(p => p !== 'debugger')
+              .filter(p => p !== 'compiler')
+              .filter(p => p !== 'solidity')
+              .filter(p => p !== 'udapp')
+              .filter(p => p !== 'testing')
+              .filter(p => p !== 'solidityStaticAnalysis')
+              .map(p => (
+                <Icon
+                  kind={verticalIconsPlugin.targetProfileForChange[p].kind}
+                  displayName={
+                    verticalIconsPlugin.targetProfileForChange[p].displayName
+                  }
+                  documentation={
+                    verticalIconsPlugin.targetProfileForChange[p].documentation
+                  }
+                  icon={verticalIconsPlugin.targetProfileForChange[p].icon}
+                  name={verticalIconsPlugin.targetProfileForChange[p].name}
+                  tooltip={
+                    verticalIconsPlugin.targetProfileForChange[p].tooltip
+                  }
+                  verticalIconPlugin={verticalIconsPlugin}
+                  contextMenuAction={itemContextAction}
+                  addActive={addActive}
+                  removeActive={removeActive}
+                  key={
+                    verticalIconsPlugin.targetProfileForChange[p].displayName
+                  }
+                />
+              ))}
+          </OtherIcons>
+        </div>
+        {scrollableRef.current && scrollableRef.current!.scrollHeight > clientHeight
+          ? <i className="fa fa-chevron-double-down remixui_icon-chevron m-3"></i>
+          : null
+        }
+        {verticalIconsPlugin.targetProfileForChange &&
+          Object.keys(verticalIconsPlugin.targetProfileForChange).length ? (
+            <Fragment>
+              <Settings>
+                <>
+                  {Object.keys(verticalIconsPlugin.targetProfileForChange)
+                    .filter(p => p === 'pluginManager')
+                    .map(p => (
+                      <Icon
+                        kind={
+                          verticalIconsPlugin.targetProfileForChange[p].kind
+                        }
+                        displayName={
+                          verticalIconsPlugin.targetProfileForChange[p]
+                            .displayName
+                        }
+                        documentation={
+                          verticalIconsPlugin.targetProfileForChange[p]
+                            .documentation
+                        }
+                        icon={
+                          verticalIconsPlugin.targetProfileForChange[p].icon
+                        }
+                        name={
+                          verticalIconsPlugin.targetProfileForChange[p].name
+                        }
+                        tooltip={
+                          verticalIconsPlugin.targetProfileForChange[p].tooltip
+                        }
+                        verticalIconPlugin={verticalIconsPlugin}
+                        contextMenuAction={itemContextAction}
+                        addActive={addActive}
+                        removeActive={removeActive}
+                        key={
+                          verticalIconsPlugin.targetProfileForChange[p]
+                            .displayName
+                        }
+                      />
+                    ))}
+                  {Object.keys(verticalIconsPlugin.targetProfileForChange)
+                    .filter(p => p === 'settings')
+                    .map(p => (
+                      <Icon
+                        kind={
+                          verticalIconsPlugin.targetProfileForChange[p].kind
+                        }
+                        displayName={
+                          verticalIconsPlugin.targetProfileForChange[p]
+                            .displayName
+                        }
+                        documentation={
+                          verticalIconsPlugin.targetProfileForChange[p]
+                            .documentation
+                        }
+                        icon={
+                          verticalIconsPlugin.targetProfileForChange[p].icon
+                        }
+                        name={
+                          verticalIconsPlugin.targetProfileForChange[p].name
+                        }
+                        tooltip={
+                          verticalIconsPlugin.targetProfileForChange[p].tooltip
+                        }
+                        verticalIconPlugin={verticalIconsPlugin}
+                        contextMenuAction={itemContextAction}
+                        addActive={addActive}
+                        removeActive={removeActive}
+                        key={
+                          verticalIconsPlugin.targetProfileForChange[p]
+                            .displayName
+                        }
+                      />
+                    ))}
+                </>
+              </Settings>
+            </Fragment>
+          ) : null}
+      </div>
     </div>
-  );
+  )
 }
-
-export default RemixUiVerticalIconsPanel;
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/vertical-icons-context-menu.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/vertical-icons-context-menu.tsx
new file mode 100644
index 0000000000..4a3ddb075d
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/vertical-icons-context-menu.tsx
@@ -0,0 +1,113 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable no-use-before-define */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React, { Fragment, useEffect, useRef } from 'react'
+import { VerticalIcons } from '../../types/vertical-icons-panel'
+
+export interface VerticalIconsContextMenuProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  // actions: action[]
+  pageX: number
+  pageY: number
+  profileName: string
+  links: { Documentation: string, CanDeactivate: boolean }
+  canBeDeactivated: boolean
+  verticalIconPlugin: VerticalIcons
+  hideContextMenu: () => void
+  contextMenuAction: (evt: any, profileName: string, documentation: string) => void
+}
+
+interface MenuLinksProps {
+  listItems: { Documentation: string, CanDeactivate: boolean }
+  hide: () => void
+  profileName: string
+  canBeDeactivated: boolean
+  verticalIconPlugin: VerticalIcons
+  ref?: React.MutableRefObject<any>
+  toggle: (name: string) => void
+  contextMenuAction: (evt: any, profileName: string, documentation: string) => void
+}
+
+interface MenuProps {
+  verticalIconsPlugin: VerticalIcons
+  profileName: string
+  listItems: { Documentation: string, CanDeactivate: boolean }
+  hide: () => void
+}
+
+function VerticalIconsContextMenu (props: VerticalIconsContextMenuProps) {
+  const menuRef = useRef(null)
+  useEffect(() => {
+    document.addEventListener('click', props.hideContextMenu)
+    return () => document.removeEventListener('click', props.hideContextMenu)
+  }, [])
+  useEffect(() => {
+    // @ts-ignore
+    menuRef.current.focus()
+  }, [])
+  return (
+    <div
+      id="menuItemsContainer"
+      className="p-1 remixui_verticalIconContextcontainer bg-light shadow border"
+      onBlur={props.hideContextMenu}
+      style={{
+        left: props.pageX,
+        top: props.pageY,
+        display: 'block'
+
+      }}
+      ref={menuRef}
+    >
+      <ul id="menuitems">
+        <MenuForLinks
+          hide={props.hideContextMenu}
+          listItems={props.links}
+          profileName={props.profileName}
+          canBeDeactivated={props.canBeDeactivated}
+          verticalIconPlugin={props.verticalIconPlugin}
+          toggle={props.verticalIconPlugin.toggle}
+          contextMenuAction={props.contextMenuAction}
+        />
+      </ul>
+    </div>
+  )
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function MenuForLinks ({
+  listItems,
+  hide,
+  profileName,
+  contextMenuAction
+}: MenuLinksProps) {
+  return (
+    <Fragment>
+      {listItems.CanDeactivate &&
+        <li
+          id="menuitemdeactivate"
+          onClick={(evt) => {
+            contextMenuAction(evt, profileName, listItems.Documentation)
+            hide()
+          }}
+          className="remixui_liitem"
+        >
+        Deactivate
+        </li>}
+      {(listItems.Documentation && listItems.Documentation.length > 0) &&
+            <li
+              id="menuitemdocumentation"
+              className="remixui_liitem"
+            >
+              <a
+                onClick={hide}
+                href={listItems.Documentation}
+                target="_blank"
+              >
+                Documentation
+              </a>
+            </li>}
+    </Fragment>
+  )
+}
+
+export default VerticalIconsContextMenu
diff --git a/libs/remix-ui/vertical-icons-panel/tsconfig.json b/libs/remix-ui/vertical-icons-panel/tsconfig.json
index 8bd701c578..9b506c23c8 100644
--- a/libs/remix-ui/vertical-icons-panel/tsconfig.json
+++ b/libs/remix-ui/vertical-icons-panel/tsconfig.json
@@ -8,7 +8,8 @@
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "resolveJsonModule": true
   },
   "files": [],
   "include": [],
diff --git a/libs/remix-ui/vertical-icons-panel/tsconfig.lib.json b/libs/remix-ui/vertical-icons-panel/tsconfig.lib.json
index b560bc4dec..c2d3f619e2 100644
--- a/libs/remix-ui/vertical-icons-panel/tsconfig.lib.json
+++ b/libs/remix-ui/vertical-icons-panel/tsconfig.lib.json
@@ -2,7 +2,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../../dist/out-tsc",
-    "types": ["node"]
+    "types": ["node"],
+    "resolveJsonModule": true
   },
   "files": [
     "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
diff --git a/libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel.d.ts b/libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel.d.ts
new file mode 100644
index 0000000000..ad9924677f
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel.d.ts
@@ -0,0 +1,112 @@
+/* eslint-disable @typescript-eslint/ban-types */
+/* eslint-disable no-use-before-define */
+import { Plugin } from '@remixproject/engine/lib/abstract'
+import * as packageJson from '../../../../package.json'
+import * as registry from 'apps/remix-ide/src/global/registry'
+import { RemixAppManager } from '@remix-ui/plugin-manager'
+
+export type Kind =
+  | 'fileexplorer'
+  | 'compiler'
+  | 'udapp'
+  | 'testing'
+  | 'analysis'
+  | 'debugging'
+  | 'settings'
+  | 'none'
+
+type IconKindType = {
+  kind: {}
+}
+
+interface defaultModuleProfile {
+  name: string
+  displayName: string
+  description: string
+  version: packageJson.version
+  methods: string[]
+}
+
+interface PassedProfile {
+  name: string
+  displayName: string
+  description: string
+  version: packageJson.version
+  methods: string[]
+  icon?: string
+  tooltip?: string
+  kind?: string
+  documentation?: string
+}
+
+interface targetProfileIcons {
+  profile: PassedProfile
+}
+export class VerticalIcons extends Plugin<any, any> {
+  // constructor(appManager: RemixAppManager)
+  events: EventEmitter
+  appManager: RemixAppManager
+  htmlElement: HTMLDivElement
+  icons: {
+    name: any
+  }
+
+  iconKind: {}
+  iconStatus: {}
+  defaultProfile: defaultModuleProfile
+  targetProfileForChange: any
+  targetProfileForRemoval: any
+  registry: registry
+  renderComponent(): void
+  linkContent(profile: any): void
+  unlinkContent(profile: any): void
+  listenOnStatus(profile: any): void
+  activateHome(): void
+  /**
+   * Add an icon to the map
+   * @param {ModuleProfile} profile The profile of the module
+   */
+  addIcon({ kind, name, icon, displayName, tooltip, documentation }: any): void
+  /**
+   * resolve a classes list for @arg key
+   * @param {Object} key
+   * @param {Object} type
+   */
+  resolveClasses(key: any, type: any): any
+  /**
+   * Set a new status for the @arg name
+   * @param {String} name
+   * @param {Object} status
+   */
+  setIconStatus(name: string, status: any): void
+  /**
+   * Remove an icon from the map
+   * @param {ModuleProfile} profile The profile of the module
+   */
+  removeIcon({ kind, name }: any): void
+  /**
+   *  Remove active for the current activated icons
+   */
+  removeActive(): void
+  /**
+   *  Add active for the new activated icon
+   * @param {string} name Name of profile of the module to activate
+   */
+  addActive(name: string): void
+  /**
+   * Set an icon as active
+   * @param {string} name Name of profile of the module to activate
+   */
+  select(name: string): void
+  /**
+   * Toggles the side panel for plugin
+   * @param {string} name Name of profile of the module to activate
+   */
+  toggle(name: string): void
+  updateActivations(name: any): void
+  onThemeChanged(themeType: any): void
+  itemContextMenu(e: any, name: any, documentation: any): Promise<void>
+  render(): any
+  view: any
+}
+import EventEmitter = require('events')
diff --git a/package-lock.json b/package-lock.json
index f5a3d35cf2..e8fdec24f5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1517,6 +1517,14 @@
       "requires": {
         "core-js": "^2.6.5",
         "regenerator-runtime": "^0.13.4"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+          "dev": true
+        }
       }
     },
     "@babel/preset-env": {
@@ -12685,6 +12693,12 @@
         "regenerator-runtime": "^0.11.0"
       },
       "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+          "dev": true
+        },
         "regenerator-runtime": {
           "version": "0.11.1",
           "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
@@ -15409,10 +15423,9 @@
       }
     },
     "core-js": {
-      "version": "2.6.12",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
-      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
-      "dev": true
+      "version": "3.18.2",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.18.2.tgz",
+      "integrity": "sha512-zNhPOUoSgoizoSQFdX1MeZO16ORRb9FFQLts8gSYbZU5FcgXhp24iMWMxnOQo5uIaIG7/6FA/IqJPwev1o9ZXQ=="
     },
     "core-js-compat": {
       "version": "3.19.1",
@@ -38943,9 +38956,9 @@
       }
     },
     "regenerator-runtime": {
-      "version": "0.13.9",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+      "version": "0.13.7",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
     },
     "regenerator-transform": {
       "version": "0.14.5",
@@ -41476,6 +41489,36 @@
         "internal-slot": "^1.0.3",
         "regexp.prototype.flags": "^1.3.1",
         "side-channel": "^1.0.4"
+      },
+      "dependencies": {
+        "es-abstract": {
+          "version": "1.19.1",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.1.tgz",
+          "integrity": "sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.2",
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "get-intrinsic": "^1.1.1",
+            "get-symbol-description": "^1.0.0",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.2",
+            "internal-slot": "^1.0.3",
+            "is-callable": "^1.2.4",
+            "is-negative-zero": "^2.0.1",
+            "is-regex": "^1.1.4",
+            "is-shared-array-buffer": "^1.0.1",
+            "is-string": "^1.0.7",
+            "is-weakref": "^1.0.1",
+            "object-inspect": "^1.11.0",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.2",
+            "string.prototype.trimend": "^1.0.4",
+            "string.prototype.trimstart": "^1.0.4",
+            "unbox-primitive": "^1.0.1"
+          }
+        }
       }
     },
     "string.prototype.padend": {

From 89a05d7e0dec0aa90f98816f9315ae8a15f893d0 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 11 Oct 2021 13:53:21 +0100
Subject: [PATCH 03/84] remove commented out code

---
 .../src/lib/remix-ui-vertical-icons-panel.tsx  | 18 +-----------------
 1 file changed, 1 insertion(+), 17 deletions(-)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index fc62cdd5c6..bb7bc3f744 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -24,10 +24,6 @@ export function RemixUiVerticalIconsPanel ({
 }: RemixUiVerticalIconsPanelProps) {
   const scrollableRef = useRef<any>()
   const iconPanelRef = useRef<any>()
-  // @ts-ignore
-  // scrollHeight = scrollableRef.current!.scrollHeight
-  // // @ts-ignore
-  // clientHeight = scrollableRef.current!.clientHeight
 
   function onThemeChanged (themeType: any) {
     const invert = themeType === 'dark' ? 1 : 0
@@ -77,10 +73,6 @@ export function RemixUiVerticalIconsPanel ({
     verticalIconsPlugin.renderComponent()
   }
 
-  useEffect(() => {
-    console.log('usefRef for scrolling', scrollableRef)
-  })
-
   useEffect(() => {
     const themeModule = verticalIconsPlugin.registry.get('themeModule').api
     themeModule.events.on('themeChanged', (theme: any) => {
@@ -88,14 +80,6 @@ export function RemixUiVerticalIconsPanel ({
     })
   }, [])
 
-  useEffect(() => {
-    // @ts-ignore
-    scrollHeight = scrollableRef.current.scrollHeight
-    // @ts-ignore
-    clientHeight = scrollableRef.current.clientHeight
-    console.log('scrollHeight ', scrollHeight)
-  }, [])
-
   useEffect(() => {
     const themeModule = verticalIconsPlugin.registry.get('themeModule').api
     themeModule.events.on('themeChanged', (theme: any) => {
@@ -329,7 +313,7 @@ export function RemixUiVerticalIconsPanel ({
               ))}
           </OtherIcons>
         </div>
-        {scrollableRef.current && scrollableRef.current!.scrollHeight > clientHeight
+        {scrollableRef.current && scrollableRef.current!.scrollHeight > scrollableRef.current!.clientHeight
           ? <i className="fa fa-chevron-double-down remixui_icon-chevron m-3"></i>
           : null
         }

From 569db2fddc5acf327afa63ed36be504f2068d041 Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Mon, 11 Oct 2021 15:43:23 +0200
Subject: [PATCH 04/84] add deps nx.json

---
 nx.json | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/nx.json b/nx.json
index aa46ad3fc7..fd90c35f84 100644
--- a/nx.json
+++ b/nx.json
@@ -139,5 +139,13 @@
     "remix-ui-tabs": {
       "tags": []
     }
+  },
+  "targetDependencies": {
+    "build": [
+      {
+        "target": "build",
+        "projects": "dependencies"
+      }
+    ]
   }
 }

From e028786d351993e07e7ff6c84d9b1f57008bae78 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 11 Oct 2021 16:12:31 +0100
Subject: [PATCH 05/84] fix gist.spec.ts e2e test

---
 apps/remix-ide-e2e/src/tests/gist.test.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/remix-ide-e2e/src/tests/gist.test.ts b/apps/remix-ide-e2e/src/tests/gist.test.ts
index 1ca086b5f2..e91045f002 100644
--- a/apps/remix-ide-e2e/src/tests/gist.test.ts
+++ b/apps/remix-ide-e2e/src/tests/gist.test.ts
@@ -72,7 +72,11 @@ module.exports = {
     browser.clickLaunchIcon('home')
       .waitForElementVisible('*[data-id="remixIdeIconPanel"]', 10000)
       .clickLaunchIcon('filePanel')
-      .scrollAndClick('*[data-id="landingPageImportFromGistButton"]')
+      // .scrollAndClick('*[data-id="landingPageImportFromGistButton"]')
+      .click('div[title="home"]')
+      .waitForElementVisible('button[data-id="landingPageImportFromGistButton"]')
+      .pause(1000)
+      .scrollAndClick('button[data-id="landingPageImportFromGistButton"]')
       .waitForElementVisible('*[data-id="modalDialogModalTitle"]')
       .assert.containsText('*[data-id="modalDialogModalTitle"]', 'Load a Gist')
       .waitForElementVisible('*[data-id="modalDialogModalBody"]')

From 010ce173c464a71209456795481872d172ca794e Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 12 Oct 2021 12:25:03 +0100
Subject: [PATCH 06/84] address review comments from AniketEngg

---
 apps/remix-ide-e2e/src/tests/gist.test.ts                   | 1 -
 apps/remix-ide/src/app/components/vertical-icons.js         | 6 ++----
 libs/remix-ui/vertical-icons-panel/README.md                | 2 +-
 .../vertical-icons-panel/src/lib/components/Icon.tsx        | 1 -
 .../src/lib/vertical-icons-context-menu.tsx                 | 1 -
 .../vertical-icons-panel/types/vertical-icons-panel.d.ts    | 3 +--
 6 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/gist.test.ts b/apps/remix-ide-e2e/src/tests/gist.test.ts
index e91045f002..3216ff4b39 100644
--- a/apps/remix-ide-e2e/src/tests/gist.test.ts
+++ b/apps/remix-ide-e2e/src/tests/gist.test.ts
@@ -72,7 +72,6 @@ module.exports = {
     browser.clickLaunchIcon('home')
       .waitForElementVisible('*[data-id="remixIdeIconPanel"]', 10000)
       .clickLaunchIcon('filePanel')
-      // .scrollAndClick('*[data-id="landingPageImportFromGistButton"]')
       .click('div[title="home"]')
       .waitForElementVisible('button[data-id="landingPageImportFromGistButton"]')
       .pause(1000)
diff --git a/apps/remix-ide/src/app/components/vertical-icons.js b/apps/remix-ide/src/app/components/vertical-icons.js
index 8ecd2a50ac..4541832b68 100644
--- a/apps/remix-ide/src/app/components/vertical-icons.js
+++ b/apps/remix-ide/src/app/components/vertical-icons.js
@@ -9,10 +9,8 @@ var yo = require('yo-yo')
 var csjs = require('csjs-inject')
 var helper = require('../../lib/helper')
 const globalRegistry = require('../../global/registry')
-// const contextMenu = require('../ui/contextMenu')
 const { Plugin } = require('@remixproject/engine')
 const EventEmitter = require('events')
-// let VERTICALMENU_HANDLE
 
 const profile = {
   name: 'menuicons',
@@ -123,7 +121,7 @@ export class VerticalIcons extends Plugin {
    * Remove an icon from the map
    * @param {ModuleProfile} profile The profile of the module
    */
-  removeIcon ({ kind, name }) {
+  removeIcon ({ name }) {
     if (this.targetProfileForChange[name]) delete this.targetProfileForChange[name]
     this.renderComponent()
   }
@@ -143,7 +141,7 @@ export class VerticalIcons extends Plugin {
    * @param {string} name Name of profile of the module to activate
    */
   toggle (name) {
-    // // TODO: Only keep `this.emit` (issue#2210)
+    // TODO: Only keep `this.emit` (issue#2210)
     this.emit('toggleContent', name)
     this.events.emit('toggleContent', name)
   }
diff --git a/libs/remix-ui/vertical-icons-panel/README.md b/libs/remix-ui/vertical-icons-panel/README.md
index 3d01813d07..cf9595a10e 100644
--- a/libs/remix-ui/vertical-icons-panel/README.md
+++ b/libs/remix-ui/vertical-icons-panel/README.md
@@ -1,6 +1,6 @@
 # remix-ui-vertical-icons-panel
 
-This library was generated with [Nx](https://nx.dev).
+React library for RemixIde vertical icons Panel
 
 ## Running unit tests
 
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
index 5369b60acc..df7cc71033 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
@@ -5,7 +5,6 @@ import VerticalIconsContextMenu from '../vertical-icons-context-menu'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React, { Fragment, SyntheticEvent, useRef, useState } from 'react'
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
-// import helper from 'apps/remix-ide/src/lib/helper'
 
   interface IconProps {
     verticalIconPlugin: VerticalIcons
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/vertical-icons-context-menu.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/vertical-icons-context-menu.tsx
index 4a3ddb075d..e6a9f080c8 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/vertical-icons-context-menu.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/vertical-icons-context-menu.tsx
@@ -6,7 +6,6 @@ import React, { Fragment, useEffect, useRef } from 'react'
 import { VerticalIcons } from '../../types/vertical-icons-panel'
 
 export interface VerticalIconsContextMenuProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  // actions: action[]
   pageX: number
   pageY: number
   profileName: string
diff --git a/libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel.d.ts b/libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel.d.ts
index ad9924677f..8a4e6107b5 100644
--- a/libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel.d.ts
+++ b/libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel.d.ts
@@ -43,7 +43,6 @@ interface targetProfileIcons {
   profile: PassedProfile
 }
 export class VerticalIcons extends Plugin<any, any> {
-  // constructor(appManager: RemixAppManager)
   events: EventEmitter
   appManager: RemixAppManager
   htmlElement: HTMLDivElement
@@ -83,7 +82,7 @@ export class VerticalIcons extends Plugin<any, any> {
    * Remove an icon from the map
    * @param {ModuleProfile} profile The profile of the module
    */
-  removeIcon({ kind, name }: any): void
+  removeIcon({ name }: any): void
   /**
    *  Remove active for the current activated icons
    */

From 79fcdce9b39e97742c7276d706182d0eeab8b6f8 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Wed, 13 Oct 2021 11:21:45 +0100
Subject: [PATCH 07/84] add review changes from rystew & LianaHus

---
 .../src/lib/components/Icon.tsx               |   2 +-
 .../src/lib/remix-ui-vertical-icons-panel.css |   2 +-
 .../src/lib/remix-ui-vertical-icons-panel.tsx | 170 ++++++++++--------
 .../src/lib/vertical-icons-context-menu.tsx   |  16 +-
 4 files changed, 107 insertions(+), 83 deletions(-)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
index df7cc71033..81f6078f93 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
@@ -68,7 +68,7 @@ function Icon ({
   return (
     <Fragment>
       <div
-        className="remixui_icon m-2"
+        className="remixui_icon m-2 pl-1"
         onLoad={() => {
           if (name === 'filePanel') {
             addActive(name)
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
index d8c7e37f15..096d546b1d 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
@@ -92,7 +92,7 @@
     overflow-x: 'hidden';
   }
   .remixui_default-icons-container {
-    border-bottom: 1px solid #3f4455;
+    border-bottom: 3px solid #3f4455;
   }
   .remixui_icon-chevron {
     z-index: 1000;
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index bb7bc3f744..e5a9d50244 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -18,6 +18,11 @@ export interface RemixUiVerticalIconsPanelProps {
 
 let scrollHeight: any
 let clientHeight: any
+const requiredModules = [
+  'manager', 'compilerArtefacts', 'compilerMetadata', 'contextualListener', 'editor', 'offsetToLineColumnConverter', 'network', 'theme',
+  'fileManager', 'contentImport', 'blockchain', 'web3Provider', 'scriptRunner', 'fetchAndCompile', 'mainPanel', 'hiddenPanel', 'sidePanel', 'menuicons',
+  'filePanel', 'terminal', 'settings', 'pluginManager', 'tabs', 'udapp', 'dGitProvider', 'solidity-logic']
+const nativePlugins = ['vyper', 'workshops', 'debugger', 'remixd', 'menuicons', 'solidity', 'hardhat-provider']
 
 export function RemixUiVerticalIconsPanel ({
   verticalIconsPlugin
@@ -88,11 +93,18 @@ export function RemixUiVerticalIconsPanel ({
   }, [])
 
   useEffect(() => {
-    const themeModule = verticalIconsPlugin.registry.get('themeModule').api
-    themeModule.events.on('themeChanged', (theme: any) => {
-      onThemeChanged(theme.quality)
-    })
-  }, [])
+    const found = iconPanelRef.current!.querySelector('#fileExplorerIcons')
+    const localRead = localStorage.getItem('hadTour_initial') as string
+    const hadInitialTour = JSON.parse(localRead)
+    console.log('initial tour value ', hadInitialTour)
+    if (!found) console.log('VerticalIcon is not loaded yet!', found)
+    // return () => {
+    //   if (!hadInitialTour) {
+    //     if (found) console.log('Its event emission time!', found)
+    //   }
+    //   console.log('Won\'t be doing an initial tour of remix now!')
+    // }
+  })
 
   return (
     <div id="iconsP" className="h-100">
@@ -271,10 +283,50 @@ export function RemixUiVerticalIconsPanel ({
                 </div>
               ))
             : null}
+          {Object.keys(verticalIconsPlugin.targetProfileForChange)
+            .filter(p => p === 'pluginManager')
+            .map(p => (
+              <Icon
+                kind={
+                  verticalIconsPlugin.targetProfileForChange[p].kind
+                }
+                displayName={
+                  verticalIconsPlugin.targetProfileForChange[p]
+                    .displayName
+                }
+                documentation={
+                  verticalIconsPlugin.targetProfileForChange[p]
+                    .documentation
+                }
+                icon={
+                  verticalIconsPlugin.targetProfileForChange[p].icon
+                }
+                name={
+                  verticalIconsPlugin.targetProfileForChange[p].name
+                }
+                tooltip={
+                  verticalIconsPlugin.targetProfileForChange[p].tooltip
+                }
+                verticalIconPlugin={verticalIconsPlugin}
+                contextMenuAction={itemContextAction}
+                addActive={addActive}
+                removeActive={removeActive}
+                key={
+                  verticalIconsPlugin.targetProfileForChange[p]
+                    .displayName
+                }
+              />
+            ))}
         </div>
+        {scrollableRef.current && scrollableRef.current!.scrollHeight > scrollableRef.current!.clientHeight
+          ? <i className="fa fa-chevron-up remixui_icon-chevron m-3"></i>
+          : null
+        }
         <div
           id="remixuiScrollable"
-          className="remixui_scrollable-container remixui_scrollbar remixui_hide-scroll"
+          className={scrollableRef.current && scrollableRef.current.clientHeight > 0
+            ? 'border-bottom remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'
+            : 'remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'}
           ref={scrollableRef}
         >
           <OtherIcons>
@@ -314,83 +366,47 @@ export function RemixUiVerticalIconsPanel ({
           </OtherIcons>
         </div>
         {scrollableRef.current && scrollableRef.current!.scrollHeight > scrollableRef.current!.clientHeight
-          ? <i className="fa fa-chevron-double-down remixui_icon-chevron m-3"></i>
+          ? <i className="fa fa-chevron-down remixui_icon-chevron m-3"></i>
           : null
         }
         {verticalIconsPlugin.targetProfileForChange &&
           Object.keys(verticalIconsPlugin.targetProfileForChange).length ? (
             <Fragment>
               <Settings>
-                <>
-                  {Object.keys(verticalIconsPlugin.targetProfileForChange)
-                    .filter(p => p === 'pluginManager')
-                    .map(p => (
-                      <Icon
-                        kind={
-                          verticalIconsPlugin.targetProfileForChange[p].kind
-                        }
-                        displayName={
-                          verticalIconsPlugin.targetProfileForChange[p]
-                            .displayName
-                        }
-                        documentation={
-                          verticalIconsPlugin.targetProfileForChange[p]
-                            .documentation
-                        }
-                        icon={
-                          verticalIconsPlugin.targetProfileForChange[p].icon
-                        }
-                        name={
-                          verticalIconsPlugin.targetProfileForChange[p].name
-                        }
-                        tooltip={
-                          verticalIconsPlugin.targetProfileForChange[p].tooltip
-                        }
-                        verticalIconPlugin={verticalIconsPlugin}
-                        contextMenuAction={itemContextAction}
-                        addActive={addActive}
-                        removeActive={removeActive}
-                        key={
-                          verticalIconsPlugin.targetProfileForChange[p]
-                            .displayName
-                        }
-                      />
-                    ))}
-                  {Object.keys(verticalIconsPlugin.targetProfileForChange)
-                    .filter(p => p === 'settings')
-                    .map(p => (
-                      <Icon
-                        kind={
-                          verticalIconsPlugin.targetProfileForChange[p].kind
-                        }
-                        displayName={
-                          verticalIconsPlugin.targetProfileForChange[p]
-                            .displayName
-                        }
-                        documentation={
-                          verticalIconsPlugin.targetProfileForChange[p]
-                            .documentation
-                        }
-                        icon={
-                          verticalIconsPlugin.targetProfileForChange[p].icon
-                        }
-                        name={
-                          verticalIconsPlugin.targetProfileForChange[p].name
-                        }
-                        tooltip={
-                          verticalIconsPlugin.targetProfileForChange[p].tooltip
-                        }
-                        verticalIconPlugin={verticalIconsPlugin}
-                        contextMenuAction={itemContextAction}
-                        addActive={addActive}
-                        removeActive={removeActive}
-                        key={
-                          verticalIconsPlugin.targetProfileForChange[p]
-                            .displayName
-                        }
-                      />
-                    ))}
-                </>
+                {Object.keys(verticalIconsPlugin.targetProfileForChange)
+                  .filter(p => p === 'settings')
+                  .map(p => (
+                    <Icon
+                      kind={
+                        verticalIconsPlugin.targetProfileForChange[p].kind
+                      }
+                      displayName={
+                        verticalIconsPlugin.targetProfileForChange[p]
+                          .displayName
+                      }
+                      documentation={
+                        verticalIconsPlugin.targetProfileForChange[p]
+                          .documentation
+                      }
+                      icon={
+                        verticalIconsPlugin.targetProfileForChange[p].icon
+                      }
+                      name={
+                        verticalIconsPlugin.targetProfileForChange[p].name
+                      }
+                      tooltip={
+                        verticalIconsPlugin.targetProfileForChange[p].tooltip
+                      }
+                      verticalIconPlugin={verticalIconsPlugin}
+                      contextMenuAction={itemContextAction}
+                      addActive={addActive}
+                      removeActive={removeActive}
+                      key={
+                        verticalIconsPlugin.targetProfileForChange[p]
+                          .displayName
+                      }
+                    />
+                  ))}
               </Settings>
             </Fragment>
           ) : null}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/vertical-icons-context-menu.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/vertical-icons-context-menu.tsx
index e6a9f080c8..a0de7fa9b6 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/vertical-icons-context-menu.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/vertical-icons-context-menu.tsx
@@ -34,6 +34,12 @@ interface MenuProps {
   hide: () => void
 }
 
+const requiredModules = [
+  'manager', 'compilerArtefacts', 'compilerMetadata', 'contextualListener', 'editor', 'offsetToLineColumnConverter', 'network', 'theme',
+  'fileManager', 'contentImport', 'blockchain', 'web3Provider', 'scriptRunner', 'fetchAndCompile', 'mainPanel', 'hiddenPanel', 'sidePanel', 'menuicons',
+  'filePanel', 'terminal', 'settings', 'pluginManager', 'tabs', 'udapp', 'dGitProvider', 'solidity-logic']
+const nativePlugins = ['vyper', 'workshops', 'debugger', 'remixd', 'menuicons', 'solidity', 'hardhat-provider']
+
 function VerticalIconsContextMenu (props: VerticalIconsContextMenuProps) {
   const menuRef = useRef(null)
   useEffect(() => {
@@ -81,8 +87,8 @@ function MenuForLinks ({
 }: MenuLinksProps) {
   return (
     <Fragment>
-      {listItems.CanDeactivate &&
-        <li
+      {listItems.CanDeactivate && !requiredModules.includes(profileName)
+        ? <li
           id="menuitemdeactivate"
           onClick={(evt) => {
             contextMenuAction(evt, profileName, listItems.Documentation)
@@ -90,8 +96,10 @@ function MenuForLinks ({
           }}
           className="remixui_liitem"
         >
-        Deactivate
-        </li>}
+          Deactivate
+        </li>
+        : null
+      }
       {(listItems.Documentation && listItems.Documentation.length > 0) &&
             <li
               id="menuitemdocumentation"

From 2bca2f9d1174e2746745c7c02bde951024f8801f Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 14 Oct 2021 23:05:25 +0100
Subject: [PATCH 08/84] changes based on LianaHus comments complete

---
 apps/remix-ide/src/walkthroughService.js      | 80 ++++++++++---------
 .../src/lib/components/Icon.tsx               |  2 +-
 .../src/lib/remix-ui-vertical-icons-panel.css | 10 +--
 .../src/lib/remix-ui-vertical-icons-panel.tsx | 42 ++++------
 4 files changed, 62 insertions(+), 72 deletions(-)

diff --git a/apps/remix-ide/src/walkthroughService.js b/apps/remix-ide/src/walkthroughService.js
index 2969d1190f..e02fe226cf 100644
--- a/apps/remix-ide/src/walkthroughService.js
+++ b/apps/remix-ide/src/walkthroughService.js
@@ -7,45 +7,47 @@ export class WalkthroughService {
 
   start (params) {
     if (!localStorage.getItem('hadTour_initial')) {
-      introJs().setOptions({
-        steps: [{
-          title: 'Welcome to Remix IDE',
-          intro: 'Click to launch the Home tab that contains links, tips, and shortcuts..',
-          element: document.querySelector('#verticalIconsHomeIcon'),
-          tooltipClass: 'bg-light text-dark',
-          position: 'right'
-        },
-        {
-          element: document.querySelector('#compileIcons'),
-          title: 'Solidity Compiler',
-          intro: 'Having selected a .sol file in the File Explorers (the icon above), compile it with the Solidity Compiler.',
-          tooltipClass: 'bg-light text-dark',
-          position: 'right'
-        },
-        {
-          title: 'Deploy your contract',
-          element: document.querySelector('#runIcons'),
-          intro: 'Choose a chain, deploy a contract and play with your functions.',
-          tooltipClass: 'bg-light text-dark',
-          position: 'right'
-        }
-        ]
-      }).onafterchange((targetElement) => {
-        const header = document.getElementsByClassName('introjs-tooltip-header')[0]
-        if (header) {
-          header.classList.add('d-flex')
-          header.classList.add('justify-content-between')
-          header.classList.add('text-nowrap')
-          header.classList.add('pr-0')
-        }
-        const skipbutton = document.getElementsByClassName('introjs-skipbutton')[0]
-        if (skipbutton) {
-          skipbutton.classList.add('ml-3')
-          skipbutton.classList.add('text-decoration-none')
-          skipbutton.id = 'remixTourSkipbtn'
-        }
-      }).start()
-      localStorage.setItem('hadTour_initial', true)
+      document.addEventListener('doWalkThrough', (e) => {
+        introJs().setOptions({
+          steps: [{
+            title: 'Welcome to Remix IDE',
+            intro: 'Click to launch the Home tab that contains links, tips, and shortcuts..',
+            element: document.querySelector('#verticalIconsHomeIcon'),
+            tooltipClass: 'bg-light text-dark',
+            position: 'right'
+          },
+          {
+            element: document.querySelector('#compileIcons'),
+            title: 'Solidity Compiler',
+            intro: 'Having selected a .sol file in the File Explorers (the icon above), compile it with the Solidity Compiler.',
+            tooltipClass: 'bg-light text-dark',
+            position: 'right'
+          },
+          {
+            title: 'Deploy your contract',
+            element: document.querySelector('#verticalIconsKindudapp'),
+            intro: 'Choose a chain, deploy a contract and play with your functions.',
+            tooltipClass: 'bg-light text-dark',
+            position: 'right'
+          }
+          ]
+        }).onafterchange((targetElement) => {
+          const header = document.getElementsByClassName('introjs-tooltip-header')[0]
+          if (header) {
+            header.classList.add('d-flex')
+            header.classList.add('justify-content-between')
+            header.classList.add('text-nowrap')
+            header.classList.add('pr-0')
+          }
+          const skipbutton = document.getElementsByClassName('introjs-skipbutton')[0]
+          if (skipbutton) {
+            skipbutton.classList.add('ml-3')
+            skipbutton.classList.add('text-decoration-none')
+            skipbutton.id = 'remixTourSkipbtn'
+          }
+        }).start()
+        localStorage.setItem('hadTour_initial', true)
+      })
     }
   }
 
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
index 81f6078f93..bff6329241 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
@@ -68,7 +68,7 @@ function Icon ({
   return (
     <Fragment>
       <div
-        className="remixui_icon m-2 pl-1"
+        className={name === 'pluginManager' ? 'remixui_icon ml-2 mt-2 mr-2 mb-0 pl-1' : 'remixui_icon m-2 pl-1'}
         onLoad={() => {
           if (name === 'filePanel') {
             addActive(name)
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
index 096d546b1d..3271f9813a 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
@@ -83,7 +83,8 @@
     -ms-overflow-style: none;
   }
   .remixui_scrollable-container {
-    max-height: 500px;
+    max-height: 520px;
+    border-bottom: 3px solid #3f4455;
   }
   .remixui_scrollbar::-webkit-scrollbar { /* Chrome, Safari and other Webkit browsers*/
     display: none;
@@ -97,12 +98,7 @@
   .remixui_icon-chevron {
     z-index: 1000;
   }
-  .remixui_icon-chevron {
-    z-index: 1000;
-  }
-  .remixui_icon-chevron {
-    z-index: 1000;
-  }
+
   #menuitems {
     list-style: none;
     margin: 0px;
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index e5a9d50244..1ca097ed94 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -3,6 +3,7 @@
 import React, {
   Fragment,
   useEffect,
+  useReducer,
   useRef
 } from 'react'
 
@@ -17,18 +18,13 @@ export interface RemixUiVerticalIconsPanelProps {
 }
 
 let scrollHeight: any
-let clientHeight: any
-const requiredModules = [
-  'manager', 'compilerArtefacts', 'compilerMetadata', 'contextualListener', 'editor', 'offsetToLineColumnConverter', 'network', 'theme',
-  'fileManager', 'contentImport', 'blockchain', 'web3Provider', 'scriptRunner', 'fetchAndCompile', 'mainPanel', 'hiddenPanel', 'sidePanel', 'menuicons',
-  'filePanel', 'terminal', 'settings', 'pluginManager', 'tabs', 'udapp', 'dGitProvider', 'solidity-logic']
-const nativePlugins = ['vyper', 'workshops', 'debugger', 'remixd', 'menuicons', 'solidity', 'hardhat-provider']
 
 export function RemixUiVerticalIconsPanel ({
   verticalIconsPlugin
 }: RemixUiVerticalIconsPanelProps) {
   const scrollableRef = useRef<any>()
   const iconPanelRef = useRef<any>()
+  const udappPanelRef = useRef<any>()
 
   function onThemeChanged (themeType: any) {
     const invert = themeType === 'dark' ? 1 : 0
@@ -93,17 +89,12 @@ export function RemixUiVerticalIconsPanel ({
   }, [])
 
   useEffect(() => {
-    const found = iconPanelRef.current!.querySelector('#fileExplorerIcons')
-    const localRead = localStorage.getItem('hadTour_initial') as string
-    const hadInitialTour = JSON.parse(localRead)
-    console.log('initial tour value ', hadInitialTour)
-    if (!found) console.log('VerticalIcon is not loaded yet!', found)
-    // return () => {
-    //   if (!hadInitialTour) {
-    //     if (found) console.log('Its event emission time!', found)
-    //   }
-    //   console.log('Won\'t be doing an initial tour of remix now!')
-    // }
+    const found = iconPanelRef.current!.querySelector('#verticalIconsKindudapp')
+    if (found) {
+      console.log('emit event now as vertical panel is in the viewport', found)
+      const doWalkThroughEvent = new Event('doWalkThrough')
+      document.dispatchEvent(doWalkThroughEvent)
+    }
   })
 
   return (
@@ -185,9 +176,10 @@ export function RemixUiVerticalIconsPanel ({
               .filter(p => p !== 'pluginManager')
               .filter(p => p === 'udapp')
               .map(p => (
-                <div id="compileIcons" key={
+                <div id="runIcons" data-id="verticalIconsKindUdapp" key={
                   verticalIconsPlugin.targetProfileForChange[p].displayName
-                }>
+                } ref={udappPanelRef}
+                >
                   <Icon
                     kind={verticalIconsPlugin.targetProfileForChange[p].kind}
                     displayName={
@@ -317,15 +309,15 @@ export function RemixUiVerticalIconsPanel ({
                 }
               />
             ))}
+          {scrollableRef.current && scrollableRef.current!.scrollHeight > scrollableRef.current!.clientHeight
+            ? <i className="fa fa-chevron-up remixui_icon-chevron mt-0 mb-0 ml-1 pl-3"></i>
+            : null
+          }
         </div>
-        {scrollableRef.current && scrollableRef.current!.scrollHeight > scrollableRef.current!.clientHeight
-          ? <i className="fa fa-chevron-up remixui_icon-chevron m-3"></i>
-          : null
-        }
         <div
           id="remixuiScrollable"
           className={scrollableRef.current && scrollableRef.current.clientHeight > 0
-            ? 'border-bottom remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'
+            ? 'border-bottom remixui_default-icons-container remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'
             : 'remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'}
           ref={scrollableRef}
         >
@@ -366,7 +358,7 @@ export function RemixUiVerticalIconsPanel ({
           </OtherIcons>
         </div>
         {scrollableRef.current && scrollableRef.current!.scrollHeight > scrollableRef.current!.clientHeight
-          ? <i className="fa fa-chevron-down remixui_icon-chevron m-3"></i>
+          ? <i className="fa fa-chevron-down remixui_icon-chevron mt-0 mb-0 ml-1 pl-3"></i>
           : null
         }
         {verticalIconsPlugin.targetProfileForChange &&

From a7f38cde881d1d07b8f753d6d23ffef2fc612e22 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Fri, 15 Oct 2021 15:38:52 +0100
Subject: [PATCH 09/84] fix e2e walkthrough test failures

---
 apps/remix-ide/src/walkthroughService.js             |  8 ++++----
 .../src/lib/remix-ui-vertical-icons-panel.tsx        | 12 ++++++------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/remix-ide/src/walkthroughService.js b/apps/remix-ide/src/walkthroughService.js
index e02fe226cf..2e5e9a8305 100644
--- a/apps/remix-ide/src/walkthroughService.js
+++ b/apps/remix-ide/src/walkthroughService.js
@@ -6,8 +6,8 @@ export class WalkthroughService {
   }
 
   start (params) {
-    if (!localStorage.getItem('hadTour_initial')) {
-      document.addEventListener('doWalkThrough', (e) => {
+    document.addEventListener('doWalkThrough', (e) => {
+      if (!localStorage.getItem('hadTour_initial')) {
         introJs().setOptions({
           steps: [{
             title: 'Welcome to Remix IDE',
@@ -47,8 +47,8 @@ export class WalkthroughService {
           }
         }).start()
         localStorage.setItem('hadTour_initial', true)
-      })
-    }
+      }
+    })
   }
 
   startFeatureTour () {
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index 1ca097ed94..557b6cfd1f 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -4,7 +4,8 @@ import React, {
   Fragment,
   useEffect,
   useReducer,
-  useRef
+  useRef,
+  useState
 } from 'react'
 
 import './remix-ui-vertical-icons-panel.css'
@@ -24,7 +25,7 @@ export function RemixUiVerticalIconsPanel ({
 }: RemixUiVerticalIconsPanelProps) {
   const scrollableRef = useRef<any>()
   const iconPanelRef = useRef<any>()
-  const udappPanelRef = useRef<any>()
+  // const [first] = useState(localStorage.getItem('firstTime'))
 
   function onThemeChanged (themeType: any) {
     const invert = themeType === 'dark' ? 1 : 0
@@ -90,12 +91,11 @@ export function RemixUiVerticalIconsPanel ({
 
   useEffect(() => {
     const found = iconPanelRef.current!.querySelector('#verticalIconsKindudapp')
-    if (found) {
-      console.log('emit event now as vertical panel is in the viewport', found)
+    if (verticalIconsPlugin.targetProfileForChange && verticalIconsPlugin.targetProfileForChange.udapp) {
       const doWalkThroughEvent = new Event('doWalkThrough')
       document.dispatchEvent(doWalkThroughEvent)
     }
-  })
+  }, [Object.keys(verticalIconsPlugin.targetProfileForChange).length])
 
   return (
     <div id="iconsP" className="h-100">
@@ -178,7 +178,7 @@ export function RemixUiVerticalIconsPanel ({
               .map(p => (
                 <div id="runIcons" data-id="verticalIconsKindUdapp" key={
                   verticalIconsPlugin.targetProfileForChange[p].displayName
-                } ref={udappPanelRef}
+                }
                 >
                   <Icon
                     kind={verticalIconsPlugin.targetProfileForChange[p].kind}

From 9dfb20757fd39693903393f9fc95f930b70c0b31 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Fri, 15 Oct 2021 16:28:39 +0100
Subject: [PATCH 10/84] bring downward chevron even closer

---
 .../src/lib/remix-ui-vertical-icons-panel.css             | 2 +-
 .../src/lib/remix-ui-vertical-icons-panel.tsx             | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
index 3271f9813a..bb2c096e80 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
@@ -83,7 +83,7 @@
     -ms-overflow-style: none;
   }
   .remixui_scrollable-container {
-    max-height: 520px;
+    max-height: 570px;
     border-bottom: 3px solid #3f4455;
   }
   .remixui_scrollbar::-webkit-scrollbar { /* Chrome, Safari and other Webkit browsers*/
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index 557b6cfd1f..ee61ddf51e 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -357,14 +357,14 @@ export function RemixUiVerticalIconsPanel ({
               ))}
           </OtherIcons>
         </div>
-        {scrollableRef.current && scrollableRef.current!.scrollHeight > scrollableRef.current!.clientHeight
-          ? <i className="fa fa-chevron-down remixui_icon-chevron mt-0 mb-0 ml-1 pl-3"></i>
-          : null
-        }
         {verticalIconsPlugin.targetProfileForChange &&
           Object.keys(verticalIconsPlugin.targetProfileForChange).length ? (
             <Fragment>
               <Settings>
+                {scrollableRef.current && scrollableRef.current!.scrollHeight > scrollableRef.current!.clientHeight
+                  ? <i className="fa fa-chevron-down remixui_icon-chevron mt-0 mb-0 ml-1 pl-3"></i>
+                  : null
+                }
                 {Object.keys(verticalIconsPlugin.targetProfileForChange)
                   .filter(p => p === 'settings')
                   .map(p => (

From 87f4e06fbaae5cbfb3ddecdbca2bcf6eee416d11 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Sat, 16 Oct 2021 07:20:23 +0100
Subject: [PATCH 11/84] fix bug in icon removal in deactivation. Fix bottom
 border display regression

---
 apps/remix-ide/src/app/components/vertical-icons.js         | 4 +++-
 .../src/lib/remix-ui-vertical-icons-panel.css               | 6 +++++-
 .../src/lib/remix-ui-vertical-icons-panel.tsx               | 4 ++--
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/apps/remix-ide/src/app/components/vertical-icons.js b/apps/remix-ide/src/app/components/vertical-icons.js
index 4541832b68..0b2c451752 100644
--- a/apps/remix-ide/src/app/components/vertical-icons.js
+++ b/apps/remix-ide/src/app/components/vertical-icons.js
@@ -123,7 +123,9 @@ export class VerticalIcons extends Plugin {
    */
   removeIcon ({ name }) {
     if (this.targetProfileForChange[name]) delete this.targetProfileForChange[name]
-    this.renderComponent()
+    setTimeout(() => {
+      this.renderComponent()
+    }, 150)
   }
 
   /**
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
index bb2c096e80..d2c2856318 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
@@ -84,7 +84,7 @@
   }
   .remixui_scrollable-container {
     max-height: 570px;
-    border-bottom: 3px solid #3f4455;
+    /* border-bottom: 3px solid #3f4455; */
   }
   .remixui_scrollbar::-webkit-scrollbar { /* Chrome, Safari and other Webkit browsers*/
     display: none;
@@ -99,6 +99,10 @@
     z-index: 1000;
   }
 
+  .remixui_settings {
+    min-height: 30px;
+  }
+
   #menuitems {
     list-style: none;
     margin: 0px;
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index ee61ddf51e..407168cc2d 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -316,8 +316,8 @@ export function RemixUiVerticalIconsPanel ({
         </div>
         <div
           id="remixuiScrollable"
-          className={scrollableRef.current && scrollableRef.current.clientHeight > 0
-            ? 'border-bottom remixui_default-icons-container remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'
+          className={scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight
+            ? 'remixui_default-icons-container remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'
             : 'remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'}
           ref={scrollableRef}
         >

From 6373c080e8d5f47602a15ab3394384ef27cb0bb7 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Sat, 16 Oct 2021 20:18:35 +0100
Subject: [PATCH 12/84] refactor chevron to its own component to address buggy
 behaviour

---
 .../src/lib/components/Chevron.tsx            | 18 ++++++++++++++++
 .../src/lib/remix-ui-vertical-icons-panel.css |  9 ++++++--
 .../src/lib/remix-ui-vertical-icons-panel.tsx | 21 ++++++++++---------
 3 files changed, 36 insertions(+), 12 deletions(-)
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/components/Chevron.tsx

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Chevron.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Chevron.tsx
new file mode 100644
index 0000000000..c3c5c472ba
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Chevron.tsx
@@ -0,0 +1,18 @@
+/* eslint-disable no-use-before-define */
+import React, { MutableRefObject } from 'react'
+
+export interface ChevronProps {
+    divElementRef: MutableRefObject<any>
+    cssRule: string
+}
+
+function Chevron (props: ChevronProps) {
+  return (
+    <>
+      { props.divElementRef.current && props.divElementRef.current.scrollHeight > props.divElementRef.current.clientHeight
+        ? <i className={props.cssRule}></i> : null }
+    </>
+  )
+}
+
+export { Chevron }
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
index d2c2856318..c4339942e1 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
@@ -83,7 +83,7 @@
     -ms-overflow-style: none;
   }
   .remixui_scrollable-container {
-    max-height: 570px;
+    height: 540px;
     /* border-bottom: 3px solid #3f4455; */
   }
   .remixui_scrollbar::-webkit-scrollbar { /* Chrome, Safari and other Webkit browsers*/
@@ -100,7 +100,12 @@
   }
 
   .remixui_settings {
-    min-height: 30px;
+    height: 30px;
+  }
+
+  .remixui_requiredSection {
+    min-height: 180px;
+    max-height: 330px;
   }
 
   #menuitems {
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index 407168cc2d..192e6eaee0 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -14,6 +14,7 @@ import { VerticalIcons } from '../../types/vertical-icons-panel'
 import Home from './components/Home'
 import Icon from './components/Icon'
 import Settings from './components/Settings'
+import { Chevron } from './components/Chevron'
 export interface RemixUiVerticalIconsPanelProps {
   verticalIconsPlugin: VerticalIcons
 }
@@ -90,7 +91,7 @@ export function RemixUiVerticalIconsPanel ({
   }, [])
 
   useEffect(() => {
-    const found = iconPanelRef.current!.querySelector('#verticalIconsKindudapp')
+    // const found = iconPanelRef.current!.querySelector('#verticalIconsKindudapp')
     if (verticalIconsPlugin.targetProfileForChange && verticalIconsPlugin.targetProfileForChange.udapp) {
       const doWalkThroughEvent = new Event('doWalkThrough')
       document.dispatchEvent(doWalkThroughEvent)
@@ -100,7 +101,7 @@ export function RemixUiVerticalIconsPanel ({
   return (
     <div id="iconsP" className="h-100">
       <div className="remixui_icons" ref={iconPanelRef}>
-        <div className="remixui_default-icons-container">
+        <div className="remixui_default-icons-container remixui_requiredSection">
           <Home verticalIconPlugin={verticalIconsPlugin} />
           {verticalIconsPlugin.targetProfileForChange &&
           Object.keys(verticalIconsPlugin.targetProfileForChange).length
@@ -309,10 +310,10 @@ export function RemixUiVerticalIconsPanel ({
                 }
               />
             ))}
-          {scrollableRef.current && scrollableRef.current!.scrollHeight > scrollableRef.current!.clientHeight
-            ? <i className="fa fa-chevron-up remixui_icon-chevron mt-0 mb-0 ml-1 pl-3"></i>
-            : null
-          }
+          <Chevron
+            divElementRef={scrollableRef}
+            cssRule={'fa fa-chevron-up remixui_icon-chevron mt-0 mb-0 ml-1 pl-3'}
+          />
         </div>
         <div
           id="remixuiScrollable"
@@ -361,10 +362,10 @@ export function RemixUiVerticalIconsPanel ({
           Object.keys(verticalIconsPlugin.targetProfileForChange).length ? (
             <Fragment>
               <Settings>
-                {scrollableRef.current && scrollableRef.current!.scrollHeight > scrollableRef.current!.clientHeight
-                  ? <i className="fa fa-chevron-down remixui_icon-chevron mt-0 mb-0 ml-1 pl-3"></i>
-                  : null
-                }
+                <Chevron
+                  divElementRef={scrollableRef}
+                  cssRule={'fa fa-chevron-down remixui_icon-chevron mt-0 mb-0 ml-1 pl-3'}
+                />
                 {Object.keys(verticalIconsPlugin.targetProfileForChange)
                   .filter(p => p === 'settings')
                   .map(p => (

From e5d0c37230e6d2f6b4f9d9ad3b1fdce1c5aa5415 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 26 Oct 2021 02:02:29 +0100
Subject: [PATCH 13/84] address review comments from @ioedeveloper

---
 .eslintrc.json                                |  35 --
 .../src/app/components/vertical-icons.js      |  96 ++----
 .../src/lib/components/Debugger.tsx           |  52 +++
 .../src/lib/components/FilePanel.tsx          |  49 +++
 .../src/lib/components/Icon.tsx               |   5 +-
 .../src/lib/components/OtherIcons.tsx         |  44 ++-
 .../src/lib/components/PluginManager.tsx      |  55 +++
 .../src/lib/components/RequiredSection.tsx    |  66 ++++
 .../src/lib/components/Settings.tsx           |  54 ++-
 .../src/lib/components/Solidity.tsx           |  52 +++
 .../lib/components/SolidityStaticAnalysis.tsx |  52 +++
 .../src/lib/components/Udapp.tsx              |  53 +++
 .../src/lib/remix-ui-vertical-icons-panel.tsx | 314 ++----------------
 .../types/vertical-icons-panel.d.ts           |   5 +-
 14 files changed, 525 insertions(+), 407 deletions(-)
 delete mode 100644 .eslintrc.json
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/components/FilePanel.tsx
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/components/PluginManager.tsx
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/components/Solidity.tsx
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/components/SolidityStaticAnalysis.tsx
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/components/Udapp.tsx

diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100644
index 06cc47d9a2..0000000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
-  "root": true,
-  "ignorePatterns": ["**/*"],
-  "plugins": ["@nrwl/nx"],
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {
-        "@nrwl/nx/enforce-module-boundaries": [
-          "error",
-          {
-            "enforceBuildableLibDependency": true,
-            "allow": [],
-            "depConstraints": [
-              {
-                "sourceTag": "*",
-                "onlyDependOnLibsWithTags": ["*"]
-              }
-            ]
-          }
-        ]
-      }
-    },
-    {
-      "files": ["*.ts", "*.tsx"],
-      "extends": ["plugin:@nrwl/nx/typescript"],
-      "rules": {}
-    },
-    {
-      "files": ["*.js", "*.jsx"],
-      "extends": ["plugin:@nrwl/nx/javascript"],
-      "rules": {}
-    }
-  ]
-}
diff --git a/apps/remix-ide/src/app/components/vertical-icons.js b/apps/remix-ide/src/app/components/vertical-icons.js
index 0b2c451752..6f92f3f729 100644
--- a/apps/remix-ide/src/app/components/vertical-icons.js
+++ b/apps/remix-ide/src/app/components/vertical-icons.js
@@ -5,8 +5,6 @@ import ReactDOM from 'react-dom'
 import React from 'react' // eslint-disable-line
 // eslint-disable-next-line no-unused-vars
 import { RemixUiVerticalIconsPanel } from '@remix-ui/vertical-icons-panel'
-var yo = require('yo-yo')
-var csjs = require('csjs-inject')
 var helper = require('../../lib/helper')
 const globalRegistry = require('../../global/registry')
 const { Plugin } = require('@remixproject/engine')
@@ -79,6 +77,33 @@ export class VerticalIcons extends Plugin {
     this.on(profile.name, 'statusChanged', this.iconStatus[profile.name])
   }
 
+  /**
+   * resolve a classes list for @arg key
+   * @param {Object} key
+   * @param {Object} type
+   */
+  resolveClasses (key, type) {
+    let classes = 'remixui_status'
+    switch (key) {
+      case 'succeed':
+        classes += ' fas fa-check-circle text-' + type + ' ' + 'remixui_statusCheck'
+        break
+      case 'edited':
+        classes += ' fas fa-sync text-' + type + ' ' + 'remixui_statusCheck'
+        break
+      case 'loading':
+        classes += ' fas fa-spinner text-' + type + ' ' + 'remixui_statusCheck'
+        break
+      case 'failed':
+        classes += ' fas fa-exclamation-triangle text-' + type + ' ' + 'remixui_statusCheck'
+        break
+      default: {
+        classes += ' badge badge-pill badge-' + type
+      }
+    }
+    return classes
+  }
+
   /**
    * Set a new status for the @arg name
    * @param {String} name
@@ -106,7 +131,7 @@ export class VerticalIcons extends Plugin {
     } else type = helper.checkSpecialChars(status.type) ? '' : status.type
     const title = helper.checkSpecialChars(status.title) ? '' : status.title
 
-    el.appendChild(yo`<i
+    el.appendChild(`<i
     title="${title}"
       class="${this.resolveClasses(key, type)}"
       aria-hidden="true"
@@ -114,7 +139,7 @@ export class VerticalIcons extends Plugin {
     ${text}
     </i>`)
 
-    el.classList.add(`${css.icon}`)
+    el.classList.add('remixui_icon')
   }
 
   /**
@@ -152,66 +177,3 @@ export class VerticalIcons extends Plugin {
     return this.htmlElement
   }
 }
-
-const css = csjs`
-  .homeIcon {
-      display: block;
-      width: 42px;
-      height: 42px;
-      margin-bottom: 20px;
-      cursor: pointer;
-  }
-  .homeIcon svg path {
-    fill: var(--primary);
-  }
-  .homeIcon svg polygon {
-    fill: var(--primary);
-  }
-  .icons {
-  }
-  .icon {
-    cursor: pointer;
-    margin-bottom: 12px;
-    width: 36px;
-    height: 36px;
-    padding: 3px;
-    position: relative;
-    border-radius: 8px;
-  }
-  .icon img {
-    width: 28px;
-    height: 28px;
-    padding: 4px;
-    filter: invert(0.5);
-  }
-  .image {
-  }
-  .icon svg {
-    width: 28px;
-    height: 28px;
-    padding: 4px;
-  }
-  .icon[title='Settings'] {
-    position: absolute;
-    bottom: 0;
-  }
-  .status {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-  }
-  .statusCheck {
-    font-size: 1.2em;
-  }
-  .statusWithBG
-    border-radius: 8px;
-    background-color: var(--danger);
-    color: var(--light);
-    font-size: 12px;
-    height: 15px;
-    text-align: center;
-    font-weight: bold;
-    padding-left: 5px;
-    padding-right: 5px;
-  }
-`
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx
new file mode 100644
index 0000000000..a5a265b4b7
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx
@@ -0,0 +1,52 @@
+import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
+import { Fragment } from 'react'
+import Icon from './Icon'
+
+interface DebuggerProps {
+  verticalIconsPlugin: VerticalIcons
+  itemContextAction: (e: any, name: string, documentation: string) => Promise<void>
+  addActive: (name: string) => void
+  removeActive: () => void
+}
+
+function Debugger ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: DebuggerProps) {
+  return (
+    <Fragment>
+      {verticalIconsPlugin.targetProfileForChange &&
+      Object.keys(verticalIconsPlugin.targetProfileForChange).length
+        ? Object.keys(verticalIconsPlugin.targetProfileForChange)
+          .filter(p => p === 'debugger')
+          .map(p => (
+            <div id="debuggingIcons" data-id="verticalIconsDebuggingIcons" key={
+              verticalIconsPlugin.targetProfileForChange[p].displayName
+            }>
+              <Icon
+                kind={verticalIconsPlugin.targetProfileForChange[p].kind}
+                displayName={
+                  verticalIconsPlugin.targetProfileForChange[p].displayName
+                }
+                documentation={
+                  verticalIconsPlugin.targetProfileForChange[p]
+                    .documentation
+                }
+                icon={verticalIconsPlugin.targetProfileForChange[p].icon}
+                name={verticalIconsPlugin.targetProfileForChange[p].name}
+                tooltip={
+                  verticalIconsPlugin.targetProfileForChange[p].tooltip
+                }
+                verticalIconPlugin={verticalIconsPlugin}
+                contextMenuAction={itemContextAction}
+                addActive={addActive}
+                removeActive={removeActive}
+                key={
+                  verticalIconsPlugin.targetProfileForChange[p].displayName
+                }
+              />
+            </div>
+          ))
+        : null}
+    </Fragment>
+  )
+}
+
+export default Debugger
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/FilePanel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/FilePanel.tsx
new file mode 100644
index 0000000000..a90dfa9726
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/FilePanel.tsx
@@ -0,0 +1,49 @@
+import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
+import { Fragment } from 'react'
+import Icon from './Icon'
+
+interface FilePanelProps {
+  verticalIconsPlugin: VerticalIcons
+  itemContextAction: (e: any, name: string, documentation: string) => Promise<void>
+  addActive: (name: string) => void
+  removeActive: () => void
+}
+
+function FilePanel ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: FilePanelProps) {
+  return (
+    <Fragment>
+      {verticalIconsPlugin.targetProfileForChange &&
+      Object.keys(verticalIconsPlugin.targetProfileForChange).length
+        ? Object.keys(verticalIconsPlugin.targetProfileForChange)
+          .filter(p => p === 'filePanel')
+          .map(p => (
+            <div id="fileExplorerIcons" key={
+              verticalIconsPlugin.targetProfileForChange[p].displayName
+            } data-id="verticalIconsFileExplorerIcons">
+              <Icon
+                kind={verticalIconsPlugin.targetProfileForChange[p].kind}
+                displayName={
+                  verticalIconsPlugin.targetProfileForChange[p].displayName
+                }
+                documentation={
+                  verticalIconsPlugin.targetProfileForChange[p]
+                    .documentation
+                }
+                icon={verticalIconsPlugin.targetProfileForChange[p].icon}
+                name={verticalIconsPlugin.targetProfileForChange[p].name}
+                tooltip={
+                  verticalIconsPlugin.targetProfileForChange[p].tooltip
+                }
+                verticalIconPlugin={verticalIconsPlugin}
+                contextMenuAction={itemContextAction}
+                addActive={addActive}
+                removeActive={removeActive}
+              />
+            </div>
+          ))
+        : null}
+    </Fragment>
+  )
+}
+
+export default FilePanel
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
index bff6329241..5bc02b636f 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
@@ -3,8 +3,9 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import VerticalIconsContextMenu from '../vertical-icons-context-menu'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import React, { Fragment, SyntheticEvent, useRef, useState } from 'react'
+import React, { Fragment, SyntheticEvent, useEffect, useRef, useState } from 'react'
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
+// import * as helper from '../../../../../../apps/remix-ide/src/lib/helper'
 
   interface IconProps {
     verticalIconPlugin: VerticalIcons
@@ -46,7 +47,7 @@ function Icon ({
   const [pageY, setPageY] = useState<number>(null)
   const [showContext, setShowContext] = useState(false)
   const [canDeactivate] = useState(false)
-  const iconRef = useRef(null)
+  const iconRef = useRef<any>(null)
 
   const handleContextMenu = (e: SyntheticEvent & PointerEvent) => {
     const deactivationState = verticalIconPlugin.appManager
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx
index 50483a330a..0378f95a94 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx
@@ -1,14 +1,52 @@
 /* eslint-disable no-use-before-define */
 /* eslint-disable @typescript-eslint/no-unused-vars */
+import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
 import React, { ReactNode } from 'react'
+import Icon from './Icon'
 
 interface OtherIconsProps {
-  children: ReactNode
+  verticalIconsPlugin: VerticalIcons
+  itemContextAction: (e: any, name: string, documentation: string) => Promise<void>
+  addActive: (name: string) => void
+  removeActive: () => void
 }
 
-function OtherIcons ({ children }: OtherIconsProps) {
+const profileNames = ['settings', 'pluginManager', 'filePanel', 'debugger', 'compiler', 'solidity', 'udapp', 'testing', 'solidityStaticAnalysis']
+function OtherIcons ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: OtherIconsProps) {
   return (
-    <div id="otherIcons">{ children }</div>
+    <div id="otherIcons">
+      {
+        Object.keys(verticalIconsPlugin.targetProfileForChange)
+          .filter(function (searchTerm: string) {
+            for (var key in profileNames) {
+              if (searchTerm !== key) return true
+            }
+            return false
+          })
+          .map(p => (
+            <Icon
+              kind={verticalIconsPlugin.targetProfileForChange[p].kind}
+              displayName={
+                verticalIconsPlugin.targetProfileForChange[p].displayName
+              }
+              documentation={
+                verticalIconsPlugin.targetProfileForChange[p].documentation
+              }
+              icon={verticalIconsPlugin.targetProfileForChange[p].icon}
+              name={verticalIconsPlugin.targetProfileForChange[p].name}
+              tooltip={
+                verticalIconsPlugin.targetProfileForChange[p].tooltip
+              }
+              verticalIconPlugin={verticalIconsPlugin}
+              contextMenuAction={itemContextAction}
+              addActive={addActive}
+              removeActive={removeActive}
+              key={
+                verticalIconsPlugin.targetProfileForChange[p].displayName
+              }
+            />
+          ))}
+    </div>
   )
 }
 
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/PluginManager.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/PluginManager.tsx
new file mode 100644
index 0000000000..2fa449c4cc
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/PluginManager.tsx
@@ -0,0 +1,55 @@
+/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
+import React, { Fragment } from 'react'
+import Icon from './Icon'
+
+interface PluginManagerProps {
+  verticalIconsPlugin: VerticalIcons
+  itemContextAction: (e: any, name: string, documentation: string) => Promise<void>
+  addActive: (name: string) => void
+  removeActive: () => void
+}
+
+function PluginManager ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: PluginManagerProps) {
+  return (
+    <Fragment>
+      {Object.keys(verticalIconsPlugin.targetProfileForChange)
+        .filter(p => p === 'pluginManager')
+        .map(p => (
+          <Icon
+            kind={
+              verticalIconsPlugin.targetProfileForChange[p].kind
+            }
+            displayName={
+              verticalIconsPlugin.targetProfileForChange[p]
+                .displayName
+            }
+            documentation={
+              verticalIconsPlugin.targetProfileForChange[p]
+                .documentation
+            }
+            icon={
+              verticalIconsPlugin.targetProfileForChange[p].icon
+            }
+            name={
+              verticalIconsPlugin.targetProfileForChange[p].name
+            }
+            tooltip={
+              verticalIconsPlugin.targetProfileForChange[p].tooltip
+            }
+            verticalIconPlugin={verticalIconsPlugin}
+            contextMenuAction={itemContextAction}
+            addActive={addActive}
+            removeActive={removeActive}
+            key={
+              verticalIconsPlugin.targetProfileForChange[p]
+                .displayName
+            }
+          />
+        ))}
+    </Fragment>
+  )
+}
+
+export default PluginManager
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx
new file mode 100644
index 0000000000..4c7d34a571
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx
@@ -0,0 +1,66 @@
+import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
+import { Fragment, MutableRefObject } from 'react'
+import { Chevron } from './Chevron'
+import Debugger from './Debugger'
+import FilePanel from './FilePanel'
+import PluginManager from './PluginManager'
+import Solidity from './Solidity'
+import SolidityStaticAnalysis from './SolidityStaticAnalysis'
+import Udapp from './Udapp'
+
+interface RequiredSectionProps {
+  verticalIconsPlugin: VerticalIcons
+  itemContextAction: (e: any, name: string, documentation: string) => Promise<void>
+  addActive: (name: string) => void
+  removeActive: () => void
+  scrollableRef: MutableRefObject<any>
+}
+
+function RequiredSection ({ verticalIconsPlugin, itemContextAction, addActive, removeActive, scrollableRef }: RequiredSectionProps) {
+  return (
+    <Fragment>
+      <FilePanel
+        verticalIconsPlugin={verticalIconsPlugin}
+        addActive={addActive}
+        removeActive={removeActive}
+        itemContextAction={itemContextAction}
+      />
+      <Solidity
+        verticalIconsPlugin={verticalIconsPlugin}
+        addActive={addActive}
+        removeActive={removeActive}
+        itemContextAction={itemContextAction}
+      />
+      <Udapp
+        verticalIconsPlugin={verticalIconsPlugin}
+        addActive={addActive}
+        removeActive={removeActive}
+        itemContextAction={itemContextAction}
+      />
+      <SolidityStaticAnalysis
+        verticalIconsPlugin={verticalIconsPlugin}
+        addActive={addActive}
+        removeActive={removeActive}
+        itemContextAction={itemContextAction}
+      />
+      <Debugger
+        verticalIconsPlugin={verticalIconsPlugin}
+        addActive={addActive}
+        removeActive={removeActive}
+        itemContextAction={itemContextAction}
+      />
+      <PluginManager
+        verticalIconsPlugin={verticalIconsPlugin}
+        addActive={addActive}
+        removeActive={removeActive}
+        itemContextAction={itemContextAction}
+      />
+      <Chevron
+        divElementRef={scrollableRef}
+        cssRule={'fa fa-chevron-up remixui_icon-chevron mt-0 mb-0 ml-1 pl-3'}
+      />
+    </Fragment>
+  )
+}
+
+export { RequiredSection }
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
index c2543b01bc..1a4e706abc 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
@@ -1,14 +1,60 @@
 /* eslint-disable no-use-before-define */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import React, { ReactNode } from 'react'
+import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
+import React from 'react'
+import { Chevron } from './Chevron'
+import Icon from './Icon'
 
 interface SettingsProps {
-  children: ReactNode
+  verticalIconsPlugin: VerticalIcons
+  itemContextAction: (e: any, name: string, documentation: string) => Promise<void>
+  addActive: (name: string) => void
+  removeActive: () => void
+  scrollableRef: React.MutableRefObject<any>
 }
 
-function Settings ({ children }: SettingsProps) {
+function Settings ({ scrollableRef, verticalIconsPlugin, itemContextAction, addActive, removeActive }: SettingsProps) {
   return (
-    <div id="settingsIcons" data-id="vertialIconsSettingsIcons">{ children }</div>
+    <div id="settingsIcons" data-id="vertialIconsSettingsIcons">
+      <Chevron
+        divElementRef={scrollableRef}
+        cssRule={'fa fa-chevron-down remixui_icon-chevron mt-0 mb-0 ml-1 pl-3'}
+      />
+      {Object.keys(verticalIconsPlugin.targetProfileForChange)
+        .filter(p => p === 'settings')
+        .map(p => (
+          <Icon
+            kind={
+              verticalIconsPlugin.targetProfileForChange[p].kind
+            }
+            displayName={
+              verticalIconsPlugin.targetProfileForChange[p]
+                .displayName
+            }
+            documentation={
+              verticalIconsPlugin.targetProfileForChange[p]
+                .documentation
+            }
+            icon={
+              verticalIconsPlugin.targetProfileForChange[p].icon
+            }
+            name={
+              verticalIconsPlugin.targetProfileForChange[p].name
+            }
+            tooltip={
+              verticalIconsPlugin.targetProfileForChange[p].tooltip
+            }
+            verticalIconPlugin={verticalIconsPlugin}
+            contextMenuAction={itemContextAction}
+            addActive={addActive}
+            removeActive={removeActive}
+            key={
+              verticalIconsPlugin.targetProfileForChange[p]
+                .displayName
+            }
+          />
+        ))}
+    </div>
   )
 }
 
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Solidity.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Solidity.tsx
new file mode 100644
index 0000000000..6b17fc3c86
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Solidity.tsx
@@ -0,0 +1,52 @@
+import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
+import { Fragment } from 'react'
+import Icon from './Icon'
+
+interface SolidityProps {
+  verticalIconsPlugin: VerticalIcons
+  itemContextAction: (e: any, name: string, documentation: string) => Promise<void>
+  addActive: (name: string) => void
+  removeActive: () => void
+}
+
+function Solidity ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: SolidityProps) {
+  return (
+    <Fragment>
+      {verticalIconsPlugin.targetProfileForChange &&
+      Object.keys(verticalIconsPlugin.targetProfileForChange).length
+        ? Object.keys(verticalIconsPlugin.targetProfileForChange)
+          .filter(p => p === 'solidity')
+          .map(p => (
+            <div id="compileIcons" key={
+              verticalIconsPlugin.targetProfileForChange[p].displayName
+            }>
+              <Icon
+                kind={verticalIconsPlugin.targetProfileForChange[p].kind}
+                displayName={
+                  verticalIconsPlugin.targetProfileForChange[p].displayName
+                }
+                documentation={
+                  verticalIconsPlugin.targetProfileForChange[p]
+                    .documentation
+                }
+                icon={verticalIconsPlugin.targetProfileForChange[p].icon}
+                name={verticalIconsPlugin.targetProfileForChange[p].name}
+                tooltip={
+                  verticalIconsPlugin.targetProfileForChange[p].tooltip
+                }
+                verticalIconPlugin={verticalIconsPlugin}
+                contextMenuAction={itemContextAction}
+                addActive={addActive}
+                removeActive={removeActive}
+                key={
+                  verticalIconsPlugin.targetProfileForChange[p].displayName
+                }
+              />
+            </div>
+          ))
+        : null}
+    </Fragment>
+  )
+}
+
+export default Solidity
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/SolidityStaticAnalysis.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/SolidityStaticAnalysis.tsx
new file mode 100644
index 0000000000..15b0ff0578
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/SolidityStaticAnalysis.tsx
@@ -0,0 +1,52 @@
+import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
+import { Fragment } from 'react'
+import Icon from './Icon'
+
+interface SolidityStaticAnalysisProps {
+  verticalIconsPlugin: VerticalIcons
+  itemContextAction: (e: any, name: string, documentation: string) => Promise<void>
+  addActive: (name: string) => void
+  removeActive: () => void
+}
+
+function SolidityStaticAnalysis ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: SolidityStaticAnalysisProps) {
+  return (
+    <Fragment>
+      {verticalIconsPlugin.targetProfileForChange &&
+      Object.keys(verticalIconsPlugin.targetProfileForChange).length
+        ? Object.keys(verticalIconsPlugin.targetProfileForChange)
+          .filter(p => p === 'solidityStaticAnalysis')
+          .map(p => (
+            <div id="analysisIcons" key={
+              verticalIconsPlugin.targetProfileForChange[p].displayName
+            }>
+              <Icon
+                kind={verticalIconsPlugin.targetProfileForChange[p].kind}
+                displayName={
+                  verticalIconsPlugin.targetProfileForChange[p].displayName
+                }
+                documentation={
+                  verticalIconsPlugin.targetProfileForChange[p]
+                    .documentation
+                }
+                icon={verticalIconsPlugin.targetProfileForChange[p].icon}
+                name={verticalIconsPlugin.targetProfileForChange[p].name}
+                tooltip={
+                  verticalIconsPlugin.targetProfileForChange[p].tooltip
+                }
+                verticalIconPlugin={verticalIconsPlugin}
+                contextMenuAction={itemContextAction}
+                addActive={addActive}
+                removeActive={removeActive}
+                key={
+                  verticalIconsPlugin.targetProfileForChange[p].displayName
+                }
+              />
+            </div>
+          ))
+        : null}
+    </Fragment>
+  )
+}
+
+export default SolidityStaticAnalysis
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Udapp.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Udapp.tsx
new file mode 100644
index 0000000000..4a6e2b1a6c
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Udapp.tsx
@@ -0,0 +1,53 @@
+import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
+import { Fragment } from 'react'
+import Icon from './Icon'
+
+interface UdappProps {
+  verticalIconsPlugin: VerticalIcons
+  itemContextAction: (e: any, name: string, documentation: string) => Promise<void>
+  addActive: (name: string) => void
+  removeActive: () => void
+}
+
+function Udapp ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: UdappProps) {
+  return (
+    <Fragment>
+      {verticalIconsPlugin.targetProfileForChange &&
+      Object.keys(verticalIconsPlugin.targetProfileForChange).length
+        ? Object.keys(verticalIconsPlugin.targetProfileForChange)
+          .filter(p => p === 'udapp')
+          .map(p => (
+            <div id="runIcons" data-id="verticalIconsKindUdapp" key={
+              verticalIconsPlugin.targetProfileForChange[p].displayName
+            }
+            >
+              <Icon
+                kind={verticalIconsPlugin.targetProfileForChange[p].kind}
+                displayName={
+                  verticalIconsPlugin.targetProfileForChange[p].displayName
+                }
+                documentation={
+                  verticalIconsPlugin.targetProfileForChange[p]
+                    .documentation
+                }
+                icon={verticalIconsPlugin.targetProfileForChange[p].icon}
+                name={verticalIconsPlugin.targetProfileForChange[p].name}
+                tooltip={
+                  verticalIconsPlugin.targetProfileForChange[p].tooltip
+                }
+                verticalIconPlugin={verticalIconsPlugin}
+                contextMenuAction={itemContextAction}
+                addActive={addActive}
+                removeActive={removeActive}
+                key={
+                  verticalIconsPlugin.targetProfileForChange[p].displayName
+                }
+              />
+            </div>
+          ))
+        : null}
+    </Fragment>
+  )
+}
+
+export default Udapp
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index 192e6eaee0..50d94b5fc8 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -1,20 +1,17 @@
 /* eslint-disable no-use-before-define */
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, {
+import {
   Fragment,
   useEffect,
-  useReducer,
-  useRef,
-  useState
+  useRef
 } from 'react'
 
 import './remix-ui-vertical-icons-panel.css'
 import OtherIcons from './components/OtherIcons'
 import { VerticalIcons } from '../../types/vertical-icons-panel'
 import Home from './components/Home'
-import Icon from './components/Icon'
 import Settings from './components/Settings'
-import { Chevron } from './components/Chevron'
+import { RequiredSection } from './components/RequiredSection'
 export interface RemixUiVerticalIconsPanelProps {
   verticalIconsPlugin: VerticalIcons
 }
@@ -26,7 +23,6 @@ export function RemixUiVerticalIconsPanel ({
 }: RemixUiVerticalIconsPanelProps) {
   const scrollableRef = useRef<any>()
   const iconPanelRef = useRef<any>()
-  // const [first] = useState(localStorage.getItem('firstTime'))
 
   function onThemeChanged (themeType: any) {
     const invert = themeType === 'dark' ? 1 : 0
@@ -103,216 +99,12 @@ export function RemixUiVerticalIconsPanel ({
       <div className="remixui_icons" ref={iconPanelRef}>
         <div className="remixui_default-icons-container remixui_requiredSection">
           <Home verticalIconPlugin={verticalIconsPlugin} />
-          {verticalIconsPlugin.targetProfileForChange &&
-          Object.keys(verticalIconsPlugin.targetProfileForChange).length
-            ? Object.keys(verticalIconsPlugin.targetProfileForChange)
-              .filter(p => p !== 'settings')
-              .filter(p => p !== 'pluginManager')
-              .filter(p => p === 'filePanel')
-              .map(p => (
-                <div id="fileExplorerIcons" key={
-                  verticalIconsPlugin.targetProfileForChange[p].displayName
-                } data-id="verticalIconsFileExplorerIcons">
-                  <Icon
-                    kind={verticalIconsPlugin.targetProfileForChange[p].kind}
-                    displayName={
-                      verticalIconsPlugin.targetProfileForChange[p].displayName
-                    }
-                    documentation={
-                      verticalIconsPlugin.targetProfileForChange[p]
-                        .documentation
-                    }
-                    icon={verticalIconsPlugin.targetProfileForChange[p].icon}
-                    name={verticalIconsPlugin.targetProfileForChange[p].name}
-                    tooltip={
-                      verticalIconsPlugin.targetProfileForChange[p].tooltip
-                    }
-                    verticalIconPlugin={verticalIconsPlugin}
-                    contextMenuAction={itemContextAction}
-                    addActive={addActive}
-                    removeActive={removeActive}
-                  />
-                </div>
-              ))
-            : null}
-          {verticalIconsPlugin.targetProfileForChange &&
-          Object.keys(verticalIconsPlugin.targetProfileForChange).length
-            ? Object.keys(verticalIconsPlugin.targetProfileForChange)
-              .filter(p => p !== 'settings')
-              .filter(p => p !== 'pluginManager')
-              .filter(p => p === 'solidity')
-              .map(p => (
-                <div id="compileIcons" key={
-                  verticalIconsPlugin.targetProfileForChange[p].displayName
-                }>
-                  <Icon
-                    kind={verticalIconsPlugin.targetProfileForChange[p].kind}
-                    displayName={
-                      verticalIconsPlugin.targetProfileForChange[p].displayName
-                    }
-                    documentation={
-                      verticalIconsPlugin.targetProfileForChange[p]
-                        .documentation
-                    }
-                    icon={verticalIconsPlugin.targetProfileForChange[p].icon}
-                    name={verticalIconsPlugin.targetProfileForChange[p].name}
-                    tooltip={
-                      verticalIconsPlugin.targetProfileForChange[p].tooltip
-                    }
-                    verticalIconPlugin={verticalIconsPlugin}
-                    contextMenuAction={itemContextAction}
-                    addActive={addActive}
-                    removeActive={removeActive}
-                    key={
-                      verticalIconsPlugin.targetProfileForChange[p].displayName
-                    }
-                  />
-                </div>
-              ))
-            : null}
-          {verticalIconsPlugin.targetProfileForChange &&
-          Object.keys(verticalIconsPlugin.targetProfileForChange).length
-            ? Object.keys(verticalIconsPlugin.targetProfileForChange)
-              .filter(p => p !== 'settings')
-              .filter(p => p !== 'pluginManager')
-              .filter(p => p === 'udapp')
-              .map(p => (
-                <div id="runIcons" data-id="verticalIconsKindUdapp" key={
-                  verticalIconsPlugin.targetProfileForChange[p].displayName
-                }
-                >
-                  <Icon
-                    kind={verticalIconsPlugin.targetProfileForChange[p].kind}
-                    displayName={
-                      verticalIconsPlugin.targetProfileForChange[p].displayName
-                    }
-                    documentation={
-                      verticalIconsPlugin.targetProfileForChange[p]
-                        .documentation
-                    }
-                    icon={verticalIconsPlugin.targetProfileForChange[p].icon}
-                    name={verticalIconsPlugin.targetProfileForChange[p].name}
-                    tooltip={
-                      verticalIconsPlugin.targetProfileForChange[p].tooltip
-                    }
-                    verticalIconPlugin={verticalIconsPlugin}
-                    contextMenuAction={itemContextAction}
-                    addActive={addActive}
-                    removeActive={removeActive}
-                    key={
-                      verticalIconsPlugin.targetProfileForChange[p].displayName
-                    }
-                  />
-                </div>
-              ))
-            : null}
-          {verticalIconsPlugin.targetProfileForChange &&
-          Object.keys(verticalIconsPlugin.targetProfileForChange).length
-            ? Object.keys(verticalIconsPlugin.targetProfileForChange)
-              .filter(p => p !== 'settings')
-              .filter(p => p !== 'pluginManager')
-              .filter(p => p === 'solidityStaticAnalysis')
-              .map(p => (
-                <div id="analysisIcons" key={
-                  verticalIconsPlugin.targetProfileForChange[p].displayName
-                }>
-                  <Icon
-                    kind={verticalIconsPlugin.targetProfileForChange[p].kind}
-                    displayName={
-                      verticalIconsPlugin.targetProfileForChange[p].displayName
-                    }
-                    documentation={
-                      verticalIconsPlugin.targetProfileForChange[p]
-                        .documentation
-                    }
-                    icon={verticalIconsPlugin.targetProfileForChange[p].icon}
-                    name={verticalIconsPlugin.targetProfileForChange[p].name}
-                    tooltip={
-                      verticalIconsPlugin.targetProfileForChange[p].tooltip
-                    }
-                    verticalIconPlugin={verticalIconsPlugin}
-                    contextMenuAction={itemContextAction}
-                    addActive={addActive}
-                    removeActive={removeActive}
-                    key={
-                      verticalIconsPlugin.targetProfileForChange[p].displayName
-                    }
-                  />
-                </div>
-              ))
-            : null}
-          {verticalIconsPlugin.targetProfileForChange &&
-          Object.keys(verticalIconsPlugin.targetProfileForChange).length
-            ? Object.keys(verticalIconsPlugin.targetProfileForChange)
-              .filter(p => p !== 'settings')
-              .filter(p => p !== 'pluginManager')
-              .filter(p => p === 'debugger')
-              .map(p => (
-                <div id="debuggingIcons" data-id="verticalIconsDebuggingIcons" key={
-                  verticalIconsPlugin.targetProfileForChange[p].displayName
-                }>
-                  <Icon
-                    kind={verticalIconsPlugin.targetProfileForChange[p].kind}
-                    displayName={
-                      verticalIconsPlugin.targetProfileForChange[p].displayName
-                    }
-                    documentation={
-                      verticalIconsPlugin.targetProfileForChange[p]
-                        .documentation
-                    }
-                    icon={verticalIconsPlugin.targetProfileForChange[p].icon}
-                    name={verticalIconsPlugin.targetProfileForChange[p].name}
-                    tooltip={
-                      verticalIconsPlugin.targetProfileForChange[p].tooltip
-                    }
-                    verticalIconPlugin={verticalIconsPlugin}
-                    contextMenuAction={itemContextAction}
-                    addActive={addActive}
-                    removeActive={removeActive}
-                    key={
-                      verticalIconsPlugin.targetProfileForChange[p].displayName
-                    }
-                  />
-                </div>
-              ))
-            : null}
-          {Object.keys(verticalIconsPlugin.targetProfileForChange)
-            .filter(p => p === 'pluginManager')
-            .map(p => (
-              <Icon
-                kind={
-                  verticalIconsPlugin.targetProfileForChange[p].kind
-                }
-                displayName={
-                  verticalIconsPlugin.targetProfileForChange[p]
-                    .displayName
-                }
-                documentation={
-                  verticalIconsPlugin.targetProfileForChange[p]
-                    .documentation
-                }
-                icon={
-                  verticalIconsPlugin.targetProfileForChange[p].icon
-                }
-                name={
-                  verticalIconsPlugin.targetProfileForChange[p].name
-                }
-                tooltip={
-                  verticalIconsPlugin.targetProfileForChange[p].tooltip
-                }
-                verticalIconPlugin={verticalIconsPlugin}
-                contextMenuAction={itemContextAction}
-                addActive={addActive}
-                removeActive={removeActive}
-                key={
-                  verticalIconsPlugin.targetProfileForChange[p]
-                    .displayName
-                }
-              />
-            ))}
-          <Chevron
-            divElementRef={scrollableRef}
-            cssRule={'fa fa-chevron-up remixui_icon-chevron mt-0 mb-0 ml-1 pl-3'}
+          <RequiredSection
+            verticalIconsPlugin={verticalIconsPlugin}
+            addActive={addActive}
+            removeActive={removeActive}
+            itemContextAction={itemContextAction}
+            scrollableRef={scrollableRef}
           />
         </div>
         <div
@@ -322,85 +114,23 @@ export function RemixUiVerticalIconsPanel ({
             : 'remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'}
           ref={scrollableRef}
         >
-          <OtherIcons>
-            {Object.keys(verticalIconsPlugin.targetProfileForChange)
-              .filter(p => p !== 'settings')
-              .filter(p => p !== 'pluginManager')
-              .filter(p => p !== 'filePanel')
-              .filter(p => p !== 'debugger')
-              .filter(p => p !== 'compiler')
-              .filter(p => p !== 'solidity')
-              .filter(p => p !== 'udapp')
-              .filter(p => p !== 'testing')
-              .filter(p => p !== 'solidityStaticAnalysis')
-              .map(p => (
-                <Icon
-                  kind={verticalIconsPlugin.targetProfileForChange[p].kind}
-                  displayName={
-                    verticalIconsPlugin.targetProfileForChange[p].displayName
-                  }
-                  documentation={
-                    verticalIconsPlugin.targetProfileForChange[p].documentation
-                  }
-                  icon={verticalIconsPlugin.targetProfileForChange[p].icon}
-                  name={verticalIconsPlugin.targetProfileForChange[p].name}
-                  tooltip={
-                    verticalIconsPlugin.targetProfileForChange[p].tooltip
-                  }
-                  verticalIconPlugin={verticalIconsPlugin}
-                  contextMenuAction={itemContextAction}
-                  addActive={addActive}
-                  removeActive={removeActive}
-                  key={
-                    verticalIconsPlugin.targetProfileForChange[p].displayName
-                  }
-                />
-              ))}
-          </OtherIcons>
+          <OtherIcons
+            verticalIconsPlugin={verticalIconsPlugin}
+            addActive={addActive}
+            removeActive={removeActive}
+            itemContextAction={itemContextAction}
+          />
         </div>
         {verticalIconsPlugin.targetProfileForChange &&
           Object.keys(verticalIconsPlugin.targetProfileForChange).length ? (
             <Fragment>
-              <Settings>
-                <Chevron
-                  divElementRef={scrollableRef}
-                  cssRule={'fa fa-chevron-down remixui_icon-chevron mt-0 mb-0 ml-1 pl-3'}
-                />
-                {Object.keys(verticalIconsPlugin.targetProfileForChange)
-                  .filter(p => p === 'settings')
-                  .map(p => (
-                    <Icon
-                      kind={
-                        verticalIconsPlugin.targetProfileForChange[p].kind
-                      }
-                      displayName={
-                        verticalIconsPlugin.targetProfileForChange[p]
-                          .displayName
-                      }
-                      documentation={
-                        verticalIconsPlugin.targetProfileForChange[p]
-                          .documentation
-                      }
-                      icon={
-                        verticalIconsPlugin.targetProfileForChange[p].icon
-                      }
-                      name={
-                        verticalIconsPlugin.targetProfileForChange[p].name
-                      }
-                      tooltip={
-                        verticalIconsPlugin.targetProfileForChange[p].tooltip
-                      }
-                      verticalIconPlugin={verticalIconsPlugin}
-                      contextMenuAction={itemContextAction}
-                      addActive={addActive}
-                      removeActive={removeActive}
-                      key={
-                        verticalIconsPlugin.targetProfileForChange[p]
-                          .displayName
-                      }
-                    />
-                  ))}
-              </Settings>
+              <Settings
+                verticalIconsPlugin={verticalIconsPlugin}
+                addActive={addActive}
+                removeActive={removeActive}
+                itemContextAction={itemContextAction}
+                scrollableRef={scrollableRef}
+              />
             </Fragment>
           ) : null}
       </div>
diff --git a/libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel.d.ts b/libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel.d.ts
index 8a4e6107b5..25dcc8fb65 100644
--- a/libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel.d.ts
+++ b/libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel.d.ts
@@ -46,10 +46,7 @@ export class VerticalIcons extends Plugin<any, any> {
   events: EventEmitter
   appManager: RemixAppManager
   htmlElement: HTMLDivElement
-  icons: {
-    name: any
-  }
-
+  icons: any
   iconKind: {}
   iconStatus: {}
   defaultProfile: defaultModuleProfile

From 01f38b1bebdf68b6579ed59b77261be9499d0aac Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 26 Oct 2021 02:55:07 +0100
Subject: [PATCH 14/84] fix missing react import in new components

---
 .../vertical-icons-panel/src/lib/components/Solidity.tsx       | 3 ++-
 .../src/lib/components/SolidityStaticAnalysis.tsx              | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Solidity.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Solidity.tsx
index 6b17fc3c86..83ca38e432 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Solidity.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Solidity.tsx
@@ -1,5 +1,6 @@
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
-import { Fragment } from 'react'
+// eslint-disable-next-line no-use-before-define
+import React, { Fragment } from 'react'
 import Icon from './Icon'
 
 interface SolidityProps {
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/SolidityStaticAnalysis.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/SolidityStaticAnalysis.tsx
index 15b0ff0578..5026f656c3 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/SolidityStaticAnalysis.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/SolidityStaticAnalysis.tsx
@@ -1,5 +1,6 @@
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
-import { Fragment } from 'react'
+// eslint-disable-next-line no-use-before-define
+import React, { Fragment } from 'react'
 import Icon from './Icon'
 
 interface SolidityStaticAnalysisProps {

From 8052f3aded96d1a56828fdbb148310709e375c6b Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 26 Oct 2021 02:56:00 +0100
Subject: [PATCH 15/84] fix missing imports

---
 .../vertical-icons-panel/src/lib/components/Debugger.tsx       | 3 ++-
 .../vertical-icons-panel/src/lib/components/FilePanel.tsx      | 3 ++-
 libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx | 3 +--
 .../vertical-icons-panel/src/lib/components/OtherIcons.tsx     | 2 +-
 .../src/lib/components/RequiredSection.tsx                     | 3 ++-
 .../remix-ui/vertical-icons-panel/src/lib/components/Udapp.tsx | 3 ++-
 .../src/lib/remix-ui-vertical-icons-panel.tsx                  | 2 +-
 7 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx
index a5a265b4b7..ab84bfd59d 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx
@@ -1,5 +1,6 @@
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
-import { Fragment } from 'react'
+// eslint-disable-next-line no-use-before-define
+import React, { Fragment } from 'react'
 import Icon from './Icon'
 
 interface DebuggerProps {
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/FilePanel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/FilePanel.tsx
index a90dfa9726..63b849fbce 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/FilePanel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/FilePanel.tsx
@@ -1,5 +1,6 @@
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
-import { Fragment } from 'react'
+// eslint-disable-next-line no-use-before-define
+import React, { Fragment } from 'react'
 import Icon from './Icon'
 
 interface FilePanelProps {
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
index 5bc02b636f..f47946fd36 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
@@ -3,9 +3,8 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import VerticalIconsContextMenu from '../vertical-icons-context-menu'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import React, { Fragment, SyntheticEvent, useEffect, useRef, useState } from 'react'
+import React, { Fragment, SyntheticEvent, useRef, useState } from 'react'
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
-// import * as helper from '../../../../../../apps/remix-ide/src/lib/helper'
 
   interface IconProps {
     verticalIconPlugin: VerticalIcons
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx
index 0378f95a94..80fb8e9b02 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-use-before-define */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
-import React, { ReactNode } from 'react'
+import React from 'react'
 import Icon from './Icon'
 
 interface OtherIconsProps {
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx
index 4c7d34a571..c78610052b 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx
@@ -1,5 +1,6 @@
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
-import { Fragment, MutableRefObject } from 'react'
+// eslint-disable-next-line no-use-before-define
+import React, { Fragment, MutableRefObject } from 'react'
 import { Chevron } from './Chevron'
 import Debugger from './Debugger'
 import FilePanel from './FilePanel'
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Udapp.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Udapp.tsx
index 4a6e2b1a6c..5846348243 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Udapp.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Udapp.tsx
@@ -1,5 +1,6 @@
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
-import { Fragment } from 'react'
+// eslint-disable-next-line no-use-before-define
+import React, { Fragment } from 'react'
 import Icon from './Icon'
 
 interface UdappProps {
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index 50d94b5fc8..0bc4eddc3e 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-use-before-define */
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import {
+import React, {
   Fragment,
   useEffect,
   useRef

From 2ccff7bacc0c3a201d8e812b12c3a9cee0491abb Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 26 Oct 2021 12:08:00 +0100
Subject: [PATCH 16/84] refactor and clean OtherIcons component. small fix to
 run and deploy

---
 apps/remix-ide-e2e/src/tests/runAndDeploy.test.ts |  1 +
 .../src/lib/components/OtherIcons.tsx             | 15 ++++++++-------
 .../src/lib/remix-ui-vertical-icons-panel.tsx     |  1 -
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/runAndDeploy.test.ts b/apps/remix-ide-e2e/src/tests/runAndDeploy.test.ts
index e700b2d27a..33021082ae 100644
--- a/apps/remix-ide-e2e/src/tests/runAndDeploy.test.ts
+++ b/apps/remix-ide-e2e/src/tests/runAndDeploy.test.ts
@@ -40,6 +40,7 @@ module.exports = {
       .setValue('*[data-id="modalDialogCustomPromptText"]', 'Remix is cool!')
       .assert.elementNotPresent('*[data-id="settingsRemixRunSignMsgHash"]')
       .assert.elementNotPresent('*[data-id="settingsRemixRunSignMsgSignature"]')
+      .pause(2000)
       .modalFooterOKClick()
       .waitForElementVisible('*[data-id="modalDialogContainer"]', 12000)
       .assert.elementPresent('*[data-id="settingsRemixRunSignMsgHash"]')
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx
index 80fb8e9b02..377ca2c28a 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx
@@ -4,6 +4,13 @@ import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical
 import React from 'react'
 import Icon from './Icon'
 
+function customFilter (p: string) {
+  if (p !== 'settings' && p !== 'pluginManager' &&
+    p !== 'filePanel' && p !== 'debugger' &&
+    p !== 'compiler' && p !== 'solidity' &&
+    p !== 'udapp' && p !== 'testing' && p !== 'solidityStaticAnalysis') return true
+  return false
+}
 interface OtherIconsProps {
   verticalIconsPlugin: VerticalIcons
   itemContextAction: (e: any, name: string, documentation: string) => Promise<void>
@@ -11,18 +18,12 @@ interface OtherIconsProps {
   removeActive: () => void
 }
 
-const profileNames = ['settings', 'pluginManager', 'filePanel', 'debugger', 'compiler', 'solidity', 'udapp', 'testing', 'solidityStaticAnalysis']
 function OtherIcons ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: OtherIconsProps) {
   return (
     <div id="otherIcons">
       {
         Object.keys(verticalIconsPlugin.targetProfileForChange)
-          .filter(function (searchTerm: string) {
-            for (var key in profileNames) {
-              if (searchTerm !== key) return true
-            }
-            return false
-          })
+          .filter(customFilter)
           .map(p => (
             <Icon
               kind={verticalIconsPlugin.targetProfileForChange[p].kind}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index 0bc4eddc3e..4240b874c3 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -87,7 +87,6 @@ export function RemixUiVerticalIconsPanel ({
   }, [])
 
   useEffect(() => {
-    // const found = iconPanelRef.current!.querySelector('#verticalIconsKindudapp')
     if (verticalIconsPlugin.targetProfileForChange && verticalIconsPlugin.targetProfileForChange.udapp) {
       const doWalkThroughEvent = new Event('doWalkThrough')
       document.dispatchEvent(doWalkThroughEvent)

From cb43c987915d21fe18fe8c2ae7f271fc73a095d0 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 26 Oct 2021 13:29:46 +0100
Subject: [PATCH 17/84] fix conflict in workspace.json

---
 workspace.json | 110 +++++++++++++------------------------------------
 1 file changed, 29 insertions(+), 81 deletions(-)

diff --git a/workspace.json b/workspace.json
index 04972f329f..e0e3b2fab4 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1,71 +1,5 @@
 {
   "version": 1,
-  "cli": {
-    "defaultCollection": "@nrwl/react"
-  },
-  "defaultProject": "remix-ide",
-  "schematics": {
-    "@nrwl/workspace": {
-      "library": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/cypress": {
-      "cypress-project": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/react": {
-      "application": {
-        "style": "css",
-        "linter": "eslint",
-        "babel": true
-      },
-      "component": {
-        "style": "css"
-      },
-      "library": {
-        "style": "css",
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/next": {
-      "application": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/web": {
-      "application": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/node": {
-      "application": {
-        "linter": "eslint"
-      },
-      "library": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/nx-plugin": {
-      "plugin": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/nest": {
-      "application": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/express": {
-      "application": {
-        "linter": "eslint"
-      },
-      "library": {
-        "linter": "eslint"
-      }
-    }
-  },
   "projects": {
     "remix-ide": {
       "root": "apps/remix-ide",
@@ -1119,6 +1053,21 @@
           }
         }
       }
+    },
+    "remix-ui-vertical-icons-panel": {
+      "root": "libs/remix-ui/vertical-icons-panel",
+      "sourceRoot": "libs/remix-ui/vertical-icons-panel/src",
+      "projectType": "library",
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": [
+              "libs/remix-ui/vertical-icons-panel/**/*.{ts,tsx,js,jsx}"
+            ]
+          }
+        }
+      }
     }
   },
   "cli": {
@@ -1172,20 +1121,19 @@
         "linter": "eslint"
       }
     },
-    "remix-ui-vertical-icons-panel": {
-      "root": "libs/remix-ui/vertical-icons-panel",
-      "sourceRoot": "libs/remix-ui/vertical-icons-panel/src",
-      "projectType": "library",
-      "architect": {
-        "lint": {
-          "builder": "@nrwl/linter:eslint",
-          "options": {
-            "lintFilePatterns": [
-              "libs/remix-ui/vertical-icons-panel/**/*.{ts,tsx,js,jsx}"
-            ]
-          }
-        }
+    "@nrwl/nest": {
+      "application": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/express": {
+      "application": {
+        "linter": "eslint"
+      },
+      "library": {
+        "linter": "eslint"
       }
     }
-  }
-}
+  },
+  "defaultProject": "remix-ide"
+}
\ No newline at end of file

From 45bd42c606e864f9c9b79e3e10ef3f57efa89846 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 11 Oct 2021 11:46:09 +0100
Subject: [PATCH 18/84] create vertical icons panel react lib

---
 .eslintrc.json                                |  35 ++++++
 libs/remix-ui/vertical-icons-panel/.babelrc   |   2 +-
 .../vertical-icons-panel/.eslintrc.json       |   2 +-
 .../remix-ui-vertical-icons-panel.module.css  |   0
 nx.json                                       |   8 --
 workspace.json                                | 103 ++++++++++++++++--
 6 files changed, 130 insertions(+), 20 deletions(-)
 create mode 100644 .eslintrc.json
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css

diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000000..06cc47d9a2
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,35 @@
+{
+  "root": true,
+  "ignorePatterns": ["**/*"],
+  "plugins": ["@nrwl/nx"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@nrwl/nx/enforce-module-boundaries": [
+          "error",
+          {
+            "enforceBuildableLibDependency": true,
+            "allow": [],
+            "depConstraints": [
+              {
+                "sourceTag": "*",
+                "onlyDependOnLibsWithTags": ["*"]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["plugin:@nrwl/nx/typescript"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nrwl/nx/javascript"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/libs/remix-ui/vertical-icons-panel/.babelrc b/libs/remix-ui/vertical-icons-panel/.babelrc
index 64a3748691..09d67939cc 100644
--- a/libs/remix-ui/vertical-icons-panel/.babelrc
+++ b/libs/remix-ui/vertical-icons-panel/.babelrc
@@ -1,4 +1,4 @@
 {
   "presets": ["@nrwl/react/babel"],
   "plugins": []
-}
\ No newline at end of file
+}
diff --git a/libs/remix-ui/vertical-icons-panel/.eslintrc.json b/libs/remix-ui/vertical-icons-panel/.eslintrc.json
index b545a2cd9e..299346762b 100644
--- a/libs/remix-ui/vertical-icons-panel/.eslintrc.json
+++ b/libs/remix-ui/vertical-icons-panel/.eslintrc.json
@@ -16,4 +16,4 @@
     "no-unused-vars": "off",
     "@typescript-eslint/no-unused-vars": "error"
   }
-}
\ No newline at end of file
+}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/nx.json b/nx.json
index fd90c35f84..aa46ad3fc7 100644
--- a/nx.json
+++ b/nx.json
@@ -139,13 +139,5 @@
     "remix-ui-tabs": {
       "tags": []
     }
-  },
-  "targetDependencies": {
-    "build": [
-      {
-        "target": "build",
-        "projects": "dependencies"
-      }
-    ]
   }
 }
diff --git a/workspace.json b/workspace.json
index e0e3b2fab4..71595bcb77 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1,5 +1,71 @@
 {
   "version": 1,
+  "cli": {
+    "defaultCollection": "@nrwl/react"
+  },
+  "defaultProject": "remix-ide",
+  "schematics": {
+    "@nrwl/workspace": {
+      "library": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/cypress": {
+      "cypress-project": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/react": {
+      "application": {
+        "style": "css",
+        "linter": "eslint",
+        "babel": true
+      },
+      "component": {
+        "style": "css"
+      },
+      "library": {
+        "style": "css",
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/next": {
+      "application": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/web": {
+      "application": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/node": {
+      "application": {
+        "linter": "eslint"
+      },
+      "library": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/nx-plugin": {
+      "plugin": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/nest": {
+      "application": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/express": {
+      "application": {
+        "linter": "eslint"
+      },
+      "library": {
+        "linter": "eslint"
+      }
+    }
+  },
   "projects": {
     "remix-ide": {
       "root": "apps/remix-ide",
@@ -1121,19 +1187,36 @@
         "linter": "eslint"
       }
     },
-    "@nrwl/nest": {
-      "application": {
-        "linter": "eslint"
+    "@remix-ui-verticaliconspanel": {
+      "root": "libs/@remix-ui/verticaliconspanel",
+      "sourceRoot": "libs/@remix-ui/verticaliconspanel/src",
+      "projectType": "library",
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": [
+              "libs/@remix-ui/verticaliconspanel/**/*.{ts,tsx,js,jsx}"
+            ]
+          }
+        }
       }
     },
-    "@nrwl/express": {
-      "application": {
-        "linter": "eslint"
-      },
-      "library": {
-        "linter": "eslint"
+    "remix-ui-vertical-icons-panel": {
+      "root": "libs/remix-ui/vertical-icons-panel",
+      "sourceRoot": "libs/remix-ui/vertical-icons-panel/src",
+      "projectType": "library",
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": [
+              "libs/remix-ui/vertical-icons-panel/**/*.{ts,tsx,js,jsx}"
+            ]
+          }
+        }
       }
     }
   },
   "defaultProject": "remix-ide"
-}
\ No newline at end of file
+}

From 8a12aea0a058497525d0a1a365950bdf742185ec Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 11 Oct 2021 13:43:57 +0100
Subject: [PATCH 19/84] update components and setttings

---
 libs/remix-ui/vertical-icons-panel/.babelrc                   | 2 +-
 libs/remix-ui/vertical-icons-panel/.eslintrc.json             | 4 ++++
 .../src/lib/remix-ui-vertical-icons-panel.module.css          | 0
 .../vertical-icons-panel/types/vertical-icons-panel.d.ts      | 4 ++++
 4 files changed, 9 insertions(+), 1 deletion(-)
 delete mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css

diff --git a/libs/remix-ui/vertical-icons-panel/.babelrc b/libs/remix-ui/vertical-icons-panel/.babelrc
index 09d67939cc..64a3748691 100644
--- a/libs/remix-ui/vertical-icons-panel/.babelrc
+++ b/libs/remix-ui/vertical-icons-panel/.babelrc
@@ -1,4 +1,4 @@
 {
   "presets": ["@nrwl/react/babel"],
   "plugins": []
-}
+}
\ No newline at end of file
diff --git a/libs/remix-ui/vertical-icons-panel/.eslintrc.json b/libs/remix-ui/vertical-icons-panel/.eslintrc.json
index 299346762b..056178bc85 100644
--- a/libs/remix-ui/vertical-icons-panel/.eslintrc.json
+++ b/libs/remix-ui/vertical-icons-panel/.eslintrc.json
@@ -16,4 +16,8 @@
     "no-unused-vars": "off",
     "@typescript-eslint/no-unused-vars": "error"
   }
+<<<<<<< HEAD
 }
+=======
+}
+>>>>>>> b6322066e (update components and setttings)
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel.d.ts b/libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel.d.ts
index 25dcc8fb65..f82e65cb32 100644
--- a/libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel.d.ts
+++ b/libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel.d.ts
@@ -79,7 +79,11 @@ export class VerticalIcons extends Plugin<any, any> {
    * Remove an icon from the map
    * @param {ModuleProfile} profile The profile of the module
    */
+<<<<<<< HEAD
   removeIcon({ name }: any): void
+=======
+  removeIcon({ kind, name }: any): void
+>>>>>>> b6322066e (update components and setttings)
   /**
    *  Remove active for the current activated icons
    */

From 13a53f80779658ab5c682b72690adb57f1c6a952 Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Mon, 11 Oct 2021 15:43:23 +0200
Subject: [PATCH 20/84] add deps nx.json

---
 nx.json | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/nx.json b/nx.json
index aa46ad3fc7..fd90c35f84 100644
--- a/nx.json
+++ b/nx.json
@@ -139,5 +139,13 @@
     "remix-ui-tabs": {
       "tags": []
     }
+  },
+  "targetDependencies": {
+    "build": [
+      {
+        "target": "build",
+        "projects": "dependencies"
+      }
+    ]
   }
 }

From 502d5b6512e80f3eaefd22ea3f5993242745354a Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 12 Oct 2021 12:25:03 +0100
Subject: [PATCH 21/84] address review comments from AniketEngg

---
 .../vertical-icons-panel/types/vertical-icons-panel.d.ts      | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel.d.ts b/libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel.d.ts
index f82e65cb32..25dcc8fb65 100644
--- a/libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel.d.ts
+++ b/libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel.d.ts
@@ -79,11 +79,7 @@ export class VerticalIcons extends Plugin<any, any> {
    * Remove an icon from the map
    * @param {ModuleProfile} profile The profile of the module
    */
-<<<<<<< HEAD
   removeIcon({ name }: any): void
-=======
-  removeIcon({ kind, name }: any): void
->>>>>>> b6322066e (update components and setttings)
   /**
    *  Remove active for the current activated icons
    */

From fe6ac2ed5b3eab5e8e3036dd14dae3d1492471a3 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Wed, 13 Oct 2021 11:21:45 +0100
Subject: [PATCH 22/84] add review changes from rystew & LianaHus

---
 .../src/lib/remix-ui-vertical-icons-panel.tsx                 | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index 4240b874c3..af379593ac 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -106,6 +106,10 @@ export function RemixUiVerticalIconsPanel ({
             scrollableRef={scrollableRef}
           />
         </div>
+        {scrollableRef.current && scrollableRef.current!.scrollHeight > scrollableRef.current!.clientHeight
+          ? <i className="fa fa-chevron-up remixui_icon-chevron m-3"></i>
+          : null
+        }
         <div
           id="remixuiScrollable"
           className={scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight

From 1e94190a6e2fad120998801befbaa4b1e4fb8844 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 14 Oct 2021 23:05:25 +0100
Subject: [PATCH 23/84] changes based on LianaHus comments complete

---
 apps/remix-ide/src/walkthroughService.js               | 10 ++++++++++
 .../src/lib/remix-ui-vertical-icons-panel.tsx          |  6 ++----
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/apps/remix-ide/src/walkthroughService.js b/apps/remix-ide/src/walkthroughService.js
index 2e5e9a8305..12b448601b 100644
--- a/apps/remix-ide/src/walkthroughService.js
+++ b/apps/remix-ide/src/walkthroughService.js
@@ -6,8 +6,13 @@ export class WalkthroughService {
   }
 
   start (params) {
+<<<<<<< HEAD
     document.addEventListener('doWalkThrough', (e) => {
       if (!localStorage.getItem('hadTour_initial')) {
+=======
+    if (!localStorage.getItem('hadTour_initial')) {
+      document.addEventListener('doWalkThrough', (e) => {
+>>>>>>> e0fcb6bcd (changes based on LianaHus comments complete)
         introJs().setOptions({
           steps: [{
             title: 'Welcome to Remix IDE',
@@ -47,8 +52,13 @@ export class WalkthroughService {
           }
         }).start()
         localStorage.setItem('hadTour_initial', true)
+<<<<<<< HEAD
       }
     })
+=======
+      })
+    }
+>>>>>>> e0fcb6bcd (changes based on LianaHus comments complete)
   }
 
   startFeatureTour () {
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index af379593ac..29a0e7749d 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -3,6 +3,7 @@
 import React, {
   Fragment,
   useEffect,
+  useReducer,
   useRef
 } from 'react'
 
@@ -23,6 +24,7 @@ export function RemixUiVerticalIconsPanel ({
 }: RemixUiVerticalIconsPanelProps) {
   const scrollableRef = useRef<any>()
   const iconPanelRef = useRef<any>()
+  const udappPanelRef = useRef<any>()
 
   function onThemeChanged (themeType: any) {
     const invert = themeType === 'dark' ? 1 : 0
@@ -106,10 +108,6 @@ export function RemixUiVerticalIconsPanel ({
             scrollableRef={scrollableRef}
           />
         </div>
-        {scrollableRef.current && scrollableRef.current!.scrollHeight > scrollableRef.current!.clientHeight
-          ? <i className="fa fa-chevron-up remixui_icon-chevron m-3"></i>
-          : null
-        }
         <div
           id="remixuiScrollable"
           className={scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight

From afeb4b89f476c31df48cbb9e5d51c5439edf0c28 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Fri, 15 Oct 2021 15:38:52 +0100
Subject: [PATCH 24/84] fix e2e walkthrough test failures

---
 apps/remix-ide/src/walkthroughService.js               | 10 ----------
 libs/remix-ui/vertical-icons-panel/.eslintrc.json      |  4 ----
 .../src/lib/remix-ui-vertical-icons-panel.tsx          |  5 +++--
 3 files changed, 3 insertions(+), 16 deletions(-)

diff --git a/apps/remix-ide/src/walkthroughService.js b/apps/remix-ide/src/walkthroughService.js
index 12b448601b..2e5e9a8305 100644
--- a/apps/remix-ide/src/walkthroughService.js
+++ b/apps/remix-ide/src/walkthroughService.js
@@ -6,13 +6,8 @@ export class WalkthroughService {
   }
 
   start (params) {
-<<<<<<< HEAD
     document.addEventListener('doWalkThrough', (e) => {
       if (!localStorage.getItem('hadTour_initial')) {
-=======
-    if (!localStorage.getItem('hadTour_initial')) {
-      document.addEventListener('doWalkThrough', (e) => {
->>>>>>> e0fcb6bcd (changes based on LianaHus comments complete)
         introJs().setOptions({
           steps: [{
             title: 'Welcome to Remix IDE',
@@ -52,13 +47,8 @@ export class WalkthroughService {
           }
         }).start()
         localStorage.setItem('hadTour_initial', true)
-<<<<<<< HEAD
       }
     })
-=======
-      })
-    }
->>>>>>> e0fcb6bcd (changes based on LianaHus comments complete)
   }
 
   startFeatureTour () {
diff --git a/libs/remix-ui/vertical-icons-panel/.eslintrc.json b/libs/remix-ui/vertical-icons-panel/.eslintrc.json
index 056178bc85..299346762b 100644
--- a/libs/remix-ui/vertical-icons-panel/.eslintrc.json
+++ b/libs/remix-ui/vertical-icons-panel/.eslintrc.json
@@ -16,8 +16,4 @@
     "no-unused-vars": "off",
     "@typescript-eslint/no-unused-vars": "error"
   }
-<<<<<<< HEAD
 }
-=======
-}
->>>>>>> b6322066e (update components and setttings)
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index 29a0e7749d..d075194d81 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -4,7 +4,8 @@ import React, {
   Fragment,
   useEffect,
   useReducer,
-  useRef
+  useRef,
+  useState
 } from 'react'
 
 import './remix-ui-vertical-icons-panel.css'
@@ -24,7 +25,7 @@ export function RemixUiVerticalIconsPanel ({
 }: RemixUiVerticalIconsPanelProps) {
   const scrollableRef = useRef<any>()
   const iconPanelRef = useRef<any>()
-  const udappPanelRef = useRef<any>()
+  // const [first] = useState(localStorage.getItem('firstTime'))
 
   function onThemeChanged (themeType: any) {
     const invert = themeType === 'dark' ? 1 : 0

From 2ebb2fb5d26c290ccefa9cc4e6bf5505358456e4 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Sat, 16 Oct 2021 07:20:23 +0100
Subject: [PATCH 25/84] fix bug in icon removal in deactivation. Fix bottom
 border display regression

---
 .../src/lib/remix-ui-vertical-icons-panel.css                 | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
index c4339942e1..1c0426e429 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
@@ -83,7 +83,11 @@
     -ms-overflow-style: none;
   }
   .remixui_scrollable-container {
+<<<<<<< HEAD
     height: 540px;
+=======
+    max-height: 570px;
+>>>>>>> aedb4fa83 (fix bug in icon removal in deactivation. Fix bottom border display regression)
     /* border-bottom: 3px solid #3f4455; */
   }
   .remixui_scrollbar::-webkit-scrollbar { /* Chrome, Safari and other Webkit browsers*/

From a7327583f6db3e37d2a6bc3627ed5c2fb3acd434 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Sat, 16 Oct 2021 20:18:35 +0100
Subject: [PATCH 26/84] refactor chevron to its own component to address buggy
 behaviour

---
 .../src/lib/remix-ui-vertical-icons-panel.css                 | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
index 1c0426e429..c4339942e1 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
@@ -83,11 +83,7 @@
     -ms-overflow-style: none;
   }
   .remixui_scrollable-container {
-<<<<<<< HEAD
     height: 540px;
-=======
-    max-height: 570px;
->>>>>>> aedb4fa83 (fix bug in icon removal in deactivation. Fix bottom border display regression)
     /* border-bottom: 3px solid #3f4455; */
   }
   .remixui_scrollbar::-webkit-scrollbar { /* Chrome, Safari and other Webkit browsers*/

From b645b10b1a635b40ef41b8446fdab2146e42b047 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 26 Oct 2021 02:02:29 +0100
Subject: [PATCH 27/84] address review comments from @ioedeveloper

---
 .eslintrc.json                                | 35 -------------------
 .../src/lib/components/Icon.tsx               |  3 +-
 .../src/lib/remix-ui-vertical-icons-panel.tsx |  7 ++--
 3 files changed, 4 insertions(+), 41 deletions(-)
 delete mode 100644 .eslintrc.json

diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100644
index 06cc47d9a2..0000000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
-  "root": true,
-  "ignorePatterns": ["**/*"],
-  "plugins": ["@nrwl/nx"],
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {
-        "@nrwl/nx/enforce-module-boundaries": [
-          "error",
-          {
-            "enforceBuildableLibDependency": true,
-            "allow": [],
-            "depConstraints": [
-              {
-                "sourceTag": "*",
-                "onlyDependOnLibsWithTags": ["*"]
-              }
-            ]
-          }
-        ]
-      }
-    },
-    {
-      "files": ["*.ts", "*.tsx"],
-      "extends": ["plugin:@nrwl/nx/typescript"],
-      "rules": {}
-    },
-    {
-      "files": ["*.js", "*.jsx"],
-      "extends": ["plugin:@nrwl/nx/javascript"],
-      "rules": {}
-    }
-  ]
-}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
index f47946fd36..5bc02b636f 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
@@ -3,8 +3,9 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import VerticalIconsContextMenu from '../vertical-icons-context-menu'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import React, { Fragment, SyntheticEvent, useRef, useState } from 'react'
+import React, { Fragment, SyntheticEvent, useEffect, useRef, useState } from 'react'
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
+// import * as helper from '../../../../../../apps/remix-ide/src/lib/helper'
 
   interface IconProps {
     verticalIconPlugin: VerticalIcons
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index d075194d81..f0c451fd5c 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -1,11 +1,9 @@
 /* eslint-disable no-use-before-define */
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, {
+import {
   Fragment,
   useEffect,
-  useReducer,
-  useRef,
-  useState
+  useRef
 } from 'react'
 
 import './remix-ui-vertical-icons-panel.css'
@@ -25,7 +23,6 @@ export function RemixUiVerticalIconsPanel ({
 }: RemixUiVerticalIconsPanelProps) {
   const scrollableRef = useRef<any>()
   const iconPanelRef = useRef<any>()
-  // const [first] = useState(localStorage.getItem('firstTime'))
 
   function onThemeChanged (themeType: any) {
     const invert = themeType === 'dark' ? 1 : 0

From 2b4fc7526d3e9d8481b9efa744e70ddbeb663b50 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 26 Oct 2021 02:56:00 +0100
Subject: [PATCH 28/84] fix missing imports

---
 libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx | 3 +--
 .../src/lib/remix-ui-vertical-icons-panel.tsx                  | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
index 5bc02b636f..f47946fd36 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
@@ -3,9 +3,8 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import VerticalIconsContextMenu from '../vertical-icons-context-menu'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import React, { Fragment, SyntheticEvent, useEffect, useRef, useState } from 'react'
+import React, { Fragment, SyntheticEvent, useRef, useState } from 'react'
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
-// import * as helper from '../../../../../../apps/remix-ide/src/lib/helper'
 
   interface IconProps {
     verticalIconPlugin: VerticalIcons
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index f0c451fd5c..4240b874c3 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-use-before-define */
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import {
+import React, {
   Fragment,
   useEffect,
   useRef

From f48bd7b8745d8f8df3f47267af98c3ff68a0942d Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 26 Oct 2021 13:42:25 +0100
Subject: [PATCH 29/84] workspace.json fix

---
 workspace.json | 179 ++++++++++++++++---------------------------------
 1 file changed, 57 insertions(+), 122 deletions(-)

diff --git a/workspace.json b/workspace.json
index 71595bcb77..8f1ef170f8 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1,71 +1,5 @@
 {
   "version": 1,
-  "cli": {
-    "defaultCollection": "@nrwl/react"
-  },
-  "defaultProject": "remix-ide",
-  "schematics": {
-    "@nrwl/workspace": {
-      "library": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/cypress": {
-      "cypress-project": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/react": {
-      "application": {
-        "style": "css",
-        "linter": "eslint",
-        "babel": true
-      },
-      "component": {
-        "style": "css"
-      },
-      "library": {
-        "style": "css",
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/next": {
-      "application": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/web": {
-      "application": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/node": {
-      "application": {
-        "linter": "eslint"
-      },
-      "library": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/nx-plugin": {
-      "plugin": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/nest": {
-      "application": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/express": {
-      "application": {
-        "linter": "eslint"
-      },
-      "library": {
-        "linter": "eslint"
-      }
-    }
-  },
   "projects": {
     "remix-ide": {
       "root": "apps/remix-ide",
@@ -1134,49 +1068,34 @@
           }
         }
       }
-    }
-  },
-  "cli": {
-    "defaultCollection": "@nrwl/react"
-  },
-  "schematics": {
-    "@nrwl/workspace": {
-      "library": {
-        "linter": "eslint"
-      }
     },
-    "@nrwl/cypress": {
-      "cypress-project": {
-        "linter": "eslint"
-      }
+    "cli": {
+      "defaultCollection": "@nrwl/react"
     },
-    "@nrwl/react": {
-      "application": {
-        "style": "css",
-        "linter": "eslint",
-        "babel": true
+    "schematics": {
+      "@nrwl/workspace": {
+        "library": {
+          "linter": "eslint"
+        }
       },
-      "component": {
-        "style": "css"
+      "@nrwl/cypress": {
+        "cypress-project": {
+          "linter": "eslint"
+        }
       },
-      "library": {
-        "style": "css",
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/next": {
-      "application": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/web": {
-      "application": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/node": {
-      "application": {
-        "linter": "eslint"
+      "@nrwl/react": {
+        "application": {
+          "style": "css",
+          "linter": "eslint",
+          "babel": true
+        },
+        "component": {
+          "style": "css"
+        },
+        "library": {
+          "style": "css",
+          "linter": "eslint"
+        }
       },
       "library": {
         "linter": "eslint"
@@ -1200,23 +1119,39 @@
             ]
           }
         }
-      }
-    },
-    "remix-ui-vertical-icons-panel": {
-      "root": "libs/remix-ui/vertical-icons-panel",
-      "sourceRoot": "libs/remix-ui/vertical-icons-panel/src",
-      "projectType": "library",
-      "architect": {
-        "lint": {
-          "builder": "@nrwl/linter:eslint",
-          "options": {
-            "lintFilePatterns": [
-              "libs/remix-ui/vertical-icons-panel/**/*.{ts,tsx,js,jsx}"
-            ]
-          }
+      },
+      "@nrwl/web": {
+        "application": {
+          "linter": "eslint"
+        }
+      },
+      "@nrwl/node": {
+        "application": {
+          "linter": "eslint"
+        },
+        "library": {
+          "linter": "eslint"
+        }
+      },
+      "@nrwl/nx-plugin": {
+        "plugin": {
+          "linter": "eslint"
+        }
+      },
+      "@nrwl/nest": {
+        "application": {
+          "linter": "eslint"
+        }
+      },
+      "@nrwl/express": {
+        "application": {
+          "linter": "eslint"
+        },
+        "library": {
+          "linter": "eslint"
         }
       }
-    }
-  },
-  "defaultProject": "remix-ide"
+    },
+    "defaultProject": "remix-ide"
+  }
 }

From dc93a71a5a1acf91769b3793da4a1b03d8d4c67c Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 26 Oct 2021 14:17:57 +0100
Subject: [PATCH 30/84] misplaced comma in workspace.json

---
 workspace.json | 115 +++++++++++++++++++++++++++++++++----------------
 1 file changed, 78 insertions(+), 37 deletions(-)

diff --git a/workspace.json b/workspace.json
index 8f1ef170f8..9ba0419799 100644
--- a/workspace.json
+++ b/workspace.json
@@ -766,8 +766,8 @@
       }
     },
     "remix-ui-plugin-manager": {
-      "root": "libs/remix-ui/plugin-manager",
-      "sourceRoot": "libs/remix-ui/plugin-manager/src",
+     "root": "libs/remix-ui/plugin-manager",
+      "sourceRoot": "libs/remix-ui/plugin-manager/src", 
       "projectType": "library",
       "schematics": {},
       "architect": {
@@ -1068,24 +1068,17 @@
           }
         }
       }
-    },
-    "cli": {
-      "defaultCollection": "@nrwl/react"
-    },
-    "schematics": {
-      "@nrwl/workspace": {
-        "library": {
-          "linter": "eslint"
-        }
-      },
-      "@nrwl/cypress": {
-        "cypress-project": {
-          "linter": "eslint"
-        }
-      },
-      "@nrwl/react": {
-        "application": {
-          "style": "css",
+    }
+  },
+  "remix-ui-editor": {
+    "root": "libs/remix-ui/editor",
+    "sourceRoot": "libs/remix-ui/editor/src",
+    "projectType": "library",
+    "schematics": {},
+    "architect": {
+      "lint": {
+        "builder": "@nrwl/linter:lint",
+        "options": {
           "linter": "eslint",
           "babel": true
         },
@@ -1132,26 +1125,74 @@
         "library": {
           "linter": "eslint"
         }
+      }
+    }
+  }
+  ,
+  "cli": {
+    "defaultCollection": "@nrwl/react"
+  },
+  "schematics": {
+    "@nrwl/workspace": {
+      "library": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/cypress": {
+      "cypress-project": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/react": {
+      "application": {
+        "style": "css",
+        "linter": "eslint",
+        "babel": true
       },
-      "@nrwl/nx-plugin": {
-        "plugin": {
-          "linter": "eslint"
-        }
+      "component": {
+        "style": "css"
       },
-      "@nrwl/nest": {
-        "application": {
-          "linter": "eslint"
-        }
+      "library": {
+        "style": "css",
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/next": {
+      "application": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/web": {
+      "application": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/node": {
+      "application": {
+        "linter": "eslint"
       },
-      "@nrwl/express": {
-        "application": {
-          "linter": "eslint"
-        },
-        "library": {
-          "linter": "eslint"
-        }
+      "library": {
+        "linter": "eslint"
       }
     },
-    "defaultProject": "remix-ide"
-  }
+    "@nrwl/nx-plugin": {
+      "plugin": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/nest": {
+      "application": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/express": {
+      "application": {
+        "linter": "eslint"
+      },
+      "library": {
+        "linter": "eslint"
+      }
+    }
+  },
+  "defaultProject": "remix-ide"
 }

From 56ce7235a5db55472b0f2671a6c949a1007f888d Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 26 Oct 2021 14:23:55 +0100
Subject: [PATCH 31/84] workspace.json

---
 workspace.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/workspace.json b/workspace.json
index 9ba0419799..ee59c73897 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1127,8 +1127,7 @@
         }
       }
     }
-  }
-  ,
+  },
   "cli": {
     "defaultCollection": "@nrwl/react"
   },

From d5b1bf56880b8aafc35a368b1ed904e8e4705cf1 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 28 Oct 2021 01:29:57 +0100
Subject: [PATCH 32/84] fixes as per @ryestew

---
 .../src/lib/remix-ui-vertical-icons-panel.css                 | 4 ++--
 .../src/lib/remix-ui-vertical-icons-panel.tsx                 | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
index c4339942e1..536b67ea90 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
@@ -83,7 +83,7 @@
     -ms-overflow-style: none;
   }
   .remixui_scrollable-container {
-    height: 540px;
+    height: 550px;
     /* border-bottom: 3px solid #3f4455; */
   }
   .remixui_scrollbar::-webkit-scrollbar { /* Chrome, Safari and other Webkit browsers*/
@@ -93,7 +93,7 @@
     overflow-x: 'hidden';
   }
   .remixui_default-icons-container {
-    border-bottom: 3px solid #3f4455;
+    border-bottom: 2px solid #3f4455;
   }
   .remixui_icon-chevron {
     z-index: 1000;
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index 4240b874c3..d813a69c4f 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -96,7 +96,8 @@ export function RemixUiVerticalIconsPanel ({
   return (
     <div id="iconsP" className="h-100">
       <div className="remixui_icons" ref={iconPanelRef}>
-        <div className="remixui_default-icons-container remixui_requiredSection">
+        <div className={scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight
+          ? 'remixui_default-icons-container remixui_requiredSection' : 'remixui_requiredSection'}>
           <Home verticalIconPlugin={verticalIconsPlugin} />
           <RequiredSection
             verticalIconsPlugin={verticalIconsPlugin}

From 158d4416c711f305c5a5e97b9a76379bbe1bbca2 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 28 Oct 2021 19:11:45 +0100
Subject: [PATCH 33/84] fixes after rebase to master

---
 .eslintrc.json                                | 35 +++++++++++++++++++
 libs/remix-ui/vertical-icons-panel/.babelrc   |  2 +-
 .../remix-ui-vertical-icons-panel.module.css  |  0
 nx.json                                       |  8 -----
 tsconfig.json                                 |  1 +
 5 files changed, 37 insertions(+), 9 deletions(-)
 create mode 100644 .eslintrc.json
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css

diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000000..06cc47d9a2
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,35 @@
+{
+  "root": true,
+  "ignorePatterns": ["**/*"],
+  "plugins": ["@nrwl/nx"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@nrwl/nx/enforce-module-boundaries": [
+          "error",
+          {
+            "enforceBuildableLibDependency": true,
+            "allow": [],
+            "depConstraints": [
+              {
+                "sourceTag": "*",
+                "onlyDependOnLibsWithTags": ["*"]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["plugin:@nrwl/nx/typescript"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nrwl/nx/javascript"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/libs/remix-ui/vertical-icons-panel/.babelrc b/libs/remix-ui/vertical-icons-panel/.babelrc
index 64a3748691..09d67939cc 100644
--- a/libs/remix-ui/vertical-icons-panel/.babelrc
+++ b/libs/remix-ui/vertical-icons-panel/.babelrc
@@ -1,4 +1,4 @@
 {
   "presets": ["@nrwl/react/babel"],
   "plugins": []
-}
\ No newline at end of file
+}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/nx.json b/nx.json
index fd90c35f84..aa46ad3fc7 100644
--- a/nx.json
+++ b/nx.json
@@ -139,13 +139,5 @@
     "remix-ui-tabs": {
       "tags": []
     }
-  },
-  "targetDependencies": {
-    "build": [
-      {
-        "target": "build",
-        "projects": "dependencies"
-      }
-    ]
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
index 6204014228..e77d4fccdb 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "jsx": "react",
     "rootDir": ".",
     "sourceMap": true,
     "declaration": false,

From 5c86f98e2235f560a112b6c0314c8fa151f11aaa Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 11 Oct 2021 13:43:57 +0100
Subject: [PATCH 34/84] update components and setttings

---
 libs/remix-ui/vertical-icons-panel/.babelrc          |  2 +-
 .../src/lib/components/OtherIcons.tsx                | 12 ++++++++++++
 .../src/lib/remix-ui-vertical-icons-panel.module.css |  0
 3 files changed, 13 insertions(+), 1 deletion(-)
 delete mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css

diff --git a/libs/remix-ui/vertical-icons-panel/.babelrc b/libs/remix-ui/vertical-icons-panel/.babelrc
index 09d67939cc..64a3748691 100644
--- a/libs/remix-ui/vertical-icons-panel/.babelrc
+++ b/libs/remix-ui/vertical-icons-panel/.babelrc
@@ -1,4 +1,4 @@
 {
   "presets": ["@nrwl/react/babel"],
   "plugins": []
-}
+}
\ No newline at end of file
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx
index 377ca2c28a..09e38a567c 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable no-use-before-define */
 /* eslint-disable @typescript-eslint/no-unused-vars */
+<<<<<<< HEAD
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
 import React from 'react'
 import Icon from './Icon'
@@ -48,6 +49,17 @@ function OtherIcons ({ verticalIconsPlugin, itemContextAction, addActive, remove
             />
           ))}
     </div>
+=======
+import React, { ReactNode } from 'react'
+
+interface OtherIconsProps {
+  children: ReactNode
+}
+
+function OtherIcons ({ children }: OtherIconsProps) {
+  return (
+    <div id="otherIcons">{ children }</div>
+>>>>>>> b6322066e (update components and setttings)
   )
 }
 
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css
deleted file mode 100644
index e69de29bb2..0000000000

From 4c2fa102e72f2b97f13d34bd5006c66a3e11045f Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Wed, 13 Oct 2021 11:21:45 +0100
Subject: [PATCH 35/84] add review changes from rystew & LianaHus

---
 .../src/lib/remix-ui-vertical-icons-panel.tsx                 | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index d813a69c4f..821a3f48d9 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -107,6 +107,10 @@ export function RemixUiVerticalIconsPanel ({
             scrollableRef={scrollableRef}
           />
         </div>
+        {scrollableRef.current && scrollableRef.current!.scrollHeight > scrollableRef.current!.clientHeight
+          ? <i className="fa fa-chevron-up remixui_icon-chevron m-3"></i>
+          : null
+        }
         <div
           id="remixuiScrollable"
           className={scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight

From 17153e1a267cd8ff234e574e9f8ac74922898fad Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 14 Oct 2021 23:05:25 +0100
Subject: [PATCH 36/84] changes based on LianaHus comments complete

---
 .../src/lib/remix-ui-vertical-icons-panel.tsx               | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index 821a3f48d9..afa7710c89 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -3,6 +3,7 @@
 import React, {
   Fragment,
   useEffect,
+  useReducer,
   useRef
 } from 'react'
 
@@ -23,6 +24,7 @@ export function RemixUiVerticalIconsPanel ({
 }: RemixUiVerticalIconsPanelProps) {
   const scrollableRef = useRef<any>()
   const iconPanelRef = useRef<any>()
+  const udappPanelRef = useRef<any>()
 
   function onThemeChanged (themeType: any) {
     const invert = themeType === 'dark' ? 1 : 0
@@ -107,10 +109,6 @@ export function RemixUiVerticalIconsPanel ({
             scrollableRef={scrollableRef}
           />
         </div>
-        {scrollableRef.current && scrollableRef.current!.scrollHeight > scrollableRef.current!.clientHeight
-          ? <i className="fa fa-chevron-up remixui_icon-chevron m-3"></i>
-          : null
-        }
         <div
           id="remixuiScrollable"
           className={scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight

From 3a51c5a719b9b7a3b266915940ce8e521844b6d8 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Fri, 15 Oct 2021 15:38:52 +0100
Subject: [PATCH 37/84] fix e2e walkthrough test failures

---
 .../src/lib/remix-ui-vertical-icons-panel.tsx                | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index afa7710c89..2469e7384e 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -4,7 +4,8 @@ import React, {
   Fragment,
   useEffect,
   useReducer,
-  useRef
+  useRef,
+  useState
 } from 'react'
 
 import './remix-ui-vertical-icons-panel.css'
@@ -24,7 +25,7 @@ export function RemixUiVerticalIconsPanel ({
 }: RemixUiVerticalIconsPanelProps) {
   const scrollableRef = useRef<any>()
   const iconPanelRef = useRef<any>()
-  const udappPanelRef = useRef<any>()
+  // const [first] = useState(localStorage.getItem('firstTime'))
 
   function onThemeChanged (themeType: any) {
     const invert = themeType === 'dark' ? 1 : 0

From 5a99d1a72f6f3b4534502abebb29b0e8d21ec51e Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 26 Oct 2021 02:02:29 +0100
Subject: [PATCH 38/84] address review comments from @ioedeveloper

---
 .eslintrc.json                                | 35 -------------------
 .../src/lib/components/Icon.tsx               |  3 +-
 .../src/lib/components/OtherIcons.tsx         | 12 -------
 .../src/lib/remix-ui-vertical-icons-panel.tsx |  7 ++--
 4 files changed, 4 insertions(+), 53 deletions(-)
 delete mode 100644 .eslintrc.json

diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100644
index 06cc47d9a2..0000000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
-  "root": true,
-  "ignorePatterns": ["**/*"],
-  "plugins": ["@nrwl/nx"],
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {
-        "@nrwl/nx/enforce-module-boundaries": [
-          "error",
-          {
-            "enforceBuildableLibDependency": true,
-            "allow": [],
-            "depConstraints": [
-              {
-                "sourceTag": "*",
-                "onlyDependOnLibsWithTags": ["*"]
-              }
-            ]
-          }
-        ]
-      }
-    },
-    {
-      "files": ["*.ts", "*.tsx"],
-      "extends": ["plugin:@nrwl/nx/typescript"],
-      "rules": {}
-    },
-    {
-      "files": ["*.js", "*.jsx"],
-      "extends": ["plugin:@nrwl/nx/javascript"],
-      "rules": {}
-    }
-  ]
-}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
index f47946fd36..5bc02b636f 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
@@ -3,8 +3,9 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import VerticalIconsContextMenu from '../vertical-icons-context-menu'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import React, { Fragment, SyntheticEvent, useRef, useState } from 'react'
+import React, { Fragment, SyntheticEvent, useEffect, useRef, useState } from 'react'
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
+// import * as helper from '../../../../../../apps/remix-ide/src/lib/helper'
 
   interface IconProps {
     verticalIconPlugin: VerticalIcons
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx
index 09e38a567c..377ca2c28a 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable no-use-before-define */
 /* eslint-disable @typescript-eslint/no-unused-vars */
-<<<<<<< HEAD
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
 import React from 'react'
 import Icon from './Icon'
@@ -49,17 +48,6 @@ function OtherIcons ({ verticalIconsPlugin, itemContextAction, addActive, remove
             />
           ))}
     </div>
-=======
-import React, { ReactNode } from 'react'
-
-interface OtherIconsProps {
-  children: ReactNode
-}
-
-function OtherIcons ({ children }: OtherIconsProps) {
-  return (
-    <div id="otherIcons">{ children }</div>
->>>>>>> b6322066e (update components and setttings)
   )
 }
 
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index 2469e7384e..7762ef69f7 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -1,11 +1,9 @@
 /* eslint-disable no-use-before-define */
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, {
+import {
   Fragment,
   useEffect,
-  useReducer,
-  useRef,
-  useState
+  useRef
 } from 'react'
 
 import './remix-ui-vertical-icons-panel.css'
@@ -25,7 +23,6 @@ export function RemixUiVerticalIconsPanel ({
 }: RemixUiVerticalIconsPanelProps) {
   const scrollableRef = useRef<any>()
   const iconPanelRef = useRef<any>()
-  // const [first] = useState(localStorage.getItem('firstTime'))
 
   function onThemeChanged (themeType: any) {
     const invert = themeType === 'dark' ? 1 : 0

From c66948a8ea3504c11bc661d252193565b0abf7c0 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 26 Oct 2021 02:56:00 +0100
Subject: [PATCH 39/84] fix missing imports

---
 libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx | 3 +--
 .../src/lib/remix-ui-vertical-icons-panel.tsx                  | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
index 5bc02b636f..f47946fd36 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
@@ -3,9 +3,8 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import VerticalIconsContextMenu from '../vertical-icons-context-menu'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import React, { Fragment, SyntheticEvent, useEffect, useRef, useState } from 'react'
+import React, { Fragment, SyntheticEvent, useRef, useState } from 'react'
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
-// import * as helper from '../../../../../../apps/remix-ide/src/lib/helper'
 
   interface IconProps {
     verticalIconPlugin: VerticalIcons
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index 7762ef69f7..d813a69c4f 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-use-before-define */
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import {
+import React, {
   Fragment,
   useEffect,
   useRef

From ca638ec31b6200782301ad3183822139b5089253 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 26 Oct 2021 13:42:25 +0100
Subject: [PATCH 40/84] workspace.json fix

---
 workspace.json | 84 +++++++++++++++++++++++++-------------------------
 1 file changed, 42 insertions(+), 42 deletions(-)

diff --git a/workspace.json b/workspace.json
index ee59c73897..50dcf9084b 100644
--- a/workspace.json
+++ b/workspace.json
@@ -766,8 +766,8 @@
       }
     },
     "remix-ui-plugin-manager": {
-     "root": "libs/remix-ui/plugin-manager",
-      "sourceRoot": "libs/remix-ui/plugin-manager/src", 
+      "root": "libs/remix-ui/plugin-manager",
+      "sourceRoot": "libs/remix-ui/plugin-manager/src",
       "projectType": "library",
       "schematics": {},
       "architect": {
@@ -1126,49 +1126,34 @@
           "linter": "eslint"
         }
       }
-    }
-  },
-  "cli": {
-    "defaultCollection": "@nrwl/react"
-  },
-  "schematics": {
-    "@nrwl/workspace": {
-      "library": {
-        "linter": "eslint"
-      }
     },
-    "@nrwl/cypress": {
-      "cypress-project": {
-        "linter": "eslint"
-      }
+    "cli": {
+      "defaultCollection": "@nrwl/react"
     },
-    "@nrwl/react": {
-      "application": {
-        "style": "css",
-        "linter": "eslint",
-        "babel": true
+    "schematics": {
+      "@nrwl/workspace": {
+        "library": {
+          "linter": "eslint"
+        }
       },
-      "component": {
-        "style": "css"
+      "@nrwl/cypress": {
+        "cypress-project": {
+          "linter": "eslint"
+        }
       },
-      "library": {
-        "style": "css",
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/next": {
-      "application": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/web": {
-      "application": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/node": {
-      "application": {
-        "linter": "eslint"
+      "@nrwl/react": {
+        "application": {
+          "style": "css",
+          "linter": "eslint",
+          "babel": true
+        },
+        "component": {
+          "style": "css"
+        },
+        "library": {
+          "style": "css",
+          "linter": "eslint"
+        }
       },
       "library": {
         "linter": "eslint"
@@ -1180,7 +1165,22 @@
       }
     },
     "@nrwl/nest": {
-      "application": {
+      "application",
+      "remix-ui-vertical-icons-panel": {
+        "root": "libs/remix-ui/vertical-icons-panel",
+        "sourceRoot": "libs/remix-ui/vertical-icons-panel/src",
+        "projectType": "library",
+        "architect": {
+          "lint": {
+            "builder": "@nrwl/linter:eslint",
+            "options": {
+              "lintFilePatterns": [
+                "libs/remix-ui/vertical-icons-panel/**/*.{ts,tsx,js,jsx}"
+              ]
+            }
+          }
+        }
+      }: {
         "linter": "eslint"
       }
     },

From 39fce3960b3a03bf275eb532a2f37fe57968da7c Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 26 Oct 2021 14:17:57 +0100
Subject: [PATCH 41/84] misplaced comma in workspace.json

---
 workspace.json | 33 +++++++++++++--------------------
 1 file changed, 13 insertions(+), 20 deletions(-)

diff --git a/workspace.json b/workspace.json
index 50dcf9084b..abbec5b42e 100644
--- a/workspace.json
+++ b/workspace.json
@@ -766,8 +766,8 @@
       }
     },
     "remix-ui-plugin-manager": {
-      "root": "libs/remix-ui/plugin-manager",
-      "sourceRoot": "libs/remix-ui/plugin-manager/src",
+     "root": "libs/remix-ui/plugin-manager",
+      "sourceRoot": "libs/remix-ui/plugin-manager/src", 
       "projectType": "library",
       "schematics": {},
       "architect": {
@@ -1126,24 +1126,17 @@
           "linter": "eslint"
         }
       }
-    },
-    "cli": {
-      "defaultCollection": "@nrwl/react"
-    },
-    "schematics": {
-      "@nrwl/workspace": {
-        "library": {
-          "linter": "eslint"
-        }
-      },
-      "@nrwl/cypress": {
-        "cypress-project": {
-          "linter": "eslint"
-        }
-      },
-      "@nrwl/react": {
-        "application": {
-          "style": "css",
+    }
+  },
+  "remix-ui-editor": {
+    "root": "libs/remix-ui/editor",
+    "sourceRoot": "libs/remix-ui/editor/src",
+    "projectType": "library",
+    "schematics": {},
+    "architect": {
+      "lint": {
+        "builder": "@nrwl/linter:lint",
+        "options": {
           "linter": "eslint",
           "babel": true
         },

From 9ec01eb2ae97a3e83f9d58428720856f272fcac2 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 28 Oct 2021 18:56:02 +0100
Subject: [PATCH 42/84] add more fixes to review comments

---
 .../src/lib/components/Settings.tsx                   | 11 +++++++++--
 .../src/lib/remix-ui-vertical-icons-panel.tsx         |  5 +++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
index 1a4e706abc..81f2d88279 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-use-before-define */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { Chevron } from './Chevron'
 import Icon from './Icon'
 
@@ -11,9 +11,16 @@ interface SettingsProps {
   addActive: (name: string) => void
   removeActive: () => void
   scrollableRef: React.MutableRefObject<any>
+  onThemeChanged: (themeType: any) => void
 }
 
-function Settings ({ scrollableRef, verticalIconsPlugin, itemContextAction, addActive, removeActive }: SettingsProps) {
+function Settings ({ scrollableRef, verticalIconsPlugin, itemContextAction, addActive, removeActive, onThemeChanged }: SettingsProps) {
+  useEffect(() => {
+    const themeModule = verticalIconsPlugin.registry.get('themeModule').api
+    themeModule.events.on('themeChanged', (theme: any) => {
+      onThemeChanged(theme.quality)
+    })
+  }, [onThemeChanged])
   return (
     <div id="settingsIcons" data-id="vertialIconsSettingsIcons">
       <Chevron
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index d813a69c4f..6b78d40205 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -96,7 +96,7 @@ export function RemixUiVerticalIconsPanel ({
   return (
     <div id="iconsP" className="h-100">
       <div className="remixui_icons" ref={iconPanelRef}>
-        <div className={scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight
+        <div className={scrollableRef.current && scrollableRef.current.scrollHeight > 500
           ? 'remixui_default-icons-container remixui_requiredSection' : 'remixui_requiredSection'}>
           <Home verticalIconPlugin={verticalIconsPlugin} />
           <RequiredSection
@@ -109,7 +109,7 @@ export function RemixUiVerticalIconsPanel ({
         </div>
         <div
           id="remixuiScrollable"
-          className={scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight
+          className={scrollableRef.current && scrollableRef.current.scrollHeight > 500
             ? 'remixui_default-icons-container remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'
             : 'remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'}
           ref={scrollableRef}
@@ -130,6 +130,7 @@ export function RemixUiVerticalIconsPanel ({
                 removeActive={removeActive}
                 itemContextAction={itemContextAction}
                 scrollableRef={scrollableRef}
+                onThemeChanged={onThemeChanged}
               />
             </Fragment>
           ) : null}

From 017cb43d0c4b1a0c40754d3f260118bf688bf5b3 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 28 Oct 2021 19:48:13 +0100
Subject: [PATCH 43/84] fix workspace.json after rebase

---
 workspace.json | 77 +++++++++++++++++++++++++++-----------------------
 1 file changed, 42 insertions(+), 35 deletions(-)

diff --git a/workspace.json b/workspace.json
index abbec5b42e..ee59c73897 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1128,25 +1128,47 @@
       }
     }
   },
-  "remix-ui-editor": {
-    "root": "libs/remix-ui/editor",
-    "sourceRoot": "libs/remix-ui/editor/src",
-    "projectType": "library",
-    "schematics": {},
-    "architect": {
-      "lint": {
-        "builder": "@nrwl/linter:lint",
-        "options": {
-          "linter": "eslint",
-          "babel": true
-        },
-        "component": {
-          "style": "css"
-        },
-        "library": {
-          "style": "css",
-          "linter": "eslint"
-        }
+  "cli": {
+    "defaultCollection": "@nrwl/react"
+  },
+  "schematics": {
+    "@nrwl/workspace": {
+      "library": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/cypress": {
+      "cypress-project": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/react": {
+      "application": {
+        "style": "css",
+        "linter": "eslint",
+        "babel": true
+      },
+      "component": {
+        "style": "css"
+      },
+      "library": {
+        "style": "css",
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/next": {
+      "application": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/web": {
+      "application": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/node": {
+      "application": {
+        "linter": "eslint"
       },
       "library": {
         "linter": "eslint"
@@ -1158,22 +1180,7 @@
       }
     },
     "@nrwl/nest": {
-      "application",
-      "remix-ui-vertical-icons-panel": {
-        "root": "libs/remix-ui/vertical-icons-panel",
-        "sourceRoot": "libs/remix-ui/vertical-icons-panel/src",
-        "projectType": "library",
-        "architect": {
-          "lint": {
-            "builder": "@nrwl/linter:eslint",
-            "options": {
-              "lintFilePatterns": [
-                "libs/remix-ui/vertical-icons-panel/**/*.{ts,tsx,js,jsx}"
-              ]
-            }
-          }
-        }
-      }: {
+      "application": {
         "linter": "eslint"
       }
     },

From addc3d71eade14b918e7043c78e94226ba95eb89 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 11 Oct 2021 11:46:09 +0100
Subject: [PATCH 44/84] create vertical icons panel react lib

---
 .eslintrc.json                                | 35 +++++++
 libs/remix-ui/vertical-icons-panel/.babelrc   |  2 +-
 .../remix-ui-vertical-icons-panel.module.css  |  0
 workspace.json                                | 93 ++++++++++++++++---
 4 files changed, 116 insertions(+), 14 deletions(-)
 create mode 100644 .eslintrc.json
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css

diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000000..06cc47d9a2
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,35 @@
+{
+  "root": true,
+  "ignorePatterns": ["**/*"],
+  "plugins": ["@nrwl/nx"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@nrwl/nx/enforce-module-boundaries": [
+          "error",
+          {
+            "enforceBuildableLibDependency": true,
+            "allow": [],
+            "depConstraints": [
+              {
+                "sourceTag": "*",
+                "onlyDependOnLibsWithTags": ["*"]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["plugin:@nrwl/nx/typescript"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nrwl/nx/javascript"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/libs/remix-ui/vertical-icons-panel/.babelrc b/libs/remix-ui/vertical-icons-panel/.babelrc
index 64a3748691..09d67939cc 100644
--- a/libs/remix-ui/vertical-icons-panel/.babelrc
+++ b/libs/remix-ui/vertical-icons-panel/.babelrc
@@ -1,4 +1,4 @@
 {
   "presets": ["@nrwl/react/babel"],
   "plugins": []
-}
\ No newline at end of file
+}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/workspace.json b/workspace.json
index ee59c73897..1f69558bc5 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1,5 +1,71 @@
 {
   "version": 1,
+  "cli": {
+    "defaultCollection": "@nrwl/react"
+  },
+  "defaultProject": "remix-ide",
+  "schematics": {
+    "@nrwl/workspace": {
+      "library": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/cypress": {
+      "cypress-project": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/react": {
+      "application": {
+        "style": "css",
+        "linter": "eslint",
+        "babel": true
+      },
+      "component": {
+        "style": "css"
+      },
+      "library": {
+        "style": "css",
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/next": {
+      "application": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/web": {
+      "application": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/node": {
+      "application": {
+        "linter": "eslint"
+      },
+      "library": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/nx-plugin": {
+      "plugin": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/nest": {
+      "application": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/express": {
+      "application": {
+        "linter": "eslint"
+      },
+      "library": {
+        "linter": "eslint"
+      }
+    }
+  },
   "projects": {
     "remix-ide": {
       "root": "apps/remix-ide",
@@ -1179,19 +1245,20 @@
         "linter": "eslint"
       }
     },
-    "@nrwl/nest": {
-      "application": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/express": {
-      "application": {
-        "linter": "eslint"
-      },
-      "library": {
-        "linter": "eslint"
+    "remix-ui-vertical-icons-panel": {
+      "root": "libs/remix-ui/vertical-icons-panel",
+      "sourceRoot": "libs/remix-ui/vertical-icons-panel/src",
+      "projectType": "library",
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": [
+              "libs/remix-ui/vertical-icons-panel/**/*.{ts,tsx,js,jsx}"
+            ]
+          }
+        }
       }
     }
-  },
-  "defaultProject": "remix-ide"
+  }
 }

From 6d706d416a54a64294145163bee3814233d04286 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 11 Oct 2021 13:43:57 +0100
Subject: [PATCH 45/84] update components and setttings

---
 libs/remix-ui/vertical-icons-panel/.babelrc                     | 2 +-
 .../src/lib/remix-ui-vertical-icons-panel.module.css            | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 delete mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css

diff --git a/libs/remix-ui/vertical-icons-panel/.babelrc b/libs/remix-ui/vertical-icons-panel/.babelrc
index 09d67939cc..64a3748691 100644
--- a/libs/remix-ui/vertical-icons-panel/.babelrc
+++ b/libs/remix-ui/vertical-icons-panel/.babelrc
@@ -1,4 +1,4 @@
 {
   "presets": ["@nrwl/react/babel"],
   "plugins": []
-}
+}
\ No newline at end of file
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css
deleted file mode 100644
index e69de29bb2..0000000000

From ecef9394327b44dd9dbcc133026cb450a4f8bfef Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Mon, 11 Oct 2021 15:43:23 +0200
Subject: [PATCH 46/84] add deps nx.json

---
 nx.json | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/nx.json b/nx.json
index aa46ad3fc7..fd90c35f84 100644
--- a/nx.json
+++ b/nx.json
@@ -139,5 +139,13 @@
     "remix-ui-tabs": {
       "tags": []
     }
+  },
+  "targetDependencies": {
+    "build": [
+      {
+        "target": "build",
+        "projects": "dependencies"
+      }
+    ]
   }
 }

From e379b4824f0a05404d912e7af15e9ae4244f6849 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Wed, 13 Oct 2021 11:21:45 +0100
Subject: [PATCH 47/84] add review changes from rystew & LianaHus

---
 .../src/lib/remix-ui-vertical-icons-panel.tsx                 | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index 6b78d40205..7cbb790cc3 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -107,6 +107,10 @@ export function RemixUiVerticalIconsPanel ({
             scrollableRef={scrollableRef}
           />
         </div>
+        {scrollableRef.current && scrollableRef.current!.scrollHeight > scrollableRef.current!.clientHeight
+          ? <i className="fa fa-chevron-up remixui_icon-chevron m-3"></i>
+          : null
+        }
         <div
           id="remixuiScrollable"
           className={scrollableRef.current && scrollableRef.current.scrollHeight > 500

From f09d0fd8e418289df8df3f4c19d86d37a8adfb26 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 14 Oct 2021 23:05:25 +0100
Subject: [PATCH 48/84] changes based on LianaHus comments complete

---
 .../src/lib/remix-ui-vertical-icons-panel.tsx               | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index 7cbb790cc3..9ea772cfa6 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -3,6 +3,7 @@
 import React, {
   Fragment,
   useEffect,
+  useReducer,
   useRef
 } from 'react'
 
@@ -23,6 +24,7 @@ export function RemixUiVerticalIconsPanel ({
 }: RemixUiVerticalIconsPanelProps) {
   const scrollableRef = useRef<any>()
   const iconPanelRef = useRef<any>()
+  const udappPanelRef = useRef<any>()
 
   function onThemeChanged (themeType: any) {
     const invert = themeType === 'dark' ? 1 : 0
@@ -107,10 +109,6 @@ export function RemixUiVerticalIconsPanel ({
             scrollableRef={scrollableRef}
           />
         </div>
-        {scrollableRef.current && scrollableRef.current!.scrollHeight > scrollableRef.current!.clientHeight
-          ? <i className="fa fa-chevron-up remixui_icon-chevron m-3"></i>
-          : null
-        }
         <div
           id="remixuiScrollable"
           className={scrollableRef.current && scrollableRef.current.scrollHeight > 500

From 651d54c620664d8e58ee680dfb37464d2221107b Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Fri, 15 Oct 2021 15:38:52 +0100
Subject: [PATCH 49/84] fix e2e walkthrough test failures

---
 .../src/lib/remix-ui-vertical-icons-panel.tsx                | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index 9ea772cfa6..746472b194 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -4,7 +4,8 @@ import React, {
   Fragment,
   useEffect,
   useReducer,
-  useRef
+  useRef,
+  useState
 } from 'react'
 
 import './remix-ui-vertical-icons-panel.css'
@@ -24,7 +25,7 @@ export function RemixUiVerticalIconsPanel ({
 }: RemixUiVerticalIconsPanelProps) {
   const scrollableRef = useRef<any>()
   const iconPanelRef = useRef<any>()
-  const udappPanelRef = useRef<any>()
+  // const [first] = useState(localStorage.getItem('firstTime'))
 
   function onThemeChanged (themeType: any) {
     const invert = themeType === 'dark' ? 1 : 0

From 38f29e25a7ff5ab4d68d82cc47e6bcc3e541f7dc Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 26 Oct 2021 02:02:29 +0100
Subject: [PATCH 50/84] address review comments from @ioedeveloper

---
 .eslintrc.json                                | 35 -------------------
 .../src/lib/components/Icon.tsx               |  3 +-
 .../src/lib/remix-ui-vertical-icons-panel.tsx |  7 ++--
 3 files changed, 4 insertions(+), 41 deletions(-)
 delete mode 100644 .eslintrc.json

diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100644
index 06cc47d9a2..0000000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
-  "root": true,
-  "ignorePatterns": ["**/*"],
-  "plugins": ["@nrwl/nx"],
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {
-        "@nrwl/nx/enforce-module-boundaries": [
-          "error",
-          {
-            "enforceBuildableLibDependency": true,
-            "allow": [],
-            "depConstraints": [
-              {
-                "sourceTag": "*",
-                "onlyDependOnLibsWithTags": ["*"]
-              }
-            ]
-          }
-        ]
-      }
-    },
-    {
-      "files": ["*.ts", "*.tsx"],
-      "extends": ["plugin:@nrwl/nx/typescript"],
-      "rules": {}
-    },
-    {
-      "files": ["*.js", "*.jsx"],
-      "extends": ["plugin:@nrwl/nx/javascript"],
-      "rules": {}
-    }
-  ]
-}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
index f47946fd36..5bc02b636f 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
@@ -3,8 +3,9 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import VerticalIconsContextMenu from '../vertical-icons-context-menu'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import React, { Fragment, SyntheticEvent, useRef, useState } from 'react'
+import React, { Fragment, SyntheticEvent, useEffect, useRef, useState } from 'react'
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
+// import * as helper from '../../../../../../apps/remix-ide/src/lib/helper'
 
   interface IconProps {
     verticalIconPlugin: VerticalIcons
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index 746472b194..0080d3e230 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -1,11 +1,9 @@
 /* eslint-disable no-use-before-define */
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, {
+import {
   Fragment,
   useEffect,
-  useReducer,
-  useRef,
-  useState
+  useRef
 } from 'react'
 
 import './remix-ui-vertical-icons-panel.css'
@@ -25,7 +23,6 @@ export function RemixUiVerticalIconsPanel ({
 }: RemixUiVerticalIconsPanelProps) {
   const scrollableRef = useRef<any>()
   const iconPanelRef = useRef<any>()
-  // const [first] = useState(localStorage.getItem('firstTime'))
 
   function onThemeChanged (themeType: any) {
     const invert = themeType === 'dark' ? 1 : 0

From 462e134cf1c0f32034c6dab9e2fe5c91d75bb497 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 26 Oct 2021 02:56:00 +0100
Subject: [PATCH 51/84] fix missing imports

---
 libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx | 3 +--
 .../src/lib/remix-ui-vertical-icons-panel.tsx                  | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
index 5bc02b636f..f47946fd36 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
@@ -3,9 +3,8 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import VerticalIconsContextMenu from '../vertical-icons-context-menu'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import React, { Fragment, SyntheticEvent, useEffect, useRef, useState } from 'react'
+import React, { Fragment, SyntheticEvent, useRef, useState } from 'react'
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
-// import * as helper from '../../../../../../apps/remix-ide/src/lib/helper'
 
   interface IconProps {
     verticalIconPlugin: VerticalIcons
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index 0080d3e230..6b78d40205 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-use-before-define */
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import {
+import React, {
   Fragment,
   useEffect,
   useRef

From 6f118111e1af43453a7437cacc1a3198cee37288 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 26 Oct 2021 13:29:46 +0100
Subject: [PATCH 52/84] fix conflict in workspace.json

---
 workspace.json | 95 ++++++++------------------------------------------
 1 file changed, 14 insertions(+), 81 deletions(-)

diff --git a/workspace.json b/workspace.json
index 1f69558bc5..59b9264306 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1,71 +1,5 @@
 {
   "version": 1,
-  "cli": {
-    "defaultCollection": "@nrwl/react"
-  },
-  "defaultProject": "remix-ide",
-  "schematics": {
-    "@nrwl/workspace": {
-      "library": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/cypress": {
-      "cypress-project": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/react": {
-      "application": {
-        "style": "css",
-        "linter": "eslint",
-        "babel": true
-      },
-      "component": {
-        "style": "css"
-      },
-      "library": {
-        "style": "css",
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/next": {
-      "application": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/web": {
-      "application": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/node": {
-      "application": {
-        "linter": "eslint"
-      },
-      "library": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/nx-plugin": {
-      "plugin": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/nest": {
-      "application": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/express": {
-      "application": {
-        "linter": "eslint"
-      },
-      "library": {
-        "linter": "eslint"
-      }
-    }
-  },
   "projects": {
     "remix-ide": {
       "root": "apps/remix-ide",
@@ -1245,20 +1179,19 @@
         "linter": "eslint"
       }
     },
-    "remix-ui-vertical-icons-panel": {
-      "root": "libs/remix-ui/vertical-icons-panel",
-      "sourceRoot": "libs/remix-ui/vertical-icons-panel/src",
-      "projectType": "library",
-      "architect": {
-        "lint": {
-          "builder": "@nrwl/linter:eslint",
-          "options": {
-            "lintFilePatterns": [
-              "libs/remix-ui/vertical-icons-panel/**/*.{ts,tsx,js,jsx}"
-            ]
-          }
-        }
+    "@nrwl/nest": {
+      "application": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/express": {
+      "application": {
+        "linter": "eslint"
+      },
+      "library": {
+        "linter": "eslint"
       }
     }
-  }
-}
+  },
+  "defaultProject": "remix-ide"
+}
\ No newline at end of file

From 9ae7735112756fca11c076c682bce5aba8842d2f Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 11 Oct 2021 11:46:09 +0100
Subject: [PATCH 53/84] create vertical icons panel react lib

---
 .eslintrc.json                                |  35 ++++++
 libs/remix-ui/vertical-icons-panel/.babelrc   |   2 +-
 .../remix-ui-vertical-icons-panel.module.css  |   0
 nx.json                                       |   8 --
 workspace.json                                | 103 ++++++++++++++++--
 5 files changed, 129 insertions(+), 19 deletions(-)
 create mode 100644 .eslintrc.json
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css

diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000000..06cc47d9a2
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,35 @@
+{
+  "root": true,
+  "ignorePatterns": ["**/*"],
+  "plugins": ["@nrwl/nx"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@nrwl/nx/enforce-module-boundaries": [
+          "error",
+          {
+            "enforceBuildableLibDependency": true,
+            "allow": [],
+            "depConstraints": [
+              {
+                "sourceTag": "*",
+                "onlyDependOnLibsWithTags": ["*"]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["plugin:@nrwl/nx/typescript"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nrwl/nx/javascript"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/libs/remix-ui/vertical-icons-panel/.babelrc b/libs/remix-ui/vertical-icons-panel/.babelrc
index 64a3748691..09d67939cc 100644
--- a/libs/remix-ui/vertical-icons-panel/.babelrc
+++ b/libs/remix-ui/vertical-icons-panel/.babelrc
@@ -1,4 +1,4 @@
 {
   "presets": ["@nrwl/react/babel"],
   "plugins": []
-}
\ No newline at end of file
+}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/nx.json b/nx.json
index fd90c35f84..aa46ad3fc7 100644
--- a/nx.json
+++ b/nx.json
@@ -139,13 +139,5 @@
     "remix-ui-tabs": {
       "tags": []
     }
-  },
-  "targetDependencies": {
-    "build": [
-      {
-        "target": "build",
-        "projects": "dependencies"
-      }
-    ]
   }
 }
diff --git a/workspace.json b/workspace.json
index 59b9264306..c50f469aab 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1,5 +1,71 @@
 {
   "version": 1,
+  "cli": {
+    "defaultCollection": "@nrwl/react"
+  },
+  "defaultProject": "remix-ide",
+  "schematics": {
+    "@nrwl/workspace": {
+      "library": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/cypress": {
+      "cypress-project": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/react": {
+      "application": {
+        "style": "css",
+        "linter": "eslint",
+        "babel": true
+      },
+      "component": {
+        "style": "css"
+      },
+      "library": {
+        "style": "css",
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/next": {
+      "application": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/web": {
+      "application": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/node": {
+      "application": {
+        "linter": "eslint"
+      },
+      "library": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/nx-plugin": {
+      "plugin": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/nest": {
+      "application": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/express": {
+      "application": {
+        "linter": "eslint"
+      },
+      "library": {
+        "linter": "eslint"
+      }
+    }
+  },
   "projects": {
     "remix-ide": {
       "root": "apps/remix-ide",
@@ -1179,19 +1245,36 @@
         "linter": "eslint"
       }
     },
-    "@nrwl/nest": {
-      "application": {
-        "linter": "eslint"
+    "@remix-ui-verticaliconspanel": {
+      "root": "libs/@remix-ui/verticaliconspanel",
+      "sourceRoot": "libs/@remix-ui/verticaliconspanel/src",
+      "projectType": "library",
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": [
+              "libs/@remix-ui/verticaliconspanel/**/*.{ts,tsx,js,jsx}"
+            ]
+          }
+        }
       }
     },
-    "@nrwl/express": {
-      "application": {
-        "linter": "eslint"
-      },
-      "library": {
-        "linter": "eslint"
+    "remix-ui-vertical-icons-panel": {
+      "root": "libs/remix-ui/vertical-icons-panel",
+      "sourceRoot": "libs/remix-ui/vertical-icons-panel/src",
+      "projectType": "library",
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": [
+              "libs/remix-ui/vertical-icons-panel/**/*.{ts,tsx,js,jsx}"
+            ]
+          }
+        }
       }
     }
   },
   "defaultProject": "remix-ide"
-}
\ No newline at end of file
+}

From 9f7c462d656140d1d2fa9b0c893410927f3fe2bd Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 11 Oct 2021 13:43:57 +0100
Subject: [PATCH 54/84] update components and setttings

---
 libs/remix-ui/vertical-icons-panel/.babelrc                     | 2 +-
 .../src/lib/remix-ui-vertical-icons-panel.module.css            | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 delete mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css

diff --git a/libs/remix-ui/vertical-icons-panel/.babelrc b/libs/remix-ui/vertical-icons-panel/.babelrc
index 09d67939cc..64a3748691 100644
--- a/libs/remix-ui/vertical-icons-panel/.babelrc
+++ b/libs/remix-ui/vertical-icons-panel/.babelrc
@@ -1,4 +1,4 @@
 {
   "presets": ["@nrwl/react/babel"],
   "plugins": []
-}
+}
\ No newline at end of file
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.module.css
deleted file mode 100644
index e69de29bb2..0000000000

From 36d67d9429e0a25d4ecd370bf086fba5983fee01 Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Mon, 11 Oct 2021 15:43:23 +0200
Subject: [PATCH 55/84] add deps nx.json

---
 nx.json | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/nx.json b/nx.json
index aa46ad3fc7..fd90c35f84 100644
--- a/nx.json
+++ b/nx.json
@@ -139,5 +139,13 @@
     "remix-ui-tabs": {
       "tags": []
     }
+  },
+  "targetDependencies": {
+    "build": [
+      {
+        "target": "build",
+        "projects": "dependencies"
+      }
+    ]
   }
 }

From e6b4eaa474615d0f256044ad55090460d58ba48c Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Wed, 13 Oct 2021 11:21:45 +0100
Subject: [PATCH 56/84] add review changes from rystew & LianaHus

---
 .../src/lib/remix-ui-vertical-icons-panel.tsx                 | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index 6b78d40205..7cbb790cc3 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -107,6 +107,10 @@ export function RemixUiVerticalIconsPanel ({
             scrollableRef={scrollableRef}
           />
         </div>
+        {scrollableRef.current && scrollableRef.current!.scrollHeight > scrollableRef.current!.clientHeight
+          ? <i className="fa fa-chevron-up remixui_icon-chevron m-3"></i>
+          : null
+        }
         <div
           id="remixuiScrollable"
           className={scrollableRef.current && scrollableRef.current.scrollHeight > 500

From 150993c1d2aae7adf490d589805baf69049df96d Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 14 Oct 2021 23:05:25 +0100
Subject: [PATCH 57/84] changes based on LianaHus comments complete

---
 apps/remix-ide/src/walkthroughService.js                    | 5 +++++
 .../src/lib/remix-ui-vertical-icons-panel.tsx               | 6 ++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/apps/remix-ide/src/walkthroughService.js b/apps/remix-ide/src/walkthroughService.js
index 2e5e9a8305..c531562633 100644
--- a/apps/remix-ide/src/walkthroughService.js
+++ b/apps/remix-ide/src/walkthroughService.js
@@ -6,8 +6,13 @@ export class WalkthroughService {
   }
 
   start (params) {
+<<<<<<< HEAD
     document.addEventListener('doWalkThrough', (e) => {
       if (!localStorage.getItem('hadTour_initial')) {
+=======
+    if (!localStorage.getItem('hadTour_initial')) {
+      document.addEventListener('doWalkThrough', (e) => {
+>>>>>>> e0fcb6bcd (changes based on LianaHus comments complete)
         introJs().setOptions({
           steps: [{
             title: 'Welcome to Remix IDE',
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index 7cbb790cc3..9ea772cfa6 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -3,6 +3,7 @@
 import React, {
   Fragment,
   useEffect,
+  useReducer,
   useRef
 } from 'react'
 
@@ -23,6 +24,7 @@ export function RemixUiVerticalIconsPanel ({
 }: RemixUiVerticalIconsPanelProps) {
   const scrollableRef = useRef<any>()
   const iconPanelRef = useRef<any>()
+  const udappPanelRef = useRef<any>()
 
   function onThemeChanged (themeType: any) {
     const invert = themeType === 'dark' ? 1 : 0
@@ -107,10 +109,6 @@ export function RemixUiVerticalIconsPanel ({
             scrollableRef={scrollableRef}
           />
         </div>
-        {scrollableRef.current && scrollableRef.current!.scrollHeight > scrollableRef.current!.clientHeight
-          ? <i className="fa fa-chevron-up remixui_icon-chevron m-3"></i>
-          : null
-        }
         <div
           id="remixuiScrollable"
           className={scrollableRef.current && scrollableRef.current.scrollHeight > 500

From d172df5f5a983c387998dec66439723ae14b1f9c Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Fri, 15 Oct 2021 15:38:52 +0100
Subject: [PATCH 58/84] fix e2e walkthrough test failures

---
 apps/remix-ide/src/walkthroughService.js                     | 5 -----
 .../src/lib/remix-ui-vertical-icons-panel.tsx                | 5 +++--
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/apps/remix-ide/src/walkthroughService.js b/apps/remix-ide/src/walkthroughService.js
index c531562633..2e5e9a8305 100644
--- a/apps/remix-ide/src/walkthroughService.js
+++ b/apps/remix-ide/src/walkthroughService.js
@@ -6,13 +6,8 @@ export class WalkthroughService {
   }
 
   start (params) {
-<<<<<<< HEAD
     document.addEventListener('doWalkThrough', (e) => {
       if (!localStorage.getItem('hadTour_initial')) {
-=======
-    if (!localStorage.getItem('hadTour_initial')) {
-      document.addEventListener('doWalkThrough', (e) => {
->>>>>>> e0fcb6bcd (changes based on LianaHus comments complete)
         introJs().setOptions({
           steps: [{
             title: 'Welcome to Remix IDE',
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index 9ea772cfa6..746472b194 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -4,7 +4,8 @@ import React, {
   Fragment,
   useEffect,
   useReducer,
-  useRef
+  useRef,
+  useState
 } from 'react'
 
 import './remix-ui-vertical-icons-panel.css'
@@ -24,7 +25,7 @@ export function RemixUiVerticalIconsPanel ({
 }: RemixUiVerticalIconsPanelProps) {
   const scrollableRef = useRef<any>()
   const iconPanelRef = useRef<any>()
-  const udappPanelRef = useRef<any>()
+  // const [first] = useState(localStorage.getItem('firstTime'))
 
   function onThemeChanged (themeType: any) {
     const invert = themeType === 'dark' ? 1 : 0

From fefe20b828771610236e308ef11ad337c260f0ba Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 26 Oct 2021 02:02:29 +0100
Subject: [PATCH 59/84] address review comments from @ioedeveloper

---
 .eslintrc.json                                | 35 -------------------
 .../src/lib/components/Icon.tsx               |  3 +-
 .../src/lib/remix-ui-vertical-icons-panel.tsx |  7 ++--
 3 files changed, 4 insertions(+), 41 deletions(-)
 delete mode 100644 .eslintrc.json

diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100644
index 06cc47d9a2..0000000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
-  "root": true,
-  "ignorePatterns": ["**/*"],
-  "plugins": ["@nrwl/nx"],
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {
-        "@nrwl/nx/enforce-module-boundaries": [
-          "error",
-          {
-            "enforceBuildableLibDependency": true,
-            "allow": [],
-            "depConstraints": [
-              {
-                "sourceTag": "*",
-                "onlyDependOnLibsWithTags": ["*"]
-              }
-            ]
-          }
-        ]
-      }
-    },
-    {
-      "files": ["*.ts", "*.tsx"],
-      "extends": ["plugin:@nrwl/nx/typescript"],
-      "rules": {}
-    },
-    {
-      "files": ["*.js", "*.jsx"],
-      "extends": ["plugin:@nrwl/nx/javascript"],
-      "rules": {}
-    }
-  ]
-}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
index f47946fd36..5bc02b636f 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
@@ -3,8 +3,9 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import VerticalIconsContextMenu from '../vertical-icons-context-menu'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import React, { Fragment, SyntheticEvent, useRef, useState } from 'react'
+import React, { Fragment, SyntheticEvent, useEffect, useRef, useState } from 'react'
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
+// import * as helper from '../../../../../../apps/remix-ide/src/lib/helper'
 
   interface IconProps {
     verticalIconPlugin: VerticalIcons
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index 746472b194..0080d3e230 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -1,11 +1,9 @@
 /* eslint-disable no-use-before-define */
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, {
+import {
   Fragment,
   useEffect,
-  useReducer,
-  useRef,
-  useState
+  useRef
 } from 'react'
 
 import './remix-ui-vertical-icons-panel.css'
@@ -25,7 +23,6 @@ export function RemixUiVerticalIconsPanel ({
 }: RemixUiVerticalIconsPanelProps) {
   const scrollableRef = useRef<any>()
   const iconPanelRef = useRef<any>()
-  // const [first] = useState(localStorage.getItem('firstTime'))
 
   function onThemeChanged (themeType: any) {
     const invert = themeType === 'dark' ? 1 : 0

From 0619b28ca4dc2d6214cbb46e38e8f4818fc16e3f Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 26 Oct 2021 02:56:00 +0100
Subject: [PATCH 60/84] fix missing imports

---
 libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx | 3 +--
 .../src/lib/remix-ui-vertical-icons-panel.tsx                  | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
index 5bc02b636f..f47946fd36 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
@@ -3,9 +3,8 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import VerticalIconsContextMenu from '../vertical-icons-context-menu'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import React, { Fragment, SyntheticEvent, useEffect, useRef, useState } from 'react'
+import React, { Fragment, SyntheticEvent, useRef, useState } from 'react'
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
-// import * as helper from '../../../../../../apps/remix-ide/src/lib/helper'
 
   interface IconProps {
     verticalIconPlugin: VerticalIcons
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index 0080d3e230..6b78d40205 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-use-before-define */
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import {
+import React, {
   Fragment,
   useEffect,
   useRef

From be854a243c56efa6f5f5652a0cd9248a8c96de77 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 26 Oct 2021 13:42:25 +0100
Subject: [PATCH 61/84] workspace.json fix

---
 workspace.json | 173 +++++++++++++++++--------------------------------
 1 file changed, 59 insertions(+), 114 deletions(-)

diff --git a/workspace.json b/workspace.json
index c50f469aab..e00c01ede9 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1,71 +1,5 @@
 {
   "version": 1,
-  "cli": {
-    "defaultCollection": "@nrwl/react"
-  },
-  "defaultProject": "remix-ide",
-  "schematics": {
-    "@nrwl/workspace": {
-      "library": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/cypress": {
-      "cypress-project": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/react": {
-      "application": {
-        "style": "css",
-        "linter": "eslint",
-        "babel": true
-      },
-      "component": {
-        "style": "css"
-      },
-      "library": {
-        "style": "css",
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/next": {
-      "application": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/web": {
-      "application": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/node": {
-      "application": {
-        "linter": "eslint"
-      },
-      "library": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/nx-plugin": {
-      "plugin": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/nest": {
-      "application": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/express": {
-      "application": {
-        "linter": "eslint"
-      },
-      "library": {
-        "linter": "eslint"
-      }
-    }
-  },
   "projects": {
     "remix-ide": {
       "root": "apps/remix-ide",
@@ -832,8 +766,8 @@
       }
     },
     "remix-ui-plugin-manager": {
-     "root": "libs/remix-ui/plugin-manager",
-      "sourceRoot": "libs/remix-ui/plugin-manager/src", 
+      "root": "libs/remix-ui/plugin-manager",
+      "sourceRoot": "libs/remix-ui/plugin-manager/src",
       "projectType": "library",
       "schematics": {},
       "architect": {
@@ -1203,38 +1137,33 @@
         "linter": "eslint"
       }
     },
-    "@nrwl/cypress": {
-      "cypress-project": {
-        "linter": "eslint"
-      }
+    "cli": {
+      "defaultCollection": "@nrwl/react"
     },
-    "@nrwl/react": {
-      "application": {
-        "style": "css",
-        "linter": "eslint",
-        "babel": true
+    "schematics": {
+      "@nrwl/workspace": {
+        "library": {
+          "linter": "eslint"
+        }
       },
-      "component": {
-        "style": "css"
+      "@nrwl/cypress": {
+        "cypress-project": {
+          "linter": "eslint"
+        }
       },
-      "library": {
-        "style": "css",
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/next": {
-      "application": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/web": {
-      "application": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/node": {
-      "application": {
-        "linter": "eslint"
+      "@nrwl/react": {
+        "application": {
+          "style": "css",
+          "linter": "eslint",
+          "babel": true
+        },
+        "component": {
+          "style": "css"
+        },
+        "library": {
+          "style": "css",
+          "linter": "eslint"
+        }
       },
       "library": {
         "linter": "eslint"
@@ -1258,23 +1187,39 @@
             ]
           }
         }
-      }
-    },
-    "remix-ui-vertical-icons-panel": {
-      "root": "libs/remix-ui/vertical-icons-panel",
-      "sourceRoot": "libs/remix-ui/vertical-icons-panel/src",
-      "projectType": "library",
-      "architect": {
-        "lint": {
-          "builder": "@nrwl/linter:eslint",
-          "options": {
-            "lintFilePatterns": [
-              "libs/remix-ui/vertical-icons-panel/**/*.{ts,tsx,js,jsx}"
-            ]
-          }
+      },
+      "@nrwl/web": {
+        "application": {
+          "linter": "eslint"
+        }
+      },
+      "@nrwl/node": {
+        "application": {
+          "linter": "eslint"
+        },
+        "library": {
+          "linter": "eslint"
+        }
+      },
+      "@nrwl/nx-plugin": {
+        "plugin": {
+          "linter": "eslint"
+        }
+      },
+      "@nrwl/nest": {
+        "application": {
+          "linter": "eslint"
+        }
+      },
+      "@nrwl/express": {
+        "application": {
+          "linter": "eslint"
+        },
+        "library": {
+          "linter": "eslint"
         }
       }
-    }
-  },
-  "defaultProject": "remix-ide"
+    },
+    "defaultProject": "remix-ide"
+  }
 }

From 1b9b095e41de4af8e97411bb3c41dbc688764196 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 26 Oct 2021 14:17:57 +0100
Subject: [PATCH 62/84] misplaced comma in workspace.json

---
 workspace.json | 86 +++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 67 insertions(+), 19 deletions(-)

diff --git a/workspace.json b/workspace.json
index e00c01ede9..989dd48fc2 100644
--- a/workspace.json
+++ b/workspace.json
@@ -766,8 +766,8 @@
       }
     },
     "remix-ui-plugin-manager": {
-      "root": "libs/remix-ui/plugin-manager",
-      "sourceRoot": "libs/remix-ui/plugin-manager/src",
+     "root": "libs/remix-ui/plugin-manager",
+      "sourceRoot": "libs/remix-ui/plugin-manager/src", 
       "projectType": "library",
       "schematics": {},
       "architect": {
@@ -1200,26 +1200,74 @@
         "library": {
           "linter": "eslint"
         }
+      }
+    }
+  }
+  ,
+  "cli": {
+    "defaultCollection": "@nrwl/react"
+  },
+  "schematics": {
+    "@nrwl/workspace": {
+      "library": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/cypress": {
+      "cypress-project": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/react": {
+      "application": {
+        "style": "css",
+        "linter": "eslint",
+        "babel": true
       },
-      "@nrwl/nx-plugin": {
-        "plugin": {
-          "linter": "eslint"
-        }
+      "component": {
+        "style": "css"
       },
-      "@nrwl/nest": {
-        "application": {
-          "linter": "eslint"
-        }
+      "library": {
+        "style": "css",
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/next": {
+      "application": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/web": {
+      "application": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/node": {
+      "application": {
+        "linter": "eslint"
       },
-      "@nrwl/express": {
-        "application": {
-          "linter": "eslint"
-        },
-        "library": {
-          "linter": "eslint"
-        }
+      "library": {
+        "linter": "eslint"
       }
     },
-    "defaultProject": "remix-ide"
-  }
+    "@nrwl/nx-plugin": {
+      "plugin": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/nest": {
+      "application": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/express": {
+      "application": {
+        "linter": "eslint"
+      },
+      "library": {
+        "linter": "eslint"
+      }
+    }
+  },
+  "defaultProject": "remix-ide"
 }

From 4f68f383e02b2f59afafdeab9975b3eeaebcfa73 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 26 Oct 2021 14:23:55 +0100
Subject: [PATCH 63/84] workspace.json

---
 workspace.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/workspace.json b/workspace.json
index 989dd48fc2..df30e7038e 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1202,8 +1202,7 @@
         }
       }
     }
-  }
-  ,
+  },
   "cli": {
     "defaultCollection": "@nrwl/react"
   },

From 3b5f1efb746ac8881e4789b5e4e19338b447eb63 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 28 Oct 2021 23:22:39 +0100
Subject: [PATCH 64/84] Fixing setting listen for theme change

---
 .../src/lib/components/Settings.tsx             | 17 ++++++++++++-----
 .../src/lib/remix-ui-vertical-icons-panel.tsx   |  4 ++--
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
index 81f2d88279..db15eeaa7e 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
@@ -14,13 +14,20 @@ interface SettingsProps {
   onThemeChanged: (themeType: any) => void
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function Settings ({ scrollableRef, verticalIconsPlugin, itemContextAction, addActive, removeActive, onThemeChanged }: SettingsProps) {
   useEffect(() => {
-    const themeModule = verticalIconsPlugin.registry.get('themeModule').api
-    themeModule.events.on('themeChanged', (theme: any) => {
-      onThemeChanged(theme.quality)
-    })
-  }, [onThemeChanged])
+    // const themeModule = verticalIconsPlugin.registry.get('themeModule').api
+    // themeModule.events.on('themeChanged', (theme: any) => {
+    //   onThemeChanged(theme.quality)
+    // })
+    return () => {
+      document.addEventListener('themeChanged', (theme: any) => {
+        // onThemeChanged(theme.quality)
+        console.log('this is what theme contains', theme)
+      })
+    }
+  })
   return (
     <div id="settingsIcons" data-id="vertialIconsSettingsIcons">
       <Chevron
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index 6b78d40205..a69839ac5f 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -96,7 +96,7 @@ export function RemixUiVerticalIconsPanel ({
   return (
     <div id="iconsP" className="h-100">
       <div className="remixui_icons" ref={iconPanelRef}>
-        <div className={scrollableRef.current && scrollableRef.current.scrollHeight > 500
+        <div className={scrollableRef.current && scrollableRef.current.scrollHeight > 600
           ? 'remixui_default-icons-container remixui_requiredSection' : 'remixui_requiredSection'}>
           <Home verticalIconPlugin={verticalIconsPlugin} />
           <RequiredSection
@@ -109,7 +109,7 @@ export function RemixUiVerticalIconsPanel ({
         </div>
         <div
           id="remixuiScrollable"
-          className={scrollableRef.current && scrollableRef.current.scrollHeight > 500
+          className={scrollableRef.current && scrollableRef.current.scrollHeight > 600
             ? 'remixui_default-icons-container remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'
             : 'remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'}
           ref={scrollableRef}

From d07d017bcdbd78020a23e8703908644ce6fc591f Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 28 Oct 2021 23:54:34 +0100
Subject: [PATCH 65/84] fixed settings icon theme change bug

---
 .../src/app/components/vertical-icons.js      |  9 +++++
 .../src/lib/components/Settings.tsx           | 37 +++++++++++--------
 .../src/lib/remix-ui-vertical-icons-panel.tsx |  3 +-
 3 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/apps/remix-ide/src/app/components/vertical-icons.js b/apps/remix-ide/src/app/components/vertical-icons.js
index 6f92f3f729..f1c3827c8d 100644
--- a/apps/remix-ide/src/app/components/vertical-icons.js
+++ b/apps/remix-ide/src/app/components/vertical-icons.js
@@ -163,6 +163,15 @@ export class VerticalIcons extends Plugin {
     this.events.emit('showContent', name)
   }
 
+  onThemeChanged (themeType) {
+    const invert = themeType === 'dark' ? 1 : 0
+    const active = this.view.querySelector('.active')
+    if (active) {
+      const image = active.querySelector('.image')
+      image.style.setProperty('filter', `invert(${invert})`)
+    }
+  }
+
   /**
    * Toggles the side panel for plugin
    * @param {string} name Name of profile of the module to activate
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
index db15eeaa7e..79239158d8 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-use-before-define */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
-import React, { useEffect } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { Chevron } from './Chevron'
 import Icon from './Icon'
 
@@ -11,25 +11,30 @@ interface SettingsProps {
   addActive: (name: string) => void
   removeActive: () => void
   scrollableRef: React.MutableRefObject<any>
-  onThemeChanged: (themeType: any) => void
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function Settings ({ scrollableRef, verticalIconsPlugin, itemContextAction, addActive, removeActive, onThemeChanged }: SettingsProps) {
-  useEffect(() => {
-    // const themeModule = verticalIconsPlugin.registry.get('themeModule').api
-    // themeModule.events.on('themeChanged', (theme: any) => {
-    //   onThemeChanged(theme.quality)
-    // })
-    return () => {
-      document.addEventListener('themeChanged', (theme: any) => {
-        // onThemeChanged(theme.quality)
-        console.log('this is what theme contains', theme)
-      })
+function Settings ({ scrollableRef, verticalIconsPlugin, itemContextAction, addActive, removeActive }: SettingsProps) {
+  const settingsRef = useRef(null)
+  function onThemeChanged (themeType: any) {
+    const invert = themeType === 'dark' ? 1 : 0
+    // @ts-ignore
+    const active = settingsRef.current.querySelector('.active')
+    if (active) {
+      // @ts-ignore
+      const image = settingsRef.current.querySelector('.remixui_image')
+      image.style.setProperty('filter', `invert(${invert})`)
     }
-  })
+  }
+
+  useEffect(() => {
+    const themeModule = verticalIconsPlugin.registry.get('themeModule').api
+    themeModule.events.on('themeChanged', (theme: any) => {
+      onThemeChanged(theme.quality)
+      console.log('There was a theme change and is caught in settings. This is the theme payload ', theme)
+    })
+  }, [])
   return (
-    <div id="settingsIcons" data-id="vertialIconsSettingsIcons">
+    <div id="settingsIcons" data-id="vertialIconsSettingsIcons" ref={settingsRef}>
       <Chevron
         divElementRef={scrollableRef}
         cssRule={'fa fa-chevron-down remixui_icon-chevron mt-0 mb-0 ml-1 pl-3'}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index a69839ac5f..1375a12b97 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -76,6 +76,7 @@ export function RemixUiVerticalIconsPanel ({
     const themeModule = verticalIconsPlugin.registry.get('themeModule').api
     themeModule.events.on('themeChanged', (theme: any) => {
       onThemeChanged(theme.quality)
+      console.log('There was a theme change. This is the theme payload ', theme)
     })
   }, [])
 
@@ -83,6 +84,7 @@ export function RemixUiVerticalIconsPanel ({
     const themeModule = verticalIconsPlugin.registry.get('themeModule').api
     themeModule.events.on('themeChanged', (theme: any) => {
       onThemeChanged(theme.quality)
+      console.log('There was a theme change. This is the theme payload ', theme)
     })
   }, [])
 
@@ -130,7 +132,6 @@ export function RemixUiVerticalIconsPanel ({
                 removeActive={removeActive}
                 itemContextAction={itemContextAction}
                 scrollableRef={scrollableRef}
-                onThemeChanged={onThemeChanged}
               />
             </Fragment>
           ) : null}

From a79860b3acdaf109d39a1628d4085c07ef5ce6a6 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Fri, 29 Oct 2021 01:14:31 +0100
Subject: [PATCH 66/84] remove console.log in components

---
 .../vertical-icons-panel/src/lib/components/Settings.tsx        | 1 -
 .../src/lib/remix-ui-vertical-icons-panel.tsx                   | 2 --
 2 files changed, 3 deletions(-)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
index 79239158d8..973ed01312 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
@@ -30,7 +30,6 @@ function Settings ({ scrollableRef, verticalIconsPlugin, itemContextAction, addA
     const themeModule = verticalIconsPlugin.registry.get('themeModule').api
     themeModule.events.on('themeChanged', (theme: any) => {
       onThemeChanged(theme.quality)
-      console.log('There was a theme change and is caught in settings. This is the theme payload ', theme)
     })
   }, [])
   return (
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index 1375a12b97..736749a1be 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -76,7 +76,6 @@ export function RemixUiVerticalIconsPanel ({
     const themeModule = verticalIconsPlugin.registry.get('themeModule').api
     themeModule.events.on('themeChanged', (theme: any) => {
       onThemeChanged(theme.quality)
-      console.log('There was a theme change. This is the theme payload ', theme)
     })
   }, [])
 
@@ -84,7 +83,6 @@ export function RemixUiVerticalIconsPanel ({
     const themeModule = verticalIconsPlugin.registry.get('themeModule').api
     themeModule.events.on('themeChanged', (theme: any) => {
       onThemeChanged(theme.quality)
-      console.log('There was a theme change. This is the theme payload ', theme)
     })
   }, [])
 

From 9cdddaeee966565424fac8cd611d0dc86b4506f2 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Fri, 29 Oct 2021 01:20:52 +0100
Subject: [PATCH 67/84] change chevron display logic

---
 .../vertical-icons-panel/src/lib/components/Chevron.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Chevron.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Chevron.tsx
index c3c5c472ba..dfe8c47764 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Chevron.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Chevron.tsx
@@ -9,7 +9,7 @@ export interface ChevronProps {
 function Chevron (props: ChevronProps) {
   return (
     <>
-      { props.divElementRef.current && props.divElementRef.current.scrollHeight > props.divElementRef.current.clientHeight
+      { props.divElementRef.current && props.divElementRef.current.scrollHeight > 600
         ? <i className={props.cssRule}></i> : null }
     </>
   )

From 2b1b17a2c1312e3193fb464f45f8dfa6b69467b1 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Sat, 30 Oct 2021 19:32:57 +0100
Subject: [PATCH 68/84] active class update for filepanel

---
 .../src/lib/components/FilePanel.tsx          | 25 +++++++++++++++++--
 package-lock.json                             | 10 --------
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/FilePanel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/FilePanel.tsx
index 63b849fbce..4e50c34e53 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/FilePanel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/FilePanel.tsx
@@ -1,6 +1,6 @@
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
 // eslint-disable-next-line no-use-before-define
-import React, { Fragment } from 'react'
+import React, { Fragment, useEffect, useRef } from 'react'
 import Icon from './Icon'
 
 interface FilePanelProps {
@@ -11,6 +11,25 @@ interface FilePanelProps {
 }
 
 function FilePanel ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: FilePanelProps) {
+  const filePanelRef = useRef(null)
+  function onThemeChanged (themeType: any) {
+    const invert = themeType === 'dark' ? 1 : 0
+    // @ts-ignore
+    const active = filePanelRef.current && filePanelRef.current.querySelector('.active')
+    if (active) {
+      // @ts-ignore
+      const image = filePanelRef.current.querySelector('.remixui_image')
+      image.style.setProperty('filter', `invert(${invert})`)
+    }
+  }
+
+  useEffect(() => {
+    const themeModule = verticalIconsPlugin.registry.get('themeModule').api
+    themeModule.events.on('themeChanged', (theme: any) => {
+      onThemeChanged(theme.quality)
+    })
+  }, [])
+
   return (
     <Fragment>
       {verticalIconsPlugin.targetProfileForChange &&
@@ -20,7 +39,9 @@ function FilePanel ({ verticalIconsPlugin, itemContextAction, addActive, removeA
           .map(p => (
             <div id="fileExplorerIcons" key={
               verticalIconsPlugin.targetProfileForChange[p].displayName
-            } data-id="verticalIconsFileExplorerIcons">
+            } data-id="verticalIconsFileExplorerIcons"
+            ref={filePanelRef}
+            >
               <Icon
                 kind={verticalIconsPlugin.targetProfileForChange[p].kind}
                 displayName={
diff --git a/package-lock.json b/package-lock.json
index e8fdec24f5..f23ab3f7b6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35941,16 +35941,6 @@
         "es-abstract": "^1.19.1"
       }
     },
-    "object.hasown": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.0.tgz",
-      "integrity": "sha512-MhjYRfj3GBlhSkDHo6QmvgjRLXQ2zndabdf3nX0yTyZK9rPfxb6uRpAac8HXNLy1GpqWtZ81Qh4v3uOls2sRAg==",
-      "dev": true,
-      "requires": {
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.1"
-      }
-    },
     "object.map": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/object.map/-/object.map-1.0.1.tgz",

From 1bb408779eed4d4b6fe5619abb65c4c1a978babe Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 1 Nov 2021 15:24:35 +0100
Subject: [PATCH 69/84] restore scrollheight auto calculation

---
 .../src/lib/remix-ui-vertical-icons-panel.tsx                 | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index 736749a1be..d813a69c4f 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -96,7 +96,7 @@ export function RemixUiVerticalIconsPanel ({
   return (
     <div id="iconsP" className="h-100">
       <div className="remixui_icons" ref={iconPanelRef}>
-        <div className={scrollableRef.current && scrollableRef.current.scrollHeight > 600
+        <div className={scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight
           ? 'remixui_default-icons-container remixui_requiredSection' : 'remixui_requiredSection'}>
           <Home verticalIconPlugin={verticalIconsPlugin} />
           <RequiredSection
@@ -109,7 +109,7 @@ export function RemixUiVerticalIconsPanel ({
         </div>
         <div
           id="remixuiScrollable"
-          className={scrollableRef.current && scrollableRef.current.scrollHeight > 600
+          className={scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight
             ? 'remixui_default-icons-container remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'
             : 'remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'}
           ref={scrollableRef}

From f07d4db897be8bd010a4435a6a39932ecdb1e177 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 2 Nov 2021 11:20:19 +0100
Subject: [PATCH 70/84] refactor icon component for statusChanged event

---
 apps/remix-ide-e2e/src/tests/debugger.test.ts |   2 +-
 .../src/app/components/vertical-icons.js      |  31 +++--
 .../src/lib/components/Debugger.tsx           |  14 +-
 .../src/lib/components/FilePanel.tsx          |  14 +-
 .../src/lib/components/Icon.tsx               | 125 +++++++++++++++---
 .../src/lib/components/OtherIcons.tsx         |  13 +-
 .../src/lib/components/PluginManager.tsx      |  21 +--
 .../src/lib/components/Settings.tsx           |  21 +--
 .../src/lib/components/Solidity.tsx           |  14 +-
 .../lib/components/SolidityStaticAnalysis.tsx |  14 +-
 .../src/lib/components/Udapp.tsx              |  14 +-
 .../src/lib/reducers/iconReducers.ts          |  10 ++
 .../types/vertical-icons-panel.d.ts           |   2 +
 13 files changed, 149 insertions(+), 146 deletions(-)
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconReducers.ts

diff --git a/apps/remix-ide-e2e/src/tests/debugger.test.ts b/apps/remix-ide-e2e/src/tests/debugger.test.ts
index f6d72362c1..6698c13635 100644
--- a/apps/remix-ide-e2e/src/tests/debugger.test.ts
+++ b/apps/remix-ide-e2e/src/tests/debugger.test.ts
@@ -200,7 +200,7 @@ module.exports = {
     browser
       .addFile('test_jsGetTrace.js', { content: jsGetTrace })
       .executeScript('remix.exeCurrent()')
-      .pause(1000)
+      .pause(3000)
       .waitForElementContainsText('*[data-id="terminalJournal"]', '{"gas":"0x575f","return":"0x0000000000000000000000000000000000000000000000000000000000000000","structLogs":', 60000)
   },
   // depends on Should debug using generated sources
diff --git a/apps/remix-ide/src/app/components/vertical-icons.js b/apps/remix-ide/src/app/components/vertical-icons.js
index f1c3827c8d..3883181836 100644
--- a/apps/remix-ide/src/app/components/vertical-icons.js
+++ b/apps/remix-ide/src/app/components/vertical-icons.js
@@ -33,6 +33,8 @@ export class VerticalIcons extends Plugin {
     this.targetProfileForChange = {}
     this.targetProfileForRemoval = {}
     this.registry = globalRegistry
+    this.keys = ['succeed', 'edited', 'none', 'loading', 'failed']
+    this.types = ['error', 'warning', 'success', 'info', '']
   }
 
   renderComponent () {
@@ -62,19 +64,19 @@ export class VerticalIcons extends Plugin {
 
   listenOnStatus (profile) {
     // the list of supported keys. 'none' will remove the status
-    const keys = ['edited', 'succeed', 'none', 'loading', 'failed']
-    const types = ['error', 'warning', 'success', 'info', '']
-    const fn = (status) => {
-      if (!types.includes(status.type) && status.type) throw new Error(`type should be ${keys.join()}`)
-      if (status.key === undefined) throw new Error('status key should be defined')
-
-      if (typeof status.key === 'string' && (!keys.includes(status.key))) {
-        throw new Error('key should contain either number or ' + keys.join())
-      }
-      this.setIconStatus(profile.name, status)
-    }
-    this.iconStatus[profile.name] = fn
-    this.on(profile.name, 'statusChanged', this.iconStatus[profile.name])
+    // const keys = ['edited', 'succeed', 'none', 'loading', 'failed']
+    // const types = ['error', 'warning', 'success', 'info', '']
+    // const fn = (status) => {
+    //   if (!this.types.includes(status.type) && status.type) throw new Error(`type should be ${this.keys.join()}`)
+    //   if (status.key === undefined) throw new Error('status key should be defined')
+
+    //   if (typeof status.key === 'string' && (!this.keys.includes(status.key))) {
+    //     throw new Error('key should contain either number or ' + this.keys.join())
+    //   }
+    //   this.setIconStatus(profile.name, status)
+    // }
+    // this.iconStatus[profile.name] = fn
+    // this.on(profile.name, 'statusChanged', this.iconStatus[profile.name])
   }
 
   /**
@@ -84,6 +86,7 @@ export class VerticalIcons extends Plugin {
    */
   resolveClasses (key, type) {
     let classes = 'remixui_status'
+
     switch (key) {
       case 'succeed':
         classes += ' fas fa-check-circle text-' + type + ' ' + 'remixui_statusCheck'
@@ -111,6 +114,8 @@ export class VerticalIcons extends Plugin {
    */
   setIconStatus (name, status) {
     const el = this.icons[name]
+    // eslint-disable-next-line no-debugger
+    debugger
     if (!el) return
     const statusEl = el.querySelector('i')
     if (statusEl) {
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx
index ab84bfd59d..6e4cfbfc23 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx
@@ -22,19 +22,7 @@ function Debugger ({ verticalIconsPlugin, itemContextAction, addActive, removeAc
               verticalIconsPlugin.targetProfileForChange[p].displayName
             }>
               <Icon
-                kind={verticalIconsPlugin.targetProfileForChange[p].kind}
-                displayName={
-                  verticalIconsPlugin.targetProfileForChange[p].displayName
-                }
-                documentation={
-                  verticalIconsPlugin.targetProfileForChange[p]
-                    .documentation
-                }
-                icon={verticalIconsPlugin.targetProfileForChange[p].icon}
-                name={verticalIconsPlugin.targetProfileForChange[p].name}
-                tooltip={
-                  verticalIconsPlugin.targetProfileForChange[p].tooltip
-                }
+                profile={verticalIconsPlugin.targetProfileForChange[p]}
                 verticalIconPlugin={verticalIconsPlugin}
                 contextMenuAction={itemContextAction}
                 addActive={addActive}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/FilePanel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/FilePanel.tsx
index 4e50c34e53..f85d83d375 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/FilePanel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/FilePanel.tsx
@@ -43,19 +43,7 @@ function FilePanel ({ verticalIconsPlugin, itemContextAction, addActive, removeA
             ref={filePanelRef}
             >
               <Icon
-                kind={verticalIconsPlugin.targetProfileForChange[p].kind}
-                displayName={
-                  verticalIconsPlugin.targetProfileForChange[p].displayName
-                }
-                documentation={
-                  verticalIconsPlugin.targetProfileForChange[p]
-                    .documentation
-                }
-                icon={verticalIconsPlugin.targetProfileForChange[p].icon}
-                name={verticalIconsPlugin.targetProfileForChange[p].name}
-                tooltip={
-                  verticalIconsPlugin.targetProfileForChange[p].tooltip
-                }
+                profile={verticalIconsPlugin.targetProfileForChange[p]}
                 verticalIconPlugin={verticalIconsPlugin}
                 contextMenuAction={itemContextAction}
                 addActive={addActive}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
index f47946fd36..1116d0bdc4 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
@@ -3,36 +3,33 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import VerticalIconsContextMenu from '../vertical-icons-context-menu'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import React, { Fragment, SyntheticEvent, useRef, useState } from 'react'
+import React, { Fragment, SyntheticEvent, useEffect, useRef, useState } from 'react'
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
+import * as helper from '../../../../../../apps/remix-ide/src/lib/helper'
 
   interface IconProps {
     verticalIconPlugin: VerticalIcons
-    kind: string
-    name: string
-    icon: string
-    displayName: string
-    tooltip: string
-    documentation: string
+    // kind: string
+    // name: string
+    // icon: string
+    // displayName: string
+    // tooltip: string
+    // documentation: string
+    profile: any
     contextMenuAction: (evt: any, profileName: string, documentation: string) => void
     addActive: (profileName: string) => void
     removeActive: () => void
   }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function Icon ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  kind,
-  name,
-  icon,
-  displayName,
-  tooltip,
-  documentation,
+  profile,
   verticalIconPlugin,
   contextMenuAction,
   addActive,
   removeActive
 }: IconProps) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { tooltip, displayName, name, kind, icon, documentation } = profile
   const [title] = useState(() => {
     const temp = tooltip || displayName || name
     return temp.replace(/^\w/, word => word.toUpperCase())
@@ -47,6 +44,7 @@ function Icon ({
   const [showContext, setShowContext] = useState(false)
   const [canDeactivate] = useState(false)
   const iconRef = useRef<any>(null)
+  const iconStatusValues = { title: '', key: '', type: '', text: '' }
 
   const handleContextMenu = (e: SyntheticEvent & PointerEvent) => {
     const deactivationState = verticalIconPlugin.appManager
@@ -65,6 +63,94 @@ function Icon ({
     setShowContext(false)
   }
 
+  /**
+   * resolve a classes list for @arg key
+   * @param {String} key
+   * @param {String} type
+   */
+  function resolveClasses (key: string, type: string) {
+    let classes = 'remixui_status'
+
+    switch (key) {
+      case 'succeed':
+        classes += ' fas fa-check-circle text-' + type + ' ' + 'remixui_statusCheck'
+        break
+      case 'edited':
+        classes += ' fas fa-sync text-' + type + ' ' + 'remixui_statusCheck'
+        break
+      case 'loading':
+        classes += ' fas fa-spinner text-' + type + ' ' + 'remixui_statusCheck'
+        break
+      case 'failed':
+        classes += ' fas fa-exclamation-triangle text-' + type + ' ' + 'remixui_statusCheck'
+        break
+      default: {
+        classes += ' badge badge-pill badge-' + type
+      }
+    }
+    return classes
+  }
+
+  /**
+   * Set a new status for the @arg name
+   * @param {String} name
+   * @param {Object} status
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  function setIconStatus (name: string, status: { key: string | number, title: string, type: string }) {
+    if (!iconRef.current) return
+    const statusEl = iconRef.current.querySelector('i')
+    if (statusEl) {
+      iconRef.current.removeChild(statusEl)
+    }
+    if (status.key === 'none') return // remove status
+
+    let text = ''
+    let key = ''
+    if (typeof status.key === 'number') {
+      key = status.key.toString()
+      text = key
+    } else key = helper.checkSpecialChars(status.key) ? '' : status.key
+
+    let type = ''
+    if (status.type === 'error') {
+      type = 'danger' // to use with bootstrap
+    } else type = helper.checkSpecialChars(status.type) ? '' : status.type
+    const title = helper.checkSpecialChars(status.title) ? '' : status.title
+
+    const icon = document.createElement('i')
+    icon.title = title
+    icon.className = resolveClasses(key, type)
+    icon.ariaHidden = 'true'
+    const innerText = document.createTextNode(text)
+    icon.appendChild(innerText)
+    iconRef.current!.appendChild(icon)
+    iconRef.current.classList.add('remixui_icon')
+  }
+
+  function listenOnStatus (profile: any) {
+    function setErrorStatus (status: any) {
+      if (!verticalIconPlugin.types.includes(status.type) && status.type) throw new Error(`type should be ${verticalIconPlugin.keys.join()}`)
+      if (status.key === undefined) throw new Error('status key should be defined')
+      if (typeof status.key === 'string' && (!verticalIconPlugin.keys.includes(status.key))) {
+        throw new Error('key should contain either number or ' + verticalIconPlugin.keys.join())
+      }
+      setIconStatus(profile.name, status)
+    }
+    verticalIconPlugin.iconStatus[profile.name] = setErrorStatus
+    verticalIconPlugin.on(profile.name, 'statusChanged', verticalIconPlugin.iconStatus[profile.name])
+  }
+
+  useEffect(() => {
+    listenOnStatus(profile)
+    return () => {
+      console.log('just listened for status change ', { profile })
+      addEventListener('statusChanged', (e) => {
+        console.log('statusChanged just happend for this icon and this is its payload ', e)
+      })
+    }
+  }, [])
+
   return (
     <Fragment>
       <div
@@ -94,6 +180,15 @@ function Icon ({
       >
         <img className="remixui_image" src={icon} alt={name} />
       </div>
+      {verticalIconPlugin.iconStatus && Object.keys(verticalIconPlugin.iconStatus).length !== null ? (
+        <i
+          title={iconStatusValues.title}
+          className={resolveClasses(iconStatusValues.key, iconStatusValues.type)}
+          aria-hidden="true"
+        >
+          {iconStatusValues.text}
+        </i>
+      ) : null }
       {showContext ? (
         <VerticalIconsContextMenu
           pageX={pageX}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx
index 377ca2c28a..45342bbc5d 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx
@@ -26,18 +26,7 @@ function OtherIcons ({ verticalIconsPlugin, itemContextAction, addActive, remove
           .filter(customFilter)
           .map(p => (
             <Icon
-              kind={verticalIconsPlugin.targetProfileForChange[p].kind}
-              displayName={
-                verticalIconsPlugin.targetProfileForChange[p].displayName
-              }
-              documentation={
-                verticalIconsPlugin.targetProfileForChange[p].documentation
-              }
-              icon={verticalIconsPlugin.targetProfileForChange[p].icon}
-              name={verticalIconsPlugin.targetProfileForChange[p].name}
-              tooltip={
-                verticalIconsPlugin.targetProfileForChange[p].tooltip
-              }
+              profile={verticalIconsPlugin.targetProfileForChange[p]}
               verticalIconPlugin={verticalIconsPlugin}
               contextMenuAction={itemContextAction}
               addActive={addActive}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/PluginManager.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/PluginManager.tsx
index 2fa449c4cc..5f73b7e008 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/PluginManager.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/PluginManager.tsx
@@ -18,26 +18,7 @@ function PluginManager ({ verticalIconsPlugin, itemContextAction, addActive, rem
         .filter(p => p === 'pluginManager')
         .map(p => (
           <Icon
-            kind={
-              verticalIconsPlugin.targetProfileForChange[p].kind
-            }
-            displayName={
-              verticalIconsPlugin.targetProfileForChange[p]
-                .displayName
-            }
-            documentation={
-              verticalIconsPlugin.targetProfileForChange[p]
-                .documentation
-            }
-            icon={
-              verticalIconsPlugin.targetProfileForChange[p].icon
-            }
-            name={
-              verticalIconsPlugin.targetProfileForChange[p].name
-            }
-            tooltip={
-              verticalIconsPlugin.targetProfileForChange[p].tooltip
-            }
+            profile={verticalIconsPlugin.targetProfileForChange[p]}
             verticalIconPlugin={verticalIconsPlugin}
             contextMenuAction={itemContextAction}
             addActive={addActive}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
index 973ed01312..7f99d546b4 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
@@ -42,26 +42,7 @@ function Settings ({ scrollableRef, verticalIconsPlugin, itemContextAction, addA
         .filter(p => p === 'settings')
         .map(p => (
           <Icon
-            kind={
-              verticalIconsPlugin.targetProfileForChange[p].kind
-            }
-            displayName={
-              verticalIconsPlugin.targetProfileForChange[p]
-                .displayName
-            }
-            documentation={
-              verticalIconsPlugin.targetProfileForChange[p]
-                .documentation
-            }
-            icon={
-              verticalIconsPlugin.targetProfileForChange[p].icon
-            }
-            name={
-              verticalIconsPlugin.targetProfileForChange[p].name
-            }
-            tooltip={
-              verticalIconsPlugin.targetProfileForChange[p].tooltip
-            }
+            profile={verticalIconsPlugin.targetProfileForChange[p]}
             verticalIconPlugin={verticalIconsPlugin}
             contextMenuAction={itemContextAction}
             addActive={addActive}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Solidity.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Solidity.tsx
index 83ca38e432..7040f48dd5 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Solidity.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Solidity.tsx
@@ -22,19 +22,7 @@ function Solidity ({ verticalIconsPlugin, itemContextAction, addActive, removeAc
               verticalIconsPlugin.targetProfileForChange[p].displayName
             }>
               <Icon
-                kind={verticalIconsPlugin.targetProfileForChange[p].kind}
-                displayName={
-                  verticalIconsPlugin.targetProfileForChange[p].displayName
-                }
-                documentation={
-                  verticalIconsPlugin.targetProfileForChange[p]
-                    .documentation
-                }
-                icon={verticalIconsPlugin.targetProfileForChange[p].icon}
-                name={verticalIconsPlugin.targetProfileForChange[p].name}
-                tooltip={
-                  verticalIconsPlugin.targetProfileForChange[p].tooltip
-                }
+                profile={verticalIconsPlugin.targetProfileForChange[p]}
                 verticalIconPlugin={verticalIconsPlugin}
                 contextMenuAction={itemContextAction}
                 addActive={addActive}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/SolidityStaticAnalysis.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/SolidityStaticAnalysis.tsx
index 5026f656c3..ce2fe43aeb 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/SolidityStaticAnalysis.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/SolidityStaticAnalysis.tsx
@@ -22,19 +22,7 @@ function SolidityStaticAnalysis ({ verticalIconsPlugin, itemContextAction, addAc
               verticalIconsPlugin.targetProfileForChange[p].displayName
             }>
               <Icon
-                kind={verticalIconsPlugin.targetProfileForChange[p].kind}
-                displayName={
-                  verticalIconsPlugin.targetProfileForChange[p].displayName
-                }
-                documentation={
-                  verticalIconsPlugin.targetProfileForChange[p]
-                    .documentation
-                }
-                icon={verticalIconsPlugin.targetProfileForChange[p].icon}
-                name={verticalIconsPlugin.targetProfileForChange[p].name}
-                tooltip={
-                  verticalIconsPlugin.targetProfileForChange[p].tooltip
-                }
+                profile={verticalIconsPlugin.targetProfileForChange[p]}
                 verticalIconPlugin={verticalIconsPlugin}
                 contextMenuAction={itemContextAction}
                 addActive={addActive}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Udapp.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Udapp.tsx
index 5846348243..377609d968 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Udapp.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Udapp.tsx
@@ -23,19 +23,7 @@ function Udapp ({ verticalIconsPlugin, itemContextAction, addActive, removeActiv
             }
             >
               <Icon
-                kind={verticalIconsPlugin.targetProfileForChange[p].kind}
-                displayName={
-                  verticalIconsPlugin.targetProfileForChange[p].displayName
-                }
-                documentation={
-                  verticalIconsPlugin.targetProfileForChange[p]
-                    .documentation
-                }
-                icon={verticalIconsPlugin.targetProfileForChange[p].icon}
-                name={verticalIconsPlugin.targetProfileForChange[p].name}
-                tooltip={
-                  verticalIconsPlugin.targetProfileForChange[p].tooltip
-                }
+                profile={verticalIconsPlugin.targetProfileForChange[p]}
                 verticalIconPlugin={verticalIconsPlugin}
                 contextMenuAction={itemContextAction}
                 addActive={addActive}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconReducers.ts b/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconReducers.ts
new file mode 100644
index 0000000000..e6f7b3ce02
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconReducers.ts
@@ -0,0 +1,10 @@
+export const defaultState: {
+  key: string | number
+  title: string
+  type: string
+  text: string
+} = { key: '', title: '', type: '', text: '' }
+
+function iconStatusReducer (state, action: any) {
+  return defaultState
+}
diff --git a/libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel.d.ts b/libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel.d.ts
index 25dcc8fb65..4d23557f18 100644
--- a/libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel.d.ts
+++ b/libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel.d.ts
@@ -53,6 +53,8 @@ export class VerticalIcons extends Plugin<any, any> {
   targetProfileForChange: any
   targetProfileForRemoval: any
   registry: registry
+  keys: string[]
+  types: string[]
   renderComponent(): void
   linkContent(profile: any): void
   unlinkContent(profile: any): void

From 72075f5b88b5058c70d7b2daae72148e5a5a7ebb Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Wed, 3 Nov 2021 09:32:41 +0100
Subject: [PATCH 71/84] working on icons reducers

---
 .../src/lib/components/Icon.tsx               | 75 ++++++-------------
 .../src/lib/reducers/iconReducers.ts          | 43 ++++++++++-
 2 files changed, 62 insertions(+), 56 deletions(-)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
index 1116d0bdc4..25adcdf57c 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
@@ -3,9 +3,10 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import VerticalIconsContextMenu from '../vertical-icons-context-menu'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import React, { Fragment, SyntheticEvent, useEffect, useRef, useState } from 'react'
+import React, { Fragment, SyntheticEvent, useEffect, useReducer, useRef, useState } from 'react'
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
 import * as helper from '../../../../../../apps/remix-ide/src/lib/helper'
+import { defaultState, iconStatusReducer } from '../reducers/iconReducers'
 
   interface IconProps {
     verticalIconPlugin: VerticalIcons
@@ -32,7 +33,7 @@ function Icon ({
   const { tooltip, displayName, name, kind, icon, documentation } = profile
   const [title] = useState(() => {
     const temp = tooltip || displayName || name
-    return temp.replace(/^\w/, word => word.toUpperCase())
+    return temp.replace(/^\w/, (word: string) => word.toUpperCase())
   })
   const [links, setLinks] = useState<{ Documentation: string, CanDeactivate: boolean }>(
       {} as { Documentation: string, CanDeactivate: boolean }
@@ -44,7 +45,8 @@ function Icon ({
   const [showContext, setShowContext] = useState(false)
   const [canDeactivate] = useState(false)
   const iconRef = useRef<any>(null)
-  const iconStatusValues = { title: '', key: '', type: '', text: '' }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [status, dispatchIconStatus] = useReducer(iconStatusReducer, defaultState)
 
   const handleContextMenu = (e: SyntheticEvent & PointerEvent) => {
     const deactivationState = verticalIconPlugin.appManager
@@ -63,45 +65,19 @@ function Icon ({
     setShowContext(false)
   }
 
-  /**
-   * resolve a classes list for @arg key
-   * @param {String} key
-   * @param {String} type
-   */
-  function resolveClasses (key: string, type: string) {
-    let classes = 'remixui_status'
-
-    switch (key) {
-      case 'succeed':
-        classes += ' fas fa-check-circle text-' + type + ' ' + 'remixui_statusCheck'
-        break
-      case 'edited':
-        classes += ' fas fa-sync text-' + type + ' ' + 'remixui_statusCheck'
-        break
-      case 'loading':
-        classes += ' fas fa-spinner text-' + type + ' ' + 'remixui_statusCheck'
-        break
-      case 'failed':
-        classes += ' fas fa-exclamation-triangle text-' + type + ' ' + 'remixui_statusCheck'
-        break
-      default: {
-        classes += ' badge badge-pill badge-' + type
-      }
-    }
-    return classes
-  }
-
   /**
    * Set a new status for the @arg name
+   * keys = ['succeed', 'edited', 'none', 'loading', 'failed']
+   * types = ['error', 'warning', 'success', 'info', '']
    * @param {String} name
    * @param {Object} status
    */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  function setIconStatus (name: string, status: { key: string | number, title: string, type: string }) {
+  function setIconStatus (name: string) {
     if (!iconRef.current) return
     const statusEl = iconRef.current.querySelector('i')
     if (statusEl) {
-      iconRef.current.removeChild(statusEl)
+      iconRef.current.removeChild(statusEl) // need to eject component instead of removing?
     }
     if (status.key === 'none') return // remove status
 
@@ -120,7 +96,7 @@ function Icon ({
 
     const icon = document.createElement('i')
     icon.title = title
-    icon.className = resolveClasses(key, type)
+    // icon.className = resolveClasses(key, type)
     icon.ariaHidden = 'true'
     const innerText = document.createTextNode(text)
     icon.appendChild(innerText)
@@ -128,21 +104,21 @@ function Icon ({
     iconRef.current.classList.add('remixui_icon')
   }
 
-  function listenOnStatus (profile: any) {
-    function setErrorStatus (status: any) {
-      if (!verticalIconPlugin.types.includes(status.type) && status.type) throw new Error(`type should be ${verticalIconPlugin.keys.join()}`)
-      if (status.key === undefined) throw new Error('status key should be defined')
-      if (typeof status.key === 'string' && (!verticalIconPlugin.keys.includes(status.key))) {
-        throw new Error('key should contain either number or ' + verticalIconPlugin.keys.join())
-      }
-      setIconStatus(profile.name, status)
+  function setErrorStatus () {
+    if (!verticalIconPlugin.types.includes(status.type) && status.type) throw new Error(`type should be ${verticalIconPlugin.keys.join()}`)
+    if (status.key === undefined) throw new Error('status key should be defined')
+    if (typeof status.key === 'string' && (!verticalIconPlugin.keys.includes(status.key))) {
+      throw new Error('key should contain either number or ' + verticalIconPlugin.keys.join())
     }
-    verticalIconPlugin.iconStatus[profile.name] = setErrorStatus
-    verticalIconPlugin.on(profile.name, 'statusChanged', verticalIconPlugin.iconStatus[profile.name])
+    setIconStatus(profile.name)
+  }
+  function listenOnStatus () {
+    // verticalIconPlugin.iconStatus[profile.name] = setErrorStatus // { profileName: profile.name, errorStatus: setErrorStatus } ?
+    verticalIconPlugin.on(profile.name, 'statusChanged', dispatchIconStatus({ type: 'success', payload: { } }))
   }
 
   useEffect(() => {
-    listenOnStatus(profile)
+    listenOnStatus()
     return () => {
       console.log('just listened for status change ', { profile })
       addEventListener('statusChanged', (e) => {
@@ -180,15 +156,6 @@ function Icon ({
       >
         <img className="remixui_image" src={icon} alt={name} />
       </div>
-      {verticalIconPlugin.iconStatus && Object.keys(verticalIconPlugin.iconStatus).length !== null ? (
-        <i
-          title={iconStatusValues.title}
-          className={resolveClasses(iconStatusValues.key, iconStatusValues.type)}
-          aria-hidden="true"
-        >
-          {iconStatusValues.text}
-        </i>
-      ) : null }
       {showContext ? (
         <VerticalIconsContextMenu
           pageX={pageX}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconReducers.ts b/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconReducers.ts
index e6f7b3ce02..d97b3849a4 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconReducers.ts
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconReducers.ts
@@ -3,8 +3,47 @@ export const defaultState: {
   title: string
   type: string
   text: string
-} = { key: '', title: '', type: '', text: '' }
+  profileName: string
+  errorStatus: () => void
+} = { key: '', title: '', type: '', text: '', profileName: '', errorStatus: () => {} }
 
-function iconStatusReducer (state, action: any) {
+export type IconStatusActionType = {
+  type: 'success' | 'warning' | 'error' | 'info' | ''
+  payload?: any
+}
+
+/** status: { key: string | number, title: string, type: string }
+   * resolve a classes list for @arg key
+   * @param {String} key
+   * @param {String} type
+   */
+function resolveClasses (key: string, type: string) {
+  let classes = 'remixui_status'
+
+  switch (key) {
+    case 'succeed':
+      classes += ' fas fa-check-circle text-' + type + ' ' + 'remixui_statusCheck'
+      break
+    case 'edited':
+      classes += ' fas fa-sync text-' + type + ' ' + 'remixui_statusCheck'
+      break
+    case 'loading':
+      classes += ' fas fa-spinner text-' + type + ' ' + 'remixui_statusCheck'
+      break
+    case 'failed':
+      classes += ' fas fa-exclamation-triangle text-' + type + ' ' + 'remixui_statusCheck'
+      break
+    default: {
+      classes += ' badge badge-pill badge-' + type
+    }
+  }
+  return classes
+}
+
+export function iconStatusReducer (state, action: IconStatusActionType) {
+  const { type, payload } = action
+  if (type === 'success') {
+
+  }
   return defaultState
 }

From 74854070d598b01d08c92685030a0e2c65033eb1 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Wed, 3 Nov 2021 23:03:45 +0100
Subject: [PATCH 72/84] more fixes for icon status change

---
 .../src/app/components/side-panel.js          |  2 +-
 .../src/app/components/vertical-icons.js      | 26 ++---
 .../src/lib/components/Icon.tsx               | 95 ++++++++-----------
 .../src/lib/reducers/iconReducers.ts          |  4 +-
 4 files changed, 57 insertions(+), 70 deletions(-)

diff --git a/apps/remix-ide/src/app/components/side-panel.js b/apps/remix-ide/src/app/components/side-panel.js
index 0cc09d84d4..c82176134b 100644
--- a/apps/remix-ide/src/app/components/side-panel.js
+++ b/apps/remix-ide/src/app/components/side-panel.js
@@ -103,7 +103,7 @@ export class SidePanel extends AbstractPanel {
 
   addView (profile, view) {
     super.addView(profile, view)
-    this.verticalIcons.linkContent(profile)
+    setTimeout(() => this.verticalIcons.linkContent(profile), 60000)
   }
 
   /**
diff --git a/apps/remix-ide/src/app/components/vertical-icons.js b/apps/remix-ide/src/app/components/vertical-icons.js
index 3883181836..e67e7c9043 100644
--- a/apps/remix-ide/src/app/components/vertical-icons.js
+++ b/apps/remix-ide/src/app/components/vertical-icons.js
@@ -66,17 +66,19 @@ export class VerticalIcons extends Plugin {
     // the list of supported keys. 'none' will remove the status
     // const keys = ['edited', 'succeed', 'none', 'loading', 'failed']
     // const types = ['error', 'warning', 'success', 'info', '']
-    // const fn = (status) => {
-    //   if (!this.types.includes(status.type) && status.type) throw new Error(`type should be ${this.keys.join()}`)
-    //   if (status.key === undefined) throw new Error('status key should be defined')
-
-    //   if (typeof status.key === 'string' && (!this.keys.includes(status.key))) {
-    //     throw new Error('key should contain either number or ' + this.keys.join())
-    //   }
-    //   this.setIconStatus(profile.name, status)
-    // }
-    // this.iconStatus[profile.name] = fn
-    // this.on(profile.name, 'statusChanged', this.iconStatus[profile.name])
+    const fn = (status) => {
+      if (!this.types.includes(status.type) && status.type) throw new Error(`type should be ${this.keys.join()}`)
+      if (status.key === undefined) throw new Error('status key should be defined')
+
+      if (typeof status.key === 'string' && (!this.keys.includes(status.key))) {
+        throw new Error('key should contain either number or ' + this.keys.join())
+      }
+      this.setIconStatus(profile.name, status)
+    }
+    this.iconStatus[profile.name] = fn
+    this.on(profile.name, 'statusChanged', () => {
+      console.log('caught statusChanged in react!')
+    })
   }
 
   /**
@@ -114,8 +116,6 @@ export class VerticalIcons extends Plugin {
    */
   setIconStatus (name, status) {
     const el = this.icons[name]
-    // eslint-disable-next-line no-debugger
-    debugger
     if (!el) return
     const statusEl = el.querySelector('i')
     if (statusEl) {
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
index 25adcdf57c..b8bed447bd 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
@@ -5,17 +5,11 @@ import VerticalIconsContextMenu from '../vertical-icons-context-menu'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React, { Fragment, SyntheticEvent, useEffect, useReducer, useRef, useState } from 'react'
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
-import * as helper from '../../../../../../apps/remix-ide/src/lib/helper'
+// import * as helper from '../../../../../../apps/remix-ide/src/lib/helper'
 import { defaultState, iconStatusReducer } from '../reducers/iconReducers'
 
   interface IconProps {
     verticalIconPlugin: VerticalIcons
-    // kind: string
-    // name: string
-    // icon: string
-    // displayName: string
-    // tooltip: string
-    // documentation: string
     profile: any
     contextMenuAction: (evt: any, profileName: string, documentation: string) => void
     addActive: (profileName: string) => void
@@ -73,58 +67,42 @@ function Icon ({
    * @param {Object} status
    */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  function setIconStatus (name: string) {
-    if (!iconRef.current) return
-    const statusEl = iconRef.current.querySelector('i')
-    if (statusEl) {
-      iconRef.current.removeChild(statusEl) // need to eject component instead of removing?
-    }
-    if (status.key === 'none') return // remove status
+  // function setIconStatus (name: string, status: any) {
+  //   if (!iconRef.current) return
+  //   const statusEl = iconRef.current.querySelector('i')
+  //   if (statusEl) {
+  //     iconRef.current.removeChild(statusEl) // need to eject component instead of removing?
+  //   }
+  //   if (status.key === 'none') return // remove status
 
-    let text = ''
-    let key = ''
-    if (typeof status.key === 'number') {
-      key = status.key.toString()
-      text = key
-    } else key = helper.checkSpecialChars(status.key) ? '' : status.key
+  //   let text = ''
+  //   let key = ''
+  //   if (typeof status.key === 'number') {
+  //     key = status.key.toString()
+  //     text = key
+  //   } else key = helper.checkSpecialChars(status.key) ? '' : status.key
 
-    let type = ''
-    if (status.type === 'error') {
-      type = 'danger' // to use with bootstrap
-    } else type = helper.checkSpecialChars(status.type) ? '' : status.type
-    const title = helper.checkSpecialChars(status.title) ? '' : status.title
+  //   let type = ''
+  //   if (status.type === 'error') {
+  //     type = 'danger' // to use with bootstrap
+  //   } else type = helper.checkSpecialChars(status.type) ? '' : status.type
+  //   const title = helper.checkSpecialChars(status.title) ? '' : status.title
 
-    const icon = document.createElement('i')
-    icon.title = title
-    // icon.className = resolveClasses(key, type)
-    icon.ariaHidden = 'true'
-    const innerText = document.createTextNode(text)
-    icon.appendChild(innerText)
-    iconRef.current!.appendChild(icon)
-    iconRef.current.classList.add('remixui_icon')
-  }
-
-  function setErrorStatus () {
-    if (!verticalIconPlugin.types.includes(status.type) && status.type) throw new Error(`type should be ${verticalIconPlugin.keys.join()}`)
-    if (status.key === undefined) throw new Error('status key should be defined')
-    if (typeof status.key === 'string' && (!verticalIconPlugin.keys.includes(status.key))) {
-      throw new Error('key should contain either number or ' + verticalIconPlugin.keys.join())
-    }
-    setIconStatus(profile.name)
-  }
-  function listenOnStatus () {
-    // verticalIconPlugin.iconStatus[profile.name] = setErrorStatus // { profileName: profile.name, errorStatus: setErrorStatus } ?
-    verticalIconPlugin.on(profile.name, 'statusChanged', dispatchIconStatus({ type: 'success', payload: { } }))
-  }
+  //   const icon = document.createElement('i')
+  //   icon.title = title
+  //   // icon.className = resolveClasses(key, type)
+  //   icon.ariaHidden = 'true'
+  //   const innerText = document.createTextNode(text)
+  //   icon.appendChild(innerText)
+  //   iconRef.current!.appendChild(icon)
+  //   iconRef.current.classList.add('remixui_icon')
+  // }
 
   useEffect(() => {
-    listenOnStatus()
-    return () => {
-      console.log('just listened for status change ', { profile })
-      addEventListener('statusChanged', (e) => {
-        console.log('statusChanged just happend for this icon and this is its payload ', e)
-      })
-    }
+    console.log('profile.name: ', profile.name)
+    verticalIconPlugin.on(profile.name, 'statusChanged', () => {
+      console.log('caught statusChanged in react! icon.tsx')
+    })
   }, [])
 
   return (
@@ -156,6 +134,15 @@ function Icon ({
       >
         <img className="remixui_image" src={icon} alt={name} />
       </div>
+      {/* { status && status.profileName.length
+        ? <i
+          title={status.title}
+          className={resolveClasses(status.key as string, status.type)}
+          aria-hidden="true"
+        >
+          {status.text}
+        </i> : null
+      } */}
       {showContext ? (
         <VerticalIconsContextMenu
           pageX={pageX}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconReducers.ts b/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconReducers.ts
index d97b3849a4..53b318d918 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconReducers.ts
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconReducers.ts
@@ -17,7 +17,7 @@ export type IconStatusActionType = {
    * @param {String} key
    * @param {String} type
    */
-function resolveClasses (key: string, type: string) {
+export function resolveClasses (key: string, type: string) {
   let classes = 'remixui_status'
 
   switch (key) {
@@ -43,7 +43,7 @@ function resolveClasses (key: string, type: string) {
 export function iconStatusReducer (state, action: IconStatusActionType) {
   const { type, payload } = action
   if (type === 'success') {
-
+    
   }
   return defaultState
 }

From 10998817baf7f04589e40e6e47212ecc2c1a258c Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Sun, 7 Nov 2021 20:25:06 +0100
Subject: [PATCH 73/84] fix statusChanged handling bug

---
 .../src/app/components/side-panel.js          |   2 +-
 .../src/app/components/vertical-icons.js      | 136 +++++++++---------
 .../src/lib/compiler-container.tsx            |   2 +-
 .../solidity-compiler/src/lib/css/style.css   |   2 +-
 .../src/lib/components/Badge.tsx              |  57 ++++++++
 .../src/lib/components/Home.tsx               |   2 +-
 .../src/lib/components/Icon.tsx               | 102 +++++++------
 .../src/lib/components/Settings.tsx           |   2 +-
 .../src/lib/reducers/iconBadgeReducer.ts      |  60 ++++++++
 .../src/lib/reducers/iconReducers.ts          |  49 -------
 .../src/lib/remix-ui-vertical-icons-panel.css |  16 +--
 .../src/lib/remix-ui-vertical-icons-panel.tsx |   4 +-
 12 files changed, 248 insertions(+), 186 deletions(-)
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx
 create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts
 delete mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconReducers.ts

diff --git a/apps/remix-ide/src/app/components/side-panel.js b/apps/remix-ide/src/app/components/side-panel.js
index c82176134b..b3c723caec 100644
--- a/apps/remix-ide/src/app/components/side-panel.js
+++ b/apps/remix-ide/src/app/components/side-panel.js
@@ -103,7 +103,7 @@ export class SidePanel extends AbstractPanel {
 
   addView (profile, view) {
     super.addView(profile, view)
-    setTimeout(() => this.verticalIcons.linkContent(profile), 60000)
+    setTimeout(() => this.verticalIcons.linkContent(profile), 150)
   }
 
   /**
diff --git a/apps/remix-ide/src/app/components/vertical-icons.js b/apps/remix-ide/src/app/components/vertical-icons.js
index e67e7c9043..e74ff87418 100644
--- a/apps/remix-ide/src/app/components/vertical-icons.js
+++ b/apps/remix-ide/src/app/components/vertical-icons.js
@@ -5,7 +5,7 @@ import ReactDOM from 'react-dom'
 import React from 'react' // eslint-disable-line
 // eslint-disable-next-line no-unused-vars
 import { RemixUiVerticalIconsPanel } from '@remix-ui/vertical-icons-panel'
-var helper = require('../../lib/helper')
+// var helper = require('../../lib/helper')
 const globalRegistry = require('../../global/registry')
 const { Plugin } = require('@remixproject/engine')
 const EventEmitter = require('events')
@@ -66,19 +66,19 @@ export class VerticalIcons extends Plugin {
     // the list of supported keys. 'none' will remove the status
     // const keys = ['edited', 'succeed', 'none', 'loading', 'failed']
     // const types = ['error', 'warning', 'success', 'info', '']
-    const fn = (status) => {
-      if (!this.types.includes(status.type) && status.type) throw new Error(`type should be ${this.keys.join()}`)
-      if (status.key === undefined) throw new Error('status key should be defined')
-
-      if (typeof status.key === 'string' && (!this.keys.includes(status.key))) {
-        throw new Error('key should contain either number or ' + this.keys.join())
-      }
-      this.setIconStatus(profile.name, status)
-    }
-    this.iconStatus[profile.name] = fn
-    this.on(profile.name, 'statusChanged', () => {
-      console.log('caught statusChanged in react!')
-    })
+    // const fn = (status) => {
+    //   if (!this.types.includes(status.type) && status.type) throw new Error(`type should be ${this.keys.join()}`)
+    //   if (status.key === undefined) throw new Error('status key should be defined')
+
+    //   if (typeof status.key === 'string' && (!this.keys.includes(status.key))) {
+    //     throw new Error('key should contain either number or ' + this.keys.join())
+    //   }
+    //   this.setIconStatus(profile.name, status)
+    // }
+    // this.iconStatus[profile.name] = fn
+    // this.on(profile.name, 'statusChanged', () => {
+    //   console.log('caught statusChanged in react!')
+    // })
   }
 
   /**
@@ -86,66 +86,66 @@ export class VerticalIcons extends Plugin {
    * @param {Object} key
    * @param {Object} type
    */
-  resolveClasses (key, type) {
-    let classes = 'remixui_status'
-
-    switch (key) {
-      case 'succeed':
-        classes += ' fas fa-check-circle text-' + type + ' ' + 'remixui_statusCheck'
-        break
-      case 'edited':
-        classes += ' fas fa-sync text-' + type + ' ' + 'remixui_statusCheck'
-        break
-      case 'loading':
-        classes += ' fas fa-spinner text-' + type + ' ' + 'remixui_statusCheck'
-        break
-      case 'failed':
-        classes += ' fas fa-exclamation-triangle text-' + type + ' ' + 'remixui_statusCheck'
-        break
-      default: {
-        classes += ' badge badge-pill badge-' + type
-      }
-    }
-    return classes
-  }
+  // resolveClasses (key, type) {
+  //   let classes = 'remixui_status'
+
+  //   switch (key) {
+  //     case 'succeed':
+  //       classes += ' fas fa-check-circle text-' + type + ' ' + 'remixui_statusCheck'
+  //       break
+  //     case 'edited':
+  //       classes += ' fas fa-sync text-' + type + ' ' + 'remixui_statusCheck'
+  //       break
+  //     case 'loading':
+  //       classes += ' fas fa-spinner text-' + type + ' ' + 'remixui_statusCheck'
+  //       break
+  //     case 'failed':
+  //       classes += ' fas fa-exclamation-triangle text-' + type + ' ' + 'remixui_statusCheck'
+  //       break
+  //     default: {
+  //       classes += ' badge badge-pill badge-' + type
+  //     }
+  //   }
+  //   return classes
+  // }
 
   /**
    * Set a new status for the @arg name
    * @param {String} name
    * @param {Object} status
    */
-  setIconStatus (name, status) {
-    const el = this.icons[name]
-    if (!el) return
-    const statusEl = el.querySelector('i')
-    if (statusEl) {
-      el.removeChild(statusEl)
-    }
-    if (status.key === 'none') return // remove status
-
-    let text = ''
-    let key = ''
-    if (typeof status.key === 'number') {
-      key = status.key.toString()
-      text = key
-    } else key = helper.checkSpecialChars(status.key) ? '' : status.key
-
-    let type = ''
-    if (status.type === 'error') {
-      type = 'danger' // to use with bootstrap
-    } else type = helper.checkSpecialChars(status.type) ? '' : status.type
-    const title = helper.checkSpecialChars(status.title) ? '' : status.title
-
-    el.appendChild(`<i
-    title="${title}"
-      class="${this.resolveClasses(key, type)}"
-      aria-hidden="true"
-    >
-    ${text}
-    </i>`)
-
-    el.classList.add('remixui_icon')
-  }
+  // setIconStatus (name, status) {
+  //   const el = this.icons[name]
+  //   if (!el) return
+  //   const statusEl = el.querySelector('i')
+  //   if (statusEl) {
+  //     el.removeChild(statusEl)
+  //   }
+  //   if (status.key === 'none') return // remove status
+
+  //   let text = ''
+  //   let key = ''
+  //   if (typeof status.key === 'number') {
+  //     key = status.key.toString()
+  //     text = key
+  //   } else key = helper.checkSpecialChars(status.key) ? '' : status.key
+
+  //   let type = ''
+  //   if (status.type === 'error') {
+  //     type = 'danger' // to use with bootstrap
+  //   } else type = helper.checkSpecialChars(status.type) ? '' : status.type
+  //   const title = helper.checkSpecialChars(status.title) ? '' : status.title
+
+  //   el.appendChild(`<i
+  //   title="${title}"
+  //     class="${this.resolveClasses(key, type)}"
+  //     aria-hidden="true"
+  //   >
+  //   ${text}
+  //   </i>`)
+
+  //   el.classList.add('remixui_icon')
+  // }
 
   /**
    * Remove an icon from the map
diff --git a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
index b17d16afeb..2636c9d77c 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
+++ b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
@@ -596,7 +596,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
           }
           <button id="compileBtn" data-id="compilerContainerCompileBtn" className="btn btn-primary btn-block remixui_disabled mt-3" title="Compile" onClick={compile} disabled={disableCompileButton}>
             <span>
-              { <i ref={compileIcon} className="fas fa-sync remixui_icon" aria-hidden="true"></i> }
+              { <i ref={compileIcon} className="fas fa-sync remixui_iconbtn" aria-hidden="true"></i> }
               Compile { typeof state.compiledFileName === 'string' ? helper.extractNameFromKey(state.compiledFileName) || '<no file selected>' : '<no file selected>' }
             </span>
           </button>
diff --git a/libs/remix-ui/solidity-compiler/src/lib/css/style.css b/libs/remix-ui/solidity-compiler/src/lib/css/style.css
index d2bbe9e606..bf1d4d05c9 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/css/style.css
+++ b/libs/remix-ui/solidity-compiler/src/lib/css/style.css
@@ -151,7 +151,7 @@
   padding: 8px 0;
   border: none;
 }
-.remixui_icon {
+.remixui_iconbtn {
   margin-right: 0.3em;
 }
 .remixui_errorBlobs {
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx
new file mode 100644
index 0000000000..bd2dcd5cb8
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx
@@ -0,0 +1,57 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// eslint-disable-next-line no-use-before-define
+import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
+// eslint-disable-next-line no-use-before-define
+import React, { Fragment, useEffect, useReducer } from 'react'
+import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
+import { BadgeStatus, IconProfile, IconStatus } from './Icon'
+
+interface BadgeProps {
+  verticalIconPlugin: VerticalIcons
+  iconRef: React.MutableRefObject<any>
+  profile: IconProfile,
+  badgeStatus: BadgeStatus
+}
+
+// eslint-disable-next-line no-undef
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function Badge ({ iconRef, verticalIconPlugin, profile, badgeStatus }: BadgeProps) {
+  /**
+   * resolve a classes list for @arg key
+   * @param {Object} key
+   * @param {Object} type
+   */
+  function resolveClasses (key: string, type: string) {
+    let classes = 'remixui_status'
+    switch (key) {
+      case 'succeed':
+        classes += ' fas fa-check-circle text-' + type + ' ' + 'remixui_statusCheck'
+        break
+      case 'edited':
+        classes += ' fas fa-sync text-' + type + ' ' + 'remixui_statusCheck'
+        break
+      case 'loading':
+        classes += ' fas fa-spinner text-' + type + ' ' + 'remixui_statusCheck'
+        break
+      case 'failed':
+        classes += ' fas fa-exclamation-triangle text-' + type + ' ' + 'remixui_statusCheck'
+        break
+      default: {
+        classes += ' badge badge-pill badge-' + type
+      }
+    }
+    return classes
+  }
+
+  return (
+    <i
+      title={badgeStatus.title}
+      className={`${resolveClasses(badgeStatus.key, badgeStatus.type!)} remixui_status`}
+      aria-hidden="true"
+    >
+      {badgeStatus.text}
+    </i>
+  )
+}
+
+export default Badge
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Home.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Home.tsx
index 7490819deb..8801a9556f 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Home.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Home.tsx
@@ -10,7 +10,7 @@ interface HomeProps {
 function Home ({ verticalIconPlugin }: HomeProps) {
   return (
     <div
-      className="m-1 mt-2 remixui_homeIcon"
+      className="pl-1 mt-2 remixui_homeIcon"
       onClick={async () => verticalIconPlugin.activateHome()}
       // @ts-ignore
       plugin="home"
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
index b8bed447bd..ded511240b 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
@@ -6,16 +6,48 @@ import VerticalIconsContextMenu from '../vertical-icons-context-menu'
 import React, { Fragment, SyntheticEvent, useEffect, useReducer, useRef, useState } from 'react'
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
 // import * as helper from '../../../../../../apps/remix-ide/src/lib/helper'
-import { defaultState, iconStatusReducer } from '../reducers/iconReducers'
+import Badge from './Badge'
+import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
 
   interface IconProps {
     verticalIconPlugin: VerticalIcons
-    profile: any
+    profile: IconProfile
     contextMenuAction: (evt: any, profileName: string, documentation: string) => void
     addActive: (profileName: string) => void
     removeActive: () => void
   }
 
+export interface IconStatus {
+    key: string
+    title: string
+    type: string
+  }
+
+export interface BadgeStatus extends IconStatus {
+    text: string
+  }
+
+export interface IconProfile {
+    description: string
+    displayName: string
+    documentation: string
+    events: any[]
+    icon: string
+    kind: string
+    location: string
+    methods: string[]
+    name: string
+    version: string
+    tooltip?: string
+  }
+
+const initialState = {
+  text: '',
+  key: '',
+  title: '',
+  type: ''
+}
+
 function Icon ({
   profile,
   verticalIconPlugin,
@@ -39,8 +71,8 @@ function Icon ({
   const [showContext, setShowContext] = useState(false)
   const [canDeactivate] = useState(false)
   const iconRef = useRef<any>(null)
+  const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState)
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [status, dispatchIconStatus] = useReducer(iconStatusReducer, defaultState)
 
   const handleContextMenu = (e: SyntheticEvent & PointerEvent) => {
     const deactivationState = verticalIconPlugin.appManager
@@ -59,49 +91,10 @@ function Icon ({
     setShowContext(false)
   }
 
-  /**
-   * Set a new status for the @arg name
-   * keys = ['succeed', 'edited', 'none', 'loading', 'failed']
-   * types = ['error', 'warning', 'success', 'info', '']
-   * @param {String} name
-   * @param {Object} status
-   */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // function setIconStatus (name: string, status: any) {
-  //   if (!iconRef.current) return
-  //   const statusEl = iconRef.current.querySelector('i')
-  //   if (statusEl) {
-  //     iconRef.current.removeChild(statusEl) // need to eject component instead of removing?
-  //   }
-  //   if (status.key === 'none') return // remove status
-
-  //   let text = ''
-  //   let key = ''
-  //   if (typeof status.key === 'number') {
-  //     key = status.key.toString()
-  //     text = key
-  //   } else key = helper.checkSpecialChars(status.key) ? '' : status.key
-
-  //   let type = ''
-  //   if (status.type === 'error') {
-  //     type = 'danger' // to use with bootstrap
-  //   } else type = helper.checkSpecialChars(status.type) ? '' : status.type
-  //   const title = helper.checkSpecialChars(status.title) ? '' : status.title
-
-  //   const icon = document.createElement('i')
-  //   icon.title = title
-  //   // icon.className = resolveClasses(key, type)
-  //   icon.ariaHidden = 'true'
-  //   const innerText = document.createTextNode(text)
-  //   icon.appendChild(innerText)
-  //   iconRef.current!.appendChild(icon)
-  //   iconRef.current.classList.add('remixui_icon')
-  // }
-
   useEffect(() => {
-    console.log('profile.name: ', profile.name)
-    verticalIconPlugin.on(profile.name, 'statusChanged', () => {
-      console.log('caught statusChanged in react! icon.tsx')
+    verticalIconPlugin.on(profile.name, 'statusChanged', (iconStatus: IconStatus) => {
+      const action: IconBadgeReducerAction = { type: profile.name, payload: { status: iconStatus, ref: iconRef } }
+      dispatchStatusUpdate(action)
     })
   }, [])
 
@@ -134,15 +127,16 @@ function Icon ({
       >
         <img className="remixui_image" src={icon} alt={name} />
       </div>
-      {/* { status && status.profileName.length
-        ? <i
-          title={status.title}
-          className={resolveClasses(status.key as string, status.type)}
-          aria-hidden="true"
-        >
-          {status.text}
-        </i> : null
-      } */}
+      {
+        verticalIconPlugin.keys.includes(badgeStatus.key) ? (
+          <Badge
+            iconRef={iconRef}
+            verticalIconPlugin={verticalIconPlugin}
+            profile={profile}
+            badgeStatus={badgeStatus}
+          />
+        ) : null
+      }
       {showContext ? (
         <VerticalIconsContextMenu
           pageX={pageX}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
index 7f99d546b4..d5af973807 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
@@ -33,7 +33,7 @@ function Settings ({ scrollableRef, verticalIconsPlugin, itemContextAction, addA
     })
   }, [])
   return (
-    <div id="settingsIcons" data-id="vertialIconsSettingsIcons" ref={settingsRef}>
+    <div id="settingsIcons" className="remixui_settings flex-grow-0" data-id="vertialIconsSettingsIcons" ref={settingsRef}>
       <Chevron
         divElementRef={scrollableRef}
         cssRule={'fa fa-chevron-down remixui_icon-chevron mt-0 mb-0 ml-1 pl-3'}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts b/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts
new file mode 100644
index 0000000000..27bb556ff7
--- /dev/null
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts
@@ -0,0 +1,60 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import helper from 'apps/remix-ide/src/lib/helper'
+import { BadgeStatus, IconStatus } from '../components/Icon'
+import React from 'react'
+
+export type IconBadgeReducerAction = {
+  readonly type: string
+  readonly payload: any
+}
+
+// const fn = (status: IconStatus) => {
+//   if (!verticalIconPlugin.types.includes(status.type) && status.type) throw new Error(`type should be ${verticalIconPlugin.keys.join()}`)
+//   if (status.key === undefined) throw new Error('status key should be defined')
+
+//   if (typeof status.key === 'string' && (!verticalIconPlugin.keys.includes(status.key))) {
+//     throw new Error('key should contain either number or ' + verticalIconPlugin.keys.join())
+//   }
+// }
+
+/**
+   * Set a new status for the @arg name
+   * @param {String} name
+   * @param {Object} status
+   */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+// if (!ref.current) return
+function setIconStatus (name: string, status: IconStatus, ref: React.MutableRefObject<any>) {
+  const statusEl = ref.current.querySelector('i')
+  if (statusEl) {
+    ref.current.removeChild(statusEl) // need to eject component instead of removing?
+  }
+  if (status.key === 'none') return { ...status, text: '' } // remove status
+
+  let text = ''
+  let key = ''
+  if (typeof status.key === 'number') {
+    key = status.key
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    text = key
+  } else key = helper.checkSpecialChars(status.key) ? '' : status.key
+
+  let thisType = ''
+  if (status.type === 'error') {
+    thisType = 'danger' // to use with bootstrap
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  } else thisType = helper.checkSpecialChars(status.type) ? '' : status.type!
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const title = helper.checkSpecialChars(status.title) ? '' : status.title
+  // ref.current.classList.add('remixui_icon')
+  return { title, type: thisType, key, text }
+}
+
+export function iconBadgeReducer (state: BadgeStatus, action: IconBadgeReducerAction) {
+  const status = setIconStatus(action.type, action.payload.status, action.payload.ref)
+  if (action.type.length > 0) {
+    console.log(`from reducer of ${action.type} :`, { status })
+    return status
+  }
+  return state
+}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconReducers.ts b/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconReducers.ts
deleted file mode 100644
index 53b318d918..0000000000
--- a/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconReducers.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-export const defaultState: {
-  key: string | number
-  title: string
-  type: string
-  text: string
-  profileName: string
-  errorStatus: () => void
-} = { key: '', title: '', type: '', text: '', profileName: '', errorStatus: () => {} }
-
-export type IconStatusActionType = {
-  type: 'success' | 'warning' | 'error' | 'info' | ''
-  payload?: any
-}
-
-/** status: { key: string | number, title: string, type: string }
-   * resolve a classes list for @arg key
-   * @param {String} key
-   * @param {String} type
-   */
-export function resolveClasses (key: string, type: string) {
-  let classes = 'remixui_status'
-
-  switch (key) {
-    case 'succeed':
-      classes += ' fas fa-check-circle text-' + type + ' ' + 'remixui_statusCheck'
-      break
-    case 'edited':
-      classes += ' fas fa-sync text-' + type + ' ' + 'remixui_statusCheck'
-      break
-    case 'loading':
-      classes += ' fas fa-spinner text-' + type + ' ' + 'remixui_statusCheck'
-      break
-    case 'failed':
-      classes += ' fas fa-exclamation-triangle text-' + type + ' ' + 'remixui_statusCheck'
-      break
-    default: {
-      classes += ' badge badge-pill badge-' + type
-    }
-  }
-  return classes
-}
-
-export function iconStatusReducer (state, action: IconStatusActionType) {
-  const { type, payload } = action
-  if (type === 'success') {
-    
-  }
-  return defaultState
-}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
index 536b67ea90..6e1e71a5f3 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
@@ -1,8 +1,7 @@
 .remixui_homeIcon {
-    display: block;
+    /* display: block; */
     width: 42px;
     height: 42px;
-    margin-bottom: 20px;
     cursor: pointer;
   }
   .remixui_homeIcon svg path {
@@ -40,9 +39,9 @@
     bottom: 0;
   }
   .remixui_status {
-    position: absolute;
+    /* position: relative;
     bottom: 0;
-    right: 0;
+    right: 0; */
   }
   .remixui_statusCheck {
     font-size: 1.2em;
@@ -83,7 +82,8 @@
     -ms-overflow-style: none;
   }
   .remixui_scrollable-container {
-    height: 550px;
+    flex-basis: 510px;
+    flex-grow: 2;
     /* border-bottom: 3px solid #3f4455; */
   }
   .remixui_scrollbar::-webkit-scrollbar { /* Chrome, Safari and other Webkit browsers*/
@@ -100,12 +100,12 @@
   }
 
   .remixui_settings {
-    height: 30px;
+    flex-basis: 50px;
   }
 
   .remixui_requiredSection {
-    min-height: 180px;
-    max-height: 330px;
+    flex-basis: 180px;
+    flex-grow: 1;
   }
 
   #menuitems {
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
index d813a69c4f..3496f468d9 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx
@@ -95,10 +95,10 @@ export function RemixUiVerticalIconsPanel ({
 
   return (
     <div id="iconsP" className="h-100">
-      <div className="remixui_icons" ref={iconPanelRef}>
+      <div className="remixui_icons d-flex flex-column vh-100" ref={iconPanelRef}>
+        <Home verticalIconPlugin={verticalIconsPlugin} />
         <div className={scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight
           ? 'remixui_default-icons-container remixui_requiredSection' : 'remixui_requiredSection'}>
-          <Home verticalIconPlugin={verticalIconsPlugin} />
           <RequiredSection
             verticalIconsPlugin={verticalIconsPlugin}
             addActive={addActive}

From 5c797c2a043c707132c10c09bcf6006bdefbfb23 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Sun, 7 Nov 2021 21:45:26 +0100
Subject: [PATCH 74/84] add flexbox to vertical icons panel

---
 .../vertical-icons-panel/src/lib/components/Settings.tsx   | 2 +-
 .../src/lib/remix-ui-vertical-icons-panel.css              | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
index d5af973807..5aee6995b0 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
@@ -33,7 +33,7 @@ function Settings ({ scrollableRef, verticalIconsPlugin, itemContextAction, addA
     })
   }, [])
   return (
-    <div id="settingsIcons" className="remixui_settings flex-grow-0" data-id="vertialIconsSettingsIcons" ref={settingsRef}>
+    <div id="settingsIcons" className="remixui_settings mb-0 flex-grow-0" data-id="vertialIconsSettingsIcons" ref={settingsRef}>
       <Chevron
         divElementRef={scrollableRef}
         cssRule={'fa fa-chevron-down remixui_icon-chevron mt-0 mb-0 ml-1 pl-3'}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
index 6e1e71a5f3..55f1902eb5 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
@@ -11,6 +11,10 @@
     fill: var(--primary);
   }
   .remixui_icons {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-between;
+    align-items: center;
   }
   .remixui_icon {
     cursor: pointer;
@@ -35,7 +39,8 @@
     padding: 4px;
   }
   .remixui_icon[title='Settings'] {
-    position: absolute;
+    order: 5;
+    align-self: center;
     bottom: 0;
   }
   .remixui_status {

From 072273204a1a529f47f819835519585fc9240cb8 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 8 Nov 2021 02:02:31 +0100
Subject: [PATCH 75/84] moved icon statuschanged handling higher up

---
 .../src/app/components/vertical-icons.js      |  4 +--
 .../src/lib/components/Badge.tsx              | 33 ++++++++++++-------
 .../src/lib/components/Debugger.tsx           | 31 +++++++++++++++--
 .../src/lib/components/Icon.tsx               | 29 +---------------
 .../src/lib/components/Solidity.tsx           | 29 ++++++++++++++--
 .../lib/components/SolidityStaticAnalysis.tsx | 28 ++++++++++++++--
 .../src/lib/components/Udapp.tsx              | 31 +++++++++++++++--
 .../src/lib/reducers/iconBadgeReducer.ts      | 22 +++++--------
 .../src/lib/remix-ui-vertical-icons-panel.css |  5 +--
 9 files changed, 147 insertions(+), 65 deletions(-)

diff --git a/apps/remix-ide/src/app/components/vertical-icons.js b/apps/remix-ide/src/app/components/vertical-icons.js
index e74ff87418..0033cc532d 100644
--- a/apps/remix-ide/src/app/components/vertical-icons.js
+++ b/apps/remix-ide/src/app/components/vertical-icons.js
@@ -76,9 +76,7 @@ export class VerticalIcons extends Plugin {
     //   this.setIconStatus(profile.name, status)
     // }
     // this.iconStatus[profile.name] = fn
-    // this.on(profile.name, 'statusChanged', () => {
-    //   console.log('caught statusChanged in react!')
-    // })
+    // this.on(profile.name, this.iconStatus[profile.name])
   }
 
   /**
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx
index bd2dcd5cb8..8b49b65b9d 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx
@@ -7,15 +7,12 @@ import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeR
 import { BadgeStatus, IconProfile, IconStatus } from './Icon'
 
 interface BadgeProps {
-  verticalIconPlugin: VerticalIcons
-  iconRef: React.MutableRefObject<any>
-  profile: IconProfile,
   badgeStatus: BadgeStatus
 }
 
 // eslint-disable-next-line no-undef
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function Badge ({ iconRef, verticalIconPlugin, profile, badgeStatus }: BadgeProps) {
+function Badge ({ badgeStatus }: BadgeProps) {
   /**
    * resolve a classes list for @arg key
    * @param {Object} key
@@ -43,14 +40,28 @@ function Badge ({ iconRef, verticalIconPlugin, profile, badgeStatus }: BadgeProp
     return classes
   }
 
+  function checkStatusKeyValue (value: any, type: string) {
+    if (value === 'succeed' || value === 'edited' || value === 'loading' || value === 'failed' ||
+      typeof value === 'number' || type === 'warning' || type === 'error' || type === 'success' || type === 'info' || type === 'danger') {
+      return true
+    }
+    return false
+  }
+
   return (
-    <i
-      title={badgeStatus.title}
-      className={`${resolveClasses(badgeStatus.key, badgeStatus.type!)} remixui_status`}
-      aria-hidden="true"
-    >
-      {badgeStatus.text}
-    </i>
+    <Fragment>
+      {
+        badgeStatus && checkStatusKeyValue(badgeStatus.key, badgeStatus.type) ? (
+          <i
+            title={badgeStatus.title}
+            className={resolveClasses(badgeStatus.key, badgeStatus.type!)}
+            aria-hidden="true"
+          >
+            {badgeStatus.text}
+          </i>
+        ) : null
+      }
+    </Fragment>
   )
 }
 
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx
index 6e4cfbfc23..6fafcdc7be 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx
@@ -1,7 +1,9 @@
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
 // eslint-disable-next-line no-use-before-define
-import React, { Fragment } from 'react'
-import Icon from './Icon'
+import React, { Fragment, useEffect, useReducer, useRef } from 'react'
+import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
+import Badge from './Badge'
+import Icon, { IconStatus } from './Icon'
 
 interface DebuggerProps {
   verticalIconsPlugin: VerticalIcons
@@ -10,7 +12,24 @@ interface DebuggerProps {
   removeActive: () => void
 }
 
+const initialState = {
+  text: '',
+  key: '',
+  title: '',
+  type: ''
+}
+
 function Debugger ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: DebuggerProps) {
+  const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState)
+  const ref = useRef<any>(null)
+
+  useEffect(() => {
+    verticalIconsPlugin.on('debugger', 'statusChanged', (iconStatus: IconStatus) => {
+      const action: IconBadgeReducerAction = { type: 'debugger', payload: { status: iconStatus, ref: ref, verticalIconPlugin: verticalIconsPlugin } }
+      dispatchStatusUpdate(action)
+    })
+  }, [])
+
   return (
     <Fragment>
       {verticalIconsPlugin.targetProfileForChange &&
@@ -31,6 +50,14 @@ function Debugger ({ verticalIconsPlugin, itemContextAction, addActive, removeAc
                   verticalIconsPlugin.targetProfileForChange[p].displayName
                 }
               />
+              {
+                badgeStatus && verticalIconsPlugin.keys.includes(badgeStatus.key) &&
+                  verticalIconsPlugin.types.includes(badgeStatus.type) ? (
+                    <Badge
+                      badgeStatus={badgeStatus}
+                    />
+                  ) : null
+              }
             </div>
           ))
         : null}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
index ded511240b..2dde1a9b1a 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
@@ -5,9 +5,6 @@ import VerticalIconsContextMenu from '../vertical-icons-context-menu'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React, { Fragment, SyntheticEvent, useEffect, useReducer, useRef, useState } from 'react'
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
-// import * as helper from '../../../../../../apps/remix-ide/src/lib/helper'
-import Badge from './Badge'
-import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
 
   interface IconProps {
     verticalIconPlugin: VerticalIcons
@@ -41,13 +38,6 @@ export interface IconProfile {
     tooltip?: string
   }
 
-const initialState = {
-  text: '',
-  key: '',
-  title: '',
-  type: ''
-}
-
 function Icon ({
   profile,
   verticalIconPlugin,
@@ -71,7 +61,6 @@ function Icon ({
   const [showContext, setShowContext] = useState(false)
   const [canDeactivate] = useState(false)
   const iconRef = useRef<any>(null)
-  const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState)
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
 
   const handleContextMenu = (e: SyntheticEvent & PointerEvent) => {
@@ -91,13 +80,6 @@ function Icon ({
     setShowContext(false)
   }
 
-  useEffect(() => {
-    verticalIconPlugin.on(profile.name, 'statusChanged', (iconStatus: IconStatus) => {
-      const action: IconBadgeReducerAction = { type: profile.name, payload: { status: iconStatus, ref: iconRef } }
-      dispatchStatusUpdate(action)
-    })
-  }, [])
-
   return (
     <Fragment>
       <div
@@ -127,16 +109,7 @@ function Icon ({
       >
         <img className="remixui_image" src={icon} alt={name} />
       </div>
-      {
-        verticalIconPlugin.keys.includes(badgeStatus.key) ? (
-          <Badge
-            iconRef={iconRef}
-            verticalIconPlugin={verticalIconPlugin}
-            profile={profile}
-            badgeStatus={badgeStatus}
-          />
-        ) : null
-      }
+
       {showContext ? (
         <VerticalIconsContextMenu
           pageX={pageX}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Solidity.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Solidity.tsx
index 7040f48dd5..936bfb6a8a 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Solidity.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Solidity.tsx
@@ -1,7 +1,9 @@
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
 // eslint-disable-next-line no-use-before-define
-import React, { Fragment } from 'react'
-import Icon from './Icon'
+import React, { Fragment, useEffect, useReducer } from 'react'
+import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
+import Badge from './Badge'
+import Icon, { IconStatus } from './Icon'
 
 interface SolidityProps {
   verticalIconsPlugin: VerticalIcons
@@ -9,8 +11,23 @@ interface SolidityProps {
   addActive: (name: string) => void
   removeActive: () => void
 }
+const initialState = {
+  text: '',
+  key: '',
+  title: '',
+  type: ''
+}
 
 function Solidity ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: SolidityProps) {
+  const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState)
+
+  useEffect(() => {
+    verticalIconsPlugin.on('solidity', 'statusChanged', (iconStatus: IconStatus) => {
+      const action: IconBadgeReducerAction = { type: 'solidity', payload: { status: iconStatus, verticalIconPlugin: verticalIconsPlugin } }
+      dispatchStatusUpdate(action)
+    })
+    console.log('solidity icon useEffect handled no issues')
+  }, [])
   return (
     <Fragment>
       {verticalIconsPlugin.targetProfileForChange &&
@@ -31,6 +48,14 @@ function Solidity ({ verticalIconsPlugin, itemContextAction, addActive, removeAc
                   verticalIconsPlugin.targetProfileForChange[p].displayName
                 }
               />
+              {
+                badgeStatus && verticalIconsPlugin.keys.includes(badgeStatus.key) &&
+                  verticalIconsPlugin.types.includes(badgeStatus.type) ? (
+                    <Badge
+                      badgeStatus={badgeStatus}
+                    />
+                  ) : null
+              }
             </div>
           ))
         : null}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/SolidityStaticAnalysis.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/SolidityStaticAnalysis.tsx
index ce2fe43aeb..22f3069244 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/SolidityStaticAnalysis.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/SolidityStaticAnalysis.tsx
@@ -1,7 +1,9 @@
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
 // eslint-disable-next-line no-use-before-define
-import React, { Fragment } from 'react'
-import Icon from './Icon'
+import React, { Fragment, useEffect, useReducer } from 'react'
+import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
+import Badge from './Badge'
+import Icon, { IconStatus } from './Icon'
 
 interface SolidityStaticAnalysisProps {
   verticalIconsPlugin: VerticalIcons
@@ -10,7 +12,21 @@ interface SolidityStaticAnalysisProps {
   removeActive: () => void
 }
 
+const initialState = {
+  text: '',
+  key: '',
+  title: '',
+  type: ''
+}
+
 function SolidityStaticAnalysis ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: SolidityStaticAnalysisProps) {
+  const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState)
+  useEffect(() => {
+    verticalIconsPlugin.on('solidityStaticAnalysis', 'statusChanged', (iconStatus: IconStatus) => {
+      const action: IconBadgeReducerAction = { type: 'solidityStaticAnalysis', payload: { status: iconStatus, verticalIconPlugin: verticalIconsPlugin } }
+      dispatchStatusUpdate(action)
+    })
+  }, [])
   return (
     <Fragment>
       {verticalIconsPlugin.targetProfileForChange &&
@@ -31,6 +47,14 @@ function SolidityStaticAnalysis ({ verticalIconsPlugin, itemContextAction, addAc
                   verticalIconsPlugin.targetProfileForChange[p].displayName
                 }
               />
+              {
+                badgeStatus && verticalIconsPlugin.keys.includes(badgeStatus.key) &&
+                  verticalIconsPlugin.types.includes(badgeStatus.type) ? (
+                    <Badge
+                      badgeStatus={badgeStatus}
+                    />
+                  ) : null
+              }
             </div>
           ))
         : null}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Udapp.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Udapp.tsx
index 377609d968..44c592e3f7 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Udapp.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Udapp.tsx
@@ -1,7 +1,9 @@
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
 // eslint-disable-next-line no-use-before-define
-import React, { Fragment } from 'react'
-import Icon from './Icon'
+import React, { Fragment, useEffect, useReducer, useRef } from 'react'
+import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
+import Badge from './Badge'
+import Icon, { IconStatus } from './Icon'
 
 interface UdappProps {
   verticalIconsPlugin: VerticalIcons
@@ -10,7 +12,24 @@ interface UdappProps {
   removeActive: () => void
 }
 
+const initialState = {
+  text: '',
+  key: '',
+  title: '',
+  type: ''
+}
+
 function Udapp ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: UdappProps) {
+  const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState)
+  const ref = useRef<any>(null)
+
+  useEffect(() => {
+    verticalIconsPlugin.on('udapp', 'statusChanged', (iconStatus: IconStatus) => {
+      const action: IconBadgeReducerAction = { type: 'udapp', payload: { status: iconStatus, ref: ref, verticalIconPlugin: verticalIconsPlugin } }
+      dispatchStatusUpdate(action)
+    })
+  }, [])
+
   return (
     <Fragment>
       {verticalIconsPlugin.targetProfileForChange &&
@@ -32,6 +51,14 @@ function Udapp ({ verticalIconsPlugin, itemContextAction, addActive, removeActiv
                   verticalIconsPlugin.targetProfileForChange[p].displayName
                 }
               />
+              {
+                badgeStatus && verticalIconsPlugin.keys.includes(badgeStatus.key) &&
+                  verticalIconsPlugin.types.includes(badgeStatus.type) ? (
+                    <Badge
+                      badgeStatus={badgeStatus}
+                    />
+                  ) : null
+              }
             </div>
           ))
         : null}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts b/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts
index 27bb556ff7..d0c35b91f3 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts
@@ -1,7 +1,8 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import helper from 'apps/remix-ide/src/lib/helper'
 import { BadgeStatus, IconStatus } from '../components/Icon'
-import React from 'react'
+import React, { MutableRefObject } from 'react'
+import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
 
 export type IconBadgeReducerAction = {
   readonly type: string
@@ -24,11 +25,7 @@ export type IconBadgeReducerAction = {
    */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 // if (!ref.current) return
-function setIconStatus (name: string, status: IconStatus, ref: React.MutableRefObject<any>) {
-  const statusEl = ref.current.querySelector('i')
-  if (statusEl) {
-    ref.current.removeChild(statusEl) // need to eject component instead of removing?
-  }
+function setIconStatus (name: string, status: IconStatus) {
   if (status.key === 'none') return { ...status, text: '' } // remove status
 
   let text = ''
@@ -42,19 +39,18 @@ function setIconStatus (name: string, status: IconStatus, ref: React.MutableRefO
   let thisType = ''
   if (status.type === 'error') {
     thisType = 'danger' // to use with bootstrap
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
   } else thisType = helper.checkSpecialChars(status.type) ? '' : status.type!
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const title = helper.checkSpecialChars(status.title) ? '' : status.title
-  // ref.current.classList.add('remixui_icon')
+  console.log(`new status for ${name} is :`, { title, type: thisType, key, text })
   return { title, type: thisType, key, text }
 }
 
 export function iconBadgeReducer (state: BadgeStatus, action: IconBadgeReducerAction) {
-  const status = setIconStatus(action.type, action.payload.status, action.payload.ref)
-  if (action.type.length > 0) {
-    console.log(`from reducer of ${action.type} :`, { status })
-    return status
+  const { status, ref, verticalIconPlugin } = action.payload
+  if (Object.keys(verticalIconPlugin.targetProfileForChange).includes(action.type)) {
+    const setStatus = setIconStatus(action.type, status)
+    console.log(`from reducer of ${action.type} :`, { setStatus })
+    return setStatus
   }
   return state
 }
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
index 55f1902eb5..27ecdf7f93 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
@@ -44,9 +44,10 @@
     bottom: 0;
   }
   .remixui_status {
-    /* position: relative;
+    /* position: relative; */
     bottom: 0;
-    right: 0; */
+    right: 0;
+    align-self: flex-end;
   }
   .remixui_statusCheck {
     font-size: 1.2em;

From b85ba456ac712f7a34129a4a49d7ffd28ac13556 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 9 Nov 2021 15:21:15 +0100
Subject: [PATCH 76/84] fix status change reducer and css for badges

---
 .../src/app/components/vertical-icons.js      | 79 -------------------
 .../src/lib/components/Badge.tsx              |  4 +-
 .../src/lib/components/Debugger.tsx           | 16 ++--
 .../src/lib/components/Icon.tsx               | 10 ++-
 .../src/lib/components/OtherIcons.tsx         | 27 ++++++-
 .../src/lib/components/RequiredSection.tsx    | 10 +--
 .../src/lib/components/Solidity.tsx           | 12 +--
 .../lib/components/SolidityStaticAnalysis.tsx | 13 +--
 .../src/lib/components/Udapp.tsx              | 15 +---
 .../src/lib/reducers/iconBadgeReducer.ts      | 12 ---
 .../src/lib/remix-ui-vertical-icons-panel.css |  9 ++-
 11 files changed, 60 insertions(+), 147 deletions(-)

diff --git a/apps/remix-ide/src/app/components/vertical-icons.js b/apps/remix-ide/src/app/components/vertical-icons.js
index 0033cc532d..9cdf0aae50 100644
--- a/apps/remix-ide/src/app/components/vertical-icons.js
+++ b/apps/remix-ide/src/app/components/vertical-icons.js
@@ -63,88 +63,9 @@ export class VerticalIcons extends Plugin {
   }
 
   listenOnStatus (profile) {
-    // the list of supported keys. 'none' will remove the status
-    // const keys = ['edited', 'succeed', 'none', 'loading', 'failed']
-    // const types = ['error', 'warning', 'success', 'info', '']
-    // const fn = (status) => {
-    //   if (!this.types.includes(status.type) && status.type) throw new Error(`type should be ${this.keys.join()}`)
-    //   if (status.key === undefined) throw new Error('status key should be defined')
 
-    //   if (typeof status.key === 'string' && (!this.keys.includes(status.key))) {
-    //     throw new Error('key should contain either number or ' + this.keys.join())
-    //   }
-    //   this.setIconStatus(profile.name, status)
-    // }
-    // this.iconStatus[profile.name] = fn
-    // this.on(profile.name, this.iconStatus[profile.name])
   }
 
-  /**
-   * resolve a classes list for @arg key
-   * @param {Object} key
-   * @param {Object} type
-   */
-  // resolveClasses (key, type) {
-  //   let classes = 'remixui_status'
-
-  //   switch (key) {
-  //     case 'succeed':
-  //       classes += ' fas fa-check-circle text-' + type + ' ' + 'remixui_statusCheck'
-  //       break
-  //     case 'edited':
-  //       classes += ' fas fa-sync text-' + type + ' ' + 'remixui_statusCheck'
-  //       break
-  //     case 'loading':
-  //       classes += ' fas fa-spinner text-' + type + ' ' + 'remixui_statusCheck'
-  //       break
-  //     case 'failed':
-  //       classes += ' fas fa-exclamation-triangle text-' + type + ' ' + 'remixui_statusCheck'
-  //       break
-  //     default: {
-  //       classes += ' badge badge-pill badge-' + type
-  //     }
-  //   }
-  //   return classes
-  // }
-
-  /**
-   * Set a new status for the @arg name
-   * @param {String} name
-   * @param {Object} status
-   */
-  // setIconStatus (name, status) {
-  //   const el = this.icons[name]
-  //   if (!el) return
-  //   const statusEl = el.querySelector('i')
-  //   if (statusEl) {
-  //     el.removeChild(statusEl)
-  //   }
-  //   if (status.key === 'none') return // remove status
-
-  //   let text = ''
-  //   let key = ''
-  //   if (typeof status.key === 'number') {
-  //     key = status.key.toString()
-  //     text = key
-  //   } else key = helper.checkSpecialChars(status.key) ? '' : status.key
-
-  //   let type = ''
-  //   if (status.type === 'error') {
-  //     type = 'danger' // to use with bootstrap
-  //   } else type = helper.checkSpecialChars(status.type) ? '' : status.type
-  //   const title = helper.checkSpecialChars(status.title) ? '' : status.title
-
-  //   el.appendChild(`<i
-  //   title="${title}"
-  //     class="${this.resolveClasses(key, type)}"
-  //     aria-hidden="true"
-  //   >
-  //   ${text}
-  //   </i>`)
-
-  //   el.classList.add('remixui_icon')
-  // }
-
   /**
    * Remove an icon from the map
    * @param {ModuleProfile} profile The profile of the module
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx
index 8b49b65b9d..89db08be87 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx
@@ -49,7 +49,7 @@ function Badge ({ badgeStatus }: BadgeProps) {
   }
 
   return (
-    <Fragment>
+    <>
       {
         badgeStatus && checkStatusKeyValue(badgeStatus.key, badgeStatus.type) ? (
           <i
@@ -61,7 +61,7 @@ function Badge ({ badgeStatus }: BadgeProps) {
           </i>
         ) : null
       }
-    </Fragment>
+    </>
   )
 }
 
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx
index 6fafcdc7be..d77286e213 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx
@@ -1,6 +1,6 @@
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
 // eslint-disable-next-line no-use-before-define
-import React, { Fragment, useEffect, useReducer, useRef } from 'react'
+import React, { Fragment, useEffect, useReducer } from 'react'
 import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
 import Badge from './Badge'
 import Icon, { IconStatus } from './Icon'
@@ -21,11 +21,10 @@ const initialState = {
 
 function Debugger ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: DebuggerProps) {
   const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState)
-  const ref = useRef<any>(null)
 
   useEffect(() => {
     verticalIconsPlugin.on('debugger', 'statusChanged', (iconStatus: IconStatus) => {
-      const action: IconBadgeReducerAction = { type: 'debugger', payload: { status: iconStatus, ref: ref, verticalIconPlugin: verticalIconsPlugin } }
+      const action: IconBadgeReducerAction = { type: 'debugger', payload: { status: iconStatus, verticalIconPlugin: verticalIconsPlugin } }
       dispatchStatusUpdate(action)
     })
   }, [])
@@ -50,14 +49,9 @@ function Debugger ({ verticalIconsPlugin, itemContextAction, addActive, removeAc
                   verticalIconsPlugin.targetProfileForChange[p].displayName
                 }
               />
-              {
-                badgeStatus && verticalIconsPlugin.keys.includes(badgeStatus.key) &&
-                  verticalIconsPlugin.types.includes(badgeStatus.type) ? (
-                    <Badge
-                      badgeStatus={badgeStatus}
-                    />
-                  ) : null
-              }
+              <Badge
+                badgeStatus={badgeStatus}
+              />
             </div>
           ))
         : null}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
index 2dde1a9b1a..57f994540b 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
@@ -5,6 +5,7 @@ import VerticalIconsContextMenu from '../vertical-icons-context-menu'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React, { Fragment, SyntheticEvent, useEffect, useReducer, useRef, useState } from 'react'
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
+import Badge from './Badge'
 
   interface IconProps {
     verticalIconPlugin: VerticalIcons
@@ -12,6 +13,7 @@ import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical
     contextMenuAction: (evt: any, profileName: string, documentation: string) => void
     addActive: (profileName: string) => void
     removeActive: () => void
+    badgeStatus?: BadgeStatus
   }
 
 export interface IconStatus {
@@ -43,7 +45,9 @@ function Icon ({
   verticalIconPlugin,
   contextMenuAction,
   addActive,
-  removeActive
+  removeActive,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  badgeStatus
 }: IconProps) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { tooltip, displayName, name, kind, icon, documentation } = profile
@@ -108,8 +112,10 @@ function Icon ({
         ref={iconRef}
       >
         <img className="remixui_image" src={icon} alt={name} />
+        <Badge
+          badgeStatus={badgeStatus!}
+        />
       </div>
-
       {showContext ? (
         <VerticalIconsContextMenu
           pageX={pageX}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx
index 45342bbc5d..d183b61d1a 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx
@@ -1,8 +1,9 @@
 /* eslint-disable no-use-before-define */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
-import React from 'react'
-import Icon from './Icon'
+import React, { useEffect, useReducer } from 'react'
+import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
+import Icon, { IconStatus } from './Icon'
 
 function customFilter (p: string) {
   if (p !== 'settings' && p !== 'pluginManager' &&
@@ -18,7 +19,28 @@ interface OtherIconsProps {
   removeActive: () => void
 }
 
+const initialState = {
+  text: '',
+  key: '',
+  title: '',
+  type: ''
+}
+
 function OtherIcons ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: OtherIconsProps) {
+  const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState)
+
+  useEffect(() => {
+    Object.keys(verticalIconsPlugin.targetProfileForChange)
+      .filter(customFilter)
+      .forEach(p =>
+        verticalIconsPlugin.on(verticalIconsPlugin.targetProfileForChange[p].name, 'statusChanged', (iconStatus: IconStatus) => {
+          const action: IconBadgeReducerAction = {
+            type: verticalIconsPlugin.targetProfileForChange[p].name,
+            payload: { status: iconStatus, verticalIconPlugin: verticalIconsPlugin }
+          }
+          dispatchStatusUpdate(action)
+        }))
+  }, [])
   return (
     <div id="otherIcons">
       {
@@ -34,6 +56,7 @@ function OtherIcons ({ verticalIconsPlugin, itemContextAction, addActive, remove
               key={
                 verticalIconsPlugin.targetProfileForChange[p].displayName
               }
+              badgeStatus={badgeStatus}
             />
           ))}
     </div>
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx
index c78610052b..010aa20366 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx
@@ -26,31 +26,31 @@ function RequiredSection ({ verticalIconsPlugin, itemContextAction, addActive, r
         removeActive={removeActive}
         itemContextAction={itemContextAction}
       />
-      <Solidity
+      <PluginManager
         verticalIconsPlugin={verticalIconsPlugin}
         addActive={addActive}
         removeActive={removeActive}
         itemContextAction={itemContextAction}
       />
-      <Udapp
+      <Solidity
         verticalIconsPlugin={verticalIconsPlugin}
         addActive={addActive}
         removeActive={removeActive}
         itemContextAction={itemContextAction}
       />
-      <SolidityStaticAnalysis
+      <Udapp
         verticalIconsPlugin={verticalIconsPlugin}
         addActive={addActive}
         removeActive={removeActive}
         itemContextAction={itemContextAction}
       />
-      <Debugger
+      <SolidityStaticAnalysis
         verticalIconsPlugin={verticalIconsPlugin}
         addActive={addActive}
         removeActive={removeActive}
         itemContextAction={itemContextAction}
       />
-      <PluginManager
+      <Debugger
         verticalIconsPlugin={verticalIconsPlugin}
         addActive={addActive}
         removeActive={removeActive}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Solidity.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Solidity.tsx
index 936bfb6a8a..28e8ab37be 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Solidity.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Solidity.tsx
@@ -2,7 +2,7 @@ import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical
 // eslint-disable-next-line no-use-before-define
 import React, { Fragment, useEffect, useReducer } from 'react'
 import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
-import Badge from './Badge'
+// import Badge from './Badge'
 import Icon, { IconStatus } from './Icon'
 
 interface SolidityProps {
@@ -26,7 +26,6 @@ function Solidity ({ verticalIconsPlugin, itemContextAction, addActive, removeAc
       const action: IconBadgeReducerAction = { type: 'solidity', payload: { status: iconStatus, verticalIconPlugin: verticalIconsPlugin } }
       dispatchStatusUpdate(action)
     })
-    console.log('solidity icon useEffect handled no issues')
   }, [])
   return (
     <Fragment>
@@ -47,15 +46,8 @@ function Solidity ({ verticalIconsPlugin, itemContextAction, addActive, removeAc
                 key={
                   verticalIconsPlugin.targetProfileForChange[p].displayName
                 }
+                badgeStatus={badgeStatus}
               />
-              {
-                badgeStatus && verticalIconsPlugin.keys.includes(badgeStatus.key) &&
-                  verticalIconsPlugin.types.includes(badgeStatus.type) ? (
-                    <Badge
-                      badgeStatus={badgeStatus}
-                    />
-                  ) : null
-              }
             </div>
           ))
         : null}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/SolidityStaticAnalysis.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/SolidityStaticAnalysis.tsx
index 22f3069244..1ad8517869 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/SolidityStaticAnalysis.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/SolidityStaticAnalysis.tsx
@@ -2,7 +2,7 @@ import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical
 // eslint-disable-next-line no-use-before-define
 import React, { Fragment, useEffect, useReducer } from 'react'
 import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
-import Badge from './Badge'
+// import Badge from './Badge'
 import Icon, { IconStatus } from './Icon'
 
 interface SolidityStaticAnalysisProps {
@@ -34,7 +34,7 @@ function SolidityStaticAnalysis ({ verticalIconsPlugin, itemContextAction, addAc
         ? Object.keys(verticalIconsPlugin.targetProfileForChange)
           .filter(p => p === 'solidityStaticAnalysis')
           .map(p => (
-            <div id="analysisIcons" key={
+            <div id="analysisIcons" className="remixui_iconContainer" key={
               verticalIconsPlugin.targetProfileForChange[p].displayName
             }>
               <Icon
@@ -46,15 +46,8 @@ function SolidityStaticAnalysis ({ verticalIconsPlugin, itemContextAction, addAc
                 key={
                   verticalIconsPlugin.targetProfileForChange[p].displayName
                 }
+                badgeStatus={badgeStatus}
               />
-              {
-                badgeStatus && verticalIconsPlugin.keys.includes(badgeStatus.key) &&
-                  verticalIconsPlugin.types.includes(badgeStatus.type) ? (
-                    <Badge
-                      badgeStatus={badgeStatus}
-                    />
-                  ) : null
-              }
             </div>
           ))
         : null}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Udapp.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Udapp.tsx
index 44c592e3f7..91f77bbb9c 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Udapp.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Udapp.tsx
@@ -1,8 +1,7 @@
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
 // eslint-disable-next-line no-use-before-define
-import React, { Fragment, useEffect, useReducer, useRef } from 'react'
+import React, { Fragment, useEffect, useReducer } from 'react'
 import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
-import Badge from './Badge'
 import Icon, { IconStatus } from './Icon'
 
 interface UdappProps {
@@ -21,11 +20,10 @@ const initialState = {
 
 function Udapp ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: UdappProps) {
   const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState)
-  const ref = useRef<any>(null)
 
   useEffect(() => {
     verticalIconsPlugin.on('udapp', 'statusChanged', (iconStatus: IconStatus) => {
-      const action: IconBadgeReducerAction = { type: 'udapp', payload: { status: iconStatus, ref: ref, verticalIconPlugin: verticalIconsPlugin } }
+      const action: IconBadgeReducerAction = { type: 'udapp', payload: { status: iconStatus, verticalIconPlugin: verticalIconsPlugin } }
       dispatchStatusUpdate(action)
     })
   }, [])
@@ -50,15 +48,8 @@ function Udapp ({ verticalIconsPlugin, itemContextAction, addActive, removeActiv
                 key={
                   verticalIconsPlugin.targetProfileForChange[p].displayName
                 }
+                badgeStatus={badgeStatus}
               />
-              {
-                badgeStatus && verticalIconsPlugin.keys.includes(badgeStatus.key) &&
-                  verticalIconsPlugin.types.includes(badgeStatus.type) ? (
-                    <Badge
-                      badgeStatus={badgeStatus}
-                    />
-                  ) : null
-              }
             </div>
           ))
         : null}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts b/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts
index d0c35b91f3..eaeae111ff 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts
@@ -9,22 +9,12 @@ export type IconBadgeReducerAction = {
   readonly payload: any
 }
 
-// const fn = (status: IconStatus) => {
-//   if (!verticalIconPlugin.types.includes(status.type) && status.type) throw new Error(`type should be ${verticalIconPlugin.keys.join()}`)
-//   if (status.key === undefined) throw new Error('status key should be defined')
-
-//   if (typeof status.key === 'string' && (!verticalIconPlugin.keys.includes(status.key))) {
-//     throw new Error('key should contain either number or ' + verticalIconPlugin.keys.join())
-//   }
-// }
-
 /**
    * Set a new status for the @arg name
    * @param {String} name
    * @param {Object} status
    */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-// if (!ref.current) return
 function setIconStatus (name: string, status: IconStatus) {
   if (status.key === 'none') return { ...status, text: '' } // remove status
 
@@ -41,7 +31,6 @@ function setIconStatus (name: string, status: IconStatus) {
     thisType = 'danger' // to use with bootstrap
   } else thisType = helper.checkSpecialChars(status.type) ? '' : status.type!
   const title = helper.checkSpecialChars(status.title) ? '' : status.title
-  console.log(`new status for ${name} is :`, { title, type: thisType, key, text })
   return { title, type: thisType, key, text }
 }
 
@@ -49,7 +38,6 @@ export function iconBadgeReducer (state: BadgeStatus, action: IconBadgeReducerAc
   const { status, ref, verticalIconPlugin } = action.payload
   if (Object.keys(verticalIconPlugin.targetProfileForChange).includes(action.type)) {
     const setStatus = setIconStatus(action.type, status)
-    console.log(`from reducer of ${action.type} :`, { setStatus })
     return setStatus
   }
   return state
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
index 27ecdf7f93..9ecc517187 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
@@ -44,10 +44,11 @@
     bottom: 0;
   }
   .remixui_status {
-    /* position: relative; */
+    position: relative;
     bottom: 0;
     right: 0;
-    align-self: flex-end;
+    left: 12px;
+    top: -13px;
   }
   .remixui_statusCheck {
     font-size: 1.2em;
@@ -114,6 +115,10 @@
     flex-grow: 1;
   }
 
+  .remixui_iconContainer {
+
+  }
+
   #menuitems {
     list-style: none;
     margin: 0px;

From 214f3a5a66c92340facbcc4cf86ba84e046b730d Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 11 Nov 2021 17:34:55 +0100
Subject: [PATCH 77/84] fixed context menu bug

---
 libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx | 2 +-
 .../src/lib/remix-ui-vertical-icons-panel.css                  | 3 +++
 .../src/lib/vertical-icons-context-menu.tsx                    | 1 +
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
index 57f994540b..57bfa99f47 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
@@ -81,6 +81,7 @@ function Icon ({
     setShowContext(true)
   }
   function closeContextMenu () {
+    console.log('watch me!!!')
     setShowContext(false)
   }
 
@@ -106,7 +107,6 @@ function Icon ({
           e.stopPropagation()
           handleContextMenu(e)
         }}
-        onBlur={closeContextMenu}
         data-id={`verticalIconsKind${name}`}
         id={`verticalIconsKind${name}`}
         ref={iconRef}
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
index 9ecc517187..ea6bff4269 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
@@ -72,6 +72,9 @@
     z-index: 1000;
     box-shadow: 0 0 4px var(--dark);
   }
+  .remixui_verticalIconContextcontainer:focus {
+    outline: 0;
+  }
   .remixui_liitem {
     padding: 2px;
     padding-left: 6px;
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/vertical-icons-context-menu.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/vertical-icons-context-menu.tsx
index a0de7fa9b6..1481e6b226 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/vertical-icons-context-menu.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/vertical-icons-context-menu.tsx
@@ -62,6 +62,7 @@ function VerticalIconsContextMenu (props: VerticalIconsContextMenuProps) {
 
       }}
       ref={menuRef}
+      tabIndex={1}
     >
       <ul id="menuitems">
         <MenuForLinks

From 7cf43423eb489fa9b66d86d16203fa4782a25bfb Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Fri, 12 Nov 2021 14:27:14 +0100
Subject: [PATCH 78/84] clean up console logs and empty css rule

---
 .../remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx | 1 -
 .../src/lib/remix-ui-vertical-icons-panel.css                 | 4 ----
 2 files changed, 5 deletions(-)

diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
index 57bfa99f47..d0cd86b66c 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
@@ -81,7 +81,6 @@ function Icon ({
     setShowContext(true)
   }
   function closeContextMenu () {
-    console.log('watch me!!!')
     setShowContext(false)
   }
 
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
index ea6bff4269..0c5186d612 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css
@@ -118,10 +118,6 @@
     flex-grow: 1;
   }
 
-  .remixui_iconContainer {
-
-  }
-
   #menuitems {
     list-style: none;
     margin: 0px;

From 15084c1a1d5d8a85610e6754153dfe56584ff800 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Sat, 13 Nov 2021 22:18:19 +0100
Subject: [PATCH 79/84] fix chevron code. fix e2e

---
 apps/remix-ide-e2e/src/helpers/init.ts                          | 2 +-
 apps/remix-ide-e2e/src/tests/plugin_api.ts                      | 1 +
 apps/remix-ide/src/app/components/side-panel.js                 | 2 +-
 .../vertical-icons-panel/src/lib/components/Chevron.tsx         | 2 +-
 4 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/remix-ide-e2e/src/helpers/init.ts b/apps/remix-ide-e2e/src/helpers/init.ts
index ba6266be54..1064018f63 100644
--- a/apps/remix-ide-e2e/src/helpers/init.ts
+++ b/apps/remix-ide-e2e/src/helpers/init.ts
@@ -5,7 +5,7 @@ require('dotenv').config()
 export default function (browser: NightwatchBrowser, callback: VoidFunction, url?: string, preloadPlugins = true): void {
   browser
     .url(url || 'http://127.0.0.1:8080')
-    .pause(5000)
+    .pause(10000)
     .switchBrowserTab(0)
     .waitForElementVisible('[id="remixTourSkipbtn"]')
     .click('[id="remixTourSkipbtn"]')
diff --git a/apps/remix-ide-e2e/src/tests/plugin_api.ts b/apps/remix-ide-e2e/src/tests/plugin_api.ts
index 2ad4d82144..ba1cab26ee 100644
--- a/apps/remix-ide-e2e/src/tests/plugin_api.ts
+++ b/apps/remix-ide-e2e/src/tests/plugin_api.ts
@@ -112,6 +112,7 @@ const clickAndCheckLog = async (browser: NightwatchBrowser, buttonText: string,
   if (methodResult && typeof methodResult !== 'string') { methodResult = JSON.stringify(methodResult) }
   if (eventResult && typeof eventResult !== 'string') { eventResult = JSON.stringify(eventResult) }
   if (buttonText) {
+    console.log('this is buttonText in this test', buttonText)
     await clickButton(browser, buttonText)
   }
   await debugValues(browser, 'methods', methodResult)
diff --git a/apps/remix-ide/src/app/components/side-panel.js b/apps/remix-ide/src/app/components/side-panel.js
index b3c723caec..0cc09d84d4 100644
--- a/apps/remix-ide/src/app/components/side-panel.js
+++ b/apps/remix-ide/src/app/components/side-panel.js
@@ -103,7 +103,7 @@ export class SidePanel extends AbstractPanel {
 
   addView (profile, view) {
     super.addView(profile, view)
-    setTimeout(() => this.verticalIcons.linkContent(profile), 150)
+    this.verticalIcons.linkContent(profile)
   }
 
   /**
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Chevron.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Chevron.tsx
index dfe8c47764..c3c5c472ba 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Chevron.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Chevron.tsx
@@ -9,7 +9,7 @@ export interface ChevronProps {
 function Chevron (props: ChevronProps) {
   return (
     <>
-      { props.divElementRef.current && props.divElementRef.current.scrollHeight > 600
+      { props.divElementRef.current && props.divElementRef.current.scrollHeight > props.divElementRef.current.clientHeight
         ? <i className={props.cssRule}></i> : null }
     </>
   )

From 7fcf4453b2c42ac40e549ac75acdb2f2c677a8fc Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 16 Nov 2021 14:48:53 +0100
Subject: [PATCH 80/84] fix review comments from @ioedeveloper

---
 apps/remix-ide-e2e/src/helpers/init.ts     |   2 +-
 apps/remix-ide-e2e/src/tests/plugin_api.ts |   1 -
 package-lock.json                          |   5 -
 package.json                               |   1 -
 workspace.json                             | 120 +--------------------
 5 files changed, 2 insertions(+), 127 deletions(-)

diff --git a/apps/remix-ide-e2e/src/helpers/init.ts b/apps/remix-ide-e2e/src/helpers/init.ts
index 1064018f63..a5926bd028 100644
--- a/apps/remix-ide-e2e/src/helpers/init.ts
+++ b/apps/remix-ide-e2e/src/helpers/init.ts
@@ -5,7 +5,7 @@ require('dotenv').config()
 export default function (browser: NightwatchBrowser, callback: VoidFunction, url?: string, preloadPlugins = true): void {
   browser
     .url(url || 'http://127.0.0.1:8080')
-    .pause(10000)
+    .pause(6000)
     .switchBrowserTab(0)
     .waitForElementVisible('[id="remixTourSkipbtn"]')
     .click('[id="remixTourSkipbtn"]')
diff --git a/apps/remix-ide-e2e/src/tests/plugin_api.ts b/apps/remix-ide-e2e/src/tests/plugin_api.ts
index ba1cab26ee..2ad4d82144 100644
--- a/apps/remix-ide-e2e/src/tests/plugin_api.ts
+++ b/apps/remix-ide-e2e/src/tests/plugin_api.ts
@@ -112,7 +112,6 @@ const clickAndCheckLog = async (browser: NightwatchBrowser, buttonText: string,
   if (methodResult && typeof methodResult !== 'string') { methodResult = JSON.stringify(methodResult) }
   if (eventResult && typeof eventResult !== 'string') { eventResult = JSON.stringify(eventResult) }
   if (buttonText) {
-    console.log('this is buttonText in this test', buttonText)
     await clickButton(browser, buttonText)
   }
   await debugValues(browser, 'methods', methodResult)
diff --git a/package-lock.json b/package-lock.json
index f23ab3f7b6..78b44c9554 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15422,11 +15422,6 @@
         }
       }
     },
-    "core-js": {
-      "version": "3.18.2",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.18.2.tgz",
-      "integrity": "sha512-zNhPOUoSgoizoSQFdX1MeZO16ORRb9FFQLts8gSYbZU5FcgXhp24iMWMxnOQo5uIaIG7/6FA/IqJPwev1o9ZXQ=="
-    },
     "core-js-compat": {
       "version": "3.19.1",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.19.1.tgz",
diff --git a/package.json b/package.json
index 5a6030a591..eafe773515 100644
--- a/package.json
+++ b/package.json
@@ -161,7 +161,6 @@
     "chokidar": "^2.1.8",
     "color-support": "^1.1.3",
     "commander": "^2.20.3",
-    "core-js": "^3.6.5",
     "deep-equal": "^1.0.1",
     "document-register-element": "1.13.1",
     "ethereumjs-util": "^7.0.10",
diff --git a/workspace.json b/workspace.json
index df30e7038e..22600e7994 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1099,20 +1099,6 @@
         "linter": "eslint"
       }
     },
-    "@remix-ui-verticaliconspanel": {
-      "root": "libs/@remix-ui/verticaliconspanel",
-      "sourceRoot": "libs/@remix-ui/verticaliconspanel/src",
-      "projectType": "library",
-      "architect": {
-        "lint": {
-          "builder": "@nrwl/linter:eslint",
-          "options": {
-            "lintFilePatterns": [
-              "libs/@remix-ui/verticaliconspanel/**/*.{ts,tsx,js,jsx}"
-            ]
-          }
-        }
-      },
       "@nrwl/web": {
         "application": {
           "linter": "eslint"
@@ -1126,16 +1112,6 @@
           "linter": "eslint"
         }
       }
-    }
-  },
-  "cli": {
-    "defaultCollection": "@nrwl/react"
-  },
-  "schematics": {
-    "@nrwl/workspace": {
-      "library": {
-        "linter": "eslint"
-      }
     },
     "cli": {
       "defaultCollection": "@nrwl/react"
@@ -1174,99 +1150,5 @@
         "linter": "eslint"
       }
     },
-    "@remix-ui-verticaliconspanel": {
-      "root": "libs/@remix-ui/verticaliconspanel",
-      "sourceRoot": "libs/@remix-ui/verticaliconspanel/src",
-      "projectType": "library",
-      "architect": {
-        "lint": {
-          "builder": "@nrwl/linter:eslint",
-          "options": {
-            "lintFilePatterns": [
-              "libs/@remix-ui/verticaliconspanel/**/*.{ts,tsx,js,jsx}"
-            ]
-          }
-        }
-      },
-      "@nrwl/web": {
-        "application": {
-          "linter": "eslint"
-        }
-      },
-      "@nrwl/node": {
-        "application": {
-          "linter": "eslint"
-        },
-        "library": {
-          "linter": "eslint"
-        }
-      }
-    }
-  },
-  "cli": {
-    "defaultCollection": "@nrwl/react"
-  },
-  "schematics": {
-    "@nrwl/workspace": {
-      "library": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/cypress": {
-      "cypress-project": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/react": {
-      "application": {
-        "style": "css",
-        "linter": "eslint",
-        "babel": true
-      },
-      "component": {
-        "style": "css"
-      },
-      "library": {
-        "style": "css",
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/next": {
-      "application": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/web": {
-      "application": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/node": {
-      "application": {
-        "linter": "eslint"
-      },
-      "library": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/nx-plugin": {
-      "plugin": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/nest": {
-      "application": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/express": {
-      "application": {
-        "linter": "eslint"
-      },
-      "library": {
-        "linter": "eslint"
-      }
-    }
-  },
-  "defaultProject": "remix-ide"
+    "defaultProject": "remix-ide"
 }

From 413595a892280aec4013a89773b83cdaeaeec7ea Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 14 Dec 2021 14:04:05 +0100
Subject: [PATCH 81/84] fix linting issue

---
 workspace.json | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/workspace.json b/workspace.json
index 22600e7994..07771a2e6c 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1060,10 +1060,11 @@
       "projectType": "library",
       "architect": {
         "lint": {
-          "builder": "@nrwl/linter:eslint",
+          "builder": "@nrwl/linter:lint",
           "options": {
-            "lintFilePatterns": [
-              "libs/remix-ui/vertical-icons-panel/**/*.{ts,tsx,js,jsx}"
+            "linter": "eslint",
+            "tsConfig": ["libs/remix-ui/theme-module/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/theme-module/**/*"]
             ]
           }
         }

From 8b58b32719b25c0435a53977bbae5a278a1925d4 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 14 Dec 2021 14:11:10 +0100
Subject: [PATCH 82/84] fix omitted braket

---
 workspace.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/workspace.json b/workspace.json
index 07771a2e6c..f0d8c89692 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1065,7 +1065,6 @@
             "linter": "eslint",
             "tsConfig": ["libs/remix-ui/theme-module/tsconfig.lib.json"],
             "exclude": ["**/node_modules/**", "!libs/remix-ui/theme-module/**/*"]
-            ]
           }
         }
       }

From 7e05b9ae7fb7018da9aba335fdc03e2a40fe6d3e Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 14 Dec 2021 14:26:21 +0100
Subject: [PATCH 83/84] fix mistaken naming

---
 workspace.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/workspace.json b/workspace.json
index f0d8c89692..5c51162cd7 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1063,8 +1063,8 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": ["libs/remix-ui/theme-module/tsconfig.lib.json"],
-            "exclude": ["**/node_modules/**", "!libs/remix-ui/theme-module/**/*"]
+            "tsConfig": ["libs/remix-ui/vertical-icons-panel/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/vertical-icons-panel/**/*"]
           }
         }
       }

From a64b5072e97a4aeac5ed2ef52174e8e7109c77fd Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 14 Dec 2021 14:42:08 +0100
Subject: [PATCH 84/84] fix linting error in index.ts

---
 libs/remix-ui/vertical-icons-panel/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/remix-ui/vertical-icons-panel/src/index.ts b/libs/remix-ui/vertical-icons-panel/src/index.ts
index 5024f5ff7a..49ed453dfa 100644
--- a/libs/remix-ui/vertical-icons-panel/src/index.ts
+++ b/libs/remix-ui/vertical-icons-panel/src/index.ts
@@ -1 +1 @@
-export * from './lib/remix-ui-vertical-icons-panel';
+export * from './lib/remix-ui-vertical-icons-panel'