Refactored GUI and added modular/pluginable side bar

7 files changed, 873 insertions, 936 deletions

diff --git a/ethereal/assets/qml/views/chain.qml b/ethereal/assets/qml/views/chain.qml
new file mode 100644
index 000000000..7ff6ffcec
--- /dev/null
+++ b/ethereal/assets/qml/views/chain.qml
@@ -0,0 +1,187 @@
+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()
+		}
+	}
+}
diff --git a/ethereal/assets/qml/views/history.qml b/ethereal/assets/qml/views/history.qml
new file mode 100644
index 000000000..f50ae8004
--- /dev/null
+++ b/ethereal/assets/qml/views/history.qml
@@ -0,0 +1,50 @@
+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})
+	}
+}
diff --git a/ethereal/assets/qml/views/info.qml b/ethereal/assets/qml/views/info.qml
new file mode 100644
index 000000000..96b8e4acc
--- /dev/null
+++ b/ethereal/assets/qml/views/info.qml
@@ -0,0 +1,160 @@
+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})
+			}
+		}
+
+	}
+}
diff --git a/ethereal/assets/qml/views/pending_tx.qml b/ethereal/assets/qml/views/pending_tx.qml
new file mode 100644
index 000000000..18572e3e2
--- /dev/null
+++ b/ethereal/assets/qml/views/pending_tx.qml
@@ -0,0 +1,44 @@
+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})
+	}
+}
diff --git a/ethereal/assets/qml/views/transaction.qml b/ethereal/assets/qml/views/transaction.qml
new file mode 100644
index 000000000..e7fe529a0
--- /dev/null
+++ b/ethereal/assets/qml/views/transaction.qml
@@ -0,0 +1,214 @@
+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"
+			}
+		}
+	}
+}
diff --git a/ethereal/assets/qml/wallet.qml b/ethereal/assets/qml/wallet.qml
index e264d3f4c..cbd3fdf18 100644
--- a/ethereal/assets/qml/wallet.qml
+++ b/ethereal/assets/qml/wallet.qml
@@ -6,7 +6,6 @@ import QtQuick.Window 2.1;
 import QtQuick.Controls.Styles 1.1
 import Ethereum 1.0
 
-
 ApplicationWindow {
 	id: root
 
@@ -18,6 +17,30 @@ ApplicationWindow {
 
 	title: "Ethereal"
 
+	// Takes care of loading all default plugins
+	Component.onCompleted: {
+		var historyView = addPlugin("./views/history.qml")
+		var newTxView = addPlugin("./views/transaction.qml")
+		var chainView = addPlugin("./views/chain.qml")
+		var infoView = addPlugin("./views/info.qml")
+		var pendingTxView = addPlugin("./views/pending_tx.qml")
+
+		// Call the ready handler
+		eth.done()
+	}
+
+	function addPlugin(path, options) {
+		var component = Qt.createComponent(path);
+		if(component.status != Component.Ready) {
+			if(component.status == Component.Error) {
+				console.debug("Error:"+ component.errorString());
+			}
+			return
+		}
+
+		return mainSplit.addComponent(component, {objectName: objectName})
+	}
+
 	MenuBar {
 		Menu {
 			title: "File"
@@ -32,6 +55,13 @@ ApplicationWindow {
 				onTriggered: ui.openBrowser()
 			}
 
+			MenuItem {
+				text: "Add plugin"
+				onTriggered: {
+					mainSplit.addPlugin("test")
+				}
+			}
+
 			MenuSeparator {}
 
 			MenuItem {
@@ -110,342 +140,93 @@ ApplicationWindow {
 		id: blockModel
 	}
 
-	function setView(view) {
-		networkView.visible = false
-		historyView.visible = false
-		newTxView.visible = false
-		infoView.visible = false
-		pendingTxView.visible = false
-		view.visible = true
-		//root.title = "Ethereal - " = view.title
-	}
-
 	SplitView {
+		property var views: [];
+
+		id: mainSplit
 		anchors.fill: parent
 		resizing: false
 
+		function setView(view) {
+			for(var i = 0; i < views.length; i++) {
+				views[i].visible = false
+			}
+
+			view.visible = true
+		}
+
+		function addComponent(component, options) {
+			var view = mainView.createView(component, options)
+			if(!view.hasOwnProperty("iconFile")) {
+				console.log("Could not load plugin. Property 'iconFile' not found on view.");
+				return;
+			}
+
+			menu.createMenuItem(view.iconFile, view);
+			mainSplit.views.push(view);
+
+			return view
+		}
+
 		Rectangle {
 			id: menu
 			Layout.minimumWidth: 80
 			Layout.maximumWidth: 80
-			anchors.bottom: parent.bottom
 			anchors.top: parent.top
-			//color: "#D9DDE7"
 			color: "#252525"
 
-			ColumnLayout {
-				y: 50
-				anchors.left: parent.left
-				anchors.right: parent.right
-				height: 200
-				Image {
-					source: "../tx.png"
-					anchors.horizontalCenter: parent.horizontalCenter
-					MouseArea {
-						anchors.fill: parent
-						onClicked: {
-							setView(historyView)
-						}
-					}
-				}
+			Component {
+				id: menuItemTemplate
 				Image {
-					source: "../new.png"
+					property var view;
 					anchors.horizontalCenter: parent.horizontalCenter
 					MouseArea {
 						anchors.fill: parent
 						onClicked: {
-							setView(newTxView)
-						}
-					}
-				}
-				Image {
-					source: "../net.png"
-					anchors.horizontalCenter: parent.horizontalCenter
-					MouseArea {
-						anchors.fill: parent
-						onClicked: {
-							setView(networkView)
+							mainSplit.setView(view)
 						}
 					}
 				}
+			}
 
-				Image {
-					source: "../heart.png"
-					anchors.horizontalCenter: parent.horizontalCenter
-					MouseArea {
-						anchors.fill: parent
-						onClicked: {
-							setView(infoView)
-						}
-					}
-				}
 
-				Image {
-					source: "../tx.png"
-					anchors.horizontalCenter: parent.horizontalCenter
-					MouseArea {
-						anchors.fill: parent
-						onClicked: {
-							setView(pendingTxView)
-						}
-					}
-				}
+			function createMenuItem(icon, view) {
+				var comp = menuItemTemplate.createObject(menuColumn)
+				comp.view = view
+				comp.source = icon
+			}
+
+			ColumnLayout {
+				id: menuColumn
+				y: 50
+				anchors.left: parent.left
+				anchors.right: parent.right
 			}
 		}
 
 		Rectangle {
 			id: mainView
 			color: "#00000000"
+
 			anchors.right: parent.right
 			anchors.left: menu.right
 			anchors.bottom: parent.bottom
 			anchors.top: parent.top
 
-			property var txModel: ListModel {
-				id: txModel
-			}
-
-			Rectangle {
-				id: historyView
-				anchors.fill: parent
-
-				property var title: "Transactions"
-				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
-				}
-			}
-
-			Rectangle {
-				id: newTxView
-				property var title: "New transaction"
-				visible: false
-				anchors.fill: parent
-				color: "#00000000"
-				/*
-				TabView{
-					anchors.fill: parent
-					anchors.rightMargin: 5
-					anchors.leftMargin: 5
-					anchors.topMargin: 5
-					anchors.bottomMargin: 5
-					id: newTransactionTab
-					Component.onCompleted:{
-						addTab("Simple send", newTransaction)
-						addTab("Contracts", newContract)
-					}
-				}
-				*/
-				Component.onCompleted: {
-					newContract.createObject(newTxView)
-				}
-			}
-
-			Rectangle {
-				id: networkView
-				property var title: "Network"
-				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))
-					}
-				}
-
-			}
-
-			Rectangle {
-				id: infoView
-				property var title: "Information"
-				visible: false
-				color: "#00000000"
-				anchors.fill: parent
-
-				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
-					}
+			function createView(component) {
+				var view = component.createObject(mainView)
 
-					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)
-						}
-					}
-				}
+				return view;
 			}
+		}
 
-			Rectangle {
-				anchors.fill: parent
-				visible: false
-				id: pendingTxView
-				property var title: "Pending Transactions"
-
-				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
-				}
-			}
 
-			/*
-			 signal addPlugin(string name)
-			 Component {
-				 id: pluginWindow
-				 Rectangle {
-					 anchors.fill: parent
-					 Label {
-						 id: pluginTitle
-						 anchors.centerIn: parent
-						 text: "Hello world"
-					 }
-					 Component.onCompleted: setView(this)
-				 }
-			 }
-
-			 onAddPlugin: {
-				 var pluginWin = pluginWindow.createObject(mainView)
-				 console.log(pluginWin)
-				 pluginWin.pluginTitle.text = "Test"
-			 }
-			 */
-		}
 	}
 
 	FileDialog {
 		id: openAppDialog
 		title: "Open QML Application"
 		onAccepted: {
-			//ui.open(openAppDialog.fileUrl.toString())
-			//ui.openHtml(Qt.resolvedUrl(ui.assetPath("test.html")))
 			var path = openAppDialog.fileUrl.toString()
 			var ext = path.split('.').pop()
 			if(ext == "html" || ext == "htm") {
@@ -462,7 +243,7 @@ ApplicationWindow {
 		onAccepted: {
 		}
 	}
-	
+
 
 	FileDialog {
 		id: generalFileDialog
@@ -517,288 +298,53 @@ ApplicationWindow {
 			}
 		}
 
-        Label {
-            y: 6
-            id: lastBlockLabel
-            objectName: "lastBlockLabel"
-            visible: true
-            text: ""
+		Label {
+			y: 6
+			id: lastBlockLabel
+			objectName: "lastBlockLabel"
+			visible: true
+			text: ""
 			font.pixelSize: 10
-            anchors.right: peerGroup.left
-            anchors.rightMargin: 5
-        }
-
-        ProgressBar {
-            id: syncProgressIndicator
-            visible: false
-            objectName: "syncProgressIndicator"
-            y: 3
-            width: 140
-            indeterminate: true
-            anchors.right: peerGroup.left
-            anchors.rightMargin: 5
-        }
-
-        RowLayout {
-            id: peerGroup
-            y: 7
-            anchors.right: parent.right
-            MouseArea {
-                onDoubleClicked:  peerWindow.visible = true
-                anchors.fill: parent
-            }
-
-            Label {
-                id: peerLabel
-                font.pixelSize: 8
-                text: "0 / 0"
-            }
-            Image {
-                id: peerImage
-                width: 10; height: 10
-                source: "../network.png"
-            }
-        }
-	}
-
-	Window {
-		id: txImportDialog
-		minimumWidth: 270
-		maximumWidth: 270
-		maximumHeight: 50
-		minimumHeight: 50
-		TextField {
-			id: txImportField
-			width: 170
-			anchors.verticalCenter: parent.verticalCenter
-			anchors.left: parent.left
-			anchors.leftMargin: 10
-			onAccepted: {
-			}
+			anchors.right: peerGroup.left
+			anchors.rightMargin: 5
 		}
-		Button {
-			anchors.left: txImportField.right
-			anchors.verticalCenter: parent.verticalCenter
-			anchors.leftMargin: 5
-			text: "Import"
-			onClicked: {
-				eth.importTx(txImportField.text)
-				txImportField.visible = false
-			}
-		}
-		Component.onCompleted: {
-			addrField.focus = true
-		}
-	}
 
-	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
-				}
-			}
+		ProgressBar {
+			id: syncProgressIndicator
+			visible: false
+			objectName: "syncProgressIndicator"
+			y: 3
+			width: 140
+			indeterminate: true
+			anchors.right: peerGroup.left
+			anchors.rightMargin: 5
 		}
 
-		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
+		RowLayout {
+			id: peerGroup
+			y: 7
+			anchors.right: parent.right
+			MouseArea {
+				onDoubleClicked:  peerWindow.visible = true
+				anchors.fill: parent
 			}
-			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()
-		}
-	}
-
-	Window {
-		id: addPeerWin
-        //flags: Qt.CustomizeWindowHint | Qt.Tool | Qt.WindowCloseButtonHint
-		visible: false
-		minimumWidth: 230
-		maximumWidth: 230
-		maximumHeight: 50
-		minimumHeight: 50
-
-		TextField {
-			id: addrField
-			anchors.verticalCenter: parent.verticalCenter
-			anchors.left: parent.left
-			anchors.leftMargin: 10
-			placeholderText: "address:port"
-			onAccepted: {
-				ui.connectToPeer(addrField.text)
-				addPeerWin.visible = false
+				id: peerLabel
+				font.pixelSize: 8
+				text: "0 / 0"
 			}
-		}
-		Button {
-			anchors.left: addrField.right
-			anchors.verticalCenter: parent.verticalCenter
-			anchors.leftMargin: 5
-			text: "Add"
-			onClicked: {
-				ui.connectToPeer(addrField.text)
-				addPeerWin.visible = false
+			Image {
+				id: peerImage
+				width: 10; height: 10
+				source: "../network.png"
 			}
 		}
-		Component.onCompleted: {
-			addrField.focus = true
-		}
-	}
-
-	Window {
-		id: aboutWin
-		visible: false
-		title: "About"
-		minimumWidth: 350
-		maximumWidth: 350
-		maximumHeight: 200
-		minimumHeight: 200
-
-		Image {
-			id: aboutIcon
-			height: 150
-			width: 150
-			fillMode: Image.PreserveAspectFit
-			smooth: true
-			source: "../facet.png"
-			x: 10
-			y: 10
-		}
-
-		Text {
-			anchors.left: aboutIcon.right
-			anchors.leftMargin: 10
-			font.pointSize: 12
-			text: "<h2>Ethereal - Adrastea</h2><br><h3>Development</h3>Jeffrey Wilcke<br>Maran Hidskes<br>Viktor Trón<br>"
-		}
 	}
 
-	function addDebugMessage(message){
-		debuggerLog.append({value: message})
-	}
 
-	function addAddress(address) {
-		addressModel.append({name: address.name, address: address.address})
-	}
-	function clearAddress() {
-		addressModel.clear()
+	function setWalletValue(value) {
+		walletValueLabel.text = value
 	}
 
 	function loadPlugin(name) {
@@ -806,68 +352,6 @@ ApplicationWindow {
 		mainView.addPlugin(name)
 	}
 
-	function setWalletValue(value) {
-		walletValueLabel.text = value
-	}
-
-	function addTx(type, tx, inout) {
-		var isContract
-		if (tx.contract == true){
-			isContract = "Yes"
-		}else{
-			isContract = "No"
-		}
-
-
-		if(type == "post") {
-			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})
-		} else if(type == "pre") {
-			pendingTxModel.insert(0, {hash: tx.hash, to: tx.address, from: tx.sender, value: tx.value, contract: isContract})
-		}
-	}
-
-	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)})
-		}
-	}
-
-	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})
-			}
-		}
-
-	}
-
 	function setPeers(text) {
 		peerLabel.text = text
 	}
@@ -885,6 +369,7 @@ ApplicationWindow {
 		var lapsed = (Date.now() - new Date(unixTs*1000)) / 1000
 		return  (lapsed + " seconds ago")
 	}
+
 	function convertToPretty(unixTs){
 		var a = new Date(unixTs*1000);
 		var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
@@ -897,6 +382,7 @@ ApplicationWindow {
 		var time = date+' '+month+' '+year+' '+hour+':'+min+':'+sec ;
 		return time;
 	}
+
 	// ******************************************
 	// Windows
 	// ******************************************
@@ -923,313 +409,95 @@ ApplicationWindow {
 		}
 	}
 
-	// *******************************************
-	// Components
-	// *******************************************
-
-	// New Contract component
-	Component {
-		id: newContract
-		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"
-			}
+	Window {
+		id: aboutWin
+		visible: false
+		title: "About"
+		minimumWidth: 350
+		maximumWidth: 350
+		maximumHeight: 200
+		minimumHeight: 200
 
-			TextArea {
-				id: codeView
-				height: 300
-				anchors.topMargin: 5
-				width: 400
-				onTextChanged: {
-					contractFormReady()
-				}
-			}
+		Image {
+			id: aboutIcon
+			height: 150
+			width: 150
+			fillMode: Image.PreserveAspectFit
+			smooth: true
+			source: "../facet.png"
+			x: 10
+			y: 10
+		}
 
+		Text {
+			anchors.left: aboutIcon.right
+			anchors.leftMargin: 10
+			font.pointSize: 12
+			text: "<h2>Ethereal - Adrastea</h2><br><h3>Development</h3>Jeffrey Wilcke<br>Maran Hidskes<br>Viktor Trón<br>"
+		}
+	}
 
-			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"
-				}
+	Window {
+		id: txImportDialog
+		minimumWidth: 270
+		maximumWidth: 270
+		maximumHeight: 50
+		minimumHeight: 50
+		TextField {
+			id: txImportField
+			width: 170
+			anchors.verticalCenter: parent.verticalCenter
+			anchors.left: parent.left
+			anchors.leftMargin: 10
+			onAccepted: {
 			}
 		}
-	}
-	// New Transaction component
-	Component {
-		id: newTransaction
-		Column {
-			id: simpleSendColumn
-			states: [
-				State{
-					name: "ERROR"
-				},
-				State {
-					name: "DONE"
-					PropertyChanges { target: txSimpleValue; visible:false}
-					PropertyChanges { target: txSimpleRecipient; visible:false}
-					PropertyChanges { target:newSimpleTxButton; visible:false}
-
-					PropertyChanges { target: txSimpleResult; visible:true}
-					PropertyChanges { target: txSimpleOutput; visible:true}
-					PropertyChanges { target:newSimpleTxButton; visible:true}
-				},
-				State {
-					name: "SETUP"
-					PropertyChanges { target: txSimpleValue; visible:true; text: ""}
-					PropertyChanges { target: txSimpleRecipient; visible:true; text: ""}
-					PropertyChanges { target: txSimpleButton; visible:true}
-					PropertyChanges { target:newSimpleTxButton; visible:false}
-				}
-			]
-			spacing: 5
+		Button {
+			anchors.left: txImportField.right
+			anchors.verticalCenter: parent.verticalCenter
 			anchors.leftMargin: 5
-			anchors.topMargin: 5
-			anchors.top: parent.top
-			anchors.left: parent.left
-
-			function checkFormState(){
-				if(txSimpleRecipient.text.length == 40 && txSimpleValue.text.length > 0) {
-					txSimpleButton.state = "READY"
-				}else{
-					txSimpleButton.state = "NOTREADY"
-				}
+			text: "Import"
+			onClicked: {
+				eth.importTx(txImportField.text)
+				txImportField.visible = false
 			}
+		}
+		Component.onCompleted: {
+			addrField.focus = true
+		}
+	}
 
-			TextField {
-				id: txSimpleRecipient
-				placeholderText: "Recipient address"
-				Layout.fillWidth: true
-				//validator: RegExpValidator { regExp: /[a-f0-9]{40}/ }
-				width: 530
-				onTextChanged: { checkFormState() }
-			}
-			TextField {
-				id: txSimpleValue
-				width: 200
-				placeholderText: "Amount"
-				anchors.rightMargin: 5
-				validator: RegExpValidator { regExp: /\d*/ }
-				onTextChanged: { checkFormState() }
-			}
-			Button {
-				id: txSimpleButton
-				/*enabled: false*/
-				states: [
-					State {
-						name: "READY"
-						PropertyChanges { target: txSimpleButton; /*enabled: true*/}
-					},
-					State {
-						name: "NOTREADY"
-						PropertyChanges { target: txSimpleButton; /*enabled: false*/}
-					}
-				]
-				text: "Send"
-				onClicked: {
-					//this.enabled = false
-					var res = eth.transact(txSimpleRecipient.text, txSimpleValue.text, "500", "1000000", "")
-					if(res[1]) {
-						txSimpleResult.text = "There has been an error broadcasting your transaction:" + res[1].error()
-					} else {
-						txSimpleResult.text = "Your transaction has been broadcasted over the network.\nYour transaction id is:"
-						txSimpleOutput.text = res[0].hash
-						this.visible = false
-						simpleSendColumn.state = "DONE"
-					}
-				}
-			}
-			Text {
-				id: txSimpleResult
-				visible: false
+	Window {
+		id: addPeerWin
+		visible: false
+		minimumWidth: 230
+		maximumWidth: 230
+		maximumHeight: 50
+		minimumHeight: 50
 
+		TextField {
+			id: addrField
+			anchors.verticalCenter: parent.verticalCenter
+			anchors.left: parent.left
+			anchors.leftMargin: 10
+			placeholderText: "address:port"
+			onAccepted: {
+				ui.connectToPeer(addrField.text)
+				addPeerWin.visible = false
 			}
-			TextField {
-				id: txSimpleOutput
-				visible: false
-				width: 530
-			}
-			Button {
-				id: newSimpleTxButton
-				visible: false
-				text: "Create an other transaction"
-				onClicked: {
-					this.visible = false
-					simpleSendColumn.state = "SETUP"
-				}
+		}
+		Button {
+			anchors.left: addrField.right
+			anchors.verticalCenter: parent.verticalCenter
+			anchors.leftMargin: 5
+			text: "Add"
+			onClicked: {
+				ui.connectToPeer(addrField.text)
+				addPeerWin.visible = false
 			}
 		}
+		Component.onCompleted: {
+			addrField.focus = true
+		}
 	}
 }
diff --git a/ethereal/gui.go b/ethereal/gui.go
index d2363b5a9..d8ab50ac6 100644
--- a/ethereal/gui.go
+++ b/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)
 	}
 }