path: root/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

    width: 900
    height: 600
    minimumHeight: 300

    title: "Ethereal"

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

        Menu {
            title: "Tools"
            MenuItem {
                text: "Muted"
                shortcut: "Ctrl+e"
                onTriggered: ui.muted("")
            }

            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: "Start"
                onTriggered: ui.connect()
            }
        }

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

            Rectangle {
                id: networkView
                property var title: "Network"
                visible: false
                anchors.fill: parent

                TableView {
                    id: blockTable
                    width: parent.width
                    anchors.top: parent.top
                    anchors.bottom: logView.top
                    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))
                    }
                }

                property var logModel: ListModel {
                    id: logModel
                }

                TableView {
                    id: logView
                    width: parent.width
                    height: 150
                    anchors.bottom: parent.bottom
                    TableViewColumn{ role: "description" ; title: "log" }

                    model: logModel
                }
            }

            Rectangle {
                id: infoView
                property var title: "Information"
                visible: false
                color: "#00000000"
                anchors.fill: parent

                Label {
                    id: addressLabel
                    text: "Address"
                    anchors {
                        margins: 5
                        top: parent.top
                        left: parent.left
                    }
                }
                TextField {
                    anchors {
                        margins: 5
                        left: addressLabel.right
                        top: parent.top
                    }
                    text: pub.getKey().address
                    width: 500
                }
            }

            /*
             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 {
        RowLayout {
            anchors.fill: parent

            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 {
                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")
            }
        }
    }

    Window {
        id: popup
        visible: false
        property var block
        width: root.width
        height: 240
        x: root.x
        y: root.y + root.height
        Component{
            id: blockDetailsDelegate
            Rectangle {
                color: "#252525"
                width: popup.width
                height: 200
                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>Block found at:</b> ' + prettyTime; color: "#F2F2F2"}
                }
            }
        }
        ListView {
            model: singleBlock
            delegate: blockDetailsDelegate
            anchors.top: parent.top
            height: 70
            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 = 230
                }
            }
        }

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

        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
                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 = 230
            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>"
        }

    }

    ApplicationWindow {
        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()
                }
            }
        }
        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
                        id: debugSplitView
                        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: debugSplitView.width }
                            model: stackModel
                        }
                    }
                }
            }
        }
        statusBar: StatusBar {
            RowLayout {
                anchors.fill: parent
                Button {
                    property var enabled: true
                    id: debugNextButton
                    onClicked: {
                        ui.next()
                    }
                    text: "Next"
                }
            }
        }
    }

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

    function setPeers(text) {
        peerLabel.text = text
    }
    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;
    }
    // *******************************************
    // Components
    // *******************************************

    // New Contract component
    Component {
        id: newContract
        Column {
            id: mainContractColumn
            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: 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: txValue
                width: 200
                placeholderText: "Amount"
                validator: RegExpValidator { regExp: /\d*/ }
                onTextChanged: {
                    contractFormReady()
                }
            }
            TextField {
                id: txGas
                width: 200
                validator: RegExpValidator { regExp: /\d*/ }
                placeholderText: "Gas"
                onTextChanged: {
                    contractFormReady()
                }
            }
            TextField {
                id: txGasPrice
                width: 200
                placeholderText: "Gas price"
                validator: RegExpValidator { regExp: /\d*/ }
                onTextChanged: {
                    contractFormReady()
                }
            }

            Row {
                id: rowContract
                ExclusiveGroup { id: contractTypeGroup }
                RadioButton {
                    id: createContractRadio
                    text: "Create contract"
                    checked: true
                    exclusiveGroup: contractTypeGroup
                    onClicked: {
                        txFuelRecipient.visible = false
                        txDataLabel.text = "Contract code"
                    }
                }
                RadioButton {
                    id: runContractRadio
                    text: "Run contract"
                    exclusiveGroup: contractTypeGroup
                    onClicked: {
                        txFuelRecipient.visible = true
                        txDataLabel.text = "Contract arguments"
                    }
                }
            }


            Label {
                id: txDataLabel
                text: "Contract code"
            }

            TextArea {
                id: codeView
                height: 300
                anchors.topMargin: 5
                Layout.fillWidth: true
                width: parent.width /2
                onTextChanged: {
                    contractFormReady()
                }
            }

            TextField {
                id: txFuelRecipient
                placeholderText: "Contract address"
                validator: RegExpValidator { regExp: /[a-f0-9]{40}/ }
                visible: false
                width: 530
            }

            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 an other contract"
                onClicked: {
                    this.visible = false
                    txResult.text = ""
                    txOutput.text = ""
                    mainContractColumn.state = "SETUP"
                }
            }

            Button {
                id: debugButton
                text: "Debug"
                onClicked: {
                    var res = ui.debugTx("", txValue.text, txGas.text, txGasPrice.text, codeView.text)
                    debugWindow.visible = true
                }
            }
        }
    }

    // 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,"","","")
                    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"
                }
            }
        }
    }

}