go-ethereum/ethereal/assets/qml/wallet.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


ApplicationWindow {
	id: root

	property alias miningButtonText: miningButton.text

	width: 900
	height: 600
	minimumHeight: 300

	title: "Ethereal"

	MenuBar {
		Menu {
			title: "File"
			MenuItem {
				text: "Import App"
				shortcut: "Ctrl+o"
				onTriggered: openAppDialog.open()
			}
		}

		Menu {
			MenuItem {
				text: "Debugger"
				shortcut: "Ctrl+d"
				onTriggered: ui.startDebugger()
			}
		}

		Menu {
			title: "Network"
			MenuItem {
				text: "Add Peer"
				shortcut: "Ctrl+p"
				onTriggered: {
					addPeerWin.visible = true
				}
			}
			MenuItem {
				text: "Show Peers"
				shortcut: "Ctrl+e"
				onTriggered: {
					peerWindow.visible = true
				}
			}
		}

		Menu {
			title: "Help"
			MenuItem {
				text: "About"
				onTriggered: {
					aboutWin.visible = true
				}
			}
		}

	}


	property var blockModel: ListModel {
		id: blockModel
	}

	function setView(view) {
		networkView.visible = false
		historyView.visible = false
		newTxView.visible = false
		infoView.visible = false
		view.visible = true
		//root.title = "Ethereal - " = view.title
	}

	SplitView {
		anchors.fill: parent
		resizing: false

		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: ui.assetPath("tx.png")
					anchors.horizontalCenter: parent.horizontalCenter
					MouseArea {
						anchors.fill: parent
						onClicked: {
							setView(historyView)
						}
					}
				}
				Image {
					source: ui.assetPath("new.png")
					anchors.horizontalCenter: parent.horizontalCenter
					MouseArea {
						anchors.fill: parent
						onClicked: {
							setView(newTxView)
						}
					}
				}
				Image {
					source: ui.assetPath("net.png")
					anchors.horizontalCenter: parent.horizontalCenter
					MouseArea {
						anchors.fill: parent
						onClicked: {
							setView(networkView)
						}
					}
				}

				Image {
					source: ui.assetPath("heart.png")
					anchors.horizontalCenter: parent.horizontalCenter
					MouseArea {
						anchors.fill: parent
						onClicked: {
							setView(infoView)
						}
					}
				}
			}
		}

		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.clientId()
						onTextChanged: {
							eth.changeClientId(text)
						}
					}
				}

				property var addressModel: ListModel {
					id: addressModel
				}
				TableView {
					id: addressView
					width: parent.width - 200
					height: 200
					anchors.bottom: logView.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
				}
				TableView {
					id: logView
					width: parent.width
					height: 200
					anchors.bottom: parent.bottom
					TableViewColumn{ role: "description" ; title: "log" }

					model: logModel
				}
			}

			/*
			 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")))
			ui.openHtml(openAppDialog.fileUrl.toString())
		}
	}

	statusBar: StatusBar {
		height: 30
		RowLayout {
			Button {
				id: miningButton
				onClicked: {
					eth.toggleMining()
				}
				text: "Start Mining"
			}

			Button {
				property var enabled: true
				id: debuggerWindow
				onClicked: {
					ui.startDebugger()
				}
				text: "Debugger"
			}

			Button {
				id: importAppButton
				anchors.left: debuggerWindow.right
				anchors.leftMargin: 5
				onClicked: openAppDialog.open()
				text: "Import App"
			}

			Label {
				anchors.left: importAppButton.right
				anchors.leftMargin: 5
				id: walletValueLabel
			}
		}

		Label {
			y: 7
			anchors.right: peerImage.left
			anchors.rightMargin: 5
			id: peerLabel
			font.pixelSize: 8
			text: "0 / 0"
		}
		Image {
			y: 7
			id: peerImage
			anchors.right: parent.right
			width: 10; height: 10
			MouseArea {
				onDoubleClicked:  peerWindow.visible = true
				anchors.fill: parent
			}
			source: ui.assetPath("network.png")
		}
	}

	Window {
		id: popup
		visible: false
		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> ' + coinbase; color: "#F2F2F2"}
					Text { text: '<b>Block found at:</b> ' + prettyTime; color: "#F2F2F2"}
					Text { text: '<b>Gas Limit:</b> ' + 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()
		}
	}

	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
			}
		}
		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
		}
	}

	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: ui.assetPath("facet.png")
			x: 10
			y: 10
		}

		Text {
			anchors.left: aboutIcon.right
			anchors.leftMargin: 10
			font.pointSize: 12
			text: "<h2>Ethereal</h2><br><h3>Development</h3>Jeffrey Wilcke<br>Maran Hidskes<br>"
		}
	}

	function addDebugMessage(message){
		debuggerLog.append({value: message})
	}

	function addAddress(address) {
		addressModel.append({name: address.name, address: address.address})
	}
	function clearAddress() {
		addressModel.clear()
	}

	function loadPlugin(name) {
		console.log("Loading plugin" + name)
		mainView.addPlugin(name)
	}

	function setWalletValue(value) {
		walletValueLabel.text = value
	}

	function addTx(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})
	}

	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, gasLimit: block.gasLimit, coinbase: block.coinbase, hash: block.hash, txs: txs, txAmount: amount, time: block.time, prettyTime: convertToPretty(block.time)})
		}else{
			blockModel.insert(0, {number: block.number, gasLimit: block.gasLimit, coinbase: block.coinbase, hash: block.hash, txs: txs, txAmount: amount, time: block.time, prettyTime: convertToPretty(block.time)})
		}
	}

	function addLog(str) {
		if(str.len != 0) {
			logModel.insert(0, {description: str})
		}
	}

	function setPeers(text) {
		peerLabel.text = text
	}

	function addPeer(peer) {
		// We could just append the whole peer object but it cries if you try to alter them
		peerModel.append({ip: peer.ip, port: peer.port, lastResponse:timeAgo(peer.lastSend), latency: peer.latency, version: peer.version})
	}

	function resetPeers(){
		peerModel.clear()
	}

	function timeAgo(unixTs){
		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'];
		var year = a.getFullYear();
		var month = months[a.getMonth()];
		var date = a.getDate();
		var hour = a.getHours();
		var min = a.getMinutes();
		var sec = a.getSeconds();
		var time = date+' '+month+' '+year+' '+hour+':'+min+':'+sec ;
		return time;
	}
	// ******************************************
	// Windows
	// ******************************************
	Window {
		id: peerWindow
		height: 200
		width: 700
		Rectangle {
			anchors.fill: parent
			property var peerModel: ListModel {
				id: peerModel
			}
			TableView {
				anchors.fill: parent
				id: peerTable
				model: peerModel
				TableViewColumn{width: 100; role: "ip" ; title: "IP" }
				TableViewColumn{width: 60; role: "port" ; title: "Port" }
				TableViewColumn{width: 140; role: "lastResponse"; title: "Last event" }
				TableViewColumn{width: 100; role: "latency"; title: "Latency" }
				TableViewColumn{width: 260; role: "version" ; title: "Version" }
			}
		}
	}

	// *******************************************
	// 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

			TextField {
				id: txFuelRecipient
				placeholderText: "Address / Name or empty for contract"
				//validator: RegExpValidator { regExp: /[a-f0-9]{40}/ }
				width: 400
			}

			TextField {
				id: txValue
				width: 222
				placeholderText: "Amount"
				validator: RegExpValidator { regExp: /\d*/ }
				onTextChanged: {
					contractFormReady()
				}
			}

			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: "1000000"
					validator: RegExpValidator { regExp: /\d*/ }
					/*
					onTextChanged: {
						contractFormReady()
					}
					*/
				}
			}

			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: {
					//this.enabled = false
					var res = eth.create(txFuelRecipient.text, txValue.text, txGas.text, txGasPrice.text, codeView.text)
					if(res[1]) {
						txResult.text = "Your contract <b>could not</b> be send 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"
				}
			}
		}
	}
	// 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
			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"
				}
			}

			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

			}
			TextField {
				id: txSimpleOutput
				visible: false
				width: 530
			}
			Button {
				id: newSimpleTxButton
				visible: false
				text: "Create an other transaction"
				onClicked: {
					this.visible = false
					simpleSendColumn.state = "SETUP"
				}
			}
		}
	}
}