From 056df63168cfcfa4a53c38fc9ec97b87bd9fb87c Mon Sep 17 00:00:00 2001
From: "davidzagi93@gmail.com" <davidzagi93@gmail.com>
Date: Mon, 22 Nov 2021 08:29:57 +0100
Subject: [PATCH 001/168] generating Abstract Panel

---
 .eslintrc.json                                |  35 +++
 .../src/app/components/main-panel.js          |  19 ++
 libs/remix-ui/abstract-panel/.babelrc         |  12 +
 libs/remix-ui/abstract-panel/.eslintrc.json   |  18 ++
 libs/remix-ui/abstract-panel/README.md        |   7 +
 libs/remix-ui/abstract-panel/package.json     |   4 +
 libs/remix-ui/abstract-panel/src/index.ts     |   1 +
 .../lib/remix-ui-abstract-panel.module.css    |   0
 .../src/lib/remix-ui-abstract-panel.tsx       |  14 ++
 libs/remix-ui/abstract-panel/tsconfig.json    |  20 ++
 .../remix-ui/abstract-panel/tsconfig.lib.json |  13 ++
 libs/remix-ui/main-panel/.babelrc             |  12 +
 libs/remix-ui/main-panel/.eslintrc.json       |  18 ++
 libs/remix-ui/main-panel/README.md            |   7 +
 libs/remix-ui/main-panel/package.json         |   4 +
 libs/remix-ui/main-panel/src/index.ts         |   1 +
 .../src/lib/remix-ui-main-panel.module.css    |   0
 .../src/lib/remix-ui-main-panel.tsx           |  19 ++
 libs/remix-ui/main-panel/tsconfig.json        |  20 ++
 libs/remix-ui/main-panel/tsconfig.lib.json    |  13 ++
 .../terminal/src/lib/remix-ui-terminal.tsx    |   8 +-
 nx.json                                       |  14 +-
 package.json                                  |   2 +
 tsconfig.base.json                            |   6 +-
 workspace.json                                | 208 +++++++++++-------
 25 files changed, 388 insertions(+), 87 deletions(-)
 create mode 100644 .eslintrc.json
 create mode 100644 libs/remix-ui/abstract-panel/.babelrc
 create mode 100644 libs/remix-ui/abstract-panel/.eslintrc.json
 create mode 100644 libs/remix-ui/abstract-panel/README.md
 create mode 100644 libs/remix-ui/abstract-panel/package.json
 create mode 100644 libs/remix-ui/abstract-panel/src/index.ts
 create mode 100644 libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css
 create mode 100644 libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx
 create mode 100644 libs/remix-ui/abstract-panel/tsconfig.json
 create mode 100644 libs/remix-ui/abstract-panel/tsconfig.lib.json
 create mode 100644 libs/remix-ui/main-panel/.babelrc
 create mode 100644 libs/remix-ui/main-panel/.eslintrc.json
 create mode 100644 libs/remix-ui/main-panel/README.md
 create mode 100644 libs/remix-ui/main-panel/package.json
 create mode 100644 libs/remix-ui/main-panel/src/index.ts
 create mode 100644 libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css
 create mode 100644 libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx
 create mode 100644 libs/remix-ui/main-panel/tsconfig.json
 create mode 100644 libs/remix-ui/main-panel/tsconfig.lib.json

diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000000..06cc47d9a2
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,35 @@
+{
+  "root": true,
+  "ignorePatterns": ["**/*"],
+  "plugins": ["@nrwl/nx"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@nrwl/nx/enforce-module-boundaries": [
+          "error",
+          {
+            "enforceBuildableLibDependency": true,
+            "allow": [],
+            "depConstraints": [
+              {
+                "sourceTag": "*",
+                "onlyDependOnLibsWithTags": ["*"]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["plugin:@nrwl/nx/typescript"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nrwl/nx/javascript"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/apps/remix-ide/src/app/components/main-panel.js b/apps/remix-ide/src/app/components/main-panel.js
index 66e6a50245..c976a8c159 100644
--- a/apps/remix-ide/src/app/components/main-panel.js
+++ b/apps/remix-ide/src/app/components/main-panel.js
@@ -1,3 +1,7 @@
+/* global Node, requestAnimationFrame */   // eslint-disable-line
+import React from 'react' // eslint-disable-line
+import ReactDOM from 'react-dom' // eslint-disable-line
+import { RemixUiMainPanel } from '@remix-ui/main-panel' // eslint-disable-line
 import { AbstractPanel } from './panel'
 import * as packageJson from '../../../../../package.json'
 const yo = require('yo-yo')
@@ -22,6 +26,7 @@ const profile = {
 export class MainPanel extends AbstractPanel {
   constructor () {
     super(profile)
+    this.element = document.createElement('div')
   }
 
   focus (name) {
@@ -29,10 +34,24 @@ export class MainPanel extends AbstractPanel {
     super.focus(name)
   }
 
+  // onActivation () {
+  //   this.renderComponent()
+  // }
+
   render () {
+    // return this.element
     return yo`
       <div class=${css.pluginsContainer} data-id="mainPanelPluginsContainer" id='mainPanelPluginsContainer-id'>
         ${this.view}
       </div>`
   }
+
+  // renderComponent () {
+  //   ReactDOM.render(
+  //     <RemixUiMainPanel
+  //       plugin={this}
+  //     />,
+  //     this.element
+  //   )
+  // }
 }
diff --git a/libs/remix-ui/abstract-panel/.babelrc b/libs/remix-ui/abstract-panel/.babelrc
new file mode 100644
index 0000000000..ccae900be4
--- /dev/null
+++ b/libs/remix-ui/abstract-panel/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/libs/remix-ui/abstract-panel/.eslintrc.json b/libs/remix-ui/abstract-panel/.eslintrc.json
new file mode 100644
index 0000000000..50e59482cf
--- /dev/null
+++ b/libs/remix-ui/abstract-panel/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/libs/remix-ui/abstract-panel/README.md b/libs/remix-ui/abstract-panel/README.md
new file mode 100644
index 0000000000..afe064e666
--- /dev/null
+++ b/libs/remix-ui/abstract-panel/README.md
@@ -0,0 +1,7 @@
+# remix-ui-abstract-panel
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test remix-ui-abstract-panel` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/remix-ui/abstract-panel/package.json b/libs/remix-ui/abstract-panel/package.json
new file mode 100644
index 0000000000..d2d23f51ff
--- /dev/null
+++ b/libs/remix-ui/abstract-panel/package.json
@@ -0,0 +1,4 @@
+{
+  "name": "@remix-ui/abstract-panel",
+  "version": "0.0.1"
+}
diff --git a/libs/remix-ui/abstract-panel/src/index.ts b/libs/remix-ui/abstract-panel/src/index.ts
new file mode 100644
index 0000000000..2cc84aaa4c
--- /dev/null
+++ b/libs/remix-ui/abstract-panel/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/remix-ui-abstract-panel';
diff --git a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css b/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx b/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx
new file mode 100644
index 0000000000..8d0a1f8347
--- /dev/null
+++ b/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx
@@ -0,0 +1,14 @@
+import './remix-ui-abstract-panel.module.css';
+
+/* eslint-disable-next-line */
+export interface RemixUiAbstractPanelProps {}
+
+export function RemixUiAbstractPanel(props: RemixUiAbstractPanelProps) {
+  return (
+    <div>
+      <h1>Welcome to remix-ui-abstract-panel!</h1>
+    </div>
+  );
+}
+
+export default RemixUiAbstractPanel;
diff --git a/libs/remix-ui/abstract-panel/tsconfig.json b/libs/remix-ui/abstract-panel/tsconfig.json
new file mode 100644
index 0000000000..8bd701c578
--- /dev/null
+++ b/libs/remix-ui/abstract-panel/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}
diff --git a/libs/remix-ui/abstract-panel/tsconfig.lib.json b/libs/remix-ui/abstract-panel/tsconfig.lib.json
new file mode 100644
index 0000000000..b560bc4dec
--- /dev/null
+++ b/libs/remix-ui/abstract-panel/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"]
+}
diff --git a/libs/remix-ui/main-panel/.babelrc b/libs/remix-ui/main-panel/.babelrc
new file mode 100644
index 0000000000..ccae900be4
--- /dev/null
+++ b/libs/remix-ui/main-panel/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/libs/remix-ui/main-panel/.eslintrc.json b/libs/remix-ui/main-panel/.eslintrc.json
new file mode 100644
index 0000000000..50e59482cf
--- /dev/null
+++ b/libs/remix-ui/main-panel/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/libs/remix-ui/main-panel/README.md b/libs/remix-ui/main-panel/README.md
new file mode 100644
index 0000000000..94b0df71d8
--- /dev/null
+++ b/libs/remix-ui/main-panel/README.md
@@ -0,0 +1,7 @@
+# remix-ui-main-panel
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test remix-ui-main-panel` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/remix-ui/main-panel/package.json b/libs/remix-ui/main-panel/package.json
new file mode 100644
index 0000000000..3abca6713c
--- /dev/null
+++ b/libs/remix-ui/main-panel/package.json
@@ -0,0 +1,4 @@
+{
+  "name": "@remix-ui/main-panel",
+  "version": "0.0.1"
+}
diff --git a/libs/remix-ui/main-panel/src/index.ts b/libs/remix-ui/main-panel/src/index.ts
new file mode 100644
index 0000000000..ef68ed6db3
--- /dev/null
+++ b/libs/remix-ui/main-panel/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/remix-ui-main-panel';
diff --git a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx
new file mode 100644
index 0000000000..bf6b8328e7
--- /dev/null
+++ b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx
@@ -0,0 +1,19 @@
+import React from 'react' // eslint-disable-line
+import './remix-ui-main-panel.module.css';
+
+/* eslint-disable-next-line */
+export interface RemixUiMainPanelProps {
+  plugin: any
+}
+
+export const RemixUiMainPanel = (props: RemixUiMainPanelProps) =>  {
+  return (
+    <div>
+      {console.log( props.plugin.view)}
+      <h1>Remix UI Main Panel</h1>
+      {/* { props.plugin.view }  */}
+    </div>
+  );
+}
+
+export default RemixUiMainPanel;
diff --git a/libs/remix-ui/main-panel/tsconfig.json b/libs/remix-ui/main-panel/tsconfig.json
new file mode 100644
index 0000000000..8bd701c578
--- /dev/null
+++ b/libs/remix-ui/main-panel/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}
diff --git a/libs/remix-ui/main-panel/tsconfig.lib.json b/libs/remix-ui/main-panel/tsconfig.lib.json
new file mode 100644
index 0000000000..b560bc4dec
--- /dev/null
+++ b/libs/remix-ui/main-panel/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"]
+}
diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
index 3c13ed625c..5dcd5872e4 100644
--- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
+++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
@@ -87,9 +87,15 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
     props.onReady({
       logHtml: (html) => {
         scriptRunnerDispatch({ type: 'html', payload: { message: [html.innerText] } })
+
+        setTimeout(() => {
+        }, 100)
       },
+
       log: (message) => {
-        scriptRunnerDispatch({ type: 'log', payload: { message: [message] } })
+        setTimeout(() => {
+          scriptRunnerDispatch({ type: 'log', payload: { message: [message] } })
+        }, 100)
       }
     })
   }, [])
diff --git a/nx.json b/nx.json
index fd90c35f84..6edf3bfc33 100644
--- a/nx.json
+++ b/nx.json
@@ -138,14 +138,12 @@
     },
     "remix-ui-tabs": {
       "tags": []
+    },
+    "remix-ui-main-panel": {
+      "tags": []
+    },
+    "remix-ui-abstract-panel": {
+      "tags": []
     }
-  },
-  "targetDependencies": {
-    "build": [
-      {
-        "target": "build",
-        "projects": "dependencies"
-      }
-    ]
   }
 }
diff --git a/package.json b/package.json
index eafe773515..eeee6affb2 100644
--- a/package.json
+++ b/package.json
@@ -161,6 +161,7 @@
     "chokidar": "^2.1.8",
     "color-support": "^1.1.3",
     "commander": "^2.20.3",
+    "core-js": "^3.6.5",
     "deep-equal": "^1.0.1",
     "document-register-element": "1.13.1",
     "ethereumjs-util": "^7.0.10",
@@ -186,6 +187,7 @@
     "react-bootstrap": "^1.6.4",
     "react-dom": "^17.0.2",
     "react-tabs": "^3.2.2",
+    "regenerator-runtime": "0.13.7",
     "selenium": "^2.20.0",
     "signale": "^1.4.0",
     "string-similarity": "^4.0.4",
diff --git a/tsconfig.base.json b/tsconfig.base.json
index c87af8611e..dd7f9d7c37 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -67,9 +67,9 @@
       "@remix-ui/editor": ["libs/remix-ui/editor/src/index.ts"],
       "@remix-ui/tabs": ["libs/remix-ui/tabs/src/index.ts"],
       "@remix-ui/helper": ["libs/remix-ui/helper/src/index.ts"],
-      "@remix-ui/vertical-icons-panel": [
-        "libs/remix-ui/vertical-icons-panel/src/index.ts"
-      ]
+      "@remix-ui/vertical-icons-panel": ["libs/remix-ui/vertical-icons-panel/src/index.ts"],
+      "@remix-ui/main-panel": ["libs/remix-ui/main-panel/src/index.ts"],
+      "@remix-ui/side-panel": ["libs/remix-ui/side-panel/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]
diff --git a/workspace.json b/workspace.json
index 5c51162cd7..a66ea5977e 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1,5 +1,71 @@
 {
   "version": 1,
+  "cli": {
+    "defaultCollection": "@nrwl/react"
+  },
+  "defaultProject": "remix-ide",
+  "schematics": {
+    "@nrwl/workspace": {
+      "library": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/cypress": {
+      "cypress-project": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/react": {
+      "application": {
+        "style": "css",
+        "linter": "eslint",
+        "babel": true
+      },
+      "component": {
+        "style": "css"
+      },
+      "library": {
+        "style": "css",
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/next": {
+      "application": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/web": {
+      "application": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/node": {
+      "application": {
+        "linter": "eslint"
+      },
+      "library": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/nx-plugin": {
+      "plugin": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/nest": {
+      "application": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/express": {
+      "application": {
+        "linter": "eslint"
+      },
+      "library": {
+        "linter": "eslint"
+      }
+    }
+  },
   "projects": {
     "remix-ide": {
       "root": "apps/remix-ide",
@@ -1068,87 +1134,79 @@
           }
         }
       }
-    }
-  },
-  "remix-ui-editor": {
-    "root": "libs/remix-ui/editor",
-    "sourceRoot": "libs/remix-ui/editor/src",
-    "projectType": "library",
-    "schematics": {},
-    "architect": {
-      "lint": {
-        "builder": "@nrwl/linter:lint",
-        "options": {
-          "linter": "eslint",
-          "babel": true
-        },
-        "component": {
-          "style": "css"
-        },
-        "library": {
-          "style": "css",
-          "linter": "eslint"
-        }
-      },
-      "library": {
-        "linter": "eslint"
-      }
     },
-    "@nrwl/nx-plugin": {
-      "plugin": {
-        "linter": "eslint"
-      }
-    },
-      "@nrwl/web": {
-        "application": {
-          "linter": "eslint"
-        }
-      },
-      "@nrwl/node": {
-        "application": {
-          "linter": "eslint"
+    "remix-ui-main-panel": {
+      "root": "libs/remix-ui/main-panel",
+      "sourceRoot": "libs/remix-ui/main-panel/src",
+      "projectType": "library",
+      "architect": {
+        "build": {
+          "builder": "@nrwl/web:package",
+          "outputs": ["{options.outputPath}"],
+          "options": {
+            "outputPath": "dist/libs/remix-ui/main-panel",
+            "tsConfig": "libs/remix-ui/main-panel/tsconfig.lib.json",
+            "project": "libs/remix-ui/main-panel/package.json",
+            "entryFile": "libs/remix-ui/main-panel/src/index.ts",
+            "external": ["react/jsx-runtime"],
+            "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
+            "assets": [
+              {
+                "glob": "libs/remix-ui/main-panel/README.md",
+                "input": ".",
+                "output": "."
+              }
+            ]
+          }
         },
-        "library": {
-          "linter": "eslint"
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": [
+              "libs/remix-ui/main-panel/**/*.{ts,tsx,js,jsx}"
+            ]
+          }
         }
       }
     },
-    "cli": {
-      "defaultCollection": "@nrwl/react"
-    },
-    "schematics": {
-      "@nrwl/workspace": {
-        "library": {
-          "linter": "eslint"
-        }
-      },
-      "@nrwl/cypress": {
-        "cypress-project": {
-          "linter": "eslint"
-        }
-      },
-      "@nrwl/react": {
-        "application": {
-          "style": "css",
-          "linter": "eslint",
-          "babel": true
-        },
-        "component": {
-          "style": "css"
+    "remix-ui-abstract-panel": {
+      "root": "libs/remix-ui/abstract-panel",
+      "sourceRoot": "libs/remix-ui/abstract-panel/src",
+      "projectType": "library",
+      "architect": {
+        "build": {
+          "builder": "@nrwl/web:package",
+          "outputs": ["{options.outputPath}"],
+          "options": {
+            "outputPath": "dist/libs/remix-ui/abstract-panel",
+            "tsConfig": "libs/remix-ui/abstract-panel/tsconfig.lib.json",
+            "project": "libs/remix-ui/abstract-panel/package.json",
+            "entryFile": "libs/remix-ui/abstract-panel/src/index.ts",
+            "external": ["react/jsx-runtime"],
+            "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
+            "assets": [
+              {
+                "glob": "libs/remix-ui/abstract-panel/README.md",
+                "input": ".",
+                "output": "."
+              }
+            ]
+          }
         },
-        "library": {
-          "style": "css",
-          "linter": "eslint"
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": [
+              "libs/remix-ui/abstract-panel/**/*.{ts,tsx,js,jsx}"
+            ]
+          }
         }
-      },
-      "library": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/nx-plugin": {
-      "plugin": {
-        "linter": "eslint"
       }
-    },
-    "defaultProject": "remix-ide"
+    }
+  },
+  "@nrwl/nx-plugin": {
+    "plugin": {
+      "linter": "eslint"
+    }
+  }
 }

From 4b3deb3f292af8fec34e0e16c6489caf42868082 Mon Sep 17 00:00:00 2001
From: "davidzagi93@gmail.com" <davidzagi93@gmail.com>
Date: Wed, 24 Nov 2021 06:18:51 +0100
Subject: [PATCH 002/168] update package-lock.json

---
 package-lock.json | 32 ++++++++++++++------------------
 1 file changed, 14 insertions(+), 18 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 78b44c9554..4994dbcf9a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1517,14 +1517,6 @@
       "requires": {
         "core-js": "^2.6.5",
         "regenerator-runtime": "^0.13.4"
-      },
-      "dependencies": {
-        "core-js": {
-          "version": "2.6.12",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
-          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
-          "dev": true
-        }
       }
     },
     "@babel/preset-env": {
@@ -12693,12 +12685,6 @@
         "regenerator-runtime": "^0.11.0"
       },
       "dependencies": {
-        "core-js": {
-          "version": "2.6.12",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
-          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
-          "dev": true
-        },
         "regenerator-runtime": {
           "version": "0.11.1",
           "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
@@ -35936,6 +35922,16 @@
         "es-abstract": "^1.19.1"
       }
     },
+    "object.hasown": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.0.tgz",
+      "integrity": "sha512-MhjYRfj3GBlhSkDHo6QmvgjRLXQ2zndabdf3nX0yTyZK9rPfxb6uRpAac8HXNLy1GpqWtZ81Qh4v3uOls2sRAg==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.1"
+      }
+    },
     "object.map": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/object.map/-/object.map-1.0.1.tgz",
@@ -38941,9 +38937,9 @@
       }
     },
     "regenerator-runtime": {
-      "version": "0.13.7",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
+      "version": "0.13.9",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
     },
     "regenerator-transform": {
       "version": "0.14.5",
@@ -46236,4 +46232,4 @@
       "dev": true
     }
   }
-}
+}
\ No newline at end of file

From 67f75fba555f16062fd59852ddfe756cde8d1710 Mon Sep 17 00:00:00 2001
From: "davidzagi93@gmail.com" <davidzagi93@gmail.com>
Date: Thu, 25 Nov 2021 18:52:45 +0100
Subject: [PATCH 003/168] working on mainPanel

---
 apps/remix-ide/src/app.js                     |   2 +-
 .../src/app/components/main-panel.js          |  59 ++++-----
 apps/remix-ide/src/app/components/panel.js    |  23 +++-
 .../lib/remix-ui-abstract-panel.module.css    |  20 ++++
 .../src/lib/remix-ui-abstract-panel.tsx       |   5 +-
 .../src/lib/remix-ui-main-panel.module.css    |  20 ++++
 .../src/lib/remix-ui-main-panel.tsx           | 113 +++++++++++++++++-
 7 files changed, 206 insertions(+), 36 deletions(-)

diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index 6c2f40fb25..29dc9f14f2 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -318,7 +318,7 @@ class App {
     ])
 
     // LAYOUT & SYSTEM VIEWS
-    const appPanel = new MainPanel()
+    const appPanel = new MainPanel(registry.get('config').api)
     const mainview = new MainView(contextualListener, editor, appPanel, fileManager, appManager, terminal)
     registry.put({ api: mainview, name: 'mainview' })
 
diff --git a/apps/remix-ide/src/app/components/main-panel.js b/apps/remix-ide/src/app/components/main-panel.js
index c976a8c159..ea0931dd9e 100644
--- a/apps/remix-ide/src/app/components/main-panel.js
+++ b/apps/remix-ide/src/app/components/main-panel.js
@@ -4,16 +4,16 @@ import ReactDOM from 'react-dom' // eslint-disable-line
 import { RemixUiMainPanel } from '@remix-ui/main-panel' // eslint-disable-line
 import { AbstractPanel } from './panel'
 import * as packageJson from '../../../../../package.json'
-const yo = require('yo-yo')
-const csjs = require('csjs-inject')
-
-const css = csjs`
-  .pluginsContainer {
-    height: 100%;
-    display: flex;
-    overflow-y: hidden;
-  }
-`
+// const yo = require('yo-yo')
+// const csjs = require('csjs-inject')
+
+// const css = csjs`
+//   .pluginsContainer {
+//     height: 100%;
+//     display: flex;
+//     overflow-y: hidden;
+//   }
+// `
 
 const profile = {
   name: 'mainPanel',
@@ -24,9 +24,10 @@ const profile = {
 }
 
 export class MainPanel extends AbstractPanel {
-  constructor () {
+  constructor (config) {
     super(profile)
     this.element = document.createElement('div')
+    this.config = config
   }
 
   focus (name) {
@@ -34,24 +35,28 @@ export class MainPanel extends AbstractPanel {
     super.focus(name)
   }
 
-  // onActivation () {
-  //   this.renderComponent()
-  // }
+  onActivation () {
+    this.renderComponent()
+  }
+
+  getTheme () {
+    return this.config.get('settings/theme')
+  }
 
   render () {
-    // return this.element
-    return yo`
-      <div class=${css.pluginsContainer} data-id="mainPanelPluginsContainer" id='mainPanelPluginsContainer-id'>
-        ${this.view}
-      </div>`
+    return this.element
+    // return yo`
+    //   <div class=${css.pluginsContainer} data-id="mainPanelPluginsContainer" id='mainPanelPluginsContainer-id'>
+    //     ${this.view}
+    //   </div>`
   }
 
-  // renderComponent () {
-  //   ReactDOM.render(
-  //     <RemixUiMainPanel
-  //       plugin={this}
-  //     />,
-  //     this.element
-  //   )
-  // }
+  renderComponent () {
+    ReactDOM.render(
+      <RemixUiMainPanel
+        plugin={this}
+      />,
+      this.element
+    )
+  }
 }
diff --git a/apps/remix-ide/src/app/components/panel.js b/apps/remix-ide/src/app/components/panel.js
index 08d9abf20f..a15fcccfe8 100644
--- a/apps/remix-ide/src/app/components/panel.js
+++ b/apps/remix-ide/src/app/components/panel.js
@@ -1,5 +1,9 @@
+import React from 'react' // eslint-disable-line
+import ReactDOM from 'react-dom'
+import { RemixUiAbstractPanel } from '@remix-ui/abstract-panel' // eslint-disable-line
 import { EventEmitter } from 'events'
-import { HostPlugin } from '@remixproject/engine-web'
+const EventManager = require('../../lib/events')
+import { HostPlugin } from '@remixproject/engine-web' // eslint-disable-line
 const csjs = require('csjs-inject')
 const yo = require('yo-yo')
 
@@ -31,13 +35,21 @@ export class AbstractPanel extends HostPlugin {
   constructor (profile) {
     super(profile)
     this.events = new EventEmitter()
+    this.event = new EventManager()
     this.contents = {}
     this.active = undefined
+    this.element = document.createElement('div')
+    this.element.setAttribute('id', 'plugins')
+    this.element.setAttribute('class', 'abstract-panel-plugins')
 
     // View where the plugin HTMLElement leaves
     this.view = yo`<div id="plugins" class="${css.plugins}"></div>`
   }
 
+  onActivation () {
+    this.renderComponent()
+  }
+
   /**
    * Add the plugin to the panel
    * @param {String} name the name of the plugin
@@ -108,4 +120,13 @@ export class AbstractPanel extends HostPlugin {
   focus (name) {
     this.showContent(name)
   }
+
+  renderComponent () {
+    ReactDOM.render(
+      <RemixUiAbstractPanel
+        plugin={this}
+      />,
+      this.element
+    )
+  }
 }
diff --git a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css b/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css
index e69de29bb2..8061ad4a25 100644
--- a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css
+++ b/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css
@@ -0,0 +1,20 @@
+.abstract-panel-plugins        {
+    height: 100%;
+  }
+  .abstract-panel-plugItIn       {
+    display        : none;
+    height         : 100%;
+  }
+  .abstract-panel-plugItIn > div {
+    overflow-y     : auto;
+    overflow-x     : hidden;
+    height         : 100%;
+    width          : 100%;
+  }
+  .abstract-panel-plugItIn.active     {
+    display        : block;
+  }
+  .abstract-panel-pluginsContainer {
+    height         : 100%;
+    overflow-y     : hidden;
+  }
\ No newline at end of file
diff --git a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx b/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx
index 8d0a1f8347..5920047ff8 100644
--- a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx
+++ b/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx
@@ -1,3 +1,4 @@
+import React from 'react' // eslint-disable-line
 import './remix-ui-abstract-panel.module.css';
 
 /* eslint-disable-next-line */
@@ -5,8 +6,8 @@ export interface RemixUiAbstractPanelProps {}
 
 export function RemixUiAbstractPanel(props: RemixUiAbstractPanelProps) {
   return (
-    <div>
-      <h1>Welcome to remix-ui-abstract-panel!</h1>
+    <div id="plugins" className="plugins">
+      
     </div>
   );
 }
diff --git a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css
index e69de29bb2..86ce5ed9db 100644
--- a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css
+++ b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css
@@ -0,0 +1,20 @@
+.plugins        {
+    height: 100%;
+  }
+  .plugItIn       {
+    display        : none;
+    height         : 100%;
+  }
+  .plugItIn > div {
+    overflow-y     : auto;
+    overflow-x     : hidden;
+    height         : 100%;
+    width          : 100%;
+  }
+  .plugItIn.active     {
+    display        : block;
+  }
+  .pluginsContainer {
+    height         : 100%;
+    overflow-y     : hidden;
+  }
\ No newline at end of file
diff --git a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx
index bf6b8328e7..efab1e75f6 100644
--- a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx
+++ b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx
@@ -1,4 +1,4 @@
-import React from 'react' // eslint-disable-line
+import React, { useEffect, useState } from 'react' // eslint-disable-line
 import './remix-ui-main-panel.module.css';
 
 /* eslint-disable-next-line */
@@ -7,12 +7,115 @@ export interface RemixUiMainPanelProps {
 }
 
 export const RemixUiMainPanel = (props: RemixUiMainPanelProps) =>  {
+   const darkTheme = ['Dark', 'Black', 'Cyborg']
+
+   const [invertNumber, setInvertNumber] = useState(0)
+   
+   const handlePluginCall = (pluginName: string) => {
+      props.plugin.call('menuicons', 'select', pluginName)
+      props.plugin.call(pluginName, pluginName, '')
+   }
+
+
+
   return (
-    <div>
-      {console.log( props.plugin.view)}
-      <h1>Remix UI Main Panel</h1>
-      {/* { props.plugin.view }  */}
+    <div className="plugItIn_2byTty" style={{ display: "block" }}>
+       {console.log({ props })}
+    <div data-id="landingPageHomeContainer" className="homeContainer d-flex" style={{ height: "100%", width: "100%", border: "0px", display: "block" }}>
+            <div className="mainContent_2A2Ew bg-light">
+          <div className="d-flex justify-content-between">
+             <div className="d-flex flex-column">
+                <div className="border-bottom d-flex justify-content-between clearfix py-3 mb-4">
+                   <div className="mx-4 w-100 d-flex">
+                      <img src="assets/img/guitarRemiCroped.webp" className="m-4 logoImg_2A2Ew" style={{ filter:  `invert(${invertNumber})`}}/>
+                      <audio id="remiAudio" src="assets/audio/remiGuitar-single-power-chord-A-minor.wav"></audio>
+                      <div className="w-80 pl-5 ml-5">
+                         <h5 className="mb-1">Quicklinks</h5>
+                         <a target="__blank" href="https://medium.com/remix-ide/migrating-files-to-workspaces-8e34737c751c?source=friends_link&amp;sk=b75cfd9093aa23c78be13cce49e4a5e8" className="text_2A2Ew mr-1">Guide</a>for migrating the old File System
+                         <p className="font-weight-bold mb-0 py-1">Migration tools:</p>
+                         <li className="pl-1">
+                            <span className="pl-0"><u className="text_2A2Ew pr-1">Basic migration</u></span>
+                         </li>
+                         <li className="pl-1"><u className="text_2A2Ew pr-1">Download all Files</u> as a backup zip</li>
+                         <li className="pl-1"><u className="text_2A2Ew pr-1">Restore files</u>from backup zip</li>
+                         <p className="font-weight-bold mb-0 mt-2">Help:</p>
+                         <div className="d-flex flex-column mt-1 pl-0"><a target="__blank" href="https://gitter.im/ethereum/remix" className="text_2A2Ew mx-1">Gitter channel</a> <a target="__blank" href="https://github.com/ethereum/remix-project/issues" className="text_2A2Ew mx-1">Report on Github</a></div>
+                      </div>
+                   </div>
+                </div>
+                <div data-id="landingPageHpSections" className="row hpSections_2A2Ew mx-4">
+                   <div className="ml-3">
+                      <div className="plugins mb-5">
+                         <h4>Featured Plugins</h4>
+                         <div className="d-flex flex-row pt-2">
+                           <button data-id="landingPageStartSolidity" className="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center envButton_2A2Ew" onClick = {() => handlePluginCall('solidity') }>
+                             <img src="assets/img/solidityLogo.webp" className="m-2 align-self-center envLogo_2A2Ew text-dark" alt='Solidity' style={{ filter: `invert(${invertNumber})` }}/>
+                             <label className="text-uppercase text-dark cursorStyle_2A2Ew">Solidity</label>
+                           </button>
+                           <button data-id="landingPageStartSolidity" className="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center envButton_2A2Ew" onClick={() => handlePluginCall('optimism-compiler') }> 
+                             <img id="optimismLogo" src="assets/img/optimismLogo.webp" className="m-2 align-self-center envLogo_2A2Ew" style={{ filter: `invert(${invertNumber})` }}/>
+                             <label className="text-uppercase text-dark cursorStyle_2A2Ew">Optimism</label>
+                           </button>
+                           <button data-id="landingPageStartSolidity" className="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center envButton_2A2Ew" onClick={() => handlePluginCall('LearnEth') }>
+                             <img id="learnEthLogo" src="assets/img/learnEthLogo.webp" className="m-2 align-self-center envLogo_2A2Ew" style={{ filter: `invert(${invertNumber})` }}/>
+                               <label className="text-uppercase text-dark cursorStyle_2A2Ew">LearnEth</label>
+                            </button>
+                            <button data-id="landingPageStartSolidity" className="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center envButton_2A2Ew" onClick={() => handlePluginCall('solhint') }>
+                              <img id="solhintLogo" src="assets/img/solhintLogo.png" className="m-2 align-self-center envLogo_2A2Ew" style={{ filter: `invert(${invertNumber})` }}/>
+                              <label className="text-uppercase text-dark cursorStyle_2A2Ew">Solhint linter</label>
+                            </button><button data-id="landingPageStartSolidity" className="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center envButton_2A2Ew" onClick={() => handlePluginCall('source-verification') }>
+                              <img id="sourcifyLogo" src="assets/img/sourcifyLogo.webp" className="m-2 align-self-center envLogo_2A2Ew" style={{ filter: `invert(${invertNumber})` }}/>
+                                <label className="text-uppercase text-dark cursorStyle_2A2Ew">Sourcify</label>
+                            </button> 
+                            <button data-id="landingPageStartSolidity" className="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center envButton_2A2Ew" onClick={() => handlePluginCall('pluginManager') }>
+                              <img id="moreLogo" src="assets/img/moreLogo.webp" className="m-2 align-self-center envLogo_2A2Ew" style={{ filter: `invert(${invertNumber})` }}/>
+                                <label className="text-uppercase text-dark cursorStyle_2A2Ew">More</label>
+                            </button>
+                          </div>
+                      </div>
+                      <div className="d-flex">
+                         <div className="file">
+                            <h4>File</h4>
+                            <p className="mb-1"><i className="mr-1 far fa-file"></i> <span className="ml-1 mb-1 text_2A2Ew">New File</span></p>
+                            <p className="mb-1"><i className="mr-1 far fa-file-alt"></i> <label className="ml-1 labelIt_2A2Ew bigLabelSize_2A2Ew text_2A2Ew">Open Files <input title="open file" type="file" multiple /></label></p>
+                            <p className="mb-1"><i className="far fa-hdd"></i> <span className="ml-1 text_2A2Ew">Connect to Localhost</span></p>
+                            <p className="mt-3 mb-0"><label>LOAD FROM:</label></p>
+                            <div className="btn-group"><button data-id="landingPageImportFromGistButton" className="btn mr-1 btn-secondary">Gist</button><button className="btn mx-1 btn-secondary">GitHub</button><button className="btn mx-1 btn-secondary">Ipfs</button><button className="btn mx-1 btn-secondary">https</button></div>
+                            {/* <!-- end of btn-group --> */}
+                         </div>
+                         {/* <!-- end of div.file --> */}
+                         <div className="ml-4 pl-4">
+                            <h4>Resources</h4>
+                            <p className="mb-1"><i className="mr-1 fas fa-book"></i> <a target="__blank" href="https://remix-ide.readthedocs.io/en/latest/#" className="text_2A2Ew">Documentation</a></p>
+                            <p className="mb-1"><i className="mr-1 fab fa-gitter"></i> <a target="__blank" href="https://gitter.im/ethereum/remix" className="text_2A2Ew">Gitter channel</a></p>
+                            <p className="mb-1"><img id="remixHhomeWebsite" src="assets/img/remixLogo.webp" className="mr-1 image_2A2Ew" style={{ filter: `invert(${invertNumber})` }}/><a target="__blank" href="https://remix-project.org" className="text_2A2Ew">Featuring website</a></p>
+                            <p className="mb-1"><i className="fab fa-ethereum image_2A2Ew"></i> <span className="text_2A2Ew">Old experience</span></p>
+                         </div>
+                      </div>
+                   </div>
+                </div>
+                {/* <!-- end of hpSections --> */}
+             </div>
+             <div className="d-flex flex-column rightPanel_2A2Ew">
+                <div id="remixIDEMediaPanelsTitle" className="d-flex pr-3 py-2 align-self-end"><button id="remixIDEHomeTwitterbtn" className="btn-info p-2 m-1 border rounded-circle mediaBadge_2A2Ew fab fa-twitter"></button><button id="remixIDEHomeMediumbtn" className="btn-danger p-2 m-1 border rounded-circle mediaBadge_2A2Ew fab fa-medium"></button></div>
+                <div id="remixIDEMediaPanels" className="mr-3 d-flex bg-light panels_2A2Ew">
+                   <div id="remixIDE_MediumBlock" className="p-2 mx-0 mb-0 d-none remixHomeMedia_2A2Ew" style={{ maxHeight: "514px" }}>
+                      <div id="medium-widget" className="p-3 media_2A2Ew">
+                         <div id="retainable-rss-embed" data-rss="https://medium.com/feed/remix-ide" data-maxcols="1" data-layout="grid" data-poststyle="external" data-readmore="More..." data-buttonclassName="btn mb-3" data-offset="-100"> -</div>
+                      </div>
+                   </div>
+                   <div id="remixIDE_TwitterBlock" className="p-2 mx-0 mb-0 d-none remixHomeMedia_2A2Ew" style={{ maxHeight: "514px" }}>
+                      <div className="px-2 media_2A2Ew">
+                         <a data-width="350" data-theme="dark" data-chrome="nofooter noheader transparent" data-tweet-limit="8" href="https://twitter.com/EthereumRemix" className="twitter-timeline"></a>
+                         {/* <script async="async" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> */}
+                      </div>
+                   </div>
+                </div>
+             </div>
+          </div>
+       </div>
     </div>
+ </div>
   );
 }
 

From 32aa5b7b0d4bb9fe65579dc7dc12911fc09d7885 Mon Sep 17 00:00:00 2001
From: "davidzagi93@gmail.com" <davidzagi93@gmail.com>
Date: Sat, 27 Nov 2021 09:57:35 +0100
Subject: [PATCH 004/168] resolved build error

---
 .../src/app/components/side-panel.js          |  1 +
 nx.json                                       |  8 +++
 workspace.json                                | 54 +++----------------
 3 files changed, 17 insertions(+), 46 deletions(-)

diff --git a/apps/remix-ide/src/app/components/side-panel.js b/apps/remix-ide/src/app/components/side-panel.js
index 0cc09d84d4..1ca84eec04 100644
--- a/apps/remix-ide/src/app/components/side-panel.js
+++ b/apps/remix-ide/src/app/components/side-panel.js
@@ -149,6 +149,7 @@ export class SidePanel extends AbstractPanel {
       <section class="${css.panel} plugin-manager">
         ${this.header}
         <div class="${css.pluginsContainer}">
+        
           ${this.view}
         </div>
       </section>`
diff --git a/nx.json b/nx.json
index 6edf3bfc33..1ea0794c32 100644
--- a/nx.json
+++ b/nx.json
@@ -145,5 +145,13 @@
     "remix-ui-abstract-panel": {
       "tags": []
     }
+  },
+  "targetDependencies": {
+    "build": [
+      {
+        "target": "build",
+        "projects": "dependencies"
+      }
+    ]
   }
 }
diff --git a/workspace.json b/workspace.json
index a66ea5977e..1005bd21d2 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1140,31 +1140,12 @@
       "sourceRoot": "libs/remix-ui/main-panel/src",
       "projectType": "library",
       "architect": {
-        "build": {
-          "builder": "@nrwl/web:package",
-          "outputs": ["{options.outputPath}"],
-          "options": {
-            "outputPath": "dist/libs/remix-ui/main-panel",
-            "tsConfig": "libs/remix-ui/main-panel/tsconfig.lib.json",
-            "project": "libs/remix-ui/main-panel/package.json",
-            "entryFile": "libs/remix-ui/main-panel/src/index.ts",
-            "external": ["react/jsx-runtime"],
-            "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
-            "assets": [
-              {
-                "glob": "libs/remix-ui/main-panel/README.md",
-                "input": ".",
-                "output": "."
-              }
-            ]
-          }
-        },
         "lint": {
-          "builder": "@nrwl/linter:eslint",
+          "builder": "@nrwl/linter:lint",
           "options": {
-            "lintFilePatterns": [
-              "libs/remix-ui/main-panel/**/*.{ts,tsx,js,jsx}"
-            ]
+            "linter": "eslint",
+            "tsConfig": ["libs/remix-ui/main-panel/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/main-panel/**/*"]
           }
         }
       }
@@ -1174,31 +1155,12 @@
       "sourceRoot": "libs/remix-ui/abstract-panel/src",
       "projectType": "library",
       "architect": {
-        "build": {
-          "builder": "@nrwl/web:package",
-          "outputs": ["{options.outputPath}"],
-          "options": {
-            "outputPath": "dist/libs/remix-ui/abstract-panel",
-            "tsConfig": "libs/remix-ui/abstract-panel/tsconfig.lib.json",
-            "project": "libs/remix-ui/abstract-panel/package.json",
-            "entryFile": "libs/remix-ui/abstract-panel/src/index.ts",
-            "external": ["react/jsx-runtime"],
-            "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
-            "assets": [
-              {
-                "glob": "libs/remix-ui/abstract-panel/README.md",
-                "input": ".",
-                "output": "."
-              }
-            ]
-          }
-        },
         "lint": {
-          "builder": "@nrwl/linter:eslint",
+          "builder": "@nrwl/linter:lint",
           "options": {
-            "lintFilePatterns": [
-              "libs/remix-ui/abstract-panel/**/*.{ts,tsx,js,jsx}"
-            ]
+            "linter": "eslint",
+            "tsConfig": ["libs/remix-ui/abstract-panel/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/abstract-panel/**/*"]
           }
         }
       }

From f411f100f58453b90257d74559d3a177d144a775 Mon Sep 17 00:00:00 2001
From: "davidzagi93@gmail.com" <davidzagi93@gmail.com>
Date: Sat, 27 Nov 2021 21:57:35 +0100
Subject: [PATCH 005/168] updated main panel

---
 .../remix-ide/src/app/components/main-panel.js | 18 ------------------
 .../remix-ide/src/app/components/side-panel.js |  1 -
 .../main-panel/src/lib/remix-ui-main-panel.tsx |  4 +---
 3 files changed, 1 insertion(+), 22 deletions(-)

diff --git a/apps/remix-ide/src/app/components/main-panel.js b/apps/remix-ide/src/app/components/main-panel.js
index ea0931dd9e..26a96710b9 100644
--- a/apps/remix-ide/src/app/components/main-panel.js
+++ b/apps/remix-ide/src/app/components/main-panel.js
@@ -4,16 +4,6 @@ import ReactDOM from 'react-dom' // eslint-disable-line
 import { RemixUiMainPanel } from '@remix-ui/main-panel' // eslint-disable-line
 import { AbstractPanel } from './panel'
 import * as packageJson from '../../../../../package.json'
-// const yo = require('yo-yo')
-// const csjs = require('csjs-inject')
-
-// const css = csjs`
-//   .pluginsContainer {
-//     height: 100%;
-//     display: flex;
-//     overflow-y: hidden;
-//   }
-// `
 
 const profile = {
   name: 'mainPanel',
@@ -39,16 +29,8 @@ export class MainPanel extends AbstractPanel {
     this.renderComponent()
   }
 
-  getTheme () {
-    return this.config.get('settings/theme')
-  }
-
   render () {
     return this.element
-    // return yo`
-    //   <div class=${css.pluginsContainer} data-id="mainPanelPluginsContainer" id='mainPanelPluginsContainer-id'>
-    //     ${this.view}
-    //   </div>`
   }
 
   renderComponent () {
diff --git a/apps/remix-ide/src/app/components/side-panel.js b/apps/remix-ide/src/app/components/side-panel.js
index 1ca84eec04..0cc09d84d4 100644
--- a/apps/remix-ide/src/app/components/side-panel.js
+++ b/apps/remix-ide/src/app/components/side-panel.js
@@ -149,7 +149,6 @@ export class SidePanel extends AbstractPanel {
       <section class="${css.panel} plugin-manager">
         ${this.header}
         <div class="${css.pluginsContainer}">
-        
           ${this.view}
         </div>
       </section>`
diff --git a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx
index efab1e75f6..2d2ce96bd8 100644
--- a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx
+++ b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx
@@ -7,7 +7,6 @@ export interface RemixUiMainPanelProps {
 }
 
 export const RemixUiMainPanel = (props: RemixUiMainPanelProps) =>  {
-   const darkTheme = ['Dark', 'Black', 'Cyborg']
 
    const [invertNumber, setInvertNumber] = useState(0)
    
@@ -19,8 +18,7 @@ export const RemixUiMainPanel = (props: RemixUiMainPanelProps) =>  {
 
 
   return (
-    <div className="plugItIn_2byTty" style={{ display: "block" }}>
-       {console.log({ props })}
+    <div className="plugItIn_2byTty" style={{ display: "block" }} data-id="mainPanelPluginsContainer" id='mainPanelPluginsContainer-id'>
     <div data-id="landingPageHomeContainer" className="homeContainer d-flex" style={{ height: "100%", width: "100%", border: "0px", display: "block" }}>
             <div className="mainContent_2A2Ew bg-light">
           <div className="d-flex justify-content-between">

From cd01fc23186597eeec17f636332fded82076e743 Mon Sep 17 00:00:00 2001
From: "davidzagi93@gmail.com" <davidzagi93@gmail.com>
Date: Tue, 30 Nov 2021 12:23:36 +0100
Subject: [PATCH 006/168] update to abstract panel

---
 .../abstract-panel/src/lib/remix-ui-abstract-panel.tsx    | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx b/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx
index 5920047ff8..dd1fbc52d5 100644
--- a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx
+++ b/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx
@@ -2,12 +2,16 @@ import React from 'react' // eslint-disable-line
 import './remix-ui-abstract-panel.module.css';
 
 /* eslint-disable-next-line */
-export interface RemixUiAbstractPanelProps {}
+export interface RemixUiAbstractPanelProps {
+  reactView: any
+  plugin: any
+}
 
 export function RemixUiAbstractPanel(props: RemixUiAbstractPanelProps) {
   return (
     <div id="plugins" className="plugins">
-      
+      {console.log({ view: props.plugin })}
+      good
     </div>
   );
 }

From d292e58f18261cc420a1e5503f53148127fed9bf Mon Sep 17 00:00:00 2001
From: "davidzagi93@gmail.com" <davidzagi93@gmail.com>
Date: Wed, 1 Dec 2021 15:23:57 +0100
Subject: [PATCH 007/168] refactoring abstract panel

---
 .../src/app/components/main-panel.js          |  6 +-
 apps/remix-ide/src/app/components/panel.js    | 70 +++----------------
 .../src/app/components/side-panel.js          |  2 +-
 .../src/lib/abstract-panel-hoc.tsx            | 16 +++++
 .../lib/remix-ui-abstract-panel.module.css    | 40 +++++------
 .../src/lib/remix-ui-abstract-panel.tsx       | 47 +++++++++++--
 .../src/lib/remix-ui-main-panel.module.css    |  8 ++-
 .../src/lib/remix-ui-main-panel.tsx           |  2 +-
 8 files changed, 100 insertions(+), 91 deletions(-)
 create mode 100644 libs/remix-ui/abstract-panel/src/lib/abstract-panel-hoc.tsx

diff --git a/apps/remix-ide/src/app/components/main-panel.js b/apps/remix-ide/src/app/components/main-panel.js
index 26a96710b9..707b36a776 100644
--- a/apps/remix-ide/src/app/components/main-panel.js
+++ b/apps/remix-ide/src/app/components/main-panel.js
@@ -16,13 +16,15 @@ const profile = {
 export class MainPanel extends AbstractPanel {
   constructor (config) {
     super(profile)
-    this.element = document.createElement('div')
+    this.mainelement = document.createElement('div')
+    this.element.setAttribute('class', 'mainPanelPluginsContainer')
     this.config = config
   }
 
   focus (name) {
     this.emit('focusChanged', name)
     super.focus(name)
+    this.renderComponent()
   }
 
   onActivation () {
@@ -38,7 +40,7 @@ export class MainPanel extends AbstractPanel {
       <RemixUiMainPanel
         plugin={this}
       />,
-      this.element
+      this.mainelement
     )
   }
 }
diff --git a/apps/remix-ide/src/app/components/panel.js b/apps/remix-ide/src/app/components/panel.js
index a15fcccfe8..93d9937338 100644
--- a/apps/remix-ide/src/app/components/panel.js
+++ b/apps/remix-ide/src/app/components/panel.js
@@ -4,31 +4,6 @@ import { RemixUiAbstractPanel } from '@remix-ui/abstract-panel' // eslint-disabl
 import { EventEmitter } from 'events'
 const EventManager = require('../../lib/events')
 import { HostPlugin } from '@remixproject/engine-web' // eslint-disable-line
-const csjs = require('csjs-inject')
-const yo = require('yo-yo')
-
-const css = csjs`
-  .plugins        {
-    height: 100%;
-  }
-  .plugItIn       {
-    display        : none;
-    height         : 100%;
-  }
-  .plugItIn > div {
-    overflow-y     : auto;
-    overflow-x     : hidden;
-    height         : 100%;
-    width          : 100%;
-  }
-  .plugItIn.active     {
-    display        : block;
-  }
-  .pluginsContainer {
-    height         : 100%;
-    overflow-y     : hidden;
-  }
-`
 
 /** Abstract class used for hosting the view of a plugin */
 export class AbstractPanel extends HostPlugin {
@@ -41,51 +16,21 @@ export class AbstractPanel extends HostPlugin {
     this.element = document.createElement('div')
     this.element.setAttribute('id', 'plugins')
     this.element.setAttribute('class', 'abstract-panel-plugins')
-
-    // View where the plugin HTMLElement leaves
-    this.view = yo`<div id="plugins" class="${css.plugins}"></div>`
   }
 
   onActivation () {
     this.renderComponent()
   }
 
-  /**
-   * Add the plugin to the panel
-   * @param {String} name the name of the plugin
-   * @param {HTMLElement} content the HTMLContent of the plugin
-   */
-  add (view, name) {
-    if (this.contents[name]) throw new Error(`Plugin ${name} already rendered`)
+  addView (profile, view) {
+    if (this.contents[profile.name]) throw new Error(`Plugin ${profile.name} already rendered`)
     view.style.height = '100%'
     view.style.width = '100%'
     view.style.border = '0'
-
-    const isIframe = view.tagName === 'IFRAME'
-    view.style.display = isIframe ? 'none' : 'block'
-    const loading = isIframe ? yo`
-      <div class="d-flex justify-content-center align-items-center">
-        <div class="spinner-border" role="status">
-          <span class="sr-only">Loading...</span>
-        </div>
-      </div>  
-    ` : ''
-    this.contents[name] = yo`<div class="${css.plugItIn}" >${view}${loading}</div>`
-
-    if (view.tagName === 'IFRAME') {
-      view.addEventListener('load', () => {
-        if (this.contents[name].contains(loading)) {
-          this.contents[name].removeChild(loading)
-        }
-        view.style.display = 'block'
-      })
-    }
-    this.contents[name].style.display = 'none'
-    this.view.appendChild(this.contents[name])
-  }
-
-  addView (profile, view) {
-    this.add(view, profile.name)
+    this.contents[profile.name] = view
+    this.showContent(profile.name)
+    this.element.appendChild(this.contents[profile.name])
+    this.renderComponent()
   }
 
   removeView (profile) {
@@ -101,6 +46,7 @@ export class AbstractPanel extends HostPlugin {
     delete this.contents[name]
     if (el) el.parentElement.removeChild(el)
     if (name === this.active) this.active = undefined
+    this.renderComponent()
   }
 
   /**
@@ -113,8 +59,10 @@ export class AbstractPanel extends HostPlugin {
     if (this.active) {
       this.contents[this.active].style.display = 'none'
     }
+
     this.contents[name].style.display = 'flex'
     this.active = name
+    this.renderComponent()
   }
 
   focus (name) {
diff --git a/apps/remix-ide/src/app/components/side-panel.js b/apps/remix-ide/src/app/components/side-panel.js
index 0cc09d84d4..4d681f04c0 100644
--- a/apps/remix-ide/src/app/components/side-panel.js
+++ b/apps/remix-ide/src/app/components/side-panel.js
@@ -149,7 +149,7 @@ export class SidePanel extends AbstractPanel {
       <section class="${css.panel} plugin-manager">
         ${this.header}
         <div class="${css.pluginsContainer}">
-          ${this.view}
+          ${this.element}
         </div>
       </section>`
   }
diff --git a/libs/remix-ui/abstract-panel/src/lib/abstract-panel-hoc.tsx b/libs/remix-ui/abstract-panel/src/lib/abstract-panel-hoc.tsx
new file mode 100644
index 0000000000..87fe6e225e
--- /dev/null
+++ b/libs/remix-ui/abstract-panel/src/lib/abstract-panel-hoc.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+
+function AbstractPanelHOC (WrappedComponent: any) {
+    return (WrappedComponent: any) => {
+        const WithAbstractPanel = (props: any) => {
+            return (
+                <WrappedComponent
+                    {...props}
+                />
+            )
+        }
+        return WithAbstractPanel;
+    }
+}
+
+export default AbstractPanelHOC
\ No newline at end of file
diff --git a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css b/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css
index 8061ad4a25..9ab7f8557f 100644
--- a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css
+++ b/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css
@@ -1,20 +1,20 @@
-.abstract-panel-plugins        {
-    height: 100%;
-  }
-  .abstract-panel-plugItIn       {
-    display        : none;
-    height         : 100%;
-  }
-  .abstract-panel-plugItIn > div {
-    overflow-y     : auto;
-    overflow-x     : hidden;
-    height         : 100%;
-    width          : 100%;
-  }
-  .abstract-panel-plugItIn.active     {
-    display        : block;
-  }
-  .abstract-panel-pluginsContainer {
-    height         : 100%;
-    overflow-y     : hidden;
-  }
\ No newline at end of file
+.plugins        {
+  height: 100%;
+}
+.plugItIn       {
+  display        : none;
+  height         : 100%;
+}
+.plugItIn > div {
+  overflow-y     : auto;
+  overflow-x     : hidden;
+  height         : 100%;
+  width          : 100%;
+}
+.plugItIn.active     {
+  display        : block;
+}
+.pluginsContainer {
+  height         : 100%;
+  overflow-y     : hidden;
+}
\ No newline at end of file
diff --git a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx b/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx
index dd1fbc52d5..f8d4de503b 100644
--- a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx
+++ b/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx
@@ -1,19 +1,56 @@
-import React from 'react' // eslint-disable-line
+import React, { useEffect, useState } from 'react' // eslint-disable-line
 import './remix-ui-abstract-panel.module.css';
+import parse from 'html-react-parser'
 
 /* eslint-disable-next-line */
 export interface RemixUiAbstractPanelProps {
-  reactView: any
+  reactView: any,
   plugin: any
 }
 
 export function RemixUiAbstractPanel(props: RemixUiAbstractPanelProps) {
+
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    console.log({ activePlugin: props.plugin.active })
+  },[props.plugin.active])
+
+  useEffect(() => {
+      Object.keys(props.plugin.contents).map((key: string) => {
+        const view = props.plugin.contents[key]
+
+        view.addEventListener('load', () => {
+          setLoading(true)
+        })
+        setLoading(false)
+      })
+    }
+  , [loading])
+
   return (
     <div id="plugins" className="plugins">
-      {console.log({ view: props.plugin })}
-      good
+      {
+        Object.keys(props.plugin.contents).map((key: string, index: number) => {
+          
+          const plugin = props.plugin.contents[key]
+          const active = props.plugin.active === key
+          console.log({ plugin: plugin.id, active: props.plugin.active })
+
+          return (
+            <div className="plugItIn" key={ index }>
+              {loading && (
+                 <div className="d-flex justify-content-center align-items-center">
+                 <div className="spinner-border" role="status">
+                   <span className="sr-only">Loading...</span>
+                 </div>
+               </div>
+              )}
+            </div>
+          )
+        })
+      }
     </div>
-  );
+  )
 }
 
 export default RemixUiAbstractPanel;
diff --git a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css
index 86ce5ed9db..bd9571c854 100644
--- a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css
+++ b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css
@@ -14,7 +14,13 @@
   .plugItIn.active     {
     display        : block;
   }
-  .pluginsContainer {
+  /* .pluginsContainer {
     height         : 100%;
     overflow-y     : hidden;
+  } */
+
+  .pluginsContainer {
+    height: 100%;
+    display: flex;
+    overflow-y: hidden;
   }
\ No newline at end of file
diff --git a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx
index 2d2ce96bd8..b48f8a465c 100644
--- a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx
+++ b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx
@@ -18,7 +18,7 @@ export const RemixUiMainPanel = (props: RemixUiMainPanelProps) =>  {
 
 
   return (
-    <div className="plugItIn_2byTty" style={{ display: "block" }} data-id="mainPanelPluginsContainer" id='mainPanelPluginsContainer-id'>
+    <div className="plugItIn pluginsContainer" style={{ display: "block" }} data-id="mainPanelPluginsContainer" id='mainPanelPluginsContainer-id'>
     <div data-id="landingPageHomeContainer" className="homeContainer d-flex" style={{ height: "100%", width: "100%", border: "0px", display: "block" }}>
             <div className="mainContent_2A2Ew bg-light">
           <div className="d-flex justify-content-between">

From d02e2f99c1cfba77c2f00a21dc1bbbbdfc7aabdb Mon Sep 17 00:00:00 2001
From: "davidzagi93@gmail.com" <davidzagi93@gmail.com>
Date: Mon, 6 Dec 2021 09:30:43 +0100
Subject: [PATCH 008/168] adding side-panel

---
 .../src/app/components/main-panel.js          |   4 +-
 apps/remix-ide/src/app/components/panel.js    |   5 +-
 .../src/app/components/side-panel.js          | 182 ++++++++++--------
 .../lib/remix-ui-abstract-panel.module.css    |   4 -
 .../src/lib/remix-ui-abstract-panel.tsx       |   7 +-
 .../src/lib/remix-ui-main-panel.module.css    |   8 +-
 .../src/lib/remix-ui-main-panel.tsx           |   4 +-
 libs/remix-ui/side-panel/.babelrc             |  12 ++
 libs/remix-ui/side-panel/.eslintrc.json       |  18 ++
 libs/remix-ui/side-panel/README.md            |   7 +
 libs/remix-ui/side-panel/src/index.ts         |   1 +
 .../src/lib/remix-ui-side-panel.module.css    |  43 +++++
 .../src/lib/remix-ui-side-panel.tsx           |  75 ++++++++
 libs/remix-ui/side-panel/tsconfig.json        |  20 ++
 libs/remix-ui/side-panel/tsconfig.lib.json    |  13 ++
 nx.json                                       |   3 +
 tsconfig.base.json                            |   1 +
 workspace.json                                |  20 +-
 18 files changed, 327 insertions(+), 100 deletions(-)
 create mode 100644 libs/remix-ui/side-panel/.babelrc
 create mode 100644 libs/remix-ui/side-panel/.eslintrc.json
 create mode 100644 libs/remix-ui/side-panel/README.md
 create mode 100644 libs/remix-ui/side-panel/src/index.ts
 create mode 100644 libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.module.css
 create mode 100644 libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx
 create mode 100644 libs/remix-ui/side-panel/tsconfig.json
 create mode 100644 libs/remix-ui/side-panel/tsconfig.lib.json

diff --git a/apps/remix-ide/src/app/components/main-panel.js b/apps/remix-ide/src/app/components/main-panel.js
index 707b36a776..8f16f6199f 100644
--- a/apps/remix-ide/src/app/components/main-panel.js
+++ b/apps/remix-ide/src/app/components/main-panel.js
@@ -17,7 +17,7 @@ export class MainPanel extends AbstractPanel {
   constructor (config) {
     super(profile)
     this.mainelement = document.createElement('div')
-    this.element.setAttribute('class', 'mainPanelPluginsContainer')
+    this.mainelement.setAttribute('class', 'mainPanelPluginsContainer')
     this.config = config
   }
 
@@ -32,7 +32,7 @@ export class MainPanel extends AbstractPanel {
   }
 
   render () {
-    return this.element
+    return this.mainelement
   }
 
   renderComponent () {
diff --git a/apps/remix-ide/src/app/components/panel.js b/apps/remix-ide/src/app/components/panel.js
index 93d9937338..cba9fdc416 100644
--- a/apps/remix-ide/src/app/components/panel.js
+++ b/apps/remix-ide/src/app/components/panel.js
@@ -14,8 +14,7 @@ export class AbstractPanel extends HostPlugin {
     this.contents = {}
     this.active = undefined
     this.element = document.createElement('div')
-    this.element.setAttribute('id', 'plugins')
-    this.element.setAttribute('class', 'abstract-panel-plugins')
+    this.element.setAttribute('style', 'height: 100%; width: 100%; border: 0;')
   }
 
   onActivation () {
@@ -24,7 +23,7 @@ export class AbstractPanel extends HostPlugin {
 
   addView (profile, view) {
     if (this.contents[profile.name]) throw new Error(`Plugin ${profile.name} already rendered`)
-    view.style.height = '100%'
+    // view.style.height = '90%' // makde external plugins full height
     view.style.width = '100%'
     view.style.border = '0'
     this.contents[profile.name] = view
diff --git a/apps/remix-ide/src/app/components/side-panel.js b/apps/remix-ide/src/app/components/side-panel.js
index 4d681f04c0..8ddaf52f70 100644
--- a/apps/remix-ide/src/app/components/side-panel.js
+++ b/apps/remix-ide/src/app/components/side-panel.js
@@ -1,53 +1,56 @@
+import React from 'react' // eslint-disable-line
 import { AbstractPanel } from './panel'
+import ReactDOM from 'react-dom' // eslint-disable-line
+import { RemixUiSidePanel } from '@remix-ui/side-panel' // eslint-disable-line
 import * as packageJson from '../../../../../package.json'
-const csjs = require('csjs-inject')
+// const csjs = require('csjs-inject')
 const yo = require('yo-yo')
 
-const css = csjs`
-  .panel {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    flex: auto;
-  }
-  .swapitTitle {
-    margin: 0;
-    text-transform: uppercase;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .swapitTitle i{
-    padding-left: 6px;
-    font-size: 14px;
-  }
-  .swapitHeader {
-    display: flex;
-    align-items: center;
-    padding: 16px 24px 15px;
-    justify-content: space-between;
-  }
-  .icons i {
-    height: 80%;
-    cursor: pointer;
-  }
-  .pluginsContainer {
-    height: 100%;
-    overflow-y: auto;
-  }
-  .titleInfo {
-    padding-left: 10px;
-  }
-  .versionBadge {
-    background-color: var(--light);
-    padding: 0 7px;
-    font-weight: bolder;
-    margin-left: 5px;
-    text-transform: lowercase;
-    cursor: default;
-  }
-`
+// const css = csjs`
+//   .panel {
+//     width: 100%;
+//     height: 100%;
+//     display: flex;
+//     flex-direction: column;
+//     flex: auto;
+//   }
+//   .swapitTitle {
+//     margin: 0;
+//     text-transform: uppercase;
+//     white-space: nowrap;
+//     overflow: hidden;
+//     text-overflow: ellipsis;
+//   }
+//   .swapitTitle i{
+//     padding-left: 6px;
+//     font-size: 14px;
+//   }
+//   .swapitHeader {
+//     display: flex;
+//     align-items: center;
+//     padding: 16px 24px 15px;
+//     justify-content: space-between;
+//   }
+//   .icons i {
+//     height: 80%;
+//     cursor: pointer;
+//   }
+//   .pluginsContainer {
+//     height: 100%;
+//     overflow-y: auto;
+//   }
+//   .titleInfo {
+//     padding-left: 10px;
+//   }
+//   .versionBadge {
+//     background-color: var(--light);
+//     padding: 0 7px;
+//     font-weight: bolder;
+//     margin-left: 5px;
+//     text-transform: lowercase;
+//     cursor: default;
+//   }
+// `
 
 const sidePanel = {
   name: 'sidePanel',
@@ -63,7 +66,9 @@ export class SidePanel extends AbstractPanel {
     super(sidePanel)
     this.appManager = appManager
     this.header = yo`<header></header>`
-    this.renderHeader()
+    // this.renderHeader()
+    this.sideelement = document.createElement('div')
+    this.sideelement.setAttribute('class', 'plugins-container')
     this.verticalIcons = verticalIcons
 
     // Toggle content
@@ -90,6 +95,10 @@ export class SidePanel extends AbstractPanel {
     })
   }
 
+  onActivation () {
+    this.renderComponent()
+  }
+
   focus (name) {
     this.emit('focusChanged', name)
     super.focus(name)
@@ -104,6 +113,7 @@ export class SidePanel extends AbstractPanel {
   addView (profile, view) {
     super.addView(profile, view)
     this.verticalIcons.linkContent(profile)
+    this.renderComponent()
   }
 
   /**
@@ -112,45 +122,57 @@ export class SidePanel extends AbstractPanel {
    */
   async showContent (name) {
     super.showContent(name)
-    this.renderHeader()
+    // this.renderHeader()
     this.emit('focusChanged', name)
+    this.renderComponent()
   }
 
   /** The header of the side panel */
-  async renderHeader () {
-    let name = ' - '
-    let docLink = ''
-    let versionWarning
-    if (this.active) {
-      const profile = await this.appManager.getProfile(this.active)
-      name = profile.displayName ? profile.displayName : profile.name
-      docLink = profile.documentation ? yo`<a href="${profile.documentation}" class="${css.titleInfo}" title="link to documentation" target="_blank"><i aria-hidden="true" class="fas fa-book"></i></a>` : ''
-      if (profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)) {
-        versionWarning = yo`<small title="Version Alpha" class="badge-light ${css.versionBadge}">alpha</small>`
-      }
-      // Beta
-      if (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) {
-        versionWarning = yo`<small title="Version Beta" class="badge-light ${css.versionBadge}">beta</small>`
-      }
-    }
+  // async renderHeader () {
+  //   let name = ' - '
+  //   let docLink = ''
+  //   let versionWarning
+  //   if (this.active) {
+  //     const profile = await this.appManager.getProfile(this.active)
+  //     name = profile.displayName ? profile.displayName : profile.name
+  //     docLink = profile.documentation ? yo`<a href="${profile.documentation}" class="${css.titleInfo}" title="link to documentation" target="_blank"><i aria-hidden="true" class="fas fa-book"></i></a>` : ''
+  //     if (profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)) {
+  //       versionWarning = yo`<small title="Version Alpha" class="badge-light ${css.versionBadge}">alpha</small>`
+  //     }
+  //     // Beta
+  //     if (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) {
+  //       versionWarning = yo`<small title="Version Beta" class="badge-light ${css.versionBadge}">beta</small>`
+  //     }
+  //   }
 
-    const header = yo`
-      <header class="${css.swapitHeader}">
-        <h6 class="${css.swapitTitle}" data-id="sidePanelSwapitTitle">${name}</h6>
-        ${docLink}
-        ${versionWarning}
-      </header>
-    `
-    yo.update(this.header, header)
-  }
+  //   const header = yo`
+  //     <header class="${css.swapitHeader}">
+  //       <h6 class="${css.swapitTitle}" data-id="sidePanelSwapitTitle">${name}</h6>
+  //       ${docLink}
+  //       ${versionWarning}
+  //     </header>
+  //   `
+  //   yo.update(this.header, header)
+  //   this.renderComponent()
+  // }
 
   render () {
-    return yo`
-      <section class="${css.panel} plugin-manager">
-        ${this.header}
-        <div class="${css.pluginsContainer}">
-          ${this.element}
-        </div>
-      </section>`
+    return this.element
+    // return yo`
+    //   <section class="${css.panel} plugin-manager">
+    //     ${this.header}
+    //     <div class="${css.pluginsContainer}">
+    //       ${this.element}
+    //     </div>
+    //   </section>`
+  }
+
+  renderComponent () {
+    ReactDOM.render(
+      <RemixUiSidePanel
+        plugin={this}
+      />,
+      this.sideelement
+    )
   }
 }
diff --git a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css b/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css
index 9ab7f8557f..8ab5f0b1c8 100644
--- a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css
+++ b/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css
@@ -13,8 +13,4 @@
 }
 .plugItIn.active     {
   display        : block;
-}
-.pluginsContainer {
-  height         : 100%;
-  overflow-y     : hidden;
 }
\ No newline at end of file
diff --git a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx b/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx
index f8d4de503b..60beb915ac 100644
--- a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx
+++ b/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx
@@ -22,13 +22,14 @@ export function RemixUiAbstractPanel(props: RemixUiAbstractPanelProps) {
         view.addEventListener('load', () => {
           setLoading(true)
         })
-        setLoading(false)
+       
       })
+      setLoading(false)
     }
   , [loading])
 
   return (
-    <div id="plugins" className="plugins">
+    <div id="plugins">
       {
         Object.keys(props.plugin.contents).map((key: string, index: number) => {
           
@@ -37,7 +38,7 @@ export function RemixUiAbstractPanel(props: RemixUiAbstractPanelProps) {
           console.log({ plugin: plugin.id, active: props.plugin.active })
 
           return (
-            <div className="plugItIn" key={ index }>
+            <div key={ index }>
               {loading && (
                  <div className="d-flex justify-content-center align-items-center">
                  <div className="spinner-border" role="status">
diff --git a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css
index bd9571c854..d5e4c7e6b2 100644
--- a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css
+++ b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css
@@ -14,13 +14,13 @@
   .plugItIn.active     {
     display        : block;
   }
-  /* .pluginsContainer {
+  .pluginsContainer {
     height         : 100%;
     overflow-y     : hidden;
-  } */
+  }
 
-  .pluginsContainer {
+  /* .pluginsContainer {
     height: 100%;
     display: flex;
     overflow-y: hidden;
-  }
\ No newline at end of file
+  } */
\ No newline at end of file
diff --git a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx
index b48f8a465c..376841d2f3 100644
--- a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx
+++ b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx
@@ -18,7 +18,6 @@ export const RemixUiMainPanel = (props: RemixUiMainPanelProps) =>  {
 
 
   return (
-    <div className="plugItIn pluginsContainer" style={{ display: "block" }} data-id="mainPanelPluginsContainer" id='mainPanelPluginsContainer-id'>
     <div data-id="landingPageHomeContainer" className="homeContainer d-flex" style={{ height: "100%", width: "100%", border: "0px", display: "block" }}>
             <div className="mainContent_2A2Ew bg-light">
           <div className="d-flex justify-content-between">
@@ -113,8 +112,7 @@ export const RemixUiMainPanel = (props: RemixUiMainPanelProps) =>  {
           </div>
        </div>
     </div>
- </div>
-  );
+  )
 }
 
 export default RemixUiMainPanel;
diff --git a/libs/remix-ui/side-panel/.babelrc b/libs/remix-ui/side-panel/.babelrc
new file mode 100644
index 0000000000..ccae900be4
--- /dev/null
+++ b/libs/remix-ui/side-panel/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/libs/remix-ui/side-panel/.eslintrc.json b/libs/remix-ui/side-panel/.eslintrc.json
new file mode 100644
index 0000000000..50e59482cf
--- /dev/null
+++ b/libs/remix-ui/side-panel/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/libs/remix-ui/side-panel/README.md b/libs/remix-ui/side-panel/README.md
new file mode 100644
index 0000000000..fa765fcb39
--- /dev/null
+++ b/libs/remix-ui/side-panel/README.md
@@ -0,0 +1,7 @@
+# remix-ui-side-panel
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test remix-ui-side-panel` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/remix-ui/side-panel/src/index.ts b/libs/remix-ui/side-panel/src/index.ts
new file mode 100644
index 0000000000..d45ee2522b
--- /dev/null
+++ b/libs/remix-ui/side-panel/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/remix-ui-side-panel';
diff --git a/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.module.css b/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.module.css
new file mode 100644
index 0000000000..b271bcc176
--- /dev/null
+++ b/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.module.css
@@ -0,0 +1,43 @@
+.panel {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    flex: auto;
+  }
+  .swapitTitle {
+    margin: 0;
+    text-transform: uppercase;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .swapitTitle i{
+    padding-left: 6px;
+    font-size: 14px;
+  }
+  .remix-ui-side-panel-swapitHeader {
+    display: flex;
+    align-items: center;
+    padding: 16px 24px 15px;
+    justify-content: space-between;
+  }
+  .icons i {
+    height: 80%;
+    cursor: pointer;
+  }
+  .pluginsContainer {
+    height: 100%;
+    overflow-y: auto;
+  }
+  .titleInfo {
+    padding-left: 10px;
+  }
+  .versionBadge {
+    background-color: var(--light);
+    padding: 0 7px;
+    font-weight: bolder;
+    margin-left: 5px;
+    text-transform: lowercase;
+    cursor: default;
+  }
\ No newline at end of file
diff --git a/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx b/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx
new file mode 100644
index 0000000000..85187a83ba
--- /dev/null
+++ b/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx
@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from 'react' // eslint-disable-line
+import parse from 'html-react-parser'
+import './remix-ui-side-panel.module.css';
+
+/* eslint-disable-next-line */
+export interface RemixUiSidePanelProps {
+  plugin: any
+}
+
+export function RemixUiSidePanel(props: RemixUiSidePanelProps) {
+  const [view, setView] = useState('')
+  const [dockLink, setDockLink] = useState(false)
+  const [versionWarning, setVersionWarning] = useState(false)
+  const [profile, setProfile] = useState('')
+  const [profileDocsLink, setProfileDocsLink] = useState('')
+  const [name, setName] = useState(' - ')
+
+  useEffect(() => {
+    console.log({ props: props.plugin })
+    Object.keys(props.plugin.contents).map((key: string, index: number) => {
+      console.log({ key })
+      const active = props.plugin.active === key
+      if (active) {
+        const plugin = props.plugin.contents[key]
+        setView(plugin.innerHTML)
+      }
+    })  
+  }, [props.plugin.contents])
+
+  const getProfile  = async () => {
+    if (props.plugin.active) {
+      const profile =  await props.plugin.appManager.getProfile(props.plugin.active)
+      setProfileDocsLink(profile.documentation)
+      profile.displayName ? setName(profile.displayName) : setName(profile.name)
+      profile.documentation ? setDockLink(true) : setDockLink(false)
+      if (profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)) {
+        setVersionWarning(true)
+      }
+      // Beta
+      if (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) {
+        setVersionWarning(true)
+      }
+    }
+  }
+
+  const renderHeader =  () => {
+    getProfile()
+   return (
+    <header className="remix-ui-side-panel-swapitHeader" style={{
+    display: 'flex',
+    alignItems: "center",
+    padding: '16px 24px 15px',
+    justifyContent: "space-between"
+    }}>
+    <h6 className="swapitTitle" data-id="sidePanelSwapitTitle">{name}</h6>
+    {dockLink ? (<a href={profileDocsLink} className="${css.titleInfo}" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>) : ''}
+    {/* {versionWarning ? (<small title="Version Alpha" className="badge-light versionBadge">alpha</small>) : (<small title="Version Beta" className="badge-light versionBadge">beta</small>)} */}
+  </header>
+   )
+  }
+
+
+  return (
+            <section>
+              {renderHeader()}
+              <div className="pluginsContainer" style={{
+                    height: "100%",
+                    overflowY: "auto"
+              }}>
+              </div>
+            </section>
+  );
+}
+
+export default RemixUiSidePanel;
diff --git a/libs/remix-ui/side-panel/tsconfig.json b/libs/remix-ui/side-panel/tsconfig.json
new file mode 100644
index 0000000000..8bd701c578
--- /dev/null
+++ b/libs/remix-ui/side-panel/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}
diff --git a/libs/remix-ui/side-panel/tsconfig.lib.json b/libs/remix-ui/side-panel/tsconfig.lib.json
new file mode 100644
index 0000000000..b560bc4dec
--- /dev/null
+++ b/libs/remix-ui/side-panel/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"]
+}
diff --git a/nx.json b/nx.json
index 1ea0794c32..decbde03bd 100644
--- a/nx.json
+++ b/nx.json
@@ -144,6 +144,9 @@
     },
     "remix-ui-abstract-panel": {
       "tags": []
+    },
+    "remix-ui-side-panel": {
+      "tags": []
     }
   },
   "targetDependencies": {
diff --git a/tsconfig.base.json b/tsconfig.base.json
index dd7f9d7c37..8c956056c7 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -69,6 +69,7 @@
       "@remix-ui/helper": ["libs/remix-ui/helper/src/index.ts"],
       "@remix-ui/vertical-icons-panel": ["libs/remix-ui/vertical-icons-panel/src/index.ts"],
       "@remix-ui/main-panel": ["libs/remix-ui/main-panel/src/index.ts"],
+      "@remix-ui/abstract-panel": ["libs/remix-ui/abstract-panel/src/index.ts"],
       "@remix-ui/side-panel": ["libs/remix-ui/side-panel/src/index.ts"]
     }
   },
diff --git a/workspace.json b/workspace.json
index 1005bd21d2..c6b94ddad8 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1160,7 +1160,25 @@
           "options": {
             "linter": "eslint",
             "tsConfig": ["libs/remix-ui/abstract-panel/tsconfig.lib.json"],
-            "exclude": ["**/node_modules/**", "!libs/remix-ui/abstract-panel/**/*"]
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/remix-ui/abstract-panel/**/*"
+            ]
+          }
+        }
+      }
+    },
+    "remix-ui-side-panel": {
+      "root": "libs/remix-ui/side-panel",
+      "sourceRoot": "libs/remix-ui/side-panel/src",
+      "projectType": "library",
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": [
+              "libs/remix-ui/side-panel/**/*.{ts,tsx,js,jsx}"
+            ]
           }
         }
       }

From cdaf00ca715bf0f09ded3c5ea412e7ea0cb3d02b Mon Sep 17 00:00:00 2001
From: "davidzagi93@gmail.com" <davidzagi93@gmail.com>
Date: Mon, 6 Dec 2021 11:58:14 +0100
Subject: [PATCH 009/168] added iframe height

---
 apps/remix-ide/src/app/components/panel.js               | 2 --
 .../side-panel/src/lib/remix-ui-side-panel.module.css    | 9 +++++++--
 libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx | 9 ++-------
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/apps/remix-ide/src/app/components/panel.js b/apps/remix-ide/src/app/components/panel.js
index cba9fdc416..d8cc5b094b 100644
--- a/apps/remix-ide/src/app/components/panel.js
+++ b/apps/remix-ide/src/app/components/panel.js
@@ -14,7 +14,6 @@ export class AbstractPanel extends HostPlugin {
     this.contents = {}
     this.active = undefined
     this.element = document.createElement('div')
-    this.element.setAttribute('style', 'height: 100%; width: 100%; border: 0;')
   }
 
   onActivation () {
@@ -23,7 +22,6 @@ export class AbstractPanel extends HostPlugin {
 
   addView (profile, view) {
     if (this.contents[profile.name]) throw new Error(`Plugin ${profile.name} already rendered`)
-    // view.style.height = '90%' // makde external plugins full height
     view.style.width = '100%'
     view.style.border = '0'
     this.contents[profile.name] = view
diff --git a/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.module.css b/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.module.css
index b271bcc176..05d376a1f4 100644
--- a/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.module.css
+++ b/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.module.css
@@ -16,7 +16,7 @@
     padding-left: 6px;
     font-size: 14px;
   }
-  .remix-ui-side-panel-swapitHeader {
+  .swapitHeader {
     display: flex;
     align-items: center;
     padding: 16px 24px 15px;
@@ -40,4 +40,9 @@
     margin-left: 5px;
     text-transform: lowercase;
     cursor: default;
-  }
\ No newline at end of file
+  }
+
+  iframe {
+    height: 100%;
+    overflow-y: scroll;
+  }
diff --git a/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx b/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx
index 85187a83ba..0bc129bd3b 100644
--- a/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx
+++ b/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx
@@ -46,7 +46,7 @@ export function RemixUiSidePanel(props: RemixUiSidePanelProps) {
   const renderHeader =  () => {
     getProfile()
    return (
-    <header className="remix-ui-side-panel-swapitHeader" style={{
+    <header className="swapitHeader" style={{
     display: 'flex',
     alignItems: "center",
     padding: '16px 24px 15px',
@@ -61,13 +61,8 @@ export function RemixUiSidePanel(props: RemixUiSidePanelProps) {
 
 
   return (
-            <section>
+            <section style={{height: "100%"}}>
               {renderHeader()}
-              <div className="pluginsContainer" style={{
-                    height: "100%",
-                    overflowY: "auto"
-              }}>
-              </div>
             </section>
   );
 }

From 1e80afd3c8574a88faa4e3dd7e8057d811ba1f61 Mon Sep 17 00:00:00 2001
From: "davidzagi93@gmail.com" <davidzagi93@gmail.com>
Date: Fri, 10 Dec 2021 10:08:11 +0100
Subject: [PATCH 010/168] panel update

---
 apps/remix-ide/src/app.js                     |  2 +
 .../src/app/components/main-panel.js          |  5 +
 apps/remix-ide/src/app/components/panel.js    |  8 +-
 .../src/app/components/side-panel.js          | 95 ++-----------------
 .../src/lib/remix-ui-abstract-panel.tsx       | 37 +-------
 .../src/lib/remix-ui-side-panel.module.css    |  3 +-
 .../src/lib/remix-ui-side-panel.tsx           | 39 ++++----
 7 files changed, 39 insertions(+), 150 deletions(-)

diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index 29dc9f14f2..ffa7bd52b5 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -90,6 +90,8 @@ const css = csjs`
     display            : flex;
     flex-direction     : row-reverse;
     width              : 320px;
+    overflow           : auto;
+    padding-bottom: 20px;
   }
   .highlightcode       {
     position           : absolute;
diff --git a/apps/remix-ide/src/app/components/main-panel.js b/apps/remix-ide/src/app/components/main-panel.js
index 8f16f6199f..dd9269a27c 100644
--- a/apps/remix-ide/src/app/components/main-panel.js
+++ b/apps/remix-ide/src/app/components/main-panel.js
@@ -27,6 +27,11 @@ export class MainPanel extends AbstractPanel {
     this.renderComponent()
   }
 
+  addView (profile, view) {
+    super.addView(profile, view)
+    view.style.height = '100%'
+  }
+
   onActivation () {
     this.renderComponent()
   }
diff --git a/apps/remix-ide/src/app/components/panel.js b/apps/remix-ide/src/app/components/panel.js
index d8cc5b094b..a7a0e4d968 100644
--- a/apps/remix-ide/src/app/components/panel.js
+++ b/apps/remix-ide/src/app/components/panel.js
@@ -22,15 +22,16 @@ export class AbstractPanel extends HostPlugin {
 
   addView (profile, view) {
     if (this.contents[profile.name]) throw new Error(`Plugin ${profile.name} already rendered`)
-    view.style.width = '100%'
     view.style.border = '0'
     this.contents[profile.name] = view
-    this.showContent(profile.name)
+    this.contents[profile.name].style.display = 'none'
     this.element.appendChild(this.contents[profile.name])
     this.renderComponent()
   }
 
   removeView (profile) {
+    this.emit('pluginDisabled', profile.name)
+    this.verticalIcons.unlinkContent(profile)
     this.remove(profile.name)
   }
 
@@ -54,9 +55,10 @@ export class AbstractPanel extends HostPlugin {
     if (!this.contents[name]) throw new Error(`Plugin ${name} is not yet activated`)
     // hiding the current view and display the `moduleName`
     if (this.active) {
+      console.log({ active: this.active, name }, 'first')
       this.contents[this.active].style.display = 'none'
     }
-
+    console.log({ active: this.active, name }, 'second')
     this.contents[name].style.display = 'flex'
     this.active = name
     this.renderComponent()
diff --git a/apps/remix-ide/src/app/components/side-panel.js b/apps/remix-ide/src/app/components/side-panel.js
index 8ddaf52f70..90c0e49c6d 100644
--- a/apps/remix-ide/src/app/components/side-panel.js
+++ b/apps/remix-ide/src/app/components/side-panel.js
@@ -2,56 +2,11 @@ import React from 'react' // eslint-disable-line
 import { AbstractPanel } from './panel'
 import ReactDOM from 'react-dom' // eslint-disable-line
 import { RemixUiSidePanel } from '@remix-ui/side-panel' // eslint-disable-line
+import { RemixUiAbstractPanel } from '@remix-ui/abstract-panel'
 import * as packageJson from '../../../../../package.json'
 // const csjs = require('csjs-inject')
 const yo = require('yo-yo')
 
-// const css = csjs`
-//   .panel {
-//     width: 100%;
-//     height: 100%;
-//     display: flex;
-//     flex-direction: column;
-//     flex: auto;
-//   }
-//   .swapitTitle {
-//     margin: 0;
-//     text-transform: uppercase;
-//     white-space: nowrap;
-//     overflow: hidden;
-//     text-overflow: ellipsis;
-//   }
-//   .swapitTitle i{
-//     padding-left: 6px;
-//     font-size: 14px;
-//   }
-//   .swapitHeader {
-//     display: flex;
-//     align-items: center;
-//     padding: 16px 24px 15px;
-//     justify-content: space-between;
-//   }
-//   .icons i {
-//     height: 80%;
-//     cursor: pointer;
-//   }
-//   .pluginsContainer {
-//     height: 100%;
-//     overflow-y: auto;
-//   }
-//   .titleInfo {
-//     padding-left: 10px;
-//   }
-//   .versionBadge {
-//     background-color: var(--light);
-//     padding: 0 7px;
-//     font-weight: bolder;
-//     margin-left: 5px;
-//     text-transform: lowercase;
-//     cursor: default;
-//   }
-// `
-
 const sidePanel = {
   name: 'sidePanel',
   displayName: 'Side Panel',
@@ -66,9 +21,8 @@ export class SidePanel extends AbstractPanel {
     super(sidePanel)
     this.appManager = appManager
     this.header = yo`<header></header>`
-    // this.renderHeader()
-    this.sideelement = document.createElement('div')
-    this.sideelement.setAttribute('class', 'plugins-container')
+    this.sideelement = this.element
+    // this.sideelement.setAttribute('class', 'panel')
     this.verticalIcons = verticalIcons
 
     // Toggle content
@@ -122,56 +76,19 @@ export class SidePanel extends AbstractPanel {
    */
   async showContent (name) {
     super.showContent(name)
-    // this.renderHeader()
     this.emit('focusChanged', name)
-    this.renderComponent()
   }
 
-  /** The header of the side panel */
-  // async renderHeader () {
-  //   let name = ' - '
-  //   let docLink = ''
-  //   let versionWarning
-  //   if (this.active) {
-  //     const profile = await this.appManager.getProfile(this.active)
-  //     name = profile.displayName ? profile.displayName : profile.name
-  //     docLink = profile.documentation ? yo`<a href="${profile.documentation}" class="${css.titleInfo}" title="link to documentation" target="_blank"><i aria-hidden="true" class="fas fa-book"></i></a>` : ''
-  //     if (profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)) {
-  //       versionWarning = yo`<small title="Version Alpha" class="badge-light ${css.versionBadge}">alpha</small>`
-  //     }
-  //     // Beta
-  //     if (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) {
-  //       versionWarning = yo`<small title="Version Beta" class="badge-light ${css.versionBadge}">beta</small>`
-  //     }
-  //   }
-
-  //   const header = yo`
-  //     <header class="${css.swapitHeader}">
-  //       <h6 class="${css.swapitTitle}" data-id="sidePanelSwapitTitle">${name}</h6>
-  //       ${docLink}
-  //       ${versionWarning}
-  //     </header>
-  //   `
-  //   yo.update(this.header, header)
-  //   this.renderComponent()
-  // }
-
   render () {
-    return this.element
-    // return yo`
-    //   <section class="${css.panel} plugin-manager">
-    //     ${this.header}
-    //     <div class="${css.pluginsContainer}">
-    //       ${this.element}
-    //     </div>
-    //   </section>`
+    return this.sideelement
   }
 
   renderComponent () {
     ReactDOM.render(
       <RemixUiSidePanel
         plugin={this}
-      />,
+      />
+      ,
       this.sideelement
     )
   }
diff --git a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx b/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx
index 60beb915ac..629543aa5a 100644
--- a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx
+++ b/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx
@@ -11,45 +11,10 @@ export interface RemixUiAbstractPanelProps {
 export function RemixUiAbstractPanel(props: RemixUiAbstractPanelProps) {
 
   const [loading, setLoading] = useState(false);
-  useEffect(() => {
-    console.log({ activePlugin: props.plugin.active })
-  },[props.plugin.active])
-
-  useEffect(() => {
-      Object.keys(props.plugin.contents).map((key: string) => {
-        const view = props.plugin.contents[key]
-
-        view.addEventListener('load', () => {
-          setLoading(true)
-        })
-       
-      })
-      setLoading(false)
-    }
-  , [loading])
 
   return (
     <div id="plugins">
-      {
-        Object.keys(props.plugin.contents).map((key: string, index: number) => {
-          
-          const plugin = props.plugin.contents[key]
-          const active = props.plugin.active === key
-          console.log({ plugin: plugin.id, active: props.plugin.active })
-
-          return (
-            <div key={ index }>
-              {loading && (
-                 <div className="d-flex justify-content-center align-items-center">
-                 <div className="spinner-border" role="status">
-                   <span className="sr-only">Loading...</span>
-                 </div>
-               </div>
-              )}
-            </div>
-          )
-        })
-      }
+      
     </div>
   )
 }
diff --git a/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.module.css b/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.module.css
index 05d376a1f4..018a752156 100644
--- a/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.module.css
+++ b/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.module.css
@@ -41,8 +41,7 @@
     text-transform: lowercase;
     cursor: default;
   }
-
   iframe {
     height: 100%;
-    overflow-y: scroll;
   }
+
diff --git a/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx b/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx
index 0bc129bd3b..b2b49fb788 100644
--- a/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx
+++ b/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx
@@ -10,24 +10,18 @@ export interface RemixUiSidePanelProps {
 export function RemixUiSidePanel(props: RemixUiSidePanelProps) {
   const [view, setView] = useState('')
   const [dockLink, setDockLink] = useState(false)
-  const [versionWarning, setVersionWarning] = useState(false)
+  const [versionWarning, setVersionWarning] = useState<boolean>(false)
+  const [versionWarningBeta, setVersionWarningBeta] = useState(false)
   const [profile, setProfile] = useState('')
   const [profileDocsLink, setProfileDocsLink] = useState('')
   const [name, setName] = useState(' - ')
 
   useEffect(() => {
-    console.log({ props: props.plugin })
-    Object.keys(props.plugin.contents).map((key: string, index: number) => {
-      console.log({ key })
-      const active = props.plugin.active === key
-      if (active) {
-        const plugin = props.plugin.contents[key]
-        setView(plugin.innerHTML)
-      }
-    })  
-  }, [props.plugin.contents])
+    console.log()
+  }, [name])
 
   const getProfile  = async () => {
+    console.log({active: props.plugin.active})
     if (props.plugin.active) {
       const profile =  await props.plugin.appManager.getProfile(props.plugin.active)
       setProfileDocsLink(profile.documentation)
@@ -35,10 +29,14 @@ export function RemixUiSidePanel(props: RemixUiSidePanelProps) {
       profile.documentation ? setDockLink(true) : setDockLink(false)
       if (profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)) {
         setVersionWarning(true)
+      } else {
+        setVersionWarning(false)
       }
       // Beta
       if (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) {
-        setVersionWarning(true)
+        setVersionWarningBeta(true)
+      } else{
+        setVersionWarningBeta(false)
       }
     }
   }
@@ -46,22 +44,23 @@ export function RemixUiSidePanel(props: RemixUiSidePanelProps) {
   const renderHeader =  () => {
     getProfile()
    return (
-    <header className="swapitHeader" style={{
-    display: 'flex',
-    alignItems: "center",
-    padding: '16px 24px 15px',
-    justifyContent: "space-between"
+    <header style={{
+      display: 'flex',
+      alignItems: 'center',
+      padding: '16px 24px 15px',
+      justifyContent: 'space-between'
     }}>
     <h6 className="swapitTitle" data-id="sidePanelSwapitTitle">{name}</h6>
-    {dockLink ? (<a href={profileDocsLink} className="${css.titleInfo}" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>) : ''}
-    {/* {versionWarning ? (<small title="Version Alpha" className="badge-light versionBadge">alpha</small>) : (<small title="Version Beta" className="badge-light versionBadge">beta</small>)} */}
+    {dockLink ? (<a href={profileDocsLink} className="titleInfo" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>) : ''}
+    {versionWarning ? (<small title="Version Alpha" className="badge-light versionBadge">alpha</small>) : null }
+    {versionWarningBeta ? (<small title="Version Beta" className="badge-light versionBadge">beta</small>) : null}
   </header>
    )
   }
 
 
   return (
-            <section style={{height: "100%"}}>
+            <section style={{ position:'sticky' }}>
               {renderHeader()}
             </section>
   );

From 6a110248d9d190910eebee44a997dd7d4a71c22f Mon Sep 17 00:00:00 2001
From: David Zagi <davidzagi@yahoo.com>
Date: Tue, 14 Dec 2021 09:31:56 +0100
Subject: [PATCH 011/168] update abstract and side panels

---
 apps/remix-ide/src/app.js                             |  1 -
 apps/remix-ide/src/app/components/panel.js            |  2 --
 apps/remix-ide/src/app/components/side-panel.js       |  3 ---
 .../side-panel/src/lib/remix-ui-side-panel.tsx        | 11 ++++++++---
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index ffa7bd52b5..1fd8172e6e 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -91,7 +91,6 @@ const css = csjs`
     flex-direction     : row-reverse;
     width              : 320px;
     overflow           : auto;
-    padding-bottom: 20px;
   }
   .highlightcode       {
     position           : absolute;
diff --git a/apps/remix-ide/src/app/components/panel.js b/apps/remix-ide/src/app/components/panel.js
index a7a0e4d968..a3264ea7e4 100644
--- a/apps/remix-ide/src/app/components/panel.js
+++ b/apps/remix-ide/src/app/components/panel.js
@@ -55,10 +55,8 @@ export class AbstractPanel extends HostPlugin {
     if (!this.contents[name]) throw new Error(`Plugin ${name} is not yet activated`)
     // hiding the current view and display the `moduleName`
     if (this.active) {
-      console.log({ active: this.active, name }, 'first')
       this.contents[this.active].style.display = 'none'
     }
-    console.log({ active: this.active, name }, 'second')
     this.contents[name].style.display = 'flex'
     this.active = name
     this.renderComponent()
diff --git a/apps/remix-ide/src/app/components/side-panel.js b/apps/remix-ide/src/app/components/side-panel.js
index 90c0e49c6d..7d8ccad5bf 100644
--- a/apps/remix-ide/src/app/components/side-panel.js
+++ b/apps/remix-ide/src/app/components/side-panel.js
@@ -2,10 +2,8 @@ import React from 'react' // eslint-disable-line
 import { AbstractPanel } from './panel'
 import ReactDOM from 'react-dom' // eslint-disable-line
 import { RemixUiSidePanel } from '@remix-ui/side-panel' // eslint-disable-line
-import { RemixUiAbstractPanel } from '@remix-ui/abstract-panel'
 import * as packageJson from '../../../../../package.json'
 // const csjs = require('csjs-inject')
-const yo = require('yo-yo')
 
 const sidePanel = {
   name: 'sidePanel',
@@ -20,7 +18,6 @@ export class SidePanel extends AbstractPanel {
   constructor (appManager, verticalIcons) {
     super(sidePanel)
     this.appManager = appManager
-    this.header = yo`<header></header>`
     this.sideelement = this.element
     // this.sideelement.setAttribute('class', 'panel')
     this.verticalIcons = verticalIcons
diff --git a/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx b/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx
index b2b49fb788..387cd80e5a 100644
--- a/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx
+++ b/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx
@@ -46,9 +46,14 @@ export function RemixUiSidePanel(props: RemixUiSidePanelProps) {
    return (
     <header style={{
       display: 'flex',
-      alignItems: 'center',
-      padding: '16px 24px 15px',
-      justifyContent: 'space-between'
+    flexDirection: 'column',
+    alignItems: 'center',
+    padding: '10px',
+    position: 'sticky',
+    top: 0,
+    zIndex: 2,
+    marginBottom: '0px',
+    boxSizing: 'inherit',
     }}>
     <h6 className="swapitTitle" data-id="sidePanelSwapitTitle">{name}</h6>
     {dockLink ? (<a href={profileDocsLink} className="titleInfo" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>) : ''}

From 21392d8f4a99793769ff861880a28e468a073346 Mon Sep 17 00:00:00 2001
From: David Zagi <davidzagi@yahoo.com>
Date: Fri, 17 Dec 2021 11:45:40 +0100
Subject: [PATCH 012/168] updated sidePanel addView

---
 apps/remix-ide/src/app/components/panel.js      | 12 +++++++++++-
 apps/remix-ide/src/app/components/side-panel.js |  5 +++--
 .../side-panel/src/lib/remix-ui-side-panel.tsx  | 17 +++++++++--------
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/apps/remix-ide/src/app/components/panel.js b/apps/remix-ide/src/app/components/panel.js
index a3264ea7e4..daa211a121 100644
--- a/apps/remix-ide/src/app/components/panel.js
+++ b/apps/remix-ide/src/app/components/panel.js
@@ -22,7 +22,14 @@ export class AbstractPanel extends HostPlugin {
 
   addView (profile, view) {
     if (this.contents[profile.name]) throw new Error(`Plugin ${profile.name} already rendered`)
+    view.style.height = '100%'
+    view.style.width = '100%'
     view.style.border = '0'
+
+    if (view.tagName === 'IFRAME') {
+      view.style.display = 'block'
+    }
+
     this.contents[profile.name] = view
     this.contents[profile.name].style.display = 'none'
     this.element.appendChild(this.contents[profile.name])
@@ -57,9 +64,12 @@ export class AbstractPanel extends HostPlugin {
     if (this.active) {
       this.contents[this.active].style.display = 'none'
     }
+    console.log({ name, active: this.active, contents: this.contents })
     this.contents[name].style.display = 'flex'
+    this.contents[name].style.paddingTop = '20%'
+    this.contents[name].style.flexDirection = 'column'
+
     this.active = name
-    this.renderComponent()
   }
 
   focus (name) {
diff --git a/apps/remix-ide/src/app/components/side-panel.js b/apps/remix-ide/src/app/components/side-panel.js
index 7d8ccad5bf..f39dd7963d 100644
--- a/apps/remix-ide/src/app/components/side-panel.js
+++ b/apps/remix-ide/src/app/components/side-panel.js
@@ -18,8 +18,9 @@ export class SidePanel extends AbstractPanel {
   constructor (appManager, verticalIcons) {
     super(sidePanel)
     this.appManager = appManager
-    this.sideelement = this.element
-    // this.sideelement.setAttribute('class', 'panel')
+    // this.sideelement = this.element
+    this.sideelement = document.createElement('div')
+    this.element = this.sideelement
     this.verticalIcons = verticalIcons
 
     // Toggle content
diff --git a/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx b/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx
index 387cd80e5a..129a3068b1 100644
--- a/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx
+++ b/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx
@@ -46,14 +46,9 @@ export function RemixUiSidePanel(props: RemixUiSidePanelProps) {
    return (
     <header style={{
       display: 'flex',
-    flexDirection: 'column',
     alignItems: 'center',
-    padding: '10px',
-    position: 'sticky',
-    top: 0,
-    zIndex: 2,
-    marginBottom: '0px',
-    boxSizing: 'inherit',
+    padding: '16px 24px 15px',
+    justifyContent: 'space-between',
     }}>
     <h6 className="swapitTitle" data-id="sidePanelSwapitTitle">{name}</h6>
     {dockLink ? (<a href={profileDocsLink} className="titleInfo" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>) : ''}
@@ -65,7 +60,13 @@ export function RemixUiSidePanel(props: RemixUiSidePanelProps) {
 
 
   return (
-            <section style={{ position:'sticky' }}>
+            <section style={{
+              position: "fixed",
+              height: "50px",
+              width: "320px",
+              backgroundColor: "var(--light)",
+              zIndex: "999",
+            }} >
               {renderHeader()}
             </section>
   );

From 5ccf6dbdd492f4436f3da733dc252508fd54648b Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Mon, 20 Dec 2021 14:45:42 +0100
Subject: [PATCH 013/168] fix_using_abstract_panel

---
 .../src/app/components/hidden-panel.js        |  18 ++-
 .../src/app/components/main-panel.js          |  12 +-
 apps/remix-ide/src/app/components/panel.js    |  21 ----
 .../src/app/components/side-panel.js          |   5 +-
 libs/remix-ui/abstract-panel/.babelrc         |  12 --
 libs/remix-ui/abstract-panel/.eslintrc.json   |  18 ---
 libs/remix-ui/abstract-panel/README.md        |   7 --
 libs/remix-ui/abstract-panel/package.json     |   4 -
 libs/remix-ui/abstract-panel/src/index.ts     |   1 -
 .../src/lib/abstract-panel-hoc.tsx            |  16 ---
 .../lib/remix-ui-abstract-panel.module.css    |  16 ---
 .../src/lib/remix-ui-abstract-panel.tsx       |  22 ----
 libs/remix-ui/abstract-panel/tsconfig.json    |  20 ----
 .../remix-ui/abstract-panel/tsconfig.lib.json |  13 ---
 .../src/lib/remix-ui-main-panel.tsx           | 110 +-----------------
 .../src/lib/remix-ui-side-panel.tsx           |   4 +
 nx.json                                       |   3 -
 tsconfig.base.json                            |   1 -
 workspace.json                                |  18 ---
 19 files changed, 35 insertions(+), 286 deletions(-)
 delete mode 100644 libs/remix-ui/abstract-panel/.babelrc
 delete mode 100644 libs/remix-ui/abstract-panel/.eslintrc.json
 delete mode 100644 libs/remix-ui/abstract-panel/README.md
 delete mode 100644 libs/remix-ui/abstract-panel/package.json
 delete mode 100644 libs/remix-ui/abstract-panel/src/index.ts
 delete mode 100644 libs/remix-ui/abstract-panel/src/lib/abstract-panel-hoc.tsx
 delete mode 100644 libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css
 delete mode 100644 libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx
 delete mode 100644 libs/remix-ui/abstract-panel/tsconfig.json
 delete mode 100644 libs/remix-ui/abstract-panel/tsconfig.lib.json

diff --git a/apps/remix-ide/src/app/components/hidden-panel.js b/apps/remix-ide/src/app/components/hidden-panel.js
index 77f67c6f4c..65a13be773 100644
--- a/apps/remix-ide/src/app/components/hidden-panel.js
+++ b/apps/remix-ide/src/app/components/hidden-panel.js
@@ -1,7 +1,7 @@
+import React from 'react' // eslint-disable-line
 import { AbstractPanel } from './panel'
 import * as packageJson from '../../../../../package.json'
 const csjs = require('csjs-inject')
-const yo = require('yo-yo')
 
 const css = csjs`
   .pluginsContainer {
@@ -20,12 +20,20 @@ const profile = {
 export class HiddenPanel extends AbstractPanel {
   constructor () {
     super(profile)
+    this.container = document.createElement('div')
   }
 
   render () {
-    return yo`
-      <div class=${css.pluginsContainer}>
-        ${this.view}
-      </div>`
+    return this.container
+  }
+
+  renderComponent () {
+    return ReactDOM.render(
+      <div class={css.pluginsContainer}>
+        {this.element}
+      </div>
+      ,
+      this.container
+    )
   }
 }
diff --git a/apps/remix-ide/src/app/components/main-panel.js b/apps/remix-ide/src/app/components/main-panel.js
index dd9269a27c..f1568228db 100644
--- a/apps/remix-ide/src/app/components/main-panel.js
+++ b/apps/remix-ide/src/app/components/main-panel.js
@@ -21,6 +21,10 @@ export class MainPanel extends AbstractPanel {
     this.config = config
   }
 
+  onActivation () {
+    this.renderComponent()
+  }
+
   focus (name) {
     this.emit('focusChanged', name)
     super.focus(name)
@@ -30,6 +34,12 @@ export class MainPanel extends AbstractPanel {
   addView (profile, view) {
     super.addView(profile, view)
     view.style.height = '100%'
+    this.renderComponent()
+  }
+
+  removeView (profile) {
+    super.removeView(profile)
+    this.renderComponent()
   }
 
   onActivation () {
@@ -43,7 +53,7 @@ export class MainPanel extends AbstractPanel {
   renderComponent () {
     ReactDOM.render(
       <RemixUiMainPanel
-        plugin={this}
+        plugin={this} contents={this.contents}
       />,
       this.mainelement
     )
diff --git a/apps/remix-ide/src/app/components/panel.js b/apps/remix-ide/src/app/components/panel.js
index daa211a121..113db9438d 100644
--- a/apps/remix-ide/src/app/components/panel.js
+++ b/apps/remix-ide/src/app/components/panel.js
@@ -1,6 +1,4 @@
 import React from 'react' // eslint-disable-line
-import ReactDOM from 'react-dom'
-import { RemixUiAbstractPanel } from '@remix-ui/abstract-panel' // eslint-disable-line
 import { EventEmitter } from 'events'
 const EventManager = require('../../lib/events')
 import { HostPlugin } from '@remixproject/engine-web' // eslint-disable-line
@@ -13,11 +11,6 @@ export class AbstractPanel extends HostPlugin {
     this.event = new EventManager()
     this.contents = {}
     this.active = undefined
-    this.element = document.createElement('div')
-  }
-
-  onActivation () {
-    this.renderComponent()
   }
 
   addView (profile, view) {
@@ -32,8 +25,6 @@ export class AbstractPanel extends HostPlugin {
 
     this.contents[profile.name] = view
     this.contents[profile.name].style.display = 'none'
-    this.element.appendChild(this.contents[profile.name])
-    this.renderComponent()
   }
 
   removeView (profile) {
@@ -49,9 +40,7 @@ export class AbstractPanel extends HostPlugin {
   remove (name) {
     const el = this.contents[name]
     delete this.contents[name]
-    if (el) el.parentElement.removeChild(el)
     if (name === this.active) this.active = undefined
-    this.renderComponent()
   }
 
   /**
@@ -64,7 +53,6 @@ export class AbstractPanel extends HostPlugin {
     if (this.active) {
       this.contents[this.active].style.display = 'none'
     }
-    console.log({ name, active: this.active, contents: this.contents })
     this.contents[name].style.display = 'flex'
     this.contents[name].style.paddingTop = '20%'
     this.contents[name].style.flexDirection = 'column'
@@ -75,13 +63,4 @@ export class AbstractPanel extends HostPlugin {
   focus (name) {
     this.showContent(name)
   }
-
-  renderComponent () {
-    ReactDOM.render(
-      <RemixUiAbstractPanel
-        plugin={this}
-      />,
-      this.element
-    )
-  }
 }
diff --git a/apps/remix-ide/src/app/components/side-panel.js b/apps/remix-ide/src/app/components/side-panel.js
index f39dd7963d..a57165b564 100644
--- a/apps/remix-ide/src/app/components/side-panel.js
+++ b/apps/remix-ide/src/app/components/side-panel.js
@@ -18,9 +18,7 @@ export class SidePanel extends AbstractPanel {
   constructor (appManager, verticalIcons) {
     super(sidePanel)
     this.appManager = appManager
-    // this.sideelement = this.element
     this.sideelement = document.createElement('div')
-    this.element = this.sideelement
     this.verticalIcons = verticalIcons
 
     // Toggle content
@@ -60,6 +58,7 @@ export class SidePanel extends AbstractPanel {
     super.removeView(profile)
     this.emit('pluginDisabled', profile.name)
     this.verticalIcons.unlinkContent(profile)
+    this.renderComponent()
   }
 
   addView (profile, view) {
@@ -84,7 +83,7 @@ export class SidePanel extends AbstractPanel {
   renderComponent () {
     ReactDOM.render(
       <RemixUiSidePanel
-        plugin={this}
+        plugin={this} contents={this.contents}
       />
       ,
       this.sideelement
diff --git a/libs/remix-ui/abstract-panel/.babelrc b/libs/remix-ui/abstract-panel/.babelrc
deleted file mode 100644
index ccae900be4..0000000000
--- a/libs/remix-ui/abstract-panel/.babelrc
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "presets": [
-    [
-      "@nrwl/react/babel",
-      {
-        "runtime": "automatic",
-        "useBuiltIns": "usage"
-      }
-    ]
-  ],
-  "plugins": []
-}
diff --git a/libs/remix-ui/abstract-panel/.eslintrc.json b/libs/remix-ui/abstract-panel/.eslintrc.json
deleted file mode 100644
index 50e59482cf..0000000000
--- a/libs/remix-ui/abstract-panel/.eslintrc.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {}
-    },
-    {
-      "files": ["*.ts", "*.tsx"],
-      "rules": {}
-    },
-    {
-      "files": ["*.js", "*.jsx"],
-      "rules": {}
-    }
-  ]
-}
diff --git a/libs/remix-ui/abstract-panel/README.md b/libs/remix-ui/abstract-panel/README.md
deleted file mode 100644
index afe064e666..0000000000
--- a/libs/remix-ui/abstract-panel/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# remix-ui-abstract-panel
-
-This library was generated with [Nx](https://nx.dev).
-
-## Running unit tests
-
-Run `nx test remix-ui-abstract-panel` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/remix-ui/abstract-panel/package.json b/libs/remix-ui/abstract-panel/package.json
deleted file mode 100644
index d2d23f51ff..0000000000
--- a/libs/remix-ui/abstract-panel/package.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "name": "@remix-ui/abstract-panel",
-  "version": "0.0.1"
-}
diff --git a/libs/remix-ui/abstract-panel/src/index.ts b/libs/remix-ui/abstract-panel/src/index.ts
deleted file mode 100644
index 2cc84aaa4c..0000000000
--- a/libs/remix-ui/abstract-panel/src/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './lib/remix-ui-abstract-panel';
diff --git a/libs/remix-ui/abstract-panel/src/lib/abstract-panel-hoc.tsx b/libs/remix-ui/abstract-panel/src/lib/abstract-panel-hoc.tsx
deleted file mode 100644
index 87fe6e225e..0000000000
--- a/libs/remix-ui/abstract-panel/src/lib/abstract-panel-hoc.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react'
-
-function AbstractPanelHOC (WrappedComponent: any) {
-    return (WrappedComponent: any) => {
-        const WithAbstractPanel = (props: any) => {
-            return (
-                <WrappedComponent
-                    {...props}
-                />
-            )
-        }
-        return WithAbstractPanel;
-    }
-}
-
-export default AbstractPanelHOC
\ No newline at end of file
diff --git a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css b/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css
deleted file mode 100644
index 8ab5f0b1c8..0000000000
--- a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.plugins        {
-  height: 100%;
-}
-.plugItIn       {
-  display        : none;
-  height         : 100%;
-}
-.plugItIn > div {
-  overflow-y     : auto;
-  overflow-x     : hidden;
-  height         : 100%;
-  width          : 100%;
-}
-.plugItIn.active     {
-  display        : block;
-}
\ No newline at end of file
diff --git a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx b/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx
deleted file mode 100644
index 629543aa5a..0000000000
--- a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, { useEffect, useState } from 'react' // eslint-disable-line
-import './remix-ui-abstract-panel.module.css';
-import parse from 'html-react-parser'
-
-/* eslint-disable-next-line */
-export interface RemixUiAbstractPanelProps {
-  reactView: any,
-  plugin: any
-}
-
-export function RemixUiAbstractPanel(props: RemixUiAbstractPanelProps) {
-
-  const [loading, setLoading] = useState(false);
-
-  return (
-    <div id="plugins">
-      
-    </div>
-  )
-}
-
-export default RemixUiAbstractPanel;
diff --git a/libs/remix-ui/abstract-panel/tsconfig.json b/libs/remix-ui/abstract-panel/tsconfig.json
deleted file mode 100644
index 8bd701c578..0000000000
--- a/libs/remix-ui/abstract-panel/tsconfig.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "extends": "../../../tsconfig.base.json",
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "allowJs": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    }
-  ]
-}
diff --git a/libs/remix-ui/abstract-panel/tsconfig.lib.json b/libs/remix-ui/abstract-panel/tsconfig.lib.json
deleted file mode 100644
index b560bc4dec..0000000000
--- a/libs/remix-ui/abstract-panel/tsconfig.lib.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "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"]
-}
diff --git a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx
index 376841d2f3..dd3cd5820b 100644
--- a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx
+++ b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx
@@ -1,117 +1,17 @@
-import React, { useEffect, useState } from 'react' // eslint-disable-line
+import React, { useEffect, useState, useRef } from 'react' // eslint-disable-line
 import './remix-ui-main-panel.module.css';
 
 /* eslint-disable-next-line */
 export interface RemixUiMainPanelProps {
   plugin: any
+  contents: [any]
 }
 
 export const RemixUiMainPanel = (props: RemixUiMainPanelProps) =>  {
-
-   const [invertNumber, setInvertNumber] = useState(0)
-   
-   const handlePluginCall = (pluginName: string) => {
-      props.plugin.call('menuicons', 'select', pluginName)
-      props.plugin.call(pluginName, pluginName, '')
-   }
-
-
-
+  const dom = useRef(null)
   return (
-    <div data-id="landingPageHomeContainer" className="homeContainer d-flex" style={{ height: "100%", width: "100%", border: "0px", display: "block" }}>
-            <div className="mainContent_2A2Ew bg-light">
-          <div className="d-flex justify-content-between">
-             <div className="d-flex flex-column">
-                <div className="border-bottom d-flex justify-content-between clearfix py-3 mb-4">
-                   <div className="mx-4 w-100 d-flex">
-                      <img src="assets/img/guitarRemiCroped.webp" className="m-4 logoImg_2A2Ew" style={{ filter:  `invert(${invertNumber})`}}/>
-                      <audio id="remiAudio" src="assets/audio/remiGuitar-single-power-chord-A-minor.wav"></audio>
-                      <div className="w-80 pl-5 ml-5">
-                         <h5 className="mb-1">Quicklinks</h5>
-                         <a target="__blank" href="https://medium.com/remix-ide/migrating-files-to-workspaces-8e34737c751c?source=friends_link&amp;sk=b75cfd9093aa23c78be13cce49e4a5e8" className="text_2A2Ew mr-1">Guide</a>for migrating the old File System
-                         <p className="font-weight-bold mb-0 py-1">Migration tools:</p>
-                         <li className="pl-1">
-                            <span className="pl-0"><u className="text_2A2Ew pr-1">Basic migration</u></span>
-                         </li>
-                         <li className="pl-1"><u className="text_2A2Ew pr-1">Download all Files</u> as a backup zip</li>
-                         <li className="pl-1"><u className="text_2A2Ew pr-1">Restore files</u>from backup zip</li>
-                         <p className="font-weight-bold mb-0 mt-2">Help:</p>
-                         <div className="d-flex flex-column mt-1 pl-0"><a target="__blank" href="https://gitter.im/ethereum/remix" className="text_2A2Ew mx-1">Gitter channel</a> <a target="__blank" href="https://github.com/ethereum/remix-project/issues" className="text_2A2Ew mx-1">Report on Github</a></div>
-                      </div>
-                   </div>
-                </div>
-                <div data-id="landingPageHpSections" className="row hpSections_2A2Ew mx-4">
-                   <div className="ml-3">
-                      <div className="plugins mb-5">
-                         <h4>Featured Plugins</h4>
-                         <div className="d-flex flex-row pt-2">
-                           <button data-id="landingPageStartSolidity" className="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center envButton_2A2Ew" onClick = {() => handlePluginCall('solidity') }>
-                             <img src="assets/img/solidityLogo.webp" className="m-2 align-self-center envLogo_2A2Ew text-dark" alt='Solidity' style={{ filter: `invert(${invertNumber})` }}/>
-                             <label className="text-uppercase text-dark cursorStyle_2A2Ew">Solidity</label>
-                           </button>
-                           <button data-id="landingPageStartSolidity" className="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center envButton_2A2Ew" onClick={() => handlePluginCall('optimism-compiler') }> 
-                             <img id="optimismLogo" src="assets/img/optimismLogo.webp" className="m-2 align-self-center envLogo_2A2Ew" style={{ filter: `invert(${invertNumber})` }}/>
-                             <label className="text-uppercase text-dark cursorStyle_2A2Ew">Optimism</label>
-                           </button>
-                           <button data-id="landingPageStartSolidity" className="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center envButton_2A2Ew" onClick={() => handlePluginCall('LearnEth') }>
-                             <img id="learnEthLogo" src="assets/img/learnEthLogo.webp" className="m-2 align-self-center envLogo_2A2Ew" style={{ filter: `invert(${invertNumber})` }}/>
-                               <label className="text-uppercase text-dark cursorStyle_2A2Ew">LearnEth</label>
-                            </button>
-                            <button data-id="landingPageStartSolidity" className="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center envButton_2A2Ew" onClick={() => handlePluginCall('solhint') }>
-                              <img id="solhintLogo" src="assets/img/solhintLogo.png" className="m-2 align-self-center envLogo_2A2Ew" style={{ filter: `invert(${invertNumber})` }}/>
-                              <label className="text-uppercase text-dark cursorStyle_2A2Ew">Solhint linter</label>
-                            </button><button data-id="landingPageStartSolidity" className="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center envButton_2A2Ew" onClick={() => handlePluginCall('source-verification') }>
-                              <img id="sourcifyLogo" src="assets/img/sourcifyLogo.webp" className="m-2 align-self-center envLogo_2A2Ew" style={{ filter: `invert(${invertNumber})` }}/>
-                                <label className="text-uppercase text-dark cursorStyle_2A2Ew">Sourcify</label>
-                            </button> 
-                            <button data-id="landingPageStartSolidity" className="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center envButton_2A2Ew" onClick={() => handlePluginCall('pluginManager') }>
-                              <img id="moreLogo" src="assets/img/moreLogo.webp" className="m-2 align-self-center envLogo_2A2Ew" style={{ filter: `invert(${invertNumber})` }}/>
-                                <label className="text-uppercase text-dark cursorStyle_2A2Ew">More</label>
-                            </button>
-                          </div>
-                      </div>
-                      <div className="d-flex">
-                         <div className="file">
-                            <h4>File</h4>
-                            <p className="mb-1"><i className="mr-1 far fa-file"></i> <span className="ml-1 mb-1 text_2A2Ew">New File</span></p>
-                            <p className="mb-1"><i className="mr-1 far fa-file-alt"></i> <label className="ml-1 labelIt_2A2Ew bigLabelSize_2A2Ew text_2A2Ew">Open Files <input title="open file" type="file" multiple /></label></p>
-                            <p className="mb-1"><i className="far fa-hdd"></i> <span className="ml-1 text_2A2Ew">Connect to Localhost</span></p>
-                            <p className="mt-3 mb-0"><label>LOAD FROM:</label></p>
-                            <div className="btn-group"><button data-id="landingPageImportFromGistButton" className="btn mr-1 btn-secondary">Gist</button><button className="btn mx-1 btn-secondary">GitHub</button><button className="btn mx-1 btn-secondary">Ipfs</button><button className="btn mx-1 btn-secondary">https</button></div>
-                            {/* <!-- end of btn-group --> */}
-                         </div>
-                         {/* <!-- end of div.file --> */}
-                         <div className="ml-4 pl-4">
-                            <h4>Resources</h4>
-                            <p className="mb-1"><i className="mr-1 fas fa-book"></i> <a target="__blank" href="https://remix-ide.readthedocs.io/en/latest/#" className="text_2A2Ew">Documentation</a></p>
-                            <p className="mb-1"><i className="mr-1 fab fa-gitter"></i> <a target="__blank" href="https://gitter.im/ethereum/remix" className="text_2A2Ew">Gitter channel</a></p>
-                            <p className="mb-1"><img id="remixHhomeWebsite" src="assets/img/remixLogo.webp" className="mr-1 image_2A2Ew" style={{ filter: `invert(${invertNumber})` }}/><a target="__blank" href="https://remix-project.org" className="text_2A2Ew">Featuring website</a></p>
-                            <p className="mb-1"><i className="fab fa-ethereum image_2A2Ew"></i> <span className="text_2A2Ew">Old experience</span></p>
-                         </div>
-                      </div>
-                   </div>
-                </div>
-                {/* <!-- end of hpSections --> */}
-             </div>
-             <div className="d-flex flex-column rightPanel_2A2Ew">
-                <div id="remixIDEMediaPanelsTitle" className="d-flex pr-3 py-2 align-self-end"><button id="remixIDEHomeTwitterbtn" className="btn-info p-2 m-1 border rounded-circle mediaBadge_2A2Ew fab fa-twitter"></button><button id="remixIDEHomeMediumbtn" className="btn-danger p-2 m-1 border rounded-circle mediaBadge_2A2Ew fab fa-medium"></button></div>
-                <div id="remixIDEMediaPanels" className="mr-3 d-flex bg-light panels_2A2Ew">
-                   <div id="remixIDE_MediumBlock" className="p-2 mx-0 mb-0 d-none remixHomeMedia_2A2Ew" style={{ maxHeight: "514px" }}>
-                      <div id="medium-widget" className="p-3 media_2A2Ew">
-                         <div id="retainable-rss-embed" data-rss="https://medium.com/feed/remix-ide" data-maxcols="1" data-layout="grid" data-poststyle="external" data-readmore="More..." data-buttonclassName="btn mb-3" data-offset="-100"> -</div>
-                      </div>
-                   </div>
-                   <div id="remixIDE_TwitterBlock" className="p-2 mx-0 mb-0 d-none remixHomeMedia_2A2Ew" style={{ maxHeight: "514px" }}>
-                      <div className="px-2 media_2A2Ew">
-                         <a data-width="350" data-theme="dark" data-chrome="nofooter noheader transparent" data-tweet-limit="8" href="https://twitter.com/EthereumRemix" className="twitter-timeline"></a>
-                         {/* <script async="async" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> */}
-                      </div>
-                   </div>
-                </div>
-             </div>
-          </div>
-       </div>
-    </div>
+   <div className="pluginsContainer" data-id="mainPanelPluginsContainer" id='mainPanelPluginsContainer-id' ref={dom} >
+   </div>
   )
 }
 
diff --git a/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx b/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx
index 129a3068b1..bdccedc6fc 100644
--- a/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx
+++ b/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx
@@ -5,6 +5,7 @@ import './remix-ui-side-panel.module.css';
 /* eslint-disable-next-line */
 export interface RemixUiSidePanelProps {
   plugin: any
+  contents: any
 }
 
 export function RemixUiSidePanel(props: RemixUiSidePanelProps) {
@@ -68,6 +69,9 @@ export function RemixUiSidePanel(props: RemixUiSidePanelProps) {
               zIndex: "999",
             }} >
               {renderHeader()}
+              <div className="pluginsContainer">
+                {props.contents}
+              </div>
             </section>
   );
 }
diff --git a/nx.json b/nx.json
index decbde03bd..bf26ace9d8 100644
--- a/nx.json
+++ b/nx.json
@@ -142,9 +142,6 @@
     "remix-ui-main-panel": {
       "tags": []
     },
-    "remix-ui-abstract-panel": {
-      "tags": []
-    },
     "remix-ui-side-panel": {
       "tags": []
     }
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 8c956056c7..dd7f9d7c37 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -69,7 +69,6 @@
       "@remix-ui/helper": ["libs/remix-ui/helper/src/index.ts"],
       "@remix-ui/vertical-icons-panel": ["libs/remix-ui/vertical-icons-panel/src/index.ts"],
       "@remix-ui/main-panel": ["libs/remix-ui/main-panel/src/index.ts"],
-      "@remix-ui/abstract-panel": ["libs/remix-ui/abstract-panel/src/index.ts"],
       "@remix-ui/side-panel": ["libs/remix-ui/side-panel/src/index.ts"]
     }
   },
diff --git a/workspace.json b/workspace.json
index c6b94ddad8..76e06a7334 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1150,24 +1150,6 @@
         }
       }
     },
-    "remix-ui-abstract-panel": {
-      "root": "libs/remix-ui/abstract-panel",
-      "sourceRoot": "libs/remix-ui/abstract-panel/src",
-      "projectType": "library",
-      "architect": {
-        "lint": {
-          "builder": "@nrwl/linter:lint",
-          "options": {
-            "linter": "eslint",
-            "tsConfig": ["libs/remix-ui/abstract-panel/tsconfig.lib.json"],
-            "exclude": [
-              "**/node_modules/**",
-              "!libs/remix-ui/abstract-panel/**/*"
-            ]
-          }
-        }
-      }
-    },
     "remix-ui-side-panel": {
       "root": "libs/remix-ui/side-panel",
       "sourceRoot": "libs/remix-ui/side-panel/src",

From d7745ef572ddb673d3948850a37ff3967c956cd7 Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Thu, 23 Dec 2021 08:48:59 +0100
Subject: [PATCH 014/168] refactor

---
 apps/remix-ide/src/app/components/panel.js    |  11 +-
 .../components/plugin-manager-component.js    |   2 +-
 .../src/app/components/side-panel.js          |   3 +-
 .../src/lib/remix-ui-side-panel.tsx           |  63 +-
 .../side-panel/src/lib/sidepanel-element.tsx  |  16 +
 package-lock.json                             | 560 +++++++++---------
 6 files changed, 315 insertions(+), 340 deletions(-)
 create mode 100644 libs/remix-ui/side-panel/src/lib/sidepanel-element.tsx

diff --git a/apps/remix-ide/src/app/components/panel.js b/apps/remix-ide/src/app/components/panel.js
index 113db9438d..8ba0df1d1d 100644
--- a/apps/remix-ide/src/app/components/panel.js
+++ b/apps/remix-ide/src/app/components/panel.js
@@ -14,17 +14,10 @@ export class AbstractPanel extends HostPlugin {
   }
 
   addView (profile, view) {
+    console.log(profile, view)
     if (this.contents[profile.name]) throw new Error(`Plugin ${profile.name} already rendered`)
-    view.style.height = '100%'
-    view.style.width = '100%'
-    view.style.border = '0'
-
-    if (view.tagName === 'IFRAME') {
-      view.style.display = 'block'
-    }
-
     this.contents[profile.name] = view
-    this.contents[profile.name].style.display = 'none'
+    //this.contents[profile.name].style.display = 'none'
   }
 
   removeView (profile) {
diff --git a/apps/remix-ide/src/app/components/plugin-manager-component.js b/apps/remix-ide/src/app/components/plugin-manager-component.js
index e86a62da92..f877e62e8e 100644
--- a/apps/remix-ide/src/app/components/plugin-manager-component.js
+++ b/apps/remix-ide/src/app/components/plugin-manager-component.js
@@ -96,7 +96,7 @@ class PluginManagerComponent extends ViewPlugin {
   }
 
   render () {
-    return this.htmlElement
+    return <div>test</div>
   }
 
   getAndFilterPlugins (filter) {
diff --git a/apps/remix-ide/src/app/components/side-panel.js b/apps/remix-ide/src/app/components/side-panel.js
index a57165b564..1ec66c16cf 100644
--- a/apps/remix-ide/src/app/components/side-panel.js
+++ b/apps/remix-ide/src/app/components/side-panel.js
@@ -18,7 +18,7 @@ export class SidePanel extends AbstractPanel {
   constructor (appManager, verticalIcons) {
     super(sidePanel)
     this.appManager = appManager
-    this.sideelement = document.createElement('div')
+    this.sideelement = document.createElement('span')
     this.verticalIcons = verticalIcons
 
     // Toggle content
@@ -81,6 +81,7 @@ export class SidePanel extends AbstractPanel {
   }
 
   renderComponent () {
+    console.log('render side panel')
     ReactDOM.render(
       <RemixUiSidePanel
         plugin={this} contents={this.contents}
diff --git a/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx b/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx
index bdccedc6fc..797a510a58 100644
--- a/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx
+++ b/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react' // eslint-disable-line
-import parse from 'html-react-parser'
 import './remix-ui-side-panel.module.css';
+import SidePanelElement from './sidepanel-element';
 
 /* eslint-disable-next-line */
 export interface RemixUiSidePanelProps {
@@ -18,13 +18,13 @@ export function RemixUiSidePanel(props: RemixUiSidePanelProps) {
   const [name, setName] = useState(' - ')
 
   useEffect(() => {
-    console.log()
-  }, [name])
+    console.log('load')
+  }, [])
 
-  const getProfile  = async () => {
-    console.log({active: props.plugin.active})
+  const getProfile = async () => {
+    console.log({ active: props.plugin.active })
     if (props.plugin.active) {
-      const profile =  await props.plugin.appManager.getProfile(props.plugin.active)
+      const profile = await props.plugin.appManager.getProfile(props.plugin.active)
       setProfileDocsLink(profile.documentation)
       profile.displayName ? setName(profile.displayName) : setName(profile.name)
       profile.documentation ? setDockLink(true) : setDockLink(false)
@@ -36,43 +36,38 @@ export function RemixUiSidePanel(props: RemixUiSidePanelProps) {
       // Beta
       if (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) {
         setVersionWarningBeta(true)
-      } else{
+      } else {
         setVersionWarningBeta(false)
       }
     }
   }
 
-  const renderHeader =  () => {
+  const renderHeader = () => {
     getProfile()
-   return (
-    <header style={{
-      display: 'flex',
-    alignItems: 'center',
-    padding: '16px 24px 15px',
-    justifyContent: 'space-between',
-    }}>
-    <h6 className="swapitTitle" data-id="sidePanelSwapitTitle">{name}</h6>
-    {dockLink ? (<a href={profileDocsLink} className="titleInfo" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>) : ''}
-    {versionWarning ? (<small title="Version Alpha" className="badge-light versionBadge">alpha</small>) : null }
-    {versionWarningBeta ? (<small title="Version Beta" className="badge-light versionBadge">beta</small>) : null}
-  </header>
-   )
+    return (
+      <header className='swapitHeader'>
+        <h6 className="swapitTitle" data-id="sidePanelSwapitTitle">{name}</h6>
+        {dockLink ? (<a href={profileDocsLink} className="titleInfo" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>) : ''}
+        {versionWarning ? (<small title="Version Alpha" className="badge-light versionBadge">alpha</small>) : null}
+        {versionWarningBeta ? (<small title="Version Beta" className="badge-light versionBadge">beta</small>) : null}
+      </header>
+    )
   }
 
-
   return (
-            <section style={{
-              position: "fixed",
-              height: "50px",
-              width: "320px",
-              backgroundColor: "var(--light)",
-              zIndex: "999",
-            }} >
-              {renderHeader()}
-              <div className="pluginsContainer">
-                {props.contents}
-              </div>
-            </section>
+    <section className='panel plugin-manager'>
+      {renderHeader()}
+      <div className="pluginsContainer">
+        {Object.values(props.contents).map((x) => {
+          if (React.isValidElement(x)) {
+            return x
+          } else {
+            return <SidePanelElement render={x} />
+          }
+        })}
+      </div>
+    </section>
+
   );
 }
 
diff --git a/libs/remix-ui/side-panel/src/lib/sidepanel-element.tsx b/libs/remix-ui/side-panel/src/lib/sidepanel-element.tsx
new file mode 100644
index 0000000000..8b43d0f35c
--- /dev/null
+++ b/libs/remix-ui/side-panel/src/lib/sidepanel-element.tsx
@@ -0,0 +1,16 @@
+import React, { useEffect, useRef, useState } from 'react' // eslint-disable-line
+
+const SidePanelElement = (props: any) => {
+    const sidePanelRef = useRef(null)
+    useEffect(() => {
+        if (sidePanelRef.current) {
+          if (props.render) {
+            sidePanelRef.current.appendChild(props.render)
+          }
+        }
+      }, [])
+
+      return <div ref={sidePanelRef}></div>
+}
+
+export default SidePanelElement
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 4994dbcf9a..b4dc857e20 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1517,6 +1517,14 @@
       "requires": {
         "core-js": "^2.6.5",
         "regenerator-runtime": "^0.13.4"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+          "dev": true
+        }
       }
     },
     "@babel/preset-env": {
@@ -2991,7 +2999,7 @@
     "@evocateur/libnpmaccess": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@evocateur/libnpmaccess/-/libnpmaccess-3.1.2.tgz",
-      "integrity": "sha512-KSCAHwNWro0CF2ukxufCitT9K5LjL/KuMmNzSu8wuwN2rjyKHD8+cmOsiybK+W5hdnwc5M1SmRlVCaMHQo+3rg==",
+      "integrity": "sha1-7Pf2zmsATp+UKwmNkiAL5KSxyEU=",
       "dev": true,
       "requires": {
         "@evocateur/npm-registry-fetch": "^4.0.0",
@@ -3004,13 +3012,13 @@
         "aproba": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
-          "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
+          "integrity": "sha1-UlILiuW1aSFbNU78DKo/4eRaitw=",
           "dev": true
         },
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -3022,7 +3030,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
           "dev": true
         }
       }
@@ -3030,7 +3038,7 @@
     "@evocateur/libnpmpublish": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@evocateur/libnpmpublish/-/libnpmpublish-1.2.2.tgz",
-      "integrity": "sha512-MJrrk9ct1FeY9zRlyeoyMieBjGDG9ihyyD9/Ft6MMrTxql9NyoEx2hw9casTIP4CdqEVu+3nQ2nXxoJ8RCXyFg==",
+      "integrity": "sha1-Vd8J0tyhNq+6nIjHWconIZjbnxo=",
       "dev": true,
       "requires": {
         "@evocateur/npm-registry-fetch": "^4.0.0",
@@ -3047,13 +3055,13 @@
         "aproba": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
-          "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
+          "integrity": "sha1-UlILiuW1aSFbNU78DKo/4eRaitw=",
           "dev": true
         },
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -3065,7 +3073,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
           "dev": true
         },
         "ssri": {
@@ -3082,7 +3090,7 @@
     "@evocateur/npm-registry-fetch": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@evocateur/npm-registry-fetch/-/npm-registry-fetch-4.0.0.tgz",
-      "integrity": "sha512-k1WGfKRQyhJpIr+P17O5vLIo2ko1PFLKwoetatdduUSt/aQ4J2sJrJwwatdI5Z3SiYk/mRH9S3JpdmMFd/IK4g==",
+      "integrity": "sha1-jEw4dm2NMtMgD8sKg/BktXNl7WY=",
       "dev": true,
       "requires": {
         "JSONStream": "^1.3.4",
@@ -3106,7 +3114,7 @@
         "agentkeepalive": {
           "version": "3.5.2",
           "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-3.5.2.tgz",
-          "integrity": "sha512-e0L/HNe6qkQ7H19kTlRRqUibEAwDK5AFk6y3PtMsuut2VAH6+Q4xZml1tNDJD7kSAyqmbG/K08K5WEJYtUrSlQ==",
+          "integrity": "sha1-oROSTdP6JKC8O3gQjEUMKr7gD2c=",
           "dev": true,
           "requires": {
             "humanize-ms": "^1.2.1"
@@ -3153,7 +3161,7 @@
         "http-cache-semantics": {
           "version": "3.8.1",
           "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz",
-          "integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==",
+          "integrity": "sha1-ObDhat2bYFvwqe89nar0hDtMrNI=",
           "dev": true
         },
         "http-proxy-agent": {
@@ -3169,7 +3177,7 @@
         "https-proxy-agent": {
           "version": "2.2.4",
           "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz",
-          "integrity": "sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==",
+          "integrity": "sha1-TuenN6vZJniik9mzShr00NCMeHs=",
           "dev": true,
           "requires": {
             "agent-base": "^4.3.0",
@@ -3179,7 +3187,7 @@
         "make-fetch-happen": {
           "version": "5.0.2",
           "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-5.0.2.tgz",
-          "integrity": "sha512-07JHC0r1ykIoruKO8ifMXu+xEU8qOXDFETylktdug6vJDACnP+HKevOu3PXyNPzFyTSlz8vrBYlBO1JZRe8Cag==",
+          "integrity": "sha1-qoOHEE8mh+3KAchofuRQE9AtGb0=",
           "dev": true,
           "requires": {
             "agentkeepalive": "^3.4.1",
@@ -3204,7 +3212,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -3232,7 +3240,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
           "dev": true
         },
         "socks": {
@@ -3280,7 +3288,7 @@
     "@evocateur/pacote": {
       "version": "9.6.5",
       "resolved": "https://registry.npmjs.org/@evocateur/pacote/-/pacote-9.6.5.tgz",
-      "integrity": "sha512-EI552lf0aG2nOV8NnZpTxNo2PcXKPmDbF9K8eCBFQdIZwHNGN/mi815fxtmUMa2wTa1yndotICIDt/V0vpEx2w==",
+      "integrity": "sha1-M94yuiELbxfCDrq01JfvxnVfSuU=",
       "dev": true,
       "requires": {
         "@evocateur/npm-registry-fetch": "^4.0.0",
@@ -3326,7 +3334,7 @@
         "agentkeepalive": {
           "version": "3.5.2",
           "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-3.5.2.tgz",
-          "integrity": "sha512-e0L/HNe6qkQ7H19kTlRRqUibEAwDK5AFk6y3PtMsuut2VAH6+Q4xZml1tNDJD7kSAyqmbG/K08K5WEJYtUrSlQ==",
+          "integrity": "sha1-oROSTdP6JKC8O3gQjEUMKr7gD2c=",
           "dev": true,
           "requires": {
             "humanize-ms": "^1.2.1"
@@ -3373,7 +3381,7 @@
         "http-cache-semantics": {
           "version": "3.8.1",
           "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz",
-          "integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==",
+          "integrity": "sha1-ObDhat2bYFvwqe89nar0hDtMrNI=",
           "dev": true
         },
         "http-proxy-agent": {
@@ -3389,7 +3397,7 @@
         "https-proxy-agent": {
           "version": "2.2.4",
           "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz",
-          "integrity": "sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==",
+          "integrity": "sha1-TuenN6vZJniik9mzShr00NCMeHs=",
           "dev": true,
           "requires": {
             "agent-base": "^4.3.0",
@@ -3399,7 +3407,7 @@
         "make-fetch-happen": {
           "version": "5.0.2",
           "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-5.0.2.tgz",
-          "integrity": "sha512-07JHC0r1ykIoruKO8ifMXu+xEU8qOXDFETylktdug6vJDACnP+HKevOu3PXyNPzFyTSlz8vrBYlBO1JZRe8Cag==",
+          "integrity": "sha1-qoOHEE8mh+3KAchofuRQE9AtGb0=",
           "dev": true,
           "requires": {
             "agentkeepalive": "^3.4.1",
@@ -3424,7 +3432,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -3436,7 +3444,7 @@
         "npm-packlist": {
           "version": "1.4.8",
           "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz",
-          "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==",
+          "integrity": "sha1-Vu5swTW5+YrT1Rwcldoiu7my7z4=",
           "dev": true,
           "requires": {
             "ignore-walk": "^3.0.1",
@@ -3447,7 +3455,7 @@
         "npm-pick-manifest": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/npm-pick-manifest/-/npm-pick-manifest-3.0.2.tgz",
-          "integrity": "sha512-wNprTNg+X5nf+tDi+hbjdHhM4bX+mKqv6XmPh7B5eG+QY9VARfQPfCEH013H5GqfNj6ee8Ij2fg8yk0mzps1Vw==",
+          "integrity": "sha1-9Nnl/UviFT5fTl+be+jcQZqZq7c=",
           "dev": true,
           "requires": {
             "figgy-pudding": "^3.5.1",
@@ -3474,7 +3482,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
           "dev": true
         },
         "socks": {
@@ -5204,7 +5212,7 @@
     "@lerna/add": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/add/-/add-3.21.0.tgz",
-      "integrity": "sha512-vhUXXF6SpufBE1EkNEXwz1VLW03f177G9uMOFMQkp6OJ30/PWg4Ekifuz9/3YfgB2/GH8Tu4Lk3O51P2Hskg/A==",
+      "integrity": "sha1-JwB73nHMewopaas8LwrkFXi0V3s=",
       "dev": true,
       "requires": {
         "@evocateur/pacote": "^9.6.3",
@@ -5222,7 +5230,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -5234,7 +5242,7 @@
             "semver": {
               "version": "5.7.1",
               "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+              "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
               "dev": true
             }
           }
@@ -5250,7 +5258,7 @@
     "@lerna/bootstrap": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/bootstrap/-/bootstrap-3.21.0.tgz",
-      "integrity": "sha512-mtNHlXpmvJn6JTu0KcuTTPl2jLsDNud0QacV/h++qsaKbhAaJr/FElNZ5s7MwZFUM3XaDmvWzHKaszeBMHIbBw==",
+      "integrity": "sha1-vNG2Ub5bCXCyDY+uBMhkVIEjrtY=",
       "dev": true,
       "requires": {
         "@lerna/command": "3.21.0",
@@ -5281,7 +5289,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -5293,7 +5301,7 @@
             "semver": {
               "version": "5.7.1",
               "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+              "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
               "dev": true
             }
           }
@@ -5309,7 +5317,7 @@
     "@lerna/changed": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/changed/-/changed-3.21.0.tgz",
-      "integrity": "sha512-hzqoyf8MSHVjZp0gfJ7G8jaz+++mgXYiNs9iViQGA8JlN/dnWLI5sWDptEH3/B30Izo+fdVz0S0s7ydVE3pWIw==",
+      "integrity": "sha1-EI4V9nm/4HevUA9YJIxjTxBE6gs=",
       "dev": true,
       "requires": {
         "@lerna/collect-updates": "3.20.0",
@@ -5321,7 +5329,7 @@
     "@lerna/check-working-tree": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/check-working-tree/-/check-working-tree-3.16.5.tgz",
-      "integrity": "sha512-xWjVBcuhvB8+UmCSb5tKVLB5OuzSpw96WEhS2uz6hkWVa/Euh1A0/HJwn2cemyK47wUrCQXtczBUiqnq9yX5VQ==",
+      "integrity": "sha1-tPiuYbtFI1Yd+5+PjYdN1Gu0S6o=",
       "dev": true,
       "requires": {
         "@lerna/collect-uncommitted": "3.16.5",
@@ -5332,7 +5340,7 @@
     "@lerna/child-process": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/child-process/-/child-process-3.16.5.tgz",
-      "integrity": "sha512-vdcI7mzei9ERRV4oO8Y1LHBZ3A5+ampRKg1wq5nutLsUA4mEBN6H7JqjWOMY9xZemv6+kATm2ofjJ3lW5TszQg==",
+      "integrity": "sha1-OPo8GAZKpKwHVK2AEUd2p7NqabI=",
       "dev": true,
       "requires": {
         "chalk": "^2.3.1",
@@ -5343,7 +5351,7 @@
     "@lerna/clean": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/clean/-/clean-3.21.0.tgz",
-      "integrity": "sha512-b/L9l+MDgE/7oGbrav6rG8RTQvRiZLO1zTcG17zgJAAuhlsPxJExMlh2DFwJEVi2les70vMhHfST3Ue1IMMjpg==",
+      "integrity": "sha1-wLRrUwDMPa4s2jvsFLgDCC2jhW0=",
       "dev": true,
       "requires": {
         "@lerna/command": "3.21.0",
@@ -5367,7 +5375,7 @@
     "@lerna/cli": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/cli/-/cli-3.18.5.tgz",
-      "integrity": "sha512-erkbxkj9jfc89vVs/jBLY/fM0I80oLmJkFUV3Q3wk9J3miYhP14zgVEBsPZY68IZlEjT6T3Xlq2xO1AVaatHsA==",
+      "integrity": "sha1-yQxGFUL801ttWwFaKQ+w2/tB0kI=",
       "dev": true,
       "requires": {
         "@lerna/global-options": "3.13.0",
@@ -5379,13 +5387,13 @@
         "ansi-regex": {
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "integrity": "sha1-i5+PCM8ay4Q3Vqg5yox+MWjFGZc=",
           "dev": true
         },
         "cliui": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
-          "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
+          "integrity": "sha1-3u/P2y6AB4SqNPRvoI4GhRx7u8U=",
           "dev": true,
           "requires": {
             "string-width": "^3.1.0",
@@ -5402,7 +5410,7 @@
         "find-up": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "integrity": "sha1-SRafHXmTQwZG2mHsxa41XCHJe3M=",
           "dev": true,
           "requires": {
             "locate-path": "^3.0.0"
@@ -5417,7 +5425,7 @@
         "locate-path": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "integrity": "sha1-2+w7OrdZdYBxtY/ln8QYca8hQA4=",
           "dev": true,
           "requires": {
             "p-locate": "^3.0.0",
@@ -5427,7 +5435,7 @@
         "p-limit": {
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+          "integrity": "sha1-PdM8ZHohT9//2DWTPrCG2g3CHbE=",
           "dev": true,
           "requires": {
             "p-try": "^2.0.0"
@@ -5436,7 +5444,7 @@
         "p-locate": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "integrity": "sha1-Mi1poFwCZLJZl9n0DNiokasAZKQ=",
           "dev": true,
           "requires": {
             "p-limit": "^2.0.0"
@@ -5445,13 +5453,13 @@
         "p-try": {
           "version": "2.2.0",
           "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-          "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+          "integrity": "sha1-yyhoVA4xPWHeWPr741zpAE1VQOY=",
           "dev": true
         },
         "string-width": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "integrity": "sha1-InZ74htirxCBV0MG9prFG2IgOWE=",
           "dev": true,
           "requires": {
             "emoji-regex": "^7.0.1",
@@ -5462,7 +5470,7 @@
         "strip-ansi": {
           "version": "5.2.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "integrity": "sha1-jJpTb+tq/JYr36WxBKUJHBrZwK4=",
           "dev": true,
           "requires": {
             "ansi-regex": "^4.1.0"
@@ -5471,7 +5479,7 @@
         "wrap-ansi": {
           "version": "5.1.0",
           "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
-          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+          "integrity": "sha1-H9H2cjXVttD+54EFYAG/tpTAOwk=",
           "dev": true,
           "requires": {
             "ansi-styles": "^3.2.0",
@@ -5482,7 +5490,7 @@
         "yargs": {
           "version": "14.2.3",
           "resolved": "https://registry.npmjs.org/yargs/-/yargs-14.2.3.tgz",
-          "integrity": "sha512-ZbotRWhF+lkjijC/VhmOT9wSgyBQ7+zr13+YLkhfsSiTriYsMzkTUFP18pFhWwBeMa5gUc1MzbhrO6/VB7c9Xg==",
+          "integrity": "sha1-Ghw+3O0a+yov6jNgS8bR2NaIpBQ=",
           "dev": true,
           "requires": {
             "cliui": "^5.0.0",
@@ -5513,7 +5521,7 @@
     "@lerna/collect-uncommitted": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/collect-uncommitted/-/collect-uncommitted-3.16.5.tgz",
-      "integrity": "sha512-ZgqnGwpDZiWyzIQVZtQaj9tRizsL4dUOhuOStWgTAw1EMe47cvAY2kL709DzxFhjr6JpJSjXV5rZEAeU3VE0Hg==",
+      "integrity": "sha1-pJTWGqwxzceuxLvlLJZVAnQTLmM=",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -5525,7 +5533,7 @@
     "@lerna/collect-updates": {
       "version": "3.20.0",
       "resolved": "https://registry.npmjs.org/@lerna/collect-updates/-/collect-updates-3.20.0.tgz",
-      "integrity": "sha512-qBTVT5g4fupVhBFuY4nI/3FSJtQVcDh7/gEPOpRxoXB/yCSnT38MFHXWl+y4einLciCjt/+0x6/4AG80fjay2Q==",
+      "integrity": "sha1-YvnXa6IaJbfZ+/McAt6IdEpWS9E=",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -5538,7 +5546,7 @@
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
+          "integrity": "sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q=",
           "dev": true
         }
       }
@@ -5546,7 +5554,7 @@
     "@lerna/command": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/command/-/command-3.21.0.tgz",
-      "integrity": "sha512-T2bu6R8R3KkH5YoCKdutKv123iUgUbW8efVjdGCDnCMthAQzoentOJfDeodBwn0P2OqCl3ohsiNVtSn9h78fyQ==",
+      "integrity": "sha1-miODdZ3HtwDaz6iiKy86bhkBIfc=",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -5564,7 +5572,7 @@
     "@lerna/conventional-commits": {
       "version": "3.22.0",
       "resolved": "https://registry.npmjs.org/@lerna/conventional-commits/-/conventional-commits-3.22.0.tgz",
-      "integrity": "sha512-z4ZZk1e8Mhz7+IS8NxHr64wyklHctCJyWpJKEZZPJiLFJ8yKto/x38O80R10pIzC0rr8Sy/OsjSH4bl0TbbgqA==",
+      "integrity": "sha1-J5j0iB7i70V72uAnq30L8K9vHgk=",
       "dev": true,
       "requires": {
         "@lerna/validation-error": "3.13.0",
@@ -5603,7 +5611,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -5615,7 +5623,7 @@
             "semver": {
               "version": "5.7.1",
               "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+              "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
               "dev": true
             }
           }
@@ -5625,7 +5633,7 @@
     "@lerna/create": {
       "version": "3.22.0",
       "resolved": "https://registry.npmjs.org/@lerna/create/-/create-3.22.0.tgz",
-      "integrity": "sha512-MdiQQzCcB4E9fBF1TyMOaAEz9lUjIHp1Ju9H7f3lXze5JK6Fl5NYkouAvsLgY6YSIhXMY8AHW2zzXeBDY4yWkw==",
+      "integrity": "sha1-1rvQN8PcW0Jf5fbRuBcFfCePdhk=",
       "dev": true,
       "requires": {
         "@evocateur/pacote": "^9.6.3",
@@ -5651,7 +5659,7 @@
         "@nodelib/fs.stat": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
-          "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
+          "integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=",
           "dev": true
         },
         "array-union": {
@@ -5675,7 +5683,7 @@
         "fast-glob": {
           "version": "2.2.7",
           "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",
-          "integrity": "sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==",
+          "integrity": "sha1-aVOFfDr6R1//ku5gFdUtpwpM050=",
           "dev": true,
           "requires": {
             "@mrmlnc/readdir-enhanced": "^2.2.1",
@@ -5700,7 +5708,7 @@
         "globby": {
           "version": "9.2.0",
           "resolved": "https://registry.npmjs.org/globby/-/globby-9.2.0.tgz",
-          "integrity": "sha512-ollPHROa5mcxDEkwg6bPt3QbEf4pDQSNtd6JPL1YvOvAo/7/0VAm9TccUeoTmarjPw4pfUthSCqcyfNB1I3ZSg==",
+          "integrity": "sha1-/QKacGxwPSm90XD0tts6P3p8tj0=",
           "dev": true,
           "requires": {
             "@types/glob": "^7.1.1",
@@ -5716,7 +5724,7 @@
         "ignore": {
           "version": "4.0.6",
           "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
-          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
+          "integrity": "sha1-dQ49tYYgh7RzfrrIIH/9HvJ7Jfw=",
           "dev": true
         },
         "jsonfile": {
@@ -5731,7 +5739,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -5743,7 +5751,7 @@
             "semver": {
               "version": "5.7.1",
               "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+              "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
               "dev": true
             }
           }
@@ -5751,7 +5759,7 @@
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
+          "integrity": "sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q=",
           "dev": true
         },
         "tr46": {
@@ -5785,7 +5793,7 @@
     "@lerna/create-symlink": {
       "version": "3.16.2",
       "resolved": "https://registry.npmjs.org/@lerna/create-symlink/-/create-symlink-3.16.2.tgz",
-      "integrity": "sha512-pzXIJp6av15P325sgiIRpsPXLFmkisLhMBCy4764d+7yjf2bzrJ4gkWVMhsv4AdF0NN3OyZ5jjzzTtLNqfR+Jw==",
+      "integrity": "sha1-QSy45Zpy9afZRj5ORyGtIHAUmWc=",
       "dev": true,
       "requires": {
         "@zkochan/cmd-shim": "^3.1.0",
@@ -5818,7 +5826,7 @@
     "@lerna/describe-ref": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/describe-ref/-/describe-ref-3.16.5.tgz",
-      "integrity": "sha512-c01+4gUF0saOOtDBzbLMFOTJDHTKbDFNErEY6q6i9QaXuzy9LNN62z+Hw4acAAZuJQhrVWncVathcmkkjvSVGw==",
+      "integrity": "sha1-ozjCWq7YN9PccLinLER8XGY0asA=",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -5828,7 +5836,7 @@
     "@lerna/diff": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/diff/-/diff-3.21.0.tgz",
-      "integrity": "sha512-5viTR33QV3S7O+bjruo1SaR40m7F2aUHJaDAC7fL9Ca6xji+aw1KFkpCtVlISS0G8vikUREGMJh+c/VMSc8Usw==",
+      "integrity": "sha1-5t8Ni5kWFn/1pJ/LAqwGQkKApo0=",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -5840,7 +5848,7 @@
     "@lerna/exec": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/exec/-/exec-3.21.0.tgz",
-      "integrity": "sha512-iLvDBrIE6rpdd4GIKTY9mkXyhwsJ2RvQdB9ZU+/NhR3okXfqKc6py/24tV111jqpXTtZUW6HNydT4dMao2hi1Q==",
+      "integrity": "sha1-F/B1M4k8uRihe0G8xWbcQ3AW2yY=",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -5863,7 +5871,7 @@
     "@lerna/filter-options": {
       "version": "3.20.0",
       "resolved": "https://registry.npmjs.org/@lerna/filter-options/-/filter-options-3.20.0.tgz",
-      "integrity": "sha512-bmcHtvxn7SIl/R9gpiNMVG7yjx7WyT0HSGw34YVZ9B+3xF/83N3r5Rgtjh4hheLZ+Q91Or0Jyu5O3Nr+AwZe2g==",
+      "integrity": "sha1-Dw9dWkeDhW7s5CBHCMyQLLyK9Zs=",
       "dev": true,
       "requires": {
         "@lerna/collect-updates": "3.20.0",
@@ -5876,7 +5884,7 @@
     "@lerna/filter-packages": {
       "version": "3.18.0",
       "resolved": "https://registry.npmjs.org/@lerna/filter-packages/-/filter-packages-3.18.0.tgz",
-      "integrity": "sha512-6/0pMM04bCHNATIOkouuYmPg6KH3VkPCIgTfQmdkPJTullERyEQfNUKikrefjxo1vHOoCACDpy65JYyKiAbdwQ==",
+      "integrity": "sha1-ano3bShSCNsDqClYz7gXLhebTnA=",
       "dev": true,
       "requires": {
         "@lerna/validation-error": "3.13.0",
@@ -5887,7 +5895,7 @@
     "@lerna/get-npm-exec-opts": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/get-npm-exec-opts/-/get-npm-exec-opts-3.13.0.tgz",
-      "integrity": "sha512-Y0xWL0rg3boVyJk6An/vurKzubyJKtrxYv2sj4bB8Mc5zZ3tqtv0ccbOkmkXKqbzvNNF7VeUt1OJ3DRgtC/QZw==",
+      "integrity": "sha1-0bVSywCIGZ/D5+Em+RTjmgjfnqU=",
       "dev": true,
       "requires": {
         "npmlog": "^4.1.2"
@@ -5896,7 +5904,7 @@
     "@lerna/get-packed": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@lerna/get-packed/-/get-packed-3.16.0.tgz",
-      "integrity": "sha512-AjsFiaJzo1GCPnJUJZiTW6J1EihrPkc2y3nMu6m3uWFxoleklsSCyImumzVZJssxMi3CPpztj8LmADLedl9kXw==",
+      "integrity": "sha1-GzFrcG3O6Gx7qlXlCwh5WUR4Uv8=",
       "dev": true,
       "requires": {
         "fs-extra": "^8.1.0",
@@ -5938,7 +5946,7 @@
     "@lerna/github-client": {
       "version": "3.22.0",
       "resolved": "https://registry.npmjs.org/@lerna/github-client/-/github-client-3.22.0.tgz",
-      "integrity": "sha512-O/GwPW+Gzr3Eb5bk+nTzTJ3uv+jh5jGho9BOqKlajXaOkMYGBELEAqV5+uARNGWZFvYAiF4PgqHb6aCUu7XdXg==",
+      "integrity": "sha1-XYFqpPdnR+1zauZP+WK48Vw1TZU=",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -5951,7 +5959,7 @@
     "@lerna/gitlab-client": {
       "version": "3.15.0",
       "resolved": "https://registry.npmjs.org/@lerna/gitlab-client/-/gitlab-client-3.15.0.tgz",
-      "integrity": "sha512-OsBvRSejHXUBMgwWQqNoioB8sgzL/Pf1pOUhHKtkiMl6aAWjklaaq5HPMvTIsZPfS6DJ9L5OK2GGZuooP/5c8Q==",
+      "integrity": "sha1-kfTsjGl7WsV/fyW9UP5lnSSqlqY=",
       "dev": true,
       "requires": {
         "node-fetch": "^2.5.0",
@@ -5990,13 +5998,13 @@
     "@lerna/global-options": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/global-options/-/global-options-3.13.0.tgz",
-      "integrity": "sha512-SlZvh1gVRRzYLVluz9fryY1nJpZ0FHDGB66U9tFfvnnxmueckRQxLopn3tXj3NU1kc3QANT2I5BsQkOqZ4TEFQ==",
+      "integrity": "sha1-IXZiKQ2watnPLEnY4xAO4o6uuuE=",
       "dev": true
     },
     "@lerna/has-npm-version": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/has-npm-version/-/has-npm-version-3.16.5.tgz",
-      "integrity": "sha512-WL7LycR9bkftyqbYop5rEGJ9sRFIV55tSGmbN1HLrF9idwOCD7CLrT64t235t3t4O5gehDnwKI5h2U3oxTrF8Q==",
+      "integrity": "sha1-q4OVbyEdiSPqav6bl5s4zHOxUyY=",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6006,7 +6014,7 @@
     "@lerna/import": {
       "version": "3.22.0",
       "resolved": "https://registry.npmjs.org/@lerna/import/-/import-3.22.0.tgz",
-      "integrity": "sha512-uWOlexasM5XR6tXi4YehODtH9Y3OZrFht3mGUFFT3OIl2s+V85xIGFfqFGMTipMPAGb2oF1UBLL48kR43hRsOg==",
+      "integrity": "sha1-Gl8DlPOOI8T2QqEj5eFRfnDQaNI=",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6044,7 +6052,7 @@
     "@lerna/info": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/info/-/info-3.21.0.tgz",
-      "integrity": "sha512-0XDqGYVBgWxUquFaIptW2bYSIu6jOs1BtkvRTWDDhw4zyEdp6q4eaMvqdSap1CG+7wM5jeLCi6z94wS0AuiuwA==",
+      "integrity": "sha1-dmlrZ2/bDzXUjIPGPB4yu143gU8=",
       "dev": true,
       "requires": {
         "@lerna/command": "3.21.0",
@@ -6055,7 +6063,7 @@
     "@lerna/init": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/init/-/init-3.21.0.tgz",
-      "integrity": "sha512-6CM0z+EFUkFfurwdJCR+LQQF6MqHbYDCBPyhu/d086LRf58GtYZYj49J8mKG9ktayp/TOIxL/pKKjgLD8QBPOg==",
+      "integrity": "sha1-HoEJNNyL9OU4bAMQQYgdO0CWqlw=",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6096,7 +6104,7 @@
     "@lerna/link": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/link/-/link-3.21.0.tgz",
-      "integrity": "sha512-tGu9GxrX7Ivs+Wl3w1+jrLi1nQ36kNI32dcOssij6bg0oZ2M2MDEFI9UF2gmoypTaN9uO5TSsjCFS7aR79HbdQ==",
+      "integrity": "sha1-i+aP8MzuEEsXS1u9YGMCwvBunZs=",
       "dev": true,
       "requires": {
         "@lerna/command": "3.21.0",
@@ -6115,7 +6123,7 @@
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
+          "integrity": "sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q=",
           "dev": true
         }
       }
@@ -6123,7 +6131,7 @@
     "@lerna/list": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/list/-/list-3.21.0.tgz",
-      "integrity": "sha512-KehRjE83B1VaAbRRkRy6jLX1Cin8ltsrQ7FHf2bhwhRHK0S54YuA6LOoBnY/NtA8bHDX/Z+G5sMY78X30NS9tg==",
+      "integrity": "sha1-Qvdvr6Vt6hO2keyMqxODJpHWHaI=",
       "dev": true,
       "requires": {
         "@lerna/command": "3.21.0",
@@ -6135,7 +6143,7 @@
     "@lerna/listable": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/listable/-/listable-3.18.5.tgz",
-      "integrity": "sha512-Sdr3pVyaEv5A7ZkGGYR7zN+tTl2iDcinryBPvtuv20VJrXBE8wYcOks1edBTcOWsPjCE/rMP4bo1pseyk3UTsg==",
+      "integrity": "sha1-6CeYQFte2PxRhDyO8eeg5Jc4iho=",
       "dev": true,
       "requires": {
         "@lerna/query-graph": "3.18.5",
@@ -6146,7 +6154,7 @@
     "@lerna/log-packed": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@lerna/log-packed/-/log-packed-3.16.0.tgz",
-      "integrity": "sha512-Fp+McSNBV/P2mnLUYTaSlG8GSmpXM7krKWcllqElGxvAqv6chk2K3c2k80MeVB4WvJ9tRjUUf+i7HUTiQ9/ckQ==",
+      "integrity": "sha1-+DmRBB7neySVY04URwtCJZ/SvBY=",
       "dev": true,
       "requires": {
         "byte-size": "^5.0.1",
@@ -6158,7 +6166,7 @@
     "@lerna/npm-conf": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@lerna/npm-conf/-/npm-conf-3.16.0.tgz",
-      "integrity": "sha512-HbO3DUrTkCAn2iQ9+FF/eisDpWY5POQAOF1m7q//CZjdC2HSW3UYbKEGsSisFxSfaF9Z4jtrV+F/wX6qWs3CuA==",
+      "integrity": "sha1-HBComuL2wu6WliVXc4aFMA03aCc=",
       "dev": true,
       "requires": {
         "config-chain": "^1.1.11",
@@ -6168,7 +6176,7 @@
     "@lerna/npm-dist-tag": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/npm-dist-tag/-/npm-dist-tag-3.18.5.tgz",
-      "integrity": "sha512-xw0HDoIG6HreVsJND9/dGls1c+lf6vhu7yJoo56Sz5bvncTloYGLUppIfDHQr4ZvmPCK8rsh0euCVh2giPxzKQ==",
+      "integrity": "sha1-nvmrt8EEB3sx9vqyLMc7MU1UrFU=",
       "dev": true,
       "requires": {
         "@evocateur/npm-registry-fetch": "^4.0.0",
@@ -6181,7 +6189,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6193,7 +6201,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
           "dev": true
         }
       }
@@ -6201,7 +6209,7 @@
     "@lerna/npm-install": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/npm-install/-/npm-install-3.16.5.tgz",
-      "integrity": "sha512-hfiKk8Eku6rB9uApqsalHHTHY+mOrrHeWEs+gtg7+meQZMTS3kzv4oVp5cBZigndQr3knTLjwthT/FX4KvseFg==",
+      "integrity": "sha1-1r/cFvgShdpmUVrkeSTW4njWN9M=",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6236,7 +6244,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6248,7 +6256,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
           "dev": true
         }
       }
@@ -6256,7 +6264,7 @@
     "@lerna/npm-publish": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/npm-publish/-/npm-publish-3.18.5.tgz",
-      "integrity": "sha512-3etLT9+2L8JAx5F8uf7qp6iAtOLSMj+ZYWY6oUgozPi/uLqU0/gsMsEXh3F0+YVW33q0M61RpduBoAlOOZnaTg==",
+      "integrity": "sha1-JA5AOZWf2YFrScWwdCHhG1ywAK8=",
       "dev": true,
       "requires": {
         "@evocateur/libnpmpublish": "^1.2.2",
@@ -6293,7 +6301,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6305,7 +6313,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
           "dev": true
         }
       }
@@ -6313,7 +6321,7 @@
     "@lerna/npm-run-script": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/npm-run-script/-/npm-run-script-3.16.5.tgz",
-      "integrity": "sha512-1asRi+LjmVn3pMjEdpqKJZFT/3ZNpb+VVeJMwrJaV/3DivdNg7XlPK9LTrORuKU4PSvhdEZvJmSlxCKyDpiXsQ==",
+      "integrity": "sha1-nC7IJFOibAtG7cC7fBWBbIIfXBU=",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6324,7 +6332,7 @@
     "@lerna/otplease": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/otplease/-/otplease-3.18.5.tgz",
-      "integrity": "sha512-S+SldXAbcXTEDhzdxYLU0ZBKuYyURP/ND2/dK6IpKgLxQYh/z4ScljPDMyKymmEvgiEJmBsPZAAPfmNPEzxjog==",
+      "integrity": "sha1-t3uOdgtAq62fdljZiPPqd9T9AjE=",
       "dev": true,
       "requires": {
         "@lerna/prompt": "3.18.5",
@@ -6334,7 +6342,7 @@
     "@lerna/output": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/output/-/output-3.13.0.tgz",
-      "integrity": "sha512-7ZnQ9nvUDu/WD+bNsypmPG5MwZBwu86iRoiW6C1WBuXXDxM5cnIAC1m2WxHeFnjyMrYlRXM9PzOQ9VDD+C15Rg==",
+      "integrity": "sha1-Pe18yQiyephyIopjDZUK7a56SYk=",
       "dev": true,
       "requires": {
         "npmlog": "^4.1.2"
@@ -6343,7 +6351,7 @@
     "@lerna/pack-directory": {
       "version": "3.16.4",
       "resolved": "https://registry.npmjs.org/@lerna/pack-directory/-/pack-directory-3.16.4.tgz",
-      "integrity": "sha512-uxSF0HZeGyKaaVHz5FroDY9A5NDDiCibrbYR6+khmrhZtY0Bgn6hWq8Gswl9iIlymA+VzCbshWIMX4o2O8C8ng==",
+      "integrity": "sha1-Pq5fkb31rP4DhFEO1T+t3EwHRpM=",
       "dev": true,
       "requires": {
         "@lerna/get-packed": "3.16.0",
@@ -6359,7 +6367,7 @@
         "npm-packlist": {
           "version": "1.4.8",
           "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz",
-          "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==",
+          "integrity": "sha1-Vu5swTW5+YrT1Rwcldoiu7my7z4=",
           "dev": true,
           "requires": {
             "ignore-walk": "^3.0.1",
@@ -6372,7 +6380,7 @@
     "@lerna/package": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@lerna/package/-/package-3.16.0.tgz",
-      "integrity": "sha512-2lHBWpaxcBoiNVbtyLtPUuTYEaB/Z+eEqRS9duxpZs6D+mTTZMNy6/5vpEVSCBmzvdYpyqhqaYjjSLvjjr5Riw==",
+      "integrity": "sha1-fgpG5Gl+2LipwU1Zx/iQ4NOLoTw=",
       "dev": true,
       "requires": {
         "load-json-file": "^5.3.0",
@@ -6383,7 +6391,7 @@
         "load-json-file": {
           "version": "5.3.0",
           "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-5.3.0.tgz",
-          "integrity": "sha512-cJGP40Jc/VXUsp8/OrnyKyTZ1y6v/dphm3bioS+RrKXjK2BB6wHUd6JptZEFDGgGahMT+InnZO5i1Ei9mpC8Bw==",
+          "integrity": "sha1-TTweAfocA+p4pgrHr5MsnOU0A/M=",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.15",
@@ -6396,7 +6404,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6408,13 +6416,13 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
           "dev": true
         },
         "type-fest": {
           "version": "0.3.1",
           "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.3.1.tgz",
-          "integrity": "sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==",
+          "integrity": "sha1-Y9ANIE4FlHT+Xht8ARESu9HcKeE=",
           "dev": true
         }
       }
@@ -6422,7 +6430,7 @@
     "@lerna/package-graph": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/package-graph/-/package-graph-3.18.5.tgz",
-      "integrity": "sha512-8QDrR9T+dBegjeLr+n9WZTVxUYUhIUjUgZ0gvNxUBN8S1WB9r6H5Yk56/MVaB64tA3oGAN9IIxX6w0WvTfFudA==",
+      "integrity": "sha1-x0Di6jV40FnlUWM+lQaQgxuUH2s=",
       "dev": true,
       "requires": {
         "@lerna/prerelease-id-from-version": "3.16.0",
@@ -6435,7 +6443,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6447,7 +6455,7 @@
             "semver": {
               "version": "5.7.1",
               "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+              "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
               "dev": true
             }
           }
@@ -6457,7 +6465,7 @@
     "@lerna/prerelease-id-from-version": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@lerna/prerelease-id-from-version/-/prerelease-id-from-version-3.16.0.tgz",
-      "integrity": "sha512-qZyeUyrE59uOK8rKdGn7jQz+9uOpAaF/3hbslJVFL1NqF9ELDTqjCPXivuejMX/lN4OgD6BugTO4cR7UTq/sZA==",
+      "integrity": "sha1-skv6eJ9eG6q5FNewi6rpt719g6E=",
       "dev": true,
       "requires": {
         "semver": "^6.2.0"
@@ -6466,7 +6474,7 @@
     "@lerna/profiler": {
       "version": "3.20.0",
       "resolved": "https://registry.npmjs.org/@lerna/profiler/-/profiler-3.20.0.tgz",
-      "integrity": "sha512-bh8hKxAlm6yu8WEOvbLENm42i2v9SsR4WbrCWSbsmOElx3foRnMlYk7NkGECa+U5c3K4C6GeBbwgqs54PP7Ljg==",
+      "integrity": "sha1-D23CNvTqj56l81jGcDMFpPMq0FE=",
       "dev": true,
       "requires": {
         "figgy-pudding": "^3.5.1",
@@ -6500,7 +6508,7 @@
     "@lerna/project": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/project/-/project-3.21.0.tgz",
-      "integrity": "sha512-xT1mrpET2BF11CY32uypV2GPtPVm6Hgtha7D81GQP9iAitk9EccrdNjYGt5UBYASl4CIDXBRxwmTTVGfrCx82A==",
+      "integrity": "sha1-XXhNLRDFYaAPIDILzbBAmXwQUC0=",
       "dev": true,
       "requires": {
         "@lerna/package": "3.16.0",
@@ -6520,7 +6528,7 @@
         "@nodelib/fs.stat": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
-          "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
+          "integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=",
           "dev": true
         },
         "array-union": {
@@ -6535,7 +6543,7 @@
         "cosmiconfig": {
           "version": "5.2.1",
           "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
-          "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
+          "integrity": "sha1-BA9yaAnFked6F8CjYmykW08Wixo=",
           "dev": true,
           "requires": {
             "import-fresh": "^2.0.0",
@@ -6556,7 +6564,7 @@
         "fast-glob": {
           "version": "2.2.7",
           "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",
-          "integrity": "sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==",
+          "integrity": "sha1-aVOFfDr6R1//ku5gFdUtpwpM050=",
           "dev": true,
           "requires": {
             "@mrmlnc/readdir-enhanced": "^2.2.1",
@@ -6602,7 +6610,7 @@
         "globby": {
           "version": "9.2.0",
           "resolved": "https://registry.npmjs.org/globby/-/globby-9.2.0.tgz",
-          "integrity": "sha512-ollPHROa5mcxDEkwg6bPt3QbEf4pDQSNtd6JPL1YvOvAo/7/0VAm9TccUeoTmarjPw4pfUthSCqcyfNB1I3ZSg==",
+          "integrity": "sha1-/QKacGxwPSm90XD0tts6P3p8tj0=",
           "dev": true,
           "requires": {
             "@types/glob": "^7.1.1",
@@ -6618,7 +6626,7 @@
         "ignore": {
           "version": "4.0.6",
           "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
-          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
+          "integrity": "sha1-dQ49tYYgh7RzfrrIIH/9HvJ7Jfw=",
           "dev": true
         },
         "import-fresh": {
@@ -6642,7 +6650,7 @@
         "load-json-file": {
           "version": "5.3.0",
           "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-5.3.0.tgz",
-          "integrity": "sha512-cJGP40Jc/VXUsp8/OrnyKyTZ1y6v/dphm3bioS+RrKXjK2BB6wHUd6JptZEFDGgGahMT+InnZO5i1Ei9mpC8Bw==",
+          "integrity": "sha1-TTweAfocA+p4pgrHr5MsnOU0A/M=",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.15",
@@ -6661,13 +6669,13 @@
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
+          "integrity": "sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q=",
           "dev": true
         },
         "type-fest": {
           "version": "0.3.1",
           "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.3.1.tgz",
-          "integrity": "sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==",
+          "integrity": "sha1-Y9ANIE4FlHT+Xht8ARESu9HcKeE=",
           "dev": true
         }
       }
@@ -6675,7 +6683,7 @@
     "@lerna/prompt": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/prompt/-/prompt-3.18.5.tgz",
-      "integrity": "sha512-rkKj4nm1twSbBEb69+Em/2jAERK8htUuV8/xSjN0NPC+6UjzAwY52/x9n5cfmpa9lyKf/uItp7chCI7eDmNTKQ==",
+      "integrity": "sha1-YozVRfIliH0GBJGrld+JnPxSGKE=",
       "dev": true,
       "requires": {
         "inquirer": "^6.2.0",
@@ -6798,7 +6806,7 @@
     "@lerna/publish": {
       "version": "3.22.1",
       "resolved": "https://registry.npmjs.org/@lerna/publish/-/publish-3.22.1.tgz",
-      "integrity": "sha512-PG9CM9HUYDreb1FbJwFg90TCBQooGjj+n/pb3gw/eH5mEDq0p8wKdLFe0qkiqUkm/Ub5C8DbVFertIo0Vd0zcw==",
+      "integrity": "sha1-tPfOP7oemvsovkofPYgiImm6lRk=",
       "dev": true,
       "requires": {
         "@evocateur/libnpmaccess": "^3.1.2",
@@ -6856,7 +6864,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6868,7 +6876,7 @@
             "semver": {
               "version": "5.7.1",
               "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+              "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
               "dev": true
             }
           }
@@ -6884,7 +6892,7 @@
     "@lerna/pulse-till-done": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/pulse-till-done/-/pulse-till-done-3.13.0.tgz",
-      "integrity": "sha512-1SOHpy7ZNTPulzIbargrgaJX387csN7cF1cLOGZiJQA6VqnS5eWs2CIrG8i8wmaUavj2QlQ5oEbRMVVXSsGrzA==",
+      "integrity": "sha1-yOnOW6+vENkwpn1+0My12Vj+ARA=",
       "dev": true,
       "requires": {
         "npmlog": "^4.1.2"
@@ -6893,7 +6901,7 @@
     "@lerna/query-graph": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/query-graph/-/query-graph-3.18.5.tgz",
-      "integrity": "sha512-50Lf4uuMpMWvJ306be3oQDHrWV42nai9gbIVByPBYJuVW8dT8O8pA3EzitNYBUdLL9/qEVbrR0ry1HD7EXwtRA==",
+      "integrity": "sha1-30gwu1FVJzADvzXo3aHDLQknvYY=",
       "dev": true,
       "requires": {
         "@lerna/package-graph": "3.18.5",
@@ -6903,7 +6911,7 @@
     "@lerna/resolve-symlink": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@lerna/resolve-symlink/-/resolve-symlink-3.16.0.tgz",
-      "integrity": "sha512-Ibj5e7njVHNJ/NOqT4HlEgPFPtPLWsO7iu59AM5bJDcAJcR96mLZ7KGVIsS2tvaO7akMEJvt2P+ErwCdloG3jQ==",
+      "integrity": "sha1-N/xwlfq9vPMXwm63Tg0L3o79I4Y=",
       "dev": true,
       "requires": {
         "fs-extra": "^8.1.0",
@@ -6936,7 +6944,7 @@
     "@lerna/rimraf-dir": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/rimraf-dir/-/rimraf-dir-3.16.5.tgz",
-      "integrity": "sha512-bQlKmO0pXUsXoF8lOLknhyQjOZsCc0bosQDoX4lujBXSWxHVTg1VxURtWf2lUjz/ACsJVDfvHZbDm8kyBk5okA==",
+      "integrity": "sha1-BDFqtf/SkJZXqvOI6lAsuMLyCgk=",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6948,7 +6956,7 @@
     "@lerna/run": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/run/-/run-3.21.0.tgz",
-      "integrity": "sha512-fJF68rT3veh+hkToFsBmUJ9MHc9yGXA7LSDvhziAojzOb0AI/jBDp6cEcDQyJ7dbnplba2Lj02IH61QUf9oW0Q==",
+      "integrity": "sha1-KjXshJeeTW5CR0/hSNMuXeHKyJE=",
       "dev": true,
       "requires": {
         "@lerna/command": "3.21.0",
@@ -6973,7 +6981,7 @@
     "@lerna/run-lifecycle": {
       "version": "3.16.2",
       "resolved": "https://registry.npmjs.org/@lerna/run-lifecycle/-/run-lifecycle-3.16.2.tgz",
-      "integrity": "sha512-RqFoznE8rDpyyF0rOJy3+KjZCeTkO8y/OB9orPauR7G2xQ7PTdCpgo7EO6ZNdz3Al+k1BydClZz/j78gNCmL2A==",
+      "integrity": "sha1-Z7KI+OqWTbnqT7H7x3FdW7sLzgA=",
       "dev": true,
       "requires": {
         "@lerna/npm-conf": "3.16.0",
@@ -6985,7 +6993,7 @@
     "@lerna/run-topologically": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/run-topologically/-/run-topologically-3.18.5.tgz",
-      "integrity": "sha512-6N1I+6wf4hLOnPW+XDZqwufyIQ6gqoPfHZFkfWlvTQ+Ue7CuF8qIVQ1Eddw5HKQMkxqN10thKOFfq/9NQZ4NUg==",
+      "integrity": "sha1-PNY52iDpZ9dnLLiNsPdWuS8v38M=",
       "dev": true,
       "requires": {
         "@lerna/query-graph": "3.18.5",
@@ -6996,13 +7004,13 @@
         "eventemitter3": {
           "version": "3.1.2",
           "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz",
-          "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==",
+          "integrity": "sha1-LT1I+cNGaY/Og6hdfWZOmFNd9uc=",
           "dev": true
         },
         "p-queue": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/p-queue/-/p-queue-4.0.0.tgz",
-          "integrity": "sha512-3cRXXn3/O0o3+eVmUroJPSj/esxoEFIm0ZOno/T+NzG/VZgPOqQ8WKmlNqubSEpZmCIngEy34unkHGg83ZIBmg==",
+          "integrity": "sha1-7Q7uh5iSftbywvX1t3/bIGGl00Y=",
           "dev": true,
           "requires": {
             "eventemitter3": "^3.1.0"
@@ -7013,7 +7021,7 @@
     "@lerna/symlink-binary": {
       "version": "3.17.0",
       "resolved": "https://registry.npmjs.org/@lerna/symlink-binary/-/symlink-binary-3.17.0.tgz",
-      "integrity": "sha512-RLpy9UY6+3nT5J+5jkM5MZyMmjNHxZIZvXLV+Q3MXrf7Eaa1hNqyynyj4RO95fxbS+EZc4XVSk25DGFQbcRNSQ==",
+      "integrity": "sha1-j4AxswmGOBSIPT8AmHf4Ljiu9Fo=",
       "dev": true,
       "requires": {
         "@lerna/create-symlink": "3.16.2",
@@ -7053,7 +7061,7 @@
     "@lerna/symlink-dependencies": {
       "version": "3.17.0",
       "resolved": "https://registry.npmjs.org/@lerna/symlink-dependencies/-/symlink-dependencies-3.17.0.tgz",
-      "integrity": "sha512-KmjU5YT1bpt6coOmdFueTJ7DFJL4H1w5eF8yAQ2zsGNTtZ+i5SGFBWpb9AQaw168dydc3s4eu0W0Sirda+F59Q==",
+      "integrity": "sha1-SNY2DphYZaDlbNi1GzCKUmMIeEo=",
       "dev": true,
       "requires": {
         "@lerna/create-symlink": "3.16.2",
@@ -7096,13 +7104,13 @@
     "@lerna/timer": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/timer/-/timer-3.13.0.tgz",
-      "integrity": "sha512-RHWrDl8U4XNPqY5MQHkToWS9jHPnkLZEt5VD+uunCKTfzlxGnRCr3/zVr8VGy/uENMYpVP3wJa4RKGY6M0vkRw==",
+      "integrity": "sha1-vNCQRVHbFuCDZNbBjl4hYPyHB4E=",
       "dev": true
     },
     "@lerna/validation-error": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/validation-error/-/validation-error-3.13.0.tgz",
-      "integrity": "sha512-SiJP75nwB8GhgwLKQfdkSnDufAaCbkZWJqEDlKOUPUvVOplRGnfL+BPQZH5nvq2BYSRXsksXWZ4UHVnQZI/HYA==",
+      "integrity": "sha1-yGuPB8WrlTn3db2KVJdukm83WcM=",
       "dev": true,
       "requires": {
         "npmlog": "^4.1.2"
@@ -7111,7 +7119,7 @@
     "@lerna/version": {
       "version": "3.22.1",
       "resolved": "https://registry.npmjs.org/@lerna/version/-/version-3.22.1.tgz",
-      "integrity": "sha512-PSGt/K1hVqreAFoi3zjD0VEDupQ2WZVlVIwesrE5GbrL2BjXowjCsTDPqblahDUPy0hp6h7E2kG855yLTp62+g==",
+      "integrity": "sha1-mAWpJHpH7mLWuBvZ+l+3KLJLWeI=",
       "dev": true,
       "requires": {
         "@lerna/check-working-tree": "3.16.5",
@@ -7145,7 +7153,7 @@
         "load-json-file": {
           "version": "5.3.0",
           "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-5.3.0.tgz",
-          "integrity": "sha512-cJGP40Jc/VXUsp8/OrnyKyTZ1y6v/dphm3bioS+RrKXjK2BB6wHUd6JptZEFDGgGahMT+InnZO5i1Ei9mpC8Bw==",
+          "integrity": "sha1-TTweAfocA+p4pgrHr5MsnOU0A/M=",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.15",
@@ -7164,13 +7172,13 @@
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
+          "integrity": "sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q=",
           "dev": true
         },
         "type-fest": {
           "version": "0.3.1",
           "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.3.1.tgz",
-          "integrity": "sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==",
+          "integrity": "sha1-Y9ANIE4FlHT+Xht8ARESu9HcKeE=",
           "dev": true
         }
       }
@@ -7178,7 +7186,7 @@
     "@lerna/write-log-file": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/write-log-file/-/write-log-file-3.13.0.tgz",
-      "integrity": "sha512-RibeMnDPvlL8bFYW5C8cs4mbI3AHfQef73tnJCQ/SgrXZHehmHnsyWUiE7qDQCAo+B1RfTapvSyFF69iPj326A==",
+      "integrity": "sha1-t42eTPwTSai+ZNkTJMTIGZ6CKiY=",
       "dev": true,
       "requires": {
         "npmlog": "^4.1.2",
@@ -7188,7 +7196,7 @@
         "write-file-atomic": {
           "version": "2.4.3",
           "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz",
-          "integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==",
+          "integrity": "sha1-H9Lprh3z51uNjDZ0Q8aS1MqB9IE=",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.11",
@@ -7218,7 +7226,7 @@
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
-      "integrity": "sha512-bPHp6Ji8b41szTOcaP63VlnbbO5Ny6dwAATtY6JTjh5N2OLrb5Qk/Th5cRkRQhkWCt+EJsYrNB0MiL+Gpn6e3g==",
+      "integrity": "sha1-UkryQNGjYFJ7cwR17PoTRKpUDd4=",
       "dev": true,
       "requires": {
         "call-me-maybe": "^1.0.1",
@@ -8987,13 +8995,13 @@
     "@octokit/plugin-enterprise-rest": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/@octokit/plugin-enterprise-rest/-/plugin-enterprise-rest-6.0.1.tgz",
-      "integrity": "sha512-93uGjlhUD+iNg1iWhUENAtJata6w5nE+V4urXOAlIXdco6xNZtUSfYY8dzp3Udy74aqO/B5UZL80x/YMa5PKRw==",
+      "integrity": "sha1-4HiWc5YY2rjafUB3xlgAN3X5VDc=",
       "dev": true
     },
     "@octokit/plugin-paginate-rest": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-1.1.2.tgz",
-      "integrity": "sha512-jbsSoi5Q1pj63sC16XIUboklNw+8tL9VOnJsWycWYR78TKss5PVpIPb1TUUcMQ+bBh7cY579cVAWmf5qG+dw+Q==",
+      "integrity": "sha1-AEFwrPjCvlNauiZyeGfWkve0iPw=",
       "dev": true,
       "requires": {
         "@octokit/types": "^2.0.1"
@@ -9002,7 +9010,7 @@
         "@octokit/types": {
           "version": "2.16.2",
           "resolved": "https://registry.npmjs.org/@octokit/types/-/types-2.16.2.tgz",
-          "integrity": "sha512-O75k56TYvJ8WpAakWwYRN8Bgu60KrmX0z1KqFp1kNiFNkgW+JW+9EBKZ+S33PU6SLvbihqd+3drvPxKK68Ee8Q==",
+          "integrity": "sha1-TF+No8b+zz2hgRrvZ4/aA+2sNdI=",
           "dev": true,
           "requires": {
             "@types/node": ">= 8"
@@ -9019,7 +9027,7 @@
     "@octokit/plugin-rest-endpoint-methods": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-2.4.0.tgz",
-      "integrity": "sha512-EZi/AWhtkdfAYi01obpX0DF7U6b1VRr30QNQ5xSFPITMdLSfhcBqjamE3F+sKcxPbD7eZuMHu3Qkk2V+JGxBDQ==",
+      "integrity": "sha1-Mojs9UgfaMSU3QYC/BVAeln69h4=",
       "dev": true,
       "requires": {
         "@octokit/types": "^2.0.1",
@@ -9029,7 +9037,7 @@
         "@octokit/types": {
           "version": "2.16.2",
           "resolved": "https://registry.npmjs.org/@octokit/types/-/types-2.16.2.tgz",
-          "integrity": "sha512-O75k56TYvJ8WpAakWwYRN8Bgu60KrmX0z1KqFp1kNiFNkgW+JW+9EBKZ+S33PU6SLvbihqd+3drvPxKK68Ee8Q==",
+          "integrity": "sha1-TF+No8b+zz2hgRrvZ4/aA+2sNdI=",
           "dev": true,
           "requires": {
             "@types/node": ">= 8"
@@ -9079,7 +9087,7 @@
     "@octokit/request-error": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-1.2.1.tgz",
-      "integrity": "sha512-+6yDyk1EES6WK+l3viRDElw96MvwfJxCt45GvmjDUKWjYIb3PJZQkq3i46TwGwoPD4h8NmTrENmtyA1FwbmhRA==",
+      "integrity": "sha1-7eBxTHc/MjR1dsJWSdwBOuazGAE=",
       "dev": true,
       "requires": {
         "@octokit/types": "^2.0.0",
@@ -9090,7 +9098,7 @@
         "@octokit/types": {
           "version": "2.16.2",
           "resolved": "https://registry.npmjs.org/@octokit/types/-/types-2.16.2.tgz",
-          "integrity": "sha512-O75k56TYvJ8WpAakWwYRN8Bgu60KrmX0z1KqFp1kNiFNkgW+JW+9EBKZ+S33PU6SLvbihqd+3drvPxKK68Ee8Q==",
+          "integrity": "sha1-TF+No8b+zz2hgRrvZ4/aA+2sNdI=",
           "dev": true,
           "requires": {
             "@types/node": ">= 8"
@@ -9101,7 +9109,7 @@
     "@octokit/rest": {
       "version": "16.43.2",
       "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-16.43.2.tgz",
-      "integrity": "sha512-ngDBevLbBTFfrHZeiS7SAMAZ6ssuVmXuya+F/7RaVvlysgGa1JKJkKWY+jV6TCJYcW0OALfJ7nTIGXcBXzycfQ==",
+      "integrity": "sha1-xTQm8eHRBE3ulnAj4yecUJk92Rs=",
       "dev": true,
       "requires": {
         "@octokit/auth-token": "^2.4.0",
@@ -9244,7 +9252,7 @@
     "@restart/context": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
-      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
+      "integrity": "sha1-qZ2HwpmjTCi9hbtInLB7/SMUnAI="
     },
     "@restart/hooks": {
       "version": "0.3.27",
@@ -10715,7 +10723,7 @@
     "@zkochan/cmd-shim": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@zkochan/cmd-shim/-/cmd-shim-3.1.0.tgz",
-      "integrity": "sha512-o8l0+x7C7sMZU3v9GuJIAU10qQLtwR1dtRQIOmlNMtyaqhmpXOzx1HWiYoWfmmf9HHZoAkXpc9TM9PQYF9d4Jg==",
+      "integrity": "sha1-KrjtgfW7VFKoXyV1jrm4aBmC/S4=",
       "dev": true,
       "requires": {
         "is-windows": "^1.0.0",
@@ -11171,7 +11179,7 @@
     "array-differ": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-2.1.0.tgz",
-      "integrity": "sha512-KbUpJgx909ZscOc/7CLATBFam7P1Z1QRQInvgT0UztM9Q72aGKCunKASAl7WNW0tnPmPyEMeMhdsfWhfmW037w==",
+      "integrity": "sha1-S5wcPxS5BnVwgpJXaeirkE9IAbE=",
       "dev": true
     },
     "array-each": {
@@ -11745,7 +11753,7 @@
     "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==",
+      "integrity": "sha1-IGCTrDgKS3jEQEoFsydzkSePgPs=",
       "dev": true,
       "requires": {
         "@jest/transform": "^25.1.0",
@@ -11791,7 +11799,7 @@
         "chalk": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "integrity": "sha1-P3PCv1JlkfV0zEksUeJFY0n4ROQ=",
           "dev": true,
           "requires": {
             "ansi-styles": "^4.1.0",
@@ -11801,7 +11809,7 @@
         "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==",
+          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
           "dev": true,
           "requires": {
             "color-name": "~1.1.4"
@@ -11810,19 +11818,19 @@
         "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==",
+          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
           "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==",
+          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
           "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==",
+          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
           "dev": true,
           "requires": {
             "has-flag": "^4.0.0"
@@ -12685,6 +12693,12 @@
         "regenerator-runtime": "^0.11.0"
       },
       "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+          "dev": true
+        },
         "regenerator-runtime": {
           "version": "0.11.1",
           "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
@@ -13809,7 +13823,7 @@
     "byte-size": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/byte-size/-/byte-size-5.0.1.tgz",
-      "integrity": "sha512-/XuKeqWocKsYa/cBY1YbSJSWWqTi4cFgr9S6OyM7PBaPbr9zvNGwWP33vt0uqGhwDdN+y3yhbXVILEUpnwEWGw==",
+      "integrity": "sha1-S2UQOaXs2Wdn5xo9ftOA5IvtQZE=",
       "dev": true
     },
     "bytes": {
@@ -14045,7 +14059,7 @@
     "camelcase-keys": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
-      "integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==",
+      "integrity": "sha1-XnVda6UaoiPsfT1S8ld4IQ+dw8A=",
       "dev": true,
       "requires": {
         "camelcase": "^5.3.1",
@@ -14645,7 +14659,7 @@
     "command-exists": {
       "version": "1.2.9",
       "resolved": "https://registry.npmjs.org/command-exists/-/command-exists-1.2.9.tgz",
-      "integrity": "sha512-LTQ/SGc+s0Xc0Fu5WaKnR0YiygZkm9eKFvyS+fRsU7/ZWFF8ykFM6Pc9aCVf1+xasOOZpO3BAVgVrKvsqKHV7w==",
+      "integrity": "sha1-xQclrzgIyKsCYP1gsB+/oluVT2k=",
       "dev": true
     },
     "commander": {
@@ -14955,7 +14969,7 @@
     "conventional-changelog-core": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/conventional-changelog-core/-/conventional-changelog-core-3.2.3.tgz",
-      "integrity": "sha512-LMMX1JlxPIq/Ez5aYAYS5CpuwbOk6QFp8O4HLAcZxe3vxoCtABkhfjetk8IYdRB9CDQGwJFLR3Dr55Za6XKgUQ==",
+      "integrity": "sha1-sxQQhW9DHIRwhqfctNLKGEp9iPs=",
       "dev": true,
       "requires": {
         "conventional-changelog-writer": "^4.0.6",
@@ -14997,7 +15011,7 @@
         "through2": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.2.tgz",
-          "integrity": "sha512-enaDQ4MUyP2W6ZyT6EsMzqBPZaM/avg8iuo+l2d3QCs0J+6RaqkHV/2/lOwDTueBHeJ/2LG9lrLW3d5rWPucuQ==",
+          "integrity": "sha1-mfiJMc/HYex2eLQdXXM2tbage/Q=",
           "dev": true,
           "requires": {
             "inherits": "^2.0.4",
@@ -15009,7 +15023,7 @@
     "conventional-changelog-preset-loader": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/conventional-changelog-preset-loader/-/conventional-changelog-preset-loader-2.3.4.tgz",
-      "integrity": "sha512-GEKRWkrSAZeTq5+YjUZOYxdHq+ci4dNwHvpaBC3+ENalzFWuCWa9EZXSuZBpkr72sMdKB+1fyDV4takK1Lf58g==",
+      "integrity": "sha1-FKhVq7/9WQJ/1gJYHx802YYupEw=",
       "dev": true
     },
     "conventional-changelog-writer": {
@@ -15079,7 +15093,7 @@
     "conventional-recommended-bump": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/conventional-recommended-bump/-/conventional-recommended-bump-5.0.1.tgz",
-      "integrity": "sha512-RVdt0elRcCxL90IrNP0fYCpq1uGt2MALko0eyeQ+zQuDVWtMGAy9ng6yYn3kax42lCj9+XBxQ8ZN6S9bdKxDhQ==",
+      "integrity": "sha1-WvY5A5R7bgied3Z2ActZLKuxBro=",
       "dev": true,
       "requires": {
         "concat-stream": "^2.0.0",
@@ -15112,7 +15126,7 @@
         "concat-stream": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
-          "integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==",
+          "integrity": "sha1-QUz1r3kKSMYKub5FJ9VtXkETPLE=",
           "dev": true,
           "requires": {
             "buffer-from": "^1.0.0",
@@ -15136,7 +15150,7 @@
         "meow": {
           "version": "4.0.1",
           "resolved": "https://registry.npmjs.org/meow/-/meow-4.0.1.tgz",
-          "integrity": "sha512-xcSBHD5Z86zaOc+781KrupuHAzeGXSLtiAOmBsiLDiPSaYSB6hdew2ng9EBAnZ62jagG9MHAOdxpDi/lWBFJ/A==",
+          "integrity": "sha1-1IWY9vSxRy81v2MXqVlFrONH+XU=",
           "dev": true,
           "requires": {
             "camelcase-keys": "^4.0.0",
@@ -15153,7 +15167,7 @@
         "minimist-options": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-3.0.2.tgz",
-          "integrity": "sha512-FyBrT/d0d4+uiZRbqznPXqw3IpZZG3gl3wKWiX784FycUKVwBt0uLBFkQrtE4tZOrgo78nZp2jnKz3L65T5LdQ==",
+          "integrity": "sha1-+6TIGRM54T7PTWG+sD8HAQPz2VQ=",
           "dev": true,
           "requires": {
             "arrify": "^1.0.1",
@@ -15408,6 +15422,11 @@
         }
       }
     },
+    "core-js": {
+      "version": "3.20.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.20.0.tgz",
+      "integrity": "sha512-KjbKU7UEfg4YPpskMtMXPhUKn7m/1OdTHTVjy09ScR2LVaoUXe8Jh0UdvN2EKUR6iKTJph52SJP95mAB0MnVLQ=="
+    },
     "core-js-compat": {
       "version": "3.19.1",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.19.1.tgz",
@@ -15925,7 +15944,7 @@
     "dateformat": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz",
-      "integrity": "sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==",
+      "integrity": "sha1-puN0maTZqc+F71hyBE1ikByYia4=",
       "dev": true
     },
     "deasync": {
@@ -16296,7 +16315,7 @@
     "deprecation": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz",
-      "integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==",
+      "integrity": "sha1-Y2jL20Cr8zc7UlrIfkomDDpwCRk=",
       "dev": true
     },
     "deps-sort": {
@@ -17408,23 +17427,22 @@
       }
     },
     "eslint-plugin-jsx-a11y": {
-      "version": "6.5.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.5.1.tgz",
-      "integrity": "sha512-sVCFKX9fllURnXT2JwLN5Qgo24Ug5NF6dxhkmxsMEUZhXRcGg+X3e1JbJ84YePQKBl5E0ZjAH5Q4rkdcGY99+g==",
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.4.1.tgz",
+      "integrity": "sha512-0rGPJBbwHoGNPU73/QCLP/vveMlM1b1Z9PponxO87jfr6tuH5ligXbDT6nHSSzBC8ovX2Z+BQu7Bk5D/Xgq9zg==",
       "dev": true,
       "requires": {
-        "@babel/runtime": "^7.16.3",
+        "@babel/runtime": "^7.11.2",
         "aria-query": "^4.2.2",
-        "array-includes": "^3.1.4",
+        "array-includes": "^3.1.1",
         "ast-types-flow": "^0.0.7",
-        "axe-core": "^4.3.5",
+        "axe-core": "^4.0.2",
         "axobject-query": "^2.2.0",
-        "damerau-levenshtein": "^1.0.7",
-        "emoji-regex": "^9.2.2",
+        "damerau-levenshtein": "^1.0.6",
+        "emoji-regex": "^9.0.0",
         "has": "^1.0.3",
-        "jsx-ast-utils": "^3.2.1",
-        "language-tags": "^1.0.5",
-        "minimatch": "^3.0.4"
+        "jsx-ast-utils": "^3.1.0",
+        "language-tags": "^1.0.5"
       },
       "dependencies": {
         "emoji-regex": {
@@ -17473,33 +17491,25 @@
       "dev": true
     },
     "eslint-plugin-react": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.27.0.tgz",
-      "integrity": "sha512-0Ut+CkzpppgFtoIhdzi2LpdpxxBvgFf99eFqWxJnUrO7mMe0eOiNpou6rvNYeVVV6lWZvTah0BFne7k5xHjARg==",
+      "version": "7.23.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.23.1.tgz",
+      "integrity": "sha512-MvFGhZjI8Z4HusajmSw0ougGrq3Gs4vT/0WgwksZgf5RrLrRa2oYAw56okU4tZJl8+j7IYNuTM+2RnFEuTSdRQ==",
       "dev": true,
       "requires": {
-        "array-includes": "^3.1.4",
-        "array.prototype.flatmap": "^1.2.5",
+        "array-includes": "^3.1.3",
+        "array.prototype.flatmap": "^1.2.4",
         "doctrine": "^2.1.0",
-        "estraverse": "^5.3.0",
+        "has": "^1.0.3",
         "jsx-ast-utils": "^2.4.1 || ^3.0.0",
         "minimatch": "^3.0.4",
-        "object.entries": "^1.1.5",
-        "object.fromentries": "^2.0.5",
-        "object.hasown": "^1.1.0",
-        "object.values": "^1.1.5",
+        "object.entries": "^1.1.3",
+        "object.fromentries": "^2.0.4",
+        "object.values": "^1.1.3",
         "prop-types": "^15.7.2",
         "resolve": "^2.0.0-next.3",
-        "semver": "^6.3.0",
-        "string.prototype.matchall": "^4.0.6"
+        "string.prototype.matchall": "^4.0.4"
       },
       "dependencies": {
-        "estraverse": {
-          "version": "5.3.0",
-          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
-          "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-          "dev": true
-        },
         "resolve": {
           "version": "2.0.0-next.3",
           "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.3.tgz",
@@ -17513,9 +17523,9 @@
       }
     },
     "eslint-plugin-react-hooks": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz",
-      "integrity": "sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz",
+      "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==",
       "dev": true
     },
     "eslint-plugin-standard": {
@@ -18193,7 +18203,7 @@
     "express-ws": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/express-ws/-/express-ws-4.0.0.tgz",
-      "integrity": "sha512-KEyUw8AwRET2iFjFsI1EJQrJ/fHeGiJtgpYgEWG3yDv4l/To/m3a2GaYfeGyB3lsWdvbesjF5XCMx+SVBgAAYw==",
+      "integrity": "sha1-2r2NyXRRZBiQKkH+bjDtlJtNNsQ=",
       "requires": {
         "ws": "^5.2.0"
       },
@@ -20070,7 +20080,7 @@
     "genfun": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/genfun/-/genfun-5.0.0.tgz",
-      "integrity": "sha512-KGDOARWVga7+rnB3z9Sd2Letx515owfk0hSxHGuqjANb1M+x2bGZGqHLiozPsYMdM2OubeMni/Hpwmjq6qIUhA==",
+      "integrity": "sha1-ndlxCgaQClxKW/V6yl2k5S/nZTc=",
       "dev": true
     },
     "gensync": {
@@ -20299,7 +20309,7 @@
     "get-port": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/get-port/-/get-port-4.2.0.tgz",
-      "integrity": "sha512-/b3jarXkH8KJoOMQc3uVGHASwGLPq3gSFJ7tgJm2diza+bydJPTGOibin2steecKeOylE8oY2JERlVWkAJO6yw==",
+      "integrity": "sha1-43Nosehjt2KcQ8WjI2Jflc8ksRk=",
       "dev": true
     },
     "get-stdin": {
@@ -20392,7 +20402,7 @@
     "git-raw-commits": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/git-raw-commits/-/git-raw-commits-2.0.0.tgz",
-      "integrity": "sha512-w4jFEJFgKXMQJ0H0ikBk2S+4KP2VEjhCvLCNqbNRQC8BgGWgLKNCO7a9K9LI+TVT7Gfoloje502sEnctibffgg==",
+      "integrity": "sha1-2Srd90RAwUvMXIPszj+3+KeRGLU=",
       "dev": true,
       "requires": {
         "dargs": "^4.0.1",
@@ -20434,7 +20444,7 @@
         "meow": {
           "version": "4.0.1",
           "resolved": "https://registry.npmjs.org/meow/-/meow-4.0.1.tgz",
-          "integrity": "sha512-xcSBHD5Z86zaOc+781KrupuHAzeGXSLtiAOmBsiLDiPSaYSB6hdew2ng9EBAnZ62jagG9MHAOdxpDi/lWBFJ/A==",
+          "integrity": "sha1-1IWY9vSxRy81v2MXqVlFrONH+XU=",
           "dev": true,
           "requires": {
             "camelcase-keys": "^4.0.0",
@@ -20451,7 +20461,7 @@
         "minimist-options": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-3.0.2.tgz",
-          "integrity": "sha512-FyBrT/d0d4+uiZRbqznPXqw3IpZZG3gl3wKWiX784FycUKVwBt0uLBFkQrtE4tZOrgo78nZp2jnKz3L65T5LdQ==",
+          "integrity": "sha1-+6TIGRM54T7PTWG+sD8HAQPz2VQ=",
           "dev": true,
           "requires": {
             "arrify": "^1.0.1",
@@ -20539,7 +20549,7 @@
     "git-semver-tags": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/git-semver-tags/-/git-semver-tags-2.0.3.tgz",
-      "integrity": "sha512-tj4FD4ww2RX2ae//jSrXZzrocla9db5h0V7ikPl1P/WwoZar9epdUhwR7XHXSgc+ZkNq72BEEerqQuicoEQfzA==",
+      "integrity": "sha1-SJiKcYrPWTgA+ZYiqVKnfEBb+jQ=",
       "dev": true,
       "requires": {
         "meow": "^4.0.0",
@@ -20578,7 +20588,7 @@
         "meow": {
           "version": "4.0.1",
           "resolved": "https://registry.npmjs.org/meow/-/meow-4.0.1.tgz",
-          "integrity": "sha512-xcSBHD5Z86zaOc+781KrupuHAzeGXSLtiAOmBsiLDiPSaYSB6hdew2ng9EBAnZ62jagG9MHAOdxpDi/lWBFJ/A==",
+          "integrity": "sha1-1IWY9vSxRy81v2MXqVlFrONH+XU=",
           "dev": true,
           "requires": {
             "camelcase-keys": "^4.0.0",
@@ -20595,7 +20605,7 @@
         "minimist-options": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-3.0.2.tgz",
-          "integrity": "sha512-FyBrT/d0d4+uiZRbqznPXqw3IpZZG3gl3wKWiX784FycUKVwBt0uLBFkQrtE4tZOrgo78nZp2jnKz3L65T5LdQ==",
+          "integrity": "sha1-+6TIGRM54T7PTWG+sD8HAQPz2VQ=",
           "dev": true,
           "requires": {
             "arrify": "^1.0.1",
@@ -21331,7 +21341,7 @@
     "hard-rejection": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz",
-      "integrity": "sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==",
+      "integrity": "sha1-HG7aXBaFxjlCdm15u0Cudzzs2IM=",
       "dev": true
     },
     "harmony-reflect": {
@@ -21985,7 +21995,7 @@
     "init-package-json": {
       "version": "1.10.3",
       "resolved": "https://registry.npmjs.org/init-package-json/-/init-package-json-1.10.3.tgz",
-      "integrity": "sha512-zKSiXKhQveNteyhcj1CoOP8tqp1QuxPIPBl8Bid99DGLFqA1p87M6lNgfjJHSBoWJJlidGOv5rWjyYKEB3g2Jw==",
+      "integrity": "sha1-Rf/i9hCoyhNPK9HbVjeyNQcPbL4=",
       "dev": true,
       "requires": {
         "glob": "^7.1.1",
@@ -22001,7 +22011,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -22013,7 +22023,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
           "dev": true
         }
       }
@@ -28171,7 +28181,7 @@
     "lerna": {
       "version": "3.22.1",
       "resolved": "https://registry.npmjs.org/lerna/-/lerna-3.22.1.tgz",
-      "integrity": "sha512-vk1lfVRFm+UuEFA7wkLKeSF7Iz13W+N/vFd48aW2yuS7Kv0RbNm2/qcDPV863056LMfkRlsEe+QYOw3palj5Lg==",
+      "integrity": "sha1-ggJ6w9qcYn/YvwLM/v+AapjmW2I=",
       "dev": true,
       "requires": {
         "@lerna/add": "3.21.0",
@@ -28635,7 +28645,7 @@
     "lodash.template": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
-      "integrity": "sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==",
+      "integrity": "sha1-+XYZXPPzR9DV9SSDVp/oAxzM6Ks=",
       "dev": true,
       "requires": {
         "lodash._reinterpolate": "^3.0.0",
@@ -28645,7 +28655,7 @@
     "lodash.templatesettings": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz",
-      "integrity": "sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==",
+      "integrity": "sha1-5IExDwSdPPbUfpEq0JMTsVTw+zM=",
       "dev": true,
       "requires": {
         "lodash._reinterpolate": "^3.0.0"
@@ -29332,7 +29342,7 @@
     "min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
-      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "integrity": "sha1-pj9oFnOzBXH76LwlaGrnRu76mGk=",
       "dev": true
     },
     "mini-css-extract-plugin": {
@@ -29440,7 +29450,7 @@
     "minimist-options": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz",
-      "integrity": "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==",
+      "integrity": "sha1-wGVXE8U6ii69d/+iR9NCxA8BBhk=",
       "dev": true,
       "requires": {
         "arrify": "^1.0.1",
@@ -30247,7 +30257,7 @@
     "modify-values": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz",
-      "integrity": "sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==",
+      "integrity": "sha1-s5OfpgVUZHTj4+PGPWS9Q7TuYCI=",
       "dev": true
     },
     "module-deps": {
@@ -30594,7 +30604,7 @@
     "multimatch": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-3.0.0.tgz",
-      "integrity": "sha512-22foS/gqQfANZ3o+W7ST2x25ueHDVNWl/b9OlGcLpy/iKxjCpvcNCM51YCenUi7Mt/jAjjqv8JwZRs8YP5sRjA==",
+      "integrity": "sha1-DiU0zGvCONmrZ+G5zV/Nhabb9ws=",
       "dev": true,
       "requires": {
         "array-differ": "^2.0.3",
@@ -30641,7 +30651,7 @@
     "mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
-      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "integrity": "sha1-lQCAV6Vsr63CvGPd5/n/aVWUjjI=",
       "dev": true,
       "requires": {
         "any-promise": "^1.0.0",
@@ -31318,7 +31328,7 @@
     "node-fetch-npm": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/node-fetch-npm/-/node-fetch-npm-2.0.4.tgz",
-      "integrity": "sha512-iOuIQDWDyjhv9qSDrj9aq/klt6F9z1p2otB3AV7v3zBDcL/x+OfGsvGQZZCcMZbUf4Ujw1xGNQkjvGnVT22cKg==",
+      "integrity": "sha1-ZQfQ4XqewL477FFpWKSXzsVL9aQ=",
       "dev": true,
       "requires": {
         "encoding": "^0.1.11",
@@ -34061,7 +34071,7 @@
     "npm-lifecycle": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/npm-lifecycle/-/npm-lifecycle-3.1.5.tgz",
-      "integrity": "sha512-lDLVkjfZmvmfvpvBzA4vzee9cn+Me4orq0QF8glbswJVEbIcSNWib7qGOffolysc3teCqbbPZZkzbr3GQZTL1g==",
+      "integrity": "sha1-mILTZCuMgsgVeCoS5qG/7tACYwk=",
       "dev": true,
       "requires": {
         "byline": "^5.0.0",
@@ -34077,7 +34087,7 @@
         "node-gyp": {
           "version": "5.1.1",
           "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-5.1.1.tgz",
-          "integrity": "sha512-WH0WKGi+a4i4DUt2mHnvocex/xPLp9pYt5R6M2JdFB7pJ7Z34hveZ4nDTGTiLXCkitA9T8HFZjhinBCiVHYcWw==",
+          "integrity": "sha1-65Ffe2Mck30oLjOu1Ey3oCX2Kj4=",
           "dev": true,
           "requires": {
             "env-paths": "^2.2.0",
@@ -34096,7 +34106,7 @@
         "nopt": {
           "version": "4.0.3",
           "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz",
-          "integrity": "sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==",
+          "integrity": "sha1-o3XK2dAv2SEnjZVMIlTVqlfhXkg=",
           "dev": true,
           "requires": {
             "abbrev": "1",
@@ -34106,7 +34116,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
           "dev": true
         }
       }
@@ -35922,16 +35932,6 @@
         "es-abstract": "^1.19.1"
       }
     },
-    "object.hasown": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.0.tgz",
-      "integrity": "sha512-MhjYRfj3GBlhSkDHo6QmvgjRLXQ2zndabdf3nX0yTyZK9rPfxb6uRpAac8HXNLy1GpqWtZ81Qh4v3uOls2sRAg==",
-      "dev": true,
-      "requires": {
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.1"
-      }
-    },
     "object.map": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/object.map/-/object.map-1.0.1.tgz",
@@ -36020,7 +36020,7 @@
     "octokit-pagination-methods": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/octokit-pagination-methods/-/octokit-pagination-methods-1.1.0.tgz",
-      "integrity": "sha512-fZ4qZdQ2nxJvtcasX7Ghl+WlWS/d9IgnBIwFZXVNNZUmzpno91SX5bc5vuxiuKoCtK78XxGGNuSCrDC7xYB3OQ==",
+      "integrity": "sha1-z0cu3J1VEFX573P25CtNu0yAvqQ=",
       "dev": true
     },
     "on-finished": {
@@ -36482,7 +36482,7 @@
     "os-name": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/os-name/-/os-name-3.1.0.tgz",
-      "integrity": "sha512-h8L+8aNjNcMpo/mAIBPn5PXCM16iyPGjHNWo6U1YO8sJTMHtEtyczI6QJnLoplswm6goopQkqc7OAnjhWcugVg==",
+      "integrity": "sha1-3sGdlmKW4c1i1wGlpm7h3ernCAE=",
       "dev": true,
       "requires": {
         "macos-release": "^2.2.0",
@@ -38126,7 +38126,7 @@
     "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==",
+      "integrity": "sha1-WMO3TL+7ldMEYll1qi8ISDKaAQs=",
       "requires": {
         "react-is": "^16.3.2",
         "warning": "^4.0.0"
@@ -38153,7 +38153,7 @@
     "protoduck": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/protoduck/-/protoduck-5.0.1.tgz",
-      "integrity": "sha512-WxoCeDCoCBY55BMvj4cAEjdVUFGRWed9ZxPlqTKYyw1nDDTQ4pqmnIMAGfJlg7Dx35uB/M+PHJPTmGOvaCaPTg==",
+      "integrity": "sha1-A8NlnKGAB7aaUP2Cp+vMUWJhFR8=",
       "dev": true,
       "requires": {
         "genfun": "^5.0.0"
@@ -38365,7 +38365,7 @@
     "quick-lru": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz",
-      "integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==",
+      "integrity": "sha1-W4h48ROlgheEjGSCAmxz4bpXcn8=",
       "dev": true
     },
     "raf-schd": {
@@ -38539,7 +38539,7 @@
     "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=="
+      "integrity": "sha1-TxonOv38jzSIqMUWv9p4+HI1I2I="
     },
     "react-overlays": {
       "version": "5.1.1",
@@ -38636,7 +38636,7 @@
     "read-cmd-shim": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/read-cmd-shim/-/read-cmd-shim-1.0.5.tgz",
-      "integrity": "sha512-v5yCqQ/7okKoZZkBQUAfTsQ3sVJtXdNfbPnI5cceppoxEVLYA3k+VtV2omkeo8MS94JCy4fSiUwlRBAwCVRPUA==",
+      "integrity": "sha1-h+Q+ulAJi6WjLQzrWDq45DuWHBY=",
       "dev": true,
       "requires": {
         "graceful-fs": "^4.1.2"
@@ -38708,7 +38708,7 @@
     "read-package-tree": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/read-package-tree/-/read-package-tree-5.3.1.tgz",
-      "integrity": "sha512-mLUDsD5JVtlZxjSlPPx1RETkNjjvQYuweKwNVt1Sn8kP5Jh44pvYuUHCp6xSVDZWbNxVxG5lyZJ921aJH61sTw==",
+      "integrity": "sha1-oyy2TH8x64pvMe8G+c7fdAaP5jY=",
       "dev": true,
       "requires": {
         "read-package-json": "^2.0.0",
@@ -38897,7 +38897,7 @@
     "redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
-      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "integrity": "sha1-5Ve3mYMWu1PJ8fVvpiY1LGljBZ8=",
       "dev": true,
       "requires": {
         "indent-string": "^4.0.0",
@@ -38937,9 +38937,9 @@
       }
     },
     "regenerator-runtime": {
-      "version": "0.13.9",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+      "version": "0.13.7",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
     },
     "regenerator-transform": {
       "version": "0.14.5",
@@ -40845,7 +40845,7 @@
     "solc": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/solc/-/solc-0.7.4.tgz",
-      "integrity": "sha512-IVLqAfUkJqgTS0JIgFPeC50ehUeBXu2eE+iU+rqb6UeOyf6w/BB/EsNcTSTpjtUti8BTG/sCd2qVhrWVYy7p0g==",
+      "integrity": "sha1-nF7YGuBpLj5hTkfNW1ALD5SFuY0=",
       "dev": true,
       "requires": {
         "command-exists": "^1.2.8",
@@ -40862,7 +40862,7 @@
         "commander": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/commander/-/commander-3.0.2.tgz",
-          "integrity": "sha512-Gar0ASD4BDyKC4hl4DwHqDrmvjoxWKZigVnAbn5H1owvm4CxCPdb0HQDehwNYMJpla5+M2tPmPARzhtYuwpHow==",
+          "integrity": "sha1-aDfD+2d62ZM9HPukLdFNURfWs54=",
           "dev": true
         },
         "fs-extra": {
@@ -40890,7 +40890,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
           "dev": true
         },
         "tmp": {
@@ -41071,7 +41071,7 @@
     "split": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz",
-      "integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==",
+      "integrity": "sha1-YFvZvjA6pZ+zX5Ip++oN3snqB9k=",
       "dev": true,
       "requires": {
         "through": "2"
@@ -41470,36 +41470,6 @@
         "internal-slot": "^1.0.3",
         "regexp.prototype.flags": "^1.3.1",
         "side-channel": "^1.0.4"
-      },
-      "dependencies": {
-        "es-abstract": {
-          "version": "1.19.1",
-          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.1.tgz",
-          "integrity": "sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.2",
-            "es-to-primitive": "^1.2.1",
-            "function-bind": "^1.1.1",
-            "get-intrinsic": "^1.1.1",
-            "get-symbol-description": "^1.0.0",
-            "has": "^1.0.3",
-            "has-symbols": "^1.0.2",
-            "internal-slot": "^1.0.3",
-            "is-callable": "^1.2.4",
-            "is-negative-zero": "^2.0.1",
-            "is-regex": "^1.1.4",
-            "is-shared-array-buffer": "^1.0.1",
-            "is-string": "^1.0.7",
-            "is-weakref": "^1.0.1",
-            "object-inspect": "^1.11.0",
-            "object-keys": "^1.1.1",
-            "object.assign": "^4.1.2",
-            "string.prototype.trimend": "^1.0.4",
-            "string.prototype.trimstart": "^1.0.4",
-            "unbox-primitive": "^1.0.1"
-          }
-        }
       }
     },
     "string.prototype.padend": {
@@ -41587,7 +41557,7 @@
     "strip-indent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
-      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "integrity": "sha1-wy4c7pQLazQyx3G8LFS8znPNMAE=",
       "dev": true,
       "requires": {
         "min-indent": "^1.0.0"
@@ -41601,7 +41571,7 @@
     "strong-log-transformer": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/strong-log-transformer/-/strong-log-transformer-2.1.0.tgz",
-      "integrity": "sha512-B3Hgul+z0L9a236FAUC9iZsL+nVHgoCJnqCbN588DjYxvGXaXaaFbfmQ/JhvKjZwsOukuR72XbHv71Qkug0HxA==",
+      "integrity": "sha1-D17XjTJeBCGsb5D38Q5pHWrjrhA=",
       "dev": true,
       "requires": {
         "duplexer": "^0.1.1",
@@ -42446,7 +42416,7 @@
         "make-dir": {
           "version": "1.3.0",
           "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
-          "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
+          "integrity": "sha1-ecEDO4BRW9bSTsmTPoYMp17ifww=",
           "dev": true,
           "requires": {
             "pify": "^3.0.0"
@@ -42699,7 +42669,7 @@
     "text-extensions": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/text-extensions/-/text-extensions-1.9.0.tgz",
-      "integrity": "sha512-wiBrwC1EhBelW12Zy26JeOUkQ5mRu+5o8rpsJk5+2t+Y5vE7e842qtZDQ2g1NpX/29HdyFeJ4nSIhI47ENSxlQ==",
+      "integrity": "sha1-GFPkX+45yUXOb2w2stZZtaq8KiY=",
       "dev": true
     },
     "text-hex": {
@@ -42716,7 +42686,7 @@
     "thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
-      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "integrity": "sha1-iTLmhqQGYDigFt2eLKRq3Zg4qV8=",
       "dev": true,
       "requires": {
         "any-promise": "^1.0.0"
@@ -43700,7 +43670,7 @@
     "universal-user-agent": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-4.0.1.tgz",
-      "integrity": "sha512-LnST3ebHwVL2aNe4mejI9IQh2HfZ1RLo8Io2HugSif8ekzD1TlWpHpColOB/eh8JHMLkGH3Akqf040I+4ylNxg==",
+      "integrity": "sha1-/Y1st3OmeacJ6WfvgoijH8wD5Vc=",
       "dev": true,
       "requires": {
         "os-name": "^3.1.0"
@@ -44340,7 +44310,7 @@
     "warning": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
-      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "integrity": "sha1-Fungd+uKhtavfWSqHgX9hbRnjKM=",
       "requires": {
         "loose-envify": "^1.0.0"
       }
@@ -45839,7 +45809,7 @@
     "write-json-file": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/write-json-file/-/write-json-file-3.2.0.tgz",
-      "integrity": "sha512-3xZqT7Byc2uORAatYiP3DHUUAVEkNOswEWNs9H5KXiicRTvzYzYqKjYc4G7p+8pltvAw641lVByKVtMpf+4sYQ==",
+      "integrity": "sha1-Zbvcns2KFFjhWVJ3DMut/P9f5io=",
       "dev": true,
       "requires": {
         "detect-indent": "^5.0.0",
@@ -45862,7 +45832,7 @@
         "write-file-atomic": {
           "version": "2.4.3",
           "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz",
-          "integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==",
+          "integrity": "sha1-H9Lprh3z51uNjDZ0Q8aS1MqB9IE=",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.11",
@@ -45875,7 +45845,7 @@
     "write-pkg": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/write-pkg/-/write-pkg-3.2.0.tgz",
-      "integrity": "sha512-tX2ifZ0YqEFOF1wjRW2Pk93NLsj02+n1UP5RvO6rCs0K6R2g1padvf006cY74PQJKMGS2r42NK7FD0dG6Y6paw==",
+      "integrity": "sha1-DheP6Xgg04mokovHlTXb5ows/yE=",
       "dev": true,
       "requires": {
         "sort-keys": "^2.0.0",
@@ -45885,7 +45855,7 @@
         "make-dir": {
           "version": "1.3.0",
           "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
-          "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
+          "integrity": "sha1-ecEDO4BRW9bSTsmTPoYMp17ifww=",
           "dev": true,
           "requires": {
             "pify": "^3.0.0"
@@ -45909,7 +45879,7 @@
         "write-file-atomic": {
           "version": "2.4.3",
           "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz",
-          "integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==",
+          "integrity": "sha1-H9Lprh3z51uNjDZ0Q8aS1MqB9IE=",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.11",
@@ -46232,4 +46202,4 @@
       "dev": true
     }
   }
-}
\ No newline at end of file
+}

From 74a6a966cfbda951059b6a088868f391cc064ccf Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Thu, 23 Dec 2021 15:53:05 +0100
Subject: [PATCH 015/168] fixing panels

---
 .../src/app/components/main-panel.js          | 61 ---------------
 .../src/app/components/main-panel.tsx         | 56 ++++++++++++++
 .../src/app/components/{panel.js => panel.ts} | 48 +++++++++---
 .../components/plugin-manager-component.js    |  2 +-
 .../{side-panel.js => side-panel.tsx}         | 28 +++----
 apps/remix-ide/tsconfig.json                  |  1 +
 .../src/lib/remix-ui-main-panel.tsx           |  2 -
 libs/remix-ui/side-panel/src/index.ts         |  2 +-
 .../side-panel/src/lib/panel-plugin.tsx       | 26 +++++++
 .../src/lib/remix-ui-side-panel.tsx           | 74 -------------------
 .../side-panel/src/lib/side/panel-header.tsx  | 29 ++++++++
 .../panel.css}                                | 69 ++++++++++++-----
 .../src/lib/side/remix-ui-panel.tsx           | 27 +++++++
 .../side-panel/src/lib/sidepanel-element.tsx  | 16 ----
 .../side-panel/src/lib/types/index.ts         |  7 ++
 15 files changed, 250 insertions(+), 198 deletions(-)
 delete mode 100644 apps/remix-ide/src/app/components/main-panel.js
 create mode 100644 apps/remix-ide/src/app/components/main-panel.tsx
 rename apps/remix-ide/src/app/components/{panel.js => panel.ts} (56%)
 rename apps/remix-ide/src/app/components/{side-panel.js => side-panel.tsx} (73%)
 create mode 100644 libs/remix-ui/side-panel/src/lib/panel-plugin.tsx
 delete mode 100644 libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx
 create mode 100644 libs/remix-ui/side-panel/src/lib/side/panel-header.tsx
 rename libs/remix-ui/side-panel/src/lib/{remix-ui-side-panel.module.css => side/panel.css} (57%)
 create mode 100644 libs/remix-ui/side-panel/src/lib/side/remix-ui-panel.tsx
 delete mode 100644 libs/remix-ui/side-panel/src/lib/sidepanel-element.tsx
 create mode 100644 libs/remix-ui/side-panel/src/lib/types/index.ts

diff --git a/apps/remix-ide/src/app/components/main-panel.js b/apps/remix-ide/src/app/components/main-panel.js
deleted file mode 100644
index f1568228db..0000000000
--- a/apps/remix-ide/src/app/components/main-panel.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/* global Node, requestAnimationFrame */   // eslint-disable-line
-import React from 'react' // eslint-disable-line
-import ReactDOM from 'react-dom' // eslint-disable-line
-import { RemixUiMainPanel } from '@remix-ui/main-panel' // eslint-disable-line
-import { AbstractPanel } from './panel'
-import * as packageJson from '../../../../../package.json'
-
-const profile = {
-  name: 'mainPanel',
-  displayName: 'Main Panel',
-  description: '',
-  version: packageJson.version,
-  methods: ['addView', 'removeView']
-}
-
-export class MainPanel extends AbstractPanel {
-  constructor (config) {
-    super(profile)
-    this.mainelement = document.createElement('div')
-    this.mainelement.setAttribute('class', 'mainPanelPluginsContainer')
-    this.config = config
-  }
-
-  onActivation () {
-    this.renderComponent()
-  }
-
-  focus (name) {
-    this.emit('focusChanged', name)
-    super.focus(name)
-    this.renderComponent()
-  }
-
-  addView (profile, view) {
-    super.addView(profile, view)
-    view.style.height = '100%'
-    this.renderComponent()
-  }
-
-  removeView (profile) {
-    super.removeView(profile)
-    this.renderComponent()
-  }
-
-  onActivation () {
-    this.renderComponent()
-  }
-
-  render () {
-    return this.mainelement
-  }
-
-  renderComponent () {
-    ReactDOM.render(
-      <RemixUiMainPanel
-        plugin={this} contents={this.contents}
-      />,
-      this.mainelement
-    )
-  }
-}
diff --git a/apps/remix-ide/src/app/components/main-panel.tsx b/apps/remix-ide/src/app/components/main-panel.tsx
new file mode 100644
index 0000000000..8dcf187fff
--- /dev/null
+++ b/apps/remix-ide/src/app/components/main-panel.tsx
@@ -0,0 +1,56 @@
+import React from 'react' // eslint-disable-line
+import { AbstractPanel } from './panel'
+import ReactDOM from 'react-dom' // eslint-disable-line
+import { RemixUiSidePanel } from '@remix-ui/side-panel'
+import packageJson from '../../../../../package.json'
+
+const profile = {
+  name: 'mainPanel',
+  displayName: 'Main Panel',
+  description: '',
+  version: packageJson.version,
+  methods: ['addView', 'removeView']
+}
+
+export class MainPanel extends AbstractPanel {
+    element: HTMLDivElement
+    constructor (config) {
+      super(profile)
+      this.element = document.createElement('div')
+      this.element.setAttribute('class', 'mainPanelPluginsContainer')
+      // this.config = config
+    }
+
+    onActivation () {
+      this.renderComponent()
+    }
+
+    focus (name) {
+      this.emit('focusChanged', name)
+      super.focus(name)
+      this.renderComponent()
+    }
+
+    addView (profile, view) {
+      super.addView(profile, view)
+      this.renderComponent()
+    }
+
+    removeView (profile) {
+      super.removeView(profile)
+      this.renderComponent()
+    }
+
+    async showContent (name) {
+      super.showContent(name)
+      this.renderComponent()
+    }
+
+    render () {
+      return this.element
+    }
+
+    renderComponent () {
+      ReactDOM.render(<RemixUiSidePanel plugins={this.plugins}/>, this.element)
+    }
+}
diff --git a/apps/remix-ide/src/app/components/panel.js b/apps/remix-ide/src/app/components/panel.ts
similarity index 56%
rename from apps/remix-ide/src/app/components/panel.js
rename to apps/remix-ide/src/app/components/panel.ts
index 8ba0df1d1d..a84c0d5e99 100644
--- a/apps/remix-ide/src/app/components/panel.js
+++ b/apps/remix-ide/src/app/components/panel.ts
@@ -1,23 +1,44 @@
 import React from 'react' // eslint-disable-line
 import { EventEmitter } from 'events'
-const EventManager = require('../../lib/events')
+import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
 import { HostPlugin } from '@remixproject/engine-web' // eslint-disable-line
 
+import { Profile } from '@remixproject/plugin-utils'
+const EventManager = require('../../lib/events')
+
 /** Abstract class used for hosting the view of a plugin */
+type PluginRecord = {
+  profile: Profile
+  view: any
+  active: boolean
+}
 export class AbstractPanel extends HostPlugin {
+
+  events: EventEmitter
+  event: any
+  verticalIcons: VerticalIcons
+  public plugins: Record<string, PluginRecord> = {}
   constructor (profile) {
     super(profile)
     this.events = new EventEmitter()
     this.event = new EventManager()
-    this.contents = {}
-    this.active = undefined
+  }
+
+  currentFocus (): string {
+    return Object.values(this.plugins).find(plugin => {
+      return plugin.active
+    }).profile.name
   }
 
   addView (profile, view) {
     console.log(profile, view)
-    if (this.contents[profile.name]) throw new Error(`Plugin ${profile.name} already rendered`)
-    this.contents[profile.name] = view
-    //this.contents[profile.name].style.display = 'none'
+    if (this.plugins[profile.name]) throw new Error(`Plugin ${profile.name} already rendered`)
+    this.plugins[profile.name] = {
+      profile: profile,
+      view: view,
+      active: false
+    }
+    console.log(this.plugins)
   }
 
   removeView (profile) {
@@ -31,9 +52,7 @@ export class AbstractPanel extends HostPlugin {
    * @param {String} name The name of the plugin to remove
    */
   remove (name) {
-    const el = this.contents[name]
-    delete this.contents[name]
-    if (name === this.active) this.active = undefined
+    delete this.plugins[name]
   }
 
   /**
@@ -41,16 +60,21 @@ export class AbstractPanel extends HostPlugin {
    * @param {String} name The name of the plugin to display the content
    */
   showContent (name) {
-    if (!this.contents[name]) throw new Error(`Plugin ${name} is not yet activated`)
+    if (!this.plugins[name]) throw new Error(`Plugin ${name} is not yet activated`)
     // hiding the current view and display the `moduleName`
+    /*
     if (this.active) {
       this.contents[this.active].style.display = 'none'
     }
     this.contents[name].style.display = 'flex'
     this.contents[name].style.paddingTop = '20%'
     this.contents[name].style.flexDirection = 'column'
-
-    this.active = name
+    */
+    Object.values(this.plugins).forEach(plugin => {
+      plugin.active = false
+    })
+    this.plugins[name].active = true
+    console.log(this.plugins)
   }
 
   focus (name) {
diff --git a/apps/remix-ide/src/app/components/plugin-manager-component.js b/apps/remix-ide/src/app/components/plugin-manager-component.js
index f877e62e8e..e86a62da92 100644
--- a/apps/remix-ide/src/app/components/plugin-manager-component.js
+++ b/apps/remix-ide/src/app/components/plugin-manager-component.js
@@ -96,7 +96,7 @@ class PluginManagerComponent extends ViewPlugin {
   }
 
   render () {
-    return <div>test</div>
+    return this.htmlElement
   }
 
   getAndFilterPlugins (filter) {
diff --git a/apps/remix-ide/src/app/components/side-panel.js b/apps/remix-ide/src/app/components/side-panel.tsx
similarity index 73%
rename from apps/remix-ide/src/app/components/side-panel.js
rename to apps/remix-ide/src/app/components/side-panel.tsx
index 1ec66c16cf..d3a800d8d1 100644
--- a/apps/remix-ide/src/app/components/side-panel.js
+++ b/apps/remix-ide/src/app/components/side-panel.tsx
@@ -1,8 +1,10 @@
 import React from 'react' // eslint-disable-line
 import { AbstractPanel } from './panel'
 import ReactDOM from 'react-dom' // eslint-disable-line
-import { RemixUiSidePanel } from '@remix-ui/side-panel' // eslint-disable-line
-import * as packageJson from '../../../../../package.json'
+import { RemixUiSidePanel } from '@remix-ui/side-panel'
+import packageJson from '../../../../../package.json'
+import { RemixAppManager } from '../../remixAppManager'
+import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
 // const csjs = require('csjs-inject')
 
 const sidePanel = {
@@ -15,16 +17,19 @@ const sidePanel = {
 
 // TODO merge with vertical-icons.js
 export class SidePanel extends AbstractPanel {
-  constructor (appManager, verticalIcons) {
+  appManager: RemixAppManager
+  sideelement: HTMLDivElement
+  verticalIcons: VerticalIcons;
+  constructor (appManager: RemixAppManager, verticalIcons: VerticalIcons) {
     super(sidePanel)
     this.appManager = appManager
-    this.sideelement = document.createElement('span')
+    this.sideelement = document.createElement('div')
     this.verticalIcons = verticalIcons
 
     // Toggle content
     verticalIcons.events.on('toggleContent', (name) => {
-      if (!this.contents[name]) return
-      if (this.active === name) {
+      if (!this.plugins[name]) return
+      if (this.plugins[name].active) {
         // TODO: Only keep `this.emit` (issue#2210)
         this.emit('toggle', name)
         this.events.emit('toggle', name)
@@ -37,7 +42,7 @@ export class SidePanel extends AbstractPanel {
     })
     // Force opening
     verticalIcons.events.on('showContent', (name) => {
-      if (!this.contents[name]) return
+      if (!this.plugins[name]) return
       this.showContent(name)
       // TODO: Only keep `this.emit` (issue#2210)
       this.emit('showing', name)
@@ -74,6 +79,7 @@ export class SidePanel extends AbstractPanel {
   async showContent (name) {
     super.showContent(name)
     this.emit('focusChanged', name)
+    this.renderComponent()
   }
 
   render () {
@@ -82,12 +88,6 @@ export class SidePanel extends AbstractPanel {
 
   renderComponent () {
     console.log('render side panel')
-    ReactDOM.render(
-      <RemixUiSidePanel
-        plugin={this} contents={this.contents}
-      />
-      ,
-      this.sideelement
-    )
+    ReactDOM.render(<RemixUiSidePanel plugins={this.plugins}/>, this.sideelement)
   }
 }
diff --git a/apps/remix-ide/tsconfig.json b/apps/remix-ide/tsconfig.json
index b32eb87bd7..6a9d252c2d 100644
--- a/apps/remix-ide/tsconfig.json
+++ b/apps/remix-ide/tsconfig.json
@@ -4,6 +4,7 @@
     "jsx": "react",
     "allowJs": true,
     "esModuleInterop": true,
+    "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
     "types": ["node", "jest"]
   },
diff --git a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx
index dd3cd5820b..e52f84322a 100644
--- a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx
+++ b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx
@@ -1,7 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react' // eslint-disable-line
 import './remix-ui-main-panel.module.css';
-
-/* eslint-disable-next-line */
 export interface RemixUiMainPanelProps {
   plugin: any
   contents: [any]
diff --git a/libs/remix-ui/side-panel/src/index.ts b/libs/remix-ui/side-panel/src/index.ts
index d45ee2522b..b51d7e9428 100644
--- a/libs/remix-ui/side-panel/src/index.ts
+++ b/libs/remix-ui/side-panel/src/index.ts
@@ -1 +1 @@
-export * from './lib/remix-ui-side-panel';
+export { default as RemixUiSidePanel } from './lib/side/remix-ui-panel';
diff --git a/libs/remix-ui/side-panel/src/lib/panel-plugin.tsx b/libs/remix-ui/side-panel/src/lib/panel-plugin.tsx
new file mode 100644
index 0000000000..7ca3da18bc
--- /dev/null
+++ b/libs/remix-ui/side-panel/src/lib/panel-plugin.tsx
@@ -0,0 +1,26 @@
+import React, { useEffect, useRef, useState } from 'react' // eslint-disable-line
+import { PluginRecord } from './types'
+import './side/panel.css';
+interface panelPLuginProps {
+    pluginRecord: PluginRecord
+}
+
+const PanelPlugin = (props: panelPLuginProps) => {
+    const sidePanelRef = useRef(null)
+    const [view, setView] = useState<JSX.Element | HTMLDivElement>()
+    useEffect(() => {
+        if (sidePanelRef.current) {
+          if (props.pluginRecord.view) {
+            if (React.isValidElement(props.pluginRecord.view)) {
+              setView(props.pluginRecord.view)
+            }else{
+              sidePanelRef.current.appendChild(props.pluginRecord.view)
+            }
+          }
+        }
+      }, [])
+
+      return <div className={props.pluginRecord.active? 'plugItIn active':'d-none'} ref={sidePanelRef}>{view}</div>
+}
+
+export default PanelPlugin
\ No newline at end of file
diff --git a/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx b/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx
deleted file mode 100644
index 797a510a58..0000000000
--- a/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React, { useEffect, useState } from 'react' // eslint-disable-line
-import './remix-ui-side-panel.module.css';
-import SidePanelElement from './sidepanel-element';
-
-/* eslint-disable-next-line */
-export interface RemixUiSidePanelProps {
-  plugin: any
-  contents: any
-}
-
-export function RemixUiSidePanel(props: RemixUiSidePanelProps) {
-  const [view, setView] = useState('')
-  const [dockLink, setDockLink] = useState(false)
-  const [versionWarning, setVersionWarning] = useState<boolean>(false)
-  const [versionWarningBeta, setVersionWarningBeta] = useState(false)
-  const [profile, setProfile] = useState('')
-  const [profileDocsLink, setProfileDocsLink] = useState('')
-  const [name, setName] = useState(' - ')
-
-  useEffect(() => {
-    console.log('load')
-  }, [])
-
-  const getProfile = async () => {
-    console.log({ active: props.plugin.active })
-    if (props.plugin.active) {
-      const profile = await props.plugin.appManager.getProfile(props.plugin.active)
-      setProfileDocsLink(profile.documentation)
-      profile.displayName ? setName(profile.displayName) : setName(profile.name)
-      profile.documentation ? setDockLink(true) : setDockLink(false)
-      if (profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)) {
-        setVersionWarning(true)
-      } else {
-        setVersionWarning(false)
-      }
-      // Beta
-      if (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) {
-        setVersionWarningBeta(true)
-      } else {
-        setVersionWarningBeta(false)
-      }
-    }
-  }
-
-  const renderHeader = () => {
-    getProfile()
-    return (
-      <header className='swapitHeader'>
-        <h6 className="swapitTitle" data-id="sidePanelSwapitTitle">{name}</h6>
-        {dockLink ? (<a href={profileDocsLink} className="titleInfo" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>) : ''}
-        {versionWarning ? (<small title="Version Alpha" className="badge-light versionBadge">alpha</small>) : null}
-        {versionWarningBeta ? (<small title="Version Beta" className="badge-light versionBadge">beta</small>) : null}
-      </header>
-    )
-  }
-
-  return (
-    <section className='panel plugin-manager'>
-      {renderHeader()}
-      <div className="pluginsContainer">
-        {Object.values(props.contents).map((x) => {
-          if (React.isValidElement(x)) {
-            return x
-          } else {
-            return <SidePanelElement render={x} />
-          }
-        })}
-      </div>
-    </section>
-
-  );
-}
-
-export default RemixUiSidePanel;
diff --git a/libs/remix-ui/side-panel/src/lib/side/panel-header.tsx b/libs/remix-ui/side-panel/src/lib/side/panel-header.tsx
new file mode 100644
index 0000000000..dc562b8fdd
--- /dev/null
+++ b/libs/remix-ui/side-panel/src/lib/side/panel-header.tsx
@@ -0,0 +1,29 @@
+/* eslint-disable jsx-a11y/anchor-has-content */
+import React, { useEffect, useRef, useState } from 'react' // eslint-disable-line
+import { PluginRecord } from '../types';
+import './panel.css';
+
+export interface RemixUiSidePanelProps {
+    plugins: Record<string, PluginRecord>;
+  }
+const SidePanelHeader = (props: RemixUiSidePanelProps) => {
+    const [plugin, setPlugin] = useState<PluginRecord>()
+
+    useEffect(() => {
+        if (props.plugins) {
+            const p = Object.values(props.plugins).find((pluginRecord) => {
+                return pluginRecord.active === true
+             })
+             setPlugin(p)
+        }
+    
+
+    }, [props])
+
+    return  (
+    <header data-id='sidePanelSwapitTitle' className='swapitHeader'><h6>{plugin?.profile.displayName || plugin?.profile.name}</h6>
+    {plugin?.profile.documentation ? (<a href={plugin.profile.documentation} className="titleInfo" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>) : ''}
+    </header>)
+}
+
+export default SidePanelHeader
\ No newline at end of file
diff --git a/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.module.css b/libs/remix-ui/side-panel/src/lib/side/panel.css
similarity index 57%
rename from libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.module.css
rename to libs/remix-ui/side-panel/src/lib/side/panel.css
index 018a752156..54bef7aa84 100644
--- a/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.module.css
+++ b/libs/remix-ui/side-panel/src/lib/side/panel.css
@@ -4,44 +4,79 @@
     display: flex;
     flex-direction: column;
     flex: auto;
-  }
-  .swapitTitle {
+}
+
+.swapitTitle {
     margin: 0;
     text-transform: uppercase;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-  }
-  .swapitTitle i{
+}
+
+.swapitTitle i {
     padding-left: 6px;
     font-size: 14px;
-  }
-  .swapitHeader {
+}
+
+.swapitHeader {
     display: flex;
     align-items: center;
     padding: 16px 24px 15px;
     justify-content: space-between;
-  }
-  .icons i {
+    text-transform: uppercase;
+}
+
+.icons i {
     height: 80%;
     cursor: pointer;
-  }
-  .pluginsContainer {
+}
+
+.pluginsContainer {
     height: 100%;
     overflow-y: auto;
-  }
-  .titleInfo {
+}
+
+.titleInfo {
     padding-left: 10px;
-  }
-  .versionBadge {
+}
+
+.versionBadge {
     background-color: var(--light);
     padding: 0 7px;
     font-weight: bolder;
     margin-left: 5px;
     text-transform: lowercase;
     cursor: default;
-  }
-  iframe {
+}
+
+iframe {
+    height: 100%;
+    width: 100%;
+    border: 0;
+}
+
+.plugins {
+    height: 100%;
+}
+
+.plugItIn {
+    display: none;
+    height: 100%;
+}
+
+.plugItIn>div {
+    overflow-y: auto;
+    overflow-x: hidden;
     height: 100%;
-  }
+    width: 100%;
+}
 
+.plugItIn.active {
+    display: block;
+}
+
+.pluginsContainer {
+    height: 100%;
+    overflow-y: hidden;
+}
\ No newline at end of file
diff --git a/libs/remix-ui/side-panel/src/lib/side/remix-ui-panel.tsx b/libs/remix-ui/side-panel/src/lib/side/remix-ui-panel.tsx
new file mode 100644
index 0000000000..71d701e9eb
--- /dev/null
+++ b/libs/remix-ui/side-panel/src/lib/side/remix-ui-panel.tsx
@@ -0,0 +1,27 @@
+import React, { useEffect, useState } from 'react' // eslint-disable-line
+import './panel.css';
+import SidePanelHeader from './panel-header';
+import PanelPlugin from '../panel-plugin';
+import { PluginRecord } from '../types';
+
+/* eslint-disable-next-line */
+export interface RemixUiSidePanelProps {
+  plugins: Record<string, PluginRecord>;
+}
+
+export function RemixUiSidePanel(props: RemixUiSidePanelProps) {
+
+  return (
+    <div className='panel plugin-manager'>
+      <SidePanelHeader plugins={props.plugins}></SidePanelHeader>
+      <div className="pluginsContainer">
+        {Object.values(props.plugins).map((pluginRecord) => {
+            return <PanelPlugin pluginRecord={pluginRecord} />
+        })}
+      </div>
+    </div>
+
+  );
+}
+
+export default RemixUiSidePanel;
diff --git a/libs/remix-ui/side-panel/src/lib/sidepanel-element.tsx b/libs/remix-ui/side-panel/src/lib/sidepanel-element.tsx
deleted file mode 100644
index 8b43d0f35c..0000000000
--- a/libs/remix-ui/side-panel/src/lib/sidepanel-element.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react' // eslint-disable-line
-
-const SidePanelElement = (props: any) => {
-    const sidePanelRef = useRef(null)
-    useEffect(() => {
-        if (sidePanelRef.current) {
-          if (props.render) {
-            sidePanelRef.current.appendChild(props.render)
-          }
-        }
-      }, [])
-
-      return <div ref={sidePanelRef}></div>
-}
-
-export default SidePanelElement
\ No newline at end of file
diff --git a/libs/remix-ui/side-panel/src/lib/types/index.ts b/libs/remix-ui/side-panel/src/lib/types/index.ts
new file mode 100644
index 0000000000..ec4fd1456a
--- /dev/null
+++ b/libs/remix-ui/side-panel/src/lib/types/index.ts
@@ -0,0 +1,7 @@
+import { Profile } from "@remixproject/plugin-utils";
+
+export type PluginRecord = {
+    profile: Profile
+    view: any
+    active: boolean
+  }
\ No newline at end of file

From fba9b61d3d9e237e259125f9e082bf3e95c2d7e9 Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Thu, 23 Dec 2021 16:00:56 +0100
Subject: [PATCH 016/168] move stuff

---
 libs/remix-ui/side-panel/src/index.ts                         | 2 +-
 libs/remix-ui/side-panel/src/lib/{side => }/panel-header.tsx  | 2 +-
 libs/remix-ui/side-panel/src/lib/panel-plugin.tsx             | 2 +-
 libs/remix-ui/side-panel/src/lib/{side => }/panel.css         | 0
 .../remix-ui/side-panel/src/lib/{side => }/remix-ui-panel.tsx | 4 ++--
 5 files changed, 5 insertions(+), 5 deletions(-)
 rename libs/remix-ui/side-panel/src/lib/{side => }/panel-header.tsx (93%)
 rename libs/remix-ui/side-panel/src/lib/{side => }/panel.css (100%)
 rename libs/remix-ui/side-panel/src/lib/{side => }/remix-ui-panel.tsx (89%)

diff --git a/libs/remix-ui/side-panel/src/index.ts b/libs/remix-ui/side-panel/src/index.ts
index b51d7e9428..38c0f5feeb 100644
--- a/libs/remix-ui/side-panel/src/index.ts
+++ b/libs/remix-ui/side-panel/src/index.ts
@@ -1 +1 @@
-export { default as RemixUiSidePanel } from './lib/side/remix-ui-panel';
+export { default as RemixUiSidePanel } from './lib/remix-ui-panel';
diff --git a/libs/remix-ui/side-panel/src/lib/side/panel-header.tsx b/libs/remix-ui/side-panel/src/lib/panel-header.tsx
similarity index 93%
rename from libs/remix-ui/side-panel/src/lib/side/panel-header.tsx
rename to libs/remix-ui/side-panel/src/lib/panel-header.tsx
index dc562b8fdd..69cca98de6 100644
--- a/libs/remix-ui/side-panel/src/lib/side/panel-header.tsx
+++ b/libs/remix-ui/side-panel/src/lib/panel-header.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/anchor-has-content */
 import React, { useEffect, useRef, useState } from 'react' // eslint-disable-line
-import { PluginRecord } from '../types';
+import { PluginRecord } from './types';
 import './panel.css';
 
 export interface RemixUiSidePanelProps {
diff --git a/libs/remix-ui/side-panel/src/lib/panel-plugin.tsx b/libs/remix-ui/side-panel/src/lib/panel-plugin.tsx
index 7ca3da18bc..51b3fbcbc6 100644
--- a/libs/remix-ui/side-panel/src/lib/panel-plugin.tsx
+++ b/libs/remix-ui/side-panel/src/lib/panel-plugin.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react' // eslint-disable-line
 import { PluginRecord } from './types'
-import './side/panel.css';
+import './panel.css';
 interface panelPLuginProps {
     pluginRecord: PluginRecord
 }
diff --git a/libs/remix-ui/side-panel/src/lib/side/panel.css b/libs/remix-ui/side-panel/src/lib/panel.css
similarity index 100%
rename from libs/remix-ui/side-panel/src/lib/side/panel.css
rename to libs/remix-ui/side-panel/src/lib/panel.css
diff --git a/libs/remix-ui/side-panel/src/lib/side/remix-ui-panel.tsx b/libs/remix-ui/side-panel/src/lib/remix-ui-panel.tsx
similarity index 89%
rename from libs/remix-ui/side-panel/src/lib/side/remix-ui-panel.tsx
rename to libs/remix-ui/side-panel/src/lib/remix-ui-panel.tsx
index 71d701e9eb..b4eb9de13c 100644
--- a/libs/remix-ui/side-panel/src/lib/side/remix-ui-panel.tsx
+++ b/libs/remix-ui/side-panel/src/lib/remix-ui-panel.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react' // eslint-disable-line
 import './panel.css';
 import SidePanelHeader from './panel-header';
-import PanelPlugin from '../panel-plugin';
-import { PluginRecord } from '../types';
+import PanelPlugin from './panel-plugin';
+import { PluginRecord } from './types';
 
 /* eslint-disable-next-line */
 export interface RemixUiSidePanelProps {

From 1be2119f79ae211fa8a7463b0316db7b9934579f Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Thu, 23 Dec 2021 16:24:28 +0100
Subject: [PATCH 017/168] fix keys

---
 libs/remix-ui/side-panel/src/lib/remix-ui-panel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/remix-ui/side-panel/src/lib/remix-ui-panel.tsx b/libs/remix-ui/side-panel/src/lib/remix-ui-panel.tsx
index b4eb9de13c..4fb1500606 100644
--- a/libs/remix-ui/side-panel/src/lib/remix-ui-panel.tsx
+++ b/libs/remix-ui/side-panel/src/lib/remix-ui-panel.tsx
@@ -16,7 +16,7 @@ export function RemixUiSidePanel(props: RemixUiSidePanelProps) {
       <SidePanelHeader plugins={props.plugins}></SidePanelHeader>
       <div className="pluginsContainer">
         {Object.values(props.plugins).map((pluginRecord) => {
-            return <PanelPlugin pluginRecord={pluginRecord} />
+            return <PanelPlugin key={pluginRecord.profile.name} pluginRecord={pluginRecord} />
         })}
       </div>
     </div>

From ea28cec79a6268f9231e80ab5408015d20741664 Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Thu, 23 Dec 2021 16:34:16 +0100
Subject: [PATCH 018/168] single panel

---
 apps/remix-ide/src/app/components/main-panel.tsx    | 4 ++--
 apps/remix-ide/src/app/components/side-panel.tsx    | 4 ++--
 libs/remix-ui/side-panel/src/index.ts               | 2 +-
 libs/remix-ui/side-panel/src/lib/panel-header.tsx   | 4 ++--
 libs/remix-ui/side-panel/src/lib/remix-ui-panel.tsx | 6 +++---
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/remix-ide/src/app/components/main-panel.tsx b/apps/remix-ide/src/app/components/main-panel.tsx
index 8dcf187fff..4cc97246d2 100644
--- a/apps/remix-ide/src/app/components/main-panel.tsx
+++ b/apps/remix-ide/src/app/components/main-panel.tsx
@@ -1,7 +1,7 @@
 import React from 'react' // eslint-disable-line
 import { AbstractPanel } from './panel'
 import ReactDOM from 'react-dom' // eslint-disable-line
-import { RemixUiSidePanel } from '@remix-ui/side-panel'
+import { RemixPanel } from '@remix-ui/side-panel'
 import packageJson from '../../../../../package.json'
 
 const profile = {
@@ -51,6 +51,6 @@ export class MainPanel extends AbstractPanel {
     }
 
     renderComponent () {
-      ReactDOM.render(<RemixUiSidePanel plugins={this.plugins}/>, this.element)
+      ReactDOM.render(<RemixPanel plugins={this.plugins}/>, this.element)
     }
 }
diff --git a/apps/remix-ide/src/app/components/side-panel.tsx b/apps/remix-ide/src/app/components/side-panel.tsx
index d3a800d8d1..274613044e 100644
--- a/apps/remix-ide/src/app/components/side-panel.tsx
+++ b/apps/remix-ide/src/app/components/side-panel.tsx
@@ -1,7 +1,7 @@
 import React from 'react' // eslint-disable-line
 import { AbstractPanel } from './panel'
 import ReactDOM from 'react-dom' // eslint-disable-line
-import { RemixUiSidePanel } from '@remix-ui/side-panel'
+import { RemixPanel } from '@remix-ui/side-panel'
 import packageJson from '../../../../../package.json'
 import { RemixAppManager } from '../../remixAppManager'
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
@@ -88,6 +88,6 @@ export class SidePanel extends AbstractPanel {
 
   renderComponent () {
     console.log('render side panel')
-    ReactDOM.render(<RemixUiSidePanel plugins={this.plugins}/>, this.sideelement)
+    ReactDOM.render(<RemixPanel plugins={this.plugins}/>, this.sideelement)
   }
 }
diff --git a/libs/remix-ui/side-panel/src/index.ts b/libs/remix-ui/side-panel/src/index.ts
index 38c0f5feeb..8952e584ec 100644
--- a/libs/remix-ui/side-panel/src/index.ts
+++ b/libs/remix-ui/side-panel/src/index.ts
@@ -1 +1 @@
-export { default as RemixUiSidePanel } from './lib/remix-ui-panel';
+export { default as RemixPanel } from './lib/remix-ui-panel';
diff --git a/libs/remix-ui/side-panel/src/lib/panel-header.tsx b/libs/remix-ui/side-panel/src/lib/panel-header.tsx
index 69cca98de6..6d3230c847 100644
--- a/libs/remix-ui/side-panel/src/lib/panel-header.tsx
+++ b/libs/remix-ui/side-panel/src/lib/panel-header.tsx
@@ -3,10 +3,10 @@ import React, { useEffect, useRef, useState } from 'react' // eslint-disable-lin
 import { PluginRecord } from './types';
 import './panel.css';
 
-export interface RemixUiSidePanelProps {
+export interface RemixPanelProps {
     plugins: Record<string, PluginRecord>;
   }
-const SidePanelHeader = (props: RemixUiSidePanelProps) => {
+const SidePanelHeader = (props: RemixPanelProps) => {
     const [plugin, setPlugin] = useState<PluginRecord>()
 
     useEffect(() => {
diff --git a/libs/remix-ui/side-panel/src/lib/remix-ui-panel.tsx b/libs/remix-ui/side-panel/src/lib/remix-ui-panel.tsx
index 4fb1500606..c518867eed 100644
--- a/libs/remix-ui/side-panel/src/lib/remix-ui-panel.tsx
+++ b/libs/remix-ui/side-panel/src/lib/remix-ui-panel.tsx
@@ -5,11 +5,11 @@ import PanelPlugin from './panel-plugin';
 import { PluginRecord } from './types';
 
 /* eslint-disable-next-line */
-export interface RemixUiSidePanelProps {
+export interface RemixPanelProps {
   plugins: Record<string, PluginRecord>;
 }
 
-export function RemixUiSidePanel(props: RemixUiSidePanelProps) {
+export function RemixPanel(props: RemixPanelProps) {
 
   return (
     <div className='panel plugin-manager'>
@@ -24,4 +24,4 @@ export function RemixUiSidePanel(props: RemixUiSidePanelProps) {
   );
 }
 
-export default RemixUiSidePanel;
+export default RemixPanel;

From 23497be0b31b33b52ffed452cb9379d692ce05f1 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Sat, 25 Dec 2021 10:31:27 +0100
Subject: [PATCH 019/168] mv & rename

---
 .../{hidden-panel.js => hidden-panel.tsx}     |  25 +-
 .../src/app/components/main-panel.tsx         |   2 +-
 .../src/app/components/side-panel.tsx         |   8 +-
 libs/remix-ui/{side-panel => panel}/.babelrc  |   0
 .../{side-panel => panel}/.eslintrc.json      |   0
 libs/remix-ui/{side-panel => panel}/README.md |   0
 .../{side-panel => panel}/src/index.ts        |   0
 .../src/lib/panel-header.tsx                  |   4 +-
 .../src/lib/panel-plugin.tsx                  |   4 +-
 .../{side-panel => panel}/src/lib/panel.css   |   0
 .../src/lib/remix-ui-panel.tsx                |   8 +-
 .../src/lib/types/index.ts                    |   0
 .../{side-panel => panel}/tsconfig.json       |   0
 .../{side-panel => panel}/tsconfig.lib.json   |   0
 nx.json                                       |   5 +-
 package-lock.json                             | 438 +++++++++---------
 tsconfig.base.json                            |   3 +-
 workspace.json                                |  23 +-
 18 files changed, 246 insertions(+), 274 deletions(-)
 rename apps/remix-ide/src/app/components/{hidden-panel.js => hidden-panel.tsx} (52%)
 rename libs/remix-ui/{side-panel => panel}/.babelrc (100%)
 rename libs/remix-ui/{side-panel => panel}/.eslintrc.json (100%)
 rename libs/remix-ui/{side-panel => panel}/README.md (100%)
 rename libs/remix-ui/{side-panel => panel}/src/index.ts (100%)
 rename libs/remix-ui/{side-panel => panel}/src/lib/panel-header.tsx (91%)
 rename libs/remix-ui/{side-panel => panel}/src/lib/panel-plugin.tsx (89%)
 rename libs/remix-ui/{side-panel => panel}/src/lib/panel.css (100%)
 rename libs/remix-ui/{side-panel => panel}/src/lib/remix-ui-panel.tsx (66%)
 rename libs/remix-ui/{side-panel => panel}/src/lib/types/index.ts (100%)
 rename libs/remix-ui/{side-panel => panel}/tsconfig.json (100%)
 rename libs/remix-ui/{side-panel => panel}/tsconfig.lib.json (100%)

diff --git a/apps/remix-ide/src/app/components/hidden-panel.js b/apps/remix-ide/src/app/components/hidden-panel.tsx
similarity index 52%
rename from apps/remix-ide/src/app/components/hidden-panel.js
rename to apps/remix-ide/src/app/components/hidden-panel.tsx
index 65a13be773..a179d9eb76 100644
--- a/apps/remix-ide/src/app/components/hidden-panel.js
+++ b/apps/remix-ide/src/app/components/hidden-panel.tsx
@@ -1,13 +1,9 @@
-import React from 'react' // eslint-disable-line
+// eslint-disable-next-line no-use-before-define
+import React from 'react'
+import ReactDOM from 'react-dom' // eslint-disable-line
 import { AbstractPanel } from './panel'
 import * as packageJson from '../../../../../package.json'
-const csjs = require('csjs-inject')
-
-const css = csjs`
-  .pluginsContainer {
-    display: none;
-  }
-`
+import { RemixPanel } from '@remix-ui/panel'
 
 const profile = {
   name: 'hiddenPanel',
@@ -18,22 +14,17 @@ const profile = {
 }
 
 export class HiddenPanel extends AbstractPanel {
+  el: HTMLDivElement
   constructor () {
     super(profile)
-    this.container = document.createElement('div')
+    this.el = document.createElement('div')
   }
 
   render () {
-    return this.container
+    return this.el
   }
 
   renderComponent () {
-    return ReactDOM.render(
-      <div class={css.pluginsContainer}>
-        {this.element}
-      </div>
-      ,
-      this.container
-    )
+    ReactDOM.render(<RemixPanel plugins={this.plugins}/>, this.el)
   }
 }
diff --git a/apps/remix-ide/src/app/components/main-panel.tsx b/apps/remix-ide/src/app/components/main-panel.tsx
index 4cc97246d2..79e4f9b64e 100644
--- a/apps/remix-ide/src/app/components/main-panel.tsx
+++ b/apps/remix-ide/src/app/components/main-panel.tsx
@@ -1,7 +1,7 @@
 import React from 'react' // eslint-disable-line
 import { AbstractPanel } from './panel'
 import ReactDOM from 'react-dom' // eslint-disable-line
-import { RemixPanel } from '@remix-ui/side-panel'
+import { RemixPanel } from '@remix-ui/panel'
 import packageJson from '../../../../../package.json'
 
 const profile = {
diff --git a/apps/remix-ide/src/app/components/side-panel.tsx b/apps/remix-ide/src/app/components/side-panel.tsx
index 274613044e..125622441c 100644
--- a/apps/remix-ide/src/app/components/side-panel.tsx
+++ b/apps/remix-ide/src/app/components/side-panel.tsx
@@ -1,7 +1,8 @@
-import React from 'react' // eslint-disable-line
+// eslint-disable-next-line no-use-before-define
+import React from 'react'
+import ReactDOM from 'react-dom'
 import { AbstractPanel } from './panel'
-import ReactDOM from 'react-dom' // eslint-disable-line
-import { RemixPanel } from '@remix-ui/side-panel'
+import { RemixPanel } from '@remix-ui/panel'
 import packageJson from '../../../../../package.json'
 import { RemixAppManager } from '../../remixAppManager'
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
@@ -87,7 +88,6 @@ export class SidePanel extends AbstractPanel {
   }
 
   renderComponent () {
-    console.log('render side panel')
     ReactDOM.render(<RemixPanel plugins={this.plugins}/>, this.sideelement)
   }
 }
diff --git a/libs/remix-ui/side-panel/.babelrc b/libs/remix-ui/panel/.babelrc
similarity index 100%
rename from libs/remix-ui/side-panel/.babelrc
rename to libs/remix-ui/panel/.babelrc
diff --git a/libs/remix-ui/side-panel/.eslintrc.json b/libs/remix-ui/panel/.eslintrc.json
similarity index 100%
rename from libs/remix-ui/side-panel/.eslintrc.json
rename to libs/remix-ui/panel/.eslintrc.json
diff --git a/libs/remix-ui/side-panel/README.md b/libs/remix-ui/panel/README.md
similarity index 100%
rename from libs/remix-ui/side-panel/README.md
rename to libs/remix-ui/panel/README.md
diff --git a/libs/remix-ui/side-panel/src/index.ts b/libs/remix-ui/panel/src/index.ts
similarity index 100%
rename from libs/remix-ui/side-panel/src/index.ts
rename to libs/remix-ui/panel/src/index.ts
diff --git a/libs/remix-ui/side-panel/src/lib/panel-header.tsx b/libs/remix-ui/panel/src/lib/panel-header.tsx
similarity index 91%
rename from libs/remix-ui/side-panel/src/lib/panel-header.tsx
rename to libs/remix-ui/panel/src/lib/panel-header.tsx
index 6d3230c847..caf8eba5e1 100644
--- a/libs/remix-ui/side-panel/src/lib/panel-header.tsx
+++ b/libs/remix-ui/panel/src/lib/panel-header.tsx
@@ -6,7 +6,7 @@ import './panel.css';
 export interface RemixPanelProps {
     plugins: Record<string, PluginRecord>;
   }
-const SidePanelHeader = (props: RemixPanelProps) => {
+const RemixUIPanelHeader = (props: RemixPanelProps) => {
     const [plugin, setPlugin] = useState<PluginRecord>()
 
     useEffect(() => {
@@ -26,4 +26,4 @@ const SidePanelHeader = (props: RemixPanelProps) => {
     </header>)
 }
 
-export default SidePanelHeader
\ No newline at end of file
+export default RemixUIPanelHeader
\ No newline at end of file
diff --git a/libs/remix-ui/side-panel/src/lib/panel-plugin.tsx b/libs/remix-ui/panel/src/lib/panel-plugin.tsx
similarity index 89%
rename from libs/remix-ui/side-panel/src/lib/panel-plugin.tsx
rename to libs/remix-ui/panel/src/lib/panel-plugin.tsx
index 51b3fbcbc6..4c128c8ef4 100644
--- a/libs/remix-ui/side-panel/src/lib/panel-plugin.tsx
+++ b/libs/remix-ui/panel/src/lib/panel-plugin.tsx
@@ -5,7 +5,7 @@ interface panelPLuginProps {
     pluginRecord: PluginRecord
 }
 
-const PanelPlugin = (props: panelPLuginProps) => {
+const RemixUIPanelPlugin = (props: panelPLuginProps) => {
     const sidePanelRef = useRef(null)
     const [view, setView] = useState<JSX.Element | HTMLDivElement>()
     useEffect(() => {
@@ -23,4 +23,4 @@ const PanelPlugin = (props: panelPLuginProps) => {
       return <div className={props.pluginRecord.active? 'plugItIn active':'d-none'} ref={sidePanelRef}>{view}</div>
 }
 
-export default PanelPlugin
\ No newline at end of file
+export default RemixUIPanelPlugin
\ No newline at end of file
diff --git a/libs/remix-ui/side-panel/src/lib/panel.css b/libs/remix-ui/panel/src/lib/panel.css
similarity index 100%
rename from libs/remix-ui/side-panel/src/lib/panel.css
rename to libs/remix-ui/panel/src/lib/panel.css
diff --git a/libs/remix-ui/side-panel/src/lib/remix-ui-panel.tsx b/libs/remix-ui/panel/src/lib/remix-ui-panel.tsx
similarity index 66%
rename from libs/remix-ui/side-panel/src/lib/remix-ui-panel.tsx
rename to libs/remix-ui/panel/src/lib/remix-ui-panel.tsx
index c518867eed..c36d4d58de 100644
--- a/libs/remix-ui/side-panel/src/lib/remix-ui-panel.tsx
+++ b/libs/remix-ui/panel/src/lib/remix-ui-panel.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react' // eslint-disable-line
 import './panel.css';
-import SidePanelHeader from './panel-header';
-import PanelPlugin from './panel-plugin';
+import RemixUIPanelHeader from './panel-header';
+import RemixUIPanelPlugin from './panel-plugin';
 import { PluginRecord } from './types';
 
 /* eslint-disable-next-line */
@@ -13,10 +13,10 @@ export function RemixPanel(props: RemixPanelProps) {
 
   return (
     <div className='panel plugin-manager'>
-      <SidePanelHeader plugins={props.plugins}></SidePanelHeader>
+      <RemixUIPanelHeader plugins={props.plugins}></RemixUIPanelHeader>
       <div className="pluginsContainer">
         {Object.values(props.plugins).map((pluginRecord) => {
-            return <PanelPlugin key={pluginRecord.profile.name} pluginRecord={pluginRecord} />
+            return <RemixUIPanelPlugin key={pluginRecord.profile.name} pluginRecord={pluginRecord} />
         })}
       </div>
     </div>
diff --git a/libs/remix-ui/side-panel/src/lib/types/index.ts b/libs/remix-ui/panel/src/lib/types/index.ts
similarity index 100%
rename from libs/remix-ui/side-panel/src/lib/types/index.ts
rename to libs/remix-ui/panel/src/lib/types/index.ts
diff --git a/libs/remix-ui/side-panel/tsconfig.json b/libs/remix-ui/panel/tsconfig.json
similarity index 100%
rename from libs/remix-ui/side-panel/tsconfig.json
rename to libs/remix-ui/panel/tsconfig.json
diff --git a/libs/remix-ui/side-panel/tsconfig.lib.json b/libs/remix-ui/panel/tsconfig.lib.json
similarity index 100%
rename from libs/remix-ui/side-panel/tsconfig.lib.json
rename to libs/remix-ui/panel/tsconfig.lib.json
diff --git a/nx.json b/nx.json
index bf26ace9d8..e5ffb002ad 100644
--- a/nx.json
+++ b/nx.json
@@ -139,10 +139,7 @@
     "remix-ui-tabs": {
       "tags": []
     },
-    "remix-ui-main-panel": {
-      "tags": []
-    },
-    "remix-ui-side-panel": {
+    "remix-ui-panel": {
       "tags": []
     }
   },
diff --git a/package-lock.json b/package-lock.json
index b4dc857e20..6c7c89cf8c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2999,7 +2999,7 @@
     "@evocateur/libnpmaccess": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@evocateur/libnpmaccess/-/libnpmaccess-3.1.2.tgz",
-      "integrity": "sha1-7Pf2zmsATp+UKwmNkiAL5KSxyEU=",
+      "integrity": "sha512-KSCAHwNWro0CF2ukxufCitT9K5LjL/KuMmNzSu8wuwN2rjyKHD8+cmOsiybK+W5hdnwc5M1SmRlVCaMHQo+3rg==",
       "dev": true,
       "requires": {
         "@evocateur/npm-registry-fetch": "^4.0.0",
@@ -3012,13 +3012,13 @@
         "aproba": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
-          "integrity": "sha1-UlILiuW1aSFbNU78DKo/4eRaitw=",
+          "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
           "dev": true
         },
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -3030,7 +3030,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         }
       }
@@ -3038,7 +3038,7 @@
     "@evocateur/libnpmpublish": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@evocateur/libnpmpublish/-/libnpmpublish-1.2.2.tgz",
-      "integrity": "sha1-Vd8J0tyhNq+6nIjHWconIZjbnxo=",
+      "integrity": "sha512-MJrrk9ct1FeY9zRlyeoyMieBjGDG9ihyyD9/Ft6MMrTxql9NyoEx2hw9casTIP4CdqEVu+3nQ2nXxoJ8RCXyFg==",
       "dev": true,
       "requires": {
         "@evocateur/npm-registry-fetch": "^4.0.0",
@@ -3055,13 +3055,13 @@
         "aproba": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
-          "integrity": "sha1-UlILiuW1aSFbNU78DKo/4eRaitw=",
+          "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
           "dev": true
         },
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -3073,7 +3073,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         },
         "ssri": {
@@ -3090,7 +3090,7 @@
     "@evocateur/npm-registry-fetch": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@evocateur/npm-registry-fetch/-/npm-registry-fetch-4.0.0.tgz",
-      "integrity": "sha1-jEw4dm2NMtMgD8sKg/BktXNl7WY=",
+      "integrity": "sha512-k1WGfKRQyhJpIr+P17O5vLIo2ko1PFLKwoetatdduUSt/aQ4J2sJrJwwatdI5Z3SiYk/mRH9S3JpdmMFd/IK4g==",
       "dev": true,
       "requires": {
         "JSONStream": "^1.3.4",
@@ -3114,7 +3114,7 @@
         "agentkeepalive": {
           "version": "3.5.2",
           "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-3.5.2.tgz",
-          "integrity": "sha1-oROSTdP6JKC8O3gQjEUMKr7gD2c=",
+          "integrity": "sha512-e0L/HNe6qkQ7H19kTlRRqUibEAwDK5AFk6y3PtMsuut2VAH6+Q4xZml1tNDJD7kSAyqmbG/K08K5WEJYtUrSlQ==",
           "dev": true,
           "requires": {
             "humanize-ms": "^1.2.1"
@@ -3161,7 +3161,7 @@
         "http-cache-semantics": {
           "version": "3.8.1",
           "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz",
-          "integrity": "sha1-ObDhat2bYFvwqe89nar0hDtMrNI=",
+          "integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==",
           "dev": true
         },
         "http-proxy-agent": {
@@ -3177,7 +3177,7 @@
         "https-proxy-agent": {
           "version": "2.2.4",
           "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz",
-          "integrity": "sha1-TuenN6vZJniik9mzShr00NCMeHs=",
+          "integrity": "sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==",
           "dev": true,
           "requires": {
             "agent-base": "^4.3.0",
@@ -3187,7 +3187,7 @@
         "make-fetch-happen": {
           "version": "5.0.2",
           "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-5.0.2.tgz",
-          "integrity": "sha1-qoOHEE8mh+3KAchofuRQE9AtGb0=",
+          "integrity": "sha512-07JHC0r1ykIoruKO8ifMXu+xEU8qOXDFETylktdug6vJDACnP+HKevOu3PXyNPzFyTSlz8vrBYlBO1JZRe8Cag==",
           "dev": true,
           "requires": {
             "agentkeepalive": "^3.4.1",
@@ -3212,7 +3212,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -3240,7 +3240,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         },
         "socks": {
@@ -3288,7 +3288,7 @@
     "@evocateur/pacote": {
       "version": "9.6.5",
       "resolved": "https://registry.npmjs.org/@evocateur/pacote/-/pacote-9.6.5.tgz",
-      "integrity": "sha1-M94yuiELbxfCDrq01JfvxnVfSuU=",
+      "integrity": "sha512-EI552lf0aG2nOV8NnZpTxNo2PcXKPmDbF9K8eCBFQdIZwHNGN/mi815fxtmUMa2wTa1yndotICIDt/V0vpEx2w==",
       "dev": true,
       "requires": {
         "@evocateur/npm-registry-fetch": "^4.0.0",
@@ -3334,7 +3334,7 @@
         "agentkeepalive": {
           "version": "3.5.2",
           "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-3.5.2.tgz",
-          "integrity": "sha1-oROSTdP6JKC8O3gQjEUMKr7gD2c=",
+          "integrity": "sha512-e0L/HNe6qkQ7H19kTlRRqUibEAwDK5AFk6y3PtMsuut2VAH6+Q4xZml1tNDJD7kSAyqmbG/K08K5WEJYtUrSlQ==",
           "dev": true,
           "requires": {
             "humanize-ms": "^1.2.1"
@@ -3381,7 +3381,7 @@
         "http-cache-semantics": {
           "version": "3.8.1",
           "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz",
-          "integrity": "sha1-ObDhat2bYFvwqe89nar0hDtMrNI=",
+          "integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==",
           "dev": true
         },
         "http-proxy-agent": {
@@ -3397,7 +3397,7 @@
         "https-proxy-agent": {
           "version": "2.2.4",
           "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz",
-          "integrity": "sha1-TuenN6vZJniik9mzShr00NCMeHs=",
+          "integrity": "sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==",
           "dev": true,
           "requires": {
             "agent-base": "^4.3.0",
@@ -3407,7 +3407,7 @@
         "make-fetch-happen": {
           "version": "5.0.2",
           "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-5.0.2.tgz",
-          "integrity": "sha1-qoOHEE8mh+3KAchofuRQE9AtGb0=",
+          "integrity": "sha512-07JHC0r1ykIoruKO8ifMXu+xEU8qOXDFETylktdug6vJDACnP+HKevOu3PXyNPzFyTSlz8vrBYlBO1JZRe8Cag==",
           "dev": true,
           "requires": {
             "agentkeepalive": "^3.4.1",
@@ -3432,7 +3432,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -3444,7 +3444,7 @@
         "npm-packlist": {
           "version": "1.4.8",
           "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz",
-          "integrity": "sha1-Vu5swTW5+YrT1Rwcldoiu7my7z4=",
+          "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==",
           "dev": true,
           "requires": {
             "ignore-walk": "^3.0.1",
@@ -3455,7 +3455,7 @@
         "npm-pick-manifest": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/npm-pick-manifest/-/npm-pick-manifest-3.0.2.tgz",
-          "integrity": "sha1-9Nnl/UviFT5fTl+be+jcQZqZq7c=",
+          "integrity": "sha512-wNprTNg+X5nf+tDi+hbjdHhM4bX+mKqv6XmPh7B5eG+QY9VARfQPfCEH013H5GqfNj6ee8Ij2fg8yk0mzps1Vw==",
           "dev": true,
           "requires": {
             "figgy-pudding": "^3.5.1",
@@ -3482,7 +3482,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         },
         "socks": {
@@ -5212,7 +5212,7 @@
     "@lerna/add": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/add/-/add-3.21.0.tgz",
-      "integrity": "sha1-JwB73nHMewopaas8LwrkFXi0V3s=",
+      "integrity": "sha512-vhUXXF6SpufBE1EkNEXwz1VLW03f177G9uMOFMQkp6OJ30/PWg4Ekifuz9/3YfgB2/GH8Tu4Lk3O51P2Hskg/A==",
       "dev": true,
       "requires": {
         "@evocateur/pacote": "^9.6.3",
@@ -5230,7 +5230,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -5242,7 +5242,7 @@
             "semver": {
               "version": "5.7.1",
               "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
               "dev": true
             }
           }
@@ -5258,7 +5258,7 @@
     "@lerna/bootstrap": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/bootstrap/-/bootstrap-3.21.0.tgz",
-      "integrity": "sha1-vNG2Ub5bCXCyDY+uBMhkVIEjrtY=",
+      "integrity": "sha512-mtNHlXpmvJn6JTu0KcuTTPl2jLsDNud0QacV/h++qsaKbhAaJr/FElNZ5s7MwZFUM3XaDmvWzHKaszeBMHIbBw==",
       "dev": true,
       "requires": {
         "@lerna/command": "3.21.0",
@@ -5289,7 +5289,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -5301,7 +5301,7 @@
             "semver": {
               "version": "5.7.1",
               "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
               "dev": true
             }
           }
@@ -5317,7 +5317,7 @@
     "@lerna/changed": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/changed/-/changed-3.21.0.tgz",
-      "integrity": "sha1-EI4V9nm/4HevUA9YJIxjTxBE6gs=",
+      "integrity": "sha512-hzqoyf8MSHVjZp0gfJ7G8jaz+++mgXYiNs9iViQGA8JlN/dnWLI5sWDptEH3/B30Izo+fdVz0S0s7ydVE3pWIw==",
       "dev": true,
       "requires": {
         "@lerna/collect-updates": "3.20.0",
@@ -5329,7 +5329,7 @@
     "@lerna/check-working-tree": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/check-working-tree/-/check-working-tree-3.16.5.tgz",
-      "integrity": "sha1-tPiuYbtFI1Yd+5+PjYdN1Gu0S6o=",
+      "integrity": "sha512-xWjVBcuhvB8+UmCSb5tKVLB5OuzSpw96WEhS2uz6hkWVa/Euh1A0/HJwn2cemyK47wUrCQXtczBUiqnq9yX5VQ==",
       "dev": true,
       "requires": {
         "@lerna/collect-uncommitted": "3.16.5",
@@ -5340,7 +5340,7 @@
     "@lerna/child-process": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/child-process/-/child-process-3.16.5.tgz",
-      "integrity": "sha1-OPo8GAZKpKwHVK2AEUd2p7NqabI=",
+      "integrity": "sha512-vdcI7mzei9ERRV4oO8Y1LHBZ3A5+ampRKg1wq5nutLsUA4mEBN6H7JqjWOMY9xZemv6+kATm2ofjJ3lW5TszQg==",
       "dev": true,
       "requires": {
         "chalk": "^2.3.1",
@@ -5351,7 +5351,7 @@
     "@lerna/clean": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/clean/-/clean-3.21.0.tgz",
-      "integrity": "sha1-wLRrUwDMPa4s2jvsFLgDCC2jhW0=",
+      "integrity": "sha512-b/L9l+MDgE/7oGbrav6rG8RTQvRiZLO1zTcG17zgJAAuhlsPxJExMlh2DFwJEVi2les70vMhHfST3Ue1IMMjpg==",
       "dev": true,
       "requires": {
         "@lerna/command": "3.21.0",
@@ -5375,7 +5375,7 @@
     "@lerna/cli": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/cli/-/cli-3.18.5.tgz",
-      "integrity": "sha1-yQxGFUL801ttWwFaKQ+w2/tB0kI=",
+      "integrity": "sha512-erkbxkj9jfc89vVs/jBLY/fM0I80oLmJkFUV3Q3wk9J3miYhP14zgVEBsPZY68IZlEjT6T3Xlq2xO1AVaatHsA==",
       "dev": true,
       "requires": {
         "@lerna/global-options": "3.13.0",
@@ -5387,13 +5387,13 @@
         "ansi-regex": {
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha1-i5+PCM8ay4Q3Vqg5yox+MWjFGZc=",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
           "dev": true
         },
         "cliui": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
-          "integrity": "sha1-3u/P2y6AB4SqNPRvoI4GhRx7u8U=",
+          "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
           "dev": true,
           "requires": {
             "string-width": "^3.1.0",
@@ -5410,7 +5410,7 @@
         "find-up": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-          "integrity": "sha1-SRafHXmTQwZG2mHsxa41XCHJe3M=",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
           "dev": true,
           "requires": {
             "locate-path": "^3.0.0"
@@ -5425,7 +5425,7 @@
         "locate-path": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-          "integrity": "sha1-2+w7OrdZdYBxtY/ln8QYca8hQA4=",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
           "dev": true,
           "requires": {
             "p-locate": "^3.0.0",
@@ -5435,7 +5435,7 @@
         "p-limit": {
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-          "integrity": "sha1-PdM8ZHohT9//2DWTPrCG2g3CHbE=",
+          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
           "dev": true,
           "requires": {
             "p-try": "^2.0.0"
@@ -5444,7 +5444,7 @@
         "p-locate": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-          "integrity": "sha1-Mi1poFwCZLJZl9n0DNiokasAZKQ=",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
           "dev": true,
           "requires": {
             "p-limit": "^2.0.0"
@@ -5453,13 +5453,13 @@
         "p-try": {
           "version": "2.2.0",
           "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-          "integrity": "sha1-yyhoVA4xPWHeWPr741zpAE1VQOY=",
+          "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
           "dev": true
         },
         "string-width": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-          "integrity": "sha1-InZ74htirxCBV0MG9prFG2IgOWE=",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
           "dev": true,
           "requires": {
             "emoji-regex": "^7.0.1",
@@ -5470,7 +5470,7 @@
         "strip-ansi": {
           "version": "5.2.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-          "integrity": "sha1-jJpTb+tq/JYr36WxBKUJHBrZwK4=",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
           "dev": true,
           "requires": {
             "ansi-regex": "^4.1.0"
@@ -5479,7 +5479,7 @@
         "wrap-ansi": {
           "version": "5.1.0",
           "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
-          "integrity": "sha1-H9H2cjXVttD+54EFYAG/tpTAOwk=",
+          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
           "dev": true,
           "requires": {
             "ansi-styles": "^3.2.0",
@@ -5490,7 +5490,7 @@
         "yargs": {
           "version": "14.2.3",
           "resolved": "https://registry.npmjs.org/yargs/-/yargs-14.2.3.tgz",
-          "integrity": "sha1-Ghw+3O0a+yov6jNgS8bR2NaIpBQ=",
+          "integrity": "sha512-ZbotRWhF+lkjijC/VhmOT9wSgyBQ7+zr13+YLkhfsSiTriYsMzkTUFP18pFhWwBeMa5gUc1MzbhrO6/VB7c9Xg==",
           "dev": true,
           "requires": {
             "cliui": "^5.0.0",
@@ -5521,7 +5521,7 @@
     "@lerna/collect-uncommitted": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/collect-uncommitted/-/collect-uncommitted-3.16.5.tgz",
-      "integrity": "sha1-pJTWGqwxzceuxLvlLJZVAnQTLmM=",
+      "integrity": "sha512-ZgqnGwpDZiWyzIQVZtQaj9tRizsL4dUOhuOStWgTAw1EMe47cvAY2kL709DzxFhjr6JpJSjXV5rZEAeU3VE0Hg==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -5533,7 +5533,7 @@
     "@lerna/collect-updates": {
       "version": "3.20.0",
       "resolved": "https://registry.npmjs.org/@lerna/collect-updates/-/collect-updates-3.20.0.tgz",
-      "integrity": "sha1-YvnXa6IaJbfZ+/McAt6IdEpWS9E=",
+      "integrity": "sha512-qBTVT5g4fupVhBFuY4nI/3FSJtQVcDh7/gEPOpRxoXB/yCSnT38MFHXWl+y4einLciCjt/+0x6/4AG80fjay2Q==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -5546,7 +5546,7 @@
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-          "integrity": "sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q=",
+          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
           "dev": true
         }
       }
@@ -5554,7 +5554,7 @@
     "@lerna/command": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/command/-/command-3.21.0.tgz",
-      "integrity": "sha1-miODdZ3HtwDaz6iiKy86bhkBIfc=",
+      "integrity": "sha512-T2bu6R8R3KkH5YoCKdutKv123iUgUbW8efVjdGCDnCMthAQzoentOJfDeodBwn0P2OqCl3ohsiNVtSn9h78fyQ==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -5572,7 +5572,7 @@
     "@lerna/conventional-commits": {
       "version": "3.22.0",
       "resolved": "https://registry.npmjs.org/@lerna/conventional-commits/-/conventional-commits-3.22.0.tgz",
-      "integrity": "sha1-J5j0iB7i70V72uAnq30L8K9vHgk=",
+      "integrity": "sha512-z4ZZk1e8Mhz7+IS8NxHr64wyklHctCJyWpJKEZZPJiLFJ8yKto/x38O80R10pIzC0rr8Sy/OsjSH4bl0TbbgqA==",
       "dev": true,
       "requires": {
         "@lerna/validation-error": "3.13.0",
@@ -5611,7 +5611,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -5623,7 +5623,7 @@
             "semver": {
               "version": "5.7.1",
               "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
               "dev": true
             }
           }
@@ -5633,7 +5633,7 @@
     "@lerna/create": {
       "version": "3.22.0",
       "resolved": "https://registry.npmjs.org/@lerna/create/-/create-3.22.0.tgz",
-      "integrity": "sha1-1rvQN8PcW0Jf5fbRuBcFfCePdhk=",
+      "integrity": "sha512-MdiQQzCcB4E9fBF1TyMOaAEz9lUjIHp1Ju9H7f3lXze5JK6Fl5NYkouAvsLgY6YSIhXMY8AHW2zzXeBDY4yWkw==",
       "dev": true,
       "requires": {
         "@evocateur/pacote": "^9.6.3",
@@ -5659,7 +5659,7 @@
         "@nodelib/fs.stat": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
-          "integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=",
+          "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
           "dev": true
         },
         "array-union": {
@@ -5683,7 +5683,7 @@
         "fast-glob": {
           "version": "2.2.7",
           "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",
-          "integrity": "sha1-aVOFfDr6R1//ku5gFdUtpwpM050=",
+          "integrity": "sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==",
           "dev": true,
           "requires": {
             "@mrmlnc/readdir-enhanced": "^2.2.1",
@@ -5708,7 +5708,7 @@
         "globby": {
           "version": "9.2.0",
           "resolved": "https://registry.npmjs.org/globby/-/globby-9.2.0.tgz",
-          "integrity": "sha1-/QKacGxwPSm90XD0tts6P3p8tj0=",
+          "integrity": "sha512-ollPHROa5mcxDEkwg6bPt3QbEf4pDQSNtd6JPL1YvOvAo/7/0VAm9TccUeoTmarjPw4pfUthSCqcyfNB1I3ZSg==",
           "dev": true,
           "requires": {
             "@types/glob": "^7.1.1",
@@ -5724,7 +5724,7 @@
         "ignore": {
           "version": "4.0.6",
           "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
-          "integrity": "sha1-dQ49tYYgh7RzfrrIIH/9HvJ7Jfw=",
+          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
           "dev": true
         },
         "jsonfile": {
@@ -5739,7 +5739,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -5751,7 +5751,7 @@
             "semver": {
               "version": "5.7.1",
               "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
               "dev": true
             }
           }
@@ -5759,7 +5759,7 @@
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-          "integrity": "sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q=",
+          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
           "dev": true
         },
         "tr46": {
@@ -5793,7 +5793,7 @@
     "@lerna/create-symlink": {
       "version": "3.16.2",
       "resolved": "https://registry.npmjs.org/@lerna/create-symlink/-/create-symlink-3.16.2.tgz",
-      "integrity": "sha1-QSy45Zpy9afZRj5ORyGtIHAUmWc=",
+      "integrity": "sha512-pzXIJp6av15P325sgiIRpsPXLFmkisLhMBCy4764d+7yjf2bzrJ4gkWVMhsv4AdF0NN3OyZ5jjzzTtLNqfR+Jw==",
       "dev": true,
       "requires": {
         "@zkochan/cmd-shim": "^3.1.0",
@@ -5826,7 +5826,7 @@
     "@lerna/describe-ref": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/describe-ref/-/describe-ref-3.16.5.tgz",
-      "integrity": "sha1-ozjCWq7YN9PccLinLER8XGY0asA=",
+      "integrity": "sha512-c01+4gUF0saOOtDBzbLMFOTJDHTKbDFNErEY6q6i9QaXuzy9LNN62z+Hw4acAAZuJQhrVWncVathcmkkjvSVGw==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -5836,7 +5836,7 @@
     "@lerna/diff": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/diff/-/diff-3.21.0.tgz",
-      "integrity": "sha1-5t8Ni5kWFn/1pJ/LAqwGQkKApo0=",
+      "integrity": "sha512-5viTR33QV3S7O+bjruo1SaR40m7F2aUHJaDAC7fL9Ca6xji+aw1KFkpCtVlISS0G8vikUREGMJh+c/VMSc8Usw==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -5848,7 +5848,7 @@
     "@lerna/exec": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/exec/-/exec-3.21.0.tgz",
-      "integrity": "sha1-F/B1M4k8uRihe0G8xWbcQ3AW2yY=",
+      "integrity": "sha512-iLvDBrIE6rpdd4GIKTY9mkXyhwsJ2RvQdB9ZU+/NhR3okXfqKc6py/24tV111jqpXTtZUW6HNydT4dMao2hi1Q==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -5871,7 +5871,7 @@
     "@lerna/filter-options": {
       "version": "3.20.0",
       "resolved": "https://registry.npmjs.org/@lerna/filter-options/-/filter-options-3.20.0.tgz",
-      "integrity": "sha1-Dw9dWkeDhW7s5CBHCMyQLLyK9Zs=",
+      "integrity": "sha512-bmcHtvxn7SIl/R9gpiNMVG7yjx7WyT0HSGw34YVZ9B+3xF/83N3r5Rgtjh4hheLZ+Q91Or0Jyu5O3Nr+AwZe2g==",
       "dev": true,
       "requires": {
         "@lerna/collect-updates": "3.20.0",
@@ -5884,7 +5884,7 @@
     "@lerna/filter-packages": {
       "version": "3.18.0",
       "resolved": "https://registry.npmjs.org/@lerna/filter-packages/-/filter-packages-3.18.0.tgz",
-      "integrity": "sha1-ano3bShSCNsDqClYz7gXLhebTnA=",
+      "integrity": "sha512-6/0pMM04bCHNATIOkouuYmPg6KH3VkPCIgTfQmdkPJTullERyEQfNUKikrefjxo1vHOoCACDpy65JYyKiAbdwQ==",
       "dev": true,
       "requires": {
         "@lerna/validation-error": "3.13.0",
@@ -5895,7 +5895,7 @@
     "@lerna/get-npm-exec-opts": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/get-npm-exec-opts/-/get-npm-exec-opts-3.13.0.tgz",
-      "integrity": "sha1-0bVSywCIGZ/D5+Em+RTjmgjfnqU=",
+      "integrity": "sha512-Y0xWL0rg3boVyJk6An/vurKzubyJKtrxYv2sj4bB8Mc5zZ3tqtv0ccbOkmkXKqbzvNNF7VeUt1OJ3DRgtC/QZw==",
       "dev": true,
       "requires": {
         "npmlog": "^4.1.2"
@@ -5904,7 +5904,7 @@
     "@lerna/get-packed": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@lerna/get-packed/-/get-packed-3.16.0.tgz",
-      "integrity": "sha1-GzFrcG3O6Gx7qlXlCwh5WUR4Uv8=",
+      "integrity": "sha512-AjsFiaJzo1GCPnJUJZiTW6J1EihrPkc2y3nMu6m3uWFxoleklsSCyImumzVZJssxMi3CPpztj8LmADLedl9kXw==",
       "dev": true,
       "requires": {
         "fs-extra": "^8.1.0",
@@ -5946,7 +5946,7 @@
     "@lerna/github-client": {
       "version": "3.22.0",
       "resolved": "https://registry.npmjs.org/@lerna/github-client/-/github-client-3.22.0.tgz",
-      "integrity": "sha1-XYFqpPdnR+1zauZP+WK48Vw1TZU=",
+      "integrity": "sha512-O/GwPW+Gzr3Eb5bk+nTzTJ3uv+jh5jGho9BOqKlajXaOkMYGBELEAqV5+uARNGWZFvYAiF4PgqHb6aCUu7XdXg==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -5959,7 +5959,7 @@
     "@lerna/gitlab-client": {
       "version": "3.15.0",
       "resolved": "https://registry.npmjs.org/@lerna/gitlab-client/-/gitlab-client-3.15.0.tgz",
-      "integrity": "sha1-kfTsjGl7WsV/fyW9UP5lnSSqlqY=",
+      "integrity": "sha512-OsBvRSejHXUBMgwWQqNoioB8sgzL/Pf1pOUhHKtkiMl6aAWjklaaq5HPMvTIsZPfS6DJ9L5OK2GGZuooP/5c8Q==",
       "dev": true,
       "requires": {
         "node-fetch": "^2.5.0",
@@ -5998,13 +5998,13 @@
     "@lerna/global-options": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/global-options/-/global-options-3.13.0.tgz",
-      "integrity": "sha1-IXZiKQ2watnPLEnY4xAO4o6uuuE=",
+      "integrity": "sha512-SlZvh1gVRRzYLVluz9fryY1nJpZ0FHDGB66U9tFfvnnxmueckRQxLopn3tXj3NU1kc3QANT2I5BsQkOqZ4TEFQ==",
       "dev": true
     },
     "@lerna/has-npm-version": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/has-npm-version/-/has-npm-version-3.16.5.tgz",
-      "integrity": "sha1-q4OVbyEdiSPqav6bl5s4zHOxUyY=",
+      "integrity": "sha512-WL7LycR9bkftyqbYop5rEGJ9sRFIV55tSGmbN1HLrF9idwOCD7CLrT64t235t3t4O5gehDnwKI5h2U3oxTrF8Q==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6014,7 +6014,7 @@
     "@lerna/import": {
       "version": "3.22.0",
       "resolved": "https://registry.npmjs.org/@lerna/import/-/import-3.22.0.tgz",
-      "integrity": "sha1-Gl8DlPOOI8T2QqEj5eFRfnDQaNI=",
+      "integrity": "sha512-uWOlexasM5XR6tXi4YehODtH9Y3OZrFht3mGUFFT3OIl2s+V85xIGFfqFGMTipMPAGb2oF1UBLL48kR43hRsOg==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6052,7 +6052,7 @@
     "@lerna/info": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/info/-/info-3.21.0.tgz",
-      "integrity": "sha1-dmlrZ2/bDzXUjIPGPB4yu143gU8=",
+      "integrity": "sha512-0XDqGYVBgWxUquFaIptW2bYSIu6jOs1BtkvRTWDDhw4zyEdp6q4eaMvqdSap1CG+7wM5jeLCi6z94wS0AuiuwA==",
       "dev": true,
       "requires": {
         "@lerna/command": "3.21.0",
@@ -6063,7 +6063,7 @@
     "@lerna/init": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/init/-/init-3.21.0.tgz",
-      "integrity": "sha1-HoEJNNyL9OU4bAMQQYgdO0CWqlw=",
+      "integrity": "sha512-6CM0z+EFUkFfurwdJCR+LQQF6MqHbYDCBPyhu/d086LRf58GtYZYj49J8mKG9ktayp/TOIxL/pKKjgLD8QBPOg==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6104,7 +6104,7 @@
     "@lerna/link": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/link/-/link-3.21.0.tgz",
-      "integrity": "sha1-i+aP8MzuEEsXS1u9YGMCwvBunZs=",
+      "integrity": "sha512-tGu9GxrX7Ivs+Wl3w1+jrLi1nQ36kNI32dcOssij6bg0oZ2M2MDEFI9UF2gmoypTaN9uO5TSsjCFS7aR79HbdQ==",
       "dev": true,
       "requires": {
         "@lerna/command": "3.21.0",
@@ -6123,7 +6123,7 @@
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-          "integrity": "sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q=",
+          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
           "dev": true
         }
       }
@@ -6131,7 +6131,7 @@
     "@lerna/list": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/list/-/list-3.21.0.tgz",
-      "integrity": "sha1-Qvdvr6Vt6hO2keyMqxODJpHWHaI=",
+      "integrity": "sha512-KehRjE83B1VaAbRRkRy6jLX1Cin8ltsrQ7FHf2bhwhRHK0S54YuA6LOoBnY/NtA8bHDX/Z+G5sMY78X30NS9tg==",
       "dev": true,
       "requires": {
         "@lerna/command": "3.21.0",
@@ -6143,7 +6143,7 @@
     "@lerna/listable": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/listable/-/listable-3.18.5.tgz",
-      "integrity": "sha1-6CeYQFte2PxRhDyO8eeg5Jc4iho=",
+      "integrity": "sha512-Sdr3pVyaEv5A7ZkGGYR7zN+tTl2iDcinryBPvtuv20VJrXBE8wYcOks1edBTcOWsPjCE/rMP4bo1pseyk3UTsg==",
       "dev": true,
       "requires": {
         "@lerna/query-graph": "3.18.5",
@@ -6154,7 +6154,7 @@
     "@lerna/log-packed": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@lerna/log-packed/-/log-packed-3.16.0.tgz",
-      "integrity": "sha1-+DmRBB7neySVY04URwtCJZ/SvBY=",
+      "integrity": "sha512-Fp+McSNBV/P2mnLUYTaSlG8GSmpXM7krKWcllqElGxvAqv6chk2K3c2k80MeVB4WvJ9tRjUUf+i7HUTiQ9/ckQ==",
       "dev": true,
       "requires": {
         "byte-size": "^5.0.1",
@@ -6166,7 +6166,7 @@
     "@lerna/npm-conf": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@lerna/npm-conf/-/npm-conf-3.16.0.tgz",
-      "integrity": "sha1-HBComuL2wu6WliVXc4aFMA03aCc=",
+      "integrity": "sha512-HbO3DUrTkCAn2iQ9+FF/eisDpWY5POQAOF1m7q//CZjdC2HSW3UYbKEGsSisFxSfaF9Z4jtrV+F/wX6qWs3CuA==",
       "dev": true,
       "requires": {
         "config-chain": "^1.1.11",
@@ -6176,7 +6176,7 @@
     "@lerna/npm-dist-tag": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/npm-dist-tag/-/npm-dist-tag-3.18.5.tgz",
-      "integrity": "sha1-nvmrt8EEB3sx9vqyLMc7MU1UrFU=",
+      "integrity": "sha512-xw0HDoIG6HreVsJND9/dGls1c+lf6vhu7yJoo56Sz5bvncTloYGLUppIfDHQr4ZvmPCK8rsh0euCVh2giPxzKQ==",
       "dev": true,
       "requires": {
         "@evocateur/npm-registry-fetch": "^4.0.0",
@@ -6189,7 +6189,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6201,7 +6201,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         }
       }
@@ -6209,7 +6209,7 @@
     "@lerna/npm-install": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/npm-install/-/npm-install-3.16.5.tgz",
-      "integrity": "sha1-1r/cFvgShdpmUVrkeSTW4njWN9M=",
+      "integrity": "sha512-hfiKk8Eku6rB9uApqsalHHTHY+mOrrHeWEs+gtg7+meQZMTS3kzv4oVp5cBZigndQr3knTLjwthT/FX4KvseFg==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6244,7 +6244,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6256,7 +6256,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         }
       }
@@ -6264,7 +6264,7 @@
     "@lerna/npm-publish": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/npm-publish/-/npm-publish-3.18.5.tgz",
-      "integrity": "sha1-JA5AOZWf2YFrScWwdCHhG1ywAK8=",
+      "integrity": "sha512-3etLT9+2L8JAx5F8uf7qp6iAtOLSMj+ZYWY6oUgozPi/uLqU0/gsMsEXh3F0+YVW33q0M61RpduBoAlOOZnaTg==",
       "dev": true,
       "requires": {
         "@evocateur/libnpmpublish": "^1.2.2",
@@ -6301,7 +6301,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6313,7 +6313,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         }
       }
@@ -6321,7 +6321,7 @@
     "@lerna/npm-run-script": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/npm-run-script/-/npm-run-script-3.16.5.tgz",
-      "integrity": "sha1-nC7IJFOibAtG7cC7fBWBbIIfXBU=",
+      "integrity": "sha512-1asRi+LjmVn3pMjEdpqKJZFT/3ZNpb+VVeJMwrJaV/3DivdNg7XlPK9LTrORuKU4PSvhdEZvJmSlxCKyDpiXsQ==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6332,7 +6332,7 @@
     "@lerna/otplease": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/otplease/-/otplease-3.18.5.tgz",
-      "integrity": "sha1-t3uOdgtAq62fdljZiPPqd9T9AjE=",
+      "integrity": "sha512-S+SldXAbcXTEDhzdxYLU0ZBKuYyURP/ND2/dK6IpKgLxQYh/z4ScljPDMyKymmEvgiEJmBsPZAAPfmNPEzxjog==",
       "dev": true,
       "requires": {
         "@lerna/prompt": "3.18.5",
@@ -6342,7 +6342,7 @@
     "@lerna/output": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/output/-/output-3.13.0.tgz",
-      "integrity": "sha1-Pe18yQiyephyIopjDZUK7a56SYk=",
+      "integrity": "sha512-7ZnQ9nvUDu/WD+bNsypmPG5MwZBwu86iRoiW6C1WBuXXDxM5cnIAC1m2WxHeFnjyMrYlRXM9PzOQ9VDD+C15Rg==",
       "dev": true,
       "requires": {
         "npmlog": "^4.1.2"
@@ -6351,7 +6351,7 @@
     "@lerna/pack-directory": {
       "version": "3.16.4",
       "resolved": "https://registry.npmjs.org/@lerna/pack-directory/-/pack-directory-3.16.4.tgz",
-      "integrity": "sha1-Pq5fkb31rP4DhFEO1T+t3EwHRpM=",
+      "integrity": "sha512-uxSF0HZeGyKaaVHz5FroDY9A5NDDiCibrbYR6+khmrhZtY0Bgn6hWq8Gswl9iIlymA+VzCbshWIMX4o2O8C8ng==",
       "dev": true,
       "requires": {
         "@lerna/get-packed": "3.16.0",
@@ -6367,7 +6367,7 @@
         "npm-packlist": {
           "version": "1.4.8",
           "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz",
-          "integrity": "sha1-Vu5swTW5+YrT1Rwcldoiu7my7z4=",
+          "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==",
           "dev": true,
           "requires": {
             "ignore-walk": "^3.0.1",
@@ -6380,7 +6380,7 @@
     "@lerna/package": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@lerna/package/-/package-3.16.0.tgz",
-      "integrity": "sha1-fgpG5Gl+2LipwU1Zx/iQ4NOLoTw=",
+      "integrity": "sha512-2lHBWpaxcBoiNVbtyLtPUuTYEaB/Z+eEqRS9duxpZs6D+mTTZMNy6/5vpEVSCBmzvdYpyqhqaYjjSLvjjr5Riw==",
       "dev": true,
       "requires": {
         "load-json-file": "^5.3.0",
@@ -6391,7 +6391,7 @@
         "load-json-file": {
           "version": "5.3.0",
           "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-5.3.0.tgz",
-          "integrity": "sha1-TTweAfocA+p4pgrHr5MsnOU0A/M=",
+          "integrity": "sha512-cJGP40Jc/VXUsp8/OrnyKyTZ1y6v/dphm3bioS+RrKXjK2BB6wHUd6JptZEFDGgGahMT+InnZO5i1Ei9mpC8Bw==",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.15",
@@ -6404,7 +6404,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6416,13 +6416,13 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         },
         "type-fest": {
           "version": "0.3.1",
           "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.3.1.tgz",
-          "integrity": "sha1-Y9ANIE4FlHT+Xht8ARESu9HcKeE=",
+          "integrity": "sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==",
           "dev": true
         }
       }
@@ -6430,7 +6430,7 @@
     "@lerna/package-graph": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/package-graph/-/package-graph-3.18.5.tgz",
-      "integrity": "sha1-x0Di6jV40FnlUWM+lQaQgxuUH2s=",
+      "integrity": "sha512-8QDrR9T+dBegjeLr+n9WZTVxUYUhIUjUgZ0gvNxUBN8S1WB9r6H5Yk56/MVaB64tA3oGAN9IIxX6w0WvTfFudA==",
       "dev": true,
       "requires": {
         "@lerna/prerelease-id-from-version": "3.16.0",
@@ -6443,7 +6443,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6455,7 +6455,7 @@
             "semver": {
               "version": "5.7.1",
               "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
               "dev": true
             }
           }
@@ -6465,7 +6465,7 @@
     "@lerna/prerelease-id-from-version": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@lerna/prerelease-id-from-version/-/prerelease-id-from-version-3.16.0.tgz",
-      "integrity": "sha1-skv6eJ9eG6q5FNewi6rpt719g6E=",
+      "integrity": "sha512-qZyeUyrE59uOK8rKdGn7jQz+9uOpAaF/3hbslJVFL1NqF9ELDTqjCPXivuejMX/lN4OgD6BugTO4cR7UTq/sZA==",
       "dev": true,
       "requires": {
         "semver": "^6.2.0"
@@ -6474,7 +6474,7 @@
     "@lerna/profiler": {
       "version": "3.20.0",
       "resolved": "https://registry.npmjs.org/@lerna/profiler/-/profiler-3.20.0.tgz",
-      "integrity": "sha1-D23CNvTqj56l81jGcDMFpPMq0FE=",
+      "integrity": "sha512-bh8hKxAlm6yu8WEOvbLENm42i2v9SsR4WbrCWSbsmOElx3foRnMlYk7NkGECa+U5c3K4C6GeBbwgqs54PP7Ljg==",
       "dev": true,
       "requires": {
         "figgy-pudding": "^3.5.1",
@@ -6508,7 +6508,7 @@
     "@lerna/project": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/project/-/project-3.21.0.tgz",
-      "integrity": "sha1-XXhNLRDFYaAPIDILzbBAmXwQUC0=",
+      "integrity": "sha512-xT1mrpET2BF11CY32uypV2GPtPVm6Hgtha7D81GQP9iAitk9EccrdNjYGt5UBYASl4CIDXBRxwmTTVGfrCx82A==",
       "dev": true,
       "requires": {
         "@lerna/package": "3.16.0",
@@ -6528,7 +6528,7 @@
         "@nodelib/fs.stat": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
-          "integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=",
+          "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
           "dev": true
         },
         "array-union": {
@@ -6543,7 +6543,7 @@
         "cosmiconfig": {
           "version": "5.2.1",
           "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
-          "integrity": "sha1-BA9yaAnFked6F8CjYmykW08Wixo=",
+          "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
           "dev": true,
           "requires": {
             "import-fresh": "^2.0.0",
@@ -6564,7 +6564,7 @@
         "fast-glob": {
           "version": "2.2.7",
           "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",
-          "integrity": "sha1-aVOFfDr6R1//ku5gFdUtpwpM050=",
+          "integrity": "sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==",
           "dev": true,
           "requires": {
             "@mrmlnc/readdir-enhanced": "^2.2.1",
@@ -6610,7 +6610,7 @@
         "globby": {
           "version": "9.2.0",
           "resolved": "https://registry.npmjs.org/globby/-/globby-9.2.0.tgz",
-          "integrity": "sha1-/QKacGxwPSm90XD0tts6P3p8tj0=",
+          "integrity": "sha512-ollPHROa5mcxDEkwg6bPt3QbEf4pDQSNtd6JPL1YvOvAo/7/0VAm9TccUeoTmarjPw4pfUthSCqcyfNB1I3ZSg==",
           "dev": true,
           "requires": {
             "@types/glob": "^7.1.1",
@@ -6626,7 +6626,7 @@
         "ignore": {
           "version": "4.0.6",
           "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
-          "integrity": "sha1-dQ49tYYgh7RzfrrIIH/9HvJ7Jfw=",
+          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
           "dev": true
         },
         "import-fresh": {
@@ -6650,7 +6650,7 @@
         "load-json-file": {
           "version": "5.3.0",
           "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-5.3.0.tgz",
-          "integrity": "sha1-TTweAfocA+p4pgrHr5MsnOU0A/M=",
+          "integrity": "sha512-cJGP40Jc/VXUsp8/OrnyKyTZ1y6v/dphm3bioS+RrKXjK2BB6wHUd6JptZEFDGgGahMT+InnZO5i1Ei9mpC8Bw==",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.15",
@@ -6669,13 +6669,13 @@
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-          "integrity": "sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q=",
+          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
           "dev": true
         },
         "type-fest": {
           "version": "0.3.1",
           "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.3.1.tgz",
-          "integrity": "sha1-Y9ANIE4FlHT+Xht8ARESu9HcKeE=",
+          "integrity": "sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==",
           "dev": true
         }
       }
@@ -6683,7 +6683,7 @@
     "@lerna/prompt": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/prompt/-/prompt-3.18.5.tgz",
-      "integrity": "sha1-YozVRfIliH0GBJGrld+JnPxSGKE=",
+      "integrity": "sha512-rkKj4nm1twSbBEb69+Em/2jAERK8htUuV8/xSjN0NPC+6UjzAwY52/x9n5cfmpa9lyKf/uItp7chCI7eDmNTKQ==",
       "dev": true,
       "requires": {
         "inquirer": "^6.2.0",
@@ -6806,7 +6806,7 @@
     "@lerna/publish": {
       "version": "3.22.1",
       "resolved": "https://registry.npmjs.org/@lerna/publish/-/publish-3.22.1.tgz",
-      "integrity": "sha1-tPfOP7oemvsovkofPYgiImm6lRk=",
+      "integrity": "sha512-PG9CM9HUYDreb1FbJwFg90TCBQooGjj+n/pb3gw/eH5mEDq0p8wKdLFe0qkiqUkm/Ub5C8DbVFertIo0Vd0zcw==",
       "dev": true,
       "requires": {
         "@evocateur/libnpmaccess": "^3.1.2",
@@ -6864,7 +6864,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6876,7 +6876,7 @@
             "semver": {
               "version": "5.7.1",
               "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
               "dev": true
             }
           }
@@ -6892,7 +6892,7 @@
     "@lerna/pulse-till-done": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/pulse-till-done/-/pulse-till-done-3.13.0.tgz",
-      "integrity": "sha1-yOnOW6+vENkwpn1+0My12Vj+ARA=",
+      "integrity": "sha512-1SOHpy7ZNTPulzIbargrgaJX387csN7cF1cLOGZiJQA6VqnS5eWs2CIrG8i8wmaUavj2QlQ5oEbRMVVXSsGrzA==",
       "dev": true,
       "requires": {
         "npmlog": "^4.1.2"
@@ -6901,7 +6901,7 @@
     "@lerna/query-graph": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/query-graph/-/query-graph-3.18.5.tgz",
-      "integrity": "sha1-30gwu1FVJzADvzXo3aHDLQknvYY=",
+      "integrity": "sha512-50Lf4uuMpMWvJ306be3oQDHrWV42nai9gbIVByPBYJuVW8dT8O8pA3EzitNYBUdLL9/qEVbrR0ry1HD7EXwtRA==",
       "dev": true,
       "requires": {
         "@lerna/package-graph": "3.18.5",
@@ -6911,7 +6911,7 @@
     "@lerna/resolve-symlink": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@lerna/resolve-symlink/-/resolve-symlink-3.16.0.tgz",
-      "integrity": "sha1-N/xwlfq9vPMXwm63Tg0L3o79I4Y=",
+      "integrity": "sha512-Ibj5e7njVHNJ/NOqT4HlEgPFPtPLWsO7iu59AM5bJDcAJcR96mLZ7KGVIsS2tvaO7akMEJvt2P+ErwCdloG3jQ==",
       "dev": true,
       "requires": {
         "fs-extra": "^8.1.0",
@@ -6944,7 +6944,7 @@
     "@lerna/rimraf-dir": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/rimraf-dir/-/rimraf-dir-3.16.5.tgz",
-      "integrity": "sha1-BDFqtf/SkJZXqvOI6lAsuMLyCgk=",
+      "integrity": "sha512-bQlKmO0pXUsXoF8lOLknhyQjOZsCc0bosQDoX4lujBXSWxHVTg1VxURtWf2lUjz/ACsJVDfvHZbDm8kyBk5okA==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6956,7 +6956,7 @@
     "@lerna/run": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/run/-/run-3.21.0.tgz",
-      "integrity": "sha1-KjXshJeeTW5CR0/hSNMuXeHKyJE=",
+      "integrity": "sha512-fJF68rT3veh+hkToFsBmUJ9MHc9yGXA7LSDvhziAojzOb0AI/jBDp6cEcDQyJ7dbnplba2Lj02IH61QUf9oW0Q==",
       "dev": true,
       "requires": {
         "@lerna/command": "3.21.0",
@@ -6981,7 +6981,7 @@
     "@lerna/run-lifecycle": {
       "version": "3.16.2",
       "resolved": "https://registry.npmjs.org/@lerna/run-lifecycle/-/run-lifecycle-3.16.2.tgz",
-      "integrity": "sha1-Z7KI+OqWTbnqT7H7x3FdW7sLzgA=",
+      "integrity": "sha512-RqFoznE8rDpyyF0rOJy3+KjZCeTkO8y/OB9orPauR7G2xQ7PTdCpgo7EO6ZNdz3Al+k1BydClZz/j78gNCmL2A==",
       "dev": true,
       "requires": {
         "@lerna/npm-conf": "3.16.0",
@@ -6993,7 +6993,7 @@
     "@lerna/run-topologically": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/run-topologically/-/run-topologically-3.18.5.tgz",
-      "integrity": "sha1-PNY52iDpZ9dnLLiNsPdWuS8v38M=",
+      "integrity": "sha512-6N1I+6wf4hLOnPW+XDZqwufyIQ6gqoPfHZFkfWlvTQ+Ue7CuF8qIVQ1Eddw5HKQMkxqN10thKOFfq/9NQZ4NUg==",
       "dev": true,
       "requires": {
         "@lerna/query-graph": "3.18.5",
@@ -7004,13 +7004,13 @@
         "eventemitter3": {
           "version": "3.1.2",
           "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz",
-          "integrity": "sha1-LT1I+cNGaY/Og6hdfWZOmFNd9uc=",
+          "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==",
           "dev": true
         },
         "p-queue": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/p-queue/-/p-queue-4.0.0.tgz",
-          "integrity": "sha1-7Q7uh5iSftbywvX1t3/bIGGl00Y=",
+          "integrity": "sha512-3cRXXn3/O0o3+eVmUroJPSj/esxoEFIm0ZOno/T+NzG/VZgPOqQ8WKmlNqubSEpZmCIngEy34unkHGg83ZIBmg==",
           "dev": true,
           "requires": {
             "eventemitter3": "^3.1.0"
@@ -7021,7 +7021,7 @@
     "@lerna/symlink-binary": {
       "version": "3.17.0",
       "resolved": "https://registry.npmjs.org/@lerna/symlink-binary/-/symlink-binary-3.17.0.tgz",
-      "integrity": "sha1-j4AxswmGOBSIPT8AmHf4Ljiu9Fo=",
+      "integrity": "sha512-RLpy9UY6+3nT5J+5jkM5MZyMmjNHxZIZvXLV+Q3MXrf7Eaa1hNqyynyj4RO95fxbS+EZc4XVSk25DGFQbcRNSQ==",
       "dev": true,
       "requires": {
         "@lerna/create-symlink": "3.16.2",
@@ -7061,7 +7061,7 @@
     "@lerna/symlink-dependencies": {
       "version": "3.17.0",
       "resolved": "https://registry.npmjs.org/@lerna/symlink-dependencies/-/symlink-dependencies-3.17.0.tgz",
-      "integrity": "sha1-SNY2DphYZaDlbNi1GzCKUmMIeEo=",
+      "integrity": "sha512-KmjU5YT1bpt6coOmdFueTJ7DFJL4H1w5eF8yAQ2zsGNTtZ+i5SGFBWpb9AQaw168dydc3s4eu0W0Sirda+F59Q==",
       "dev": true,
       "requires": {
         "@lerna/create-symlink": "3.16.2",
@@ -7104,13 +7104,13 @@
     "@lerna/timer": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/timer/-/timer-3.13.0.tgz",
-      "integrity": "sha1-vNCQRVHbFuCDZNbBjl4hYPyHB4E=",
+      "integrity": "sha512-RHWrDl8U4XNPqY5MQHkToWS9jHPnkLZEt5VD+uunCKTfzlxGnRCr3/zVr8VGy/uENMYpVP3wJa4RKGY6M0vkRw==",
       "dev": true
     },
     "@lerna/validation-error": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/validation-error/-/validation-error-3.13.0.tgz",
-      "integrity": "sha1-yGuPB8WrlTn3db2KVJdukm83WcM=",
+      "integrity": "sha512-SiJP75nwB8GhgwLKQfdkSnDufAaCbkZWJqEDlKOUPUvVOplRGnfL+BPQZH5nvq2BYSRXsksXWZ4UHVnQZI/HYA==",
       "dev": true,
       "requires": {
         "npmlog": "^4.1.2"
@@ -7119,7 +7119,7 @@
     "@lerna/version": {
       "version": "3.22.1",
       "resolved": "https://registry.npmjs.org/@lerna/version/-/version-3.22.1.tgz",
-      "integrity": "sha1-mAWpJHpH7mLWuBvZ+l+3KLJLWeI=",
+      "integrity": "sha512-PSGt/K1hVqreAFoi3zjD0VEDupQ2WZVlVIwesrE5GbrL2BjXowjCsTDPqblahDUPy0hp6h7E2kG855yLTp62+g==",
       "dev": true,
       "requires": {
         "@lerna/check-working-tree": "3.16.5",
@@ -7153,7 +7153,7 @@
         "load-json-file": {
           "version": "5.3.0",
           "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-5.3.0.tgz",
-          "integrity": "sha1-TTweAfocA+p4pgrHr5MsnOU0A/M=",
+          "integrity": "sha512-cJGP40Jc/VXUsp8/OrnyKyTZ1y6v/dphm3bioS+RrKXjK2BB6wHUd6JptZEFDGgGahMT+InnZO5i1Ei9mpC8Bw==",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.15",
@@ -7172,13 +7172,13 @@
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-          "integrity": "sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q=",
+          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
           "dev": true
         },
         "type-fest": {
           "version": "0.3.1",
           "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.3.1.tgz",
-          "integrity": "sha1-Y9ANIE4FlHT+Xht8ARESu9HcKeE=",
+          "integrity": "sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==",
           "dev": true
         }
       }
@@ -7186,7 +7186,7 @@
     "@lerna/write-log-file": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/write-log-file/-/write-log-file-3.13.0.tgz",
-      "integrity": "sha1-t42eTPwTSai+ZNkTJMTIGZ6CKiY=",
+      "integrity": "sha512-RibeMnDPvlL8bFYW5C8cs4mbI3AHfQef73tnJCQ/SgrXZHehmHnsyWUiE7qDQCAo+B1RfTapvSyFF69iPj326A==",
       "dev": true,
       "requires": {
         "npmlog": "^4.1.2",
@@ -7196,7 +7196,7 @@
         "write-file-atomic": {
           "version": "2.4.3",
           "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz",
-          "integrity": "sha1-H9Lprh3z51uNjDZ0Q8aS1MqB9IE=",
+          "integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.11",
@@ -7226,7 +7226,7 @@
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
-      "integrity": "sha1-UkryQNGjYFJ7cwR17PoTRKpUDd4=",
+      "integrity": "sha512-bPHp6Ji8b41szTOcaP63VlnbbO5Ny6dwAATtY6JTjh5N2OLrb5Qk/Th5cRkRQhkWCt+EJsYrNB0MiL+Gpn6e3g==",
       "dev": true,
       "requires": {
         "call-me-maybe": "^1.0.1",
@@ -8995,13 +8995,13 @@
     "@octokit/plugin-enterprise-rest": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/@octokit/plugin-enterprise-rest/-/plugin-enterprise-rest-6.0.1.tgz",
-      "integrity": "sha1-4HiWc5YY2rjafUB3xlgAN3X5VDc=",
+      "integrity": "sha512-93uGjlhUD+iNg1iWhUENAtJata6w5nE+V4urXOAlIXdco6xNZtUSfYY8dzp3Udy74aqO/B5UZL80x/YMa5PKRw==",
       "dev": true
     },
     "@octokit/plugin-paginate-rest": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-1.1.2.tgz",
-      "integrity": "sha1-AEFwrPjCvlNauiZyeGfWkve0iPw=",
+      "integrity": "sha512-jbsSoi5Q1pj63sC16XIUboklNw+8tL9VOnJsWycWYR78TKss5PVpIPb1TUUcMQ+bBh7cY579cVAWmf5qG+dw+Q==",
       "dev": true,
       "requires": {
         "@octokit/types": "^2.0.1"
@@ -9010,7 +9010,7 @@
         "@octokit/types": {
           "version": "2.16.2",
           "resolved": "https://registry.npmjs.org/@octokit/types/-/types-2.16.2.tgz",
-          "integrity": "sha1-TF+No8b+zz2hgRrvZ4/aA+2sNdI=",
+          "integrity": "sha512-O75k56TYvJ8WpAakWwYRN8Bgu60KrmX0z1KqFp1kNiFNkgW+JW+9EBKZ+S33PU6SLvbihqd+3drvPxKK68Ee8Q==",
           "dev": true,
           "requires": {
             "@types/node": ">= 8"
@@ -9027,7 +9027,7 @@
     "@octokit/plugin-rest-endpoint-methods": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-2.4.0.tgz",
-      "integrity": "sha1-Mojs9UgfaMSU3QYC/BVAeln69h4=",
+      "integrity": "sha512-EZi/AWhtkdfAYi01obpX0DF7U6b1VRr30QNQ5xSFPITMdLSfhcBqjamE3F+sKcxPbD7eZuMHu3Qkk2V+JGxBDQ==",
       "dev": true,
       "requires": {
         "@octokit/types": "^2.0.1",
@@ -9037,7 +9037,7 @@
         "@octokit/types": {
           "version": "2.16.2",
           "resolved": "https://registry.npmjs.org/@octokit/types/-/types-2.16.2.tgz",
-          "integrity": "sha1-TF+No8b+zz2hgRrvZ4/aA+2sNdI=",
+          "integrity": "sha512-O75k56TYvJ8WpAakWwYRN8Bgu60KrmX0z1KqFp1kNiFNkgW+JW+9EBKZ+S33PU6SLvbihqd+3drvPxKK68Ee8Q==",
           "dev": true,
           "requires": {
             "@types/node": ">= 8"
@@ -9087,7 +9087,7 @@
     "@octokit/request-error": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-1.2.1.tgz",
-      "integrity": "sha1-7eBxTHc/MjR1dsJWSdwBOuazGAE=",
+      "integrity": "sha512-+6yDyk1EES6WK+l3viRDElw96MvwfJxCt45GvmjDUKWjYIb3PJZQkq3i46TwGwoPD4h8NmTrENmtyA1FwbmhRA==",
       "dev": true,
       "requires": {
         "@octokit/types": "^2.0.0",
@@ -9098,7 +9098,7 @@
         "@octokit/types": {
           "version": "2.16.2",
           "resolved": "https://registry.npmjs.org/@octokit/types/-/types-2.16.2.tgz",
-          "integrity": "sha1-TF+No8b+zz2hgRrvZ4/aA+2sNdI=",
+          "integrity": "sha512-O75k56TYvJ8WpAakWwYRN8Bgu60KrmX0z1KqFp1kNiFNkgW+JW+9EBKZ+S33PU6SLvbihqd+3drvPxKK68Ee8Q==",
           "dev": true,
           "requires": {
             "@types/node": ">= 8"
@@ -9109,7 +9109,7 @@
     "@octokit/rest": {
       "version": "16.43.2",
       "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-16.43.2.tgz",
-      "integrity": "sha1-xTQm8eHRBE3ulnAj4yecUJk92Rs=",
+      "integrity": "sha512-ngDBevLbBTFfrHZeiS7SAMAZ6ssuVmXuya+F/7RaVvlysgGa1JKJkKWY+jV6TCJYcW0OALfJ7nTIGXcBXzycfQ==",
       "dev": true,
       "requires": {
         "@octokit/auth-token": "^2.4.0",
@@ -9252,7 +9252,7 @@
     "@restart/context": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
-      "integrity": "sha1-qZ2HwpmjTCi9hbtInLB7/SMUnAI="
+      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
     },
     "@restart/hooks": {
       "version": "0.3.27",
@@ -10723,7 +10723,7 @@
     "@zkochan/cmd-shim": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@zkochan/cmd-shim/-/cmd-shim-3.1.0.tgz",
-      "integrity": "sha1-KrjtgfW7VFKoXyV1jrm4aBmC/S4=",
+      "integrity": "sha512-o8l0+x7C7sMZU3v9GuJIAU10qQLtwR1dtRQIOmlNMtyaqhmpXOzx1HWiYoWfmmf9HHZoAkXpc9TM9PQYF9d4Jg==",
       "dev": true,
       "requires": {
         "is-windows": "^1.0.0",
@@ -11179,7 +11179,7 @@
     "array-differ": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-2.1.0.tgz",
-      "integrity": "sha1-S5wcPxS5BnVwgpJXaeirkE9IAbE=",
+      "integrity": "sha512-KbUpJgx909ZscOc/7CLATBFam7P1Z1QRQInvgT0UztM9Q72aGKCunKASAl7WNW0tnPmPyEMeMhdsfWhfmW037w==",
       "dev": true
     },
     "array-each": {
@@ -11753,7 +11753,7 @@
     "babel-jest": {
       "version": "25.1.0",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-25.1.0.tgz",
-      "integrity": "sha1-IGCTrDgKS3jEQEoFsydzkSePgPs=",
+      "integrity": "sha512-tz0VxUhhOE2y+g8R2oFrO/2VtVjA1lkJeavlhExuRBg3LdNJY9gwQ+Vcvqt9+cqy71MCTJhewvTB7Qtnnr9SWg==",
       "dev": true,
       "requires": {
         "@jest/transform": "^25.1.0",
@@ -11799,7 +11799,7 @@
         "chalk": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha1-P3PCv1JlkfV0zEksUeJFY0n4ROQ=",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
           "dev": true,
           "requires": {
             "ansi-styles": "^4.1.0",
@@ -11809,7 +11809,7 @@
         "color-convert": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
           "dev": true,
           "requires": {
             "color-name": "~1.1.4"
@@ -11818,19 +11818,19 @@
         "color-name": {
           "version": "1.1.4",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
+          "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": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "dev": true,
           "requires": {
             "has-flag": "^4.0.0"
@@ -13823,7 +13823,7 @@
     "byte-size": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/byte-size/-/byte-size-5.0.1.tgz",
-      "integrity": "sha1-S2UQOaXs2Wdn5xo9ftOA5IvtQZE=",
+      "integrity": "sha512-/XuKeqWocKsYa/cBY1YbSJSWWqTi4cFgr9S6OyM7PBaPbr9zvNGwWP33vt0uqGhwDdN+y3yhbXVILEUpnwEWGw==",
       "dev": true
     },
     "bytes": {
@@ -14059,7 +14059,7 @@
     "camelcase-keys": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
-      "integrity": "sha1-XnVda6UaoiPsfT1S8ld4IQ+dw8A=",
+      "integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==",
       "dev": true,
       "requires": {
         "camelcase": "^5.3.1",
@@ -14659,7 +14659,7 @@
     "command-exists": {
       "version": "1.2.9",
       "resolved": "https://registry.npmjs.org/command-exists/-/command-exists-1.2.9.tgz",
-      "integrity": "sha1-xQclrzgIyKsCYP1gsB+/oluVT2k=",
+      "integrity": "sha512-LTQ/SGc+s0Xc0Fu5WaKnR0YiygZkm9eKFvyS+fRsU7/ZWFF8ykFM6Pc9aCVf1+xasOOZpO3BAVgVrKvsqKHV7w==",
       "dev": true
     },
     "commander": {
@@ -14969,7 +14969,7 @@
     "conventional-changelog-core": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/conventional-changelog-core/-/conventional-changelog-core-3.2.3.tgz",
-      "integrity": "sha1-sxQQhW9DHIRwhqfctNLKGEp9iPs=",
+      "integrity": "sha512-LMMX1JlxPIq/Ez5aYAYS5CpuwbOk6QFp8O4HLAcZxe3vxoCtABkhfjetk8IYdRB9CDQGwJFLR3Dr55Za6XKgUQ==",
       "dev": true,
       "requires": {
         "conventional-changelog-writer": "^4.0.6",
@@ -15011,7 +15011,7 @@
         "through2": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.2.tgz",
-          "integrity": "sha1-mfiJMc/HYex2eLQdXXM2tbage/Q=",
+          "integrity": "sha512-enaDQ4MUyP2W6ZyT6EsMzqBPZaM/avg8iuo+l2d3QCs0J+6RaqkHV/2/lOwDTueBHeJ/2LG9lrLW3d5rWPucuQ==",
           "dev": true,
           "requires": {
             "inherits": "^2.0.4",
@@ -15023,7 +15023,7 @@
     "conventional-changelog-preset-loader": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/conventional-changelog-preset-loader/-/conventional-changelog-preset-loader-2.3.4.tgz",
-      "integrity": "sha1-FKhVq7/9WQJ/1gJYHx802YYupEw=",
+      "integrity": "sha512-GEKRWkrSAZeTq5+YjUZOYxdHq+ci4dNwHvpaBC3+ENalzFWuCWa9EZXSuZBpkr72sMdKB+1fyDV4takK1Lf58g==",
       "dev": true
     },
     "conventional-changelog-writer": {
@@ -15093,7 +15093,7 @@
     "conventional-recommended-bump": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/conventional-recommended-bump/-/conventional-recommended-bump-5.0.1.tgz",
-      "integrity": "sha1-WvY5A5R7bgied3Z2ActZLKuxBro=",
+      "integrity": "sha512-RVdt0elRcCxL90IrNP0fYCpq1uGt2MALko0eyeQ+zQuDVWtMGAy9ng6yYn3kax42lCj9+XBxQ8ZN6S9bdKxDhQ==",
       "dev": true,
       "requires": {
         "concat-stream": "^2.0.0",
@@ -15126,7 +15126,7 @@
         "concat-stream": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
-          "integrity": "sha1-QUz1r3kKSMYKub5FJ9VtXkETPLE=",
+          "integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==",
           "dev": true,
           "requires": {
             "buffer-from": "^1.0.0",
@@ -15150,7 +15150,7 @@
         "meow": {
           "version": "4.0.1",
           "resolved": "https://registry.npmjs.org/meow/-/meow-4.0.1.tgz",
-          "integrity": "sha1-1IWY9vSxRy81v2MXqVlFrONH+XU=",
+          "integrity": "sha512-xcSBHD5Z86zaOc+781KrupuHAzeGXSLtiAOmBsiLDiPSaYSB6hdew2ng9EBAnZ62jagG9MHAOdxpDi/lWBFJ/A==",
           "dev": true,
           "requires": {
             "camelcase-keys": "^4.0.0",
@@ -15167,7 +15167,7 @@
         "minimist-options": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-3.0.2.tgz",
-          "integrity": "sha1-+6TIGRM54T7PTWG+sD8HAQPz2VQ=",
+          "integrity": "sha512-FyBrT/d0d4+uiZRbqznPXqw3IpZZG3gl3wKWiX784FycUKVwBt0uLBFkQrtE4tZOrgo78nZp2jnKz3L65T5LdQ==",
           "dev": true,
           "requires": {
             "arrify": "^1.0.1",
@@ -15944,7 +15944,7 @@
     "dateformat": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz",
-      "integrity": "sha1-puN0maTZqc+F71hyBE1ikByYia4=",
+      "integrity": "sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==",
       "dev": true
     },
     "deasync": {
@@ -16315,7 +16315,7 @@
     "deprecation": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz",
-      "integrity": "sha1-Y2jL20Cr8zc7UlrIfkomDDpwCRk=",
+      "integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==",
       "dev": true
     },
     "deps-sort": {
@@ -18203,7 +18203,7 @@
     "express-ws": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/express-ws/-/express-ws-4.0.0.tgz",
-      "integrity": "sha1-2r2NyXRRZBiQKkH+bjDtlJtNNsQ=",
+      "integrity": "sha512-KEyUw8AwRET2iFjFsI1EJQrJ/fHeGiJtgpYgEWG3yDv4l/To/m3a2GaYfeGyB3lsWdvbesjF5XCMx+SVBgAAYw==",
       "requires": {
         "ws": "^5.2.0"
       },
@@ -20080,7 +20080,7 @@
     "genfun": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/genfun/-/genfun-5.0.0.tgz",
-      "integrity": "sha1-ndlxCgaQClxKW/V6yl2k5S/nZTc=",
+      "integrity": "sha512-KGDOARWVga7+rnB3z9Sd2Letx515owfk0hSxHGuqjANb1M+x2bGZGqHLiozPsYMdM2OubeMni/Hpwmjq6qIUhA==",
       "dev": true
     },
     "gensync": {
@@ -20309,7 +20309,7 @@
     "get-port": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/get-port/-/get-port-4.2.0.tgz",
-      "integrity": "sha1-43Nosehjt2KcQ8WjI2Jflc8ksRk=",
+      "integrity": "sha512-/b3jarXkH8KJoOMQc3uVGHASwGLPq3gSFJ7tgJm2diza+bydJPTGOibin2steecKeOylE8oY2JERlVWkAJO6yw==",
       "dev": true
     },
     "get-stdin": {
@@ -20402,7 +20402,7 @@
     "git-raw-commits": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/git-raw-commits/-/git-raw-commits-2.0.0.tgz",
-      "integrity": "sha1-2Srd90RAwUvMXIPszj+3+KeRGLU=",
+      "integrity": "sha512-w4jFEJFgKXMQJ0H0ikBk2S+4KP2VEjhCvLCNqbNRQC8BgGWgLKNCO7a9K9LI+TVT7Gfoloje502sEnctibffgg==",
       "dev": true,
       "requires": {
         "dargs": "^4.0.1",
@@ -20444,7 +20444,7 @@
         "meow": {
           "version": "4.0.1",
           "resolved": "https://registry.npmjs.org/meow/-/meow-4.0.1.tgz",
-          "integrity": "sha1-1IWY9vSxRy81v2MXqVlFrONH+XU=",
+          "integrity": "sha512-xcSBHD5Z86zaOc+781KrupuHAzeGXSLtiAOmBsiLDiPSaYSB6hdew2ng9EBAnZ62jagG9MHAOdxpDi/lWBFJ/A==",
           "dev": true,
           "requires": {
             "camelcase-keys": "^4.0.0",
@@ -20461,7 +20461,7 @@
         "minimist-options": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-3.0.2.tgz",
-          "integrity": "sha1-+6TIGRM54T7PTWG+sD8HAQPz2VQ=",
+          "integrity": "sha512-FyBrT/d0d4+uiZRbqznPXqw3IpZZG3gl3wKWiX784FycUKVwBt0uLBFkQrtE4tZOrgo78nZp2jnKz3L65T5LdQ==",
           "dev": true,
           "requires": {
             "arrify": "^1.0.1",
@@ -20549,7 +20549,7 @@
     "git-semver-tags": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/git-semver-tags/-/git-semver-tags-2.0.3.tgz",
-      "integrity": "sha1-SJiKcYrPWTgA+ZYiqVKnfEBb+jQ=",
+      "integrity": "sha512-tj4FD4ww2RX2ae//jSrXZzrocla9db5h0V7ikPl1P/WwoZar9epdUhwR7XHXSgc+ZkNq72BEEerqQuicoEQfzA==",
       "dev": true,
       "requires": {
         "meow": "^4.0.0",
@@ -20588,7 +20588,7 @@
         "meow": {
           "version": "4.0.1",
           "resolved": "https://registry.npmjs.org/meow/-/meow-4.0.1.tgz",
-          "integrity": "sha1-1IWY9vSxRy81v2MXqVlFrONH+XU=",
+          "integrity": "sha512-xcSBHD5Z86zaOc+781KrupuHAzeGXSLtiAOmBsiLDiPSaYSB6hdew2ng9EBAnZ62jagG9MHAOdxpDi/lWBFJ/A==",
           "dev": true,
           "requires": {
             "camelcase-keys": "^4.0.0",
@@ -20605,7 +20605,7 @@
         "minimist-options": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-3.0.2.tgz",
-          "integrity": "sha1-+6TIGRM54T7PTWG+sD8HAQPz2VQ=",
+          "integrity": "sha512-FyBrT/d0d4+uiZRbqznPXqw3IpZZG3gl3wKWiX784FycUKVwBt0uLBFkQrtE4tZOrgo78nZp2jnKz3L65T5LdQ==",
           "dev": true,
           "requires": {
             "arrify": "^1.0.1",
@@ -21341,7 +21341,7 @@
     "hard-rejection": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz",
-      "integrity": "sha1-HG7aXBaFxjlCdm15u0Cudzzs2IM=",
+      "integrity": "sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==",
       "dev": true
     },
     "harmony-reflect": {
@@ -21995,7 +21995,7 @@
     "init-package-json": {
       "version": "1.10.3",
       "resolved": "https://registry.npmjs.org/init-package-json/-/init-package-json-1.10.3.tgz",
-      "integrity": "sha1-Rf/i9hCoyhNPK9HbVjeyNQcPbL4=",
+      "integrity": "sha512-zKSiXKhQveNteyhcj1CoOP8tqp1QuxPIPBl8Bid99DGLFqA1p87M6lNgfjJHSBoWJJlidGOv5rWjyYKEB3g2Jw==",
       "dev": true,
       "requires": {
         "glob": "^7.1.1",
@@ -22011,7 +22011,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -22023,7 +22023,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         }
       }
@@ -28181,7 +28181,7 @@
     "lerna": {
       "version": "3.22.1",
       "resolved": "https://registry.npmjs.org/lerna/-/lerna-3.22.1.tgz",
-      "integrity": "sha1-ggJ6w9qcYn/YvwLM/v+AapjmW2I=",
+      "integrity": "sha512-vk1lfVRFm+UuEFA7wkLKeSF7Iz13W+N/vFd48aW2yuS7Kv0RbNm2/qcDPV863056LMfkRlsEe+QYOw3palj5Lg==",
       "dev": true,
       "requires": {
         "@lerna/add": "3.21.0",
@@ -28645,7 +28645,7 @@
     "lodash.template": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
-      "integrity": "sha1-+XYZXPPzR9DV9SSDVp/oAxzM6Ks=",
+      "integrity": "sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==",
       "dev": true,
       "requires": {
         "lodash._reinterpolate": "^3.0.0",
@@ -28655,7 +28655,7 @@
     "lodash.templatesettings": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz",
-      "integrity": "sha1-5IExDwSdPPbUfpEq0JMTsVTw+zM=",
+      "integrity": "sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==",
       "dev": true,
       "requires": {
         "lodash._reinterpolate": "^3.0.0"
@@ -29342,7 +29342,7 @@
     "min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
-      "integrity": "sha1-pj9oFnOzBXH76LwlaGrnRu76mGk=",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
       "dev": true
     },
     "mini-css-extract-plugin": {
@@ -29450,7 +29450,7 @@
     "minimist-options": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz",
-      "integrity": "sha1-wGVXE8U6ii69d/+iR9NCxA8BBhk=",
+      "integrity": "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==",
       "dev": true,
       "requires": {
         "arrify": "^1.0.1",
@@ -30257,7 +30257,7 @@
     "modify-values": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz",
-      "integrity": "sha1-s5OfpgVUZHTj4+PGPWS9Q7TuYCI=",
+      "integrity": "sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==",
       "dev": true
     },
     "module-deps": {
@@ -30604,7 +30604,7 @@
     "multimatch": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-3.0.0.tgz",
-      "integrity": "sha1-DiU0zGvCONmrZ+G5zV/Nhabb9ws=",
+      "integrity": "sha512-22foS/gqQfANZ3o+W7ST2x25ueHDVNWl/b9OlGcLpy/iKxjCpvcNCM51YCenUi7Mt/jAjjqv8JwZRs8YP5sRjA==",
       "dev": true,
       "requires": {
         "array-differ": "^2.0.3",
@@ -30651,7 +30651,7 @@
     "mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
-      "integrity": "sha1-lQCAV6Vsr63CvGPd5/n/aVWUjjI=",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
       "dev": true,
       "requires": {
         "any-promise": "^1.0.0",
@@ -31328,7 +31328,7 @@
     "node-fetch-npm": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/node-fetch-npm/-/node-fetch-npm-2.0.4.tgz",
-      "integrity": "sha1-ZQfQ4XqewL477FFpWKSXzsVL9aQ=",
+      "integrity": "sha512-iOuIQDWDyjhv9qSDrj9aq/klt6F9z1p2otB3AV7v3zBDcL/x+OfGsvGQZZCcMZbUf4Ujw1xGNQkjvGnVT22cKg==",
       "dev": true,
       "requires": {
         "encoding": "^0.1.11",
@@ -34071,7 +34071,7 @@
     "npm-lifecycle": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/npm-lifecycle/-/npm-lifecycle-3.1.5.tgz",
-      "integrity": "sha1-mILTZCuMgsgVeCoS5qG/7tACYwk=",
+      "integrity": "sha512-lDLVkjfZmvmfvpvBzA4vzee9cn+Me4orq0QF8glbswJVEbIcSNWib7qGOffolysc3teCqbbPZZkzbr3GQZTL1g==",
       "dev": true,
       "requires": {
         "byline": "^5.0.0",
@@ -34087,7 +34087,7 @@
         "node-gyp": {
           "version": "5.1.1",
           "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-5.1.1.tgz",
-          "integrity": "sha1-65Ffe2Mck30oLjOu1Ey3oCX2Kj4=",
+          "integrity": "sha512-WH0WKGi+a4i4DUt2mHnvocex/xPLp9pYt5R6M2JdFB7pJ7Z34hveZ4nDTGTiLXCkitA9T8HFZjhinBCiVHYcWw==",
           "dev": true,
           "requires": {
             "env-paths": "^2.2.0",
@@ -34106,7 +34106,7 @@
         "nopt": {
           "version": "4.0.3",
           "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz",
-          "integrity": "sha1-o3XK2dAv2SEnjZVMIlTVqlfhXkg=",
+          "integrity": "sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==",
           "dev": true,
           "requires": {
             "abbrev": "1",
@@ -34116,7 +34116,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         }
       }
@@ -36020,7 +36020,7 @@
     "octokit-pagination-methods": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/octokit-pagination-methods/-/octokit-pagination-methods-1.1.0.tgz",
-      "integrity": "sha1-z0cu3J1VEFX573P25CtNu0yAvqQ=",
+      "integrity": "sha512-fZ4qZdQ2nxJvtcasX7Ghl+WlWS/d9IgnBIwFZXVNNZUmzpno91SX5bc5vuxiuKoCtK78XxGGNuSCrDC7xYB3OQ==",
       "dev": true
     },
     "on-finished": {
@@ -36482,7 +36482,7 @@
     "os-name": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/os-name/-/os-name-3.1.0.tgz",
-      "integrity": "sha1-3sGdlmKW4c1i1wGlpm7h3ernCAE=",
+      "integrity": "sha512-h8L+8aNjNcMpo/mAIBPn5PXCM16iyPGjHNWo6U1YO8sJTMHtEtyczI6QJnLoplswm6goopQkqc7OAnjhWcugVg==",
       "dev": true,
       "requires": {
         "macos-release": "^2.2.0",
@@ -38126,7 +38126,7 @@
     "prop-types-extra": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
-      "integrity": "sha1-WMO3TL+7ldMEYll1qi8ISDKaAQs=",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
       "requires": {
         "react-is": "^16.3.2",
         "warning": "^4.0.0"
@@ -38153,7 +38153,7 @@
     "protoduck": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/protoduck/-/protoduck-5.0.1.tgz",
-      "integrity": "sha1-A8NlnKGAB7aaUP2Cp+vMUWJhFR8=",
+      "integrity": "sha512-WxoCeDCoCBY55BMvj4cAEjdVUFGRWed9ZxPlqTKYyw1nDDTQ4pqmnIMAGfJlg7Dx35uB/M+PHJPTmGOvaCaPTg==",
       "dev": true,
       "requires": {
         "genfun": "^5.0.0"
@@ -38365,7 +38365,7 @@
     "quick-lru": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz",
-      "integrity": "sha1-W4h48ROlgheEjGSCAmxz4bpXcn8=",
+      "integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==",
       "dev": true
     },
     "raf-schd": {
@@ -38539,7 +38539,7 @@
     "react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha1-TxonOv38jzSIqMUWv9p4+HI1I2I="
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
     "react-overlays": {
       "version": "5.1.1",
@@ -38636,7 +38636,7 @@
     "read-cmd-shim": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/read-cmd-shim/-/read-cmd-shim-1.0.5.tgz",
-      "integrity": "sha1-h+Q+ulAJi6WjLQzrWDq45DuWHBY=",
+      "integrity": "sha512-v5yCqQ/7okKoZZkBQUAfTsQ3sVJtXdNfbPnI5cceppoxEVLYA3k+VtV2omkeo8MS94JCy4fSiUwlRBAwCVRPUA==",
       "dev": true,
       "requires": {
         "graceful-fs": "^4.1.2"
@@ -38708,7 +38708,7 @@
     "read-package-tree": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/read-package-tree/-/read-package-tree-5.3.1.tgz",
-      "integrity": "sha1-oyy2TH8x64pvMe8G+c7fdAaP5jY=",
+      "integrity": "sha512-mLUDsD5JVtlZxjSlPPx1RETkNjjvQYuweKwNVt1Sn8kP5Jh44pvYuUHCp6xSVDZWbNxVxG5lyZJ921aJH61sTw==",
       "dev": true,
       "requires": {
         "read-package-json": "^2.0.0",
@@ -38897,7 +38897,7 @@
     "redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
-      "integrity": "sha1-5Ve3mYMWu1PJ8fVvpiY1LGljBZ8=",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
       "dev": true,
       "requires": {
         "indent-string": "^4.0.0",
@@ -40845,7 +40845,7 @@
     "solc": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/solc/-/solc-0.7.4.tgz",
-      "integrity": "sha1-nF7YGuBpLj5hTkfNW1ALD5SFuY0=",
+      "integrity": "sha512-IVLqAfUkJqgTS0JIgFPeC50ehUeBXu2eE+iU+rqb6UeOyf6w/BB/EsNcTSTpjtUti8BTG/sCd2qVhrWVYy7p0g==",
       "dev": true,
       "requires": {
         "command-exists": "^1.2.8",
@@ -40862,7 +40862,7 @@
         "commander": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/commander/-/commander-3.0.2.tgz",
-          "integrity": "sha1-aDfD+2d62ZM9HPukLdFNURfWs54=",
+          "integrity": "sha512-Gar0ASD4BDyKC4hl4DwHqDrmvjoxWKZigVnAbn5H1owvm4CxCPdb0HQDehwNYMJpla5+M2tPmPARzhtYuwpHow==",
           "dev": true
         },
         "fs-extra": {
@@ -40890,7 +40890,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         },
         "tmp": {
@@ -41071,7 +41071,7 @@
     "split": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz",
-      "integrity": "sha1-YFvZvjA6pZ+zX5Ip++oN3snqB9k=",
+      "integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==",
       "dev": true,
       "requires": {
         "through": "2"
@@ -41557,7 +41557,7 @@
     "strip-indent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
-      "integrity": "sha1-wy4c7pQLazQyx3G8LFS8znPNMAE=",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
       "dev": true,
       "requires": {
         "min-indent": "^1.0.0"
@@ -41571,7 +41571,7 @@
     "strong-log-transformer": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/strong-log-transformer/-/strong-log-transformer-2.1.0.tgz",
-      "integrity": "sha1-D17XjTJeBCGsb5D38Q5pHWrjrhA=",
+      "integrity": "sha512-B3Hgul+z0L9a236FAUC9iZsL+nVHgoCJnqCbN588DjYxvGXaXaaFbfmQ/JhvKjZwsOukuR72XbHv71Qkug0HxA==",
       "dev": true,
       "requires": {
         "duplexer": "^0.1.1",
@@ -42416,7 +42416,7 @@
         "make-dir": {
           "version": "1.3.0",
           "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
-          "integrity": "sha1-ecEDO4BRW9bSTsmTPoYMp17ifww=",
+          "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
           "dev": true,
           "requires": {
             "pify": "^3.0.0"
@@ -42669,7 +42669,7 @@
     "text-extensions": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/text-extensions/-/text-extensions-1.9.0.tgz",
-      "integrity": "sha1-GFPkX+45yUXOb2w2stZZtaq8KiY=",
+      "integrity": "sha512-wiBrwC1EhBelW12Zy26JeOUkQ5mRu+5o8rpsJk5+2t+Y5vE7e842qtZDQ2g1NpX/29HdyFeJ4nSIhI47ENSxlQ==",
       "dev": true
     },
     "text-hex": {
@@ -42686,7 +42686,7 @@
     "thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
-      "integrity": "sha1-iTLmhqQGYDigFt2eLKRq3Zg4qV8=",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
       "dev": true,
       "requires": {
         "any-promise": "^1.0.0"
@@ -43670,7 +43670,7 @@
     "universal-user-agent": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-4.0.1.tgz",
-      "integrity": "sha1-/Y1st3OmeacJ6WfvgoijH8wD5Vc=",
+      "integrity": "sha512-LnST3ebHwVL2aNe4mejI9IQh2HfZ1RLo8Io2HugSif8ekzD1TlWpHpColOB/eh8JHMLkGH3Akqf040I+4ylNxg==",
       "dev": true,
       "requires": {
         "os-name": "^3.1.0"
@@ -44310,7 +44310,7 @@
     "warning": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
-      "integrity": "sha1-Fungd+uKhtavfWSqHgX9hbRnjKM=",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
       "requires": {
         "loose-envify": "^1.0.0"
       }
@@ -45809,7 +45809,7 @@
     "write-json-file": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/write-json-file/-/write-json-file-3.2.0.tgz",
-      "integrity": "sha1-Zbvcns2KFFjhWVJ3DMut/P9f5io=",
+      "integrity": "sha512-3xZqT7Byc2uORAatYiP3DHUUAVEkNOswEWNs9H5KXiicRTvzYzYqKjYc4G7p+8pltvAw641lVByKVtMpf+4sYQ==",
       "dev": true,
       "requires": {
         "detect-indent": "^5.0.0",
@@ -45832,7 +45832,7 @@
         "write-file-atomic": {
           "version": "2.4.3",
           "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz",
-          "integrity": "sha1-H9Lprh3z51uNjDZ0Q8aS1MqB9IE=",
+          "integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.11",
@@ -45845,7 +45845,7 @@
     "write-pkg": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/write-pkg/-/write-pkg-3.2.0.tgz",
-      "integrity": "sha1-DheP6Xgg04mokovHlTXb5ows/yE=",
+      "integrity": "sha512-tX2ifZ0YqEFOF1wjRW2Pk93NLsj02+n1UP5RvO6rCs0K6R2g1padvf006cY74PQJKMGS2r42NK7FD0dG6Y6paw==",
       "dev": true,
       "requires": {
         "sort-keys": "^2.0.0",
@@ -45855,7 +45855,7 @@
         "make-dir": {
           "version": "1.3.0",
           "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
-          "integrity": "sha1-ecEDO4BRW9bSTsmTPoYMp17ifww=",
+          "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
           "dev": true,
           "requires": {
             "pify": "^3.0.0"
@@ -45879,7 +45879,7 @@
         "write-file-atomic": {
           "version": "2.4.3",
           "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz",
-          "integrity": "sha1-H9Lprh3z51uNjDZ0Q8aS1MqB9IE=",
+          "integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.11",
diff --git a/tsconfig.base.json b/tsconfig.base.json
index dd7f9d7c37..6e87acc28a 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -68,8 +68,7 @@
       "@remix-ui/tabs": ["libs/remix-ui/tabs/src/index.ts"],
       "@remix-ui/helper": ["libs/remix-ui/helper/src/index.ts"],
       "@remix-ui/vertical-icons-panel": ["libs/remix-ui/vertical-icons-panel/src/index.ts"],
-      "@remix-ui/main-panel": ["libs/remix-ui/main-panel/src/index.ts"],
-      "@remix-ui/side-panel": ["libs/remix-ui/side-panel/src/index.ts"]
+      "@remix-ui/panel": ["libs/remix-ui/panel/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]
diff --git a/workspace.json b/workspace.json
index 76e06a7334..6fcb0ffc66 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1135,31 +1135,16 @@
         }
       }
     },
-    "remix-ui-main-panel": {
-      "root": "libs/remix-ui/main-panel",
-      "sourceRoot": "libs/remix-ui/main-panel/src",
-      "projectType": "library",
-      "architect": {
-        "lint": {
-          "builder": "@nrwl/linter:lint",
-          "options": {
-            "linter": "eslint",
-            "tsConfig": ["libs/remix-ui/main-panel/tsconfig.lib.json"],
-            "exclude": ["**/node_modules/**", "!libs/remix-ui/main-panel/**/*"]
-          }
-        }
-      }
-    },
-    "remix-ui-side-panel": {
-      "root": "libs/remix-ui/side-panel",
-      "sourceRoot": "libs/remix-ui/side-panel/src",
+    "remix-ui-panel": {
+      "root": "libs/remix-ui/panel",
+      "sourceRoot": "libs/remix-ui/panel/src",
       "projectType": "library",
       "architect": {
         "lint": {
           "builder": "@nrwl/linter:eslint",
           "options": {
             "lintFilePatterns": [
-              "libs/remix-ui/side-panel/**/*.{ts,tsx,js,jsx}"
+              "libs/remix-ui/panel/**/*.{ts,tsx,js,jsx}"
             ]
           }
         }

From 0910ce07c7f13b8f1046627e9bcd7b8760822afa Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Sat, 25 Dec 2021 10:33:31 +0100
Subject: [PATCH 020/168] rm main panel

---
 libs/remix-ui/main-panel/.babelrc             | 12 ---------
 libs/remix-ui/main-panel/.eslintrc.json       | 18 -------------
 libs/remix-ui/main-panel/README.md            |  7 -----
 libs/remix-ui/main-panel/package.json         |  4 ---
 libs/remix-ui/main-panel/src/index.ts         |  1 -
 .../src/lib/remix-ui-main-panel.module.css    | 26 -------------------
 .../src/lib/remix-ui-main-panel.tsx           | 16 ------------
 libs/remix-ui/main-panel/tsconfig.json        | 20 --------------
 libs/remix-ui/main-panel/tsconfig.lib.json    | 13 ----------
 9 files changed, 117 deletions(-)
 delete mode 100644 libs/remix-ui/main-panel/.babelrc
 delete mode 100644 libs/remix-ui/main-panel/.eslintrc.json
 delete mode 100644 libs/remix-ui/main-panel/README.md
 delete mode 100644 libs/remix-ui/main-panel/package.json
 delete mode 100644 libs/remix-ui/main-panel/src/index.ts
 delete mode 100644 libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css
 delete mode 100644 libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx
 delete mode 100644 libs/remix-ui/main-panel/tsconfig.json
 delete mode 100644 libs/remix-ui/main-panel/tsconfig.lib.json

diff --git a/libs/remix-ui/main-panel/.babelrc b/libs/remix-ui/main-panel/.babelrc
deleted file mode 100644
index ccae900be4..0000000000
--- a/libs/remix-ui/main-panel/.babelrc
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "presets": [
-    [
-      "@nrwl/react/babel",
-      {
-        "runtime": "automatic",
-        "useBuiltIns": "usage"
-      }
-    ]
-  ],
-  "plugins": []
-}
diff --git a/libs/remix-ui/main-panel/.eslintrc.json b/libs/remix-ui/main-panel/.eslintrc.json
deleted file mode 100644
index 50e59482cf..0000000000
--- a/libs/remix-ui/main-panel/.eslintrc.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {}
-    },
-    {
-      "files": ["*.ts", "*.tsx"],
-      "rules": {}
-    },
-    {
-      "files": ["*.js", "*.jsx"],
-      "rules": {}
-    }
-  ]
-}
diff --git a/libs/remix-ui/main-panel/README.md b/libs/remix-ui/main-panel/README.md
deleted file mode 100644
index 94b0df71d8..0000000000
--- a/libs/remix-ui/main-panel/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# remix-ui-main-panel
-
-This library was generated with [Nx](https://nx.dev).
-
-## Running unit tests
-
-Run `nx test remix-ui-main-panel` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/remix-ui/main-panel/package.json b/libs/remix-ui/main-panel/package.json
deleted file mode 100644
index 3abca6713c..0000000000
--- a/libs/remix-ui/main-panel/package.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "name": "@remix-ui/main-panel",
-  "version": "0.0.1"
-}
diff --git a/libs/remix-ui/main-panel/src/index.ts b/libs/remix-ui/main-panel/src/index.ts
deleted file mode 100644
index ef68ed6db3..0000000000
--- a/libs/remix-ui/main-panel/src/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './lib/remix-ui-main-panel';
diff --git a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css
deleted file mode 100644
index d5e4c7e6b2..0000000000
--- a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css
+++ /dev/null
@@ -1,26 +0,0 @@
-.plugins        {
-    height: 100%;
-  }
-  .plugItIn       {
-    display        : none;
-    height         : 100%;
-  }
-  .plugItIn > div {
-    overflow-y     : auto;
-    overflow-x     : hidden;
-    height         : 100%;
-    width          : 100%;
-  }
-  .plugItIn.active     {
-    display        : block;
-  }
-  .pluginsContainer {
-    height         : 100%;
-    overflow-y     : hidden;
-  }
-
-  /* .pluginsContainer {
-    height: 100%;
-    display: flex;
-    overflow-y: hidden;
-  } */
\ No newline at end of file
diff --git a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx
deleted file mode 100644
index e52f84322a..0000000000
--- a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react' // eslint-disable-line
-import './remix-ui-main-panel.module.css';
-export interface RemixUiMainPanelProps {
-  plugin: any
-  contents: [any]
-}
-
-export const RemixUiMainPanel = (props: RemixUiMainPanelProps) =>  {
-  const dom = useRef(null)
-  return (
-   <div className="pluginsContainer" data-id="mainPanelPluginsContainer" id='mainPanelPluginsContainer-id' ref={dom} >
-   </div>
-  )
-}
-
-export default RemixUiMainPanel;
diff --git a/libs/remix-ui/main-panel/tsconfig.json b/libs/remix-ui/main-panel/tsconfig.json
deleted file mode 100644
index 8bd701c578..0000000000
--- a/libs/remix-ui/main-panel/tsconfig.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "extends": "../../../tsconfig.base.json",
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "allowJs": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    }
-  ]
-}
diff --git a/libs/remix-ui/main-panel/tsconfig.lib.json b/libs/remix-ui/main-panel/tsconfig.lib.json
deleted file mode 100644
index b560bc4dec..0000000000
--- a/libs/remix-ui/main-panel/tsconfig.lib.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "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"]
-}

From 3d587833be1d439759d65507cd7c74bda63ed430 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Sat, 25 Dec 2021 10:39:38 +0100
Subject: [PATCH 021/168] mv some ids

---
 apps/remix-ide/src/app/components/main-panel.tsx | 2 +-
 libs/remix-ui/panel/src/lib/panel-header.tsx     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/remix-ide/src/app/components/main-panel.tsx b/apps/remix-ide/src/app/components/main-panel.tsx
index 79e4f9b64e..fd343c8f2b 100644
--- a/apps/remix-ide/src/app/components/main-panel.tsx
+++ b/apps/remix-ide/src/app/components/main-panel.tsx
@@ -17,7 +17,7 @@ export class MainPanel extends AbstractPanel {
     constructor (config) {
       super(profile)
       this.element = document.createElement('div')
-      this.element.setAttribute('class', 'mainPanelPluginsContainer')
+      this.element.setAttribute('data-id', 'mainPanelPluginsContainer')
       // this.config = config
     }
 
diff --git a/libs/remix-ui/panel/src/lib/panel-header.tsx b/libs/remix-ui/panel/src/lib/panel-header.tsx
index caf8eba5e1..b94dd67cac 100644
--- a/libs/remix-ui/panel/src/lib/panel-header.tsx
+++ b/libs/remix-ui/panel/src/lib/panel-header.tsx
@@ -21,7 +21,7 @@ const RemixUIPanelHeader = (props: RemixPanelProps) => {
     }, [props])
 
     return  (
-    <header data-id='sidePanelSwapitTitle' className='swapitHeader'><h6>{plugin?.profile.displayName || plugin?.profile.name}</h6>
+    <header className='swapitHeader'><h6 data-id='sidePanelSwapitTitle'>{plugin?.profile.displayName || plugin?.profile.name}</h6>
     {plugin?.profile.documentation ? (<a href={plugin.profile.documentation} className="titleInfo" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>) : ''}
     </header>)
 }

From 5c7b50ef357f83ed6dd89bacf596c67af9ad255f Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Sat, 25 Dec 2021 10:47:49 +0100
Subject: [PATCH 022/168] lint fix

---
 .../src/app/components/hidden-panel.tsx       |  2 +-
 .../src/app/components/main-panel.tsx         |  2 +-
 .../src/app/components/side-panel.tsx         |  3 +-
 libs/remix-ui/panel/.eslintrc.json            | 34 +++++++++----------
 .../remix-ui/panel/src/lib/remix-ui-panel.tsx |  5 +--
 5 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/apps/remix-ide/src/app/components/hidden-panel.tsx b/apps/remix-ide/src/app/components/hidden-panel.tsx
index a179d9eb76..22b0022792 100644
--- a/apps/remix-ide/src/app/components/hidden-panel.tsx
+++ b/apps/remix-ide/src/app/components/hidden-panel.tsx
@@ -25,6 +25,6 @@ export class HiddenPanel extends AbstractPanel {
   }
 
   renderComponent () {
-    ReactDOM.render(<RemixPanel plugins={this.plugins}/>, this.el)
+    ReactDOM.render(<RemixPanel header={<></>} plugins={this.plugins}/>, this.el)
   }
 }
diff --git a/apps/remix-ide/src/app/components/main-panel.tsx b/apps/remix-ide/src/app/components/main-panel.tsx
index fd343c8f2b..a26516901b 100644
--- a/apps/remix-ide/src/app/components/main-panel.tsx
+++ b/apps/remix-ide/src/app/components/main-panel.tsx
@@ -51,6 +51,6 @@ export class MainPanel extends AbstractPanel {
     }
 
     renderComponent () {
-      ReactDOM.render(<RemixPanel plugins={this.plugins}/>, this.element)
+      ReactDOM.render(<RemixPanel header={<></>} plugins={this.plugins}/>, this.element)
     }
 }
diff --git a/apps/remix-ide/src/app/components/side-panel.tsx b/apps/remix-ide/src/app/components/side-panel.tsx
index 125622441c..52c3b40f26 100644
--- a/apps/remix-ide/src/app/components/side-panel.tsx
+++ b/apps/remix-ide/src/app/components/side-panel.tsx
@@ -6,6 +6,7 @@ import { RemixPanel } from '@remix-ui/panel'
 import packageJson from '../../../../../package.json'
 import { RemixAppManager } from '../../remixAppManager'
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
+import RemixUIPanelHeader from 'libs/remix-ui/panel/src/lib/panel-header'
 // const csjs = require('csjs-inject')
 
 const sidePanel = {
@@ -88,6 +89,6 @@ export class SidePanel extends AbstractPanel {
   }
 
   renderComponent () {
-    ReactDOM.render(<RemixPanel plugins={this.plugins}/>, this.sideelement)
+    ReactDOM.render(<RemixPanel header={<RemixUIPanelHeader plugins={this.plugins}></RemixUIPanelHeader>} plugins={this.plugins}/>, this.sideelement)
   }
 }
diff --git a/libs/remix-ui/panel/.eslintrc.json b/libs/remix-ui/panel/.eslintrc.json
index 50e59482cf..b8666066e9 100644
--- a/libs/remix-ui/panel/.eslintrc.json
+++ b/libs/remix-ui/panel/.eslintrc.json
@@ -1,18 +1,18 @@
 {
-  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {}
-    },
-    {
-      "files": ["*.ts", "*.tsx"],
-      "rules": {}
-    },
-    {
-      "files": ["*.js", "*.jsx"],
-      "rules": {}
-    }
-  ]
-}
+  "env": {
+      "browser": true,
+      "es6": true
+  },
+  "extends": "../../../.eslintrc",
+  "globals": {
+      "Atomics": "readonly",
+      "SharedArrayBuffer": "readonly"
+  },
+  "parserOptions": {
+      "ecmaVersion": 11,
+      "sourceType": "module"
+  },
+  "rules": {
+      "standard/no-callback-literal": "off"
+  }
+} 
diff --git a/libs/remix-ui/panel/src/lib/remix-ui-panel.tsx b/libs/remix-ui/panel/src/lib/remix-ui-panel.tsx
index c36d4d58de..b1add48fcb 100644
--- a/libs/remix-ui/panel/src/lib/remix-ui-panel.tsx
+++ b/libs/remix-ui/panel/src/lib/remix-ui-panel.tsx
@@ -6,14 +6,15 @@ import { PluginRecord } from './types';
 
 /* eslint-disable-next-line */
 export interface RemixPanelProps {
-  plugins: Record<string, PluginRecord>;
+  plugins: Record<string, PluginRecord>
+  header: JSX.Element
 }
 
 export function RemixPanel(props: RemixPanelProps) {
 
   return (
     <div className='panel plugin-manager'>
-      <RemixUIPanelHeader plugins={props.plugins}></RemixUIPanelHeader>
+      {props.header}
       <div className="pluginsContainer">
         {Object.values(props.plugins).map((pluginRecord) => {
             return <RemixUIPanelPlugin key={pluginRecord.profile.name} pluginRecord={pluginRecord} />

From 6481f583637b8258c5cf1055b69c4b18acfa832b Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Sat, 25 Dec 2021 11:02:28 +0100
Subject: [PATCH 023/168] fix lint

---
 tsconfig.base.json |  3 ++-
 workspace.json     | 11 ++++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/tsconfig.base.json b/tsconfig.base.json
index 3633434dce..1fd4cfdac0 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -72,7 +72,8 @@
       "@remix-ui/vertical-icons-panel": [
         "libs/remix-ui/vertical-icons-panel/src/index.ts"
       ],
-      "@remix-ui/theme-module": ["libs/remix-ui/theme-module/src/index.ts"]
+      "@remix-ui/theme-module": ["libs/remix-ui/theme-module/src/index.ts"],
+      "@remix-ui/panel": ["libs/remix-ui/panel/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]
diff --git a/workspace.json b/workspace.json
index 57aa358230..e73638767f 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1362,10 +1362,15 @@
       "projectType": "library",
       "architect": {
         "lint": {
-          "builder": "@nrwl/linter:eslint",
+          "builder": "@nrwl/linter:lint",
           "options": {
-            "lintFilePatterns": [
-              "libs/remix-ui/panel/**/*.{ts,tsx,js,jsx}"
+            "linter": "eslint",
+            "tsConfig": [
+              "libs/remix-ui/panel/tsconfig.lib.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/remix-ui/panel/**/*"
             ]
           }
         }

From 901d8f5908be7a6c9d7db2112829367a47f46eaf Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Sat, 25 Dec 2021 11:11:05 +0100
Subject: [PATCH 024/168] lint fix

---
 libs/remix-ui/panel/.eslintrc.json            | 261 +++++++++++++++++-
 libs/remix-ui/panel/src/lib/panel-header.tsx  |  30 +-
 libs/remix-ui/panel/src/lib/panel-plugin.tsx  |  30 +-
 .../remix-ui/panel/src/lib/remix-ui-panel.tsx |  17 +-
 4 files changed, 283 insertions(+), 55 deletions(-)

diff --git a/libs/remix-ui/panel/.eslintrc.json b/libs/remix-ui/panel/.eslintrc.json
index b8666066e9..07447c8433 100644
--- a/libs/remix-ui/panel/.eslintrc.json
+++ b/libs/remix-ui/panel/.eslintrc.json
@@ -1,18 +1,249 @@
 {
-  "env": {
+    "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,
-      "es6": true
-  },
-  "extends": "../../../.eslintrc",
-  "globals": {
-      "Atomics": "readonly",
-      "SharedArrayBuffer": "readonly"
-  },
-  "parserOptions": {
-      "ecmaVersion": 11,
-      "sourceType": "module"
-  },
-  "rules": {
-      "standard/no-callback-literal": "off"
+      "commonjs": true,
+      "es6": true,
+      "jest": true,
+      "node": true
+    },
+    "settings": { "react": { "version": "detect" } },
+    "plugins": ["import", "jsx-a11y", "react", "react-hooks"],
+    "extends": ["../../../.eslintrc"],
+    "ignorePatterns": ["!**/*"]
   }
-} 
+  
\ No newline at end of file
diff --git a/libs/remix-ui/panel/src/lib/panel-header.tsx b/libs/remix-ui/panel/src/lib/panel-header.tsx
index b94dd67cac..4e73576446 100644
--- a/libs/remix-ui/panel/src/lib/panel-header.tsx
+++ b/libs/remix-ui/panel/src/lib/panel-header.tsx
@@ -1,29 +1,27 @@
 /* eslint-disable jsx-a11y/anchor-has-content */
 import React, { useEffect, useRef, useState } from 'react' // eslint-disable-line
-import { PluginRecord } from './types';
-import './panel.css';
+import { PluginRecord } from './types'
+import './panel.css'
 
 export interface RemixPanelProps {
     plugins: Record<string, PluginRecord>;
   }
 const RemixUIPanelHeader = (props: RemixPanelProps) => {
-    const [plugin, setPlugin] = useState<PluginRecord>()
+  const [plugin, setPlugin] = useState<PluginRecord>()
 
-    useEffect(() => {
-        if (props.plugins) {
-            const p = Object.values(props.plugins).find((pluginRecord) => {
-                return pluginRecord.active === true
-             })
-             setPlugin(p)
-        }
-    
+  useEffect(() => {
+    if (props.plugins) {
+      const p = Object.values(props.plugins).find((pluginRecord) => {
+        return pluginRecord.active === true
+      })
+      setPlugin(p)
+    }
+  }, [props])
 
-    }, [props])
-
-    return  (
+  return (
     <header className='swapitHeader'><h6 data-id='sidePanelSwapitTitle'>{plugin?.profile.displayName || plugin?.profile.name}</h6>
-    {plugin?.profile.documentation ? (<a href={plugin.profile.documentation} className="titleInfo" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>) : ''}
+      {plugin?.profile.documentation ? (<a href={plugin.profile.documentation} className="titleInfo" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>) : ''}
     </header>)
 }
 
-export default RemixUIPanelHeader
\ No newline at end of file
+export default RemixUIPanelHeader
diff --git a/libs/remix-ui/panel/src/lib/panel-plugin.tsx b/libs/remix-ui/panel/src/lib/panel-plugin.tsx
index 4c128c8ef4..8c747be5d8 100644
--- a/libs/remix-ui/panel/src/lib/panel-plugin.tsx
+++ b/libs/remix-ui/panel/src/lib/panel-plugin.tsx
@@ -1,26 +1,26 @@
 import React, { useEffect, useRef, useState } from 'react' // eslint-disable-line
 import { PluginRecord } from './types'
-import './panel.css';
+import './panel.css'
 interface panelPLuginProps {
     pluginRecord: PluginRecord
 }
 
 const RemixUIPanelPlugin = (props: panelPLuginProps) => {
-    const sidePanelRef = useRef(null)
-    const [view, setView] = useState<JSX.Element | HTMLDivElement>()
-    useEffect(() => {
-        if (sidePanelRef.current) {
-          if (props.pluginRecord.view) {
-            if (React.isValidElement(props.pluginRecord.view)) {
-              setView(props.pluginRecord.view)
-            }else{
-              sidePanelRef.current.appendChild(props.pluginRecord.view)
-            }
-          }
+  const sidePanelRef = useRef(null)
+  const [view, setView] = useState<JSX.Element | HTMLDivElement>()
+  useEffect(() => {
+    if (sidePanelRef.current) {
+      if (props.pluginRecord.view) {
+        if (React.isValidElement(props.pluginRecord.view)) {
+          setView(props.pluginRecord.view)
+        } else {
+          sidePanelRef.current.appendChild(props.pluginRecord.view)
         }
-      }, [])
+      }
+    }
+  }, [])
 
-      return <div className={props.pluginRecord.active? 'plugItIn active':'d-none'} ref={sidePanelRef}>{view}</div>
+  return <div className={props.pluginRecord.active ? 'plugItIn active' : 'd-none'} ref={sidePanelRef}>{view}</div>
 }
 
-export default RemixUIPanelPlugin
\ No newline at end of file
+export default RemixUIPanelPlugin
diff --git a/libs/remix-ui/panel/src/lib/remix-ui-panel.tsx b/libs/remix-ui/panel/src/lib/remix-ui-panel.tsx
index b1add48fcb..0f412b2e00 100644
--- a/libs/remix-ui/panel/src/lib/remix-ui-panel.tsx
+++ b/libs/remix-ui/panel/src/lib/remix-ui-panel.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react' // eslint-disable-line
-import './panel.css';
-import RemixUIPanelHeader from './panel-header';
-import RemixUIPanelPlugin from './panel-plugin';
-import { PluginRecord } from './types';
+import './panel.css'
+import RemixUIPanelHeader from './panel-header'
+import RemixUIPanelPlugin from './panel-plugin'
+import { PluginRecord } from './types'
 
 /* eslint-disable-next-line */
 export interface RemixPanelProps {
@@ -10,19 +10,18 @@ export interface RemixPanelProps {
   header: JSX.Element
 }
 
-export function RemixPanel(props: RemixPanelProps) {
-
+export function RemixPanel (props: RemixPanelProps) {
   return (
     <div className='panel plugin-manager'>
       {props.header}
       <div className="pluginsContainer">
         {Object.values(props.plugins).map((pluginRecord) => {
-            return <RemixUIPanelPlugin key={pluginRecord.profile.name} pluginRecord={pluginRecord} />
+          return <RemixUIPanelPlugin key={pluginRecord.profile.name} pluginRecord={pluginRecord} />
         })}
       </div>
     </div>
 
-  );
+  )
 }
 
-export default RemixPanel;
+export default RemixPanel

From 66e941c59299c55263c88a59950296b22a744055 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Sat, 25 Dec 2021 11:16:27 +0100
Subject: [PATCH 025/168] lint

---
 libs/remix-ui/panel/src/index.ts           | 2 +-
 libs/remix-ui/panel/src/lib/types/index.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/libs/remix-ui/panel/src/index.ts b/libs/remix-ui/panel/src/index.ts
index 8952e584ec..7cb486511c 100644
--- a/libs/remix-ui/panel/src/index.ts
+++ b/libs/remix-ui/panel/src/index.ts
@@ -1 +1 @@
-export { default as RemixPanel } from './lib/remix-ui-panel';
+export { default as RemixPanel } from './lib/remix-ui-panel'
diff --git a/libs/remix-ui/panel/src/lib/types/index.ts b/libs/remix-ui/panel/src/lib/types/index.ts
index ec4fd1456a..48cdd77b20 100644
--- a/libs/remix-ui/panel/src/lib/types/index.ts
+++ b/libs/remix-ui/panel/src/lib/types/index.ts
@@ -1,7 +1,7 @@
-import { Profile } from "@remixproject/plugin-utils";
+import { Profile } from '@remixproject/plugin-utils'
 
 export type PluginRecord = {
     profile: Profile
     view: any
     active: boolean
-  }
\ No newline at end of file
+  }

From ab915868b86465cd204df04da5c26408e209e5a9 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Sat, 25 Dec 2021 11:23:52 +0100
Subject: [PATCH 026/168] lint

---
 .eslintrc.json | 35 -----------------------------------
 1 file changed, 35 deletions(-)
 delete mode 100644 .eslintrc.json

diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100644
index 06cc47d9a2..0000000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
-  "root": true,
-  "ignorePatterns": ["**/*"],
-  "plugins": ["@nrwl/nx"],
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {
-        "@nrwl/nx/enforce-module-boundaries": [
-          "error",
-          {
-            "enforceBuildableLibDependency": true,
-            "allow": [],
-            "depConstraints": [
-              {
-                "sourceTag": "*",
-                "onlyDependOnLibsWithTags": ["*"]
-              }
-            ]
-          }
-        ]
-      }
-    },
-    {
-      "files": ["*.ts", "*.tsx"],
-      "extends": ["plugin:@nrwl/nx/typescript"],
-      "rules": {}
-    },
-    {
-      "files": ["*.js", "*.jsx"],
-      "extends": ["plugin:@nrwl/nx/javascript"],
-      "rules": {}
-    }
-  ]
-}

From a9a779d9ca4fa9b00bf0e6346028f0a914d905f7 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Sat, 25 Dec 2021 11:29:35 +0100
Subject: [PATCH 027/168] panel

---
 workspace.json | 522 +++++++++++++++----------------------------------
 1 file changed, 153 insertions(+), 369 deletions(-)

diff --git a/workspace.json b/workspace.json
index e73638767f..02fdc75d3a 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1,71 +1,5 @@
 {
   "version": 1,
-  "cli": {
-    "defaultCollection": "@nrwl/react"
-  },
-  "defaultProject": "remix-ide",
-  "schematics": {
-    "@nrwl/workspace": {
-      "library": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/cypress": {
-      "cypress-project": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/react": {
-      "application": {
-        "style": "css",
-        "linter": "eslint",
-        "babel": true
-      },
-      "component": {
-        "style": "css"
-      },
-      "library": {
-        "style": "css",
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/next": {
-      "application": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/web": {
-      "application": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/node": {
-      "application": {
-        "linter": "eslint"
-      },
-      "library": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/nx-plugin": {
-      "plugin": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/nest": {
-      "application": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/express": {
-      "application": {
-        "linter": "eslint"
-      },
-      "library": {
-        "linter": "eslint"
-      }
-    }
-  },
   "projects": {
     "remix-ide": {
       "root": "apps/remix-ide",
@@ -141,9 +75,7 @@
           "options": {
             "linter": "eslint",
             "config": "apps/remix-ide/.eslintrc",
-            "files": [
-              "apps/remix-ide/src/**/*.js"
-            ],
+            "files": ["apps/remix-ide/src/**/*.js"],
             "exclude": [
               "**/node_modules/**",
               "apps/remix-ide/src/app/editor/mode-solidity.js",
@@ -172,13 +104,8 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": [
-              "apps/remix-ide-e2e/tsconfig.e2e.json"
-            ],
-            "exclude": [
-              "**/node_modules/**",
-              "!apps/remix-ide-e2e/**/*"
-            ]
+            "tsConfig": ["apps/remix-ide-e2e/tsconfig.e2e.json"],
+            "exclude": ["**/node_modules/**", "!apps/remix-ide-e2e/**/*"]
           }
         }
       }
@@ -194,21 +121,14 @@
           "options": {
             "linter": "eslint",
             "config": "libs/remix-analyzer/.eslintrc",
-            "tsConfig": [
-              "libs/remix-analyzer/tsconfig.lib.json"
-            ],
-            "exclude": [
-              "**/node_modules/**",
-              "libs/remix-analyzer/test/**/*"
-            ]
+            "tsConfig": ["libs/remix-analyzer/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "libs/remix-analyzer/test/**/*"]
           }
         },
         "test": {
           "builder": "@nrwl/workspace:run-commands",
           "options": {
-            "commands": [
-              "./../../node_modules/.bin/npm-run-all test"
-            ],
+            "commands": ["./../../node_modules/.bin/npm-run-all test"],
             "cwd": "libs/remix-analyzer"
           }
         },
@@ -219,9 +139,7 @@
             "tsConfig": "libs/remix-analyzer/tsconfig.lib.json",
             "packageJson": "libs/remix-analyzer/package.json",
             "main": "libs/remix-analyzer/src/index.ts",
-            "assets": [
-              "libs/remix-analyzer/*.md"
-            ]
+            "assets": ["libs/remix-analyzer/*.md"]
           }
         }
       }
@@ -237,21 +155,14 @@
           "options": {
             "linter": "eslint",
             "config": "libs/remix-astwalker/.eslintrc",
-            "tsConfig": [
-              "libs/remix-astwalker/tsconfig.lib.json"
-            ],
-            "exclude": [
-              "**/node_modules/**",
-              "libs/remix-astwalker/tests/**/*"
-            ]
+            "tsConfig": ["libs/remix-astwalker/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "libs/remix-astwalker/tests/**/*"]
           }
         },
         "test": {
           "builder": "@nrwl/workspace:run-commands",
           "options": {
-            "commands": [
-              "./../../node_modules/.bin/npm-run-all test"
-            ],
+            "commands": ["./../../node_modules/.bin/npm-run-all test"],
             "cwd": "libs/remix-astwalker"
           }
         },
@@ -262,9 +173,7 @@
             "tsConfig": "libs/remix-astwalker/tsconfig.lib.json",
             "packageJson": "libs/remix-astwalker/package.json",
             "main": "libs/remix-astwalker/src/index.ts",
-            "assets": [
-              "libs/remix-astwalker/*.md"
-            ]
+            "assets": ["libs/remix-astwalker/*.md"]
           }
         }
       }
@@ -280,21 +189,14 @@
           "options": {
             "linter": "eslint",
             "config": "libs/remix-debug/.eslintrc",
-            "tsConfig": [
-              "libs/remix-debug/tsconfig.lib.json"
-            ],
-            "exclude": [
-              "**/node_modules/**",
-              "libs/remix-debug/test/**/*"
-            ]
+            "tsConfig": ["libs/remix-debug/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "libs/remix-debug/test/**/*"]
           }
         },
         "test": {
           "builder": "@nrwl/workspace:run-commands",
           "options": {
-            "commands": [
-              "./../../node_modules/.bin/npm-run-all test"
-            ],
+            "commands": ["./../../node_modules/.bin/npm-run-all test"],
             "cwd": "libs/remix-debug"
           }
         },
@@ -332,21 +234,14 @@
           "options": {
             "linter": "eslint",
             "config": "libs/remix-lib/.eslintrc",
-            "tsConfig": [
-              "libs/remix-lib/tsconfig.lib.json"
-            ],
-            "exclude": [
-              "**/node_modules/**",
-              "libs/remix-lib/test/**/*"
-            ]
+            "tsConfig": ["libs/remix-lib/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "libs/remix-lib/test/**/*"]
           }
         },
         "test": {
           "builder": "@nrwl/workspace:run-commands",
           "options": {
-            "commands": [
-              "./../../node_modules/.bin/npm-run-all test"
-            ],
+            "commands": ["./../../node_modules/.bin/npm-run-all test"],
             "cwd": "libs/remix-lib"
           }
         },
@@ -357,9 +252,7 @@
             "tsConfig": "libs/remix-lib/tsconfig.lib.json",
             "packageJson": "libs/remix-lib/package.json",
             "main": "libs/remix-lib/src/index.ts",
-            "assets": [
-              "libs/remix-lib/*.md"
-            ]
+            "assets": ["libs/remix-lib/*.md"]
           }
         }
       }
@@ -375,21 +268,14 @@
           "options": {
             "linter": "eslint",
             "config": "libs/remix-simulator/.eslintrc",
-            "tsConfig": [
-              "libs/remix-simulator/tsconfig.lib.json"
-            ],
-            "exclude": [
-              "**/node_modules/**",
-              "libs/remix-simulator/test/**/*"
-            ]
+            "tsConfig": ["libs/remix-simulator/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "libs/remix-simulator/test/**/*"]
           }
         },
         "test": {
           "builder": "@nrwl/workspace:run-commands",
           "options": {
-            "commands": [
-              "./../../node_modules/.bin/npm-run-all test"
-            ],
+            "commands": ["./../../node_modules/.bin/npm-run-all test"],
             "cwd": "libs/remix-simulator"
           }
         },
@@ -427,20 +313,14 @@
           "options": {
             "linter": "eslint",
             "config": "libs/remix-solidity/.eslintrc",
-            "tsConfig": [
-              "libs/remix-solidity/tsconfig.lib.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
+            "tsConfig": ["libs/remix-solidity/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**"]
           }
         },
         "test": {
           "builder": "@nrwl/workspace:run-commands",
           "options": {
-            "commands": [
-              "./../../node_modules/.bin/npm-run-all test"
-            ],
+            "commands": ["./../../node_modules/.bin/npm-run-all test"],
             "cwd": "libs/remix-solidity"
           }
         },
@@ -451,9 +331,7 @@
             "tsConfig": "libs/remix-solidity/tsconfig.lib.json",
             "packageJson": "libs/remix-solidity/package.json",
             "main": "libs/remix-solidity/src/index.ts",
-            "assets": [
-              "libs/remix-solidity/*.md"
-            ]
+            "assets": ["libs/remix-solidity/*.md"]
           }
         }
       }
@@ -469,9 +347,7 @@
           "options": {
             "linter": "eslint",
             "config": "libs/remix-tests/.eslintrc",
-            "tsConfig": [
-              "libs/remix-tests/tsconfig.lib.json"
-            ],
+            "tsConfig": ["libs/remix-tests/tsconfig.lib.json"],
             "exclude": [
               "**/node_modules/**",
               "libs/remix-tests/tests/**/*",
@@ -520,9 +396,7 @@
           "options": {
             "linter": "eslint",
             "config": "libs/remix-url-resolver/.eslintrc",
-            "tsConfig": [
-              "libs/remix-url-resolver/tsconfig.lib.json"
-            ],
+            "tsConfig": ["libs/remix-url-resolver/tsconfig.lib.json"],
             "exclude": [
               "**/node_modules/**",
               "libs/remix-url-resolver/tests/**/*"
@@ -532,9 +406,7 @@
         "test": {
           "builder": "@nrwl/workspace:run-commands",
           "options": {
-            "commands": [
-              "./../../node_modules/.bin/npm-run-all test"
-            ],
+            "commands": ["./../../node_modules/.bin/npm-run-all test"],
             "cwd": "libs/remix-url-resolver"
           }
         },
@@ -545,9 +417,7 @@
             "tsConfig": "libs/remix-url-resolver/tsconfig.lib.json",
             "packageJson": "libs/remix-url-resolver/package.json",
             "main": "libs/remix-url-resolver/src/index.ts",
-            "assets": [
-              "libs/remix-url-resolver/*.md"
-            ]
+            "assets": ["libs/remix-url-resolver/*.md"]
           }
         }
       }
@@ -566,10 +436,7 @@
               "libs/remixd/tsconfig.lib.json",
               "libs/remixd/tsconfig.spec.json"
             ],
-            "exclude": [
-              "**/node_modules/**",
-              "!libs/remixd/**/*"
-            ]
+            "exclude": ["**/node_modules/**", "!libs/remixd/**/*"]
           }
         },
         "test": {
@@ -587,10 +454,7 @@
             "tsConfig": "libs/remixd/tsconfig.lib.json",
             "packageJson": "libs/remixd/package.json",
             "main": "libs/remixd/src/index.ts",
-            "assets": [
-              "libs/remixd/*.md",
-              "libs/remixd/src/origins.json"
-            ]
+            "assets": ["libs/remixd/*.md", "libs/remixd/src/origins.json"]
           }
         }
       }
@@ -609,10 +473,7 @@
               "libs/remix-ui/tree-view/tsconfig.lib.json",
               "libs/remix-ui/tree-view/tsconfig.spec.json"
             ],
-            "exclude": [
-              "**/node_modules/**",
-              "!libs/remix-ui/tree-view/**/*"
-            ]
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/tree-view/**/*"]
           }
         },
         "test": {
@@ -639,10 +500,7 @@
               "libs/remix-ui/debugger-ui/tsconfig.lib.json",
               "libs/remix-ui/debugger-ui/tsconfig.spec.json"
             ],
-            "exclude": [
-              "**/node_modules/**",
-              "!libs/remix-ui/debugger-ui/**/*"
-            ]
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/debugger-ui/**/*"]
           }
         },
         "test": {
@@ -669,10 +527,7 @@
               "libs/remix-ui/utils/tsconfig.lib.json",
               "libs/remix-ui/utils/tsconfig.spec.json"
             ],
-            "exclude": [
-              "**/node_modules/**",
-              "!libs/remix-ui/utils/**/*"
-            ]
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/utils/**/*"]
           }
         },
         "test": {
@@ -699,10 +554,7 @@
               "libs/remix-ui/clipboard/tsconfig.lib.json",
               "libs/remix-ui/clipboard/tsconfig.spec.json"
             ],
-            "exclude": [
-              "**/node_modules/**",
-              "!libs/remix-ui/clipboard/**/*"
-            ]
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/clipboard/**/*"]
           }
         },
         "test": {
@@ -755,13 +607,8 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": [
-              "libs/remix-ui/toaster/tsconfig.lib.json"
-            ],
-            "exclude": [
-              "**/node_modules/**",
-              "!libs/remix-ui/toaster/**/*"
-            ]
+            "tsConfig": ["libs/remix-ui/toaster/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/toaster/**/*"]
           }
         }
       }
@@ -829,13 +676,8 @@
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": [
-              "apps/debugger/tsconfig.app.json"
-            ],
-            "exclude": [
-              "**/node_modules/**",
-              "!apps/debugger/**/*"
-            ]
+            "tsConfig": ["apps/debugger/tsconfig.app.json"],
+            "exclude": ["**/node_modules/**", "!apps/debugger/**/*"]
           }
         }
       }
@@ -850,13 +692,8 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": [
-              "libs/remix-ui/workspace/tsconfig.lib.json"
-            ],
-            "exclude": [
-              "**/node_modules/**",
-              "!libs/remix-ui/workspace/**/*"
-            ]
+            "tsConfig": ["libs/remix-ui/workspace/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/workspace/**/*"]
           }
         }
       }
@@ -871,13 +708,8 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": [
-              "libs/remix-ui/settings/tsconfig.lib.json"
-            ],
-            "exclude": [
-              "**/node_modules/**",
-              "!libs/remix-ui/settings/**/*"
-            ]
+            "tsConfig": ["libs/remix-ui/settings/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/settings/**/*"]
           }
         }
       }
@@ -892,9 +724,7 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": [
-              "libs/remix-ui/static-analyser/tsconfig.lib.json"
-            ],
+            "tsConfig": ["libs/remix-ui/static-analyser/tsconfig.lib.json"],
             "exclude": [
               "**/node_modules/**",
               "!libs/remix-ui/static-analyser/**/*"
@@ -913,13 +743,8 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": [
-              "libs/remix-ui/checkbox/tsconfig.lib.json"
-            ],
-            "exclude": [
-              "**/node_modules/**",
-              "!libs/remix-ui/checkbox/**/*"
-            ]
+            "tsConfig": ["libs/remix-ui/checkbox/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/checkbox/**/*"]
           }
         }
       }
@@ -934,20 +759,15 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": [
-              "libs/remix-ui/terminal/tsconfig.lib.json"
-            ],
-            "exclude": [
-              "**/node_modules/**",
-              "!libs/remix-ui/terminal/**/*"
-            ]
+            "tsConfig": ["libs/remix-ui/terminal/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/terminal/**/*"]
           }
         }
       }
     },
     "remix-ui-plugin-manager": {
-      "root": "libs/remix-ui/plugin-manager",
-      "sourceRoot": "libs/remix-ui/plugin-manager/src",
+     "root": "libs/remix-ui/plugin-manager",
+      "sourceRoot": "libs/remix-ui/plugin-manager/src", 
       "projectType": "library",
       "schematics": {},
       "architect": {
@@ -955,9 +775,7 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": [
-              "libs/remix-ui/plugin-manager/tsconfig.lib.json"
-            ],
+            "tsConfig": ["libs/remix-ui/plugin-manager/tsconfig.lib.json"],
             "exclude": [
               "**/node_modules/**",
               "!libs/remix-ui/plugin-manager/**/*"
@@ -976,13 +794,8 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": [
-              "libs/remix-core-plugin/tsconfig.lib.json"
-            ],
-            "exclude": [
-              "**/node_modules/**",
-              "!libs/remix-core-plugin/**/*"
-            ]
+            "tsConfig": ["libs/remix-core-plugin/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "!libs/remix-core-plugin/**/*"]
           }
         },
         "build": {
@@ -1006,9 +819,7 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": [
-              "libs/remix-ui/solidity-compiler/tsconfig.lib.json"
-            ],
+            "tsConfig": ["libs/remix-ui/solidity-compiler/tsconfig.lib.json"],
             "exclude": [
               "**/node_modules/**",
               "!libs/remix-ui/solidity-compiler/**/*"
@@ -1027,9 +838,7 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": [
-              "libs/remix-ui/publish-to-storage/tsconfig.lib.json"
-            ],
+            "tsConfig": ["libs/remix-ui/publish-to-storage/tsconfig.lib.json"],
             "exclude": [
               "**/node_modules/**",
               "!libs/remix-ui/publish-to-storage/**/*"
@@ -1048,13 +857,8 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": [
-              "libs/remix-ui/renderer/tsconfig.lib.json"
-            ],
-            "exclude": [
-              "**/node_modules/**",
-              "!libs/remix-ui/renderer/**/*"
-            ]
+            "tsConfig": ["libs/remix-ui/renderer/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/renderer/**/*"]
           }
         }
       }
@@ -1078,9 +882,7 @@
               "apps/solidity-compiler/src/assets",
               "apps/solidity-compiler/src/index.html"
             ],
-            "styles": [
-              "apps/solidity-compiler/src/styles.css"
-            ],
+            "styles": ["apps/solidity-compiler/src/styles.css"],
             "scripts": [],
             "webpackConfig": "apps/solidity-compiler/webpack.config.js",
             "maxWorkers": 2
@@ -1125,13 +927,8 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": [
-              "apps/solidity-compiler/tsconfig.app.json"
-            ],
-            "exclude": [
-              "**/node_modules/**",
-              "!apps/solidity-compiler/**/*"
-            ]
+            "tsConfig": ["apps/solidity-compiler/tsconfig.app.json"],
+            "exclude": ["**/node_modules/**", "!apps/solidity-compiler/**/*"]
           }
         }
       }
@@ -1154,9 +951,7 @@
               "apps/remix-ide-e2e/src/local-plugin/src/favicon.ico",
               "apps/remix-ide-e2e/src/local-plugin/src/assets"
             ],
-            "styles": [
-              "apps/remix-ide-e2e/src/local-plugin/src/styles.css"
-            ],
+            "styles": ["apps/remix-ide-e2e/src/local-plugin/src/styles.css"],
             "scripts": [],
             "webpackConfig": "@nrwl/react/plugins/webpack"
           },
@@ -1212,27 +1007,6 @@
         }
       }
     },
-    "remix-ui-home-tab": {
-      "root": "libs/remix-ui/home-tab",
-      "sourceRoot": "libs/remix-ui/home-tab/src",
-      "projectType": "library",
-      "schematics": {},
-      "architect": {
-        "lint": {
-          "builder": "@nrwl/linter:lint",
-          "options": {
-            "linter": "eslint",
-            "tsConfig": [
-              "libs/remix-ui/home-tab/tsconfig.lib.json"
-            ],
-            "exclude": [
-              "**/node_modules/**",
-              "!libs/remix-ui/home-tab/**/*"
-            ]
-          }
-        }
-      }
-    },
     "remix-ui-editor": {
       "root": "libs/remix-ui/editor",
       "sourceRoot": "libs/remix-ui/editor/src",
@@ -1243,54 +1017,8 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": [
-              "libs/remix-ui/editor/tsconfig.lib.json"
-            ],
-            "exclude": [
-              "**/node_modules/**",
-              "!libs/remix-ui/editor/**/*"
-            ]
-          }
-        }
-      }
-    },
-    "remix-ui-theme-module": {
-      "root": "libs/remix-ui/theme-module",
-      "sourceRoot": "libs/remix-ui/theme-module/src",
-      "projectType": "library",
-      "architect": {
-        "lint": {
-          "builder": "@nrwl/linter:lint",
-          "options": {
-            "linter": "eslint",
-            "tsConfig": [
-              "libs/remix-ui/editor/tsconfig.lib.json"
-            ],
-            "exclude": [
-              "**/node_modules/**",
-              "!libs/remix-ui/editor/**/*"
-            ]
-          }
-        }
-      }
-    },
-    "remix-ui-app": {
-      "root": "libs/remix-ui/app",
-      "sourceRoot": "libs/remix-ui/app/src",
-      "projectType": "library",
-      "schematics": {},
-      "architect": {
-        "lint": {
-          "builder": "@nrwl/linter:lint",
-          "options": {
-            "linter": "eslint",
-            "tsConfig": [
-              "libs/remix-ui/app/tsconfig.lib.json"
-            ],
-            "exclude": [
-              "**/node_modules/**",
-              "!libs/remix-ui/app/**/*"
-            ]
+            "tsConfig": ["libs/remix-ui/editor/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/editor/**/*"]
           }
         }
       }
@@ -1305,13 +1033,8 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": [
-              "libs/remix-ui/helper/tsconfig.lib.json"
-            ],
-            "exclude": [
-              "**/node_modules/**",
-              "!libs/remix-ui/helper/**/*"
-            ]
+            "tsConfig": ["libs/remix-ui/helper/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/helper/**/*"]
           }
         }
       }
@@ -1325,13 +1048,8 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": [
-              "libs/remix-ui/tabs/tsconfig.lib.json"
-            ],
-            "exclude": [
-              "**/node_modules/**",
-              "!libs/remix-ui/tabs/**/*"
-            ]
+            "tsConfig": ["libs/remix-ui/tabs/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/tabs/**/*"]
           }
         }
       }
@@ -1345,13 +1063,8 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": [
-              "libs/remix-ui/vertical-icons-panel/tsconfig.lib.json"
-            ],
-            "exclude": [
-              "**/node_modules/**",
-              "!libs/remix-ui/vertical-icons-panel/**/*"
-            ]
+            "tsConfig": ["libs/remix-ui/vertical-icons-panel/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/vertical-icons-panel/**/*"]
           }
         }
       }
@@ -1365,21 +1078,92 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": [
-              "libs/remix-ui/panel/tsconfig.lib.json"
-            ],
-            "exclude": [
-              "**/node_modules/**",
-              "!libs/remix-ui/panel/**/*"
-            ]
+            "tsConfig": ["libs/remix-ui/panel/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/panel/**/*"]
           }
         }
       }
     }
   },
-  "@nrwl/nx-plugin": {
-    "plugin": {
-      "linter": "eslint"
-    }
-  }
-}
\ No newline at end of file
+  "remix-ui-editor": {
+    "root": "libs/remix-ui/editor",
+    "sourceRoot": "libs/remix-ui/editor/src",
+    "projectType": "library",
+    "schematics": {},
+    "architect": {
+      "lint": {
+        "builder": "@nrwl/linter:lint",
+        "options": {
+          "linter": "eslint",
+          "babel": true
+        },
+        "component": {
+          "style": "css"
+        },
+        "library": {
+          "style": "css",
+          "linter": "eslint"
+        }
+      },
+      "library": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/nx-plugin": {
+      "plugin": {
+        "linter": "eslint"
+      }
+    },
+      "@nrwl/web": {
+        "application": {
+          "linter": "eslint"
+        }
+      },
+      "@nrwl/node": {
+        "application": {
+          "linter": "eslint"
+        },
+        "library": {
+          "linter": "eslint"
+        }
+      }
+    },
+    "cli": {
+      "defaultCollection": "@nrwl/react"
+    },
+    "schematics": {
+      "@nrwl/workspace": {
+        "library": {
+          "linter": "eslint"
+        }
+      },
+      "@nrwl/cypress": {
+        "cypress-project": {
+          "linter": "eslint"
+        }
+      },
+      "@nrwl/react": {
+        "application": {
+          "style": "css",
+          "linter": "eslint",
+          "babel": true
+        },
+        "component": {
+          "style": "css"
+        },
+        "library": {
+          "style": "css",
+          "linter": "eslint"
+        }
+      },
+      "library": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/nx-plugin": {
+      "plugin": {
+        "linter": "eslint"
+      }
+    },
+    "defaultProject": "remix-ide"
+}

From 04c16aa3ec2cd8cdedd43cb458b46478a39373b8 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Sat, 25 Dec 2021 11:32:04 +0100
Subject: [PATCH 028/168] workspace

---
 workspace.json | 50 +++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 49 insertions(+), 1 deletion(-)

diff --git a/workspace.json b/workspace.json
index 02fdc75d3a..7873b49153 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1007,6 +1007,23 @@
         }
       }
     },
+    "remix-ui-home-tab": {
+      "root": "libs/remix-ui/home-tab",
+      "sourceRoot": "libs/remix-ui/home-tab/src",
+      "projectType": "library",
+      "schematics": {},
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:lint",
+          "options": {
+            "linter": "eslint",
+            "tsConfig": ["libs/remix-ui/home-tab/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/home-tab/**/*"]
+          }
+
+        }
+      }
+    },
     "remix-ui-editor": {
       "root": "libs/remix-ui/editor",
       "sourceRoot": "libs/remix-ui/editor/src",
@@ -1023,6 +1040,37 @@
         }
       }
     },
+    "remix-ui-theme-module": {
+      "root": "libs/remix-ui/theme-module",
+      "sourceRoot": "libs/remix-ui/theme-module/src",
+      "projectType": "library",
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:lint",
+          "options": {
+            "linter": "eslint",
+              "tsConfig": ["libs/remix-ui/editor/tsconfig.lib.json"],
+              "exclude": ["**/node_modules/**", "!libs/remix-ui/editor/**/*"]
+          }
+        }
+      }
+    },
+    "remix-ui-app": {
+      "root": "libs/remix-ui/app",
+      "sourceRoot": "libs/remix-ui/app/src",
+      "projectType": "library",
+      "schematics": {},
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:lint",
+          "options": {
+            "linter": "eslint",
+            "tsConfig": ["libs/remix-ui/app/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/app/**/*"]
+          }
+        }
+      }
+    },
     "remix-ui-helper": {
       "root": "libs/remix-ui/helper",
       "sourceRoot": "libs/remix-ui/helper/src",
@@ -1166,4 +1214,4 @@
       }
     },
     "defaultProject": "remix-ide"
-}
+}
\ No newline at end of file

From 2f34656e4777daa5cbba2cbe31f69675ea283d01 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Sat, 25 Dec 2021 11:36:58 +0100
Subject: [PATCH 029/168] linting

---
 .../src/lib/custom-hooks/useDragTerminal.tsx  | 120 +++++++++---------
 1 file changed, 60 insertions(+), 60 deletions(-)

diff --git a/libs/remix-ui/terminal/src/lib/custom-hooks/useDragTerminal.tsx b/libs/remix-ui/terminal/src/lib/custom-hooks/useDragTerminal.tsx
index cdd4f6dc6a..aba4bbf6a5 100644
--- a/libs/remix-ui/terminal/src/lib/custom-hooks/useDragTerminal.tsx
+++ b/libs/remix-ui/terminal/src/lib/custom-hooks/useDragTerminal.tsx
@@ -1,77 +1,77 @@
-import { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
 export const useDragTerminal = (minHeight: number, defaultPosition: number) => {
-    const [isOpen, setIsOpen] = useState(defaultPosition > minHeight)
-    const [lastYPosition, setLastYPosition] = useState(0)
-    const [terminalPosition, setTerminalPosition] = useState(defaultPosition)
-    // Used to save position of the terminal when it is closed
-    const [lastTerminalPosition, setLastTerminalPosition] = useState(defaultPosition)
-    const [isDragging, setIsDragging] = useState(false)
+  const [isOpen, setIsOpen] = useState(defaultPosition > minHeight)
+  const [lastYPosition, setLastYPosition] = useState(0)
+  const [terminalPosition, setTerminalPosition] = useState(defaultPosition)
+  // Used to save position of the terminal when it is closed
+  const [lastTerminalPosition, setLastTerminalPosition] = useState(defaultPosition)
+  const [isDragging, setIsDragging] = useState(false)
 
-    const handleDraggingStart = (event: React.MouseEvent) => {
-        setLastYPosition(event.clientY)
-        setIsDragging(true)
-    }
+  const handleDraggingStart = (event: React.MouseEvent) => {
+    setLastYPosition(event.clientY)
+    setIsDragging(true)
+  }
 
-    const handleDragging = (event: MouseEvent) => {
-        event.preventDefault()
+  const handleDragging = (event: MouseEvent) => {
+    event.preventDefault()
 
-        if (isDragging) {
-            const mouseYPosition = event.clientY
-            const difference = lastYPosition - mouseYPosition
-            const newTerminalPosition = terminalPosition + difference
-            setTerminalPosition(newTerminalPosition)
-            setLastYPosition(mouseYPosition)
-        }
+    if (isDragging) {
+      const mouseYPosition = event.clientY
+      const difference = lastYPosition - mouseYPosition
+      const newTerminalPosition = terminalPosition + difference
+      setTerminalPosition(newTerminalPosition)
+      setLastYPosition(mouseYPosition)
     }
+  }
 
-    const handleDraggingEnd = () => {
-        if(!isDragging) return
-
-        setIsDragging(false)
+  const handleDraggingEnd = () => {
+    if (!isDragging) return
 
-        // Check terminal position to determine if it should be open or closed
-        setIsOpen(terminalPosition > minHeight)
-    }
+    setIsDragging(false)
 
-    const handleToggleTerminal = (event: React.MouseEvent<HTMLElement>) => {
-        event.preventDefault()
-        event.stopPropagation()
+    // Check terminal position to determine if it should be open or closed
+    setIsOpen(terminalPosition > minHeight)
+  }
 
-        if(isOpen) {
-            setLastTerminalPosition(terminalPosition)
-            setLastYPosition(0)
-            setTerminalPosition(minHeight)
-        } else {
-            setTerminalPosition(lastTerminalPosition <= minHeight ? 323 : lastTerminalPosition)
-        }
+  const handleToggleTerminal = (event: React.MouseEvent<HTMLElement>) => {
+    event.preventDefault()
+    event.stopPropagation()
 
-        setIsOpen(!isOpen)
+    if (isOpen) {
+      setLastTerminalPosition(terminalPosition)
+      setLastYPosition(0)
+      setTerminalPosition(minHeight)
+    } else {
+      setTerminalPosition(lastTerminalPosition <= minHeight ? 323 : lastTerminalPosition)
     }
 
-    // Add event listeners for dragging
-    useEffect(() => {
-        document.addEventListener('mousemove', handleDragging)
-        document.addEventListener('mouseup', handleDraggingEnd)
+    setIsOpen(!isOpen)
+  }
 
-        return () => {
-            document.removeEventListener('mousemove', handleDragging)
-            document.removeEventListener('mouseup', handleDraggingEnd)
-        }
-    }, [handleDragging, handleDraggingEnd])
+  // Add event listeners for dragging
+  useEffect(() => {
+    document.addEventListener('mousemove', handleDragging)
+    document.addEventListener('mouseup', handleDraggingEnd)
 
-    // Reset terminal position
-    useEffect(() => {
-        if(!terminalPosition){
-            setTerminalPosition(defaultPosition)
-        }
-    }, [terminalPosition, setTerminalPosition])
+    return () => {
+      document.removeEventListener('mousemove', handleDragging)
+      document.removeEventListener('mouseup', handleDraggingEnd)
+    }
+  }, [handleDragging, handleDraggingEnd])
 
-    return {
-        isOpen,
-        terminalPosition,
-        isDragging,
-        handleDraggingStart,
-        handleToggleTerminal,
+  // Reset terminal position
+  useEffect(() => {
+    if (!terminalPosition) {
+      setTerminalPosition(defaultPosition)
     }
-}
\ No newline at end of file
+  }, [terminalPosition, setTerminalPosition])
+
+  return {
+    isOpen,
+    terminalPosition,
+    isDragging,
+    handleDraggingStart,
+    handleToggleTerminal
+  }
+}

From c197daa6fc0601c85fee18bd9c1879136d9dd0fd Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Sat, 25 Dec 2021 11:40:59 +0100
Subject: [PATCH 030/168] lint

---
 libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
index 95a5f5b813..5a7c7295b5 100644
--- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
+++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
@@ -95,7 +95,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
 
   useEffect(() => {
     event.trigger('resize', [terminalPosition])
-  } , [terminalPosition])
+  }, [terminalPosition])
 
   const scrollToBottom = () => {
     messagesEndRef.current.scrollIntoView({ behavior: 'smooth' })
@@ -217,9 +217,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
     }
   }
 
-
-
-
   const focusinput = () => {
     inputEl.current.focus()
   }

From 824573a8eef2f38bb8bf8895744f7b8ba1abbc0b Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Sat, 25 Dec 2021 12:05:51 +0100
Subject: [PATCH 031/168] layout

---
 apps/remix-ide/src/app/components/side-panel.tsx |  5 +++--
 libs/remix-ui/panel/src/lib/remix-ui-panel.tsx   | 12 +++++++-----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/apps/remix-ide/src/app/components/side-panel.tsx b/apps/remix-ide/src/app/components/side-panel.tsx
index 52c3b40f26..88142fde3f 100644
--- a/apps/remix-ide/src/app/components/side-panel.tsx
+++ b/apps/remix-ide/src/app/components/side-panel.tsx
@@ -20,12 +20,13 @@ const sidePanel = {
 // TODO merge with vertical-icons.js
 export class SidePanel extends AbstractPanel {
   appManager: RemixAppManager
-  sideelement: HTMLDivElement
+  sideelement: any
   verticalIcons: VerticalIcons;
   constructor (appManager: RemixAppManager, verticalIcons: VerticalIcons) {
     super(sidePanel)
     this.appManager = appManager
-    this.sideelement = document.createElement('div')
+    this.sideelement = document.createElement('section')
+    this.sideelement.setAttribute('class', 'panel plugin-manager')
     this.verticalIcons = verticalIcons
 
     // Toggle content
diff --git a/libs/remix-ui/panel/src/lib/remix-ui-panel.tsx b/libs/remix-ui/panel/src/lib/remix-ui-panel.tsx
index 0f412b2e00..c3b744f7cd 100644
--- a/libs/remix-ui/panel/src/lib/remix-ui-panel.tsx
+++ b/libs/remix-ui/panel/src/lib/remix-ui-panel.tsx
@@ -12,14 +12,16 @@ export interface RemixPanelProps {
 
 export function RemixPanel (props: RemixPanelProps) {
   return (
-    <div className='panel plugin-manager'>
+    <>
       {props.header}
       <div className="pluginsContainer">
-        {Object.values(props.plugins).map((pluginRecord) => {
-          return <RemixUIPanelPlugin key={pluginRecord.profile.name} pluginRecord={pluginRecord} />
-        })}
+        <div className='plugins' id='plugins'>
+          {Object.values(props.plugins).map((pluginRecord) => {
+            return <RemixUIPanelPlugin key={pluginRecord.profile.name} pluginRecord={pluginRecord} />
+          })}
+        </div>
       </div>
-    </div>
+    </>
 
   )
 }

From e0a8ecaf43424cbaf47a049e8fb9f81901b5e275 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Sat, 25 Dec 2021 12:24:49 +0100
Subject: [PATCH 032/168] call panel

---
 apps/remix-ide/src/app/components/panel.ts          | 2 +-
 apps/remix-ide/src/app/components/side-panel.tsx    | 2 +-
 apps/remix-ide/src/app/components/vertical-icons.js | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/remix-ide/src/app/components/panel.ts b/apps/remix-ide/src/app/components/panel.ts
index a84c0d5e99..9bbd41e79a 100644
--- a/apps/remix-ide/src/app/components/panel.ts
+++ b/apps/remix-ide/src/app/components/panel.ts
@@ -43,7 +43,7 @@ export class AbstractPanel extends HostPlugin {
 
   removeView (profile) {
     this.emit('pluginDisabled', profile.name)
-    this.verticalIcons.unlinkContent(profile)
+    this.call('menuicons', 'unlinkContent', profile)
     this.remove(profile.name)
   }
 
diff --git a/apps/remix-ide/src/app/components/side-panel.tsx b/apps/remix-ide/src/app/components/side-panel.tsx
index 88142fde3f..6ab49ec483 100644
--- a/apps/remix-ide/src/app/components/side-panel.tsx
+++ b/apps/remix-ide/src/app/components/side-panel.tsx
@@ -65,7 +65,7 @@ export class SidePanel extends AbstractPanel {
   removeView (profile) {
     super.removeView(profile)
     this.emit('pluginDisabled', profile.name)
-    this.verticalIcons.unlinkContent(profile)
+    this.call('menuicons', 'unlinkContent', profile)
     this.renderComponent()
   }
 
diff --git a/apps/remix-ide/src/app/components/vertical-icons.js b/apps/remix-ide/src/app/components/vertical-icons.js
index 9cdf0aae50..4de50e11d5 100644
--- a/apps/remix-ide/src/app/components/vertical-icons.js
+++ b/apps/remix-ide/src/app/components/vertical-icons.js
@@ -15,7 +15,7 @@ const profile = {
   displayName: 'Vertical Icons',
   description: '',
   version: packageJson.version,
-  methods: ['select']
+  methods: ['select', 'unlinkContent']
 }
 
 // TODO merge with side-panel.js. VerticalIcons should not be a plugin

From 0f4dc4f4b87f4b8b6ccb3638e5c2ea75a966f9a4 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Sat, 25 Dec 2021 14:05:35 +0100
Subject: [PATCH 033/168] hidden view

---
 apps/remix-ide/src/app/components/hidden-panel.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/apps/remix-ide/src/app/components/hidden-panel.tsx b/apps/remix-ide/src/app/components/hidden-panel.tsx
index 22b0022792..239e6043fe 100644
--- a/apps/remix-ide/src/app/components/hidden-panel.tsx
+++ b/apps/remix-ide/src/app/components/hidden-panel.tsx
@@ -14,13 +14,21 @@ const profile = {
 }
 
 export class HiddenPanel extends AbstractPanel {
-  el: HTMLDivElement
+  el: HTMLElement
   constructor () {
     super(profile)
     this.el = document.createElement('div')
+    this.el.setAttribute('class', 'pluginsContainer')
+  }
+
+  addView (profile: any, view: any): void {
+    super.removeView(profile)
+    super.addView(profile, view)
+    this.renderComponent()
   }
 
   render () {
+    console.log(this.el)
     return this.el
   }
 

From 477a952023172b25e040fd91aec9e0443a8c74b7 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Sun, 26 Dec 2021 11:56:32 +0100
Subject: [PATCH 034/168] iframe react

---
 apps/remix-ide/src/app/components/panel.ts    | 13 +--
 apps/remix-ide/src/remixAppManager.js         |  4 +-
 libs/remix-ui/app/src/index.ts                |  1 +
 .../components/panels/iFramePluginView.tsx    | 29 +++++++
 .../remix-app/plugins/IFrameReactPlugin.tsx   | 85 +++++++++++++++++++
 .../src/lib/components/LocalPluginForm.tsx    |  3 +-
 libs/remix-ui/plugin-manager/src/types.d.ts   |  3 +-
 7 files changed, 122 insertions(+), 16 deletions(-)
 create mode 100644 libs/remix-ui/app/src/lib/remix-app/components/panels/iFramePluginView.tsx
 create mode 100644 libs/remix-ui/app/src/lib/remix-app/plugins/IFrameReactPlugin.tsx

diff --git a/apps/remix-ide/src/app/components/panel.ts b/apps/remix-ide/src/app/components/panel.ts
index 9bbd41e79a..0be7d94cb5 100644
--- a/apps/remix-ide/src/app/components/panel.ts
+++ b/apps/remix-ide/src/app/components/panel.ts
@@ -31,14 +31,12 @@ export class AbstractPanel extends HostPlugin {
   }
 
   addView (profile, view) {
-    console.log(profile, view)
     if (this.plugins[profile.name]) throw new Error(`Plugin ${profile.name} already rendered`)
     this.plugins[profile.name] = {
       profile: profile,
       view: view,
       active: false
     }
-    console.log(this.plugins)
   }
 
   removeView (profile) {
@@ -61,20 +59,11 @@ export class AbstractPanel extends HostPlugin {
    */
   showContent (name) {
     if (!this.plugins[name]) throw new Error(`Plugin ${name} is not yet activated`)
-    // hiding the current view and display the `moduleName`
-    /*
-    if (this.active) {
-      this.contents[this.active].style.display = 'none'
-    }
-    this.contents[name].style.display = 'flex'
-    this.contents[name].style.paddingTop = '20%'
-    this.contents[name].style.flexDirection = 'column'
-    */
+
     Object.values(this.plugins).forEach(plugin => {
       plugin.active = false
     })
     this.plugins[name].active = true
-    console.log(this.plugins)
   }
 
   focus (name) {
diff --git a/apps/remix-ide/src/remixAppManager.js b/apps/remix-ide/src/remixAppManager.js
index e1b18a91ba..28e668f0f6 100644
--- a/apps/remix-ide/src/remixAppManager.js
+++ b/apps/remix-ide/src/remixAppManager.js
@@ -1,6 +1,6 @@
 /* global localStorage, fetch */
 import { PluginManager } from '@remixproject/engine'
-import { IframePlugin } from '@remixproject/engine-web'
+import { IframeReactPlugin } from '@remix-ui/app'
 import { EventEmitter } from 'events'
 import QueryParams from './lib/query-params'
 import { PermissionHandler } from './app/ui/persmission-handler'
@@ -130,7 +130,7 @@ export class RemixAppManager extends PluginManager {
       }
     }
     return plugins.map(plugin => {
-      return new IframePlugin(plugin)
+      return new IframeReactPlugin(plugin)
     })
   }
 
diff --git a/libs/remix-ui/app/src/index.ts b/libs/remix-ui/app/src/index.ts
index e47f8690e7..fd6aed5d67 100644
--- a/libs/remix-ui/app/src/index.ts
+++ b/libs/remix-ui/app/src/index.ts
@@ -1 +1,2 @@
 export { default as RemixApp } from './lib/remix-app/remix-app'
+export { default as IframeReactPlugin } from './lib/remix-app/plugins/IFrameReactPlugin'
diff --git a/libs/remix-ui/app/src/lib/remix-app/components/panels/iFramePluginView.tsx b/libs/remix-ui/app/src/lib/remix-app/components/panels/iFramePluginView.tsx
new file mode 100644
index 0000000000..f56ea4f863
--- /dev/null
+++ b/libs/remix-ui/app/src/lib/remix-app/components/panels/iFramePluginView.tsx
@@ -0,0 +1,29 @@
+import React, { useRef, useState } from 'react'
+import IframeReactPlugin from '../../plugins/IFrameReactPlugin'
+
+interface IFramePluginViewProps {
+    plugin: IframeReactPlugin
+}
+
+const IFramePluginView = (props: IFramePluginViewProps) => {
+  const ref = useRef()
+  const [loading, isLoading] = useState<boolean>(true)
+
+  const loaded = () => {
+    props.plugin.shake(ref.current)
+    isLoading(false)
+  }
+
+  const loader = <div className='d-flex justify-content-center align-items-center'>
+    <div className='spinner-border' role="status">
+      <span className='sr-only'>Loading...</span>
+    </div>
+  </div>
+
+  return (<>
+    <div className={loading ? '' : 'd-none'}>{loader}</div>
+    <iframe onLoad={loaded} ref={ref} src={props.plugin.profile.url} title={props.plugin.name} id={props.plugin.name} seamless={true} sandbox='allow-popups allow-scripts allow-same-origin allow-forms allow-top-navigation'></iframe>
+  </>)
+}
+
+export default IFramePluginView
diff --git a/libs/remix-ui/app/src/lib/remix-app/plugins/IFrameReactPlugin.tsx b/libs/remix-ui/app/src/lib/remix-app/plugins/IFrameReactPlugin.tsx
new file mode 100644
index 0000000000..27a807a5b5
--- /dev/null
+++ b/libs/remix-ui/app/src/lib/remix-app/plugins/IFrameReactPlugin.tsx
@@ -0,0 +1,85 @@
+import type { Message, Profile, ExternalProfile, LocationProfile } from '@remixproject/plugin-utils'
+import { PluginConnector } from '@remixproject/engine'
+import React from 'react' // eslint-disable-line
+import IFramePluginView from '../components/panels/iFramePluginView'
+
+export type IframeProfile = Profile & LocationProfile & ExternalProfile
+
+/**
+ * Connect an Iframe client to the engine.
+ * @dev This implements the ViewPlugin as it cannot extends two class. Maybe use a mixin at some point
+ */
+class IframeReactPlugin extends PluginConnector {
+  // Listener is needed to remove the listener
+  private readonly listener = ['message', (e: MessageEvent) => this.getEvent(e), false] as const
+  private container: any
+  private origin: string
+  private source: Window
+  private url: string
+
+  constructor (public profile: IframeProfile) {
+    super(profile)
+  }
+
+  /** Implement "activate" of the ViewPlugin */
+  connect (url: string) {
+    this.profile.url = url
+    this.render()
+  }
+
+  addToView () {
+    this.call(this.profile.location, 'addView', this.profile, this.container)
+  }
+
+  shake (iframe: any) {
+    return new Promise((resolve, reject) => {
+      // Wait for the iframe to load and handshake
+
+      if (!iframe.contentWindow) {
+        reject(new Error(`${this.name} plugin cannot find url ${this.profile.url}`))
+      }
+      this.origin = new URL(iframe.src).origin
+      this.source = iframe.contentWindow
+      window.addEventListener(...this.listener)
+      this.handshake()
+        .then(resolve)
+        .catch(reject)
+      //
+    })
+  }
+
+  /** Implement "deactivate" of the ViewPlugin */
+  disconnect () {
+    console.trace('disconnect')
+    window.removeEventListener(...this.listener)
+    return this.call(this.profile.location, 'removeView', this.profile)
+      .catch(console.error)
+  }
+
+  /** Get message from the iframe */
+  private async getEvent (event: MessageEvent) {
+    if (event.source !== this.source) return // Filter only messages that comes from this iframe
+    if (event.origin !== this.origin) return // Filter only messages that comes from this origin
+    const message: Message = event.data
+    this.getMessage(message)
+  }
+
+  /**
+   * Post a message to the iframe of this plugin
+   * @param message The message to post
+   */
+  protected send (message: Partial<Message>) {
+    if (!this.source) {
+      throw new Error('No window attached to Iframe yet')
+    }
+    this.source.postMessage(message, this.origin)
+  }
+
+  /** Create and return the iframe */
+  render () {
+    this.container = <IFramePluginView plugin={this} />
+    this.addToView()
+  }
+}
+
+export default IframeReactPlugin
diff --git a/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx b/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx
index 3cada8585b..4711c52924 100644
--- a/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx
+++ b/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx
@@ -6,6 +6,7 @@ import { IframePlugin, WebsocketPlugin } from '@remixproject/engine-web'
 
 import { localPluginReducerActionType, localPluginToastReducer } from '../reducers/pluginManagerReducer'
 import { canActivate, FormStateProps, PluginManagerComponent } from '../../types'
+import { IframeReactPlugin } from '@remix-ui/app'
 
 interface LocalPluginFormProps {
   closeModal: () => void
@@ -79,7 +80,7 @@ function LocalPluginForm ({ closeModal, visible, pluginManager }: LocalPluginFor
         icon: 'assets/img/localPlugin.webp',
         canActivate: typeof canactivate === 'string' ? canactivate.split(',').filter(val => val).map(val => { return val.trim() }) : []
       }
-      const localPlugin = type === 'iframe' ? new IframePlugin(initialState) : new WebsocketPlugin(initialState)
+      const localPlugin = type === 'iframe' ? new IframeReactPlugin(initialState) : new WebsocketPlugin(initialState)
       localPlugin.profile.hash = `local-${name}`
       targetPlugin.description = localPlugin.profile.description !== undefined ? localPlugin.profile.description : ''
       targetPlugin.events = localPlugin.profile.events !== undefined ? localPlugin.profile.events : []
diff --git a/libs/remix-ui/plugin-manager/src/types.d.ts b/libs/remix-ui/plugin-manager/src/types.d.ts
index d30ae31457..66ee57bc77 100644
--- a/libs/remix-ui/plugin-manager/src/types.d.ts
+++ b/libs/remix-ui/plugin-manager/src/types.d.ts
@@ -4,6 +4,7 @@ import { EventEmitter } from 'events'
 import { Engine } from '@remixproject/engine/lib/engine'
 import { PluginBase, Profile } from '@remixproject/plugin-utils'
 import { IframePlugin, ViewPlugin, WebsocketPlugin } from '@remixproject/engine-web'
+import { IframeReactPlugin } from '@remix-ui/app'
 /* eslint-disable camelcase */
 
 interface SetPluginOptionType {
@@ -88,7 +89,7 @@ export class PluginManagerComponent extends ViewPlugin extends Plugin implements
   render(): HTMLDivElement
   getAndFilterPlugins: (filter?: string, profiles?: Profile[]) => void
   triggerEngineEventListener: () => void
-  activateAndRegisterLocalPlugin: (localPlugin: IframePlugin | WebsocketPlugin) => Promise<void>
+  activateAndRegisterLocalPlugin: (localPlugin: IframePlugin | IframeReactPlugin | WebsocketPlugin) => Promise<void>
   activeProfiles: string[]
   _paq: any
 }

From 45d2281abf4a04c9abf4ab3350065250749450fa Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Mon, 27 Dec 2021 13:51:07 +0100
Subject: [PATCH 035/168] start main

---
 apps/remix-ide/src/app/panels/main-view.tsx               | 8 ++++++++
 apps/remix-ide/src/remixAppManager.js                     | 2 ++
 .../lib/remix-app/components/panels/iFramePluginView.tsx  | 1 +
 3 files changed, 11 insertions(+)
 create mode 100644 apps/remix-ide/src/app/panels/main-view.tsx

diff --git a/apps/remix-ide/src/app/panels/main-view.tsx b/apps/remix-ide/src/app/panels/main-view.tsx
new file mode 100644
index 0000000000..b92439ac2a
--- /dev/null
+++ b/apps/remix-ide/src/app/panels/main-view.tsx
@@ -0,0 +1,8 @@
+import { Plugin } from '@remixproject/engine'
+
+export class MainView {
+  fileManager: Plugin
+  constructor (contextualListener, editor, mainPanel, fileManager, appManager, terminal) {
+    this.fileManager = fileManager
+  }
+}
diff --git a/apps/remix-ide/src/remixAppManager.js b/apps/remix-ide/src/remixAppManager.js
index 28e668f0f6..7239642f8f 100644
--- a/apps/remix-ide/src/remixAppManager.js
+++ b/apps/remix-ide/src/remixAppManager.js
@@ -4,6 +4,7 @@ import { IframeReactPlugin } from '@remix-ui/app'
 import { EventEmitter } from 'events'
 import QueryParams from './lib/query-params'
 import { PermissionHandler } from './app/ui/persmission-handler'
+import { IframePlugin } from '@remixproject/engine-web'
 const _paq = window._paq = window._paq || []
 
 const requiredModules = [ // services + layout views + system views
@@ -130,6 +131,7 @@ export class RemixAppManager extends PluginManager {
       }
     }
     return plugins.map(plugin => {
+      // return new IframePlugin(plugin)
       return new IframeReactPlugin(plugin)
     })
   }
diff --git a/libs/remix-ui/app/src/lib/remix-app/components/panels/iFramePluginView.tsx b/libs/remix-ui/app/src/lib/remix-app/components/panels/iFramePluginView.tsx
index f56ea4f863..addd406948 100644
--- a/libs/remix-ui/app/src/lib/remix-app/components/panels/iFramePluginView.tsx
+++ b/libs/remix-ui/app/src/lib/remix-app/components/panels/iFramePluginView.tsx
@@ -10,6 +10,7 @@ const IFramePluginView = (props: IFramePluginViewProps) => {
   const [loading, isLoading] = useState<boolean>(true)
 
   const loaded = () => {
+    console.log(props.plugin.profile.name + "loaded")
     props.plugin.shake(ref.current)
     isLoading(false)
   }

From 2f651f6d204570c85a634a591ead9173aeba2702 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Mon, 27 Dec 2021 14:20:05 +0100
Subject: [PATCH 036/168] start mainview

---
 apps/remix-ide/src/app/components/panel.ts  |  4 ----
 apps/remix-ide/src/app/panels/main-view.tsx | 17 ++++++++++++++++-
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/apps/remix-ide/src/app/components/panel.ts b/apps/remix-ide/src/app/components/panel.ts
index 0be7d94cb5..5671ddb250 100644
--- a/apps/remix-ide/src/app/components/panel.ts
+++ b/apps/remix-ide/src/app/components/panel.ts
@@ -1,8 +1,6 @@
 import React from 'react' // eslint-disable-line
 import { EventEmitter } from 'events'
-import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
 import { HostPlugin } from '@remixproject/engine-web' // eslint-disable-line
-
 import { Profile } from '@remixproject/plugin-utils'
 const EventManager = require('../../lib/events')
 
@@ -13,10 +11,8 @@ type PluginRecord = {
   active: boolean
 }
 export class AbstractPanel extends HostPlugin {
-
   events: EventEmitter
   event: any
-  verticalIcons: VerticalIcons
   public plugins: Record<string, PluginRecord> = {}
   constructor (profile) {
     super(profile)
diff --git a/apps/remix-ide/src/app/panels/main-view.tsx b/apps/remix-ide/src/app/panels/main-view.tsx
index b92439ac2a..0d33fea70f 100644
--- a/apps/remix-ide/src/app/panels/main-view.tsx
+++ b/apps/remix-ide/src/app/panels/main-view.tsx
@@ -1,8 +1,23 @@
+import { EditorContextListener } from '@remix-project/core-plugin'
 import { Plugin } from '@remixproject/engine'
-
+import { MainPanel } from '../components/main-panel'
+const EventManager = require('../../lib/events')
 export class MainView {
   fileManager: Plugin
+  event: any
+  tabProxy: Plugin
+  editor: Plugin
+  mainPanel: MainPanel
+  terminal: Plugin
+  appManager: Plugin
+  contextualListener: EditorContextListener
   constructor (contextualListener, editor, mainPanel, fileManager, appManager, terminal) {
     this.fileManager = fileManager
+    this.event = new EventManager()
+    this.editor = editor
+    this.terminal = terminal
+    this.appManager = appManager
+    this.mainPanel = mainPanel
+    this.contextualListener = contextualListener
   }
 }

From 248818a1085a08b7ed71c5d9f317938fd817d347 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Mon, 27 Dec 2021 15:40:13 +0100
Subject: [PATCH 037/168] rm dep mainview from runtab

---
 apps/remix-ide/src/app.js                                     | 1 -
 apps/remix-ide/src/app/panels/terminal.js                     | 2 +-
 apps/remix-ide/src/app/udapp/run-tab.js                       | 4 ++--
 apps/remix-ide/src/remixAppManager.js                         | 4 ++--
 .../plugin-manager/src/lib/components/LocalPluginForm.tsx     | 2 +-
 5 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index d2b8a690ae..eeee038632 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -220,7 +220,6 @@ class AppComponent {
       filePanel,
       registry.get('compilersartefacts').api,
       networkModule,
-      self.mainview,
       registry.get('fileproviders/browser').api
     )
     const analysis = new AnalysisTab(registry)
diff --git a/apps/remix-ide/src/app/panels/terminal.js b/apps/remix-ide/src/app/panels/terminal.js
index df0510b150..26c8703b9e 100644
--- a/apps/remix-ide/src/app/panels/terminal.js
+++ b/apps/remix-ide/src/app/panels/terminal.js
@@ -21,7 +21,7 @@ function register (api) { KONSOLES.push(api) }
 const profile = {
   displayName: 'Terminal',
   name: 'terminal',
-  methods: ['log'],
+  methods: ['log', 'logHtml'],
   events: [],
   description: ' - ',
   version: packageJson.version
diff --git a/apps/remix-ide/src/app/udapp/run-tab.js b/apps/remix-ide/src/app/udapp/run-tab.js
index b966287690..48f5484979 100644
--- a/apps/remix-ide/src/app/udapp/run-tab.js
+++ b/apps/remix-ide/src/app/udapp/run-tab.js
@@ -34,14 +34,14 @@ const profile = {
 }
 
 export class RunTab extends ViewPlugin {
-  constructor (blockchain, config, fileManager, editor, filePanel, compilersArtefacts, networkModule, mainView, fileProvider) {
+  constructor (blockchain, config, fileManager, editor, filePanel, compilersArtefacts, networkModule, fileProvider) {
     super(profile)
     this.event = new EventManager()
     this.config = config
     this.blockchain = blockchain
     this.fileManager = fileManager
     this.editor = editor
-    this.logCallback = (msg) => { mainView.getTerminal().logHtml(yo`<pre>${msg}</pre>`) }
+    this.logCallback = (msg) => { this.call('terminal', 'logHtml', yo`<pre>${msg}</pre>`) }
     this.filePanel = filePanel
     this.compilersArtefacts = compilersArtefacts
     this.networkModule = networkModule
diff --git a/apps/remix-ide/src/remixAppManager.js b/apps/remix-ide/src/remixAppManager.js
index 7239642f8f..02e3c4efe0 100644
--- a/apps/remix-ide/src/remixAppManager.js
+++ b/apps/remix-ide/src/remixAppManager.js
@@ -131,8 +131,8 @@ export class RemixAppManager extends PluginManager {
       }
     }
     return plugins.map(plugin => {
-      // return new IframePlugin(plugin)
-      return new IframeReactPlugin(plugin)
+      return new IframePlugin(plugin)
+      // return new IframeReactPlugin(plugin)
     })
   }
 
diff --git a/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx b/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx
index 4711c52924..f3207f90bf 100644
--- a/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx
+++ b/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx
@@ -80,7 +80,7 @@ function LocalPluginForm ({ closeModal, visible, pluginManager }: LocalPluginFor
         icon: 'assets/img/localPlugin.webp',
         canActivate: typeof canactivate === 'string' ? canactivate.split(',').filter(val => val).map(val => { return val.trim() }) : []
       }
-      const localPlugin = type === 'iframe' ? new IframeReactPlugin(initialState) : new WebsocketPlugin(initialState)
+      const localPlugin = type === 'iframe' ? new IframePlugin(initialState) : new WebsocketPlugin(initialState)
       localPlugin.profile.hash = `local-${name}`
       targetPlugin.description = localPlugin.profile.description !== undefined ? localPlugin.profile.description : ''
       targetPlugin.events = localPlugin.profile.events !== undefined ? localPlugin.profile.events : []

From b8c1f70a88f40a4015dd12847e500ee114131d6f Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Tue, 28 Dec 2021 10:20:30 +0100
Subject: [PATCH 038/168] start main

---
 .../app/panels/{main-view.tsx => main-view-react.tsx}    | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)
 rename apps/remix-ide/src/app/panels/{main-view.tsx => main-view-react.tsx} (79%)

diff --git a/apps/remix-ide/src/app/panels/main-view.tsx b/apps/remix-ide/src/app/panels/main-view-react.tsx
similarity index 79%
rename from apps/remix-ide/src/app/panels/main-view.tsx
rename to apps/remix-ide/src/app/panels/main-view-react.tsx
index 0d33fea70f..582c6bd42b 100644
--- a/apps/remix-ide/src/app/panels/main-view.tsx
+++ b/apps/remix-ide/src/app/panels/main-view-react.tsx
@@ -1,8 +1,14 @@
 import { EditorContextListener } from '@remix-project/core-plugin'
 import { Plugin } from '@remixproject/engine'
+import { Profile } from '@remixproject/plugin-utils'
 import { MainPanel } from '../components/main-panel'
 const EventManager = require('../../lib/events')
-export class MainView {
+
+const profile:Profile = {
+  name: 'mainview',
+  description: 'main panel'
+}
+export class MainViewReact extends Plugin {
   fileManager: Plugin
   event: any
   tabProxy: Plugin
@@ -12,6 +18,7 @@ export class MainView {
   appManager: Plugin
   contextualListener: EditorContextListener
   constructor (contextualListener, editor, mainPanel, fileManager, appManager, terminal) {
+    super(profile)
     this.fileManager = fileManager
     this.event = new EventManager()
     this.editor = editor

From c6b6af72a9837aa545fb5a394430e9c5e834d380 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Wed, 29 Dec 2021 09:17:36 +0100
Subject: [PATCH 039/168] main view

---
 apps/remix-ide/src/app.js                     |  22 +-
 .../src/app/components/hidden-panel.tsx       |   4 +-
 .../src/app/components/main-panel.tsx         |   4 +-
 apps/remix-ide/src/app/components/panel.ts    |   4 +-
 .../src/app/components/side-panel.tsx         |   6 +-
 apps/remix-ide/src/app/panels/layout.ts       |  15 +
 .../src/app/panels/main-view-react.tsx        |  30 --
 apps/remix-ide/src/app/panels/main-view.js    |  13 +-
 .../app/src/lib/remix-app/remix-app.tsx       |   8 +-
 libs/remix-ui/panel/src/index.ts              |   3 +-
 .../panel/src/lib/main/main-panel.css         |   6 +
 .../panel/src/lib/main/main-panel.tsx         |  52 +++
 .../src/lib/{ => plugins}/panel-header.tsx    |   2 +-
 .../src/lib/{ => plugins}/panel-plugin.tsx    |  10 +-
 .../panel/src/lib/{ => plugins}/panel.css     |   0
 .../src/lib/{ => plugins}/remix-ui-panel.tsx  |   7 +-
 libs/remix-ui/panel/src/lib/types/index.ts    |   1 +
 package-lock.json                             | 438 +++++++++---------
 18 files changed, 347 insertions(+), 278 deletions(-)
 create mode 100644 apps/remix-ide/src/app/panels/layout.ts
 delete mode 100644 apps/remix-ide/src/app/panels/main-view-react.tsx
 create mode 100644 libs/remix-ui/panel/src/lib/main/main-panel.css
 create mode 100644 libs/remix-ui/panel/src/lib/main/main-panel.tsx
 rename libs/remix-ui/panel/src/lib/{ => plugins}/panel-header.tsx (96%)
 rename libs/remix-ui/panel/src/lib/{ => plugins}/panel-plugin.tsx (63%)
 rename libs/remix-ui/panel/src/lib/{ => plugins}/panel.css (100%)
 rename libs/remix-ui/panel/src/lib/{ => plugins}/remix-ui-panel.tsx (78%)

diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index 0698c90ee5..a00d47bb22 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -49,6 +49,7 @@ const TestTab = require('./app/tabs/test-tab')
 const FilePanel = require('./app/panels/file-panel')
 const Editor = require('./app/editor/editor')
 const Terminal = require('./app/panels/terminal')
+const { TabProxy } = require('./app/panels/tab-proxy.js')
 
 class AppComponent {
   constructor () {
@@ -82,6 +83,7 @@ class AppComponent {
     // APP_MANAGER
     const appManager = self.appManager
     const pluginLoader = self.appManager.pluginLoader
+    self.panels = {}
     self.workspace = pluginLoader.get()
     self.engine = new RemixEngine()
     self.engine.register(appManager)
@@ -182,12 +184,12 @@ class AppComponent {
 
     // LAYOUT & SYSTEM VIEWS
     const appPanel = new MainPanel()
-    self.mainview = new MainView(contextualListener, editor, appPanel, fileManager, appManager, terminal)
+    // self.mainview = new MainView(contextualListener, editor, appPanel, fileManager, appManager, terminal)
     Registry.getInstance().put({ api: self.mainview, name: 'mainview' })
-
+    const tabProxy = new TabProxy(fileManager, editor)
     self.engine.register([
       appPanel,
-      self.mainview.tabProxy
+      tabProxy
     ])
 
     // those views depend on app_manager
@@ -249,6 +251,13 @@ class AppComponent {
       filePanel.hardhatHandle,
       filePanel.slitherHandle
     ])
+
+    self.panels = {
+      main: appPanel,
+      editor: editor,
+      terminal: terminal,
+      tabs: tabProxy
+    }
   }
 
   async activate () {
@@ -268,6 +277,7 @@ class AppComponent {
 
     await self.appManager.activatePlugin(['editor'])
     await self.appManager.activatePlugin(['theme', 'fileManager', 'compilerMetadata', 'compilerArtefacts', 'network', 'web3Provider', 'offsetToLineColumnConverter'])
+    await self.appManager.activatePlugin(['mainPanel'])
     await self.appManager.activatePlugin(['mainPanel', 'menuicons', 'tabs'])
     await self.appManager.activatePlugin(['sidePanel']) // activating  host plugin separately
     await self.appManager.activatePlugin(['home'])
@@ -314,10 +324,10 @@ class AppComponent {
     // activate solidity plugin
     self.appManager.activatePlugin(['solidity', 'udapp'])
     // Load and start the service who manager layout and frame
-    const framingService = new FramingService(self.sidePanel, self.menuicons, self.mainview, null)
+    // const framingService = new FramingService(self.sidePanel, self.menuicons, self.mainview, null)
 
-    if (params.embed) framingService.embed()
-    framingService.start(params)
+    // if (params.embed) framingService.embed()
+    // framingService.start(params)
   }
 }
 
diff --git a/apps/remix-ide/src/app/components/hidden-panel.tsx b/apps/remix-ide/src/app/components/hidden-panel.tsx
index 239e6043fe..151b25ddb7 100644
--- a/apps/remix-ide/src/app/components/hidden-panel.tsx
+++ b/apps/remix-ide/src/app/components/hidden-panel.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import ReactDOM from 'react-dom' // eslint-disable-line
 import { AbstractPanel } from './panel'
 import * as packageJson from '../../../../../package.json'
-import { RemixPanel } from '@remix-ui/panel'
+import { RemixPluginPanel } from '@remix-ui/panel'
 
 const profile = {
   name: 'hiddenPanel',
@@ -33,6 +33,6 @@ export class HiddenPanel extends AbstractPanel {
   }
 
   renderComponent () {
-    ReactDOM.render(<RemixPanel header={<></>} plugins={this.plugins}/>, this.el)
+    ReactDOM.render(<RemixPluginPanel header={<></>} plugins={this.plugins}/>, this.el)
   }
 }
diff --git a/apps/remix-ide/src/app/components/main-panel.tsx b/apps/remix-ide/src/app/components/main-panel.tsx
index a26516901b..41d5dba70d 100644
--- a/apps/remix-ide/src/app/components/main-panel.tsx
+++ b/apps/remix-ide/src/app/components/main-panel.tsx
@@ -1,7 +1,7 @@
 import React from 'react' // eslint-disable-line
 import { AbstractPanel } from './panel'
 import ReactDOM from 'react-dom' // eslint-disable-line
-import { RemixPanel } from '@remix-ui/panel'
+import { RemixPluginPanel } from '@remix-ui/panel'
 import packageJson from '../../../../../package.json'
 
 const profile = {
@@ -51,6 +51,6 @@ export class MainPanel extends AbstractPanel {
     }
 
     renderComponent () {
-      ReactDOM.render(<RemixPanel header={<></>} plugins={this.plugins}/>, this.element)
+      ReactDOM.render(<RemixPluginPanel header={<></>} plugins={this.plugins}/>, this.element)
     }
 }
diff --git a/apps/remix-ide/src/app/components/panel.ts b/apps/remix-ide/src/app/components/panel.ts
index 5671ddb250..3cfb65e371 100644
--- a/apps/remix-ide/src/app/components/panel.ts
+++ b/apps/remix-ide/src/app/components/panel.ts
@@ -9,6 +9,7 @@ type PluginRecord = {
   profile: Profile
   view: any
   active: boolean
+  class?: string
 }
 export class AbstractPanel extends HostPlugin {
   events: EventEmitter
@@ -31,7 +32,8 @@ export class AbstractPanel extends HostPlugin {
     this.plugins[profile.name] = {
       profile: profile,
       view: view,
-      active: false
+      active: false,
+      class: 'plugItIn'
     }
   }
 
diff --git a/apps/remix-ide/src/app/components/side-panel.tsx b/apps/remix-ide/src/app/components/side-panel.tsx
index 6ab49ec483..8b64d64e45 100644
--- a/apps/remix-ide/src/app/components/side-panel.tsx
+++ b/apps/remix-ide/src/app/components/side-panel.tsx
@@ -2,11 +2,11 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { AbstractPanel } from './panel'
-import { RemixPanel } from '@remix-ui/panel'
+import { RemixPluginPanel } from '@remix-ui/panel'
 import packageJson from '../../../../../package.json'
 import { RemixAppManager } from '../../remixAppManager'
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
-import RemixUIPanelHeader from 'libs/remix-ui/panel/src/lib/panel-header'
+import RemixUIPanelHeader from 'libs/remix-ui/panel/src/lib/plugins/panel-header'
 // const csjs = require('csjs-inject')
 
 const sidePanel = {
@@ -90,6 +90,6 @@ export class SidePanel extends AbstractPanel {
   }
 
   renderComponent () {
-    ReactDOM.render(<RemixPanel header={<RemixUIPanelHeader plugins={this.plugins}></RemixUIPanelHeader>} plugins={this.plugins}/>, this.sideelement)
+    ReactDOM.render(<RemixPluginPanel header={<RemixUIPanelHeader plugins={this.plugins}></RemixUIPanelHeader>} plugins={this.plugins}/>, this.sideelement)
   }
 }
diff --git a/apps/remix-ide/src/app/panels/layout.ts b/apps/remix-ide/src/app/panels/layout.ts
new file mode 100644
index 0000000000..04174e70cf
--- /dev/null
+++ b/apps/remix-ide/src/app/panels/layout.ts
@@ -0,0 +1,15 @@
+import { Plugin } from '@remixproject/engine'
+import { Profile } from '@remixproject/plugin-utils'
+const EventManager = require('../../lib/events')
+
+const profile:Profile = {
+  name: 'layout',
+  description: 'layout'
+}
+export class Layout extends Plugin {
+  event: any
+  constructor () {
+    super(profile)
+    this.event = new EventManager()
+  }
+}
diff --git a/apps/remix-ide/src/app/panels/main-view-react.tsx b/apps/remix-ide/src/app/panels/main-view-react.tsx
deleted file mode 100644
index 582c6bd42b..0000000000
--- a/apps/remix-ide/src/app/panels/main-view-react.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { EditorContextListener } from '@remix-project/core-plugin'
-import { Plugin } from '@remixproject/engine'
-import { Profile } from '@remixproject/plugin-utils'
-import { MainPanel } from '../components/main-panel'
-const EventManager = require('../../lib/events')
-
-const profile:Profile = {
-  name: 'mainview',
-  description: 'main panel'
-}
-export class MainViewReact extends Plugin {
-  fileManager: Plugin
-  event: any
-  tabProxy: Plugin
-  editor: Plugin
-  mainPanel: MainPanel
-  terminal: Plugin
-  appManager: Plugin
-  contextualListener: EditorContextListener
-  constructor (contextualListener, editor, mainPanel, fileManager, appManager, terminal) {
-    super(profile)
-    this.fileManager = fileManager
-    this.event = new EventManager()
-    this.editor = editor
-    this.terminal = terminal
-    this.appManager = appManager
-    this.mainPanel = mainPanel
-    this.contextualListener = contextualListener
-  }
-}
diff --git a/apps/remix-ide/src/app/panels/main-view.js b/apps/remix-ide/src/app/panels/main-view.js
index bf3a07a35b..b8991bf781 100644
--- a/apps/remix-ide/src/app/panels/main-view.js
+++ b/apps/remix-ide/src/app/panels/main-view.js
@@ -73,6 +73,7 @@ export class MainView {
       self._view.editor.style.display = 'block'
       self._view.mainPanel.style.display = 'none'
     })
+    // when no tab is selected count 0 open home tab
     self.tabProxy.event.on('tabCountChanged', (count) => {
       if (!count) this.editor.displayEmptyReadOnlySession()
     })
@@ -86,17 +87,20 @@ export class MainView {
     }
 
     self._components.terminal.event.register('resize', delta => self._adjustLayout('top', delta))
+    // mv 
     if (self.txListener) {
       self._components.terminal.event.register('listenOnNetWork', (listenOnNetWork) => {
         self.txListener.setListenOnNetwork(listenOnNetWork)
       })
     }
   }
+  // rm
 
   _terminalTopOffset () {
     return this._deps.config.get('terminal-top-offset') || 150
   }
 
+  /* can be rm */
   _adjustLayout (direction, delta) {
     var limitUp = 0
     var limitDown = 32
@@ -127,6 +131,7 @@ export class MainView {
     }
   }
 
+  /* plugin calls */
   minimizeTerminal () {
     this._adjustLayout('top')
   }
@@ -135,20 +140,24 @@ export class MainView {
     this._adjustLayout('top', offset || this._terminalTopOffset())
   }
 
+  // rm
   getTerminal () {
     return this._components.terminal
   }
 
+  // rm
   getEditor () {
     var self = this
     return self.editor
   }
 
+  // rm
   refresh () {
     var self = this
     self._view.tabs.onmouseenter()
   }
 
+  // rm logs
   log (data = {}) {
     var self = this
     var command = self._components.terminal.commands[data.type]
@@ -172,7 +181,7 @@ export class MainView {
     self._view.editor.style.display = 'none'
     self._view.mainPanel = self.mainPanel.render()
     self._view.terminal = self._components.terminal.render()
-
+    // rm contextview
     self._view.mainview = yo`
       <div class=${css.mainview}>
         ${self.tabProxy.renderTabsbar()}
@@ -192,12 +201,14 @@ export class MainView {
 
     return self._view.mainview
   }
+  // rm
 
   registerCommand (name, command, opts) {
     var self = this
     return self._components.terminal.registerCommand(name, command, opts)
   }
 
+  // rm 
   updateTerminalFilter (filter) {
     this._components.terminal.updateJournal(filter)
   }
diff --git a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx b/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
index d8430eac52..374278d0cf 100644
--- a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
+++ b/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
@@ -5,6 +5,7 @@ import MatomoDialog from './modals/matomo'
 import AlertModal from './modals/alert'
 import AppContext from './context/context'
 import DragBar from './dragbar/dragbar'
+import { RemixUIMainPanel } from '@remix-ui/panel'
 interface IRemixAppUi {
   app: any
 }
@@ -69,7 +70,7 @@ const RemixApp = (props: IRemixAppUi) => {
   }
 
   return (
-    <AppContext.Provider value={{ settings: props.app.settings, showMatamo: props.app.showMatamo, appManager: props.app.appManager }}>
+    <AppContext.Provider value={{ settings: props.app.settings, showMatamo: props.app.showMatamo, appManager: props.app.appManager, panels: props.app.panels }}>
       <RemixSplashScreen hide={appReady}></RemixSplashScreen>
       <AlertModal></AlertModal>
       <MatomoDialog hide={!appReady}></MatomoDialog>
@@ -78,8 +79,9 @@ const RemixApp = (props: IRemixAppUi) => {
         {components.iconPanel}
         {components.sidePanel}
         <DragBar minWidth={250} refObject={sidePanelRef} hidden={hideSidePanel} setHideStatus={setHideSidePanel}></DragBar>
-        {components.mainPanel}
-
+        <div id="main-panel" data-id="remixIdeMainPanel" className='mainpanel'>
+          <RemixUIMainPanel></RemixUIMainPanel>
+        </div>
       </div>
       {components.hiddenPanel}
     </AppContext.Provider>
diff --git a/libs/remix-ui/panel/src/index.ts b/libs/remix-ui/panel/src/index.ts
index 7cb486511c..c61d9612f1 100644
--- a/libs/remix-ui/panel/src/index.ts
+++ b/libs/remix-ui/panel/src/index.ts
@@ -1 +1,2 @@
-export { default as RemixPanel } from './lib/remix-ui-panel'
+export { default as RemixPluginPanel } from './lib/plugins/remix-ui-panel'
+export { default as RemixUIMainPanel } from './lib/main/main-panel'
diff --git a/libs/remix-ui/panel/src/lib/main/main-panel.css b/libs/remix-ui/panel/src/lib/main/main-panel.css
new file mode 100644
index 0000000000..cf7a841527
--- /dev/null
+++ b/libs/remix-ui/panel/src/lib/main/main-panel.css
@@ -0,0 +1,6 @@
+.mainview            {
+    display           : flex;
+    flex-direction    : column;
+    height            : 100%;
+    width             : 100%;
+  }  
\ No newline at end of file
diff --git a/libs/remix-ui/panel/src/lib/main/main-panel.tsx b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
new file mode 100644
index 0000000000..66b0a1b35a
--- /dev/null
+++ b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
@@ -0,0 +1,52 @@
+import AppContext from 'libs/remix-ui/app/src/lib/remix-app/context/context'
+import { editor } from 'monaco-editor'
+import React, { useContext, useEffect, useRef, useState } from 'react' // eslint-disable-line
+import { PluginRecord } from '../types'
+import './main-panel.css'
+
+const RemixUIMainPanel = () => {
+  const appContext = useContext(AppContext)
+  const tabsRef = useRef<HTMLDivElement>(null)
+  const mainPanelRef = useRef<HTMLDivElement>(null)
+  const terminalRef = useRef<HTMLDivElement>(null)
+  const editorRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+
+    console.log(appContext)
+    if(appContext) {
+      console.log(appContext)
+      tabsRef.current.appendChild(appContext.panels.tabs.renderTabsbar())
+      editorRef.current.appendChild(appContext.panels.editor.render())
+      mainPanelRef.current.appendChild(appContext.panels.main.render())
+      terminalRef.current.appendChild(appContext.panels.terminal.render())
+      console.log(appContext.panels.main.render())
+
+      const plugins: PluginRecord[] = [
+        {
+          profile: appContext.panels.tabs.profile,
+          active: true,
+          view: appContext.panels.tabs.renderTabsbar()
+        }
+      ]
+    }
+  }, [])
+
+  const components = {
+    tabs: <div ref={tabsRef}></div>,
+    editor: <div ref={editorRef}></div>,
+    main: <div ref={mainPanelRef}></div>,
+    terminal: <div ref={terminalRef}></div>
+  }
+
+
+
+  return (<div className='mainview'>
+    { components.tabs }
+    { components.editor }
+    { components.main }
+    { components.terminal }
+  </div>)
+}
+
+export default RemixUIMainPanel
diff --git a/libs/remix-ui/panel/src/lib/panel-header.tsx b/libs/remix-ui/panel/src/lib/plugins/panel-header.tsx
similarity index 96%
rename from libs/remix-ui/panel/src/lib/panel-header.tsx
rename to libs/remix-ui/panel/src/lib/plugins/panel-header.tsx
index 4e73576446..5acd50541a 100644
--- a/libs/remix-ui/panel/src/lib/panel-header.tsx
+++ b/libs/remix-ui/panel/src/lib/plugins/panel-header.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/anchor-has-content */
 import React, { useEffect, useRef, useState } from 'react' // eslint-disable-line
-import { PluginRecord } from './types'
+import { PluginRecord } from '../types'
 import './panel.css'
 
 export interface RemixPanelProps {
diff --git a/libs/remix-ui/panel/src/lib/panel-plugin.tsx b/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx
similarity index 63%
rename from libs/remix-ui/panel/src/lib/panel-plugin.tsx
rename to libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx
index 8c747be5d8..84f26f0a2e 100644
--- a/libs/remix-ui/panel/src/lib/panel-plugin.tsx
+++ b/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx
@@ -1,26 +1,26 @@
 import React, { useEffect, useRef, useState } from 'react' // eslint-disable-line
-import { PluginRecord } from './types'
+import { PluginRecord } from '../types'
 import './panel.css'
 interface panelPLuginProps {
     pluginRecord: PluginRecord
 }
 
 const RemixUIPanelPlugin = (props: panelPLuginProps) => {
-  const sidePanelRef = useRef(null)
+  const PanelRef = useRef<HTMLDivElement>(null)
   const [view, setView] = useState<JSX.Element | HTMLDivElement>()
   useEffect(() => {
-    if (sidePanelRef.current) {
+    if (PanelRef.current) {
       if (props.pluginRecord.view) {
         if (React.isValidElement(props.pluginRecord.view)) {
           setView(props.pluginRecord.view)
         } else {
-          sidePanelRef.current.appendChild(props.pluginRecord.view)
+          PanelRef.current.appendChild(props.pluginRecord.view)
         }
       }
     }
   }, [])
 
-  return <div className={props.pluginRecord.active ? 'plugItIn active' : 'd-none'} ref={sidePanelRef}>{view}</div>
+  return <div className={props.pluginRecord.active ? `${props.pluginRecord.class} active` : 'd-none'} ref={PanelRef}>{view}</div>
 }
 
 export default RemixUIPanelPlugin
diff --git a/libs/remix-ui/panel/src/lib/panel.css b/libs/remix-ui/panel/src/lib/plugins/panel.css
similarity index 100%
rename from libs/remix-ui/panel/src/lib/panel.css
rename to libs/remix-ui/panel/src/lib/plugins/panel.css
diff --git a/libs/remix-ui/panel/src/lib/remix-ui-panel.tsx b/libs/remix-ui/panel/src/lib/plugins/remix-ui-panel.tsx
similarity index 78%
rename from libs/remix-ui/panel/src/lib/remix-ui-panel.tsx
rename to libs/remix-ui/panel/src/lib/plugins/remix-ui-panel.tsx
index c3b744f7cd..d0ffe41a84 100644
--- a/libs/remix-ui/panel/src/lib/remix-ui-panel.tsx
+++ b/libs/remix-ui/panel/src/lib/plugins/remix-ui-panel.tsx
@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react' // eslint-disable-line
 import './panel.css'
-import RemixUIPanelHeader from './panel-header'
 import RemixUIPanelPlugin from './panel-plugin'
-import { PluginRecord } from './types'
+import { PluginRecord } from '../types'
 
 /* eslint-disable-next-line */
 export interface RemixPanelProps {
@@ -10,7 +9,7 @@ export interface RemixPanelProps {
   header: JSX.Element
 }
 
-export function RemixPanel (props: RemixPanelProps) {
+export function RemixPluginPanel (props: RemixPanelProps) {
   return (
     <>
       {props.header}
@@ -26,4 +25,4 @@ export function RemixPanel (props: RemixPanelProps) {
   )
 }
 
-export default RemixPanel
+export default RemixPluginPanel
diff --git a/libs/remix-ui/panel/src/lib/types/index.ts b/libs/remix-ui/panel/src/lib/types/index.ts
index 48cdd77b20..c7a77db720 100644
--- a/libs/remix-ui/panel/src/lib/types/index.ts
+++ b/libs/remix-ui/panel/src/lib/types/index.ts
@@ -4,4 +4,5 @@ export type PluginRecord = {
     profile: Profile
     view: any
     active: boolean
+    class?: string
   }
diff --git a/package-lock.json b/package-lock.json
index f0cd9ca6f2..a05d1a99a7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3320,7 +3320,7 @@
     "@evocateur/libnpmaccess": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@evocateur/libnpmaccess/-/libnpmaccess-3.1.2.tgz",
-      "integrity": "sha1-7Pf2zmsATp+UKwmNkiAL5KSxyEU=",
+      "integrity": "sha512-KSCAHwNWro0CF2ukxufCitT9K5LjL/KuMmNzSu8wuwN2rjyKHD8+cmOsiybK+W5hdnwc5M1SmRlVCaMHQo+3rg==",
       "dev": true,
       "requires": {
         "@evocateur/npm-registry-fetch": "^4.0.0",
@@ -3333,13 +3333,13 @@
         "aproba": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
-          "integrity": "sha1-UlILiuW1aSFbNU78DKo/4eRaitw=",
+          "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
           "dev": true
         },
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -3351,7 +3351,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         }
       }
@@ -3359,7 +3359,7 @@
     "@evocateur/libnpmpublish": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@evocateur/libnpmpublish/-/libnpmpublish-1.2.2.tgz",
-      "integrity": "sha1-Vd8J0tyhNq+6nIjHWconIZjbnxo=",
+      "integrity": "sha512-MJrrk9ct1FeY9zRlyeoyMieBjGDG9ihyyD9/Ft6MMrTxql9NyoEx2hw9casTIP4CdqEVu+3nQ2nXxoJ8RCXyFg==",
       "dev": true,
       "requires": {
         "@evocateur/npm-registry-fetch": "^4.0.0",
@@ -3376,13 +3376,13 @@
         "aproba": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
-          "integrity": "sha1-UlILiuW1aSFbNU78DKo/4eRaitw=",
+          "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
           "dev": true
         },
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -3394,7 +3394,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         },
         "ssri": {
@@ -3411,7 +3411,7 @@
     "@evocateur/npm-registry-fetch": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@evocateur/npm-registry-fetch/-/npm-registry-fetch-4.0.0.tgz",
-      "integrity": "sha1-jEw4dm2NMtMgD8sKg/BktXNl7WY=",
+      "integrity": "sha512-k1WGfKRQyhJpIr+P17O5vLIo2ko1PFLKwoetatdduUSt/aQ4J2sJrJwwatdI5Z3SiYk/mRH9S3JpdmMFd/IK4g==",
       "dev": true,
       "requires": {
         "JSONStream": "^1.3.4",
@@ -3435,7 +3435,7 @@
         "agentkeepalive": {
           "version": "3.5.2",
           "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-3.5.2.tgz",
-          "integrity": "sha1-oROSTdP6JKC8O3gQjEUMKr7gD2c=",
+          "integrity": "sha512-e0L/HNe6qkQ7H19kTlRRqUibEAwDK5AFk6y3PtMsuut2VAH6+Q4xZml1tNDJD7kSAyqmbG/K08K5WEJYtUrSlQ==",
           "dev": true,
           "requires": {
             "humanize-ms": "^1.2.1"
@@ -3482,7 +3482,7 @@
         "http-cache-semantics": {
           "version": "3.8.1",
           "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz",
-          "integrity": "sha1-ObDhat2bYFvwqe89nar0hDtMrNI=",
+          "integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==",
           "dev": true
         },
         "http-proxy-agent": {
@@ -3498,7 +3498,7 @@
         "https-proxy-agent": {
           "version": "2.2.4",
           "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz",
-          "integrity": "sha1-TuenN6vZJniik9mzShr00NCMeHs=",
+          "integrity": "sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==",
           "dev": true,
           "requires": {
             "agent-base": "^4.3.0",
@@ -3508,7 +3508,7 @@
         "make-fetch-happen": {
           "version": "5.0.2",
           "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-5.0.2.tgz",
-          "integrity": "sha1-qoOHEE8mh+3KAchofuRQE9AtGb0=",
+          "integrity": "sha512-07JHC0r1ykIoruKO8ifMXu+xEU8qOXDFETylktdug6vJDACnP+HKevOu3PXyNPzFyTSlz8vrBYlBO1JZRe8Cag==",
           "dev": true,
           "requires": {
             "agentkeepalive": "^3.4.1",
@@ -3533,7 +3533,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -3561,7 +3561,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         },
         "socks": {
@@ -3609,7 +3609,7 @@
     "@evocateur/pacote": {
       "version": "9.6.5",
       "resolved": "https://registry.npmjs.org/@evocateur/pacote/-/pacote-9.6.5.tgz",
-      "integrity": "sha1-M94yuiELbxfCDrq01JfvxnVfSuU=",
+      "integrity": "sha512-EI552lf0aG2nOV8NnZpTxNo2PcXKPmDbF9K8eCBFQdIZwHNGN/mi815fxtmUMa2wTa1yndotICIDt/V0vpEx2w==",
       "dev": true,
       "requires": {
         "@evocateur/npm-registry-fetch": "^4.0.0",
@@ -3655,7 +3655,7 @@
         "agentkeepalive": {
           "version": "3.5.2",
           "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-3.5.2.tgz",
-          "integrity": "sha1-oROSTdP6JKC8O3gQjEUMKr7gD2c=",
+          "integrity": "sha512-e0L/HNe6qkQ7H19kTlRRqUibEAwDK5AFk6y3PtMsuut2VAH6+Q4xZml1tNDJD7kSAyqmbG/K08K5WEJYtUrSlQ==",
           "dev": true,
           "requires": {
             "humanize-ms": "^1.2.1"
@@ -3702,7 +3702,7 @@
         "http-cache-semantics": {
           "version": "3.8.1",
           "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz",
-          "integrity": "sha1-ObDhat2bYFvwqe89nar0hDtMrNI=",
+          "integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==",
           "dev": true
         },
         "http-proxy-agent": {
@@ -3718,7 +3718,7 @@
         "https-proxy-agent": {
           "version": "2.2.4",
           "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz",
-          "integrity": "sha1-TuenN6vZJniik9mzShr00NCMeHs=",
+          "integrity": "sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==",
           "dev": true,
           "requires": {
             "agent-base": "^4.3.0",
@@ -3728,7 +3728,7 @@
         "make-fetch-happen": {
           "version": "5.0.2",
           "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-5.0.2.tgz",
-          "integrity": "sha1-qoOHEE8mh+3KAchofuRQE9AtGb0=",
+          "integrity": "sha512-07JHC0r1ykIoruKO8ifMXu+xEU8qOXDFETylktdug6vJDACnP+HKevOu3PXyNPzFyTSlz8vrBYlBO1JZRe8Cag==",
           "dev": true,
           "requires": {
             "agentkeepalive": "^3.4.1",
@@ -3753,7 +3753,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -3765,7 +3765,7 @@
         "npm-packlist": {
           "version": "1.4.8",
           "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz",
-          "integrity": "sha1-Vu5swTW5+YrT1Rwcldoiu7my7z4=",
+          "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==",
           "dev": true,
           "requires": {
             "ignore-walk": "^3.0.1",
@@ -3776,7 +3776,7 @@
         "npm-pick-manifest": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/npm-pick-manifest/-/npm-pick-manifest-3.0.2.tgz",
-          "integrity": "sha1-9Nnl/UviFT5fTl+be+jcQZqZq7c=",
+          "integrity": "sha512-wNprTNg+X5nf+tDi+hbjdHhM4bX+mKqv6XmPh7B5eG+QY9VARfQPfCEH013H5GqfNj6ee8Ij2fg8yk0mzps1Vw==",
           "dev": true,
           "requires": {
             "figgy-pudding": "^3.5.1",
@@ -3803,7 +3803,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         },
         "socks": {
@@ -5620,7 +5620,7 @@
     "@lerna/add": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/add/-/add-3.21.0.tgz",
-      "integrity": "sha1-JwB73nHMewopaas8LwrkFXi0V3s=",
+      "integrity": "sha512-vhUXXF6SpufBE1EkNEXwz1VLW03f177G9uMOFMQkp6OJ30/PWg4Ekifuz9/3YfgB2/GH8Tu4Lk3O51P2Hskg/A==",
       "dev": true,
       "requires": {
         "@evocateur/pacote": "^9.6.3",
@@ -5638,7 +5638,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -5650,7 +5650,7 @@
             "semver": {
               "version": "5.7.1",
               "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
               "dev": true
             }
           }
@@ -5666,7 +5666,7 @@
     "@lerna/bootstrap": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/bootstrap/-/bootstrap-3.21.0.tgz",
-      "integrity": "sha1-vNG2Ub5bCXCyDY+uBMhkVIEjrtY=",
+      "integrity": "sha512-mtNHlXpmvJn6JTu0KcuTTPl2jLsDNud0QacV/h++qsaKbhAaJr/FElNZ5s7MwZFUM3XaDmvWzHKaszeBMHIbBw==",
       "dev": true,
       "requires": {
         "@lerna/command": "3.21.0",
@@ -5697,7 +5697,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -5709,7 +5709,7 @@
             "semver": {
               "version": "5.7.1",
               "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
               "dev": true
             }
           }
@@ -5725,7 +5725,7 @@
     "@lerna/changed": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/changed/-/changed-3.21.0.tgz",
-      "integrity": "sha1-EI4V9nm/4HevUA9YJIxjTxBE6gs=",
+      "integrity": "sha512-hzqoyf8MSHVjZp0gfJ7G8jaz+++mgXYiNs9iViQGA8JlN/dnWLI5sWDptEH3/B30Izo+fdVz0S0s7ydVE3pWIw==",
       "dev": true,
       "requires": {
         "@lerna/collect-updates": "3.20.0",
@@ -5737,7 +5737,7 @@
     "@lerna/check-working-tree": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/check-working-tree/-/check-working-tree-3.16.5.tgz",
-      "integrity": "sha1-tPiuYbtFI1Yd+5+PjYdN1Gu0S6o=",
+      "integrity": "sha512-xWjVBcuhvB8+UmCSb5tKVLB5OuzSpw96WEhS2uz6hkWVa/Euh1A0/HJwn2cemyK47wUrCQXtczBUiqnq9yX5VQ==",
       "dev": true,
       "requires": {
         "@lerna/collect-uncommitted": "3.16.5",
@@ -5748,7 +5748,7 @@
     "@lerna/child-process": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/child-process/-/child-process-3.16.5.tgz",
-      "integrity": "sha1-OPo8GAZKpKwHVK2AEUd2p7NqabI=",
+      "integrity": "sha512-vdcI7mzei9ERRV4oO8Y1LHBZ3A5+ampRKg1wq5nutLsUA4mEBN6H7JqjWOMY9xZemv6+kATm2ofjJ3lW5TszQg==",
       "dev": true,
       "requires": {
         "chalk": "^2.3.1",
@@ -5759,7 +5759,7 @@
     "@lerna/clean": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/clean/-/clean-3.21.0.tgz",
-      "integrity": "sha1-wLRrUwDMPa4s2jvsFLgDCC2jhW0=",
+      "integrity": "sha512-b/L9l+MDgE/7oGbrav6rG8RTQvRiZLO1zTcG17zgJAAuhlsPxJExMlh2DFwJEVi2les70vMhHfST3Ue1IMMjpg==",
       "dev": true,
       "requires": {
         "@lerna/command": "3.21.0",
@@ -5783,7 +5783,7 @@
     "@lerna/cli": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/cli/-/cli-3.18.5.tgz",
-      "integrity": "sha1-yQxGFUL801ttWwFaKQ+w2/tB0kI=",
+      "integrity": "sha512-erkbxkj9jfc89vVs/jBLY/fM0I80oLmJkFUV3Q3wk9J3miYhP14zgVEBsPZY68IZlEjT6T3Xlq2xO1AVaatHsA==",
       "dev": true,
       "requires": {
         "@lerna/global-options": "3.13.0",
@@ -5795,13 +5795,13 @@
         "ansi-regex": {
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha1-i5+PCM8ay4Q3Vqg5yox+MWjFGZc=",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
           "dev": true
         },
         "cliui": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
-          "integrity": "sha1-3u/P2y6AB4SqNPRvoI4GhRx7u8U=",
+          "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
           "dev": true,
           "requires": {
             "string-width": "^3.1.0",
@@ -5818,7 +5818,7 @@
         "find-up": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-          "integrity": "sha1-SRafHXmTQwZG2mHsxa41XCHJe3M=",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
           "dev": true,
           "requires": {
             "locate-path": "^3.0.0"
@@ -5833,7 +5833,7 @@
         "locate-path": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-          "integrity": "sha1-2+w7OrdZdYBxtY/ln8QYca8hQA4=",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
           "dev": true,
           "requires": {
             "p-locate": "^3.0.0",
@@ -5843,7 +5843,7 @@
         "p-limit": {
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-          "integrity": "sha1-PdM8ZHohT9//2DWTPrCG2g3CHbE=",
+          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
           "dev": true,
           "requires": {
             "p-try": "^2.0.0"
@@ -5852,7 +5852,7 @@
         "p-locate": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-          "integrity": "sha1-Mi1poFwCZLJZl9n0DNiokasAZKQ=",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
           "dev": true,
           "requires": {
             "p-limit": "^2.0.0"
@@ -5861,13 +5861,13 @@
         "p-try": {
           "version": "2.2.0",
           "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-          "integrity": "sha1-yyhoVA4xPWHeWPr741zpAE1VQOY=",
+          "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
           "dev": true
         },
         "string-width": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-          "integrity": "sha1-InZ74htirxCBV0MG9prFG2IgOWE=",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
           "dev": true,
           "requires": {
             "emoji-regex": "^7.0.1",
@@ -5878,7 +5878,7 @@
         "strip-ansi": {
           "version": "5.2.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-          "integrity": "sha1-jJpTb+tq/JYr36WxBKUJHBrZwK4=",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
           "dev": true,
           "requires": {
             "ansi-regex": "^4.1.0"
@@ -5887,7 +5887,7 @@
         "wrap-ansi": {
           "version": "5.1.0",
           "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
-          "integrity": "sha1-H9H2cjXVttD+54EFYAG/tpTAOwk=",
+          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
           "dev": true,
           "requires": {
             "ansi-styles": "^3.2.0",
@@ -5898,7 +5898,7 @@
         "yargs": {
           "version": "14.2.3",
           "resolved": "https://registry.npmjs.org/yargs/-/yargs-14.2.3.tgz",
-          "integrity": "sha1-Ghw+3O0a+yov6jNgS8bR2NaIpBQ=",
+          "integrity": "sha512-ZbotRWhF+lkjijC/VhmOT9wSgyBQ7+zr13+YLkhfsSiTriYsMzkTUFP18pFhWwBeMa5gUc1MzbhrO6/VB7c9Xg==",
           "dev": true,
           "requires": {
             "cliui": "^5.0.0",
@@ -5929,7 +5929,7 @@
     "@lerna/collect-uncommitted": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/collect-uncommitted/-/collect-uncommitted-3.16.5.tgz",
-      "integrity": "sha1-pJTWGqwxzceuxLvlLJZVAnQTLmM=",
+      "integrity": "sha512-ZgqnGwpDZiWyzIQVZtQaj9tRizsL4dUOhuOStWgTAw1EMe47cvAY2kL709DzxFhjr6JpJSjXV5rZEAeU3VE0Hg==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -5941,7 +5941,7 @@
     "@lerna/collect-updates": {
       "version": "3.20.0",
       "resolved": "https://registry.npmjs.org/@lerna/collect-updates/-/collect-updates-3.20.0.tgz",
-      "integrity": "sha1-YvnXa6IaJbfZ+/McAt6IdEpWS9E=",
+      "integrity": "sha512-qBTVT5g4fupVhBFuY4nI/3FSJtQVcDh7/gEPOpRxoXB/yCSnT38MFHXWl+y4einLciCjt/+0x6/4AG80fjay2Q==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -5954,7 +5954,7 @@
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-          "integrity": "sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q=",
+          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
           "dev": true
         }
       }
@@ -5962,7 +5962,7 @@
     "@lerna/command": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/command/-/command-3.21.0.tgz",
-      "integrity": "sha1-miODdZ3HtwDaz6iiKy86bhkBIfc=",
+      "integrity": "sha512-T2bu6R8R3KkH5YoCKdutKv123iUgUbW8efVjdGCDnCMthAQzoentOJfDeodBwn0P2OqCl3ohsiNVtSn9h78fyQ==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -5980,7 +5980,7 @@
     "@lerna/conventional-commits": {
       "version": "3.22.0",
       "resolved": "https://registry.npmjs.org/@lerna/conventional-commits/-/conventional-commits-3.22.0.tgz",
-      "integrity": "sha1-J5j0iB7i70V72uAnq30L8K9vHgk=",
+      "integrity": "sha512-z4ZZk1e8Mhz7+IS8NxHr64wyklHctCJyWpJKEZZPJiLFJ8yKto/x38O80R10pIzC0rr8Sy/OsjSH4bl0TbbgqA==",
       "dev": true,
       "requires": {
         "@lerna/validation-error": "3.13.0",
@@ -6019,7 +6019,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6031,7 +6031,7 @@
             "semver": {
               "version": "5.7.1",
               "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
               "dev": true
             }
           }
@@ -6041,7 +6041,7 @@
     "@lerna/create": {
       "version": "3.22.0",
       "resolved": "https://registry.npmjs.org/@lerna/create/-/create-3.22.0.tgz",
-      "integrity": "sha1-1rvQN8PcW0Jf5fbRuBcFfCePdhk=",
+      "integrity": "sha512-MdiQQzCcB4E9fBF1TyMOaAEz9lUjIHp1Ju9H7f3lXze5JK6Fl5NYkouAvsLgY6YSIhXMY8AHW2zzXeBDY4yWkw==",
       "dev": true,
       "requires": {
         "@evocateur/pacote": "^9.6.3",
@@ -6067,7 +6067,7 @@
         "@nodelib/fs.stat": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
-          "integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=",
+          "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
           "dev": true
         },
         "array-union": {
@@ -6091,7 +6091,7 @@
         "fast-glob": {
           "version": "2.2.7",
           "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",
-          "integrity": "sha1-aVOFfDr6R1//ku5gFdUtpwpM050=",
+          "integrity": "sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==",
           "dev": true,
           "requires": {
             "@mrmlnc/readdir-enhanced": "^2.2.1",
@@ -6116,7 +6116,7 @@
         "globby": {
           "version": "9.2.0",
           "resolved": "https://registry.npmjs.org/globby/-/globby-9.2.0.tgz",
-          "integrity": "sha1-/QKacGxwPSm90XD0tts6P3p8tj0=",
+          "integrity": "sha512-ollPHROa5mcxDEkwg6bPt3QbEf4pDQSNtd6JPL1YvOvAo/7/0VAm9TccUeoTmarjPw4pfUthSCqcyfNB1I3ZSg==",
           "dev": true,
           "requires": {
             "@types/glob": "^7.1.1",
@@ -6132,7 +6132,7 @@
         "ignore": {
           "version": "4.0.6",
           "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
-          "integrity": "sha1-dQ49tYYgh7RzfrrIIH/9HvJ7Jfw=",
+          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
           "dev": true
         },
         "jsonfile": {
@@ -6147,7 +6147,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6159,7 +6159,7 @@
             "semver": {
               "version": "5.7.1",
               "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
               "dev": true
             }
           }
@@ -6167,7 +6167,7 @@
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-          "integrity": "sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q=",
+          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
           "dev": true
         },
         "tr46": {
@@ -6201,7 +6201,7 @@
     "@lerna/create-symlink": {
       "version": "3.16.2",
       "resolved": "https://registry.npmjs.org/@lerna/create-symlink/-/create-symlink-3.16.2.tgz",
-      "integrity": "sha1-QSy45Zpy9afZRj5ORyGtIHAUmWc=",
+      "integrity": "sha512-pzXIJp6av15P325sgiIRpsPXLFmkisLhMBCy4764d+7yjf2bzrJ4gkWVMhsv4AdF0NN3OyZ5jjzzTtLNqfR+Jw==",
       "dev": true,
       "requires": {
         "@zkochan/cmd-shim": "^3.1.0",
@@ -6234,7 +6234,7 @@
     "@lerna/describe-ref": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/describe-ref/-/describe-ref-3.16.5.tgz",
-      "integrity": "sha1-ozjCWq7YN9PccLinLER8XGY0asA=",
+      "integrity": "sha512-c01+4gUF0saOOtDBzbLMFOTJDHTKbDFNErEY6q6i9QaXuzy9LNN62z+Hw4acAAZuJQhrVWncVathcmkkjvSVGw==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6244,7 +6244,7 @@
     "@lerna/diff": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/diff/-/diff-3.21.0.tgz",
-      "integrity": "sha1-5t8Ni5kWFn/1pJ/LAqwGQkKApo0=",
+      "integrity": "sha512-5viTR33QV3S7O+bjruo1SaR40m7F2aUHJaDAC7fL9Ca6xji+aw1KFkpCtVlISS0G8vikUREGMJh+c/VMSc8Usw==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6256,7 +6256,7 @@
     "@lerna/exec": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/exec/-/exec-3.21.0.tgz",
-      "integrity": "sha1-F/B1M4k8uRihe0G8xWbcQ3AW2yY=",
+      "integrity": "sha512-iLvDBrIE6rpdd4GIKTY9mkXyhwsJ2RvQdB9ZU+/NhR3okXfqKc6py/24tV111jqpXTtZUW6HNydT4dMao2hi1Q==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6279,7 +6279,7 @@
     "@lerna/filter-options": {
       "version": "3.20.0",
       "resolved": "https://registry.npmjs.org/@lerna/filter-options/-/filter-options-3.20.0.tgz",
-      "integrity": "sha1-Dw9dWkeDhW7s5CBHCMyQLLyK9Zs=",
+      "integrity": "sha512-bmcHtvxn7SIl/R9gpiNMVG7yjx7WyT0HSGw34YVZ9B+3xF/83N3r5Rgtjh4hheLZ+Q91Or0Jyu5O3Nr+AwZe2g==",
       "dev": true,
       "requires": {
         "@lerna/collect-updates": "3.20.0",
@@ -6292,7 +6292,7 @@
     "@lerna/filter-packages": {
       "version": "3.18.0",
       "resolved": "https://registry.npmjs.org/@lerna/filter-packages/-/filter-packages-3.18.0.tgz",
-      "integrity": "sha1-ano3bShSCNsDqClYz7gXLhebTnA=",
+      "integrity": "sha512-6/0pMM04bCHNATIOkouuYmPg6KH3VkPCIgTfQmdkPJTullERyEQfNUKikrefjxo1vHOoCACDpy65JYyKiAbdwQ==",
       "dev": true,
       "requires": {
         "@lerna/validation-error": "3.13.0",
@@ -6303,7 +6303,7 @@
     "@lerna/get-npm-exec-opts": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/get-npm-exec-opts/-/get-npm-exec-opts-3.13.0.tgz",
-      "integrity": "sha1-0bVSywCIGZ/D5+Em+RTjmgjfnqU=",
+      "integrity": "sha512-Y0xWL0rg3boVyJk6An/vurKzubyJKtrxYv2sj4bB8Mc5zZ3tqtv0ccbOkmkXKqbzvNNF7VeUt1OJ3DRgtC/QZw==",
       "dev": true,
       "requires": {
         "npmlog": "^4.1.2"
@@ -6312,7 +6312,7 @@
     "@lerna/get-packed": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@lerna/get-packed/-/get-packed-3.16.0.tgz",
-      "integrity": "sha1-GzFrcG3O6Gx7qlXlCwh5WUR4Uv8=",
+      "integrity": "sha512-AjsFiaJzo1GCPnJUJZiTW6J1EihrPkc2y3nMu6m3uWFxoleklsSCyImumzVZJssxMi3CPpztj8LmADLedl9kXw==",
       "dev": true,
       "requires": {
         "fs-extra": "^8.1.0",
@@ -6354,7 +6354,7 @@
     "@lerna/github-client": {
       "version": "3.22.0",
       "resolved": "https://registry.npmjs.org/@lerna/github-client/-/github-client-3.22.0.tgz",
-      "integrity": "sha1-XYFqpPdnR+1zauZP+WK48Vw1TZU=",
+      "integrity": "sha512-O/GwPW+Gzr3Eb5bk+nTzTJ3uv+jh5jGho9BOqKlajXaOkMYGBELEAqV5+uARNGWZFvYAiF4PgqHb6aCUu7XdXg==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6367,7 +6367,7 @@
     "@lerna/gitlab-client": {
       "version": "3.15.0",
       "resolved": "https://registry.npmjs.org/@lerna/gitlab-client/-/gitlab-client-3.15.0.tgz",
-      "integrity": "sha1-kfTsjGl7WsV/fyW9UP5lnSSqlqY=",
+      "integrity": "sha512-OsBvRSejHXUBMgwWQqNoioB8sgzL/Pf1pOUhHKtkiMl6aAWjklaaq5HPMvTIsZPfS6DJ9L5OK2GGZuooP/5c8Q==",
       "dev": true,
       "requires": {
         "node-fetch": "^2.5.0",
@@ -6406,13 +6406,13 @@
     "@lerna/global-options": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/global-options/-/global-options-3.13.0.tgz",
-      "integrity": "sha1-IXZiKQ2watnPLEnY4xAO4o6uuuE=",
+      "integrity": "sha512-SlZvh1gVRRzYLVluz9fryY1nJpZ0FHDGB66U9tFfvnnxmueckRQxLopn3tXj3NU1kc3QANT2I5BsQkOqZ4TEFQ==",
       "dev": true
     },
     "@lerna/has-npm-version": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/has-npm-version/-/has-npm-version-3.16.5.tgz",
-      "integrity": "sha1-q4OVbyEdiSPqav6bl5s4zHOxUyY=",
+      "integrity": "sha512-WL7LycR9bkftyqbYop5rEGJ9sRFIV55tSGmbN1HLrF9idwOCD7CLrT64t235t3t4O5gehDnwKI5h2U3oxTrF8Q==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6422,7 +6422,7 @@
     "@lerna/import": {
       "version": "3.22.0",
       "resolved": "https://registry.npmjs.org/@lerna/import/-/import-3.22.0.tgz",
-      "integrity": "sha1-Gl8DlPOOI8T2QqEj5eFRfnDQaNI=",
+      "integrity": "sha512-uWOlexasM5XR6tXi4YehODtH9Y3OZrFht3mGUFFT3OIl2s+V85xIGFfqFGMTipMPAGb2oF1UBLL48kR43hRsOg==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6460,7 +6460,7 @@
     "@lerna/info": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/info/-/info-3.21.0.tgz",
-      "integrity": "sha1-dmlrZ2/bDzXUjIPGPB4yu143gU8=",
+      "integrity": "sha512-0XDqGYVBgWxUquFaIptW2bYSIu6jOs1BtkvRTWDDhw4zyEdp6q4eaMvqdSap1CG+7wM5jeLCi6z94wS0AuiuwA==",
       "dev": true,
       "requires": {
         "@lerna/command": "3.21.0",
@@ -6471,7 +6471,7 @@
     "@lerna/init": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/init/-/init-3.21.0.tgz",
-      "integrity": "sha1-HoEJNNyL9OU4bAMQQYgdO0CWqlw=",
+      "integrity": "sha512-6CM0z+EFUkFfurwdJCR+LQQF6MqHbYDCBPyhu/d086LRf58GtYZYj49J8mKG9ktayp/TOIxL/pKKjgLD8QBPOg==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6512,7 +6512,7 @@
     "@lerna/link": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/link/-/link-3.21.0.tgz",
-      "integrity": "sha1-i+aP8MzuEEsXS1u9YGMCwvBunZs=",
+      "integrity": "sha512-tGu9GxrX7Ivs+Wl3w1+jrLi1nQ36kNI32dcOssij6bg0oZ2M2MDEFI9UF2gmoypTaN9uO5TSsjCFS7aR79HbdQ==",
       "dev": true,
       "requires": {
         "@lerna/command": "3.21.0",
@@ -6531,7 +6531,7 @@
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-          "integrity": "sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q=",
+          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
           "dev": true
         }
       }
@@ -6539,7 +6539,7 @@
     "@lerna/list": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/list/-/list-3.21.0.tgz",
-      "integrity": "sha1-Qvdvr6Vt6hO2keyMqxODJpHWHaI=",
+      "integrity": "sha512-KehRjE83B1VaAbRRkRy6jLX1Cin8ltsrQ7FHf2bhwhRHK0S54YuA6LOoBnY/NtA8bHDX/Z+G5sMY78X30NS9tg==",
       "dev": true,
       "requires": {
         "@lerna/command": "3.21.0",
@@ -6551,7 +6551,7 @@
     "@lerna/listable": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/listable/-/listable-3.18.5.tgz",
-      "integrity": "sha1-6CeYQFte2PxRhDyO8eeg5Jc4iho=",
+      "integrity": "sha512-Sdr3pVyaEv5A7ZkGGYR7zN+tTl2iDcinryBPvtuv20VJrXBE8wYcOks1edBTcOWsPjCE/rMP4bo1pseyk3UTsg==",
       "dev": true,
       "requires": {
         "@lerna/query-graph": "3.18.5",
@@ -6562,7 +6562,7 @@
     "@lerna/log-packed": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@lerna/log-packed/-/log-packed-3.16.0.tgz",
-      "integrity": "sha1-+DmRBB7neySVY04URwtCJZ/SvBY=",
+      "integrity": "sha512-Fp+McSNBV/P2mnLUYTaSlG8GSmpXM7krKWcllqElGxvAqv6chk2K3c2k80MeVB4WvJ9tRjUUf+i7HUTiQ9/ckQ==",
       "dev": true,
       "requires": {
         "byte-size": "^5.0.1",
@@ -6574,7 +6574,7 @@
     "@lerna/npm-conf": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@lerna/npm-conf/-/npm-conf-3.16.0.tgz",
-      "integrity": "sha1-HBComuL2wu6WliVXc4aFMA03aCc=",
+      "integrity": "sha512-HbO3DUrTkCAn2iQ9+FF/eisDpWY5POQAOF1m7q//CZjdC2HSW3UYbKEGsSisFxSfaF9Z4jtrV+F/wX6qWs3CuA==",
       "dev": true,
       "requires": {
         "config-chain": "^1.1.11",
@@ -6584,7 +6584,7 @@
     "@lerna/npm-dist-tag": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/npm-dist-tag/-/npm-dist-tag-3.18.5.tgz",
-      "integrity": "sha1-nvmrt8EEB3sx9vqyLMc7MU1UrFU=",
+      "integrity": "sha512-xw0HDoIG6HreVsJND9/dGls1c+lf6vhu7yJoo56Sz5bvncTloYGLUppIfDHQr4ZvmPCK8rsh0euCVh2giPxzKQ==",
       "dev": true,
       "requires": {
         "@evocateur/npm-registry-fetch": "^4.0.0",
@@ -6597,7 +6597,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6609,7 +6609,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         }
       }
@@ -6617,7 +6617,7 @@
     "@lerna/npm-install": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/npm-install/-/npm-install-3.16.5.tgz",
-      "integrity": "sha1-1r/cFvgShdpmUVrkeSTW4njWN9M=",
+      "integrity": "sha512-hfiKk8Eku6rB9uApqsalHHTHY+mOrrHeWEs+gtg7+meQZMTS3kzv4oVp5cBZigndQr3knTLjwthT/FX4KvseFg==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6652,7 +6652,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6664,7 +6664,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         }
       }
@@ -6672,7 +6672,7 @@
     "@lerna/npm-publish": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/npm-publish/-/npm-publish-3.18.5.tgz",
-      "integrity": "sha1-JA5AOZWf2YFrScWwdCHhG1ywAK8=",
+      "integrity": "sha512-3etLT9+2L8JAx5F8uf7qp6iAtOLSMj+ZYWY6oUgozPi/uLqU0/gsMsEXh3F0+YVW33q0M61RpduBoAlOOZnaTg==",
       "dev": true,
       "requires": {
         "@evocateur/libnpmpublish": "^1.2.2",
@@ -6709,7 +6709,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6721,7 +6721,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         }
       }
@@ -6729,7 +6729,7 @@
     "@lerna/npm-run-script": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/npm-run-script/-/npm-run-script-3.16.5.tgz",
-      "integrity": "sha1-nC7IJFOibAtG7cC7fBWBbIIfXBU=",
+      "integrity": "sha512-1asRi+LjmVn3pMjEdpqKJZFT/3ZNpb+VVeJMwrJaV/3DivdNg7XlPK9LTrORuKU4PSvhdEZvJmSlxCKyDpiXsQ==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6740,7 +6740,7 @@
     "@lerna/otplease": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/otplease/-/otplease-3.18.5.tgz",
-      "integrity": "sha1-t3uOdgtAq62fdljZiPPqd9T9AjE=",
+      "integrity": "sha512-S+SldXAbcXTEDhzdxYLU0ZBKuYyURP/ND2/dK6IpKgLxQYh/z4ScljPDMyKymmEvgiEJmBsPZAAPfmNPEzxjog==",
       "dev": true,
       "requires": {
         "@lerna/prompt": "3.18.5",
@@ -6750,7 +6750,7 @@
     "@lerna/output": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/output/-/output-3.13.0.tgz",
-      "integrity": "sha1-Pe18yQiyephyIopjDZUK7a56SYk=",
+      "integrity": "sha512-7ZnQ9nvUDu/WD+bNsypmPG5MwZBwu86iRoiW6C1WBuXXDxM5cnIAC1m2WxHeFnjyMrYlRXM9PzOQ9VDD+C15Rg==",
       "dev": true,
       "requires": {
         "npmlog": "^4.1.2"
@@ -6759,7 +6759,7 @@
     "@lerna/pack-directory": {
       "version": "3.16.4",
       "resolved": "https://registry.npmjs.org/@lerna/pack-directory/-/pack-directory-3.16.4.tgz",
-      "integrity": "sha1-Pq5fkb31rP4DhFEO1T+t3EwHRpM=",
+      "integrity": "sha512-uxSF0HZeGyKaaVHz5FroDY9A5NDDiCibrbYR6+khmrhZtY0Bgn6hWq8Gswl9iIlymA+VzCbshWIMX4o2O8C8ng==",
       "dev": true,
       "requires": {
         "@lerna/get-packed": "3.16.0",
@@ -6775,7 +6775,7 @@
         "npm-packlist": {
           "version": "1.4.8",
           "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz",
-          "integrity": "sha1-Vu5swTW5+YrT1Rwcldoiu7my7z4=",
+          "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==",
           "dev": true,
           "requires": {
             "ignore-walk": "^3.0.1",
@@ -6788,7 +6788,7 @@
     "@lerna/package": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@lerna/package/-/package-3.16.0.tgz",
-      "integrity": "sha1-fgpG5Gl+2LipwU1Zx/iQ4NOLoTw=",
+      "integrity": "sha512-2lHBWpaxcBoiNVbtyLtPUuTYEaB/Z+eEqRS9duxpZs6D+mTTZMNy6/5vpEVSCBmzvdYpyqhqaYjjSLvjjr5Riw==",
       "dev": true,
       "requires": {
         "load-json-file": "^5.3.0",
@@ -6799,7 +6799,7 @@
         "load-json-file": {
           "version": "5.3.0",
           "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-5.3.0.tgz",
-          "integrity": "sha1-TTweAfocA+p4pgrHr5MsnOU0A/M=",
+          "integrity": "sha512-cJGP40Jc/VXUsp8/OrnyKyTZ1y6v/dphm3bioS+RrKXjK2BB6wHUd6JptZEFDGgGahMT+InnZO5i1Ei9mpC8Bw==",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.15",
@@ -6812,7 +6812,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6824,13 +6824,13 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         },
         "type-fest": {
           "version": "0.3.1",
           "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.3.1.tgz",
-          "integrity": "sha1-Y9ANIE4FlHT+Xht8ARESu9HcKeE=",
+          "integrity": "sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==",
           "dev": true
         }
       }
@@ -6838,7 +6838,7 @@
     "@lerna/package-graph": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/package-graph/-/package-graph-3.18.5.tgz",
-      "integrity": "sha1-x0Di6jV40FnlUWM+lQaQgxuUH2s=",
+      "integrity": "sha512-8QDrR9T+dBegjeLr+n9WZTVxUYUhIUjUgZ0gvNxUBN8S1WB9r6H5Yk56/MVaB64tA3oGAN9IIxX6w0WvTfFudA==",
       "dev": true,
       "requires": {
         "@lerna/prerelease-id-from-version": "3.16.0",
@@ -6851,7 +6851,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6863,7 +6863,7 @@
             "semver": {
               "version": "5.7.1",
               "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
               "dev": true
             }
           }
@@ -6873,7 +6873,7 @@
     "@lerna/prerelease-id-from-version": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@lerna/prerelease-id-from-version/-/prerelease-id-from-version-3.16.0.tgz",
-      "integrity": "sha1-skv6eJ9eG6q5FNewi6rpt719g6E=",
+      "integrity": "sha512-qZyeUyrE59uOK8rKdGn7jQz+9uOpAaF/3hbslJVFL1NqF9ELDTqjCPXivuejMX/lN4OgD6BugTO4cR7UTq/sZA==",
       "dev": true,
       "requires": {
         "semver": "^6.2.0"
@@ -6882,7 +6882,7 @@
     "@lerna/profiler": {
       "version": "3.20.0",
       "resolved": "https://registry.npmjs.org/@lerna/profiler/-/profiler-3.20.0.tgz",
-      "integrity": "sha1-D23CNvTqj56l81jGcDMFpPMq0FE=",
+      "integrity": "sha512-bh8hKxAlm6yu8WEOvbLENm42i2v9SsR4WbrCWSbsmOElx3foRnMlYk7NkGECa+U5c3K4C6GeBbwgqs54PP7Ljg==",
       "dev": true,
       "requires": {
         "figgy-pudding": "^3.5.1",
@@ -6916,7 +6916,7 @@
     "@lerna/project": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/project/-/project-3.21.0.tgz",
-      "integrity": "sha1-XXhNLRDFYaAPIDILzbBAmXwQUC0=",
+      "integrity": "sha512-xT1mrpET2BF11CY32uypV2GPtPVm6Hgtha7D81GQP9iAitk9EccrdNjYGt5UBYASl4CIDXBRxwmTTVGfrCx82A==",
       "dev": true,
       "requires": {
         "@lerna/package": "3.16.0",
@@ -6936,7 +6936,7 @@
         "@nodelib/fs.stat": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
-          "integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=",
+          "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
           "dev": true
         },
         "array-union": {
@@ -6951,7 +6951,7 @@
         "cosmiconfig": {
           "version": "5.2.1",
           "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
-          "integrity": "sha1-BA9yaAnFked6F8CjYmykW08Wixo=",
+          "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
           "dev": true,
           "requires": {
             "import-fresh": "^2.0.0",
@@ -6972,7 +6972,7 @@
         "fast-glob": {
           "version": "2.2.7",
           "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",
-          "integrity": "sha1-aVOFfDr6R1//ku5gFdUtpwpM050=",
+          "integrity": "sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==",
           "dev": true,
           "requires": {
             "@mrmlnc/readdir-enhanced": "^2.2.1",
@@ -7018,7 +7018,7 @@
         "globby": {
           "version": "9.2.0",
           "resolved": "https://registry.npmjs.org/globby/-/globby-9.2.0.tgz",
-          "integrity": "sha1-/QKacGxwPSm90XD0tts6P3p8tj0=",
+          "integrity": "sha512-ollPHROa5mcxDEkwg6bPt3QbEf4pDQSNtd6JPL1YvOvAo/7/0VAm9TccUeoTmarjPw4pfUthSCqcyfNB1I3ZSg==",
           "dev": true,
           "requires": {
             "@types/glob": "^7.1.1",
@@ -7034,7 +7034,7 @@
         "ignore": {
           "version": "4.0.6",
           "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
-          "integrity": "sha1-dQ49tYYgh7RzfrrIIH/9HvJ7Jfw=",
+          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
           "dev": true
         },
         "import-fresh": {
@@ -7058,7 +7058,7 @@
         "load-json-file": {
           "version": "5.3.0",
           "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-5.3.0.tgz",
-          "integrity": "sha1-TTweAfocA+p4pgrHr5MsnOU0A/M=",
+          "integrity": "sha512-cJGP40Jc/VXUsp8/OrnyKyTZ1y6v/dphm3bioS+RrKXjK2BB6wHUd6JptZEFDGgGahMT+InnZO5i1Ei9mpC8Bw==",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.15",
@@ -7077,13 +7077,13 @@
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-          "integrity": "sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q=",
+          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
           "dev": true
         },
         "type-fest": {
           "version": "0.3.1",
           "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.3.1.tgz",
-          "integrity": "sha1-Y9ANIE4FlHT+Xht8ARESu9HcKeE=",
+          "integrity": "sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==",
           "dev": true
         }
       }
@@ -7091,7 +7091,7 @@
     "@lerna/prompt": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/prompt/-/prompt-3.18.5.tgz",
-      "integrity": "sha1-YozVRfIliH0GBJGrld+JnPxSGKE=",
+      "integrity": "sha512-rkKj4nm1twSbBEb69+Em/2jAERK8htUuV8/xSjN0NPC+6UjzAwY52/x9n5cfmpa9lyKf/uItp7chCI7eDmNTKQ==",
       "dev": true,
       "requires": {
         "inquirer": "^6.2.0",
@@ -7214,7 +7214,7 @@
     "@lerna/publish": {
       "version": "3.22.1",
       "resolved": "https://registry.npmjs.org/@lerna/publish/-/publish-3.22.1.tgz",
-      "integrity": "sha1-tPfOP7oemvsovkofPYgiImm6lRk=",
+      "integrity": "sha512-PG9CM9HUYDreb1FbJwFg90TCBQooGjj+n/pb3gw/eH5mEDq0p8wKdLFe0qkiqUkm/Ub5C8DbVFertIo0Vd0zcw==",
       "dev": true,
       "requires": {
         "@evocateur/libnpmaccess": "^3.1.2",
@@ -7272,7 +7272,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -7284,7 +7284,7 @@
             "semver": {
               "version": "5.7.1",
               "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
               "dev": true
             }
           }
@@ -7300,7 +7300,7 @@
     "@lerna/pulse-till-done": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/pulse-till-done/-/pulse-till-done-3.13.0.tgz",
-      "integrity": "sha1-yOnOW6+vENkwpn1+0My12Vj+ARA=",
+      "integrity": "sha512-1SOHpy7ZNTPulzIbargrgaJX387csN7cF1cLOGZiJQA6VqnS5eWs2CIrG8i8wmaUavj2QlQ5oEbRMVVXSsGrzA==",
       "dev": true,
       "requires": {
         "npmlog": "^4.1.2"
@@ -7309,7 +7309,7 @@
     "@lerna/query-graph": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/query-graph/-/query-graph-3.18.5.tgz",
-      "integrity": "sha1-30gwu1FVJzADvzXo3aHDLQknvYY=",
+      "integrity": "sha512-50Lf4uuMpMWvJ306be3oQDHrWV42nai9gbIVByPBYJuVW8dT8O8pA3EzitNYBUdLL9/qEVbrR0ry1HD7EXwtRA==",
       "dev": true,
       "requires": {
         "@lerna/package-graph": "3.18.5",
@@ -7319,7 +7319,7 @@
     "@lerna/resolve-symlink": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@lerna/resolve-symlink/-/resolve-symlink-3.16.0.tgz",
-      "integrity": "sha1-N/xwlfq9vPMXwm63Tg0L3o79I4Y=",
+      "integrity": "sha512-Ibj5e7njVHNJ/NOqT4HlEgPFPtPLWsO7iu59AM5bJDcAJcR96mLZ7KGVIsS2tvaO7akMEJvt2P+ErwCdloG3jQ==",
       "dev": true,
       "requires": {
         "fs-extra": "^8.1.0",
@@ -7352,7 +7352,7 @@
     "@lerna/rimraf-dir": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/rimraf-dir/-/rimraf-dir-3.16.5.tgz",
-      "integrity": "sha1-BDFqtf/SkJZXqvOI6lAsuMLyCgk=",
+      "integrity": "sha512-bQlKmO0pXUsXoF8lOLknhyQjOZsCc0bosQDoX4lujBXSWxHVTg1VxURtWf2lUjz/ACsJVDfvHZbDm8kyBk5okA==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -7364,7 +7364,7 @@
     "@lerna/run": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/run/-/run-3.21.0.tgz",
-      "integrity": "sha1-KjXshJeeTW5CR0/hSNMuXeHKyJE=",
+      "integrity": "sha512-fJF68rT3veh+hkToFsBmUJ9MHc9yGXA7LSDvhziAojzOb0AI/jBDp6cEcDQyJ7dbnplba2Lj02IH61QUf9oW0Q==",
       "dev": true,
       "requires": {
         "@lerna/command": "3.21.0",
@@ -7389,7 +7389,7 @@
     "@lerna/run-lifecycle": {
       "version": "3.16.2",
       "resolved": "https://registry.npmjs.org/@lerna/run-lifecycle/-/run-lifecycle-3.16.2.tgz",
-      "integrity": "sha1-Z7KI+OqWTbnqT7H7x3FdW7sLzgA=",
+      "integrity": "sha512-RqFoznE8rDpyyF0rOJy3+KjZCeTkO8y/OB9orPauR7G2xQ7PTdCpgo7EO6ZNdz3Al+k1BydClZz/j78gNCmL2A==",
       "dev": true,
       "requires": {
         "@lerna/npm-conf": "3.16.0",
@@ -7401,7 +7401,7 @@
     "@lerna/run-topologically": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/run-topologically/-/run-topologically-3.18.5.tgz",
-      "integrity": "sha1-PNY52iDpZ9dnLLiNsPdWuS8v38M=",
+      "integrity": "sha512-6N1I+6wf4hLOnPW+XDZqwufyIQ6gqoPfHZFkfWlvTQ+Ue7CuF8qIVQ1Eddw5HKQMkxqN10thKOFfq/9NQZ4NUg==",
       "dev": true,
       "requires": {
         "@lerna/query-graph": "3.18.5",
@@ -7412,13 +7412,13 @@
         "eventemitter3": {
           "version": "3.1.2",
           "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz",
-          "integrity": "sha1-LT1I+cNGaY/Og6hdfWZOmFNd9uc=",
+          "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==",
           "dev": true
         },
         "p-queue": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/p-queue/-/p-queue-4.0.0.tgz",
-          "integrity": "sha1-7Q7uh5iSftbywvX1t3/bIGGl00Y=",
+          "integrity": "sha512-3cRXXn3/O0o3+eVmUroJPSj/esxoEFIm0ZOno/T+NzG/VZgPOqQ8WKmlNqubSEpZmCIngEy34unkHGg83ZIBmg==",
           "dev": true,
           "requires": {
             "eventemitter3": "^3.1.0"
@@ -7429,7 +7429,7 @@
     "@lerna/symlink-binary": {
       "version": "3.17.0",
       "resolved": "https://registry.npmjs.org/@lerna/symlink-binary/-/symlink-binary-3.17.0.tgz",
-      "integrity": "sha1-j4AxswmGOBSIPT8AmHf4Ljiu9Fo=",
+      "integrity": "sha512-RLpy9UY6+3nT5J+5jkM5MZyMmjNHxZIZvXLV+Q3MXrf7Eaa1hNqyynyj4RO95fxbS+EZc4XVSk25DGFQbcRNSQ==",
       "dev": true,
       "requires": {
         "@lerna/create-symlink": "3.16.2",
@@ -7469,7 +7469,7 @@
     "@lerna/symlink-dependencies": {
       "version": "3.17.0",
       "resolved": "https://registry.npmjs.org/@lerna/symlink-dependencies/-/symlink-dependencies-3.17.0.tgz",
-      "integrity": "sha1-SNY2DphYZaDlbNi1GzCKUmMIeEo=",
+      "integrity": "sha512-KmjU5YT1bpt6coOmdFueTJ7DFJL4H1w5eF8yAQ2zsGNTtZ+i5SGFBWpb9AQaw168dydc3s4eu0W0Sirda+F59Q==",
       "dev": true,
       "requires": {
         "@lerna/create-symlink": "3.16.2",
@@ -7512,13 +7512,13 @@
     "@lerna/timer": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/timer/-/timer-3.13.0.tgz",
-      "integrity": "sha1-vNCQRVHbFuCDZNbBjl4hYPyHB4E=",
+      "integrity": "sha512-RHWrDl8U4XNPqY5MQHkToWS9jHPnkLZEt5VD+uunCKTfzlxGnRCr3/zVr8VGy/uENMYpVP3wJa4RKGY6M0vkRw==",
       "dev": true
     },
     "@lerna/validation-error": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/validation-error/-/validation-error-3.13.0.tgz",
-      "integrity": "sha1-yGuPB8WrlTn3db2KVJdukm83WcM=",
+      "integrity": "sha512-SiJP75nwB8GhgwLKQfdkSnDufAaCbkZWJqEDlKOUPUvVOplRGnfL+BPQZH5nvq2BYSRXsksXWZ4UHVnQZI/HYA==",
       "dev": true,
       "requires": {
         "npmlog": "^4.1.2"
@@ -7527,7 +7527,7 @@
     "@lerna/version": {
       "version": "3.22.1",
       "resolved": "https://registry.npmjs.org/@lerna/version/-/version-3.22.1.tgz",
-      "integrity": "sha1-mAWpJHpH7mLWuBvZ+l+3KLJLWeI=",
+      "integrity": "sha512-PSGt/K1hVqreAFoi3zjD0VEDupQ2WZVlVIwesrE5GbrL2BjXowjCsTDPqblahDUPy0hp6h7E2kG855yLTp62+g==",
       "dev": true,
       "requires": {
         "@lerna/check-working-tree": "3.16.5",
@@ -7561,7 +7561,7 @@
         "load-json-file": {
           "version": "5.3.0",
           "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-5.3.0.tgz",
-          "integrity": "sha1-TTweAfocA+p4pgrHr5MsnOU0A/M=",
+          "integrity": "sha512-cJGP40Jc/VXUsp8/OrnyKyTZ1y6v/dphm3bioS+RrKXjK2BB6wHUd6JptZEFDGgGahMT+InnZO5i1Ei9mpC8Bw==",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.15",
@@ -7580,13 +7580,13 @@
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-          "integrity": "sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q=",
+          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
           "dev": true
         },
         "type-fest": {
           "version": "0.3.1",
           "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.3.1.tgz",
-          "integrity": "sha1-Y9ANIE4FlHT+Xht8ARESu9HcKeE=",
+          "integrity": "sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==",
           "dev": true
         }
       }
@@ -7594,7 +7594,7 @@
     "@lerna/write-log-file": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/write-log-file/-/write-log-file-3.13.0.tgz",
-      "integrity": "sha1-t42eTPwTSai+ZNkTJMTIGZ6CKiY=",
+      "integrity": "sha512-RibeMnDPvlL8bFYW5C8cs4mbI3AHfQef73tnJCQ/SgrXZHehmHnsyWUiE7qDQCAo+B1RfTapvSyFF69iPj326A==",
       "dev": true,
       "requires": {
         "npmlog": "^4.1.2",
@@ -7604,7 +7604,7 @@
         "write-file-atomic": {
           "version": "2.4.3",
           "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz",
-          "integrity": "sha1-H9Lprh3z51uNjDZ0Q8aS1MqB9IE=",
+          "integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.11",
@@ -7634,7 +7634,7 @@
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
-      "integrity": "sha1-UkryQNGjYFJ7cwR17PoTRKpUDd4=",
+      "integrity": "sha512-bPHp6Ji8b41szTOcaP63VlnbbO5Ny6dwAATtY6JTjh5N2OLrb5Qk/Th5cRkRQhkWCt+EJsYrNB0MiL+Gpn6e3g==",
       "dev": true,
       "requires": {
         "call-me-maybe": "^1.0.1",
@@ -9610,13 +9610,13 @@
     "@octokit/plugin-enterprise-rest": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/@octokit/plugin-enterprise-rest/-/plugin-enterprise-rest-6.0.1.tgz",
-      "integrity": "sha1-4HiWc5YY2rjafUB3xlgAN3X5VDc=",
+      "integrity": "sha512-93uGjlhUD+iNg1iWhUENAtJata6w5nE+V4urXOAlIXdco6xNZtUSfYY8dzp3Udy74aqO/B5UZL80x/YMa5PKRw==",
       "dev": true
     },
     "@octokit/plugin-paginate-rest": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-1.1.2.tgz",
-      "integrity": "sha1-AEFwrPjCvlNauiZyeGfWkve0iPw=",
+      "integrity": "sha512-jbsSoi5Q1pj63sC16XIUboklNw+8tL9VOnJsWycWYR78TKss5PVpIPb1TUUcMQ+bBh7cY579cVAWmf5qG+dw+Q==",
       "dev": true,
       "requires": {
         "@octokit/types": "^2.0.1"
@@ -9625,7 +9625,7 @@
         "@octokit/types": {
           "version": "2.16.2",
           "resolved": "https://registry.npmjs.org/@octokit/types/-/types-2.16.2.tgz",
-          "integrity": "sha1-TF+No8b+zz2hgRrvZ4/aA+2sNdI=",
+          "integrity": "sha512-O75k56TYvJ8WpAakWwYRN8Bgu60KrmX0z1KqFp1kNiFNkgW+JW+9EBKZ+S33PU6SLvbihqd+3drvPxKK68Ee8Q==",
           "dev": true,
           "requires": {
             "@types/node": ">= 8"
@@ -9642,7 +9642,7 @@
     "@octokit/plugin-rest-endpoint-methods": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-2.4.0.tgz",
-      "integrity": "sha1-Mojs9UgfaMSU3QYC/BVAeln69h4=",
+      "integrity": "sha512-EZi/AWhtkdfAYi01obpX0DF7U6b1VRr30QNQ5xSFPITMdLSfhcBqjamE3F+sKcxPbD7eZuMHu3Qkk2V+JGxBDQ==",
       "dev": true,
       "requires": {
         "@octokit/types": "^2.0.1",
@@ -9652,7 +9652,7 @@
         "@octokit/types": {
           "version": "2.16.2",
           "resolved": "https://registry.npmjs.org/@octokit/types/-/types-2.16.2.tgz",
-          "integrity": "sha1-TF+No8b+zz2hgRrvZ4/aA+2sNdI=",
+          "integrity": "sha512-O75k56TYvJ8WpAakWwYRN8Bgu60KrmX0z1KqFp1kNiFNkgW+JW+9EBKZ+S33PU6SLvbihqd+3drvPxKK68Ee8Q==",
           "dev": true,
           "requires": {
             "@types/node": ">= 8"
@@ -9702,7 +9702,7 @@
     "@octokit/request-error": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-1.2.1.tgz",
-      "integrity": "sha1-7eBxTHc/MjR1dsJWSdwBOuazGAE=",
+      "integrity": "sha512-+6yDyk1EES6WK+l3viRDElw96MvwfJxCt45GvmjDUKWjYIb3PJZQkq3i46TwGwoPD4h8NmTrENmtyA1FwbmhRA==",
       "dev": true,
       "requires": {
         "@octokit/types": "^2.0.0",
@@ -9713,7 +9713,7 @@
         "@octokit/types": {
           "version": "2.16.2",
           "resolved": "https://registry.npmjs.org/@octokit/types/-/types-2.16.2.tgz",
-          "integrity": "sha1-TF+No8b+zz2hgRrvZ4/aA+2sNdI=",
+          "integrity": "sha512-O75k56TYvJ8WpAakWwYRN8Bgu60KrmX0z1KqFp1kNiFNkgW+JW+9EBKZ+S33PU6SLvbihqd+3drvPxKK68Ee8Q==",
           "dev": true,
           "requires": {
             "@types/node": ">= 8"
@@ -9724,7 +9724,7 @@
     "@octokit/rest": {
       "version": "16.43.2",
       "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-16.43.2.tgz",
-      "integrity": "sha1-xTQm8eHRBE3ulnAj4yecUJk92Rs=",
+      "integrity": "sha512-ngDBevLbBTFfrHZeiS7SAMAZ6ssuVmXuya+F/7RaVvlysgGa1JKJkKWY+jV6TCJYcW0OALfJ7nTIGXcBXzycfQ==",
       "dev": true,
       "requires": {
         "@octokit/auth-token": "^2.4.0",
@@ -9867,7 +9867,7 @@
     "@restart/context": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
-      "integrity": "sha1-qZ2HwpmjTCi9hbtInLB7/SMUnAI="
+      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
     },
     "@restart/hooks": {
       "version": "0.3.27",
@@ -11321,7 +11321,7 @@
     "@zkochan/cmd-shim": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@zkochan/cmd-shim/-/cmd-shim-3.1.0.tgz",
-      "integrity": "sha1-KrjtgfW7VFKoXyV1jrm4aBmC/S4=",
+      "integrity": "sha512-o8l0+x7C7sMZU3v9GuJIAU10qQLtwR1dtRQIOmlNMtyaqhmpXOzx1HWiYoWfmmf9HHZoAkXpc9TM9PQYF9d4Jg==",
       "dev": true,
       "requires": {
         "is-windows": "^1.0.0",
@@ -11775,7 +11775,7 @@
     "array-differ": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-2.1.0.tgz",
-      "integrity": "sha1-S5wcPxS5BnVwgpJXaeirkE9IAbE=",
+      "integrity": "sha512-KbUpJgx909ZscOc/7CLATBFam7P1Z1QRQInvgT0UztM9Q72aGKCunKASAl7WNW0tnPmPyEMeMhdsfWhfmW037w==",
       "dev": true
     },
     "array-each": {
@@ -12376,7 +12376,7 @@
     "babel-jest": {
       "version": "25.1.0",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-25.1.0.tgz",
-      "integrity": "sha1-IGCTrDgKS3jEQEoFsydzkSePgPs=",
+      "integrity": "sha512-tz0VxUhhOE2y+g8R2oFrO/2VtVjA1lkJeavlhExuRBg3LdNJY9gwQ+Vcvqt9+cqy71MCTJhewvTB7Qtnnr9SWg==",
       "dev": true,
       "requires": {
         "@jest/transform": "^25.1.0",
@@ -12422,7 +12422,7 @@
         "chalk": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha1-P3PCv1JlkfV0zEksUeJFY0n4ROQ=",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
           "dev": true,
           "requires": {
             "ansi-styles": "^4.1.0",
@@ -12432,7 +12432,7 @@
         "color-convert": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
           "dev": true,
           "requires": {
             "color-name": "~1.1.4"
@@ -12441,19 +12441,19 @@
         "color-name": {
           "version": "1.1.4",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
+          "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": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "dev": true,
           "requires": {
             "has-flag": "^4.0.0"
@@ -14448,7 +14448,7 @@
     "byte-size": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/byte-size/-/byte-size-5.0.1.tgz",
-      "integrity": "sha1-S2UQOaXs2Wdn5xo9ftOA5IvtQZE=",
+      "integrity": "sha512-/XuKeqWocKsYa/cBY1YbSJSWWqTi4cFgr9S6OyM7PBaPbr9zvNGwWP33vt0uqGhwDdN+y3yhbXVILEUpnwEWGw==",
       "dev": true
     },
     "bytes": {
@@ -14683,7 +14683,7 @@
     "camelcase-keys": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
-      "integrity": "sha1-XnVda6UaoiPsfT1S8ld4IQ+dw8A=",
+      "integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==",
       "dev": true,
       "requires": {
         "camelcase": "^5.3.1",
@@ -15283,7 +15283,7 @@
     "command-exists": {
       "version": "1.2.9",
       "resolved": "https://registry.npmjs.org/command-exists/-/command-exists-1.2.9.tgz",
-      "integrity": "sha1-xQclrzgIyKsCYP1gsB+/oluVT2k=",
+      "integrity": "sha512-LTQ/SGc+s0Xc0Fu5WaKnR0YiygZkm9eKFvyS+fRsU7/ZWFF8ykFM6Pc9aCVf1+xasOOZpO3BAVgVrKvsqKHV7w==",
       "dev": true
     },
     "commander": {
@@ -15593,7 +15593,7 @@
     "conventional-changelog-core": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/conventional-changelog-core/-/conventional-changelog-core-3.2.3.tgz",
-      "integrity": "sha1-sxQQhW9DHIRwhqfctNLKGEp9iPs=",
+      "integrity": "sha512-LMMX1JlxPIq/Ez5aYAYS5CpuwbOk6QFp8O4HLAcZxe3vxoCtABkhfjetk8IYdRB9CDQGwJFLR3Dr55Za6XKgUQ==",
       "dev": true,
       "requires": {
         "conventional-changelog-writer": "^4.0.6",
@@ -15635,7 +15635,7 @@
         "through2": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.2.tgz",
-          "integrity": "sha1-mfiJMc/HYex2eLQdXXM2tbage/Q=",
+          "integrity": "sha512-enaDQ4MUyP2W6ZyT6EsMzqBPZaM/avg8iuo+l2d3QCs0J+6RaqkHV/2/lOwDTueBHeJ/2LG9lrLW3d5rWPucuQ==",
           "dev": true,
           "requires": {
             "inherits": "^2.0.4",
@@ -15647,7 +15647,7 @@
     "conventional-changelog-preset-loader": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/conventional-changelog-preset-loader/-/conventional-changelog-preset-loader-2.3.4.tgz",
-      "integrity": "sha1-FKhVq7/9WQJ/1gJYHx802YYupEw=",
+      "integrity": "sha512-GEKRWkrSAZeTq5+YjUZOYxdHq+ci4dNwHvpaBC3+ENalzFWuCWa9EZXSuZBpkr72sMdKB+1fyDV4takK1Lf58g==",
       "dev": true
     },
     "conventional-changelog-writer": {
@@ -15717,7 +15717,7 @@
     "conventional-recommended-bump": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/conventional-recommended-bump/-/conventional-recommended-bump-5.0.1.tgz",
-      "integrity": "sha1-WvY5A5R7bgied3Z2ActZLKuxBro=",
+      "integrity": "sha512-RVdt0elRcCxL90IrNP0fYCpq1uGt2MALko0eyeQ+zQuDVWtMGAy9ng6yYn3kax42lCj9+XBxQ8ZN6S9bdKxDhQ==",
       "dev": true,
       "requires": {
         "concat-stream": "^2.0.0",
@@ -15750,7 +15750,7 @@
         "concat-stream": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
-          "integrity": "sha1-QUz1r3kKSMYKub5FJ9VtXkETPLE=",
+          "integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==",
           "dev": true,
           "requires": {
             "buffer-from": "^1.0.0",
@@ -15774,7 +15774,7 @@
         "meow": {
           "version": "4.0.1",
           "resolved": "https://registry.npmjs.org/meow/-/meow-4.0.1.tgz",
-          "integrity": "sha1-1IWY9vSxRy81v2MXqVlFrONH+XU=",
+          "integrity": "sha512-xcSBHD5Z86zaOc+781KrupuHAzeGXSLtiAOmBsiLDiPSaYSB6hdew2ng9EBAnZ62jagG9MHAOdxpDi/lWBFJ/A==",
           "dev": true,
           "requires": {
             "camelcase-keys": "^4.0.0",
@@ -15791,7 +15791,7 @@
         "minimist-options": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-3.0.2.tgz",
-          "integrity": "sha1-+6TIGRM54T7PTWG+sD8HAQPz2VQ=",
+          "integrity": "sha512-FyBrT/d0d4+uiZRbqznPXqw3IpZZG3gl3wKWiX784FycUKVwBt0uLBFkQrtE4tZOrgo78nZp2jnKz3L65T5LdQ==",
           "dev": true,
           "requires": {
             "arrify": "^1.0.1",
@@ -16566,7 +16566,7 @@
     "dateformat": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz",
-      "integrity": "sha1-puN0maTZqc+F71hyBE1ikByYia4=",
+      "integrity": "sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==",
       "dev": true
     },
     "deasync": {
@@ -16936,7 +16936,7 @@
     "deprecation": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz",
-      "integrity": "sha1-Y2jL20Cr8zc7UlrIfkomDDpwCRk=",
+      "integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==",
       "dev": true
     },
     "deps-sort": {
@@ -18842,7 +18842,7 @@
     "express-ws": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/express-ws/-/express-ws-4.0.0.tgz",
-      "integrity": "sha1-2r2NyXRRZBiQKkH+bjDtlJtNNsQ=",
+      "integrity": "sha512-KEyUw8AwRET2iFjFsI1EJQrJ/fHeGiJtgpYgEWG3yDv4l/To/m3a2GaYfeGyB3lsWdvbesjF5XCMx+SVBgAAYw==",
       "requires": {
         "ws": "^5.2.0"
       },
@@ -20818,7 +20818,7 @@
     "genfun": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/genfun/-/genfun-5.0.0.tgz",
-      "integrity": "sha1-ndlxCgaQClxKW/V6yl2k5S/nZTc=",
+      "integrity": "sha512-KGDOARWVga7+rnB3z9Sd2Letx515owfk0hSxHGuqjANb1M+x2bGZGqHLiozPsYMdM2OubeMni/Hpwmjq6qIUhA==",
       "dev": true
     },
     "gensync": {
@@ -21045,7 +21045,7 @@
     "get-port": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/get-port/-/get-port-4.2.0.tgz",
-      "integrity": "sha1-43Nosehjt2KcQ8WjI2Jflc8ksRk=",
+      "integrity": "sha512-/b3jarXkH8KJoOMQc3uVGHASwGLPq3gSFJ7tgJm2diza+bydJPTGOibin2steecKeOylE8oY2JERlVWkAJO6yw==",
       "dev": true
     },
     "get-stdin": {
@@ -21138,7 +21138,7 @@
     "git-raw-commits": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/git-raw-commits/-/git-raw-commits-2.0.0.tgz",
-      "integrity": "sha1-2Srd90RAwUvMXIPszj+3+KeRGLU=",
+      "integrity": "sha512-w4jFEJFgKXMQJ0H0ikBk2S+4KP2VEjhCvLCNqbNRQC8BgGWgLKNCO7a9K9LI+TVT7Gfoloje502sEnctibffgg==",
       "dev": true,
       "requires": {
         "dargs": "^4.0.1",
@@ -21180,7 +21180,7 @@
         "meow": {
           "version": "4.0.1",
           "resolved": "https://registry.npmjs.org/meow/-/meow-4.0.1.tgz",
-          "integrity": "sha1-1IWY9vSxRy81v2MXqVlFrONH+XU=",
+          "integrity": "sha512-xcSBHD5Z86zaOc+781KrupuHAzeGXSLtiAOmBsiLDiPSaYSB6hdew2ng9EBAnZ62jagG9MHAOdxpDi/lWBFJ/A==",
           "dev": true,
           "requires": {
             "camelcase-keys": "^4.0.0",
@@ -21197,7 +21197,7 @@
         "minimist-options": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-3.0.2.tgz",
-          "integrity": "sha1-+6TIGRM54T7PTWG+sD8HAQPz2VQ=",
+          "integrity": "sha512-FyBrT/d0d4+uiZRbqznPXqw3IpZZG3gl3wKWiX784FycUKVwBt0uLBFkQrtE4tZOrgo78nZp2jnKz3L65T5LdQ==",
           "dev": true,
           "requires": {
             "arrify": "^1.0.1",
@@ -21285,7 +21285,7 @@
     "git-semver-tags": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/git-semver-tags/-/git-semver-tags-2.0.3.tgz",
-      "integrity": "sha1-SJiKcYrPWTgA+ZYiqVKnfEBb+jQ=",
+      "integrity": "sha512-tj4FD4ww2RX2ae//jSrXZzrocla9db5h0V7ikPl1P/WwoZar9epdUhwR7XHXSgc+ZkNq72BEEerqQuicoEQfzA==",
       "dev": true,
       "requires": {
         "meow": "^4.0.0",
@@ -21324,7 +21324,7 @@
         "meow": {
           "version": "4.0.1",
           "resolved": "https://registry.npmjs.org/meow/-/meow-4.0.1.tgz",
-          "integrity": "sha1-1IWY9vSxRy81v2MXqVlFrONH+XU=",
+          "integrity": "sha512-xcSBHD5Z86zaOc+781KrupuHAzeGXSLtiAOmBsiLDiPSaYSB6hdew2ng9EBAnZ62jagG9MHAOdxpDi/lWBFJ/A==",
           "dev": true,
           "requires": {
             "camelcase-keys": "^4.0.0",
@@ -21341,7 +21341,7 @@
         "minimist-options": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-3.0.2.tgz",
-          "integrity": "sha1-+6TIGRM54T7PTWG+sD8HAQPz2VQ=",
+          "integrity": "sha512-FyBrT/d0d4+uiZRbqznPXqw3IpZZG3gl3wKWiX784FycUKVwBt0uLBFkQrtE4tZOrgo78nZp2jnKz3L65T5LdQ==",
           "dev": true,
           "requires": {
             "arrify": "^1.0.1",
@@ -22077,7 +22077,7 @@
     "hard-rejection": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz",
-      "integrity": "sha1-HG7aXBaFxjlCdm15u0Cudzzs2IM=",
+      "integrity": "sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==",
       "dev": true
     },
     "harmony-reflect": {
@@ -22730,7 +22730,7 @@
     "init-package-json": {
       "version": "1.10.3",
       "resolved": "https://registry.npmjs.org/init-package-json/-/init-package-json-1.10.3.tgz",
-      "integrity": "sha1-Rf/i9hCoyhNPK9HbVjeyNQcPbL4=",
+      "integrity": "sha512-zKSiXKhQveNteyhcj1CoOP8tqp1QuxPIPBl8Bid99DGLFqA1p87M6lNgfjJHSBoWJJlidGOv5rWjyYKEB3g2Jw==",
       "dev": true,
       "requires": {
         "glob": "^7.1.1",
@@ -22746,7 +22746,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -22758,7 +22758,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         }
       }
@@ -29199,7 +29199,7 @@
     "lerna": {
       "version": "3.22.1",
       "resolved": "https://registry.npmjs.org/lerna/-/lerna-3.22.1.tgz",
-      "integrity": "sha1-ggJ6w9qcYn/YvwLM/v+AapjmW2I=",
+      "integrity": "sha512-vk1lfVRFm+UuEFA7wkLKeSF7Iz13W+N/vFd48aW2yuS7Kv0RbNm2/qcDPV863056LMfkRlsEe+QYOw3palj5Lg==",
       "dev": true,
       "requires": {
         "@lerna/add": "3.21.0",
@@ -29662,7 +29662,7 @@
     "lodash.template": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
-      "integrity": "sha1-+XYZXPPzR9DV9SSDVp/oAxzM6Ks=",
+      "integrity": "sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==",
       "dev": true,
       "requires": {
         "lodash._reinterpolate": "^3.0.0",
@@ -29672,7 +29672,7 @@
     "lodash.templatesettings": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz",
-      "integrity": "sha1-5IExDwSdPPbUfpEq0JMTsVTw+zM=",
+      "integrity": "sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==",
       "dev": true,
       "requires": {
         "lodash._reinterpolate": "^3.0.0"
@@ -30357,7 +30357,7 @@
     "min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
-      "integrity": "sha1-pj9oFnOzBXH76LwlaGrnRu76mGk=",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
       "dev": true
     },
     "mini-css-extract-plugin": {
@@ -30465,7 +30465,7 @@
     "minimist-options": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz",
-      "integrity": "sha1-wGVXE8U6ii69d/+iR9NCxA8BBhk=",
+      "integrity": "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==",
       "dev": true,
       "requires": {
         "arrify": "^1.0.1",
@@ -31272,7 +31272,7 @@
     "modify-values": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz",
-      "integrity": "sha1-s5OfpgVUZHTj4+PGPWS9Q7TuYCI=",
+      "integrity": "sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==",
       "dev": true
     },
     "module-deps": {
@@ -31619,7 +31619,7 @@
     "multimatch": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-3.0.0.tgz",
-      "integrity": "sha1-DiU0zGvCONmrZ+G5zV/Nhabb9ws=",
+      "integrity": "sha512-22foS/gqQfANZ3o+W7ST2x25ueHDVNWl/b9OlGcLpy/iKxjCpvcNCM51YCenUi7Mt/jAjjqv8JwZRs8YP5sRjA==",
       "dev": true,
       "requires": {
         "array-differ": "^2.0.3",
@@ -31666,7 +31666,7 @@
     "mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
-      "integrity": "sha1-lQCAV6Vsr63CvGPd5/n/aVWUjjI=",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
       "dev": true,
       "requires": {
         "any-promise": "^1.0.0",
@@ -32348,7 +32348,7 @@
     "node-fetch-npm": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/node-fetch-npm/-/node-fetch-npm-2.0.4.tgz",
-      "integrity": "sha1-ZQfQ4XqewL477FFpWKSXzsVL9aQ=",
+      "integrity": "sha512-iOuIQDWDyjhv9qSDrj9aq/klt6F9z1p2otB3AV7v3zBDcL/x+OfGsvGQZZCcMZbUf4Ujw1xGNQkjvGnVT22cKg==",
       "dev": true,
       "requires": {
         "encoding": "^0.1.11",
@@ -35386,7 +35386,7 @@
     "npm-lifecycle": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/npm-lifecycle/-/npm-lifecycle-3.1.5.tgz",
-      "integrity": "sha1-mILTZCuMgsgVeCoS5qG/7tACYwk=",
+      "integrity": "sha512-lDLVkjfZmvmfvpvBzA4vzee9cn+Me4orq0QF8glbswJVEbIcSNWib7qGOffolysc3teCqbbPZZkzbr3GQZTL1g==",
       "dev": true,
       "requires": {
         "byline": "^5.0.0",
@@ -35402,7 +35402,7 @@
         "node-gyp": {
           "version": "5.1.1",
           "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-5.1.1.tgz",
-          "integrity": "sha1-65Ffe2Mck30oLjOu1Ey3oCX2Kj4=",
+          "integrity": "sha512-WH0WKGi+a4i4DUt2mHnvocex/xPLp9pYt5R6M2JdFB7pJ7Z34hveZ4nDTGTiLXCkitA9T8HFZjhinBCiVHYcWw==",
           "dev": true,
           "requires": {
             "env-paths": "^2.2.0",
@@ -35421,7 +35421,7 @@
         "nopt": {
           "version": "4.0.3",
           "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz",
-          "integrity": "sha1-o3XK2dAv2SEnjZVMIlTVqlfhXkg=",
+          "integrity": "sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==",
           "dev": true,
           "requires": {
             "abbrev": "1",
@@ -35431,7 +35431,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         }
       }
@@ -37523,7 +37523,7 @@
     "octokit-pagination-methods": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/octokit-pagination-methods/-/octokit-pagination-methods-1.1.0.tgz",
-      "integrity": "sha1-z0cu3J1VEFX573P25CtNu0yAvqQ=",
+      "integrity": "sha512-fZ4qZdQ2nxJvtcasX7Ghl+WlWS/d9IgnBIwFZXVNNZUmzpno91SX5bc5vuxiuKoCtK78XxGGNuSCrDC7xYB3OQ==",
       "dev": true
     },
     "on-finished": {
@@ -37985,7 +37985,7 @@
     "os-name": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/os-name/-/os-name-3.1.0.tgz",
-      "integrity": "sha1-3sGdlmKW4c1i1wGlpm7h3ernCAE=",
+      "integrity": "sha512-h8L+8aNjNcMpo/mAIBPn5PXCM16iyPGjHNWo6U1YO8sJTMHtEtyczI6QJnLoplswm6goopQkqc7OAnjhWcugVg==",
       "dev": true,
       "requires": {
         "macos-release": "^2.2.0",
@@ -39626,7 +39626,7 @@
     "prop-types-extra": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
-      "integrity": "sha1-WMO3TL+7ldMEYll1qi8ISDKaAQs=",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
       "requires": {
         "react-is": "^16.3.2",
         "warning": "^4.0.0"
@@ -39653,7 +39653,7 @@
     "protoduck": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/protoduck/-/protoduck-5.0.1.tgz",
-      "integrity": "sha1-A8NlnKGAB7aaUP2Cp+vMUWJhFR8=",
+      "integrity": "sha512-WxoCeDCoCBY55BMvj4cAEjdVUFGRWed9ZxPlqTKYyw1nDDTQ4pqmnIMAGfJlg7Dx35uB/M+PHJPTmGOvaCaPTg==",
       "dev": true,
       "requires": {
         "genfun": "^5.0.0"
@@ -39865,7 +39865,7 @@
     "quick-lru": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz",
-      "integrity": "sha1-W4h48ROlgheEjGSCAmxz4bpXcn8=",
+      "integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==",
       "dev": true
     },
     "raf-schd": {
@@ -40048,7 +40048,7 @@
     "react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha1-TxonOv38jzSIqMUWv9p4+HI1I2I="
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
     "react-overlays": {
       "version": "5.1.1",
@@ -40156,7 +40156,7 @@
     "read-cmd-shim": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/read-cmd-shim/-/read-cmd-shim-1.0.5.tgz",
-      "integrity": "sha1-h+Q+ulAJi6WjLQzrWDq45DuWHBY=",
+      "integrity": "sha512-v5yCqQ/7okKoZZkBQUAfTsQ3sVJtXdNfbPnI5cceppoxEVLYA3k+VtV2omkeo8MS94JCy4fSiUwlRBAwCVRPUA==",
       "dev": true,
       "requires": {
         "graceful-fs": "^4.1.2"
@@ -40228,7 +40228,7 @@
     "read-package-tree": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/read-package-tree/-/read-package-tree-5.3.1.tgz",
-      "integrity": "sha1-oyy2TH8x64pvMe8G+c7fdAaP5jY=",
+      "integrity": "sha512-mLUDsD5JVtlZxjSlPPx1RETkNjjvQYuweKwNVt1Sn8kP5Jh44pvYuUHCp6xSVDZWbNxVxG5lyZJ921aJH61sTw==",
       "dev": true,
       "requires": {
         "read-package-json": "^2.0.0",
@@ -40417,7 +40417,7 @@
     "redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
-      "integrity": "sha1-5Ve3mYMWu1PJ8fVvpiY1LGljBZ8=",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
       "dev": true,
       "requires": {
         "indent-string": "^4.0.0",
@@ -42366,7 +42366,7 @@
     "solc": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/solc/-/solc-0.7.4.tgz",
-      "integrity": "sha1-nF7YGuBpLj5hTkfNW1ALD5SFuY0=",
+      "integrity": "sha512-IVLqAfUkJqgTS0JIgFPeC50ehUeBXu2eE+iU+rqb6UeOyf6w/BB/EsNcTSTpjtUti8BTG/sCd2qVhrWVYy7p0g==",
       "dev": true,
       "requires": {
         "command-exists": "^1.2.8",
@@ -42383,7 +42383,7 @@
         "commander": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/commander/-/commander-3.0.2.tgz",
-          "integrity": "sha1-aDfD+2d62ZM9HPukLdFNURfWs54=",
+          "integrity": "sha512-Gar0ASD4BDyKC4hl4DwHqDrmvjoxWKZigVnAbn5H1owvm4CxCPdb0HQDehwNYMJpla5+M2tPmPARzhtYuwpHow==",
           "dev": true
         },
         "fs-extra": {
@@ -42411,7 +42411,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         },
         "tmp": {
@@ -42592,7 +42592,7 @@
     "split": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz",
-      "integrity": "sha1-YFvZvjA6pZ+zX5Ip++oN3snqB9k=",
+      "integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==",
       "dev": true,
       "requires": {
         "through": "2"
@@ -43077,7 +43077,7 @@
     "strip-indent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
-      "integrity": "sha1-wy4c7pQLazQyx3G8LFS8znPNMAE=",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
       "dev": true,
       "requires": {
         "min-indent": "^1.0.0"
@@ -43091,7 +43091,7 @@
     "strong-log-transformer": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/strong-log-transformer/-/strong-log-transformer-2.1.0.tgz",
-      "integrity": "sha1-D17XjTJeBCGsb5D38Q5pHWrjrhA=",
+      "integrity": "sha512-B3Hgul+z0L9a236FAUC9iZsL+nVHgoCJnqCbN588DjYxvGXaXaaFbfmQ/JhvKjZwsOukuR72XbHv71Qkug0HxA==",
       "dev": true,
       "requires": {
         "duplexer": "^0.1.1",
@@ -43936,7 +43936,7 @@
         "make-dir": {
           "version": "1.3.0",
           "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
-          "integrity": "sha1-ecEDO4BRW9bSTsmTPoYMp17ifww=",
+          "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
           "dev": true,
           "requires": {
             "pify": "^3.0.0"
@@ -44188,7 +44188,7 @@
     "text-extensions": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/text-extensions/-/text-extensions-1.9.0.tgz",
-      "integrity": "sha1-GFPkX+45yUXOb2w2stZZtaq8KiY=",
+      "integrity": "sha512-wiBrwC1EhBelW12Zy26JeOUkQ5mRu+5o8rpsJk5+2t+Y5vE7e842qtZDQ2g1NpX/29HdyFeJ4nSIhI47ENSxlQ==",
       "dev": true
     },
     "text-hex": {
@@ -44205,7 +44205,7 @@
     "thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
-      "integrity": "sha1-iTLmhqQGYDigFt2eLKRq3Zg4qV8=",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
       "dev": true,
       "requires": {
         "any-promise": "^1.0.0"
@@ -45285,7 +45285,7 @@
     "universal-user-agent": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-4.0.1.tgz",
-      "integrity": "sha1-/Y1st3OmeacJ6WfvgoijH8wD5Vc=",
+      "integrity": "sha512-LnST3ebHwVL2aNe4mejI9IQh2HfZ1RLo8Io2HugSif8ekzD1TlWpHpColOB/eh8JHMLkGH3Akqf040I+4ylNxg==",
       "dev": true,
       "requires": {
         "os-name": "^3.1.0"
@@ -45924,7 +45924,7 @@
     "warning": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
-      "integrity": "sha1-Fungd+uKhtavfWSqHgX9hbRnjKM=",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
       "requires": {
         "loose-envify": "^1.0.0"
       }
@@ -47422,7 +47422,7 @@
     "write-json-file": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/write-json-file/-/write-json-file-3.2.0.tgz",
-      "integrity": "sha1-Zbvcns2KFFjhWVJ3DMut/P9f5io=",
+      "integrity": "sha512-3xZqT7Byc2uORAatYiP3DHUUAVEkNOswEWNs9H5KXiicRTvzYzYqKjYc4G7p+8pltvAw641lVByKVtMpf+4sYQ==",
       "dev": true,
       "requires": {
         "detect-indent": "^5.0.0",
@@ -47445,7 +47445,7 @@
         "write-file-atomic": {
           "version": "2.4.3",
           "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz",
-          "integrity": "sha1-H9Lprh3z51uNjDZ0Q8aS1MqB9IE=",
+          "integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.11",
@@ -47458,7 +47458,7 @@
     "write-pkg": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/write-pkg/-/write-pkg-3.2.0.tgz",
-      "integrity": "sha1-DheP6Xgg04mokovHlTXb5ows/yE=",
+      "integrity": "sha512-tX2ifZ0YqEFOF1wjRW2Pk93NLsj02+n1UP5RvO6rCs0K6R2g1padvf006cY74PQJKMGS2r42NK7FD0dG6Y6paw==",
       "dev": true,
       "requires": {
         "sort-keys": "^2.0.0",
@@ -47468,7 +47468,7 @@
         "make-dir": {
           "version": "1.3.0",
           "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
-          "integrity": "sha1-ecEDO4BRW9bSTsmTPoYMp17ifww=",
+          "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
           "dev": true,
           "requires": {
             "pify": "^3.0.0"
@@ -47492,7 +47492,7 @@
         "write-file-atomic": {
           "version": "2.4.3",
           "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz",
-          "integrity": "sha1-H9Lprh3z51uNjDZ0Q8aS1MqB9IE=",
+          "integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.11",

From e73b1b6c478157a553c873813cd51a3a0235785e Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Thu, 30 Dec 2021 17:53:10 +0100
Subject: [PATCH 040/168] fix tabs view

---
 apps/remix-ide/src/app.js                     |  15 +-
 .../src/app/components/main-panel.tsx         |   3 +-
 apps/remix-ide/src/app/components/panel.ts    |   2 +-
 apps/remix-ide/src/app/panels/layout.ts       |  53 ++-
 apps/remix-ide/src/app/panels/main-view.js    |   3 +
 apps/remix-ide/src/app/panels/tab-proxy.js    |  21 +-
 .../app/src/lib/remix-app/context/context.tsx |   2 +-
 .../app/src/lib/remix-app/remix-app.tsx       |   2 +-
 .../panel/src/lib/main/main-panel.tsx         |  92 ++--
 .../panel/src/lib/plugins/panel-plugin.tsx    |  27 +-
 libs/remix-ui/panel/src/lib/plugins/panel.css |  14 +
 package-lock.json                             | 438 +++++++++---------
 12 files changed, 392 insertions(+), 280 deletions(-)

diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index a00d47bb22..b7d6ea6d53 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -20,6 +20,7 @@ import { OffsetToLineColumnConverter, CompilerMetadata, CompilerArtefacts, Fetch
 import migrateFileSystem from './migrateFileSystem'
 import Registry from './app/state/registry'
 import { ConfigPlugin } from './app/plugins/config'
+import { Layout } from './app/panels/layout'
 
 const isElectron = require('is-electron')
 
@@ -161,8 +162,10 @@ class AppComponent {
     const contextualListener = new EditorContextListener()
 
     const configPlugin = new ConfigPlugin()
+    self.layout = new Layout()
 
     self.engine.register([
+      self.layout,
       configPlugin,
       blockchain,
       contentImport,
@@ -252,11 +255,11 @@ class AppComponent {
       filePanel.slitherHandle
     ])
 
-    self.panels = {
-      main: appPanel,
-      editor: editor,
-      terminal: terminal,
-      tabs: tabProxy
+    self.layout.panels = {
+      tabs: { plugin:tabProxy, active: true },
+      editor: { plugin:editor, active: true },
+      main: { plugin:appPanel, active: false },
+      terminal: { plugin:terminal, active: true },
     }
   }
 
@@ -275,7 +278,7 @@ class AppComponent {
       console.log('couldn\'t register iframe plugins', e.message)
     }
 
-    await self.appManager.activatePlugin(['editor'])
+    await self.appManager.activatePlugin(['layout', 'editor'])
     await self.appManager.activatePlugin(['theme', 'fileManager', 'compilerMetadata', 'compilerArtefacts', 'network', 'web3Provider', 'offsetToLineColumnConverter'])
     await self.appManager.activatePlugin(['mainPanel'])
     await self.appManager.activatePlugin(['mainPanel', 'menuicons', 'tabs'])
diff --git a/apps/remix-ide/src/app/components/main-panel.tsx b/apps/remix-ide/src/app/components/main-panel.tsx
index 41d5dba70d..b9d180f194 100644
--- a/apps/remix-ide/src/app/components/main-panel.tsx
+++ b/apps/remix-ide/src/app/components/main-panel.tsx
@@ -9,7 +9,7 @@ const profile = {
   displayName: 'Main Panel',
   description: '',
   version: packageJson.version,
-  methods: ['addView', 'removeView']
+  methods: ['addView', 'removeView', 'showContent']
 }
 
 export class MainPanel extends AbstractPanel {
@@ -18,6 +18,7 @@ export class MainPanel extends AbstractPanel {
       super(profile)
       this.element = document.createElement('div')
       this.element.setAttribute('data-id', 'mainPanelPluginsContainer')
+      this.element.setAttribute('style', 'height: 100%; width: 100%;')
       // this.config = config
     }
 
diff --git a/apps/remix-ide/src/app/components/panel.ts b/apps/remix-ide/src/app/components/panel.ts
index 3cfb65e371..6471577b55 100644
--- a/apps/remix-ide/src/app/components/panel.ts
+++ b/apps/remix-ide/src/app/components/panel.ts
@@ -33,7 +33,7 @@ export class AbstractPanel extends HostPlugin {
       profile: profile,
       view: view,
       active: false,
-      class: 'plugItIn'
+      class: 'plugItIn active'
     }
   }
 
diff --git a/apps/remix-ide/src/app/panels/layout.ts b/apps/remix-ide/src/app/panels/layout.ts
index 04174e70cf..9fe316e99b 100644
--- a/apps/remix-ide/src/app/panels/layout.ts
+++ b/apps/remix-ide/src/app/panels/layout.ts
@@ -1,15 +1,62 @@
 import { Plugin } from '@remixproject/engine'
 import { Profile } from '@remixproject/plugin-utils'
+import { EventEmitter } from 'events'
+import { TabProxy } from './tab-proxy'
 const EventManager = require('../../lib/events')
 
-const profile:Profile = {
+const profile: Profile = {
   name: 'layout',
   description: 'layout'
 }
+
+interface panelState {
+  active: boolean
+  plugin: Plugin
+}
+interface panels {
+  tabs: panelState
+  editor: panelState
+  main: panelState
+  terminal: panelState
+}
+
 export class Layout extends Plugin {
   event: any
-  constructor () {
+  panels: panels
+  constructor() {
     super(profile)
-    this.event = new EventManager()
+    this.event = new EventEmitter()
+  }
+
+  onActivation(): void {
+    console.log('layout plugin activated')
+    this.on('fileManager', 'currentFileChanged', () => {
+      console.log('layout plugin currentFileChanged')
+      this.panels.editor.active = true
+      this.panels.main.active = false
+      this.event.emit('change', null)
+    })
+    this.on('tabs', 'openFile', () => {
+      console.log('layout plugin currentFileChanged')
+      this.panels.editor.active = true
+      this.panels.main.active = false
+      this.event.emit('change', null)
+    })
+    this.on('tabs', 'switchApp', (name: string) => {
+      console.log('layout plugin switchApp', name)
+      this.call('mainPanel', 'showContent', name)
+      this.panels.editor.active = false
+      this.panels.main.active = true
+      this.event.emit('change', null)
+    })
+    this.on('tabs', 'closeApp', (name: string) => {
+      console.log('layout plugin closeapp', name)
+      this.panels.editor.active = true
+      this.panels.main.active = false
+      this.event.emit('change', null)
+    })
+    this.on('tabs', 'tabCountChanged', (count) => {
+      // if (!count) this.editor.displayEmptyReadOnlySession()
+    })
   }
 }
diff --git a/apps/remix-ide/src/app/panels/main-view.js b/apps/remix-ide/src/app/panels/main-view.js
index b8991bf781..142dc6f96c 100644
--- a/apps/remix-ide/src/app/panels/main-view.js
+++ b/apps/remix-ide/src/app/panels/main-view.js
@@ -126,6 +126,9 @@ export class MainView {
       self._view.editor.style.height = `${mainPanelHeight}px`
       self._view.mainPanel.style.height = `${mainPanelHeight}px`
       self._view.terminal.style.height = `${delta}px` // - menu bar height
+      self._view.editor.height = `${mainPanelHeight}px`
+      self._view.mainPanel.height = `${mainPanelHeight}px`
+      self._view.terminal.height = `${delta}px` // - menu bar height
       self.editor.resize((document.querySelector('#editorWrap') || {}).checked)
       self._components.terminal.scroll2bottom()
     }
diff --git a/apps/remix-ide/src/app/panels/tab-proxy.js b/apps/remix-ide/src/app/panels/tab-proxy.js
index 5b65254830..f7842242e9 100644
--- a/apps/remix-ide/src/app/panels/tab-proxy.js
+++ b/apps/remix-ide/src/app/panels/tab-proxy.js
@@ -22,6 +22,7 @@ export class TabProxy extends Plugin {
     this._view = {}
     this._handlers = {}
     this.loadedTabs = []
+    this.el = document.createElement('div')
   }
 
   onActivation () {
@@ -72,10 +73,12 @@ export class TabProxy extends Plugin {
         this.addTab(workspacePath, '', () => {
           this.fileManager.open(file)
           this.event.emit('openFile', file)
+          this.emit('openFile', file)
         },
         () => {
           this.fileManager.closeFile(file)
           this.event.emit('closeFile', file)
+          this.emit('closeFile', file)
         })
         this.tabsApi.activateTab(workspacePath)
       } else {
@@ -88,10 +91,12 @@ export class TabProxy extends Plugin {
         this.addTab(path, '', () => {
           this.fileManager.open(file)
           this.event.emit('openFile', file)
+          this.emit('openFile', file)
         },
         () => {
           this.fileManager.closeFile(file)
           this.event.emit('closeFile', file)
+          this.emit('closeFile', file)
         })
         this.tabsApi.activateTab(path)
       }
@@ -132,9 +137,9 @@ export class TabProxy extends Plugin {
         this.addTab(
           name,
           displayName,
-          () => this.event.emit('switchApp', name),
+          () => this.emit('switchApp', name),
           () => {
-            this.event.emit('closeApp', name)
+            this.emit('closeApp', name)
             this.call('manager', 'deactivatePlugin', name)
           },
           icon
@@ -149,7 +154,7 @@ export class TabProxy extends Plugin {
   }
 
   focus (name) {
-    this.event.emit('switchApp', name)
+    this.emit('switchApp', name)
     this.tabsApi.activateTab(name)
   }
 
@@ -199,11 +204,13 @@ export class TabProxy extends Plugin {
     () => {
       this.fileManager.closeFile(newName)
       this.event.emit('closeFile', newName)
+      this.emit('closeFile', newName)
     })
     this.removeTab(oldName)
   }
 
   addTab (name, title, switchTo, close, icon) {
+    console.log('add tab', name)
     if (this._handlers[name]) return this.renderComponent()
 
     var slash = name.split('/')
@@ -281,11 +288,12 @@ export class TabProxy extends Plugin {
   }
 
   renderComponent () {
+
     const onSelect = (index) => {
       if (this.loadedTabs[index]) {
         const name = this.loadedTabs[index].name
         if (this._handlers[name]) this._handlers[name].switchTo()
-        this.event.emit('tabCountChanged', this.loadedTabs.length)
+        this.emit('tabCountChanged', this.loadedTabs.length)
       }
     }
 
@@ -293,7 +301,7 @@ export class TabProxy extends Plugin {
       if (this.loadedTabs[index]) {
         const name = this.loadedTabs[index].name
         if (this._handlers[name]) this._handlers[name].close()
-        this.event.emit('tabCountChanged', this.loadedTabs.length)
+        this.emit('tabCountChanged', this.loadedTabs.length)
       }
     }
 
@@ -308,8 +316,7 @@ export class TabProxy extends Plugin {
   }
 
   renderTabsbar () {
-    this.el = document.createElement('div')
-    this.renderComponent()
+
     return this.el
   }
 }
diff --git a/libs/remix-ui/app/src/lib/remix-app/context/context.tsx b/libs/remix-ui/app/src/lib/remix-app/context/context.tsx
index f9f97a4555..158ee4c47a 100644
--- a/libs/remix-ui/app/src/lib/remix-app/context/context.tsx
+++ b/libs/remix-ui/app/src/lib/remix-app/context/context.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
 
-const AppContext = React.createContext(null)
+const AppContext = React.createContext<{layout: any, settings: any, showMatamo: boolean, appManager: any}>(null)
 
 export default AppContext
diff --git a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx b/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
index 374278d0cf..a63caae30e 100644
--- a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
+++ b/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
@@ -70,7 +70,7 @@ const RemixApp = (props: IRemixAppUi) => {
   }
 
   return (
-    <AppContext.Provider value={{ settings: props.app.settings, showMatamo: props.app.showMatamo, appManager: props.app.appManager, panels: props.app.panels }}>
+    <AppContext.Provider value={{ settings: props.app.settings, showMatamo: props.app.showMatamo, appManager: props.app.appManager, layout: props.app.layout }}>
       <RemixSplashScreen hide={appReady}></RemixSplashScreen>
       <AlertModal></AlertModal>
       <MatomoDialog hide={!appReady}></MatomoDialog>
diff --git a/libs/remix-ui/panel/src/lib/main/main-panel.tsx b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
index 66b0a1b35a..87a998eb27 100644
--- a/libs/remix-ui/panel/src/lib/main/main-panel.tsx
+++ b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
@@ -1,52 +1,78 @@
 import AppContext from 'libs/remix-ui/app/src/lib/remix-app/context/context'
-import { editor } from 'monaco-editor'
 import React, { useContext, useEffect, useRef, useState } from 'react' // eslint-disable-line
+import RemixUIPanelPlugin from '../plugins/panel-plugin'
 import { PluginRecord } from '../types'
 import './main-panel.css'
 
 const RemixUIMainPanel = () => {
   const appContext = useContext(AppContext)
-  const tabsRef = useRef<HTMLDivElement>(null)
+  const [plugins, setPlugins] = useState<PluginRecord[]>([])
+  const editorRef = useRef<HTMLDivElement>(null)
   const mainPanelRef = useRef<HTMLDivElement>(null)
+  const tabsRef = useRef<HTMLDivElement>(null)
   const terminalRef = useRef<HTMLDivElement>(null)
-  const editorRef = useRef<HTMLDivElement>(null)
 
-  useEffect(() => {
+  const refs = [tabsRef, editorRef, mainPanelRef, terminalRef]
+
+  const _adjustLayout = (delta: number) => {
+    const limitDown = 32
+    const containerHeight = window.innerHeight
+    const tmp = delta - limitDown
+    delta = tmp > 0 ? tmp : 0
+    let mainPanelHeight = containerHeight - delta
+    mainPanelHeight = mainPanelHeight < 0 ? 0 : mainPanelHeight
+    //self.editor.resize((document.querySelector('#editorWrap') || {}).checked)
+    editorRef.current?.setAttribute('style', `height: ${mainPanelHeight}px`)
+    terminalRef.current?.setAttribute('style', `height: ${delta}px`)
+    mainPanelRef.current?.setAttribute('style', `height: ${mainPanelHeight}px`)
+    // appContext.panels.editor.resize((document.querySelector('#editorWrap') || {}).checked)
+    appContext.layout.panels.terminal.plugin.scroll2bottom()
+  }
 
-    console.log(appContext)
-    if(appContext) {
+  const renderPanels = () => {
+    //console.log(appContext)
+    if (appContext) {
       console.log(appContext)
-      tabsRef.current.appendChild(appContext.panels.tabs.renderTabsbar())
-      editorRef.current.appendChild(appContext.panels.editor.render())
-      mainPanelRef.current.appendChild(appContext.panels.main.render())
-      terminalRef.current.appendChild(appContext.panels.terminal.render())
-      console.log(appContext.panels.main.render())
-
-      const plugins: PluginRecord[] = [
-        {
-          profile: appContext.panels.tabs.profile,
-          active: true,
-          view: appContext.panels.tabs.renderTabsbar()
-        }
-      ]
-    }
-  }, [])
+      const pluginPanels: PluginRecord[] = []
+      Object.values(appContext.layout.panels).map((panel: any) => {
+        pluginPanels.push({
+          profile: panel.plugin.profile,
+          active: panel.active,
+          view: panel.plugin.profile.name === 'tabs' ? panel.plugin.renderTabsbar(): panel.plugin.render(),
+          class: panel.plugin.profile.name
+        })
+      })
+      // console.log(pluginPanels)
+      setPlugins(pluginPanels)
 
-  const components = {
-    tabs: <div ref={tabsRef}></div>,
-    editor: <div ref={editorRef}></div>,
-    main: <div ref={mainPanelRef}></div>,
-    terminal: <div ref={terminalRef}></div>
+      appContext.layout.panels.terminal.plugin.event.register('resize', (delta: number) =>
+        _adjustLayout(delta)
+      )
+    }
   }
 
+  useEffect(() => {
+    renderPanels()
+    console.log(appContext.layout)
+    appContext.layout.event.on('change',() => {
+      console.log('change')
+      renderPanels()
+    })
+  }, [])
 
-
-  return (<div className='mainview'>
-    { components.tabs }
-    { components.editor }
-    { components.main }
-    { components.terminal }
-  </div>)
+  return (
+    <div className="mainview">
+      {Object.values(plugins).map((pluginRecord, i) => {
+        return (
+          <RemixUIPanelPlugin
+            ref={refs[i]}
+            key={pluginRecord.profile.name}
+            pluginRecord={pluginRecord}
+          />
+        )
+      })}
+    </div>
+  )
 }
 
 export default RemixUIMainPanel
diff --git a/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx b/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx
index 84f26f0a2e..69a50ea1f0 100644
--- a/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx
+++ b/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx
@@ -1,26 +1,37 @@
-import React, { useEffect, useRef, useState } from 'react' // eslint-disable-line
+import React, { forwardRef, useEffect, useRef, useState } from 'react' // eslint-disable-line
 import { PluginRecord } from '../types'
 import './panel.css'
 interface panelPLuginProps {
-    pluginRecord: PluginRecord
+  pluginRecord: PluginRecord
 }
 
-const RemixUIPanelPlugin = (props: panelPLuginProps) => {
-  const PanelRef = useRef<HTMLDivElement>(null)
+const RemixUIPanelPlugin = (props: panelPLuginProps, panelRef: any) => {
+  const localRef = useRef<HTMLDivElement>(null)
   const [view, setView] = useState<JSX.Element | HTMLDivElement>()
   useEffect(() => {
-    if (PanelRef.current) {
+    console.log(panelRef)
+    const ref:any = panelRef? panelRef : localRef
+    if (ref.current) {
       if (props.pluginRecord.view) {
         if (React.isValidElement(props.pluginRecord.view)) {
           setView(props.pluginRecord.view)
         } else {
-          PanelRef.current.appendChild(props.pluginRecord.view)
+          ref.current.appendChild(props.pluginRecord.view)
         }
       }
     }
   }, [])
 
-  return <div className={props.pluginRecord.active ? `${props.pluginRecord.class} active` : 'd-none'} ref={PanelRef}>{view}</div>
+  return (
+    <div
+      className={
+        props.pluginRecord.active ? `${props.pluginRecord.class}` : 'd-none'
+      }
+      ref={panelRef || localRef}
+    >
+      {view}
+    </div>
+  )
 }
 
-export default RemixUIPanelPlugin
+export default forwardRef(RemixUIPanelPlugin)
diff --git a/libs/remix-ui/panel/src/lib/plugins/panel.css b/libs/remix-ui/panel/src/lib/plugins/panel.css
index 54bef7aa84..99da054827 100644
--- a/libs/remix-ui/panel/src/lib/plugins/panel.css
+++ b/libs/remix-ui/panel/src/lib/plugins/panel.css
@@ -79,4 +79,18 @@ iframe {
 .pluginsContainer {
     height: 100%;
     overflow-y: hidden;
+}
+
+#editorView {
+    height: 100%;
+    width: 100%;
+    border: 0;
+    display: block;
+}
+
+#mainPanel {
+    height: 100%;
+    width: 100%;
+    border: 0;
+    display: block;
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index a05d1a99a7..f0cd9ca6f2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3320,7 +3320,7 @@
     "@evocateur/libnpmaccess": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@evocateur/libnpmaccess/-/libnpmaccess-3.1.2.tgz",
-      "integrity": "sha512-KSCAHwNWro0CF2ukxufCitT9K5LjL/KuMmNzSu8wuwN2rjyKHD8+cmOsiybK+W5hdnwc5M1SmRlVCaMHQo+3rg==",
+      "integrity": "sha1-7Pf2zmsATp+UKwmNkiAL5KSxyEU=",
       "dev": true,
       "requires": {
         "@evocateur/npm-registry-fetch": "^4.0.0",
@@ -3333,13 +3333,13 @@
         "aproba": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
-          "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
+          "integrity": "sha1-UlILiuW1aSFbNU78DKo/4eRaitw=",
           "dev": true
         },
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -3351,7 +3351,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
           "dev": true
         }
       }
@@ -3359,7 +3359,7 @@
     "@evocateur/libnpmpublish": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@evocateur/libnpmpublish/-/libnpmpublish-1.2.2.tgz",
-      "integrity": "sha512-MJrrk9ct1FeY9zRlyeoyMieBjGDG9ihyyD9/Ft6MMrTxql9NyoEx2hw9casTIP4CdqEVu+3nQ2nXxoJ8RCXyFg==",
+      "integrity": "sha1-Vd8J0tyhNq+6nIjHWconIZjbnxo=",
       "dev": true,
       "requires": {
         "@evocateur/npm-registry-fetch": "^4.0.0",
@@ -3376,13 +3376,13 @@
         "aproba": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
-          "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
+          "integrity": "sha1-UlILiuW1aSFbNU78DKo/4eRaitw=",
           "dev": true
         },
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -3394,7 +3394,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
           "dev": true
         },
         "ssri": {
@@ -3411,7 +3411,7 @@
     "@evocateur/npm-registry-fetch": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@evocateur/npm-registry-fetch/-/npm-registry-fetch-4.0.0.tgz",
-      "integrity": "sha512-k1WGfKRQyhJpIr+P17O5vLIo2ko1PFLKwoetatdduUSt/aQ4J2sJrJwwatdI5Z3SiYk/mRH9S3JpdmMFd/IK4g==",
+      "integrity": "sha1-jEw4dm2NMtMgD8sKg/BktXNl7WY=",
       "dev": true,
       "requires": {
         "JSONStream": "^1.3.4",
@@ -3435,7 +3435,7 @@
         "agentkeepalive": {
           "version": "3.5.2",
           "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-3.5.2.tgz",
-          "integrity": "sha512-e0L/HNe6qkQ7H19kTlRRqUibEAwDK5AFk6y3PtMsuut2VAH6+Q4xZml1tNDJD7kSAyqmbG/K08K5WEJYtUrSlQ==",
+          "integrity": "sha1-oROSTdP6JKC8O3gQjEUMKr7gD2c=",
           "dev": true,
           "requires": {
             "humanize-ms": "^1.2.1"
@@ -3482,7 +3482,7 @@
         "http-cache-semantics": {
           "version": "3.8.1",
           "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz",
-          "integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==",
+          "integrity": "sha1-ObDhat2bYFvwqe89nar0hDtMrNI=",
           "dev": true
         },
         "http-proxy-agent": {
@@ -3498,7 +3498,7 @@
         "https-proxy-agent": {
           "version": "2.2.4",
           "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz",
-          "integrity": "sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==",
+          "integrity": "sha1-TuenN6vZJniik9mzShr00NCMeHs=",
           "dev": true,
           "requires": {
             "agent-base": "^4.3.0",
@@ -3508,7 +3508,7 @@
         "make-fetch-happen": {
           "version": "5.0.2",
           "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-5.0.2.tgz",
-          "integrity": "sha512-07JHC0r1ykIoruKO8ifMXu+xEU8qOXDFETylktdug6vJDACnP+HKevOu3PXyNPzFyTSlz8vrBYlBO1JZRe8Cag==",
+          "integrity": "sha1-qoOHEE8mh+3KAchofuRQE9AtGb0=",
           "dev": true,
           "requires": {
             "agentkeepalive": "^3.4.1",
@@ -3533,7 +3533,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -3561,7 +3561,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
           "dev": true
         },
         "socks": {
@@ -3609,7 +3609,7 @@
     "@evocateur/pacote": {
       "version": "9.6.5",
       "resolved": "https://registry.npmjs.org/@evocateur/pacote/-/pacote-9.6.5.tgz",
-      "integrity": "sha512-EI552lf0aG2nOV8NnZpTxNo2PcXKPmDbF9K8eCBFQdIZwHNGN/mi815fxtmUMa2wTa1yndotICIDt/V0vpEx2w==",
+      "integrity": "sha1-M94yuiELbxfCDrq01JfvxnVfSuU=",
       "dev": true,
       "requires": {
         "@evocateur/npm-registry-fetch": "^4.0.0",
@@ -3655,7 +3655,7 @@
         "agentkeepalive": {
           "version": "3.5.2",
           "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-3.5.2.tgz",
-          "integrity": "sha512-e0L/HNe6qkQ7H19kTlRRqUibEAwDK5AFk6y3PtMsuut2VAH6+Q4xZml1tNDJD7kSAyqmbG/K08K5WEJYtUrSlQ==",
+          "integrity": "sha1-oROSTdP6JKC8O3gQjEUMKr7gD2c=",
           "dev": true,
           "requires": {
             "humanize-ms": "^1.2.1"
@@ -3702,7 +3702,7 @@
         "http-cache-semantics": {
           "version": "3.8.1",
           "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz",
-          "integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==",
+          "integrity": "sha1-ObDhat2bYFvwqe89nar0hDtMrNI=",
           "dev": true
         },
         "http-proxy-agent": {
@@ -3718,7 +3718,7 @@
         "https-proxy-agent": {
           "version": "2.2.4",
           "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz",
-          "integrity": "sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==",
+          "integrity": "sha1-TuenN6vZJniik9mzShr00NCMeHs=",
           "dev": true,
           "requires": {
             "agent-base": "^4.3.0",
@@ -3728,7 +3728,7 @@
         "make-fetch-happen": {
           "version": "5.0.2",
           "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-5.0.2.tgz",
-          "integrity": "sha512-07JHC0r1ykIoruKO8ifMXu+xEU8qOXDFETylktdug6vJDACnP+HKevOu3PXyNPzFyTSlz8vrBYlBO1JZRe8Cag==",
+          "integrity": "sha1-qoOHEE8mh+3KAchofuRQE9AtGb0=",
           "dev": true,
           "requires": {
             "agentkeepalive": "^3.4.1",
@@ -3753,7 +3753,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -3765,7 +3765,7 @@
         "npm-packlist": {
           "version": "1.4.8",
           "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz",
-          "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==",
+          "integrity": "sha1-Vu5swTW5+YrT1Rwcldoiu7my7z4=",
           "dev": true,
           "requires": {
             "ignore-walk": "^3.0.1",
@@ -3776,7 +3776,7 @@
         "npm-pick-manifest": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/npm-pick-manifest/-/npm-pick-manifest-3.0.2.tgz",
-          "integrity": "sha512-wNprTNg+X5nf+tDi+hbjdHhM4bX+mKqv6XmPh7B5eG+QY9VARfQPfCEH013H5GqfNj6ee8Ij2fg8yk0mzps1Vw==",
+          "integrity": "sha1-9Nnl/UviFT5fTl+be+jcQZqZq7c=",
           "dev": true,
           "requires": {
             "figgy-pudding": "^3.5.1",
@@ -3803,7 +3803,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
           "dev": true
         },
         "socks": {
@@ -5620,7 +5620,7 @@
     "@lerna/add": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/add/-/add-3.21.0.tgz",
-      "integrity": "sha512-vhUXXF6SpufBE1EkNEXwz1VLW03f177G9uMOFMQkp6OJ30/PWg4Ekifuz9/3YfgB2/GH8Tu4Lk3O51P2Hskg/A==",
+      "integrity": "sha1-JwB73nHMewopaas8LwrkFXi0V3s=",
       "dev": true,
       "requires": {
         "@evocateur/pacote": "^9.6.3",
@@ -5638,7 +5638,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -5650,7 +5650,7 @@
             "semver": {
               "version": "5.7.1",
               "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+              "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
               "dev": true
             }
           }
@@ -5666,7 +5666,7 @@
     "@lerna/bootstrap": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/bootstrap/-/bootstrap-3.21.0.tgz",
-      "integrity": "sha512-mtNHlXpmvJn6JTu0KcuTTPl2jLsDNud0QacV/h++qsaKbhAaJr/FElNZ5s7MwZFUM3XaDmvWzHKaszeBMHIbBw==",
+      "integrity": "sha1-vNG2Ub5bCXCyDY+uBMhkVIEjrtY=",
       "dev": true,
       "requires": {
         "@lerna/command": "3.21.0",
@@ -5697,7 +5697,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -5709,7 +5709,7 @@
             "semver": {
               "version": "5.7.1",
               "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+              "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
               "dev": true
             }
           }
@@ -5725,7 +5725,7 @@
     "@lerna/changed": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/changed/-/changed-3.21.0.tgz",
-      "integrity": "sha512-hzqoyf8MSHVjZp0gfJ7G8jaz+++mgXYiNs9iViQGA8JlN/dnWLI5sWDptEH3/B30Izo+fdVz0S0s7ydVE3pWIw==",
+      "integrity": "sha1-EI4V9nm/4HevUA9YJIxjTxBE6gs=",
       "dev": true,
       "requires": {
         "@lerna/collect-updates": "3.20.0",
@@ -5737,7 +5737,7 @@
     "@lerna/check-working-tree": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/check-working-tree/-/check-working-tree-3.16.5.tgz",
-      "integrity": "sha512-xWjVBcuhvB8+UmCSb5tKVLB5OuzSpw96WEhS2uz6hkWVa/Euh1A0/HJwn2cemyK47wUrCQXtczBUiqnq9yX5VQ==",
+      "integrity": "sha1-tPiuYbtFI1Yd+5+PjYdN1Gu0S6o=",
       "dev": true,
       "requires": {
         "@lerna/collect-uncommitted": "3.16.5",
@@ -5748,7 +5748,7 @@
     "@lerna/child-process": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/child-process/-/child-process-3.16.5.tgz",
-      "integrity": "sha512-vdcI7mzei9ERRV4oO8Y1LHBZ3A5+ampRKg1wq5nutLsUA4mEBN6H7JqjWOMY9xZemv6+kATm2ofjJ3lW5TszQg==",
+      "integrity": "sha1-OPo8GAZKpKwHVK2AEUd2p7NqabI=",
       "dev": true,
       "requires": {
         "chalk": "^2.3.1",
@@ -5759,7 +5759,7 @@
     "@lerna/clean": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/clean/-/clean-3.21.0.tgz",
-      "integrity": "sha512-b/L9l+MDgE/7oGbrav6rG8RTQvRiZLO1zTcG17zgJAAuhlsPxJExMlh2DFwJEVi2les70vMhHfST3Ue1IMMjpg==",
+      "integrity": "sha1-wLRrUwDMPa4s2jvsFLgDCC2jhW0=",
       "dev": true,
       "requires": {
         "@lerna/command": "3.21.0",
@@ -5783,7 +5783,7 @@
     "@lerna/cli": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/cli/-/cli-3.18.5.tgz",
-      "integrity": "sha512-erkbxkj9jfc89vVs/jBLY/fM0I80oLmJkFUV3Q3wk9J3miYhP14zgVEBsPZY68IZlEjT6T3Xlq2xO1AVaatHsA==",
+      "integrity": "sha1-yQxGFUL801ttWwFaKQ+w2/tB0kI=",
       "dev": true,
       "requires": {
         "@lerna/global-options": "3.13.0",
@@ -5795,13 +5795,13 @@
         "ansi-regex": {
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "integrity": "sha1-i5+PCM8ay4Q3Vqg5yox+MWjFGZc=",
           "dev": true
         },
         "cliui": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
-          "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
+          "integrity": "sha1-3u/P2y6AB4SqNPRvoI4GhRx7u8U=",
           "dev": true,
           "requires": {
             "string-width": "^3.1.0",
@@ -5818,7 +5818,7 @@
         "find-up": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "integrity": "sha1-SRafHXmTQwZG2mHsxa41XCHJe3M=",
           "dev": true,
           "requires": {
             "locate-path": "^3.0.0"
@@ -5833,7 +5833,7 @@
         "locate-path": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "integrity": "sha1-2+w7OrdZdYBxtY/ln8QYca8hQA4=",
           "dev": true,
           "requires": {
             "p-locate": "^3.0.0",
@@ -5843,7 +5843,7 @@
         "p-limit": {
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+          "integrity": "sha1-PdM8ZHohT9//2DWTPrCG2g3CHbE=",
           "dev": true,
           "requires": {
             "p-try": "^2.0.0"
@@ -5852,7 +5852,7 @@
         "p-locate": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "integrity": "sha1-Mi1poFwCZLJZl9n0DNiokasAZKQ=",
           "dev": true,
           "requires": {
             "p-limit": "^2.0.0"
@@ -5861,13 +5861,13 @@
         "p-try": {
           "version": "2.2.0",
           "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-          "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+          "integrity": "sha1-yyhoVA4xPWHeWPr741zpAE1VQOY=",
           "dev": true
         },
         "string-width": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "integrity": "sha1-InZ74htirxCBV0MG9prFG2IgOWE=",
           "dev": true,
           "requires": {
             "emoji-regex": "^7.0.1",
@@ -5878,7 +5878,7 @@
         "strip-ansi": {
           "version": "5.2.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "integrity": "sha1-jJpTb+tq/JYr36WxBKUJHBrZwK4=",
           "dev": true,
           "requires": {
             "ansi-regex": "^4.1.0"
@@ -5887,7 +5887,7 @@
         "wrap-ansi": {
           "version": "5.1.0",
           "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
-          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+          "integrity": "sha1-H9H2cjXVttD+54EFYAG/tpTAOwk=",
           "dev": true,
           "requires": {
             "ansi-styles": "^3.2.0",
@@ -5898,7 +5898,7 @@
         "yargs": {
           "version": "14.2.3",
           "resolved": "https://registry.npmjs.org/yargs/-/yargs-14.2.3.tgz",
-          "integrity": "sha512-ZbotRWhF+lkjijC/VhmOT9wSgyBQ7+zr13+YLkhfsSiTriYsMzkTUFP18pFhWwBeMa5gUc1MzbhrO6/VB7c9Xg==",
+          "integrity": "sha1-Ghw+3O0a+yov6jNgS8bR2NaIpBQ=",
           "dev": true,
           "requires": {
             "cliui": "^5.0.0",
@@ -5929,7 +5929,7 @@
     "@lerna/collect-uncommitted": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/collect-uncommitted/-/collect-uncommitted-3.16.5.tgz",
-      "integrity": "sha512-ZgqnGwpDZiWyzIQVZtQaj9tRizsL4dUOhuOStWgTAw1EMe47cvAY2kL709DzxFhjr6JpJSjXV5rZEAeU3VE0Hg==",
+      "integrity": "sha1-pJTWGqwxzceuxLvlLJZVAnQTLmM=",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -5941,7 +5941,7 @@
     "@lerna/collect-updates": {
       "version": "3.20.0",
       "resolved": "https://registry.npmjs.org/@lerna/collect-updates/-/collect-updates-3.20.0.tgz",
-      "integrity": "sha512-qBTVT5g4fupVhBFuY4nI/3FSJtQVcDh7/gEPOpRxoXB/yCSnT38MFHXWl+y4einLciCjt/+0x6/4AG80fjay2Q==",
+      "integrity": "sha1-YvnXa6IaJbfZ+/McAt6IdEpWS9E=",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -5954,7 +5954,7 @@
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
+          "integrity": "sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q=",
           "dev": true
         }
       }
@@ -5962,7 +5962,7 @@
     "@lerna/command": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/command/-/command-3.21.0.tgz",
-      "integrity": "sha512-T2bu6R8R3KkH5YoCKdutKv123iUgUbW8efVjdGCDnCMthAQzoentOJfDeodBwn0P2OqCl3ohsiNVtSn9h78fyQ==",
+      "integrity": "sha1-miODdZ3HtwDaz6iiKy86bhkBIfc=",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -5980,7 +5980,7 @@
     "@lerna/conventional-commits": {
       "version": "3.22.0",
       "resolved": "https://registry.npmjs.org/@lerna/conventional-commits/-/conventional-commits-3.22.0.tgz",
-      "integrity": "sha512-z4ZZk1e8Mhz7+IS8NxHr64wyklHctCJyWpJKEZZPJiLFJ8yKto/x38O80R10pIzC0rr8Sy/OsjSH4bl0TbbgqA==",
+      "integrity": "sha1-J5j0iB7i70V72uAnq30L8K9vHgk=",
       "dev": true,
       "requires": {
         "@lerna/validation-error": "3.13.0",
@@ -6019,7 +6019,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6031,7 +6031,7 @@
             "semver": {
               "version": "5.7.1",
               "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+              "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
               "dev": true
             }
           }
@@ -6041,7 +6041,7 @@
     "@lerna/create": {
       "version": "3.22.0",
       "resolved": "https://registry.npmjs.org/@lerna/create/-/create-3.22.0.tgz",
-      "integrity": "sha512-MdiQQzCcB4E9fBF1TyMOaAEz9lUjIHp1Ju9H7f3lXze5JK6Fl5NYkouAvsLgY6YSIhXMY8AHW2zzXeBDY4yWkw==",
+      "integrity": "sha1-1rvQN8PcW0Jf5fbRuBcFfCePdhk=",
       "dev": true,
       "requires": {
         "@evocateur/pacote": "^9.6.3",
@@ -6067,7 +6067,7 @@
         "@nodelib/fs.stat": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
-          "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
+          "integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=",
           "dev": true
         },
         "array-union": {
@@ -6091,7 +6091,7 @@
         "fast-glob": {
           "version": "2.2.7",
           "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",
-          "integrity": "sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==",
+          "integrity": "sha1-aVOFfDr6R1//ku5gFdUtpwpM050=",
           "dev": true,
           "requires": {
             "@mrmlnc/readdir-enhanced": "^2.2.1",
@@ -6116,7 +6116,7 @@
         "globby": {
           "version": "9.2.0",
           "resolved": "https://registry.npmjs.org/globby/-/globby-9.2.0.tgz",
-          "integrity": "sha512-ollPHROa5mcxDEkwg6bPt3QbEf4pDQSNtd6JPL1YvOvAo/7/0VAm9TccUeoTmarjPw4pfUthSCqcyfNB1I3ZSg==",
+          "integrity": "sha1-/QKacGxwPSm90XD0tts6P3p8tj0=",
           "dev": true,
           "requires": {
             "@types/glob": "^7.1.1",
@@ -6132,7 +6132,7 @@
         "ignore": {
           "version": "4.0.6",
           "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
-          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
+          "integrity": "sha1-dQ49tYYgh7RzfrrIIH/9HvJ7Jfw=",
           "dev": true
         },
         "jsonfile": {
@@ -6147,7 +6147,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6159,7 +6159,7 @@
             "semver": {
               "version": "5.7.1",
               "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+              "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
               "dev": true
             }
           }
@@ -6167,7 +6167,7 @@
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
+          "integrity": "sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q=",
           "dev": true
         },
         "tr46": {
@@ -6201,7 +6201,7 @@
     "@lerna/create-symlink": {
       "version": "3.16.2",
       "resolved": "https://registry.npmjs.org/@lerna/create-symlink/-/create-symlink-3.16.2.tgz",
-      "integrity": "sha512-pzXIJp6av15P325sgiIRpsPXLFmkisLhMBCy4764d+7yjf2bzrJ4gkWVMhsv4AdF0NN3OyZ5jjzzTtLNqfR+Jw==",
+      "integrity": "sha1-QSy45Zpy9afZRj5ORyGtIHAUmWc=",
       "dev": true,
       "requires": {
         "@zkochan/cmd-shim": "^3.1.0",
@@ -6234,7 +6234,7 @@
     "@lerna/describe-ref": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/describe-ref/-/describe-ref-3.16.5.tgz",
-      "integrity": "sha512-c01+4gUF0saOOtDBzbLMFOTJDHTKbDFNErEY6q6i9QaXuzy9LNN62z+Hw4acAAZuJQhrVWncVathcmkkjvSVGw==",
+      "integrity": "sha1-ozjCWq7YN9PccLinLER8XGY0asA=",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6244,7 +6244,7 @@
     "@lerna/diff": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/diff/-/diff-3.21.0.tgz",
-      "integrity": "sha512-5viTR33QV3S7O+bjruo1SaR40m7F2aUHJaDAC7fL9Ca6xji+aw1KFkpCtVlISS0G8vikUREGMJh+c/VMSc8Usw==",
+      "integrity": "sha1-5t8Ni5kWFn/1pJ/LAqwGQkKApo0=",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6256,7 +6256,7 @@
     "@lerna/exec": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/exec/-/exec-3.21.0.tgz",
-      "integrity": "sha512-iLvDBrIE6rpdd4GIKTY9mkXyhwsJ2RvQdB9ZU+/NhR3okXfqKc6py/24tV111jqpXTtZUW6HNydT4dMao2hi1Q==",
+      "integrity": "sha1-F/B1M4k8uRihe0G8xWbcQ3AW2yY=",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6279,7 +6279,7 @@
     "@lerna/filter-options": {
       "version": "3.20.0",
       "resolved": "https://registry.npmjs.org/@lerna/filter-options/-/filter-options-3.20.0.tgz",
-      "integrity": "sha512-bmcHtvxn7SIl/R9gpiNMVG7yjx7WyT0HSGw34YVZ9B+3xF/83N3r5Rgtjh4hheLZ+Q91Or0Jyu5O3Nr+AwZe2g==",
+      "integrity": "sha1-Dw9dWkeDhW7s5CBHCMyQLLyK9Zs=",
       "dev": true,
       "requires": {
         "@lerna/collect-updates": "3.20.0",
@@ -6292,7 +6292,7 @@
     "@lerna/filter-packages": {
       "version": "3.18.0",
       "resolved": "https://registry.npmjs.org/@lerna/filter-packages/-/filter-packages-3.18.0.tgz",
-      "integrity": "sha512-6/0pMM04bCHNATIOkouuYmPg6KH3VkPCIgTfQmdkPJTullERyEQfNUKikrefjxo1vHOoCACDpy65JYyKiAbdwQ==",
+      "integrity": "sha1-ano3bShSCNsDqClYz7gXLhebTnA=",
       "dev": true,
       "requires": {
         "@lerna/validation-error": "3.13.0",
@@ -6303,7 +6303,7 @@
     "@lerna/get-npm-exec-opts": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/get-npm-exec-opts/-/get-npm-exec-opts-3.13.0.tgz",
-      "integrity": "sha512-Y0xWL0rg3boVyJk6An/vurKzubyJKtrxYv2sj4bB8Mc5zZ3tqtv0ccbOkmkXKqbzvNNF7VeUt1OJ3DRgtC/QZw==",
+      "integrity": "sha1-0bVSywCIGZ/D5+Em+RTjmgjfnqU=",
       "dev": true,
       "requires": {
         "npmlog": "^4.1.2"
@@ -6312,7 +6312,7 @@
     "@lerna/get-packed": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@lerna/get-packed/-/get-packed-3.16.0.tgz",
-      "integrity": "sha512-AjsFiaJzo1GCPnJUJZiTW6J1EihrPkc2y3nMu6m3uWFxoleklsSCyImumzVZJssxMi3CPpztj8LmADLedl9kXw==",
+      "integrity": "sha1-GzFrcG3O6Gx7qlXlCwh5WUR4Uv8=",
       "dev": true,
       "requires": {
         "fs-extra": "^8.1.0",
@@ -6354,7 +6354,7 @@
     "@lerna/github-client": {
       "version": "3.22.0",
       "resolved": "https://registry.npmjs.org/@lerna/github-client/-/github-client-3.22.0.tgz",
-      "integrity": "sha512-O/GwPW+Gzr3Eb5bk+nTzTJ3uv+jh5jGho9BOqKlajXaOkMYGBELEAqV5+uARNGWZFvYAiF4PgqHb6aCUu7XdXg==",
+      "integrity": "sha1-XYFqpPdnR+1zauZP+WK48Vw1TZU=",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6367,7 +6367,7 @@
     "@lerna/gitlab-client": {
       "version": "3.15.0",
       "resolved": "https://registry.npmjs.org/@lerna/gitlab-client/-/gitlab-client-3.15.0.tgz",
-      "integrity": "sha512-OsBvRSejHXUBMgwWQqNoioB8sgzL/Pf1pOUhHKtkiMl6aAWjklaaq5HPMvTIsZPfS6DJ9L5OK2GGZuooP/5c8Q==",
+      "integrity": "sha1-kfTsjGl7WsV/fyW9UP5lnSSqlqY=",
       "dev": true,
       "requires": {
         "node-fetch": "^2.5.0",
@@ -6406,13 +6406,13 @@
     "@lerna/global-options": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/global-options/-/global-options-3.13.0.tgz",
-      "integrity": "sha512-SlZvh1gVRRzYLVluz9fryY1nJpZ0FHDGB66U9tFfvnnxmueckRQxLopn3tXj3NU1kc3QANT2I5BsQkOqZ4TEFQ==",
+      "integrity": "sha1-IXZiKQ2watnPLEnY4xAO4o6uuuE=",
       "dev": true
     },
     "@lerna/has-npm-version": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/has-npm-version/-/has-npm-version-3.16.5.tgz",
-      "integrity": "sha512-WL7LycR9bkftyqbYop5rEGJ9sRFIV55tSGmbN1HLrF9idwOCD7CLrT64t235t3t4O5gehDnwKI5h2U3oxTrF8Q==",
+      "integrity": "sha1-q4OVbyEdiSPqav6bl5s4zHOxUyY=",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6422,7 +6422,7 @@
     "@lerna/import": {
       "version": "3.22.0",
       "resolved": "https://registry.npmjs.org/@lerna/import/-/import-3.22.0.tgz",
-      "integrity": "sha512-uWOlexasM5XR6tXi4YehODtH9Y3OZrFht3mGUFFT3OIl2s+V85xIGFfqFGMTipMPAGb2oF1UBLL48kR43hRsOg==",
+      "integrity": "sha1-Gl8DlPOOI8T2QqEj5eFRfnDQaNI=",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6460,7 +6460,7 @@
     "@lerna/info": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/info/-/info-3.21.0.tgz",
-      "integrity": "sha512-0XDqGYVBgWxUquFaIptW2bYSIu6jOs1BtkvRTWDDhw4zyEdp6q4eaMvqdSap1CG+7wM5jeLCi6z94wS0AuiuwA==",
+      "integrity": "sha1-dmlrZ2/bDzXUjIPGPB4yu143gU8=",
       "dev": true,
       "requires": {
         "@lerna/command": "3.21.0",
@@ -6471,7 +6471,7 @@
     "@lerna/init": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/init/-/init-3.21.0.tgz",
-      "integrity": "sha512-6CM0z+EFUkFfurwdJCR+LQQF6MqHbYDCBPyhu/d086LRf58GtYZYj49J8mKG9ktayp/TOIxL/pKKjgLD8QBPOg==",
+      "integrity": "sha1-HoEJNNyL9OU4bAMQQYgdO0CWqlw=",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6512,7 +6512,7 @@
     "@lerna/link": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/link/-/link-3.21.0.tgz",
-      "integrity": "sha512-tGu9GxrX7Ivs+Wl3w1+jrLi1nQ36kNI32dcOssij6bg0oZ2M2MDEFI9UF2gmoypTaN9uO5TSsjCFS7aR79HbdQ==",
+      "integrity": "sha1-i+aP8MzuEEsXS1u9YGMCwvBunZs=",
       "dev": true,
       "requires": {
         "@lerna/command": "3.21.0",
@@ -6531,7 +6531,7 @@
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
+          "integrity": "sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q=",
           "dev": true
         }
       }
@@ -6539,7 +6539,7 @@
     "@lerna/list": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/list/-/list-3.21.0.tgz",
-      "integrity": "sha512-KehRjE83B1VaAbRRkRy6jLX1Cin8ltsrQ7FHf2bhwhRHK0S54YuA6LOoBnY/NtA8bHDX/Z+G5sMY78X30NS9tg==",
+      "integrity": "sha1-Qvdvr6Vt6hO2keyMqxODJpHWHaI=",
       "dev": true,
       "requires": {
         "@lerna/command": "3.21.0",
@@ -6551,7 +6551,7 @@
     "@lerna/listable": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/listable/-/listable-3.18.5.tgz",
-      "integrity": "sha512-Sdr3pVyaEv5A7ZkGGYR7zN+tTl2iDcinryBPvtuv20VJrXBE8wYcOks1edBTcOWsPjCE/rMP4bo1pseyk3UTsg==",
+      "integrity": "sha1-6CeYQFte2PxRhDyO8eeg5Jc4iho=",
       "dev": true,
       "requires": {
         "@lerna/query-graph": "3.18.5",
@@ -6562,7 +6562,7 @@
     "@lerna/log-packed": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@lerna/log-packed/-/log-packed-3.16.0.tgz",
-      "integrity": "sha512-Fp+McSNBV/P2mnLUYTaSlG8GSmpXM7krKWcllqElGxvAqv6chk2K3c2k80MeVB4WvJ9tRjUUf+i7HUTiQ9/ckQ==",
+      "integrity": "sha1-+DmRBB7neySVY04URwtCJZ/SvBY=",
       "dev": true,
       "requires": {
         "byte-size": "^5.0.1",
@@ -6574,7 +6574,7 @@
     "@lerna/npm-conf": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@lerna/npm-conf/-/npm-conf-3.16.0.tgz",
-      "integrity": "sha512-HbO3DUrTkCAn2iQ9+FF/eisDpWY5POQAOF1m7q//CZjdC2HSW3UYbKEGsSisFxSfaF9Z4jtrV+F/wX6qWs3CuA==",
+      "integrity": "sha1-HBComuL2wu6WliVXc4aFMA03aCc=",
       "dev": true,
       "requires": {
         "config-chain": "^1.1.11",
@@ -6584,7 +6584,7 @@
     "@lerna/npm-dist-tag": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/npm-dist-tag/-/npm-dist-tag-3.18.5.tgz",
-      "integrity": "sha512-xw0HDoIG6HreVsJND9/dGls1c+lf6vhu7yJoo56Sz5bvncTloYGLUppIfDHQr4ZvmPCK8rsh0euCVh2giPxzKQ==",
+      "integrity": "sha1-nvmrt8EEB3sx9vqyLMc7MU1UrFU=",
       "dev": true,
       "requires": {
         "@evocateur/npm-registry-fetch": "^4.0.0",
@@ -6597,7 +6597,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6609,7 +6609,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
           "dev": true
         }
       }
@@ -6617,7 +6617,7 @@
     "@lerna/npm-install": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/npm-install/-/npm-install-3.16.5.tgz",
-      "integrity": "sha512-hfiKk8Eku6rB9uApqsalHHTHY+mOrrHeWEs+gtg7+meQZMTS3kzv4oVp5cBZigndQr3knTLjwthT/FX4KvseFg==",
+      "integrity": "sha1-1r/cFvgShdpmUVrkeSTW4njWN9M=",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6652,7 +6652,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6664,7 +6664,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
           "dev": true
         }
       }
@@ -6672,7 +6672,7 @@
     "@lerna/npm-publish": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/npm-publish/-/npm-publish-3.18.5.tgz",
-      "integrity": "sha512-3etLT9+2L8JAx5F8uf7qp6iAtOLSMj+ZYWY6oUgozPi/uLqU0/gsMsEXh3F0+YVW33q0M61RpduBoAlOOZnaTg==",
+      "integrity": "sha1-JA5AOZWf2YFrScWwdCHhG1ywAK8=",
       "dev": true,
       "requires": {
         "@evocateur/libnpmpublish": "^1.2.2",
@@ -6709,7 +6709,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6721,7 +6721,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
           "dev": true
         }
       }
@@ -6729,7 +6729,7 @@
     "@lerna/npm-run-script": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/npm-run-script/-/npm-run-script-3.16.5.tgz",
-      "integrity": "sha512-1asRi+LjmVn3pMjEdpqKJZFT/3ZNpb+VVeJMwrJaV/3DivdNg7XlPK9LTrORuKU4PSvhdEZvJmSlxCKyDpiXsQ==",
+      "integrity": "sha1-nC7IJFOibAtG7cC7fBWBbIIfXBU=",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6740,7 +6740,7 @@
     "@lerna/otplease": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/otplease/-/otplease-3.18.5.tgz",
-      "integrity": "sha512-S+SldXAbcXTEDhzdxYLU0ZBKuYyURP/ND2/dK6IpKgLxQYh/z4ScljPDMyKymmEvgiEJmBsPZAAPfmNPEzxjog==",
+      "integrity": "sha1-t3uOdgtAq62fdljZiPPqd9T9AjE=",
       "dev": true,
       "requires": {
         "@lerna/prompt": "3.18.5",
@@ -6750,7 +6750,7 @@
     "@lerna/output": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/output/-/output-3.13.0.tgz",
-      "integrity": "sha512-7ZnQ9nvUDu/WD+bNsypmPG5MwZBwu86iRoiW6C1WBuXXDxM5cnIAC1m2WxHeFnjyMrYlRXM9PzOQ9VDD+C15Rg==",
+      "integrity": "sha1-Pe18yQiyephyIopjDZUK7a56SYk=",
       "dev": true,
       "requires": {
         "npmlog": "^4.1.2"
@@ -6759,7 +6759,7 @@
     "@lerna/pack-directory": {
       "version": "3.16.4",
       "resolved": "https://registry.npmjs.org/@lerna/pack-directory/-/pack-directory-3.16.4.tgz",
-      "integrity": "sha512-uxSF0HZeGyKaaVHz5FroDY9A5NDDiCibrbYR6+khmrhZtY0Bgn6hWq8Gswl9iIlymA+VzCbshWIMX4o2O8C8ng==",
+      "integrity": "sha1-Pq5fkb31rP4DhFEO1T+t3EwHRpM=",
       "dev": true,
       "requires": {
         "@lerna/get-packed": "3.16.0",
@@ -6775,7 +6775,7 @@
         "npm-packlist": {
           "version": "1.4.8",
           "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz",
-          "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==",
+          "integrity": "sha1-Vu5swTW5+YrT1Rwcldoiu7my7z4=",
           "dev": true,
           "requires": {
             "ignore-walk": "^3.0.1",
@@ -6788,7 +6788,7 @@
     "@lerna/package": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@lerna/package/-/package-3.16.0.tgz",
-      "integrity": "sha512-2lHBWpaxcBoiNVbtyLtPUuTYEaB/Z+eEqRS9duxpZs6D+mTTZMNy6/5vpEVSCBmzvdYpyqhqaYjjSLvjjr5Riw==",
+      "integrity": "sha1-fgpG5Gl+2LipwU1Zx/iQ4NOLoTw=",
       "dev": true,
       "requires": {
         "load-json-file": "^5.3.0",
@@ -6799,7 +6799,7 @@
         "load-json-file": {
           "version": "5.3.0",
           "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-5.3.0.tgz",
-          "integrity": "sha512-cJGP40Jc/VXUsp8/OrnyKyTZ1y6v/dphm3bioS+RrKXjK2BB6wHUd6JptZEFDGgGahMT+InnZO5i1Ei9mpC8Bw==",
+          "integrity": "sha1-TTweAfocA+p4pgrHr5MsnOU0A/M=",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.15",
@@ -6812,7 +6812,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6824,13 +6824,13 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
           "dev": true
         },
         "type-fest": {
           "version": "0.3.1",
           "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.3.1.tgz",
-          "integrity": "sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==",
+          "integrity": "sha1-Y9ANIE4FlHT+Xht8ARESu9HcKeE=",
           "dev": true
         }
       }
@@ -6838,7 +6838,7 @@
     "@lerna/package-graph": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/package-graph/-/package-graph-3.18.5.tgz",
-      "integrity": "sha512-8QDrR9T+dBegjeLr+n9WZTVxUYUhIUjUgZ0gvNxUBN8S1WB9r6H5Yk56/MVaB64tA3oGAN9IIxX6w0WvTfFudA==",
+      "integrity": "sha1-x0Di6jV40FnlUWM+lQaQgxuUH2s=",
       "dev": true,
       "requires": {
         "@lerna/prerelease-id-from-version": "3.16.0",
@@ -6851,7 +6851,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6863,7 +6863,7 @@
             "semver": {
               "version": "5.7.1",
               "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+              "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
               "dev": true
             }
           }
@@ -6873,7 +6873,7 @@
     "@lerna/prerelease-id-from-version": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@lerna/prerelease-id-from-version/-/prerelease-id-from-version-3.16.0.tgz",
-      "integrity": "sha512-qZyeUyrE59uOK8rKdGn7jQz+9uOpAaF/3hbslJVFL1NqF9ELDTqjCPXivuejMX/lN4OgD6BugTO4cR7UTq/sZA==",
+      "integrity": "sha1-skv6eJ9eG6q5FNewi6rpt719g6E=",
       "dev": true,
       "requires": {
         "semver": "^6.2.0"
@@ -6882,7 +6882,7 @@
     "@lerna/profiler": {
       "version": "3.20.0",
       "resolved": "https://registry.npmjs.org/@lerna/profiler/-/profiler-3.20.0.tgz",
-      "integrity": "sha512-bh8hKxAlm6yu8WEOvbLENm42i2v9SsR4WbrCWSbsmOElx3foRnMlYk7NkGECa+U5c3K4C6GeBbwgqs54PP7Ljg==",
+      "integrity": "sha1-D23CNvTqj56l81jGcDMFpPMq0FE=",
       "dev": true,
       "requires": {
         "figgy-pudding": "^3.5.1",
@@ -6916,7 +6916,7 @@
     "@lerna/project": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/project/-/project-3.21.0.tgz",
-      "integrity": "sha512-xT1mrpET2BF11CY32uypV2GPtPVm6Hgtha7D81GQP9iAitk9EccrdNjYGt5UBYASl4CIDXBRxwmTTVGfrCx82A==",
+      "integrity": "sha1-XXhNLRDFYaAPIDILzbBAmXwQUC0=",
       "dev": true,
       "requires": {
         "@lerna/package": "3.16.0",
@@ -6936,7 +6936,7 @@
         "@nodelib/fs.stat": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
-          "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
+          "integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=",
           "dev": true
         },
         "array-union": {
@@ -6951,7 +6951,7 @@
         "cosmiconfig": {
           "version": "5.2.1",
           "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
-          "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
+          "integrity": "sha1-BA9yaAnFked6F8CjYmykW08Wixo=",
           "dev": true,
           "requires": {
             "import-fresh": "^2.0.0",
@@ -6972,7 +6972,7 @@
         "fast-glob": {
           "version": "2.2.7",
           "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",
-          "integrity": "sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==",
+          "integrity": "sha1-aVOFfDr6R1//ku5gFdUtpwpM050=",
           "dev": true,
           "requires": {
             "@mrmlnc/readdir-enhanced": "^2.2.1",
@@ -7018,7 +7018,7 @@
         "globby": {
           "version": "9.2.0",
           "resolved": "https://registry.npmjs.org/globby/-/globby-9.2.0.tgz",
-          "integrity": "sha512-ollPHROa5mcxDEkwg6bPt3QbEf4pDQSNtd6JPL1YvOvAo/7/0VAm9TccUeoTmarjPw4pfUthSCqcyfNB1I3ZSg==",
+          "integrity": "sha1-/QKacGxwPSm90XD0tts6P3p8tj0=",
           "dev": true,
           "requires": {
             "@types/glob": "^7.1.1",
@@ -7034,7 +7034,7 @@
         "ignore": {
           "version": "4.0.6",
           "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
-          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
+          "integrity": "sha1-dQ49tYYgh7RzfrrIIH/9HvJ7Jfw=",
           "dev": true
         },
         "import-fresh": {
@@ -7058,7 +7058,7 @@
         "load-json-file": {
           "version": "5.3.0",
           "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-5.3.0.tgz",
-          "integrity": "sha512-cJGP40Jc/VXUsp8/OrnyKyTZ1y6v/dphm3bioS+RrKXjK2BB6wHUd6JptZEFDGgGahMT+InnZO5i1Ei9mpC8Bw==",
+          "integrity": "sha1-TTweAfocA+p4pgrHr5MsnOU0A/M=",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.15",
@@ -7077,13 +7077,13 @@
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
+          "integrity": "sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q=",
           "dev": true
         },
         "type-fest": {
           "version": "0.3.1",
           "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.3.1.tgz",
-          "integrity": "sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==",
+          "integrity": "sha1-Y9ANIE4FlHT+Xht8ARESu9HcKeE=",
           "dev": true
         }
       }
@@ -7091,7 +7091,7 @@
     "@lerna/prompt": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/prompt/-/prompt-3.18.5.tgz",
-      "integrity": "sha512-rkKj4nm1twSbBEb69+Em/2jAERK8htUuV8/xSjN0NPC+6UjzAwY52/x9n5cfmpa9lyKf/uItp7chCI7eDmNTKQ==",
+      "integrity": "sha1-YozVRfIliH0GBJGrld+JnPxSGKE=",
       "dev": true,
       "requires": {
         "inquirer": "^6.2.0",
@@ -7214,7 +7214,7 @@
     "@lerna/publish": {
       "version": "3.22.1",
       "resolved": "https://registry.npmjs.org/@lerna/publish/-/publish-3.22.1.tgz",
-      "integrity": "sha512-PG9CM9HUYDreb1FbJwFg90TCBQooGjj+n/pb3gw/eH5mEDq0p8wKdLFe0qkiqUkm/Ub5C8DbVFertIo0Vd0zcw==",
+      "integrity": "sha1-tPfOP7oemvsovkofPYgiImm6lRk=",
       "dev": true,
       "requires": {
         "@evocateur/libnpmaccess": "^3.1.2",
@@ -7272,7 +7272,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -7284,7 +7284,7 @@
             "semver": {
               "version": "5.7.1",
               "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+              "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
               "dev": true
             }
           }
@@ -7300,7 +7300,7 @@
     "@lerna/pulse-till-done": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/pulse-till-done/-/pulse-till-done-3.13.0.tgz",
-      "integrity": "sha512-1SOHpy7ZNTPulzIbargrgaJX387csN7cF1cLOGZiJQA6VqnS5eWs2CIrG8i8wmaUavj2QlQ5oEbRMVVXSsGrzA==",
+      "integrity": "sha1-yOnOW6+vENkwpn1+0My12Vj+ARA=",
       "dev": true,
       "requires": {
         "npmlog": "^4.1.2"
@@ -7309,7 +7309,7 @@
     "@lerna/query-graph": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/query-graph/-/query-graph-3.18.5.tgz",
-      "integrity": "sha512-50Lf4uuMpMWvJ306be3oQDHrWV42nai9gbIVByPBYJuVW8dT8O8pA3EzitNYBUdLL9/qEVbrR0ry1HD7EXwtRA==",
+      "integrity": "sha1-30gwu1FVJzADvzXo3aHDLQknvYY=",
       "dev": true,
       "requires": {
         "@lerna/package-graph": "3.18.5",
@@ -7319,7 +7319,7 @@
     "@lerna/resolve-symlink": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@lerna/resolve-symlink/-/resolve-symlink-3.16.0.tgz",
-      "integrity": "sha512-Ibj5e7njVHNJ/NOqT4HlEgPFPtPLWsO7iu59AM5bJDcAJcR96mLZ7KGVIsS2tvaO7akMEJvt2P+ErwCdloG3jQ==",
+      "integrity": "sha1-N/xwlfq9vPMXwm63Tg0L3o79I4Y=",
       "dev": true,
       "requires": {
         "fs-extra": "^8.1.0",
@@ -7352,7 +7352,7 @@
     "@lerna/rimraf-dir": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/rimraf-dir/-/rimraf-dir-3.16.5.tgz",
-      "integrity": "sha512-bQlKmO0pXUsXoF8lOLknhyQjOZsCc0bosQDoX4lujBXSWxHVTg1VxURtWf2lUjz/ACsJVDfvHZbDm8kyBk5okA==",
+      "integrity": "sha1-BDFqtf/SkJZXqvOI6lAsuMLyCgk=",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -7364,7 +7364,7 @@
     "@lerna/run": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/run/-/run-3.21.0.tgz",
-      "integrity": "sha512-fJF68rT3veh+hkToFsBmUJ9MHc9yGXA7LSDvhziAojzOb0AI/jBDp6cEcDQyJ7dbnplba2Lj02IH61QUf9oW0Q==",
+      "integrity": "sha1-KjXshJeeTW5CR0/hSNMuXeHKyJE=",
       "dev": true,
       "requires": {
         "@lerna/command": "3.21.0",
@@ -7389,7 +7389,7 @@
     "@lerna/run-lifecycle": {
       "version": "3.16.2",
       "resolved": "https://registry.npmjs.org/@lerna/run-lifecycle/-/run-lifecycle-3.16.2.tgz",
-      "integrity": "sha512-RqFoznE8rDpyyF0rOJy3+KjZCeTkO8y/OB9orPauR7G2xQ7PTdCpgo7EO6ZNdz3Al+k1BydClZz/j78gNCmL2A==",
+      "integrity": "sha1-Z7KI+OqWTbnqT7H7x3FdW7sLzgA=",
       "dev": true,
       "requires": {
         "@lerna/npm-conf": "3.16.0",
@@ -7401,7 +7401,7 @@
     "@lerna/run-topologically": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/run-topologically/-/run-topologically-3.18.5.tgz",
-      "integrity": "sha512-6N1I+6wf4hLOnPW+XDZqwufyIQ6gqoPfHZFkfWlvTQ+Ue7CuF8qIVQ1Eddw5HKQMkxqN10thKOFfq/9NQZ4NUg==",
+      "integrity": "sha1-PNY52iDpZ9dnLLiNsPdWuS8v38M=",
       "dev": true,
       "requires": {
         "@lerna/query-graph": "3.18.5",
@@ -7412,13 +7412,13 @@
         "eventemitter3": {
           "version": "3.1.2",
           "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz",
-          "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==",
+          "integrity": "sha1-LT1I+cNGaY/Og6hdfWZOmFNd9uc=",
           "dev": true
         },
         "p-queue": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/p-queue/-/p-queue-4.0.0.tgz",
-          "integrity": "sha512-3cRXXn3/O0o3+eVmUroJPSj/esxoEFIm0ZOno/T+NzG/VZgPOqQ8WKmlNqubSEpZmCIngEy34unkHGg83ZIBmg==",
+          "integrity": "sha1-7Q7uh5iSftbywvX1t3/bIGGl00Y=",
           "dev": true,
           "requires": {
             "eventemitter3": "^3.1.0"
@@ -7429,7 +7429,7 @@
     "@lerna/symlink-binary": {
       "version": "3.17.0",
       "resolved": "https://registry.npmjs.org/@lerna/symlink-binary/-/symlink-binary-3.17.0.tgz",
-      "integrity": "sha512-RLpy9UY6+3nT5J+5jkM5MZyMmjNHxZIZvXLV+Q3MXrf7Eaa1hNqyynyj4RO95fxbS+EZc4XVSk25DGFQbcRNSQ==",
+      "integrity": "sha1-j4AxswmGOBSIPT8AmHf4Ljiu9Fo=",
       "dev": true,
       "requires": {
         "@lerna/create-symlink": "3.16.2",
@@ -7469,7 +7469,7 @@
     "@lerna/symlink-dependencies": {
       "version": "3.17.0",
       "resolved": "https://registry.npmjs.org/@lerna/symlink-dependencies/-/symlink-dependencies-3.17.0.tgz",
-      "integrity": "sha512-KmjU5YT1bpt6coOmdFueTJ7DFJL4H1w5eF8yAQ2zsGNTtZ+i5SGFBWpb9AQaw168dydc3s4eu0W0Sirda+F59Q==",
+      "integrity": "sha1-SNY2DphYZaDlbNi1GzCKUmMIeEo=",
       "dev": true,
       "requires": {
         "@lerna/create-symlink": "3.16.2",
@@ -7512,13 +7512,13 @@
     "@lerna/timer": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/timer/-/timer-3.13.0.tgz",
-      "integrity": "sha512-RHWrDl8U4XNPqY5MQHkToWS9jHPnkLZEt5VD+uunCKTfzlxGnRCr3/zVr8VGy/uENMYpVP3wJa4RKGY6M0vkRw==",
+      "integrity": "sha1-vNCQRVHbFuCDZNbBjl4hYPyHB4E=",
       "dev": true
     },
     "@lerna/validation-error": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/validation-error/-/validation-error-3.13.0.tgz",
-      "integrity": "sha512-SiJP75nwB8GhgwLKQfdkSnDufAaCbkZWJqEDlKOUPUvVOplRGnfL+BPQZH5nvq2BYSRXsksXWZ4UHVnQZI/HYA==",
+      "integrity": "sha1-yGuPB8WrlTn3db2KVJdukm83WcM=",
       "dev": true,
       "requires": {
         "npmlog": "^4.1.2"
@@ -7527,7 +7527,7 @@
     "@lerna/version": {
       "version": "3.22.1",
       "resolved": "https://registry.npmjs.org/@lerna/version/-/version-3.22.1.tgz",
-      "integrity": "sha512-PSGt/K1hVqreAFoi3zjD0VEDupQ2WZVlVIwesrE5GbrL2BjXowjCsTDPqblahDUPy0hp6h7E2kG855yLTp62+g==",
+      "integrity": "sha1-mAWpJHpH7mLWuBvZ+l+3KLJLWeI=",
       "dev": true,
       "requires": {
         "@lerna/check-working-tree": "3.16.5",
@@ -7561,7 +7561,7 @@
         "load-json-file": {
           "version": "5.3.0",
           "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-5.3.0.tgz",
-          "integrity": "sha512-cJGP40Jc/VXUsp8/OrnyKyTZ1y6v/dphm3bioS+RrKXjK2BB6wHUd6JptZEFDGgGahMT+InnZO5i1Ei9mpC8Bw==",
+          "integrity": "sha1-TTweAfocA+p4pgrHr5MsnOU0A/M=",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.15",
@@ -7580,13 +7580,13 @@
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
+          "integrity": "sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q=",
           "dev": true
         },
         "type-fest": {
           "version": "0.3.1",
           "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.3.1.tgz",
-          "integrity": "sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==",
+          "integrity": "sha1-Y9ANIE4FlHT+Xht8ARESu9HcKeE=",
           "dev": true
         }
       }
@@ -7594,7 +7594,7 @@
     "@lerna/write-log-file": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/write-log-file/-/write-log-file-3.13.0.tgz",
-      "integrity": "sha512-RibeMnDPvlL8bFYW5C8cs4mbI3AHfQef73tnJCQ/SgrXZHehmHnsyWUiE7qDQCAo+B1RfTapvSyFF69iPj326A==",
+      "integrity": "sha1-t42eTPwTSai+ZNkTJMTIGZ6CKiY=",
       "dev": true,
       "requires": {
         "npmlog": "^4.1.2",
@@ -7604,7 +7604,7 @@
         "write-file-atomic": {
           "version": "2.4.3",
           "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz",
-          "integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==",
+          "integrity": "sha1-H9Lprh3z51uNjDZ0Q8aS1MqB9IE=",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.11",
@@ -7634,7 +7634,7 @@
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
-      "integrity": "sha512-bPHp6Ji8b41szTOcaP63VlnbbO5Ny6dwAATtY6JTjh5N2OLrb5Qk/Th5cRkRQhkWCt+EJsYrNB0MiL+Gpn6e3g==",
+      "integrity": "sha1-UkryQNGjYFJ7cwR17PoTRKpUDd4=",
       "dev": true,
       "requires": {
         "call-me-maybe": "^1.0.1",
@@ -9610,13 +9610,13 @@
     "@octokit/plugin-enterprise-rest": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/@octokit/plugin-enterprise-rest/-/plugin-enterprise-rest-6.0.1.tgz",
-      "integrity": "sha512-93uGjlhUD+iNg1iWhUENAtJata6w5nE+V4urXOAlIXdco6xNZtUSfYY8dzp3Udy74aqO/B5UZL80x/YMa5PKRw==",
+      "integrity": "sha1-4HiWc5YY2rjafUB3xlgAN3X5VDc=",
       "dev": true
     },
     "@octokit/plugin-paginate-rest": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-1.1.2.tgz",
-      "integrity": "sha512-jbsSoi5Q1pj63sC16XIUboklNw+8tL9VOnJsWycWYR78TKss5PVpIPb1TUUcMQ+bBh7cY579cVAWmf5qG+dw+Q==",
+      "integrity": "sha1-AEFwrPjCvlNauiZyeGfWkve0iPw=",
       "dev": true,
       "requires": {
         "@octokit/types": "^2.0.1"
@@ -9625,7 +9625,7 @@
         "@octokit/types": {
           "version": "2.16.2",
           "resolved": "https://registry.npmjs.org/@octokit/types/-/types-2.16.2.tgz",
-          "integrity": "sha512-O75k56TYvJ8WpAakWwYRN8Bgu60KrmX0z1KqFp1kNiFNkgW+JW+9EBKZ+S33PU6SLvbihqd+3drvPxKK68Ee8Q==",
+          "integrity": "sha1-TF+No8b+zz2hgRrvZ4/aA+2sNdI=",
           "dev": true,
           "requires": {
             "@types/node": ">= 8"
@@ -9642,7 +9642,7 @@
     "@octokit/plugin-rest-endpoint-methods": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-2.4.0.tgz",
-      "integrity": "sha512-EZi/AWhtkdfAYi01obpX0DF7U6b1VRr30QNQ5xSFPITMdLSfhcBqjamE3F+sKcxPbD7eZuMHu3Qkk2V+JGxBDQ==",
+      "integrity": "sha1-Mojs9UgfaMSU3QYC/BVAeln69h4=",
       "dev": true,
       "requires": {
         "@octokit/types": "^2.0.1",
@@ -9652,7 +9652,7 @@
         "@octokit/types": {
           "version": "2.16.2",
           "resolved": "https://registry.npmjs.org/@octokit/types/-/types-2.16.2.tgz",
-          "integrity": "sha512-O75k56TYvJ8WpAakWwYRN8Bgu60KrmX0z1KqFp1kNiFNkgW+JW+9EBKZ+S33PU6SLvbihqd+3drvPxKK68Ee8Q==",
+          "integrity": "sha1-TF+No8b+zz2hgRrvZ4/aA+2sNdI=",
           "dev": true,
           "requires": {
             "@types/node": ">= 8"
@@ -9702,7 +9702,7 @@
     "@octokit/request-error": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-1.2.1.tgz",
-      "integrity": "sha512-+6yDyk1EES6WK+l3viRDElw96MvwfJxCt45GvmjDUKWjYIb3PJZQkq3i46TwGwoPD4h8NmTrENmtyA1FwbmhRA==",
+      "integrity": "sha1-7eBxTHc/MjR1dsJWSdwBOuazGAE=",
       "dev": true,
       "requires": {
         "@octokit/types": "^2.0.0",
@@ -9713,7 +9713,7 @@
         "@octokit/types": {
           "version": "2.16.2",
           "resolved": "https://registry.npmjs.org/@octokit/types/-/types-2.16.2.tgz",
-          "integrity": "sha512-O75k56TYvJ8WpAakWwYRN8Bgu60KrmX0z1KqFp1kNiFNkgW+JW+9EBKZ+S33PU6SLvbihqd+3drvPxKK68Ee8Q==",
+          "integrity": "sha1-TF+No8b+zz2hgRrvZ4/aA+2sNdI=",
           "dev": true,
           "requires": {
             "@types/node": ">= 8"
@@ -9724,7 +9724,7 @@
     "@octokit/rest": {
       "version": "16.43.2",
       "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-16.43.2.tgz",
-      "integrity": "sha512-ngDBevLbBTFfrHZeiS7SAMAZ6ssuVmXuya+F/7RaVvlysgGa1JKJkKWY+jV6TCJYcW0OALfJ7nTIGXcBXzycfQ==",
+      "integrity": "sha1-xTQm8eHRBE3ulnAj4yecUJk92Rs=",
       "dev": true,
       "requires": {
         "@octokit/auth-token": "^2.4.0",
@@ -9867,7 +9867,7 @@
     "@restart/context": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
-      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
+      "integrity": "sha1-qZ2HwpmjTCi9hbtInLB7/SMUnAI="
     },
     "@restart/hooks": {
       "version": "0.3.27",
@@ -11321,7 +11321,7 @@
     "@zkochan/cmd-shim": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@zkochan/cmd-shim/-/cmd-shim-3.1.0.tgz",
-      "integrity": "sha512-o8l0+x7C7sMZU3v9GuJIAU10qQLtwR1dtRQIOmlNMtyaqhmpXOzx1HWiYoWfmmf9HHZoAkXpc9TM9PQYF9d4Jg==",
+      "integrity": "sha1-KrjtgfW7VFKoXyV1jrm4aBmC/S4=",
       "dev": true,
       "requires": {
         "is-windows": "^1.0.0",
@@ -11775,7 +11775,7 @@
     "array-differ": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-2.1.0.tgz",
-      "integrity": "sha512-KbUpJgx909ZscOc/7CLATBFam7P1Z1QRQInvgT0UztM9Q72aGKCunKASAl7WNW0tnPmPyEMeMhdsfWhfmW037w==",
+      "integrity": "sha1-S5wcPxS5BnVwgpJXaeirkE9IAbE=",
       "dev": true
     },
     "array-each": {
@@ -12376,7 +12376,7 @@
     "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==",
+      "integrity": "sha1-IGCTrDgKS3jEQEoFsydzkSePgPs=",
       "dev": true,
       "requires": {
         "@jest/transform": "^25.1.0",
@@ -12422,7 +12422,7 @@
         "chalk": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "integrity": "sha1-P3PCv1JlkfV0zEksUeJFY0n4ROQ=",
           "dev": true,
           "requires": {
             "ansi-styles": "^4.1.0",
@@ -12432,7 +12432,7 @@
         "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==",
+          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
           "dev": true,
           "requires": {
             "color-name": "~1.1.4"
@@ -12441,19 +12441,19 @@
         "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==",
+          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
           "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==",
+          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
           "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==",
+          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
           "dev": true,
           "requires": {
             "has-flag": "^4.0.0"
@@ -14448,7 +14448,7 @@
     "byte-size": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/byte-size/-/byte-size-5.0.1.tgz",
-      "integrity": "sha512-/XuKeqWocKsYa/cBY1YbSJSWWqTi4cFgr9S6OyM7PBaPbr9zvNGwWP33vt0uqGhwDdN+y3yhbXVILEUpnwEWGw==",
+      "integrity": "sha1-S2UQOaXs2Wdn5xo9ftOA5IvtQZE=",
       "dev": true
     },
     "bytes": {
@@ -14683,7 +14683,7 @@
     "camelcase-keys": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
-      "integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==",
+      "integrity": "sha1-XnVda6UaoiPsfT1S8ld4IQ+dw8A=",
       "dev": true,
       "requires": {
         "camelcase": "^5.3.1",
@@ -15283,7 +15283,7 @@
     "command-exists": {
       "version": "1.2.9",
       "resolved": "https://registry.npmjs.org/command-exists/-/command-exists-1.2.9.tgz",
-      "integrity": "sha512-LTQ/SGc+s0Xc0Fu5WaKnR0YiygZkm9eKFvyS+fRsU7/ZWFF8ykFM6Pc9aCVf1+xasOOZpO3BAVgVrKvsqKHV7w==",
+      "integrity": "sha1-xQclrzgIyKsCYP1gsB+/oluVT2k=",
       "dev": true
     },
     "commander": {
@@ -15593,7 +15593,7 @@
     "conventional-changelog-core": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/conventional-changelog-core/-/conventional-changelog-core-3.2.3.tgz",
-      "integrity": "sha512-LMMX1JlxPIq/Ez5aYAYS5CpuwbOk6QFp8O4HLAcZxe3vxoCtABkhfjetk8IYdRB9CDQGwJFLR3Dr55Za6XKgUQ==",
+      "integrity": "sha1-sxQQhW9DHIRwhqfctNLKGEp9iPs=",
       "dev": true,
       "requires": {
         "conventional-changelog-writer": "^4.0.6",
@@ -15635,7 +15635,7 @@
         "through2": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.2.tgz",
-          "integrity": "sha512-enaDQ4MUyP2W6ZyT6EsMzqBPZaM/avg8iuo+l2d3QCs0J+6RaqkHV/2/lOwDTueBHeJ/2LG9lrLW3d5rWPucuQ==",
+          "integrity": "sha1-mfiJMc/HYex2eLQdXXM2tbage/Q=",
           "dev": true,
           "requires": {
             "inherits": "^2.0.4",
@@ -15647,7 +15647,7 @@
     "conventional-changelog-preset-loader": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/conventional-changelog-preset-loader/-/conventional-changelog-preset-loader-2.3.4.tgz",
-      "integrity": "sha512-GEKRWkrSAZeTq5+YjUZOYxdHq+ci4dNwHvpaBC3+ENalzFWuCWa9EZXSuZBpkr72sMdKB+1fyDV4takK1Lf58g==",
+      "integrity": "sha1-FKhVq7/9WQJ/1gJYHx802YYupEw=",
       "dev": true
     },
     "conventional-changelog-writer": {
@@ -15717,7 +15717,7 @@
     "conventional-recommended-bump": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/conventional-recommended-bump/-/conventional-recommended-bump-5.0.1.tgz",
-      "integrity": "sha512-RVdt0elRcCxL90IrNP0fYCpq1uGt2MALko0eyeQ+zQuDVWtMGAy9ng6yYn3kax42lCj9+XBxQ8ZN6S9bdKxDhQ==",
+      "integrity": "sha1-WvY5A5R7bgied3Z2ActZLKuxBro=",
       "dev": true,
       "requires": {
         "concat-stream": "^2.0.0",
@@ -15750,7 +15750,7 @@
         "concat-stream": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
-          "integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==",
+          "integrity": "sha1-QUz1r3kKSMYKub5FJ9VtXkETPLE=",
           "dev": true,
           "requires": {
             "buffer-from": "^1.0.0",
@@ -15774,7 +15774,7 @@
         "meow": {
           "version": "4.0.1",
           "resolved": "https://registry.npmjs.org/meow/-/meow-4.0.1.tgz",
-          "integrity": "sha512-xcSBHD5Z86zaOc+781KrupuHAzeGXSLtiAOmBsiLDiPSaYSB6hdew2ng9EBAnZ62jagG9MHAOdxpDi/lWBFJ/A==",
+          "integrity": "sha1-1IWY9vSxRy81v2MXqVlFrONH+XU=",
           "dev": true,
           "requires": {
             "camelcase-keys": "^4.0.0",
@@ -15791,7 +15791,7 @@
         "minimist-options": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-3.0.2.tgz",
-          "integrity": "sha512-FyBrT/d0d4+uiZRbqznPXqw3IpZZG3gl3wKWiX784FycUKVwBt0uLBFkQrtE4tZOrgo78nZp2jnKz3L65T5LdQ==",
+          "integrity": "sha1-+6TIGRM54T7PTWG+sD8HAQPz2VQ=",
           "dev": true,
           "requires": {
             "arrify": "^1.0.1",
@@ -16566,7 +16566,7 @@
     "dateformat": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz",
-      "integrity": "sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==",
+      "integrity": "sha1-puN0maTZqc+F71hyBE1ikByYia4=",
       "dev": true
     },
     "deasync": {
@@ -16936,7 +16936,7 @@
     "deprecation": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz",
-      "integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==",
+      "integrity": "sha1-Y2jL20Cr8zc7UlrIfkomDDpwCRk=",
       "dev": true
     },
     "deps-sort": {
@@ -18842,7 +18842,7 @@
     "express-ws": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/express-ws/-/express-ws-4.0.0.tgz",
-      "integrity": "sha512-KEyUw8AwRET2iFjFsI1EJQrJ/fHeGiJtgpYgEWG3yDv4l/To/m3a2GaYfeGyB3lsWdvbesjF5XCMx+SVBgAAYw==",
+      "integrity": "sha1-2r2NyXRRZBiQKkH+bjDtlJtNNsQ=",
       "requires": {
         "ws": "^5.2.0"
       },
@@ -20818,7 +20818,7 @@
     "genfun": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/genfun/-/genfun-5.0.0.tgz",
-      "integrity": "sha512-KGDOARWVga7+rnB3z9Sd2Letx515owfk0hSxHGuqjANb1M+x2bGZGqHLiozPsYMdM2OubeMni/Hpwmjq6qIUhA==",
+      "integrity": "sha1-ndlxCgaQClxKW/V6yl2k5S/nZTc=",
       "dev": true
     },
     "gensync": {
@@ -21045,7 +21045,7 @@
     "get-port": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/get-port/-/get-port-4.2.0.tgz",
-      "integrity": "sha512-/b3jarXkH8KJoOMQc3uVGHASwGLPq3gSFJ7tgJm2diza+bydJPTGOibin2steecKeOylE8oY2JERlVWkAJO6yw==",
+      "integrity": "sha1-43Nosehjt2KcQ8WjI2Jflc8ksRk=",
       "dev": true
     },
     "get-stdin": {
@@ -21138,7 +21138,7 @@
     "git-raw-commits": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/git-raw-commits/-/git-raw-commits-2.0.0.tgz",
-      "integrity": "sha512-w4jFEJFgKXMQJ0H0ikBk2S+4KP2VEjhCvLCNqbNRQC8BgGWgLKNCO7a9K9LI+TVT7Gfoloje502sEnctibffgg==",
+      "integrity": "sha1-2Srd90RAwUvMXIPszj+3+KeRGLU=",
       "dev": true,
       "requires": {
         "dargs": "^4.0.1",
@@ -21180,7 +21180,7 @@
         "meow": {
           "version": "4.0.1",
           "resolved": "https://registry.npmjs.org/meow/-/meow-4.0.1.tgz",
-          "integrity": "sha512-xcSBHD5Z86zaOc+781KrupuHAzeGXSLtiAOmBsiLDiPSaYSB6hdew2ng9EBAnZ62jagG9MHAOdxpDi/lWBFJ/A==",
+          "integrity": "sha1-1IWY9vSxRy81v2MXqVlFrONH+XU=",
           "dev": true,
           "requires": {
             "camelcase-keys": "^4.0.0",
@@ -21197,7 +21197,7 @@
         "minimist-options": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-3.0.2.tgz",
-          "integrity": "sha512-FyBrT/d0d4+uiZRbqznPXqw3IpZZG3gl3wKWiX784FycUKVwBt0uLBFkQrtE4tZOrgo78nZp2jnKz3L65T5LdQ==",
+          "integrity": "sha1-+6TIGRM54T7PTWG+sD8HAQPz2VQ=",
           "dev": true,
           "requires": {
             "arrify": "^1.0.1",
@@ -21285,7 +21285,7 @@
     "git-semver-tags": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/git-semver-tags/-/git-semver-tags-2.0.3.tgz",
-      "integrity": "sha512-tj4FD4ww2RX2ae//jSrXZzrocla9db5h0V7ikPl1P/WwoZar9epdUhwR7XHXSgc+ZkNq72BEEerqQuicoEQfzA==",
+      "integrity": "sha1-SJiKcYrPWTgA+ZYiqVKnfEBb+jQ=",
       "dev": true,
       "requires": {
         "meow": "^4.0.0",
@@ -21324,7 +21324,7 @@
         "meow": {
           "version": "4.0.1",
           "resolved": "https://registry.npmjs.org/meow/-/meow-4.0.1.tgz",
-          "integrity": "sha512-xcSBHD5Z86zaOc+781KrupuHAzeGXSLtiAOmBsiLDiPSaYSB6hdew2ng9EBAnZ62jagG9MHAOdxpDi/lWBFJ/A==",
+          "integrity": "sha1-1IWY9vSxRy81v2MXqVlFrONH+XU=",
           "dev": true,
           "requires": {
             "camelcase-keys": "^4.0.0",
@@ -21341,7 +21341,7 @@
         "minimist-options": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-3.0.2.tgz",
-          "integrity": "sha512-FyBrT/d0d4+uiZRbqznPXqw3IpZZG3gl3wKWiX784FycUKVwBt0uLBFkQrtE4tZOrgo78nZp2jnKz3L65T5LdQ==",
+          "integrity": "sha1-+6TIGRM54T7PTWG+sD8HAQPz2VQ=",
           "dev": true,
           "requires": {
             "arrify": "^1.0.1",
@@ -22077,7 +22077,7 @@
     "hard-rejection": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz",
-      "integrity": "sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==",
+      "integrity": "sha1-HG7aXBaFxjlCdm15u0Cudzzs2IM=",
       "dev": true
     },
     "harmony-reflect": {
@@ -22730,7 +22730,7 @@
     "init-package-json": {
       "version": "1.10.3",
       "resolved": "https://registry.npmjs.org/init-package-json/-/init-package-json-1.10.3.tgz",
-      "integrity": "sha512-zKSiXKhQveNteyhcj1CoOP8tqp1QuxPIPBl8Bid99DGLFqA1p87M6lNgfjJHSBoWJJlidGOv5rWjyYKEB3g2Jw==",
+      "integrity": "sha1-Rf/i9hCoyhNPK9HbVjeyNQcPbL4=",
       "dev": true,
       "requires": {
         "glob": "^7.1.1",
@@ -22746,7 +22746,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -22758,7 +22758,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
           "dev": true
         }
       }
@@ -29199,7 +29199,7 @@
     "lerna": {
       "version": "3.22.1",
       "resolved": "https://registry.npmjs.org/lerna/-/lerna-3.22.1.tgz",
-      "integrity": "sha512-vk1lfVRFm+UuEFA7wkLKeSF7Iz13W+N/vFd48aW2yuS7Kv0RbNm2/qcDPV863056LMfkRlsEe+QYOw3palj5Lg==",
+      "integrity": "sha1-ggJ6w9qcYn/YvwLM/v+AapjmW2I=",
       "dev": true,
       "requires": {
         "@lerna/add": "3.21.0",
@@ -29662,7 +29662,7 @@
     "lodash.template": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
-      "integrity": "sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==",
+      "integrity": "sha1-+XYZXPPzR9DV9SSDVp/oAxzM6Ks=",
       "dev": true,
       "requires": {
         "lodash._reinterpolate": "^3.0.0",
@@ -29672,7 +29672,7 @@
     "lodash.templatesettings": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz",
-      "integrity": "sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==",
+      "integrity": "sha1-5IExDwSdPPbUfpEq0JMTsVTw+zM=",
       "dev": true,
       "requires": {
         "lodash._reinterpolate": "^3.0.0"
@@ -30357,7 +30357,7 @@
     "min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
-      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "integrity": "sha1-pj9oFnOzBXH76LwlaGrnRu76mGk=",
       "dev": true
     },
     "mini-css-extract-plugin": {
@@ -30465,7 +30465,7 @@
     "minimist-options": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz",
-      "integrity": "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==",
+      "integrity": "sha1-wGVXE8U6ii69d/+iR9NCxA8BBhk=",
       "dev": true,
       "requires": {
         "arrify": "^1.0.1",
@@ -31272,7 +31272,7 @@
     "modify-values": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz",
-      "integrity": "sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==",
+      "integrity": "sha1-s5OfpgVUZHTj4+PGPWS9Q7TuYCI=",
       "dev": true
     },
     "module-deps": {
@@ -31619,7 +31619,7 @@
     "multimatch": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-3.0.0.tgz",
-      "integrity": "sha512-22foS/gqQfANZ3o+W7ST2x25ueHDVNWl/b9OlGcLpy/iKxjCpvcNCM51YCenUi7Mt/jAjjqv8JwZRs8YP5sRjA==",
+      "integrity": "sha1-DiU0zGvCONmrZ+G5zV/Nhabb9ws=",
       "dev": true,
       "requires": {
         "array-differ": "^2.0.3",
@@ -31666,7 +31666,7 @@
     "mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
-      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "integrity": "sha1-lQCAV6Vsr63CvGPd5/n/aVWUjjI=",
       "dev": true,
       "requires": {
         "any-promise": "^1.0.0",
@@ -32348,7 +32348,7 @@
     "node-fetch-npm": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/node-fetch-npm/-/node-fetch-npm-2.0.4.tgz",
-      "integrity": "sha512-iOuIQDWDyjhv9qSDrj9aq/klt6F9z1p2otB3AV7v3zBDcL/x+OfGsvGQZZCcMZbUf4Ujw1xGNQkjvGnVT22cKg==",
+      "integrity": "sha1-ZQfQ4XqewL477FFpWKSXzsVL9aQ=",
       "dev": true,
       "requires": {
         "encoding": "^0.1.11",
@@ -35386,7 +35386,7 @@
     "npm-lifecycle": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/npm-lifecycle/-/npm-lifecycle-3.1.5.tgz",
-      "integrity": "sha512-lDLVkjfZmvmfvpvBzA4vzee9cn+Me4orq0QF8glbswJVEbIcSNWib7qGOffolysc3teCqbbPZZkzbr3GQZTL1g==",
+      "integrity": "sha1-mILTZCuMgsgVeCoS5qG/7tACYwk=",
       "dev": true,
       "requires": {
         "byline": "^5.0.0",
@@ -35402,7 +35402,7 @@
         "node-gyp": {
           "version": "5.1.1",
           "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-5.1.1.tgz",
-          "integrity": "sha512-WH0WKGi+a4i4DUt2mHnvocex/xPLp9pYt5R6M2JdFB7pJ7Z34hveZ4nDTGTiLXCkitA9T8HFZjhinBCiVHYcWw==",
+          "integrity": "sha1-65Ffe2Mck30oLjOu1Ey3oCX2Kj4=",
           "dev": true,
           "requires": {
             "env-paths": "^2.2.0",
@@ -35421,7 +35421,7 @@
         "nopt": {
           "version": "4.0.3",
           "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz",
-          "integrity": "sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==",
+          "integrity": "sha1-o3XK2dAv2SEnjZVMIlTVqlfhXkg=",
           "dev": true,
           "requires": {
             "abbrev": "1",
@@ -35431,7 +35431,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
           "dev": true
         }
       }
@@ -37523,7 +37523,7 @@
     "octokit-pagination-methods": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/octokit-pagination-methods/-/octokit-pagination-methods-1.1.0.tgz",
-      "integrity": "sha512-fZ4qZdQ2nxJvtcasX7Ghl+WlWS/d9IgnBIwFZXVNNZUmzpno91SX5bc5vuxiuKoCtK78XxGGNuSCrDC7xYB3OQ==",
+      "integrity": "sha1-z0cu3J1VEFX573P25CtNu0yAvqQ=",
       "dev": true
     },
     "on-finished": {
@@ -37985,7 +37985,7 @@
     "os-name": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/os-name/-/os-name-3.1.0.tgz",
-      "integrity": "sha512-h8L+8aNjNcMpo/mAIBPn5PXCM16iyPGjHNWo6U1YO8sJTMHtEtyczI6QJnLoplswm6goopQkqc7OAnjhWcugVg==",
+      "integrity": "sha1-3sGdlmKW4c1i1wGlpm7h3ernCAE=",
       "dev": true,
       "requires": {
         "macos-release": "^2.2.0",
@@ -39626,7 +39626,7 @@
     "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==",
+      "integrity": "sha1-WMO3TL+7ldMEYll1qi8ISDKaAQs=",
       "requires": {
         "react-is": "^16.3.2",
         "warning": "^4.0.0"
@@ -39653,7 +39653,7 @@
     "protoduck": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/protoduck/-/protoduck-5.0.1.tgz",
-      "integrity": "sha512-WxoCeDCoCBY55BMvj4cAEjdVUFGRWed9ZxPlqTKYyw1nDDTQ4pqmnIMAGfJlg7Dx35uB/M+PHJPTmGOvaCaPTg==",
+      "integrity": "sha1-A8NlnKGAB7aaUP2Cp+vMUWJhFR8=",
       "dev": true,
       "requires": {
         "genfun": "^5.0.0"
@@ -39865,7 +39865,7 @@
     "quick-lru": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz",
-      "integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==",
+      "integrity": "sha1-W4h48ROlgheEjGSCAmxz4bpXcn8=",
       "dev": true
     },
     "raf-schd": {
@@ -40048,7 +40048,7 @@
     "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=="
+      "integrity": "sha1-TxonOv38jzSIqMUWv9p4+HI1I2I="
     },
     "react-overlays": {
       "version": "5.1.1",
@@ -40156,7 +40156,7 @@
     "read-cmd-shim": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/read-cmd-shim/-/read-cmd-shim-1.0.5.tgz",
-      "integrity": "sha512-v5yCqQ/7okKoZZkBQUAfTsQ3sVJtXdNfbPnI5cceppoxEVLYA3k+VtV2omkeo8MS94JCy4fSiUwlRBAwCVRPUA==",
+      "integrity": "sha1-h+Q+ulAJi6WjLQzrWDq45DuWHBY=",
       "dev": true,
       "requires": {
         "graceful-fs": "^4.1.2"
@@ -40228,7 +40228,7 @@
     "read-package-tree": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/read-package-tree/-/read-package-tree-5.3.1.tgz",
-      "integrity": "sha512-mLUDsD5JVtlZxjSlPPx1RETkNjjvQYuweKwNVt1Sn8kP5Jh44pvYuUHCp6xSVDZWbNxVxG5lyZJ921aJH61sTw==",
+      "integrity": "sha1-oyy2TH8x64pvMe8G+c7fdAaP5jY=",
       "dev": true,
       "requires": {
         "read-package-json": "^2.0.0",
@@ -40417,7 +40417,7 @@
     "redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
-      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "integrity": "sha1-5Ve3mYMWu1PJ8fVvpiY1LGljBZ8=",
       "dev": true,
       "requires": {
         "indent-string": "^4.0.0",
@@ -42366,7 +42366,7 @@
     "solc": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/solc/-/solc-0.7.4.tgz",
-      "integrity": "sha512-IVLqAfUkJqgTS0JIgFPeC50ehUeBXu2eE+iU+rqb6UeOyf6w/BB/EsNcTSTpjtUti8BTG/sCd2qVhrWVYy7p0g==",
+      "integrity": "sha1-nF7YGuBpLj5hTkfNW1ALD5SFuY0=",
       "dev": true,
       "requires": {
         "command-exists": "^1.2.8",
@@ -42383,7 +42383,7 @@
         "commander": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/commander/-/commander-3.0.2.tgz",
-          "integrity": "sha512-Gar0ASD4BDyKC4hl4DwHqDrmvjoxWKZigVnAbn5H1owvm4CxCPdb0HQDehwNYMJpla5+M2tPmPARzhtYuwpHow==",
+          "integrity": "sha1-aDfD+2d62ZM9HPukLdFNURfWs54=",
           "dev": true
         },
         "fs-extra": {
@@ -42411,7 +42411,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
           "dev": true
         },
         "tmp": {
@@ -42592,7 +42592,7 @@
     "split": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz",
-      "integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==",
+      "integrity": "sha1-YFvZvjA6pZ+zX5Ip++oN3snqB9k=",
       "dev": true,
       "requires": {
         "through": "2"
@@ -43077,7 +43077,7 @@
     "strip-indent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
-      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "integrity": "sha1-wy4c7pQLazQyx3G8LFS8znPNMAE=",
       "dev": true,
       "requires": {
         "min-indent": "^1.0.0"
@@ -43091,7 +43091,7 @@
     "strong-log-transformer": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/strong-log-transformer/-/strong-log-transformer-2.1.0.tgz",
-      "integrity": "sha512-B3Hgul+z0L9a236FAUC9iZsL+nVHgoCJnqCbN588DjYxvGXaXaaFbfmQ/JhvKjZwsOukuR72XbHv71Qkug0HxA==",
+      "integrity": "sha1-D17XjTJeBCGsb5D38Q5pHWrjrhA=",
       "dev": true,
       "requires": {
         "duplexer": "^0.1.1",
@@ -43936,7 +43936,7 @@
         "make-dir": {
           "version": "1.3.0",
           "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
-          "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
+          "integrity": "sha1-ecEDO4BRW9bSTsmTPoYMp17ifww=",
           "dev": true,
           "requires": {
             "pify": "^3.0.0"
@@ -44188,7 +44188,7 @@
     "text-extensions": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/text-extensions/-/text-extensions-1.9.0.tgz",
-      "integrity": "sha512-wiBrwC1EhBelW12Zy26JeOUkQ5mRu+5o8rpsJk5+2t+Y5vE7e842qtZDQ2g1NpX/29HdyFeJ4nSIhI47ENSxlQ==",
+      "integrity": "sha1-GFPkX+45yUXOb2w2stZZtaq8KiY=",
       "dev": true
     },
     "text-hex": {
@@ -44205,7 +44205,7 @@
     "thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
-      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "integrity": "sha1-iTLmhqQGYDigFt2eLKRq3Zg4qV8=",
       "dev": true,
       "requires": {
         "any-promise": "^1.0.0"
@@ -45285,7 +45285,7 @@
     "universal-user-agent": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-4.0.1.tgz",
-      "integrity": "sha512-LnST3ebHwVL2aNe4mejI9IQh2HfZ1RLo8Io2HugSif8ekzD1TlWpHpColOB/eh8JHMLkGH3Akqf040I+4ylNxg==",
+      "integrity": "sha1-/Y1st3OmeacJ6WfvgoijH8wD5Vc=",
       "dev": true,
       "requires": {
         "os-name": "^3.1.0"
@@ -45924,7 +45924,7 @@
     "warning": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
-      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "integrity": "sha1-Fungd+uKhtavfWSqHgX9hbRnjKM=",
       "requires": {
         "loose-envify": "^1.0.0"
       }
@@ -47422,7 +47422,7 @@
     "write-json-file": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/write-json-file/-/write-json-file-3.2.0.tgz",
-      "integrity": "sha512-3xZqT7Byc2uORAatYiP3DHUUAVEkNOswEWNs9H5KXiicRTvzYzYqKjYc4G7p+8pltvAw641lVByKVtMpf+4sYQ==",
+      "integrity": "sha1-Zbvcns2KFFjhWVJ3DMut/P9f5io=",
       "dev": true,
       "requires": {
         "detect-indent": "^5.0.0",
@@ -47445,7 +47445,7 @@
         "write-file-atomic": {
           "version": "2.4.3",
           "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz",
-          "integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==",
+          "integrity": "sha1-H9Lprh3z51uNjDZ0Q8aS1MqB9IE=",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.11",
@@ -47458,7 +47458,7 @@
     "write-pkg": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/write-pkg/-/write-pkg-3.2.0.tgz",
-      "integrity": "sha512-tX2ifZ0YqEFOF1wjRW2Pk93NLsj02+n1UP5RvO6rCs0K6R2g1padvf006cY74PQJKMGS2r42NK7FD0dG6Y6paw==",
+      "integrity": "sha1-DheP6Xgg04mokovHlTXb5ows/yE=",
       "dev": true,
       "requires": {
         "sort-keys": "^2.0.0",
@@ -47468,7 +47468,7 @@
         "make-dir": {
           "version": "1.3.0",
           "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
-          "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
+          "integrity": "sha1-ecEDO4BRW9bSTsmTPoYMp17ifww=",
           "dev": true,
           "requires": {
             "pify": "^3.0.0"
@@ -47492,7 +47492,7 @@
         "write-file-atomic": {
           "version": "2.4.3",
           "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz",
-          "integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==",
+          "integrity": "sha1-H9Lprh3z51uNjDZ0Q8aS1MqB9IE=",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.11",

From 3a605e25e744dbb912115d4cf01bf20752af7d05 Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Thu, 30 Dec 2021 18:21:21 +0100
Subject: [PATCH 041/168] activate filepanel

---
 apps/remix-ide/src/framingService.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/remix-ide/src/framingService.js b/apps/remix-ide/src/framingService.js
index ed029b7a65..8e37f8efb3 100644
--- a/apps/remix-ide/src/framingService.js
+++ b/apps/remix-ide/src/framingService.js
@@ -1,6 +1,5 @@
 export class FramingService {
-  constructor (sidePanel, verticalIcons, mainView, resizeFeature) {
-    this.sidePanel = sidePanel
+  constructor (verticalIcons, layout) {
     this.verticalIcons = verticalIcons
     this.mainPanel = mainView.getAppPanel()
     this.mainView = mainView

From 316c0b6f19711625868d3db3cdabc86cb97d464b Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Thu, 30 Dec 2021 18:21:39 +0100
Subject: [PATCH 042/168] filepanel activate

---
 apps/remix-ide/src/app.js               |  4 ---
 apps/remix-ide/src/app/panels/layout.ts | 39 +++++++++++++++++++------
 apps/remix-ide/src/remixAppManager.js   |  5 ++--
 3 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index b7d6ea6d53..6b397e858c 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -327,10 +327,6 @@ class AppComponent {
     // activate solidity plugin
     self.appManager.activatePlugin(['solidity', 'udapp'])
     // Load and start the service who manager layout and frame
-    // const framingService = new FramingService(self.sidePanel, self.menuicons, self.mainview, null)
-
-    // if (params.embed) framingService.embed()
-    // framingService.start(params)
   }
 }
 
diff --git a/apps/remix-ide/src/app/panels/layout.ts b/apps/remix-ide/src/app/panels/layout.ts
index 9fe316e99b..3f98da0f85 100644
--- a/apps/remix-ide/src/app/panels/layout.ts
+++ b/apps/remix-ide/src/app/panels/layout.ts
@@ -1,8 +1,7 @@
 import { Plugin } from '@remixproject/engine'
 import { Profile } from '@remixproject/plugin-utils'
 import { EventEmitter } from 'events'
-import { TabProxy } from './tab-proxy'
-const EventManager = require('../../lib/events')
+import QueryParams from '../../lib/query-params'
 
 const profile: Profile = {
   name: 'layout',
@@ -28,35 +27,57 @@ export class Layout extends Plugin {
     this.event = new EventEmitter()
   }
 
-  onActivation(): void {
+  async onActivation(): Promise<void> {
     console.log('layout plugin activated')
     this.on('fileManager', 'currentFileChanged', () => {
-      console.log('layout plugin currentFileChanged')
       this.panels.editor.active = true
       this.panels.main.active = false
       this.event.emit('change', null)
     })
     this.on('tabs', 'openFile', () => {
-      console.log('layout plugin currentFileChanged')
       this.panels.editor.active = true
       this.panels.main.active = false
       this.event.emit('change', null)
     })
     this.on('tabs', 'switchApp', (name: string) => {
-      console.log('layout plugin switchApp', name)
       this.call('mainPanel', 'showContent', name)
       this.panels.editor.active = false
       this.panels.main.active = true
       this.event.emit('change', null)
     })
     this.on('tabs', 'closeApp', (name: string) => {
-      console.log('layout plugin closeapp', name)
       this.panels.editor.active = true
       this.panels.main.active = false
       this.event.emit('change', null)
     })
-    this.on('tabs', 'tabCountChanged', (count) => {
-      // if (!count) this.editor.displayEmptyReadOnlySession()
+    this.on('tabs', 'tabCountChanged', async count => {
+      if (!count) await this.call('manager', 'activatePlugin', 'home')
     })
+    this.on('manager', 'activate', (profile: Profile) => {
+      switch (profile.name) {
+        case 'filePanel':
+          this.call('menuicons', 'select', 'filePanel')
+          break
+      }
+    })
+    document.addEventListener('keypress', e => {
+      if (e.shiftKey && e.ctrlKey) {
+        if (e.code === 'KeyF') {
+          // Ctrl+Shift+F
+          this.call('menuicons', 'select', 'filePanel')
+        } else if (e.code === 'KeyA') {
+          // Ctrl+Shift+A
+          this.call('menuicons', 'select', 'pluginManager')
+        } else if (e.code === 'KeyS') {
+          //  Ctrl+Shift+S
+          this.call('menuicons', 'select', 'settings')
+        }
+        e.preventDefault()
+      }
+    })
+    const queryParams = new QueryParams()
+    const params = queryParams.get()
+    // if (params.minimizeterminal) // this.mainView.minimizeTerminal()
+    // if (params.minimizesidepanel) // this.resizeFeature.hidePanel()
   }
 }
diff --git a/apps/remix-ide/src/remixAppManager.js b/apps/remix-ide/src/remixAppManager.js
index ebc20c0f26..bff808a8f8 100644
--- a/apps/remix-ide/src/remixAppManager.js
+++ b/apps/remix-ide/src/remixAppManager.js
@@ -10,12 +10,12 @@ const _paq = window._paq = window._paq || []
 const requiredModules = [ // services + layout views + system views
   'manager', 'config', 'compilerArtefacts', 'compilerMetadata', 'contextualListener', 'editor', 'offsetToLineColumnConverter', 'network', 'theme',
   'fileManager', 'contentImport', 'blockchain', 'web3Provider', 'scriptRunner', 'fetchAndCompile', 'mainPanel', 'hiddenPanel', 'sidePanel', 'menuicons',
-  'filePanel', 'terminal', 'settings', 'pluginManager', 'tabs', 'udapp', 'dGitProvider', 'solidity-logic']
+  'filePanel', 'terminal', 'settings', 'pluginManager', 'tabs', 'udapp', 'dGitProvider', 'solidity-logic', 'walkthrough']
 
 const dependentModules = ['git', 'hardhat', 'slither'] // module which shouldn't be manually activated (e.g git is activated by remixd)
 
 export function isNative (name) {
-  const nativePlugins = ['vyper', 'workshops', 'debugger', 'remixd', 'menuicons', 'solidity', 'hardhat-provider', 'solidityStaticAnalysis', 'solidityUnitTesting']
+  const nativePlugins = ['vyper', 'workshops', 'debugger', 'remixd', 'menuicons', 'solidity', 'hardhat-provider', 'solidityStaticAnalysis', 'solidityUnitTesting', 'layout']
   return nativePlugins.includes(name) || requiredModules.includes(name)
 }
 
@@ -79,6 +79,7 @@ export class RemixAppManager extends PluginManager {
   onPluginActivated (plugin) {
     this.pluginLoader.set(plugin, this.actives)
     this.event.emit('activate', plugin)
+    this.emit('activate', plugin)
     if (!requiredModules.includes(plugin.name)) _paq.push(['trackEvent', 'pluginManager', 'activate', plugin.name])
   }
 

From bc0de9c6638737f346c339499821c4ae7c88f32d Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Thu, 30 Dec 2021 20:11:43 +0100
Subject: [PATCH 043/168] add dragbar

---
 .../panel/src/lib/dragbar/dragbar.tsx         | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 libs/remix-ui/panel/src/lib/dragbar/dragbar.tsx

diff --git a/libs/remix-ui/panel/src/lib/dragbar/dragbar.tsx b/libs/remix-ui/panel/src/lib/dragbar/dragbar.tsx
new file mode 100644
index 0000000000..1b67b888c1
--- /dev/null
+++ b/libs/remix-ui/panel/src/lib/dragbar/dragbar.tsx
@@ -0,0 +1,47 @@
+import React, { useEffect, useLayoutEffect, useState } from 'react'
+import Draggable from 'react-draggable'
+import './dragbar.css'
+
+interface IRemixDragBarUi {
+  refObject: React.MutableRefObject<any>;
+  setHideStatus: (hide: boolean) => void;
+  hidden: boolean
+  minHeight: number
+}
+
+const DragBar = (props: IRemixDragBarUi) => {
+  const [dragState, setDragState] = useState<boolean>(false)
+  const [dragBarPosY, setDragBarPosY] = useState<number>(0)
+  const [offset, setOffSet] = useState<number>(0)
+  const nodeRef = React.useRef(null) // fix for strictmode
+
+  useEffect(() => {
+    // arbitrary time out to wait the the UI to be completely done
+    setTimeout(() => {
+      console.log(window.innerHeight)
+      console.log(props.refObject.current.offsetTop)
+      setOffSet(props.refObject.current.offsetTop)
+      setDragBarPosY(props.refObject.current.offsetTop)
+    }, 1000)
+  }, [])
+
+  useEffect(() => {
+    // setDragBarPosX(offset + (props.hidden ? 0 : props.refObject.current.offsetHeight))
+  }, [props.hidden, offset])
+
+  function stopDrag (e: MouseEvent, data: any) {
+    setDragState(false)
+  }
+
+  function startDrag () {
+    setDragState(true)
+  }
+  return <>
+    <div className={`overlay ${dragState ? '' : 'd-none'}`} ></div>
+    <Draggable nodeRef={nodeRef} position={{ x: 0, y: dragBarPosY }} onStart={startDrag} onStop={stopDrag} axis="y">
+      <div ref={nodeRef} className={`dragbar_terminal ${dragState ? 'ondrag' : ''}`}></div>
+    </Draggable>
+  </>
+}
+
+export default DragBar

From d240013257322d5a859e7e7daea80edee608b241 Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Thu, 30 Dec 2021 20:12:06 +0100
Subject: [PATCH 044/168] add dragbar

---
 .../app/src/lib/remix-app/dragbar/dragbar.css | 49 ++++++++++---------
 .../panel/src/lib/dragbar/dragbar.css         | 27 ++++++++++
 .../panel/src/lib/main/main-panel.css         |  1 +
 .../panel/src/lib/main/main-panel.tsx         |  4 ++
 .../terminal/src/lib/remix-ui-terminal.tsx    |  1 -
 5 files changed, 57 insertions(+), 25 deletions(-)
 create mode 100644 libs/remix-ui/panel/src/lib/dragbar/dragbar.css

diff --git a/libs/remix-ui/app/src/lib/remix-app/dragbar/dragbar.css b/libs/remix-ui/app/src/lib/remix-app/dragbar/dragbar.css
index a423dd6605..1330c1179c 100644
--- a/libs/remix-ui/app/src/lib/remix-app/dragbar/dragbar.css
+++ b/libs/remix-ui/app/src/lib/remix-app/dragbar/dragbar.css
@@ -1,26 +1,27 @@
 /* dragbar UI */
 
-.dragbar           {
-    display            : block;
-    height             : 100%;
-    position           : absolute;
-    left: 0px;
-    top: 0px;
-    width: 0.3em;
-    z-index: 9999;
-  }
-  
-  .overlay {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100vw;
-    height: 100vh;
-    display: block;
-    z-index: 9998;
-  }
-  
-  .dragbar:hover, .dragbar.ondrag{
-    background-color: var(--secondary);
-    cursor:col-resize;
-  }
\ No newline at end of file
+.dragbar {
+  display: block;
+  height: 100%;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 0.3em;
+  z-index: 9999;
+}
+
+.overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  display: block;
+  z-index: 9998;
+}
+
+.dragbar:hover,
+.dragbar.ondrag {
+  background-color: var(--secondary);
+  cursor: col-resize;
+}
diff --git a/libs/remix-ui/panel/src/lib/dragbar/dragbar.css b/libs/remix-ui/panel/src/lib/dragbar/dragbar.css
new file mode 100644
index 0000000000..09912437aa
--- /dev/null
+++ b/libs/remix-ui/panel/src/lib/dragbar/dragbar.css
@@ -0,0 +1,27 @@
+/* dragbar UI */
+
+.dragbar_terminal {
+  display: block;
+  width: 100%;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  height: 0.3em;
+  z-index: 9999;
+}
+
+.overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  display: block;
+  z-index: 9998;
+}
+
+.dragbar_terminal:hover,
+.dragbar_terminal.ondrag {
+  background-color: var(--secondary);
+  cursor: row-resize;
+}
diff --git a/libs/remix-ui/panel/src/lib/main/main-panel.css b/libs/remix-ui/panel/src/lib/main/main-panel.css
index cf7a841527..5e1dc17d54 100644
--- a/libs/remix-ui/panel/src/lib/main/main-panel.css
+++ b/libs/remix-ui/panel/src/lib/main/main-panel.css
@@ -3,4 +3,5 @@
     flex-direction    : column;
     height            : 100%;
     width             : 100%;
+    position: relative;
   }  
\ No newline at end of file
diff --git a/libs/remix-ui/panel/src/lib/main/main-panel.tsx b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
index 87a998eb27..c3dfeffb25 100644
--- a/libs/remix-ui/panel/src/lib/main/main-panel.tsx
+++ b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
@@ -1,5 +1,6 @@
 import AppContext from 'libs/remix-ui/app/src/lib/remix-app/context/context'
 import React, { useContext, useEffect, useRef, useState } from 'react' // eslint-disable-line
+import DragBar from '../dragbar/dragbar'
 import RemixUIPanelPlugin from '../plugins/panel-plugin'
 import { PluginRecord } from '../types'
 import './main-panel.css'
@@ -64,11 +65,14 @@ const RemixUIMainPanel = () => {
     <div className="mainview">
       {Object.values(plugins).map((pluginRecord, i) => {
         return (
+          <>
+          {(pluginRecord.profile.name === 'terminal') ? <DragBar minHeight={32} hidden={false} setHideStatus={()=>{}} refObject={terminalRef}></DragBar>:<></>}
           <RemixUIPanelPlugin
             ref={refs[i]}
             key={pluginRecord.profile.name}
             pluginRecord={pluginRecord}
           />
+          </>
         )
       })}
     </div>
diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
index 132196724b..ec36256645 100644
--- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
+++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
@@ -435,7 +435,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   return (
     <div style={{ height: '323px', flexGrow: 1 }} className='panel' ref={panelRef}>
       <div className="bar">
-        <div className={`dragbarHorizontal ${isDragging ? 'dragbarDragging' : ''}`} onMouseDown={handleDraggingStart} ref={leftRef}></div>
         <div className="menu border-top border-dark bg-light" ref={terminalMenu} data-id="terminalToggleMenu">
           <i className={`mx-2 toggleTerminal fas ${isOpen ? 'fa-angle-double-down' : 'fa-angle-double-up'}`} data-id="terminalToggleIcon" onClick={handleToggleTerminal}></i>
           <div className="mx-2 console" id="clearConsole" data-id="terminalClearConsole" onClick={handleClearConsole} >

From 20cb3ee9ba41cecf1ae55729144702cdc0c417a3 Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Thu, 30 Dec 2021 20:25:11 +0100
Subject: [PATCH 045/168] show terminal

---
 apps/remix-ide/src/remixAppManager.js           | 2 +-
 libs/remix-ui/panel/src/lib/main/main-panel.tsx | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/remix-ide/src/remixAppManager.js b/apps/remix-ide/src/remixAppManager.js
index bff808a8f8..d56357ae6d 100644
--- a/apps/remix-ide/src/remixAppManager.js
+++ b/apps/remix-ide/src/remixAppManager.js
@@ -10,7 +10,7 @@ const _paq = window._paq = window._paq || []
 const requiredModules = [ // services + layout views + system views
   'manager', 'config', 'compilerArtefacts', 'compilerMetadata', 'contextualListener', 'editor', 'offsetToLineColumnConverter', 'network', 'theme',
   'fileManager', 'contentImport', 'blockchain', 'web3Provider', 'scriptRunner', 'fetchAndCompile', 'mainPanel', 'hiddenPanel', 'sidePanel', 'menuicons',
-  'filePanel', 'terminal', 'settings', 'pluginManager', 'tabs', 'udapp', 'dGitProvider', 'solidity-logic', 'walkthrough']
+  'filePanel', 'terminal', 'settings', 'pluginManager', 'tabs', 'udapp', 'dGitProvider', 'solidity-logic', 'walkthrough', 'layout']
 
 const dependentModules = ['git', 'hardhat', 'slither'] // module which shouldn't be manually activated (e.g git is activated by remixd)
 
diff --git a/libs/remix-ui/panel/src/lib/main/main-panel.tsx b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
index c3dfeffb25..458ae37c17 100644
--- a/libs/remix-ui/panel/src/lib/main/main-panel.tsx
+++ b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
@@ -16,6 +16,7 @@ const RemixUIMainPanel = () => {
   const refs = [tabsRef, editorRef, mainPanelRef, terminalRef]
 
   const _adjustLayout = (delta: number) => {
+    if(!delta) return
     const limitDown = 32
     const containerHeight = window.innerHeight
     const tmp = delta - limitDown
@@ -64,9 +65,10 @@ const RemixUIMainPanel = () => {
   return (
     <div className="mainview">
       {Object.values(plugins).map((pluginRecord, i) => {
+        console.log(pluginRecord)
         return (
           <>
-          {(pluginRecord.profile.name === 'terminal') ? <DragBar minHeight={32} hidden={false} setHideStatus={()=>{}} refObject={terminalRef}></DragBar>:<></>}
+          {(pluginRecord.profile.name === 'terminal') ? <DragBar key={'dragbar'} minHeight={32} hidden={false} setHideStatus={()=>{}} refObject={terminalRef}></DragBar>:<></>}
           <RemixUIPanelPlugin
             ref={refs[i]}
             key={pluginRecord.profile.name}

From 6fa3e57c1c9cdfb0035ca7931d2a8a468daa2fda Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Thu, 30 Dec 2021 20:47:23 +0100
Subject: [PATCH 046/168] fake layout fix

---
 apps/remix-ide/src/app.js                     | 185 ++++++++++++------
 apps/remix-ide/src/app/panels/layout.ts       |   4 +-
 apps/remix-ide/src/app/panels/main-view.js    |   4 +-
 apps/remix-ide/src/app/panels/tab-proxy.js    |   2 -
 apps/remix-ide/src/framingService.js          |   3 -
 apps/remix-ide/src/remixAppManager.js         |   1 -
 .../panel/src/lib/main/main-panel.css         |   3 +-
 .../panel/src/lib/main/main-panel.tsx         |  32 +--
 8 files changed, 153 insertions(+), 81 deletions(-)

diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index 6b397e858c..3fba7b12b6 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -2,7 +2,6 @@
 import { RunTab, makeUdapp } from './app/udapp'
 import { RemixEngine } from './remixEngine'
 import { RemixAppManager } from './remixAppManager'
-import { MainView } from './app/panels/main-view'
 import { ThemeModule } from './app/tabs/theme-module'
 import { NetworkModule } from './app/tabs/network-module'
 import { Web3ProviderModule } from './app/tabs/web3-provider'
@@ -11,11 +10,17 @@ import { HiddenPanel } from './app/components/hidden-panel'
 import { VerticalIcons } from './app/components/vertical-icons'
 import { LandingPage } from './app/ui/landing-page/landing-page'
 import { MainPanel } from './app/components/main-panel'
-import { FramingService } from './framingService'
 
 import { WalkthroughService } from './walkthroughService'
 
-import { OffsetToLineColumnConverter, CompilerMetadata, CompilerArtefacts, FetchAndCompile, CompilerImports, EditorContextListener } from '@remix-project/core-plugin'
+import {
+  OffsetToLineColumnConverter,
+  CompilerMetadata,
+  CompilerArtefacts,
+  FetchAndCompile,
+  CompilerImports,
+  EditorContextListener
+} from '@remix-project/core-plugin'
 
 import migrateFileSystem from './migrateFileSystem'
 import Registry from './app/state/registry'
@@ -68,13 +73,27 @@ class AppComponent {
     // load file system
     self._components.filesProviders = {}
     self._components.filesProviders.browser = new FileProvider('browser')
-    Registry.getInstance().put({ api: self._components.filesProviders.browser, name: 'fileproviders/browser' })
-    self._components.filesProviders.localhost = new RemixDProvider(self.appManager)
-    Registry.getInstance().put({ api: self._components.filesProviders.localhost, name: 'fileproviders/localhost' })
+    Registry.getInstance().put({
+      api: self._components.filesProviders.browser,
+      name: 'fileproviders/browser'
+    })
+    self._components.filesProviders.localhost = new RemixDProvider(
+      self.appManager
+    )
+    Registry.getInstance().put({
+      api: self._components.filesProviders.localhost,
+      name: 'fileproviders/localhost'
+    })
     self._components.filesProviders.workspace = new WorkspaceFileProvider()
-    Registry.getInstance().put({ api: self._components.filesProviders.workspace, name: 'fileproviders/workspace' })
+    Registry.getInstance().put({
+      api: self._components.filesProviders.workspace,
+      name: 'fileproviders/workspace'
+    })
 
-    Registry.getInstance().put({ api: self._components.filesProviders, name: 'fileproviders' })
+    Registry.getInstance().put({
+      api: self._components.filesProviders,
+      name: 'fileproviders'
+    })
 
     migrateFileSystem(self._components.filesProviders.browser)
   }
@@ -94,8 +113,15 @@ class AppComponent {
       'remix-beta.ethereum.org': 25,
       'remix.ethereum.org': 23
     }
-    self.showMatamo = (matomoDomains[window.location.hostname] && !Registry.getInstance().get('config').api.exists('settings/matomo-analytics'))
-    self.walkthroughService = new WalkthroughService(appManager, self.showMatamo)
+    self.showMatamo =
+      matomoDomains[window.location.hostname] &&
+      !Registry.getInstance()
+        .get('config')
+        .api.exists('settings/matomo-analytics')
+    self.walkthroughService = new WalkthroughService(
+      appManager,
+      self.showMatamo
+    )
 
     const hosts = ['127.0.0.1:8080', '192.168.0.101:8080', 'localhost:8080']
     // workaround for Electron support
@@ -114,7 +140,9 @@ class AppComponent {
     // ----------------- editor service ----------------------------
     const editor = new Editor() // wrapper around ace editor
     Registry.getInstance().put({ api: editor, name: 'editor' })
-    editor.event.register('requiringToSaveCurrentfile', () => fileManager.saveCurrentFile())
+    editor.event.register('requiringToSaveCurrentfile', () =>
+      fileManager.saveCurrentFile()
+    )
 
     // ----------------- fileManager service ----------------------------
     const fileManager = new FileManager(editor, appManager)
@@ -131,7 +159,10 @@ class AppComponent {
     const compilerMetadataGenerator = new CompilerMetadata()
     // ----------------- compilation result service (can keep track of compilation results) ----------------------------
     const compilersArtefacts = new CompilerArtefacts() // store all the compilation results (key represent a compiler name)
-    Registry.getInstance().put({ api: compilersArtefacts, name: 'compilersartefacts' })
+    Registry.getInstance().put({
+      api: compilersArtefacts,
+      name: 'compilersartefacts'
+    })
 
     // service which fetch contract artifacts from sourve-verify, put artifacts in remix and compile it
     const fetchAndCompile = new FetchAndCompile()
@@ -142,19 +173,22 @@ class AppComponent {
     const hardhatProvider = new HardhatProvider(blockchain)
     // ----------------- convert offset to line/column service -----------
     const offsetToLineColumnConverter = new OffsetToLineColumnConverter()
-    Registry.getInstance().put({ api: offsetToLineColumnConverter, name: 'offsettolinecolumnconverter' })
+    Registry.getInstance().put({
+      api: offsetToLineColumnConverter,
+      name: 'offsettolinecolumnconverter'
+    })
 
     // -------------------Terminal----------------------------------------
-    makeUdapp(blockchain, compilersArtefacts, (domEl) => terminal.logHtml(domEl))
+    makeUdapp(blockchain, compilersArtefacts, domEl => terminal.logHtml(domEl))
     const terminal = new Terminal(
       { appManager, blockchain },
       {
-        getPosition: (event) => {
+        getPosition: event => {
           const limitUp = 36
           const limitDown = 20
           const height = window.innerHeight
-          let newpos = (event.pageY < limitUp) ? limitUp : event.pageY
-          newpos = (newpos < height - limitDown) ? newpos : height - limitDown
+          let newpos = event.pageY < limitUp ? limitUp : event.pageY
+          newpos = newpos < height - limitDown ? newpos : height - limitDown
           return height - newpos
         }
       }
@@ -190,19 +224,25 @@ class AppComponent {
     // self.mainview = new MainView(contextualListener, editor, appPanel, fileManager, appManager, terminal)
     Registry.getInstance().put({ api: self.mainview, name: 'mainview' })
     const tabProxy = new TabProxy(fileManager, editor)
-    self.engine.register([
-      appPanel,
-      tabProxy
-    ])
+    self.engine.register([appPanel, tabProxy])
 
     // those views depend on app_manager
     self.menuicons = new VerticalIcons(appManager)
     self.sidePanel = new SidePanel(appManager, self.menuicons)
     self.hiddenPanel = new HiddenPanel()
 
-    const pluginManagerComponent = new PluginManagerComponent(appManager, self.engine)
+    const pluginManagerComponent = new PluginManagerComponent(
+      appManager,
+      self.engine
+    )
     const filePanel = new FilePanel(appManager)
-    const landingPage = new LandingPage(appManager, self.menuicons, fileManager, filePanel, contentImport)
+    const landingPage = new LandingPage(
+      appManager,
+      self.menuicons,
+      fileManager,
+      filePanel,
+      contentImport
+    )
     self.settings = new SettingsTab(
       Registry.getInstance().get('config').api,
       editor,
@@ -220,7 +260,10 @@ class AppComponent {
     ])
 
     // CONTENT VIEWS & DEFAULT PLUGINS
-    const compileTab = new CompileTab(Registry.getInstance().get('config').api, Registry.getInstance().get('filemanager').api)
+    const compileTab = new CompileTab(
+      Registry.getInstance().get('config').api,
+      Registry.getInstance().get('filemanager').api
+    )
     const run = new RunTab(
       blockchain,
       Registry.getInstance().get('config').api,
@@ -256,10 +299,10 @@ class AppComponent {
     ])
 
     self.layout.panels = {
-      tabs: { plugin:tabProxy, active: true },
-      editor: { plugin:editor, active: true },
-      main: { plugin:appPanel, active: false },
-      terminal: { plugin:terminal, active: true },
+      tabs: { plugin: tabProxy, active: true },
+      editor: { plugin: editor, active: true },
+      main: { plugin: appPanel, active: false },
+      terminal: { plugin: terminal, active: true }
     }
   }
 
@@ -275,53 +318,81 @@ class AppComponent {
     try {
       self.engine.register(await self.appManager.registeredPlugins())
     } catch (e) {
-      console.log('couldn\'t register iframe plugins', e.message)
+      console.log("couldn't register iframe plugins", e.message)
     }
 
     await self.appManager.activatePlugin(['layout', 'editor'])
-    await self.appManager.activatePlugin(['theme', 'fileManager', 'compilerMetadata', 'compilerArtefacts', 'network', 'web3Provider', 'offsetToLineColumnConverter'])
+    await self.appManager.activatePlugin([
+      'theme',
+      'fileManager',
+      'compilerMetadata',
+      'compilerArtefacts',
+      'network',
+      'web3Provider',
+      'offsetToLineColumnConverter'
+    ])
     await self.appManager.activatePlugin(['mainPanel'])
     await self.appManager.activatePlugin(['mainPanel', 'menuicons', 'tabs'])
     await self.appManager.activatePlugin(['sidePanel']) // activating  host plugin separately
     await self.appManager.activatePlugin(['home'])
     await self.appManager.activatePlugin(['settings', 'config'])
-    await self.appManager.activatePlugin(['hiddenPanel', 'pluginManager', 'contextualListener', 'terminal', 'blockchain', 'fetchAndCompile', 'contentImport'])
+    await self.appManager.activatePlugin([
+      'hiddenPanel',
+      'pluginManager',
+      'contextualListener',
+      'terminal',
+      'blockchain',
+      'fetchAndCompile',
+      'contentImport'
+    ])
     await self.appManager.activatePlugin(['settings'])
     await self.appManager.activatePlugin(['walkthrough'])
 
-    self.appManager.on('filePanel', 'workspaceInitializationCompleted', async () => {
-      await self.appManager.registerContextMenuItems()
-    })
+    self.appManager.on(
+      'filePanel',
+      'workspaceInitializationCompleted',
+      async () => {
+        await self.appManager.registerContextMenuItems()
+      }
+    )
 
     await self.appManager.activatePlugin(['filePanel'])
     // Set workspace after initial activation
     self.appManager.on('editor', 'editorMounted', () => {
       if (Array.isArray(self.workspace)) {
-        self.appManager.activatePlugin(self.workspace).then(async () => {
-          try {
-            if (params.deactivate) {
-              await self.appManager.deactivatePlugin(params.deactivate.split(','))
+        self.appManager
+          .activatePlugin(self.workspace)
+          .then(async () => {
+            try {
+              if (params.deactivate) {
+                await self.appManager.deactivatePlugin(
+                  params.deactivate.split(',')
+                )
+              }
+            } catch (e) {
+              console.log(e)
+            }
+            if (params.code) {
+              // if code is given in url we focus on solidity plugin
+              self.menuicons.select('solidity')
+            } else {
+              // If plugins are loaded from the URL params, we focus on the last one.
+              if (
+                self.appManager.pluginLoader.current === 'queryParams' &&
+                self.workspace.length > 0
+              ) { self.menuicons.select(self.workspace[self.workspace.length - 1]) }
             }
-          } catch (e) {
-            console.log(e)
-          }
-          if (params.code) {
-            // if code is given in url we focus on solidity plugin
-            self.menuicons.select('solidity')
-          } else {
-            // If plugins are loaded from the URL params, we focus on the last one.
-            if (self.appManager.pluginLoader.current === 'queryParams' && self.workspace.length > 0) self.menuicons.select(self.workspace[self.workspace.length - 1])
-          }
-
-          if (params.call) {
-            const callDetails = params.call.split('//')
-            if (callDetails.length > 1) {
-              toolTip(`initiating ${callDetails[0]} ...`)
-              // @todo(remove the timeout when activatePlugin is on 0.3.0)
-              self.appManager.call(...callDetails).catch(console.error)
+
+            if (params.call) {
+              const callDetails = params.call.split('//')
+              if (callDetails.length > 1) {
+                toolTip(`initiating ${callDetails[0]} ...`)
+                // @todo(remove the timeout when activatePlugin is on 0.3.0)
+                self.appManager.call(...callDetails).catch(console.error)
+              }
             }
-          }
-        }).catch(console.error)
+          })
+          .catch(console.error)
       }
     })
     // activate solidity plugin
diff --git a/apps/remix-ide/src/app/panels/layout.ts b/apps/remix-ide/src/app/panels/layout.ts
index 3f98da0f85..05fbe1642d 100644
--- a/apps/remix-ide/src/app/panels/layout.ts
+++ b/apps/remix-ide/src/app/panels/layout.ts
@@ -22,12 +22,12 @@ interface panels {
 export class Layout extends Plugin {
   event: any
   panels: panels
-  constructor() {
+  constructor () {
     super(profile)
     this.event = new EventEmitter()
   }
 
-  async onActivation(): Promise<void> {
+  async onActivation (): Promise<void> {
     console.log('layout plugin activated')
     this.on('fileManager', 'currentFileChanged', () => {
       this.panels.editor.active = true
diff --git a/apps/remix-ide/src/app/panels/main-view.js b/apps/remix-ide/src/app/panels/main-view.js
index 142dc6f96c..c1e59925c7 100644
--- a/apps/remix-ide/src/app/panels/main-view.js
+++ b/apps/remix-ide/src/app/panels/main-view.js
@@ -87,7 +87,7 @@ export class MainView {
     }
 
     self._components.terminal.event.register('resize', delta => self._adjustLayout('top', delta))
-    // mv 
+    // mv
     if (self.txListener) {
       self._components.terminal.event.register('listenOnNetWork', (listenOnNetWork) => {
         self.txListener.setListenOnNetwork(listenOnNetWork)
@@ -211,7 +211,7 @@ export class MainView {
     return self._components.terminal.registerCommand(name, command, opts)
   }
 
-  // rm 
+  // rm
   updateTerminalFilter (filter) {
     this._components.terminal.updateJournal(filter)
   }
diff --git a/apps/remix-ide/src/app/panels/tab-proxy.js b/apps/remix-ide/src/app/panels/tab-proxy.js
index f7842242e9..1b776f1db8 100644
--- a/apps/remix-ide/src/app/panels/tab-proxy.js
+++ b/apps/remix-ide/src/app/panels/tab-proxy.js
@@ -288,7 +288,6 @@ export class TabProxy extends Plugin {
   }
 
   renderComponent () {
-
     const onSelect = (index) => {
       if (this.loadedTabs[index]) {
         const name = this.loadedTabs[index].name
@@ -316,7 +315,6 @@ export class TabProxy extends Plugin {
   }
 
   renderTabsbar () {
-
     return this.el
   }
 }
diff --git a/apps/remix-ide/src/framingService.js b/apps/remix-ide/src/framingService.js
index 8e37f8efb3..d7c2a1c5f8 100644
--- a/apps/remix-ide/src/framingService.js
+++ b/apps/remix-ide/src/framingService.js
@@ -1,9 +1,6 @@
 export class FramingService {
   constructor (verticalIcons, layout) {
     this.verticalIcons = verticalIcons
-    this.mainPanel = mainView.getAppPanel()
-    this.mainView = mainView
-    this.resizeFeature = resizeFeature
   }
 
   start (params) {
diff --git a/apps/remix-ide/src/remixAppManager.js b/apps/remix-ide/src/remixAppManager.js
index d56357ae6d..ba56282dfc 100644
--- a/apps/remix-ide/src/remixAppManager.js
+++ b/apps/remix-ide/src/remixAppManager.js
@@ -1,6 +1,5 @@
 /* global localStorage, fetch */
 import { PluginManager } from '@remixproject/engine'
-import { IframeReactPlugin } from '@remix-ui/app'
 import { EventEmitter } from 'events'
 import QueryParams from './lib/query-params'
 import { PermissionHandler } from './app/ui/persmission-handler'
diff --git a/libs/remix-ui/panel/src/lib/main/main-panel.css b/libs/remix-ui/panel/src/lib/main/main-panel.css
index 5e1dc17d54..d569338fab 100644
--- a/libs/remix-ui/panel/src/lib/main/main-panel.css
+++ b/libs/remix-ui/panel/src/lib/main/main-panel.css
@@ -4,4 +4,5 @@
     height            : 100%;
     width             : 100%;
     position: relative;
-  }  
\ No newline at end of file
+  }  
+
diff --git a/libs/remix-ui/panel/src/lib/main/main-panel.tsx b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
index 458ae37c17..d51facfe87 100644
--- a/libs/remix-ui/panel/src/lib/main/main-panel.tsx
+++ b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
@@ -1,5 +1,5 @@
 import AppContext from 'libs/remix-ui/app/src/lib/remix-app/context/context'
-import React, { useContext, useEffect, useRef, useState } from 'react' // eslint-disable-line
+import React, { useContext, useEffect, useLayoutEffect, useRef, useState } from 'react' // eslint-disable-line
 import DragBar from '../dragbar/dragbar'
 import RemixUIPanelPlugin from '../plugins/panel-plugin'
 import { PluginRecord } from '../types'
@@ -16,14 +16,15 @@ const RemixUIMainPanel = () => {
   const refs = [tabsRef, editorRef, mainPanelRef, terminalRef]
 
   const _adjustLayout = (delta: number) => {
-    if(!delta) return
+    if (!delta) return
+    console.log('adjustLayout', delta, terminalRef.current)
     const limitDown = 32
     const containerHeight = window.innerHeight
     const tmp = delta - limitDown
     delta = tmp > 0 ? tmp : 0
     let mainPanelHeight = containerHeight - delta
     mainPanelHeight = mainPanelHeight < 0 ? 0 : mainPanelHeight
-    //self.editor.resize((document.querySelector('#editorWrap') || {}).checked)
+    // self.editor.resize((document.querySelector('#editorWrap') || {}).checked)
     editorRef.current?.setAttribute('style', `height: ${mainPanelHeight}px`)
     terminalRef.current?.setAttribute('style', `height: ${delta}px`)
     mainPanelRef.current?.setAttribute('style', `height: ${mainPanelHeight}px`)
@@ -32,7 +33,7 @@ const RemixUIMainPanel = () => {
   }
 
   const renderPanels = () => {
-    //console.log(appContext)
+    // console.log(appContext)
     if (appContext) {
       console.log(appContext)
       const pluginPanels: PluginRecord[] = []
@@ -40,8 +41,8 @@ const RemixUIMainPanel = () => {
         pluginPanels.push({
           profile: panel.plugin.profile,
           active: panel.active,
-          view: panel.plugin.profile.name === 'tabs' ? panel.plugin.renderTabsbar(): panel.plugin.render(),
-          class: panel.plugin.profile.name
+          view: panel.plugin.profile.name === 'tabs' ? panel.plugin.renderTabsbar() : panel.plugin.render(),
+          class: panel.plugin.profile.name + '-wrap'
         })
       })
       // console.log(pluginPanels)
@@ -53,13 +54,18 @@ const RemixUIMainPanel = () => {
     }
   }
 
+  useLayoutEffect(() => {
+    _adjustLayout(323)
+  })
+
   useEffect(() => {
     renderPanels()
     console.log(appContext.layout)
-    appContext.layout.event.on('change',() => {
+    appContext.layout.event.on('change', () => {
       console.log('change')
       renderPanels()
     })
+
   }, [])
 
   return (
@@ -68,12 +74,12 @@ const RemixUIMainPanel = () => {
         console.log(pluginRecord)
         return (
           <>
-          {(pluginRecord.profile.name === 'terminal') ? <DragBar key={'dragbar'} minHeight={32} hidden={false} setHideStatus={()=>{}} refObject={terminalRef}></DragBar>:<></>}
-          <RemixUIPanelPlugin
-            ref={refs[i]}
-            key={pluginRecord.profile.name}
-            pluginRecord={pluginRecord}
-          />
+            {(pluginRecord.profile.name === 'terminal') ? <DragBar key={'dragbar'} minHeight={32} hidden={false} setHideStatus={() => {}} refObject={terminalRef}></DragBar> : <></>}
+            <RemixUIPanelPlugin
+              ref={refs[i]}
+              key={pluginRecord.profile.name}
+              pluginRecord={pluginRecord}
+            />
           </>
         )
       })}

From 361a4815fa22788c90547e492c2aba20b01e667d Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Thu, 30 Dec 2021 20:58:53 +0100
Subject: [PATCH 047/168] lint

---
 libs/remix-ui/panel/src/lib/main/main-panel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/remix-ui/panel/src/lib/main/main-panel.tsx b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
index d51facfe87..124901333a 100644
--- a/libs/remix-ui/panel/src/lib/main/main-panel.tsx
+++ b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-expressions */
 import AppContext from 'libs/remix-ui/app/src/lib/remix-app/context/context'
 import React, { useContext, useEffect, useLayoutEffect, useRef, useState } from 'react' // eslint-disable-line
 import DragBar from '../dragbar/dragbar'
@@ -65,7 +66,6 @@ const RemixUIMainPanel = () => {
       console.log('change')
       renderPanels()
     })
-
   }, [])
 
   return (

From e8b3b4e1e4ed21d1d5a61d7ad8600e89d892c7f0 Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Thu, 30 Dec 2021 21:00:05 +0100
Subject: [PATCH 048/168] lint

---
 .../src/lib/remix-app/components/panels/iFramePluginView.tsx    | 1 -
 libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx            | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/libs/remix-ui/app/src/lib/remix-app/components/panels/iFramePluginView.tsx b/libs/remix-ui/app/src/lib/remix-app/components/panels/iFramePluginView.tsx
index addd406948..f56ea4f863 100644
--- a/libs/remix-ui/app/src/lib/remix-app/components/panels/iFramePluginView.tsx
+++ b/libs/remix-ui/app/src/lib/remix-app/components/panels/iFramePluginView.tsx
@@ -10,7 +10,6 @@ const IFramePluginView = (props: IFramePluginViewProps) => {
   const [loading, isLoading] = useState<boolean>(true)
 
   const loaded = () => {
-    console.log(props.plugin.profile.name + "loaded")
     props.plugin.shake(ref.current)
     isLoading(false)
   }
diff --git a/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx b/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx
index 69a50ea1f0..9643eed05e 100644
--- a/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx
+++ b/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx
@@ -10,7 +10,7 @@ const RemixUIPanelPlugin = (props: panelPLuginProps, panelRef: any) => {
   const [view, setView] = useState<JSX.Element | HTMLDivElement>()
   useEffect(() => {
     console.log(panelRef)
-    const ref:any = panelRef? panelRef : localRef
+    const ref:any = panelRef || localRef
     if (ref.current) {
       if (props.pluginRecord.view) {
         if (React.isValidElement(props.pluginRecord.view)) {

From 42b63a1b2d6784eb3a818ec5000035727d8a4012 Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Thu, 30 Dec 2021 21:01:14 +0100
Subject: [PATCH 049/168] linting

---
 libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
index ec36256645..e0c08dd83c 100644
--- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
+++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { useState, useEffect, useReducer, useRef, SyntheticEvent, MouseEvent } from 'react' // eslint-disable-line
 import { registerCommandAction, registerLogScriptRunnerAction, registerInfoScriptRunnerAction, registerErrorScriptRunnerAction, registerWarnScriptRunnerAction, listenOnNetworkAction, initListeningOnNetwork } from './actions/terminalAction'
 import { initialState, registerCommandReducer, addCommandHistoryReducer, registerScriptRunnerReducer } from './reducers/terminalReducer'

From 99fc8ad34596a9cd7aae2adcbe9bcfb2c2d7bdb5 Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Thu, 30 Dec 2021 23:18:21 +0100
Subject: [PATCH 050/168] fix editor test

---
 apps/remix-ide-e2e/src/tests/editor.test.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/editor.test.ts b/apps/remix-ide-e2e/src/tests/editor.test.ts
index 7b714a432b..6a42542b83 100644
--- a/apps/remix-ide-e2e/src/tests/editor.test.ts
+++ b/apps/remix-ide-e2e/src/tests/editor.test.ts
@@ -16,18 +16,18 @@ module.exports = {
       .openFile('contracts')
       .openFile('contracts/1_Storage.sol')
       .waitForElementVisible('#editorView')
-      .checkElementStyle('.view-lines', 'font-size', '14px')
       .click('*[data-id="tabProxyZoomIn"]')
+      .checkElementStyle('.view-lines', 'font-size', '13px')
       .click('*[data-id="tabProxyZoomIn"]')
-      .checkElementStyle('.view-lines', 'font-size', '16px')
+      .checkElementStyle('.view-lines', 'font-size', '14px')
   },
 
   'Should zoom out editor #group1': function (browser: NightwatchBrowser) {
     browser.waitForElementVisible('#editorView')
-      .checkElementStyle('.view-lines', 'font-size', '16px')
+      .checkElementStyle('.view-lines', 'font-size', '14px')
       .click('*[data-id="tabProxyZoomOut"]')
       .click('*[data-id="tabProxyZoomOut"]')
-      .checkElementStyle('.view-lines', 'font-size', '14px')
+      .checkElementStyle('.view-lines', 'font-size', '12px')
   },
 
   'Should display compile error in editor #group1': function (browser: NightwatchBrowser) {

From eb9a63988ffbcdca407c1c3c23671f97f8ac26ec Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Thu, 30 Dec 2021 23:23:38 +0100
Subject: [PATCH 051/168] smaller terminal

---
 libs/remix-ui/panel/src/lib/main/main-panel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/remix-ui/panel/src/lib/main/main-panel.tsx b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
index 124901333a..98b1d2e7e0 100644
--- a/libs/remix-ui/panel/src/lib/main/main-panel.tsx
+++ b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
@@ -56,7 +56,7 @@ const RemixUIMainPanel = () => {
   }
 
   useLayoutEffect(() => {
-    _adjustLayout(323)
+    _adjustLayout(113)
   })
 
   useEffect(() => {

From 11cffeae7341d1827d6d949a1438286484bd6f44 Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Thu, 30 Dec 2021 23:26:08 +0100
Subject: [PATCH 052/168] resize terminal

---
 libs/remix-ui/panel/src/lib/main/main-panel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/remix-ui/panel/src/lib/main/main-panel.tsx b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
index 98b1d2e7e0..a192367334 100644
--- a/libs/remix-ui/panel/src/lib/main/main-panel.tsx
+++ b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
@@ -56,7 +56,7 @@ const RemixUIMainPanel = () => {
   }
 
   useLayoutEffect(() => {
-    _adjustLayout(113)
+    _adjustLayout(198)
   })
 
   useEffect(() => {

From de1f17ce0a9496fd4c60a88f7a185d04facf5d3a Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Thu, 30 Dec 2021 23:32:40 +0100
Subject: [PATCH 053/168] editor fix

---
 apps/remix-ide-e2e/src/tests/editor.test.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/editor.test.ts b/apps/remix-ide-e2e/src/tests/editor.test.ts
index 6a42542b83..7b714a432b 100644
--- a/apps/remix-ide-e2e/src/tests/editor.test.ts
+++ b/apps/remix-ide-e2e/src/tests/editor.test.ts
@@ -16,18 +16,18 @@ module.exports = {
       .openFile('contracts')
       .openFile('contracts/1_Storage.sol')
       .waitForElementVisible('#editorView')
+      .checkElementStyle('.view-lines', 'font-size', '14px')
       .click('*[data-id="tabProxyZoomIn"]')
-      .checkElementStyle('.view-lines', 'font-size', '13px')
       .click('*[data-id="tabProxyZoomIn"]')
-      .checkElementStyle('.view-lines', 'font-size', '14px')
+      .checkElementStyle('.view-lines', 'font-size', '16px')
   },
 
   'Should zoom out editor #group1': function (browser: NightwatchBrowser) {
     browser.waitForElementVisible('#editorView')
-      .checkElementStyle('.view-lines', 'font-size', '14px')
+      .checkElementStyle('.view-lines', 'font-size', '16px')
       .click('*[data-id="tabProxyZoomOut"]')
       .click('*[data-id="tabProxyZoomOut"]')
-      .checkElementStyle('.view-lines', 'font-size', '12px')
+      .checkElementStyle('.view-lines', 'font-size', '14px')
   },
 
   'Should display compile error in editor #group1': function (browser: NightwatchBrowser) {

From d9d7f3970251283d3d83b66eeee182823d6984ac Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Mon, 3 Jan 2022 10:56:20 +0100
Subject: [PATCH 054/168] trying to fix sizes

---
 .../panel/src/lib/dragbar/dragbar.css         |   2 +-
 .../panel/src/lib/dragbar/dragbar.tsx         |   2 +-
 .../panel/src/lib/main/main-panel.tsx         |   4 +-
 .../terminal/src/lib/remix-ui-terminal.tsx    |   2 +-
 package-lock.json                             | 438 +++++++++---------
 5 files changed, 224 insertions(+), 224 deletions(-)

diff --git a/libs/remix-ui/panel/src/lib/dragbar/dragbar.css b/libs/remix-ui/panel/src/lib/dragbar/dragbar.css
index 09912437aa..1ad9f9de85 100644
--- a/libs/remix-ui/panel/src/lib/dragbar/dragbar.css
+++ b/libs/remix-ui/panel/src/lib/dragbar/dragbar.css
@@ -17,7 +17,7 @@
   width: 100vw;
   height: 100vh;
   display: block;
-  z-index: 9998;
+  z-index: 900;
 }
 
 .dragbar_terminal:hover,
diff --git a/libs/remix-ui/panel/src/lib/dragbar/dragbar.tsx b/libs/remix-ui/panel/src/lib/dragbar/dragbar.tsx
index 1b67b888c1..902f68c307 100644
--- a/libs/remix-ui/panel/src/lib/dragbar/dragbar.tsx
+++ b/libs/remix-ui/panel/src/lib/dragbar/dragbar.tsx
@@ -23,7 +23,7 @@ const DragBar = (props: IRemixDragBarUi) => {
       setOffSet(props.refObject.current.offsetTop)
       setDragBarPosY(props.refObject.current.offsetTop)
     }, 1000)
-  }, [])
+  }, [props.refObject])
 
   useEffect(() => {
     // setDragBarPosX(offset + (props.hidden ? 0 : props.refObject.current.offsetHeight))
diff --git a/libs/remix-ui/panel/src/lib/main/main-panel.tsx b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
index a192367334..12a9ef682f 100644
--- a/libs/remix-ui/panel/src/lib/main/main-panel.tsx
+++ b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
@@ -24,7 +24,7 @@ const RemixUIMainPanel = () => {
     const tmp = delta - limitDown
     delta = tmp > 0 ? tmp : 0
     let mainPanelHeight = containerHeight - delta
-    mainPanelHeight = mainPanelHeight < 0 ? 0 : mainPanelHeight
+    mainPanelHeight = mainPanelHeight < 0 ? 0 : mainPanelHeight - 35
     // self.editor.resize((document.querySelector('#editorWrap') || {}).checked)
     editorRef.current?.setAttribute('style', `height: ${mainPanelHeight}px`)
     terminalRef.current?.setAttribute('style', `height: ${delta}px`)
@@ -56,7 +56,7 @@ const RemixUIMainPanel = () => {
   }
 
   useLayoutEffect(() => {
-    _adjustLayout(198)
+    // _adjustLayout(70)
   })
 
   useEffect(() => {
diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
index e0c08dd83c..0dd54256b5 100644
--- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
+++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
@@ -434,7 +434,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   }
 
   return (
-    <div style={{ height: '323px', flexGrow: 1 }} className='panel' ref={panelRef}>
+    <div style={{ flexGrow: 1 }} className='panel' ref={panelRef}>
       <div className="bar">
         <div className="menu border-top border-dark bg-light" ref={terminalMenu} data-id="terminalToggleMenu">
           <i className={`mx-2 toggleTerminal fas ${isOpen ? 'fa-angle-double-down' : 'fa-angle-double-up'}`} data-id="terminalToggleIcon" onClick={handleToggleTerminal}></i>
diff --git a/package-lock.json b/package-lock.json
index f0cd9ca6f2..a05d1a99a7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3320,7 +3320,7 @@
     "@evocateur/libnpmaccess": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@evocateur/libnpmaccess/-/libnpmaccess-3.1.2.tgz",
-      "integrity": "sha1-7Pf2zmsATp+UKwmNkiAL5KSxyEU=",
+      "integrity": "sha512-KSCAHwNWro0CF2ukxufCitT9K5LjL/KuMmNzSu8wuwN2rjyKHD8+cmOsiybK+W5hdnwc5M1SmRlVCaMHQo+3rg==",
       "dev": true,
       "requires": {
         "@evocateur/npm-registry-fetch": "^4.0.0",
@@ -3333,13 +3333,13 @@
         "aproba": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
-          "integrity": "sha1-UlILiuW1aSFbNU78DKo/4eRaitw=",
+          "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
           "dev": true
         },
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -3351,7 +3351,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         }
       }
@@ -3359,7 +3359,7 @@
     "@evocateur/libnpmpublish": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@evocateur/libnpmpublish/-/libnpmpublish-1.2.2.tgz",
-      "integrity": "sha1-Vd8J0tyhNq+6nIjHWconIZjbnxo=",
+      "integrity": "sha512-MJrrk9ct1FeY9zRlyeoyMieBjGDG9ihyyD9/Ft6MMrTxql9NyoEx2hw9casTIP4CdqEVu+3nQ2nXxoJ8RCXyFg==",
       "dev": true,
       "requires": {
         "@evocateur/npm-registry-fetch": "^4.0.0",
@@ -3376,13 +3376,13 @@
         "aproba": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
-          "integrity": "sha1-UlILiuW1aSFbNU78DKo/4eRaitw=",
+          "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
           "dev": true
         },
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -3394,7 +3394,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         },
         "ssri": {
@@ -3411,7 +3411,7 @@
     "@evocateur/npm-registry-fetch": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@evocateur/npm-registry-fetch/-/npm-registry-fetch-4.0.0.tgz",
-      "integrity": "sha1-jEw4dm2NMtMgD8sKg/BktXNl7WY=",
+      "integrity": "sha512-k1WGfKRQyhJpIr+P17O5vLIo2ko1PFLKwoetatdduUSt/aQ4J2sJrJwwatdI5Z3SiYk/mRH9S3JpdmMFd/IK4g==",
       "dev": true,
       "requires": {
         "JSONStream": "^1.3.4",
@@ -3435,7 +3435,7 @@
         "agentkeepalive": {
           "version": "3.5.2",
           "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-3.5.2.tgz",
-          "integrity": "sha1-oROSTdP6JKC8O3gQjEUMKr7gD2c=",
+          "integrity": "sha512-e0L/HNe6qkQ7H19kTlRRqUibEAwDK5AFk6y3PtMsuut2VAH6+Q4xZml1tNDJD7kSAyqmbG/K08K5WEJYtUrSlQ==",
           "dev": true,
           "requires": {
             "humanize-ms": "^1.2.1"
@@ -3482,7 +3482,7 @@
         "http-cache-semantics": {
           "version": "3.8.1",
           "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz",
-          "integrity": "sha1-ObDhat2bYFvwqe89nar0hDtMrNI=",
+          "integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==",
           "dev": true
         },
         "http-proxy-agent": {
@@ -3498,7 +3498,7 @@
         "https-proxy-agent": {
           "version": "2.2.4",
           "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz",
-          "integrity": "sha1-TuenN6vZJniik9mzShr00NCMeHs=",
+          "integrity": "sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==",
           "dev": true,
           "requires": {
             "agent-base": "^4.3.0",
@@ -3508,7 +3508,7 @@
         "make-fetch-happen": {
           "version": "5.0.2",
           "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-5.0.2.tgz",
-          "integrity": "sha1-qoOHEE8mh+3KAchofuRQE9AtGb0=",
+          "integrity": "sha512-07JHC0r1ykIoruKO8ifMXu+xEU8qOXDFETylktdug6vJDACnP+HKevOu3PXyNPzFyTSlz8vrBYlBO1JZRe8Cag==",
           "dev": true,
           "requires": {
             "agentkeepalive": "^3.4.1",
@@ -3533,7 +3533,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -3561,7 +3561,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         },
         "socks": {
@@ -3609,7 +3609,7 @@
     "@evocateur/pacote": {
       "version": "9.6.5",
       "resolved": "https://registry.npmjs.org/@evocateur/pacote/-/pacote-9.6.5.tgz",
-      "integrity": "sha1-M94yuiELbxfCDrq01JfvxnVfSuU=",
+      "integrity": "sha512-EI552lf0aG2nOV8NnZpTxNo2PcXKPmDbF9K8eCBFQdIZwHNGN/mi815fxtmUMa2wTa1yndotICIDt/V0vpEx2w==",
       "dev": true,
       "requires": {
         "@evocateur/npm-registry-fetch": "^4.0.0",
@@ -3655,7 +3655,7 @@
         "agentkeepalive": {
           "version": "3.5.2",
           "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-3.5.2.tgz",
-          "integrity": "sha1-oROSTdP6JKC8O3gQjEUMKr7gD2c=",
+          "integrity": "sha512-e0L/HNe6qkQ7H19kTlRRqUibEAwDK5AFk6y3PtMsuut2VAH6+Q4xZml1tNDJD7kSAyqmbG/K08K5WEJYtUrSlQ==",
           "dev": true,
           "requires": {
             "humanize-ms": "^1.2.1"
@@ -3702,7 +3702,7 @@
         "http-cache-semantics": {
           "version": "3.8.1",
           "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz",
-          "integrity": "sha1-ObDhat2bYFvwqe89nar0hDtMrNI=",
+          "integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==",
           "dev": true
         },
         "http-proxy-agent": {
@@ -3718,7 +3718,7 @@
         "https-proxy-agent": {
           "version": "2.2.4",
           "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz",
-          "integrity": "sha1-TuenN6vZJniik9mzShr00NCMeHs=",
+          "integrity": "sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==",
           "dev": true,
           "requires": {
             "agent-base": "^4.3.0",
@@ -3728,7 +3728,7 @@
         "make-fetch-happen": {
           "version": "5.0.2",
           "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-5.0.2.tgz",
-          "integrity": "sha1-qoOHEE8mh+3KAchofuRQE9AtGb0=",
+          "integrity": "sha512-07JHC0r1ykIoruKO8ifMXu+xEU8qOXDFETylktdug6vJDACnP+HKevOu3PXyNPzFyTSlz8vrBYlBO1JZRe8Cag==",
           "dev": true,
           "requires": {
             "agentkeepalive": "^3.4.1",
@@ -3753,7 +3753,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -3765,7 +3765,7 @@
         "npm-packlist": {
           "version": "1.4.8",
           "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz",
-          "integrity": "sha1-Vu5swTW5+YrT1Rwcldoiu7my7z4=",
+          "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==",
           "dev": true,
           "requires": {
             "ignore-walk": "^3.0.1",
@@ -3776,7 +3776,7 @@
         "npm-pick-manifest": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/npm-pick-manifest/-/npm-pick-manifest-3.0.2.tgz",
-          "integrity": "sha1-9Nnl/UviFT5fTl+be+jcQZqZq7c=",
+          "integrity": "sha512-wNprTNg+X5nf+tDi+hbjdHhM4bX+mKqv6XmPh7B5eG+QY9VARfQPfCEH013H5GqfNj6ee8Ij2fg8yk0mzps1Vw==",
           "dev": true,
           "requires": {
             "figgy-pudding": "^3.5.1",
@@ -3803,7 +3803,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         },
         "socks": {
@@ -5620,7 +5620,7 @@
     "@lerna/add": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/add/-/add-3.21.0.tgz",
-      "integrity": "sha1-JwB73nHMewopaas8LwrkFXi0V3s=",
+      "integrity": "sha512-vhUXXF6SpufBE1EkNEXwz1VLW03f177G9uMOFMQkp6OJ30/PWg4Ekifuz9/3YfgB2/GH8Tu4Lk3O51P2Hskg/A==",
       "dev": true,
       "requires": {
         "@evocateur/pacote": "^9.6.3",
@@ -5638,7 +5638,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -5650,7 +5650,7 @@
             "semver": {
               "version": "5.7.1",
               "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
               "dev": true
             }
           }
@@ -5666,7 +5666,7 @@
     "@lerna/bootstrap": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/bootstrap/-/bootstrap-3.21.0.tgz",
-      "integrity": "sha1-vNG2Ub5bCXCyDY+uBMhkVIEjrtY=",
+      "integrity": "sha512-mtNHlXpmvJn6JTu0KcuTTPl2jLsDNud0QacV/h++qsaKbhAaJr/FElNZ5s7MwZFUM3XaDmvWzHKaszeBMHIbBw==",
       "dev": true,
       "requires": {
         "@lerna/command": "3.21.0",
@@ -5697,7 +5697,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -5709,7 +5709,7 @@
             "semver": {
               "version": "5.7.1",
               "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
               "dev": true
             }
           }
@@ -5725,7 +5725,7 @@
     "@lerna/changed": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/changed/-/changed-3.21.0.tgz",
-      "integrity": "sha1-EI4V9nm/4HevUA9YJIxjTxBE6gs=",
+      "integrity": "sha512-hzqoyf8MSHVjZp0gfJ7G8jaz+++mgXYiNs9iViQGA8JlN/dnWLI5sWDptEH3/B30Izo+fdVz0S0s7ydVE3pWIw==",
       "dev": true,
       "requires": {
         "@lerna/collect-updates": "3.20.0",
@@ -5737,7 +5737,7 @@
     "@lerna/check-working-tree": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/check-working-tree/-/check-working-tree-3.16.5.tgz",
-      "integrity": "sha1-tPiuYbtFI1Yd+5+PjYdN1Gu0S6o=",
+      "integrity": "sha512-xWjVBcuhvB8+UmCSb5tKVLB5OuzSpw96WEhS2uz6hkWVa/Euh1A0/HJwn2cemyK47wUrCQXtczBUiqnq9yX5VQ==",
       "dev": true,
       "requires": {
         "@lerna/collect-uncommitted": "3.16.5",
@@ -5748,7 +5748,7 @@
     "@lerna/child-process": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/child-process/-/child-process-3.16.5.tgz",
-      "integrity": "sha1-OPo8GAZKpKwHVK2AEUd2p7NqabI=",
+      "integrity": "sha512-vdcI7mzei9ERRV4oO8Y1LHBZ3A5+ampRKg1wq5nutLsUA4mEBN6H7JqjWOMY9xZemv6+kATm2ofjJ3lW5TszQg==",
       "dev": true,
       "requires": {
         "chalk": "^2.3.1",
@@ -5759,7 +5759,7 @@
     "@lerna/clean": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/clean/-/clean-3.21.0.tgz",
-      "integrity": "sha1-wLRrUwDMPa4s2jvsFLgDCC2jhW0=",
+      "integrity": "sha512-b/L9l+MDgE/7oGbrav6rG8RTQvRiZLO1zTcG17zgJAAuhlsPxJExMlh2DFwJEVi2les70vMhHfST3Ue1IMMjpg==",
       "dev": true,
       "requires": {
         "@lerna/command": "3.21.0",
@@ -5783,7 +5783,7 @@
     "@lerna/cli": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/cli/-/cli-3.18.5.tgz",
-      "integrity": "sha1-yQxGFUL801ttWwFaKQ+w2/tB0kI=",
+      "integrity": "sha512-erkbxkj9jfc89vVs/jBLY/fM0I80oLmJkFUV3Q3wk9J3miYhP14zgVEBsPZY68IZlEjT6T3Xlq2xO1AVaatHsA==",
       "dev": true,
       "requires": {
         "@lerna/global-options": "3.13.0",
@@ -5795,13 +5795,13 @@
         "ansi-regex": {
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha1-i5+PCM8ay4Q3Vqg5yox+MWjFGZc=",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
           "dev": true
         },
         "cliui": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
-          "integrity": "sha1-3u/P2y6AB4SqNPRvoI4GhRx7u8U=",
+          "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
           "dev": true,
           "requires": {
             "string-width": "^3.1.0",
@@ -5818,7 +5818,7 @@
         "find-up": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-          "integrity": "sha1-SRafHXmTQwZG2mHsxa41XCHJe3M=",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
           "dev": true,
           "requires": {
             "locate-path": "^3.0.0"
@@ -5833,7 +5833,7 @@
         "locate-path": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-          "integrity": "sha1-2+w7OrdZdYBxtY/ln8QYca8hQA4=",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
           "dev": true,
           "requires": {
             "p-locate": "^3.0.0",
@@ -5843,7 +5843,7 @@
         "p-limit": {
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-          "integrity": "sha1-PdM8ZHohT9//2DWTPrCG2g3CHbE=",
+          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
           "dev": true,
           "requires": {
             "p-try": "^2.0.0"
@@ -5852,7 +5852,7 @@
         "p-locate": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-          "integrity": "sha1-Mi1poFwCZLJZl9n0DNiokasAZKQ=",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
           "dev": true,
           "requires": {
             "p-limit": "^2.0.0"
@@ -5861,13 +5861,13 @@
         "p-try": {
           "version": "2.2.0",
           "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-          "integrity": "sha1-yyhoVA4xPWHeWPr741zpAE1VQOY=",
+          "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
           "dev": true
         },
         "string-width": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-          "integrity": "sha1-InZ74htirxCBV0MG9prFG2IgOWE=",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
           "dev": true,
           "requires": {
             "emoji-regex": "^7.0.1",
@@ -5878,7 +5878,7 @@
         "strip-ansi": {
           "version": "5.2.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-          "integrity": "sha1-jJpTb+tq/JYr36WxBKUJHBrZwK4=",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
           "dev": true,
           "requires": {
             "ansi-regex": "^4.1.0"
@@ -5887,7 +5887,7 @@
         "wrap-ansi": {
           "version": "5.1.0",
           "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
-          "integrity": "sha1-H9H2cjXVttD+54EFYAG/tpTAOwk=",
+          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
           "dev": true,
           "requires": {
             "ansi-styles": "^3.2.0",
@@ -5898,7 +5898,7 @@
         "yargs": {
           "version": "14.2.3",
           "resolved": "https://registry.npmjs.org/yargs/-/yargs-14.2.3.tgz",
-          "integrity": "sha1-Ghw+3O0a+yov6jNgS8bR2NaIpBQ=",
+          "integrity": "sha512-ZbotRWhF+lkjijC/VhmOT9wSgyBQ7+zr13+YLkhfsSiTriYsMzkTUFP18pFhWwBeMa5gUc1MzbhrO6/VB7c9Xg==",
           "dev": true,
           "requires": {
             "cliui": "^5.0.0",
@@ -5929,7 +5929,7 @@
     "@lerna/collect-uncommitted": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/collect-uncommitted/-/collect-uncommitted-3.16.5.tgz",
-      "integrity": "sha1-pJTWGqwxzceuxLvlLJZVAnQTLmM=",
+      "integrity": "sha512-ZgqnGwpDZiWyzIQVZtQaj9tRizsL4dUOhuOStWgTAw1EMe47cvAY2kL709DzxFhjr6JpJSjXV5rZEAeU3VE0Hg==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -5941,7 +5941,7 @@
     "@lerna/collect-updates": {
       "version": "3.20.0",
       "resolved": "https://registry.npmjs.org/@lerna/collect-updates/-/collect-updates-3.20.0.tgz",
-      "integrity": "sha1-YvnXa6IaJbfZ+/McAt6IdEpWS9E=",
+      "integrity": "sha512-qBTVT5g4fupVhBFuY4nI/3FSJtQVcDh7/gEPOpRxoXB/yCSnT38MFHXWl+y4einLciCjt/+0x6/4AG80fjay2Q==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -5954,7 +5954,7 @@
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-          "integrity": "sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q=",
+          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
           "dev": true
         }
       }
@@ -5962,7 +5962,7 @@
     "@lerna/command": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/command/-/command-3.21.0.tgz",
-      "integrity": "sha1-miODdZ3HtwDaz6iiKy86bhkBIfc=",
+      "integrity": "sha512-T2bu6R8R3KkH5YoCKdutKv123iUgUbW8efVjdGCDnCMthAQzoentOJfDeodBwn0P2OqCl3ohsiNVtSn9h78fyQ==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -5980,7 +5980,7 @@
     "@lerna/conventional-commits": {
       "version": "3.22.0",
       "resolved": "https://registry.npmjs.org/@lerna/conventional-commits/-/conventional-commits-3.22.0.tgz",
-      "integrity": "sha1-J5j0iB7i70V72uAnq30L8K9vHgk=",
+      "integrity": "sha512-z4ZZk1e8Mhz7+IS8NxHr64wyklHctCJyWpJKEZZPJiLFJ8yKto/x38O80R10pIzC0rr8Sy/OsjSH4bl0TbbgqA==",
       "dev": true,
       "requires": {
         "@lerna/validation-error": "3.13.0",
@@ -6019,7 +6019,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6031,7 +6031,7 @@
             "semver": {
               "version": "5.7.1",
               "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
               "dev": true
             }
           }
@@ -6041,7 +6041,7 @@
     "@lerna/create": {
       "version": "3.22.0",
       "resolved": "https://registry.npmjs.org/@lerna/create/-/create-3.22.0.tgz",
-      "integrity": "sha1-1rvQN8PcW0Jf5fbRuBcFfCePdhk=",
+      "integrity": "sha512-MdiQQzCcB4E9fBF1TyMOaAEz9lUjIHp1Ju9H7f3lXze5JK6Fl5NYkouAvsLgY6YSIhXMY8AHW2zzXeBDY4yWkw==",
       "dev": true,
       "requires": {
         "@evocateur/pacote": "^9.6.3",
@@ -6067,7 +6067,7 @@
         "@nodelib/fs.stat": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
-          "integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=",
+          "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
           "dev": true
         },
         "array-union": {
@@ -6091,7 +6091,7 @@
         "fast-glob": {
           "version": "2.2.7",
           "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",
-          "integrity": "sha1-aVOFfDr6R1//ku5gFdUtpwpM050=",
+          "integrity": "sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==",
           "dev": true,
           "requires": {
             "@mrmlnc/readdir-enhanced": "^2.2.1",
@@ -6116,7 +6116,7 @@
         "globby": {
           "version": "9.2.0",
           "resolved": "https://registry.npmjs.org/globby/-/globby-9.2.0.tgz",
-          "integrity": "sha1-/QKacGxwPSm90XD0tts6P3p8tj0=",
+          "integrity": "sha512-ollPHROa5mcxDEkwg6bPt3QbEf4pDQSNtd6JPL1YvOvAo/7/0VAm9TccUeoTmarjPw4pfUthSCqcyfNB1I3ZSg==",
           "dev": true,
           "requires": {
             "@types/glob": "^7.1.1",
@@ -6132,7 +6132,7 @@
         "ignore": {
           "version": "4.0.6",
           "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
-          "integrity": "sha1-dQ49tYYgh7RzfrrIIH/9HvJ7Jfw=",
+          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
           "dev": true
         },
         "jsonfile": {
@@ -6147,7 +6147,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6159,7 +6159,7 @@
             "semver": {
               "version": "5.7.1",
               "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
               "dev": true
             }
           }
@@ -6167,7 +6167,7 @@
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-          "integrity": "sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q=",
+          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
           "dev": true
         },
         "tr46": {
@@ -6201,7 +6201,7 @@
     "@lerna/create-symlink": {
       "version": "3.16.2",
       "resolved": "https://registry.npmjs.org/@lerna/create-symlink/-/create-symlink-3.16.2.tgz",
-      "integrity": "sha1-QSy45Zpy9afZRj5ORyGtIHAUmWc=",
+      "integrity": "sha512-pzXIJp6av15P325sgiIRpsPXLFmkisLhMBCy4764d+7yjf2bzrJ4gkWVMhsv4AdF0NN3OyZ5jjzzTtLNqfR+Jw==",
       "dev": true,
       "requires": {
         "@zkochan/cmd-shim": "^3.1.0",
@@ -6234,7 +6234,7 @@
     "@lerna/describe-ref": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/describe-ref/-/describe-ref-3.16.5.tgz",
-      "integrity": "sha1-ozjCWq7YN9PccLinLER8XGY0asA=",
+      "integrity": "sha512-c01+4gUF0saOOtDBzbLMFOTJDHTKbDFNErEY6q6i9QaXuzy9LNN62z+Hw4acAAZuJQhrVWncVathcmkkjvSVGw==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6244,7 +6244,7 @@
     "@lerna/diff": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/diff/-/diff-3.21.0.tgz",
-      "integrity": "sha1-5t8Ni5kWFn/1pJ/LAqwGQkKApo0=",
+      "integrity": "sha512-5viTR33QV3S7O+bjruo1SaR40m7F2aUHJaDAC7fL9Ca6xji+aw1KFkpCtVlISS0G8vikUREGMJh+c/VMSc8Usw==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6256,7 +6256,7 @@
     "@lerna/exec": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/exec/-/exec-3.21.0.tgz",
-      "integrity": "sha1-F/B1M4k8uRihe0G8xWbcQ3AW2yY=",
+      "integrity": "sha512-iLvDBrIE6rpdd4GIKTY9mkXyhwsJ2RvQdB9ZU+/NhR3okXfqKc6py/24tV111jqpXTtZUW6HNydT4dMao2hi1Q==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6279,7 +6279,7 @@
     "@lerna/filter-options": {
       "version": "3.20.0",
       "resolved": "https://registry.npmjs.org/@lerna/filter-options/-/filter-options-3.20.0.tgz",
-      "integrity": "sha1-Dw9dWkeDhW7s5CBHCMyQLLyK9Zs=",
+      "integrity": "sha512-bmcHtvxn7SIl/R9gpiNMVG7yjx7WyT0HSGw34YVZ9B+3xF/83N3r5Rgtjh4hheLZ+Q91Or0Jyu5O3Nr+AwZe2g==",
       "dev": true,
       "requires": {
         "@lerna/collect-updates": "3.20.0",
@@ -6292,7 +6292,7 @@
     "@lerna/filter-packages": {
       "version": "3.18.0",
       "resolved": "https://registry.npmjs.org/@lerna/filter-packages/-/filter-packages-3.18.0.tgz",
-      "integrity": "sha1-ano3bShSCNsDqClYz7gXLhebTnA=",
+      "integrity": "sha512-6/0pMM04bCHNATIOkouuYmPg6KH3VkPCIgTfQmdkPJTullERyEQfNUKikrefjxo1vHOoCACDpy65JYyKiAbdwQ==",
       "dev": true,
       "requires": {
         "@lerna/validation-error": "3.13.0",
@@ -6303,7 +6303,7 @@
     "@lerna/get-npm-exec-opts": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/get-npm-exec-opts/-/get-npm-exec-opts-3.13.0.tgz",
-      "integrity": "sha1-0bVSywCIGZ/D5+Em+RTjmgjfnqU=",
+      "integrity": "sha512-Y0xWL0rg3boVyJk6An/vurKzubyJKtrxYv2sj4bB8Mc5zZ3tqtv0ccbOkmkXKqbzvNNF7VeUt1OJ3DRgtC/QZw==",
       "dev": true,
       "requires": {
         "npmlog": "^4.1.2"
@@ -6312,7 +6312,7 @@
     "@lerna/get-packed": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@lerna/get-packed/-/get-packed-3.16.0.tgz",
-      "integrity": "sha1-GzFrcG3O6Gx7qlXlCwh5WUR4Uv8=",
+      "integrity": "sha512-AjsFiaJzo1GCPnJUJZiTW6J1EihrPkc2y3nMu6m3uWFxoleklsSCyImumzVZJssxMi3CPpztj8LmADLedl9kXw==",
       "dev": true,
       "requires": {
         "fs-extra": "^8.1.0",
@@ -6354,7 +6354,7 @@
     "@lerna/github-client": {
       "version": "3.22.0",
       "resolved": "https://registry.npmjs.org/@lerna/github-client/-/github-client-3.22.0.tgz",
-      "integrity": "sha1-XYFqpPdnR+1zauZP+WK48Vw1TZU=",
+      "integrity": "sha512-O/GwPW+Gzr3Eb5bk+nTzTJ3uv+jh5jGho9BOqKlajXaOkMYGBELEAqV5+uARNGWZFvYAiF4PgqHb6aCUu7XdXg==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6367,7 +6367,7 @@
     "@lerna/gitlab-client": {
       "version": "3.15.0",
       "resolved": "https://registry.npmjs.org/@lerna/gitlab-client/-/gitlab-client-3.15.0.tgz",
-      "integrity": "sha1-kfTsjGl7WsV/fyW9UP5lnSSqlqY=",
+      "integrity": "sha512-OsBvRSejHXUBMgwWQqNoioB8sgzL/Pf1pOUhHKtkiMl6aAWjklaaq5HPMvTIsZPfS6DJ9L5OK2GGZuooP/5c8Q==",
       "dev": true,
       "requires": {
         "node-fetch": "^2.5.0",
@@ -6406,13 +6406,13 @@
     "@lerna/global-options": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/global-options/-/global-options-3.13.0.tgz",
-      "integrity": "sha1-IXZiKQ2watnPLEnY4xAO4o6uuuE=",
+      "integrity": "sha512-SlZvh1gVRRzYLVluz9fryY1nJpZ0FHDGB66U9tFfvnnxmueckRQxLopn3tXj3NU1kc3QANT2I5BsQkOqZ4TEFQ==",
       "dev": true
     },
     "@lerna/has-npm-version": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/has-npm-version/-/has-npm-version-3.16.5.tgz",
-      "integrity": "sha1-q4OVbyEdiSPqav6bl5s4zHOxUyY=",
+      "integrity": "sha512-WL7LycR9bkftyqbYop5rEGJ9sRFIV55tSGmbN1HLrF9idwOCD7CLrT64t235t3t4O5gehDnwKI5h2U3oxTrF8Q==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6422,7 +6422,7 @@
     "@lerna/import": {
       "version": "3.22.0",
       "resolved": "https://registry.npmjs.org/@lerna/import/-/import-3.22.0.tgz",
-      "integrity": "sha1-Gl8DlPOOI8T2QqEj5eFRfnDQaNI=",
+      "integrity": "sha512-uWOlexasM5XR6tXi4YehODtH9Y3OZrFht3mGUFFT3OIl2s+V85xIGFfqFGMTipMPAGb2oF1UBLL48kR43hRsOg==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6460,7 +6460,7 @@
     "@lerna/info": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/info/-/info-3.21.0.tgz",
-      "integrity": "sha1-dmlrZ2/bDzXUjIPGPB4yu143gU8=",
+      "integrity": "sha512-0XDqGYVBgWxUquFaIptW2bYSIu6jOs1BtkvRTWDDhw4zyEdp6q4eaMvqdSap1CG+7wM5jeLCi6z94wS0AuiuwA==",
       "dev": true,
       "requires": {
         "@lerna/command": "3.21.0",
@@ -6471,7 +6471,7 @@
     "@lerna/init": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/init/-/init-3.21.0.tgz",
-      "integrity": "sha1-HoEJNNyL9OU4bAMQQYgdO0CWqlw=",
+      "integrity": "sha512-6CM0z+EFUkFfurwdJCR+LQQF6MqHbYDCBPyhu/d086LRf58GtYZYj49J8mKG9ktayp/TOIxL/pKKjgLD8QBPOg==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6512,7 +6512,7 @@
     "@lerna/link": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/link/-/link-3.21.0.tgz",
-      "integrity": "sha1-i+aP8MzuEEsXS1u9YGMCwvBunZs=",
+      "integrity": "sha512-tGu9GxrX7Ivs+Wl3w1+jrLi1nQ36kNI32dcOssij6bg0oZ2M2MDEFI9UF2gmoypTaN9uO5TSsjCFS7aR79HbdQ==",
       "dev": true,
       "requires": {
         "@lerna/command": "3.21.0",
@@ -6531,7 +6531,7 @@
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-          "integrity": "sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q=",
+          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
           "dev": true
         }
       }
@@ -6539,7 +6539,7 @@
     "@lerna/list": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/list/-/list-3.21.0.tgz",
-      "integrity": "sha1-Qvdvr6Vt6hO2keyMqxODJpHWHaI=",
+      "integrity": "sha512-KehRjE83B1VaAbRRkRy6jLX1Cin8ltsrQ7FHf2bhwhRHK0S54YuA6LOoBnY/NtA8bHDX/Z+G5sMY78X30NS9tg==",
       "dev": true,
       "requires": {
         "@lerna/command": "3.21.0",
@@ -6551,7 +6551,7 @@
     "@lerna/listable": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/listable/-/listable-3.18.5.tgz",
-      "integrity": "sha1-6CeYQFte2PxRhDyO8eeg5Jc4iho=",
+      "integrity": "sha512-Sdr3pVyaEv5A7ZkGGYR7zN+tTl2iDcinryBPvtuv20VJrXBE8wYcOks1edBTcOWsPjCE/rMP4bo1pseyk3UTsg==",
       "dev": true,
       "requires": {
         "@lerna/query-graph": "3.18.5",
@@ -6562,7 +6562,7 @@
     "@lerna/log-packed": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@lerna/log-packed/-/log-packed-3.16.0.tgz",
-      "integrity": "sha1-+DmRBB7neySVY04URwtCJZ/SvBY=",
+      "integrity": "sha512-Fp+McSNBV/P2mnLUYTaSlG8GSmpXM7krKWcllqElGxvAqv6chk2K3c2k80MeVB4WvJ9tRjUUf+i7HUTiQ9/ckQ==",
       "dev": true,
       "requires": {
         "byte-size": "^5.0.1",
@@ -6574,7 +6574,7 @@
     "@lerna/npm-conf": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@lerna/npm-conf/-/npm-conf-3.16.0.tgz",
-      "integrity": "sha1-HBComuL2wu6WliVXc4aFMA03aCc=",
+      "integrity": "sha512-HbO3DUrTkCAn2iQ9+FF/eisDpWY5POQAOF1m7q//CZjdC2HSW3UYbKEGsSisFxSfaF9Z4jtrV+F/wX6qWs3CuA==",
       "dev": true,
       "requires": {
         "config-chain": "^1.1.11",
@@ -6584,7 +6584,7 @@
     "@lerna/npm-dist-tag": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/npm-dist-tag/-/npm-dist-tag-3.18.5.tgz",
-      "integrity": "sha1-nvmrt8EEB3sx9vqyLMc7MU1UrFU=",
+      "integrity": "sha512-xw0HDoIG6HreVsJND9/dGls1c+lf6vhu7yJoo56Sz5bvncTloYGLUppIfDHQr4ZvmPCK8rsh0euCVh2giPxzKQ==",
       "dev": true,
       "requires": {
         "@evocateur/npm-registry-fetch": "^4.0.0",
@@ -6597,7 +6597,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6609,7 +6609,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         }
       }
@@ -6617,7 +6617,7 @@
     "@lerna/npm-install": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/npm-install/-/npm-install-3.16.5.tgz",
-      "integrity": "sha1-1r/cFvgShdpmUVrkeSTW4njWN9M=",
+      "integrity": "sha512-hfiKk8Eku6rB9uApqsalHHTHY+mOrrHeWEs+gtg7+meQZMTS3kzv4oVp5cBZigndQr3knTLjwthT/FX4KvseFg==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6652,7 +6652,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6664,7 +6664,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         }
       }
@@ -6672,7 +6672,7 @@
     "@lerna/npm-publish": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/npm-publish/-/npm-publish-3.18.5.tgz",
-      "integrity": "sha1-JA5AOZWf2YFrScWwdCHhG1ywAK8=",
+      "integrity": "sha512-3etLT9+2L8JAx5F8uf7qp6iAtOLSMj+ZYWY6oUgozPi/uLqU0/gsMsEXh3F0+YVW33q0M61RpduBoAlOOZnaTg==",
       "dev": true,
       "requires": {
         "@evocateur/libnpmpublish": "^1.2.2",
@@ -6709,7 +6709,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6721,7 +6721,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         }
       }
@@ -6729,7 +6729,7 @@
     "@lerna/npm-run-script": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/npm-run-script/-/npm-run-script-3.16.5.tgz",
-      "integrity": "sha1-nC7IJFOibAtG7cC7fBWBbIIfXBU=",
+      "integrity": "sha512-1asRi+LjmVn3pMjEdpqKJZFT/3ZNpb+VVeJMwrJaV/3DivdNg7XlPK9LTrORuKU4PSvhdEZvJmSlxCKyDpiXsQ==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -6740,7 +6740,7 @@
     "@lerna/otplease": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/otplease/-/otplease-3.18.5.tgz",
-      "integrity": "sha1-t3uOdgtAq62fdljZiPPqd9T9AjE=",
+      "integrity": "sha512-S+SldXAbcXTEDhzdxYLU0ZBKuYyURP/ND2/dK6IpKgLxQYh/z4ScljPDMyKymmEvgiEJmBsPZAAPfmNPEzxjog==",
       "dev": true,
       "requires": {
         "@lerna/prompt": "3.18.5",
@@ -6750,7 +6750,7 @@
     "@lerna/output": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/output/-/output-3.13.0.tgz",
-      "integrity": "sha1-Pe18yQiyephyIopjDZUK7a56SYk=",
+      "integrity": "sha512-7ZnQ9nvUDu/WD+bNsypmPG5MwZBwu86iRoiW6C1WBuXXDxM5cnIAC1m2WxHeFnjyMrYlRXM9PzOQ9VDD+C15Rg==",
       "dev": true,
       "requires": {
         "npmlog": "^4.1.2"
@@ -6759,7 +6759,7 @@
     "@lerna/pack-directory": {
       "version": "3.16.4",
       "resolved": "https://registry.npmjs.org/@lerna/pack-directory/-/pack-directory-3.16.4.tgz",
-      "integrity": "sha1-Pq5fkb31rP4DhFEO1T+t3EwHRpM=",
+      "integrity": "sha512-uxSF0HZeGyKaaVHz5FroDY9A5NDDiCibrbYR6+khmrhZtY0Bgn6hWq8Gswl9iIlymA+VzCbshWIMX4o2O8C8ng==",
       "dev": true,
       "requires": {
         "@lerna/get-packed": "3.16.0",
@@ -6775,7 +6775,7 @@
         "npm-packlist": {
           "version": "1.4.8",
           "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz",
-          "integrity": "sha1-Vu5swTW5+YrT1Rwcldoiu7my7z4=",
+          "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==",
           "dev": true,
           "requires": {
             "ignore-walk": "^3.0.1",
@@ -6788,7 +6788,7 @@
     "@lerna/package": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@lerna/package/-/package-3.16.0.tgz",
-      "integrity": "sha1-fgpG5Gl+2LipwU1Zx/iQ4NOLoTw=",
+      "integrity": "sha512-2lHBWpaxcBoiNVbtyLtPUuTYEaB/Z+eEqRS9duxpZs6D+mTTZMNy6/5vpEVSCBmzvdYpyqhqaYjjSLvjjr5Riw==",
       "dev": true,
       "requires": {
         "load-json-file": "^5.3.0",
@@ -6799,7 +6799,7 @@
         "load-json-file": {
           "version": "5.3.0",
           "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-5.3.0.tgz",
-          "integrity": "sha1-TTweAfocA+p4pgrHr5MsnOU0A/M=",
+          "integrity": "sha512-cJGP40Jc/VXUsp8/OrnyKyTZ1y6v/dphm3bioS+RrKXjK2BB6wHUd6JptZEFDGgGahMT+InnZO5i1Ei9mpC8Bw==",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.15",
@@ -6812,7 +6812,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6824,13 +6824,13 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         },
         "type-fest": {
           "version": "0.3.1",
           "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.3.1.tgz",
-          "integrity": "sha1-Y9ANIE4FlHT+Xht8ARESu9HcKeE=",
+          "integrity": "sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==",
           "dev": true
         }
       }
@@ -6838,7 +6838,7 @@
     "@lerna/package-graph": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/package-graph/-/package-graph-3.18.5.tgz",
-      "integrity": "sha1-x0Di6jV40FnlUWM+lQaQgxuUH2s=",
+      "integrity": "sha512-8QDrR9T+dBegjeLr+n9WZTVxUYUhIUjUgZ0gvNxUBN8S1WB9r6H5Yk56/MVaB64tA3oGAN9IIxX6w0WvTfFudA==",
       "dev": true,
       "requires": {
         "@lerna/prerelease-id-from-version": "3.16.0",
@@ -6851,7 +6851,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -6863,7 +6863,7 @@
             "semver": {
               "version": "5.7.1",
               "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
               "dev": true
             }
           }
@@ -6873,7 +6873,7 @@
     "@lerna/prerelease-id-from-version": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@lerna/prerelease-id-from-version/-/prerelease-id-from-version-3.16.0.tgz",
-      "integrity": "sha1-skv6eJ9eG6q5FNewi6rpt719g6E=",
+      "integrity": "sha512-qZyeUyrE59uOK8rKdGn7jQz+9uOpAaF/3hbslJVFL1NqF9ELDTqjCPXivuejMX/lN4OgD6BugTO4cR7UTq/sZA==",
       "dev": true,
       "requires": {
         "semver": "^6.2.0"
@@ -6882,7 +6882,7 @@
     "@lerna/profiler": {
       "version": "3.20.0",
       "resolved": "https://registry.npmjs.org/@lerna/profiler/-/profiler-3.20.0.tgz",
-      "integrity": "sha1-D23CNvTqj56l81jGcDMFpPMq0FE=",
+      "integrity": "sha512-bh8hKxAlm6yu8WEOvbLENm42i2v9SsR4WbrCWSbsmOElx3foRnMlYk7NkGECa+U5c3K4C6GeBbwgqs54PP7Ljg==",
       "dev": true,
       "requires": {
         "figgy-pudding": "^3.5.1",
@@ -6916,7 +6916,7 @@
     "@lerna/project": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/project/-/project-3.21.0.tgz",
-      "integrity": "sha1-XXhNLRDFYaAPIDILzbBAmXwQUC0=",
+      "integrity": "sha512-xT1mrpET2BF11CY32uypV2GPtPVm6Hgtha7D81GQP9iAitk9EccrdNjYGt5UBYASl4CIDXBRxwmTTVGfrCx82A==",
       "dev": true,
       "requires": {
         "@lerna/package": "3.16.0",
@@ -6936,7 +6936,7 @@
         "@nodelib/fs.stat": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
-          "integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=",
+          "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
           "dev": true
         },
         "array-union": {
@@ -6951,7 +6951,7 @@
         "cosmiconfig": {
           "version": "5.2.1",
           "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
-          "integrity": "sha1-BA9yaAnFked6F8CjYmykW08Wixo=",
+          "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
           "dev": true,
           "requires": {
             "import-fresh": "^2.0.0",
@@ -6972,7 +6972,7 @@
         "fast-glob": {
           "version": "2.2.7",
           "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",
-          "integrity": "sha1-aVOFfDr6R1//ku5gFdUtpwpM050=",
+          "integrity": "sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==",
           "dev": true,
           "requires": {
             "@mrmlnc/readdir-enhanced": "^2.2.1",
@@ -7018,7 +7018,7 @@
         "globby": {
           "version": "9.2.0",
           "resolved": "https://registry.npmjs.org/globby/-/globby-9.2.0.tgz",
-          "integrity": "sha1-/QKacGxwPSm90XD0tts6P3p8tj0=",
+          "integrity": "sha512-ollPHROa5mcxDEkwg6bPt3QbEf4pDQSNtd6JPL1YvOvAo/7/0VAm9TccUeoTmarjPw4pfUthSCqcyfNB1I3ZSg==",
           "dev": true,
           "requires": {
             "@types/glob": "^7.1.1",
@@ -7034,7 +7034,7 @@
         "ignore": {
           "version": "4.0.6",
           "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
-          "integrity": "sha1-dQ49tYYgh7RzfrrIIH/9HvJ7Jfw=",
+          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
           "dev": true
         },
         "import-fresh": {
@@ -7058,7 +7058,7 @@
         "load-json-file": {
           "version": "5.3.0",
           "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-5.3.0.tgz",
-          "integrity": "sha1-TTweAfocA+p4pgrHr5MsnOU0A/M=",
+          "integrity": "sha512-cJGP40Jc/VXUsp8/OrnyKyTZ1y6v/dphm3bioS+RrKXjK2BB6wHUd6JptZEFDGgGahMT+InnZO5i1Ei9mpC8Bw==",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.15",
@@ -7077,13 +7077,13 @@
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-          "integrity": "sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q=",
+          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
           "dev": true
         },
         "type-fest": {
           "version": "0.3.1",
           "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.3.1.tgz",
-          "integrity": "sha1-Y9ANIE4FlHT+Xht8ARESu9HcKeE=",
+          "integrity": "sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==",
           "dev": true
         }
       }
@@ -7091,7 +7091,7 @@
     "@lerna/prompt": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/prompt/-/prompt-3.18.5.tgz",
-      "integrity": "sha1-YozVRfIliH0GBJGrld+JnPxSGKE=",
+      "integrity": "sha512-rkKj4nm1twSbBEb69+Em/2jAERK8htUuV8/xSjN0NPC+6UjzAwY52/x9n5cfmpa9lyKf/uItp7chCI7eDmNTKQ==",
       "dev": true,
       "requires": {
         "inquirer": "^6.2.0",
@@ -7214,7 +7214,7 @@
     "@lerna/publish": {
       "version": "3.22.1",
       "resolved": "https://registry.npmjs.org/@lerna/publish/-/publish-3.22.1.tgz",
-      "integrity": "sha1-tPfOP7oemvsovkofPYgiImm6lRk=",
+      "integrity": "sha512-PG9CM9HUYDreb1FbJwFg90TCBQooGjj+n/pb3gw/eH5mEDq0p8wKdLFe0qkiqUkm/Ub5C8DbVFertIo0Vd0zcw==",
       "dev": true,
       "requires": {
         "@evocateur/libnpmaccess": "^3.1.2",
@@ -7272,7 +7272,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -7284,7 +7284,7 @@
             "semver": {
               "version": "5.7.1",
               "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
               "dev": true
             }
           }
@@ -7300,7 +7300,7 @@
     "@lerna/pulse-till-done": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/pulse-till-done/-/pulse-till-done-3.13.0.tgz",
-      "integrity": "sha1-yOnOW6+vENkwpn1+0My12Vj+ARA=",
+      "integrity": "sha512-1SOHpy7ZNTPulzIbargrgaJX387csN7cF1cLOGZiJQA6VqnS5eWs2CIrG8i8wmaUavj2QlQ5oEbRMVVXSsGrzA==",
       "dev": true,
       "requires": {
         "npmlog": "^4.1.2"
@@ -7309,7 +7309,7 @@
     "@lerna/query-graph": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/query-graph/-/query-graph-3.18.5.tgz",
-      "integrity": "sha1-30gwu1FVJzADvzXo3aHDLQknvYY=",
+      "integrity": "sha512-50Lf4uuMpMWvJ306be3oQDHrWV42nai9gbIVByPBYJuVW8dT8O8pA3EzitNYBUdLL9/qEVbrR0ry1HD7EXwtRA==",
       "dev": true,
       "requires": {
         "@lerna/package-graph": "3.18.5",
@@ -7319,7 +7319,7 @@
     "@lerna/resolve-symlink": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@lerna/resolve-symlink/-/resolve-symlink-3.16.0.tgz",
-      "integrity": "sha1-N/xwlfq9vPMXwm63Tg0L3o79I4Y=",
+      "integrity": "sha512-Ibj5e7njVHNJ/NOqT4HlEgPFPtPLWsO7iu59AM5bJDcAJcR96mLZ7KGVIsS2tvaO7akMEJvt2P+ErwCdloG3jQ==",
       "dev": true,
       "requires": {
         "fs-extra": "^8.1.0",
@@ -7352,7 +7352,7 @@
     "@lerna/rimraf-dir": {
       "version": "3.16.5",
       "resolved": "https://registry.npmjs.org/@lerna/rimraf-dir/-/rimraf-dir-3.16.5.tgz",
-      "integrity": "sha1-BDFqtf/SkJZXqvOI6lAsuMLyCgk=",
+      "integrity": "sha512-bQlKmO0pXUsXoF8lOLknhyQjOZsCc0bosQDoX4lujBXSWxHVTg1VxURtWf2lUjz/ACsJVDfvHZbDm8kyBk5okA==",
       "dev": true,
       "requires": {
         "@lerna/child-process": "3.16.5",
@@ -7364,7 +7364,7 @@
     "@lerna/run": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/@lerna/run/-/run-3.21.0.tgz",
-      "integrity": "sha1-KjXshJeeTW5CR0/hSNMuXeHKyJE=",
+      "integrity": "sha512-fJF68rT3veh+hkToFsBmUJ9MHc9yGXA7LSDvhziAojzOb0AI/jBDp6cEcDQyJ7dbnplba2Lj02IH61QUf9oW0Q==",
       "dev": true,
       "requires": {
         "@lerna/command": "3.21.0",
@@ -7389,7 +7389,7 @@
     "@lerna/run-lifecycle": {
       "version": "3.16.2",
       "resolved": "https://registry.npmjs.org/@lerna/run-lifecycle/-/run-lifecycle-3.16.2.tgz",
-      "integrity": "sha1-Z7KI+OqWTbnqT7H7x3FdW7sLzgA=",
+      "integrity": "sha512-RqFoznE8rDpyyF0rOJy3+KjZCeTkO8y/OB9orPauR7G2xQ7PTdCpgo7EO6ZNdz3Al+k1BydClZz/j78gNCmL2A==",
       "dev": true,
       "requires": {
         "@lerna/npm-conf": "3.16.0",
@@ -7401,7 +7401,7 @@
     "@lerna/run-topologically": {
       "version": "3.18.5",
       "resolved": "https://registry.npmjs.org/@lerna/run-topologically/-/run-topologically-3.18.5.tgz",
-      "integrity": "sha1-PNY52iDpZ9dnLLiNsPdWuS8v38M=",
+      "integrity": "sha512-6N1I+6wf4hLOnPW+XDZqwufyIQ6gqoPfHZFkfWlvTQ+Ue7CuF8qIVQ1Eddw5HKQMkxqN10thKOFfq/9NQZ4NUg==",
       "dev": true,
       "requires": {
         "@lerna/query-graph": "3.18.5",
@@ -7412,13 +7412,13 @@
         "eventemitter3": {
           "version": "3.1.2",
           "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz",
-          "integrity": "sha1-LT1I+cNGaY/Og6hdfWZOmFNd9uc=",
+          "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==",
           "dev": true
         },
         "p-queue": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/p-queue/-/p-queue-4.0.0.tgz",
-          "integrity": "sha1-7Q7uh5iSftbywvX1t3/bIGGl00Y=",
+          "integrity": "sha512-3cRXXn3/O0o3+eVmUroJPSj/esxoEFIm0ZOno/T+NzG/VZgPOqQ8WKmlNqubSEpZmCIngEy34unkHGg83ZIBmg==",
           "dev": true,
           "requires": {
             "eventemitter3": "^3.1.0"
@@ -7429,7 +7429,7 @@
     "@lerna/symlink-binary": {
       "version": "3.17.0",
       "resolved": "https://registry.npmjs.org/@lerna/symlink-binary/-/symlink-binary-3.17.0.tgz",
-      "integrity": "sha1-j4AxswmGOBSIPT8AmHf4Ljiu9Fo=",
+      "integrity": "sha512-RLpy9UY6+3nT5J+5jkM5MZyMmjNHxZIZvXLV+Q3MXrf7Eaa1hNqyynyj4RO95fxbS+EZc4XVSk25DGFQbcRNSQ==",
       "dev": true,
       "requires": {
         "@lerna/create-symlink": "3.16.2",
@@ -7469,7 +7469,7 @@
     "@lerna/symlink-dependencies": {
       "version": "3.17.0",
       "resolved": "https://registry.npmjs.org/@lerna/symlink-dependencies/-/symlink-dependencies-3.17.0.tgz",
-      "integrity": "sha1-SNY2DphYZaDlbNi1GzCKUmMIeEo=",
+      "integrity": "sha512-KmjU5YT1bpt6coOmdFueTJ7DFJL4H1w5eF8yAQ2zsGNTtZ+i5SGFBWpb9AQaw168dydc3s4eu0W0Sirda+F59Q==",
       "dev": true,
       "requires": {
         "@lerna/create-symlink": "3.16.2",
@@ -7512,13 +7512,13 @@
     "@lerna/timer": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/timer/-/timer-3.13.0.tgz",
-      "integrity": "sha1-vNCQRVHbFuCDZNbBjl4hYPyHB4E=",
+      "integrity": "sha512-RHWrDl8U4XNPqY5MQHkToWS9jHPnkLZEt5VD+uunCKTfzlxGnRCr3/zVr8VGy/uENMYpVP3wJa4RKGY6M0vkRw==",
       "dev": true
     },
     "@lerna/validation-error": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/validation-error/-/validation-error-3.13.0.tgz",
-      "integrity": "sha1-yGuPB8WrlTn3db2KVJdukm83WcM=",
+      "integrity": "sha512-SiJP75nwB8GhgwLKQfdkSnDufAaCbkZWJqEDlKOUPUvVOplRGnfL+BPQZH5nvq2BYSRXsksXWZ4UHVnQZI/HYA==",
       "dev": true,
       "requires": {
         "npmlog": "^4.1.2"
@@ -7527,7 +7527,7 @@
     "@lerna/version": {
       "version": "3.22.1",
       "resolved": "https://registry.npmjs.org/@lerna/version/-/version-3.22.1.tgz",
-      "integrity": "sha1-mAWpJHpH7mLWuBvZ+l+3KLJLWeI=",
+      "integrity": "sha512-PSGt/K1hVqreAFoi3zjD0VEDupQ2WZVlVIwesrE5GbrL2BjXowjCsTDPqblahDUPy0hp6h7E2kG855yLTp62+g==",
       "dev": true,
       "requires": {
         "@lerna/check-working-tree": "3.16.5",
@@ -7561,7 +7561,7 @@
         "load-json-file": {
           "version": "5.3.0",
           "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-5.3.0.tgz",
-          "integrity": "sha1-TTweAfocA+p4pgrHr5MsnOU0A/M=",
+          "integrity": "sha512-cJGP40Jc/VXUsp8/OrnyKyTZ1y6v/dphm3bioS+RrKXjK2BB6wHUd6JptZEFDGgGahMT+InnZO5i1Ei9mpC8Bw==",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.15",
@@ -7580,13 +7580,13 @@
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-          "integrity": "sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q=",
+          "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
           "dev": true
         },
         "type-fest": {
           "version": "0.3.1",
           "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.3.1.tgz",
-          "integrity": "sha1-Y9ANIE4FlHT+Xht8ARESu9HcKeE=",
+          "integrity": "sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==",
           "dev": true
         }
       }
@@ -7594,7 +7594,7 @@
     "@lerna/write-log-file": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@lerna/write-log-file/-/write-log-file-3.13.0.tgz",
-      "integrity": "sha1-t42eTPwTSai+ZNkTJMTIGZ6CKiY=",
+      "integrity": "sha512-RibeMnDPvlL8bFYW5C8cs4mbI3AHfQef73tnJCQ/SgrXZHehmHnsyWUiE7qDQCAo+B1RfTapvSyFF69iPj326A==",
       "dev": true,
       "requires": {
         "npmlog": "^4.1.2",
@@ -7604,7 +7604,7 @@
         "write-file-atomic": {
           "version": "2.4.3",
           "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz",
-          "integrity": "sha1-H9Lprh3z51uNjDZ0Q8aS1MqB9IE=",
+          "integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.11",
@@ -7634,7 +7634,7 @@
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
-      "integrity": "sha1-UkryQNGjYFJ7cwR17PoTRKpUDd4=",
+      "integrity": "sha512-bPHp6Ji8b41szTOcaP63VlnbbO5Ny6dwAATtY6JTjh5N2OLrb5Qk/Th5cRkRQhkWCt+EJsYrNB0MiL+Gpn6e3g==",
       "dev": true,
       "requires": {
         "call-me-maybe": "^1.0.1",
@@ -9610,13 +9610,13 @@
     "@octokit/plugin-enterprise-rest": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/@octokit/plugin-enterprise-rest/-/plugin-enterprise-rest-6.0.1.tgz",
-      "integrity": "sha1-4HiWc5YY2rjafUB3xlgAN3X5VDc=",
+      "integrity": "sha512-93uGjlhUD+iNg1iWhUENAtJata6w5nE+V4urXOAlIXdco6xNZtUSfYY8dzp3Udy74aqO/B5UZL80x/YMa5PKRw==",
       "dev": true
     },
     "@octokit/plugin-paginate-rest": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-1.1.2.tgz",
-      "integrity": "sha1-AEFwrPjCvlNauiZyeGfWkve0iPw=",
+      "integrity": "sha512-jbsSoi5Q1pj63sC16XIUboklNw+8tL9VOnJsWycWYR78TKss5PVpIPb1TUUcMQ+bBh7cY579cVAWmf5qG+dw+Q==",
       "dev": true,
       "requires": {
         "@octokit/types": "^2.0.1"
@@ -9625,7 +9625,7 @@
         "@octokit/types": {
           "version": "2.16.2",
           "resolved": "https://registry.npmjs.org/@octokit/types/-/types-2.16.2.tgz",
-          "integrity": "sha1-TF+No8b+zz2hgRrvZ4/aA+2sNdI=",
+          "integrity": "sha512-O75k56TYvJ8WpAakWwYRN8Bgu60KrmX0z1KqFp1kNiFNkgW+JW+9EBKZ+S33PU6SLvbihqd+3drvPxKK68Ee8Q==",
           "dev": true,
           "requires": {
             "@types/node": ">= 8"
@@ -9642,7 +9642,7 @@
     "@octokit/plugin-rest-endpoint-methods": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-2.4.0.tgz",
-      "integrity": "sha1-Mojs9UgfaMSU3QYC/BVAeln69h4=",
+      "integrity": "sha512-EZi/AWhtkdfAYi01obpX0DF7U6b1VRr30QNQ5xSFPITMdLSfhcBqjamE3F+sKcxPbD7eZuMHu3Qkk2V+JGxBDQ==",
       "dev": true,
       "requires": {
         "@octokit/types": "^2.0.1",
@@ -9652,7 +9652,7 @@
         "@octokit/types": {
           "version": "2.16.2",
           "resolved": "https://registry.npmjs.org/@octokit/types/-/types-2.16.2.tgz",
-          "integrity": "sha1-TF+No8b+zz2hgRrvZ4/aA+2sNdI=",
+          "integrity": "sha512-O75k56TYvJ8WpAakWwYRN8Bgu60KrmX0z1KqFp1kNiFNkgW+JW+9EBKZ+S33PU6SLvbihqd+3drvPxKK68Ee8Q==",
           "dev": true,
           "requires": {
             "@types/node": ">= 8"
@@ -9702,7 +9702,7 @@
     "@octokit/request-error": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-1.2.1.tgz",
-      "integrity": "sha1-7eBxTHc/MjR1dsJWSdwBOuazGAE=",
+      "integrity": "sha512-+6yDyk1EES6WK+l3viRDElw96MvwfJxCt45GvmjDUKWjYIb3PJZQkq3i46TwGwoPD4h8NmTrENmtyA1FwbmhRA==",
       "dev": true,
       "requires": {
         "@octokit/types": "^2.0.0",
@@ -9713,7 +9713,7 @@
         "@octokit/types": {
           "version": "2.16.2",
           "resolved": "https://registry.npmjs.org/@octokit/types/-/types-2.16.2.tgz",
-          "integrity": "sha1-TF+No8b+zz2hgRrvZ4/aA+2sNdI=",
+          "integrity": "sha512-O75k56TYvJ8WpAakWwYRN8Bgu60KrmX0z1KqFp1kNiFNkgW+JW+9EBKZ+S33PU6SLvbihqd+3drvPxKK68Ee8Q==",
           "dev": true,
           "requires": {
             "@types/node": ">= 8"
@@ -9724,7 +9724,7 @@
     "@octokit/rest": {
       "version": "16.43.2",
       "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-16.43.2.tgz",
-      "integrity": "sha1-xTQm8eHRBE3ulnAj4yecUJk92Rs=",
+      "integrity": "sha512-ngDBevLbBTFfrHZeiS7SAMAZ6ssuVmXuya+F/7RaVvlysgGa1JKJkKWY+jV6TCJYcW0OALfJ7nTIGXcBXzycfQ==",
       "dev": true,
       "requires": {
         "@octokit/auth-token": "^2.4.0",
@@ -9867,7 +9867,7 @@
     "@restart/context": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
-      "integrity": "sha1-qZ2HwpmjTCi9hbtInLB7/SMUnAI="
+      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
     },
     "@restart/hooks": {
       "version": "0.3.27",
@@ -11321,7 +11321,7 @@
     "@zkochan/cmd-shim": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@zkochan/cmd-shim/-/cmd-shim-3.1.0.tgz",
-      "integrity": "sha1-KrjtgfW7VFKoXyV1jrm4aBmC/S4=",
+      "integrity": "sha512-o8l0+x7C7sMZU3v9GuJIAU10qQLtwR1dtRQIOmlNMtyaqhmpXOzx1HWiYoWfmmf9HHZoAkXpc9TM9PQYF9d4Jg==",
       "dev": true,
       "requires": {
         "is-windows": "^1.0.0",
@@ -11775,7 +11775,7 @@
     "array-differ": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-2.1.0.tgz",
-      "integrity": "sha1-S5wcPxS5BnVwgpJXaeirkE9IAbE=",
+      "integrity": "sha512-KbUpJgx909ZscOc/7CLATBFam7P1Z1QRQInvgT0UztM9Q72aGKCunKASAl7WNW0tnPmPyEMeMhdsfWhfmW037w==",
       "dev": true
     },
     "array-each": {
@@ -12376,7 +12376,7 @@
     "babel-jest": {
       "version": "25.1.0",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-25.1.0.tgz",
-      "integrity": "sha1-IGCTrDgKS3jEQEoFsydzkSePgPs=",
+      "integrity": "sha512-tz0VxUhhOE2y+g8R2oFrO/2VtVjA1lkJeavlhExuRBg3LdNJY9gwQ+Vcvqt9+cqy71MCTJhewvTB7Qtnnr9SWg==",
       "dev": true,
       "requires": {
         "@jest/transform": "^25.1.0",
@@ -12422,7 +12422,7 @@
         "chalk": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha1-P3PCv1JlkfV0zEksUeJFY0n4ROQ=",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
           "dev": true,
           "requires": {
             "ansi-styles": "^4.1.0",
@@ -12432,7 +12432,7 @@
         "color-convert": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
           "dev": true,
           "requires": {
             "color-name": "~1.1.4"
@@ -12441,19 +12441,19 @@
         "color-name": {
           "version": "1.1.4",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
+          "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": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "dev": true,
           "requires": {
             "has-flag": "^4.0.0"
@@ -14448,7 +14448,7 @@
     "byte-size": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/byte-size/-/byte-size-5.0.1.tgz",
-      "integrity": "sha1-S2UQOaXs2Wdn5xo9ftOA5IvtQZE=",
+      "integrity": "sha512-/XuKeqWocKsYa/cBY1YbSJSWWqTi4cFgr9S6OyM7PBaPbr9zvNGwWP33vt0uqGhwDdN+y3yhbXVILEUpnwEWGw==",
       "dev": true
     },
     "bytes": {
@@ -14683,7 +14683,7 @@
     "camelcase-keys": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
-      "integrity": "sha1-XnVda6UaoiPsfT1S8ld4IQ+dw8A=",
+      "integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==",
       "dev": true,
       "requires": {
         "camelcase": "^5.3.1",
@@ -15283,7 +15283,7 @@
     "command-exists": {
       "version": "1.2.9",
       "resolved": "https://registry.npmjs.org/command-exists/-/command-exists-1.2.9.tgz",
-      "integrity": "sha1-xQclrzgIyKsCYP1gsB+/oluVT2k=",
+      "integrity": "sha512-LTQ/SGc+s0Xc0Fu5WaKnR0YiygZkm9eKFvyS+fRsU7/ZWFF8ykFM6Pc9aCVf1+xasOOZpO3BAVgVrKvsqKHV7w==",
       "dev": true
     },
     "commander": {
@@ -15593,7 +15593,7 @@
     "conventional-changelog-core": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/conventional-changelog-core/-/conventional-changelog-core-3.2.3.tgz",
-      "integrity": "sha1-sxQQhW9DHIRwhqfctNLKGEp9iPs=",
+      "integrity": "sha512-LMMX1JlxPIq/Ez5aYAYS5CpuwbOk6QFp8O4HLAcZxe3vxoCtABkhfjetk8IYdRB9CDQGwJFLR3Dr55Za6XKgUQ==",
       "dev": true,
       "requires": {
         "conventional-changelog-writer": "^4.0.6",
@@ -15635,7 +15635,7 @@
         "through2": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.2.tgz",
-          "integrity": "sha1-mfiJMc/HYex2eLQdXXM2tbage/Q=",
+          "integrity": "sha512-enaDQ4MUyP2W6ZyT6EsMzqBPZaM/avg8iuo+l2d3QCs0J+6RaqkHV/2/lOwDTueBHeJ/2LG9lrLW3d5rWPucuQ==",
           "dev": true,
           "requires": {
             "inherits": "^2.0.4",
@@ -15647,7 +15647,7 @@
     "conventional-changelog-preset-loader": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/conventional-changelog-preset-loader/-/conventional-changelog-preset-loader-2.3.4.tgz",
-      "integrity": "sha1-FKhVq7/9WQJ/1gJYHx802YYupEw=",
+      "integrity": "sha512-GEKRWkrSAZeTq5+YjUZOYxdHq+ci4dNwHvpaBC3+ENalzFWuCWa9EZXSuZBpkr72sMdKB+1fyDV4takK1Lf58g==",
       "dev": true
     },
     "conventional-changelog-writer": {
@@ -15717,7 +15717,7 @@
     "conventional-recommended-bump": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/conventional-recommended-bump/-/conventional-recommended-bump-5.0.1.tgz",
-      "integrity": "sha1-WvY5A5R7bgied3Z2ActZLKuxBro=",
+      "integrity": "sha512-RVdt0elRcCxL90IrNP0fYCpq1uGt2MALko0eyeQ+zQuDVWtMGAy9ng6yYn3kax42lCj9+XBxQ8ZN6S9bdKxDhQ==",
       "dev": true,
       "requires": {
         "concat-stream": "^2.0.0",
@@ -15750,7 +15750,7 @@
         "concat-stream": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
-          "integrity": "sha1-QUz1r3kKSMYKub5FJ9VtXkETPLE=",
+          "integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==",
           "dev": true,
           "requires": {
             "buffer-from": "^1.0.0",
@@ -15774,7 +15774,7 @@
         "meow": {
           "version": "4.0.1",
           "resolved": "https://registry.npmjs.org/meow/-/meow-4.0.1.tgz",
-          "integrity": "sha1-1IWY9vSxRy81v2MXqVlFrONH+XU=",
+          "integrity": "sha512-xcSBHD5Z86zaOc+781KrupuHAzeGXSLtiAOmBsiLDiPSaYSB6hdew2ng9EBAnZ62jagG9MHAOdxpDi/lWBFJ/A==",
           "dev": true,
           "requires": {
             "camelcase-keys": "^4.0.0",
@@ -15791,7 +15791,7 @@
         "minimist-options": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-3.0.2.tgz",
-          "integrity": "sha1-+6TIGRM54T7PTWG+sD8HAQPz2VQ=",
+          "integrity": "sha512-FyBrT/d0d4+uiZRbqznPXqw3IpZZG3gl3wKWiX784FycUKVwBt0uLBFkQrtE4tZOrgo78nZp2jnKz3L65T5LdQ==",
           "dev": true,
           "requires": {
             "arrify": "^1.0.1",
@@ -16566,7 +16566,7 @@
     "dateformat": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz",
-      "integrity": "sha1-puN0maTZqc+F71hyBE1ikByYia4=",
+      "integrity": "sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==",
       "dev": true
     },
     "deasync": {
@@ -16936,7 +16936,7 @@
     "deprecation": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz",
-      "integrity": "sha1-Y2jL20Cr8zc7UlrIfkomDDpwCRk=",
+      "integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==",
       "dev": true
     },
     "deps-sort": {
@@ -18842,7 +18842,7 @@
     "express-ws": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/express-ws/-/express-ws-4.0.0.tgz",
-      "integrity": "sha1-2r2NyXRRZBiQKkH+bjDtlJtNNsQ=",
+      "integrity": "sha512-KEyUw8AwRET2iFjFsI1EJQrJ/fHeGiJtgpYgEWG3yDv4l/To/m3a2GaYfeGyB3lsWdvbesjF5XCMx+SVBgAAYw==",
       "requires": {
         "ws": "^5.2.0"
       },
@@ -20818,7 +20818,7 @@
     "genfun": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/genfun/-/genfun-5.0.0.tgz",
-      "integrity": "sha1-ndlxCgaQClxKW/V6yl2k5S/nZTc=",
+      "integrity": "sha512-KGDOARWVga7+rnB3z9Sd2Letx515owfk0hSxHGuqjANb1M+x2bGZGqHLiozPsYMdM2OubeMni/Hpwmjq6qIUhA==",
       "dev": true
     },
     "gensync": {
@@ -21045,7 +21045,7 @@
     "get-port": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/get-port/-/get-port-4.2.0.tgz",
-      "integrity": "sha1-43Nosehjt2KcQ8WjI2Jflc8ksRk=",
+      "integrity": "sha512-/b3jarXkH8KJoOMQc3uVGHASwGLPq3gSFJ7tgJm2diza+bydJPTGOibin2steecKeOylE8oY2JERlVWkAJO6yw==",
       "dev": true
     },
     "get-stdin": {
@@ -21138,7 +21138,7 @@
     "git-raw-commits": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/git-raw-commits/-/git-raw-commits-2.0.0.tgz",
-      "integrity": "sha1-2Srd90RAwUvMXIPszj+3+KeRGLU=",
+      "integrity": "sha512-w4jFEJFgKXMQJ0H0ikBk2S+4KP2VEjhCvLCNqbNRQC8BgGWgLKNCO7a9K9LI+TVT7Gfoloje502sEnctibffgg==",
       "dev": true,
       "requires": {
         "dargs": "^4.0.1",
@@ -21180,7 +21180,7 @@
         "meow": {
           "version": "4.0.1",
           "resolved": "https://registry.npmjs.org/meow/-/meow-4.0.1.tgz",
-          "integrity": "sha1-1IWY9vSxRy81v2MXqVlFrONH+XU=",
+          "integrity": "sha512-xcSBHD5Z86zaOc+781KrupuHAzeGXSLtiAOmBsiLDiPSaYSB6hdew2ng9EBAnZ62jagG9MHAOdxpDi/lWBFJ/A==",
           "dev": true,
           "requires": {
             "camelcase-keys": "^4.0.0",
@@ -21197,7 +21197,7 @@
         "minimist-options": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-3.0.2.tgz",
-          "integrity": "sha1-+6TIGRM54T7PTWG+sD8HAQPz2VQ=",
+          "integrity": "sha512-FyBrT/d0d4+uiZRbqznPXqw3IpZZG3gl3wKWiX784FycUKVwBt0uLBFkQrtE4tZOrgo78nZp2jnKz3L65T5LdQ==",
           "dev": true,
           "requires": {
             "arrify": "^1.0.1",
@@ -21285,7 +21285,7 @@
     "git-semver-tags": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/git-semver-tags/-/git-semver-tags-2.0.3.tgz",
-      "integrity": "sha1-SJiKcYrPWTgA+ZYiqVKnfEBb+jQ=",
+      "integrity": "sha512-tj4FD4ww2RX2ae//jSrXZzrocla9db5h0V7ikPl1P/WwoZar9epdUhwR7XHXSgc+ZkNq72BEEerqQuicoEQfzA==",
       "dev": true,
       "requires": {
         "meow": "^4.0.0",
@@ -21324,7 +21324,7 @@
         "meow": {
           "version": "4.0.1",
           "resolved": "https://registry.npmjs.org/meow/-/meow-4.0.1.tgz",
-          "integrity": "sha1-1IWY9vSxRy81v2MXqVlFrONH+XU=",
+          "integrity": "sha512-xcSBHD5Z86zaOc+781KrupuHAzeGXSLtiAOmBsiLDiPSaYSB6hdew2ng9EBAnZ62jagG9MHAOdxpDi/lWBFJ/A==",
           "dev": true,
           "requires": {
             "camelcase-keys": "^4.0.0",
@@ -21341,7 +21341,7 @@
         "minimist-options": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-3.0.2.tgz",
-          "integrity": "sha1-+6TIGRM54T7PTWG+sD8HAQPz2VQ=",
+          "integrity": "sha512-FyBrT/d0d4+uiZRbqznPXqw3IpZZG3gl3wKWiX784FycUKVwBt0uLBFkQrtE4tZOrgo78nZp2jnKz3L65T5LdQ==",
           "dev": true,
           "requires": {
             "arrify": "^1.0.1",
@@ -22077,7 +22077,7 @@
     "hard-rejection": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz",
-      "integrity": "sha1-HG7aXBaFxjlCdm15u0Cudzzs2IM=",
+      "integrity": "sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==",
       "dev": true
     },
     "harmony-reflect": {
@@ -22730,7 +22730,7 @@
     "init-package-json": {
       "version": "1.10.3",
       "resolved": "https://registry.npmjs.org/init-package-json/-/init-package-json-1.10.3.tgz",
-      "integrity": "sha1-Rf/i9hCoyhNPK9HbVjeyNQcPbL4=",
+      "integrity": "sha512-zKSiXKhQveNteyhcj1CoOP8tqp1QuxPIPBl8Bid99DGLFqA1p87M6lNgfjJHSBoWJJlidGOv5rWjyYKEB3g2Jw==",
       "dev": true,
       "requires": {
         "glob": "^7.1.1",
@@ -22746,7 +22746,7 @@
         "npm-package-arg": {
           "version": "6.1.1",
           "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-          "integrity": "sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=",
+          "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
           "dev": true,
           "requires": {
             "hosted-git-info": "^2.7.1",
@@ -22758,7 +22758,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         }
       }
@@ -29199,7 +29199,7 @@
     "lerna": {
       "version": "3.22.1",
       "resolved": "https://registry.npmjs.org/lerna/-/lerna-3.22.1.tgz",
-      "integrity": "sha1-ggJ6w9qcYn/YvwLM/v+AapjmW2I=",
+      "integrity": "sha512-vk1lfVRFm+UuEFA7wkLKeSF7Iz13W+N/vFd48aW2yuS7Kv0RbNm2/qcDPV863056LMfkRlsEe+QYOw3palj5Lg==",
       "dev": true,
       "requires": {
         "@lerna/add": "3.21.0",
@@ -29662,7 +29662,7 @@
     "lodash.template": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
-      "integrity": "sha1-+XYZXPPzR9DV9SSDVp/oAxzM6Ks=",
+      "integrity": "sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==",
       "dev": true,
       "requires": {
         "lodash._reinterpolate": "^3.0.0",
@@ -29672,7 +29672,7 @@
     "lodash.templatesettings": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz",
-      "integrity": "sha1-5IExDwSdPPbUfpEq0JMTsVTw+zM=",
+      "integrity": "sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==",
       "dev": true,
       "requires": {
         "lodash._reinterpolate": "^3.0.0"
@@ -30357,7 +30357,7 @@
     "min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
-      "integrity": "sha1-pj9oFnOzBXH76LwlaGrnRu76mGk=",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
       "dev": true
     },
     "mini-css-extract-plugin": {
@@ -30465,7 +30465,7 @@
     "minimist-options": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz",
-      "integrity": "sha1-wGVXE8U6ii69d/+iR9NCxA8BBhk=",
+      "integrity": "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==",
       "dev": true,
       "requires": {
         "arrify": "^1.0.1",
@@ -31272,7 +31272,7 @@
     "modify-values": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz",
-      "integrity": "sha1-s5OfpgVUZHTj4+PGPWS9Q7TuYCI=",
+      "integrity": "sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==",
       "dev": true
     },
     "module-deps": {
@@ -31619,7 +31619,7 @@
     "multimatch": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-3.0.0.tgz",
-      "integrity": "sha1-DiU0zGvCONmrZ+G5zV/Nhabb9ws=",
+      "integrity": "sha512-22foS/gqQfANZ3o+W7ST2x25ueHDVNWl/b9OlGcLpy/iKxjCpvcNCM51YCenUi7Mt/jAjjqv8JwZRs8YP5sRjA==",
       "dev": true,
       "requires": {
         "array-differ": "^2.0.3",
@@ -31666,7 +31666,7 @@
     "mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
-      "integrity": "sha1-lQCAV6Vsr63CvGPd5/n/aVWUjjI=",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
       "dev": true,
       "requires": {
         "any-promise": "^1.0.0",
@@ -32348,7 +32348,7 @@
     "node-fetch-npm": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/node-fetch-npm/-/node-fetch-npm-2.0.4.tgz",
-      "integrity": "sha1-ZQfQ4XqewL477FFpWKSXzsVL9aQ=",
+      "integrity": "sha512-iOuIQDWDyjhv9qSDrj9aq/klt6F9z1p2otB3AV7v3zBDcL/x+OfGsvGQZZCcMZbUf4Ujw1xGNQkjvGnVT22cKg==",
       "dev": true,
       "requires": {
         "encoding": "^0.1.11",
@@ -35386,7 +35386,7 @@
     "npm-lifecycle": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/npm-lifecycle/-/npm-lifecycle-3.1.5.tgz",
-      "integrity": "sha1-mILTZCuMgsgVeCoS5qG/7tACYwk=",
+      "integrity": "sha512-lDLVkjfZmvmfvpvBzA4vzee9cn+Me4orq0QF8glbswJVEbIcSNWib7qGOffolysc3teCqbbPZZkzbr3GQZTL1g==",
       "dev": true,
       "requires": {
         "byline": "^5.0.0",
@@ -35402,7 +35402,7 @@
         "node-gyp": {
           "version": "5.1.1",
           "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-5.1.1.tgz",
-          "integrity": "sha1-65Ffe2Mck30oLjOu1Ey3oCX2Kj4=",
+          "integrity": "sha512-WH0WKGi+a4i4DUt2mHnvocex/xPLp9pYt5R6M2JdFB7pJ7Z34hveZ4nDTGTiLXCkitA9T8HFZjhinBCiVHYcWw==",
           "dev": true,
           "requires": {
             "env-paths": "^2.2.0",
@@ -35421,7 +35421,7 @@
         "nopt": {
           "version": "4.0.3",
           "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz",
-          "integrity": "sha1-o3XK2dAv2SEnjZVMIlTVqlfhXkg=",
+          "integrity": "sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==",
           "dev": true,
           "requires": {
             "abbrev": "1",
@@ -35431,7 +35431,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         }
       }
@@ -37523,7 +37523,7 @@
     "octokit-pagination-methods": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/octokit-pagination-methods/-/octokit-pagination-methods-1.1.0.tgz",
-      "integrity": "sha1-z0cu3J1VEFX573P25CtNu0yAvqQ=",
+      "integrity": "sha512-fZ4qZdQ2nxJvtcasX7Ghl+WlWS/d9IgnBIwFZXVNNZUmzpno91SX5bc5vuxiuKoCtK78XxGGNuSCrDC7xYB3OQ==",
       "dev": true
     },
     "on-finished": {
@@ -37985,7 +37985,7 @@
     "os-name": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/os-name/-/os-name-3.1.0.tgz",
-      "integrity": "sha1-3sGdlmKW4c1i1wGlpm7h3ernCAE=",
+      "integrity": "sha512-h8L+8aNjNcMpo/mAIBPn5PXCM16iyPGjHNWo6U1YO8sJTMHtEtyczI6QJnLoplswm6goopQkqc7OAnjhWcugVg==",
       "dev": true,
       "requires": {
         "macos-release": "^2.2.0",
@@ -39626,7 +39626,7 @@
     "prop-types-extra": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
-      "integrity": "sha1-WMO3TL+7ldMEYll1qi8ISDKaAQs=",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
       "requires": {
         "react-is": "^16.3.2",
         "warning": "^4.0.0"
@@ -39653,7 +39653,7 @@
     "protoduck": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/protoduck/-/protoduck-5.0.1.tgz",
-      "integrity": "sha1-A8NlnKGAB7aaUP2Cp+vMUWJhFR8=",
+      "integrity": "sha512-WxoCeDCoCBY55BMvj4cAEjdVUFGRWed9ZxPlqTKYyw1nDDTQ4pqmnIMAGfJlg7Dx35uB/M+PHJPTmGOvaCaPTg==",
       "dev": true,
       "requires": {
         "genfun": "^5.0.0"
@@ -39865,7 +39865,7 @@
     "quick-lru": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz",
-      "integrity": "sha1-W4h48ROlgheEjGSCAmxz4bpXcn8=",
+      "integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==",
       "dev": true
     },
     "raf-schd": {
@@ -40048,7 +40048,7 @@
     "react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha1-TxonOv38jzSIqMUWv9p4+HI1I2I="
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
     "react-overlays": {
       "version": "5.1.1",
@@ -40156,7 +40156,7 @@
     "read-cmd-shim": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/read-cmd-shim/-/read-cmd-shim-1.0.5.tgz",
-      "integrity": "sha1-h+Q+ulAJi6WjLQzrWDq45DuWHBY=",
+      "integrity": "sha512-v5yCqQ/7okKoZZkBQUAfTsQ3sVJtXdNfbPnI5cceppoxEVLYA3k+VtV2omkeo8MS94JCy4fSiUwlRBAwCVRPUA==",
       "dev": true,
       "requires": {
         "graceful-fs": "^4.1.2"
@@ -40228,7 +40228,7 @@
     "read-package-tree": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/read-package-tree/-/read-package-tree-5.3.1.tgz",
-      "integrity": "sha1-oyy2TH8x64pvMe8G+c7fdAaP5jY=",
+      "integrity": "sha512-mLUDsD5JVtlZxjSlPPx1RETkNjjvQYuweKwNVt1Sn8kP5Jh44pvYuUHCp6xSVDZWbNxVxG5lyZJ921aJH61sTw==",
       "dev": true,
       "requires": {
         "read-package-json": "^2.0.0",
@@ -40417,7 +40417,7 @@
     "redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
-      "integrity": "sha1-5Ve3mYMWu1PJ8fVvpiY1LGljBZ8=",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
       "dev": true,
       "requires": {
         "indent-string": "^4.0.0",
@@ -42366,7 +42366,7 @@
     "solc": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/solc/-/solc-0.7.4.tgz",
-      "integrity": "sha1-nF7YGuBpLj5hTkfNW1ALD5SFuY0=",
+      "integrity": "sha512-IVLqAfUkJqgTS0JIgFPeC50ehUeBXu2eE+iU+rqb6UeOyf6w/BB/EsNcTSTpjtUti8BTG/sCd2qVhrWVYy7p0g==",
       "dev": true,
       "requires": {
         "command-exists": "^1.2.8",
@@ -42383,7 +42383,7 @@
         "commander": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/commander/-/commander-3.0.2.tgz",
-          "integrity": "sha1-aDfD+2d62ZM9HPukLdFNURfWs54=",
+          "integrity": "sha512-Gar0ASD4BDyKC4hl4DwHqDrmvjoxWKZigVnAbn5H1owvm4CxCPdb0HQDehwNYMJpla5+M2tPmPARzhtYuwpHow==",
           "dev": true
         },
         "fs-extra": {
@@ -42411,7 +42411,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         },
         "tmp": {
@@ -42592,7 +42592,7 @@
     "split": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz",
-      "integrity": "sha1-YFvZvjA6pZ+zX5Ip++oN3snqB9k=",
+      "integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==",
       "dev": true,
       "requires": {
         "through": "2"
@@ -43077,7 +43077,7 @@
     "strip-indent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
-      "integrity": "sha1-wy4c7pQLazQyx3G8LFS8znPNMAE=",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
       "dev": true,
       "requires": {
         "min-indent": "^1.0.0"
@@ -43091,7 +43091,7 @@
     "strong-log-transformer": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/strong-log-transformer/-/strong-log-transformer-2.1.0.tgz",
-      "integrity": "sha1-D17XjTJeBCGsb5D38Q5pHWrjrhA=",
+      "integrity": "sha512-B3Hgul+z0L9a236FAUC9iZsL+nVHgoCJnqCbN588DjYxvGXaXaaFbfmQ/JhvKjZwsOukuR72XbHv71Qkug0HxA==",
       "dev": true,
       "requires": {
         "duplexer": "^0.1.1",
@@ -43936,7 +43936,7 @@
         "make-dir": {
           "version": "1.3.0",
           "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
-          "integrity": "sha1-ecEDO4BRW9bSTsmTPoYMp17ifww=",
+          "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
           "dev": true,
           "requires": {
             "pify": "^3.0.0"
@@ -44188,7 +44188,7 @@
     "text-extensions": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/text-extensions/-/text-extensions-1.9.0.tgz",
-      "integrity": "sha1-GFPkX+45yUXOb2w2stZZtaq8KiY=",
+      "integrity": "sha512-wiBrwC1EhBelW12Zy26JeOUkQ5mRu+5o8rpsJk5+2t+Y5vE7e842qtZDQ2g1NpX/29HdyFeJ4nSIhI47ENSxlQ==",
       "dev": true
     },
     "text-hex": {
@@ -44205,7 +44205,7 @@
     "thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
-      "integrity": "sha1-iTLmhqQGYDigFt2eLKRq3Zg4qV8=",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
       "dev": true,
       "requires": {
         "any-promise": "^1.0.0"
@@ -45285,7 +45285,7 @@
     "universal-user-agent": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-4.0.1.tgz",
-      "integrity": "sha1-/Y1st3OmeacJ6WfvgoijH8wD5Vc=",
+      "integrity": "sha512-LnST3ebHwVL2aNe4mejI9IQh2HfZ1RLo8Io2HugSif8ekzD1TlWpHpColOB/eh8JHMLkGH3Akqf040I+4ylNxg==",
       "dev": true,
       "requires": {
         "os-name": "^3.1.0"
@@ -45924,7 +45924,7 @@
     "warning": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
-      "integrity": "sha1-Fungd+uKhtavfWSqHgX9hbRnjKM=",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
       "requires": {
         "loose-envify": "^1.0.0"
       }
@@ -47422,7 +47422,7 @@
     "write-json-file": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/write-json-file/-/write-json-file-3.2.0.tgz",
-      "integrity": "sha1-Zbvcns2KFFjhWVJ3DMut/P9f5io=",
+      "integrity": "sha512-3xZqT7Byc2uORAatYiP3DHUUAVEkNOswEWNs9H5KXiicRTvzYzYqKjYc4G7p+8pltvAw641lVByKVtMpf+4sYQ==",
       "dev": true,
       "requires": {
         "detect-indent": "^5.0.0",
@@ -47445,7 +47445,7 @@
         "write-file-atomic": {
           "version": "2.4.3",
           "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz",
-          "integrity": "sha1-H9Lprh3z51uNjDZ0Q8aS1MqB9IE=",
+          "integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.11",
@@ -47458,7 +47458,7 @@
     "write-pkg": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/write-pkg/-/write-pkg-3.2.0.tgz",
-      "integrity": "sha1-DheP6Xgg04mokovHlTXb5ows/yE=",
+      "integrity": "sha512-tX2ifZ0YqEFOF1wjRW2Pk93NLsj02+n1UP5RvO6rCs0K6R2g1padvf006cY74PQJKMGS2r42NK7FD0dG6Y6paw==",
       "dev": true,
       "requires": {
         "sort-keys": "^2.0.0",
@@ -47468,7 +47468,7 @@
         "make-dir": {
           "version": "1.3.0",
           "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
-          "integrity": "sha1-ecEDO4BRW9bSTsmTPoYMp17ifww=",
+          "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
           "dev": true,
           "requires": {
             "pify": "^3.0.0"
@@ -47492,7 +47492,7 @@
         "write-file-atomic": {
           "version": "2.4.3",
           "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz",
-          "integrity": "sha1-H9Lprh3z51uNjDZ0Q8aS1MqB9IE=",
+          "integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.11",

From 02121efcae4e27a39b58fc2a25b0a2ff96e95689 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Mon, 3 Jan 2022 12:49:51 +0100
Subject: [PATCH 055/168] panel resize

---
 apps/remix-ide/src/app/panels/layout.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/remix-ide/src/app/panels/layout.ts b/apps/remix-ide/src/app/panels/layout.ts
index 05fbe1642d..f24b5271ce 100644
--- a/apps/remix-ide/src/app/panels/layout.ts
+++ b/apps/remix-ide/src/app/panels/layout.ts
@@ -40,7 +40,7 @@ export class Layout extends Plugin {
       this.event.emit('change', null)
     })
     this.on('tabs', 'switchApp', (name: string) => {
-      this.call('mainPanel', 'showContent', name)
+      this.call('mainPanel', 'showCotent', name)
       this.panels.editor.active = false
       this.panels.main.active = true
       this.event.emit('change', null)

From 0ba71eed4709675d5e2f127e062a43b3f9f84568 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Mon, 3 Jan 2022 12:50:04 +0100
Subject: [PATCH 056/168] panel resize

---
 .../panel/src/lib/dragbar/dragbar.tsx         | 29 +++++++++----------
 .../panel/src/lib/main/main-panel.tsx         |  6 ++--
 .../panel/src/lib/plugins/panel-plugin.tsx    |  1 -
 libs/remix-ui/panel/src/lib/plugins/panel.css | 11 ++++++-
 4 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/libs/remix-ui/panel/src/lib/dragbar/dragbar.tsx b/libs/remix-ui/panel/src/lib/dragbar/dragbar.tsx
index 902f68c307..b574a36967 100644
--- a/libs/remix-ui/panel/src/lib/dragbar/dragbar.tsx
+++ b/libs/remix-ui/panel/src/lib/dragbar/dragbar.tsx
@@ -12,27 +12,26 @@ interface IRemixDragBarUi {
 const DragBar = (props: IRemixDragBarUi) => {
   const [dragState, setDragState] = useState<boolean>(false)
   const [dragBarPosY, setDragBarPosY] = useState<number>(0)
-  const [offset, setOffSet] = useState<number>(0)
   const nodeRef = React.useRef(null) // fix for strictmode
 
-  useEffect(() => {
-    // arbitrary time out to wait the the UI to be completely done
-    setTimeout(() => {
-      console.log(window.innerHeight)
-      console.log(props.refObject.current.offsetTop)
-      setOffSet(props.refObject.current.offsetTop)
-      setDragBarPosY(props.refObject.current.offsetTop)
-    }, 1000)
-  }, [props.refObject])
-
-  useEffect(() => {
-    // setDragBarPosX(offset + (props.hidden ? 0 : props.refObject.current.offsetHeight))
-  }, [props.hidden, offset])
-
   function stopDrag (e: MouseEvent, data: any) {
+    const h = window.innerHeight - data.y
+    props.refObject.current.setAttribute('style', `height: ${h}px;`)
+    setDragBarPosY(window.innerHeight - props.refObject.current.offsetHeight)
     setDragState(false)
   }
 
+  useEffect(() => {
+    function handleResize () {
+      setDragBarPosY(window.innerHeight - props.refObject.current.offsetHeight)
+    }
+    window.addEventListener('resize', handleResize)
+    // TODO: not a good way to wait on the ref doms element to be rendered of course
+    setTimeout(() =>
+      handleResize(), 2000)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
   function startDrag () {
     setDragState(true)
   }
diff --git a/libs/remix-ui/panel/src/lib/main/main-panel.tsx b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
index 12a9ef682f..621e74e3f3 100644
--- a/libs/remix-ui/panel/src/lib/main/main-panel.tsx
+++ b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
@@ -26,9 +26,9 @@ const RemixUIMainPanel = () => {
     let mainPanelHeight = containerHeight - delta
     mainPanelHeight = mainPanelHeight < 0 ? 0 : mainPanelHeight - 35
     // self.editor.resize((document.querySelector('#editorWrap') || {}).checked)
-    editorRef.current?.setAttribute('style', `height: ${mainPanelHeight}px`)
-    terminalRef.current?.setAttribute('style', `height: ${delta}px`)
-    mainPanelRef.current?.setAttribute('style', `height: ${mainPanelHeight}px`)
+    // editorRef.current?.setAttribute('style', `height: ${mainPanelHeight}px`)
+    terminalRef.current?.setAttribute('style', 'height: 100px;')
+    // mainPanelRef.current?.setAttribute('style', `height: ${mainPanelHeight}px`)
     // appContext.panels.editor.resize((document.querySelector('#editorWrap') || {}).checked)
     appContext.layout.panels.terminal.plugin.scroll2bottom()
   }
diff --git a/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx b/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx
index 9643eed05e..300b9b39d2 100644
--- a/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx
+++ b/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx
@@ -9,7 +9,6 @@ const RemixUIPanelPlugin = (props: panelPLuginProps, panelRef: any) => {
   const localRef = useRef<HTMLDivElement>(null)
   const [view, setView] = useState<JSX.Element | HTMLDivElement>()
   useEffect(() => {
-    console.log(panelRef)
     const ref:any = panelRef || localRef
     if (ref.current) {
       if (props.pluginRecord.view) {
diff --git a/libs/remix-ui/panel/src/lib/plugins/panel.css b/libs/remix-ui/panel/src/lib/plugins/panel.css
index 99da054827..c65731b855 100644
--- a/libs/remix-ui/panel/src/lib/plugins/panel.css
+++ b/libs/remix-ui/panel/src/lib/plugins/panel.css
@@ -93,4 +93,13 @@ iframe {
     width: 100%;
     border: 0;
     display: block;
-}
\ No newline at end of file
+}
+
+.mainPanel-wrap, .editor-wrap {
+    flex: 1;
+    min-height: 100px;
+}
+
+.terminal-wrap {
+    min-height: 35px;
+}

From 0b93c58fa73be3bbc029b7ce04785b1cd96022cd Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Mon, 3 Jan 2022 12:52:25 +0100
Subject: [PATCH 057/168] bug fix

---
 apps/remix-ide/src/app/panels/layout.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/remix-ide/src/app/panels/layout.ts b/apps/remix-ide/src/app/panels/layout.ts
index f24b5271ce..05fbe1642d 100644
--- a/apps/remix-ide/src/app/panels/layout.ts
+++ b/apps/remix-ide/src/app/panels/layout.ts
@@ -40,7 +40,7 @@ export class Layout extends Plugin {
       this.event.emit('change', null)
     })
     this.on('tabs', 'switchApp', (name: string) => {
-      this.call('mainPanel', 'showCotent', name)
+      this.call('mainPanel', 'showContent', name)
       this.panels.editor.active = false
       this.panels.main.active = true
       this.event.emit('change', null)

From 12c9419640aa80879ff726435f7ab82dd96a5c85 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Mon, 3 Jan 2022 13:38:22 +0100
Subject: [PATCH 058/168] cleanup

---
 libs/remix-ui/panel/.babelrc                  | 12 ++------
 .../panel/src/lib/dragbar/dragbar.tsx         |  2 +-
 .../panel/src/lib/main/main-panel.tsx         | 30 +------------------
 libs/remix-ui/solidity-unit-testing/.babelrc  | 12 ++------
 libs/remix-ui/theme-module/.babelrc           | 10 +------
 5 files changed, 7 insertions(+), 59 deletions(-)

diff --git a/libs/remix-ui/panel/.babelrc b/libs/remix-ui/panel/.babelrc
index ccae900be4..64a3748691 100644
--- a/libs/remix-ui/panel/.babelrc
+++ b/libs/remix-ui/panel/.babelrc
@@ -1,12 +1,4 @@
 {
-  "presets": [
-    [
-      "@nrwl/react/babel",
-      {
-        "runtime": "automatic",
-        "useBuiltIns": "usage"
-      }
-    ]
-  ],
+  "presets": ["@nrwl/react/babel"],
   "plugins": []
-}
+}
\ No newline at end of file
diff --git a/libs/remix-ui/panel/src/lib/dragbar/dragbar.tsx b/libs/remix-ui/panel/src/lib/dragbar/dragbar.tsx
index b574a36967..27506f1d12 100644
--- a/libs/remix-ui/panel/src/lib/dragbar/dragbar.tsx
+++ b/libs/remix-ui/panel/src/lib/dragbar/dragbar.tsx
@@ -6,7 +6,7 @@ interface IRemixDragBarUi {
   refObject: React.MutableRefObject<any>;
   setHideStatus: (hide: boolean) => void;
   hidden: boolean
-  minHeight: number
+  minHeight?: number
 }
 
 const DragBar = (props: IRemixDragBarUi) => {
diff --git a/libs/remix-ui/panel/src/lib/main/main-panel.tsx b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
index 621e74e3f3..512d83e92b 100644
--- a/libs/remix-ui/panel/src/lib/main/main-panel.tsx
+++ b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
@@ -16,27 +16,8 @@ const RemixUIMainPanel = () => {
 
   const refs = [tabsRef, editorRef, mainPanelRef, terminalRef]
 
-  const _adjustLayout = (delta: number) => {
-    if (!delta) return
-    console.log('adjustLayout', delta, terminalRef.current)
-    const limitDown = 32
-    const containerHeight = window.innerHeight
-    const tmp = delta - limitDown
-    delta = tmp > 0 ? tmp : 0
-    let mainPanelHeight = containerHeight - delta
-    mainPanelHeight = mainPanelHeight < 0 ? 0 : mainPanelHeight - 35
-    // self.editor.resize((document.querySelector('#editorWrap') || {}).checked)
-    // editorRef.current?.setAttribute('style', `height: ${mainPanelHeight}px`)
-    terminalRef.current?.setAttribute('style', 'height: 100px;')
-    // mainPanelRef.current?.setAttribute('style', `height: ${mainPanelHeight}px`)
-    // appContext.panels.editor.resize((document.querySelector('#editorWrap') || {}).checked)
-    appContext.layout.panels.terminal.plugin.scroll2bottom()
-  }
-
   const renderPanels = () => {
-    // console.log(appContext)
     if (appContext) {
-      console.log(appContext)
       const pluginPanels: PluginRecord[] = []
       Object.values(appContext.layout.panels).map((panel: any) => {
         pluginPanels.push({
@@ -48,17 +29,9 @@ const RemixUIMainPanel = () => {
       })
       // console.log(pluginPanels)
       setPlugins(pluginPanels)
-
-      appContext.layout.panels.terminal.plugin.event.register('resize', (delta: number) =>
-        _adjustLayout(delta)
-      )
     }
   }
 
-  useLayoutEffect(() => {
-    // _adjustLayout(70)
-  })
-
   useEffect(() => {
     renderPanels()
     console.log(appContext.layout)
@@ -71,10 +44,9 @@ const RemixUIMainPanel = () => {
   return (
     <div className="mainview">
       {Object.values(plugins).map((pluginRecord, i) => {
-        console.log(pluginRecord)
         return (
           <>
-            {(pluginRecord.profile.name === 'terminal') ? <DragBar key={'dragbar'} minHeight={32} hidden={false} setHideStatus={() => {}} refObject={terminalRef}></DragBar> : <></>}
+            {(pluginRecord.profile.name === 'terminal') ? <DragBar key='dragbar-terminal' hidden={false} setHideStatus={() => {}} refObject={terminalRef}></DragBar> : null}
             <RemixUIPanelPlugin
               ref={refs[i]}
               key={pluginRecord.profile.name}
diff --git a/libs/remix-ui/solidity-unit-testing/.babelrc b/libs/remix-ui/solidity-unit-testing/.babelrc
index ccae900be4..64a3748691 100644
--- a/libs/remix-ui/solidity-unit-testing/.babelrc
+++ b/libs/remix-ui/solidity-unit-testing/.babelrc
@@ -1,12 +1,4 @@
 {
-  "presets": [
-    [
-      "@nrwl/react/babel",
-      {
-        "runtime": "automatic",
-        "useBuiltIns": "usage"
-      }
-    ]
-  ],
+  "presets": ["@nrwl/react/babel"],
   "plugins": []
-}
+}
\ No newline at end of file
diff --git a/libs/remix-ui/theme-module/.babelrc b/libs/remix-ui/theme-module/.babelrc
index ccae900be4..09d67939cc 100644
--- a/libs/remix-ui/theme-module/.babelrc
+++ b/libs/remix-ui/theme-module/.babelrc
@@ -1,12 +1,4 @@
 {
-  "presets": [
-    [
-      "@nrwl/react/babel",
-      {
-        "runtime": "automatic",
-        "useBuiltIns": "usage"
-      }
-    ]
-  ],
+  "presets": ["@nrwl/react/babel"],
   "plugins": []
 }

From e76001446e7e58b5138db75e6ed8cadb27e2b64d Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Mon, 3 Jan 2022 13:43:38 +0100
Subject: [PATCH 059/168] ff size

---
 apps/remix-ide-e2e/nightwatch.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/remix-ide-e2e/nightwatch.ts b/apps/remix-ide-e2e/nightwatch.ts
index 2bc20e8274..b982fc0e77 100644
--- a/apps/remix-ide-e2e/nightwatch.ts
+++ b/apps/remix-ide-e2e/nightwatch.ts
@@ -78,7 +78,11 @@ module.exports = {
         javascriptEnabled: true,
         acceptSslCerts: true,
         'moz:firefoxOptions': {
-          args: ['-headless']
+          args: [
+            '--headless',
+            '--width=2560',
+            '--height=1440'
+          ]
         }
       }
     }

From f36fd2922e7911b87a66cb23258a1c255ecb17f8 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Mon, 3 Jan 2022 14:36:24 +0100
Subject: [PATCH 060/168] maximize browser e2e

---
 apps/remix-ide-e2e/src/helpers/init.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/remix-ide-e2e/src/helpers/init.ts b/apps/remix-ide-e2e/src/helpers/init.ts
index a5926bd028..e934ae2f7b 100644
--- a/apps/remix-ide-e2e/src/helpers/init.ts
+++ b/apps/remix-ide-e2e/src/helpers/init.ts
@@ -9,6 +9,7 @@ export default function (browser: NightwatchBrowser, callback: VoidFunction, url
     .switchBrowserTab(0)
     .waitForElementVisible('[id="remixTourSkipbtn"]')
     .click('[id="remixTourSkipbtn"]')
+    .maximizeWindow()
     .fullscreenWindow(() => {
       if (preloadPlugins) {
         initModules(browser, () => {

From 23f14241ea4edf07061e09f9f74a560804530abc Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Mon, 3 Jan 2022 14:54:53 +0100
Subject: [PATCH 061/168] minimize terminal

---
 apps/remix-ide/src/app.js                     |  2 +-
 apps/remix-ide/src/app/panels/layout.ts       | 14 ++-
 apps/remix-ide/src/lib/panels-resize.js       | 88 -------------------
 .../panel/src/lib/main/main-panel.tsx         |  4 +-
 libs/remix-ui/panel/src/lib/plugins/panel.css |  4 +
 .../src/lib/custom-hooks/useDragTerminal.tsx  | 77 ----------------
 .../terminal/src/lib/remix-ui-terminal.tsx    | 26 ++----
 7 files changed, 25 insertions(+), 190 deletions(-)
 delete mode 100644 apps/remix-ide/src/lib/panels-resize.js
 delete mode 100644 libs/remix-ui/terminal/src/lib/custom-hooks/useDragTerminal.tsx

diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index 3fba7b12b6..b4eb1dfdfe 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -302,7 +302,7 @@ class AppComponent {
       tabs: { plugin: tabProxy, active: true },
       editor: { plugin: editor, active: true },
       main: { plugin: appPanel, active: false },
-      terminal: { plugin: terminal, active: true }
+      terminal: { plugin: terminal, active: true, minimized: false }
     }
   }
 
diff --git a/apps/remix-ide/src/app/panels/layout.ts b/apps/remix-ide/src/app/panels/layout.ts
index 05fbe1642d..0ef900d9ed 100644
--- a/apps/remix-ide/src/app/panels/layout.ts
+++ b/apps/remix-ide/src/app/panels/layout.ts
@@ -5,12 +5,14 @@ import QueryParams from '../../lib/query-params'
 
 const profile: Profile = {
   name: 'layout',
-  description: 'layout'
+  description: 'layout',
+  methods: ['minimize']
 }
 
 interface panelState {
   active: boolean
   plugin: Plugin
+  minimized: boolean
 }
 interface panels {
   tabs: panelState
@@ -77,7 +79,15 @@ export class Layout extends Plugin {
     })
     const queryParams = new QueryParams()
     const params = queryParams.get()
-    // if (params.minimizeterminal) // this.mainView.minimizeTerminal()
+    if (params.minimizeterminal) {
+      this.panels.terminal.minimized = true
+      this.event.emit('change', null)
+    }
     // if (params.minimizesidepanel) // this.resizeFeature.hidePanel()
   }
+
+  minimize (name: string, minimized:boolean): void {
+    this.panels[name].minimized = minimized
+    this.event.emit('change', null)
+  }
 }
diff --git a/apps/remix-ide/src/lib/panels-resize.js b/apps/remix-ide/src/lib/panels-resize.js
deleted file mode 100644
index 157535a869..0000000000
--- a/apps/remix-ide/src/lib/panels-resize.js
+++ /dev/null
@@ -1,88 +0,0 @@
-const yo = require('yo-yo')
-const csjs = require('csjs-inject')
-
-const css = csjs`
-  .dragbar            {
-    width             : 2px;
-    height            : 100%;
-    cursor            : col-resize;
-    z-index           : 999;
-  }
-  .ghostbar           {
-    width             : 3px;
-    background-color  : var(--primary);
-    opacity           : 0.5;
-    position          : absolute;
-    cursor            : col-resize;
-    z-index           : 9999;
-    top               : 0;
-    bottom            : 0;
-  }
-`
-
-export default class PanelsResize {
-  constructor (panel) {
-    this.panel = panel
-    const string = panel.style.minWidth
-    this.minWidth = string.length > 2 ? parseInt(string.substring(0, string.length - 2)) : 0
-  }
-
-  render () {
-    this.ghostbar = yo`<div class=${css.ghostbar}></div>`
-
-    const mousedown = (event) => {
-      event.preventDefault()
-      if (event.which === 1) {
-        moveGhostbar(event)
-        document.body.appendChild(this.ghostbar)
-        document.addEventListener('mousemove', moveGhostbar)
-        document.addEventListener('mouseup', removeGhostbar)
-        document.addEventListener('keydown', cancelGhostbar)
-      }
-    }
-
-    const cancelGhostbar = (event) => {
-      if (event.keyCode === 27) {
-        document.body.removeChild(this.ghostbar)
-        document.removeEventListener('mousemove', moveGhostbar)
-        document.removeEventListener('mouseup', removeGhostbar)
-        document.removeEventListener('keydown', cancelGhostbar)
-      }
-    }
-
-    const moveGhostbar = (event) => {
-      this.ghostbar.style.left = event.x + 'px'
-    }
-
-    const removeGhostbar = (event) => {
-      document.body.removeChild(this.ghostbar)
-      document.removeEventListener('mousemove', moveGhostbar)
-      document.removeEventListener('mouseup', removeGhostbar)
-      document.removeEventListener('keydown', cancelGhostbar)
-      this.setPosition(event)
-    }
-
-    return yo`<div onmousedown=${mousedown} class=${css.dragbar}></div>`
-  }
-
-  calculatePanelWidth (event) {
-    return event.x - this.panel.offsetLeft
-  }
-
-  setPosition (event) {
-    const panelWidth = this.calculatePanelWidth(event)
-    // close the panel if the width is less than a minWidth
-    if (panelWidth > this.minWidth - 10 || this.panel.style.display === 'none') {
-      this.panel.style.width = panelWidth + 'px'
-      this.showPanel()
-    } else this.hidePanel()
-  }
-
-  hidePanel () {
-    this.panel.style.display = 'none'
-  }
-
-  showPanel () {
-    this.panel.style.display = 'flex'
-  }
-}
diff --git a/libs/remix-ui/panel/src/lib/main/main-panel.tsx b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
index 512d83e92b..a5af90b1ca 100644
--- a/libs/remix-ui/panel/src/lib/main/main-panel.tsx
+++ b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
@@ -24,10 +24,10 @@ const RemixUIMainPanel = () => {
           profile: panel.plugin.profile,
           active: panel.active,
           view: panel.plugin.profile.name === 'tabs' ? panel.plugin.renderTabsbar() : panel.plugin.render(),
-          class: panel.plugin.profile.name + '-wrap'
+          class: panel.plugin.profile.name + '-wrap ' + (panel.minimized ? 'minimized' : '')
         })
       })
-      // console.log(pluginPanels)
+      console.log(pluginPanels)
       setPlugins(pluginPanels)
     }
   }
diff --git a/libs/remix-ui/panel/src/lib/plugins/panel.css b/libs/remix-ui/panel/src/lib/plugins/panel.css
index c65731b855..7f01242c9f 100644
--- a/libs/remix-ui/panel/src/lib/plugins/panel.css
+++ b/libs/remix-ui/panel/src/lib/plugins/panel.css
@@ -103,3 +103,7 @@ iframe {
 .terminal-wrap {
     min-height: 35px;
 }
+
+.terminal-wrap.minimized {
+    height: 2rem !important;
+}
diff --git a/libs/remix-ui/terminal/src/lib/custom-hooks/useDragTerminal.tsx b/libs/remix-ui/terminal/src/lib/custom-hooks/useDragTerminal.tsx
deleted file mode 100644
index aba4bbf6a5..0000000000
--- a/libs/remix-ui/terminal/src/lib/custom-hooks/useDragTerminal.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React, { useEffect, useState } from 'react'
-
-export const useDragTerminal = (minHeight: number, defaultPosition: number) => {
-  const [isOpen, setIsOpen] = useState(defaultPosition > minHeight)
-  const [lastYPosition, setLastYPosition] = useState(0)
-  const [terminalPosition, setTerminalPosition] = useState(defaultPosition)
-  // Used to save position of the terminal when it is closed
-  const [lastTerminalPosition, setLastTerminalPosition] = useState(defaultPosition)
-  const [isDragging, setIsDragging] = useState(false)
-
-  const handleDraggingStart = (event: React.MouseEvent) => {
-    setLastYPosition(event.clientY)
-    setIsDragging(true)
-  }
-
-  const handleDragging = (event: MouseEvent) => {
-    event.preventDefault()
-
-    if (isDragging) {
-      const mouseYPosition = event.clientY
-      const difference = lastYPosition - mouseYPosition
-      const newTerminalPosition = terminalPosition + difference
-      setTerminalPosition(newTerminalPosition)
-      setLastYPosition(mouseYPosition)
-    }
-  }
-
-  const handleDraggingEnd = () => {
-    if (!isDragging) return
-
-    setIsDragging(false)
-
-    // Check terminal position to determine if it should be open or closed
-    setIsOpen(terminalPosition > minHeight)
-  }
-
-  const handleToggleTerminal = (event: React.MouseEvent<HTMLElement>) => {
-    event.preventDefault()
-    event.stopPropagation()
-
-    if (isOpen) {
-      setLastTerminalPosition(terminalPosition)
-      setLastYPosition(0)
-      setTerminalPosition(minHeight)
-    } else {
-      setTerminalPosition(lastTerminalPosition <= minHeight ? 323 : lastTerminalPosition)
-    }
-
-    setIsOpen(!isOpen)
-  }
-
-  // Add event listeners for dragging
-  useEffect(() => {
-    document.addEventListener('mousemove', handleDragging)
-    document.addEventListener('mouseup', handleDraggingEnd)
-
-    return () => {
-      document.removeEventListener('mousemove', handleDragging)
-      document.removeEventListener('mouseup', handleDraggingEnd)
-    }
-  }, [handleDragging, handleDraggingEnd])
-
-  // Reset terminal position
-  useEffect(() => {
-    if (!terminalPosition) {
-      setTerminalPosition(defaultPosition)
-    }
-  }, [terminalPosition, setTerminalPosition])
-
-  return {
-    isOpen,
-    terminalPosition,
-    isDragging,
-    handleDraggingStart,
-    handleToggleTerminal
-  }
-}
diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
index 0dd54256b5..df92ae9174 100644
--- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
+++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
@@ -18,7 +18,6 @@ import RenderKnownTransactions from './components/RenderKnownTransactions' // es
 import parse from 'html-react-parser'
 import { EMPTY_BLOCK, KNOWN_TRANSACTION, RemixUiTerminalProps, UNKNOWN_TRANSACTION } from './types/terminalTypes'
 import { wrapScript } from './utils/wrapScript'
-import { useDragTerminal } from './custom-hooks/useDragTerminal'
 
 /* eslint-disable-next-line */
 export interface ClipboardEvent<T = Element> extends SyntheticEvent<T, any> {
@@ -29,7 +28,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   const { call, _deps, on, config, event, gistHandler, version } = props.plugin
   const [_cmdIndex, setCmdIndex] = useState(-1)
   const [_cmdTemp, setCmdTemp] = useState('')
-
+  const [isOpen, setIsOpen] = useState<boolean>(true)
   const [newstate, dispatch] = useReducer(registerCommandReducer, initialState)
   const [cmdHistory, cmdHistoryDispatch] = useReducer(addCommandHistoryReducer, initialState)
   const [, scriptRunnerDispatch] = useReducer(registerScriptRunnerReducer, initialState)
@@ -80,24 +79,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   const terminalMenuOffsetHeight = (terminalMenu.current && terminalMenu.current.offsetHeight) || 35
   const terminalDefaultPosition = config.get('terminal-top-offset')
 
-  const {
-    isOpen,
-    isDragging,
-    terminalPosition,
-    handleDraggingStart,
-    handleToggleTerminal
-  } = useDragTerminal(terminalMenuOffsetHeight, terminalDefaultPosition)
-
-  // Check open state
-  useEffect(() => {
-    const resizeValue = isOpen ? [config.get('terminal-top-offset')] : []
-    event.trigger('resize', resizeValue)
-  }, [isOpen])
-
-  useEffect(() => {
-    event.trigger('resize', [terminalPosition])
-  }, [terminalPosition])
-
   const scrollToBottom = () => {
     messagesEndRef.current.scrollIntoView({ behavior: 'smooth' })
   }
@@ -433,6 +414,11 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
     setAutoCompleteState(prevState => ({ ...prevState, activeSuggestion: 0, showSuggestions: false }))
   }
 
+  const handleToggleTerminal = () => {
+    setIsOpen(!isOpen)
+    props.plugin.call('layout', 'minimize', props.plugin.profile.name, isOpen)
+  }
+
   return (
     <div style={{ flexGrow: 1 }} className='panel' ref={panelRef}>
       <div className="bar">

From 4b80abe4ec861da8d4ede9675daa5dad88eb721b Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Mon, 3 Jan 2022 14:56:33 +0100
Subject: [PATCH 062/168] rm console

---
 libs/remix-ui/panel/src/lib/main/main-panel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/libs/remix-ui/panel/src/lib/main/main-panel.tsx b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
index a5af90b1ca..89dfbb9078 100644
--- a/libs/remix-ui/panel/src/lib/main/main-panel.tsx
+++ b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
@@ -27,14 +27,14 @@ const RemixUIMainPanel = () => {
           class: panel.plugin.profile.name + '-wrap ' + (panel.minimized ? 'minimized' : '')
         })
       })
-      console.log(pluginPanels)
+      // console.log(pluginPanels)
       setPlugins(pluginPanels)
     }
   }
 
   useEffect(() => {
     renderPanels()
-    console.log(appContext.layout)
+    // console.log(appContext.layout)
     appContext.layout.event.on('change', () => {
       console.log('change')
       renderPanels()

From 3d7ec276b1ced1f7ff00cb5ed6cb629cdfa00541 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Mon, 3 Jan 2022 15:03:01 +0100
Subject: [PATCH 063/168] fix firefox options

---
 apps/remix-ide-e2e/nightwatch.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/remix-ide-e2e/nightwatch.ts b/apps/remix-ide-e2e/nightwatch.ts
index b982fc0e77..f123a80a9b 100644
--- a/apps/remix-ide-e2e/nightwatch.ts
+++ b/apps/remix-ide-e2e/nightwatch.ts
@@ -79,9 +79,9 @@ module.exports = {
         acceptSslCerts: true,
         'moz:firefoxOptions': {
           args: [
-            '--headless',
-            '--width=2560',
-            '--height=1440'
+            '-headless',
+            '-width=2560',
+            '-height=1440'
           ]
         }
       }

From 5abadd62c7c8729bb57661c0cca61a76765cb565 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Mon, 3 Jan 2022 15:42:36 +0100
Subject: [PATCH 064/168] remove uneeded param

---
 apps/remix-ide/src/app.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index b4eb1dfdfe..22776e657d 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -272,8 +272,7 @@ class AppComponent {
       filePanel,
       Registry.getInstance().get('compilersartefacts').api,
       networkModule,
-      self.mainview,
-      Registry.getInstance().get('fileproviders/browser').api
+      egistry.getInstance().get('fileproviders/browser').api
     )
     const analysis = new AnalysisTab()
     const debug = new DebuggerTab()

From 25398fe531bc754d36774ef0b8bd3b9273b7f03e Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Mon, 3 Jan 2022 16:08:10 +0100
Subject: [PATCH 065/168] fix typo

---
 apps/remix-ide/src/app.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index 22776e657d..d6e420b786 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -272,7 +272,7 @@ class AppComponent {
       filePanel,
       Registry.getInstance().get('compilersartefacts').api,
       networkModule,
-      egistry.getInstance().get('fileproviders/browser').api
+      Registry.getInstance().get('fileproviders/browser').api
     )
     const analysis = new AnalysisTab()
     const debug = new DebuggerTab()

From 34f5d7163c9aeab7b9f6bce08029739e95a910e9 Mon Sep 17 00:00:00 2001
From: bunsenstraat <bunsenstraat@gmail.com>
Date: Mon, 3 Jan 2022 18:04:26 +0100
Subject: [PATCH 066/168] Update nightwatch.ts

---
 apps/remix-ide-e2e/nightwatch.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/remix-ide-e2e/nightwatch.ts b/apps/remix-ide-e2e/nightwatch.ts
index f123a80a9b..7925b01e7c 100644
--- a/apps/remix-ide-e2e/nightwatch.ts
+++ b/apps/remix-ide-e2e/nightwatch.ts
@@ -81,7 +81,8 @@ module.exports = {
           args: [
             '-headless',
             '-width=2560',
-            '-height=1440'
+            '-height=1440',
+            '-window-size=2560x1440'
           ]
         }
       }

From fd70a6d24301c79dfd5afcdf14d271b8c933e4a7 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Mon, 3 Jan 2022 20:51:25 +0100
Subject: [PATCH 067/168] react to minimize

---
 apps/remix-ide/src/app/components/panel.ts      |  9 +--------
 libs/remix-ui/panel/src/lib/dragbar/dragbar.tsx | 10 +++++++---
 libs/remix-ui/panel/src/lib/main/main-panel.tsx |  8 +++-----
 libs/remix-ui/panel/src/lib/types/index.ts      |  1 +
 4 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/apps/remix-ide/src/app/components/panel.ts b/apps/remix-ide/src/app/components/panel.ts
index 6471577b55..a5747188af 100644
--- a/apps/remix-ide/src/app/components/panel.ts
+++ b/apps/remix-ide/src/app/components/panel.ts
@@ -1,16 +1,9 @@
 import React from 'react' // eslint-disable-line
 import { EventEmitter } from 'events'
 import { HostPlugin } from '@remixproject/engine-web' // eslint-disable-line
-import { Profile } from '@remixproject/plugin-utils'
+import { PluginRecord } from 'libs/remix-ui/panel/src/lib/types'
 const EventManager = require('../../lib/events')
 
-/** Abstract class used for hosting the view of a plugin */
-type PluginRecord = {
-  profile: Profile
-  view: any
-  active: boolean
-  class?: string
-}
 export class AbstractPanel extends HostPlugin {
   events: EventEmitter
   event: any
diff --git a/libs/remix-ui/panel/src/lib/dragbar/dragbar.tsx b/libs/remix-ui/panel/src/lib/dragbar/dragbar.tsx
index 27506f1d12..f73567ba0d 100644
--- a/libs/remix-ui/panel/src/lib/dragbar/dragbar.tsx
+++ b/libs/remix-ui/panel/src/lib/dragbar/dragbar.tsx
@@ -20,11 +20,15 @@ const DragBar = (props: IRemixDragBarUi) => {
     setDragBarPosY(window.innerHeight - props.refObject.current.offsetHeight)
     setDragState(false)
   }
+  const handleResize = () => {
+    setDragBarPosY(window.innerHeight - props.refObject.current.offsetHeight)
+  }
+
+  useEffect(() => {
+    handleResize()
+  }, [props.hidden])
 
   useEffect(() => {
-    function handleResize () {
-      setDragBarPosY(window.innerHeight - props.refObject.current.offsetHeight)
-    }
     window.addEventListener('resize', handleResize)
     // TODO: not a good way to wait on the ref doms element to be rendered of course
     setTimeout(() =>
diff --git a/libs/remix-ui/panel/src/lib/main/main-panel.tsx b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
index 89dfbb9078..8f2b39914a 100644
--- a/libs/remix-ui/panel/src/lib/main/main-panel.tsx
+++ b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
@@ -24,19 +24,17 @@ const RemixUIMainPanel = () => {
           profile: panel.plugin.profile,
           active: panel.active,
           view: panel.plugin.profile.name === 'tabs' ? panel.plugin.renderTabsbar() : panel.plugin.render(),
-          class: panel.plugin.profile.name + '-wrap ' + (panel.minimized ? 'minimized' : '')
+          class: panel.plugin.profile.name + '-wrap ' + (panel.minimized ? 'minimized' : ''),
+          minimized: panel.minimized
         })
       })
-      // console.log(pluginPanels)
       setPlugins(pluginPanels)
     }
   }
 
   useEffect(() => {
     renderPanels()
-    // console.log(appContext.layout)
     appContext.layout.event.on('change', () => {
-      console.log('change')
       renderPanels()
     })
   }, [])
@@ -46,7 +44,7 @@ const RemixUIMainPanel = () => {
       {Object.values(plugins).map((pluginRecord, i) => {
         return (
           <>
-            {(pluginRecord.profile.name === 'terminal') ? <DragBar key='dragbar-terminal' hidden={false} setHideStatus={() => {}} refObject={terminalRef}></DragBar> : null}
+            {(pluginRecord.profile.name === 'terminal') ? <DragBar key='dragbar-terminal' hidden={pluginRecord.minimized || false} setHideStatus={() => {}} refObject={terminalRef}></DragBar> : null}
             <RemixUIPanelPlugin
               ref={refs[i]}
               key={pluginRecord.profile.name}
diff --git a/libs/remix-ui/panel/src/lib/types/index.ts b/libs/remix-ui/panel/src/lib/types/index.ts
index c7a77db720..f8407033ab 100644
--- a/libs/remix-ui/panel/src/lib/types/index.ts
+++ b/libs/remix-ui/panel/src/lib/types/index.ts
@@ -5,4 +5,5 @@ export type PluginRecord = {
     view: any
     active: boolean
     class?: string
+    minimized?: boolean
   }

From 8a409959313be877ffd500794365d97596277ad2 Mon Sep 17 00:00:00 2001
From: Johnson Ogwuru <ogwurujohnson@gmail.com>
Date: Tue, 4 Jan 2022 02:41:17 +0100
Subject: [PATCH 068/168] update sourcify plugins name

---
 .../remix-core-plugin/src/lib/compiler-fetch-and-compile.ts | 2 +-
 libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx        | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/libs/remix-core-plugin/src/lib/compiler-fetch-and-compile.ts b/libs/remix-core-plugin/src/lib/compiler-fetch-and-compile.ts
index b182b7d54c..706937da7a 100644
--- a/libs/remix-core-plugin/src/lib/compiler-fetch-and-compile.ts
+++ b/libs/remix-core-plugin/src/lib/compiler-fetch-and-compile.ts
@@ -69,7 +69,7 @@ export class FetchAndCompile extends Plugin {
 
     let data
     try {
-      data = await this.call('source-verification', 'fetchByNetwork', contractAddress, network.id)
+      data = await this.call('sourcify', 'fetchByNetwork', contractAddress, network.id)
     } catch (e) {
       setTimeout(_ => this.emit('notFound', contractAddress), 0) // plugin framework returns a time out error although it actually didn't find the source...
       this.unresolvedAddresses.push(contractAddress)
diff --git a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx
index 13dec9d47d..4c41c7968f 100644
--- a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx
+++ b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx
@@ -166,9 +166,9 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
     _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'learnEth'])
   }
   const startSourceVerify = async () => {
-    await plugin.appManager.activatePlugin(['solidity', 'source-verification'])
-    plugin.verticalIcons.select('source-verification')
-    _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'source-verification'])
+    await plugin.appManager.activatePlugin(['solidity', 'sourcify'])
+    plugin.verticalIcons.select('sourcify')
+    _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'sourcify'])
   }
   const startPluginManager = async () => {
     await plugin.appManager.activatePlugin('pluginManager')

From 1bdb687b9be359520579a5318125e247fe4630fe Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Tue, 4 Jan 2022 11:19:32 +0100
Subject: [PATCH 069/168] termin height

---
 libs/remix-ui/panel/src/lib/plugins/panel.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/libs/remix-ui/panel/src/lib/plugins/panel.css b/libs/remix-ui/panel/src/lib/plugins/panel.css
index 7f01242c9f..f9bd640d9c 100644
--- a/libs/remix-ui/panel/src/lib/plugins/panel.css
+++ b/libs/remix-ui/panel/src/lib/plugins/panel.css
@@ -102,6 +102,7 @@ iframe {
 
 .terminal-wrap {
     min-height: 35px;
+    height: 30%;
 }
 
 .terminal-wrap.minimized {

From 050ca672abce9f7892e84b55bef07d9c398c3acf Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Tue, 4 Jan 2022 11:31:26 +0100
Subject: [PATCH 070/168] rm iframereact

---
 libs/remix-ui/app/src/index.ts                |  1 -
 .../components/panels/iFramePluginView.tsx    | 29 -------
 .../remix-app/plugins/IFrameReactPlugin.tsx   | 85 -------------------
 libs/remix-ui/panel/src/lib/plugins/panel.css |  2 +-
 .../src/lib/components/LocalPluginForm.tsx    |  1 -
 5 files changed, 1 insertion(+), 117 deletions(-)
 delete mode 100644 libs/remix-ui/app/src/lib/remix-app/components/panels/iFramePluginView.tsx
 delete mode 100644 libs/remix-ui/app/src/lib/remix-app/plugins/IFrameReactPlugin.tsx

diff --git a/libs/remix-ui/app/src/index.ts b/libs/remix-ui/app/src/index.ts
index fd6aed5d67..e47f8690e7 100644
--- a/libs/remix-ui/app/src/index.ts
+++ b/libs/remix-ui/app/src/index.ts
@@ -1,2 +1 @@
 export { default as RemixApp } from './lib/remix-app/remix-app'
-export { default as IframeReactPlugin } from './lib/remix-app/plugins/IFrameReactPlugin'
diff --git a/libs/remix-ui/app/src/lib/remix-app/components/panels/iFramePluginView.tsx b/libs/remix-ui/app/src/lib/remix-app/components/panels/iFramePluginView.tsx
deleted file mode 100644
index f56ea4f863..0000000000
--- a/libs/remix-ui/app/src/lib/remix-app/components/panels/iFramePluginView.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React, { useRef, useState } from 'react'
-import IframeReactPlugin from '../../plugins/IFrameReactPlugin'
-
-interface IFramePluginViewProps {
-    plugin: IframeReactPlugin
-}
-
-const IFramePluginView = (props: IFramePluginViewProps) => {
-  const ref = useRef()
-  const [loading, isLoading] = useState<boolean>(true)
-
-  const loaded = () => {
-    props.plugin.shake(ref.current)
-    isLoading(false)
-  }
-
-  const loader = <div className='d-flex justify-content-center align-items-center'>
-    <div className='spinner-border' role="status">
-      <span className='sr-only'>Loading...</span>
-    </div>
-  </div>
-
-  return (<>
-    <div className={loading ? '' : 'd-none'}>{loader}</div>
-    <iframe onLoad={loaded} ref={ref} src={props.plugin.profile.url} title={props.plugin.name} id={props.plugin.name} seamless={true} sandbox='allow-popups allow-scripts allow-same-origin allow-forms allow-top-navigation'></iframe>
-  </>)
-}
-
-export default IFramePluginView
diff --git a/libs/remix-ui/app/src/lib/remix-app/plugins/IFrameReactPlugin.tsx b/libs/remix-ui/app/src/lib/remix-app/plugins/IFrameReactPlugin.tsx
deleted file mode 100644
index 27a807a5b5..0000000000
--- a/libs/remix-ui/app/src/lib/remix-app/plugins/IFrameReactPlugin.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import type { Message, Profile, ExternalProfile, LocationProfile } from '@remixproject/plugin-utils'
-import { PluginConnector } from '@remixproject/engine'
-import React from 'react' // eslint-disable-line
-import IFramePluginView from '../components/panels/iFramePluginView'
-
-export type IframeProfile = Profile & LocationProfile & ExternalProfile
-
-/**
- * Connect an Iframe client to the engine.
- * @dev This implements the ViewPlugin as it cannot extends two class. Maybe use a mixin at some point
- */
-class IframeReactPlugin extends PluginConnector {
-  // Listener is needed to remove the listener
-  private readonly listener = ['message', (e: MessageEvent) => this.getEvent(e), false] as const
-  private container: any
-  private origin: string
-  private source: Window
-  private url: string
-
-  constructor (public profile: IframeProfile) {
-    super(profile)
-  }
-
-  /** Implement "activate" of the ViewPlugin */
-  connect (url: string) {
-    this.profile.url = url
-    this.render()
-  }
-
-  addToView () {
-    this.call(this.profile.location, 'addView', this.profile, this.container)
-  }
-
-  shake (iframe: any) {
-    return new Promise((resolve, reject) => {
-      // Wait for the iframe to load and handshake
-
-      if (!iframe.contentWindow) {
-        reject(new Error(`${this.name} plugin cannot find url ${this.profile.url}`))
-      }
-      this.origin = new URL(iframe.src).origin
-      this.source = iframe.contentWindow
-      window.addEventListener(...this.listener)
-      this.handshake()
-        .then(resolve)
-        .catch(reject)
-      //
-    })
-  }
-
-  /** Implement "deactivate" of the ViewPlugin */
-  disconnect () {
-    console.trace('disconnect')
-    window.removeEventListener(...this.listener)
-    return this.call(this.profile.location, 'removeView', this.profile)
-      .catch(console.error)
-  }
-
-  /** Get message from the iframe */
-  private async getEvent (event: MessageEvent) {
-    if (event.source !== this.source) return // Filter only messages that comes from this iframe
-    if (event.origin !== this.origin) return // Filter only messages that comes from this origin
-    const message: Message = event.data
-    this.getMessage(message)
-  }
-
-  /**
-   * Post a message to the iframe of this plugin
-   * @param message The message to post
-   */
-  protected send (message: Partial<Message>) {
-    if (!this.source) {
-      throw new Error('No window attached to Iframe yet')
-    }
-    this.source.postMessage(message, this.origin)
-  }
-
-  /** Create and return the iframe */
-  render () {
-    this.container = <IFramePluginView plugin={this} />
-    this.addToView()
-  }
-}
-
-export default IframeReactPlugin
diff --git a/libs/remix-ui/panel/src/lib/plugins/panel.css b/libs/remix-ui/panel/src/lib/plugins/panel.css
index f9bd640d9c..d2b2133667 100644
--- a/libs/remix-ui/panel/src/lib/plugins/panel.css
+++ b/libs/remix-ui/panel/src/lib/plugins/panel.css
@@ -102,7 +102,7 @@ iframe {
 
 .terminal-wrap {
     min-height: 35px;
-    height: 30%;
+    height: 20%;
 }
 
 .terminal-wrap.minimized {
diff --git a/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx b/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx
index f3207f90bf..3cada8585b 100644
--- a/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx
+++ b/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx
@@ -6,7 +6,6 @@ import { IframePlugin, WebsocketPlugin } from '@remixproject/engine-web'
 
 import { localPluginReducerActionType, localPluginToastReducer } from '../reducers/pluginManagerReducer'
 import { canActivate, FormStateProps, PluginManagerComponent } from '../../types'
-import { IframeReactPlugin } from '@remix-ui/app'
 
 interface LocalPluginFormProps {
   closeModal: () => void

From a17f8697c9978efcf315912c259f682e2ac64d70 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Tue, 4 Jan 2022 11:41:14 +0100
Subject: [PATCH 071/168] no ff headless

---
 apps/remix-ide-e2e/nightwatch.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/apps/remix-ide-e2e/nightwatch.ts b/apps/remix-ide-e2e/nightwatch.ts
index 7925b01e7c..97c3e2ab48 100644
--- a/apps/remix-ide-e2e/nightwatch.ts
+++ b/apps/remix-ide-e2e/nightwatch.ts
@@ -68,7 +68,13 @@ module.exports = {
       desiredCapabilities: {
         browserName: 'firefox',
         javascriptEnabled: true,
-        acceptSslCerts: true
+        acceptSslCerts: true,
+        'moz:firefoxOptions': {
+          args: [
+            '-width=2560',
+            '-height=1440'
+          ]
+        }
       }
     },
 
@@ -79,10 +85,8 @@ module.exports = {
         acceptSslCerts: true,
         'moz:firefoxOptions': {
           args: [
-            '-headless',
             '-width=2560',
-            '-height=1440',
-            '-window-size=2560x1440'
+            '-height=1440'
           ]
         }
       }

From ca9023898849902d3ee677852732106fa0d931b0 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Tue, 4 Jan 2022 11:41:56 +0100
Subject: [PATCH 072/168] ff headless

---
 apps/remix-ide-e2e/nightwatch.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/remix-ide-e2e/nightwatch.ts b/apps/remix-ide-e2e/nightwatch.ts
index 97c3e2ab48..d8a111a617 100644
--- a/apps/remix-ide-e2e/nightwatch.ts
+++ b/apps/remix-ide-e2e/nightwatch.ts
@@ -85,6 +85,7 @@ module.exports = {
         acceptSslCerts: true,
         'moz:firefoxOptions': {
           args: [
+            '-headless',
             '-width=2560',
             '-height=1440'
           ]

From efbc6cc04dc325e049e5055a972c26a4fb0e7421 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Tue, 4 Jan 2022 11:53:20 +0100
Subject: [PATCH 073/168] rm logs

---
 .../src/app/components/hidden-panel.tsx       |  1 -
 apps/remix-ide/src/app/panels/layout.ts       |  1 -
 apps/remix-ide/src/app/panels/tab-proxy.js    |  1 -
 .../app/src/lib/remix-app/dragbar/dragbar.tsx | 21 ++++++++++++-------
 4 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/apps/remix-ide/src/app/components/hidden-panel.tsx b/apps/remix-ide/src/app/components/hidden-panel.tsx
index 151b25ddb7..bfdff5a11a 100644
--- a/apps/remix-ide/src/app/components/hidden-panel.tsx
+++ b/apps/remix-ide/src/app/components/hidden-panel.tsx
@@ -28,7 +28,6 @@ export class HiddenPanel extends AbstractPanel {
   }
 
   render () {
-    console.log(this.el)
     return this.el
   }
 
diff --git a/apps/remix-ide/src/app/panels/layout.ts b/apps/remix-ide/src/app/panels/layout.ts
index 0ef900d9ed..f4771ab656 100644
--- a/apps/remix-ide/src/app/panels/layout.ts
+++ b/apps/remix-ide/src/app/panels/layout.ts
@@ -30,7 +30,6 @@ export class Layout extends Plugin {
   }
 
   async onActivation (): Promise<void> {
-    console.log('layout plugin activated')
     this.on('fileManager', 'currentFileChanged', () => {
       this.panels.editor.active = true
       this.panels.main.active = false
diff --git a/apps/remix-ide/src/app/panels/tab-proxy.js b/apps/remix-ide/src/app/panels/tab-proxy.js
index 1b776f1db8..267b54d853 100644
--- a/apps/remix-ide/src/app/panels/tab-proxy.js
+++ b/apps/remix-ide/src/app/panels/tab-proxy.js
@@ -210,7 +210,6 @@ export class TabProxy extends Plugin {
   }
 
   addTab (name, title, switchTo, close, icon) {
-    console.log('add tab', name)
     if (this._handlers[name]) return this.renderComponent()
 
     var slash = name.split('/')
diff --git a/libs/remix-ui/app/src/lib/remix-app/dragbar/dragbar.tsx b/libs/remix-ui/app/src/lib/remix-app/dragbar/dragbar.tsx
index 29c4eeda6b..429e49f638 100644
--- a/libs/remix-ui/app/src/lib/remix-app/dragbar/dragbar.tsx
+++ b/libs/remix-ui/app/src/lib/remix-app/dragbar/dragbar.tsx
@@ -15,18 +15,23 @@ const DragBar = (props: IRemixDragBarUi) => {
   const [offset, setOffSet] = useState<number>(0)
   const nodeRef = React.useRef(null) // fix for strictmode
 
-  useEffect(() => {
-    // arbitrary time out to wait the the UI to be completely done
-    setTimeout(() => {
-      setOffSet(props.refObject.current.offsetLeft)
-      setDragBarPosX(offset + props.refObject.current.offsetWidth)
-    }, 1000)
-  }, [])
-
   useEffect(() => {
     setDragBarPosX(offset + (props.hidden ? 0 : props.refObject.current.offsetWidth))
   }, [props.hidden, offset])
 
+  const handleResize = () => {
+    setOffSet(props.refObject.current.offsetLeft)
+    setDragBarPosX(props.refObject.current.offsetLeft + props.refObject.current.offsetWidth)
+  }
+
+  useEffect(() => {
+    window.addEventListener('resize', handleResize)
+    // TODO: not a good way to wait on the ref doms element to be rendered of course
+    setTimeout(() =>
+      handleResize(), 2000)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
   function stopDrag (e: MouseEvent, data: any) {
     setDragState(false)
     if (data.x < props.minWidth) {

From 09a56410d445baa190cf0ec96002a20b09b7999a Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Tue, 4 Jan 2022 12:00:05 +0100
Subject: [PATCH 074/168] add event

---
 apps/remix-ide/src/app/panels/layout.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/remix-ide/src/app/panels/layout.ts b/apps/remix-ide/src/app/panels/layout.ts
index f4771ab656..45c55e75de 100644
--- a/apps/remix-ide/src/app/panels/layout.ts
+++ b/apps/remix-ide/src/app/panels/layout.ts
@@ -82,7 +82,9 @@ export class Layout extends Plugin {
       this.panels.terminal.minimized = true
       this.event.emit('change', null)
     }
-    // if (params.minimizesidepanel) // this.resizeFeature.hidePanel()
+    if (params.minimizesidepanel) {
+      this.event.emit('minimizesidepanel')
+    }
   }
 
   minimize (name: string, minimized:boolean): void {

From a59935e9cd4e50b6875487daca10d9cb15e818cb Mon Sep 17 00:00:00 2001
From: Johnson Ogwuru <ogwurujohnson@gmail.com>
Date: Tue, 4 Jan 2022 12:08:08 +0100
Subject: [PATCH 075/168] update occurences

---
 apps/remix-ide-e2e/src/tests/runAndDeploy.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/remix-ide-e2e/src/tests/runAndDeploy.test.ts b/apps/remix-ide-e2e/src/tests/runAndDeploy.test.ts
index 33021082ae..9e7d34196a 100644
--- a/apps/remix-ide-e2e/src/tests/runAndDeploy.test.ts
+++ b/apps/remix-ide-e2e/src/tests/runAndDeploy.test.ts
@@ -181,7 +181,7 @@ module.exports = {
       .useCss().switchBrowserTab(0)
       .refresh()
       .clickLaunchIcon('pluginManager') // load debugger and source verification
-    // .scrollAndClick('#pluginManager article[id="remixPluginManagerListItem_source-verification"] button')
+    // .scrollAndClick('#pluginManager article[id="remixPluginManagerListItem_sourcify"] button')
     // debugger already activated .scrollAndClick('#pluginManager article[id="remixPluginManagerListItem_debugger"] button')
       .clickLaunchIcon('udapp')
       .waitForElementPresent('*[data-id="settingsSelectEnvOptions"]')

From 533c498a2c14ff736d90b5f311e9873e6d83807b Mon Sep 17 00:00:00 2001
From: bunsenstraat <bunsenstraat@gmail.com>
Date: Tue, 4 Jan 2022 12:09:24 +0100
Subject: [PATCH 076/168] Delete main-view.js

---
 apps/remix-ide/src/app/panels/main-view.js | 218 ---------------------
 1 file changed, 218 deletions(-)
 delete mode 100644 apps/remix-ide/src/app/panels/main-view.js

diff --git a/apps/remix-ide/src/app/panels/main-view.js b/apps/remix-ide/src/app/panels/main-view.js
deleted file mode 100644
index c1e59925c7..0000000000
--- a/apps/remix-ide/src/app/panels/main-view.js
+++ /dev/null
@@ -1,218 +0,0 @@
-import Registry from '../state/registry'
-
-var yo = require('yo-yo')
-var EventManager = require('../../lib/events')
-
-var { TabProxy } = require('./tab-proxy.js')
-
-var csjs = require('csjs-inject')
-
-var css = csjs`
-  .mainview            {
-    display           : flex;
-    flex-direction    : column;
-    height            : 100%;
-    width             : 100%;
-  }  
-`
-
-// @todo(#650) Extract this into two classes: MainPanel (TabsProxy + Iframe/Editor) & BottomPanel (Terminal)
-export class MainView {
-  constructor (contextualListener, editor, mainPanel, fileManager, appManager, terminal) {
-    var self = this
-    self.event = new EventManager()
-    self._view = {}
-    self._components = {}
-    self._components.registry = Registry.getInstance()
-    self.contextualListener = contextualListener
-    self.editor = editor
-    self.fileManager = fileManager
-    self.mainPanel = mainPanel
-    self.txListener = Registry.getInstance().get('txlistener').api
-    self._components.terminal = terminal
-    this.appManager = appManager
-    this.init()
-  }
-
-  showApp (name) {
-    this.fileManager.unselectCurrentFile()
-    this.mainPanel.showContent(name)
-    this._view.editor.style.display = 'none'
-    this._view.mainPanel.style.display = 'block'
-  }
-
-  getAppPanel () {
-    return this.mainPanel
-  }
-
-  init () {
-    var self = this
-    self._deps = {
-      config: self._components.registry.get('config').api,
-      fileManager: self._components.registry.get('filemanager').api
-    }
-
-    self.tabProxy = new TabProxy(self.fileManager, self.editor)
-    /*
-      We listen here on event from the tab component to display / hide the editor and mainpanel
-      depending on the content that should be displayed
-    */
-    self.fileManager.events.on('currentFileChanged', (file) => {
-      // we check upstream for "fileChanged"
-      self._view.editor.style.display = 'block'
-      self._view.mainPanel.style.display = 'none'
-    })
-    self.tabProxy.event.on('openFile', (file) => {
-      self._view.editor.style.display = 'block'
-      self._view.mainPanel.style.display = 'none'
-    })
-    self.tabProxy.event.on('closeFile', (file) => {
-    })
-    self.tabProxy.event.on('switchApp', self.showApp.bind(self))
-    self.tabProxy.event.on('closeApp', (name) => {
-      self._view.editor.style.display = 'block'
-      self._view.mainPanel.style.display = 'none'
-    })
-    // when no tab is selected count 0 open home tab
-    self.tabProxy.event.on('tabCountChanged', (count) => {
-      if (!count) this.editor.displayEmptyReadOnlySession()
-    })
-    self.data = {
-      _layout: {
-        top: {
-          offset: self._terminalTopOffset(),
-          show: true
-        }
-      }
-    }
-
-    self._components.terminal.event.register('resize', delta => self._adjustLayout('top', delta))
-    // mv
-    if (self.txListener) {
-      self._components.terminal.event.register('listenOnNetWork', (listenOnNetWork) => {
-        self.txListener.setListenOnNetwork(listenOnNetWork)
-      })
-    }
-  }
-  // rm
-
-  _terminalTopOffset () {
-    return this._deps.config.get('terminal-top-offset') || 150
-  }
-
-  /* can be rm */
-  _adjustLayout (direction, delta) {
-    var limitUp = 0
-    var limitDown = 32
-    var containerHeight = window.innerHeight - limitUp // - menu bar containerHeight
-    var self = this
-    var layout = self.data._layout[direction]
-    if (layout) {
-      if (delta === undefined) {
-        layout.show = !layout.show
-        if (layout.show) delta = layout.offset
-        else delta = 0
-      } else {
-        layout.show = true
-        self._deps.config.set(`terminal-${direction}-offset`, delta)
-        layout.offset = delta
-      }
-    }
-    var tmp = delta - limitDown
-    delta = tmp > 0 ? tmp : 0
-    if (direction === 'top') {
-      var mainPanelHeight = containerHeight - delta
-      mainPanelHeight = mainPanelHeight < 0 ? 0 : mainPanelHeight
-      self._view.editor.style.height = `${mainPanelHeight}px`
-      self._view.mainPanel.style.height = `${mainPanelHeight}px`
-      self._view.terminal.style.height = `${delta}px` // - menu bar height
-      self._view.editor.height = `${mainPanelHeight}px`
-      self._view.mainPanel.height = `${mainPanelHeight}px`
-      self._view.terminal.height = `${delta}px` // - menu bar height
-      self.editor.resize((document.querySelector('#editorWrap') || {}).checked)
-      self._components.terminal.scroll2bottom()
-    }
-  }
-
-  /* plugin calls */
-  minimizeTerminal () {
-    this._adjustLayout('top')
-  }
-
-  showTerminal (offset) {
-    this._adjustLayout('top', offset || this._terminalTopOffset())
-  }
-
-  // rm
-  getTerminal () {
-    return this._components.terminal
-  }
-
-  // rm
-  getEditor () {
-    var self = this
-    return self.editor
-  }
-
-  // rm
-  refresh () {
-    var self = this
-    self._view.tabs.onmouseenter()
-  }
-
-  // rm logs
-  log (data = {}) {
-    var self = this
-    var command = self._components.terminal.commands[data.type]
-    if (typeof command === 'function') command(data.value)
-  }
-
-  logMessage (msg) {
-    var self = this
-    self.log({ type: 'log', value: msg })
-  }
-
-  logHtmlMessage (msg) {
-    var self = this
-    self.log({ type: 'html', value: msg })
-  }
-
-  render () {
-    var self = this
-    if (self._view.mainview) return self._view.mainview
-    self._view.editor = self.editor.render()
-    self._view.editor.style.display = 'none'
-    self._view.mainPanel = self.mainPanel.render()
-    self._view.terminal = self._components.terminal.render()
-    // rm contextview
-    self._view.mainview = yo`
-      <div class=${css.mainview}>
-        ${self.tabProxy.renderTabsbar()}
-        ${self._view.editor}
-        ${self._view.mainPanel}
-        <div class="${css.contextview} contextview"></div>
-        ${self._view.terminal}
-      </div>
-    `
-
-    // INIT
-    self._adjustLayout('top', self.data._layout.top.offset)
-
-    document.addEventListener('keydown', (e) => {
-      if (e.altKey && e.keyCode === 84) self.tabProxy.switchNextTab() // alt + t
-    })
-
-    return self._view.mainview
-  }
-  // rm
-
-  registerCommand (name, command, opts) {
-    var self = this
-    return self._components.terminal.registerCommand(name, command, opts)
-  }
-
-  // rm
-  updateTerminalFilter (filter) {
-    this._components.terminal.updateJournal(filter)
-  }
-}

From 0fe90925571ad377725d22f76aaab0cbdd4dcf49 Mon Sep 17 00:00:00 2001
From: bunsenstraat <bunsenstraat@gmail.com>
Date: Tue, 4 Jan 2022 14:42:13 +0100
Subject: [PATCH 077/168] Update app.js

---
 apps/remix-ide/src/app.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index d6e420b786..cf96a842bc 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -221,7 +221,7 @@ class AppComponent {
 
     // LAYOUT & SYSTEM VIEWS
     const appPanel = new MainPanel()
-    // self.mainview = new MainView(contextualListener, editor, appPanel, fileManager, appManager, terminal)
+  
     Registry.getInstance().put({ api: self.mainview, name: 'mainview' })
     const tabProxy = new TabProxy(fileManager, editor)
     self.engine.register([appPanel, tabProxy])

From 944c22161be6f1b3168b338855f6f181b8f47277 Mon Sep 17 00:00:00 2001
From: bunsenstraat <bunsenstraat@gmail.com>
Date: Tue, 4 Jan 2022 14:44:27 +0100
Subject: [PATCH 078/168] Update app.js

---
 apps/remix-ide/src/app.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index cf96a842bc..5b3c8d71d0 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -331,7 +331,7 @@ class AppComponent {
       'offsetToLineColumnConverter'
     ])
     await self.appManager.activatePlugin(['mainPanel'])
-    await self.appManager.activatePlugin(['mainPanel', 'menuicons', 'tabs'])
+    await self.appManager.activatePlugin(['menuicons', 'tabs'])
     await self.appManager.activatePlugin(['sidePanel']) // activating  host plugin separately
     await self.appManager.activatePlugin(['home'])
     await self.appManager.activatePlugin(['settings', 'config'])

From 0696484d878539e5daf5d924558e598344c7b670 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Tue, 4 Jan 2022 15:07:46 +0100
Subject: [PATCH 079/168] minin sidepanel embed

---
 apps/remix-ide/src/app.js                     |  1 -
 apps/remix-ide/src/framingService.js          | 30 -------------------
 .../app/src/lib/remix-app/remix-app.tsx       |  7 +++++
 .../terminal/src/lib/remix-ui-terminal.tsx    |  7 +----
 4 files changed, 8 insertions(+), 37 deletions(-)
 delete mode 100644 apps/remix-ide/src/framingService.js

diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index 5b3c8d71d0..ef9f5fe4a9 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -221,7 +221,6 @@ class AppComponent {
 
     // LAYOUT & SYSTEM VIEWS
     const appPanel = new MainPanel()
-  
     Registry.getInstance().put({ api: self.mainview, name: 'mainview' })
     const tabProxy = new TabProxy(fileManager, editor)
     self.engine.register([appPanel, tabProxy])
diff --git a/apps/remix-ide/src/framingService.js b/apps/remix-ide/src/framingService.js
deleted file mode 100644
index d7c2a1c5f8..0000000000
--- a/apps/remix-ide/src/framingService.js
+++ /dev/null
@@ -1,30 +0,0 @@
-export class FramingService {
-  constructor (verticalIcons, layout) {
-    this.verticalIcons = verticalIcons
-  }
-
-  start (params) {
-    this.verticalIcons.select('filePanel')
-
-    document.addEventListener('keypress', (e) => {
-      if (e.shiftKey && e.ctrlKey) {
-        if (e.code === 'KeyF') { // Ctrl+Shift+F
-          this.verticalIcons.select('filePanel')
-        } else if (e.code === 'KeyA') { // Ctrl+Shift+A
-          this.verticalIcons.select('pluginManager')
-        } else if (e.code === 'KeyS') { //  Ctrl+Shift+S
-          this.verticalIcons.select('settings')
-        }
-        e.preventDefault()
-      }
-    })
-
-    if (params.minimizeterminal) this.mainView.minimizeTerminal()
-    if (params.minimizesidepanel) this.resizeFeature.hidePanel()
-  }
-
-  embed () {
-    this.mainView.minimizeTerminal()
-    this.resizeFeature.hidePanel()
-  }
-}
diff --git a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx b/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
index a63caae30e..1149508a13 100644
--- a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
+++ b/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
@@ -60,6 +60,13 @@ const RemixApp = (props: IRemixAppUi) => {
     props.app.sidePanel.events.on('showing', () => {
       setHideSidePanel(false)
     })
+
+    props.app.layout.event.on('minimizesidepanel', () => {
+      // the 'showing' event always fires from sidepanel, so delay this a bit
+      setTimeout(() => {
+        setHideSidePanel(true)
+      }, 1000)
+    })
   }
 
   const components = {
diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
index df92ae9174..a0f6b26ad7 100644
--- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
+++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
@@ -87,15 +87,10 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
     props.onReady({
       logHtml: (html) => {
         scriptRunnerDispatch({ type: 'html', payload: { message: [html.innerText] } })
-
-        setTimeout(() => {
-        }, 100)
       },
 
       log: (message) => {
-        setTimeout(() => {
-          scriptRunnerDispatch({ type: 'log', payload: { message: [message] } })
-        }, 100)
+        scriptRunnerDispatch({ type: 'log', payload: { message: [message] } })
       }
     })
   }, [])

From a1daed0f23115508a7b2fbcf0212a5a2ef8e1b76 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Tue, 4 Jan 2022 15:20:58 +0100
Subject: [PATCH 080/168] merging

---
 apps/remix-ide/src/app.js                                     | 2 +-
 apps/remix-ide/src/remixAppManager.js                         | 4 ++--
 .../src/lib/remix-app/components/modals/dialogViewPlugin.tsx  | 1 -
 libs/remix-ui/app/src/lib/remix-app/context/context.tsx       | 2 +-
 libs/remix-ui/panel/src/lib/main/main-panel.tsx               | 2 +-
 5 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index 2a695b545d..ad9dbb862d 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -322,7 +322,7 @@ class AppComponent {
     } catch (e) {
       console.log("couldn't register iframe plugins", e.message)
     }
-    await self.appManager.activatePlugin(['modal'])
+    await self.appManager.activatePlugin(['layout'])
     await self.appManager.activatePlugin(['modal'])
     await self.appManager.activatePlugin(['editor'])
     await self.appManager.activatePlugin(['theme', 'fileManager', 'compilerMetadata', 'compilerArtefacts', 'network', 'web3Provider', 'offsetToLineColumnConverter'])
diff --git a/apps/remix-ide/src/remixAppManager.js b/apps/remix-ide/src/remixAppManager.js
index ba56282dfc..23d33f8118 100644
--- a/apps/remix-ide/src/remixAppManager.js
+++ b/apps/remix-ide/src/remixAppManager.js
@@ -9,12 +9,12 @@ const _paq = window._paq = window._paq || []
 const requiredModules = [ // services + layout views + system views
   'manager', 'config', 'compilerArtefacts', 'compilerMetadata', 'contextualListener', 'editor', 'offsetToLineColumnConverter', 'network', 'theme',
   'fileManager', 'contentImport', 'blockchain', 'web3Provider', 'scriptRunner', 'fetchAndCompile', 'mainPanel', 'hiddenPanel', 'sidePanel', 'menuicons',
-  'filePanel', 'terminal', 'settings', 'pluginManager', 'tabs', 'udapp', 'dGitProvider', 'solidity-logic', 'walkthrough', 'layout']
+  'filePanel', 'terminal', 'settings', 'pluginManager', 'tabs', 'udapp', 'dGitProvider', 'solidity-logic', 'walkthrough', 'layout', 'modal']
 
 const dependentModules = ['git', 'hardhat', 'slither'] // module which shouldn't be manually activated (e.g git is activated by remixd)
 
 export function isNative (name) {
-  const nativePlugins = ['vyper', 'workshops', 'debugger', 'remixd', 'menuicons', 'solidity', 'hardhat-provider', 'solidityStaticAnalysis', 'solidityUnitTesting', 'layout']
+  const nativePlugins = ['vyper', 'workshops', 'debugger', 'remixd', 'menuicons', 'solidity', 'hardhat-provider', 'solidityStaticAnalysis', 'solidityUnitTesting', 'layout', 'modal']
   return nativePlugins.includes(name) || requiredModules.includes(name)
 }
 
diff --git a/libs/remix-ui/app/src/lib/remix-app/components/modals/dialogViewPlugin.tsx b/libs/remix-ui/app/src/lib/remix-app/components/modals/dialogViewPlugin.tsx
index 248527075e..d5610de56c 100644
--- a/libs/remix-ui/app/src/lib/remix-app/components/modals/dialogViewPlugin.tsx
+++ b/libs/remix-ui/app/src/lib/remix-app/components/modals/dialogViewPlugin.tsx
@@ -7,7 +7,6 @@ const DialogViewPlugin = () => {
   const app = useContext(AppContext)
 
   useEffect(() => {
-    console.log(modal, app)
     app.modal.setDispatcher({ modal, alert, toast })
   }, [])
   return <></>
diff --git a/libs/remix-ui/app/src/lib/remix-app/context/context.tsx b/libs/remix-ui/app/src/lib/remix-app/context/context.tsx
index 38e7cc65e3..3745fcddf0 100644
--- a/libs/remix-ui/app/src/lib/remix-app/context/context.tsx
+++ b/libs/remix-ui/app/src/lib/remix-app/context/context.tsx
@@ -3,7 +3,7 @@ import { AlertModal, AppModal } from '../interface'
 import { ModalInitialState } from '../state/modals'
 import { ModalTypes } from '../types'
 
-const AppContext = React.createContext<{layout: any, settings: any, showMatamo: boolean, appManager: any, modal: any}>(null)
+export const AppContext = React.createContext<any>(null)
 
 export interface dispatchModalInterface {
   modal: (data: AppModal) => void
diff --git a/libs/remix-ui/panel/src/lib/main/main-panel.tsx b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
index 8f2b39914a..97de301a90 100644
--- a/libs/remix-ui/panel/src/lib/main/main-panel.tsx
+++ b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable no-unused-expressions */
-import AppContext from 'libs/remix-ui/app/src/lib/remix-app/context/context'
+import { AppContext } from 'libs/remix-ui/app/src/lib/remix-app/context/context'
 import React, { useContext, useEffect, useLayoutEffect, useRef, useState } from 'react' // eslint-disable-line
 import DragBar from '../dragbar/dragbar'
 import RemixUIPanelPlugin from '../plugins/panel-plugin'

From 61b19d49642e48eea7135ef3e89ef18c448f9e6d Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Tue, 4 Jan 2022 15:33:55 +0100
Subject: [PATCH 081/168] fix keys

---
 libs/remix-ui/panel/src/lib/main/main-panel.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/libs/remix-ui/panel/src/lib/main/main-panel.tsx b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
index 97de301a90..841590883f 100644
--- a/libs/remix-ui/panel/src/lib/main/main-panel.tsx
+++ b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
@@ -43,14 +43,13 @@ const RemixUIMainPanel = () => {
     <div className="mainview">
       {Object.values(plugins).map((pluginRecord, i) => {
         return (
-          <>
+          <React.Fragment key={`mainView${i}`}>
             {(pluginRecord.profile.name === 'terminal') ? <DragBar key='dragbar-terminal' hidden={pluginRecord.minimized || false} setHideStatus={() => {}} refObject={terminalRef}></DragBar> : null}
             <RemixUIPanelPlugin
               ref={refs[i]}
-              key={pluginRecord.profile.name}
               pluginRecord={pluginRecord}
             />
-          </>
+          </React.Fragment>
         )
       })}
     </div>

From 8a5c2adcd086ce8c419cffed62e916e92f7e0763 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Tue, 4 Jan 2022 15:37:57 +0100
Subject: [PATCH 082/168] add key

---
 libs/remix-ui/panel/src/lib/main/main-panel.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/libs/remix-ui/panel/src/lib/main/main-panel.tsx b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
index 841590883f..4fb00ddf65 100644
--- a/libs/remix-ui/panel/src/lib/main/main-panel.tsx
+++ b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
@@ -47,6 +47,7 @@ const RemixUIMainPanel = () => {
             {(pluginRecord.profile.name === 'terminal') ? <DragBar key='dragbar-terminal' hidden={pluginRecord.minimized || false} setHideStatus={() => {}} refObject={terminalRef}></DragBar> : null}
             <RemixUIPanelPlugin
               ref={refs[i]}
+              key={pluginRecord.profile.name}
               pluginRecord={pluginRecord}
             />
           </React.Fragment>

From 13328a3b7a489c63a6faed5969184bdc3bcdcc64 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Tue, 4 Jan 2022 15:45:19 +0100
Subject: [PATCH 083/168] listen on network

---
 libs/remix-ui/terminal/src/lib/actions/terminalAction.ts | 4 ++--
 libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx     | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/libs/remix-ui/terminal/src/lib/actions/terminalAction.ts b/libs/remix-ui/terminal/src/lib/actions/terminalAction.ts
index dafe6f78cf..d0efd289b5 100644
--- a/libs/remix-ui/terminal/src/lib/actions/terminalAction.ts
+++ b/libs/remix-ui/terminal/src/lib/actions/terminalAction.ts
@@ -106,8 +106,8 @@ export const registerErrorScriptRunnerAction = (on, commandName, commandFn, disp
   })
 }
 
-export const listenOnNetworkAction = async (event, isListening) => {
-  event.trigger('listenOnNetWork', [isListening])
+export const listenOnNetworkAction = async (plugins, isListening) => {
+  plugins.txListener.setListenOnNetwork(isListening)
 }
 
 export const initListeningOnNetwork = (plugins, dispatch: React.Dispatch<any>) => {
diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
index a0f6b26ad7..8e9dfb21e9 100644
--- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
+++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
@@ -316,7 +316,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   const listenOnNetwork = (e: any) => {
     const isListening = e.target.checked
     // setIsListeningOnNetwork(isListening)
-    listenOnNetworkAction(event, isListening)
+    listenOnNetworkAction(props.plugin, isListening)
   }
 
   const onChange = (event: any) => {

From a84e89464312b82609d5122f6182ee4978f60be7 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Tue, 4 Jan 2022 15:45:47 +0100
Subject: [PATCH 084/168] rm comment

---
 libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
index 8e9dfb21e9..557a5ebef4 100644
--- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
+++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
@@ -315,7 +315,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
 
   const listenOnNetwork = (e: any) => {
     const isListening = e.target.checked
-    // setIsListeningOnNetwork(isListening)
     listenOnNetworkAction(props.plugin, isListening)
   }
 

From 9c6e1fd0da4e9afa3c0107da8dd1afcb36447f27 Mon Sep 17 00:00:00 2001
From: bunsenstraat <bunsenstraat@gmail.com>
Date: Wed, 5 Jan 2022 10:26:04 +0100
Subject: [PATCH 085/168] Update layout.ts

---
 apps/remix-ide/src/app/panels/layout.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/remix-ide/src/app/panels/layout.ts b/apps/remix-ide/src/app/panels/layout.ts
index 45c55e75de..451c2aefe7 100644
--- a/apps/remix-ide/src/app/panels/layout.ts
+++ b/apps/remix-ide/src/app/panels/layout.ts
@@ -78,11 +78,11 @@ export class Layout extends Plugin {
     })
     const queryParams = new QueryParams()
     const params = queryParams.get()
-    if (params.minimizeterminal) {
+    if (params.minimizeterminal || params.embed) {
       this.panels.terminal.minimized = true
       this.event.emit('change', null)
     }
-    if (params.minimizesidepanel) {
+    if (params.minimizesidepanel || params.embed) {
       this.event.emit('minimizesidepanel')
     }
   }

From a36256382c144cf030f5e35eb6d3c21ccd26587d Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Tue, 4 Jan 2022 16:51:44 +0100
Subject: [PATCH 086/168] gist-handler-ts

---
 apps/remix-ide/src/app.js                     |  7 +-
 apps/remix-ide/src/app/files/fileManager.js   |  2 +-
 apps/remix-ide/src/app/panels/terminal.js     |  3 -
 .../src/app/ui/landing-page/landing-page.js   |  3 -
 apps/remix-ide/src/lib/cmdInterpreterAPI.js   |  5 +-
 apps/remix-ide/src/lib/gist-handler.js        | 74 ----------------
 apps/remix-ide/test/compiler-test.js          | 16 ----
 apps/remix-ide/test/gist-handler-test.js      | 52 ------------
 apps/remix-ide/test/index.js                  |  5 --
 apps/remix-ide/test/query-params-test.js      | 23 -----
 libs/remix-core-plugin/src/index.ts           |  1 +
 .../remix-core-plugin/src/lib/gist-handler.ts | 85 +++++++++++++++++++
 .../home-tab/src/lib/remix-ui-home-tab.tsx    |  2 +-
 .../workspace/src/lib/actions/workspace.ts    |  3 +-
 workspace.json                                | 10 ---
 15 files changed, 95 insertions(+), 196 deletions(-)
 delete mode 100644 apps/remix-ide/src/lib/gist-handler.js
 delete mode 100644 apps/remix-ide/test/compiler-test.js
 delete mode 100644 apps/remix-ide/test/gist-handler-test.js
 delete mode 100644 apps/remix-ide/test/index.js
 delete mode 100644 apps/remix-ide/test/query-params-test.js
 create mode 100644 libs/remix-core-plugin/src/lib/gist-handler.ts

diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index d537d0812e..07043a4284 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -16,7 +16,7 @@ import { ModalPluginTester } from './app/plugins/test'
 
 import { WalkthroughService } from './walkthroughService'
 
-import { OffsetToLineColumnConverter, CompilerMetadata, CompilerArtefacts, FetchAndCompile, CompilerImports, EditorContextListener } from '@remix-project/core-plugin'
+import { OffsetToLineColumnConverter, CompilerMetadata, CompilerArtefacts, FetchAndCompile, CompilerImports, EditorContextListener, LoadFromGistHandler, GistHandler } from '@remix-project/core-plugin'
 
 import migrateFileSystem from './migrateFileSystem'
 import Registry from './app/state/registry'
@@ -106,6 +106,8 @@ class AppComponent {
     }
 
     // SERVICES
+    // ----------------- gist service ---------------------------------
+    self.gistHandler = new GistHandler()
     // ----------------- theme service ---------------------------------
     self.themeModule = new ThemeModule()
     Registry.getInstance().put({ api: self.themeModule, name: 'themeModule' })
@@ -166,6 +168,7 @@ class AppComponent {
 
     self.engine.register([
       self.modal,
+      self.gistHandler,
       configPlugin,
       blockchain,
       contentImport,
@@ -280,7 +283,7 @@ class AppComponent {
     await self.appManager.activatePlugin(['sidePanel']) // activating  host plugin separately
     await self.appManager.activatePlugin(['home'])
     await self.appManager.activatePlugin(['settings', 'config'])
-    await self.appManager.activatePlugin(['hiddenPanel', 'pluginManager', 'contextualListener', 'terminal', 'blockchain', 'fetchAndCompile', 'contentImport'])
+    await self.appManager.activatePlugin(['hiddenPanel', 'pluginManager', 'contextualListener', 'terminal', 'blockchain', 'fetchAndCompile', 'contentImport', 'gistHandler'])
     await self.appManager.activatePlugin(['settings'])
     await self.appManager.activatePlugin(['walkthrough'])
     await self.appManager.activatePlugin(['testerplugin'])
diff --git a/apps/remix-ide/src/app/files/fileManager.js b/apps/remix-ide/src/app/files/fileManager.js
index c526f36600..a57a10f53f 100644
--- a/apps/remix-ide/src/app/files/fileManager.js
+++ b/apps/remix-ide/src/app/files/fileManager.js
@@ -22,7 +22,7 @@ const profile = {
   icon: 'assets/img/fileManager.webp',
   permission: true,
   version: packageJson.version,
-  methods: ['closeAllFiles', 'closeFile', 'file', 'exists', 'open', 'writeFile', 'readFile', 'copyFile', 'copyDir', 'rename', 'mkdir', 'readdir', 'remove', 'getCurrentFile', 'getFile', 'getFolder', 'setFile', 'switchFile', 'refresh', 'getProviderOf', 'getProviderByName', 'getPathFromUrl', 'getUrlFromPath', 'saveCurrentFile'],
+  methods: ['closeAllFiles', 'closeFile', 'file', 'exists', 'open', 'writeFile', 'readFile', 'copyFile', 'copyDir', 'rename', 'mkdir', 'readdir', 'remove', 'getCurrentFile', 'getFile', 'getFolder', 'setFile', 'switchFile', 'refresh', 'getProviderOf', 'getProviderByName', 'getPathFromUrl', 'getUrlFromPath', 'saveCurrentFile', 'setBatchFiles'],
   kind: 'file-system'
 }
 const errorMsg = {
diff --git a/apps/remix-ide/src/app/panels/terminal.js b/apps/remix-ide/src/app/panels/terminal.js
index 4837f24203..272284c53c 100644
--- a/apps/remix-ide/src/app/panels/terminal.js
+++ b/apps/remix-ide/src/app/panels/terminal.js
@@ -13,8 +13,6 @@ const AutoCompletePopup = require('../ui/auto-complete-popup')
 
 import { CompilerImports } from '@remix-project/core-plugin' // eslint-disable-line
 
-const GistHandler = require('../../lib/gist-handler')
-
 const KONSOLES = []
 
 function register (api) { KONSOLES.push(api) }
@@ -32,7 +30,6 @@ class Terminal extends Plugin {
   constructor (opts, api) {
     super(profile)
     this.fileImport = new CompilerImports()
-    this.gistHandler = new GistHandler()
     this.event = new EventManager()
     this.globalRegistry = Registry.getInstance()
     this.element = document.createElement('div')
diff --git a/apps/remix-ide/src/app/ui/landing-page/landing-page.js b/apps/remix-ide/src/app/ui/landing-page/landing-page.js
index a100c4ea4e..b05271dc96 100644
--- a/apps/remix-ide/src/app/ui/landing-page/landing-page.js
+++ b/apps/remix-ide/src/app/ui/landing-page/landing-page.js
@@ -5,8 +5,6 @@ import * as packageJson from '../../../../../../package.json'
 import { ViewPlugin } from '@remixproject/engine-web'
 import { RemixUiHomeTab } from '@remix-ui/home-tab' // eslint-disable-line
 
-const GistHandler = require('../../../lib/gist-handler')
-
 const profile = {
   name: 'home',
   displayName: 'Home',
@@ -26,7 +24,6 @@ export class LandingPage extends ViewPlugin {
     this.contentImport = contentImport
     this.appManager = appManager
     this.verticalIcons = verticalIcons
-    this.gistHandler = new GistHandler()
     this.el = document.createElement('div')
     this.el.setAttribute('id', 'landingPageHomeContainer')
     this.el.setAttribute('class', 'remixui_homeContainer justify-content-between bg-light d-flex')
diff --git a/apps/remix-ide/src/lib/cmdInterpreterAPI.js b/apps/remix-ide/src/lib/cmdInterpreterAPI.js
index 530846873d..97d27f3a17 100644
--- a/apps/remix-ide/src/lib/cmdInterpreterAPI.js
+++ b/apps/remix-ide/src/lib/cmdInterpreterAPI.js
@@ -6,7 +6,6 @@ var async = require('async')
 var EventManager = require('../lib/events')
 
 var toolTip = require('../app/ui/tooltip')
-var GistHandler = require('./gist-handler')
 
 class CmdInterpreterAPI {
   constructor (terminal, blockchain) {
@@ -17,7 +16,6 @@ class CmdInterpreterAPI {
     self._components.registry = Registry.getInstance()
     self._components.terminal = terminal
     self._components.fileImport = new CompilerImports()
-    self._components.gistHandler = new GistHandler()
     self._deps = {
       fileManager: self._components.registry.get('filemanager').api,
       editor: self._components.registry.get('editor').api,
@@ -35,8 +33,7 @@ class CmdInterpreterAPI {
 
   log () { arguments[0] != null ? this._components.terminal.commands.html(arguments[0]) : this._components.terminal.commands.html(arguments[1]) }
   loadgist (id, cb) {
-    const self = this
-    self._components.gistHandler.loadFromGist({ gist: id }, this._deps.fileManager)
+    this._components.terminal.call('loadFromGistHandler', 'load', id)
     if (cb) cb()
   }
 
diff --git a/apps/remix-ide/src/lib/gist-handler.js b/apps/remix-ide/src/lib/gist-handler.js
deleted file mode 100644
index da881e1103..0000000000
--- a/apps/remix-ide/src/lib/gist-handler.js
+++ /dev/null
@@ -1,74 +0,0 @@
-'use strict'
-var modalDialogCustom = require('../app/ui/modal-dialog-custom')
-var request = require('request')
-
-// Allowing window to be overriden for testing
-function GistHandler (_window) {
-  if (_window !== undefined) {
-    modalDialogCustom = _window
-  }
-
-  this.handleLoad = function (params, cb) {
-    if (!cb) cb = () => {}
-    var loadingFromGist = false
-    var gistId
-    if (params.gist === '') {
-      loadingFromGist = true
-      modalDialogCustom.prompt('Load a Gist', 'Enter the ID of the Gist or URL you would like to load.', null, (target) => {
-        if (target !== '') {
-          gistId = getGistId(target)
-          if (gistId) {
-            cb(gistId)
-          } else {
-            modalDialogCustom.alert('Gist load error', 'Error while loading gist. Please provide a valid Gist ID or URL.')
-          }
-        }
-      })
-      return loadingFromGist
-    } else {
-      gistId = params.gist
-      loadingFromGist = !!gistId
-    }
-    if (loadingFromGist) {
-      cb(gistId)
-    }
-    return loadingFromGist
-  }
-
-  function getGistId (str) {
-    var idr = /[0-9A-Fa-f]{8,}/
-    var match = idr.exec(str)
-    return match ? match[0] : null
-  }
-
-  this.loadFromGist = (params, fileManager) => {
-    const self = this
-    return self.handleLoad(params, function (gistId) {
-      request.get({
-        url: `https://api.github.com/gists/${gistId}`,
-        json: true
-      }, async (error, response, data = {}) => {
-        if (error || !data.files) {
-          modalDialogCustom.alert('Gist load error', error || data.message)
-          return
-        }
-        const obj = {}
-        Object.keys(data.files).forEach((element) => {
-          const path = element.replace(/\.\.\./g, '/')
-
-          obj['/' + 'gist-' + gistId + '/' + path] = data.files[element]
-        })
-        fileManager.setBatchFiles(obj, 'workspace', true, (errorLoadingFile) => {
-          if (!errorLoadingFile) {
-            const provider = fileManager.getProvider('workspace')
-            provider.lastLoadedGistId = gistId
-          } else {
-            modalDialogCustom.alert('Gist load error', errorLoadingFile.message || errorLoadingFile)
-          }
-        })
-      })
-    })
-  }
-}
-
-module.exports = GistHandler
diff --git a/apps/remix-ide/test/compiler-test.js b/apps/remix-ide/test/compiler-test.js
deleted file mode 100644
index 5af70fd14f..0000000000
--- a/apps/remix-ide/test/compiler-test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-'use strict'
-
-var test = require('tape')
-
-var Compiler = require('@remix-project/remix-solidity').Compiler
-
-test('compiler.compile smoke', function (t) {
-  t.plan(1)
-
-  var noop = function () {}
-  var fakeImport = function (url, cb) { cb('Not implemented') }
-  var compiler = new Compiler(fakeImport)
-  compiler.compileJSON = noop
-  compiler.compile({ 'test': '' }, 'test')
-  t.ok(compiler)
-})
diff --git a/apps/remix-ide/test/gist-handler-test.js b/apps/remix-ide/test/gist-handler-test.js
deleted file mode 100644
index 07eaad830c..0000000000
--- a/apps/remix-ide/test/gist-handler-test.js
+++ /dev/null
@@ -1,52 +0,0 @@
-'use strict'
-var modalDialogCustom
-if (typeof window !== 'undefined') {
-  modalDialogCustom = require('../app/ui/modal-dialog-custom')
-}
-// ^ this class can be load in a non browser context when running node unit testing.
-// should not load UI in that case
-
-// Allowing window to be overriden for testing
-function GistHandler (_window) {
-  if (_window !== undefined) {
-    modalDialogCustom = _window
-  }
-
-  this.handleLoad = function (params, cb) {
-    if (!cb) cb = () => {}
-    var loadingFromGist = false
-    var gistId
-    if (params['gist'] === '') {
-      loadingFromGist = true
-      modalDialogCustom.prompt(
-        'Load a Gist',
-        'Enter the URL or ID of the Gist you would like to load.',
-        null,
-        target => {
-          if (target !== '') {
-            gistId = getGistId(target)
-            if (gistId) {
-              cb(gistId)
-            }
-          }
-        }
-      )
-      return loadingFromGist
-    } else {
-      gistId = params['gist']
-      loadingFromGist = !!gistId
-    }
-    if (loadingFromGist) {
-      cb(gistId)
-    }
-    return loadingFromGist
-  }
-
-  function getGistId (str) {
-    var idr = /[0-9A-Fa-f]{8,}/
-    var match = idr.exec(str)
-    return match ? match[0] : null
-  }
-}
-
-module.exports = GistHandler
diff --git a/apps/remix-ide/test/index.js b/apps/remix-ide/test/index.js
deleted file mode 100644
index 84d8a5c68f..0000000000
--- a/apps/remix-ide/test/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-'use strict'
-
-require('./compiler-test')
-require('./gist-handler-test')
-require('./query-params-test')
diff --git a/apps/remix-ide/test/query-params-test.js b/apps/remix-ide/test/query-params-test.js
deleted file mode 100644
index c9062f6da0..0000000000
--- a/apps/remix-ide/test/query-params-test.js
+++ /dev/null
@@ -1,23 +0,0 @@
-'use strict'
-
-var test = require('tape')
-
-var QueryParams = require('../src/lib/query-params')
-
-test('queryParams.get', function (t) {
-  t.plan(2)
-
-  var fakeWindow = {location: {hash: '#wat=sup&foo=bar', search: ''}}
-  var params = new QueryParams(fakeWindow).get()
-  t.equal(params.wat, 'sup')
-  t.equal(params.foo, 'bar')
-})
-
-test('queryParams.update', function (t) {
-  t.plan(1)
-
-  var fakeWindow = {location: {hash: '#wat=sup', search: ''}}
-  var qp = new QueryParams(fakeWindow)
-  qp.update({foo: 'bar'})
-  t.equal(fakeWindow.location.hash, '#wat=sup&foo=bar')
-})
diff --git a/libs/remix-core-plugin/src/index.ts b/libs/remix-core-plugin/src/index.ts
index fe8a5c661e..b91e6b76a6 100644
--- a/libs/remix-core-plugin/src/index.ts
+++ b/libs/remix-core-plugin/src/index.ts
@@ -4,3 +4,4 @@ export { FetchAndCompile } from './lib/compiler-fetch-and-compile'
 export { CompilerImports } from './lib/compiler-content-imports'
 export { CompilerArtefacts } from './lib/compiler-artefacts'
 export { EditorContextListener } from './lib/editor-context-listener'
+export { GistHandler } from './lib/gist-handler'
diff --git a/libs/remix-core-plugin/src/lib/gist-handler.ts b/libs/remix-core-plugin/src/lib/gist-handler.ts
new file mode 100644
index 0000000000..7a6c305d32
--- /dev/null
+++ b/libs/remix-core-plugin/src/lib/gist-handler.ts
@@ -0,0 +1,85 @@
+'use strict'
+import { Plugin } from '@remixproject/engine'
+
+interface StringByString {
+  [key: string]: string;
+}
+
+const profile = {
+  name: 'gistHandler',
+  methods: ['load'],
+  events: [],
+  version: '0.0.1'
+}
+
+export class GistHandler extends Plugin {
+
+  constructor () {
+    super(profile)
+  }
+
+  async handleLoad (gistId: String | null, cb: Function) {
+    if (!cb) cb = () => {}
+
+    var loadingFromGist = false
+    if (!gistId) {
+      loadingFromGist = true
+      let value: string = await this.call('modal', 'prompt-value', 'Load a Gist', 'Enter the ID of the Gist or URL you would like to load.', null)
+      if (value !== '') {
+        gistId = getGistId(value)
+        if (gistId) {
+          cb(gistId)
+        } else {
+          await this.call('modal', 'alert', 'Gist load error', 'Error while loading gist. Please provide a valid Gist ID or URL.')
+        }
+      } else {
+        await this.call('modal', 'alert', 'Gist load error', 'Error while loading gist. Id cannot be empty.')        
+      }
+      return loadingFromGist
+    } else {
+      loadingFromGist = !!gistId
+    }
+    if (loadingFromGist) {
+      cb(gistId)
+    }
+    return loadingFromGist
+  }  
+
+  load (gistId: String | null) {
+    const self = this
+    return self.handleLoad(gistId, async (gistId: String | null) => {
+      let data: any
+      try {
+        data = (await fetch(`https://api.github.com/gists/${gistId}`)).json() as any
+        if (!data.files) {
+          this.call('model', 'alert', 'Gist load error', data.message)
+          return
+        }
+      } catch (e: any) {
+        this.call('model', 'alert', 'Gist load error', e.message)
+        return
+      }
+            
+      const obj: StringByString = {}
+      Object.keys(data.files).forEach((element) => {
+        const path = element.replace(/\.\.\./g, '/')
+        obj['/' + 'gist-' + gistId + '/' + path] = data.files[element]
+      })
+      this.call('fileManager', 'setBatchFiles', obj, 'workspace', true, async (errorSavingFiles: any) => {
+        if (!errorSavingFiles) {
+          const provider = await this.call('fileManager', 'getProviderByName', 'workspace')
+      } else {
+          this.call('model', 'alert', 'Gist load error', errorSavingFiles.message || errorSavingFiles)
+        }
+      })
+
+      
+    })
+  }
+}
+
+const getGistId = (str) => {
+  var idr = /[0-9A-Fa-f]{8,}/
+  var match = idr.exec(str)
+  return match ? match[0] : null
+}
\ No newline at end of file
diff --git a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx
index 13dec9d47d..4345514a17 100644
--- a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx
+++ b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx
@@ -136,7 +136,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
     plugin.appManager.activatePlugin('remixd')
   }
   const importFromGist = () => {
-    plugin.gistHandler.loadFromGist({ gist: '' }, fileManager)
+    plugin.call('gistHandler', 'load', '')
     plugin.verticalIcons.select('filePanel')
   }
   const switchToPreviousVersion = () => {
diff --git a/libs/remix-ui/workspace/src/lib/actions/workspace.ts b/libs/remix-ui/workspace/src/lib/actions/workspace.ts
index fddabeba59..957f7ee004 100644
--- a/libs/remix-ui/workspace/src/lib/actions/workspace.ts
+++ b/libs/remix-ui/workspace/src/lib/actions/workspace.ts
@@ -120,8 +120,7 @@ export const loadWorkspacePreset = async (template: 'gist-template' | 'code-temp
           if (!errorLoadingFile) {
             const provider = plugin.fileManager.getProvider('workspace')
 
-            provider.lastLoadedGistId = gistId
-          } else {
+        } else {
             dispatch(displayNotification('', errorLoadingFile.message || errorLoadingFile, 'OK', null, () => {}, null))
           }
         })
diff --git a/workspace.json b/workspace.json
index 1718e70f69..d4a9f6fcd4 100644
--- a/workspace.json
+++ b/workspace.json
@@ -82,16 +82,6 @@
               "apps/remix-ide/src/assets/js/**/*.js"
             ]
           }
-        },
-        "test": {
-          "builder": "@nrwl/workspace:run-commands",
-          "options": {
-            "commands": [
-              {
-                "command": "csslint && node apps/remix-ide/test/index.js"
-              }
-            ]
-          }
         }
       }
     },

From 9072eb5b1d5212b9fd8814b8b42291dcaae490ca Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Tue, 4 Jan 2022 18:25:47 +0100
Subject: [PATCH 087/168] add types to index.ts

---
 libs/remix-ui/app/src/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/libs/remix-ui/app/src/index.ts b/libs/remix-ui/app/src/index.ts
index e00682a41b..d02ade520c 100644
--- a/libs/remix-ui/app/src/index.ts
+++ b/libs/remix-ui/app/src/index.ts
@@ -3,3 +3,4 @@ export { dispatchModalContext } from './lib/remix-app/context/context'
 export { ModalProvider } from './lib/remix-app/context/provider'
 export { AppModal } from './lib/remix-app/interface/index'
 export { AlertModal } from './lib/remix-app/interface/index'
+export * from './lib/remix-app/types/index'

From 44a4fcd02b0cf7da075a8580dbed0ba1b4a06d16 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Tue, 4 Jan 2022 18:26:00 +0100
Subject: [PATCH 088/168] use modal

---
 apps/remix-ide/src/app.js                     |  8 +--
 apps/remix-ide/src/app/plugins/test.ts        | 53 -------------------
 .../remix-core-plugin/src/lib/gist-handler.ts | 43 ++++++++++++---
 .../app/src/lib/remix-app/interface/index.ts  |  8 +--
 4 files changed, 43 insertions(+), 69 deletions(-)
 delete mode 100644 apps/remix-ide/src/app/plugins/test.ts

diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index 07043a4284..2d25d1270e 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -12,11 +12,10 @@ import { VerticalIcons } from './app/components/vertical-icons'
 import { LandingPage } from './app/ui/landing-page/landing-page'
 import { MainPanel } from './app/components/main-panel'
 import { FramingService } from './framingService'
-import { ModalPluginTester } from './app/plugins/test'
 
 import { WalkthroughService } from './walkthroughService'
 
-import { OffsetToLineColumnConverter, CompilerMetadata, CompilerArtefacts, FetchAndCompile, CompilerImports, EditorContextListener, LoadFromGistHandler, GistHandler } from '@remix-project/core-plugin'
+import { OffsetToLineColumnConverter, CompilerMetadata, CompilerArtefacts, FetchAndCompile, CompilerImports, EditorContextListener, GistHandler, GistHandler } from '@remix-project/core-plugin'
 
 import migrateFileSystem from './migrateFileSystem'
 import Registry from './app/state/registry'
@@ -246,9 +245,7 @@ class AppComponent {
       contentImport
     )
 
-    const testplugin = new ModalPluginTester()
     self.engine.register([
-      testplugin,
       compileTab,
       run,
       debug,
@@ -286,8 +283,7 @@ class AppComponent {
     await self.appManager.activatePlugin(['hiddenPanel', 'pluginManager', 'contextualListener', 'terminal', 'blockchain', 'fetchAndCompile', 'contentImport', 'gistHandler'])
     await self.appManager.activatePlugin(['settings'])
     await self.appManager.activatePlugin(['walkthrough'])
-    await self.appManager.activatePlugin(['testerplugin'])
-
+    
     self.appManager.on('filePanel', 'workspaceInitializationCompleted', async () => {
       await self.appManager.registerContextMenuItems()
     })
diff --git a/apps/remix-ide/src/app/plugins/test.ts b/apps/remix-ide/src/app/plugins/test.ts
deleted file mode 100644
index da32f24039..0000000000
--- a/apps/remix-ide/src/app/plugins/test.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { Plugin } from '@remixproject/engine'
-import { Profile } from '@remixproject/plugin-utils'
-import { AlertModal } from 'libs/remix-ui/app/src/lib/remix-app/interface'
-import { ModalTypes } from 'libs/remix-ui/app/src/lib/remix-app/types'
-import { AppModal } from '../../../../../libs/remix-ui/app/src'
-
-const profile:Profile = {
-  name: 'testerplugin',
-  displayName: 'testerplugin',
-  description: 'testerplugin',
-  methods: []
-}
-
-export class ModalPluginTester extends Plugin {
-  constructor () {
-    super(profile)
-  }
-
-  handleMessage (message: any): void {
-    console.log(message)
-  }
-
-  onActivation (): void {
-    // just a modal
-    let mod:AppModal = {
-      id: 'modal1',
-      title: 'test',
-      message: 'test',
-      okFn: this.handleMessage,
-      okLabel: 'yes',
-      cancelFn: null,
-      cancelLabel: 'no'
-    }
-    // this.call('modal', 'modal', mod)
-
-    // modal with callback
-    mod = { ...mod, message: 'gist url', modalType: ModalTypes.prompt, defaultValue: 'prompting' }
-    // this.call('modal', 'modal', mod)
-
-    // modal with password
-    mod = { ...mod, message: 'enter password to give me eth', modalType: ModalTypes.password, defaultValue: 'pass' }
-    // this.call('modal', 'modal', mod)
-
-    const al:AlertModal = {
-      id: 'myalert',
-      message: 'alert message'
-    }
-    // this.call('modal', 'alert', al)
-
-    // set toaster
-    // this.call('modal', 'toast', 'toast message')
-  }
-}
diff --git a/libs/remix-core-plugin/src/lib/gist-handler.ts b/libs/remix-core-plugin/src/lib/gist-handler.ts
index 7a6c305d32..6a5a511098 100644
--- a/libs/remix-core-plugin/src/lib/gist-handler.ts
+++ b/libs/remix-core-plugin/src/lib/gist-handler.ts
@@ -1,5 +1,6 @@
 'use strict'
 import { Plugin } from '@remixproject/engine'
+import { AppModal, ModalTypes } from '@remix-ui/app'
 
 interface StringByString {
   [key: string]: string;
@@ -30,10 +31,22 @@ export class GistHandler extends Plugin {
         if (gistId) {
           cb(gistId)
         } else {
-          await this.call('modal', 'alert', 'Gist load error', 'Error while loading gist. Please provide a valid Gist ID or URL.')
+          const modalContent: AppModal = {
+            id: 'gisthandler',
+            title: 'Gist load error',
+            message: 'Error while loading gist. Please provide a valid Gist ID or URL.',
+            modalType: ModalTypes.alert
+          }
+          await this.call('modal', 'modal', modalContent)
         }
       } else {
-        await this.call('modal', 'alert', 'Gist load error', 'Error while loading gist. Id cannot be empty.')        
+        const modalContent: AppModal = {
+          id: 'gisthandler',
+          title: 'Gist load error',
+          message: 'Error while loading gist. Id cannot be empty.',
+          modalType: ModalTypes.alert
+        }
+        await this.call('modal', 'modal', modalContent)
       }
       return loadingFromGist
     } else {
@@ -52,11 +65,23 @@ export class GistHandler extends Plugin {
       try {
         data = (await fetch(`https://api.github.com/gists/${gistId}`)).json() as any
         if (!data.files) {
-          this.call('model', 'alert', 'Gist load error', data.message)
+          const modalContent: AppModal = {
+            id: 'gisthandler',
+            title: 'Gist load error',
+            message: data.message,
+            modalType: ModalTypes.alert
+          }
+          await this.call('modal', 'modal', modalContent)
           return
         }
       } catch (e: any) {
-        this.call('model', 'alert', 'Gist load error', e.message)
+        const modalContent: AppModal = {
+          id: 'gisthandler',
+          title: 'Gist load error',
+          message: e.message,
+          modalType: ModalTypes.alert
+        }
+        await this.call('modal', 'modal', modalContent)
         return
       }
             
@@ -68,8 +93,14 @@ export class GistHandler extends Plugin {
       this.call('fileManager', 'setBatchFiles', obj, 'workspace', true, async (errorSavingFiles: any) => {
         if (!errorSavingFiles) {
           const provider = await this.call('fileManager', 'getProviderByName', 'workspace')
-      } else {
-          this.call('model', 'alert', 'Gist load error', errorSavingFiles.message || errorSavingFiles)
+        } else {
+          const modalContent: AppModal = {
+            id: 'gisthandler',
+            title: 'Gist load error',
+            message:  errorSavingFiles.message || errorSavingFiles,
+            modalType: ModalTypes.alert
+          }
+          this.call('modal', 'modal', modalContent)
         }
       })
 
diff --git a/libs/remix-ui/app/src/lib/remix-app/interface/index.ts b/libs/remix-ui/app/src/lib/remix-app/interface/index.ts
index dcfcd7a1eb..4e5e6bd4e9 100644
--- a/libs/remix-ui/app/src/lib/remix-app/interface/index.ts
+++ b/libs/remix-ui/app/src/lib/remix-app/interface/index.ts
@@ -6,10 +6,10 @@ export interface AppModal {
     title: string
     // eslint-disable-next-line no-undef
     message: string | JSX.Element
-    okLabel: string
-    okFn: (value?:any) => void
-    cancelLabel: string
-    cancelFn: () => void,
+    okLabel?: string
+    okFn?: (value?:any) => void
+    cancelLabel?: string
+    cancelFn?: () => void,
     modalType?: ModalTypes,
     defaultValue?: string
     hideFn?: () => void

From 69dd31db9bd8ecb2e17e385a0c60c0cf0e51a655 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Wed, 5 Jan 2022 09:39:44 +0100
Subject: [PATCH 089/168] remove duplicated ref

---
 apps/remix-ide/src/app.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index 2d25d1270e..7ce3043fc8 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -15,7 +15,7 @@ import { FramingService } from './framingService'
 
 import { WalkthroughService } from './walkthroughService'
 
-import { OffsetToLineColumnConverter, CompilerMetadata, CompilerArtefacts, FetchAndCompile, CompilerImports, EditorContextListener, GistHandler, GistHandler } from '@remix-project/core-plugin'
+import { OffsetToLineColumnConverter, CompilerMetadata, CompilerArtefacts, FetchAndCompile, CompilerImports, EditorContextListener, GistHandler } from '@remix-project/core-plugin'
 
 import migrateFileSystem from './migrateFileSystem'
 import Registry from './app/state/registry'

From 2398549b530482499cf065cd4d90c94d273760c3 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Wed, 5 Jan 2022 13:24:47 +0100
Subject: [PATCH 090/168] fix modal

---
 apps/remix-ide/src/lib/cmdInterpreterAPI.js   |  2 +-
 .../remix-core-plugin/src/lib/gist-handler.ts | 39 ++++++++++++-------
 .../src/lib/remix-ui-modal-dialog.tsx         |  6 +--
 .../terminal/src/lib/remix-ui-terminal.tsx    |  2 +-
 4 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/apps/remix-ide/src/lib/cmdInterpreterAPI.js b/apps/remix-ide/src/lib/cmdInterpreterAPI.js
index 97d27f3a17..82ae4636fe 100644
--- a/apps/remix-ide/src/lib/cmdInterpreterAPI.js
+++ b/apps/remix-ide/src/lib/cmdInterpreterAPI.js
@@ -33,7 +33,7 @@ class CmdInterpreterAPI {
 
   log () { arguments[0] != null ? this._components.terminal.commands.html(arguments[0]) : this._components.terminal.commands.html(arguments[1]) }
   loadgist (id, cb) {
-    this._components.terminal.call('loadFromGistHandler', 'load', id)
+    this._components.terminal.call('gistHandler', 'load', id)
     if (cb) cb()
   }
 
diff --git a/libs/remix-core-plugin/src/lib/gist-handler.ts b/libs/remix-core-plugin/src/lib/gist-handler.ts
index 6a5a511098..9a800d2516 100644
--- a/libs/remix-core-plugin/src/lib/gist-handler.ts
+++ b/libs/remix-core-plugin/src/lib/gist-handler.ts
@@ -1,6 +1,5 @@
 'use strict'
 import { Plugin } from '@remixproject/engine'
-import { AppModal, ModalTypes } from '@remix-ui/app'
 
 interface StringByString {
   [key: string]: string;
@@ -25,26 +24,40 @@ export class GistHandler extends Plugin {
     var loadingFromGist = false
     if (!gistId) {
       loadingFromGist = true
-      let value: string = await this.call('modal', 'prompt-value', 'Load a Gist', 'Enter the ID of the Gist or URL you would like to load.', null)
+      const value = await (() => {
+        return new Promise((resolve, reject) => {
+          const modalContent = {
+            id: 'gisthandler',
+            title: 'Load a Gist',
+            message: 'Enter the ID of the Gist or URL you would like to load.',
+            modalType: 'prompt',
+            okFn: (value) => {
+              resolve(value)
+            }
+          }
+          this.call('modal', 'modal', modalContent)
+        })
+      })()
+      
       if (value !== '') {
         gistId = getGistId(value)
         if (gistId) {
           cb(gistId)
         } else {
-          const modalContent: AppModal = {
+          const modalContent = {
             id: 'gisthandler',
             title: 'Gist load error',
             message: 'Error while loading gist. Please provide a valid Gist ID or URL.',
-            modalType: ModalTypes.alert
+            modalType: 'alert'
           }
           await this.call('modal', 'modal', modalContent)
         }
       } else {
-        const modalContent: AppModal = {
+        const modalContent = {
           id: 'gisthandler',
           title: 'Gist load error',
           message: 'Error while loading gist. Id cannot be empty.',
-          modalType: ModalTypes.alert
+          modalType: 'alert'
         }
         await this.call('modal', 'modal', modalContent)
       }
@@ -63,23 +76,23 @@ export class GistHandler extends Plugin {
     return self.handleLoad(gistId, async (gistId: String | null) => {
       let data: any
       try {
-        data = (await fetch(`https://api.github.com/gists/${gistId}`)).json() as any
+        data = await (await fetch(`https://api.github.com/gists/${gistId}`)).json() as any
         if (!data.files) {
-          const modalContent: AppModal = {
+          const modalContent = {
             id: 'gisthandler',
             title: 'Gist load error',
             message: data.message,
-            modalType: ModalTypes.alert
+            modalType: 'alert'
           }
           await this.call('modal', 'modal', modalContent)
           return
         }
       } catch (e: any) {
-        const modalContent: AppModal = {
+        const modalContent = {
           id: 'gisthandler',
           title: 'Gist load error',
           message: e.message,
-          modalType: ModalTypes.alert
+          modalType: 'alert'
         }
         await this.call('modal', 'modal', modalContent)
         return
@@ -94,11 +107,11 @@ export class GistHandler extends Plugin {
         if (!errorSavingFiles) {
           const provider = await this.call('fileManager', 'getProviderByName', 'workspace')
         } else {
-          const modalContent: AppModal = {
+          const modalContent = {
             id: 'gisthandler',
             title: 'Gist load error',
             message:  errorSavingFiles.message || errorSavingFiles,
-            modalType: ModalTypes.alert
+            modalType: 'alert'
           }
           this.call('modal', 'modal', modalContent)
         }
diff --git a/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx b/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
index 524caaad62..f9fca87398 100644
--- a/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
+++ b/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
@@ -96,8 +96,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
           </div>
           <div className="modal-footer" data-id={`${props.id}ModalDialogModalFooter-react`}>
             {/* todo add autofocus ^^ */}
-            { props.okLabel &&
-              <span
+            { <span
                 data-id={`${props.id}-modal-footer-ok-react`}
                 className={'modal-ok btn btn-sm ' + (state.toggleBtn ? 'btn-dark' : 'btn-light')}
                 onClick={() => {
@@ -108,8 +107,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
                 { props.okLabel ? props.okLabel : 'OK' }
               </span>
             }
-            { props.cancelLabel &&
-              <span
+            { <span
                 data-id={`${props.id}-modal-footer-cancel-react`}
                 className={'modal-cancel btn btn-sm ' + (state.toggleBtn ? 'btn-light' : 'btn-dark')}
                 data-dismiss="modal"
diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
index acb13ecd68..b1adc7d0ff 100644
--- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
+++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
@@ -178,7 +178,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   }
 
   function loadgist (id, cb) {
-    gistHandler.loadFromGist({ gist: id }, _deps.fileManager)
+    props.plugin.call('gistHandler', 'load', id)
     if (cb) cb()
   }
 

From 8ba93304b3e9b0ff0bd37e6479dbb2eeca3ab7b2 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Wed, 5 Jan 2022 15:33:55 +0100
Subject: [PATCH 091/168] gist handler as required plugin

---
 apps/remix-ide/src/remixAppManager.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/remix-ide/src/remixAppManager.js b/apps/remix-ide/src/remixAppManager.js
index 32afcaec9a..74410cadf0 100644
--- a/apps/remix-ide/src/remixAppManager.js
+++ b/apps/remix-ide/src/remixAppManager.js
@@ -9,7 +9,7 @@ const _paq = window._paq = window._paq || []
 const requiredModules = [ // services + layout views + system views
   'manager', 'config', 'compilerArtefacts', 'compilerMetadata', 'contextualListener', 'editor', 'offsetToLineColumnConverter', 'network', 'theme',
   'fileManager', 'contentImport', 'blockchain', 'web3Provider', 'scriptRunner', 'fetchAndCompile', 'mainPanel', 'hiddenPanel', 'sidePanel', 'menuicons',
-  'filePanel', 'terminal', 'settings', 'pluginManager', 'tabs', 'udapp', 'dGitProvider', 'solidity-logic']
+  'filePanel', 'terminal', 'settings', 'pluginManager', 'tabs', 'udapp', 'dGitProvider', 'solidity-logic', 'gistHandler']
 
 const dependentModules = ['git', 'hardhat', 'slither'] // module which shouldn't be manually activated (e.g git is activated by remixd)
 

From ba9e3346df4466d502dcae97c8d0afefdc810f27 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Wed, 5 Jan 2022 16:20:11 +0100
Subject: [PATCH 092/168] fix e2e and modal behavior

---
 apps/remix-ide-e2e/src/tests/gist.test.ts     | 18 ++++----
 .../remix-core-plugin/src/lib/gist-handler.ts | 41 +++++++++++--------
 2 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/gist.test.ts b/apps/remix-ide-e2e/src/tests/gist.test.ts
index 3216ff4b39..09dea17652 100644
--- a/apps/remix-ide-e2e/src/tests/gist.test.ts
+++ b/apps/remix-ide-e2e/src/tests/gist.test.ts
@@ -76,11 +76,11 @@ module.exports = {
       .waitForElementVisible('button[data-id="landingPageImportFromGistButton"]')
       .pause(1000)
       .scrollAndClick('button[data-id="landingPageImportFromGistButton"]')
-      .waitForElementVisible('*[data-id="modalDialogModalTitle"]')
-      .assert.containsText('*[data-id="modalDialogModalTitle"]', 'Load a Gist')
-      .waitForElementVisible('*[data-id="modalDialogModalBody"]')
-      .assert.containsText('*[data-id="modalDialogModalBody"]', 'Enter the ID of the Gist or URL you would like to load.')
-      .waitForElementVisible('*[data-id="modalDialogCustomPromptText"]')
+      .waitForElementVisible('*[data-id="gisthandlerModalDialogModalTitle-react"]')
+      .assert.containsText('*[data-id="gisthandlerModalDialogModalTitle-react"]', 'Load a Gist')
+      .waitForElementVisible('*[data-id="gisthandlerModalDialogModalBody-react"]')
+      .assert.containsText('*[data-id="gisthandlerModalDialogModalBody-react"]', 'Enter the ID of the Gist or URL you would like to load.')
+      .waitForElementVisible('*[data-id="modalDialogCustomPromp"]')
       .modalFooterCancelClick()
   },
 
@@ -89,11 +89,11 @@ module.exports = {
       .waitForElementVisible('*[data-id="remixIdeIconPanel"]', 10000)
       .clickLaunchIcon('filePanel')
       .scrollAndClick('*[data-id="landingPageImportFromGistButton"]')
-      .waitForElementVisible('*[data-id="modalDialogCustomPromptText"]')
-      .setValue('*[data-id="modalDialogCustomPromptText"]', testData.invalidGistId)
+      .waitForElementVisible('*[data-id="gisthandlerModalDialogModalBody-react"] input[data-id="modalDialogCustomPromp"]')
+      .setValue('*[data-id="gisthandlerModalDialogModalBody-react"] input[data-id="modalDialogCustomPromp"]', testData.invalidGistId)
       .modalFooterOKClick()
-      .waitForElementVisible('*[data-id="modalDialogModalBody"]')
-      .assert.containsText('*[data-id="modalDialogModalBody"]', 'Not Found')
+      .waitForElementVisible('*[data-id="gisthandlerModalDialogModalBody-react"]')
+      .assert.containsText('*[data-id="gisthandlerModalDialogModalBody-react"]', 'Not Found')
       .modalFooterOKClick()
   },
 
diff --git a/libs/remix-core-plugin/src/lib/gist-handler.ts b/libs/remix-core-plugin/src/lib/gist-handler.ts
index 9a800d2516..93086f021f 100644
--- a/libs/remix-core-plugin/src/lib/gist-handler.ts
+++ b/libs/remix-core-plugin/src/lib/gist-handler.ts
@@ -24,20 +24,29 @@ export class GistHandler extends Plugin {
     var loadingFromGist = false
     if (!gistId) {
       loadingFromGist = true
-      const value = await (() => {
-        return new Promise((resolve, reject) => {
-          const modalContent = {
-            id: 'gisthandler',
-            title: 'Load a Gist',
-            message: 'Enter the ID of the Gist or URL you would like to load.',
-            modalType: 'prompt',
-            okFn: (value) => {
-              resolve(value)
+      let value
+      try {
+        value = await (() => {
+          return new Promise((resolve, reject) => {
+            const modalContent = {
+              id: 'gisthandler',
+              title: 'Load a Gist',
+              message: 'Enter the ID of the Gist or URL you would like to load.',
+              modalType: 'prompt',
+              okFn: (value) => {
+                setTimeout(() => resolve(value), 0)
+              },
+              cancelFn: () => {
+                setTimeout(() => reject(), 0)
+              }
             }
-          }
-          this.call('modal', 'modal', modalContent)
-        })
-      })()
+            this.call('modal', 'modal', modalContent)
+          })
+        })()
+      } catch (e) {
+        // the modal has been canceled
+        return
+      }     
       
       if (value !== '') {
         gistId = getGistId(value)
@@ -50,16 +59,16 @@ export class GistHandler extends Plugin {
             message: 'Error while loading gist. Please provide a valid Gist ID or URL.',
             modalType: 'alert'
           }
-          await this.call('modal', 'modal', modalContent)
+          this.call('modal', 'modal', modalContent)
         }
       } else {
         const modalContent = {
-          id: 'gisthandler',
+          id: 'gisthandlerEmpty',
           title: 'Gist load error',
           message: 'Error while loading gist. Id cannot be empty.',
           modalType: 'alert'
         }
-        await this.call('modal', 'modal', modalContent)
+        this.call('modal', 'modal', modalContent)
       }
       return loadingFromGist
     } else {

From fa61de3d291eaf5219e39a8f2330b77a6f6296f2 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Wed, 5 Jan 2022 16:21:02 +0100
Subject: [PATCH 093/168] linting

---
 libs/remix-core-plugin/src/lib/gist-handler.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/libs/remix-core-plugin/src/lib/gist-handler.ts b/libs/remix-core-plugin/src/lib/gist-handler.ts
index 93086f021f..bae3a2d60c 100644
--- a/libs/remix-core-plugin/src/lib/gist-handler.ts
+++ b/libs/remix-core-plugin/src/lib/gist-handler.ts
@@ -46,8 +46,8 @@ export class GistHandler extends Plugin {
       } catch (e) {
         // the modal has been canceled
         return
-      }     
-      
+      }
+
       if (value !== '') {
         gistId = getGistId(value)
         if (gistId) {
@@ -78,7 +78,7 @@ export class GistHandler extends Plugin {
       cb(gistId)
     }
     return loadingFromGist
-  }  
+  }
 
   load (gistId: String | null) {
     const self = this
@@ -106,7 +106,7 @@ export class GistHandler extends Plugin {
         await this.call('modal', 'modal', modalContent)
         return
       }
-            
+
       const obj: StringByString = {}
       Object.keys(data.files).forEach((element) => {
         const path = element.replace(/\.\.\./g, '/')
@@ -119,14 +119,14 @@ export class GistHandler extends Plugin {
           const modalContent = {
             id: 'gisthandler',
             title: 'Gist load error',
-            message:  errorSavingFiles.message || errorSavingFiles,
+            message: errorSavingFiles.message || errorSavingFiles,
             modalType: 'alert'
           }
           this.call('modal', 'modal', modalContent)
         }
       })
 
-      
+
     })
   }
 }

From e3b155635e9d9bb1f78921a2d0c6e67f527756f4 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Wed, 5 Jan 2022 16:32:52 +0100
Subject: [PATCH 094/168] fix linting

---
 libs/remix-core-plugin/src/lib/gist-handler.ts | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/libs/remix-core-plugin/src/lib/gist-handler.ts b/libs/remix-core-plugin/src/lib/gist-handler.ts
index bae3a2d60c..19f88b5a93 100644
--- a/libs/remix-core-plugin/src/lib/gist-handler.ts
+++ b/libs/remix-core-plugin/src/lib/gist-handler.ts
@@ -1,3 +1,4 @@
+/* global fetch */
 'use strict'
 import { Plugin } from '@remixproject/engine'
 
@@ -13,7 +14,6 @@ const profile = {
 }
 
 export class GistHandler extends Plugin {
-
   constructor () {
     super(profile)
   }
@@ -37,7 +37,7 @@ export class GistHandler extends Plugin {
                 setTimeout(() => resolve(value), 0)
               },
               cancelFn: () => {
-                setTimeout(() => reject(), 0)
+                setTimeout(() => reject("Canceled"), 0)
               }
             }
             this.call('modal', 'modal', modalContent)
@@ -113,9 +113,7 @@ export class GistHandler extends Plugin {
         obj['/' + 'gist-' + gistId + '/' + path] = data.files[element]
       })
       this.call('fileManager', 'setBatchFiles', obj, 'workspace', true, async (errorSavingFiles: any) => {
-        if (!errorSavingFiles) {
-          const provider = await this.call('fileManager', 'getProviderByName', 'workspace')
-        } else {
+        if (errorSavingFiles) {
           const modalContent = {
             id: 'gisthandler',
             title: 'Gist load error',
@@ -125,8 +123,6 @@ export class GistHandler extends Plugin {
           this.call('modal', 'modal', modalContent)
         }
       })
-
-
     })
   }
 }
@@ -135,4 +131,4 @@ const getGistId = (str) => {
   var idr = /[0-9A-Fa-f]{8,}/
   var match = idr.exec(str)
   return match ? match[0] : null
-}
\ No newline at end of file
+}

From 56e75654a703a658f8b22aeec4ea009300f2233d Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Wed, 5 Jan 2022 16:52:39 +0100
Subject: [PATCH 095/168] linting

---
 .../src/commands/modalFooterCancelClick.ts    | 15 +++---
 .../src/commands/modalFooterOKClick.ts        | 11 ++--
 apps/remix-ide-e2e/src/tests/gist.test.ts     |  6 +--
 apps/remix-ide-e2e/src/types/index.d.ts       |  4 +-
 apps/remix-ide/src/app.js                     |  2 +-
 .../remix-core-plugin/src/lib/gist-handler.ts |  2 +-
 .../src/lib/remix-ui-modal-dialog.tsx         | 50 +++++++++----------
 7 files changed, 46 insertions(+), 44 deletions(-)

diff --git a/apps/remix-ide-e2e/src/commands/modalFooterCancelClick.ts b/apps/remix-ide-e2e/src/commands/modalFooterCancelClick.ts
index e3f90e0c1b..c6505f8450 100644
--- a/apps/remix-ide-e2e/src/commands/modalFooterCancelClick.ts
+++ b/apps/remix-ide-e2e/src/commands/modalFooterCancelClick.ts
@@ -1,14 +1,15 @@
 import { NightwatchBrowser } from 'nightwatch'
 import EventEmitter from 'events'
 
-class ModalFooterOKClick extends EventEmitter {
-  command (this: NightwatchBrowser): NightwatchBrowser {
-    this.api.waitForElementVisible('#modal-footer-cancel').perform((client, done) => {
-      this.api.execute(function () {
-        const elem = document.querySelector('#modal-footer-cancel') as HTMLElement
+class ModalFooterCancelClick extends EventEmitter {
+  command (this: NightwatchBrowser, id?: string): NightwatchBrowser {
+    const clientId = id ? `*[data-id="${id}-modal-footer-cancel-react"]` : '#modal-footer-cancel'
+    this.api.waitForElementVisible(clientId).perform((client, done) => {
+      this.api.execute(function (clientId) {
+        const elem = document.querySelector(clientId) as HTMLElement
 
         elem.click()
-      }, [], () => {
+      }, [clientId], () => {
         done()
         this.emit('complete')
       })
@@ -17,4 +18,4 @@ class ModalFooterOKClick extends EventEmitter {
   }
 }
 
-module.exports = ModalFooterOKClick
+module.exports = ModalFooterCancelClick
diff --git a/apps/remix-ide-e2e/src/commands/modalFooterOKClick.ts b/apps/remix-ide-e2e/src/commands/modalFooterOKClick.ts
index bea13a01b2..2e656f287c 100644
--- a/apps/remix-ide-e2e/src/commands/modalFooterOKClick.ts
+++ b/apps/remix-ide-e2e/src/commands/modalFooterOKClick.ts
@@ -2,13 +2,14 @@ import { NightwatchBrowser } from 'nightwatch'
 import EventEmitter from 'events'
 
 class ModalFooterOKClick extends EventEmitter {
-  command (this: NightwatchBrowser): NightwatchBrowser {
-    this.api.waitForElementVisible('#modal-footer-ok').perform((client, done) => {
-      this.api.execute(function () {
-        const elem = document.querySelector('#modal-footer-ok') as HTMLElement
+  command (this: NightwatchBrowser, id?: string): NightwatchBrowser {
+    const clientId = id ? `*[data-id="${id}-modal-footer-ok-react"]` : '#modal-footer-ok'
+    this.api.waitForElementVisible(clientId).perform((client, done) => {
+      this.api.execute(function (clientId) {
+        const elem = document.querySelector(clientId) as HTMLElement
 
         elem.click()
-      }, [], () => {
+      }, [clientId], () => {
         done()
         this.emit('complete')
       })
diff --git a/apps/remix-ide-e2e/src/tests/gist.test.ts b/apps/remix-ide-e2e/src/tests/gist.test.ts
index 09dea17652..05eeb378af 100644
--- a/apps/remix-ide-e2e/src/tests/gist.test.ts
+++ b/apps/remix-ide-e2e/src/tests/gist.test.ts
@@ -81,7 +81,7 @@ module.exports = {
       .waitForElementVisible('*[data-id="gisthandlerModalDialogModalBody-react"]')
       .assert.containsText('*[data-id="gisthandlerModalDialogModalBody-react"]', 'Enter the ID of the Gist or URL you would like to load.')
       .waitForElementVisible('*[data-id="modalDialogCustomPromp"]')
-      .modalFooterCancelClick()
+      .modalFooterCancelClick('gisthandler')
   },
 
   'Display Error Message For Invalid Gist ID': function (browser: NightwatchBrowser) {
@@ -91,10 +91,10 @@ module.exports = {
       .scrollAndClick('*[data-id="landingPageImportFromGistButton"]')
       .waitForElementVisible('*[data-id="gisthandlerModalDialogModalBody-react"] input[data-id="modalDialogCustomPromp"]')
       .setValue('*[data-id="gisthandlerModalDialogModalBody-react"] input[data-id="modalDialogCustomPromp"]', testData.invalidGistId)
-      .modalFooterOKClick()
+      .modalFooterOKClick('gisthandler')
       .waitForElementVisible('*[data-id="gisthandlerModalDialogModalBody-react"]')
       .assert.containsText('*[data-id="gisthandlerModalDialogModalBody-react"]', 'Not Found')
-      .modalFooterOKClick()
+      .modalFooterOKClick('gisthandler')
   },
 
   'Display Error Message For Missing Gist Token When Publishing': function (browser: NightwatchBrowser) {
diff --git a/apps/remix-ide-e2e/src/types/index.d.ts b/apps/remix-ide-e2e/src/types/index.d.ts
index 373139fbf4..1ddb10aa10 100644
--- a/apps/remix-ide-e2e/src/types/index.d.ts
+++ b/apps/remix-ide-e2e/src/types/index.d.ts
@@ -18,7 +18,7 @@ declare module 'nightwatch' {
         goToVMTraceStep(step: number, incr?: number): NightwatchBrowser,
         checkVariableDebug(id: string, debugValue: NightwatchCheckVariableDebugValue): NightwatchBrowser,
         addAtAddressInstance(address: string, isValidFormat: boolean, isValidChecksum: boolean): NightwatchBrowser,
-        modalFooterOKClick(): NightwatchBrowser,
+        modalFooterOKClick(id?: string): NightwatchBrowser,
         clickInstance(index: number): NightwatchBrowser,
         journalLastChildIncludes(val: string): NightwatchBrowser,
         executeScript(script: string): NightwatchBrowser,
@@ -32,7 +32,7 @@ declare module 'nightwatch' {
         scrollToLine(line: number): NightwatchBrowser,
         waitForElementContainsText(id: string, value: string, timeout?: number): NightwatchBrowser,
         getModalBody(callback: (value: string, cb: VoidFunction) => void): NightwatchBrowser,
-        modalFooterCancelClick(): NightwatchBrowser,
+        modalFooterCancelClick(id?: string): NightwatchBrowser,
         selectContract(contractName: string): NightwatchBrowser,
         createContract(inputParams: string): NightwatchBrowser,
         getAddressAtPosition(index: number, cb: (pos: string) => void): NightwatchBrowser,
diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index 7ce3043fc8..22cc43679b 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -283,7 +283,7 @@ class AppComponent {
     await self.appManager.activatePlugin(['hiddenPanel', 'pluginManager', 'contextualListener', 'terminal', 'blockchain', 'fetchAndCompile', 'contentImport', 'gistHandler'])
     await self.appManager.activatePlugin(['settings'])
     await self.appManager.activatePlugin(['walkthrough'])
-    
+
     self.appManager.on('filePanel', 'workspaceInitializationCompleted', async () => {
       await self.appManager.registerContextMenuItems()
     })
diff --git a/libs/remix-core-plugin/src/lib/gist-handler.ts b/libs/remix-core-plugin/src/lib/gist-handler.ts
index 19f88b5a93..92b693757d 100644
--- a/libs/remix-core-plugin/src/lib/gist-handler.ts
+++ b/libs/remix-core-plugin/src/lib/gist-handler.ts
@@ -37,7 +37,7 @@ export class GistHandler extends Plugin {
                 setTimeout(() => resolve(value), 0)
               },
               cancelFn: () => {
-                setTimeout(() => reject("Canceled"), 0)
+                setTimeout(() => reject(new Error('Canceled')), 0)
               }
             }
             this.call('modal', 'modal', modalContent)
diff --git a/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx b/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
index f9fca87398..41b2afb4d1 100644
--- a/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
+++ b/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
@@ -86,38 +86,38 @@ export const ModalDialog = (props: ModalDialogProps) => {
               {props.title && props.title}
             </h6>
             {!props.showCancelIcon &&
-            <span className="modal-close" onClick={() => handleHide()}>
-              <i title="Close" className="fas fa-times" aria-hidden="true"></i>
-            </span>
+              <span className="modal-close" onClick={() => handleHide()}>
+                <i title="Close" className="fas fa-times" aria-hidden="true"></i>
+              </span>
             }
           </div>
           <div className="modal-body text-break remixModalBody" data-id={`${props.id}ModalDialogModalBody-react`}>
-            { props.children ? props.children : props.message }
+            {props.children ? props.children : props.message}
           </div>
           <div className="modal-footer" data-id={`${props.id}ModalDialogModalFooter-react`}>
             {/* todo add autofocus ^^ */}
-            { <span
-                data-id={`${props.id}-modal-footer-ok-react`}
-                className={'modal-ok btn btn-sm ' + (state.toggleBtn ? 'btn-dark' : 'btn-light')}
-                onClick={() => {
-                  if (props.okFn) props.okFn()
-                  handleHide()
-                }}
-              >
-                { props.okLabel ? props.okLabel : 'OK' }
-              </span>
+            {<span
+              data-id={`${props.id}-modal-footer-ok-react`}
+              className={'modal-ok btn btn-sm ' + (state.toggleBtn ? 'btn-dark' : 'btn-light')}
+              onClick={() => {
+                if (props.okFn) props.okFn()
+                handleHide()
+              }}
+            >
+              {props.okLabel ? props.okLabel : 'OK'}
+            </span>
             }
-            { <span
-                data-id={`${props.id}-modal-footer-cancel-react`}
-                className={'modal-cancel btn btn-sm ' + (state.toggleBtn ? 'btn-light' : 'btn-dark')}
-                data-dismiss="modal"
-                onClick={() => {
-                  if (props.cancelFn) props.cancelFn()
-                  handleHide()
-                }}
-              >
-                { props.cancelLabel ? props.cancelLabel : 'Cancel' }
-              </span>
+            {<span
+              data-id={`${props.id}-modal-footer-cancel-react`}
+              className={'modal-cancel btn btn-sm ' + (state.toggleBtn ? 'btn-light' : 'btn-dark')}
+              data-dismiss="modal"
+              onClick={() => {
+                if (props.cancelFn) props.cancelFn()
+                handleHide()
+              }}
+            >
+              {props.cancelLabel ? props.cancelLabel : 'Cancel'}
+            </span>
             }
           </div>
         </div>

From fe07219db3dd29bb4198869da21bd14a2b51e359 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Wed, 5 Jan 2022 17:46:06 +0100
Subject: [PATCH 096/168] fix linting

---
 apps/remix-ide-e2e/src/tests/gist.test.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/remix-ide-e2e/src/tests/gist.test.ts b/apps/remix-ide-e2e/src/tests/gist.test.ts
index 05eeb378af..3761ae362c 100644
--- a/apps/remix-ide-e2e/src/tests/gist.test.ts
+++ b/apps/remix-ide-e2e/src/tests/gist.test.ts
@@ -86,6 +86,7 @@ module.exports = {
 
   'Display Error Message For Invalid Gist ID': function (browser: NightwatchBrowser) {
     browser
+      .pause(1000)
       .waitForElementVisible('*[data-id="remixIdeIconPanel"]', 10000)
       .clickLaunchIcon('filePanel')
       .scrollAndClick('*[data-id="landingPageImportFromGistButton"]')
@@ -99,6 +100,7 @@ module.exports = {
 
   'Display Error Message For Missing Gist Token When Publishing': function (browser: NightwatchBrowser) {
     browser
+      .pause(1000)
       .waitForElementVisible('*[data-id="remixIdeIconPanel"]', 10000)
       .clickLaunchIcon('settings')
       .waitForElementVisible('[data-id="settingsTabRemoveGistToken"]')

From bc6e0635810699787488720840bb9a71c44258be Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 6 Jan 2022 10:02:27 +0100
Subject: [PATCH 097/168] fix E2E

---
 apps/remix-ide-e2e/src/tests/gist.test.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/gist.test.ts b/apps/remix-ide-e2e/src/tests/gist.test.ts
index 3761ae362c..0dcf77c5b5 100644
--- a/apps/remix-ide-e2e/src/tests/gist.test.ts
+++ b/apps/remix-ide-e2e/src/tests/gist.test.ts
@@ -91,6 +91,9 @@ module.exports = {
       .clickLaunchIcon('filePanel')
       .scrollAndClick('*[data-id="landingPageImportFromGistButton"]')
       .waitForElementVisible('*[data-id="gisthandlerModalDialogModalBody-react"] input[data-id="modalDialogCustomPromp"]')
+      .execute(() => {
+        (document.querySelector('*[data-id="gisthandlerModalDialogModalBody-react"] input[data-id="modalDialogCustomPromp"]') as any).focus()
+      }, [], () => {})    
       .setValue('*[data-id="gisthandlerModalDialogModalBody-react"] input[data-id="modalDialogCustomPromp"]', testData.invalidGistId)
       .modalFooterOKClick('gisthandler')
       .waitForElementVisible('*[data-id="gisthandlerModalDialogModalBody-react"]')
@@ -131,9 +134,12 @@ module.exports = {
       .click('[data-id="settingsTabSaveGistToken"]')
       .clickLaunchIcon('filePanel')
       .scrollAndClick('*[data-id="landingPageImportFromGistButton"]')
-      .waitForElementVisible('*[data-id="modalDialogCustomPromptText"]')
-      .setValue('*[data-id="modalDialogCustomPromptText"]', testData.validGistId)
-      .modalFooterOKClick()
+      .waitForElementVisible('*[data-id="gisthandlerModalDialogModalBody-react"] input[data-id="modalDialogCustomPromp"]')
+      .execute(() => {
+        (document.querySelector('*[data-id="gisthandlerModalDialogModalBody-react"] input[data-id="modalDialogCustomPromp"]') as any).focus()
+      }, [], () => {})    
+      .setValue('*[data-id="gisthandlerModalDialogModalBody-react"] input[data-id="modalDialogCustomPromp"]', testData.validGistId)
+      .modalFooterOKClick('gisthandler')
       .openFile(`gist-${testData.validGistId}/README.txt`)
       .waitForElementVisible(`div[title='default_workspace/gist-${testData.validGistId}/README.txt']`)
       .assert.containsText(`div[title='default_workspace/gist-${testData.validGistId}/README.txt'] > span`, 'README.txt')

From cb1439e89fd04a5b45afb74db91ad896c221c9b2 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 6 Jan 2022 10:17:34 +0100
Subject: [PATCH 098/168] rollback change in the modal dialog

---
 libs/remix-ui/app/src/lib/remix-app/interface/index.ts    | 8 ++++----
 .../modal-dialog/src/lib/remix-ui-modal-dialog.tsx        | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/libs/remix-ui/app/src/lib/remix-app/interface/index.ts b/libs/remix-ui/app/src/lib/remix-app/interface/index.ts
index 4e5e6bd4e9..dcfcd7a1eb 100644
--- a/libs/remix-ui/app/src/lib/remix-app/interface/index.ts
+++ b/libs/remix-ui/app/src/lib/remix-app/interface/index.ts
@@ -6,10 +6,10 @@ export interface AppModal {
     title: string
     // eslint-disable-next-line no-undef
     message: string | JSX.Element
-    okLabel?: string
-    okFn?: (value?:any) => void
-    cancelLabel?: string
-    cancelFn?: () => void,
+    okLabel: string
+    okFn: (value?:any) => void
+    cancelLabel: string
+    cancelFn: () => void,
     modalType?: ModalTypes,
     defaultValue?: string
     hideFn?: () => void
diff --git a/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx b/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
index 41b2afb4d1..714255aa93 100644
--- a/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
+++ b/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
@@ -96,7 +96,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
           </div>
           <div className="modal-footer" data-id={`${props.id}ModalDialogModalFooter-react`}>
             {/* todo add autofocus ^^ */}
-            {<span
+            { props.okLabel && <span
               data-id={`${props.id}-modal-footer-ok-react`}
               className={'modal-ok btn btn-sm ' + (state.toggleBtn ? 'btn-dark' : 'btn-light')}
               onClick={() => {
@@ -107,7 +107,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
               {props.okLabel ? props.okLabel : 'OK'}
             </span>
             }
-            {<span
+            { props.cancelLabel && <span
               data-id={`${props.id}-modal-footer-cancel-react`}
               className={'modal-cancel btn btn-sm ' + (state.toggleBtn ? 'btn-light' : 'btn-dark')}
               data-dismiss="modal"

From aae31ac92f11b4eefef7cd36eae34946941aa8e7 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 6 Jan 2022 10:25:32 +0100
Subject: [PATCH 099/168] linting

---
 apps/remix-ide-e2e/src/tests/gist.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/gist.test.ts b/apps/remix-ide-e2e/src/tests/gist.test.ts
index 0dcf77c5b5..8759cd2448 100644
--- a/apps/remix-ide-e2e/src/tests/gist.test.ts
+++ b/apps/remix-ide-e2e/src/tests/gist.test.ts
@@ -93,7 +93,7 @@ module.exports = {
       .waitForElementVisible('*[data-id="gisthandlerModalDialogModalBody-react"] input[data-id="modalDialogCustomPromp"]')
       .execute(() => {
         (document.querySelector('*[data-id="gisthandlerModalDialogModalBody-react"] input[data-id="modalDialogCustomPromp"]') as any).focus()
-      }, [], () => {})    
+      }, [], () => {})
       .setValue('*[data-id="gisthandlerModalDialogModalBody-react"] input[data-id="modalDialogCustomPromp"]', testData.invalidGistId)
       .modalFooterOKClick('gisthandler')
       .waitForElementVisible('*[data-id="gisthandlerModalDialogModalBody-react"]')
@@ -137,7 +137,7 @@ module.exports = {
       .waitForElementVisible('*[data-id="gisthandlerModalDialogModalBody-react"] input[data-id="modalDialogCustomPromp"]')
       .execute(() => {
         (document.querySelector('*[data-id="gisthandlerModalDialogModalBody-react"] input[data-id="modalDialogCustomPromp"]') as any).focus()
-      }, [], () => {})    
+      }, [], () => {})
       .setValue('*[data-id="gisthandlerModalDialogModalBody-react"] input[data-id="modalDialogCustomPromp"]', testData.validGistId)
       .modalFooterOKClick('gisthandler')
       .openFile(`gist-${testData.validGistId}/README.txt`)

From a1312ad721ecd82112001a43a39130b64a4090e4 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 6 Jan 2022 10:45:40 +0100
Subject: [PATCH 100/168] remove uneeded

---
 libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
index b1adc7d0ff..46dbea432d 100644
--- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
+++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
@@ -25,7 +25,7 @@ export interface ClipboardEvent<T = Element> extends SyntheticEvent<T, any> {
 }
 
 export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
-  const { call, _deps, on, config, event, gistHandler, version } = props.plugin
+  const { call, _deps, on, config, event, version } = props.plugin
   const [_cmdIndex, setCmdIndex] = useState(-1)
   const [_cmdTemp, setCmdTemp] = useState('')
 

From 0caa0b37edbfb548d5b05d69a0b05a3cab2ae85a Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 6 Jan 2022 10:54:11 +0100
Subject: [PATCH 101/168] linting

---
 libs/remix-ui/workspace/src/lib/actions/workspace.ts | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/libs/remix-ui/workspace/src/lib/actions/workspace.ts b/libs/remix-ui/workspace/src/lib/actions/workspace.ts
index 957f7ee004..cc68af7efd 100644
--- a/libs/remix-ui/workspace/src/lib/actions/workspace.ts
+++ b/libs/remix-ui/workspace/src/lib/actions/workspace.ts
@@ -117,11 +117,8 @@ export const loadWorkspacePreset = async (template: 'gist-template' | 'code-temp
           obj['/' + 'gist-' + gistId + '/' + path] = data.files[element]
         })
         plugin.fileManager.setBatchFiles(obj, 'workspace', true, (errorLoadingFile) => {
-          if (!errorLoadingFile) {
-            const provider = plugin.fileManager.getProvider('workspace')
-
-        } else {
-            dispatch(displayNotification('', errorLoadingFile.message || errorLoadingFile, 'OK', null, () => {}, null))
+          if (errorLoadingFile) {
+            dispatch(displayNotification('', errorLoadingFile.message || errorLoadingFile, 'OK', null, () => {}, null))         
           }
         })
       } catch (e) {

From 3efb789972bbbece5b20b5f2ebceaa2c82ec91ab Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 6 Jan 2022 11:01:13 +0100
Subject: [PATCH 102/168] linting

---
 libs/remix-ui/workspace/src/lib/actions/workspace.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/remix-ui/workspace/src/lib/actions/workspace.ts b/libs/remix-ui/workspace/src/lib/actions/workspace.ts
index cc68af7efd..3dd6b16bbb 100644
--- a/libs/remix-ui/workspace/src/lib/actions/workspace.ts
+++ b/libs/remix-ui/workspace/src/lib/actions/workspace.ts
@@ -118,7 +118,7 @@ export const loadWorkspacePreset = async (template: 'gist-template' | 'code-temp
         })
         plugin.fileManager.setBatchFiles(obj, 'workspace', true, (errorLoadingFile) => {
           if (errorLoadingFile) {
-            dispatch(displayNotification('', errorLoadingFile.message || errorLoadingFile, 'OK', null, () => {}, null))         
+            dispatch(displayNotification('', errorLoadingFile.message || errorLoadingFile, 'OK', null, () => {}, null))
           }
         })
       } catch (e) {

From 7490cb696c633cf91ea95f51e504d4d33d0a7556 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 6 Jan 2022 11:16:27 +0100
Subject: [PATCH 103/168] fix modal

---
 libs/remix-core-plugin/src/lib/gist-handler.ts | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/libs/remix-core-plugin/src/lib/gist-handler.ts b/libs/remix-core-plugin/src/lib/gist-handler.ts
index 92b693757d..1825715299 100644
--- a/libs/remix-core-plugin/src/lib/gist-handler.ts
+++ b/libs/remix-core-plugin/src/lib/gist-handler.ts
@@ -33,6 +33,8 @@ export class GistHandler extends Plugin {
               title: 'Load a Gist',
               message: 'Enter the ID of the Gist or URL you would like to load.',
               modalType: 'prompt',
+              okLabel: 'OK',
+              cancelLabel: 'Cancel',
               okFn: (value) => {
                 setTimeout(() => resolve(value), 0)
               },
@@ -57,7 +59,8 @@ export class GistHandler extends Plugin {
             id: 'gisthandler',
             title: 'Gist load error',
             message: 'Error while loading gist. Please provide a valid Gist ID or URL.',
-            modalType: 'alert'
+            modalType: 'alert',
+            okLabel: 'OK',
           }
           this.call('modal', 'modal', modalContent)
         }
@@ -66,7 +69,8 @@ export class GistHandler extends Plugin {
           id: 'gisthandlerEmpty',
           title: 'Gist load error',
           message: 'Error while loading gist. Id cannot be empty.',
-          modalType: 'alert'
+          modalType: 'alert',
+          okLabel: 'OK',
         }
         this.call('modal', 'modal', modalContent)
       }
@@ -91,7 +95,8 @@ export class GistHandler extends Plugin {
             id: 'gisthandler',
             title: 'Gist load error',
             message: data.message,
-            modalType: 'alert'
+            modalType: 'alert',
+            okLabel: 'OK',
           }
           await this.call('modal', 'modal', modalContent)
           return
@@ -101,7 +106,8 @@ export class GistHandler extends Plugin {
           id: 'gisthandler',
           title: 'Gist load error',
           message: e.message,
-          modalType: 'alert'
+          modalType: 'alert',
+          okLabel: 'OK',
         }
         await this.call('modal', 'modal', modalContent)
         return
@@ -118,7 +124,8 @@ export class GistHandler extends Plugin {
             id: 'gisthandler',
             title: 'Gist load error',
             message: errorSavingFiles.message || errorSavingFiles,
-            modalType: 'alert'
+            modalType: 'alert',
+            okLabel: 'OK',
           }
           this.call('modal', 'modal', modalContent)
         }

From 538c07eae02af7dd3c1cfd8b02818caf5ea067af Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 6 Jan 2022 11:27:11 +0100
Subject: [PATCH 104/168] linting

---
 libs/remix-core-plugin/src/lib/gist-handler.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/libs/remix-core-plugin/src/lib/gist-handler.ts b/libs/remix-core-plugin/src/lib/gist-handler.ts
index 1825715299..8a61e83a61 100644
--- a/libs/remix-core-plugin/src/lib/gist-handler.ts
+++ b/libs/remix-core-plugin/src/lib/gist-handler.ts
@@ -60,7 +60,7 @@ export class GistHandler extends Plugin {
             title: 'Gist load error',
             message: 'Error while loading gist. Please provide a valid Gist ID or URL.',
             modalType: 'alert',
-            okLabel: 'OK',
+            okLabel: 'OK'
           }
           this.call('modal', 'modal', modalContent)
         }
@@ -70,7 +70,7 @@ export class GistHandler extends Plugin {
           title: 'Gist load error',
           message: 'Error while loading gist. Id cannot be empty.',
           modalType: 'alert',
-          okLabel: 'OK',
+          okLabel: 'OK'
         }
         this.call('modal', 'modal', modalContent)
       }
@@ -96,7 +96,7 @@ export class GistHandler extends Plugin {
             title: 'Gist load error',
             message: data.message,
             modalType: 'alert',
-            okLabel: 'OK',
+            okLabel: 'OK'
           }
           await this.call('modal', 'modal', modalContent)
           return
@@ -107,7 +107,7 @@ export class GistHandler extends Plugin {
           title: 'Gist load error',
           message: e.message,
           modalType: 'alert',
-          okLabel: 'OK',
+          okLabel: 'OK'
         }
         await this.call('modal', 'modal', modalContent)
         return
@@ -125,7 +125,7 @@ export class GistHandler extends Plugin {
             title: 'Gist load error',
             message: errorSavingFiles.message || errorSavingFiles,
             modalType: 'alert',
-            okLabel: 'OK',
+            okLabel: 'OK'
           }
           this.call('modal', 'modal', modalContent)
         }

From 8a1a5b6e78c01d7033e71a97d4e40775f03463d2 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 6 Jan 2022 11:38:19 +0100
Subject: [PATCH 105/168] hide

---
 libs/remix-core-plugin/src/lib/gist-handler.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/libs/remix-core-plugin/src/lib/gist-handler.ts b/libs/remix-core-plugin/src/lib/gist-handler.ts
index 8a61e83a61..429640ed6f 100644
--- a/libs/remix-core-plugin/src/lib/gist-handler.ts
+++ b/libs/remix-core-plugin/src/lib/gist-handler.ts
@@ -40,6 +40,9 @@ export class GistHandler extends Plugin {
               },
               cancelFn: () => {
                 setTimeout(() => reject(new Error('Canceled')), 0)
+              },
+              hideFn: () => {
+                setTimeout(() => reject(new Error('Hide')), 0)
               }
             }
             this.call('modal', 'modal', modalContent)

From c038ae6853c54182c3eff70c8de49419591b9488 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Thu, 6 Jan 2022 13:07:49 +0100
Subject: [PATCH 106/168] set as alert

---
 .../remix-core-plugin/src/lib/gist-handler.ts | 26 +++++++------------
 1 file changed, 10 insertions(+), 16 deletions(-)

diff --git a/libs/remix-core-plugin/src/lib/gist-handler.ts b/libs/remix-core-plugin/src/lib/gist-handler.ts
index 429640ed6f..6c22c29aa8 100644
--- a/libs/remix-core-plugin/src/lib/gist-handler.ts
+++ b/libs/remix-core-plugin/src/lib/gist-handler.ts
@@ -61,21 +61,17 @@ export class GistHandler extends Plugin {
           const modalContent = {
             id: 'gisthandler',
             title: 'Gist load error',
-            message: 'Error while loading gist. Please provide a valid Gist ID or URL.',
-            modalType: 'alert',
-            okLabel: 'OK'
+            message: 'Error while loading gist. Please provide a valid Gist ID or URL.'
           }
-          this.call('modal', 'modal', modalContent)
+          this.call('modal', 'alert', modalContent)
         }
       } else {
         const modalContent = {
           id: 'gisthandlerEmpty',
           title: 'Gist load error',
-          message: 'Error while loading gist. Id cannot be empty.',
-          modalType: 'alert',
-          okLabel: 'OK'
+          message: 'Error while loading gist. Id cannot be empty.'
         }
-        this.call('modal', 'modal', modalContent)
+        this.call('modal', 'alert', modalContent)
       }
       return loadingFromGist
     } else {
@@ -108,11 +104,10 @@ export class GistHandler extends Plugin {
         const modalContent = {
           id: 'gisthandler',
           title: 'Gist load error',
-          message: e.message,
-          modalType: 'alert',
-          okLabel: 'OK'
+          message: e.message
+
         }
-        await this.call('modal', 'modal', modalContent)
+        await this.call('modal', 'alert', modalContent)
         return
       }
 
@@ -126,11 +121,10 @@ export class GistHandler extends Plugin {
           const modalContent = {
             id: 'gisthandler',
             title: 'Gist load error',
-            message: errorSavingFiles.message || errorSavingFiles,
-            modalType: 'alert',
-            okLabel: 'OK'
+            message: errorSavingFiles.message || errorSavingFiles
+
           }
-          this.call('modal', 'modal', modalContent)
+          this.call('modal', 'alert', modalContent)
         }
       })
     })

From 6aec265068640807c4bc0dfb5b5ff91aafc43da2 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Thu, 6 Jan 2022 13:43:42 +0100
Subject: [PATCH 107/168] lint

---
 libs/remix-ui/panel/.eslintrc.json            | 261 +-----------------
 .../panel/src/lib/dragbar/dragbar.tsx         |   3 +-
 .../panel/src/lib/plugins/panel-plugin.tsx    |   1 +
 .../panel/src/lib/plugins/remix-ui-panel.tsx  |   1 +
 package.json                                  |   2 +-
 5 files changed, 20 insertions(+), 248 deletions(-)

diff --git a/libs/remix-ui/panel/.eslintrc.json b/libs/remix-ui/panel/.eslintrc.json
index 07447c8433..5a1c541d11 100644
--- a/libs/remix-ui/panel/.eslintrc.json
+++ b/libs/remix-ui/panel/.eslintrc.json
@@ -1,249 +1,18 @@
 {
-    "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"
+  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
     },
-    "env": {
-      "browser": true,
-      "commonjs": true,
-      "es6": true,
-      "jest": true,
-      "node": true
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
     },
-    "settings": { "react": { "version": "detect" } },
-    "plugins": ["import", "jsx-a11y", "react", "react-hooks"],
-    "extends": ["../../../.eslintrc"],
-    "ignorePatterns": ["!**/*"]
-  }
-  
\ No newline at end of file
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
\ No newline at end of file
diff --git a/libs/remix-ui/panel/src/lib/dragbar/dragbar.tsx b/libs/remix-ui/panel/src/lib/dragbar/dragbar.tsx
index f73567ba0d..232f23ff10 100644
--- a/libs/remix-ui/panel/src/lib/dragbar/dragbar.tsx
+++ b/libs/remix-ui/panel/src/lib/dragbar/dragbar.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useLayoutEffect, useState } from 'react'
+// eslint-disable-next-line no-use-before-define
+import React, { useEffect, useState } from 'react'
 import Draggable from 'react-draggable'
 import './dragbar.css'
 
diff --git a/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx b/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx
index 300b9b39d2..9eb30391bc 100644
--- a/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx
+++ b/libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 import React, { forwardRef, useEffect, useRef, useState } from 'react' // eslint-disable-line
 import { PluginRecord } from '../types'
 import './panel.css'
diff --git a/libs/remix-ui/panel/src/lib/plugins/remix-ui-panel.tsx b/libs/remix-ui/panel/src/lib/plugins/remix-ui-panel.tsx
index d0ffe41a84..37fa018c92 100644
--- a/libs/remix-ui/panel/src/lib/plugins/remix-ui-panel.tsx
+++ b/libs/remix-ui/panel/src/lib/plugins/remix-ui-panel.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 import React, { useEffect, useState } from 'react' // eslint-disable-line
 import './panel.css'
 import RemixUIPanelPlugin from './panel-plugin'
diff --git a/package.json b/package.json
index 88b2e6892b..0a838a7a40 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     "workspace-schematic": "nx workspace-schematic",
     "dep-graph": "nx dep-graph",
     "help": "nx help",
-    "lint:libs": "nx run-many --target=lint --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd,remix-ui-tree-view,remix-ui-modal-dialog,remix-ui-toaster,remix-ui-helper,remix-ui-debugger-ui,remix-ui-workspace,remix-ui-static-analyser,remix-ui-checkbox,remix-ui-settings,remix-core-plugin,remix-ui-renderer,remix-ui-publish-to-storage,remix-ui-solidity-compiler,solidity-unit-testing,remix-ui-plugin-manager,remix-ui-terminal,remix-ui-editor,remix-ui-app,remix-ui-tabs",
+    "lint:libs": "nx run-many --target=lint --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd,remix-ui-tree-view,remix-ui-modal-dialog,remix-ui-toaster,remix-ui-helper,remix-ui-debugger-ui,remix-ui-workspace,remix-ui-static-analyser,remix-ui-checkbox,remix-ui-settings,remix-core-plugin,remix-ui-renderer,remix-ui-publish-to-storage,remix-ui-solidity-compiler,solidity-unit-testing,remix-ui-plugin-manager,remix-ui-terminal,remix-ui-editor,remix-ui-app,remix-ui-tabs,remix-ui-panel",
     "build:libs": "nx run-many --target=build --parallel=false --with-deps=true --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd",
     "test:libs": "nx run-many --target=test --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd",
     "publish:libs": "npm run build:libs && lerna publish --skip-git && npm run bumpVersion:libs",

From d972e39c5065641ab2b57d29d5e6cc6734ac5350 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Mon, 1 Nov 2021 14:26:57 +0100
Subject: [PATCH 108/168] Setup udapp library

---
 .eslintrc                                     | 21 -------------------
 apps/remix-ide-e2e/.eslintrc                  |  2 +-
 apps/remix-ide-e2e/src/local-plugin/.eslintrc |  2 +-
 apps/remix-ide/.eslintrc                      |  2 +-
 libs/remix-analyzer/.eslintrc                 |  2 +-
 libs/remix-astwalker/.eslintrc                |  2 +-
 libs/remix-core-plugin/.eslintrc              |  2 +-
 libs/remix-debug/.eslintrc                    |  2 +-
 libs/remix-lib/.eslintrc                      |  2 +-
 libs/remix-simulator/.eslintrc                |  2 +-
 libs/remix-solidity/.eslintrc                 |  2 +-
 libs/remix-tests/.eslintrc                    |  2 +-
 libs/remix-ui/checkbox/.eslintrc              |  2 +-
 libs/remix-ui/clipboard/.eslintrc             |  2 +-
 libs/remix-ui/debugger-ui/.eslintrc           |  2 +-
 libs/remix-ui/editor/.eslintrc                |  2 +-
 libs/remix-ui/helper/.eslintrc                |  2 +-
 libs/remix-ui/modal-dialog/.eslintrc          |  2 +-
 libs/remix-ui/plugin-manager/.eslintrc        |  2 +-
 libs/remix-ui/publish-to-storage/.eslintrc    |  2 +-
 libs/remix-ui/renderer/.eslintrc              |  2 +-
 libs/remix-ui/run-tab/.babelrc                | 12 +++++++++++
 libs/remix-ui/run-tab/.eslintrc.json          | 18 ++++++++++++++++
 libs/remix-ui/run-tab/README.md               |  7 +++++++
 libs/remix-ui/run-tab/src/index.ts            |  1 +
 .../src/lib/remix-ui-run-tab.module.css       |  0
 .../run-tab/src/lib/remix-ui-run-tab.tsx      | 14 +++++++++++++
 libs/remix-ui/run-tab/tsconfig.json           | 20 ++++++++++++++++++
 libs/remix-ui/run-tab/tsconfig.lib.json       | 13 ++++++++++++
 libs/remix-ui/settings/.eslintrc              |  2 +-
 libs/remix-ui/solidity-compiler/.eslintrc     |  2 +-
 libs/remix-ui/static-analyser/.eslintrc       |  2 +-
 libs/remix-ui/terminal/.eslintrc              |  2 +-
 libs/remix-ui/toaster/.eslintrc               |  2 +-
 libs/remix-ui/tree-view/.eslintrc             |  2 +-
 libs/remix-ui/utils/.eslintrc                 |  2 +-
 libs/remix-ui/workspace/.eslintrc             |  2 +-
 libs/remix-url-resolver/.eslintrc             |  2 +-
 libs/remixd/.eslintrc                         |  2 +-
 nx.json                                       | 13 ++++--------
 tsconfig.base.json                            |  5 ++---
 workspace.json                                |  1 +
 42 files changed, 122 insertions(+), 63 deletions(-)
 delete mode 100644 .eslintrc
 create mode 100644 libs/remix-ui/run-tab/.babelrc
 create mode 100644 libs/remix-ui/run-tab/.eslintrc.json
 create mode 100644 libs/remix-ui/run-tab/README.md
 create mode 100644 libs/remix-ui/run-tab/src/index.ts
 create mode 100644 libs/remix-ui/run-tab/src/lib/remix-ui-run-tab.module.css
 create mode 100644 libs/remix-ui/run-tab/src/lib/remix-ui-run-tab.tsx
 create mode 100644 libs/remix-ui/run-tab/tsconfig.json
 create mode 100644 libs/remix-ui/run-tab/tsconfig.lib.json

diff --git a/.eslintrc b/.eslintrc
deleted file mode 100644
index 8babbc1619..0000000000
--- a/.eslintrc
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-    "root": true,
-    "parser": "@typescript-eslint/parser",
-    "parserOptions": {
-      "ecmaVersion": 2018,
-      "sourceType": "module",
-      "project": "./tsconfig.base.json"
-    },
-    "plugins": ["@typescript-eslint", "@nrwl/nx"],
-    "extends": "standard",
-    "rules": {
-    },
-    "overrides": [
-      {
-        "files": ["*.tsx"],
-        "rules": {
-          "@typescript-eslint/no-unused-vars": "off"
-        }
-      }
-    ]
-  }
\ No newline at end of file
diff --git a/apps/remix-ide-e2e/.eslintrc b/apps/remix-ide-e2e/.eslintrc
index f21e0fc224..6dc2985f30 100644
--- a/apps/remix-ide-e2e/.eslintrc
+++ b/apps/remix-ide-e2e/.eslintrc
@@ -11,6 +11,6 @@
         }
       }
     ],
-    "extends": ["../../.eslintrc"],
+    "extends": ["../../.eslintrc.json"],
     "ignorePatterns": ["!**/*"]
 }
\ No newline at end of file
diff --git a/apps/remix-ide-e2e/src/local-plugin/.eslintrc b/apps/remix-ide-e2e/src/local-plugin/.eslintrc
index 3651dc7a8c..c24c2102e4 100644
--- a/apps/remix-ide-e2e/src/local-plugin/.eslintrc
+++ b/apps/remix-ide-e2e/src/local-plugin/.eslintrc
@@ -243,6 +243,6 @@
   },
   "settings": { "react": { "version": "detect" } },
   "plugins": ["import", "jsx-a11y", "react", "react-hooks"],
-  "extends": ["../../../../.eslintrc"],
+  "extends": ["../../../../.eslintrc.json"],
   "ignorePatterns": ["!**/*"]
 }
diff --git a/apps/remix-ide/.eslintrc b/apps/remix-ide/.eslintrc
index 7276b9859c..b7d498eea1 100644
--- a/apps/remix-ide/.eslintrc
+++ b/apps/remix-ide/.eslintrc
@@ -3,7 +3,7 @@
         "browser": true,
         "es6": true
     },
-    "extends": "../../.eslintrc",
+    "extends": "../../.eslintrc.json",
     "globals": {
         "Atomics": "readonly",
         "SharedArrayBuffer": "readonly"
diff --git a/libs/remix-analyzer/.eslintrc b/libs/remix-analyzer/.eslintrc
index e27a064a6d..50f8a21c2e 100644
--- a/libs/remix-analyzer/.eslintrc
+++ b/libs/remix-analyzer/.eslintrc
@@ -1,5 +1,5 @@
 { 
-    "extends": "../../.eslintrc", 
+    "extends": "../../.eslintrc.json", 
     "rules": {
         "@typescript-eslint/no-explicit-any": "off",
         "@typescript-eslint/no-unused-vars": "off",
diff --git a/libs/remix-astwalker/.eslintrc b/libs/remix-astwalker/.eslintrc
index 60e5336d5c..ec9d5e2769 100644
--- a/libs/remix-astwalker/.eslintrc
+++ b/libs/remix-astwalker/.eslintrc
@@ -1,5 +1,5 @@
 { 
-    "extends": "../../.eslintrc", 
+    "extends": "../../.eslintrc.json", 
     "rules": {
         "@typescript-eslint/no-explicit-any": "off",
         "@typescript-eslint/prefer-namespace-keyword": "off",
diff --git a/libs/remix-core-plugin/.eslintrc b/libs/remix-core-plugin/.eslintrc
index ab8f38339c..3adb97618b 100644
--- a/libs/remix-core-plugin/.eslintrc
+++ b/libs/remix-core-plugin/.eslintrc
@@ -1 +1 @@
-{ "extends": "../../.eslintrc", "rules": {}, "ignorePatterns": ["!**/*"] }
+{ "extends": "../../.eslintrc.json", "rules": {}, "ignorePatterns": ["!**/*"] }
diff --git a/libs/remix-debug/.eslintrc b/libs/remix-debug/.eslintrc
index 88ae470657..90fcc567b4 100644
--- a/libs/remix-debug/.eslintrc
+++ b/libs/remix-debug/.eslintrc
@@ -1,5 +1,5 @@
 { 
-    "extends": "../../.eslintrc", 
+    "extends": "../../.eslintrc.json", 
     "rules": {
         "@typescript-eslint/no-var-requires": "off",
         "@typescript-eslint/no-unused-vars": "off",
diff --git a/libs/remix-lib/.eslintrc b/libs/remix-lib/.eslintrc
index 6ee9d5e4a6..a4229541d6 100644
--- a/libs/remix-lib/.eslintrc
+++ b/libs/remix-lib/.eslintrc
@@ -1,5 +1,5 @@
 { 
-    "extends": "../../.eslintrc", 
+    "extends": "../../.eslintrc.json", 
     "rules": {
         "standard/no-callback-literal": "off",
         "no-unused-vars": "off",
diff --git a/libs/remix-simulator/.eslintrc b/libs/remix-simulator/.eslintrc
index 8e04356c00..60a8190355 100644
--- a/libs/remix-simulator/.eslintrc
+++ b/libs/remix-simulator/.eslintrc
@@ -1,5 +1,5 @@
 { 
-    "extends": "../../.eslintrc", 
+    "extends": "../../.eslintrc.json", 
     "rules": {
         "@typescript-eslint/no-var-requires": "off",
         "@typescript-eslint/no-empty-function": "off",
diff --git a/libs/remix-solidity/.eslintrc b/libs/remix-solidity/.eslintrc
index f57f93144e..08bcfe07e1 100644
--- a/libs/remix-solidity/.eslintrc
+++ b/libs/remix-solidity/.eslintrc
@@ -1,5 +1,5 @@
 { 
-    "extends": "../../.eslintrc", 
+    "extends": "../../.eslintrc.json", 
     "rules": {
         "dot-notation": "off",
         "no-unused-vars": "off",
diff --git a/libs/remix-tests/.eslintrc b/libs/remix-tests/.eslintrc
index f57f93144e..08bcfe07e1 100644
--- a/libs/remix-tests/.eslintrc
+++ b/libs/remix-tests/.eslintrc
@@ -1,5 +1,5 @@
 { 
-    "extends": "../../.eslintrc", 
+    "extends": "../../.eslintrc.json", 
     "rules": {
         "dot-notation": "off",
         "no-unused-vars": "off",
diff --git a/libs/remix-ui/checkbox/.eslintrc b/libs/remix-ui/checkbox/.eslintrc
index dae5c6feeb..0d43d424e3 100644
--- a/libs/remix-ui/checkbox/.eslintrc
+++ b/libs/remix-ui/checkbox/.eslintrc
@@ -3,7 +3,7 @@
       "browser": true,
       "es6": true
   },
-  "extends": "../../../.eslintrc",
+  "extends": "../../../.eslintrc.json",
   "globals": {
       "Atomics": "readonly",
       "SharedArrayBuffer": "readonly"
diff --git a/libs/remix-ui/clipboard/.eslintrc b/libs/remix-ui/clipboard/.eslintrc
index 977f139a09..6d5b6d952d 100644
--- a/libs/remix-ui/clipboard/.eslintrc
+++ b/libs/remix-ui/clipboard/.eslintrc
@@ -243,6 +243,6 @@
   },
   "settings": { "react": { "version": "detect" } },
   "plugins": ["import", "jsx-a11y", "react", "react-hooks"],
-  "extends": ["../../../.eslintrc"],
+  "extends": ["../../../.eslintrc.json"],
   "ignorePatterns": ["!**/*"]
 }
diff --git a/libs/remix-ui/debugger-ui/.eslintrc b/libs/remix-ui/debugger-ui/.eslintrc
index b8666066e9..4d698941a4 100644
--- a/libs/remix-ui/debugger-ui/.eslintrc
+++ b/libs/remix-ui/debugger-ui/.eslintrc
@@ -3,7 +3,7 @@
       "browser": true,
       "es6": true
   },
-  "extends": "../../../.eslintrc",
+  "extends": "../../../.eslintrc.json",
   "globals": {
       "Atomics": "readonly",
       "SharedArrayBuffer": "readonly"
diff --git a/libs/remix-ui/editor/.eslintrc b/libs/remix-ui/editor/.eslintrc
index 598257efa0..22eaba3281 100644
--- a/libs/remix-ui/editor/.eslintrc
+++ b/libs/remix-ui/editor/.eslintrc
@@ -3,7 +3,7 @@
       "browser": true,
       "es6": true
   },
-  "extends": "../../../.eslintrc",
+  "extends": "../../../.eslintrc.json",
   "globals": {
       "Atomics": "readonly",
       "SharedArrayBuffer": "readonly"
diff --git a/libs/remix-ui/helper/.eslintrc b/libs/remix-ui/helper/.eslintrc
index 1655d72922..7e6538f1ae 100644
--- a/libs/remix-ui/helper/.eslintrc
+++ b/libs/remix-ui/helper/.eslintrc
@@ -1 +1 @@
-{ "extends": "../../../.eslintrc", "rules": {}, "ignorePatterns": ["!**/*"] }
+{ "extends": "../../../.eslintrc.json", "rules": {}, "ignorePatterns": ["!**/*"] }
diff --git a/libs/remix-ui/modal-dialog/.eslintrc b/libs/remix-ui/modal-dialog/.eslintrc
index b8666066e9..4d698941a4 100644
--- a/libs/remix-ui/modal-dialog/.eslintrc
+++ b/libs/remix-ui/modal-dialog/.eslintrc
@@ -3,7 +3,7 @@
       "browser": true,
       "es6": true
   },
-  "extends": "../../../.eslintrc",
+  "extends": "../../../.eslintrc.json",
   "globals": {
       "Atomics": "readonly",
       "SharedArrayBuffer": "readonly"
diff --git a/libs/remix-ui/plugin-manager/.eslintrc b/libs/remix-ui/plugin-manager/.eslintrc
index 10ba445cf2..69dd87352e 100644
--- a/libs/remix-ui/plugin-manager/.eslintrc
+++ b/libs/remix-ui/plugin-manager/.eslintrc
@@ -3,7 +3,7 @@
       "browser": true,
       "es6": true
   },
-  "extends": "../../../.eslintrc",
+  "extends": "../../../.eslintrc.json",
   "globals": {
       "Atomics": "readonly",
       "SharedArrayBuffer": "readonly"
diff --git a/libs/remix-ui/publish-to-storage/.eslintrc b/libs/remix-ui/publish-to-storage/.eslintrc
index b8666066e9..4d698941a4 100644
--- a/libs/remix-ui/publish-to-storage/.eslintrc
+++ b/libs/remix-ui/publish-to-storage/.eslintrc
@@ -3,7 +3,7 @@
       "browser": true,
       "es6": true
   },
-  "extends": "../../../.eslintrc",
+  "extends": "../../../.eslintrc.json",
   "globals": {
       "Atomics": "readonly",
       "SharedArrayBuffer": "readonly"
diff --git a/libs/remix-ui/renderer/.eslintrc b/libs/remix-ui/renderer/.eslintrc
index dae5c6feeb..0d43d424e3 100644
--- a/libs/remix-ui/renderer/.eslintrc
+++ b/libs/remix-ui/renderer/.eslintrc
@@ -3,7 +3,7 @@
       "browser": true,
       "es6": true
   },
-  "extends": "../../../.eslintrc",
+  "extends": "../../../.eslintrc.json",
   "globals": {
       "Atomics": "readonly",
       "SharedArrayBuffer": "readonly"
diff --git a/libs/remix-ui/run-tab/.babelrc b/libs/remix-ui/run-tab/.babelrc
new file mode 100644
index 0000000000..ccae900be4
--- /dev/null
+++ b/libs/remix-ui/run-tab/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/libs/remix-ui/run-tab/.eslintrc.json b/libs/remix-ui/run-tab/.eslintrc.json
new file mode 100644
index 0000000000..50e59482cf
--- /dev/null
+++ b/libs/remix-ui/run-tab/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/libs/remix-ui/run-tab/README.md b/libs/remix-ui/run-tab/README.md
new file mode 100644
index 0000000000..248e570f6c
--- /dev/null
+++ b/libs/remix-ui/run-tab/README.md
@@ -0,0 +1,7 @@
+# remix-ui-run-tab
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test remix-ui-run-tab` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/remix-ui/run-tab/src/index.ts b/libs/remix-ui/run-tab/src/index.ts
new file mode 100644
index 0000000000..2d18b20958
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/remix-ui-run-tab';
diff --git a/libs/remix-ui/run-tab/src/lib/remix-ui-run-tab.module.css b/libs/remix-ui/run-tab/src/lib/remix-ui-run-tab.module.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/libs/remix-ui/run-tab/src/lib/remix-ui-run-tab.tsx b/libs/remix-ui/run-tab/src/lib/remix-ui-run-tab.tsx
new file mode 100644
index 0000000000..fdac73c72d
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/remix-ui-run-tab.tsx
@@ -0,0 +1,14 @@
+import './remix-ui-run-tab.module.css';
+
+/* eslint-disable-next-line */
+export interface RemixUiRunTabProps {}
+
+export function RemixUiRunTab(props: RemixUiRunTabProps) {
+  return (
+    <div>
+      <h1>Welcome to remix-ui-run-tab!</h1>
+    </div>
+  );
+}
+
+export default RemixUiRunTab;
diff --git a/libs/remix-ui/run-tab/tsconfig.json b/libs/remix-ui/run-tab/tsconfig.json
new file mode 100644
index 0000000000..8bd701c578
--- /dev/null
+++ b/libs/remix-ui/run-tab/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}
diff --git a/libs/remix-ui/run-tab/tsconfig.lib.json b/libs/remix-ui/run-tab/tsconfig.lib.json
new file mode 100644
index 0000000000..b560bc4dec
--- /dev/null
+++ b/libs/remix-ui/run-tab/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"]
+}
diff --git a/libs/remix-ui/settings/.eslintrc b/libs/remix-ui/settings/.eslintrc
index dae5c6feeb..0d43d424e3 100644
--- a/libs/remix-ui/settings/.eslintrc
+++ b/libs/remix-ui/settings/.eslintrc
@@ -3,7 +3,7 @@
       "browser": true,
       "es6": true
   },
-  "extends": "../../../.eslintrc",
+  "extends": "../../../.eslintrc.json",
   "globals": {
       "Atomics": "readonly",
       "SharedArrayBuffer": "readonly"
diff --git a/libs/remix-ui/solidity-compiler/.eslintrc b/libs/remix-ui/solidity-compiler/.eslintrc
index dae5c6feeb..0d43d424e3 100644
--- a/libs/remix-ui/solidity-compiler/.eslintrc
+++ b/libs/remix-ui/solidity-compiler/.eslintrc
@@ -3,7 +3,7 @@
       "browser": true,
       "es6": true
   },
-  "extends": "../../../.eslintrc",
+  "extends": "../../../.eslintrc.json",
   "globals": {
       "Atomics": "readonly",
       "SharedArrayBuffer": "readonly"
diff --git a/libs/remix-ui/static-analyser/.eslintrc b/libs/remix-ui/static-analyser/.eslintrc
index dae5c6feeb..0d43d424e3 100644
--- a/libs/remix-ui/static-analyser/.eslintrc
+++ b/libs/remix-ui/static-analyser/.eslintrc
@@ -3,7 +3,7 @@
       "browser": true,
       "es6": true
   },
-  "extends": "../../../.eslintrc",
+  "extends": "../../../.eslintrc.json",
   "globals": {
       "Atomics": "readonly",
       "SharedArrayBuffer": "readonly"
diff --git a/libs/remix-ui/terminal/.eslintrc b/libs/remix-ui/terminal/.eslintrc
index dae5c6feeb..0d43d424e3 100644
--- a/libs/remix-ui/terminal/.eslintrc
+++ b/libs/remix-ui/terminal/.eslintrc
@@ -3,7 +3,7 @@
       "browser": true,
       "es6": true
   },
-  "extends": "../../../.eslintrc",
+  "extends": "../../../.eslintrc.json",
   "globals": {
       "Atomics": "readonly",
       "SharedArrayBuffer": "readonly"
diff --git a/libs/remix-ui/toaster/.eslintrc b/libs/remix-ui/toaster/.eslintrc
index b8666066e9..4d698941a4 100644
--- a/libs/remix-ui/toaster/.eslintrc
+++ b/libs/remix-ui/toaster/.eslintrc
@@ -3,7 +3,7 @@
       "browser": true,
       "es6": true
   },
-  "extends": "../../../.eslintrc",
+  "extends": "../../../.eslintrc.json",
   "globals": {
       "Atomics": "readonly",
       "SharedArrayBuffer": "readonly"
diff --git a/libs/remix-ui/tree-view/.eslintrc b/libs/remix-ui/tree-view/.eslintrc
index dae5c6feeb..0d43d424e3 100644
--- a/libs/remix-ui/tree-view/.eslintrc
+++ b/libs/remix-ui/tree-view/.eslintrc
@@ -3,7 +3,7 @@
       "browser": true,
       "es6": true
   },
-  "extends": "../../../.eslintrc",
+  "extends": "../../../.eslintrc.json",
   "globals": {
       "Atomics": "readonly",
       "SharedArrayBuffer": "readonly"
diff --git a/libs/remix-ui/utils/.eslintrc b/libs/remix-ui/utils/.eslintrc
index 977f139a09..6d5b6d952d 100644
--- a/libs/remix-ui/utils/.eslintrc
+++ b/libs/remix-ui/utils/.eslintrc
@@ -243,6 +243,6 @@
   },
   "settings": { "react": { "version": "detect" } },
   "plugins": ["import", "jsx-a11y", "react", "react-hooks"],
-  "extends": ["../../../.eslintrc"],
+  "extends": ["../../../.eslintrc.json"],
   "ignorePatterns": ["!**/*"]
 }
diff --git a/libs/remix-ui/workspace/.eslintrc b/libs/remix-ui/workspace/.eslintrc
index dae5c6feeb..0d43d424e3 100644
--- a/libs/remix-ui/workspace/.eslintrc
+++ b/libs/remix-ui/workspace/.eslintrc
@@ -3,7 +3,7 @@
       "browser": true,
       "es6": true
   },
-  "extends": "../../../.eslintrc",
+  "extends": "../../../.eslintrc.json",
   "globals": {
       "Atomics": "readonly",
       "SharedArrayBuffer": "readonly"
diff --git a/libs/remix-url-resolver/.eslintrc b/libs/remix-url-resolver/.eslintrc
index 4177c24ed7..61ac553a30 100644
--- a/libs/remix-url-resolver/.eslintrc
+++ b/libs/remix-url-resolver/.eslintrc
@@ -1,5 +1,5 @@
 { 
-    "extends": "../../.eslintrc", 
+    "extends": "../../.eslintrc.json", 
     "rules": {}, 
     "env": {
         "browser": true,
diff --git a/libs/remixd/.eslintrc b/libs/remixd/.eslintrc
index ab8f38339c..3adb97618b 100644
--- a/libs/remixd/.eslintrc
+++ b/libs/remixd/.eslintrc
@@ -1 +1 @@
-{ "extends": "../../.eslintrc", "rules": {}, "ignorePatterns": ["!**/*"] }
+{ "extends": "../../.eslintrc.json", "rules": {}, "ignorePatterns": ["!**/*"] }
diff --git a/nx.json b/nx.json
index f2aa009899..c28d15ca3f 100644
--- a/nx.json
+++ b/nx.json
@@ -7,7 +7,7 @@
     },
     "tsconfig.base.json": "*",
     "tslint.json": "*",
-    ".eslintrc": "*",
+    ".eslintrc.json": "*",
     "nx.json": "*"
   },
   "npmScope": "remix-project",
@@ -156,14 +156,9 @@
     },
     "remix-ui-editor-context-view": {
       "tags": []
+    },
+    "remix-ui-run-tab": {
+      "tags": []
     }
-  },
-  "targetDependencies": {
-    "build": [
-      {
-        "target": "build",
-        "projects": "dependencies"
-      }
-    ]
   }
 }
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 21dfeb4ee8..c483b6f07e 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -75,9 +75,8 @@
       "@remix-ui/theme-module": ["libs/remix-ui/theme-module/src/index.ts"],
       "@remix-ui/panel": ["libs/remix-ui/panel/src/index.ts"],
       "@remix-ui/editor-context-view": ["libs/remix-ui/editor-context-view/src/index.ts"],
-      "@remix-ui/solidity-unit-testing": [
-        "libs/remix-ui/solidity-unit-testing/src/index.ts"
-      ]
+      "@remix-ui/solidity-unit-testing": ["libs/remix-ui/solidity-unit-testing/src/index.ts"],
+      "@remix-ui/run-tab": ["libs/remix-ui/run-tab/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]
diff --git a/workspace.json b/workspace.json
index 76b236717f..5426bf7b65 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1,3 +1,4 @@
+
 {
   "version": 1,
   "projects": {

From 9a22406df173b3ecb1b11e68996666e463cad057 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Thu, 4 Nov 2021 15:10:15 +0100
Subject: [PATCH 109/168] Moved settingsUI and contract dropdown UI to react

---
 apps/remix-ide/src/app/udapp/run-tab.js       |  30 +-
 .../helper/src/lib/remix-ui-helper.ts         |   4 +
 libs/remix-ui/run-tab/src/index.ts            |   2 +-
 .../remix-ui/run-tab/src/lib/actions/index.ts |   8 +
 .../run-tab/src/lib/components/account.tsx    | 149 +++++++
 .../src/lib/components/contractDropdownUI.tsx | 418 ++++++++++++++++++
 .../src/lib/components/environment.tsx        |  76 ++++
 .../run-tab/src/lib/components/gasPrice.tsx   |  12 +
 .../run-tab/src/lib/components/network.tsx    |  15 +
 .../run-tab/src/lib/components/settingsUI.tsx | 156 +++++++
 .../run-tab/src/lib/components/value.tsx      |  69 +++
 libs/remix-ui/run-tab/src/lib/css/run-tab.css | 219 +++++++++
 .../src/lib/remix-ui-run-tab.module.css       |   0
 .../run-tab/src/lib/remix-ui-run-tab.tsx      |  14 -
 libs/remix-ui/run-tab/src/lib/run-tab.tsx     |  25 ++
 libs/remix-ui/run-tab/src/lib/types/index.ts  |  32 ++
 libs/remix-ui/run-tab/tsconfig.json           |   8 +-
 17 files changed, 1201 insertions(+), 36 deletions(-)
 create mode 100644 libs/remix-ui/run-tab/src/lib/actions/index.ts
 create mode 100644 libs/remix-ui/run-tab/src/lib/components/account.tsx
 create mode 100644 libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
 create mode 100644 libs/remix-ui/run-tab/src/lib/components/environment.tsx
 create mode 100644 libs/remix-ui/run-tab/src/lib/components/gasPrice.tsx
 create mode 100644 libs/remix-ui/run-tab/src/lib/components/network.tsx
 create mode 100644 libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
 create mode 100644 libs/remix-ui/run-tab/src/lib/components/value.tsx
 create mode 100644 libs/remix-ui/run-tab/src/lib/css/run-tab.css
 delete mode 100644 libs/remix-ui/run-tab/src/lib/remix-ui-run-tab.module.css
 delete mode 100644 libs/remix-ui/run-tab/src/lib/remix-ui-run-tab.tsx
 create mode 100644 libs/remix-ui/run-tab/src/lib/run-tab.tsx
 create mode 100644 libs/remix-ui/run-tab/src/lib/types/index.ts

diff --git a/apps/remix-ide/src/app/udapp/run-tab.js b/apps/remix-ide/src/app/udapp/run-tab.js
index 48f5484979..169a3a20f8 100644
--- a/apps/remix-ide/src/app/udapp/run-tab.js
+++ b/apps/remix-ide/src/app/udapp/run-tab.js
@@ -1,3 +1,6 @@
+import React from 'react' // eslint-disable-line
+import ReactDOM from 'react-dom'
+import { RunTabUI } from '@remix-ui/run-tab'
 import { ViewPlugin } from '@remixproject/engine-web'
 import * as packageJson from '../../../../../package.json'
 
@@ -47,6 +50,11 @@ export class RunTab extends ViewPlugin {
     this.networkModule = networkModule
     this.fileProvider = fileProvider
     this.setupEvents()
+    this.el = document.createElement('div')
+  }
+
+  onActivation () {
+    this.renderComponent()
   }
 
   setupEvents () {
@@ -104,21 +112,6 @@ export class RunTab extends ViewPlugin {
     return this.blockchain.pendingTransactionsCount()
   }
 
-  renderContainer () {
-    this.container = yo`<div class="${css.runTabView} run-tab" id="runTabView" data-id="runTabView"></div>`
-
-    var el = yo`
-    <div class="list-group list-group-flush">
-      ${this.settingsUI.render()}
-      ${this.contractDropdownUI.render()}
-      ${this.recorderCard.render()}
-      ${this.instanceContainer}
-    </div>
-    `
-    this.container.appendChild(el)
-    return this.container
-  }
-
   renderInstanceContainer () {
     this.instanceContainer = yo`<div class="${css.instanceContainer} border-0 list-group-item"></div>`
 
@@ -225,6 +218,7 @@ export class RunTab extends ViewPlugin {
   }
 
   render () {
+    return this.el
     this.udappUI = new UniversalDAppUI(this.blockchain, this.logCallback)
     this.blockchain.resetAndInit(this.config, {
       getAddress: (cb) => {
@@ -283,4 +277,10 @@ export class RunTab extends ViewPlugin {
     this.on('manager', 'pluginDeactivated', removePluginProvider.bind(this))
     return this.renderContainer()
   }
+
+  renderComponent () {
+    ReactDOM.render(
+      <RunTabUI plugin={this} />
+      , this.el)
+  }
 }
diff --git a/libs/remix-ui/helper/src/lib/remix-ui-helper.ts b/libs/remix-ui/helper/src/lib/remix-ui-helper.ts
index 88cd0ed7a6..b082c408a5 100644
--- a/libs/remix-ui/helper/src/lib/remix-ui-helper.ts
+++ b/libs/remix-ui/helper/src/lib/remix-ui-helper.ts
@@ -62,3 +62,7 @@ export const getPathIcon = (path: string) => {
                   ? 'fab fa-ethereum' : path.endsWith('.cairo')
                     ? 'fab fa-ethereum' : 'far fa-file' // TODO: add cairo icon
 }
+
+export const isNumeric = (value) => {
+  return /^\+?(0|[1-9]\d*)$/.test(value)
+}
diff --git a/libs/remix-ui/run-tab/src/index.ts b/libs/remix-ui/run-tab/src/index.ts
index 2d18b20958..1964da6480 100644
--- a/libs/remix-ui/run-tab/src/index.ts
+++ b/libs/remix-ui/run-tab/src/index.ts
@@ -1 +1 @@
-export * from './lib/remix-ui-run-tab';
+export * from './lib/run-tab'
diff --git a/libs/remix-ui/run-tab/src/lib/actions/index.ts b/libs/remix-ui/run-tab/src/lib/actions/index.ts
new file mode 100644
index 0000000000..85f0ddb18d
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/actions/index.ts
@@ -0,0 +1,8 @@
+let plugin, dispatch: React.Dispatch<any>
+
+const initSettingsTab = (udapp) => async (reducerDispatch: React.Dispatch<any>) => {
+  plugin = udapp
+  dispatch = reducerDispatch
+
+  
+}
\ No newline at end of file
diff --git a/libs/remix-ui/run-tab/src/lib/components/account.tsx b/libs/remix-ui/run-tab/src/lib/components/account.tsx
new file mode 100644
index 0000000000..f82cec8c2b
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/components/account.tsx
@@ -0,0 +1,149 @@
+// eslint-disable-next-line no-use-before-define
+import React, { useRef, useState } from 'react'
+import { CopyToClipboard } from '@remix-ui/clipboard'
+import { AccountProps } from '../types'
+
+export function AccountUI (props: AccountProps) {
+  const [selectedAccount, setSelectedAccount] = useState<string>('')
+  const plusBtn = useRef(null)
+  const plusTitle = useRef(null)
+
+  // // TODO: unclear what's the goal of accountListCallId, feels like it can be simplified
+  // async fillAccountsList () {
+  //   this.accountListCallId++
+  //   const callid = this.accountListCallId
+  //   const txOrigin = this.el.querySelector('#txorigin')
+  //   let accounts = []
+  //   try {
+  //     accounts = await this.blockchain.getAccounts()
+  //   } catch (e) {
+  //     addTooltip(`Cannot get account list: ${e}`)
+  //   }
+  //   if (!accounts) accounts = []
+  //   if (this.accountListCallId > callid) return
+  //   this.accountListCallId++
+  //   for (const loadedaddress in this.loadedAccounts) {
+  //     if (accounts.indexOf(loadedaddress) === -1) {
+  //       txOrigin.removeChild(txOrigin.querySelector('option[value="' + loadedaddress + '"]'))
+  //       delete this.loadedAccounts[loadedaddress]
+  //     }
+  //   }
+  //   for (const i in accounts) {
+  //     const address = accounts[i]
+  //     if (!this.loadedAccounts[address]) {
+  //       txOrigin.appendChild(yo`<option value="${address}" >${address}</option>`)
+  //       this.loadedAccounts[address] = 1
+  //     }
+  //   }
+  //   txOrigin.setAttribute('value', accounts[0])
+  // }
+
+  const updatePlusButton = () => {
+    // enable/disable + button
+    switch (props.selectExEnv) {
+      case 'injected':
+        plusBtn.current.classList.add('udapp_disableMouseEvents')
+        plusTitle.current.title = "Unfortunately it's not possible to create an account using injected web3. Please create the account directly from your provider (i.e metamask or other of the same type)."
+
+        break
+      case 'vm':
+        plusBtn.current.classList.remove('udapp_disableMouseEvents')
+        plusTitle.current.title = 'Create a new account'
+
+        break
+
+      case 'web3':
+        this.onPersonalChange()
+
+        break
+      default: {
+        plusBtn.current.classList.add('udapp_disableMouseEvents')
+        plusTitle.current.title = `Unfortunately it's not possible to create an account using an external wallet (${props.selectExEnv}).`
+      }
+    }
+  }
+
+  const newAccount = () => {
+    // dispatch createNewBlockchainAccount
+    // this.blockchain.newAccount(
+    //   '',
+    //   (cb) => {
+    //     modalDialogCustom.promptPassphraseCreation((error, passphrase) => {
+    //       if (error) {
+    //         return modalDialogCustom.alert(error)
+    //       }
+    //       cb(passphrase)
+    //     }, () => {})
+    //   },
+    //   (error, address) => {
+    //     if (error) {
+    //       return addTooltip('Cannot create an account: ' + error)
+    //     }
+    //     addTooltip(`account ${address} created`)
+    //   }
+    // )
+  }
+
+  const signMessage = () => {
+    // dispatch signMessageWithBlockchainAccounts
+  //   this.blockchain.getAccounts((err, accounts) => {
+  //     if (err) {
+  //       return addTooltip(`Cannot get account list: ${err}`)
+  //     }
+
+    //     var signMessageDialog = { title: 'Sign a message', text: 'Enter a message to sign', inputvalue: 'Message to sign' }
+    //     var $txOrigin = this.el.querySelector('#txorigin')
+    //     if (!$txOrigin.selectedOptions[0] && (this.blockchain.isInjectedWeb3() || this.blockchain.isWeb3Provider())) {
+    //       return addTooltip('Account list is empty, please make sure the current provider is properly connected to remix')
+    //     }
+
+    //     var account = $txOrigin.selectedOptions[0].value
+
+    //     var promptCb = (passphrase) => {
+    //       const modal = modalDialogCustom.promptMulti(signMessageDialog, (message) => {
+    //         this.blockchain.signMessage(message, account, passphrase, (err, msgHash, signedData) => {
+    //           if (err) {
+    //             return addTooltip(err)
+    //           }
+    //           modal.hide()
+    //           modalDialogCustom.alert(yo`
+    //             <div>
+    //               <b>hash:</b><br>
+    //               <span id="remixRunSignMsgHash" data-id="settingsRemixRunSignMsgHash">${msgHash}</span>
+    //               <br><b>signature:</b><br>
+    //               <span id="remixRunSignMsgSignature" data-id="settingsRemixRunSignMsgSignature">${signedData}</span>
+    //             </div>
+    //           `)
+    //         })
+    //       }, false)
+    //     }
+
+  //     if (this.blockchain.isWeb3Provider()) {
+  //       return modalDialogCustom.promptPassphrase(
+  //         'Passphrase to sign a message',
+  //         'Enter your passphrase for this account to sign the message',
+  //         '',
+  //         promptCb,
+  //         false
+  //       )
+  //     }
+  //     promptCb()
+  //   })
+  }
+
+  return (
+    <div className="udapp_crow">
+      <label className="udapp_settingsLabel">
+        Account
+        <span ref={plusTitle} id="remixRunPlusWraper" title="Create a new account" onLoad={updatePlusButton}>
+          <i ref={plusBtn} id="remixRunPlus" className="fas fa-plus-circle udapp_icon" aria-hidden="true" onClick={newAccount}></i>
+        </span>
+      </label>
+      <div className="udapp_account">
+        <select id="txorigin" data-id="runTabSelectAccount" name="txorigin" className="form-control udapp_select custom-select pr-4" value={selectedAccount} onChange={(e) => { setSelectedAccount(e.target.value) }}></select>
+        <div style={{ marginLeft: -5 }}><CopyToClipboard content={selectedAccount} direction='top' /></div>
+        <i id="remixRunSignMsg" data-id="settingsRemixRunSignMsg" className="mx-1 fas fa-edit udapp_icon" aria-hidden="true" onClick={signMessage} title="Sign a message using this account key"></i>
+      </div>
+    </div>
+  )
+}
diff --git a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
new file mode 100644
index 0000000000..0ec4f1c0b2
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
@@ -0,0 +1,418 @@
+// eslint-disable-next-line no-use-before-define
+import React, { SyntheticEvent, useEffect, useRef, useState } from 'react'
+import { ContractDropdownProps } from '../types'
+import * as ethJSUtil from 'ethereumjs-util'
+
+export function ContractDropdownUI (props: ContractDropdownProps) {
+  const [networkName, setNetworkName] = useState<string>('')
+  const [abiLabel, setAbiLabel] = useState<{
+    display: string,
+    content: string
+  }>({
+    display: '',
+    content: ''
+  })
+  const [ipfsCheckedState, setIpfsCheckedState] = useState<boolean>(false)
+  const [loadType] = useState<string>('other')
+  const atAddressButtonInput = useRef(null)
+  const contracts = useRef(null)
+
+  useEffect(() => {
+    enableAtAddress(false)
+    const savedConfig = window.localStorage.getItem(`ipfs/${props.exEnvironment}/${networkName}`)
+    const isCheckedIPFS = savedConfig === 'true' ? true : false // eslint-disable-line
+
+    if (isCheckedIPFS) setIpfsCheckedState(true)
+    setAbiLabel({
+      display: 'none',
+      content: 'ABI file selected'
+    })
+  }, [])
+
+  useEffect(() => {
+    if (props.exEnvironment === 'vm') setNetworkName('VM')
+  }, [props.exEnvironment])
+
+  const enableAtAddress = (enable) => {
+    const atAddress = atAddressButtonInput.current
+
+    if (enable) {
+      if (!atAddress.value || !ethJSUtil.isValidAddress(atAddress.value)) {
+        enableAtAddress(false)
+        return
+      }
+      atAddress.removeAttribute('disabled')
+      atAddress.setAttribute('title', 'Interact with the given contract.')
+    } else {
+      atAddress.setAttribute('disabled', true)
+      if (atAddress.value === '') {
+        atAddress.setAttribute('title', '⚠ Compile *.sol file or select *.abi file & then enter the address of deployed contract.')
+      } else {
+        atAddress.setAttribute('title', '⚠ Compile *.sol file or select *.abi file.')
+      }
+    }
+  }
+  //   constructor (blockchain, dropdownLogic, logCallback, runView) {
+  //     this.blockchain = blockchain
+  //     this.dropdownLogic = dropdownLogic
+  //     this.logCallback = logCallback
+  //     this.runView = runView
+  //     this.event = new EventManager()
+
+  //     this.listenToEvents()
+  //     this.ipfsCheckedState = false
+  //     this.exEnvironment = blockchain.getProvider()
+  //     this.listenToContextChange()
+  //     this.loadType = 'other'
+  //   }
+
+  //   listenToEvents () {
+  //     this.dropdownLogic.event.register('newlyCompiled', (success, data, source, compiler, compilerFullName, file) => {
+  //       if (!this.selectContractNames) return
+  //       this.selectContractNames.innerHTML = ''
+  //       if (success) {
+  //         this.dropdownLogic.getCompiledContracts(compiler, compilerFullName).forEach((contract) => {
+  //           this.selectContractNames.appendChild(yo`<option value="${contract.name}" compiler="${compilerFullName}">${contract.name} - ${contract.file}</option>`)
+  //         })
+  //       }
+  //       this.enableAtAddress(success)
+  //       this.enableContractNames(success)
+  //       this.setInputParamsPlaceHolder()
+
+  //       if (success) {
+  //         this.compFails.style.display = 'none'
+  //       } else {
+  //         this.compFails.style.display = 'block'
+  //       }
+  //     })
+  //   }
+
+  //   listenToContextChange () {
+  //     this.blockchain.event.register('networkStatus', ({ error, network }) => {
+  //       if (error) {
+  //         console.log('can\'t detect network')
+  //         return
+  //       }
+  //       this.exEnvironment = this.blockchain.getProvider()
+  //       this.networkName = network.name
+
+  //       const savedConfig = window.localStorage.getItem(`ipfs/${this.exEnvironment}/${this.networkName}`)
+
+  //       // check if an already selected option exist else use default workflow
+  //       if (savedConfig !== null) {
+  //         this.setCheckedState(savedConfig)
+  //       } else {
+  //         this.setCheckedState(this.networkName === 'Main')
+  //       }
+  //     })
+  //   }
+
+  //   setCheckedState (value) {
+  //     value = value === 'true' ? true : value === 'false' ? false : value
+  //     this.ipfsCheckedState = value
+  //     if (this.ipfsCheckbox) this.ipfsCheckbox.checked = value
+  //   }
+
+  //   enableContractNames (enable) {
+  //     if (enable) {
+  //       if (this.selectContractNames.value === '') return
+  //       this.selectContractNames.removeAttribute('disabled')
+  //       this.selectContractNames.setAttribute('title', 'Select contract for Deploy or At Address.')
+  //     } else {
+  //       this.selectContractNames.setAttribute('disabled', true)
+  //       if (this.loadType === 'sol') {
+  //         this.selectContractNames.setAttribute('title', '⚠ Select and compile *.sol file to deploy or access a contract.')
+  //       } else {
+  //         this.selectContractNames.setAttribute('title', '⚠ Selected *.abi file allows accessing contracts, select and compile *.sol file to deploy and access one.')
+  //       }
+  //     }
+  //   }
+
+  //   changeCurrentFile (currentFile) {
+  //     if (!this.selectContractNames) return
+  //     if (/.(.abi)$/.exec(currentFile)) {
+  //       this.createPanel.style.display = 'none'
+  //       this.orLabel.style.display = 'none'
+  //       this.compFails.style.display = 'none'
+  //       this.loadType = 'abi'
+  //       this.contractNamesContainer.style.display = 'block'
+  //       this.abiLabel.style.display = 'block'
+  //       this.abiLabel.innerHTML = currentFile
+  //       this.selectContractNames.style.display = 'none'
+  //       this.enableContractNames(true)
+  //       this.enableAtAddress(true)
+  //     } else if (/.(.sol)$/.exec(currentFile) ||
+  //         /.(.vy)$/.exec(currentFile) || // vyper
+  //         /.(.lex)$/.exec(currentFile) || // lexon
+  //         /.(.contract)$/.exec(currentFile)) {
+  //       this.createPanel.style.display = 'block'
+  //       this.orLabel.style.display = 'block'
+  //       this.contractNamesContainer.style.display = 'block'
+  //       this.loadType = 'sol'
+  //       this.selectContractNames.style.display = 'block'
+  //       this.abiLabel.style.display = 'none'
+  //       if (this.selectContractNames.value === '') this.enableAtAddress(false)
+  //     } else {
+  //       this.loadType = 'other'
+  //       this.createPanel.style.display = 'block'
+  //       this.orLabel.style.display = 'block'
+  //       this.contractNamesContainer.style.display = 'block'
+  //       this.selectContractNames.style.display = 'block'
+  //       this.abiLabel.style.display = 'none'
+  //       if (this.selectContractNames.value === '') this.enableAtAddress(false)
+  //     }
+  //   }
+
+  //   setInputParamsPlaceHolder () {
+  //     this.createPanel.innerHTML = ''
+  //     if (this.selectContractNames.selectedIndex < 0 || this.selectContractNames.children.length <= 0) {
+  //       this.createPanel.innerHTML = 'No compiled contracts'
+  //       return
+  //     }
+
+  //     const selectedContract = this.getSelectedContract()
+  //     const clickCallback = async (valArray, inputsValues) => {
+  //       var selectedContract = this.getSelectedContract()
+  //       this.createInstance(selectedContract, inputsValues)
+  //     }
+  //     const createConstructorInstance = new MultiParamManager(
+  //       0,
+  //       selectedContract.getConstructorInterface(),
+  //       clickCallback,
+  //       selectedContract.getConstructorInputs(),
+  //       'Deploy',
+  //       selectedContract.bytecodeObject,
+  //       true
+  //     )
+  //     this.createPanel.appendChild(createConstructorInstance.render())
+  //     this.createPanel.appendChild(this.deployCheckBox)
+  //   }
+
+  //   getSelectedContract () {
+  //     var contract = this.selectContractNames.children[this.selectContractNames.selectedIndex]
+  //     var contractName = contract.getAttribute('value')
+  //     var compilerAtributeName = contract.getAttribute('compiler')
+
+  //     return this.dropdownLogic.getSelectedContract(contractName, compilerAtributeName)
+  //   }
+
+  //   async createInstance (selectedContract, args) {
+  //     if (selectedContract.bytecodeObject.length === 0) {
+  //       return modalDialogCustom.alert('This contract may be abstract, not implement an abstract parent\'s methods completely or not invoke an inherited contract\'s constructor correctly.')
+  //     }
+
+  //     var continueCb = (error, continueTxExecution, cancelCb) => {
+  //       if (error) {
+  //         var msg = typeof error !== 'string' ? error.message : error
+  //         modalDialog('Gas estimation failed', yo`<div>Gas estimation errored with the following message (see below).
+  //         The transaction execution will likely fail. Do you want to force sending? <br>
+  //         ${msg}
+  //         </div>`,
+  //         {
+  //           label: 'Send Transaction',
+  //           fn: () => {
+  //             continueTxExecution()
+  //           }
+  //         }, {
+  //           label: 'Cancel Transaction',
+  //           fn: () => {
+  //             cancelCb()
+  //           }
+  //         })
+  //       } else {
+  //         continueTxExecution()
+  //       }
+  //     }
+
+  //     const self = this
+
+  //     var promptCb = (okCb, cancelCb) => {
+  //       modalDialogCustom.promptPassphrase('Passphrase requested', 'Personal mode is enabled. Please provide passphrase of account', '', okCb, cancelCb)
+  //     }
+
+  //     var statusCb = (msg) => {
+  //       return this.logCallback(msg)
+  //     }
+
+  //     var finalCb = (error, contractObject, address) => {
+  //       self.event.trigger('clearInstance')
+
+  //       if (error) {
+  //         return this.logCallback(error)
+  //       }
+  //       self.event.trigger('newContractInstanceAdded', [contractObject, address, contractObject.name])
+
+  //       const data = self.runView.compilersArtefacts.getCompilerAbstract(contractObject.contract.file)
+  //       self.runView.compilersArtefacts.addResolvedContract(helper.addressToString(address), data)
+  //       if (self.ipfsCheckedState) {
+  //         _paq.push(['trackEvent', 'udapp', 'DeployAndPublish', this.networkName])
+  //         publishToStorage('ipfs', self.runView.fileProvider, self.runView.fileManager, selectedContract)
+  //       } else {
+  //         _paq.push(['trackEvent', 'udapp', 'DeployOnly', this.networkName])
+  //       }
+  //     }
+
+  //     let contractMetadata
+  //     try {
+  //       contractMetadata = await this.runView.call('compilerMetadata', 'deployMetadataOf', selectedContract.name, selectedContract.contract.file)
+  //     } catch (error) {
+  //       return statusCb(`creation of ${selectedContract.name} errored: ${error.message ? error.message : error}`)
+  //     }
+
+  //     const compilerContracts = this.dropdownLogic.getCompilerContracts()
+  //     const confirmationCb = this.getConfirmationCb(modalDialog, confirmDialog)
+
+  //     if (selectedContract.isOverSizeLimit()) {
+  //       return modalDialog('Contract code size over limit', yo`<div>Contract creation initialization returns data with length of more than 24576 bytes. The deployment will likely fails. <br>
+  //       More info: <a href="https://github.com/ethereum/EIPs/blob/master/EIPS/eip-170.md" target="_blank">eip-170</a>
+  //       </div>`,
+  //       {
+  //         label: 'Force Send',
+  //         fn: () => {
+  //           this.deployContract(selectedContract, args, contractMetadata, compilerContracts, { continueCb, promptCb, statusCb, finalCb }, confirmationCb)
+  //         }
+  //       }, {
+  //         label: 'Cancel',
+  //         fn: () => {
+  //           this.logCallback(`creation of ${selectedContract.name} canceled by user.`)
+  //         }
+  //       })
+  //     }
+  //     this.deployContract(selectedContract, args, contractMetadata, compilerContracts, { continueCb, promptCb, statusCb, finalCb }, confirmationCb)
+  //   }
+
+  //   deployContract (selectedContract, args, contractMetadata, compilerContracts, callbacks, confirmationCb) {
+  //     _paq.push(['trackEvent', 'udapp', 'DeployContractTo', this.networkName])
+  //     const { statusCb } = callbacks
+  //     if (!contractMetadata || (contractMetadata && contractMetadata.autoDeployLib)) {
+  //       return this.blockchain.deployContractAndLibraries(selectedContract, args, contractMetadata, compilerContracts, callbacks, confirmationCb)
+  //     }
+  //     if (Object.keys(selectedContract.bytecodeLinkReferences).length) statusCb(`linking ${JSON.stringify(selectedContract.bytecodeLinkReferences, null, '\t')} using ${JSON.stringify(contractMetadata.linkReferences, null, '\t')}`)
+  //     this.blockchain.deployContractWithLibrary(selectedContract, args, contractMetadata, compilerContracts, callbacks, confirmationCb)
+  //   }
+
+  //   getConfirmationCb (modalDialog, confirmDialog) {
+  //     // this code is the same as in recorder.js. TODO need to be refactored out
+  //     const confirmationCb = (network, tx, gasEstimation, continueTxExecution, cancelCb) => {
+  //       if (network.name !== 'Main') {
+  //         return continueTxExecution(null)
+  //       }
+  //       const amount = this.blockchain.fromWei(tx.value, true, 'ether')
+  //       const content = confirmDialog(tx, network, amount, gasEstimation, this.blockchain.determineGasFees(tx), this.blockchain.determineGasPrice.bind(this.blockchain))
+
+  //       modalDialog('Confirm transaction', content,
+  //         {
+  //           label: 'Confirm',
+  //           fn: () => {
+  //             this.blockchain.config.setUnpersistedProperty('doNotShowTransactionConfirmationAgain', content.querySelector('input#confirmsetting').checked)
+  //             // TODO: check if this is check is still valid given the refactor
+  //             if (!content.gasPriceStatus) {
+  //               cancelCb('Given transaction fee is not correct')
+  //             } else {
+  //               continueTxExecution(content.txFee)
+  //             }
+  //           }
+  //         }, {
+  //           label: 'Cancel',
+  //           fn: () => {
+  //             return cancelCb('Transaction canceled by user.')
+  //           }
+  //         }
+  //       )
+  //     }
+
+  //     return confirmationCb
+  //   }
+
+  const atAddressChanged = (event: SyntheticEvent) => {
+    const atAddress = atAddressButtonInput.current
+    const selectContractNames = contracts.current
+
+    if (!atAddress.value) {
+      enableAtAddress(false)
+    } else {
+      if ((selectContractNames && !selectContractNames.getAttribute('disabled') && loadType === 'sol') ||
+        loadType === 'abi') {
+        enableAtAddress(true)
+      } else {
+        enableAtAddress(false)
+      }
+    }
+  }
+
+  const loadFromAddress = () => {
+    // trigger dispatchLoadAddress
+    // this.event.trigger('clearInstance')
+
+    // let address = this.atAddressButtonInput.value
+    // if (!ethJSUtil.isValidChecksumAddress(address)) {
+    //   addTooltip(yo`
+    //     <span>
+    //       It seems you are not using a checksumed address.
+    //       <br>A checksummed address is an address that contains uppercase letters, as specified in <a href="https://eips.ethereum.org/EIPS/eip-55" target="_blank">EIP-55</a>.
+    //       <br>Checksummed addresses are meant to help prevent users from sending transactions to the wrong address.
+    //     </span>`)
+    //   address = ethJSUtil.toChecksumAddress(address)
+    // }
+    // this.dropdownLogic.loadContractFromAddress(address,
+    //   (cb) => {
+    //     modalDialogCustom.confirm('At Address', `Do you really want to interact with ${address} using the current ABI definition?`, cb)
+    //   },
+    //   (error, loadType, abi) => {
+    //     if (error) {
+    //       return modalDialogCustom.alert(error)
+    //     }
+    //     if (loadType === 'abi') {
+    //       return this.event.trigger('newContractABIAdded', [abi, address])
+    //     }
+    //     var selectedContract = this.getSelectedContract()
+    //     this.event.trigger('newContractInstanceAdded', [selectedContract.object, address, this.selectContractNames.value])
+    //   }
+    // )
+  }
+
+  const handleCheckedIPFS = () => {
+    setIpfsCheckedState(!ipfsCheckedState)
+    window.localStorage.setItem(`ipfs/${props.exEnvironment}/${networkName}`, ipfsCheckedState.toString())
+  }
+
+  return (
+    <div className="udapp_container" data-id="contractDropdownContainer">
+      <label className="udapp_settingsLabel">Contract</label>
+      <div className="udapp_subcontainer">
+        <select ref={contracts} className="udapp_contractNames custom-select" disabled title="Please compile *.sol file to deploy or access a contract"></select>
+        <i title="No contract compiled yet or compilation failed. Please check the compile tab for more information." className="m-2 ml-3 fas fa-times-circle udapp_errorIcon" ></i>
+        <span className="py-1" style={{ display: abiLabel.display }}>{ abiLabel.content }</span>
+      </div>
+      <div>
+        <div className="udapp_deployDropdown">
+          <div className="d-flex py-1 align-items-center custom-control custom-checkbox">
+            <input
+              id="deployAndRunPublishToIPFS"
+              data-id="contractDropdownIpfsCheckbox"
+              className="form-check-input custom-control-input"
+              type="checkbox"
+              onChange={handleCheckedIPFS}
+              checked={ipfsCheckedState}
+            />
+            <label
+              htmlFor="deployAndRunPublishToIPFS"
+              data-id="contractDropdownIpfsCheckboxLabel"
+              className="m-0 form-check-label custom-control-label udapp_checkboxAlign"
+              title="Publishing the source code and metadata to IPFS facilitates source code verification using Sourcify and will greatly foster contract adoption (auditing, debugging, calling it, etc...)"
+            >
+              Publish to IPFS
+            </label>
+          </div>
+        </div>
+        <div className="udapp_orLabel mt-2">or</div>
+        <div className="udapp_button udapp_atAddressSect">
+          <button className="udapp_atAddress btn btn-sm btn-info" id="runAndDeployAtAdressButton" onClick={loadFromAddress}>At Address</button>
+          <input ref={atAddressButtonInput} className="udapp_input udapp_ataddressinput ataddressinput form-control" placeholder="Load contract from Address" title="address of contract" onInput={atAddressChanged} />
+        </div>
+      </div>
+    </div>
+    // this.selectContractNames.addEventListener('change', this.setInputParamsPlaceHolder.bind(this))
+    // this.setInputParamsPlaceHolder()
+  )
+}
diff --git a/libs/remix-ui/run-tab/src/lib/components/environment.tsx b/libs/remix-ui/run-tab/src/lib/components/environment.tsx
new file mode 100644
index 0000000000..84685ef58f
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/components/environment.tsx
@@ -0,0 +1,76 @@
+// eslint-disable-next-line no-use-before-define
+import React, { useState } from 'react'
+import { EnvironmentProps } from '../types'
+
+export function EnvironmentUI (props: EnvironmentProps) {
+  const [exEnv, setExEnv] = useState<string>('')
+
+  // setDropdown (selectExEnv) {
+  //   this.selectExEnv = selectExEnv
+
+  //   const addProvider = (network) => {
+  //     selectExEnv.appendChild(yo`<option
+  //       title="provider name: ${network.name}"
+  //       value="${network.name}"
+  //       name="executionContext"
+  //     >
+  //       ${network.name}
+  //     </option>`)
+  //     addTooltip(yo`<span><b>${network.name}</b> provider added</span>`)
+  //   }
+
+  //   const removeProvider = (name) => {
+  //     var env = selectExEnv.querySelector(`option[value="${name}"]`)
+  //     if (env) {
+  //       selectExEnv.removeChild(env)
+  //       addTooltip(yo`<span><b>${name}</b> provider removed</span>`)
+  //     }
+  //   }
+  //   this.blockchain.event.register('addProvider', provider => addProvider(provider))
+  //   this.blockchain.event.register('removeProvider', name => removeProvider(name))
+
+  //   selectExEnv.addEventListener('change', (event) => {
+  //     const provider = selectExEnv.options[selectExEnv.selectedIndex]
+  //     const fork = provider.getAttribute('fork') // can be undefined if connected to an external source (web3 provider / injected)
+  //     let context = provider.value
+  //     context = context.startsWith('vm') ? 'vm' : context // context has to be 'vm', 'web3' or 'injected'
+  //     this.setExecutionContext({ context, fork })
+  //   })
+
+  //   selectExEnv.value = this._getProviderDropdownValue()
+  // }
+
+  const handleChangeExEnv = (env: string) => {
+    setExEnv(env)
+    props.updateExEnv(env)
+  }
+  return (
+    <div className="udapp_crow">
+      <label id="selectExEnv" className="udapp_settingsLabel">
+        Environment
+      </label>
+      <div className="udapp_environment">
+        <select id="selectExEnvOptions" data-id="settingsSelectEnvOptions" className="form-control udapp_select custom-select" value={exEnv} onChange={(e) => { handleChangeExEnv(e.target.value) }}>
+          <option id="vm-mode-london" data-id="settingsVMLondonMode"
+            title="Execution environment does not connect to any node, everything is local and in memory only."
+            value="vm-london"> JavaScript VM (London) {/* fork="london" */}
+          </option>
+          <option id="vm-mode-berlin" data-id="settingsVMBerlinMode"
+            title="Execution environment does not connect to any node, everything is local and in memory only."
+            value="vm-berlin"> JavaScript VM (Berlin) {/* fork="berlin" */}
+          </option>
+          <option id="injected-mode" data-id="settingsInjectedMode"
+            title="Execution environment has been provided by Metamask or similar provider."
+            value="injected"> Injected Web3
+          </option>
+          <option id="web3-mode" data-id="settingsWeb3Mode"
+            title="Execution environment connects to node at localhost (or via IPC if available), transactions will be sent to the network and can cause loss of money or worse!
+            If this page is served via https and you access your node via http, it might not work. In this case, try cloning the repository and serving it via http."
+            value="web3"> Web3 Provider
+          </option>
+        </select>
+        <a href="https://remix-ide.readthedocs.io/en/latest/run.html#run-setup" target="_blank"><i className="udapp_infoDeployAction ml-2 fas fa-info" title="check out docs to setup Environment"></i></a>
+      </div>
+    </div>
+  )
+}
diff --git a/libs/remix-ui/run-tab/src/lib/components/gasPrice.tsx b/libs/remix-ui/run-tab/src/lib/components/gasPrice.tsx
new file mode 100644
index 0000000000..f357659971
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/components/gasPrice.tsx
@@ -0,0 +1,12 @@
+// eslint-disable-next-line no-use-before-define
+import React from 'react'
+import { GasPriceProps } from '../types'
+
+export function GasPriceUI (props: GasPriceProps) {
+  return (
+    <div className="udapp_crow">
+      <label className="udapp_settingsLabel">Gas limit</label>
+      <input type="number" className="form-control udapp_gasNval udapp_col2" id="gasLimit" defaultValue="3000000" />
+    </div>
+  )
+}
diff --git a/libs/remix-ui/run-tab/src/lib/components/network.tsx b/libs/remix-ui/run-tab/src/lib/components/network.tsx
new file mode 100644
index 0000000000..f33e568e19
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/components/network.tsx
@@ -0,0 +1,15 @@
+// eslint-disable-next-line no-use-before-define
+import React from 'react'
+import { NetworkProps } from '../types'
+
+export function NetworkUI (props: NetworkProps) {
+  return (
+    <div className="udapp_crow">
+      <div className="udapp_settingsLabel">
+      </div>
+      <div className="udapp_environment" data-id="settingsNetworkEnv">
+        <span className="udapp_network badge badge-secondary"></span>
+      </div>
+    </div>
+  )
+}
diff --git a/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx b/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
new file mode 100644
index 0000000000..2acaa0febf
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
@@ -0,0 +1,156 @@
+// eslint-disable-next-line no-use-before-define
+import React from 'react'
+import { SettingsProps } from '../types'
+import { EnvironmentUI } from './environment'
+import { NetworkUI } from './network'
+import { AccountUI } from './account'
+import { GasPriceUI } from './gasPrice'
+import { ValueUI } from './value'
+
+export function SettingsUI (props: SettingsProps) {
+  // constructor () {
+  //   this.blockchain = blockchain
+  //   this.event = new EventManager()
+  //   this._components = {}
+
+  //   this.blockchain.event.register('transactionExecuted', (error, from, to, data, lookupOnly, txResult) => {
+  //     if (!lookupOnly) this.el.querySelector('#value').value = 0
+  //     if (error) return
+  //     this.updateAccountBalances()
+  //   })
+  //   this._components = {
+  //     registry: globalRegistry,
+  //     networkModule: networkModule
+  //   }
+  //   this._components.registry = globalRegistry
+  //   this._deps = {
+  //     config: this._components.registry.get('config').api
+  //   }
+
+  //   this._deps.config.events.on('settings/personal-mode_changed', this.onPersonalChange.bind(this))
+
+  //   setInterval(() => {
+  //     this.updateAccountBalances()
+  //   }, 1000)
+
+  //   this.accountListCallId = 0
+  //   this.loadedAccounts = {}
+  // }
+
+  // updateAccountBalances () {
+  //   if (!this.el) return
+  //   var accounts = $(this.el.querySelector('#txorigin')).children('option')
+  //   accounts.each((index, account) => {
+  //     this.blockchain.getBalanceInEther(account.value, (err, balance) => {
+  //       if (err) return
+  //       const updated = helper.shortenAddress(account.value, balance)
+  //       if (updated !== account.innerText) { // check if the balance has been updated and update UI accordingly.
+  //         account.innerText = updated
+  //       }
+  //     })
+  //   })
+  // }
+
+  // setExecutionContext (context) {
+  //   this.blockchain.changeExecutionContext(context, () => {
+  //     modalDialogCustom.prompt('External node request', this.web3ProviderDialogBody(), 'http://127.0.0.1:8545', (target) => {
+  //       this.blockchain.setProviderFromEndpoint(target, context, (alertMsg) => {
+  //         if (alertMsg) addTooltip(alertMsg)
+  //         this.setFinalContext()
+  //       })
+  //     }, this.setFinalContext.bind(this))
+  //   }, (alertMsg) => {
+  //     addTooltip(alertMsg)
+  //   }, this.setFinalContext.bind(this))
+  // }
+
+  // web3ProviderDialogBody () {
+  //   const thePath = '<path/to/local/folder/for/test/chain>'
+
+  //   return yo`
+  //     <div class="">
+  //       Note: To use Geth & https://remix.ethereum.org, configure it to allow requests from Remix:(see <a href="https://geth.ethereum.org/docs/rpc/server" target="_blank">Geth Docs on rpc server</a>)
+  //       <div class="border p-1">geth --http --http.corsdomain https://remix.ethereum.org</div>
+  //       <br>
+  //       To run Remix & a local Geth test node, use this command: (see <a href="https://geth.ethereum.org/getting-started/dev-mode" target="_blank">Geth Docs on Dev mode</a>)
+  //       <div class="border p-1">geth --http --http.corsdomain="${window.origin}" --http.api web3,eth,debug,personal,net --vmdebug --datadir ${thePath} --dev console</div>
+  //       <br>
+  //       <br>
+  //       <b>WARNING:</b> It is not safe to use the --http.corsdomain flag with a wildcard: <b>--http.corsdomain *</b>
+  //       <br>
+  //       <br>For more info: <a href="https://remix-ide.readthedocs.io/en/latest/run.html#more-about-web3-provider" target="_blank">Remix Docs on Web3 Provider</a>
+  //       <br>
+  //       <br>
+  //       Web3 Provider Endpoint
+  //     </div>
+  //   `
+  // }
+
+  // /**
+  //  * generate a value used by the env dropdown list.
+  //  * @return {String} - can return 'vm-berlin, 'vm-london', 'injected' or 'web3'
+  //  */
+  // _getProviderDropdownValue () {
+  //   const provider = this.blockchain.getProvider()
+  //   const fork = this.blockchain.getCurrentFork()
+  //   return provider === 'vm' ? provider + '-' + fork : provider
+  // }
+
+  // setFinalContext () {
+  //   // set the final context. Cause it is possible that this is not the one we've originaly selected
+  //   this.selectExEnv.value = this._getProviderDropdownValue()
+  //   this.event.trigger('clearInstance', [])
+  //   this.updatePlusButton()
+  // }
+
+  // onPersonalChange () {
+  //   const plusBtn = document.getElementById('remixRunPlus')
+  //   const plusTitle = document.getElementById('remixRunPlusWraper')
+  //   if (!this._deps.config.get('settings/personal-mode')) {
+  //     plusBtn.classList.add(css.disableMouseEvents)
+  //     plusTitle.title = 'Creating an account is possible only in Personal mode. Please go to Settings to enable it.'
+  //   } else {
+  //     plusBtn.classList.remove(css.disableMouseEvents)
+  //     plusTitle.title = 'Create a new account'
+  //   }
+  // }
+
+  // getSelectedAccount () {
+  //   return this.el.querySelector('#txorigin').selectedOptions[0].value
+  // }
+
+  // getEnvironment () {
+  //   return this.blockchain.getProvider()
+  // }
+
+  return (
+  // this.blockchain.event.register('contextChanged', (context, silent) => {
+  //   this.setFinalContext()
+  // })
+
+  // this.blockchain.event.register('networkStatus', ({ error, network }) => {
+  //   if (error) {
+  //     this.netUI.innerHTML = 'can\'t detect network '
+  //     return
+  //   }
+  //   const networkProvider = this._components.networkModule.getNetworkProvider.bind(this._components.networkModule)
+  //   this.netUI.innerHTML = (networkProvider() !== 'vm') ? `${network.name} (${network.id || '-'}) network` : ''
+  // })
+
+  // setInterval(() => {
+  //   this.fillAccountsList()
+  // }, 1000)
+
+  // this.el = el
+
+    // this.fillAccountsList()
+    // return el
+    <div className="udapp_settings">
+      <EnvironmentUI updateExEnv={props.updateExEnv} />
+      <NetworkUI />
+      <AccountUI selectExEnv={props.selectExEnv} />
+      <GasPriceUI />
+      <ValueUI />
+    </div>
+  )
+}
diff --git a/libs/remix-ui/run-tab/src/lib/components/value.tsx b/libs/remix-ui/run-tab/src/lib/components/value.tsx
new file mode 100644
index 0000000000..205e4137f8
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/components/value.tsx
@@ -0,0 +1,69 @@
+// eslint-disable-next-line no-use-before-define
+import React, { useRef } from 'react'
+import { BN } from 'ethereumjs-util'
+import { isNumeric } from '@remix-ui/helper'
+import { ValueProps } from '../types'
+
+export function ValueUI (props: ValueProps) {
+  const inputValue = useRef(null)
+
+  const validateInputKey = (e) => {
+    // preventing not numeric keys
+    // preventing 000 case
+    if (!isNumeric(e.key) ||
+      (e.key === '0' && !parseInt(inputValue.current.value) && inputValue.current.value.length > 0)) {
+      e.preventDefault()
+      e.stopImmediatePropagation()
+    }
+  }
+
+  const validateValue = () => {
+    if (!inputValue.current.value) {
+      // assign 0 if given value is
+      // - empty
+      inputValue.current.value = 0
+      return
+    }
+
+    let v
+    try {
+      v = new BN(inputValue.current.value, 10)
+      inputValue.current.value = v.toString(10)
+    } catch (e) {
+      // assign 0 if given value is
+      // - not valid (for ex 4345-54)
+      // - contains only '0's (for ex 0000) copy past or edit
+      inputValue.current.value = 0
+    }
+
+    // if giveen value is negative(possible with copy-pasting) set to 0
+    if (v.lt(0)) inputValue.current.value = 0
+  }
+
+  return (
+    <div className="udapp_crow">
+      <label className="udapp_settingsLabel" data-id="remixDRValueLabel">Value</label>
+      <div className="udapp_gasValueContainer">
+        <input
+          type="number"
+          min="0"
+          pattern="^[0-9]"
+          step="1"
+          className="form-control udapp_gasNval udapp_col2"
+          id="value"
+          data-id="dandrValue"
+          value="0"
+          title="Enter the value and choose the unit"
+          onKeyPress={validateInputKey}
+          onChange={validateValue}
+        />
+        <select name="unit" className="form-control p-1 udapp_gasNvalUnit udapp_col2_2 custom-select" id="unit">
+          <option data-unit="wei">Wei</option>
+          <option data-unit="gwei">Gwei</option>
+          <option data-unit="finney">Finney</option>
+          <option data-unit="ether">Ether</option>
+        </select>
+      </div>
+    </div>
+  )
+}
diff --git a/libs/remix-ui/run-tab/src/lib/css/run-tab.css b/libs/remix-ui/run-tab/src/lib/css/run-tab.css
new file mode 100644
index 0000000000..a6ec9c23d3
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/css/run-tab.css
@@ -0,0 +1,219 @@
+.udapp_runTabView {
+  display: flex;
+  flex-direction: column;
+}
+.udapp_runTabView::-webkit-scrollbar {
+  display: none;
+}
+.udapp_settings {
+  padding: 0 24px 16px;
+}
+.udapp_crow {
+  display: block;
+  margin-top: 8px;
+}
+.udapp_col1 {
+  width: 30%;
+  float: left;
+  align-self: center;
+}
+.udapp_settingsLabel {
+  font-size: 11px;
+  margin-bottom: 4px;
+  text-transform: uppercase;
+}
+.udapp_environment {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+}
+.udapp_environment a {
+  margin-left: 7px;
+}
+.udapp_account {
+  display: flex;
+  align-items: center;
+}
+.udapp_account i {
+  margin-left: 12px;
+}
+.udapp_col2 {
+  border-radius: 3px;
+}
+.udapp_col2_1 {
+  width: 164px;
+  min-width: 164px;
+}
+.udapp_col2_2 {
+}
+.udapp_select {
+  font-weight: normal;
+  width: 100%;
+  overflow: hidden;
+}
+.udapp_instanceContainer {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 2%;
+  border: none;
+  text-align: center;
+  padding: 0 14px 16px;
+}
+.udapp_pendingTxsContainer  {
+  display: flex;
+  flex-direction: column;
+  margin-top: 2%;
+  border: none;
+  text-align: center;
+}
+.udapp_container {
+  padding: 0 24px 16px;
+}
+.udapp_recorderDescription {
+  margin: 0 15px 15px 0;
+  }
+.udapp_contractNames {
+  width: 100%;
+  border: 1px solid
+}
+.udapp_subcontainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.udapp_subcontainer i {
+  width: 16px;
+  display: flex;
+  justify-content: center;
+  margin-left: 1px;
+}
+.udapp_button button{
+  flex: none;
+}
+.udapp_button {
+  display: flex;
+  align-items: center;
+  margin-top: 13px;
+}
+.udapp_transaction {
+}
+.udapp_atAddress {
+  margin: 0;
+  min-width: 100px;
+  width: 100px;
+  height: 100%;
+  word-break: inherit;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right: 0;
+}
+.udapp_atAddressSect {
+  margin-top: 8px;
+  height: 32px;
+}
+.udapp_atAddressSect input {
+  height: 32px;
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+.udapp_ataddressinput {
+  padding: .25rem;
+}
+.udapp_create {
+}
+.udapp_input {
+  font-size: 10px !important;
+}
+.udapp_noInstancesText {
+  font-style: italic;
+  text-align: left;
+  padding-left: 15px;
+}
+.udapp_pendingTxsText {
+  font-style: italic;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.udapp_item {
+  margin-right: 1em;
+  display: flex;
+  align-items: center;
+}
+.udapp_pendingContainer {
+  display: flex;
+  align-items: baseline;
+}
+.udapp_pending {
+  height: 25px;
+  text-align: center;
+  padding-left: 10px;
+  border-radius: 3px;
+  margin-left: 5px;
+}
+.udapp_disableMouseEvents {
+  pointer-events: none;
+}
+.udapp_icon {
+  cursor: pointer;
+  font-size: 12px;
+  cursor: pointer;
+  margin-left: 5px;
+}
+.udapp_icon:hover {
+  font-size: 12px;
+  color: var(--warning);
+}
+.udapp_errorIcon {
+  color: var(--warning);
+  margin-left: 15px;
+}
+.udapp_failDesc {
+  color: var(--warning);
+  padding-left: 10px;
+  display: inline;
+}
+.udapp_network {
+  margin-left: 8px;
+  pointer-events: none;
+}
+.udapp_networkItem {
+  margin-right: 5px;
+}
+.udapp_transactionActions {
+  display: flex;
+  justify-content: space-evenly;
+  width: 145px;
+}
+.udapp_orLabel {
+  text-align: center;
+  text-transform: uppercase;
+}
+.udapp_infoDeployAction {
+  margin-left: 1px;
+  font-size: 13px;
+  color: var(--info);
+}
+.udapp_gasValueContainer {
+  flex-direction: row;
+  display: flex;
+}
+.udapp_gasNval {
+  width: 55%;
+  font-size: 0.8rem;
+}
+.udapp_gasNvalUnit {
+  width: 41%;
+  margin-left: 10px;
+  font-size: 0.8rem;
+}
+.udapp_deployDropdown {
+  text-align: center;
+  text-transform: uppercase;
+}
+.udapp_checkboxAlign {
+  padding-top: 2px;
+}
diff --git a/libs/remix-ui/run-tab/src/lib/remix-ui-run-tab.module.css b/libs/remix-ui/run-tab/src/lib/remix-ui-run-tab.module.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/libs/remix-ui/run-tab/src/lib/remix-ui-run-tab.tsx b/libs/remix-ui/run-tab/src/lib/remix-ui-run-tab.tsx
deleted file mode 100644
index fdac73c72d..0000000000
--- a/libs/remix-ui/run-tab/src/lib/remix-ui-run-tab.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import './remix-ui-run-tab.module.css';
-
-/* eslint-disable-next-line */
-export interface RemixUiRunTabProps {}
-
-export function RemixUiRunTab(props: RemixUiRunTabProps) {
-  return (
-    <div>
-      <h1>Welcome to remix-ui-run-tab!</h1>
-    </div>
-  );
-}
-
-export default RemixUiRunTab;
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
new file mode 100644
index 0000000000..7884813a81
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -0,0 +1,25 @@
+// eslint-disable-next-line no-use-before-define
+import React, { useState } from 'react'
+import { ContractDropdownUI } from './components/contractDropdownUI'
+import { SettingsUI } from './components/settingsUI'
+import './css/run-tab.css'
+import { RunTabProps } from './types'
+
+export function RunTabUI (props: RunTabProps) {
+  const [selectExEnv, setSelectExEnv] = useState<string>('')
+
+  const updateExEnv = (env: string) => {
+    setSelectExEnv(env)
+  }
+
+  return (
+    <div className="udapp_runTabView run-tab" id="runTabView" data-id="runTabView">
+      <div className="list-group list-group-flush">
+        <SettingsUI selectExEnv={selectExEnv} updateExEnv={updateExEnv} />
+        <ContractDropdownUI exEnvironment={selectExEnv} />
+        {/* ${this.recorderCard.render()}
+        ${this.instanceContainer} */}
+      </div>
+    </div>
+  )
+}
diff --git a/libs/remix-ui/run-tab/src/lib/types/index.ts b/libs/remix-ui/run-tab/src/lib/types/index.ts
new file mode 100644
index 0000000000..c5172863a2
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/types/index.ts
@@ -0,0 +1,32 @@
+export interface RunTabProps {
+  plugin: any
+}
+
+export interface SettingsProps {
+  selectExEnv: string,
+  updateExEnv: (env: string) => void
+}
+
+export interface EnvironmentProps {
+  updateExEnv: (env: string) => void
+}
+
+export interface NetworkProps {
+
+}
+
+export interface AccountProps {
+  selectExEnv: string
+}
+
+export interface GasPriceProps {
+
+}
+
+export interface ValueProps {
+
+}
+
+export interface ContractDropdownProps {
+  exEnvironment: string
+}
diff --git a/libs/remix-ui/run-tab/tsconfig.json b/libs/remix-ui/run-tab/tsconfig.json
index 8bd701c578..d52e31ad74 100644
--- a/libs/remix-ui/run-tab/tsconfig.json
+++ b/libs/remix-ui/run-tab/tsconfig.json
@@ -1,14 +1,10 @@
 {
   "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
-    "jsx": "react-jsx",
+    "jsx": "react",
     "allowJs": true,
     "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "allowSyntheticDefaultImports": true
   },
   "files": [],
   "include": [],

From b6aa90c6a589f01a35ade03492bd3449352605f9 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Mon, 8 Nov 2021 14:19:05 +0100
Subject: [PATCH 110/168] Move recorderUI to react

---
 .../run-tab/src/lib/components/card.tsx       | 36 +++++++++++
 .../src/lib/components/recorderCardUI.tsx     | 64 +++++++++++++++++++
 libs/remix-ui/run-tab/src/lib/css/card.css    | 12 ++++
 libs/remix-ui/run-tab/src/lib/run-tab.tsx     |  5 +-
 libs/remix-ui/run-tab/src/lib/types/index.ts  |  4 ++
 .../src/lib/tree-view-item/tree-view-item.tsx |  4 +-
 libs/remix-ui/tree-view/src/types/index.ts    |  3 +-
 7 files changed, 123 insertions(+), 5 deletions(-)
 create mode 100644 libs/remix-ui/run-tab/src/lib/components/card.tsx
 create mode 100644 libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx
 create mode 100644 libs/remix-ui/run-tab/src/lib/css/card.css

diff --git a/libs/remix-ui/run-tab/src/lib/components/card.tsx b/libs/remix-ui/run-tab/src/lib/components/card.tsx
new file mode 100644
index 0000000000..a997ecc2ad
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/components/card.tsx
@@ -0,0 +1,36 @@
+// eslint-disable-next-line no-use-before-define
+import React, { useRef, useState } from 'react'
+import { CardProps } from '../types'
+import '../css/card.css'
+
+export function Card (props: CardProps) {
+
+  return (
+    self._view.statusBar = yo``
+
+    function trigger (el) {
+      var body = self._view.cardBody
+      var status = self._view.statusBar
+      if (el.classList) {
+        el.classList.toggle('fa-angle-up')
+        var arrow = el.classList.toggle('fa-angle-down') ? 'up' : 'down'
+        self.event.trigger('expandCollapseCard', [arrow, body, status])
+      }
+    }
+
+    <div class="${css.cardContainer} list-group-item border-0">
+      <div class="d-flex justify-content-between align-items-center" onclick=${() => trigger(self._view.arrow)}>
+        <div class="pr-1 d-flex flex-row">
+          <div>${self._opts.title}</div>
+          <div>${self._opts.collapsedView}</div>
+        </div>
+        <div>
+          <div>
+            <i class="${css.arrow} fas fa-angle-down" onclick="${() => trigger(this)}"></i>
+          </div>
+        </div>
+    </div>
+      <div></div>
+    </div>
+  )
+}
diff --git a/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx b/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx
new file mode 100644
index 0000000000..8ac3080797
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx
@@ -0,0 +1,64 @@
+// eslint-disable-next-line no-use-before-define
+import React from 'react'
+import { TreeView, TreeViewItem } from '@remix-ui/tree-view'
+import { RecorderProps } from '../types'
+
+export function RecorderUI (props: RecorderProps) {
+  const card = (title: string, recorderCount: number) => {
+    return (
+      <div className="d-flex justify-content-between align-items-center" onClick={() => {}}>
+        <div className="pr-1 d-flex flex-row">
+          <div>{title}</div>
+          <div>
+            <div className="d-flex flex-column">
+              <div className="ml-2 badge badge-pill badge-primary" title="The number of recorded transactions">{recorderCount}</div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div><i className="udapp_arrow fas fa-angle-down"></i></div>
+        </div>
+      </div>
+    )
+  }
+
+  const triggerRecordButton = () => {
+    // dispatch saveScenario()
+    // this.saveScenario(
+    //   (path, cb) => {
+    //     modalDialogCustom.prompt('Save transactions as scenario', 'Transactions will be saved in a file under ' + path, 'scenario.json', cb)
+    //   },
+    //   (error) => {
+    //     if (error) return modalDialogCustom.alert(error)
+    //   }
+    // )
+  }
+
+  const handleClickRunButton = () => {
+    // dispatchRunButtonClickHandler
+    // const file = this.config.get('currentFile')
+    // if (!file) return modalDialogCustom.alert('A scenario file has to be selected')
+    // this.runScenario(file)
+  }
+
+  return (
+    <div className="udapp_cardContainer list-group-item border-0">
+      <TreeView>
+        <TreeViewItem label={card('Transactions recorded', 0)} showIcon={false} labelClass="ml-n1">
+          <div className="d-flex flex-column">
+            <div className="udapp_recorderDescription mt-2">
+              All transactions (deployed contracts and function executions) in this environment can be saved and replayed in
+              another environment. e.g Transactions created in Javascript VM can be replayed in the Injected Web3.
+            </div>
+            <div className="udapp_transactionActions">
+              <i className="fas fa-save savetransaction udapp_recorder udapp_icon"
+                onClick={triggerRecordButton} title="Save Transactions" aria-hidden="true">
+              </i>
+              <i className="fas fa-play runtransaction udapp_runTxs udapp_icon" title="Run Transactions" aria-hidden="true" onClick={handleClickRunButton}></i>
+            </div>
+          </div>
+        </TreeViewItem>
+      </TreeView>
+    </div>
+  )
+}
diff --git a/libs/remix-ui/run-tab/src/lib/css/card.css b/libs/remix-ui/run-tab/src/lib/css/card.css
new file mode 100644
index 0000000000..1decf7c720
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/css/card.css
@@ -0,0 +1,12 @@
+.udapp_cardContainer {
+  padding             : 0 24px 16px;
+  margin              : 0;
+  background          : none;
+}
+.udapp_arrow {
+  font-weight         : bold;
+  cursor              : pointer;
+  font-size           : 14px;
+}
+.udapp_arrow:hover {
+}
\ No newline at end of file
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
index 7884813a81..105f832954 100644
--- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -1,6 +1,7 @@
 // eslint-disable-next-line no-use-before-define
 import React, { useState } from 'react'
 import { ContractDropdownUI } from './components/contractDropdownUI'
+import { RecorderUI } from './components/recorderCardUI'
 import { SettingsUI } from './components/settingsUI'
 import './css/run-tab.css'
 import { RunTabProps } from './types'
@@ -17,8 +18,8 @@ export function RunTabUI (props: RunTabProps) {
       <div className="list-group list-group-flush">
         <SettingsUI selectExEnv={selectExEnv} updateExEnv={updateExEnv} />
         <ContractDropdownUI exEnvironment={selectExEnv} />
-        {/* ${this.recorderCard.render()}
-        ${this.instanceContainer} */}
+        <RecorderUI />
+        {/* ${this.instanceContainer} */}
       </div>
     </div>
   )
diff --git a/libs/remix-ui/run-tab/src/lib/types/index.ts b/libs/remix-ui/run-tab/src/lib/types/index.ts
index c5172863a2..7b2555a300 100644
--- a/libs/remix-ui/run-tab/src/lib/types/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/index.ts
@@ -30,3 +30,7 @@ export interface ValueProps {
 export interface ContractDropdownProps {
   exEnvironment: string
 }
+
+export interface RecorderProps {
+
+}
diff --git a/libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx b/libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx
index c570de5f07..e03e624977 100644
--- a/libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx
+++ b/libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx
@@ -4,7 +4,7 @@ import { TreeViewItemProps } from '../../types'
 import './tree-view-item.css'
 
 export const TreeViewItem = (props: TreeViewItemProps) => {
-  const { id, children, label, labelClass, expand, iconX = 'fas fa-caret-right', iconY = 'fas fa-caret-down', icon, controlBehaviour = false, innerRef, ...otherProps } = props
+  const { id, children, label, labelClass, expand, iconX = 'fas fa-caret-right', iconY = 'fas fa-caret-down', icon, controlBehaviour = false, innerRef, showIcon = true, ...otherProps } = props
   const [isExpanded, setIsExpanded] = useState(false)
 
   useEffect(() => {
@@ -14,7 +14,7 @@ export const TreeViewItem = (props: TreeViewItemProps) => {
   return (
     <li ref={innerRef} 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 ${labelClass}`} onClick={() => !controlBehaviour && setIsExpanded(!isExpanded)}>
-        { children ? <div className={isExpanded ? `px-1 ${iconY} caret caret_tv` : `px-1 ${iconX} caret caret_tv`} style={{ visibility: children ? 'visible' : 'hidden' }}></div> : icon ? <div className={`pr-3 pl-1 ${icon} caret caret_tv`}></div> : null }
+        { children && showIcon ? <div className={isExpanded ? `px-1 ${iconY} caret caret_tv` : `px-1 ${iconX} caret caret_tv`} style={{ visibility: children ? 'visible' : 'hidden' }}></div> : icon ? <div className={`pr-3 pl-1 ${icon} caret caret_tv`}></div> : null }
         <span className='w-100 pl-1'>
           { label }
         </span>
diff --git a/libs/remix-ui/tree-view/src/types/index.ts b/libs/remix-ui/tree-view/src/types/index.ts
index 1c91934c76..4f6bfc9e02 100644
--- a/libs/remix-ui/tree-view/src/types/index.ts
+++ b/libs/remix-ui/tree-view/src/types/index.ts
@@ -21,5 +21,6 @@ export interface TreeViewItemProps {
     controlBehaviour?: boolean
     innerRef?: any,
     onContextMenu?: (...args: any) => void,
-    onBlur?: (...args: any) => void
+    onBlur?: (...args: any) => void,
+    showIcon?: boolean
 }

From f5b1fbef38b7f172f087aa8359298f2dbe37abe8 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Mon, 8 Nov 2021 14:57:01 +0100
Subject: [PATCH 111/168] Bootstrap instance container

---
 .../lib/components/instanceContainerUI.tsx    | 26 +++++++++++++++++++
 libs/remix-ui/run-tab/src/lib/run-tab.tsx     |  3 ++-
 libs/remix-ui/run-tab/src/lib/types/index.ts  |  4 +++
 3 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx

diff --git a/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx b/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
new file mode 100644
index 0000000000..1f3cba0406
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
@@ -0,0 +1,26 @@
+// eslint-disable-next-line no-use-before-define
+import React from 'react'
+import { InstanceContainerProps } from '../types'
+
+export function InstanceContainerUI (props: InstanceContainerProps) {
+  const clearInstance = () => {
+    // this.instanceContainer.innerHTML = '' // clear the instances list
+    // this.instanceContainer.appendChild(instanceContainerTitle)
+    // this.instanceContainer.appendChild(this.noInstancesText)
+  }
+
+  return (
+    <div className="udapp_instanceContainer border-0 list-group-item">
+      <div className="d-flex justify-content-between align-items-center pl-2 ml-1 mb-2"
+        title="Autogenerated generic user interfaces for interaction with deployed contracts">
+        Deployed Contracts
+        <i className="mr-2 udapp_icon far fa-trash-alt" data-id="deployAndRunClearInstances" onClick={clearInstance}
+          title="Clear instances list and reset recorder" aria-hidden="true">
+        </i>
+      </div>
+      <span className="mx-2 mt-3 alert alert-warning" data-id="deployAndRunNoInstanceText" role="alert">
+        Currently you have no contract instances to interact with.
+      </span>
+    </div>
+  )
+}
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
index 105f832954..fd04b5ef22 100644
--- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -1,6 +1,7 @@
 // eslint-disable-next-line no-use-before-define
 import React, { useState } from 'react'
 import { ContractDropdownUI } from './components/contractDropdownUI'
+import { InstanceContainerUI } from './components/instanceContainerUI'
 import { RecorderUI } from './components/recorderCardUI'
 import { SettingsUI } from './components/settingsUI'
 import './css/run-tab.css'
@@ -19,7 +20,7 @@ export function RunTabUI (props: RunTabProps) {
         <SettingsUI selectExEnv={selectExEnv} updateExEnv={updateExEnv} />
         <ContractDropdownUI exEnvironment={selectExEnv} />
         <RecorderUI />
-        {/* ${this.instanceContainer} */}
+        <InstanceContainerUI />
       </div>
     </div>
   )
diff --git a/libs/remix-ui/run-tab/src/lib/types/index.ts b/libs/remix-ui/run-tab/src/lib/types/index.ts
index 7b2555a300..7aa1b7caef 100644
--- a/libs/remix-ui/run-tab/src/lib/types/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/index.ts
@@ -34,3 +34,7 @@ export interface ContractDropdownProps {
 export interface RecorderProps {
 
 }
+
+export interface InstanceContainerProps {
+
+}

From 8dd8ab4259f5f44c35b58fd4df216b61311bfc60 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Mon, 8 Nov 2021 17:44:46 +0100
Subject: [PATCH 112/168] Load accounts list

---
 .../helper/src/lib/remix-ui-helper.ts         |  7 ++
 .../remix-ui/run-tab/src/lib/actions/index.ts | 62 +++++++++++--
 .../run-tab/src/lib/actions/payload.ts        | 19 ++++
 .../run-tab/src/lib/components/settingsUI.tsx | 19 ----
 .../run-tab/src/lib/reducers/runTab.ts        | 90 +++++++++++++++++++
 libs/remix-ui/run-tab/src/lib/run-tab.tsx     |  9 +-
 6 files changed, 181 insertions(+), 25 deletions(-)
 create mode 100644 libs/remix-ui/run-tab/src/lib/actions/payload.ts
 create mode 100644 libs/remix-ui/run-tab/src/lib/reducers/runTab.ts

diff --git a/libs/remix-ui/helper/src/lib/remix-ui-helper.ts b/libs/remix-ui/helper/src/lib/remix-ui-helper.ts
index b082c408a5..8d16ecc734 100644
--- a/libs/remix-ui/helper/src/lib/remix-ui-helper.ts
+++ b/libs/remix-ui/helper/src/lib/remix-ui-helper.ts
@@ -8,6 +8,7 @@ export const extractNameFromKey = (key: string): string => {
 export const extractParentFromKey = (key: string):string => {
   if (!key) return
   const keyPath = key.split('/')
+
   keyPath.pop()
 
   return keyPath.join('/')
@@ -66,3 +67,9 @@ export const getPathIcon = (path: string) => {
 export const isNumeric = (value) => {
   return /^\+?(0|[1-9]\d*)$/.test(value)
 }
+
+export const shortenAddress = (address, etherBalance) => {
+  const len = address.length
+
+  return address.slice(0, 5) + '...' + address.slice(len - 5, len) + (etherBalance ? ' (' + etherBalance.toString() + ' ether)' : '')
+}
diff --git a/libs/remix-ui/run-tab/src/lib/actions/index.ts b/libs/remix-ui/run-tab/src/lib/actions/index.ts
index 85f0ddb18d..01fd1f548c 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/index.ts
@@ -1,8 +1,60 @@
+import { shortenAddress } from '@remix-ui/helper'
+import React from 'react'
+import { fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess } from './payload'
+
 let plugin, dispatch: React.Dispatch<any>
 
-const initSettingsTab = (udapp) => async (reducerDispatch: React.Dispatch<any>) => {
-  plugin = udapp
-  dispatch = reducerDispatch
+export const initSettingsTab = (udapp) => async (reducerDispatch: React.Dispatch<any>) => {
+  if (udapp) {
+    plugin = udapp
+    dispatch = reducerDispatch
+    setupEvents()
+    setInterval(() => {
+      fillAccountsList()
+    }, 1000)
+
+    fillAccountsList()
+  }
+}
+
+const setupEvents = () => {
+  plugin.blockchain.events.on('newTransaction', (tx, receipt) => {
+    plugin.emit('newTransaction', tx, receipt)
+  })
+
+  plugin.blockchain.event.register('transactionExecuted', (error, from, to, data, lookupOnly, txResult) => {
+    // if (!lookupOnly) this.el.querySelector('#value').value = 0
+    if (error) return
+    updateAccountBalances()
+  })
+
+  const updateAccountBalances = () => {
+    // const accounts = $(this.el.querySelector('#txorigin')).children('option')
+
+    // accounts.each((index, account) => {
+    //   plugin.blockchain.getBalanceInEther(account.value, (err, balance) => {
+    //     if (err) return
+    //     const updated = shortenAddress(account.value, balance)
+
+    //     if (updated !== account.innerText) { // check if the balance has been updated and update UI accordingly.
+    //       account.innerText = updated
+    //     }
+    //   })
+    // })
+  }
+}
+
+const fillAccountsList = async () => {
+  try {
+    dispatch(fetchAccountsListRequest())
+    const promise = plugin.blockchain.getAccounts()
 
-  
-}
\ No newline at end of file
+    promise.then((accounts: string[]) => {
+      dispatch(fetchAccountsListSuccess(accounts))
+    }).catch((e) => {
+      dispatch(fetchAccountsListFailed(e.message))
+    })
+  } catch (e) {
+    // addTooltip(`Cannot get account list: ${e}`)
+  }
+}
diff --git a/libs/remix-ui/run-tab/src/lib/actions/payload.ts b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
new file mode 100644
index 0000000000..ec8db31d45
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
@@ -0,0 +1,19 @@
+export const fetchAccountsListRequest = () => {
+  return {
+    type: 'FETCH_ACCOUNTS_LIST_REQUEST'
+  }
+}
+
+export const fetchAccountsListSuccess = (accounts: string[]) => {
+  return {
+    type: 'FETCH_ACCOUNTS_LIST_SUCCESS',
+    payload: accounts
+  }
+}
+
+export const fetchAccountsListFailed = (error: string) => {
+  return {
+    type: 'FETCH_ACCOUNTS_LIST_FAILED',
+    payload: error
+  }
+}
diff --git a/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx b/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
index 2acaa0febf..d429e81cb4 100644
--- a/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
@@ -13,11 +13,6 @@ export function SettingsUI (props: SettingsProps) {
   //   this.event = new EventManager()
   //   this._components = {}
 
-  //   this.blockchain.event.register('transactionExecuted', (error, from, to, data, lookupOnly, txResult) => {
-  //     if (!lookupOnly) this.el.querySelector('#value').value = 0
-  //     if (error) return
-  //     this.updateAccountBalances()
-  //   })
   //   this._components = {
   //     registry: globalRegistry,
   //     networkModule: networkModule
@@ -37,20 +32,6 @@ export function SettingsUI (props: SettingsProps) {
   //   this.loadedAccounts = {}
   // }
 
-  // updateAccountBalances () {
-  //   if (!this.el) return
-  //   var accounts = $(this.el.querySelector('#txorigin')).children('option')
-  //   accounts.each((index, account) => {
-  //     this.blockchain.getBalanceInEther(account.value, (err, balance) => {
-  //       if (err) return
-  //       const updated = helper.shortenAddress(account.value, balance)
-  //       if (updated !== account.innerText) { // check if the balance has been updated and update UI accordingly.
-  //         account.innerText = updated
-  //       }
-  //     })
-  //   })
-  // }
-
   // setExecutionContext (context) {
   //   this.blockchain.changeExecutionContext(context, () => {
   //     modalDialogCustom.prompt('External node request', this.web3ProviderDialogBody(), 'http://127.0.0.1:8545', (target) => {
diff --git a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
new file mode 100644
index 0000000000..c2207cd04a
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
@@ -0,0 +1,90 @@
+interface Action {
+  type: string
+  payload: any
+}
+
+export interface RunTabState {
+  accounts: {
+    loadedAccounts: Record<string, any>,
+    isRequesting: boolean,
+    isSuccessful: boolean,
+    error: null
+  }
+}
+
+export const runTabInitialState = {
+  accounts: {
+    loadedAccounts: {},
+    isRequesting: false,
+    isSuccessful: false,
+    error: null
+  }
+}
+
+export const runTabReducer = (state: RunTabState = runTabInitialState, action: Action) => {
+  switch (action.type) {
+    case 'FETCH_ACCOUNTS_LIST_REQUEST': {
+      return {
+        ...state,
+        accounts: {
+          ...state.accounts,
+          isRequesting: true,
+          isSuccessful: false,
+          error: null
+        }
+      }
+    }
+    case 'FETCH_ACCOUNTS_LIST_SUCCESS': {
+      const payload: string[] = action.payload as string[]
+
+      return {
+        ...state,
+        accounts: {
+          ...state.accounts,
+          loadedAccounts: resolveAccountsList(state, payload),
+          isSuccessful: true,
+          isRequesting: false,
+          error: null
+        }
+      }
+    }
+    case 'FETCH_ACCOUNTS_LIST_FAILED': {
+      const payload = action.payload as string
+
+      return {
+        ...state,
+        accounts: {
+          ...state.accounts,
+          isRequesting: false,
+          isSuccessful: false,
+          error: payload
+        }
+      }
+    }
+    default:
+      return state
+  }
+}
+
+// TODO: unclear what's the goal of accountListCallId, feels like it can be simplified
+const resolveAccountsList = async (state: RunTabState, accounts: string[]) => {
+  // const txOrigin = this.el.querySelector('#txorigin')
+  const loadedAccounts = state.accounts.loadedAccounts
+
+  if (!accounts) accounts = []
+  for (const loadedaddress in loadedAccounts) {
+    if (accounts.indexOf(loadedaddress) === -1) {
+      // txOrigin.removeChild(txOrigin.querySelector('option[value="' + loadedaddress + '"]'))
+      delete loadedAccounts[loadedaddress]
+    }
+  }
+  for (const i in accounts) {
+    const address = accounts[i]
+    if (!loadedAccounts[address]) {
+      // txOrigin.appendChild(yo`<option value="${address}" >${address}</option>`)
+      loadedAccounts[address] = 1
+    }
+  }
+  return loadedAccounts
+  // txOrigin.setAttribute('value', accounts[0])
+}
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
index fd04b5ef22..9d78273659 100644
--- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -1,14 +1,21 @@
 // eslint-disable-next-line no-use-before-define
-import React, { useState } from 'react'
+import React, { useState, useEffect, useReducer } from 'react'
+import { initSettingsTab } from './actions'
 import { ContractDropdownUI } from './components/contractDropdownUI'
 import { InstanceContainerUI } from './components/instanceContainerUI'
 import { RecorderUI } from './components/recorderCardUI'
 import { SettingsUI } from './components/settingsUI'
 import './css/run-tab.css'
+import { runTabInitialState, runTabReducer } from './reducers/runTab'
 import { RunTabProps } from './types'
 
 export function RunTabUI (props: RunTabProps) {
   const [selectExEnv, setSelectExEnv] = useState<string>('')
+  const [runTab, runTabDispatch] = useReducer(runTabReducer, runTabInitialState)
+
+  useEffect(() => {
+    initSettingsTab(props.plugin)(runTabDispatch)
+  }, [])
 
   const updateExEnv = (env: string) => {
     setSelectExEnv(env)

From 87aea627b61eca03e7f54399a7630c772c23c2d7 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Wed, 10 Nov 2021 15:40:01 +0100
Subject: [PATCH 113/168] preinit blockchain events

---
 apps/remix-ide/src/app/udapp/run-tab.js       | 30 ----------
 .../remix-ui/run-tab/src/lib/actions/index.ts | 59 ++++++++++++++-----
 .../run-tab/src/lib/components/account.tsx    | 41 ++++---------
 .../run-tab/src/lib/components/settingsUI.tsx |  2 +-
 .../run-tab/src/lib/reducers/runTab.ts        |  2 +-
 libs/remix-ui/run-tab/src/lib/run-tab.tsx     |  2 +-
 libs/remix-ui/run-tab/src/lib/types/index.ts  | 16 ++++-
 7 files changed, 71 insertions(+), 81 deletions(-)

diff --git a/apps/remix-ide/src/app/udapp/run-tab.js b/apps/remix-ide/src/app/udapp/run-tab.js
index 169a3a20f8..c99bfc2493 100644
--- a/apps/remix-ide/src/app/udapp/run-tab.js
+++ b/apps/remix-ide/src/app/udapp/run-tab.js
@@ -4,10 +4,7 @@ import { RunTabUI } from '@remix-ui/run-tab'
 import { ViewPlugin } from '@remixproject/engine-web'
 import * as packageJson from '../../../../../package.json'
 
-const $ = require('jquery')
 const yo = require('yo-yo')
-const ethJSUtil = require('ethereumjs-util')
-const Web3 = require('web3')
 const EventManager = require('../../lib/events')
 const Card = require('../ui/card')
 
@@ -220,33 +217,6 @@ export class RunTab extends ViewPlugin {
   render () {
     return this.el
     this.udappUI = new UniversalDAppUI(this.blockchain, this.logCallback)
-    this.blockchain.resetAndInit(this.config, {
-      getAddress: (cb) => {
-        cb(null, $('#txorigin').val())
-      },
-      getValue: (cb) => {
-        try {
-          const number = document.querySelector('#value').value
-          const select = document.getElementById('unit')
-          const index = select.selectedIndex
-          const selectedUnit = select.querySelectorAll('option')[index].dataset.unit
-          let unit = 'ether' // default
-          if (['ether', 'finney', 'gwei', 'wei'].indexOf(selectedUnit) >= 0) {
-            unit = selectedUnit
-          }
-          cb(null, Web3.utils.toWei(number, unit))
-        } catch (e) {
-          cb(e)
-        }
-      },
-      getGasLimit: (cb) => {
-        try {
-          cb(null, '0x' + new ethJSUtil.BN($('#gasLimit').val(), 10).toString(16))
-        } catch (e) {
-          cb(e.message)
-        }
-      }
-    })
     this.renderInstanceContainer()
     this.renderSettings()
     this.renderDropdown(this.udappUI, this.fileManager, this.compilersArtefacts, this.config, this.editor, this.logCallback)
diff --git a/libs/remix-ui/run-tab/src/lib/actions/index.ts b/libs/remix-ui/run-tab/src/lib/actions/index.ts
index 01fd1f548c..cfc4e3c53f 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/index.ts
@@ -1,5 +1,7 @@
-import { shortenAddress } from '@remix-ui/helper'
 import React from 'react'
+import { shortenAddress } from '@remix-ui/helper'
+import * as ethJSUtil from 'ethereumjs-util'
+import Web3 from 'web3'
 import { fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess } from './payload'
 
 let plugin, dispatch: React.Dispatch<any>
@@ -9,11 +11,10 @@ export const initSettingsTab = (udapp) => async (reducerDispatch: React.Dispatch
     plugin = udapp
     dispatch = reducerDispatch
     setupEvents()
+
     setInterval(() => {
       fillAccountsList()
     }, 1000)
-
-    fillAccountsList()
   }
 }
 
@@ -28,20 +29,48 @@ const setupEvents = () => {
     updateAccountBalances()
   })
 
-  const updateAccountBalances = () => {
-    // const accounts = $(this.el.querySelector('#txorigin')).children('option')
+  plugin.blockchain.resetAndInit(plugin.config, {
+    getAddress: (cb) => {
+      cb(null, $('#txorigin').val())
+    },
+    getValue: (cb) => {
+      try {
+        const number = document.querySelector('#value').value
+        const select = document.getElementById('unit')
+        const index = select.selectedIndex
+        const selectedUnit = select.querySelectorAll('option')[index].dataset.unit
+        let unit = 'ether' // default
+        if (['ether', 'finney', 'gwei', 'wei'].indexOf(selectedUnit) >= 0) {
+          unit = selectedUnit
+        }
+        cb(null, Web3.utils.toWei(number, unit))
+      } catch (e) {
+        cb(e)
+      }
+    },
+    getGasLimit: (cb) => {
+      try {
+        cb(null, '0x' + new ethJSUtil.BN($('#gasLimit').val(), 10).toString(16))
+      } catch (e) {
+        cb(e.message)
+      }
+    }
+  })
+}
 
-    // accounts.each((index, account) => {
-    //   plugin.blockchain.getBalanceInEther(account.value, (err, balance) => {
-    //     if (err) return
-    //     const updated = shortenAddress(account.value, balance)
+const updateAccountBalances = () => {
+  // const accounts = $(this.el.querySelector('#txorigin')).children('option')
 
-    //     if (updated !== account.innerText) { // check if the balance has been updated and update UI accordingly.
-    //       account.innerText = updated
-    //     }
-    //   })
-    // })
-  }
+  // accounts.each((index, account) => {
+  //   plugin.blockchain.getBalanceInEther(account.value, (err, balance) => {
+  //     if (err) return
+  //     const updated = shortenAddress(account.value, balance)
+
+  //     if (updated !== account.innerText) { // check if the balance has been updated and update UI accordingly.
+  //       account.innerText = updated
+  //     }
+  //   })
+  // })
 }
 
 const fillAccountsList = async () => {
diff --git a/libs/remix-ui/run-tab/src/lib/components/account.tsx b/libs/remix-ui/run-tab/src/lib/components/account.tsx
index f82cec8c2b..08f3a2af31 100644
--- a/libs/remix-ui/run-tab/src/lib/components/account.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/account.tsx
@@ -1,42 +1,17 @@
 // eslint-disable-next-line no-use-before-define
-import React, { useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { CopyToClipboard } from '@remix-ui/clipboard'
 import { AccountProps } from '../types'
 
 export function AccountUI (props: AccountProps) {
+  const accounts = Object.keys(props.accounts.loadedAccounts)
   const [selectedAccount, setSelectedAccount] = useState<string>('')
   const plusBtn = useRef(null)
   const plusTitle = useRef(null)
 
-  // // TODO: unclear what's the goal of accountListCallId, feels like it can be simplified
-  // async fillAccountsList () {
-  //   this.accountListCallId++
-  //   const callid = this.accountListCallId
-  //   const txOrigin = this.el.querySelector('#txorigin')
-  //   let accounts = []
-  //   try {
-  //     accounts = await this.blockchain.getAccounts()
-  //   } catch (e) {
-  //     addTooltip(`Cannot get account list: ${e}`)
-  //   }
-  //   if (!accounts) accounts = []
-  //   if (this.accountListCallId > callid) return
-  //   this.accountListCallId++
-  //   for (const loadedaddress in this.loadedAccounts) {
-  //     if (accounts.indexOf(loadedaddress) === -1) {
-  //       txOrigin.removeChild(txOrigin.querySelector('option[value="' + loadedaddress + '"]'))
-  //       delete this.loadedAccounts[loadedaddress]
-  //     }
-  //   }
-  //   for (const i in accounts) {
-  //     const address = accounts[i]
-  //     if (!this.loadedAccounts[address]) {
-  //       txOrigin.appendChild(yo`<option value="${address}" >${address}</option>`)
-  //       this.loadedAccounts[address] = 1
-  //     }
-  //   }
-  //   txOrigin.setAttribute('value', accounts[0])
-  // }
+  useEffect(() => {
+    if (!selectedAccount && accounts.length > 0) setSelectedAccount(accounts[0])
+  }, [accounts, selectedAccount])
 
   const updatePlusButton = () => {
     // enable/disable + button
@@ -140,7 +115,11 @@ export function AccountUI (props: AccountProps) {
         </span>
       </label>
       <div className="udapp_account">
-        <select id="txorigin" data-id="runTabSelectAccount" name="txorigin" className="form-control udapp_select custom-select pr-4" value={selectedAccount} onChange={(e) => { setSelectedAccount(e.target.value) }}></select>
+        <select id="txorigin" data-id="runTabSelectAccount" name="txorigin" className="form-control udapp_select custom-select pr-4" value={selectedAccount} onChange={(e) => { setSelectedAccount(e.target.value) }}>
+          {
+            Object.keys(props.accounts.loadedAccounts).map((value) => <option value={value}>{ value }</option>)
+          }
+        </select>
         <div style={{ marginLeft: -5 }}><CopyToClipboard content={selectedAccount} direction='top' /></div>
         <i id="remixRunSignMsg" data-id="settingsRemixRunSignMsg" className="mx-1 fas fa-edit udapp_icon" aria-hidden="true" onClick={signMessage} title="Sign a message using this account key"></i>
       </div>
diff --git a/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx b/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
index d429e81cb4..51137eaa90 100644
--- a/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
@@ -129,7 +129,7 @@ export function SettingsUI (props: SettingsProps) {
     <div className="udapp_settings">
       <EnvironmentUI updateExEnv={props.updateExEnv} />
       <NetworkUI />
-      <AccountUI selectExEnv={props.selectExEnv} />
+      <AccountUI selectExEnv={props.selectExEnv} accounts={props.accounts} />
       <GasPriceUI />
       <ValueUI />
     </div>
diff --git a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
index c2207cd04a..03273261f9 100644
--- a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
+++ b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
@@ -8,7 +8,7 @@ export interface RunTabState {
     loadedAccounts: Record<string, any>,
     isRequesting: boolean,
     isSuccessful: boolean,
-    error: null
+    error: string
   }
 }
 
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
index 9d78273659..0878cd01ce 100644
--- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -24,7 +24,7 @@ export function RunTabUI (props: RunTabProps) {
   return (
     <div className="udapp_runTabView run-tab" id="runTabView" data-id="runTabView">
       <div className="list-group list-group-flush">
-        <SettingsUI selectExEnv={selectExEnv} updateExEnv={updateExEnv} />
+        <SettingsUI selectExEnv={selectExEnv} updateExEnv={updateExEnv} accounts={runTab.accounts} />
         <ContractDropdownUI exEnvironment={selectExEnv} />
         <RecorderUI />
         <InstanceContainerUI />
diff --git a/libs/remix-ui/run-tab/src/lib/types/index.ts b/libs/remix-ui/run-tab/src/lib/types/index.ts
index 7aa1b7caef..9f4a2a58b7 100644
--- a/libs/remix-ui/run-tab/src/lib/types/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/index.ts
@@ -4,7 +4,13 @@ export interface RunTabProps {
 
 export interface SettingsProps {
   selectExEnv: string,
-  updateExEnv: (env: string) => void
+  updateExEnv: (env: string) => void,
+  accounts: {
+    loadedAccounts: Record<string, any>,
+    isRequesting: boolean,
+    isSuccessful: boolean,
+    error: string
+  }
 }
 
 export interface EnvironmentProps {
@@ -16,7 +22,13 @@ export interface NetworkProps {
 }
 
 export interface AccountProps {
-  selectExEnv: string
+  selectExEnv: string,
+  accounts: {
+    loadedAccounts: Record<string, any>,
+    isRequesting: boolean,
+    isSuccessful: boolean,
+    error: string
+  }
 }
 
 export interface GasPriceProps {

From b3408ad47262f3265660959a19a7ef5dff61a1af Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Fri, 12 Nov 2021 10:50:02 +0100
Subject: [PATCH 114/168] conect custom hook to run-tab UI

---
 apps/remix-ide/src/blockchain/blockchain.js   |  1 +
 .../run-tab/src/lib/actions/custom.ts         | 89 +++++++++++++++++++
 .../run-tab/src/lib/actions/payload.ts        | 31 ++++++-
 .../run-tab/src/lib/components/account.tsx    | 12 +--
 .../run-tab/src/lib/components/gasPrice.tsx   |  6 +-
 .../run-tab/src/lib/components/settingsUI.tsx |  6 +-
 .../run-tab/src/lib/components/value.tsx      |  4 +-
 .../run-tab/src/lib/reducers/runTab.ts        | 58 ++++++++++--
 libs/remix-ui/run-tab/src/lib/run-tab.tsx     | 16 ++--
 libs/remix-ui/run-tab/src/lib/types/index.ts  | 20 ++++-
 10 files changed, 211 insertions(+), 32 deletions(-)
 create mode 100644 libs/remix-ui/run-tab/src/lib/actions/custom.ts

diff --git a/apps/remix-ide/src/blockchain/blockchain.js b/apps/remix-ide/src/blockchain/blockchain.js
index f280e47d8b..b041000be9 100644
--- a/apps/remix-ide/src/blockchain/blockchain.js
+++ b/apps/remix-ide/src/blockchain/blockchain.js
@@ -414,6 +414,7 @@ class Blockchain extends Plugin {
     const self = this
     waterfall([
       function getGasLimit (next) {
+        console.log('called: ', self.transactionContextAPI.gasLimit())
         if (self.transactionContextAPI.getGasLimit) {
           return self.transactionContextAPI.getGasLimit(next)
         }
diff --git a/libs/remix-ui/run-tab/src/lib/actions/custom.ts b/libs/remix-ui/run-tab/src/lib/actions/custom.ts
new file mode 100644
index 0000000000..8b1d8b838c
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/actions/custom.ts
@@ -0,0 +1,89 @@
+// eslint-disable-next-line no-unused-vars
+import React from 'react'
+import * as ethJSUtil from 'ethereumjs-util'
+import Web3 from 'web3'
+import { shortenAddress } from '@remix-ui/helper'
+import { fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, setGasLimit, setSelectedAccount, setSendUnit, setSendValue } from './payload'
+import { runTabInitialState, runTabReducer } from '../reducers/runTab'
+
+export function useRunTabPlugin (plugin) {
+  const [runTab, dispatch] = React.useReducer(runTabReducer, runTabInitialState)
+
+  const setupEvents = () => {
+    plugin.blockchain.events.on('newTransaction', (tx, receipt) => {
+      plugin.emit('newTransaction', tx, receipt)
+    })
+
+    plugin.blockchain.event.register('transactionExecuted', (error, from, to, data, lookupOnly, txResult) => {
+      if (!lookupOnly) dispatch(setSendValue(0))
+      if (error) return
+      updateAccountBalances()
+    })
+
+    plugin.blockchain.resetAndInit(plugin.config, {
+      getAddress: (cb) => {
+        cb(null, runTab.accounts.selectedAccount)
+      },
+      getValue: (cb) => {
+        try {
+          const number = runTab.sendValue
+          const unit = runTab.sendUnit
+
+          cb(null, Web3.utils.toWei(number, unit))
+        } catch (e) {
+          cb(e)
+        }
+      },
+      getGasLimit: (cb) => {
+        try {
+          cb(null, '0x' + new ethJSUtil.BN(runTab.gasLimit, 10).toString(16))
+        } catch (e) {
+          cb(e.message)
+        }
+      }
+    })
+    console.log('called: reset and init')
+  }
+
+  const updateAccountBalances = () => {
+    const accounts = runTab.accounts.loadedAccounts
+
+    Object.keys(accounts).map((value) => {
+      plugin.blockchain.getBalanceInEther(value, (err, balance) => {
+        if (err) return
+        const updated = shortenAddress(value, balance)
+
+        accounts[value] = updated
+      })
+    })
+  }
+
+  const fillAccountsList = async () => {
+    try {
+      dispatch(fetchAccountsListRequest())
+      const promise = plugin.blockchain.getAccounts()
+
+      promise.then((accounts: string[]) => {
+        dispatch(fetchAccountsListSuccess(accounts))
+      }).catch((e) => {
+        dispatch(fetchAccountsListFailed(e.message))
+      })
+    } catch (e) {
+      // addTooltip(`Cannot get account list: ${e}`)
+    }
+  }
+
+  const setAccount = (account: string) => {
+    dispatch(setSelectedAccount(account))
+  }
+
+  const setUnit = (unit: 'ether' | 'finney' | 'gwei' | 'wei') => {
+    dispatch(setSendUnit(unit))
+  }
+
+  const setGasFee = (value: number) => {
+    dispatch(setGasLimit(value))
+  }
+
+  return { runTab, setupEvents, fillAccountsList, setAccount, setUnit, setGasFee }
+}
diff --git a/libs/remix-ui/run-tab/src/lib/actions/payload.ts b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
index ec8db31d45..8d7e29efd6 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/payload.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
@@ -1,6 +1,7 @@
 export const fetchAccountsListRequest = () => {
   return {
-    type: 'FETCH_ACCOUNTS_LIST_REQUEST'
+    type: 'FETCH_ACCOUNTS_LIST_REQUEST',
+    payload: null
   }
 }
 
@@ -17,3 +18,31 @@ export const fetchAccountsListFailed = (error: string) => {
     payload: error
   }
 }
+
+export const setSendValue = (value: number) => {
+  return {
+    type: 'SET_SEND_VALUE',
+    payload: value
+  }
+}
+
+export const setSelectedAccount = (account: string) => {
+  return {
+    type: 'SET_SELECTED_ACCOUNT',
+    payload: account
+  }
+}
+
+export const setSendUnit = (unit: 'ether' | 'finney' | 'gwei' | 'wei') => {
+  return {
+    type: 'SET_SEND_UNIT',
+    payload: unit
+  }
+}
+
+export const setGasLimit = (gasLimit: number) => {
+  return {
+    type: 'SET_GAS_LIMIT',
+    payload: gasLimit
+  }
+}
diff --git a/libs/remix-ui/run-tab/src/lib/components/account.tsx b/libs/remix-ui/run-tab/src/lib/components/account.tsx
index 08f3a2af31..449d4c6448 100644
--- a/libs/remix-ui/run-tab/src/lib/components/account.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/account.tsx
@@ -1,16 +1,16 @@
 // eslint-disable-next-line no-use-before-define
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { CopyToClipboard } from '@remix-ui/clipboard'
 import { AccountProps } from '../types'
 
 export function AccountUI (props: AccountProps) {
-  const accounts = Object.keys(props.accounts.loadedAccounts)
-  const [selectedAccount, setSelectedAccount] = useState<string>('')
+  const { selectedAccount, loadedAccounts } = props.accounts
+  const accounts = Object.keys(loadedAccounts)
   const plusBtn = useRef(null)
   const plusTitle = useRef(null)
 
   useEffect(() => {
-    if (!selectedAccount && accounts.length > 0) setSelectedAccount(accounts[0])
+    if (!selectedAccount && accounts.length > 0) props.setAccount(accounts[0])
   }, [accounts, selectedAccount])
 
   const updatePlusButton = () => {
@@ -115,9 +115,9 @@ export function AccountUI (props: AccountProps) {
         </span>
       </label>
       <div className="udapp_account">
-        <select id="txorigin" data-id="runTabSelectAccount" name="txorigin" className="form-control udapp_select custom-select pr-4" value={selectedAccount} onChange={(e) => { setSelectedAccount(e.target.value) }}>
+        <select id="txorigin" data-id="runTabSelectAccount" name="txorigin" className="form-control udapp_select custom-select pr-4" value={selectedAccount} onChange={(e) => { props.setAccount(e.target.value) }}>
           {
-            Object.keys(props.accounts.loadedAccounts).map((value) => <option value={value}>{ value }</option>)
+            Object.keys(loadedAccounts).map((value) => <option value={value}>{ loadedAccounts[value] }</option>)
           }
         </select>
         <div style={{ marginLeft: -5 }}><CopyToClipboard content={selectedAccount} direction='top' /></div>
diff --git a/libs/remix-ui/run-tab/src/lib/components/gasPrice.tsx b/libs/remix-ui/run-tab/src/lib/components/gasPrice.tsx
index f357659971..19e7876a75 100644
--- a/libs/remix-ui/run-tab/src/lib/components/gasPrice.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/gasPrice.tsx
@@ -3,10 +3,14 @@ import React from 'react'
 import { GasPriceProps } from '../types'
 
 export function GasPriceUI (props: GasPriceProps) {
+  const handleGasLimit = (e) => {
+    props.setGasFee(e.target.value)
+  }
+
   return (
     <div className="udapp_crow">
       <label className="udapp_settingsLabel">Gas limit</label>
-      <input type="number" className="form-control udapp_gasNval udapp_col2" id="gasLimit" defaultValue="3000000" />
+      <input type="number" className="form-control udapp_gasNval udapp_col2" id="gasLimit" value={props.gasLimit} onChange={handleGasLimit} />
     </div>
   )
 }
diff --git a/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx b/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
index 51137eaa90..87f127fbb3 100644
--- a/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
@@ -129,9 +129,9 @@ export function SettingsUI (props: SettingsProps) {
     <div className="udapp_settings">
       <EnvironmentUI updateExEnv={props.updateExEnv} />
       <NetworkUI />
-      <AccountUI selectExEnv={props.selectExEnv} accounts={props.accounts} />
-      <GasPriceUI />
-      <ValueUI />
+      <AccountUI selectExEnv={props.selectExEnv} accounts={props.accounts} setAccount={props.setAccount} />
+      <GasPriceUI gasLimit={props.gasLimit} setGasFee={props.setGasFee} />
+      <ValueUI setUnit={props.setUnit} sendValue={props.sendValue} sendUnit={props.sendUnit} />
     </div>
   )
 }
diff --git a/libs/remix-ui/run-tab/src/lib/components/value.tsx b/libs/remix-ui/run-tab/src/lib/components/value.tsx
index 205e4137f8..1793827985 100644
--- a/libs/remix-ui/run-tab/src/lib/components/value.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/value.tsx
@@ -52,12 +52,12 @@ export function ValueUI (props: ValueProps) {
           className="form-control udapp_gasNval udapp_col2"
           id="value"
           data-id="dandrValue"
-          value="0"
+          value={props.sendValue}
           title="Enter the value and choose the unit"
           onKeyPress={validateInputKey}
           onChange={validateValue}
         />
-        <select name="unit" className="form-control p-1 udapp_gasNvalUnit udapp_col2_2 custom-select" id="unit">
+        <select name="unit" value={props.sendUnit} className="form-control p-1 udapp_gasNvalUnit udapp_col2_2 custom-select" id="unit" onChange={(e) => { props.setUnit((e.target.value) as 'ether' | 'finney' | 'gwei' | 'wei') }}>
           <option data-unit="wei">Wei</option>
           <option data-unit="gwei">Gwei</option>
           <option data-unit="finney">Finney</option>
diff --git a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
index 03273261f9..d6606a2c2f 100644
--- a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
+++ b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
@@ -8,17 +8,25 @@ export interface RunTabState {
     loadedAccounts: Record<string, any>,
     isRequesting: boolean,
     isSuccessful: boolean,
-    error: string
-  }
+    error: string,
+    selectedAccount: string
+  },
+  sendValue: string,
+  sendUnit: 'ether' | 'finney' | 'gwei' | 'wei',
+  gasLimit: number
 }
 
-export const runTabInitialState = {
+export const runTabInitialState: RunTabState = {
   accounts: {
     loadedAccounts: {},
     isRequesting: false,
     isSuccessful: false,
-    error: null
-  }
+    error: null,
+    selectedAccount: ''
+  },
+  sendValue: '0',
+  sendUnit: 'ether',
+  gasLimit: 3000000
 }
 
 export const runTabReducer = (state: RunTabState = runTabInitialState, action: Action) => {
@@ -61,6 +69,42 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
         }
       }
     }
+    case 'SET_SEND_VALUE': {
+      const payload = action.payload as string
+
+      return {
+        ...state,
+        sendValue: payload
+      }
+    }
+    case 'SET_SELECTED_ACCOUNT': {
+      const payload = action.payload as string
+
+      return {
+        ...state,
+        accounts: {
+          ...state.accounts,
+          selectedAccount: payload
+        }
+      }
+    }
+    case 'SET_SEND_UNIT': {
+      const payload = action.payload as 'ether' | 'finney' | 'gwei' | 'wei'
+
+      return {
+        ...state,
+        sendUnit: payload
+      }
+    }
+
+    case 'SET_GAS_LIMIT': {
+      const payload = action.payload as number
+
+      return {
+        ...state,
+        gasLimit: payload
+      }
+    }
     default:
       return state
   }
@@ -68,23 +112,19 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
 
 // TODO: unclear what's the goal of accountListCallId, feels like it can be simplified
 const resolveAccountsList = async (state: RunTabState, accounts: string[]) => {
-  // const txOrigin = this.el.querySelector('#txorigin')
   const loadedAccounts = state.accounts.loadedAccounts
 
   if (!accounts) accounts = []
   for (const loadedaddress in loadedAccounts) {
     if (accounts.indexOf(loadedaddress) === -1) {
-      // txOrigin.removeChild(txOrigin.querySelector('option[value="' + loadedaddress + '"]'))
       delete loadedAccounts[loadedaddress]
     }
   }
   for (const i in accounts) {
     const address = accounts[i]
     if (!loadedAccounts[address]) {
-      // txOrigin.appendChild(yo`<option value="${address}" >${address}</option>`)
       loadedAccounts[address] = 1
     }
   }
   return loadedAccounts
-  // txOrigin.setAttribute('value', accounts[0])
 }
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
index 0878cd01ce..9d311dfe14 100644
--- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -1,20 +1,24 @@
 // eslint-disable-next-line no-use-before-define
-import React, { useState, useEffect, useReducer } from 'react'
-import { initSettingsTab } from './actions'
+import React, { useState, useEffect } from 'react'
+import { useRunTabPlugin } from './actions/custom'
 import { ContractDropdownUI } from './components/contractDropdownUI'
 import { InstanceContainerUI } from './components/instanceContainerUI'
 import { RecorderUI } from './components/recorderCardUI'
 import { SettingsUI } from './components/settingsUI'
 import './css/run-tab.css'
-import { runTabInitialState, runTabReducer } from './reducers/runTab'
 import { RunTabProps } from './types'
 
 export function RunTabUI (props: RunTabProps) {
+  const { runTab, setupEvents, fillAccountsList, setAccount, setUnit, setGasFee } = useRunTabPlugin(props.plugin)
   const [selectExEnv, setSelectExEnv] = useState<string>('')
-  const [runTab, runTabDispatch] = useReducer(runTabReducer, runTabInitialState)
 
   useEffect(() => {
-    initSettingsTab(props.plugin)(runTabDispatch)
+    setupEvents()
+
+    setInterval(() => {
+      fillAccountsList()
+    }, 1000)
+    fillAccountsList()
   }, [])
 
   const updateExEnv = (env: string) => {
@@ -24,7 +28,7 @@ export function RunTabUI (props: RunTabProps) {
   return (
     <div className="udapp_runTabView run-tab" id="runTabView" data-id="runTabView">
       <div className="list-group list-group-flush">
-        <SettingsUI selectExEnv={selectExEnv} updateExEnv={updateExEnv} accounts={runTab.accounts} />
+        <SettingsUI selectExEnv={selectExEnv} updateExEnv={updateExEnv} accounts={runTab.accounts} setAccount={setAccount} setUnit={setUnit} sendValue={runTab.sendValue} sendUnit={runTab.sendUnit} gasLimit={runTab.gasLimit} setGasFee={setGasFee} />
         <ContractDropdownUI exEnvironment={selectExEnv} />
         <RecorderUI />
         <InstanceContainerUI />
diff --git a/libs/remix-ui/run-tab/src/lib/types/index.ts b/libs/remix-ui/run-tab/src/lib/types/index.ts
index 9f4a2a58b7..0dd3da14d3 100644
--- a/libs/remix-ui/run-tab/src/lib/types/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/index.ts
@@ -7,10 +7,17 @@ export interface SettingsProps {
   updateExEnv: (env: string) => void,
   accounts: {
     loadedAccounts: Record<string, any>,
+    selectedAccount: string,
     isRequesting: boolean,
     isSuccessful: boolean,
     error: string
-  }
+  },
+  setAccount: (account: string) => void,
+  setUnit: (unit: 'ether' | 'finney' | 'gwei' | 'wei') => void,
+  sendValue: string,
+  sendUnit: string,
+  gasLimit: number,
+  setGasFee: (value: number) => void
 }
 
 export interface EnvironmentProps {
@@ -25,18 +32,23 @@ export interface AccountProps {
   selectExEnv: string,
   accounts: {
     loadedAccounts: Record<string, any>,
+    selectedAccount: string,
     isRequesting: boolean,
     isSuccessful: boolean,
     error: string
-  }
+  },
+  setAccount: (account: string) => void
 }
 
 export interface GasPriceProps {
-
+  gasLimit: number,
+  setGasFee: (value: number) => void
 }
 
 export interface ValueProps {
-
+  setUnit: (unit: 'ether' | 'finney' | 'gwei' | 'wei') => void,
+  sendValue: string,
+  sendUnit: string
 }
 
 export interface ContractDropdownProps {

From d7d3b038c82c83e3ffc8b15af89f355b19f65abe Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Mon, 15 Nov 2021 17:01:44 +0100
Subject: [PATCH 115/168] setup environment list and events

---
 apps/remix-ide/src/app/udapp/run-tab.js       |  23 ---
 .../run-tab/src/lib/actions/custom.ts         | 106 +++++++++-
 .../run-tab/src/lib/actions/payload.ts        |  37 +++-
 .../run-tab/src/lib/components/account.tsx    |  58 ++++--
 .../src/lib/components/environment.tsx        |  39 ++--
 .../run-tab/src/lib/components/network.tsx    |   2 +-
 .../run-tab/src/lib/components/settingsUI.tsx |  46 +----
 .../run-tab/src/lib/reducers/runTab.ts        | 185 +++++++++++++++---
 libs/remix-ui/run-tab/src/lib/run-tab.tsx     |  26 +--
 libs/remix-ui/run-tab/src/lib/types/index.ts  |  14 +-
 10 files changed, 375 insertions(+), 161 deletions(-)

diff --git a/apps/remix-ide/src/app/udapp/run-tab.js b/apps/remix-ide/src/app/udapp/run-tab.js
index c99bfc2493..d3fb7851ac 100644
--- a/apps/remix-ide/src/app/udapp/run-tab.js
+++ b/apps/remix-ide/src/app/udapp/run-tab.js
@@ -222,29 +222,6 @@ export class RunTab extends ViewPlugin {
     this.renderDropdown(this.udappUI, this.fileManager, this.compilersArtefacts, this.config, this.editor, this.logCallback)
     this.renderRecorder(this.udappUI, this.fileManager, this.config, this.logCallback)
     this.renderRecorderCard()
-
-    const addPluginProvider = (profile) => {
-      if (profile.kind === 'provider') {
-        ((profile, app) => {
-          const web3Provider = {
-            async sendAsync (payload, callback) {
-              try {
-                const result = await app.call(profile.name, 'sendAsync', payload)
-                callback(null, result)
-              } catch (e) {
-                callback(e)
-              }
-            }
-          }
-          app.blockchain.addProvider({ name: profile.displayName, provider: web3Provider })
-        })(profile, this)
-      }
-    }
-    const removePluginProvider = (profile) => {
-      if (profile.kind === 'provider') this.blockchain.removeProvider(profile.displayName)
-    }
-    this.on('manager', 'pluginActivated', addPluginProvider.bind(this))
-    this.on('manager', 'pluginDeactivated', removePluginProvider.bind(this))
     return this.renderContainer()
   }
 
diff --git a/libs/remix-ui/run-tab/src/lib/actions/custom.ts b/libs/remix-ui/run-tab/src/lib/actions/custom.ts
index 8b1d8b838c..1100411043 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/custom.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/custom.ts
@@ -3,7 +3,7 @@ import React from 'react'
 import * as ethJSUtil from 'ethereumjs-util'
 import Web3 from 'web3'
 import { shortenAddress } from '@remix-ui/helper'
-import { fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, setGasLimit, setSelectedAccount, setSendUnit, setSendValue } from './payload'
+import { addProvider, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, removeProvider, setExecutionEnvironment, setGasLimit, setNetworkName, setSelectedAccount, setSendUnit, setSendValue } from './payload'
 import { runTabInitialState, runTabReducer } from '../reducers/runTab'
 
 export function useRunTabPlugin (plugin) {
@@ -20,6 +20,26 @@ export function useRunTabPlugin (plugin) {
       updateAccountBalances()
     })
 
+    plugin.blockchain.event.register('contextChanged', (context, silent) => {
+      setFinalContext()
+    })
+
+    plugin.blockchain.event.register('networkStatus', ({ error, network }) => {
+      if (error) {
+        const netUI = 'can\'t detect network '
+        setNetworkNameFromProvider(netUI)
+
+        return
+      }
+      const networkProvider = plugin.networkModule.getNetworkProvider.bind(plugin.networkModule)
+      const netUI = (networkProvider() !== 'vm') ? `${network.name} (${network.id || '-'}) network` : ''
+
+      setNetworkNameFromProvider(netUI)
+    })
+
+    plugin.blockchain.event.register('addProvider', provider => addExternalProvider(provider))
+    plugin.blockchain.event.register('removeProvider', name => removeExternalProvider(name))
+
     plugin.blockchain.resetAndInit(plugin.config, {
       getAddress: (cb) => {
         cb(null, runTab.accounts.selectedAccount)
@@ -42,7 +62,6 @@ export function useRunTabPlugin (plugin) {
         }
       }
     })
-    console.log('called: reset and init')
   }
 
   const updateAccountBalances = () => {
@@ -56,6 +75,7 @@ export function useRunTabPlugin (plugin) {
         accounts[value] = updated
       })
     })
+    dispatch(fetchAccountsListSuccess(accounts))
   }
 
   const fillAccountsList = async () => {
@@ -64,7 +84,18 @@ export function useRunTabPlugin (plugin) {
       const promise = plugin.blockchain.getAccounts()
 
       promise.then((accounts: string[]) => {
-        dispatch(fetchAccountsListSuccess(accounts))
+        const loadedAccounts = {}
+
+        if (!accounts) accounts = []
+        accounts.forEach((account) => {
+          plugin.blockchain.getBalanceInEther(account, (err, balance) => {
+            if (err) return
+            const updated = shortenAddress(account, balance)
+
+            loadedAccounts[account] = updated
+          })
+        })
+        dispatch(fetchAccountsListSuccess(loadedAccounts))
       }).catch((e) => {
         dispatch(fetchAccountsListFailed(e.message))
       })
@@ -85,5 +116,72 @@ export function useRunTabPlugin (plugin) {
     dispatch(setGasLimit(value))
   }
 
-  return { runTab, setupEvents, fillAccountsList, setAccount, setUnit, setGasFee }
+  const addPluginProvider = (profile) => {
+    if (profile.kind === 'provider') {
+      ((profile, app) => {
+        const web3Provider = {
+          async sendAsync (payload, callback) {
+            try {
+              const result = await app.call(profile.name, 'sendAsync', payload)
+              callback(null, result)
+            } catch (e) {
+              callback(e)
+            }
+          }
+        }
+        app.blockchain.addProvider({ name: profile.displayName, provider: web3Provider })
+      })(profile, plugin)
+    }
+  }
+
+  const removePluginProvider = (profile) => {
+    if (profile.kind === 'provider') plugin.blockchain.removeProvider(profile.displayName)
+  }
+
+  const setFinalContext = () => {
+    // set the final context. Cause it is possible that this is not the one we've originaly selected
+    const value = _getProviderDropdownValue()
+
+    setExecEnv(value)
+    // this.event.trigger('clearInstance', [])
+  }
+
+  const _getProviderDropdownValue = (): string => {
+    const provider = plugin.blockchain.getProvider()
+    const fork = plugin.blockchain.getCurrentFork()
+
+    return provider === 'vm' ? provider + '-' + fork : provider
+  }
+
+  const setExecEnv = (env: string) => {
+    dispatch(setExecutionEnvironment(env))
+  }
+
+  const setNetworkNameFromProvider = (networkName: string) => {
+    dispatch(setNetworkName(networkName))
+  }
+
+  const addExternalProvider = (network) => {
+    dispatch(addProvider(network))
+    // addTooltip(yo`<span><b>${network.name}</b> provider added</span>`)
+  }
+
+  const removeExternalProvider = (name) => {
+    dispatch(removeProvider(name))
+  }
+
+  const setExecutionContext = (executionContext: { context: string, fork: string }) => {
+    plugin.blockchain.changeExecutionContext(executionContext, () => {
+      // modalDialogCustom.prompt('External node request', this.web3ProviderDialogBody(), 'http://127.0.0.1:8545', (target) => {
+      //   this.blockchain.setProviderFromEndpoint(target, context, (alertMsg) => {
+      // if (alertMsg) addTooltip(alertMsg)
+      // setFinalContext()
+      // })
+      // }, this.setFinalContext.bind(this))
+    // }, (alertMsg) => {
+      // addTooltip(alertMsg)
+    }, setFinalContext())
+  }
+
+  return { runTab, setupEvents, fillAccountsList, setAccount, setUnit, setGasFee, addPluginProvider, removePluginProvider, setExecEnv, setFinalContext, setExecutionContext }
 }
diff --git a/libs/remix-ui/run-tab/src/lib/actions/payload.ts b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
index 8d7e29efd6..5387638cc0 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/payload.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
@@ -5,7 +5,7 @@ export const fetchAccountsListRequest = () => {
   }
 }
 
-export const fetchAccountsListSuccess = (accounts: string[]) => {
+export const fetchAccountsListSuccess = (accounts: Record<string, string>) => {
   return {
     type: 'FETCH_ACCOUNTS_LIST_SUCCESS',
     payload: accounts
@@ -46,3 +46,38 @@ export const setGasLimit = (gasLimit: number) => {
     payload: gasLimit
   }
 }
+
+export const setExecutionEnvironment = (executionEnvironment: string) => {
+  return {
+    type: 'SET_EXECUTION_ENVIRONMENT',
+    payload: executionEnvironment
+  }
+}
+
+export const setPersonalMode = (mode: boolean) => {
+  return {
+    type: 'SET_PERSONAL_MODE',
+    payload: mode
+  }
+}
+
+export const setNetworkName = (networkName: string) => {
+  return {
+    type: 'SET_NETWORK_NAME',
+    payload: networkName
+  }
+}
+
+export const addProvider = (provider: string) => {
+  return {
+    type: 'ADD_PROVIDER',
+    payload: provider
+  }
+}
+
+export const removeProvider = (provider: string) => {
+  return {
+    type: 'REMOVE_PROVIDER',
+    payload: provider
+  }
+}
diff --git a/libs/remix-ui/run-tab/src/lib/components/account.tsx b/libs/remix-ui/run-tab/src/lib/components/account.tsx
index 449d4c6448..527aad815b 100644
--- a/libs/remix-ui/run-tab/src/lib/components/account.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/account.tsx
@@ -1,42 +1,58 @@
 // eslint-disable-next-line no-use-before-define
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useState } from 'react'
 import { CopyToClipboard } from '@remix-ui/clipboard'
 import { AccountProps } from '../types'
 
 export function AccountUI (props: AccountProps) {
   const { selectedAccount, loadedAccounts } = props.accounts
   const accounts = Object.keys(loadedAccounts)
-  const plusBtn = useRef(null)
-  const plusTitle = useRef(null)
+  const [plusOpt, setPlusOpt] = useState({
+    classList: '',
+    title: ''
+  })
 
   useEffect(() => {
     if (!selectedAccount && accounts.length > 0) props.setAccount(accounts[0])
   }, [accounts, selectedAccount])
 
-  const updatePlusButton = () => {
-    // enable/disable + button
+  useEffect(() => {
     switch (props.selectExEnv) {
       case 'injected':
-        plusBtn.current.classList.add('udapp_disableMouseEvents')
-        plusTitle.current.title = "Unfortunately it's not possible to create an account using injected web3. Please create the account directly from your provider (i.e metamask or other of the same type)."
-
+        setPlusOpt({
+          classList: 'udapp_disableMouseEvents',
+          title: "Unfortunately it's not possible to create an account using injected web3. Please create the account directly from your provider (i.e metamask or other of the same type)."
+        })
         break
-      case 'vm':
-        plusBtn.current.classList.remove('udapp_disableMouseEvents')
-        plusTitle.current.title = 'Create a new account'
 
+      case 'vm':
+        setPlusOpt({
+          classList: '',
+          title: 'Create a new account'
+        })
         break
 
       case 'web3':
-        this.onPersonalChange()
-
+        if (!props.personalMode) {
+          setPlusOpt({
+            classList: 'disableMouseEvents',
+            title: 'Creating an account is possible only in Personal mode. Please go to Settings to enable it.'
+          })
+        } else {
+          setPlusOpt({
+            classList: '',
+            title: 'Create a new account'
+          })
+        }
         break
-      default: {
-        plusBtn.current.classList.add('udapp_disableMouseEvents')
-        plusTitle.current.title = `Unfortunately it's not possible to create an account using an external wallet (${props.selectExEnv}).`
-      }
+
+      default:
+        setPlusOpt({
+          classList: 'disableMouseEvents',
+          title: `Unfortunately it's not possible to create an account using an external wallet (${props.selectExEnv}).`
+        })
     }
-  }
+    // this._deps.config.get('settings/personal-mode')
+  }, [props.selectExEnv, props.personalMode])
 
   const newAccount = () => {
     // dispatch createNewBlockchainAccount
@@ -110,14 +126,14 @@ export function AccountUI (props: AccountProps) {
     <div className="udapp_crow">
       <label className="udapp_settingsLabel">
         Account
-        <span ref={plusTitle} id="remixRunPlusWraper" title="Create a new account" onLoad={updatePlusButton}>
-          <i ref={plusBtn} id="remixRunPlus" className="fas fa-plus-circle udapp_icon" aria-hidden="true" onClick={newAccount}></i>
+        <span id="remixRunPlusWraper" title={plusOpt.title}>
+          <i id="remixRunPlus" className={`fas fa-plus-circle udapp_icon ${plusOpt.classList}`} aria-hidden="true" onClick={newAccount}></i>
         </span>
       </label>
       <div className="udapp_account">
         <select id="txorigin" data-id="runTabSelectAccount" name="txorigin" className="form-control udapp_select custom-select pr-4" value={selectedAccount} onChange={(e) => { props.setAccount(e.target.value) }}>
           {
-            Object.keys(loadedAccounts).map((value) => <option value={value}>{ loadedAccounts[value] }</option>)
+            Object.keys(loadedAccounts).map((value, index) => <option value={value} key={index}>{ loadedAccounts[value] }</option>)
           }
         </select>
         <div style={{ marginLeft: -5 }}><CopyToClipboard content={selectedAccount} direction='top' /></div>
diff --git a/libs/remix-ui/run-tab/src/lib/components/environment.tsx b/libs/remix-ui/run-tab/src/lib/components/environment.tsx
index 84685ef58f..e9ba916433 100644
--- a/libs/remix-ui/run-tab/src/lib/components/environment.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/environment.tsx
@@ -1,10 +1,8 @@
 // eslint-disable-next-line no-use-before-define
-import React, { useState } from 'react'
+import React from 'react'
 import { EnvironmentProps } from '../types'
 
 export function EnvironmentUI (props: EnvironmentProps) {
-  const [exEnv, setExEnv] = useState<string>('')
-
   // setDropdown (selectExEnv) {
   //   this.selectExEnv = selectExEnv
 
@@ -41,33 +39,28 @@ export function EnvironmentUI (props: EnvironmentProps) {
   // }
 
   const handleChangeExEnv = (env: string) => {
-    setExEnv(env)
-    props.updateExEnv(env)
+    props.setExecEnv(env)
+    const fork = provider.getAttribute('fork') // can be undefined if connected to an external source (web3 provider / injected)
+    let context = provider.value
+    context = context.startsWith('vm') ? 'vm' : context // context has to be 'vm', 'web3' or 'injected'
+    this.setExecutionContext({ context, fork })
   }
+
   return (
     <div className="udapp_crow">
       <label id="selectExEnv" className="udapp_settingsLabel">
         Environment
       </label>
       <div className="udapp_environment">
-        <select id="selectExEnvOptions" data-id="settingsSelectEnvOptions" className="form-control udapp_select custom-select" value={exEnv} onChange={(e) => { handleChangeExEnv(e.target.value) }}>
-          <option id="vm-mode-london" data-id="settingsVMLondonMode"
-            title="Execution environment does not connect to any node, everything is local and in memory only."
-            value="vm-london"> JavaScript VM (London) {/* fork="london" */}
-          </option>
-          <option id="vm-mode-berlin" data-id="settingsVMBerlinMode"
-            title="Execution environment does not connect to any node, everything is local and in memory only."
-            value="vm-berlin"> JavaScript VM (Berlin) {/* fork="berlin" */}
-          </option>
-          <option id="injected-mode" data-id="settingsInjectedMode"
-            title="Execution environment has been provided by Metamask or similar provider."
-            value="injected"> Injected Web3
-          </option>
-          <option id="web3-mode" data-id="settingsWeb3Mode"
-            title="Execution environment connects to node at localhost (or via IPC if available), transactions will be sent to the network and can cause loss of money or worse!
-            If this page is served via https and you access your node via http, it might not work. In this case, try cloning the repository and serving it via http."
-            value="web3"> Web3 Provider
-          </option>
+        <select id="selectExEnvOptions" data-id="settingsSelectEnvOptions" className="form-control udapp_select custom-select" value={props.selectedEnv} onChange={(e) => { handleChangeExEnv(e.target.value) }}>
+          {
+            props.providerList.map((provider) =>
+              <option id={provider.id} data-id={provider.dataId}
+                title={provider.title}
+                value={provider.value}> Web3 Provider
+              </option>
+            )
+          }
         </select>
         <a href="https://remix-ide.readthedocs.io/en/latest/run.html#run-setup" target="_blank"><i className="udapp_infoDeployAction ml-2 fas fa-info" title="check out docs to setup Environment"></i></a>
       </div>
diff --git a/libs/remix-ui/run-tab/src/lib/components/network.tsx b/libs/remix-ui/run-tab/src/lib/components/network.tsx
index f33e568e19..3a7a9c7480 100644
--- a/libs/remix-ui/run-tab/src/lib/components/network.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/network.tsx
@@ -8,7 +8,7 @@ export function NetworkUI (props: NetworkProps) {
       <div className="udapp_settingsLabel">
       </div>
       <div className="udapp_environment" data-id="settingsNetworkEnv">
-        <span className="udapp_network badge badge-secondary"></span>
+        <span className="udapp_network badge badge-secondary">{ props.networkName }</span>
       </div>
     </div>
   )
diff --git a/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx b/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
index 87f127fbb3..a1e72fd470 100644
--- a/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
@@ -77,25 +77,6 @@ export function SettingsUI (props: SettingsProps) {
   //   return provider === 'vm' ? provider + '-' + fork : provider
   // }
 
-  // setFinalContext () {
-  //   // set the final context. Cause it is possible that this is not the one we've originaly selected
-  //   this.selectExEnv.value = this._getProviderDropdownValue()
-  //   this.event.trigger('clearInstance', [])
-  //   this.updatePlusButton()
-  // }
-
-  // onPersonalChange () {
-  //   const plusBtn = document.getElementById('remixRunPlus')
-  //   const plusTitle = document.getElementById('remixRunPlusWraper')
-  //   if (!this._deps.config.get('settings/personal-mode')) {
-  //     plusBtn.classList.add(css.disableMouseEvents)
-  //     plusTitle.title = 'Creating an account is possible only in Personal mode. Please go to Settings to enable it.'
-  //   } else {
-  //     plusBtn.classList.remove(css.disableMouseEvents)
-  //     plusTitle.title = 'Create a new account'
-  //   }
-  // }
-
   // getSelectedAccount () {
   //   return this.el.querySelector('#txorigin').selectedOptions[0].value
   // }
@@ -105,31 +86,10 @@ export function SettingsUI (props: SettingsProps) {
   // }
 
   return (
-  // this.blockchain.event.register('contextChanged', (context, silent) => {
-  //   this.setFinalContext()
-  // })
-
-  // this.blockchain.event.register('networkStatus', ({ error, network }) => {
-  //   if (error) {
-  //     this.netUI.innerHTML = 'can\'t detect network '
-  //     return
-  //   }
-  //   const networkProvider = this._components.networkModule.getNetworkProvider.bind(this._components.networkModule)
-  //   this.netUI.innerHTML = (networkProvider() !== 'vm') ? `${network.name} (${network.id || '-'}) network` : ''
-  // })
-
-  // setInterval(() => {
-  //   this.fillAccountsList()
-  // }, 1000)
-
-  // this.el = el
-
-    // this.fillAccountsList()
-    // return el
     <div className="udapp_settings">
-      <EnvironmentUI updateExEnv={props.updateExEnv} />
-      <NetworkUI />
-      <AccountUI selectExEnv={props.selectExEnv} accounts={props.accounts} setAccount={props.setAccount} />
+      <EnvironmentUI setExecEnv={props.setExecEnv} selectedEnv={props.selectExEnv} />
+      <NetworkUI networkName={props.networkName} />
+      <AccountUI personalMode={props.personalMode} selectExEnv={props.selectExEnv} accounts={props.accounts} setAccount={props.setAccount} />
       <GasPriceUI gasLimit={props.gasLimit} setGasFee={props.setGasFee} />
       <ValueUI setUnit={props.setUnit} sendValue={props.sendValue} sendUnit={props.sendUnit} />
     </div>
diff --git a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
index d6606a2c2f..d73b945767 100644
--- a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
+++ b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
@@ -5,7 +5,7 @@ interface Action {
 
 export interface RunTabState {
   accounts: {
-    loadedAccounts: Record<string, any>,
+    loadedAccounts: Record<string, string>,
     isRequesting: boolean,
     isSuccessful: boolean,
     error: string,
@@ -13,7 +13,23 @@ export interface RunTabState {
   },
   sendValue: string,
   sendUnit: 'ether' | 'finney' | 'gwei' | 'wei',
-  gasLimit: number
+  gasLimit: number,
+  selectExEnv: string,
+  personalMode: boolean,
+  networkName: string,
+  providers: {
+    providerList: {
+      id?: string,
+      dataId?: string,
+      title?: string,
+      value: string,
+      fork?: string
+      content: string
+    }[],
+    isRequesting: boolean,
+    isSuccessful: boolean,
+    error: string
+  }
 }
 
 export const runTabInitialState: RunTabState = {
@@ -26,7 +42,43 @@ export const runTabInitialState: RunTabState = {
   },
   sendValue: '0',
   sendUnit: 'ether',
-  gasLimit: 3000000
+  gasLimit: 3000000,
+  selectExEnv: 'vm',
+  personalMode: false,
+  networkName: '',
+  providers: {
+    providerList: [{
+      id: 'vm-mode-london',
+      dataId: 'settingsVMLondonMode',
+      title: 'Execution environment does not connect to any node, everything is local and in memory only.',
+      value: 'vm-london',
+      fork: 'london',
+      content: 'JavaScript VM (London)'
+    }, {
+      id: 'vm-mode-berlin',
+      dataId: 'settingsVMBerlinMode',
+      title: 'Execution environment does not connect to any node, everything is local and in memory only.',
+      value: 'vm-berlin',
+      fork: 'berlin',
+      content: 'JavaScript VM (Berlin)'
+    }, {
+      id: 'injected-mode',
+      dataId: 'settingsInjectedMode',
+      title: 'Execution environment has been provided by Metamask or similar provider.',
+      value: 'injected',
+      content: 'Injected Web3'
+    }, {
+      id: 'web3-mode',
+      dataId: 'settingsWeb3Mode',
+      title: `Execution environment connects to node at localhost (or via IPC if available), transactions will be sent to the network and can cause loss of money or worse!
+      If this page is served via https and you access your node via http, it might not work. In this case, try cloning the repository and serving it via http.`,
+      value: 'web3',
+      content: 'Web3 Provider'
+    }],
+    isRequesting: false,
+    isSuccessful: false,
+    error: null
+  }
 }
 
 export const runTabReducer = (state: RunTabState = runTabInitialState, action: Action) => {
@@ -42,22 +94,24 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
         }
       }
     }
+
     case 'FETCH_ACCOUNTS_LIST_SUCCESS': {
-      const payload: string[] = action.payload as string[]
+      const payload: Record<string, string> = action.payload
 
       return {
         ...state,
         accounts: {
           ...state.accounts,
-          loadedAccounts: resolveAccountsList(state, payload),
+          loadedAccounts: payload,
           isSuccessful: true,
           isRequesting: false,
           error: null
         }
       }
     }
+
     case 'FETCH_ACCOUNTS_LIST_FAILED': {
-      const payload = action.payload as string
+      const payload: string = action.payload
 
       return {
         ...state,
@@ -69,16 +123,18 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
         }
       }
     }
+
     case 'SET_SEND_VALUE': {
-      const payload = action.payload as string
+      const payload: string = action.payload
 
       return {
         ...state,
         sendValue: payload
       }
     }
+
     case 'SET_SELECTED_ACCOUNT': {
-      const payload = action.payload as string
+      const payload: string = action.payload
 
       return {
         ...state,
@@ -88,8 +144,9 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
         }
       }
     }
+
     case 'SET_SEND_UNIT': {
-      const payload = action.payload as 'ether' | 'finney' | 'gwei' | 'wei'
+      const payload: 'ether' | 'finney' | 'gwei' | 'wei' = action.payload
 
       return {
         ...state,
@@ -98,33 +155,107 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
     }
 
     case 'SET_GAS_LIMIT': {
-      const payload = action.payload as number
+      const payload: number = action.payload
 
       return {
         ...state,
         gasLimit: payload
       }
     }
-    default:
-      return state
-  }
-}
 
-// TODO: unclear what's the goal of accountListCallId, feels like it can be simplified
-const resolveAccountsList = async (state: RunTabState, accounts: string[]) => {
-  const loadedAccounts = state.accounts.loadedAccounts
+    case 'SET_EXECUTION_ENVIRONMENT': {
+      const payload: string = action.payload
 
-  if (!accounts) accounts = []
-  for (const loadedaddress in loadedAccounts) {
-    if (accounts.indexOf(loadedaddress) === -1) {
-      delete loadedAccounts[loadedaddress]
+      return {
+        ...state,
+        selectExEnv: payload
+      }
     }
-  }
-  for (const i in accounts) {
-    const address = accounts[i]
-    if (!loadedAccounts[address]) {
-      loadedAccounts[address] = 1
+
+    case 'SET_PERSONAL_MODE': {
+      const payload: boolean = action.payload
+
+      return {
+        ...state,
+        personalMode: payload
+      }
+    }
+
+    case 'SET_NETWORK_NAME': {
+      const payload: string = action.payload
+
+      return {
+        ...state,
+        networkName: payload
+      }
+    }
+
+    case 'FETCH_PROVIDER_LIST_REQUEST': {
+      return {
+        ...state,
+        providers: {
+          ...state.providers,
+          isRequesting: true,
+          isSuccessful: false,
+          error: null
+        }
+      }
+    }
+
+    case 'FETCH_PROVIDER_LIST_SUCCESS': {
+      const payload: Record<string, string> = action.payload
+
+      return {
+        ...state,
+        providers: {
+          ...state.providers,
+          providerList: payload,
+          isSuccessful: true,
+          isRequesting: false,
+          error: null
+        }
+      }
+    }
+
+    case 'FETCH_PROVIDER_LIST_FAILED': {
+      const payload: string = action.payload
+
+      return {
+        ...state,
+        providers: {
+          ...state.providers,
+          isRequesting: false,
+          isSuccessful: false,
+          error: payload
+        }
+      }
+    }
+
+    case 'ADD_PROVIDER': {
+      const payload: string = action.payload
+
+      return {
+        ...state,
+        providers: {
+          ...state.providers,
+          providerList: { ...state.providers.providerList, payload }
+        }
+      }
     }
+
+    case 'REMOVE_PROVIDER': {
+      const payload: string = action.payload
+
+      return {
+        ...state,
+        providers: {
+          ...state.providers,
+          providerList: delete state.providers.providerList[payload] ? state.providers.providerList : state.providers.providerList
+        }
+      }
+    }
+
+    default:
+      return state
   }
-  return loadedAccounts
 }
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
index 9d311dfe14..72b9a0fbb0 100644
--- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -1,5 +1,5 @@
 // eslint-disable-next-line no-use-before-define
-import React, { useState, useEffect } from 'react'
+import React, { useEffect } from 'react'
 import { useRunTabPlugin } from './actions/custom'
 import { ContractDropdownUI } from './components/contractDropdownUI'
 import { InstanceContainerUI } from './components/instanceContainerUI'
@@ -9,27 +9,27 @@ import './css/run-tab.css'
 import { RunTabProps } from './types'
 
 export function RunTabUI (props: RunTabProps) {
-  const { runTab, setupEvents, fillAccountsList, setAccount, setUnit, setGasFee } = useRunTabPlugin(props.plugin)
-  const [selectExEnv, setSelectExEnv] = useState<string>('')
+  const { runTab, setupEvents, fillAccountsList, setAccount, setUnit, setGasFee, addPluginProvider, removePluginProvider, setExecEnv, setExecutionContext } = useRunTabPlugin(props.plugin)
 
   useEffect(() => {
     setupEvents()
-
-    setInterval(() => {
+    // setInterval(() => {
+    //   fillAccountsList()
+    // }, 1000)
+    // fillAccountsList()
+    setTimeout(() => {
       fillAccountsList()
-    }, 1000)
-    fillAccountsList()
-  }, [])
+    }, 0)
 
-  const updateExEnv = (env: string) => {
-    setSelectExEnv(env)
-  }
+    props.plugin.on('manager', 'pluginActivated', addPluginProvider.bind(props.plugin))
+    props.plugin.on('manager', 'pluginDeactivated', removePluginProvider.bind(props.plugin))
+  }, [])
 
   return (
     <div className="udapp_runTabView run-tab" id="runTabView" data-id="runTabView">
       <div className="list-group list-group-flush">
-        <SettingsUI selectExEnv={selectExEnv} updateExEnv={updateExEnv} accounts={runTab.accounts} setAccount={setAccount} setUnit={setUnit} sendValue={runTab.sendValue} sendUnit={runTab.sendUnit} gasLimit={runTab.gasLimit} setGasFee={setGasFee} />
-        <ContractDropdownUI exEnvironment={selectExEnv} />
+        <SettingsUI networkName={runTab.networkName} personalMode={runTab.personalMode} selectExEnv={runTab.selectExEnv} setExecEnv={setExecEnv} accounts={runTab.accounts} setAccount={setAccount} setUnit={setUnit} sendValue={runTab.sendValue} sendUnit={runTab.sendUnit} gasLimit={runTab.gasLimit} setGasFee={setGasFee} />
+        <ContractDropdownUI exEnvironment={runTab.selectExEnv} />
         <RecorderUI />
         <InstanceContainerUI />
       </div>
diff --git a/libs/remix-ui/run-tab/src/lib/types/index.ts b/libs/remix-ui/run-tab/src/lib/types/index.ts
index 0dd3da14d3..9fae57d56c 100644
--- a/libs/remix-ui/run-tab/src/lib/types/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/index.ts
@@ -4,7 +4,6 @@ export interface RunTabProps {
 
 export interface SettingsProps {
   selectExEnv: string,
-  updateExEnv: (env: string) => void,
   accounts: {
     loadedAccounts: Record<string, any>,
     selectedAccount: string,
@@ -17,15 +16,19 @@ export interface SettingsProps {
   sendValue: string,
   sendUnit: string,
   gasLimit: number,
-  setGasFee: (value: number) => void
+  setGasFee: (value: number) => void,
+  setExecEnv: (env: string) => void,
+  personalMode: boolean,
+  networkName: string
 }
 
 export interface EnvironmentProps {
-  updateExEnv: (env: string) => void
+  setExecEnv: (env: string) => void,
+  selectedEnv: string
 }
 
 export interface NetworkProps {
-
+  networkName: string
 }
 
 export interface AccountProps {
@@ -37,7 +40,8 @@ export interface AccountProps {
     isSuccessful: boolean,
     error: string
   },
-  setAccount: (account: string) => void
+  setAccount: (account: string) => void,
+  personalMode: boolean
 }
 
 export interface GasPriceProps {

From 581e90fe396a496ec3e28e28ed9c530584155665 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Tue, 16 Nov 2021 15:06:09 +0100
Subject: [PATCH 116/168] Added modal to runTab

---
 apps/remix-ide/src/app/udapp/run-tab.js       |  2 +-
 .../run-tab/src/lib/actions/custom.ts         | 58 +++++++-----
 .../run-tab/src/lib/actions/payload.ts        | 13 +++
 .../src/lib/components/environment.tsx        | 49 ++---------
 .../run-tab/src/lib/components/settingsUI.tsx |  2 +-
 .../run-tab/src/lib/reducers/runTab.ts        | 41 ++++++++-
 libs/remix-ui/run-tab/src/lib/run-tab.tsx     | 88 ++++++++++++++-----
 libs/remix-ui/run-tab/src/lib/types/index.ts  | 43 ++++++++-
 8 files changed, 206 insertions(+), 90 deletions(-)

diff --git a/apps/remix-ide/src/app/udapp/run-tab.js b/apps/remix-ide/src/app/udapp/run-tab.js
index d3fb7851ac..7fbdb599b4 100644
--- a/apps/remix-ide/src/app/udapp/run-tab.js
+++ b/apps/remix-ide/src/app/udapp/run-tab.js
@@ -126,7 +126,7 @@ export class RunTab extends ViewPlugin {
         Currently you have no contract instances to interact with.
       </span>`
 
-    this.event.register('clearInstance', () => {
+    this.event.register('clearInstance', () => { // setFinalContext calls this
       this.instanceContainer.innerHTML = '' // clear the instances list
       this.instanceContainer.appendChild(instanceContainerTitle)
       this.instanceContainer.appendChild(this.noInstancesText)
diff --git a/libs/remix-ui/run-tab/src/lib/actions/custom.ts b/libs/remix-ui/run-tab/src/lib/actions/custom.ts
index 1100411043..09c0892360 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/custom.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/custom.ts
@@ -10,6 +10,29 @@ export function useRunTabPlugin (plugin) {
   const [runTab, dispatch] = React.useReducer(runTabReducer, runTabInitialState)
 
   const setupEvents = () => {
+    plugin.blockchain.resetAndInit(plugin.config, {
+      getAddress: (cb) => {
+        cb(null, runTab.accounts.selectedAccount)
+      },
+      getValue: (cb) => {
+        try {
+          const number = runTab.sendValue
+          const unit = runTab.sendUnit
+
+          cb(null, Web3.utils.toWei(number, unit))
+        } catch (e) {
+          cb(e)
+        }
+      },
+      getGasLimit: (cb) => {
+        try {
+          cb(null, '0x' + new ethJSUtil.BN(runTab.gasLimit, 10).toString(16))
+        } catch (e) {
+          cb(e.message)
+        }
+      }
+    })
+  
     plugin.blockchain.events.on('newTransaction', (tx, receipt) => {
       plugin.emit('newTransaction', tx, receipt)
     })
@@ -39,29 +62,16 @@ export function useRunTabPlugin (plugin) {
 
     plugin.blockchain.event.register('addProvider', provider => addExternalProvider(provider))
     plugin.blockchain.event.register('removeProvider', name => removeExternalProvider(name))
-
-    plugin.blockchain.resetAndInit(plugin.config, {
-      getAddress: (cb) => {
-        cb(null, runTab.accounts.selectedAccount)
-      },
-      getValue: (cb) => {
-        try {
-          const number = runTab.sendValue
-          const unit = runTab.sendUnit
-
-          cb(null, Web3.utils.toWei(number, unit))
-        } catch (e) {
-          cb(e)
-        }
-      },
-      getGasLimit: (cb) => {
-        try {
-          cb(null, '0x' + new ethJSUtil.BN(runTab.gasLimit, 10).toString(16))
-        } catch (e) {
-          cb(e.message)
-        }
-      }
-    })
+    plugin.on('manager', 'pluginActivated', addPluginProvider.bind(plugin))
+    plugin.on('manager', 'pluginDeactivated', removePluginProvider.bind(plugin))
+
+    // setInterval(() => {
+    //   fillAccountsList()
+    // }, 1000)
+    // fillAccountsList()
+    setTimeout(() => {
+      fillAccountsList()
+    }, 0)
   }
 
   const updateAccountBalances = () => {
@@ -183,5 +193,5 @@ export function useRunTabPlugin (plugin) {
     }, setFinalContext())
   }
 
-  return { runTab, setupEvents, fillAccountsList, setAccount, setUnit, setGasFee, addPluginProvider, removePluginProvider, setExecEnv, setFinalContext, setExecutionContext }
+  return { runTab, setupEvents, fillAccountsList, setAccount, setUnit, setGasFee, setExecEnv, setFinalContext, setExecutionContext }
 }
diff --git a/libs/remix-ui/run-tab/src/lib/actions/payload.ts b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
index 5387638cc0..8886135b26 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/payload.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
@@ -81,3 +81,16 @@ export const removeProvider = (provider: string) => {
     payload: provider
   }
 }
+
+export const displayNotification = (title: string, message: string, labelOk: string, labelCancel: string, actionOk?: (...args) => void, actionCancel?: (...args) => void) => {
+  return {
+    type: 'DISPLAY_NOTIFICATION',
+    payload: { title, message, labelOk, labelCancel, actionOk, actionCancel }
+  }
+}
+
+export const hideNotification = () => {
+  return {
+    type: 'HIDE_NOTIFICATION'
+  }
+}
diff --git a/libs/remix-ui/run-tab/src/lib/components/environment.tsx b/libs/remix-ui/run-tab/src/lib/components/environment.tsx
index e9ba916433..473fba234c 100644
--- a/libs/remix-ui/run-tab/src/lib/components/environment.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/environment.tsx
@@ -3,47 +3,14 @@ import React from 'react'
 import { EnvironmentProps } from '../types'
 
 export function EnvironmentUI (props: EnvironmentProps) {
-  // setDropdown (selectExEnv) {
-  //   this.selectExEnv = selectExEnv
-
-  //   const addProvider = (network) => {
-  //     selectExEnv.appendChild(yo`<option
-  //       title="provider name: ${network.name}"
-  //       value="${network.name}"
-  //       name="executionContext"
-  //     >
-  //       ${network.name}
-  //     </option>`)
-  //     addTooltip(yo`<span><b>${network.name}</b> provider added</span>`)
-  //   }
-
-  //   const removeProvider = (name) => {
-  //     var env = selectExEnv.querySelector(`option[value="${name}"]`)
-  //     if (env) {
-  //       selectExEnv.removeChild(env)
-  //       addTooltip(yo`<span><b>${name}</b> provider removed</span>`)
-  //     }
-  //   }
-  //   this.blockchain.event.register('addProvider', provider => addProvider(provider))
-  //   this.blockchain.event.register('removeProvider', name => removeProvider(name))
-
-  //   selectExEnv.addEventListener('change', (event) => {
-  //     const provider = selectExEnv.options[selectExEnv.selectedIndex]
-  //     const fork = provider.getAttribute('fork') // can be undefined if connected to an external source (web3 provider / injected)
-  //     let context = provider.value
-  //     context = context.startsWith('vm') ? 'vm' : context // context has to be 'vm', 'web3' or 'injected'
-  //     this.setExecutionContext({ context, fork })
-  //   })
-
-  //   selectExEnv.value = this._getProviderDropdownValue()
-  // }
-
   const handleChangeExEnv = (env: string) => {
-    props.setExecEnv(env)
-    const fork = provider.getAttribute('fork') // can be undefined if connected to an external source (web3 provider / injected)
+    const provider = props.providers.providerList.find(exEnv => exEnv.value === env)
+    const fork = provider.fork // can be undefined if connected to an external source (web3 provider / injected)
     let context = provider.value
+
     context = context.startsWith('vm') ? 'vm' : context // context has to be 'vm', 'web3' or 'injected'
-    this.setExecutionContext({ context, fork })
+    props.setExecutionContext({ context, fork })
+    props.setExecEnv(env)
   }
 
   return (
@@ -54,10 +21,10 @@ export function EnvironmentUI (props: EnvironmentProps) {
       <div className="udapp_environment">
         <select id="selectExEnvOptions" data-id="settingsSelectEnvOptions" className="form-control udapp_select custom-select" value={props.selectedEnv} onChange={(e) => { handleChangeExEnv(e.target.value) }}>
           {
-            props.providerList.map((provider) =>
-              <option id={provider.id} data-id={provider.dataId}
+            props.providers.providerList.map((provider, index) =>
+              <option id={provider.id} key={index} data-id={provider.dataId}
                 title={provider.title}
-                value={provider.value}> Web3 Provider
+                value={provider.value}> { provider.content }
               </option>
             )
           }
diff --git a/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx b/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
index a1e72fd470..c100c1e120 100644
--- a/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
@@ -87,7 +87,7 @@ export function SettingsUI (props: SettingsProps) {
 
   return (
     <div className="udapp_settings">
-      <EnvironmentUI setExecEnv={props.setExecEnv} selectedEnv={props.selectExEnv} />
+      <EnvironmentUI setExecEnv={props.setExecEnv} selectedEnv={props.selectExEnv} providers={props.providers} setExecutionContext={props.setExecutionContext} />
       <NetworkUI networkName={props.networkName} />
       <AccountUI personalMode={props.personalMode} selectExEnv={props.selectExEnv} accounts={props.accounts} setAccount={props.setAccount} />
       <GasPriceUI gasLimit={props.gasLimit} setGasFee={props.setGasFee} />
diff --git a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
index d73b945767..3e0e1f2938 100644
--- a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
+++ b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
@@ -29,6 +29,14 @@ export interface RunTabState {
     isRequesting: boolean,
     isSuccessful: boolean,
     error: string
+  },
+  notification: {
+    title: string,
+    message: string,
+    actionOk: () => void,
+    actionCancel: (() => void) | null,
+    labelOk: string,
+    labelCancel: string
   }
 }
 
@@ -78,6 +86,14 @@ export const runTabInitialState: RunTabState = {
     isRequesting: false,
     isSuccessful: false,
     error: null
+  },
+  notification: {
+    title: '',
+    message: '',
+    actionOk: () => {},
+    actionCancel: () => {},
+    labelOk: '',
+    labelCancel: ''
   }
 }
 
@@ -203,7 +219,7 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
     }
 
     case 'FETCH_PROVIDER_LIST_SUCCESS': {
-      const payload: Record<string, string> = action.payload
+      const payload: { id?: string, dataId?: string, title?: string, value: string, fork?: string, content: string }[] = action.payload
 
       return {
         ...state,
@@ -255,6 +271,29 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
       }
     }
 
+    case 'DISPLAY_NOTIFICATION': {
+      const payload = action.payload as { title: string, message: string, actionOk: () => void, actionCancel: () => void, labelOk: string, labelCancel: string }
+
+      return {
+        ...state,
+        notification: {
+          title: payload.title,
+          message: payload.message,
+          actionOk: payload.actionOk || runTabInitialState.notification.actionOk,
+          actionCancel: payload.actionCancel || runTabInitialState.notification.actionCancel,
+          labelOk: payload.labelOk,
+          labelCancel: payload.labelCancel
+        }
+      }
+    }
+
+    case 'HIDE_NOTIFICATION': {
+      return {
+        ...state,
+        notification: runTabInitialState.notification
+      }
+    }
+
     default:
       return state
   }
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
index 72b9a0fbb0..78a41322bb 100644
--- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -1,38 +1,86 @@
 // eslint-disable-next-line no-use-before-define
-import React, { useEffect } from 'react'
+import React, { Fragment, useEffect, useState } from 'react'
+import { ModalDialog } from '@remix-ui/modal-dialog'
+// eslint-disable-next-line no-unused-vars
+import { Toaster } from '@remix-ui/toaster'
 import { useRunTabPlugin } from './actions/custom'
 import { ContractDropdownUI } from './components/contractDropdownUI'
 import { InstanceContainerUI } from './components/instanceContainerUI'
 import { RecorderUI } from './components/recorderCardUI'
 import { SettingsUI } from './components/settingsUI'
 import './css/run-tab.css'
-import { RunTabProps } from './types'
+import { Modal, RunTabProps } from './types'
 
 export function RunTabUI (props: RunTabProps) {
-  const { runTab, setupEvents, fillAccountsList, setAccount, setUnit, setGasFee, addPluginProvider, removePluginProvider, setExecEnv, setExecutionContext } = useRunTabPlugin(props.plugin)
+  const { runTab, setupEvents, setAccount, setUnit, setGasFee, setExecEnv, setExecutionContext } = useRunTabPlugin(props.plugin)
+  const [focusModal, setFocusModal] = useState<Modal>({
+    hide: true,
+    title: '',
+    message: '',
+    okLabel: '',
+    okFn: () => {},
+    cancelLabel: '',
+    cancelFn: () => {}
+  })
+  const [modals, setModals] = useState<Modal[]>([])
 
   useEffect(() => {
     setupEvents()
-    // setInterval(() => {
-    //   fillAccountsList()
-    // }, 1000)
-    // fillAccountsList()
-    setTimeout(() => {
-      fillAccountsList()
-    }, 0)
-
-    props.plugin.on('manager', 'pluginActivated', addPluginProvider.bind(props.plugin))
-    props.plugin.on('manager', 'pluginDeactivated', removePluginProvider.bind(props.plugin))
   }, [])
 
+  useEffect(() => {
+    if (modals.length > 0) {
+      setFocusModal(() => {
+        const focusModal = {
+          hide: false,
+          title: modals[0].title,
+          message: modals[0].message,
+          okLabel: modals[0].okLabel,
+          okFn: modals[0].okFn,
+          cancelLabel: modals[0].cancelLabel,
+          cancelFn: modals[0].cancelFn
+        }
+        return focusModal
+      })
+      const modalList = modals.slice()
+
+      modalList.shift()
+      setModals(modalList)
+    }
+  }, [modals])
+
+  useEffect(() => {
+    if (runTab.notification.title) {
+      modal(runTab.notification.title, runTab.notification.message, runTab.notification.labelOk, runTab.notification.actionOk, runTab.notification.labelCancel, runTab.notification.actionCancel)
+    }
+  }, [runTab.notification])
+
+  // eslint-disable-next-line no-undef
+  const modal = (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => {
+    setModals(modals => {
+      modals.push({ message, title, okLabel, okFn, cancelLabel, cancelFn })
+      return [...modals]
+    })
+  }
+
+  const handleHideModal = () => {
+    setFocusModal(modal => {
+      return { ...modal, hide: true, message: null }
+    })
+  }
+
   return (
-    <div className="udapp_runTabView run-tab" id="runTabView" data-id="runTabView">
-      <div className="list-group list-group-flush">
-        <SettingsUI networkName={runTab.networkName} personalMode={runTab.personalMode} selectExEnv={runTab.selectExEnv} setExecEnv={setExecEnv} accounts={runTab.accounts} setAccount={setAccount} setUnit={setUnit} sendValue={runTab.sendValue} sendUnit={runTab.sendUnit} gasLimit={runTab.gasLimit} setGasFee={setGasFee} />
-        <ContractDropdownUI exEnvironment={runTab.selectExEnv} />
-        <RecorderUI />
-        <InstanceContainerUI />
+    <Fragment>
+      <div className="udapp_runTabView run-tab" id="runTabView" data-id="runTabView">
+        <div className="list-group list-group-flush">
+          <SettingsUI networkName={runTab.networkName} personalMode={runTab.personalMode} selectExEnv={runTab.selectExEnv} setExecEnv={setExecEnv} accounts={runTab.accounts} setAccount={setAccount} setUnit={setUnit} sendValue={runTab.sendValue} sendUnit={runTab.sendUnit} gasLimit={runTab.gasLimit} setGasFee={setGasFee} providers={runTab.providers} setExecutionContext={setExecutionContext} />
+          <ContractDropdownUI exEnvironment={runTab.selectExEnv} />
+          <RecorderUI />
+          <InstanceContainerUI />
+        </div>
       </div>
-    </div>
+      <ModalDialog id='fileSystem' { ...focusModal } handleHide={ handleHideModal } />
+      {/* <Toaster message={focusToaster} handleHide={handleToaster} /> */}
+    </Fragment>
   )
 }
diff --git a/libs/remix-ui/run-tab/src/lib/types/index.ts b/libs/remix-ui/run-tab/src/lib/types/index.ts
index 9fae57d56c..c9c060780b 100644
--- a/libs/remix-ui/run-tab/src/lib/types/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/index.ts
@@ -19,12 +19,40 @@ export interface SettingsProps {
   setGasFee: (value: number) => void,
   setExecEnv: (env: string) => void,
   personalMode: boolean,
-  networkName: string
+  networkName: string,
+  providers: {
+    providerList: {
+      id?: string,
+      dataId?: string,
+      title?: string,
+      value: string,
+      fork?: string
+      content: string
+    }[],
+    isRequesting: boolean,
+    isSuccessful: boolean,
+    error: string
+  },
+  setExecutionContext: (executionContext: { context: string, fork: string }) => void
 }
 
 export interface EnvironmentProps {
   setExecEnv: (env: string) => void,
-  selectedEnv: string
+  selectedEnv: string,
+  providers: {
+    providerList: {
+      id?: string,
+      dataId?: string,
+      title?: string,
+      value: string,
+      fork?: string
+      content: string
+    }[],
+    isRequesting: boolean,
+    isSuccessful: boolean,
+    error: string
+  },
+  setExecutionContext: (executionContext: { context: string, fork: string }) => void
 }
 
 export interface NetworkProps {
@@ -66,3 +94,14 @@ export interface RecorderProps {
 export interface InstanceContainerProps {
 
 }
+
+export interface Modal {
+  hide?: boolean
+  title: string
+  // eslint-disable-next-line no-undef
+  message: string | JSX.Element
+  okLabel: string
+  okFn: () => void
+  cancelLabel: string
+  cancelFn: () => void
+}

From d54130f703f55ece04ce6e1151e02a78466bdbfd Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Thu, 18 Nov 2021 16:16:45 +0100
Subject: [PATCH 117/168] Generate blockchain types

---
 apps/remix-ide/src/app/udapp/run-tab.js       |   5 +
 .../run-tab/src/lib/actions/custom.ts         |  29 ++-
 .../remix-ui/run-tab/src/lib/actions/index.ts | 204 ++++++++++++++----
 .../run-tab/src/lib/actions/payload.ts        |   7 +
 .../run-tab/src/lib/reducers/runTab.ts        |  15 +-
 libs/remix-ui/run-tab/src/lib/run-tab.tsx     |  52 ++++-
 .../run-tab/src/lib/types/blockchain.d.ts     |  78 +++++++
 .../src/lib/types/execution-context.d.ts      |  38 ++++
 libs/remix-ui/run-tab/src/lib/types/index.ts  |  10 +-
 .../run-tab/src/lib/types/injected.d.ts       |  12 ++
 libs/remix-ui/run-tab/src/lib/types/node.d.ts |  13 ++
 libs/remix-ui/run-tab/src/lib/types/vm.d.ts   |  16 ++
 12 files changed, 419 insertions(+), 60 deletions(-)
 create mode 100644 libs/remix-ui/run-tab/src/lib/types/blockchain.d.ts
 create mode 100644 libs/remix-ui/run-tab/src/lib/types/execution-context.d.ts
 create mode 100644 libs/remix-ui/run-tab/src/lib/types/injected.d.ts
 create mode 100644 libs/remix-ui/run-tab/src/lib/types/node.d.ts
 create mode 100644 libs/remix-ui/run-tab/src/lib/types/vm.d.ts

diff --git a/apps/remix-ide/src/app/udapp/run-tab.js b/apps/remix-ide/src/app/udapp/run-tab.js
index 7fbdb599b4..2173e2d8ee 100644
--- a/apps/remix-ide/src/app/udapp/run-tab.js
+++ b/apps/remix-ide/src/app/udapp/run-tab.js
@@ -46,6 +46,7 @@ export class RunTab extends ViewPlugin {
     this.compilersArtefacts = compilersArtefacts
     this.networkModule = networkModule
     this.fileProvider = fileProvider
+    this.REACT_API = {}
     this.setupEvents()
     this.el = document.createElement('div')
   }
@@ -230,4 +231,8 @@ export class RunTab extends ViewPlugin {
       <RunTabUI plugin={this} />
       , this.el)
   }
+
+  onReady (api) {
+    this.REACT_API = api
+  }
 }
diff --git a/libs/remix-ui/run-tab/src/lib/actions/custom.ts b/libs/remix-ui/run-tab/src/lib/actions/custom.ts
index 09c0892360..7dacb97c10 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/custom.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/custom.ts
@@ -3,10 +3,11 @@ import React from 'react'
 import * as ethJSUtil from 'ethereumjs-util'
 import Web3 from 'web3'
 import { shortenAddress } from '@remix-ui/helper'
-import { addProvider, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, removeProvider, setExecutionEnvironment, setGasLimit, setNetworkName, setSelectedAccount, setSendUnit, setSendValue } from './payload'
+import { addProvider, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, removeProvider, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setNetworkName, setSelectedAccount, setSendUnit, setSendValue } from './payload'
 import { runTabInitialState, runTabReducer } from '../reducers/runTab'
 
-export function useRunTabPlugin (plugin) {
+// eslint-disable-next-line no-undef
+export function useRunTabPlugin (plugin, executionContextModal: (executionContext: { context: string, fork: string }) => void) {
   const [runTab, dispatch] = React.useReducer(runTabReducer, runTabInitialState)
 
   const setupEvents = () => {
@@ -32,7 +33,7 @@ export function useRunTabPlugin (plugin) {
         }
       }
     })
-  
+
     plugin.blockchain.events.on('newTransaction', (tx, receipt) => {
       plugin.emit('newTransaction', tx, receipt)
     })
@@ -180,18 +181,24 @@ export function useRunTabPlugin (plugin) {
     dispatch(removeProvider(name))
   }
 
+  const setProviderFromEndpoint = (executionContext: { context: string, fork: string }) => {
+    plugin.blockchain.setProviderFromEndpoint(plugin.REACT_API.externalEndpoint, executionContext, (alertMsg) => {
+      // if (alertMsg) addTooltip(alertMsg)
+      setFinalContext()
+    })
+  }
+
   const setExecutionContext = (executionContext: { context: string, fork: string }) => {
     plugin.blockchain.changeExecutionContext(executionContext, () => {
-      // modalDialogCustom.prompt('External node request', this.web3ProviderDialogBody(), 'http://127.0.0.1:8545', (target) => {
-      //   this.blockchain.setProviderFromEndpoint(target, context, (alertMsg) => {
-      // if (alertMsg) addTooltip(alertMsg)
-      // setFinalContext()
-      // })
-      // }, this.setFinalContext.bind(this))
-    // }, (alertMsg) => {
+      executionContextModal(executionContext)
+    }, (alertMsg) => {
       // addTooltip(alertMsg)
     }, setFinalContext())
   }
 
-  return { runTab, setupEvents, fillAccountsList, setAccount, setUnit, setGasFee, setExecEnv, setFinalContext, setExecutionContext }
+  const setWeb3Endpoint = (endpoint: string) => {
+    dispatch(setExternalEndpoint(endpoint))
+  }
+
+  return { runTab, setupEvents, fillAccountsList, setAccount, setUnit, setGasFee, setExecEnv, setFinalContext, setExecutionContext, setProviderFromEndpoint, setWeb3Endpoint }
 }
diff --git a/libs/remix-ui/run-tab/src/lib/actions/index.ts b/libs/remix-ui/run-tab/src/lib/actions/index.ts
index cfc4e3c53f..df91f393c4 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/index.ts
@@ -1,48 +1,29 @@
+// eslint-disable-next-line no-unused-vars
 import React from 'react'
-import { shortenAddress } from '@remix-ui/helper'
 import * as ethJSUtil from 'ethereumjs-util'
 import Web3 from 'web3'
-import { fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess } from './payload'
-
-let plugin, dispatch: React.Dispatch<any>
+import { shortenAddress } from '@remix-ui/helper'
+import { addProvider, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, removeProvider, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setNetworkName, setSelectedAccount, setSendUnit, setSendValue } from './payload'
+import { Udapp } from '../types'
 
-export const initSettingsTab = (udapp) => async (reducerDispatch: React.Dispatch<any>) => {
-  if (udapp) {
-    plugin = udapp
-    dispatch = reducerDispatch
-    setupEvents()
+let plugin: Udapp, dispatch: React.Dispatch<any>
 
-    setInterval(() => {
-      fillAccountsList()
-    }, 1000)
-  }
+export const initRunTab = (udapp: Udapp) => async (reducerDispatch: React.Dispatch<any>) => {
+  plugin = udapp
+  dispatch = reducerDispatch
+  setupEvents()
 }
 
 const setupEvents = () => {
-  plugin.blockchain.events.on('newTransaction', (tx, receipt) => {
-    plugin.emit('newTransaction', tx, receipt)
-  })
-
-  plugin.blockchain.event.register('transactionExecuted', (error, from, to, data, lookupOnly, txResult) => {
-    // if (!lookupOnly) this.el.querySelector('#value').value = 0
-    if (error) return
-    updateAccountBalances()
-  })
-
   plugin.blockchain.resetAndInit(plugin.config, {
     getAddress: (cb) => {
-      cb(null, $('#txorigin').val())
+      cb(null, plugin.REACT_API.accounts.selectedAccount)
     },
     getValue: (cb) => {
       try {
-        const number = document.querySelector('#value').value
-        const select = document.getElementById('unit')
-        const index = select.selectedIndex
-        const selectedUnit = select.querySelectorAll('option')[index].dataset.unit
-        let unit = 'ether' // default
-        if (['ether', 'finney', 'gwei', 'wei'].indexOf(selectedUnit) >= 0) {
-          unit = selectedUnit
-        }
+        const number = plugin.REACT_API.sendValue
+        const unit = plugin.REACT_API.sendUnit
+
         cb(null, Web3.utils.toWei(number, unit))
       } catch (e) {
         cb(e)
@@ -50,27 +31,66 @@ const setupEvents = () => {
     },
     getGasLimit: (cb) => {
       try {
-        cb(null, '0x' + new ethJSUtil.BN($('#gasLimit').val(), 10).toString(16))
+        cb(null, '0x' + new ethJSUtil.BN(plugin.REACT_API.gasLimit, 10).toString(16))
       } catch (e) {
         cb(e.message)
       }
     }
   })
+
+  plugin.blockchain.events.on('newTransaction', (tx, receipt) => {
+    plugin.emit('newTransaction', tx, receipt)
+  })
+
+  plugin.blockchain.event.register('transactionExecuted', (error, from, to, data, lookupOnly, txResult) => {
+    if (!lookupOnly) dispatch(setSendValue(0))
+    if (error) return
+    updateAccountBalances()
+  })
+
+  plugin.blockchain.event.register('contextChanged', (context, silent) => {
+    setFinalContext()
+  })
+
+  plugin.blockchain.event.register('networkStatus', ({ error, network }) => {
+    if (error) {
+      const netUI = 'can\'t detect network '
+      setNetworkNameFromProvider(netUI)
+
+      return
+    }
+    const networkProvider = plugin.networkModule.getNetworkProvider.bind(plugin.networkModule)
+    const netUI = (networkProvider() !== 'vm') ? `${network.name} (${network.id || '-'}) network` : ''
+
+    setNetworkNameFromProvider(netUI)
+  })
+
+  plugin.blockchain.event.register('addProvider', provider => addExternalProvider(provider))
+  plugin.blockchain.event.register('removeProvider', name => removeExternalProvider(name))
+  plugin.on('manager', 'pluginActivated', addPluginProvider.bind(plugin))
+  plugin.on('manager', 'pluginDeactivated', removePluginProvider.bind(plugin))
+
+  // setInterval(() => {
+  //   fillAccountsList()
+  // }, 1000)
+  // fillAccountsList()
+  setTimeout(() => {
+    fillAccountsList()
+  }, 0)
 }
 
 const updateAccountBalances = () => {
-  // const accounts = $(this.el.querySelector('#txorigin')).children('option')
+  const accounts = runTab.accounts.loadedAccounts
 
-  // accounts.each((index, account) => {
-  //   plugin.blockchain.getBalanceInEther(account.value, (err, balance) => {
-  //     if (err) return
-  //     const updated = shortenAddress(account.value, balance)
+  Object.keys(accounts).map((value) => {
+    plugin.blockchain.getBalanceInEther(value, (err, balance) => {
+      if (err) return
+      const updated = shortenAddress(value, balance)
 
-  //     if (updated !== account.innerText) { // check if the balance has been updated and update UI accordingly.
-  //       account.innerText = updated
-  //     }
-  //   })
-  // })
+      accounts[value] = updated
+    })
+  })
+  dispatch(fetchAccountsListSuccess(accounts))
 }
 
 const fillAccountsList = async () => {
@@ -79,7 +99,18 @@ const fillAccountsList = async () => {
     const promise = plugin.blockchain.getAccounts()
 
     promise.then((accounts: string[]) => {
-      dispatch(fetchAccountsListSuccess(accounts))
+      const loadedAccounts = {}
+
+      if (!accounts) accounts = []
+      accounts.forEach((account) => {
+        plugin.blockchain.getBalanceInEther(account, (err, balance) => {
+          if (err) return
+          const updated = shortenAddress(account, balance)
+
+          loadedAccounts[account] = updated
+        })
+      })
+      dispatch(fetchAccountsListSuccess(loadedAccounts))
     }).catch((e) => {
       dispatch(fetchAccountsListFailed(e.message))
     })
@@ -87,3 +118,88 @@ const fillAccountsList = async () => {
     // addTooltip(`Cannot get account list: ${e}`)
   }
 }
+
+const setAccount = (account: string) => {
+  dispatch(setSelectedAccount(account))
+}
+
+const setUnit = (unit: 'ether' | 'finney' | 'gwei' | 'wei') => {
+  dispatch(setSendUnit(unit))
+}
+
+const setGasFee = (value: number) => {
+  dispatch(setGasLimit(value))
+}
+
+const addPluginProvider = (profile) => {
+  if (profile.kind === 'provider') {
+    ((profile, app) => {
+      const web3Provider = {
+        async sendAsync (payload, callback) {
+          try {
+            const result = await app.call(profile.name, 'sendAsync', payload)
+            callback(null, result)
+          } catch (e) {
+            callback(e)
+          }
+        }
+      }
+      app.blockchain.addProvider({ name: profile.displayName, provider: web3Provider })
+    })(profile, plugin)
+  }
+}
+
+const removePluginProvider = (profile) => {
+  if (profile.kind === 'provider') plugin.blockchain.removeProvider(profile.displayName)
+}
+
+const setFinalContext = () => {
+  // set the final context. Cause it is possible that this is not the one we've originaly selected
+  const value = _getProviderDropdownValue()
+
+  setExecEnv(value)
+  // this.event.trigger('clearInstance', [])
+}
+
+const _getProviderDropdownValue = (): string => {
+  const provider = plugin.blockchain.getProvider()
+  const fork = plugin.blockchain.getCurrentFork()
+
+  return provider === 'vm' ? provider + '-' + fork : provider
+}
+
+const setExecEnv = (env: string) => {
+  dispatch(setExecutionEnvironment(env))
+}
+
+const setNetworkNameFromProvider = (networkName: string) => {
+  dispatch(setNetworkName(networkName))
+}
+
+const addExternalProvider = (network) => {
+  dispatch(addProvider(network))
+  // addTooltip(yo`<span><b>${network.name}</b> provider added</span>`)
+}
+
+const removeExternalProvider = (name) => {
+  dispatch(removeProvider(name))
+}
+
+const setProviderFromEndpoint = (executionContext: { context: string, fork: string }) => {
+  plugin.blockchain.setProviderFromEndpoint(runTab.externalEndpoint, executionContext, (alertMsg) => {
+    // if (alertMsg) addTooltip(alertMsg)
+    setFinalContext()
+  })
+}
+
+const setExecutionContext = (executionContext: { context: string, fork: string }) => {
+  plugin.blockchain.changeExecutionContext(executionContext, () => {
+    executionContextModal(executionContext)
+  }, (alertMsg) => {
+    // addTooltip(alertMsg)
+  }, setFinalContext())
+}
+
+const setWeb3Endpoint = (endpoint: string) => {
+  dispatch(setExternalEndpoint(endpoint))
+}
diff --git a/libs/remix-ui/run-tab/src/lib/actions/payload.ts b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
index 8886135b26..a527f34b4a 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/payload.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
@@ -94,3 +94,10 @@ export const hideNotification = () => {
     type: 'HIDE_NOTIFICATION'
   }
 }
+
+export const setExternalEndpoint = (endpoint: string) => {
+  return {
+    type: 'SET_EXTERNAL_WEB3_ENDPOINT',
+    payload: endpoint
+  }
+}
diff --git a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
index 3e0e1f2938..aa318adb56 100644
--- a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
+++ b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
@@ -37,7 +37,8 @@ export interface RunTabState {
     actionCancel: (() => void) | null,
     labelOk: string,
     labelCancel: string
-  }
+  },
+  externalEndpoint: string
 }
 
 export const runTabInitialState: RunTabState = {
@@ -94,7 +95,8 @@ export const runTabInitialState: RunTabState = {
     actionCancel: () => {},
     labelOk: '',
     labelCancel: ''
-  }
+  },
+  externalEndpoint: 'http://127.0.0.1:8545'
 }
 
 export const runTabReducer = (state: RunTabState = runTabInitialState, action: Action) => {
@@ -294,6 +296,15 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
       }
     }
 
+    case 'SET_EXTERNAL_WEB3_ENDPOINT': {
+      const payload: string = action.payload
+
+      return {
+        ...state,
+        externalEndpoint: payload
+      }
+    }
+
     default:
       return state
   }
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
index 78a41322bb..d07cbbb62b 100644
--- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -8,11 +8,12 @@ import { ContractDropdownUI } from './components/contractDropdownUI'
 import { InstanceContainerUI } from './components/instanceContainerUI'
 import { RecorderUI } from './components/recorderCardUI'
 import { SettingsUI } from './components/settingsUI'
-import './css/run-tab.css'
 import { Modal, RunTabProps } from './types'
+import { runTabInitialState, runTabReducer } from './reducers/runTab'
+import './css/run-tab.css'
 
 export function RunTabUI (props: RunTabProps) {
-  const { runTab, setupEvents, setAccount, setUnit, setGasFee, setExecEnv, setExecutionContext } = useRunTabPlugin(props.plugin)
+  const { runTab, setupEvents, setAccount, setUnit, setGasFee, setExecEnv, setExecutionContext, setProviderFromEndpoint, setFinalContext, setWeb3Endpoint } = useRunTabPlugin(props.plugin, executionContextModal)
   const [focusModal, setFocusModal] = useState<Modal>({
     hide: true,
     title: '',
@@ -23,6 +24,7 @@ export function RunTabUI (props: RunTabProps) {
     cancelFn: () => {}
   })
   const [modals, setModals] = useState<Modal[]>([])
+  const REACT_API = { runTab }
 
   useEffect(() => {
     setupEvents()
@@ -55,6 +57,10 @@ export function RunTabUI (props: RunTabProps) {
     }
   }, [runTab.notification])
 
+  useEffect(() => {
+    props.plugin.onReady(runTab)
+  }, [REACT_API])
+
   // eslint-disable-next-line no-undef
   const modal = (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => {
     setModals(modals => {
@@ -69,6 +75,48 @@ export function RunTabUI (props: RunTabProps) {
     })
   }
 
+  const handleInputEndpoint = (e: any) => {
+    setWeb3Endpoint(e.target.value)
+  }
+
+  function executionContextModal (executionContext: { context: string, fork: string }) {
+    modal('External node request', web3ProviderDialogBody(), 'OK', () => { setProviderFromEndpoint(executionContext) }, 'Cancel', () => { setFinalContext() })
+  }
+
+  const web3ProviderDialogBody = () => {
+    const thePath = '<path/to/local/folder/for/test/chain>'
+
+    return (
+      <>
+        <div className="">
+            Note: To use Geth & https://remix.ethereum.org, configure it to allow requests from Remix:(see <a href="https://geth.ethereum.org/docs/rpc/server" target="_blank">Geth Docs on rpc server</a>)
+          <div className="border p-1">geth --http --http.corsdomain https://remix.ethereum.org</div>
+          <br />
+          To run Remix & a local Geth test node, use this command: (see <a href="https://geth.ethereum.org/getting-started/dev-mode" target="_blank">Geth Docs on Dev mode</a>)
+          <div className="border p-1">geth --http --http.corsdomain="${window.origin}" --http.api web3,eth,debug,personal,net --vmdebug --datadir ${thePath} --dev console</div>
+          <br />
+          <br />
+          <b>WARNING:</b> It is not safe to use the --http.corsdomain flag with a wildcard: <b>--http.corsdomain *</b>
+          <br />
+          <br />For more info: <a href="https://remix-ide.readthedocs.io/en/latest/run.html#more-about-web3-provider" target="_blank">Remix Docs on Web3 Provider</a>
+          <br />
+          <br />
+          Web3 Provider Endpoint
+        </div>
+        <input
+          onInput={handleInputEndpoint}
+          type='text'
+          name='prompt_text'
+          id='prompt_text'
+          style={{ width: '100%' }}
+          className="form-control"
+          defaultValue={runTab.externalEndpoint}
+          data-id="modalDialogCustomPromptText"
+        />
+      </>
+    )
+  }
+
   return (
     <Fragment>
       <div className="udapp_runTabView run-tab" id="runTabView" data-id="runTabView">
diff --git a/libs/remix-ui/run-tab/src/lib/types/blockchain.d.ts b/libs/remix-ui/run-tab/src/lib/types/blockchain.d.ts
new file mode 100644
index 0000000000..39a9292a0f
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/types/blockchain.d.ts
@@ -0,0 +1,78 @@
+export class Blockchain extends Plugin<any, any> {
+    constructor(config: any);
+    event: any;
+    executionContext: ExecutionContext;
+    events: EventEmitter;
+    config: any;
+    txRunner: any;
+    networkcallid: number;
+    networkStatus: {
+        name: string;
+        id: string;
+    };
+    setupEvents(): void;
+    getCurrentNetworkStatus(): {
+        name: string;
+        id: string;
+    };
+    setupProviders(): void;
+    providers: {};
+    getCurrentProvider(): any;
+    /** Return the list of accounts */
+    getAccounts(cb: any): any;
+    deployContractAndLibraries(selectedContract: any, args: any, contractMetadata: any, compilerContracts: any, callbacks: any, confirmationCb: any): void;
+    deployContractWithLibrary(selectedContract: any, args: any, contractMetadata: any, compilerContracts: any, callbacks: any, confirmationCb: any): void;
+    createContract(selectedContract: any, data: any, continueCb: any, promptCb: any, confirmationCb: any, finalCb: any): void;
+    determineGasPrice(cb: any): void;
+    getInputs(funABI: any): any;
+    fromWei(value: any, doTypeConversion: any, unit: any): string;
+    toWei(value: any, unit: any): import("bn.js");
+    calculateFee(gas: any, gasPrice: any, unit: any): import("bn.js");
+    determineGasFees(tx: any): (gasPrice: any, cb: any) => void;
+    changeExecutionContext(context: any, confirmCb: any, infoCb: any, cb: any): Promise<any>;
+    setProviderFromEndpoint(target: any, context: any, cb: any): void;
+    detectNetwork(cb: any): void;
+    getProvider(): any;
+    /**
+     * return the fork name applied to the current envionment
+     * @return {String} - fork name
+     */
+    getCurrentFork(): string;
+    isWeb3Provider(): boolean;
+    isInjectedWeb3(): boolean;
+    signMessage(message: any, account: any, passphrase: any, cb: any): void;
+    web3(): any;
+    getTxListener(opts: any): any;
+    runOrCallContractMethod(contractName: any, contractAbi: any, funABI: any, contract: any, value: any, address: any, callType: any, lookupOnly: any, logMsg: any, logCallback: any, outputCb: any, confirmationCb: any, continueCb: any, promptCb: any): void;
+    context(): "memory" | "blockchain";
+    resetAndInit(config: any, transactionContextAPI: any): void;
+    transactionContextAPI: any;
+    addProvider(provider: any): void;
+    removeProvider(name: any): void;
+    /** Listen on New Transaction. (Cannot be done inside constructor because txlistener doesn't exist yet) */
+    startListening(txlistener: any): void;
+    resetEnvironment(): void;
+    /**
+     * Create a VM Account
+     * @param {{privateKey: string, balance: string}} newAccount The new account to create
+     */
+    createVMAccount(newAccount: {
+        privateKey: string;
+        balance: string;
+    }): any;
+    newAccount(_password: any, passwordPromptCb: any, cb: any): any;
+    /** Get the balance of an address, and convert wei to ether */
+    getBalanceInEther(address: any, cb: any): void;
+    pendingTransactionsCount(): number;
+    /**
+     * This function send a tx only to javascript VM or testnet, will return an error for the mainnet
+     * SHOULD BE TAKEN CAREFULLY!
+     *
+     * @param {Object} tx    - transaction.
+     */
+    sendTransaction(tx: any): any;
+    runTx(args: any, confirmationCb: any, continueCb: any, promptCb: any, cb: any): void;
+}
+import { Plugin } from "@remixproject/engine/lib/abstract";
+import { ExecutionContext } from "./execution-context";
+import { EventEmitter } from "events";
diff --git a/libs/remix-ui/run-tab/src/lib/types/execution-context.d.ts b/libs/remix-ui/run-tab/src/lib/types/execution-context.d.ts
new file mode 100644
index 0000000000..6547ebb1b8
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/types/execution-context.d.ts
@@ -0,0 +1,38 @@
+import Web3 from 'web3'
+
+export class ExecutionContext {
+    event: any;
+    executionContext: any;
+    lastBlock: any;
+    blockGasLimitDefault: number;
+    blockGasLimit: number;
+    currentFork: string;
+    mainNetGenesisHash: string;
+    customNetWorks: {};
+    blocks: {};
+    latestBlockNumber: number;
+    txs: {};
+    customWeb3: {};
+    init(config: any): void;
+    askPermission(): void;
+    getProvider(): any;
+    getCurrentFork(): string;
+    isVM(): boolean;
+    setWeb3(context: any, web3: any): void;
+    web3(): any;
+    detectNetwork(callback: any): void;
+    removeProvider(name: any): void;
+    addProvider(network: any): void;
+    internalWeb3(): any;
+    blankWeb3(): Web3;
+    setContext(context: any, endPointUrl: any, confirmCb: any, infoCb: any): void;
+    executionContextChange(value: any, endPointUrl: any, confirmCb: any, infoCb: any, cb: any): Promise<any>;
+    currentblockGasLimit(): number;
+    stopListenOnLastBlock(): void;
+    // eslint-disable-next-line no-undef
+    listenOnLastBlockId: NodeJS.Timer;
+    _updateChainContext(): Promise<void>;
+    listenOnLastBlock(): void;
+    setProviderFromEndpoint(endpoint: any, value: any, cb: any): void;
+    txDetailsLink(network: any, hash: any): any;
+}
diff --git a/libs/remix-ui/run-tab/src/lib/types/index.ts b/libs/remix-ui/run-tab/src/lib/types/index.ts
index c9c060780b..d2b19b5577 100644
--- a/libs/remix-ui/run-tab/src/lib/types/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/index.ts
@@ -1,5 +1,13 @@
+import { RunTabState } from '../reducers/runTab'
+import { Blockchain } from './blockchain'
+
+export interface Udapp {
+  onReady: (api: RunTabState) => void,
+  REACT_API: RunTabState,
+  blockchain: Blockchain
+}
 export interface RunTabProps {
-  plugin: any
+  plugin: Udapp
 }
 
 export interface SettingsProps {
diff --git a/libs/remix-ui/run-tab/src/lib/types/injected.d.ts b/libs/remix-ui/run-tab/src/lib/types/injected.d.ts
new file mode 100644
index 0000000000..c12ab88933
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/types/injected.d.ts
@@ -0,0 +1,12 @@
+export = InjectedProvider;
+declare class InjectedProvider {
+    constructor(executionContext: any);
+    executionContext: any;
+    getAccounts(cb: any): any;
+    newAccount(passwordPromptCb: any, cb: any): void;
+    resetEnvironment(): void;
+    getBalanceInEther(address: any, cb: any): void;
+    getGasPrice(cb: any): void;
+    signMessage(message: any, account: any, _passphrase: any, cb: any): void;
+    getProvider(): string;
+}
diff --git a/libs/remix-ui/run-tab/src/lib/types/node.d.ts b/libs/remix-ui/run-tab/src/lib/types/node.d.ts
new file mode 100644
index 0000000000..8979746943
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/types/node.d.ts
@@ -0,0 +1,13 @@
+export = NodeProvider;
+declare class NodeProvider {
+    constructor(executionContext: any, config: any);
+    executionContext: any;
+    config: any;
+    getAccounts(cb: any): any;
+    newAccount(passwordPromptCb: any, cb: any): any;
+    resetEnvironment(): void;
+    getBalanceInEther(address: any, cb: any): void;
+    getGasPrice(cb: any): void;
+    signMessage(message: any, account: any, passphrase: any, cb: any): void;
+    getProvider(): any;
+}
diff --git a/libs/remix-ui/run-tab/src/lib/types/vm.d.ts b/libs/remix-ui/run-tab/src/lib/types/vm.d.ts
new file mode 100644
index 0000000000..0cd4adaca8
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/types/vm.d.ts
@@ -0,0 +1,16 @@
+export = VMProvider;
+declare class VMProvider {
+    constructor(executionContext: any);
+    executionContext: any;
+    getAccounts(cb: any): void;
+    resetEnvironment(): void;
+    accounts: {};
+    RemixSimulatorProvider: any;
+    web3: any;
+    createVMAccount(newAccount: any): string;
+    newAccount(_passwordPromptCb: any, cb: any): void;
+    getBalanceInEther(address: any, cb: any): void;
+    getGasPrice(cb: any): void;
+    signMessage(message: any, account: any, _passphrase: any, cb: any): void;
+    getProvider(): string;
+}

From c590fedea906c43ead57c0e73c309b159092cf4f Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Fri, 19 Nov 2021 14:00:32 +0100
Subject: [PATCH 118/168] Removed custom hook.

---
 .../run-tab/src/lib/actions/custom.ts         | 204 ------------------
 .../remix-ui/run-tab/src/lib/actions/index.ts |  35 ++-
 .../run-tab/src/lib/actions/payload.ts        |   3 +-
 .../src/lib/components/environment.tsx        |  43 +++-
 .../run-tab/src/lib/components/settingsUI.tsx |   2 +-
 libs/remix-ui/run-tab/src/lib/run-tab.tsx     |  77 +++----
 .../run-tab/src/lib/types/blockchain.d.ts     |   2 +-
 libs/remix-ui/run-tab/src/lib/types/index.ts  |  22 +-
 .../run-tab/src/lib/types/run-tab.d.ts        |  41 ++++
 9 files changed, 137 insertions(+), 292 deletions(-)
 delete mode 100644 libs/remix-ui/run-tab/src/lib/actions/custom.ts
 create mode 100644 libs/remix-ui/run-tab/src/lib/types/run-tab.d.ts

diff --git a/libs/remix-ui/run-tab/src/lib/actions/custom.ts b/libs/remix-ui/run-tab/src/lib/actions/custom.ts
deleted file mode 100644
index 7dacb97c10..0000000000
--- a/libs/remix-ui/run-tab/src/lib/actions/custom.ts
+++ /dev/null
@@ -1,204 +0,0 @@
-// eslint-disable-next-line no-unused-vars
-import React from 'react'
-import * as ethJSUtil from 'ethereumjs-util'
-import Web3 from 'web3'
-import { shortenAddress } from '@remix-ui/helper'
-import { addProvider, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, removeProvider, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setNetworkName, setSelectedAccount, setSendUnit, setSendValue } from './payload'
-import { runTabInitialState, runTabReducer } from '../reducers/runTab'
-
-// eslint-disable-next-line no-undef
-export function useRunTabPlugin (plugin, executionContextModal: (executionContext: { context: string, fork: string }) => void) {
-  const [runTab, dispatch] = React.useReducer(runTabReducer, runTabInitialState)
-
-  const setupEvents = () => {
-    plugin.blockchain.resetAndInit(plugin.config, {
-      getAddress: (cb) => {
-        cb(null, runTab.accounts.selectedAccount)
-      },
-      getValue: (cb) => {
-        try {
-          const number = runTab.sendValue
-          const unit = runTab.sendUnit
-
-          cb(null, Web3.utils.toWei(number, unit))
-        } catch (e) {
-          cb(e)
-        }
-      },
-      getGasLimit: (cb) => {
-        try {
-          cb(null, '0x' + new ethJSUtil.BN(runTab.gasLimit, 10).toString(16))
-        } catch (e) {
-          cb(e.message)
-        }
-      }
-    })
-
-    plugin.blockchain.events.on('newTransaction', (tx, receipt) => {
-      plugin.emit('newTransaction', tx, receipt)
-    })
-
-    plugin.blockchain.event.register('transactionExecuted', (error, from, to, data, lookupOnly, txResult) => {
-      if (!lookupOnly) dispatch(setSendValue(0))
-      if (error) return
-      updateAccountBalances()
-    })
-
-    plugin.blockchain.event.register('contextChanged', (context, silent) => {
-      setFinalContext()
-    })
-
-    plugin.blockchain.event.register('networkStatus', ({ error, network }) => {
-      if (error) {
-        const netUI = 'can\'t detect network '
-        setNetworkNameFromProvider(netUI)
-
-        return
-      }
-      const networkProvider = plugin.networkModule.getNetworkProvider.bind(plugin.networkModule)
-      const netUI = (networkProvider() !== 'vm') ? `${network.name} (${network.id || '-'}) network` : ''
-
-      setNetworkNameFromProvider(netUI)
-    })
-
-    plugin.blockchain.event.register('addProvider', provider => addExternalProvider(provider))
-    plugin.blockchain.event.register('removeProvider', name => removeExternalProvider(name))
-    plugin.on('manager', 'pluginActivated', addPluginProvider.bind(plugin))
-    plugin.on('manager', 'pluginDeactivated', removePluginProvider.bind(plugin))
-
-    // setInterval(() => {
-    //   fillAccountsList()
-    // }, 1000)
-    // fillAccountsList()
-    setTimeout(() => {
-      fillAccountsList()
-    }, 0)
-  }
-
-  const updateAccountBalances = () => {
-    const accounts = runTab.accounts.loadedAccounts
-
-    Object.keys(accounts).map((value) => {
-      plugin.blockchain.getBalanceInEther(value, (err, balance) => {
-        if (err) return
-        const updated = shortenAddress(value, balance)
-
-        accounts[value] = updated
-      })
-    })
-    dispatch(fetchAccountsListSuccess(accounts))
-  }
-
-  const fillAccountsList = async () => {
-    try {
-      dispatch(fetchAccountsListRequest())
-      const promise = plugin.blockchain.getAccounts()
-
-      promise.then((accounts: string[]) => {
-        const loadedAccounts = {}
-
-        if (!accounts) accounts = []
-        accounts.forEach((account) => {
-          plugin.blockchain.getBalanceInEther(account, (err, balance) => {
-            if (err) return
-            const updated = shortenAddress(account, balance)
-
-            loadedAccounts[account] = updated
-          })
-        })
-        dispatch(fetchAccountsListSuccess(loadedAccounts))
-      }).catch((e) => {
-        dispatch(fetchAccountsListFailed(e.message))
-      })
-    } catch (e) {
-      // addTooltip(`Cannot get account list: ${e}`)
-    }
-  }
-
-  const setAccount = (account: string) => {
-    dispatch(setSelectedAccount(account))
-  }
-
-  const setUnit = (unit: 'ether' | 'finney' | 'gwei' | 'wei') => {
-    dispatch(setSendUnit(unit))
-  }
-
-  const setGasFee = (value: number) => {
-    dispatch(setGasLimit(value))
-  }
-
-  const addPluginProvider = (profile) => {
-    if (profile.kind === 'provider') {
-      ((profile, app) => {
-        const web3Provider = {
-          async sendAsync (payload, callback) {
-            try {
-              const result = await app.call(profile.name, 'sendAsync', payload)
-              callback(null, result)
-            } catch (e) {
-              callback(e)
-            }
-          }
-        }
-        app.blockchain.addProvider({ name: profile.displayName, provider: web3Provider })
-      })(profile, plugin)
-    }
-  }
-
-  const removePluginProvider = (profile) => {
-    if (profile.kind === 'provider') plugin.blockchain.removeProvider(profile.displayName)
-  }
-
-  const setFinalContext = () => {
-    // set the final context. Cause it is possible that this is not the one we've originaly selected
-    const value = _getProviderDropdownValue()
-
-    setExecEnv(value)
-    // this.event.trigger('clearInstance', [])
-  }
-
-  const _getProviderDropdownValue = (): string => {
-    const provider = plugin.blockchain.getProvider()
-    const fork = plugin.blockchain.getCurrentFork()
-
-    return provider === 'vm' ? provider + '-' + fork : provider
-  }
-
-  const setExecEnv = (env: string) => {
-    dispatch(setExecutionEnvironment(env))
-  }
-
-  const setNetworkNameFromProvider = (networkName: string) => {
-    dispatch(setNetworkName(networkName))
-  }
-
-  const addExternalProvider = (network) => {
-    dispatch(addProvider(network))
-    // addTooltip(yo`<span><b>${network.name}</b> provider added</span>`)
-  }
-
-  const removeExternalProvider = (name) => {
-    dispatch(removeProvider(name))
-  }
-
-  const setProviderFromEndpoint = (executionContext: { context: string, fork: string }) => {
-    plugin.blockchain.setProviderFromEndpoint(plugin.REACT_API.externalEndpoint, executionContext, (alertMsg) => {
-      // if (alertMsg) addTooltip(alertMsg)
-      setFinalContext()
-    })
-  }
-
-  const setExecutionContext = (executionContext: { context: string, fork: string }) => {
-    plugin.blockchain.changeExecutionContext(executionContext, () => {
-      executionContextModal(executionContext)
-    }, (alertMsg) => {
-      // addTooltip(alertMsg)
-    }, setFinalContext())
-  }
-
-  const setWeb3Endpoint = (endpoint: string) => {
-    dispatch(setExternalEndpoint(endpoint))
-  }
-
-  return { runTab, setupEvents, fillAccountsList, setAccount, setUnit, setGasFee, setExecEnv, setFinalContext, setExecutionContext, setProviderFromEndpoint, setWeb3Endpoint }
-}
diff --git a/libs/remix-ui/run-tab/src/lib/actions/index.ts b/libs/remix-ui/run-tab/src/lib/actions/index.ts
index df91f393c4..4159ec33a0 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/index.ts
@@ -3,12 +3,12 @@ import React from 'react'
 import * as ethJSUtil from 'ethereumjs-util'
 import Web3 from 'web3'
 import { shortenAddress } from '@remix-ui/helper'
-import { addProvider, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, removeProvider, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setNetworkName, setSelectedAccount, setSendUnit, setSendValue } from './payload'
-import { Udapp } from '../types'
+import { addProvider, displayNotification, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, removeProvider, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setNetworkName, setSelectedAccount, setSendUnit, setSendValue } from './payload'
+import { RunTab } from '../types/run-tab'
 
-let plugin: Udapp, dispatch: React.Dispatch<any>
+let plugin: RunTab, dispatch: React.Dispatch<any>
 
-export const initRunTab = (udapp: Udapp) => async (reducerDispatch: React.Dispatch<any>) => {
+export const initRunTab = (udapp: RunTab) => async (reducerDispatch: React.Dispatch<any>) => {
   plugin = udapp
   dispatch = reducerDispatch
   setupEvents()
@@ -80,7 +80,7 @@ const setupEvents = () => {
 }
 
 const updateAccountBalances = () => {
-  const accounts = runTab.accounts.loadedAccounts
+  const accounts = plugin.REACT_API.accounts.loadedAccounts
 
   Object.keys(accounts).map((value) => {
     plugin.blockchain.getBalanceInEther(value, (err, balance) => {
@@ -119,15 +119,15 @@ const fillAccountsList = async () => {
   }
 }
 
-const setAccount = (account: string) => {
+export const setAccount = (account: string) => {
   dispatch(setSelectedAccount(account))
 }
 
-const setUnit = (unit: 'ether' | 'finney' | 'gwei' | 'wei') => {
+export const setUnit = (unit: 'ether' | 'finney' | 'gwei' | 'wei') => {
   dispatch(setSendUnit(unit))
 }
 
-const setGasFee = (value: number) => {
+export const setGasFee = (value: number) => {
   dispatch(setGasLimit(value))
 }
 
@@ -185,21 +185,20 @@ const removeExternalProvider = (name) => {
   dispatch(removeProvider(name))
 }
 
-const setProviderFromEndpoint = (executionContext: { context: string, fork: string }) => {
-  plugin.blockchain.setProviderFromEndpoint(runTab.externalEndpoint, executionContext, (alertMsg) => {
-    // if (alertMsg) addTooltip(alertMsg)
-    setFinalContext()
-  })
-}
-
-const setExecutionContext = (executionContext: { context: string, fork: string }) => {
+// eslint-disable-next-line no-undef
+export const setExecutionContext = (executionContext: { context: string, fork: string }, displayContent: JSX.Element) => {
   plugin.blockchain.changeExecutionContext(executionContext, () => {
-    executionContextModal(executionContext)
+    dispatch(displayNotification('External node request', displayContent, 'OK', 'Cancel', () => {
+      plugin.blockchain.setProviderFromEndpoint(plugin.REACT_API.externalEndpoint, executionContext, (alertMsg) => {
+        // if (alertMsg) addTooltip(alertMsg)
+        setFinalContext()
+      })
+    }, () => { setFinalContext() }))
   }, (alertMsg) => {
     // addTooltip(alertMsg)
   }, setFinalContext())
 }
 
-const setWeb3Endpoint = (endpoint: string) => {
+export const setWeb3Endpoint = (endpoint: string) => {
   dispatch(setExternalEndpoint(endpoint))
 }
diff --git a/libs/remix-ui/run-tab/src/lib/actions/payload.ts b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
index a527f34b4a..ea21748146 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/payload.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 export const fetchAccountsListRequest = () => {
   return {
     type: 'FETCH_ACCOUNTS_LIST_REQUEST',
@@ -82,7 +83,7 @@ export const removeProvider = (provider: string) => {
   }
 }
 
-export const displayNotification = (title: string, message: string, labelOk: string, labelCancel: string, actionOk?: (...args) => void, actionCancel?: (...args) => void) => {
+export const displayNotification = (title: string, message: string | JSX.Element, labelOk: string, labelCancel: string, actionOk?: (...args) => void, actionCancel?: (...args) => void) => {
   return {
     type: 'DISPLAY_NOTIFICATION',
     payload: { title, message, labelOk, labelCancel, actionOk, actionCancel }
diff --git a/libs/remix-ui/run-tab/src/lib/components/environment.tsx b/libs/remix-ui/run-tab/src/lib/components/environment.tsx
index 473fba234c..3c91ed9741 100644
--- a/libs/remix-ui/run-tab/src/lib/components/environment.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/environment.tsx
@@ -3,14 +3,53 @@ import React from 'react'
 import { EnvironmentProps } from '../types'
 
 export function EnvironmentUI (props: EnvironmentProps) {
+  const handleInputEndpoint = (e: any) => {
+    props.setWeb3Endpoint(e.target.value)
+  }
+
   const handleChangeExEnv = (env: string) => {
     const provider = props.providers.providerList.find(exEnv => exEnv.value === env)
     const fork = provider.fork // can be undefined if connected to an external source (web3 provider / injected)
     let context = provider.value
 
     context = context.startsWith('vm') ? 'vm' : context // context has to be 'vm', 'web3' or 'injected'
-    props.setExecutionContext({ context, fork })
-    props.setExecEnv(env)
+    const displayContent = web3ProviderDialogBody()
+
+    props.setExecutionContext({ context, fork }, displayContent)
+  }
+
+  const web3ProviderDialogBody = () => {
+    const thePath = '<path/to/local/folder/for/test/chain>'
+
+    return (
+      <>
+        <div className="">
+            Note: To use Geth & https://remix.ethereum.org, configure it to allow requests from Remix:(see <a href="https://geth.ethereum.org/docs/rpc/server" target="_blank">Geth Docs on rpc server</a>)
+          <div className="border p-1">geth --http --http.corsdomain https://remix.ethereum.org</div>
+          <br />
+          To run Remix & a local Geth test node, use this command: (see <a href="https://geth.ethereum.org/getting-started/dev-mode" target="_blank">Geth Docs on Dev mode</a>)
+          <div className="border p-1">geth --http --http.corsdomain="${window.origin}" --http.api web3,eth,debug,personal,net --vmdebug --datadir ${thePath} --dev console</div>
+          <br />
+          <br />
+          <b>WARNING:</b> It is not safe to use the --http.corsdomain flag with a wildcard: <b>--http.corsdomain *</b>
+          <br />
+          <br />For more info: <a href="https://remix-ide.readthedocs.io/en/latest/run.html#more-about-web3-provider" target="_blank">Remix Docs on Web3 Provider</a>
+          <br />
+          <br />
+          Web3 Provider Endpoint
+        </div>
+        <input
+          onInput={handleInputEndpoint}
+          type='text'
+          name='prompt_text'
+          id='prompt_text'
+          style={{ width: '100%' }}
+          className="form-control"
+          defaultValue={props.externalEndpoint}
+          data-id="modalDialogCustomPromptText"
+        />
+      </>
+    )
   }
 
   return (
diff --git a/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx b/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
index c100c1e120..45c94f5e97 100644
--- a/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
@@ -87,7 +87,7 @@ export function SettingsUI (props: SettingsProps) {
 
   return (
     <div className="udapp_settings">
-      <EnvironmentUI setExecEnv={props.setExecEnv} selectedEnv={props.selectExEnv} providers={props.providers} setExecutionContext={props.setExecutionContext} />
+      <EnvironmentUI setWeb3Endpoint={props.setWeb3Endpoint} selectedEnv={props.selectExEnv} providers={props.providers} setExecutionContext={props.setExecutionContext} externalEndpoint={props.externalEndpoint} />
       <NetworkUI networkName={props.networkName} />
       <AccountUI personalMode={props.personalMode} selectExEnv={props.selectExEnv} accounts={props.accounts} setAccount={props.setAccount} />
       <GasPriceUI gasLimit={props.gasLimit} setGasFee={props.setGasFee} />
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
index d07cbbb62b..edf41f8a68 100644
--- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -1,19 +1,19 @@
 // eslint-disable-next-line no-use-before-define
-import React, { Fragment, useEffect, useState } from 'react'
+import React, { Fragment, useEffect, useReducer, useState } from 'react'
 import { ModalDialog } from '@remix-ui/modal-dialog'
 // eslint-disable-next-line no-unused-vars
 import { Toaster } from '@remix-ui/toaster'
-import { useRunTabPlugin } from './actions/custom'
 import { ContractDropdownUI } from './components/contractDropdownUI'
 import { InstanceContainerUI } from './components/instanceContainerUI'
 import { RecorderUI } from './components/recorderCardUI'
 import { SettingsUI } from './components/settingsUI'
 import { Modal, RunTabProps } from './types'
 import { runTabInitialState, runTabReducer } from './reducers/runTab'
+import { initRunTab, setAccount, setUnit, setGasFee, setExecutionContext, setWeb3Endpoint } from './actions'
 import './css/run-tab.css'
 
 export function RunTabUI (props: RunTabProps) {
-  const { runTab, setupEvents, setAccount, setUnit, setGasFee, setExecEnv, setExecutionContext, setProviderFromEndpoint, setFinalContext, setWeb3Endpoint } = useRunTabPlugin(props.plugin, executionContextModal)
+  const { plugin } = props
   const [focusModal, setFocusModal] = useState<Modal>({
     hide: true,
     title: '',
@@ -24,11 +24,16 @@ export function RunTabUI (props: RunTabProps) {
     cancelFn: () => {}
   })
   const [modals, setModals] = useState<Modal[]>([])
+  const [runTab, dispatch] = useReducer(runTabReducer, runTabInitialState)
   const REACT_API = { runTab }
 
   useEffect(() => {
-    setupEvents()
-  }, [])
+    initRunTab(plugin)(dispatch)
+  }, [plugin])
+
+  useEffect(() => {
+    plugin.onReady(runTab)
+  }, [REACT_API])
 
   useEffect(() => {
     if (modals.length > 0) {
@@ -57,10 +62,6 @@ export function RunTabUI (props: RunTabProps) {
     }
   }, [runTab.notification])
 
-  useEffect(() => {
-    props.plugin.onReady(runTab)
-  }, [REACT_API])
-
   // eslint-disable-next-line no-undef
   const modal = (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => {
     setModals(modals => {
@@ -75,53 +76,25 @@ export function RunTabUI (props: RunTabProps) {
     })
   }
 
-  const handleInputEndpoint = (e: any) => {
-    setWeb3Endpoint(e.target.value)
-  }
-
-  function executionContextModal (executionContext: { context: string, fork: string }) {
-    modal('External node request', web3ProviderDialogBody(), 'OK', () => { setProviderFromEndpoint(executionContext) }, 'Cancel', () => { setFinalContext() })
-  }
-
-  const web3ProviderDialogBody = () => {
-    const thePath = '<path/to/local/folder/for/test/chain>'
-
-    return (
-      <>
-        <div className="">
-            Note: To use Geth & https://remix.ethereum.org, configure it to allow requests from Remix:(see <a href="https://geth.ethereum.org/docs/rpc/server" target="_blank">Geth Docs on rpc server</a>)
-          <div className="border p-1">geth --http --http.corsdomain https://remix.ethereum.org</div>
-          <br />
-          To run Remix & a local Geth test node, use this command: (see <a href="https://geth.ethereum.org/getting-started/dev-mode" target="_blank">Geth Docs on Dev mode</a>)
-          <div className="border p-1">geth --http --http.corsdomain="${window.origin}" --http.api web3,eth,debug,personal,net --vmdebug --datadir ${thePath} --dev console</div>
-          <br />
-          <br />
-          <b>WARNING:</b> It is not safe to use the --http.corsdomain flag with a wildcard: <b>--http.corsdomain *</b>
-          <br />
-          <br />For more info: <a href="https://remix-ide.readthedocs.io/en/latest/run.html#more-about-web3-provider" target="_blank">Remix Docs on Web3 Provider</a>
-          <br />
-          <br />
-          Web3 Provider Endpoint
-        </div>
-        <input
-          onInput={handleInputEndpoint}
-          type='text'
-          name='prompt_text'
-          id='prompt_text'
-          style={{ width: '100%' }}
-          className="form-control"
-          defaultValue={runTab.externalEndpoint}
-          data-id="modalDialogCustomPromptText"
-        />
-      </>
-    )
-  }
-
   return (
     <Fragment>
       <div className="udapp_runTabView run-tab" id="runTabView" data-id="runTabView">
         <div className="list-group list-group-flush">
-          <SettingsUI networkName={runTab.networkName} personalMode={runTab.personalMode} selectExEnv={runTab.selectExEnv} setExecEnv={setExecEnv} accounts={runTab.accounts} setAccount={setAccount} setUnit={setUnit} sendValue={runTab.sendValue} sendUnit={runTab.sendUnit} gasLimit={runTab.gasLimit} setGasFee={setGasFee} providers={runTab.providers} setExecutionContext={setExecutionContext} />
+          <SettingsUI
+            networkName={runTab.networkName}
+            personalMode={runTab.personalMode}
+            selectExEnv={runTab.selectExEnv}
+            externalEndpoint={runTab.externalEndpoint}
+            setWeb3Endpoint={setWeb3Endpoint}
+            accounts={runTab.accounts}
+            setAccount={setAccount}
+            setUnit={setUnit}
+            sendValue={runTab.sendValue}
+            sendUnit={runTab.sendUnit}
+            gasLimit={runTab.gasLimit}
+            setGasFee={setGasFee}
+            providers={runTab.providers}
+            setExecutionContext={setExecutionContext} />
           <ContractDropdownUI exEnvironment={runTab.selectExEnv} />
           <RecorderUI />
           <InstanceContainerUI />
diff --git a/libs/remix-ui/run-tab/src/lib/types/blockchain.d.ts b/libs/remix-ui/run-tab/src/lib/types/blockchain.d.ts
index 39a9292a0f..bd19058d4a 100644
--- a/libs/remix-ui/run-tab/src/lib/types/blockchain.d.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/blockchain.d.ts
@@ -19,7 +19,7 @@ export class Blockchain extends Plugin<any, any> {
     providers: {};
     getCurrentProvider(): any;
     /** Return the list of accounts */
-    getAccounts(cb: any): any;
+    getAccounts(cb?: any): any;
     deployContractAndLibraries(selectedContract: any, args: any, contractMetadata: any, compilerContracts: any, callbacks: any, confirmationCb: any): void;
     deployContractWithLibrary(selectedContract: any, args: any, contractMetadata: any, compilerContracts: any, callbacks: any, confirmationCb: any): void;
     createContract(selectedContract: any, data: any, continueCb: any, promptCb: any, confirmationCb: any, finalCb: any): void;
diff --git a/libs/remix-ui/run-tab/src/lib/types/index.ts b/libs/remix-ui/run-tab/src/lib/types/index.ts
index d2b19b5577..4aa70d5304 100644
--- a/libs/remix-ui/run-tab/src/lib/types/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/index.ts
@@ -1,13 +1,7 @@
-import { RunTabState } from '../reducers/runTab'
-import { Blockchain } from './blockchain'
-
-export interface Udapp {
-  onReady: (api: RunTabState) => void,
-  REACT_API: RunTabState,
-  blockchain: Blockchain
-}
+/* eslint-disable no-undef */
+import { RunTab } from './run-tab'
 export interface RunTabProps {
-  plugin: Udapp
+  plugin: RunTab
 }
 
 export interface SettingsProps {
@@ -25,7 +19,7 @@ export interface SettingsProps {
   sendUnit: string,
   gasLimit: number,
   setGasFee: (value: number) => void,
-  setExecEnv: (env: string) => void,
+  setWeb3Endpoint: (endpoint: string) => void,
   personalMode: boolean,
   networkName: string,
   providers: {
@@ -41,11 +35,12 @@ export interface SettingsProps {
     isSuccessful: boolean,
     error: string
   },
-  setExecutionContext: (executionContext: { context: string, fork: string }) => void
+  setExecutionContext: (executionContext: { context: string, fork: string }, displayContent: JSX.Element) => void,
+  externalEndpoint: string
 }
 
 export interface EnvironmentProps {
-  setExecEnv: (env: string) => void,
+  setWeb3Endpoint: (endpoint: string) => void,
   selectedEnv: string,
   providers: {
     providerList: {
@@ -60,7 +55,8 @@ export interface EnvironmentProps {
     isSuccessful: boolean,
     error: string
   },
-  setExecutionContext: (executionContext: { context: string, fork: string }) => void
+  setExecutionContext: (executionContext: { context: string, fork: string }, displayContent: JSX.Element) => void,
+  externalEndpoint: string
 }
 
 export interface NetworkProps {
diff --git a/libs/remix-ui/run-tab/src/lib/types/run-tab.d.ts b/libs/remix-ui/run-tab/src/lib/types/run-tab.d.ts
new file mode 100644
index 0000000000..a1c50e6495
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/types/run-tab.d.ts
@@ -0,0 +1,41 @@
+export class RunTab extends ViewPlugin {
+    constructor(blockchain: any, config: any, fileManager: any, editor: any, filePanel: any, compilersArtefacts: any, networkModule: any, mainView: any, fileProvider: any);
+    event: any;
+    config: any;
+    blockchain: Blockchain;
+    fileManager: any;
+    editor: any;
+    logCallback: (msg: any) => void;
+    filePanel: any;
+    compilersArtefacts: any;
+    networkModule: any;
+    fileProvider: any;
+    REACT_API: RunTabState;
+    el: HTMLDivElement;
+    setupEvents(): void;
+    getSettings(): any;
+    setEnvironmentMode(env: any): Promise<void>;
+    createVMAccount(newAccount: any): any;
+    sendTransaction(tx: any): any;
+    getAccounts(cb: any): any;
+    pendingTransactionsCount(): any;
+    renderInstanceContainer(): void;
+    instanceContainer: any;
+    noInstancesText: any;
+    renderSettings(): void;
+    settingsUI: any;
+    renderDropdown(udappUI: any, fileManager: any, compilersArtefacts: any, config: any, editor: any, logCallback: any): void;
+    contractDropdownUI: any;
+    renderRecorder(udappUI: any, fileManager: any, config: any, logCallback: any): void;
+    recorderCount: any;
+    recorderInterface: any;
+    renderRecorderCard(): void;
+    recorderCard: any;
+    udappUI: any;
+    renderComponent(): void;
+    onReady(api: any): void;
+}
+import { ViewPlugin } from "@remixproject/engine-web/lib/view";
+import { Blockchain } from "./blockchain";
+import { RunTabState } from "../reducers/runTab";
+

From f61eceb57c0c91776f6980b4e68b3a3763fa633e Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Mon, 22 Nov 2021 11:18:58 +0100
Subject: [PATCH 119/168] Add toaster to run-tab

---
 .../remix-ui/run-tab/src/lib/actions/index.ts | 16 +++++----
 .../run-tab/src/lib/actions/payload.ts        | 13 +++++++
 .../run-tab/src/lib/reducers/runTab.ts        | 22 ++++++++++--
 libs/remix-ui/run-tab/src/lib/run-tab.tsx     | 36 +++++++++++++++++--
 4 files changed, 77 insertions(+), 10 deletions(-)

diff --git a/libs/remix-ui/run-tab/src/lib/actions/index.ts b/libs/remix-ui/run-tab/src/lib/actions/index.ts
index 4159ec33a0..f5a30c0cea 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/index.ts
@@ -3,7 +3,7 @@ import React from 'react'
 import * as ethJSUtil from 'ethereumjs-util'
 import Web3 from 'web3'
 import { shortenAddress } from '@remix-ui/helper'
-import { addProvider, displayNotification, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, removeProvider, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setNetworkName, setSelectedAccount, setSendUnit, setSendValue } from './payload'
+import { addProvider, displayNotification, displayPopUp, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, hidePopUp, removeProvider, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setNetworkName, setSelectedAccount, setSendUnit, setSendValue } from './payload'
 import { RunTab } from '../types/run-tab'
 
 let plugin: RunTab, dispatch: React.Dispatch<any>
@@ -115,7 +115,7 @@ const fillAccountsList = async () => {
       dispatch(fetchAccountsListFailed(e.message))
     })
   } catch (e) {
-    // addTooltip(`Cannot get account list: ${e}`)
+    dispatch(displayPopUp(`Cannot get account list: ${e}`))
   }
 }
 
@@ -158,7 +158,7 @@ const setFinalContext = () => {
   const value = _getProviderDropdownValue()
 
   setExecEnv(value)
-  // this.event.trigger('clearInstance', [])
+  // this.event.trigger('clearInstance', []) //check cleaIinstance event in run-tab.js
 }
 
 const _getProviderDropdownValue = (): string => {
@@ -178,7 +178,7 @@ const setNetworkNameFromProvider = (networkName: string) => {
 
 const addExternalProvider = (network) => {
   dispatch(addProvider(network))
-  // addTooltip(yo`<span><b>${network.name}</b> provider added</span>`)
+  dispatch(displayPopUp(`${network.name} provider added`))
 }
 
 const removeExternalProvider = (name) => {
@@ -190,15 +190,19 @@ export const setExecutionContext = (executionContext: { context: string, fork: s
   plugin.blockchain.changeExecutionContext(executionContext, () => {
     dispatch(displayNotification('External node request', displayContent, 'OK', 'Cancel', () => {
       plugin.blockchain.setProviderFromEndpoint(plugin.REACT_API.externalEndpoint, executionContext, (alertMsg) => {
-        // if (alertMsg) addTooltip(alertMsg)
+        if (alertMsg) dispatch(displayPopUp(alertMsg))
         setFinalContext()
       })
     }, () => { setFinalContext() }))
   }, (alertMsg) => {
-    // addTooltip(alertMsg)
+    dispatch(displayPopUp(alertMsg))
   }, setFinalContext())
 }
 
 export const setWeb3Endpoint = (endpoint: string) => {
   dispatch(setExternalEndpoint(endpoint))
 }
+
+export const clearPopUp = async () => {
+  dispatch(hidePopUp())
+}
diff --git a/libs/remix-ui/run-tab/src/lib/actions/payload.ts b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
index ea21748146..09bedf03d9 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/payload.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
@@ -102,3 +102,16 @@ export const setExternalEndpoint = (endpoint: string) => {
     payload: endpoint
   }
 }
+
+export const displayPopUp = (message: string) => {
+  return {
+    type: 'DISPLAY_POPUP_MESSAGE',
+    payload: message
+  }
+}
+
+export const hidePopUp = () => {
+  return {
+    type: 'HIDE_POPUP_MESSAGE'
+  }
+}
diff --git a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
index aa318adb56..3362621b88 100644
--- a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
+++ b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
@@ -38,7 +38,8 @@ export interface RunTabState {
     labelOk: string,
     labelCancel: string
   },
-  externalEndpoint: string
+  externalEndpoint: string,
+  popup: string
 }
 
 export const runTabInitialState: RunTabState = {
@@ -96,7 +97,8 @@ export const runTabInitialState: RunTabState = {
     labelOk: '',
     labelCancel: ''
   },
-  externalEndpoint: 'http://127.0.0.1:8545'
+  externalEndpoint: 'http://127.0.0.1:8545',
+  popup: ''
 }
 
 export const runTabReducer = (state: RunTabState = runTabInitialState, action: Action) => {
@@ -305,6 +307,22 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
       }
     }
 
+    case 'DISPLAY_POPUP_MESSAGE': {
+      const payload = action.payload as string
+
+      return {
+        ...state,
+        popup: payload
+      }
+    }
+
+    case 'HIDE_POPUP_MESSAGE': {
+      return {
+        ...state,
+        popup: ''
+      }
+    }
+
     default:
       return state
   }
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
index edf41f8a68..272329d78d 100644
--- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -9,7 +9,7 @@ import { RecorderUI } from './components/recorderCardUI'
 import { SettingsUI } from './components/settingsUI'
 import { Modal, RunTabProps } from './types'
 import { runTabInitialState, runTabReducer } from './reducers/runTab'
-import { initRunTab, setAccount, setUnit, setGasFee, setExecutionContext, setWeb3Endpoint } from './actions'
+import { initRunTab, setAccount, setUnit, setGasFee, setExecutionContext, setWeb3Endpoint, clearPopUp } from './actions'
 import './css/run-tab.css'
 
 export function RunTabUI (props: RunTabProps) {
@@ -24,6 +24,8 @@ export function RunTabUI (props: RunTabProps) {
     cancelFn: () => {}
   })
   const [modals, setModals] = useState<Modal[]>([])
+  const [focusToaster, setFocusToaster] = useState<string>('')
+  const [toasters, setToasters] = useState<string[]>([])
   const [runTab, dispatch] = useReducer(runTabReducer, runTabInitialState)
   const REACT_API = { runTab }
 
@@ -62,6 +64,24 @@ export function RunTabUI (props: RunTabProps) {
     }
   }, [runTab.notification])
 
+  useEffect(() => {
+    if (toasters.length > 0) {
+      setFocusToaster(() => {
+        return toasters[0]
+      })
+      const toasterList = toasters.slice()
+
+      toasterList.shift()
+      setToasters(toasterList)
+    }
+  }, [toasters])
+
+  useEffect(() => {
+    if (runTab.popup) {
+      toast(runTab.popup)
+    }
+  }, [runTab.popup])
+
   // eslint-disable-next-line no-undef
   const modal = (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => {
     setModals(modals => {
@@ -76,6 +96,18 @@ export function RunTabUI (props: RunTabProps) {
     })
   }
 
+  const handleToaster = () => {
+    setFocusToaster('')
+    clearPopUp()
+  }
+
+  const toast = (toasterMsg: string) => {
+    setToasters(messages => {
+      messages.push(toasterMsg)
+      return [...messages]
+    })
+  }
+
   return (
     <Fragment>
       <div className="udapp_runTabView run-tab" id="runTabView" data-id="runTabView">
@@ -101,7 +133,7 @@ export function RunTabUI (props: RunTabProps) {
         </div>
       </div>
       <ModalDialog id='fileSystem' { ...focusModal } handleHide={ handleHideModal } />
-      {/* <Toaster message={focusToaster} handleHide={handleToaster} /> */}
+      <Toaster message={focusToaster} handleHide={handleToaster} />
     </Fragment>
   )
 }

From 13bcf203630caca39e7bdcf005b93338193ea881 Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Mon, 6 Dec 2021 11:00:21 +0100
Subject: [PATCH 120/168] Implement add new account for JVM

---
 .../remix-ui/run-tab/src/lib/actions/index.ts | 56 +++++++++++++++----
 .../run-tab/src/lib/actions/payload.ts        | 14 +++++
 .../run-tab/src/lib/components/account.tsx    | 40 +++++++------
 .../run-tab/src/lib/components/card.tsx       | 36 ------------
 .../run-tab/src/lib/components/settingsUI.tsx |  2 +-
 .../run-tab/src/lib/reducers/runTab.ts        | 26 ++++++++-
 libs/remix-ui/run-tab/src/lib/run-tab.tsx     |  8 ++-
 libs/remix-ui/run-tab/src/lib/types/index.ts  | 10 +++-
 8 files changed, 120 insertions(+), 72 deletions(-)
 delete mode 100644 libs/remix-ui/run-tab/src/lib/components/card.tsx

diff --git a/libs/remix-ui/run-tab/src/lib/actions/index.ts b/libs/remix-ui/run-tab/src/lib/actions/index.ts
index f5a30c0cea..e3f6cd91ed 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/index.ts
@@ -3,7 +3,7 @@ import React from 'react'
 import * as ethJSUtil from 'ethereumjs-util'
 import Web3 from 'web3'
 import { shortenAddress } from '@remix-ui/helper'
-import { addProvider, displayNotification, displayPopUp, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, hidePopUp, removeProvider, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setNetworkName, setSelectedAccount, setSendUnit, setSendValue } from './payload'
+import { addProvider, displayNotification, displayPopUp, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, hidePopUp, removeProvider, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setMatchPassphrase, setNetworkName, setPassphrase, setSelectedAccount, setSendUnit, setSendValue } from './payload'
 import { RunTab } from '../types/run-tab'
 
 let plugin: RunTab, dispatch: React.Dispatch<any>
@@ -74,8 +74,8 @@ const setupEvents = () => {
   //   fillAccountsList()
   // }, 1000)
   // fillAccountsList()
-  setTimeout(() => {
-    fillAccountsList()
+  setTimeout(async () => {
+    await fillAccountsList()
   }, 0)
 }
 
@@ -98,18 +98,21 @@ const fillAccountsList = async () => {
     dispatch(fetchAccountsListRequest())
     const promise = plugin.blockchain.getAccounts()
 
-    promise.then((accounts: string[]) => {
+    promise.then(async (accounts: string[]) => {
       const loadedAccounts = {}
 
       if (!accounts) accounts = []
-      accounts.forEach((account) => {
-        plugin.blockchain.getBalanceInEther(account, (err, balance) => {
-          if (err) return
-          const updated = shortenAddress(account, balance)
-
-          loadedAccounts[account] = updated
+      await (Promise as any).allSettled(accounts.map((account) => {
+        return new Promise((resolve, reject) => {
+          plugin.blockchain.getBalanceInEther(account, (err, balance) => {
+            if (err) return reject(err)
+            const updated = shortenAddress(account, balance)
+
+            loadedAccounts[account] = updated
+            resolve(account)
+          })
         })
-      })
+      }))
       dispatch(fetchAccountsListSuccess(loadedAccounts))
     }).catch((e) => {
       dispatch(fetchAccountsListFailed(e.message))
@@ -206,3 +209,34 @@ export const setWeb3Endpoint = (endpoint: string) => {
 export const clearPopUp = async () => {
   dispatch(hidePopUp())
 }
+
+// eslint-disable-next-line no-undef
+export const createNewBlockchainAccount = async (cbMessage: JSX.Element) => {
+  plugin.blockchain.newAccount(
+    '',
+    (cb) => {
+      dispatch(displayNotification('Enter Passphrase', cbMessage, 'OK', 'Cancel', async () => {
+        if (plugin.REACT_API.passphrase === plugin.REACT_API.matchPassphrase) {
+          cb(plugin.REACT_API.passphrase)
+        } else {
+          return dispatch(displayNotification('Error', 'Passphase does not match', 'OK', null))
+        }
+      }, () => {}))
+    },
+    async (error, address) => {
+      if (error) {
+        return dispatch(displayPopUp('Cannot create an account: ' + error))
+      }
+      dispatch(displayPopUp(`account ${address} created`))
+      await fillAccountsList()
+    }
+  )
+}
+
+export const setPassphrasePrompt = (passphrase: string) => {
+  dispatch(setPassphrase(passphrase))
+}
+
+export const setMatchPassphrasePrompt = (passphrase: string) => {
+  dispatch(setMatchPassphrase(passphrase))
+}
diff --git a/libs/remix-ui/run-tab/src/lib/actions/payload.ts b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
index 09bedf03d9..8d47f7d060 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/payload.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
@@ -115,3 +115,17 @@ export const hidePopUp = () => {
     type: 'HIDE_POPUP_MESSAGE'
   }
 }
+
+export const setPassphrase = (passphrase: string) => {
+  return {
+    type: 'SET_PASSPHRASE',
+    payload: passphrase
+  }
+}
+
+export const setMatchPassphrase = (passphrase: string) => {
+  return {
+    type: 'SET_MATCH_PASSPHRASE',
+    payload: passphrase
+  }
+}
diff --git a/libs/remix-ui/run-tab/src/lib/components/account.tsx b/libs/remix-ui/run-tab/src/lib/components/account.tsx
index 527aad815b..f164dd20ba 100644
--- a/libs/remix-ui/run-tab/src/lib/components/account.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/account.tsx
@@ -55,24 +55,7 @@ export function AccountUI (props: AccountProps) {
   }, [props.selectExEnv, props.personalMode])
 
   const newAccount = () => {
-    // dispatch createNewBlockchainAccount
-    // this.blockchain.newAccount(
-    //   '',
-    //   (cb) => {
-    //     modalDialogCustom.promptPassphraseCreation((error, passphrase) => {
-    //       if (error) {
-    //         return modalDialogCustom.alert(error)
-    //       }
-    //       cb(passphrase)
-    //     }, () => {})
-    //   },
-    //   (error, address) => {
-    //     if (error) {
-    //       return addTooltip('Cannot create an account: ' + error)
-    //     }
-    //     addTooltip(`account ${address} created`)
-    //   }
-    // )
+    props.createNewBlockchainAccount(passphrasePrompt())
   }
 
   const signMessage = () => {
@@ -122,6 +105,27 @@ export function AccountUI (props: AccountProps) {
   //   })
   }
 
+  const handlePassphrase = (e) => {
+    props.setPassphrase(e.target.value)
+  }
+
+  const handleMatchPassphrase = (e) => {
+    props.setMatchPassphrase(e.target.value)
+  }
+
+  const passphrasePrompt = () => {
+    return (
+      <div> Please provide a Passphrase for the account creation
+        <div>
+          <input id="prompt1" type="password" name='prompt_text' style={{ width: '100%' }} onInput={handlePassphrase} />
+          <br />
+          <br />
+          <input id="prompt2" type="password" name='prompt_text' style={{ width: '100%' }} onInput={handleMatchPassphrase} />
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="udapp_crow">
       <label className="udapp_settingsLabel">
diff --git a/libs/remix-ui/run-tab/src/lib/components/card.tsx b/libs/remix-ui/run-tab/src/lib/components/card.tsx
deleted file mode 100644
index a997ecc2ad..0000000000
--- a/libs/remix-ui/run-tab/src/lib/components/card.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-// eslint-disable-next-line no-use-before-define
-import React, { useRef, useState } from 'react'
-import { CardProps } from '../types'
-import '../css/card.css'
-
-export function Card (props: CardProps) {
-
-  return (
-    self._view.statusBar = yo``
-
-    function trigger (el) {
-      var body = self._view.cardBody
-      var status = self._view.statusBar
-      if (el.classList) {
-        el.classList.toggle('fa-angle-up')
-        var arrow = el.classList.toggle('fa-angle-down') ? 'up' : 'down'
-        self.event.trigger('expandCollapseCard', [arrow, body, status])
-      }
-    }
-
-    <div class="${css.cardContainer} list-group-item border-0">
-      <div class="d-flex justify-content-between align-items-center" onclick=${() => trigger(self._view.arrow)}>
-        <div class="pr-1 d-flex flex-row">
-          <div>${self._opts.title}</div>
-          <div>${self._opts.collapsedView}</div>
-        </div>
-        <div>
-          <div>
-            <i class="${css.arrow} fas fa-angle-down" onclick="${() => trigger(this)}"></i>
-          </div>
-        </div>
-    </div>
-      <div></div>
-    </div>
-  )
-}
diff --git a/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx b/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
index 45c94f5e97..f4419b4462 100644
--- a/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
@@ -89,7 +89,7 @@ export function SettingsUI (props: SettingsProps) {
     <div className="udapp_settings">
       <EnvironmentUI setWeb3Endpoint={props.setWeb3Endpoint} selectedEnv={props.selectExEnv} providers={props.providers} setExecutionContext={props.setExecutionContext} externalEndpoint={props.externalEndpoint} />
       <NetworkUI networkName={props.networkName} />
-      <AccountUI personalMode={props.personalMode} selectExEnv={props.selectExEnv} accounts={props.accounts} setAccount={props.setAccount} />
+      <AccountUI personalMode={props.personalMode} selectExEnv={props.selectExEnv} accounts={props.accounts} setAccount={props.setAccount} createNewBlockchainAccount={props.createNewBlockchainAccount} setPassphrase={props.setPassphrase} setMatchPassphrase={props.setMatchPassphrase} />
       <GasPriceUI gasLimit={props.gasLimit} setGasFee={props.setGasFee} />
       <ValueUI setUnit={props.setUnit} sendValue={props.sendValue} sendUnit={props.sendUnit} />
     </div>
diff --git a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
index 3362621b88..d251d3e3ab 100644
--- a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
+++ b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
@@ -39,7 +39,9 @@ export interface RunTabState {
     labelCancel: string
   },
   externalEndpoint: string,
-  popup: string
+  popup: string,
+  passphrase: string,
+  matchPassphrase: string
 }
 
 export const runTabInitialState: RunTabState = {
@@ -98,7 +100,9 @@ export const runTabInitialState: RunTabState = {
     labelCancel: ''
   },
   externalEndpoint: 'http://127.0.0.1:8545',
-  popup: ''
+  popup: '',
+  passphrase: '',
+  matchPassphrase: ''
 }
 
 export const runTabReducer = (state: RunTabState = runTabInitialState, action: Action) => {
@@ -323,6 +327,24 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
       }
     }
 
+    case 'SET_PASSPHRASE': {
+      const passphrase: string = action.payload
+
+      return {
+        ...state,
+        passphrase
+      }
+    }
+
+    case 'SET_MATCH_PASSPHRASE': {
+      const passphrase: string = action.payload
+
+      return {
+        ...state,
+        matchPassphrase: passphrase
+      }
+    }
+
     default:
       return state
   }
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
index 272329d78d..a87f0ced75 100644
--- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -9,7 +9,7 @@ import { RecorderUI } from './components/recorderCardUI'
 import { SettingsUI } from './components/settingsUI'
 import { Modal, RunTabProps } from './types'
 import { runTabInitialState, runTabReducer } from './reducers/runTab'
-import { initRunTab, setAccount, setUnit, setGasFee, setExecutionContext, setWeb3Endpoint, clearPopUp } from './actions'
+import { initRunTab, setAccount, setUnit, setGasFee, setExecutionContext, setWeb3Endpoint, clearPopUp, createNewBlockchainAccount, setPassphrasePrompt, setMatchPassphrasePrompt } from './actions'
 import './css/run-tab.css'
 
 export function RunTabUI (props: RunTabProps) {
@@ -126,7 +126,11 @@ export function RunTabUI (props: RunTabProps) {
             gasLimit={runTab.gasLimit}
             setGasFee={setGasFee}
             providers={runTab.providers}
-            setExecutionContext={setExecutionContext} />
+            setExecutionContext={setExecutionContext}
+            createNewBlockchainAccount={createNewBlockchainAccount}
+            setPassphrase={setPassphrasePrompt}
+            setMatchPassphrase={setMatchPassphrasePrompt}
+          />
           <ContractDropdownUI exEnvironment={runTab.selectExEnv} />
           <RecorderUI />
           <InstanceContainerUI />
diff --git a/libs/remix-ui/run-tab/src/lib/types/index.ts b/libs/remix-ui/run-tab/src/lib/types/index.ts
index 4aa70d5304..7c86657ebe 100644
--- a/libs/remix-ui/run-tab/src/lib/types/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/index.ts
@@ -36,7 +36,10 @@ export interface SettingsProps {
     error: string
   },
   setExecutionContext: (executionContext: { context: string, fork: string }, displayContent: JSX.Element) => void,
-  externalEndpoint: string
+  externalEndpoint: string,
+  createNewBlockchainAccount: (cbMessage: JSX.Element) => void,
+  setPassphrase: (passphrase: string) => void,
+  setMatchPassphrase: (passphrase: string) => void
 }
 
 export interface EnvironmentProps {
@@ -73,7 +76,10 @@ export interface AccountProps {
     error: string
   },
   setAccount: (account: string) => void,
-  personalMode: boolean
+  personalMode: boolean,
+  createNewBlockchainAccount: (cbMessage: JSX.Element) => void,
+  setPassphrase: (passphrase: string) => void,
+  setMatchPassphrase: (passphrase: string) => void
 }
 
 export interface GasPriceProps {

From 4c2127e2756e6565f7acb5fffa719b3f8661f210 Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Mon, 6 Dec 2021 14:08:53 +0100
Subject: [PATCH 121/168] Implemened sign message

---
 .../remix-ui/run-tab/src/lib/actions/index.ts |  14 +-
 .../run-tab/src/lib/components/account.tsx    | 123 +++++++++++-------
 .../run-tab/src/lib/components/settingsUI.tsx |   2 +-
 .../run-tab/src/lib/reducers/runTab.ts        |   2 +-
 libs/remix-ui/run-tab/src/lib/run-tab.tsx     |   5 +-
 libs/remix-ui/run-tab/src/lib/types/index.ts  |  10 +-
 6 files changed, 102 insertions(+), 54 deletions(-)

diff --git a/libs/remix-ui/run-tab/src/lib/actions/index.ts b/libs/remix-ui/run-tab/src/lib/actions/index.ts
index e3f6cd91ed..2d1feaba6d 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/index.ts
@@ -219,8 +219,10 @@ export const createNewBlockchainAccount = async (cbMessage: JSX.Element) => {
         if (plugin.REACT_API.passphrase === plugin.REACT_API.matchPassphrase) {
           cb(plugin.REACT_API.passphrase)
         } else {
-          return dispatch(displayNotification('Error', 'Passphase does not match', 'OK', null))
+          dispatch(displayNotification('Error', 'Passphase does not match', 'OK', null))
         }
+        setPassphrase('')
+        setMatchPassphrase('')
       }, () => {}))
     },
     async (error, address) => {
@@ -240,3 +242,13 @@ export const setPassphrasePrompt = (passphrase: string) => {
 export const setMatchPassphrasePrompt = (passphrase: string) => {
   dispatch(setMatchPassphrase(passphrase))
 }
+
+// eslint-disable-next-line no-undef
+export const signMessageWithAddress = (account: string, message: string, modalContent: (hash: string, data: string) => JSX.Element, passphrase?: string) => {
+  plugin.blockchain.signMessage(message, account, passphrase, (err, msgHash, signedData) => {
+    if (err) {
+      return displayPopUp(err)
+    }
+    dispatch(displayNotification('Signed Message', modalContent(msgHash, signedData), 'OK', null, () => {}, null))
+  })
+}
diff --git a/libs/remix-ui/run-tab/src/lib/components/account.tsx b/libs/remix-ui/run-tab/src/lib/components/account.tsx
index f164dd20ba..a03ec87aaf 100644
--- a/libs/remix-ui/run-tab/src/lib/components/account.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/account.tsx
@@ -10,6 +10,8 @@ export function AccountUI (props: AccountProps) {
     classList: '',
     title: ''
   })
+  const [message, setMessage] = useState('')
+  const [signPassphrase, setSignPassphrase] = useState('')
 
   useEffect(() => {
     if (!selectedAccount && accounts.length > 0) props.setAccount(accounts[0])
@@ -24,7 +26,14 @@ export function AccountUI (props: AccountProps) {
         })
         break
 
-      case 'vm':
+      case 'vm-london':
+        setPlusOpt({
+          classList: '',
+          title: 'Create a new account'
+        })
+        break
+
+      case 'vm-berlin':
         setPlusOpt({
           classList: '',
           title: 'Create a new account'
@@ -55,54 +64,25 @@ export function AccountUI (props: AccountProps) {
   }, [props.selectExEnv, props.personalMode])
 
   const newAccount = () => {
-    props.createNewBlockchainAccount(passphrasePrompt())
+    props.createNewBlockchainAccount(passphraseCreationPrompt())
   }
 
   const signMessage = () => {
-    // dispatch signMessageWithBlockchainAccounts
-  //   this.blockchain.getAccounts((err, accounts) => {
-  //     if (err) {
-  //       return addTooltip(`Cannot get account list: ${err}`)
-  //     }
-
-    //     var signMessageDialog = { title: 'Sign a message', text: 'Enter a message to sign', inputvalue: 'Message to sign' }
-    //     var $txOrigin = this.el.querySelector('#txorigin')
-    //     if (!$txOrigin.selectedOptions[0] && (this.blockchain.isInjectedWeb3() || this.blockchain.isWeb3Provider())) {
-    //       return addTooltip('Account list is empty, please make sure the current provider is properly connected to remix')
-    //     }
-
-    //     var account = $txOrigin.selectedOptions[0].value
-
-    //     var promptCb = (passphrase) => {
-    //       const modal = modalDialogCustom.promptMulti(signMessageDialog, (message) => {
-    //         this.blockchain.signMessage(message, account, passphrase, (err, msgHash, signedData) => {
-    //           if (err) {
-    //             return addTooltip(err)
-    //           }
-    //           modal.hide()
-    //           modalDialogCustom.alert(yo`
-    //             <div>
-    //               <b>hash:</b><br>
-    //               <span id="remixRunSignMsgHash" data-id="settingsRemixRunSignMsgHash">${msgHash}</span>
-    //               <br><b>signature:</b><br>
-    //               <span id="remixRunSignMsgSignature" data-id="settingsRemixRunSignMsgSignature">${signedData}</span>
-    //             </div>
-    //           `)
-    //         })
-    //       }, false)
-    //     }
-
-  //     if (this.blockchain.isWeb3Provider()) {
-  //       return modalDialogCustom.promptPassphrase(
-  //         'Passphrase to sign a message',
-  //         'Enter your passphrase for this account to sign the message',
-  //         '',
-  //         promptCb,
-  //         false
-  //       )
-  //     }
-  //     promptCb()
-  //   })
+    if (!accounts[0]) {
+      return props.tooltip('Account list is empty, please make sure the current provider is properly connected to remix')
+    }
+
+    if (props.selectExEnv !== 'vm-london' && props.selectExEnv !== 'vm-berlin' && props.selectExEnv !== 'injected') {
+      return props.modal('Passphrase to sign a message', passphrasePrompt(), 'OK', () => {
+        props.modal('Sign a message', signMessagePrompt(), 'OK', () => {
+          props.signMessageWithAddress(selectedAccount, message, signedMessagePrompt, signPassphrase)
+        }, 'Cancel', null)
+      }, 'Cancel', null)
+    }
+
+    props.modal('Sign a message', signMessagePrompt(), 'OK', () => {
+      props.signMessageWithAddress(selectedAccount, message, signedMessagePrompt)
+    }, 'Cancel', null)
   }
 
   const handlePassphrase = (e) => {
@@ -113,7 +93,15 @@ export function AccountUI (props: AccountProps) {
     props.setMatchPassphrase(e.target.value)
   }
 
-  const passphrasePrompt = () => {
+  const handleMessageInput = (e) => {
+    setMessage(e.target.value)
+  }
+
+  const handleSignPassphrase = (e) => {
+    setSignPassphrase(e.target.value)
+  }
+
+  const passphraseCreationPrompt = () => {
     return (
       <div> Please provide a Passphrase for the account creation
         <div>
@@ -126,6 +114,45 @@ export function AccountUI (props: AccountProps) {
     )
   }
 
+  const passphrasePrompt = () => {
+    return (
+      <div> Enter your passphrase for this account to sign the message
+        <div>
+          <input id="prompt_text" type="password" name='prompt_text' className="form-control" style={{ width: '100%' }} onInput={handleSignPassphrase} data-id='modalDialogCustomPromptText' defaultValue={signPassphrase} />
+        </div>
+      </div>
+    )
+  }
+
+  const signMessagePrompt = () => {
+    return (
+      <div> Enter a message to sign
+        <div>
+          <textarea
+            id="prompt_text"
+            data-id="modalDialogCustomPromptText"
+            style={{ width: '100%' }}
+            rows={4}
+            cols={50}
+            onInput={handleMessageInput}
+            defaultValue={message}
+          ></textarea>
+        </div>
+      </div>
+    )
+  }
+
+  const signedMessagePrompt = (msgHash: string, signedData: string) => {
+    return (
+      <div>
+        <b>hash:</b><br />
+        <span id="remixRunSignMsgHash" data-id="settingsRemixRunSignMsgHash">{msgHash}</span>
+        <br /><b>signature:</b><br />
+        <span id="remixRunSignMsgSignature" data-id="settingsRemixRunSignMsgSignature">{signedData}</span>
+      </div>
+    )
+  }
+
   return (
     <div className="udapp_crow">
       <label className="udapp_settingsLabel">
@@ -137,7 +164,7 @@ export function AccountUI (props: AccountProps) {
       <div className="udapp_account">
         <select id="txorigin" data-id="runTabSelectAccount" name="txorigin" className="form-control udapp_select custom-select pr-4" value={selectedAccount} onChange={(e) => { props.setAccount(e.target.value) }}>
           {
-            Object.keys(loadedAccounts).map((value, index) => <option value={value} key={index}>{ loadedAccounts[value] }</option>)
+            accounts.map((value, index) => <option value={value} key={index}>{ loadedAccounts[value] }</option>)
           }
         </select>
         <div style={{ marginLeft: -5 }}><CopyToClipboard content={selectedAccount} direction='top' /></div>
diff --git a/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx b/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
index f4419b4462..92327c3c95 100644
--- a/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
@@ -89,7 +89,7 @@ export function SettingsUI (props: SettingsProps) {
     <div className="udapp_settings">
       <EnvironmentUI setWeb3Endpoint={props.setWeb3Endpoint} selectedEnv={props.selectExEnv} providers={props.providers} setExecutionContext={props.setExecutionContext} externalEndpoint={props.externalEndpoint} />
       <NetworkUI networkName={props.networkName} />
-      <AccountUI personalMode={props.personalMode} selectExEnv={props.selectExEnv} accounts={props.accounts} setAccount={props.setAccount} createNewBlockchainAccount={props.createNewBlockchainAccount} setPassphrase={props.setPassphrase} setMatchPassphrase={props.setMatchPassphrase} />
+      <AccountUI personalMode={props.personalMode} selectExEnv={props.selectExEnv} accounts={props.accounts} setAccount={props.setAccount} createNewBlockchainAccount={props.createNewBlockchainAccount} setPassphrase={props.setPassphrase} setMatchPassphrase={props.setMatchPassphrase} tooltip={props.tooltip} modal={props.modal} signMessageWithAddress={props.signMessageWithAddress} />
       <GasPriceUI gasLimit={props.gasLimit} setGasFee={props.setGasFee} />
       <ValueUI setUnit={props.setUnit} sendValue={props.sendValue} sendUnit={props.sendUnit} />
     </div>
diff --git a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
index d251d3e3ab..999d347ca9 100644
--- a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
+++ b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
@@ -55,7 +55,7 @@ export const runTabInitialState: RunTabState = {
   sendValue: '0',
   sendUnit: 'ether',
   gasLimit: 3000000,
-  selectExEnv: 'vm',
+  selectExEnv: 'vm-london',
   personalMode: false,
   networkName: '',
   providers: {
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
index a87f0ced75..73859a4835 100644
--- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -9,7 +9,7 @@ import { RecorderUI } from './components/recorderCardUI'
 import { SettingsUI } from './components/settingsUI'
 import { Modal, RunTabProps } from './types'
 import { runTabInitialState, runTabReducer } from './reducers/runTab'
-import { initRunTab, setAccount, setUnit, setGasFee, setExecutionContext, setWeb3Endpoint, clearPopUp, createNewBlockchainAccount, setPassphrasePrompt, setMatchPassphrasePrompt } from './actions'
+import { initRunTab, setAccount, setUnit, setGasFee, setExecutionContext, setWeb3Endpoint, clearPopUp, createNewBlockchainAccount, setPassphrasePrompt, setMatchPassphrasePrompt, signMessageWithAddress } from './actions'
 import './css/run-tab.css'
 
 export function RunTabUI (props: RunTabProps) {
@@ -130,6 +130,9 @@ export function RunTabUI (props: RunTabProps) {
             createNewBlockchainAccount={createNewBlockchainAccount}
             setPassphrase={setPassphrasePrompt}
             setMatchPassphrase={setMatchPassphrasePrompt}
+            modal={modal}
+            tooltip={toast}
+            signMessageWithAddress={signMessageWithAddress}
           />
           <ContractDropdownUI exEnvironment={runTab.selectExEnv} />
           <RecorderUI />
diff --git a/libs/remix-ui/run-tab/src/lib/types/index.ts b/libs/remix-ui/run-tab/src/lib/types/index.ts
index 7c86657ebe..8162ac3cea 100644
--- a/libs/remix-ui/run-tab/src/lib/types/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/index.ts
@@ -39,7 +39,10 @@ export interface SettingsProps {
   externalEndpoint: string,
   createNewBlockchainAccount: (cbMessage: JSX.Element) => void,
   setPassphrase: (passphrase: string) => void,
-  setMatchPassphrase: (passphrase: string) => void
+  setMatchPassphrase: (passphrase: string) => void,
+  modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
+  tooltip: (toasterMsg: string) => void,
+  signMessageWithAddress: (account: string, message: string, modalContent: (hash: string, data: string) => JSX.Element, passphrase?: string) => void
 }
 
 export interface EnvironmentProps {
@@ -79,7 +82,10 @@ export interface AccountProps {
   personalMode: boolean,
   createNewBlockchainAccount: (cbMessage: JSX.Element) => void,
   setPassphrase: (passphrase: string) => void,
-  setMatchPassphrase: (passphrase: string) => void
+  setMatchPassphrase: (passphrase: string) => void,
+  tooltip: (toasterMsg: string) => void,
+  modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
+  signMessageWithAddress: (account: string, message: string, modalContent: (hash: string, data: string) => JSX.Element, passphrase?: string) => void
 }
 
 export interface GasPriceProps {

From bad69524ad9ecf14bd3d25d4f18202ff0a7da127 Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Mon, 13 Dec 2021 20:28:57 +0100
Subject: [PATCH 122/168] Fix toggle multiparam

---
 .../copy-to-clipboard/copy-to-clipboard.tsx   |   2 +-
 .../remix-ui/run-tab/src/lib/actions/index.ts | 144 ++++++-
 .../run-tab/src/lib/actions/payload.ts        |  34 ++
 .../src/lib/components/contractDropdownUI.tsx | 395 ++++++++++--------
 .../src/lib/components/contractGUI.tsx        | 195 +++++++++
 .../run-tab/src/lib/components/settingsUI.tsx |  51 ---
 libs/remix-ui/run-tab/src/lib/css/run-tab.css | 280 +++++++++++++
 .../run-tab/src/lib/reducers/runTab.ts        |  89 +++-
 libs/remix-ui/run-tab/src/lib/run-tab.tsx     |   9 +-
 libs/remix-ui/run-tab/src/lib/types/index.ts  |  45 +-
 10 files changed, 1011 insertions(+), 233 deletions(-)
 create mode 100644 libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx

diff --git a/libs/remix-ui/clipboard/src/lib/copy-to-clipboard/copy-to-clipboard.tsx b/libs/remix-ui/clipboard/src/lib/copy-to-clipboard/copy-to-clipboard.tsx
index a892831d99..88d91d3867 100644
--- a/libs/remix-ui/clipboard/src/lib/copy-to-clipboard/copy-to-clipboard.tsx
+++ b/libs/remix-ui/clipboard/src/lib/copy-to-clipboard/copy-to-clipboard.tsx
@@ -36,7 +36,7 @@ export const CopyToClipboard = (props: ICopyToClipboard) => {
   }
 
   const reset = () => {
-    setTimeout(() => setMessage('Copy'), 500)
+    setTimeout(() => setMessage(tip), 500)
   }
 
   return (
diff --git a/libs/remix-ui/run-tab/src/lib/actions/index.ts b/libs/remix-ui/run-tab/src/lib/actions/index.ts
index 2d1feaba6d..a64dc80992 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/index.ts
@@ -3,15 +3,31 @@ import React from 'react'
 import * as ethJSUtil from 'ethereumjs-util'
 import Web3 from 'web3'
 import { shortenAddress } from '@remix-ui/helper'
-import { addProvider, displayNotification, displayPopUp, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, hidePopUp, removeProvider, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setMatchPassphrase, setNetworkName, setPassphrase, setSelectedAccount, setSendUnit, setSendValue } from './payload'
+import { addProvider, displayNotification, displayPopUp, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, fetchContractListSuccess, hidePopUp, removeProvider, setCurrentFile, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setLoadType, setMatchPassphrase, setNetworkName, setPassphrase, setSelectedAccount, setSendUnit, setSendValue } from './payload'
 import { RunTab } from '../types/run-tab'
+import { CompilerAbstract } from '@remix-project/remix-solidity'
+import * as remixLib from '@remix-project/remix-lib'
+declare global {
+  interface Window {
+    _paq: any
+  }
+}
 
+const _paq = window._paq = window._paq || []  //eslint-disable-line
+const txHelper = remixLib.execution.txHelper
 let plugin: RunTab, dispatch: React.Dispatch<any>
 
 export const initRunTab = (udapp: RunTab) => async (reducerDispatch: React.Dispatch<any>) => {
   plugin = udapp
   dispatch = reducerDispatch
   setupEvents()
+  // setInterval(() => {
+  //   fillAccountsList()
+  // }, 1000)
+  // fillAccountsList()
+  setTimeout(async () => {
+    await fillAccountsList()
+  }, 0)
 }
 
 const setupEvents = () => {
@@ -66,17 +82,40 @@ const setupEvents = () => {
   })
 
   plugin.blockchain.event.register('addProvider', provider => addExternalProvider(provider))
+
   plugin.blockchain.event.register('removeProvider', name => removeExternalProvider(name))
+
   plugin.on('manager', 'pluginActivated', addPluginProvider.bind(plugin))
+
   plugin.on('manager', 'pluginDeactivated', removePluginProvider.bind(plugin))
 
-  // setInterval(() => {
-  //   fillAccountsList()
-  // }, 1000)
-  // fillAccountsList()
-  setTimeout(async () => {
-    await fillAccountsList()
-  }, 0)
+  plugin.on('solidity', 'compilationFinished', (file, source, languageVersion, data) =>
+    broadcastCompilationResult(file, source, languageVersion, data)
+  )
+  plugin.on('vyper', 'compilationFinished', (file, source, languageVersion, data) =>
+    broadcastCompilationResult(file, source, languageVersion, data)
+  )
+  plugin.on('lexon', 'compilationFinished', (file, source, languageVersion, data) =>
+    broadcastCompilationResult(file, source, languageVersion, data)
+  )
+  plugin.on('yulp', 'compilationFinished', (file, source, languageVersion, data) =>
+    broadcastCompilationResult(file, source, languageVersion, data)
+  )
+  plugin.on('optimism-compiler', 'compilationFinished', (file, source, languageVersion, data) =>
+    broadcastCompilationResult(file, source, languageVersion, data)
+  )
+  plugin.fileManager.events.on('currentFileChanged', (currentFile: string) => {
+    if (/.(.abi)$/.exec(currentFile)) {
+      dispatch(setLoadType('abi'))
+    } else if (/.(.sol)$/.exec(currentFile) ||
+        /.(.vy)$/.exec(currentFile) || // vyper
+        /.(.lex)$/.exec(currentFile) || // lexon
+        /.(.contract)$/.exec(currentFile)) {
+      dispatch(setLoadType('sol'))
+    } else {
+      dispatch(setLoadType('other'))
+    }
+  })
 }
 
 const updateAccountBalances = () => {
@@ -252,3 +291,92 @@ export const signMessageWithAddress = (account: string, message: string, modalCo
     dispatch(displayNotification('Signed Message', modalContent(msgHash, signedData), 'OK', null, () => {}, null))
   })
 }
+
+const broadcastCompilationResult = (file, source, languageVersion, data) => {
+  // TODO check whether the tab is configured
+  const compiler = new CompilerAbstract(languageVersion, data, source)
+
+  plugin.compilersArtefacts[languageVersion] = compiler
+  plugin.compilersArtefacts.__last = compiler
+
+  const contracts = getCompiledContracts(compiler).map((contract) => {
+    return { name: languageVersion, alias: contract.name, file: contract.file }
+  })
+
+  dispatch(fetchContractListSuccess(contracts))
+  dispatch(setCurrentFile(file))
+  // this.enableAtAddress(success)
+  // this.enableContractNames(success)
+  // this.setInputParamsPlaceHolder()
+
+  // if (success) {
+  //   this.compFails.style.display = 'none'
+  // } else {
+  //   this.compFails.style.display = 'block'
+  // }
+}
+
+const loadContractFromAddress = (address, confirmCb, cb) => {
+  if (/.(.abi)$/.exec(plugin.config.get('currentFile'))) {
+    confirmCb(() => {
+      let abi
+      try {
+        abi = JSON.parse(plugin.editor.currentContent())
+      } catch (e) {
+        // return cb('Failed to parse the current file as JSON ABI.')
+      }
+      _paq.push(['trackEvent', 'udapp', 'AtAddressLoadWithABI'])
+      cb(null, 'abi', abi)
+    })
+  } else {
+    _paq.push(['trackEvent', 'udapp', 'AtAddressLoadWithArtifacts'])
+    cb(null, 'instance')
+  }
+}
+
+const getCompiledContracts = (compiler) => {
+  const contracts = []
+
+  compiler.visitContracts((contract) => {
+    contracts.push(contract)
+  })
+  return contracts
+}
+
+export const getSelectedContract = (contractName: string, compilerAtributeName: string) => {
+  if (!contractName) return null
+  const compiler = plugin.compilersArtefacts[compilerAtributeName]
+
+  if (!compiler) return null
+
+  const contract = compiler.getContract(contractName)
+
+  return {
+    name: contractName,
+    contract: contract,
+    compiler: compiler,
+    abi: contract.object.abi,
+    bytecodeObject: contract.object.evm.bytecode.object,
+    bytecodeLinkReferences: contract.object.evm.bytecode.linkReferences,
+    object: contract.object,
+    deployedBytecode: contract.object.evm.deployedBytecode,
+    getConstructorInterface: () => {
+      return txHelper.getConstructorInterface(contract.object.abi)
+    },
+    getConstructorInputs: () => {
+      const constructorInteface = txHelper.getConstructorInterface(contract.object.abi)
+
+      return txHelper.inputParametersDeclarationToString(constructorInteface.inputs)
+    },
+    isOverSizeLimit: () => {
+      const deployedBytecode = contract.object.evm.deployedBytecode
+
+      return (deployedBytecode && deployedBytecode.object.length / 2 > 24576)
+    },
+    metadata: contract.object.metadata
+  }
+}
+
+const getCompilerContracts = () => {
+  return plugin.compilersArtefacts.__last.getData().contracts
+}
diff --git a/libs/remix-ui/run-tab/src/lib/actions/payload.ts b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
index 8d47f7d060..2bfcb3f350 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/payload.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
@@ -129,3 +129,37 @@ export const setMatchPassphrase = (passphrase: string) => {
     payload: passphrase
   }
 }
+
+export const fetchContractListRequest = () => {
+  return {
+    type: 'FETCH_CONTRACT_LIST_REQUEST'
+  }
+}
+
+export const fetchContractListSuccess = (contracts: { name: string, alias: string, file: string }[]) => {
+  return {
+    type: 'FETCH_CONTRACT_LIST_SUCCESS',
+    payload: contracts
+  }
+}
+
+export const fetchContractListFailed = (error: string) => {
+  return {
+    type: 'FETCH_CONTRACT_LIST_FAILED',
+    payload: error
+  }
+}
+
+export const setLoadType = (type: 'abi' | 'sol' | 'other') => {
+  return {
+    type: 'SET_LOAD_TYPE',
+    payload: type
+  }
+}
+
+export const setCurrentFile = (file: string) => {
+  return {
+    type: 'SET_CURRENT_FILE',
+    payload: file
+  }
+}
diff --git a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
index 0ec4f1c0b2..d45e9f02fd 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
@@ -1,7 +1,8 @@
 // eslint-disable-next-line no-use-before-define
-import React, { SyntheticEvent, useEffect, useRef, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { ContractDropdownProps } from '../types'
 import * as ethJSUtil from 'ethereumjs-util'
+import { ContractGUI } from './contractGUI'
 
 export function ContractDropdownUI (props: ContractDropdownProps) {
   const [networkName, setNetworkName] = useState<string>('')
@@ -13,9 +14,31 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     content: ''
   })
   const [ipfsCheckedState, setIpfsCheckedState] = useState<boolean>(false)
-  const [loadType] = useState<string>('other')
-  const atAddressButtonInput = useRef(null)
-  const contracts = useRef(null)
+  const [atAddressOptions, setAtAddressOptions] = useState<{title: string, disabled: boolean}>({
+    title: 'address of contract',
+    disabled: true
+  })
+  const [address, setAddress] = useState<string>('')
+  const [contractOptions, setContractOptions] = useState<{title: string, disabled: boolean}>({
+    title: 'Please compile *.sol file to deploy or access a contract',
+    disabled: true
+  })
+  const [selectedContract, setSelectedContract] = useState<string>('')
+  const [compFails, setCompFails] = useState<'none' | 'block'>('none')
+  const [loadedContractData, setLoadedContractData] = useState<{
+    name: string,
+    contract: string,
+    compiler: any,
+    abi: any,
+    bytecodeObject: any,
+    bytecodeLinkReferences: any,
+    object: any,
+    deployedBytecode: any,
+    getConstructorInterface: () => any,
+    getConstructorInputs: () => any,
+    isOverSizeLimit: () => boolean,
+    metadata: any}>(null)
+  const { contractList, loadType, currentFile } = props.contracts
 
   useEffect(() => {
     enableAtAddress(false)
@@ -30,62 +53,166 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
   }, [])
 
   useEffect(() => {
-    if (props.exEnvironment === 'vm') setNetworkName('VM')
+    if (props.exEnvironment === 'vm-london' || props.exEnvironment === 'vm-berlin') setNetworkName('VM')
   }, [props.exEnvironment])
 
-  const enableAtAddress = (enable) => {
-    const atAddress = atAddressButtonInput.current
+  useEffect(() => {
+    if (!address || !ethJSUtil.isValidAddress(address)) enableAtAddress(false)
+  }, [address])
+
+  useEffect(() => {
+    if (/.(.abi)$/.exec(currentFile)) {
+      setAbiLabel({
+        display: 'block',
+        content: currentFile
+      })
+      enableAtAddress(true)
+    } else if (/.(.sol)$/.exec(currentFile) ||
+        /.(.vy)$/.exec(currentFile) || // vyper
+        /.(.lex)$/.exec(currentFile) || // lexon
+        /.(.contract)$/.exec(currentFile)) {
+      if (!selectedContract) enableAtAddress(false)
+    } else {
+      if (!selectedContract) enableAtAddress(false)
+    }
+    if (currentFile) {
+      enableContractNames(true)
+      setCompFails('none')
+    } else {
+      enableContractNames(false)
+      setCompFails('block')
+    }
+    if (contractList.length > 0) {
+      const contract = contractList.find(contract => contract.alias === selectedContract)
 
+      if (!selectedContract || !contract) setSelectedContract(contractList[0].alias)
+    }
+  }, [loadType, currentFile])
+
+  useEffect(() => {
+    if (selectedContract) {
+      const contract = contractList.find(contract => contract.alias === selectedContract)
+
+      setLoadedContractData(props.getSelectedContract(selectedContract, contract.name))
+    }
+  }, [selectedContract])
+
+  const enableAtAddress = (enable: boolean) => {
     if (enable) {
-      if (!atAddress.value || !ethJSUtil.isValidAddress(atAddress.value)) {
-        enableAtAddress(false)
-        return
-      }
-      atAddress.removeAttribute('disabled')
-      atAddress.setAttribute('title', 'Interact with the given contract.')
+      setAtAddressOptions({
+        disabled: false,
+        title: 'Interact with the given contract.'
+      })
     } else {
-      atAddress.setAttribute('disabled', true)
-      if (atAddress.value === '') {
-        atAddress.setAttribute('title', '⚠ Compile *.sol file or select *.abi file & then enter the address of deployed contract.')
-      } else {
-        atAddress.setAttribute('title', '⚠ Compile *.sol file or select *.abi file.')
-      }
+      setAtAddressOptions({
+        disabled: true,
+        title: address ? '⚠ Compile *.sol file or select *.abi file.' : '⚠ Compile *.sol file or select *.abi file & then enter the address of deployed contract.'
+      })
     }
   }
-  //   constructor (blockchain, dropdownLogic, logCallback, runView) {
-  //     this.blockchain = blockchain
-  //     this.dropdownLogic = dropdownLogic
-  //     this.logCallback = logCallback
-  //     this.runView = runView
-  //     this.event = new EventManager()
-
-  //     this.listenToEvents()
-  //     this.ipfsCheckedState = false
-  //     this.exEnvironment = blockchain.getProvider()
-  //     this.listenToContextChange()
-  //     this.loadType = 'other'
-  //   }
 
-  //   listenToEvents () {
-  //     this.dropdownLogic.event.register('newlyCompiled', (success, data, source, compiler, compilerFullName, file) => {
-  //       if (!this.selectContractNames) return
-  //       this.selectContractNames.innerHTML = ''
-  //       if (success) {
-  //         this.dropdownLogic.getCompiledContracts(compiler, compilerFullName).forEach((contract) => {
-  //           this.selectContractNames.appendChild(yo`<option value="${contract.name}" compiler="${compilerFullName}">${contract.name} - ${contract.file}</option>`)
-  //         })
-  //       }
-  //       this.enableAtAddress(success)
-  //       this.enableContractNames(success)
-  //       this.setInputParamsPlaceHolder()
+  const enableContractNames = (enable: boolean) => {
+    if (enable) {
+      setContractOptions({
+        disabled: false,
+        title: 'Select contract for Deploy or At Address.'
+      })
+    } else {
+      setContractOptions({
+        disabled: true,
+        title: loadType === 'sol' ? '⚠ Select and compile *.sol file to deploy or access a contract.' : '⚠ Selected *.abi file allows accessing contracts, select and compile *.sol file to deploy and access one.'
+      })
+    }
+  }
 
-  //       if (success) {
-  //         this.compFails.style.display = 'none'
-  //       } else {
-  //         this.compFails.style.display = 'block'
-  //       }
-  //     })
-  //   }
+  const clickCallback = (inputsValues) => {
+    createInstance(loadedContractData, inputsValues)
+  }
+
+  const createInstance = (selectedContract, args) => {
+    if (selectedContract.bytecodeObject.length === 0) {
+      return props.modal('Alert', 'This contract may be abstract, not implement an abstract parent\'s methods completely or not invoke an inherited contract\'s constructor correctly.', 'OK', () => {})
+    }
+
+    // var continueCb = (error, continueTxExecution, cancelCb) => {
+    //   if (error) {
+    //     var msg = typeof error !== 'string' ? error.message : error
+    //     modalDialog('Gas estimation failed', yo`<div>Gas estimation errored with the following message (see below).
+    //     The transaction execution will likely fail. Do you want to force sending? <br>
+    //     ${msg}
+    //     </div>`,
+    //     {
+    //       label: 'Send Transaction',
+    //       fn: () => {
+    //         continueTxExecution()
+    //       }
+    //     }, {
+    //       label: 'Cancel Transaction',
+    //       fn: () => {
+    //         cancelCb()
+    //       }
+    //     })
+    //   } else {
+    //     continueTxExecution()
+    //   }
+    // }
+
+    // const self = this
+
+    // var promptCb = (okCb, cancelCb) => {
+    //   modalDialogCustom.promptPassphrase('Passphrase requested', 'Personal mode is enabled. Please provide passphrase of account', '', okCb, cancelCb)
+    // }
+
+    // var statusCb = (msg) => {
+    //   return this.logCallback(msg)
+    // }
+
+    // var finalCb = (error, contractObject, address) => {
+    //   self.event.trigger('clearInstance')
+
+    //   if (error) {
+    //     return this.logCallback(error)
+    //   }
+    //   self.event.trigger('newContractInstanceAdded', [contractObject, address, contractObject.name])
+
+    //   const data = self.runView.compilersArtefacts.getCompilerAbstract(contractObject.contract.file)
+    //   self.runView.compilersArtefacts.addResolvedContract(helper.addressToString(address), data)
+    //   if (self.ipfsCheckedState) {
+    //     _paq.push(['trackEvent', 'udapp', 'DeployAndPublish', this.networkName + '_' + this.networkId])
+    //     publishToStorage('ipfs', self.runView.fileProvider, self.runView.fileManager, selectedContract)
+    //   } else {
+    //     _paq.push(['trackEvent', 'udapp', 'DeployOnly', this.networkName + '_' + this.networkId])
+    //   }
+    // }
+
+    // let contractMetadata
+    // try {
+    //   contractMetadata = await this.runView.call('compilerMetadata', 'deployMetadataOf', selectedContract.name, selectedContract.contract.file)
+    // } catch (error) {
+    //   return statusCb(`creation of ${selectedContract.name} errored: ${error.message ? error.message : error}`)
+    // }
+
+    // const compilerContracts = this.dropdownLogic.getCompilerContracts()
+    // const confirmationCb = this.getConfirmationCb(modalDialog, confirmDialog)
+
+    // if (selectedContract.isOverSizeLimit()) {
+    //   return modalDialog('Contract code size over limit', yo`<div>Contract creation initialization returns data with length of more than 24576 bytes. The deployment will likely fails. <br>
+    //   More info: <a href="https://github.com/ethereum/EIPs/blob/master/EIPS/eip-170.md" target="_blank">eip-170</a>
+    //   </div>`,
+    //   {
+    //     label: 'Force Send',
+    //     fn: () => {
+    //       this.deployContract(selectedContract, args, contractMetadata, compilerContracts, { continueCb, promptCb, statusCb, finalCb }, confirmationCb)
+    //     }
+    //   }, {
+    //     label: 'Cancel',
+    //     fn: () => {
+    //       this.logCallback(`creation of ${selectedContract.name} canceled by user.`)
+    //     }
+    //   })
+    // }
+    // this.deployContract(selectedContract, args, contractMetadata, compilerContracts, { continueCb, promptCb, statusCb, finalCb }, confirmationCb)
+  }
 
   //   listenToContextChange () {
   //     this.blockchain.event.register('networkStatus', ({ error, network }) => {
@@ -107,95 +234,6 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
   //     })
   //   }
 
-  //   setCheckedState (value) {
-  //     value = value === 'true' ? true : value === 'false' ? false : value
-  //     this.ipfsCheckedState = value
-  //     if (this.ipfsCheckbox) this.ipfsCheckbox.checked = value
-  //   }
-
-  //   enableContractNames (enable) {
-  //     if (enable) {
-  //       if (this.selectContractNames.value === '') return
-  //       this.selectContractNames.removeAttribute('disabled')
-  //       this.selectContractNames.setAttribute('title', 'Select contract for Deploy or At Address.')
-  //     } else {
-  //       this.selectContractNames.setAttribute('disabled', true)
-  //       if (this.loadType === 'sol') {
-  //         this.selectContractNames.setAttribute('title', '⚠ Select and compile *.sol file to deploy or access a contract.')
-  //       } else {
-  //         this.selectContractNames.setAttribute('title', '⚠ Selected *.abi file allows accessing contracts, select and compile *.sol file to deploy and access one.')
-  //       }
-  //     }
-  //   }
-
-  //   changeCurrentFile (currentFile) {
-  //     if (!this.selectContractNames) return
-  //     if (/.(.abi)$/.exec(currentFile)) {
-  //       this.createPanel.style.display = 'none'
-  //       this.orLabel.style.display = 'none'
-  //       this.compFails.style.display = 'none'
-  //       this.loadType = 'abi'
-  //       this.contractNamesContainer.style.display = 'block'
-  //       this.abiLabel.style.display = 'block'
-  //       this.abiLabel.innerHTML = currentFile
-  //       this.selectContractNames.style.display = 'none'
-  //       this.enableContractNames(true)
-  //       this.enableAtAddress(true)
-  //     } else if (/.(.sol)$/.exec(currentFile) ||
-  //         /.(.vy)$/.exec(currentFile) || // vyper
-  //         /.(.lex)$/.exec(currentFile) || // lexon
-  //         /.(.contract)$/.exec(currentFile)) {
-  //       this.createPanel.style.display = 'block'
-  //       this.orLabel.style.display = 'block'
-  //       this.contractNamesContainer.style.display = 'block'
-  //       this.loadType = 'sol'
-  //       this.selectContractNames.style.display = 'block'
-  //       this.abiLabel.style.display = 'none'
-  //       if (this.selectContractNames.value === '') this.enableAtAddress(false)
-  //     } else {
-  //       this.loadType = 'other'
-  //       this.createPanel.style.display = 'block'
-  //       this.orLabel.style.display = 'block'
-  //       this.contractNamesContainer.style.display = 'block'
-  //       this.selectContractNames.style.display = 'block'
-  //       this.abiLabel.style.display = 'none'
-  //       if (this.selectContractNames.value === '') this.enableAtAddress(false)
-  //     }
-  //   }
-
-  //   setInputParamsPlaceHolder () {
-  //     this.createPanel.innerHTML = ''
-  //     if (this.selectContractNames.selectedIndex < 0 || this.selectContractNames.children.length <= 0) {
-  //       this.createPanel.innerHTML = 'No compiled contracts'
-  //       return
-  //     }
-
-  //     const selectedContract = this.getSelectedContract()
-  //     const clickCallback = async (valArray, inputsValues) => {
-  //       var selectedContract = this.getSelectedContract()
-  //       this.createInstance(selectedContract, inputsValues)
-  //     }
-  //     const createConstructorInstance = new MultiParamManager(
-  //       0,
-  //       selectedContract.getConstructorInterface(),
-  //       clickCallback,
-  //       selectedContract.getConstructorInputs(),
-  //       'Deploy',
-  //       selectedContract.bytecodeObject,
-  //       true
-  //     )
-  //     this.createPanel.appendChild(createConstructorInstance.render())
-  //     this.createPanel.appendChild(this.deployCheckBox)
-  //   }
-
-  //   getSelectedContract () {
-  //     var contract = this.selectContractNames.children[this.selectContractNames.selectedIndex]
-  //     var contractName = contract.getAttribute('value')
-  //     var compilerAtributeName = contract.getAttribute('compiler')
-
-  //     return this.dropdownLogic.getSelectedContract(contractName, compilerAtributeName)
-  //   }
-
   //   async createInstance (selectedContract, args) {
   //     if (selectedContract.bytecodeObject.length === 0) {
   //       return modalDialogCustom.alert('This contract may be abstract, not implement an abstract parent\'s methods completely or not invoke an inherited contract\'s constructor correctly.')
@@ -324,20 +362,20 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
   //     return confirmationCb
   //   }
 
-  const atAddressChanged = (event: SyntheticEvent) => {
-    const atAddress = atAddressButtonInput.current
-    const selectContractNames = contracts.current
+  const atAddressChanged = (event) => {
+    const value = event.target.value
 
-    if (!atAddress.value) {
+    if (!value) {
       enableAtAddress(false)
     } else {
-      if ((selectContractNames && !selectContractNames.getAttribute('disabled') && loadType === 'sol') ||
+      if ((!contractOptions.disabled && loadType === 'sol') ||
         loadType === 'abi') {
         enableAtAddress(true)
       } else {
         enableAtAddress(false)
       }
     }
+    setAddress(value)
   }
 
   const loadFromAddress = () => {
@@ -376,39 +414,60 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     window.localStorage.setItem(`ipfs/${props.exEnvironment}/${networkName}`, ipfsCheckedState.toString())
   }
 
+  const handleContractChange = (e) => {
+    const value = e.target.value
+
+    setSelectedContract(value)
+  }
+
   return (
     <div className="udapp_container" data-id="contractDropdownContainer">
       <label className="udapp_settingsLabel">Contract</label>
       <div className="udapp_subcontainer">
-        <select ref={contracts} className="udapp_contractNames custom-select" disabled title="Please compile *.sol file to deploy or access a contract"></select>
-        <i title="No contract compiled yet or compilation failed. Please check the compile tab for more information." className="m-2 ml-3 fas fa-times-circle udapp_errorIcon" ></i>
+        <select value={selectedContract} onChange={handleContractChange} className="udapp_contractNames custom-select" disabled={contractOptions.disabled} title={contractOptions.title} style={{ display: loadType === 'abi' ? 'none' : 'block' }}>
+          { contractList.map((contract, index) => {
+            return <option key={index} value={contract.alias}>{contract.alias} - {contract.file}</option>
+          }) }
+        </select>
+        { (contractList.length <= 0) && <i style={{ display: compFails }} title="No contract compiled yet or compilation failed. Please check the compile tab for more information." className="m-2 ml-3 fas fa-times-circle udapp_errorIcon" ></i> }
         <span className="py-1" style={{ display: abiLabel.display }}>{ abiLabel.content }</span>
       </div>
       <div>
         <div className="udapp_deployDropdown">
-          <div className="d-flex py-1 align-items-center custom-control custom-checkbox">
-            <input
-              id="deployAndRunPublishToIPFS"
-              data-id="contractDropdownIpfsCheckbox"
-              className="form-check-input custom-control-input"
-              type="checkbox"
-              onChange={handleCheckedIPFS}
-              checked={ipfsCheckedState}
-            />
-            <label
-              htmlFor="deployAndRunPublishToIPFS"
-              data-id="contractDropdownIpfsCheckboxLabel"
-              className="m-0 form-check-label custom-control-label udapp_checkboxAlign"
-              title="Publishing the source code and metadata to IPFS facilitates source code verification using Sourcify and will greatly foster contract adoption (auditing, debugging, calling it, etc...)"
-            >
-              Publish to IPFS
-            </label>
-          </div>
+          { contractList.length <= 0 ? 'No compiled contracts'
+            : loadedContractData ? <div>
+              <ContractGUI title='Deploy' funcABI={loadedContractData.getConstructorInterface()} clickCallBack={clickCallback} inputs={loadedContractData.getConstructorInputs()} widthClass='w-50' evmBC={loadedContractData.bytecodeObject} lookupOnly={false} />
+              <div className="d-flex py-1 align-items-center custom-control custom-checkbox">
+                <input
+                  id="deployAndRunPublishToIPFS"
+                  data-id="contractDropdownIpfsCheckbox"
+                  className="form-check-input custom-control-input"
+                  type="checkbox"
+                  onChange={handleCheckedIPFS}
+                  checked={ipfsCheckedState}
+                />
+                <label
+                  htmlFor="deployAndRunPublishToIPFS"
+                  data-id="contractDropdownIpfsCheckboxLabel"
+                  className="m-0 form-check-label custom-control-label udapp_checkboxAlign"
+                  title="Publishing the source code and metadata to IPFS facilitates source code verification using Sourcify and will greatly foster contract adoption (auditing, debugging, calling it, etc...)"
+                >
+                  Publish to IPFS
+                </label>
+              </div>
+            </div> : ''
+          }
         </div>
-        <div className="udapp_orLabel mt-2">or</div>
+        <div className="udapp_orLabel mt-2" style={{ display: loadType === 'abi' ? 'none' : 'block' }}>or</div>
         <div className="udapp_button udapp_atAddressSect">
-          <button className="udapp_atAddress btn btn-sm btn-info" id="runAndDeployAtAdressButton" onClick={loadFromAddress}>At Address</button>
-          <input ref={atAddressButtonInput} className="udapp_input udapp_ataddressinput ataddressinput form-control" placeholder="Load contract from Address" title="address of contract" onInput={atAddressChanged} />
+          <button className="udapp_atAddress btn btn-sm btn-info" id="runAndDeployAtAdressButton" disabled={atAddressOptions.disabled} onClick={loadFromAddress}>At Address</button>
+          <input
+            className="udapp_input udapp_ataddressinput ataddressinput form-control"
+            placeholder="Load contract from Address"
+            title="address of contract"
+            onChange={atAddressChanged}
+            disabled={atAddressOptions.disabled}
+          />
         </div>
       </div>
     </div>
diff --git a/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
new file mode 100644
index 0000000000..1b78f6f863
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
@@ -0,0 +1,195 @@
+// eslint-disable-next-line no-use-before-define
+import React, { useEffect, useRef, useState } from 'react'
+import * as remixLib from '@remix-project/remix-lib'
+import { ContractGUIProps } from '../types'
+import { CopyToClipboard } from '@remix-ui/clipboard'
+
+const txFormat = remixLib.execution.txFormat
+export function ContractGUI (props: ContractGUIProps) {
+  const [title, setTitle] = useState<string>('')
+  const [basicInput, setBasicInput] = useState<string>('')
+  const [toggleContainer, setToggleContainer] = useState<boolean>(false)
+  const [buttonOptions, setButtonOptions] = useState<{
+    title: string,
+    content: string,
+    classList: string,
+    dataId: string
+  }>({ title: '', content: '', classList: '', dataId: '' })
+  const multiFields = useRef<Array<HTMLInputElement | null>>([])
+
+  useEffect(() => {
+    if (props.title) {
+      setTitle(props.title)
+    } else if (props.funcABI.name) {
+      setTitle(props.funcABI.name)
+    } else {
+      setTitle(props.funcABI.type === 'receive' ? '(receive)' : '(fallback)')
+    }
+  }, [props.title, props.funcABI])
+
+  useEffect(() => {
+    if (props.lookupOnly) {
+    //   // call. stateMutability is either pure or view
+      setButtonOptions({
+        title: title + ' - call',
+        content: 'call',
+        classList: 'btn-info',
+        dataId: title + ' - call'
+      })
+    } else if (props.funcABI.stateMutability === 'payable' || props.funcABI.payable) {
+    //   // transact. stateMutability = payable
+      setButtonOptions({
+        title: title + ' - transact (payable)',
+        content: 'transact',
+        classList: 'btn-danger',
+        dataId: title + ' - transact (payable)'
+      })
+    } else {
+    //   // transact. stateMutability = nonpayable
+      setButtonOptions({
+        title: title + ' - transact (not payable)',
+        content: 'transact',
+        classList: 'btn-warning',
+        dataId: title + ' - transact (not payable)'
+      })
+    }
+  }, [props.lookupOnly, props.funcABI])
+
+  const switchMethodViewOn = () => {
+    setToggleContainer(true)
+    makeMultiVal()
+  }
+
+  const switchMethodViewOff = () => {
+    setToggleContainer(false)
+    const multiValString = getMultiValsString()
+
+    if (multiValString) setBasicInput(multiValString)
+  }
+
+  const getMultiValsString = () => {
+    const valArray = multiFields.current
+    let ret = ''
+    const valArrayTest = []
+
+    for (var j = 0; j < valArray.length; j++) {
+      if (ret !== '') ret += ','
+      let elVal = valArray[j] ? valArray[j].value : ''
+
+      valArrayTest.push(elVal)
+      elVal = elVal.replace(/(^|,\s+|,)(\d+)(\s+,|,|$)/g, '$1"$2"$3') // replace non quoted number by quoted number
+      elVal = elVal.replace(/(^|,\s+|,)(0[xX][0-9a-fA-F]+)(\s+,|,|$)/g, '$1"$2"$3') // replace non quoted hex string by quoted hex string
+      try {
+        JSON.parse(elVal)
+      } catch (e) {
+        elVal = '"' + elVal + '"'
+      }
+      ret += elVal
+    }
+    const valStringTest = valArrayTest.join('')
+
+    if (valStringTest) {
+      return ret
+    } else {
+      return ''
+    }
+  }
+
+  const makeMultiVal = () => {
+    let inputString = basicInput
+
+    if (inputString) {
+      inputString = inputString.replace(/(^|,\s+|,)(\d+)(\s+,|,|$)/g, '$1"$2"$3') // replace non quoted number by quoted number
+      inputString = inputString.replace(/(^|,\s+|,)(0[xX][0-9a-fA-F]+)(\s+,|,|$)/g, '$1"$2"$3') // replace non quoted hex string by quoted hex string
+      const inputJSON = JSON.parse('[' + inputString + ']')
+      const multiInputs = multiFields.current
+
+      for (let k = 0; k < multiInputs.length; k++) {
+        if (inputJSON[k]) {
+          multiInputs[k].value = JSON.stringify(inputJSON[k])
+        }
+      }
+    }
+  }
+
+  const clipboardContent = () => {
+    const multiString = getMultiValsString()
+    const multiJSON = JSON.parse('[' + multiString + ']')
+    let encodeObj
+
+    if (props.evmBC) {
+      encodeObj = txFormat.encodeData(props.funcABI, multiJSON, props.evmBC)
+    } else {
+      encodeObj = txFormat.encodeData(props.funcABI, multiJSON, null)
+    }
+    if (encodeObj.error) {
+      console.error(encodeObj.error)
+      // throw new Error(encodeObj.error)
+      return encodeObj.error
+    } else {
+      return encodeObj.data
+    }
+  }
+
+  const handleActionClick = () => {
+    props.clickCallBack(props.funcABI.inputs, basicInput)
+  }
+
+  const handleBasicInput = (e) => {
+    const value = e.target.value
+
+    setBasicInput(value)
+  }
+
+  const handleExpandMultiClick = () => {
+    const valsString = getMultiValsString()
+
+    if (valsString) {
+      props.clickCallBack(props.funcABI.inputs, valsString)
+    } else {
+      props.clickCallBack(props.funcABI.inputs, '')
+    }
+  }
+
+  return (
+    <div className={`udapp_contractProperty ${(props.funcABI.inputs && props.funcABI.inputs.length > 0) || (props.funcABI.type === 'fallback') || (props.funcABI.type === 'receive') ? 'udapp_hasArgs' : ''}`}>
+      <div className="udapp_contractActionsContainerSingle pt-2" style={{ display: toggleContainer ? 'none' : 'flex' }}>
+        <button onClick={handleActionClick} title={buttonOptions.title} className={`udapp_instanceButton ${props.widthClass} btn btn-sm ${buttonOptions.classList}`} data-id={buttonOptions.dataId}>{title}</button>
+        <input
+          className="form-control"
+          data-id={props.funcABI.type === 'fallback' || props.funcABI.type === 'receive' ? `'(${props.funcABI.type}')` : 'multiParamManagerBasicInputField'}
+          placeholder={props.inputs}
+          title={props.funcABI.type === 'fallback' || props.funcABI.type === 'receive' ? `'(${props.funcABI.type}')` : props.inputs}
+          onChange={handleBasicInput}
+          style={{ visibility: !((props.funcABI.inputs && props.funcABI.inputs.length > 0) || (props.funcABI.type === 'fallback') || (props.funcABI.type === 'receive')) ? 'hidden' : 'visible' }}>
+        </input>
+        <i
+          className="fas fa-angle-down udapp_methCaret"
+          onClick={switchMethodViewOn}
+          title={title}
+          style={{ visibility: !(props.funcABI.inputs && props.funcABI.inputs.length > 0) ? 'hidden' : 'visible' }}></i>
+      </div>
+      <div className="udapp_contractActionsContainerMulti" style={{ display: toggleContainer ? 'flex' : 'none' }}>
+        <div className="udapp_contractActionsContainerMultiInner text-dark">
+          <div onClick={switchMethodViewOff} className="udapp_multiHeader">
+            <div className="udapp_multiTitle run-instance-multi-title">{title}</div>
+            <i className='fas fa-angle-up udapp_methCaret'></i>
+          </div>
+          <div>
+            {props.funcABI.inputs.map((inp, index) => {
+              return (
+                <div className="udapp_multiArg" key={index}>
+                  <label htmlFor={inp.name}> {inp.name}: </label>
+                  <input ref={el => { multiFields.current[index] = el }} className="form-control" placeholder={inp.type} title={inp.name} data-id={`multiParamManagerInput${inp.name}`} />
+                </div>)
+            })}
+          </div>
+          <div className="udapp_group udapp_multiArg">
+            <CopyToClipboard content={clipboardContent()} tip='Encode values of input fields & copy to clipboard' icon='fa-clipboard' direction={'left'} />
+            <button onClick={handleExpandMultiClick} title={buttonOptions.title} data-id={buttonOptions.dataId} className={`udapp_instanceButton ${buttonOptions.classList}`}>{ buttonOptions.content }</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx b/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
index 92327c3c95..8ed940ae9b 100644
--- a/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
@@ -24,49 +24,6 @@ export function SettingsUI (props: SettingsProps) {
 
   //   this._deps.config.events.on('settings/personal-mode_changed', this.onPersonalChange.bind(this))
 
-  //   setInterval(() => {
-  //     this.updateAccountBalances()
-  //   }, 1000)
-
-  //   this.accountListCallId = 0
-  //   this.loadedAccounts = {}
-  // }
-
-  // setExecutionContext (context) {
-  //   this.blockchain.changeExecutionContext(context, () => {
-  //     modalDialogCustom.prompt('External node request', this.web3ProviderDialogBody(), 'http://127.0.0.1:8545', (target) => {
-  //       this.blockchain.setProviderFromEndpoint(target, context, (alertMsg) => {
-  //         if (alertMsg) addTooltip(alertMsg)
-  //         this.setFinalContext()
-  //       })
-  //     }, this.setFinalContext.bind(this))
-  //   }, (alertMsg) => {
-  //     addTooltip(alertMsg)
-  //   }, this.setFinalContext.bind(this))
-  // }
-
-  // web3ProviderDialogBody () {
-  //   const thePath = '<path/to/local/folder/for/test/chain>'
-
-  //   return yo`
-  //     <div class="">
-  //       Note: To use Geth & https://remix.ethereum.org, configure it to allow requests from Remix:(see <a href="https://geth.ethereum.org/docs/rpc/server" target="_blank">Geth Docs on rpc server</a>)
-  //       <div class="border p-1">geth --http --http.corsdomain https://remix.ethereum.org</div>
-  //       <br>
-  //       To run Remix & a local Geth test node, use this command: (see <a href="https://geth.ethereum.org/getting-started/dev-mode" target="_blank">Geth Docs on Dev mode</a>)
-  //       <div class="border p-1">geth --http --http.corsdomain="${window.origin}" --http.api web3,eth,debug,personal,net --vmdebug --datadir ${thePath} --dev console</div>
-  //       <br>
-  //       <br>
-  //       <b>WARNING:</b> It is not safe to use the --http.corsdomain flag with a wildcard: <b>--http.corsdomain *</b>
-  //       <br>
-  //       <br>For more info: <a href="https://remix-ide.readthedocs.io/en/latest/run.html#more-about-web3-provider" target="_blank">Remix Docs on Web3 Provider</a>
-  //       <br>
-  //       <br>
-  //       Web3 Provider Endpoint
-  //     </div>
-  //   `
-  // }
-
   // /**
   //  * generate a value used by the env dropdown list.
   //  * @return {String} - can return 'vm-berlin, 'vm-london', 'injected' or 'web3'
@@ -77,14 +34,6 @@ export function SettingsUI (props: SettingsProps) {
   //   return provider === 'vm' ? provider + '-' + fork : provider
   // }
 
-  // getSelectedAccount () {
-  //   return this.el.querySelector('#txorigin').selectedOptions[0].value
-  // }
-
-  // getEnvironment () {
-  //   return this.blockchain.getProvider()
-  // }
-
   return (
     <div className="udapp_settings">
       <EnvironmentUI setWeb3Endpoint={props.setWeb3Endpoint} selectedEnv={props.selectExEnv} providers={props.providers} setExecutionContext={props.setExecutionContext} externalEndpoint={props.externalEndpoint} />
diff --git a/libs/remix-ui/run-tab/src/lib/css/run-tab.css b/libs/remix-ui/run-tab/src/lib/css/run-tab.css
index a6ec9c23d3..ba777bae25 100644
--- a/libs/remix-ui/run-tab/src/lib/css/run-tab.css
+++ b/libs/remix-ui/run-tab/src/lib/css/run-tab.css
@@ -217,3 +217,283 @@
 .udapp_checkboxAlign {
   padding-top: 2px;
 }
+.udapp_instanceTitleContainer {
+  display: flex;
+  align-items: center;
+}
+.udapp_calldataInput{
+  height: 32px;
+}
+.udapp_title {
+  display: flex;
+  justify-content: space-between;
+  font-size: 11px;
+  width: 100%;
+  overflow: hidden;
+  word-break: break-word;
+  line-height: initial;
+  overflow: visible;
+  padding: 0 0 8px;
+  margin: 0;
+  background: none;
+  border: none;
+}
+.udapp_title button {
+  background: none;
+  border: none;
+}
+.udapp_titleLine {
+  display: flex;
+  align-items: baseline;
+}
+.udapp_titleText {
+  word-break: break-word;
+  width: 100%;
+  border: none;
+  overflow: hidden;
+}
+.udapp_spanTitleText {
+  line-height: 12px;
+  padding: 0;
+  font-size: 11px;
+  width:100%;
+  border: none;
+  background: none;
+  text-transform: uppercase;
+  overflow: hidden;
+}
+.udapp_inputGroupText {
+  width: 100%;
+}
+.udapp_title .udapp_copy {
+  color: var(--primary);
+}
+.udapp_titleExpander {
+  padding: 5px 7px;
+}
+.udapp_nameNbuts {
+  display: contents;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+.udapp_instance {
+  display: block;
+  flex-direction: column;
+  margin-bottom: 12px;
+  background: none;
+  border-radius: 2px;
+}
+.udapp_instance.udapp_hidesub {
+  border-bottom: 1px solid;
+}
+.udapp_instance.udapp_hidesub .udapp_title {
+    display: flex;
+}
+.udapp_instance.udapp_hidesub .udapp_udappClose {
+    display: flex;
+}
+.udapp_instance.udapp_hidesub > * {
+  display: none;
+}
+.udapp_methCaret {
+  min-width: 12px;
+  width: 12px;
+  margin-left: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 0.6;
+  vertical-align: middle;
+  padding: 0;
+}
+.udapp_cActionsWrapper {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0.25rem;
+  border-top-rightt-radius: 0;
+  border-bottom-right-radius: 0.25rem;
+  padding: 8px 10px 7px;
+}
+.udapp_group:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.udapp_buttonsContainer {
+  margin-top: 2%;
+  display: flex;
+  overflow: hidden;
+}
+.udapp_instanceButton {
+  height: 32px;
+  border-radius: 3px;
+  white-space: nowrap;
+  font-size: 11px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.udapp_closeIcon {
+  font-size: 12px;
+  cursor: pointer;
+  margin-left: 5px;
+}
+.udapp_udappClose {
+  display: flex;
+  justify-content: flex-end;
+}
+.udapp_contractProperty {
+  width:100%;
+}
+.udapp_contractProperty.udapp_hasArgs input {
+  padding: .36em;
+  border-radius: 5px;
+}
+.udapp_contractProperty .udapp_contractActionsContainerSingle input{
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.udapp_contractProperty button {
+  min-width: 100px;
+  width: 100px;
+  margin:0;
+  word-break: inherit;
+}
+.udapp_contractProperty button:disabled {
+  cursor: not-allowed;
+  background-color: white;
+  border-color: lightgray;
+}
+.udapp_contractProperty.udapp_constant button {
+  min-width: 100px;
+  width: 100px;
+  margin:0;
+  word-break: inherit;
+  outline: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.udapp_contractProperty > .udapp_value {
+  box-sizing: border-box;
+  float: left;
+  align-self: center;
+  margin-left: 4px;
+}
+.udapp_contractActionsContainer {
+  width: 100%;
+  margin-bottom: 8px;
+}
+.udapp_contractActionsContainerSingle {
+  display: flex;
+  width: 100%;
+}
+.udapp_contractActionsContainerSingle i {
+  line-height: 2;
+}
+.udapp_contractActionsContainerMulti {
+  display:none;
+  width: 100%;
+}
+.udapp_contractActionsContainerMultiInner {
+  width: 100%;
+  padding: 16px 8px 16px 14px;
+  border-radius: 3px;
+  margin-bottom: 8px;
+}
+.udapp_multiHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  text-align: left;
+  font-size: 10px;
+  font-weight: bold;
+}
+.udapp_contractActionsContainerMultiInner .udapp_multiTitle {
+  padding-left: 10px;
+}
+.udapp_contractProperty .udapp_multiTitle {
+  padding: 0;
+  line-height: 16px;
+  display: inline-block;
+  font-size: 12px;
+  font-weight: bold;
+  cursor: default;
+}
+.udapp_contractProperty .udapp_contractActionsContainerMultiInner .udapp_multiArg label{
+  text-align: right;
+}
+.udapp_multiHeader .udapp_methCaret {
+  float: right;
+  margin-right: 0;
+}
+.udapp_contractProperty.udapp_constant .udapp_multiTitle {
+  display: inline-block;
+  width: 90%;
+  /* font-size: 10px; */
+  height: 25px;
+  padding-left: 20px;
+  font-weight: bold;
+  line-height: 25px;
+  cursor: default;
+}
+.udapp_multiArg {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-top: 4px;
+}
+.udapp_multiArg input{
+  padding: 5px;
+}
+.udapp_multiArg label {
+  width: auto;
+  padding: 0;
+  margin: 0 4px 0 0;
+  font-size: 10px;
+  line-height: 12px;
+  text-align: right;
+  word-break: initial;
+}
+.udapp_multiArg button {
+  max-width: 100px;
+  border-radius: 3px;
+  border-width: 1px;
+  width: inherit;
+}
+.udapp_multiHeader button {
+  display: inline-block;
+  width: 94%;
+}
+.udapp_hasArgs .udapp_multiArg input {
+  border-left: 1px solid #dddddd;
+  width: 67%;
+}
+.udapp_hasArgs input {
+  display: block;
+  height: 32px;
+  border: 1px solid #dddddd;
+  padding: .36em;
+  border-left: none;
+  padding: 8px 8px 8px 10px;
+  font-size: 10px !important;
+}
+.udapp_hasArgs button {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 11px;
+}
+.udapp_hasArgs .udapp_contractActionsContainerMulti button {
+  border-radius: 3px;
+}
+.udapp_contractActionsContainerMultiInner .udapp_multiArg i {
+  padding-right: 10px;
+}
+.udapp_hideWarningsContainer {
+  display: flex;
+  align-items: center;
+  margin-left: 2%
+}
+
diff --git a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
index 999d347ca9..b05a57a31d 100644
--- a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
+++ b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
@@ -41,7 +41,19 @@ export interface RunTabState {
   externalEndpoint: string,
   popup: string,
   passphrase: string,
-  matchPassphrase: string
+  matchPassphrase: string,
+  contracts: {
+    contractList: {
+      name: string,
+      alias: string,
+      file: string
+    }[],
+    loadType: 'abi' | 'sol' | 'other'
+    currentFile: string,
+    isRequesting: boolean,
+    isSuccessful: boolean,
+    error: string
+  },
 }
 
 export const runTabInitialState: RunTabState = {
@@ -102,7 +114,15 @@ export const runTabInitialState: RunTabState = {
   externalEndpoint: 'http://127.0.0.1:8545',
   popup: '',
   passphrase: '',
-  matchPassphrase: ''
+  matchPassphrase: '',
+  contracts: {
+    contractList: [],
+    loadType: 'other',
+    currentFile: '',
+    isRequesting: false,
+    isSuccessful: false,
+    error: null
+  }
 }
 
 export const runTabReducer = (state: RunTabState = runTabInitialState, action: Action) => {
@@ -345,6 +365,71 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
       }
     }
 
+    case 'FETCH_CONTRACT_LIST_REQUEST': {
+      return {
+        ...state,
+        contracts: {
+          ...state.contracts,
+          isRequesting: true,
+          isSuccessful: false,
+          error: null
+        }
+      }
+    }
+
+    case 'FETCH_CONTRACT_LIST_SUCCESS': {
+      const payload: { name: string, alias: string, file: string }[] = action.payload
+
+      return {
+        ...state,
+        contracts: {
+          ...state.contracts,
+          contractList: payload,
+          isSuccessful: true,
+          isRequesting: false,
+          error: null
+        }
+      }
+    }
+
+    case 'FETCH_CONTRACT_LIST_FAILED': {
+      const payload: string = action.payload
+
+      return {
+        ...state,
+        contracts: {
+          ...state.contracts,
+          isRequesting: false,
+          isSuccessful: false,
+          error: payload
+        }
+      }
+    }
+
+    case 'SET_LOAD_TYPE': {
+      const payload: 'abi' | 'sol' | 'other' = action.payload
+
+      return {
+        ...state,
+        contracts: {
+          ...state.contracts,
+          loadType: payload
+        }
+      }
+    }
+
+    case 'SET_CURRENT_FILE': {
+      const payload: string = action.payload
+
+      return {
+        ...state,
+        contracts: {
+          ...state.contracts,
+          currentFile: payload
+        }
+      }
+    }
+
     default:
       return state
   }
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
index 73859a4835..00cc462573 100644
--- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -9,7 +9,7 @@ import { RecorderUI } from './components/recorderCardUI'
 import { SettingsUI } from './components/settingsUI'
 import { Modal, RunTabProps } from './types'
 import { runTabInitialState, runTabReducer } from './reducers/runTab'
-import { initRunTab, setAccount, setUnit, setGasFee, setExecutionContext, setWeb3Endpoint, clearPopUp, createNewBlockchainAccount, setPassphrasePrompt, setMatchPassphrasePrompt, signMessageWithAddress } from './actions'
+import { initRunTab, setAccount, setUnit, setGasFee, setExecutionContext, setWeb3Endpoint, clearPopUp, createNewBlockchainAccount, setPassphrasePrompt, setMatchPassphrasePrompt, signMessageWithAddress, getSelectedContract } from './actions'
 import './css/run-tab.css'
 
 export function RunTabUI (props: RunTabProps) {
@@ -134,7 +134,12 @@ export function RunTabUI (props: RunTabProps) {
             tooltip={toast}
             signMessageWithAddress={signMessageWithAddress}
           />
-          <ContractDropdownUI exEnvironment={runTab.selectExEnv} />
+          <ContractDropdownUI
+            exEnvironment={runTab.selectExEnv}
+            contracts={runTab.contracts}
+            getSelectedContract={getSelectedContract}
+            modal={modal}
+          />
           <RecorderUI />
           <InstanceContainerUI />
         </div>
diff --git a/libs/remix-ui/run-tab/src/lib/types/index.ts b/libs/remix-ui/run-tab/src/lib/types/index.ts
index 8162ac3cea..99778ced10 100644
--- a/libs/remix-ui/run-tab/src/lib/types/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/index.ts
@@ -100,7 +100,34 @@ export interface ValueProps {
 }
 
 export interface ContractDropdownProps {
-  exEnvironment: string
+  exEnvironment: string,
+  contracts: {
+    contractList: {
+      name: string,
+      alias: string,
+      file: string
+    }[],
+    loadType: 'abi' | 'sol' | 'other',
+    currentFile: string,
+    isRequesting: boolean,
+    isSuccessful: boolean,
+    error: string
+  },
+  getSelectedContract: (contractName: string, compilerAtributeName: string) => {
+    name: string,
+    contract: string,
+    compiler: any,
+    abi: any,
+    bytecodeObject: any,
+    bytecodeLinkReferences: any,
+    object: any,
+    deployedBytecode: any,
+    getConstructorInterface: () => any,
+    getConstructorInputs: () => any,
+    isOverSizeLimit: () => boolean,
+    metadata: any
+  },
+  modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void
 }
 
 export interface RecorderProps {
@@ -121,3 +148,19 @@ export interface Modal {
   cancelLabel: string
   cancelFn: () => void
 }
+
+export interface ContractGUIProps {
+  title?: string,
+  funcABI: {
+    name: string,
+    type: string,
+    inputs: { name: string, type: string }[],
+    stateMutability: string,
+    payable: boolean
+  },
+  inputs: any,
+  clickCallBack: (inputs: { name: string, type: string }[], input: string) => void,
+  widthClass?: string,
+  evmBC: any,
+  lookupOnly: boolean
+}

From 1d28d20b4eda05aed4b5acb67c0becf33bcb8392 Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Tue, 14 Dec 2021 16:57:55 +0100
Subject: [PATCH 123/168] create instance setup

---
 apps/remix-ide/src/app/udapp/run-tab.js       |  1 -
 apps/remix-ide/src/blockchain/blockchain.js   |  1 -
 .../helper/src/lib/remix-ui-helper.ts         | 13 +++
 .../remix-ui/run-tab/src/lib/actions/index.ts | 82 +++++++++++++++-
 .../run-tab/src/lib/actions/payload.ts        |  6 ++
 .../run-tab/src/lib/components/account.tsx    | 33 +++----
 .../src/lib/components/contractDropdownUI.tsx | 97 ++++---------------
 .../run-tab/src/lib/components/passphrase.tsx | 22 +++++
 .../run-tab/src/lib/components/settingsUI.tsx |  2 +-
 .../run-tab/src/lib/reducers/runTab.ts        | 13 ++-
 libs/remix-ui/run-tab/src/lib/run-tab.tsx     |  6 +-
 libs/remix-ui/run-tab/src/lib/types/index.ts  | 11 ++-
 12 files changed, 179 insertions(+), 108 deletions(-)
 create mode 100644 libs/remix-ui/run-tab/src/lib/components/passphrase.tsx

diff --git a/apps/remix-ide/src/app/udapp/run-tab.js b/apps/remix-ide/src/app/udapp/run-tab.js
index 2173e2d8ee..73d5fd6c2f 100644
--- a/apps/remix-ide/src/app/udapp/run-tab.js
+++ b/apps/remix-ide/src/app/udapp/run-tab.js
@@ -41,7 +41,6 @@ export class RunTab extends ViewPlugin {
     this.blockchain = blockchain
     this.fileManager = fileManager
     this.editor = editor
-    this.logCallback = (msg) => { this.call('terminal', 'logHtml', yo`<pre>${msg}</pre>`) }
     this.filePanel = filePanel
     this.compilersArtefacts = compilersArtefacts
     this.networkModule = networkModule
diff --git a/apps/remix-ide/src/blockchain/blockchain.js b/apps/remix-ide/src/blockchain/blockchain.js
index b041000be9..f280e47d8b 100644
--- a/apps/remix-ide/src/blockchain/blockchain.js
+++ b/apps/remix-ide/src/blockchain/blockchain.js
@@ -414,7 +414,6 @@ class Blockchain extends Plugin {
     const self = this
     waterfall([
       function getGasLimit (next) {
-        console.log('called: ', self.transactionContextAPI.gasLimit())
         if (self.transactionContextAPI.getGasLimit) {
           return self.transactionContextAPI.getGasLimit(next)
         }
diff --git a/libs/remix-ui/helper/src/lib/remix-ui-helper.ts b/libs/remix-ui/helper/src/lib/remix-ui-helper.ts
index 8d16ecc734..818cf3bc31 100644
--- a/libs/remix-ui/helper/src/lib/remix-ui-helper.ts
+++ b/libs/remix-ui/helper/src/lib/remix-ui-helper.ts
@@ -1,3 +1,5 @@
+import * as ethJSUtil from 'ethereumjs-util'
+
 export const extractNameFromKey = (key: string): string => {
   if (!key) return
   const keyPath = key.split('/')
@@ -73,3 +75,14 @@ export const shortenAddress = (address, etherBalance) => {
 
   return address.slice(0, 5) + '...' + address.slice(len - 5, len) + (etherBalance ? ' (' + etherBalance.toString() + ' ether)' : '')
 }
+
+export const addressToString = (address) => {
+  if (!address) return null
+  if (typeof address !== 'string') {
+    address = address.toString('hex')
+  }
+  if (address.indexOf('0x') === -1) {
+    address = '0x' + address
+  }
+  return ethJSUtil.toChecksumAddress(address)
+}
diff --git a/libs/remix-ui/run-tab/src/lib/actions/index.ts b/libs/remix-ui/run-tab/src/lib/actions/index.ts
index a64dc80992..76a03d15d6 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/index.ts
@@ -2,7 +2,7 @@
 import React from 'react'
 import * as ethJSUtil from 'ethereumjs-util'
 import Web3 from 'web3'
-import { shortenAddress } from '@remix-ui/helper'
+import { addressToString, shortenAddress } from '@remix-ui/helper'
 import { addProvider, displayNotification, displayPopUp, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, fetchContractListSuccess, hidePopUp, removeProvider, setCurrentFile, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setLoadType, setMatchPassphrase, setNetworkName, setPassphrase, setSelectedAccount, setSendUnit, setSendValue } from './payload'
 import { RunTab } from '../types/run-tab'
 import { CompilerAbstract } from '@remix-project/remix-solidity'
@@ -380,3 +380,83 @@ export const getSelectedContract = (contractName: string, compilerAtributeName:
 const getCompilerContracts = () => {
   return plugin.compilersArtefacts.__last.getData().contracts
 }
+
+// eslint-disable-next-line no-undef
+const terminalLogger = (view: JSX.Element) => {
+  plugin.call('terminal', 'logHtml', view)
+}
+
+// eslint-disable-next-line no-undef
+export const createInstance = (gasEstimationPrompt: (msg: string) => JSX.Element, passphrasePrompt: (msg: string) => JSX.Element, logBuilder: (msg: string) => JSX.Element) => {
+  const continueCb = (error, continueTxExecution, cancelCb) => {
+    if (error) {
+      const msg = typeof error !== 'string' ? error.message : error
+
+      dispatch(displayNotification('Gas estimation failed', gasEstimationPrompt(msg), 'Send Transaction', 'Cancel Transaction', () => {
+        continueTxExecution()
+      }, () => {
+        cancelCb()
+      }))
+    } else {
+      continueTxExecution()
+    }
+  }
+
+  const promptCb = (okCb, cancelCb) => {
+    dispatch(displayNotification('Passphrase requested', passphrasePrompt('Personal mode is enabled. Please provide passphrase of account'), 'OK', 'Cancel', okCb, cancelCb))
+  }
+
+  const statusCb = (msg: string) => {
+    const log = logBuilder(msg)
+
+    return terminalLogger(log)
+  }
+
+  const finalCb = (error, contractObject, address) => {
+    plugin.event.trigger('clearInstance')
+    if (error) {
+      const log = logBuilder(error)
+
+      return terminalLogger(log)
+    }
+    plugin.event.trigger('newContractInstanceAdded', [contractObject, address, contractObject.name])
+
+    const data = plugin.compilersArtefacts.getCompilerAbstract(contractObject.contract.file)
+
+    plugin.compilersArtefacts.addResolvedContract(addressToString(address), data)
+    if (self.ipfsCheckedState) {
+      _paq.push(['trackEvent', 'udapp', 'DeployAndPublish', this.networkName])
+      publishToStorage('ipfs', self.runView.fileProvider, self.runView.fileManager, selectedContract)
+    } else {
+      _paq.push(['trackEvent', 'udapp', 'DeployOnly', plugin.REACT_API.networkName])
+    }
+  }
+
+      // let contractMetadata
+      // try {
+      //   contractMetadata = await this.runView.call('compilerMetadata', 'deployMetadataOf', selectedContract.name, selectedContract.contract.file)
+      // } catch (error) {
+      //   return statusCb(`creation of ${selectedContract.name} errored: ${error.message ? error.message : error}`)
+      // }
+
+      // const compilerContracts = this.dropdownLogic.getCompilerContracts()
+      // const confirmationCb = this.getConfirmationCb(modalDialog, confirmDialog)
+
+      // if (selectedContract.isOverSizeLimit()) {
+      //   return modalDialog('Contract code size over limit', yo`<div>Contract creation initialization returns data with length of more than 24576 bytes. The deployment will likely fails. <br>
+      //   More info: <a href="https://github.com/ethereum/EIPs/blob/master/EIPS/eip-170.md" target="_blank">eip-170</a>
+      //   </div>`,
+      //   {
+      //     label: 'Force Send',
+      //     fn: () => {
+      //       this.deployContract(selectedContract, args, contractMetadata, compilerContracts, { continueCb, promptCb, statusCb, finalCb }, confirmationCb)
+      //     }
+      //   }, {
+      //     label: 'Cancel',
+      //     fn: () => {
+      //       this.logCallback(`creation of ${selectedContract.name} canceled by user.`)
+      //     }
+      //   })
+      // }
+      // this.deployContract(selectedContract, args, contractMetadata, compilerContracts, { continueCb, promptCb, statusCb, finalCb }, confirmationCb)
+}
diff --git a/libs/remix-ui/run-tab/src/lib/actions/payload.ts b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
index 2bfcb3f350..302cbdebcf 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/payload.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
@@ -163,3 +163,9 @@ export const setCurrentFile = (file: string) => {
     payload: file
   }
 }
+export const setIpfsCheckedState = (state: boolean) => {
+  return {
+    type: 'SET_IPFS_CHECKED_STATE',
+    payload: state
+  }
+}
diff --git a/libs/remix-ui/run-tab/src/lib/components/account.tsx b/libs/remix-ui/run-tab/src/lib/components/account.tsx
index a03ec87aaf..d0683c3711 100644
--- a/libs/remix-ui/run-tab/src/lib/components/account.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/account.tsx
@@ -2,6 +2,7 @@
 import React, { useEffect, useState } from 'react'
 import { CopyToClipboard } from '@remix-ui/clipboard'
 import { AccountProps } from '../types'
+import { PassphrasePrompt } from './passphrase'
 
 export function AccountUI (props: AccountProps) {
   const { selectedAccount, loadedAccounts } = props.accounts
@@ -11,7 +12,6 @@ export function AccountUI (props: AccountProps) {
     title: ''
   })
   const [message, setMessage] = useState('')
-  const [signPassphrase, setSignPassphrase] = useState('')
 
   useEffect(() => {
     if (!selectedAccount && accounts.length > 0) props.setAccount(accounts[0])
@@ -73,11 +73,18 @@ export function AccountUI (props: AccountProps) {
     }
 
     if (props.selectExEnv !== 'vm-london' && props.selectExEnv !== 'vm-berlin' && props.selectExEnv !== 'injected') {
-      return props.modal('Passphrase to sign a message', passphrasePrompt(), 'OK', () => {
-        props.modal('Sign a message', signMessagePrompt(), 'OK', () => {
-          props.signMessageWithAddress(selectedAccount, message, signedMessagePrompt, signPassphrase)
-        }, 'Cancel', null)
-      }, 'Cancel', null)
+      return props.modal('Passphrase to sign a message',
+        <PassphrasePrompt
+          message='Enter your passphrase for this account to sign the message'
+          setPassphrase={props.setPassphrase}
+        />, 'OK', () => {
+          props.modal('Sign a message', signMessagePrompt(), 'OK', () => {
+            props.signMessageWithAddress(selectedAccount, message, signedMessagePrompt, props.passphrase)
+            props.setPassphrase('')
+          }, 'Cancel', null)
+        }, 'Cancel', () => {
+          props.setPassphrase('')
+        })
     }
 
     props.modal('Sign a message', signMessagePrompt(), 'OK', () => {
@@ -97,10 +104,6 @@ export function AccountUI (props: AccountProps) {
     setMessage(e.target.value)
   }
 
-  const handleSignPassphrase = (e) => {
-    setSignPassphrase(e.target.value)
-  }
-
   const passphraseCreationPrompt = () => {
     return (
       <div> Please provide a Passphrase for the account creation
@@ -114,16 +117,6 @@ export function AccountUI (props: AccountProps) {
     )
   }
 
-  const passphrasePrompt = () => {
-    return (
-      <div> Enter your passphrase for this account to sign the message
-        <div>
-          <input id="prompt_text" type="password" name='prompt_text' className="form-control" style={{ width: '100%' }} onInput={handleSignPassphrase} data-id='modalDialogCustomPromptText' defaultValue={signPassphrase} />
-        </div>
-      </div>
-    )
-  }
-
   const signMessagePrompt = () => {
     return (
       <div> Enter a message to sign
diff --git a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
index d45e9f02fd..867c298802 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react'
 import { ContractDropdownProps } from '../types'
 import * as ethJSUtil from 'ethereumjs-util'
 import { ContractGUI } from './contractGUI'
+import { PassphrasePrompt } from './passphrase'
 
 export function ContractDropdownUI (props: ContractDropdownProps) {
   const [networkName, setNetworkName] = useState<string>('')
@@ -133,85 +134,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     if (selectedContract.bytecodeObject.length === 0) {
       return props.modal('Alert', 'This contract may be abstract, not implement an abstract parent\'s methods completely or not invoke an inherited contract\'s constructor correctly.', 'OK', () => {})
     }
-
-    // var continueCb = (error, continueTxExecution, cancelCb) => {
-    //   if (error) {
-    //     var msg = typeof error !== 'string' ? error.message : error
-    //     modalDialog('Gas estimation failed', yo`<div>Gas estimation errored with the following message (see below).
-    //     The transaction execution will likely fail. Do you want to force sending? <br>
-    //     ${msg}
-    //     </div>`,
-    //     {
-    //       label: 'Send Transaction',
-    //       fn: () => {
-    //         continueTxExecution()
-    //       }
-    //     }, {
-    //       label: 'Cancel Transaction',
-    //       fn: () => {
-    //         cancelCb()
-    //       }
-    //     })
-    //   } else {
-    //     continueTxExecution()
-    //   }
-    // }
-
-    // const self = this
-
-    // var promptCb = (okCb, cancelCb) => {
-    //   modalDialogCustom.promptPassphrase('Passphrase requested', 'Personal mode is enabled. Please provide passphrase of account', '', okCb, cancelCb)
-    // }
-
-    // var statusCb = (msg) => {
-    //   return this.logCallback(msg)
-    // }
-
-    // var finalCb = (error, contractObject, address) => {
-    //   self.event.trigger('clearInstance')
-
-    //   if (error) {
-    //     return this.logCallback(error)
-    //   }
-    //   self.event.trigger('newContractInstanceAdded', [contractObject, address, contractObject.name])
-
-    //   const data = self.runView.compilersArtefacts.getCompilerAbstract(contractObject.contract.file)
-    //   self.runView.compilersArtefacts.addResolvedContract(helper.addressToString(address), data)
-    //   if (self.ipfsCheckedState) {
-    //     _paq.push(['trackEvent', 'udapp', 'DeployAndPublish', this.networkName + '_' + this.networkId])
-    //     publishToStorage('ipfs', self.runView.fileProvider, self.runView.fileManager, selectedContract)
-    //   } else {
-    //     _paq.push(['trackEvent', 'udapp', 'DeployOnly', this.networkName + '_' + this.networkId])
-    //   }
-    // }
-
-    // let contractMetadata
-    // try {
-    //   contractMetadata = await this.runView.call('compilerMetadata', 'deployMetadataOf', selectedContract.name, selectedContract.contract.file)
-    // } catch (error) {
-    //   return statusCb(`creation of ${selectedContract.name} errored: ${error.message ? error.message : error}`)
-    // }
-
-    // const compilerContracts = this.dropdownLogic.getCompilerContracts()
-    // const confirmationCb = this.getConfirmationCb(modalDialog, confirmDialog)
-
-    // if (selectedContract.isOverSizeLimit()) {
-    //   return modalDialog('Contract code size over limit', yo`<div>Contract creation initialization returns data with length of more than 24576 bytes. The deployment will likely fails. <br>
-    //   More info: <a href="https://github.com/ethereum/EIPs/blob/master/EIPS/eip-170.md" target="_blank">eip-170</a>
-    //   </div>`,
-    //   {
-    //     label: 'Force Send',
-    //     fn: () => {
-    //       this.deployContract(selectedContract, args, contractMetadata, compilerContracts, { continueCb, promptCb, statusCb, finalCb }, confirmationCb)
-    //     }
-    //   }, {
-    //     label: 'Cancel',
-    //     fn: () => {
-    //       this.logCallback(`creation of ${selectedContract.name} canceled by user.`)
-    //     }
-    //   })
-    // }
-    // this.deployContract(selectedContract, args, contractMetadata, compilerContracts, { continueCb, promptCb, statusCb, finalCb }, confirmationCb)
+    props.createInstance(gasEstimationPrompt, passphrasePrompt, logBuilder)
   }
 
   //   listenToContextChange () {
@@ -362,6 +285,22 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
   //     return confirmationCb
   //   }
 
+  const gasEstimationPrompt = (msg: string) => {
+    return (
+      <div>Gas estimation errored with the following message (see below). The transaction execution will likely fail. Do you want to force sending? <br />
+        ${msg}
+      </div>
+    )
+  }
+
+  const logBuilder = (msg: string) => {
+    return <pre>{msg}</pre>
+  }
+
+  const passphrasePrompt = (message: string) => {
+    return <PassphrasePrompt message={message} setPassphrase={props.setPassphrase} defaultValue={props.passphrase} />
+  }
+
   const atAddressChanged = (event) => {
     const value = event.target.value
 
diff --git a/libs/remix-ui/run-tab/src/lib/components/passphrase.tsx b/libs/remix-ui/run-tab/src/lib/components/passphrase.tsx
new file mode 100644
index 0000000000..c118ede4a0
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/components/passphrase.tsx
@@ -0,0 +1,22 @@
+// eslint-disable-next-line no-use-before-define
+import React from 'react'
+
+interface PromptProps {
+  message: string,
+  setPassphrase: (passphrase: string) => void,
+  defaultValue?: string
+}
+
+export function PassphrasePrompt (props: PromptProps) {
+  const handleSignPassphrase = (e) => {
+    props.setPassphrase(e.target.value)
+  }
+
+  return (
+    <div> { props.message }
+      <div>
+        <input id="prompt_text" type="password" name='prompt_text' className="form-control" style={{ width: '100%' }} onInput={handleSignPassphrase} data-id='modalDialogCustomPromptText' defaultValue={props.defaultValue} />
+      </div>
+    </div>
+  )
+}
diff --git a/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx b/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
index 8ed940ae9b..bbd2f7840c 100644
--- a/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
@@ -38,7 +38,7 @@ export function SettingsUI (props: SettingsProps) {
     <div className="udapp_settings">
       <EnvironmentUI setWeb3Endpoint={props.setWeb3Endpoint} selectedEnv={props.selectExEnv} providers={props.providers} setExecutionContext={props.setExecutionContext} externalEndpoint={props.externalEndpoint} />
       <NetworkUI networkName={props.networkName} />
-      <AccountUI personalMode={props.personalMode} selectExEnv={props.selectExEnv} accounts={props.accounts} setAccount={props.setAccount} createNewBlockchainAccount={props.createNewBlockchainAccount} setPassphrase={props.setPassphrase} setMatchPassphrase={props.setMatchPassphrase} tooltip={props.tooltip} modal={props.modal} signMessageWithAddress={props.signMessageWithAddress} />
+      <AccountUI personalMode={props.personalMode} selectExEnv={props.selectExEnv} accounts={props.accounts} setAccount={props.setAccount} createNewBlockchainAccount={props.createNewBlockchainAccount} setPassphrase={props.setPassphrase} setMatchPassphrase={props.setMatchPassphrase} tooltip={props.tooltip} modal={props.modal} signMessageWithAddress={props.signMessageWithAddress} passphrase={props.passphrase} />
       <GasPriceUI gasLimit={props.gasLimit} setGasFee={props.setGasFee} />
       <ValueUI setUnit={props.setUnit} sendValue={props.sendValue} sendUnit={props.sendUnit} />
     </div>
diff --git a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
index b05a57a31d..cf057bc0ec 100644
--- a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
+++ b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
@@ -54,6 +54,7 @@ export interface RunTabState {
     isSuccessful: boolean,
     error: string
   },
+  ipfsChecked: boolean
 }
 
 export const runTabInitialState: RunTabState = {
@@ -122,7 +123,8 @@ export const runTabInitialState: RunTabState = {
     isRequesting: false,
     isSuccessful: false,
     error: null
-  }
+  },
+  ipfsChecked: false
 }
 
 export const runTabReducer = (state: RunTabState = runTabInitialState, action: Action) => {
@@ -430,6 +432,15 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
       }
     }
 
+    case 'SET_IPFS_CHECKED_STATE': {
+      const payload: boolean = action.payload
+
+      return {
+        ...state,
+        ipfsChecked: payload
+      }
+    }
+
     default:
       return state
   }
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
index 00cc462573..42501a8483 100644
--- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -9,7 +9,7 @@ import { RecorderUI } from './components/recorderCardUI'
 import { SettingsUI } from './components/settingsUI'
 import { Modal, RunTabProps } from './types'
 import { runTabInitialState, runTabReducer } from './reducers/runTab'
-import { initRunTab, setAccount, setUnit, setGasFee, setExecutionContext, setWeb3Endpoint, clearPopUp, createNewBlockchainAccount, setPassphrasePrompt, setMatchPassphrasePrompt, signMessageWithAddress, getSelectedContract } from './actions'
+import { initRunTab, setAccount, setUnit, setGasFee, setExecutionContext, setWeb3Endpoint, clearPopUp, createNewBlockchainAccount, setPassphrasePrompt, setMatchPassphrasePrompt, signMessageWithAddress, getSelectedContract, createInstance } from './actions'
 import './css/run-tab.css'
 
 export function RunTabUI (props: RunTabProps) {
@@ -133,12 +133,16 @@ export function RunTabUI (props: RunTabProps) {
             modal={modal}
             tooltip={toast}
             signMessageWithAddress={signMessageWithAddress}
+            passphrase={runTab.passphrase}
           />
           <ContractDropdownUI
             exEnvironment={runTab.selectExEnv}
             contracts={runTab.contracts}
             getSelectedContract={getSelectedContract}
             modal={modal}
+            passphrase={runTab.passphrase}
+            setPassphrase={setPassphrasePrompt}
+            createInstance={createInstance}
           />
           <RecorderUI />
           <InstanceContainerUI />
diff --git a/libs/remix-ui/run-tab/src/lib/types/index.ts b/libs/remix-ui/run-tab/src/lib/types/index.ts
index 99778ced10..9675f0be4f 100644
--- a/libs/remix-ui/run-tab/src/lib/types/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/index.ts
@@ -42,7 +42,8 @@ export interface SettingsProps {
   setMatchPassphrase: (passphrase: string) => void,
   modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
   tooltip: (toasterMsg: string) => void,
-  signMessageWithAddress: (account: string, message: string, modalContent: (hash: string, data: string) => JSX.Element, passphrase?: string) => void
+  signMessageWithAddress: (account: string, message: string, modalContent: (hash: string, data: string) => JSX.Element, passphrase?: string) => void,
+  passphrase: string
 }
 
 export interface EnvironmentProps {
@@ -85,7 +86,8 @@ export interface AccountProps {
   setMatchPassphrase: (passphrase: string) => void,
   tooltip: (toasterMsg: string) => void,
   modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
-  signMessageWithAddress: (account: string, message: string, modalContent: (hash: string, data: string) => JSX.Element, passphrase?: string) => void
+  signMessageWithAddress: (account: string, message: string, modalContent: (hash: string, data: string) => JSX.Element, passphrase?: string) => void,
+  passphrase: string
 }
 
 export interface GasPriceProps {
@@ -127,7 +129,10 @@ export interface ContractDropdownProps {
     isOverSizeLimit: () => boolean,
     metadata: any
   },
-  modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void
+  modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
+  passphrase: string,
+  setPassphrase: (passphrase: string) => void,
+  createInstance: (gasEstimationPrompt: (msg: string) => JSX.Element, passphrasePrompt: (msg: string) => JSX.Element, logBuilder: (msg: string) => JSX.Element) => void
 }
 
 export interface RecorderProps {

From 686a43b53cbf0c4b5055cbe101be8c28dd13313a Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Thu, 16 Dec 2021 22:22:59 +0100
Subject: [PATCH 124/168] Update mainnet modal from reducer

---
 apps/remix-ide/src/app/udapp/run-tab.js       |   8 +
 .../publish-to-storage/src/lib/types/index.ts |   2 +-
 .../remix-ui/run-tab/src/lib/actions/index.ts |  94 +++++++++--
 .../run-tab/src/lib/actions/payload.ts        |  49 ++++++
 .../src/lib/components/contractDropdownUI.tsx |  63 ++++----
 .../run-tab/src/lib/components/mainnet.tsx    | 146 ++++++++++++++++++
 libs/remix-ui/run-tab/src/lib/css/run-tab.css |  10 ++
 .../run-tab/src/lib/reducers/runTab.ts        |  79 +++++++++-
 libs/remix-ui/run-tab/src/lib/run-tab.tsx     |  49 +++++-
 libs/remix-ui/run-tab/src/lib/types/index.ts  |  42 +++--
 10 files changed, 473 insertions(+), 69 deletions(-)
 create mode 100644 libs/remix-ui/run-tab/src/lib/components/mainnet.tsx

diff --git a/apps/remix-ide/src/app/udapp/run-tab.js b/apps/remix-ide/src/app/udapp/run-tab.js
index 73d5fd6c2f..297f2996c5 100644
--- a/apps/remix-ide/src/app/udapp/run-tab.js
+++ b/apps/remix-ide/src/app/udapp/run-tab.js
@@ -234,4 +234,12 @@ export class RunTab extends ViewPlugin {
   onReady (api) {
     this.REACT_API = api
   }
+
+  writeFile (fileName, content) {
+    return this.call('fileManager', 'writeFile', fileName, content)
+  }
+
+  readFile (fileName) {
+    return this.call('fileManager', 'readFile', fileName)
+  }
 }
diff --git a/libs/remix-ui/publish-to-storage/src/lib/types/index.ts b/libs/remix-ui/publish-to-storage/src/lib/types/index.ts
index 53a351baee..7995d5a538 100644
--- a/libs/remix-ui/publish-to-storage/src/lib/types/index.ts
+++ b/libs/remix-ui/publish-to-storage/src/lib/types/index.ts
@@ -1,6 +1,6 @@
 export interface RemixUiPublishToStorageProps {
   api: any,
-  storage: string,
+  storage: 'swarm' | 'ipfs',
   contract: any,
   resetStorage: () => void
 }
diff --git a/libs/remix-ui/run-tab/src/lib/actions/index.ts b/libs/remix-ui/run-tab/src/lib/actions/index.ts
index 76a03d15d6..af87629b30 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/index.ts
@@ -3,10 +3,11 @@ import React from 'react'
 import * as ethJSUtil from 'ethereumjs-util'
 import Web3 from 'web3'
 import { addressToString, shortenAddress } from '@remix-ui/helper'
-import { addProvider, displayNotification, displayPopUp, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, fetchContractListSuccess, hidePopUp, removeProvider, setCurrentFile, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setLoadType, setMatchPassphrase, setNetworkName, setPassphrase, setSelectedAccount, setSendUnit, setSendValue } from './payload'
+import { addProvider, displayNotification, displayPopUp, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, fetchContractListSuccess, hidePopUp, removeProvider, setBaseFeePerGas, setConfirmSettings, setCurrentFile, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setGasPrice, setGasPriceStatus, setIpfsCheckedState, setLoadType, setMatchPassphrase, setMaxFee, setMaxPriorityFee, setNetworkName, setPassphrase, setSelectedAccount, setSendUnit, setSendValue, setTxFeeContent } from './payload'
 import { RunTab } from '../types/run-tab'
 import { CompilerAbstract } from '@remix-project/remix-solidity'
 import * as remixLib from '@remix-project/remix-lib'
+import { ContractData } from '../types'
 declare global {
   interface Window {
     _paq: any
@@ -386,8 +387,33 @@ const terminalLogger = (view: JSX.Element) => {
   plugin.call('terminal', 'logHtml', view)
 }
 
+const getConfirmationCb = () => {
+  // this code is the same as in recorder.js. TODO need to be refactored out
+  const confirmationCb = (network, tx, gasEstimation, continueTxExecution, cancelCb) => {
+    if (network.name !== 'Main') {
+      return continueTxExecution(null)
+    }
+    const amount = plugin.blockchain.fromWei(tx.value, true, 'ether')
+    const content = confirmDialog(tx, network, amount, gasEstimation, plugin.blockchain.determineGasFees(tx), plugin.blockchain.determineGasPrice.bind(plugin.blockchain))
+
+    dispatch(displayNotification('Confirm transaction', content, 'Confirm', 'Cancel', () => {
+      plugin.blockchain.config.setUnpersistedProperty('doNotShowTransactionConfirmationAgain', content.querySelector('input#confirmsetting').checked)
+      // TODO: check if this is check is still valid given the refactor
+      if (!content.gasPriceStatus) {
+        cancelCb('Given transaction fee is not correct')
+      } else {
+        continueTxExecution(content.txFee)
+      }
+    }, () => {
+      return cancelCb('Transaction canceled by user.')
+    }))
+  }
+
+  return confirmationCb
+}
+
 // eslint-disable-next-line no-undef
-export const createInstance = (gasEstimationPrompt: (msg: string) => JSX.Element, passphrasePrompt: (msg: string) => JSX.Element, logBuilder: (msg: string) => JSX.Element) => {
+export const createInstance = async (selectedContract: ContractData, gasEstimationPrompt: (msg: string) => JSX.Element, passphrasePrompt: (msg: string) => JSX.Element, logBuilder: (msg: string) => JSX.Element, publishToStorage: (storage: 'ipfs' | 'swarm', contract: ContractData) => void) => {
   const continueCb = (error, continueTxExecution, cancelCb) => {
     if (error) {
       const msg = typeof error !== 'string' ? error.message : error
@@ -424,23 +450,23 @@ export const createInstance = (gasEstimationPrompt: (msg: string) => JSX.Element
     const data = plugin.compilersArtefacts.getCompilerAbstract(contractObject.contract.file)
 
     plugin.compilersArtefacts.addResolvedContract(addressToString(address), data)
-    if (self.ipfsCheckedState) {
-      _paq.push(['trackEvent', 'udapp', 'DeployAndPublish', this.networkName])
-      publishToStorage('ipfs', self.runView.fileProvider, self.runView.fileManager, selectedContract)
+    if (plugin.REACT_API.ipfsChecked) {
+      _paq.push(['trackEvent', 'udapp', 'DeployAndPublish', plugin.REACT_API.networkName])
+      publishToStorage('ipfs', selectedContract)
     } else {
       _paq.push(['trackEvent', 'udapp', 'DeployOnly', plugin.REACT_API.networkName])
     }
   }
 
-      // let contractMetadata
-      // try {
-      //   contractMetadata = await this.runView.call('compilerMetadata', 'deployMetadataOf', selectedContract.name, selectedContract.contract.file)
-      // } catch (error) {
-      //   return statusCb(`creation of ${selectedContract.name} errored: ${error.message ? error.message : error}`)
-      // }
+  let contractMetadata
+  try {
+    contractMetadata = await plugin.call('compilerMetadata', 'deployMetadataOf', selectedContract.name, selectedContract.contract.file)
+  } catch (error) {
+    return statusCb(`creation of ${selectedContract.name} errored: ${error.message ? error.message : error}`)
+  }
 
-      // const compilerContracts = this.dropdownLogic.getCompilerContracts()
-      // const confirmationCb = this.getConfirmationCb(modalDialog, confirmDialog)
+  const compilerContracts = getCompilerContracts()
+  const confirmationCb = getConfirmationCb(mainnetPrompt)
 
       // if (selectedContract.isOverSizeLimit()) {
       //   return modalDialog('Contract code size over limit', yo`<div>Contract creation initialization returns data with length of more than 24576 bytes. The deployment will likely fails. <br>
@@ -460,3 +486,45 @@ export const createInstance = (gasEstimationPrompt: (msg: string) => JSX.Element
       // }
       // this.deployContract(selectedContract, args, contractMetadata, compilerContracts, { continueCb, promptCb, statusCb, finalCb }, confirmationCb)
 }
+
+const deployContract = (selectedContract, args, contractMetadata, compilerContracts, callbacks, confirmationCb) => {
+  _paq.push(['trackEvent', 'udapp', 'DeployContractTo', this.networkName + '_' + this.networkId])
+  const { statusCb } = callbacks
+  if (!contractMetadata || (contractMetadata && contractMetadata.autoDeployLib)) {
+    return this.blockchain.deployContractAndLibraries(selectedContract, args, contractMetadata, compilerContracts, callbacks, confirmationCb)
+  }
+  if (Object.keys(selectedContract.bytecodeLinkReferences).length) statusCb(`linking ${JSON.stringify(selectedContract.bytecodeLinkReferences, null, '\t')} using ${JSON.stringify(contractMetadata.linkReferences, null, '\t')}`)
+  this.blockchain.deployContractWithLibrary(selectedContract, args, contractMetadata, compilerContracts, callbacks, confirmationCb)
+}
+
+export const setCheckIpfs = (value: boolean) => {
+  dispatch(setIpfsCheckedState(value))
+}
+
+export const updateGasPriceStatus = (status: boolean) => {
+  dispatch(setGasPriceStatus(status))
+}
+
+export const updateConfirmSettings = (confirmation: boolean) => {
+  dispatch(setConfirmSettings(confirmation))
+}
+
+export const updateMaxFee = (fee: string) => {
+  dispatch(setMaxFee(fee))
+}
+
+export const updateMaxPriorityFee = (fee: string) => {
+  dispatch(setMaxPriorityFee(fee))
+}
+
+export const updateBaseFeePerGas = (baseFee: string) => {
+  dispatch(setBaseFeePerGas(baseFee))
+}
+
+export const updateGasPrice = (price: string) => {
+  dispatch(setGasPrice(price))
+}
+
+export const updateTxFeeContent = (content: string) => {
+  dispatch(setTxFeeContent(content))
+}
diff --git a/libs/remix-ui/run-tab/src/lib/actions/payload.ts b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
index 302cbdebcf..56cfd0d022 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/payload.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
@@ -169,3 +169,52 @@ export const setIpfsCheckedState = (state: boolean) => {
     payload: state
   }
 }
+
+export const setGasPriceStatus = (status: boolean) => {
+  return {
+    type: 'SET_GAS_PRICE_STATUS',
+    payload: status
+  }
+}
+
+export const setConfirmSettings = (confirmation: boolean) => {
+  return {
+    type: 'SET_CONFIRM_SETTINGS',
+    payload: confirmation
+  }
+}
+
+export const setMaxFee = (fee: string) => {
+  return {
+    type: 'SET_MAX_FEE',
+    payload: fee
+  }
+}
+
+export const setMaxPriorityFee = (fee: string) => {
+  return {
+    type: 'SET_MAX_PRIORITY_FEE',
+    payload: fee
+  }
+}
+
+export const setBaseFeePerGas = (baseFee: string) => {
+  return {
+    type: 'SET_BASE_FEE_PER_GAS',
+    payload: baseFee
+  }
+}
+
+export const setGasPrice = (price: string) => {
+  return {
+    type: 'SET_GAS_PRICE',
+    payload: price
+  }
+}
+
+export const setTxFeeContent = (content: string) => {
+  return {
+    type: 'SET_TX_FEE_CONTENT',
+    payload: content
+  }
+}
diff --git a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
index 867c298802..d55b94c180 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
@@ -1,6 +1,6 @@
 // eslint-disable-next-line no-use-before-define
 import React, { useEffect, useState } from 'react'
-import { ContractDropdownProps } from '../types'
+import { ContractData, ContractDropdownProps } from '../types'
 import * as ethJSUtil from 'ethereumjs-util'
 import { ContractGUI } from './contractGUI'
 import { PassphrasePrompt } from './passphrase'
@@ -14,7 +14,6 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     display: '',
     content: ''
   })
-  const [ipfsCheckedState, setIpfsCheckedState] = useState<boolean>(false)
   const [atAddressOptions, setAtAddressOptions] = useState<{title: string, disabled: boolean}>({
     title: 'address of contract',
     disabled: true
@@ -26,19 +25,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
   })
   const [selectedContract, setSelectedContract] = useState<string>('')
   const [compFails, setCompFails] = useState<'none' | 'block'>('none')
-  const [loadedContractData, setLoadedContractData] = useState<{
-    name: string,
-    contract: string,
-    compiler: any,
-    abi: any,
-    bytecodeObject: any,
-    bytecodeLinkReferences: any,
-    object: any,
-    deployedBytecode: any,
-    getConstructorInterface: () => any,
-    getConstructorInputs: () => any,
-    isOverSizeLimit: () => boolean,
-    metadata: any}>(null)
+  const [loadedContractData, setLoadedContractData] = useState<ContractData>(null)
   const { contractList, loadType, currentFile } = props.contracts
 
   useEffect(() => {
@@ -46,7 +33,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     const savedConfig = window.localStorage.getItem(`ipfs/${props.exEnvironment}/${networkName}`)
     const isCheckedIPFS = savedConfig === 'true' ? true : false // eslint-disable-line
 
-    if (isCheckedIPFS) setIpfsCheckedState(true)
+    if (isCheckedIPFS) props.setIpfsCheckedState(true)
     setAbiLabel({
       display: 'none',
       content: 'ABI file selected'
@@ -134,7 +121,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     if (selectedContract.bytecodeObject.length === 0) {
       return props.modal('Alert', 'This contract may be abstract, not implement an abstract parent\'s methods completely or not invoke an inherited contract\'s constructor correctly.', 'OK', () => {})
     }
-    props.createInstance(gasEstimationPrompt, passphrasePrompt, logBuilder)
+    props.createInstance(loadedContractData, gasEstimationPrompt, passphrasePrompt, logBuilder, props.publishToStorage)
   }
 
   //   listenToContextChange () {
@@ -285,22 +272,6 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
   //     return confirmationCb
   //   }
 
-  const gasEstimationPrompt = (msg: string) => {
-    return (
-      <div>Gas estimation errored with the following message (see below). The transaction execution will likely fail. Do you want to force sending? <br />
-        ${msg}
-      </div>
-    )
-  }
-
-  const logBuilder = (msg: string) => {
-    return <pre>{msg}</pre>
-  }
-
-  const passphrasePrompt = (message: string) => {
-    return <PassphrasePrompt message={message} setPassphrase={props.setPassphrase} defaultValue={props.passphrase} />
-  }
-
   const atAddressChanged = (event) => {
     const value = event.target.value
 
@@ -349,8 +320,8 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
   }
 
   const handleCheckedIPFS = () => {
-    setIpfsCheckedState(!ipfsCheckedState)
-    window.localStorage.setItem(`ipfs/${props.exEnvironment}/${networkName}`, ipfsCheckedState.toString())
+    props.setIpfsCheckedState(!props.ipfsCheckedState)
+    window.localStorage.setItem(`ipfs/${props.exEnvironment}/${networkName}`, props.ipfsCheckedState.toString())
   }
 
   const handleContractChange = (e) => {
@@ -359,6 +330,26 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     setSelectedContract(value)
   }
 
+  const gasEstimationPrompt = (msg: string) => {
+    return (
+      <div>Gas estimation errored with the following message (see below). The transaction execution will likely fail. Do you want to force sending? <br />
+        ${msg}
+      </div>
+    )
+  }
+
+  const logBuilder = (msg: string) => {
+    return <pre>{msg}</pre>
+  }
+
+  const passphrasePrompt = (message: string) => {
+    return <PassphrasePrompt message={message} setPassphrase={props.setPassphrase} defaultValue={props.passphrase} />
+  }
+
+  const mainnetPrompt = () => {
+    
+  }
+
   return (
     <div className="udapp_container" data-id="contractDropdownContainer">
       <label className="udapp_settingsLabel">Contract</label>
@@ -383,7 +374,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
                   className="form-check-input custom-control-input"
                   type="checkbox"
                   onChange={handleCheckedIPFS}
-                  checked={ipfsCheckedState}
+                  checked={props.ipfsCheckedState}
                 />
                 <label
                   htmlFor="deployAndRunPublishToIPFS"
diff --git a/libs/remix-ui/run-tab/src/lib/components/mainnet.tsx b/libs/remix-ui/run-tab/src/lib/components/mainnet.tsx
new file mode 100644
index 0000000000..9b494c8b8c
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/components/mainnet.tsx
@@ -0,0 +1,146 @@
+// eslint-disable-next-line no-use-before-define
+import React, { useEffect } from 'react'
+import { CopyToClipboard } from '@remix-ui/clipboard'
+import Web3 from 'web3'
+
+interface MainnetProps {
+  network: {
+    name: string,
+    lastBlock: {
+      baseFeePerGas: string
+    }
+  },
+  tx: {
+    from: string,
+    to: string,
+    data: string,
+    gas: string
+  },
+  amount: string,
+  gasEstimation: string,
+  setNewGasPrice: (maxFee: string, cb: (txFeeText: string, priceStatus: boolean) => void) => void,
+  updateGasPriceStatus: (status: boolean) => void,
+  updateConfirmSettings: (confirmation: boolean) => void,
+  updateMaxFee: (fee: string) => void,
+  updateBaseFeePerGas: (fee: string) => void,
+  init: (cb: (txFeeText: string, gasPriceValue: string, gasPriceStatus: boolean) => void) => void,
+  setTxFeeContent: (content: string) => void,
+  updateGasPrice: (price: string) => void,
+  txFeeContent: string
+}
+
+export function PassphrasePrompt (props: MainnetProps) {
+  useEffect(() => {
+    props.init((txFeeText, gasPriceValue, gasPriceStatus) => {
+      if (txFeeText) props.setTxFeeContent(txFeeText)
+      if (gasPriceValue) onGasPriceChange(gasPriceValue)
+      if (props.network && props.network.lastBlock && props.network.lastBlock.baseFeePerGas) onMaxFeeChange(Web3.utils.fromWei(Web3.utils.toBN(parseInt(props.network.lastBlock.baseFeePerGas, 16)), 'Gwei'))
+      if (gasPriceStatus !== undefined) props.updateGasPriceStatus(gasPriceStatus)
+    })
+  }, [])
+
+  const onMaxFeeChange = (value: string) => {
+    const maxFee = value
+    // @ts-ignore
+    if (parseInt(props.network.lastBlock.baseFeePerGas, 16) > Web3.utils.toWei(maxFee, 'Gwei')) {
+      props.setTxFeeContent('Transaction is invalid. Max fee should not be less than Base fee')
+      props.updateGasPriceStatus(false)
+      props.updateConfirmSettings(true)
+      return
+    } else {
+      props.updateGasPriceStatus(true)
+      props.updateConfirmSettings(false)
+    }
+
+    props.setNewGasPrice(maxFee, (txFeeText, priceStatus) => {
+      props.setTxFeeContent(txFeeText)
+      if (priceStatus) {
+        props.updateConfirmSettings(false)
+      } else {
+        props.updateConfirmSettings(true)
+      }
+      props.updateGasPriceStatus(priceStatus)
+      props.updateMaxFee(maxFee)
+      props.updateBaseFeePerGas(props.network.lastBlock.baseFeePerGas)
+    })
+  }
+
+  const onGasPriceChange = (value: string) => {
+    const gasPrice = value
+
+    props.setNewGasPrice(gasPrice, (txFeeText, priceStatus) => {
+      props.setTxFeeContent(txFeeText)
+      props.updateGasPriceStatus(priceStatus)
+      props.updateGasPrice(gasPrice)
+    })
+  }
+
+  return (
+    <div>
+      <div className="text-dark">You are about to create a transaction on {props.network.name} Network. Confirm the details to send the info to your provider.
+        <br />The provider for many users is MetaMask. The provider will ask you to sign the transaction before it is sent to {props.network.name} Network.
+      </div>
+      <div className="mt-3">
+        <div>
+          <span className="text-dark mr-2">From:</span>
+          <span>{props.tx.from}</span>
+        </div>
+        <div>
+          <span className="text-dark mr-2">To:</span>
+          <span>{props.tx.to ? props.tx.to : '(Contract Creation)'}</span>
+        </div>
+        <div className="d-flex align-items-center">
+          <span className="text-dark mr-2">Data:</span>
+          <pre className="udapp_wrapword mb-0">{props.tx.data && props.tx.data.length > 50 ? props.tx.data.substring(0, 49) + '...' : props.tx.data}
+            <CopyToClipboard content={props.tx.data} />
+          </pre>
+        </div>
+        <div className="mb-3">
+          <span className="text-dark mr-2">Amount:</span>
+          <span>{props.amount} Ether</span>
+        </div>
+        <div>
+          <span className="text-dark mr-2">Gas estimation:</span>
+          <span>{props.gasEstimation}</span>
+        </div>
+        <div>
+          <span className="text-dark mr-2">Gas limit:</span>
+          <span>${props.tx.gas}</span>
+        </div>
+        {
+          props.network.lastBlock.baseFeePerGas
+            ? <div>
+              <div className="align-items-center my-1" title="Represents the part of the tx fee that goes to the miner.">
+                <div className='d-flex'>
+                  <span className="text-dark mr-2 text-nowrap">Max Priority fee:</span>
+                  <input className="form-control mr-1 text-right" style={{ height: '1.2rem', width: '6rem' }} value="1" id='maxpriorityfee' />
+                  <span title="visit https://ethgasstation.info for current gas price info.">Gwei</span>
+                </div>
+              </div>
+              <div className="align-items-center my-1" title="Represents the maximum amount of fee that you will pay for this transaction. The minimun needs to be set to base fee.">
+                <div className='d-flex'>
+                  <span className="text-dark mr-2 text-nowrap">Max fee (Not less than base fee {Web3.utils.fromWei(Web3.utils.toBN(parseInt(props.network.lastBlock.baseFeePerGas, 16)), 'Gwei')} Gwei):</span>
+                  <input className="form-control mr-1 text-right" style={{ height: '1.2rem', width: '6rem' }} id='maxfee' onInput={(e) => onMaxFeeChange(e.target.value)} />
+                  <span>Gwei</span>
+                  <span className="text-dark ml-2"></span>
+                </div>
+              </div>
+            </div>
+            : <div className="d-flex align-items-center my-1">
+              <span className="text-dark mr-2 text-nowrap">Gas price:</span>
+              <input className="form-control mr-1 text-right" style={{ width: '40px', height: '28px' }} id='gasprice' onInput={(e) => onGasPriceChange(e.target.value)} />
+              <span>Gwei (visit <a target='_blank' href='https://ethgasstation.info'>ethgasstation.info</a> for current gas price info.)</span>
+            </div>
+        }
+        <div className="mb-3">
+          <span className="text-dark mr-2">Max transaction fee:</span>
+          <span className="text-warning" id='txfee'>{ props.txFeeContent }</span>
+        </div>
+      </div>
+      <div className="d-flex py-1 align-items-center custom-control custom-checkbox remixui_checkbox">
+        <input className="form-check-input custom-control-input" id="confirmsetting" type="checkbox" />
+        <label className="m-0 form-check-label custom-control-label" htmlFor="confirmsetting">Do not show this warning again.</label>
+      </div>
+    </div>
+  )
+}
diff --git a/libs/remix-ui/run-tab/src/lib/css/run-tab.css b/libs/remix-ui/run-tab/src/lib/css/run-tab.css
index ba777bae25..f5ec6c2e65 100644
--- a/libs/remix-ui/run-tab/src/lib/css/run-tab.css
+++ b/libs/remix-ui/run-tab/src/lib/css/run-tab.css
@@ -496,4 +496,14 @@
   align-items: center;
   margin-left: 2%
 }
+#confirmsetting {
+  z-index: 1;
+}
+.udapp_wrapword {
+  white-space: pre-wrap;       /* Since CSS 2.1 */
+  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+  white-space: -pre-wrap;      /* Opera 4-6 */
+  white-space: -o-pre-wrap;    /* Opera 7 */
+  word-wrap: break-word;       /* Internet Explorer 5.5+ */
+}
 
diff --git a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
index cf057bc0ec..4e3afb5598 100644
--- a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
+++ b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
@@ -54,7 +54,13 @@ export interface RunTabState {
     isSuccessful: boolean,
     error: string
   },
-  ipfsChecked: boolean
+  ipfsChecked: boolean,
+  gasPriceStatus: boolean,
+  confirmSettings: boolean,
+  maxFee: string,
+  maxPriorityFee: string,
+  baseFeePerGas: string,
+  txFeeContent: string
 }
 
 export const runTabInitialState: RunTabState = {
@@ -124,7 +130,13 @@ export const runTabInitialState: RunTabState = {
     isSuccessful: false,
     error: null
   },
-  ipfsChecked: false
+  ipfsChecked: false,
+  gasPriceStatus: false,
+  confirmSettings: false,
+  maxFee: '',
+  maxPriorityFee: '',
+  baseFeePerGas: '',
+  txFeeContent: ''
 }
 
 export const runTabReducer = (state: RunTabState = runTabInitialState, action: Action) => {
@@ -441,6 +453,69 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
       }
     }
 
+    case 'SET_GAS_PRICE_STATUS': {
+      const payload: boolean = action.payload
+
+      return {
+        ...state,
+        gasPriceStatus: payload
+      }
+    }
+
+    case 'SET_CONFIRM_SETTINGS': {
+      const payload: boolean = action.payload
+
+      return {
+        ...state,
+        confirmSettings: payload
+      }
+    }
+
+    case 'SET_MAX_FEE': {
+      const payload: string = action.payload
+
+      return {
+        ...state,
+        maxFee: payload
+      }
+    }
+
+    case 'SET_MAX_PRIORITY_FEE': {
+      const payload: string = action.payload
+
+      return {
+        ...state,
+        maxPriorityFee: payload
+      }
+    }
+
+    case 'SET_BASE_FEE_PER_GAS': {
+      const payload: string = action.payload
+
+      return {
+        ...state,
+        baseFeePerGas: payload
+      }
+    }
+
+    case 'SET_GAS_PRICE': {
+      const payload: string = action.payload
+
+      return {
+        ...state,
+        gasPrice: payload
+      }
+    }
+
+    case 'SET_TX_FEE_CONTENT': {
+      const payload: string = action.payload
+
+      return {
+        ...state,
+        txFeeContent: payload
+      }
+    }
+
     default:
       return state
   }
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
index 42501a8483..79107e001a 100644
--- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -7,10 +7,23 @@ import { ContractDropdownUI } from './components/contractDropdownUI'
 import { InstanceContainerUI } from './components/instanceContainerUI'
 import { RecorderUI } from './components/recorderCardUI'
 import { SettingsUI } from './components/settingsUI'
-import { Modal, RunTabProps } from './types'
+import { ContractData, Modal, RunTabProps } from './types'
 import { runTabInitialState, runTabReducer } from './reducers/runTab'
-import { initRunTab, setAccount, setUnit, setGasFee, setExecutionContext, setWeb3Endpoint, clearPopUp, createNewBlockchainAccount, setPassphrasePrompt, setMatchPassphrasePrompt, signMessageWithAddress, getSelectedContract, createInstance } from './actions'
+import {
+  initRunTab, setAccount,
+  setUnit, setGasFee,
+  setExecutionContext, setWeb3Endpoint,
+  clearPopUp, createNewBlockchainAccount,
+  setPassphrasePrompt, setMatchPassphrasePrompt,
+  signMessageWithAddress, getSelectedContract,
+  createInstance, setCheckIpfs,
+  updateBaseFeePerGas, updateConfirmSettings,
+  updateGasPrice, updateGasPriceStatus,
+  updateMaxFee, updateMaxPriorityFee,
+  updateTxFeeContent
+} from './actions'
 import './css/run-tab.css'
+import { PublishToStorage } from '@remix-ui/publish-to-storage'
 
 export function RunTabUI (props: RunTabProps) {
   const { plugin } = props
@@ -26,6 +39,13 @@ export function RunTabUI (props: RunTabProps) {
   const [modals, setModals] = useState<Modal[]>([])
   const [focusToaster, setFocusToaster] = useState<string>('')
   const [toasters, setToasters] = useState<string[]>([])
+  const [publishData, setPublishData] = useState<{
+    storage: 'ipfs' | 'swarm',
+    contract: ContractData
+  }>({
+    storage: null,
+    contract: null
+  })
   const [runTab, dispatch] = useReducer(runTabReducer, runTabInitialState)
   const REACT_API = { runTab }
 
@@ -108,6 +128,20 @@ export function RunTabUI (props: RunTabProps) {
     })
   }
 
+  const resetStorage = () => {
+    setPublishData({
+      storage: null,
+      contract: null
+    })
+  }
+
+  const publishToStorage = (storage: 'ipfs' | 'swarm', contract: ContractData) => {
+    setPublishData({
+      storage,
+      contract
+    })
+  }
+
   return (
     <Fragment>
       <div className="udapp_runTabView run-tab" id="runTabView" data-id="runTabView">
@@ -143,6 +177,16 @@ export function RunTabUI (props: RunTabProps) {
             passphrase={runTab.passphrase}
             setPassphrase={setPassphrasePrompt}
             createInstance={createInstance}
+            ipfsCheckedState={runTab.ipfsChecked}
+            setIpfsCheckedState={setCheckIpfs}
+            publishToStorage={publishToStorage}
+            updateBaseFeePerGas={updateBaseFeePerGas}
+            updateConfirmSettings={updateConfirmSettings}
+            updateGasPrice={updateGasPrice}
+            updateGasPriceStatus={updateGasPriceStatus}
+            updateMaxFee={updateMaxFee}
+            updateMaxPriorityFee={updateMaxPriorityFee}
+            updateTxFeeContent={updateTxFeeContent}
           />
           <RecorderUI />
           <InstanceContainerUI />
@@ -150,6 +194,7 @@ export function RunTabUI (props: RunTabProps) {
       </div>
       <ModalDialog id='fileSystem' { ...focusModal } handleHide={ handleHideModal } />
       <Toaster message={focusToaster} handleHide={handleToaster} />
+      <PublishToStorage api={props.plugin} resetStorage={resetStorage} storage={publishData.storage} contract={publishData.contract} />
     </Fragment>
   )
 }
diff --git a/libs/remix-ui/run-tab/src/lib/types/index.ts b/libs/remix-ui/run-tab/src/lib/types/index.ts
index 9675f0be4f..903985e78a 100644
--- a/libs/remix-ui/run-tab/src/lib/types/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/index.ts
@@ -101,6 +101,21 @@ export interface ValueProps {
   sendUnit: string
 }
 
+export interface ContractData {
+  name: string,
+  contract: any,
+  compiler: any,
+  abi: any,
+  bytecodeObject: any,
+  bytecodeLinkReferences: any,
+  object: any,
+  deployedBytecode: any,
+  getConstructorInterface: () => any,
+  getConstructorInputs: () => any,
+  isOverSizeLimit: () => boolean,
+  metadata: any
+}
+
 export interface ContractDropdownProps {
   exEnvironment: string,
   contracts: {
@@ -115,24 +130,21 @@ export interface ContractDropdownProps {
     isSuccessful: boolean,
     error: string
   },
-  getSelectedContract: (contractName: string, compilerAtributeName: string) => {
-    name: string,
-    contract: string,
-    compiler: any,
-    abi: any,
-    bytecodeObject: any,
-    bytecodeLinkReferences: any,
-    object: any,
-    deployedBytecode: any,
-    getConstructorInterface: () => any,
-    getConstructorInputs: () => any,
-    isOverSizeLimit: () => boolean,
-    metadata: any
-  },
+  getSelectedContract: (contractName: string, compilerAtributeName: string) => ContractData,
   modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
   passphrase: string,
   setPassphrase: (passphrase: string) => void,
-  createInstance: (gasEstimationPrompt: (msg: string) => JSX.Element, passphrasePrompt: (msg: string) => JSX.Element, logBuilder: (msg: string) => JSX.Element) => void
+  createInstance: (selectedContract: ContractData, gasEstimationPrompt: (msg: string) => JSX.Element, passphrasePrompt: (msg: string) => JSX.Element, logBuilder: (msg: string) => JSX.Element, publishToStorage: (storage: 'ipfs' | 'swarm', contract: ContractData) => void) => void,
+  ipfsCheckedState: boolean,
+  setIpfsCheckedState: (value: boolean) => void,
+  publishToStorage: (storage: 'ipfs' | 'swarm', contract: ContractData) => void,
+  updateBaseFeePerGas: (baseFee: string) => void,
+  updateGasPriceStatus: (status: boolean) => void,
+  updateConfirmSettings: (confirmation: boolean) => void,
+  updateMaxFee: (fee: string) => void,
+  updateMaxPriorityFee: (fee: string) => void,
+  updateGasPrice: (price: string) => void,
+  updateTxFeeContent: (content: string) => void
 }
 
 export interface RecorderProps {

From 273590db044e1685730f410b1ec6d3bc5b663924 Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Sat, 18 Dec 2021 13:59:13 +0100
Subject: [PATCH 125/168] Finish up deploy

---
 .eslintrc.json                                |  5 +-
 .../src/lib/publish-to-storage.tsx            |  2 +-
 .../remix-ui/run-tab/src/lib/actions/index.ts | 74 +++++++++++--------
 .../run-tab/src/lib/actions/payload.ts        |  1 -
 .../src/lib/components/contractDropdownUI.tsx | 32 +++++++-
 .../run-tab/src/lib/components/mainnet.tsx    | 39 +++-------
 .../run-tab/src/lib/reducers/runTab.ts        |  8 +-
 libs/remix-ui/run-tab/src/lib/run-tab.tsx     |  2 +-
 libs/remix-ui/run-tab/src/lib/types/index.ts  | 50 ++++++++++++-
 .../src/lib/solidity-compiler.tsx             |  2 +-
 .../solidity-compiler/src/lib/types/index.ts  |  6 +-
 .../workspace/src/lib/contexts/index.ts       |  1 -
 .../src/lib/providers/FileSystemProvider.tsx  |  1 -
 .../remix-ui/workspace/src/lib/types/index.ts |  1 -
 14 files changed, 141 insertions(+), 83 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 06cc47d9a2..5fe8155373 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -31,5 +31,8 @@
       "extends": ["plugin:@nrwl/nx/javascript"],
       "rules": {}
     }
-  ]
+  ],
+  "globals": {
+    "JSX": true
+  }
 }
diff --git a/libs/remix-ui/publish-to-storage/src/lib/publish-to-storage.tsx b/libs/remix-ui/publish-to-storage/src/lib/publish-to-storage.tsx
index f9245dc15e..ed8ca6a65f 100644
--- a/libs/remix-ui/publish-to-storage/src/lib/publish-to-storage.tsx
+++ b/libs/remix-ui/publish-to-storage/src/lib/publish-to-storage.tsx
@@ -79,7 +79,7 @@ export const PublishToStorage = (props: RemixUiPublishToStorageProps) => {
     resetStorage()
   }
 
-  const modal = async (title: string, message: string | JSX.Element) => { // eslint-disable-line no-undef
+  const modal = async (title: string, message: string | JSX.Element) => {
     await setState(prevState => {
       return {
         ...prevState,
diff --git a/libs/remix-ui/run-tab/src/lib/actions/index.ts b/libs/remix-ui/run-tab/src/lib/actions/index.ts
index af87629b30..8baec21381 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/index.ts
@@ -7,7 +7,7 @@ import { addProvider, displayNotification, displayPopUp, fetchAccountsListFailed
 import { RunTab } from '../types/run-tab'
 import { CompilerAbstract } from '@remix-project/remix-solidity'
 import * as remixLib from '@remix-project/remix-lib'
-import { ContractData } from '../types'
+import { ContractData, Network, Tx } from '../types'
 declare global {
   interface Window {
     _paq: any
@@ -228,7 +228,6 @@ const removeExternalProvider = (name) => {
   dispatch(removeProvider(name))
 }
 
-// eslint-disable-next-line no-undef
 export const setExecutionContext = (executionContext: { context: string, fork: string }, displayContent: JSX.Element) => {
   plugin.blockchain.changeExecutionContext(executionContext, () => {
     dispatch(displayNotification('External node request', displayContent, 'OK', 'Cancel', () => {
@@ -250,7 +249,6 @@ export const clearPopUp = async () => {
   dispatch(hidePopUp())
 }
 
-// eslint-disable-next-line no-undef
 export const createNewBlockchainAccount = async (cbMessage: JSX.Element) => {
   plugin.blockchain.newAccount(
     '',
@@ -283,7 +281,6 @@ export const setMatchPassphrasePrompt = (passphrase: string) => {
   dispatch(setMatchPassphrase(passphrase))
 }
 
-// eslint-disable-next-line no-undef
 export const signMessageWithAddress = (account: string, message: string, modalContent: (hash: string, data: string) => JSX.Element, passphrase?: string) => {
   plugin.blockchain.signMessage(message, account, passphrase, (err, msgHash, signedData) => {
     if (err) {
@@ -382,27 +379,32 @@ const getCompilerContracts = () => {
   return plugin.compilersArtefacts.__last.getData().contracts
 }
 
-// eslint-disable-next-line no-undef
 const terminalLogger = (view: JSX.Element) => {
   plugin.call('terminal', 'logHtml', view)
 }
 
-const getConfirmationCb = () => {
+const getConfirmationCb = (confirmDialogContent: (
+  tx: Tx, network:
+  Network, amount: string,
+  gasEstimation: string,
+  gasFees: (maxFee: string, cb: (txFeeText: string, priceStatus: boolean) => void) => void,
+  determineGasPrice: (cb: (txFeeText: string, gasPriceValue: string, gasPriceStatus: boolean) => void) => void
+  ) => JSX.Element) => {
   // this code is the same as in recorder.js. TODO need to be refactored out
   const confirmationCb = (network, tx, gasEstimation, continueTxExecution, cancelCb) => {
     if (network.name !== 'Main') {
       return continueTxExecution(null)
     }
     const amount = plugin.blockchain.fromWei(tx.value, true, 'ether')
-    const content = confirmDialog(tx, network, amount, gasEstimation, plugin.blockchain.determineGasFees(tx), plugin.blockchain.determineGasPrice.bind(plugin.blockchain))
+    const content = confirmDialogContent(tx, network, amount, gasEstimation, plugin.blockchain.determineGasFees(tx), plugin.blockchain.determineGasPrice.bind(plugin.blockchain))
 
     dispatch(displayNotification('Confirm transaction', content, 'Confirm', 'Cancel', () => {
-      plugin.blockchain.config.setUnpersistedProperty('doNotShowTransactionConfirmationAgain', content.querySelector('input#confirmsetting').checked)
+      plugin.blockchain.config.setUnpersistedProperty('doNotShowTransactionConfirmationAgain', plugin.REACT_API.confirmSettings)
       // TODO: check if this is check is still valid given the refactor
-      if (!content.gasPriceStatus) {
+      if (!plugin.REACT_API.gasPriceStatus) {
         cancelCb('Given transaction fee is not correct')
       } else {
-        continueTxExecution(content.txFee)
+        continueTxExecution({ maxFee: plugin.REACT_API.maxFee, maxPriorityFee: plugin.REACT_API.maxPriorityFee, baseFeePerGas: plugin.REACT_API.baseFeePerGas, gasPrice: plugin.REACT_API.gasPrice })
       }
     }, () => {
       return cancelCb('Transaction canceled by user.')
@@ -412,8 +414,22 @@ const getConfirmationCb = () => {
   return confirmationCb
 }
 
-// eslint-disable-next-line no-undef
-export const createInstance = async (selectedContract: ContractData, gasEstimationPrompt: (msg: string) => JSX.Element, passphrasePrompt: (msg: string) => JSX.Element, logBuilder: (msg: string) => JSX.Element, publishToStorage: (storage: 'ipfs' | 'swarm', contract: ContractData) => void) => {
+export const createInstance = async (
+  selectedContract: ContractData,
+  gasEstimationPrompt: (msg: string) => JSX.Element,
+  passphrasePrompt: (msg: string) => JSX.Element,
+  logBuilder: (msg: string) => JSX.Element,
+  publishToStorage: (storage: 'ipfs' | 'swarm',
+  contract: ContractData) => void,
+  mainnetPrompt: (
+    tx: Tx, network:
+    Network, amount: string,
+    gasEstimation: string,
+    gasFees: (maxFee: string, cb: (txFeeText: string, priceStatus: boolean) => void) => void,
+    determineGasPrice: (cb: (txFeeText: string, gasPriceValue: string, gasPriceStatus: boolean) => void) => void
+    ) => JSX.Element,
+  isOverSizePrompt: () => JSX.Element,
+  args) => {
   const continueCb = (error, continueTxExecution, cancelCb) => {
     if (error) {
       const msg = typeof error !== 'string' ? error.message : error
@@ -468,33 +484,27 @@ export const createInstance = async (selectedContract: ContractData, gasEstimati
   const compilerContracts = getCompilerContracts()
   const confirmationCb = getConfirmationCb(mainnetPrompt)
 
-      // if (selectedContract.isOverSizeLimit()) {
-      //   return modalDialog('Contract code size over limit', yo`<div>Contract creation initialization returns data with length of more than 24576 bytes. The deployment will likely fails. <br>
-      //   More info: <a href="https://github.com/ethereum/EIPs/blob/master/EIPS/eip-170.md" target="_blank">eip-170</a>
-      //   </div>`,
-      //   {
-      //     label: 'Force Send',
-      //     fn: () => {
-      //       this.deployContract(selectedContract, args, contractMetadata, compilerContracts, { continueCb, promptCb, statusCb, finalCb }, confirmationCb)
-      //     }
-      //   }, {
-      //     label: 'Cancel',
-      //     fn: () => {
-      //       this.logCallback(`creation of ${selectedContract.name} canceled by user.`)
-      //     }
-      //   })
-      // }
-      // this.deployContract(selectedContract, args, contractMetadata, compilerContracts, { continueCb, promptCb, statusCb, finalCb }, confirmationCb)
+  if (selectedContract.isOverSizeLimit()) {
+    return dispatch(displayNotification('Contract code size over limit', isOverSizePrompt(), 'Force Send', 'Cancel', () => {
+      deployContract(selectedContract, args, contractMetadata, compilerContracts, { continueCb, promptCb, statusCb, finalCb }, confirmationCb)
+    }, () => {
+      const log = logBuilder(`creation of ${selectedContract.name} canceled by user.`)
+
+      return terminalLogger(log)
+    }))
+  }
+  deployContract(selectedContract, args, contractMetadata, compilerContracts, { continueCb, promptCb, statusCb, finalCb }, confirmationCb)
 }
 
 const deployContract = (selectedContract, args, contractMetadata, compilerContracts, callbacks, confirmationCb) => {
-  _paq.push(['trackEvent', 'udapp', 'DeployContractTo', this.networkName + '_' + this.networkId])
+  _paq.push(['trackEvent', 'udapp', 'DeployContractTo', plugin.REACT_API.networkName])
   const { statusCb } = callbacks
+
   if (!contractMetadata || (contractMetadata && contractMetadata.autoDeployLib)) {
-    return this.blockchain.deployContractAndLibraries(selectedContract, args, contractMetadata, compilerContracts, callbacks, confirmationCb)
+    return plugin.blockchain.deployContractAndLibraries(selectedContract, args, contractMetadata, compilerContracts, callbacks, confirmationCb)
   }
   if (Object.keys(selectedContract.bytecodeLinkReferences).length) statusCb(`linking ${JSON.stringify(selectedContract.bytecodeLinkReferences, null, '\t')} using ${JSON.stringify(contractMetadata.linkReferences, null, '\t')}`)
-  this.blockchain.deployContractWithLibrary(selectedContract, args, contractMetadata, compilerContracts, callbacks, confirmationCb)
+  plugin.blockchain.deployContractWithLibrary(selectedContract, args, contractMetadata, compilerContracts, callbacks, confirmationCb)
 }
 
 export const setCheckIpfs = (value: boolean) => {
diff --git a/libs/remix-ui/run-tab/src/lib/actions/payload.ts b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
index 56cfd0d022..d804db13d3 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/payload.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 export const fetchAccountsListRequest = () => {
   return {
     type: 'FETCH_ACCOUNTS_LIST_REQUEST',
diff --git a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
index d55b94c180..d0bceacf90 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
@@ -1,9 +1,10 @@
 // eslint-disable-next-line no-use-before-define
 import React, { useEffect, useState } from 'react'
-import { ContractData, ContractDropdownProps } from '../types'
+import { ContractData, ContractDropdownProps, Network, Tx } from '../types'
 import * as ethJSUtil from 'ethereumjs-util'
 import { ContractGUI } from './contractGUI'
 import { PassphrasePrompt } from './passphrase'
+import { MainnetPrompt } from './mainnet'
 
 export function ContractDropdownUI (props: ContractDropdownProps) {
   const [networkName, setNetworkName] = useState<string>('')
@@ -121,7 +122,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     if (selectedContract.bytecodeObject.length === 0) {
       return props.modal('Alert', 'This contract may be abstract, not implement an abstract parent\'s methods completely or not invoke an inherited contract\'s constructor correctly.', 'OK', () => {})
     }
-    props.createInstance(loadedContractData, gasEstimationPrompt, passphrasePrompt, logBuilder, props.publishToStorage)
+    props.createInstance(loadedContractData, gasEstimationPrompt, passphrasePrompt, logBuilder, props.publishToStorage, mainnetPrompt, isOverSizePrompt, args)
   }
 
   //   listenToContextChange () {
@@ -346,8 +347,31 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     return <PassphrasePrompt message={message} setPassphrase={props.setPassphrase} defaultValue={props.passphrase} />
   }
 
-  const mainnetPrompt = () => {
-    
+  const mainnetPrompt = (tx: Tx, network: Network, amount: string, gasEstimation: string, gasFees: (maxFee: string, cb: (txFeeText: string, priceStatus: boolean) => void) => void, determineGasPrice: (cb: (txFeeText: string, gasPriceValue: string, gasPriceStatus: boolean) => void) => void) => {
+    return <MainnetPrompt
+      init={determineGasPrice}
+      network={network}
+      tx={tx}
+      amount={amount}
+      gasEstimation={gasEstimation}
+      setNewGasPrice={gasFees}
+      updateBaseFeePerGas={props.updateBaseFeePerGas}
+      updateConfirmSettings={props.updateConfirmSettings}
+      updateGasPrice={props.updateGasPrice}
+      updateGasPriceStatus={props.updateGasPriceStatus}
+      updateMaxFee={props.updateMaxFee}
+      updateMaxPriorityFee={props.updateMaxPriorityFee}
+      setTxFeeContent={props.updateTxFeeContent}
+      txFeeContent={props.txFeeContent}
+    />
+  }
+
+  const isOverSizePrompt = () => {
+    return (
+      <div>Contract creation initialization returns data with length of more than 24576 bytes. The deployment will likely fails. <br />
+      More info: <a href="https://github.com/ethereum/EIPs/blob/master/EIPS/eip-170.md" target="_blank">eip-170</a>
+      </div>
+    )
   }
 
   return (
diff --git a/libs/remix-ui/run-tab/src/lib/components/mainnet.tsx b/libs/remix-ui/run-tab/src/lib/components/mainnet.tsx
index 9b494c8b8c..de98393fde 100644
--- a/libs/remix-ui/run-tab/src/lib/components/mainnet.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/mainnet.tsx
@@ -2,34 +2,9 @@
 import React, { useEffect } from 'react'
 import { CopyToClipboard } from '@remix-ui/clipboard'
 import Web3 from 'web3'
+import { MainnetProps } from '../types'
 
-interface MainnetProps {
-  network: {
-    name: string,
-    lastBlock: {
-      baseFeePerGas: string
-    }
-  },
-  tx: {
-    from: string,
-    to: string,
-    data: string,
-    gas: string
-  },
-  amount: string,
-  gasEstimation: string,
-  setNewGasPrice: (maxFee: string, cb: (txFeeText: string, priceStatus: boolean) => void) => void,
-  updateGasPriceStatus: (status: boolean) => void,
-  updateConfirmSettings: (confirmation: boolean) => void,
-  updateMaxFee: (fee: string) => void,
-  updateBaseFeePerGas: (fee: string) => void,
-  init: (cb: (txFeeText: string, gasPriceValue: string, gasPriceStatus: boolean) => void) => void,
-  setTxFeeContent: (content: string) => void,
-  updateGasPrice: (price: string) => void,
-  txFeeContent: string
-}
-
-export function PassphrasePrompt (props: MainnetProps) {
+export function MainnetPrompt (props: MainnetProps) {
   useEffect(() => {
     props.init((txFeeText, gasPriceValue, gasPriceStatus) => {
       if (txFeeText) props.setTxFeeContent(txFeeText)
@@ -75,6 +50,10 @@ export function PassphrasePrompt (props: MainnetProps) {
     })
   }
 
+  const onMaxPriorityFeeChange = (value: string) => {
+    props.updateMaxPriorityFee(value)
+  }
+
   return (
     <div>
       <div className="text-dark">You are about to create a transaction on {props.network.name} Network. Confirm the details to send the info to your provider.
@@ -113,14 +92,14 @@ export function PassphrasePrompt (props: MainnetProps) {
               <div className="align-items-center my-1" title="Represents the part of the tx fee that goes to the miner.">
                 <div className='d-flex'>
                   <span className="text-dark mr-2 text-nowrap">Max Priority fee:</span>
-                  <input className="form-control mr-1 text-right" style={{ height: '1.2rem', width: '6rem' }} value="1" id='maxpriorityfee' />
+                  <input className="form-control mr-1 text-right" style={{ height: '1.2rem', width: '6rem' }} value="1" id='maxpriorityfee' onInput={(e: any) => onMaxPriorityFeeChange(e.target.value)} />
                   <span title="visit https://ethgasstation.info for current gas price info.">Gwei</span>
                 </div>
               </div>
               <div className="align-items-center my-1" title="Represents the maximum amount of fee that you will pay for this transaction. The minimun needs to be set to base fee.">
                 <div className='d-flex'>
                   <span className="text-dark mr-2 text-nowrap">Max fee (Not less than base fee {Web3.utils.fromWei(Web3.utils.toBN(parseInt(props.network.lastBlock.baseFeePerGas, 16)), 'Gwei')} Gwei):</span>
-                  <input className="form-control mr-1 text-right" style={{ height: '1.2rem', width: '6rem' }} id='maxfee' onInput={(e) => onMaxFeeChange(e.target.value)} />
+                  <input className="form-control mr-1 text-right" style={{ height: '1.2rem', width: '6rem' }} id='maxfee' onInput={(e: any) => onMaxFeeChange(e.target.value)} />
                   <span>Gwei</span>
                   <span className="text-dark ml-2"></span>
                 </div>
@@ -128,7 +107,7 @@ export function PassphrasePrompt (props: MainnetProps) {
             </div>
             : <div className="d-flex align-items-center my-1">
               <span className="text-dark mr-2 text-nowrap">Gas price:</span>
-              <input className="form-control mr-1 text-right" style={{ width: '40px', height: '28px' }} id='gasprice' onInput={(e) => onGasPriceChange(e.target.value)} />
+              <input className="form-control mr-1 text-right" style={{ width: '40px', height: '28px' }} id='gasprice' onInput={(e: any) => onGasPriceChange(e.target.value)} />
               <span>Gwei (visit <a target='_blank' href='https://ethgasstation.info'>ethgasstation.info</a> for current gas price info.)</span>
             </div>
         }
diff --git a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
index 4e3afb5598..edd353bff2 100644
--- a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
+++ b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
@@ -60,7 +60,8 @@ export interface RunTabState {
   maxFee: string,
   maxPriorityFee: string,
   baseFeePerGas: string,
-  txFeeContent: string
+  txFeeContent: string,
+  gasPrice: string
 }
 
 export const runTabInitialState: RunTabState = {
@@ -134,9 +135,10 @@ export const runTabInitialState: RunTabState = {
   gasPriceStatus: false,
   confirmSettings: false,
   maxFee: '',
-  maxPriorityFee: '',
+  maxPriorityFee: '1',
   baseFeePerGas: '',
-  txFeeContent: ''
+  txFeeContent: '',
+  gasPrice: ''
 }
 
 export const runTabReducer = (state: RunTabState = runTabInitialState, action: Action) => {
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
index 79107e001a..eefd45775b 100644
--- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -102,7 +102,6 @@ export function RunTabUI (props: RunTabProps) {
     }
   }, [runTab.popup])
 
-  // eslint-disable-next-line no-undef
   const modal = (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => {
     setModals(modals => {
       modals.push({ message, title, okLabel, okFn, cancelLabel, cancelFn })
@@ -187,6 +186,7 @@ export function RunTabUI (props: RunTabProps) {
             updateMaxFee={updateMaxFee}
             updateMaxPriorityFee={updateMaxPriorityFee}
             updateTxFeeContent={updateTxFeeContent}
+            txFeeContent={runTab.txFeeContent}
           />
           <RecorderUI />
           <InstanceContainerUI />
diff --git a/libs/remix-ui/run-tab/src/lib/types/index.ts b/libs/remix-ui/run-tab/src/lib/types/index.ts
index 903985e78a..659ddce557 100644
--- a/libs/remix-ui/run-tab/src/lib/types/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/index.ts
@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 import { RunTab } from './run-tab'
 export interface RunTabProps {
   plugin: RunTab
@@ -116,6 +115,20 @@ export interface ContractData {
   metadata: any
 }
 
+export interface Tx {
+  from: string,
+  to: string,
+  data: string,
+  gas: string
+}
+
+export interface Network {
+  name: string,
+  lastBlock: {
+    baseFeePerGas: string
+  }
+}
+
 export interface ContractDropdownProps {
   exEnvironment: string,
   contracts: {
@@ -134,7 +147,21 @@ export interface ContractDropdownProps {
   modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
   passphrase: string,
   setPassphrase: (passphrase: string) => void,
-  createInstance: (selectedContract: ContractData, gasEstimationPrompt: (msg: string) => JSX.Element, passphrasePrompt: (msg: string) => JSX.Element, logBuilder: (msg: string) => JSX.Element, publishToStorage: (storage: 'ipfs' | 'swarm', contract: ContractData) => void) => void,
+  createInstance: (selectedContract: ContractData,
+  gasEstimationPrompt: (msg: string) => JSX.Element,
+  passphrasePrompt: (msg: string) => JSX.Element,
+  logBuilder: (msg: string) => JSX.Element,
+  publishToStorage: (storage: 'ipfs' | 'swarm',
+  contract: ContractData) => void,
+  mainnetPrompt: (
+    tx: Tx, network:
+    Network, amount: string,
+    gasEstimation: string,
+    gasFees: (maxFee: string, cb: (txFeeText: string, priceStatus: boolean) => void) => void,
+    determineGasPrice: (cb: (txFeeText: string, gasPriceValue: string, gasPriceStatus: boolean) => void) => void
+    ) => JSX.Element,
+  isOverSizePrompt: () => JSX.Element,
+  args) => void,
   ipfsCheckedState: boolean,
   setIpfsCheckedState: (value: boolean) => void,
   publishToStorage: (storage: 'ipfs' | 'swarm', contract: ContractData) => void,
@@ -144,7 +171,8 @@ export interface ContractDropdownProps {
   updateMaxFee: (fee: string) => void,
   updateMaxPriorityFee: (fee: string) => void,
   updateGasPrice: (price: string) => void,
-  updateTxFeeContent: (content: string) => void
+  updateTxFeeContent: (content: string) => void,
+  txFeeContent: string
 }
 
 export interface RecorderProps {
@@ -181,3 +209,19 @@ export interface ContractGUIProps {
   evmBC: any,
   lookupOnly: boolean
 }
+export interface MainnetProps {
+  network: Network,
+  tx: Tx,
+  amount: string,
+  gasEstimation: string,
+  setNewGasPrice: (maxFee: string, cb: (txFeeText: string, priceStatus: boolean) => void) => void,
+  updateGasPriceStatus: (status: boolean) => void,
+  updateConfirmSettings: (confirmation: boolean) => void,
+  updateMaxFee: (fee: string) => void,
+  updateBaseFeePerGas: (fee: string) => void,
+  init: (cb: (txFeeText: string, gasPriceValue: string, gasPriceStatus: boolean) => void) => void,
+  setTxFeeContent: (content: string) => void,
+  updateGasPrice: (price: string) => void,
+  updateMaxPriorityFee: (fee: string) => void
+  txFeeContent: string
+}
diff --git a/libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx b/libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx
index 11852a17ca..dcc86f387f 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx
+++ b/libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx
@@ -81,7 +81,7 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => {
     setCurrentVersion(value)
     api.setCompilerParameters({ version: value })
   }
-  // eslint-disable-next-line no-undef
+
   const modal = async (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => {
     await setState(prevState => {
       return {
diff --git a/libs/remix-ui/solidity-compiler/src/lib/types/index.ts b/libs/remix-ui/solidity-compiler/src/lib/types/index.ts
index 83100a0bd5..4932b1456c 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/types/index.ts
+++ b/libs/remix-ui/solidity-compiler/src/lib/types/index.ts
@@ -10,8 +10,8 @@ export interface CompilerContainerProps {
   api: ICompilerApi,
   compileTabLogic: CompileTabLogic,
   isHardhatProject: boolean,
-  tooltip: (message: string | JSX.Element) => void, // eslint-disable-line no-undef
-  modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void, // eslint-disable-line no-undef
+  tooltip: (message: string | JSX.Element) => void,
+  modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
   compiledFileName: string,
   updateCurrentVersion: any,
   configurationSettings: ConfigurationSettings
@@ -21,6 +21,6 @@ export interface ContractSelectionProps {
   contractMap: {
     file: string
   } | Record<string, any>,
-  modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void, // eslint-disable-line no-undef
+  modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
   contractsDetails: Record<string, any>
 }
diff --git a/libs/remix-ui/workspace/src/lib/contexts/index.ts b/libs/remix-ui/workspace/src/lib/contexts/index.ts
index 6e189693a9..1aedce98b5 100644
--- a/libs/remix-ui/workspace/src/lib/contexts/index.ts
+++ b/libs/remix-ui/workspace/src/lib/contexts/index.ts
@@ -4,7 +4,6 @@ import { BrowserState } from '../reducers/workspace'
 
 export const FileSystemContext = createContext<{
   fs: BrowserState,
-  // eslint-disable-next-line no-undef
   modal:(title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
   dispatchInitWorkspace:() => Promise<void>,
   dispatchFetchDirectory:(path: string) => Promise<void>,
diff --git a/libs/remix-ui/workspace/src/lib/providers/FileSystemProvider.tsx b/libs/remix-ui/workspace/src/lib/providers/FileSystemProvider.tsx
index 53891615c2..904ed7cade 100644
--- a/libs/remix-ui/workspace/src/lib/providers/FileSystemProvider.tsx
+++ b/libs/remix-ui/workspace/src/lib/providers/FileSystemProvider.tsx
@@ -170,7 +170,6 @@ export const FileSystemProvider = (props: WorkspaceProps) => {
     })
   }
 
-  // eslint-disable-next-line no-undef
   const modal = (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => {
     setModals(modals => {
       modals.push({ message, title, okLabel, okFn, cancelLabel, cancelFn })
diff --git a/libs/remix-ui/workspace/src/lib/types/index.ts b/libs/remix-ui/workspace/src/lib/types/index.ts
index 37f6c22833..bf4b24d661 100644
--- a/libs/remix-ui/workspace/src/lib/types/index.ts
+++ b/libs/remix-ui/workspace/src/lib/types/index.ts
@@ -41,7 +41,6 @@ export interface WorkspaceState {
 export interface Modal {
   hide?: boolean
   title: string
-  // eslint-disable-next-line no-undef
   message: string | JSX.Element
   okLabel: string
   okFn: () => void

From 72263867f6ef7aa161841c16dacf7931e0c8d34a Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Mon, 20 Dec 2021 17:22:48 +0100
Subject: [PATCH 126/168] Render logs to terminal

---
 apps/remix-ide/src/app/udapp/run-tab.js          |  3 +--
 libs/remix-lib/src/execution/txRunnerWeb3.ts     | 12 ++++++++++++
 libs/remix-ui/run-tab/src/lib/actions/index.ts   |  2 +-
 libs/remix-ui/run-tab/src/lib/actions/payload.ts |  2 +-
 .../src/lib/components/contractDropdownUI.tsx    |  2 ++
 .../run-tab/src/lib/components/mainnet.tsx       | 16 ++++++++++++----
 libs/remix-ui/run-tab/src/lib/run-tab.tsx        |  2 ++
 libs/remix-ui/run-tab/src/lib/types/index.ts     |  8 ++++++--
 .../terminal/src/lib/remix-ui-terminal.tsx       |  8 ++++++--
 9 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/apps/remix-ide/src/app/udapp/run-tab.js b/apps/remix-ide/src/app/udapp/run-tab.js
index 297f2996c5..fdb3184231 100644
--- a/apps/remix-ide/src/app/udapp/run-tab.js
+++ b/apps/remix-ide/src/app/udapp/run-tab.js
@@ -68,8 +68,7 @@ export class RunTab extends ViewPlugin {
           selectedAccount: this.settingsUI.getSelectedAccount(),
           selectedEnvMode: this.blockchain.getProvider(),
           networkEnvironment: this.container.querySelector('*[data-id="settingsNetworkEnv"]').textContent
-        }
-        )
+        })
       }
     })
   }
diff --git a/libs/remix-lib/src/execution/txRunnerWeb3.ts b/libs/remix-lib/src/execution/txRunnerWeb3.ts
index 9b41fe9e5f..7693b0ad21 100644
--- a/libs/remix-lib/src/execution/txRunnerWeb3.ts
+++ b/libs/remix-lib/src/execution/txRunnerWeb3.ts
@@ -16,6 +16,7 @@ export class TxRunnerWeb3 {
   }
 
   _executeTx (tx, network, txFee, api, promptCb, callback) {
+    console.log('tx: ', tx)
     if (network && network.lastBlock && network.lastBlock.baseFeePerGas) {
       // the sending stack (web3.js / metamask need to have the type defined)
       // this is to avoid the following issue: https://github.com/MetaMask/metamask-extension/issues/11824
@@ -57,6 +58,7 @@ export class TxRunnerWeb3 {
         return new Promise(async (resolve, reject) => {
           const receipt = await tryTillReceiptAvailable(resp, this.getWeb3())
           tx = await tryTillTxAvailable(resp, this.getWeb3())
+          console.log(receipt, tx, receipt['transactionHash'])
           resolve({
             receipt,
             tx,
@@ -80,6 +82,9 @@ export class TxRunnerWeb3 {
       data = '0x' + data
     }
 
+    console.log('data: ', data)
+    console.log('args: ', args)
+
     return this.runInNode(args.from, args.to, data, args.value, args.gasLimit, args.useCall, args.timestamp, confirmationCb, gasEstimationForceSend, promptCb, callback)
   }
 
@@ -112,10 +117,17 @@ export class TxRunnerWeb3 {
           }
 
           if (this._api.config.getUnpersistedProperty('doNotShowTransactionConfirmationAgain')) {
+            console.log('tx: ', tx)
+            console.log('network: ', network)
+            console.log('this._api: ', this._api)
             return this._executeTx(tx, network, null, this._api, promptCb, callback)
           }
 
           confirmCb(network, tx, tx['gas'], (txFee) => {
+            console.log('tx: ', tx)
+            console.log('network: ', network)
+            console.log('txFee: ', txFee)
+            console.log('this._api: ', this._api)
             return this._executeTx(tx, network, txFee, this._api, promptCb, callback)
           }, (error) => {
             callback(error)
diff --git a/libs/remix-ui/run-tab/src/lib/actions/index.ts b/libs/remix-ui/run-tab/src/lib/actions/index.ts
index 8baec21381..e683c296a7 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/index.ts
@@ -60,7 +60,7 @@ const setupEvents = () => {
   })
 
   plugin.blockchain.event.register('transactionExecuted', (error, from, to, data, lookupOnly, txResult) => {
-    if (!lookupOnly) dispatch(setSendValue(0))
+    if (!lookupOnly) dispatch(setSendValue('0'))
     if (error) return
     updateAccountBalances()
   })
diff --git a/libs/remix-ui/run-tab/src/lib/actions/payload.ts b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
index d804db13d3..c1c1169bc6 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/payload.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
@@ -19,7 +19,7 @@ export const fetchAccountsListFailed = (error: string) => {
   }
 }
 
-export const setSendValue = (value: number) => {
+export const setSendValue = (value: string) => {
   return {
     type: 'SET_SEND_VALUE',
     payload: value
diff --git a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
index d0bceacf90..549b1be60f 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
@@ -363,6 +363,8 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
       updateMaxPriorityFee={props.updateMaxPriorityFee}
       setTxFeeContent={props.updateTxFeeContent}
       txFeeContent={props.txFeeContent}
+      maxFee={props.maxFee}
+      maxPriorityFee={props.maxPriorityFee}
     />
   }
 
diff --git a/libs/remix-ui/run-tab/src/lib/components/mainnet.tsx b/libs/remix-ui/run-tab/src/lib/components/mainnet.tsx
index de98393fde..a848c33af0 100644
--- a/libs/remix-ui/run-tab/src/lib/components/mainnet.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/mainnet.tsx
@@ -1,20 +1,28 @@
 // eslint-disable-next-line no-use-before-define
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { CopyToClipboard } from '@remix-ui/clipboard'
 import Web3 from 'web3'
 import { MainnetProps } from '../types'
 
 export function MainnetPrompt (props: MainnetProps) {
+  const [baseFee, setBaseFee] = useState<string>('')
+
   useEffect(() => {
     props.init((txFeeText, gasPriceValue, gasPriceStatus) => {
       if (txFeeText) props.setTxFeeContent(txFeeText)
       if (gasPriceValue) onGasPriceChange(gasPriceValue)
-      if (props.network && props.network.lastBlock && props.network.lastBlock.baseFeePerGas) onMaxFeeChange(Web3.utils.fromWei(Web3.utils.toBN(parseInt(props.network.lastBlock.baseFeePerGas, 16)), 'Gwei'))
+      if (props.network && props.network.lastBlock && props.network.lastBlock.baseFeePerGas) {
+        const baseFee = Web3.utils.fromWei(Web3.utils.toBN(parseInt(props.network.lastBlock.baseFeePerGas, 16)), 'Gwei')
+
+        setBaseFee(baseFee)
+        onMaxFeeChange(baseFee)
+      }
       if (gasPriceStatus !== undefined) props.updateGasPriceStatus(gasPriceStatus)
     })
   }, [])
 
   const onMaxFeeChange = (value: string) => {
+    console.log('value: ', value)
     const maxFee = value
     // @ts-ignore
     if (parseInt(props.network.lastBlock.baseFeePerGas, 16) > Web3.utils.toWei(maxFee, 'Gwei')) {
@@ -92,14 +100,14 @@ export function MainnetPrompt (props: MainnetProps) {
               <div className="align-items-center my-1" title="Represents the part of the tx fee that goes to the miner.">
                 <div className='d-flex'>
                   <span className="text-dark mr-2 text-nowrap">Max Priority fee:</span>
-                  <input className="form-control mr-1 text-right" style={{ height: '1.2rem', width: '6rem' }} value="1" id='maxpriorityfee' onInput={(e: any) => onMaxPriorityFeeChange(e.target.value)} />
+                  <input className="form-control mr-1 text-right" style={{ height: '1.2rem', width: '6rem' }} id='maxpriorityfee' onInput={(e: any) => onMaxPriorityFeeChange(e.target.value)} defaultValue={props.maxPriorityFee} />
                   <span title="visit https://ethgasstation.info for current gas price info.">Gwei</span>
                 </div>
               </div>
               <div className="align-items-center my-1" title="Represents the maximum amount of fee that you will pay for this transaction. The minimun needs to be set to base fee.">
                 <div className='d-flex'>
                   <span className="text-dark mr-2 text-nowrap">Max fee (Not less than base fee {Web3.utils.fromWei(Web3.utils.toBN(parseInt(props.network.lastBlock.baseFeePerGas, 16)), 'Gwei')} Gwei):</span>
-                  <input className="form-control mr-1 text-right" style={{ height: '1.2rem', width: '6rem' }} id='maxfee' onInput={(e: any) => onMaxFeeChange(e.target.value)} />
+                  <input className="form-control mr-1 text-right" style={{ height: '1.2rem', width: '6rem' }} id='maxfee' onInput={(e: any) => onMaxFeeChange(e.target.value)} defaultValue={baseFee} />
                   <span>Gwei</span>
                   <span className="text-dark ml-2"></span>
                 </div>
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
index eefd45775b..c7c8c3938d 100644
--- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -187,6 +187,8 @@ export function RunTabUI (props: RunTabProps) {
             updateMaxPriorityFee={updateMaxPriorityFee}
             updateTxFeeContent={updateTxFeeContent}
             txFeeContent={runTab.txFeeContent}
+            maxFee={runTab.maxFee}
+            maxPriorityFee={runTab.maxPriorityFee}
           />
           <RecorderUI />
           <InstanceContainerUI />
diff --git a/libs/remix-ui/run-tab/src/lib/types/index.ts b/libs/remix-ui/run-tab/src/lib/types/index.ts
index 659ddce557..787e11c66d 100644
--- a/libs/remix-ui/run-tab/src/lib/types/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/index.ts
@@ -172,7 +172,9 @@ export interface ContractDropdownProps {
   updateMaxPriorityFee: (fee: string) => void,
   updateGasPrice: (price: string) => void,
   updateTxFeeContent: (content: string) => void,
-  txFeeContent: string
+  txFeeContent: string,
+  maxFee: string,
+  maxPriorityFee: string
 }
 
 export interface RecorderProps {
@@ -223,5 +225,7 @@ export interface MainnetProps {
   setTxFeeContent: (content: string) => void,
   updateGasPrice: (price: string) => void,
   updateMaxPriorityFee: (fee: string) => void
-  txFeeContent: string
+  txFeeContent: string,
+  maxFee: string,
+  maxPriorityFee: string
 }
diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
index 3536750efc..776ca1fbb0 100644
--- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
+++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
@@ -86,7 +86,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   useEffect(() => {
     props.onReady({
       logHtml: (html) => {
-        scriptRunnerDispatch({ type: 'html', payload: { message: [html.innerText] } })
+        scriptRunnerDispatch({ type: 'html', payload: { message: [html ? html.innerText ? html.innerText : html : null] } })
       },
 
       log: (message) => {
@@ -483,7 +483,11 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
                 })
               } else if (Array.isArray(x.message)) {
                 return x.message.map((msg, i) => {
-                  if (typeof msg === 'object') {
+                  if (React.isValidElement(msg)) {
+                    return (
+                      <div className="px-4 block" data-id="block" key={i}><span className={x.style}>{ msg }</span></div>
+                    )
+                  } else if (typeof msg === 'object') {
                     return (
                       <div className="px-4 block" data-id="block" key={i}><span className={x.style}>{ msg.value ? parse(msg.value) : JSON.stringify(msg) } </span></div>
                     )

From 48be26df1b64758b4e24e22389fd2592c2b2ea20 Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Tue, 21 Dec 2021 17:03:32 +0100
Subject: [PATCH 127/168] universal udapp UI

---
 apps/remix-ide/src/app/udapp/run-tab.js       |  28 ---
 .../remix-ui/run-tab/src/lib/actions/index.ts |  58 ++++--
 .../run-tab/src/lib/actions/payload.ts        |  22 ++
 .../src/lib/components/contractDropdownUI.tsx | 157 ---------------
 .../lib/components/instanceContainerUI.tsx    |  23 ++-
 .../src/lib/components/universalDappUI.tsx    | 190 ++++++++++++++++++
 .../run-tab/src/lib/reducers/runTab.ts        |  52 ++++-
 libs/remix-ui/run-tab/src/lib/run-tab.tsx     |   4 +-
 libs/remix-ui/run-tab/src/lib/types/index.ts  |  18 +-
 9 files changed, 340 insertions(+), 212 deletions(-)
 create mode 100644 libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx

diff --git a/apps/remix-ide/src/app/udapp/run-tab.js b/apps/remix-ide/src/app/udapp/run-tab.js
index fdb3184231..b0859cbbb6 100644
--- a/apps/remix-ide/src/app/udapp/run-tab.js
+++ b/apps/remix-ide/src/app/udapp/run-tab.js
@@ -108,33 +108,6 @@ export class RunTab extends ViewPlugin {
     return this.blockchain.pendingTransactionsCount()
   }
 
-  renderInstanceContainer () {
-    this.instanceContainer = yo`<div class="${css.instanceContainer} border-0 list-group-item"></div>`
-
-    const instanceContainerTitle = yo`
-      <div class="d-flex justify-content-between align-items-center pl-2 ml-1 mb-2"
-        title="Autogenerated generic user interfaces for interaction with deployed contracts">
-        Deployed Contracts
-        <i class="mr-2 ${css.icon} far fa-trash-alt" data-id="deployAndRunClearInstances" onclick=${() => this.event.trigger('clearInstance', [])}
-          title="Clear instances list and reset recorder" aria-hidden="true">
-        </i>
-      </div>`
-
-    this.noInstancesText = yo`
-      <span class="mx-2 mt-3 alert alert-warning" data-id="deployAndRunNoInstanceText" role="alert">
-        Currently you have no contract instances to interact with.
-      </span>`
-
-    this.event.register('clearInstance', () => { // setFinalContext calls this
-      this.instanceContainer.innerHTML = '' // clear the instances list
-      this.instanceContainer.appendChild(instanceContainerTitle)
-      this.instanceContainer.appendChild(this.noInstancesText)
-    })
-
-    this.instanceContainer.appendChild(instanceContainerTitle)
-    this.instanceContainer.appendChild(this.noInstancesText)
-  }
-
   renderSettings () {
     this.settingsUI = new SettingsUI(this.blockchain, this.networkModule)
 
@@ -216,7 +189,6 @@ export class RunTab extends ViewPlugin {
   render () {
     return this.el
     this.udappUI = new UniversalDAppUI(this.blockchain, this.logCallback)
-    this.renderInstanceContainer()
     this.renderSettings()
     this.renderDropdown(this.udappUI, this.fileManager, this.compilersArtefacts, this.config, this.editor, this.logCallback)
     this.renderRecorder(this.udappUI, this.fileManager, this.config, this.logCallback)
diff --git a/libs/remix-ui/run-tab/src/lib/actions/index.ts b/libs/remix-ui/run-tab/src/lib/actions/index.ts
index e683c296a7..48980ce50f 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/index.ts
@@ -3,7 +3,7 @@ import React from 'react'
 import * as ethJSUtil from 'ethereumjs-util'
 import Web3 from 'web3'
 import { addressToString, shortenAddress } from '@remix-ui/helper'
-import { addProvider, displayNotification, displayPopUp, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, fetchContractListSuccess, hidePopUp, removeProvider, setBaseFeePerGas, setConfirmSettings, setCurrentFile, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setGasPrice, setGasPriceStatus, setIpfsCheckedState, setLoadType, setMatchPassphrase, setMaxFee, setMaxPriorityFee, setNetworkName, setPassphrase, setSelectedAccount, setSendUnit, setSendValue, setTxFeeContent } from './payload'
+import { addNewInstance, addProvider, clearAllInstances, displayNotification, displayPopUp, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, fetchContractListSuccess, hidePopUp, removeExistingInstance, removeProvider, setBaseFeePerGas, setConfirmSettings, setCurrentFile, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setGasPrice, setGasPriceStatus, setIpfsCheckedState, setLoadType, setMatchPassphrase, setMaxFee, setMaxPriorityFee, setNetworkName, setPassphrase, setSelectedAccount, setSendUnit, setSendValue, setTxFeeContent } from './payload'
 import { RunTab } from '../types/run-tab'
 import { CompilerAbstract } from '@remix-project/remix-solidity'
 import * as remixLib from '@remix-project/remix-lib'
@@ -201,7 +201,7 @@ const setFinalContext = () => {
   const value = _getProviderDropdownValue()
 
   setExecEnv(value)
-  // this.event.trigger('clearInstance', []) //check cleaIinstance event in run-tab.js
+  clearInstances()
 }
 
 const _getProviderDropdownValue = (): string => {
@@ -303,15 +303,6 @@ const broadcastCompilationResult = (file, source, languageVersion, data) => {
 
   dispatch(fetchContractListSuccess(contracts))
   dispatch(setCurrentFile(file))
-  // this.enableAtAddress(success)
-  // this.enableContractNames(success)
-  // this.setInputParamsPlaceHolder()
-
-  // if (success) {
-  //   this.compFails.style.display = 'none'
-  // } else {
-  //   this.compFails.style.display = 'block'
-  // }
 }
 
 const loadContractFromAddress = (address, confirmCb, cb) => {
@@ -455,13 +446,12 @@ export const createInstance = async (
   }
 
   const finalCb = (error, contractObject, address) => {
-    plugin.event.trigger('clearInstance')
     if (error) {
       const log = logBuilder(error)
 
       return terminalLogger(log)
     }
-    plugin.event.trigger('newContractInstanceAdded', [contractObject, address, contractObject.name])
+    addInstance({ contractData: contractObject, address, name: contractObject.name })
 
     const data = plugin.compilersArtefacts.getCompilerAbstract(contractObject.contract.file)
 
@@ -538,3 +528,45 @@ export const updateGasPrice = (price: string) => {
 export const updateTxFeeContent = (content: string) => {
   dispatch(setTxFeeContent(content))
 }
+
+const addInstance = (instance: { contractData: ContractData, address: string, name: string }) => {
+  dispatch(addNewInstance(instance))
+}
+
+export const removeInstance = (index: number) => {
+  dispatch(removeExistingInstance(index))
+}
+
+export const clearInstances = () => {
+  dispatch(clearAllInstances())
+}
+
+const loadAddress = () => {
+  clearInstances()
+
+  // let address = this.atAddressButtonInput.value
+  // if (!ethJSUtil.isValidChecksumAddress(address)) {
+  //   addTooltip(yo`
+  //     <span>
+  //       It seems you are not using a checksumed address.
+  //       <br>A checksummed address is an address that contains uppercase letters, as specified in <a href="https://eips.ethereum.org/EIPS/eip-55" target="_blank">EIP-55</a>.
+  //       <br>Checksummed addresses are meant to help prevent users from sending transactions to the wrong address.
+  //     </span>`)
+  //   address = ethJSUtil.toChecksumAddress(address)
+  // }
+  // this.dropdownLogic.loadContractFromAddress(address,
+  //   (cb) => {
+  //     modalDialogCustom.confirm('At Address', `Do you really want to interact with ${address} using the current ABI definition?`, cb)
+  //   },
+  //   (error, loadType, abi) => {
+  //     if (error) {
+  //       return modalDialogCustom.alert(error)
+  //     }
+  //     if (loadType === 'abi') {
+  //       return this.event.trigger('newContractABIAdded', [abi, address])
+  //     }
+  //     var selectedContract = this.getSelectedContract()
+  //     addInstance({ contractData: selectedContract.object, address, name: contractObject.name })
+  //   }
+  // )
+}
diff --git a/libs/remix-ui/run-tab/src/lib/actions/payload.ts b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
index c1c1169bc6..e35f072ea3 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/payload.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
@@ -1,3 +1,5 @@
+import { ContractData } from '../types'
+
 export const fetchAccountsListRequest = () => {
   return {
     type: 'FETCH_ACCOUNTS_LIST_REQUEST',
@@ -217,3 +219,23 @@ export const setTxFeeContent = (content: string) => {
     payload: content
   }
 }
+
+export const addNewInstance = (instance: { contractData: ContractData, address: string, name: string }) => {
+  return {
+    type: 'ADD_INSTANCE',
+    payload: instance
+  }
+}
+
+export const removeExistingInstance = (index: number) => {
+  return {
+    type: 'REMOVE_INSTANCE',
+    payload: index
+  }
+}
+
+export const clearAllInstances = () => {
+  return {
+    type: 'CLEAR_INSTANCES'
+  }
+}
diff --git a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
index 549b1be60f..c1eca2ca52 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
@@ -145,134 +145,6 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
   //     })
   //   }
 
-  //   async createInstance (selectedContract, args) {
-  //     if (selectedContract.bytecodeObject.length === 0) {
-  //       return modalDialogCustom.alert('This contract may be abstract, not implement an abstract parent\'s methods completely or not invoke an inherited contract\'s constructor correctly.')
-  //     }
-
-  //     var continueCb = (error, continueTxExecution, cancelCb) => {
-  //       if (error) {
-  //         var msg = typeof error !== 'string' ? error.message : error
-  //         modalDialog('Gas estimation failed', yo`<div>Gas estimation errored with the following message (see below).
-  //         The transaction execution will likely fail. Do you want to force sending? <br>
-  //         ${msg}
-  //         </div>`,
-  //         {
-  //           label: 'Send Transaction',
-  //           fn: () => {
-  //             continueTxExecution()
-  //           }
-  //         }, {
-  //           label: 'Cancel Transaction',
-  //           fn: () => {
-  //             cancelCb()
-  //           }
-  //         })
-  //       } else {
-  //         continueTxExecution()
-  //       }
-  //     }
-
-  //     const self = this
-
-  //     var promptCb = (okCb, cancelCb) => {
-  //       modalDialogCustom.promptPassphrase('Passphrase requested', 'Personal mode is enabled. Please provide passphrase of account', '', okCb, cancelCb)
-  //     }
-
-  //     var statusCb = (msg) => {
-  //       return this.logCallback(msg)
-  //     }
-
-  //     var finalCb = (error, contractObject, address) => {
-  //       self.event.trigger('clearInstance')
-
-  //       if (error) {
-  //         return this.logCallback(error)
-  //       }
-  //       self.event.trigger('newContractInstanceAdded', [contractObject, address, contractObject.name])
-
-  //       const data = self.runView.compilersArtefacts.getCompilerAbstract(contractObject.contract.file)
-  //       self.runView.compilersArtefacts.addResolvedContract(helper.addressToString(address), data)
-  //       if (self.ipfsCheckedState) {
-  //         _paq.push(['trackEvent', 'udapp', 'DeployAndPublish', this.networkName])
-  //         publishToStorage('ipfs', self.runView.fileProvider, self.runView.fileManager, selectedContract)
-  //       } else {
-  //         _paq.push(['trackEvent', 'udapp', 'DeployOnly', this.networkName])
-  //       }
-  //     }
-
-  //     let contractMetadata
-  //     try {
-  //       contractMetadata = await this.runView.call('compilerMetadata', 'deployMetadataOf', selectedContract.name, selectedContract.contract.file)
-  //     } catch (error) {
-  //       return statusCb(`creation of ${selectedContract.name} errored: ${error.message ? error.message : error}`)
-  //     }
-
-  //     const compilerContracts = this.dropdownLogic.getCompilerContracts()
-  //     const confirmationCb = this.getConfirmationCb(modalDialog, confirmDialog)
-
-  //     if (selectedContract.isOverSizeLimit()) {
-  //       return modalDialog('Contract code size over limit', yo`<div>Contract creation initialization returns data with length of more than 24576 bytes. The deployment will likely fails. <br>
-  //       More info: <a href="https://github.com/ethereum/EIPs/blob/master/EIPS/eip-170.md" target="_blank">eip-170</a>
-  //       </div>`,
-  //       {
-  //         label: 'Force Send',
-  //         fn: () => {
-  //           this.deployContract(selectedContract, args, contractMetadata, compilerContracts, { continueCb, promptCb, statusCb, finalCb }, confirmationCb)
-  //         }
-  //       }, {
-  //         label: 'Cancel',
-  //         fn: () => {
-  //           this.logCallback(`creation of ${selectedContract.name} canceled by user.`)
-  //         }
-  //       })
-  //     }
-  //     this.deployContract(selectedContract, args, contractMetadata, compilerContracts, { continueCb, promptCb, statusCb, finalCb }, confirmationCb)
-  //   }
-
-  //   deployContract (selectedContract, args, contractMetadata, compilerContracts, callbacks, confirmationCb) {
-  //     _paq.push(['trackEvent', 'udapp', 'DeployContractTo', this.networkName])
-  //     const { statusCb } = callbacks
-  //     if (!contractMetadata || (contractMetadata && contractMetadata.autoDeployLib)) {
-  //       return this.blockchain.deployContractAndLibraries(selectedContract, args, contractMetadata, compilerContracts, callbacks, confirmationCb)
-  //     }
-  //     if (Object.keys(selectedContract.bytecodeLinkReferences).length) statusCb(`linking ${JSON.stringify(selectedContract.bytecodeLinkReferences, null, '\t')} using ${JSON.stringify(contractMetadata.linkReferences, null, '\t')}`)
-  //     this.blockchain.deployContractWithLibrary(selectedContract, args, contractMetadata, compilerContracts, callbacks, confirmationCb)
-  //   }
-
-  //   getConfirmationCb (modalDialog, confirmDialog) {
-  //     // this code is the same as in recorder.js. TODO need to be refactored out
-  //     const confirmationCb = (network, tx, gasEstimation, continueTxExecution, cancelCb) => {
-  //       if (network.name !== 'Main') {
-  //         return continueTxExecution(null)
-  //       }
-  //       const amount = this.blockchain.fromWei(tx.value, true, 'ether')
-  //       const content = confirmDialog(tx, network, amount, gasEstimation, this.blockchain.determineGasFees(tx), this.blockchain.determineGasPrice.bind(this.blockchain))
-
-  //       modalDialog('Confirm transaction', content,
-  //         {
-  //           label: 'Confirm',
-  //           fn: () => {
-  //             this.blockchain.config.setUnpersistedProperty('doNotShowTransactionConfirmationAgain', content.querySelector('input#confirmsetting').checked)
-  //             // TODO: check if this is check is still valid given the refactor
-  //             if (!content.gasPriceStatus) {
-  //               cancelCb('Given transaction fee is not correct')
-  //             } else {
-  //               continueTxExecution(content.txFee)
-  //             }
-  //           }
-  //         }, {
-  //           label: 'Cancel',
-  //           fn: () => {
-  //             return cancelCb('Transaction canceled by user.')
-  //           }
-  //         }
-  //       )
-  //     }
-
-  //     return confirmationCb
-  //   }
-
   const atAddressChanged = (event) => {
     const value = event.target.value
 
@@ -291,33 +163,6 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
 
   const loadFromAddress = () => {
     // trigger dispatchLoadAddress
-    // this.event.trigger('clearInstance')
-
-    // let address = this.atAddressButtonInput.value
-    // if (!ethJSUtil.isValidChecksumAddress(address)) {
-    //   addTooltip(yo`
-    //     <span>
-    //       It seems you are not using a checksumed address.
-    //       <br>A checksummed address is an address that contains uppercase letters, as specified in <a href="https://eips.ethereum.org/EIPS/eip-55" target="_blank">EIP-55</a>.
-    //       <br>Checksummed addresses are meant to help prevent users from sending transactions to the wrong address.
-    //     </span>`)
-    //   address = ethJSUtil.toChecksumAddress(address)
-    // }
-    // this.dropdownLogic.loadContractFromAddress(address,
-    //   (cb) => {
-    //     modalDialogCustom.confirm('At Address', `Do you really want to interact with ${address} using the current ABI definition?`, cb)
-    //   },
-    //   (error, loadType, abi) => {
-    //     if (error) {
-    //       return modalDialogCustom.alert(error)
-    //     }
-    //     if (loadType === 'abi') {
-    //       return this.event.trigger('newContractABIAdded', [abi, address])
-    //     }
-    //     var selectedContract = this.getSelectedContract()
-    //     this.event.trigger('newContractInstanceAdded', [selectedContract.object, address, this.selectContractNames.value])
-    //   }
-    // )
   }
 
   const handleCheckedIPFS = () => {
@@ -427,7 +272,5 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
         </div>
       </div>
     </div>
-    // this.selectContractNames.addEventListener('change', this.setInputParamsPlaceHolder.bind(this))
-    // this.setInputParamsPlaceHolder()
   )
 }
diff --git a/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx b/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
index 1f3cba0406..d7a155c4ea 100644
--- a/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
@@ -3,10 +3,10 @@ import React from 'react'
 import { InstanceContainerProps } from '../types'
 
 export function InstanceContainerUI (props: InstanceContainerProps) {
+  const { instanceList } = props.instances
+
   const clearInstance = () => {
-    // this.instanceContainer.innerHTML = '' // clear the instances list
-    // this.instanceContainer.appendChild(instanceContainerTitle)
-    // this.instanceContainer.appendChild(this.noInstancesText)
+    props.clearInstances()
   }
 
   return (
@@ -14,13 +14,18 @@ export function InstanceContainerUI (props: InstanceContainerProps) {
       <div className="d-flex justify-content-between align-items-center pl-2 ml-1 mb-2"
         title="Autogenerated generic user interfaces for interaction with deployed contracts">
         Deployed Contracts
-        <i className="mr-2 udapp_icon far fa-trash-alt" data-id="deployAndRunClearInstances" onClick={clearInstance}
-          title="Clear instances list and reset recorder" aria-hidden="true">
-        </i>
+        { instanceList.length > 0
+          ? <i className="mr-2 udapp_icon far fa-trash-alt" data-id="deployAndRunClearInstances" onClick={clearInstance}
+            title="Clear instances list and reset recorder" aria-hidden="true">
+          </i> : null
+        }
       </div>
-      <span className="mx-2 mt-3 alert alert-warning" data-id="deployAndRunNoInstanceText" role="alert">
-        Currently you have no contract instances to interact with.
-      </span>
+      { instanceList.length > 0
+        ? <div></div>
+        : <span className="mx-2 mt-3 alert alert-warning" data-id="deployAndRunNoInstanceText" role="alert">
+          Currently you have no contract instances to interact with.
+        </span>
+      }
     </div>
   )
 }
diff --git a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
new file mode 100644
index 0000000000..49cd33aebd
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
@@ -0,0 +1,190 @@
+// eslint-disable-next-line no-use-before-define
+import React, { useState } from 'react'
+import { shortenAddress } from 'apps/remix-ide/src/lib/helper'
+import { UdappProps } from '../types'
+
+export function UniversalDappUI (props: UdappProps) {
+  const [toggleExpander, setToggleExpander] = useState<boolean>(false)
+  // const self = this
+  // address = (address.slice(0, 2) === '0x' ? '' : '0x') + address.toString('hex')
+  // address = ethJSUtil.toChecksumAddress(address)
+  // var instance = yo`<div class="instance run-instance border-dark ${css.instance} ${css.hidesub}" id="instance${address}" data-shared="universalDappUiInstance"></div>`
+  // const context = this.blockchain.context()
+
+  // var shortAddress = helper.shortenAddress(address)
+  // var title = yo`
+  //   <div class="${css.title} alert alert-secondary">
+  //     <button data-id="universalDappUiTitleExpander" class="btn ${css.titleExpander}" onclick="${(e) => { toggleClass(e) }}">
+  //       <i class="fas fa-angle-right" aria-hidden="true"></i>
+  //     </button>
+  //     <div class="input-group ${css.nameNbuts}">
+  //       <div class="${css.titleText} input-group-prepend">
+  //         <span class="input-group-text ${css.spanTitleText}">
+  //           ${contractName} at ${shortAddress} (${context})
+  //         </span>
+  //       </div>
+  //       <div class="btn-group">
+  //         <button class="btn p-1 btn-secondary">${copyToClipboard(() => address)}</button>
+  //       </div>
+  //     </div>
+  //   </div>
+  // `
+
+  // var close = yo`
+  //   <button
+  //     class="${css.udappClose} mr-1 p-1 btn btn-secondary align-items-center"
+  //     data-id="universalDappUiUdappClose"
+  //     onclick=${remove}
+  //     title="Remove from the list"
+  //   >
+  //     <i class="${css.closeIcon} fas fa-times" aria-hidden="true"></i>
+  //   </button>`
+  // title.querySelector('.btn-group').appendChild(close)
+
+  // var contractActionsWrapper = yo`
+  //   <div class="${css.cActionsWrapper}" data-id="universalDappUiContractActionWrapper">
+  //   </div>
+  // `
+
+  // function remove () {
+  //   instance.remove()
+  //   // @TODO perhaps add a callack here to warn the caller that the instance has been removed
+  // }
+
+  // function toggleClass (e) {
+  //   $(instance).toggleClass(`${css.hidesub} bg-light`)
+  //   // e.currentTarget.querySelector('i')
+  //   e.currentTarget.querySelector('i').classList.toggle('fa-angle-right')
+  //   e.currentTarget.querySelector('i').classList.toggle('fa-angle-down')
+  // }
+
+  // instance.appendChild(title)
+  // instance.appendChild(contractActionsWrapper)
+
+  // $.each(contractABI, (i, funABI) => {
+  //   if (funABI.type !== 'function') {
+  //     return
+  //   }
+  //   // @todo getData cannot be used with overloaded functions
+  //   contractActionsWrapper.appendChild(this.getCallButton({
+  //     funABI: funABI,
+  //     address: address,
+  //     contractABI: contractABI,
+  //     contractName: contractName,
+  //     contract
+  //   }))
+  // })
+
+  // const calldataInput = yo`
+  //   <input id="deployAndRunLLTxCalldata" class="${css.calldataInput} form-control" title="The Calldata to send to fallback function of the contract.">
+  // `
+  // const llIError = yo`
+  //   <label id="deployAndRunLLTxError" class="text-danger my-2"></label>
+  // `
+  // // constract LLInteractions elements
+  // const lowLevelInteracions = yo`
+  //   <div class="d-flex flex-column">
+  //     <div class="d-flex flex-row justify-content-between mt-2">
+  //       <div class="py-2 border-top d-flex justify-content-start flex-grow-1">
+  //         Low level interactions
+  //       </div>
+  //       <a
+  //         href="https://solidity.readthedocs.io/en/v0.6.2/contracts.html#receive-ether-function"
+  //         title="check out docs for using 'receive'/'fallback'"
+  //         target="_blank"
+  //       >
+  //         <i aria-hidden="true" class="fas fa-info my-2 mr-1"></i>
+  //       </a>
+  //     </div>
+  //     <div class="d-flex flex-column align-items-start">
+  //       <label class="">CALLDATA</label>
+  //       <div class="d-flex justify-content-end w-100 align-items-center">
+  //         ${calldataInput}
+  //         <button id="deployAndRunLLTxSendTransaction" data-id="pluginManagerSettingsDeployAndRunLLTxSendTransaction" class="${css.instanceButton} p-0 w-50 btn border-warning text-warning" title="Send data to contract." onclick=${() => sendData()}>Transact</button>
+  //       </div>
+  //     </div>
+  //     <div>
+  //       ${llIError}
+  //     </div>
+  //   </div>
+  // `
+
+  // function sendData () {
+  //   function setLLIError (text) {
+  //     llIError.innerText = text
+  //   }
+
+  //   setLLIError('')
+  //   const fallback = txHelper.getFallbackInterface(contractABI)
+  //   const receive = txHelper.getReceiveInterface(contractABI)
+  //   const args = {
+  //     funABI: fallback || receive,
+  //     address: address,
+  //     contractName: contractName,
+  //     contractABI: contractABI
+  //   }
+  //   const amount = document.querySelector('#value').value
+  //   if (amount !== '0') {
+  //     // check for numeric and receive/fallback
+  //     if (!helper.isNumeric(amount)) {
+  //       return setLLIError('Value to send should be a number')
+  //     } else if (!receive && !(fallback && fallback.stateMutability === 'payable')) {
+  //       return setLLIError("In order to receive Ether transfer the contract should have either 'receive' or payable 'fallback' function")
+  //     }
+  //   }
+  //   let calldata = calldataInput.value
+  //   if (calldata) {
+  //     if (calldata.length < 4 && helper.is0XPrefixed(calldata)) {
+  //       return setLLIError('The calldata should be a valid hexadecimal value with size of at least one byte.')
+  //     } else {
+  //       if (helper.is0XPrefixed(calldata)) {
+  //         calldata = calldata.substr(2, calldata.length)
+  //       }
+  //       if (!helper.isHexadecimal(calldata)) {
+  //         return setLLIError('The calldata should be a valid hexadecimal value.')
+  //       }
+  //     }
+  //     if (!fallback) {
+  //       return setLLIError("'Fallback' function is not defined")
+  //     }
+  //   }
+
+  //   if (!receive && !fallback) return setLLIError('Both \'receive\' and \'fallback\' functions are not defined')
+
+  //   // we have to put the right function ABI:
+  //   // if receive is defined and that there is no calldata => receive function is called
+  //   // if fallback is defined => fallback function is called
+  //   if (receive && !calldata) args.funABI = receive
+  //   else if (fallback) args.funABI = fallback
+
+  //   if (!args.funABI) return setLLIError('Please define a \'Fallback\' function to send calldata and a either \'Receive\' or payable \'Fallback\' to send ethers')
+  //   self.runTransaction(false, args, null, calldataInput.value, null)
+  // }
+
+  // contractActionsWrapper.appendChild(lowLevelInteracions)
+  // return instance
+
+  const toggleClass = () => {
+    setToggleExpander(!toggleExpander)
+  }
+
+  return (
+    <div className={`udapp_instance udapp_run-instance border-dark ${toggleExpander ? 'udapp_hidesub' : ''}`} id={`instance${props.instance.address}`} data-shared="universalDappUiInstance">
+      <div className="udapp_title alert alert-secondary">
+        <button data-id="universalDappUiTitleExpander" className="btn udapp_titleExpander" onClick={toggleClass}>
+          <i className={`fas ${toggleExpander ? 'fa-angle-right' : 'fa-angle-down'}`} aria-hidden="true"></i>
+        </button>
+        <div className="input-group udapp_nameNbuts">
+          <div className="udapp_titleText input-group-prepend">
+            <span className="input-group-text udapp_spanTitleText">
+              {props.instance.name} at {shortenAddress(props.instance)} ({context})
+            </span>
+          </div>
+          <div className="btn-group">
+            <button className="btn p-1 btn-secondary">${copyToClipboard(() => address)}</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
index edd353bff2..0f0a6473a9 100644
--- a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
+++ b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
@@ -1,3 +1,5 @@
+import { ContractData } from '../types'
+
 interface Action {
   type: string
   payload: any
@@ -61,7 +63,15 @@ export interface RunTabState {
   maxPriorityFee: string,
   baseFeePerGas: string,
   txFeeContent: string,
-  gasPrice: string
+  gasPrice: string,
+  instances: {
+    instanceList: {
+      contractData: ContractData,
+      address: string,
+      name: string
+    }[],
+    error: string
+  }
 }
 
 export const runTabInitialState: RunTabState = {
@@ -138,7 +148,11 @@ export const runTabInitialState: RunTabState = {
   maxPriorityFee: '1',
   baseFeePerGas: '',
   txFeeContent: '',
-  gasPrice: ''
+  gasPrice: '',
+  instances: {
+    instanceList: [],
+    error: null
+  }
 }
 
 export const runTabReducer = (state: RunTabState = runTabInitialState, action: Action) => {
@@ -518,6 +532,40 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
       }
     }
 
+    case 'ADD_INSTANCE': {
+      const payload: { contractData: ContractData, address: string, name: string } = action.payload
+
+      return {
+        ...state,
+        instances: {
+          ...state.instances,
+          instanceList: [...state.instances.instanceList, payload]
+        }
+      }
+    }
+
+    case 'REMOVE_INSTANCE': {
+      const payload: number = action.payload
+
+      return {
+        ...state,
+        instances: {
+          ...state.instances,
+          instanceList: state.instances.instanceList.filter((instance, index) => index !== payload)
+        }
+      }
+    }
+
+    case 'CLEAR_INSTANCES': {
+      return {
+        ...state,
+        instances: {
+          instanceList: [],
+          error: null
+        }
+      }
+    }
+
     default:
       return state
   }
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
index c7c8c3938d..c7b4bbcf1b 100644
--- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -20,7 +20,7 @@ import {
   updateBaseFeePerGas, updateConfirmSettings,
   updateGasPrice, updateGasPriceStatus,
   updateMaxFee, updateMaxPriorityFee,
-  updateTxFeeContent
+  updateTxFeeContent, clearInstances
 } from './actions'
 import './css/run-tab.css'
 import { PublishToStorage } from '@remix-ui/publish-to-storage'
@@ -191,7 +191,7 @@ export function RunTabUI (props: RunTabProps) {
             maxPriorityFee={runTab.maxPriorityFee}
           />
           <RecorderUI />
-          <InstanceContainerUI />
+          <InstanceContainerUI instances={runTab.instances} clearInstances={clearInstances} />
         </div>
       </div>
       <ModalDialog id='fileSystem' { ...focusModal } handleHide={ handleHideModal } />
diff --git a/libs/remix-ui/run-tab/src/lib/types/index.ts b/libs/remix-ui/run-tab/src/lib/types/index.ts
index 787e11c66d..325bfa334f 100644
--- a/libs/remix-ui/run-tab/src/lib/types/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/index.ts
@@ -182,7 +182,15 @@ export interface RecorderProps {
 }
 
 export interface InstanceContainerProps {
-
+  instances: {
+    instanceList: {
+      contractData: ContractData,
+      address: string,
+      name: string
+    }[],
+    error: string
+  },
+  clearInstances: () => void
 }
 
 export interface Modal {
@@ -229,3 +237,11 @@ export interface MainnetProps {
   maxFee: string,
   maxPriorityFee: string
 }
+
+export interface UdappProps {
+  instance: {
+    contractData: ContractData,
+    address: string,
+    name: string
+  }
+}

From 44b0119f3e6b1bfb8f5f1d536bfab65bc1dba1e6 Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Wed, 22 Dec 2021 22:56:43 +0100
Subject: [PATCH 128/168] Show deployed instances

---
 .../remix-ui/run-tab/src/lib/actions/index.ts |   4 +
 .../lib/components/instanceContainerUI.tsx    |   6 +-
 .../src/lib/components/universalDappUI.tsx    | 171 ++++++++++--------
 libs/remix-ui/run-tab/src/lib/run-tab.tsx     |   5 +-
 libs/remix-ui/run-tab/src/lib/types/index.ts  |  28 ++-
 5 files changed, 126 insertions(+), 88 deletions(-)

diff --git a/libs/remix-ui/run-tab/src/lib/actions/index.ts b/libs/remix-ui/run-tab/src/lib/actions/index.ts
index 48980ce50f..a30bfc5292 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/index.ts
@@ -570,3 +570,7 @@ const loadAddress = () => {
   //   }
   // )
 }
+
+export const getContext = () => {
+  return plugin.blockchain.context()
+}
diff --git a/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx b/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
index d7a155c4ea..6bf00cece8 100644
--- a/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
@@ -1,6 +1,7 @@
 // eslint-disable-next-line no-use-before-define
 import React from 'react'
 import { InstanceContainerProps } from '../types'
+import { UniversalDappUI } from './universalDappUI'
 
 export function InstanceContainerUI (props: InstanceContainerProps) {
   const { instanceList } = props.instances
@@ -21,7 +22,10 @@ export function InstanceContainerUI (props: InstanceContainerProps) {
         }
       </div>
       { instanceList.length > 0
-        ? <div></div>
+        ? <div> { props.instances.instanceList.map((instance, index) => {
+          return <UniversalDappUI instance={instance} context={props.getContext()} removeInstance={props.removeInstance} index={index} />
+        }) }
+        </div>
         : <span className="mx-2 mt-3 alert alert-warning" data-id="deployAndRunNoInstanceText" role="alert">
           Currently you have no contract instances to interact with.
         </span>
diff --git a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
index 49cd33aebd..633fcecf80 100644
--- a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
@@ -1,79 +1,38 @@
 // eslint-disable-next-line no-use-before-define
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { shortenAddress } from 'apps/remix-ide/src/lib/helper'
-import { UdappProps } from '../types'
+import { FuncABI, UdappProps } from '../types'
+import { CopyToClipboard } from '@remix-ui/clipboard'
+import * as remixLib from '@remix-project/remix-lib'
+import * as ethJSUtil from 'ethereumjs-util'
+import { ContractGUI } from './contractGUI'
 
-export function UniversalDappUI (props: UdappProps) {
-  const [toggleExpander, setToggleExpander] = useState<boolean>(false)
-  // const self = this
-  // address = (address.slice(0, 2) === '0x' ? '' : '0x') + address.toString('hex')
-  // address = ethJSUtil.toChecksumAddress(address)
-  // var instance = yo`<div class="instance run-instance border-dark ${css.instance} ${css.hidesub}" id="instance${address}" data-shared="universalDappUiInstance"></div>`
-  // const context = this.blockchain.context()
-
-  // var shortAddress = helper.shortenAddress(address)
-  // var title = yo`
-  //   <div class="${css.title} alert alert-secondary">
-  //     <button data-id="universalDappUiTitleExpander" class="btn ${css.titleExpander}" onclick="${(e) => { toggleClass(e) }}">
-  //       <i class="fas fa-angle-right" aria-hidden="true"></i>
-  //     </button>
-  //     <div class="input-group ${css.nameNbuts}">
-  //       <div class="${css.titleText} input-group-prepend">
-  //         <span class="input-group-text ${css.spanTitleText}">
-  //           ${contractName} at ${shortAddress} (${context})
-  //         </span>
-  //       </div>
-  //       <div class="btn-group">
-  //         <button class="btn p-1 btn-secondary">${copyToClipboard(() => address)}</button>
-  //       </div>
-  //     </div>
-  //   </div>
-  // `
-
-  // var close = yo`
-  //   <button
-  //     class="${css.udappClose} mr-1 p-1 btn btn-secondary align-items-center"
-  //     data-id="universalDappUiUdappClose"
-  //     onclick=${remove}
-  //     title="Remove from the list"
-  //   >
-  //     <i class="${css.closeIcon} fas fa-times" aria-hidden="true"></i>
-  //   </button>`
-  // title.querySelector('.btn-group').appendChild(close)
-
-  // var contractActionsWrapper = yo`
-  //   <div class="${css.cActionsWrapper}" data-id="universalDappUiContractActionWrapper">
-  //   </div>
-  // `
-
-  // function remove () {
-  //   instance.remove()
-  //   // @TODO perhaps add a callack here to warn the caller that the instance has been removed
-  // }
-
-  // function toggleClass (e) {
-  //   $(instance).toggleClass(`${css.hidesub} bg-light`)
-  //   // e.currentTarget.querySelector('i')
-  //   e.currentTarget.querySelector('i').classList.toggle('fa-angle-right')
-  //   e.currentTarget.querySelector('i').classList.toggle('fa-angle-down')
-  // }
-
-  // instance.appendChild(title)
-  // instance.appendChild(contractActionsWrapper)
+const txHelper = remixLib.execution.txHelper
 
-  // $.each(contractABI, (i, funABI) => {
-  //   if (funABI.type !== 'function') {
-  //     return
-  //   }
-  //   // @todo getData cannot be used with overloaded functions
-  //   contractActionsWrapper.appendChild(this.getCallButton({
-  //     funABI: funABI,
-  //     address: address,
-  //     contractABI: contractABI,
-  //     contractName: contractName,
-  //     contract
-  //   }))
-  // })
+export function UniversalDappUI (props: UdappProps) {
+  const [toggleExpander, setToggleExpander] = useState<boolean>(true)
+  const [contractABI, setContractABI] = useState<FuncABI[]>(null)
+  const [address, setAddress] = useState<string>('')
+
+  useEffect(() => {
+    if (!props.abi) {
+      const abi = txHelper.sortAbiFunction(props.instance.contractData.abi)
+
+      setContractABI(abi)
+    } else {
+      setContractABI(props.abi)
+    }
+  }, [props.abi])
+
+  useEffect(() => {
+    if (props.instance.address) {
+      // @ts-ignore
+      let address = (props.instance.address.slice(0, 2) === '0x' ? '' : '0x') + props.instance.address.toString('hex')
+
+      address = ethJSUtil.toChecksumAddress(address)
+      setAddress(address)
+    }
+  }, [props.instance.address])
 
   // const calldataInput = yo`
   //   <input id="deployAndRunLLTxCalldata" class="${css.calldataInput} form-control" title="The Calldata to send to fallback function of the contract.">
@@ -168,8 +127,49 @@ export function UniversalDappUI (props: UdappProps) {
     setToggleExpander(!toggleExpander)
   }
 
+  const remove = () => {
+    props.removeInstance(props.index)
+  }
+
+  const runTransaction = (lookupOnly, funcABI: FuncABI, valArr, inputsValues) => {
+    const functionName = funcABI.type === 'function' ? funcABI.name : `(${funcABI.type})`
+    const logMsg = `${lookupOnly ? 'call' : 'transact'} to ${props.instance.name}.${functionName}`
+
+    // const callbacksInContext = txCallBacks.getCallBacksWithContext(this, this.blockchain)
+
+    // const outputCb = (returnValue) => {
+    //   if (outputOverride) {
+    //     const decoded = decodeResponseToTreeView(returnValue, args.funABI)
+    //     outputOverride.innerHTML = ''
+    //     outputOverride.appendChild(decoded)
+    //   }
+    // }
+    // let callinfo = ''
+    // if (lookupOnly) callinfo = 'call'
+    // else if (args.funABI.type === 'fallback' || args.funABI.type === 'receive') callinfo = 'lowLevelInteracions'
+    // else callinfo = 'transact'
+
+    // _paq.push(['trackEvent', 'udapp', callinfo, this.blockchain.getCurrentNetworkStatus().network.name])
+    // const params = args.funABI.type !== 'fallback' ? inputsValues : ''
+    // this.blockchain.runOrCallContractMethod(
+    //   args.contractName,
+    //   args.contractABI,
+    //   args.funABI,
+    //   args.contract,
+    //   inputsValues,
+    //   args.address,
+    //   params,
+    //   lookupOnly,
+    //   logMsg,
+    //   this.logCallback,
+    //   outputCb,
+    //   callbacksInContext.confirmationCb.bind(callbacksInContext),
+    //   callbacksInContext.continueCb.bind(callbacksInContext),
+    //   callbacksInContext.promptCb.bind(callbacksInContext))
+  }
+
   return (
-    <div className={`udapp_instance udapp_run-instance border-dark ${toggleExpander ? 'udapp_hidesub' : ''}`} id={`instance${props.instance.address}`} data-shared="universalDappUiInstance">
+    <div className={`udapp_instance udapp_run-instance border-dark ${toggleExpander ? 'udapp_hidesub' : ''}`} id={`instance${address}`} data-shared="universalDappUiInstance">
       <div className="udapp_title alert alert-secondary">
         <button data-id="universalDappUiTitleExpander" className="btn udapp_titleExpander" onClick={toggleClass}>
           <i className={`fas ${toggleExpander ? 'fa-angle-right' : 'fa-angle-down'}`} aria-hidden="true"></i>
@@ -177,13 +177,34 @@ export function UniversalDappUI (props: UdappProps) {
         <div className="input-group udapp_nameNbuts">
           <div className="udapp_titleText input-group-prepend">
             <span className="input-group-text udapp_spanTitleText">
-              {props.instance.name} at {shortenAddress(props.instance)} ({context})
+              {props.instance.name} at {shortenAddress(address)} ({props.context})
             </span>
           </div>
           <div className="btn-group">
-            <button className="btn p-1 btn-secondary">${copyToClipboard(() => address)}</button>
+            <button className="btn p-1 btn-secondary"><CopyToClipboard content={address} /></button>
           </div>
         </div>
+        <button
+          className="udapp_udappClose mr-1 p-1 btn btn-secondary align-items-center"
+          data-id="universalDappUiUdappClose"
+          onClick={remove}
+          title="Remove from the list"
+        >
+          <i className="udapp_closeIcon fas fa-times" aria-hidden="true"></i>
+        </button>
+      </div>
+      <div className="udapp_cActionsWrapper" data-id="universalDappUiContractActionWrapper">
+        {
+          contractABI && contractABI.map((funcABI) => {
+            if (funcABI.type !== 'function') return null
+            const isConstant = funcABI.constant !== undefined ? funcABI.constant : false
+            const lookupOnly = funcABI.stateMutability === 'view' || funcABI.stateMutability === 'pure' || isConstant
+
+            return <div className="udapp_value">
+              <ContractGUI funcABI={funcABI} clickCallBack={(valArray: { name: string, type: string }[], inputsValues: string) => runTransaction(lookupOnly, funcABI, valArray, inputsValues)} inputs={props.instance.contractData.getConstructorInputs()} evmBC={props.instance.contractData.bytecodeObject} lookupOnly={lookupOnly} />
+            </div>
+          })
+        }
       </div>
     </div>
   )
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
index c7b4bbcf1b..d78ca9f3dd 100644
--- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -20,7 +20,8 @@ import {
   updateBaseFeePerGas, updateConfirmSettings,
   updateGasPrice, updateGasPriceStatus,
   updateMaxFee, updateMaxPriorityFee,
-  updateTxFeeContent, clearInstances
+  updateTxFeeContent, clearInstances,
+  removeInstance, getContext
 } from './actions'
 import './css/run-tab.css'
 import { PublishToStorage } from '@remix-ui/publish-to-storage'
@@ -191,7 +192,7 @@ export function RunTabUI (props: RunTabProps) {
             maxPriorityFee={runTab.maxPriorityFee}
           />
           <RecorderUI />
-          <InstanceContainerUI instances={runTab.instances} clearInstances={clearInstances} />
+          <InstanceContainerUI instances={runTab.instances} clearInstances={clearInstances} removeInstance={removeInstance} getContext={getContext} />
         </div>
       </div>
       <ModalDialog id='fileSystem' { ...focusModal } handleHide={ handleHideModal } />
diff --git a/libs/remix-ui/run-tab/src/lib/types/index.ts b/libs/remix-ui/run-tab/src/lib/types/index.ts
index 325bfa334f..a56cd94a4b 100644
--- a/libs/remix-ui/run-tab/src/lib/types/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/index.ts
@@ -100,11 +100,19 @@ export interface ValueProps {
   sendUnit: string
 }
 
+export interface FuncABI {
+  name: string,
+  type: string,
+  inputs: { name: string, type: string }[],
+  stateMutability: string,
+  payable: boolean,
+  constant: any
+}
 export interface ContractData {
   name: string,
   contract: any,
   compiler: any,
-  abi: any,
+  abi: FuncABI[],
   bytecodeObject: any,
   bytecodeLinkReferences: any,
   object: any,
@@ -190,7 +198,9 @@ export interface InstanceContainerProps {
     }[],
     error: string
   },
-  clearInstances: () => void
+  clearInstances: () => void,
+  removeInstance: (index: number) => void,
+  getContext: () => 'memory' | 'blockchain'
 }
 
 export interface Modal {
@@ -206,13 +216,7 @@ export interface Modal {
 
 export interface ContractGUIProps {
   title?: string,
-  funcABI: {
-    name: string,
-    type: string,
-    inputs: { name: string, type: string }[],
-    stateMutability: string,
-    payable: boolean
-  },
+  funcABI: FuncABI,
   inputs: any,
   clickCallBack: (inputs: { name: string, type: string }[], input: string) => void,
   widthClass?: string,
@@ -243,5 +247,9 @@ export interface UdappProps {
     contractData: ContractData,
     address: string,
     name: string
-  }
+  },
+  context: 'memory' | 'blockchain',
+  abi?: FuncABI[],
+  removeInstance: (index: number) => void,
+  index: number
 }

From 8d3ac1b8a1d64038da882b75e92bc5e7fbb8035a Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Sat, 25 Dec 2021 01:30:29 +0100
Subject: [PATCH 129/168] Decode response

---
 .../remix-ui/run-tab/src/lib/actions/index.ts | 171 ++++++++++++------
 .../run-tab/src/lib/actions/payload.ts        |  10 +
 .../src/lib/components/contractDropdownUI.tsx |  43 +----
 .../lib/components/instanceContainerUI.tsx    |  13 +-
 .../src/lib/components/universalDappUI.tsx    | 138 ++++++++++----
 .../run-tab/src/lib/reducers/runTab.ts        |  19 +-
 libs/remix-ui/run-tab/src/lib/run-tab.tsx     |  70 +++++--
 .../run-tab/src/lib/types/blockchain.d.ts     |   4 +
 libs/remix-ui/run-tab/src/lib/types/index.ts  |  90 ++++++---
 9 files changed, 384 insertions(+), 174 deletions(-)

diff --git a/libs/remix-ui/run-tab/src/lib/actions/index.ts b/libs/remix-ui/run-tab/src/lib/actions/index.ts
index a30bfc5292..afc7f27b3b 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/index.ts
@@ -3,11 +3,13 @@ import React from 'react'
 import * as ethJSUtil from 'ethereumjs-util'
 import Web3 from 'web3'
 import { addressToString, shortenAddress } from '@remix-ui/helper'
-import { addNewInstance, addProvider, clearAllInstances, displayNotification, displayPopUp, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, fetchContractListSuccess, hidePopUp, removeExistingInstance, removeProvider, setBaseFeePerGas, setConfirmSettings, setCurrentFile, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setGasPrice, setGasPriceStatus, setIpfsCheckedState, setLoadType, setMatchPassphrase, setMaxFee, setMaxPriorityFee, setNetworkName, setPassphrase, setSelectedAccount, setSendUnit, setSendValue, setTxFeeContent } from './payload'
+import { addNewInstance, addProvider, clearAllInstances, displayNotification, displayPopUp, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, fetchContractListSuccess, hidePopUp, removeExistingInstance, removeProvider, setBaseFeePerGas, setConfirmSettings, setCurrentFile, setDecodedResponse, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setGasPrice, setGasPriceStatus, setIpfsCheckedState, setLoadType, setMatchPassphrase, setMaxFee, setMaxPriorityFee, setNetworkName, setPassphrase, setSelectedAccount, setSendUnit, setSendValue, setTxFeeContent } from './payload'
 import { RunTab } from '../types/run-tab'
 import { CompilerAbstract } from '@remix-project/remix-solidity'
 import * as remixLib from '@remix-project/remix-lib'
-import { ContractData, Network, Tx } from '../types'
+import { ContractData, FuncABI, MainnetPrompt, Network, Tx } from '../types'
+
+const txFormat = remixLib.execution.txFormat
 declare global {
   interface Window {
     _paq: any
@@ -374,35 +376,49 @@ const terminalLogger = (view: JSX.Element) => {
   plugin.call('terminal', 'logHtml', view)
 }
 
-const getConfirmationCb = (confirmDialogContent: (
-  tx: Tx, network:
-  Network, amount: string,
-  gasEstimation: string,
-  gasFees: (maxFee: string, cb: (txFeeText: string, priceStatus: boolean) => void) => void,
-  determineGasPrice: (cb: (txFeeText: string, gasPriceValue: string, gasPriceStatus: boolean) => void) => void
-  ) => JSX.Element) => {
-  // this code is the same as in recorder.js. TODO need to be refactored out
-  const confirmationCb = (network, tx, gasEstimation, continueTxExecution, cancelCb) => {
-    if (network.name !== 'Main') {
-      return continueTxExecution(null)
+const confirmationHandler = (confirmDialogContent: MainnetPrompt, network, tx, gasEstimation, continueTxExecution, cancelCb) => {
+  if (network.name !== 'Main') {
+    return continueTxExecution(null)
+  }
+  const amount = plugin.blockchain.fromWei(tx.value, true, 'ether')
+  const content = confirmDialogContent(tx, network, amount, gasEstimation, plugin.blockchain.determineGasFees(tx), plugin.blockchain.determineGasPrice.bind(plugin.blockchain))
+
+  dispatch(displayNotification('Confirm transaction', content, 'Confirm', 'Cancel', () => {
+    plugin.blockchain.config.setUnpersistedProperty('doNotShowTransactionConfirmationAgain', plugin.REACT_API.confirmSettings)
+    // TODO: check if this is check is still valid given the refactor
+    if (!plugin.REACT_API.gasPriceStatus) {
+      cancelCb('Given transaction fee is not correct')
+    } else {
+      continueTxExecution({ maxFee: plugin.REACT_API.maxFee, maxPriorityFee: plugin.REACT_API.maxPriorityFee, baseFeePerGas: plugin.REACT_API.baseFeePerGas, gasPrice: plugin.REACT_API.gasPrice })
     }
-    const amount = plugin.blockchain.fromWei(tx.value, true, 'ether')
-    const content = confirmDialogContent(tx, network, amount, gasEstimation, plugin.blockchain.determineGasFees(tx), plugin.blockchain.determineGasPrice.bind(plugin.blockchain))
-
-    dispatch(displayNotification('Confirm transaction', content, 'Confirm', 'Cancel', () => {
-      plugin.blockchain.config.setUnpersistedProperty('doNotShowTransactionConfirmationAgain', plugin.REACT_API.confirmSettings)
-      // TODO: check if this is check is still valid given the refactor
-      if (!plugin.REACT_API.gasPriceStatus) {
-        cancelCb('Given transaction fee is not correct')
-      } else {
-        continueTxExecution({ maxFee: plugin.REACT_API.maxFee, maxPriorityFee: plugin.REACT_API.maxPriorityFee, baseFeePerGas: plugin.REACT_API.baseFeePerGas, gasPrice: plugin.REACT_API.gasPrice })
-      }
+  }, () => {
+    return cancelCb('Transaction canceled by user.')
+  }))
+}
+
+const getConfirmationCb = (confirmDialogContent: MainnetPrompt) => {
+  // this code is the same as in recorder.js. TODO need to be refactored out
+  return (network, tx, gasEstimation, continueTxExecution, cancelCb) => {
+    confirmationHandler(confirmDialogContent, network, tx, gasEstimation, continueTxExecution, cancelCb)
+  }
+}
+
+const continueHandler = (gasEstimationPrompt: (msg: string) => JSX.Element, error, continueTxExecution, cancelCb) => {
+  if (error) {
+    const msg = typeof error !== 'string' ? error.message : error
+
+    dispatch(displayNotification('Gas estimation failed', gasEstimationPrompt(msg), 'Send Transaction', 'Cancel Transaction', () => {
+      continueTxExecution()
     }, () => {
-      return cancelCb('Transaction canceled by user.')
+      cancelCb()
     }))
+  } else {
+    continueTxExecution()
   }
+}
 
-  return confirmationCb
+const promptHandler = (passphrasePrompt, okCb, cancelCb) => {
+  dispatch(displayNotification('Passphrase requested', passphrasePrompt('Personal mode is enabled. Please provide passphrase of account'), 'OK', 'Cancel', okCb, cancelCb))
 }
 
 export const createInstance = async (
@@ -412,33 +428,9 @@ export const createInstance = async (
   logBuilder: (msg: string) => JSX.Element,
   publishToStorage: (storage: 'ipfs' | 'swarm',
   contract: ContractData) => void,
-  mainnetPrompt: (
-    tx: Tx, network:
-    Network, amount: string,
-    gasEstimation: string,
-    gasFees: (maxFee: string, cb: (txFeeText: string, priceStatus: boolean) => void) => void,
-    determineGasPrice: (cb: (txFeeText: string, gasPriceValue: string, gasPriceStatus: boolean) => void) => void
-    ) => JSX.Element,
+  mainnetPrompt: MainnetPrompt,
   isOverSizePrompt: () => JSX.Element,
   args) => {
-  const continueCb = (error, continueTxExecution, cancelCb) => {
-    if (error) {
-      const msg = typeof error !== 'string' ? error.message : error
-
-      dispatch(displayNotification('Gas estimation failed', gasEstimationPrompt(msg), 'Send Transaction', 'Cancel Transaction', () => {
-        continueTxExecution()
-      }, () => {
-        cancelCb()
-      }))
-    } else {
-      continueTxExecution()
-    }
-  }
-
-  const promptCb = (okCb, cancelCb) => {
-    dispatch(displayNotification('Passphrase requested', passphrasePrompt('Personal mode is enabled. Please provide passphrase of account'), 'OK', 'Cancel', okCb, cancelCb))
-  }
-
   const statusCb = (msg: string) => {
     const log = logBuilder(msg)
 
@@ -476,14 +468,32 @@ export const createInstance = async (
 
   if (selectedContract.isOverSizeLimit()) {
     return dispatch(displayNotification('Contract code size over limit', isOverSizePrompt(), 'Force Send', 'Cancel', () => {
-      deployContract(selectedContract, args, contractMetadata, compilerContracts, { continueCb, promptCb, statusCb, finalCb }, confirmationCb)
+      deployContract(selectedContract, args, contractMetadata, compilerContracts, {
+        continueCb: (error, continueTxExecution, cancelCb) => {
+          continueHandler(gasEstimationPrompt, error, continueTxExecution, cancelCb)
+        },
+        promptCb: (okCb, cancelCb) => {
+          promptHandler(passphrasePrompt, okCb, cancelCb)
+        },
+        statusCb,
+        finalCb
+      }, confirmationCb)
     }, () => {
       const log = logBuilder(`creation of ${selectedContract.name} canceled by user.`)
 
       return terminalLogger(log)
     }))
   }
-  deployContract(selectedContract, args, contractMetadata, compilerContracts, { continueCb, promptCb, statusCb, finalCb }, confirmationCb)
+  deployContract(selectedContract, args, contractMetadata, compilerContracts, {
+    continueCb: (error, continueTxExecution, cancelCb) => {
+      continueHandler(gasEstimationPrompt, error, continueTxExecution, cancelCb)
+    },
+    promptCb: (okCb, cancelCb) => {
+      promptHandler(passphrasePrompt, okCb, cancelCb)
+    },
+    statusCb,
+    finalCb
+  }, confirmationCb)
 }
 
 const deployContract = (selectedContract, args, contractMetadata, compilerContracts, callbacks, confirmationCb) => {
@@ -574,3 +584,58 @@ const loadAddress = () => {
 export const getContext = () => {
   return plugin.blockchain.context()
 }
+
+export const runTransactions = (
+  index: number,
+  lookupOnly: boolean,
+  funcABI: FuncABI,
+  inputsValues: string,
+  contractName: string,
+  contractABI, contract,
+  address,
+  logMsg:string,
+  logBuilder: (msg: string) => JSX.Element,
+  mainnetPrompt: MainnetPrompt,
+  gasEstimationPrompt: (msg: string) => JSX.Element,
+  passphrasePrompt: (msg: string) => JSX.Element) => {
+  let callinfo = ''
+  if (lookupOnly) callinfo = 'call'
+  else if (funcABI.type === 'fallback' || funcABI.type === 'receive') callinfo = 'lowLevelInteracions'
+  else callinfo = 'transact'
+
+  _paq.push(['trackEvent', 'udapp', callinfo, plugin.blockchain.getCurrentNetworkStatus().network.name])
+  const params = funcABI.type !== 'fallback' ? inputsValues : ''
+
+  plugin.blockchain.runOrCallContractMethod(
+    contractName,
+    contractABI,
+    funcABI,
+    contract,
+    inputsValues,
+    address,
+    params,
+    lookupOnly,
+    logMsg,
+    (msg) => {
+      const log = logBuilder(msg)
+
+      return terminalLogger(log)
+    },
+    (returnValue) => {
+      const decodedResponse = txFormat.decodeResponse(returnValue, funcABI)
+
+      console.log('decodedResponse: ', decodedResponse)
+
+      dispatch(setDecodedResponse(index, decodedResponse))
+    },
+    (network, tx, gasEstimation, continueTxExecution, cancelCb) => {
+      confirmationHandler(mainnetPrompt, network, tx, gasEstimation, continueTxExecution, cancelCb)
+    },
+    (error, continueTxExecution, cancelCb) => {
+      continueHandler(gasEstimationPrompt, error, continueTxExecution, cancelCb)
+    },
+    (okCb, cancelCb) => {
+      promptHandler(passphrasePrompt, okCb, cancelCb)
+    }
+  )
+}
diff --git a/libs/remix-ui/run-tab/src/lib/actions/payload.ts b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
index e35f072ea3..c15579e08c 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/payload.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
@@ -239,3 +239,13 @@ export const clearAllInstances = () => {
     type: 'CLEAR_INSTANCES'
   }
 }
+
+export const setDecodedResponse = (index: number, decodedResponse) => {
+  return {
+    type: 'SET_DECODED_RESPONSE',
+    payload: {
+      index,
+      decodedResponse
+    }
+  }
+}
diff --git a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
index c1eca2ca52..3cd2f549ba 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
@@ -1,10 +1,8 @@
 // eslint-disable-next-line no-use-before-define
 import React, { useEffect, useState } from 'react'
-import { ContractData, ContractDropdownProps, Network, Tx } from '../types'
+import { ContractData, ContractDropdownProps } from '../types'
 import * as ethJSUtil from 'ethereumjs-util'
 import { ContractGUI } from './contractGUI'
-import { PassphrasePrompt } from './passphrase'
-import { MainnetPrompt } from './mainnet'
 
 export function ContractDropdownUI (props: ContractDropdownProps) {
   const [networkName, setNetworkName] = useState<string>('')
@@ -122,7 +120,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     if (selectedContract.bytecodeObject.length === 0) {
       return props.modal('Alert', 'This contract may be abstract, not implement an abstract parent\'s methods completely or not invoke an inherited contract\'s constructor correctly.', 'OK', () => {})
     }
-    props.createInstance(loadedContractData, gasEstimationPrompt, passphrasePrompt, logBuilder, props.publishToStorage, mainnetPrompt, isOverSizePrompt, args)
+    props.createInstance(loadedContractData, props.gasEstimationPrompt, props.passphrasePrompt, props.logBuilder, props.publishToStorage, props.mainnetPrompt, isOverSizePrompt, args)
   }
 
   //   listenToContextChange () {
@@ -176,43 +174,6 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     setSelectedContract(value)
   }
 
-  const gasEstimationPrompt = (msg: string) => {
-    return (
-      <div>Gas estimation errored with the following message (see below). The transaction execution will likely fail. Do you want to force sending? <br />
-        ${msg}
-      </div>
-    )
-  }
-
-  const logBuilder = (msg: string) => {
-    return <pre>{msg}</pre>
-  }
-
-  const passphrasePrompt = (message: string) => {
-    return <PassphrasePrompt message={message} setPassphrase={props.setPassphrase} defaultValue={props.passphrase} />
-  }
-
-  const mainnetPrompt = (tx: Tx, network: Network, amount: string, gasEstimation: string, gasFees: (maxFee: string, cb: (txFeeText: string, priceStatus: boolean) => void) => void, determineGasPrice: (cb: (txFeeText: string, gasPriceValue: string, gasPriceStatus: boolean) => void) => void) => {
-    return <MainnetPrompt
-      init={determineGasPrice}
-      network={network}
-      tx={tx}
-      amount={amount}
-      gasEstimation={gasEstimation}
-      setNewGasPrice={gasFees}
-      updateBaseFeePerGas={props.updateBaseFeePerGas}
-      updateConfirmSettings={props.updateConfirmSettings}
-      updateGasPrice={props.updateGasPrice}
-      updateGasPriceStatus={props.updateGasPriceStatus}
-      updateMaxFee={props.updateMaxFee}
-      updateMaxPriorityFee={props.updateMaxPriorityFee}
-      setTxFeeContent={props.updateTxFeeContent}
-      txFeeContent={props.txFeeContent}
-      maxFee={props.maxFee}
-      maxPriorityFee={props.maxPriorityFee}
-    />
-  }
-
   const isOverSizePrompt = () => {
     return (
       <div>Contract creation initialization returns data with length of more than 24576 bytes. The deployment will likely fails. <br />
diff --git a/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx b/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
index 6bf00cece8..d82b868201 100644
--- a/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
@@ -23,7 +23,18 @@ export function InstanceContainerUI (props: InstanceContainerProps) {
       </div>
       { instanceList.length > 0
         ? <div> { props.instances.instanceList.map((instance, index) => {
-          return <UniversalDappUI instance={instance} context={props.getContext()} removeInstance={props.removeInstance} index={index} />
+          return <UniversalDappUI
+            instance={instance}
+            context={props.getContext()}
+            removeInstance={props.removeInstance}
+            index={index}
+            gasEstimationPrompt={props.gasEstimationPrompt}
+            logBuilder={props.logBuilder}
+            passphrasePrompt={props.passphrasePrompt}
+            mainnetPrompt={props.mainnetPrompt}
+            runTransactions={props.runTransactions}
+            decodedResponse={instance.decodedResponse || {}}
+          />
         }) }
         </div>
         : <span className="mx-2 mt-3 alert alert-warning" data-id="deployAndRunNoInstanceText" role="alert">
diff --git a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
index 633fcecf80..7f7379fdf8 100644
--- a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
@@ -6,6 +6,8 @@ import { CopyToClipboard } from '@remix-ui/clipboard'
 import * as remixLib from '@remix-project/remix-lib'
 import * as ethJSUtil from 'ethereumjs-util'
 import { ContractGUI } from './contractGUI'
+import { TreeView, TreeViewItem } from '@remix-ui/tree-view'
+import { BN } from 'ethereumjs-util'
 
 const txHelper = remixLib.execution.txHelper
 
@@ -13,6 +15,7 @@ export function UniversalDappUI (props: UdappProps) {
   const [toggleExpander, setToggleExpander] = useState<boolean>(true)
   const [contractABI, setContractABI] = useState<FuncABI[]>(null)
   const [address, setAddress] = useState<string>('')
+  const [expandPath, setExpandPath] = useState<string[]>([])
 
   useEffect(() => {
     if (!props.abi) {
@@ -135,41 +138,95 @@ export function UniversalDappUI (props: UdappProps) {
     const functionName = funcABI.type === 'function' ? funcABI.name : `(${funcABI.type})`
     const logMsg = `${lookupOnly ? 'call' : 'transact'} to ${props.instance.name}.${functionName}`
 
-    // const callbacksInContext = txCallBacks.getCallBacksWithContext(this, this.blockchain)
-
-    // const outputCb = (returnValue) => {
-    //   if (outputOverride) {
-    //     const decoded = decodeResponseToTreeView(returnValue, args.funABI)
-    //     outputOverride.innerHTML = ''
-    //     outputOverride.appendChild(decoded)
-    //   }
-    // }
-    // let callinfo = ''
-    // if (lookupOnly) callinfo = 'call'
-    // else if (args.funABI.type === 'fallback' || args.funABI.type === 'receive') callinfo = 'lowLevelInteracions'
-    // else callinfo = 'transact'
-
-    // _paq.push(['trackEvent', 'udapp', callinfo, this.blockchain.getCurrentNetworkStatus().network.name])
-    // const params = args.funABI.type !== 'fallback' ? inputsValues : ''
-    // this.blockchain.runOrCallContractMethod(
-    //   args.contractName,
-    //   args.contractABI,
-    //   args.funABI,
-    //   args.contract,
-    //   inputsValues,
-    //   args.address,
-    //   params,
-    //   lookupOnly,
-    //   logMsg,
-    //   this.logCallback,
-    //   outputCb,
-    //   callbacksInContext.confirmationCb.bind(callbacksInContext),
-    //   callbacksInContext.continueCb.bind(callbacksInContext),
-    //   callbacksInContext.promptCb.bind(callbacksInContext))
+    props.runTransactions(
+      props.index,
+      lookupOnly,
+      funcABI,
+      inputsValues,
+      props.instance.name,
+      contractABI,
+      props.instance.contractData,
+      props.instance.address,
+      logMsg,
+      props.logBuilder,
+      props.mainnetPrompt,
+      props.gasEstimationPrompt,
+      props.passphrasePrompt)
+  }
+
+  const extractDataDefault = (item, parent?) => {
+    const ret: any = {}
+
+    if (BN.isBN(item)) {
+      ret.self = item.toString(10)
+      ret.children = []
+    } else {
+      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 handleExpand = (path: string) => {
+    if (expandPath.includes(path)) {
+      const filteredPath = expandPath.filter(value => value !== path)
+
+      setExpandPath(filteredPath)
+    } else {
+      setExpandPath([...expandPath, path])
+    }
+  }
+
+  const label = (key: string | number, value: string) => {
+    return (
+      <div className="d-flex mr-1 flex-row label_item">
+        <label className="small font-weight-bold mb-0 pr-1 label_key">{key}:</label>
+        <label className="m-0 label_value">{value}</label>
+      </div>
+    )
+  }
+
+  const renderData = (item, parent, key: string | number, keyPath: string) => {
+    const data = 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={label(key, data.self)} onClick={() => handleExpand(keyPath)} expand={expandPath.includes(keyPath)}>
+          <TreeView id={`treeView${key}`} key={keyPath}>
+            {children}
+          </TreeView>
+        </TreeViewItem>
+      )
+    } else {
+      return <TreeViewItem id={key.toString()} key={keyPath} label={label(key, data.self)} onClick={() => handleExpand(keyPath)} expand={expandPath.includes(keyPath)} />
+    }
   }
 
   return (
-    <div className={`udapp_instance udapp_run-instance border-dark ${toggleExpander ? 'udapp_hidesub' : ''}`} id={`instance${address}`} data-shared="universalDappUiInstance">
+    <div className={`udapp_instance udapp_run-instance border-dark ${toggleExpander ? 'udapp_hidesub' : 'bg-light'}`} id={`instance${address}`} data-shared="universalDappUiInstance">
       <div className="udapp_title alert alert-secondary">
         <button data-id="universalDappUiTitleExpander" className="btn udapp_titleExpander" onClick={toggleClass}>
           <i className={`fas ${toggleExpander ? 'fa-angle-right' : 'fa-angle-down'}`} aria-hidden="true"></i>
@@ -181,7 +238,7 @@ export function UniversalDappUI (props: UdappProps) {
             </span>
           </div>
           <div className="btn-group">
-            <button className="btn p-1 btn-secondary"><CopyToClipboard content={address} /></button>
+            <button className="btn p-1 btn-secondary"><CopyToClipboard content={address} direction={'top'} /></button>
           </div>
         </div>
         <button
@@ -195,16 +252,23 @@ export function UniversalDappUI (props: UdappProps) {
       </div>
       <div className="udapp_cActionsWrapper" data-id="universalDappUiContractActionWrapper">
         {
-          contractABI && contractABI.map((funcABI) => {
+          contractABI && contractABI.map((funcABI, index) => {
             if (funcABI.type !== 'function') return null
             const isConstant = funcABI.constant !== undefined ? funcABI.constant : false
             const lookupOnly = funcABI.stateMutability === 'view' || funcABI.stateMutability === 'pure' || isConstant
 
-            return <div className="udapp_value">
-              <ContractGUI funcABI={funcABI} clickCallBack={(valArray: { name: string, type: string }[], inputsValues: string) => runTransaction(lookupOnly, funcABI, valArray, inputsValues)} inputs={props.instance.contractData.getConstructorInputs()} evmBC={props.instance.contractData.bytecodeObject} lookupOnly={lookupOnly} />
-            </div>
+            return <ContractGUI funcABI={funcABI} clickCallBack={(valArray: { name: string, type: string }[], inputsValues: string) => runTransaction(lookupOnly, funcABI, valArray, inputsValues)} inputs={props.instance.contractData.getConstructorInputs()} evmBC={props.instance.contractData.bytecodeObject} lookupOnly={lookupOnly} />
           })
         }
+        <div className="udapp_value">
+          <TreeView id="treeView">
+            {
+              Object.keys(props.decodedResponse).map((innerkey) => {
+                return renderData(props.decodedResponse[innerkey], props.decodedResponse, innerkey, innerkey)
+              })
+            }
+          </TreeView>
+        </div>
       </div>
     </div>
   )
diff --git a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
index 0f0a6473a9..bde670c4cb 100644
--- a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
+++ b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
@@ -68,7 +68,8 @@ export interface RunTabState {
     instanceList: {
       contractData: ContractData,
       address: string,
-      name: string
+      name: string,
+      decodedResponse?: any
     }[],
     error: string
   }
@@ -566,6 +567,22 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
       }
     }
 
+    case 'SET_DECODED_RESPONSE': {
+      const payload: any = action.payload
+
+      return {
+        ...state,
+        instances: {
+          ...state.instances,
+          instanceList: state.instances.instanceList.map((instance, index) => {
+            console.log('payload: ', payload)
+            if (payload.index === index) instance.decodedResponse = payload.decodedResponse
+            return instance
+          })
+        }
+      }
+    }
+
     default:
       return state
   }
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
index d78ca9f3dd..c6d7bf2480 100644
--- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -7,7 +7,7 @@ import { ContractDropdownUI } from './components/contractDropdownUI'
 import { InstanceContainerUI } from './components/instanceContainerUI'
 import { RecorderUI } from './components/recorderCardUI'
 import { SettingsUI } from './components/settingsUI'
-import { ContractData, Modal, RunTabProps } from './types'
+import { ContractData, Modal, Network, RunTabProps, Tx } from './types'
 import { runTabInitialState, runTabReducer } from './reducers/runTab'
 import {
   initRunTab, setAccount,
@@ -21,10 +21,13 @@ import {
   updateGasPrice, updateGasPriceStatus,
   updateMaxFee, updateMaxPriorityFee,
   updateTxFeeContent, clearInstances,
-  removeInstance, getContext
+  removeInstance, getContext,
+  runTransactions
 } from './actions'
 import './css/run-tab.css'
 import { PublishToStorage } from '@remix-ui/publish-to-storage'
+import { PassphrasePrompt } from './components/passphrase'
+import { MainnetPrompt } from './components/mainnet'
 
 export function RunTabUI (props: RunTabProps) {
   const { plugin } = props
@@ -142,6 +145,43 @@ export function RunTabUI (props: RunTabProps) {
     })
   }
 
+  const gasEstimationPrompt = (msg: string) => {
+    return (
+      <div>Gas estimation errored with the following message (see below). The transaction execution will likely fail. Do you want to force sending? <br />
+        {msg}
+      </div>
+    )
+  }
+
+  const logBuilder = (msg: string) => {
+    return <pre>{msg}</pre>
+  }
+
+  const passphrasePrompt = (message: string) => {
+    return <PassphrasePrompt message={message} setPassphrase={setPassphrasePrompt} defaultValue={runTab.passphrase} />
+  }
+
+  const mainnetPrompt = (tx: Tx, network: Network, amount: string, gasEstimation: string, gasFees: (maxFee: string, cb: (txFeeText: string, priceStatus: boolean) => void) => void, determineGasPrice: (cb: (txFeeText: string, gasPriceValue: string, gasPriceStatus: boolean) => void) => void) => {
+    return <MainnetPrompt
+      init={determineGasPrice}
+      network={network}
+      tx={tx}
+      amount={amount}
+      gasEstimation={gasEstimation}
+      setNewGasPrice={gasFees}
+      updateBaseFeePerGas={updateBaseFeePerGas}
+      updateConfirmSettings={updateConfirmSettings}
+      updateGasPrice={updateGasPrice}
+      updateGasPriceStatus={updateGasPriceStatus}
+      updateMaxFee={updateMaxFee}
+      updateMaxPriorityFee={updateMaxPriorityFee}
+      setTxFeeContent={updateTxFeeContent}
+      txFeeContent={runTab.txFeeContent}
+      maxFee={runTab.maxFee}
+      maxPriorityFee={runTab.maxPriorityFee}
+    />
+  }
+
   return (
     <Fragment>
       <div className="udapp_runTabView run-tab" id="runTabView" data-id="runTabView">
@@ -180,19 +220,23 @@ export function RunTabUI (props: RunTabProps) {
             ipfsCheckedState={runTab.ipfsChecked}
             setIpfsCheckedState={setCheckIpfs}
             publishToStorage={publishToStorage}
-            updateBaseFeePerGas={updateBaseFeePerGas}
-            updateConfirmSettings={updateConfirmSettings}
-            updateGasPrice={updateGasPrice}
-            updateGasPriceStatus={updateGasPriceStatus}
-            updateMaxFee={updateMaxFee}
-            updateMaxPriorityFee={updateMaxPriorityFee}
-            updateTxFeeContent={updateTxFeeContent}
-            txFeeContent={runTab.txFeeContent}
-            maxFee={runTab.maxFee}
-            maxPriorityFee={runTab.maxPriorityFee}
+            gasEstimationPrompt={gasEstimationPrompt}
+            logBuilder={logBuilder}
+            passphrasePrompt={passphrasePrompt}
+            mainnetPrompt={mainnetPrompt}
           />
           <RecorderUI />
-          <InstanceContainerUI instances={runTab.instances} clearInstances={clearInstances} removeInstance={removeInstance} getContext={getContext} />
+          <InstanceContainerUI
+            instances={runTab.instances}
+            clearInstances={clearInstances}
+            removeInstance={removeInstance}
+            getContext={getContext}
+            gasEstimationPrompt={gasEstimationPrompt}
+            logBuilder={logBuilder}
+            passphrasePrompt={passphrasePrompt}
+            mainnetPrompt={mainnetPrompt}
+            runTransactions={runTransactions}
+          />
         </div>
       </div>
       <ModalDialog id='fileSystem' { ...focusModal } handleHide={ handleHideModal } />
diff --git a/libs/remix-ui/run-tab/src/lib/types/blockchain.d.ts b/libs/remix-ui/run-tab/src/lib/types/blockchain.d.ts
index bd19058d4a..406459b1a0 100644
--- a/libs/remix-ui/run-tab/src/lib/types/blockchain.d.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/blockchain.d.ts
@@ -14,6 +14,10 @@ export class Blockchain extends Plugin<any, any> {
     getCurrentNetworkStatus(): {
         name: string;
         id: string;
+        network?: {
+            name: string;
+            id: string;
+        };
     };
     setupProviders(): void;
     providers: {};
diff --git a/libs/remix-ui/run-tab/src/lib/types/index.ts b/libs/remix-ui/run-tab/src/lib/types/index.ts
index a56cd94a4b..988a9bc593 100644
--- a/libs/remix-ui/run-tab/src/lib/types/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/index.ts
@@ -1,3 +1,4 @@
+import { type } from 'os'
 import { RunTab } from './run-tab'
 export interface RunTabProps {
   plugin: RunTab
@@ -137,6 +138,14 @@ export interface Network {
   }
 }
 
+export type MainnetPrompt = (
+  tx: Tx, network:
+  Network, amount: string,
+  gasEstimation: string,
+  gasFees: (maxFee: string, cb: (txFeeText: string, priceStatus: boolean) => void) => void,
+  determineGasPrice: (cb: (txFeeText: string, gasPriceValue: string, gasPriceStatus: boolean) => void) => void
+  ) => JSX.Element
+
 export interface ContractDropdownProps {
   exEnvironment: string,
   contracts: {
@@ -155,34 +164,23 @@ export interface ContractDropdownProps {
   modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
   passphrase: string,
   setPassphrase: (passphrase: string) => void,
-  createInstance: (selectedContract: ContractData,
-  gasEstimationPrompt: (msg: string) => JSX.Element,
-  passphrasePrompt: (msg: string) => JSX.Element,
-  logBuilder: (msg: string) => JSX.Element,
-  publishToStorage: (storage: 'ipfs' | 'swarm',
-  contract: ContractData) => void,
-  mainnetPrompt: (
-    tx: Tx, network:
-    Network, amount: string,
-    gasEstimation: string,
-    gasFees: (maxFee: string, cb: (txFeeText: string, priceStatus: boolean) => void) => void,
-    determineGasPrice: (cb: (txFeeText: string, gasPriceValue: string, gasPriceStatus: boolean) => void) => void
-    ) => JSX.Element,
-  isOverSizePrompt: () => JSX.Element,
-  args) => void,
+  createInstance: (
+    selectedContract: ContractData,
+    gasEstimationPrompt: (msg: string) => JSX.Element,
+    passphrasePrompt: (msg: string) => JSX.Element,
+    logBuilder: (msg: string) => JSX.Element,
+    publishToStorage: (storage: 'ipfs' | 'swarm',
+    contract: ContractData) => void,
+    mainnetPrompt: MainnetPrompt,
+    isOverSizePrompt: () => JSX.Element,
+    args) => void,
   ipfsCheckedState: boolean,
   setIpfsCheckedState: (value: boolean) => void,
   publishToStorage: (storage: 'ipfs' | 'swarm', contract: ContractData) => void,
-  updateBaseFeePerGas: (baseFee: string) => void,
-  updateGasPriceStatus: (status: boolean) => void,
-  updateConfirmSettings: (confirmation: boolean) => void,
-  updateMaxFee: (fee: string) => void,
-  updateMaxPriorityFee: (fee: string) => void,
-  updateGasPrice: (price: string) => void,
-  updateTxFeeContent: (content: string) => void,
-  txFeeContent: string,
-  maxFee: string,
-  maxPriorityFee: string
+  gasEstimationPrompt: (msg: string) => JSX.Element,
+  logBuilder: (msg: string) => JSX.Element,
+  passphrasePrompt: (message: string) => JSX.Element,
+  mainnetPrompt: (tx: Tx, network: Network, amount: string, gasEstimation: string, gasFees: (maxFee: string, cb: (txFeeText: string, priceStatus: boolean) => void) => void, determineGasPrice: (cb: (txFeeText: string, gasPriceValue: string, gasPriceStatus: boolean) => void) => void) => JSX.Element
 }
 
 export interface RecorderProps {
@@ -194,13 +192,31 @@ export interface InstanceContainerProps {
     instanceList: {
       contractData: ContractData,
       address: string,
-      name: string
+      name: string,
+      decodedResponse?: any
     }[],
     error: string
   },
   clearInstances: () => void,
   removeInstance: (index: number) => void,
-  getContext: () => 'memory' | 'blockchain'
+  getContext: () => 'memory' | 'blockchain',
+  runTransactions: (
+    index: number,
+    lookupOnly: boolean,
+    funcABI: FuncABI,
+    inputsValues: string,
+    contractName: string,
+    contractABI, contract,
+    address,
+    logMsg:string,
+    logBuilder: (msg: string) => JSX.Element,
+    mainnetPrompt: MainnetPrompt,
+    gasEstimationPrompt: (msg: string) => JSX.Element,
+    passphrasePrompt: (msg: string) => JSX.Element) => void,
+  gasEstimationPrompt: (msg: string) => JSX.Element,
+  logBuilder: (msg: string) => JSX.Element,
+  passphrasePrompt: (message: string) => JSX.Element,
+  mainnetPrompt: (tx: Tx, network: Network, amount: string, gasEstimation: string, gasFees: (maxFee: string, cb: (txFeeText: string, priceStatus: boolean) => void) => void, determineGasPrice: (cb: (txFeeText: string, gasPriceValue: string, gasPriceStatus: boolean) => void) => void) => JSX.Element
 }
 
 export interface Modal {
@@ -251,5 +267,23 @@ export interface UdappProps {
   context: 'memory' | 'blockchain',
   abi?: FuncABI[],
   removeInstance: (index: number) => void,
-  index: number
+  index: number,
+  gasEstimationPrompt: (msg: string) => JSX.Element,
+  logBuilder: (msg: string) => JSX.Element,
+  passphrasePrompt: (message: string) => JSX.Element,
+  mainnetPrompt: (tx: Tx, network: Network, amount: string, gasEstimation: string, gasFees: (maxFee: string, cb: (txFeeText: string, priceStatus: boolean) => void) => void, determineGasPrice: (cb: (txFeeText: string, gasPriceValue: string, gasPriceStatus: boolean) => void) => void) => JSX.Element,
+  runTransactions: (
+    index: number,
+    lookupOnly: boolean,
+    funcABI: FuncABI,
+    inputsValues: string,
+    contractName: string,
+    contractABI, contract,
+    address,
+    logMsg:string,
+    logBuilder: (msg: string) => JSX.Element,
+    mainnetPrompt: MainnetPrompt,
+    gasEstimationPrompt: (msg: string) => JSX.Element,
+    passphrasePrompt: (msg: string) => JSX.Element) => void,
+  decodedResponse: any
 }

From 7d9384b71cb995e13a6d1f4a68763ae5034a1412 Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Sat, 25 Dec 2021 15:29:39 +0100
Subject: [PATCH 130/168] Low level interactions

---
 .../helper/src/lib/remix-ui-helper.ts         |  10 +-
 .../remix-ui/run-tab/src/lib/actions/index.ts |   2 -
 .../lib/components/instanceContainerUI.tsx    |   1 +
 .../src/lib/components/universalDappUI.tsx    | 199 +++++++++---------
 .../run-tab/src/lib/reducers/runTab.ts        |   1 -
 libs/remix-ui/run-tab/src/lib/run-tab.tsx     |   1 +
 libs/remix-ui/run-tab/src/lib/types/index.ts  |   6 +-
 7 files changed, 112 insertions(+), 108 deletions(-)

diff --git a/libs/remix-ui/helper/src/lib/remix-ui-helper.ts b/libs/remix-ui/helper/src/lib/remix-ui-helper.ts
index 818cf3bc31..779709c75c 100644
--- a/libs/remix-ui/helper/src/lib/remix-ui-helper.ts
+++ b/libs/remix-ui/helper/src/lib/remix-ui-helper.ts
@@ -70,7 +70,7 @@ export const isNumeric = (value) => {
   return /^\+?(0|[1-9]\d*)$/.test(value)
 }
 
-export const shortenAddress = (address, etherBalance) => {
+export const shortenAddress = (address, etherBalance?) => {
   const len = address.length
 
   return address.slice(0, 5) + '...' + address.slice(len - 5, len) + (etherBalance ? ' (' + etherBalance.toString() + ' ether)' : '')
@@ -86,3 +86,11 @@ export const addressToString = (address) => {
   }
   return ethJSUtil.toChecksumAddress(address)
 }
+
+export const is0XPrefixed = (value) => {
+  return value.substr(0, 2) === '0x'
+}
+
+export const isHexadecimal = (value) => {
+  return /^[0-9a-fA-F]+$/.test(value) && (value.length % 2 === 0)
+}
diff --git a/libs/remix-ui/run-tab/src/lib/actions/index.ts b/libs/remix-ui/run-tab/src/lib/actions/index.ts
index afc7f27b3b..9c0570c127 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/index.ts
@@ -624,8 +624,6 @@ export const runTransactions = (
     (returnValue) => {
       const decodedResponse = txFormat.decodeResponse(returnValue, funcABI)
 
-      console.log('decodedResponse: ', decodedResponse)
-
       dispatch(setDecodedResponse(index, decodedResponse))
     },
     (network, tx, gasEstimation, continueTxExecution, cancelCb) => {
diff --git a/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx b/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
index d82b868201..92024045eb 100644
--- a/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
@@ -34,6 +34,7 @@ export function InstanceContainerUI (props: InstanceContainerProps) {
             mainnetPrompt={props.mainnetPrompt}
             runTransactions={props.runTransactions}
             decodedResponse={instance.decodedResponse || {}}
+            sendValue={props.sendValue}
           />
         }) }
         </div>
diff --git a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
index 7f7379fdf8..291e71eb43 100644
--- a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
@@ -1,6 +1,5 @@
 // eslint-disable-next-line no-use-before-define
 import React, { useEffect, useState } from 'react'
-import { shortenAddress } from 'apps/remix-ide/src/lib/helper'
 import { FuncABI, UdappProps } from '../types'
 import { CopyToClipboard } from '@remix-ui/clipboard'
 import * as remixLib from '@remix-project/remix-lib'
@@ -8,6 +7,7 @@ import * as ethJSUtil from 'ethereumjs-util'
 import { ContractGUI } from './contractGUI'
 import { TreeView, TreeViewItem } from '@remix-ui/tree-view'
 import { BN } from 'ethereumjs-util'
+import { is0XPrefixed, isHexadecimal, isNumeric, shortenAddress } from '@remix-ui/helper'
 
 const txHelper = remixLib.execution.txHelper
 
@@ -16,6 +16,8 @@ export function UniversalDappUI (props: UdappProps) {
   const [contractABI, setContractABI] = useState<FuncABI[]>(null)
   const [address, setAddress] = useState<string>('')
   const [expandPath, setExpandPath] = useState<string[]>([])
+  const [llIError, setLlIError] = useState<string>('')
+  const [calldataValue, setCalldataValue] = useState<string>('')
 
   useEffect(() => {
     if (!props.abi) {
@@ -37,94 +39,55 @@ export function UniversalDappUI (props: UdappProps) {
     }
   }, [props.instance.address])
 
-  // const calldataInput = yo`
-  //   <input id="deployAndRunLLTxCalldata" class="${css.calldataInput} form-control" title="The Calldata to send to fallback function of the contract.">
-  // `
-  // const llIError = yo`
-  //   <label id="deployAndRunLLTxError" class="text-danger my-2"></label>
-  // `
-  // // constract LLInteractions elements
-  // const lowLevelInteracions = yo`
-  //   <div class="d-flex flex-column">
-  //     <div class="d-flex flex-row justify-content-between mt-2">
-  //       <div class="py-2 border-top d-flex justify-content-start flex-grow-1">
-  //         Low level interactions
-  //       </div>
-  //       <a
-  //         href="https://solidity.readthedocs.io/en/v0.6.2/contracts.html#receive-ether-function"
-  //         title="check out docs for using 'receive'/'fallback'"
-  //         target="_blank"
-  //       >
-  //         <i aria-hidden="true" class="fas fa-info my-2 mr-1"></i>
-  //       </a>
-  //     </div>
-  //     <div class="d-flex flex-column align-items-start">
-  //       <label class="">CALLDATA</label>
-  //       <div class="d-flex justify-content-end w-100 align-items-center">
-  //         ${calldataInput}
-  //         <button id="deployAndRunLLTxSendTransaction" data-id="pluginManagerSettingsDeployAndRunLLTxSendTransaction" class="${css.instanceButton} p-0 w-50 btn border-warning text-warning" title="Send data to contract." onclick=${() => sendData()}>Transact</button>
-  //       </div>
-  //     </div>
-  //     <div>
-  //       ${llIError}
-  //     </div>
-  //   </div>
-  // `
-
-  // function sendData () {
-  //   function setLLIError (text) {
-  //     llIError.innerText = text
-  //   }
+  const sendData = () => {
+    setLlIError('')
+    const fallback = txHelper.getFallbackInterface(contractABI)
+    const receive = txHelper.getReceiveInterface(contractABI)
+    const args = {
+      funcABI: fallback || receive,
+      address: address,
+      contractName: props.instance.name,
+      contractABI: contractABI
+    }
+    const amount = props.sendValue
 
-  //   setLLIError('')
-  //   const fallback = txHelper.getFallbackInterface(contractABI)
-  //   const receive = txHelper.getReceiveInterface(contractABI)
-  //   const args = {
-  //     funABI: fallback || receive,
-  //     address: address,
-  //     contractName: contractName,
-  //     contractABI: contractABI
-  //   }
-  //   const amount = document.querySelector('#value').value
-  //   if (amount !== '0') {
-  //     // check for numeric and receive/fallback
-  //     if (!helper.isNumeric(amount)) {
-  //       return setLLIError('Value to send should be a number')
-  //     } else if (!receive && !(fallback && fallback.stateMutability === 'payable')) {
-  //       return setLLIError("In order to receive Ether transfer the contract should have either 'receive' or payable 'fallback' function")
-  //     }
-  //   }
-  //   let calldata = calldataInput.value
-  //   if (calldata) {
-  //     if (calldata.length < 4 && helper.is0XPrefixed(calldata)) {
-  //       return setLLIError('The calldata should be a valid hexadecimal value with size of at least one byte.')
-  //     } else {
-  //       if (helper.is0XPrefixed(calldata)) {
-  //         calldata = calldata.substr(2, calldata.length)
-  //       }
-  //       if (!helper.isHexadecimal(calldata)) {
-  //         return setLLIError('The calldata should be a valid hexadecimal value.')
-  //       }
-  //     }
-  //     if (!fallback) {
-  //       return setLLIError("'Fallback' function is not defined")
-  //     }
-  //   }
+    if (amount !== '0') {
+      // check for numeric and receive/fallback
+      if (!isNumeric(amount)) {
+        return setLlIError('Value to send should be a number')
+      } else if (!receive && !(fallback && fallback.stateMutability === 'payable')) {
+        return setLlIError("In order to receive Ether transfer the contract should have either 'receive' or payable 'fallback' function")
+      }
+    }
+    let calldata = calldataValue
 
-  //   if (!receive && !fallback) return setLLIError('Both \'receive\' and \'fallback\' functions are not defined')
+    if (calldata) {
+      if (calldata.length < 4 && is0XPrefixed(calldata)) {
+        return setLlIError('The calldata should be a valid hexadecimal value with size of at least one byte.')
+      } else {
+        if (is0XPrefixed(calldata)) {
+          calldata = calldata.substr(2, calldata.length)
+        }
+        if (!isHexadecimal(calldata)) {
+          return setLlIError('The calldata should be a valid hexadecimal value.')
+        }
+      }
+      if (!fallback) {
+        return setLlIError("'Fallback' function is not defined")
+      }
+    }
 
-  //   // we have to put the right function ABI:
-  //   // if receive is defined and that there is no calldata => receive function is called
-  //   // if fallback is defined => fallback function is called
-  //   if (receive && !calldata) args.funABI = receive
-  //   else if (fallback) args.funABI = fallback
+    if (!receive && !fallback) return setLlIError('Both \'receive\' and \'fallback\' functions are not defined')
 
-  //   if (!args.funABI) return setLLIError('Please define a \'Fallback\' function to send calldata and a either \'Receive\' or payable \'Fallback\' to send ethers')
-  //   self.runTransaction(false, args, null, calldataInput.value, null)
-  // }
+    // we have to put the right function ABI:
+    // if receive is defined and that there is no calldata => receive function is called
+    // if fallback is defined => fallback function is called
+    if (receive && !calldata) args.funcABI = receive
+    else if (fallback) args.funcABI = fallback
 
-  // contractActionsWrapper.appendChild(lowLevelInteracions)
-  // return instance
+    if (!args.funcABI) return setLlIError('Please define a \'Fallback\' function to send calldata and a either \'Receive\' or payable \'Fallback\' to send ethers')
+    runTransaction(false, args.funcABI, null, calldataValue)
+  }
 
   const toggleClass = () => {
     setToggleExpander(!toggleExpander)
@@ -146,7 +109,7 @@ export function UniversalDappUI (props: UdappProps) {
       props.instance.name,
       contractABI,
       props.instance.contractData,
-      props.instance.address,
+      address,
       logMsg,
       props.logBuilder,
       props.mainnetPrompt,
@@ -195,9 +158,15 @@ export function UniversalDappUI (props: UdappProps) {
     }
   }
 
+  const handleCalldataChange = (e) => {
+    const value = e.target.value
+
+    setCalldataValue(value)
+  }
+
   const label = (key: string | number, value: string) => {
     return (
-      <div className="d-flex mr-1 flex-row label_item">
+      <div className="d-flex mt-2 flex-row label_item">
         <label className="small font-weight-bold mb-0 pr-1 label_key">{key}:</label>
         <label className="m-0 label_value">{value}</label>
       </div>
@@ -251,23 +220,49 @@ export function UniversalDappUI (props: UdappProps) {
         </button>
       </div>
       <div className="udapp_cActionsWrapper" data-id="universalDappUiContractActionWrapper">
-        {
-          contractABI && contractABI.map((funcABI, index) => {
-            if (funcABI.type !== 'function') return null
-            const isConstant = funcABI.constant !== undefined ? funcABI.constant : false
-            const lookupOnly = funcABI.stateMutability === 'view' || funcABI.stateMutability === 'pure' || isConstant
+        <div className="udapp_contractActionsContainer">
+          {
+            contractABI && contractABI.map((funcABI) => {
+              if (funcABI.type !== 'function') return null
+              const isConstant = funcABI.constant !== undefined ? funcABI.constant : false
+              const lookupOnly = funcABI.stateMutability === 'view' || funcABI.stateMutability === 'pure' || isConstant
 
-            return <ContractGUI funcABI={funcABI} clickCallBack={(valArray: { name: string, type: string }[], inputsValues: string) => runTransaction(lookupOnly, funcABI, valArray, inputsValues)} inputs={props.instance.contractData.getConstructorInputs()} evmBC={props.instance.contractData.bytecodeObject} lookupOnly={lookupOnly} />
-          })
-        }
-        <div className="udapp_value">
-          <TreeView id="treeView">
-            {
-              Object.keys(props.decodedResponse).map((innerkey) => {
-                return renderData(props.decodedResponse[innerkey], props.decodedResponse, innerkey, innerkey)
-              })
-            }
-          </TreeView>
+              return <ContractGUI funcABI={funcABI} clickCallBack={(valArray: { name: string, type: string }[], inputsValues: string) => runTransaction(lookupOnly, funcABI, valArray, inputsValues)} inputs={props.instance.contractData.getConstructorInputs()} evmBC={props.instance.contractData.bytecodeObject} lookupOnly={lookupOnly} />
+            })
+          }
+          <div className="udapp_value">
+            <TreeView id="treeView">
+              {
+                Object.keys(props.decodedResponse).map((innerkey) => {
+                  return renderData(props.decodedResponse[innerkey], props.decodedResponse, innerkey, innerkey)
+                })
+              }
+            </TreeView>
+          </div>
+        </div>
+        <div className="d-flex flex-column">
+          <div className="d-flex flex-row justify-content-between mt-2">
+            <div className="py-2 border-top d-flex justify-content-start flex-grow-1">
+              Low level interactions
+            </div>
+            <a
+              href="https://solidity.readthedocs.io/en/v0.6.2/contracts.html#receive-ether-function"
+              title="check out docs for using 'receive'/'fallback'"
+              target="_blank"
+            >
+              <i aria-hidden="true" className="fas fa-info my-2 mr-1"></i>
+            </a>
+          </div>
+          <div className="d-flex flex-column align-items-start">
+            <label className="">CALLDATA</label>
+            <div className="d-flex justify-content-end w-100 align-items-center">
+              <input id="deployAndRunLLTxCalldata" onChange={handleCalldataChange} className="udapp_calldataInput form-control" title="The Calldata to send to fallback function of the contract." />
+              <button id="deployAndRunLLTxSendTransaction" data-id="pluginManagerSettingsDeployAndRunLLTxSendTransaction" className="udapp_instanceButton p-0 w-50 btn border-warning text-warning" title="Send data to contract." onClick={sendData}>Transact</button>
+            </div>
+          </div>
+          <div>
+            <label id="deployAndRunLLTxError" className="text-danger my-2">{ llIError }</label>
+          </div>
         </div>
       </div>
     </div>
diff --git a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
index bde670c4cb..f799deb707 100644
--- a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
+++ b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
@@ -575,7 +575,6 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
         instances: {
           ...state.instances,
           instanceList: state.instances.instanceList.map((instance, index) => {
-            console.log('payload: ', payload)
             if (payload.index === index) instance.decodedResponse = payload.decodedResponse
             return instance
           })
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
index c6d7bf2480..68f837858b 100644
--- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -236,6 +236,7 @@ export function RunTabUI (props: RunTabProps) {
             passphrasePrompt={passphrasePrompt}
             mainnetPrompt={mainnetPrompt}
             runTransactions={runTransactions}
+            sendValue={runTab.sendValue}
           />
         </div>
       </div>
diff --git a/libs/remix-ui/run-tab/src/lib/types/index.ts b/libs/remix-ui/run-tab/src/lib/types/index.ts
index 988a9bc593..f2ee2762e5 100644
--- a/libs/remix-ui/run-tab/src/lib/types/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/index.ts
@@ -216,7 +216,8 @@ export interface InstanceContainerProps {
   gasEstimationPrompt: (msg: string) => JSX.Element,
   logBuilder: (msg: string) => JSX.Element,
   passphrasePrompt: (message: string) => JSX.Element,
-  mainnetPrompt: (tx: Tx, network: Network, amount: string, gasEstimation: string, gasFees: (maxFee: string, cb: (txFeeText: string, priceStatus: boolean) => void) => void, determineGasPrice: (cb: (txFeeText: string, gasPriceValue: string, gasPriceStatus: boolean) => void) => void) => JSX.Element
+  mainnetPrompt: (tx: Tx, network: Network, amount: string, gasEstimation: string, gasFees: (maxFee: string, cb: (txFeeText: string, priceStatus: boolean) => void) => void, determineGasPrice: (cb: (txFeeText: string, gasPriceValue: string, gasPriceStatus: boolean) => void) => void) => JSX.Element,
+  sendValue: string
 }
 
 export interface Modal {
@@ -285,5 +286,6 @@ export interface UdappProps {
     mainnetPrompt: MainnetPrompt,
     gasEstimationPrompt: (msg: string) => JSX.Element,
     passphrasePrompt: (msg: string) => JSX.Element) => void,
-  decodedResponse: any
+  decodedResponse: any,
+  sendValue: string
 }

From 74e47426cb7a56940e3c3f31712e073c6fa1bc9f Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Sat, 25 Dec 2021 21:57:36 +0100
Subject: [PATCH 131/168] Enable atAddress

---
 .../remix-ui/run-tab/src/lib/actions/index.ts | 49 ++++++++----------
 .../src/lib/components/contractDropdownUI.tsx | 33 ++++++++----
 .../src/lib/components/contractGUI.tsx        | 51 ++++++++++---------
 libs/remix-ui/run-tab/src/lib/run-tab.tsx     |  4 +-
 libs/remix-ui/run-tab/src/lib/types/index.ts  |  4 +-
 5 files changed, 78 insertions(+), 63 deletions(-)

diff --git a/libs/remix-ui/run-tab/src/lib/actions/index.ts b/libs/remix-ui/run-tab/src/lib/actions/index.ts
index 9c0570c127..26b7c29cf0 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/index.ts
@@ -7,7 +7,7 @@ import { addNewInstance, addProvider, clearAllInstances, displayNotification, di
 import { RunTab } from '../types/run-tab'
 import { CompilerAbstract } from '@remix-project/remix-solidity'
 import * as remixLib from '@remix-project/remix-lib'
-import { ContractData, FuncABI, MainnetPrompt, Network, Tx } from '../types'
+import { ContractData, FuncABI, MainnetPrompt } from '../types'
 
 const txFormat = remixLib.execution.txFormat
 declare global {
@@ -314,7 +314,8 @@ const loadContractFromAddress = (address, confirmCb, cb) => {
       try {
         abi = JSON.parse(plugin.editor.currentContent())
       } catch (e) {
-        // return cb('Failed to parse the current file as JSON ABI.')
+        // eslint-disable-next-line standard/no-callback-literal
+        return cb('Failed to parse the current file as JSON ABI.')
       }
       _paq.push(['trackEvent', 'udapp', 'AtAddressLoadWithABI'])
       cb(null, 'abi', abi)
@@ -551,34 +552,26 @@ export const clearInstances = () => {
   dispatch(clearAllInstances())
 }
 
-const loadAddress = () => {
+export const loadAddress = (contract: ContractData, address: string) => {
+  if (!contract) return dispatch(displayPopUp('No compiled contracts found.'))
   clearInstances()
+  loadContractFromAddress(address,
+    (cb) => {
+      dispatch(displayNotification('At Address', `Do you really want to interact with ${address} using the current ABI definition?`, 'OK', 'Cancel', cb, null))
+    },
+    (error, loadType, abi) => {
+      if (error) {
+        return dispatch(displayNotification('Alert', error, 'OK', null))
+      }
+      const compiler = plugin.REACT_API.contracts.contractList.find(item => item.alias === contract.name)
+      const contractData = getSelectedContract(contract.name, compiler.name)
 
-  // let address = this.atAddressButtonInput.value
-  // if (!ethJSUtil.isValidChecksumAddress(address)) {
-  //   addTooltip(yo`
-  //     <span>
-  //       It seems you are not using a checksumed address.
-  //       <br>A checksummed address is an address that contains uppercase letters, as specified in <a href="https://eips.ethereum.org/EIPS/eip-55" target="_blank">EIP-55</a>.
-  //       <br>Checksummed addresses are meant to help prevent users from sending transactions to the wrong address.
-  //     </span>`)
-  //   address = ethJSUtil.toChecksumAddress(address)
-  // }
-  // this.dropdownLogic.loadContractFromAddress(address,
-  //   (cb) => {
-  //     modalDialogCustom.confirm('At Address', `Do you really want to interact with ${address} using the current ABI definition?`, cb)
-  //   },
-  //   (error, loadType, abi) => {
-  //     if (error) {
-  //       return modalDialogCustom.alert(error)
-  //     }
-  //     if (loadType === 'abi') {
-  //       return this.event.trigger('newContractABIAdded', [abi, address])
-  //     }
-  //     var selectedContract = this.getSelectedContract()
-  //     addInstance({ contractData: selectedContract.object, address, name: contractObject.name })
-  //   }
-  // )
+      if (loadType === 'abi') {
+        return addInstance({ contractData, address, name: '<at address>' })
+      }
+      addInstance({ contractData, address, name: contract.name })
+    }
+  )
 }
 
 export const getContext = () => {
diff --git a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
index 3cd2f549ba..c4a7f04190 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
@@ -17,7 +17,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     title: 'address of contract',
     disabled: true
   })
-  const [address, setAddress] = useState<string>('')
+  const [loadedAddress, setLoadedAddress] = useState<string>('')
   const [contractOptions, setContractOptions] = useState<{title: string, disabled: boolean}>({
     title: 'Please compile *.sol file to deploy or access a contract',
     disabled: true
@@ -44,8 +44,8 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
   }, [props.exEnvironment])
 
   useEffect(() => {
-    if (!address || !ethJSUtil.isValidAddress(address)) enableAtAddress(false)
-  }, [address])
+    if (!loadFromAddress || !ethJSUtil.isValidAddress(loadedAddress)) enableAtAddress(false)
+  }, [loadedAddress])
 
   useEffect(() => {
     if (/.(.abi)$/.exec(currentFile)) {
@@ -78,6 +78,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
 
   useEffect(() => {
     if (selectedContract) {
+      console.log('contractList: ', contractList)
       const contract = contractList.find(contract => contract.alias === selectedContract)
 
       setLoadedContractData(props.getSelectedContract(selectedContract, contract.name))
@@ -93,7 +94,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     } else {
       setAtAddressOptions({
         disabled: true,
-        title: address ? '⚠ Compile *.sol file or select *.abi file.' : '⚠ Compile *.sol file or select *.abi file & then enter the address of deployed contract.'
+        title: loadedAddress ? '⚠ Compile *.sol file or select *.abi file.' : '⚠ Compile *.sol file or select *.abi file & then enter the address of deployed contract.'
       })
     }
   }
@@ -149,18 +150,23 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     if (!value) {
       enableAtAddress(false)
     } else {
-      if ((!contractOptions.disabled && loadType === 'sol') ||
-        loadType === 'abi') {
+      if (atAddressOptions.disabled && (loadType === 'sol' || loadType === 'abi')) {
         enableAtAddress(true)
       } else {
         enableAtAddress(false)
       }
     }
-    setAddress(value)
+    setLoadedAddress(value)
   }
 
   const loadFromAddress = () => {
-    // trigger dispatchLoadAddress
+    let address = loadedAddress
+
+    if (!ethJSUtil.isValidChecksumAddress(address)) {
+      props.tooltip(checkSumWarning())
+      address = ethJSUtil.toChecksumAddress(address)
+    }
+    props.loadAddress(loadedContractData, address)
   }
 
   const handleCheckedIPFS = () => {
@@ -174,6 +180,16 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     setSelectedContract(value)
   }
 
+  const checkSumWarning = () => {
+    return (
+      <span>
+        It seems you are not using a checksumed address.
+        <br />A checksummed address is an address that contains uppercase letters, as specified in <a href="https://eips.ethereum.org/EIPS/eip-55" target="_blank">EIP-55</a>.
+        <br />Checksummed addresses are meant to help prevent users from sending transactions to the wrong address.
+      </span>
+    )
+  }
+
   const isOverSizePrompt = () => {
     return (
       <div>Contract creation initialization returns data with length of more than 24576 bytes. The deployment will likely fails. <br />
@@ -228,7 +244,6 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
             placeholder="Load contract from Address"
             title="address of contract"
             onChange={atAddressChanged}
-            disabled={atAddressOptions.disabled}
           />
         </div>
       </div>
diff --git a/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
index 1b78f6f863..c24efb2dd2 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
@@ -15,8 +15,28 @@ export function ContractGUI (props: ContractGUIProps) {
     classList: string,
     dataId: string
   }>({ title: '', content: '', classList: '', dataId: '' })
+  const [clipboardContent, setClipboardContent] = useState<string>('')
   const multiFields = useRef<Array<HTMLInputElement | null>>([])
 
+  useEffect(() => {
+    const multiString = getMultiValsString()
+    const multiJSON = JSON.parse('[' + multiString + ']')
+    let encodeObj
+
+    if (props.evmBC) {
+      encodeObj = txFormat.encodeData(props.funcABI, multiJSON, props.evmBC)
+    } else {
+      encodeObj = txFormat.encodeData(props.funcABI, multiJSON, null)
+    }
+    if (encodeObj.error) {
+      console.error(encodeObj.error)
+      // throw new Error(encodeObj.error)
+      setClipboardContent(encodeObj.error)
+    } else {
+      setClipboardContent(encodeObj.data)
+    }
+  }, [])
+
   useEffect(() => {
     if (props.title) {
       setTitle(props.title)
@@ -79,10 +99,12 @@ export function ContractGUI (props: ContractGUIProps) {
       valArrayTest.push(elVal)
       elVal = elVal.replace(/(^|,\s+|,)(\d+)(\s+,|,|$)/g, '$1"$2"$3') // replace non quoted number by quoted number
       elVal = elVal.replace(/(^|,\s+|,)(0[xX][0-9a-fA-F]+)(\s+,|,|$)/g, '$1"$2"$3') // replace non quoted hex string by quoted hex string
-      try {
-        JSON.parse(elVal)
-      } catch (e) {
-        elVal = '"' + elVal + '"'
+      if (elVal) {
+        try {
+          JSON.parse(elVal)
+        } catch (e) {
+          elVal = '"' + elVal + '"'
+        }
       }
       ret += elVal
     }
@@ -112,25 +134,6 @@ export function ContractGUI (props: ContractGUIProps) {
     }
   }
 
-  const clipboardContent = () => {
-    const multiString = getMultiValsString()
-    const multiJSON = JSON.parse('[' + multiString + ']')
-    let encodeObj
-
-    if (props.evmBC) {
-      encodeObj = txFormat.encodeData(props.funcABI, multiJSON, props.evmBC)
-    } else {
-      encodeObj = txFormat.encodeData(props.funcABI, multiJSON, null)
-    }
-    if (encodeObj.error) {
-      console.error(encodeObj.error)
-      // throw new Error(encodeObj.error)
-      return encodeObj.error
-    } else {
-      return encodeObj.data
-    }
-  }
-
   const handleActionClick = () => {
     props.clickCallBack(props.funcABI.inputs, basicInput)
   }
@@ -185,7 +188,7 @@ export function ContractGUI (props: ContractGUIProps) {
             })}
           </div>
           <div className="udapp_group udapp_multiArg">
-            <CopyToClipboard content={clipboardContent()} tip='Encode values of input fields & copy to clipboard' icon='fa-clipboard' direction={'left'} />
+            <CopyToClipboard content={clipboardContent} tip='Encode values of input fields & copy to clipboard' icon='fa-clipboard' direction={'left'} />
             <button onClick={handleExpandMultiClick} title={buttonOptions.title} data-id={buttonOptions.dataId} className={`udapp_instanceButton ${buttonOptions.classList}`}>{ buttonOptions.content }</button>
           </div>
         </div>
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
index 68f837858b..c0505a202f 100644
--- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -22,7 +22,7 @@ import {
   updateMaxFee, updateMaxPriorityFee,
   updateTxFeeContent, clearInstances,
   removeInstance, getContext,
-  runTransactions
+  runTransactions, loadAddress
 } from './actions'
 import './css/run-tab.css'
 import { PublishToStorage } from '@remix-ui/publish-to-storage'
@@ -224,6 +224,8 @@ export function RunTabUI (props: RunTabProps) {
             logBuilder={logBuilder}
             passphrasePrompt={passphrasePrompt}
             mainnetPrompt={mainnetPrompt}
+            tooltip={toast}
+            loadAddress={loadAddress}
           />
           <RecorderUI />
           <InstanceContainerUI
diff --git a/libs/remix-ui/run-tab/src/lib/types/index.ts b/libs/remix-ui/run-tab/src/lib/types/index.ts
index f2ee2762e5..b86ee50846 100644
--- a/libs/remix-ui/run-tab/src/lib/types/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/index.ts
@@ -180,7 +180,9 @@ export interface ContractDropdownProps {
   gasEstimationPrompt: (msg: string) => JSX.Element,
   logBuilder: (msg: string) => JSX.Element,
   passphrasePrompt: (message: string) => JSX.Element,
-  mainnetPrompt: (tx: Tx, network: Network, amount: string, gasEstimation: string, gasFees: (maxFee: string, cb: (txFeeText: string, priceStatus: boolean) => void) => void, determineGasPrice: (cb: (txFeeText: string, gasPriceValue: string, gasPriceStatus: boolean) => void) => void) => JSX.Element
+  mainnetPrompt: (tx: Tx, network: Network, amount: string, gasEstimation: string, gasFees: (maxFee: string, cb: (txFeeText: string, priceStatus: boolean) => void) => void, determineGasPrice: (cb: (txFeeText: string, gasPriceValue: string, gasPriceStatus: boolean) => void) => void) => JSX.Element,
+  tooltip: (toasterMsg: string | JSX.Element) => void,
+  loadAddress: (contract: ContractData, address: string) => void
 }
 
 export interface RecorderProps {

From 9c74c56ff70ab3e1c1193de2406f0a6bec61df1a Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Tue, 28 Dec 2021 15:02:00 +0100
Subject: [PATCH 132/168] Udapp recorder module

---
 apps/remix-ide/src/app/udapp/run-tab.js       | 107 +---------------
 .../remix-ui/run-tab/src/lib/actions/index.ts | 116 +++++++++++++++---
 .../run-tab/src/lib/actions/payload.ts        |  22 +++-
 .../src/lib/components/contractDropdownUI.tsx |  21 ----
 .../lib/components/instanceContainerUI.tsx    |   2 +-
 .../src/lib/components/recorderCardUI.tsx     |  17 +--
 .../run-tab/src/lib/components/scenario.tsx   |  22 ++++
 .../run-tab/src/lib/components/settingsUI.tsx |  24 ----
 .../src/lib/components/universalDappUI.tsx    |  29 ++++-
 .../run-tab/src/lib/reducers/runTab.ts        |  51 +++++++-
 libs/remix-ui/run-tab/src/lib/run-tab.tsx     |  20 ++-
 libs/remix-ui/run-tab/src/lib/types/index.ts  |  23 ++--
 .../run-tab/src/lib/types/recorder.d.ts       |  15 +++
 .../run-tab/src/lib/types/run-tab.d.ts        |   2 +
 14 files changed, 269 insertions(+), 202 deletions(-)
 create mode 100644 libs/remix-ui/run-tab/src/lib/components/scenario.tsx
 create mode 100644 libs/remix-ui/run-tab/src/lib/types/recorder.d.ts

diff --git a/apps/remix-ide/src/app/udapp/run-tab.js b/apps/remix-ide/src/app/udapp/run-tab.js
index b0859cbbb6..40db3bdb2b 100644
--- a/apps/remix-ide/src/app/udapp/run-tab.js
+++ b/apps/remix-ide/src/app/udapp/run-tab.js
@@ -6,19 +6,10 @@ import * as packageJson from '../../../../../package.json'
 
 const yo = require('yo-yo')
 const EventManager = require('../../lib/events')
-const Card = require('../ui/card')
-
-const css = require('../tabs/styles/run-tab-styles')
-const SettingsUI = require('../tabs/runTab/settings.js')
 const Recorder = require('../tabs/runTab/model/recorder.js')
-const RecorderUI = require('../tabs/runTab/recorder.js')
-const DropdownLogic = require('../tabs/runTab/model/dropdownlogic.js')
-const ContractDropdownUI = require('../tabs/runTab/contractDropdown.js')
 const toaster = require('../ui/tooltip')
 const _paq = window._paq = window._paq || []
 
-const UniversalDAppUI = require('../ui/universal-dapp-ui')
-
 const profile = {
   name: 'udapp',
   displayName: 'Deploy & run transactions',
@@ -45,6 +36,7 @@ export class RunTab extends ViewPlugin {
     this.compilersArtefacts = compilersArtefacts
     this.networkModule = networkModule
     this.fileProvider = fileProvider
+    this.recorder = new Recorder(blockchain)
     this.REACT_API = {}
     this.setupEvents()
     this.el = document.createElement('div')
@@ -62,14 +54,11 @@ export class RunTab extends ViewPlugin {
 
   getSettings () {
     return new Promise((resolve, reject) => {
-      if (!this.container) reject(new Error('UI not ready'))
-      else {
-        resolve({
-          selectedAccount: this.settingsUI.getSelectedAccount(),
-          selectedEnvMode: this.blockchain.getProvider(),
-          networkEnvironment: this.container.querySelector('*[data-id="settingsNetworkEnv"]').textContent
-        })
-      }
+      resolve({
+        selectedAccount: this.REACT_API.accounts.selectedAccount,
+        selectedEnvMode: this.REACT_API.selectExEnv,
+        networkEnvironment: this.REACT_API.networkName
+      })
     })
   }
 
@@ -108,92 +97,8 @@ export class RunTab extends ViewPlugin {
     return this.blockchain.pendingTransactionsCount()
   }
 
-  renderSettings () {
-    this.settingsUI = new SettingsUI(this.blockchain, this.networkModule)
-
-    this.settingsUI.event.register('clearInstance', () => {
-      this.event.trigger('clearInstance', [])
-    })
-  }
-
-  renderDropdown (udappUI, fileManager, compilersArtefacts, config, editor, logCallback) {
-    const dropdownLogic = new DropdownLogic(compilersArtefacts, config, editor, this)
-    this.contractDropdownUI = new ContractDropdownUI(this.blockchain, dropdownLogic, logCallback, this)
-
-    fileManager.events.on('currentFileChanged', this.contractDropdownUI.changeCurrentFile.bind(this.contractDropdownUI))
-
-    this.contractDropdownUI.event.register('clearInstance', () => {
-      const noInstancesText = this.noInstancesText
-      if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) }
-    })
-    this.contractDropdownUI.event.register('newContractABIAdded', (abi, address) => {
-      this.instanceContainer.appendChild(udappUI.renderInstanceFromABI(abi, address, '<at address>'))
-    })
-    this.contractDropdownUI.event.register('newContractInstanceAdded', (contractObject, address, value) => {
-      this.instanceContainer.appendChild(udappUI.renderInstance(contractObject, address, value))
-    })
-  }
-
-  renderRecorder (udappUI, fileManager, config, logCallback) {
-    this.recorderCount = yo`<span>0</span>`
-
-    const recorder = new Recorder(this.blockchain)
-    recorder.event.register('recorderCountChange', (count) => {
-      this.recorderCount.innerText = count
-    })
-    this.event.register('clearInstance', recorder.clearAll.bind(recorder))
-
-    this.recorderInterface = new RecorderUI(this.blockchain, fileManager, recorder, logCallback, config)
-
-    this.recorderInterface.event.register('newScenario', (abi, address, contractName) => {
-      var noInstancesText = this.noInstancesText
-      if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) }
-      this.instanceContainer.appendChild(udappUI.renderInstanceFromABI(abi, address, contractName))
-    })
-
-    this.recorderInterface.render()
-  }
-
-  renderRecorderCard () {
-    const collapsedView = yo`
-      <div class="d-flex flex-column">
-        <div class="ml-2 badge badge-pill badge-primary" title="The number of recorded transactions">${this.recorderCount}</div>
-      </div>`
-
-    const expandedView = yo`
-      <div class="d-flex flex-column">
-        <div class="${css.recorderDescription} mt-2">
-          All transactions (deployed contracts and function executions) in this environment can be saved and replayed in
-          another environment. e.g Transactions created in Javascript VM can be replayed in the Injected Web3.
-        </div>
-        <div class="${css.transactionActions}">
-          ${this.recorderInterface.recordButton}
-          ${this.recorderInterface.runButton}
-          </div>
-        </div>
-      </div>`
-
-    this.recorderCard = new Card({}, {}, { title: 'Transactions recorded', collapsedView: collapsedView })
-    this.recorderCard.event.register('expandCollapseCard', (arrow, body, status) => {
-      body.innerHTML = ''
-      status.innerHTML = ''
-      if (arrow === 'down') {
-        status.appendChild(collapsedView)
-        body.appendChild(expandedView)
-      } else if (arrow === 'up') {
-        status.appendChild(collapsedView)
-      }
-    })
-  }
-
   render () {
     return this.el
-    this.udappUI = new UniversalDAppUI(this.blockchain, this.logCallback)
-    this.renderSettings()
-    this.renderDropdown(this.udappUI, this.fileManager, this.compilersArtefacts, this.config, this.editor, this.logCallback)
-    this.renderRecorder(this.udappUI, this.fileManager, this.config, this.logCallback)
-    this.renderRecorderCard()
-    return this.renderContainer()
   }
 
   renderComponent () {
diff --git a/libs/remix-ui/run-tab/src/lib/actions/index.ts b/libs/remix-ui/run-tab/src/lib/actions/index.ts
index 26b7c29cf0..abd2f3be6e 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/index.ts
@@ -2,8 +2,8 @@
 import React from 'react'
 import * as ethJSUtil from 'ethereumjs-util'
 import Web3 from 'web3'
-import { addressToString, shortenAddress } from '@remix-ui/helper'
-import { addNewInstance, addProvider, clearAllInstances, displayNotification, displayPopUp, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, fetchContractListSuccess, hidePopUp, removeExistingInstance, removeProvider, setBaseFeePerGas, setConfirmSettings, setCurrentFile, setDecodedResponse, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setGasPrice, setGasPriceStatus, setIpfsCheckedState, setLoadType, setMatchPassphrase, setMaxFee, setMaxPriorityFee, setNetworkName, setPassphrase, setSelectedAccount, setSendUnit, setSendValue, setTxFeeContent } from './payload'
+import { addressToString, createNonClashingNameAsync, shortenAddress } from '@remix-ui/helper'
+import { addNewInstance, addProvider, clearAllInstances, clearRecorderCount, displayNotification, displayPopUp, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, fetchContractListSuccess, hidePopUp, removeExistingInstance, removeProvider, setBaseFeePerGas, setConfirmSettings, setCurrentFile, setDecodedResponse, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setGasPrice, setGasPriceStatus, setIpfsCheckedState, setLoadType, setMatchPassphrase, setMaxFee, setMaxPriorityFee, setNetworkName, setPassphrase, setPathToScenario, setRecorderCount, setSelectedAccount, setSendUnit, setSendValue, setTxFeeContent } from './payload'
 import { RunTab } from '../types/run-tab'
 import { CompilerAbstract } from '@remix-project/remix-solidity'
 import * as remixLib from '@remix-project/remix-lib'
@@ -92,21 +92,16 @@ const setupEvents = () => {
 
   plugin.on('manager', 'pluginDeactivated', removePluginProvider.bind(plugin))
 
-  plugin.on('solidity', 'compilationFinished', (file, source, languageVersion, data) =>
-    broadcastCompilationResult(file, source, languageVersion, data)
-  )
-  plugin.on('vyper', 'compilationFinished', (file, source, languageVersion, data) =>
-    broadcastCompilationResult(file, source, languageVersion, data)
-  )
-  plugin.on('lexon', 'compilationFinished', (file, source, languageVersion, data) =>
-    broadcastCompilationResult(file, source, languageVersion, data)
-  )
-  plugin.on('yulp', 'compilationFinished', (file, source, languageVersion, data) =>
-    broadcastCompilationResult(file, source, languageVersion, data)
-  )
-  plugin.on('optimism-compiler', 'compilationFinished', (file, source, languageVersion, data) =>
-    broadcastCompilationResult(file, source, languageVersion, data)
-  )
+  plugin.on('solidity', 'compilationFinished', (file, source, languageVersion, data) => broadcastCompilationResult(file, source, languageVersion, data))
+
+  plugin.on('vyper', 'compilationFinished', (file, source, languageVersion, data) => broadcastCompilationResult(file, source, languageVersion, data))
+
+  plugin.on('lexon', 'compilationFinished', (file, source, languageVersion, data) => broadcastCompilationResult(file, source, languageVersion, data))
+
+  plugin.on('yulp', 'compilationFinished', (file, source, languageVersion, data) => broadcastCompilationResult(file, source, languageVersion, data))
+
+  plugin.on('optimism-compiler', 'compilationFinished', (file, source, languageVersion, data) => broadcastCompilationResult(file, source, languageVersion, data))
+
   plugin.fileManager.events.on('currentFileChanged', (currentFile: string) => {
     if (/.(.abi)$/.exec(currentFile)) {
       dispatch(setLoadType('abi'))
@@ -119,6 +114,14 @@ const setupEvents = () => {
       dispatch(setLoadType('other'))
     }
   })
+
+  plugin.recorder.event.register('recorderCountChange', (count) => {
+    dispatch(setRecorderCount(count))
+  })
+
+  plugin.event.register('cleared', () => {
+    dispatch(clearRecorderCount())
+  })
 }
 
 const updateAccountBalances = () => {
@@ -540,7 +543,7 @@ export const updateTxFeeContent = (content: string) => {
   dispatch(setTxFeeContent(content))
 }
 
-const addInstance = (instance: { contractData: ContractData, address: string, name: string }) => {
+const addInstance = (instance: { contractData?: ContractData, address: string, name: string, abi?: any, decodedResponse?: any }) => {
   dispatch(addNewInstance(instance))
 }
 
@@ -550,6 +553,7 @@ export const removeInstance = (index: number) => {
 
 export const clearInstances = () => {
   dispatch(clearAllInstances())
+  dispatch(clearRecorderCount())
 }
 
 export const loadAddress = (contract: ContractData, address: string) => {
@@ -595,10 +599,9 @@ export const runTransactions = (
   if (lookupOnly) callinfo = 'call'
   else if (funcABI.type === 'fallback' || funcABI.type === 'receive') callinfo = 'lowLevelInteracions'
   else callinfo = 'transact'
-
   _paq.push(['trackEvent', 'udapp', callinfo, plugin.blockchain.getCurrentNetworkStatus().network.name])
-  const params = funcABI.type !== 'fallback' ? inputsValues : ''
 
+  const params = funcABI.type !== 'fallback' ? inputsValues : ''
   plugin.blockchain.runOrCallContractMethod(
     contractName,
     contractABI,
@@ -630,3 +633,76 @@ export const runTransactions = (
     }
   )
 }
+
+const saveScenario = (promptCb, cb) => {
+  const txJSON = JSON.stringify(plugin.recorder.getAll(), null, 2)
+  const path = plugin.fileManager.currentPath()
+
+  promptCb(path, async () => {
+    const fileProvider = plugin.fileManager.fileProviderOf(path)
+
+    if (!fileProvider) return
+    const newFile = path + '/' + plugin.REACT_API.recorder.pathToScenario
+    try {
+      console.log('newFile: ', newFile)
+      const newPath = await createNonClashingNameAsync(newFile, plugin.fileManager)
+      console.log('newPath: ', newPath)
+      // eslint-disable-next-line standard/no-callback-literal
+      if (!fileProvider.set(newPath, txJSON)) return cb('Failed to create file ' + newFile)
+      plugin.fileManager.open(newFile)
+    } catch (error) {
+      // eslint-disable-next-line standard/no-callback-literal
+      if (error) return cb('Failed to create file. ' + newFile + ' ' + error)
+    }
+  })
+}
+
+export const storeScenario = (prompt: (msg: string) => JSX.Element) => {
+  saveScenario(
+    (path, cb) => {
+      dispatch(displayNotification('Save transactions as scenario', prompt('Transactions will be saved in a file under ' + path), 'Ok', 'Cancel', cb, null))
+    },
+    (error) => {
+      if (error) return dispatch(displayNotification('Alert', error, 'Ok', null))
+    }
+  )
+}
+
+const runScenario = (file: string, gasEstimationPrompt: (msg: string) => JSX.Element, passphrasePrompt: (msg: string) => JSX.Element, confirmDialogContent: MainnetPrompt, logBuilder: (msg: string) => JSX.Element) => {
+  if (!file) return dispatch(displayNotification('Alert', 'Unable to run scenerio, no specified scenario file', 'Ok', null))
+
+  plugin.fileManager.readFile(file).then((json) => {
+    // TODO: there is still a UI dependency to remove here, it's still too coupled at this point to remove easily
+    plugin.recorder.runScenario(
+      json,
+      (error, continueTxExecution, cancelCb) => {
+        continueHandler(gasEstimationPrompt, error, continueTxExecution, cancelCb)
+      }, (okCb, cancelCb) => {
+        promptHandler(passphrasePrompt, okCb, cancelCb)
+      }, (msg) => {
+        dispatch(displayNotification('Alert', msg, 'Ok', null))
+      }, (network, tx, gasEstimation, continueTxExecution, cancelCb) => {
+        confirmationHandler(confirmDialogContent, network, tx, gasEstimation, continueTxExecution, cancelCb)
+      }, (msg: string) => {
+        const log = logBuilder(msg)
+
+        return terminalLogger(log)
+      }, (error, abi, address, contractName) => {
+        if (error) {
+          return dispatch(displayNotification('Alert', error, 'Ok', null))
+        }
+        addInstance({ name: contractName, address, abi })
+      })
+  }).catch((error) => dispatch(displayNotification('Alert', error, 'Ok', null)))
+}
+
+export const runCurrentScenario = (gasEstimationPrompt: (msg: string) => JSX.Element, passphrasePrompt: (msg: string) => JSX.Element, confirmDialogContent: MainnetPrompt, logBuilder: (msg: string) => JSX.Element) => {
+  const file = plugin.config.get('currentFile')
+
+  if (!file) return dispatch(displayNotification('Alert', 'A scenario file has to be selected', 'Ok', null))
+  runScenario(file, gasEstimationPrompt, passphrasePrompt, confirmDialogContent, logBuilder)
+}
+
+export const updateScenarioPath = (path: string) => {
+  dispatch(setPathToScenario(path))
+}
diff --git a/libs/remix-ui/run-tab/src/lib/actions/payload.ts b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
index c15579e08c..781da041ec 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/payload.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
@@ -220,7 +220,7 @@ export const setTxFeeContent = (content: string) => {
   }
 }
 
-export const addNewInstance = (instance: { contractData: ContractData, address: string, name: string }) => {
+export const addNewInstance = (instance: { contractData?: ContractData, address: string, name: string, abi?: any }) => {
   return {
     type: 'ADD_INSTANCE',
     payload: instance
@@ -249,3 +249,23 @@ export const setDecodedResponse = (index: number, decodedResponse) => {
     }
   }
 }
+
+export const setPathToScenario = (path: string) => {
+  return {
+    type: 'SET_PATH_TO_SCENARIO',
+    payload: path
+  }
+}
+
+export const setRecorderCount = (count: number) => {
+  return {
+    type: 'SET_RECORDER_COUNT',
+    payload: count
+  }
+}
+
+export const clearRecorderCount = () => {
+  return {
+    type: 'CLEAR_RECORDER_COUNT'
+  }
+}
diff --git a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
index c4a7f04190..269c55f09c 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
@@ -78,7 +78,6 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
 
   useEffect(() => {
     if (selectedContract) {
-      console.log('contractList: ', contractList)
       const contract = contractList.find(contract => contract.alias === selectedContract)
 
       setLoadedContractData(props.getSelectedContract(selectedContract, contract.name))
@@ -124,26 +123,6 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     props.createInstance(loadedContractData, props.gasEstimationPrompt, props.passphrasePrompt, props.logBuilder, props.publishToStorage, props.mainnetPrompt, isOverSizePrompt, args)
   }
 
-  //   listenToContextChange () {
-  //     this.blockchain.event.register('networkStatus', ({ error, network }) => {
-  //       if (error) {
-  //         console.log('can\'t detect network')
-  //         return
-  //       }
-  //       this.exEnvironment = this.blockchain.getProvider()
-  //       this.networkName = network.name
-
-  //       const savedConfig = window.localStorage.getItem(`ipfs/${this.exEnvironment}/${this.networkName}`)
-
-  //       // check if an already selected option exist else use default workflow
-  //       if (savedConfig !== null) {
-  //         this.setCheckedState(savedConfig)
-  //       } else {
-  //         this.setCheckedState(this.networkName === 'Main')
-  //       }
-  //     })
-  //   }
-
   const atAddressChanged = (event) => {
     const value = event.target.value
 
diff --git a/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx b/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
index 92024045eb..764b5febb4 100644
--- a/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
@@ -24,6 +24,7 @@ export function InstanceContainerUI (props: InstanceContainerProps) {
       { instanceList.length > 0
         ? <div> { props.instances.instanceList.map((instance, index) => {
           return <UniversalDappUI
+            key={index}
             instance={instance}
             context={props.getContext()}
             removeInstance={props.removeInstance}
@@ -33,7 +34,6 @@ export function InstanceContainerUI (props: InstanceContainerProps) {
             passphrasePrompt={props.passphrasePrompt}
             mainnetPrompt={props.mainnetPrompt}
             runTransactions={props.runTransactions}
-            decodedResponse={instance.decodedResponse || {}}
             sendValue={props.sendValue}
           />
         }) }
diff --git a/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx b/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx
index 8ac3080797..2af2f05d3a 100644
--- a/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx
@@ -23,28 +23,17 @@ export function RecorderUI (props: RecorderProps) {
   }
 
   const triggerRecordButton = () => {
-    // dispatch saveScenario()
-    // this.saveScenario(
-    //   (path, cb) => {
-    //     modalDialogCustom.prompt('Save transactions as scenario', 'Transactions will be saved in a file under ' + path, 'scenario.json', cb)
-    //   },
-    //   (error) => {
-    //     if (error) return modalDialogCustom.alert(error)
-    //   }
-    // )
+    props.storeScenario(props.scenarioPrompt)
   }
 
   const handleClickRunButton = () => {
-    // dispatchRunButtonClickHandler
-    // const file = this.config.get('currentFile')
-    // if (!file) return modalDialogCustom.alert('A scenario file has to be selected')
-    // this.runScenario(file)
+    props.runCurrentScenario(props.gasEstimationPrompt, props.passphrasePrompt, props.mainnetPrompt, props.logBuilder)
   }
 
   return (
     <div className="udapp_cardContainer list-group-item border-0">
       <TreeView>
-        <TreeViewItem label={card('Transactions recorded', 0)} showIcon={false} labelClass="ml-n1">
+        <TreeViewItem label={card('Transactions recorded', props.count)} showIcon={false} labelClass="ml-n1">
           <div className="d-flex flex-column">
             <div className="udapp_recorderDescription mt-2">
               All transactions (deployed contracts and function executions) in this environment can be saved and replayed in
diff --git a/libs/remix-ui/run-tab/src/lib/components/scenario.tsx b/libs/remix-ui/run-tab/src/lib/components/scenario.tsx
new file mode 100644
index 0000000000..689fd116b3
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/components/scenario.tsx
@@ -0,0 +1,22 @@
+// eslint-disable-next-line no-use-before-define
+import React from 'react'
+
+interface ScenarioProps {
+  message: string,
+  setScenarioPath: (path: string) => void,
+  defaultValue?: string
+}
+
+export function ScenarioPrompt (props: ScenarioProps) {
+  const handleScenarioPath = (e) => {
+    props.setScenarioPath(e.target.value)
+  }
+
+  return (
+    <div> { props.message }
+      <div>
+        <input id="prompt_text" type="text" name='prompt_text' className="form-control" style={{ width: '100%' }} onInput={handleScenarioPath} data-id='modalDialogCustomPromptText' defaultValue={props.defaultValue} />
+      </div>
+    </div>
+  )
+}
diff --git a/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx b/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
index bbd2f7840c..1d812ed6a3 100644
--- a/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
@@ -8,32 +8,8 @@ import { GasPriceUI } from './gasPrice'
 import { ValueUI } from './value'
 
 export function SettingsUI (props: SettingsProps) {
-  // constructor () {
-  //   this.blockchain = blockchain
-  //   this.event = new EventManager()
-  //   this._components = {}
-
-  //   this._components = {
-  //     registry: globalRegistry,
-  //     networkModule: networkModule
-  //   }
-  //   this._components.registry = globalRegistry
-  //   this._deps = {
-  //     config: this._components.registry.get('config').api
-  //   }
-
   //   this._deps.config.events.on('settings/personal-mode_changed', this.onPersonalChange.bind(this))
 
-  // /**
-  //  * generate a value used by the env dropdown list.
-  //  * @return {String} - can return 'vm-berlin, 'vm-london', 'injected' or 'web3'
-  //  */
-  // _getProviderDropdownValue () {
-  //   const provider = this.blockchain.getProvider()
-  //   const fork = this.blockchain.getCurrentFork()
-  //   return provider === 'vm' ? provider + '-' + fork : provider
-  // }
-
   return (
     <div className="udapp_settings">
       <EnvironmentUI setWeb3Endpoint={props.setWeb3Endpoint} selectedEnv={props.selectExEnv} providers={props.providers} setExecutionContext={props.setExecutionContext} externalEndpoint={props.externalEndpoint} />
diff --git a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
index 291e71eb43..de6014711c 100644
--- a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
@@ -18,16 +18,18 @@ export function UniversalDappUI (props: UdappProps) {
   const [expandPath, setExpandPath] = useState<string[]>([])
   const [llIError, setLlIError] = useState<string>('')
   const [calldataValue, setCalldataValue] = useState<string>('')
+  const [inputs, setInputs] = useState<string>(null)
+  const [evmBC, setEvmBC] = useState(null)
 
   useEffect(() => {
-    if (!props.abi) {
+    if (!props.instance.abi) {
       const abi = txHelper.sortAbiFunction(props.instance.contractData.abi)
 
       setContractABI(abi)
     } else {
-      setContractABI(props.abi)
+      setContractABI(props.instance.abi)
     }
-  }, [props.abi])
+  }, [props.instance.abi])
 
   useEffect(() => {
     if (props.instance.address) {
@@ -39,6 +41,13 @@ export function UniversalDappUI (props: UdappProps) {
     }
   }, [props.instance.address])
 
+  useEffect(() => {
+    if (props.instance.contractData) {
+      setInputs(props.instance.contractData.getConstructorInputs())
+      setEvmBC(props.instance.contractData.bytecodeObject)
+    }
+  }, [props.instance.contractData])
+
   const sendData = () => {
     setLlIError('')
     const fallback = txHelper.getFallbackInterface(contractABI)
@@ -227,14 +236,22 @@ export function UniversalDappUI (props: UdappProps) {
               const isConstant = funcABI.constant !== undefined ? funcABI.constant : false
               const lookupOnly = funcABI.stateMutability === 'view' || funcABI.stateMutability === 'pure' || isConstant
 
-              return <ContractGUI funcABI={funcABI} clickCallBack={(valArray: { name: string, type: string }[], inputsValues: string) => runTransaction(lookupOnly, funcABI, valArray, inputsValues)} inputs={props.instance.contractData.getConstructorInputs()} evmBC={props.instance.contractData.bytecodeObject} lookupOnly={lookupOnly} />
+              return <ContractGUI
+                funcABI={funcABI}
+                clickCallBack={(valArray: { name: string, type: string }[], inputsValues: string) => {
+                  runTransaction(lookupOnly, funcABI, valArray, inputsValues)
+                }}
+                inputs={inputs}
+                evmBC={evmBC}
+                lookupOnly={lookupOnly}
+              />
             })
           }
           <div className="udapp_value">
             <TreeView id="treeView">
               {
-                Object.keys(props.decodedResponse).map((innerkey) => {
-                  return renderData(props.decodedResponse[innerkey], props.decodedResponse, innerkey, innerkey)
+                Object.keys(props.instance.decodedResponse || {}).map((innerkey) => {
+                  return renderData(props.instance.decodedResponse[innerkey], props.instance.decodedResponse, innerkey, innerkey)
                 })
               }
             </TreeView>
diff --git a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
index f799deb707..6031b2177f 100644
--- a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
+++ b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
@@ -66,12 +66,17 @@ export interface RunTabState {
   gasPrice: string,
   instances: {
     instanceList: {
-      contractData: ContractData,
+      contractData?: ContractData,
       address: string,
       name: string,
-      decodedResponse?: any
+      decodedResponse?: any,
+      abi?: any
     }[],
     error: string
+  },
+  recorder: {
+    pathToScenario: string,
+    transactionCount: number
   }
 }
 
@@ -153,6 +158,10 @@ export const runTabInitialState: RunTabState = {
   instances: {
     instanceList: [],
     error: null
+  },
+  recorder: {
+    pathToScenario: 'scenario.json',
+    transactionCount: 0
   }
 }
 
@@ -534,7 +543,7 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
     }
 
     case 'ADD_INSTANCE': {
-      const payload: { contractData: ContractData, address: string, name: string } = action.payload
+      const payload: { contractData: ContractData, address: string, name: string, abi?: any, decodedResponse?: any } = action.payload
 
       return {
         ...state,
@@ -552,7 +561,7 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
         ...state,
         instances: {
           ...state.instances,
-          instanceList: state.instances.instanceList.filter((instance, index) => index !== payload)
+          instanceList: state.instances.instanceList.filter((_, index) => index !== payload)
         }
       }
     }
@@ -582,6 +591,40 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
       }
     }
 
+    case 'SET_PATH_TO_SCENARIO': {
+      const payload: string = action.payload
+
+      return {
+        ...state,
+        recorder: {
+          ...state.recorder,
+          pathToScenario: payload
+        }
+      }
+    }
+
+    case 'SET_RECORDER_COUNT': {
+      const payload: number = action.payload
+
+      return {
+        ...state,
+        recorder: {
+          ...state.recorder,
+          transactionCount: payload
+        }
+      }
+    }
+
+    case 'CLEAR_RECORDER_COUNT': {
+      return {
+        ...state,
+        recorder: {
+          ...state.recorder,
+          transactionCount: 0
+        }
+      }
+    }
+
     default:
       return state
   }
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
index c0505a202f..a974b2aab5 100644
--- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -22,12 +22,15 @@ import {
   updateMaxFee, updateMaxPriorityFee,
   updateTxFeeContent, clearInstances,
   removeInstance, getContext,
-  runTransactions, loadAddress
+  runTransactions, loadAddress,
+  storeScenario, runCurrentScenario,
+  updateScenarioPath
 } from './actions'
 import './css/run-tab.css'
 import { PublishToStorage } from '@remix-ui/publish-to-storage'
 import { PassphrasePrompt } from './components/passphrase'
 import { MainnetPrompt } from './components/mainnet'
+import { ScenarioPrompt } from './components/scenario'
 
 export function RunTabUI (props: RunTabProps) {
   const { plugin } = props
@@ -161,6 +164,10 @@ export function RunTabUI (props: RunTabProps) {
     return <PassphrasePrompt message={message} setPassphrase={setPassphrasePrompt} defaultValue={runTab.passphrase} />
   }
 
+  const scenarioPrompt = (message: string) => {
+    return <ScenarioPrompt message={message} setScenarioPath={updateScenarioPath} defaultValue={runTab.recorder.pathToScenario} />
+  }
+
   const mainnetPrompt = (tx: Tx, network: Network, amount: string, gasEstimation: string, gasFees: (maxFee: string, cb: (txFeeText: string, priceStatus: boolean) => void) => void, determineGasPrice: (cb: (txFeeText: string, gasPriceValue: string, gasPriceStatus: boolean) => void) => void) => {
     return <MainnetPrompt
       init={determineGasPrice}
@@ -227,7 +234,16 @@ export function RunTabUI (props: RunTabProps) {
             tooltip={toast}
             loadAddress={loadAddress}
           />
-          <RecorderUI />
+          <RecorderUI
+            gasEstimationPrompt={gasEstimationPrompt}
+            logBuilder={logBuilder}
+            passphrasePrompt={passphrasePrompt}
+            mainnetPrompt={mainnetPrompt}
+            storeScenario={storeScenario}
+            runCurrentScenario={runCurrentScenario}
+            scenarioPrompt={scenarioPrompt}
+            count={runTab.recorder.transactionCount}
+          />
           <InstanceContainerUI
             instances={runTab.instances}
             clearInstances={clearInstances}
diff --git a/libs/remix-ui/run-tab/src/lib/types/index.ts b/libs/remix-ui/run-tab/src/lib/types/index.ts
index b86ee50846..322dc04439 100644
--- a/libs/remix-ui/run-tab/src/lib/types/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/index.ts
@@ -1,4 +1,3 @@
-import { type } from 'os'
 import { RunTab } from './run-tab'
 export interface RunTabProps {
   plugin: RunTab
@@ -186,16 +185,24 @@ export interface ContractDropdownProps {
 }
 
 export interface RecorderProps {
-
+  storeScenario: (prompt: (msg: string) => JSX.Element) => void,
+  runCurrentScenario: (gasEstimationPrompt: (msg: string) => JSX.Element, passphrasePrompt: (msg: string) => JSX.Element, confirmDialogContent: MainnetPrompt, logBuilder: (msg: string) => JSX.Element) => void,
+  logBuilder: (msg: string) => JSX.Element,
+  mainnetPrompt: MainnetPrompt,
+  gasEstimationPrompt: (msg: string) => JSX.Element,
+  passphrasePrompt: (msg: string) => JSX.Element,
+  scenarioPrompt: (msg: string) => JSX.Element,
+  count: number
 }
 
 export interface InstanceContainerProps {
   instances: {
     instanceList: {
-      contractData: ContractData,
+      contractData?: ContractData,
       address: string,
       name: string,
-      decodedResponse?: any
+      decodedResponse?: any,
+      abi?: any
     }[],
     error: string
   },
@@ -263,12 +270,13 @@ export interface MainnetProps {
 
 export interface UdappProps {
   instance: {
-    contractData: ContractData,
+    contractData?: ContractData,
     address: string,
-    name: string
+    name: string,
+    decodedResponse?: any,
+    abi?: any
   },
   context: 'memory' | 'blockchain',
-  abi?: FuncABI[],
   removeInstance: (index: number) => void,
   index: number,
   gasEstimationPrompt: (msg: string) => JSX.Element,
@@ -288,6 +296,5 @@ export interface UdappProps {
     mainnetPrompt: MainnetPrompt,
     gasEstimationPrompt: (msg: string) => JSX.Element,
     passphrasePrompt: (msg: string) => JSX.Element) => void,
-  decodedResponse: any,
   sendValue: string
 }
diff --git a/libs/remix-ui/run-tab/src/lib/types/recorder.d.ts b/libs/remix-ui/run-tab/src/lib/types/recorder.d.ts
new file mode 100644
index 0000000000..44f79bda4f
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/types/recorder.d.ts
@@ -0,0 +1,15 @@
+export class Recorder {
+  constructor(blockchain: Blockchain);
+  event: any;
+  data: { _listen: boolean, _replay: boolean, journal: any[], _createdContracts: any, _createdContractsReverse: any, _usedAccounts: any, _abis: any, _contractABIReferences: any, _linkReferences: any };
+  setListen: (listen) => void;
+  extractTimestamp: (value) => any;
+  resolveAddress: (record, accounts, options) => any;
+  append: (timestamp, record) => any;
+  getAll: () => void;
+  clearAll: () => void;
+  run: (records, accounts, options, abis, linkReferences, confirmationCb, continueCb, promptCb, alertCb, logCallBack, newContractFn) => void
+  runScenario: (json, continueCb, promptCb, alertCb, confirmationCb, logCallBack, cb) => void
+}
+import { Blockchain } from "./blockchain";
+
diff --git a/libs/remix-ui/run-tab/src/lib/types/run-tab.d.ts b/libs/remix-ui/run-tab/src/lib/types/run-tab.d.ts
index a1c50e6495..37783c2119 100644
--- a/libs/remix-ui/run-tab/src/lib/types/run-tab.d.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/run-tab.d.ts
@@ -34,8 +34,10 @@ export class RunTab extends ViewPlugin {
     udappUI: any;
     renderComponent(): void;
     onReady(api: any): void;
+    recorder: Recorder;
 }
 import { ViewPlugin } from "@remixproject/engine-web/lib/view";
 import { Blockchain } from "./blockchain";
 import { RunTabState } from "../reducers/runTab";
+import { Recorder } from "./recorder";
 

From 9897d4f339fdefe69054dcabe8d7a3bb9a10367c Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Tue, 28 Dec 2021 16:23:15 +0100
Subject: [PATCH 133/168] Remove yo-yo dependency in run-tab

---
 apps/remix-ide/src/app/udapp/run-tab.js       | 16 +------
 .../remix-ui/run-tab/src/lib/actions/index.ts | 12 ++++-
 .../run-tab/src/lib/actions/payload.ts        | 15 ++++++-
 .../src/lib/components/environment.tsx        | 40 +----------------
 .../run-tab/src/lib/components/settingsUI.tsx |  2 +-
 .../run-tab/src/lib/components/web3Dialog.tsx | 44 +++++++++++++++++++
 .../run-tab/src/lib/reducers/runTab.ts        | 26 ++++++++++-
 libs/remix-ui/run-tab/src/lib/run-tab.tsx     | 24 +++++++++-
 libs/remix-ui/run-tab/src/lib/types/index.ts  |  7 ++-
 9 files changed, 122 insertions(+), 64 deletions(-)
 create mode 100644 libs/remix-ui/run-tab/src/lib/components/web3Dialog.tsx

diff --git a/apps/remix-ide/src/app/udapp/run-tab.js b/apps/remix-ide/src/app/udapp/run-tab.js
index 40db3bdb2b..5fe56053fa 100644
--- a/apps/remix-ide/src/app/udapp/run-tab.js
+++ b/apps/remix-ide/src/app/udapp/run-tab.js
@@ -4,10 +4,8 @@ import { RunTabUI } from '@remix-ui/run-tab'
 import { ViewPlugin } from '@remixproject/engine-web'
 import * as packageJson from '../../../../../package.json'
 
-const yo = require('yo-yo')
 const EventManager = require('../../lib/events')
 const Recorder = require('../tabs/runTab/model/recorder.js')
-const toaster = require('../ui/tooltip')
 const _paq = window._paq = window._paq || []
 
 const profile = {
@@ -65,18 +63,8 @@ export class RunTab extends ViewPlugin {
   async setEnvironmentMode (env) {
     const canCall = await this.askUserPermission('setEnvironmentMode', 'change the environment used')
     if (canCall) {
-      toaster(yo`
-        <div>
-          <i class="fas fa-exclamation-triangle text-danger mr-1"></i>
-          <span>
-            ${this.currentRequest.from}
-            <span class="font-weight-bold text-warning">
-              is changing your environment to
-            </span> ${env}
-          </span>
-        </div>
-      `, '', { time: 3000 })
-      this.settingsUI.setExecutionContext(env)
+      env = typeof env === 'string' ? { context: env } : env
+      this.emit('setEnvironmentModeReducer', env, this.currentRequest.from)
     }
   }
 
diff --git a/libs/remix-ui/run-tab/src/lib/actions/index.ts b/libs/remix-ui/run-tab/src/lib/actions/index.ts
index abd2f3be6e..16b74d1ba5 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/index.ts
@@ -3,7 +3,7 @@ import React from 'react'
 import * as ethJSUtil from 'ethereumjs-util'
 import Web3 from 'web3'
 import { addressToString, createNonClashingNameAsync, shortenAddress } from '@remix-ui/helper'
-import { addNewInstance, addProvider, clearAllInstances, clearRecorderCount, displayNotification, displayPopUp, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, fetchContractListSuccess, hidePopUp, removeExistingInstance, removeProvider, setBaseFeePerGas, setConfirmSettings, setCurrentFile, setDecodedResponse, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setGasPrice, setGasPriceStatus, setIpfsCheckedState, setLoadType, setMatchPassphrase, setMaxFee, setMaxPriorityFee, setNetworkName, setPassphrase, setPathToScenario, setRecorderCount, setSelectedAccount, setSendUnit, setSendValue, setTxFeeContent } from './payload'
+import { addNewInstance, addProvider, clearAllInstances, clearRecorderCount, displayNotification, displayPopUp, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, fetchContractListSuccess, hidePopUp, removeExistingInstance, removeProvider, setBaseFeePerGas, setConfirmSettings, setCurrentFile, setDecodedResponse, setEnvToasterContent, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setGasPrice, setGasPriceStatus, setIpfsCheckedState, setLoadType, setMatchPassphrase, setMaxFee, setMaxPriorityFee, setNetworkName, setPassphrase, setPathToScenario, setRecorderCount, setSelectedAccount, setSendUnit, setSendValue, setTxFeeContent, setWeb3Dialog } from './payload'
 import { RunTab } from '../types/run-tab'
 import { CompilerAbstract } from '@remix-project/remix-solidity'
 import * as remixLib from '@remix-project/remix-lib'
@@ -102,6 +102,11 @@ const setupEvents = () => {
 
   plugin.on('optimism-compiler', 'compilationFinished', (file, source, languageVersion, data) => broadcastCompilationResult(file, source, languageVersion, data))
 
+  plugin.on('udapp', 'setEnvironmentModeReducer', (env: { context: string, fork: string }, from: string) => {
+    dispatch(displayPopUp(plugin.REACT_API.envToasterContent(env, from)))
+    setExecutionContext(env, plugin.REACT_API.web3Dialog())
+  })
+
   plugin.fileManager.events.on('currentFileChanged', (currentFile: string) => {
     if (/.(.abi)$/.exec(currentFile)) {
       dispatch(setLoadType('abi'))
@@ -124,6 +129,11 @@ const setupEvents = () => {
   })
 }
 
+export const initWebDialogs = (envToasterContent: (env: { context: string, fork: string }, from: string) => void, web3Dialog: () => void) => async (dispatch: React.Dispatch<any>) => {
+  dispatch(setEnvToasterContent(envToasterContent))
+  dispatch(setWeb3Dialog)
+}
+
 const updateAccountBalances = () => {
   const accounts = plugin.REACT_API.accounts.loadedAccounts
 
diff --git a/libs/remix-ui/run-tab/src/lib/actions/payload.ts b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
index 781da041ec..7ba6172b32 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/payload.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
@@ -104,7 +104,7 @@ export const setExternalEndpoint = (endpoint: string) => {
   }
 }
 
-export const displayPopUp = (message: string) => {
+export const displayPopUp = (message: string | JSX.Element) => {
   return {
     type: 'DISPLAY_POPUP_MESSAGE',
     payload: message
@@ -269,3 +269,16 @@ export const clearRecorderCount = () => {
     type: 'CLEAR_RECORDER_COUNT'
   }
 }
+
+export const setEnvToasterContent = (content: (env: { context: string, fork: string }, from: string) => void) => {
+  return {
+    type: 'SET_ENV_TOASTER_CONTENT',
+    payload: content
+  }
+}
+
+export const setWeb3Dialog = () => {
+  return {
+    type: 'SET_WEB3_DIALOG'
+  }
+}
diff --git a/libs/remix-ui/run-tab/src/lib/components/environment.tsx b/libs/remix-ui/run-tab/src/lib/components/environment.tsx
index 3c91ed9741..852d376d8f 100644
--- a/libs/remix-ui/run-tab/src/lib/components/environment.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/environment.tsx
@@ -3,55 +3,17 @@ import React from 'react'
 import { EnvironmentProps } from '../types'
 
 export function EnvironmentUI (props: EnvironmentProps) {
-  const handleInputEndpoint = (e: any) => {
-    props.setWeb3Endpoint(e.target.value)
-  }
-
   const handleChangeExEnv = (env: string) => {
     const provider = props.providers.providerList.find(exEnv => exEnv.value === env)
     const fork = provider.fork // can be undefined if connected to an external source (web3 provider / injected)
     let context = provider.value
 
     context = context.startsWith('vm') ? 'vm' : context // context has to be 'vm', 'web3' or 'injected'
-    const displayContent = web3ProviderDialogBody()
+    const displayContent = props.web3ProviderDialog()
 
     props.setExecutionContext({ context, fork }, displayContent)
   }
 
-  const web3ProviderDialogBody = () => {
-    const thePath = '<path/to/local/folder/for/test/chain>'
-
-    return (
-      <>
-        <div className="">
-            Note: To use Geth & https://remix.ethereum.org, configure it to allow requests from Remix:(see <a href="https://geth.ethereum.org/docs/rpc/server" target="_blank">Geth Docs on rpc server</a>)
-          <div className="border p-1">geth --http --http.corsdomain https://remix.ethereum.org</div>
-          <br />
-          To run Remix & a local Geth test node, use this command: (see <a href="https://geth.ethereum.org/getting-started/dev-mode" target="_blank">Geth Docs on Dev mode</a>)
-          <div className="border p-1">geth --http --http.corsdomain="${window.origin}" --http.api web3,eth,debug,personal,net --vmdebug --datadir ${thePath} --dev console</div>
-          <br />
-          <br />
-          <b>WARNING:</b> It is not safe to use the --http.corsdomain flag with a wildcard: <b>--http.corsdomain *</b>
-          <br />
-          <br />For more info: <a href="https://remix-ide.readthedocs.io/en/latest/run.html#more-about-web3-provider" target="_blank">Remix Docs on Web3 Provider</a>
-          <br />
-          <br />
-          Web3 Provider Endpoint
-        </div>
-        <input
-          onInput={handleInputEndpoint}
-          type='text'
-          name='prompt_text'
-          id='prompt_text'
-          style={{ width: '100%' }}
-          className="form-control"
-          defaultValue={props.externalEndpoint}
-          data-id="modalDialogCustomPromptText"
-        />
-      </>
-    )
-  }
-
   return (
     <div className="udapp_crow">
       <label id="selectExEnv" className="udapp_settingsLabel">
diff --git a/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx b/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
index 1d812ed6a3..67c6c5396a 100644
--- a/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
@@ -12,7 +12,7 @@ export function SettingsUI (props: SettingsProps) {
 
   return (
     <div className="udapp_settings">
-      <EnvironmentUI setWeb3Endpoint={props.setWeb3Endpoint} selectedEnv={props.selectExEnv} providers={props.providers} setExecutionContext={props.setExecutionContext} externalEndpoint={props.externalEndpoint} />
+      <EnvironmentUI selectedEnv={props.selectExEnv} providers={props.providers} setExecutionContext={props.setExecutionContext} web3ProviderDialog={props.web3ProviderDialog} />
       <NetworkUI networkName={props.networkName} />
       <AccountUI personalMode={props.personalMode} selectExEnv={props.selectExEnv} accounts={props.accounts} setAccount={props.setAccount} createNewBlockchainAccount={props.createNewBlockchainAccount} setPassphrase={props.setPassphrase} setMatchPassphrase={props.setMatchPassphrase} tooltip={props.tooltip} modal={props.modal} signMessageWithAddress={props.signMessageWithAddress} passphrase={props.passphrase} />
       <GasPriceUI gasLimit={props.gasLimit} setGasFee={props.setGasFee} />
diff --git a/libs/remix-ui/run-tab/src/lib/components/web3Dialog.tsx b/libs/remix-ui/run-tab/src/lib/components/web3Dialog.tsx
new file mode 100644
index 0000000000..3ab0ea8c15
--- /dev/null
+++ b/libs/remix-ui/run-tab/src/lib/components/web3Dialog.tsx
@@ -0,0 +1,44 @@
+// eslint-disable-next-line no-use-before-define
+import React from 'react'
+
+interface web3ProviderDialogProps {
+  setWeb3Endpoint: (value: string) => void,
+  externalEndpoint: string
+}
+const thePath = '<path/to/local/folder/for/test/chain>'
+
+export function Web3ProviderDialog (props: web3ProviderDialogProps) {
+  const handleInputEndpoint = (e) => {
+    props.setWeb3Endpoint(e.target.value)
+  }
+
+  return (
+    <>
+      <div className="">
+          Note: To use Geth & https://remix.ethereum.org, configure it to allow requests from Remix:(see <a href="https://geth.ethereum.org/docs/rpc/server" target="_blank">Geth Docs on rpc server</a>)
+        <div className="border p-1">geth --http --http.corsdomain https://remix.ethereum.org</div>
+        <br />
+        To run Remix & a local Geth test node, use this command: (see <a href="https://geth.ethereum.org/getting-started/dev-mode" target="_blank">Geth Docs on Dev mode</a>)
+        <div className="border p-1">geth --http --http.corsdomain="{window.origin}" --http.api web3,eth,debug,personal,net --vmdebug --datadir {thePath} --dev console</div>
+        <br />
+        <br />
+        <b>WARNING:</b> It is not safe to use the --http.corsdomain flag with a wildcard: <b>--http.corsdomain *</b>
+        <br />
+        <br />For more info: <a href="https://remix-ide.readthedocs.io/en/latest/run.html#more-about-web3-provider" target="_blank">Remix Docs on Web3 Provider</a>
+        <br />
+        <br />
+        Web3 Provider Endpoint
+      </div>
+      <input
+        onInput={handleInputEndpoint}
+        type='text'
+        name='prompt_text'
+        id='prompt_text'
+        style={{ width: '100%' }}
+        className="form-control"
+        defaultValue={props.externalEndpoint}
+        data-id="modalDialogCustomPromptText"
+      />
+    </>
+  )
+}
diff --git a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
index 6031b2177f..f91240e2c5 100644
--- a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
+++ b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
@@ -77,7 +77,9 @@ export interface RunTabState {
   recorder: {
     pathToScenario: string,
     transactionCount: number
-  }
+  },
+  envToasterContent: (env: { context: string, fork: string }, from: string) => JSX.Element
+  web3Dialog: () => JSX.Element
 }
 
 export const runTabInitialState: RunTabState = {
@@ -162,7 +164,9 @@ export const runTabInitialState: RunTabState = {
   recorder: {
     pathToScenario: 'scenario.json',
     transactionCount: 0
-  }
+  },
+  envToasterContent: null,
+  web3Dialog: null
 }
 
 export const runTabReducer = (state: RunTabState = runTabInitialState, action: Action) => {
@@ -625,6 +629,24 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
       }
     }
 
+    case 'SET_ENV_TOASTER_CONTENT': {
+      const payload: (env: string, from: string) => JSX.Element = action.payload
+
+      return {
+        ...state,
+        envToasterContent: payload
+      }
+    }
+
+    case 'SET_WEB3_DIALOG': {
+      const payload: () => JSX.Element = action.payload
+
+      return {
+        ...state,
+        web3Dialog: payload
+      }
+    }
+
     default:
       return state
   }
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
index a974b2aab5..8630e23c7c 100644
--- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -24,13 +24,14 @@ import {
   removeInstance, getContext,
   runTransactions, loadAddress,
   storeScenario, runCurrentScenario,
-  updateScenarioPath
+  updateScenarioPath, initWebDialogs
 } from './actions'
 import './css/run-tab.css'
 import { PublishToStorage } from '@remix-ui/publish-to-storage'
 import { PassphrasePrompt } from './components/passphrase'
 import { MainnetPrompt } from './components/mainnet'
 import { ScenarioPrompt } from './components/scenario'
+import { Web3ProviderDialog } from './components/web3Dialog'
 
 export function RunTabUI (props: RunTabProps) {
   const { plugin } = props
@@ -58,6 +59,7 @@ export function RunTabUI (props: RunTabProps) {
 
   useEffect(() => {
     initRunTab(plugin)(dispatch)
+    initWebDialogs(envChangeNotification, web3Dialog)(dispatch)
   }, [plugin])
 
   useEffect(() => {
@@ -189,6 +191,24 @@ export function RunTabUI (props: RunTabProps) {
     />
   }
 
+  const envChangeNotification = (env: { context: string, fork: string }, from: string) => {
+    return (
+      <div>
+        <i className="fas fa-exclamation-triangle text-danger mr-1"></i>
+        <span>
+          {from}
+          <span className="font-weight-bold text-warning">
+            is changing your environment to
+          </span> {env}
+        </span>
+      </div>
+    )
+  }
+
+  const web3Dialog = () => {
+    return <Web3ProviderDialog externalEndpoint={runTab.externalEndpoint} setWeb3Endpoint={setWeb3Endpoint} />
+  }
+
   return (
     <Fragment>
       <div className="udapp_runTabView run-tab" id="runTabView" data-id="runTabView">
@@ -197,7 +217,6 @@ export function RunTabUI (props: RunTabProps) {
             networkName={runTab.networkName}
             personalMode={runTab.personalMode}
             selectExEnv={runTab.selectExEnv}
-            externalEndpoint={runTab.externalEndpoint}
             setWeb3Endpoint={setWeb3Endpoint}
             accounts={runTab.accounts}
             setAccount={setAccount}
@@ -215,6 +234,7 @@ export function RunTabUI (props: RunTabProps) {
             tooltip={toast}
             signMessageWithAddress={signMessageWithAddress}
             passphrase={runTab.passphrase}
+            web3ProviderDialog={web3Dialog}
           />
           <ContractDropdownUI
             exEnvironment={runTab.selectExEnv}
diff --git a/libs/remix-ui/run-tab/src/lib/types/index.ts b/libs/remix-ui/run-tab/src/lib/types/index.ts
index 322dc04439..78216a91ab 100644
--- a/libs/remix-ui/run-tab/src/lib/types/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/index.ts
@@ -35,18 +35,17 @@ export interface SettingsProps {
     error: string
   },
   setExecutionContext: (executionContext: { context: string, fork: string }, displayContent: JSX.Element) => void,
-  externalEndpoint: string,
   createNewBlockchainAccount: (cbMessage: JSX.Element) => void,
   setPassphrase: (passphrase: string) => void,
   setMatchPassphrase: (passphrase: string) => void,
   modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
   tooltip: (toasterMsg: string) => void,
   signMessageWithAddress: (account: string, message: string, modalContent: (hash: string, data: string) => JSX.Element, passphrase?: string) => void,
-  passphrase: string
+  passphrase: string,
+  web3ProviderDialog: () => JSX.Element
 }
 
 export interface EnvironmentProps {
-  setWeb3Endpoint: (endpoint: string) => void,
   selectedEnv: string,
   providers: {
     providerList: {
@@ -62,7 +61,7 @@ export interface EnvironmentProps {
     error: string
   },
   setExecutionContext: (executionContext: { context: string, fork: string }, displayContent: JSX.Element) => void,
-  externalEndpoint: string
+  web3ProviderDialog: () => JSX.Element
 }
 
 export interface NetworkProps {

From 0403932c3840cb2e567cc98521fadb60c0e2e807 Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Tue, 28 Dec 2021 19:54:41 +0100
Subject: [PATCH 134/168] Add run-tab config to workspace.json

---
 workspace.json | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/workspace.json b/workspace.json
index 5426bf7b65..e07c9d3c75 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1155,6 +1155,19 @@
           }
         }
       }
+    },
+    "remix-ui-run-tab": {
+      "root": "libs/remix-ui/run-tab",
+      "sourceRoot": "libs/remix-ui/run-tab/src",
+      "projectType": "library",
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": ["libs/remix-ui/run-tab/**/*.{ts,tsx,js,jsx}"]
+          }
+        }
+      }
     }
   },
   "cli": {

From 6bee9098451bd801054d2eb7bca1aad653ac55a2 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Wed, 29 Dec 2021 09:47:01 +0100
Subject: [PATCH 135/168] readd targetDependencies

---
 nx.json | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/nx.json b/nx.json
index c28d15ca3f..5f50461adc 100644
--- a/nx.json
+++ b/nx.json
@@ -160,5 +160,13 @@
     "remix-ui-run-tab": {
       "tags": []
     }
+  },
+  "targetDependencies": {
+    "build": [
+      {
+        "target": "build",
+        "projects": "dependencies"
+      }
+    ]
   }
 }

From 97a589adb1d79c392f42267c3959a176037853a0 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Wed, 29 Dec 2021 09:52:33 +0100
Subject: [PATCH 136/168] fix linting conf

---
 workspace.json | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/workspace.json b/workspace.json
index e07c9d3c75..099dc6ce74 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1162,9 +1162,11 @@
       "projectType": "library",
       "architect": {
         "lint": {
-          "builder": "@nrwl/linter:eslint",
+          "builder": "@nrwl/linter:lint",
           "options": {
-            "lintFilePatterns": ["libs/remix-ui/run-tab/**/*.{ts,tsx,js,jsx}"]
+            "linter": "eslint",
+            "tsConfig": ["libs/remix-ui/editor-context-view/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/editor-context-view/**/*"]
           }
         }
       }

From f8a877cf75da3dcd7dd088e7c90312ec79eebb62 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Wed, 29 Dec 2021 11:19:19 +0100
Subject: [PATCH 137/168] setInterval for updating list of account.

---
 libs/remix-ui/run-tab/src/lib/actions/index.ts | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/libs/remix-ui/run-tab/src/lib/actions/index.ts b/libs/remix-ui/run-tab/src/lib/actions/index.ts
index 16b74d1ba5..dfd5e19440 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/index.ts
@@ -24,13 +24,9 @@ export const initRunTab = (udapp: RunTab) => async (reducerDispatch: React.Dispa
   plugin = udapp
   dispatch = reducerDispatch
   setupEvents()
-  // setInterval(() => {
-  //   fillAccountsList()
-  // }, 1000)
-  // fillAccountsList()
-  setTimeout(async () => {
-    await fillAccountsList()
-  }, 0)
+  setInterval(() => {
+    fillAccountsList()
+  }, 1000)
 }
 
 const setupEvents = () => {
@@ -157,7 +153,12 @@ const fillAccountsList = async () => {
       const loadedAccounts = {}
 
       if (!accounts) accounts = []
-      await (Promise as any).allSettled(accounts.map((account) => {
+      // allSettled is undefined..
+      // so the current promise (all) will finish when:
+      // - all the promises resolve
+      // - at least one reject
+      // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
+      await (Promise as any).all(accounts.map((account) => {
         return new Promise((resolve, reject) => {
           plugin.blockchain.getBalanceInEther(account, (err, balance) => {
             if (err) return reject(err)

From 4989b4c29eff538080ed81760468866904df7f10 Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Wed, 29 Dec 2021 13:20:05 +0100
Subject: [PATCH 138/168] Correct config error

---
 workspace.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/workspace.json b/workspace.json
index 099dc6ce74..b175a6915b 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1165,8 +1165,8 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": ["libs/remix-ui/editor-context-view/tsconfig.lib.json"],
-            "exclude": ["**/node_modules/**", "!libs/remix-ui/editor-context-view/**/*"]
+            "tsConfig": ["libs/remix-ui/run-tab/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/run-tab/**/*"]
           }
         }
       }

From bde68bd6c509a9f27b47931f27c34498b05a7e5f Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Thu, 30 Dec 2021 12:01:22 +0100
Subject: [PATCH 139/168] retrieve function inputs

---
 libs/remix-ui/run-tab/src/lib/actions/index.ts      |  4 ++++
 .../src/lib/components/contractDropdownUI.tsx       | 13 ++++++++++---
 .../src/lib/components/instanceContainerUI.tsx      |  1 +
 .../run-tab/src/lib/components/universalDappUI.tsx  |  3 +--
 libs/remix-ui/run-tab/src/lib/run-tab.tsx           |  4 +++-
 libs/remix-ui/run-tab/src/lib/types/index.ts        |  6 ++++--
 workspace.json                                      |  2 +-
 7 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/libs/remix-ui/run-tab/src/lib/actions/index.ts b/libs/remix-ui/run-tab/src/lib/actions/index.ts
index dfd5e19440..dc0cae242a 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/index.ts
@@ -717,3 +717,7 @@ export const runCurrentScenario = (gasEstimationPrompt: (msg: string) => JSX.Ele
 export const updateScenarioPath = (path: string) => {
   dispatch(setPathToScenario(path))
 }
+
+export const getFuncABIInputs = (funcABI: FuncABI) => {
+  return plugin.blockchain.getInputs(funcABI)
+}
diff --git a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
index 269c55f09c..595f8ae22b 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
@@ -1,6 +1,6 @@
 // eslint-disable-next-line no-use-before-define
 import React, { useEffect, useState } from 'react'
-import { ContractData, ContractDropdownProps } from '../types'
+import { ContractData, ContractDropdownProps, FuncABI } from '../types'
 import * as ethJSUtil from 'ethereumjs-util'
 import { ContractGUI } from './contractGUI'
 
@@ -25,6 +25,8 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
   const [selectedContract, setSelectedContract] = useState<string>('')
   const [compFails, setCompFails] = useState<'none' | 'block'>('none')
   const [loadedContractData, setLoadedContractData] = useState<ContractData>(null)
+  const [constructorInterface, setConstructorInterface] = useState<FuncABI>(null)
+  const [constructorInputs, setConstructorInputs] = useState(null)
   const { contractList, loadType, currentFile } = props.contracts
 
   useEffect(() => {
@@ -79,8 +81,13 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
   useEffect(() => {
     if (selectedContract) {
       const contract = contractList.find(contract => contract.alias === selectedContract)
+      const loadedContractData = props.getSelectedContract(selectedContract, contract.name)
 
-      setLoadedContractData(props.getSelectedContract(selectedContract, contract.name))
+      if (loadedContractData) {
+        setLoadedContractData(loadedContractData)
+        setConstructorInterface(loadedContractData.getConstructorInterface())
+        setConstructorInputs(loadedContractData.getConstructorInputs())
+      }
     }
   }, [selectedContract])
 
@@ -193,7 +200,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
         <div className="udapp_deployDropdown">
           { contractList.length <= 0 ? 'No compiled contracts'
             : loadedContractData ? <div>
-              <ContractGUI title='Deploy' funcABI={loadedContractData.getConstructorInterface()} clickCallBack={clickCallback} inputs={loadedContractData.getConstructorInputs()} widthClass='w-50' evmBC={loadedContractData.bytecodeObject} lookupOnly={false} />
+              <ContractGUI title='Deploy' funcABI={constructorInterface} clickCallBack={clickCallback} inputs={constructorInputs} widthClass='w-50' evmBC={loadedContractData.bytecodeObject} lookupOnly={false} />
               <div className="d-flex py-1 align-items-center custom-control custom-checkbox">
                 <input
                   id="deployAndRunPublishToIPFS"
diff --git a/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx b/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
index 764b5febb4..cca6777535 100644
--- a/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
@@ -35,6 +35,7 @@ export function InstanceContainerUI (props: InstanceContainerProps) {
             mainnetPrompt={props.mainnetPrompt}
             runTransactions={props.runTransactions}
             sendValue={props.sendValue}
+            getFuncABIInputs={props.getFuncABIInputs}
           />
         }) }
         </div>
diff --git a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
index de6014711c..bdd5d2317b 100644
--- a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
@@ -18,7 +18,6 @@ export function UniversalDappUI (props: UdappProps) {
   const [expandPath, setExpandPath] = useState<string[]>([])
   const [llIError, setLlIError] = useState<string>('')
   const [calldataValue, setCalldataValue] = useState<string>('')
-  const [inputs, setInputs] = useState<string>(null)
   const [evmBC, setEvmBC] = useState(null)
 
   useEffect(() => {
@@ -43,7 +42,6 @@ export function UniversalDappUI (props: UdappProps) {
 
   useEffect(() => {
     if (props.instance.contractData) {
-      setInputs(props.instance.contractData.getConstructorInputs())
       setEvmBC(props.instance.contractData.bytecodeObject)
     }
   }, [props.instance.contractData])
@@ -235,6 +233,7 @@ export function UniversalDappUI (props: UdappProps) {
               if (funcABI.type !== 'function') return null
               const isConstant = funcABI.constant !== undefined ? funcABI.constant : false
               const lookupOnly = funcABI.stateMutability === 'view' || funcABI.stateMutability === 'pure' || isConstant
+              const inputs = props.getFuncABIInputs(funcABI)
 
               return <ContractGUI
                 funcABI={funcABI}
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
index 8630e23c7c..203f57c6ad 100644
--- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -24,7 +24,8 @@ import {
   removeInstance, getContext,
   runTransactions, loadAddress,
   storeScenario, runCurrentScenario,
-  updateScenarioPath, initWebDialogs
+  updateScenarioPath, initWebDialogs,
+  getFuncABIInputs
 } from './actions'
 import './css/run-tab.css'
 import { PublishToStorage } from '@remix-ui/publish-to-storage'
@@ -275,6 +276,7 @@ export function RunTabUI (props: RunTabProps) {
             mainnetPrompt={mainnetPrompt}
             runTransactions={runTransactions}
             sendValue={runTab.sendValue}
+            getFuncABIInputs={getFuncABIInputs}
           />
         </div>
       </div>
diff --git a/libs/remix-ui/run-tab/src/lib/types/index.ts b/libs/remix-ui/run-tab/src/lib/types/index.ts
index 78216a91ab..1e83888100 100644
--- a/libs/remix-ui/run-tab/src/lib/types/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/index.ts
@@ -225,7 +225,8 @@ export interface InstanceContainerProps {
   logBuilder: (msg: string) => JSX.Element,
   passphrasePrompt: (message: string) => JSX.Element,
   mainnetPrompt: (tx: Tx, network: Network, amount: string, gasEstimation: string, gasFees: (maxFee: string, cb: (txFeeText: string, priceStatus: boolean) => void) => void, determineGasPrice: (cb: (txFeeText: string, gasPriceValue: string, gasPriceStatus: boolean) => void) => void) => JSX.Element,
-  sendValue: string
+  sendValue: string,
+  getFuncABIInputs: (funcABI: FuncABI) => string
 }
 
 export interface Modal {
@@ -295,5 +296,6 @@ export interface UdappProps {
     mainnetPrompt: MainnetPrompt,
     gasEstimationPrompt: (msg: string) => JSX.Element,
     passphrasePrompt: (msg: string) => JSX.Element) => void,
-  sendValue: string
+  sendValue: string,
+  getFuncABIInputs: (funcABI: FuncABI) => string
 }
diff --git a/workspace.json b/workspace.json
index b175a6915b..fa7930463c 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1166,7 +1166,7 @@
           "options": {
             "linter": "eslint",
             "tsConfig": ["libs/remix-ui/run-tab/tsconfig.lib.json"],
-            "exclude": ["**/node_modules/**", "!libs/remix-ui/run-tab/**/*"]
+            "exclude": ["**/node_modules/**", "libs/remix-ui/run-tab/**/*.d.ts", "!libs/remix-ui/run-tab/**/*"]
           }
         }
       }

From 8618ef15f0b9169a4d8d2e2e5acfb316ad32cb9f Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Thu, 30 Dec 2021 12:47:56 +0100
Subject: [PATCH 140/168] close input tag

---
 libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
index c24efb2dd2..33e4f3c2df 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
@@ -164,8 +164,7 @@ export function ContractGUI (props: ContractGUIProps) {
           placeholder={props.inputs}
           title={props.funcABI.type === 'fallback' || props.funcABI.type === 'receive' ? `'(${props.funcABI.type}')` : props.inputs}
           onChange={handleBasicInput}
-          style={{ visibility: !((props.funcABI.inputs && props.funcABI.inputs.length > 0) || (props.funcABI.type === 'fallback') || (props.funcABI.type === 'receive')) ? 'hidden' : 'visible' }}>
-        </input>
+          style={{ visibility: !((props.funcABI.inputs && props.funcABI.inputs.length > 0) || (props.funcABI.type === 'fallback') || (props.funcABI.type === 'receive')) ? 'hidden' : 'visible' }} />
         <i
           className="fas fa-angle-down udapp_methCaret"
           onClick={switchMethodViewOn}

From 478dcc1d87f18b0c1a267d4dcb46161a212fb2e7 Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Thu, 30 Dec 2021 17:10:41 +0100
Subject: [PATCH 141/168] Fixed selected contract initialization and deploy
 constructor error

---
 .../src/lib/components/contractDropdownUI.tsx | 22 +++++++++++++------
 .../src/lib/components/contractGUI.tsx        |  2 +-
 .../run-tab/src/lib/reducers/runTab.ts        |  7 +++++-
 package-lock.json                             | 15 +++----------
 4 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
index 595f8ae22b..8d49e0e78f 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
@@ -71,11 +71,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
       enableContractNames(false)
       setCompFails('block')
     }
-    if (contractList.length > 0) {
-      const contract = contractList.find(contract => contract.alias === selectedContract)
-
-      if (!selectedContract || !contract) setSelectedContract(contractList[0].alias)
-    }
+    initSelectedContract()
   }, [loadType, currentFile])
 
   useEffect(() => {
@@ -91,6 +87,18 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     }
   }, [selectedContract])
 
+  useEffect(() => {
+    initSelectedContract()
+  }, [contractList])
+
+  const initSelectedContract = () => {
+    if (contractList.length > 0) {
+      const contract = contractList.find(contract => contract.alias === selectedContract)
+
+      if (!selectedContract || !contract) setSelectedContract(contractList[0].alias)
+    }
+  }
+
   const enableAtAddress = (enable: boolean) => {
     if (enable) {
       setAtAddressOptions({
@@ -119,8 +127,8 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     }
   }
 
-  const clickCallback = (inputsValues) => {
-    createInstance(loadedContractData, inputsValues)
+  const clickCallback = (inputs, value) => {
+    createInstance(loadedContractData, value)
   }
 
   const createInstance = (selectedContract, args) => {
diff --git a/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
index 33e4f3c2df..292c2eeaee 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
@@ -73,7 +73,7 @@ export function ContractGUI (props: ContractGUIProps) {
         dataId: title + ' - transact (not payable)'
       })
     }
-  }, [props.lookupOnly, props.funcABI])
+  }, [props.lookupOnly, props.funcABI, title])
 
   const switchMethodViewOn = () => {
     setToggleContainer(true)
diff --git a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
index f91240e2c5..78d8fd5387 100644
--- a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
+++ b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
@@ -256,7 +256,12 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
 
       return {
         ...state,
-        selectExEnv: payload
+        selectExEnv: payload,
+        accounts: {
+          ...state.accounts,
+          selectedAccount: '',
+          loadedAccounts: {}
+        }
       }
     }
 
diff --git a/package-lock.json b/package-lock.json
index a05d1a99a7..bab7da51d1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41619,15 +41619,6 @@
             "which": "^2.0.1"
           }
         },
-        "debug": {
-          "version": "4.3.2",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
-          "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
-          "dev": true,
-          "requires": {
-            "ms": "2.1.2"
-          }
-        },
         "decompress-response": {
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
@@ -41699,9 +41690,9 @@
           }
         },
         "keyv": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.0.3.tgz",
-          "integrity": "sha512-zdGa2TOpSZPq5mU6iowDARnMBZgtCqJ11dJROFi6tg6kTn4nuUdU09lFyLFSaHrWqpIJ+EBq4E8/Dc0Vx5vLdA==",
+          "version": "4.0.4",
+          "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.0.4.tgz",
+          "integrity": "sha512-vqNHbAc8BBsxk+7QBYLW0Y219rWcClspR6WSeoHYKG5mnsSoOH+BL1pWq02DDCVdvvuUny5rkBlzMRzoqc+GIg==",
           "dev": true,
           "requires": {
             "json-buffer": "3.0.1"

From 63a90a1ef1771b103382c7bb5983d26b856e28e2 Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Thu, 30 Dec 2021 18:24:04 +0100
Subject: [PATCH 142/168] Restore instance class

---
 libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
index bdd5d2317b..aa5b90b771 100644
--- a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
@@ -202,7 +202,7 @@ export function UniversalDappUI (props: UdappProps) {
   }
 
   return (
-    <div className={`udapp_instance udapp_run-instance border-dark ${toggleExpander ? 'udapp_hidesub' : 'bg-light'}`} id={`instance${address}`} data-shared="universalDappUiInstance">
+    <div className={`instance udapp_instance udapp_run-instance border-dark ${toggleExpander ? 'udapp_hidesub' : 'bg-light'}`} id={`instance${address}`} data-shared="universalDappUiInstance">
       <div className="udapp_title alert alert-secondary">
         <button data-id="universalDappUiTitleExpander" className="btn udapp_titleExpander" onClick={toggleClass}>
           <i className={`fas ${toggleExpander ? 'fa-angle-right' : 'fa-angle-down'}`} aria-hidden="true"></i>

From 09bed14503d4bc948f9f4086973cc3f7456e223f Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Fri, 31 Dec 2021 11:36:45 +0100
Subject: [PATCH 143/168] Fix ballot test

---
 .../src/commands/addAtAddressInstance.ts             |  2 +-
 apps/remix-ide-e2e/src/commands/clickInstance.ts     |  3 +--
 apps/remix-ide-e2e/src/tests/ballot.test.ts          |  5 +++--
 apps/remix-ide-e2e/src/tests/ballot_0_4_11.test.ts   |  4 ++--
 apps/remix-ide-e2e/src/tests/gist.test.ts            |  4 ++--
 libs/remix-lib/src/execution/txRunnerWeb3.ts         | 12 ------------
 .../run-tab/src/lib/components/universalDappUI.tsx   |  2 +-
 7 files changed, 10 insertions(+), 22 deletions(-)

diff --git a/apps/remix-ide-e2e/src/commands/addAtAddressInstance.ts b/apps/remix-ide-e2e/src/commands/addAtAddressInstance.ts
index 8df05cba92..470e79bf39 100644
--- a/apps/remix-ide-e2e/src/commands/addAtAddressInstance.ts
+++ b/apps/remix-ide-e2e/src/commands/addAtAddressInstance.ts
@@ -19,7 +19,7 @@ function addInstance (browser: NightwatchBrowser, address: string, isValidFormat
     else {
       browser.click('button[id^="runAndDeployAtAdressButton"]')
         .execute(function () {
-          const modal = document.querySelector('#modal-footer-ok') as HTMLElement
+          const modal = document.querySelector('[data-id="fileSystem-modal-footer-ok-react"]') as HTMLElement
           modal.click()
         })
     }
diff --git a/apps/remix-ide-e2e/src/commands/clickInstance.ts b/apps/remix-ide-e2e/src/commands/clickInstance.ts
index f9d5ee8e6f..4da4b51b05 100644
--- a/apps/remix-ide-e2e/src/commands/clickInstance.ts
+++ b/apps/remix-ide-e2e/src/commands/clickInstance.ts
@@ -3,8 +3,7 @@ import EventEmitter from 'events'
 
 class ClickInstance extends EventEmitter {
   command (this: NightwatchBrowser, index: number): NightwatchBrowser {
-    index = index + 2
-    const selector = '.instance:nth-of-type(' + index + ') > div > button'
+    const selector = `[data-id="universalDappUiTitleExpander${index}"]`
 
     this.api.waitForElementPresent(selector).waitForElementContainsText(selector, '', 60000).scrollAndClick(selector).perform(() => { this.emit('complete') })
     return this
diff --git a/apps/remix-ide-e2e/src/tests/ballot.test.ts b/apps/remix-ide-e2e/src/tests/ballot.test.ts
index c563bd459e..a544e39878 100644
--- a/apps/remix-ide-e2e/src/tests/ballot.test.ts
+++ b/apps/remix-ide-e2e/src/tests/ballot.test.ts
@@ -25,7 +25,7 @@ module.exports = {
       .setValue('input[placeholder="bytes32[] proposalNames"]', '["0x48656c6c6f20576f726c64210000000000000000000000000000000000000000"]')
       .click('*[data-id="Deploy - transact (not payable)"]')
       .waitForElementPresent('*[data-id="universalDappUiContractActionWrapper"]', 60000)
-      .click('*[data-id="universalDappUiTitleExpander"]')
+      .clickInstance(0)
       .clickFunction('delegate - transact (not payable)', { types: 'address to', values: '"0x4b0897b0513fdc7c541b6d9d7e929c4e5364d2db"' })
       .testFunction('last',
         {
@@ -70,7 +70,7 @@ module.exports = {
       .addAtAddressInstance('0x692a70D2e424a56D2C6C27aA97D1a86395877b3A', true, true)
       .pause(500)
       .waitForElementPresent('*[data-id="universalDappUiContractActionWrapper"]', 60000)
-      .click('*[data-id="universalDappUiTitleExpander"]')
+      .clickInstance(0)
       .clickFunction('delegate - transact (not payable)', { types: 'address to', values: '"0x4b0897b0513fdc7c541b6d9d7e929c4e5364d2db"' })
       .testFunction('last',
         {
@@ -95,6 +95,7 @@ module.exports = {
       .clickLaunchIcon('solidity')
       .clickLaunchIcon('udapp')
       .pause(2000)
+      .clearValue('input[placeholder="bytes32[] proposalNames"]')
       .setValue('input[placeholder="bytes32[] proposalNames"]', '["0x48656c6c6f20576f726c64210000000000000000000000000000000000000000"]')
       .click('*[data-id="Deploy - transact (not payable)"]')
       .clickInstance(0)
diff --git a/apps/remix-ide-e2e/src/tests/ballot_0_4_11.test.ts b/apps/remix-ide-e2e/src/tests/ballot_0_4_11.test.ts
index b48a0df1c8..108bf7c2c5 100644
--- a/apps/remix-ide-e2e/src/tests/ballot_0_4_11.test.ts
+++ b/apps/remix-ide-e2e/src/tests/ballot_0_4_11.test.ts
@@ -33,7 +33,7 @@ module.exports = {
       .setValue('input[placeholder="uint8 _numProposals"]', '2')
       .click('*[data-id="Deploy - transact (not payable)"]')
       .waitForElementPresent('*[data-id="universalDappUiContractActionWrapper"]', 60000)
-      .click('*[data-id="universalDappUiTitleExpander"]')
+      .clickInstance(0)
       .clickFunction('delegate - transact (not payable)', { types: 'address to', values: '"0x4b0897b0513fdc7c541b6d9d7e929c4e5364d2db"' })
       .testFunction('last',
         {
@@ -65,7 +65,7 @@ module.exports = {
       .addAtAddressInstance('0x692a70D2e424a56D2C6C27aA97D1a86395877b3A', true, true)
       .pause(500)
       .waitForElementPresent('*[data-id="universalDappUiContractActionWrapper"]', 60000)
-      .click('*[data-id="universalDappUiTitleExpander"]')
+      .clickInstance(0)
       .clickFunction('delegate - transact (not payable)', { types: 'address to', values: '"0x4b0897b0513fdc7c541b6d9d7e929c4e5364d2db"' })
       .testFunction('last',
         {
diff --git a/apps/remix-ide-e2e/src/tests/gist.test.ts b/apps/remix-ide-e2e/src/tests/gist.test.ts
index 8759cd2448..0fd6efa234 100644
--- a/apps/remix-ide-e2e/src/tests/gist.test.ts
+++ b/apps/remix-ide-e2e/src/tests/gist.test.ts
@@ -135,9 +135,9 @@ module.exports = {
       .clickLaunchIcon('filePanel')
       .scrollAndClick('*[data-id="landingPageImportFromGistButton"]')
       .waitForElementVisible('*[data-id="gisthandlerModalDialogModalBody-react"] input[data-id="modalDialogCustomPromp"]')
-      .execute(() => {
+      .execute(function () {
         (document.querySelector('*[data-id="gisthandlerModalDialogModalBody-react"] input[data-id="modalDialogCustomPromp"]') as any).focus()
-      }, [], () => {})
+      })
       .setValue('*[data-id="gisthandlerModalDialogModalBody-react"] input[data-id="modalDialogCustomPromp"]', testData.validGistId)
       .modalFooterOKClick('gisthandler')
       .openFile(`gist-${testData.validGistId}/README.txt`)
diff --git a/libs/remix-lib/src/execution/txRunnerWeb3.ts b/libs/remix-lib/src/execution/txRunnerWeb3.ts
index 7693b0ad21..9b41fe9e5f 100644
--- a/libs/remix-lib/src/execution/txRunnerWeb3.ts
+++ b/libs/remix-lib/src/execution/txRunnerWeb3.ts
@@ -16,7 +16,6 @@ export class TxRunnerWeb3 {
   }
 
   _executeTx (tx, network, txFee, api, promptCb, callback) {
-    console.log('tx: ', tx)
     if (network && network.lastBlock && network.lastBlock.baseFeePerGas) {
       // the sending stack (web3.js / metamask need to have the type defined)
       // this is to avoid the following issue: https://github.com/MetaMask/metamask-extension/issues/11824
@@ -58,7 +57,6 @@ export class TxRunnerWeb3 {
         return new Promise(async (resolve, reject) => {
           const receipt = await tryTillReceiptAvailable(resp, this.getWeb3())
           tx = await tryTillTxAvailable(resp, this.getWeb3())
-          console.log(receipt, tx, receipt['transactionHash'])
           resolve({
             receipt,
             tx,
@@ -82,9 +80,6 @@ export class TxRunnerWeb3 {
       data = '0x' + data
     }
 
-    console.log('data: ', data)
-    console.log('args: ', args)
-
     return this.runInNode(args.from, args.to, data, args.value, args.gasLimit, args.useCall, args.timestamp, confirmationCb, gasEstimationForceSend, promptCb, callback)
   }
 
@@ -117,17 +112,10 @@ export class TxRunnerWeb3 {
           }
 
           if (this._api.config.getUnpersistedProperty('doNotShowTransactionConfirmationAgain')) {
-            console.log('tx: ', tx)
-            console.log('network: ', network)
-            console.log('this._api: ', this._api)
             return this._executeTx(tx, network, null, this._api, promptCb, callback)
           }
 
           confirmCb(network, tx, tx['gas'], (txFee) => {
-            console.log('tx: ', tx)
-            console.log('network: ', network)
-            console.log('txFee: ', txFee)
-            console.log('this._api: ', this._api)
             return this._executeTx(tx, network, txFee, this._api, promptCb, callback)
           }, (error) => {
             callback(error)
diff --git a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
index aa5b90b771..fc5460b611 100644
--- a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
@@ -204,7 +204,7 @@ export function UniversalDappUI (props: UdappProps) {
   return (
     <div className={`instance udapp_instance udapp_run-instance border-dark ${toggleExpander ? 'udapp_hidesub' : 'bg-light'}`} id={`instance${address}`} data-shared="universalDappUiInstance">
       <div className="udapp_title alert alert-secondary">
-        <button data-id="universalDappUiTitleExpander" className="btn udapp_titleExpander" onClick={toggleClass}>
+        <button data-id={`universalDappUiTitleExpander${props.index}`} className="btn udapp_titleExpander" onClick={toggleClass}>
           <i className={`fas ${toggleExpander ? 'fa-angle-right' : 'fa-angle-down'}`} aria-hidden="true"></i>
         </button>
         <div className="input-group udapp_nameNbuts">

From 92053e7ae93ef105b47c0be5ed78f10ee33604b2 Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Fri, 31 Dec 2021 12:18:06 +0100
Subject: [PATCH 144/168] Fix ballot test

---
 apps/remix-ide-e2e/src/tests/ballot.test.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/remix-ide-e2e/src/tests/ballot.test.ts b/apps/remix-ide-e2e/src/tests/ballot.test.ts
index a544e39878..1601336e57 100644
--- a/apps/remix-ide-e2e/src/tests/ballot.test.ts
+++ b/apps/remix-ide-e2e/src/tests/ballot.test.ts
@@ -85,6 +85,7 @@ module.exports = {
       .clickLaunchIcon('udapp')
       .click('*[data-id="settingsWeb3Mode"]')
       .modalFooterOKClick()
+      .pause(5000)
       .execute(function () {
         const env: any = document.getElementById('selectExEnvOptions')
         return env.value

From a1037fd7b0b3ce4656f3e4c34a5e65f6a4065020 Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Fri, 31 Dec 2021 13:28:05 +0100
Subject: [PATCH 145/168] Fix debugger test

---
 apps/remix-ide-e2e/src/commands/createContract.ts | 6 +++---
 apps/remix-ide-e2e/src/commands/selectContract.ts | 2 +-
 apps/remix-ide-e2e/src/tests/debugger.test.ts     | 3 +--
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/apps/remix-ide-e2e/src/commands/createContract.ts b/apps/remix-ide-e2e/src/commands/createContract.ts
index d3f7befee1..015a4f2012 100644
--- a/apps/remix-ide-e2e/src/commands/createContract.ts
+++ b/apps/remix-ide-e2e/src/commands/createContract.ts
@@ -15,12 +15,12 @@ class CreateContract extends EventEmitter {
 
 function createContract (browser: NightwatchBrowser, inputParams: string, callback: VoidFunction) {
   if (inputParams) {
-    browser.setValue('div[class^="contractActionsContainerSingle"] input', inputParams, function () {
-      browser.click('#runTabView button[class^="instanceButton"]').pause(500).perform(function () { callback() })
+    browser.setValue('.udapp_contractActionsContainerSingle > input', inputParams, function () {
+      browser.click('.udapp_contractActionsContainerSingle > button').pause(500).perform(function () { callback() })
     })
   } else {
     browser
-      .click('#runTabView button[class^="instanceButton"]')
+      .click('.udapp_contractActionsContainerSingle > button')
       .pause(500)
       .perform(function () { callback() })
   }
diff --git a/apps/remix-ide-e2e/src/commands/selectContract.ts b/apps/remix-ide-e2e/src/commands/selectContract.ts
index fcd181ee3e..d270f8949d 100644
--- a/apps/remix-ide-e2e/src/commands/selectContract.ts
+++ b/apps/remix-ide-e2e/src/commands/selectContract.ts
@@ -1,7 +1,7 @@
 import { NightwatchBrowser } from 'nightwatch'
 import EventEmitter from 'events'
 
-const selector = '#runTabView select[class^="contractNames"]'
+const selector = '.udapp_contractNames'
 
 class SelectContract extends EventEmitter {
   command (this: NightwatchBrowser, contractName: string): NightwatchBrowser {
diff --git a/apps/remix-ide-e2e/src/tests/debugger.test.ts b/apps/remix-ide-e2e/src/tests/debugger.test.ts
index 6698c13635..cd3fafc3b3 100644
--- a/apps/remix-ide-e2e/src/tests/debugger.test.ts
+++ b/apps/remix-ide-e2e/src/tests/debugger.test.ts
@@ -25,8 +25,7 @@ module.exports = {
   'Should debug failing transaction #group1': function (browser: NightwatchBrowser) {
     browser.waitForElementVisible('*[data-id="verticalIconsKindudapp"]')
       .clickLaunchIcon('udapp')
-      .waitForElementPresent('*[data-id="universalDappUiTitleExpander"]')
-      .click('*[data-id="universalDappUiTitleExpander"]')
+      .clickInstance(0)
       .scrollAndClick('*[title="string name, uint256 goal"]')
       .setValue('*[title="string name, uint256 goal"]', '"toast", 999')
       .click('*[data-id="createProject - transact (not payable)"]')

From 528cd06ee936dfa787e23d33a3e0967f5eb42417 Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Mon, 3 Jan 2022 10:11:21 +0100
Subject: [PATCH 146/168] Fixed library deployment test

---
 apps/remix-ide-e2e/src/commands/testConstantFunction.ts | 9 +++++----
 apps/remix-ide-e2e/src/tests/libraryDeployment.test.ts  | 7 ++-----
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/apps/remix-ide-e2e/src/commands/testConstantFunction.ts b/apps/remix-ide-e2e/src/commands/testConstantFunction.ts
index db0d3b0946..1ce727c076 100644
--- a/apps/remix-ide-e2e/src/commands/testConstantFunction.ts
+++ b/apps/remix-ide-e2e/src/commands/testConstantFunction.ts
@@ -20,16 +20,17 @@ function testConstantFunction (browser: NightwatchBrowser, address: string, fnFu
       document.querySelector('#runTabView').scrollTop = document.querySelector('#runTabView').scrollHeight
     }, [], function () {
       if (expectedInput) {
-        client.setValue('#runTabView input[title="' + expectedInput.types + '"]', expectedInput.values)
+        client.waitForElementPresent('#runTabView input[title="' + expectedInput.types + '"]')
+          .setValue('#runTabView input[title="' + expectedInput.types + '"]', expectedInput.values)
       }
       done()
     })
   })
     .click('.instance button[title="' + fnFullName + '"]')
     .pause(1000)
-    .waitForElementPresent('#instance' + address + ' div[class^="contractActionsContainer"] div[class^="value"]')
-    .scrollInto('#instance' + address + ' div[class^="contractActionsContainer"] div[class^="value"]')
-    .assert.containsText('#instance' + address + ' div[class^="contractActionsContainer"] div[class^="value"]', expectedOutput).perform(() => {
+    .waitForElementPresent('#instance' + address + ' .udapp_contractActionsContainer .udapp_value')
+    .scrollInto('#instance' + address + ' .udapp_contractActionsContainer .udapp_value')
+    .assert.containsText('#instance' + address + ' .udapp_contractActionsContainer .udapp_value', expectedOutput).perform(() => {
       cb()
     })
 }
diff --git a/apps/remix-ide-e2e/src/tests/libraryDeployment.test.ts b/apps/remix-ide-e2e/src/tests/libraryDeployment.test.ts
index 9293775733..42d17625e0 100644
--- a/apps/remix-ide-e2e/src/tests/libraryDeployment.test.ts
+++ b/apps/remix-ide-e2e/src/tests/libraryDeployment.test.ts
@@ -27,8 +27,7 @@ module.exports = {
         console.log('testAutoDeployLib ' + address)
         addressRef = address
       })
-      .waitForElementPresent('.instance:nth-of-type(2)')
-      .click('.instance:nth-of-type(2) > div > button')
+      .clickInstance(0)
       .perform((done) => {
         browser.testConstantFunction(addressRef, 'get - call', null, '0:\nuint256: 45').perform(() => {
           done()
@@ -37,7 +36,6 @@ module.exports = {
   },
 
   'Test Manual Deploy Lib': function (browser: NightwatchBrowser) {
-    console.log('testManualDeployLib')
     browser.click('*[data-id="deployAndRunClearInstances"]')
       .pause(5000)
       .clickLaunchIcon('settings')
@@ -104,8 +102,7 @@ function checkDeployShouldSucceed (browser: NightwatchBrowser, address: string,
     .getAddressAtPosition(1, (address) => {
       addressRef = address
     })
-    .waitForElementPresent('.instance:nth-of-type(3)')
-    .click('.instance:nth-of-type(3) > div > button')
+    .clickInstance(1)
     .perform(() => {
       browser
         .testConstantFunction(addressRef, 'get - call', null, '0:\nuint256: 45')

From 1cd69cabac29ce85144701ad38ff01a75e330af9 Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Mon, 3 Jan 2022 15:40:22 +0100
Subject: [PATCH 147/168] Fixed publish contract e2e

---
 .../src/tests/publishContract.test.ts         |  8 +++++---
 .../src/lib/publish-to-storage.tsx            |  2 +-
 .../publish-to-storage/src/lib/types/index.ts |  1 +
 .../remix-ui/run-tab/src/lib/actions/index.ts | 10 +++-------
 .../src/lib/components/contractDropdownUI.tsx | 20 ++++++++++---------
 .../run-tab/src/lib/reducers/runTab.ts        |  3 ++-
 libs/remix-ui/run-tab/src/lib/run-tab.tsx     | 13 +++++++++---
 libs/remix-ui/run-tab/src/lib/types/index.ts  |  4 +++-
 8 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/publishContract.test.ts b/apps/remix-ide-e2e/src/tests/publishContract.test.ts
index 03987555c5..1d35351b77 100644
--- a/apps/remix-ide-e2e/src/tests/publishContract.test.ts
+++ b/apps/remix-ide-e2e/src/tests/publishContract.test.ts
@@ -60,10 +60,12 @@ module.exports = {
       .click('*[data-id="contractDropdownIpfsCheckbox"]')
       .waitForElementVisible('*[data-id="Deploy - transact (not payable)"]')
       .click('*[data-id="Deploy - transact (not payable)"]')
-      .pause(8000)
-      .getModalBody((value, done) => {
+      .pause(5000)
+      .waitForElementVisible('[data-id="udappModalDialogModalBody-react"]')
+      .getText('[data-id="udappModalDialogModalBody-react"]', (result) => {
+        const value = typeof result.value === 'string' ? result.value : null
+
         if (value.indexOf('Metadata of "storage" was published successfully.') === -1) browser.assert.fail('ipfs deploy failed')
-        done()
       })
       .modalFooterOKClick()
   },
diff --git a/libs/remix-ui/publish-to-storage/src/lib/publish-to-storage.tsx b/libs/remix-ui/publish-to-storage/src/lib/publish-to-storage.tsx
index ed8ca6a65f..1ebe31a60e 100644
--- a/libs/remix-ui/publish-to-storage/src/lib/publish-to-storage.tsx
+++ b/libs/remix-ui/publish-to-storage/src/lib/publish-to-storage.tsx
@@ -95,7 +95,7 @@ export const PublishToStorage = (props: RemixUiPublishToStorageProps) => {
 
   return (
     <ModalDialog
-      id='publishToStorage'
+      id={props.id || 'publishToStorage'}
       title={ state.modal.title }
       message={ state.modal.message }
       hide={ state.modal.hide }
diff --git a/libs/remix-ui/publish-to-storage/src/lib/types/index.ts b/libs/remix-ui/publish-to-storage/src/lib/types/index.ts
index 7995d5a538..68d1524390 100644
--- a/libs/remix-ui/publish-to-storage/src/lib/types/index.ts
+++ b/libs/remix-ui/publish-to-storage/src/lib/types/index.ts
@@ -1,4 +1,5 @@
 export interface RemixUiPublishToStorageProps {
+  id?: string
   api: any,
   storage: 'swarm' | 'ipfs',
   contract: any,
diff --git a/libs/remix-ui/run-tab/src/lib/actions/index.ts b/libs/remix-ui/run-tab/src/lib/actions/index.ts
index dc0cae242a..7c2500fbd0 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/index.ts
@@ -3,7 +3,7 @@ import React from 'react'
 import * as ethJSUtil from 'ethereumjs-util'
 import Web3 from 'web3'
 import { addressToString, createNonClashingNameAsync, shortenAddress } from '@remix-ui/helper'
-import { addNewInstance, addProvider, clearAllInstances, clearRecorderCount, displayNotification, displayPopUp, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, fetchContractListSuccess, hidePopUp, removeExistingInstance, removeProvider, setBaseFeePerGas, setConfirmSettings, setCurrentFile, setDecodedResponse, setEnvToasterContent, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setGasPrice, setGasPriceStatus, setIpfsCheckedState, setLoadType, setMatchPassphrase, setMaxFee, setMaxPriorityFee, setNetworkName, setPassphrase, setPathToScenario, setRecorderCount, setSelectedAccount, setSendUnit, setSendValue, setTxFeeContent, setWeb3Dialog } from './payload'
+import { addNewInstance, addProvider, clearAllInstances, clearRecorderCount, displayNotification, displayPopUp, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, fetchContractListSuccess, hidePopUp, removeExistingInstance, removeProvider, setBaseFeePerGas, setConfirmSettings, setCurrentFile, setDecodedResponse, setEnvToasterContent, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setGasPrice, setGasPriceStatus, setLoadType, setMatchPassphrase, setMaxFee, setMaxPriorityFee, setNetworkName, setPassphrase, setPathToScenario, setRecorderCount, setSelectedAccount, setSendUnit, setSendValue, setTxFeeContent, setWeb3Dialog } from './payload'
 import { RunTab } from '../types/run-tab'
 import { CompilerAbstract } from '@remix-project/remix-solidity'
 import * as remixLib from '@remix-project/remix-lib'
@@ -75,7 +75,7 @@ const setupEvents = () => {
       return
     }
     const networkProvider = plugin.networkModule.getNetworkProvider.bind(plugin.networkModule)
-    const netUI = (networkProvider() !== 'vm') ? `${network.name} (${network.id || '-'}) network` : ''
+    const netUI = (networkProvider() !== 'vm') ? `${network.name} (${network.id || '-'}) network` : 'VM'
 
     setNetworkNameFromProvider(netUI)
   })
@@ -231,7 +231,7 @@ const setExecEnv = (env: string) => {
   dispatch(setExecutionEnvironment(env))
 }
 
-const setNetworkNameFromProvider = (networkName: string) => {
+export const setNetworkNameFromProvider = (networkName: string) => {
   dispatch(setNetworkName(networkName))
 }
 
@@ -522,10 +522,6 @@ const deployContract = (selectedContract, args, contractMetadata, compilerContra
   plugin.blockchain.deployContractWithLibrary(selectedContract, args, contractMetadata, compilerContracts, callbacks, confirmationCb)
 }
 
-export const setCheckIpfs = (value: boolean) => {
-  dispatch(setIpfsCheckedState(value))
-}
-
 export const updateGasPriceStatus = (status: boolean) => {
   dispatch(setGasPriceStatus(status))
 }
diff --git a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
index 8d49e0e78f..e34ba83250 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
@@ -5,7 +5,6 @@ import * as ethJSUtil from 'ethereumjs-util'
 import { ContractGUI } from './contractGUI'
 
 export function ContractDropdownUI (props: ContractDropdownProps) {
-  const [networkName, setNetworkName] = useState<string>('')
   const [abiLabel, setAbiLabel] = useState<{
     display: string,
     content: string
@@ -31,10 +30,6 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
 
   useEffect(() => {
     enableAtAddress(false)
-    const savedConfig = window.localStorage.getItem(`ipfs/${props.exEnvironment}/${networkName}`)
-    const isCheckedIPFS = savedConfig === 'true' ? true : false // eslint-disable-line
-
-    if (isCheckedIPFS) props.setIpfsCheckedState(true)
     setAbiLabel({
       display: 'none',
       content: 'ABI file selected'
@@ -42,8 +37,13 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
   }, [])
 
   useEffect(() => {
-    if (props.exEnvironment === 'vm-london' || props.exEnvironment === 'vm-berlin') setNetworkName('VM')
-  }, [props.exEnvironment])
+    if (props.exEnvironment && props.networkName) {
+      const savedConfig = window.localStorage.getItem(`ipfs/${props.exEnvironment}/${props.networkName}`)
+      const isCheckedIPFS = savedConfig === 'true' ? true : false // eslint-disable-line
+
+      props.setIpfsCheckedState(isCheckedIPFS)
+    }
+  }, [props.exEnvironment, props.networkName])
 
   useEffect(() => {
     if (!loadFromAddress || !ethJSUtil.isValidAddress(loadedAddress)) enableAtAddress(false)
@@ -164,8 +164,10 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
   }
 
   const handleCheckedIPFS = () => {
-    props.setIpfsCheckedState(!props.ipfsCheckedState)
-    window.localStorage.setItem(`ipfs/${props.exEnvironment}/${networkName}`, props.ipfsCheckedState.toString())
+    const checkedState = !props.ipfsCheckedState
+
+    props.setIpfsCheckedState(checkedState)
+    window.localStorage.setItem(`ipfs/${props.exEnvironment}/${props.networkName}`, checkedState.toString())
   }
 
   const handleContractChange = (e) => {
diff --git a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
index 78d8fd5387..bf7f754945 100644
--- a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
+++ b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
@@ -95,7 +95,7 @@ export const runTabInitialState: RunTabState = {
   gasLimit: 3000000,
   selectExEnv: 'vm-london',
   personalMode: false,
-  networkName: '',
+  networkName: 'VM',
   providers: {
     providerList: [{
       id: 'vm-mode-london',
@@ -257,6 +257,7 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
       return {
         ...state,
         selectExEnv: payload,
+        networkName: state.selectExEnv === 'vm-london' || state.selectExEnv === 'vm-berlin' ? 'VM' : state.networkName,
         accounts: {
           ...state.accounts,
           selectedAccount: '',
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
index 203f57c6ad..04ad54c6f9 100644
--- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -16,7 +16,7 @@ import {
   clearPopUp, createNewBlockchainAccount,
   setPassphrasePrompt, setMatchPassphrasePrompt,
   signMessageWithAddress, getSelectedContract,
-  createInstance, setCheckIpfs,
+  createInstance,
   updateBaseFeePerGas, updateConfirmSettings,
   updateGasPrice, updateGasPriceStatus,
   updateMaxFee, updateMaxPriorityFee,
@@ -25,7 +25,7 @@ import {
   runTransactions, loadAddress,
   storeScenario, runCurrentScenario,
   updateScenarioPath, initWebDialogs,
-  getFuncABIInputs
+  getFuncABIInputs, setNetworkNameFromProvider
 } from './actions'
 import './css/run-tab.css'
 import { PublishToStorage } from '@remix-ui/publish-to-storage'
@@ -33,6 +33,7 @@ import { PassphrasePrompt } from './components/passphrase'
 import { MainnetPrompt } from './components/mainnet'
 import { ScenarioPrompt } from './components/scenario'
 import { Web3ProviderDialog } from './components/web3Dialog'
+import { setIpfsCheckedState } from './actions/payload'
 
 export function RunTabUI (props: RunTabProps) {
   const { plugin } = props
@@ -112,6 +113,10 @@ export function RunTabUI (props: RunTabProps) {
     }
   }, [runTab.popup])
 
+  const setCheckIpfs = (value: boolean) => {
+    dispatch(setIpfsCheckedState(value))
+  }
+
   const modal = (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => {
     setModals(modals => {
       modals.push({ message, title, okLabel, okFn, cancelLabel, cancelFn })
@@ -254,6 +259,8 @@ export function RunTabUI (props: RunTabProps) {
             mainnetPrompt={mainnetPrompt}
             tooltip={toast}
             loadAddress={loadAddress}
+            networkName={runTab.networkName}
+            setNetworkName={setNetworkNameFromProvider}
           />
           <RecorderUI
             gasEstimationPrompt={gasEstimationPrompt}
@@ -282,7 +289,7 @@ export function RunTabUI (props: RunTabProps) {
       </div>
       <ModalDialog id='fileSystem' { ...focusModal } handleHide={ handleHideModal } />
       <Toaster message={focusToaster} handleHide={handleToaster} />
-      <PublishToStorage api={props.plugin} resetStorage={resetStorage} storage={publishData.storage} contract={publishData.contract} />
+      <PublishToStorage id='udapp' api={props.plugin} resetStorage={resetStorage} storage={publishData.storage} contract={publishData.contract} />
     </Fragment>
   )
 }
diff --git a/libs/remix-ui/run-tab/src/lib/types/index.ts b/libs/remix-ui/run-tab/src/lib/types/index.ts
index 1e83888100..bd3dee8006 100644
--- a/libs/remix-ui/run-tab/src/lib/types/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/index.ts
@@ -180,7 +180,9 @@ export interface ContractDropdownProps {
   passphrasePrompt: (message: string) => JSX.Element,
   mainnetPrompt: (tx: Tx, network: Network, amount: string, gasEstimation: string, gasFees: (maxFee: string, cb: (txFeeText: string, priceStatus: boolean) => void) => void, determineGasPrice: (cb: (txFeeText: string, gasPriceValue: string, gasPriceStatus: boolean) => void) => void) => JSX.Element,
   tooltip: (toasterMsg: string | JSX.Element) => void,
-  loadAddress: (contract: ContractData, address: string) => void
+  loadAddress: (contract: ContractData, address: string) => void,
+  networkName: string,
+  setNetworkName: (name: string) => void
 }
 
 export interface RecorderProps {

From 229ebbc210e113e062c9466a17ab7297b19b1449 Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Tue, 4 Jan 2022 10:38:56 +0100
Subject: [PATCH 148/168] Fixed failing ballot test

---
 apps/remix-ide-e2e/src/tests/ballot.test.ts        | 5 +++--
 apps/remix-ide-e2e/src/tests/ballot_0_4_11.test.ts | 4 +++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/ballot.test.ts b/apps/remix-ide-e2e/src/tests/ballot.test.ts
index 1601336e57..61ecbdee16 100644
--- a/apps/remix-ide-e2e/src/tests/ballot.test.ts
+++ b/apps/remix-ide-e2e/src/tests/ballot.test.ts
@@ -84,13 +84,14 @@ module.exports = {
       .openFile('Untitled.sol')
       .clickLaunchIcon('udapp')
       .click('*[data-id="settingsWeb3Mode"]')
-      .modalFooterOKClick()
+      .waitForElementPresent('[data-id="fileSystem-modal-footer-ok-react"]')
+      .click('[data-id="fileSystem-modal-footer-ok-react"]')
       .pause(5000)
       .execute(function () {
         const env: any = document.getElementById('selectExEnvOptions')
+
         return env.value
       }, [], function (result) {
-        console.log({ result })
         browser.assert.ok(result.value === 'web3', 'Web3 Provider not selected')
       })
       .clickLaunchIcon('solidity')
diff --git a/apps/remix-ide-e2e/src/tests/ballot_0_4_11.test.ts b/apps/remix-ide-e2e/src/tests/ballot_0_4_11.test.ts
index 108bf7c2c5..839841b51c 100644
--- a/apps/remix-ide-e2e/src/tests/ballot_0_4_11.test.ts
+++ b/apps/remix-ide-e2e/src/tests/ballot_0_4_11.test.ts
@@ -79,10 +79,12 @@ module.exports = {
       .openFile('Untitled.sol')
       .clickLaunchIcon('udapp')
       .click('*[data-id="settingsWeb3Mode"]')
-      .modalFooterOKClick()
+      .waitForElementPresent('[data-id="fileSystem-modal-footer-ok-react"]')
+      .click('[data-id="fileSystem-modal-footer-ok-react"]')
       .clickLaunchIcon('solidity')
       .clickLaunchIcon('udapp')
       .pause(2000)
+      .clearValue('input[placeholder="uint8 _numProposals"]')
       .setValue('input[placeholder="uint8 _numProposals"]', '2')
       .click('*[data-id="Deploy - transact (not payable)"]')
       .clickInstance(0)

From 84b2c6a167cfb77270d355cf3d1e204097f28da6 Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Tue, 4 Jan 2022 14:04:39 +0100
Subject: [PATCH 149/168] set send value

---
 .../src/commands/addAtAddressInstance.ts      |  6 ++---
 .../src/commands/validateValueInput.ts        |  1 +
 apps/remix-ide-e2e/src/tests/ballot.test.ts   |  4 +--
 .../src/tests/ballot_0_4_11.test.ts           |  4 +--
 .../src/tests/runAndDeploy.test.ts            | 13 +++++----
 .../remix-ui/run-tab/src/lib/actions/index.ts |  4 +++
 .../run-tab/src/lib/components/account.tsx    |  2 +-
 .../run-tab/src/lib/components/settingsUI.tsx |  2 +-
 .../run-tab/src/lib/components/value.tsx      | 27 ++++++++++++-------
 libs/remix-ui/run-tab/src/lib/run-tab.tsx     |  5 ++--
 libs/remix-ui/run-tab/src/lib/types/index.ts  |  4 ++-
 11 files changed, 44 insertions(+), 28 deletions(-)

diff --git a/apps/remix-ide-e2e/src/commands/addAtAddressInstance.ts b/apps/remix-ide-e2e/src/commands/addAtAddressInstance.ts
index 470e79bf39..6f4be87be1 100644
--- a/apps/remix-ide-e2e/src/commands/addAtAddressInstance.ts
+++ b/apps/remix-ide-e2e/src/commands/addAtAddressInstance.ts
@@ -18,10 +18,8 @@ function addInstance (browser: NightwatchBrowser, address: string, isValidFormat
     if (!isValidFormat || !isValidChecksum) browser.assert.elementPresent('button[id^="runAndDeployAtAdressButton"]:disabled')
     else {
       browser.click('button[id^="runAndDeployAtAdressButton"]')
-        .execute(function () {
-          const modal = document.querySelector('[data-id="fileSystem-modal-footer-ok-react"]') as HTMLElement
-          modal.click()
-        })
+        .waitForElementPresent('[data-id="udappNotify-modal-footer-ok-react"]')
+        .click('[data-id="udappNotify-modal-footer-ok-react"]')
     }
     callback()
   })
diff --git a/apps/remix-ide-e2e/src/commands/validateValueInput.ts b/apps/remix-ide-e2e/src/commands/validateValueInput.ts
index 2ea3e403bf..dd7f653ad7 100644
--- a/apps/remix-ide-e2e/src/commands/validateValueInput.ts
+++ b/apps/remix-ide-e2e/src/commands/validateValueInput.ts
@@ -6,6 +6,7 @@ class ValidateValueInput extends EventEmitter {
     const browser = this.api
     browser.perform((done) => {
       browser.clearValue(selector)
+        .pause(2000)
         .setValue(selector, valueTosSet)
         .execute(function (selector) {
           const elem = document.querySelector(selector) as HTMLInputElement
diff --git a/apps/remix-ide-e2e/src/tests/ballot.test.ts b/apps/remix-ide-e2e/src/tests/ballot.test.ts
index 61ecbdee16..bb41a54029 100644
--- a/apps/remix-ide-e2e/src/tests/ballot.test.ts
+++ b/apps/remix-ide-e2e/src/tests/ballot.test.ts
@@ -84,8 +84,8 @@ module.exports = {
       .openFile('Untitled.sol')
       .clickLaunchIcon('udapp')
       .click('*[data-id="settingsWeb3Mode"]')
-      .waitForElementPresent('[data-id="fileSystem-modal-footer-ok-react"]')
-      .click('[data-id="fileSystem-modal-footer-ok-react"]')
+      .waitForElementPresent('[data-id="udappNotify-modal-footer-ok-react"]')
+      .click('[data-id="udappNotify-modal-footer-ok-react"]')
       .pause(5000)
       .execute(function () {
         const env: any = document.getElementById('selectExEnvOptions')
diff --git a/apps/remix-ide-e2e/src/tests/ballot_0_4_11.test.ts b/apps/remix-ide-e2e/src/tests/ballot_0_4_11.test.ts
index 839841b51c..1b7f97d5b3 100644
--- a/apps/remix-ide-e2e/src/tests/ballot_0_4_11.test.ts
+++ b/apps/remix-ide-e2e/src/tests/ballot_0_4_11.test.ts
@@ -79,8 +79,8 @@ module.exports = {
       .openFile('Untitled.sol')
       .clickLaunchIcon('udapp')
       .click('*[data-id="settingsWeb3Mode"]')
-      .waitForElementPresent('[data-id="fileSystem-modal-footer-ok-react"]')
-      .click('[data-id="fileSystem-modal-footer-ok-react"]')
+      .waitForElementPresent('[data-id="udappNotify-modal-footer-ok-react"]')
+      .click('[data-id="udappNotify-modal-footer-ok-react"]')
       .clickLaunchIcon('solidity')
       .clickLaunchIcon('udapp')
       .pause(2000)
diff --git a/apps/remix-ide-e2e/src/tests/runAndDeploy.test.ts b/apps/remix-ide-e2e/src/tests/runAndDeploy.test.ts
index 9e7d34196a..b4bfe814b7 100644
--- a/apps/remix-ide-e2e/src/tests/runAndDeploy.test.ts
+++ b/apps/remix-ide-e2e/src/tests/runAndDeploy.test.ts
@@ -36,16 +36,19 @@ module.exports = {
       .pause(2000)
       .click('*[data-id="settingsRemixRunSignMsg"]')
       .pause(2000)
-      .waitForElementVisible('*[data-id="modalDialogCustomPromptText"]', 120000)
-      .setValue('*[data-id="modalDialogCustomPromptText"]', 'Remix is cool!')
+      .waitForElementVisible('*[data-id="signMessageTextarea"]', 120000)
+      .click('*[data-id="signMessageTextarea"]')
+      .setValue('*[data-id="signMessageTextarea"]', 'Remix is cool!')
       .assert.elementNotPresent('*[data-id="settingsRemixRunSignMsgHash"]')
       .assert.elementNotPresent('*[data-id="settingsRemixRunSignMsgSignature"]')
       .pause(2000)
-      .modalFooterOKClick()
-      .waitForElementVisible('*[data-id="modalDialogContainer"]', 12000)
+      .waitForElementPresent('[data-id="udappNotify-modal-footer-ok-react"]')
+      .click('[data-id="udappNotify-modal-footer-ok-react"]')
+      .waitForElementVisible('*[data-id="udappNotifyModalDialogModalBody-react"]', 12000)
       .assert.elementPresent('*[data-id="settingsRemixRunSignMsgHash"]')
       .assert.elementPresent('*[data-id="settingsRemixRunSignMsgSignature"]')
-      .modalFooterOKClick()
+      .waitForElementPresent('[data-id="udappNotify-modal-footer-ok-react"]')
+      .click('[data-id="udappNotify-modal-footer-ok-react"]')
   },
 
   'Should deploy contract on JavascriptVM #group3': function (browser: NightwatchBrowser) {
diff --git a/libs/remix-ui/run-tab/src/lib/actions/index.ts b/libs/remix-ui/run-tab/src/lib/actions/index.ts
index 7c2500fbd0..0d36c6c16e 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/index.ts
@@ -717,3 +717,7 @@ export const updateScenarioPath = (path: string) => {
 export const getFuncABIInputs = (funcABI: FuncABI) => {
   return plugin.blockchain.getInputs(funcABI)
 }
+
+export const setSendTransactionValue = (value: string) => {
+  dispatch(setSendValue(value))
+}
diff --git a/libs/remix-ui/run-tab/src/lib/components/account.tsx b/libs/remix-ui/run-tab/src/lib/components/account.tsx
index d0683c3711..9d34294026 100644
--- a/libs/remix-ui/run-tab/src/lib/components/account.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/account.tsx
@@ -123,7 +123,7 @@ export function AccountUI (props: AccountProps) {
         <div>
           <textarea
             id="prompt_text"
-            data-id="modalDialogCustomPromptText"
+            data-id="signMessageTextarea"
             style={{ width: '100%' }}
             rows={4}
             cols={50}
diff --git a/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx b/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
index 67c6c5396a..842d047899 100644
--- a/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
@@ -16,7 +16,7 @@ export function SettingsUI (props: SettingsProps) {
       <NetworkUI networkName={props.networkName} />
       <AccountUI personalMode={props.personalMode} selectExEnv={props.selectExEnv} accounts={props.accounts} setAccount={props.setAccount} createNewBlockchainAccount={props.createNewBlockchainAccount} setPassphrase={props.setPassphrase} setMatchPassphrase={props.setMatchPassphrase} tooltip={props.tooltip} modal={props.modal} signMessageWithAddress={props.signMessageWithAddress} passphrase={props.passphrase} />
       <GasPriceUI gasLimit={props.gasLimit} setGasFee={props.setGasFee} />
-      <ValueUI setUnit={props.setUnit} sendValue={props.sendValue} sendUnit={props.sendUnit} />
+      <ValueUI setUnit={props.setUnit} sendValue={props.sendValue} sendUnit={props.sendUnit} setSendValue={props.setSendValue} />
     </div>
   )
 }
diff --git a/libs/remix-ui/run-tab/src/lib/components/value.tsx b/libs/remix-ui/run-tab/src/lib/components/value.tsx
index 1793827985..dcb90745b6 100644
--- a/libs/remix-ui/run-tab/src/lib/components/value.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/value.tsx
@@ -1,11 +1,16 @@
 // eslint-disable-next-line no-use-before-define
-import React, { useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { BN } from 'ethereumjs-util'
 import { isNumeric } from '@remix-ui/helper'
 import { ValueProps } from '../types'
 
 export function ValueUI (props: ValueProps) {
   const inputValue = useRef(null)
+  const [sendValue, setSendValue] = useState<string>('')
+
+  useEffect(() => {
+    sendValue && props.setSendValue(sendValue)
+  }, [sendValue])
 
   const validateInputKey = (e) => {
     // preventing not numeric keys
@@ -13,31 +18,32 @@ export function ValueUI (props: ValueProps) {
     if (!isNumeric(e.key) ||
       (e.key === '0' && !parseInt(inputValue.current.value) && inputValue.current.value.length > 0)) {
       e.preventDefault()
-      e.stopImmediatePropagation()
     }
   }
 
-  const validateValue = () => {
-    if (!inputValue.current.value) {
+  const validateValue = (e) => {
+    const value = e.target.value
+
+    if (!value) {
       // assign 0 if given value is
       // - empty
-      inputValue.current.value = 0
+      setSendValue('0')
       return
     }
 
     let v
     try {
-      v = new BN(inputValue.current.value, 10)
-      inputValue.current.value = v.toString(10)
+      v = new BN(value, 10)
+      setSendValue(v.toString(10))
     } catch (e) {
       // assign 0 if given value is
       // - not valid (for ex 4345-54)
       // - contains only '0's (for ex 0000) copy past or edit
-      inputValue.current.value = 0
+      setSendValue('0')
     }
 
     // if giveen value is negative(possible with copy-pasting) set to 0
-    if (v.lt(0)) inputValue.current.value = 0
+    if (v.lt(0)) setSendValue('0')
   }
 
   return (
@@ -45,6 +51,7 @@ export function ValueUI (props: ValueProps) {
       <label className="udapp_settingsLabel" data-id="remixDRValueLabel">Value</label>
       <div className="udapp_gasValueContainer">
         <input
+          ref={inputValue}
           type="number"
           min="0"
           pattern="^[0-9]"
@@ -52,7 +59,7 @@ export function ValueUI (props: ValueProps) {
           className="form-control udapp_gasNval udapp_col2"
           id="value"
           data-id="dandrValue"
-          value={props.sendValue}
+          value={sendValue || '0'}
           title="Enter the value and choose the unit"
           onKeyPress={validateInputKey}
           onChange={validateValue}
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
index 04ad54c6f9..19700f43fa 100644
--- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -16,7 +16,7 @@ import {
   clearPopUp, createNewBlockchainAccount,
   setPassphrasePrompt, setMatchPassphrasePrompt,
   signMessageWithAddress, getSelectedContract,
-  createInstance,
+  createInstance, setSendTransactionValue,
   updateBaseFeePerGas, updateConfirmSettings,
   updateGasPrice, updateGasPriceStatus,
   updateMaxFee, updateMaxPriorityFee,
@@ -228,6 +228,7 @@ export function RunTabUI (props: RunTabProps) {
             setAccount={setAccount}
             setUnit={setUnit}
             sendValue={runTab.sendValue}
+            setSendValue={setSendTransactionValue}
             sendUnit={runTab.sendUnit}
             gasLimit={runTab.gasLimit}
             setGasFee={setGasFee}
@@ -287,7 +288,7 @@ export function RunTabUI (props: RunTabProps) {
           />
         </div>
       </div>
-      <ModalDialog id='fileSystem' { ...focusModal } handleHide={ handleHideModal } />
+      <ModalDialog id='udappNotify' { ...focusModal } handleHide={ handleHideModal } />
       <Toaster message={focusToaster} handleHide={handleToaster} />
       <PublishToStorage id='udapp' api={props.plugin} resetStorage={resetStorage} storage={publishData.storage} contract={publishData.contract} />
     </Fragment>
diff --git a/libs/remix-ui/run-tab/src/lib/types/index.ts b/libs/remix-ui/run-tab/src/lib/types/index.ts
index bd3dee8006..91d2368d77 100644
--- a/libs/remix-ui/run-tab/src/lib/types/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/index.ts
@@ -42,7 +42,8 @@ export interface SettingsProps {
   tooltip: (toasterMsg: string) => void,
   signMessageWithAddress: (account: string, message: string, modalContent: (hash: string, data: string) => JSX.Element, passphrase?: string) => void,
   passphrase: string,
-  web3ProviderDialog: () => JSX.Element
+  web3ProviderDialog: () => JSX.Element,
+  setSendValue: (value: string) => void
 }
 
 export interface EnvironmentProps {
@@ -95,6 +96,7 @@ export interface GasPriceProps {
 
 export interface ValueProps {
   setUnit: (unit: 'ether' | 'finney' | 'gwei' | 'wei') => void,
+  setSendValue: (value: string) => void,
   sendValue: string,
   sendUnit: string
 }

From ef1594b75a7e654d0295b065d8e41a3ad8d3ac8e Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Tue, 4 Jan 2022 17:00:12 +0100
Subject: [PATCH 150/168] Fixed failing test

---
 .../src/commands/addAtAddressInstance.ts      | 10 ++++---
 .../src/tests/runAndDeploy.test.ts            |  3 +--
 apps/remix-ide-e2e/src/tests/terminal.test.ts |  4 +--
 .../src/tests/transactionExecution.test.ts    | 27 ++++++++-----------
 apps/remix-ide-e2e/src/types/index.d.ts       |  2 +-
 .../src/lib/components/universalDappUI.tsx    |  3 ++-
 6 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/apps/remix-ide-e2e/src/commands/addAtAddressInstance.ts b/apps/remix-ide-e2e/src/commands/addAtAddressInstance.ts
index 6f4be87be1..a712d45cc7 100644
--- a/apps/remix-ide-e2e/src/commands/addAtAddressInstance.ts
+++ b/apps/remix-ide-e2e/src/commands/addAtAddressInstance.ts
@@ -2,9 +2,9 @@ import { NightwatchBrowser } from 'nightwatch'
 import EventEmitter from 'events'
 
 class addAtAddressInstance extends EventEmitter {
-  command (this: NightwatchBrowser, address: string, isValidFormat: boolean, isValidChecksum: boolean): NightwatchBrowser {
+  command (this: NightwatchBrowser, address: string, isValidFormat: boolean, isValidChecksum: boolean, isAbi = true): NightwatchBrowser {
     this.api.perform((done: VoidFunction) => {
-      addInstance(this.api, address, isValidFormat, isValidChecksum, () => {
+      addInstance(this.api, address, isValidFormat, isValidChecksum, isAbi, () => {
         done()
         this.emit('complete')
       })
@@ -13,13 +13,15 @@ class addAtAddressInstance extends EventEmitter {
   }
 }
 
-function addInstance (browser: NightwatchBrowser, address: string, isValidFormat: boolean, isValidChecksum: boolean, callback: VoidFunction) {
+function addInstance (browser: NightwatchBrowser, address: string, isValidFormat: boolean, isValidChecksum: boolean, isAbi: boolean, callback: VoidFunction) {
   browser.clickLaunchIcon('udapp').clearValue('.ataddressinput').setValue('.ataddressinput', address, function () {
     if (!isValidFormat || !isValidChecksum) browser.assert.elementPresent('button[id^="runAndDeployAtAdressButton"]:disabled')
-    else {
+    else if (isAbi) {
       browser.click('button[id^="runAndDeployAtAdressButton"]')
         .waitForElementPresent('[data-id="udappNotify-modal-footer-ok-react"]')
         .click('[data-id="udappNotify-modal-footer-ok-react"]')
+    } else {
+      browser.click('button[id^="runAndDeployAtAdressButton"]')
     }
     callback()
   })
diff --git a/apps/remix-ide-e2e/src/tests/runAndDeploy.test.ts b/apps/remix-ide-e2e/src/tests/runAndDeploy.test.ts
index b4bfe814b7..7b3315e614 100644
--- a/apps/remix-ide-e2e/src/tests/runAndDeploy.test.ts
+++ b/apps/remix-ide-e2e/src/tests/runAndDeploy.test.ts
@@ -67,8 +67,7 @@ module.exports = {
 
   'Should run low level interaction (fallback function) #group3': function (browser: NightwatchBrowser) {
     browser.waitForElementPresent('*[data-id="remixIdeSidePanel"]')
-      .waitForElementPresent('*[data-id="universalDappUiTitleExpander"]')
-      .click('*[data-id="universalDappUiTitleExpander"]')
+      .clickInstance(0)
       .waitForElementPresent('*[data-id="pluginManagerSettingsDeployAndRunLLTxSendTransaction"]')
       .click('*[data-id="pluginManagerSettingsDeployAndRunLLTxSendTransaction"]')
       .pause(5000)
diff --git a/apps/remix-ide-e2e/src/tests/terminal.test.ts b/apps/remix-ide-e2e/src/tests/terminal.test.ts
index 0bcfbcb3d7..ed5f94aff1 100644
--- a/apps/remix-ide-e2e/src/tests/terminal.test.ts
+++ b/apps/remix-ide-e2e/src/tests/terminal.test.ts
@@ -109,10 +109,10 @@ module.exports = {
       .waitForElementContainsText('*[data-id="terminalJournal"]', 'Contract Address:', 60000)
       .waitForElementContainsText('*[data-id="terminalJournal"]', '0xd9145CCE52D386f254917e481eB44e9943F39138', 60000)
       .waitForElementContainsText('*[data-id="terminalJournal"]', 'Deployment successful.', 60000)
-      .addAtAddressInstance('0xd9145CCE52D386f254917e481eB44e9943F39138', true, true)
+      .addAtAddressInstance('0xd9145CCE52D386f254917e481eB44e9943F39138', true, true, false)
       .click('*[data-id="terminalClearConsole"]') // clear the terminal
       .waitForElementPresent('*[data-id="universalDappUiContractActionWrapper"]', 60000)
-      .click('*[data-id="universalDappUiTitleExpander"]')
+      .clickInstance(0)
       .clickFunction('changeOwner - transact (not payable)', { types: 'address newOwner', values: '0xd9145CCE52D386f254917e481eB44e9943F39138' }) // execute the "changeOwner" function
       .waitForElementContainsText('*[data-id="terminalJournal"]', 'previousOwner', 60000) // check that the script is logging the event
       .waitForElementContainsText('*[data-id="terminalJournal"]', '0x5B38Da6a701c568545dCfcB03FcB875f56beddC4', 60000) // check that the script is logging the event
diff --git a/apps/remix-ide-e2e/src/tests/transactionExecution.test.ts b/apps/remix-ide-e2e/src/tests/transactionExecution.test.ts
index cfb2c7a323..1be9168abb 100644
--- a/apps/remix-ide-e2e/src/tests/transactionExecution.test.ts
+++ b/apps/remix-ide-e2e/src/tests/transactionExecution.test.ts
@@ -15,11 +15,8 @@ module.exports = {
     browser.testContracts('Untitled.sol', sources[0]['Untitled.sol'], ['TestContract'])
       .clickLaunchIcon('udapp')
       .selectAccount('0xCA35b7d915458EF540aDe6068dFe2F44E8fa733c') // this account will be used for this test suite
-      .click('#runTabView button[class^="instanceButton"]')
-      .waitForElementPresent('.instance:nth-of-type(2)')
-      .click('.instance:nth-of-type(2) > div > button')
-      .click('#runTabView .instance div[class^="title"]')
-      .click('#runTabView .instance div[class^="title"]')
+      .click('.udapp_contractActionsContainerSingle > button')
+      .clickInstance(0)
       .clickFunction('f - transact (not payable)')
       .testFunction('last',
         {
@@ -45,9 +42,8 @@ module.exports = {
   'Test Complex Return Values #group1': function (browser: NightwatchBrowser) {
     browser.testContracts('returnValues.sol', sources[1]['returnValues.sol'], ['testReturnValues'])
       .clickLaunchIcon('udapp')
-      .click('#runTabView button[class^="instanceButton"]')
-      .waitForElementPresent('.instance:nth-of-type(2)')
-      .click('.instance:nth-of-type(2) > div > button')
+      .click('.udapp_contractActionsContainerSingle > button')
+      .clickInstance(0)
       .clickFunction('retunValues1 - transact (not payable)')
       .testFunction('last',
         {
@@ -90,9 +86,8 @@ module.exports = {
   'Test Complex Input Values #group2': function (browser: NightwatchBrowser) {
     browser.testContracts('inputValues.sol', sources[2]['inputValues.sol'], ['test'])
       .clickLaunchIcon('udapp')
-      .click('#runTabView button[class^="instanceButton"]')
-      .waitForElementPresent('.instance:nth-of-type(2)')
-      .click('.instance:nth-of-type(2) > div > button')
+      .click('.udapp_contractActionsContainerSingle > button')
+      .clickInstance(0)
       .clickFunction('inputValue1 - transact (not payable)', { types: 'uint256 _u, int256 _i, string _str', values: '"2343242", "-4324324", "string _ string _  string _  string _  string _  string _  string _  string _  string _  string _"' })
       .testFunction('last',
         {
@@ -136,8 +131,8 @@ module.exports = {
     browser.testContracts('eventFunctionInput.sol', sources[3]['eventFunctionInput.sol'], ['C'])
       .clickLaunchIcon('udapp')
       .selectAccount('0xCA35b7d915458EF540aDe6068dFe2F44E8fa733c') // this account will be used for this test suite
-      .click('#runTabView button[class^="instanceButton"]')
-      .waitForElementPresent('.instance:nth-of-type(2)')
+      .click('.udapp_contractActionsContainerSingle > button')
+      .clickInstance(0)
       .click('*[data-id="deployAndRunClearInstances"]')
   },
 
@@ -145,7 +140,7 @@ module.exports = {
     browser.testContracts('customError.sol', sources[4]['customError.sol'], ['C'])
       .clickLaunchIcon('udapp')
       .selectAccount('0xCA35b7d915458EF540aDe6068dFe2F44E8fa733c') // this account will be used for this test suite
-      .click('#runTabView button[class^="instanceButton"]')
+      .click('.udapp_contractActionsContainerSingle > button')
       .clickInstance(0)
       .clickFunction('g - transact (not payable)')
       .pause(5000)
@@ -168,7 +163,7 @@ module.exports = {
       .clearTransactions()
       .click('*[data-id="settingsVMLondonMode"]') // switch to London fork
       .selectAccount('0xCA35b7d915458EF540aDe6068dFe2F44E8fa733c') // this account will be used for this test suite
-      .click('#runTabView button[class^="instanceButton"]')
+      .click('.udapp_contractActionsContainerSingle > button')
       .clickInstance(0)
       .clickFunction('g - transact (not payable)')
       .journalLastChildIncludes('Error provided by the contract:')
@@ -186,7 +181,7 @@ module.exports = {
   'Should Compile and Deploy a contract which define a custom error in a library, the error should be logged in the terminal #group3': function (browser: NightwatchBrowser) {
     browser.testContracts('customErrorLib.sol', sources[5]['customErrorLib.sol'], ['D'])
       .clickLaunchIcon('udapp')
-      .click('#runTabView button[class^="instanceButton"]')
+      .click('.udapp_contractActionsContainerSingle > button')
       .clickInstance(1)
       .clickFunction('h - transact (not payable)')
       .pause(5000)
diff --git a/apps/remix-ide-e2e/src/types/index.d.ts b/apps/remix-ide-e2e/src/types/index.d.ts
index 1ddb10aa10..f9a7c35d63 100644
--- a/apps/remix-ide-e2e/src/types/index.d.ts
+++ b/apps/remix-ide-e2e/src/types/index.d.ts
@@ -17,7 +17,7 @@ declare module 'nightwatch' {
         testFunction(txHash: string, expectedInput: NightwatchTestFunctionExpectedInput): NightwatchBrowser,
         goToVMTraceStep(step: number, incr?: number): NightwatchBrowser,
         checkVariableDebug(id: string, debugValue: NightwatchCheckVariableDebugValue): NightwatchBrowser,
-        addAtAddressInstance(address: string, isValidFormat: boolean, isValidChecksum: boolean): NightwatchBrowser,
+        addAtAddressInstance(address: string, isValidFormat: boolean, isValidChecksum: boolean, isAbi?: boolean): NightwatchBrowser,
         modalFooterOKClick(id?: string): NightwatchBrowser,
         clickInstance(index: number): NightwatchBrowser,
         journalLastChildIncludes(val: string): NightwatchBrowser,
diff --git a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
index fc5460b611..2aa43e96b7 100644
--- a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
@@ -229,7 +229,7 @@ export function UniversalDappUI (props: UdappProps) {
       <div className="udapp_cActionsWrapper" data-id="universalDappUiContractActionWrapper">
         <div className="udapp_contractActionsContainer">
           {
-            contractABI && contractABI.map((funcABI) => {
+            contractABI && contractABI.map((funcABI, index) => {
               if (funcABI.type !== 'function') return null
               const isConstant = funcABI.constant !== undefined ? funcABI.constant : false
               const lookupOnly = funcABI.stateMutability === 'view' || funcABI.stateMutability === 'pure' || isConstant
@@ -243,6 +243,7 @@ export function UniversalDappUI (props: UdappProps) {
                 inputs={inputs}
                 evmBC={evmBC}
                 lookupOnly={lookupOnly}
+                key={index}
               />
             })
           }

From e53956b73eb3973160f843dff7512fc0717c2a4b Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Wed, 5 Jan 2022 11:04:34 +0100
Subject: [PATCH 151/168] Fixed signMessage, recorder test

---
 .../remix-ide-e2e/src/commands/signMessage.ts | 41 ++++++++-------
 .../src/commands/verifyCallReturnValue.ts     |  3 +-
 apps/remix-ide-e2e/src/tests/recorder.test.ts | 33 +++++++-----
 .../remix-ui/run-tab/src/lib/actions/index.ts | 14 +++---
 .../run-tab/src/lib/actions/payload.ts        |  7 +--
 .../src/lib/components/recorderCardUI.tsx     |  4 +-
 .../src/lib/components/universalDappUI.tsx    | 50 +++++++++++--------
 .../run-tab/src/lib/reducers/runTab.ts        |  8 +--
 libs/remix-ui/run-tab/src/lib/types/index.ts  | 14 +++---
 9 files changed, 97 insertions(+), 77 deletions(-)

diff --git a/apps/remix-ide-e2e/src/commands/signMessage.ts b/apps/remix-ide-e2e/src/commands/signMessage.ts
index d40735d76e..273871505e 100644
--- a/apps/remix-ide-e2e/src/commands/signMessage.ts
+++ b/apps/remix-ide-e2e/src/commands/signMessage.ts
@@ -20,25 +20,28 @@ function signMsg (browser: NightwatchBrowser, msg: string, cb: (hash: { value: s
   browser
     .waitForElementPresent('i[id="remixRunSignMsg"]')
     .click('i[id="remixRunSignMsg"]')
-    .waitForElementVisible('textarea[id="prompt_text"]')
-    .setValue('textarea[id="prompt_text"]', msg, () => {
-      browser.modalFooterOKClick().perform(
-        (client, done) => {
-          browser.waitForElementVisible('span[id="remixRunSignMsgHash"]').getText('span[id="remixRunSignMsgHash"]', (v) => { hash = v; done() })
-        }
-      )
-        .perform(
-          (client, done) => {
-            browser.waitForElementVisible('span[id="remixRunSignMsgSignature"]').getText('span[id="remixRunSignMsgSignature"]', (v) => { signature = v; done() })
-          }
-        )
-        .modalFooterOKClick()
-        .perform(
-          () => {
-            cb(hash, signature)
-          }
-        )
-    })
+    .waitForElementVisible('*[data-id="signMessageTextarea"]', 120000)
+    .click('*[data-id="signMessageTextarea"]')
+    .setValue('*[data-id="signMessageTextarea"]', msg)
+    .waitForElementPresent('[data-id="udappNotify-modal-footer-ok-react"]')
+    .click('[data-id="udappNotify-modal-footer-ok-react"]')
+    .perform(
+      (client, done) => {
+        browser.waitForElementVisible('span[id="remixRunSignMsgHash"]').getText('span[id="remixRunSignMsgHash"]', (v) => { hash = v; done() })
+      }
+    )
+    .perform(
+      (client, done) => {
+        browser.waitForElementVisible('span[id="remixRunSignMsgSignature"]').getText('span[id="remixRunSignMsgSignature"]', (v) => { signature = v; done() })
+      }
+    )
+    .waitForElementPresent('[data-id="udappNotify-modal-footer-ok-react"]')
+    .click('[data-id="udappNotify-modal-footer-ok-react"]')
+    .perform(
+      () => {
+        cb(hash, signature)
+      }
+    )
 }
 
 module.exports = SelectContract
diff --git a/apps/remix-ide-e2e/src/commands/verifyCallReturnValue.ts b/apps/remix-ide-e2e/src/commands/verifyCallReturnValue.ts
index af049164f7..c17fc1e130 100644
--- a/apps/remix-ide-e2e/src/commands/verifyCallReturnValue.ts
+++ b/apps/remix-ide-e2e/src/commands/verifyCallReturnValue.ts
@@ -15,7 +15,7 @@ class VerifyCallReturnValue extends EventEmitter {
 
 function verifyCallReturnValue (browser: NightwatchBrowser, address: string, checks: string[], done: VoidFunction) {
   browser.execute(function (address: string) {
-    const nodes = document.querySelectorAll('#instance' + address + ' div[class^="contractActionsContainer"] div[class^="value"]') as NodeListOf<HTMLElement>
+    const nodes = document.querySelectorAll('#instance' + address + ' [data-id="udapp_value"]') as NodeListOf<HTMLElement>
     const ret = []
     for (let k = 0; k < nodes.length; k++) {
       const text = nodes[k].innerText ? nodes[k].innerText : nodes[k].textContent
@@ -23,7 +23,6 @@ function verifyCallReturnValue (browser: NightwatchBrowser, address: string, che
     }
     return ret
   }, [address], function (result) {
-    console.log('verifyCallReturnValue', result)
     for (const k in checks) {
       browser.assert.equal(result.value[k].trim(), checks[k].trim())
     }
diff --git a/apps/remix-ide-e2e/src/tests/recorder.test.ts b/apps/remix-ide-e2e/src/tests/recorder.test.ts
index 58e1f867ae..838ac567da 100644
--- a/apps/remix-ide-e2e/src/tests/recorder.test.ts
+++ b/apps/remix-ide-e2e/src/tests/recorder.test.ts
@@ -17,16 +17,14 @@ module.exports = {
       .pause(5000)
       .clickLaunchIcon('udapp')
       .selectAccount('0xCA35b7d915458EF540aDe6068dFe2F44E8fa733c') // this account will be used for this test suite
-      .click('div[class^="cardContainer"] i[class^="arrow"]')
-      .click('#runTabView .runtransaction')
-      .waitForElementPresent('.instance:nth-of-type(2)')
-      .click('.instance:nth-of-type(2) > div > button')
-      .waitForElementPresent('.instance:nth-of-type(3)')
-      .click('.instance:nth-of-type(3) > div > button')
+      .click('[data-id="udapp_arrow"]')
+      .click('[data-id="runtransaction"]')
+      .clickInstance(0)
+      .clickInstance(1)
       .clickFunction('getInt - call')
       .clickFunction('getAddress - call')
       .clickFunction('getFromLib - call')
-      .waitForElementPresent('div[class^="contractActionsContainer"] div[class^="value"] ul')
+      .waitForElementPresent('[data-id="udapp_value"]')
       .getAddressAtPosition(1, (address) => {
         console.log('Test Recorder ' + address)
         addressRef = address
@@ -39,11 +37,15 @@ module.exports = {
       .testContracts('testRecorder.sol', sources[0]['testRecorder.sol'], ['testRecorder'])
       .clickLaunchIcon('udapp')
       .createContract('12')
-      .waitForElementPresent('.instance:nth-of-type(2)')
-      .click('.instance:nth-of-type(2) > div > button')
+      .clickInstance(0)
       .clickFunction('set - transact (not payable)', { types: 'uint256 _p', values: '34' })
       .click('i.savetransaction')
-      .modalFooterOKClick()
+      .waitForElementVisible('[data-id="udappNotify-modal-footer-ok-react"]')
+      .execute(function () {
+        const modalOk = document.querySelector('[data-id="udappNotify-modal-footer-ok-react"]') as any
+
+        modalOk.click()
+      })
       .getEditorValue(function (result) {
         const parsed = JSON.parse(result)
         browser.assert.equal(JSON.stringify(parsed.transactions[0].record.parameters), JSON.stringify(scenario.transactions[0].record.parameters))
@@ -73,11 +75,16 @@ module.exports = {
       .pause(1000)
       .createContract('')
       .click('i.savetransaction')
-      .modalFooterOKClick()
+      .waitForElementVisible('[data-id="udappNotify-modal-footer-ok-react"]')
+      .execute(function () {
+        const modalOk = document.querySelector('[data-id="udappNotify-modal-footer-ok-react"]') as any
+
+        modalOk.click()
+      })
       .click('*[data-id="deployAndRunClearInstances"]') // clear udapp
       .click('*[data-id="terminalClearConsole"]') // clear terminal
-      .click('#runTabView .runtransaction')
-      .clickInstance(1)
+      .click('[data-id="runtransaction"]')
+      .clickInstance(2)
       .pause(1000)
       .clickFunction('set2 - transact (not payable)', { types: 'uint256 _po', values: '10' })
       .testFunction('last',
diff --git a/libs/remix-ui/run-tab/src/lib/actions/index.ts b/libs/remix-ui/run-tab/src/lib/actions/index.ts
index 0d36c6c16e..6d7cd6790b 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/index.ts
@@ -550,7 +550,8 @@ export const updateTxFeeContent = (content: string) => {
   dispatch(setTxFeeContent(content))
 }
 
-const addInstance = (instance: { contractData?: ContractData, address: string, name: string, abi?: any, decodedResponse?: any }) => {
+const addInstance = (instance: { contractData?: ContractData, address: string, name: string, abi?: any, decodedResponse?: Record<number, any> }) => {
+  instance.decodedResponse = {}
   dispatch(addNewInstance(instance))
 }
 
@@ -590,7 +591,7 @@ export const getContext = () => {
 }
 
 export const runTransactions = (
-  index: number,
+  instanceIndex: number,
   lookupOnly: boolean,
   funcABI: FuncABI,
   inputsValues: string,
@@ -601,7 +602,8 @@ export const runTransactions = (
   logBuilder: (msg: string) => JSX.Element,
   mainnetPrompt: MainnetPrompt,
   gasEstimationPrompt: (msg: string) => JSX.Element,
-  passphrasePrompt: (msg: string) => JSX.Element) => {
+  passphrasePrompt: (msg: string) => JSX.Element,
+  funcIndex?: number) => {
   let callinfo = ''
   if (lookupOnly) callinfo = 'call'
   else if (funcABI.type === 'fallback' || funcABI.type === 'receive') callinfo = 'lowLevelInteracions'
@@ -625,9 +627,9 @@ export const runTransactions = (
       return terminalLogger(log)
     },
     (returnValue) => {
-      const decodedResponse = txFormat.decodeResponse(returnValue, funcABI)
+      const response = txFormat.decodeResponse(returnValue, funcABI)
 
-      dispatch(setDecodedResponse(index, decodedResponse))
+      dispatch(setDecodedResponse(instanceIndex, response, funcIndex))
     },
     (network, tx, gasEstimation, continueTxExecution, cancelCb) => {
       confirmationHandler(mainnetPrompt, network, tx, gasEstimation, continueTxExecution, cancelCb)
@@ -651,9 +653,7 @@ const saveScenario = (promptCb, cb) => {
     if (!fileProvider) return
     const newFile = path + '/' + plugin.REACT_API.recorder.pathToScenario
     try {
-      console.log('newFile: ', newFile)
       const newPath = await createNonClashingNameAsync(newFile, plugin.fileManager)
-      console.log('newPath: ', newPath)
       // eslint-disable-next-line standard/no-callback-literal
       if (!fileProvider.set(newPath, txJSON)) return cb('Failed to create file ' + newFile)
       plugin.fileManager.open(newFile)
diff --git a/libs/remix-ui/run-tab/src/lib/actions/payload.ts b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
index 7ba6172b32..bf547cbecf 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/payload.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/payload.ts
@@ -240,12 +240,13 @@ export const clearAllInstances = () => {
   }
 }
 
-export const setDecodedResponse = (index: number, decodedResponse) => {
+export const setDecodedResponse = (instanceIndex: number, response, funcIndex?: number) => {
   return {
     type: 'SET_DECODED_RESPONSE',
     payload: {
-      index,
-      decodedResponse
+      instanceIndex,
+      funcIndex,
+      response
     }
   }
 }
diff --git a/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx b/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx
index 2af2f05d3a..7cb30e65a6 100644
--- a/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx
@@ -16,7 +16,7 @@ export function RecorderUI (props: RecorderProps) {
           </div>
         </div>
         <div>
-          <div><i className="udapp_arrow fas fa-angle-down"></i></div>
+          <div><i className="udapp_arrow fas fa-angle-down" data-id="udapp_arrow"></i></div>
         </div>
       </div>
     )
@@ -43,7 +43,7 @@ export function RecorderUI (props: RecorderProps) {
               <i className="fas fa-save savetransaction udapp_recorder udapp_icon"
                 onClick={triggerRecordButton} title="Save Transactions" aria-hidden="true">
               </i>
-              <i className="fas fa-play runtransaction udapp_runTxs udapp_icon" title="Run Transactions" aria-hidden="true" onClick={handleClickRunButton}></i>
+              <i className="fas fa-play runtransaction udapp_runTxs udapp_icon" title="Run Transactions" data-id="runtransaction" aria-hidden="true" onClick={handleClickRunButton}></i>
             </div>
           </div>
         </TreeViewItem>
diff --git a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
index 2aa43e96b7..6388b07048 100644
--- a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
@@ -104,7 +104,7 @@ export function UniversalDappUI (props: UdappProps) {
     props.removeInstance(props.index)
   }
 
-  const runTransaction = (lookupOnly, funcABI: FuncABI, valArr, inputsValues) => {
+  const runTransaction = (lookupOnly, funcABI: FuncABI, valArr, inputsValues, funcIndex?: number) => {
     const functionName = funcABI.type === 'function' ? funcABI.name : `(${funcABI.type})`
     const logMsg = `${lookupOnly ? 'call' : 'transact'} to ${props.instance.name}.${functionName}`
 
@@ -121,7 +121,8 @@ export function UniversalDappUI (props: UdappProps) {
       props.logBuilder,
       props.mainnetPrompt,
       props.gasEstimationPrompt,
-      props.passphrasePrompt)
+      props.passphrasePrompt,
+      funcIndex)
   }
 
   const extractDataDefault = (item, parent?) => {
@@ -235,27 +236,34 @@ export function UniversalDappUI (props: UdappProps) {
               const lookupOnly = funcABI.stateMutability === 'view' || funcABI.stateMutability === 'pure' || isConstant
               const inputs = props.getFuncABIInputs(funcABI)
 
-              return <ContractGUI
-                funcABI={funcABI}
-                clickCallBack={(valArray: { name: string, type: string }[], inputsValues: string) => {
-                  runTransaction(lookupOnly, funcABI, valArray, inputsValues)
-                }}
-                inputs={inputs}
-                evmBC={evmBC}
-                lookupOnly={lookupOnly}
-                key={index}
-              />
+              return <>
+                <ContractGUI
+                  funcABI={funcABI}
+                  clickCallBack={(valArray: { name: string, type: string }[], inputsValues: string) => {
+                    runTransaction(lookupOnly, funcABI, valArray, inputsValues, index)
+                  }}
+                  inputs={inputs}
+                  evmBC={evmBC}
+                  lookupOnly={lookupOnly}
+                  key={index}
+                />
+                <div className="udapp_value" data-id="udapp_value">
+                  <TreeView id="treeView">
+                    {
+                      Object.keys(props.instance.decodedResponse || {}).map((key) => {
+                        const funcIndex = index.toString()
+                        const response = props.instance.decodedResponse[key]
+
+                        return key === funcIndex ? Object.keys(response || {}).map((innerkey) => {
+                          return renderData(props.instance.decodedResponse[key][innerkey], response, innerkey, innerkey)
+                        }) : null
+                      })
+                    }
+                  </TreeView>
+                </div>
+              </>
             })
           }
-          <div className="udapp_value">
-            <TreeView id="treeView">
-              {
-                Object.keys(props.instance.decodedResponse || {}).map((innerkey) => {
-                  return renderData(props.instance.decodedResponse[innerkey], props.instance.decodedResponse, innerkey, innerkey)
-                })
-              }
-            </TreeView>
-          </div>
         </div>
         <div className="d-flex flex-column">
           <div className="d-flex flex-row justify-content-between mt-2">
diff --git a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
index bf7f754945..e544951971 100644
--- a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
+++ b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
@@ -69,7 +69,7 @@ export interface RunTabState {
       contractData?: ContractData,
       address: string,
       name: string,
-      decodedResponse?: any,
+      decodedResponse?: Record<number, any>,
       abi?: any
     }[],
     error: string
@@ -553,7 +553,7 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
     }
 
     case 'ADD_INSTANCE': {
-      const payload: { contractData: ContractData, address: string, name: string, abi?: any, decodedResponse?: any } = action.payload
+      const payload: { contractData: ContractData, address: string, name: string, abi?: any, decodedResponse?: Record<number, any> } = action.payload
 
       return {
         ...state,
@@ -587,14 +587,14 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
     }
 
     case 'SET_DECODED_RESPONSE': {
-      const payload: any = action.payload
+      const payload: { instanceIndex: number, funcIndex: number, response: any } = action.payload
 
       return {
         ...state,
         instances: {
           ...state.instances,
           instanceList: state.instances.instanceList.map((instance, index) => {
-            if (payload.index === index) instance.decodedResponse = payload.decodedResponse
+            if (payload.instanceIndex === index) instance.decodedResponse[payload.funcIndex] = payload.response
             return instance
           })
         }
diff --git a/libs/remix-ui/run-tab/src/lib/types/index.ts b/libs/remix-ui/run-tab/src/lib/types/index.ts
index 91d2368d77..c641962fcc 100644
--- a/libs/remix-ui/run-tab/src/lib/types/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/index.ts
@@ -204,7 +204,7 @@ export interface InstanceContainerProps {
       contractData?: ContractData,
       address: string,
       name: string,
-      decodedResponse?: any,
+      decodedResponse?: Record<number, any>,
       abi?: any
     }[],
     error: string
@@ -213,7 +213,7 @@ export interface InstanceContainerProps {
   removeInstance: (index: number) => void,
   getContext: () => 'memory' | 'blockchain',
   runTransactions: (
-    index: number,
+    instanceIndex: number,
     lookupOnly: boolean,
     funcABI: FuncABI,
     inputsValues: string,
@@ -224,7 +224,8 @@ export interface InstanceContainerProps {
     logBuilder: (msg: string) => JSX.Element,
     mainnetPrompt: MainnetPrompt,
     gasEstimationPrompt: (msg: string) => JSX.Element,
-    passphrasePrompt: (msg: string) => JSX.Element) => void,
+    passphrasePrompt: (msg: string) => JSX.Element,
+    funcIndex?: number) => void,
   gasEstimationPrompt: (msg: string) => JSX.Element,
   logBuilder: (msg: string) => JSX.Element,
   passphrasePrompt: (message: string) => JSX.Element,
@@ -277,7 +278,7 @@ export interface UdappProps {
     contractData?: ContractData,
     address: string,
     name: string,
-    decodedResponse?: any,
+    decodedResponse?: Record<number, any>,
     abi?: any
   },
   context: 'memory' | 'blockchain',
@@ -288,7 +289,7 @@ export interface UdappProps {
   passphrasePrompt: (message: string) => JSX.Element,
   mainnetPrompt: (tx: Tx, network: Network, amount: string, gasEstimation: string, gasFees: (maxFee: string, cb: (txFeeText: string, priceStatus: boolean) => void) => void, determineGasPrice: (cb: (txFeeText: string, gasPriceValue: string, gasPriceStatus: boolean) => void) => void) => JSX.Element,
   runTransactions: (
-    index: number,
+    instanceIndex: number,
     lookupOnly: boolean,
     funcABI: FuncABI,
     inputsValues: string,
@@ -299,7 +300,8 @@ export interface UdappProps {
     logBuilder: (msg: string) => JSX.Element,
     mainnetPrompt: MainnetPrompt,
     gasEstimationPrompt: (msg: string) => JSX.Element,
-    passphrasePrompt: (msg: string) => JSX.Element) => void,
+    passphrasePrompt: (msg: string) => JSX.Element,
+    funcIndex?: number) => void,
   sendValue: string,
   getFuncABIInputs: (funcABI: FuncABI) => string
 }

From 32c252a125f92ef8ecfec091b19756cd74546456 Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Thu, 6 Jan 2022 10:30:27 +0100
Subject: [PATCH 152/168] Fixed specialFunction e2e

---
 .../src/commands/sendLowLevelTx.ts            |  5 +++--
 .../src/tests/specialFunctions.test.ts        |  1 +
 .../src/lib/components/contractDropdownUI.tsx | 19 +++++++++++--------
 .../run-tab/src/lib/components/value.tsx      | 19 +++++++++----------
 .../run-tab/src/lib/reducers/runTab.ts        |  7 +++++--
 libs/remix-ui/run-tab/src/lib/types/index.ts  |  1 +
 6 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/apps/remix-ide-e2e/src/commands/sendLowLevelTx.ts b/apps/remix-ide-e2e/src/commands/sendLowLevelTx.ts
index a910a391c8..94f4a249d3 100644
--- a/apps/remix-ide-e2e/src/commands/sendLowLevelTx.ts
+++ b/apps/remix-ide-e2e/src/commands/sendLowLevelTx.ts
@@ -6,10 +6,11 @@ class sendLowLevelTx extends EventEmitter {
     console.log('low level transact to ', address, value, callData)
     this.api.waitForElementVisible(`#instance${address} #deployAndRunLLTxSendTransaction`, 1000)
       .clearValue(`#instance${address} #deployAndRunLLTxCalldata`)
-      .setValue(`#instance${address} #deployAndRunLLTxCalldata`, callData)
+      .sendKeys(`#instance${address} #deployAndRunLLTxCalldata`, ['_', this.api.Keys.BACK_SPACE, callData])
       .waitForElementVisible('#value')
       .clearValue('#value')
-      .setValue('#value', value)
+      .sendKeys('#value', ['1', this.api.Keys.BACK_SPACE, value])
+      .pause(2000)
       .scrollAndClick(`#instance${address} #deployAndRunLLTxSendTransaction`)
       .perform(() => {
         this.emit('complete')
diff --git a/apps/remix-ide-e2e/src/tests/specialFunctions.test.ts b/apps/remix-ide-e2e/src/tests/specialFunctions.test.ts
index dd405cc243..b3e463b63f 100644
--- a/apps/remix-ide-e2e/src/tests/specialFunctions.test.ts
+++ b/apps/remix-ide-e2e/src/tests/specialFunctions.test.ts
@@ -173,6 +173,7 @@ module.exports = {
       .waitForElementVisible('#value')
       .clearValue('#value')
       .setValue('#value', '0')
+      .pause(2000)
       .createContract('')
       .clickInstance(1)
       .pause(1000)
diff --git a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
index e34ba83250..7afc77ee83 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
@@ -26,7 +26,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
   const [loadedContractData, setLoadedContractData] = useState<ContractData>(null)
   const [constructorInterface, setConstructorInterface] = useState<FuncABI>(null)
   const [constructorInputs, setConstructorInputs] = useState(null)
-  const { contractList, loadType, currentFile } = props.contracts
+  const { contractList, loadType, currentFile, compilationCount } = props.contracts
 
   useEffect(() => {
     enableAtAddress(false)
@@ -72,20 +72,23 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
       setCompFails('block')
     }
     initSelectedContract()
-  }, [loadType, currentFile])
+  }, [loadType, currentFile, compilationCount])
 
   useEffect(() => {
     if (selectedContract) {
       const contract = contractList.find(contract => contract.alias === selectedContract)
-      const loadedContractData = props.getSelectedContract(selectedContract, contract.name)
 
-      if (loadedContractData) {
-        setLoadedContractData(loadedContractData)
-        setConstructorInterface(loadedContractData.getConstructorInterface())
-        setConstructorInputs(loadedContractData.getConstructorInputs())
+      if (contract) {
+        const loadedContractData = props.getSelectedContract(selectedContract, contract.name)
+
+        if (loadedContractData) {
+          setLoadedContractData(loadedContractData)
+          setConstructorInterface(loadedContractData.getConstructorInterface())
+          setConstructorInputs(loadedContractData.getConstructorInputs())
+        }
       }
     }
-  }, [selectedContract])
+  }, [selectedContract, compilationCount])
 
   useEffect(() => {
     initSelectedContract()
diff --git a/libs/remix-ui/run-tab/src/lib/components/value.tsx b/libs/remix-ui/run-tab/src/lib/components/value.tsx
index dcb90745b6..3b2008a5f1 100644
--- a/libs/remix-ui/run-tab/src/lib/components/value.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/value.tsx
@@ -5,11 +5,11 @@ import { isNumeric } from '@remix-ui/helper'
 import { ValueProps } from '../types'
 
 export function ValueUI (props: ValueProps) {
-  const inputValue = useRef(null)
-  const [sendValue, setSendValue] = useState<string>('')
+  const [sendValue, setSendValue] = useState<string>(props.sendValue)
+  const inputValue = useRef<HTMLInputElement>({} as HTMLInputElement)
 
   useEffect(() => {
-    sendValue && props.setSendValue(sendValue)
+    (sendValue !== props.sendValue) && props.setSendValue(sendValue)
   }, [sendValue])
 
   const validateInputKey = (e) => {
@@ -27,8 +27,7 @@ export function ValueUI (props: ValueProps) {
     if (!value) {
       // assign 0 if given value is
       // - empty
-      setSendValue('0')
-      return
+      return setSendValue('0')
     }
 
     let v
@@ -59,16 +58,16 @@ export function ValueUI (props: ValueProps) {
           className="form-control udapp_gasNval udapp_col2"
           id="value"
           data-id="dandrValue"
-          value={sendValue || '0'}
           title="Enter the value and choose the unit"
           onKeyPress={validateInputKey}
           onChange={validateValue}
+          value={props.sendValue}
         />
         <select name="unit" value={props.sendUnit} className="form-control p-1 udapp_gasNvalUnit udapp_col2_2 custom-select" id="unit" onChange={(e) => { props.setUnit((e.target.value) as 'ether' | 'finney' | 'gwei' | 'wei') }}>
-          <option data-unit="wei">Wei</option>
-          <option data-unit="gwei">Gwei</option>
-          <option data-unit="finney">Finney</option>
-          <option data-unit="ether">Ether</option>
+          <option data-unit="wei" value='wei'>Wei</option>
+          <option data-unit="gwei" value="gwei">Gwei</option>
+          <option data-unit="finney" value="finney">Finney</option>
+          <option data-unit="ether" value="ether">Ether</option>
         </select>
       </div>
     </div>
diff --git a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
index e544951971..7ad0b0f500 100644
--- a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
+++ b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
@@ -52,6 +52,7 @@ export interface RunTabState {
     }[],
     loadType: 'abi' | 'sol' | 'other'
     currentFile: string,
+    compilationCount: number,
     isRequesting: boolean,
     isSuccessful: boolean,
     error: string
@@ -91,7 +92,7 @@ export const runTabInitialState: RunTabState = {
     selectedAccount: ''
   },
   sendValue: '0',
-  sendUnit: 'ether',
+  sendUnit: 'wei',
   gasLimit: 3000000,
   selectExEnv: 'vm-london',
   personalMode: false,
@@ -145,6 +146,7 @@ export const runTabInitialState: RunTabState = {
     contractList: [],
     loadType: 'other',
     currentFile: '',
+    compilationCount: 0,
     isRequesting: false,
     isSuccessful: false,
     error: null
@@ -475,7 +477,8 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
         ...state,
         contracts: {
           ...state.contracts,
-          currentFile: payload
+          currentFile: payload,
+          compilationCount: state.contracts.compilationCount + 1
         }
       }
     }
diff --git a/libs/remix-ui/run-tab/src/lib/types/index.ts b/libs/remix-ui/run-tab/src/lib/types/index.ts
index c641962fcc..0647fca2fd 100644
--- a/libs/remix-ui/run-tab/src/lib/types/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/types/index.ts
@@ -156,6 +156,7 @@ export interface ContractDropdownProps {
     }[],
     loadType: 'abi' | 'sol' | 'other',
     currentFile: string,
+    compilationCount: number,
     isRequesting: boolean,
     isSuccessful: boolean,
     error: string

From bd884033044e1847d7ed7fe624e6c451fd96485d Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Thu, 6 Jan 2022 10:34:52 +0100
Subject: [PATCH 153/168] Fixed txListener e2e

---
 apps/remix-ide-e2e/src/tests/txListener.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/remix-ide-e2e/src/tests/txListener.test.ts b/apps/remix-ide-e2e/src/tests/txListener.test.ts
index 7a7b170d6e..41dc6882e7 100644
--- a/apps/remix-ide-e2e/src/tests/txListener.test.ts
+++ b/apps/remix-ide-e2e/src/tests/txListener.test.ts
@@ -26,7 +26,7 @@ module.exports = {
       .setValue('input[placeholder="bytes32[] proposalNames"]', '["0x48656c6c6f20576f726c64210000000000000000000000000000000000000000"]')
       .click('*[data-id="Deploy - transact (not payable)"]')
       .waitForElementPresent('*[data-id="universalDappUiContractActionWrapper"]', 60000)
-      .click('*[data-id="universalDappUiTitleExpander"]')
+      .clickInstance(0)
       .clickFunction('delegate - transact (not payable)', { types: 'address to', values: '"0x4b0897b0513fdc7c541b6d9d7e929c4e5364d2db"' })
       .testFunction('last',
         {

From 19bbc2b791dddc5d04149f612a84e765438e67e4 Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Thu, 6 Jan 2022 10:52:22 +0100
Subject: [PATCH 154/168] Fixed failing chrome test

---
 apps/remix-ide-e2e/src/commands/addAtAddressInstance.ts | 6 +++++-
 apps/remix-ide-e2e/src/tests/ballot.test.ts             | 6 +++++-
 apps/remix-ide-e2e/src/tests/ballot_0_4_11.test.ts      | 6 +++++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/apps/remix-ide-e2e/src/commands/addAtAddressInstance.ts b/apps/remix-ide-e2e/src/commands/addAtAddressInstance.ts
index a712d45cc7..39df8c7ef0 100644
--- a/apps/remix-ide-e2e/src/commands/addAtAddressInstance.ts
+++ b/apps/remix-ide-e2e/src/commands/addAtAddressInstance.ts
@@ -19,7 +19,11 @@ function addInstance (browser: NightwatchBrowser, address: string, isValidFormat
     else if (isAbi) {
       browser.click('button[id^="runAndDeployAtAdressButton"]')
         .waitForElementPresent('[data-id="udappNotify-modal-footer-ok-react"]')
-        .click('[data-id="udappNotify-modal-footer-ok-react"]')
+        .execute(function () {
+          const modal = document.querySelector('[data-id="udappNotify-modal-footer-ok-react"]') as any
+
+          modal.click()
+        })
     } else {
       browser.click('button[id^="runAndDeployAtAdressButton"]')
     }
diff --git a/apps/remix-ide-e2e/src/tests/ballot.test.ts b/apps/remix-ide-e2e/src/tests/ballot.test.ts
index bb41a54029..cc2a32cb2f 100644
--- a/apps/remix-ide-e2e/src/tests/ballot.test.ts
+++ b/apps/remix-ide-e2e/src/tests/ballot.test.ts
@@ -85,7 +85,11 @@ module.exports = {
       .clickLaunchIcon('udapp')
       .click('*[data-id="settingsWeb3Mode"]')
       .waitForElementPresent('[data-id="udappNotify-modal-footer-ok-react"]')
-      .click('[data-id="udappNotify-modal-footer-ok-react"]')
+      .execute(function () {
+        const modal = document.querySelector('[data-id="udappNotify-modal-footer-ok-react"]') as any
+
+        modal.click()
+      })
       .pause(5000)
       .execute(function () {
         const env: any = document.getElementById('selectExEnvOptions')
diff --git a/apps/remix-ide-e2e/src/tests/ballot_0_4_11.test.ts b/apps/remix-ide-e2e/src/tests/ballot_0_4_11.test.ts
index 1b7f97d5b3..a8bfa626e4 100644
--- a/apps/remix-ide-e2e/src/tests/ballot_0_4_11.test.ts
+++ b/apps/remix-ide-e2e/src/tests/ballot_0_4_11.test.ts
@@ -80,7 +80,11 @@ module.exports = {
       .clickLaunchIcon('udapp')
       .click('*[data-id="settingsWeb3Mode"]')
       .waitForElementPresent('[data-id="udappNotify-modal-footer-ok-react"]')
-      .click('[data-id="udappNotify-modal-footer-ok-react"]')
+      .execute(function () {
+        const modal = document.querySelector('[data-id="udappNotify-modal-footer-ok-react"]') as any
+
+        modal.click()
+      })
       .clickLaunchIcon('solidity')
       .clickLaunchIcon('udapp')
       .pause(2000)

From 0841a0a353440c5f0aca0cc3fa035741a508aec5 Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Thu, 6 Jan 2022 13:11:35 +0100
Subject: [PATCH 155/168] Use old eslint config

---
 .eslintrc                                     | 21 +++++++++++++++++++
 .eslintrc.json                                |  8 ++++++-
 apps/remix-ide-e2e/.eslintrc                  |  2 +-
 apps/remix-ide-e2e/src/local-plugin/.eslintrc |  2 +-
 libs/remix-analyzer/.eslintrc                 |  2 +-
 libs/remix-astwalker/.eslintrc                |  2 +-
 libs/remix-core-plugin/.eslintrc              |  2 +-
 libs/remix-debug/.eslintrc                    |  2 +-
 libs/remix-lib/.eslintrc                      |  2 +-
 libs/remix-simulator/.eslintrc                |  2 +-
 libs/remix-solidity/.eslintrc                 |  2 +-
 libs/remix-tests/.eslintrc                    |  2 +-
 libs/remix-ui/clipboard/.eslintrc             |  2 +-
 libs/remix-ui/run-tab/.eslintrc.json          |  2 +-
 libs/remix-url-resolver/.eslintrc             |  2 +-
 libs/remixd/.eslintrc                         |  2 +-
 16 files changed, 42 insertions(+), 15 deletions(-)
 create mode 100644 .eslintrc

diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 0000000000..75aca1f145
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,21 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module",
+    "project": "./tsconfig.base.json"
+  },
+  "plugins": ["@typescript-eslint", "@nrwl/nx"],
+  "extends": "standard",
+  "rules": {
+  },
+  "overrides": [
+    {
+      "files": ["*.tsx"],
+      "rules": {
+        "@typescript-eslint/no-unused-vars": "off"
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/.eslintrc.json b/.eslintrc.json
index 5fe8155373..6557fb70d1 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -24,7 +24,13 @@
     {
       "files": ["*.ts", "*.tsx"],
       "extends": ["plugin:@nrwl/nx/typescript"],
-      "rules": {}
+      "rules": {
+        "@typescript-eslint/ban-ts-comment": "off",
+        "@typescript-eslint/no-this-alias": "off",
+        "@typescript-eslint/no-empty-function": "off",
+        "eslint-disable-next-line no-empty": "off",
+        "no-empty": "off"
+      }
     },
     {
       "files": ["*.js", "*.jsx"],
diff --git a/apps/remix-ide-e2e/.eslintrc b/apps/remix-ide-e2e/.eslintrc
index 6dc2985f30..f21e0fc224 100644
--- a/apps/remix-ide-e2e/.eslintrc
+++ b/apps/remix-ide-e2e/.eslintrc
@@ -11,6 +11,6 @@
         }
       }
     ],
-    "extends": ["../../.eslintrc.json"],
+    "extends": ["../../.eslintrc"],
     "ignorePatterns": ["!**/*"]
 }
\ No newline at end of file
diff --git a/apps/remix-ide-e2e/src/local-plugin/.eslintrc b/apps/remix-ide-e2e/src/local-plugin/.eslintrc
index c24c2102e4..3651dc7a8c 100644
--- a/apps/remix-ide-e2e/src/local-plugin/.eslintrc
+++ b/apps/remix-ide-e2e/src/local-plugin/.eslintrc
@@ -243,6 +243,6 @@
   },
   "settings": { "react": { "version": "detect" } },
   "plugins": ["import", "jsx-a11y", "react", "react-hooks"],
-  "extends": ["../../../../.eslintrc.json"],
+  "extends": ["../../../../.eslintrc"],
   "ignorePatterns": ["!**/*"]
 }
diff --git a/libs/remix-analyzer/.eslintrc b/libs/remix-analyzer/.eslintrc
index 50f8a21c2e..e27a064a6d 100644
--- a/libs/remix-analyzer/.eslintrc
+++ b/libs/remix-analyzer/.eslintrc
@@ -1,5 +1,5 @@
 { 
-    "extends": "../../.eslintrc.json", 
+    "extends": "../../.eslintrc", 
     "rules": {
         "@typescript-eslint/no-explicit-any": "off",
         "@typescript-eslint/no-unused-vars": "off",
diff --git a/libs/remix-astwalker/.eslintrc b/libs/remix-astwalker/.eslintrc
index ec9d5e2769..60e5336d5c 100644
--- a/libs/remix-astwalker/.eslintrc
+++ b/libs/remix-astwalker/.eslintrc
@@ -1,5 +1,5 @@
 { 
-    "extends": "../../.eslintrc.json", 
+    "extends": "../../.eslintrc", 
     "rules": {
         "@typescript-eslint/no-explicit-any": "off",
         "@typescript-eslint/prefer-namespace-keyword": "off",
diff --git a/libs/remix-core-plugin/.eslintrc b/libs/remix-core-plugin/.eslintrc
index 3adb97618b..ab8f38339c 100644
--- a/libs/remix-core-plugin/.eslintrc
+++ b/libs/remix-core-plugin/.eslintrc
@@ -1 +1 @@
-{ "extends": "../../.eslintrc.json", "rules": {}, "ignorePatterns": ["!**/*"] }
+{ "extends": "../../.eslintrc", "rules": {}, "ignorePatterns": ["!**/*"] }
diff --git a/libs/remix-debug/.eslintrc b/libs/remix-debug/.eslintrc
index 90fcc567b4..88ae470657 100644
--- a/libs/remix-debug/.eslintrc
+++ b/libs/remix-debug/.eslintrc
@@ -1,5 +1,5 @@
 { 
-    "extends": "../../.eslintrc.json", 
+    "extends": "../../.eslintrc", 
     "rules": {
         "@typescript-eslint/no-var-requires": "off",
         "@typescript-eslint/no-unused-vars": "off",
diff --git a/libs/remix-lib/.eslintrc b/libs/remix-lib/.eslintrc
index a4229541d6..6ee9d5e4a6 100644
--- a/libs/remix-lib/.eslintrc
+++ b/libs/remix-lib/.eslintrc
@@ -1,5 +1,5 @@
 { 
-    "extends": "../../.eslintrc.json", 
+    "extends": "../../.eslintrc", 
     "rules": {
         "standard/no-callback-literal": "off",
         "no-unused-vars": "off",
diff --git a/libs/remix-simulator/.eslintrc b/libs/remix-simulator/.eslintrc
index 60a8190355..8e04356c00 100644
--- a/libs/remix-simulator/.eslintrc
+++ b/libs/remix-simulator/.eslintrc
@@ -1,5 +1,5 @@
 { 
-    "extends": "../../.eslintrc.json", 
+    "extends": "../../.eslintrc", 
     "rules": {
         "@typescript-eslint/no-var-requires": "off",
         "@typescript-eslint/no-empty-function": "off",
diff --git a/libs/remix-solidity/.eslintrc b/libs/remix-solidity/.eslintrc
index 08bcfe07e1..f57f93144e 100644
--- a/libs/remix-solidity/.eslintrc
+++ b/libs/remix-solidity/.eslintrc
@@ -1,5 +1,5 @@
 { 
-    "extends": "../../.eslintrc.json", 
+    "extends": "../../.eslintrc", 
     "rules": {
         "dot-notation": "off",
         "no-unused-vars": "off",
diff --git a/libs/remix-tests/.eslintrc b/libs/remix-tests/.eslintrc
index 08bcfe07e1..f57f93144e 100644
--- a/libs/remix-tests/.eslintrc
+++ b/libs/remix-tests/.eslintrc
@@ -1,5 +1,5 @@
 { 
-    "extends": "../../.eslintrc.json", 
+    "extends": "../../.eslintrc", 
     "rules": {
         "dot-notation": "off",
         "no-unused-vars": "off",
diff --git a/libs/remix-ui/clipboard/.eslintrc b/libs/remix-ui/clipboard/.eslintrc
index 6d5b6d952d..977f139a09 100644
--- a/libs/remix-ui/clipboard/.eslintrc
+++ b/libs/remix-ui/clipboard/.eslintrc
@@ -243,6 +243,6 @@
   },
   "settings": { "react": { "version": "detect" } },
   "plugins": ["import", "jsx-a11y", "react", "react-hooks"],
-  "extends": ["../../../.eslintrc.json"],
+  "extends": ["../../../.eslintrc"],
   "ignorePatterns": ["!**/*"]
 }
diff --git a/libs/remix-ui/run-tab/.eslintrc.json b/libs/remix-ui/run-tab/.eslintrc.json
index 50e59482cf..8e85d48d01 100644
--- a/libs/remix-ui/run-tab/.eslintrc.json
+++ b/libs/remix-ui/run-tab/.eslintrc.json
@@ -1,5 +1,5 @@
 {
-  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
+  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc"],
   "ignorePatterns": ["!**/*"],
   "overrides": [
     {
diff --git a/libs/remix-url-resolver/.eslintrc b/libs/remix-url-resolver/.eslintrc
index 61ac553a30..4177c24ed7 100644
--- a/libs/remix-url-resolver/.eslintrc
+++ b/libs/remix-url-resolver/.eslintrc
@@ -1,5 +1,5 @@
 { 
-    "extends": "../../.eslintrc.json", 
+    "extends": "../../.eslintrc", 
     "rules": {}, 
     "env": {
         "browser": true,
diff --git a/libs/remixd/.eslintrc b/libs/remixd/.eslintrc
index 3adb97618b..ab8f38339c 100644
--- a/libs/remixd/.eslintrc
+++ b/libs/remixd/.eslintrc
@@ -1 +1 @@
-{ "extends": "../../.eslintrc.json", "rules": {}, "ignorePatterns": ["!**/*"] }
+{ "extends": "../../.eslintrc", "rules": {}, "ignorePatterns": ["!**/*"] }

From 0523c9a489f759dfeb0a6a30c388ad81388b7482 Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Thu, 6 Jan 2022 13:29:11 +0100
Subject: [PATCH 156/168] Run ci linting for udapp

---
 libs/remix-ui/run-tab/.eslintrc.json                        | 2 +-
 libs/remix-ui/run-tab/src/lib/actions/index.ts              | 3 ---
 .../run-tab/src/lib/components/contractDropdownUI.tsx       | 4 ++--
 libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx    | 2 +-
 libs/remix-ui/run-tab/src/lib/components/environment.tsx    | 2 +-
 libs/remix-ui/run-tab/src/lib/components/mainnet.tsx        | 2 +-
 .../remix-ui/run-tab/src/lib/components/universalDappUI.tsx | 2 +-
 libs/remix-ui/run-tab/src/lib/components/web3Dialog.tsx     | 6 +++---
 package.json                                                | 2 +-
 9 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/libs/remix-ui/run-tab/.eslintrc.json b/libs/remix-ui/run-tab/.eslintrc.json
index 8e85d48d01..50e59482cf 100644
--- a/libs/remix-ui/run-tab/.eslintrc.json
+++ b/libs/remix-ui/run-tab/.eslintrc.json
@@ -1,5 +1,5 @@
 {
-  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc"],
+  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
   "ignorePatterns": ["!**/*"],
   "overrides": [
     {
diff --git a/libs/remix-ui/run-tab/src/lib/actions/index.ts b/libs/remix-ui/run-tab/src/lib/actions/index.ts
index 6d7cd6790b..9c0b06e36b 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/index.ts
@@ -328,7 +328,6 @@ const loadContractFromAddress = (address, confirmCb, cb) => {
       try {
         abi = JSON.parse(plugin.editor.currentContent())
       } catch (e) {
-        // eslint-disable-next-line standard/no-callback-literal
         return cb('Failed to parse the current file as JSON ABI.')
       }
       _paq.push(['trackEvent', 'udapp', 'AtAddressLoadWithABI'])
@@ -654,11 +653,9 @@ const saveScenario = (promptCb, cb) => {
     const newFile = path + '/' + plugin.REACT_API.recorder.pathToScenario
     try {
       const newPath = await createNonClashingNameAsync(newFile, plugin.fileManager)
-      // eslint-disable-next-line standard/no-callback-literal
       if (!fileProvider.set(newPath, txJSON)) return cb('Failed to create file ' + newFile)
       plugin.fileManager.open(newFile)
     } catch (error) {
-      // eslint-disable-next-line standard/no-callback-literal
       if (error) return cb('Failed to create file. ' + newFile + ' ' + error)
     }
   })
diff --git a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
index 7afc77ee83..acf2e79899 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
@@ -183,7 +183,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     return (
       <span>
         It seems you are not using a checksumed address.
-        <br />A checksummed address is an address that contains uppercase letters, as specified in <a href="https://eips.ethereum.org/EIPS/eip-55" target="_blank">EIP-55</a>.
+        <br />A checksummed address is an address that contains uppercase letters, as specified in <a href="https://eips.ethereum.org/EIPS/eip-55" target="_blank" rel="noreferrer">EIP-55</a>.
         <br />Checksummed addresses are meant to help prevent users from sending transactions to the wrong address.
       </span>
     )
@@ -192,7 +192,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
   const isOverSizePrompt = () => {
     return (
       <div>Contract creation initialization returns data with length of more than 24576 bytes. The deployment will likely fails. <br />
-      More info: <a href="https://github.com/ethereum/EIPs/blob/master/EIPS/eip-170.md" target="_blank">eip-170</a>
+      More info: <a href="https://github.com/ethereum/EIPs/blob/master/EIPS/eip-170.md" target="_blank" rel="noreferrer">eip-170</a>
       </div>
     )
   }
diff --git a/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
index 292c2eeaee..2006999b35 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
@@ -92,7 +92,7 @@ export function ContractGUI (props: ContractGUIProps) {
     let ret = ''
     const valArrayTest = []
 
-    for (var j = 0; j < valArray.length; j++) {
+    for (let j = 0; j < valArray.length; j++) {
       if (ret !== '') ret += ','
       let elVal = valArray[j] ? valArray[j].value : ''
 
diff --git a/libs/remix-ui/run-tab/src/lib/components/environment.tsx b/libs/remix-ui/run-tab/src/lib/components/environment.tsx
index 852d376d8f..29a9d7fc58 100644
--- a/libs/remix-ui/run-tab/src/lib/components/environment.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/environment.tsx
@@ -30,7 +30,7 @@ export function EnvironmentUI (props: EnvironmentProps) {
             )
           }
         </select>
-        <a href="https://remix-ide.readthedocs.io/en/latest/run.html#run-setup" target="_blank"><i className="udapp_infoDeployAction ml-2 fas fa-info" title="check out docs to setup Environment"></i></a>
+        <a href="https://remix-ide.readthedocs.io/en/latest/run.html#run-setup" target="_blank" rel="noreferrer"><i className="udapp_infoDeployAction ml-2 fas fa-info" title="check out docs to setup Environment"></i></a>
       </div>
     </div>
   )
diff --git a/libs/remix-ui/run-tab/src/lib/components/mainnet.tsx b/libs/remix-ui/run-tab/src/lib/components/mainnet.tsx
index a848c33af0..30da897734 100644
--- a/libs/remix-ui/run-tab/src/lib/components/mainnet.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/mainnet.tsx
@@ -116,7 +116,7 @@ export function MainnetPrompt (props: MainnetProps) {
             : <div className="d-flex align-items-center my-1">
               <span className="text-dark mr-2 text-nowrap">Gas price:</span>
               <input className="form-control mr-1 text-right" style={{ width: '40px', height: '28px' }} id='gasprice' onInput={(e: any) => onGasPriceChange(e.target.value)} />
-              <span>Gwei (visit <a target='_blank' href='https://ethgasstation.info'>ethgasstation.info</a> for current gas price info.)</span>
+              <span>Gwei (visit <a target='_blank' href='https://ethgasstation.info' rel="noreferrer">ethgasstation.info</a> for current gas price info.)</span>
             </div>
         }
         <div className="mb-3">
diff --git a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
index 6388b07048..8c3bc9df2d 100644
--- a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
@@ -273,7 +273,7 @@ export function UniversalDappUI (props: UdappProps) {
             <a
               href="https://solidity.readthedocs.io/en/v0.6.2/contracts.html#receive-ether-function"
               title="check out docs for using 'receive'/'fallback'"
-              target="_blank"
+              target="_blank" rel="noreferrer"
             >
               <i aria-hidden="true" className="fas fa-info my-2 mr-1"></i>
             </a>
diff --git a/libs/remix-ui/run-tab/src/lib/components/web3Dialog.tsx b/libs/remix-ui/run-tab/src/lib/components/web3Dialog.tsx
index 3ab0ea8c15..30055f322a 100644
--- a/libs/remix-ui/run-tab/src/lib/components/web3Dialog.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/web3Dialog.tsx
@@ -15,16 +15,16 @@ export function Web3ProviderDialog (props: web3ProviderDialogProps) {
   return (
     <>
       <div className="">
-          Note: To use Geth & https://remix.ethereum.org, configure it to allow requests from Remix:(see <a href="https://geth.ethereum.org/docs/rpc/server" target="_blank">Geth Docs on rpc server</a>)
+          Note: To use Geth & https://remix.ethereum.org, configure it to allow requests from Remix:(see <a href="https://geth.ethereum.org/docs/rpc/server" target="_blank" rel="noreferrer">Geth Docs on rpc server</a>)
         <div className="border p-1">geth --http --http.corsdomain https://remix.ethereum.org</div>
         <br />
-        To run Remix & a local Geth test node, use this command: (see <a href="https://geth.ethereum.org/getting-started/dev-mode" target="_blank">Geth Docs on Dev mode</a>)
+        To run Remix & a local Geth test node, use this command: (see <a href="https://geth.ethereum.org/getting-started/dev-mode" target="_blank" rel="noreferrer">Geth Docs on Dev mode</a>)
         <div className="border p-1">geth --http --http.corsdomain="{window.origin}" --http.api web3,eth,debug,personal,net --vmdebug --datadir {thePath} --dev console</div>
         <br />
         <br />
         <b>WARNING:</b> It is not safe to use the --http.corsdomain flag with a wildcard: <b>--http.corsdomain *</b>
         <br />
-        <br />For more info: <a href="https://remix-ide.readthedocs.io/en/latest/run.html#more-about-web3-provider" target="_blank">Remix Docs on Web3 Provider</a>
+        <br />For more info: <a href="https://remix-ide.readthedocs.io/en/latest/run.html#more-about-web3-provider" target="_blank" rel="noreferrer">Remix Docs on Web3 Provider</a>
         <br />
         <br />
         Web3 Provider Endpoint
diff --git a/package.json b/package.json
index 0a838a7a40..b77cbf7046 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     "workspace-schematic": "nx workspace-schematic",
     "dep-graph": "nx dep-graph",
     "help": "nx help",
-    "lint:libs": "nx run-many --target=lint --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd,remix-ui-tree-view,remix-ui-modal-dialog,remix-ui-toaster,remix-ui-helper,remix-ui-debugger-ui,remix-ui-workspace,remix-ui-static-analyser,remix-ui-checkbox,remix-ui-settings,remix-core-plugin,remix-ui-renderer,remix-ui-publish-to-storage,remix-ui-solidity-compiler,solidity-unit-testing,remix-ui-plugin-manager,remix-ui-terminal,remix-ui-editor,remix-ui-app,remix-ui-tabs,remix-ui-panel",
+    "lint:libs": "nx run-many --target=lint --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd,remix-ui-tree-view,remix-ui-modal-dialog,remix-ui-toaster,remix-ui-helper,remix-ui-debugger-ui,remix-ui-workspace,remix-ui-static-analyser,remix-ui-checkbox,remix-ui-settings,remix-core-plugin,remix-ui-renderer,remix-ui-publish-to-storage,remix-ui-solidity-compiler,solidity-unit-testing,remix-ui-plugin-manager,remix-ui-terminal,remix-ui-editor,remix-ui-app,remix-ui-tabs,remix-ui-panel,remix-ui-run-tabs",
     "build:libs": "nx run-many --target=build --parallel=false --with-deps=true --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd",
     "test:libs": "nx run-many --target=test --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd",
     "publish:libs": "npm run build:libs && lerna publish --skip-git && npm run bumpVersion:libs",

From eb18edc9879e8871b5e473371ceabd02cec0b9a3 Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Thu, 6 Jan 2022 13:45:36 +0100
Subject: [PATCH 157/168] delete unused files

---
 .../src/app/tabs/runTab/contractDropdown.js   | 423 -----------------
 .../app/tabs/runTab/model/dropdownlogic.js    | 108 -----
 .../remix-ide/src/app/tabs/runTab/recorder.js | 160 -------
 .../remix-ide/src/app/tabs/runTab/settings.js | 449 ------------------
 .../src/app/tabs/styles/run-tab-styles.js     | 225 ---------
 apps/remix-ide/src/app/ui/TreeView.js         | 212 ---------
 apps/remix-ide/src/app/ui/confirmDialog.js    | 142 ------
 .../remix-ide/src/app/ui/multiParamManager.js | 228 ---------
 .../remix-ide/src/app/ui/universal-dapp-ui.js | 272 -----------
 apps/remix-ide/src/lib/publishOnIpfs.js       | 121 -----
 apps/remix-ide/src/lib/publishOnSwarm.js      | 109 -----
 apps/remix-ide/src/publishToStorage.js        |  47 --
 apps/remix-ide/src/universal-dapp-styles.js   | 285 -----------
 13 files changed, 2781 deletions(-)
 delete mode 100644 apps/remix-ide/src/app/tabs/runTab/contractDropdown.js
 delete mode 100644 apps/remix-ide/src/app/tabs/runTab/model/dropdownlogic.js
 delete mode 100644 apps/remix-ide/src/app/tabs/runTab/recorder.js
 delete mode 100644 apps/remix-ide/src/app/tabs/runTab/settings.js
 delete mode 100644 apps/remix-ide/src/app/tabs/styles/run-tab-styles.js
 delete mode 100644 apps/remix-ide/src/app/ui/TreeView.js
 delete mode 100644 apps/remix-ide/src/app/ui/confirmDialog.js
 delete mode 100644 apps/remix-ide/src/app/ui/multiParamManager.js
 delete mode 100644 apps/remix-ide/src/app/ui/universal-dapp-ui.js
 delete mode 100644 apps/remix-ide/src/lib/publishOnIpfs.js
 delete mode 100644 apps/remix-ide/src/lib/publishOnSwarm.js
 delete mode 100644 apps/remix-ide/src/publishToStorage.js
 delete mode 100644 apps/remix-ide/src/universal-dapp-styles.js

diff --git a/apps/remix-ide/src/app/tabs/runTab/contractDropdown.js b/apps/remix-ide/src/app/tabs/runTab/contractDropdown.js
deleted file mode 100644
index 9cdbedd326..0000000000
--- a/apps/remix-ide/src/app/tabs/runTab/contractDropdown.js
+++ /dev/null
@@ -1,423 +0,0 @@
-import publishToStorage from '../../../publishToStorage'
-const yo = require('yo-yo')
-const ethJSUtil = require('ethereumjs-util')
-const css = require('../styles/run-tab-styles')
-const modalDialogCustom = require('../../ui/modal-dialog-custom')
-const remixLib = require('@remix-project/remix-lib')
-const EventManager = remixLib.EventManager
-const confirmDialog = require('../../ui/confirmDialog')
-const modalDialog = require('../../ui/modaldialog')
-const MultiParamManager = require('../../ui/multiParamManager')
-const helper = require('../../../lib/helper')
-const addTooltip = require('../../ui/tooltip')
-const _paq = window._paq = window._paq || []
-
-class ContractDropdownUI {
-  constructor (blockchain, dropdownLogic, logCallback, runView) {
-    this.blockchain = blockchain
-    this.dropdownLogic = dropdownLogic
-    this.logCallback = logCallback
-    this.runView = runView
-    this.event = new EventManager()
-
-    this.listenToEvents()
-    this.ipfsCheckedState = false
-    this.exEnvironment = blockchain.getProvider()
-    this.listenToContextChange()
-    this.loadType = 'other'
-  }
-
-  listenToEvents () {
-    this.dropdownLogic.event.register('newlyCompiled', (success, data, source, compiler, compilerFullName, file) => {
-      if (!this.selectContractNames) return
-      this.selectContractNames.innerHTML = ''
-      if (success) {
-        this.dropdownLogic.getCompiledContracts(compiler, compilerFullName).forEach((contract) => {
-          this.selectContractNames.appendChild(yo`<option value="${contract.name}" compiler="${compilerFullName}">${contract.name} - ${contract.file}</option>`)
-        })
-      }
-      this.enableAtAddress(success)
-      this.enableContractNames(success)
-      this.setInputParamsPlaceHolder()
-
-      if (success) {
-        this.compFails.style.display = 'none'
-      } else {
-        this.compFails.style.display = 'block'
-      }
-    })
-  }
-
-  listenToContextChange () {
-    this.blockchain.event.register('networkStatus', ({ error, network }) => {
-      if (error) {
-        console.log('can\'t detect network')
-        return
-      }
-      this.exEnvironment = this.blockchain.getProvider()
-      this.networkName = network.name
-      this.networkId = network.id
-
-      const savedConfig = window.localStorage.getItem(`ipfs/${this.exEnvironment}/${this.networkName}`)
-
-      // check if an already selected option exist else use default workflow
-      if (savedConfig !== null) {
-        this.setCheckedState(savedConfig)
-      } else {
-        this.setCheckedState(this.networkName === 'Main')
-      }
-    })
-  }
-
-  setCheckedState (value) {
-    value = value === 'true' ? true : value === 'false' ? false : value
-    this.ipfsCheckedState = value
-    if (this.ipfsCheckbox) this.ipfsCheckbox.checked = value
-  }
-
-  toggleCheckedState () {
-    if (this.exEnvironment === 'vm') this.networkName = 'VM'
-    this.ipfsCheckedState = !this.ipfsCheckedState
-    window.localStorage.setItem(`ipfs/${this.exEnvironment}/${this.networkName}`, this.ipfsCheckedState)
-  }
-
-  enableContractNames (enable) {
-    if (enable) {
-      if (this.selectContractNames.value === '') return
-      this.selectContractNames.removeAttribute('disabled')
-      this.selectContractNames.setAttribute('title', 'Select contract for Deploy or At Address.')
-    } else {
-      this.selectContractNames.setAttribute('disabled', true)
-      if (this.loadType === 'sol') {
-        this.selectContractNames.setAttribute('title', '⚠ Select and compile *.sol file to deploy or access a contract.')
-      } else {
-        this.selectContractNames.setAttribute('title', '⚠ Selected *.abi file allows accessing contracts, select and compile *.sol file to deploy and access one.')
-      }
-    }
-  }
-
-  enableAtAddress (enable) {
-    if (enable) {
-      const address = this.atAddressButtonInput.value
-      if (!address || !ethJSUtil.isValidAddress(address)) {
-        this.enableAtAddress(false)
-        return
-      }
-      this.atAddress.removeAttribute('disabled')
-      this.atAddress.setAttribute('title', 'Interact with the given contract.')
-    } else {
-      this.atAddress.setAttribute('disabled', true)
-      if (this.atAddressButtonInput.value === '') {
-        this.atAddress.setAttribute('title', '⚠ Compile *.sol file or select *.abi file & then enter the address of deployed contract.')
-      } else {
-        this.atAddress.setAttribute('title', '⚠ Compile *.sol file or select *.abi file.')
-      }
-    }
-  }
-
-  render () {
-    this.compFails = yo`<i title="No contract compiled yet or compilation failed. Please check the compile tab for more information." class="m-2 ml-3 fas fa-times-circle ${css.errorIcon}" ></i>`
-    this.atAddress = yo`<button class="${css.atAddress} btn btn-sm btn-info" id="runAndDeployAtAdressButton" onclick=${this.loadFromAddress.bind(this)}>At Address</button>`
-    this.atAddressButtonInput = yo`<input class="${css.input} ${css.ataddressinput} ataddressinput form-control" placeholder="Load contract from Address" title="address of contract" oninput=${this.atAddressChanged.bind(this)} />`
-    this.selectContractNames = yo`<select class="${css.contractNames} custom-select" disabled title="Please compile *.sol file to deploy or access a contract"></select>`
-    this.abiLabel = yo`<span class="py-1">ABI file selected</span>`
-    if (this.exEnvironment === 'vm') this.networkName = 'VM'
-    this.enableAtAddress(false)
-    this.abiLabel.style.display = 'none'
-
-    const savedConfig = window.localStorage.getItem(`ipfs/${this.exEnvironment}/${this.networkName}`)
-    this.ipfsCheckedState = savedConfig === 'true' ? true : false // eslint-disable-line
-
-    this.ipfsCheckbox = yo`
-      <input
-        id="deployAndRunPublishToIPFS"
-        data-id="contractDropdownIpfsCheckbox"
-        class="form-check-input custom-control-input"
-        type="checkbox"
-        onchange=${() => this.toggleCheckedState()}
-      >
-    `
-    if (this.ipfsCheckedState) this.ipfsCheckbox.checked = true
-
-    this.deployCheckBox = yo`
-      <div class="d-flex py-1 align-items-center custom-control custom-checkbox">
-        ${this.ipfsCheckbox}
-        <label
-          for="deployAndRunPublishToIPFS"
-          data-id="contractDropdownIpfsCheckboxLabel"
-          class="m-0 form-check-label custom-control-label ${css.checkboxAlign}"
-          title="Publishing the source code and metadata to IPFS facilitates source code verification using Sourcify and will greatly foster contract adoption (auditing, debugging, calling it, etc...)"
-        >
-          Publish to IPFS
-        </label>
-      </div>
-      `
-    this.createPanel = yo`<div class="${css.deployDropdown}"></div>`
-    this.orLabel = yo`<div class="${css.orLabel} mt-2">or</div>`
-
-    const contractNamesContainer = yo`
-      <div class="${css.container}" data-id="contractDropdownContainer">
-        <label class="${css.settingsLabel}">Contract</label>
-        <div class="${css.subcontainer}">
-          ${this.selectContractNames} ${this.compFails}
-          ${this.abiLabel}
-        </div>
-        <div>
-          ${this.createPanel}
-          ${this.orLabel}
-          <div class="${css.button} ${css.atAddressSect}">
-            ${this.atAddress}
-            ${this.atAddressButtonInput}
-          </div>
-        </div>
-      </div>
-    `
-    this.selectContractNames.addEventListener('change', this.setInputParamsPlaceHolder.bind(this))
-    this.setInputParamsPlaceHolder()
-    if (!this.contractNamesContainer) {
-      this.contractNamesContainer = contractNamesContainer
-    }
-    return contractNamesContainer
-  }
-
-  atAddressChanged (event) {
-    if (!this.atAddressButtonInput.value) {
-      this.enableAtAddress(false)
-    } else {
-      if ((this.selectContractNames && !this.selectContractNames.getAttribute('disabled') && this.loadType === 'sol') ||
-        this.loadType === 'abi') {
-        this.enableAtAddress(true)
-      } else {
-        this.enableAtAddress(false)
-      }
-    }
-  }
-
-  changeCurrentFile (currentFile) {
-    if (!this.selectContractNames) return
-    if (/.(.abi)$/.exec(currentFile)) {
-      this.createPanel.style.display = 'none'
-      this.orLabel.style.display = 'none'
-      this.compFails.style.display = 'none'
-      this.loadType = 'abi'
-      this.contractNamesContainer.style.display = 'block'
-      this.abiLabel.style.display = 'block'
-      this.abiLabel.innerHTML = currentFile
-      this.selectContractNames.style.display = 'none'
-      this.enableContractNames(true)
-      this.enableAtAddress(true)
-    } else if (/.(.sol)$/.exec(currentFile) ||
-        /.(.vy)$/.exec(currentFile) || // vyper
-        /.(.lex)$/.exec(currentFile) || // lexon
-        /.(.contract)$/.exec(currentFile)) {
-      this.createPanel.style.display = 'block'
-      this.orLabel.style.display = 'block'
-      this.contractNamesContainer.style.display = 'block'
-      this.loadType = 'sol'
-      this.selectContractNames.style.display = 'block'
-      this.abiLabel.style.display = 'none'
-      if (this.selectContractNames.value === '') this.enableAtAddress(false)
-    } else {
-      this.loadType = 'other'
-      this.createPanel.style.display = 'block'
-      this.orLabel.style.display = 'block'
-      this.contractNamesContainer.style.display = 'block'
-      this.selectContractNames.style.display = 'block'
-      this.abiLabel.style.display = 'none'
-      if (this.selectContractNames.value === '') this.enableAtAddress(false)
-    }
-  }
-
-  setInputParamsPlaceHolder () {
-    this.createPanel.innerHTML = ''
-    if (this.selectContractNames.selectedIndex < 0 || this.selectContractNames.children.length <= 0) {
-      this.createPanel.innerHTML = 'No compiled contracts'
-      return
-    }
-
-    const selectedContract = this.getSelectedContract()
-    const clickCallback = async (valArray, inputsValues) => {
-      var selectedContract = this.getSelectedContract()
-      this.createInstance(selectedContract, inputsValues)
-    }
-    const createConstructorInstance = new MultiParamManager(
-      0,
-      selectedContract.getConstructorInterface(),
-      clickCallback,
-      selectedContract.getConstructorInputs(),
-      'Deploy',
-      selectedContract.bytecodeObject,
-      true
-    )
-    this.createPanel.appendChild(createConstructorInstance.render())
-    this.createPanel.appendChild(this.deployCheckBox)
-  }
-
-  getSelectedContract () {
-    var contract = this.selectContractNames.children[this.selectContractNames.selectedIndex]
-    var contractName = contract.getAttribute('value')
-    var compilerAtributeName = contract.getAttribute('compiler')
-
-    return this.dropdownLogic.getSelectedContract(contractName, compilerAtributeName)
-  }
-
-  async createInstance (selectedContract, args) {
-    if (selectedContract.bytecodeObject.length === 0) {
-      return modalDialogCustom.alert('This contract may be abstract, not implement an abstract parent\'s methods completely or not invoke an inherited contract\'s constructor correctly.')
-    }
-
-    var continueCb = (error, continueTxExecution, cancelCb) => {
-      if (error) {
-        var msg = typeof error !== 'string' ? error.message : error
-        modalDialog('Gas estimation failed', yo`<div>Gas estimation errored with the following message (see below).
-        The transaction execution will likely fail. Do you want to force sending? <br>
-        ${msg}
-        </div>`,
-        {
-          label: 'Send Transaction',
-          fn: () => {
-            continueTxExecution()
-          }
-        }, {
-          label: 'Cancel Transaction',
-          fn: () => {
-            cancelCb()
-          }
-        })
-      } else {
-        continueTxExecution()
-      }
-    }
-
-    const self = this
-
-    var promptCb = (okCb, cancelCb) => {
-      modalDialogCustom.promptPassphrase('Passphrase requested', 'Personal mode is enabled. Please provide passphrase of account', '', okCb, cancelCb)
-    }
-
-    var statusCb = (msg) => {
-      return this.logCallback(msg)
-    }
-
-    var finalCb = (error, contractObject, address) => {
-      self.event.trigger('clearInstance')
-
-      if (error) {
-        return this.logCallback(error)
-      }
-      self.event.trigger('newContractInstanceAdded', [contractObject, address, contractObject.name])
-
-      const data = self.runView.compilersArtefacts.getCompilerAbstract(contractObject.contract.file)
-      self.runView.compilersArtefacts.addResolvedContract(helper.addressToString(address), data)
-      if (self.ipfsCheckedState) {
-        _paq.push(['trackEvent', 'udapp', 'DeployAndPublish', this.networkName + '_' + this.networkId])
-        publishToStorage('ipfs', self.runView.fileProvider, self.runView.fileManager, selectedContract)
-      } else {
-        _paq.push(['trackEvent', 'udapp', 'DeployOnly', this.networkName + '_' + this.networkId])
-      }
-    }
-
-    let contractMetadata
-    try {
-      contractMetadata = await this.runView.call('compilerMetadata', 'deployMetadataOf', selectedContract.name, selectedContract.contract.file)
-    } catch (error) {
-      return statusCb(`creation of ${selectedContract.name} errored: ${error.message ? error.message : error}`)
-    }
-
-    const compilerContracts = this.dropdownLogic.getCompilerContracts()
-    const confirmationCb = this.getConfirmationCb(modalDialog, confirmDialog)
-
-    if (selectedContract.isOverSizeLimit()) {
-      return modalDialog('Contract code size over limit', yo`<div>Contract creation initialization returns data with length of more than 24576 bytes. The deployment will likely fails. <br>
-      More info: <a href="https://github.com/ethereum/EIPs/blob/master/EIPS/eip-170.md" target="_blank">eip-170</a>
-      </div>`,
-      {
-        label: 'Force Send',
-        fn: () => {
-          this.deployContract(selectedContract, args, contractMetadata, compilerContracts, { continueCb, promptCb, statusCb, finalCb }, confirmationCb)
-        }
-      }, {
-        label: 'Cancel',
-        fn: () => {
-          this.logCallback(`creation of ${selectedContract.name} canceled by user.`)
-        }
-      })
-    }
-    this.deployContract(selectedContract, args, contractMetadata, compilerContracts, { continueCb, promptCb, statusCb, finalCb }, confirmationCb)
-  }
-
-  deployContract (selectedContract, args, contractMetadata, compilerContracts, callbacks, confirmationCb) {
-    _paq.push(['trackEvent', 'udapp', 'DeployContractTo', this.networkName + '_' + this.networkId])
-    const { statusCb } = callbacks
-    if (!contractMetadata || (contractMetadata && contractMetadata.autoDeployLib)) {
-      return this.blockchain.deployContractAndLibraries(selectedContract, args, contractMetadata, compilerContracts, callbacks, confirmationCb)
-    }
-    if (Object.keys(selectedContract.bytecodeLinkReferences).length) statusCb(`linking ${JSON.stringify(selectedContract.bytecodeLinkReferences, null, '\t')} using ${JSON.stringify(contractMetadata.linkReferences, null, '\t')}`)
-    this.blockchain.deployContractWithLibrary(selectedContract, args, contractMetadata, compilerContracts, callbacks, confirmationCb)
-  }
-
-  getConfirmationCb (modalDialog, confirmDialog) {
-    // this code is the same as in recorder.js. TODO need to be refactored out
-    const confirmationCb = (network, tx, gasEstimation, continueTxExecution, cancelCb) => {
-      if (network.name !== 'Main') {
-        return continueTxExecution(null)
-      }
-      const amount = this.blockchain.fromWei(tx.value, true, 'ether')
-      const content = confirmDialog(tx, network, amount, gasEstimation, this.blockchain.determineGasFees(tx), this.blockchain.determineGasPrice.bind(this.blockchain))
-
-      modalDialog('Confirm transaction', content,
-        {
-          label: 'Confirm',
-          fn: () => {
-            this.blockchain.config.setUnpersistedProperty('doNotShowTransactionConfirmationAgain', content.querySelector('input#confirmsetting').checked)
-            // TODO: check if this is check is still valid given the refactor
-            if (!content.gasPriceStatus) {
-              cancelCb('Given transaction fee is not correct')
-            } else {
-              continueTxExecution(content.txFee)
-            }
-          }
-        }, {
-          label: 'Cancel',
-          fn: () => {
-            return cancelCb('Transaction canceled by user.')
-          }
-        }
-      )
-    }
-
-    return confirmationCb
-  }
-
-  loadFromAddress () {
-    this.event.trigger('clearInstance')
-
-    let address = this.atAddressButtonInput.value
-    if (!ethJSUtil.isValidChecksumAddress(address)) {
-      addTooltip(yo`
-        <span>
-          It seems you are not using a checksumed address.
-          <br>A checksummed address is an address that contains uppercase letters, as specified in <a href="https://eips.ethereum.org/EIPS/eip-55" target="_blank">EIP-55</a>.
-          <br>Checksummed addresses are meant to help prevent users from sending transactions to the wrong address.
-        </span>`)
-      address = ethJSUtil.toChecksumAddress(address)
-    }
-    this.dropdownLogic.loadContractFromAddress(address,
-      (cb) => {
-        modalDialogCustom.confirm('At Address', `Do you really want to interact with ${address} using the current ABI definition?`, cb)
-      },
-      (error, loadType, abi) => {
-        if (error) {
-          return modalDialogCustom.alert(error)
-        }
-        if (loadType === 'abi') {
-          return this.event.trigger('newContractABIAdded', [abi, address])
-        }
-        var selectedContract = this.getSelectedContract()
-        this.event.trigger('newContractInstanceAdded', [selectedContract.object, address, this.selectContractNames.value])
-      }
-    )
-  }
-}
-
-module.exports = ContractDropdownUI
diff --git a/apps/remix-ide/src/app/tabs/runTab/model/dropdownlogic.js b/apps/remix-ide/src/app/tabs/runTab/model/dropdownlogic.js
deleted file mode 100644
index 386f654775..0000000000
--- a/apps/remix-ide/src/app/tabs/runTab/model/dropdownlogic.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import { CompilerAbstract } from '@remix-project/remix-solidity'
-const remixLib = require('@remix-project/remix-lib')
-const txHelper = remixLib.execution.txHelper
-const EventManager = remixLib.EventManager
-const _paq = window._paq = window._paq || []
-
-class DropdownLogic {
-  constructor (compilersArtefacts, config, editor, runView) {
-    this.compilersArtefacts = compilersArtefacts
-    this.config = config
-    this.editor = editor
-    this.runView = runView
-
-    this.event = new EventManager()
-
-    this.listenToCompilationEvents()
-  }
-
-  // TODO: can be moved up; the event in contractDropdown will have to refactored a method instead
-  listenToCompilationEvents () {
-    const broadcastCompilationResult = (file, source, languageVersion, data) => {
-      // TODO check whether the tab is configured
-      const compiler = new CompilerAbstract(languageVersion, data, source)
-      this.compilersArtefacts[languageVersion] = compiler
-      this.compilersArtefacts.__last = compiler
-      this.event.trigger('newlyCompiled', [true, data, source, compiler, languageVersion, file])
-    }
-    this.runView.on('solidity', 'compilationFinished', (file, source, languageVersion, data) =>
-      broadcastCompilationResult(file, source, languageVersion, data)
-    )
-    this.runView.on('vyper', 'compilationFinished', (file, source, languageVersion, data) =>
-      broadcastCompilationResult(file, source, languageVersion, data)
-    )
-    this.runView.on('lexon', 'compilationFinished', (file, source, languageVersion, data) =>
-      broadcastCompilationResult(file, source, languageVersion, data)
-    )
-    this.runView.on('yulp', 'compilationFinished', (file, source, languageVersion, data) =>
-      broadcastCompilationResult(file, source, languageVersion, data)
-    )
-    this.runView.on('optimism-compiler', 'compilationFinished', (file, source, languageVersion, data) =>
-      broadcastCompilationResult(file, source, languageVersion, data)
-    )
-  }
-
-  loadContractFromAddress (address, confirmCb, cb) {
-    if (/.(.abi)$/.exec(this.config.get('currentFile'))) {
-      confirmCb(() => {
-        var abi
-        try {
-          abi = JSON.parse(this.editor.currentContent())
-        } catch (e) {
-          return cb('Failed to parse the current file as JSON ABI.')
-        }
-        _paq.push(['trackEvent', 'udapp', 'AtAddressLoadWithABI'])
-        cb(null, 'abi', abi)
-      })
-    } else {
-      _paq.push(['trackEvent', 'udapp', 'AtAddressLoadWithArtifacts'])
-      cb(null, 'instance')
-    }
-  }
-
-  getCompiledContracts (compiler, compilerFullName) {
-    var contracts = []
-    compiler.visitContracts((contract) => {
-      contracts.push(contract)
-    })
-    return contracts
-  }
-
-  getSelectedContract (contractName, compilerAtributeName) {
-    if (!contractName) return null
-
-    var compiler = this.compilersArtefacts[compilerAtributeName]
-    if (!compiler) return null
-
-    var contract = compiler.getContract(contractName)
-
-    return {
-      name: contractName,
-      contract: contract,
-      compiler: compiler,
-      abi: contract.object.abi,
-      bytecodeObject: contract.object.evm.bytecode.object,
-      bytecodeLinkReferences: contract.object.evm.bytecode.linkReferences,
-      object: contract.object,
-      deployedBytecode: contract.object.evm.deployedBytecode,
-      getConstructorInterface: () => {
-        return txHelper.getConstructorInterface(contract.object.abi)
-      },
-      getConstructorInputs: () => {
-        var constructorInteface = txHelper.getConstructorInterface(contract.object.abi)
-        return txHelper.inputParametersDeclarationToString(constructorInteface.inputs)
-      },
-      isOverSizeLimit: () => {
-        var deployedBytecode = contract.object.evm.deployedBytecode
-        return (deployedBytecode && deployedBytecode.object.length / 2 > 24576)
-      },
-      metadata: contract.object.metadata
-    }
-  }
-
-  getCompilerContracts () {
-    return this.compilersArtefacts.__last.getData().contracts
-  }
-}
-
-module.exports = DropdownLogic
diff --git a/apps/remix-ide/src/app/tabs/runTab/recorder.js b/apps/remix-ide/src/app/tabs/runTab/recorder.js
deleted file mode 100644
index 52d5367464..0000000000
--- a/apps/remix-ide/src/app/tabs/runTab/recorder.js
+++ /dev/null
@@ -1,160 +0,0 @@
-import { Plugin } from '@remixproject/engine'
-
-import * as packageJson from '../../../../../../package.json'
-var yo = require('yo-yo')
-var remixLib = require('@remix-project/remix-lib')
-var EventManager = remixLib.EventManager
-var csjs = require('csjs-inject')
-var css = require('../styles/run-tab-styles')
-
-var modalDialogCustom = require('../../ui/modal-dialog-custom')
-var modalDialog = require('../../ui/modaldialog')
-var confirmDialog = require('../../ui/confirmDialog')
-
-var helper = require('../../../lib/helper.js')
-
-const profile = {
-  name: 'recorder',
-  methods: ['runScenario'],
-  version: packageJson.version
-}
-
-class RecorderUI extends Plugin {
-  constructor (blockchain, fileManager, recorder, logCallBack, config) {
-    super(profile)
-    this.fileManager = fileManager
-    this.blockchain = blockchain
-    this.recorder = recorder
-    this.logCallBack = logCallBack
-    this.config = config
-    this.event = new EventManager()
-  }
-
-  render () {
-    var css2 = csjs`
-      .container {}
-      .runTxs {}
-      .recorder {}
-    `
-
-    this.runButton = yo`<i class="fas fa-play runtransaction ${css2.runTxs} ${css.icon}"  title="Run Transactions" aria-hidden="true"></i>`
-    this.recordButton = yo`
-      <i class="fas fa-save savetransaction ${css2.recorder} ${css.icon}"
-        onclick=${this.triggerRecordButton.bind(this)} title="Save Transactions" aria-hidden="true">
-      </i>`
-
-    this.runButton.onclick = () => {
-      const file = this.config.get('currentFile')
-      if (!file) return modalDialogCustom.alert('A scenario file has to be selected')
-      this.runScenario(file)
-    }
-  }
-
-  runScenario (file) {
-    if (!file) return modalDialogCustom.alert('Unable to run scenerio, no specified scenario file')
-    var continueCb = (error, continueTxExecution, cancelCb) => {
-      if (error) {
-        var msg = typeof error !== 'string' ? error.message : error
-        modalDialog('Gas estimation failed', yo`<div>Gas estimation errored with the following message (see below).
-        The transaction execution will likely fail. Do you want to force sending? <br>
-        ${msg}
-        </div>`,
-        {
-          label: 'Send Transaction',
-          fn: () => {
-            continueTxExecution()
-          }
-        }, {
-          label: 'Cancel Transaction',
-          fn: () => {
-            cancelCb()
-          }
-        })
-      } else {
-        continueTxExecution()
-      }
-    }
-
-    var promptCb = (okCb, cancelCb) => {
-      modalDialogCustom.promptPassphrase('Passphrase requested', 'Personal mode is enabled. Please provide passphrase of account', '', okCb, cancelCb)
-    }
-
-    var alertCb = (msg) => {
-      modalDialogCustom.alert(msg)
-    }
-
-    const confirmationCb = this.getConfirmationCb(modalDialog, confirmDialog)
-
-    this.fileManager.readFile(file).then((json) => {
-      // TODO: there is still a UI dependency to remove here, it's still too coupled at this point to remove easily
-      this.recorder.runScenario(json, continueCb, promptCb, alertCb, confirmationCb, this.logCallBack, (error, abi, address, contractName) => {
-        if (error) {
-          return modalDialogCustom.alert(error)
-        }
-
-        this.event.trigger('newScenario', [abi, address, contractName])
-      })
-    }).catch((error) => modalDialogCustom.alert(error))
-  }
-
-  getConfirmationCb (modalDialog, confirmDialog) {
-    // this code is the same as in contractDropdown.js. TODO need to be refactored out
-    const confirmationCb = (network, tx, gasEstimation, continueTxExecution, cancelCb) => {
-      if (network.name !== 'Main') {
-        return continueTxExecution(null)
-      }
-      const amount = this.blockchain.fromWei(tx.value, true, 'ether')
-      const content = confirmDialog(tx, network, amount, gasEstimation, this.blockchain.determineGasFees(tx), this.blockchain.determineGasPrice.bind(this.blockchain))
-
-      modalDialog('Confirm transaction', content,
-        {
-          label: 'Confirm',
-          fn: () => {
-            this.config.setUnpersistedProperty('doNotShowTransactionConfirmationAgain', content.querySelector('input#confirmsetting').checked)
-            // TODO: check if this is check is still valid given the refactor
-            if (!content.gasPriceStatus) {
-              cancelCb('Given transaction fee is not correct')
-            } else {
-              continueTxExecution(content.txFee)
-            }
-          }
-        }, {
-          label: 'Cancel',
-          fn: () => {
-            return cancelCb('Transaction canceled by user.')
-          }
-        }
-      )
-    }
-
-    return confirmationCb
-  }
-
-  triggerRecordButton () {
-    this.saveScenario(
-      (path, cb) => {
-        modalDialogCustom.prompt('Save transactions as scenario', 'Transactions will be saved in a file under ' + path, 'scenario.json', cb)
-      },
-      (error) => {
-        if (error) return modalDialogCustom.alert(error)
-      }
-    )
-  }
-
-  saveScenario (promptCb, cb) {
-    var txJSON = JSON.stringify(this.recorder.getAll(), null, 2)
-    var path = this.fileManager.currentPath()
-    promptCb(path, input => {
-      var fileProvider = this.fileManager.fileProviderOf(path)
-      if (!fileProvider) return
-      var newFile = path + '/' + input
-      helper.createNonClashingName(newFile, fileProvider, (error, newFile) => {
-        if (error) return cb('Failed to create file. ' + newFile + ' ' + error)
-        if (!fileProvider.set(newFile, txJSON)) return cb('Failed to create file ' + newFile)
-        this.fileManager.open(newFile)
-      })
-    })
-  }
-}
-
-module.exports = RecorderUI
diff --git a/apps/remix-ide/src/app/tabs/runTab/settings.js b/apps/remix-ide/src/app/tabs/runTab/settings.js
deleted file mode 100644
index cc5a15409d..0000000000
--- a/apps/remix-ide/src/app/tabs/runTab/settings.js
+++ /dev/null
@@ -1,449 +0,0 @@
-import { BN } from 'ethereumjs-util'
-import Registry from '../../state/registry'
-const $ = require('jquery')
-const yo = require('yo-yo')
-const remixLib = require('@remix-project/remix-lib')
-const EventManager = remixLib.EventManager
-const css = require('../styles/run-tab-styles')
-const copyToClipboard = require('../../ui/copy-to-clipboard')
-const modalDialogCustom = require('../../ui/modal-dialog-custom')
-const addTooltip = require('../../ui/tooltip')
-const helper = require('../../../lib/helper.js')
-
-class SettingsUI {
-  constructor (blockchain, networkModule) {
-    this.blockchain = blockchain
-    this.event = new EventManager()
-    this._components = {}
-
-    this.blockchain.event.register('transactionExecuted', (error, from, to, data, lookupOnly, txResult) => {
-      if (!lookupOnly) this.el.querySelector('#value').value = 0
-      if (error) return
-      this.updateAccountBalances()
-    })
-    this._components = {
-      registry: Registry.getInstance(),
-      networkModule: networkModule
-    }
-    this._components.registry = Registry.getInstance()
-    this._deps = {
-      config: this._components.registry.get('config').api
-    }
-
-    this._deps.config.events.on('settings/personal-mode_changed', this.onPersonalChange.bind(this))
-
-    setInterval(() => {
-      this.updateAccountBalances()
-    }, 1000)
-
-    this.accountListCallId = 0
-    this.loadedAccounts = {}
-  }
-
-  updateAccountBalances () {
-    if (!this.el) return
-    var accounts = $(this.el.querySelector('#txorigin')).children('option')
-    accounts.each((index, account) => {
-      this.blockchain.getBalanceInEther(account.value, (err, balance) => {
-        if (err) return
-        const updated = helper.shortenAddress(account.value, balance)
-        if (updated !== account.innerText) { // check if the balance has been updated and update UI accordingly.
-          account.innerText = updated
-        }
-      })
-    })
-  }
-
-  validateInputKey (e) {
-    // preventing not numeric keys
-    // preventing 000 case
-    if (!helper.isNumeric(e.key) ||
-      (e.key === '0' && !parseInt(this.el.querySelector('#value').value) && this.el.querySelector('#value').value.length > 0)) {
-      e.preventDefault()
-      e.stopImmediatePropagation()
-    }
-  }
-
-  validateValue () {
-    const valueEl = this.el.querySelector('#value')
-    if (!valueEl.value) {
-      // assign 0 if given value is
-      // - empty
-      valueEl.value = 0
-      return
-    }
-
-    let v
-    try {
-      v = new BN(valueEl.value, 10)
-      valueEl.value = v.toString(10)
-    } catch (e) {
-      // assign 0 if given value is
-      // - not valid (for ex 4345-54)
-      // - contains only '0's (for ex 0000) copy past or edit
-      valueEl.value = 0
-    }
-
-    // if giveen value is negative(possible with copy-pasting) set to 0
-    if (v.lt(0)) valueEl.value = 0
-  }
-
-  render () {
-    this.netUI = yo`<span class="${css.network} badge badge-secondary"></span>`
-
-    var environmentEl = yo`
-      <div class="${css.crow}">
-        <label id="selectExEnv" class="${css.settingsLabel}">
-          Environment
-        </label>
-        <div class="${css.environment}">
-          <select id="selectExEnvOptions" data-id="settingsSelectEnvOptions" class="form-control ${css.select} custom-select">
-            <option id="vm-mode-london" data-id="settingsVMLondonMode"
-              title="Execution environment does not connect to any node, everything is local and in memory only."
-              value="vm-london" name="executionContext" fork="london"> JavaScript VM (London)
-            </option>
-            <option id="vm-mode-berlin" data-id="settingsVMBerlinMode"
-              title="Execution environment does not connect to any node, everything is local and in memory only."
-              value="vm-berlin" name="executionContext" fork="berlin" > JavaScript VM (Berlin)
-            </option>
-            <option id="injected-mode" data-id="settingsInjectedMode"
-              title="Execution environment has been provided by Metamask or similar provider."
-              value="injected" name="executionContext"> Injected Web3
-            </option>
-            <option id="web3-mode" data-id="settingsWeb3Mode"
-              title="Execution environment connects to node at localhost (or via IPC if available), transactions will be sent to the network and can cause loss of money or worse!
-              If this page is served via https and you access your node via http, it might not work. In this case, try cloning the repository and serving it via http."
-              value="web3" name="executionContext"> Web3 Provider
-            </option>
-          </select>
-          <a href="https://remix-ide.readthedocs.io/en/latest/run.html#run-setup" target="_blank"><i class="${css.infoDeployAction} ml-2 fas fa-info" title="check out docs to setup Environment"></i></a>
-        </div>
-      </div>
-    `
-    const networkEl = yo`
-    <div class="${css.crow}">
-        <div class="${css.settingsLabel}">
-        </div>
-        <div class="${css.environment}" data-id="settingsNetworkEnv">
-          ${this.netUI}
-        </div>
-      </div>
-    `
-    const accountEl = yo`
-      <div class="${css.crow}">
-        <label class="${css.settingsLabel}">
-          Account
-          <span id="remixRunPlusWraper" title="Create a new account" onload=${this.updatePlusButton.bind(this)}>
-            <i id="remixRunPlus" class="fas fa-plus-circle ${css.icon}" aria-hidden="true" onclick=${this.newAccount.bind(this)}"></i>
-          </span>
-        </label>
-        <div class="${css.account}">
-          <select data-id="runTabSelectAccount" name="txorigin" class="form-control ${css.select} custom-select pr-4" id="txorigin"></select>
-          <div style="margin-left: -5px;">${copyToClipboard(() => document.querySelector('#runTabView #txorigin').value)}</div>
-          <i id="remixRunSignMsg" data-id="settingsRemixRunSignMsg" class="mx-1 fas fa-edit ${css.icon}" aria-hidden="true" onclick=${this.signMessage.bind(this)} title="Sign a message using this account key"></i>
-        </div>
-      </div>
-    `
-
-    const gasPriceEl = yo`
-      <div class="${css.crow}">
-        <label class="${css.settingsLabel}">Gas limit</label>
-        <input type="number" class="form-control ${css.gasNval} ${css.col2}" id="gasLimit" value="3000000">
-      </div>
-    `
-
-    const valueEl = yo`
-      <div class="${css.crow}">
-        <label class="${css.settingsLabel}" data-id="remixDRValueLabel">Value</label>
-        <div class="${css.gasValueContainer}">
-          <input
-            type="number"
-            min="0"
-            pattern="^[0-9]"
-            step="1"
-            class="form-control ${css.gasNval} ${css.col2}"
-            id="value"
-            data-id="dandrValue"
-            value="0"
-            title="Enter the value and choose the unit"
-            onkeypress=${(e) => this.validateInputKey(e)}
-            onchange=${() => this.validateValue()}
-          >
-          <select name="unit" class="form-control p-1 ${css.gasNvalUnit} ${css.col2_2} custom-select" id="unit">
-            <option data-unit="wei">Wei</option>
-            <option data-unit="gwei">Gwei</option>
-            <option data-unit="finney">Finney</option>
-            <option data-unit="ether">Ether</option>
-          </select>
-        </div>
-      </div>
-    `
-
-    const el = yo`
-      <div class="${css.settings}">
-        ${environmentEl}
-        ${networkEl}
-        ${accountEl}
-        ${gasPriceEl}
-        ${valueEl}
-      </div>
-    `
-
-    var selectExEnv = environmentEl.querySelector('#selectExEnvOptions')
-    this.setDropdown(selectExEnv)
-
-    this.blockchain.event.register('contextChanged', (context, silent) => {
-      this.setFinalContext()
-    })
-
-    this.blockchain.event.register('networkStatus', ({ error, network }) => {
-      if (error) {
-        this.netUI.innerHTML = 'can\'t detect network '
-        return
-      }
-      const networkProvider = this._components.networkModule.getNetworkProvider.bind(this._components.networkModule)
-      this.netUI.innerHTML = (networkProvider() !== 'vm') ? `${network.name} (${network.id || '-'}) network` : ''
-    })
-
-    setInterval(() => {
-      this.fillAccountsList()
-    }, 1000)
-
-    this.el = el
-
-    this.fillAccountsList()
-    return el
-  }
-
-  setDropdown (selectExEnv) {
-    this.selectExEnv = selectExEnv
-
-    const addProvider = (network) => {
-      selectExEnv.appendChild(yo`<option
-        title="provider name: ${network.name}"
-        value="${network.name}"
-        name="executionContext"
-      >
-        ${network.name}
-      </option>`)
-      addTooltip(yo`<span><b>${network.name}</b> provider added</span>`)
-    }
-
-    const removeProvider = (name) => {
-      var env = selectExEnv.querySelector(`option[value="${name}"]`)
-      if (env) {
-        selectExEnv.removeChild(env)
-        addTooltip(yo`<span><b>${name}</b> provider removed</span>`)
-      }
-    }
-    this.blockchain.event.register('addProvider', provider => addProvider(provider))
-    this.blockchain.event.register('removeProvider', name => removeProvider(name))
-
-    selectExEnv.addEventListener('change', (event) => {
-      const provider = selectExEnv.options[selectExEnv.selectedIndex]
-      const fork = provider.getAttribute('fork') // can be undefined if connected to an external source (web3 provider / injected)
-      let context = provider.value
-      context = context.startsWith('vm') ? 'vm' : context // context has to be 'vm', 'web3' or 'injected'
-      this.setExecutionContext({ context, fork })
-    })
-
-    selectExEnv.value = this._getProviderDropdownValue()
-  }
-
-  setExecutionContext (context) {
-    this.blockchain.changeExecutionContext(context, () => {
-      modalDialogCustom.prompt('External node request', this.web3ProviderDialogBody(), 'http://127.0.0.1:8545', (target) => {
-        this.blockchain.setProviderFromEndpoint(target, context, (alertMsg) => {
-          if (alertMsg) addTooltip(alertMsg)
-          this.setFinalContext()
-        })
-      }, this.setFinalContext.bind(this))
-    }, (alertMsg) => {
-      addTooltip(alertMsg)
-    }, this.setFinalContext.bind(this))
-  }
-
-  web3ProviderDialogBody () {
-    const thePath = '<path/to/local/folder/for/test/chain>'
-
-    return yo`
-      <div class="">
-        Note: To use Geth & https://remix.ethereum.org, configure it to allow requests from Remix:(see <a href="https://geth.ethereum.org/docs/rpc/server" target="_blank">Geth Docs on rpc server</a>)
-        <div class="border p-1">geth --http --http.corsdomain https://remix.ethereum.org</div>
-        <br>
-        To run Remix & a local Geth test node, use this command: (see <a href="https://geth.ethereum.org/getting-started/dev-mode" target="_blank">Geth Docs on Dev mode</a>)
-        <div class="border p-1">geth --http --http.corsdomain="${window.origin}" --http.api web3,eth,debug,personal,net --vmdebug --datadir ${thePath} --dev console</div>
-        <br>
-        <br> 
-        <b>WARNING:</b> It is not safe to use the --http.corsdomain flag with a wildcard: <b>--http.corsdomain *</b>
-        <br>
-        <br>For more info: <a href="https://remix-ide.readthedocs.io/en/latest/run.html#more-about-web3-provider" target="_blank">Remix Docs on Web3 Provider</a>
-        <br>
-        <br> 
-        Web3 Provider Endpoint
-      </div>
-    `
-  }
-
-  /**
-   * generate a value used by the env dropdown list.
-   * @return {String} - can return 'vm-berlin, 'vm-london', 'injected' or 'web3'
-   */
-  _getProviderDropdownValue () {
-    const provider = this.blockchain.getProvider()
-    const fork = this.blockchain.getCurrentFork()
-    return provider === 'vm' ? provider + '-' + fork : provider
-  }
-
-  setFinalContext () {
-    // set the final context. Cause it is possible that this is not the one we've originaly selected
-    this.selectExEnv.value = this._getProviderDropdownValue()
-    this.event.trigger('clearInstance', [])
-    this.updatePlusButton()
-  }
-
-  updatePlusButton () {
-    // enable/disable + button
-    const plusBtn = document.getElementById('remixRunPlus')
-    const plusTitle = document.getElementById('remixRunPlusWraper')
-    switch (this.selectExEnv.value) {
-      case 'injected':
-        plusBtn.classList.add(css.disableMouseEvents)
-        plusTitle.title = "Unfortunately it's not possible to create an account using injected web3. Please create the account directly from your provider (i.e metamask or other of the same type)."
-
-        break
-      case 'vm':
-        plusBtn.classList.remove(css.disableMouseEvents)
-        plusTitle.title = 'Create a new account'
-
-        break
-
-      case 'web3':
-        this.onPersonalChange()
-
-        break
-      default: {
-        plusBtn.classList.add(css.disableMouseEvents)
-        plusTitle.title = `Unfortunately it's not possible to create an account using an external wallet (${this.selectExEnv.value}).`
-      }
-    }
-  }
-
-  onPersonalChange () {
-    const plusBtn = document.getElementById('remixRunPlus')
-    const plusTitle = document.getElementById('remixRunPlusWraper')
-    if (!this._deps.config.get('settings/personal-mode')) {
-      plusBtn.classList.add(css.disableMouseEvents)
-      plusTitle.title = 'Creating an account is possible only in Personal mode. Please go to Settings to enable it.'
-    } else {
-      plusBtn.classList.remove(css.disableMouseEvents)
-      plusTitle.title = 'Create a new account'
-    }
-  }
-
-  newAccount () {
-    this.blockchain.newAccount(
-      '',
-      (cb) => {
-        modalDialogCustom.promptPassphraseCreation((error, passphrase) => {
-          if (error) {
-            return modalDialogCustom.alert(error)
-          }
-          cb(passphrase)
-        }, () => {})
-      },
-      (error, address) => {
-        if (error) {
-          return addTooltip('Cannot create an account: ' + error)
-        }
-        addTooltip(`account ${address} created`)
-      }
-    )
-  }
-
-  getSelectedAccount () {
-    return this.el.querySelector('#txorigin').selectedOptions[0].value
-  }
-
-  getEnvironment () {
-    return this.blockchain.getProvider()
-  }
-
-  signMessage () {
-    this.blockchain.getAccounts((err, accounts) => {
-      if (err) {
-        return addTooltip(`Cannot get account list: ${err}`)
-      }
-
-      var signMessageDialog = { title: 'Sign a message', text: 'Enter a message to sign', inputvalue: 'Message to sign' }
-      var $txOrigin = this.el.querySelector('#txorigin')
-      if (!$txOrigin.selectedOptions[0] && (this.blockchain.isInjectedWeb3() || this.blockchain.isWeb3Provider())) {
-        return addTooltip('Account list is empty, please make sure the current provider is properly connected to remix')
-      }
-
-      var account = $txOrigin.selectedOptions[0].value
-
-      var promptCb = (passphrase) => {
-        const modal = modalDialogCustom.promptMulti(signMessageDialog, (message) => {
-          this.blockchain.signMessage(message, account, passphrase, (err, msgHash, signedData) => {
-            if (err) {
-              return addTooltip(err)
-            }
-            modal.hide()
-            modalDialogCustom.alert(yo`
-              <div>
-                <b>hash:</b><br>
-                <span id="remixRunSignMsgHash" data-id="settingsRemixRunSignMsgHash">${msgHash}</span>
-                <br><b>signature:</b><br>
-                <span id="remixRunSignMsgSignature" data-id="settingsRemixRunSignMsgSignature">${signedData}</span>
-              </div>
-            `)
-          })
-        }, false)
-      }
-
-      if (this.blockchain.isWeb3Provider()) {
-        return modalDialogCustom.promptPassphrase(
-          'Passphrase to sign a message',
-          'Enter your passphrase for this account to sign the message',
-          '',
-          promptCb,
-          false
-        )
-      }
-      promptCb()
-    })
-  }
-
-  // TODO: unclear what's the goal of accountListCallId, feels like it can be simplified
-  async fillAccountsList () {
-    this.accountListCallId++
-    const callid = this.accountListCallId
-    const txOrigin = this.el.querySelector('#txorigin')
-    let accounts = []
-    try {
-      accounts = await this.blockchain.getAccounts()
-    } catch (e) {
-      addTooltip(`Cannot get account list: ${e}`)
-    }
-    if (!accounts) accounts = []
-    if (this.accountListCallId > callid) return
-    this.accountListCallId++
-    for (const loadedaddress in this.loadedAccounts) {
-      if (accounts.indexOf(loadedaddress) === -1) {
-        txOrigin.removeChild(txOrigin.querySelector('option[value="' + loadedaddress + '"]'))
-        delete this.loadedAccounts[loadedaddress]
-      }
-    }
-    for (const i in accounts) {
-      const address = accounts[i]
-      if (!this.loadedAccounts[address]) {
-        txOrigin.appendChild(yo`<option value="${address}" >${address}</option>`)
-        this.loadedAccounts[address] = 1
-      }
-    }
-    txOrigin.setAttribute('value', accounts[0])
-  }
-}
-
-module.exports = SettingsUI
diff --git a/apps/remix-ide/src/app/tabs/styles/run-tab-styles.js b/apps/remix-ide/src/app/tabs/styles/run-tab-styles.js
deleted file mode 100644
index fd193f0444..0000000000
--- a/apps/remix-ide/src/app/tabs/styles/run-tab-styles.js
+++ /dev/null
@@ -1,225 +0,0 @@
-var csjs = require('csjs-inject')
-
-var css = csjs`
-  .runTabView {
-    display: flex;
-    flex-direction: column;
-  }
-  .runTabView::-webkit-scrollbar {
-    display: none;
-  }
-  .settings {
-    padding: 0 24px 16px;
-  }
-  .crow {
-    display: block;
-    margin-top: 8px;
-  }
-  .col1 {
-    width: 30%;
-    float: left;
-    align-self: center;
-  }
-  .settingsLabel {
-    font-size: 11px;
-    margin-bottom: 4px;
-    text-transform: uppercase;
-  }
-  .environment {
-    display: flex;
-    align-items: center;
-    position: relative;
-    width: 100%;
-  }
-  .environment a {
-    margin-left: 7px;
-  }
-  .account {
-    display: flex;
-    align-items: center;
-  }
-  .account i {
-    margin-left: 12px;
-  }
-  .col2 {
-    border-radius: 3px;
-  }
-  .col2_1 {
-    width: 164px;
-    min-width: 164px;
-  }
-  .col2_2 {
-  }
-  .select {
-    font-weight: normal;
-    width: 100%;
-    overflow: hidden;
-  }
-  .instanceContainer {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 2%;
-    border: none;
-    text-align: center;
-    padding: 0 14px 16px;
-  }
-  .pendingTxsContainer  {
-    display: flex;
-    flex-direction: column;
-    margin-top: 2%;
-    border: none;
-    text-align: center;
-  }
-  .container {
-    padding: 0 24px 16px;
-  }
-  .recorderDescription {
-    margin: 0 15px 15px 0;
-   }
-  .contractNames {
-    width: 100%;
-    border: 1px solid
-  }
-  .subcontainer {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin-bottom: 8px;
-  }
-  .subcontainer i {
-    width: 16px;
-    display: flex;
-    justify-content: center;
-    margin-left: 1px;
-  }
-  .button button{
-    flex: none;
-  }
-  .button {
-    display: flex;
-    align-items: center;
-    margin-top: 13px;
-  }
-  .transaction {
-  }
-  .atAddress {
-    margin: 0;
-    min-width: 100px;
-    width: 100px;
-    height: 100%;
-    word-break: inherit;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    border-right: 0;
-  }
-  .atAddressSect {
-    margin-top: 8px;
-    height: 32px;
-  }
-  .atAddressSect input {
-    height: 32px;
-    border-top-left-radius: 0 !important;
-    border-bottom-left-radius: 0 !important;
-  }
-  .ataddressinput {
-    padding: .25rem;
-  }
-  .create {
-  }
-  .input {
-    font-size: 10px !important;
-  }
-  .noInstancesText {
-    font-style: italic;
-    text-align: left;
-    padding-left: 15px;
-  }
-  .pendingTxsText {
-    font-style: italic;
-    display: flex;
-    justify-content: space-evenly;
-    align-items: center;
-    flex-wrap: wrap;
-  }
-  .item {
-    margin-right: 1em;
-    display: flex;
-    align-items: center;
-  }
-  .pendingContainer {
-    display: flex;
-    align-items: baseline;
-  }
-  .pending {
-    height: 25px;
-    text-align: center;
-    padding-left: 10px;
-    border-radius: 3px;
-    margin-left: 5px;
-  }
-  .disableMouseEvents {
-    pointer-events: none;
-  }
-  .icon {
-    cursor: pointer;
-    font-size: 12px;
-    cursor: pointer;
-    margin-left: 5px;
-  }
-  .icon:hover {
-    font-size: 12px;
-    color: var(--warning);
-  }
-  .errorIcon {
-    color: var(--warning);
-    margin-left: 15px;
-  }
-  .failDesc {
-    color: var(--warning);
-    padding-left: 10px;
-    display: inline;
-  }
-  .network {
-    margin-left: 8px;
-    pointer-events: none;
-  }
-  .networkItem {
-    margin-right: 5px;
-  }
-  .transactionActions {
-    display: flex;
-    justify-content: space-evenly;
-    width: 145px;
-  }
-  .orLabel {
-    text-align: center;
-    text-transform: uppercase;
-  }
-  .infoDeployAction {
-    margin-left: 1px;
-    font-size: 13px;
-    color: var(--info);
-  }
-  .gasValueContainer {
-    flex-direction: row;
-    display: flex;
-  }
-  .gasNval {
-    width: 55%;
-    font-size: 0.8rem;
-  }
-  .gasNvalUnit {
-    width: 41%;
-    margin-left: 10px;
-    font-size: 0.8rem;
-  }
-  .deployDropdown {
-    text-align: center;
-    text-transform: uppercase;
-  }
-  .checkboxAlign {
-    padding-top: 2px;
-  }
-`
-
-module.exports = css
diff --git a/apps/remix-ide/src/app/ui/TreeView.js b/apps/remix-ide/src/app/ui/TreeView.js
deleted file mode 100644
index a282cafbd6..0000000000
--- a/apps/remix-ide/src/app/ui/TreeView.js
+++ /dev/null
@@ -1,212 +0,0 @@
-'use strict'
-var yo = require('yo-yo')
-var csjs = require('csjs-inject')
-var css = csjs`
-  .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: max-content;
-    max-width: 80%;
-    word-break: break-word;
-  }
-  .label_value {
-    min-width: 10%;
-  }
-  .cursor_pointer {
-    cursor: pointer;
-  }
-`
-
-var EventManager = require('../../lib/events')
-
-/**
- * TreeView
- *  - extendable by specifying custom `extractData` and `formatSelf` function
- *  - trigger `nodeClick` and `leafClick`
- */
-class TreeView {
-  constructor (opts) {
-    this.event = new EventManager()
-    this.extractData = opts.extractData || this.extractDataDefault
-    this.formatSelf = opts.formatSelf || this.formatSelfDefault
-    this.loadMore = opts.loadMore
-    this.view = null
-    this.expandPath = []
-  }
-
-  render (json, expand) {
-    var view = this.renderProperties(json, expand)
-    if (!this.view) {
-      this.view = view
-    }
-    return view
-  }
-
-  update (json) {
-    if (this.view) {
-      yo.update(this.view, this.render(json))
-    }
-  }
-
-  renderObject (item, parent, key, expand, keyPath) {
-    var data = this.extractData(item, parent, key)
-    var children = (data.children || []).map((child, index) => {
-      return this.renderObject(child.value, data, child.key, expand, keyPath + '/' + child.key)
-    })
-    return this.formatData(key, data, children, expand, keyPath)
-  }
-
-  renderProperties (json, expand, key) {
-    key = key || ''
-    var children = Object.keys(json).map((innerkey) => {
-      return this.renderObject(json[innerkey], json, innerkey, expand, innerkey)
-    })
-    return yo`<ul key=${key} data-id="treeViewUl${key}" class="${css.ul_tv} ml-0 px-2">${children}</ul>`
-  }
-
-  formatData (key, data, children, expand, keyPath) {
-    var self = this
-    var li = yo`<li key=${keyPath} data-id="treeViewLi${keyPath}" class=${css.li_tv}></li>`
-    var caret = yo`<div class="px-1 fas fa-caret-right caret ${css.caret_tv}"></div>`
-    var label = yo`
-      <div key=${keyPath} data-id="treeViewDiv${keyPath}" class="d-flex flex-row align-items-center">
-        ${caret}
-        <span class="w-100">${self.formatSelf(key, data, li)}</span>
-      </div>`
-    const expanded = self.expandPath.includes(keyPath)
-    li.appendChild(label)
-    if (data.children) {
-      var list = yo`<ul key=${keyPath} data-id="treeViewUlList${keyPath}" class="pl-2 ${css.ul_tv}">${children}</ul>`
-      list.style.display = expanded ? 'block' : 'none'
-      caret.className = list.style.display === 'none' ? `fas fa-caret-right caret ${css.caret_tv}` : `fas fa-caret-down caret ${css.caret_tv}`
-      caret.setAttribute('data-id', `treeViewToggle${keyPath}`)
-      label.onclick = function () {
-        self.expand(keyPath)
-        if (self.isExpanded(keyPath)) {
-          if (!self.expandPath.includes(keyPath)) self.expandPath.push(keyPath)
-        } else {
-          self.expandPath = self.expandPath.filter(path => !path.startsWith(keyPath))
-        }
-      }
-      label.oncontextmenu = function (event) {
-        self.event.trigger('nodeRightClick', [keyPath, data, label, event])
-      }
-      li.appendChild(list)
-      if (data.hasNext) {
-        list.appendChild(yo`<li><span class="w-100 text-primary ${css.cursor_pointer}" data-id="treeViewLoadMore" onclick="${() => self.loadMore(data.cursor)}">Load more</span></li>`)
-      }
-    } else {
-      caret.style.visibility = 'hidden'
-      label.oncontextmenu = function (event) {
-        self.event.trigger('leafRightClick', [keyPath, data, label, event])
-      }
-      label.onclick = function (event) {
-        self.event.trigger('leafClick', [keyPath, data, label, event])
-      }
-    }
-    return li
-  }
-
-  isExpanded (path) {
-    var current = this.nodeAt(path)
-    if (current) {
-      return current.style.display !== 'none'
-    }
-    return false
-  }
-
-  expand (path) {
-    var caret = this.caretAt(path)
-    var node = this.nodeAt(path)
-    if (node) {
-      node.style.display = node.style.display === 'none' ? 'block' : 'none'
-      caret.className = node.style.display === 'none' ? `fas fa-caret-right caret ${css.caret_tv}` : `fas fa-caret-down caret ${css.caret_tv}`
-      this.event.trigger('nodeClick', [path, node])
-    }
-  }
-
-  caretAt (path) {
-    var label = this.labelAt(path)
-    if (label) {
-      return label.querySelector('.caret')
-    }
-  }
-
-  itemAt (path) {
-    return this.view.querySelector(`li[key="${path}"]`)
-  }
-
-  labelAt (path) {
-    return this.view.querySelector(`div[key="${path}"]`)
-  }
-
-  nodeAt (path) {
-    return this.view.querySelector(`ul[key="${path}"]`)
-  }
-
-  updateNodeFromJSON (path, jsonTree, expand) {
-    var newTree = this.renderProperties(jsonTree, expand, path)
-    var current = this.nodeAt(path)
-    if (current && current.parentElement) {
-      current.parentElement.replaceChild(newTree, current)
-    }
-  }
-
-  formatSelfDefault (key, data) {
-    return yo`
-      <div class="d-flex mt-2 flex-row ${css.label_item}">
-        <label class="small font-weight-bold pr-1 ${css.label_key}">${key}:</label> 
-        <label class="m-0 ${css.label_value}">${data.self}</label>
-      </div>
-    `
-  }
-
-  extractDataDefault (item, parent, key) {
-    var ret = {}
-    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
-  }
-}
-
-module.exports = TreeView
diff --git a/apps/remix-ide/src/app/ui/confirmDialog.js b/apps/remix-ide/src/app/ui/confirmDialog.js
deleted file mode 100644
index 9bf44e6333..0000000000
--- a/apps/remix-ide/src/app/ui/confirmDialog.js
+++ /dev/null
@@ -1,142 +0,0 @@
-var yo = require('yo-yo')
-var csjs = require('csjs-inject')
-const copyToClipboard = require('./copy-to-clipboard')
-const Web3 = require('web3')
-
-var css = csjs`
-  #confirmsetting {
-    z-index: 1;
-  }
-  .txInfoBox {
-  }
-  .wrapword {
-    white-space: pre-wrap;       /* Since CSS 2.1 */
-    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
-    white-space: -pre-wrap;      /* Opera 4-6 */
-    white-space: -o-pre-wrap;    /* Opera 7 */
-    word-wrap: break-word;       /* Internet Explorer 5.5+ */
-  }
-`
-
-function confirmDialog (tx, network, amount, gasEstimation, newGasPriceCb, initialParamsCb) {
-  const onGasPriceChange = function () {
-    var gasPrice = el.querySelector('#gasprice').value
-    newGasPriceCb(gasPrice, (txFeeText, priceStatus) => {
-      el.querySelector('#txfee').innerHTML = txFeeText
-      el.gasPriceStatus = priceStatus
-      el.txFee = { gasPrice }
-    })
-  }
-
-  const onMaxFeeChange = function () {
-    var maxFee = el.querySelector('#maxfee').value
-    var confirmBtn = document.querySelector('#modal-footer-ok')
-    var maxPriorityFee = el.querySelector('#maxpriorityfee').value
-    if (parseInt(network.lastBlock.baseFeePerGas, 16) > Web3.utils.toWei(maxFee, 'Gwei')) {
-      el.querySelector('#txfee').innerHTML = 'Transaction is invalid. Max fee should not be less than Base fee'
-      el.gasPriceStatus = false
-      confirmBtn.hidden = true
-      return
-    } else {
-      el.gasPriceStatus = true
-      confirmBtn.hidden = false
-    }
-
-    newGasPriceCb(maxFee, (txFeeText, priceStatus) => {
-      el.querySelector('#txfee').innerHTML = txFeeText
-      if (priceStatus) {
-        confirmBtn.hidden = false
-      } else {
-        confirmBtn.hidden = true
-      }
-      el.gasPriceStatus = priceStatus
-      el.txFee = { maxFee, maxPriorityFee, baseFeePerGas: network.lastBlock.baseFeePerGas }
-    })
-  }
-
-  const el = yo`
-    <div>
-      <div class="text-dark">You are about to create a transaction on ${network.name} Network. Confirm the details to send the info to your provider.
-        <br>The provider for many users is MetaMask. The provider will ask you to sign the transaction before it is sent to ${network.name} Network.
-      </div>
-      <div class="mt-3 ${css.txInfoBox}">
-        <div>
-          <span class="text-dark mr-2">From:</span>
-          <span>${tx.from}</span>
-        </div>
-        <div>
-          <span class="text-dark mr-2">To:</span>
-          <span>${tx.to ? tx.to : '(Contract Creation)'}</span>
-        </div>
-        <div class="d-flex align-items-center">
-          <span class="text-dark mr-2">Data:</span>
-          <pre class="${css.wrapword} mb-0">${tx.data && tx.data.length > 50 ? tx.data.substring(0, 49) + '...' : tx.data} ${copyToClipboard(() => { return tx.data })}</pre>
-        </div>
-        <div class="mb-3">
-          <span class="text-dark mr-2">Amount:</span>
-          <span>${amount} Ether</span>
-        </div>
-        <div>
-          <span class="text-dark mr-2">Gas estimation:</span>
-          <span>${gasEstimation}</span>
-        </div>
-        <div>
-          <span class="text-dark mr-2">Gas limit:</span>
-          <span>${tx.gas}</span>
-        </div>
-        ${
-          network.lastBlock.baseFeePerGas ? yo`
-          <div class="align-items-center my-1" title="Represents the part of the tx fee that goes to the miner.">
-            <div class='d-flex'>
-              <span class="text-dark mr-2 text-nowrap">Max Priority fee:</span>
-              <input class="form-control mr-1 text-right" style='height: 1.2rem; width: 6rem;' value="1" id='maxpriorityfee' />
-              <span title="visit https://ethgasstation.info for current gas price info.">Gwei</span>
-            </div>            
-          </div>
-          <div class="align-items-center my-1" title="Represents the maximum amount of fee that you will pay for this transaction. The minimun needs to be set to base fee.">
-            <div class='d-flex'>
-              <span class="text-dark mr-2 text-nowrap">Max fee (Not less than base fee ${Web3.utils.fromWei(Web3.utils.toBN(parseInt(network.lastBlock.baseFeePerGas, 16)), 'Gwei')} Gwei):</span>
-              <input class="form-control mr-1 text-right" style='height: 1.2rem; width: 6rem;' id='maxfee' oninput=${onMaxFeeChange} />
-              <span>Gwei</span>
-              <span class="text-dark ml-2"></span>
-            </div>
-          </div>`
-            : yo`<div class="d-flex align-items-center my-1">
-            <span class="text-dark mr-2 text-nowrap">Gas price:</span>
-            <input class="form-control mr-1 text-right" style='width: 40px; height: 28px;' id='gasprice' oninput=${onGasPriceChange} />
-            <span>Gwei (visit <a target='_blank' href='https://ethgasstation.info'>ethgasstation.info</a> for current gas price info.)</span>
-          </div>`
-        }
-        <div class="mb-3">
-          <span class="text-dark mr-2">Max transaction fee:</span>
-          <span class="text-warning" id='txfee'></span>
-        </div>
-      </div>
-      <div class="d-flex py-1 align-items-center custom-control custom-checkbox ${css.checkbox}">
-        <input class="form-check-input custom-control-input" id="confirmsetting" type="checkbox">
-        <label class="m-0 form-check-label custom-control-label" for="confirmsetting">Do not show this warning again.</label>
-      </div>
-    </div>
-  `
-
-  initialParamsCb((txFeeText, gasPriceValue, gasPriceStatus) => {
-    if (txFeeText) {
-      el.querySelector('#txfee').innerHTML = txFeeText
-    }
-    if (el.querySelector('#gasprice') && gasPriceValue) {
-      el.querySelector('#gasprice').value = gasPriceValue
-      onGasPriceChange()
-    }
-    if (el.querySelector('#maxfee') && network && network.lastBlock && network.lastBlock.baseFeePerGas) {
-      el.querySelector('#maxfee').value = Web3.utils.fromWei(Web3.utils.toBN(parseInt(network.lastBlock.baseFeePerGas, 16)), 'Gwei')
-      onMaxFeeChange()
-    }
-    if (gasPriceStatus !== undefined) {
-      el.gasPriceStatus = gasPriceStatus
-    }
-  })
-
-  return el
-}
-
-module.exports = confirmDialog
diff --git a/apps/remix-ide/src/app/ui/multiParamManager.js b/apps/remix-ide/src/app/ui/multiParamManager.js
deleted file mode 100644
index 74e43187c6..0000000000
--- a/apps/remix-ide/src/app/ui/multiParamManager.js
+++ /dev/null
@@ -1,228 +0,0 @@
-'use strict'
-
-var yo = require('yo-yo')
-var css = require('../../universal-dapp-styles')
-var copyToClipboard = require('./copy-to-clipboard')
-var remixLib = require('@remix-project/remix-lib')
-var txFormat = remixLib.execution.txFormat
-
-class MultiParamManager {
-  /**
-    *
-    * @param {bool} lookupOnly
-    * @param {Object} funABI
-    * @param {Function} clickMultiCallBack
-    * @param {string} inputs
-    * @param {string} title
-    * @param {string} evmBC
-    *
-    */
-  constructor (lookupOnly, funABI, clickCallBack, inputs, title, evmBC, isDeploy) {
-    this.lookupOnly = lookupOnly
-    this.funABI = funABI
-    this.clickCallBack = clickCallBack
-    this.inputs = inputs
-    this.title = title
-    this.evmBC = evmBC
-    this.basicInputField = null
-    this.multiFields = null
-    this.isDeploy = isDeploy
-  }
-
-  switchMethodViewOn () {
-    this.contractActionsContainerSingle.style.display = 'none'
-    this.contractActionsContainerMulti.style.display = 'flex'
-    this.makeMultiVal()
-  }
-
-  switchMethodViewOff () {
-    this.contractActionsContainerSingle.style.display = 'flex'
-    this.contractActionsContainerMulti.style.display = 'none'
-    var multiValString = this.getMultiValsString()
-    if (multiValString) this.basicInputField.value = multiValString
-  }
-
-  getValue (item, index) {
-    var valStr = item.value.join('')
-    return valStr
-  }
-
-  getMultiValsString () {
-    var valArray = this.multiFields.querySelectorAll('input')
-    var ret = ''
-    var valArrayTest = []
-
-    for (var j = 0; j < valArray.length; j++) {
-      if (ret !== '') ret += ','
-      var elVal = valArray[j].value
-      valArrayTest.push(elVal)
-      elVal = elVal.replace(/(^|,\s+|,)(\d+)(\s+,|,|$)/g, '$1"$2"$3') // replace non quoted number by quoted number
-      elVal = elVal.replace(/(^|,\s+|,)(0[xX][0-9a-fA-F]+)(\s+,|,|$)/g, '$1"$2"$3') // replace non quoted hex string by quoted hex string
-      try {
-        JSON.parse(elVal)
-      } catch (e) {
-        elVal = '"' + elVal + '"'
-      }
-      ret += elVal
-    }
-    var valStringTest = valArrayTest.join('')
-    if (valStringTest) {
-      return ret
-    } else {
-      return ''
-    }
-  }
-
-  emptyInputs () {
-    var valArray = this.multiFields.querySelectorAll('input')
-    for (var k = 0; k < valArray.length; k++) {
-      valArray[k].value = ''
-    }
-    this.basicInputField.value = ''
-  }
-
-  makeMultiVal () {
-    var inputString = this.basicInputField.value
-    if (inputString) {
-      inputString = inputString.replace(/(^|,\s+|,)(\d+)(\s+,|,|$)/g, '$1"$2"$3') // replace non quoted number by quoted number
-      inputString = inputString.replace(/(^|,\s+|,)(0[xX][0-9a-fA-F]+)(\s+,|,|$)/g, '$1"$2"$3') // replace non quoted hex string by quoted hex string
-      var inputJSON = JSON.parse('[' + inputString + ']')
-      var multiInputs = this.multiFields.querySelectorAll('input')
-      for (var k = 0; k < multiInputs.length; k++) {
-        if (inputJSON[k]) {
-          multiInputs[k].value = JSON.stringify(inputJSON[k])
-        }
-      }
-    }
-  }
-
-  createMultiFields () {
-    if (this.funABI.inputs) {
-      return yo`<div>
-        ${this.funABI.inputs.map(function (inp) {
-          return yo`<div class="${css.multiArg}"><label for="${inp.name}"> ${inp.name}: </label><input class="form-control" placeholder="${inp.type}" title="${inp.name}" data-id="multiParamManagerInput${inp.name}"></div>`
-        })}
-      </div>`
-    }
-  }
-
-  render () {
-    var title
-    if (this.title) {
-      title = this.title
-    } else if (this.funABI.name) {
-      title = this.funABI.name
-    } else {
-      title = this.funABI.type === 'receive' ? '(receive)' : '(fallback)'
-    }
-
-    this.basicInputField = yo`<input class="form-control" data-id="multiParamManagerBasicInputField"></input>`
-    this.basicInputField.setAttribute('placeholder', this.inputs)
-    this.basicInputField.setAttribute('title', this.inputs)
-    this.basicInputField.setAttribute('data-id', this.inputs)
-
-    var onClick = () => {
-      this.clickCallBack(this.funABI.inputs, this.basicInputField.value)
-    }
-    const width = this.isDeploy ? '' : 'w-50'
-    const funcButton = yo`<button onclick=${() => onClick()} class="${css.instanceButton} ${width} btn btn-sm" data-id="multiParamManagerFuncButton">${title}</button>`
-    this.contractActionsContainerSingle = yo`
-    <div class="${css.contractActionsContainerSingle} pt-2">
-      ${funcButton}
-      ${this.basicInputField}
-      <i class="fas fa-angle-down ${css.methCaret}" onclick=${() => this.switchMethodViewOn()} title=${title} ></i>
-    </div>`
-
-    this.multiFields = this.createMultiFields()
-
-    var multiOnClick = () => {
-      var valsString = this.getMultiValsString()
-      if (valsString) {
-        this.clickCallBack(this.funABI.inputs, valsString)
-      } else {
-        this.clickCallBack(this.funABI.inputs, '')
-      }
-    }
-
-    var expandedButton = yo`<button onclick=${() => { multiOnClick() }} class="${css.instanceButton}" data-id="multiParamManagerExpandedButton"></button>`
-
-    this.contractActionsContainerMulti = yo`<div class="${css.contractActionsContainerMulti}" >
-      <div class="${css.contractActionsContainerMultiInner} text-dark" >
-        <div onclick=${() => { this.switchMethodViewOff() }} class="${css.multiHeader}">
-          <div class="${css.multiTitle} run-instance-multi-title">${title}</div>
-          <i class='fas fa-angle-up ${css.methCaret}'></i>
-        </div>
-        ${this.multiFields}
-        <div class="${css.group} ${css.multiArg}" >
-          ${copyToClipboard(
-            () => {
-              var multiString = this.getMultiValsString()
-              var multiJSON = JSON.parse('[' + multiString + ']')
-              var encodeObj
-              if (this.evmBC) {
-                encodeObj = txFormat.encodeData(this.funABI, multiJSON, this.evmBC)
-              } else {
-                encodeObj = txFormat.encodeData(this.funABI, multiJSON)
-              }
-              if (encodeObj.error) {
-                throw new Error(encodeObj.error)
-              } else {
-                return encodeObj.data
-              }
-            }, 'Encode values of input fields & copy to clipboard', 'fa-clipboard')}
-            ${expandedButton}
-        </div>
-      </div>
-    </div>`
-
-    var contractProperty = yo`
-      <div class="${css.contractProperty}">
-        ${this.contractActionsContainerSingle} ${this.contractActionsContainerMulti}
-      </div>
-    `
-    if (this.lookupOnly) {
-      // call. stateMutability is either pure or view
-      expandedButton.setAttribute('title', (title + ' - call'))
-      expandedButton.innerHTML = 'call'
-      expandedButton.classList.add('btn-info')
-      expandedButton.setAttribute('data-id', (title + ' - call'))
-      funcButton.setAttribute('title', (title + ' - call'))
-      funcButton.classList.add('btn-info')
-      funcButton.setAttribute('data-id', (title + ' - call'))
-    } else if (this.funABI.stateMutability === 'payable' || this.funABI.payable) {
-      // transact. stateMutability = payable
-      expandedButton.setAttribute('title', (title + ' - transact (payable)'))
-      expandedButton.innerHTML = 'transact'
-      expandedButton.classList.add('btn-danger')
-      expandedButton.setAttribute('data-id', (title + ' - transact (payable)'))
-      funcButton.setAttribute('title', (title + ' - transact (payable)'))
-      funcButton.classList.add('btn-danger')
-      funcButton.setAttribute('data-id', (title + ' - transact (payable)'))
-    } else {
-      // transact. stateMutability = nonpayable
-      expandedButton.setAttribute('title', (title + ' - transact (not payable)'))
-      expandedButton.innerHTML = 'transact'
-      expandedButton.classList.add('btn-warning')
-      expandedButton.setAttribute('data-id', (title + ' - transact (not payable)'))
-      funcButton.classList.add('btn-warning')
-      funcButton.setAttribute('title', (title + ' - transact (not payable)'))
-      funcButton.setAttribute('data-id', (title + ' - transact (not payable)'))
-    }
-
-    if (this.funABI.inputs && this.funABI.inputs.length > 0) {
-      contractProperty.classList.add(css.hasArgs)
-    } else if (this.funABI.type === 'fallback' || this.funABI.type === 'receive') {
-      contractProperty.classList.add(css.hasArgs)
-      this.basicInputField.setAttribute('title', `'(${this.funABI.type}')`) // probably should pass name instead
-      this.contractActionsContainerSingle.querySelector('i').style.visibility = 'hidden'
-      this.basicInputField.setAttribute('data-id', `'(${this.funABI.type}')`)
-    } else {
-      this.contractActionsContainerSingle.querySelector('i').style.visibility = 'hidden'
-      this.basicInputField.style.visibility = 'hidden'
-    }
-
-    return contractProperty
-  }
-}
-
-module.exports = MultiParamManager
diff --git a/apps/remix-ide/src/app/ui/universal-dapp-ui.js b/apps/remix-ide/src/app/ui/universal-dapp-ui.js
deleted file mode 100644
index 217217503f..0000000000
--- a/apps/remix-ide/src/app/ui/universal-dapp-ui.js
+++ /dev/null
@@ -1,272 +0,0 @@
-/* global */
-'use strict'
-
-var $ = require('jquery')
-var yo = require('yo-yo')
-var ethJSUtil = require('ethereumjs-util')
-var BN = ethJSUtil.BN
-var helper = require('../../lib/helper')
-var copyToClipboard = require('./copy-to-clipboard')
-var css = require('../../universal-dapp-styles')
-var MultiParamManager = require('./multiParamManager')
-var remixLib = require('@remix-project/remix-lib')
-var txFormat = remixLib.execution.txFormat
-const txHelper = remixLib.execution.txHelper
-var TreeView = require('./TreeView')
-var txCallBacks = require('./sendTxCallbacks')
-const _paq = window._paq = window._paq || []
-
-function UniversalDAppUI (blockchain, logCallback) {
-  this.blockchain = blockchain
-  this.logCallback = logCallback
-  this.compilerData = { contractsDetails: {} }
-}
-
-function decodeResponseToTreeView (response, fnabi) {
-  var treeView = new TreeView({
-    extractData: (item, parent, key) => {
-      var ret = {}
-      if (BN.isBN(item)) {
-        ret.self = item.toString(10)
-        ret.children = []
-      } else {
-        ret = treeView.extractDataDefault(item, parent, key)
-      }
-      return ret
-    }
-  })
-  return treeView.render(txFormat.decodeResponse(response, fnabi))
-}
-
-UniversalDAppUI.prototype.renderInstance = function (contract, address, contractName) {
-  var noInstances = document.querySelector('[data-id="deployAndRunNoInstanceText"]')
-  if (noInstances) {
-    noInstances.parentNode.removeChild(noInstances)
-  }
-  const abi = txHelper.sortAbiFunction(contract.abi)
-  return this.renderInstanceFromABI(abi, address, contractName, contract)
-}
-
-// TODO this function was named before "appendChild".
-// this will render an instance: contract name, contract address, and all the public functions
-// basically this has to be called for the "atAddress" (line 393) and when a contract creation succeed
-// this returns a DOM element
-UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address, contractName, contract) {
-  const self = this
-  address = (address.slice(0, 2) === '0x' ? '' : '0x') + address.toString('hex')
-  address = ethJSUtil.toChecksumAddress(address)
-  var instance = yo`<div class="instance run-instance border-dark ${css.instance} ${css.hidesub}" id="instance${address}" data-shared="universalDappUiInstance"></div>`
-  const context = this.blockchain.context()
-
-  var shortAddress = helper.shortenAddress(address)
-  var title = yo`
-    <div class="${css.title} alert alert-secondary">
-      <button data-id="universalDappUiTitleExpander" class="btn ${css.titleExpander}" onclick="${(e) => { toggleClass(e) }}">
-        <i class="fas fa-angle-right" aria-hidden="true"></i>
-      </button>
-      <div class="input-group ${css.nameNbuts}">
-        <div class="${css.titleText} input-group-prepend">
-          <span class="input-group-text ${css.spanTitleText}">
-            ${contractName} at ${shortAddress} (${context})
-          </span>
-        </div>
-        <div class="btn-group">
-          <button class="btn p-1 btn-secondary">${copyToClipboard(() => address)}</button>
-        </div>
-      </div>
-    </div>
-  `
-
-  var close = yo`
-    <button
-      class="${css.udappClose} mr-1 p-1 btn btn-secondary align-items-center"
-      data-id="universalDappUiUdappClose"
-      onclick=${remove}
-      title="Remove from the list"
-    >
-      <i class="${css.closeIcon} fas fa-times" aria-hidden="true"></i>
-    </button>`
-  title.querySelector('.btn-group').appendChild(close)
-
-  var contractActionsWrapper = yo`
-    <div class="${css.cActionsWrapper}" data-id="universalDappUiContractActionWrapper">
-    </div>
-  `
-
-  function remove () {
-    instance.remove()
-    // @TODO perhaps add a callack here to warn the caller that the instance has been removed
-  }
-
-  function toggleClass (e) {
-    $(instance).toggleClass(`${css.hidesub} bg-light`)
-    // e.currentTarget.querySelector('i')
-    e.currentTarget.querySelector('i').classList.toggle('fa-angle-right')
-    e.currentTarget.querySelector('i').classList.toggle('fa-angle-down')
-  }
-
-  instance.appendChild(title)
-  instance.appendChild(contractActionsWrapper)
-
-  $.each(contractABI, (i, funABI) => {
-    if (funABI.type !== 'function') {
-      return
-    }
-    // @todo getData cannot be used with overloaded functions
-    contractActionsWrapper.appendChild(this.getCallButton({
-      funABI: funABI,
-      address: address,
-      contractABI: contractABI,
-      contractName: contractName,
-      contract
-    }))
-  })
-
-  const calldataInput = yo`
-    <input id="deployAndRunLLTxCalldata" class="${css.calldataInput} form-control" title="The Calldata to send to fallback function of the contract.">
-  `
-  const llIError = yo`
-    <label id="deployAndRunLLTxError" class="text-danger my-2"></label>
-  `
-  // constract LLInteractions elements
-  const lowLevelInteracions = yo`
-    <div class="d-flex flex-column">
-      <div class="d-flex flex-row justify-content-between mt-2">
-        <div class="py-2 border-top d-flex justify-content-start flex-grow-1">
-          Low level interactions
-        </div>
-        <a
-          href="https://solidity.readthedocs.io/en/v0.6.2/contracts.html#receive-ether-function"
-          title="check out docs for using 'receive'/'fallback'"
-          target="_blank"
-        >
-          <i aria-hidden="true" class="fas fa-info my-2 mr-1"></i>
-        </a>
-      </div>
-      <div class="d-flex flex-column align-items-start">
-        <label class="">CALLDATA</label>
-        <div class="d-flex justify-content-end w-100 align-items-center">
-          ${calldataInput}
-          <button id="deployAndRunLLTxSendTransaction" data-id="pluginManagerSettingsDeployAndRunLLTxSendTransaction" class="${css.instanceButton} p-0 w-50 btn border-warning text-warning" title="Send data to contract." onclick=${() => sendData()}>Transact</button>
-        </div>
-      </div>
-      <div>
-        ${llIError}
-      </div>
-    </div>
-  `
-
-  function sendData () {
-    function setLLIError (text) {
-      llIError.innerText = text
-    }
-
-    setLLIError('')
-    const fallback = txHelper.getFallbackInterface(contractABI)
-    const receive = txHelper.getReceiveInterface(contractABI)
-    const args = {
-      funABI: fallback || receive,
-      address: address,
-      contractName: contractName,
-      contractABI: contractABI
-    }
-    const amount = document.querySelector('#value').value
-    if (amount !== '0') {
-      // check for numeric and receive/fallback
-      if (!helper.isNumeric(amount)) {
-        return setLLIError('Value to send should be a number')
-      } else if (!receive && !(fallback && fallback.stateMutability === 'payable')) {
-        return setLLIError("In order to receive Ether transfer the contract should have either 'receive' or payable 'fallback' function")
-      }
-    }
-    let calldata = calldataInput.value
-    if (calldata) {
-      if (calldata.length < 4 && helper.is0XPrefixed(calldata)) {
-        return setLLIError('The calldata should be a valid hexadecimal value with size of at least one byte.')
-      } else {
-        if (helper.is0XPrefixed(calldata)) {
-          calldata = calldata.substr(2, calldata.length)
-        }
-        if (!helper.isHexadecimal(calldata)) {
-          return setLLIError('The calldata should be a valid hexadecimal value.')
-        }
-      }
-      if (!fallback) {
-        return setLLIError("'Fallback' function is not defined")
-      }
-    }
-
-    if (!receive && !fallback) return setLLIError('Both \'receive\' and \'fallback\' functions are not defined')
-
-    // we have to put the right function ABI:
-    // if receive is defined and that there is no calldata => receive function is called
-    // if fallback is defined => fallback function is called
-    if (receive && !calldata) args.funABI = receive
-    else if (fallback) args.funABI = fallback
-
-    if (!args.funABI) return setLLIError('Please define a \'Fallback\' function to send calldata and a either \'Receive\' or payable \'Fallback\' to send ethers')
-    self.runTransaction(false, args, null, calldataInput.value, null)
-  }
-
-  contractActionsWrapper.appendChild(lowLevelInteracions)
-  return instance
-}
-
-// TODO this is used by renderInstance when a new instance is displayed.
-// this returns a DOM element.
-UniversalDAppUI.prototype.getCallButton = function (args) {
-  const self = this
-  var outputOverride = yo`<div class=${css.value}></div>` // show return value
-  const isConstant = args.funABI.constant !== undefined ? args.funABI.constant : false
-  const lookupOnly = args.funABI.stateMutability === 'view' || args.funABI.stateMutability === 'pure' || isConstant
-  const multiParamManager = new MultiParamManager(
-    lookupOnly,
-    args.funABI,
-    (valArray, inputsValues) => self.runTransaction(lookupOnly, args, valArray, inputsValues, outputOverride),
-    self.blockchain.getInputs(args.funABI)
-  )
-
-  const contractActionsContainer = yo`<div class="${css.contractActionsContainer}" >${multiParamManager.render()}</div>`
-  contractActionsContainer.appendChild(outputOverride)
-
-  return contractActionsContainer
-}
-
-UniversalDAppUI.prototype.runTransaction = function (lookupOnly, args, valArr, inputsValues, outputOverride) {
-  const functionName = args.funABI.type === 'function' ? args.funABI.name : `(${args.funABI.type})`
-  const logMsg = `${lookupOnly ? 'call' : 'transact'} to ${args.contractName}.${functionName}`
-
-  const callbacksInContext = txCallBacks.getCallBacksWithContext(this, this.blockchain)
-
-  const outputCb = (returnValue) => {
-    if (outputOverride) {
-      const decoded = decodeResponseToTreeView(returnValue, args.funABI)
-      outputOverride.innerHTML = ''
-      outputOverride.appendChild(decoded)
-    }
-  }
-  let callinfo = ''
-  if (lookupOnly) callinfo = 'call'
-  else if (args.funABI.type === 'fallback' || args.funABI.type === 'receive') callinfo = 'lowLevelInteracions'
-  else callinfo = 'transact'
-
-  _paq.push(['trackEvent', 'udapp', callinfo, this.blockchain.getCurrentNetworkStatus().network.name])
-  const params = args.funABI.type !== 'fallback' ? inputsValues : ''
-  this.blockchain.runOrCallContractMethod(
-    args.contractName,
-    args.contractABI,
-    args.funABI,
-    args.contract,
-    inputsValues,
-    args.address,
-    params,
-    lookupOnly,
-    logMsg,
-    this.logCallback,
-    outputCb,
-    callbacksInContext.confirmationCb.bind(callbacksInContext),
-    callbacksInContext.continueCb.bind(callbacksInContext),
-    callbacksInContext.promptCb.bind(callbacksInContext))
-}
-
-module.exports = UniversalDAppUI
diff --git a/apps/remix-ide/src/lib/publishOnIpfs.js b/apps/remix-ide/src/lib/publishOnIpfs.js
deleted file mode 100644
index 07f8256540..0000000000
--- a/apps/remix-ide/src/lib/publishOnIpfs.js
+++ /dev/null
@@ -1,121 +0,0 @@
-'use strict'
-
-const async = require('async')
-const IpfsClient = require('ipfs-mini')
-
-const ipfsNodes = [
-  new IpfsClient({ host: 'ipfs.remixproject.org', port: 443, protocol: 'https' }),
-  new IpfsClient({ host: 'ipfs.infura.io', port: 5001, protocol: 'https' }),
-  new IpfsClient({ host: '127.0.0.1', port: 5001, protocol: 'http' })
-]
-
-module.exports = (contract, fileManager, cb, ipfsVerifiedPublishCallBack) => {
-  // gather list of files to publish
-  var sources = []
-
-  var metadata
-
-  try {
-    metadata = JSON.parse(contract.metadata)
-  } catch (e) {
-    return cb(e)
-  }
-
-  if (metadata === undefined) {
-    return cb('No metadata')
-  }
-
-  async.eachSeries(Object.keys(metadata.sources), function (fileName, cb) {
-    // find hash
-    let hash = null
-    try {
-      // we try extract the hash defined in the metadata.json
-      // in order to check if the hash that we get after publishing is the same as the one located in metadata.json
-      // if it's not the same, we throw "hash mismatch between solidity bytecode and uploaded content"
-      // if we don't find the hash in the metadata.json, the check is not done.
-      //
-      // TODO: refactor this with publishOnSwarm
-      if (metadata.sources[fileName].urls) {
-        metadata.sources[fileName].urls.forEach(url => {
-          if (url.includes('ipfs')) hash = url.match('dweb:/ipfs/(.+)')[1]
-        })
-      }
-    } catch (e) {
-      return cb('Error while extracting the hash from metadata.json')
-    }
-
-    fileManager.fileProviderOf(fileName).get(fileName, (error, content) => {
-      if (error) {
-        console.log(error)
-      } else {
-        sources.push({
-          content: content,
-          hash: hash,
-          filename: fileName
-        })
-      }
-      cb()
-    })
-  }, function (error) {
-    if (error) {
-      cb(error)
-    } else {
-      // publish the list of sources in order, fail if any failed
-      var uploaded = []
-      async.eachSeries(sources, function (item, cb) {
-        ipfsVerifiedPublish(item.content, item.hash, (error, result) => {
-          try {
-            item.hash = result.url.match('dweb:/ipfs/(.+)')[1]
-          } catch (e) {
-            item.hash = '<Metadata inconsistency> - ' + item.fileName
-          }
-          if (!error && ipfsVerifiedPublishCallBack) ipfsVerifiedPublishCallBack(item)
-          item.output = result
-          uploaded.push(item)
-          cb(error)
-        })
-      }, () => {
-        const metadataContent = JSON.stringify(metadata)
-        ipfsVerifiedPublish(metadataContent, '', (error, result) => {
-          try {
-            contract.metadataHash = result.url.match('dweb:/ipfs/(.+)')[1]
-          } catch (e) {
-            contract.metadataHash = '<Metadata inconsistency> - metadata.json'
-          }
-          if (!error && ipfsVerifiedPublishCallBack) {
-            ipfsVerifiedPublishCallBack({
-              content: metadataContent,
-              hash: contract.metadataHash
-            })
-          }
-          uploaded.push({
-            content: contract.metadata,
-            hash: contract.metadataHash,
-            filename: 'metadata.json',
-            output: result
-          })
-          cb(error, uploaded)
-        })
-      })
-    }
-  })
-}
-
-async function ipfsVerifiedPublish (content, expectedHash, cb) {
-  try {
-    const results = await severalGatewaysPush(content)
-    if (expectedHash && results !== expectedHash) {
-      cb(null, { message: 'hash mismatch between solidity bytecode and uploaded content.', url: 'dweb:/ipfs/' + results, hash: results })
-    } else {
-      cb(null, { message: 'ok', url: 'dweb:/ipfs/' + results, hash: results })
-    }
-  } catch (error) {
-    cb(error)
-  }
-}
-
-function severalGatewaysPush (content) {
-  const invert = p => new Promise((resolve, reject) => p.then(reject).catch(resolve)) // Invert res and rej
-  const promises = ipfsNodes.map((node) => invert(node.add(content)))
-  return invert(Promise.all(promises))
-}
diff --git a/apps/remix-ide/src/lib/publishOnSwarm.js b/apps/remix-ide/src/lib/publishOnSwarm.js
deleted file mode 100644
index 10fd618cf6..0000000000
--- a/apps/remix-ide/src/lib/publishOnSwarm.js
+++ /dev/null
@@ -1,109 +0,0 @@
-'use strict'
-
-var async = require('async')
-var swarmgw = require('swarmgw')()
-
-module.exports = (contract, fileManager, cb, swarmVerifiedPublishCallBack) => {
-  // gather list of files to publish
-  var sources = []
-
-  var metadata
-  try {
-    metadata = JSON.parse(contract.metadata)
-  } catch (e) {
-    return cb(e)
-  }
-
-  if (metadata === undefined) {
-    return cb('No metadata')
-  }
-
-  async.eachSeries(Object.keys(metadata.sources), function (fileName, cb) {
-    // find hash
-    let hash = null
-    try {
-      // we try extract the hash defined in the metadata.json
-      // in order to check if the hash that we get after publishing is the same as the one located in metadata.json
-      // if it's not the same, we throw "hash mismatch between solidity bytecode and uploaded content"
-      // if we don't find the hash in the metadata.json, the check is not done.
-      //
-      // TODO: refactor this with publishOnIpfs
-      if (metadata.sources[fileName].urls) {
-        metadata.sources[fileName].urls.forEach(url => {
-          if (url.includes('bzz')) hash = url.match('(bzzr|bzz-raw)://(.+)')[1]
-        })
-      }
-    } catch (e) {
-      return cb('Error while extracting the hash from metadata.json')
-    }
-
-    fileManager.fileProviderOf(fileName).get(fileName, (error, content) => {
-      if (error) {
-        console.log(error)
-      } else {
-        sources.push({
-          content: content,
-          hash: hash,
-          filename: fileName
-        })
-      }
-      cb()
-    })
-  }, function (error) {
-    if (error) {
-      cb(error)
-    } else {
-      // publish the list of sources in order, fail if any failed
-      var uploaded = []
-      async.eachSeries(sources, function (item, cb) {
-        swarmVerifiedPublish(item.content, item.hash, (error, result) => {
-          try {
-            item.hash = result.url.match('bzz-raw://(.+)')[1]
-          } catch (e) {
-            item.hash = '<Metadata inconsistency> - ' + item.fileName
-          }
-          if (!error && swarmVerifiedPublishCallBack) swarmVerifiedPublishCallBack(item)
-          item.output = result
-          uploaded.push(item)
-          // TODO this is a fix cause Solidity metadata does not contain the right swarm hash (poc 0.3)
-          metadata.sources[item.filename].urls[0] = result.url
-          cb(error)
-        })
-      }, () => {
-        const metadataContent = JSON.stringify(metadata)
-        swarmVerifiedPublish(metadataContent, '', (error, result) => {
-          try {
-            contract.metadataHash = result.url.match('bzz-raw://(.+)')[1]
-          } catch (e) {
-            contract.metadataHash = '<Metadata inconsistency> - metadata.json'
-          }
-          if (!error && swarmVerifiedPublishCallBack) {
-            swarmVerifiedPublishCallBack({
-              content: metadataContent,
-              hash: contract.metadataHash
-            })
-          }
-          uploaded.push({
-            content: contract.metadata,
-            hash: contract.metadataHash,
-            filename: 'metadata.json',
-            output: result
-          })
-          cb(error, uploaded)
-        })
-      })
-    }
-  })
-}
-
-function swarmVerifiedPublish (content, expectedHash, cb) {
-  swarmgw.put(content, function (err, ret) {
-    if (err) {
-      cb(err)
-    } else if (expectedHash && ret !== expectedHash) {
-      cb(null, { message: 'hash mismatch between solidity bytecode and uploaded content.', url: 'bzz-raw://' + ret, hash: ret })
-    } else {
-      cb(null, { message: 'ok', url: 'bzz-raw://' + ret, hash: ret })
-    }
-  })
-}
diff --git a/apps/remix-ide/src/publishToStorage.js b/apps/remix-ide/src/publishToStorage.js
deleted file mode 100644
index 5803d9a6a6..0000000000
--- a/apps/remix-ide/src/publishToStorage.js
+++ /dev/null
@@ -1,47 +0,0 @@
-const yo = require('yo-yo')
-const publishOnSwarm = require('./lib/publishOnSwarm')
-const publishOnIpfs = require('./lib/publishOnIpfs')
-const modalDialogCustom = require('./app/ui/modal-dialog-custom')
-
-export default function publish (storage, fileProvider, fileManager, contract) {
-  if (contract) {
-    if (contract.metadata === undefined || contract.metadata.length === 0) {
-      modalDialogCustom.alert('This contract may be abstract, may not implement an abstract parent\'s methods completely or not invoke an inherited contract\'s constructor correctly.')
-    } else {
-      if (storage === 'swarm') {
-        publishOnSwarm(contract, fileManager, function (err, uploaded) {
-          if (err) {
-            try {
-              err = JSON.stringify(err)
-            } catch (e) {}
-            console.log(`Failed to publish metadata file to swarm, please check the Swarm gateways is available ( swarm-gateways.net ) ${err}`)
-          } else {
-            var result = yo`<div>${uploaded.map((value) => {
-              return yo`<div><b>${value.filename}</b> : <pre>${value.output.url}</pre></div>`
-            })}</div>`
-            modalDialogCustom.alert(`Published ${contract.name}'s Metadata`, yo`<span>Metadata of "${contract.name.toLowerCase()}" was published successfully.<br> <pre>${result}</pre> </span>`)
-          }
-        }, (item) => { // triggered each time there's a new verified publish (means hash correspond)
-          fileProvider.addExternal('swarm/' + item.hash, item.content)
-        })
-      } else {
-        publishOnIpfs(contract, fileManager, function (err, uploaded) {
-          if (err) {
-            try {
-              err = JSON.stringify(err)
-            } catch (e) {}
-            modalDialogCustom.alert(yo`<span>Failed to publish metadata file to ${storage}, please check the ${storage} gateways is available.<br />
-            ${err}</span>`)
-          } else {
-            var result = yo`<div>${uploaded.map((value) => {
-              return yo`<div><b>${value.filename}</b> : <pre>${value.output.url.replace('dweb:/ipfs/', 'ipfs://')}</pre></div>`
-            })}</div>`
-            modalDialogCustom.alert(`Published ${contract.name}'s Metadata`, yo`<span>Metadata of "${contract.name.toLowerCase()}" was published successfully.<br> <pre>${result}</pre> </span>`)
-          }
-        }, (item) => { // triggered each time there's a new verified publish (means hash correspond)
-          fileProvider.addExternal('ipfs/' + item.hash, item.content)
-        })
-      }
-    }
-  }
-}
diff --git a/apps/remix-ide/src/universal-dapp-styles.js b/apps/remix-ide/src/universal-dapp-styles.js
deleted file mode 100644
index 4ae5034a5c..0000000000
--- a/apps/remix-ide/src/universal-dapp-styles.js
+++ /dev/null
@@ -1,285 +0,0 @@
-const csjs = require('csjs-inject')
-
-var css = csjs`
-  .instanceTitleContainer {
-    display: flex;
-    align-items: center;
-  }
-  .calldataInput{
-    height: 32px;
-  }
-  .title {
-    display: flex;
-    justify-content: space-between;
-    font-size: 11px;
-    width: 100%;
-    overflow: hidden;
-    word-break: break-word;
-    line-height: initial;
-    overflow: visible;
-    padding: 0 0 8px;
-    margin: 0;
-    background: none;
-    border: none;
-  }
-  .title button {
-    background: none;
-    border: none;
-  }
-  .titleLine {
-    display: flex;
-    align-items: baseline;
-  }
-  .titleText {
-    word-break: break-word;
-    width: 100%;
-    border: none;
-    overflow: hidden;
-  }
-  .spanTitleText {
-    line-height: 12px;
-    padding: 0;
-    font-size: 11px;
-    width:100%;
-    border: none;
-    background: none;
-    text-transform: uppercase;
-    overflow: hidden;
-  }
-  .inputGroupText {
-    width: 100%;
-  }
-  .title .copy {
-    color: var(--primary);
-  }
-  .titleExpander {
-    padding: 5px 7px;
-  }
-  .nameNbuts {
-    display: contents;
-    flex-wrap: nowrap;
-    width: 100%;
-  }
-  .instance {
-    display: block;
-    flex-direction: column;
-    margin-bottom: 12px;
-    background: none;
-    border-radius: 2px;
-  }
-  .instance.hidesub {
-    border-bottom: 1px solid;
-  }
-  .instance.hidesub .title {
-      display: flex;
-  }
-  .instance.hidesub .udappClose {
-      display: flex;
-  }
-  .instance.hidesub > * {
-    display: none;
-  }
-  .methCaret {
-    min-width: 12px;
-    width: 12px;
-    margin-left: 4px;
-    cursor: pointer;
-    font-size: 16px;
-    line-height: 0.6;
-    vertical-align: middle;
-    padding: 0;
-  }
-  .cActionsWrapper {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0.25rem;
-    border-top-rightt-radius: 0;
-    border-bottom-right-radius: 0.25rem;
-    padding: 8px 10px 7px;
-  }
-  .group:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-  .buttonsContainer {
-    margin-top: 2%;
-    display: flex;
-    overflow: hidden;
-  }
-  .instanceButton {
-    height: 32px;
-    border-radius: 3px;
-    white-space: nowrap;
-    font-size: 11px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .closeIcon {
-    font-size: 12px;
-    cursor: pointer;
-    margin-left: 5px;
-  }
-  .udappClose {
-    display: flex;
-    justify-content: flex-end;
-  }
-  .contractProperty {
-    width:100%;
-  }
-  .contractProperty.hasArgs input {
-    padding: .36em;
-    border-radius: 5px;
-  }
-  .contractProperty .contractActionsContainerSingle input{
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-  .contractProperty button {
-    min-width: 100px;
-    width: 100px;
-    margin:0;
-    word-break: inherit;
-  }
-  .contractProperty button:disabled {
-    cursor: not-allowed;
-    background-color: white;
-    border-color: lightgray;
-  }
-  .contractProperty.constant button {
-    min-width: 100px;
-    width: 100px;
-    margin:0;
-    word-break: inherit;
-    outline: none;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .contractProperty > .value {
-    box-sizing: border-box;
-    float: left;
-    align-self: center;
-    margin-left: 4px;
-  }
-  .contractActionsContainer {
-    width: 100%;
-    margin-bottom: 8px;
-  }
-  .contractActionsContainerSingle {
-    display: flex;
-    width: 100%;
-  }
-  .contractActionsContainerSingle i {
-    line-height: 2;
-  }
-  .contractActionsContainerMulti {
-    display:none;
-    width: 100%;
-  }
-  .contractActionsContainerMultiInner {
-    width: 100%;
-    padding: 16px 8px 16px 14px;
-    border-radius: 3px;
-    margin-bottom: 8px;
-  }
-  .multiHeader {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 8px;
-    text-align: left;
-    font-size: 10px;
-    font-weight: bold;
-  }
-  .contractActionsContainerMultiInner .multiTitle {
-    padding-left: 10px;
-  }
-  .contractProperty .multiTitle {
-    padding: 0;
-    line-height: 16px;
-    display: inline-block;
-    font-size: 12px;
-    font-weight: bold;
-    cursor: default;
-  }
-  .contractProperty .contractActionsContainerMultiInner .multiArg label{
-    text-align: right;
-  }
-  .multiHeader .methCaret {
-    float: right;
-    margin-right: 0;
-  }
-  .contractProperty.constant .multiTitle {
-    display: inline-block;
-    width: 90%;
-    /* font-size: 10px; */
-    height: 25px;
-    padding-left: 20px;
-    font-weight: bold;
-    line-height: 25px;
-    cursor: default;
-  }
-  .multiArg {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    margin-top: 4px;
-  }
-  .multiArg input{
-    padding: 5px;
-  }
-  .multiArg label {
-    width: auto;
-    padding: 0;
-    margin: 0 4px 0 0;
-    font-size: 10px;
-    line-height: 12px;
-    text-align: right;
-    word-break: initial;
-  }
-  .multiArg button {
-    max-width: 100px;
-    border-radius: 3px;
-    border-width: 1px;
-    width: inherit;
-  }
-  .multiHeader button {
-    display: inline-block;
-    width: 94%;
-  }
-  .hasArgs .multiArg input {
-    border-left: 1px solid #dddddd;
-    width: 67%;
-  }
-  .hasArgs input {
-    display: block;
-    height: 32px;
-    border: 1px solid #dddddd;
-    padding: .36em;
-    border-left: none;
-    padding: 8px 8px 8px 10px;
-    font-size: 10px !important;
-  }
-  .hasArgs button {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    border-right: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: 11px;
-  }
-  .hasArgs .contractActionsContainerMulti button {
-    border-radius: 3px;
-  }
-  .contractActionsContainerMultiInner .multiArg i {
-    padding-right: 10px;
-  }
-  .hideWarningsContainer {
-    display: flex;
-    align-items: center;
-    margin-left: 2%
-  }
-`
-
-module.exports = css

From 2aecae2f63cd22ff3ff42e003589fc1266702d9c Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Thu, 6 Jan 2022 14:03:59 +0100
Subject: [PATCH 158/168] update modal parameters

---
 apps/remix-ide-e2e/src/tests/publishContract.test.ts | 2 +-
 apps/remix-ide-e2e/src/tests/terminal.test.ts        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/publishContract.test.ts b/apps/remix-ide-e2e/src/tests/publishContract.test.ts
index 1d35351b77..e1a19ccabb 100644
--- a/apps/remix-ide-e2e/src/tests/publishContract.test.ts
+++ b/apps/remix-ide-e2e/src/tests/publishContract.test.ts
@@ -67,7 +67,7 @@ module.exports = {
 
         if (value.indexOf('Metadata of "storage" was published successfully.') === -1) browser.assert.fail('ipfs deploy failed')
       })
-      .modalFooterOKClick()
+      .modalFooterOKClick('udapp')
   },
 
   'Should remember choice after page refresh': function (browser: NightwatchBrowser) {
diff --git a/apps/remix-ide-e2e/src/tests/terminal.test.ts b/apps/remix-ide-e2e/src/tests/terminal.test.ts
index ed5f94aff1..69c3acc765 100644
--- a/apps/remix-ide-e2e/src/tests/terminal.test.ts
+++ b/apps/remix-ide-e2e/src/tests/terminal.test.ts
@@ -51,7 +51,7 @@ module.exports = {
       .click('*[data-id="terminalClearConsole"]') // clear  the terminal
       .clickLaunchIcon('udapp')
       .click('*[data-id="settingsWeb3Mode"]')
-      .modalFooterOKClick()
+      .modalFooterOKClick('udappNotify')
       .executeScript('web3.eth.getAccounts()')
       .waitForElementContainsText('*[data-id="terminalJournal"]', '["', 60000) // we check if an array is present, don't need to check for the content
       .waitForElementContainsText('*[data-id="terminalJournal"]', '"]', 60000)

From 34a51e3fb31765b66ba0c16322a7cdc2e8e94706 Mon Sep 17 00:00:00 2001
From: David Disu <daviddisu8@gmail.com>
Date: Thu, 6 Jan 2022 14:12:01 +0100
Subject: [PATCH 159/168] include changes lost from rebase

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b77cbf7046..0e55dd276d 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     "workspace-schematic": "nx workspace-schematic",
     "dep-graph": "nx dep-graph",
     "help": "nx help",
-    "lint:libs": "nx run-many --target=lint --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd,remix-ui-tree-view,remix-ui-modal-dialog,remix-ui-toaster,remix-ui-helper,remix-ui-debugger-ui,remix-ui-workspace,remix-ui-static-analyser,remix-ui-checkbox,remix-ui-settings,remix-core-plugin,remix-ui-renderer,remix-ui-publish-to-storage,remix-ui-solidity-compiler,solidity-unit-testing,remix-ui-plugin-manager,remix-ui-terminal,remix-ui-editor,remix-ui-app,remix-ui-tabs,remix-ui-panel,remix-ui-run-tabs",
+    "lint:libs": "nx run-many --target=lint --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd,remix-ui-tree-view,remix-ui-modal-dialog,remix-ui-toaster,remix-ui-helper,remix-ui-debugger-ui,remix-ui-workspace,remix-ui-static-analyser,remix-ui-checkbox,remix-ui-settings,remix-core-plugin,remix-ui-renderer,remix-ui-publish-to-storage,remix-ui-solidity-compiler,solidity-unit-testing,remix-ui-plugin-manager,remix-ui-terminal,remix-ui-editor,remix-ui-app,remix-ui-tabs,remix-ui-panel,remix-ui-run-tab",
     "build:libs": "nx run-many --target=build --parallel=false --with-deps=true --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd",
     "test:libs": "nx run-many --target=test --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd",
     "publish:libs": "npm run build:libs && lerna publish --skip-git && npm run bumpVersion:libs",

From 03727ba235e39d1bbdeb6bc8a22b0baedad300e6 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Wed, 5 Jan 2022 15:50:06 +0100
Subject: [PATCH 160/168] hardhart_provider_react

---
 .../src/app/tabs/hardhat-provider.js          | 58 +++++++++++++------
 1 file changed, 41 insertions(+), 17 deletions(-)

diff --git a/apps/remix-ide/src/app/tabs/hardhat-provider.js b/apps/remix-ide/src/app/tabs/hardhat-provider.js
index 75c20a90cd..2d3f8e243b 100644
--- a/apps/remix-ide/src/app/tabs/hardhat-provider.js
+++ b/apps/remix-ide/src/app/tabs/hardhat-provider.js
@@ -1,8 +1,7 @@
 import * as packageJson from '../../../../../package.json'
 import { Plugin } from '@remixproject/engine'
 import Web3 from 'web3'
-const yo = require('yo-yo')
-const modalDialogCustom = require('../ui/modal-dialog-custom')
+import React from 'react' // eslint-disable-line
 
 const profile = {
   name: 'hardhat-provider',
@@ -27,29 +26,47 @@ export default class HardhatProvider extends Plugin {
   }
 
   hardhatProviderDialogBody () {
-    return yo`
-        <div class="">
+    return <div>
           Note: To run Hardhat network node on your system, go to hardhat project folder and run command:
-          <div class="border p-1">npx hardhat node</div>
-        <br>
-        For more info, visit: <a href="https://hardhat.org/getting-started/#connecting-a-wallet-or-dapp-to-hardhat-network" target="_blank">Hardhat Documentation</a>
-        <br><br>
+          <div class="border p-1">npx hardhat node</div>       
+        For more info, visit: <a href="https://hardhat.org/getting-started/#connecting-a-wallet-or-dapp-to-hardhat-network" target="_blank">Hardhat Documentation</a>       
         Hardhat JSON-RPC Endpoint
       </div>
-    `
   }
 
   sendAsync (data) {
-    return new Promise((resolve, reject) => {
+    return new Promise(async (resolve, reject) => {
       if (this.blocked) return reject(new Error('provider unable to connect'))
       // If provider is not set, allow to open modal only when provider is trying to connect
       if (!this.provider) {
-        modalDialogCustom.prompt('Hardhat node request', this.hardhatProviderDialogBody(), 'http://127.0.0.1:8545', (target) => {
-          this.provider = new Web3.providers.HttpProvider(target)
-          this.sendAsyncInternal(data, resolve, reject)
-        }, () => {
-          this.sendAsyncInternal(data, resolve, reject)
-        })
+        let value
+        try {
+          value = await (() => {
+            return new Promise((resolve, reject) => {
+              const modalContent = {
+                id: 'harrhatprovider',
+                title: 'Hardhat node request',
+                message: this.hardhatProviderDialogBody(),
+                modalType: 'prompt',
+                okLabel: 'OK',
+                cancelLabel: 'Cancel',
+                okFn: (value) => {
+                  setTimeout(() => resolve(value), 0)
+                },
+                cancelFn: (value) => {
+                  setTimeout(() => reject(new Error('Canceled')), 0)
+                },
+                defaultValue: 'http://127.0.0.1:8545'
+              }
+              this.call('modal', 'modal', modalContent)
+            })
+          })()
+        } catch (e) {
+          // the modal has been canceled
+          return
+        }        
+        this.provider = new Web3.providers.HttpProvider(target)
+        this.sendAsyncInternal(data, resolve, reject)       
       } else {
         this.sendAsyncInternal(data, resolve, reject)
       }
@@ -64,7 +81,14 @@ export default class HardhatProvider extends Plugin {
       this.provider[this.provider.sendAsync ? 'sendAsync' : 'send'](data, async (error, message) => {
         if (error) {
           this.blocked = true
-          modalDialogCustom.alert('Hardhat Provider', `Error while connecting to the hardhat provider: ${error.message}`)
+          const modalContent = {
+            id: 'harrhatprovider',
+            title: 'Hardhat Provider',
+            message: `Error while connecting to the hardhat provider: ${error.message}`,
+            modalType: 'alert',
+            okLabel: 'OK'
+          }
+          this.call('modal', 'modal', modalContent)    
           await this.call('udapp', 'setEnvironmentMode', { context: 'vm', fork: 'london' })
           this.provider = null
           setTimeout(_ => { this.blocked = false }, 1000) // we wait 1 second for letting remix to switch to vm

From 78e0396bd2e4c68e89eb48c2a02ca0147c85a733 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 6 Jan 2022 11:33:44 +0100
Subject: [PATCH 161/168] add hideFn

---
 apps/remix-ide/src/app/tabs/hardhat-provider.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/remix-ide/src/app/tabs/hardhat-provider.js b/apps/remix-ide/src/app/tabs/hardhat-provider.js
index 2d3f8e243b..07d3f86ebd 100644
--- a/apps/remix-ide/src/app/tabs/hardhat-provider.js
+++ b/apps/remix-ide/src/app/tabs/hardhat-provider.js
@@ -56,13 +56,16 @@ export default class HardhatProvider extends Plugin {
                 cancelFn: (value) => {
                   setTimeout(() => reject(new Error('Canceled')), 0)
                 },
+                hideFn: (value) => {
+                  setTimeout(() => reject(new Error('Hide')), 0)
+                },
                 defaultValue: 'http://127.0.0.1:8545'
               }
               this.call('modal', 'modal', modalContent)
             })
           })()
         } catch (e) {
-          // the modal has been canceled
+          // the modal has been canceled/hide
           return
         }        
         this.provider = new Web3.providers.HttpProvider(target)

From aa9adf03793b549fd6b6a10be713d11b33c8923a Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 6 Jan 2022 11:54:13 +0100
Subject: [PATCH 162/168] convert typescript

---
 apps/remix-ide/src/app.js                     |  5 +-
 ...rdhat-provider.js => hardhat-provider.tsx} | 91 +++++++++++--------
 apps/remix-ide/src/blockchain/blockchain.js   |  4 +-
 libs/remix-ui/app/src/index.ts                |  2 +-
 4 files changed, 59 insertions(+), 43 deletions(-)
 rename apps/remix-ide/src/app/tabs/{hardhat-provider.js => hardhat-provider.tsx} (56%)

diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index 338af4bbec..e0aff565c4 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -20,6 +20,8 @@ import Registry from './app/state/registry'
 import { ConfigPlugin } from './app/plugins/config'
 import { Layout } from './app/panels/layout'
 import { ModalPlugin } from './app/plugins/modal'
+import { Blockchain } from './blockchain/blockchain.js'
+import { HardhatProvider } from './app/tabs/hardhat-provider'
 
 const isElectron = require('is-electron')
 
@@ -28,7 +30,6 @@ const remixLib = require('@remix-project/remix-lib')
 const QueryParams = require('./lib/query-params')
 const Storage = remixLib.Storage
 const RemixDProvider = require('./app/files/remixDProvider')
-const HardhatProvider = require('./app/tabs/hardhat-provider')
 const Config = require('./config')
 
 const FileManager = require('./app/files/fileManager')
@@ -37,8 +38,6 @@ const DGitProvider = require('./app/files/dgitProvider')
 const WorkspaceFileProvider = require('./app/files/workspaceFileProvider')
 const toolTip = require('./app/ui/tooltip')
 
-const Blockchain = require('./blockchain/blockchain.js')
-
 const PluginManagerComponent = require('./app/components/plugin-manager-component')
 
 const CompileTab = require('./app/tabs/compile-tab')
diff --git a/apps/remix-ide/src/app/tabs/hardhat-provider.js b/apps/remix-ide/src/app/tabs/hardhat-provider.tsx
similarity index 56%
rename from apps/remix-ide/src/app/tabs/hardhat-provider.js
rename to apps/remix-ide/src/app/tabs/hardhat-provider.tsx
index 07d3f86ebd..bb5ea12afa 100644
--- a/apps/remix-ide/src/app/tabs/hardhat-provider.js
+++ b/apps/remix-ide/src/app/tabs/hardhat-provider.tsx
@@ -1,7 +1,9 @@
 import * as packageJson from '../../../../../package.json'
 import { Plugin } from '@remixproject/engine'
-import Web3 from 'web3'
+import { AppModal, AlertModal, ModalTypes } from '@remix-ui/app'
 import React from 'react' // eslint-disable-line
+import { Blockchain } from '../../blockchain/blockchain'
+import { ethers } from 'ethers'
 
 const profile = {
   name: 'hardhat-provider',
@@ -12,7 +14,28 @@ const profile = {
   version: packageJson.version
 }
 
-export default class HardhatProvider extends Plugin {
+type JsonDataRequest = {
+  id: number,
+  jsonrpc: string // version
+  method: string,
+  params: Array<any>,
+}
+
+type JsonDataResult = {
+  id: number,
+  jsonrpc: string // version
+  result: any
+}
+
+type RejectRequest = (error: Error) => void
+type SuccessRequest = (data: JsonDataResult) => void
+
+export class HardhatProvider extends Plugin {
+  provider: ethers.providers.JsonRpcProvider
+  blocked: boolean
+  blockchain: Blockchain
+  target: String
+
   constructor (blockchain) {
     super(profile)
     this.provider = null
@@ -26,37 +49,36 @@ export default class HardhatProvider extends Plugin {
   }
 
   hardhatProviderDialogBody () {
-    return <div>
-          Note: To run Hardhat network node on your system, go to hardhat project folder and run command:
-          <div class="border p-1">npx hardhat node</div>       
+    return (<div> Note: To run Hardhat network node on your system, go to hardhat project folder and run command:
+          <div className="border p-1">npx hardhat node</div>       
         For more info, visit: <a href="https://hardhat.org/getting-started/#connecting-a-wallet-or-dapp-to-hardhat-network" target="_blank">Hardhat Documentation</a>       
         Hardhat JSON-RPC Endpoint
-      </div>
+      </div>)
   }
 
-  sendAsync (data) {
+  sendAsync (data: JsonDataRequest) {
     return new Promise(async (resolve, reject) => {
       if (this.blocked) return reject(new Error('provider unable to connect'))
       // If provider is not set, allow to open modal only when provider is trying to connect
       if (!this.provider) {
-        let value
+        let value: string
         try {
-          value = await (() => {
+          value = await ((): Promise<string> => {
             return new Promise((resolve, reject) => {
-              const modalContent = {
+              const modalContent: AppModal = {
                 id: 'harrhatprovider',
                 title: 'Hardhat node request',
                 message: this.hardhatProviderDialogBody(),
-                modalType: 'prompt',
+                modalType: ModalTypes.prompt,
                 okLabel: 'OK',
                 cancelLabel: 'Cancel',
-                okFn: (value) => {
+                okFn: (value: string) => {
                   setTimeout(() => resolve(value), 0)
                 },
-                cancelFn: (value) => {
+                cancelFn: () => {
                   setTimeout(() => reject(new Error('Canceled')), 0)
                 },
-                hideFn: (value) => {
+                hideFn: () => {
                   setTimeout(() => reject(new Error('Hide')), 0)
                 },
                 defaultValue: 'http://127.0.0.1:8545'
@@ -68,7 +90,7 @@ export default class HardhatProvider extends Plugin {
           // the modal has been canceled/hide
           return
         }        
-        this.provider = new Web3.providers.HttpProvider(target)
+        this.provider = new ethers.providers.JsonRpcProvider(value)
         this.sendAsyncInternal(data, resolve, reject)       
       } else {
         this.sendAsyncInternal(data, resolve, reject)
@@ -76,34 +98,31 @@ export default class HardhatProvider extends Plugin {
     })
   }
 
-  sendAsyncInternal (data, resolve, reject) {
+  async sendAsyncInternal (data: JsonDataRequest, resolve: SuccessRequest, reject: RejectRequest) {
     if (this.provider) {
       // Check the case where current environment is VM on UI and it still sends RPC requests
       // This will be displayed on UI tooltip as 'cannot get account list: Environment Updated !!'
       if (this.blockchain.getProvider() !== 'Hardhat Provider' && data.method !== 'net_listening') return reject(new Error('Environment Updated !!'))
-      this.provider[this.provider.sendAsync ? 'sendAsync' : 'send'](data, async (error, message) => {
-        if (error) {
-          this.blocked = true
-          const modalContent = {
-            id: 'harrhatprovider',
-            title: 'Hardhat Provider',
-            message: `Error while connecting to the hardhat provider: ${error.message}`,
-            modalType: 'alert',
-            okLabel: 'OK'
-          }
-          this.call('modal', 'modal', modalContent)    
-          await this.call('udapp', 'setEnvironmentMode', { context: 'vm', fork: 'london' })
-          this.provider = null
-          setTimeout(_ => { this.blocked = false }, 1000) // we wait 1 second for letting remix to switch to vm
-          return reject(error)
+
+      try {
+        const result = await this.provider.send(data.method, data.params)
+        resolve({ jsonrpc: '2.0', result, id: data.id })
+      } catch (error) {
+        this.blocked = true
+        const modalContent: AlertModal = {
+          id: 'harrhatprovider',
+          title: 'Hardhat Provider',
+          message: `Error while connecting to the hardhat provider: ${error.message}`,
         }
-        resolve(message)
-      })
+        this.call('modal', 'alert', modalContent)
+        await this.call('udapp', 'setEnvironmentMode', { context: 'vm', fork: 'london' })
+        this.provider = null
+        setTimeout(_ => { this.blocked = false }, 1000) // we wait 1 second for letting remix to switch to vm
+        reject(error)
+      }
     } else {
       const result = data.method === 'net_listening' ? 'canceled' : []
       resolve({ jsonrpc: '2.0', result: result, id: data.id })
     }
   }
-}
-
-module.exports = HardhatProvider
+}
\ No newline at end of file
diff --git a/apps/remix-ide/src/blockchain/blockchain.js b/apps/remix-ide/src/blockchain/blockchain.js
index f280e47d8b..486c3041f6 100644
--- a/apps/remix-ide/src/blockchain/blockchain.js
+++ b/apps/remix-ide/src/blockchain/blockchain.js
@@ -23,7 +23,7 @@ const profile = {
   version: packageJson.version
 }
 
-class Blockchain extends Plugin {
+export class Blockchain extends Plugin {
   // NOTE: the config object will need to be refactored out in remix-lib
   constructor (config) {
     super(profile)
@@ -545,5 +545,3 @@ class Blockchain extends Plugin {
     })
   }
 }
-
-module.exports = Blockchain
diff --git a/libs/remix-ui/app/src/index.ts b/libs/remix-ui/app/src/index.ts
index d02ade520c..e706f1ad94 100644
--- a/libs/remix-ui/app/src/index.ts
+++ b/libs/remix-ui/app/src/index.ts
@@ -3,4 +3,4 @@ export { dispatchModalContext } from './lib/remix-app/context/context'
 export { ModalProvider } from './lib/remix-app/context/provider'
 export { AppModal } from './lib/remix-app/interface/index'
 export { AlertModal } from './lib/remix-app/interface/index'
-export * from './lib/remix-app/types/index'
+export { ModalTypes } from './lib/remix-app/types/index'

From 29535c4072bd9c71d0c08b7ef79beae7806c3b3c Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 6 Jan 2022 16:39:49 +0100
Subject: [PATCH 163/168] more types

---
 apps/remix-ide/src/app/tabs/hardhat-provider.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/remix-ide/src/app/tabs/hardhat-provider.tsx b/apps/remix-ide/src/app/tabs/hardhat-provider.tsx
index bb5ea12afa..abb5eabddf 100644
--- a/apps/remix-ide/src/app/tabs/hardhat-provider.tsx
+++ b/apps/remix-ide/src/app/tabs/hardhat-provider.tsx
@@ -48,7 +48,7 @@ export class HardhatProvider extends Plugin {
     this.blocked = false
   }
 
-  hardhatProviderDialogBody () {
+  hardhatProviderDialogBody (): JSX.Element {
     return (<div> Note: To run Hardhat network node on your system, go to hardhat project folder and run command:
           <div className="border p-1">npx hardhat node</div>       
         For more info, visit: <a href="https://hardhat.org/getting-started/#connecting-a-wallet-or-dapp-to-hardhat-network" target="_blank">Hardhat Documentation</a>       
@@ -56,7 +56,7 @@ export class HardhatProvider extends Plugin {
       </div>)
   }
 
-  sendAsync (data: JsonDataRequest) {
+  sendAsync (data: JsonDataRequest): Promise<any> {
     return new Promise(async (resolve, reject) => {
       if (this.blocked) return reject(new Error('provider unable to connect'))
       // If provider is not set, allow to open modal only when provider is trying to connect
@@ -98,7 +98,7 @@ export class HardhatProvider extends Plugin {
     })
   }
 
-  async sendAsyncInternal (data: JsonDataRequest, resolve: SuccessRequest, reject: RejectRequest) {
+  private async sendAsyncInternal (data: JsonDataRequest, resolve: SuccessRequest, reject: RejectRequest): Promise<void> {
     if (this.provider) {
       // Check the case where current environment is VM on UI and it still sends RPC requests
       // This will be displayed on UI tooltip as 'cannot get account list: Environment Updated !!'

From 7a397d5261f87c4d3620c21b7e9a60e33976ed67 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 6 Jan 2022 18:18:43 +0100
Subject: [PATCH 164/168] fix open in etherscan link

---
 apps/remix-ide/src/app/udapp/make-udapp.js  | 22 ---------------------
 apps/remix-ide/src/blockchain/blockchain.js | 15 ++++++++++----
 apps/remix-ide/src/blockchain/helper.ts     | 13 ++++++++++++
 3 files changed, 24 insertions(+), 26 deletions(-)
 create mode 100644 apps/remix-ide/src/blockchain/helper.ts

diff --git a/apps/remix-ide/src/app/udapp/make-udapp.js b/apps/remix-ide/src/app/udapp/make-udapp.js
index cab11136f2..0b8b13433a 100644
--- a/apps/remix-ide/src/app/udapp/make-udapp.js
+++ b/apps/remix-ide/src/app/udapp/make-udapp.js
@@ -1,31 +1,9 @@
 import Registry from '../state/registry'
 
 var remixLib = require('@remix-project/remix-lib')
-var yo = require('yo-yo')
 var EventsDecoder = remixLib.execution.EventsDecoder
 
-const transactionDetailsLinks = {
-  Main: 'https://www.etherscan.io/tx/',
-  Rinkeby: 'https://rinkeby.etherscan.io/tx/',
-  Ropsten: 'https://ropsten.etherscan.io/tx/',
-  Kovan: 'https://kovan.etherscan.io/tx/',
-  Goerli: 'https://goerli.etherscan.io/tx/'
-}
-
-function txDetailsLink (network, hash) {
-  if (transactionDetailsLinks[network]) {
-    return transactionDetailsLinks[network] + hash
-  }
-}
-
 export function makeUdapp (blockchain, compilersArtefacts, logHtmlCallback) {
-  // ----------------- UniversalDApp -----------------
-  // TODO: to remove when possible
-  blockchain.event.register('transactionBroadcasted', (txhash, networkName) => {
-    var txLink = txDetailsLink(networkName, txhash)
-    if (txLink && logHtmlCallback) logHtmlCallback(yo`<a href="${txLink}" target="_blank">${txLink}</a>`)
-  })
-
   // ----------------- Tx listener -----------------
   const _transactionReceipts = {}
   const transactionReceiptResolver = (tx, cb) => {
diff --git a/apps/remix-ide/src/blockchain/blockchain.js b/apps/remix-ide/src/blockchain/blockchain.js
index 486c3041f6..88ea275779 100644
--- a/apps/remix-ide/src/blockchain/blockchain.js
+++ b/apps/remix-ide/src/blockchain/blockchain.js
@@ -1,3 +1,5 @@
+
+import React from 'react' // eslint-disable-line
 import Web3 from 'web3'
 import { Plugin } from '@remixproject/engine'
 import { toBuffer, addHexPrefix } from 'ethereumjs-util'
@@ -9,6 +11,7 @@ import VMProvider from './providers/vm.js'
 import InjectedProvider from './providers/injected.js'
 import NodeProvider from './providers/node.js'
 import { execution, EventManager, helpers } from '@remix-project/remix-lib'
+import { etherScanLink } from './helper'
 const { txFormat, txExecution, typeConversion, txListener: Txlistener, TxRunner, TxRunnerWeb3, txHelper } = execution
 const { txResultHelper: resultToRemixTx } = helpers
 const packageJson = require('../../../../package.json')
@@ -343,14 +346,18 @@ export class Blockchain extends Plugin {
         return this.getProvider() === 'web3' ? this.config.get('settings/personal-mode') : false
       }
     }, _ => this.executionContext.web3(), _ => this.executionContext.currentblockGasLimit())
-
-    this.txRunner = new TxRunner(web3Runner, { runAsync: true })
-    this.txRunner.event.register('transactionBroadcasted', (txhash) => {
+    
+    web3Runner.event.register('transactionBroadcasted', (txhash) => {
       this.executionContext.detectNetwork((error, network) => {
         if (error || !network) return
-        this.event.trigger('transactionBroadcasted', [txhash, network.name])
+        if (network.name === 'VM') return
+        this.call('terminal', 'logHtml',
+          (<a href={etherScanLink(network.name, txhash)} target="_blank">
+            open in etherscan
+          </a>))        
       })
     })
+    this.txRunner = new TxRunner(web3Runner, { runAsync: true })
   }
 
   /**
diff --git a/apps/remix-ide/src/blockchain/helper.ts b/apps/remix-ide/src/blockchain/helper.ts
new file mode 100644
index 0000000000..652a088078
--- /dev/null
+++ b/apps/remix-ide/src/blockchain/helper.ts
@@ -0,0 +1,13 @@
+const transactionDetailsLinks = {
+    Main: 'https://www.etherscan.io/tx/',
+    Rinkeby: 'https://rinkeby.etherscan.io/tx/',
+    Ropsten: 'https://ropsten.etherscan.io/tx/',
+    Kovan: 'https://kovan.etherscan.io/tx/',
+    Goerli: 'https://goerli.etherscan.io/tx/'
+  }
+  
+  export function etherScanLink (network: string, hash: string): string {
+    if (transactionDetailsLinks[network]) {
+      return transactionDetailsLinks[network] + hash
+    }
+  }
\ No newline at end of file

From f0edf409783ccd2429faa21e7228aa98601469c2 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 6 Jan 2022 18:35:12 +0100
Subject: [PATCH 165/168] remove uneeded code

---
 apps/remix-ide/src/app/editor/contextView.js  | 194 ------
 apps/remix-ide/src/app/panels/terminal.js     |   2 -
 apps/remix-ide/src/app/tabs/analysis-tab.js   |   5 +-
 apps/remix-ide/src/app/tabs/test-tab.js       |   3 -
 apps/remix-ide/src/app/ui/card.js             |  70 ---
 apps/remix-ide/src/app/ui/contextMenu.js      |  83 ---
 .../remix-ide/src/app/ui/copy-to-clipboard.js |  39 --
 apps/remix-ide/src/app/ui/draggableContent.js | 131 ----
 apps/remix-ide/src/app/ui/dropdown.js         | 128 ----
 apps/remix-ide/src/app/ui/renderer.js         | 153 -----
 .../src/app/ui/styles/renderer-styles.js      |  52 --
 apps/remix-ide/src/app/ui/txLogger.js         | 590 ------------------
 apps/remix-ide/src/lib/cmdInterpreterAPI.js   | 132 ----
 13 files changed, 1 insertion(+), 1581 deletions(-)
 delete mode 100644 apps/remix-ide/src/app/editor/contextView.js
 delete mode 100644 apps/remix-ide/src/app/ui/card.js
 delete mode 100644 apps/remix-ide/src/app/ui/contextMenu.js
 delete mode 100644 apps/remix-ide/src/app/ui/copy-to-clipboard.js
 delete mode 100644 apps/remix-ide/src/app/ui/draggableContent.js
 delete mode 100644 apps/remix-ide/src/app/ui/dropdown.js
 delete mode 100644 apps/remix-ide/src/app/ui/renderer.js
 delete mode 100644 apps/remix-ide/src/app/ui/styles/renderer-styles.js
 delete mode 100644 apps/remix-ide/src/app/ui/txLogger.js
 delete mode 100644 apps/remix-ide/src/lib/cmdInterpreterAPI.js

diff --git a/apps/remix-ide/src/app/editor/contextView.js b/apps/remix-ide/src/app/editor/contextView.js
deleted file mode 100644
index dd3f695763..0000000000
--- a/apps/remix-ide/src/app/editor/contextView.js
+++ /dev/null
@@ -1,194 +0,0 @@
-'use strict'
-import { sourceMappingDecoder } from '@remix-project/remix-debug'
-import Registry from '../state/registry'
-const yo = require('yo-yo')
-
-const css = require('./styles/contextView-styles')
-
-/*
-  Display information about the current focused code:
-   - if it's a reference, display information about the declaration
-   - jump to the declaration
-   - number of references
-   - rename declaration/references
-*/
-class ContextView {
-  constructor (opts) {
-    this._components = {}
-    this._components.registry = Registry.getInstance()
-    this.contextualListener = opts.contextualListener
-    this.editor = opts.editor
-    this._deps = {
-      compilersArtefacts: this._components.registry.get('compilersartefacts').api,
-      offsetToLineColumnConverter: this._components.registry.get('offsettolinecolumnconverter').api,
-      config: this._components.registry.get('config').api,
-      fileManager: this._components.registry.get('filemanager').api
-    }
-    this._view = null
-    this._nodes = null
-    this._current = null
-    this.sourceMappingDecoder = sourceMappingDecoder
-    this.previousElement = null
-    this.contextualListener.event.register('contextChanged', nodes => {
-      this.show()
-      this._nodes = nodes
-      this.update()
-    })
-    this.contextualListener.event.register('stopHighlighting', () => {
-    })
-  }
-
-  render () {
-    const view = yo`
-      <div class="${css.contextview} ${css.contextviewcontainer} bg-light text-dark border-0">
-        <div class=${css.container}>
-          ${this._renderTarget()}
-        </div>
-      </div>`
-    if (!this._view) {
-      this._view = view
-    }
-    return view
-  }
-
-  hide () {
-    if (this._view) {
-      this._view.style.display = 'none'
-    }
-  }
-
-  show () {
-    if (this._view) {
-      this._view.style.display = 'block'
-    }
-  }
-
-  update () {
-    if (this._view) {
-      yo.update(this._view, this.render())
-    }
-  }
-
-  _renderTarget () {
-    let last
-    const previous = this._current
-    if (this._nodes && this._nodes.length) {
-      last = this._nodes[this._nodes.length - 1]
-      if (isDefinition(last)) {
-        this._current = last
-      } else {
-        const target = this.contextualListener.declarationOf(last)
-        if (target) {
-          this._current = target
-        } else {
-          this._current = null
-        }
-      }
-    }
-    if (!this._current || !previous || previous.id !== this._current.id || (this.previousElement && !this.previousElement.children.length)) {
-      this.previousElement = this._render(this._current, last)
-    }
-    return this.previousElement
-  }
-
-  _jumpToInternal (position) {
-    const jumpToLine = (lineColumn) => {
-      if (lineColumn.start && lineColumn.start.line && lineColumn.start.column) {
-        this.editor.gotoLine(lineColumn.start.line, lineColumn.end.column + 1)
-      }
-    }
-    const lastCompilationResult = this._deps.compilersArtefacts.__last
-    if (lastCompilationResult && lastCompilationResult.languageversion.indexOf('soljson') === 0 && lastCompilationResult.data) {
-      const lineColumn = this._deps.offsetToLineColumnConverter.offsetToLineColumn(
-        position,
-        position.file,
-        lastCompilationResult.getSourceCode().sources,
-        lastCompilationResult.getAsts())
-      const filename = lastCompilationResult.getSourceName(position.file)
-      // TODO: refactor with rendererAPI.errorClick
-      if (filename !== this._deps.config.get('currentFile')) {
-        const provider = this._deps.fileManager.fileProviderOf(filename)
-        if (provider) {
-          provider.exists(filename).then(exist => {
-            this._deps.fileManager.open(filename)
-            jumpToLine(lineColumn)
-          }).catch(error => {
-            if (error) return console.log(error)
-          })
-        }
-      } else {
-        jumpToLine(lineColumn)
-      }
-    }
-  }
-
-  _render (node, nodeAtCursorPosition) {
-    if (!node) return yo`<div></div>`
-    let references = this.contextualListener.referencesOf(node)
-    const type = node.typeDescriptions && node.typeDescriptions.typeString ? node.typeDescriptions.typeString : node.nodeType
-    references = `${references ? references.length : '0'} reference(s)`
-
-    let ref = 0
-    const nodes = this.contextualListener.getActiveHighlights()
-    for (const k in nodes) {
-      if (nodeAtCursorPosition.id === nodes[k].nodeId) {
-        ref = k
-        break
-      }
-    }
-
-    // JUMP BETWEEN REFERENCES
-    const jump = (e) => {
-      e.target.dataset.action === 'next' ? ref++ : ref--
-      if (ref < 0) ref = nodes.length - 1
-      if (ref >= nodes.length) ref = 0
-      this._jumpToInternal(nodes[ref].position)
-    }
-
-    const jumpTo = () => {
-      if (node && node.src) {
-        const position = this.sourceMappingDecoder.decode(node.src)
-        if (position) {
-          this._jumpToInternal(position)
-        }
-      }
-    }
-
-    const showGasEstimation = () => {
-      if (node.nodeType === 'FunctionDefinition') {
-        const result = this.contextualListener.gasEstimation(node)
-        const executionCost = ' Execution cost: ' + result.executionCost + ' gas'
-        const codeDepositCost = 'Code deposit cost: ' + result.codeDepositCost + ' gas'
-        const estimatedGas = result.codeDepositCost ? `${codeDepositCost}, ${executionCost}` : `${executionCost}`
-        return yo`
-          <div class=${css.gasEstimation}>
-            <i class="fas fa-gas-pump ${css.gasStationIcon}" title='Gas estimation'></i>
-            <span>${estimatedGas}</span>
-          </div>
-        `
-      }
-    }
-
-    return yo`
-      <div class=${css.line}>${showGasEstimation()}
-        <div title=${type} class=${css.type}>${type}</div>
-        <div title=${node.name} class=${css.name}>${node.name}</div>
-        <i class="fas fa-share ${css.jump}" aria-hidden="true" onclick=${jumpTo}></i>
-        <span class=${css.referencesnb}>${references}</span>
-        <i data-action='previous' class="fas fa-chevron-up ${css.jump}" aria-hidden="true" onclick=${jump}></i>
-        <i data-action='next' class="fas fa-chevron-down ${css.jump}" aria-hidden="true" onclick=${jump}></i>
-      </div>
-    `
-  }
-}
-
-function isDefinition (node) {
-  return node.nodeType === 'ContractDefinition' ||
-  node.nodeType === 'FunctionDefinition' ||
-  node.nodeType === 'ModifierDefinition' ||
-  node.nodeType === 'VariableDeclaration' ||
-  node.nodeType === 'StructDefinition' ||
-  node.nodeType === 'EventDefinition'
-}
-
-module.exports = ContextView
diff --git a/apps/remix-ide/src/app/panels/terminal.js b/apps/remix-ide/src/app/panels/terminal.js
index 6309327cb6..091ca710c1 100644
--- a/apps/remix-ide/src/app/panels/terminal.js
+++ b/apps/remix-ide/src/app/panels/terminal.js
@@ -8,7 +8,6 @@ import Registry from '../state/registry'
 const vm = require('vm')
 const EventManager = require('../../lib/events')
 
-const CommandInterpreterAPI = require('../../lib/cmdInterpreterAPI')
 const AutoCompletePopup = require('../ui/auto-complete-popup')
 
 import { CompilerImports } from '@remix-project/core-plugin' // eslint-disable-line
@@ -65,7 +64,6 @@ class Terminal extends Plugin {
     }
     this._view = { el: null, bar: null, input: null, term: null, journal: null, cli: null }
     this._components = {}
-    this._components.cmdInterpreter = new CommandInterpreterAPI(this, this.blockchain)
     this._components.autoCompletePopup = new AutoCompletePopup(this._opts)
     this._commands = {}
     this.commands = {}
diff --git a/apps/remix-ide/src/app/tabs/analysis-tab.js b/apps/remix-ide/src/app/tabs/analysis-tab.js
index fbddc61b61..dcd894d02c 100644
--- a/apps/remix-ide/src/app/tabs/analysis-tab.js
+++ b/apps/remix-ide/src/app/tabs/analysis-tab.js
@@ -5,7 +5,6 @@ import { EventEmitter } from 'events'
 import {RemixUiStaticAnalyser} from '@remix-ui/static-analyser' // eslint-disable-line
 import * as packageJson from '../../../../../package.json'
 import Registry from '../state/registry'
-var Renderer = require('../ui/renderer')
 
 var EventManager = require('../../lib/events')
 
@@ -30,9 +29,7 @@ class AnalysisTab extends ViewPlugin {
     this.registry = Registry.getInstance()
     this.element = document.createElement('div')
     this.element.setAttribute('id', 'staticAnalyserView')
-    this._components = {
-      renderer: new Renderer(this)
-    }
+    this._components = {}
     this._components.registry = this.registry
     this._deps = {
       offsetToLineColumnConverter: this.registry.get(
diff --git a/apps/remix-ide/src/app/tabs/test-tab.js b/apps/remix-ide/src/app/tabs/test-tab.js
index 82861a66dc..40dd78b326 100644
--- a/apps/remix-ide/src/app/tabs/test-tab.js
+++ b/apps/remix-ide/src/app/tabs/test-tab.js
@@ -8,8 +8,6 @@ import { ViewPlugin } from '@remixproject/engine-web'
 import helper from '../../lib/helper'
 import { canUseWorker, urlFromVersion } from '@remix-project/remix-solidity'
 
-// var tooltip = require('../ui/tooltip')
-var Renderer = require('../ui/renderer')
 var { UnitTestRunner, assertLibCode } = require('@remix-project/remix-tests')
 
 const profile = {
@@ -31,7 +29,6 @@ module.exports = class TestTab extends ViewPlugin {
     this.fileManager = fileManager
     this.filePanel = filePanel
     this.appManager = appManager
-    this.renderer = new Renderer(this)
     this.testRunner = new UnitTestRunner()
     this.testTabLogic = new TestTabLogic(this.fileManager, helper)
     this.offsetToLineColumnConverter = offsetToLineColumnConverter
diff --git a/apps/remix-ide/src/app/ui/card.js b/apps/remix-ide/src/app/ui/card.js
deleted file mode 100644
index a689b27772..0000000000
--- a/apps/remix-ide/src/app/ui/card.js
+++ /dev/null
@@ -1,70 +0,0 @@
-var yo = require('yo-yo')
-var csjs = require('csjs-inject')
-var EventManager = require('../../lib/events')
-
-module.exports = class Card {
-  constructor (api, events, opts) {
-    const self = this
-    self._api = api
-    self._events = events
-    self._opts = opts
-    self._view = {}
-    self.event = new EventManager()
-  }
-
-  render () {
-    const self = this
-    if (self._view.el) return self._view.el
-
-    self._view.cardBody = yo`<div></div>`
-    self._view.arrow = yo`<i class="${css.arrow} fas fa-angle-down" onclick="${() => trigger(this)}"></i>`
-
-    self._view.expandCollapseButton = yo`
-    <div>${self._view.arrow}</div>`
-
-    self._view.statusBar = yo`<div>${self._opts.collapsedView}</div>`
-    self._view.cardHeader = yo`
-    <div class="d-flex justify-content-between align-items-center" onclick=${() => trigger(self._view.arrow)}>
-      <div class="pr-1 d-flex flex-row">
-        <div>${self._opts.title}</div>
-        ${self._view.statusBar}
-      </div>
-      <div>${self._view.expandCollapseButton}</div>
-    </div>`
-
-    function trigger (el) {
-      var body = self._view.cardBody
-      var status = self._view.statusBar
-      if (el.classList) {
-        el.classList.toggle('fa-angle-up')
-        var arrow = el.classList.toggle('fa-angle-down') ? 'up' : 'down'
-        self.event.trigger('expandCollapseCard', [arrow, body, status])
-      }
-    }
-
-    // HTML
-    self._view.el = yo`
-      <div class="${css.cardContainer} list-group-item border-0">
-        ${self._view.cardHeader}
-        ${self._view.cardBody}
-      </div>`
-
-    return self._view.el
-  }
-}
-
-const css = csjs`
-  .cardContainer {
-    padding             : 0 24px 16px;
-    margin              : 0;
-    background          : none;
-  }
-  .arrow {
-    font-weight         : bold;
-    cursor              : pointer;
-    font-size           : 14px;
-  }
-  .arrow:hover {
-  }
-
-`
diff --git a/apps/remix-ide/src/app/ui/contextMenu.js b/apps/remix-ide/src/app/ui/contextMenu.js
deleted file mode 100644
index 0bc2dae605..0000000000
--- a/apps/remix-ide/src/app/ui/contextMenu.js
+++ /dev/null
@@ -1,83 +0,0 @@
-var yo = require('yo-yo')
-// -------------- copyToClipboard ----------------------
-var csjs = require('csjs-inject')
-
-var css = csjs`
-    .container
-    {
-      display: none;
-      position: fixed;
-      border-radius: 2px;
-      z-index: 1000;
-      box-shadow: 0 0 4px var(--dark);
-    }
-    .liitem
-    {
-      padding: 2px;
-      padding-left: 6px;
-      cursor: pointer;
-      color: var(--text-dark);
-      background-color: var(--light);
-    }
-    .liitem:hover
-    {
-      background-color:  var(--secondary);
-    }
-    #menuitems
-    {
-      list-style: none;
-      margin: 0px;
-    }
-`
-
-module.exports = (event, items, linkItems) => {
-  event.preventDefault()
-
-  function hide (event, force) {
-    if (container && container.parentElement && (force || (event.target !== container))) {
-      container.parentElement.removeChild(container)
-    }
-    window.removeEventListener('click', hide)
-  }
-
-  const menu = Object.keys(items).map((item, index) => {
-    const current = yo`<li id="menuitem${item.toLowerCase()}" class=${css.liitem}>${item}</li>`
-    current.onclick = () => { hide(null, true); items[item]() }
-    return current
-  })
-
-  let menuForLinks = yo``
-  if (linkItems) {
-    menuForLinks = Object.keys(linkItems).map((item, index) => {
-      const current = yo`<li id="menuitem${item.toLowerCase()}" class=${css.liitem}><a href=${linkItems[item]} target="_blank">${item}</a></li>`
-      current.onclick = () => { hide(null, true) }
-      return current
-    })
-  }
-
-  const container = yo`
-    <div id="menuItemsContainer" class="p-1 ${css.container} bg-light shadow border">
-     <ul id='menuitems'>${menu} ${menuForLinks}</ul>
-    </div>
-  `
-
-  container.style.left = event.pageX + 'px'
-  container.style.top = event.pageY + 'px'
-  container.style.display = 'block'
-  document.querySelector('body').appendChild(container)
-
-  const menuItemsContainer = document.getElementById('menuItemsContainer')
-  const boundary = menuItemsContainer.getBoundingClientRect()
-
-  if (boundary.bottom > (window.innerHeight || document.documentElement.clientHeight)) {
-    menuItemsContainer.style.position = 'absolute'
-    menuItemsContainer.style.bottom = '10px'
-    menuItemsContainer.style.top = null
-  }
-
-  setTimeout(() => {
-    window.addEventListener('click', hide)
-  }, 500)
-
-  return { hide }
-}
diff --git a/apps/remix-ide/src/app/ui/copy-to-clipboard.js b/apps/remix-ide/src/app/ui/copy-to-clipboard.js
deleted file mode 100644
index 26c96b0d2f..0000000000
--- a/apps/remix-ide/src/app/ui/copy-to-clipboard.js
+++ /dev/null
@@ -1,39 +0,0 @@
-var yo = require('yo-yo')
-// -------------- copyToClipboard ----------------------
-const copy = require('copy-to-clipboard')
-var addTooltip = require('./tooltip')
-// -------------- styling ----------------------
-var csjs = require('csjs-inject')
-
-var css = csjs`
-  .copyIcon {
-    margin-left: 5px;
-    cursor: pointer;
-  }
-`
-
-module.exports = function copyToClipboard (getContent, tip = 'Copy value to clipboard', icon = 'fa-copy') {
-  var copyIcon = yo`<i title="${tip}" class="${css.copyIcon} far ${icon} p-2" data-id="copyToClipboardCopyIcon" aria-hidden="true"></i>`
-  copyIcon.onclick = (event) => {
-    event.stopPropagation()
-    var copiableContent
-    try {
-      copiableContent = getContent()
-    } catch (e) {
-      addTooltip(e.message)
-      return
-    }
-    if (copiableContent) { // 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 copiableContent !== 'string') {
-          copiableContent = JSON.stringify(copiableContent, null, '\t')
-        }
-      } catch (e) {}
-      copy(copiableContent)
-      addTooltip('Copied value to clipboard.')
-    } else {
-      addTooltip('Cannot copy empty content!')
-    }
-  }
-  return copyIcon
-}
diff --git a/apps/remix-ide/src/app/ui/draggableContent.js b/apps/remix-ide/src/app/ui/draggableContent.js
deleted file mode 100644
index 6aedaf1b85..0000000000
--- a/apps/remix-ide/src/app/ui/draggableContent.js
+++ /dev/null
@@ -1,131 +0,0 @@
-'use strict'
-var yo = require('yo-yo')
-var csjs = require('csjs-inject')
-
-var css = csjs`
-  .containerDraggableModal {
-    position: absolute;
-    z-index: 1000;
-    text-align: center;
-    width: 500px;
-    height: 500px;
-    overflow-y: hidden;
-  }
-
-  .headerDraggableModal {
-    cursor: move;
-    z-index: 10;
-    text-overflow: ellipsis;
-    overflow-x: hidden;
-  }
-  
-  .modalActions {
-    float: right;
-  }
-
-  .modalAction {
-    padding-right: 1px;
-    padding-left: 1px;
-    cursor: pointer;
-  }
-`
-
-module.exports =
-  class DraggableContent {
-    constructor (closeCb) {
-      this.closeCb = closeCb
-      this.isMaximised = false
-    }
-
-    render (title, url, content) {
-      this.content = content
-      var el = yo`
-    <div class=${css.containerDraggableModal}>
-      <div>
-          <div class="${css.headerDraggableModal} title" title=${title}><span title="${title}" >${title}</span><span title="${url}" > - ${url}</span>
-            <div class=${css.modalActions}>
-              <i onclick=${() => { this.minimize() }} class="fas fa-window-minimize ${css.modalAction}"></i>
-              <i onclick=${() => { this.maximise() }} class="fas fa-window-maximize ${css.modalAction}"></i>
-              <i onclick=${() => { this.close() }} class="fas fa-window-close-o ${css.modalAction}"></i>
-            </div>
-          </div>
-        </div>
-      ${content}
-    </div>   `
-      dragElement(el)
-      el.style.top = '20%'
-      el.style.left = '50%'
-      this.el = el
-      return el
-    }
-
-    setTitle (title) {
-      this.el.querySelector('.title span').innerHTML = title
-    }
-
-    minimize () {
-      this.isMaximised = false
-      this.content.style.display = 'none'
-      this.el.style.height = 'inherit'
-      this.el.style.width = '150px'
-      this.el.querySelector('.title').style.width = '146px'
-    }
-
-    maximise () {
-      this.content.style.display = 'block'
-      var body = document.querySelector('body')
-      this.el.style.height = this.isMaximised ? '500px' : body.offsetHeight + 'px'
-      this.el.style.width = this.isMaximised ? '500px' : body.offsetWidth + 'px'
-      this.isMaximised = !this.isMaximised
-      this.el.style.top = this.isMaximised ? '0%' : '20%'
-      this.el.style.left = this.isMaximised ? '0%' : '50%'
-      this.el.querySelector('.title').style.width = 'inherit'
-    }
-
-    close () {
-      if (this.closeCb) this.closeCb()
-      if (this.el.parentElement) {
-        this.el.parentElement.removeChild(this.el)
-      }
-    }
-  }
-
-function dragElement (elmnt) {
-  var pos1 = 0
-  var pos2 = 0
-  var pos3 = 0
-  var pos4 = 0
-
-  elmnt.querySelector('.title').onmousedown = dragMouseDown
-
-  function dragMouseDown (e) {
-    e = e || window.event
-    if (e.button !== 0) return
-    e.preventDefault()
-    // get the mouse cursor position at startup:
-    pos3 = e.clientX
-    pos4 = e.clientY
-    document.onmouseup = closeDragElement
-    // call a function whenever the cursor moves:
-    document.onmousemove = elementDrag
-  }
-
-  function elementDrag (e) {
-    e = e || window.event
-    e.preventDefault()
-    // calculate the new cursor position:
-    pos1 = pos3 - e.clientX
-    pos2 = pos4 - e.clientY
-    pos3 = e.clientX
-    pos4 = e.clientY
-    // set the element's new position:
-    elmnt.style.top = (elmnt.offsetTop - pos2) + 'px'
-    elmnt.style.left = (elmnt.offsetLeft - pos1) + 'px'
-  }
-
-  function closeDragElement () {
-    /* stop moving when mouse button is released: */
-    document.onmouseup = null
-    document.onmousemove = null
-  }
-}
diff --git a/apps/remix-ide/src/app/ui/dropdown.js b/apps/remix-ide/src/app/ui/dropdown.js
deleted file mode 100644
index 929395e624..0000000000
--- a/apps/remix-ide/src/app/ui/dropdown.js
+++ /dev/null
@@ -1,128 +0,0 @@
-var yo = require('yo-yo')
-var EventManager = require('../../lib/events')
-
-// -------------- styling ----------------------
-
-var css = require('./styles/dropdown-styles')
-
-/* USAGE:
-
-  var dropdown = new Dropdown({
-    options: [
-      'knownTransaction',
-      'unknownTransaction',
-      'log',
-      'info',
-      'error'
-    ],
-    defaults: ['knownTransaction']
-  })
-  dropdown.event.register('deselect', function (label) { })
-  dropdown.event.register('select', function (label) { })
-
-*/
-class Dropdown {
-  constructor (opts = {}) {
-    var self = this
-    self.event = new EventManager()
-    self.data = {
-      _options: opts.options || [],
-      _dependencies: opts.dependencies || [],
-      selected: opts.defaults || [],
-      _elements: []
-    }
-    self._view = {}
-    self._api = opts.api
-    self._events = opts.events
-  }
-
-  render () {
-    var self = this
-    if (self._view.el) return self._view.el
-    self._view.selected = yo`
-      <div class=${css.selectbox}>
-        <span class=${css.selected}> [${self.data.selected.length}] ${self.data.selected.join(', ')}</span>
-        <i class="${css.icon} fas fa-caret-down"></i>
-      </div>
-    `
-    self._view.el = yo`
-      <div name="dropdown" class="${css.dropdown} form-control form-control-sm" onclick=${show}>
-        ${self._view.selected}
-        <div class="${css.options} bg-light" style="display: none;}">
-          ${self.data._options.map(label => {
-            const index = self.data._elements.length
-            var input = yo`
-              <input
-                data-idx=${index}
-                onchange=${emit}
-                type="${index === 2 ? 'checkbox' : 'radio'}"
-                id="${label}"
-              />
-            `
-            if (self.data.selected.indexOf(label) !== -1) {
-              input.checked = true
-              self.event.trigger('select', [label])
-            }
-            self.data._elements.push(input)
-            return yo`
-              <div class=${css.option}>
-                ${input}
-                <label class="text-dark" for="${label}">${label}</label>
-              </div>
-            `
-          })}
-        </div>
-      </div>
-    `
-    return self._view.el
-    function emit (event) {
-      var input = event.currentTarget
-      var label = input.nextSibling.innerText
-      if (input.checked) {
-        self.data.selected.push(label)
-        if (event.type === 'change') {
-          self.event.trigger('select', [label])
-          updateDependencies(label)
-        }
-      } else {
-        var idx = self.data.selected.indexOf(label)
-        self.data.selected.splice(idx, 1)
-        if (event.type === 'change') {
-          self.event.trigger('deselect', [label])
-          updateDependencies(label)
-        }
-      }
-      self._view.selected.children[0].innerText = `[${self.data.selected.length}] ${self.data.selected.join(', ')}`
-    }
-    function updateDependencies (changed) {
-      if (self.data._dependencies[changed]) {
-        for (var dep in self.data._dependencies[changed]) {
-          var label = self.data._dependencies[changed][dep]
-          var el = self.data._elements[self.data._options.indexOf(label)]
-          el.checked = !el.checked
-          emit({ currentTarget: el, type: 'changeDependencies' })
-        }
-      }
-    }
-    function show (event) {
-      event.stopPropagation()
-      var options = event.currentTarget.children[1]
-      var parent = event.target.parentElement
-      var isOption = parent === options || parent.parentElement === options
-      if (isOption) return
-      if (options.style.display === 'none') {
-        options.style.display = ''
-        document.body.addEventListener('click', handler)
-      } else {
-        options.style.display = 'none'
-        document.body.removeEventListener('click', handler)
-      }
-      function handler (event) {
-        options.style.display = 'none'
-        document.body.removeEventListener('click', handler)
-      }
-    }
-  }
-}
-
-module.exports = Dropdown
diff --git a/apps/remix-ide/src/app/ui/renderer.js b/apps/remix-ide/src/app/ui/renderer.js
deleted file mode 100644
index 315bc4b22c..0000000000
--- a/apps/remix-ide/src/app/ui/renderer.js
+++ /dev/null
@@ -1,153 +0,0 @@
-'use strict'
-
-var $ = require('jquery')
-var yo = require('yo-yo')
-const { default: Registry } = require('../state/registry')
-var css = require('./styles/renderer-styles')
-
-/**
- * After refactor, the renderer is only used to render error/warning
- * TODO: This don't need to be an object anymore. Simplify and just export the renderError function.
- *
- */
-function Renderer (service) {
-  const self = this
-  self.service = service
-  self._components = {}
-  self._components.registry = Registry.getInstance()
-  // dependencies
-  self._deps = {
-    fileManager: self._components.registry.get('filemanager').api,
-    config: self._components.registry.get('config').api
-  }
-  if (document && document.head) {
-    document.head.appendChild(css)
-  }
-}
-
-Renderer.prototype._error = function (file, error) {
-  const self = this
-  if (file === self._deps.config.get('currentFile')) {
-    self.service.call('editor', 'addAnnotation', error, file)
-  }
-}
-
-Renderer.prototype._errorClick = function (errFile, errLine, errCol) {
-  const self = this
-  const editor = self._components.registry.get('editor').api
-  if (errFile !== self._deps.config.get('currentFile')) {
-    // TODO: refactor with this._components.contextView.jumpTo
-    var provider = self._deps.fileManager.fileProviderOf(errFile)
-    if (provider) {
-      provider.exists(errFile).then(exist => {
-        self._deps.fileManager.open(errFile)
-        editor.gotoLine(errLine, errCol)
-      }).catch(error => {
-        if (error) return console.log(error)
-      })
-    }
-  } else {
-    editor.gotoLine(errLine, errCol)
-  }
-}
-
-function getPositionDetails (msg) {
-  const result = {}
-
-  // To handle some compiler warning without location like SPDX license warning etc
-  if (!msg.includes(':')) return { errLine: -1, errCol: -1, errFile: msg }
-
-  // extract line / column
-  let position = msg.match(/^(.*?):([0-9]*?):([0-9]*?)?/)
-  result.errLine = position ? parseInt(position[2]) - 1 : -1
-  result.errCol = position ? parseInt(position[3]) : -1
-
-  // extract file
-  position = msg.match(/^(https:.*?|http:.*?|.*?):/)
-  result.errFile = position ? position[1] : ''
-  return result
-}
-
-/**
- * format msg like error or warning,
- *
- * @param {String or DOMElement} message
- * @param {DOMElement} container
- * @param {Object} options {
- *  useSpan,
- *  noAnnotations,
- *  click:(Function),
- *  type:(
- *    warning,
- *    error
- *  ),
- *  errFile,
- *  errLine,
- *  errCol
- * }
- */
-
-Renderer.prototype.error = function (message, container, opt) {
-  if (!message) return
-  if (container === undefined) return
-  opt = opt || {}
-
-  var text
-  if (typeof message === 'string') {
-    text = message
-    message = yo`<span>${message}</span>`
-  } else if (message.innerText) {
-    text = message.innerText
-  }
-
-  // ^ e.g:
-  // browser/gm.sol: Warning: Source file does not specify required compiler version! Consider adding "pragma solidity ^0.6.12
-  // https://github.com/OpenZeppelin/openzeppelin-contracts/blob/release-v3.2.0/contracts/introspection/IERC1820Registry.sol:3:1: ParserError: Source file requires different compiler version (current compiler is 0.7.4+commit.3f05b770.Emscripten.clang) - note that nightly builds are considered to be strictly less than the released version
-
-  let position = getPositionDetails(text)
-
-  // For compiler version 0.8.0 and upcoming versions, errors and warning will be reported in a different way
-  // Above method regex will return type of error as 'errFile'
-  // Comparison of 'errFile' with passed error type will ensure the reporter type
-  if (!position.errFile || (opt.errorType && opt.errorType === position.errFile)) {
-    // Updated error reported includes '-->' before file details
-    const errorDetails = text.split('-->')
-    // errorDetails[1] will have file details
-    if (errorDetails.length > 1) position = getPositionDetails(errorDetails[1])
-  }
-
-  opt.errLine = position.errLine
-  opt.errCol = position.errCol
-  opt.errFile = position.errFile.trim()
-
-  if (!opt.noAnnotations && opt.errFile) {
-    this._error(opt.errFile, {
-      row: opt.errLine,
-      column: opt.errCol,
-      text: text,
-      type: opt.type
-    })
-  }
-
-  var $pre = $(opt.useSpan ? yo`<span></span>` : yo`<pre></pre>`).html(message)
-
-  const classList = opt.type === 'error' ? 'alert alert-danger' : 'alert alert-warning'
-  var $error = $(yo`<div class="sol ${opt.type} ${classList}" data-id="${opt.errFile}"><div class="close" data-id="renderer"><i class="fas fa-times"></i></div></div>`).prepend($pre)
-  $(container).append($error)
-
-  $error.click((ev) => {
-    if (opt.click) {
-      opt.click(message)
-    } else if (opt.errFile !== undefined && opt.errLine !== undefined && opt.errCol !== undefined) {
-      this._errorClick(opt.errFile, opt.errLine, opt.errCol)
-    }
-  })
-
-  $error.find('.close').click(function (ev) {
-    ev.preventDefault()
-    $error.remove()
-    return false
-  })
-}
-
-module.exports = Renderer
diff --git a/apps/remix-ide/src/app/ui/styles/renderer-styles.js b/apps/remix-ide/src/app/ui/styles/renderer-styles.js
deleted file mode 100644
index 7dc047c440..0000000000
--- a/apps/remix-ide/src/app/ui/styles/renderer-styles.js
+++ /dev/null
@@ -1,52 +0,0 @@
-var yo = require('yo-yo')
-
-var css = yo`<style>
-.sol.success,
-.sol.error,
-.sol.warning {
-    white-space: pre-line;
-    word-wrap: break-word;
-    cursor: pointer;
-    position: relative;
-    margin: 0.5em 0 1em 0;
-    border-radius: 5px;
-    line-height: 20px;
-    padding: 8px 15px;
-}
-
-.sol.success pre,
-.sol.error pre,
-.sol.warning pre {
-    white-space: pre-line;
-    overflow-y: hidden;
-    background-color: transparent;
-    margin: 0;
-    font-size: 12px;
-    border: 0 none;
-    padding: 0;
-    border-radius: 0;
-}
-
-.sol.success .close,
-.sol.error .close,
-.sol.warning .close {
-    white-space: pre-line;
-    font-weight: bold;
-    position: absolute;
-    color: hsl(0, 0%, 0%); /* black in style-guide.js */
-    top: 0;
-    right: 0;
-    padding: 0.5em;
-}
-
-.sol.error {
-}
-
-.sol.warning {
-}
-
-.sol.success {
-  /* background-color:  // styles.rightPanel.message_Success_BackgroundColor; */
-}</style>`
-
-module.exports = css
diff --git a/apps/remix-ide/src/app/ui/txLogger.js b/apps/remix-ide/src/app/ui/txLogger.js
deleted file mode 100644
index 9ae277c304..0000000000
--- a/apps/remix-ide/src/app/ui/txLogger.js
+++ /dev/null
@@ -1,590 +0,0 @@
-'use strict'
-var yo = require('yo-yo')
-var copyToClipboard = require('./copy-to-clipboard')
-
-// -------------- styling ----------------------
-var csjs = require('csjs-inject')
-var remixLib = require('@remix-project/remix-lib')
-
-var EventManager = require('../../lib/events')
-var helper = require('../../lib/helper')
-var modalDialog = require('./modal-dialog-custom')
-const { default: Registry } = require('../state/registry')
-
-var typeConversion = remixLib.execution.typeConversion
-
-var css = csjs`
-  .log {
-    display: flex;
-    cursor: pointer;
-    align-items: center;
-    cursor: pointer;
-  }
-  .log:hover {
-    opacity: 0.8;
-  }
-  .arrow {
-    color: var(--text-info);
-    font-size: 20px;
-    cursor: pointer;
-    display: flex;
-    margin-left: 10px;
-  }
-  .arrow:hover {
-    color: var(--secondary);
-  }
-  .txLog {
-  }
-  .txStatus {
-    display: flex;
-    font-size: 20px;
-    margin-right: 20px;
-    float: left;
-  }
-  .succeeded {
-    color: var(--success);
-  }
-  .failed {
-    color: var(--danger);
-  }
-  .notavailable {
-  }
-  .call {
-    font-size: 7px;
-    border-radius: 50%;
-    min-width: 20px;
-    min-height: 20px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: var(--text-info);
-    text-transform: uppercase;
-    font-weight: bold;
-  }
-  .txItem {
-    color: var(--text-info);
-    margin-right: 5px;
-    float: left;
-  }
-  .txItemTitle {
-    font-weight: bold;
-  }
-  .tx {
-    color: var(--text-info);
-    font-weight: bold;
-    float: left;
-    margin-right: 10px;
-  }
-  .txTable,
-  .tr,
-  .td {
-    border-collapse: collapse;
-    font-size: 10px;
-    color: var(--text-info);
-    border: 1px solid var(--text-info);
-  }
-  #txTable {
-    margin-top: 1%;
-    margin-bottom: 5%;
-    align-self: center;
-    width: 85%;
-  }
-  .tr, .td {
-    padding: 4px;
-    vertical-align: baseline;
-  }
-  .td:first-child {
-    min-width: 30%;
-    width: 30%;
-    align-items: baseline;
-    font-weight: bold;
-  }
-  .tableTitle {
-    width: 25%;
-  }
-  .buttons {
-    display: flex;
-    margin-left: auto;
-  }
-  .debug {
-    white-space: nowrap;
-  }
-  .debug:hover {
-    opacity: 0.8;
-  }`
-/**
-  * This just export a function that register to `newTransaction` and forward them to the logger.
-  *
-  */
-class TxLogger {
-  constructor (terminal, blockchain) {
-    this.event = new EventManager()
-    this.seen = {}
-    function filterTx (value, query) {
-      if (value.length) {
-        return helper.find(value, query)
-      }
-      return false
-    }
-    this.eventsDecoder = Registry.getInstance().get('eventsDecoder').api
-    this.txListener = Registry.getInstance().get('txlistener').api
-    this.terminal = terminal
-    // dependencies
-    this._deps = {
-      compilersArtefacts: Registry.getInstance().get('compilersartefacts').api
-    }
-
-    this.logKnownTX = this.terminal.registerCommand('knownTransaction', (args, cmds, append) => {
-      var data = args[0]
-      var el
-      if (data.tx.isCall) {
-        el = renderCall(this, data)
-      } else {
-        el = renderKnownTransaction(this, data, blockchain)
-      }
-      this.seen[data.tx.hash] = el
-      append(el)
-    }, { activate: true, filterFn: filterTx })
-
-    this.logUnknownTX = this.terminal.registerCommand('unknownTransaction', (args, cmds, append) => {
-      // triggered for transaction AND call
-      var data = args[0]
-      var el = renderUnknownTransaction(this, data, blockchain)
-      append(el)
-    }, { activate: false, filterFn: filterTx })
-
-    this.logEmptyBlock = this.terminal.registerCommand('emptyBlock', (args, cmds, append) => {
-      var data = args[0]
-      var el = renderEmptyBlock(this, data)
-      append(el)
-    }, { activate: true })
-
-    this.txListener.event.register('newBlock', (block) => {
-      if (!block.transactions || (block.transactions && !block.transactions.length)) {
-        this.logEmptyBlock({ block: block })
-      }
-    })
-
-    this.txListener.event.register('newTransaction', (tx, receipt) => {
-      log(this, tx, receipt)
-    })
-
-    this.txListener.event.register('newCall', (tx) => {
-      log(this, tx, null)
-    })
-
-    this.terminal.updateJournal({ type: 'select', value: 'unknownTransaction' })
-    this.terminal.updateJournal({ type: 'select', value: 'knownTransaction' })
-  }
-}
-
-function debug (e, data, self) {
-  e.stopPropagation()
-  if (data.tx.isCall && data.tx.envMode !== 'vm') {
-    modalDialog.alert('Cannot debug this call. Debugging calls is only possible in JavaScript VM mode.')
-  } else {
-    self.event.trigger('debuggingRequested', [data.tx.hash])
-  }
-}
-
-function log (self, tx, receipt) {
-  var resolvedTransaction = self.txListener.resolvedTransaction(tx.hash)
-  if (resolvedTransaction) {
-    var compiledContracts = null
-    if (self._deps.compilersArtefacts.__last) {
-      compiledContracts = self._deps.compilersArtefacts.__last.getContracts()
-    }
-    self.eventsDecoder.parseLogs(tx, resolvedTransaction.contractName, compiledContracts, (error, logs) => {
-      if (!error) {
-        self.logKnownTX({ tx: tx, receipt: receipt, resolvedData: resolvedTransaction, logs: logs })
-      }
-    })
-  } else {
-    // contract unknown - just displaying raw tx.
-    self.logUnknownTX({ tx: tx, receipt: receipt })
-  }
-}
-
-function renderKnownTransaction (self, data, blockchain) {
-  var from = data.tx.from
-  var to = data.resolvedData.contractName + '.' + data.resolvedData.fn
-  var obj = { from, to }
-  var txType = 'knownTx'
-  var tx = yo`
-    <span id="tx${data.tx.hash}" data-id="txLogger${data.tx.hash}">
-      <div class="${css.log}" onclick=${e => txDetails(e, tx, data, obj)}>
-        ${checkTxStatus(data.receipt, txType)}
-        ${context(self, { from, to, data }, blockchain)}
-        <div class=${css.buttons}>
-          <button
-            class="${css.debug} btn btn-primary btn-sm"
-            data-shared="txLoggerDebugButton"
-            data-id="txLoggerDebugButton${data.tx.hash}"
-            onclick=${(e) => debug(e, data, self)}
-          >
-            Debug
-          </div>
-        </div>
-        <i class="${css.arrow} fas fa-angle-down"></i>
-      </div>
-    </span>
-  `
-  return tx
-}
-
-function renderCall (self, data) {
-  var to = data.resolvedData.contractName + '.' + data.resolvedData.fn
-  var from = data.tx.from ? data.tx.from : ' - '
-  var input = data.tx.input ? helper.shortenHexData(data.tx.input) : ''
-  var obj = { from, to }
-  var txType = 'call'
-  var tx = yo`
-    <span id="tx${data.tx.hash}">
-      <div class="${css.log}" onclick=${e => txDetails(e, tx, data, obj)}>
-        ${checkTxStatus(data.tx, txType)}
-        <span class=${css.txLog}>
-          <span class=${css.tx}>[call]</span>
-          <div class=${css.txItem}><span class=${css.txItemTitle}>from:</span> ${from}</div>
-          <div class=${css.txItem}><span class=${css.txItemTitle}>to:</span> ${to}</div>
-          <div class=${css.txItem}><span class=${css.txItemTitle}>data:</span> ${input}</div>
-        </span>
-        <div class=${css.buttons}>
-          <div class="${css.debug} btn btn-primary btn-sm" onclick=${(e) => debug(e, data, self)}>Debug</div>
-        </div>
-        <i class="${css.arrow} fas fa-angle-down"></i>
-      </div>
-    </span>
-  `
-  return tx
-}
-
-function renderUnknownTransaction (self, data, blockchain) {
-  var from = data.tx.from
-  var to = data.tx.to
-  var obj = { from, to }
-  var txType = 'unknown' + (data.tx.isCall ? 'Call' : 'Tx')
-  var tx = yo`
-    <span id="tx${data.tx.hash}">
-      <div class="${css.log}" onclick=${e => txDetails(e, tx, data, obj)}>
-        ${checkTxStatus(data.receipt || data.tx, txType)}
-        ${context(self, { from, to, data }, blockchain)}
-        <div class=${css.buttons}>
-          <div class="${css.debug} btn btn-primary btn-sm" onclick=${(e) => debug(e, data, self)}>Debug</div>
-        </div>
-        <i class="${css.arrow} fas fa-angle-down"></i>
-      </div>
-    </span>
-  `
-  return tx
-}
-
-function renderEmptyBlock (self, data) {
-  return yo`
-    <span class=${css.txLog}>
-      <span class='${css.tx}'><div class=${css.txItem}>[<span class=${css.txItemTitle}>block:${data.block.number} - </span> 0 transactions]</span></span>
-    </span>`
-}
-
-function checkTxStatus (tx, type) {
-  if (tx.status === '0x1' || tx.status === true) {
-    return yo`<i class="${css.txStatus} ${css.succeeded} fas fa-check-circle"></i>`
-  }
-  if (type === 'call' || type === 'unknownCall') {
-    return yo`<i class="${css.txStatus} ${css.call}">call</i>`
-  } else if (tx.status === '0x0' || tx.status === false) {
-    return yo`<i class="${css.txStatus} ${css.failed} fas fa-times-circle"></i>`
-  } else {
-    return yo`<i class="${css.txStatus} ${css.notavailable} fas fa-circle-thin" title='Status not available' ></i>`
-  }
-}
-
-function context (self, opts, blockchain) {
-  var data = opts.data || ''
-  var from = opts.from ? helper.shortenHexData(opts.from) : ''
-  var to = opts.to
-  if (data.tx.to) to = to + ' ' + helper.shortenHexData(data.tx.to)
-  var val = data.tx.value
-  var hash = data.tx.hash ? helper.shortenHexData(data.tx.hash) : ''
-  var input = data.tx.input ? helper.shortenHexData(data.tx.input) : ''
-  var logs = data.logs && data.logs.decoded && data.logs.decoded.length ? data.logs.decoded.length : 0
-  var block = data.receipt ? data.receipt.blockNumber : data.tx.blockNumber || ''
-  var i = data.receipt ? data.receipt.transactionIndex : data.tx.transactionIndex
-  var value = val ? typeConversion.toInt(val) : 0
-  if (blockchain.getProvider() === 'vm') {
-    return yo`
-      <div>
-        <span class=${css.txLog}>
-          <span class=${css.tx}>[vm]</span>
-          <div class=${css.txItem}><span class=${css.txItemTitle}>from:</span> ${from}</div>
-          <div class=${css.txItem}><span class=${css.txItemTitle}>to:</span> ${to}</div>
-          <div class=${css.txItem}><span class=${css.txItemTitle}>value:</span> ${value} wei</div>
-          <div class=${css.txItem}><span class=${css.txItemTitle}>data:</span> ${input}</div>
-          <div class=${css.txItem}><span class=${css.txItemTitle}>logs:</span> ${logs}</div>
-          <div class=${css.txItem}><span class=${css.txItemTitle}>hash:</span> ${hash}</div>
-        </span>
-      </div>`
-  } else if (blockchain.getProvider() !== 'vm' && data.resolvedData) {
-    return yo`
-      <div>
-        <span class=${css.txLog}>
-        <span class='${css.tx}'>[block:${block} txIndex:${i}]</span>
-          <div class=${css.txItem}><span class=${css.txItemTitle}>from:</span> ${from}</div>
-          <div class=${css.txItem}><span class=${css.txItemTitle}>to:</span> ${to}</div>
-          <div class=${css.txItem}><span class=${css.txItemTitle}>value:</span> ${value} wei</div>
-          <div class=${css.txItem}><span class=${css.txItemTitle}>data:</span> ${input}</div>
-          <div class=${css.txItem}><span class=${css.txItemTitle}>logs:</span> ${logs}</div>
-          <div class=${css.txItem}><span class=${css.txItemTitle}>hash:</span> ${hash}</div>
-        </span>
-      </div>`
-  } else {
-    to = helper.shortenHexData(to)
-    hash = helper.shortenHexData(data.tx.blockHash)
-    return yo`
-      <div>
-        <span class=${css.txLog}>
-          <span class='${css.tx}'>[block:${block} txIndex:${i}]</span>
-          <div class=${css.txItem}><span class=${css.txItemTitle}>from:</span> ${from}</div>
-          <div class=${css.txItem}><span class=${css.txItemTitle}>to:</span> ${to}</div>
-          <div class=${css.txItem}><span class=${css.txItemTitle}>value:</span> ${value} wei</div>
-        </span>
-      </div>`
-  }
-}
-
-module.exports = TxLogger
-
-// helpers
-
-function isDescendant (parent, child) {
-  var node = child.parentNode
-  while (node != null) {
-    if (node === parent) {
-      return true
-    }
-    node = node.parentNode
-  }
-  return false
-}
-
-function txDetails (e, tx, data, obj) {
-  const from = obj.from
-  const to = obj.to
-  const arrowUp = yo`<i class="${css.arrow} fas fa-angle-up"></i>`
-  const arrowDown = yo`<i class="${css.arrow} fas fa-angle-down"></i>`
-
-  let blockElement = e.target
-  while (true) { // get the parent block element
-    if (blockElement.className.startsWith('block')) break
-    else if (blockElement.parentElement) {
-      blockElement = blockElement.parentElement
-    } else break
-  }
-
-  const tables = blockElement.querySelectorAll(`#${tx.id} [class^="txTable"]`)
-  const logs = blockElement.querySelectorAll(`#${tx.id} [class^='log']`)
-  const arrows = blockElement.querySelectorAll(`#${tx.id} [class^='arrow']`)
-
-  let table = [...tables].filter((t) => isDescendant(tx, t))[0]
-  const log = [...logs].filter((t) => isDescendant(tx, t))[0]
-  const arrow = [...arrows].filter((t) => isDescendant(tx, t))[0]
-
-  if (table && table.parentNode) {
-    tx.removeChild(table)
-    log.removeChild(arrow)
-    log.appendChild(arrowDown)
-  } else {
-    log.removeChild(arrow)
-    log.appendChild(arrowUp)
-    table = createTable({
-      hash: data.tx.hash,
-      status: data.receipt ? data.receipt.status : null,
-      isCall: data.tx.isCall,
-      contractAddress: data.tx.contractAddress,
-      data: data.tx,
-      from,
-      to,
-      gas: data.tx.gas,
-      input: data.tx.input,
-      'decoded input': data.resolvedData && data.resolvedData.params ? JSON.stringify(typeConversion.stringify(data.resolvedData.params), null, '\t') : ' - ',
-      'decoded output': data.resolvedData && data.resolvedData.decodedReturnValue ? JSON.stringify(typeConversion.stringify(data.resolvedData.decodedReturnValue), null, '\t') : ' - ',
-      logs: data.logs,
-      val: data.tx.value,
-      transactionCost: data.tx.transactionCost,
-      executionCost: data.tx.executionCost
-    })
-    tx.appendChild(table)
-  }
-}
-
-function createTable (opts) {
-  var table = yo`<table class="${css.txTable}" id="txTable" data-id="txLoggerTable${opts.hash}"></table>`
-  if (!opts.isCall) {
-    var msg = ''
-    if (opts.status !== undefined && opts.status !== null) {
-      if (opts.status === '0x0' || opts.status === false) {
-        msg = ' Transaction mined but execution failed'
-      } else if (opts.status === '0x1' || opts.status === true) {
-        msg = ' Transaction mined and execution succeed'
-      }
-    } else {
-      msg = ' Status not available at the moment'
-    }
-    table.appendChild(yo`
-      <tr class="${css.tr}">
-        <td class="${css.td}" data-shared="key_${opts.hash}"> status </td>
-        <td class="${css.td}" data-id="txLoggerTableStatus${opts.hash}" data-shared="pair_${opts.hash}">${opts.status}${msg}</td>
-      </tr>`)
-  }
-
-  var transactionHash = yo`
-    <tr class="${css.tr}">
-      <td class="${css.td}" data-shared="key_${opts.hash}"> transaction hash </td>
-      <td class="${css.td}" data-id="txLoggerTableHash${opts.hash}" data-shared="pair_${opts.hash}">${opts.hash}
-        ${copyToClipboard(() => opts.hash)}
-      </td>
-    </tr>
-  `
-  table.appendChild(transactionHash)
-
-  var contractAddress = yo`
-    <tr class="${css.tr}">
-      <td class="${css.td}" data-shared="key_${opts.hash}"> contract address </td>
-      <td class="${css.td}" data-id="txLoggerTableContractAddress${opts.hash}" data-shared="pair_${opts.hash}">${opts.contractAddress}
-        ${copyToClipboard(() => opts.contractAddress)}
-      </td>
-    </tr>
-  `
-  if (opts.contractAddress) table.appendChild(contractAddress)
-
-  var from = yo`
-    <tr class="${css.tr}">
-      <td class="${css.td} ${css.tableTitle}" data-shared="key_${opts.hash}"> from </td>
-      <td class="${css.td}" data-id="txLoggerTableFrom${opts.hash}" data-shared="pair_${opts.hash}">${opts.from}
-        ${copyToClipboard(() => opts.from)}
-      </td>
-    </tr>
-  `
-  if (opts.from) table.appendChild(from)
-
-  var toHash
-  var data = opts.data // opts.data = data.tx
-  if (data.to) {
-    toHash = opts.to + ' ' + data.to
-  } else {
-    toHash = opts.to
-  }
-  var to = yo`
-    <tr class="${css.tr}">
-    <td class="${css.td}" data-shared="key_${opts.hash}"> to </td>
-    <td class="${css.td}" data-id="txLoggerTableTo${opts.hash}" data-shared="pair_${opts.hash}">${toHash}
-      ${copyToClipboard(() => data.to ? data.to : toHash)}
-    </td>
-    </tr>
-  `
-  if (opts.to) table.appendChild(to)
-
-  var gas = yo`
-    <tr class="${css.tr}">
-      <td class="${css.td}" data-shared="key_${opts.hash}"> gas </td>
-      <td class="${css.td}" data-id="txLoggerTableGas${opts.hash}" data-shared="pair_${opts.hash}">${opts.gas} gas
-        ${copyToClipboard(() => opts.gas)}
-      </td>
-    </tr>
-  `
-  if (opts.gas) table.appendChild(gas)
-
-  var callWarning = ''
-  if (opts.isCall) {
-    callWarning = '(Cost only applies when called by a contract)'
-  }
-  if (opts.transactionCost) {
-    table.appendChild(yo`
-    <tr class="${css.tr}">
-      <td class="${css.td}" data-shared="key_${opts.hash}"> transaction cost </td>
-      <td class="${css.td}" data-id="txLoggerTableTransactionCost${opts.hash}" data-shared="pair_${opts.hash}">${opts.transactionCost} gas ${callWarning}
-        ${copyToClipboard(() => opts.transactionCost)}
-      </td>
-    </tr>`)
-  }
-
-  if (opts.executionCost) {
-    table.appendChild(yo`
-    <tr class="${css.tr}">
-      <td class="${css.td}" data-shared="key_${opts.hash}"> execution cost </td>
-      <td class="${css.td}" data-id="txLoggerTableExecutionHash${opts.hash}" data-shared="pair_${opts.hash}">${opts.executionCost} gas ${callWarning}
-        ${copyToClipboard(() => opts.executionCost)}
-      </td>
-    </tr>`)
-  }
-
-  var hash = yo`
-    <tr class="${css.tr}">
-      <td class="${css.td}" data-shared="key_${opts.hash}"> hash </td>
-      <td class="${css.td}" data-id="txLoggerTableHash${opts.hash}" data-shared="pair_${opts.hash}">${opts.hash}
-        ${copyToClipboard(() => opts.hash)}
-      </td>
-    </tr>
-  `
-  if (opts.hash) table.appendChild(hash)
-
-  var input = yo`
-    <tr class="${css.tr}">
-      <td class="${css.td}" data-shared="key_${opts.hash}"> input </td>
-      <td class="${css.td}" data-id="txLoggerTableInput${opts.hash}" data-shared="pair_${opts.hash}">${helper.shortenHexData(opts.input)}
-        ${copyToClipboard(() => opts.input)}
-      </td>
-    </tr>
-  `
-  if (opts.input) table.appendChild(input)
-
-  if (opts['decoded input']) {
-    var inputDecoded = yo`
-    <tr class="${css.tr}">
-      <td class="${css.td}" data-shared="key_${opts.hash}"> decoded input </td>
-      <td class="${css.td}" data-id="txLoggerTableDecodedInput${opts.hash}" data-shared="pair_${opts.hash}">${opts['decoded input']}
-        ${copyToClipboard(() => opts['decoded input'])}
-      </td>
-    </tr>`
-    table.appendChild(inputDecoded)
-  }
-
-  if (opts['decoded output']) {
-    var outputDecoded = yo`
-    <tr class="${css.tr}">
-      <td class="${css.td}" data-shared="key_${opts.hash}"> decoded output </td>
-      <td class="${css.td}" id="decodedoutput" data-id="txLoggerTableDecodedOutput${opts.hash}" data-shared="pair_${opts.hash}">${opts['decoded output']}
-        ${copyToClipboard(() => opts['decoded output'])}
-      </td>
-    </tr>`
-    table.appendChild(outputDecoded)
-  }
-
-  var stringified = ' - '
-  if (opts.logs && opts.logs.decoded) {
-    stringified = typeConversion.stringify(opts.logs.decoded)
-  }
-  var logs = yo`
-    <tr class="${css.tr}">
-      <td class="${css.td}" data-shared="key_${opts.hash}"> logs </td>
-      <td class="${css.td}" id="logs" data-id="txLoggerTableLogs${opts.hash}" data-shared="pair_${opts.hash}">
-        ${JSON.stringify(stringified, null, '\t')}
-        ${copyToClipboard(() => JSON.stringify(stringified, null, '\t'))}
-        ${copyToClipboard(() => JSON.stringify(opts.logs.raw || '0'))}
-      </td>
-    </tr>
-  `
-  if (opts.logs) table.appendChild(logs)
-
-  var val = opts.val != null ? typeConversion.toInt(opts.val) : 0
-  val = yo`
-    <tr class="${css.tr}">
-      <td class="${css.td}" data-shared="key_${opts.hash}"> value </td>
-      <td class="${css.td}" data-id="txLoggerTableValue${opts.hash}" data-shared="pair_${opts.hash}">${val} wei
-        ${copyToClipboard(() => `${val} wei`)}
-      </td>
-    </tr>
-  `
-  if (opts.val) table.appendChild(val)
-
-  return table
-}
diff --git a/apps/remix-ide/src/lib/cmdInterpreterAPI.js b/apps/remix-ide/src/lib/cmdInterpreterAPI.js
deleted file mode 100644
index 82ae4636fe..0000000000
--- a/apps/remix-ide/src/lib/cmdInterpreterAPI.js
+++ /dev/null
@@ -1,132 +0,0 @@
-'use strict'
-import { CompilerImports } from '@remix-project/core-plugin'
-import Registry from '../app/state/registry'
-var yo = require('yo-yo')
-var async = require('async')
-var EventManager = require('../lib/events')
-
-var toolTip = require('../app/ui/tooltip')
-
-class CmdInterpreterAPI {
-  constructor (terminal, blockchain) {
-    const self = this
-    self.event = new EventManager()
-    self.blockchain = blockchain
-    self._components = {}
-    self._components.registry = Registry.getInstance()
-    self._components.terminal = terminal
-    self._components.fileImport = new CompilerImports()
-    self._deps = {
-      fileManager: self._components.registry.get('filemanager').api,
-      editor: self._components.registry.get('editor').api,
-      compilersArtefacts: self._components.registry.get('compilersartefacts').api,
-      offsetToLineColumnConverter: self._components.registry.get('offsettolinecolumnconverter').api
-    }
-    self.commandHelp = {
-      'remix.loadgist(id)': 'Load a gist in the file explorer.',
-      'remix.loadurl(url)': 'Load the given url in the file explorer. The url can be of type github, swarm, ipfs or raw http',
-      'remix.execute(filepath)': 'Run the script specified by file path. If filepath is empty, script currently displayed in the editor is executed.',
-      'remix.exeCurrent()': 'Run the script currently displayed in the editor',
-      'remix.help()': 'Display this help message'
-    }
-  }
-
-  log () { arguments[0] != null ? this._components.terminal.commands.html(arguments[0]) : this._components.terminal.commands.html(arguments[1]) }
-  loadgist (id, cb) {
-    this._components.terminal.call('gistHandler', 'load', id)
-    if (cb) cb()
-  }
-
-  loadurl (url, cb) {
-    const self = this
-    self._components.fileImport.import(url,
-      (loadingMsg) => { toolTip(loadingMsg) },
-      (err, content, cleanUrl, type, url) => {
-        if (err) {
-          toolTip(`Unable to load ${url}: ${err}`)
-          if (cb) cb(err)
-        } else {
-          self._deps.fileManager.writeFile(type + '/' + cleanUrl, content)
-          try {
-            content = JSON.parse(content)
-            async.eachOfSeries(content.sources, (value, file, callbackSource) => {
-              var url = value.urls[0] // @TODO retrieve all other contents ?
-              self._components.fileImport.import(url,
-                (loadingMsg) => { toolTip(loadingMsg) },
-                async (error, content, cleanUrl, type, url) => {
-                  if (error) {
-                    toolTip(`Cannot retrieve the content of ${url}: ${error}`)
-                    return callbackSource(`Cannot retrieve the content of ${url}: ${error}`)
-                  } else {
-                    try {
-                      await self._deps.fileManager.writeFile(type + '/' + cleanUrl, content)
-                      callbackSource()
-                    } catch (e) {
-                      callbackSource(e.message)
-                    }
-                  }
-                })
-            }, (error) => {
-              if (cb) cb(error)
-            })
-          } catch (e) {}
-          if (cb) cb()
-        }
-      })
-  }
-
-  exeCurrent (cb) {
-    return this.execute(undefined, cb)
-  }
-
-  execute (file, cb) {
-    const self = this
-
-    function _execute (content, cb) {
-      if (!content) {
-        toolTip('no content to execute')
-        if (cb) cb()
-        return
-      }
-      self._components.terminal.commands.script(content)
-    }
-
-    if (typeof file === 'undefined') {
-      var content = self._deps.editor.currentContent()
-      _execute(content, cb)
-      return
-    }
-
-    var provider = self._deps.fileManager.fileProviderOf(file)
-
-    if (!provider) {
-      toolTip(`provider for path ${file} not found`)
-      if (cb) cb()
-      return
-    }
-
-    provider.get(file, (error, content) => {
-      if (error) {
-        toolTip(error)
-        if (cb) cb()
-        return
-      }
-
-      _execute(content, cb)
-    })
-  }
-
-  help (cb) {
-    const self = this
-    var help = yo`<div></div>`
-    for (var k in self.commandHelp) {
-      help.appendChild(yo`<div>${k}: ${self.commandHelp[k]}</div>`)
-      help.appendChild(yo`<br>`)
-    }
-    self._components.terminal.commands.html(help)
-    if (cb) cb()
-    return ''
-  }
-}
-
-module.exports = CmdInterpreterAPI

From 221d338340f87a3c7fe061c8bf2a3c6969fe2714 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 6 Jan 2022 20:27:44 +0100
Subject: [PATCH 166/168] remove uneeded module

---
 apps/remix-ide/src/app/panels/terminal.js     |   3 -
 .../src/app/ui/auto-complete-popup.js         | 212 ------------------
 2 files changed, 215 deletions(-)
 delete mode 100644 apps/remix-ide/src/app/ui/auto-complete-popup.js

diff --git a/apps/remix-ide/src/app/panels/terminal.js b/apps/remix-ide/src/app/panels/terminal.js
index 091ca710c1..fd17d8b450 100644
--- a/apps/remix-ide/src/app/panels/terminal.js
+++ b/apps/remix-ide/src/app/panels/terminal.js
@@ -8,8 +8,6 @@ import Registry from '../state/registry'
 const vm = require('vm')
 const EventManager = require('../../lib/events')
 
-const AutoCompletePopup = require('../ui/auto-complete-popup')
-
 import { CompilerImports } from '@remix-project/core-plugin' // eslint-disable-line
 
 const KONSOLES = []
@@ -64,7 +62,6 @@ class Terminal extends Plugin {
     }
     this._view = { el: null, bar: null, input: null, term: null, journal: null, cli: null }
     this._components = {}
-    this._components.autoCompletePopup = new AutoCompletePopup(this._opts)
     this._commands = {}
     this.commands = {}
     this._JOURNAL = []
diff --git a/apps/remix-ide/src/app/ui/auto-complete-popup.js b/apps/remix-ide/src/app/ui/auto-complete-popup.js
deleted file mode 100644
index 36e4fa9697..0000000000
--- a/apps/remix-ide/src/app/ui/auto-complete-popup.js
+++ /dev/null
@@ -1,212 +0,0 @@
-var yo = require('yo-yo')
-var remixLib = require('@remix-project/remix-lib')
-var EventManager = remixLib.EventManager
-var Commands = require('../../lib/commands')
-
-// -------------- styling ----------------------
-var css = require('./styles/auto-complete-popup-styles')
-
-/* USAGE:
-
-  var autoCompletePopup = new AutoCompletePopup({
-    options: []
-  })
-  autoCompletePopup.event.register('handleSelect', function (input) { })
-  autoCompletePopup.event.register('updateList', function () { })
-
-*/
-
-class AutoCompletePopup {
-  constructor (opts = {}) {
-    var self = this
-    self.event = new EventManager()
-    self.isOpen = false
-    self.opts = opts
-    self.data = {
-      _options: []
-    }
-    self._components = {}
-    self._view = null
-    self._startingElement = 0
-    self._elementsToShow = 4
-    self._selectedElement = 0
-    this.extraCommands = []
-  }
-
-  render () {
-    var self = this
-    const autoComplete = yo`
-      <div class="${css.popup} alert alert-secondary">
-        <div>
-          ${self.data._options.map((item, index) => {
-            return yo`
-              <div data-id="autoCompletePopUpAutoCompleteItem" class="${css.autoCompleteItem} ${css.listHandlerHide} item ${self._selectedElement === index ? 'border border-primary' : ''}">
-                  <div value=${index} onclick=${(event) => { self.handleSelect(event.srcElement.innerText) }}>
-                    ${getKeyOf(item)} 
-                  </div>
-                  <div>
-                    ${getValueOf(item)}
-                  </div>
-              </div>
-            `
-          })}
-        </div>
-        <div class="${css.listHandlerHide}">
-          <div class="${css.pageNumberAlignment}">Page ${(self._startingElement / self._elementsToShow) + 1} of ${Math.ceil(self.data._options.length / self._elementsToShow)}</div>
-        </div>
-      </div>
-    `
-    function setUpPopUp (autoComplete) {
-      handleOpenPopup(autoComplete)
-      handleListSize(autoComplete)
-    }
-
-    function handleOpenPopup (autoComplete) {
-      autoComplete.style.display = self.data._options.length > 0 ? 'block' : 'none'
-    }
-
-    function handleListSize (autoComplete) {
-      if (self.data._options.length >= self._startingElement) {
-        for (let i = self._startingElement; i < (self._elementsToShow + self._startingElement); i++) {
-          const el = autoComplete.querySelectorAll('.item')[i]
-          if (el) {
-            el.classList.remove(css.listHandlerHide)
-            el.classList.add(css.listHandlerShow)
-          }
-        }
-      }
-    }
-    setUpPopUp(autoComplete)
-    if (!this._view) this._view = autoComplete
-    return autoComplete
-  }
-
-  handleSelect (text) {
-    this.removeAutoComplete()
-    this.event.trigger('handleSelect', [text])
-  }
-
-  moveUp () {
-    if (this._selectedElement === 0) return
-    this._selectedElement--
-    this._startingElement = this._selectedElement > 0 ? this._selectedElement - 1 : 0
-    this.event.trigger('updateList')
-    yo.update(this._view, this.render())
-  }
-
-  moveDown () {
-    if (this.data._options.length <= this._selectedElement + 1) return
-    this._selectedElement++
-    this._startingElement = this._selectedElement - 1
-    this.event.trigger('updateList')
-    yo.update(this._view, this.render())
-  }
-
-  handleAutoComplete (event, inputString) {
-    if (this.isOpen && (event.which === 27 || event.which === 8 || event.which === 46)) {
-      // backspace or any key that should remove the autocompletion
-      this.removeAutoComplete()
-      return true
-    }
-    if (this.isOpen && (event.which === 13 || event.which === 9)) {
-      // enter and tab (validate completion)
-      event.preventDefault()
-      if (this.data._options[this._selectedElement]) {
-        this.handleSelect(getKeyOf(this.data._options[this._selectedElement]))
-      }
-      this.removeAutoComplete()
-      return true
-    }
-    if (this.isOpen && event.which === 38) {
-      // move up
-      event.preventDefault()
-      this.isOpen = true
-      this.moveUp()
-      return true
-    }
-    if (this.isOpen && event.which === 40) {
-      // move down
-      event.preventDefault()
-      this.isOpen = true
-      this.moveDown()
-      return true
-    }
-    if (event.which === 13 || event.which === 9) {
-      // enter || tab and autocompletion is off, just returning false
-      return false
-    }
-    const textList = inputString.split(' ')
-    const autoCompleteInput = textList.length > 1 ? textList[textList.length - 1] : textList[0]
-    if (inputString.length >= 2) {
-      // more than 2 letters, start completion
-      this.data._options = []
-      Commands.allPrograms.forEach(item => {
-        const program = getKeyOf(item)
-        if (program.substring(0, program.length - 1).includes(autoCompleteInput.trim())) {
-          this.data._options.push(item)
-        } else if (autoCompleteInput.trim().includes(program) || (program === autoCompleteInput.trim())) {
-          Commands.allCommands.forEach(item => {
-            const command = getKeyOf(item)
-            if (command.includes(autoCompleteInput.trim())) {
-              this.data._options.push(item)
-            }
-          })
-        }
-      })
-      this.extraCommands.forEach(item => {
-        const command = getKeyOf(item)
-        if (command.includes(autoCompleteInput.trim())) {
-          this.data._options.push(item)
-        }
-      })
-
-      if (this.data._options.length === 1 && event.which === 9) {
-        // if only one option and tab is pressed, we resolve it
-        event.preventDefault()
-        textList.pop()
-        textList.push(getKeyOf(this.data._options[0]))
-        this.handleSelect(`${textList}`.replace(/,/g, ' '))
-        this.removeAutoComplete()
-        return
-      }
-      if (this.data._options.length) this.isOpen = true
-      yo.update(this._view, this.render())
-      return true
-    }
-    return false
-  }
-
-  removeAutoComplete () {
-    if (!this.isOpen) return
-    this._view.style.display = 'none'
-    this.isOpen = false
-    this.data._options = []
-    this._startingElement = 0
-    this._selectedElement = 0
-    yo.update(this._view, this.render())
-  }
-
-  extendAutocompletion () {
-    // TODO: this is not using the appManager interface. Terminal should be put as module
-    this.opts.appManager.event.on('activate', async (profile) => {
-      if (!profile.methods) return
-      profile.methods.forEach((method) => {
-        const key = `remix.call('${profile.name}', '${method}')`
-        const keyValue = {}
-        keyValue[key] = `call ${profile.name} - ${method}`
-        if (this.extraCommands.includes(keyValue)) return
-        this.extraCommands.push(keyValue)
-      })
-    })
-  }
-}
-
-function getKeyOf (item) {
-  return Object.keys(item)[0]
-}
-
-function getValueOf (item) {
-  return Object.values(item)[0]
-}
-
-module.exports = AutoCompletePopup

From dae91d1a0ffef19124be1a690b11238d8b4b606e Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 6 Jan 2022 20:39:30 +0100
Subject: [PATCH 167/168] remove unused

---
 apps/remix-ide/src/app.js                    |   3 -
 apps/remix-ide/src/app/ui/sendTxCallbacks.js | 109 -------------------
 apps/remix-ide/src/migrateFileSystem.js      |  64 -----------
 3 files changed, 176 deletions(-)
 delete mode 100644 apps/remix-ide/src/app/ui/sendTxCallbacks.js
 delete mode 100644 apps/remix-ide/src/migrateFileSystem.js

diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index e0aff565c4..7038c120cd 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -15,7 +15,6 @@ import { WalkthroughService } from './walkthroughService'
 
 import { OffsetToLineColumnConverter, CompilerMetadata, CompilerArtefacts, FetchAndCompile, CompilerImports, EditorContextListener, GistHandler } from '@remix-project/core-plugin'
 
-import migrateFileSystem from './migrateFileSystem'
 import Registry from './app/state/registry'
 import { ConfigPlugin } from './app/plugins/config'
 import { Layout } from './app/panels/layout'
@@ -87,8 +86,6 @@ class AppComponent {
       api: self._components.filesProviders,
       name: 'fileproviders'
     })
-
-    migrateFileSystem(self._components.filesProviders.browser)
   }
 
   async run () {
diff --git a/apps/remix-ide/src/app/ui/sendTxCallbacks.js b/apps/remix-ide/src/app/ui/sendTxCallbacks.js
deleted file mode 100644
index 3f5c7c7506..0000000000
--- a/apps/remix-ide/src/app/ui/sendTxCallbacks.js
+++ /dev/null
@@ -1,109 +0,0 @@
-const yo = require('yo-yo')
-const remixLib = require('@remix-project/remix-lib')
-const confirmDialog = require('./confirmDialog')
-const modalCustom = require('./modal-dialog-custom')
-const modalDialog = require('./modaldialog')
-const typeConversion = remixLib.execution.typeConversion
-const Web3 = require('web3')
-
-module.exports = {
-  getCallBacksWithContext: (udappUI, blockchain) => {
-    const callbacks = {}
-    callbacks.confirmationCb = confirmationCb
-    callbacks.continueCb = continueCb
-    callbacks.promptCb = promptCb
-    callbacks.udappUI = udappUI
-    callbacks.blockchain = blockchain
-    return callbacks
-  }
-}
-
-const continueCb = function (error, continueTxExecution, cancelCb) {
-  if (error) {
-    const msg = typeof error !== 'string' ? error.message : error
-    modalDialog(
-      'Gas estimation failed',
-      yo`
-        <div>Gas estimation errored with the following message (see below).
-        The transaction execution will likely fail. Do you want to force sending? <br>${msg}</div>
-      `,
-      {
-        label: 'Send Transaction',
-        fn: () => continueTxExecution()
-      },
-      {
-        label: 'Cancel Transaction',
-        fn: () => cancelCb()
-      }
-    )
-  } else {
-    continueTxExecution()
-  }
-}
-
-const promptCb = function (okCb, cancelCb) {
-  modalCustom.promptPassphrase('Passphrase requested', 'Personal mode is enabled. Please provide passphrase of account', '', okCb, cancelCb)
-}
-
-const confirmationCb = function (network, tx, gasEstimation, continueTxExecution, cancelCb) {
-  const self = this
-  if (network.name !== 'Main') {
-    return continueTxExecution(null)
-  }
-  var amount = Web3.utils.fromWei(typeConversion.toInt(tx.value), 'ether')
-  var content = confirmDialog(tx, network, amount, gasEstimation,
-    (gasPrice, cb) => {
-      let txFeeText, priceStatus
-      // TODO: this try catch feels like an anti pattern, can/should be
-      // removed, but for now keeping the original logic
-      try {
-        var fee = Web3.utils.toBN(tx.gas).mul(Web3.utils.toBN(Web3.utils.toWei(gasPrice.toString(10), 'gwei')))
-        txFeeText = ' ' + Web3.utils.fromWei(fee.toString(10), 'ether') + ' Ether'
-        priceStatus = true
-      } catch (e) {
-        txFeeText = ' Please fix this issue before sending any transaction. ' + e.message
-        priceStatus = false
-      }
-      cb(txFeeText, priceStatus)
-    },
-    (cb) => {
-      self.blockchain.web3().eth.getGasPrice((error, gasPrice) => {
-        const warnMessage = ' Please fix this issue before sending any transaction. '
-        if (error) {
-          return cb('Unable to retrieve the current network gas price.' + warnMessage + error)
-        }
-        try {
-          var gasPriceValue = Web3.utils.fromWei(gasPrice.toString(10), 'gwei')
-          cb(null, gasPriceValue)
-        } catch (e) {
-          cb(warnMessage + e.message, null, false)
-        }
-      })
-    }
-  )
-  modalDialog(
-    'Confirm transaction',
-    content,
-    {
-      label: 'Confirm',
-      fn: () => {
-        self.blockchain.config.setUnpersistedProperty(
-          'doNotShowTransactionConfirmationAgain',
-          content.querySelector('input#confirmsetting').checked
-        )
-        // TODO: check if this is check is still valid given the refactor
-        if (!content.gasPriceStatus) {
-          cancelCb('Given transaction fee is not correct')
-        } else {
-          continueTxExecution(content.txFee)
-        }
-      }
-    },
-    {
-      label: 'Cancel',
-      fn: () => {
-        return cancelCb('Transaction canceled by user.')
-      }
-    }
-  )
-}
diff --git a/apps/remix-ide/src/migrateFileSystem.js b/apps/remix-ide/src/migrateFileSystem.js
deleted file mode 100644
index 94ef8c0b7d..0000000000
--- a/apps/remix-ide/src/migrateFileSystem.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import { Storage } from '@remix-project/remix-lib'
-import { joinPath } from './lib/helper'
-import yo from 'yo-yo'
-const modalDialogCustom = require('./app/ui/modal-dialog-custom')
-/*
-  Migrating the files to the BrowserFS storage instead or raw localstorage
-*/
-export default (fileProvider) => {
-  const fileStorage = new Storage('sol:')
-  const flag = 'status'
-  const fileStorageBrowserFS = new Storage('remix_browserFS_migration:')
-  if (fileStorageBrowserFS.get(flag) === 'done') return
-  fileStorage.keys().forEach((path) => {
-    if (path !== '.remix.config') {
-      const content = fileStorage.get(path)
-      fileProvider.set(path, content)
-      // TODO https://github.com/ethereum/remix-ide/issues/2377
-      // fileStorage.remove(path) we don't want to remove it as we are still supporting the old version
-    }
-  })
-  fileStorageBrowserFS.set(flag, 'done')
-}
-
-export async function migrateToWorkspace (fileManager, filePanel) {
-  const browserProvider = fileManager.getProvider('browser')
-  const workspaceProvider = fileManager.getProvider('workspace')
-  const files = await browserProvider.copyFolderToJson('/')
-
-  if (Object.keys(files).length === 0) {
-    // we don't have any root file, only .workspaces
-    // don't need to create a workspace
-    throw new Error('No file to migrate')
-  }
-
-  if (Object.keys(files).length === 1 && files['/.workspaces']) {
-    // we don't have any root file, only .workspaces
-    // don't need to create a workspace
-    throw new Error('No file to migrate')
-  }
-
-  const workspaceName = 'workspace_migrated_' + Date.now()
-  await filePanel.processCreateWorkspace(workspaceName)
-  filePanel.getWorkspaces() // refresh list
-  const workspacePath = joinPath('browser', workspaceProvider.workspacesPath, workspaceName)
-  await populateWorkspace(workspacePath, files, browserProvider)
-  return workspaceName
-}
-
-const populateWorkspace = async (workspace, json, browserProvider) => {
-  for (const item in json) {
-    const isFolder = json[item].content === undefined
-    if (isFolder && item === '/.workspaces') continue // we don't want to replicate this one.
-    if (isFolder) {
-      browserProvider.createDir(joinPath(workspace, item))
-      await populateWorkspace(workspace, json[item].children, browserProvider)
-    } else {
-      await browserProvider.set(joinPath(workspace, item), json[item].content, (err) => {
-        if (err && err.message) {
-          modalDialogCustom.alert(yo`<div>There was an error migrating your files:${err.message} <div>Please use the ‘Download all Files' action, clear the local storage and re-import your files manually or use the 'Restore files' action.</div></div>`)
-        }
-      })
-    }
-  }
-}

From a6e9e105d37fc9a80669a619de8618c483e1d0ba Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 6 Jan 2022 20:55:35 +0100
Subject: [PATCH 168/168] remove uneeded

---
 apps/remix-ide/best-practices.md              | 153 ------------------
 .../remix-ide/docs/code_contribution_guide.md |   4 +-
 .../src/app/components/vertical-icons.js      |   3 -
 apps/remix-ide/src/app/ui/svgLogo.js          |   8 -
 apps/remix-ide/src/lib/remixd.js              | 145 -----------------
 best-practices.md                             | 153 ------------------
 6 files changed, 2 insertions(+), 464 deletions(-)
 delete mode 100644 apps/remix-ide/best-practices.md
 delete mode 100644 apps/remix-ide/src/app/ui/svgLogo.js
 delete mode 100644 apps/remix-ide/src/lib/remixd.js
 delete mode 100644 best-practices.md

diff --git a/apps/remix-ide/best-practices.md b/apps/remix-ide/best-practices.md
deleted file mode 100644
index 915759a054..0000000000
--- a/apps/remix-ide/best-practices.md
+++ /dev/null
@@ -1,153 +0,0 @@
-# Current "Best Practice" Conventions
-
-
-- Please use [JS Standard Style](https://standardjs.com/) as a coding style guide.
-- `ES6 class` rather than ES5 to create class.
-- CSS declaration using `csjs-inject`.
-- CSS files: 
-
-  **if** the CSS section of an UI component is too important, CSS declarations should be put in a different file and in a different folder.
-  
-  The folder should be named `styles` and the file should be named with the extension `-styles.css`.
-  
-  e.g: `file-explorer.js` being an UI component `file-explorer-styles.css` is created in the `styles` folder right under `file-explorer.js`
-
-  **if** the CSS section of an UI component is rather limited it is preferable to put it in the corresponding JS file.
-  
-- HTML declaration using `yo-yo`.
-
-- A module trigger events using `event` property:
-  `self.event = new EventManager()`. 
-  Events can then be triggered:
-  `self.event.trigger('eventName', [param1, param2])`
-- `self._view` is the HTML view renderered by `yo-yo` in the `render` function.
-- `render()` this function should be called at the first rendering (make sure that the returned node element is put on the DOM), and should *not* by called again from outside the component.
-- `update()` call this function to update the DOM when the state of the component has changed (this function must be called after the initial call to `render()`).
-- for all functions / properties, prefixing by underscore (`_`) means the scope is private, and they should **not** be accessed not changed from outside the component.
-- constructor arguments: There is no fixed rule whether it is preferrable to use multiples arguments or a single option *{}* argument (or both).
-  We recommend: 
-    - use a specific slot for **obligatory** arguments and/or for complex arguments (meaning not boolean, not string, etc...).
-    - put arguments in an option *{}* for non critical and for optionnal arguments.
-    - if a component has more than 4/5 parameters, it is recommended to find a way to group some in one or more *opt* arguments.
-  
-- look them up, discuss them, update them.
-    
-## Module Definition (example)
-```js
-// user-card.js
-var yo = require('yo-yo')
-var csjs = require('csjs-inject')
-var EventManager = require('remix-lib').EventManager
-
-var css = csjs`
-  .userCard        {
-    position       : relative;
-    box-sizing     : border-box;
-    display        : flex;
-    flex-direction : column;
-    align-items    : center;
-    border         : 1px solid black;
-    width          : 400px;
-    padding        : 50px;  
-  }
-  .clearFunds { background-color: lightblue; }
-`
-
-class UserCard {
-  constructor (api, events, opts = {}) {
-    var self = this
-
-    self.event = new EventManager()
-    self.opts = opts
-    self._api = api
-    self._consumedEvents = events
-    self._view = undefined
-    
-    events.funds.register('fundsChanged', function (amount) {
-      if (amount < self.state._funds) self.state.totalSpend += self.state._funds - amount
-      self.state._funds = amount
-      self.render()
-    })
-    self.event.trigger('eventName', [param1, param2])
-  }
-  render () {
-    var self = this
-    var view = yo`
-      <div class=${css.userCard}>
-        <h1> @${self.state._nickname} </h1>
-        <h2> Welcome, ${self.state.title || ''} ${self.state.name || 'anonymous'} ${self.state.surname} </h2>
-        <ul> <li> User Funds: $${self.state._funds} </li> </ul>
-        <ul> <li> Spent Funds: $${self.state.totalSpend} </li> </ul>
-        <button class=${css.clearFunds} onclick=${e=>self._spendAll.call(self, e)}> spend all funds </button>
-      </div>
-    `
-    if (!self._view) {
-      self._view = view
-    }
-    return self._view
-  }
-  update () {
-    yo.update(this._view, this.render())
-  }
-  setNickname (name) {
-    this._nickname = name
-  }
-  getNickname () {
-    var self = this
-    return `@${self.state._nickname}`
-  }
-  getFullName () {
-    var self = this
-    return `${self.state.title} ${self.state.name} ${self.state.surname}`
-  }
-  _spendAll (event) {
-    var self = this
-    self._appAPI.clearUserFunds()
-  }
-  _constraint (msg) { throw new Error(msg) }
-}
-
-module.exports = UserCard
-```
-## Module Usage (example)
-```js
-/*****************************************************************************/
-// 1. SETUP CONTEXT
-var EventManager = require('remix-lib').EventManager
-var funds = { event: new EventManager() }
-var userfunds = 15
-function getUserFunds () { return userfunds }
-function clearUserFunds () {
-  var spent = userfunds
-  userfunds = 0
-  console.log(`all funds of ${usercard.getFullName()} were spent.`)
-  funds.event.trigger('fundsChanged', [userfunds])
-  return spent
-}
-setInterval(function () {
-  userfunds++
-  funds.event.trigger('fundsChanged', [userfunds])
-}, 100)
-
-/*****************************************************************************/
-// 2. EXAMPLE USAGE
-var UserCard = require('./user-card')
-
-var usercard = new UserCard(
-  { getUserFunds, clearUserFunds }, 
-  { funds: funds.event },
-  {
-    title: 'Dr.',
-    name: 'John',
-    surname: 'Doe',
-    nickname: 'johndoe99'
-  })
-
-var el = usercard.render()
-document.body.appendChild(el)
-setTimeout(function () {
-  userCard.setNickname('new name') 
-  usercard.update()
-}, 5000)
-
-```
diff --git a/apps/remix-ide/docs/code_contribution_guide.md b/apps/remix-ide/docs/code_contribution_guide.md
index 6db3d1294c..5553b87c21 100644
--- a/apps/remix-ide/docs/code_contribution_guide.md
+++ b/apps/remix-ide/docs/code_contribution_guide.md
@@ -5,7 +5,7 @@ Remix is an open source tool and we encourage anyone to help us improve our tool
 You can do that by opening issues, giving feedback or by contributing a pull request
 to our codebase.
 
-The Remix application is built with JavaScript and it doesn't use any framework. We only
-rely on selected set of npm modules, like `yo-yo`, `csjs-inject` and others. Check out the `package.json` files in the Remix submodules to learn more about the stack.
+The Remix application is built with JavaScript and React.
+Check out the `package.json` files in the Remix submodules to learn more about the stack.
 
 To learn more, please visit our [GitHub page](https://github.com/ethereum/remix-ide).
diff --git a/apps/remix-ide/src/app/components/vertical-icons.js b/apps/remix-ide/src/app/components/vertical-icons.js
index 69f6132939..3c86123bb6 100644
--- a/apps/remix-ide/src/app/components/vertical-icons.js
+++ b/apps/remix-ide/src/app/components/vertical-icons.js
@@ -1,12 +1,9 @@
 import * as packageJson from '../../../../../package.json'
-// eslint-disable-next-line no-unused-vars
-import { basicLogo } from '../ui/svgLogo'
 import ReactDOM from 'react-dom'
 import React from 'react' // eslint-disable-line
 // eslint-disable-next-line no-unused-vars
 import { RemixUiVerticalIconsPanel } from '@remix-ui/vertical-icons-panel'
 import Registry from '../state/registry'
-// var helper = require('../../lib/helper')
 const { Plugin } = require('@remixproject/engine')
 const EventEmitter = require('events')
 
diff --git a/apps/remix-ide/src/app/ui/svgLogo.js b/apps/remix-ide/src/app/ui/svgLogo.js
deleted file mode 100644
index 3f8513151a..0000000000
--- a/apps/remix-ide/src/app/ui/svgLogo.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import yo from 'yo-yo'
-export function basicLogo () {
-  return yo`<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100"> 
-<path d="M91.84,35a.09.09,0,0,1-.1-.07,41,41,0,0,0-79.48,0,.09.09,0,0,1-.1.07C9.45,35,1,35.35,1,42.53c0,8.56,1,16,6,20.32,2.16,1.85,5.81,2.3,9.27,2.22a44.4,44.4,0,0,0,6.45-.68.09.09,0,0,0,.06-.15A34.81,34.81,0,0,1,17,45c0-.1,0-.21,0-.31a35,35,0,0,1,70,0c0,.1,0,.21,0,.31a34.81,34.81,0,0,1-5.78,19.24.09.09,0,0,0,.06.15,44.4,44.4,0,0,0,6.45.68c3.46.08,7.11-.37,9.27-2.22,5-4.27,6-11.76,6-20.32C103,35.35,94.55,35,91.84,35Z"/>
-<path d="M52,74,25.4,65.13a.1.1,0,0,0-.1.17L51.93,91.93a.1.1,0,0,0,.14,0L78.7,65.3a.1.1,0,0,0-.1-.17L52,74A.06.06,0,0,1,52,74Z"/>
-<path d="M75.68,46.9,82,45a.09.09,0,0,0,.08-.09,29.91,29.91,0,0,0-.87-6.94.11.11,0,0,0-.09-.08l-6.43-.58a.1.1,0,0,1-.06-.18l4.78-4.18a.13.13,0,0,0,0-.12,30.19,30.19,0,0,0-3.65-6.07.09.09,0,0,0-.11,0l-5.91,2a.1.1,0,0,1-.12-.14L72.19,23a.11.11,0,0,0,0-.12,29.86,29.86,0,0,0-5.84-4.13.09.09,0,0,0-.11,0l-4.47,4.13a.1.1,0,0,1-.17-.07l.09-6a.1.1,0,0,0-.07-.1,30.54,30.54,0,0,0-7-1.47.1.1,0,0,0-.1.07l-2.38,5.54a.1.1,0,0,1-.18,0l-2.37-5.54a.11.11,0,0,0-.11-.06,30,30,0,0,0-7,1.48.12.12,0,0,0-.07.1l.08,6.05a.09.09,0,0,1-.16.07L37.8,18.76a.11.11,0,0,0-.12,0,29.75,29.75,0,0,0-5.83,4.13.11.11,0,0,0,0,.12l2.59,5.6a.11.11,0,0,1-.13.14l-5.9-2a.11.11,0,0,0-.12,0,30.23,30.23,0,0,0-3.62,6.08.11.11,0,0,0,0,.12l4.79,4.19a.1.1,0,0,1-.06.17L23,37.91a.1.1,0,0,0-.09.07A29.9,29.9,0,0,0,22,44.92a.1.1,0,0,0,.07.1L28.4,47a.1.1,0,0,1,0,.18l-5.84,3.26a.16.16,0,0,0,0,.11,30.17,30.17,0,0,0,2.1,6.76c.32.71.67,1.4,1,2.08a.1.1,0,0,0,.06,0L52,68.16H52l26.34-8.78a.1.1,0,0,0,.06-.05,30.48,30.48,0,0,0,3.11-8.88.1.1,0,0,0-.05-.11l-5.83-3.26A.1.1,0,0,1,75.68,46.9Z"/>
-</svg>`
-}
diff --git a/apps/remix-ide/src/lib/remixd.js b/apps/remix-ide/src/lib/remixd.js
deleted file mode 100644
index 2555ccef0b..0000000000
--- a/apps/remix-ide/src/lib/remixd.js
+++ /dev/null
@@ -1,145 +0,0 @@
-'use strict'
-var EventManager = require('../lib/events')
-var modalDialog = require('../app/ui/modaldialog')
-var yo = require('yo-yo')
-
-class Remixd {
-  constructor (port) {
-    this.event = new EventManager()
-    this.port = port
-    this.callbacks = {}
-    this.callid = 0
-    this.socket = null
-    this.connected = false
-    this.receiveResponse()
-  }
-
-  online () {
-    return this.socket !== null
-  }
-
-  close () {
-    if (this.socket) {
-      this.socket.close()
-      this.socket = null
-    }
-  }
-
-  start (cb) {
-    if (this.socket) {
-      try {
-        this.socket.close()
-      } catch (e) {}
-    }
-    this.event.trigger('connecting', [])
-    this.socket = new WebSocket('ws://localhost:' + this.port, 'echo-protocol') // eslint-disable-line
-
-    this.socket.addEventListener('open', (event) => {
-      this.connected = true
-      this.event.trigger('connected', [event])
-      cb()
-    })
-
-    this.socket.addEventListener('message', (event) => {
-      var data = JSON.parse(event.data)
-      if (data.type === 'reply') {
-        if (this.callbacks[data.id]) {
-          this.callbacks[data.id](data.error, data.result)
-          delete this.callbacks[data.id]
-        }
-        this.event.trigger('replied', [data])
-      } else if (data.type === 'notification') {
-        this.event.trigger('notified', [data])
-      } else if (data.type === 'system') {
-        if (data.error) {
-          this.event.trigger('system', [{
-            error: data.error
-          }])
-        }
-      }
-    })
-
-    this.socket.addEventListener('error', (event) => {
-      this.errored(event)
-      cb(event)
-    })
-
-    this.socket.addEventListener('close', (event) => {
-      if (event.wasClean) {
-        this.connected = false
-        this.event.trigger('closed', [event])
-      } else {
-        this.errored(event)
-      }
-      this.socket = null
-    })
-  }
-
-  async receiveResponse (requestId) {
-    return new Promise((resolve, reject) => {
-      this.event.register('replied', (data) => {
-        if (data.id === requestId) {
-          if (data.error) reject(data.error)
-          else resolve(data.result)
-        }
-      })
-    })
-  }
-
-  errored (event) {
-    function remixdDialog () {
-      return yo`<div>Connection to Remixd closed. Localhost connection not available anymore.</div>`
-    }
-    if (this.connected) {
-      modalDialog('Lost connection to Remixd!', remixdDialog(), {}, { label: '' })
-    }
-    this.connected = false
-    this.socket = null
-    this.event.trigger('errored', [event])
-  }
-
-  call (service, fn, args, callback) {
-    return new Promise((resolve, reject) => {
-      this.ensureSocket((error) => {
-        if (error) {
-          callback && typeof callback === 'function' && callback(error)
-          reject(error)
-          return
-        }
-        if (this.socket && this.socket.readyState === this.socket.OPEN) {
-          var data = this.format(service, fn, args)
-          this.callbacks[data.id] = callback
-          this.socket.send(JSON.stringify(data))
-          resolve(data.id)
-        } else {
-          callback && typeof callback === 'function' && callback('Socket not ready. state:' + this.socket.readyState)
-          reject(new Error('Socket not ready. state:' + this.socket.readyState))
-        }
-      })
-    })
-  }
-
-  ensureSocket (cb) {
-    if (this.socket) return cb(null, this.socket)
-    this.start((error) => {
-      if (error) {
-        cb(error)
-      } else {
-        cb(null, this.socket)
-      }
-    })
-  }
-
-  format (service, fn, args) {
-    var data = {
-      id: this.callid,
-      service: service,
-      fn: fn,
-      args: args
-    }
-    this.callid++
-    return data
-  }
-}
-
-module.exports = Remixd
diff --git a/best-practices.md b/best-practices.md
deleted file mode 100644
index 3a21907978..0000000000
--- a/best-practices.md
+++ /dev/null
@@ -1,153 +0,0 @@
-# Current "Best Practice" Conventions
-
-
-- Coding style is defined in [.eslintrc](https://github.com/ethereum/remix-project/blob/master/apps/remix-ide/.eslintrc).
-- `ES6 class` rather than ES5 to create class.
-- CSS declaration using `csjs-inject`.
-- CSS files: 
-
-  **if** the CSS section of an UI component is too important, CSS declarations should be put in a different file and in a different folder.
-  
-  The folder should be named `styles` and the file should be named with the extension `-styles.css`.
-  
-  e.g: `file-explorer.js` being an UI component `file-explorer-styles.css` is created in the `styles` folder right under `file-explorer.js`
-
-  **if** the CSS section of an UI component is rather limited it is preferable to put it in the corresponding JS file.
-  
-- HTML declaration using `yo-yo`.
-
-- A module trigger events using `event` property:
-  `self.event = new EventManager()`. 
-  Events can then be triggered:
-  `self.event.trigger('eventName', [param1, param2])`
-- `self._view` is the HTML view renderered by `yo-yo` in the `render` function.
-- `render()` this function should be called at the first rendering (make sure that the returned node element is put on the DOM), and should *not* by called again from outside the component.
-- `update()` call this function to update the DOM when the state of the component has changed (this function must be called after the initial call to `render()`).
-- for all functions / properties, prefixing by underscore (`_`) means the scope is private, and they should **not** be accessed not changed from outside the component.
-- constructor arguments: There is no fixed rule whether it is preferrable to use multiples arguments or a single option *{}* argument (or both).
-  We recommend: 
-    - use a specific slot for **obligatory** arguments and/or for complex arguments (meaning not boolean, not string, etc...).
-    - put arguments in an option *{}* for non critical and for optionnal arguments.
-    - if a component has more than 4/5 parameters, it is recommended to find a way to group some in one or more *opt* arguments.
-  
-- look them up, discuss them, update them.
-    
-## Module Definition (example)
-```js
-// user-card.js
-var yo = require('yo-yo')
-var csjs = require('csjs-inject')
-var EventManager = require('remix-lib').EventManager
-
-var css = csjs`
-  .userCard        {
-    position       : relative;
-    box-sizing     : border-box;
-    display        : flex;
-    flex-direction : column;
-    align-items    : center;
-    border         : 1px solid black;
-    width          : 400px;
-    padding        : 50px;  
-  }
-  .clearFunds { background-color: lightblue; }
-`
-
-class UserCard {
-  constructor (api, events, opts = {}) {
-    var self = this
-
-    self.event = new EventManager()
-    self.opts = opts
-    self._api = api
-    self._consumedEvents = events
-    self._view = undefined
-    
-    events.funds.register('fundsChanged', function (amount) {
-      if (amount < self.state._funds) self.state.totalSpend += self.state._funds - amount
-      self.state._funds = amount
-      self.render()
-    })
-    self.event.trigger('eventName', [param1, param2])
-  }
-  render () {
-    var self = this
-    var view = yo`
-      <div class=${css.userCard}>
-        <h1> @${self.state._nickname} </h1>
-        <h2> Welcome, ${self.state.title || ''} ${self.state.name || 'anonymous'} ${self.state.surname} </h2>
-        <ul> <li> User Funds: $${self.state._funds} </li> </ul>
-        <ul> <li> Spent Funds: $${self.state.totalSpend} </li> </ul>
-        <button class=${css.clearFunds} onclick=${e=>self._spendAll.call(self, e)}> spend all funds </button>
-      </div>
-    `
-    if (!self._view) {
-      self._view = view
-    }
-    return self._view
-  }
-  update () {
-    yo.update(this._view, this.render())
-  }
-  setNickname (name) {
-    this._nickname = name
-  }
-  getNickname () {
-    var self = this
-    return `@${self.state._nickname}`
-  }
-  getFullName () {
-    var self = this
-    return `${self.state.title} ${self.state.name} ${self.state.surname}`
-  }
-  _spendAll (event) {
-    var self = this
-    self._appAPI.clearUserFunds()
-  }
-  _constraint (msg) { throw new Error(msg) }
-}
-
-module.exports = UserCard
-```
-## Module Usage (example)
-```js
-/*****************************************************************************/
-// 1. SETUP CONTEXT
-var EventManager = require('remix-lib').EventManager
-var funds = { event: new EventManager() }
-var userfunds = 15
-function getUserFunds () { return userfunds }
-function clearUserFunds () {
-  var spent = userfunds
-  userfunds = 0
-  console.log(`all funds of ${usercard.getFullName()} were spent.`)
-  funds.event.trigger('fundsChanged', [userfunds])
-  return spent
-}
-setInterval(function () {
-  userfunds++
-  funds.event.trigger('fundsChanged', [userfunds])
-}, 100)
-
-/*****************************************************************************/
-// 2. EXAMPLE USAGE
-var UserCard = require('./user-card')
-
-var usercard = new UserCard(
-  { getUserFunds, clearUserFunds }, 
-  { funds: funds.event },
-  {
-    title: 'Dr.',
-    name: 'John',
-    surname: 'Doe',
-    nickname: 'johndoe99'
-  })
-
-var el = usercard.render()
-document.body.appendChild(el)
-setTimeout(function () {
-  userCard.setNickname('new name') 
-  usercard.update()
-}, 5000)
-
-```