From abae083cb067939b77c7216ce087f50a658d8400 Mon Sep 17 00:00:00 2001 From: Iuri Matias Date: Wed, 5 Sep 2018 16:59:30 -0400 Subject: [PATCH] use new tx browser; move code to upper class --- src/app/debugger/debuggerUI.js | 39 +++- src/app/debugger/debuggerUI/TxBrowser.js | 206 ++++++++++++++++++ src/app/debugger/remix-debugger/index.js | 1 + .../remix-debugger/src/ui/EthdebuggerUI.js | 49 ++--- 4 files changed, 264 insertions(+), 31 deletions(-) create mode 100644 src/app/debugger/debuggerUI/TxBrowser.js diff --git a/src/app/debugger/debuggerUI.js b/src/app/debugger/debuggerUI.js index 2a3434fef8..33bfd698c6 100644 --- a/src/app/debugger/debuggerUI.js +++ b/src/app/debugger/debuggerUI.js @@ -1,6 +1,9 @@ var OldEthdebuggerUI = require('./remix-debugger/src/ui/EthdebuggerUI') var Debugger = require('../debugger/debugger') var SourceHighlighter = require('../editor/sourceHighlighter') +var TxBrowser = require('./debuggerUI/TxBrowser') +var remixLib = require('remix-lib') +var executionContext = remixLib.execution.executionContext class DebuggerUI { @@ -8,7 +11,12 @@ class DebuggerUI { this.transactionDebugger = new Debugger(new SourceHighlighter()) this.isActive = false - this.debugger_ui = new OldEthdebuggerUI({debugger: this.transactionDebugger.debugger}) + this.debugger_ui = new OldEthdebuggerUI({ + debugger: this.transactionDebugger.debugger + }) + + this.startTxBrowser() + container.appendChild(this.debugger_ui.render()) this.listenToEvents() @@ -29,6 +37,25 @@ class DebuggerUI { }) } + startTxBrowser () { + const self = this + + let txBrowser = new TxBrowser(this.debugger_ui, {displayConnectionSetting: false, web3: executionContext.web3()}) + this.debugger_ui.txBrowser = txBrowser + + txBrowser.event.register('newTxLoading', this, function () { + self.debugger_ui.unLoad() + }) + txBrowser.event.register('newTraceRequested', this, function (blockNumber, txIndex, tx) { + self.debugger_ui.startDebugging(blockNumber, txIndex, tx) + }) + txBrowser.event.register('unloadRequested', this, function (blockNumber, txIndex, tx) { + self.debugger_ui.unLoad() + }) + + this.txBrowser = this.debugger_ui.txBrowser + } + view () { return this.transactionDebugger } @@ -43,7 +70,15 @@ class DebuggerUI { if (error) { return console.error("coudn't get txHash: " + error) } - self.debugger_ui.debug(tx) + self.transactionDebugger.debugger.solidityProxy.reset({}) + + if (tx instanceof Object) { + self.txBrowser.load(tx.hash, tx) + } else if (tx instanceof String) { + self.txBrowser.load(tx) + } + + // self.debugger_ui.debug(tx) }) } } diff --git a/src/app/debugger/debuggerUI/TxBrowser.js b/src/app/debugger/debuggerUI/TxBrowser.js new file mode 100644 index 0000000000..5e9213c28e --- /dev/null +++ b/src/app/debugger/debuggerUI/TxBrowser.js @@ -0,0 +1,206 @@ +var remixLib = require('remix-lib') +var EventManager = remixLib.EventManager +var traceHelper = remixLib.helpers.trace +var yo = require('yo-yo') +var init = remixLib.init +var csjs = require('csjs-inject') +var styleGuide = require('../../ui/styles-guide/theme-chooser') +var styles = styleGuide.chooser() + +var css = csjs` + .container { + display: flex; + flex-direction: column; + } + .txContainer { + display: flex; + flex-direction: column; + } + .txinputs { + width: 100%; + display: flex; + justify-content: center; + } + .txinput { + ${styles.rightPanel.debuggerTab.input_Debugger} + margin: 3px; + width: inherit; + } + .txbuttons { + width: 100%; + display: flex; + justify-content: center; + } + .txbutton { + ${styles.rightPanel.debuggerTab.button_Debugger} + width: inherit; + } + .txbuttonstart { + ${styles.rightPanel.debuggerTab.button_Debugger} + } + .txbutton:hover { + color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor}; + } + .vmargin { + margin-top: 10px; + margin-bottom: 10px; + } +` +function TxBrowser (_parent, opts) { + this.event = new EventManager() + + this.blockNumber + this.txNumber + this.view + this.displayConnectionSetting = opts.displayConnectionSetting + this.web3 = opts.web3 + var self = this + _parent.event.register('providerChanged', this, function (provider) { + self.setDefaultValues() + if (self.view) { + yo.update(self.view, self.render()) + } + }) +} + +// creation 0xa9619e1d0a35b2c1d686f5b661b3abd87f998d2844e8e9cc905edb57fc9ce349 +// invokation 0x71a6d583d16d142c5c3e8903060e8a4ee5a5016348a9448df6c3e63b68076ec4 0xcda2b2835add61af54cf83bd076664d98d7908c6cd98d86423b3b48d8b8e51ff +// test: +// creation: 0x72908de76f99fca476f9e3a3b5d352f350a98cd77d09cebfc59ffe32a6ecaa0b +// invokation: 0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51 + +TxBrowser.prototype.setDefaultValues = function () { + this.connectInfo = '' + if (this.view) { + yo.update(this.view, this.render()) + } +} + +TxBrowser.prototype.submit = function (tx) { + var self = this + self.event.trigger('newTxLoading', [this.blockNumber, this.txNumber]) + if (tx) { + return self.update(null, tx) + } + if (!this.txNumber) { + self.update('no tx index or tx hash to look for') + return + } + try { + if (this.txNumber.indexOf('0x') !== -1) { + self.web3.eth.getTransaction(this.txNumber, function (error, result) { + self.update(error, result) + }) + } else { + self.web3.eth.getTransactionFromBlock(this.blockNumber, this.txNumber, function (error, result) { + self.update(error, result) + }) + } + } catch (e) { + self.update(e.message) + } +} + +TxBrowser.prototype.update = function (error, tx) { + var info = {} + if (error) { + this.view.querySelector('#error').innerHTML = error + } else { + if (tx) { + this.view.querySelector('#error').innerHTML = '' + if (!tx.to) { + tx.to = traceHelper.contractCreationToken('0') + } + info.from = tx.from + info.to = tx.to + info.hash = tx.hash + this.event.trigger('newTraceRequested', [this.blockNumber, this.txNumber, tx]) + } else { + var mes = '' + info.from = mes + info.to = mes + info.hash = mes + this.view.querySelector('#error').innerHTML = 'Cannot find transaction with reference. Block number: ' + this.blockNumber + '. Transaction index/hash: ' + this.txNumber + } + } +} + +TxBrowser.prototype.updateWeb3Url = function (newhost) { + init.setProvider(global.web3, newhost) + var self = this + this.checkWeb3(function (error, block) { + if (!error) { + self.connectInfo = 'Connected to ' + global.web3.currentProvider.host + '. Current block number: ' + block + } else { + self.connectInfo = 'Unable to connect to ' + global.web3.currentProvider.host + '. ' + error.message + } + yo.update(self.view, self.render()) + }) +} + +TxBrowser.prototype.checkWeb3 = function (callback) { + try { + global.web3.eth.getBlockNumber(function (error, block) { + callback(error, block) + }) + } catch (e) { + console.log(e) + callback(e.message, null) + } +} + +TxBrowser.prototype.updateBlockN = function (ev) { + this.blockNumber = ev.target.value +} + +TxBrowser.prototype.updateTxN = function (ev) { + this.txNumber = ev.target.value +} + +TxBrowser.prototype.load = function (txHash, tx) { + this.txNumber = txHash + this.submit(tx) +} + +TxBrowser.prototype.unload = function (txHash) { + this.event.trigger('unloadRequested') + this.init() +} + +TxBrowser.prototype.init = function (ev) { + this.setDefaultValues() +} + +TxBrowser.prototype.connectionSetting = function () { + if (this.displayConnectionSetting) { + var self = this + return yo`
Node URL: + ${this.connectInfo}
` + } else { + return '' + } +} + +TxBrowser.prototype.render = function () { + var self = this + var view = yo`
+ ${this.connectionSetting()} +
+
+ + +
+
+ + +
+
+ +
` + if (!this.view) { + this.view = view + } + return view +} + +module.exports = TxBrowser diff --git a/src/app/debugger/remix-debugger/index.js b/src/app/debugger/remix-debugger/index.js index 380808018f..1e8e7ed6dd 100644 --- a/src/app/debugger/remix-debugger/index.js +++ b/src/app/debugger/remix-debugger/index.js @@ -1,4 +1,5 @@ 'use strict' +// TODO: this file doesn't seem to be used any more and can be removed var VMDebugger = require('./src/ui/VmDebugger') var Debugger = require('./src/ui/EthdebuggerUI') var DebuggerBackend = require('remix-debug').EthDebugger diff --git a/src/app/debugger/remix-debugger/src/ui/EthdebuggerUI.js b/src/app/debugger/remix-debugger/src/ui/EthdebuggerUI.js index 778370a2a2..aa7dfc6a67 100644 --- a/src/app/debugger/remix-debugger/src/ui/EthdebuggerUI.js +++ b/src/app/debugger/remix-debugger/src/ui/EthdebuggerUI.js @@ -1,5 +1,5 @@ 'use strict' -var TxBrowser = require('./TxBrowser') +// var TxBrowser = require('./TxBrowser') var StepManager = require('./StepManager') var VmDebugger = require('./VmDebugger') @@ -24,7 +24,7 @@ function EthdebuggerUI (opts) { this.opts = opts || {} this.debugger = opts.debugger - if (!this.opts.compilationResult) this.opts.compilationResult = () => { return null } + // if (!this.opts.compilationResult) this.opts.compilationResult = () => { return null } var self = this this.event = new EventManager() @@ -42,17 +42,6 @@ function EthdebuggerUI (opts) { executionContext.event.register('contextChanged', this, function () { self.updateWeb3Reference() }) - - this.txBrowser = new TxBrowser(this, {displayConnectionSetting: false, web3: executionContext.web3()}) - this.txBrowser.event.register('newTxLoading', this, function () { - self.unLoad() - }) - this.txBrowser.event.register('newTraceRequested', this, function (blockNumber, txIndex, tx) { - self.startDebugging(blockNumber, txIndex, tx) - }) - this.txBrowser.event.register('unloadRequested', this, function (blockNumber, txIndex, tx) { - self.unLoad() - }) } EthdebuggerUI.prototype.setBreakpointManager = function (breakpointManager) { @@ -68,22 +57,24 @@ EthdebuggerUI.prototype.updateWeb3Reference = function (web3) { this.txBrowser.web3 = web3 || executionContext.web3() } -EthdebuggerUI.prototype.setCompilationResult = function (compilationResult) { - if (compilationResult && compilationResult.sources && compilationResult.contracts) { - this.debugger.solidityProxy.reset(compilationResult) - } else { - this.debugger.solidityProxy.reset({}) - } -} - -EthdebuggerUI.prototype.debug = function (tx) { - this.setCompilationResult(this.opts.compilationResult()) - if (tx instanceof Object) { - this.txBrowser.load(tx.hash, tx) - } else if (tx instanceof String) { - this.txBrowser.load(tx) - } -} +// EthdebuggerUI.prototype.setCompilationResult = function (compilationResult) { +// if (compilationResult && compilationResult.sources && compilationResult.contracts) { +// this.debugger.solidityProxy.reset(compilationResult) +// } else { +// this.debugger.solidityProxy.reset({}) +// } +// } + +// EthdebuggerUI.prototype.debug = function (tx) { +// // this.setCompilationResult(this.opts.compilationResult()) +// +// this.debugger.solidityProxy.reset({}) +// if (tx instanceof Object) { +// this.txBrowser.load(tx.hash, tx) +// } else if (tx instanceof String) { +// this.txBrowser.load(tx) +// } +// } EthdebuggerUI.prototype.render = function () { this.debuggerPanelsView = yo`
`