diff --git a/apps/remix-ide/src/app/tabs/staticanalysis/staticAnalysisView.js b/apps/remix-ide/src/app/tabs/staticanalysis/staticAnalysisView.js
deleted file mode 100644
index 668adab89e..0000000000
--- a/apps/remix-ide/src/app/tabs/staticanalysis/staticAnalysisView.js
+++ /dev/null
@@ -1,302 +0,0 @@
-'use strict'
-var StaticAnalysisRunner = require('@remix-project/remix-analyzer').CodeAnalysis
-var yo = require('yo-yo')
-var $ = require('jquery')
-var remixLib = require('@remix-project/remix-lib')
-var utils = remixLib.util
-var css = require('./styles/staticAnalysisView-styles')
-var Renderer = require('../../ui/renderer')
-const SourceHighlighter = require('../../editor/sourceHighlighter')
-
-var EventManager = require('../../../lib/events')
-
-function staticAnalysisView (localRegistry, analysisModule) {
-  var self = this
-  this.event = new EventManager()
-  this.view = null
-  this.runner = new StaticAnalysisRunner()
-  this.modulesView = this.renderModules()
-  this.lastCompilationResult = null
-  this.lastCompilationSource = null
-  this.currentFile = 'No file compiled'
-  this.sourceHighlighter = new SourceHighlighter()
-  this.analysisModule = analysisModule
-  self._components = {
-    renderer: new Renderer(analysisModule)
-  }
-  self._components.registry = localRegistry
-  // dependencies
-  self._deps = {
-    offsetToLineColumnConverter: self._components.registry.get('offsettolinecolumnconverter').api
-  }
-
-  analysisModule.on('solidity', 'compilationFinished', (file, source, languageVersion, data) => {
-    self.lastCompilationResult = null
-    self.lastCompilationSource = null
-    if (languageVersion.indexOf('soljson') !== 0) return
-    self.lastCompilationResult = data
-    self.lastCompilationSource = source
-    self.currentFile = file
-    self.correctRunBtnDisabled()
-    if (self.view && self.view.querySelector('#autorunstaticanalysis').checked) {
-      self.run()
-    }
-  })
-}
-
-staticAnalysisView.prototype.render = function () {
-  this.runBtn = yo`<button class="btn btn-sm w-25 btn-primary" onclick="${() => { this.run() }}" >Run</button>`
-  const view = yo`
-    <div class="${css.analysis}">
-      <div class="my-2 d-flex flex-column align-items-left">
-        <div class="${css.top} d-flex justify-content-between">
-          <div class="pl-2 ${css.label}" for="checkAllEntries">
-            <input id="checkAllEntries"
-              type="checkbox"
-              onclick="${(event) => { this.checkAll(event) }}"
-              style="vertical-align:bottom"
-              checked="true"
-            >
-            <label class="text-nowrap pl-2 mb-0" for="checkAllEntries">
-              Select all
-            </label>
-          </div>
-          <div class="${css.label}" for="autorunstaticanalysis">
-            <input id="autorunstaticanalysis"
-              type="checkbox"
-              style="vertical-align:bottom"
-              checked="true"
-            >
-            <label class="text-nowrap pl-2 mb-0" for="autorunstaticanalysis">
-              Autorun
-            </label>
-          </div>
-          ${this.runBtn}
-        </div>
-      </div>
-      <div id="staticanalysismodules" class="list-group list-group-flush">
-        ${this.modulesView}
-      </div>
-      <div class="mt-2 p-2 d-flex border-top flex-column">
-        <span>last results for:</span>
-        <span class="text-break break-word word-break font-weight-bold" id="staticAnalysisCurrentFile">${this.currentFile}</span>
-      </div>
-      <div class="${css.result} my-1" id='staticanalysisresult'></div>
-    </div>
-  `
-
-  if (!this.view) {
-    this.view = view
-  }
-  this.correctRunBtnDisabled()
-  return view
-}
-
-staticAnalysisView.prototype.selectedModules = function () {
-  if (!this.view) {
-    return []
-  }
-  const selected = this.view.querySelectorAll('[name="staticanalysismodule"]:checked')
-  var toRun = []
-  for (var i = 0; i < selected.length; i++) {
-    toRun.push(selected[i].attributes.index.value)
-  }
-  return toRun
-}
-
-staticAnalysisView.prototype.run = function () {
-  if (!this.view) {
-    return
-  }
-  const highlightLocation = async (location, fileName) => {
-    await this.analysisModule.call('editor', 'discardHighlight')
-    await this.analysisModule.call('editor', 'highlight', location, fileName)
-  }
-  const selected = this.selectedModules()
-  const warningContainer = $('#staticanalysisresult')
-  warningContainer.empty()
-  this.view.querySelector('#staticAnalysisCurrentFile').innerText = this.currentFile
-  var self = this
-  if (this.lastCompilationResult && selected.length) {
-    this.runBtn.removeAttribute('disabled')
-    let warningCount = 0
-    this.runner.run(this.lastCompilationResult, selected, (results) => {
-      const groupedModules = utils.groupBy(preProcessModules(this.runner.modules()), 'categoryId')
-      results.map((result, j) => {
-        let moduleName
-        Object.keys(groupedModules).map((key) => {
-          groupedModules[key].forEach((el) => {
-            if (el.name === result.name) {
-              moduleName = groupedModules[key][0].categoryDisplayName
-            }
-          })
-        })
-        const alreadyExistedEl = this.view.querySelector(`[id="staticAnalysisModule${moduleName}"]`)
-        if (!alreadyExistedEl) {
-          warningContainer.append(`
-            <div class="mb-4" name="staticAnalysisModules" id="staticAnalysisModule${moduleName}">
-              <span class="text-dark h6">${moduleName}</span>
-            </div>
-          `)
-        }
-
-        result.report.map((item, i) => {
-          let location = ''
-          let locationString = 'not available'
-          let column = 0
-          let row = 0
-          let fileName = this.currentFile
-          if (item.location) {
-            var split = item.location.split(':')
-            var file = split[2]
-            location = {
-              start: parseInt(split[0]),
-              length: parseInt(split[1])
-            }
-            location = self._deps.offsetToLineColumnConverter.offsetToLineColumn(
-              location,
-              parseInt(file),
-              self.lastCompilationSource.sources,
-              self.lastCompilationResult.sources
-            )
-            row = location.start.line
-            column = location.start.column
-            locationString = (row + 1) + ':' + column + ':'
-            fileName = Object.keys(self.lastCompilationResult.contracts)[file]
-          }
-          warningCount++
-          const msg = yo`
-            <span class="d-flex flex-column">
-              <span class="h6 font-weight-bold">${result.name}</span>
-              ${item.warning}
-              ${item.more ? yo`<span><a href="${item.more}" target="_blank">more</a></span>` : yo`<span></span>`}
-              <span class="" title="Position in ${fileName}">Pos: ${locationString}</span>
-            </span>`
-          self._components.renderer.error(
-            msg,
-            this.view.querySelector(`[id="staticAnalysisModule${moduleName}"]`),
-            {
-              click: () => highlightLocation(location, fileName),
-              type: 'warning',
-              useSpan: true,
-              errFile: fileName,
-              errLine: row,
-              errCol: column
-            }
-          )
-        })
-      })
-      // hide empty staticAnalysisModules sections
-      this.view.querySelectorAll('[name="staticAnalysisModules"]').forEach((section) => {
-        if (!section.getElementsByClassName('alert-warning').length) section.hidden = true
-      })
-      self.event.trigger('staticAnaysisWarning', [warningCount])
-    })
-  } else {
-    this.runBtn.setAttribute('disabled', 'disabled')
-    if (selected.length) {
-      warningContainer.html('No compiled AST available')
-    }
-    self.event.trigger('staticAnaysisWarning', [-1])
-  }
-}
-staticAnalysisView.prototype.checkModule = function (event) {
-  const selected = this.view.querySelectorAll('[name="staticanalysismodule"]:checked')
-  const checkAll = this.view.querySelector('[id="checkAllEntries"]')
-  this.correctRunBtnDisabled()
-  if (event.target.checked) {
-    checkAll.checked = true
-  } else if (!selected.length) {
-    checkAll.checked = false
-  }
-}
-staticAnalysisView.prototype.correctRunBtnDisabled = function () {
-  if (!this.view) {
-    return
-  }
-  const selected = this.view.querySelectorAll('[name="staticanalysismodule"]:checked')
-  if (this.lastCompilationResult && selected.length !== 0) {
-    this.runBtn.removeAttribute('disabled')
-  } else {
-    this.runBtn.setAttribute('disabled', 'disabled')
-  }
-}
-staticAnalysisView.prototype.checkAll = function (event) {
-  if (!this.view) {
-    return
-  }
-  // checks/unchecks all
-  const checkBoxes = this.view.querySelectorAll('[name="staticanalysismodule"]')
-  checkBoxes.forEach((checkbox) => { checkbox.checked = event.target.checked })
-  this.correctRunBtnDisabled()
-}
-
-staticAnalysisView.prototype.handleCollapse = function (e) {
-  const downs = e.toElement.parentElement.getElementsByClassName('fas fa-angle-double-right')
-  const iEls = document.getElementsByTagName('i')
-  for (var i = 0; i < iEls.length; i++) { iEls[i].hidden = false }
-  downs[0].hidden = true
-}
-
-staticAnalysisView.prototype.renderModules = function () {
-  const groupedModules = utils.groupBy(preProcessModules(this.runner.modules()), 'categoryId')
-  const moduleEntries = Object.keys(groupedModules).map((categoryId, i) => {
-    const category = groupedModules[categoryId]
-    const entriesDom = category.map((item, i) => {
-      return yo`
-        <div class="form-check">
-          <input id="staticanalysismodule_${categoryId}_${i}"
-            type="checkbox"
-            class="form-check-input staticAnalysisItem"
-            name="staticanalysismodule"
-            index=${item._index}
-            checked="true"
-            style="vertical-align:bottom"
-            onclick="${(event) => this.checkModule(event)}"
-          >
-          <label for="staticanalysismodule_${categoryId}_${i}" class="form-check-label mb-1">
-            <p class="mb-0 font-weight-bold text-capitalize">${item.name}</p>
-            ${item.description}
-          </label>
-        </div>
-      `
-    })
-    return yo`
-      <div class="${css.block}">
-        <input type="radio" name="accordion" class="w-100 d-none card" id="heading${categoryId}" onclick=${(e) => this.handleCollapse(e)}"/>
-        <label for="heading${categoryId}" style="cursor: pointer;" class="pl-3 card-header h6 d-flex justify-content-between font-weight-bold border-left px-1 py-2 w-100">
-          ${category[0].categoryDisplayName}
-          <div>
-            <i class="fas fa-angle-double-right"></i>
-          </div>
-        </label>
-        <div class="w-100 d-block px-2 my-1 ${css.entries}">
-          ${entriesDom}
-        </div>
-      </div>
-    `
-  })
-  // collaps first module
-  moduleEntries[0].getElementsByTagName('input')[0].checked = true
-  moduleEntries[0].getElementsByTagName('i')[0].hidden = true
-  return yo`
-    <div class="accordion" id="accordionModules">
-      ${moduleEntries}
-    </div>`
-}
-
-module.exports = staticAnalysisView
-
-/**
- * @dev Process & categorize static analysis modules to show them on UI
- * @param arr list of static analysis modules received from remix-analyzer module
- */
-function preProcessModules (arr) {
-  return arr.map((Item, i) => {
-    const itemObj = new Item()
-    itemObj._index = i
-    itemObj.categoryDisplayName = itemObj.category.displayName
-    itemObj.categoryId = itemObj.category.id
-    return itemObj
-  })
-}
diff --git a/apps/remix-ide/src/app/tabs/staticanalysis/styles/staticAnalysisView-styles.js b/apps/remix-ide/src/app/tabs/staticanalysis/styles/staticAnalysisView-styles.js
deleted file mode 100644
index bd277a03aa..0000000000
--- a/apps/remix-ide/src/app/tabs/staticanalysis/styles/staticAnalysisView-styles.js
+++ /dev/null
@@ -1,36 +0,0 @@
-var csjs = require('csjs-inject')
-
-var css = csjs`
-  .analysis {
-    display: flex;
-    flex-direction: column;
-  }
-  .result {
-    margin-top: 1%;
-    max-height: 300px;
-    word-break: break-word;
-  }
-  .buttons  {
-    margin: 1rem 0;
-  }
-  .label {
-    display: flex;
-    align-items: center;
-  }
-  .label {
-    display: flex;
-    align-items: center;
-    user-select: none;
-  }
-  .block input[type='radio']:checked ~ .entries{
-    height: auto;
-    transition: .5s ease-in;
-  }
-  .entries{
-    height: 0;
-    overflow: hidden;
-    transition: .5s ease-out;
-  }
-`
-
-module.exports = css
diff --git a/libs/remix-ui/static-analyser/src/lib/remix-ui-static-analyser.tsx b/libs/remix-ui/static-analyser/src/lib/remix-ui-static-analyser.tsx
index 7bcdd9d0a3..8cae6c9e60 100644
--- a/libs/remix-ui/static-analyser/src/lib/remix-ui-static-analyser.tsx
+++ b/libs/remix-ui/static-analyser/src/lib/remix-ui-static-analyser.tsx
@@ -81,27 +81,30 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
   })
   const [warningState, setWarningState] = useState([])
 
-  useEffect(() => {
-    if (autoRun) {
-      const setCompilationResult = async (data, source, file) => {
-        await setResult({ lastCompilationResult: data, lastCompilationSource: source, currentFile: file })
-      }
+  const executeCompilation = () => {
+    const setCompilationResult = async (data, source, file) => {
+      await setResult({ lastCompilationResult: data, lastCompilationSource: source, currentFile: file })
+    }
 
-      if (props.analysisModule) {
-        props.analysisModule.on(
-          'solidity',
-          'compilationFinished',
-          (file, source, languageVersion, data) => {
-            if (languageVersion.indexOf('soljson') !== 0) return
-            setCompilationResult(data, source, file)
-            if (categoryIndex.length > 0) {
-              run(data, source, file)
-            }
+    if (props.analysisModule) {
+      props.analysisModule.on(
+        'solidity',
+        'compilationFinished',
+        (file, source, languageVersion, data) => {
+          if (languageVersion.indexOf('soljson') !== 0) return
+          setCompilationResult(data, source, file)
+          if (categoryIndex.length > 0) {
+            run(data, source, file)
           }
-        )
-      }
+        }
+      )
     }
+  }
 
+  useEffect(() => {
+    if (autoRun) {
+      executeCompilation()
+    }
     return () => { }
   }, [autoRun, categoryIndex])
 
@@ -270,6 +273,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
           label={item.description}
           onClick={event => handleCheckSingle(event, item._index)}
           checked={categoryIndex.includes(item._index.toString())}
+          onChange={() => {}}
         />
       </div>
     )
@@ -297,7 +301,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
               expand={false}
             >
               <div>
-                <RemixUiCheckbox onClick={() => handleCheckOrUncheckCategory(category)} id={categoryId} inputType="checkbox" label={`Select ${category[0].categoryDisplayName}`} name='checkCategoryEntry' checked={category.map(x => x._index.toString()).every(el => categoryIndex.includes(el))} />
+                <RemixUiCheckbox onClick={() => handleCheckOrUncheckCategory(category)} id={categoryId} inputType="checkbox" label={`Select ${category[0].categoryDisplayName}`} name='checkCategoryEntry' checked={category.map(x => x._index.toString()).every(el => categoryIndex.includes(el))} onChange={() => {}}/>
               </div>
               <div className="w-100 d-block px-2 my-1 entries collapse multi-collapse" id={`heading${categoryId}`}>
                 {category.map((item, i) => {
@@ -327,6 +331,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
             }).flat().every(el => categoryIndex.includes(el))}
             label="Select all"
             onClick={() => handleCheckAllModules(groupedModules)}
+            onChange={() => {}}
           />
           <RemixUiCheckbox
             id="autorunstaticanalysis"
@@ -334,6 +339,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
             onClick={handleAutoRun}
             checked={autoRun}
             label="Autorun"
+            onChange={() => {}}
           />
           <Button buttonText="Run" onClick={() => run(result.lastCompilationResult, result.lastCompilationSource, result.currentFile)} disabled={runButtonState || categoryIndex.length === 0}/>
         </div>