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": { |
||||
"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" |
||||
} |
||||
} |
||||
|
||||
@ -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 |
||||
@ -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) |
||||
} |
||||
|
||||
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> |
||||
}, [assemblyItems.index]) |
||||
|
||||
const indexChanged = (index: number) => { |
||||
if (index < 0) return |
||||
let currentItem = refs.current[selectedItem] ? refs.current[selectedItem] : null |
||||
|
||||
if (currentItem) { |
||||
currentItem.removeAttribute('selected') |
||||
currentItem.removeAttribute('style') |
||||
if (currentItem.firstChild) { |
||||
currentItem.firstChild.removeAttribute('style') |
||||
} |
||||
const codeView = asmItemsRef.current |
||||
|
||||
currentItem = codeView.children[index] |
||||
currentItem.style.setProperty('border-color', 'var(--primary)') |
||||
currentItem.style.setProperty('border-style', 'solid') |
||||
currentItem.setAttribute('selected', 'selected') |
||||
codeView.scrollTop = currentItem.offsetTop - parseInt(codeView.offsetTop) |
||||
setSelectedItem(index) |
||||
} |
||||
} |
||||
|
||||
return ( |
||||
<div className="border rounded px-1 mt-1 bg-light"> |
||||
<div className='dropdownpanel'> |
||||
<div className='dropdowncontent'> |
||||
<div className="pl-2 my-1 small instructions" id='asmitems' ref={asmItemsRef}> |
||||
{ |
||||
assemblyItems.display.map((item, i) => { |
||||
return <div className="px-1" key={i} ref={ref => { refs.current[i] = ref }}><span>{item}</span></div> |
||||
}) |
||||
} |
||||
</div> |
||||
</div> |
||||
) |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
export default AssemblyItems |
||||
@ -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 |
||||
@ -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 |
||||
@ -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 |
||||
@ -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 |
||||
@ -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 |
||||
@ -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 |
||||
@ -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 |
||||
@ -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 |
||||
@ -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 |
||||
@ -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 |
||||
@ -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 |
||||
} |
||||
Loading…
Reference in new issue