Merge branch 'master' into bunsenstraat-patch-1

pull/725/head
yann300 4 years ago committed by GitHub
commit 8f367ad1de
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 4
      .github/workflows/rebase-pull-requests.yml
  2. 2
      apps/remix-ide/src/app/ui/TreeView.js
  3. 2
      apps/remix-ide/src/app/ui/styles/modaldialog-styles.js
  4. 35
      libs/remix-solidity/src/compiler/compiler.ts
  5. 2
      libs/remix-tests/package.json
  6. 42
      libs/remix-tests/src/compiler.ts
  7. 56
      libs/remix-tests/src/run.ts
  8. 7
      libs/remix-tests/src/runTestFiles.ts
  9. 2
      libs/remix-tests/src/types.ts
  10. 99
      libs/remix-tests/tests/testRunner.cli.spec.ts
  11. 2
      libs/remix-tests/tests/testRunner.spec.ts
  12. 262
      libs/remix-ui/debugger-ui/.eslintrc
  13. 2
      libs/remix-ui/debugger-ui/jest.config.js
  14. 100
      libs/remix-ui/debugger-ui/src/hooks/extract-data.tsx
  15. 6
      libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx
  16. 109
      libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
  17. 10
      libs/remix-ui/debugger-ui/src/lib/idebugger-api.ts
  18. 22
      libs/remix-ui/debugger-ui/src/lib/slider/slider.tsx
  19. 8
      libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx
  20. 4
      libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx
  21. 104
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx
  22. 16
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/calldata-panel.tsx
  23. 16
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/callstack-panel.tsx
  24. 35
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx
  25. 382
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx
  26. 16
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx
  27. 24
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx
  28. 12
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/memory-panel.tsx
  29. 106
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx
  30. 66
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-state.tsx
  31. 16
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx
  32. 16
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx
  33. 16
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/storage-panel.tsx
  34. 36
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx
  35. 20
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx
  36. 64
      libs/remix-ui/debugger-ui/src/reducers/assembly-items.ts
  37. 76
      libs/remix-ui/debugger-ui/src/reducers/calldata.ts
  38. 2
      libs/remix-ui/debugger-ui/src/types/index.ts
  39. 80
      libs/remix-ui/debugger-ui/src/utils/solidityTypeFormatter.ts
  40. 2
      libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.css
  41. 2
      package.json

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,14 +1,14 @@
import type { CompilationResult, CompilationSource } from '@remix-project/remix-solidity-ts'
import type { CompilationResult, CompilationSource } from '@remix-project/remix-solidity-ts' // eslint-disable-line
export interface DebuggerUIProps {
debuggerAPI: IDebuggerApi
debuggerAPI: IDebuggerApi
}
export interface LineColumnLocation {
start: {
line: number, column: number
},
},
end: {
line: number, column: number
}
@ -39,7 +39,7 @@ export interface TransactionReceipt {
transactionIndex: number
from: string
to: string
contractAddress: string | null
contractAddress: string | null
}
export type onBreakpointClearedListener = (params: string, row: number) => void
@ -63,4 +63,4 @@ export interface IDebuggerApi {
getFile: (path: string) => Promise<string>
setFile: (path: string, content: string) => Promise<void>
getDebugWeb3: () => any // returns an instance of web3.js
}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -30,4 +30,4 @@ export interface DropdownPanelProps {
loadMoreCompletedEvent?: string
}
export type FormatSelfFunc = (key: string | number, data: ExtractData) => JSX.Element
export type FormatSelfFunc = (key: string | number, data: ExtractData) => JSX.Element

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

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

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

Loading…
Cancel
Save