Refactored GUI and added modular/pluginable side bar

ethereal/assets/qml/views/chain.qml

+import QtQuick 2.0
+import QtQuick.Controls 1.0;
+import QtQuick.Layouts 1.0;
+import QtQuick.Dialogs 1.0;
+import QtQuick.Window 2.1;
+import QtQuick.Controls.Styles 1.1
+import Ethereum 1.0
+
+Rectangle {
+	property var title: "Network"
+	property var iconFile: "../net.png"
+
+	objectName: "chainView"
+	visible: false
+	anchors.fill: parent
+
+	TableView {
+		id: blockTable
+		width: parent.width
+		anchors.top: parent.top
+		anchors.bottom: parent.bottom
+		TableViewColumn{ role: "number" ; title: "#" ; width: 100 }
+		TableViewColumn{ role: "hash" ; title: "Hash" ; width: 560 }
+		TableViewColumn{ role: "txAmount" ; title: "Tx amount" ; width: 100 }
+
+		model: blockModel
+
+		onDoubleClicked: {
+			popup.visible = true
+			popup.setDetails(blockModel.get(row))
+		}
+	}
+
+	function addBlock(block, initial) {
+		var txs = JSON.parse(block.transactions);
+		var amount = 0
+		if(initial == undefined){
+			initial = false
+		}
+
+		if(txs != null){
+			amount = txs.length
+		}
+
+		if(initial){
+			blockModel.append({number: block.number, name: block.name, gasLimit: block.gasLimit, gasUsed: block.gasUsed, coinbase: block.coinbase, hash: block.hash, txs: txs, txAmount: amount, time: block.time, prettyTime: convertToPretty(block.time)})
+		} else {
+			blockModel.insert(0, {number: block.number, name: block.name, gasLimit: block.gasLimit, gasUsed: block.gasUsed, coinbase: block.coinbase, hash: block.hash, txs: txs, txAmount: amount, time: block.time, prettyTime: convertToPretty(block.time)})
+		}
+	}
+
+	Window {
+		id: popup
+		visible: false
+		//flags: Qt.CustomizeWindowHint | Qt.Tool | Qt.WindowCloseButtonHint
+		property var block
+		width: root.width
+		height: 300
+		Component{
+			id: blockDetailsDelegate
+			Rectangle {
+				color: "#252525"
+				width: popup.width
+				height: 150
+				Column {
+					anchors.leftMargin: 10
+					anchors.topMargin: 5
+					anchors.top: parent.top
+					anchors.left: parent.left
+					Text { text: '<h3>Block details</h3>'; color: "#F2F2F2"}
+					Text { text: '<b>Block number:</b> ' + number; color: "#F2F2F2"}
+					Text { text: '<b>Hash:</b> ' + hash; color: "#F2F2F2"}
+					Text { text: '<b>Coinbase:</b> &lt;' + name + '&gt; ' + coinbase; color: "#F2F2F2"}
+					Text { text: '<b>Block found at:</b> ' + prettyTime; color: "#F2F2F2"}
+					Text { text: '<b>Gas used:</b> ' + gasUsed + " / " + gasLimit; color: "#F2F2F2"}
+				}
+			}
+		}
+		ListView {
+			model: singleBlock
+			delegate: blockDetailsDelegate
+			anchors.top: parent.top
+			height: 100
+			anchors.leftMargin: 20
+			id: listViewThing
+			Layout.maximumHeight: 40
+		}
+		TableView {
+			id: txView
+			anchors.top: listViewThing.bottom
+			anchors.topMargin: 50
+			width: parent.width
+
+			TableViewColumn{width: 90; role: "value" ; title: "Value" }
+			TableViewColumn{width: 200; role: "hash" ; title: "Hash" }
+			TableViewColumn{width: 200; role: "sender" ; title: "Sender" }
+			TableViewColumn{width: 200;role: "address" ; title: "Receiver" }
+			TableViewColumn{width: 60; role: "gas" ; title: "Gas" }
+			TableViewColumn{width: 60; role: "gasPrice" ; title: "Gas Price" }
+			TableViewColumn{width: 60; role: "isContract" ; title: "Contract" }
+
+			model: transactionModel
+			onClicked: {
+				var tx = transactionModel.get(row)
+				if(tx.data) {
+					popup.showContractData(tx)
+				}else{
+					popup.height = 440
+				}
+			}
+		}
+
+		function showContractData(tx) {
+			txDetailsDebugButton.tx = tx
+			if(tx.createsContract) {
+				contractData.text = tx.data
+				contractLabel.text = "<h4> Transaction created contract " + tx.address + "</h4>"
+			}else{
+				contractLabel.text = "<h4> Transaction ran contract " + tx.address + "</h4>"
+				contractData.text = tx.rawData
+			}
+			popup.height = 540
+		}
+
+		Rectangle {
+			id: txDetails
+			width: popup.width
+			height: 300
+			anchors.left: listViewThing.left
+			anchors.top: txView.bottom
+			Label {
+				text: "<h4>Contract data</h4>"
+				anchors.top: parent.top
+				anchors.left: parent.left
+				id: contractLabel
+				anchors.leftMargin: 10
+			}
+			Button {
+				property var tx
+				id: txDetailsDebugButton
+				anchors.right: parent.right
+				anchors.rightMargin: 10
+				anchors.top: parent.top
+				anchors.topMargin: 10
+				text: "Debug contract"
+				onClicked: {
+					if(tx.createsContract){
+						ui.startDbWithCode(tx.rawData)
+					}else {
+						ui.startDbWithContractAndData(tx.address, tx.rawData)
+					}
+				}
+			}
+			TextArea {
+				id: contractData
+				text: "Contract"
+				anchors.top: contractLabel.bottom
+				anchors.left: parent.left
+				anchors.bottom: popup.bottom
+				wrapMode: Text.Wrap
+				width: parent.width - 30
+				height: 80
+				anchors.leftMargin: 10
+			}
+		}
+		property var transactionModel: ListModel {
+			id: transactionModel
+		}
+		property var singleBlock: ListModel {
+			id: singleBlock
+		}
+		function setDetails(block){
+			singleBlock.set(0,block)
+			popup.height = 300
+			transactionModel.clear()
+			if(block.txs != undefined){
+				for(var i = 0; i < block.txs.count; ++i) {
+					transactionModel.insert(0, block.txs.get(i))
+				}
+				if(block.txs.get(0).data){
+					popup.showContractData(block.txs.get(0))
+				}
+			}
+			txView.forceActiveFocus()
+		}
+	}
+}

ethereal/assets/qml/views/history.qml

+import QtQuick 2.0
+import QtQuick.Controls 1.0;
+import QtQuick.Layouts 1.0;
+import QtQuick.Dialogs 1.0;
+import QtQuick.Window 2.1;
+import QtQuick.Controls.Styles 1.1
+import Ethereum 1.0
+
+Rectangle {
+	property var iconFile: "../tx.png"
+	property var title: "Transactions"
+
+	property var txModel: ListModel {
+		id: txModel
+	}
+
+	id: historyView
+	anchors.fill: parent
+	objectName: "transactionView"
+
+	TableView {
+		id: txTableView
+		anchors.fill: parent
+		TableViewColumn{ role: "inout" ; title: "" ; width: 40 }
+		TableViewColumn{ role: "value" ; title: "Value" ; width: 100 }
+		TableViewColumn{ role: "address" ; title: "Address" ; width: 430 }
+		TableViewColumn{ role: "contract" ; title: "Contract" ; width: 100 }
+
+		model: txModel
+	}
+
+	function addTx(type, tx, inout) {
+		var isContract
+		if (tx.contract == true){
+			isContract = "Yes"
+		}else{
+			isContract = "No"
+		}
+
+
+		var address;
+		if(inout == "recv") {
+			address = tx.sender;
+		} else {
+			address = tx.address;
+		}
+
+		txModel.insert(0, {inout: inout, hash: tx.hash, address: address, value: tx.value, contract: isContract})
+	}
+}

ethereal/assets/qml/views/info.qml

+import QtQuick 2.0
+import QtQuick.Controls 1.0;
+import QtQuick.Layouts 1.0;
+import QtQuick.Dialogs 1.0;
+import QtQuick.Window 2.1;
+import QtQuick.Controls.Styles 1.1
+import Ethereum 1.0
+
+Rectangle {
+	property var title: "Information"
+	property var iconFile: "../heart.png"
+
+	objectName: "infoView"
+	visible: false
+	anchors.fill: parent
+
+	color: "#00000000"
+
+	Column {
+		spacing: 3
+		anchors.fill: parent
+		anchors.topMargin: 5
+		anchors.leftMargin: 5
+
+		Label {
+			id: addressLabel
+			text: "Address"
+		}
+		TextField {
+			text: pub.getKey().address
+			width: 500
+		}
+
+		Label {
+			text: "Client ID"
+		}
+		TextField {
+			text: eth.getCustomIdentifier()
+			width: 500
+			placeholderText: "Anonymous"
+			onTextChanged: {
+				eth.setCustomIdentifier(text)
+			}
+		}
+	}
+
+	property var addressModel: ListModel {
+		id: addressModel
+	}
+	TableView {
+		id: addressView
+		width: parent.width - 200
+		height: 200
+		anchors.bottom: logLayout.top
+		TableViewColumn{ role: "name"; title: "name" }
+		TableViewColumn{ role: "address"; title: "address"; width: 300}
+
+		model: addressModel
+	}
+
+	Rectangle {
+		anchors.top: addressView.top
+		anchors.left: addressView.right
+		anchors.leftMargin: 20
+
+		TextField {
+			placeholderText: "Name to register"
+			id: nameToReg
+			width: 150
+		}
+
+		Button {
+			anchors.top: nameToReg.bottom
+			text: "Register"
+			MouseArea{
+				anchors.fill: parent
+				onClicked: {
+					eth.registerName(nameToReg.text)
+					nameToReg.text = ""
+				}
+			}
+		}
+	}
+
+	property var logModel: ListModel {
+		id: logModel
+	}
+	RowLayout {
+		id: logLayout
+		width: parent.width
+		height: 200
+		anchors.bottom: parent.bottom
+		TableView {
+			id: logView
+			headerVisible: false
+			anchors {
+				right: logLevelSlider.left
+				left: parent.left
+				bottom: parent.bottom
+				top: parent.top
+			}
+
+			TableViewColumn{ role: "description" ; title: "log" }
+
+			model: logModel
+		}
+
+		Slider {
+			id: logLevelSlider
+			value: eth.getLogLevelInt()
+			anchors {
+				right: parent.right
+				top: parent.top
+				bottom: parent.bottom
+
+				rightMargin: 5
+				leftMargin: 5
+				topMargin: 5
+				bottomMargin: 5
+			}
+
+			orientation: Qt.Vertical
+			maximumValue: 5
+			stepSize: 1
+
+			onValueChanged: {
+				eth.setLogLevel(value)
+			}
+		}
+	}
+
+	function addDebugMessage(message){
+		debuggerLog.append({value: message})
+	}
+
+	function addAddress(address) {
+		addressModel.append({name: address.name, address: address.address})
+	}
+
+	function clearAddress() {
+		addressModel.clear()
+	}
+
+	function addLog(str) {
+		// Remove first item once we've reached max log items
+		if(logModel.count > 250) {
+			logModel.remove(0)
+		}
+
+		if(str.len != 0) {
+			if(logView.flickableItem.atYEnd) {
+				logModel.append({description: str})
+				logView.positionViewAtRow(logView.rowCount - 1, ListView.Contain)
+			} else {
+				logModel.append({description: str})
+			}
+		}
+
+	}
+}

ethereal/assets/qml/views/pending_tx.qml

+import QtQuick 2.0
+import QtQuick.Controls 1.0;
+import QtQuick.Layouts 1.0;
+import QtQuick.Dialogs 1.0;
+import QtQuick.Window 2.1;
+import QtQuick.Controls.Styles 1.1
+import Ethereum 1.0
+
+Rectangle {
+	property var title: "Pending Transactions"
+	property var iconFile: "../tx.png"
+
+	objectName: "pendingTxView"
+	anchors.fill: parent
+	visible: false
+	id: pendingTxView
+
+	property var pendingTxModel: ListModel {
+		id: pendingTxModel
+	}
+
+	TableView {
+		id: pendingTxTableView
+		anchors.fill: parent
+		TableViewColumn{ role: "value" ; title: "Value" ; width: 100 }
+		TableViewColumn{ role: "from" ; title: "sender" ; width: 230 }
+		TableViewColumn{ role: "to" ; title: "Reciever" ; width: 230 }
+		TableViewColumn{ role: "contract" ; title: "Contract" ; width: 100 }
+
+		model: pendingTxModel
+	}
+
+	function addTx(type, tx, inout) {
+		var isContract
+		if (tx.contract == true){
+			isContract = "Yes"
+		}else{
+			isContract = "No"
+		}
+
+
+		pendingTxModel.insert(0, {hash: tx.hash, to: tx.address, from: tx.sender, value: tx.value, contract: isContract})
+	}
+}

ethereal/assets/qml/views/transaction.qml

+import QtQuick 2.0
+import QtQuick.Controls 1.0;
+import QtQuick.Layouts 1.0;
+import QtQuick.Dialogs 1.0;
+import QtQuick.Window 2.1;
+import QtQuick.Controls.Styles 1.1
+import Ethereum 1.0
+
+Rectangle {
+	property var iconFile: "../new.png"
+	property var title: "New transaction"
+
+	objectName: "newTxView"
+	visible: false
+	anchors.fill: parent
+	color: "#00000000"
+
+	Column {
+		id: mainContractColumn
+		anchors.fill: parent
+		function contractFormReady(){
+			if(codeView.text.length > 0 && txValue.text.length > 0 && txGas.text.length > 0 && txGasPrice.length > 0) {
+				txButton.state = "READY"
+			}else{
+				txButton.state = "NOTREADY"
+			}
+		}
+		states: [
+			State{
+				name: "ERROR"
+				PropertyChanges { target: txResult; visible:true}
+				PropertyChanges { target: codeView; visible:true}
+			},
+			State {
+				name: "DONE"
+				PropertyChanges { target: txValue; visible:false}
+				PropertyChanges { target: txGas; visible:false}
+				PropertyChanges { target: txGasPrice; visible:false}
+				PropertyChanges { target: codeView; visible:false}
+				PropertyChanges { target: txButton; visible:false}
+				PropertyChanges { target: txDataLabel; visible:false}
+				PropertyChanges { target: atLabel; visible:false}
+				PropertyChanges { target: txFuelRecipient; visible:false}
+
+				PropertyChanges { target: txResult; visible:true}
+				PropertyChanges { target: txOutput; visible:true}
+				PropertyChanges { target: newTxButton; visible:true}
+			},
+			State {
+				name: "SETUP"
+				PropertyChanges { target: txValue; visible:true; text: ""}
+				PropertyChanges { target: txGas; visible:true; text: ""}
+				PropertyChanges { target: txGasPrice; visible:true; text: ""}
+				PropertyChanges { target: codeView; visible:true; text: ""}
+				PropertyChanges { target: txButton; visible:true}
+				PropertyChanges { target: txDataLabel; visible:true}
+
+				PropertyChanges { target: txResult; visible:false}
+				PropertyChanges { target: txOutput; visible:false}
+				PropertyChanges { target: newTxButton; visible:false}
+			}
+		]
+		width: 400
+		spacing: 5
+		anchors.left: parent.left
+		anchors.top: parent.top
+		anchors.leftMargin: 5
+		anchors.topMargin: 5
+
+		ListModel {
+			id: denomModel
+			ListElement { text: "Wei" ;     zeros: "" }
+			ListElement { text: "Ada" ;     zeros: "000" }
+			ListElement { text: "Babbage" ; zeros: "000000" }
+			ListElement { text: "Shannon" ; zeros: "000000000" }
+			ListElement { text: "Szabo" ;   zeros: "000000000000" }
+			ListElement { text: "Finney" ;  zeros: "000000000000000" }
+			ListElement { text: "Ether" ;   zeros: "000000000000000000" }
+			ListElement { text: "Einstein" ;zeros: "000000000000000000000" }
+			ListElement { text: "Douglas" ; zeros: "000000000000000000000000000000000000000000" }
+		}
+
+
+		TextField {
+			id: txFuelRecipient
+			placeholderText: "Address / Name or empty for contract"
+			//validator: RegExpValidator { regExp: /[a-f0-9]{40}/ }
+			width: 400
+		}
+
+		RowLayout {
+			TextField {
+				id: txValue
+				width: 222
+				placeholderText: "Amount"
+				validator: RegExpValidator { regExp: /\d*/ }
+				onTextChanged: {
+					contractFormReady()
+				}
+			}
+
+			ComboBox {
+				id: valueDenom
+				currentIndex: 6
+				model: denomModel
+			}
+		}
+
+		RowLayout {
+			TextField {
+				id: txGas
+				width: 50
+				validator: RegExpValidator { regExp: /\d*/ }
+				placeholderText: "Gas"
+				text: "500"
+				/*
+				 onTextChanged: {
+					 contractFormReady()
+				 }
+				 */
+			}
+			Label {
+				id: atLabel
+				text: "@"
+			}
+
+			TextField {
+				id: txGasPrice
+				width: 200
+				placeholderText: "Gas price"
+				text: "10"
+				validator: RegExpValidator { regExp: /\d*/ }
+				/*
+				 onTextChanged: {
+					 contractFormReady()
+				 }
+				 */
+			}
+
+			ComboBox {
+				id: gasDenom
+				currentIndex: 4
+				model: denomModel
+			}
+		}
+
+		Label {
+			id: txDataLabel
+			text: "Data"
+		}
+
+		TextArea {
+			id: codeView
+			height: 300
+			anchors.topMargin: 5
+			width: 400
+			onTextChanged: {
+				contractFormReady()
+			}
+		}
+
+
+		Button {
+			id: txButton
+			/* enabled: false */
+			states: [
+				State {
+					name: "READY"
+					PropertyChanges { target: txButton; /*enabled: true*/}
+				},
+				State {
+					name: "NOTREADY"
+					PropertyChanges { target: txButton; /*enabled:false*/}
+				}
+			]
+			text: "Send"
+			onClicked: {
+				var value = txValue.text + denomModel.get(valueDenom.currentIndex).zeros;
+				var gasPrice = txGasPrice.text + denomModel.get(gasDenom.currentIndex).zeros;
+				var res = eth.create(txFuelRecipient.text, value, txGas.text, gasPrice, codeView.text)
+				if(res[1]) {
+					txResult.text = "Your contract <b>could not</b> be sent over the network:\n<b>"
+					txResult.text += res[1].error()
+					txResult.text += "</b>"
+					mainContractColumn.state = "ERROR"
+				} else {
+					txResult.text = "Your transaction has been submitted:\n"
+					txOutput.text = res[0].address
+					mainContractColumn.state = "DONE"
+				}
+			}
+		}
+		Text {
+			id: txResult
+			visible: false
+		}
+		TextField {
+			id: txOutput
+			visible: false
+			width: 530
+		}
+		Button {
+			id: newTxButton
+			visible: false
+			text: "Create a new transaction"
+			onClicked: {
+				this.visible = false
+				txResult.text = ""
+				txOutput.text = ""
+				mainContractColumn.state = "SETUP"
+			}
+		}
+	}
+}

ethereal/gui.go

@@ -31,6 +31,7 @@ type Gui struct {
 	// QML Engine
 	engine    *qml.Engine
 	component *qml.Common
+	qmlDone   bool
 	// The ethereum interface
 	eth *eth.Ethereum
 
@@ -150,18 +151,16 @@ func (gui *Gui) showWallet(context *qml.Context) (*qml.Window, error) {
 		return nil, err
 	}
 
-	win := gui.createWindow(component)
-
-	go func() {
-		go gui.setInitialBlockChain()
-		gui.loadAddressBook()
-		gui.setPeerInfo()
-		gui.readPreviousTransactions()
-	}()
+	gui.win = gui.createWindow(component)
 
 	gui.update()
 
-	return win, nil
+	return gui.win, nil
+}
+
+// The done handler will be called by QML when all views have been loaded
+func (gui *Gui) Done() {
+	gui.qmlDone = true
 }
 
 func (gui *Gui) ImportKey(filePath string) {
@@ -230,14 +229,16 @@ type address struct {
 }
 
 func (gui *Gui) loadAddressBook() {
-	gui.win.Root().Call("clearAddress")
+	view := gui.getObjectByName("infoView")
+	view.Call("clearAddress")
 
 	nameReg := ethpub.EthereumConfig(gui.eth.StateManager()).NameReg()
 	if nameReg != nil {
 		nameReg.EachStorage(func(name string, value *ethutil.Value) {
 			if name[0] != 0 {
 				value.Decode()
-				gui.win.Root().Call("addAddress", struct{ Name, Address string }{name, ethutil.Bytes2Hex(value.Bytes())})
+
+				view.Call("addAddress", struct{ Name, Address string }{name, ethutil.Bytes2Hex(value.Bytes())})
 			}
 		})
 	}
@@ -282,7 +283,7 @@ func (gui *Gui) insertTransaction(window string, tx *ethchain.Transaction) {
 	ptx.Sender = s
 	ptx.Address = r
 
-	gui.win.Root().Call("addTx", window, ptx, inout)
+	gui.getObjectByName("transactionView").Call("addTx", window, ptx, inout)
 }
 
 func (gui *Gui) readPreviousTransactions() {
@@ -301,7 +302,7 @@ func (gui *Gui) processBlock(block *ethchain.Block, initial bool) {
 	b := ethpub.NewPBlock(block)
 	b.Name = name
 
-	gui.win.Root().Call("addBlock", b, initial)
+	gui.getObjectByName("chainView").Call("addBlock", b, initial)
 }
 
 func (gui *Gui) setWalletValue(amount, unconfirmedFunds *big.Int) {
@@ -326,6 +327,17 @@ func (self *Gui) getObjectByName(objectName string) qml.Object {
 
 // Simple go routine function that updates the list of peers in the GUI
 func (gui *Gui) update() {
+	// We have to wait for qml to be done loading all the windows.
+	for !gui.qmlDone {
+		time.Sleep(500 * time.Millisecond)
+	}
+
+	go func() {
+		go gui.setInitialBlockChain()
+		gui.loadAddressBook()
+		gui.setPeerInfo()
+		gui.readPreviousTransactions()
+	}()
 
 	var (
 		blockChan     = make(chan ethreact.Event, 100)
@@ -514,7 +526,9 @@ func (gui *Gui) Printf(format string, v ...interface{}) {
 func (gui *Gui) printLog(s string) {
 	str := strings.TrimRight(s, "\n")
 	lines := strings.Split(str, "\n")
+
+	view := gui.getObjectByName("infoView")
 	for _, line := range lines {
-		gui.win.Root().Call("addLog", line)
+		view.Call("addLog", line)
 	}
 }