From 95b80e12005bda3d99f70c58a9448b198884b100 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Fri, 11 Sep 2020 12:45:48 +0100 Subject: [PATCH] completed move to react --- apps/remix-ide/src/app/tabs/debugger-tab.js | 40 +++-- .../src/app/tabs/debugger/debuggerUI.js | 25 --- libs/remix-ui/debugger-ui/src/index.ts | 4 +- .../debugger-ui/src/lib/debugger-ui.tsx | 165 +++++++++++++----- .../src/lib/tx-browser/tx-browser.tsx | 20 +-- .../src/lib/vm-debugger/function-panel.tsx | 2 +- .../src/lib/vm-debugger/vm-debugger-head.tsx | 117 +++++++++++++ .../src/lib/vm-debugger/vm-debugger.tsx | 133 +------------- libs/remix-ui/utils/src/index.ts | 2 +- libs/remix-ui/utils/src/lib/should-render.css | 0 .../utils/src/lib/should-render.spec.tsx | 11 -- libs/remix-ui/utils/src/lib/should-render.tsx | 21 ++- 12 files changed, 291 insertions(+), 249 deletions(-) create mode 100644 libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx delete mode 100644 libs/remix-ui/utils/src/lib/should-render.css delete mode 100644 libs/remix-ui/utils/src/lib/should-render.spec.tsx diff --git a/apps/remix-ide/src/app/tabs/debugger-tab.js b/apps/remix-ide/src/app/tabs/debugger-tab.js index 5bc5c32d95..c032180e83 100644 --- a/apps/remix-ide/src/app/tabs/debugger-tab.js +++ b/apps/remix-ide/src/app/tabs/debugger-tab.js @@ -2,9 +2,12 @@ const yo = require('yo-yo') const remixDebug = require('@remix-project/remix-debug') const css = require('./styles/debugger-tab-styles') import toaster from '../ui/tooltip' -const DebuggerUI = require('./debugger/debuggerUI') +import { DebuggerUI } from '@remix-ui/debugger-ui' +// const DebuggerUI = require('./debugger/debuggerUI') import { ViewPlugin } from '@remixproject/engine' import * as packageJson from '../../../../../package.json' +import React from 'react' +import ReactDOM from 'react-dom' const profile = { name: 'debugger', @@ -25,6 +28,9 @@ class DebuggerTab extends ViewPlugin { super(profile) this.el = null this.blockchain = blockchain + this.debugHash = null + this.getTraceHash = null + this.removeHighlights = false } render () { @@ -55,14 +61,18 @@ class DebuggerTab extends ViewPlugin { toaster(yo`
Source verification plugin not activated or not available. continuing without source code debugging.
`) }) - this.debuggerUI = new DebuggerUI( - this, - this.el.querySelector('#debugger'), - (address, receipt) => { - const target = (address && remixDebug.traceHelper.isContractCreation(address)) ? receipt.contractAddress : address - return this.call('fetchAndCompile', 'resolve', target || receipt.contractAddress || receipt.to, '.debug', this.blockchain.web3()) - } - ) + ReactDOM.render( + { + const target = (address && remixDebug.traceHelper.isContractCreation(address)) ? receipt.contractAddress : address + + return this.call('fetchAndCompile', 'resolve', target || receipt.contractAddress || receipt.to, '.debug', this.blockchain.web3()) + }} + debugHash={this.debugHash} + getTraceHash={this.getTraceHash} + /> + , this.el) this.call('manager', 'activatePlugin', 'source-verification').catch(e => console.log(e.message)) // this.call('manager', 'activatePlugin', 'udapp') @@ -71,21 +81,21 @@ class DebuggerTab extends ViewPlugin { } deactivate () { - this.debuggerUI.deleteHighlights() + this.removeHighlights = true super.deactivate() } debug (hash) { - if (this.debuggerUI) this.debuggerUI.debug(hash) + this.debugHash = hash } getTrace (hash) { - return this.debuggerUI.getTrace(hash) + this.getTraceHash = hash } - debugger () { - return this.debuggerUI - } + // debugger () { + // return this.debuggerUI + // } } module.exports = DebuggerTab diff --git a/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js b/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js index a8205a4158..dc3ce73c57 100644 --- a/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js +++ b/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js @@ -1,7 +1,3 @@ -import React from 'react' -import ReactDOM from 'react-dom' -import { TreeView, TreeViewItem } from '@remix-ui/tree-view' - var TxBrowser = require('./debuggerUI/TxBrowser') var StepManagerUI = require('./debuggerUI/StepManager') var VmDebugger = require('./debuggerUI/VmDebugger') @@ -247,7 +243,6 @@ class DebuggerUI { ${this.debuggerHeadPanelsView}
${this.statusMessage}
${this.debuggerPanelsView} -
` if (!this.view) { @@ -277,26 +272,6 @@ class DebuggerUI { yo.update(this.debuggerHeadPanelsView, this.vmDebugger.renderHead()) yo.update(this.debuggerPanelsView, this.vmDebugger.render()) yo.update(this.stepManagerView, this.stepManager.render()) - ReactDOM.render( - - - Item 2} /> - - - - - - - - - - - - - - - - , document.getElementById('treeViewReact')) } } diff --git a/libs/remix-ui/debugger-ui/src/index.ts b/libs/remix-ui/debugger-ui/src/index.ts index 3ac7983819..57f0619ee0 100644 --- a/libs/remix-ui/debugger-ui/src/index.ts +++ b/libs/remix-ui/debugger-ui/src/index.ts @@ -1,3 +1 @@ -import StepManager from './lib/step-manager/step-manager' - -export { StepManager } +export * from './lib/debugger-ui' diff --git a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx index 2fadf6de62..456fc3b005 100644 --- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx @@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react' import TxBrowser from './tx-browser/tx-browser' import StepManager from './step-manager/step-manager' import VmDebugger from './vm-debugger/vm-debugger' +import VmDebuggerHead from './vm-debugger/vm-debugger-head' import remixDebug, { TransactionDebugger as Debugger } from '@remix-project/remix-debug' /* eslint-disable-next-line */ import toaster from '../../../../../apps/remix-ide/src/app/ui/tooltip' @@ -13,7 +14,7 @@ import EventManager from '../../../../../apps/remix-ide/src/lib/events' import globalRegistry from '../../../../../apps/remix-ide/src/global/registry' import './debugger-ui.css' -const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => { +export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash, getTraceHash, removeHighlights }) => { const event = new EventManager() const sourceHighlighter = new SourceHighlighter() const init = remixDebug.init @@ -26,7 +27,13 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => { to: null }, blockNumber: null, - txNumber: null + txNumber: null, + visibility: { + vmDebugger: false, + stepManager: false, + txBrowser: false + }, + debugging: false }) useEffect(() => { @@ -37,22 +44,35 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => { if (state.debugger) state.debugger.breakPointManager.remove({fileName: fileName, row: row}) }) - this.editor.event.register('breakpointAdded', (fileName, row) => { + editor.event.register('breakpointAdded', (fileName, row) => { if (state.debugger) state.debugger.breakPointManager.add({fileName: fileName, row: row}) }) - this.editor.event.register('contentChanged', () => { + editor.event.register('contentChanged', () => { if (state.debugger) state.debugger.unload() }) } setEditor() + return unLoad() }, []) - const listenToEvents = () => { - if (!state.debugger) return + useEffect(() => { + debug(debugHash) + }, [debugHash]) - state.debugger.event.register('debuggerStatus', async (isActive) => { + useEffect(() => { + getTrace(getTraceHash) + }, [getTraceHash]) + + useEffect(() => { + if (removeHighlights) deleteHighlights() + }, [removeHighlights]) + + const listenToEvents = (debuggerInstance) => { + if (!debuggerInstance) return + + debuggerInstance.event.register('debuggerStatus', async (isActive) => { await debuggerModule.call('editor', 'discardHighlight') setState(prevState => { return { @@ -62,7 +82,7 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => { }) }) - state.debugger.event.register('newSourceLocation', async (lineColumnPos, rawLocation) => { + debuggerInstance.event.register('newSourceLocation', async (lineColumnPos, rawLocation) => { const contracts = await fetchContractAndCompile( state.currentReceipt.contractAddress || state.currentReceipt.to, state.currentReceipt) @@ -77,7 +97,14 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => { } }) - // state.debugger.event.register('debuggerUnloaded', () => this.unLoad()) + debuggerInstance.event.register('debuggerUnloaded', () => unLoad()) + + setState(prevState => { + return { + ...prevState, + debugger: debuggerInstance + } + }) } const requestDebug = (blockNumber, txNumber, tx) => { @@ -89,7 +116,11 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => { if (state.debugger) state.debugger.unload() } - const getDebugWeb3 = () => { + const isDebuggerActive = () => { + return state.isActive + } + + const getDebugWeb3 = (): Promise => { return new Promise((resolve, reject) => { debuggerModule.blockchain.detectNetwork((error, network) => { let web3 @@ -105,41 +136,44 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => { }) } - const unLoad = async () => { + const unLoad = () => { // yo.update(this.debuggerHeadPanelsView, yo`
`) // yo.update(this.debuggerPanelsView, yo`
`) // yo.update(this.stepManagerView, yo`
`) - if (this.vmDebugger) this.vmDebugger.remove() - if (this.stepManager) this.stepManager.remove() - if (this.txBrowser) this.txBrowser.setState({debugging: false}) - this.vmDebugger = null - this.stepManager = null - if (this.debugger) delete this.debugger - this.event.trigger('traceUnloaded') + setState(prevState => { + const { visibility } = prevState + return { + ...prevState, + debugger: null, + debugging: false, + visibility: { + ...visibility, + vmDebugger: false, + stepManager: false + } + } + }) + event.trigger('traceUnloaded', []) } const startDebugging = async (blockNumber, txNumber, tx) => { if (state.debugger) unLoad() - const web3 = await this.getDebugWeb3() - setState({ - ...state, - currentReceipt: await web3.eth.getTransactionReceipt(txNumber), - debugger: new Debugger({ - web3, - offsetToLineColumnConverter: globalRegistry.get('offsettolinecolumnconverter').api, - compilationResult: async (address) => { - try { - return await fetchContractAndCompile(address, this.currentReceipt) - } catch (e) { - console.error(e) - } - return null + const web3 = await getDebugWeb3() + const currentReceipt = await web3.eth.getTransactionReceipt(txNumber) + const debuggerInstance = new Debugger({ + web3, + offsetToLineColumnConverter: globalRegistry.get('offsettolinecolumnconverter').api, + compilationResult: async (address) => { + try { + return await fetchContractAndCompile(address, currentReceipt) + } catch (e) { + console.error(e) } - }) + return null + } }) - listenToEvents() - state.debugger.debug(blockNumber, txNumber, tx, () => { + debuggerInstance.debug(blockNumber, txNumber, tx, () => { // this.stepManager = new StepManagerUI(this.debugger.step_manager) // this.vmDebugger = new VmDebugger(this.debugger.vmDebuggerLogic) setState(prevState => { @@ -147,20 +181,71 @@ const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => { ...prevState, blockNumber, txNumber, - debugging: true + debugging: true, + currentReceipt } }) - this.renderDebugger() + listenToEvents(debuggerInstance) + // this.renderDebugger() }).catch((error) => { toaster(error, null, null) unLoad() }) } +const debug = (txHash) => { + startDebugging(null, txHash, null) +} + +const getTrace = (hash) => { + return new Promise(async (resolve, reject) => { /* eslint-disable-line */ + const web3 = await getDebugWeb3() + const currentReceipt = await web3.eth.getTransactionReceipt(hash) + + setState(prevState => { + return { + ...prevState, + currentReceipt + } + }) + + const debug = new Debugger({ + web3, + offsetToLineColumnConverter: globalRegistry.get('offsettolinecolumnconverter').api, + compilationResult: async (address) => { + try { + return await fetchContractAndCompile(address, state.currentReceipt) + } catch (e) { + console.error(e) + } + return null + } + }) + debug.debugger.traceManager.traceRetriever.getTrace(hash, (error, trace) => { + if (error) return reject(error) + resolve(trace) + }) + }) +} + +const deleteHighlights = async () => { + await debuggerModule.call('editor', 'discardHighlight') +} + +// this.debuggerPanelsView = yo`
` +// this.debuggerHeadPanelsView = yo`
` +// this.stepManagerView = yo`
` + return ( -
-

Welcome to debugger-ui!

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

Welcome to shouldRender!

-
- ); -}; + return props.if ? ( + props.children + ) : null +} -export default ShouldRender; +export default ShouldRender