Merge pull request #453 from ethereum/refactor-debugger

Debugger UI Refactor (React Library)

apps/remix-ide-e2e/src/tests/debugger.test.ts

@@ -42,6 +42,8 @@ module.exports = {
     .waitForElementVisible('*[data-id="slider"]')
     .click('*[data-id="slider"]')
     .setValue('*[data-id="slider"]', '50')
+    .pause(2000)
+    .click('*[data-id="dropdownPanelSolidityLocals"]')
     .assert.containsText('*[data-id="solidityLocals"]', 'no locals')
     .assert.containsText('*[data-id="stepdetail"]', 'vm trace step:\n92')
   },
@@ -150,12 +152,11 @@ module.exports = {
     .waitForElementVisible('*[data-id="slider"]')
     .click('*[data-id="slider"]')
     .setValue('*[data-id="slider"]', '5000')
-    .waitForElementPresent('*[data-id="treeViewTogglearray"]')
+    .waitForElementPresent('*[data-id="treeViewDivtreeViewItemarray"]')
-    .click('*[data-id="treeViewTogglearray"]')
+    .click('*[data-id="treeViewDivtreeViewItemarray"]')
-    .waitForElementPresent('*[data-id="treeViewLoadMore"]')
+    .waitForElementPresent('*[data-id="treeViewDivtreeViewLoadMore"]')
-    .click('*[data-id="treeViewLoadMore"]')
+    .assert.containsText('*[data-id="solidityLocals"]', '9: 9 uint256')
-    .assert.containsText('*[data-id="solidityLocals"]', '149: 0 uint256')
+    .notContainsText('*[data-id="solidityLocals"]', '10: 10 uint256')
-    .notContainsText('*[data-id="solidityLocals"]', '150: 0 uint256')    
   },
 
   'Should debug using generated sources': function (browser: NightwatchBrowser) {

apps/remix-ide-e2e/src/tests/terminal.test.ts

@@ -65,7 +65,6 @@ module.exports = {
   'Call web3.eth.getAccounts() using JavaScript VM': function (browser: NightwatchBrowser) {
     browser
     .executeScript(`web3.eth.getAccounts()`)
-    .pause(2000)
     .journalLastChildIncludes(`[ "0x5B38Da6a701c568545dCfcB03FcB875f56beddC4", "0xAb8483F64d9C6d1EcF9b849Ae677dD3315835cb2", "0x4B20993Bc481177ec7E8f571ceCaE8A9e22C02db", "0x78731D3Ca6b7E34aC0F824c42a7cC18A495cabaB", "0x617F2E2fD72FD9D5503197092aC168c91465E7f2", "0x17F6AD8Ef982297579C203069C1DbfFE4348c372", "0x5c6B0f7Bf3E7ce046039Bd8FABdfD3f9F5021678", "0x03C6FcED478cBbC9a4FAB34eF9f40767739D1Ff7", "0x1aE0EA34a72D944a8C7603FfB3eC30a6669E454C", "0x0A098Eda01Ce92ff4A4CCb7A4fFFb5A43EBC70DC", "0xCA35b7d915458EF540aDe6068dFe2F44E8fa733c", "0x14723A09ACff6D2A60DcdF7aA4AFf308FDDC160C", "0x4B0897b0513fdC7C541B6d9D7E929C4e5364D2dB", "0x583031D1113aD414F02576BD6afaBfb302140225", "0xdD870fA1b7C4700F2BD7f44238821C26f7392148" ]`)
     .end()
   },

apps/remix-ide/.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["@babel/preset-env"]
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
 }

apps/remix-ide/src/app/tabs/debugger-tab.js

@@ -1,10 +1,12 @@
 const yo = require('yo-yo')
-const remixDebug = require('@remix-project/remix-debug')
 const css = require('./styles/debugger-tab-styles')
 import toaster from '../ui/tooltip'
-const DebuggerUI = require('./debugger/debuggerUI')
+import { DebuggerUI } from '@remix-ui/debugger-ui'
+// const DebuggerUI = require('./debugger/debuggerUI')
 import { ViewPlugin } from '@remixproject/engine'
 import * as packageJson from '../../../../../package.json'
+import React from 'react'
+import ReactDOM from 'react-dom'
 
 const profile = {
   name: 'debugger',
@@ -25,6 +27,9 @@ class DebuggerTab extends ViewPlugin {
     super(profile)
     this.el = null
     this.blockchain = blockchain
+    this.debugHash = null
+    this.getTraceHash = null
+    this.removeHighlights = false
   }
 
   render () {
@@ -55,14 +60,7 @@ class DebuggerTab extends ViewPlugin {
       toaster(yo`<div><b>Source verification plugin not activated or not available.</b> continuing <i>without</i> source code debugging.</div>`)
     })
 
-    this.debuggerUI = new DebuggerUI(
+    this.renderComponent()
-      this,
-      this.el.querySelector('#debugger'),
-      (address, receipt) => {
-        const target = (address && remixDebug.traceHelper.isContractCreation(address)) ? receipt.contractAddress : address
-        return this.call('fetchAndCompile', 'resolve', target || receipt.contractAddress || receipt.to, '.debug', this.blockchain.web3())
-      }
-    )
 
     this.call('manager', 'activatePlugin', 'source-verification').catch(e => console.log(e.message))
     // this.call('manager', 'activatePlugin', 'udapp')
@@ -70,22 +68,31 @@ class DebuggerTab extends ViewPlugin {
     return this.el
   }
 
+  renderComponent () {
+    ReactDOM.render(
+      <DebuggerUI debuggerModule={this} />
+    , this.el)
+  }
+
   deactivate () {
-    this.debuggerUI.deleteHighlights()
+    this.removeHighlights = true
+    this.renderComponent()
     super.deactivate()
   }
 
   debug (hash) {
-    if (this.debuggerUI) this.debuggerUI.debug(hash)
+    this.debugHash = hash
+    this.renderComponent()
   }
 
   getTrace (hash) {
-    return this.debuggerUI.getTrace(hash)
+    this.getTraceHash = hash
+    this.renderComponent()
   }
 
-  debugger () {
+  // debugger () {
-    return this.debuggerUI
+  //   return this.debuggerUI
-  }
+  // }
 }
 
 module.exports = DebuggerTab

babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
+    "presets": ["@babel/preset-react", "@babel/preset-typescript"],
     "plugins": ["@babel/plugin-transform-modules-commonjs"]
 }

libs/remix-debug/src/debugger/stepManager.js

@@ -118,6 +118,7 @@ class DebuggerStepManager {
 
   stepOverForward (solidityMode) {
     if (!this.traceManager.isLoaded()) return
+    if (this.currentStepIndex >= this.traceLength - 1) return
     let step = this.currentStepIndex + 1
     let scope = this.debugger.callTree.findScope(step)
     if (scope && scope.firstStep === step) {

libs/remix-debug/src/solidity-decoder/types/ArrayType.js

@@ -83,13 +83,13 @@ class ArrayType extends RefType {
     if (isNaN(length)) {
       return {
         value: '<decoding failed - length is NaN>',
-        type: this.typeName
+        type: 'Error'
       }
     }
     if (!skip) skip = 0
     if (skip) offset = offset + (32 * skip)
     let limit = length - skip
-    if (limit > 100) limit = 100
+    if (limit > 10) limit = 10
     for (var k = 0; k < limit; k++) {
       var contentOffset = offset
       ret.push(this.underlyingType.decodeFromMemory(contentOffset, memory))

libs/remix-debug/src/source/sourceLocationTracker.js

@@ -69,7 +69,6 @@ SourceLocationTracker.prototype.getValidSourceLocationFromVMTraceIndex = async f
     map = await this.getSourceLocationFromVMTraceIndex(address, vmtraceStepIndex, contracts)
     vmtraceStepIndex = vmtraceStepIndex - 1    
   }
-  console.log(map, vmtraceStepIndex)
   return map
 }
 

libs/remix-ui/clipboard/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@nrwl/react/babel"],
+  "plugins": []
+}

libs/remix-ui/clipboard/.eslintrc

@@ -0,0 +1,248 @@
+{
+  "rules": {
+    "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
+  },
+  "settings": { "react": { "version": "detect" } },
+  "plugins": ["import", "jsx-a11y", "react", "react-hooks"],
+  "extends": ["../../../.eslintrc"],
+  "ignorePatterns": ["!**/*"]
+}

libs/remix-ui/clipboard/README.md

@@ -0,0 +1,7 @@
+# remix-ui-clipboard
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test remix-ui-clipboard` to execute the unit tests via [Jest](https://jestjs.io).

libs/remix-ui/clipboard/babel-jest.config.json

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ]
+}

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

@@ -0,0 +1,12 @@
+module.exports = {
+  name: 'remix-ui-clipboard',
+  preset: '../../../jest.config.js',
+  transform: {
+    '^.+\\.[tj]sx?$': [
+      'babel-jest',
+      { cwd: __dirname, configFile: './babel-jest.config.json' }
+    ]
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'],
+  coverageDirectory: '../../../coverage/libs/remix-ui/clipboard'
+};

libs/remix-ui/clipboard/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/copy-to-clipboard/copy-to-clipboard';

libs/remix-ui/clipboard/src/lib/copy-to-clipboard/copy-to-clipboard.css

@@ -0,0 +1,4 @@
+.copyIcon {
+    margin-left: 5px;
+    cursor: pointer;
+}

libs/remix-ui/clipboard/src/lib/copy-to-clipboard/copy-to-clipboard.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react'
+import copy from 'copy-text-to-clipboard'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
+
+import './copy-to-clipboard.css'
+
+export const CopyToClipboard = ({ content, tip='Copy', icon='fa-copy', ...otherProps }) => {
+  const [message, setMessage] = useState(tip)
+  const handleClick = () => {
+    if (content && content !== '') {   // module `copy` keeps last copied thing in the memory, so don't show tooltip if nothing is copied, because nothing was added to memory
+      try {
+        if (typeof content !== 'string') {
+          content = JSON.stringify(content, null, '\t')
+        }
+      } catch (e) {
+        console.error(e)
+      }
+      copy(content)
+      setMessage('Copied')
+    } else {
+      setMessage('Cannot copy empty content!')
+    }
+  }
+
+  const reset = () => {
+    setTimeout(() => setMessage('Copy'), 500)
+  }
+
+  return (
+    <a href="#" onClick={handleClick} onMouseLeave={reset}>
+      <OverlayTrigger placement="right" overlay={
+        <Tooltip id="overlay-tooltip">
+            { message }
+        </Tooltip>
+      }>
+        <i className={`far ${icon} ml-1 p-2`} aria-hidden="true"
+          {...otherProps}
+        ></i>
+      </OverlayTrigger>
+    </a>
+  )
+}
+
+export default CopyToClipboard

libs/remix-ui/clipboard/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

libs/remix-ui/clipboard/tsconfig.lib.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}

libs/remix-ui/clipboard/tsconfig.spec.json

@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/*.spec.js",
+    "**/*.spec.jsx",
+    "**/*.d.ts"
+  ]
+}

libs/remix-ui/debugger-ui/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@nrwl/react/babel"],
+  "plugins": []
+}

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

@@ -0,0 +1,250 @@
+{
+  "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
+  },
+  "settings": { "react": { "version": "detect" } },
+  "plugins": ["import", "jsx-a11y", "react", "react-hooks"],
+  "extends": ["../../../.eslintrc"],
+  "ignorePatterns": ["!**/*"]
+}

libs/remix-ui/debugger-ui/README.md

@@ -0,0 +1,7 @@
+# debugger-ui
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test debugger-ui` to execute the unit tests via [Jest](https://jestjs.io).

libs/remix-ui/debugger-ui/babel-jest.config.json

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ]
+}

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

@@ -0,0 +1,12 @@
+module.exports = {
+  name: 'debugger-ui',
+  preset: '../../jest.config.js',
+  transform: {
+    '^.+\\.[tj]sx?$': [
+      'babel-jest',
+      { cwd: __dirname, configFile: './babel-jest.config.json' }
+    ]
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'],
+  coverageDirectory: '../../coverage/libs/debugger-ui'
+};

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

@@ -0,0 +1,58 @@
+import React, { useState, useEffect } from 'react'
+import { ExtractData, ExtractFunc } from '../types'
+
+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)
+        }
+    }, [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
+}
+
+export default useExtractData

libs/remix-ui/debugger-ui/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/debugger-ui'

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

@@ -0,0 +1,22 @@
+.buttons {
+    display: flex;
+    flex-wrap: wrap;
+}
+.stepButtons {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+.stepButton {
+}
+.jumpButtons {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+.jumpButton {
+}
+.navigator {
+}
+.navigator:hover {
+}

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

@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from 'react'
+import './button-navigator.css'
+
+export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward, stepOverForward, jumpOut, jumpPreviousBreakpoint, jumpNextBreakpoint, jumpToException, revertedReason, stepState, jumpOutDisabled }) => {
+  const [state, setState] = useState({
+    intoBackDisabled: true,
+    overBackDisabled: true,
+    intoForwardDisabled: true,
+    overForwardDisabled: true,
+    jumpOutDisabled: true,
+    jumpNextBreakpointDisabled: true,
+    jumpPreviousBreakpointDisabled: true
+  })
+
+  useEffect(() => {
+    stepChanged(stepState, jumpOutDisabled)
+  }, [stepState, jumpOutDisabled])
+
+  const reset = () => {
+    setState(() => {
+      return {
+        intoBackDisabled: true,
+        overBackDisabled: true,
+        intoForwardDisabled: true,
+        overForwardDisabled: true,
+        jumpOutDisabled: true,
+        jumpNextBreakpointDisabled: true,
+        jumpPreviousBreakpointDisabled: true
+      }
+    })
+  }
+
+  const stepChanged = (stepState, jumpOutDisabled) => {
+    if (stepState === 'invalid') {
+      // TODO: probably not necessary, already implicit done in the next steps
+      reset()
+      return
+    }
+
+    setState(() => {
+      return {
+        intoBackDisabled: stepState === 'initial',
+        overBackDisabled: stepState === 'initial',
+        jumpPreviousBreakpointDisabled: stepState === 'initial',
+        intoForwardDisabled: stepState === 'end',
+        overForwardDisabled: stepState === 'end',
+        jumpNextBreakpointDisabled: stepState === 'end',
+        jumpOutDisabled: jumpOutDisabled ? jumpOutDisabled : true
+      }
+    })
+  }
+
+  return (
+    <div className="buttons">
+      <div className="stepButtons btn-group py-1">
+        <button id='overback' className='btn btn-primary btn-sm navigator stepButton fas fa-reply' title='Step over back' onClick={() => { stepOverBack && stepOverBack() }} disabled={state.overBackDisabled} ></button>
+        <button id='intoback' data-id="buttonNavigatorIntoBack" className='btn btn-primary btn-sm navigator stepButton fas fa-level-up-alt' title='Step back' onClick={() => { stepIntoBack && stepIntoBack() }} disabled={state.intoBackDisabled}></button>
+        <button id='intoforward' data-id="buttonNavigatorIntoForward" className='btn btn-primary btn-sm navigator stepButton fas fa-level-down-alt' title='Step into' onClick={() => { stepIntoForward && stepIntoForward() }} disabled={state.intoForwardDisabled}></button>
+        <button id='overforward' className='btn btn-primary btn-sm navigator stepButton fas fa-share' title='Step over forward' onClick={() => { stepOverForward && stepOverForward() }} disabled={state.overForwardDisabled}></button>
+      </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-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>
+      <div id='reverted' style={{ display: revertedReason === '' ? 'none' : 'block' }}>
+        <button id='jumptoexception' title='Jump to exception' className='btn btn-danger btn-sm navigator button fas fa-exclamation-triangle' onClick={() => { jumpToException && jumpToException() }} disabled={state.jumpOutDisabled}>
+        </button>
+        <span>State changes made during this call will be reverted.</span>
+        <span id='outofgas' style={{ display: revertedReason === 'outofgas' ? 'inline' : 'none' }}>This call will run out of gas.</span>
+        <span id='parenthasthrown' style={{ display: revertedReason === 'parenthasthrown' ? 'inline' : 'none' }}>The parent call will throw an exception</span>
+      </div>
+    </div>
+  )
+}
+
+export default ButtonNavigation

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

@@ -0,0 +1,16 @@
+.statusMessage {
+  margin-left: 15px;
+}
+.debuggerLabel {
+  margin-bottom: 2px;
+  font-size: 11px;
+  line-height: 12px;
+  text-transform: uppercase;
+}
+.debuggerConfig {
+  display: flex;
+  align-items: center;
+}
+.debuggerConfig label {
+  margin: 0;
+}

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

@@ -0,0 +1,284 @@
+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 remixDebug, { TransactionDebugger as Debugger } from '@remix-project/remix-debug'
+/* eslint-disable-next-line */
+import globalRegistry from '../../../../../apps/remix-ide/src/global/registry'
+import './debugger-ui.css'
+
+export const DebuggerUI = ({ debuggerModule }) => {
+  const init = remixDebug.init
+  const [state, setState] = useState({
+    isActive: false,
+    statusMessage: '',
+    debugger: null,
+    currentReceipt: {
+      contractAddress: null,
+      to: null
+    },
+    blockNumber: null,
+    txNumber: '',
+    debugging: false,
+    opt: {
+      debugWithGeneratedSources: false
+    }
+  })
+
+  useEffect(() => {
+    return unLoad()
+  }, [])
+
+  useEffect(() => {
+    debug(debuggerModule.debugHash)
+  }, [debuggerModule.debugHash])
+
+  useEffect(() => {
+    getTrace(debuggerModule.getTraceHash)
+  }, [debuggerModule.getTraceHash])
+
+  useEffect(() => {
+    if (debuggerModule.removeHighlights) deleteHighlights()
+  }, [debuggerModule.removeHighlights])
+
+  useEffect(() => {
+    const setEditor = () => {
+      const editor = globalRegistry.get('editor').api
+
+      editor.event.register('breakpointCleared', (fileName, row) => {
+        if (state.debugger) state.debugger.breakPointManager.remove({fileName: fileName, row: row})
+      })
+  
+      editor.event.register('breakpointAdded', (fileName, row) => {
+        if (state.debugger) {
+          state.debugger.breakPointManager.add({fileName: fileName, row: row})
+        }
+      })
+  
+      editor.event.register('contentChanged', () => {
+        unLoad()
+      })
+    }
+
+    setEditor()
+  }, [state.debugger])
+
+  const fetchContractAndCompile = (address, receipt) => {
+    const target = (address && remixDebug.traceHelper.isContractCreation(address)) ? receipt.contractAddress : address
+
+    return debuggerModule.call('fetchAndCompile', 'resolve', target || receipt.contractAddress || receipt.to, '.debug', debuggerModule.blockchain.web3())
+  }
+
+  const listenToEvents = (debuggerInstance, currentReceipt) => {
+    if (!debuggerInstance) return
+
+    debuggerInstance.event.register('debuggerStatus', async (isActive) => {
+      await debuggerModule.call('editor', 'discardHighlight')
+      setState( prevState => {
+        return { ...prevState, isActive }
+      })
+    })
+
+    debuggerInstance.event.register('newSourceLocation', async (lineColumnPos, rawLocation, generatedSources) => {
+      const contracts = await fetchContractAndCompile(
+        currentReceipt.contractAddress || currentReceipt.to,
+        currentReceipt)
+
+      if (contracts) {
+        let path = contracts.getSourceName(rawLocation.file)
+        if (!path) {
+          // check in generated sources
+          for (const source of generatedSources) {
+            if (source.id === rawLocation.file) {
+              path = `browser/.debugger/generated-sources/${source.name}`
+              let content
+              try {
+                content = await debuggerModule.call('fileManager', 'getFile', path, source.contents)
+              } catch (e) {
+                console.log('unable to fetch generated sources, the file probably doesn\'t exist yet', e)
+              }
+              if (content !== source.contents) {
+                await debuggerModule.call('fileManager', 'setFile', path, source.contents)
+              }
+              break
+            }
+          }
+        }
+        if (path) {
+          await debuggerModule.call('editor', 'discardHighlight')
+          await debuggerModule.call('editor', 'highlight', lineColumnPos, path)
+        }
+      }
+    })
+
+    debuggerInstance.event.register('debuggerUnloaded', () => unLoad())
+  }
+
+  const requestDebug = (blockNumber, txNumber, tx) => {
+    startDebugging(blockNumber, txNumber, tx)
+  }
+
+  const unloadRequested = (blockNumber, txIndex, tx) => {
+    unLoad()
+  }
+
+  const isDebuggerActive = () => {
+    return state.isActive
+  }
+
+  const getDebugWeb3 = (): Promise<any> => {
+    return new Promise((resolve, reject) => {
+      debuggerModule.blockchain.detectNetwork((error, network) => {
+        let web3
+        if (error || !network) {
+          web3 = init.web3DebugNode(debuggerModule.blockchain.web3())
+        } else {
+          const webDebugNode = init.web3DebugNode(network.name)
+          web3 = !webDebugNode ? debuggerModule.blockchain.web3() : webDebugNode
+        }
+        init.extendWeb3(web3)
+        resolve(web3)
+      })
+    })
+  }
+
+  const unLoad = () => {
+    if (state.debugger) state.debugger.unload()
+    setState(prevState => {
+      return {
+        ...prevState,
+        isActive: false,
+        statusMessage: '',
+        debugger: null,
+        currentReceipt: {
+          contractAddress: null,
+          to: null
+        },
+        blockNumber: null,
+        ready: {
+          vmDebugger: false,
+          vmDebuggerHead: false
+        },
+        debugging: false
+      }
+    })
+  }
+
+  const startDebugging = async (blockNumber, txNumber, tx) => {
+    if (state.debugger) unLoad()
+    if (!txNumber) return
+    const web3 = await getDebugWeb3()
+    const currentReceipt = await web3.eth.getTransactionReceipt(txNumber)
+    const debuggerInstance = new Debugger({
+      web3,
+      offsetToLineColumnConverter: globalRegistry.get('offsettolinecolumnconverter').api,
+      compilationResult: async (address) => {
+        try {
+          return await fetchContractAndCompile(address, currentReceipt)
+        } catch (e) {
+          console.error(e)
+        }
+        return null
+      },
+      debugWithGeneratedSources: state.opt.debugWithGeneratedSources
+    })
+    debuggerInstance.debug(blockNumber, txNumber, tx, () => {
+      listenToEvents(debuggerInstance, currentReceipt)
+      setState(prevState => {
+        return {
+          ...prevState,
+          blockNumber,
+          txNumber,
+          debugging: true,
+          currentReceipt,
+          debugger: debuggerInstance
+        }
+      })
+    }).catch((error) => {
+      // toaster(error, null, null)
+      unLoad()
+    })
+}
+
+const debug = (txHash) => {
+  startDebugging(null, txHash, null)
+}
+
+const getTrace = (hash) => {
+  if (!hash) return
+  return new Promise(async (resolve, reject) => { /* eslint-disable-line */
+    const web3 = await getDebugWeb3()
+    const currentReceipt = await web3.eth.getTransactionReceipt(hash)
+    const debug = new Debugger({
+      web3,
+      offsetToLineColumnConverter: globalRegistry.get('offsettolinecolumnconverter').api,
+      compilationResult: async (address) => {
+        try {
+          return await fetchContractAndCompile(address, currentReceipt)
+        } catch (e) {
+          console.error(e)
+        }
+        return null
+      },
+      debugWithGeneratedSources: false
+    })
+
+    setState(prevState => {
+      return { ...prevState, currentReceipt }
+    })
+
+    debug.debugger.traceManager.traceRetriever.getTrace(hash, (error, trace) => {
+      if (error) return reject(error)
+      resolve(trace)
+    })
+  })
+}
+
+const deleteHighlights = async () => {
+  await debuggerModule.call('editor', 'discardHighlight')
+}
+
+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>
+        <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">Debug generated sources if available (from Solidity v0.7.2)</label>
+            </div>
+          </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 } /> }
+      </div>
+  )
+}
+
+export default DebuggerUI

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

@@ -0,0 +1,42 @@
+import React, { useState, useEffect } from 'react'
+
+export const Slider = ({ jumpTo, sliderValue, traceLength }) => {
+  const [state, setState] = useState({
+    currentValue: 0
+  })
+
+  useEffect(() => {
+    setValue(sliderValue)
+  }, [sliderValue])
+
+  const setValue = (value) => {
+    if (value === state.currentValue) return
+    setState(prevState => {
+      return { ...prevState, currentValue: value }
+    })
+    jumpTo && jumpTo(value)
+  }
+
+  const handleChange = (e) => {
+    const value = parseInt(e.target.value)
+
+    setValue(value)
+  }
+
+  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}
+        />
+    </div>
+  )
+}
+
+export default Slider

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

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react'
+import Slider from '../slider/slider'
+import ButtonNavigator from '../button-navigator/button-navigator'
+
+export const StepManager = ({ stepManager: { jumpTo, traceLength, stepIntoBack, stepIntoForward, stepOverBack, stepOverForward, jumpOut, jumpNextBreakpoint, jumpPreviousBreakpoint, jumpToException, registerEvent } }) => {
+  const [state, setState] = useState({
+    sliderValue: 0,
+    revertWarning: '',
+    stepState: '',
+    jumpOutDisabled: true
+  })
+
+  useEffect(() => {
+    registerEvent && registerEvent('revertWarning', setRevertWarning)
+    registerEvent && registerEvent('stepChanged', updateStep)
+  }, [registerEvent])
+
+  const setRevertWarning = (warning) => {
+    setState(prevState => {
+      return { ...prevState, revertWarning: warning }
+    })
+  }
+
+  const updateStep = (step, stepState, jumpOutDisabled) => {
+    setState(prevState => {
+      return { ...prevState, sliderValue: step, stepState, jumpOutDisabled }
+    })
+  }
+  const { sliderValue, revertWarning, stepState, jumpOutDisabled } = state
+
+  return (
+    <div className="py-1">
+      <Slider jumpTo={jumpTo} sliderValue={sliderValue} traceLength={traceLength} />
+      <ButtonNavigator 
+        stepIntoBack={stepIntoBack}
+        stepIntoForward={stepIntoForward}
+        stepOverBack={stepOverBack}
+        stepOverForward={stepOverForward}
+        revertedReason={revertWarning}
+        stepState={stepState}
+        jumpOutDisabled={jumpOutDisabled}
+        jumpOut={jumpOut}
+        jumpNextBreakpoint={jumpNextBreakpoint}
+        jumpPreviousBreakpoint={jumpPreviousBreakpoint}
+        jumpToException={jumpToException}
+      />
+    </div>
+  )
+}
+
+export default StepManager

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

@@ -0,0 +1,24 @@
+.container {
+    display: flex;
+    flex-direction: column;
+}
+.txContainer {
+    display: flex;
+    flex-direction: column;
+}
+.txinput {
+    width: inherit;
+    font-size: small;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.txbutton {
+    width: inherit;
+}
+.txbutton:hover {
+}
+.vmargin {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}

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

@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from 'react'
+import './tx-browser.css'
+
+export const TxBrowser = ({ requestDebug, unloadRequested, transactionNumber, debugging }) => {
+  const [state, setState] = useState({
+    txNumber: ''
+  })
+
+  useEffect(() => {
+    setState(prevState => {
+      return {
+        ...prevState,
+        txNumber: transactionNumber
+      }
+    })
+  }, [transactionNumber])
+
+  const handleSubmit = () => {
+    if (debugging) {
+      unload()
+    } else {
+      requestDebug(undefined, state.txNumber)
+    }
+  }
+  
+  const unload = () => {
+    unloadRequested()
+  }
+
+  const txInputChanged = (value) => {
+    // todo check validation of txnumber in the input element, use
+    // required
+    // oninvalid="setCustomValidity('Please provide a valid transaction number, must start with 0x and have length of 22')"
+    // pattern="^0[x,X]+[0-9a-fA-F]{22}"
+    // this.state.txNumberInput.setCustomValidity('')
+  
+    setState(prevState => {
+      return {
+        ...prevState,
+        txNumber: value
+      }
+    })
+  }
+
+  return (
+    <div className="container px-0">
+      <div className="txContainer">
+        <div className="py-1 d-flex justify-content-center w-100 input-group">
+          <input
+            value={state.txNumber}
+            className="form-control m-0 txinput"
+            id='txinput'
+            type='text'
+            onChange={({ target: { value } }) => txInputChanged(value)}
+            placeholder={'Transaction hash, should start with 0x'}
+            data-id="debuggerTransactionInput"
+            disabled={debugging}
+          />
+        </div>
+        <div className="d-flex justify-content-center w-100 btn-group py-1">
+        <button
+          className="btn btn-primary btn-sm txbutton"
+          id="load"
+          title={debugging ? 'Stop debugging' : 'Start debugging'}
+          onClick={handleSubmit}
+          data-id="debuggerTransactionStartButton"
+          disabled={!state.txNumber ? true : false }
+        >
+          { debugging ? 'Stop' : 'Start' } debugging
+        </button>
+        </div>
+      </div>
+      <span id='error'></span>
+    </div>
+  )
+}
+
+export default TxBrowser

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

@@ -0,0 +1,61 @@
+import React, { useState, useRef, useEffect, useReducer } from 'react'
+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)
+        }
+    }
+
+    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

@@ -0,0 +1,12 @@
+import React from 'react'
+import DropdownPanel from './dropdown-panel'
+
+export const CalldataPanel = ({ calldata }) => {
+    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

@@ -0,0 +1,12 @@
+import React from 'react'
+import DropdownPanel from './dropdown-panel'
+
+export const CallstackPanel = ({ calldata }) => {
+    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

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react'
+import AssemblyItems from './assembly-items'
+
+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} />
+    </div>
+  )
+}
+
+export default CodeListView

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

@@ -0,0 +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 { 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 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 message = (message) => {
+        if (message === state.message.innerText) return
+        setState(prevState => {
+            return {
+                ...prevState,
+                message: {
+                    innerText: message,
+                    display: message ? 'block' : ''
+                },
+                updating: false
+            }
+        })
+    }
+
+    const setLoading = () => {
+        setState(prevState => {
+            return {
+                ...prevState,
+                message: {
+                    innerText: '',
+                    display: 'none'
+                },
+                dropdownContent: {
+                    ...prevState.dropdownContent,
+                    display: 'none'
+                },
+                copiableContent: '',
+                updating: 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
+            }
+        })
+    }
+
+    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)} />
+        }
+    }
+
+    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

@@ -0,0 +1,12 @@
+import React from 'react'
+import { DropdownPanel } from './dropdown-panel'
+
+export const FullStoragesChanges = ({ calldata }) => {
+    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

@@ -0,0 +1,19 @@
+import React, { useState, useEffect } from 'react'
+import DropdownPanel from './dropdown-panel'
+import { default as deepequal } from 'deep-equal'
+
+export const FunctionPanel = ({ data }) => {
+    const [calldata, setCalldata] = useState(null)
+
+    useEffect(() => {
+        if (!deepequal(calldata, data)) setCalldata(data)
+    }, [data])
+
+    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

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

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

@@ -0,0 +1,62 @@
+import React, { useState, useEffect } from 'react'
+import DropdownPanel from './dropdown-panel'
+import { extractData } from '../../utils/solidityTypeFormatter'
+import { ExtractData } from '../../types'
+
+export const SolidityLocals = ({ data, message, registerEvent, triggerEvent }) => {
+    const [calldata, setCalldata] = useState(null)
+
+    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>
+        )
+    }
+
+    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

@@ -0,0 +1,45 @@
+import React from 'react'
+import DropdownPanel from './dropdown-panel'
+import { extractData } from '../../utils/solidityTypeFormatter'
+import { ExtractData } from '../../types'
+
+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 ||
+            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)'
+        }
+        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>
+        )
+    }
+
+    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

@@ -0,0 +1,12 @@
+import React from 'react'
+import DropdownPanel from './dropdown-panel'
+
+export const StackPanel = ({ calldata }) => {
+    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

@@ -0,0 +1,12 @@
+import React from 'react'
+import DropdownPanel from './dropdown-panel'
+
+export const StepDetail = ({ stepDetail }) => {
+    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

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

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

@@ -0,0 +1,4 @@
+.instructions {
+    overflow-y: scroll;
+    max-height: 130px;
+}

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

@@ -0,0 +1,47 @@
+.title {
+    display: flex;
+    align-items: center;
+  }
+  .name {
+    font-weight: bold;
+  }
+  .nameDetail {
+    font-weight: bold;
+    margin-left: 3px;
+  }
+  .icon {
+    margin-right: 5%;
+  }
+  .eyeButton {
+    margin: 3px;
+  }
+  .dropdownpanel {
+    width: 100%;
+    word-break: break-word;
+  }
+  .dropdownrawcontent {
+    padding: 2px;
+    word-break: break-word;
+  }
+  .message {
+    padding: 2px;
+    word-break: break-word;
+  }
+  .refresh {
+    display: none;
+    margin-left: 4px;
+    margin-top: 4px; 
+    animation: spin 2s linear infinite;
+  }
+  .cursor_pointer {
+    cursor: pointer;
+  }
+  @-moz-keyframes spin {
+    to { -moz-transform: rotate(359deg); }
+  }
+  @-webkit-keyframes spin {
+    to { -webkit-transform: rotate(359deg); }
+  }
+  @keyframes spin {
+    to {transform:rotate(359deg);}
+  }

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

@@ -0,0 +1,114 @@
+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'
+
+export const VmDebuggerHead = ({ vmDebugger: { registerEvent, triggerEvent } }) => {
+  const [functionPanel, setFunctionPanel] = useState(null)
+  const [stepDetail, setStepDetail] = useState({
+    'vm trace step': '-',
+    'execution step': '-',
+    'add memory': '',
+    'gas': '',
+    'remaining gas': '-',
+    'loaded address': '-'
+  })
+  const [solidityState, setSolidityState] = useState({
+    calldata: null,
+    message: null,
+  })
+  const [solidityLocals, setSolidityLocals] = useState({
+    calldata: null,
+    message: null,
+  })
+
+  useEffect(() => {
+    registerEvent && registerEvent('functionsStackUpdate', (stack) => {
+      if (stack === null || stack.length === 0) return
+      const functions = []
+  
+      for (const func of stack) {
+        functions.push(func.functionDefinition.name + '(' + func.inputs.join(', ') + ')')
+      }
+      setFunctionPanel(() => functions)
+    })
+    registerEvent && registerEvent('traceUnloaded', () => {
+      setStepDetail(() => {
+        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': '-' }
+      })
+    })
+    registerEvent && registerEvent('traceCurrentStepUpdate', (error, step) => {
+      setStepDetail(prevState => {
+        return { ...prevState, 'execution step': (error ? '-' : step) }
+      })
+    })
+    registerEvent && registerEvent('traceMemExpandUpdate', (error, addmem) => {
+      setStepDetail(prevState => {
+        return { ...prevState, 'add memory': (error ? '-' : addmem) }
+      })
+    })
+    registerEvent && registerEvent('traceStepCostUpdate', (error, gas) => {
+      setStepDetail(prevState => {
+        return { ...prevState, 'gas': (error ? '-' : gas) }
+      })
+    })
+    registerEvent && registerEvent('traceCurrentCalledAddressAtUpdate', (error, address) => {
+      setStepDetail(prevState => {
+        return { ...prevState, 'loaded address': (error ? '-' : address) }
+      })
+    })
+    registerEvent && registerEvent('traceRemainingGasUpdate', (error, remainingGas) => {
+      setStepDetail(prevState => {
+        return { ...prevState, 'remaining gas': (error ? '-' : remainingGas) }
+      })
+    })
+    registerEvent && registerEvent('indexUpdate', (index) => {
+      setStepDetail(prevState => {
+        return { ...prevState, 'vm trace step': index }
+      })
+    })
+    registerEvent && registerEvent('solidityState', (calldata) => {
+      setSolidityState(() => {
+        return { ...solidityState, calldata }
+      })
+    })
+    registerEvent && registerEvent('solidityStateMessage', (message) => {
+      setSolidityState(() => {
+        return { ...solidityState, message }
+      })
+    })
+    registerEvent && registerEvent('solidityLocals', (calldata) => {
+      setSolidityLocals(() => {
+        return { ...solidityLocals, calldata }
+      })
+    })
+    registerEvent && registerEvent('solidityLocalsMessage', (message) => {
+      setSolidityLocals(() => {
+        return { ...solidityLocals, message }
+      })
+    })
+  }, [registerEvent])
+
+  return (
+    <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>
+    </div>
+  )
+}
+
+export default VmDebuggerHead

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

@@ -0,0 +1,68 @@
+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'
+
+export const VmDebugger = ({ vmDebugger: { registerEvent } }) => {
+  const [calldataPanel, setCalldataPanel] = useState(null)
+  const [memoryPanel, setMemoryPanel] = useState(null)
+  const [callStackPanel, setCallStackPanel] = useState(null)
+  const [stackPanel, setStackPanel] = useState(null)
+  const [storagePanel, setStoragePanel] = useState({
+    calldata: null,
+    header: null
+  })
+  const [returnValuesPanel, setReturnValuesPanel] = useState(null)
+  const [fullStoragesChangesPanel, setFullStoragesChangesPanel] = useState(null)
+
+  useEffect(() => {
+    registerEvent && registerEvent('traceManagerCallDataUpdate', (calldata) => {
+      setCalldataPanel(() => calldata)
+    })
+    registerEvent && registerEvent('traceManagerMemoryUpdate', (calldata) => {
+      setMemoryPanel(() => calldata)
+    })
+    registerEvent && registerEvent('traceManagerCallStackUpdate', (calldata) => {
+      setCallStackPanel(() => calldata)
+    })
+    registerEvent && registerEvent('traceManagerStackUpdate', (calldata) => {
+      setStackPanel(() => calldata)
+    })
+    registerEvent && registerEvent('traceManagerStorageUpdate', (calldata, header) => {
+      setStoragePanel(() => {
+        return { calldata, header }
+      })
+    })
+    registerEvent && registerEvent('traceReturnValueUpdate', (calldata) => {
+      setReturnValuesPanel(() => calldata)
+    })
+    registerEvent && registerEvent('traceAddressesUpdate', (calldata) => {
+      setFullStoragesChangesPanel(() => {
+        return {}
+      })
+    })
+    registerEvent && registerEvent('traceStorageUpdate', (calldata) => {
+      setFullStoragesChangesPanel(() => calldata)
+    })
+  }, [registerEvent])
+
+  return (
+    <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 || {}} />
+        <FullStoragesChangesPanel calldata={fullStoragesChangesPanel} />
+      </div>
+    </div>
+  )
+}
+
+export default VmDebugger

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

@@ -0,0 +1,63 @@
+import { default as deepEqual } from 'deep-equal'
+
+interface Action {
+    type: string;
+    payload: { [key: string]: any };
+}
+
+export const initialState = {
+    opCodes: {
+      code: [],
+      index: 0,
+      address: ''
+    },
+    display: [],
+    index: 0,
+    top: 0,
+    bottom: 0,
+    isRequesting: false,
+    isSuccessful: false,
+    hasError: null
+}
+
+export const reducer = (state = initialState, action: Action) => {
+  switch (action.type) {
+    case 'FETCH_OPCODES_REQUEST': {
+      return {
+        ...state,
+        isRequesting: true,
+        isSuccessful: false,
+        hasError: null
+      };
+    }
+    case 'FETCH_OPCODES_SUCCESS': {
+      const opCodes = action.payload.address === state.opCodes.address ? { 
+        ...state.opCodes, index: action.payload.index 
+      } : 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)
+
+      return {
+          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
+      };
+    }
+    default:
+      throw new Error();
+  }
+}

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

@@ -0,0 +1,72 @@
+interface Action {
+    type: string;
+    payload: { [key: string]: any };
+}
+
+export const initialState = {
+    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
+      };
+    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();
+  }
+}
+
+function mergeLocals (locals1, locals2) {
+  Object.keys(locals2).map(item => {
+    if (locals2[item].cursor && (parseInt(locals2[item].cursor) < parseInt(locals1[item].cursor))) {
+      locals2[item] = {
+        ...locals1[item],
+        value: [...locals2[item].value, ...locals1[item].value]
+      }
+    }
+  })
+  return locals2
+}

libs/remix-ui/debugger-ui/src/types/index.ts

@@ -0,0 +1,33 @@
+export interface ExtractData {
+    children?: Array<{key: number | string, value: ExtractData}>
+    self?: string | number,
+    isNode?: boolean,
+    isLeaf?: boolean,
+    isArray?: boolean,
+    isStruct?: boolean,
+    isMapping?: boolean,
+    type?: string,
+    isProperty?: boolean,
+    hasNext?: boolean,
+    cursor?: number
+}
+
+export type ExtractFunc = (json: any, parent?: any) => ExtractData
+
+export interface DropdownPanelProps {
+    dropdownName: string,
+    dropdownMessage?: string,
+    calldata?: {
+        [key: string]: string
+    },
+    header?: string,
+    loading?: boolean,
+    extractFunc?: ExtractFunc,
+    formatSelfFunc?: FormatSelfFunc,
+    registerEvent?: Function,
+    triggerEvent?: Function,
+    loadMoreEvent?: string,
+    loadMoreCompletedEvent?: string
+}
+
+export type FormatSelfFunc = (key: string | number, data: ExtractData) => JSX.Element

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

@@ -0,0 +1,44 @@
+import { BN } from 'ethereumjs-util'
+import { ExtractData } from '../types'
+
+export function extractData (item, parent): 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
+}

libs/remix-ui/debugger-ui/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

libs/remix-ui/debugger-ui/tsconfig.lib.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}

libs/remix-ui/debugger-ui/tsconfig.spec.json

@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/*.spec.js",
+    "**/*.spec.jsx",
+    "**/*.d.ts"
+  ]
+}

libs/remix-ui/tree-view/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@nrwl/react/babel"],
+  "plugins": []
+}

libs/remix-ui/tree-view/.eslintrc

@@ -0,0 +1,248 @@
+{
+  "rules": {
+    "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
+  },
+  "settings": { "react": { "version": "detect" } },
+  "plugins": ["import", "jsx-a11y", "react", "react-hooks"],
+  "extends": ["../../../.eslintrc"],
+  "ignorePatterns": ["!**/*"]
+}

libs/remix-ui/tree-view/README.md

@@ -0,0 +1,7 @@
+# remix-ui-tree-view
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test remix-ui-tree-view` to execute the unit tests via [Jest](https://jestjs.io).

libs/remix-ui/tree-view/babel-jest.config.json

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ]
+}

libs/remix-ui/tree-view/jest.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  name: 'remix-ui-tree-view',
+  preset: '../../../jest.config.js',
+  transform: {
+    '^.+\\.[tj]sx?$': [
+      'babel-jest',
+      { cwd: __dirname, configFile: './babel-jest.config.json' }
+    ]
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'],
+  coverageDirectory: '../../../coverage/libs/remix-ui/tree-view'
+};

libs/remix-ui/tree-view/src/index.ts

@@ -0,0 +1,2 @@
+export * from './lib/tree-view-item/tree-view-item';
+export * from './lib/remix-ui-tree-view';

libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.css

@@ -0,0 +1,32 @@
+.li_tv {
+    list-style-type: none;
+    -webkit-margin-before: 0px;
+    -webkit-margin-after: 0px;
+    -webkit-margin-start: 0px;
+    -webkit-margin-end: 0px;
+    -webkit-padding-start: 0px;
+  }
+  .ul_tv {
+    list-style-type: none;
+    -webkit-margin-before: 0px;
+    -webkit-margin-after: 0px;
+    -webkit-margin-start: 0px;
+    -webkit-margin-end: 0px;
+    -webkit-padding-start: 0px;
+  }
+  .caret_tv {
+    width: 10px;
+    flex-shrink: 0;
+    padding-right: 5px;
+  }
+  .label_item {
+    word-break: break-all;
+  }
+  .label_key {
+    min-width: 15%;
+    max-width: 80%;
+    word-break: break-word;
+  }
+  .label_value {
+    min-width: 10%;
+  }

libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { TreeViewProps } from '../types'
+
+import './remix-ui-tree-view.css'
+
+export const TreeView = (props: TreeViewProps) => {
+  const { children, id, ...otherProps } = props
+  
+  return (
+    <ul data-id={`treeViewUl${id}`} className="ul_tv ml-0 px-2" { ...otherProps }>
+      { children }
+    </ul>
+  )
+}
+
+export default TreeView

libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx

@@ -0,0 +1,27 @@
+import React, { useState, useEffect } from 'react'
+import { TreeViewItemProps } from '../../types'
+
+import './tree-view-item.css'
+
+export const TreeViewItem = (props: TreeViewItemProps) => {
+  const { id, children, label, expand, ...otherProps } = props
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  useEffect(() => {
+    setIsExpanded(expand)
+  }, [expand])
+
+  return (
+    <li key={`treeViewLi${id}`} data-id={`treeViewLi${id}`} className='li_tv' {...otherProps}>
+      <div key={`treeViewDiv${id}`} data-id={`treeViewDiv${id}`} className='d-flex flex-row align-items-center' onClick={() => setIsExpanded(!isExpanded)}>
+        <div className={isExpanded ? 'px-1 fas fa-caret-down caret caret_tv' : 'px-1 fas fa-caret-right caret caret_tv'}  style={{ visibility: children ? 'visible' : 'hidden' }}></div>
+        <span className='w-100 pl-1'>
+          { label }
+        </span>
+      </div>
+    { isExpanded ? children : null }
+    </li>
+  )
+}
+
+export default TreeViewItem

libs/remix-ui/tree-view/src/types/index.ts

@@ -0,0 +1,13 @@
+export interface TreeViewProps {
+    children?: React.ReactNode,
+    id: string
+}
+
+export interface TreeViewItemProps {
+    children?: React.ReactNode,
+    id: string,
+    label: string | number | React.ReactNode,
+    expand?: boolean,
+    onClick?: VoidFunction,
+    className?: string
+}

libs/remix-ui/tree-view/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

libs/remix-ui/tree-view/tsconfig.lib.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}

libs/remix-ui/tree-view/tsconfig.spec.json

@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/*.spec.js",
+    "**/*.spec.jsx",
+    "**/*.d.ts"
+  ]
+}

libs/remix-ui/utils/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@nrwl/react/babel"],
+  "plugins": []
+}

libs/remix-ui/utils/.eslintrc

@@ -0,0 +1,248 @@
+{
+  "rules": {
+    "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
+  },
+  "settings": { "react": { "version": "detect" } },
+  "plugins": ["import", "jsx-a11y", "react", "react-hooks"],
+  "extends": ["../../../.eslintrc"],
+  "ignorePatterns": ["!**/*"]
+}

libs/remix-ui/utils/README.md

@@ -0,0 +1,7 @@
+# remix-ui-utils
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test remix-ui-utils` to execute the unit tests via [Jest](https://jestjs.io).

libs/remix-ui/utils/babel-jest.config.json

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ]
+}

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

@@ -0,0 +1,12 @@
+module.exports = {
+  name: 'remix-ui-utils',
+  preset: '../../../jest.config.js',
+  transform: {
+    '^.+\\.[tj]sx?$': [
+      'babel-jest',
+      { cwd: __dirname, configFile: './babel-jest.config.json' }
+    ]
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'],
+  coverageDirectory: '../../../coverage/libs/remix-ui/utils'
+};

libs/remix-ui/utils/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/should-render'

libs/remix-ui/utils/src/lib/should-render.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+/* eslint-disable-next-line */
+export interface ShouldRenderProps {
+  children?: React.ReactNode,
+  if: boolean
+}
+
+export const ShouldRender = (props: ShouldRenderProps) => {
+  return props.if ? (
+    props.children
+  ) : null
+}
+
+export default ShouldRender

libs/remix-ui/utils/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

libs/remix-ui/utils/tsconfig.lib.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}

libs/remix-ui/utils/tsconfig.spec.json

@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/*.spec.js",
+    "**/*.spec.jsx",
+    "**/*.d.ts"
+  ]
+}

nx.json

@@ -66,6 +66,18 @@
     },
     "remixd": {
       "tags": []
+    },
+    "remix-ui-tree-view": {
+      "tags": []
+    },
+    "remix-ui-debugger-ui": {
+      "tags": []
+    },
+    "remix-ui-utils": {
+      "tags": []
+    },
+    "remix-ui-clipboard": {
+      "tags": []
     }
   }
 }

package-lock.json

@@ -2232,7 +2232,6 @@
       "version": "7.10.5",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.5.tgz",
       "integrity": "sha512-otddXKhdNn7d0ptoFRHtMLa8LqDxLYwTjB4nYgM1yy5N6gU/MUf8zqyyLltCH3yAVitBzmwK4us+DD0l/MauAg==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
@@ -6875,6 +6874,11 @@
         "@types/node": ">= 8"
       }
     },
+    "@popperjs/core": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.5.2.tgz",
+      "integrity": "sha512-tVkIU9JQw5fYPxLQgok/a7I6J1eEZ79svwQGpe2mb3jlVsPADOleefOnQBiS/takK7jQuNeswCUicMH1VWVziA=="
+    },
     "@remixproject/engine": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/@remixproject/engine/-/engine-0.2.4.tgz",
@@ -6975,6 +6979,20 @@
         }
       }
     },
+    "@restart/context": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
+      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
+    },
+    "@restart/hooks": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.25.tgz",
+      "integrity": "sha512-m2v3N5pxTsIiSH74/sb1yW8D9RxkJidGW+5Mfwn/lHb2QzhZNlaU1su7abSyT9EGf0xS/0waLjrf7/XxQHUk7w==",
+      "requires": {
+        "lodash": "^4.17.15",
+        "lodash-es": "^4.17.15"
+      }
+    },
     "@rollup/plugin-babel": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.0.2.tgz",
@@ -7291,6 +7309,11 @@
       "integrity": "sha512-t7uW6eFafjO+qJ3BIV2gGUyZs27egcNRkUdalkud+Qa3+kg//f129iuOFivHDXQ+vnU3fDXuwgv0cqMCbcE8sw==",
       "dev": true
     },
+    "@types/classnames": {
+      "version": "2.2.10",
+      "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.10.tgz",
+      "integrity": "sha512-1UzDldn9GfYYEsWWnn/P4wkTlkZDH7lDb0wBMGbtIQc9zXEQq7FlKBdZUn6OBqD8sKZZ2RQO2mAjGpXiDGoRmQ=="
+    },
     "@types/color-name": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
@@ -7341,6 +7364,11 @@
       "integrity": "sha512-GRTZLeLJ8ia00ZH8mxMO8t0aC9M1N9bN461Z2eaRurJo6Fpa+utgCwLzI4jQHcrdzuzp5WPN9jRwpsCQ1VhJ5w==",
       "dev": true
     },
+    "@types/invariant": {
+      "version": "2.2.34",
+      "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.34.tgz",
+      "integrity": "sha512-lYUtmJ9BqUN688fGY1U1HZoWT1/Jrmgigx2loq4ZcJpICECm/Om3V314BxdzypO0u5PORKGMM6x0OXaljV1YFg=="
+    },
     "@types/istanbul-lib-coverage": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz",
@@ -7449,8 +7477,7 @@
     "@types/prop-types": {
       "version": "15.7.3",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
-      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
-      "dev": true
     },
     "@types/q": {
       "version": "1.5.4",
@@ -7462,7 +7489,6 @@
       "version": "16.9.17",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.17.tgz",
       "integrity": "sha512-UP27In4fp4sWF5JgyV6pwVPAQM83Fj76JOcg02X5BZcpSu5Wx+fP9RMqc2v0ssBoQIFvD5JdKY41gjJJKmw6Bg==",
-      "dev": true,
       "requires": {
         "@types/prop-types": "*",
         "csstype": "^2.2.0"
@@ -7498,6 +7524,14 @@
         "@types/react-router": "*"
       }
     },
+    "@types/react-transition-group": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz",
+      "integrity": "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/resolve": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
@@ -7561,6 +7595,11 @@
         }
       }
     },
+    "@types/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI="
+    },
     "@types/webpack-sources": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-0.1.8.tgz",
@@ -9078,6 +9117,79 @@
         "babel-types": "^6.24.1"
       }
     },
+    "babel-jest": {
+      "version": "25.1.0",
+      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-25.1.0.tgz",
+      "integrity": "sha512-tz0VxUhhOE2y+g8R2oFrO/2VtVjA1lkJeavlhExuRBg3LdNJY9gwQ+Vcvqt9+cqy71MCTJhewvTB7Qtnnr9SWg==",
+      "dev": true,
+      "requires": {
+        "@jest/transform": "^25.1.0",
+        "@jest/types": "^25.1.0",
+        "@types/babel__core": "^7.1.0",
+        "babel-plugin-istanbul": "^6.0.0",
+        "babel-preset-jest": "^25.1.0",
+        "chalk": "^3.0.0",
+        "slash": "^3.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "dev": true,
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "slash": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "babel-loader": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.1.0.tgz",
@@ -12061,6 +12173,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-css": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
@@ -13714,8 +13831,7 @@
     "csstype": {
       "version": "2.6.11",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.11.tgz",
-      "integrity": "sha512-l8YyEC9NBkSm783PFTvh0FmJy7s5pFKrDp49ZL7zBGX3fWkO+N4EEyan1qqp8cwPLDcD0OSdyY6hAMoxp34JFw==",
+      "integrity": "sha512-l8YyEC9NBkSm783PFTvh0FmJy7s5pFKrDp49ZL7zBGX3fWkO+N4EEyan1qqp8cwPLDcD0OSdyY6hAMoxp34JFw=="
-      "dev": true
     },
     "currently-unhandled": {
       "version": "0.4.1",
@@ -14640,6 +14756,22 @@
         }
       }
     },
+    "dom-helpers": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz",
+      "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.3.tgz",
+          "integrity": "sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag=="
+        }
+      }
+    },
     "dom-serialize": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/dom-serialize/-/dom-serialize-2.2.1.tgz",
@@ -20670,7 +20802,6 @@
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
       "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.0.0"
       }
@@ -24588,6 +24719,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
       "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ=="
     },
+    "lodash-es": {
+      "version": "4.17.15",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz",
+      "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ=="
+    },
     "lodash._arraycopy": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lodash._arraycopy/-/lodash._arraycopy-3.0.0.tgz",
@@ -24910,7 +25046,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
       "requires": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
@@ -32143,8 +32278,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
-      "dev": true
     },
     "object-copy": {
       "version": "0.1.0",
@@ -34990,13 +35124,21 @@
       "version": "15.7.2",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
       "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
         "react-is": "^16.8.1"
       }
     },
+    "prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "requires": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      }
+    },
     "proto-list": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@@ -35305,11 +35447,104 @@
       "integrity": "sha1-+p4xn/3u6zWycpbvDz03TawvUqc=",
       "dev": true
     },
+    "react": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz",
+      "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2"
+      }
+    },
+    "react-bootstrap": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.3.0.tgz",
+      "integrity": "sha512-GYj0c6FO9mx7DaO8Xyz2zs0IcQ6CGCtM3O6/feIoCaG4N8B0+l4eqL7stlMcLpqO4d8NG2PoMO/AbUOD+MO7mg==",
+      "requires": {
+        "@babel/runtime": "^7.4.2",
+        "@restart/context": "^2.1.4",
+        "@restart/hooks": "^0.3.21",
+        "@types/classnames": "^2.2.10",
+        "@types/invariant": "^2.2.33",
+        "@types/prop-types": "^15.7.3",
+        "@types/react": "^16.9.35",
+        "@types/react-transition-group": "^4.4.0",
+        "@types/warning": "^3.0.0",
+        "classnames": "^2.2.6",
+        "dom-helpers": "^5.1.2",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.7.2",
+        "prop-types-extra": "^1.1.0",
+        "react-overlays": "^4.1.0",
+        "react-transition-group": "^4.4.1",
+        "uncontrollable": "^7.0.0",
+        "warning": "^4.0.3"
+      },
+      "dependencies": {
+        "@types/react": {
+          "version": "16.9.49",
+          "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.49.tgz",
+          "integrity": "sha512-DtLFjSj0OYAdVLBbyjhuV9CdGVHCkHn2R+xr3XkBvK2rS1Y1tkc14XSGjYgm5Fjjr90AxH9tiSzc1pCFMGO06g==",
+          "requires": {
+            "@types/prop-types": "*",
+            "csstype": "^3.0.2"
+          }
+        },
+        "csstype": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.3.tgz",
+          "integrity": "sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag=="
+        }
+      }
+    },
+    "react-dom": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",
+      "integrity": "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "scheduler": "^0.19.1"
+      }
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "react-overlays": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-4.1.0.tgz",
+      "integrity": "sha512-vdRpnKe0ckWOOD9uWdqykLUPHLPndIiUV7XfEKsi5008xiyHCfL8bxsx4LbMrfnxW1LzRthLyfy50XYRFNQqqw==",
+      "requires": {
+        "@babel/runtime": "^7.4.5",
+        "@popperjs/core": "^2.0.0",
+        "@restart/hooks": "^0.3.12",
+        "@types/warning": "^3.0.0",
+        "dom-helpers": "^5.1.0",
+        "prop-types": "^15.7.2",
+        "uncontrollable": "^7.0.0",
+        "warning": "^4.0.3"
+      }
+    },
+    "react-transition-group": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
+      "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
@@ -35601,8 +35836,7 @@
     "regenerator-runtime": {
       "version": "0.13.5",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
-      "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==",
+      "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA=="
-      "dev": true
     },
     "regenerator-transform": {
       "version": "0.14.5",
@@ -35735,251 +35969,6 @@
         }
       }
     },
-    "remixd": {
-      "version": "0.2.3-alpha.4",
-      "resolved": "https://registry.npmjs.org/remixd/-/remixd-0.2.3-alpha.4.tgz",
-      "integrity": "sha512-AmIHg3W7uu5K0BKeRUOaMRGzElomvZWbzYGtztFZhdcAJ4RGEpWnsZEJHNVeGhiZD5JDAvL4Sd3k9La/5qaPXQ==",
-      "dev": true,
-      "requires": {
-        "@remixproject/plugin": "^0.3.0-alpha.8",
-        "@remixproject/plugin-ws": "^0.3.0-alpha.4",
-        "chokidar": "^2.1.8",
-        "commander": "^2.20.3",
-        "fs-extra": "^3.0.1",
-        "isbinaryfile": "^3.0.2",
-        "ws": "^7.3.0"
-      },
-      "dependencies": {
-        "anymatch": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
-          "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
-          "dev": true,
-          "requires": {
-            "micromatch": "^3.1.4",
-            "normalize-path": "^2.1.1"
-          },
-          "dependencies": {
-            "normalize-path": {
-              "version": "2.1.1",
-              "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
-              "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
-              "dev": true,
-              "requires": {
-                "remove-trailing-separator": "^1.0.1"
-              }
-            }
-          }
-        },
-        "binary-extensions": {
-          "version": "1.13.1",
-          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
-          "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
-          "dev": true
-        },
-        "braces": {
-          "version": "2.3.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
-          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
-          "dev": true,
-          "requires": {
-            "arr-flatten": "^1.1.0",
-            "array-unique": "^0.3.2",
-            "extend-shallow": "^2.0.1",
-            "fill-range": "^4.0.0",
-            "isobject": "^3.0.1",
-            "repeat-element": "^1.1.2",
-            "snapdragon": "^0.8.1",
-            "snapdragon-node": "^2.0.1",
-            "split-string": "^3.0.2",
-            "to-regex": "^3.0.1"
-          }
-        },
-        "chokidar": {
-          "version": "2.1.8",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
-          "integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==",
-          "dev": true,
-          "requires": {
-            "anymatch": "^2.0.0",
-            "async-each": "^1.0.1",
-            "braces": "^2.3.2",
-            "fsevents": "^1.2.7",
-            "glob-parent": "^3.1.0",
-            "inherits": "^2.0.3",
-            "is-binary-path": "^1.0.0",
-            "is-glob": "^4.0.0",
-            "normalize-path": "^3.0.0",
-            "path-is-absolute": "^1.0.0",
-            "readdirp": "^2.2.1",
-            "upath": "^1.1.1"
-          }
-        },
-        "extend-shallow": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "dev": true,
-          "requires": {
-            "is-extendable": "^0.1.0"
-          }
-        },
-        "fill-range": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
-          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
-          "dev": true,
-          "requires": {
-            "extend-shallow": "^2.0.1",
-            "is-number": "^3.0.0",
-            "repeat-string": "^1.6.1",
-            "to-regex-range": "^2.1.0"
-          }
-        },
-        "fs-extra": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-3.0.1.tgz",
-          "integrity": "sha1-N5TzeMWLNC6n27sjCVEJxLO2IpE=",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "jsonfile": "^3.0.0",
-            "universalify": "^0.1.0"
-          }
-        },
-        "fsevents": {
-          "version": "1.2.13",
-          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
-          "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "bindings": "^1.5.0",
-            "nan": "^2.12.1"
-          }
-        },
-        "glob-parent": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
-          "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
-          "dev": true,
-          "requires": {
-            "is-glob": "^3.1.0",
-            "path-dirname": "^1.0.0"
-          },
-          "dependencies": {
-            "is-glob": {
-              "version": "3.1.0",
-              "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
-              "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
-              "dev": true,
-              "requires": {
-                "is-extglob": "^2.1.0"
-              }
-            }
-          }
-        },
-        "is-binary-path": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
-          "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=",
-          "dev": true,
-          "requires": {
-            "binary-extensions": "^1.0.0"
-          }
-        },
-        "is-number": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
-          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
-          "dev": true,
-          "requires": {
-            "kind-of": "^3.0.2"
-          }
-        },
-        "isarray": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-          "dev": true
-        },
-        "jsonfile": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-3.0.1.tgz",
-          "integrity": "sha1-pezG9l9T9mLEQVx2daAzHQmS7GY=",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.6"
-          }
-        },
-        "kind-of": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "dev": true,
-          "requires": {
-            "is-buffer": "^1.1.5"
-          }
-        },
-        "readable-stream": {
-          "version": "2.3.7",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
-          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
-          "dev": true,
-          "requires": {
-            "core-util-is": "~1.0.0",
-            "inherits": "~2.0.3",
-            "isarray": "~1.0.0",
-            "process-nextick-args": "~2.0.0",
-            "safe-buffer": "~5.1.1",
-            "string_decoder": "~1.1.1",
-            "util-deprecate": "~1.0.1"
-          }
-        },
-        "readdirp": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
-          "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.11",
-            "micromatch": "^3.1.10",
-            "readable-stream": "^2.0.2"
-          }
-        },
-        "safe-buffer": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-          "dev": true
-        },
-        "string_decoder": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-          "dev": true,
-          "requires": {
-            "safe-buffer": "~5.1.0"
-          }
-        },
-        "to-regex-range": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-          "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
-          "dev": true,
-          "requires": {
-            "is-number": "^3.0.0",
-            "repeat-string": "^1.6.1"
-          }
-        },
-        "ws": {
-          "version": "7.3.1",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-7.3.1.tgz",
-          "integrity": "sha512-D3RuNkynyHmEJIpD2qrgVkc9DQ23OrN/moAwZX4L8DfvszsJxpjQuUq3LMx6HoYji9fbIOBY18XWBsAux1ZZUA==",
-          "dev": true
-        }
-      }
-    },
     "remove-bom-buffer": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/remove-bom-buffer/-/remove-bom-buffer-3.0.0.tgz",
@@ -36865,6 +36854,15 @@
         "xmlchars": "^2.1.1"
       }
     },
+    "scheduler": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
+      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
     "schema-utils": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
@@ -40219,6 +40217,17 @@
       "integrity": "sha1-5z3T17DXxe2G+6xrCufYxqadUPo=",
       "dev": true
     },
+    "uncontrollable": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.1.1.tgz",
+      "integrity": "sha512-EcPYhot3uWTS3w00R32R2+vS8Vr53tttrvMj/yA1uYRhf8hbTG2GyugGqWDY0qIskxn0uTTojVd6wPYW9ZEf8Q==",
+      "requires": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": "^16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
     "undeclared-identifiers": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/undeclared-identifiers/-/undeclared-identifiers-1.1.3.tgz",
@@ -40977,6 +40986,14 @@
         "makeerror": "1.0.x"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchify": {
       "version": "3.11.1",
       "resolved": "https://registry.npmjs.org/watchify/-/watchify-3.11.1.tgz",

package.json

@@ -139,6 +139,9 @@
     "http-server": "^0.11.1",
     "merge": "^1.2.0",
     "npm-install-version": "^6.0.2",
+    "react": "16.13.1",
+    "react-bootstrap": "^1.3.0",
+    "react-dom": "16.13.1",
     "signale": "^1.4.0",
     "time-stamp": "^2.2.0",
     "winston": "^3.3.3",
@@ -271,6 +274,9 @@
     "eslint-plugin-promise": "4.2.1",
     "eslint-plugin-standard": "4.0.1",
     "nodemon": "^2.0.4",
-    "@types/jest": "25.1.4"
+    "@types/jest": "25.1.4",
+    "@babel/preset-typescript": "7.9.0",
+    "@babel/preset-react": "7.9.4",
+    "babel-jest": "25.1.0"
   }
 }

tsconfig.json

@@ -24,7 +24,12 @@
       "@remix-project/remix-solidity": ["dist/libs/remix-solidity/index.js"],
       "@remix-project/remix-tests": ["dist/libs/remix-tests/src/index.js"],
       "@remix-project/remix-url-resolver": ["dist/libs/remix-url-resolver/index.js"],
-      "@remix-project/remixd": ["dist/libs/remixd/index.js"]
+      "@remix-project/remixd": ["dist/libs/remixd/index.js"],
+      "@remix-project/debugger-ui": ["libs/debugger-ui/src/index.ts"],
+      "@remix-ui/tree-view": ["libs/remix-ui/tree-view/src/index.ts"],
+      "@remix-ui/debugger-ui": ["libs/remix-ui/debugger-ui/src/index.ts"],
+      "@remix-ui/utils": ["libs/remix-ui/utils/src/index.ts"],
+      "@remix-ui/clipboard": ["libs/remix-ui/clipboard/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]

workspace.json

@@ -509,6 +509,114 @@
           }
         }
       }
+    },
+    "remix-ui-tree-view": {
+      "root": "libs/remix-ui/tree-view",
+      "sourceRoot": "libs/remix-ui/tree-view/src",
+      "projectType": "library",
+      "schematics": {},
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:lint",
+          "options": {
+            "linter": "eslint",
+            "tsConfig": [
+              "libs/remix-ui/tree-view/tsconfig.lib.json",
+              "libs/remix-ui/tree-view/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/tree-view/**/*"]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "options": {
+            "jestConfig": "libs/remix-ui/tree-view/jest.config.js",
+            "tsConfig": "libs/remix-ui/tree-view/tsconfig.spec.json",
+            "passWithNoTests": true
+          }
+        }
+      }
+    },
+    "remix-ui-debugger-ui": {
+      "root": "libs/remix-ui/debugger-ui",
+      "sourceRoot": "libs/remix-ui/debugger-ui/src",
+      "projectType": "library",
+      "schematics": {},
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:lint",
+          "options": {
+            "linter": "eslint",
+            "tsConfig": [
+              "libs/remix-ui/debugger-ui/tsconfig.lib.json",
+              "libs/remix-ui/debugger-ui/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/debugger-ui/**/*"]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "options": {
+            "jestConfig": "libs/remix-ui/debugger-ui/jest.config.js",
+            "tsConfig": "libs/remix-ui/debugger-ui/tsconfig.spec.json",
+            "passWithNoTests": true
+          }
+        }
+      }
+    },
+    "remix-ui-utils": {
+      "root": "libs/remix-ui/utils",
+      "sourceRoot": "libs/remix-ui/utils/src",
+      "projectType": "library",
+      "schematics": {},
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:lint",
+          "options": {
+            "linter": "eslint",
+            "tsConfig": [
+              "libs/remix-ui/utils/tsconfig.lib.json",
+              "libs/remix-ui/utils/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/utils/**/*"]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "options": {
+            "jestConfig": "libs/remix-ui/utils/jest.config.js",
+            "tsConfig": "libs/remix-ui/utils/tsconfig.spec.json",
+            "passWithNoTests": true
+          }
+        }
+      }
+    },
+    "remix-ui-clipboard": {
+      "root": "libs/remix-ui/clipboard",
+      "sourceRoot": "libs/remix-ui/clipboard/src",
+      "projectType": "library",
+      "schematics": {},
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:lint",
+          "options": {
+            "linter": "eslint",
+            "tsConfig": [
+              "libs/remix-ui/clipboard/tsconfig.lib.json",
+              "libs/remix-ui/clipboard/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/clipboard/**/*"]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "options": {
+            "jestConfig": "libs/remix-ui/clipboard/jest.config.js",
+            "tsConfig": "libs/remix-ui/clipboard/tsconfig.spec.json",
+            "passWithNoTests": true
+          }
+        }
+      }
     }
   },
   "cli": {