mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

completed move to react

Browse Source
pull/453/head
ioedeveloper 4 years ago
parent 79852f1468
commit 46a6a7c45f
12 changed files with 291 additions and 249 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 40
      apps/remix-ide/src/app/tabs/debugger-tab.js
  2. 25
      apps/remix-ide/src/app/tabs/debugger/debuggerUI.js
  3. 4
      libs/remix-ui/debugger-ui/src/index.ts
  4. 165
      libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
  5. 20
      libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx
  6. 2
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx
  7. 117
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx
  8. 133
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx
  9. 2
      libs/remix-ui/utils/src/index.ts
  10. 0
      libs/remix-ui/utils/src/lib/should-render.css
  11. 11
      libs/remix-ui/utils/src/lib/should-render.spec.tsx
  12. 21
      libs/remix-ui/utils/src/lib/should-render.tsx

40
apps/remix-ide/src/app/tabs/debugger-tab.js
Unescape View File

@ -2,9 +2,12 @@ const yo = require('yo-yo')
const remixDebug = require('@remix-project/remix-debug')
const css = require('./styles/debugger-tab-styles')
import toaster from '../ui/tooltip'
const DebuggerUI = require('./debugger/debuggerUI')
import { DebuggerUI } from '@remix-ui/debugger-ui'
// const DebuggerUI = require('./debugger/debuggerUI')
import { ViewPlugin } from '@remixproject/engine'
import * as packageJson from '../../../../../package.json'
import React from 'react'
import ReactDOM from 'react-dom'
const profile = {
name: 'debugger',
@ -25,6 +28,9 @@ class DebuggerTab extends ViewPlugin {
super(profile)
this.el = null
this.blockchain = blockchain
this.debugHash = null
this.getTraceHash = null
this.removeHighlights = false
}
render () {
@ -55,14 +61,18 @@ class DebuggerTab extends ViewPlugin {
toaster(yo`<div><b>Source verification plugin not activated or not available.</b> continuing <i>without</i> source code debugging.</div>`)
})
this.debuggerUI = new DebuggerUI(
this,
this.el.querySelector('#debugger'),
(address, receipt) => {
const target = (address && remixDebug.traceHelper.isContractCreation(address)) ? receipt.contractAddress : address
return this.call('fetchAndCompile', 'resolve', target || receipt.contractAddress || receipt.to, '.debug', this.blockchain.web3())
}
)
ReactDOM.render(
<DebuggerUI
debuggerModule={this}
fetchContractAndCompile={(address, receipt) => {
const target = (address && remixDebug.traceHelper.isContractCreation(address)) ? receipt.contractAddress : address
return this.call('fetchAndCompile', 'resolve', target || receipt.contractAddress || receipt.to, '.debug', this.blockchain.web3())
}}
debugHash={this.debugHash}
getTraceHash={this.getTraceHash}
/>
, this.el)
this.call('manager', 'activatePlugin', 'source-verification').catch(e => console.log(e.message))
// this.call('manager', 'activatePlugin', 'udapp')
@ -71,21 +81,21 @@ class DebuggerTab extends ViewPlugin {
}
deactivate () {
this.debuggerUI.deleteHighlights()
this.removeHighlights = true
super.deactivate()
}
debug (hash) {
if (this.debuggerUI) this.debuggerUI.debug(hash)
this.debugHash = hash
}
getTrace (hash) {
return this.debuggerUI.getTrace(hash)
this.getTraceHash = hash
}
debugger () {
return this.debuggerUI
}
// debugger () {
// return this.debuggerUI
// }
}
module.exports = DebuggerTab

25
apps/remix-ide/src/app/tabs/debugger/debuggerUI.js
Unescape View File

@ -1,7 +1,3 @@
import React from 'react'
import ReactDOM from 'react-dom'
import { TreeView, TreeViewItem } from '@remix-ui/tree-view'
var TxBrowser = require('./debuggerUI/TxBrowser')
var StepManagerUI = require('./debuggerUI/StepManager')
var VmDebugger = require('./debuggerUI/VmDebugger')
@ -247,7 +243,6 @@ class DebuggerUI {
${this.debuggerHeadPanelsView}
<div class="${css.statusMessage}">${this.statusMessage}</div>
${this.debuggerPanelsView}
<div id="treeViewReact"></div>
</div>
`
if (!this.view) {
@ -277,26 +272,6 @@ class DebuggerUI {
yo.update(this.debuggerHeadPanelsView, this.vmDebugger.renderHead())
yo.update(this.debuggerPanelsView, this.vmDebugger.render())
yo.update(this.stepManagerView, this.stepManager.render())
ReactDOM.render(
<TreeView>
<TreeViewItem label="Item 1" />
<TreeViewItem label={<strong style={{ color: 'blue' }}>Item 2</strong>} />
<TreeViewItem label="Item 3">
<TreeView>
<TreeViewItem label="Nested 1" />
<TreeViewItem label="Nested 2" />
<TreeViewItem label="Nested 3">
<TreeView>
<TreeViewItem label="Sub Nested 1" />
<TreeViewItem label="Sub Nested 2" />
</TreeView>
</TreeViewItem>
<TreeViewItem label="Nested 4" />
</TreeView>
</TreeViewItem>
<TreeViewItem label="Item 4" />
</TreeView>
, document.getElementById('treeViewReact'))
}
}

4
libs/remix-ui/debugger-ui/src/index.ts
Unescape View File

@ -1,3 +1 @@
import StepManager from './lib/step-manager/step-manager'
export { StepManager }
export * from './lib/debugger-ui'

165
libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
Unescape View File

@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'
import TxBrowser from './tx-browser/tx-browser'
import StepManager from './step-manager/step-manager'
import VmDebugger from './vm-debugger/vm-debugger'
import VmDebuggerHead from './vm-debugger/vm-debugger-head'
import remixDebug, { TransactionDebugger as Debugger } from '@remix-project/remix-debug'
/* eslint-disable-next-line */
import toaster from '../../../../../apps/remix-ide/src/app/ui/tooltip'
@ -13,7 +14,7 @@ import EventManager from '../../../../../apps/remix-ide/src/lib/events'
import globalRegistry from '../../../../../apps/remix-ide/src/global/registry'
import './debugger-ui.css'
const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => {
export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash, getTraceHash, removeHighlights }) => {
const event = new EventManager()
const sourceHighlighter = new SourceHighlighter()
const init = remixDebug.init
@ -26,7 +27,13 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => {
to: null
},
blockNumber: null,
txNumber: null
txNumber: null,
visibility: {
vmDebugger: false,
stepManager: false,
txBrowser: false
},
debugging: false
})
useEffect(() => {
@ -37,22 +44,35 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => {
if (state.debugger) state.debugger.breakPointManager.remove({fileName: fileName, row: row})
})
this.editor.event.register('breakpointAdded', (fileName, row) => {
editor.event.register('breakpointAdded', (fileName, row) => {
if (state.debugger) state.debugger.breakPointManager.add({fileName: fileName, row: row})
})
this.editor.event.register('contentChanged', () => {
editor.event.register('contentChanged', () => {
if (state.debugger) state.debugger.unload()
})
}
setEditor()
return unLoad()
}, [])
const listenToEvents = () => {
if (!state.debugger) return
useEffect(() => {
debug(debugHash)
}, [debugHash])
state.debugger.event.register('debuggerStatus', async (isActive) => {
useEffect(() => {
getTrace(getTraceHash)
}, [getTraceHash])
useEffect(() => {
if (removeHighlights) deleteHighlights()
}, [removeHighlights])
const listenToEvents = (debuggerInstance) => {
if (!debuggerInstance) return
debuggerInstance.event.register('debuggerStatus', async (isActive) => {
await debuggerModule.call('editor', 'discardHighlight')
setState(prevState => {
return {
@ -62,7 +82,7 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => {
})
})
state.debugger.event.register('newSourceLocation', async (lineColumnPos, rawLocation) => {
debuggerInstance.event.register('newSourceLocation', async (lineColumnPos, rawLocation) => {
const contracts = await fetchContractAndCompile(
state.currentReceipt.contractAddress || state.currentReceipt.to,
state.currentReceipt)
@ -77,7 +97,14 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => {
}
})
// state.debugger.event.register('debuggerUnloaded', () => this.unLoad())
debuggerInstance.event.register('debuggerUnloaded', () => unLoad())
setState(prevState => {
return {
...prevState,
debugger: debuggerInstance
}
})
}
const requestDebug = (blockNumber, txNumber, tx) => {
@ -89,7 +116,11 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => {
if (state.debugger) state.debugger.unload()
}
const getDebugWeb3 = () => {
const isDebuggerActive = () => {
return state.isActive
}
const getDebugWeb3 = (): Promise<any> => {
return new Promise((resolve, reject) => {
debuggerModule.blockchain.detectNetwork((error, network) => {
let web3
@ -105,41 +136,44 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => {
})
}
const unLoad = async () => {
const unLoad = () => {
// yo.update(this.debuggerHeadPanelsView, yo`<div></div>`)
// yo.update(this.debuggerPanelsView, yo`<div></div>`)
// yo.update(this.stepManagerView, yo`<div></div>`)
if (this.vmDebugger) this.vmDebugger.remove()
if (this.stepManager) this.stepManager.remove()
if (this.txBrowser) this.txBrowser.setState({debugging: false})
this.vmDebugger = null
this.stepManager = null
if (this.debugger) delete this.debugger
this.event.trigger('traceUnloaded')
setState(prevState => {
const { visibility } = prevState
return {
...prevState,
debugger: null,
debugging: false,
visibility: {
...visibility,
vmDebugger: false,
stepManager: false
}
}
})
event.trigger('traceUnloaded', [])
}
const startDebugging = async (blockNumber, txNumber, tx) => {
if (state.debugger) unLoad()
const web3 = await this.getDebugWeb3()
setState({
...state,
currentReceipt: await web3.eth.getTransactionReceipt(txNumber),
debugger: new Debugger({
web3,
offsetToLineColumnConverter: globalRegistry.get('offsettolinecolumnconverter').api,
compilationResult: async (address) => {
try {
return await fetchContractAndCompile(address, this.currentReceipt)
} catch (e) {
console.error(e)
}
return null
const web3 = await getDebugWeb3()
const currentReceipt = await web3.eth.getTransactionReceipt(txNumber)
const debuggerInstance = new Debugger({
web3,
offsetToLineColumnConverter: globalRegistry.get('offsettolinecolumnconverter').api,
compilationResult: async (address) => {
try {
return await fetchContractAndCompile(address, currentReceipt)
} catch (e) {
console.error(e)
}
})
return null
}
})
listenToEvents()
state.debugger.debug(blockNumber, txNumber, tx, () => {
debuggerInstance.debug(blockNumber, txNumber, tx, () => {
// this.stepManager = new StepManagerUI(this.debugger.step_manager)
// this.vmDebugger = new VmDebugger(this.debugger.vmDebuggerLogic)
setState(prevState => {
@ -147,20 +181,71 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => {
...prevState,
blockNumber,
txNumber,
debugging: true
debugging: true,
currentReceipt
}
})
this.renderDebugger()
listenToEvents(debuggerInstance)
// this.renderDebugger()
}).catch((error) => {
toaster(error, null, null)
unLoad()
})
}
const debug = (txHash) => {
startDebugging(null, txHash, null)
}
const getTrace = (hash) => {
return new Promise(async (resolve, reject) => { /* eslint-disable-line */
const web3 = await getDebugWeb3()
const currentReceipt = await web3.eth.getTransactionReceipt(hash)
setState(prevState => {
return {
...prevState,
currentReceipt
}
})
const debug = new Debugger({
web3,
offsetToLineColumnConverter: globalRegistry.get('offsettolinecolumnconverter').api,
compilationResult: async (address) => {
try {
return await fetchContractAndCompile(address, state.currentReceipt)
} catch (e) {
console.error(e)
}
return null
}
})
debug.debugger.traceManager.traceRetriever.getTrace(hash, (error, trace) => {
if (error) return reject(error)
resolve(trace)
})
})
}
const deleteHighlights = async () => {
await debuggerModule.call('editor', 'discardHighlight')
}
// this.debuggerPanelsView = yo`<div class="px-2"></div>`
// this.debuggerHeadPanelsView = yo`<div class="px-2"></div>`
// this.stepManagerView = yo`<div class="px-2"></div>`
return (
<div>
<h1>Welcome to debugger-ui!</h1>
</div>
<div>
<div className="px-2">
<TxBrowser requestDebug={requestDebug} unloadRequested={unloadRequested} />
{/* <StepManager stepManager={state.debugger.step_manager} />
<VmDebuggerHead vmDebuggerLogic={state.debugger.vmDebuggerLogic} /> */}
</div>
{/* <div className="statusMessage">{state.statusMessage}</div>
<VmDebugger vmDebuggerLogic={state.debugger.vmDebuggerLogic} /> */}
</div>
)
}

20
libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx
Unescape View File

@ -2,7 +2,7 @@ import React, { useState } from 'react'
import './tx-browser.css'
import EventManager from '../../../../../../apps/remix-ide/src/lib/events'
export const TxBrowser = () => {
export const TxBrowser = ({ requestDebug, unloadRequested }) => {
const event = new EventManager()
const [state, setState] = useState({
txNumber: undefined,
@ -13,21 +13,12 @@ export const TxBrowser = () => {
if (state.debugging) {
unload()
} else {
event.trigger('requestDebug', [undefined, state.txNumber])
requestDebug(undefined, state.txNumber)
}
}
const unload = () => {
event.trigger('unloadRequested', [])
}
const updateTxN = (ev) => {
setState(prevState => {
return {
...prevState,
txNumber: ev.target.value
}
})
unloadRequested()
}
const txInputChanged = (e) => {
@ -50,12 +41,11 @@ export const TxBrowser = () => {
<div className="txContainer">
<div className="py-1 d-flex justify-content-center w-100 input-group">
<input
value={state.txNumber || ''}
defaultValue={state.txNumber || ''}
className="form-control m-0 css.txinput"
id='txinput'
onKeyUp={updateTxN}
type='text'
onInput={txInputChanged}
onChange={txInputChanged}
placeholder={'Transaction hash, should start with 0x'}
data-id="debuggerTransactionInput"
disabled={state.debugging}

2
libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx
Unescape View File

@ -9,4 +9,4 @@ export const FunctionPanel = ({ calldata }) => {
)
}
export default FunctionPanel
export default FunctionPanel

117
libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx
Unescape View File

@ -0,0 +1,117 @@
import React, { useState, useEffect } from 'react'
import CodeListView from './code-list-view'
import FunctionPanel from './function-panel'
import StepDetail from './step-detail'
import SolidityState from './solidity-state'
import SolidityLocals from './solidity-locals'
export const VmDebuggerHead = ({ vmDebuggerLogic }) => {
const [panelVisibility, setPanelVisibility] = useState({
functionPanel: true,
stepDetail: true,
solidityState: true,
solidityLocals: true,
returnValuesPanel: true,
fullStoragesChangesPanel: true
})
const [asm, setAsm] = useState({
code: null,
address: null,
index: null
})
const [functionPanel, setFunctionPanel] = useState(null)
const [stepDetail, setStepDetail] = useState({
key: null,
value: null,
reset: false
})
const [solidityState, setSolidityState] = useState({
calldata: null,
message: null,
})
const [solidityLocals, setSolidityLocals] = useState({
calldata: null,
message: null,
})
useEffect(() => {
vmDebuggerLogic.event.register('codeManagerChanged', (code, address, index) => {
setAsm({ code, address, index })
})
vmDebuggerLogic.event.register('traceUnloaded', () => {
setAsm({ code: [], address: '', index: -1 })
})
vmDebuggerLogic.event.register('functionsStackUpdate', (stack) => {
if (stack === null) return
const functions = []
for (const func of stack) {
functions.push(func.functionDefinition.attributes.name + '(' + func.inputs.join(', ') + ')')
}
setFunctionPanel(functions)
})
vmDebuggerLogic.event.register('traceUnloaded', () => {
setStepDetail({ key: null, value: null, reset: true })
})
vmDebuggerLogic.event.register('newTraceLoaded', () => {
setStepDetail({ key: null, value: null, reset: true })
})
vmDebuggerLogic.event.register('traceCurrentStepUpdate', (error, step) => {
setStepDetail({ key: 'execution step', value: (error ? '-' : step), reset: false })
})
vmDebuggerLogic.event.register('traceMemExpandUpdate', (error, addmem) => {
setStepDetail({ key: 'add memory', value: (error ? '-' : addmem), reset: false })
})
vmDebuggerLogic.event.register('traceStepCostUpdate', (error, gas) => {
setStepDetail({ key: 'gas', value: (error ? '-' : gas), reset: false })
})
vmDebuggerLogic.event.register('traceCurrentCalledAddressAtUpdate', (error, address) => {
setStepDetail({ key: 'loaded address', value: (error ? '-' : address), reset: false })
})
vmDebuggerLogic.event.register('traceRemainingGasUpdate', (error, remainingGas) => {
setStepDetail({ key: 'remaining gas', value: (error ? '-' : remainingGas), reset: false })
})
vmDebuggerLogic.event.register('indexUpdate', (index) => {
setStepDetail({ key: 'vm trace step', value: index, reset: false })
})
vmDebuggerLogic.event.register('solidityState', (calldata) => {
setSolidityState({ ...solidityState, calldata })
})
vmDebuggerLogic.event.register('solidityStateMessage', (message) => {
setSolidityState({ ...solidityState, message })
})
vmDebuggerLogic.event.register('solidityLocals', (calldata) => {
setSolidityLocals({ ...solidityState, calldata })
})
vmDebuggerLogic.event.register('solidityLocalsMessage', (message) => {
setSolidityLocals({ ...solidityState, message })
})
vmDebuggerLogic.event.register('newTrace', () => {
setPanelVisibility({
functionPanel: true,
stepDetail: true,
solidityState: true,
solidityLocals: true,
returnValuesPanel: true,
fullStoragesChangesPanel: true
})
})
vmDebuggerLogic.start()
}, [])
return (
<div id="vmheadView" className="mt-1 px-0">
<div className="d-flex flex-column">
<div className="w-100" hidden>
<FunctionPanel calldata={functionPanel} />
<SolidityLocals calldata={solidityLocals.calldata} message={solidityLocals.message} />
<SolidityState calldata={solidityState.calldata} message={solidityState.message} />
</div>
<div className="w-100"><CodeListView asm={asm} /></div>
<div className="w-100"><StepDetail detail={stepDetail} /></div>
</div>
</div>
)
}
export default VmDebuggerHead;

133
libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx
Unescape View File

@ -1,71 +1,29 @@
import React, { useState, useEffect } from 'react'
import CodeListView from './code-list-view'
import CalldataPanel from './calldata-panel'
import MemoryPanel from './memory-panel'
import CallstackPanel from './callstack-panel'
import FunctionPanel from './function-panel'
import StackPanel from './stack-panel'
import StoragePanel from './storage-panel'
import StepDetail from './step-detail'
import SolidityState from './solidity-state'
import SolidityLocals from './solidity-locals'
import FullStoragesChangesPanel from './full-storages-changes'
import DropdownPanel from './dropdown-panel'
import './vm-debugger.css';
export const VmDebugger = ({ vmDebuggerLogic }) => {
const [panelVisibility, setPanelVisibility] = useState({
asmCode: true,
stackPanel: true,
functionPanel: true,
storagePanel: true,
memoryPanel: true,
stepDetail: true,
calldataPanel: true,
callstackPanel: true,
solidityState: true,
solidityLocals: true,
solidityPanel: true,
returnValuesPanel: true,
fullStoragesChangesPanel: true
})
const [asm, setAsm] = useState({
code: null,
address: null,
index: null
})
const [calldataPanel, setCalldataPanel] = useState(null)
const [memoryPanel, setMemoryPanel] = useState(null)
const [callStackPanel, setCallStackPanel] = useState(null)
const [stackPanel, setStackPanel] = useState(null)
const [functionPanel, setFunctionPanel] = useState(null)
const [storagePanel, setStoragePanel] = useState({
calldata: null,
header: null
})
const [stepDetail, setStepDetail] = useState({
key: null,
value: null,
reset: false
})
const [solidityState, setSolidityState] = useState({
calldata: null,
message: null,
})
const [solidityLocals, setSolidityLocals] = useState({
calldata: null,
message: null,
})
const [returnValuesPanel, setReturnValuesPanel] = useState({})
const [fullStoragesChangesPanel, setFullStoragesChangesPanel] = useState(null)
useEffect(() => {
vmDebuggerLogic.event.register('codeManagerChanged', (code, address, index) => {
setAsm({ code, address, index })
})
vmDebuggerLogic.event.register('traceUnloaded', () => {
setAsm({ code: [], address: '', index: -1 })
})
vmDebuggerLogic.event.register('traceManagerCallDataUpdate', (calldata) => {
setCalldataPanel(calldata)
})
@ -78,105 +36,28 @@ export const VmDebugger = ({ vmDebuggerLogic }) => {
vmDebuggerLogic.event.register('traceManagerStackUpdate', (calldata) => {
setStackPanel(calldata)
})
vmDebuggerLogic.event.register('functionsStackUpdate', (stack) => {
if (stack === null) return
const functions = []
for (const func of stack) {
functions.push(func.functionDefinition.attributes.name + '(' + func.inputs.join(', ') + ')')
}
setFunctionPanel(functions)
})
vmDebuggerLogic.event.register('traceManagerStorageUpdate', (calldata, header) => {
setStoragePanel({ calldata, header })
})
vmDebuggerLogic.event.register('traceUnloaded', () => {
setStepDetail({ key: null, value: null, reset: true })
})
vmDebuggerLogic.event.register('newTraceLoaded', () => {
setStepDetail({ key: null, value: null, reset: true })
})
vmDebuggerLogic.event.register('traceCurrentStepUpdate', (error, step) => {
setStepDetail({ key: 'execution step', value: (error ? '-' : step), reset: false })
})
vmDebuggerLogic.event.register('traceMemExpandUpdate', (error, addmem) => {
setStepDetail({ key: 'add memory', value: (error ? '-' : addmem), reset: false })
})
vmDebuggerLogic.event.register('traceStepCostUpdate', (error, gas) => {
setStepDetail({ key: 'gas', value: (error ? '-' : gas), reset: false })
})
vmDebuggerLogic.event.register('traceCurrentCalledAddressAtUpdate', (error, address) => {
setStepDetail({ key: 'loaded address', value: (error ? '-' : address), reset: false })
})
vmDebuggerLogic.event.register('traceRemainingGasUpdate', (error, remainingGas) => {
setStepDetail({ key: 'remaining gas', value: (error ? '-' : remainingGas), reset: false })
})
vmDebuggerLogic.event.register('indexUpdate', (index) => {
setStepDetail({ key: 'vm trace step', value: index, reset: false })
})
vmDebuggerLogic.event.register('solidityState', (calldata) => {
setSolidityState({ ...solidityState, calldata })
})
vmDebuggerLogic.event.register('solidityStateMessage', (message) => {
setSolidityState({ ...solidityState, message })
})
vmDebuggerLogic.event.register('solidityLocals', (calldata) => {
setSolidityLocals({ ...solidityState, calldata })
})
vmDebuggerLogic.event.register('solidityLocalsMessage', (message) => {
setSolidityLocals({ ...solidityState, message })
})
vmDebuggerLogic.event.register('traceReturnValueUpdate', (calldata) => {
setReturnValuesPanel(calldata)
})
vmDebuggerLogic.event.register('traceAddressesUpdate', (_addreses) => {
setFullStoragesChangesPanel({})
})
vmDebuggerLogic.event.register('traceStorageUpdate', (calldata) => {
setFullStoragesChangesPanel(calldata)
})
vmDebuggerLogic.event.register('newTrace', () => {
setPanelVisibility({
asmCode: true,
stackPanel: true,
functionPanel: true,
storagePanel: true,
memoryPanel: true,
stepDetail: true,
calldataPanel: true,
callstackPanel: true,
solidityState: true,
solidityLocals: true,
solidityPanel: true,
returnValuesPanel: true,
fullStoragesChangesPanel: true
})
})
vmDebuggerLogic.event.register('newCallTree', () => {
setPanelVisibility({
...panelVisibility,
solidityPanel: false
})
})
// vmDebuggerLogic.event.register('newCallTree', () => {
// setPanelVisibility({
// ...panelVisibility,
// solidityPanel: false
// })
// })
vmDebuggerLogic.start()
}, [])
const renderHead = () => {
return (
<div id="vmheadView" className="mt-1 px-0">
<div className="d-flex flex-column">
<div className="w-100" hidden>
<FunctionPanel calldata={functionPanel} />
<SolidityLocals calldata={solidityLocals.calldata} message={solidityLocals.message} />
<SolidityState calldata={solidityState.calldata} message={solidityState.message} />
</div>
<div className="w-100"><CodeListView asm={asm} /></div>
<div className="w-100"><StepDetail detail={stepDetail} /></div>
</div>
</div>
)
}
return (
<div id="vmdebugger" className="px-2">
<div>
@ -185,8 +66,6 @@ export const VmDebugger = ({ vmDebuggerLogic }) => {
<StoragePanel storage={storagePanel.calldata} header={storagePanel.header} />
<CallstackPanel calldata={callStackPanel} />
<CalldataPanel calldata={calldataPanel} />
<DropdownPanel dropdownName='Return Value' opts={{ json: true }} calldata={returnValuesPanel} />
<FullStoragesChangesPanel storageData={fullStoragesChangesPanel} />
</div>
</div>
)

2
libs/remix-ui/utils/src/index.ts
Unescape View File

@ -1 +1 @@
export * from './lib/should-render';
export * from './lib/should-render'

0
libs/remix-ui/utils/src/lib/should-render.css
Unescape View File

11
libs/remix-ui/utils/src/lib/should-render.spec.tsx
Unescape View File

@ -1,11 +0,0 @@
import React from 'react';
import { render } from '@testing-library/react';
import ShouldRender from './should-render';
describe(' ShouldRender', () => {
it('should render successfully', () => {
const { baseElement } = render(<ShouldRender />);
expect(baseElement).toBeTruthy();
});
});

21
libs/remix-ui/utils/src/lib/should-render.tsx
Unescape View File

@ -1,16 +1,15 @@
import React from 'react';
import './should-render.css';
import React from 'react'
/* eslint-disable-next-line */
export interface ShouldRenderProps {}
export interface ShouldRenderProps {
children?: React.ReactNode,
if: boolean
}
export const ShouldRender = (props: ShouldRenderProps) => {
return (
<div>
<h1>Welcome to shouldRender!</h1>
</div>
);
};
return props.if ? (
props.children
) : null
}
export default ShouldRender;
export default ShouldRender

Write Preview
Loading…
Cancel
Save