Event and Watchers.qml

mix/ClientModel.cpp

@@ -206,6 +206,21 @@ QVariantList ClientModel::gasCosts() const
 	return res;
 }
 
+void ClientModel::addAccount(QString const& _secret, QString const& _amount)
+{
+	KeyPair key(Secret(_secret.toStdString()));
+	m_accountsSecret.push_back(key);
+	Address address = key.address();
+	m_accounts[address] = Account(u256(_amount.toStdString()), Account::NormalCreation);
+	m_ethAccounts->setAccounts(m_accountsSecret);
+}
+
+QString ClientModel::resolveAddress(QString const& _secret)
+{
+	KeyPair key(Secret(_secret.toStdString()));
+	return "0x" + QString::fromStdString(key.address().hex());
+}
+
 void ClientModel::setupScenario(QVariantMap _scenario)
 {
 	onStateReset();
@@ -336,6 +351,7 @@ void ClientModel::executeSequence(vector<TransactionSettings> const& _sequence)
 				if (!transaction.isFunctionCall)
 				{
 					callAddress(Address(address.toStdString()), bytes(), transaction);
+
 					onNewTransaction();
 					continue;
 				}
@@ -674,7 +690,7 @@ RecordLogEntry* ClientModel::lastBlock() const
 	strGas << blockInfo.gasUsed;
 	stringstream strNumber;
 	strNumber << blockInfo.number;
-	RecordLogEntry* record =  new RecordLogEntry(0, QString::fromStdString(strNumber.str()), tr(" - Block - "), tr("Hash: ") + QString(QString::fromStdString(dev::toHex(blockInfo.hash().ref()))), QString(), QString(), QString(), false, RecordLogEntry::RecordType::Block, QString::fromStdString(strGas.str()), QString(), tr("Block"), QVariantMap(), QVariantList());
+	RecordLogEntry* record =  new RecordLogEntry(0, QString::fromStdString(strNumber.str()), tr(" - Block - "), tr("Hash: ") + QString(QString::fromStdString(dev::toHex(blockInfo.hash().ref()))), QString(), QString(), QString(), false, RecordLogEntry::RecordType::Block, QString::fromStdString(strGas.str()), QString(), tr("Block"), QVariantMap(), QVariantMap(), QVariantList());
 	QQmlEngine::setObjectOwnership(record, QQmlEngine::JavaScriptOwnership);
 	return record;
 }
@@ -735,6 +751,7 @@ void ClientModel::onNewTransaction()
 	Address contractAddress = (bool)tr.address ? tr.address : tr.contractAddress;
 	auto contractAddressIter = m_contractNames.find(contractAddress);
 	QVariantMap inputParameters;
+	QVariantMap returnParameters;
 	QVariantList logs;
 	if (contractAddressIter != m_contractNames.end())
 	{
@@ -754,6 +771,11 @@ void ClientModel::onNewTransaction()
 				returned += "(";
 				returned += returnValues.join(", ");
 				returned += ")";
+
+				QStringList returnParams = encoder.decode(funcDef->returnParameters(), tr.result.output);
+				for (int k = 0; k < returnParams.length(); ++k)
+					returnParameters.insert(funcDef->returnParameters().at(k)->name(), returnParams.at(k));
+
 				bytes data = tr.inputParameters;
 				data.erase(data.begin(), data.begin() + 4);
 				QStringList parameters = encoder.decode(funcDef->parametersList(), data);
@@ -837,21 +859,25 @@ void ClientModel::onNewTransaction()
 		}
 
 	RecordLogEntry* log = new RecordLogEntry(recordIndex, transactionIndex, contract, function, value, address, returned, tr.isCall(), RecordLogEntry::RecordType::Transaction,
-											 gasUsed, sender, label, inputParameters, logs);
+											 gasUsed, sender, label, inputParameters, returnParameters, logs);
 	QQmlEngine::setObjectOwnership(log, QQmlEngine::JavaScriptOwnership);
 	emit newRecord(log);
+
+	// retrieving all accounts balance
+	QVariantMap state;
 	QVariantMap accountBalances;
 	for (auto const& ctr : m_contractAddresses)
 	{
-		u256 wei = m_client.balanceAt(ctr);
-		accountBalances.insert(ctr, wei);
+		u256 wei = m_client->balanceAt(ctr.second, PendingBlock);		
+		accountBalances.insert("0x" + QString::fromStdString(ctr.second.hex()), QEther(wei, QEther::Wei).format());
 	}
-	for (auto const& account : m_account)
+	for (auto const& account : m_accounts)
 	{
-		u256 wei = m_client.balanceAt(account);
-		accountBalances.insert(ctr, wei);
+		u256 wei = m_client->balanceAt(account.first, PendingBlock);
+		accountBalances.insert("0x" + QString::fromStdString(account.first.hex()),  QEther(wei, QEther::Wei).format());
 	}
-	emit newState(recordIndex, accountBalances);
+	state.insert("accounts", accountBalances);
+	emit newState(recordIndex, state);
 }
 
 }

mix/ClientModel.h

@@ -32,6 +32,7 @@
 #include <QVariableDeclaration.h>
 #include <libethereum/Account.h>
 #include "MachineStates.h"
+#include "QEther.h"
 
 namespace dev
 {
@@ -115,6 +116,8 @@ class RecordLogEntry: public QObject
 	Q_PROPERTY(QString label MEMBER m_label CONSTANT)
 	/// input parameters
 	Q_PROPERTY(QVariantMap parameters MEMBER m_inputParameters CONSTANT)
+	/// return parameters
+	Q_PROPERTY(QVariantMap returnParameters MEMBER m_returnParameters CONSTANT)
 	/// logs
 	Q_PROPERTY(QVariantList logs MEMBER m_logs CONSTANT)
 
@@ -128,9 +131,9 @@ public:
 	RecordLogEntry():
 		m_recordIndex(0), m_call(false), m_type(RecordType::Transaction) {}
 	RecordLogEntry(unsigned _recordIndex, QString _transactionIndex, QString _contract, QString _function, QString _value, QString _address, QString _returned, bool _call, RecordType _type, QString _gasUsed,
-				   QString _sender, QString _label, QVariantMap _inputParameters, QVariantList _logs):
+				   QString _sender, QString _label, QVariantMap _inputParameters, QVariantMap _returnParameters, QVariantList _logs):
 		m_recordIndex(_recordIndex), m_transactionIndex(_transactionIndex), m_contract(_contract), m_function(_function), m_value(_value), m_address(_address), m_returned(_returned), m_call(_call), m_type(_type), m_gasUsed(_gasUsed),
-		m_sender(_sender), m_label(_label), m_inputParameters(_inputParameters), m_logs(_logs) {}
+		m_sender(_sender), m_label(_label), m_inputParameters(_inputParameters), m_returnParameters(_returnParameters), m_logs(_logs) {}
 
 private:
 	unsigned m_recordIndex;
@@ -146,6 +149,7 @@ private:
 	QString m_sender;
 	QString m_label;
 	QVariantMap m_inputParameters;
+	QVariantMap m_returnParameters;
 	QVariantList m_logs;
 };
 
@@ -183,6 +187,10 @@ public:
 	Q_INVOKABLE QString encodeStringParam(QString const& _param);
 	/// To Hex number
 	Q_INVOKABLE QString toHex(QString const& _int);
+	/// Add new account to the model
+	Q_INVOKABLE void addAccount(QString const& _secret, QString const& _amount);
+	/// Return the address associated with the current secret
+	Q_INVOKABLE QString resolveAddress(QString const& _secret);
 
 public slots:
 	/// Setup scenario, run transaction sequence, show debugger for the last transaction

mix/qml.qrc

@@ -69,5 +69,7 @@
         <file>qml/ScenarioExecution.qml</file>
         <file>qml/ScenarioLoader.qml</file>
         <file>qml/ScenarioButton.qml</file>
+        <file>qml/Watchers.qml</file>
+        <file>qml/KeyValuePanel.qml</file>
     </qresource>
 </RCC>

mix/qml/Block.qml

@@ -37,6 +37,13 @@ ColumnLayout
 			return trHeight
 	}
 
+	function editTx(txIndex)
+	{
+		transactionDialog.stateAccounts = scenario.accounts
+		transactionDialog.execute = false
+		transactionDialog.open(txIndex, blockIndex,  transactions.get(txIndex))
+	}
+
 	onOpenedTrChanged:
 	{
 		Layout.preferredHeight = calculateHeight()
@@ -158,7 +165,7 @@ ColumnLayout
 					anchors.top: parent.top
 					anchors.left: parent.left
 					anchors.leftMargin: -9
-					anchors.topMargin: -9
+					anchors.topMargin: -4
 					id: saveStatusImage
 					source: "qrc:/qml/img/recyclediscard@2x.png"
 					width: statusWidth + 20
@@ -195,177 +202,115 @@ ColumnLayout
 			Rectangle
 			{
 				Layout.preferredWidth: blockWidth
-				Layout.preferredHeight: parent.height
+				Layout.preferredHeight: trHeight
+				height: trHeight
 				color: "#DEDCDC"
 				id: rowContentTr
 				anchors.top: parent.top
 
+				property bool selected: false
+				Connections
+				{
+					target: blockChainPanel
+					onTxSelected: {
+						if (root.blockIndex !== blockIndex || index !== txIndex)
+							rowContentTr.deselect()
+					}
+				}
+
+				function deselect()
+				{
+					rowContentTr.selected = false
+					rowContentTr.color = "#DEDCDC"
+					hash.color = labelColor
+					func.color = labelColor
+				}
+
 				MouseArea
 				{
 					anchors.fill: parent
+					onClicked: {
+						if (!rowContentTr.selected)
+						{
+							rowContentTr.selected = true
+							rowContentTr.color = "#4F4F4F"
+							hash.color = "#EAB920"
+							func.color = "#EAB920"
+							txSelected(index)
+						}
+						else
+							rowContentTr.deselect()
+
+					}
 					onDoubleClicked:
 					{
-						/*
-						transactionDialog.stateAccounts = scenario.accounts
-						transactionDialog.execute = false
-						transactionDialog.open(index, blockIndex,  transactions.get(index))
-						*/
-						txSelected(index)
+						root.editTx(index)
 					}
 				}
 
-				ColumnLayout
+				RowLayout
 				{
-					anchors.top: parent.top
-					width: parent.width
-					spacing: 20
-					RowLayout
+					Layout.fillWidth: true
+					Layout.preferredHeight: trHeight - 10
+					anchors.verticalCenter: parent.verticalCenter
+					Rectangle
 					{
-						anchors.top: parent.top
-						Layout.fillWidth: true
-						Rectangle
+						Layout.preferredWidth: fromWidth
+						anchors.left: parent.left
+						anchors.leftMargin: horizontalMargin
+						Text
 						{
-							Layout.preferredWidth: fromWidth
-							anchors.left: parent.left
-							anchors.leftMargin: horizontalMargin
-							Text
-							{
-								id: hash
-								width: parent.width - 30
-								elide: Text.ElideRight
-								anchors.verticalCenter: parent.verticalCenter
-								maximumLineCount: 1
-								color: labelColor
-								font.pointSize: dbgStyle.absoluteSize(1)
-								font.bold: true
-								text: {
-									if (index >= 0)
-										return transactions.get(index).sender
-									else
-										return ""
-								}
-							}
-						}
-
-						Rectangle
-						{
-							Layout.preferredWidth: toWidth
-							Text
-							{
-								id: func
-								text: {
-									if (index >= 0)
-										parent.parent.userFrienldyToken(transactions.get(index).label)
-									else
-										return ""
-								}
-								elide: Text.ElideRight
-								anchors.verticalCenter: parent.verticalCenter
-								color: labelColor
-								font.pointSize: dbgStyle.absoluteSize(1)
-								font.bold: true
-								maximumLineCount: 1
-								width: parent.width
-							}
-						}
-
-						function userFrienldyToken(value)
-						{
-							if (value && value.indexOf("<") === 0)
-							{
-								if (value.split("> ")[1] === " - ")
-									return value.split(" - ")[0].replace("<", "")
+							id: hash
+							width: parent.width - 30
+							elide: Text.ElideRight
+							anchors.verticalCenter: parent.verticalCenter
+							maximumLineCount: 1
+							color: labelColor
+							font.pointSize: dbgStyle.absoluteSize(1)
+							font.bold: true
+							text: {
+								if (index >= 0)
+									return clientModel.resolveAddress(transactions.get(index).sender)
 								else
-									return value.split(" - ")[0].replace("<", "") + "." + value.split("> ")[1] + "()";
-							}
-							else
-								return value
-						}
-
-						Rectangle
-						{
-							Layout.preferredWidth: valueWidth
-							Text
-							{
-								id: returnValue
-								elide: Text.ElideRight
-								anchors.verticalCenter: parent.verticalCenter
-								maximumLineCount: 1
-								color: labelColor
-								font.bold: true
-								font.pointSize: dbgStyle.absoluteSize(1)
-								width: parent.width - 30
-								text: {
-									if (index >= 0 && transactions.get(index).returned)
-										return transactions.get(index).returned
-									else
-										return ""
-								}
+									return ""
 							}
 						}
+					}
 
-						Rectangle
+					Rectangle
+					{
+						Layout.preferredWidth: toWidth
+						Text
 						{
-							Layout.preferredWidth: logsWidth
-							Layout.preferredHeight: trHeight - 10
-							width: logsWidth
-							color: "transparent"
-							Text
-							{
-								id: logs
-								anchors.left: parent.left
-								anchors.verticalCenter: parent.verticalCenter
-								anchors.leftMargin: 10
-								color: labelColor
-								font.bold: true
-								font.pointSize: dbgStyle.absoluteSize(1)
-								text: {
-									if (index >= 0 && transactions.get(index).logs && transactions.get(index).logs.count)
-										return transactions.get(index).logs.count
-									else
-										return ""
-								}
-							}
-							MouseArea {
-								anchors.fill: parent
-								onClicked: {
-									rowTransaction.displayContent();
-								}
+							id: func
+							text: {
+								if (index >= 0)
+									parent.parent.userFrienldyToken(transactions.get(index).label)
+								else
+									return ""
 							}
+							elide: Text.ElideRight
+							anchors.verticalCenter: parent.verticalCenter
+							color: labelColor
+							font.pointSize: dbgStyle.absoluteSize(1)
+							font.bold: true
+							maximumLineCount: 1
+							width: parent.width
 						}
 					}
 
-					RowLayout
+					function userFrienldyToken(value)
 					{
-						id: rowDetailedContent
-						visible: false
-						Layout.preferredHeight:{
-							if (index >= 0 && transactions.get(index).logs)
-								return 100 * transactions.get(index).logs.count
-							else
-								return 100
-						}
-						onVisibleChanged:
+						if (value && value.indexOf("<") === 0)
 						{
-							var lognb = transactions.get(index).logs.count
-							if (visible)
-							{
-								rowContentTr.Layout.preferredHeight = trHeight + 100 * lognb
-								openedTr += 100 * lognb
-							}
+							if (value.split("> ")[1] === " - ")
+								return value.split(" - ")[0].replace("<", "")
 							else
-							{
-								rowContentTr.Layout.preferredHeight = trHeight
-								openedTr -= 100 * lognb
-							}
-						}
-
-						Text {
-							anchors.left: parent.left
-							anchors.leftMargin: horizontalMargin
-							id: logsText
+								return value.split(" - ")[0].replace("<", "") + "." + value.split("> ")[1] + "()";
 						}
-					}
+						else
+							return value
+					}					
 				}
 			}
 
@@ -374,7 +319,6 @@ ColumnLayout
 				width: debugActionWidth
 				height: trHeight
 				anchors.left: rowContentTr.right
-				anchors.topMargin: -6
 				anchors.top: rowContentTr.top
 				anchors.leftMargin: -50
 				color: "transparent"

mix/qml/BlockChain.qml

@@ -13,14 +13,17 @@ import "."
 
 ColumnLayout {
 	id: blockChainPanel
+	property alias trDialog: transactionDialog
+	property alias blockChainRepeater: blockChainRepeater
 	property variant model
-	property var states: {}
+	property var states: ({})
 	spacing: 0
 	property int previousWidth
 	property variant debugTrRequested: []
 	signal chainChanged
 	signal chainReloaded
 	signal txSelected(var blockIndex, var txIndex)
+	signal rebuilding
 
 	Connections
 	{
@@ -42,21 +45,21 @@ ColumnLayout {
 		var minWidth = scenarioMinWidth - 20 // margin
 		if (width <= minWidth || previousWidth <= minWidth)
 		{
-			fromWidth = 100
-			toWidth = 100
-			valueWidth = 200
+			fromWidth = 250
+			toWidth = 240
+			//valueWidth = 200
 		}
 		else
 		{
 			var diff = (width - previousWidth) / 3;
-			fromWidth = fromWidth + diff < 100 ? 100 : fromWidth + diff
-			toWidth = toWidth + diff < 100 ? 100 : toWidth + diff
-			valueWidth = valueWidth + diff < 200 ? 200 : valueWidth + diff
+			fromWidth = fromWidth + diff < 250 ? 250 : fromWidth + diff
+			toWidth = toWidth + diff < 240 ? 240 : toWidth + diff
+			//valueWidth = valueWidth + diff < 200 ? 200 : valueWidth + diff
 		}
 		previousWidth = width
 	}
 
-	function state(record)
+	function getState(record)
 	{
 		return states[record]
 	}
@@ -76,10 +79,8 @@ ColumnLayout {
 	}
 
 	property int statusWidth: 30
-	property int fromWidth: 150
-	property int toWidth: 100
-	property int valueWidth: 200
-	property int logsWidth: 40
+	property int fromWidth: 250
+	property int toWidth: 240
 	property int debugActionWidth: 40
 	property int horizontalMargin: 10
 	property int cellSpacing: 10
@@ -120,16 +121,6 @@ ColumnLayout {
 			Layout.preferredWidth: toWidth + cellSpacing
 		}
 		Label
-		{
-			text: "Value"
-			Layout.preferredWidth: valueWidth + cellSpacing
-		}
-		Label
-		{
-			text: "Logs"
-			Layout.preferredWidth: logsWidth + cellSpacing
-		}
-		Label
 		{
 			text: ""
 			Layout.preferredWidth: debugActionWidth
@@ -170,13 +161,19 @@ ColumnLayout {
 				{
 					id: blockChainRepeater
 					model: blockModel
+
+					function editTx(blockIndex, txIndex)
+					{
+						itemAt(blockIndex).editTx(txIndex)
+					}
+
 					Block
 					{
 						Connections
 						{
 							target: block
 							onTxSelected: {
-								txSelected(index, txIndex)
+								blockChainPanel.txSelected(index, txIndex)
 							}
 						}
 						id: block
@@ -264,6 +261,8 @@ ColumnLayout {
 	Rectangle
 	{
 		Layout.preferredWidth: parent.width
+		Layout.preferredHeight: 70
+		color: "transparent"
 		RowLayout
 		{
 			anchors.horizontalCenter: parent.horizontalCenter
@@ -286,6 +285,7 @@ ColumnLayout {
 					{
 						if (ensureNotFuturetime.running)
 							return;
+						rebuilding()
 						stopBlinking()
 						states = []
 						var retBlocks = [];
@@ -333,7 +333,7 @@ ColumnLayout {
 							blockModel.append(model.blocks[j])
 
 						ensureNotFuturetime.start()
-						clientModel.setupScenario(model);
+						clientModel.setupScenario(model);						
 					}
 					buttonShortcut: ""
 					sourceImg: "qrc:/qml/img/recycleicon@2x.png"
@@ -465,11 +465,13 @@ ColumnLayout {
 							tr.recordIndex = _r.recordIndex
 							tr.logs = _r.logs
 							tr.sender = _r.sender
+							tr.returnParameters = _r.returnParameters
 							var trModel = blockModel.getTransaction(blockIndex, trIndex)
 							trModel.returned = _r.returned
 							trModel.recordIndex = _r.recordIndex
 							trModel.logs = _r.logs
 							trModel.sender = _r.sender
+							trModel.returnParameters = _r.returnParameters
 							blockModel.setTransaction(blockIndex, trIndex, trModel)
 							return;
 						}
@@ -489,6 +491,7 @@ ColumnLayout {
 					itemTr.sender = _r.sender
 					itemTr.recordIndex = _r.recordIndex
 					itemTr.logs = _r.logs
+					itemTr.returnParameters = _r.returnParameters
 					model.blocks[model.blocks.length - 1].transactions.push(itemTr)
 					blockModel.appendTransaction(itemTr)
 				}

mix/qml/KeyValuePanel.qml

@@ -14,48 +14,112 @@ import "."
 ColumnLayout {
 	id: root
 	property alias title: titleLabel.text
-	property variant data
+	property variant _data
+	property string role
+	property alias model: modelKeyValue
 
-	function key(index)
+	function clear()
 	{
+		modelKeyValue.clear()
 	}
 
-	function value(index)
+	function init()
 	{
+		modelKeyValue.clear()
+		if (typeof(computeData) !== "undefined" && computeData instanceof Function)
+			computeData()
+		else
+		{
+			console.log("--------------")
+			console.log(JSON.stringify(_data))
+			console.log(role)
+			if (_data !== undefined && _data[role] !== undefined)
+			{
+				var keys = Object.keys(_data[role])
+				for (var k in keys)
+				{
+					modelKeyValue.append({ "key": keys[k] === "" ? "undefined" : keys[k], "value": _data[role][keys[k]] })
+				}
+			}
+		}
 	}
 
 	RowLayout
 	{
+		Layout.preferredHeight: 20
+		Layout.fillWidth: true
 		Label
 		{
 			id: titleLabel
+			anchors.left: parent.left
+			anchors.verticalCenter: parent.verticalCenter
+			color: "white"
 		}
 	}
 
 	RowLayout
 	{
-		Repeater
+		Layout.fillWidth: true
+		Layout.preferredHeight: 100
+		ListModel
 		{
-			id: repeaterKeyValue
-			RowLayout
+			id: modelKeyValue
+		}
+
+		Rectangle
+		{
+			Layout.fillWidth: true
+			Layout.fillHeight: true
+			color: "white"
+			radius: 2
+			ScrollView
 			{
-				Rectangle
+				id: columnValues
+				horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
+				anchors.fill: parent
+				ColumnLayout
 				{
-					id: key
-					Label
+					anchors.margins: 10
+					Repeater
 					{
-						text: {
-							return root.key(index)
-						}
-					}
-				}
-				Rectangle
-				{
-					id: value
-					Label
-					{
-						text: {
-							return root.value(index)
+						id: repeaterKeyValue
+						model: modelKeyValue
+						RowLayout
+						{
+							Layout.fillWidth: true
+							Layout.preferredHeight: 30
+							spacing: 0
+							Rectangle
+							{
+								Layout.preferredWidth: columnValues.width / 2
+								Label
+								{
+									anchors.left: parent.left
+									anchors.leftMargin: 10
+									text: {
+										if (index >=  0)
+											return repeaterKeyValue.model.get(index).key
+										else
+											return ""
+									}
+								}
+							}
+
+							Rectangle
+							{
+								Layout.preferredWidth: columnValues.width / 2 - 10
+								Label
+								{
+									anchors.right: parent.right
+									anchors.rightMargin: 10
+									text: {
+										if (index >= 0)
+											return repeaterKeyValue.model.get(index).value
+										else
+											return ""
+									}
+								}
+							}
 						}
 					}
 				}

mix/qml/MainContent.qml

@@ -31,7 +31,7 @@ Rectangle {
 	property alias codeEditor: codeEditor
 	property bool webViewHorizontal: codeWebSplitter.orientation === Qt.Vertical //vertical splitter positions elements vertically, splits screen horizontally
 	property bool firstCompile: true
-	property int scenarioMinWidth: 590
+	property int scenarioMinWidth: 620
 
 	Connections {
 		target: codeModel

mix/qml/ScenarioExecution.qml

@@ -8,6 +8,7 @@ import "js/Debugger.js" as Debugger
 import "js/ErrorLocationFormater.js" as ErrorLocationFormater
 import "."
 
+
 Rectangle {
 	color: "#ededed"
 	property alias bc: blockChain
@@ -20,70 +21,94 @@ Rectangle {
 		}
 	}
 
-	Column
+	ScrollView
 	{
-		id: scenarioColumn
-		anchors.margins: 10
 		anchors.fill: parent
-		spacing: 10
-		ScenarioLoader
-		{
-			height: 100
-			width: parent.width
-			id: loader
+		onWidthChanged: {
+			columnExe.width = width - 40
 		}
 
-		Connections
+		ColumnLayout
 		{
-			target: blockChain
-			onChainChanged:
-			{
-				loader.needSaveOrReload()
-			}
-		}
+			id: columnExe
+			Layout.preferredWidth: parent.width
+			width: parent.width - 40
+			anchors.left: parent.left
+			anchors.leftMargin: 15
+			ColumnLayout
+			{				
+				id: scenarioColumn
+				width: parent.width
+				spacing: 10				
+				ScenarioLoader
+				{
+					anchors.horizontalCenter: parent.horizontalCenter
+					height: 100
+					Layout.preferredWidth: 400
+					width: 400
+					id: loader
+				}
 
-		Rectangle
-		{
-			width: parent.parent.width
-			height: 1
-			color: "#cccccc"
-		}
+				Connections
+				{
+					target: blockChain
+					onChainChanged:
+					{
+						loader.needSaveOrReload()
+					}
+				}
 
-		Connections
-		{
-			target: loader
-			onLoaded:
-			{
-				blockChain.load(scenario)
-			}
-		}
+				Rectangle
+				{
+					Layout.preferredWidth: parent.width
+					height: 1
+					color: "#cccccc"
+				}
 
-		BlockChain
-		{
-			id: blockChain
-			width: parent.width
-		}
+				Connections
+				{
+					target: loader
+					onLoaded:
+					{
+						watchers.clear()
+						blockChain.load(scenario)
+					}
+				}
 
-		Connections
-		{
-			target: blockChain
-			onTxSelected:{
-				var tx = model.block[blockIndex].transactions[txIndex]
-				var state =  blockChain.getState(tx.recordIndex)
-				watchers.updateWidthTx(tx, state)
+				BlockChain
+				{
+					id: blockChain
+					width: parent.width
+				}
+
+				Connections
+				{
+					target: blockChain
+					onTxSelected: {
+						var tx = blockChain.model.blocks[blockIndex].transactions[txIndex]
+						var state = blockChain.getState(tx.recordIndex)
+						watchers.updateWidthTx(tx, state, blockIndex, txIndex)
+					}
+					onRebuilding: {
+						watchers.clear()
+					}
+				}
 			}
-		}
-	}
 
-	ScrollView
-	{
-		anchors.top: scenarioColumn.bottom
-		width: parent.width
-		height: 500
-		Watchers
-		{
-			id: watchers
-			anchors.topMargin: 10
+			Watchers
+			{
+				id: watchers
+				bc: blockChain
+				Layout.fillWidth: true
+				Layout.preferredHeight: 740
+			}
+
+			Rectangle
+			{
+				color: "transparent"
+				Layout.preferredHeight: 50
+				Layout.fillWidth: true
+			}
 		}
 	}
 }

mix/qml/ScenarioLoader.qml

@@ -126,7 +126,6 @@ ColumnLayout
 								scenarioNameEdit.save()
 							else
 								scenarioNameEdit.edit()
-
 						}
 					}
 				}

mix/qml/StateListModel.qml

@@ -257,7 +257,9 @@ Item {
 				_secret = clientModel.newSecret();
 			var address = clientModel.address(_secret);
 			var name = qsTr("Account") + "-" + address.substring(0, 4);
-			return { name: name, secret: _secret, balance: QEtherHelper.createEther(_balance, _unit), address: address };
+			var amount = QEtherHelper.createEther(_balance, _unit)
+			clientModel.addAccount(_secret, amount.toWei().value())
+			return { name: name, secret: _secret, balance: amount, address: address };
 		}
 
 		function duplicateState(index)

mix/qml/Watchers.qml

@@ -11,49 +11,176 @@ import "js/TransactionHelper.js" as TransactionHelper
 import "js/QEtherHelper.js" as QEtherHelper
 import "."
 
-ColumnLayout {
-
+Rectangle {
+	color: "#4F4F4F"
+	radius: 4
 	property variant tx
-	property variant state
+	property variant currentState
+	property variant bc
+	property var blockIndex
+	property var txIndex
 
-	function updateWidthTx(_tx, _state)
+	function clear()
 	{
-		console.log("update tx")
-		console.log(JSON.stringify(tx))
-		console.log(JSON.stringify(state))
-		txLabel.text = tx.label
-		tx = _tx
-		state = _state
+		from.text = ""
+		to.text = ""
+		inputParams.clear()
+		returnParams.clear()
+		accounts.clear()
+		events.clear()
 	}
 
-	RowLayout
+	function updateWidthTx(_tx, _state, _blockIndex, _txIndex)
 	{
-		Label {
-			id: txLabel
+		from.text = _tx.sender
+		to.text = _tx.label
+		tx = _tx
+		blockIndex  = _blockIndex
+		txIndex = _txIndex
+		currentState = _state
+		inputParams.init()
+		if (_tx.isContractCreation)
+		{
+			returnParams.role = "creationAddr"
+			returnParams._data = {
+				creationAddr : {
+					"": _tx.returned
+				}
+			}
 		}
+		else
+		{
+			returnParams.role = "returnParameters"
+			returnParams._data = tx
+		}
+		returnParams.init()
+		accounts.init()
+		events.init()
 	}
 
-	KeyValuePanel
-	{
-		id: inputParams
-		title: qsTr("INPUT PARAMETERS")
-	}
+	Column {
+		anchors.fill: parent
+		spacing: 15
+		Rectangle
+		{
+			height: 20
+			width: parent.width - 30
+			color: "transparent"
+			Row
+			{
+				anchors.horizontalCenter: parent.horizontalCenter
+				anchors.verticalCenter: parent.verticalCenter
+				height: 5
+				spacing: 5
+				Label {
+					id: fromLabel
+					text: qsTr("from")
+					visible: from.text !== ""
+					color: "#EAB920"					
+				}
+				Label {
+					id: from
+					color: "#EAB920"
+					elide: Text.ElideRight
+					maximumLineCount: 1
+					clip: true
+					width: 200
+				}
+				Label {
+					id: toLabel
+					text: qsTr("to")
+					visible: from.text !== ""
+					color: "#EAB920"
+				}
+				Label {
+					id: to
+					color: "#EAB920"
+					elide: Text.ElideRight
+					maximumLineCount: 1
+					clip: true
+					width: 100
+				}
 
-	KeyValuePanel
-	{
-		id: returnParams
-		title: qsTr("RETURN PARAMETERS")
-	}
+				Image {
+					source: "qrc:/qml/img/edit.png"
+					height: 15
+					fillMode: Image.PreserveAspectFit
+					visible: from.text !== ""
+					MouseArea
+					{
+						anchors.fill: parent
+						onClicked:
+						{
+							bc.blockChainRepeater.editTx(blockIndex, txIndex)
+						}
+					}
+				}
+			}
+		}
 
-	KeyValuePanel
-	{
-		id: balance
-		title: qsTr("BALANCES")
-	}
+		Rectangle {
+			height: 1
+			width: parent.width - 30
+			anchors.horizontalCenter: parent.horizontalCenter
+			border.color: "#cccccc"
+			border.width: 1
+		}
 
-	KeyValuePanel
-	{
-		id: events
-		title: qsTr("EVENTS")
+		KeyValuePanel
+		{
+			height: 150
+			width: parent.width - 30
+			anchors.horizontalCenter: parent.horizontalCenter
+			id: inputParams
+			title: qsTr("INPUT PARAMETERS")
+			role: "parameters"
+			_data: tx
+		}
+
+		KeyValuePanel
+		{
+			height: 150
+			width: parent.width - 30
+			anchors.horizontalCenter: parent.horizontalCenter
+			id: returnParams
+			title: qsTr("RETURN PARAMETERS")
+			role: "returnParameters"
+			_data: tx
+		}
+
+		KeyValuePanel
+		{
+			height: 150
+			width: parent.width - 30
+			anchors.horizontalCenter: parent.horizontalCenter
+			id: accounts
+			title: qsTr("ACCOUNTS")
+			role: "accounts"
+			_data: currentState
+		}
+
+		KeyValuePanel
+		{
+			height: 150
+			width: parent.width - 30
+			anchors.horizontalCenter: parent.horizontalCenter
+			id: events
+			title: qsTr("EVENTS")
+			function computeData()
+			{
+				model.clear()
+				var ret = []
+				for (var k in tx.logs)
+				{
+					var param = ""
+					for (var p in tx.logs[k].param)
+					{
+						param += " " + tx.logs[k].param[p].value + " "
+					}
+					param = "(" + param + ")"
+					model.append({ "key": tx.logs[k].name, "value": param })
+				}
+			}
+		}
 	}
 }