Merge pull request #749 from ethereum/caret
refactoring: style fixes, formating, linter fixespull/725/head^2
yann300
4 years ago
committed by
GitHub
commit
262fdb8c74
@ -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": { |
"env": { |
||||||
"browser": true, |
"browser": true, |
||||||
"commonjs": true, |
"es6": true |
||||||
"es6": true, |
}, |
||||||
"jest": true, |
"extends": "../../../.eslintrc", |
||||||
"node": true |
"globals": { |
||||||
|
"Atomics": "readonly", |
||||||
|
"SharedArrayBuffer": "readonly" |
||||||
}, |
}, |
||||||
"settings": { "react": { "version": "detect" } }, |
"parserOptions": { |
||||||
"plugins": ["import", "jsx-a11y", "react", "react-hooks"], |
"ecmaVersion": 11, |
||||||
"extends": ["../../../.eslintrc"], |
"sourceType": "module" |
||||||
"ignorePatterns": ["!**/*"] |
}, |
||||||
} |
"rules": { |
||||||
|
"standard/no-callback-literal": "off" |
||||||
|
} |
||||||
|
} |
||||||
|
|||||||
@ -1,58 +1,58 @@ |
|||||||
import React, { useState, useEffect } from 'react' |
import React, { useState, useEffect } from 'react' // eslint-disable-line
|
||||||
import { ExtractData, ExtractFunc } from '../types' |
import { ExtractData, ExtractFunc } from '../types' // eslint-disable-line
|
||||||
|
|
||||||
export const useExtractData = (json, extractFunc?: ExtractFunc): Array<{ key: string, data: ExtractData }> => { |
export const useExtractData = (json, extractFunc?: ExtractFunc): Array<{ key: string, data: ExtractData }> => { |
||||||
const [data, setData] = useState([]) |
const [data, setData] = useState([]) |
||||||
|
|
||||||
useEffect(() => { |
useEffect(() => { |
||||||
const data: Array<{ key: string, data: ExtractData }> = Object.keys(json).map((innerKey) => { |
const data: Array<{ key: string, data: ExtractData }> = Object.keys(json).map((innerKey) => { |
||||||
if (extractFunc) { |
if (extractFunc) { |
||||||
return { |
return { |
||||||
key: innerKey, |
key: innerKey, |
||||||
data : extractFunc(json[innerKey], json)
|
data: extractFunc(json[innerKey], json) |
||||||
} |
|
||||||
} else { |
|
||||||
return { |
|
||||||
key: innerKey, |
|
||||||
data: extractDataDefault(json[innerKey], json) |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
setData(data) |
|
||||||
|
|
||||||
return () => { |
|
||||||
setData(null) |
|
||||||
} |
} |
||||||
}, [json, extractFunc]) |
} else { |
||||||
|
return { |
||||||
const extractDataDefault: ExtractFunc = (item, parent?) => { |
key: innerKey, |
||||||
const ret: ExtractData = {} |
data: extractDataDefault(json[innerKey], json) |
||||||
|
|
||||||
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 |
} |
||||||
|
}) |
||||||
|
|
||||||
|
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,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 { initialState, reducer } from '../../reducers/assembly-items' |
||||||
import './styles/assembly-items.css' |
import './styles/assembly-items.css' |
||||||
|
|
||||||
export const AssemblyItems = ({ registerEvent }) => { |
export const AssemblyItems = ({ registerEvent }) => { |
||||||
const [assemblyItems, dispatch] = useReducer(reducer, initialState) |
const [assemblyItems, dispatch] = useReducer(reducer, initialState) |
||||||
const [selectedItem, setSelectedItem] = useState(0) |
const [selectedItem, setSelectedItem] = useState(0) |
||||||
const refs = useRef({}) |
const refs = useRef({}) |
||||||
const asmItemsRef = useRef(null) |
const asmItemsRef = useRef(null) |
||||||
|
|
||||||
useEffect(()=>{ |
useEffect(() => { |
||||||
registerEvent && registerEvent('codeManagerChanged', (code, address, index) => { |
registerEvent && registerEvent('codeManagerChanged', (code, address, index) => { |
||||||
dispatch({ type: 'FETCH_OPCODES_SUCCESS', payload: { code, address, index } }) |
dispatch({ type: 'FETCH_OPCODES_SUCCESS', payload: { code, address, index } }) |
||||||
}) |
}) |
||||||
}, []) |
}, []) |
||||||
|
|
||||||
useEffect(() => { |
useEffect(() => { |
||||||
if (selectedItem !== assemblyItems.index) { |
if (selectedItem !== assemblyItems.index) { |
||||||
indexChanged(assemblyItems.index) |
indexChanged(assemblyItems.index) |
||||||
} |
} |
||||||
}, [assemblyItems.index]) |
}, [assemblyItems.index]) |
||||||
|
|
||||||
const indexChanged = (index: number) => { |
const indexChanged = (index: number) => { |
||||||
if (index < 0) return |
if (index < 0) return |
||||||
let currentItem = refs.current[selectedItem] ? refs.current[selectedItem] : null |
let currentItem = refs.current[selectedItem] ? refs.current[selectedItem] : null |
||||||
|
|
||||||
if (currentItem) { |
if (currentItem) { |
||||||
currentItem.removeAttribute('selected') |
currentItem.removeAttribute('selected') |
||||||
currentItem.removeAttribute('style') |
currentItem.removeAttribute('style') |
||||||
if (currentItem.firstChild) { |
if (currentItem.firstChild) { |
||||||
currentItem.firstChild.removeAttribute('style') |
currentItem.firstChild.removeAttribute('style') |
||||||
} |
} |
||||||
const codeView = asmItemsRef.current |
const codeView = asmItemsRef.current |
||||||
|
|
||||||
currentItem = codeView.children[index] |
currentItem = codeView.children[index] |
||||||
currentItem.style.setProperty('border-color', 'var(--primary)') |
currentItem.style.setProperty('border-color', 'var(--primary)') |
||||||
currentItem.style.setProperty('border-style', 'solid') |
currentItem.style.setProperty('border-style', 'solid') |
||||||
currentItem.setAttribute('selected', 'selected') |
currentItem.setAttribute('selected', 'selected') |
||||||
codeView.scrollTop = currentItem.offsetTop - parseInt(codeView.offsetTop) |
codeView.scrollTop = currentItem.offsetTop - parseInt(codeView.offsetTop) |
||||||
setSelectedItem(index) |
setSelectedItem(index) |
||||||
} |
|
||||||
} |
} |
||||||
|
} |
||||||
|
|
||||||
return ( |
return ( |
||||||
<div className="border rounded px-1 mt-1 bg-light"> |
<div className="border rounded px-1 mt-1 bg-light"> |
||||||
<div className='dropdownpanel'> |
<div className='dropdownpanel'> |
||||||
<div className='dropdowncontent'> |
<div className='dropdowncontent'> |
||||||
<div className="pl-2 my-1 small instructions" id='asmitems' ref={asmItemsRef}> |
<div className="pl-2 my-1 small instructions" id='asmitems' ref={asmItemsRef}> |
||||||
{ |
{ |
||||||
assemblyItems.display.map((item, i) => { |
assemblyItems.display.map((item, i) => { |
||||||
return <div className="px-1" key={i} ref={ref => refs.current[i] = ref}><span>{item}</span></div> |
return <div className="px-1" key={i} ref={ref => { refs.current[i] = ref }}><span>{item}</span></div> |
||||||
}) |
}) |
||||||
} |
} |
||||||
</div> |
</div> |
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
</div> |
||||||
) |
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
} |
} |
||||||
|
|
||||||
export default AssemblyItems |
export default AssemblyItems |
||||||
|
|||||||
@ -1,12 +1,12 @@ |
|||||||
import React from 'react' |
import React from 'react' // eslint-disable-line
|
||||||
import DropdownPanel from './dropdown-panel' |
import DropdownPanel from './dropdown-panel' // eslint-disable-line
|
||||||
|
|
||||||
export const CalldataPanel = ({ calldata }) => { |
export const CalldataPanel = ({ calldata }) => { |
||||||
return ( |
return ( |
||||||
<div id='calldatapanel'> |
<div id='calldatapanel'> |
||||||
<DropdownPanel dropdownName='Call Data' calldata={calldata || {}} /> |
<DropdownPanel dropdownName='Call Data' calldata={calldata || {}} /> |
||||||
</div> |
</div> |
||||||
) |
) |
||||||
} |
} |
||||||
|
|
||||||
export default CalldataPanel |
export default CalldataPanel |
||||||
|
|||||||
@ -1,12 +1,12 @@ |
|||||||
import React from 'react' |
import React from 'react' // eslint-disable-line
|
||||||
import DropdownPanel from './dropdown-panel' |
import DropdownPanel from './dropdown-panel' // eslint-disable-line
|
||||||
|
|
||||||
export const CallstackPanel = ({ calldata }) => { |
export const CallstackPanel = ({ calldata }) => { |
||||||
return ( |
return ( |
||||||
<div id='callstackpanel'> |
<div id='callstackpanel'> |
||||||
<DropdownPanel dropdownName='Call Stack' calldata={calldata || {}} /> |
<DropdownPanel dropdownName='Call Stack' calldata={calldata || {}} /> |
||||||
</div> |
</div> |
||||||
) |
) |
||||||
} |
} |
||||||
|
|
||||||
export default CallstackPanel |
export default CallstackPanel |
||||||
|
|||||||
@ -1,211 +1,211 @@ |
|||||||
import React, { useState, useEffect, useReducer } from 'react' |
import React, { useState, useEffect, useReducer } from 'react' // eslint-disable-line
|
||||||
import { TreeView, TreeViewItem } from '@remix-ui/tree-view' |
import { TreeView, TreeViewItem } from '@remix-ui/tree-view' // eslint-disable-line
|
||||||
import { DropdownPanelProps, ExtractData, ExtractFunc } from '../../types' |
import { DropdownPanelProps, ExtractData, ExtractFunc } from '../../types' // eslint-disable-line
|
||||||
import { CopyToClipboard } from '@remix-ui/clipboard' |
import { CopyToClipboard } from '@remix-ui/clipboard' // eslint-disable-line
|
||||||
import { initialState, reducer } from '../../reducers/calldata' |
import { initialState, reducer } from '../../reducers/calldata' |
||||||
import './styles/dropdown-panel.css' |
import './styles/dropdown-panel.css' |
||||||
|
|
||||||
export const DropdownPanel = (props: DropdownPanelProps) => { |
export const DropdownPanel = (props: DropdownPanelProps) => { |
||||||
const [calldataObj, dispatch] = useReducer(reducer, initialState) |
const [calldataObj, dispatch] = useReducer(reducer, initialState) |
||||||
const { dropdownName, dropdownMessage, calldata, header, loading, extractFunc, formatSelfFunc, registerEvent, triggerEvent, loadMoreEvent, loadMoreCompletedEvent } = props |
const { dropdownName, dropdownMessage, calldata, header, loading, extractFunc, formatSelfFunc, registerEvent, triggerEvent, loadMoreEvent, loadMoreCompletedEvent } = props |
||||||
const extractDataDefault: ExtractFunc = (item, parent?) => { |
const extractDataDefault: ExtractFunc = (item, parent?) => { |
||||||
const ret: ExtractData = {} |
const ret: ExtractData = {} |
||||||
|
|
||||||
if (item instanceof Array) { |
if (item instanceof Array) { |
||||||
ret.children = item.map((item, index) => { |
ret.children = item.map((item, index) => { |
||||||
return {key: index, value: item} |
return { key: index, value: item } |
||||||
}) |
}) |
||||||
ret.self = 'Array' |
ret.self = 'Array' |
||||||
ret.isNode = true |
ret.isNode = true |
||||||
ret.isLeaf = false |
ret.isLeaf = false |
||||||
} else if (item instanceof Object) { |
} else if (item instanceof Object) { |
||||||
ret.children = Object.keys(item).map((key) => { |
ret.children = Object.keys(item).map((key) => { |
||||||
return {key: key, value: item[key]} |
return { key: key, value: item[key] } |
||||||
}) |
}) |
||||||
ret.self = 'Object' |
ret.self = 'Object' |
||||||
ret.isNode = true |
ret.isNode = true |
||||||
ret.isLeaf = false |
ret.isLeaf = false |
||||||
} else { |
} else { |
||||||
ret.self = item |
ret.self = item |
||||||
ret.children = null |
ret.children = null |
||||||
ret.isNode = false |
ret.isNode = false |
||||||
ret.isLeaf = true |
ret.isLeaf = true |
||||||
} |
|
||||||
return ret |
|
||||||
} |
} |
||||||
const formatSelfDefault = (key: string | number, data: ExtractData) => { |
return ret |
||||||
return ( |
} |
||||||
<div className="d-flex mb-1 flex-row label_item"> |
const formatSelfDefault = (key: string | number, data: ExtractData) => { |
||||||
<label className="small font-weight-bold pr-1 label_key">{key}:</label>
|
return ( |
||||||
<label className="m-0 label_value">{data.self}</label> |
<div className="d-flex mb-1 flex-row label_item"> |
||||||
</div> |
<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: { |
message: { |
||||||
innerText: 'No data available.', |
innerText: message, |
||||||
display: 'block' |
display: message ? 'block' : '' |
||||||
}, |
}, |
||||||
dropdownContent: { |
updating: false |
||||||
innerText: '', |
} |
||||||
display: 'none' |
}) |
||||||
|
} |
||||||
|
|
||||||
|
const setLoading = () => { |
||||||
|
setState(prevState => { |
||||||
|
return { |
||||||
|
...prevState, |
||||||
|
message: { |
||||||
|
innerText: '', |
||||||
|
display: 'none' |
||||||
}, |
}, |
||||||
title: { |
dropdownContent: { |
||||||
innerText: '', |
...prevState.dropdownContent, |
||||||
display: 'none' |
display: 'none' |
||||||
}, |
}, |
||||||
copiableContent: '', |
copiableContent: '', |
||||||
updating: false, |
updating: true |
||||||
expandPath: [], |
} |
||||||
data: null |
|
||||||
}) |
}) |
||||||
|
} |
||||||
|
|
||||||
useEffect(() => { |
const update = function (calldata) { |
||||||
registerEvent && registerEvent(loadMoreCompletedEvent, (updatedCalldata) => { |
let isEmpty = !calldata |
||||||
dispatch({ type: 'UPDATE_CALLDATA_SUCCESS', payload: updatedCalldata }) |
|
||||||
}) |
|
||||||
}, []) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
dispatch({ type: 'FETCH_CALLDATA_SUCCESS', payload: calldata }) |
|
||||||
}, [calldata]) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
update(calldata) |
|
||||||
}, [calldataObj.calldata]) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
message(dropdownMessage) |
|
||||||
}, [dropdownMessage]) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
if (loading && !state.updating) setLoading() |
|
||||||
}, [loading]) |
|
||||||
|
|
||||||
const handleToggle = () => { |
|
||||||
setState(prevState => { |
|
||||||
return { |
|
||||||
...prevState, |
|
||||||
toggleDropdown: !prevState.toggleDropdown |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const handleExpand = (keyPath) => { |
|
||||||
if (!state.expandPath.includes(keyPath)) { |
|
||||||
state.expandPath.push(keyPath) |
|
||||||
} else { |
|
||||||
state.expandPath = state.expandPath.filter(path => !path.startsWith(keyPath)) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const message = (message) => { |
|
||||||
if (message === state.message.innerText) return |
|
||||||
setState(prevState => { |
|
||||||
return { |
|
||||||
...prevState, |
|
||||||
message: { |
|
||||||
innerText: message, |
|
||||||
display: message ? 'block' : '' |
|
||||||
}, |
|
||||||
updating: false |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const setLoading = () => { |
if (calldata && Array.isArray(calldata) && calldata.length === 0) isEmpty = true |
||||||
setState(prevState => { |
else if (calldata && Object.keys(calldata).length === 0 && calldata.constructor === Object) isEmpty = true |
||||||
return { |
|
||||||
...prevState, |
|
||||||
message: { |
|
||||||
innerText: '', |
|
||||||
display: 'none' |
|
||||||
}, |
|
||||||
dropdownContent: { |
|
||||||
...prevState.dropdownContent, |
|
||||||
display: 'none' |
|
||||||
}, |
|
||||||
copiableContent: '', |
|
||||||
updating: true |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const update = function (calldata) { |
setState(prevState => { |
||||||
let isEmpty = !calldata ? true : false |
return { |
||||||
|
...prevState, |
||||||
if(calldata && Array.isArray(calldata) && calldata.length === 0) isEmpty = true |
dropdownContent: { |
||||||
else if(calldata && Object.keys(calldata).length === 0 && calldata.constructor === Object) isEmpty = true |
...prevState.dropdownContent, |
||||||
|
display: 'block' |
||||||
setState(prevState => { |
}, |
||||||
return { |
copiableContent: JSON.stringify(calldata, null, '\t'), |
||||||
...prevState, |
message: { |
||||||
dropdownContent: { |
innerText: isEmpty ? 'No data available' : '', |
||||||
...prevState.dropdownContent, |
display: isEmpty ? 'block' : 'none' |
||||||
display: 'block' |
}, |
||||||
}, |
updating: false, |
||||||
copiableContent: JSON.stringify(calldata, null, '\t'), |
toggleDropdown: !isEmpty, |
||||||
message: { |
data: calldata |
||||||
innerText: isEmpty ? 'No data available' : '', |
} |
||||||
display: isEmpty ? 'block' : 'none' |
}) |
||||||
}, |
} |
||||||
updating: false, |
|
||||||
toggleDropdown: !isEmpty, |
const renderData = (item: ExtractData, parent, key: string | number, keyPath: string) => { |
||||||
data: calldata |
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) => { |
if (children && children.length > 0) { |
||||||
const data = extractFunc ? extractFunc(item, parent) : extractDataDefault(item, parent) |
return ( |
||||||
const children = (data.children || []).map((child) => { |
<TreeViewItem id={`treeViewItem${key}`} key={keyPath} label={formatSelfFunc ? formatSelfFunc(key, data) : formatSelfDefault(key, data)} onClick={() => handleExpand(keyPath)} expand={state.expandPath.includes(keyPath)}> |
||||||
return ( |
<TreeView id={`treeView${key}`} key={keyPath}> |
||||||
renderData(child.value, data, child.key, keyPath + '/' + child.key) |
{children} |
||||||
) |
{data.hasNext && <TreeViewItem id={'treeViewLoadMore'} data-id={'treeViewLoadMore'} className="cursor_pointer" label="Load more" onClick={() => { triggerEvent(loadMoreEvent, [data.cursor]) }} />} |
||||||
}) |
</TreeView> |
||||||
|
</TreeViewItem> |
||||||
if (children && children.length > 0 ) { |
) |
||||||
return ( |
} else { |
||||||
<TreeViewItem id={`treeViewItem${key}`} key={keyPath} label={ formatSelfFunc ? formatSelfFunc(key, data) : formatSelfDefault(key, data) } onClick={() => handleExpand(keyPath)} expand={state.expandPath.includes(keyPath)}> |
return <TreeViewItem id={key.toString()} key={keyPath} label={formatSelfFunc ? formatSelfFunc(key, data) : formatSelfDefault(key, data)} onClick={() => handleExpand(keyPath)} expand={state.expandPath.includes(keyPath)} /> |
||||||
<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('') |
|
||||||
|
const uniquePanelName = dropdownName.split(' ').join('') |
||||||
return ( |
|
||||||
<div className="border rounded px-1 mt-1 bg-light"> |
return ( |
||||||
<div className="py-0 px-1 title"> |
<div className="border rounded px-1 mt-1 bg-light"> |
||||||
<div className={state.toggleDropdown ? 'icon fas fa-caret-down' : 'icon fas fa-caret-right'} onClick={handleToggle}></div> |
<div className="py-0 px-1 title"> |
||||||
<div className="name" data-id={`dropdownPanel${uniquePanelName}`} onClick={handleToggle}>{dropdownName}</div><span className="nameDetail" onClick={handleToggle}>{ header }</span> |
<div className={state.toggleDropdown ? 'icon fas fa-caret-down' : 'icon fas fa-caret-right'} onClick={handleToggle}></div> |
||||||
<CopyToClipboard content={state.copiableContent} data-id={`dropdownPanelCopyToClipboard${uniquePanelName}`} /> |
<div className="name" data-id={`dropdownPanel${uniquePanelName}`} onClick={handleToggle}>{dropdownName}</div><span className="nameDetail" onClick={handleToggle}>{header}</span> |
||||||
</div> |
<CopyToClipboard content={state.copiableContent} data-id={`dropdownPanelCopyToClipboard${uniquePanelName}`} /> |
||||||
<div className='dropdownpanel' style={{ display: state.toggleDropdown ? 'block' : 'none' }}> |
</div> |
||||||
<i className="refresh fas fa-sync" style={{ display: state.updating ? 'inline-block' : 'none' }} aria-hidden="true"></i> |
<div className='dropdownpanel' style={{ display: state.toggleDropdown ? 'block' : 'none' }}> |
||||||
<div className='dropdowncontent' style={{ display: state.dropdownContent.display }}> |
<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"> |
state.data && |
||||||
{ |
<TreeView id="treeView"> |
||||||
Object.keys(state.data).map((innerkey) => renderData(state.data[innerkey], state.data, innerkey, innerkey)) |
{ |
||||||
} |
Object.keys(state.data).map((innerkey) => renderData(state.data[innerkey], state.data, innerkey, innerkey)) |
||||||
</TreeView> |
} |
||||||
} |
</TreeView> |
||||||
</div> |
} |
||||||
<div className='dropdownrawcontent' hidden={true}>{ state.copiableContent }</div> |
|
||||||
<div className='message' style={{ display: state.message.display }}>{ state.message.innerText }</div> |
|
||||||
</div> |
|
||||||
</div> |
</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 React from 'react' // eslint-disable-line
|
||||||
import { DropdownPanel } from './dropdown-panel' |
import { DropdownPanel } from './dropdown-panel' // eslint-disable-line
|
||||||
|
|
||||||
export const FullStoragesChanges = ({ calldata }) => { |
export const FullStoragesChanges = ({ calldata }) => { |
||||||
return ( |
return ( |
||||||
<div id='fullstorageschangespanel'> |
<div id='fullstorageschangespanel'> |
||||||
<DropdownPanel dropdownName='Full Storages Changes' calldata={ calldata || {}} /> |
<DropdownPanel dropdownName='Full Storages Changes' calldata={ calldata || {}} /> |
||||||
</div> |
</div> |
||||||
) |
) |
||||||
} |
} |
||||||
|
|
||||||
export default FullStoragesChanges |
export default FullStoragesChanges |
||||||
|
|||||||
@ -1,19 +1,19 @@ |
|||||||
import React, { useState, useEffect } from 'react' |
import React, { useState, useEffect } from 'react' // eslint-disable-line
|
||||||
import DropdownPanel from './dropdown-panel' |
import DropdownPanel from './dropdown-panel' // eslint-disable-line
|
||||||
import { default as deepequal } from 'deep-equal' |
import { default as deepequal } from 'deep-equal' // eslint-disable-line
|
||||||
|
|
||||||
export const FunctionPanel = ({ data }) => { |
export const FunctionPanel = ({ data }) => { |
||||||
const [calldata, setCalldata] = useState(null) |
const [calldata, setCalldata] = useState(null) |
||||||
|
|
||||||
useEffect(() => { |
useEffect(() => { |
||||||
if (!deepequal(calldata, data)) setCalldata(data) |
if (!deepequal(calldata, data)) setCalldata(data) |
||||||
}, [data]) |
}, [data]) |
||||||
|
|
||||||
return ( |
return ( |
||||||
<div id="FunctionPanel"> |
<div id='FunctionPanel'> |
||||||
<DropdownPanel dropdownName='Function Stack' calldata={calldata || {}} /> |
<DropdownPanel dropdownName='Function Stack' calldata={calldata || {}} /> |
||||||
</div> |
</div> |
||||||
) |
) |
||||||
} |
} |
||||||
|
|
||||||
export default FunctionPanel |
export default FunctionPanel |
||||||
|
|||||||
@ -1,10 +1,10 @@ |
|||||||
import React from 'react' |
import React from 'react' // eslint-disable-line
|
||||||
import DropdownPanel from './dropdown-panel' |
import DropdownPanel from './dropdown-panel' // eslint-disable-line
|
||||||
|
|
||||||
export const MemoryPanel = ({ calldata }) => { |
export const MemoryPanel = ({ calldata }) => { |
||||||
return ( |
return ( |
||||||
<DropdownPanel dropdownName='Memory' calldata={calldata || {}} /> |
<DropdownPanel dropdownName='Memory' calldata={calldata || {}} /> |
||||||
) |
) |
||||||
} |
} |
||||||
|
|
||||||
export default MemoryPanel |
export default MemoryPanel |
||||||
|
|||||||
@ -1,62 +1,62 @@ |
|||||||
import React, { useState, useEffect } from 'react' |
import React, { useState, useEffect } from 'react' // eslint-disable-line
|
||||||
import DropdownPanel from './dropdown-panel' |
import DropdownPanel from './dropdown-panel' // eslint-disable-line
|
||||||
import { extractData } from '../../utils/solidityTypeFormatter' |
import { extractData } from '../../utils/solidityTypeFormatter' // eslint-disable-line
|
||||||
import { ExtractData } from '../../types' |
import { ExtractData } from '../../types' // eslint-disable-line
|
||||||
|
|
||||||
export const SolidityLocals = ({ data, message, registerEvent, triggerEvent }) => { |
export const SolidityLocals = ({ data, message, registerEvent, triggerEvent }) => { |
||||||
const [calldata, setCalldata] = useState(null) |
const [calldata, setCalldata] = useState(null) |
||||||
|
|
||||||
useEffect(() => { |
useEffect(() => { |
||||||
data && setCalldata(data) |
data && setCalldata(data) |
||||||
}, [data]) |
}, [data]) |
||||||
|
|
||||||
const formatSelf = (key: string, data: ExtractData) => { |
const formatSelf = (key: string, data: ExtractData) => { |
||||||
let color = 'var(--primary)' |
let color = 'var(--primary)' |
||||||
if (data.isArray || data.isStruct || data.isMapping) { |
if (data.isArray || data.isStruct || data.isMapping) { |
||||||
color = 'var(--info)' |
color = 'var(--info)' |
||||||
} else if ( |
} else if ( |
||||||
data.type.indexOf('uint') === 0 || |
data.type.indexOf('uint') === 0 || |
||||||
data.type.indexOf('int') === 0 || |
data.type.indexOf('int') === 0 || |
||||||
data.type.indexOf('bool') === 0 || |
data.type.indexOf('bool') === 0 || |
||||||
data.type.indexOf('enum') === 0 |
data.type.indexOf('enum') === 0 |
||||||
) { |
) { |
||||||
color = 'var(--green)' |
color = 'var(--green)' |
||||||
} else if (data.type === 'string') { |
} else if (data.type === 'string') { |
||||||
color = 'var(--teal)' |
color = 'var(--teal)' |
||||||
} else if (data.self == 0x0) { // eslint-disable-line
|
} else if (data.self == 0x0) { // eslint-disable-line
|
||||||
color = 'var(--gray)' |
color = 'var(--gray)' |
||||||
} |
} |
||||||
if (data.type === 'string') { |
if (data.type === 'string') { |
||||||
data.self = JSON.stringify(data.self) |
data.self = JSON.stringify(data.self) |
||||||
} |
|
||||||
return ( |
|
||||||
<label className='mb-0' style={{ color: data.isProperty ? 'var(--info)' : '', whiteSpace: 'pre-wrap' }}> |
|
||||||
{' ' + key}: |
|
||||||
<label className='mb-0' style={{ color }}> |
|
||||||
{' ' + data.self} |
|
||||||
</label> |
|
||||||
<label style={{ fontStyle: 'italic' }}> |
|
||||||
{data.isProperty || !data.type ? '' : ' ' + data.type} |
|
||||||
</label> |
|
||||||
</label> |
|
||||||
) |
|
||||||
} |
} |
||||||
|
|
||||||
return ( |
return ( |
||||||
<div id='soliditylocals' data-id="solidityLocals"> |
<label className='mb-0' style={{ color: data.isProperty ? 'var(--info)' : '', whiteSpace: 'pre-wrap' }}> |
||||||
<DropdownPanel
|
{' ' + key}: |
||||||
dropdownName='Solidity Locals' |
<label className='mb-0' style={{ color }}> |
||||||
dropdownMessage={message} |
{' ' + data.self} |
||||||
calldata={calldata || {}} |
</label> |
||||||
extractFunc={extractData} |
<label style={{ fontStyle: 'italic' }}> |
||||||
formatSelfFunc={formatSelf} |
{data.isProperty || !data.type ? '' : ' ' + data.type} |
||||||
registerEvent={registerEvent} |
</label> |
||||||
triggerEvent={triggerEvent} |
</label> |
||||||
loadMoreEvent='solidityLocalsLoadMore' |
|
||||||
loadMoreCompletedEvent='solidityLocalsLoadMoreCompleted' |
|
||||||
/> |
|
||||||
</div> |
|
||||||
) |
) |
||||||
|
} |
||||||
|
|
||||||
|
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 React from 'react' // eslint-disable-line
|
||||||
import DropdownPanel from './dropdown-panel' |
import DropdownPanel from './dropdown-panel' // eslint-disable-line
|
||||||
import { extractData } from '../../utils/solidityTypeFormatter' |
import { extractData } from '../../utils/solidityTypeFormatter' |
||||||
import { ExtractData } from '../../types' |
import { ExtractData } from '../../types' // eslint-disable-line
|
||||||
|
|
||||||
export const SolidityState = ({ calldata, message }) => { |
export const SolidityState = ({ calldata, message }) => { |
||||||
const formatSelf = (key: string, data: ExtractData) => { |
const formatSelf = (key: string, data: ExtractData) => { |
||||||
let color = 'var(--primary)' |
let color = 'var(--primary)' |
||||||
if (data.isArray || data.isStruct || data.isMapping) { |
if (data.isArray || data.isStruct || data.isMapping) { |
||||||
color = 'var(--info)' |
color = 'var(--info)' |
||||||
} else if ( |
} else if ( |
||||||
data.type.indexOf('uint') === 0 || |
data.type.indexOf('uint') === 0 || |
||||||
data.type.indexOf('int') === 0 || |
data.type.indexOf('int') === 0 || |
||||||
data.type.indexOf('bool') === 0 || |
data.type.indexOf('bool') === 0 || |
||||||
data.type.indexOf('enum') === 0 |
data.type.indexOf('enum') === 0 |
||||||
) { |
) { |
||||||
color = 'var(--green)' |
color = 'var(--green)' |
||||||
} else if (data.type === 'string') { |
} else if (data.type === 'string') { |
||||||
color = 'var(--teal)' |
color = 'var(--teal)' |
||||||
} else if (data.self == 0x0) { // eslint-disable-line
|
} else if (data.self == 0x0) { // eslint-disable-line
|
||||||
color = 'var(--gray)' |
color = 'var(--gray)' |
||||||
} |
|
||||||
return ( |
|
||||||
<label className='mb-0' style={{ color: data.isProperty ? 'var(--info)' : '', whiteSpace: 'pre-wrap' }}> |
|
||||||
{' ' + key}: |
|
||||||
<label className='mb-0' style={{ color }}> |
|
||||||
{' ' + data.self} |
|
||||||
</label> |
|
||||||
<label style={{ fontStyle: 'italic' }}> |
|
||||||
{data.isProperty || !data.type ? '' : ' ' + data.type} |
|
||||||
</label> |
|
||||||
</label> |
|
||||||
) |
|
||||||
} |
} |
||||||
|
|
||||||
return ( |
return ( |
||||||
<div id='soliditystate' data-id='soliditystate'> |
<label className='mb-0' style={{ color: data.isProperty ? 'var(--info)' : '', whiteSpace: 'pre-wrap' }}> |
||||||
{ |
{' ' + key}: |
||||||
<DropdownPanel dropdownName='Solidity State' calldata={calldata || {}} formatSelfFunc={formatSelf} extractFunc={extractData} /> |
<label className='mb-0' style={{ color }}> |
||||||
} |
{' ' + data.self} |
||||||
</div> |
</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 React from 'react' // eslint-disable-line
|
||||||
import DropdownPanel from './dropdown-panel' |
import DropdownPanel from './dropdown-panel' // eslint-disable-line
|
||||||
|
|
||||||
export const StackPanel = ({ calldata }) => { |
export const StackPanel = ({ calldata }) => { |
||||||
return ( |
return ( |
||||||
<div id="stackpanel"> |
<div id='stackpanel'> |
||||||
<DropdownPanel dropdownName='Stack' calldata={calldata || {}} /> |
<DropdownPanel dropdownName='Stack' calldata={calldata || {}} /> |
||||||
</div> |
</div> |
||||||
) |
) |
||||||
} |
} |
||||||
|
|
||||||
export default StackPanel |
export default StackPanel |
||||||
|
|||||||
@ -1,12 +1,12 @@ |
|||||||
import React from 'react' |
import React from 'react' // eslint-disable-line
|
||||||
import DropdownPanel from './dropdown-panel' |
import DropdownPanel from './dropdown-panel' // eslint-disable-line
|
||||||
|
|
||||||
export const StepDetail = ({ stepDetail }) => { |
export const StepDetail = ({ stepDetail }) => { |
||||||
return ( |
return ( |
||||||
<div id='stepdetail' data-id="stepdetail"> |
<div id='stepdetail' data-id='stepdetail'> |
||||||
<DropdownPanel dropdownName='Step details' calldata={stepDetail || {}} /> |
<DropdownPanel dropdownName='Step details' calldata={stepDetail || {}} /> |
||||||
</div> |
</div> |
||||||
) |
) |
||||||
} |
} |
||||||
|
|
||||||
export default StepDetail |
export default StepDetail |
||||||
|
|||||||
@ -1,12 +1,12 @@ |
|||||||
import React from 'react' |
import React from 'react' // eslint-disable-line
|
||||||
import DropdownPanel from './dropdown-panel' |
import DropdownPanel from './dropdown-panel' // eslint-disable-line
|
||||||
|
|
||||||
export const StoragePanel = ({ calldata, header }) => { |
export const StoragePanel = ({ calldata, header }) => { |
||||||
return ( |
return ( |
||||||
<div id='storagepanel'> |
<div id='storagepanel'> |
||||||
<DropdownPanel dropdownName='Storage' calldata={calldata || {}} header={header} /> |
<DropdownPanel dropdownName='Storage' calldata={calldata || {}} header={header} /> |
||||||
</div> |
</div> |
||||||
) |
) |
||||||
} |
} |
||||||
|
|
||||||
export default StoragePanel |
export default StoragePanel |
||||||
|
|||||||
@ -1,44 +1,44 @@ |
|||||||
import { BN } from 'ethereumjs-util' |
import { BN } from 'ethereumjs-util' |
||||||
import { ExtractData } from '../types' |
import { ExtractData } from '../types' // eslint-disable-line
|
||||||
|
|
||||||
export function extractData (item, parent): ExtractData { |
export function extractData (item, parent): ExtractData { |
||||||
const ret: ExtractData = {} |
const ret: ExtractData = {} |
||||||
|
|
||||||
if (item.isProperty) { |
if (item.isProperty) { |
||||||
return item |
return item |
||||||
} |
} |
||||||
if (item.type.lastIndexOf(']') === item.type.length - 1) { |
if (item.type.lastIndexOf(']') === item.type.length - 1) { |
||||||
ret.children = (item.value || []).map(function (item, index) { |
ret.children = (item.value || []).map(function (item, index) { |
||||||
return {key: index, value: item} |
return { key: index, value: item } |
||||||
}) |
}) |
||||||
ret.children.unshift({ |
ret.children.unshift({ |
||||||
key: 'length', |
key: 'length', |
||||||
value: { |
value: { |
||||||
self: (new BN(item.length.replace('0x', ''), 16)).toString(10), |
self: (new BN(item.length.replace('0x', ''), 16)).toString(10), |
||||||
type: 'uint', |
type: 'uint', |
||||||
isProperty: true |
isProperty: true |
||||||
} |
} |
||||||
}) |
}) |
||||||
ret.isArray = true |
ret.isArray = true |
||||||
ret.self = parent.isArray ? '' : item.type |
ret.self = parent.isArray ? '' : item.type |
||||||
ret.cursor = item.cursor |
ret.cursor = item.cursor |
||||||
ret.hasNext = item.hasNext |
ret.hasNext = item.hasNext |
||||||
} else if (item.type.indexOf('struct') === 0) { |
} else if (item.type.indexOf('struct') === 0) { |
||||||
ret.children = Object.keys((item.value || {})).map(function (key) { |
ret.children = Object.keys((item.value || {})).map(function (key) { |
||||||
return {key: key, value: item.value[key]} |
return { key: key, value: item.value[key] } |
||||||
}) |
}) |
||||||
ret.self = item.type |
ret.self = item.type |
||||||
ret.isStruct = true |
ret.isStruct = true |
||||||
} else if (item.type.indexOf('mapping') === 0) { |
} else if (item.type.indexOf('mapping') === 0) { |
||||||
ret.children = Object.keys((item.value || {})).map(function (key) { |
ret.children = Object.keys((item.value || {})).map(function (key) { |
||||||
return {key: key, value: item.value[key]} |
return { key: key, value: item.value[key] } |
||||||
}) |
}) |
||||||
ret.isMapping = true |
ret.isMapping = true |
||||||
ret.self = item.type |
ret.self = item.type |
||||||
} else { |
} else { |
||||||
ret.children = null |
ret.children = null |
||||||
ret.self = item.value |
ret.self = item.value |
||||||
ret.type = item.type |
ret.type = item.type |
||||||
} |
} |
||||||
return ret |
return ret |
||||||
} |
} |
||||||
|
|||||||
Loading…
Reference in new issue