Merge branch 'master' into bunsenstraat-patch-1

.github/workflows/rebase-pull-requests.yml

@@ -2,8 +2,10 @@ name: Rebase Pull Requests
 on:
   push:
     branches: [master]
+  workflow_dispatch:
+  
 jobs:
   rebase:
     runs-on: ubuntu-latest
     steps:
-      - uses: linhbn123/rebase-pull-requests@v1.0.1
+      - uses: yann300/rebase-pull-requests@v1.0.16

apps/remix-ide/src/app/ui/TreeView.js

@@ -176,7 +176,7 @@ class TreeView {
 
   formatSelfDefault (key, data) {
     return yo`
-      <div class="d-flex mb-1 flex-row ${css.label_item}">
+      <div class="d-flex mt-2 flex-row ${css.label_item}">
         <label class="small font-weight-bold pr-1 ${css.label_key}">${key}:</label> 
         <label class="m-0 ${css.label_value}">${data.self}</label>
       </div>

apps/remix-ide/src/app/ui/styles/modaldialog-styles.js

@@ -5,7 +5,7 @@ var css = csjs`
   .modalFooter {
   }
   .modalContent {
-    box-shadow: 0 0 8px 1000px rgba(0,0,0,0.6),0 6px 20px 0 rgba(0,0,0,0.19);
+    box-shadow: 0 0 8px 10000px rgba(0,0,0,0.6),0 6px 20px 0 rgba(0,0,0,0.19);
     -webkit-animation-name: animatetop;
     -webkit-animation-duration: 0.4s;
     animation-name: animatetop;

libs/remix-solidity/src/compiler/compiler.ts

@@ -163,6 +163,41 @@ export class Compiler {
     }
   }
 
+  /**
+   * @dev Load compiler using given version (used by remix-tests CLI)
+   * @param version compiler version
+   */
+  
+  loadRemoteVersion (version: string): void {
+    console.log(`Loading remote solc version ${version} ...`)
+    const compiler: any = require('solc')
+    compiler.loadRemoteVersion(version, (err, remoteCompiler) => {
+      if (err) {
+        console.error('Error in loading remote solc compiler: ', err)
+      } else {
+        this.state.compileJSON = (source: SourceWithTarget) => {
+          const missingInputs: string[] = []
+          const missingInputsCallback = (path: string) => {
+            missingInputs.push(path)
+            return { error: 'Deferred import' }
+          }
+          let result: CompilationResult = {}
+          try {
+            if(source && source.sources) {
+              const {optimize, runs, evmVersion, language} = this.state
+              const input = compilerInput(source.sources, {optimize, runs, evmVersion, language})
+              result = JSON.parse(remoteCompiler.compile(input, { import: missingInputsCallback }))
+            }
+          } catch (exception) {
+            result = { error: { formattedMessage: 'Uncaught JavaScript exception:\n' + exception, severity: 'error', mode: 'panic' } }
+          }
+          this.onCompilationFinished(result, missingInputs, source)
+        }
+        this.onCompilerLoaded(version)
+      }
+    })
+  }
+
   /**
    * @dev Load compiler using given URL (used by IDE)
    * @param usingWorker if true, load compiler using worker

libs/remix-tests/package.json

@@ -37,7 +37,7 @@
   "dependencies": {
     "@remix-project/remix-lib": "^0.4.31",
     "@remix-project/remix-simulator": "^0.1.9-beta.8",
-    "@remix-project/remix-solidity": "^0.3.32",
+    "@remix-project/remix-solidity": "file:../remix-solidity",
     "ansi-gray": "^0.1.1",
     "async": "^2.6.0",
     "change-case": "^3.0.1",

libs/remix-tests/src/compiler.ts

@@ -45,15 +45,15 @@ function isRemixTestFile(path: string) {
  */
 
 function processFile(filePath: string, sources: SrcIfc, isRoot = false) {
-    const importRegEx = /import ['"](.+?)['"];/g;
-    let group: RegExpExecArray| null = null;
+    const importRegEx = /import ['"](.+?)['"];/g
+    let group: RegExpExecArray| null = null
     const isFileAlreadyInSources: boolean = Object.keys(sources).includes(filePath)
 
     // Return if file is a remix test file or already processed
     if(isRemixTestFile(filePath) || isFileAlreadyInSources)
         return
 
-    let content: string = fs.readFileSync(filePath, { encoding: 'utf-8' });
+    let content: string = fs.readFileSync(filePath, { encoding: 'utf-8' })
     const testFileImportRegEx = /^(import)\s['"](remix_tests.sol|tests.sol)['"];/gm
 
     // import 'remix_tests.sol', if file is a root test contract file and doesn't already have it 
@@ -61,13 +61,13 @@ function processFile(filePath: string, sources: SrcIfc, isRoot = false) {
         const includeTestLibs = '\nimport \'remix_tests.sol\';\n'
         content = includeTestLibs.concat(content)
     }
-    sources[filePath] = {content};
-    importRegEx.exec(''); // Resetting state of RegEx
+    sources[filePath] = {content}
+    importRegEx.exec('') // Resetting state of RegEx
 
     // Process each 'import' in file content
     while ((group = importRegEx.exec(content))) {
-        const importedFile: string = group[1];
-        const importedFilePath: string = path.join(path.dirname(filePath), importedFile);
+        const importedFile: string = group[1]
+        const importedFilePath: string = path.join(path.dirname(filePath), importedFile)
         processFile(importedFilePath, sources)
     }
 }
@@ -85,7 +85,7 @@ const isBrowser = !(typeof (window) === 'undefined' || userAgent.indexOf(' elect
  * TODO: replace this with remix's own compiler code
  */
 
-export function compileFileOrFiles(filename: string, isDirectory: boolean, opts: any, cb): void {
+export function compileFileOrFiles(filename: string, isDirectory: boolean, opts: any, compilerConfig: CompilerConfiguration, cb): void {
     let compiler: any
     const accounts: string[] = opts.accounts || []
     const sources: SrcIfc = {
@@ -103,11 +103,11 @@ export function compileFileOrFiles(filename: string, isDirectory: boolean, opts:
             }
         } else {
             // walkSync only if it is a directory
-            let testFileCount = 0;
+            let testFileCount = 0
             fs.walkSync(filepath, (foundpath: string) => {
                 // only process .sol files
                 if (foundpath.split('.').pop() === 'sol' && foundpath.endsWith('_test.sol')) {
-                    testFileCount++;
+                    testFileCount++
                     processFile(foundpath, sources, true)
                 }
             })
@@ -126,10 +126,24 @@ export function compileFileOrFiles(filename: string, isDirectory: boolean, opts:
         async.waterfall([
             function loadCompiler(next) {
                 compiler = new RemixCompiler()
-                compiler.onInternalCompilerLoaded()
-                // compiler.event.register('compilerLoaded', this, function (version) {
-                next()
-                // });
+                if(compilerConfig) {
+                    const {currentCompilerUrl, evmVersion, optimize, runs} = compilerConfig
+                    evmVersion ? compiler.set('evmVersion', evmVersion) : null
+                    optimize ? compiler.set('optimize', optimize) : null
+                    runs ? compiler.set('runs', runs) : null
+                    if(currentCompilerUrl) {
+                        compiler.loadRemoteVersion(currentCompilerUrl)
+                        compiler.event.register('compilerLoaded', this, function (version) {
+                            next()
+                        })
+                    } else {
+                        compiler.onInternalCompilerLoaded()
+                        next()
+                    }
+                } else {
+                    compiler.onInternalCompilerLoaded()
+                    next()
+                }
             },
             function doCompilation(next) {
                 // @ts-ignore

libs/remix-tests/src/run.ts

@@ -1,9 +1,11 @@
 import commander from 'commander'
-import Web3 from 'web3';
+import Web3 from 'web3'
 import path from 'path'
+import axios, { AxiosResponse } from 'axios'
 import { runTestFiles } from './runTestFiles'
 import fs from './fileSystem'
 import { Provider } from '@remix-project/remix-simulator'
+import { CompilerConfiguration } from './types'
 import Log from './logger'
 const logger = new Log()
 const log = logger.logger
@@ -21,6 +23,15 @@ function mapVerbosity (v: number) {
     }
     return levels[v]
 }
+
+function mapOptimize (v: string) {
+        const optimize = {
+                'true': true,
+                'false': false
+        }
+        return optimize[v];
+}
+
 const version = require('../package.json').version
 
 commander.version(version)
@@ -35,7 +46,11 @@ commander.command('help').description('output usage information').action(functio
 
 // get current version
 commander
-    .option('-v, --verbose <level>', 'run with verbosity', mapVerbosity)
+    .option('-c, --compiler <string>', 'set compiler version (e.g: 0.6.1, 0.7.1 etc)')
+    .option('-e, --evm <string>', 'set EVM version (e.g: petersburg, istanbul etc)')
+    .option('-o, --optimize <bool>', 'enable/disable optimization', mapOptimize)
+    .option('-r, --runs <number>', 'set runs (e.g: 150, 250 etc)')
+    .option('-v, --verbose <level>', 'set verbosity level (0 to 5)', mapVerbosity)
     .action(async (testsPath) => {
 
         // Check if path exists
@@ -62,12 +77,47 @@ commander
             log.info('verbosity level set to ' + commander.verbose.blue)
         }
 
+        let compilerConfig = {} as CompilerConfiguration
+        if (commander.compiler) {
+            const compVersion = commander.compiler
+            const baseURL = 'https://binaries.soliditylang.org/wasm/'
+            const response: AxiosResponse = await axios.get(baseURL + 'list.json')
+            const { releases, latestRelease } = response.data
+            const compString = releases[compVersion]
+            if(!compString) {
+                log.error(`No compiler found in releases with version ${compVersion}`)
+                process.exit()
+            } else {
+                compilerConfig.currentCompilerUrl = compString.replace('soljson-', '').replace('.js', '')
+                log.info(`Compiler version set to ${compVersion}. Latest version is ${latestRelease}`)
+            }
+        }
+
+        if (commander.evm) {
+            compilerConfig.evmVersion = commander.evm
+            log.info(`EVM set to ${compilerConfig.evmVersion}`)
+        }
+
+        if (commander.optimize) {
+            compilerConfig.optimize = commander.optimize
+            log.info(`Optimization is ${compilerConfig.optimize ? 'enabled' : 'disabled'}`)
+        }
+
+        if (commander.runs) {
+            if(!commander.optimize) {
+                log.error(`Optimization should be enabled for runs`)
+                process.exit()
+            }
+            compilerConfig.runs = commander.runs
+            log.info(`Runs set to ${compilerConfig.runs}`)
+        }
+
         const web3 = new Web3()
         const provider: any = new Provider()
         await provider.init()
         web3.setProvider(provider)
 
-        runTestFiles(path.resolve(testsPath), isDirectory, web3)
+        runTestFiles(path.resolve(testsPath), isDirectory, web3, compilerConfig)
     })
 
 if (!process.argv.slice(2).length) {

libs/remix-tests/src/runTestFiles.ts

@@ -1,7 +1,7 @@
 import async from 'async'
 import fs from './fileSystem'
 import { runTest } from './testRunner'
-import { TestResultInterface, ResultsInterface, compilationInterface, ASTInterface, Options, AstNode } from './types'
+import { TestResultInterface, ResultsInterface, CompilerConfiguration, compilationInterface, ASTInterface, Options, AstNode } from './types'
 import colors from 'colors'
 import Web3 from 'web3';
 
@@ -18,8 +18,9 @@ import { deployAll } from './deployer'
  */
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
-export function runTestFiles(filepath: string, isDirectory: boolean, web3: Web3, finalCallback: any = () => {}, opts?: Options) {
+export function runTestFiles(filepath: string, isDirectory: boolean, web3: Web3, compilerConfig: CompilerConfiguration, finalCallback: any = () => {}, opts?: Options) {
     opts = opts || {}
+    compilerConfig = compilerConfig || {} as CompilerConfiguration
     const sourceASTs: any = {}
     const { Signale } = require('signale')
     // signale configuration
@@ -53,7 +54,7 @@ export function runTestFiles(filepath: string, isDirectory: boolean, web3: Web3,
             })
         },
         function compile(next) {
-            compileFileOrFiles(filepath, isDirectory, { accounts }, next)
+            compileFileOrFiles(filepath, isDirectory, { accounts }, compilerConfig, next)
         },
         function deployAllContracts (compilationResult: compilationInterface, asts: ASTInterface, next) {
             // Extract AST of test contract file source

libs/remix-tests/src/types.ts

@@ -53,7 +53,7 @@ export interface CompilerConfiguration {
   currentCompilerUrl: string,
   evmVersion: string, 
   optimize: boolean, 
-  usingWorker: boolean,
+  usingWorker?: boolean,
   runs: number
 }
 

libs/remix-tests/tests/testRunner.cli.spec.ts

@@ -22,13 +22,17 @@ describe('testRunner: remix-tests CLI', () => {
         const expectedHelp = `Usage: remix-tests [options] [command]
 
 Options:
-  -V, --version          output the version number
-  -v, --verbose <level>  run with verbosity
-  -h, --help             output usage information
+  -V, --version            output the version number
+  -c, --compiler <string>  set compiler version (e.g: 0.6.1, 0.7.1 etc)
+  -e, --evm <string>       set EVM version (e.g: petersburg, istanbul etc)
+  -o, --optimize <bool>    enable/disable optimization
+  -r, --runs <number>      set runs (e.g: 150, 250 etc)
+  -v, --verbose <level>    set verbosity level (0 to 5)
+  -h, --help               output usage information
 
 Commands:
-  version                output the version number
-  help                   output usage information`
+  version                  output the version number
+  help                     output usage information`
         expect(res.stdout.toString().trim()).toBe(expectedHelp)
       })
 
@@ -41,10 +45,93 @@ Commands:
       expect(res.stdout.toString().trim()).toMatch(/AssertOkTest/)
       expect(res.stdout.toString().trim()).toMatch(/Ok pass test/)
       expect(res.stdout.toString().trim()).toMatch(/Ok fail test/)
-      // macth fail test details
+      // match fail test details
       expect(res.stdout.toString().trim()).toMatch(/error: okFailTest fails/)
       expect(res.stdout.toString().trim()).toMatch(/expected value to be ok to: true/)
       expect(res.stdout.toString().trim()).toMatch(/returned: false/)
     })
+
+    test('remix-tests running a test file with custom compiler version', () => {
+      const res = spawnSync(executablePath, ['--compiler', '0.7.4', resolve(__dirname + '/examples_0/assert_ok_test.sol')])
+      // match initial lines
+      expect(res.stdout.toString().trim().includes('Compiler version set to 0.7.4. Latest version is')).toBeTruthy()
+      expect(res.stdout.toString().trim().includes('Loading remote solc version v0.7.4+commit.3f05b770 ...')).toBeTruthy()
+      expect(res.stdout.toString().trim()).toMatch(/:: Running remix-tests - Unit testing for solidity ::/)
+      expect(res.stdout.toString().trim()).toMatch(/creation of library remix_tests.sol:Assert pending.../)
+      // match test result
+      expect(res.stdout.toString().trim()).toMatch(/Ok pass test/)
+      expect(res.stdout.toString().trim()).toMatch(/Ok fail test/)
+      // match fail test details
+      expect(res.stdout.toString().trim()).toMatch(/error: okFailTest fails/)
+    })
+
+    test('remix-tests running a test file with unavailable custom compiler version (should fail)', () => {
+      const res = spawnSync(executablePath, ['--compiler', '1.10.4', resolve(__dirname + '/examples_0/assert_ok_test.sol')])
+      // match initial lines
+      expect(res.stdout.toString().trim().includes('No compiler found in releases with version 1.10.4')).toBeTruthy()
+    })
+
+    test('remix-tests running a test file with custom EVM', () => {
+      const res = spawnSync(executablePath, ['--evm', 'petersburg', resolve(__dirname + '/examples_0/assert_ok_test.sol')])
+      // match initial lines
+      expect(res.stdout.toString().trim().includes('EVM set to petersburg')).toBeTruthy()
+      expect(res.stdout.toString().trim()).toMatch(/:: Running remix-tests - Unit testing for solidity ::/)
+      expect(res.stdout.toString().trim()).toMatch(/creation of library remix_tests.sol:Assert pending.../)
+      // match test result
+      expect(res.stdout.toString().trim()).toMatch(/Ok pass test/)
+      expect(res.stdout.toString().trim()).toMatch(/Ok fail test/)
+      // match fail test details
+      expect(res.stdout.toString().trim()).toMatch(/error: okFailTest fails/)
+    })
+
+    test('remix-tests running a test file by enabling optimization', () => {
+      const res = spawnSync(executablePath, ['--optimize', 'true', resolve(__dirname + '/examples_0/assert_ok_test.sol')])
+      // match initial lines
+      expect(res.stdout.toString().trim().includes('Optimization is enabled')).toBeTruthy()
+      expect(res.stdout.toString().trim()).toMatch(/:: Running remix-tests - Unit testing for solidity ::/)
+      expect(res.stdout.toString().trim()).toMatch(/creation of library remix_tests.sol:Assert pending.../)
+      // match test result
+      expect(res.stdout.toString().trim()).toMatch(/Ok pass test/)
+      expect(res.stdout.toString().trim()).toMatch(/Ok fail test/)
+      // match fail test details
+      expect(res.stdout.toString().trim()).toMatch(/error: okFailTest fails/)
+    })
+
+    test('remix-tests running a test file by enabling optimization and setting runs', () => {
+      const res = spawnSync(executablePath, ['--optimize', 'true', '--runs', '300', resolve(__dirname + '/examples_0/assert_ok_test.sol')])
+      // match initial lines
+      expect(res.stdout.toString().trim().includes('Optimization is enabled')).toBeTruthy()
+      expect(res.stdout.toString().trim().includes('Runs set to 300')).toBeTruthy()
+      expect(res.stdout.toString().trim()).toMatch(/:: Running remix-tests - Unit testing for solidity ::/)
+      expect(res.stdout.toString().trim()).toMatch(/creation of library remix_tests.sol:Assert pending.../)
+      // match test result
+      expect(res.stdout.toString().trim()).toMatch(/Ok pass test/)
+      expect(res.stdout.toString().trim()).toMatch(/Ok fail test/)
+      // match fail test details
+      expect(res.stdout.toString().trim()).toMatch(/error: okFailTest fails/)
+    })
+
+    test('remix-tests running a test file without enabling optimization and setting runs (should fail)', () => {
+      const res = spawnSync(executablePath, ['--runs', '300', resolve(__dirname + '/examples_0/assert_ok_test.sol')])
+      // match initial lines
+      expect(res.stdout.toString().trim().includes('Optimization should be enabled for runs')).toBeTruthy()
+    })
+
+    test('remix-tests running a test file with all options', () => {
+      const res = spawnSync(executablePath, ['--compiler', '0.7.5', '--evm', 'istanbul', '--optimize', 'true', '--runs', '250', resolve(__dirname + '/examples_0/assert_ok_test.sol')])
+      // match initial lines
+      expect(res.stdout.toString().trim().includes('Compiler version set to 0.7.5. Latest version is')).toBeTruthy()
+      expect(res.stdout.toString().trim().includes('Loading remote solc version v0.7.5+commit.eb77ed08 ...')).toBeTruthy()
+      expect(res.stdout.toString().trim().includes('EVM set to istanbul')).toBeTruthy()
+      expect(res.stdout.toString().trim().includes('Optimization is enabled')).toBeTruthy()
+      expect(res.stdout.toString().trim().includes('Runs set to 250')).toBeTruthy()
+      expect(res.stdout.toString().trim()).toMatch(/:: Running remix-tests - Unit testing for solidity ::/)
+      expect(res.stdout.toString().trim()).toMatch(/creation of library remix_tests.sol:Assert pending.../)
+      // match test result
+      expect(res.stdout.toString().trim()).toMatch(/Ok pass test/)
+      expect(res.stdout.toString().trim()).toMatch(/Ok fail test/)
+      // match fail test details
+      expect(res.stdout.toString().trim()).toMatch(/error: okFailTest fails/)
+    })
   })
 })

libs/remix-tests/tests/testRunner.spec.ts

@@ -57,7 +57,7 @@ async function compileAndDeploy(filename: string, callback: Function) {
       })
     },
     function compile(next: Function): void {
-      compileFileOrFiles(filename, false, { accounts }, next)
+      compileFileOrFiles(filename, false, { accounts }, null, next)
     },
     function deployAllContracts(compilationResult: compilationInterface, asts, next: Function): void {
       for(const filename in asts) {

libs/remix-ui/debugger-ui/.eslintrc

@@ -1,250 +1,18 @@
 {
-  "rules": {
-    "@typescript-eslint/ban-types": "off",
-    "no-case-declarations": "off",
-    "array-callback-return": "warn",
-    "dot-location": ["warn", "property"],
-    "eqeqeq": ["warn", "smart"],
-    "new-parens": "warn",
-    "no-caller": "warn",
-    "no-cond-assign": ["warn", "except-parens"],
-    "no-const-assign": "warn",
-    "no-control-regex": "warn",
-    "no-delete-var": "warn",
-    "no-dupe-args": "warn",
-    "no-dupe-keys": "warn",
-    "no-duplicate-case": "warn",
-    "no-empty-character-class": "warn",
-    "no-empty-pattern": "warn",
-    "no-eval": "warn",
-    "no-ex-assign": "warn",
-    "no-extend-native": "warn",
-    "no-extra-bind": "warn",
-    "no-extra-label": "warn",
-    "no-fallthrough": "warn",
-    "no-func-assign": "warn",
-    "no-implied-eval": "warn",
-    "no-invalid-regexp": "warn",
-    "no-iterator": "warn",
-    "no-label-var": "warn",
-    "no-labels": ["warn", { "allowLoop": true, "allowSwitch": false }],
-    "no-lone-blocks": "warn",
-    "no-loop-func": "warn",
-    "no-mixed-operators": [
-      "warn",
-      {
-        "groups": [
-          ["&", "|", "^", "~", "<<", ">>", ">>>"],
-          ["==", "!=", "===", "!==", ">", ">=", "<", "<="],
-          ["&&", "||"],
-          ["in", "instanceof"]
-        ],
-        "allowSamePrecedence": false
-      }
-    ],
-    "no-multi-str": "warn",
-    "no-native-reassign": "warn",
-    "no-negated-in-lhs": "warn",
-    "no-new-func": "warn",
-    "no-new-object": "warn",
-    "no-new-symbol": "warn",
-    "no-new-wrappers": "warn",
-    "no-obj-calls": "warn",
-    "no-octal": "warn",
-    "no-octal-escape": "warn",
-    "no-redeclare": "warn",
-    "no-regex-spaces": "warn",
-    "no-restricted-syntax": ["warn", "WithStatement"],
-    "no-script-url": "warn",
-    "no-self-assign": "warn",
-    "no-self-compare": "warn",
-    "no-sequences": "warn",
-    "no-shadow-restricted-names": "warn",
-    "no-sparse-arrays": "warn",
-    "no-template-curly-in-string": "warn",
-    "no-this-before-super": "warn",
-    "no-throw-literal": "warn",
-    "no-restricted-globals": [
-      "error",
-      "addEventListener",
-      "blur",
-      "close",
-      "closed",
-      "confirm",
-      "defaultStatus",
-      "defaultstatus",
-      "event",
-      "external",
-      "find",
-      "focus",
-      "frameElement",
-      "frames",
-      "history",
-      "innerHeight",
-      "innerWidth",
-      "length",
-      "location",
-      "locationbar",
-      "menubar",
-      "moveBy",
-      "moveTo",
-      "name",
-      "onblur",
-      "onerror",
-      "onfocus",
-      "onload",
-      "onresize",
-      "onunload",
-      "open",
-      "opener",
-      "opera",
-      "outerHeight",
-      "outerWidth",
-      "pageXOffset",
-      "pageYOffset",
-      "parent",
-      "print",
-      "removeEventListener",
-      "resizeBy",
-      "resizeTo",
-      "screen",
-      "screenLeft",
-      "screenTop",
-      "screenX",
-      "screenY",
-      "scroll",
-      "scrollbars",
-      "scrollBy",
-      "scrollTo",
-      "scrollX",
-      "scrollY",
-      "self",
-      "status",
-      "statusbar",
-      "stop",
-      "toolbar",
-      "top"
-    ],
-    "no-unexpected-multiline": "warn",
-    "no-unreachable": "warn",
-    "no-unused-expressions": [
-      "error",
-      {
-        "allowShortCircuit": true,
-        "allowTernary": true,
-        "allowTaggedTemplates": true
-      }
-    ],
-    "no-unused-labels": "warn",
-    "no-useless-computed-key": "warn",
-    "no-useless-concat": "warn",
-    "no-useless-escape": "warn",
-    "no-useless-rename": [
-      "warn",
-      {
-        "ignoreDestructuring": false,
-        "ignoreImport": false,
-        "ignoreExport": false
-      }
-    ],
-    "no-with": "warn",
-    "no-whitespace-before-property": "warn",
-    "react-hooks/exhaustive-deps": "warn",
-    "require-yield": "warn",
-    "rest-spread-spacing": ["warn", "never"],
-    "strict": ["warn", "never"],
-    "unicode-bom": ["warn", "never"],
-    "use-isnan": "warn",
-    "valid-typeof": "warn",
-    "no-restricted-properties": [
-      "error",
-      {
-        "object": "require",
-        "property": "ensure",
-        "message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting"
-      },
-      {
-        "object": "System",
-        "property": "import",
-        "message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting"
-      }
-    ],
-    "getter-return": "warn",
-    "import/first": "error",
-    "import/no-amd": "error",
-    "import/no-webpack-loader-syntax": "error",
-    "react/forbid-foreign-prop-types": ["warn", { "allowInPropTypes": true }],
-    "react/jsx-no-comment-textnodes": "warn",
-    "react/jsx-no-duplicate-props": "warn",
-    "react/jsx-no-target-blank": "warn",
-    "react/jsx-no-undef": "error",
-    "react/jsx-pascal-case": ["warn", { "allowAllCaps": true, "ignore": [] }],
-    "react/jsx-uses-react": "warn",
-    "react/jsx-uses-vars": "warn",
-    "react/no-danger-with-children": "warn",
-    "react/no-direct-mutation-state": "warn",
-    "react/no-is-mounted": "warn",
-    "react/no-typos": "error",
-    "react/react-in-jsx-scope": "error",
-    "react/require-render-return": "error",
-    "react/style-prop-object": "warn",
-    "react/jsx-no-useless-fragment": "warn",
-    "jsx-a11y/accessible-emoji": "warn",
-    "jsx-a11y/alt-text": "warn",
-    "jsx-a11y/anchor-has-content": "warn",
-    "jsx-a11y/anchor-is-valid": [
-      "warn",
-      { "aspects": ["noHref", "invalidHref"] }
-    ],
-    "jsx-a11y/aria-activedescendant-has-tabindex": "warn",
-    "jsx-a11y/aria-props": "warn",
-    "jsx-a11y/aria-proptypes": "warn",
-    "jsx-a11y/aria-role": "warn",
-    "jsx-a11y/aria-unsupported-elements": "warn",
-    "jsx-a11y/heading-has-content": "warn",
-    "jsx-a11y/iframe-has-title": "warn",
-    "jsx-a11y/img-redundant-alt": "warn",
-    "jsx-a11y/no-access-key": "warn",
-    "jsx-a11y/no-distracting-elements": "warn",
-    "jsx-a11y/no-redundant-roles": "warn",
-    "jsx-a11y/role-has-required-aria-props": "warn",
-    "jsx-a11y/role-supports-aria-props": "warn",
-    "jsx-a11y/scope": "warn",
-    "react-hooks/rules-of-hooks": "error",
-    "default-case": "off",
-    "no-dupe-class-members": "off",
-    "no-undef": "off",
-    "@typescript-eslint/consistent-type-assertions": "warn",
-    "no-array-constructor": "off",
-    "@typescript-eslint/no-array-constructor": "warn",
-    "@typescript-eslint/no-namespace": "error",
-    "no-use-before-define": "off",
-    "@typescript-eslint/no-use-before-define": [
-      "warn",
-      {
-        "functions": false,
-        "classes": false,
-        "variables": false,
-        "typedefs": false
-      }
-    ],
-    "no-unused-vars": "off",
-    "@typescript-eslint/no-unused-vars": [
-      "warn",
-      { "args": "none", "ignoreRestSiblings": true }
-    ],
-    "no-useless-constructor": "off",
-    "@typescript-eslint/no-useless-constructor": "warn"
-  },
   "env": {
-    "browser": true,
-    "commonjs": true,
-    "es6": true,
-    "jest": true,
-    "node": true
+      "browser": true,
+      "es6": true
+  },
+  "extends": "../../../.eslintrc",
+  "globals": {
+      "Atomics": "readonly",
+      "SharedArrayBuffer": "readonly"
   },
-  "settings": { "react": { "version": "detect" } },
-  "plugins": ["import", "jsx-a11y", "react", "react-hooks"],
-  "extends": ["../../../.eslintrc"],
-  "ignorePatterns": ["!**/*"]
+  "parserOptions": {
+      "ecmaVersion": 11,
+      "sourceType": "module"
+  },
+  "rules": {
+      "standard/no-callback-literal": "off"
+  }
 } 

libs/remix-ui/debugger-ui/jest.config.js

@@ -9,4 +9,4 @@ module.exports = {
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'],
   coverageDirectory: '../../coverage/libs/debugger-ui'
-};
+}

libs/remix-ui/debugger-ui/src/hooks/extract-data.tsx

@@ -1,58 +1,58 @@
-import React, { useState, useEffect } from 'react'
-import { ExtractData, ExtractFunc } from '../types'
+import React, { useState, useEffect } from 'react' // eslint-disable-line
+import { ExtractData, ExtractFunc } from '../types' // eslint-disable-line
 
 export const useExtractData = (json, extractFunc?: ExtractFunc): Array<{ key: string, data: ExtractData }> => {
-    const [data, setData] = useState([])
-
-    useEffect(() => {
-        const data: Array<{ key: string, data: ExtractData }> = Object.keys(json).map((innerKey) => {
-            if (extractFunc) {
-                return {
-                    key: innerKey,
-                    data : extractFunc(json[innerKey], json) 
-                }
-            } else {
-                return {
-                    key: innerKey,
-                    data: extractDataDefault(json[innerKey], json)
-                }
-            }
-        })
-
-        setData(data)
-
-        return () => {
-            setData(null)
+  const [data, setData] = useState([])
+
+  useEffect(() => {
+    const data: Array<{ key: string, data: ExtractData }> = Object.keys(json).map((innerKey) => {
+      if (extractFunc) {
+        return {
+          key: innerKey,
+          data: extractFunc(json[innerKey], json)
         }
-    }, [json, extractFunc])
-
-    const extractDataDefault: ExtractFunc = (item, parent?) => {
-        const ret: ExtractData = {}
-
-        if (item instanceof Array) {
-            ret.children = item.map((item, index) => {
-            return {key: index, value: item}
-            })
-            ret.self = 'Array'
-            ret.isNode = true
-            ret.isLeaf = false
-        } else if (item instanceof Object) {
-            ret.children = Object.keys(item).map((key) => {
-                return {key: key, value: item[key]}
-            })
-            ret.self = 'Object'
-            ret.isNode = true
-            ret.isLeaf = false
-        } else {
-            ret.self = item
-            ret.children = null
-            ret.isNode = false
-            ret.isLeaf = true
+      } else {
+        return {
+          key: innerKey,
+          data: extractDataDefault(json[innerKey], json)
         }
-        return ret
+      }
+    })
+
+    setData(data)
+
+    return () => {
+      setData(null)
+    }
+  }, [json, extractFunc])
+
+  const extractDataDefault: ExtractFunc = (item, parent?) => {
+    const ret: ExtractData = {}
+
+    if (item instanceof Array) {
+      ret.children = item.map((item, index) => {
+        return { key: index, value: item }
+      })
+      ret.self = 'Array'
+      ret.isNode = true
+      ret.isLeaf = false
+    } else if (item instanceof Object) {
+      ret.children = Object.keys(item).map((key) => {
+        return { key: key, value: item[key] }
+      })
+      ret.self = 'Object'
+      ret.isNode = true
+      ret.isLeaf = false
+    } else {
+      ret.self = item
+      ret.children = null
+      ret.isNode = false
+      ret.isLeaf = true
     }
+    return ret
+  }
 
-    return data
+  return data
 }
 
 export default useExtractData

libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect } from 'react' // eslint-disable-line
 import './button-navigator.css'
 
 export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward, stepOverForward, jumpOut, jumpPreviousBreakpoint, jumpNextBreakpoint, jumpToException, revertedReason, stepState, jumpOutDisabled }) => {
@@ -45,7 +45,7 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
         intoForwardDisabled: stepState === 'end',
         overForwardDisabled: stepState === 'end',
         jumpNextBreakpointDisabled: stepState === 'end',
-        jumpOutDisabled: jumpOutDisabled ? jumpOutDisabled : true
+        jumpOutDisabled: jumpOutDisabled || true
       }
     })
   }
@@ -60,7 +60,7 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
       </div>
 
       <div className="jumpButtons btn-group py-1">
-        <button className='btn btn-primary btn-sm navigator jumpButton fas fa-step-backward'  id='jumppreviousbreakpoint' data-id="buttonNavigatorJumpPreviousBreakpoint" title='Jump to the previous breakpoint' onClick={() => { jumpPreviousBreakpoint && jumpPreviousBreakpoint() }} disabled={state.jumpPreviousBreakpointDisabled}></button>
+        <button className='btn btn-primary btn-sm navigator jumpButton fas fa-step-backward' id='jumppreviousbreakpoint' data-id="buttonNavigatorJumpPreviousBreakpoint" title='Jump to the previous breakpoint' onClick={() => { jumpPreviousBreakpoint && jumpPreviousBreakpoint() }} disabled={state.jumpPreviousBreakpointDisabled}></button>
         <button className='btn btn-primary btn-sm navigator jumpButton fas fa-eject' id='jumpout' title='Jump out' onClick={() => { jumpOut && jumpOut() }} disabled={state.jumpOutDisabled}></button>
         <button className='btn btn-primary btn-sm navigator jumpButton fas fa-step-forward' id='jumpnextbreakpoint' data-id="buttonNavigatorJumpNextBreakpoint" title='Jump to the next breakpoint' onClick={() => { jumpNextBreakpoint && jumpNextBreakpoint() }} disabled={state.jumpNextBreakpointDisabled}></button>
       </div>

libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx

@@ -1,11 +1,11 @@
-import React, { useState, useEffect } from 'react'
-import TxBrowser from './tx-browser/tx-browser'
-import StepManager from './step-manager/step-manager'
-import VmDebugger from './vm-debugger/vm-debugger'
-import VmDebuggerHead from './vm-debugger/vm-debugger-head'
-import { TransactionDebugger as Debugger } from '@remix-project/remix-debug'
-import { DebuggerUIProps } from './idebugger-api'
-import { Toaster } from '@remix-ui/toaster'
+import React, { useState, useEffect } from 'react' // eslint-disable-line
+import TxBrowser from './tx-browser/tx-browser' // eslint-disable-line
+import StepManager from './step-manager/step-manager' // eslint-disable-line
+import VmDebugger from './vm-debugger/vm-debugger' // eslint-disable-line
+import VmDebuggerHead from './vm-debugger/vm-debugger-head' // eslint-disable-line
+import { TransactionDebugger as Debugger } from '@remix-project/remix-debug' // eslint-disable-line
+import { DebuggerUIProps } from './idebugger-api' // eslint-disable-line
+import { Toaster } from '@remix-ui/toaster' // eslint-disable-line
 /* eslint-disable-next-line */
 import './debugger-ui.css'
 
@@ -43,13 +43,12 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
 
   useEffect(() => {
     const setEditor = () => {
-      
       debuggerModule.onBreakpointCleared((fileName, row) => {
-        if (state.debugger) state.debugger.breakPointManager.remove({fileName: fileName, row: row})
+        if (state.debugger) state.debugger.breakPointManager.remove({ fileName: fileName, row: row })
       })
 
       debuggerModule.onBreakpointAdded((fileName, row) => {
-        if (state.debugger) state.debugger.breakPointManager.add({fileName: fileName, row: row})
+        if (state.debugger) state.debugger.breakPointManager.add({ fileName: fileName, row: row })
       })
 
       debuggerModule.onEditorContentChanged(() => {
@@ -65,7 +64,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
 
     debuggerInstance.event.register('debuggerStatus', async (isActive) => {
       await debuggerModule.discardHighlight()
-      setState( prevState => {
+      setState(prevState => {
         return { ...prevState, isActive }
       })
     })
@@ -184,49 +183,49 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
     })
   }
 
-const debug = (txHash) => {
-  startDebugging(null, txHash, null)
-}
+  const debug = (txHash) => {
+    startDebugging(null, txHash, null)
+  }
 
-const stepManager = {
-  jumpTo: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpTo.bind(state.debugger.step_manager) : null,
-  stepOverBack: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepOverBack.bind(state.debugger.step_manager) : null,
-  stepIntoBack: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepIntoBack.bind(state.debugger.step_manager) : null,
-  stepIntoForward: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepIntoForward.bind(state.debugger.step_manager) : null,
-  stepOverForward: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepOverForward.bind(state.debugger.step_manager) : null,
-  jumpOut: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpOut.bind(state.debugger.step_manager) : null,
-  jumpPreviousBreakpoint: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpPreviousBreakpoint.bind(state.debugger.step_manager) : null,
-  jumpNextBreakpoint: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpNextBreakpoint.bind(state.debugger.step_manager) : null,
-  jumpToException: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpToException.bind(state.debugger.step_manager) : null,
-  traceLength: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.traceLength : null,
-  registerEvent: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.event.register.bind(state.debugger.step_manager.event) : null,
-}
-const vmDebugger = {
-  registerEvent: state.debugger && state.debugger.vmDebuggerLogic ? state.debugger.vmDebuggerLogic.event.register.bind(state.debugger.vmDebuggerLogic.event) : null,
-  triggerEvent: state.debugger && state.debugger.vmDebuggerLogic ? state.debugger.vmDebuggerLogic.event.trigger.bind(state.debugger.vmDebuggerLogic.event) : null
-}
- return (
-      <div>
-        <Toaster message={state.toastMessage} />
-        <div className="px-2">
-          <div className="mt-3">
-            <p className="mt-2 debuggerLabel">Debugger Configuration</p>
-            <div className="mt-2 debuggerConfig custom-control custom-checkbox">
-              <input className="custom-control-input" id="debugGeneratedSourcesInput" onChange={({ target: { checked } }) => {
-                setState(prevState => {
-                  return { ...prevState, opt: { debugWithGeneratedSources: checked }}
-                })
-              }} type="checkbox" title="Debug with generated sources" />
-              <label data-id="debugGeneratedSourcesLabel" className="form-check-label custom-control-label" htmlFor="debugGeneratedSourcesInput">Use generated sources (from Solidity v0.7.2)</label>
-            </div>
+  const stepManager = {
+    jumpTo: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpTo.bind(state.debugger.step_manager) : null,
+    stepOverBack: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepOverBack.bind(state.debugger.step_manager) : null,
+    stepIntoBack: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepIntoBack.bind(state.debugger.step_manager) : null,
+    stepIntoForward: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepIntoForward.bind(state.debugger.step_manager) : null,
+    stepOverForward: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepOverForward.bind(state.debugger.step_manager) : null,
+    jumpOut: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpOut.bind(state.debugger.step_manager) : null,
+    jumpPreviousBreakpoint: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpPreviousBreakpoint.bind(state.debugger.step_manager) : null,
+    jumpNextBreakpoint: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpNextBreakpoint.bind(state.debugger.step_manager) : null,
+    jumpToException: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpToException.bind(state.debugger.step_manager) : null,
+    traceLength: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.traceLength : null,
+    registerEvent: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.event.register.bind(state.debugger.step_manager.event) : null
+  }
+  const vmDebugger = {
+    registerEvent: state.debugger && state.debugger.vmDebuggerLogic ? state.debugger.vmDebuggerLogic.event.register.bind(state.debugger.vmDebuggerLogic.event) : null,
+    triggerEvent: state.debugger && state.debugger.vmDebuggerLogic ? state.debugger.vmDebuggerLogic.event.trigger.bind(state.debugger.vmDebuggerLogic.event) : null
+  }
+  return (
+    <div>
+      <Toaster message={state.toastMessage} />
+      <div className="px-2">
+        <div className="mt-3">
+          <p className="mt-2 debuggerLabel">Debugger Configuration</p>
+          <div className="mt-2 debuggerConfig custom-control custom-checkbox">
+            <input className="custom-control-input" id="debugGeneratedSourcesInput" onChange={({ target: { checked } }) => {
+              setState(prevState => {
+                return { ...prevState, opt: { debugWithGeneratedSources: checked } }
+              })
+            }} type="checkbox" title="Debug with generated sources" />
+            <label data-id="debugGeneratedSourcesLabel" className="form-check-label custom-control-label" htmlFor="debugGeneratedSourcesInput">Use generated sources (from Solidity v0.7.2)</label>
           </div>
-          <TxBrowser requestDebug={ requestDebug } unloadRequested={ unloadRequested } transactionNumber={ state.txNumber } debugging={ state.debugging } />
-  { state.debugging && <StepManager stepManager={ stepManager } /> }
-  { state.debugging && <VmDebuggerHead vmDebugger={ vmDebugger } /> }
         </div>
-  { state.debugging && <div className="statusMessage">{ state.statusMessage }</div> }
-  { state.debugging && <VmDebugger vmDebugger={ vmDebugger } /> }
+        <TxBrowser requestDebug={ requestDebug } unloadRequested={ unloadRequested } transactionNumber={ state.txNumber } debugging={ state.debugging } />
+        { state.debugging && <StepManager stepManager={ stepManager } /> }
+        { state.debugging && <VmDebuggerHead vmDebugger={ vmDebugger } /> }
       </div>
+      { state.debugging && <div className="statusMessage">{ state.statusMessage }</div> }
+      { state.debugging && <VmDebugger vmDebugger={ vmDebugger } /> }
+    </div>
   )
 }
 

libs/remix-ui/debugger-ui/src/lib/idebugger-api.ts

@@ -1,5 +1,5 @@
 
-import type { CompilationResult, CompilationSource } from '@remix-project/remix-solidity-ts'
+import type { CompilationResult, CompilationSource } from '@remix-project/remix-solidity-ts' // eslint-disable-line
 
 export interface DebuggerUIProps {
     debuggerAPI: IDebuggerApi

libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect } from 'react' // eslint-disable-line
 
 export const Slider = ({ jumpTo, sliderValue, traceLength }) => {
   const [state, setState] = useState({
@@ -25,16 +25,16 @@ export const Slider = ({ jumpTo, sliderValue, traceLength }) => {
 
   return (
     <div>
-        <input id='slider'
-            data-id="slider"
-            className='w-100 my-0'
-            type='range'
-            min={0}
-            max={traceLength ? traceLength - 1 : 0}
-            value={state.currentValue}
-            onChange={handleChange}
-            disabled={traceLength ? traceLength === 0 : true}
-        />
+      <input id='slider'
+        data-id="slider"
+        className='w-100 my-0'
+        type='range'
+        min={0}
+        max={traceLength ? traceLength - 1 : 0}
+        value={state.currentValue}
+        onChange={handleChange}
+        disabled={traceLength ? traceLength === 0 : true}
+      />
     </div>
   )
 }

libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx

@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from 'react'
-import Slider from '../slider/slider'
-import ButtonNavigator from '../button-navigator/button-navigator'
+import React, { useState, useEffect } from 'react' // eslint-disable-line
+import Slider from '../slider/slider' // eslint-disable-line
+import ButtonNavigator from '../button-navigator/button-navigator' // eslint-disable-line
 
 export const StepManager = ({ stepManager: { jumpTo, traceLength, stepIntoBack, stepIntoForward, stepOverBack, stepOverForward, jumpOut, jumpNextBreakpoint, jumpPreviousBreakpoint, jumpToException, registerEvent } }) => {
   const [state, setState] = useState({

libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect } from 'react' // eslint-disable-line
 import './tx-browser.css'
 
 export const TxBrowser = ({ requestDebug, unloadRequested, transactionNumber, debugging }) => {
@@ -63,7 +63,7 @@ export const TxBrowser = ({ requestDebug, unloadRequested, transactionNumber, de
             title={debugging ? 'Stop debugging' : 'Start debugging'}
             onClick={handleSubmit}
             data-id="debuggerTransactionStartButton"
-            disabled={!state.txNumber ? true : false }
+            disabled={!state.txNumber }
           >
             { debugging ? 'Stop' : 'Start' } debugging
           </button>

libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx

@@ -1,61 +1,61 @@
-import React, { useState, useRef, useEffect, useReducer } from 'react'
+import React, { useState, useRef, useEffect, useReducer } from 'react' // eslint-disable-line
 import { initialState, reducer } from '../../reducers/assembly-items'
 import './styles/assembly-items.css'
 
 export const AssemblyItems = ({ registerEvent }) => {
-    const [assemblyItems, dispatch] = useReducer(reducer, initialState)
-    const [selectedItem, setSelectedItem] = useState(0)
-    const refs = useRef({})
-    const asmItemsRef = useRef(null)
-
-    useEffect(()=>{
-        registerEvent && registerEvent('codeManagerChanged', (code, address, index) => {
-            dispatch({ type: 'FETCH_OPCODES_SUCCESS', payload: { code, address, index } })
-        })
-    }, [])
-
-    useEffect(() => {
-        if (selectedItem !== assemblyItems.index) {
-            indexChanged(assemblyItems.index)
-        }
-    }, [assemblyItems.index])
-
-    const indexChanged = (index: number) => {
-        if (index < 0) return
-        let currentItem = refs.current[selectedItem] ? refs.current[selectedItem] : null
-
-        if (currentItem) {
-            currentItem.removeAttribute('selected')
-            currentItem.removeAttribute('style')
-            if (currentItem.firstChild) {
-                currentItem.firstChild.removeAttribute('style')
-            }
-            const codeView = asmItemsRef.current
-    
-            currentItem = codeView.children[index]
-            currentItem.style.setProperty('border-color', 'var(--primary)')
-            currentItem.style.setProperty('border-style', 'solid')
-            currentItem.setAttribute('selected', 'selected')
-            codeView.scrollTop = currentItem.offsetTop - parseInt(codeView.offsetTop)
-            setSelectedItem(index)
-        }
+  const [assemblyItems, dispatch] = useReducer(reducer, initialState)
+  const [selectedItem, setSelectedItem] = useState(0)
+  const refs = useRef({})
+  const asmItemsRef = useRef(null)
+
+  useEffect(() => {
+    registerEvent && registerEvent('codeManagerChanged', (code, address, index) => {
+      dispatch({ type: 'FETCH_OPCODES_SUCCESS', payload: { code, address, index } })
+    })
+  }, [])
+
+  useEffect(() => {
+    if (selectedItem !== assemblyItems.index) {
+      indexChanged(assemblyItems.index)
     }
-
-    return (
-        <div className="border rounded px-1 mt-1 bg-light">
-            <div className='dropdownpanel'>
-                <div className='dropdowncontent'>
-                    <div className="pl-2 my-1 small instructions" id='asmitems' ref={asmItemsRef}>
-                        {
-                            assemblyItems.display.map((item, i) => {
-                                return <div className="px-1" key={i} ref={ref => refs.current[i] = ref}><span>{item}</span></div>
-                            })
-                        }
-                    </div>
-                </div>
-            </div>
+  }, [assemblyItems.index])
+
+  const indexChanged = (index: number) => {
+    if (index < 0) return
+    let currentItem = refs.current[selectedItem] ? refs.current[selectedItem] : null
+
+    if (currentItem) {
+      currentItem.removeAttribute('selected')
+      currentItem.removeAttribute('style')
+      if (currentItem.firstChild) {
+        currentItem.firstChild.removeAttribute('style')
+      }
+      const codeView = asmItemsRef.current
+
+      currentItem = codeView.children[index]
+      currentItem.style.setProperty('border-color', 'var(--primary)')
+      currentItem.style.setProperty('border-style', 'solid')
+      currentItem.setAttribute('selected', 'selected')
+      codeView.scrollTop = currentItem.offsetTop - parseInt(codeView.offsetTop)
+      setSelectedItem(index)
+    }
+  }
+
+  return (
+    <div className="border rounded px-1 mt-1 bg-light">
+      <div className='dropdownpanel'>
+        <div className='dropdowncontent'>
+          <div className="pl-2 my-1 small instructions" id='asmitems' ref={asmItemsRef}>
+            {
+              assemblyItems.display.map((item, i) => {
+                return <div className="px-1" key={i} ref={ref => { refs.current[i] = ref }}><span>{item}</span></div>
+              })
+            }
+          </div>
         </div>
-    )
+      </div>
+    </div>
+  )
 }
 
 export default AssemblyItems

libs/remix-ui/debugger-ui/src/lib/vm-debugger/calldata-panel.tsx

@@ -1,12 +1,12 @@
-import React from 'react'
-import DropdownPanel from './dropdown-panel'
+import React from 'react' // eslint-disable-line
+import DropdownPanel from './dropdown-panel' // eslint-disable-line
 
 export const CalldataPanel = ({ calldata }) => {
-    return (
-        <div id='calldatapanel'>
-            <DropdownPanel dropdownName='Call Data' calldata={calldata || {}} />
-        </div>
-    )
+  return (
+    <div id='calldatapanel'>
+      <DropdownPanel dropdownName='Call Data' calldata={calldata || {}} />
+    </div>
+  )
 }
 
 export default CalldataPanel

libs/remix-ui/debugger-ui/src/lib/vm-debugger/callstack-panel.tsx

@@ -1,12 +1,12 @@
-import React from 'react'
-import DropdownPanel from './dropdown-panel'
+import React from 'react' // eslint-disable-line
+import DropdownPanel from './dropdown-panel' // eslint-disable-line
 
 export const CallstackPanel = ({ calldata }) => {
-    return (
-        <div id='callstackpanel'>
-            <DropdownPanel dropdownName='Call Stack' calldata={calldata || {}} />
-        </div>
-    )
+  return (
+    <div id='callstackpanel'>
+      <DropdownPanel dropdownName='Call Stack' calldata={calldata || {}} />
+    </div>
+  )
 }
 
 export default CallstackPanel

libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx

@@ -1,38 +1,7 @@
-import React, { useState, useEffect } from 'react'
-import AssemblyItems from './assembly-items'
+import React, { useState, useEffect } from 'react' // eslint-disable-line
+import AssemblyItems from './assembly-items' // eslint-disable-line
 
 export const CodeListView = ({ registerEvent }) => {
-  const [state, setState] = useState({
-    code: [],
-    address: '',
-    itemSelected: null,
-    index: null
-  })
-
-  const indexChanged = (index) => {
-    if(index < 0) return
-    setState(prevState => {
-      return {
-        ...prevState,
-        index
-      }
-    })
-  }
-
-  const changed = (code, address, index) => {
-    if (state.address === address) {
-      return indexChanged(index)
-    }
-    setState(prevState => {
-      return {
-        ...prevState,
-        code,
-        address
-      }
-    })
-    indexChanged(index)
-  } 
-
   return (
     <div id='asmcodes'>
       <AssemblyItems registerEvent={registerEvent} />

libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx

@@ -1,211 +1,211 @@
-import React, { useState, useEffect, useReducer } from 'react'
-import { TreeView, TreeViewItem } from '@remix-ui/tree-view'
-import { DropdownPanelProps, ExtractData, ExtractFunc } from '../../types'
-import { CopyToClipboard } from '@remix-ui/clipboard'
+import React, { useState, useEffect, useReducer } from 'react' // eslint-disable-line
+import { TreeView, TreeViewItem } from '@remix-ui/tree-view' // eslint-disable-line
+import { DropdownPanelProps, ExtractData, ExtractFunc } from '../../types' // eslint-disable-line
+import { CopyToClipboard } from '@remix-ui/clipboard' // eslint-disable-line
 import { initialState, reducer } from '../../reducers/calldata'
 import './styles/dropdown-panel.css'
 
 export const DropdownPanel = (props: DropdownPanelProps) => {
-    const [calldataObj, dispatch] = useReducer(reducer, initialState)
-    const { dropdownName, dropdownMessage, calldata, header, loading, extractFunc, formatSelfFunc, registerEvent, triggerEvent, loadMoreEvent, loadMoreCompletedEvent } = props
-    const extractDataDefault: ExtractFunc = (item, parent?) => {
-        const ret: ExtractData = {}
-
-        if (item instanceof Array) {
-            ret.children = item.map((item, index) => {
-            return {key: index, value: item}
-            })
-            ret.self = 'Array'
-            ret.isNode = true
-            ret.isLeaf = false
-        } else if (item instanceof Object) {
-            ret.children = Object.keys(item).map((key) => {
-                return {key: key, value: item[key]}
-            })
-            ret.self = 'Object'
-            ret.isNode = true
-            ret.isLeaf = false
-        } else {
-            ret.self = item
-            ret.children = null
-            ret.isNode = false
-            ret.isLeaf = true
-        }
-        return ret
+  const [calldataObj, dispatch] = useReducer(reducer, initialState)
+  const { dropdownName, dropdownMessage, calldata, header, loading, extractFunc, formatSelfFunc, registerEvent, triggerEvent, loadMoreEvent, loadMoreCompletedEvent } = props
+  const extractDataDefault: ExtractFunc = (item, parent?) => {
+    const ret: ExtractData = {}
+
+    if (item instanceof Array) {
+      ret.children = item.map((item, index) => {
+        return { key: index, value: item }
+      })
+      ret.self = 'Array'
+      ret.isNode = true
+      ret.isLeaf = false
+    } else if (item instanceof Object) {
+      ret.children = Object.keys(item).map((key) => {
+        return { key: key, value: item[key] }
+      })
+      ret.self = 'Object'
+      ret.isNode = true
+      ret.isLeaf = false
+    } else {
+      ret.self = item
+      ret.children = null
+      ret.isNode = false
+      ret.isLeaf = true
     }
-    const formatSelfDefault = (key: string | number, data: ExtractData) => {
-        return (
-            <div className="d-flex mb-1 flex-row label_item">
-                <label className="small font-weight-bold pr-1 label_key">{key}:</label> 
-                <label className="m-0 label_value">{data.self}</label>
-            </div>
-        )
+    return ret
+  }
+  const formatSelfDefault = (key: string | number, data: ExtractData) => {
+    return (
+      <div className="d-flex mb-1 flex-row label_item">
+        <label className="small font-weight-bold pr-1 label_key">{key}:</label>
+        <label className="m-0 label_value">{data.self}</label>
+      </div>
+    )
+  }
+  const [state, setState] = useState({
+    header: '',
+    toggleDropdown: false,
+    message: {
+      innerText: 'No data available.',
+      display: 'block'
+    },
+    dropdownContent: {
+      innerText: '',
+      display: 'none'
+    },
+    title: {
+      innerText: '',
+      display: 'none'
+    },
+    copiableContent: '',
+    updating: false,
+    expandPath: [],
+    data: null
+  })
+
+  useEffect(() => {
+    registerEvent && registerEvent(loadMoreCompletedEvent, (updatedCalldata) => {
+      dispatch({ type: 'UPDATE_CALLDATA_SUCCESS', payload: updatedCalldata })
+    })
+  }, [])
+
+  useEffect(() => {
+    dispatch({ type: 'FETCH_CALLDATA_SUCCESS', payload: calldata })
+  }, [calldata])
+
+  useEffect(() => {
+    update(calldata)
+  }, [calldataObj.calldata])
+
+  useEffect(() => {
+    message(dropdownMessage)
+  }, [dropdownMessage])
+
+  useEffect(() => {
+    if (loading && !state.updating) setLoading()
+  }, [loading])
+
+  const handleToggle = () => {
+    setState(prevState => {
+      return {
+        ...prevState,
+        toggleDropdown: !prevState.toggleDropdown
+      }
+    })
+  }
+
+  const handleExpand = (keyPath) => {
+    if (!state.expandPath.includes(keyPath)) {
+      state.expandPath.push(keyPath)
+    } else {
+      state.expandPath = state.expandPath.filter(path => !path.startsWith(keyPath))
     }
-    const [state, setState] = useState({
-        header: '',
-        toggleDropdown: false,
+  }
+
+  const message = (message) => {
+    if (message === state.message.innerText) return
+    setState(prevState => {
+      return {
+        ...prevState,
         message: {
-            innerText: 'No data available.',
-            display: 'block'
+          innerText: message,
+          display: message ? 'block' : ''
         },
-        dropdownContent: {
-            innerText: '',
-            display: 'none'
+        updating: false
+      }
+    })
+  }
+
+  const setLoading = () => {
+    setState(prevState => {
+      return {
+        ...prevState,
+        message: {
+          innerText: '',
+          display: 'none'
         },
-        title: {
-            innerText: '',
-            display: 'none'
+        dropdownContent: {
+          ...prevState.dropdownContent,
+          display: 'none'
         },
         copiableContent: '',
-        updating: false,
-        expandPath: [],
-        data: null
+        updating: true
+      }
     })
+  }
 
-    useEffect(() => {
-        registerEvent && registerEvent(loadMoreCompletedEvent, (updatedCalldata) => {
-            dispatch({ type: 'UPDATE_CALLDATA_SUCCESS', payload: updatedCalldata })
-        })
-    }, [])
-
-    useEffect(() => {
-        dispatch({ type: 'FETCH_CALLDATA_SUCCESS', payload: calldata })
-    }, [calldata])
-
-    useEffect(() => {
-        update(calldata)
-    }, [calldataObj.calldata])
-
-    useEffect(() => {
-        message(dropdownMessage)
-    }, [dropdownMessage])
-
-    useEffect(() => {
-        if (loading && !state.updating) setLoading()
-    }, [loading])
-
-    const handleToggle = () => {
-        setState(prevState => {
-            return {
-                ...prevState,
-                toggleDropdown: !prevState.toggleDropdown
-            }
-        })
-    }
-
-    const handleExpand = (keyPath) => {
-        if (!state.expandPath.includes(keyPath)) {
-            state.expandPath.push(keyPath)
-        } else {
-            state.expandPath = state.expandPath.filter(path => !path.startsWith(keyPath))
-        }
-    }
-
-    const message = (message) => {
-        if (message === state.message.innerText) return
-        setState(prevState => {
-            return {
-                ...prevState,
-                message: {
-                    innerText: message,
-                    display: message ? 'block' : ''
-                },
-                updating: false
-            }
-        })
-    }
+  const update = function (calldata) {
+    let isEmpty = !calldata
 
-    const setLoading = () => {
-        setState(prevState => {
-            return {
-                ...prevState,
-                message: {
-                    innerText: '',
-                    display: 'none'
-                },
-                dropdownContent: {
-                    ...prevState.dropdownContent,
-                    display: 'none'
-                },
-                copiableContent: '',
-                updating: true
-            }
-        })
-    }
+    if (calldata && Array.isArray(calldata) && calldata.length === 0) isEmpty = true
+    else if (calldata && Object.keys(calldata).length === 0 && calldata.constructor === Object) isEmpty = true
 
-    const update = function (calldata) {
-        let isEmpty = !calldata ? true : false
-
-        if(calldata && Array.isArray(calldata) && calldata.length === 0) isEmpty = true
-        else if(calldata && Object.keys(calldata).length === 0 && calldata.constructor === Object) isEmpty = true
-
-        setState(prevState => {
-            return {
-                ...prevState,
-                dropdownContent: {
-                    ...prevState.dropdownContent,
-                    display: 'block'
-                },
-                copiableContent: JSON.stringify(calldata, null, '\t'),
-                message: {
-                    innerText: isEmpty ? 'No data available' : '',
-                    display: isEmpty ? 'block' : 'none'
-                },
-                updating: false,
-                toggleDropdown: !isEmpty,
-                data: calldata
-            }
-        })
-    }
+    setState(prevState => {
+      return {
+        ...prevState,
+        dropdownContent: {
+          ...prevState.dropdownContent,
+          display: 'block'
+        },
+        copiableContent: JSON.stringify(calldata, null, '\t'),
+        message: {
+          innerText: isEmpty ? 'No data available' : '',
+          display: isEmpty ? 'block' : 'none'
+        },
+        updating: false,
+        toggleDropdown: !isEmpty,
+        data: calldata
+      }
+    })
+  }
+
+  const renderData = (item: ExtractData, parent, key: string | number, keyPath: string) => {
+    const data = extractFunc ? extractFunc(item, parent) : extractDataDefault(item, parent)
+    const children = (data.children || []).map((child) => {
+      return (
+        renderData(child.value, data, child.key, keyPath + '/' + child.key)
+      )
+    })
 
-    const renderData = (item: ExtractData, parent, key: string | number, keyPath: string) => {
-        const data = extractFunc ? extractFunc(item, parent) : extractDataDefault(item, parent)
-        const children = (data.children || []).map((child) => {
-            return (
-                renderData(child.value, data, child.key, keyPath + '/' + child.key)
-            )
-        })
-
-        if (children && children.length > 0 ) {
-            return (
-                <TreeViewItem id={`treeViewItem${key}`} key={keyPath} label={ formatSelfFunc ? formatSelfFunc(key, data) : formatSelfDefault(key, data) } onClick={() => handleExpand(keyPath)} expand={state.expandPath.includes(keyPath)}>
-                    <TreeView id={`treeView${key}`} key={keyPath}>
-                        { children }
-                        { data.hasNext && <TreeViewItem id={`treeViewLoadMore`} data-id={`treeViewLoadMore`} className="cursor_pointer" label="Load more" onClick={() => { triggerEvent(loadMoreEvent, [data.cursor]) }} /> }
-                    </TreeView>
-                </TreeViewItem>
-            )
-        } else {
-            return <TreeViewItem id={key.toString()} key={keyPath} label={ formatSelfFunc ? formatSelfFunc(key, data) : formatSelfDefault(key, data) } onClick={() => handleExpand(keyPath)} expand={state.expandPath.includes(keyPath)} />
-        }
+    if (children && children.length > 0) {
+      return (
+        <TreeViewItem id={`treeViewItem${key}`} key={keyPath} label={formatSelfFunc ? formatSelfFunc(key, data) : formatSelfDefault(key, data)} onClick={() => handleExpand(keyPath)} expand={state.expandPath.includes(keyPath)}>
+          <TreeView id={`treeView${key}`} key={keyPath}>
+            {children}
+            {data.hasNext && <TreeViewItem id={'treeViewLoadMore'} data-id={'treeViewLoadMore'} className="cursor_pointer" label="Load more" onClick={() => { triggerEvent(loadMoreEvent, [data.cursor]) }} />}
+          </TreeView>
+        </TreeViewItem>
+      )
+    } else {
+      return <TreeViewItem id={key.toString()} key={keyPath} label={formatSelfFunc ? formatSelfFunc(key, data) : formatSelfDefault(key, data)} onClick={() => handleExpand(keyPath)} expand={state.expandPath.includes(keyPath)} />
     }
-
-    const uniquePanelName = dropdownName.split(' ').join('')
-
-    return (
-        <div className="border rounded px-1 mt-1 bg-light">
-            <div className="py-0 px-1 title">
-                <div className={state.toggleDropdown ? 'icon fas fa-caret-down' : 'icon fas fa-caret-right'} onClick={handleToggle}></div>
-                <div className="name" data-id={`dropdownPanel${uniquePanelName}`} onClick={handleToggle}>{dropdownName}</div><span className="nameDetail" onClick={handleToggle}>{ header }</span>
-                <CopyToClipboard content={state.copiableContent} data-id={`dropdownPanelCopyToClipboard${uniquePanelName}`} />
-            </div>
-            <div className='dropdownpanel' style={{ display: state.toggleDropdown ? 'block' : 'none' }}>
-                <i className="refresh fas fa-sync" style={{ display: state.updating ? 'inline-block' : 'none' }} aria-hidden="true"></i>
-                <div className='dropdowncontent' style={{ display: state.dropdownContent.display }}>
-                    {
-                        state.data &&
-                        <TreeView id="treeView">
-                            {
-                                Object.keys(state.data).map((innerkey) => renderData(state.data[innerkey], state.data, innerkey, innerkey))
-                            }
-                        </TreeView>
-                    }
-                </div>
-                <div className='dropdownrawcontent' hidden={true}>{ state.copiableContent }</div>
-                <div className='message' style={{ display: state.message.display }}>{ state.message.innerText }</div>
-            </div>
+  }
+
+  const uniquePanelName = dropdownName.split(' ').join('')
+
+  return (
+    <div className="border rounded px-1 mt-1 bg-light">
+      <div className="py-0 px-1 title">
+        <div className={state.toggleDropdown ? 'icon fas fa-caret-down' : 'icon fas fa-caret-right'} onClick={handleToggle}></div>
+        <div className="name" data-id={`dropdownPanel${uniquePanelName}`} onClick={handleToggle}>{dropdownName}</div><span className="nameDetail" onClick={handleToggle}>{header}</span>
+        <CopyToClipboard content={state.copiableContent} data-id={`dropdownPanelCopyToClipboard${uniquePanelName}`} />
+      </div>
+      <div className='dropdownpanel' style={{ display: state.toggleDropdown ? 'block' : 'none' }}>
+        <i className="refresh fas fa-sync" style={{ display: state.updating ? 'inline-block' : 'none' }} aria-hidden="true"></i>
+        <div className='dropdowncontent' style={{ display: state.dropdownContent.display }}>
+          {
+            state.data &&
+            <TreeView id="treeView">
+              {
+                Object.keys(state.data).map((innerkey) => renderData(state.data[innerkey], state.data, innerkey, innerkey))
+              }
+            </TreeView>
+          }
         </div>
-    )
+        <div className='dropdownrawcontent' hidden={true}>{state.copiableContent}</div>
+        <div className='message' style={{ display: state.message.display }}>{state.message.innerText}</div>
+      </div>
+    </div>
+  )
 }
 
 export default DropdownPanel

libs/remix-ui/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx

@@ -1,12 +1,12 @@
-import React from 'react'
-import { DropdownPanel } from './dropdown-panel'
+import React from 'react' // eslint-disable-line
+import { DropdownPanel } from './dropdown-panel' // eslint-disable-line
 
 export const FullStoragesChanges = ({ calldata }) => {
-    return (
-        <div id='fullstorageschangespanel'>
-            <DropdownPanel dropdownName='Full Storages Changes' calldata={ calldata || {}} />
-        </div>
-    )
+  return (
+    <div id='fullstorageschangespanel'>
+      <DropdownPanel dropdownName='Full Storages Changes' calldata={ calldata || {}} />
+    </div>
+  )
 }
 
 export default FullStoragesChanges

libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx

@@ -1,19 +1,19 @@
-import React, { useState, useEffect } from 'react'
-import DropdownPanel from './dropdown-panel'
-import { default as deepequal } from 'deep-equal'
+import React, { useState, useEffect } from 'react' // eslint-disable-line
+import DropdownPanel from './dropdown-panel' // eslint-disable-line
+import { default as deepequal } from 'deep-equal' // eslint-disable-line
 
 export const FunctionPanel = ({ data }) => {
-    const [calldata, setCalldata] = useState(null)
+  const [calldata, setCalldata] = useState(null)
 
-    useEffect(() => {
-        if (!deepequal(calldata, data)) setCalldata(data)
-    }, [data])
+  useEffect(() => {
+    if (!deepequal(calldata, data)) setCalldata(data)
+  }, [data])
 
-    return (
-        <div id="FunctionPanel">
-            <DropdownPanel dropdownName='Function Stack' calldata={calldata || {}} />
-        </div>
-    )
+  return (
+    <div id='FunctionPanel'>
+      <DropdownPanel dropdownName='Function Stack' calldata={calldata || {}} />
+    </div>
+  )
 }
 
 export default FunctionPanel

libs/remix-ui/debugger-ui/src/lib/vm-debugger/memory-panel.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
-import DropdownPanel from './dropdown-panel'
+import React from 'react' // eslint-disable-line
+import DropdownPanel from './dropdown-panel' // eslint-disable-line
 
 export const MemoryPanel = ({ calldata }) => {
-    return (
-        <DropdownPanel  dropdownName='Memory' calldata={calldata || {}} />
-    )
+  return (
+    <DropdownPanel dropdownName='Memory' calldata={calldata || {}} />
+  )
 }
 
 export default MemoryPanel

libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx

@@ -1,62 +1,62 @@
-import React, { useState, useEffect } from 'react'
-import DropdownPanel from './dropdown-panel'
-import { extractData } from '../../utils/solidityTypeFormatter'
-import { ExtractData } from '../../types'
+import React, { useState, useEffect } from 'react' // eslint-disable-line
+import DropdownPanel from './dropdown-panel' // eslint-disable-line
+import { extractData } from '../../utils/solidityTypeFormatter' // eslint-disable-line
+import { ExtractData } from '../../types' // eslint-disable-line
 
 export const SolidityLocals = ({ data, message, registerEvent, triggerEvent }) => {
-    const [calldata, setCalldata] = useState(null)
+  const [calldata, setCalldata] = useState(null)
 
-    useEffect(() => {
-        data && setCalldata(data)
-    }, [data])
+  useEffect(() => {
+    data && setCalldata(data)
+  }, [data])
 
-    const formatSelf = (key: string, data: ExtractData) => {
-        let color = 'var(--primary)'
-        if (data.isArray || data.isStruct || data.isMapping) {
-            color = 'var(--info)'
-        } else if (
-            data.type.indexOf('uint') === 0 ||
-            data.type.indexOf('int') === 0 ||
-            data.type.indexOf('bool') === 0 ||
-            data.type.indexOf('enum') === 0
-        ) {
-            color = 'var(--green)'
-        } else if (data.type === 'string') {
-            color = 'var(--teal)'
-        } else if (data.self == 0x0) { // eslint-disable-line
-            color = 'var(--gray)'
-        }
-        if (data.type === 'string') {
-            data.self = JSON.stringify(data.self)
-        }
-        return (
-            <label className='mb-0' style={{ color: data.isProperty ? 'var(--info)' : '', whiteSpace: 'pre-wrap' }}>
-                {' ' + key}:
-                <label className='mb-0' style={{ color }}>
-                    {' ' + data.self}
-                </label>
-                <label style={{ fontStyle: 'italic' }}>
-                    {data.isProperty || !data.type ? '' : ' ' + data.type}
-                </label>
-            </label>
-        )
+  const formatSelf = (key: string, data: ExtractData) => {
+    let color = 'var(--primary)'
+    if (data.isArray || data.isStruct || data.isMapping) {
+      color = 'var(--info)'
+    } else if (
+      data.type.indexOf('uint') === 0 ||
+      data.type.indexOf('int') === 0 ||
+      data.type.indexOf('bool') === 0 ||
+      data.type.indexOf('enum') === 0
+    ) {
+      color = 'var(--green)'
+    } else if (data.type === 'string') {
+      color = 'var(--teal)'
+    } else if (data.self == 0x0) { // eslint-disable-line
+      color = 'var(--gray)'
+    }
+    if (data.type === 'string') {
+      data.self = JSON.stringify(data.self)
     }
-
     return (
-        <div id='soliditylocals' data-id="solidityLocals">
-            <DropdownPanel 
-                dropdownName='Solidity Locals'
-                dropdownMessage={message}
-                calldata={calldata || {}}
-                extractFunc={extractData}
-                formatSelfFunc={formatSelf}
-                registerEvent={registerEvent}
-                triggerEvent={triggerEvent}
-                loadMoreEvent='solidityLocalsLoadMore'
-                loadMoreCompletedEvent='solidityLocalsLoadMoreCompleted'
-            />
-        </div>
+      <label className='mb-0' style={{ color: data.isProperty ? 'var(--info)' : '', whiteSpace: 'pre-wrap' }}>
+        {' ' + key}:
+        <label className='mb-0' style={{ color }}>
+          {' ' + data.self}
+        </label>
+        <label style={{ fontStyle: 'italic' }}>
+          {data.isProperty || !data.type ? '' : ' ' + data.type}
+        </label>
+      </label>
     )
+  }
+
+  return (
+    <div id='soliditylocals' data-id="solidityLocals">
+      <DropdownPanel
+        dropdownName='Solidity Locals'
+        dropdownMessage={message}
+        calldata={calldata || {}}
+        extractFunc={extractData}
+        formatSelfFunc={formatSelf}
+        registerEvent={registerEvent}
+        triggerEvent={triggerEvent}
+        loadMoreEvent='solidityLocalsLoadMore'
+        loadMoreCompletedEvent='solidityLocalsLoadMoreCompleted'
+      />
+    </div>
+  )
 }
 
 export default SolidityLocals

libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-state.tsx

@@ -1,45 +1,45 @@
-import React from 'react'
-import DropdownPanel from './dropdown-panel'
+import React from 'react' // eslint-disable-line
+import DropdownPanel from './dropdown-panel' // eslint-disable-line
 import { extractData } from '../../utils/solidityTypeFormatter'
-import { ExtractData } from '../../types'
+import { ExtractData } from '../../types' // eslint-disable-line
 
 export const SolidityState = ({ calldata, message }) => {
-    const formatSelf = (key: string, data: ExtractData) => {
-        let color = 'var(--primary)'
-        if (data.isArray || data.isStruct || data.isMapping) {
-            color = 'var(--info)'
-        } else if (
-            data.type.indexOf('uint') === 0 ||
+  const formatSelf = (key: string, data: ExtractData) => {
+    let color = 'var(--primary)'
+    if (data.isArray || data.isStruct || data.isMapping) {
+      color = 'var(--info)'
+    } else if (
+      data.type.indexOf('uint') === 0 ||
             data.type.indexOf('int') === 0 ||
             data.type.indexOf('bool') === 0 ||
             data.type.indexOf('enum') === 0
-        ) {
-            color = 'var(--green)'
-        } else if (data.type === 'string') {
-            color = 'var(--teal)'
+    ) {
+      color = 'var(--green)'
+    } else if (data.type === 'string') {
+      color = 'var(--teal)'
         } else if (data.self == 0x0) { // eslint-disable-line
-            color = 'var(--gray)'
-        }
-        return (
-            <label className='mb-0' style={{ color: data.isProperty ? 'var(--info)' : '', whiteSpace: 'pre-wrap' }}>
-                {' ' + key}:
-                <label className='mb-0' style={{ color }}>
-                    {' ' + data.self}
-                </label>
-                <label style={{ fontStyle: 'italic' }}>
-                    {data.isProperty || !data.type ? '' : ' ' + data.type}
-                </label>
-            </label>
-        )
+      color = 'var(--gray)'
     }
-
     return (
-        <div id='soliditystate' data-id='soliditystate'>
-            {
-                <DropdownPanel dropdownName='Solidity State' calldata={calldata || {}} formatSelfFunc={formatSelf} extractFunc={extractData} />
-            }
-        </div>
+      <label className='mb-0' style={{ color: data.isProperty ? 'var(--info)' : '', whiteSpace: 'pre-wrap' }}>
+        {' ' + key}:
+        <label className='mb-0' style={{ color }}>
+          {' ' + data.self}
+        </label>
+        <label style={{ fontStyle: 'italic' }}>
+          {data.isProperty || !data.type ? '' : ' ' + data.type}
+        </label>
+      </label>
     )
+  }
+
+  return (
+    <div id='soliditystate' data-id='soliditystate'>
+      {
+        <DropdownPanel dropdownName='Solidity State' calldata={calldata || {}} formatSelfFunc={formatSelf} extractFunc={extractData} />
+      }
+    </div>
+  )
 }
 
 export default SolidityState

libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx

@@ -1,12 +1,12 @@
-import React from 'react'
-import DropdownPanel from './dropdown-panel'
+import React from 'react' // eslint-disable-line
+import DropdownPanel from './dropdown-panel' // eslint-disable-line
 
 export const StackPanel = ({ calldata }) => {
-    return (
-        <div id="stackpanel">
-            <DropdownPanel dropdownName='Stack' calldata={calldata || {}} />
-        </div>
-    )
+  return (
+    <div id='stackpanel'>
+      <DropdownPanel dropdownName='Stack' calldata={calldata || {}} />
+    </div>
+  )
 }
 
 export default StackPanel

libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx

@@ -1,12 +1,12 @@
-import React from 'react'
-import DropdownPanel from './dropdown-panel'
+import React from 'react' // eslint-disable-line
+import DropdownPanel from './dropdown-panel' // eslint-disable-line
 
 export const StepDetail = ({ stepDetail }) => {
-    return (
-        <div id='stepdetail' data-id="stepdetail">
-            <DropdownPanel dropdownName='Step details' calldata={stepDetail || {}} />
-        </div>
-    )
+  return (
+    <div id='stepdetail' data-id='stepdetail'>
+      <DropdownPanel dropdownName='Step details' calldata={stepDetail || {}} />
+    </div>
+  )
 }
 
 export default StepDetail

libs/remix-ui/debugger-ui/src/lib/vm-debugger/storage-panel.tsx

@@ -1,12 +1,12 @@
-import React from 'react'
-import DropdownPanel from './dropdown-panel'
+import React from 'react' // eslint-disable-line
+import DropdownPanel from './dropdown-panel' // eslint-disable-line
 
 export const StoragePanel = ({ calldata, header }) => {
-    return (
-        <div id='storagepanel'>
-            <DropdownPanel dropdownName='Storage' calldata={calldata || {}} header={header} />
-        </div>
-    )
+  return (
+    <div id='storagepanel'>
+      <DropdownPanel dropdownName='Storage' calldata={calldata || {}} header={header} />
+    </div>
+  )
 }
 
 export default StoragePanel

libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx

@@ -1,9 +1,9 @@
-import React, { useState, useEffect } from 'react'
-import CodeListView from './code-list-view'
-import FunctionPanel from './function-panel'
-import StepDetail from './step-detail'
-import SolidityState from './solidity-state'
-import SolidityLocals from './solidity-locals'
+import React, { useState, useEffect } from 'react' // eslint-disable-line
+import CodeListView from './code-list-view' // eslint-disable-line
+import FunctionPanel from './function-panel' // eslint-disable-line
+import StepDetail from './step-detail' // eslint-disable-line
+import SolidityState from './solidity-state' // eslint-disable-line
+import SolidityLocals from './solidity-locals' // eslint-disable-line
 
 export const VmDebuggerHead = ({ vmDebugger: { registerEvent, triggerEvent } }) => {
   const [functionPanel, setFunctionPanel] = useState(null)
@@ -11,17 +11,17 @@ export const VmDebuggerHead = ({ vmDebugger: { registerEvent, triggerEvent } })
     'vm trace step': '-',
     'execution step': '-',
     'add memory': '',
-    'gas': '',
+    gas: '',
     'remaining gas': '-',
     'loaded address': '-'
   })
   const [solidityState, setSolidityState] = useState({
     calldata: null,
-    message: null,
+    message: null
   })
   const [solidityLocals, setSolidityLocals] = useState({
     calldata: null,
-    message: null,
+    message: null
   })
 
   useEffect(() => {
@@ -36,12 +36,12 @@ export const VmDebuggerHead = ({ vmDebugger: { registerEvent, triggerEvent } })
     })
     registerEvent && registerEvent('traceUnloaded', () => {
       setStepDetail(() => {
-        return { 'vm trace step': '-', 'execution step': '-', 'add memory': '', 'gas': '', 'remaining gas': '-', 'loaded address': '-' }
+        return { 'vm trace step': '-', 'execution step': '-', 'add memory': '', gas: '', 'remaining gas': '-', 'loaded address': '-' }
       })
     })
     registerEvent && registerEvent('newTraceLoaded', () => {
       setStepDetail(() => {
-        return { 'vm trace step': '-', 'execution step': '-', 'add memory': '', 'gas': '', 'remaining gas': '-', 'loaded address': '-' }
+        return { 'vm trace step': '-', 'execution step': '-', 'add memory': '', gas: '', 'remaining gas': '-', 'loaded address': '-' }
       })
     })
     registerEvent && registerEvent('traceCurrentStepUpdate', (error, step) => {
@@ -56,7 +56,7 @@ export const VmDebuggerHead = ({ vmDebugger: { registerEvent, triggerEvent } })
     })
     registerEvent && registerEvent('traceStepCostUpdate', (error, gas) => {
       setStepDetail(prevState => {
-        return { ...prevState, 'gas': (error ? '-' : gas) }
+        return { ...prevState, gas: (error ? '-' : gas) }
       })
     })
     registerEvent && registerEvent('traceCurrentCalledAddressAtUpdate', (error, address) => {
@@ -97,15 +97,15 @@ export const VmDebuggerHead = ({ vmDebugger: { registerEvent, triggerEvent } })
   }, [registerEvent])
 
   return (
-    <div id="vmheadView" className="mt-1 px-0">
-      <div className="d-flex flex-column">
-        <div className="w-100">
+    <div id='vmheadView' className="mt-1 px-0">
+      <div className='d-flex flex-column'>
+        <div className='w-100'>
           <FunctionPanel data={functionPanel} />
           <SolidityLocals data={solidityLocals.calldata} message={solidityLocals.message} registerEvent={registerEvent} triggerEvent={triggerEvent} />
           <SolidityState calldata={solidityState.calldata} message={solidityState.message} />
         </div>
-        <div className="w-100"><CodeListView registerEvent={registerEvent} /></div>
-        <div className="w-100"><StepDetail stepDetail={stepDetail} /></div>
+        <div className='w-100'><CodeListView registerEvent={registerEvent} /></div>
+        <div className='w-100'><StepDetail stepDetail={stepDetail} /></div>
       </div>
     </div>
   )

libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx

@@ -1,11 +1,11 @@
-import React, { useState, useEffect } from 'react'
-import CalldataPanel from './calldata-panel'
-import MemoryPanel from './memory-panel'
-import CallstackPanel from './callstack-panel'
-import StackPanel from './stack-panel'
-import StoragePanel from './storage-panel'
-import ReturnValuesPanel from './dropdown-panel'
-import FullStoragesChangesPanel from './full-storages-changes'
+import React, { useState, useEffect } from 'react' // eslint-disable-line
+import CalldataPanel from './calldata-panel' // eslint-disable-line
+import MemoryPanel from './memory-panel' // eslint-disable-line
+import CallstackPanel from './callstack-panel' // eslint-disable-line
+import StackPanel from './stack-panel' // eslint-disable-line
+import StoragePanel from './storage-panel' // eslint-disable-line
+import ReturnValuesPanel from './dropdown-panel' // eslint-disable-line
+import FullStoragesChangesPanel from './full-storages-changes' // eslint-disable-line
 
 export const VmDebugger = ({ vmDebugger: { registerEvent } }) => {
   const [calldataPanel, setCalldataPanel] = useState(null)
@@ -51,14 +51,14 @@ export const VmDebugger = ({ vmDebugger: { registerEvent } }) => {
   }, [registerEvent])
 
   return (
-    <div id="vmdebugger" className="px-2">
+    <div id='vmdebugger' className="px-2">
       <div>
         <StackPanel calldata={stackPanel} />
         <MemoryPanel calldata={memoryPanel} />
         <StoragePanel calldata={storagePanel.calldata} header={storagePanel.header} />
         <CallstackPanel calldata={callStackPanel} />
         <CalldataPanel calldata={calldataPanel} />
-        <ReturnValuesPanel dropdownName="Return Value" calldata={returnValuesPanel || {}} />
+        <ReturnValuesPanel dropdownName='Return Value' calldata={returnValuesPanel || {}} />
         <FullStoragesChangesPanel calldata={fullStoragesChangesPanel} />
       </div>
     </div>

libs/remix-ui/debugger-ui/src/reducers/assembly-items.ts

@@ -1,4 +1,4 @@
-import { default as deepEqual } from 'deep-equal'
+import { default as deepEqual } from 'deep-equal' // eslint-disable-line
 
 interface Action {
     type: string;
@@ -6,18 +6,18 @@ interface Action {
 }
 
 export const initialState = {
-    opCodes: {
-      code: [],
-      index: 0,
-      address: ''
-    },
-    display: [],
+  opCodes: {
+    code: [],
     index: 0,
-    top: 0,
-    bottom: 0,
-    isRequesting: false,
-    isSuccessful: false,
-    hasError: null
+    address: ''
+  },
+  display: [],
+  index: 0,
+  top: 0,
+  bottom: 0,
+  isRequesting: false,
+  isSuccessful: false,
+  hasError: null
 }
 
 export const reducer = (state = initialState, action: Action) => {
@@ -28,7 +28,7 @@ export const reducer = (state = initialState, action: Action) => {
         isRequesting: true,
         isSuccessful: false,
         hasError: null
-      };
+      }
     }
     case 'FETCH_OPCODES_SUCCESS': {
       const opCodes = action.payload.address === state.opCodes.address ? {
@@ -36,28 +36,28 @@ export const reducer = (state = initialState, action: Action) => {
       } : deepEqual(action.payload.code, state.opCodes.code) ? state.opCodes : action.payload
       const top = opCodes.index - 3 > 0 ? opCodes.index - 3 : 0
       const bottom = opCodes.index + 4 < opCodes.code.length ? opCodes.index + 4 : opCodes.code.length
-      const display =  opCodes.code.slice(top, bottom)
+      const display = opCodes.code.slice(top, bottom)
 
       return {
-          opCodes,
-          display,
-          index: display.findIndex(code => code === opCodes.code[opCodes.index]),
-          top,
-          bottom,
-          isRequesting: false,
-          isSuccessful: true,
-          hasError: null
-      };
+        opCodes,
+        display,
+        index: display.findIndex(code => code === opCodes.code[opCodes.index]),
+        top,
+        bottom,
+        isRequesting: false,
+        isSuccessful: true,
+        hasError: null
+      }
     }
     case 'FETCH_OPCODES_ERROR': {
       return {
-          ...state,
-          isRequesting: false,
-          isSuccessful: false,
-          hasError: action.payload
-      };
+        ...state,
+        isRequesting: false,
+        isSuccessful: false,
+        hasError: action.payload
+      }
     }
     default:
-      throw new Error();
+      throw new Error()
   }
 }

libs/remix-ui/debugger-ui/src/reducers/calldata.ts

@@ -4,58 +4,58 @@ interface Action {
 }
 
 export const initialState = {
-    calldata: {},
-    isRequesting: false,
-    isSuccessful: false,
-    hasError: null
+  calldata: {},
+  isRequesting: false,
+  isSuccessful: false,
+  hasError: null
 }
 
 export const reducer = (state = initialState, action: Action) => {
   switch (action.type) {
     case 'FETCH_CALLDATA_REQUEST':
       return {
-          ...state,
-          isRequesting: true,
-          isSuccessful: false,
-          hasError: null
-      };
+        ...state,
+        isRequesting: true,
+        isSuccessful: false,
+        hasError: null
+      }
     case 'FETCH_CALLDATA_SUCCESS':
       return {
-          calldata: action.payload,
-          isRequesting: false,
-          isSuccessful: true,
-          hasError: null
-      };
+        calldata: action.payload,
+        isRequesting: false,
+        isSuccessful: true,
+        hasError: null
+      }
     case 'FETCH_CALLDATA_ERROR':
-        return {
-            ...state,
-            isRequesting: false,
-            isSuccessful: false,
-            hasError: action.payload
-        };
+      return {
+        ...state,
+        isRequesting: false,
+        isSuccessful: false,
+        hasError: action.payload
+      }
     case 'UPDATE_CALLDATA_REQUEST':
       return {
-          ...state,
-          isRequesting: true,
-          isSuccessful: false,
-          hasError: null
-      };
+        ...state,
+        isRequesting: true,
+        isSuccessful: false,
+        hasError: null
+      }
     case 'UPDATE_CALLDATA_SUCCESS':
       return {
-          calldata: mergeLocals(action.payload, state.calldata),
-          isRequesting: false,
-          isSuccessful: true,
-          hasError: null
-      };
+        calldata: mergeLocals(action.payload, state.calldata),
+        isRequesting: false,
+        isSuccessful: true,
+        hasError: null
+      }
     case 'UPDATE_CALLDATA_ERROR':
-        return {
-            ...state,
-            isRequesting: false,
-            isSuccessful: false,
-            hasError: action.payload
-        };
+      return {
+        ...state,
+        isRequesting: false,
+        isSuccessful: false,
+        hasError: action.payload
+      }
     default:
-      throw new Error();
+      throw new Error()
   }
 }
 

libs/remix-ui/debugger-ui/src/utils/solidityTypeFormatter.ts

@@ -1,44 +1,44 @@
 import { BN } from 'ethereumjs-util'
-import { ExtractData } from '../types'
+import { ExtractData } from '../types' // eslint-disable-line
 
 export function extractData (item, parent): ExtractData {
-    const ret: ExtractData = {}
+  const ret: ExtractData = {}
 
-    if (item.isProperty) {
-      return item
-    }
-    if (item.type.lastIndexOf(']') === item.type.length - 1) {
-      ret.children = (item.value || []).map(function (item, index) {
-        return {key: index, value: item}
-      })
-      ret.children.unshift({
-        key: 'length',
-        value: {
-          self: (new BN(item.length.replace('0x', ''), 16)).toString(10),
-          type: 'uint',
-          isProperty: true
-        }
-      })
-      ret.isArray = true
-      ret.self = parent.isArray ? '' : item.type
-      ret.cursor = item.cursor
-      ret.hasNext = item.hasNext
-    } else if (item.type.indexOf('struct') === 0) {
-      ret.children = Object.keys((item.value || {})).map(function (key) {
-        return {key: key, value: item.value[key]}
-      })
-      ret.self = item.type
-      ret.isStruct = true
-    } else if (item.type.indexOf('mapping') === 0) {
-      ret.children = Object.keys((item.value || {})).map(function (key) {
-        return {key: key, value: item.value[key]}
-      })
-      ret.isMapping = true
-      ret.self = item.type
-    } else {
-      ret.children = null
-      ret.self = item.value
-      ret.type = item.type
-    }
-    return ret
+  if (item.isProperty) {
+    return item
+  }
+  if (item.type.lastIndexOf(']') === item.type.length - 1) {
+    ret.children = (item.value || []).map(function (item, index) {
+      return { key: index, value: item }
+    })
+    ret.children.unshift({
+      key: 'length',
+      value: {
+        self: (new BN(item.length.replace('0x', ''), 16)).toString(10),
+        type: 'uint',
+        isProperty: true
+      }
+    })
+    ret.isArray = true
+    ret.self = parent.isArray ? '' : item.type
+    ret.cursor = item.cursor
+    ret.hasNext = item.hasNext
+  } else if (item.type.indexOf('struct') === 0) {
+    ret.children = Object.keys((item.value || {})).map(function (key) {
+      return { key: key, value: item.value[key] }
+    })
+    ret.self = item.type
+    ret.isStruct = true
+  } else if (item.type.indexOf('mapping') === 0) {
+    ret.children = Object.keys((item.value || {})).map(function (key) {
+      return { key: key, value: item.value[key] }
+    })
+    ret.isMapping = true
+    ret.self = item.type
+  } else {
+    ret.children = null
+    ret.self = item.value
+    ret.type = item.type
+  }
+  return ret
 }

libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.css

@@ -1,5 +1,5 @@
 .remixModalContent {
-  box-shadow: 0 0 8px 1000px rgba(0,0,0,0.6),0 6px 20px 0 rgba(0,0,0,0.19);
+  box-shadow: 0 0 8px 10000px rgba(0,0,0,0.6),0 6px 20px 0 rgba(0,0,0,0.19);
   -webkit-animation-name: animatetop;
   -webkit-animation-duration: 0.4s;
   animation-name: animatetop;

package.json

@@ -41,7 +41,7 @@
     "workspace-schematic": "nx workspace-schematic",
     "dep-graph": "nx dep-graph",
     "help": "nx help",
-    "lint:libs": "nx run-many --target=lint --projects=remixd,remix-ui-tree-view,remix-ui-modal-dialog,remix-ui-toaster,remix-ui-file-explorer",
+    "lint:libs": "nx run-many --target=lint --projects=remixd,remix-ui-tree-view,remix-ui-modal-dialog,remix-ui-toaster,remix-ui-file-explorer,remix-ui-debugger-ui",
     "build:libs": "nx run-many --target=build --parallel=false --with-deps=true --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd",
     "test:libs": "nx run-many --target=test --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd",
     "publish:libs": "npm run build:libs & lerna publish --skip-git & npm run bumpVersion:libs",