Implemented QML message filtering

ethereal/assets/ext/filter.js

@@ -0,0 +1,23 @@
+var Filter = function(eth, options) {
+	this.callbacks = {};
+	this.seed = Math.floor(Math.random() * 1000000);
+	this.eth = eth;
+
+	eth.registerFilter(options, this.seed);
+};
+
+Filter.prototype.changed = function(callback) {
+	var cbseed = Math.floor(Math.random() * 1000000);
+	this.eth.registerFilterCallback(this.seed, cbseed);
+
+	var self = this;
+	message.connect(function(messages, seed, callbackSeed) {
+		if(seed ==  self.seed && callbackSeed == cbseed) {
+			callback.call(self, messages);
+		}
+	});
+};
+
+Filter.prototype.uninstall = function() {
+	eth.uninstallFilter(this.seed)
+}

ethereal/assets/qml/views/wallet.qml

@@ -17,31 +17,132 @@ Rectangle {
 
 	function onReady() {
 		menuItem.secondary = eth.numberToHuman(eth.balanceAt(eth.key().address))
+	}
 
+	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" }
 	}
 
 	ColumnLayout {
 		spacing: 10
 		y: 40
-		anchors {
+		anchors.fill: parent
-			left: parent.left
-			right: parent.right
-		}
 
 		Text {
+			id: balance
 			text: "<b>Balance</b>: " + eth.numberToHuman(eth.balanceAt(eth.key().address))
 			font.pixelSize: 24
 			anchors {
 				horizontalCenter: parent.horizontalCenter
+				top: parent.top
+				topMargin: 20
 			}
 		}
 
-		TableView {
+		Rectangle {
-			id: txTableView
+			id: newTxPane
+			color: "#ececec"
+			border.color: "#cccccc"
+			border.width: 1
+			anchors {
+				top: balance.bottom
+				topMargin: 10
+				left: parent.left
+				leftMargin: 5
+				right: parent.right
+				rightMargin: 5
+			}
+			height: 100
+
+			RowLayout {
+				id: amountFields
+				spacing: 10
+				anchors {
+					top: parent.top
+					topMargin: 20
+					left: parent.left
+					leftMargin: 20
+				}
+
+				Text {
+					text: "Ξ  "
+				}
+
+				// There's something off with the row layout where textfields won't listen to the width setting
+				Rectangle {
+					width: 50
+					height: 20
+					TextField {
+						id: txValue
+						width: parent.width
+						placeholderText: "0.00"
+					}
+				}
+
+				ComboBox {
+					id: valueDenom
+					currentIndex: 6
+					model: denomModel
+				}
+
+			}
+
+			RowLayout {
+				id: toFields
+				spacing: 10
+				anchors {
+					top: amountFields.bottom
+					topMargin: 5
+					left: parent.left
+					leftMargin: 20
+				}
+
+				Text {
+					text: "To"
+				}
+
+				Rectangle {
+					width: 200
+					height: 20
+					TextField {
+						id: txTo
+						width: parent.width
+						placeholderText: "Address or name"
+					}
+				}
+
+				Button {
+					text: "Send"
+					onClicked: {
+						var value = txValue.text + denomModel.get(valueDenom.currentIndex).zeros;
+						var gasPrice = "10000000000000"
+						var res = eth.transact(eth.key().privateKey, txTo.text, value, "500", gasPrice, "")
+						console.log(res)
+					}
+				}
+			}
+		}
+
+		Rectangle {
 			anchors {
 				left: parent.left
 				right: parent.right
+				top: newTxPane.bottom
+				topMargin: 10
+				bottom: parent.bottom
 			}
+			TableView {
+				id: txTableView
+				anchors.fill : parent
 				TableViewColumn{ role: "num" ; title: "#" ; width: 30 }
 				TableViewColumn{ role: "from" ; title: "From" ; width: 280 }
 				TableViewColumn{ role: "to" ; title: "To" ; width: 280 }
@@ -58,6 +159,7 @@ Rectangle {
 					}
 				}
 			}
+		}
 
 	}
 }

ethereal/assets/qml/wallet.qml

@@ -6,17 +6,28 @@ import QtQuick.Window 2.1;
 import QtQuick.Controls.Styles 1.1
 import Ethereum 1.0
 
+import "../ext/filter.js" as Eth
 
 ApplicationWindow {
 	id: root
 
 	property alias miningButtonText: miningButton.text
 
+
 	width: 900
 	height: 600
 	minimumHeight: 300
 
-	title: "Ethereal"
+	title: "Ether browser"
+
+	// This signal is used by the filter API. The filter API connects using this signal handler from
+	// the different QML files and plugins.
+	signal message(var callback, int seed, int seedCallback);
+	function invokeFilterCallback(data, receiverSeed, callbackSeed) {
+		var messages = JSON.parse(data)
+		// Signal handler
+		message(data, receiverSeed, callbackSeed);
+	}
 
 	TextField {
 		id: copyElementHax
@@ -31,17 +42,17 @@ ApplicationWindow {
 
 	// Takes care of loading all default plugins
 	Component.onCompleted: {
-		var walletView = addPlugin("./views/wallet.qml", {section: "ethereum"})
+		var walletView = addPlugin("./views/wallet.qml", {noAdd: true, section: "ethereum", active: true})
-
+		var historyView = addPlugin("./views/history.qml", {noAdd: true, section: "legacy"})
-		var historyView = addPlugin("./views/history.qml", {section: "legacy"})
+		var newTxView = addPlugin("./views/transaction.qml", {noAdd: true, section: "legacy"})
-		var newTxView = addPlugin("./views/transaction.qml", {section: "legacy"})
+		var chainView = addPlugin("./views/chain.qml", {noAdd: true, section: "legacy"})
-		var chainView = addPlugin("./views/chain.qml", {section: "legacy"})
+		var infoView = addPlugin("./views/info.qml", {noAdd: true, section: "legacy"})
-		var infoView = addPlugin("./views/info.qml", {section: "legacy"})
+		var pendingTxView = addPlugin("./views/pending_tx.qml", {noAdd: true, section: "legacy"})
-		var pendingTxView = addPlugin("./views/pending_tx.qml", {section: "legacy"})
+		var pendingTxView = addPlugin("./views/javascript.qml", {noAdd: true, section: "legacy"})
-		var pendingTxView = addPlugin("./views/javascript.qml", {section: "legacy"})
 
 		// Call the ready handler
 		gui.done()
+
 	}
 
 	function addPlugin(path, options) {
@@ -50,10 +61,20 @@ ApplicationWindow {
 			if(component.status == Component.Error) {
 				console.debug("Error:"+ component.errorString());
 			}
+
 			return
 		}
 
-		return mainSplit.addComponent(component, options)
+		var views = mainSplit.addComponent(component, options)
+		views.menuItem.path = path
+
+		mainSplit.views.push(views);
+
+		if(!options.noAdd) {
+			gui.addPlugin(path)
+		}
+
+		return views.view
 	}
 
 	MenuBar {
@@ -76,7 +97,7 @@ ApplicationWindow {
 				text: "Add plugin"
 				onTriggered: {
 					generalFileDialog.show(true, function(path) {
-						addPlugin(path, {canClose: true})
+						addPlugin(path, {canClose: true, section: "apps"})
 					})
 				}
 			}
@@ -268,23 +289,29 @@ ApplicationWindow {
 
 		function addComponent(component, options) {
 			var view = mainView.createView(component, options)
+			view.visible = false
+			view.anchors.fill = mainView
 
-			if(!view.hasOwnProperty("iconFile")) {
+			if( !view.hasOwnProperty("iconFile") ) {
 				console.log("Could not load plugin. Property 'iconFile' not found on view.");
 				return;
 			}
 
 			var menuItem = menu.createMenuItem(view.iconFile, view, options);
-			if(view.hasOwnProperty("menuItem")) {
+			if( view.hasOwnProperty("menuItem") ) {
 				view.menuItem = menuItem;
 			}
-			mainSplit.views.push({view: view, menuItem: menuItem});
 
-			if(view.hasOwnProperty("onReady")) {
+			if( view.hasOwnProperty("onReady") ) {
 				view.onReady.call(view)
 			}
 
-			return view
+			if( options.active ) {
+				setView(view, menuItem)
+			}
+
+
+			return {view: view, menuItem: menuItem}
 		}
 
 		/*********************
@@ -302,6 +329,7 @@ ApplicationWindow {
 				 Rectangle {
 					 id: menuItem
 					 property var view;
+					 property var path;
 
 					 property alias title: label.text
 					 property alias icon: icon.source
@@ -319,6 +347,13 @@ ApplicationWindow {
 						 leftMargin: 4
 					 }
 
+					 MouseArea {
+						 anchors.fill: parent
+						 onClicked: {
+							 mainSplit.setView(view, menuItem)
+						 }
+					 }
+
 					 Image {
 						 id: icon
 						 height: 20
@@ -328,6 +363,12 @@ ApplicationWindow {
 							 verticalCenter: parent.verticalCenter
 							 leftMargin: 3
 						 }
+						 MouseArea {
+							 anchors.fill: parent
+							 onClicked: {
+								 menuItem.closeApp()
+							 }
+						 }
 					 }
 
 					 Text {
@@ -338,7 +379,6 @@ ApplicationWindow {
 							 leftMargin: 3
 						 }
 
-						//font.bold: true
 						 color: "#0D0A01"
 						 font.pixelSize: 12
 					 }
@@ -354,11 +394,15 @@ ApplicationWindow {
 						 font.pixelSize: 12
 					 }
 
-					MouseArea {
+
-						anchors.fill: parent
+					 function closeApp() {
-						onClicked: {
+						 if(this.view.hasOwnProperty("onDestroy")) {
-							mainSplit.setView(view, menuItem)
+							 this.view.onDestroy.call(this.view)
 						 }
+
+						 this.view.destroy()
+						 this.destroy()
+						 gui.removePlugin(this.path)
 					 }
 				 }
 			 }
@@ -428,8 +472,28 @@ ApplicationWindow {
 					 }
 				 }
 
+
 				 Text {
-					text: "LEGACY"
+					 text: "APPS"
+					 font.bold: true
+					 anchors {
+						 left: parent.left
+						 leftMargin: 5
+					 }
+					 color: "#888888"
+				 }
+
+				 ColumnLayout {
+					 id: menuApps
+					 spacing: 3
+					 anchors {
+						 left: parent.left
+						 right: parent.right
+					 }
+				 }
+
+				 Text {
+					 text: "DEBUG"
 					 font.bold: true
 					 anchors {
 						 left: parent.left
@@ -446,63 +510,6 @@ ApplicationWindow {
 						 right: parent.right
 					 }
 				 }
-
-				Text {
-					text: "APPS"
-					font.bold: true
-					anchors {
-						left: parent.left
-						leftMargin: 5
-					}
-					color: "#888888"
-				}
-
-				/*
-				Rectangle {
-					width: 180
-					height: 28
-					border.color: "#CCCCCC"
-					border.width: 1
-					radius: 5
-					color: "#FFFFFF"
-
-					anchors {
-						left: parent.left
-						leftMargin: 4
-					}
-
-					Image {
-						id: icon
-						anchors {
-							left: parent.left
-							verticalCenter: parent.verticalCenter
-						}
-						source: "../pick.png"
-					}
-
-					Text {
-						anchors {
-							left: icon.right
-							verticalCenter: parent.verticalCenter
-						}
-
-						text: "Wallet"
-						font.bold: true
-						color: "#0D0A01"
-					}
-
-					Text {
-						anchors {
-							right: parent.right
-							rightMargin: 8
-							verticalCenter: parent.verticalCenter
-						}
-						color: "#AEADBE"
-						text: "12e15 Ξ"
-						font.pixelSize: 12
-					}
-				}
-				*/
 			 }
 		 }
 
@@ -557,17 +564,18 @@ ApplicationWindow {
 		    if(ext == "html" || ext == "htm") {
 			    eth.openHtml(path)
 		    }else if(ext == "qml"){
-			eth.openQml(path)
+			    addPlugin(path, {canClose: true, section: "apps"})
 		    }
 	    }
 
+
 	    function setWalletValue(value) {
 		    walletValueLabel.text = value
 	    }
 
 	    function loadPlugin(name) {
 		    console.log("Loading plugin" + name)
-		mainView.addPlugin(name)
+		    var view = mainView.addPlugin(name)
 	    }
 
 	    function setPeers(text) {
@@ -718,4 +726,4 @@ ApplicationWindow {
 			     addrField.focus = true
 		     }
 	     }
-}
+     }

ethereal/gui.go

@@ -2,6 +2,7 @@ package main
 
 import (
 	"bytes"
+	"encoding/json"
 	"fmt"
 	"math/big"
 	"os"
@@ -24,6 +25,11 @@ import (
 
 var logger = ethlog.NewLogger("GUI")
 
+type plugin struct {
+	Name string `json:"name"`
+	Path string `json:"path"`
+}
+
 type Gui struct {
 	// The main application window
 	win *qml.Window
@@ -48,6 +54,8 @@ type Gui struct {
 	clientIdentity *ethwire.SimpleClientIdentity
 	config         *ethutil.ConfigManager
 
+	plugins map[string]plugin
+
 	miner *ethminer.Miner
 }
 
@@ -59,8 +67,16 @@ func NewWindow(ethereum *eth.Ethereum, config *ethutil.ConfigManager, clientIden
 	}
 
 	pipe := ethpipe.NewJSPipe(ethereum)
+	gui := &Gui{eth: ethereum, txDb: db, pipe: pipe, logLevel: ethlog.LogLevel(logLevel), Session: session, open: false, clientIdentity: clientIdentity, config: config, plugins: make(map[string]plugin)}
+	data, err := ethutil.ReadAllFile(ethutil.Config.ExecPath + "/plugins.json")
+	if err != nil {
+		fmt.Println(err)
+	}
+	fmt.Println(string(data))
 
-	return &Gui{eth: ethereum, txDb: db, pipe: pipe, logLevel: ethlog.LogLevel(logLevel), Session: session, open: false, clientIdentity: clientIdentity, config: config}
+	json.Unmarshal([]byte(data), &gui.plugins)
+
+	return gui
 }
 
 func (gui *Gui) Start(assetPath string) {
@@ -193,6 +209,7 @@ func (self *Gui) DumpState(hash, path string) {
 // 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) {
@@ -375,6 +392,10 @@ func (gui *Gui) update() {
 		gui.readPreviousTransactions()
 	}()
 
+	for _, plugin := range gui.plugins {
+		gui.win.Root().Call("addPlugin", plugin.Path, "")
+	}
+
 	var (
 		blockChan     = make(chan ethreact.Event, 100)
 		txChan        = make(chan ethreact.Event, 100)
@@ -504,7 +525,16 @@ func (gui *Gui) address() []byte {
 }
 
 func (gui *Gui) Transact(recipient, value, gas, gasPrice, d string) (*ethpipe.JSReceipt, error) {
-	data := ethutil.Bytes2Hex(utils.FormatTransactionData(d))
+	var data string
+	if len(recipient) == 0 {
+		code, err := ethutil.Compile(d, false)
+		if err != nil {
+			return nil, err
+		}
+		data = ethutil.Bytes2Hex(code)
+	} else {
+		data = ethutil.Bytes2Hex(utils.FormatTransactionData(d))
+	}
 
 	return gui.pipe.Transact(gui.privateKey(), recipient, value, gas, gasPrice, data)
 }
@@ -528,6 +558,20 @@ func (gui *Gui) GetLogLevel() ethlog.LogLevel {
 	return gui.logLevel
 }
 
+func (self *Gui) AddPlugin(pluginPath string) {
+	self.plugins[pluginPath] = plugin{Name: "SomeName", Path: pluginPath}
+
+	json, _ := json.MarshalIndent(self.plugins, "", "    ")
+	ethutil.WriteFile(ethutil.Config.ExecPath+"/plugins.json", json)
+}
+
+func (self *Gui) RemovePlugin(pluginPath string) {
+	delete(self.plugins, pluginPath)
+
+	json, _ := json.MarshalIndent(self.plugins, "", "    ")
+	ethutil.WriteFile(ethutil.Config.ExecPath+"/plugins.json", json)
+}
+
 // this extra function needed to give int typecast value to gui widget
 // that sets initial loglevel to default
 func (gui *Gui) GetLogLevelInt() int {

ethereal/ui_lib.go

@@ -11,6 +11,7 @@ import (
 	"github.com/ethereum/eth-go/ethchain"
 	"github.com/ethereum/eth-go/ethcrypto"
 	"github.com/ethereum/eth-go/ethpipe"
+	"github.com/ethereum/eth-go/ethstate"
 	"github.com/ethereum/eth-go/ethutil"
 	"github.com/ethereum/go-ethereum/javascript"
 	"gopkg.in/qml.v1"
@@ -34,10 +35,13 @@ type UiLib struct {
 	DbWindow *DebuggerWindow
 
 	jsEngine *javascript.JSRE
+
+	filterCallbacks map[int][]int
+	filters         map[int]*GuiFilter
 }
 
 func NewUiLib(engine *qml.Engine, eth *eth.Ethereum, assetPath string) *UiLib {
-	return &UiLib{JSPipe: ethpipe.NewJSPipe(eth), engine: engine, eth: eth, assetPath: assetPath, jsEngine: javascript.NewJSRE(eth)}
+	return &UiLib{JSPipe: ethpipe.NewJSPipe(eth), engine: engine, eth: eth, assetPath: assetPath, jsEngine: javascript.NewJSRE(eth), filterCallbacks: make(map[int][]int), filters: make(map[int]*GuiFilter)}
 }
 
 func (self *UiLib) LookupDomain(domain string) string {
@@ -155,3 +159,31 @@ func (self *UiLib) StartDebugger() {
 
 	dbWindow.Show()
 }
+
+func (self *UiLib) RegisterFilter(object map[string]interface{}, seed int) {
+	filter := &GuiFilter{ethpipe.NewJSFilterFromMap(object, self.eth), seed}
+	self.filters[seed] = filter
+
+	filter.MessageCallback = func(messages ethstate.Messages) {
+		for _, callbackSeed := range self.filterCallbacks[seed] {
+			self.win.Root().Call("invokeFilterCallback", filter.MessagesToJson(messages), seed, callbackSeed)
+		}
+	}
+}
+
+func (self *UiLib) RegisterFilterCallback(seed, cbSeed int) {
+	self.filterCallbacks[seed] = append(self.filterCallbacks[seed], cbSeed)
+}
+
+func (self *UiLib) UninstallFilter(seed int) {
+	filter := self.filters[seed]
+	if filter != nil {
+		filter.Uninstall()
+		delete(self.filters, seed)
+	}
+}
+
+type GuiFilter struct {
+	*ethpipe.JSFilter
+	seed int
+}