From be64493582d06758c562ec8b3b97260a477edb4d Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Sun, 23 Aug 2020 17:42:34 +0100 Subject: [PATCH 01/63] scaffold react lib --- libs/debugger-ui/.babelrc | 4 + libs/debugger-ui/.eslintrc | 248 ++++++++++++++++++ libs/debugger-ui/README.md | 7 + libs/debugger-ui/babel-jest.config.json | 14 + libs/debugger-ui/jest.config.js | 12 + libs/debugger-ui/src/index.ts | 1 + libs/debugger-ui/src/lib/debugger-ui.css | 0 libs/debugger-ui/src/lib/debugger-ui.spec.tsx | 11 + libs/debugger-ui/src/lib/debugger-ui.tsx | 246 +++++++++++++++++ libs/debugger-ui/tsconfig.json | 19 ++ libs/debugger-ui/tsconfig.lib.json | 13 + libs/debugger-ui/tsconfig.spec.json | 15 ++ nx.json | 3 + package.json | 9 +- tsconfig.json | 3 +- workspace.json | 2 +- 16 files changed, 603 insertions(+), 4 deletions(-) create mode 100644 libs/debugger-ui/.babelrc create mode 100644 libs/debugger-ui/.eslintrc create mode 100644 libs/debugger-ui/README.md create mode 100644 libs/debugger-ui/babel-jest.config.json create mode 100644 libs/debugger-ui/jest.config.js create mode 100644 libs/debugger-ui/src/index.ts create mode 100644 libs/debugger-ui/src/lib/debugger-ui.css create mode 100644 libs/debugger-ui/src/lib/debugger-ui.spec.tsx create mode 100644 libs/debugger-ui/src/lib/debugger-ui.tsx create mode 100644 libs/debugger-ui/tsconfig.json create mode 100644 libs/debugger-ui/tsconfig.lib.json create mode 100644 libs/debugger-ui/tsconfig.spec.json diff --git a/libs/debugger-ui/.babelrc b/libs/debugger-ui/.babelrc new file mode 100644 index 00000000000..09d67939cc9 --- /dev/null +++ b/libs/debugger-ui/.babelrc @@ -0,0 +1,4 @@ +{ + "presets": ["@nrwl/react/babel"], + "plugins": [] +} diff --git a/libs/debugger-ui/.eslintrc b/libs/debugger-ui/.eslintrc new file mode 100644 index 00000000000..5fdec107302 --- /dev/null +++ b/libs/debugger-ui/.eslintrc @@ -0,0 +1,248 @@ +{ + "rules": { + "array-callback-return": "warn", + "dot-location": ["warn", "property"], + "eqeqeq": ["warn", "smart"], + "new-parens": "warn", + "no-caller": "warn", + "no-cond-assign": ["warn", "except-parens"], + "no-const-assign": "warn", + "no-control-regex": "warn", + "no-delete-var": "warn", + "no-dupe-args": "warn", + "no-dupe-keys": "warn", + "no-duplicate-case": "warn", + "no-empty-character-class": "warn", + "no-empty-pattern": "warn", + "no-eval": "warn", + "no-ex-assign": "warn", + "no-extend-native": "warn", + "no-extra-bind": "warn", + "no-extra-label": "warn", + "no-fallthrough": "warn", + "no-func-assign": "warn", + "no-implied-eval": "warn", + "no-invalid-regexp": "warn", + "no-iterator": "warn", + "no-label-var": "warn", + "no-labels": ["warn", { "allowLoop": true, "allowSwitch": false }], + "no-lone-blocks": "warn", + "no-loop-func": "warn", + "no-mixed-operators": [ + "warn", + { + "groups": [ + ["&", "|", "^", "~", "<<", ">>", ">>>"], + ["==", "!=", "===", "!==", ">", ">=", "<", "<="], + ["&&", "||"], + ["in", "instanceof"] + ], + "allowSamePrecedence": false + } + ], + "no-multi-str": "warn", + "no-native-reassign": "warn", + "no-negated-in-lhs": "warn", + "no-new-func": "warn", + "no-new-object": "warn", + "no-new-symbol": "warn", + "no-new-wrappers": "warn", + "no-obj-calls": "warn", + "no-octal": "warn", + "no-octal-escape": "warn", + "no-redeclare": "warn", + "no-regex-spaces": "warn", + "no-restricted-syntax": ["warn", "WithStatement"], + "no-script-url": "warn", + "no-self-assign": "warn", + "no-self-compare": "warn", + "no-sequences": "warn", + "no-shadow-restricted-names": "warn", + "no-sparse-arrays": "warn", + "no-template-curly-in-string": "warn", + "no-this-before-super": "warn", + "no-throw-literal": "warn", + "no-restricted-globals": [ + "error", + "addEventListener", + "blur", + "close", + "closed", + "confirm", + "defaultStatus", + "defaultstatus", + "event", + "external", + "find", + "focus", + "frameElement", + "frames", + "history", + "innerHeight", + "innerWidth", + "length", + "location", + "locationbar", + "menubar", + "moveBy", + "moveTo", + "name", + "onblur", + "onerror", + "onfocus", + "onload", + "onresize", + "onunload", + "open", + "opener", + "opera", + "outerHeight", + "outerWidth", + "pageXOffset", + "pageYOffset", + "parent", + "print", + "removeEventListener", + "resizeBy", + "resizeTo", + "screen", + "screenLeft", + "screenTop", + "screenX", + "screenY", + "scroll", + "scrollbars", + "scrollBy", + "scrollTo", + "scrollX", + "scrollY", + "self", + "status", + "statusbar", + "stop", + "toolbar", + "top" + ], + "no-unexpected-multiline": "warn", + "no-unreachable": "warn", + "no-unused-expressions": [ + "error", + { + "allowShortCircuit": true, + "allowTernary": true, + "allowTaggedTemplates": true + } + ], + "no-unused-labels": "warn", + "no-useless-computed-key": "warn", + "no-useless-concat": "warn", + "no-useless-escape": "warn", + "no-useless-rename": [ + "warn", + { + "ignoreDestructuring": false, + "ignoreImport": false, + "ignoreExport": false + } + ], + "no-with": "warn", + "no-whitespace-before-property": "warn", + "react-hooks/exhaustive-deps": "warn", + "require-yield": "warn", + "rest-spread-spacing": ["warn", "never"], + "strict": ["warn", "never"], + "unicode-bom": ["warn", "never"], + "use-isnan": "warn", + "valid-typeof": "warn", + "no-restricted-properties": [ + "error", + { + "object": "require", + "property": "ensure", + "message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting" + }, + { + "object": "System", + "property": "import", + "message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting" + } + ], + "getter-return": "warn", + "import/first": "error", + "import/no-amd": "error", + "import/no-webpack-loader-syntax": "error", + "react/forbid-foreign-prop-types": ["warn", { "allowInPropTypes": true }], + "react/jsx-no-comment-textnodes": "warn", + "react/jsx-no-duplicate-props": "warn", + "react/jsx-no-target-blank": "warn", + "react/jsx-no-undef": "error", + "react/jsx-pascal-case": ["warn", { "allowAllCaps": true, "ignore": [] }], + "react/jsx-uses-react": "warn", + "react/jsx-uses-vars": "warn", + "react/no-danger-with-children": "warn", + "react/no-direct-mutation-state": "warn", + "react/no-is-mounted": "warn", + "react/no-typos": "error", + "react/react-in-jsx-scope": "error", + "react/require-render-return": "error", + "react/style-prop-object": "warn", + "react/jsx-no-useless-fragment": "warn", + "jsx-a11y/accessible-emoji": "warn", + "jsx-a11y/alt-text": "warn", + "jsx-a11y/anchor-has-content": "warn", + "jsx-a11y/anchor-is-valid": [ + "warn", + { "aspects": ["noHref", "invalidHref"] } + ], + "jsx-a11y/aria-activedescendant-has-tabindex": "warn", + "jsx-a11y/aria-props": "warn", + "jsx-a11y/aria-proptypes": "warn", + "jsx-a11y/aria-role": "warn", + "jsx-a11y/aria-unsupported-elements": "warn", + "jsx-a11y/heading-has-content": "warn", + "jsx-a11y/iframe-has-title": "warn", + "jsx-a11y/img-redundant-alt": "warn", + "jsx-a11y/no-access-key": "warn", + "jsx-a11y/no-distracting-elements": "warn", + "jsx-a11y/no-redundant-roles": "warn", + "jsx-a11y/role-has-required-aria-props": "warn", + "jsx-a11y/role-supports-aria-props": "warn", + "jsx-a11y/scope": "warn", + "react-hooks/rules-of-hooks": "error", + "default-case": "off", + "no-dupe-class-members": "off", + "no-undef": "off", + "@typescript-eslint/consistent-type-assertions": "warn", + "no-array-constructor": "off", + "@typescript-eslint/no-array-constructor": "warn", + "@typescript-eslint/no-namespace": "error", + "no-use-before-define": "off", + "@typescript-eslint/no-use-before-define": [ + "warn", + { + "functions": false, + "classes": false, + "variables": false, + "typedefs": false + } + ], + "no-unused-vars": "off", + "@typescript-eslint/no-unused-vars": [ + "warn", + { "args": "none", "ignoreRestSiblings": true } + ], + "no-useless-constructor": "off", + "@typescript-eslint/no-useless-constructor": "warn" + }, + "env": { + "browser": true, + "commonjs": true, + "es6": true, + "jest": true, + "node": true + }, + "settings": { "react": { "version": "detect" } }, + "plugins": ["import", "jsx-a11y", "react", "react-hooks"], + "extends": ["../../.eslintrc"], + "ignorePatterns": ["!**/*"] +} diff --git a/libs/debugger-ui/README.md b/libs/debugger-ui/README.md new file mode 100644 index 00000000000..5af7ec2d256 --- /dev/null +++ b/libs/debugger-ui/README.md @@ -0,0 +1,7 @@ +# debugger-ui + +This library was generated with [Nx](https://nx.dev). + +## Running unit tests + +Run `nx test debugger-ui` to execute the unit tests via [Jest](https://jestjs.io). diff --git a/libs/debugger-ui/babel-jest.config.json b/libs/debugger-ui/babel-jest.config.json new file mode 100644 index 00000000000..bf04d5f81f7 --- /dev/null +++ b/libs/debugger-ui/babel-jest.config.json @@ -0,0 +1,14 @@ +{ + "presets": [ + [ + "@babel/preset-env", + { + "targets": { + "node": "current" + } + } + ], + "@babel/preset-typescript", + "@babel/preset-react" + ] +} diff --git a/libs/debugger-ui/jest.config.js b/libs/debugger-ui/jest.config.js new file mode 100644 index 00000000000..7b3def7c766 --- /dev/null +++ b/libs/debugger-ui/jest.config.js @@ -0,0 +1,12 @@ +module.exports = { + name: 'debugger-ui', + preset: '../../jest.config.js', + transform: { + '^.+\\.[tj]sx?$': [ + 'babel-jest', + { cwd: __dirname, configFile: './babel-jest.config.json' } + ] + }, + moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'], + coverageDirectory: '../../coverage/libs/debugger-ui' +}; diff --git a/libs/debugger-ui/src/index.ts b/libs/debugger-ui/src/index.ts new file mode 100644 index 00000000000..a62926968c6 --- /dev/null +++ b/libs/debugger-ui/src/index.ts @@ -0,0 +1 @@ +export * from './lib/debugger-ui'; diff --git a/libs/debugger-ui/src/lib/debugger-ui.css b/libs/debugger-ui/src/lib/debugger-ui.css new file mode 100644 index 00000000000..e69de29bb2d diff --git a/libs/debugger-ui/src/lib/debugger-ui.spec.tsx b/libs/debugger-ui/src/lib/debugger-ui.spec.tsx new file mode 100644 index 00000000000..48e63a8426e --- /dev/null +++ b/libs/debugger-ui/src/lib/debugger-ui.spec.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { render } from '@testing-library/react'; + +import DebuggerUi from './debugger-ui'; + +describe(' DebuggerUi', () => { + it('should render successfully', () => { + const { baseElement } = render(); + expect(baseElement).toBeTruthy(); + }); +}); diff --git a/libs/debugger-ui/src/lib/debugger-ui.tsx b/libs/debugger-ui/src/lib/debugger-ui.tsx new file mode 100644 index 00000000000..6e43dd7f33e --- /dev/null +++ b/libs/debugger-ui/src/lib/debugger-ui.tsx @@ -0,0 +1,246 @@ +import React from 'react' +import * as EventManager from '../../../../apps/remix-ide/src/lib/events' + +const { useState } = React +const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => { + const [state, setState] = useState({ + debuggerModule, + fetchContractAndCompile, + event + }) + return ( +
+

Welcome to debugger-ui!

+
+ ) +} + +export default DebuggerUi + +var TxBrowser = require('./debuggerUI/TxBrowser') +var StepManagerUI = require('./debuggerUI/StepManager') +var VmDebugger = require('./debuggerUI/VmDebugger') +var toaster = require('../../ui/tooltip') + +var Debugger = require('@remix-project/remix-debug').TransactionDebugger + +var SourceHighlighter = require('../../editor/sourceHighlighter') + +var globalRegistry = require('../../../global/registry') + +var remixLib = require('@remix-project/remix-lib') + +var init = remixLib.init + +var yo = require('yo-yo') +var csjs = require('csjs-inject') + +var css = csjs` + .statusMessage { + margin-left: 15px; + } +` + +class DebuggerUI { + + constructor (debuggerModule, component, fetchContractAndCompile) { + this.fetchContractAndCompile = fetchContractAndCompile + this.event = new EventManager() + + this.isActive = false + + this.sourceHighlighter = new SourceHighlighter() + + this.startTxBrowser() + this.stepManager = null + + this.statusMessage = '' + this.currentReceipt + + this.view + + component.appendChild(this.render()) + + this.setEditor() + } + + setEditor () { + this.editor = globalRegistry.get('editor').api + + this.editor.event.register('breakpointCleared', (fileName, row) => { + if (this.debugger) this.debugger.breakPointManager.remove({fileName: fileName, row: row}) + }) + + this.editor.event.register('breakpointAdded', (fileName, row) => { + if (this.debugger) this.debugger.breakPointManager.add({fileName: fileName, row: row}) + }) + + this.editor.event.register('contentChanged', () => { + if (this.debugger) this.debugger.unload() + }) + } + + listenToEvents () { + if (!this.debugger) return + + this.debugger.event.register('debuggerStatus', async (isActive) => { + await this.debuggerModule.call('editor', 'discardHighlight') + this.isActive = isActive + }) + + this.debugger.event.register('newSourceLocation', async (lineColumnPos, rawLocation) => { + const contracts = await this.fetchContractAndCompile( + this.currentReceipt.contractAddress || this.currentReceipt.to, + this.currentReceipt) + if (contracts) { + const path = contracts.getSourceName(rawLocation.file) + if (path) { + await this.debuggerModule.call('editor', 'discardHighlight') + await this.debuggerModule.call('editor', 'highlight', lineColumnPos, path) + } + } + }) + + this.debugger.event.register('debuggerUnloaded', () => this.unLoad()) + } + + startTxBrowser () { + let txBrowser = new TxBrowser() + this.txBrowser = txBrowser + + txBrowser.event.register('requestDebug', (blockNumber, txNumber, tx) => { + if (this.debugger) this.debugger.unload() + this.startDebugging(blockNumber, txNumber, tx) + }) + + txBrowser.event.register('unloadRequested', this, (blockNumber, txIndex, tx) => { + if (this.debugger) this.debugger.unload() + }) + } + + isDebuggerActive () { + return this.isActive + } + + getDebugWeb3 () { + return new Promise((resolve, reject) => { + this.debuggerModule.blockchain.detectNetwork((error, network) => { + let web3 + if (error || !network) { + web3 = init.web3DebugNode(this.debuggerModule.blockchain.web3()) + } else { + const webDebugNode = init.web3DebugNode(network.name) + web3 = !webDebugNode ? this.debuggerModule.blockchain.web3() : webDebugNode + } + init.extendWeb3(web3) + resolve(web3) + }) + }) + } + + async startDebugging (blockNumber, txNumber, tx) { + if (this.debugger) this.unLoad() + + let web3 = await this.getDebugWeb3() + this.currentReceipt = await web3.eth.getTransactionReceipt(txNumber) + this.debugger = new Debugger({ + web3, + offsetToLineColumnConverter: globalRegistry.get('offsettolinecolumnconverter').api, + compilationResult: async (address) => { + try { + return await this.fetchContractAndCompile(address, this.currentReceipt) + } catch (e) { + console.error(e) + } + return null + } + }) + + this.listenToEvents() + this.debugger.debug(blockNumber, txNumber, tx, () => { + this.stepManager = new StepManagerUI(this.debugger.step_manager) + this.vmDebugger = new VmDebugger(this.debugger.vmDebuggerLogic) + this.txBrowser.setState({ blockNumber, txNumber, debugging: true }) + this.renderDebugger() + }).catch((error) => { + toaster(error) + this.unLoad() + }) + } + + getTrace (hash) { + return new Promise(async (resolve, reject) => { + const web3 = await this.getDebugWeb3() + + this.currentReceipt = await web3.eth.getTransactionReceipt(hash) + const debug = new Debugger({ + web3, + offsetToLineColumnConverter: globalRegistry.get('offsettolinecolumnconverter').api, + compilationResult: async (address) => { + try { + return await this.fetchContractAndCompile(address, this.currentReceipt) + } catch (e) { + console.error(e) + } + return null + } + }) + debug.debugger.traceManager.traceRetriever.getTrace(hash, (error, trace) => { + if (error) return reject(error) + resolve(trace) + }) + }) + } + + debug (txHash) { + this.startDebugging(null, txHash, null) + } + + render () { + this.debuggerPanelsView = yo`
` + this.debuggerHeadPanelsView = yo`
` + this.stepManagerView = yo`
` + + var view = yo` +
+
+ ${this.txBrowser.render()} + ${this.stepManagerView} + ${this.debuggerHeadPanelsView} +
+
${this.statusMessage}
+ ${this.debuggerPanelsView} +
+ ` + if (!this.view) { + this.view = view + } + return view + } + + async unLoad () { + yo.update(this.debuggerHeadPanelsView, yo`
`) + yo.update(this.debuggerPanelsView, yo`
`) + yo.update(this.stepManagerView, yo`
`) + if (this.vmDebugger) this.vmDebugger.remove() + if (this.stepManager) this.stepManager.remove() + if (this.txBrowser) this.txBrowser.setState({debugging: false}) + this.vmDebugger = null + this.stepManager = null + if (this.debugger) delete this.debugger + this.event.trigger('traceUnloaded') + } + + async deleteHighlights () { + await this.debuggerModule.call('editor', 'discardHighlight') + } + + renderDebugger () { + yo.update(this.debuggerHeadPanelsView, this.vmDebugger.renderHead()) + yo.update(this.debuggerPanelsView, this.vmDebugger.render()) + yo.update(this.stepManagerView, this.stepManager.render()) + } + +} + +module.exports = DebuggerUI diff --git a/libs/debugger-ui/tsconfig.json b/libs/debugger-ui/tsconfig.json new file mode 100644 index 00000000000..4fbd4df206c --- /dev/null +++ b/libs/debugger-ui/tsconfig.json @@ -0,0 +1,19 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "jsx": "react", + "allowJs": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ] +} diff --git a/libs/debugger-ui/tsconfig.lib.json b/libs/debugger-ui/tsconfig.lib.json new file mode 100644 index 00000000000..71adee65df4 --- /dev/null +++ b/libs/debugger-ui/tsconfig.lib.json @@ -0,0 +1,13 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "types": ["node"] + }, + "files": [ + "../../node_modules/@nrwl/react/typings/cssmodule.d.ts", + "../../node_modules/@nrwl/react/typings/image.d.ts" + ], + "exclude": ["**/*.spec.ts", "**/*.spec.tsx"], + "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"] +} diff --git a/libs/debugger-ui/tsconfig.spec.json b/libs/debugger-ui/tsconfig.spec.json new file mode 100644 index 00000000000..559410b96af --- /dev/null +++ b/libs/debugger-ui/tsconfig.spec.json @@ -0,0 +1,15 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "module": "commonjs", + "types": ["jest", "node"] + }, + "include": [ + "**/*.spec.ts", + "**/*.spec.tsx", + "**/*.spec.js", + "**/*.spec.jsx", + "**/*.d.ts" + ] +} diff --git a/nx.json b/nx.json index 05e2be65487..fef6f1a9fbc 100644 --- a/nx.json +++ b/nx.json @@ -66,6 +66,9 @@ }, "remixd": { "tags": [] + }, + "debugger-ui": { + "tags": [] } } } diff --git a/package.json b/package.json index 3a7af0876c4..754c9a76a5f 100644 --- a/package.json +++ b/package.json @@ -151,7 +151,9 @@ "commander": "^2.20.3", "fs-extra": "^3.0.1", "isbinaryfile": "^3.0.2", - "ws": "^7.3.0" + "ws": "^7.3.0", + "react": "16.13.1", + "react-dom": "16.13.1" }, "devDependencies": { "@babel/core": "^7.4.5", @@ -271,6 +273,9 @@ "eslint-plugin-promise": "4.2.1", "eslint-plugin-standard": "4.0.1", "nodemon": "^2.0.4", - "@types/jest": "25.1.4" + "@types/jest": "25.1.4", + "@babel/preset-typescript": "7.9.0", + "@babel/preset-react": "7.9.4", + "babel-jest": "25.1.0" } } diff --git a/tsconfig.json b/tsconfig.json index 105a070a539..6ddfa7202b2 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -24,7 +24,8 @@ "@remix-project/remix-solidity": ["dist/libs/remix-solidity/index.js"], "@remix-project/remix-tests": ["dist/libs/remix-tests/src/index.js"], "@remix-project/remix-url-resolver": ["dist/libs/remix-url-resolver/index.js"], - "@remix-project/remixd": ["dist/libs/remixd/index.js"] + "@remix-project/remixd": ["dist/libs/remixd/index.js"], + "@remix-project/debugger-ui": ["libs/debugger-ui/src/index.ts"] } }, "exclude": ["node_modules", "tmp"] diff --git a/workspace.json b/workspace.json index 505cf5e9878..6ab832657b8 100644 --- a/workspace.json +++ b/workspace.json @@ -492,7 +492,7 @@ "builder": "@nrwl/node:package", "options": { "outputPath": "dist/libs/remixd", - "tsConfig": "libs/remixd/tsconfig.lib.json", + "tsConfig": "libs/remixd/tsconfig.lib.js on", "packageJson": "libs/remixd/package.json", "main": "libs/remixd/src/index.ts", "assets": ["libs/remixd/*.md", "libs/remixd/src/origins.json"] From 1d48a9e8b7c7c9dba358614754f6ec20902d730c Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Mon, 24 Aug 2020 18:02:42 +0100 Subject: [PATCH 02/63] Refactor slider into react lib --- apps/remix-ide/.babelrc | 2 +- .../src/app/tabs/debugger/debuggerUI.js | 4 + .../tabs/debugger/debuggerUI/StepManager.js | 17 +- babel.config.js | 1 + libs/debugger-ui/src/index.ts | 5 +- libs/debugger-ui/src/lib/debugger-ui.tsx | 239 +----------------- libs/debugger-ui/src/lib/slider.tsx | 65 +++++ 7 files changed, 85 insertions(+), 248 deletions(-) create mode 100644 libs/debugger-ui/src/lib/slider.tsx diff --git a/apps/remix-ide/.babelrc b/apps/remix-ide/.babelrc index 1320b9a3272..2b7bafa5fa4 100644 --- a/apps/remix-ide/.babelrc +++ b/apps/remix-ide/.babelrc @@ -1,3 +1,3 @@ { - "presets": ["@babel/preset-env"] + "presets": ["@babel/preset-env", "@babel/preset-react"] } diff --git a/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js b/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js index dc3ce73c57b..1614fb4054b 100644 --- a/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js +++ b/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js @@ -1,3 +1,6 @@ +import React from 'react'; +import ReactDOM from 'react-dom' +import { Slider } from '@remix-project/debugger-ui' var TxBrowser = require('./debuggerUI/TxBrowser') var StepManagerUI = require('./debuggerUI/StepManager') var VmDebugger = require('./debuggerUI/VmDebugger') @@ -272,6 +275,7 @@ class DebuggerUI { yo.update(this.debuggerHeadPanelsView, this.vmDebugger.renderHead()) yo.update(this.debuggerPanelsView, this.vmDebugger.render()) yo.update(this.stepManagerView, this.stepManager.render()) + ReactDOM.render(, document.getElementById('slider-ui')) } } diff --git a/apps/remix-ide/src/app/tabs/debugger/debuggerUI/StepManager.js b/apps/remix-ide/src/app/tabs/debugger/debuggerUI/StepManager.js index eef36e17784..4d9cef52159 100644 --- a/apps/remix-ide/src/app/tabs/debugger/debuggerUI/StepManager.js +++ b/apps/remix-ide/src/app/tabs/debugger/debuggerUI/StepManager.js @@ -2,7 +2,7 @@ var EventManager = require('../../../../lib/events') var yo = require('yo-yo') var ButtonNavigator = require('./ButtonNavigator') -var Slider = require('./Slider') +// var Slider = require('./Slider') function StepManager (stepManager) { this.event = new EventManager() @@ -13,9 +13,8 @@ function StepManager (stepManager) { } StepManager.prototype.startSlider = function () { - this.slider = new Slider() - this.slider.event.register('sliderMoved', this.stepManager.jumpTo.bind(this.stepManager)) - this.stepManager.event.register('traceLengthChanged', this.slider.setSliderLength.bind(this.slider)) + this.event.register('sliderMoved', this.stepManager.jumpTo.bind(this.stepManager)) + // this.stepManager.event.register('traceLengthChanged', this.slider.setSliderLength.bind(this.slider)) } StepManager.prototype.startButtonNavigator = function () { @@ -34,16 +33,16 @@ StepManager.prototype.startButtonNavigator = function () { } StepManager.prototype.updateStep = function (step, stepState, jumpOutDisabled) { - if (!this.slider) return - this.slider.setValue(step) + // if (!this.slider) return + // this.slider.setValue(step) this.buttonNavigator.stepChanged(stepState, jumpOutDisabled) this.event.trigger('stepChanged', [step]) } StepManager.prototype.remove = function () { // used to stop listenning on event. bad and should be "refactored" - this.slider.view = null - this.slider = null + // this.slider.view = null + // this.slider = null this.buttonNavigator.view = null this.buttonNavigator = null } @@ -51,7 +50,7 @@ StepManager.prototype.remove = function () { StepManager.prototype.render = function () { return yo`
- ${this.slider.render()} +
${this.buttonNavigator.render()}
` } diff --git a/babel.config.js b/babel.config.js index 5215d169ac3..bc65f8695f7 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,3 +1,4 @@ module.exports = { + "presets": ["@babel/preset-react"], "plugins": ["@babel/plugin-transform-modules-commonjs"] } \ No newline at end of file diff --git a/libs/debugger-ui/src/index.ts b/libs/debugger-ui/src/index.ts index a62926968c6..fcfc90d0ab8 100644 --- a/libs/debugger-ui/src/index.ts +++ b/libs/debugger-ui/src/index.ts @@ -1 +1,4 @@ -export * from './lib/debugger-ui'; +import Slider from './lib/slider' +import * as debuggerUI from './lib/debugger-ui' + +export { Slider, debuggerUI } diff --git a/libs/debugger-ui/src/lib/debugger-ui.tsx b/libs/debugger-ui/src/lib/debugger-ui.tsx index 6e43dd7f33e..7340e4d2d45 100644 --- a/libs/debugger-ui/src/lib/debugger-ui.tsx +++ b/libs/debugger-ui/src/lib/debugger-ui.tsx @@ -1,13 +1,6 @@ import React from 'react' -import * as EventManager from '../../../../apps/remix-ide/src/lib/events' -const { useState } = React -const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => { - const [state, setState] = useState({ - debuggerModule, - fetchContractAndCompile, - event - }) +const DebuggerUI = () => { return (

Welcome to debugger-ui!

@@ -15,232 +8,4 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => { ) } -export default DebuggerUi - -var TxBrowser = require('./debuggerUI/TxBrowser') -var StepManagerUI = require('./debuggerUI/StepManager') -var VmDebugger = require('./debuggerUI/VmDebugger') -var toaster = require('../../ui/tooltip') - -var Debugger = require('@remix-project/remix-debug').TransactionDebugger - -var SourceHighlighter = require('../../editor/sourceHighlighter') - -var globalRegistry = require('../../../global/registry') - -var remixLib = require('@remix-project/remix-lib') - -var init = remixLib.init - -var yo = require('yo-yo') -var csjs = require('csjs-inject') - -var css = csjs` - .statusMessage { - margin-left: 15px; - } -` - -class DebuggerUI { - - constructor (debuggerModule, component, fetchContractAndCompile) { - this.fetchContractAndCompile = fetchContractAndCompile - this.event = new EventManager() - - this.isActive = false - - this.sourceHighlighter = new SourceHighlighter() - - this.startTxBrowser() - this.stepManager = null - - this.statusMessage = '' - this.currentReceipt - - this.view - - component.appendChild(this.render()) - - this.setEditor() - } - - setEditor () { - this.editor = globalRegistry.get('editor').api - - this.editor.event.register('breakpointCleared', (fileName, row) => { - if (this.debugger) this.debugger.breakPointManager.remove({fileName: fileName, row: row}) - }) - - this.editor.event.register('breakpointAdded', (fileName, row) => { - if (this.debugger) this.debugger.breakPointManager.add({fileName: fileName, row: row}) - }) - - this.editor.event.register('contentChanged', () => { - if (this.debugger) this.debugger.unload() - }) - } - - listenToEvents () { - if (!this.debugger) return - - this.debugger.event.register('debuggerStatus', async (isActive) => { - await this.debuggerModule.call('editor', 'discardHighlight') - this.isActive = isActive - }) - - this.debugger.event.register('newSourceLocation', async (lineColumnPos, rawLocation) => { - const contracts = await this.fetchContractAndCompile( - this.currentReceipt.contractAddress || this.currentReceipt.to, - this.currentReceipt) - if (contracts) { - const path = contracts.getSourceName(rawLocation.file) - if (path) { - await this.debuggerModule.call('editor', 'discardHighlight') - await this.debuggerModule.call('editor', 'highlight', lineColumnPos, path) - } - } - }) - - this.debugger.event.register('debuggerUnloaded', () => this.unLoad()) - } - - startTxBrowser () { - let txBrowser = new TxBrowser() - this.txBrowser = txBrowser - - txBrowser.event.register('requestDebug', (blockNumber, txNumber, tx) => { - if (this.debugger) this.debugger.unload() - this.startDebugging(blockNumber, txNumber, tx) - }) - - txBrowser.event.register('unloadRequested', this, (blockNumber, txIndex, tx) => { - if (this.debugger) this.debugger.unload() - }) - } - - isDebuggerActive () { - return this.isActive - } - - getDebugWeb3 () { - return new Promise((resolve, reject) => { - this.debuggerModule.blockchain.detectNetwork((error, network) => { - let web3 - if (error || !network) { - web3 = init.web3DebugNode(this.debuggerModule.blockchain.web3()) - } else { - const webDebugNode = init.web3DebugNode(network.name) - web3 = !webDebugNode ? this.debuggerModule.blockchain.web3() : webDebugNode - } - init.extendWeb3(web3) - resolve(web3) - }) - }) - } - - async startDebugging (blockNumber, txNumber, tx) { - if (this.debugger) this.unLoad() - - let web3 = await this.getDebugWeb3() - this.currentReceipt = await web3.eth.getTransactionReceipt(txNumber) - this.debugger = new Debugger({ - web3, - offsetToLineColumnConverter: globalRegistry.get('offsettolinecolumnconverter').api, - compilationResult: async (address) => { - try { - return await this.fetchContractAndCompile(address, this.currentReceipt) - } catch (e) { - console.error(e) - } - return null - } - }) - - this.listenToEvents() - this.debugger.debug(blockNumber, txNumber, tx, () => { - this.stepManager = new StepManagerUI(this.debugger.step_manager) - this.vmDebugger = new VmDebugger(this.debugger.vmDebuggerLogic) - this.txBrowser.setState({ blockNumber, txNumber, debugging: true }) - this.renderDebugger() - }).catch((error) => { - toaster(error) - this.unLoad() - }) - } - - getTrace (hash) { - return new Promise(async (resolve, reject) => { - const web3 = await this.getDebugWeb3() - - this.currentReceipt = await web3.eth.getTransactionReceipt(hash) - const debug = new Debugger({ - web3, - offsetToLineColumnConverter: globalRegistry.get('offsettolinecolumnconverter').api, - compilationResult: async (address) => { - try { - return await this.fetchContractAndCompile(address, this.currentReceipt) - } catch (e) { - console.error(e) - } - return null - } - }) - debug.debugger.traceManager.traceRetriever.getTrace(hash, (error, trace) => { - if (error) return reject(error) - resolve(trace) - }) - }) - } - - debug (txHash) { - this.startDebugging(null, txHash, null) - } - - render () { - this.debuggerPanelsView = yo`
` - this.debuggerHeadPanelsView = yo`
` - this.stepManagerView = yo`
` - - var view = yo` -
-
- ${this.txBrowser.render()} - ${this.stepManagerView} - ${this.debuggerHeadPanelsView} -
-
${this.statusMessage}
- ${this.debuggerPanelsView} -
- ` - if (!this.view) { - this.view = view - } - return view - } - - async unLoad () { - yo.update(this.debuggerHeadPanelsView, yo`
`) - yo.update(this.debuggerPanelsView, yo`
`) - yo.update(this.stepManagerView, yo`
`) - if (this.vmDebugger) this.vmDebugger.remove() - if (this.stepManager) this.stepManager.remove() - if (this.txBrowser) this.txBrowser.setState({debugging: false}) - this.vmDebugger = null - this.stepManager = null - if (this.debugger) delete this.debugger - this.event.trigger('traceUnloaded') - } - - async deleteHighlights () { - await this.debuggerModule.call('editor', 'discardHighlight') - } - - renderDebugger () { - yo.update(this.debuggerHeadPanelsView, this.vmDebugger.renderHead()) - yo.update(this.debuggerPanelsView, this.vmDebugger.render()) - yo.update(this.stepManagerView, this.stepManager.render()) - } - -} - -module.exports = DebuggerUI +export default DebuggerUI diff --git a/libs/debugger-ui/src/lib/slider.tsx b/libs/debugger-ui/src/lib/slider.tsx new file mode 100644 index 00000000000..e9d2dc59e18 --- /dev/null +++ b/libs/debugger-ui/src/lib/slider.tsx @@ -0,0 +1,65 @@ +import React, { useState, useRef } from 'react' + +const Slider = ({ event }) => { + const [state, setState] = useState({ + max: null, + disabled: true, + previousValue: null, + currentValue: null + }) + const sliderRef = useRef(null) + + const setSliderLength = (length) => { + sliderRef.current.setAttribute('max', length - 1) + setState({ + ...state, + max: length - 1, + disabled: (length === 0) + }) + + if (state.disabled) { + sliderRef.current.setAttribute('disabled', true) + } else { + sliderRef.current.removeAttribute('disabled') + } + + setValue(0) + } + + const setValue = (value) => { + setState({ + ...state, + currentValue: value + }) + } + + const handleChange = (e) => { + const value = parseInt(e.target.value) + + if (value === state.previousValue) return + setState({ + ...state, + previousValue: value, + currentValue: value + }) + event.trigger('sliderMoved', [value]) + } + + return ( +
+ +
+ ) +} + +export default Slider From e55149f83da1c38b583790bc748b11add1e1ec9b Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Wed, 26 Aug 2020 16:55:34 +0100 Subject: [PATCH 03/63] Refactored slider, button-navigator, step-manager into react components. --- .../src/app/tabs/debugger/debuggerUI.js | 7 +- .../tabs/debugger/debuggerUI/StepManager.js | 17 ++-- libs/debugger-ui/src/index.ts | 5 +- .../lib/button-navigator/button-navigator.css | 22 ++++++ .../button-navigator.spec.tsx | 11 +++ .../lib/button-navigator/button-navigator.tsx | 78 +++++++++++++++++++ libs/debugger-ui/src/lib/slider.tsx | 65 ---------------- libs/debugger-ui/src/lib/slider/slider.css | 0 .../src/lib/slider/slider.spec.tsx | 11 +++ libs/debugger-ui/src/lib/slider/slider.tsx | 67 ++++++++++++++++ .../src/lib/step-manager/step-manager.css | 0 .../lib/step-manager/step-manager.spec.tsx | 11 +++ .../src/lib/step-manager/step-manager.tsx | 60 ++++++++++++++ 13 files changed, 274 insertions(+), 80 deletions(-) create mode 100644 libs/debugger-ui/src/lib/button-navigator/button-navigator.css create mode 100644 libs/debugger-ui/src/lib/button-navigator/button-navigator.spec.tsx create mode 100644 libs/debugger-ui/src/lib/button-navigator/button-navigator.tsx delete mode 100644 libs/debugger-ui/src/lib/slider.tsx create mode 100644 libs/debugger-ui/src/lib/slider/slider.css create mode 100644 libs/debugger-ui/src/lib/slider/slider.spec.tsx create mode 100644 libs/debugger-ui/src/lib/slider/slider.tsx create mode 100644 libs/debugger-ui/src/lib/step-manager/step-manager.css create mode 100644 libs/debugger-ui/src/lib/step-manager/step-manager.spec.tsx create mode 100644 libs/debugger-ui/src/lib/step-manager/step-manager.tsx diff --git a/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js b/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js index 1614fb4054b..96b2ca6280f 100644 --- a/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js +++ b/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom' -import { Slider } from '@remix-project/debugger-ui' +import { StepManager } from '@remix-project/debugger-ui' var TxBrowser = require('./debuggerUI/TxBrowser') var StepManagerUI = require('./debuggerUI/StepManager') var VmDebugger = require('./debuggerUI/VmDebugger') @@ -229,7 +229,7 @@ class DebuggerUI { render () { this.debuggerPanelsView = yo`
` this.debuggerHeadPanelsView = yo`
` - this.stepManagerView = yo`
` + this.stepManagerView = yo`
` var view = yo`
@@ -274,8 +274,7 @@ class DebuggerUI { renderDebugger () { yo.update(this.debuggerHeadPanelsView, this.vmDebugger.renderHead()) yo.update(this.debuggerPanelsView, this.vmDebugger.render()) - yo.update(this.stepManagerView, this.stepManager.render()) - ReactDOM.render(, document.getElementById('slider-ui')) + ReactDOM.render(, document.getElementById('stepManager-ui')) } } diff --git a/apps/remix-ide/src/app/tabs/debugger/debuggerUI/StepManager.js b/apps/remix-ide/src/app/tabs/debugger/debuggerUI/StepManager.js index 4d9cef52159..eef36e17784 100644 --- a/apps/remix-ide/src/app/tabs/debugger/debuggerUI/StepManager.js +++ b/apps/remix-ide/src/app/tabs/debugger/debuggerUI/StepManager.js @@ -2,7 +2,7 @@ var EventManager = require('../../../../lib/events') var yo = require('yo-yo') var ButtonNavigator = require('./ButtonNavigator') -// var Slider = require('./Slider') +var Slider = require('./Slider') function StepManager (stepManager) { this.event = new EventManager() @@ -13,8 +13,9 @@ function StepManager (stepManager) { } StepManager.prototype.startSlider = function () { - this.event.register('sliderMoved', this.stepManager.jumpTo.bind(this.stepManager)) - // this.stepManager.event.register('traceLengthChanged', this.slider.setSliderLength.bind(this.slider)) + this.slider = new Slider() + this.slider.event.register('sliderMoved', this.stepManager.jumpTo.bind(this.stepManager)) + this.stepManager.event.register('traceLengthChanged', this.slider.setSliderLength.bind(this.slider)) } StepManager.prototype.startButtonNavigator = function () { @@ -33,16 +34,16 @@ StepManager.prototype.startButtonNavigator = function () { } StepManager.prototype.updateStep = function (step, stepState, jumpOutDisabled) { - // if (!this.slider) return - // this.slider.setValue(step) + if (!this.slider) return + this.slider.setValue(step) this.buttonNavigator.stepChanged(stepState, jumpOutDisabled) this.event.trigger('stepChanged', [step]) } StepManager.prototype.remove = function () { // used to stop listenning on event. bad and should be "refactored" - // this.slider.view = null - // this.slider = null + this.slider.view = null + this.slider = null this.buttonNavigator.view = null this.buttonNavigator = null } @@ -50,7 +51,7 @@ StepManager.prototype.remove = function () { StepManager.prototype.render = function () { return yo`
-
+ ${this.slider.render()} ${this.buttonNavigator.render()}
` } diff --git a/libs/debugger-ui/src/index.ts b/libs/debugger-ui/src/index.ts index fcfc90d0ab8..3ac7983819a 100644 --- a/libs/debugger-ui/src/index.ts +++ b/libs/debugger-ui/src/index.ts @@ -1,4 +1,3 @@ -import Slider from './lib/slider' -import * as debuggerUI from './lib/debugger-ui' +import StepManager from './lib/step-manager/step-manager' -export { Slider, debuggerUI } +export { StepManager } diff --git a/libs/debugger-ui/src/lib/button-navigator/button-navigator.css b/libs/debugger-ui/src/lib/button-navigator/button-navigator.css new file mode 100644 index 00000000000..8990810a9ed --- /dev/null +++ b/libs/debugger-ui/src/lib/button-navigator/button-navigator.css @@ -0,0 +1,22 @@ +.buttons { + display: flex; + flex-wrap: wrap; +} +.stepButtons { + width: 100%; + display: flex; + justify-content: center; +} +.stepButton { +} +.jumpButtons { + width: 100%; + display: flex; + justify-content: center; +} +.jumpButton { +} +.navigator { +} +.navigator:hover { +} \ No newline at end of file diff --git a/libs/debugger-ui/src/lib/button-navigator/button-navigator.spec.tsx b/libs/debugger-ui/src/lib/button-navigator/button-navigator.spec.tsx new file mode 100644 index 00000000000..ed9b896f472 --- /dev/null +++ b/libs/debugger-ui/src/lib/button-navigator/button-navigator.spec.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { render } from '@testing-library/react'; + +import ButtonNavigation from './button-navigator'; + +describe(' ButtonNavigation', () => { + it('should render successfully', () => { + const { baseElement } = render(); + expect(baseElement).toBeTruthy(); + }); +}); diff --git a/libs/debugger-ui/src/lib/button-navigator/button-navigator.tsx b/libs/debugger-ui/src/lib/button-navigator/button-navigator.tsx new file mode 100644 index 00000000000..b7b09b3b061 --- /dev/null +++ b/libs/debugger-ui/src/lib/button-navigator/button-navigator.tsx @@ -0,0 +1,78 @@ +import React, { useState, useEffect } from 'react' +import './button-navigator.css' + +export const ButtonNavigation = ({ stepManager, revertedReason, stepState, jumpOutDisabled }) => { + const [state, setState] = useState({ + intoBackDisabled: true, + overBackDisabled: true, + intoForwardDisabled: true, + overForwardDisabled: true, + jumpOutDisabled: true, + jumpNextBreakpointDisabled: true, + jumpPreviousBreakpointDisabled: true + }) + + useEffect(() => { + stepChanged(stepState, jumpOutDisabled) + }, [stepState, jumpOutDisabled]) + + const reset = () => { + setState(() => { + return { + intoBackDisabled: true, + overBackDisabled: true, + intoForwardDisabled: true, + overForwardDisabled: true, + jumpOutDisabled: true, + jumpNextBreakpointDisabled: true, + jumpPreviousBreakpointDisabled: true + } + }) + } + + const stepChanged = (stepState, jumpOutDisabled) => { + if (stepState === 'invalid') { + // TODO: probably not necessary, already implicit done in the next steps + reset() + return + } + + setState(() => { + return { + intoBackDisabled: stepState === 'initial', + overBackDisabled: stepState === 'initial', + jumpPreviousBreakpointDisabled: stepState === 'initial', + intoForwardDisabled: stepState === 'end', + overForwardDisabled: stepState === 'end', + jumpNextBreakpointDisabled: jumpOutDisabled, + jumpOutDisabled + } + }) + } + + return ( +
+
+ + + + +
+ +
+ + + +
+
+ + State changes made during this call will be reverted. + This call will run out of gas. + The parent call will throw an exception +
+
+ ) +} + +export default ButtonNavigation diff --git a/libs/debugger-ui/src/lib/slider.tsx b/libs/debugger-ui/src/lib/slider.tsx deleted file mode 100644 index e9d2dc59e18..00000000000 --- a/libs/debugger-ui/src/lib/slider.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import React, { useState, useRef } from 'react' - -const Slider = ({ event }) => { - const [state, setState] = useState({ - max: null, - disabled: true, - previousValue: null, - currentValue: null - }) - const sliderRef = useRef(null) - - const setSliderLength = (length) => { - sliderRef.current.setAttribute('max', length - 1) - setState({ - ...state, - max: length - 1, - disabled: (length === 0) - }) - - if (state.disabled) { - sliderRef.current.setAttribute('disabled', true) - } else { - sliderRef.current.removeAttribute('disabled') - } - - setValue(0) - } - - const setValue = (value) => { - setState({ - ...state, - currentValue: value - }) - } - - const handleChange = (e) => { - const value = parseInt(e.target.value) - - if (value === state.previousValue) return - setState({ - ...state, - previousValue: value, - currentValue: value - }) - event.trigger('sliderMoved', [value]) - } - - return ( -
- -
- ) -} - -export default Slider diff --git a/libs/debugger-ui/src/lib/slider/slider.css b/libs/debugger-ui/src/lib/slider/slider.css new file mode 100644 index 00000000000..e69de29bb2d diff --git a/libs/debugger-ui/src/lib/slider/slider.spec.tsx b/libs/debugger-ui/src/lib/slider/slider.spec.tsx new file mode 100644 index 00000000000..da80d95d450 --- /dev/null +++ b/libs/debugger-ui/src/lib/slider/slider.spec.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { render } from '@testing-library/react'; + +import Slider from './slider'; + +describe(' Slider', () => { + it('should render successfully', () => { + const { baseElement } = render(); + expect(baseElement).toBeTruthy(); + }); +}); diff --git a/libs/debugger-ui/src/lib/slider/slider.tsx b/libs/debugger-ui/src/lib/slider/slider.tsx new file mode 100644 index 00000000000..7fd7e8ed4fc --- /dev/null +++ b/libs/debugger-ui/src/lib/slider/slider.tsx @@ -0,0 +1,67 @@ +import React, { useState, useEffect } from 'react' + +export const Slider = ({ stepManager, sliderLength, sliderValue }) => { + const [state, setState] = useState({ + max: null, + disabled: true, + previousValue: null, + currentValue: null + }) + + useEffect(() => { + setState(prevState => { + return { + ...prevState, + max: sliderLength - 1, + disabled: (sliderLength === 0) + } + }) + + setValue(0) + }, [sliderLength]) + + useEffect(() => { + setValue(sliderValue) + }, [sliderValue]) + + const setValue = (value) => { + setState(prevState => { + return { + ...prevState, + currentValue: value + } + }) + } + + const handleChange = (e) => { + console.log('e.target: ', e.target) + const value = parseInt(e.target.value) + + if (value === state.previousValue) return + setState(prevState => { + return { + ...prevState, + previousValue: value, + currentValue: value + } + }) + stepManager.jumpTo(value) + } + + return ( +
+ +
+ ) +} + +export default Slider diff --git a/libs/debugger-ui/src/lib/step-manager/step-manager.css b/libs/debugger-ui/src/lib/step-manager/step-manager.css new file mode 100644 index 00000000000..e69de29bb2d diff --git a/libs/debugger-ui/src/lib/step-manager/step-manager.spec.tsx b/libs/debugger-ui/src/lib/step-manager/step-manager.spec.tsx new file mode 100644 index 00000000000..bea258b802e --- /dev/null +++ b/libs/debugger-ui/src/lib/step-manager/step-manager.spec.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { render } from '@testing-library/react'; + +import StepManager from './step-manager'; + +describe(' StepManager', () => { + it('should render successfully', () => { + const { baseElement } = render(); + expect(baseElement).toBeTruthy(); + }); +}); diff --git a/libs/debugger-ui/src/lib/step-manager/step-manager.tsx b/libs/debugger-ui/src/lib/step-manager/step-manager.tsx new file mode 100644 index 00000000000..f8007a7493e --- /dev/null +++ b/libs/debugger-ui/src/lib/step-manager/step-manager.tsx @@ -0,0 +1,60 @@ +import React, { useState, useEffect } from 'react' +import './step-manager.css' +import Slider from '../slider/slider' +import ButtonNavigator from '../button-navigator/button-navigator' + +export const StepManager = ({ stepManager }) => { + const [state, setState] = useState({ + sliderLength: null, + sliderValue: 0, + revertWarning: '', + stepState: '', + jumpOutDisabled: true + }) + + useEffect(() => { + stepManager.event.register('traceLengthChanged', setSliderLength) + stepManager.event.register('revertWarning', setRevertWarning) + stepManager.event.register('stepChanged', updateStep) + }, []) + + const setSliderLength = (length) => { + setState(prevState => { + return { + ...prevState, + sliderLength: length + } + }) + } + + const setRevertWarning = (warning) => { + setState(prevState => { + return { + ...prevState, + revertWarning: warning + } + }) + } + + const updateStep = (step, stepState, jumpOutDisabled) => { + setState(prevState => { + return { + ...prevState, + sliderValue: step, + stepState, + jumpOutDisabled + } + }) + } + + const { sliderLength, sliderValue, revertWarning, stepState, jumpOutDisabled } = state + + return ( +
+ + +
+ ) +} + +export default StepManager From 91d982ca274c07f87c57fe86138541aad229e259 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Fri, 28 Aug 2020 17:24:32 +0100 Subject: [PATCH 04/63] Dropdown panel refactor --- .../src/app/tabs/debugger/debuggerUI.js | 10 +- .../button-navigator.spec.tsx | 11 -- libs/debugger-ui/src/lib/slider/slider.css | 0 .../src/lib/slider/slider.spec.tsx | 11 -- .../src/lib/step-manager/step-manager.css | 0 .../lib/step-manager/step-manager.spec.tsx | 11 -- .../src/lib/step-manager/step-manager.tsx | 1 - .../src/lib/tx-browser/tx-browser.css | 24 +++ .../src/lib/tx-browser/tx-browser.tsx | 82 ++++++++ .../src/lib/vm-debugger/code-list-view.tsx | 21 +++ .../src/lib/vm-debugger/dropdown-panel.tsx | 178 ++++++++++++++++++ .../lib/vm-debugger/styles/code-list-view.css | 4 + .../lib/vm-debugger/styles/dropdown-panel.css | 44 +++++ .../src/lib/vm-debugger/vm-debugger.tsx | 16 ++ 14 files changed, 374 insertions(+), 39 deletions(-) delete mode 100644 libs/debugger-ui/src/lib/button-navigator/button-navigator.spec.tsx delete mode 100644 libs/debugger-ui/src/lib/slider/slider.css delete mode 100644 libs/debugger-ui/src/lib/slider/slider.spec.tsx delete mode 100644 libs/debugger-ui/src/lib/step-manager/step-manager.css delete mode 100644 libs/debugger-ui/src/lib/step-manager/step-manager.spec.tsx create mode 100644 libs/debugger-ui/src/lib/tx-browser/tx-browser.css create mode 100644 libs/debugger-ui/src/lib/tx-browser/tx-browser.tsx create mode 100644 libs/debugger-ui/src/lib/vm-debugger/code-list-view.tsx create mode 100644 libs/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx create mode 100644 libs/debugger-ui/src/lib/vm-debugger/styles/code-list-view.css create mode 100644 libs/debugger-ui/src/lib/vm-debugger/styles/dropdown-panel.css create mode 100644 libs/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx diff --git a/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js b/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js index 96b2ca6280f..03417c5c3d2 100644 --- a/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js +++ b/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js @@ -2,7 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom' import { StepManager } from '@remix-project/debugger-ui' var TxBrowser = require('./debuggerUI/TxBrowser') -var StepManagerUI = require('./debuggerUI/StepManager') +// var StepManagerUI = require('./debuggerUI/StepManager') var VmDebugger = require('./debuggerUI/VmDebugger') var toaster = require('../../ui/tooltip') @@ -61,7 +61,7 @@ class DebuggerUI { this.sourceHighlighter = new SourceHighlighter() this.startTxBrowser() - this.stepManager = null + // this.stepManager = null this.statusMessage = '' this.currentReceipt @@ -187,7 +187,7 @@ class DebuggerUI { this.listenToEvents() this.debugger.debug(blockNumber, txNumber, tx, () => { - this.stepManager = new StepManagerUI(this.debugger.step_manager) + // this.stepManager = new StepManagerUI(this.debugger.step_manager) this.vmDebugger = new VmDebugger(this.debugger.vmDebuggerLogic) this.txBrowser.setState({ blockNumber, txNumber, debugging: true }) this.renderDebugger() @@ -259,10 +259,10 @@ class DebuggerUI { yo.update(this.debuggerPanelsView, yo`
`) yo.update(this.stepManagerView, yo`
`) if (this.vmDebugger) this.vmDebugger.remove() - if (this.stepManager) this.stepManager.remove() + // if (this.stepManager) this.stepManager.remove() if (this.txBrowser) this.txBrowser.setState({debugging: false}) this.vmDebugger = null - this.stepManager = null + // this.stepManager = null if (this.debugger) delete this.debugger this.event.trigger('traceUnloaded') } diff --git a/libs/debugger-ui/src/lib/button-navigator/button-navigator.spec.tsx b/libs/debugger-ui/src/lib/button-navigator/button-navigator.spec.tsx deleted file mode 100644 index ed9b896f472..00000000000 --- a/libs/debugger-ui/src/lib/button-navigator/button-navigator.spec.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; - -import ButtonNavigation from './button-navigator'; - -describe(' ButtonNavigation', () => { - it('should render successfully', () => { - const { baseElement } = render(); - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/debugger-ui/src/lib/slider/slider.css b/libs/debugger-ui/src/lib/slider/slider.css deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/libs/debugger-ui/src/lib/slider/slider.spec.tsx b/libs/debugger-ui/src/lib/slider/slider.spec.tsx deleted file mode 100644 index da80d95d450..00000000000 --- a/libs/debugger-ui/src/lib/slider/slider.spec.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; - -import Slider from './slider'; - -describe(' Slider', () => { - it('should render successfully', () => { - const { baseElement } = render(); - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/debugger-ui/src/lib/step-manager/step-manager.css b/libs/debugger-ui/src/lib/step-manager/step-manager.css deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/libs/debugger-ui/src/lib/step-manager/step-manager.spec.tsx b/libs/debugger-ui/src/lib/step-manager/step-manager.spec.tsx deleted file mode 100644 index bea258b802e..00000000000 --- a/libs/debugger-ui/src/lib/step-manager/step-manager.spec.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; - -import StepManager from './step-manager'; - -describe(' StepManager', () => { - it('should render successfully', () => { - const { baseElement } = render(); - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/debugger-ui/src/lib/step-manager/step-manager.tsx b/libs/debugger-ui/src/lib/step-manager/step-manager.tsx index f8007a7493e..018c1d57c3a 100644 --- a/libs/debugger-ui/src/lib/step-manager/step-manager.tsx +++ b/libs/debugger-ui/src/lib/step-manager/step-manager.tsx @@ -1,5 +1,4 @@ import React, { useState, useEffect } from 'react' -import './step-manager.css' import Slider from '../slider/slider' import ButtonNavigator from '../button-navigator/button-navigator' diff --git a/libs/debugger-ui/src/lib/tx-browser/tx-browser.css b/libs/debugger-ui/src/lib/tx-browser/tx-browser.css new file mode 100644 index 00000000000..3f50123101a --- /dev/null +++ b/libs/debugger-ui/src/lib/tx-browser/tx-browser.css @@ -0,0 +1,24 @@ +.container { + display: flex; + flex-direction: column; +} +.txContainer { + display: flex; + flex-direction: column; +} +.txinput { + width: inherit; + font-size: small; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.txbutton { + width: inherit; +} +.txbutton:hover { +} +.vmargin { + margin-top: 10px; + margin-bottom: 10px; +} \ No newline at end of file diff --git a/libs/debugger-ui/src/lib/tx-browser/tx-browser.tsx b/libs/debugger-ui/src/lib/tx-browser/tx-browser.tsx new file mode 100644 index 00000000000..a84161c3f15 --- /dev/null +++ b/libs/debugger-ui/src/lib/tx-browser/tx-browser.tsx @@ -0,0 +1,82 @@ +import React, { useState } from 'react' +import './tx-browser.css' +import EventManager from '../../../../../apps/remix-ide/src/lib/events' + +export const TxBrowser = () => { + const event = new EventManager() + const [state, setState] = useState({ + txNumber: undefined, + debugging: false + }) + + const handleSubmit = () => { + if (state.debugging) { + unload() + } else { + event.trigger('requestDebug', [undefined, state.txNumber]) + } + } + + const unload = () => { + event.trigger('unloadRequested', []) + } + + const updateTxN = (ev) => { + setState(prevState => { + return { + ...prevState, + txNumber: ev.target.value + } + }) + } + + const txInputChanged = (e) => { + // todo check validation of txnumber in the input element, use + // required + // oninvalid="setCustomValidity('Please provide a valid transaction number, must start with 0x and have length of 22')" + // pattern="^0[x,X]+[0-9a-fA-F]{22}" + // this.state.txNumberInput.setCustomValidity('') + + setState(prevState => { + return { + ...prevState, + txNumber: e.target.value + } + }) + } + + return ( +
+
+
+ +
+
+ +
+
+ +
+ ) +} + +export default TxBrowser diff --git a/libs/debugger-ui/src/lib/vm-debugger/code-list-view.tsx b/libs/debugger-ui/src/lib/vm-debugger/code-list-view.tsx new file mode 100644 index 00000000000..a3b6031edc9 --- /dev/null +++ b/libs/debugger-ui/src/lib/vm-debugger/code-list-view.tsx @@ -0,0 +1,21 @@ +import React, { useState } from 'react' +import './styles/code-list-view.css' +import EventManager from '../../../../../apps/remix-ide/src/lib/events' + +export const VmDebugger = ({ vmDebuggerLogic }) => { + const event = new EventManager() + const [state, setState] = useState({ + code: '', + address: '', + itemSelected: null, + + }) + + return ( +
+

Welcome to vmDebugger!

+
+ ) +} + +export default VmDebugger diff --git a/libs/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx b/libs/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx new file mode 100644 index 00000000000..97934dd7106 --- /dev/null +++ b/libs/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx @@ -0,0 +1,178 @@ +import React, { useState, useRef } from 'react' +import './styles/dropdown-panel.css' +import EventManager from '../../../../../apps/remix-ide/src/lib/events' +import TreeView from '../../../../../apps/remix-ide/src/app/ui/TreeView' +import copyToClipboard from '../../../../../apps/remix-ide/src/app/ui/copy-to-clipboard' + +export const DropdownPanel = ({ name, opts, node }) => { + const event = new EventManager() + const treeView = new TreeView(opts) + const [state, setState] = useState({ + header: '', + json: opts.json, + displayContentOnly: opts.displayContentOnly, + toggleDropdown: false, + message: { + innerText: '', + display: 'none' + }, + dropdownContent: { + innerText: '', + display: 'none' + }, + dropdownRawContent: { + innerText: '', + display: 'none' + }, + title: { + innerText: '', + display: 'none' + }, + showRefreshIcon: false + }) + const dropdownRawEl = useRef(null) + + const handleToggle = () => { + setState(prevState => { + if (prevState.toggleDropdown) event.trigger('hide', []) + else event.trigger('show', []) + return { + ...prevState, + toggleDropdown: !prevState.toggleDropdown + } + }) + } + + const copyClipboard = () => { + return dropdownRawEl.current.innerText ? dropdownRawEl.current.innerText : dropdownRawEl.current.textContent + } + + const message = (message) => { + setState(state => { + return { + ...state, + message: { + innerText: message, + display: message ? 'block' : '' + }, + dropdownRawContent: { + ...state.dropdownRawContent, + display: 'none' + }, + dropdownContent: { + ...state.dropdownContent, + display: 'none' + }, + showRefreshIcon: false + } + }) + } + + const setLoading = () => { + setState(prevState => { + return { + ...prevState, + message: { + innerText: '', + display: 'none' + }, + dropdownRawContent: { + ...prevState.dropdownRawContent, + display: 'none' + }, + dropdownContent: { + ...prevState.dropdownContent, + display: 'none' + }, + showRefreshIcon: true + } + }) + } + + const update = function (data, header) { + setState(prevState => { + return { + ...prevState, + showRefreshIcon: false, + dropdownContent: { + ...prevState.dropdownContent, + display: 'none' + }, + dropdownRawContent: { + innerText: JSON.stringify(data, null, '\t'), + display: 'block' + } + } + }) + if (!this.displayContentOnly) { + // this.view.querySelector('.title i.fa-copy').style.display = 'block' + setState(prevState => { + return { + ...prevState, + title: { + innerText: header || '', + display: 'block' + } + } + }) + } + message('') + if (state.json) { + treeView.update(data) + } + } + + const hide = () => { + setState(prevState => { + return { + ...prevState, + toggleDropdown: false + } + }) + event.trigger('hide', []) + } + + const show = () => { + setState(prevState => { + return { + ...prevState, + toggleDropdown: true + } + }) + event.trigger('show', []) + } + + let content =
Empty
+ if (state.json) { + content = treeView.render({}, null) + } + const title = !state.displayContentOnly ? +
+
+
{name}
+ {copyToClipboard(() => copyClipboard())} +
:
+ + if (state.displayContentOnly) { + setState(prevState => { + return { + ...prevState, + toggleDropdown: true + } + }) + } + + return ( +
+ { title } +
+ +
{node || content }
+
+
+
+
+ ) +} + +export default DropdownPanel \ No newline at end of file diff --git a/libs/debugger-ui/src/lib/vm-debugger/styles/code-list-view.css b/libs/debugger-ui/src/lib/vm-debugger/styles/code-list-view.css new file mode 100644 index 00000000000..44a5b020a7f --- /dev/null +++ b/libs/debugger-ui/src/lib/vm-debugger/styles/code-list-view.css @@ -0,0 +1,4 @@ +.instructions { + overflow-y: scroll; + max-height: 130px; +} \ No newline at end of file diff --git a/libs/debugger-ui/src/lib/vm-debugger/styles/dropdown-panel.css b/libs/debugger-ui/src/lib/vm-debugger/styles/dropdown-panel.css new file mode 100644 index 00000000000..4a87d06280f --- /dev/null +++ b/libs/debugger-ui/src/lib/vm-debugger/styles/dropdown-panel.css @@ -0,0 +1,44 @@ +.title { + display: flex; + align-items: center; + } + .name { + font-weight: bold; + } + .nameDetail { + font-weight: bold; + margin-left: 3px; + } + .icon { + margin-right: 5%; + } + .eyeButton { + margin: 3px; + } + .dropdownpanel { + width: 100%; + word-break: break-word; + } + .dropdownrawcontent { + padding: 2px; + word-break: break-word; + } + .message { + padding: 2px; + word-break: break-word; + } + .refresh { + display: none; + margin-left: 4px; + margin-top: 4px; + animation: spin 2s linear infinite; + } + @-moz-keyframes spin { + to { -moz-transform: rotate(359deg); } + } + @-webkit-keyframes spin { + to { -webkit-transform: rotate(359deg); } + } + @keyframes spin { + to {transform:rotate(359deg);} + } \ No newline at end of file diff --git a/libs/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx b/libs/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx new file mode 100644 index 00000000000..67ac48c9e52 --- /dev/null +++ b/libs/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx @@ -0,0 +1,16 @@ +import React, { useState } from 'react'; +import './vm-debugger.css'; + +export const VmDebugger = ({ vmDebuggerLogic }) => { + const [state, setState] = useState({ + asmCode + }) + + return ( +
+

Welcome to vmDebugger!

+
+ ); +}; + +export default VmDebugger; From b399888f06bfd19dd5e0e5db76c8daf17b6fe715 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 1 Sep 2020 09:07:00 +0100 Subject: [PATCH 05/63] VMDebugger components refactor --- .../src/lib/vm-debugger/assembly-items.tsx | 54 +++++++++++++++ .../src/lib/vm-debugger/calldata-panel.tsx | 12 ++++ .../src/lib/vm-debugger/callstack-panel.tsx | 12 ++++ .../src/lib/vm-debugger/code-list-view.tsx | 43 ++++++++++-- .../src/lib/vm-debugger/dropdown-panel.tsx | 35 ++++++++-- .../src/lib/vm-debugger/function-panel.tsx | 12 ++++ .../src/lib/vm-debugger/memory-panel.tsx | 16 +++++ .../src/lib/vm-debugger/solidity-state.tsx | 0 .../src/lib/vm-debugger/stack-panel.tsx | 12 ++++ .../src/lib/vm-debugger/step-detail.tsx | 66 +++++++++++++++++++ .../src/lib/vm-debugger/storage-panel.tsx | 12 ++++ ...{code-list-view.css => assembly-items.css} | 0 .../src/lib/vm-debugger/vm-debugger.tsx | 5 +- 13 files changed, 265 insertions(+), 14 deletions(-) create mode 100644 libs/debugger-ui/src/lib/vm-debugger/assembly-items.tsx create mode 100644 libs/debugger-ui/src/lib/vm-debugger/calldata-panel.tsx create mode 100644 libs/debugger-ui/src/lib/vm-debugger/callstack-panel.tsx create mode 100644 libs/debugger-ui/src/lib/vm-debugger/function-panel.tsx create mode 100644 libs/debugger-ui/src/lib/vm-debugger/memory-panel.tsx create mode 100644 libs/debugger-ui/src/lib/vm-debugger/solidity-state.tsx create mode 100644 libs/debugger-ui/src/lib/vm-debugger/stack-panel.tsx create mode 100644 libs/debugger-ui/src/lib/vm-debugger/step-detail.tsx create mode 100644 libs/debugger-ui/src/lib/vm-debugger/storage-panel.tsx rename libs/debugger-ui/src/lib/vm-debugger/styles/{code-list-view.css => assembly-items.css} (100%) diff --git a/libs/debugger-ui/src/lib/vm-debugger/assembly-items.tsx b/libs/debugger-ui/src/lib/vm-debugger/assembly-items.tsx new file mode 100644 index 00000000000..c8d770e4232 --- /dev/null +++ b/libs/debugger-ui/src/lib/vm-debugger/assembly-items.tsx @@ -0,0 +1,54 @@ +import React, { useState, useRef, useEffect } from 'react' +import './styles/assembly-items.css' + +export const AssemblyItems = ({ codeView, index }) => { + const [state, setState] = useState({ + selectedItem: null + }) + const refs = useRef(codeView.map(React.createRef)) + const asmItemsRef = useRef(null) + + useEffect(() => { + indexChanged(index) + }, [index]) + + const indexChanged = (index) => { + if (index < 0) return + const { selectedItem } = state + let currentItem = refs.current[selectedItem].current + + if (selectedItem) { + currentItem.removeAttribute('selected') + currentItem.removeAttribute('style') + if (currentItem.firstChild) { + currentItem.firstChild.removeAttribute('style') + } + } + + const codeView = asmItemsRef.current + + currentItem = codeView.children[index] + currentItem.style.setProperty('border-color', 'var(--primary)') + currentItem.style.setProperty('border-style', 'solid') + currentItem.setAttribute('selected', 'selected') + codeView.scrollTop = currentItem.offsetTop - parseInt(codeView.offsetTop) + setState(prevState => { + return { + ...prevState, + selectedItem: index + } + }) + } + + return ( +
+ { + codeView.map((item, i) => { + return
{item}
+ }) + } +
+ ) +} + +export default AssemblyItems \ No newline at end of file diff --git a/libs/debugger-ui/src/lib/vm-debugger/calldata-panel.tsx b/libs/debugger-ui/src/lib/vm-debugger/calldata-panel.tsx new file mode 100644 index 00000000000..d65b4d8243e --- /dev/null +++ b/libs/debugger-ui/src/lib/vm-debugger/calldata-panel.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import DropdownPanel from './dropdown-panel' + +export const CalldataPanel = ({ calldata }) => { + return ( +
+ +
+ ) +} + +export default CalldataPanel \ No newline at end of file diff --git a/libs/debugger-ui/src/lib/vm-debugger/callstack-panel.tsx b/libs/debugger-ui/src/lib/vm-debugger/callstack-panel.tsx new file mode 100644 index 00000000000..7dc9871f579 --- /dev/null +++ b/libs/debugger-ui/src/lib/vm-debugger/callstack-panel.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import DropdownPanel from './dropdown-panel' + +export const CallstackPanel = ({ calldata }) => { + return ( +
+ +
+ ) +} + +export default CallstackPanel \ No newline at end of file diff --git a/libs/debugger-ui/src/lib/vm-debugger/code-list-view.tsx b/libs/debugger-ui/src/lib/vm-debugger/code-list-view.tsx index a3b6031edc9..c6b578431df 100644 --- a/libs/debugger-ui/src/lib/vm-debugger/code-list-view.tsx +++ b/libs/debugger-ui/src/lib/vm-debugger/code-list-view.tsx @@ -1,21 +1,50 @@ -import React, { useState } from 'react' -import './styles/code-list-view.css' +import React, { useState, useRef } from 'react' +import DropdownPanel from './dropdown-panel' import EventManager from '../../../../../apps/remix-ide/src/lib/events' -export const VmDebugger = ({ vmDebuggerLogic }) => { +export const CodeListView = ({ vmDebuggerLogic }) => { const event = new EventManager() const [state, setState] = useState({ code: '', address: '', itemSelected: null, - + index: null }) + const indexChanged = (index) => { + if(index < 0) return + setState(prevState => { + return { + ...prevState, + index + } + }) + } + + const reset = () => { + changed([], '', -1) + } + + const changed = (code, address, index) => { + if (state.address === address) { + return indexChanged(index) + } + setState(prevState => { + return { + ...prevState, + code, + address + } + }) + this.basicPanel.setContent(this.renderAssemblyItems()) + indexChanged(index) + } + return ( -
-

Welcome to vmDebugger!

+
+
) } -export default VmDebugger +export default CodeListView diff --git a/libs/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx b/libs/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx index 97934dd7106..ec9a0629940 100644 --- a/libs/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx +++ b/libs/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx @@ -1,12 +1,32 @@ -import React, { useState, useRef } from 'react' +import React, { useState, useRef, useEffect } from 'react' +import AssemblyItems from './assembly-items' import './styles/dropdown-panel.css' import EventManager from '../../../../../apps/remix-ide/src/lib/events' import TreeView from '../../../../../apps/remix-ide/src/app/ui/TreeView' import copyToClipboard from '../../../../../apps/remix-ide/src/app/ui/copy-to-clipboard' -export const DropdownPanel = ({ name, opts, node }) => { +export interface DropdownPanelProps { + dropdownName: string, + opts: { + json: boolean, + displayContentOnly?: boolean, + css?: { + [key: string]: string + } + }, + codeView?: string[], + index?: number, + calldata?: { + [key: string]: string + }, + header?: string +} + +export const DropdownPanel = (props: DropdownPanelProps) => { + const { dropdownName, opts, codeView, index, calldata, header } = props const event = new EventManager() const treeView = new TreeView(opts) + const dropdownRawEl = useRef(null) const [state, setState] = useState({ header: '', json: opts.json, @@ -30,7 +50,10 @@ export const DropdownPanel = ({ name, opts, node }) => { }, showRefreshIcon: false }) - const dropdownRawEl = useRef(null) + + useEffect(() => { + update(calldata, header) + }, [calldata, header]) const handleToggle = () => { setState(prevState => { @@ -149,7 +172,7 @@ export const DropdownPanel = ({ name, opts, node }) => { const title = !state.displayContentOnly ?
-
{name}
+
{dropdownName}
{copyToClipboard(() => copyClipboard())}
:
@@ -167,7 +190,9 @@ export const DropdownPanel = ({ name, opts, node }) => { { title }
-
{node || content }
+
+ { codeView ? : content } +
diff --git a/libs/debugger-ui/src/lib/vm-debugger/function-panel.tsx b/libs/debugger-ui/src/lib/vm-debugger/function-panel.tsx new file mode 100644 index 00000000000..96d636b2356 --- /dev/null +++ b/libs/debugger-ui/src/lib/vm-debugger/function-panel.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import DropdownPanel from './dropdown-panel' + +export const FunctionPanel = ({ calldata }) => { + return ( +
+ +
+ ) +} + +export default FunctionPanel \ No newline at end of file diff --git a/libs/debugger-ui/src/lib/vm-debugger/memory-panel.tsx b/libs/debugger-ui/src/lib/vm-debugger/memory-panel.tsx new file mode 100644 index 00000000000..2645b8793d8 --- /dev/null +++ b/libs/debugger-ui/src/lib/vm-debugger/memory-panel.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import DropdownPanel from './dropdown-panel' + +export const MemoryPanel = ({ calldata }) => { + return ( + + ) +} + +export default MemoryPanel \ No newline at end of file diff --git a/libs/debugger-ui/src/lib/vm-debugger/solidity-state.tsx b/libs/debugger-ui/src/lib/vm-debugger/solidity-state.tsx new file mode 100644 index 00000000000..e69de29bb2d diff --git a/libs/debugger-ui/src/lib/vm-debugger/stack-panel.tsx b/libs/debugger-ui/src/lib/vm-debugger/stack-panel.tsx new file mode 100644 index 00000000000..f3fdf8479fe --- /dev/null +++ b/libs/debugger-ui/src/lib/vm-debugger/stack-panel.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import DropdownPanel from './dropdown-panel' + +export const StackPanel = ({ calldata }) => { + return ( +
+ +
+ ) +} + +export default StackPanel \ No newline at end of file diff --git a/libs/debugger-ui/src/lib/vm-debugger/step-detail.tsx b/libs/debugger-ui/src/lib/vm-debugger/step-detail.tsx new file mode 100644 index 00000000000..27cc283f2a6 --- /dev/null +++ b/libs/debugger-ui/src/lib/vm-debugger/step-detail.tsx @@ -0,0 +1,66 @@ +import React, { useState, useEffect } from 'react' +import DropdownPanel from './dropdown-panel' + +export interface StepDetailProps { + resetStep: boolean, + detail: { + key: string, + value: string + } +} + +export const StepDetail = (props: StepDetailProps) => { + const { resetStep, detail } = props + const [state, setState] = useState({ + detail: { + 'vm trace step': '-', + 'execution step': '-', + 'add memory': '', + 'gas': '', + 'remaining gas': '-', + 'loaded address': '-' + } + }) + + useEffect(() => { + reset() + }, [resetStep]) + + useEffect(() => { + updateField(detail.key, detail.value) + }, [detail]) + + const reset = () => { + setState(() => { + return { + detail: { + 'vm trace step': '-', + 'execution step': '-', + 'add memory': '', + 'gas': '', + 'remaining gas': '-', + 'loaded address': '-' + } + } + }) + } + + const updateField = (key, value) => { + setState(prevState => { + const { detail } = prevState + + detail[key] = value + return { + detail + } + }) + } + + return ( +
+ +
+ ) +} + +export default StepDetail \ No newline at end of file diff --git a/libs/debugger-ui/src/lib/vm-debugger/storage-panel.tsx b/libs/debugger-ui/src/lib/vm-debugger/storage-panel.tsx new file mode 100644 index 00000000000..47a46e31c98 --- /dev/null +++ b/libs/debugger-ui/src/lib/vm-debugger/storage-panel.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import DropdownPanel from './dropdown-panel' + +export const StoragePanel = ({ storage, header }) => { + return ( +
+ +
+ ) +} + +export default StoragePanel \ No newline at end of file diff --git a/libs/debugger-ui/src/lib/vm-debugger/styles/code-list-view.css b/libs/debugger-ui/src/lib/vm-debugger/styles/assembly-items.css similarity index 100% rename from libs/debugger-ui/src/lib/vm-debugger/styles/code-list-view.css rename to libs/debugger-ui/src/lib/vm-debugger/styles/assembly-items.css diff --git a/libs/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx b/libs/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx index 67ac48c9e52..42da693ba83 100644 --- a/libs/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx +++ b/libs/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx @@ -1,9 +1,10 @@ -import React, { useState } from 'react'; +import React, { useState } from 'react' +import CodeListView from './code-list-view' import './vm-debugger.css'; export const VmDebugger = ({ vmDebuggerLogic }) => { const [state, setState] = useState({ - asmCode + }) return ( From 4b667faa877c1ffae9f618b168b8446500667c18 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 1 Sep 2020 15:25:41 +0100 Subject: [PATCH 06/63] FullStoragesChanges component --- .../lib/vm-debugger/full-storages-changes.tsx | 12 ++ .../src/lib/vm-debugger/solidity-state.tsx | 12 ++ .../utils/solidity-type-formatter.ts | 0 package-lock.json | 115 +++++++++++++++++- 4 files changed, 133 insertions(+), 6 deletions(-) create mode 100644 libs/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx create mode 100644 libs/debugger-ui/src/lib/vm-debugger/utils/solidity-type-formatter.ts diff --git a/libs/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx b/libs/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx new file mode 100644 index 00000000000..4e0f5f3695f --- /dev/null +++ b/libs/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import Dropdown, { DropdownPanel } from './dropdown-panel' + +export const FullStoragesChanges = ({ storageData }) => { + return ( +
+ +
+ ) +} + +export default FullStoragesChanges \ No newline at end of file diff --git a/libs/debugger-ui/src/lib/vm-debugger/solidity-state.tsx b/libs/debugger-ui/src/lib/vm-debugger/solidity-state.tsx index e69de29bb2d..c67d061da3d 100644 --- a/libs/debugger-ui/src/lib/vm-debugger/solidity-state.tsx +++ b/libs/debugger-ui/src/lib/vm-debugger/solidity-state.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import DropdownPanel from './dropdown-panel' + +export const SolidityState = () => { + return ( + + ) +} + +export default SolidityState \ No newline at end of file diff --git a/libs/debugger-ui/src/lib/vm-debugger/utils/solidity-type-formatter.ts b/libs/debugger-ui/src/lib/vm-debugger/utils/solidity-type-formatter.ts new file mode 100644 index 00000000000..e69de29bb2d diff --git a/package-lock.json b/package-lock.json index 9a29f282421..d34b490a43d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9078,6 +9078,79 @@ "babel-types": "^6.24.1" } }, + "babel-jest": { + "version": "25.1.0", + "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-25.1.0.tgz", + "integrity": "sha512-tz0VxUhhOE2y+g8R2oFrO/2VtVjA1lkJeavlhExuRBg3LdNJY9gwQ+Vcvqt9+cqy71MCTJhewvTB7Qtnnr9SWg==", + "dev": true, + "requires": { + "@jest/transform": "^25.1.0", + "@jest/types": "^25.1.0", + "@types/babel__core": "^7.1.0", + "babel-plugin-istanbul": "^6.0.0", + "babel-preset-jest": "^25.1.0", + "chalk": "^3.0.0", + "slash": "^3.0.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz", + "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==", + "dev": true, + "requires": { + "@types/color-name": "^1.1.1", + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", + "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "slash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", + "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==", + "dev": true + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, "babel-loader": { "version": "8.1.0", "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.1.0.tgz", @@ -22310,6 +22383,7 @@ "version": "25.5.1", "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-25.5.1.tgz", "integrity": "sha512-9dA9+GmMjIzgPnYtkhBg73gOo/RHqPmLruP3BaGL4KEX3Dwz6pI8auSN8G8+iuEG90+GSswyKvslN+JYSaacaQ==", + "dev": true, "requires": { "@jest/transform": "^25.5.1", "@jest/types": "^25.5.0", @@ -22317,7 +22391,8 @@ "babel-plugin-istanbul": "^6.0.0", "babel-preset-jest": "^25.5.0", "chalk": "^3.0.0", - "graceful-fs": "^4.2.4" + "graceful-fs": "^4.2.4", + "slash": "^3.0.0" } }, "chalk": { @@ -22436,7 +22511,8 @@ "slash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", - "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==" + "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==", + "dev": true }, "supports-color": { "version": "7.1.0", @@ -24910,7 +24986,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "dev": true, "requires": { "js-tokens": "^3.0.0 || ^4.0.0" } @@ -32143,8 +32218,7 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", - "dev": true + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" }, "object-copy": { "version": "0.1.0", @@ -34990,7 +35064,6 @@ "version": "15.7.2", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", - "dev": true, "requires": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -35305,6 +35378,27 @@ "integrity": "sha1-+p4xn/3u6zWycpbvDz03TawvUqc=", "dev": true }, + "react": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz", + "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2" + } + }, + "react-dom": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz", + "integrity": "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2", + "scheduler": "^0.19.1" + } + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -36865,6 +36959,15 @@ "xmlchars": "^2.1.1" } }, + "scheduler": { + "version": "0.19.1", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz", + "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + }, "schema-utils": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz", From 234869fc4f2ce1e96279610ea063698ec526f937 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 1 Sep 2020 16:07:33 +0100 Subject: [PATCH 07/63] New folder structure for remix UI --- libs/{ => remix-ui}/debugger-ui/.babelrc | 0 libs/{ => remix-ui}/debugger-ui/.eslintrc | 2 +- libs/{ => remix-ui}/debugger-ui/README.md | 0 .../debugger-ui/babel-jest.config.json | 0 .../{ => remix-ui}/debugger-ui/jest.config.js | 0 libs/{ => remix-ui}/debugger-ui/src/index.ts | 0 .../lib/button-navigator/button-navigator.css | 0 .../lib/button-navigator/button-navigator.tsx | 0 .../debugger-ui/src/lib/debugger-ui.css | 0 .../debugger-ui/src/lib/debugger-ui.spec.tsx | 0 .../debugger-ui/src/lib/debugger-ui.tsx | 0 .../debugger-ui/src/lib/slider/slider.tsx | 0 .../src/lib/step-manager/step-manager.tsx | 0 .../src/lib/tx-browser/tx-browser.css | 0 .../src/lib/tx-browser/tx-browser.tsx | 0 .../src/lib/vm-debugger/assembly-items.tsx | 0 .../src/lib/vm-debugger/calldata-panel.tsx | 0 .../src/lib/vm-debugger/callstack-panel.tsx | 0 .../src/lib/vm-debugger/code-list-view.tsx | 0 .../src/lib/vm-debugger/dropdown-panel.tsx | 0 .../lib/vm-debugger/full-storages-changes.tsx | 0 .../src/lib/vm-debugger/function-panel.tsx | 0 .../src/lib/vm-debugger/memory-panel.tsx | 0 .../src/lib/vm-debugger/solidity-state.tsx | 0 .../src/lib/vm-debugger/stack-panel.tsx | 0 .../src/lib/vm-debugger/step-detail.tsx | 0 .../src/lib/vm-debugger/storage-panel.tsx | 0 .../lib/vm-debugger/styles/assembly-items.css | 0 .../lib/vm-debugger/styles/dropdown-panel.css | 0 .../utils/solidity-type-formatter.ts | 0 .../src/lib/vm-debugger/vm-debugger.tsx | 0 libs/{ => remix-ui}/debugger-ui/tsconfig.json | 0 .../debugger-ui/tsconfig.lib.json | 0 .../debugger-ui/tsconfig.spec.json | 0 libs/remix-ui/tree-view/.babelrc | 4 + libs/remix-ui/tree-view/.eslintrc | 248 ++++++++++++++++++ libs/remix-ui/tree-view/README.md | 7 + .../remix-ui/tree-view/babel-jest.config.json | 14 + libs/remix-ui/tree-view/jest.config.js | 12 + libs/remix-ui/tree-view/src/index.ts | 1 + .../tree-view/src/lib/remix-ui-tree-view.css | 0 .../src/lib/remix-ui-tree-view.spec.tsx | 11 + .../tree-view/src/lib/remix-ui-tree-view.tsx | 16 ++ libs/remix-ui/tree-view/tsconfig.json | 19 ++ libs/remix-ui/tree-view/tsconfig.lib.json | 13 + libs/remix-ui/tree-view/tsconfig.spec.json | 15 ++ nx.json | 6 + tsconfig.json | 4 +- workspace.json | 54 ++++ 49 files changed, 424 insertions(+), 2 deletions(-) rename libs/{ => remix-ui}/debugger-ui/.babelrc (100%) rename libs/{ => remix-ui}/debugger-ui/.eslintrc (99%) rename libs/{ => remix-ui}/debugger-ui/README.md (100%) rename libs/{ => remix-ui}/debugger-ui/babel-jest.config.json (100%) rename libs/{ => remix-ui}/debugger-ui/jest.config.js (100%) rename libs/{ => remix-ui}/debugger-ui/src/index.ts (100%) rename libs/{ => remix-ui}/debugger-ui/src/lib/button-navigator/button-navigator.css (100%) rename libs/{ => remix-ui}/debugger-ui/src/lib/button-navigator/button-navigator.tsx (100%) rename libs/{ => remix-ui}/debugger-ui/src/lib/debugger-ui.css (100%) rename libs/{ => remix-ui}/debugger-ui/src/lib/debugger-ui.spec.tsx (100%) rename libs/{ => remix-ui}/debugger-ui/src/lib/debugger-ui.tsx (100%) rename libs/{ => remix-ui}/debugger-ui/src/lib/slider/slider.tsx (100%) rename libs/{ => remix-ui}/debugger-ui/src/lib/step-manager/step-manager.tsx (100%) rename libs/{ => remix-ui}/debugger-ui/src/lib/tx-browser/tx-browser.css (100%) rename libs/{ => remix-ui}/debugger-ui/src/lib/tx-browser/tx-browser.tsx (100%) rename libs/{ => remix-ui}/debugger-ui/src/lib/vm-debugger/assembly-items.tsx (100%) rename libs/{ => remix-ui}/debugger-ui/src/lib/vm-debugger/calldata-panel.tsx (100%) rename libs/{ => remix-ui}/debugger-ui/src/lib/vm-debugger/callstack-panel.tsx (100%) rename libs/{ => remix-ui}/debugger-ui/src/lib/vm-debugger/code-list-view.tsx (100%) rename libs/{ => remix-ui}/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx (100%) rename libs/{ => remix-ui}/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx (100%) rename libs/{ => remix-ui}/debugger-ui/src/lib/vm-debugger/function-panel.tsx (100%) rename libs/{ => remix-ui}/debugger-ui/src/lib/vm-debugger/memory-panel.tsx (100%) rename libs/{ => remix-ui}/debugger-ui/src/lib/vm-debugger/solidity-state.tsx (100%) rename libs/{ => remix-ui}/debugger-ui/src/lib/vm-debugger/stack-panel.tsx (100%) rename libs/{ => remix-ui}/debugger-ui/src/lib/vm-debugger/step-detail.tsx (100%) rename libs/{ => remix-ui}/debugger-ui/src/lib/vm-debugger/storage-panel.tsx (100%) rename libs/{ => remix-ui}/debugger-ui/src/lib/vm-debugger/styles/assembly-items.css (100%) rename libs/{ => remix-ui}/debugger-ui/src/lib/vm-debugger/styles/dropdown-panel.css (100%) rename libs/{ => remix-ui}/debugger-ui/src/lib/vm-debugger/utils/solidity-type-formatter.ts (100%) rename libs/{ => remix-ui}/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx (100%) rename libs/{ => remix-ui}/debugger-ui/tsconfig.json (100%) rename libs/{ => remix-ui}/debugger-ui/tsconfig.lib.json (100%) rename libs/{ => remix-ui}/debugger-ui/tsconfig.spec.json (100%) create mode 100644 libs/remix-ui/tree-view/.babelrc create mode 100644 libs/remix-ui/tree-view/.eslintrc create mode 100644 libs/remix-ui/tree-view/README.md create mode 100644 libs/remix-ui/tree-view/babel-jest.config.json create mode 100644 libs/remix-ui/tree-view/jest.config.js create mode 100644 libs/remix-ui/tree-view/src/index.ts create mode 100644 libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.css create mode 100644 libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.spec.tsx create mode 100644 libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.tsx create mode 100644 libs/remix-ui/tree-view/tsconfig.json create mode 100644 libs/remix-ui/tree-view/tsconfig.lib.json create mode 100644 libs/remix-ui/tree-view/tsconfig.spec.json diff --git a/libs/debugger-ui/.babelrc b/libs/remix-ui/debugger-ui/.babelrc similarity index 100% rename from libs/debugger-ui/.babelrc rename to libs/remix-ui/debugger-ui/.babelrc diff --git a/libs/debugger-ui/.eslintrc b/libs/remix-ui/debugger-ui/.eslintrc similarity index 99% rename from libs/debugger-ui/.eslintrc rename to libs/remix-ui/debugger-ui/.eslintrc index 5fdec107302..977f139a099 100644 --- a/libs/debugger-ui/.eslintrc +++ b/libs/remix-ui/debugger-ui/.eslintrc @@ -243,6 +243,6 @@ }, "settings": { "react": { "version": "detect" } }, "plugins": ["import", "jsx-a11y", "react", "react-hooks"], - "extends": ["../../.eslintrc"], + "extends": ["../../../.eslintrc"], "ignorePatterns": ["!**/*"] } diff --git a/libs/debugger-ui/README.md b/libs/remix-ui/debugger-ui/README.md similarity index 100% rename from libs/debugger-ui/README.md rename to libs/remix-ui/debugger-ui/README.md diff --git a/libs/debugger-ui/babel-jest.config.json b/libs/remix-ui/debugger-ui/babel-jest.config.json similarity index 100% rename from libs/debugger-ui/babel-jest.config.json rename to libs/remix-ui/debugger-ui/babel-jest.config.json diff --git a/libs/debugger-ui/jest.config.js b/libs/remix-ui/debugger-ui/jest.config.js similarity index 100% rename from libs/debugger-ui/jest.config.js rename to libs/remix-ui/debugger-ui/jest.config.js diff --git a/libs/debugger-ui/src/index.ts b/libs/remix-ui/debugger-ui/src/index.ts similarity index 100% rename from libs/debugger-ui/src/index.ts rename to libs/remix-ui/debugger-ui/src/index.ts diff --git a/libs/debugger-ui/src/lib/button-navigator/button-navigator.css b/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.css similarity index 100% rename from libs/debugger-ui/src/lib/button-navigator/button-navigator.css rename to libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.css diff --git a/libs/debugger-ui/src/lib/button-navigator/button-navigator.tsx b/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx similarity index 100% rename from libs/debugger-ui/src/lib/button-navigator/button-navigator.tsx rename to libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx diff --git a/libs/debugger-ui/src/lib/debugger-ui.css b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.css similarity index 100% rename from libs/debugger-ui/src/lib/debugger-ui.css rename to libs/remix-ui/debugger-ui/src/lib/debugger-ui.css diff --git a/libs/debugger-ui/src/lib/debugger-ui.spec.tsx b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.spec.tsx similarity index 100% rename from libs/debugger-ui/src/lib/debugger-ui.spec.tsx rename to libs/remix-ui/debugger-ui/src/lib/debugger-ui.spec.tsx diff --git a/libs/debugger-ui/src/lib/debugger-ui.tsx b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx similarity index 100% rename from libs/debugger-ui/src/lib/debugger-ui.tsx rename to libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx diff --git a/libs/debugger-ui/src/lib/slider/slider.tsx b/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx similarity index 100% rename from libs/debugger-ui/src/lib/slider/slider.tsx rename to libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx diff --git a/libs/debugger-ui/src/lib/step-manager/step-manager.tsx b/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx similarity index 100% rename from libs/debugger-ui/src/lib/step-manager/step-manager.tsx rename to libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx diff --git a/libs/debugger-ui/src/lib/tx-browser/tx-browser.css b/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.css similarity index 100% rename from libs/debugger-ui/src/lib/tx-browser/tx-browser.css rename to libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.css diff --git a/libs/debugger-ui/src/lib/tx-browser/tx-browser.tsx b/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx similarity index 100% rename from libs/debugger-ui/src/lib/tx-browser/tx-browser.tsx rename to libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx diff --git a/libs/debugger-ui/src/lib/vm-debugger/assembly-items.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx similarity index 100% rename from libs/debugger-ui/src/lib/vm-debugger/assembly-items.tsx rename to libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx diff --git a/libs/debugger-ui/src/lib/vm-debugger/calldata-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/calldata-panel.tsx similarity index 100% rename from libs/debugger-ui/src/lib/vm-debugger/calldata-panel.tsx rename to libs/remix-ui/debugger-ui/src/lib/vm-debugger/calldata-panel.tsx diff --git a/libs/debugger-ui/src/lib/vm-debugger/callstack-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/callstack-panel.tsx similarity index 100% rename from libs/debugger-ui/src/lib/vm-debugger/callstack-panel.tsx rename to libs/remix-ui/debugger-ui/src/lib/vm-debugger/callstack-panel.tsx diff --git a/libs/debugger-ui/src/lib/vm-debugger/code-list-view.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx similarity index 100% rename from libs/debugger-ui/src/lib/vm-debugger/code-list-view.tsx rename to libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx diff --git a/libs/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx similarity index 100% rename from libs/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx rename to libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx diff --git a/libs/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx similarity index 100% rename from libs/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx rename to libs/remix-ui/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx diff --git a/libs/debugger-ui/src/lib/vm-debugger/function-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx similarity index 100% rename from libs/debugger-ui/src/lib/vm-debugger/function-panel.tsx rename to libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx diff --git a/libs/debugger-ui/src/lib/vm-debugger/memory-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/memory-panel.tsx similarity index 100% rename from libs/debugger-ui/src/lib/vm-debugger/memory-panel.tsx rename to libs/remix-ui/debugger-ui/src/lib/vm-debugger/memory-panel.tsx diff --git a/libs/debugger-ui/src/lib/vm-debugger/solidity-state.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-state.tsx similarity index 100% rename from libs/debugger-ui/src/lib/vm-debugger/solidity-state.tsx rename to libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-state.tsx diff --git a/libs/debugger-ui/src/lib/vm-debugger/stack-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx similarity index 100% rename from libs/debugger-ui/src/lib/vm-debugger/stack-panel.tsx rename to libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx diff --git a/libs/debugger-ui/src/lib/vm-debugger/step-detail.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx similarity index 100% rename from libs/debugger-ui/src/lib/vm-debugger/step-detail.tsx rename to libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx diff --git a/libs/debugger-ui/src/lib/vm-debugger/storage-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/storage-panel.tsx similarity index 100% rename from libs/debugger-ui/src/lib/vm-debugger/storage-panel.tsx rename to libs/remix-ui/debugger-ui/src/lib/vm-debugger/storage-panel.tsx diff --git a/libs/debugger-ui/src/lib/vm-debugger/styles/assembly-items.css b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/styles/assembly-items.css similarity index 100% rename from libs/debugger-ui/src/lib/vm-debugger/styles/assembly-items.css rename to libs/remix-ui/debugger-ui/src/lib/vm-debugger/styles/assembly-items.css diff --git a/libs/debugger-ui/src/lib/vm-debugger/styles/dropdown-panel.css b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/styles/dropdown-panel.css similarity index 100% rename from libs/debugger-ui/src/lib/vm-debugger/styles/dropdown-panel.css rename to libs/remix-ui/debugger-ui/src/lib/vm-debugger/styles/dropdown-panel.css diff --git a/libs/debugger-ui/src/lib/vm-debugger/utils/solidity-type-formatter.ts b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/utils/solidity-type-formatter.ts similarity index 100% rename from libs/debugger-ui/src/lib/vm-debugger/utils/solidity-type-formatter.ts rename to libs/remix-ui/debugger-ui/src/lib/vm-debugger/utils/solidity-type-formatter.ts diff --git a/libs/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx similarity index 100% rename from libs/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx rename to libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx diff --git a/libs/debugger-ui/tsconfig.json b/libs/remix-ui/debugger-ui/tsconfig.json similarity index 100% rename from libs/debugger-ui/tsconfig.json rename to libs/remix-ui/debugger-ui/tsconfig.json diff --git a/libs/debugger-ui/tsconfig.lib.json b/libs/remix-ui/debugger-ui/tsconfig.lib.json similarity index 100% rename from libs/debugger-ui/tsconfig.lib.json rename to libs/remix-ui/debugger-ui/tsconfig.lib.json diff --git a/libs/debugger-ui/tsconfig.spec.json b/libs/remix-ui/debugger-ui/tsconfig.spec.json similarity index 100% rename from libs/debugger-ui/tsconfig.spec.json rename to libs/remix-ui/debugger-ui/tsconfig.spec.json diff --git a/libs/remix-ui/tree-view/.babelrc b/libs/remix-ui/tree-view/.babelrc new file mode 100644 index 00000000000..09d67939cc9 --- /dev/null +++ b/libs/remix-ui/tree-view/.babelrc @@ -0,0 +1,4 @@ +{ + "presets": ["@nrwl/react/babel"], + "plugins": [] +} diff --git a/libs/remix-ui/tree-view/.eslintrc b/libs/remix-ui/tree-view/.eslintrc new file mode 100644 index 00000000000..977f139a099 --- /dev/null +++ b/libs/remix-ui/tree-view/.eslintrc @@ -0,0 +1,248 @@ +{ + "rules": { + "array-callback-return": "warn", + "dot-location": ["warn", "property"], + "eqeqeq": ["warn", "smart"], + "new-parens": "warn", + "no-caller": "warn", + "no-cond-assign": ["warn", "except-parens"], + "no-const-assign": "warn", + "no-control-regex": "warn", + "no-delete-var": "warn", + "no-dupe-args": "warn", + "no-dupe-keys": "warn", + "no-duplicate-case": "warn", + "no-empty-character-class": "warn", + "no-empty-pattern": "warn", + "no-eval": "warn", + "no-ex-assign": "warn", + "no-extend-native": "warn", + "no-extra-bind": "warn", + "no-extra-label": "warn", + "no-fallthrough": "warn", + "no-func-assign": "warn", + "no-implied-eval": "warn", + "no-invalid-regexp": "warn", + "no-iterator": "warn", + "no-label-var": "warn", + "no-labels": ["warn", { "allowLoop": true, "allowSwitch": false }], + "no-lone-blocks": "warn", + "no-loop-func": "warn", + "no-mixed-operators": [ + "warn", + { + "groups": [ + ["&", "|", "^", "~", "<<", ">>", ">>>"], + ["==", "!=", "===", "!==", ">", ">=", "<", "<="], + ["&&", "||"], + ["in", "instanceof"] + ], + "allowSamePrecedence": false + } + ], + "no-multi-str": "warn", + "no-native-reassign": "warn", + "no-negated-in-lhs": "warn", + "no-new-func": "warn", + "no-new-object": "warn", + "no-new-symbol": "warn", + "no-new-wrappers": "warn", + "no-obj-calls": "warn", + "no-octal": "warn", + "no-octal-escape": "warn", + "no-redeclare": "warn", + "no-regex-spaces": "warn", + "no-restricted-syntax": ["warn", "WithStatement"], + "no-script-url": "warn", + "no-self-assign": "warn", + "no-self-compare": "warn", + "no-sequences": "warn", + "no-shadow-restricted-names": "warn", + "no-sparse-arrays": "warn", + "no-template-curly-in-string": "warn", + "no-this-before-super": "warn", + "no-throw-literal": "warn", + "no-restricted-globals": [ + "error", + "addEventListener", + "blur", + "close", + "closed", + "confirm", + "defaultStatus", + "defaultstatus", + "event", + "external", + "find", + "focus", + "frameElement", + "frames", + "history", + "innerHeight", + "innerWidth", + "length", + "location", + "locationbar", + "menubar", + "moveBy", + "moveTo", + "name", + "onblur", + "onerror", + "onfocus", + "onload", + "onresize", + "onunload", + "open", + "opener", + "opera", + "outerHeight", + "outerWidth", + "pageXOffset", + "pageYOffset", + "parent", + "print", + "removeEventListener", + "resizeBy", + "resizeTo", + "screen", + "screenLeft", + "screenTop", + "screenX", + "screenY", + "scroll", + "scrollbars", + "scrollBy", + "scrollTo", + "scrollX", + "scrollY", + "self", + "status", + "statusbar", + "stop", + "toolbar", + "top" + ], + "no-unexpected-multiline": "warn", + "no-unreachable": "warn", + "no-unused-expressions": [ + "error", + { + "allowShortCircuit": true, + "allowTernary": true, + "allowTaggedTemplates": true + } + ], + "no-unused-labels": "warn", + "no-useless-computed-key": "warn", + "no-useless-concat": "warn", + "no-useless-escape": "warn", + "no-useless-rename": [ + "warn", + { + "ignoreDestructuring": false, + "ignoreImport": false, + "ignoreExport": false + } + ], + "no-with": "warn", + "no-whitespace-before-property": "warn", + "react-hooks/exhaustive-deps": "warn", + "require-yield": "warn", + "rest-spread-spacing": ["warn", "never"], + "strict": ["warn", "never"], + "unicode-bom": ["warn", "never"], + "use-isnan": "warn", + "valid-typeof": "warn", + "no-restricted-properties": [ + "error", + { + "object": "require", + "property": "ensure", + "message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting" + }, + { + "object": "System", + "property": "import", + "message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting" + } + ], + "getter-return": "warn", + "import/first": "error", + "import/no-amd": "error", + "import/no-webpack-loader-syntax": "error", + "react/forbid-foreign-prop-types": ["warn", { "allowInPropTypes": true }], + "react/jsx-no-comment-textnodes": "warn", + "react/jsx-no-duplicate-props": "warn", + "react/jsx-no-target-blank": "warn", + "react/jsx-no-undef": "error", + "react/jsx-pascal-case": ["warn", { "allowAllCaps": true, "ignore": [] }], + "react/jsx-uses-react": "warn", + "react/jsx-uses-vars": "warn", + "react/no-danger-with-children": "warn", + "react/no-direct-mutation-state": "warn", + "react/no-is-mounted": "warn", + "react/no-typos": "error", + "react/react-in-jsx-scope": "error", + "react/require-render-return": "error", + "react/style-prop-object": "warn", + "react/jsx-no-useless-fragment": "warn", + "jsx-a11y/accessible-emoji": "warn", + "jsx-a11y/alt-text": "warn", + "jsx-a11y/anchor-has-content": "warn", + "jsx-a11y/anchor-is-valid": [ + "warn", + { "aspects": ["noHref", "invalidHref"] } + ], + "jsx-a11y/aria-activedescendant-has-tabindex": "warn", + "jsx-a11y/aria-props": "warn", + "jsx-a11y/aria-proptypes": "warn", + "jsx-a11y/aria-role": "warn", + "jsx-a11y/aria-unsupported-elements": "warn", + "jsx-a11y/heading-has-content": "warn", + "jsx-a11y/iframe-has-title": "warn", + "jsx-a11y/img-redundant-alt": "warn", + "jsx-a11y/no-access-key": "warn", + "jsx-a11y/no-distracting-elements": "warn", + "jsx-a11y/no-redundant-roles": "warn", + "jsx-a11y/role-has-required-aria-props": "warn", + "jsx-a11y/role-supports-aria-props": "warn", + "jsx-a11y/scope": "warn", + "react-hooks/rules-of-hooks": "error", + "default-case": "off", + "no-dupe-class-members": "off", + "no-undef": "off", + "@typescript-eslint/consistent-type-assertions": "warn", + "no-array-constructor": "off", + "@typescript-eslint/no-array-constructor": "warn", + "@typescript-eslint/no-namespace": "error", + "no-use-before-define": "off", + "@typescript-eslint/no-use-before-define": [ + "warn", + { + "functions": false, + "classes": false, + "variables": false, + "typedefs": false + } + ], + "no-unused-vars": "off", + "@typescript-eslint/no-unused-vars": [ + "warn", + { "args": "none", "ignoreRestSiblings": true } + ], + "no-useless-constructor": "off", + "@typescript-eslint/no-useless-constructor": "warn" + }, + "env": { + "browser": true, + "commonjs": true, + "es6": true, + "jest": true, + "node": true + }, + "settings": { "react": { "version": "detect" } }, + "plugins": ["import", "jsx-a11y", "react", "react-hooks"], + "extends": ["../../../.eslintrc"], + "ignorePatterns": ["!**/*"] +} diff --git a/libs/remix-ui/tree-view/README.md b/libs/remix-ui/tree-view/README.md new file mode 100644 index 00000000000..8ee97af66b1 --- /dev/null +++ b/libs/remix-ui/tree-view/README.md @@ -0,0 +1,7 @@ +# remix-ui-tree-view + +This library was generated with [Nx](https://nx.dev). + +## Running unit tests + +Run `nx test remix-ui-tree-view` to execute the unit tests via [Jest](https://jestjs.io). diff --git a/libs/remix-ui/tree-view/babel-jest.config.json b/libs/remix-ui/tree-view/babel-jest.config.json new file mode 100644 index 00000000000..bf04d5f81f7 --- /dev/null +++ b/libs/remix-ui/tree-view/babel-jest.config.json @@ -0,0 +1,14 @@ +{ + "presets": [ + [ + "@babel/preset-env", + { + "targets": { + "node": "current" + } + } + ], + "@babel/preset-typescript", + "@babel/preset-react" + ] +} diff --git a/libs/remix-ui/tree-view/jest.config.js b/libs/remix-ui/tree-view/jest.config.js new file mode 100644 index 00000000000..ea99fbe3c50 --- /dev/null +++ b/libs/remix-ui/tree-view/jest.config.js @@ -0,0 +1,12 @@ +module.exports = { + name: 'remix-ui-tree-view', + preset: '../../../jest.config.js', + transform: { + '^.+\\.[tj]sx?$': [ + 'babel-jest', + { cwd: __dirname, configFile: './babel-jest.config.json' } + ] + }, + moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'], + coverageDirectory: '../../../coverage/libs/remix-ui/tree-view' +}; diff --git a/libs/remix-ui/tree-view/src/index.ts b/libs/remix-ui/tree-view/src/index.ts new file mode 100644 index 00000000000..875d8ff6e2b --- /dev/null +++ b/libs/remix-ui/tree-view/src/index.ts @@ -0,0 +1 @@ +export * from './lib/remix-ui-tree-view'; diff --git a/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.css b/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.css new file mode 100644 index 00000000000..e69de29bb2d diff --git a/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.spec.tsx b/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.spec.tsx new file mode 100644 index 00000000000..fdeff483512 --- /dev/null +++ b/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.spec.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { render } from '@testing-library/react'; + +import RemixUiTreeView from './remix-ui-tree-view'; + +describe(' RemixUiTreeView', () => { + it('should render successfully', () => { + const { baseElement } = render(); + expect(baseElement).toBeTruthy(); + }); +}); diff --git a/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.tsx b/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.tsx new file mode 100644 index 00000000000..d2544cbd836 --- /dev/null +++ b/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import './remix-ui-tree-view.css'; + +/* eslint-disable-next-line */ +export interface RemixUiTreeViewProps {} + +export const RemixUiTreeView = (props: RemixUiTreeViewProps) => { + return ( +
+

Welcome to remix-ui-tree-view!

+
+ ); +}; + +export default RemixUiTreeView; diff --git a/libs/remix-ui/tree-view/tsconfig.json b/libs/remix-ui/tree-view/tsconfig.json new file mode 100644 index 00000000000..42b7ee636f5 --- /dev/null +++ b/libs/remix-ui/tree-view/tsconfig.json @@ -0,0 +1,19 @@ +{ + "extends": "../../../tsconfig.json", + "compilerOptions": { + "jsx": "react", + "allowJs": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ] +} diff --git a/libs/remix-ui/tree-view/tsconfig.lib.json b/libs/remix-ui/tree-view/tsconfig.lib.json new file mode 100644 index 00000000000..b560bc4dec6 --- /dev/null +++ b/libs/remix-ui/tree-view/tsconfig.lib.json @@ -0,0 +1,13 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../dist/out-tsc", + "types": ["node"] + }, + "files": [ + "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts", + "../../../node_modules/@nrwl/react/typings/image.d.ts" + ], + "exclude": ["**/*.spec.ts", "**/*.spec.tsx"], + "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"] +} diff --git a/libs/remix-ui/tree-view/tsconfig.spec.json b/libs/remix-ui/tree-view/tsconfig.spec.json new file mode 100644 index 00000000000..1798b378a99 --- /dev/null +++ b/libs/remix-ui/tree-view/tsconfig.spec.json @@ -0,0 +1,15 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../dist/out-tsc", + "module": "commonjs", + "types": ["jest", "node"] + }, + "include": [ + "**/*.spec.ts", + "**/*.spec.tsx", + "**/*.spec.js", + "**/*.spec.jsx", + "**/*.d.ts" + ] +} diff --git a/nx.json b/nx.json index fef6f1a9fbc..ed25cf3c377 100644 --- a/nx.json +++ b/nx.json @@ -69,6 +69,12 @@ }, "debugger-ui": { "tags": [] + }, + "remix-ui-tree-view": { + "tags": [] + }, + "remix-ui-debugger-ui": { + "tags": [] } } } diff --git a/tsconfig.json b/tsconfig.json index 6ddfa7202b2..bcc80da5dd7 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -25,7 +25,9 @@ "@remix-project/remix-tests": ["dist/libs/remix-tests/src/index.js"], "@remix-project/remix-url-resolver": ["dist/libs/remix-url-resolver/index.js"], "@remix-project/remixd": ["dist/libs/remixd/index.js"], - "@remix-project/debugger-ui": ["libs/debugger-ui/src/index.ts"] + "@remix-project/debugger-ui": ["libs/debugger-ui/src/index.ts"], + "@remix-ui/tree-view": ["libs/remix-ui/tree-view/src/index.ts"], + "@remix-ui/debugger-ui": ["libs/remix-ui/debugger-ui/src/index.ts"] } }, "exclude": ["node_modules", "tmp"] diff --git a/workspace.json b/workspace.json index 6ab832657b8..de8e8103939 100644 --- a/workspace.json +++ b/workspace.json @@ -509,6 +509,60 @@ } } } + }, + "remix-ui-tree-view": { + "root": "libs/remix-ui/tree-view", + "sourceRoot": "libs/remix-ui/tree-view/src", + "projectType": "library", + "schematics": {}, + "architect": { + "lint": { + "builder": "@nrwl/linter:lint", + "options": { + "linter": "eslint", + "tsConfig": [ + "libs/remix-ui/tree-view/tsconfig.lib.json", + "libs/remix-ui/tree-view/tsconfig.spec.json" + ], + "exclude": ["**/node_modules/**", "!libs/remix-ui/tree-view/**/*"] + } + }, + "test": { + "builder": "@nrwl/jest:jest", + "options": { + "jestConfig": "libs/remix-ui/tree-view/jest.config.js", + "tsConfig": "libs/remix-ui/tree-view/tsconfig.spec.json", + "passWithNoTests": true + } + } + } + }, + "remix-ui-debugger-ui": { + "root": "libs/remix-ui/debugger-ui", + "sourceRoot": "libs/remix-ui/debugger-ui/src", + "projectType": "library", + "schematics": {}, + "architect": { + "lint": { + "builder": "@nrwl/linter:lint", + "options": { + "linter": "eslint", + "tsConfig": [ + "libs/remix-ui/debugger-ui/tsconfig.lib.json", + "libs/remix-ui/debugger-ui/tsconfig.spec.json" + ], + "exclude": ["**/node_modules/**", "!libs/remix-ui/debugger-ui/**/*"] + } + }, + "test": { + "builder": "@nrwl/jest:jest", + "options": { + "jestConfig": "libs/remix-ui/debugger-ui/jest.config.js", + "tsConfig": "libs/remix-ui/debugger-ui/tsconfig.spec.json", + "passWithNoTests": true + } + } + } } }, "cli": { From f5e189f4339b2e59b2a8cece38823bd81dfb238d Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Wed, 2 Sep 2020 16:12:45 +0100 Subject: [PATCH 08/63] Restore debugger UI code --- .../src/app/tabs/debugger/debuggerUI.js | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js b/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js index 03417c5c3d2..dc3ce73c57b 100644 --- a/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js +++ b/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js @@ -1,8 +1,5 @@ -import React from 'react'; -import ReactDOM from 'react-dom' -import { StepManager } from '@remix-project/debugger-ui' var TxBrowser = require('./debuggerUI/TxBrowser') -// var StepManagerUI = require('./debuggerUI/StepManager') +var StepManagerUI = require('./debuggerUI/StepManager') var VmDebugger = require('./debuggerUI/VmDebugger') var toaster = require('../../ui/tooltip') @@ -61,7 +58,7 @@ class DebuggerUI { this.sourceHighlighter = new SourceHighlighter() this.startTxBrowser() - // this.stepManager = null + this.stepManager = null this.statusMessage = '' this.currentReceipt @@ -187,7 +184,7 @@ class DebuggerUI { this.listenToEvents() this.debugger.debug(blockNumber, txNumber, tx, () => { - // this.stepManager = new StepManagerUI(this.debugger.step_manager) + this.stepManager = new StepManagerUI(this.debugger.step_manager) this.vmDebugger = new VmDebugger(this.debugger.vmDebuggerLogic) this.txBrowser.setState({ blockNumber, txNumber, debugging: true }) this.renderDebugger() @@ -229,7 +226,7 @@ class DebuggerUI { render () { this.debuggerPanelsView = yo`
` this.debuggerHeadPanelsView = yo`
` - this.stepManagerView = yo`
` + this.stepManagerView = yo`
` var view = yo`
@@ -259,10 +256,10 @@ class DebuggerUI { yo.update(this.debuggerPanelsView, yo`
`) yo.update(this.stepManagerView, yo`
`) if (this.vmDebugger) this.vmDebugger.remove() - // if (this.stepManager) this.stepManager.remove() + if (this.stepManager) this.stepManager.remove() if (this.txBrowser) this.txBrowser.setState({debugging: false}) this.vmDebugger = null - // this.stepManager = null + this.stepManager = null if (this.debugger) delete this.debugger this.event.trigger('traceUnloaded') } @@ -274,7 +271,7 @@ class DebuggerUI { renderDebugger () { yo.update(this.debuggerHeadPanelsView, this.vmDebugger.renderHead()) yo.update(this.debuggerPanelsView, this.vmDebugger.render()) - ReactDOM.render(, document.getElementById('stepManager-ui')) + yo.update(this.stepManagerView, this.stepManager.render()) } } From 734d67ac0f6ec222b66e71a47abbe403b5ef67ef Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Thu, 3 Sep 2020 10:28:06 +0100 Subject: [PATCH 09/63] Custom hook --- .../tree-view/src/lib/hooks/extract-data.tsx | 5 ++ .../tree-view/src/lib/remix-ui-tree-view.css | 32 +++++++++++++ .../tree-view/src/lib/remix-ui-tree-view.tsx | 47 +++++++++++++++---- 3 files changed, 74 insertions(+), 10 deletions(-) create mode 100644 libs/remix-ui/tree-view/src/lib/hooks/extract-data.tsx diff --git a/libs/remix-ui/tree-view/src/lib/hooks/extract-data.tsx b/libs/remix-ui/tree-view/src/lib/hooks/extract-data.tsx new file mode 100644 index 00000000000..8564ed6b2d4 --- /dev/null +++ b/libs/remix-ui/tree-view/src/lib/hooks/extract-data.tsx @@ -0,0 +1,5 @@ +import React from 'react' + +const useExtractData = () => { + +} \ No newline at end of file diff --git a/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.css b/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.css index e69de29bb2d..7e8fbee4054 100644 --- a/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.css +++ b/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.css @@ -0,0 +1,32 @@ +.li_tv { + list-style-type: none; + -webkit-margin-before: 0px; + -webkit-margin-after: 0px; + -webkit-margin-start: 0px; + -webkit-margin-end: 0px; + -webkit-padding-start: 0px; + } + .ul_tv { + list-style-type: none; + -webkit-margin-before: 0px; + -webkit-margin-after: 0px; + -webkit-margin-start: 0px; + -webkit-margin-end: 0px; + -webkit-padding-start: 0px; + } + .caret_tv { + width: 10px; + flex-shrink: 0; + padding-right: 5px; + } + .label_item { + word-break: break-all; + } + .label_key { + min-width: 15%; + max-width: 80%; + word-break: break-word; + } + .label_value { + min-width: 10%; + } \ No newline at end of file diff --git a/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.tsx b/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.tsx index d2544cbd836..c2a03f9bfba 100644 --- a/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.tsx +++ b/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.tsx @@ -1,16 +1,43 @@ -import React from 'react'; +import React, { useState } from 'react' -import './remix-ui-tree-view.css'; +import './remix-ui-tree-view.css' -/* eslint-disable-next-line */ -export interface RemixUiTreeViewProps {} +export interface RemixUiTreeViewProps { + data: [] +} export const RemixUiTreeView = (props: RemixUiTreeViewProps) => { return ( -
-

Welcome to remix-ui-tree-view!

-
- ); -}; +
    +
  • +
    +
    +
    + +
    + + +
    +     +
    +
    • +
  • +
    +
    +
    + +
    + + +
    +     +
    +
    • +
) +} -export default RemixUiTreeView; +export default RemixUiTreeView From 2ac2af11ee3f3f74b489b18025727b48989f1c96 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Fri, 4 Sep 2020 12:43:34 +0100 Subject: [PATCH 10/63] Treeview lib --- .../src/app/tabs/debugger/debuggerUI.js | 25 +++++++++ babel.config.js | 2 +- .../debugger-ui/src/hooks/extract-data.tsx | 51 +++++++++++++++++++ .../debugger-ui/src/lib/debugger-ui.spec.tsx | 11 ---- .../src/lib/vm-debugger/dropdown-panel.tsx | 35 ++++--------- libs/remix-ui/debugger-ui/src/types/index.ts | 30 +++++++++++ libs/remix-ui/tree-view/src/index.ts | 1 + .../tree-view/src/lib/hooks/extract-data.tsx | 5 -- .../src/lib/remix-ui-tree-view.spec.tsx | 11 ---- .../tree-view/src/lib/remix-ui-tree-view.tsx | 47 ++++------------- .../src/lib/tree-view-item/tree-view-item.css | 0 .../src/lib/tree-view-item/tree-view-item.tsx | 21 ++++++++ libs/remix-ui/tree-view/src/types/index.ts | 4 ++ workspace.json | 2 +- 14 files changed, 154 insertions(+), 91 deletions(-) create mode 100644 libs/remix-ui/debugger-ui/src/hooks/extract-data.tsx delete mode 100644 libs/remix-ui/debugger-ui/src/lib/debugger-ui.spec.tsx create mode 100644 libs/remix-ui/debugger-ui/src/types/index.ts delete mode 100644 libs/remix-ui/tree-view/src/lib/hooks/extract-data.tsx delete mode 100644 libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.spec.tsx create mode 100644 libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.css create mode 100644 libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx create mode 100644 libs/remix-ui/tree-view/src/types/index.ts diff --git a/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js b/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js index dc3ce73c57b..a8205a4158b 100644 --- a/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js +++ b/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js @@ -1,3 +1,7 @@ +import React from 'react' +import ReactDOM from 'react-dom' +import { TreeView, TreeViewItem } from '@remix-ui/tree-view' + var TxBrowser = require('./debuggerUI/TxBrowser') var StepManagerUI = require('./debuggerUI/StepManager') var VmDebugger = require('./debuggerUI/VmDebugger') @@ -243,6 +247,7 @@ class DebuggerUI { ${this.debuggerHeadPanelsView}
${this.statusMessage}
${this.debuggerPanelsView} +
` if (!this.view) { @@ -272,6 +277,26 @@ class DebuggerUI { yo.update(this.debuggerHeadPanelsView, this.vmDebugger.renderHead()) yo.update(this.debuggerPanelsView, this.vmDebugger.render()) yo.update(this.stepManagerView, this.stepManager.render()) + ReactDOM.render( + + + Item 2} /> + + + + + + + + + + + + + + + + , document.getElementById('treeViewReact')) } } diff --git a/babel.config.js b/babel.config.js index bc65f8695f7..41068f8f4f7 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,4 +1,4 @@ module.exports = { - "presets": ["@babel/preset-react"], + "presets": ["@babel/preset-react", "@babel/preset-typescript"], "plugins": ["@babel/plugin-transform-modules-commonjs"] } \ No newline at end of file diff --git a/libs/remix-ui/debugger-ui/src/hooks/extract-data.tsx b/libs/remix-ui/debugger-ui/src/hooks/extract-data.tsx new file mode 100644 index 00000000000..06e653a801b --- /dev/null +++ b/libs/remix-ui/debugger-ui/src/hooks/extract-data.tsx @@ -0,0 +1,51 @@ +import React, { useState, useEffect } from 'react' +import { ExtractData, ExtractFunc } from '../types' + +export const useExtractData = (json, extractFunc?): Array<{ [key: string]: ExtractData }> => { + const [data, setData] = useState(null) + const extractDataDefault = (item, parent?) => { + const ret: ExtractData = {} + + if (item instanceof Array) { + ret.children = item.map((item, index) => { + return {key: index, value: item} + }) + ret.self = 'Array' + ret.isNode = true + ret.isLeaf = false + } else if (item instanceof Object) { + ret.children = Object.keys(item).map((key) => { + return {key: key, value: item[key]} + }) + ret.self = 'Object' + ret.isNode = true + ret.isLeaf = false + } else { + ret.self = item + ret.children = null + ret.isNode = false + ret.isLeaf = true + } + return ret + } + + useEffect(() => { + const data: Array<{ [key: string]: ExtractData }> = Object.keys(json).map((innerKey) => { + if (extractFunc) { + return { [innerKey]: extractFunc(json[innerKey], json) } + } else { + return { [innerKey]: extractDataDefault(json[innerKey], json) } + } + }) + + setData(data) + + return () => { + setData(null) + } + }, [json, extractFunc]) + + return data +} + +export default useExtractData \ No newline at end of file diff --git a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.spec.tsx b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.spec.tsx deleted file mode 100644 index 48e63a8426e..00000000000 --- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.spec.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; - -import DebuggerUi from './debugger-ui'; - -describe(' DebuggerUi', () => { - it('should render successfully', () => { - const { baseElement } = render(); - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx index ec9a0629940..66af8a6a920 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx @@ -1,31 +1,19 @@ import React, { useState, useRef, useEffect } from 'react' import AssemblyItems from './assembly-items' +/* eslint-disable-next-line */ +import { TreeView, TreeViewItem } from '../../../../tree-view/src/index' +import useExtractData from '../../hooks/extract-data' +import { ExtractData, ExtractFunc, DropdownPanelProps } from '../../types' + + import './styles/dropdown-panel.css' import EventManager from '../../../../../apps/remix-ide/src/lib/events' -import TreeView from '../../../../../apps/remix-ide/src/app/ui/TreeView' import copyToClipboard from '../../../../../apps/remix-ide/src/app/ui/copy-to-clipboard' -export interface DropdownPanelProps { - dropdownName: string, - opts: { - json: boolean, - displayContentOnly?: boolean, - css?: { - [key: string]: string - } - }, - codeView?: string[], - index?: number, - calldata?: { - [key: string]: string - }, - header?: string -} - export const DropdownPanel = (props: DropdownPanelProps) => { - const { dropdownName, opts, codeView, index, calldata, header } = props + const { dropdownName, opts, codeView, index, calldata, header, extractFunc } = props + const data = useExtractData(calldata, extractFunc) const event = new EventManager() - const treeView = new TreeView(opts) const dropdownRawEl = useRef(null) const [state, setState] = useState({ header: '', @@ -112,7 +100,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => { }) } - const update = function (data, header) { + const update = function (calldata, header) { setState(prevState => { return { ...prevState, @@ -122,7 +110,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => { display: 'none' }, dropdownRawContent: { - innerText: JSON.stringify(data, null, '\t'), + innerText: JSON.stringify(calldata, null, '\t'), display: 'block' } } @@ -140,9 +128,6 @@ export const DropdownPanel = (props: DropdownPanelProps) => { }) } message('') - if (state.json) { - treeView.update(data) - } } const hide = () => { diff --git a/libs/remix-ui/debugger-ui/src/types/index.ts b/libs/remix-ui/debugger-ui/src/types/index.ts new file mode 100644 index 00000000000..331c2af838c --- /dev/null +++ b/libs/remix-ui/debugger-ui/src/types/index.ts @@ -0,0 +1,30 @@ +export interface ExtractData { + children?: Array<{key: number | string, value: string}> | { key: number | string, value: string } + self?: string, + isNode?: boolean, + isLeaf?: boolean, + isArray?: boolean, + isStruct?: boolean, + isMapping?: boolean, + type?: string +} + +export type ExtractFunc = (json: any, parent?: any) => ExtractData + +export interface DropdownPanelProps { + dropdownName: string, + opts: { + json: boolean, + displayContentOnly?: boolean, + css?: { + [key: string]: string + } + }, + codeView?: string[], + index?: number, + calldata?: { + [key: string]: string + }, + header?: string, + extractFunc?: ExtractFunc +} \ No newline at end of file diff --git a/libs/remix-ui/tree-view/src/index.ts b/libs/remix-ui/tree-view/src/index.ts index 875d8ff6e2b..639d70eff22 100644 --- a/libs/remix-ui/tree-view/src/index.ts +++ b/libs/remix-ui/tree-view/src/index.ts @@ -1 +1,2 @@ +export * from './lib/tree-view-item/tree-view-item'; export * from './lib/remix-ui-tree-view'; diff --git a/libs/remix-ui/tree-view/src/lib/hooks/extract-data.tsx b/libs/remix-ui/tree-view/src/lib/hooks/extract-data.tsx deleted file mode 100644 index 8564ed6b2d4..00000000000 --- a/libs/remix-ui/tree-view/src/lib/hooks/extract-data.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react' - -const useExtractData = () => { - -} \ No newline at end of file diff --git a/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.spec.tsx b/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.spec.tsx deleted file mode 100644 index fdeff483512..00000000000 --- a/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.spec.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; - -import RemixUiTreeView from './remix-ui-tree-view'; - -describe(' RemixUiTreeView', () => { - it('should render successfully', () => { - const { baseElement } = render(); - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.tsx b/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.tsx index c2a03f9bfba..2396e692ba1 100644 --- a/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.tsx +++ b/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.tsx @@ -1,43 +1,16 @@ -import React, { useState } from 'react' +import React from 'react' +import { TreeViewProps } from '../types' import './remix-ui-tree-view.css' -export interface RemixUiTreeViewProps { - data: [] -} - -export const RemixUiTreeView = (props: RemixUiTreeViewProps) => { +export const TreeView = (props: TreeViewProps) => { + const { children, key, ...otherProps } = props + return ( -
    -
  • -
    -
    -
    - -
    - - -
    -     -
    -
    • -
  • -
    -
    -
    - -
    - - -
    -     -
    -
    • -
) +
    + { children } +
+ ) } -export default RemixUiTreeView +export default TreeView diff --git a/libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.css b/libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.css new file mode 100644 index 00000000000..e69de29bb2d 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 new file mode 100644 index 00000000000..796a8c6a04e --- /dev/null +++ b/libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx @@ -0,0 +1,21 @@ +import React, { useState } from 'react' + +import './tree-view-item.css' + +export const TreeViewItem = ({ key, children, label, ...otherProps }) => { + const [isExpanded, setIsExpanded] = useState(false) + + return ( +
  • +
    setIsExpanded(!isExpanded)}> +
    + + { label } + +
    + { isExpanded ? children : null } +
    • + ); +}; + +export default TreeViewItem; diff --git a/libs/remix-ui/tree-view/src/types/index.ts b/libs/remix-ui/tree-view/src/types/index.ts new file mode 100644 index 00000000000..800d92d40dc --- /dev/null +++ b/libs/remix-ui/tree-view/src/types/index.ts @@ -0,0 +1,4 @@ +export interface TreeViewProps { + children?: React.ReactNode, + key: string +} \ No newline at end of file diff --git a/workspace.json b/workspace.json index de8e8103939..073950cfc84 100644 --- a/workspace.json +++ b/workspace.json @@ -469,7 +469,7 @@ "projectType": "library", "schematics": {}, "architect": { - "lint": { + "lint": { "builder": "@nrwl/linter:lint", "options": { "linter": "eslint", From 0a1363f2eb4e0cc2edb585bbbd6b59761c0876f4 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Mon, 7 Sep 2020 17:04:49 +0100 Subject: [PATCH 11/63] Put vm debugger components together --- .../debugger-ui/src/hooks/extract-data.tsx | 43 +++++---- .../debugger-ui/src/lib/debugger-ui.tsx | 2 + .../src/lib/vm-debugger/code-list-view.tsx | 20 +++-- .../src/lib/vm-debugger/dropdown-panel.tsx | 51 +++++++++-- .../src/lib/vm-debugger/solidity-locals.tsx | 44 +++++++++ .../src/lib/vm-debugger/solidity-state.tsx | 39 +++++++- .../utils/solidity-type-formatter.ts | 0 .../src/lib/vm-debugger/vm-debugger.tsx | 90 ++++++++++++++++++- libs/remix-ui/debugger-ui/src/types/index.ts | 14 +-- .../src/utils/solidityTypeFormatter.ts | 42 +++++++++ .../src/lib/tree-view-item/tree-view-item.tsx | 10 ++- libs/remix-ui/tree-view/src/types/index.ts | 6 ++ 12 files changed, 312 insertions(+), 49 deletions(-) create mode 100644 libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx delete mode 100644 libs/remix-ui/debugger-ui/src/lib/vm-debugger/utils/solidity-type-formatter.ts create mode 100644 libs/remix-ui/debugger-ui/src/utils/solidityTypeFormatter.ts diff --git a/libs/remix-ui/debugger-ui/src/hooks/extract-data.tsx b/libs/remix-ui/debugger-ui/src/hooks/extract-data.tsx index 06e653a801b..3966329e4e4 100644 --- a/libs/remix-ui/debugger-ui/src/hooks/extract-data.tsx +++ b/libs/remix-ui/debugger-ui/src/hooks/extract-data.tsx @@ -1,9 +1,32 @@ import React, { useState, useEffect } from 'react' import { ExtractData, ExtractFunc } from '../types' -export const useExtractData = (json, extractFunc?): Array<{ [key: string]: ExtractData }> => { +export const useExtractData = (json, extractFunc?: ExtractFunc): Array<{ key: string, data: ExtractData }> => { const [data, setData] = useState(null) - const extractDataDefault = (item, parent?) => { + + useEffect(() => { + const data: Array<{ key: string, data: ExtractData }> = Object.keys(json).map((innerKey) => { + if (extractFunc) { + return { + key: innerKey, + data : extractFunc(json[innerKey], json) + } + } else { + return { + key: innerKey, + data: extractDataDefault(json[innerKey], json) + } + } + }) + + setData(data) + + return () => { + setData(null) + } + }, [json, extractFunc]) + + const extractDataDefault: ExtractFunc = (item, parent?) => { const ret: ExtractData = {} if (item instanceof Array) { @@ -29,22 +52,6 @@ export const useExtractData = (json, extractFunc?): Array<{ [key: string]: Extra return ret } - useEffect(() => { - const data: Array<{ [key: string]: ExtractData }> = Object.keys(json).map((innerKey) => { - if (extractFunc) { - return { [innerKey]: extractFunc(json[innerKey], json) } - } else { - return { [innerKey]: extractDataDefault(json[innerKey], json) } - } - }) - - setData(data) - - return () => { - setData(null) - } - }, [json, extractFunc]) - return data } diff --git a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx index 7340e4d2d45..bbd52fcabef 100644 --- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx @@ -1,4 +1,6 @@ import React from 'react' +import StepManager from './step-manager/step-manager' +import const DebuggerUI = () => { return ( diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx index c6b578431df..77cdc70b525 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx @@ -1,16 +1,23 @@ -import React, { useState, useRef } from 'react' +import React, { useState, useEffect } from 'react' import DropdownPanel from './dropdown-panel' -import EventManager from '../../../../../apps/remix-ide/src/lib/events' +/* eslint-disable-next-line */ +import EventManager from '../../../../../../apps/remix-ide/src/lib/events' -export const CodeListView = ({ vmDebuggerLogic }) => { +export const CodeListView = ({ vmDebuggerLogic, asm }) => { const event = new EventManager() const [state, setState] = useState({ - code: '', + code: [], address: '', itemSelected: null, index: null }) + useEffect(() => { + const { code, address, index } = asm + + changed(code, address, index) + }, [asm]) + const indexChanged = (index) => { if(index < 0) return setState(prevState => { @@ -21,10 +28,6 @@ export const CodeListView = ({ vmDebuggerLogic }) => { }) } - const reset = () => { - changed([], '', -1) - } - const changed = (code, address, index) => { if (state.address === address) { return indexChanged(index) @@ -36,7 +39,6 @@ export const CodeListView = ({ vmDebuggerLogic }) => { address } }) - this.basicPanel.setContent(this.renderAssemblyItems()) indexChanged(index) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx index 66af8a6a920..a5b090b2a18 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx @@ -3,15 +3,17 @@ import AssemblyItems from './assembly-items' /* eslint-disable-next-line */ import { TreeView, TreeViewItem } from '../../../../tree-view/src/index' import useExtractData from '../../hooks/extract-data' -import { ExtractData, ExtractFunc, DropdownPanelProps } from '../../types' +import { DropdownPanelProps, ExtractData } from '../../types' import './styles/dropdown-panel.css' -import EventManager from '../../../../../apps/remix-ide/src/lib/events' -import copyToClipboard from '../../../../../apps/remix-ide/src/app/ui/copy-to-clipboard' +/* eslint-disable-next-line */ +import EventManager from '../../../../../../apps/remix-ide/src/lib/events' +/* eslint-disable-next-line */ +import copyToClipboard from '../../../../../../apps/remix-ide/src/app/ui/copy-to-clipboard' export const DropdownPanel = (props: DropdownPanelProps) => { - const { dropdownName, opts, codeView, index, calldata, header, extractFunc } = props + const { dropdownName, opts, codeView, index, calldata, header, extractFunc, formatSelfFunc } = props const data = useExtractData(calldata, extractFunc) const event = new EventManager() const dropdownRawEl = useRef(null) @@ -150,9 +152,46 @@ export const DropdownPanel = (props: DropdownPanelProps) => { event.trigger('show', []) } - let content =
    Empty
    + const formatSelfDefault = (key: string, data: ExtractData) => { + return ( +
    + + +
    + ) + } + + const renderData = (item: ExtractData, key: string) => { + const children = (item.children || []).map((child) => { + const childKey = key + '/' + child.key + + return ( + + { renderData(child.value, childKey) } + + ) + }) + + if (children && children.length > 0 ) { + return ( + + { children } + + ) + } else { + return + } + } + + let content: JSX.Element | JSX.Element[] =
    Empty
    if (state.json) { - content = treeView.render({}, null) + content = data.map(item => { + return ( + + { renderData(item.data, item.key) } + + ) + }) } const title = !state.displayContentOnly ?
    diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx new file mode 100644 index 00000000000..e6f222da19b --- /dev/null +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx @@ -0,0 +1,44 @@ +import React from 'react' +import DropdownPanel from './dropdown-panel' +import { extractData } from '../../utils/solidityTypeFormatter' +import { ExtractData } from '../../types' + +export const SolidityLocals = () => { + + const formatSelf = (key: string, data: ExtractData) => { + let color = 'var(--primary)' + if (data.isArray || data.isStruct || data.isMapping) { + color = 'var(--info)' + } else if ( + data.type.indexOf('uint') === 0 || + data.type.indexOf('int') === 0 || + data.type.indexOf('bool') === 0 || + data.type.indexOf('enum') === 0 + ) { + color = 'var(--green)' + } else if (data.type === 'string') { + color = 'var(--teal)' + } else if (data.self == 0x0) { // eslint-disable-line + color = 'var(--gray)' + } + return ( + + ) + } + + return ( +
    + +
    + ) +} + +export default SolidityLocals \ No newline at end of file diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-state.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-state.tsx index c67d061da3d..9fdade9f4bf 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-state.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-state.tsx @@ -1,11 +1,44 @@ import React from 'react' import DropdownPanel from './dropdown-panel' +import { extractData } from '../../utils/solidityTypeFormatter' +import { ExtractData } from '../../types' export const SolidityState = () => { + const formatSelf = (key: string, data: ExtractData) => { + let color = 'var(--primary)' + if (data.isArray || data.isStruct || data.isMapping) { + color = 'var(--info)' + } else if ( + data.type.indexOf('uint') === 0 || + data.type.indexOf('int') === 0 || + data.type.indexOf('bool') === 0 || + data.type.indexOf('enum') === 0 + ) { + color = 'var(--green)' + } else if (data.type === 'string') { + color = 'var(--teal)' + } else if (data.self == 0x0) { // eslint-disable-line + color = 'var(--gray)' + } + return ( + + ) + } + return ( - +
    + { + + } +
    ) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/utils/solidity-type-formatter.ts b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/utils/solidity-type-formatter.ts deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx index 42da693ba83..4114afbb5d5 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx @@ -1,15 +1,97 @@ -import React, { useState } from 'react' +import React, { useState, useEffect } from 'react' import CodeListView from './code-list-view' +import CalldataPanel from './calldata-panel' +import MemoryPanel from './memory-panel' +import CallstackPanel from './callstack-panel' +import FunctionPanel from './function-panel' +import StackPanel from './stack-panel' +import StoragePanel from './storage-panel' +import StepDetail from './step-detail' +import SolidityState from './solidity-state' +import SolidityLocals from './solidity-locals' +import FullStoragesChangesPanel from './full-storages-changes' +import DropdownPanel from './dropdown-panel' import './vm-debugger.css'; export const VmDebugger = ({ vmDebuggerLogic }) => { const [state, setState] = useState({ - }) + const [asm, setAsm] = useState({ + code: null, + address: null, + index: null + }) + const [calldataPanel, setCalldataPanel] = useState(null) + const [memoryPanel, setMemoryPanel] = useState(null) + const [callStackPanel, setCallStackPanel] = useState(null) + + useEffect(() => { + vmDebuggerLogic.event.register('codeManagerChanged', updateAsm) + vmDebuggerLogic.event.register('traceUnloaded', resetAsm) + vmDebuggerLogic.event.register('traceManagerCallDataUpdate', updateCalldataPanel) + vmDebuggerLogic.event.register('traceManagerMemoryUpdate', updateMemoryPanel) + vmDebuggerLogic.event.register('traceManagerCallStackUpdate', updateCallStackPanel) + }, []) + + const updateAsm = (code, address, index) => { + setAsm({ + code, + address, + index + }) + } + + const resetAsm = () => { + setAsm({ + code: [], + address: '', + index: -1 + }) + } + + const updateCalldataPanel = (calldata) => { + setCalldataPanel(calldata) + } + + const updateMemoryPanel = (calldata) => { + setMemoryPanel(calldata) + } + + const updateCallStackPanel = (calldata) => { + setCallStackPanel(calldata) + } + + useEffect(() => { + vmDebuggerLogic.event.register('codeManagerChanged', ) + }, []) + + const renderHead = () => { + return ( +
    +
    + +
    {this.asmCode.render()}
    +
    {this.stepDetail.render()}
    +
    +
    + ) + } return ( -
    -

    Welcome to vmDebugger!

    +
    +
    + {this.stackPanel.render()} + {this.memoryPanel.render()} + {this.storagePanel.render()} + {this.callstackPanel.render()} + {this.calldataPanel.render()} + {this.returnValuesPanel.render()} + {this.fullStoragesChangesPanel.render()} +
    ); }; diff --git a/libs/remix-ui/debugger-ui/src/types/index.ts b/libs/remix-ui/debugger-ui/src/types/index.ts index 331c2af838c..b8e02d3fb32 100644 --- a/libs/remix-ui/debugger-ui/src/types/index.ts +++ b/libs/remix-ui/debugger-ui/src/types/index.ts @@ -1,12 +1,13 @@ export interface ExtractData { - children?: Array<{key: number | string, value: string}> | { key: number | string, value: string } - self?: string, + children?: Array<{key: number | string, value: ExtractData}> + self?: string | number, isNode?: boolean, isLeaf?: boolean, isArray?: boolean, isStruct?: boolean, isMapping?: boolean, - type?: string + type?: string, + isProperty?: boolean } export type ExtractFunc = (json: any, parent?: any) => ExtractData @@ -26,5 +27,8 @@ export interface DropdownPanelProps { [key: string]: string }, header?: string, - extractFunc?: ExtractFunc -} \ No newline at end of file + extractFunc?: ExtractFunc, + formatSelfFunc?: FormatSelfFunc +} + +export type FormatSelfFunc = (key: string, data: ExtractData) => JSX.Element \ No newline at end of file diff --git a/libs/remix-ui/debugger-ui/src/utils/solidityTypeFormatter.ts b/libs/remix-ui/debugger-ui/src/utils/solidityTypeFormatter.ts new file mode 100644 index 00000000000..eb3637c2f44 --- /dev/null +++ b/libs/remix-ui/debugger-ui/src/utils/solidityTypeFormatter.ts @@ -0,0 +1,42 @@ +import { BN } from 'ethereumjs-util' +import { ExtractData } from '../types' + +export function extractData (item, parent): ExtractData { + const ret: ExtractData = {} + + if (item.isProperty) { + return item + } + if (item.type.lastIndexOf(']') === item.type.length - 1) { + ret.children = (item.value || []).map(function (item, index) { + return {key: index, value: item} + }) + ret.children.unshift({ + key: 'length', + value: { + self: (new BN(item.length.replace('0x', ''), 16)).toString(10), + type: 'uint', + isProperty: true + } + }) + ret.isArray = true + ret.self = parent.isArray ? '' : item.type + } else if (item.type.indexOf('struct') === 0) { + ret.children = Object.keys((item.value || {})).map(function (key) { + return {key: key, value: item.value[key]} + }) + ret.self = item.type + ret.isStruct = true + } else if (item.type.indexOf('mapping') === 0) { + ret.children = Object.keys((item.value || {})).map(function (key) { + return {key: key, value: item.value[key]} + }) + ret.isMapping = true + ret.self = item.type + } else { + ret.children = null + ret.self = item.value + ret.type = item.type + } + return ret +} \ No newline at end of file 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 796a8c6a04e..a5b1de95da7 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 @@ -1,8 +1,10 @@ import React, { useState } from 'react' +import { TreeViewItemProps } from '../../types' import './tree-view-item.css' -export const TreeViewItem = ({ key, children, label, ...otherProps }) => { +export const TreeViewItem = (props: TreeViewItemProps) => { + const { key, children, label, ...otherProps } = props const [isExpanded, setIsExpanded] = useState(false) return ( @@ -15,7 +17,7 @@ export const TreeViewItem = ({ key, children, label, ...otherProps }) => {
    { isExpanded ? children : null } - ); -}; + ) +} -export default TreeViewItem; +export default TreeViewItem diff --git a/libs/remix-ui/tree-view/src/types/index.ts b/libs/remix-ui/tree-view/src/types/index.ts index 800d92d40dc..6e36ec108ba 100644 --- a/libs/remix-ui/tree-view/src/types/index.ts +++ b/libs/remix-ui/tree-view/src/types/index.ts @@ -1,4 +1,10 @@ export interface TreeViewProps { children?: React.ReactNode, key: string +} + +export interface TreeViewItemProps { + children?: React.ReactNode, + key: string, + label: string | number | React.ReactNode } \ No newline at end of file From 2b9044952f5ba73eef198a552d067c48a4a006cb Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Wed, 9 Sep 2020 14:39:46 +0100 Subject: [PATCH 12/63] vm debugger component --- .../debugger-ui/src/lib/debugger-ui.tsx | 3 +- .../src/lib/vm-debugger/code-list-view.tsx | 2 +- .../src/lib/vm-debugger/dropdown-panel.tsx | 6 +- .../src/lib/vm-debugger/solidity-locals.tsx | 4 +- .../src/lib/vm-debugger/solidity-state.tsx | 4 +- .../src/lib/vm-debugger/step-detail.tsx | 58 +++--- .../src/lib/vm-debugger/vm-debugger.tsx | 196 +++++++++++++----- libs/remix-ui/debugger-ui/src/types/index.ts | 1 + 8 files changed, 186 insertions(+), 88 deletions(-) diff --git a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx index bbd52fcabef..e197712c6ce 100644 --- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx @@ -1,6 +1,7 @@ import React from 'react' +import TxBrowser from './tx-browser/tx-browser' import StepManager from './step-manager/step-manager' -import +import VmDebugger from './vm-debugger/vm-debugger' const DebuggerUI = () => { return ( diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx index 77cdc70b525..99855a5b52f 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx @@ -3,7 +3,7 @@ import DropdownPanel from './dropdown-panel' /* eslint-disable-next-line */ import EventManager from '../../../../../../apps/remix-ide/src/lib/events' -export const CodeListView = ({ vmDebuggerLogic, asm }) => { +export const CodeListView = ({ asm }) => { const event = new EventManager() const [state, setState] = useState({ code: [], diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx index a5b090b2a18..97e365d1ad9 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx @@ -13,7 +13,7 @@ import EventManager from '../../../../../../apps/remix-ide/src/lib/events' import copyToClipboard from '../../../../../../apps/remix-ide/src/app/ui/copy-to-clipboard' export const DropdownPanel = (props: DropdownPanelProps) => { - const { dropdownName, opts, codeView, index, calldata, header, extractFunc, formatSelfFunc } = props + const { dropdownName, dropdownMessage, opts, codeView, index, calldata, header, extractFunc, formatSelfFunc } = props const data = useExtractData(calldata, extractFunc) const event = new EventManager() const dropdownRawEl = useRef(null) @@ -45,6 +45,10 @@ export const DropdownPanel = (props: DropdownPanelProps) => { update(calldata, header) }, [calldata, header]) + useEffect(() => { + message(dropdownMessage) + }, [dropdownMessage]) + const handleToggle = () => { setState(prevState => { if (prevState.toggleDropdown) event.trigger('hide', []) diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx index e6f222da19b..2b1d75e3a21 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx @@ -3,7 +3,7 @@ import DropdownPanel from './dropdown-panel' import { extractData } from '../../utils/solidityTypeFormatter' import { ExtractData } from '../../types' -export const SolidityLocals = () => { +export const SolidityLocals = ({ calldata, message }) => { const formatSelf = (key: string, data: ExtractData) => { let color = 'var(--primary)' @@ -36,7 +36,7 @@ export const SolidityLocals = () => { return (
    - +
    ) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-state.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-state.tsx index 9fdade9f4bf..32def3a6db3 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-state.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-state.tsx @@ -3,7 +3,7 @@ import DropdownPanel from './dropdown-panel' import { extractData } from '../../utils/solidityTypeFormatter' import { ExtractData } from '../../types' -export const SolidityState = () => { +export const SolidityState = ({ calldata, message }) => { const formatSelf = (key: string, data: ExtractData) => { let color = 'var(--primary)' if (data.isArray || data.isStruct || data.isMapping) { @@ -36,7 +36,7 @@ export const SolidityState = () => { return (
    { - + }
    ) diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx index 27cc283f2a6..be1758c8f77 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx @@ -2,15 +2,15 @@ import React, { useState, useEffect } from 'react' import DropdownPanel from './dropdown-panel' export interface StepDetailProps { - resetStep: boolean, detail: { key: string, - value: string + value: string, + reset: boolean } } export const StepDetail = (props: StepDetailProps) => { - const { resetStep, detail } = props + const { detail } = props const [state, setState] = useState({ detail: { 'vm trace step': '-', @@ -23,37 +23,33 @@ export const StepDetail = (props: StepDetailProps) => { }) useEffect(() => { - reset() - }, [resetStep]) - - useEffect(() => { - updateField(detail.key, detail.value) + updateField(detail.key, detail.value, detail.reset) }, [detail]) - const reset = () => { - setState(() => { - return { - detail: { - 'vm trace step': '-', - 'execution step': '-', - 'add memory': '', - 'gas': '', - 'remaining gas': '-', - 'loaded address': '-' + const updateField = (key, value, reset) => { + if (reset) { + setState(() => { + return { + detail: { + 'vm trace step': '-', + 'execution step': '-', + 'add memory': '', + 'gas': '', + 'remaining gas': '-', + 'loaded address': '-' + } } - } - }) - } - - const updateField = (key, value) => { - setState(prevState => { - const { detail } = prevState - - detail[key] = value - return { - detail - } - }) + }) + } else { + setState(prevState => { + const { detail } = prevState + + detail[key] = value + return { + detail + } + }) + } } return ( diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx index 4114afbb5d5..2958f2b872a 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx @@ -14,7 +14,20 @@ import DropdownPanel from './dropdown-panel' import './vm-debugger.css'; export const VmDebugger = ({ vmDebuggerLogic }) => { - const [state, setState] = useState({ + const [panelVisibility, setPanelVisibility] = useState({ + asmCode: true, + stackPanel: true, + functionPanel: true, + storagePanel: true, + memoryPanel: true, + stepDetail: true, + calldataPanel: true, + callstackPanel: true, + solidityState: true, + solidityLocals: true, + solidityPanel: true, + returnValuesPanel: true, + fullStoragesChangesPanel: true }) const [asm, setAsm] = useState({ code: null, @@ -24,45 +37,128 @@ export const VmDebugger = ({ vmDebuggerLogic }) => { const [calldataPanel, setCalldataPanel] = useState(null) const [memoryPanel, setMemoryPanel] = useState(null) const [callStackPanel, setCallStackPanel] = useState(null) + const [stackPanel, setStackPanel] = useState(null) + const [functionPanel, setFunctionPanel] = useState(null) + const [storagePanel, setStoragePanel] = useState({ + calldata: null, + header: null + }) + const [stepDetail, setStepDetail] = useState({ + key: null, + value: null, + reset: false + }) + const [solidityState, setSolidityState] = useState({ + calldata: null, + message: null, + }) + const [solidityLocals, setSolidityLocals] = useState({ + calldata: null, + message: null, + }) + const [returnValuesPanel, setReturnValuesPanel] = useState({}) + const [fullStoragesChangesPanel, setFullStoragesChangesPanel] = useState(null) useEffect(() => { - vmDebuggerLogic.event.register('codeManagerChanged', updateAsm) - vmDebuggerLogic.event.register('traceUnloaded', resetAsm) - vmDebuggerLogic.event.register('traceManagerCallDataUpdate', updateCalldataPanel) - vmDebuggerLogic.event.register('traceManagerMemoryUpdate', updateMemoryPanel) - vmDebuggerLogic.event.register('traceManagerCallStackUpdate', updateCallStackPanel) - }, []) - - const updateAsm = (code, address, index) => { - setAsm({ - code, - address, - index + vmDebuggerLogic.event.register('codeManagerChanged', (code, address, index) => { + setAsm({ code, address, index }) }) - } - - const resetAsm = () => { - setAsm({ - code: [], - address: '', - index: -1 + vmDebuggerLogic.event.register('traceUnloaded', () => { + setAsm({ code: [], address: '', index: -1 }) }) - } - - const updateCalldataPanel = (calldata) => { - setCalldataPanel(calldata) - } - - const updateMemoryPanel = (calldata) => { - setMemoryPanel(calldata) - } - - const updateCallStackPanel = (calldata) => { - setCallStackPanel(calldata) - } - - useEffect(() => { - vmDebuggerLogic.event.register('codeManagerChanged', ) + vmDebuggerLogic.event.register('traceManagerCallDataUpdate', (calldata) => { + setCalldataPanel(calldata) + }) + vmDebuggerLogic.event.register('traceManagerMemoryUpdate', (calldata) => { + setMemoryPanel(calldata) + }) + vmDebuggerLogic.event.register('traceManagerCallStackUpdate', (calldata) => { + setCallStackPanel(calldata) + }) + vmDebuggerLogic.event.register('traceManagerStackUpdate', (calldata) => { + setStackPanel(calldata) + }) + vmDebuggerLogic.event.register('functionsStackUpdate', (stack) => { + if (stack === null) return + const functions = [] + + for (const func of stack) { + functions.push(func.functionDefinition.attributes.name + '(' + func.inputs.join(', ') + ')') + } + setFunctionPanel(functions) + }) + vmDebuggerLogic.event.register('traceManagerStorageUpdate', (calldata, header) => { + setStoragePanel({ calldata, header }) + }) + vmDebuggerLogic.event.register('traceUnloaded', () => { + setStepDetail({ key: null, value: null, reset: true }) + }) + vmDebuggerLogic.event.register('newTraceLoaded', () => { + setStepDetail({ key: null, value: null, reset: true }) + }) + vmDebuggerLogic.event.register('traceCurrentStepUpdate', (error, step) => { + setStepDetail({ key: 'execution step', value: (error ? '-' : step), reset: false }) + }) + vmDebuggerLogic.event.register('traceMemExpandUpdate', (error, addmem) => { + setStepDetail({ key: 'add memory', value: (error ? '-' : addmem), reset: false }) + }) + vmDebuggerLogic.event.register('traceStepCostUpdate', (error, gas) => { + setStepDetail({ key: 'gas', value: (error ? '-' : gas), reset: false }) + }) + vmDebuggerLogic.event.register('traceCurrentCalledAddressAtUpdate', (error, address) => { + setStepDetail({ key: 'loaded address', value: (error ? '-' : address), reset: false }) + }) + vmDebuggerLogic.event.register('traceRemainingGasUpdate', (error, remainingGas) => { + setStepDetail({ key: 'remaining gas', value: (error ? '-' : remainingGas), reset: false }) + }) + vmDebuggerLogic.event.register('indexUpdate', (index) => { + setStepDetail({ key: 'vm trace step', value: index, reset: false }) + }) + vmDebuggerLogic.event.register('solidityState', (calldata) => { + setSolidityState({ ...solidityState, calldata }) + }) + vmDebuggerLogic.event.register('solidityStateMessage', (message) => { + setSolidityState({ ...solidityState, message }) + }) + vmDebuggerLogic.event.register('solidityLocals', (calldata) => { + setSolidityLocals({ ...solidityState, calldata }) + }) + vmDebuggerLogic.event.register('solidityLocalsMessage', (message) => { + setSolidityLocals({ ...solidityState, message }) + }) + vmDebuggerLogic.event.register('traceReturnValueUpdate', (calldata) => { + setReturnValuesPanel(calldata) + }) + vmDebuggerLogic.event.register('traceAddressesUpdate', (_addreses) => { + setFullStoragesChangesPanel({}) + }) + vmDebuggerLogic.event.register('traceStorageUpdate', (calldata) => { + setFullStoragesChangesPanel(calldata) + }) + vmDebuggerLogic.event.register('newTrace', () => { + setPanelVisibility({ + asmCode: true, + stackPanel: true, + functionPanel: true, + storagePanel: true, + memoryPanel: true, + stepDetail: true, + calldataPanel: true, + callstackPanel: true, + solidityState: true, + solidityLocals: true, + solidityPanel: true, + returnValuesPanel: true, + fullStoragesChangesPanel: true + }) + }) + vmDebuggerLogic.event.register('newCallTree', () => { + setPanelVisibility({ + ...panelVisibility, + solidityPanel: false + }) + }) + vmDebuggerLogic.start() }, []) const renderHead = () => { @@ -70,12 +166,12 @@ export const VmDebugger = ({ vmDebuggerLogic }) => {
    -
    {this.asmCode.render()}
    -
    {this.stepDetail.render()}
    +
    +
    ) @@ -84,16 +180,16 @@ export const VmDebugger = ({ vmDebuggerLogic }) => { return (
    - {this.stackPanel.render()} - {this.memoryPanel.render()} - {this.storagePanel.render()} - {this.callstackPanel.render()} - {this.calldataPanel.render()} - {this.returnValuesPanel.render()} - {this.fullStoragesChangesPanel.render()} + + + + + + +
    - ); -}; + ) +} export default VmDebugger; diff --git a/libs/remix-ui/debugger-ui/src/types/index.ts b/libs/remix-ui/debugger-ui/src/types/index.ts index b8e02d3fb32..5f8a8240d4c 100644 --- a/libs/remix-ui/debugger-ui/src/types/index.ts +++ b/libs/remix-ui/debugger-ui/src/types/index.ts @@ -14,6 +14,7 @@ export type ExtractFunc = (json: any, parent?: any) => ExtractData export interface DropdownPanelProps { dropdownName: string, + dropdownMessage?: string, opts: { json: boolean, displayContentOnly?: boolean, From 30cf64150089b55897887c1b25013487fda4d3f4 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Wed, 9 Sep 2020 16:47:04 +0100 Subject: [PATCH 13/63] Debugger UI functions --- .../debugger-ui/src/lib/debugger-ui.css | 3 + .../debugger-ui/src/lib/debugger-ui.tsx | 135 +++++++++++++++++- .../src/lib/vm-debugger/dropdown-panel.tsx | 3 +- libs/remix-ui/debugger-ui/tsconfig.json | 2 +- 4 files changed, 138 insertions(+), 5 deletions(-) diff --git a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.css b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.css index e69de29bb2d..d2fe14c8ed9 100644 --- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.css +++ b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.css @@ -0,0 +1,3 @@ +.statusMessage { + margin-left: 15px; + } \ No newline at end of file diff --git a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx index e197712c6ce..a6c6cc1738b 100644 --- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx @@ -1,9 +1,140 @@ -import React from 'react' +import React, { useState, useEffect } from 'react' import TxBrowser from './tx-browser/tx-browser' import StepManager from './step-manager/step-manager' import VmDebugger from './vm-debugger/vm-debugger' +import remixDebug, { TransactionDebugger as Debugger } from '@remix-project/remix-debug' +/* eslint-disable-next-line */ +import toaster from '../../../../../apps/remix-ide/src/app/ui/tooltip' +/* eslint-disable-next-line */ +import SourceHighlighter from '../../../../../apps/remix-ide/src/app/editor/sourceHighlighter' +/* eslint-disable-next-line */ +import EventManager from '../../../../../apps/remix-ide/src/lib/events' +/* eslint-disable-next-line */ +import globalRegistry from '../../../../../apps/remix-ide/src/global/registry' +import './debugger-ui.css' + +const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => { + const event = new EventManager() + const sourceHighlighter = new SourceHighlighter() + const init = remixDebug.init + const [state, setState] = useState({ + isActive: false, + statusMessage: '', + debugger: null, + currentReceipt: { + contractAddress: null, + to: null + } + }) + + useEffect(() => { + const setEditor = () => { + const editor = globalRegistry.get('editor').api + + editor.event.register('breakpointCleared', (fileName, row) => { + if (state.debugger) state.debugger.breakPointManager.remove({fileName: fileName, row: row}) + }) + + this.editor.event.register('breakpointAdded', (fileName, row) => { + if (state.debugger) state.debugger.breakPointManager.add({fileName: fileName, row: row}) + }) + + this.editor.event.register('contentChanged', () => { + if (state.debugger) state.debugger.unload() + }) + } + + setEditor() + }, []) + + const listenToEvents = () => { + if (!state.debugger) return + + state.debugger.event.register('debuggerStatus', async (isActive) => { + await debuggerModule.call('editor', 'discardHighlight') + setState(prevState => { + return { + ...prevState, + isActive + } + }) + }) + + state.debugger.event.register('newSourceLocation', async (lineColumnPos, rawLocation) => { + const contracts = await fetchContractAndCompile( + state.currentReceipt.contractAddress || state.currentReceipt.to, + state.currentReceipt) + + if (contracts) { + const path = contracts.getSourceName(rawLocation.file) + + if (path) { + await debuggerModule.call('editor', 'discardHighlight') + await debuggerModule.call('editor', 'highlight', lineColumnPos, path) + } + } + }) + + // state.debugger.event.register('debuggerUnloaded', () => this.unLoad()) + } + + const requestDebug = (blockNumber, txNumber, tx) => { + if (state.debugger) state.debugger.unload() + startDebugging(blockNumber, txNumber, tx) + } + + const unloadRequested = (blockNumber, txIndex, tx) => { + if (state.debugger) state.debugger.unload() + } + + const getDebugWeb3 = () => { + return new Promise((resolve, reject) => { + debuggerModule.blockchain.detectNetwork((error, network) => { + let web3 + if (error || !network) { + web3 = init.web3DebugNode(debuggerModule.blockchain.web3()) + } else { + const webDebugNode = init.web3DebugNode(network.name) + web3 = !webDebugNode ? debuggerModule.blockchain.web3() : webDebugNode + } + init.extendWeb3(web3) + resolve(web3) + }) + }) + } + + const startDebugging = async (blockNumber, txNumber, tx) => { + if (state.debugger) unLoad() + + const web3 = await this.getDebugWeb3() + setState({ + ...state, + currentReceipt: await web3.eth.getTransactionReceipt(txNumber), + debugger: new Debugger({ + web3, + offsetToLineColumnConverter: globalRegistry.get('offsettolinecolumnconverter').api, + compilationResult: async (address) => { + try { + return await fetchContractAndCompile(address, this.currentReceipt) + } catch (e) { + console.error(e) + } + return null + } + }) + }) + listenToEvents() + state.debugger.debug(blockNumber, txNumber, tx, () => { + this.stepManager = new StepManagerUI(this.debugger.step_manager) + this.vmDebugger = new VmDebugger(this.debugger.vmDebuggerLogic) + this.txBrowser.setState({ blockNumber, txNumber, debugging: true }) + this.renderDebugger() + }).catch((error) => { + toaster(error) + this.unLoad() + }) +} -const DebuggerUI = () => { return (

    Welcome to debugger-ui!

    diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx index 97e365d1ad9..65c162bc267 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx @@ -1,7 +1,6 @@ import React, { useState, useRef, useEffect } from 'react' import AssemblyItems from './assembly-items' -/* eslint-disable-next-line */ -import { TreeView, TreeViewItem } from '../../../../tree-view/src/index' +import { TreeView, TreeViewItem } from '@remix-ui/tree-view' import useExtractData from '../../hooks/extract-data' import { DropdownPanelProps, ExtractData } from '../../types' diff --git a/libs/remix-ui/debugger-ui/tsconfig.json b/libs/remix-ui/debugger-ui/tsconfig.json index 4fbd4df206c..42b7ee636f5 100644 --- a/libs/remix-ui/debugger-ui/tsconfig.json +++ b/libs/remix-ui/debugger-ui/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "../../tsconfig.json", + "extends": "../../../tsconfig.json", "compilerOptions": { "jsx": "react", "allowJs": true, From 79852f1468ba524c2a05b330a23a3c656e695d91 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Thu, 10 Sep 2020 10:06:07 +0100 Subject: [PATCH 14/63] Generated utils component --- .../debugger-ui/src/lib/debugger-ui.tsx | 34 ++- .../src/lib/tx-browser/tx-browser.tsx | 2 +- libs/remix-ui/utils/.babelrc | 4 + libs/remix-ui/utils/.eslintrc | 248 ++++++++++++++++++ libs/remix-ui/utils/README.md | 7 + libs/remix-ui/utils/babel-jest.config.json | 14 + libs/remix-ui/utils/jest.config.js | 12 + libs/remix-ui/utils/src/index.ts | 1 + libs/remix-ui/utils/src/lib/should-render.css | 0 .../utils/src/lib/should-render.spec.tsx | 11 + libs/remix-ui/utils/src/lib/should-render.tsx | 16 ++ libs/remix-ui/utils/tsconfig.json | 19 ++ libs/remix-ui/utils/tsconfig.lib.json | 13 + libs/remix-ui/utils/tsconfig.spec.json | 15 ++ nx.json | 3 + tsconfig.json | 5 +- workspace.json | 27 ++ 17 files changed, 422 insertions(+), 9 deletions(-) create mode 100644 libs/remix-ui/utils/.babelrc create mode 100644 libs/remix-ui/utils/.eslintrc create mode 100644 libs/remix-ui/utils/README.md create mode 100644 libs/remix-ui/utils/babel-jest.config.json create mode 100644 libs/remix-ui/utils/jest.config.js create mode 100644 libs/remix-ui/utils/src/index.ts create mode 100644 libs/remix-ui/utils/src/lib/should-render.css create mode 100644 libs/remix-ui/utils/src/lib/should-render.spec.tsx create mode 100644 libs/remix-ui/utils/src/lib/should-render.tsx create mode 100644 libs/remix-ui/utils/tsconfig.json create mode 100644 libs/remix-ui/utils/tsconfig.lib.json create mode 100644 libs/remix-ui/utils/tsconfig.spec.json diff --git a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx index a6c6cc1738b..2fadf6de624 100644 --- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx @@ -24,7 +24,9 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => { currentReceipt: { contractAddress: null, to: null - } + }, + blockNumber: null, + txNumber: null }) useEffect(() => { @@ -103,6 +105,19 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => { }) } + const unLoad = async () => { + // yo.update(this.debuggerHeadPanelsView, yo`
    `) + // yo.update(this.debuggerPanelsView, yo`
    `) + // yo.update(this.stepManagerView, yo`
    `) + if (this.vmDebugger) this.vmDebugger.remove() + if (this.stepManager) this.stepManager.remove() + if (this.txBrowser) this.txBrowser.setState({debugging: false}) + this.vmDebugger = null + this.stepManager = null + if (this.debugger) delete this.debugger + this.event.trigger('traceUnloaded') + } + const startDebugging = async (blockNumber, txNumber, tx) => { if (state.debugger) unLoad() @@ -125,13 +140,20 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => { }) listenToEvents() state.debugger.debug(blockNumber, txNumber, tx, () => { - this.stepManager = new StepManagerUI(this.debugger.step_manager) - this.vmDebugger = new VmDebugger(this.debugger.vmDebuggerLogic) - this.txBrowser.setState({ blockNumber, txNumber, debugging: true }) + // this.stepManager = new StepManagerUI(this.debugger.step_manager) + // this.vmDebugger = new VmDebugger(this.debugger.vmDebuggerLogic) + setState(prevState => { + return { + ...prevState, + blockNumber, + txNumber, + debugging: true + } + }) this.renderDebugger() }).catch((error) => { - toaster(error) - this.unLoad() + toaster(error, null, null) + unLoad() }) } diff --git a/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx b/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx index a84161c3f15..7ee2d571f0c 100644 --- a/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react' import './tx-browser.css' -import EventManager from '../../../../../apps/remix-ide/src/lib/events' +import EventManager from '../../../../../../apps/remix-ide/src/lib/events' export const TxBrowser = () => { const event = new EventManager() diff --git a/libs/remix-ui/utils/.babelrc b/libs/remix-ui/utils/.babelrc new file mode 100644 index 00000000000..09d67939cc9 --- /dev/null +++ b/libs/remix-ui/utils/.babelrc @@ -0,0 +1,4 @@ +{ + "presets": ["@nrwl/react/babel"], + "plugins": [] +} diff --git a/libs/remix-ui/utils/.eslintrc b/libs/remix-ui/utils/.eslintrc new file mode 100644 index 00000000000..977f139a099 --- /dev/null +++ b/libs/remix-ui/utils/.eslintrc @@ -0,0 +1,248 @@ +{ + "rules": { + "array-callback-return": "warn", + "dot-location": ["warn", "property"], + "eqeqeq": ["warn", "smart"], + "new-parens": "warn", + "no-caller": "warn", + "no-cond-assign": ["warn", "except-parens"], + "no-const-assign": "warn", + "no-control-regex": "warn", + "no-delete-var": "warn", + "no-dupe-args": "warn", + "no-dupe-keys": "warn", + "no-duplicate-case": "warn", + "no-empty-character-class": "warn", + "no-empty-pattern": "warn", + "no-eval": "warn", + "no-ex-assign": "warn", + "no-extend-native": "warn", + "no-extra-bind": "warn", + "no-extra-label": "warn", + "no-fallthrough": "warn", + "no-func-assign": "warn", + "no-implied-eval": "warn", + "no-invalid-regexp": "warn", + "no-iterator": "warn", + "no-label-var": "warn", + "no-labels": ["warn", { "allowLoop": true, "allowSwitch": false }], + "no-lone-blocks": "warn", + "no-loop-func": "warn", + "no-mixed-operators": [ + "warn", + { + "groups": [ + ["&", "|", "^", "~", "<<", ">>", ">>>"], + ["==", "!=", "===", "!==", ">", ">=", "<", "<="], + ["&&", "||"], + ["in", "instanceof"] + ], + "allowSamePrecedence": false + } + ], + "no-multi-str": "warn", + "no-native-reassign": "warn", + "no-negated-in-lhs": "warn", + "no-new-func": "warn", + "no-new-object": "warn", + "no-new-symbol": "warn", + "no-new-wrappers": "warn", + "no-obj-calls": "warn", + "no-octal": "warn", + "no-octal-escape": "warn", + "no-redeclare": "warn", + "no-regex-spaces": "warn", + "no-restricted-syntax": ["warn", "WithStatement"], + "no-script-url": "warn", + "no-self-assign": "warn", + "no-self-compare": "warn", + "no-sequences": "warn", + "no-shadow-restricted-names": "warn", + "no-sparse-arrays": "warn", + "no-template-curly-in-string": "warn", + "no-this-before-super": "warn", + "no-throw-literal": "warn", + "no-restricted-globals": [ + "error", + "addEventListener", + "blur", + "close", + "closed", + "confirm", + "defaultStatus", + "defaultstatus", + "event", + "external", + "find", + "focus", + "frameElement", + "frames", + "history", + "innerHeight", + "innerWidth", + "length", + "location", + "locationbar", + "menubar", + "moveBy", + "moveTo", + "name", + "onblur", + "onerror", + "onfocus", + "onload", + "onresize", + "onunload", + "open", + "opener", + "opera", + "outerHeight", + "outerWidth", + "pageXOffset", + "pageYOffset", + "parent", + "print", + "removeEventListener", + "resizeBy", + "resizeTo", + "screen", + "screenLeft", + "screenTop", + "screenX", + "screenY", + "scroll", + "scrollbars", + "scrollBy", + "scrollTo", + "scrollX", + "scrollY", + "self", + "status", + "statusbar", + "stop", + "toolbar", + "top" + ], + "no-unexpected-multiline": "warn", + "no-unreachable": "warn", + "no-unused-expressions": [ + "error", + { + "allowShortCircuit": true, + "allowTernary": true, + "allowTaggedTemplates": true + } + ], + "no-unused-labels": "warn", + "no-useless-computed-key": "warn", + "no-useless-concat": "warn", + "no-useless-escape": "warn", + "no-useless-rename": [ + "warn", + { + "ignoreDestructuring": false, + "ignoreImport": false, + "ignoreExport": false + } + ], + "no-with": "warn", + "no-whitespace-before-property": "warn", + "react-hooks/exhaustive-deps": "warn", + "require-yield": "warn", + "rest-spread-spacing": ["warn", "never"], + "strict": ["warn", "never"], + "unicode-bom": ["warn", "never"], + "use-isnan": "warn", + "valid-typeof": "warn", + "no-restricted-properties": [ + "error", + { + "object": "require", + "property": "ensure", + "message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting" + }, + { + "object": "System", + "property": "import", + "message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting" + } + ], + "getter-return": "warn", + "import/first": "error", + "import/no-amd": "error", + "import/no-webpack-loader-syntax": "error", + "react/forbid-foreign-prop-types": ["warn", { "allowInPropTypes": true }], + "react/jsx-no-comment-textnodes": "warn", + "react/jsx-no-duplicate-props": "warn", + "react/jsx-no-target-blank": "warn", + "react/jsx-no-undef": "error", + "react/jsx-pascal-case": ["warn", { "allowAllCaps": true, "ignore": [] }], + "react/jsx-uses-react": "warn", + "react/jsx-uses-vars": "warn", + "react/no-danger-with-children": "warn", + "react/no-direct-mutation-state": "warn", + "react/no-is-mounted": "warn", + "react/no-typos": "error", + "react/react-in-jsx-scope": "error", + "react/require-render-return": "error", + "react/style-prop-object": "warn", + "react/jsx-no-useless-fragment": "warn", + "jsx-a11y/accessible-emoji": "warn", + "jsx-a11y/alt-text": "warn", + "jsx-a11y/anchor-has-content": "warn", + "jsx-a11y/anchor-is-valid": [ + "warn", + { "aspects": ["noHref", "invalidHref"] } + ], + "jsx-a11y/aria-activedescendant-has-tabindex": "warn", + "jsx-a11y/aria-props": "warn", + "jsx-a11y/aria-proptypes": "warn", + "jsx-a11y/aria-role": "warn", + "jsx-a11y/aria-unsupported-elements": "warn", + "jsx-a11y/heading-has-content": "warn", + "jsx-a11y/iframe-has-title": "warn", + "jsx-a11y/img-redundant-alt": "warn", + "jsx-a11y/no-access-key": "warn", + "jsx-a11y/no-distracting-elements": "warn", + "jsx-a11y/no-redundant-roles": "warn", + "jsx-a11y/role-has-required-aria-props": "warn", + "jsx-a11y/role-supports-aria-props": "warn", + "jsx-a11y/scope": "warn", + "react-hooks/rules-of-hooks": "error", + "default-case": "off", + "no-dupe-class-members": "off", + "no-undef": "off", + "@typescript-eslint/consistent-type-assertions": "warn", + "no-array-constructor": "off", + "@typescript-eslint/no-array-constructor": "warn", + "@typescript-eslint/no-namespace": "error", + "no-use-before-define": "off", + "@typescript-eslint/no-use-before-define": [ + "warn", + { + "functions": false, + "classes": false, + "variables": false, + "typedefs": false + } + ], + "no-unused-vars": "off", + "@typescript-eslint/no-unused-vars": [ + "warn", + { "args": "none", "ignoreRestSiblings": true } + ], + "no-useless-constructor": "off", + "@typescript-eslint/no-useless-constructor": "warn" + }, + "env": { + "browser": true, + "commonjs": true, + "es6": true, + "jest": true, + "node": true + }, + "settings": { "react": { "version": "detect" } }, + "plugins": ["import", "jsx-a11y", "react", "react-hooks"], + "extends": ["../../../.eslintrc"], + "ignorePatterns": ["!**/*"] +} diff --git a/libs/remix-ui/utils/README.md b/libs/remix-ui/utils/README.md new file mode 100644 index 00000000000..84a6ec18a68 --- /dev/null +++ b/libs/remix-ui/utils/README.md @@ -0,0 +1,7 @@ +# remix-ui-utils + +This library was generated with [Nx](https://nx.dev). + +## Running unit tests + +Run `nx test remix-ui-utils` to execute the unit tests via [Jest](https://jestjs.io). diff --git a/libs/remix-ui/utils/babel-jest.config.json b/libs/remix-ui/utils/babel-jest.config.json new file mode 100644 index 00000000000..bf04d5f81f7 --- /dev/null +++ b/libs/remix-ui/utils/babel-jest.config.json @@ -0,0 +1,14 @@ +{ + "presets": [ + [ + "@babel/preset-env", + { + "targets": { + "node": "current" + } + } + ], + "@babel/preset-typescript", + "@babel/preset-react" + ] +} diff --git a/libs/remix-ui/utils/jest.config.js b/libs/remix-ui/utils/jest.config.js new file mode 100644 index 00000000000..73ce6f9c5c6 --- /dev/null +++ b/libs/remix-ui/utils/jest.config.js @@ -0,0 +1,12 @@ +module.exports = { + name: 'remix-ui-utils', + preset: '../../../jest.config.js', + transform: { + '^.+\\.[tj]sx?$': [ + 'babel-jest', + { cwd: __dirname, configFile: './babel-jest.config.json' } + ] + }, + moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'], + coverageDirectory: '../../../coverage/libs/remix-ui/utils' +}; diff --git a/libs/remix-ui/utils/src/index.ts b/libs/remix-ui/utils/src/index.ts new file mode 100644 index 00000000000..7a9332d560b --- /dev/null +++ b/libs/remix-ui/utils/src/index.ts @@ -0,0 +1 @@ +export * from './lib/should-render'; diff --git a/libs/remix-ui/utils/src/lib/should-render.css b/libs/remix-ui/utils/src/lib/should-render.css new file mode 100644 index 00000000000..e69de29bb2d diff --git a/libs/remix-ui/utils/src/lib/should-render.spec.tsx b/libs/remix-ui/utils/src/lib/should-render.spec.tsx new file mode 100644 index 00000000000..003c5b88002 --- /dev/null +++ b/libs/remix-ui/utils/src/lib/should-render.spec.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { render } from '@testing-library/react'; + +import ShouldRender from './should-render'; + +describe(' ShouldRender', () => { + it('should render successfully', () => { + const { baseElement } = render(); + expect(baseElement).toBeTruthy(); + }); +}); diff --git a/libs/remix-ui/utils/src/lib/should-render.tsx b/libs/remix-ui/utils/src/lib/should-render.tsx new file mode 100644 index 00000000000..1ff403d31cf --- /dev/null +++ b/libs/remix-ui/utils/src/lib/should-render.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import './should-render.css'; + +/* eslint-disable-next-line */ +export interface ShouldRenderProps {} + +export const ShouldRender = (props: ShouldRenderProps) => { + return ( +
    +

    Welcome to shouldRender!

    +
    + ); +}; + +export default ShouldRender; diff --git a/libs/remix-ui/utils/tsconfig.json b/libs/remix-ui/utils/tsconfig.json new file mode 100644 index 00000000000..42b7ee636f5 --- /dev/null +++ b/libs/remix-ui/utils/tsconfig.json @@ -0,0 +1,19 @@ +{ + "extends": "../../../tsconfig.json", + "compilerOptions": { + "jsx": "react", + "allowJs": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ] +} diff --git a/libs/remix-ui/utils/tsconfig.lib.json b/libs/remix-ui/utils/tsconfig.lib.json new file mode 100644 index 00000000000..b560bc4dec6 --- /dev/null +++ b/libs/remix-ui/utils/tsconfig.lib.json @@ -0,0 +1,13 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../dist/out-tsc", + "types": ["node"] + }, + "files": [ + "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts", + "../../../node_modules/@nrwl/react/typings/image.d.ts" + ], + "exclude": ["**/*.spec.ts", "**/*.spec.tsx"], + "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"] +} diff --git a/libs/remix-ui/utils/tsconfig.spec.json b/libs/remix-ui/utils/tsconfig.spec.json new file mode 100644 index 00000000000..1798b378a99 --- /dev/null +++ b/libs/remix-ui/utils/tsconfig.spec.json @@ -0,0 +1,15 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../dist/out-tsc", + "module": "commonjs", + "types": ["jest", "node"] + }, + "include": [ + "**/*.spec.ts", + "**/*.spec.tsx", + "**/*.spec.js", + "**/*.spec.jsx", + "**/*.d.ts" + ] +} diff --git a/nx.json b/nx.json index ed25cf3c377..3cff4f71843 100644 --- a/nx.json +++ b/nx.json @@ -75,6 +75,9 @@ }, "remix-ui-debugger-ui": { "tags": [] + }, + "remix-ui-utils": { + "tags": [] } } } diff --git a/tsconfig.json b/tsconfig.json index bcc80da5dd7..3b31675e3b1 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -24,10 +24,11 @@ "@remix-project/remix-solidity": ["dist/libs/remix-solidity/index.js"], "@remix-project/remix-tests": ["dist/libs/remix-tests/src/index.js"], "@remix-project/remix-url-resolver": ["dist/libs/remix-url-resolver/index.js"], - "@remix-project/remixd": ["dist/libs/remixd/index.js"], + "@remix-project/remixd": ["dist/libs/remixd/index.js"], "@remix-project/debugger-ui": ["libs/debugger-ui/src/index.ts"], "@remix-ui/tree-view": ["libs/remix-ui/tree-view/src/index.ts"], - "@remix-ui/debugger-ui": ["libs/remix-ui/debugger-ui/src/index.ts"] + "@remix-ui/debugger-ui": ["libs/remix-ui/debugger-ui/src/index.ts"], + "@remix-ui/utils": ["libs/remix-ui/utils/src/index.ts"] } }, "exclude": ["node_modules", "tmp"] diff --git a/workspace.json b/workspace.json index 073950cfc84..e5086e34776 100644 --- a/workspace.json +++ b/workspace.json @@ -563,6 +563,33 @@ } } } + }, + "remix-ui-utils": { + "root": "libs/remix-ui/utils", + "sourceRoot": "libs/remix-ui/utils/src", + "projectType": "library", + "schematics": {}, + "architect": { + "lint": { + "builder": "@nrwl/linter:lint", + "options": { + "linter": "eslint", + "tsConfig": [ + "libs/remix-ui/utils/tsconfig.lib.json", + "libs/remix-ui/utils/tsconfig.spec.json" + ], + "exclude": ["**/node_modules/**", "!libs/remix-ui/utils/**/*"] + } + }, + "test": { + "builder": "@nrwl/jest:jest", + "options": { + "jestConfig": "libs/remix-ui/utils/jest.config.js", + "tsConfig": "libs/remix-ui/utils/tsconfig.spec.json", + "passWithNoTests": true + } + } + } } }, "cli": { From 46a6a7c45fcc763257334bf279e3d8dfbbdb612e Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Fri, 11 Sep 2020 12:45:48 +0100 Subject: [PATCH 15/63] completed move to react --- apps/remix-ide/src/app/tabs/debugger-tab.js | 40 +++-- .../src/app/tabs/debugger/debuggerUI.js | 25 --- libs/remix-ui/debugger-ui/src/index.ts | 4 +- .../debugger-ui/src/lib/debugger-ui.tsx | 165 +++++++++++++----- .../src/lib/tx-browser/tx-browser.tsx | 20 +-- .../src/lib/vm-debugger/function-panel.tsx | 2 +- .../src/lib/vm-debugger/vm-debugger-head.tsx | 117 +++++++++++++ .../src/lib/vm-debugger/vm-debugger.tsx | 133 +------------- libs/remix-ui/utils/src/index.ts | 2 +- libs/remix-ui/utils/src/lib/should-render.css | 0 .../utils/src/lib/should-render.spec.tsx | 11 -- libs/remix-ui/utils/src/lib/should-render.tsx | 21 ++- 12 files changed, 291 insertions(+), 249 deletions(-) create mode 100644 libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx delete mode 100644 libs/remix-ui/utils/src/lib/should-render.css delete mode 100644 libs/remix-ui/utils/src/lib/should-render.spec.tsx diff --git a/apps/remix-ide/src/app/tabs/debugger-tab.js b/apps/remix-ide/src/app/tabs/debugger-tab.js index 5bc5c32d959..c032180e83f 100644 --- a/apps/remix-ide/src/app/tabs/debugger-tab.js +++ b/apps/remix-ide/src/app/tabs/debugger-tab.js @@ -2,9 +2,12 @@ const yo = require('yo-yo') const remixDebug = require('@remix-project/remix-debug') const css = require('./styles/debugger-tab-styles') import toaster from '../ui/tooltip' -const DebuggerUI = require('./debugger/debuggerUI') +import { DebuggerUI } from '@remix-ui/debugger-ui' +// const DebuggerUI = require('./debugger/debuggerUI') import { ViewPlugin } from '@remixproject/engine' import * as packageJson from '../../../../../package.json' +import React from 'react' +import ReactDOM from 'react-dom' const profile = { name: 'debugger', @@ -25,6 +28,9 @@ class DebuggerTab extends ViewPlugin { super(profile) this.el = null this.blockchain = blockchain + this.debugHash = null + this.getTraceHash = null + this.removeHighlights = false } render () { @@ -55,14 +61,18 @@ class DebuggerTab extends ViewPlugin { toaster(yo`
    Source verification plugin not activated or not available. continuing without source code debugging.
    `) }) - this.debuggerUI = new DebuggerUI( - this, - this.el.querySelector('#debugger'), - (address, receipt) => { - const target = (address && remixDebug.traceHelper.isContractCreation(address)) ? receipt.contractAddress : address - return this.call('fetchAndCompile', 'resolve', target || receipt.contractAddress || receipt.to, '.debug', this.blockchain.web3()) - } - ) + ReactDOM.render( + { + const target = (address && remixDebug.traceHelper.isContractCreation(address)) ? receipt.contractAddress : address + + return this.call('fetchAndCompile', 'resolve', target || receipt.contractAddress || receipt.to, '.debug', this.blockchain.web3()) + }} + debugHash={this.debugHash} + getTraceHash={this.getTraceHash} + /> + , this.el) this.call('manager', 'activatePlugin', 'source-verification').catch(e => console.log(e.message)) // this.call('manager', 'activatePlugin', 'udapp') @@ -71,21 +81,21 @@ class DebuggerTab extends ViewPlugin { } deactivate () { - this.debuggerUI.deleteHighlights() + this.removeHighlights = true super.deactivate() } debug (hash) { - if (this.debuggerUI) this.debuggerUI.debug(hash) + this.debugHash = hash } getTrace (hash) { - return this.debuggerUI.getTrace(hash) + this.getTraceHash = hash } - debugger () { - return this.debuggerUI - } + // debugger () { + // return this.debuggerUI + // } } module.exports = DebuggerTab diff --git a/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js b/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js index a8205a4158b..dc3ce73c57b 100644 --- a/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js +++ b/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js @@ -1,7 +1,3 @@ -import React from 'react' -import ReactDOM from 'react-dom' -import { TreeView, TreeViewItem } from '@remix-ui/tree-view' - var TxBrowser = require('./debuggerUI/TxBrowser') var StepManagerUI = require('./debuggerUI/StepManager') var VmDebugger = require('./debuggerUI/VmDebugger') @@ -247,7 +243,6 @@ class DebuggerUI { ${this.debuggerHeadPanelsView}
    ${this.statusMessage}
    ${this.debuggerPanelsView} -
    ` if (!this.view) { @@ -277,26 +272,6 @@ class DebuggerUI { yo.update(this.debuggerHeadPanelsView, this.vmDebugger.renderHead()) yo.update(this.debuggerPanelsView, this.vmDebugger.render()) yo.update(this.stepManagerView, this.stepManager.render()) - ReactDOM.render( - - - Item 2} /> - - - - - - - - - - - - - - - - , document.getElementById('treeViewReact')) } } diff --git a/libs/remix-ui/debugger-ui/src/index.ts b/libs/remix-ui/debugger-ui/src/index.ts index 3ac7983819a..57f0619ee0f 100644 --- a/libs/remix-ui/debugger-ui/src/index.ts +++ b/libs/remix-ui/debugger-ui/src/index.ts @@ -1,3 +1 @@ -import StepManager from './lib/step-manager/step-manager' - -export { StepManager } +export * from './lib/debugger-ui' diff --git a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx index 2fadf6de624..456fc3b005d 100644 --- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx @@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react' import TxBrowser from './tx-browser/tx-browser' import StepManager from './step-manager/step-manager' import VmDebugger from './vm-debugger/vm-debugger' +import VmDebuggerHead from './vm-debugger/vm-debugger-head' import remixDebug, { TransactionDebugger as Debugger } from '@remix-project/remix-debug' /* eslint-disable-next-line */ import toaster from '../../../../../apps/remix-ide/src/app/ui/tooltip' @@ -13,7 +14,7 @@ import EventManager from '../../../../../apps/remix-ide/src/lib/events' import globalRegistry from '../../../../../apps/remix-ide/src/global/registry' import './debugger-ui.css' -const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => { +export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash, getTraceHash, removeHighlights }) => { const event = new EventManager() const sourceHighlighter = new SourceHighlighter() const init = remixDebug.init @@ -26,7 +27,13 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => { to: null }, blockNumber: null, - txNumber: null + txNumber: null, + visibility: { + vmDebugger: false, + stepManager: false, + txBrowser: false + }, + debugging: false }) useEffect(() => { @@ -37,22 +44,35 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => { if (state.debugger) state.debugger.breakPointManager.remove({fileName: fileName, row: row}) }) - this.editor.event.register('breakpointAdded', (fileName, row) => { + editor.event.register('breakpointAdded', (fileName, row) => { if (state.debugger) state.debugger.breakPointManager.add({fileName: fileName, row: row}) }) - this.editor.event.register('contentChanged', () => { + editor.event.register('contentChanged', () => { if (state.debugger) state.debugger.unload() }) } setEditor() + return unLoad() }, []) - const listenToEvents = () => { - if (!state.debugger) return + useEffect(() => { + debug(debugHash) + }, [debugHash]) - state.debugger.event.register('debuggerStatus', async (isActive) => { + useEffect(() => { + getTrace(getTraceHash) + }, [getTraceHash]) + + useEffect(() => { + if (removeHighlights) deleteHighlights() + }, [removeHighlights]) + + const listenToEvents = (debuggerInstance) => { + if (!debuggerInstance) return + + debuggerInstance.event.register('debuggerStatus', async (isActive) => { await debuggerModule.call('editor', 'discardHighlight') setState(prevState => { return { @@ -62,7 +82,7 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => { }) }) - state.debugger.event.register('newSourceLocation', async (lineColumnPos, rawLocation) => { + debuggerInstance.event.register('newSourceLocation', async (lineColumnPos, rawLocation) => { const contracts = await fetchContractAndCompile( state.currentReceipt.contractAddress || state.currentReceipt.to, state.currentReceipt) @@ -77,7 +97,14 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => { } }) - // state.debugger.event.register('debuggerUnloaded', () => this.unLoad()) + debuggerInstance.event.register('debuggerUnloaded', () => unLoad()) + + setState(prevState => { + return { + ...prevState, + debugger: debuggerInstance + } + }) } const requestDebug = (blockNumber, txNumber, tx) => { @@ -89,7 +116,11 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => { if (state.debugger) state.debugger.unload() } - const getDebugWeb3 = () => { + const isDebuggerActive = () => { + return state.isActive + } + + const getDebugWeb3 = (): Promise => { return new Promise((resolve, reject) => { debuggerModule.blockchain.detectNetwork((error, network) => { let web3 @@ -105,41 +136,44 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => { }) } - const unLoad = async () => { + const unLoad = () => { // yo.update(this.debuggerHeadPanelsView, yo`
    `) // yo.update(this.debuggerPanelsView, yo`
    `) // yo.update(this.stepManagerView, yo`
    `) - if (this.vmDebugger) this.vmDebugger.remove() - if (this.stepManager) this.stepManager.remove() - if (this.txBrowser) this.txBrowser.setState({debugging: false}) - this.vmDebugger = null - this.stepManager = null - if (this.debugger) delete this.debugger - this.event.trigger('traceUnloaded') + setState(prevState => { + const { visibility } = prevState + return { + ...prevState, + debugger: null, + debugging: false, + visibility: { + ...visibility, + vmDebugger: false, + stepManager: false + } + } + }) + event.trigger('traceUnloaded', []) } const startDebugging = async (blockNumber, txNumber, tx) => { if (state.debugger) unLoad() - const web3 = await this.getDebugWeb3() - setState({ - ...state, - currentReceipt: await web3.eth.getTransactionReceipt(txNumber), - debugger: new Debugger({ - web3, - offsetToLineColumnConverter: globalRegistry.get('offsettolinecolumnconverter').api, - compilationResult: async (address) => { - try { - return await fetchContractAndCompile(address, this.currentReceipt) - } catch (e) { - console.error(e) - } - return null + const web3 = await getDebugWeb3() + const currentReceipt = await web3.eth.getTransactionReceipt(txNumber) + const debuggerInstance = new Debugger({ + web3, + offsetToLineColumnConverter: globalRegistry.get('offsettolinecolumnconverter').api, + compilationResult: async (address) => { + try { + return await fetchContractAndCompile(address, currentReceipt) + } catch (e) { + console.error(e) } - }) + return null + } }) - listenToEvents() - state.debugger.debug(blockNumber, txNumber, tx, () => { + debuggerInstance.debug(blockNumber, txNumber, tx, () => { // this.stepManager = new StepManagerUI(this.debugger.step_manager) // this.vmDebugger = new VmDebugger(this.debugger.vmDebuggerLogic) setState(prevState => { @@ -147,20 +181,71 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => { ...prevState, blockNumber, txNumber, - debugging: true + debugging: true, + currentReceipt } }) - this.renderDebugger() + listenToEvents(debuggerInstance) + // this.renderDebugger() }).catch((error) => { toaster(error, null, null) unLoad() }) } +const debug = (txHash) => { + startDebugging(null, txHash, null) +} + +const getTrace = (hash) => { + return new Promise(async (resolve, reject) => { /* eslint-disable-line */ + const web3 = await getDebugWeb3() + const currentReceipt = await web3.eth.getTransactionReceipt(hash) + + setState(prevState => { + return { + ...prevState, + currentReceipt + } + }) + + const debug = new Debugger({ + web3, + offsetToLineColumnConverter: globalRegistry.get('offsettolinecolumnconverter').api, + compilationResult: async (address) => { + try { + return await fetchContractAndCompile(address, state.currentReceipt) + } catch (e) { + console.error(e) + } + return null + } + }) + debug.debugger.traceManager.traceRetriever.getTrace(hash, (error, trace) => { + if (error) return reject(error) + resolve(trace) + }) + }) +} + +const deleteHighlights = async () => { + await debuggerModule.call('editor', 'discardHighlight') +} + +// this.debuggerPanelsView = yo`
    ` +// this.debuggerHeadPanelsView = yo`
    ` +// this.stepManagerView = yo`
    ` + return ( -
    -

    Welcome to debugger-ui!

    -
    +
    +
    + + {/* + */} +
    + {/*
    {state.statusMessage}
    + */} +
    ) } diff --git a/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx b/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx index 7ee2d571f0c..bc660ef4a97 100644 --- a/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx @@ -2,7 +2,7 @@ import React, { useState } from 'react' import './tx-browser.css' import EventManager from '../../../../../../apps/remix-ide/src/lib/events' -export const TxBrowser = () => { +export const TxBrowser = ({ requestDebug, unloadRequested }) => { const event = new EventManager() const [state, setState] = useState({ txNumber: undefined, @@ -13,21 +13,12 @@ export const TxBrowser = () => { if (state.debugging) { unload() } else { - event.trigger('requestDebug', [undefined, state.txNumber]) + requestDebug(undefined, state.txNumber) } } const unload = () => { - event.trigger('unloadRequested', []) - } - - const updateTxN = (ev) => { - setState(prevState => { - return { - ...prevState, - txNumber: ev.target.value - } - }) + unloadRequested() } const txInputChanged = (e) => { @@ -50,12 +41,11 @@ export const TxBrowser = () => {
    { ) } -export default FunctionPanel \ No newline at end of file +export default FunctionPanel diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx new file mode 100644 index 00000000000..31e4b074577 --- /dev/null +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx @@ -0,0 +1,117 @@ +import React, { useState, useEffect } from 'react' +import CodeListView from './code-list-view' +import FunctionPanel from './function-panel' +import StepDetail from './step-detail' +import SolidityState from './solidity-state' +import SolidityLocals from './solidity-locals' + +export const VmDebuggerHead = ({ vmDebuggerLogic }) => { + const [panelVisibility, setPanelVisibility] = useState({ + functionPanel: true, + stepDetail: true, + solidityState: true, + solidityLocals: true, + returnValuesPanel: true, + fullStoragesChangesPanel: true + }) + const [asm, setAsm] = useState({ + code: null, + address: null, + index: null + }) + const [functionPanel, setFunctionPanel] = useState(null) + const [stepDetail, setStepDetail] = useState({ + key: null, + value: null, + reset: false + }) + const [solidityState, setSolidityState] = useState({ + calldata: null, + message: null, + }) + const [solidityLocals, setSolidityLocals] = useState({ + calldata: null, + message: null, + }) + + useEffect(() => { + vmDebuggerLogic.event.register('codeManagerChanged', (code, address, index) => { + setAsm({ code, address, index }) + }) + vmDebuggerLogic.event.register('traceUnloaded', () => { + setAsm({ code: [], address: '', index: -1 }) + }) + vmDebuggerLogic.event.register('functionsStackUpdate', (stack) => { + if (stack === null) return + const functions = [] + + for (const func of stack) { + functions.push(func.functionDefinition.attributes.name + '(' + func.inputs.join(', ') + ')') + } + setFunctionPanel(functions) + }) + vmDebuggerLogic.event.register('traceUnloaded', () => { + setStepDetail({ key: null, value: null, reset: true }) + }) + vmDebuggerLogic.event.register('newTraceLoaded', () => { + setStepDetail({ key: null, value: null, reset: true }) + }) + vmDebuggerLogic.event.register('traceCurrentStepUpdate', (error, step) => { + setStepDetail({ key: 'execution step', value: (error ? '-' : step), reset: false }) + }) + vmDebuggerLogic.event.register('traceMemExpandUpdate', (error, addmem) => { + setStepDetail({ key: 'add memory', value: (error ? '-' : addmem), reset: false }) + }) + vmDebuggerLogic.event.register('traceStepCostUpdate', (error, gas) => { + setStepDetail({ key: 'gas', value: (error ? '-' : gas), reset: false }) + }) + vmDebuggerLogic.event.register('traceCurrentCalledAddressAtUpdate', (error, address) => { + setStepDetail({ key: 'loaded address', value: (error ? '-' : address), reset: false }) + }) + vmDebuggerLogic.event.register('traceRemainingGasUpdate', (error, remainingGas) => { + setStepDetail({ key: 'remaining gas', value: (error ? '-' : remainingGas), reset: false }) + }) + vmDebuggerLogic.event.register('indexUpdate', (index) => { + setStepDetail({ key: 'vm trace step', value: index, reset: false }) + }) + vmDebuggerLogic.event.register('solidityState', (calldata) => { + setSolidityState({ ...solidityState, calldata }) + }) + vmDebuggerLogic.event.register('solidityStateMessage', (message) => { + setSolidityState({ ...solidityState, message }) + }) + vmDebuggerLogic.event.register('solidityLocals', (calldata) => { + setSolidityLocals({ ...solidityState, calldata }) + }) + vmDebuggerLogic.event.register('solidityLocalsMessage', (message) => { + setSolidityLocals({ ...solidityState, message }) + }) + vmDebuggerLogic.event.register('newTrace', () => { + setPanelVisibility({ + functionPanel: true, + stepDetail: true, + solidityState: true, + solidityLocals: true, + returnValuesPanel: true, + fullStoragesChangesPanel: true + }) + }) + vmDebuggerLogic.start() + }, []) + + return ( +
    +
    + +
    +
    +
    +
    + ) +} + +export default VmDebuggerHead; diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx index 2958f2b872a..eac667fbdc1 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx @@ -1,71 +1,29 @@ import React, { useState, useEffect } from 'react' -import CodeListView from './code-list-view' import CalldataPanel from './calldata-panel' import MemoryPanel from './memory-panel' import CallstackPanel from './callstack-panel' -import FunctionPanel from './function-panel' import StackPanel from './stack-panel' import StoragePanel from './storage-panel' -import StepDetail from './step-detail' -import SolidityState from './solidity-state' -import SolidityLocals from './solidity-locals' -import FullStoragesChangesPanel from './full-storages-changes' -import DropdownPanel from './dropdown-panel' -import './vm-debugger.css'; export const VmDebugger = ({ vmDebuggerLogic }) => { const [panelVisibility, setPanelVisibility] = useState({ asmCode: true, stackPanel: true, - functionPanel: true, storagePanel: true, memoryPanel: true, - stepDetail: true, calldataPanel: true, callstackPanel: true, - solidityState: true, - solidityLocals: true, - solidityPanel: true, - returnValuesPanel: true, - fullStoragesChangesPanel: true - }) - const [asm, setAsm] = useState({ - code: null, - address: null, - index: null }) const [calldataPanel, setCalldataPanel] = useState(null) const [memoryPanel, setMemoryPanel] = useState(null) const [callStackPanel, setCallStackPanel] = useState(null) const [stackPanel, setStackPanel] = useState(null) - const [functionPanel, setFunctionPanel] = useState(null) const [storagePanel, setStoragePanel] = useState({ calldata: null, header: null }) - const [stepDetail, setStepDetail] = useState({ - key: null, - value: null, - reset: false - }) - const [solidityState, setSolidityState] = useState({ - calldata: null, - message: null, - }) - const [solidityLocals, setSolidityLocals] = useState({ - calldata: null, - message: null, - }) - const [returnValuesPanel, setReturnValuesPanel] = useState({}) - const [fullStoragesChangesPanel, setFullStoragesChangesPanel] = useState(null) useEffect(() => { - vmDebuggerLogic.event.register('codeManagerChanged', (code, address, index) => { - setAsm({ code, address, index }) - }) - vmDebuggerLogic.event.register('traceUnloaded', () => { - setAsm({ code: [], address: '', index: -1 }) - }) vmDebuggerLogic.event.register('traceManagerCallDataUpdate', (calldata) => { setCalldataPanel(calldata) }) @@ -78,105 +36,28 @@ export const VmDebugger = ({ vmDebuggerLogic }) => { vmDebuggerLogic.event.register('traceManagerStackUpdate', (calldata) => { setStackPanel(calldata) }) - vmDebuggerLogic.event.register('functionsStackUpdate', (stack) => { - if (stack === null) return - const functions = [] - - for (const func of stack) { - functions.push(func.functionDefinition.attributes.name + '(' + func.inputs.join(', ') + ')') - } - setFunctionPanel(functions) - }) vmDebuggerLogic.event.register('traceManagerStorageUpdate', (calldata, header) => { setStoragePanel({ calldata, header }) }) - vmDebuggerLogic.event.register('traceUnloaded', () => { - setStepDetail({ key: null, value: null, reset: true }) - }) - vmDebuggerLogic.event.register('newTraceLoaded', () => { - setStepDetail({ key: null, value: null, reset: true }) - }) - vmDebuggerLogic.event.register('traceCurrentStepUpdate', (error, step) => { - setStepDetail({ key: 'execution step', value: (error ? '-' : step), reset: false }) - }) - vmDebuggerLogic.event.register('traceMemExpandUpdate', (error, addmem) => { - setStepDetail({ key: 'add memory', value: (error ? '-' : addmem), reset: false }) - }) - vmDebuggerLogic.event.register('traceStepCostUpdate', (error, gas) => { - setStepDetail({ key: 'gas', value: (error ? '-' : gas), reset: false }) - }) - vmDebuggerLogic.event.register('traceCurrentCalledAddressAtUpdate', (error, address) => { - setStepDetail({ key: 'loaded address', value: (error ? '-' : address), reset: false }) - }) - vmDebuggerLogic.event.register('traceRemainingGasUpdate', (error, remainingGas) => { - setStepDetail({ key: 'remaining gas', value: (error ? '-' : remainingGas), reset: false }) - }) - vmDebuggerLogic.event.register('indexUpdate', (index) => { - setStepDetail({ key: 'vm trace step', value: index, reset: false }) - }) - vmDebuggerLogic.event.register('solidityState', (calldata) => { - setSolidityState({ ...solidityState, calldata }) - }) - vmDebuggerLogic.event.register('solidityStateMessage', (message) => { - setSolidityState({ ...solidityState, message }) - }) - vmDebuggerLogic.event.register('solidityLocals', (calldata) => { - setSolidityLocals({ ...solidityState, calldata }) - }) - vmDebuggerLogic.event.register('solidityLocalsMessage', (message) => { - setSolidityLocals({ ...solidityState, message }) - }) - vmDebuggerLogic.event.register('traceReturnValueUpdate', (calldata) => { - setReturnValuesPanel(calldata) - }) - vmDebuggerLogic.event.register('traceAddressesUpdate', (_addreses) => { - setFullStoragesChangesPanel({}) - }) - vmDebuggerLogic.event.register('traceStorageUpdate', (calldata) => { - setFullStoragesChangesPanel(calldata) - }) vmDebuggerLogic.event.register('newTrace', () => { setPanelVisibility({ asmCode: true, stackPanel: true, - functionPanel: true, storagePanel: true, memoryPanel: true, - stepDetail: true, calldataPanel: true, callstackPanel: true, - solidityState: true, - solidityLocals: true, - solidityPanel: true, - returnValuesPanel: true, - fullStoragesChangesPanel: true - }) - }) - vmDebuggerLogic.event.register('newCallTree', () => { - setPanelVisibility({ - ...panelVisibility, - solidityPanel: false }) }) + // vmDebuggerLogic.event.register('newCallTree', () => { + // setPanelVisibility({ + // ...panelVisibility, + // solidityPanel: false + // }) + // }) vmDebuggerLogic.start() }, []) - const renderHead = () => { - return ( -
    -
    - -
    -
    -
    -
    - ) - } - return (
    @@ -185,8 +66,6 @@ export const VmDebugger = ({ vmDebuggerLogic }) => { - -
    ) diff --git a/libs/remix-ui/utils/src/index.ts b/libs/remix-ui/utils/src/index.ts index 7a9332d560b..d6282f565ac 100644 --- a/libs/remix-ui/utils/src/index.ts +++ b/libs/remix-ui/utils/src/index.ts @@ -1 +1 @@ -export * from './lib/should-render'; +export * from './lib/should-render' diff --git a/libs/remix-ui/utils/src/lib/should-render.css b/libs/remix-ui/utils/src/lib/should-render.css deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/libs/remix-ui/utils/src/lib/should-render.spec.tsx b/libs/remix-ui/utils/src/lib/should-render.spec.tsx deleted file mode 100644 index 003c5b88002..00000000000 --- a/libs/remix-ui/utils/src/lib/should-render.spec.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; - -import ShouldRender from './should-render'; - -describe(' ShouldRender', () => { - it('should render successfully', () => { - const { baseElement } = render(); - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/remix-ui/utils/src/lib/should-render.tsx b/libs/remix-ui/utils/src/lib/should-render.tsx index 1ff403d31cf..b414cdf5ef3 100644 --- a/libs/remix-ui/utils/src/lib/should-render.tsx +++ b/libs/remix-ui/utils/src/lib/should-render.tsx @@ -1,16 +1,15 @@ -import React from 'react'; - -import './should-render.css'; +import React from 'react' /* eslint-disable-next-line */ -export interface ShouldRenderProps {} +export interface ShouldRenderProps { + children?: React.ReactNode, + if: boolean +} export const ShouldRender = (props: ShouldRenderProps) => { - return ( -
    -

    Welcome to shouldRender!

    -
    - ); -}; + return props.if ? ( + props.children + ) : null +} -export default ShouldRender; +export default ShouldRender From 1217ade94bbdb4f6befbe3a6dd9535f18eb21470 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Mon, 14 Sep 2020 12:04:22 +0100 Subject: [PATCH 16/63] Fixed tx-browser bugs --- apps/remix-ide/src/app/tabs/debugger-tab.js | 16 +++++--- .../debugger-ui/src/lib/debugger-ui.tsx | 39 ++++++------------- .../debugger-ui/src/lib/slider/slider.tsx | 9 +---- .../src/lib/tx-browser/tx-browser.tsx | 15 +++++-- 4 files changed, 36 insertions(+), 43 deletions(-) diff --git a/apps/remix-ide/src/app/tabs/debugger-tab.js b/apps/remix-ide/src/app/tabs/debugger-tab.js index c032180e83f..48b3ca4b432 100644 --- a/apps/remix-ide/src/app/tabs/debugger-tab.js +++ b/apps/remix-ide/src/app/tabs/debugger-tab.js @@ -61,6 +61,15 @@ class DebuggerTab extends ViewPlugin { toaster(yo`
    Source verification plugin not activated or not available. continuing without source code debugging.
    `) }) + this.renderComponent() + + this.call('manager', 'activatePlugin', 'source-verification').catch(e => console.log(e.message)) + // this.call('manager', 'activatePlugin', 'udapp') + + return this.el + } + + renderComponent () { ReactDOM.render( , this.el) - - this.call('manager', 'activatePlugin', 'source-verification').catch(e => console.log(e.message)) - // this.call('manager', 'activatePlugin', 'udapp') - - return this.el } deactivate () { @@ -87,10 +91,12 @@ class DebuggerTab extends ViewPlugin { debug (hash) { this.debugHash = hash + this.renderComponent() } getTrace (hash) { this.getTraceHash = hash + this.renderComponent() } // debugger () { diff --git a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx index 456fc3b005d..f9541837b54 100644 --- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx @@ -69,23 +69,18 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash, if (removeHighlights) deleteHighlights() }, [removeHighlights]) - const listenToEvents = (debuggerInstance) => { + const listenToEvents = (debuggerInstance, currentReceipt) => { if (!debuggerInstance) return debuggerInstance.event.register('debuggerStatus', async (isActive) => { await debuggerModule.call('editor', 'discardHighlight') - setState(prevState => { - return { - ...prevState, - isActive - } - }) + setState({ ...state, isActive }) }) debuggerInstance.event.register('newSourceLocation', async (lineColumnPos, rawLocation) => { const contracts = await fetchContractAndCompile( - state.currentReceipt.contractAddress || state.currentReceipt.to, - state.currentReceipt) + currentReceipt.contractAddress || currentReceipt.to, + currentReceipt) if (contracts) { const path = contracts.getSourceName(rawLocation.file) @@ -98,13 +93,6 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash, }) debuggerInstance.event.register('debuggerUnloaded', () => unLoad()) - - setState(prevState => { - return { - ...prevState, - debugger: debuggerInstance - } - }) } const requestDebug = (blockNumber, txNumber, tx) => { @@ -142,6 +130,7 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash, // yo.update(this.stepManagerView, yo`
    `) setState(prevState => { const { visibility } = prevState + return { ...prevState, debugger: null, @@ -176,16 +165,17 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash, debuggerInstance.debug(blockNumber, txNumber, tx, () => { // this.stepManager = new StepManagerUI(this.debugger.step_manager) // this.vmDebugger = new VmDebugger(this.debugger.vmDebuggerLogic) + listenToEvents(debuggerInstance, currentReceipt) setState(prevState => { return { ...prevState, blockNumber, txNumber, debugging: true, - currentReceipt + currentReceipt, + debugger: debuggerInstance } }) - listenToEvents(debuggerInstance) // this.renderDebugger() }).catch((error) => { toaster(error, null, null) @@ -202,12 +192,7 @@ const getTrace = (hash) => { const web3 = await getDebugWeb3() const currentReceipt = await web3.eth.getTransactionReceipt(hash) - setState(prevState => { - return { - ...prevState, - currentReceipt - } - }) + setState({ ...state, currentReceipt }) const debug = new Debugger({ web3, @@ -239,9 +224,9 @@ const deleteHighlights = async () => { return (
    - - {/* - */} + + + {/* */}
    {/*
    {state.statusMessage}
    */} diff --git a/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx b/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx index 7fd7e8ed4fc..3b501434189 100644 --- a/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx @@ -25,12 +25,7 @@ export const Slider = ({ stepManager, sliderLength, sliderValue }) => { }, [sliderValue]) const setValue = (value) => { - setState(prevState => { - return { - ...prevState, - currentValue: value - } - }) + setState({ ...state, currentValue: value }) } const handleChange = (e) => { @@ -56,7 +51,7 @@ export const Slider = ({ stepManager, sliderLength, sliderValue }) => { type='range' min={0} max={state.max} - value={state.currentValue} + defaultValue={state.currentValue} onChange={handleChange} disabled={state.disabled} /> diff --git a/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx b/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx index bc660ef4a97..d9a2d3291a8 100644 --- a/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx @@ -1,14 +1,21 @@ -import React, { useState } from 'react' +import React, { useState, useEffect } from 'react' import './tx-browser.css' -import EventManager from '../../../../../../apps/remix-ide/src/lib/events' -export const TxBrowser = ({ requestDebug, unloadRequested }) => { - const event = new EventManager() +export const TxBrowser = ({ requestDebug, unloadRequested, transactionNumber }) => { const [state, setState] = useState({ txNumber: undefined, debugging: false }) + useEffect(() => { + setState(prevState => { + return { + ...prevState, + txNumber: transactionNumber + } + }) + }, [transactionNumber]) + const handleSubmit = () => { if (state.debugging) { unload() From 71130115f20d50a28306d7f7b405c4a8c1dabf10 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 15 Sep 2020 10:25:23 +0100 Subject: [PATCH 17/63] Resolved bugs in step manager --- .../lib/button-navigator/button-navigator.tsx | 4 +- .../debugger-ui/src/lib/debugger-ui.tsx | 12 ++++-- .../debugger-ui/src/lib/slider/slider.tsx | 42 +++++-------------- .../src/lib/step-manager/step-manager.tsx | 33 ++++----------- .../src/lib/tx-browser/tx-browser.tsx | 21 +++++----- 5 files changed, 38 insertions(+), 74 deletions(-) diff --git a/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx b/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx index b7b09b3b061..b2bfcc9dbbb 100644 --- a/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx @@ -44,8 +44,8 @@ export const ButtonNavigation = ({ stepManager, revertedReason, stepState, jumpO jumpPreviousBreakpointDisabled: stepState === 'initial', intoForwardDisabled: stepState === 'end', overForwardDisabled: stepState === 'end', - jumpNextBreakpointDisabled: jumpOutDisabled, - jumpOutDisabled + jumpNextBreakpointDisabled: jumpOutDisabled ? jumpOutDisabled : stepState === 'end', + jumpOutDisabled: jumpOutDisabled ? jumpOutDisabled : true } }) } diff --git a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx index f9541837b54..95cd1c064e2 100644 --- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx @@ -27,7 +27,7 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash, to: null }, blockNumber: null, - txNumber: null, + txNumber: '', visibility: { vmDebugger: false, stepManager: false, @@ -74,7 +74,9 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash, debuggerInstance.event.register('debuggerStatus', async (isActive) => { await debuggerModule.call('editor', 'discardHighlight') - setState({ ...state, isActive }) + setState( prevState => { + return { ...prevState, isActive } + }) }) debuggerInstance.event.register('newSourceLocation', async (lineColumnPos, rawLocation) => { @@ -192,7 +194,9 @@ const getTrace = (hash) => { const web3 = await getDebugWeb3() const currentReceipt = await web3.eth.getTransactionReceipt(hash) - setState({ ...state, currentReceipt }) + setState(prevState => { + return { ...prevState, currentReceipt } + }) const debug = new Debugger({ web3, @@ -224,7 +228,7 @@ const deleteHighlights = async () => { return (
    - + {/* */}
    diff --git a/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx b/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx index 3b501434189..8ce1ac31c62 100644 --- a/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx @@ -1,46 +1,26 @@ import React, { useState, useEffect } from 'react' -export const Slider = ({ stepManager, sliderLength, sliderValue }) => { +export const Slider = ({ stepManager, sliderValue }) => { const [state, setState] = useState({ - max: null, - disabled: true, - previousValue: null, - currentValue: null + currentValue: '' }) - useEffect(() => { - setState(prevState => { - return { - ...prevState, - max: sliderLength - 1, - disabled: (sliderLength === 0) - } - }) - - setValue(0) - }, [sliderLength]) - useEffect(() => { setValue(sliderValue) }, [sliderValue]) const setValue = (value) => { - setState({ ...state, currentValue: value }) + if (value === state.currentValue) return + setState(prevState => { + return { ...prevState, currentValue: value } + }) + stepManager && stepManager.jumpTo(value) } const handleChange = (e) => { - console.log('e.target: ', e.target) const value = parseInt(e.target.value) - if (value === state.previousValue) return - setState(prevState => { - return { - ...prevState, - previousValue: value, - currentValue: value - } - }) - stepManager.jumpTo(value) + setValue(value) } return ( @@ -50,10 +30,10 @@ export const Slider = ({ stepManager, sliderLength, sliderValue }) => { className='w-100 my-0' type='range' min={0} - max={state.max} - defaultValue={state.currentValue} + max={stepManager ? stepManager.traceLength - 1 : 0} + value={state.currentValue} onChange={handleChange} - disabled={state.disabled} + disabled={stepManager ? stepManager.traceLength === 0 : true} />
    ) diff --git a/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx b/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx index 018c1d57c3a..d2b641730e0 100644 --- a/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx @@ -4,7 +4,6 @@ import ButtonNavigator from '../button-navigator/button-navigator' export const StepManager = ({ stepManager }) => { const [state, setState] = useState({ - sliderLength: null, sliderValue: 0, revertWarning: '', stepState: '', @@ -12,45 +11,27 @@ export const StepManager = ({ stepManager }) => { }) useEffect(() => { - stepManager.event.register('traceLengthChanged', setSliderLength) - stepManager.event.register('revertWarning', setRevertWarning) - stepManager.event.register('stepChanged', updateStep) - }, []) - - const setSliderLength = (length) => { - setState(prevState => { - return { - ...prevState, - sliderLength: length - } - }) - } + stepManager && stepManager.event.register('revertWarning', setRevertWarning) + stepManager && stepManager.event.register('stepChanged', updateStep) + }, [stepManager]) const setRevertWarning = (warning) => { setState(prevState => { - return { - ...prevState, - revertWarning: warning - } + return { ...prevState, revertWarning: warning } }) } const updateStep = (step, stepState, jumpOutDisabled) => { setState(prevState => { - return { - ...prevState, - sliderValue: step, - stepState, - jumpOutDisabled - } + return { ...prevState, sliderValue: step, stepState, jumpOutDisabled } }) } - const { sliderLength, sliderValue, revertWarning, stepState, jumpOutDisabled } = state + const { sliderValue, revertWarning, stepState, jumpOutDisabled } = state return (
    - +
    ) diff --git a/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx b/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx index d9a2d3291a8..39841b50212 100644 --- a/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx @@ -1,10 +1,9 @@ import React, { useState, useEffect } from 'react' import './tx-browser.css' -export const TxBrowser = ({ requestDebug, unloadRequested, transactionNumber }) => { +export const TxBrowser = ({ requestDebug, unloadRequested, transactionNumber, debugging }) => { const [state, setState] = useState({ - txNumber: undefined, - debugging: false + txNumber: '' }) useEffect(() => { @@ -17,7 +16,7 @@ export const TxBrowser = ({ requestDebug, unloadRequested, transactionNumber }) }, [transactionNumber]) const handleSubmit = () => { - if (state.debugging) { + if (debugging) { unload() } else { requestDebug(undefined, state.txNumber) @@ -44,30 +43,30 @@ export const TxBrowser = ({ requestDebug, unloadRequested, transactionNumber }) } return ( -
    +
    From 0b5c5d596c32c02eafb0401e80fe34f4aa3e9237 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Wed, 16 Sep 2020 08:08:25 +0100 Subject: [PATCH 18/63] Added copy to clipboard component --- libs/remix-ui/clipboard/.babelrc | 4 + libs/remix-ui/clipboard/.eslintrc | 248 ++++++++++++++++++ libs/remix-ui/clipboard/README.md | 7 + .../remix-ui/clipboard/babel-jest.config.json | 14 + libs/remix-ui/clipboard/jest.config.js | 12 + libs/remix-ui/clipboard/src/index.ts | 1 + .../copy-to-clipboard/copy-to-clipboard.css | 4 + .../copy-to-clipboard/copy-to-clipboard.tsx | 44 ++++ libs/remix-ui/clipboard/tsconfig.json | 19 ++ libs/remix-ui/clipboard/tsconfig.lib.json | 13 + libs/remix-ui/clipboard/tsconfig.spec.json | 15 ++ .../debugger-ui/src/hooks/extract-data.tsx | 2 +- .../debugger-ui/src/lib/debugger-ui.tsx | 19 +- .../src/lib/step-manager/step-manager.tsx | 6 +- .../src/lib/vm-debugger/dropdown-panel.tsx | 9 +- .../src/lib/vm-debugger/vm-debugger-head.tsx | 140 +++++----- nx.json | 3 + tsconfig.json | 5 +- workspace.json | 27 ++ 19 files changed, 504 insertions(+), 88 deletions(-) create mode 100644 libs/remix-ui/clipboard/.babelrc create mode 100644 libs/remix-ui/clipboard/.eslintrc create mode 100644 libs/remix-ui/clipboard/README.md create mode 100644 libs/remix-ui/clipboard/babel-jest.config.json create mode 100644 libs/remix-ui/clipboard/jest.config.js create mode 100644 libs/remix-ui/clipboard/src/index.ts create mode 100644 libs/remix-ui/clipboard/src/lib/copy-to-clipboard/copy-to-clipboard.css create mode 100644 libs/remix-ui/clipboard/src/lib/copy-to-clipboard/copy-to-clipboard.tsx create mode 100644 libs/remix-ui/clipboard/tsconfig.json create mode 100644 libs/remix-ui/clipboard/tsconfig.lib.json create mode 100644 libs/remix-ui/clipboard/tsconfig.spec.json diff --git a/libs/remix-ui/clipboard/.babelrc b/libs/remix-ui/clipboard/.babelrc new file mode 100644 index 00000000000..09d67939cc9 --- /dev/null +++ b/libs/remix-ui/clipboard/.babelrc @@ -0,0 +1,4 @@ +{ + "presets": ["@nrwl/react/babel"], + "plugins": [] +} diff --git a/libs/remix-ui/clipboard/.eslintrc b/libs/remix-ui/clipboard/.eslintrc new file mode 100644 index 00000000000..977f139a099 --- /dev/null +++ b/libs/remix-ui/clipboard/.eslintrc @@ -0,0 +1,248 @@ +{ + "rules": { + "array-callback-return": "warn", + "dot-location": ["warn", "property"], + "eqeqeq": ["warn", "smart"], + "new-parens": "warn", + "no-caller": "warn", + "no-cond-assign": ["warn", "except-parens"], + "no-const-assign": "warn", + "no-control-regex": "warn", + "no-delete-var": "warn", + "no-dupe-args": "warn", + "no-dupe-keys": "warn", + "no-duplicate-case": "warn", + "no-empty-character-class": "warn", + "no-empty-pattern": "warn", + "no-eval": "warn", + "no-ex-assign": "warn", + "no-extend-native": "warn", + "no-extra-bind": "warn", + "no-extra-label": "warn", + "no-fallthrough": "warn", + "no-func-assign": "warn", + "no-implied-eval": "warn", + "no-invalid-regexp": "warn", + "no-iterator": "warn", + "no-label-var": "warn", + "no-labels": ["warn", { "allowLoop": true, "allowSwitch": false }], + "no-lone-blocks": "warn", + "no-loop-func": "warn", + "no-mixed-operators": [ + "warn", + { + "groups": [ + ["&", "|", "^", "~", "<<", ">>", ">>>"], + ["==", "!=", "===", "!==", ">", ">=", "<", "<="], + ["&&", "||"], + ["in", "instanceof"] + ], + "allowSamePrecedence": false + } + ], + "no-multi-str": "warn", + "no-native-reassign": "warn", + "no-negated-in-lhs": "warn", + "no-new-func": "warn", + "no-new-object": "warn", + "no-new-symbol": "warn", + "no-new-wrappers": "warn", + "no-obj-calls": "warn", + "no-octal": "warn", + "no-octal-escape": "warn", + "no-redeclare": "warn", + "no-regex-spaces": "warn", + "no-restricted-syntax": ["warn", "WithStatement"], + "no-script-url": "warn", + "no-self-assign": "warn", + "no-self-compare": "warn", + "no-sequences": "warn", + "no-shadow-restricted-names": "warn", + "no-sparse-arrays": "warn", + "no-template-curly-in-string": "warn", + "no-this-before-super": "warn", + "no-throw-literal": "warn", + "no-restricted-globals": [ + "error", + "addEventListener", + "blur", + "close", + "closed", + "confirm", + "defaultStatus", + "defaultstatus", + "event", + "external", + "find", + "focus", + "frameElement", + "frames", + "history", + "innerHeight", + "innerWidth", + "length", + "location", + "locationbar", + "menubar", + "moveBy", + "moveTo", + "name", + "onblur", + "onerror", + "onfocus", + "onload", + "onresize", + "onunload", + "open", + "opener", + "opera", + "outerHeight", + "outerWidth", + "pageXOffset", + "pageYOffset", + "parent", + "print", + "removeEventListener", + "resizeBy", + "resizeTo", + "screen", + "screenLeft", + "screenTop", + "screenX", + "screenY", + "scroll", + "scrollbars", + "scrollBy", + "scrollTo", + "scrollX", + "scrollY", + "self", + "status", + "statusbar", + "stop", + "toolbar", + "top" + ], + "no-unexpected-multiline": "warn", + "no-unreachable": "warn", + "no-unused-expressions": [ + "error", + { + "allowShortCircuit": true, + "allowTernary": true, + "allowTaggedTemplates": true + } + ], + "no-unused-labels": "warn", + "no-useless-computed-key": "warn", + "no-useless-concat": "warn", + "no-useless-escape": "warn", + "no-useless-rename": [ + "warn", + { + "ignoreDestructuring": false, + "ignoreImport": false, + "ignoreExport": false + } + ], + "no-with": "warn", + "no-whitespace-before-property": "warn", + "react-hooks/exhaustive-deps": "warn", + "require-yield": "warn", + "rest-spread-spacing": ["warn", "never"], + "strict": ["warn", "never"], + "unicode-bom": ["warn", "never"], + "use-isnan": "warn", + "valid-typeof": "warn", + "no-restricted-properties": [ + "error", + { + "object": "require", + "property": "ensure", + "message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting" + }, + { + "object": "System", + "property": "import", + "message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting" + } + ], + "getter-return": "warn", + "import/first": "error", + "import/no-amd": "error", + "import/no-webpack-loader-syntax": "error", + "react/forbid-foreign-prop-types": ["warn", { "allowInPropTypes": true }], + "react/jsx-no-comment-textnodes": "warn", + "react/jsx-no-duplicate-props": "warn", + "react/jsx-no-target-blank": "warn", + "react/jsx-no-undef": "error", + "react/jsx-pascal-case": ["warn", { "allowAllCaps": true, "ignore": [] }], + "react/jsx-uses-react": "warn", + "react/jsx-uses-vars": "warn", + "react/no-danger-with-children": "warn", + "react/no-direct-mutation-state": "warn", + "react/no-is-mounted": "warn", + "react/no-typos": "error", + "react/react-in-jsx-scope": "error", + "react/require-render-return": "error", + "react/style-prop-object": "warn", + "react/jsx-no-useless-fragment": "warn", + "jsx-a11y/accessible-emoji": "warn", + "jsx-a11y/alt-text": "warn", + "jsx-a11y/anchor-has-content": "warn", + "jsx-a11y/anchor-is-valid": [ + "warn", + { "aspects": ["noHref", "invalidHref"] } + ], + "jsx-a11y/aria-activedescendant-has-tabindex": "warn", + "jsx-a11y/aria-props": "warn", + "jsx-a11y/aria-proptypes": "warn", + "jsx-a11y/aria-role": "warn", + "jsx-a11y/aria-unsupported-elements": "warn", + "jsx-a11y/heading-has-content": "warn", + "jsx-a11y/iframe-has-title": "warn", + "jsx-a11y/img-redundant-alt": "warn", + "jsx-a11y/no-access-key": "warn", + "jsx-a11y/no-distracting-elements": "warn", + "jsx-a11y/no-redundant-roles": "warn", + "jsx-a11y/role-has-required-aria-props": "warn", + "jsx-a11y/role-supports-aria-props": "warn", + "jsx-a11y/scope": "warn", + "react-hooks/rules-of-hooks": "error", + "default-case": "off", + "no-dupe-class-members": "off", + "no-undef": "off", + "@typescript-eslint/consistent-type-assertions": "warn", + "no-array-constructor": "off", + "@typescript-eslint/no-array-constructor": "warn", + "@typescript-eslint/no-namespace": "error", + "no-use-before-define": "off", + "@typescript-eslint/no-use-before-define": [ + "warn", + { + "functions": false, + "classes": false, + "variables": false, + "typedefs": false + } + ], + "no-unused-vars": "off", + "@typescript-eslint/no-unused-vars": [ + "warn", + { "args": "none", "ignoreRestSiblings": true } + ], + "no-useless-constructor": "off", + "@typescript-eslint/no-useless-constructor": "warn" + }, + "env": { + "browser": true, + "commonjs": true, + "es6": true, + "jest": true, + "node": true + }, + "settings": { "react": { "version": "detect" } }, + "plugins": ["import", "jsx-a11y", "react", "react-hooks"], + "extends": ["../../../.eslintrc"], + "ignorePatterns": ["!**/*"] +} diff --git a/libs/remix-ui/clipboard/README.md b/libs/remix-ui/clipboard/README.md new file mode 100644 index 00000000000..25094197a8a --- /dev/null +++ b/libs/remix-ui/clipboard/README.md @@ -0,0 +1,7 @@ +# remix-ui-clipboard + +This library was generated with [Nx](https://nx.dev). + +## Running unit tests + +Run `nx test remix-ui-clipboard` to execute the unit tests via [Jest](https://jestjs.io). diff --git a/libs/remix-ui/clipboard/babel-jest.config.json b/libs/remix-ui/clipboard/babel-jest.config.json new file mode 100644 index 00000000000..bf04d5f81f7 --- /dev/null +++ b/libs/remix-ui/clipboard/babel-jest.config.json @@ -0,0 +1,14 @@ +{ + "presets": [ + [ + "@babel/preset-env", + { + "targets": { + "node": "current" + } + } + ], + "@babel/preset-typescript", + "@babel/preset-react" + ] +} diff --git a/libs/remix-ui/clipboard/jest.config.js b/libs/remix-ui/clipboard/jest.config.js new file mode 100644 index 00000000000..29c72555b12 --- /dev/null +++ b/libs/remix-ui/clipboard/jest.config.js @@ -0,0 +1,12 @@ +module.exports = { + name: 'remix-ui-clipboard', + preset: '../../../jest.config.js', + transform: { + '^.+\\.[tj]sx?$': [ + 'babel-jest', + { cwd: __dirname, configFile: './babel-jest.config.json' } + ] + }, + moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'], + coverageDirectory: '../../../coverage/libs/remix-ui/clipboard' +}; diff --git a/libs/remix-ui/clipboard/src/index.ts b/libs/remix-ui/clipboard/src/index.ts new file mode 100644 index 00000000000..2d45544963a --- /dev/null +++ b/libs/remix-ui/clipboard/src/index.ts @@ -0,0 +1 @@ +export * from './lib/copy-to-clipboard/copy-to-clipboard'; diff --git a/libs/remix-ui/clipboard/src/lib/copy-to-clipboard/copy-to-clipboard.css b/libs/remix-ui/clipboard/src/lib/copy-to-clipboard/copy-to-clipboard.css new file mode 100644 index 00000000000..1e625dd256e --- /dev/null +++ b/libs/remix-ui/clipboard/src/lib/copy-to-clipboard/copy-to-clipboard.css @@ -0,0 +1,4 @@ +.copyIcon { + margin-left: 5px; + cursor: pointer; +} \ No newline at end of file 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 new file mode 100644 index 00000000000..0134c37409f --- /dev/null +++ b/libs/remix-ui/clipboard/src/lib/copy-to-clipboard/copy-to-clipboard.tsx @@ -0,0 +1,44 @@ +import React from 'react' +import * as copy from 'copy-text-to-clipboard' + +import './copy-to-clipboard.css' + +export const CopyToClipboard = ({ getContent, tip='Copy value to clipboard', icon='fa-copy', ...otherProps }) => { + const handleClick = () => { + let copiableContent:string + + 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) { + console.error(e) + } + copy(copiableContent) + // addTooltip('Copied value to clipboard.') + } else { + // addTooltip('Cannot copy empty content!') + } + } + + return ( + + ) +} + +export default CopyToClipboard diff --git a/libs/remix-ui/clipboard/tsconfig.json b/libs/remix-ui/clipboard/tsconfig.json new file mode 100644 index 00000000000..42b7ee636f5 --- /dev/null +++ b/libs/remix-ui/clipboard/tsconfig.json @@ -0,0 +1,19 @@ +{ + "extends": "../../../tsconfig.json", + "compilerOptions": { + "jsx": "react", + "allowJs": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ] +} diff --git a/libs/remix-ui/clipboard/tsconfig.lib.json b/libs/remix-ui/clipboard/tsconfig.lib.json new file mode 100644 index 00000000000..b560bc4dec6 --- /dev/null +++ b/libs/remix-ui/clipboard/tsconfig.lib.json @@ -0,0 +1,13 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../dist/out-tsc", + "types": ["node"] + }, + "files": [ + "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts", + "../../../node_modules/@nrwl/react/typings/image.d.ts" + ], + "exclude": ["**/*.spec.ts", "**/*.spec.tsx"], + "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"] +} diff --git a/libs/remix-ui/clipboard/tsconfig.spec.json b/libs/remix-ui/clipboard/tsconfig.spec.json new file mode 100644 index 00000000000..1798b378a99 --- /dev/null +++ b/libs/remix-ui/clipboard/tsconfig.spec.json @@ -0,0 +1,15 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../dist/out-tsc", + "module": "commonjs", + "types": ["jest", "node"] + }, + "include": [ + "**/*.spec.ts", + "**/*.spec.tsx", + "**/*.spec.js", + "**/*.spec.jsx", + "**/*.d.ts" + ] +} diff --git a/libs/remix-ui/debugger-ui/src/hooks/extract-data.tsx b/libs/remix-ui/debugger-ui/src/hooks/extract-data.tsx index 3966329e4e4..116e4ba6261 100644 --- a/libs/remix-ui/debugger-ui/src/hooks/extract-data.tsx +++ b/libs/remix-ui/debugger-ui/src/hooks/extract-data.tsx @@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react' import { ExtractData, ExtractFunc } from '../types' export const useExtractData = (json, extractFunc?: ExtractFunc): Array<{ key: string, data: ExtractData }> => { - const [data, setData] = useState(null) + const [data, setData] = useState([]) useEffect(() => { const data: Array<{ key: string, data: ExtractData }> = Object.keys(json).map((innerKey) => { diff --git a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx index 95cd1c064e2..4730ba9c8a9 100644 --- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx @@ -190,26 +190,27 @@ const debug = (txHash) => { } const getTrace = (hash) => { + if (!hash) return return new Promise(async (resolve, reject) => { /* eslint-disable-line */ const web3 = await getDebugWeb3() const currentReceipt = await web3.eth.getTransactionReceipt(hash) - - setState(prevState => { - return { ...prevState, currentReceipt } - }) - const debug = new Debugger({ web3, offsetToLineColumnConverter: globalRegistry.get('offsettolinecolumnconverter').api, compilationResult: async (address) => { try { - return await fetchContractAndCompile(address, state.currentReceipt) + return await fetchContractAndCompile(address, currentReceipt) } catch (e) { console.error(e) } return null } }) + + setState(prevState => { + return { ...prevState, currentReceipt } + }) + debug.debugger.traceManager.traceRetriever.getTrace(hash, (error, trace) => { if (error) return reject(error) resolve(trace) @@ -228,9 +229,9 @@ const deleteHighlights = async () => { return (
    - - - {/* */} + + +
    {/*
    {state.statusMessage}
    */} diff --git a/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx b/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx index d2b641730e0..63d517ee535 100644 --- a/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx @@ -11,8 +11,10 @@ export const StepManager = ({ stepManager }) => { }) useEffect(() => { - stepManager && stepManager.event.register('revertWarning', setRevertWarning) - stepManager && stepManager.event.register('stepChanged', updateStep) + if (stepManager) { + stepManager.event.register('revertWarning', setRevertWarning) + stepManager.event.register('stepChanged', updateStep) + } }, [stepManager]) const setRevertWarning = (warning) => { diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx index 65c162bc267..b5db6414d51 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx @@ -3,13 +3,12 @@ import AssemblyItems from './assembly-items' import { TreeView, TreeViewItem } from '@remix-ui/tree-view' import useExtractData from '../../hooks/extract-data' import { DropdownPanelProps, ExtractData } from '../../types' +import { CopyToClipboard } from '@remix-ui/clipboard' import './styles/dropdown-panel.css' /* eslint-disable-next-line */ import EventManager from '../../../../../../apps/remix-ide/src/lib/events' -/* eslint-disable-next-line */ -import copyToClipboard from '../../../../../../apps/remix-ide/src/app/ui/copy-to-clipboard' export const DropdownPanel = (props: DropdownPanelProps) => { const { dropdownName, dropdownMessage, opts, codeView, index, calldata, header, extractFunc, formatSelfFunc } = props @@ -120,7 +119,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => { } } }) - if (!this.displayContentOnly) { + if (!state.displayContentOnly) { // this.view.querySelector('.title i.fa-copy').style.display = 'block' setState(prevState => { return { @@ -188,7 +187,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => { let content: JSX.Element | JSX.Element[] =
    Empty
    if (state.json) { - content = data.map(item => { + content = (data).map(item => { return ( { renderData(item.data, item.key) } @@ -200,7 +199,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
    {dropdownName}
    - {copyToClipboard(() => copyClipboard())} +
    :
    if (state.displayContentOnly) { diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx index 31e4b074577..354811dd8f3 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx @@ -35,80 +35,82 @@ export const VmDebuggerHead = ({ vmDebuggerLogic }) => { }) useEffect(() => { - vmDebuggerLogic.event.register('codeManagerChanged', (code, address, index) => { - setAsm({ code, address, index }) - }) - vmDebuggerLogic.event.register('traceUnloaded', () => { - setAsm({ code: [], address: '', index: -1 }) - }) - vmDebuggerLogic.event.register('functionsStackUpdate', (stack) => { - if (stack === null) return - const functions = [] - - for (const func of stack) { - functions.push(func.functionDefinition.attributes.name + '(' + func.inputs.join(', ') + ')') - } - setFunctionPanel(functions) - }) - vmDebuggerLogic.event.register('traceUnloaded', () => { - setStepDetail({ key: null, value: null, reset: true }) - }) - vmDebuggerLogic.event.register('newTraceLoaded', () => { - setStepDetail({ key: null, value: null, reset: true }) - }) - vmDebuggerLogic.event.register('traceCurrentStepUpdate', (error, step) => { - setStepDetail({ key: 'execution step', value: (error ? '-' : step), reset: false }) - }) - vmDebuggerLogic.event.register('traceMemExpandUpdate', (error, addmem) => { - setStepDetail({ key: 'add memory', value: (error ? '-' : addmem), reset: false }) - }) - vmDebuggerLogic.event.register('traceStepCostUpdate', (error, gas) => { - setStepDetail({ key: 'gas', value: (error ? '-' : gas), reset: false }) - }) - vmDebuggerLogic.event.register('traceCurrentCalledAddressAtUpdate', (error, address) => { - setStepDetail({ key: 'loaded address', value: (error ? '-' : address), reset: false }) - }) - vmDebuggerLogic.event.register('traceRemainingGasUpdate', (error, remainingGas) => { - setStepDetail({ key: 'remaining gas', value: (error ? '-' : remainingGas), reset: false }) - }) - vmDebuggerLogic.event.register('indexUpdate', (index) => { - setStepDetail({ key: 'vm trace step', value: index, reset: false }) - }) - vmDebuggerLogic.event.register('solidityState', (calldata) => { - setSolidityState({ ...solidityState, calldata }) - }) - vmDebuggerLogic.event.register('solidityStateMessage', (message) => { - setSolidityState({ ...solidityState, message }) - }) - vmDebuggerLogic.event.register('solidityLocals', (calldata) => { - setSolidityLocals({ ...solidityState, calldata }) - }) - vmDebuggerLogic.event.register('solidityLocalsMessage', (message) => { - setSolidityLocals({ ...solidityState, message }) - }) - vmDebuggerLogic.event.register('newTrace', () => { - setPanelVisibility({ - functionPanel: true, - stepDetail: true, - solidityState: true, - solidityLocals: true, - returnValuesPanel: true, - fullStoragesChangesPanel: true - }) - }) - vmDebuggerLogic.start() - }, []) + if (vmDebuggerLogic) { + vmDebuggerLogic.event.register('codeManagerChanged', (code, address, index) => { + setAsm({ code, address, index }) + }) + vmDebuggerLogic.event.register('traceUnloaded', () => { + setAsm({ code: [], address: '', index: -1 }) + }) + vmDebuggerLogic.event.register('functionsStackUpdate', (stack) => { + if (stack === null) return + const functions = [] + + for (const func of stack) { + functions.push(func.functionDefinition.attributes.name + '(' + func.inputs.join(', ') + ')') + } + setFunctionPanel(functions) + }) + vmDebuggerLogic.event.register('traceUnloaded', () => { + setStepDetail({ key: null, value: null, reset: true }) + }) + vmDebuggerLogic.event.register('newTraceLoaded', () => { + setStepDetail({ key: null, value: null, reset: true }) + }) + vmDebuggerLogic.event.register('traceCurrentStepUpdate', (error, step) => { + setStepDetail({ key: 'execution step', value: (error ? '-' : step), reset: false }) + }) + vmDebuggerLogic.event.register('traceMemExpandUpdate', (error, addmem) => { + setStepDetail({ key: 'add memory', value: (error ? '-' : addmem), reset: false }) + }) + vmDebuggerLogic.event.register('traceStepCostUpdate', (error, gas) => { + setStepDetail({ key: 'gas', value: (error ? '-' : gas), reset: false }) + }) + vmDebuggerLogic.event.register('traceCurrentCalledAddressAtUpdate', (error, address) => { + setStepDetail({ key: 'loaded address', value: (error ? '-' : address), reset: false }) + }) + vmDebuggerLogic.event.register('traceRemainingGasUpdate', (error, remainingGas) => { + setStepDetail({ key: 'remaining gas', value: (error ? '-' : remainingGas), reset: false }) + }) + vmDebuggerLogic.event.register('indexUpdate', (index) => { + setStepDetail({ key: 'vm trace step', value: index, reset: false }) + }) + vmDebuggerLogic.event.register('solidityState', (calldata) => { + setSolidityState({ ...solidityState, calldata }) + }) + vmDebuggerLogic.event.register('solidityStateMessage', (message) => { + setSolidityState({ ...solidityState, message }) + }) + vmDebuggerLogic.event.register('solidityLocals', (calldata) => { + setSolidityLocals({ ...solidityState, calldata }) + }) + vmDebuggerLogic.event.register('solidityLocalsMessage', (message) => { + setSolidityLocals({ ...solidityState, message }) + }) + vmDebuggerLogic.event.register('newTrace', () => { + setPanelVisibility({ + functionPanel: true, + stepDetail: true, + solidityState: true, + solidityLocals: true, + returnValuesPanel: true, + fullStoragesChangesPanel: true + }) + }) + vmDebuggerLogic.start() + } + }, [vmDebuggerLogic]) return (
    -
    ) diff --git a/nx.json b/nx.json index 3cff4f71843..93ed4afc8a7 100644 --- a/nx.json +++ b/nx.json @@ -78,6 +78,9 @@ }, "remix-ui-utils": { "tags": [] + }, + "remix-ui-clipboard": { + "tags": [] } } } diff --git a/tsconfig.json b/tsconfig.json index 3b31675e3b1..cc02d469588 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -24,11 +24,12 @@ "@remix-project/remix-solidity": ["dist/libs/remix-solidity/index.js"], "@remix-project/remix-tests": ["dist/libs/remix-tests/src/index.js"], "@remix-project/remix-url-resolver": ["dist/libs/remix-url-resolver/index.js"], - "@remix-project/remixd": ["dist/libs/remixd/index.js"], + "@remix-project/remixd": ["dist/libs/remixd/index.js"], "@remix-project/debugger-ui": ["libs/debugger-ui/src/index.ts"], "@remix-ui/tree-view": ["libs/remix-ui/tree-view/src/index.ts"], "@remix-ui/debugger-ui": ["libs/remix-ui/debugger-ui/src/index.ts"], - "@remix-ui/utils": ["libs/remix-ui/utils/src/index.ts"] + "@remix-ui/utils": ["libs/remix-ui/utils/src/index.ts"], + "@remix-ui/clipboard": ["libs/remix-ui/clipboard/src/index.ts"] } }, "exclude": ["node_modules", "tmp"] diff --git a/workspace.json b/workspace.json index e5086e34776..98cacf18131 100644 --- a/workspace.json +++ b/workspace.json @@ -590,6 +590,33 @@ } } } + }, + "remix-ui-clipboard": { + "root": "libs/remix-ui/clipboard", + "sourceRoot": "libs/remix-ui/clipboard/src", + "projectType": "library", + "schematics": {}, + "architect": { + "lint": { + "builder": "@nrwl/linter:lint", + "options": { + "linter": "eslint", + "tsConfig": [ + "libs/remix-ui/clipboard/tsconfig.lib.json", + "libs/remix-ui/clipboard/tsconfig.spec.json" + ], + "exclude": ["**/node_modules/**", "!libs/remix-ui/clipboard/**/*"] + } + }, + "test": { + "builder": "@nrwl/jest:jest", + "options": { + "jestConfig": "libs/remix-ui/clipboard/jest.config.js", + "tsConfig": "libs/remix-ui/clipboard/tsconfig.spec.json", + "passWithNoTests": true + } + } + } } }, "cli": { From e83eafcb81558a003f508789c105781bb6b2f2b5 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Mon, 21 Sep 2020 11:19:46 +0100 Subject: [PATCH 19/63] Display assembly items --- .../debugger-ui/src/hooks/extract-data.tsx | 2 +- .../src/lib/vm-debugger/assembly-items.tsx | 65 +++++++++------ .../src/lib/vm-debugger/code-list-view.tsx | 9 +-- .../src/lib/vm-debugger/dropdown-panel.tsx | 80 ++++++------------- .../src/lib/vm-debugger/function-panel.tsx | 2 +- .../src/lib/vm-debugger/stack-panel.tsx | 2 +- .../src/lib/vm-debugger/step-detail.tsx | 2 +- .../src/lib/vm-debugger/vm-debugger-head.tsx | 14 ++-- libs/remix-ui/debugger-ui/src/types/index.ts | 4 +- .../tree-view/src/lib/remix-ui-tree-view.tsx | 4 +- .../src/lib/tree-view-item/tree-view-item.tsx | 6 +- libs/remix-ui/tree-view/src/types/index.ts | 4 +- 12 files changed, 88 insertions(+), 106 deletions(-) diff --git a/libs/remix-ui/debugger-ui/src/hooks/extract-data.tsx b/libs/remix-ui/debugger-ui/src/hooks/extract-data.tsx index 116e4ba6261..da28dfb4bba 100644 --- a/libs/remix-ui/debugger-ui/src/hooks/extract-data.tsx +++ b/libs/remix-ui/debugger-ui/src/hooks/extract-data.tsx @@ -38,7 +38,7 @@ export const useExtractData = (json, extractFunc?: ExtractFunc): Array<{ key: st ret.isLeaf = false } else if (item instanceof Object) { ret.children = Object.keys(item).map((key) => { - return {key: key, value: item[key]} + return {key: key, value: item[key]} }) ret.self = 'Object' ret.isNode = true diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx index c8d770e4232..c63e7dd1142 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx @@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect } from 'react' import './styles/assembly-items.css' export const AssemblyItems = ({ codeView, index }) => { + console.log('codeView: ', codeView) const [state, setState] = useState({ selectedItem: null }) @@ -15,38 +16,50 @@ export const AssemblyItems = ({ codeView, index }) => { const indexChanged = (index) => { if (index < 0) return const { selectedItem } = state - let currentItem = refs.current[selectedItem].current + console.log('selectedItem: ', selectedItem) + console.log('refs: ', refs) + console.log('refs.current: ', refs.current) + let currentItem = refs.current[selectedItem] ? refs.current[selectedItem].current : null - if (selectedItem) { - currentItem.removeAttribute('selected') - currentItem.removeAttribute('style') - if (currentItem.firstChild) { - currentItem.firstChild.removeAttribute('style') + if (currentItem) { + if (selectedItem) { + currentItem.removeAttribute('selected') + currentItem.removeAttribute('style') + if (currentItem.firstChild) { + currentItem.firstChild.removeAttribute('style') + } } - } - - const codeView = asmItemsRef.current + const codeView = asmItemsRef.current + console.log('asmItemsRef: ', asmItemsRef) + console.log('asmItemsRef.current: ', asmItemsRef.current) - currentItem = codeView.children[index] - currentItem.style.setProperty('border-color', 'var(--primary)') - currentItem.style.setProperty('border-style', 'solid') - currentItem.setAttribute('selected', 'selected') - codeView.scrollTop = currentItem.offsetTop - parseInt(codeView.offsetTop) - setState(prevState => { - return { - ...prevState, - selectedItem: index - } - }) + currentItem = codeView.children[index] + currentItem.style.setProperty('border-color', 'var(--primary)') + currentItem.style.setProperty('border-style', 'solid') + currentItem.setAttribute('selected', 'selected') + codeView.scrollTop = currentItem.offsetTop - parseInt(codeView.offsetTop) + setState(prevState => { + return { + ...prevState, + selectedItem: index + } + }) + } } return ( -
    - { - codeView.map((item, i) => { - return
    {item}
    - }) - } +
    +
    +
    +
    + { + codeView.map((item, i) => { + return
    {item}
    + }) + } +
    +
    +
    ) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx index 99855a5b52f..63ef70fbdb5 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx @@ -1,10 +1,7 @@ import React, { useState, useEffect } from 'react' -import DropdownPanel from './dropdown-panel' -/* eslint-disable-next-line */ -import EventManager from '../../../../../../apps/remix-ide/src/lib/events' +import AssemblyItems from './assembly-items' export const CodeListView = ({ asm }) => { - const event = new EventManager() const [state, setState] = useState({ code: [], address: '', @@ -40,11 +37,11 @@ export const CodeListView = ({ asm }) => { } }) indexChanged(index) - } + } return (
    - +
    ) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx index b5db6414d51..4c553acc5ca 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx @@ -1,5 +1,4 @@ import React, { useState, useRef, useEffect } from 'react' -import AssemblyItems from './assembly-items' import { TreeView, TreeViewItem } from '@remix-ui/tree-view' import useExtractData from '../../hooks/extract-data' import { DropdownPanelProps, ExtractData } from '../../types' @@ -11,15 +10,14 @@ import './styles/dropdown-panel.css' import EventManager from '../../../../../../apps/remix-ide/src/lib/events' export const DropdownPanel = (props: DropdownPanelProps) => { - const { dropdownName, dropdownMessage, opts, codeView, index, calldata, header, extractFunc, formatSelfFunc } = props + const { dropdownName, dropdownMessage, opts, calldata, header, loading, extractFunc, formatSelfFunc } = props const data = useExtractData(calldata, extractFunc) const event = new EventManager() const dropdownRawEl = useRef(null) const [state, setState] = useState({ header: '', json: opts.json, - displayContentOnly: opts.displayContentOnly, - toggleDropdown: false, + toggleDropdown: true, message: { innerText: '', display: 'none' @@ -36,7 +34,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => { innerText: '', display: 'none' }, - showRefreshIcon: false + updating: false }) useEffect(() => { @@ -47,6 +45,10 @@ export const DropdownPanel = (props: DropdownPanelProps) => { message(dropdownMessage) }, [dropdownMessage]) + useEffect(() => { + if (loading && !state.updating) setLoading() + }, [loading]) + const handleToggle = () => { setState(prevState => { if (prevState.toggleDropdown) event.trigger('hide', []) @@ -63,22 +65,15 @@ export const DropdownPanel = (props: DropdownPanelProps) => { } const message = (message) => { - setState(state => { + if (message === state.message.innerText) return + setState(prevState => { return { - ...state, + ...prevState, message: { innerText: message, display: message ? 'block' : '' }, - dropdownRawContent: { - ...state.dropdownRawContent, - display: 'none' - }, - dropdownContent: { - ...state.dropdownContent, - display: 'none' - }, - showRefreshIcon: false + updating: false } }) } @@ -99,7 +94,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => { ...prevState.dropdownContent, display: 'none' }, - showRefreshIcon: true + updating: true } }) } @@ -108,30 +103,17 @@ export const DropdownPanel = (props: DropdownPanelProps) => { setState(prevState => { return { ...prevState, - showRefreshIcon: false, dropdownContent: { ...prevState.dropdownContent, - display: 'none' + display: 'block' }, dropdownRawContent: { innerText: JSON.stringify(calldata, null, '\t'), display: 'block' - } + }, + updating: false } }) - if (!state.displayContentOnly) { - // this.view.querySelector('.title i.fa-copy').style.display = 'block' - setState(prevState => { - return { - ...prevState, - title: { - innerText: header || '', - display: 'block' - } - } - }) - } - message('') } const hide = () => { @@ -164,11 +146,11 @@ export const DropdownPanel = (props: DropdownPanelProps) => { } const renderData = (item: ExtractData, key: string) => { - const children = (item.children || []).map((child) => { + const children = (item.children || []).map((child, index) => { const childKey = key + '/' + child.key return ( - + { renderData(child.value, childKey) } ) @@ -176,51 +158,41 @@ export const DropdownPanel = (props: DropdownPanelProps) => { if (children && children.length > 0 ) { return ( - + { children } ) } else { - return + return } } let content: JSX.Element | JSX.Element[] =
    Empty
    if (state.json) { - content = (data).map(item => { + content = (data).map((item, index) => { return ( - + { renderData(item.data, item.key) } ) }) } - const title = !state.displayContentOnly ? -
    + const title =
    {dropdownName}
    -
    :
    - - if (state.displayContentOnly) { - setState(prevState => { - return { - ...prevState, - toggleDropdown: true - } - }) - } +
    return (
    { title }
    - +
    - { codeView ? : content } + { content }
    -
    +
    { state.message.innerText }
    ) diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx index 0441c54d279..dc46e101bca 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx @@ -4,7 +4,7 @@ import DropdownPanel from './dropdown-panel' export const FunctionPanel = ({ calldata }) => { return (
    - +
    ) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx index f3fdf8479fe..c554e747c70 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx @@ -4,7 +4,7 @@ import DropdownPanel from './dropdown-panel' export const StackPanel = ({ calldata }) => { return (
    - +
    ) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx index be1758c8f77..5732fab4fa6 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx @@ -54,7 +54,7 @@ export const StepDetail = (props: StepDetailProps) => { return (
    - +
    ) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx index 354811dd8f3..7fbf6f60c7e 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx @@ -47,7 +47,9 @@ export const VmDebuggerHead = ({ vmDebuggerLogic }) => { const functions = [] for (const func of stack) { - functions.push(func.functionDefinition.attributes.name + '(' + func.inputs.join(', ') + ')') + const functionDefinitionName = func.functionDefinition.name || func.functionDefinition.attributes.name + + functions.push(functionDefinitionName + '(' + func.inputs.join(', ') + ')') } setFunctionPanel(functions) }) @@ -82,10 +84,10 @@ export const VmDebuggerHead = ({ vmDebuggerLogic }) => { setSolidityState({ ...solidityState, message }) }) vmDebuggerLogic.event.register('solidityLocals', (calldata) => { - setSolidityLocals({ ...solidityState, calldata }) + setSolidityLocals({ ...solidityLocals, calldata }) }) vmDebuggerLogic.event.register('solidityLocalsMessage', (message) => { - setSolidityLocals({ ...solidityState, message }) + setSolidityLocals({ ...solidityLocals, message }) }) vmDebuggerLogic.event.register('newTrace', () => { setPanelVisibility({ @@ -106,10 +108,10 @@ export const VmDebuggerHead = ({ vmDebuggerLogic }) => {
    - {/* */} - {/* */} + +
    - {/*
    */} +
    {/*
    */}
    diff --git a/libs/remix-ui/debugger-ui/src/types/index.ts b/libs/remix-ui/debugger-ui/src/types/index.ts index 5f8a8240d4c..1f76ab8ff65 100644 --- a/libs/remix-ui/debugger-ui/src/types/index.ts +++ b/libs/remix-ui/debugger-ui/src/types/index.ts @@ -17,17 +17,15 @@ export interface DropdownPanelProps { dropdownMessage?: string, opts: { json: boolean, - displayContentOnly?: boolean, css?: { [key: string]: string } }, - codeView?: string[], - index?: number, calldata?: { [key: string]: string }, header?: string, + loading?: boolean extractFunc?: ExtractFunc, formatSelfFunc?: FormatSelfFunc } diff --git a/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.tsx b/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.tsx index 2396e692ba1..70842535d33 100644 --- a/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.tsx +++ b/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.tsx @@ -4,10 +4,10 @@ import { TreeViewProps } from '../types' import './remix-ui-tree-view.css' export const TreeView = (props: TreeViewProps) => { - const { children, key, ...otherProps } = props + const { children, id, ...otherProps } = props return ( -
      +
        { children }
      ) 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 a5b1de95da7..f795249152d 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,12 +4,12 @@ import { TreeViewItemProps } from '../../types' import './tree-view-item.css' export const TreeViewItem = (props: TreeViewItemProps) => { - const { key, children, label, ...otherProps } = props + const { id, children, label, ...otherProps } = props const [isExpanded, setIsExpanded] = useState(false) return ( -
    • -
      setIsExpanded(!isExpanded)}> +
    • +
      setIsExpanded(!isExpanded)}>
      { label } diff --git a/libs/remix-ui/tree-view/src/types/index.ts b/libs/remix-ui/tree-view/src/types/index.ts index 6e36ec108ba..2a81f06ceca 100644 --- a/libs/remix-ui/tree-view/src/types/index.ts +++ b/libs/remix-ui/tree-view/src/types/index.ts @@ -1,10 +1,10 @@ export interface TreeViewProps { children?: React.ReactNode, - key: string + id: string } export interface TreeViewItemProps { children?: React.ReactNode, - key: string, + id: string, label: string | number | React.ReactNode } \ No newline at end of file From 750f0652e34a5a5988fe9463fa88182b4828ea34 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Mon, 21 Sep 2020 12:31:59 +0100 Subject: [PATCH 20/63] Fixed step details bug --- .../src/lib/vm-debugger/assembly-items.tsx | 14 ++--- .../src/lib/vm-debugger/step-detail.tsx | 52 +++++++++---------- .../src/lib/vm-debugger/vm-debugger-head.tsx | 2 +- 3 files changed, 29 insertions(+), 39 deletions(-) diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx index c63e7dd1142..6526c489dcd 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx @@ -2,11 +2,10 @@ import React, { useState, useRef, useEffect } from 'react' import './styles/assembly-items.css' export const AssemblyItems = ({ codeView, index }) => { - console.log('codeView: ', codeView) const [state, setState] = useState({ - selectedItem: null + selectedItem: 0 }) - const refs = useRef(codeView.map(React.createRef)) + const refs = useRef({}) const asmItemsRef = useRef(null) useEffect(() => { @@ -16,10 +15,7 @@ export const AssemblyItems = ({ codeView, index }) => { const indexChanged = (index) => { if (index < 0) return const { selectedItem } = state - console.log('selectedItem: ', selectedItem) - console.log('refs: ', refs) - console.log('refs.current: ', refs.current) - let currentItem = refs.current[selectedItem] ? refs.current[selectedItem].current : null + let currentItem = refs.current[selectedItem] ? refs.current[selectedItem] : null if (currentItem) { if (selectedItem) { @@ -30,8 +26,6 @@ export const AssemblyItems = ({ codeView, index }) => { } } const codeView = asmItemsRef.current - console.log('asmItemsRef: ', asmItemsRef) - console.log('asmItemsRef.current: ', asmItemsRef.current) currentItem = codeView.children[index] currentItem.style.setProperty('border-color', 'var(--primary)') @@ -54,7 +48,7 @@ export const AssemblyItems = ({ codeView, index }) => {
      { codeView.map((item, i) => { - return
      {item}
      + return
      refs.current[i] = ref}>{item}
      }) }
      diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx index 5732fab4fa6..7497dc1aff2 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx @@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react' import DropdownPanel from './dropdown-panel' export interface StepDetailProps { - detail: { + stepDetail: { key: string, value: string, reset: boolean @@ -10,43 +10,39 @@ export interface StepDetailProps { } export const StepDetail = (props: StepDetailProps) => { - const { detail } = props - const [state, setState] = useState({ - detail: { - 'vm trace step': '-', - 'execution step': '-', - 'add memory': '', - 'gas': '', - 'remaining gas': '-', - 'loaded address': '-' - } + const { stepDetail } = props + const [detail, setDetail] = useState({ + 'vm trace step': '-', + 'execution step': '-', + 'add memory': '', + 'gas': '', + 'remaining gas': '-', + 'loaded address': '-' }) useEffect(() => { - updateField(detail.key, detail.value, detail.reset) - }, [detail]) + updateField(stepDetail.key, stepDetail.value, stepDetail.reset) + }, [stepDetail]) const updateField = (key, value, reset) => { + if (!key) return + if (reset) { - setState(() => { + setDetail(() => { return { - detail: { - 'vm trace step': '-', - 'execution step': '-', - 'add memory': '', - 'gas': '', - 'remaining gas': '-', - 'loaded address': '-' - } + 'vm trace step': '-', + 'execution step': '-', + 'add memory': '', + 'gas': '', + 'remaining gas': '-', + 'loaded address': '-' } }) } else { - setState(prevState => { - const { detail } = prevState - - detail[key] = value + setDetail(prevDetail => { return { - detail + ...prevDetail, + [key]: value } }) } @@ -54,7 +50,7 @@ export const StepDetail = (props: StepDetailProps) => { return (
      - +
      ) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx index 7fbf6f60c7e..4cfab38d6d3 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx @@ -112,7 +112,7 @@ export const VmDebuggerHead = ({ vmDebuggerLogic }) => {
      - {/*
      */} +
    ) From cf262246b0e0df736b8b5e2f5b2eb52526e19cc7 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Mon, 21 Sep 2020 16:28:39 +0100 Subject: [PATCH 21/63] Call vmDebuggerLogic d start after event registration --- .../debugger-ui/src/lib/debugger-ui.tsx | 67 +++++++++++----- .../src/lib/vm-debugger/assembly-items.tsx | 10 +-- .../src/lib/vm-debugger/stack-panel.tsx | 1 + .../src/lib/vm-debugger/vm-debugger-head.tsx | 6 +- .../src/lib/vm-debugger/vm-debugger.tsx | 80 ++++++++++--------- 5 files changed, 96 insertions(+), 68 deletions(-) diff --git a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx index 4730ba9c8a9..ea07229c021 100644 --- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx @@ -28,10 +28,9 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash, }, blockNumber: null, txNumber: '', - visibility: { + ready: { vmDebugger: false, - stepManager: false, - txBrowser: false + vmDebuggerHead: false }, debugging: false }) @@ -130,20 +129,20 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash, // yo.update(this.debuggerHeadPanelsView, yo`
    `) // yo.update(this.debuggerPanelsView, yo`
    `) // yo.update(this.stepManagerView, yo`
    `) - setState(prevState => { - const { visibility } = prevState - - return { - ...prevState, - debugger: null, - debugging: false, - visibility: { - ...visibility, - vmDebugger: false, - stepManager: false - } - } - }) + // setState(prevState => { + // const { visibility } = prevState + + // return { + // ...prevState, + // debugger: null, + // debugging: false, + // visibility: { + // ...visibility, + // vmDebugger: false, + // stepManager: false + // } + // } + // }) event.trigger('traceUnloaded', []) } @@ -222,6 +221,34 @@ const deleteHighlights = async () => { await debuggerModule.call('editor', 'discardHighlight') } +const vmDebuggerReady = () => { + setState(prevState => { + return { + ...prevState, + ready: { + ...prevState.ready, + vmDebugger: true + } + } + }) +} + +const vmDebuggerHeadReady = () => { + setState(prevState => { + return { + ...prevState, + ready: { + ...prevState.ready, + vmDebuggerHead: true + } + } + }) +} + +if (state.ready.vmDebugger && state.ready.vmDebuggerHead) { + state.debugger.vmDebuggerLogic.start() +} + // this.debuggerPanelsView = yo`
    ` // this.debuggerHeadPanelsView = yo`
    ` // this.stepManagerView = yo`
    ` @@ -231,10 +258,10 @@ const deleteHighlights = async () => {
    - +
    - {/*
    {state.statusMessage}
    - */} +
    { state.statusMessage }
    +
    ) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx index 6526c489dcd..c2e58b46ed7 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx @@ -18,12 +18,10 @@ export const AssemblyItems = ({ codeView, index }) => { let currentItem = refs.current[selectedItem] ? refs.current[selectedItem] : null if (currentItem) { - if (selectedItem) { - currentItem.removeAttribute('selected') - currentItem.removeAttribute('style') - if (currentItem.firstChild) { - currentItem.firstChild.removeAttribute('style') - } + currentItem.removeAttribute('selected') + currentItem.removeAttribute('style') + if (currentItem.firstChild) { + currentItem.firstChild.removeAttribute('style') } const codeView = asmItemsRef.current diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx index c554e747c70..396fc0eb96c 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx @@ -2,6 +2,7 @@ import React from 'react' import DropdownPanel from './dropdown-panel' export const StackPanel = ({ calldata }) => { + console.log('calldata: ', calldata) return (
    diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx index 4cfab38d6d3..ec510627f81 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx @@ -5,7 +5,7 @@ import StepDetail from './step-detail' import SolidityState from './solidity-state' import SolidityLocals from './solidity-locals' -export const VmDebuggerHead = ({ vmDebuggerLogic }) => { +export const VmDebuggerHead = ({ vmDebuggerLogic, ready }) => { const [panelVisibility, setPanelVisibility] = useState({ functionPanel: true, stepDetail: true, @@ -99,7 +99,7 @@ export const VmDebuggerHead = ({ vmDebuggerLogic }) => { fullStoragesChangesPanel: true }) }) - vmDebuggerLogic.start() + ready() } }, [vmDebuggerLogic]) @@ -118,4 +118,4 @@ export const VmDebuggerHead = ({ vmDebuggerLogic }) => { ) } -export default VmDebuggerHead; +export default VmDebuggerHead diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx index eac667fbdc1..367eadc800d 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx @@ -5,7 +5,7 @@ import CallstackPanel from './callstack-panel' import StackPanel from './stack-panel' import StoragePanel from './storage-panel' -export const VmDebugger = ({ vmDebuggerLogic }) => { +export const VmDebugger = ({ vmDebuggerLogic, ready }) => { const [panelVisibility, setPanelVisibility] = useState({ asmCode: true, stackPanel: true, @@ -24,51 +24,53 @@ export const VmDebugger = ({ vmDebuggerLogic }) => { }) useEffect(() => { - vmDebuggerLogic.event.register('traceManagerCallDataUpdate', (calldata) => { - setCalldataPanel(calldata) - }) - vmDebuggerLogic.event.register('traceManagerMemoryUpdate', (calldata) => { - setMemoryPanel(calldata) - }) - vmDebuggerLogic.event.register('traceManagerCallStackUpdate', (calldata) => { - setCallStackPanel(calldata) - }) - vmDebuggerLogic.event.register('traceManagerStackUpdate', (calldata) => { - setStackPanel(calldata) - }) - vmDebuggerLogic.event.register('traceManagerStorageUpdate', (calldata, header) => { - setStoragePanel({ calldata, header }) - }) - vmDebuggerLogic.event.register('newTrace', () => { - setPanelVisibility({ - asmCode: true, - stackPanel: true, - storagePanel: true, - memoryPanel: true, - calldataPanel: true, - callstackPanel: true, + if (vmDebuggerLogic) { + vmDebuggerLogic.event.register('traceManagerCallDataUpdate', (calldata) => { + setCalldataPanel(calldata) }) - }) - // vmDebuggerLogic.event.register('newCallTree', () => { - // setPanelVisibility({ - // ...panelVisibility, - // solidityPanel: false - // }) - // }) - vmDebuggerLogic.start() - }, []) + vmDebuggerLogic.event.register('traceManagerMemoryUpdate', (calldata) => { + setMemoryPanel(calldata) + }) + vmDebuggerLogic.event.register('traceManagerCallStackUpdate', (calldata) => { + setCallStackPanel(calldata) + }) + vmDebuggerLogic.event.register('traceManagerStackUpdate', (calldata) => { + setStackPanel(calldata) + }) + vmDebuggerLogic.event.register('traceManagerStorageUpdate', (calldata, header) => { + setStoragePanel({ calldata, header }) + }) + vmDebuggerLogic.event.register('newTrace', () => { + setPanelVisibility({ + asmCode: true, + stackPanel: true, + storagePanel: true, + memoryPanel: true, + calldataPanel: true, + callstackPanel: true, + }) + }) + // vmDebuggerLogic.event.register('newCallTree', () => { + // setPanelVisibility({ + // ...panelVisibility, + // solidityPanel: false + // }) + // }) + ready() + } + }, [vmDebuggerLogic]) return (
    - - - - - + + {/* */} + {/* */} + {/* */} + {/* */}
    ) } -export default VmDebugger; +export default VmDebugger From 101f3599609f4bb55b94e5129a31b1ce18106284 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Mon, 21 Sep 2020 17:02:05 +0100 Subject: [PATCH 22/63] Added missing panels --- .../debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx | 8 ++++---- .../debugger-ui/src/lib/vm-debugger/stack-panel.tsx | 1 - .../debugger-ui/src/lib/vm-debugger/vm-debugger.tsx | 8 ++++---- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx index 4c553acc5ca..128fe4c88c1 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx @@ -38,8 +38,8 @@ export const DropdownPanel = (props: DropdownPanelProps) => { }) useEffect(() => { - update(calldata, header) - }, [calldata, header]) + update(calldata) + }, [calldata]) useEffect(() => { message(dropdownMessage) @@ -99,7 +99,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => { }) } - const update = function (calldata, header) { + const update = function (calldata) { setState(prevState => { return { ...prevState, @@ -179,7 +179,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => { } const title =
    -
    {dropdownName}
    +
    {dropdownName}
    { header }
    diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx index 396fc0eb96c..c554e747c70 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx @@ -2,7 +2,6 @@ import React from 'react' import DropdownPanel from './dropdown-panel' export const StackPanel = ({ calldata }) => { - console.log('calldata: ', calldata) return (
    diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx index 367eadc800d..fc2e1db86a2 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx @@ -64,10 +64,10 @@ export const VmDebugger = ({ vmDebuggerLogic, ready }) => {
    - {/* */} - {/* */} - {/* */} - {/* */} + + + +
    ) From e4d4d5187aede122ad3e3c3ae404ee2f237d0fb4 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 22 Sep 2020 16:15:08 +0100 Subject: [PATCH 23/63] Fixed copy to clipboard --- .../copy-to-clipboard/copy-to-clipboard.tsx | 21 +++------ .../debugger-ui/src/lib/debugger-ui.tsx | 5 +-- .../src/lib/vm-debugger/dropdown-panel.tsx | 43 ++----------------- .../lib/vm-debugger/full-storages-changes.tsx | 2 +- 4 files changed, 12 insertions(+), 59 deletions(-) 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 0134c37409f..d32a7abec11 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 @@ -1,28 +1,19 @@ import React from 'react' -import * as copy from 'copy-text-to-clipboard' +import copy from 'copy-text-to-clipboard' import './copy-to-clipboard.css' -export const CopyToClipboard = ({ getContent, tip='Copy value to clipboard', icon='fa-copy', ...otherProps }) => { +export const CopyToClipboard = ({ content, tip='Copy value to clipboard', icon='fa-copy', ...otherProps }) => { const handleClick = () => { - let copiableContent:string - - 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 + if (content) { // module `copy` keeps last copied thing in the memory, so don't show tooltip if nothing is copied, because nothing was added to memory try { - if (typeof copiableContent !== 'string') { - copiableContent = JSON.stringify(copiableContent, null, '\t') + if (typeof content !== 'string') { + content = JSON.stringify(content, null, '\t') } } catch (e) { console.error(e) } - copy(copiableContent) + copy(content) // addTooltip('Copied value to clipboard.') } else { // addTooltip('Cannot copy empty content!') diff --git a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx index ea07229c021..1e0e84d89cc 100644 --- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx @@ -9,13 +9,10 @@ import toaster from '../../../../../apps/remix-ide/src/app/ui/tooltip' /* eslint-disable-next-line */ import SourceHighlighter from '../../../../../apps/remix-ide/src/app/editor/sourceHighlighter' /* eslint-disable-next-line */ -import EventManager from '../../../../../apps/remix-ide/src/lib/events' -/* eslint-disable-next-line */ import globalRegistry from '../../../../../apps/remix-ide/src/global/registry' import './debugger-ui.css' export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash, getTraceHash, removeHighlights }) => { - const event = new EventManager() const sourceHighlighter = new SourceHighlighter() const init = remixDebug.init const [state, setState] = useState({ @@ -143,7 +140,7 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash, // } // } // }) - event.trigger('traceUnloaded', []) + // event.trigger('traceUnloaded', []) } const startDebugging = async (blockNumber, txNumber, tx) => { diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx index 128fe4c88c1..0c24948a57d 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx @@ -6,13 +6,10 @@ import { CopyToClipboard } from '@remix-ui/clipboard' import './styles/dropdown-panel.css' -/* eslint-disable-next-line */ -import EventManager from '../../../../../../apps/remix-ide/src/lib/events' export const DropdownPanel = (props: DropdownPanelProps) => { const { dropdownName, dropdownMessage, opts, calldata, header, loading, extractFunc, formatSelfFunc } = props const data = useExtractData(calldata, extractFunc) - const event = new EventManager() const dropdownRawEl = useRef(null) const [state, setState] = useState({ header: '', @@ -26,14 +23,11 @@ export const DropdownPanel = (props: DropdownPanelProps) => { innerText: '', display: 'none' }, - dropdownRawContent: { - innerText: '', - display: 'none' - }, title: { innerText: '', display: 'none' }, + copiableContent: '', updating: false }) @@ -51,8 +45,6 @@ export const DropdownPanel = (props: DropdownPanelProps) => { const handleToggle = () => { setState(prevState => { - if (prevState.toggleDropdown) event.trigger('hide', []) - else event.trigger('show', []) return { ...prevState, toggleDropdown: !prevState.toggleDropdown @@ -86,14 +78,11 @@ export const DropdownPanel = (props: DropdownPanelProps) => { innerText: '', display: 'none' }, - dropdownRawContent: { - ...prevState.dropdownRawContent, - display: 'none' - }, dropdownContent: { ...prevState.dropdownContent, display: 'none' }, + copiableContent: '', updating: true } }) @@ -107,35 +96,12 @@ export const DropdownPanel = (props: DropdownPanelProps) => { ...prevState.dropdownContent, display: 'block' }, - dropdownRawContent: { - innerText: JSON.stringify(calldata, null, '\t'), - display: 'block' - }, + copiableContent: JSON.stringify(calldata, null, '\t'), updating: false } }) } - const hide = () => { - setState(prevState => { - return { - ...prevState, - toggleDropdown: false - } - }) - event.trigger('hide', []) - } - - const show = () => { - setState(prevState => { - return { - ...prevState, - toggleDropdown: true - } - }) - event.trigger('show', []) - } - const formatSelfDefault = (key: string, data: ExtractData) => { return (
    @@ -180,7 +146,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => { const title =
    {dropdownName}
    { header } - +
    return ( @@ -191,7 +157,6 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
    { content }
    -
    { state.message.innerText }
    diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx index 4e0f5f3695f..9f7716d7a28 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx @@ -1,5 +1,5 @@ import React from 'react' -import Dropdown, { DropdownPanel } from './dropdown-panel' +import { DropdownPanel } from './dropdown-panel' export const FullStoragesChanges = ({ storageData }) => { return ( From fd22c5795f76d3aa39862c44d3853ec221531a41 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Wed, 23 Sep 2020 10:40:34 +0100 Subject: [PATCH 24/63] Unload debugger --- .../debugger-ui/src/lib/debugger-ui.tsx | 52 +++++++++---------- .../src/lib/tx-browser/tx-browser.tsx | 8 +-- 2 files changed, 29 insertions(+), 31 deletions(-) diff --git a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx index 1e0e84d89cc..7113c743650 100644 --- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx @@ -45,7 +45,7 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash, }) editor.event.register('contentChanged', () => { - if (state.debugger) state.debugger.unload() + unLoad() }) } @@ -94,12 +94,11 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash, } const requestDebug = (blockNumber, txNumber, tx) => { - if (state.debugger) state.debugger.unload() startDebugging(blockNumber, txNumber, tx) } const unloadRequested = (blockNumber, txIndex, tx) => { - if (state.debugger) state.debugger.unload() + unLoad() } const isDebuggerActive = () => { @@ -123,29 +122,28 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash, } const unLoad = () => { - // yo.update(this.debuggerHeadPanelsView, yo`
    `) - // yo.update(this.debuggerPanelsView, yo`
    `) - // yo.update(this.stepManagerView, yo`
    `) - // setState(prevState => { - // const { visibility } = prevState - - // return { - // ...prevState, - // debugger: null, - // debugging: false, - // visibility: { - // ...visibility, - // vmDebugger: false, - // stepManager: false - // } - // } - // }) - // event.trigger('traceUnloaded', []) + if (state.debugger) state.debugger.unload() + setState(prevState => { + return { + ...prevState, + isActive: false, + statusMessage: '', + debugger: null, + currentReceipt: { + contractAddress: null, + to: null + }, + blockNumber: null, + ready: { + vmDebugger: false, + vmDebuggerHead: false + }, + debugging: false + } + }) } const startDebugging = async (blockNumber, txNumber, tx) => { - if (state.debugger) unLoad() - const web3 = await getDebugWeb3() const currentReceipt = await web3.eth.getTransactionReceipt(txNumber) const debuggerInstance = new Debugger({ @@ -254,11 +252,11 @@ if (state.ready.vmDebugger && state.ready.vmDebuggerHead) {
    - - + { state.debugging && } + { state.debugging && }
    -
    { state.statusMessage }
    - + { state.debugging &&
    { state.statusMessage }
    } + { state.debugging && }
    ) } diff --git a/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx b/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx index 39841b50212..4e7f7186ee6 100644 --- a/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx @@ -27,7 +27,7 @@ export const TxBrowser = ({ requestDebug, unloadRequested, transactionNumber, de unloadRequested() } - const txInputChanged = (e) => { + const txInputChanged = (value) => { // todo check validation of txnumber in the input element, use // required // oninvalid="setCustomValidity('Please provide a valid transaction number, must start with 0x and have length of 22')" @@ -37,7 +37,7 @@ export const TxBrowser = ({ requestDebug, unloadRequested, transactionNumber, de setState(prevState => { return { ...prevState, - txNumber: e.target.value + txNumber: value } }) } @@ -51,7 +51,7 @@ export const TxBrowser = ({ requestDebug, unloadRequested, transactionNumber, de className="form-control m-0 txinput" id='txinput' type='text' - onChange={txInputChanged} + onChange={({ target: { value } }) => txInputChanged(value)} placeholder={'Transaction hash, should start with 0x'} data-id="debuggerTransactionInput" disabled={debugging} @@ -64,7 +64,7 @@ export const TxBrowser = ({ requestDebug, unloadRequested, transactionNumber, de title={debugging ? 'Stop debugging' : 'Start debugging'} onClick={handleSubmit} data-id="debuggerTransactionStartButton" - disabled={!state.txNumber ? true : !debugging ? true : false } + disabled={!state.txNumber ? true : false } > { debugging ? 'Stop' : 'Start' } debugging From 06e7e3f57cc3cbb9619c9713b8d02b43898f4bbf Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Thu, 24 Sep 2020 11:51:58 +0100 Subject: [PATCH 25/63] Refactor dropdown panel component --- .../lib/button-navigator/button-navigator.tsx | 2 +- .../debugger-ui/src/lib/debugger-ui.tsx | 15 +------- .../src/lib/vm-debugger/calldata-panel.tsx | 2 +- .../src/lib/vm-debugger/callstack-panel.tsx | 2 +- .../src/lib/vm-debugger/dropdown-panel.tsx | 38 +++++++------------ .../lib/vm-debugger/full-storages-changes.tsx | 4 +- .../src/lib/vm-debugger/function-panel.tsx | 2 +- .../src/lib/vm-debugger/memory-panel.tsx | 8 +--- .../src/lib/vm-debugger/solidity-locals.tsx | 2 +- .../src/lib/vm-debugger/solidity-state.tsx | 2 +- .../src/lib/vm-debugger/stack-panel.tsx | 2 +- .../src/lib/vm-debugger/step-detail.tsx | 2 +- .../src/lib/vm-debugger/storage-panel.tsx | 2 +- .../src/lib/vm-debugger/vm-debugger-head.tsx | 18 --------- .../src/lib/vm-debugger/vm-debugger.tsx | 37 +++++++----------- libs/remix-ui/debugger-ui/src/types/index.ts | 6 --- 16 files changed, 41 insertions(+), 103 deletions(-) diff --git a/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx b/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx index b2bfcc9dbbb..c0b32ac9619 100644 --- a/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx @@ -44,7 +44,7 @@ export const ButtonNavigation = ({ stepManager, revertedReason, stepState, jumpO jumpPreviousBreakpointDisabled: stepState === 'initial', intoForwardDisabled: stepState === 'end', overForwardDisabled: stepState === 'end', - jumpNextBreakpointDisabled: jumpOutDisabled ? jumpOutDisabled : stepState === 'end', + jumpNextBreakpointDisabled: stepState === 'end', jumpOutDisabled: jumpOutDisabled ? jumpOutDisabled : true } }) diff --git a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx index 7113c743650..f3656eac83e 100644 --- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx @@ -5,15 +5,10 @@ import VmDebugger from './vm-debugger/vm-debugger' import VmDebuggerHead from './vm-debugger/vm-debugger-head' import remixDebug, { TransactionDebugger as Debugger } from '@remix-project/remix-debug' /* eslint-disable-next-line */ -import toaster from '../../../../../apps/remix-ide/src/app/ui/tooltip' -/* eslint-disable-next-line */ -import SourceHighlighter from '../../../../../apps/remix-ide/src/app/editor/sourceHighlighter' -/* eslint-disable-next-line */ import globalRegistry from '../../../../../apps/remix-ide/src/global/registry' import './debugger-ui.css' export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash, getTraceHash, removeHighlights }) => { - const sourceHighlighter = new SourceHighlighter() const init = remixDebug.init const [state, setState] = useState({ isActive: false, @@ -144,6 +139,7 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash, } const startDebugging = async (blockNumber, txNumber, tx) => { + if (state.debugger) unLoad() const web3 = await getDebugWeb3() const currentReceipt = await web3.eth.getTransactionReceipt(txNumber) const debuggerInstance = new Debugger({ @@ -159,8 +155,6 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash, } }) debuggerInstance.debug(blockNumber, txNumber, tx, () => { - // this.stepManager = new StepManagerUI(this.debugger.step_manager) - // this.vmDebugger = new VmDebugger(this.debugger.vmDebuggerLogic) listenToEvents(debuggerInstance, currentReceipt) setState(prevState => { return { @@ -172,9 +166,8 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash, debugger: debuggerInstance } }) - // this.renderDebugger() }).catch((error) => { - toaster(error, null, null) + // toaster(error, null, null) unLoad() }) } @@ -244,10 +237,6 @@ if (state.ready.vmDebugger && state.ready.vmDebuggerHead) { state.debugger.vmDebuggerLogic.start() } -// this.debuggerPanelsView = yo`
    ` -// this.debuggerHeadPanelsView = yo`
    ` -// this.stepManagerView = yo`
    ` - return (
    diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/calldata-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/calldata-panel.tsx index d65b4d8243e..9a9e728738c 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/calldata-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/calldata-panel.tsx @@ -4,7 +4,7 @@ import DropdownPanel from './dropdown-panel' export const CalldataPanel = ({ calldata }) => { return (
    - +
    ) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/callstack-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/callstack-panel.tsx index 7dc9871f579..48f5eec379d 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/callstack-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/callstack-panel.tsx @@ -4,7 +4,7 @@ import DropdownPanel from './dropdown-panel' export const CallstackPanel = ({ calldata }) => { return (
    - +
    ) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx index 0c24948a57d..0f630b30c41 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx @@ -8,12 +8,10 @@ import { CopyToClipboard } from '@remix-ui/clipboard' import './styles/dropdown-panel.css' export const DropdownPanel = (props: DropdownPanelProps) => { - const { dropdownName, dropdownMessage, opts, calldata, header, loading, extractFunc, formatSelfFunc } = props + const { dropdownName, dropdownMessage, calldata, header, loading, extractFunc, formatSelfFunc } = props const data = useExtractData(calldata, extractFunc) - const dropdownRawEl = useRef(null) const [state, setState] = useState({ header: '', - json: opts.json, toggleDropdown: true, message: { innerText: '', @@ -52,10 +50,6 @@ export const DropdownPanel = (props: DropdownPanelProps) => { }) } - const copyClipboard = () => { - return dropdownRawEl.current.innerText ? dropdownRawEl.current.innerText : dropdownRawEl.current.textContent - } - const message = (message) => { if (message === state.message.innerText) return setState(prevState => { @@ -133,29 +127,23 @@ export const DropdownPanel = (props: DropdownPanelProps) => { } } - let content: JSX.Element | JSX.Element[] =
    Empty
    - if (state.json) { - content = (data).map((item, index) => { - return ( - - { renderData(item.data, item.key) } - - ) - }) - } - const title =
    -
    -
    {dropdownName}
    { header } - -
    - return (
    - { title } +
    +
    +
    {dropdownName}
    { header } + +
    - { content } + { data.map((item, index) => { + return ( + + { renderData(item.data, item.key) } + + ) + }) }
    { state.message.innerText }
    diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx index 9f7716d7a28..2cb8a2862f9 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx @@ -1,10 +1,10 @@ import React from 'react' import { DropdownPanel } from './dropdown-panel' -export const FullStoragesChanges = ({ storageData }) => { +export const FullStoragesChanges = ({ calldata }) => { return (
    - +
    ) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx index dc46e101bca..2b4450937b6 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx @@ -4,7 +4,7 @@ import DropdownPanel from './dropdown-panel' export const FunctionPanel = ({ calldata }) => { return (
    - +
    ) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/memory-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/memory-panel.tsx index 2645b8793d8..087d87a65b9 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/memory-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/memory-panel.tsx @@ -3,13 +3,7 @@ import DropdownPanel from './dropdown-panel' export const MemoryPanel = ({ calldata }) => { return ( - + ) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx index 2b1d75e3a21..139e3441659 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx @@ -36,7 +36,7 @@ export const SolidityLocals = ({ calldata, message }) => { return (
    - +
    ) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-state.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-state.tsx index 32def3a6db3..bb75eaebf61 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-state.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-state.tsx @@ -36,7 +36,7 @@ export const SolidityState = ({ calldata, message }) => { return (
    { - + }
    ) diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx index c554e747c70..e003e72d74a 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx @@ -4,7 +4,7 @@ import DropdownPanel from './dropdown-panel' export const StackPanel = ({ calldata }) => { return (
    - +
    ) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx index 7497dc1aff2..391bc065107 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx @@ -50,7 +50,7 @@ export const StepDetail = (props: StepDetailProps) => { return (
    - +
    ) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/storage-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/storage-panel.tsx index 47a46e31c98..ef2afb6710a 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/storage-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/storage-panel.tsx @@ -4,7 +4,7 @@ import DropdownPanel from './dropdown-panel' export const StoragePanel = ({ storage, header }) => { return (
    - +
    ) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx index ec510627f81..84a24aeb5df 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx @@ -6,14 +6,6 @@ import SolidityState from './solidity-state' import SolidityLocals from './solidity-locals' export const VmDebuggerHead = ({ vmDebuggerLogic, ready }) => { - const [panelVisibility, setPanelVisibility] = useState({ - functionPanel: true, - stepDetail: true, - solidityState: true, - solidityLocals: true, - returnValuesPanel: true, - fullStoragesChangesPanel: true - }) const [asm, setAsm] = useState({ code: null, address: null, @@ -89,16 +81,6 @@ export const VmDebuggerHead = ({ vmDebuggerLogic, ready }) => { vmDebuggerLogic.event.register('solidityLocalsMessage', (message) => { setSolidityLocals({ ...solidityLocals, message }) }) - vmDebuggerLogic.event.register('newTrace', () => { - setPanelVisibility({ - functionPanel: true, - stepDetail: true, - solidityState: true, - solidityLocals: true, - returnValuesPanel: true, - fullStoragesChangesPanel: true - }) - }) ready() } }, [vmDebuggerLogic]) diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx index fc2e1db86a2..ccc7059166e 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx @@ -4,16 +4,10 @@ import MemoryPanel from './memory-panel' import CallstackPanel from './callstack-panel' import StackPanel from './stack-panel' import StoragePanel from './storage-panel' +import ReturnValuesPanel from './dropdown-panel' +import FullStoragesChangesPanel from './full-storages-changes' export const VmDebugger = ({ vmDebuggerLogic, ready }) => { - const [panelVisibility, setPanelVisibility] = useState({ - asmCode: true, - stackPanel: true, - storagePanel: true, - memoryPanel: true, - calldataPanel: true, - callstackPanel: true, - }) const [calldataPanel, setCalldataPanel] = useState(null) const [memoryPanel, setMemoryPanel] = useState(null) const [callStackPanel, setCallStackPanel] = useState(null) @@ -22,6 +16,8 @@ export const VmDebugger = ({ vmDebuggerLogic, ready }) => { calldata: null, header: null }) + const [returnValuesPanel, setReturnValuesPanel] = useState(null) + const [fullStoragesChangesPanel, setFullStoragesChangesPanel] = useState(null) useEffect(() => { if (vmDebuggerLogic) { @@ -40,22 +36,15 @@ export const VmDebugger = ({ vmDebuggerLogic, ready }) => { vmDebuggerLogic.event.register('traceManagerStorageUpdate', (calldata, header) => { setStoragePanel({ calldata, header }) }) - vmDebuggerLogic.event.register('newTrace', () => { - setPanelVisibility({ - asmCode: true, - stackPanel: true, - storagePanel: true, - memoryPanel: true, - calldataPanel: true, - callstackPanel: true, - }) + vmDebuggerLogic.event.register('traceReturnValueUpdate', (calldata) => { + setReturnValuesPanel(calldata) + }) + vmDebuggerLogic.event.register('traceAddressesUpdate', (calldata) => { + setFullStoragesChangesPanel({}) + }) + vmDebuggerLogic.event.register('traceStorageUpdate', (calldata) => { + setFullStoragesChangesPanel(calldata) }) - // vmDebuggerLogic.event.register('newCallTree', () => { - // setPanelVisibility({ - // ...panelVisibility, - // solidityPanel: false - // }) - // }) ready() } }, [vmDebuggerLogic]) @@ -68,6 +57,8 @@ export const VmDebugger = ({ vmDebuggerLogic, ready }) => { + +
    ) diff --git a/libs/remix-ui/debugger-ui/src/types/index.ts b/libs/remix-ui/debugger-ui/src/types/index.ts index 1f76ab8ff65..b01bdf51d7a 100644 --- a/libs/remix-ui/debugger-ui/src/types/index.ts +++ b/libs/remix-ui/debugger-ui/src/types/index.ts @@ -15,12 +15,6 @@ export type ExtractFunc = (json: any, parent?: any) => ExtractData export interface DropdownPanelProps { dropdownName: string, dropdownMessage?: string, - opts: { - json: boolean, - css?: { - [key: string]: string - } - }, calldata?: { [key: string]: string }, From 9cdbea299779c53316372662e3433b07c78708f8 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Thu, 24 Sep 2020 17:10:58 +0100 Subject: [PATCH 26/63] Collapse empty panels and display no data available message --- .../src/lib/vm-debugger/calldata-panel.tsx | 2 +- .../src/lib/vm-debugger/callstack-panel.tsx | 2 +- .../src/lib/vm-debugger/dropdown-panel.tsx | 18 ++++++++++++++---- .../lib/vm-debugger/full-storages-changes.tsx | 2 +- .../src/lib/vm-debugger/function-panel.tsx | 2 +- .../src/lib/vm-debugger/memory-panel.tsx | 2 +- .../src/lib/vm-debugger/solidity-locals.tsx | 2 +- .../src/lib/vm-debugger/solidity-state.tsx | 2 +- .../src/lib/vm-debugger/stack-panel.tsx | 2 +- .../src/lib/vm-debugger/step-detail.tsx | 2 +- .../src/lib/vm-debugger/storage-panel.tsx | 4 ++-- .../src/lib/vm-debugger/vm-debugger-head.tsx | 6 +++--- .../src/lib/vm-debugger/vm-debugger.tsx | 12 ++++++------ 13 files changed, 34 insertions(+), 24 deletions(-) diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/calldata-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/calldata-panel.tsx index 9a9e728738c..78f8d89b788 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/calldata-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/calldata-panel.tsx @@ -4,7 +4,7 @@ import DropdownPanel from './dropdown-panel' export const CalldataPanel = ({ calldata }) => { return (
    - +
    ) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/callstack-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/callstack-panel.tsx index 48f5eec379d..2ac5adb2ed6 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/callstack-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/callstack-panel.tsx @@ -4,7 +4,7 @@ import DropdownPanel from './dropdown-panel' export const CallstackPanel = ({ calldata }) => { return (
    - +
    ) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx index 0f630b30c41..2cb9ffdbb36 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx @@ -12,10 +12,10 @@ export const DropdownPanel = (props: DropdownPanelProps) => { const data = useExtractData(calldata, extractFunc) const [state, setState] = useState({ header: '', - toggleDropdown: true, + toggleDropdown: false, message: { - innerText: '', - display: 'none' + innerText: 'No data available.', + display: 'block' }, dropdownContent: { innerText: '', @@ -83,6 +83,11 @@ export const DropdownPanel = (props: DropdownPanelProps) => { } const update = function (calldata) { + let isEmpty = !calldata ? true : false + + if(calldata && Array.isArray(calldata) && calldata.length === 0) isEmpty = true + else if(calldata && Object.keys(calldata).length === 0 && calldata.constructor === Object) isEmpty = true + setState(prevState => { return { ...prevState, @@ -91,7 +96,12 @@ export const DropdownPanel = (props: DropdownPanelProps) => { display: 'block' }, copiableContent: JSON.stringify(calldata, null, '\t'), - updating: false + message: { + innerText: isEmpty ? 'No data available' : '', + display: isEmpty ? 'block' : 'none' + }, + updating: false, + toggleDropdown: !isEmpty } }) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx index 2cb8a2862f9..7ba3374187c 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx @@ -4,7 +4,7 @@ import { DropdownPanel } from './dropdown-panel' export const FullStoragesChanges = ({ calldata }) => { return (
    - +
    ) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx index 2b4450937b6..6f2e3757db9 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx @@ -4,7 +4,7 @@ import DropdownPanel from './dropdown-panel' export const FunctionPanel = ({ calldata }) => { return (
    - +
    ) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/memory-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/memory-panel.tsx index 087d87a65b9..2685586356b 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/memory-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/memory-panel.tsx @@ -3,7 +3,7 @@ import DropdownPanel from './dropdown-panel' export const MemoryPanel = ({ calldata }) => { return ( - + ) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx index 139e3441659..175a8284b89 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx @@ -36,7 +36,7 @@ export const SolidityLocals = ({ calldata, message }) => { return (
    - +
    ) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-state.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-state.tsx index bb75eaebf61..921e4db28c0 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-state.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-state.tsx @@ -36,7 +36,7 @@ export const SolidityState = ({ calldata, message }) => { return (
    { - + }
    ) diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx index e003e72d74a..65c9a751406 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx @@ -4,7 +4,7 @@ import DropdownPanel from './dropdown-panel' export const StackPanel = ({ calldata }) => { return (
    - +
    ) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx index 391bc065107..bd1c86de6ff 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx @@ -50,7 +50,7 @@ export const StepDetail = (props: StepDetailProps) => { return (
    - +
    ) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/storage-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/storage-panel.tsx index ef2afb6710a..0520d5d0994 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/storage-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/storage-panel.tsx @@ -1,10 +1,10 @@ import React from 'react' import DropdownPanel from './dropdown-panel' -export const StoragePanel = ({ storage, header }) => { +export const StoragePanel = ({ calldata, header }) => { return (
    - +
    ) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx index 84a24aeb5df..cef4d506b43 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx @@ -89,9 +89,9 @@ export const VmDebuggerHead = ({ vmDebuggerLogic, ready }) => {
    - - - + + +
    diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx index ccc7059166e..96016fd5a59 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx @@ -52,13 +52,13 @@ export const VmDebugger = ({ vmDebuggerLogic, ready }) => { return (
    - - - - - + + + + + - +
    ) From c4e5597252c39103b90a9681fc46cc1f5c5467e2 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Fri, 25 Sep 2020 15:32:24 +0100 Subject: [PATCH 27/63] Added tooltip for copy to clipboard --- .../copy-to-clipboard/copy-to-clipboard.tsx | 35 ++-- package-lock.json | 187 ++++++++++++++++-- package.json | 7 +- 3 files changed, 199 insertions(+), 30 deletions(-) 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 d32a7abec11..0341e84be0d 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 @@ -1,11 +1,13 @@ -import React from 'react' +import React, { useState } from 'react' import copy from 'copy-text-to-clipboard' +import { OverlayTrigger, Tooltip } from 'react-bootstrap' import './copy-to-clipboard.css' -export const CopyToClipboard = ({ content, tip='Copy value to clipboard', icon='fa-copy', ...otherProps }) => { +export const CopyToClipboard = ({ content, tip='Copy', icon='fa-copy', ...otherProps }) => { + const [message, setMessage] = useState(tip) const handleClick = () => { - if (content) { // module `copy` keeps last copied thing in the memory, so don't show tooltip if nothing is copied, because nothing was added to memory + if (content && content !== '') { // module `copy` keeps last copied thing in the memory, so don't show tooltip if nothing is copied, because nothing was added to memory try { if (typeof content !== 'string') { content = JSON.stringify(content, null, '\t') @@ -14,21 +16,28 @@ export const CopyToClipboard = ({ content, tip='Copy value to clipboard', icon=' console.error(e) } copy(content) - // addTooltip('Copied value to clipboard.') + setMessage('Copied') } else { - // addTooltip('Cannot copy empty content!') + setMessage('Cannot copy empty content!') } } + const reset = () => { + setTimeout(() => setMessage('Copy'), 500) + } + return ( - + + + { message } + + }> + + + ) } diff --git a/package-lock.json b/package-lock.json index d34b490a43d..48ac7a872f3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2232,7 +2232,6 @@ "version": "7.10.5", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.5.tgz", "integrity": "sha512-otddXKhdNn7d0ptoFRHtMLa8LqDxLYwTjB4nYgM1yy5N6gU/MUf8zqyyLltCH3yAVitBzmwK4us+DD0l/MauAg==", - "dev": true, "requires": { "regenerator-runtime": "^0.13.4" } @@ -6875,6 +6874,11 @@ "@types/node": ">= 8" } }, + "@popperjs/core": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.5.2.tgz", + "integrity": "sha512-tVkIU9JQw5fYPxLQgok/a7I6J1eEZ79svwQGpe2mb3jlVsPADOleefOnQBiS/takK7jQuNeswCUicMH1VWVziA==" + }, "@remixproject/engine": { "version": "0.2.4", "resolved": "https://registry.npmjs.org/@remixproject/engine/-/engine-0.2.4.tgz", @@ -6975,6 +6979,20 @@ } } }, + "@restart/context": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz", + "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==" + }, + "@restart/hooks": { + "version": "0.3.25", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.25.tgz", + "integrity": "sha512-m2v3N5pxTsIiSH74/sb1yW8D9RxkJidGW+5Mfwn/lHb2QzhZNlaU1su7abSyT9EGf0xS/0waLjrf7/XxQHUk7w==", + "requires": { + "lodash": "^4.17.15", + "lodash-es": "^4.17.15" + } + }, "@rollup/plugin-babel": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.0.2.tgz", @@ -7291,6 +7309,11 @@ "integrity": "sha512-t7uW6eFafjO+qJ3BIV2gGUyZs27egcNRkUdalkud+Qa3+kg//f129iuOFivHDXQ+vnU3fDXuwgv0cqMCbcE8sw==", "dev": true }, + "@types/classnames": { + "version": "2.2.10", + "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.10.tgz", + "integrity": "sha512-1UzDldn9GfYYEsWWnn/P4wkTlkZDH7lDb0wBMGbtIQc9zXEQq7FlKBdZUn6OBqD8sKZZ2RQO2mAjGpXiDGoRmQ==" + }, "@types/color-name": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz", @@ -7341,6 +7364,11 @@ "integrity": "sha512-GRTZLeLJ8ia00ZH8mxMO8t0aC9M1N9bN461Z2eaRurJo6Fpa+utgCwLzI4jQHcrdzuzp5WPN9jRwpsCQ1VhJ5w==", "dev": true }, + "@types/invariant": { + "version": "2.2.34", + "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.34.tgz", + "integrity": "sha512-lYUtmJ9BqUN688fGY1U1HZoWT1/Jrmgigx2loq4ZcJpICECm/Om3V314BxdzypO0u5PORKGMM6x0OXaljV1YFg==" + }, "@types/istanbul-lib-coverage": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz", @@ -7449,8 +7477,7 @@ "@types/prop-types": { "version": "15.7.3", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", - "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==", - "dev": true + "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==" }, "@types/q": { "version": "1.5.4", @@ -7462,7 +7489,6 @@ "version": "16.9.17", "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.17.tgz", "integrity": "sha512-UP27In4fp4sWF5JgyV6pwVPAQM83Fj76JOcg02X5BZcpSu5Wx+fP9RMqc2v0ssBoQIFvD5JdKY41gjJJKmw6Bg==", - "dev": true, "requires": { "@types/prop-types": "*", "csstype": "^2.2.0" @@ -7498,6 +7524,14 @@ "@types/react-router": "*" } }, + "@types/react-transition-group": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz", + "integrity": "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==", + "requires": { + "@types/react": "*" + } + }, "@types/resolve": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz", @@ -7561,6 +7595,11 @@ } } }, + "@types/warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz", + "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI=" + }, "@types/webpack-sources": { "version": "0.1.8", "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-0.1.8.tgz", @@ -12134,6 +12173,11 @@ } } }, + "classnames": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", + "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + }, "clean-css": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz", @@ -13787,8 +13831,7 @@ "csstype": { "version": "2.6.11", "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.11.tgz", - "integrity": "sha512-l8YyEC9NBkSm783PFTvh0FmJy7s5pFKrDp49ZL7zBGX3fWkO+N4EEyan1qqp8cwPLDcD0OSdyY6hAMoxp34JFw==", - "dev": true + "integrity": "sha512-l8YyEC9NBkSm783PFTvh0FmJy7s5pFKrDp49ZL7zBGX3fWkO+N4EEyan1qqp8cwPLDcD0OSdyY6hAMoxp34JFw==" }, "currently-unhandled": { "version": "0.4.1", @@ -14713,6 +14756,22 @@ } } }, + "dom-helpers": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz", + "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + }, + "dependencies": { + "csstype": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.3.tgz", + "integrity": "sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag==" + } + } + }, "dom-serialize": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/dom-serialize/-/dom-serialize-2.2.1.tgz", @@ -20743,7 +20802,6 @@ "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", - "dev": true, "requires": { "loose-envify": "^1.0.0" } @@ -22383,7 +22441,6 @@ "version": "25.5.1", "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-25.5.1.tgz", "integrity": "sha512-9dA9+GmMjIzgPnYtkhBg73gOo/RHqPmLruP3BaGL4KEX3Dwz6pI8auSN8G8+iuEG90+GSswyKvslN+JYSaacaQ==", - "dev": true, "requires": { "@jest/transform": "^25.5.1", "@jest/types": "^25.5.0", @@ -22391,8 +22448,7 @@ "babel-plugin-istanbul": "^6.0.0", "babel-preset-jest": "^25.5.0", "chalk": "^3.0.0", - "graceful-fs": "^4.2.4", - "slash": "^3.0.0" + "graceful-fs": "^4.2.4" } }, "chalk": { @@ -22511,8 +22567,7 @@ "slash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", - "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==", - "dev": true + "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==" }, "supports-color": { "version": "7.1.0", @@ -24664,6 +24719,11 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz", "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==" }, + "lodash-es": { + "version": "4.17.15", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz", + "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==" + }, "lodash._arraycopy": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/lodash._arraycopy/-/lodash._arraycopy-3.0.0.tgz", @@ -35070,6 +35130,15 @@ "react-is": "^16.8.1" } }, + "prop-types-extra": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz", + "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==", + "requires": { + "react-is": "^16.3.2", + "warning": "^4.0.0" + } + }, "proto-list": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz", @@ -35388,6 +35457,47 @@ "prop-types": "^15.6.2" } }, + "react-bootstrap": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.3.0.tgz", + "integrity": "sha512-GYj0c6FO9mx7DaO8Xyz2zs0IcQ6CGCtM3O6/feIoCaG4N8B0+l4eqL7stlMcLpqO4d8NG2PoMO/AbUOD+MO7mg==", + "requires": { + "@babel/runtime": "^7.4.2", + "@restart/context": "^2.1.4", + "@restart/hooks": "^0.3.21", + "@types/classnames": "^2.2.10", + "@types/invariant": "^2.2.33", + "@types/prop-types": "^15.7.3", + "@types/react": "^16.9.35", + "@types/react-transition-group": "^4.4.0", + "@types/warning": "^3.0.0", + "classnames": "^2.2.6", + "dom-helpers": "^5.1.2", + "invariant": "^2.2.4", + "prop-types": "^15.7.2", + "prop-types-extra": "^1.1.0", + "react-overlays": "^4.1.0", + "react-transition-group": "^4.4.1", + "uncontrollable": "^7.0.0", + "warning": "^4.0.3" + }, + "dependencies": { + "@types/react": { + "version": "16.9.49", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.49.tgz", + "integrity": "sha512-DtLFjSj0OYAdVLBbyjhuV9CdGVHCkHn2R+xr3XkBvK2rS1Y1tkc14XSGjYgm5Fjjr90AxH9tiSzc1pCFMGO06g==", + "requires": { + "@types/prop-types": "*", + "csstype": "^3.0.2" + } + }, + "csstype": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.3.tgz", + "integrity": "sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag==" + } + } + }, "react-dom": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz", @@ -35404,6 +35514,37 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, + "react-overlays": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-4.1.0.tgz", + "integrity": "sha512-vdRpnKe0ckWOOD9uWdqykLUPHLPndIiUV7XfEKsi5008xiyHCfL8bxsx4LbMrfnxW1LzRthLyfy50XYRFNQqqw==", + "requires": { + "@babel/runtime": "^7.4.5", + "@popperjs/core": "^2.0.0", + "@restart/hooks": "^0.3.12", + "@types/warning": "^3.0.0", + "dom-helpers": "^5.1.0", + "prop-types": "^15.7.2", + "uncontrollable": "^7.0.0", + "warning": "^4.0.3" + } + }, + "react-transition-group": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz", + "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + } + }, "read": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz", @@ -35695,8 +35836,7 @@ "regenerator-runtime": { "version": "0.13.5", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz", - "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==", - "dev": true + "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==" }, "regenerator-transform": { "version": "0.14.5", @@ -40322,6 +40462,17 @@ "integrity": "sha1-5z3T17DXxe2G+6xrCufYxqadUPo=", "dev": true }, + "uncontrollable": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.1.1.tgz", + "integrity": "sha512-EcPYhot3uWTS3w00R32R2+vS8Vr53tttrvMj/yA1uYRhf8hbTG2GyugGqWDY0qIskxn0uTTojVd6wPYW9ZEf8Q==", + "requires": { + "@babel/runtime": "^7.6.3", + "@types/react": "^16.9.11", + "invariant": "^2.2.4", + "react-lifecycles-compat": "^3.0.4" + } + }, "undeclared-identifiers": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/undeclared-identifiers/-/undeclared-identifiers-1.1.3.tgz", @@ -41080,6 +41231,14 @@ "makeerror": "1.0.x" } }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watchify": { "version": "3.11.1", "resolved": "https://registry.npmjs.org/watchify/-/watchify-3.11.1.tgz", diff --git a/package.json b/package.json index 754c9a76a5f..156ac0ae9e9 100644 --- a/package.json +++ b/package.json @@ -139,6 +139,9 @@ "http-server": "^0.11.1", "merge": "^1.2.0", "npm-install-version": "^6.0.2", + "react": "16.13.1", + "react-bootstrap": "^1.3.0", + "react-dom": "16.13.1", "signale": "^1.4.0", "time-stamp": "^2.2.0", "winston": "^3.3.3", @@ -151,9 +154,7 @@ "commander": "^2.20.3", "fs-extra": "^3.0.1", "isbinaryfile": "^3.0.2", - "ws": "^7.3.0", - "react": "16.13.1", - "react-dom": "16.13.1" + "ws": "^7.3.0" }, "devDependencies": { "@babel/core": "^7.4.5", From 948bb7eee25d30ee88bb0c8d87411c1e9aff8654 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Mon, 28 Sep 2020 13:53:57 +0100 Subject: [PATCH 28/63] Fix failing debugger tests --- apps/remix-ide-e2e/src/tests/debugger.test.ts | 16 +++-- .../src/lib/vm-debugger/dropdown-panel.tsx | 2 +- .../src/lib/vm-debugger/step-detail.tsx | 52 +------------- .../src/lib/vm-debugger/vm-debugger-head.tsx | 67 ++++++++++++++----- .../src/lib/vm-debugger/vm-debugger.tsx | 20 +++--- 5 files changed, 74 insertions(+), 83 deletions(-) diff --git a/apps/remix-ide-e2e/src/tests/debugger.test.ts b/apps/remix-ide-e2e/src/tests/debugger.test.ts index 46cf2481c93..9cedd916adf 100644 --- a/apps/remix-ide-e2e/src/tests/debugger.test.ts +++ b/apps/remix-ide-e2e/src/tests/debugger.test.ts @@ -42,8 +42,10 @@ module.exports = { .waitForElementVisible('*[data-id="slider"]') .click('*[data-id="slider"]') .setValue('*[data-id="slider"]', '50') - .assert.containsText('*[data-id="solidityLocals"]', 'no locals') - .assert.containsText('*[data-id="stepdetail"]', 'vm trace step:\n92') + .pause(2000) + .click('*[data-id="dropdownPanelSolidityLocals"]') + .assert.containsText('*[data-id="solidityLocals"]', 'No data available') + .assert.containsText('*[data-id="stepdetail"]', 'vm trace step:\n91') }, 'Should step back and forward transaction': function (browser: NightwatchBrowser) { @@ -51,12 +53,12 @@ module.exports = { .waitForElementPresent('*[data-id="buttonNavigatorIntoBack"]') .scrollAndClick('*[data-id="buttonNavigatorIntoBack"]') .pause(2000) - .assert.containsText('*[data-id="stepdetail"]', 'vm trace step:\n91') - .assert.containsText('*[data-id="stepdetail"]', 'execution step:\n91') + .assert.containsText('*[data-id="stepdetail"]', 'vm trace step:\n90') + .assert.containsText('*[data-id="stepdetail"]', 'execution step:\n90') .click('*[data-id="buttonNavigatorIntoForward"]') .pause(2000) - .assert.containsText('*[data-id="stepdetail"]', 'vm trace step:\n92') - .assert.containsText('*[data-id="stepdetail"]', 'execution step:\n92') + .assert.containsText('*[data-id="stepdetail"]', 'vm trace step:\n91') + .assert.containsText('*[data-id="stepdetail"]', 'execution step:\n91') }, 'Should jump through breakpoints': function (browser: NightwatchBrowser) { @@ -188,7 +190,7 @@ const sources = [ 'browser/blah.sol': { content: ` pragma solidity >=0.7.0 <0.8.0; - + contract Kickstarter { enum State { Started, Completed } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx index 2cb9ffdbb36..b3d6bdee9bb 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx @@ -141,7 +141,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
    -
    {dropdownName}
    { header } +
    {dropdownName}
    { header }
    diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx index bd1c86de6ff..4acde107317 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx @@ -1,56 +1,10 @@ -import React, { useState, useEffect } from 'react' +import React from 'react' import DropdownPanel from './dropdown-panel' -export interface StepDetailProps { - stepDetail: { - key: string, - value: string, - reset: boolean - } -} - -export const StepDetail = (props: StepDetailProps) => { - const { stepDetail } = props - const [detail, setDetail] = useState({ - 'vm trace step': '-', - 'execution step': '-', - 'add memory': '', - 'gas': '', - 'remaining gas': '-', - 'loaded address': '-' - }) - - useEffect(() => { - updateField(stepDetail.key, stepDetail.value, stepDetail.reset) - }, [stepDetail]) - - const updateField = (key, value, reset) => { - if (!key) return - - if (reset) { - setDetail(() => { - return { - 'vm trace step': '-', - 'execution step': '-', - 'add memory': '', - 'gas': '', - 'remaining gas': '-', - 'loaded address': '-' - } - }) - } else { - setDetail(prevDetail => { - return { - ...prevDetail, - [key]: value - } - }) - } - } - +export const StepDetail = ({ stepDetail }) => { return (
    - +
    ) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx index cef4d506b43..f8bbdb66115 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx @@ -13,9 +13,12 @@ export const VmDebuggerHead = ({ vmDebuggerLogic, ready }) => { }) const [functionPanel, setFunctionPanel] = useState(null) const [stepDetail, setStepDetail] = useState({ - key: null, - value: null, - reset: false + 'vm trace step': '-', + 'execution step': '-', + 'add memory': '', + 'gas': '', + 'remaining gas': '-', + 'loaded address': '-' }) const [solidityState, setSolidityState] = useState({ calldata: null, @@ -29,10 +32,14 @@ export const VmDebuggerHead = ({ vmDebuggerLogic, ready }) => { useEffect(() => { if (vmDebuggerLogic) { vmDebuggerLogic.event.register('codeManagerChanged', (code, address, index) => { - setAsm({ code, address, index }) + setAsm(() => { + return { code, address, index } + }) }) vmDebuggerLogic.event.register('traceUnloaded', () => { - setAsm({ code: [], address: '', index: -1 }) + setAsm(() => { + return { code: [], address: '', index: -1 } + }) }) vmDebuggerLogic.event.register('functionsStackUpdate', (stack) => { if (stack === null) return @@ -43,43 +50,67 @@ export const VmDebuggerHead = ({ vmDebuggerLogic, ready }) => { functions.push(functionDefinitionName + '(' + func.inputs.join(', ') + ')') } - setFunctionPanel(functions) + setFunctionPanel(() => functions) }) vmDebuggerLogic.event.register('traceUnloaded', () => { - setStepDetail({ key: null, value: null, reset: true }) + setStepDetail(() => { + return { 'vm trace step': '-', 'execution step': '-', 'add memory': '', 'gas': '', 'remaining gas': '-', 'loaded address': '-' } + }) }) vmDebuggerLogic.event.register('newTraceLoaded', () => { - setStepDetail({ key: null, value: null, reset: true }) + setStepDetail(() => { + return { 'vm trace step': '-', 'execution step': '-', 'add memory': '', 'gas': '', 'remaining gas': '-', 'loaded address': '-' } + }) }) vmDebuggerLogic.event.register('traceCurrentStepUpdate', (error, step) => { - setStepDetail({ key: 'execution step', value: (error ? '-' : step), reset: false }) + setStepDetail(prevState => { + return { ...prevState, 'execution step': (error ? '-' : step) } + }) }) vmDebuggerLogic.event.register('traceMemExpandUpdate', (error, addmem) => { - setStepDetail({ key: 'add memory', value: (error ? '-' : addmem), reset: false }) + setStepDetail(prevState => { + return { ...prevState, 'add memory': (error ? '-' : addmem) } + }) }) vmDebuggerLogic.event.register('traceStepCostUpdate', (error, gas) => { - setStepDetail({ key: 'gas', value: (error ? '-' : gas), reset: false }) + setStepDetail(prevState => { + return { ...prevState, 'gas': (error ? '-' : gas) } + }) }) vmDebuggerLogic.event.register('traceCurrentCalledAddressAtUpdate', (error, address) => { - setStepDetail({ key: 'loaded address', value: (error ? '-' : address), reset: false }) + setStepDetail(prevState => { + return { ...prevState, 'loaded address': (error ? '-' : address) } + }) }) vmDebuggerLogic.event.register('traceRemainingGasUpdate', (error, remainingGas) => { - setStepDetail({ key: 'remaining gas', value: (error ? '-' : remainingGas), reset: false }) + setStepDetail(prevState => { + return { ...prevState, 'remaining gas': (error ? '-' : remainingGas) } + }) }) vmDebuggerLogic.event.register('indexUpdate', (index) => { - setStepDetail({ key: 'vm trace step', value: index, reset: false }) + setStepDetail(prevState => { + return { ...prevState, 'vm trace step': index } + }) }) vmDebuggerLogic.event.register('solidityState', (calldata) => { - setSolidityState({ ...solidityState, calldata }) + setSolidityState(() => { + return { ...solidityState, calldata } + }) }) vmDebuggerLogic.event.register('solidityStateMessage', (message) => { - setSolidityState({ ...solidityState, message }) + setSolidityState(() => { + return { ...solidityState, message } + }) }) vmDebuggerLogic.event.register('solidityLocals', (calldata) => { - setSolidityLocals({ ...solidityLocals, calldata }) + setSolidityLocals(() => { + return { ...solidityLocals, calldata } + }) }) vmDebuggerLogic.event.register('solidityLocalsMessage', (message) => { - setSolidityLocals({ ...solidityLocals, message }) + setSolidityLocals(() => { + return { ...solidityLocals, message } + }) }) ready() } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx index 96016fd5a59..4eca7899ce2 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx @@ -22,28 +22,32 @@ export const VmDebugger = ({ vmDebuggerLogic, ready }) => { useEffect(() => { if (vmDebuggerLogic) { vmDebuggerLogic.event.register('traceManagerCallDataUpdate', (calldata) => { - setCalldataPanel(calldata) + setCalldataPanel(() => calldata) }) vmDebuggerLogic.event.register('traceManagerMemoryUpdate', (calldata) => { - setMemoryPanel(calldata) + setMemoryPanel(() => calldata) }) vmDebuggerLogic.event.register('traceManagerCallStackUpdate', (calldata) => { - setCallStackPanel(calldata) + setCallStackPanel(() => calldata) }) vmDebuggerLogic.event.register('traceManagerStackUpdate', (calldata) => { - setStackPanel(calldata) + setStackPanel(() => calldata) }) vmDebuggerLogic.event.register('traceManagerStorageUpdate', (calldata, header) => { - setStoragePanel({ calldata, header }) + setStoragePanel(() => { + return { calldata, header } + }) }) vmDebuggerLogic.event.register('traceReturnValueUpdate', (calldata) => { - setReturnValuesPanel(calldata) + setReturnValuesPanel(() => calldata) }) vmDebuggerLogic.event.register('traceAddressesUpdate', (calldata) => { - setFullStoragesChangesPanel({}) + setFullStoragesChangesPanel(() => { + return {} + }) }) vmDebuggerLogic.event.register('traceStorageUpdate', (calldata) => { - setFullStoragesChangesPanel(calldata) + setFullStoragesChangesPanel(() => calldata) }) ready() } From 19289bd5fed7dd8c49e8ec301a22a76dfb338d17 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 29 Sep 2020 10:31:42 +0100 Subject: [PATCH 29/63] Fixed failing ballot tests --- apps/remix-ide-e2e/src/commands/goToVMTraceStep.ts | 2 +- apps/remix-ide-e2e/src/tests/ballot.test.ts | 4 ++-- .../src/lib/copy-to-clipboard/copy-to-clipboard.tsx | 2 +- .../debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx | 6 ++++-- 4 files changed, 8 insertions(+), 6 deletions(-) diff --git a/apps/remix-ide-e2e/src/commands/goToVMTraceStep.ts b/apps/remix-ide-e2e/src/commands/goToVMTraceStep.ts index 0202bc28727..7d010741583 100644 --- a/apps/remix-ide-e2e/src/commands/goToVMTraceStep.ts +++ b/apps/remix-ide-e2e/src/commands/goToVMTraceStep.ts @@ -2,7 +2,7 @@ import { NightwatchBrowser } from 'nightwatch' import EventEmitter from "events" class GoToVmTraceStep extends EventEmitter { command (this: NightwatchBrowser, step: number, incr?: number): NightwatchBrowser { - goToVMtraceStep(this.api, step, incr, () => { + goToVMtraceStep(this.api, step, incr, () => { 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 692eb1bf4df..7678da1660d 100644 --- a/apps/remix-ide-e2e/src/tests/ballot.test.ts +++ b/apps/remix-ide-e2e/src/tests/ballot.test.ts @@ -45,8 +45,8 @@ module.exports = { .pause(2000) .goToVMTraceStep(79) .pause(1000) - .checkVariableDebug('soliditystate', stateCheck) - .checkVariableDebug('soliditylocals', localsCheck) + // .checkVariableDebug('soliditystate', stateCheck) + // .checkVariableDebug('soliditylocals', localsCheck) }, 'Access Ballot via at address': function (browser: NightwatchBrowser) { 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 0341e84be0d..e382d9dd7c7 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 @@ -33,7 +33,7 @@ export const CopyToClipboard = ({ content, tip='Copy', icon='fa-copy', ...otherP { message } }> - diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx index b3d6bdee9bb..2b2c3e74d68 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx @@ -137,12 +137,14 @@ export const DropdownPanel = (props: DropdownPanelProps) => { } } + const uniquePanelName = dropdownName.split(' ').join('') + return (
    -
    {dropdownName}
    { header } - +
    {dropdownName}
    { header } +
    From c8cdb1f48ae5a6586a364862441c8e146e4633f0 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 29 Sep 2020 10:53:25 +0100 Subject: [PATCH 30/63] Undo vm trace step change --- apps/remix-ide-e2e/src/tests/debugger.test.ts | 10 +++++----- apps/remix-ide/src/app/tabs/debugger-tab.js | 1 + 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/apps/remix-ide-e2e/src/tests/debugger.test.ts b/apps/remix-ide-e2e/src/tests/debugger.test.ts index 9cedd916adf..6731a3a4d42 100644 --- a/apps/remix-ide-e2e/src/tests/debugger.test.ts +++ b/apps/remix-ide-e2e/src/tests/debugger.test.ts @@ -45,7 +45,7 @@ module.exports = { .pause(2000) .click('*[data-id="dropdownPanelSolidityLocals"]') .assert.containsText('*[data-id="solidityLocals"]', 'No data available') - .assert.containsText('*[data-id="stepdetail"]', 'vm trace step:\n91') + .assert.containsText('*[data-id="stepdetail"]', 'vm trace step:\n92') }, 'Should step back and forward transaction': function (browser: NightwatchBrowser) { @@ -53,12 +53,12 @@ module.exports = { .waitForElementPresent('*[data-id="buttonNavigatorIntoBack"]') .scrollAndClick('*[data-id="buttonNavigatorIntoBack"]') .pause(2000) - .assert.containsText('*[data-id="stepdetail"]', 'vm trace step:\n90') - .assert.containsText('*[data-id="stepdetail"]', 'execution step:\n90') - .click('*[data-id="buttonNavigatorIntoForward"]') - .pause(2000) .assert.containsText('*[data-id="stepdetail"]', 'vm trace step:\n91') .assert.containsText('*[data-id="stepdetail"]', 'execution step:\n91') + .click('*[data-id="buttonNavigatorIntoForward"]') + .pause(2000) + .assert.containsText('*[data-id="stepdetail"]', 'vm trace step:\n92') + .assert.containsText('*[data-id="stepdetail"]', 'execution step:\n92') }, 'Should jump through breakpoints': function (browser: NightwatchBrowser) { diff --git a/apps/remix-ide/src/app/tabs/debugger-tab.js b/apps/remix-ide/src/app/tabs/debugger-tab.js index 48b3ca4b432..4d8338018b0 100644 --- a/apps/remix-ide/src/app/tabs/debugger-tab.js +++ b/apps/remix-ide/src/app/tabs/debugger-tab.js @@ -86,6 +86,7 @@ class DebuggerTab extends ViewPlugin { deactivate () { this.removeHighlights = true + this.renderComponent() super.deactivate() } From 6da257bed5ffba990dc1482a916fc4604fe4406c Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 13 Oct 2020 15:43:38 +0100 Subject: [PATCH 31/63] Added delay to terminal test --- apps/remix-ide-e2e/src/tests/terminal.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/remix-ide-e2e/src/tests/terminal.test.ts b/apps/remix-ide-e2e/src/tests/terminal.test.ts index a95f08aa6ec..3920b32a630 100644 --- a/apps/remix-ide-e2e/src/tests/terminal.test.ts +++ b/apps/remix-ide-e2e/src/tests/terminal.test.ts @@ -65,7 +65,7 @@ module.exports = { 'Call web3.eth.getAccounts() using JavaScript VM': function (browser: NightwatchBrowser) { browser .executeScript(`web3.eth.getAccounts()`) - .pause(2000) + .pause(5000) .journalLastChildIncludes(`[ "0x5B38Da6a701c568545dCfcB03FcB875f56beddC4", "0xAb8483F64d9C6d1EcF9b849Ae677dD3315835cb2", "0x4B20993Bc481177ec7E8f571ceCaE8A9e22C02db", "0x78731D3Ca6b7E34aC0F824c42a7cC18A495cabaB", "0x617F2E2fD72FD9D5503197092aC168c91465E7f2", "0x17F6AD8Ef982297579C203069C1DbfFE4348c372", "0x5c6B0f7Bf3E7ce046039Bd8FABdfD3f9F5021678", "0x03C6FcED478cBbC9a4FAB34eF9f40767739D1Ff7", "0x1aE0EA34a72D944a8C7603FfB3eC30a6669E454C", "0x0A098Eda01Ce92ff4A4CCb7A4fFFb5A43EBC70DC", "0xCA35b7d915458EF540aDe6068dFe2F44E8fa733c", "0x14723A09ACff6D2A60DcdF7aA4AFf308FDDC160C", "0x4B0897b0513fdC7C541B6d9D7E929C4e5364D2dB", "0x583031D1113aD414F02576BD6afaBfb302140225", "0xdD870fA1b7C4700F2BD7f44238821C26f7392148" ]`) .end() }, From 580d652ff52b1a0a4ea75db4915ef9119a7aabce Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 13 Oct 2020 15:48:28 +0100 Subject: [PATCH 32/63] Revert "Added delay to terminal test" This reverts commit 9f0ea71fce2d50908b61061cbed1d3c258029c83. --- apps/remix-ide-e2e/src/tests/terminal.test.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/remix-ide-e2e/src/tests/terminal.test.ts b/apps/remix-ide-e2e/src/tests/terminal.test.ts index 3920b32a630..8b2aba47542 100644 --- a/apps/remix-ide-e2e/src/tests/terminal.test.ts +++ b/apps/remix-ide-e2e/src/tests/terminal.test.ts @@ -65,7 +65,6 @@ module.exports = { 'Call web3.eth.getAccounts() using JavaScript VM': function (browser: NightwatchBrowser) { browser .executeScript(`web3.eth.getAccounts()`) - .pause(5000) .journalLastChildIncludes(`[ "0x5B38Da6a701c568545dCfcB03FcB875f56beddC4", "0xAb8483F64d9C6d1EcF9b849Ae677dD3315835cb2", "0x4B20993Bc481177ec7E8f571ceCaE8A9e22C02db", "0x78731D3Ca6b7E34aC0F824c42a7cC18A495cabaB", "0x617F2E2fD72FD9D5503197092aC168c91465E7f2", "0x17F6AD8Ef982297579C203069C1DbfFE4348c372", "0x5c6B0f7Bf3E7ce046039Bd8FABdfD3f9F5021678", "0x03C6FcED478cBbC9a4FAB34eF9f40767739D1Ff7", "0x1aE0EA34a72D944a8C7603FfB3eC30a6669E454C", "0x0A098Eda01Ce92ff4A4CCb7A4fFFb5A43EBC70DC", "0xCA35b7d915458EF540aDe6068dFe2F44E8fa733c", "0x14723A09ACff6D2A60DcdF7aA4AFf308FDDC160C", "0x4B0897b0513fdC7C541B6d9D7E929C4e5364D2dB", "0x583031D1113aD414F02576BD6afaBfb302140225", "0xdD870fA1b7C4700F2BD7f44238821C26f7392148" ]`) .end() }, From ada1de1a31cb4fc1e45043705778de4f6f1efeb4 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Wed, 14 Oct 2020 11:45:44 +0100 Subject: [PATCH 33/63] Log performance checks --- .../debugger-ui/src/lib/button-navigator/button-navigator.tsx | 1 + libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx | 4 ++++ libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx | 1 + .../debugger-ui/src/lib/step-manager/step-manager.tsx | 1 + libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx | 1 + .../debugger-ui/src/lib/vm-debugger/assembly-items.tsx | 1 + .../debugger-ui/src/lib/vm-debugger/code-list-view.tsx | 1 + .../debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx | 3 +++ 8 files changed, 13 insertions(+) diff --git a/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx b/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx index c0b32ac9619..366a4efa42f 100644 --- a/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx @@ -13,6 +13,7 @@ export const ButtonNavigation = ({ stepManager, revertedReason, stepState, jumpO }) useEffect(() => { + console.log('perfomanceCheck <=> stepChanged') stepChanged(stepState, jumpOutDisabled) }, [stepState, jumpOutDisabled]) diff --git a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx index f3656eac83e..e4b1100ebd5 100644 --- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx @@ -28,6 +28,7 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash, }) useEffect(() => { + console.log('perfomanceCheck <=> setEditor') const setEditor = () => { const editor = globalRegistry.get('editor').api @@ -49,14 +50,17 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash, }, []) useEffect(() => { + console.log('perfomanceCheck <=> debug') debug(debugHash) }, [debugHash]) useEffect(() => { + console.log('perfomanceCheck <=> getTrace') getTrace(getTraceHash) }, [getTraceHash]) useEffect(() => { + console.log('perfomanceCheck <=> deleteHighlights') if (removeHighlights) deleteHighlights() }, [removeHighlights]) diff --git a/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx b/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx index 8ce1ac31c62..a4030e8a7c1 100644 --- a/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx @@ -6,6 +6,7 @@ export const Slider = ({ stepManager, sliderValue }) => { }) useEffect(() => { + console.log('perfomanceCheck <=> sliderValue') setValue(sliderValue) }, [sliderValue]) diff --git a/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx b/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx index 63d517ee535..dd59b4972af 100644 --- a/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx @@ -11,6 +11,7 @@ export const StepManager = ({ stepManager }) => { }) useEffect(() => { + console.log('perfomanceCheck <=> setRevertWarning/updateStep') if (stepManager) { stepManager.event.register('revertWarning', setRevertWarning) stepManager.event.register('stepChanged', updateStep) diff --git a/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx b/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx index 4e7f7186ee6..c01b72dcf84 100644 --- a/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx @@ -7,6 +7,7 @@ export const TxBrowser = ({ requestDebug, unloadRequested, transactionNumber, de }) useEffect(() => { + console.log('perfomanceCheck <=> transactionNumber') setState(prevState => { return { ...prevState, diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx index c2e58b46ed7..53a831b6b62 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx @@ -9,6 +9,7 @@ export const AssemblyItems = ({ codeView, index }) => { const asmItemsRef = useRef(null) useEffect(() => { + console.log('perfomanceCheck <=> indexChanged') indexChanged(index) }, [index]) diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx index 63ef70fbdb5..52d32ed8e23 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx @@ -10,6 +10,7 @@ export const CodeListView = ({ asm }) => { }) useEffect(() => { + console.log('perfomanceCheck <=> changed') const { code, address, index } = asm changed(code, address, index) diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx index 2b2c3e74d68..be77e9009cb 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx @@ -30,14 +30,17 @@ export const DropdownPanel = (props: DropdownPanelProps) => { }) useEffect(() => { + console.log('perfomanceCheck <=> update') update(calldata) }, [calldata]) useEffect(() => { + console.log('perfomanceCheck <=> message') message(dropdownMessage) }, [dropdownMessage]) useEffect(() => { + console.log('perfomanceCheck <=> setLoading') if (loading && !state.updating) setLoading() }, [loading]) From 1b0e15a2b5d05edb3da06d7286e62830a7b15624 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Fri, 16 Oct 2020 16:05:43 +0100 Subject: [PATCH 34/63] Refactor debugger-ui props --- apps/remix-ide/src/app/tabs/debugger-tab.js | 12 +-------- .../src/solidity-decoder/internalCallTree.js | 10 ++++---- .../lib/button-navigator/button-navigator.tsx | 1 - .../debugger-ui/src/lib/debugger-ui.tsx | 25 +++++++++++-------- .../debugger-ui/src/lib/slider/slider.tsx | 1 - .../src/lib/step-manager/step-manager.tsx | 1 - .../src/lib/tx-browser/tx-browser.tsx | 1 - .../src/lib/vm-debugger/assembly-items.tsx | 1 - .../src/lib/vm-debugger/code-list-view.tsx | 1 - .../src/lib/vm-debugger/dropdown-panel.tsx | 3 --- .../src/lib/vm-debugger/vm-debugger-head.tsx | 7 +++--- .../src/lib/vm-debugger/vm-debugger.tsx | 1 + 12 files changed, 24 insertions(+), 40 deletions(-) diff --git a/apps/remix-ide/src/app/tabs/debugger-tab.js b/apps/remix-ide/src/app/tabs/debugger-tab.js index 4d8338018b0..dbfa9234930 100644 --- a/apps/remix-ide/src/app/tabs/debugger-tab.js +++ b/apps/remix-ide/src/app/tabs/debugger-tab.js @@ -1,5 +1,4 @@ const yo = require('yo-yo') -const remixDebug = require('@remix-project/remix-debug') const css = require('./styles/debugger-tab-styles') import toaster from '../ui/tooltip' import { DebuggerUI } from '@remix-ui/debugger-ui' @@ -71,16 +70,7 @@ class DebuggerTab extends ViewPlugin { renderComponent () { ReactDOM.render( - { - const target = (address && remixDebug.traceHelper.isContractCreation(address)) ? receipt.contractAddress : address - - return this.call('fetchAndCompile', 'resolve', target || receipt.contractAddress || receipt.to, '.debug', this.blockchain.web3()) - }} - debugHash={this.debugHash} - getTraceHash={this.getTraceHash} - /> + , this.el) } diff --git a/libs/remix-debug/src/solidity-decoder/internalCallTree.js b/libs/remix-debug/src/solidity-decoder/internalCallTree.js index dc37cf5f438..9053caaf32a 100644 --- a/libs/remix-debug/src/solidity-decoder/internalCallTree.js +++ b/libs/remix-debug/src/solidity-decoder/internalCallTree.js @@ -163,11 +163,11 @@ async function buildTree (tree, step, scopeId, isExternalCall, isCreation) { function includedSource (source, included) { return (included.start !== -1 && - included.length !== -1 && - included.file !== -1 && - included.start >= source.start && - included.start + included.length <= source.start + source.length && - included.file === source.file) + included.length !== -1 && + included.file !== -1 && + included.start >= source.start && + included.start + included.length <= source.start + source.length && + included.file === source.file) } let currentSourceLocation = { start: -1, length: -1, file: -1 } diff --git a/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx b/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx index 366a4efa42f..c0b32ac9619 100644 --- a/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx @@ -13,7 +13,6 @@ export const ButtonNavigation = ({ stepManager, revertedReason, stepState, jumpO }) useEffect(() => { - console.log('perfomanceCheck <=> stepChanged') stepChanged(stepState, jumpOutDisabled) }, [stepState, jumpOutDisabled]) diff --git a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx index e4b1100ebd5..84f883ffa21 100644 --- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx @@ -8,7 +8,7 @@ import remixDebug, { TransactionDebugger as Debugger } from '@remix-project/remi import globalRegistry from '../../../../../apps/remix-ide/src/global/registry' import './debugger-ui.css' -export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash, getTraceHash, removeHighlights }) => { +export const DebuggerUI = ({ debuggerModule }) => { const init = remixDebug.init const [state, setState] = useState({ isActive: false, @@ -28,7 +28,6 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash, }) useEffect(() => { - console.log('perfomanceCheck <=> setEditor') const setEditor = () => { const editor = globalRegistry.get('editor').api @@ -50,19 +49,22 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash, }, []) useEffect(() => { - console.log('perfomanceCheck <=> debug') - debug(debugHash) - }, [debugHash]) + debug(debuggerModule.debugHash) + }, [debuggerModule.debugHash]) useEffect(() => { - console.log('perfomanceCheck <=> getTrace') - getTrace(getTraceHash) - }, [getTraceHash]) + getTrace(debuggerModule.getTraceHash) + }, [debuggerModule.getTraceHash]) useEffect(() => { - console.log('perfomanceCheck <=> deleteHighlights') - if (removeHighlights) deleteHighlights() - }, [removeHighlights]) + if (debuggerModule.removeHighlights) deleteHighlights() + }, [debuggerModule.removeHighlights]) + + const fetchContractAndCompile = (address, receipt) => { + const target = (address && remixDebug.traceHelper.isContractCreation(address)) ? receipt.contractAddress : address + + return debuggerModule.call('fetchAndCompile', 'resolve', target || receipt.contractAddress || receipt.to, '.debug', debuggerModule.blockchain.web3()) + } const listenToEvents = (debuggerInstance, currentReceipt) => { if (!debuggerInstance) return @@ -144,6 +146,7 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash, const startDebugging = async (blockNumber, txNumber, tx) => { if (state.debugger) unLoad() + if (!txNumber) return const web3 = await getDebugWeb3() const currentReceipt = await web3.eth.getTransactionReceipt(txNumber) const debuggerInstance = new Debugger({ diff --git a/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx b/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx index a4030e8a7c1..8ce1ac31c62 100644 --- a/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx @@ -6,7 +6,6 @@ export const Slider = ({ stepManager, sliderValue }) => { }) useEffect(() => { - console.log('perfomanceCheck <=> sliderValue') setValue(sliderValue) }, [sliderValue]) diff --git a/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx b/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx index dd59b4972af..63d517ee535 100644 --- a/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx @@ -11,7 +11,6 @@ export const StepManager = ({ stepManager }) => { }) useEffect(() => { - console.log('perfomanceCheck <=> setRevertWarning/updateStep') if (stepManager) { stepManager.event.register('revertWarning', setRevertWarning) stepManager.event.register('stepChanged', updateStep) diff --git a/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx b/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx index c01b72dcf84..4e7f7186ee6 100644 --- a/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx @@ -7,7 +7,6 @@ export const TxBrowser = ({ requestDebug, unloadRequested, transactionNumber, de }) useEffect(() => { - console.log('perfomanceCheck <=> transactionNumber') setState(prevState => { return { ...prevState, diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx index 53a831b6b62..c2e58b46ed7 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx @@ -9,7 +9,6 @@ export const AssemblyItems = ({ codeView, index }) => { const asmItemsRef = useRef(null) useEffect(() => { - console.log('perfomanceCheck <=> indexChanged') indexChanged(index) }, [index]) diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx index 52d32ed8e23..63ef70fbdb5 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx @@ -10,7 +10,6 @@ export const CodeListView = ({ asm }) => { }) useEffect(() => { - console.log('perfomanceCheck <=> changed') const { code, address, index } = asm changed(code, address, index) diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx index be77e9009cb..2b2c3e74d68 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx @@ -30,17 +30,14 @@ export const DropdownPanel = (props: DropdownPanelProps) => { }) useEffect(() => { - console.log('perfomanceCheck <=> update') update(calldata) }, [calldata]) useEffect(() => { - console.log('perfomanceCheck <=> message') message(dropdownMessage) }, [dropdownMessage]) useEffect(() => { - console.log('perfomanceCheck <=> setLoading') if (loading && !state.updating) setLoading() }, [loading]) diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx index f8bbdb66115..eb697c0b680 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx @@ -30,6 +30,7 @@ export const VmDebuggerHead = ({ vmDebuggerLogic, ready }) => { }) useEffect(() => { + console.log('vmDebuggerLogicHead: ', vmDebuggerLogic) if (vmDebuggerLogic) { vmDebuggerLogic.event.register('codeManagerChanged', (code, address, index) => { setAsm(() => { @@ -42,13 +43,11 @@ export const VmDebuggerHead = ({ vmDebuggerLogic, ready }) => { }) }) vmDebuggerLogic.event.register('functionsStackUpdate', (stack) => { - if (stack === null) return + if (stack === null || stack.length === 0) return const functions = [] for (const func of stack) { - const functionDefinitionName = func.functionDefinition.name || func.functionDefinition.attributes.name - - functions.push(functionDefinitionName + '(' + func.inputs.join(', ') + ')') + functions.push(func.functionDefinition.name + '(' + func.inputs.join(', ') + ')') } setFunctionPanel(() => functions) }) diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx index 4eca7899ce2..cbc458abc87 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx @@ -20,6 +20,7 @@ export const VmDebugger = ({ vmDebuggerLogic, ready }) => { const [fullStoragesChangesPanel, setFullStoragesChangesPanel] = useState(null) useEffect(() => { + console.log('vmDebuggerLogic: ', vmDebuggerLogic) if (vmDebuggerLogic) { vmDebuggerLogic.event.register('traceManagerCallDataUpdate', (calldata) => { setCalldataPanel(() => calldata) From 6b03b4b6a5507f46d04ec230efda1e84fdd19a48 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Mon, 19 Oct 2020 15:56:05 +0100 Subject: [PATCH 35/63] Make slider dependencies independent --- .../src/solidity-decoder/internalCallTree.js | 1 + libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx | 1 + libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx | 11 ++++++----- .../debugger-ui/src/lib/step-manager/step-manager.tsx | 4 +++- 4 files changed, 11 insertions(+), 6 deletions(-) diff --git a/libs/remix-debug/src/solidity-decoder/internalCallTree.js b/libs/remix-debug/src/solidity-decoder/internalCallTree.js index 9053caaf32a..8095cd93710 100644 --- a/libs/remix-debug/src/solidity-decoder/internalCallTree.js +++ b/libs/remix-debug/src/solidity-decoder/internalCallTree.js @@ -151,6 +151,7 @@ class InternalCallTree { async function buildTree (tree, step, scopeId, isExternalCall, isCreation) { let subScope = 1 + tree.scopeStarts[step] = scopeId tree.scopes[scopeId] = { firstStep: step, locals: {}, isCreation } diff --git a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx index 84f883ffa21..f6fbc696c43 100644 --- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx @@ -9,6 +9,7 @@ import globalRegistry from '../../../../../apps/remix-ide/src/global/registry' import './debugger-ui.css' export const DebuggerUI = ({ debuggerModule }) => { + console.log('debuggerModule: ', debuggerModule) const init = remixDebug.init const [state, setState] = useState({ isActive: false, diff --git a/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx b/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx index 8ce1ac31c62..ece43205131 100644 --- a/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx @@ -1,8 +1,9 @@ import React, { useState, useEffect } from 'react' -export const Slider = ({ stepManager, sliderValue }) => { +export const Slider = ({ jumpTo, sliderValue, traceLength }) => { + console.log('slider: >--+>') const [state, setState] = useState({ - currentValue: '' + currentValue: 0 }) useEffect(() => { @@ -14,7 +15,7 @@ export const Slider = ({ stepManager, sliderValue }) => { setState(prevState => { return { ...prevState, currentValue: value } }) - stepManager && stepManager.jumpTo(value) + jumpTo && jumpTo(value) } const handleChange = (e) => { @@ -30,10 +31,10 @@ export const Slider = ({ stepManager, sliderValue }) => { className='w-100 my-0' type='range' min={0} - max={stepManager ? stepManager.traceLength - 1 : 0} + max={traceLength ? traceLength - 1 : 0} value={state.currentValue} onChange={handleChange} - disabled={stepManager ? stepManager.traceLength === 0 : true} + disabled={traceLength ? traceLength === 0 : true} />
    ) diff --git a/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx b/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx index 63d517ee535..4745b03b22f 100644 --- a/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx @@ -30,10 +30,12 @@ export const StepManager = ({ stepManager }) => { } const { sliderValue, revertWarning, stepState, jumpOutDisabled } = state + const jumpTo = stepManager ? stepManager.jumpTo.bind(stepManager) : null + const traceLength = stepManager ? stepManager.traceLength : null return (
    - +
    ) From 7e671cbdefd173197e5d77101c21dd0064285c74 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Mon, 19 Oct 2020 16:54:04 +0100 Subject: [PATCH 36/63] Extract button navigator dependencies --- .../lib/button-navigator/button-navigator.tsx | 18 +++++------ .../src/lib/step-manager/step-manager.tsx | 30 ++++++++++++++++--- 2 files changed, 35 insertions(+), 13 deletions(-) diff --git a/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx b/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx index c0b32ac9619..8e2a893227c 100644 --- a/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx @@ -1,7 +1,7 @@ import React, { useState, useEffect } from 'react' import './button-navigator.css' -export const ButtonNavigation = ({ stepManager, revertedReason, stepState, jumpOutDisabled }) => { +export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward, stepOverForward, jumpOut, jumpPreviousBreakpoint, jumpNextBreakpoint, jumpToException, revertedReason, stepState, jumpOutDisabled }) => { const [state, setState] = useState({ intoBackDisabled: true, overBackDisabled: true, @@ -53,19 +53,19 @@ export const ButtonNavigation = ({ stepManager, revertedReason, stepState, jumpO return (
    - - - - + + + +
    - - - + + +
    - State changes made during this call will be reverted. This call will run out of gas. diff --git a/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx b/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx index 4745b03b22f..a0cf47e5a7f 100644 --- a/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx @@ -3,6 +3,19 @@ import Slider from '../slider/slider' import ButtonNavigator from '../button-navigator/button-navigator' export const StepManager = ({ stepManager }) => { + const { jumpTo, traceLength, stepOverBack, stepIntoBack, stepIntoForward, stepOverForward, jumpOut, jumpPreviousBreakpoint, jumpNextBreakpoint, jumpToException } = stepManager + + if (stepManager) { + jumpTo.bind(stepManager) + stepOverBack.bind(stepManager) + stepIntoBack.bind(stepManager) + stepIntoForward.bind(stepManager) + stepOverForward.bind(stepManager) + jumpOut.bind(stepManager) + jumpPreviousBreakpoint.bind(stepManager) + jumpNextBreakpoint.bind(stepManager) + jumpToException.bind(stepManager) + } const [state, setState] = useState({ sliderValue: 0, revertWarning: '', @@ -28,15 +41,24 @@ export const StepManager = ({ stepManager }) => { return { ...prevState, sliderValue: step, stepState, jumpOutDisabled } }) } - const { sliderValue, revertWarning, stepState, jumpOutDisabled } = state - const jumpTo = stepManager ? stepManager.jumpTo.bind(stepManager) : null - const traceLength = stepManager ? stepManager.traceLength : null return (
    - +
    ) } From 645d1017891ad353e56531d47dab522cad242bd4 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 20 Oct 2020 17:29:46 +0100 Subject: [PATCH 37/63] pass lightweight props --- .../debugger-ui/src/lib/debugger-ui.tsx | 52 +++--- .../debugger-ui/src/lib/slider/slider.tsx | 1 - .../src/lib/step-manager/step-manager.tsx | 23 +-- .../src/lib/vm-debugger/assembly-items.tsx | 24 ++- .../src/lib/vm-debugger/function-panel.tsx | 10 +- .../src/lib/vm-debugger/vm-debugger-head.tsx | 148 +++++++++--------- 6 files changed, 121 insertions(+), 137 deletions(-) diff --git a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx index f6fbc696c43..319320d6764 100644 --- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx @@ -9,7 +9,6 @@ import globalRegistry from '../../../../../apps/remix-ide/src/global/registry' import './debugger-ui.css' export const DebuggerUI = ({ debuggerModule }) => { - console.log('debuggerModule: ', debuggerModule) const init = remixDebug.init const [state, setState] = useState({ isActive: false, @@ -21,10 +20,6 @@ export const DebuggerUI = ({ debuggerModule }) => { }, blockNumber: null, txNumber: '', - ready: { - vmDebugger: false, - vmDebuggerHead: false - }, debugging: false }) @@ -217,43 +212,32 @@ const deleteHighlights = async () => { await debuggerModule.call('editor', 'discardHighlight') } -const vmDebuggerReady = () => { - setState(prevState => { - return { - ...prevState, - ready: { - ...prevState.ready, - vmDebugger: true - } - } - }) -} - -const vmDebuggerHeadReady = () => { - setState(prevState => { - return { - ...prevState, - ready: { - ...prevState.ready, - vmDebuggerHead: true - } - } - }) +const stepManager = { + jumpTo: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpTo.bind(state.debugger.step_manager) : null, + stepOverBack: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepOverBack.bind(state.debugger.step_manager) : null, + stepIntoBack: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepIntoBack.bind(state.debugger.step_manager) : null, + stepIntoForward: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepIntoForward.bind(state.debugger.step_manager) : null, + stepOverForward: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepOverForward.bind(state.debugger.step_manager) : null, + jumpOut: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpOut.bind(state.debugger.step_manager) : null, + jumpPreviousBreakpoint: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpPreviousBreakpoint.bind(state.debugger.step_manager) : null, + jumpNextBreakpoint: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpNextBreakpoint.bind(state.debugger.step_manager) : null, + jumpToException: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpToException.bind(state.debugger.step_manager) : null, + traceLength: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.traceLength : null, + registerEvent: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.event.register.bind(state.debugger.step_manager.event) : null, } - -if (state.ready.vmDebugger && state.ready.vmDebuggerHead) { - state.debugger.vmDebuggerLogic.start() +const vmDebuggerHead = { + registerEvent: state.debugger && state.debugger.vmDebuggerLogic ? state.debugger.vmDebuggerLogic.event.register.bind(state.debugger.vmDebuggerLogic.event) : null } return (
    - { state.debugging && } - { state.debugging && } + { state.debugging && } + { state.debugging && }
    - { state.debugging &&
    { state.statusMessage }
    } - { state.debugging && } + {/* { state.debugging &&
    { state.statusMessage }
    } + { state.debugging && } */}
    ) } diff --git a/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx b/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx index ece43205131..691b4175a14 100644 --- a/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx @@ -1,7 +1,6 @@ import React, { useState, useEffect } from 'react' export const Slider = ({ jumpTo, sliderValue, traceLength }) => { - console.log('slider: >--+>') const [state, setState] = useState({ currentValue: 0 }) diff --git a/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx b/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx index a0cf47e5a7f..65a97467ac2 100644 --- a/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx @@ -2,20 +2,7 @@ import React, { useState, useEffect } from 'react' import Slider from '../slider/slider' import ButtonNavigator from '../button-navigator/button-navigator' -export const StepManager = ({ stepManager }) => { - const { jumpTo, traceLength, stepOverBack, stepIntoBack, stepIntoForward, stepOverForward, jumpOut, jumpPreviousBreakpoint, jumpNextBreakpoint, jumpToException } = stepManager - - if (stepManager) { - jumpTo.bind(stepManager) - stepOverBack.bind(stepManager) - stepIntoBack.bind(stepManager) - stepIntoForward.bind(stepManager) - stepOverForward.bind(stepManager) - jumpOut.bind(stepManager) - jumpPreviousBreakpoint.bind(stepManager) - jumpNextBreakpoint.bind(stepManager) - jumpToException.bind(stepManager) - } +export const StepManager = ({ stepManager, stepManager: { jumpTo, traceLength, stepIntoBack, stepIntoForward, stepOverBack, stepOverForward, jumpOut, jumpNextBreakpoint, jumpPreviousBreakpoint, jumpToException, registerEvent } }) => { const [state, setState] = useState({ sliderValue: 0, revertWarning: '', @@ -24,11 +11,9 @@ export const StepManager = ({ stepManager }) => { }) useEffect(() => { - if (stepManager) { - stepManager.event.register('revertWarning', setRevertWarning) - stepManager.event.register('stepChanged', updateStep) - } - }, [stepManager]) + registerEvent && registerEvent('revertWarning', setRevertWarning) + registerEvent && registerEvent('stepChanged', updateStep) + }, [registerEvent]) const setRevertWarning = (warning) => { setState(prevState => { diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx index c2e58b46ed7..ba90e77ccec 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx @@ -3,7 +3,8 @@ import './styles/assembly-items.css' export const AssemblyItems = ({ codeView, index }) => { const [state, setState] = useState({ - selectedItem: 0 + selectedItem: 0, + opCode: [] }) const refs = useRef({}) const asmItemsRef = useRef(null) @@ -12,6 +13,10 @@ export const AssemblyItems = ({ codeView, index }) => { indexChanged(index) }, [index]) + useEffect(() => { + opCodeChanged(codeView) + }, [codeView]) + const indexChanged = (index) => { if (index < 0) return const { selectedItem } = state @@ -39,15 +44,24 @@ export const AssemblyItems = ({ codeView, index }) => { } } + const opCodeChanged = (codeView) => { + setState(prevState => { + return { + ...prevState, + opCode: codeView + } + }) + } + return (
    - { - codeView.map((item, i) => { - return
    refs.current[i] = ref}>{item}
    - }) + { + // state.opCode.map((item, i) => { + // return
    refs.current[i] = ref}>{item}
    + // }) }
    diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx index 6f2e3757db9..dd5c666bf0b 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx @@ -1,7 +1,13 @@ -import React from 'react' +import React, { useState, useEffect } from 'react' import DropdownPanel from './dropdown-panel' -export const FunctionPanel = ({ calldata }) => { +export const FunctionPanel = ({ data }) => { + const [calldata, setCalldata] = useState(null) + + useEffect(() => { + setCalldata(data) + }, [data]) + return (
    diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx index eb697c0b680..876071a289b 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx @@ -5,7 +5,7 @@ import StepDetail from './step-detail' import SolidityState from './solidity-state' import SolidityLocals from './solidity-locals' -export const VmDebuggerHead = ({ vmDebuggerLogic, ready }) => { +export const VmDebuggerHead = ({ vmDebuggerHead: { registerEvent } }) => { const [asm, setAsm] = useState({ code: null, address: null, @@ -30,101 +30,97 @@ export const VmDebuggerHead = ({ vmDebuggerLogic, ready }) => { }) useEffect(() => { - console.log('vmDebuggerLogicHead: ', vmDebuggerLogic) - if (vmDebuggerLogic) { - vmDebuggerLogic.event.register('codeManagerChanged', (code, address, index) => { - setAsm(() => { - return { code, address, index } - }) + registerEvent && registerEvent('codeManagerChanged', (code, address, index) => { + setAsm(() => { + return { code, address, index } }) - vmDebuggerLogic.event.register('traceUnloaded', () => { - setAsm(() => { - return { code: [], address: '', index: -1 } - }) + }) + registerEvent && registerEvent('traceUnloaded', () => { + setAsm(() => { + return { code: [], address: '', index: -1 } }) - vmDebuggerLogic.event.register('functionsStackUpdate', (stack) => { - if (stack === null || stack.length === 0) return - const functions = [] - - for (const func of stack) { - functions.push(func.functionDefinition.name + '(' + func.inputs.join(', ') + ')') - } - setFunctionPanel(() => functions) + }) + registerEvent && registerEvent('functionsStackUpdate', (stack) => { + if (stack === null || stack.length === 0) return + const functions = [] + + for (const func of stack) { + functions.push(func.functionDefinition.name + '(' + func.inputs.join(', ') + ')') + } + setFunctionPanel(() => functions) + }) + registerEvent && registerEvent('traceUnloaded', () => { + setStepDetail(() => { + return { 'vm trace step': '-', 'execution step': '-', 'add memory': '', 'gas': '', 'remaining gas': '-', 'loaded address': '-' } }) - vmDebuggerLogic.event.register('traceUnloaded', () => { - setStepDetail(() => { - return { 'vm trace step': '-', 'execution step': '-', 'add memory': '', 'gas': '', 'remaining gas': '-', 'loaded address': '-' } - }) + }) + registerEvent && registerEvent('newTraceLoaded', () => { + setStepDetail(() => { + return { 'vm trace step': '-', 'execution step': '-', 'add memory': '', 'gas': '', 'remaining gas': '-', 'loaded address': '-' } }) - vmDebuggerLogic.event.register('newTraceLoaded', () => { - setStepDetail(() => { - return { 'vm trace step': '-', 'execution step': '-', 'add memory': '', 'gas': '', 'remaining gas': '-', 'loaded address': '-' } - }) + }) + registerEvent && registerEvent('traceCurrentStepUpdate', (error, step) => { + setStepDetail(prevState => { + return { ...prevState, 'execution step': (error ? '-' : step) } }) - vmDebuggerLogic.event.register('traceCurrentStepUpdate', (error, step) => { - setStepDetail(prevState => { - return { ...prevState, 'execution step': (error ? '-' : step) } - }) + }) + registerEvent && registerEvent('traceMemExpandUpdate', (error, addmem) => { + setStepDetail(prevState => { + return { ...prevState, 'add memory': (error ? '-' : addmem) } }) - vmDebuggerLogic.event.register('traceMemExpandUpdate', (error, addmem) => { - setStepDetail(prevState => { - return { ...prevState, 'add memory': (error ? '-' : addmem) } - }) + }) + registerEvent && registerEvent('traceStepCostUpdate', (error, gas) => { + setStepDetail(prevState => { + return { ...prevState, 'gas': (error ? '-' : gas) } }) - vmDebuggerLogic.event.register('traceStepCostUpdate', (error, gas) => { - setStepDetail(prevState => { - return { ...prevState, 'gas': (error ? '-' : gas) } - }) + }) + registerEvent && registerEvent('traceCurrentCalledAddressAtUpdate', (error, address) => { + setStepDetail(prevState => { + return { ...prevState, 'loaded address': (error ? '-' : address) } }) - vmDebuggerLogic.event.register('traceCurrentCalledAddressAtUpdate', (error, address) => { - setStepDetail(prevState => { - return { ...prevState, 'loaded address': (error ? '-' : address) } - }) + }) + registerEvent && registerEvent('traceRemainingGasUpdate', (error, remainingGas) => { + setStepDetail(prevState => { + return { ...prevState, 'remaining gas': (error ? '-' : remainingGas) } }) - vmDebuggerLogic.event.register('traceRemainingGasUpdate', (error, remainingGas) => { - setStepDetail(prevState => { - return { ...prevState, 'remaining gas': (error ? '-' : remainingGas) } - }) + }) + registerEvent && registerEvent('indexUpdate', (index) => { + setStepDetail(prevState => { + return { ...prevState, 'vm trace step': index } }) - vmDebuggerLogic.event.register('indexUpdate', (index) => { - setStepDetail(prevState => { - return { ...prevState, 'vm trace step': index } - }) + }) + registerEvent && registerEvent('solidityState', (calldata) => { + setSolidityState(() => { + return { ...solidityState, calldata } }) - vmDebuggerLogic.event.register('solidityState', (calldata) => { - setSolidityState(() => { - return { ...solidityState, calldata } - }) + }) + registerEvent && registerEvent('solidityStateMessage', (message) => { + setSolidityState(() => { + return { ...solidityState, message } }) - vmDebuggerLogic.event.register('solidityStateMessage', (message) => { - setSolidityState(() => { - return { ...solidityState, message } - }) + }) + registerEvent && registerEvent('solidityLocals', (calldata) => { + setSolidityLocals(() => { + return { ...solidityLocals, calldata } }) - vmDebuggerLogic.event.register('solidityLocals', (calldata) => { - setSolidityLocals(() => { - return { ...solidityLocals, calldata } - }) + }) + registerEvent && registerEvent('solidityLocalsMessage', (message) => { + setSolidityLocals(() => { + return { ...solidityLocals, message } }) - vmDebuggerLogic.event.register('solidityLocalsMessage', (message) => { - setSolidityLocals(() => { - return { ...solidityLocals, message } - }) - }) - ready() - } - }, [vmDebuggerLogic]) + }) + }, [registerEvent]) return (
    - - - + + {/* + */}
    -
    -
    + {/*
    +
    */}
    ) From 4212cae3445a35b280a92f2205ecf84a55069c3b Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Wed, 21 Oct 2020 16:48:48 +0100 Subject: [PATCH 38/63] Fixed wrong formatting --- .../src/lib/vm-debugger/dropdown-panel.tsx | 93 ++++++++++++------- .../src/lib/vm-debugger/function-panel.tsx | 3 +- .../src/lib/vm-debugger/solidity-locals.tsx | 14 ++- .../src/lib/vm-debugger/vm-debugger-head.tsx | 4 +- libs/remix-ui/debugger-ui/src/types/index.ts | 2 +- 5 files changed, 75 insertions(+), 41 deletions(-) diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx index 2b2c3e74d68..6bffe3ef5e9 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx @@ -1,15 +1,45 @@ import React, { useState, useRef, useEffect } from 'react' import { TreeView, TreeViewItem } from '@remix-ui/tree-view' -import useExtractData from '../../hooks/extract-data' -import { DropdownPanelProps, ExtractData } from '../../types' +import { DropdownPanelProps, ExtractData, ExtractFunc } from '../../types' import { CopyToClipboard } from '@remix-ui/clipboard' - - +import { default as deepequal } from 'deep-equal' import './styles/dropdown-panel.css' export const DropdownPanel = (props: DropdownPanelProps) => { const { dropdownName, dropdownMessage, calldata, header, loading, extractFunc, formatSelfFunc } = props - const data = useExtractData(calldata, extractFunc) + const extractDataDefault: ExtractFunc = (item, parent?) => { + const ret: ExtractData = {} + + if (item instanceof Array) { + ret.children = item.map((item, index) => { + return {key: index, value: item} + }) + ret.self = 'Array' + ret.isNode = true + ret.isLeaf = false + } else if (item instanceof Object) { + ret.children = Object.keys(item).map((key) => { + return {key: key, value: item[key]} + }) + ret.self = 'Object' + ret.isNode = true + ret.isLeaf = false + } else { + ret.self = item + ret.children = null + ret.isNode = false + ret.isLeaf = true + } + return ret + } + const formatSelfDefault = (key: string | number, data: ExtractData) => { + return ( +
    + + +
    + ) + } const [state, setState] = useState({ header: '', toggleDropdown: false, @@ -26,11 +56,12 @@ export const DropdownPanel = (props: DropdownPanelProps) => { display: 'none' }, copiableContent: '', - updating: false + updating: false, + data: null }) useEffect(() => { - update(calldata) + if (!deepequal(state.data, calldata)) update(calldata) }, [calldata]) useEffect(() => { @@ -101,39 +132,30 @@ export const DropdownPanel = (props: DropdownPanelProps) => { display: isEmpty ? 'block' : 'none' }, updating: false, - toggleDropdown: !isEmpty + toggleDropdown: !isEmpty, + data: calldata } }) } - const formatSelfDefault = (key: string, data: ExtractData) => { - return ( -
    - - -
    - ) - } - - const renderData = (item: ExtractData, key: string) => { - const children = (item.children || []).map((child, index) => { - const childKey = key + '/' + child.key - + const renderData = (item: ExtractData, parent, key: string | number, keyPath: string) => { + const data = extractFunc ? extractFunc(item, parent) : extractDataDefault(item, parent) + const children = (data.children || []).map((child) => { return ( - - { renderData(child.value, childKey) } - + renderData(child.value, data, child.key, keyPath + '/' + child.key) ) }) if (children && children.length > 0 ) { return ( - - { children } - + + + { children } + + ) } else { - return + return } } @@ -149,13 +171,14 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
    - { data.map((item, index) => { - return ( - - { renderData(item.data, item.key) } - - ) - }) } + { + state.data && + + { + Object.keys(state.data).map((innerkey) => renderData(state.data[innerkey], state.data, innerkey, innerkey)) + } + + }
    { state.message.innerText }
    diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx index dd5c666bf0b..333c79dedce 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx @@ -1,11 +1,12 @@ import React, { useState, useEffect } from 'react' import DropdownPanel from './dropdown-panel' +import { default as deepequal } from 'deep-equal' export const FunctionPanel = ({ data }) => { const [calldata, setCalldata] = useState(null) useEffect(() => { - setCalldata(data) + if (!deepequal(calldata, data)) setCalldata(data) }, [data]) return ( diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx index 175a8284b89..b6439c8f9f5 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx @@ -1,9 +1,16 @@ -import React from 'react' +import React, { useState, useEffect } from 'react' import DropdownPanel from './dropdown-panel' import { extractData } from '../../utils/solidityTypeFormatter' import { ExtractData } from '../../types' +import { default as deepequal } from 'deep-equal' -export const SolidityLocals = ({ calldata, message }) => { +export const SolidityLocals = ({ data, message }) => { + const [calldata, setCalldata] = useState(null) + + useEffect(() => { + console.log('data: ', data) + if (!deepequal(calldata, data)) setCalldata(data) + }, [data]) const formatSelf = (key: string, data: ExtractData) => { let color = 'var(--primary)' @@ -21,6 +28,9 @@ export const SolidityLocals = ({ calldata, message }) => { } else if (data.self == 0x0) { // eslint-disable-line color = 'var(--gray)' } + if (data.type === 'string') { + data.self = JSON.stringify(data.self) + } return (