address review comments from @ioedeveloper

.eslintrc.json

@@ -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": {}
-    }
-  ]
-}

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;
-  }
-`

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

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

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

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>
   )
 }
 

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

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 }

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>
   )
 }
 

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

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

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

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}
+          <RequiredSection
+            verticalIconsPlugin={verticalIconsPlugin}
             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'}
+            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}
+          <OtherIcons
+            verticalIconsPlugin={verticalIconsPlugin}
             addActive={addActive}
             removeActive={removeActive}
-                  key={
-                    verticalIconsPlugin.targetProfileForChange[p].displayName
-                  }
+            itemContextAction={itemContextAction}
           />
-              ))}
-          </OtherIcons>
         </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}
+              <Settings
+                verticalIconsPlugin={verticalIconsPlugin}
                 addActive={addActive}
                 removeActive={removeActive}
-                      key={
-                        verticalIconsPlugin.targetProfileForChange[p]
-                          .displayName
-                      }
+                itemContextAction={itemContextAction}
+                scrollableRef={scrollableRef}
               />
-                  ))}
-              </Settings>
             </Fragment>
           ) : null}
       </div>

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