Merge pull request #13 from yann300/debuggerPanels

Debugger panels (stack, storage, memory, ...)

src/assemblyItemsBrowser.js

@@ -1,12 +1,26 @@
 var React = require('react');
+var BasicPanel = require('./basicPanel')
+var Sticker = require('./sticker')
+var codeUtils = require('./codeUtils')
+var style = require('./basicStyles')
 
 module.exports = React.createClass({
 
 	getInitialState: function()
 	{
 		return {
-			currentSelected: null,
+			currentSelected: 0, // current selected item in the vmTrace
-			currentAddress: null
+			selectedInst: 0, // current selected item in the contract assembly code
+			currentAddress: null,
+			currentStack: null,
+			currentLevels: null,
+			currentStorage: null,
+			currentMemory: null,
+			currentCallData: null,
+			currentStepInfo: null,
+			codes: {}, // assembly items instructions list by contract addesses
+			instructionsIndexByBytesOffset: {}, // mapping between bytes offset and instructions index.
+			callStack: {}
 		};
 	},
 
@@ -19,41 +33,214 @@ module.exports = React.createClass({
 
 	render: function() 
 	{		
-		if (!this.props.vmTrace || !this.props.vmTrace.vmtrace || this.props.vmTrace.vmtrace.length === 0)
-			return null;
-		this.state.currentAddress = this.props.vmTrace.vmtrace[0].address
-		this.state.currentSelected = this.props.vmTrace.codesmap[this.state.currentAddress][this.props.vmTrace.vmtrace[0].pc]
 		return (
-			<div>
+			<div style={this.props.vmTrace === null ? style.hidden : style.display} >
-			<div id="action" >
+			<div style={style.container}><span style={style.address}>Current code: {this.state.currentAddress}</span></div> 
-			<button onClick={this.stepIntoBack} >stepIntoBack</button>
+			
-			<button onClick={this.stepOverBack} >stepOverBack</button>
+			<div style={style.container}>
-			<button onClick={this.stepOverForward} >stepOverForward</button>
+				<button onClick={this.stepIntoBack} disabled={ this.checkButtonState(-1) } >Step Into Back</button>
-			<button onClick={this.stepIntoForward} >stepIntoForward</button>
+				<button onClick={this.stepOverBack} disabled={ this.checkButtonState(-1) } >Step Over Back</button>
+				<button onClick={this.stepOverForward} disabled={ this.checkButtonState(1) } >Step Over Forward</button>
+				<button onClick={this.stepIntoForward} disabled={ this.checkButtonState(1) } >Step Into Forward</button>
 			</div>
-			<div>
+
-			<select size="10" ref='itemsList' value={this.state.currentSelected}>
+			<div style={style.container}>
+			<table>
+				<tbody>
+				<tr>
+					<td>
+						<select size="10" ref='itemsList' style={style.instructionsList}  value={this.state.selectedInst}>
 						{ this.renderAssemblyItems() }
 						</select>
+						<div style={Object.assign(style.inline, style.sticker)}>
+							<Sticker data={this.state.currentStepInfo} />
+						</div>
+					</td>
+					<td>
+						<BasicPanel name="CallData" data={this.state.currentCallData} />
+					</td>
+				</tr>
+				<tr>
+					<td>
+						<BasicPanel name="Stack" data={this.state.currentStack} />
+					</td>
+					<td>
+						<BasicPanel name="CallStack" data={this.state.currentCallStack} />	
+					</td>					
+				</tr>
+				<tr>
+					<td>
+						<BasicPanel name="Storage" data={this.state.currentStorage} renderRow={this.renderStorageRow} />
+					</td>
+					<td>
+						<BasicPanel name="Memory" data={this.state.currentMemory} renderRow={this.renderMemoryRow} />
+					</td>
+				</tr>
+				</tbody>
+			</table>
 			</div>	
 			</div>		
 			);
 	},
 
+	renderStorageRow: function(data)
+	{
+		var ret = []
+		if (data)
+		{
+			for (var key in data)
+				ret.push(<tr key={key} ><td>{key}</td><td>{data[key]}</td></tr>)
+		}
+		return ret
+	},
+
+	renderMemoryRow: function(data)
+	{
+		var ret = []
+		if (data)
+		{
+			for (var key in data)
+			{
+				var memSlot = data[key]
+				ret.push(<tr key={key} ><td>{memSlot.address}</td><td>{memSlot.content.raw}</td><td>{memSlot.content.ascii}</td></tr>)
+			}
+		}
+		return ret
+	},
+
+	resolveAddress: function(address)
+	{
+		if (!this.state.codes[address])
+		{
+			var hexCode = web3.eth.getCode(address)	
+			var code = codeUtils.nameOpCodes(new Buffer(hexCode.substring(2), 'hex'))
+			this.state.codes[address] = code[0]
+			this.state.instructionsIndexByBytesOffset[address] = code[1]
+		}
+	},
+
+	checkButtonState: function(incr)
+	{
+		if (!this.props.vmTrace)
+			return "disabled"
+		if (incr === -1)
+			return this.state.currentSelected === 0 ? "disabled" : ""
+		else if (incr === 1)
+			return this.state.currentSelected >= this.props.vmTrace.length - 1 ? "disabled" : "" 
+	},
+
 	renderAssemblyItems: function()
 	{
 		if (this.props.vmTrace)
 		{
-			var selectedItem = this.state.currentSelected
+			return this.state.codes[this.state.currentAddress].map(function(item, i) 
-			return this.props.vmTrace.vmtrace.map(function(item, i) 
 			{
-				return <option key={i} value={i} >{item.instname}</option>;
+				return <option key={i} value={i} >{item}</option>;
 			});	
 		}
 	},
 
+	componentWillReceiveProps: function (nextProps) 
+	{ 
+		if (!nextProps.vmTrace)
+			return
+		this.buildCallStack(nextProps.vmTrace)
+		this.updateState(nextProps, 0)
+	},
 
-	stepIntoBack: function ()
+	buildCallStack: function(vmTrace)
+	{
+		if (!vmTrace)
+			return
+		var callStack = []
+		var depth = -1
+		for (var k = 1; k < vmTrace.length; k++)
+		{
+			var trace = vmTrace[k]
+			if (trace.depth === undefined || trace.depth === depth)
+				continue
+			if (trace.depth > depth)
+				callStack.push(trace.address) // new context
+			else if (trace.depth < depth)
+				callStack.pop() // returning from context
+			depth = trace.depth
+			this.state.callStack[k] = callStack.slice(0)
+		}
+	},
+
+	updateState: function(props, vmTraceIndex)
+	{
+		if (!props.vmTrace)
+			return
+		var previousState = this.state.currentSelected
+		var stateChanges = {}
+
+		var currentAddress = this.state.currentAddress
+		if (!currentAddress)
+			currentAddress = props.vmTrace[vmTraceIndex].address
+		if (props.vmTrace[vmTraceIndex].address && props.vmTrace[vmTraceIndex].address !== this.state.currentAddress)
+		{
+			this.resolveAddress(props.vmTrace[vmTraceIndex].address)
+			stateChanges["currentAddress"] = props.vmTrace[vmTraceIndex].address
+		}
+
+		if (props.vmTrace[vmTraceIndex].stack)
+		{
+			var stack = props.vmTrace[vmTraceIndex].stack
+			stack.reverse()
+			stateChanges["currentStack"] = stack
+		}
+
+		var callStackIndex = vmTraceIndex
+		if (vmTraceIndex < previousState)
+			callStackIndex = this.retrieveLastSeenProperty(vmTraceIndex, "depth", props.vmTrace)
+		if (this.state.callStack[callStackIndex] || callStackIndex === 0)
+			stateChanges["currentCallStack"] = this.state.callStack[callStackIndex]
+
+		var storageIndex = vmTraceIndex
+		if (vmTraceIndex < previousState)
+			storageIndex = this.retrieveLastSeenProperty(vmTraceIndex, "storage", props.vmTrace)
+		if (props.vmTrace[storageIndex].storage || storageIndex === 0)
+			stateChanges["currentStorage"] = props.vmTrace[storageIndex].storage
+
+		var memoryIndex = vmTraceIndex
+		if (vmTraceIndex < previousState)
+			memoryIndex = this.retrieveLastSeenProperty(vmTraceIndex, "memory", props.vmTrace)	
+		if (props.vmTrace[memoryIndex].memory || memoryIndex === 0)
+			stateChanges["currentMemory"] = this.formatMemory(props.vmTrace[memoryIndex].memory, 16)
+
+		var callDataIndex = vmTraceIndex
+		if (vmTraceIndex < previousState)
+			callDataIndex = this.retrieveLastSeenProperty(vmTraceIndex, "calldata", props.vmTrace)
+		if (props.vmTrace[vmTraceIndex].calldata || callDataIndex === 0)
+			stateChanges["currentCallData"] = [props.vmTrace[callDataIndex].calldata]
+
+		stateChanges["selectedInst"] = this.state.instructionsIndexByBytesOffset[currentAddress][props.vmTrace[vmTraceIndex].pc]
+		stateChanges["currentSelected"] = vmTraceIndex
+
+		stateChanges["currentStepInfo"] = [
+			"Current Step: " + props.vmTrace[vmTraceIndex].steps,
+			"Adding Memory: " + (props.vmTrace[vmTraceIndex].memexpand ? props.vmTrace[vmTraceIndex].memexpand : ""),
+			"Step Cost: " + props.vmTrace[vmTraceIndex].gascost,
+			"Remaining Gas: " + props.vmTrace[vmTraceIndex].gas
+		]
+
+		this.setState(stateChanges)
+	},
+
+	retrieveLastSeenProperty: function(currentIndex, propertyName, vmTrace)
+	{
+		var index = currentIndex
+		while (index > 0)
+		{
+			if (vmTrace[index][propertyName])
+				break
+			index--
+		}
+		return index	
+	},
+
+	stepIntoBack: function()
 	{
 		this.moveSelection(-1)
 	},
@@ -97,13 +284,13 @@ module.exports = React.createClass({
 
 	isCallInstruction: function(index)
 	{
-		var state = this.props.vmTrace.vmtrace[index];
+		var state = this.props.vmTrace[index];
-		return state.instname === "CALL" || state.instname === "CREATE";
+		return state.instname === "CALL" || state.instname === "CALLCODE" || state.instname === "CREATE" || state.instname === "DELEGATECALL"
 	},
 
 	isReturnInstruction: function(index)
 	{
-		var state = this.props.vmTrace.vmtrace[index];
+		var state = this.props.vmTrace[index];
 		return state.instname === "RETURN"
 	},
 
@@ -111,29 +298,37 @@ module.exports = React.createClass({
 	{
 		var i = this.state.currentSelected - 1;
 		var depth = 0;
-		while (--i >= 0) {
+		while (--i >= 0) 
+		{
 			if (this.isCallInstruction(i))
+			{
 				if (depth == 0)
 					break;
-				else depth--;
+				else
+					depth--;
+			}
 			else if (this.isReturnInstruction(i))
 					depth++;
+			
 		}
 		this.selectState(i);
 	},
 
 	stepOutForward: function()
 	{
-			var i = this.state.currentSelected;
+		var i = this.state.currentSelected
-			var depth = 0;
+		var depth = 0
-			while (++i < this.props.vmTrace.vmtrace.length) {
+		while (++i < this.props.vmTrace.length) 
+		{
 			if (this.isReturnInstruction(i))
+			{
 				if (depth == 0)
-						break;
+					break
 				else
-						depth--;
+					depth--
+			}
 			else if (this.isCallInstruction(i))
-						depth++;
+				depth++
 		}
 		this.selectState(i + 1);
 	},
@@ -145,10 +340,36 @@ module.exports = React.createClass({
 
 	selectState: function(index)
 	{
-				var newIndex = this.props.vmTrace.codesmap[this.state.currentAddress][this.props.vmTrace.vmtrace[index].pc]
+		this.updateState(this.props, index)
-				this.state.currentSelected = index
-				this.refs.itemsList.value = this.state.currentSelected
-				if (this.props.vmTrace.vmtrace[index].address && this.state.currentAddress !== this.props.vmTrace.vmtrace[index].address)
-					this.state.currentAddress = this.props.vmTrace.vmtrace[index].address
 	},
+
+	formatMemory: function(mem, width)
+	{
+		var ret = []
+		for (var k = 0; k < mem.length; k += (width * 2))
+		{
+			var memory = mem.substr(k, width * 2)
+			ret.push({
+				address: web3.toHex(k),
+				content: this.tryAsciiFormat(memory)
 			})
+		}
+		return ret
+	},
+
+	tryAsciiFormat: function(memorySlot)
+	{
+		var ret = { ascii: "", raw: "" }
+		for (var k = 0; k < memorySlot.length; k += 2)
+		{
+			var raw = memorySlot.substr(k, 2)
+			var ascii = web3.toAscii(raw)
+			if (ascii === String.fromCharCode(0))
+				ret.ascii += "?"
+			else
+				ret.ascii += ascii
+			ret.raw += " " + raw
+		}
+		return ret
+	}
+})

src/basicPanel.js

@@ -0,0 +1,45 @@
+var React = require('react');
+var style = require('./basicStyles')
+
+module.exports = React.createClass({
+
+	getDefaultProps: function() 
+	{
+		return {
+			data: null,
+			name: null,
+			renderRow: null
+		};
+	},
+
+	render: function() 
+	{		
+		return (
+			<div style={style.panel.container}>
+			<div style={style.panel.title} >{this.props.name}</div>
+				<div style={style.panel.tableContainer} >
+					<table style={style.panel.table}>
+						<tbody>
+							{this.renderItems()}
+						</tbody>
+					</table>
+				</div>
+			</div>
+			);
+	},
+	
+	renderItems: function()
+	{
+		if (!this.props.data)
+			return []
+		if (!this.props.renderRow)
+		{
+			var ret = []	
+			for (var key in this.props.data)
+				ret.push(<tr key={key} ><td>{this.props.data[key]}</td></tr>)
+			return ret
+		}
+		else
+			return this.props.renderRow(this.props.data) 
+	}	
+})

src/basicStyles.js

@@ -0,0 +1,62 @@
+module.exports = {
+	wrapper:
+	{
+		'fontFamily': "arial,sans-serif"  
+	},
+	container: 
+	{
+		'margin': '10px',
+		'padding': '5px'
+	},
+	address:
+	{
+		'fontStyle': 'italic'
+	},
+	instructionsList:
+	{
+		'width': "320px"
+	},
+	transactionInfo:
+	{
+		'marginTop': '5px'
+	},
+	panel:
+	{
+		container:
+		{
+			'border': '1px solid',
+			'width': '600px'
+		},
+		tableContainer:
+		{
+			'height': '150px',
+			'overflowY': 'auto'
+		},
+		table:
+		{
+			'padding': '5px'
+		},
+		title:
+		{
+			'padding': '5px',
+			'fontStyle': 'italic'
+		}
+	},
+	hidden:
+	{
+		'display': 'none'
+	},
+	display:
+	{
+		'display': 'block'
+	},
+	sticker:
+	{
+		'verticalAlign': 'top',
+		'margin': '5px'
+	},
+	inline:
+	{
+		'display': 'inline-block'
+	}
+}

src/codeUtils.js

@@ -0,0 +1,43 @@
+var opcodes = require('./opcodes')
+
+module.exports = {
+
+	nameOpCodes: function  (raw) 
+	{
+		var pushData = ''
+		var codeMap = {}
+		var code = []
+
+		for (var i = 0; i < raw.length; i++)
+		{
+			var pc = i
+			var curOpCode = opcodes(raw[pc], false).name
+			codeMap[i] = code.length
+		    // no destinations into the middle of PUSH
+		    if (curOpCode.slice(0, 4) === 'PUSH') 
+		    {
+		    	var jumpNum = raw[pc] - 0x5f
+		    	pushData = raw.slice(pc + 1, pc + jumpNum + 1)
+		    	i += jumpNum
+		    }
+		    
+		    code.push(this.pad(pc, this.roundLog(raw.length, 10)) + '  ' + curOpCode + ' ' + pushData.toString('hex'))
+		    pushData = ''
+		}
+		return [ code, codeMap ]
+	},
+
+	pad: function  (num, size) {
+		var s = num + ''
+		while (s.length < size) s = '0' + s
+			return s
+	},
+
+	log: function  (num, base) {
+		return Math.log(num) / Math.log(base)
+	},
+
+	roundLog: function  (num, base) {
+		return Math.ceil(this.log(num, base))
+	}
+}

src/debugger.js

@@ -2,17 +2,19 @@ var React = require('react');
 var TxBrowser = require('./txBrowser');
 var VmTraceManager = require('./vmTraceManager');
 var VmTraceBrowser = require('./vmTraceBrowser');
+var style = require('./basicStyles')
 
 module.exports = React.createClass({
 	getInitialState: function() {
-		return {vmTrace: null}
+		return {vmTrace: null, state: ""}
 	},
 
 	render: function() {
 		return (
-			<div>
+			<div style={style.wrapper} >
-			<h1>Debugger</h1>
+			<h1 style={style.container} >Eth Debugger</h1>
 			<TxBrowser onNewTxRequested={this.retrieveVmTrace} />
+			<div style={style.container} >{this.state.state}</div>
 			<VmTraceBrowser vmTrace={this.state.vmTrace} />
 			</div>
 			);
@@ -20,6 +22,11 @@ module.exports = React.createClass({
 
 	retrieveVmTrace: function(blockNumber, txNumber)
 	{
-		this.setState({vmTrace: VmTraceManager.retrieveVmTrace(blockNumber, txNumber)});
+		this.setState({state: "loading..."})
+		var deb = this
+		VmTraceManager.retrieveVmTrace(blockNumber, txNumber, function(error, result)
+		{
+			deb.setState({vmTrace: result, state: ""});
+		})
 	}
 });

src/opcodes.js

@@ -0,0 +1,178 @@
+const codes = {
+  // 0x0 range - arithmetic ops
+  // name, baseCost, off stack, on stack, dynamic
+  0x00: ['STOP', 0, 0, 0, false],
+  0x01: ['ADD', 3, 2, 1, false],
+  0x02: ['MUL', 5, 2, 1, false],
+  0x03: ['SUB', 3, 2, 1, false],
+  0x04: ['DIV', 5, 2, 1, false],
+  0x05: ['SDIV', 5, 2, 1, false],
+  0x06: ['MOD', 5, 2, 1, false],
+  0x07: ['SMOD', 5, 2, 1, false],
+  0x08: ['ADDMOD', 8, 3, 1, false],
+  0x09: ['MULMOD', 8, 3, 1, false],
+  0x0a: ['EXP', 10, 2, 1, false],
+  0x0b: ['SIGNEXTEND', 5, 1, 1, false],
+
+  // 0x10 range - bit ops
+  0x10: ['LT', 3, 2, 1, false],
+  0x11: ['GT', 3, 2, 1, false],
+  0x12: ['SLT', 3, 2, 1, false],
+  0x13: ['SGT', 3, 2, 1, false],
+  0x14: ['EQ', 3, 2, 1, false],
+  0x15: ['ISZERO', 3, 1, 1, false],
+  0x16: ['AND', 3, 2, 1, false],
+  0x17: ['OR', 3, 2, 1, false],
+  0x18: ['XOR', 3, 2, 1, false],
+  0x19: ['NOT', 3, 1, 1, false],
+  0x1a: ['BYTE', 3, 2, 1, false],
+
+  // 0x20 range - crypto
+  0x20: ['SHA3', 30, 2, 1, false],
+
+  // 0x30 range - closure state
+  0x30: ['ADDRESS', 2, 0, 1, true],
+  0x31: ['BALANCE', 20, 1, 1, true],
+  0x32: ['ORIGIN', 2, 0, 1, true],
+  0x33: ['CALLER', 2, 0, 1, true],
+  0x34: ['CALLVALUE', 2, 0, 1, true],
+  0x35: ['CALLDATALOAD', 3, 1, 1, true],
+  0x36: ['CALLDATASIZE', 2, 0, 1, true],
+  0x37: ['CALLDATACOPY', 3, 3, 0, true],
+  0x38: ['CODESIZE', 2, 0, 1, false],
+  0x39: ['CODECOPY', 3, 3, 0, false],
+  0x3a: ['GASPRICE', 2, 0, 1, false],
+  0x3b: ['EXTCODESIZE', 20, 1, 1, true],
+  0x3c: ['EXTCODECOPY', 20, 4, 0, true],
+
+  // '0x40' range - block operations
+  0x40: ['BLOCKHASH', 20, 1, 1, true],
+  0x41: ['COINBASE', 2, 0, 1, true],
+  0x42: ['TIMESTAMP', 2, 0, 1, true],
+  0x43: ['NUMBER', 2, 0, 1, true],
+  0x44: ['DIFFICULTY', 2, 0, 1, true],
+  0x45: ['GASLIMIT', 2, 0, 1, true],
+
+  // 0x50 range - 'storage' and execution
+  0x50: ['POP', 2, 1, 0, false],
+  0x51: ['MLOAD', 3, 1, 1, false],
+  0x52: ['MSTORE', 3, 2, 0, false],
+  0x53: ['MSTORE8', 3, 2, 0, false],
+  0x54: ['SLOAD', 50, 1, 1, true],
+  0x55: ['SSTORE', 0, 2, 0, true],
+  0x56: ['JUMP', 8, 1, 0, false],
+  0x57: ['JUMPI', 10, 2, 0, false],
+  0x58: ['PC', 2, 0, 1, false],
+  0x59: ['MSIZE', 2, 0, 1, false],
+  0x5a: ['GAS', 2, 0, 1, false],
+  0x5b: ['JUMPDEST', 1, 0, 0, false],
+
+  // 0x60, range
+  0x60: ['PUSH', 3, 0, 1, false],
+  0x61: ['PUSH', 3, 0, 1, false],
+  0x62: ['PUSH', 3, 0, 1, false],
+  0x63: ['PUSH', 3, 0, 1, false],
+  0x64: ['PUSH', 3, 0, 1, false],
+  0x65: ['PUSH', 3, 0, 1, false],
+  0x66: ['PUSH', 3, 0, 1, false],
+  0x67: ['PUSH', 3, 0, 1, false],
+  0x68: ['PUSH', 3, 0, 1, false],
+  0x69: ['PUSH', 3, 0, 1, false],
+  0x6a: ['PUSH', 3, 0, 1, false],
+  0x6b: ['PUSH', 3, 0, 1, false],
+  0x6c: ['PUSH', 3, 0, 1, false],
+  0x6d: ['PUSH', 3, 0, 1, false],
+  0x6e: ['PUSH', 3, 0, 1, false],
+  0x6f: ['PUSH', 3, 0, 1, false],
+  0x70: ['PUSH', 3, 0, 1, false],
+  0x71: ['PUSH', 3, 0, 1, false],
+  0x72: ['PUSH', 3, 0, 1, false],
+  0x73: ['PUSH', 3, 0, 1, false],
+  0x74: ['PUSH', 3, 0, 1, false],
+  0x75: ['PUSH', 3, 0, 1, false],
+  0x76: ['PUSH', 3, 0, 1, false],
+  0x77: ['PUSH', 3, 0, 1, false],
+  0x78: ['PUSH', 3, 0, 1, false],
+  0x79: ['PUSH', 3, 0, 1, false],
+  0x7a: ['PUSH', 3, 0, 1, false],
+  0x7b: ['PUSH', 3, 0, 1, false],
+  0x7c: ['PUSH', 3, 0, 1, false],
+  0x7d: ['PUSH', 3, 0, 1, false],
+  0x7e: ['PUSH', 3, 0, 1, false],
+  0x7f: ['PUSH', 3, 0, 1, false],
+
+  0x80: ['DUP', 3, 0, 1, false],
+  0x81: ['DUP', 3, 0, 1, false],
+  0x82: ['DUP', 3, 0, 1, false],
+  0x83: ['DUP', 3, 0, 1, false],
+  0x84: ['DUP', 3, 0, 1, false],
+  0x85: ['DUP', 3, 0, 1, false],
+  0x86: ['DUP', 3, 0, 1, false],
+  0x87: ['DUP', 3, 0, 1, false],
+  0x88: ['DUP', 3, 0, 1, false],
+  0x89: ['DUP', 3, 0, 1, false],
+  0x8a: ['DUP', 3, 0, 1, false],
+  0x8b: ['DUP', 3, 0, 1, false],
+  0x8c: ['DUP', 3, 0, 1, false],
+  0x8d: ['DUP', 3, 0, 1, false],
+  0x8e: ['DUP', 3, 0, 1, false],
+  0x8f: ['DUP', 3, 0, 1, false],
+
+  0x90: ['SWAP', 3, 0, 0, false],
+  0x91: ['SWAP', 3, 0, 0, false],
+  0x92: ['SWAP', 3, 0, 0, false],
+  0x93: ['SWAP', 3, 0, 0, false],
+  0x94: ['SWAP', 3, 0, 0, false],
+  0x95: ['SWAP', 3, 0, 0, false],
+  0x96: ['SWAP', 3, 0, 0, false],
+  0x97: ['SWAP', 3, 0, 0, false],
+  0x98: ['SWAP', 3, 0, 0, false],
+  0x99: ['SWAP', 3, 0, 0, false],
+  0x9a: ['SWAP', 3, 0, 0, false],
+  0x9b: ['SWAP', 3, 0, 0, false],
+  0x9c: ['SWAP', 3, 0, 0, false],
+  0x9d: ['SWAP', 3, 0, 0, false],
+  0x9e: ['SWAP', 3, 0, 0, false],
+  0x9f: ['SWAP', 3, 0, 0, false],
+
+  0xa0: ['LOG', 375, 2, 0, false],
+  0xa1: ['LOG', 375, 3, 0, false],
+  0xa2: ['LOG', 375, 4, 0, false],
+  0xa3: ['LOG', 375, 5, 0, false],
+  0xa4: ['LOG', 375, 6, 0, false],
+
+  // '0xf0' range - closures
+  0xf0: ['CREATE', 32000, 3, 1, true],
+  0xf1: ['CALL', 40, 7, 1, true],
+  0xf2: ['CALLCODE', 40, 7, 1, true],
+  0xf3: ['RETURN', 0, 2, 0, false],
+  0xf4: ['DELEGATECALL', 40, 6, 1, true],
+
+  // '0x70', range - other
+  0xff: ['SUICIDE', 0, 1, 0, false]
+}
+
+module.exports = function (op, full) {
+  var code = codes[op] ? codes[op] : ['INVALID', 0]
+  var opcode = code[0]
+
+  if (full) {
+    if (opcode === 'LOG') {
+      opcode += op - 0xa0
+    }
+
+    if (opcode === 'PUSH') {
+      opcode += op - 0x5f
+    }
+
+    if (opcode === 'DUP') {
+      opcode += op - 0x7f
+    }
+
+    if (opcode === 'SWAP') {
+      opcode += op - 0x8f
+    }
+  }
+
+  return {name: opcode, fee: code[1], in: code[2], out: code[3], dynamic: code[4], async: code[5]}
+}

src/sticker.js

@@ -0,0 +1,36 @@
+var React = require('react');
+var style = require('./basicStyles')
+
+module.exports = React.createClass({
+
+	getDefaultProps: function() 
+	{
+		return {
+			data: null,
+		};
+	},
+
+	render: function() 
+	{		
+		return (
+			<div>
+			<table><tbody>
+				{this.renderItems()}
+			</tbody></table>
+			</div>
+			);
+	},
+	
+	renderItems: function()
+	{
+
+		if (this.props.data)
+		{
+			var ret = []	
+			for (var key in this.props.data)
+				ret.push(<tr key={key}><td>{this.props.data[key]}</td></tr>)
+			return ret			
+		}
+		return null
+	},
+})

src/txBrowser.js

@@ -1,4 +1,5 @@
 var React = require('react');
+var style = require('./basicStyles')
 
 module.exports = React.createClass({
 	propTypes: {
@@ -6,12 +7,14 @@ module.exports = React.createClass({
 	},
 
 	getInitialState: function() {
-		return {blockNumber: "1160004", txNumber: "1"}
+		return {blockNumber: "1382256", txNumber: "1", from: "", to: "", hash: ""}
 	},
 
 	submit: function()
 	{
-		this.props.onNewTxRequested(this.state.blockNumber, parseInt(this.state.txNumber));
+		var tx = web3.eth.getTransactionFromBlock(this.state.blockNumber, this.state.txNumber)
+		this.setState({from: tx.from, to: tx.to, hash: tx.hash})
+		this.props.onNewTxRequested(this.state.blockNumber, parseInt(this.state.txNumber))
 	},
 	
 	updateBlockN: function(ev) {
@@ -24,11 +27,15 @@ module.exports = React.createClass({
 
 	render: function() {		
 		return (
-			<div>
+			<div style={style.container} >
-			<div><h3>Transaction details</h3></div>
+			<input onChange={this.updateBlockN} type="text" placeholder= {"Block number or hash (default 1382256)" + this.state.blockNumber}></input>
-			<input onChange={this.updateBlockN} type="text" placeholder= {"Block number e.g. : " + this.state.blockNumber}></input>
+			<input onChange={this.updateTxN} type="text" placeholder={"Transaction Number (default 1) " + this.state.txNumber}></input>
-			<input onChange={this.updateTxN} type="text" placeholder={"Transaction Number e.g. : " + this.state.txNumber}></input>
 			<button onClick={this.submit}>Get</button>
+			<div style={style.transactionInfo}>
+			<div>Hash: {this.state.hash}</div>
+			<div>From: {this.state.from}</div>
+			<div>To: {this.state.to}</div>
+			</div>
 			</div>
 			);
 	}

src/vmTraceManager.js

@@ -1,5 +1,8 @@
 module.exports = {
-	retrieveVmTrace: function(blockNumber, txNumber) {
+	retrieveVmTrace: function(blockNumber, txNumber, callBack) {
-		return web3.admin.vmTrace(blockNumber, parseInt(txNumber));
+			web3.debug.trace(blockNumber, parseInt(txNumber), function(error, result)
+			{
+				callBack(error, result)
+			});
 	}
 }

src/web3Admin.js

@@ -58,8 +58,8 @@ module.exports = {
         	new web3._extend.Method({
         		name: 'vmTrace',
         		call: 'admin_eth_vmTrace',
-        		inputFormatter: [null, null],
+        		inputFormatter: [null, null, null],
-        		params: 2
+        		params: 3
         	}), 
         	],
         	properties:
@@ -92,6 +92,13 @@ module.exports = {
         	property: 'debug',
         	methods:
         	[
+        	new web3._extend.Method({
+        		name: 'trace',
+        		call: 'debug_trace',
+        		params: 1,
+        		inputFormatter: [null, null],
+        		params: 2
+        	}),
         	new web3._extend.Method({
         		name: 'printBlock',
         		call: 'debug_printBlock',
@@ -266,5 +273,5 @@ module.exports = {
         	]
         });
     }
-    };
+};