Merge pull request #749 from ethereum/caret

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>

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

 {
-  "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
+      "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

-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([])
@@ -9,7 +9,7 @@ export const useExtractData = (json, extractFunc?: ExtractFunc): Array<{ key: st
       if (extractFunc) {
         return {
           key: innerKey,
-                    data : extractFunc(json[innerKey], json) 
+          data: extractFunc(json[innerKey], json)
         }
       } else {
         return {
@@ -31,14 +31,14 @@ export const useExtractData = (json, extractFunc?: ExtractFunc): Array<{ key: st
 
     if (item instanceof Array) {
       ret.children = item.map((item, index) => {
-            return {key: index, value: item}
+        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]}
+        return { key: key, value: item[key] }
       })
       ret.self = 'Object'
       ret.isNode = true

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

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

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

-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,11 +183,11 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
     })
   }
 
-const debug = (txHash) => {
+  const debug = (txHash) => {
     startDebugging(null, txHash, null)
-}
+  }
 
-const stepManager = {
+  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,
@@ -199,12 +198,12 @@ const stepManager = {
     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.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} />
@@ -214,7 +213,7 @@ const vmDebugger = {
           <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 }}
+                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>

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

 
-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

-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({

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

-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

-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

-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'
 
@@ -8,7 +8,7 @@ export const AssemblyItems = ({ registerEvent }) => {
   const refs = useRef({})
   const asmItemsRef = useRef(null)
 
-    useEffect(()=>{
+  useEffect(() => {
     registerEvent && registerEvent('codeManagerChanged', (code, address, index) => {
       dispatch({ type: 'FETCH_OPCODES_SUCCESS', payload: { code, address, index } })
     })
@@ -48,7 +48,7 @@ export const AssemblyItems = ({ registerEvent }) => {
           <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>
+                return <div className="px-1" key={i} ref={ref => { refs.current[i] = ref }}><span>{item}</span></div>
               })
             }
           </div>

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

-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 (

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

-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 (

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

-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

-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'
 
@@ -13,14 +13,14 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
 
     if (item instanceof Array) {
       ret.children = item.map((item, index) => {
-            return {key: index, value: item}
+        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]}
+        return { key: key, value: item[key] }
       })
       ret.self = 'Object'
       ret.isNode = true
@@ -134,10 +134,10 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
   }
 
   const update = function (calldata) {
-        let isEmpty = !calldata ? true : false
+    let isEmpty = !calldata
 
-        if(calldata && Array.isArray(calldata) && calldata.length === 0) isEmpty = true
-        else if(calldata && Object.keys(calldata).length === 0 && calldata.constructor === Object) isEmpty = true
+    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 {
@@ -166,17 +166,17 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
       )
     })
 
-        if (children && children.length > 0 ) {
+    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)}>
+        <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]) }} /> }
+            {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)} />
+      return <TreeViewItem id={key.toString()} key={keyPath} label={formatSelfFunc ? formatSelfFunc(key, data) : formatSelfDefault(key, data)} onClick={() => handleExpand(keyPath)} expand={state.expandPath.includes(keyPath)} />
     }
   }
 
@@ -186,7 +186,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
     <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>
+        <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' }}>
@@ -201,8 +201,8 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
             </TreeView>
           }
         </div>
-                <div className='dropdownrawcontent' hidden={true}>{ state.copiableContent }</div>
-                <div className='message' style={{ display: state.message.display }}>{ state.message.innerText }</div>
+        <div className='dropdownrawcontent' hidden={true}>{state.copiableContent}</div>
+        <div className='message' style={{ display: state.message.display }}>{state.message.innerText}</div>
       </div>
     </div>
   )

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

-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 (

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

-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)
@@ -10,7 +10,7 @@ export const FunctionPanel = ({ data }) => {
   }, [data])
 
   return (
-        <div id="FunctionPanel">
+    <div id='FunctionPanel'>
       <DropdownPanel dropdownName='Function Stack' calldata={calldata || {}} />
     </div>
   )

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

-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 (

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

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

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

-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) => {

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

-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">
+    <div id='stackpanel'>
       <DropdownPanel dropdownName='Stack' calldata={calldata || {}} />
     </div>
   )

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

-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">
+    <div id='stepdetail' data-id='stepdetail'>
       <DropdownPanel dropdownName='Step details' calldata={stepDetail || {}} />
     </div>
   )

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

-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 (

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

-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

-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

-import { default as deepEqual } from 'deep-equal'
+import { default as deepEqual } from 'deep-equal' // eslint-disable-line
 
 interface Action {
     type: string;
@@ -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 ? {
@@ -47,7 +47,7 @@ export const reducer = (state = initialState, action: Action) => {
         isRequesting: false,
         isSuccessful: true,
         hasError: null
-      };
+      }
     }
     case 'FETCH_OPCODES_ERROR': {
       return {
@@ -55,9 +55,9 @@ export const reducer = (state = initialState, action: Action) => {
         isRequesting: false,
         isSuccessful: false,
         hasError: action.payload
-      };
+      }
     }
     default:
-      throw new Error();
+      throw new Error()
   }
 }

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

@@ -18,44 +18,44 @@ export const reducer = (state = initialState, action: Action) => {
         isRequesting: true,
         isSuccessful: false,
         hasError: null
-      };
+      }
     case 'FETCH_CALLDATA_SUCCESS':
       return {
         calldata: action.payload,
         isRequesting: false,
         isSuccessful: true,
         hasError: null
-      };
+      }
     case 'FETCH_CALLDATA_ERROR':
       return {
         ...state,
         isRequesting: false,
         isSuccessful: false,
         hasError: action.payload
-        };
+      }
     case 'UPDATE_CALLDATA_REQUEST':
       return {
         ...state,
         isRequesting: true,
         isSuccessful: false,
         hasError: null
-      };
+      }
     case 'UPDATE_CALLDATA_SUCCESS':
       return {
         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
-        };
+      }
     default:
-      throw new Error();
+      throw new Error()
   }
 }
 

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

 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 = {}
@@ -9,7 +9,7 @@ export function extractData (item, parent): ExtractData {
   }
   if (item.type.lastIndexOf(']') === item.type.length - 1) {
     ret.children = (item.value || []).map(function (item, index) {
-        return {key: index, value: item}
+      return { key: index, value: item }
     })
     ret.children.unshift({
       key: 'length',
@@ -25,13 +25,13 @@ export function extractData (item, parent): ExtractData {
     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]}
+      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]}
+      return { key: key, value: item.value[key] }
     })
     ret.isMapping = true
     ret.self = item.type

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",