diff options
Diffstat (limited to 'ethereal/assets/qml/wallet.qml')
| -rw-r--r-- | ethereal/assets/qml/wallet.qml | 806 |
1 files changed, 624 insertions, 182 deletions
diff --git a/ethereal/assets/qml/wallet.qml b/ethereal/assets/qml/wallet.qml index 51f064adf..0555cd2f2 100644 --- a/ethereal/assets/qml/wallet.qml +++ b/ethereal/assets/qml/wallet.qml @@ -6,9 +6,12 @@ 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 @@ -23,10 +26,13 @@ ApplicationWindow { shortcut: "Ctrl+o" onTriggered: openAppDialog.open() } + } + + Menu { MenuItem { - text: "Muted" - shortcut: "Ctrl+e" - onTriggered: ui.muted("") + text: "Debugger" + shortcut: "Ctrl+d" + onTriggered: ui.startDebugger() } } @@ -39,10 +45,12 @@ ApplicationWindow { addPeerWin.visible = true } } - MenuItem { - text: "Start" - onTriggered: ui.connect() + text: "Show Peers" + shortcut: "Ctrl+e" + onTriggered: { + peerWindow.visible = true + } } } @@ -85,7 +93,6 @@ ApplicationWindow { //color: "#D9DDE7" color: "#252525" - ColumnLayout { y: 50 anchors.left: parent.left @@ -123,7 +130,7 @@ ApplicationWindow { } Image { - source: ui.assetPath("net.png") + source: ui.assetPath("heart.png") anchors.horizontalCenter: parent.horizontalCenter MouseArea { anchors.fill: parent @@ -155,6 +162,7 @@ ApplicationWindow { 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 } @@ -169,6 +177,7 @@ ApplicationWindow { visible: false anchors.fill: parent color: "#00000000" + /* TabView{ anchors.fill: parent anchors.rightMargin: 5 @@ -177,16 +186,14 @@ ApplicationWindow { anchors.bottomMargin: 5 id: newTransactionTab Component.onCompleted:{ - var component = Qt.createComponent("newTransaction/_simple_send.qml") - var newTransaction = component.createObject("newTransaction") - - component = Qt.createComponent("newTransaction/_new_contract.qml") - var newContract = component.createObject("newContract") - addTab("Simple send", newTransaction) addTab("Contracts", newContract) } } + */ + Component.onCompleted: { + newContract.createObject(newTxView) + } } Rectangle { @@ -199,34 +206,19 @@ ApplicationWindow { id: blockTable width: parent.width anchors.top: parent.top - anchors.bottom: logView.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.block = eth.getBlock(blockModel.get(row).hash) - popup.hashLabel.text = popup.block.hash - } - */ - } - - property var logModel: ListModel { - id: logModel + onDoubleClicked: { + popup.visible = true + popup.setDetails(blockModel.get(row)) + } } - TableView { - id: logView - width: parent.width - height: 150 - anchors.bottom: parent.bottom - TableViewColumn{ role: "description" ; title: "log" } - - model: logModel - } } Rectangle { @@ -236,23 +228,82 @@ ApplicationWindow { color: "#00000000" anchors.fill: parent - Label { - id: addressLabel - text: "Address" - anchors { - margins: 5 - top: parent.top - left: parent.left + 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) + } } } - TextField { - anchors { - margins: 5 - left: addressLabel.right - top: parent.top + + 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 = "" + } + } } - text: pub.getKey().address - width: 500 + } + + + 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 } } @@ -285,29 +336,34 @@ ApplicationWindow { title: "Open QML Application" onAccepted: { //ui.open(openAppDialog.fileUrl.toString()) - //ui.openHtml(Qt.resolvedUrl(ui.assetPath("test.html"))) - ui.openHtml(openAppDialog.fileUrl.toString()) - + //ui.openHtml(Qt.resolvedUrl(ui.assetPath("test.html"))) + ui.openHtml(openAppDialog.fileUrl.toString()) } } statusBar: StatusBar { + height: 30 RowLayout { - anchors.fill: parent + Button { + id: miningButton + onClicked: { + eth.toggleMining() + } + text: "Start Mining" + } + Button { property var enabled: true - id: connectButton + id: debuggerWindow onClicked: { - if(this.enabled) { - ui.connect(this) - } + ui.startDebugger() } - text: "Connect" + text: "Debugger" } Button { id: importAppButton - anchors.left: connectButton.right + anchors.left: debuggerWindow.right anchors.leftMargin: 5 onClicked: openAppDialog.open() text: "Import App" @@ -318,20 +374,26 @@ ApplicationWindow { anchors.leftMargin: 5 id: walletValueLabel } + } - Label { - anchors.right: peerImage.left - anchors.rightMargin: 5 - id: peerLabel - font.pixelSize: 8 - text: "0 / 0" - } - Image { - id: peerImage - anchors.right: parent.right - width: 10; height: 10 - source: ui.assetPath("network.png") + 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") } } @@ -339,10 +401,134 @@ ApplicationWindow { id: popup visible: false property var block - Label { - id: hashLabel - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter + 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 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() } } @@ -404,115 +590,19 @@ ApplicationWindow { anchors.left: aboutIcon.right anchors.leftMargin: 10 font.pointSize: 12 - text: "<h2>Ethereal</h2><br><h3>Development</h3>Jeffrey Wilcke<br>Maran Hidskes<br><h3>Binary Distribution</h3>Jarrad Hope<br>" - } - - } - - Window { - id: debugWindow - visible: false - title: "Debugger" - minimumWidth: 600 - minimumHeight: 600 - width: 800 - height: 600 - - - Item { - id: keyHandler - focus: true - Keys.onPressed: { - if (event.key == Qt.Key_Space) { - ui.next() - } - } + text: "<h2>Ethereal</h2><br><h3>Development</h3>Jeffrey Wilcke<br>Maran Hidskes<br>" } - SplitView { - - anchors.fill: parent - property var asmModel: ListModel { - id: asmModel - } - TableView { - id: asmTableView - width: 200 - TableViewColumn{ role: "value" ; title: "" ; width: 100 } - model: asmModel - } - - Rectangle { - anchors.left: asmTableView.right - anchors.right: parent.right - SplitView { - orientation: Qt.Vertical - anchors.fill: parent - - TableView { - property var memModel: ListModel { - id: memModel - } - height: parent.height/2 - width: parent.width - TableViewColumn{ id:mnumColmn ; role: "num" ; title: "#" ; width: 50} - TableViewColumn{ role: "value" ; title: "Memory" ; width: 750} - model: memModel - } - - SplitView { - orientation: Qt.Horizontal - TableView { - property var debuggerLog: ListModel { - id: debuggerLog - } - TableViewColumn{ role: "value"; title: "Debug messages" } - model: debuggerLog - } - TableView { - property var stackModel: ListModel { - id: stackModel - } - height: parent.height/2 - width: parent.width - TableViewColumn{ role: "value" ; title: "Stack" ; width: parent.width } - model: stackModel - } - } - } - } - } - } - - function setAsm(asm) { - asmModel.append({asm: asm}) } - function setInstruction(num) { - asmTableView.selection.clear() - asmTableView.selection.select(num-1) - } - - function clearAsm() { - asmModel.clear() - } - - function setMem(mem) { - memModel.append({num: mem.num, value: mem.value}) - } - function clearMem(){ - memModel.clear() - } - - function setStack(stack) { - stackModel.append({value: stack}) - } function addDebugMessage(message){ - console.log("WOOP:") debuggerLog.append({value: message}) } - function clearStack() { - stackModel.clear() + function addAddress(address) { + addressModel.append({name: address.name, address: address.address}) + } + function clearAddress() { + addressModel.clear() } function loadPlugin(name) { @@ -524,27 +614,379 @@ ApplicationWindow { walletValueLabel.text = value } - function addTx(tx) { + function addTx(tx, inout) { var isContract if (tx.contract == true){ isContract = "Yes" }else{ isContract = "No" } - txModel.insert(0, {hash: tx.hash, address: tx.address, value: tx.value, contract: isContract}) + + 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) { - blockModel.insert(0, {number: block.number, hash: block.hash}) + 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, 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, 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) { if(str.len != 0) { - logModel.append({description: str}) + 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" + } + } + } + } } |