Commit ac14f002 authored by obscuren's avatar obscuren

Refactored GUI and added modular/pluginable side bar

parent c59d7a89
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()
}
}
}
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})
}
}
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})
}
}
}
}
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})
}
}
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"
}
}
}
}
...@@ -6,7 +6,6 @@ import QtQuick.Window 2.1; ...@@ -6,7 +6,6 @@ import QtQuick.Window 2.1;
import QtQuick.Controls.Styles 1.1 import QtQuick.Controls.Styles 1.1
import Ethereum 1.0 import Ethereum 1.0
ApplicationWindow { ApplicationWindow {
id: root id: root
...@@ -18,6 +17,30 @@ ApplicationWindow { ...@@ -18,6 +17,30 @@ ApplicationWindow {
title: "Ethereal" 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 { MenuBar {
Menu { Menu {
title: "File" title: "File"
...@@ -32,6 +55,13 @@ ApplicationWindow { ...@@ -32,6 +55,13 @@ ApplicationWindow {
onTriggered: ui.openBrowser() onTriggered: ui.openBrowser()
} }
MenuItem {
text: "Add plugin"
onTriggered: {
mainSplit.addPlugin("test")
}
}
MenuSeparator {} MenuSeparator {}
MenuItem { MenuItem {
...@@ -110,342 +140,93 @@ ApplicationWindow { ...@@ -110,342 +140,93 @@ ApplicationWindow {
id: blockModel id: blockModel
} }
SplitView {
property var views: [];
id: mainSplit
anchors.fill: parent
resizing: false
function setView(view) { function setView(view) {
networkView.visible = false for(var i = 0; i < views.length; i++) {
historyView.visible = false views[i].visible = false
newTxView.visible = false }
infoView.visible = false
pendingTxView.visible = false
view.visible = true view.visible = true
//root.title = "Ethereal - " = view.title
} }
SplitView { function addComponent(component, options) {
anchors.fill: parent var view = mainView.createView(component, options)
resizing: false 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 { Rectangle {
id: menu id: menu
Layout.minimumWidth: 80 Layout.minimumWidth: 80
Layout.maximumWidth: 80 Layout.maximumWidth: 80
anchors.bottom: parent.bottom
anchors.top: parent.top anchors.top: parent.top
//color: "#D9DDE7"
color: "#252525" color: "#252525"
ColumnLayout { Component {
y: 50 id: menuItemTemplate
anchors.left: parent.left
anchors.right: parent.right
height: 200
Image { Image {
source: "../tx.png" property var view;
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
onClicked: { onClicked: {
setView(historyView) mainSplit.setView(view)
}
} }
} }
Image {
source: "../new.png"
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)
}
} }
} }
Image {
source: "../heart.png"
anchors.horizontalCenter: parent.horizontalCenter
MouseArea {
anchors.fill: parent
onClicked: {
setView(infoView)
}
}
}
Image { function createMenuItem(icon, view) {
source: "../tx.png" var comp = menuItemTemplate.createObject(menuColumn)
anchors.horizontalCenter: parent.horizontalCenter comp.view = view
MouseArea { comp.source = icon
anchors.fill: parent
onClicked: {
setView(pendingTxView)
}
}
} }
ColumnLayout {
id: menuColumn
y: 50
anchors.left: parent.left
anchors.right: parent.right
} }
} }
Rectangle { Rectangle {
id: mainView id: mainView
color: "#00000000" color: "#00000000"
anchors.right: parent.right anchors.right: parent.right
anchors.left: menu.right anchors.left: menu.right
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.top: parent.top anchors.top: parent.top
property var txModel: ListModel { function createView(component) {
id: txModel var view = component.createObject(mainView)
}
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
}
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: { return view;
eth.setLogLevel(value)
}
}
} }
} }
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 { FileDialog {
id: openAppDialog id: openAppDialog
title: "Open QML Application" title: "Open QML Application"
onAccepted: { onAccepted: {
//ui.open(openAppDialog.fileUrl.toString())
//ui.openHtml(Qt.resolvedUrl(ui.assetPath("test.html")))
var path = openAppDialog.fileUrl.toString() var path = openAppDialog.fileUrl.toString()
var ext = path.split('.').pop() var ext = path.split('.').pop()
if(ext == "html" || ext == "htm") { if(ext == "html" || ext == "htm") {
...@@ -561,244 +342,9 @@ ApplicationWindow { ...@@ -561,244 +342,9 @@ ApplicationWindow {
} }
} }
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: {
}
}
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 { function setWalletValue(value) {
id: popup walletValueLabel.text = value
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()
}
}
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
}
}
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: "../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 loadPlugin(name) { function loadPlugin(name) {
...@@ -806,68 +352,6 @@ ApplicationWindow { ...@@ -806,68 +352,6 @@ ApplicationWindow {
mainView.addPlugin(name) 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) { function setPeers(text) {
peerLabel.text = text peerLabel.text = text
} }
...@@ -885,6 +369,7 @@ ApplicationWindow { ...@@ -885,6 +369,7 @@ ApplicationWindow {
var lapsed = (Date.now() - new Date(unixTs*1000)) / 1000 var lapsed = (Date.now() - new Date(unixTs*1000)) / 1000
return (lapsed + " seconds ago") return (lapsed + " seconds ago")
} }
function convertToPretty(unixTs){ function convertToPretty(unixTs){
var a = new Date(unixTs*1000); var a = new Date(unixTs*1000);
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
...@@ -897,6 +382,7 @@ ApplicationWindow { ...@@ -897,6 +382,7 @@ ApplicationWindow {
var time = date+' '+month+' '+year+' '+hour+':'+min+':'+sec ; var time = date+' '+month+' '+year+' '+hour+':'+min+':'+sec ;
return time; return time;
} }
// ****************************************** // ******************************************
// Windows // Windows
// ****************************************** // ******************************************
...@@ -923,313 +409,95 @@ ApplicationWindow { ...@@ -923,313 +409,95 @@ ApplicationWindow {
} }
} }
// ******************************************* Window {
// Components id: aboutWin
// ******************************************* visible: false
title: "About"
// New Contract component minimumWidth: 350
Component { maximumWidth: 350
id: newContract maximumHeight: 200
Column { minimumHeight: 200
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 { Image {
id: valueDenom id: aboutIcon
currentIndex: 6 height: 150
model: denomModel width: 150
} fillMode: Image.PreserveAspectFit
smooth: true
source: "../facet.png"
x: 10
y: 10
} }
RowLayout { Text {
TextField { anchors.left: aboutIcon.right
id: txGas anchors.leftMargin: 10
width: 50 font.pointSize: 12
validator: RegExpValidator { regExp: /\d*/ } text: "<h2>Ethereal - Adrastea</h2><br><h3>Development</h3>Jeffrey Wilcke<br>Maran Hidskes<br>Viktor Trón<br>"
placeholderText: "Gas"
text: "500"
/*
onTextChanged: {
contractFormReady()
}
*/
} }
Label {
id: atLabel
text: "@"
} }
Window {
id: txImportDialog
minimumWidth: 270
maximumWidth: 270
maximumHeight: 50
minimumHeight: 50
TextField { TextField {
id: txGasPrice id: txImportField
width: 200 width: 170
placeholderText: "Gas price" anchors.verticalCenter: parent.verticalCenter
text: "10" anchors.left: parent.left
validator: RegExpValidator { regExp: /\d*/ } anchors.leftMargin: 10
/* onAccepted: {
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 { Button {
id: newTxButton anchors.left: txImportField.right
visible: false anchors.verticalCenter: parent.verticalCenter
text: "Create a new transaction" anchors.leftMargin: 5
text: "Import"
onClicked: { onClicked: {
this.visible = false eth.importTx(txImportField.text)
txResult.text = "" txImportField.visible = false
txOutput.text = ""
mainContractColumn.state = "SETUP"
}
}
} }
} }
// New Transaction component Component.onCompleted: {
Component { addrField.focus = true
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 { Window {
id: txSimpleRecipient id: addPeerWin
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 visible: false
minimumWidth: 230
maximumWidth: 230
maximumHeight: 50
minimumHeight: 50
}
TextField { TextField {
id: txSimpleOutput id: addrField
visible: false anchors.verticalCenter: parent.verticalCenter
width: 530 anchors.left: parent.left
anchors.leftMargin: 10
placeholderText: "address:port"
onAccepted: {
ui.connectToPeer(addrField.text)
addPeerWin.visible = false
}
} }
Button { Button {
id: newSimpleTxButton anchors.left: addrField.right
visible: false anchors.verticalCenter: parent.verticalCenter
text: "Create an other transaction" anchors.leftMargin: 5
text: "Add"
onClicked: { onClicked: {
this.visible = false ui.connectToPeer(addrField.text)
simpleSendColumn.state = "SETUP" addPeerWin.visible = false
} }
} }
Component.onCompleted: {
addrField.focus = true
} }
} }
} }
...@@ -31,6 +31,7 @@ type Gui struct { ...@@ -31,6 +31,7 @@ type Gui struct {
// QML Engine // QML Engine
engine *qml.Engine engine *qml.Engine
component *qml.Common component *qml.Common
qmlDone bool
// The ethereum interface // The ethereum interface
eth *eth.Ethereum eth *eth.Ethereum
...@@ -150,18 +151,16 @@ func (gui *Gui) showWallet(context *qml.Context) (*qml.Window, error) { ...@@ -150,18 +151,16 @@ func (gui *Gui) showWallet(context *qml.Context) (*qml.Window, error) {
return nil, err return nil, err
} }
win := gui.createWindow(component) gui.win = gui.createWindow(component)
go func() {
go gui.setInitialBlockChain()
gui.loadAddressBook()
gui.setPeerInfo()
gui.readPreviousTransactions()
}()
gui.update() 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) { func (gui *Gui) ImportKey(filePath string) {
...@@ -230,14 +229,16 @@ type address struct { ...@@ -230,14 +229,16 @@ type address struct {
} }
func (gui *Gui) loadAddressBook() { func (gui *Gui) loadAddressBook() {
gui.win.Root().Call("clearAddress") view := gui.getObjectByName("infoView")
view.Call("clearAddress")
nameReg := ethpub.EthereumConfig(gui.eth.StateManager()).NameReg() nameReg := ethpub.EthereumConfig(gui.eth.StateManager()).NameReg()
if nameReg != nil { if nameReg != nil {
nameReg.EachStorage(func(name string, value *ethutil.Value) { nameReg.EachStorage(func(name string, value *ethutil.Value) {
if name[0] != 0 { if name[0] != 0 {
value.Decode() 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) { ...@@ -282,7 +283,7 @@ func (gui *Gui) insertTransaction(window string, tx *ethchain.Transaction) {
ptx.Sender = s ptx.Sender = s
ptx.Address = r ptx.Address = r
gui.win.Root().Call("addTx", window, ptx, inout) gui.getObjectByName("transactionView").Call("addTx", window, ptx, inout)
} }
func (gui *Gui) readPreviousTransactions() { func (gui *Gui) readPreviousTransactions() {
...@@ -301,7 +302,7 @@ func (gui *Gui) processBlock(block *ethchain.Block, initial bool) { ...@@ -301,7 +302,7 @@ func (gui *Gui) processBlock(block *ethchain.Block, initial bool) {
b := ethpub.NewPBlock(block) b := ethpub.NewPBlock(block)
b.Name = name 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) { func (gui *Gui) setWalletValue(amount, unconfirmedFunds *big.Int) {
...@@ -326,6 +327,17 @@ func (self *Gui) getObjectByName(objectName string) qml.Object { ...@@ -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 // Simple go routine function that updates the list of peers in the GUI
func (gui *Gui) update() { 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 ( var (
blockChan = make(chan ethreact.Event, 100) blockChan = make(chan ethreact.Event, 100)
...@@ -514,7 +526,9 @@ func (gui *Gui) Printf(format string, v ...interface{}) { ...@@ -514,7 +526,9 @@ func (gui *Gui) Printf(format string, v ...interface{}) {
func (gui *Gui) printLog(s string) { func (gui *Gui) printLog(s string) {
str := strings.TrimRight(s, "\n") str := strings.TrimRight(s, "\n")
lines := strings.Split(str, "\n") lines := strings.Split(str, "\n")
view := gui.getObjectByName("infoView")
for _, line := range lines { for _, line := range lines {
gui.win.Root().Call("addLog", line) view.Call("addLog", line)
} }
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment