Merge pull request #298 from alexvandesande/UI

UI changes to Mist

21 files changed, 1526 insertions, 920 deletions

diff --git a/cmd/mist/assets/backButton.png b/cmd/mist/assets/backButton.png
new file mode 100644
index 000000000..eef997434
--- /dev/null
+++ b/cmd/mist/assets/backButton.png
diff --git a/cmd/mist/assets/backButton@2x.png b/cmd/mist/assets/backButton@2x.png
new file mode 100644
index 000000000..b72fd73f4
--- /dev/null
+++ b/cmd/mist/assets/backButton@2x.png
diff --git a/cmd/mist/assets/qml/fonts/Simple-Line-Icons.ttf b/cmd/mist/assets/qml/fonts/Simple-Line-Icons.ttf
new file mode 100755
index 000000000..2194f1f87
--- /dev/null
+++ b/cmd/mist/assets/qml/fonts/Simple-Line-Icons.ttf
diff --git a/cmd/mist/assets/qml/fonts/SourceSansPro-Black.ttf b/cmd/mist/assets/qml/fonts/SourceSansPro-Black.ttf
new file mode 100644
index 000000000..be1a3108e
--- /dev/null
+++ b/cmd/mist/assets/qml/fonts/SourceSansPro-Black.ttf
diff --git a/cmd/mist/assets/qml/fonts/SourceSansPro-BlackIt.ttf b/cmd/mist/assets/qml/fonts/SourceSansPro-BlackIt.ttf
new file mode 100644
index 000000000..ac5c4ef7c
--- /dev/null
+++ b/cmd/mist/assets/qml/fonts/SourceSansPro-BlackIt.ttf
diff --git a/cmd/mist/assets/qml/fonts/SourceSansPro-Bold.ttf b/cmd/mist/assets/qml/fonts/SourceSansPro-Bold.ttf
new file mode 100644
index 000000000..f47161c6b
--- /dev/null
+++ b/cmd/mist/assets/qml/fonts/SourceSansPro-Bold.ttf
diff --git a/cmd/mist/assets/qml/fonts/SourceSansPro-BoldIt.ttf b/cmd/mist/assets/qml/fonts/SourceSansPro-BoldIt.ttf
new file mode 100644
index 000000000..6b3db698b
--- /dev/null
+++ b/cmd/mist/assets/qml/fonts/SourceSansPro-BoldIt.ttf
diff --git a/cmd/mist/assets/qml/fonts/SourceSansPro-ExtraLight.ttf b/cmd/mist/assets/qml/fonts/SourceSansPro-ExtraLight.ttf
new file mode 100644
index 000000000..0a3e51fdb
--- /dev/null
+++ b/cmd/mist/assets/qml/fonts/SourceSansPro-ExtraLight.ttf
diff --git a/cmd/mist/assets/qml/fonts/SourceSansPro-ExtraLightIt.ttf b/cmd/mist/assets/qml/fonts/SourceSansPro-ExtraLightIt.ttf
new file mode 100644
index 000000000..a0eb86aca
--- /dev/null
+++ b/cmd/mist/assets/qml/fonts/SourceSansPro-ExtraLightIt.ttf
diff --git a/cmd/mist/assets/qml/fonts/SourceSansPro-It.ttf b/cmd/mist/assets/qml/fonts/SourceSansPro-It.ttf
new file mode 100644
index 000000000..fcc95fc7c
--- /dev/null
+++ b/cmd/mist/assets/qml/fonts/SourceSansPro-It.ttf
diff --git a/cmd/mist/assets/qml/fonts/SourceSansPro-Light.ttf b/cmd/mist/assets/qml/fonts/SourceSansPro-Light.ttf
new file mode 100644
index 000000000..9cae13c97
--- /dev/null
+++ b/cmd/mist/assets/qml/fonts/SourceSansPro-Light.ttf
diff --git a/cmd/mist/assets/qml/fonts/SourceSansPro-LightIt.ttf b/cmd/mist/assets/qml/fonts/SourceSansPro-LightIt.ttf
new file mode 100644
index 000000000..2ed784284
--- /dev/null
+++ b/cmd/mist/assets/qml/fonts/SourceSansPro-LightIt.ttf
diff --git a/cmd/mist/assets/qml/fonts/SourceSansPro-Regular.ttf b/cmd/mist/assets/qml/fonts/SourceSansPro-Regular.ttf
new file mode 100644
index 000000000..8e8255e17
--- /dev/null
+++ b/cmd/mist/assets/qml/fonts/SourceSansPro-Regular.ttf
diff --git a/cmd/mist/assets/qml/fonts/SourceSansPro-Semibold.ttf b/cmd/mist/assets/qml/fonts/SourceSansPro-Semibold.ttf
new file mode 100644
index 000000000..121ee9bbf
--- /dev/null
+++ b/cmd/mist/assets/qml/fonts/SourceSansPro-Semibold.ttf
diff --git a/cmd/mist/assets/qml/fonts/SourceSansPro-SemiboldIt.ttf b/cmd/mist/assets/qml/fonts/SourceSansPro-SemiboldIt.ttf
new file mode 100644
index 000000000..6ceaa885f
--- /dev/null
+++ b/cmd/mist/assets/qml/fonts/SourceSansPro-SemiboldIt.ttf
diff --git a/cmd/mist/assets/qml/fonts/SourceSerifPro-Bold.ttf b/cmd/mist/assets/qml/fonts/SourceSerifPro-Bold.ttf
new file mode 100644
index 000000000..ac7837fd9
--- /dev/null
+++ b/cmd/mist/assets/qml/fonts/SourceSerifPro-Bold.ttf
diff --git a/cmd/mist/assets/qml/fonts/SourceSerifPro-Regular.ttf b/cmd/mist/assets/qml/fonts/SourceSerifPro-Regular.ttf
new file mode 100644
index 000000000..7201a8890
--- /dev/null
+++ b/cmd/mist/assets/qml/fonts/SourceSerifPro-Regular.ttf
diff --git a/cmd/mist/assets/qml/fonts/SourceSerifPro-Semibold.ttf b/cmd/mist/assets/qml/fonts/SourceSerifPro-Semibold.ttf
new file mode 100644
index 000000000..db2fc804b
--- /dev/null
+++ b/cmd/mist/assets/qml/fonts/SourceSerifPro-Semibold.ttf
diff --git a/cmd/mist/assets/qml/main.qml b/cmd/mist/assets/qml/main.qml
index 357e40846..e169f54ec 100644
--- a/cmd/mist/assets/qml/main.qml
+++ b/cmd/mist/assets/qml/main.qml
@@ -9,882 +9,1071 @@ import Ethereum 1.0
 import "../ext/filter.js" as Eth
 import "../ext/http.js" as Http
 
+
 ApplicationWindow {
-	id: root
-
-	property var ethx : Eth.ethx
-
-	width: 1200
-	height: 820
-	minimumWidth: 300
-
-	title: "Mist"
-
-	TextField {
-		id: copyElementHax
-		visible: false
-	}
-
-	function copyToClipboard(text) {
-		copyElementHax.text = text
-		copyElementHax.selectAll()
-		copyElementHax.copy()
-	}
-
-	// Takes care of loading all default plugins
-	Component.onCompleted: {
-		var wallet = addPlugin("./views/wallet.qml", {noAdd: true, close: false, section: "ethereum", active: true});
-		addPlugin("./views/miner.qml", {noAdd: true, close: false, section: "ethereum", active: true});
-
-		addPlugin("./views/transaction.qml", {noAdd: true, close: false, section: "legacy"});
-		addPlugin("./views/whisper.qml", {noAdd: true, close: false, section: "legacy"});
-		addPlugin("./views/chain.qml", {noAdd: true, close: false, section: "legacy"});
-		addPlugin("./views/pending_tx.qml", {noAdd: true, close: false, section: "legacy"});
-		addPlugin("./views/info.qml", {noAdd: true, close: false, section: "legacy"});
-
-		mainSplit.setView(wallet.view, wallet.menuItem);
-
-		newBrowserTab(eth.assetPath("html/home.html"));
-
-		// Command setup
-		gui.sendCommand(0)
-	}
-
-	function activeView(view, menuItem) {
-		mainSplit.setView(view, menuItem)
-		if (view.hideUrl) {
-			urlPane.visible = false;
-			mainView.anchors.top = rootView.top
-		} else {
-			urlPane.visible = true;
-			mainView.anchors.top = divider.bottom
-		}
-	}
-
-	function addViews(view, path, options) {
-		var views = mainSplit.addComponent(view, options)
-		views.menuItem.path = path
-
-		mainSplit.views.push(views);
-
-		if(!options.noAdd) {
-			gui.addPlugin(path)
-		}
-
-		return views
-	}
-
-	function addPlugin(path, options) {
-		try {
-			if(typeof(path) === "string" && /^https?/.test(path)) {
-				console.log('load http')
-				Http.request(path, function(o) {
-					if(o.status === 200) {
-						var view = Qt.createQmlObject(o.responseText, mainView, path)
-						addViews(view, path, options)
-					}
-				})
-
-				return
-			}
-
-			var component = Qt.createComponent(path);
-			if(component.status != Component.Ready) {
-				if(component.status == Component.Error) {
-					ethx.note("error: ", component.errorString());
-				}
-
-				return
-			}
-
-			var view = mainView.createView(component, options)
-			var views = addViews(view, path, options)
-
-			return views
-		} catch(e) {
-			console.log(e)
-		}
-	}
-
-	function newBrowserTab(url) {
-		var window = addPlugin("./views/browser.qml", {noAdd: true, close: true, section: "apps", active: true});
-		window.view.url = url;
-		window.menuItem.title = "Mist";
-		activeView(window.view, window.menuItem);
-	}
-
-	menuBar: MenuBar {
-		Menu {
-			title: "File"
-			MenuItem {
-				text: "Import App"
-				shortcut: "Ctrl+o"
-				onTriggered: {
-					generalFileDialog.show(true, importApp)
-				}
-			}
-
-			MenuItem {
-				text: "Add plugin"
-				onTriggered: {
-					generalFileDialog.show(true, function(path) {
-						addPlugin(path, {close: true, section: "apps"})
-					})
-				}
-			}
-
-			MenuItem {
-				text: "New tab"
-				shortcut: "Ctrl+t"
-				onTriggered: {
-					newBrowserTab("about:blank");
-				}
-			}
-
-			MenuSeparator {}
-
-			MenuItem {
-				text: "Import key"
-				shortcut: "Ctrl+i"
-				onTriggered: {
-					generalFileDialog.show(true, function(path) {
-						gui.importKey(path)
-					})
-				}
-			}
-
-			MenuItem {
-				text: "Export keys"
-				shortcut: "Ctrl+e"
-				onTriggered: {
-					generalFileDialog.show(false, function(path) {
-					})
-				}
-			}
-
-		}
-
-		Menu {
-			title: "Developer"
-			MenuItem {
-				iconSource: "../icecream.png"
-				text: "Debugger"
-				shortcut: "Ctrl+d"
-				onTriggered: eth.startDebugger()
-			}
-
-			MenuItem {
-				text: "Import Tx"
-				onTriggered: {
-					txImportDialog.visible = true
-				}
-			}
-
-			MenuItem {
-				text: "Run JS file"
-				onTriggered: {
-					generalFileDialog.show(true, function(path) {
-						eth.evalJavascriptFile(path)
-					})
-				}
-			}
-
-			MenuItem {
-				text: "Dump state"
-				onTriggered: {
-					generalFileDialog.show(false, function(path) {
-						// Empty hash for latest
-						gui.dumpState("", path)
-					})
-				}
-			}
-
-			MenuSeparator {}
-		}
-
-		Menu {
-			title: "Network"
-			MenuItem {
-				text: "Add Peer"
-				shortcut: "Ctrl+p"
-				onTriggered: {
-					addPeerWin.visible = true
-				}
-			}
-			MenuItem {
-				text: "Show Peers"
-				shortcut: "Ctrl+e"
-				onTriggered: {
-					peerWindow.visible = true
-				}
-			}
-		}
-
-		Menu {
-			title: "Help"
-			MenuItem {
-				text: "About"
-				onTriggered: {
-					aboutWin.visible = true
-				}
-			}
-		}
-
-		Menu {
-			title: "GLOBAL SHORTCUTS"
-			visible: false
-			MenuItem {
-				visible: false
-				shortcut: "Ctrl+l"
-				onTriggered: {
-					url.focus = true
-				}
-			}
-		}
-	}
-
-	statusBar: StatusBar {
-		//height: 32
-		id: statusBar
-		Label {
-			//y: 6
-			id: walletValueLabel
-
-			font.pixelSize: 10
-			styleColor: "#797979"
-		}
-
-		Label {
-			//y: 6
-			objectName: "miningLabel"
-			visible: true
-			font.pixelSize: 10
-			anchors.right: lastBlockLabel.left
-			anchors.rightMargin: 5
-		}
-
-		Label {
-			//y: 6
-			id: lastBlockLabel
-			objectName: "lastBlockLabel"
-			visible: true
-			text: ""
-			font.pixelSize: 10
-			anchors.right: peerGroup.left
-			anchors.rightMargin: 5
-		}
-
-		ProgressBar {
-			visible: false
-			id: downloadIndicator
-			value: 0
-			objectName: "downloadIndicator"
-			y: -4
-			x: statusBar.width / 2 - this.width / 2
-			width: 160
-		}
-
-		Label {
-			visible: false
-			objectName: "downloadLabel"
-			//y: 7
-			anchors.left: downloadIndicator.right
-			anchors.leftMargin: 5
-			font.pixelSize: 10
-			text: "0 / 0"
-		}
-
-
-		RowLayout {
-			id: peerGroup
-			//y: 7
-			anchors.right: parent.right
-			MouseArea {
-				onDoubleClicked:  peerWindow.visible = true
-				anchors.fill: parent
-			}
-
-			Label {
-				id: peerLabel
-				font.pixelSize: 10
-				text: "0 / 0"
-			}
-		}
-	}
-
-
-	property var blockModel: ListModel {
-		id: blockModel
-	}
-
-	SplitView {
-		property var views: [];
-
-		id: mainSplit
-		anchors.fill: parent
-		resizing: false
-
-		function setView(view, menu) {
-			for(var i = 0; i < views.length; i++) {
-				views[i].view.visible = false
-				views[i].menuItem.setSelection(false)
-			}
-			view.visible = true
-			menu.setSelection(true)
-		}
-
-		function addComponent(view, options) {
-			view.visible = false
-			view.anchors.fill = mainView
-
-			var menuItem = menu.createMenuItem(view, options);
-			if( view.hasOwnProperty("menuItem") ) {
-				view.menuItem = menuItem;
-			}
-
-			if( view.hasOwnProperty("onReady") ) {
-				view.onReady.call(view)
-			}
-
-			if( options.active ) {
-				setView(view, menuItem)
-			}
-
-
-			return {view: view, menuItem: menuItem}
-		}
-
-		/*********************
-		 * Main menu.
-		 ********************/
-		 Rectangle {
-			 id: menu
-			 Layout.minimumWidth: 210
-			 Layout.maximumWidth: 210
-			 anchors.top: parent.top
-			 color: "#ececec"
-
-			 Component {
-				 id: menuItemTemplate
-				 Rectangle {
-					 id: menuItem
-					 property var view;
-					 property var path;
-					 property var closable;
-
-					 property alias title: label.text
-					 property alias icon: icon.source
-					 property alias secondaryTitle: secondary.text
-					 function setSelection(on) {
-						 sel.visible = on
-					 }
-
-					 width: 206
-					 height: 28
-					 color: "#00000000"
-
-					 anchors {
-						 left: parent.left
-						 leftMargin: 4
-					 }
-
-					 Rectangle {
-						 id: sel
-						 visible: false
-						 anchors.fill: parent
-						 color: "#00000000"
-						 Rectangle {
-							 id: r
-							 anchors.fill: parent
-							 border.color: "#CCCCCC"
-							 border.width: 1
-							 radius: 5
-							 color: "#FFFFFFFF"
-						 }
-						 Rectangle {
-							 anchors {
-								 top: r.top
-								 bottom: r.bottom
-								 right: r.right
-							 }
-							 width: 10
-							 color: "#FFFFFFFF"
-
-							 Rectangle {
-								 anchors {
-									 left: parent.left
-									 right: parent.right
-									 top: parent.top
-								 }
-								 height: 1
-								 color: "#CCCCCC"
-							 }
-
-							 Rectangle {
-								 anchors {
-									 left: parent.left
-									 right: parent.right
-									 bottom: parent.bottom
-								 }
-								 height: 1
-								 color: "#CCCCCC"
-							 }
-						 }
-					 }
-
-					 MouseArea {
-						 anchors.fill: parent
-						 onClicked: {
-							 activeView(view, menuItem);
-						 }
-					 }
-
-					 Image {
-						 id: icon
-						 height: 20
-						 width: 20
-						 anchors {
-							 left: parent.left
-							 verticalCenter: parent.verticalCenter
-							 leftMargin: 3
-						 }
-						 MouseArea {
-							 anchors.fill: parent
-							 onClicked: {
-								 menuItem.closeApp()
-							 }
-						 }
-					 }
-
-					 Text {
-						 id: label
-						 anchors {
-							 left: icon.right
-							 verticalCenter: parent.verticalCenter
-							 leftMargin: 3
-						 }
-
-						 color: "#0D0A01"
-						 font.pixelSize: 12
-					 }
-
-					 Text {
-						 id: secondary
-						 anchors {
-							 right: parent.right
-							 rightMargin: 8
-							 verticalCenter: parent.verticalCenter
-						 }
-						 color: "#AEADBE"
-						 font.pixelSize: 12
-					 }
-
-
-					 function closeApp() {
-						 if(!this.closable) { return; }
-
-						 if(this.view.hasOwnProperty("onDestroy")) {
-							 this.view.onDestroy.call(this.view)
-						 }
-
-						 this.view.destroy()
-						 this.destroy()
-						 for (var i = 0; i < mainSplit.views.length; i++) {
-							 var view = mainSplit.views[i];
-							 if (view.menuItem === this) {
-								 mainSplit.views.splice(i, 1);
-								 break;
-							 }
-						 }
-						 gui.removePlugin(this.path)
-						 activeView(mainSplit.views[0].view, mainSplit.views[0].menuItem);
-					 }
-				 }
-			 }
-
-			 function createMenuItem(view, options) {
-				 if(options === undefined) {
-					 options = {};
-				 }
-
-				 var section;
-				 switch(options.section) {
-					 case "ethereum":
-					 section = menuDefault;
-					 break;
-					 case "legacy":
-					 section = menuLegacy;
-					 break;
-					 default:
-					 section = menuApps;
-					 break;
-				 }
-
-				 var comp = menuItemTemplate.createObject(section)
-				 comp.view = view
-				 comp.title = view.title
-
-				 if(view.hasOwnProperty("iconSource")) {
-					 comp.icon = view.iconSource;
-				 }
-				 comp.closable = options.close;
-
-				 return comp
-			 }
-
-			 ColumnLayout {
-				 id: menuColumn
-				 y: 10
-				 width: parent.width
-				 anchors.left: parent.left
-				 anchors.right: parent.right
-				 spacing: 3
-
-				 Text {
-					 text: "ETHEREUM"
-					 font.bold: true
-					 anchors {
-						 left: parent.left
-						 leftMargin: 5
-					 }
-					 color: "#888888"
-				 }
-
-				 ColumnLayout {
-					 id: menuDefault
-					 spacing: 3
-					 anchors {
-						 left: parent.left
-						 right: parent.right
-					 }
-				 }
-
-
-				 Text {
-					 text: "NET"
-					 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
-						 leftMargin: 5
-					 }
-					 color: "#888888"
-				 }
-
-				 ColumnLayout {
-					 id: menuLegacy
-					 spacing: 3
-					 anchors {
-						 left: parent.left
-						 right: parent.right
-					 }
-				 }
-			 }
-		 }
-
-		 /*********************
-		  * Main view
-		  ********************/
-		  Rectangle {
-			  id: rootView
-			  anchors.right: parent.right
-			  anchors.left: menu.right
-			  anchors.bottom: parent.bottom
-			  anchors.top: parent.top
-			  color: "#00000000"
-
-			  Rectangle {
-				  id: urlPane
-				  height: 40
-				  color: "#00000000"
-				  anchors {
-					  left: parent.left
-					  right: parent.right
-					  leftMargin: 5
-					  rightMargin: 5
-					  top: parent.top
-					  topMargin: 5
-				  }
-				  TextField {
-					  id: url
-					  objectName: "url"
-					  placeholderText: "DApp URL"
-					  anchors {
-						  left: parent.left
-						  right: parent.right
-						  top: parent.top
-						  topMargin: 5
-						  rightMargin: 5
-						  leftMargin: 5
-					  }
-
-					  Keys.onReturnPressed: {
-						  if(/^https?/.test(this.text)) {
-							  newBrowserTab(this.text);
-						  } else {
-							  addPlugin(this.text, {close: true, section: "apps"})
-						  }
-					  }
-				  }
-
-			  }
-
-			  // Border
-			  Rectangle {
-				  id: divider
-				  anchors {
-					  left: parent.left
-					  right: parent.right
-					  top: urlPane.bottom
-				  }
-				  z: -1
-				  height: 1
-				  color: "#CCCCCC"
-			  }
-
-			  Rectangle {
-				  id: mainView
-				  color: "#00000000"
-				  anchors.right: parent.right
-				  anchors.left: parent.left
-				  anchors.bottom: parent.bottom
-				  anchors.top: divider.bottom
-
-				  function createView(component) {
-					  var view = component.createObject(mainView)
-
-					  return view;
-				  }
-			  }
-		  }
-	  }
-
-
-	  /******************
-	   * Dialogs
-	   *****************/
-	   FileDialog {
-		   id: generalFileDialog
-		   property var callback;
-		   onAccepted: {
-			   var path = this.fileUrl.toString();
-			   callback.call(this, path);
-		   }
-
-		   function show(selectExisting, callback) {
-			   generalFileDialog.callback = callback;
-			   generalFileDialog.selectExisting = selectExisting;
-
-			   this.open();
-		   }
-	   }
-
-
-	   /******************
-	    * Wallet functions
-	    *****************/
-	    function importApp(path) {
-		    var ext = path.split('.').pop()
-		    if(ext == "html" || ext == "htm") {
-			    eth.openHtml(path)
-		    }else if(ext == "qml"){
-			    addPlugin(path, {close: true, section: "apps"})
-		    }
-	    }
-
-
-	    function setWalletValue(value) {
-		    walletValueLabel.text = value
-	    }
-
-	    function loadPlugin(name) {
-		    console.log("Loading plugin" + name)
-		    var view = mainView.addPlugin(name)
-	    }
-
-	    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, caps: peer.caps})
-	    }
-
-	    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
-		     //flags: Qt.CustomizeWindowHint | Qt.Tool | Qt.WindowCloseButtonHint
-		     height: 200
-		     width: 700
-		     Rectangle {
-			     anchors.fill: parent
-			     property var peerModel: ListModel {
-				     id: peerModel
-			     }
-			     TableView {
-				     anchors.fill: parent
-				     id: peerTable
-				     model: peerModel
-				     TableViewColumn{width: 200; role: "ip" ; title: "IP" }
-				     TableViewColumn{width: 260; role: "version" ; title: "Version" }
-				     TableViewColumn{width: 180;  role: "caps" ; title: "Capabilities" }
-			     }
-		     }
-	     }
-
-	     Window {
-		     id: aboutWin
-		     visible: false
-		     title: "About"
-		     minimumWidth: 350
-		     maximumWidth: 350
-		     maximumHeight: 280
-		     minimumHeight: 280
-
-		     Image {
-			     id: aboutIcon
-			     height: 150
-			     width: 150
-			     fillMode: Image.PreserveAspectFit
-			     smooth: true
-			     source: "../facet.png"
-			     x: 10
-			     y: 30
-		     }
-
-		     Text {
-			     anchors.left: aboutIcon.right
-			     anchors.leftMargin: 10
-			     anchors.top: parent.top
-			     anchors.topMargin: 30
-			     font.pointSize: 12
-			     text: "<h2>Mist (0.7.10)</h2><br><h3>Development</h3>Jeffrey Wilcke<br>Viktor Trón<br>Felix Lange<br>Taylor Gerring<br>Daniel Nagy<br><h3>UX</h3>Alex van de Sande<br>"
-		     }
-	     }
-
-	     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 {
-		     id: addPeerWin
-		     visible: false
-		     minimumWidth: 300
-		     maximumWidth: 300
-		     maximumHeight: 50
-		     minimumHeight: 50
-		     title: "Connect to peer"
-
-		     ComboBox {
-			     id: addrField
-			     anchors.verticalCenter: parent.verticalCenter
-			     anchors.left: parent.left
-			     anchors.right: addPeerButton.left
-			     anchors.leftMargin: 10
-			     anchors.rightMargin: 10
-			     onAccepted: {
-				     eth.connectToPeer(addrField.currentText)
-				     addPeerWin.visible = false
-			     }
-
-			     editable: true
-			     model: ListModel { id: pastPeers }
-
-			     Component.onCompleted: {
-				     pastPeers.insert(0, {text: "poc-8.ethdev.com:30303"})
-				     /*
-				      var ips = eth.pastPeers()
-				      for(var i = 0; i < ips.length; i++) {
-					      pastPeers.append({text: ips.get(i)})
-				      }
-
-				      pastPeers.insert(0, {text: "poc-7.ethdev.com:30303"})
-				      */
-			     }
-		     }
-
-		     Button {
-			     id: addPeerButton
-			     anchors.right: parent.right
-			     anchors.verticalCenter: parent.verticalCenter
-			     anchors.rightMargin: 10
-			     text: "Add"
-			     onClicked: {
-				     eth.connectToPeer(addrField.currentText)
-				     addPeerWin.visible = false
-			     }
-		     }
-		     Component.onCompleted: {
-			     addrField.focus = true
-		     }
-	     }
-     }
+    id: root
+    
+    //flags: Qt.FramelessWindowHint
+    // Use this to make the window frameless. But then you'll need to do move and resize by hand
+
+    property var ethx : Eth.ethx
+
+    width: 1200
+    height: 820
+    minimumHeight: 600
+    minimumWidth: 800
+
+    title: "Mist"
+
+    TextField {
+        id: copyElementHax
+        visible: false
+    }
+
+    function copyToClipboard(text) {
+        copyElementHax.text = text
+        copyElementHax.selectAll()
+        copyElementHax.copy()
+    }
+
+    // Takes care of loading all default plugins
+    Component.onCompleted: {
+
+        addPlugin("./views/catalog.qml", {noAdd: true, close: false, section: "begin"});
+        var wallet = addPlugin("./views/wallet.qml", {noAdd: true, close: false, section: "ethereum", active: true});
+
+        addPlugin("./views/miner.qml", {noAdd: true, close: false, section: "ethereum", active: true});
+        addPlugin("./views/transaction.qml", {noAdd: true, close: false, section: "legacy"});
+        addPlugin("./views/whisper.qml", {noAdd: true, close: false, section: "legacy"});
+        addPlugin("./views/chain.qml", {noAdd: true, close: false, section: "legacy"});
+        addPlugin("./views/pending_tx.qml", {noAdd: true, close: false, section: "legacy"});
+        addPlugin("./views/info.qml", {noAdd: true, close: false, section: "legacy"});
+
+        mainSplit.setView(wallet.view, wallet.menuItem);
+
+        newBrowserTab("http://ethereum-dapp-whisper-client.meteor.com/chat/amsteam");
+
+        // Command setup
+        gui.sendCommand(0)
+    }
+
+    function activeView(view, menuItem) {
+        mainSplit.setView(view, menuItem)
+        if (view.hideUrl) {
+            urlPane.visible = false;
+            mainView.anchors.top = rootView.top
+        } else {
+            urlPane.visible = true;
+            mainView.anchors.top = divider.bottom
+        }
+    }
+
+    function addViews(view, path, options) {
+        var views = mainSplit.addComponent(view, options)
+        views.menuItem.path = path
+
+        mainSplit.views.push(views);
+
+        if(!options.noAdd) {
+            gui.addPlugin(path)
+        }
+
+        return views
+    }
+
+    function addPlugin(path, options) {
+        try {
+            if(typeof(path) === "string" && /^https?/.test(path)) {
+                console.log('load http')
+                Http.request(path, function(o) {
+                    if(o.status === 200) {
+                        var view = Qt.createQmlObject(o.responseText, mainView, path)
+                        addViews(view, path, options)
+                    }
+                })
+
+                return
+            }
+
+            var component = Qt.createComponent(path);
+            if(component.status != Component.Ready) {
+                if(component.status == Component.Error) {
+                    ethx.note("error: ", component.errorString());
+                }
+
+                return
+            }
+
+            var view = mainView.createView(component, options)
+            var views = addViews(view, path, options)
+
+            return views
+        } catch(e) {
+            console.log(e)
+        }
+    }
+
+    function newBrowserTab(url) {
+        var window = addPlugin("./views/browser.qml", {noAdd: true, close: true, section: "apps", active: true});
+        window.view.url = url;
+        window.menuItem.title = "Mist";
+        activeView(window.view, window.menuItem);
+    }
+
+
+
+    menuBar: MenuBar {
+        Menu {
+            title: "File"
+            MenuItem {
+                text: "Import App"
+                shortcut: "Ctrl+o"
+                onTriggered: {
+                    generalFileDialog.show(true, importApp)
+                }
+            }
+
+            MenuItem {
+                text: "Add plugin"
+                onTriggered: {
+                    generalFileDialog.show(true, function(path) {
+                        addPlugin(path, {close: true, section: "apps"})
+                    })
+                }
+            }
+
+            MenuItem {
+                text: "New tab"
+                shortcut: "Ctrl+t"
+                onTriggered: {
+                    newBrowserTab("http://etherian.io");
+                }
+            }
+
+            MenuSeparator {}
+
+            MenuItem {
+                text: "Import key"
+                shortcut: "Ctrl+i"
+                onTriggered: {
+                    generalFileDialog.show(true, function(path) {
+                        gui.importKey(path)
+                    })
+                }
+            }
+
+            MenuItem {
+                text: "Export keys"
+                shortcut: "Ctrl+e"
+                onTriggered: {
+                    generalFileDialog.show(false, function(path) {
+                    })
+                }
+            }
+
+        }
+
+        Menu {
+            title: "Developer"
+            MenuItem {
+                iconSource: "../icecream.png"
+                text: "Debugger"
+                shortcut: "Ctrl+d"
+                onTriggered: eth.startDebugger()
+            }
+
+            MenuItem {
+                text: "Import Tx"
+                onTriggered: {
+                    txImportDialog.visible = true
+                }
+            }
+
+            MenuItem {
+                text: "Run JS file"
+                onTriggered: {
+                    generalFileDialog.show(true, function(path) {
+                        eth.evalJavascriptFile(path)
+                    })
+                }
+            }
+
+            MenuItem {
+                text: "Dump state"
+                onTriggered: {
+                    generalFileDialog.show(false, function(path) {
+                        // Empty hash for latest
+                        gui.dumpState("", path)
+                    })
+                }
+            }
+
+            MenuSeparator {}
+        }
+
+        Menu {
+            title: "Network"
+            MenuItem {
+                text: "Add Peer"
+                shortcut: "Ctrl+p"
+                onTriggered: {
+                    addPeerWin.visible = true
+                }
+            }
+            MenuItem {
+                text: "Show Peers"
+                shortcut: "Ctrl+e"
+                onTriggered: {
+                    peerWindow.visible = true
+                }
+            }
+        }
+
+        Menu {
+            title: "Help"
+            MenuItem {
+                text: "About"
+                onTriggered: {
+                    aboutWin.visible = true
+                }
+            }
+        }
+
+        Menu {
+            title: "GLOBAL SHORTCUTS"
+            visible: false
+            MenuItem {
+                visible: false
+                shortcut: "Ctrl+l"
+                onTriggered: {
+                    url.focus = true
+                }
+            }
+        }
+    }
+
+    statusBar: StatusBar {
+        //height: 32
+        visible: false
+
+        id: statusBar
+        Label {
+            //y: 6
+            id: walletValueLabel
+
+            font.pixelSize: 10
+            styleColor: "#797979"
+        }
+
+        Label {
+            //y: 6
+            objectName: "miningLabel"
+            visible: true
+            font.pixelSize: 10
+            anchors.right: lastBlockLabel.left
+            anchors.rightMargin: 5
+        }
+
+        Label {
+            id: lastBlockLabel
+            objectName: "lastBlockLabel"
+            visible: true
+            text: "---"
+            font.pixelSize: 10
+            anchors.right: peerGroup.left
+            anchors.rightMargin: 5
+        }
+
+        ProgressBar {
+            visible: false
+            id: downloadIndicator
+            value: 0
+            objectName: "downloadIndicator"
+            y: -4
+            x: statusBar.width / 2 - this.width / 2
+            width: 160
+        }
+
+        Label {
+            visible: false
+            objectName: "downloadLabel"
+            //y: 7
+            anchors.left: downloadIndicator.right
+            anchors.leftMargin: 5
+            font.pixelSize: 10
+            text: "0 / 0"
+        }
+
+
+        RowLayout {
+            id: peerGroup
+            //y: 7
+            anchors.right: parent.right
+            MouseArea {
+                onDoubleClicked:  peerWindow.visible = true
+                anchors.fill: parent
+            }
+
+            Label {
+                id: peerLabel
+                font.pixelSize: 10
+                text: "0 / 0"
+            }
+        }
+    }
+
+
+    property var blockModel: ListModel {
+        id: blockModel
+    }
+
+    SplitView {
+        property var views: [];
+
+        id: mainSplit
+        anchors.fill: parent
+        resizing: false
+        handleDelegate: Item {
+            Rectangle {
+                anchors.fill: parent
+            }
+         }
+
+        function setView(view, menu) {
+            for(var i = 0; i < views.length; i++) {
+                views[i].view.visible = false
+                views[i].menuItem.setSelection(false)
+            }
+            view.visible = true
+            menu.setSelection(true)
+        }
+
+        function addComponent(view, options) {
+            view.visible = false
+            view.anchors.fill = mainView
+
+            var menuItem = menu.createMenuItem(view, options);
+            if( view.hasOwnProperty("menuItem") ) {
+                view.menuItem = menuItem;
+            }
+
+            if( view.hasOwnProperty("onReady") ) {
+                view.onReady.call(view)
+            }
+
+            if( options.active ) {
+                setView(view, menuItem)
+            }
+
+
+            return {view: view, menuItem: menuItem}
+        }
+
+        /*********************
+         * Main menu.
+         ********************/
+         Rectangle {
+             id: menu
+             Layout.minimumWidth: 192
+             Layout.maximumWidth: 192
+
+            FontLoader { 
+               id: sourceSansPro
+               source: "fonts/SourceSansPro-Regular.ttf" 
+            }
+            FontLoader { 
+               source: "fonts/SourceSansPro-Semibold.ttf" 
+            }            
+            FontLoader { 
+               source: "fonts/SourceSansPro-Bold.ttf" 
+            } 
+            FontLoader { 
+               source: "fonts/SourceSansPro-Black.ttf" 
+            }            
+            FontLoader { 
+               source: "fonts/SourceSansPro-Light.ttf" 
+            }              
+            FontLoader { 
+               source: "fonts/SourceSansPro-ExtraLight.ttf" 
+            }  
+            FontLoader { 
+               id: simpleLineIcons
+               source: "fonts/Simple-Line-Icons.ttf" 
+            }
+
+            Rectangle {
+                color: "steelblue"
+                anchors.fill: parent
+
+                MouseArea {
+                    anchors.fill: parent
+                    property real lastMouseX: 0
+                    property real lastMouseY: 0
+                    onPressed: {
+                        lastMouseX = mouseX
+                        lastMouseY = mouseY
+                    }
+                    onPositionChanged: {
+                        root.x += (mouseX - lastMouseX)
+                        root.y += (mouseY - lastMouseY)
+                    }
+                    /*onDoubleClicked: {
+                        //!maximized ? view.set_max() : view.set_normal()}
+                        visibility = "Minimized"
+                    }*/
+                }
+            }
+
+
+
+             anchors.top: parent.top
+             Rectangle {
+                     width: parent.height
+                     height: parent.width
+                     anchors.centerIn: parent
+                     rotation: 90
+
+                     gradient: Gradient {
+                         GradientStop { position: 0.0; color: "#E2DEDE" }
+                         GradientStop { position: 0.1; color: "#EBE8E8" }
+                         GradientStop { position: 1.0; color: "#EBE8E8" }
+                     }
+             }
+
+             Component {
+                 id: menuItemTemplate
+                 Rectangle {
+                     id: menuItem
+                     property var view;
+                     property var path;
+                     property var closable;
+
+                     property alias title: label.text
+                     property alias icon: icon.source
+                     property alias secondaryTitle: secondary.text
+                     function setSelection(on) {
+                         sel.visible = on
+                         
+                         if (this.closable == true) {
+                                closeIcon.visible = on
+                         }
+                     }
+
+                     function setAsBigButton(on) {
+                        newAppButton.visible = on
+                        label.visible = !on
+                        buttonLabel.visible = on
+                     }
+
+                     width: 192
+                     height: 55
+                     color: "#00000000"
+
+                     anchors {
+                         left: parent.left
+                         leftMargin: 4
+                     }
+
+                     Rectangle {
+                         // New App Button
+                         id: newAppButton
+                         visible: false 
+                         anchors.fill: parent
+                         anchors.rightMargin: 8
+                         border.width: 0
+                         radius: 5
+                         height: 55
+                         width: 180
+                         color: "#F3F1F3"
+                     }
+
+                     Rectangle {
+                         id: sel
+                         visible: false
+                         anchors.fill: parent
+                         color: "#00000000"
+                         Rectangle {
+                             id: r
+                             anchors.fill: parent
+                             border.width: 0
+                             radius: 5
+                             color: "#FFFFFFFF"
+                         }
+                         Rectangle {
+                             anchors {
+                                 top: r.top
+                                 bottom: r.bottom
+                                 right: r.right
+                             }
+                             width: 10
+                             color: "#FFFFFFFF"
+                             border.width:0
+
+                             Rectangle {
+                                // Small line on top of selection. What's this for?
+                                 anchors {
+                                     left: parent.left
+                                     right: parent.right
+                                     top: parent.top
+                                 }
+                                 height: 1
+                                 color: "#FFFFFF"
+                             }
+
+                             Rectangle {
+                                // Small line on bottom of selection. What's this for again?
+                                 anchors {
+                                     left: parent.left
+                                     right: parent.right
+                                     bottom: parent.bottom
+                                 }
+                                 height: 1
+                                 color: "#FFFFFF"
+                             }
+                         }
+                     }
+
+                     MouseArea {
+                         anchors.fill: parent
+                         hoverEnabled: true
+                         onClicked: {
+                             activeView(view, menuItem);
+                         }
+                         onEntered: {
+                            if (parent.closable == true) {
+                                closeIcon.visible = sel.visible
+                            }
+                            
+                         }
+                         onExited:  {
+                            closeIcon.visible = false
+                         }
+                     }
+
+                     Image {
+                         id: icon
+                         height: 24
+                         width: 24
+                         anchors {
+                             left: parent.left
+                             verticalCenter: parent.verticalCenter
+                             leftMargin: 6
+                         }
+                     }
+
+                     Text {
+                        id: buttonLabel
+                        visible: false
+                        text: "GO TO NEW APP"
+                        font.family: sourceSansPro.name 
+                        font.weight: Font.DemiBold
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        anchors.verticalCenter: parent.verticalCenter
+                        color: "#AAA0A0"
+                     }   
+
+                    Text {
+                         id: label
+                         font.family: sourceSansPro.name 
+                         font.weight: Font.DemiBold
+                         anchors {
+                             left: icon.right
+                             verticalCenter: parent.verticalCenter
+                             leftMargin: 6
+                             // verticalCenterOffset: -10
+                         }
+                         x:250
+                         color: "#665F5F"
+                         font.pixelSize: 14
+                     }
+
+
+                     Text {
+                         id: secondary
+                         font.family: sourceSansPro.name 
+                         font.weight: Font.Light
+                         anchors {
+                             left: icon.right
+                             leftMargin: 6
+                             top: label.bottom
+                         }
+                         color: "#6691C2"
+                         font.pixelSize: 12
+                     }
+
+                     Rectangle {
+                        id: closeIcon
+                        visible: false
+                        width: 10
+                        height: 10
+                        color: "#FFFFFF"
+                        anchors {
+                            fill: icon
+                        }
+
+                        MouseArea {
+                             anchors.fill: parent
+                             onClicked: {
+                                 menuItem.closeApp()
+                             }
+                         }
+
+                        Text {
+                             
+                             font.family: simpleLineIcons.name 
+                             anchors {
+                                 centerIn: parent
+                             }
+                             color: "#665F5F"
+                             font.pixelSize: 18
+                             text: "\ue082"
+                         }
+                     }
+                     
+
+
+                     function closeApp() {
+                         if(!this.closable) { return; }
+
+                         if(this.view.hasOwnProperty("onDestroy")) {
+                             this.view.onDestroy.call(this.view)
+                         }
+
+                         this.view.destroy()
+                         this.destroy()
+                         for (var i = 0; i < mainSplit.views.length; i++) {
+                             var view = mainSplit.views[i];
+                             if (view.menuItem === this) {
+                                 mainSplit.views.splice(i, 1);
+                                 break;
+                             }
+                         }
+                         gui.removePlugin(this.path)
+                         activeView(mainSplit.views[0].view, mainSplit.views[0].menuItem);
+                     }
+                 }
+             }
+
+             function createMenuItem(view, options) {
+                 if(options === undefined) {
+                     options = {};
+                 }
+
+                 var section;
+                 switch(options.section) {
+                     case "begin":
+                     section = menuBegin
+                     break;
+                     case "ethereum":
+                     section = menuDefault;
+                     break;
+                     case "legacy":
+                     section = menuLegacy;
+                     break;
+                     default:
+                     section = menuApps;
+                     break;
+                 }
+
+                 var comp = menuItemTemplate.createObject(section)
+                 comp.view = view
+                 comp.title = view.title
+
+                 if(view.hasOwnProperty("iconSource")) {
+                     comp.icon = view.iconSource;
+                 }
+                 comp.closable = options.close;
+
+                 if (options.section === "begin") {
+                    comp.setAsBigButton(true)
+                 }
+
+                 return comp
+             }
+
+             ColumnLayout {
+                 id: menuColumn
+                 y: 10
+                 width: parent.width
+                 anchors.left: parent.left
+                 anchors.right: parent.right
+                 spacing: 3
+                
+
+
+                ColumnLayout {
+                     id: menuBegin
+                     spacing: 3
+                     anchors {
+                         left: parent.left
+                         right: parent.right
+                     }
+                 }
+
+                 Rectangle {
+                     height: 55
+                     color: "transparent"
+                     Text {
+                         text: "ETHEREUM"
+                         font.family: sourceSansPro.name 
+                         font.weight: Font.DemiBold
+                         anchors {
+                             left: parent.left
+                             top: parent.verticalCenter
+                             leftMargin: 16
+                         }
+                         color: "#AAA0A0"
+                     }
+                 }
+
+
+                 ColumnLayout {
+                     id: menuDefault
+                     spacing: 3
+                     anchors {
+                         left: parent.left
+                         right: parent.right
+                     }
+                 }
+
+                 Rectangle {
+                     height: 55
+                     color: "transparent"
+                     Text {
+                         text: "APPS"
+                         font.family: sourceSansPro.name 
+                         font.weight: Font.DemiBold
+                         anchors {
+                             left: parent.left
+                             top: parent.verticalCenter
+                             leftMargin: 16
+                         }
+                         color: "#AAA0A0"
+                     }
+                 }
+
+                 ColumnLayout {
+                     id: menuApps
+                     spacing: 3
+                     anchors {
+                         left: parent.left
+                         right: parent.right
+                     }
+                 }
+
+                 Rectangle {
+                     height: 55
+                     color: "transparent"
+                     Text {
+                         text: "DEBUG"
+                         font.family: sourceSansPro.name 
+                         font.weight: Font.DemiBold
+                         anchors {
+                             left: parent.left
+                             top: parent.verticalCenter
+                             leftMargin: 16
+                         }
+                         color: "#AAA0A0"
+                     }
+                 }
+
+
+                 ColumnLayout {
+                     id: menuLegacy
+                     spacing: 3
+                     anchors {
+                         left: parent.left
+                         right: parent.right
+                     }
+                 }
+             }
+         }
+
+         /*********************
+          * Main view
+          ********************/
+          Rectangle {
+              id: rootView
+              anchors.right: parent.right
+              anchors.left: menu.right
+              anchors.bottom: parent.bottom
+              anchors.top: parent.top
+              color: "#00000000"             
+
+              Rectangle {
+                  id: urlPane
+                  height: 40
+                  color: "#00000000"
+                  anchors {
+                      left: parent.left
+                      right: parent.right
+                      leftMargin: 5
+                      rightMargin: 5
+                      top: parent.top
+                      topMargin: 5
+                  }
+                  TextField {
+                      id: url
+                      objectName: "url"
+                      placeholderText: "DApp URL"
+                      anchors {
+                          left: parent.left
+                          right: parent.right
+                          top: parent.top
+                          topMargin: 5
+                          rightMargin: 5
+                          leftMargin: 5
+                      }
+
+                      Keys.onReturnPressed: {
+                          if(/^https?/.test(this.text)) {
+                              newBrowserTab(this.text);
+                          } else {
+                              addPlugin(this.text, {close: true, section: "apps"})
+                          }
+                      }
+                  }
+
+              }
+
+              // Border
+              Rectangle {
+                  id: divider
+                  anchors {
+                      left: parent.left
+                      right: parent.right
+                      top: urlPane.bottom
+                  }
+                  z: -1
+                  height: 1
+                  color: "#CCCCCC"
+              }
+
+              Rectangle {
+                  id: mainView
+                  color: "#00000000"
+                  anchors.right: parent.right
+                  anchors.left: parent.left
+                  anchors.bottom: parent.bottom
+                  anchors.top: divider.bottom
+
+                  function createView(component) {
+                      var view = component.createObject(mainView)
+
+                      return view;
+                  }
+              }
+          }
+      }
+
+
+      /******************
+       * Dialogs
+       *****************/
+       FileDialog {
+           id: generalFileDialog
+           property var callback;
+           onAccepted: {
+               var path = this.fileUrl.toString();
+               callback.call(this, path);
+           }
+
+           function show(selectExisting, callback) {
+               generalFileDialog.callback = callback;
+               generalFileDialog.selectExisting = selectExisting;
+
+               this.open();
+           }
+       }
+
+
+       /******************
+        * Wallet functions
+        *****************/
+        function importApp(path) {
+            var ext = path.split('.').pop()
+            if(ext == "html" || ext == "htm") {
+                eth.openHtml(path)
+            }else if(ext == "qml"){
+                addPlugin(path, {close: true, section: "apps"})
+            }
+        }
+
+
+        function setWalletValue(value) {
+            walletValueLabel.text = value
+        }
+
+        function loadPlugin(name) {
+            console.log("Loading plugin" + name)
+            var view = mainView.addPlugin(name)
+        }
+
+        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, caps: peer.caps})
+        }
+
+        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
+             //flags: Qt.CustomizeWindowHint | Qt.Tool | Qt.WindowCloseButtonHint
+             height: 200
+             width: 700
+             Rectangle {
+                 anchors.fill: parent
+                 property var peerModel: ListModel {
+                     id: peerModel
+                 }
+                 TableView {
+                     anchors.fill: parent
+                     id: peerTable
+                     model: peerModel
+                     TableViewColumn{width: 200; role: "ip" ; title: "IP" }
+                     TableViewColumn{width: 260; role: "version" ; title: "Version" }
+                     TableViewColumn{width: 180;  role: "caps" ; title: "Capabilities" }
+                 }
+             }
+         }
+
+         Window {
+             id: aboutWin
+             visible: false
+             title: "About"
+             minimumWidth: 350
+             maximumWidth: 350
+             maximumHeight: 280
+             minimumHeight: 280
+
+             Image {
+                 id: aboutIcon
+                 height: 150
+                 width: 150
+                 fillMode: Image.PreserveAspectFit
+                 smooth: true
+                 source: "../facet.png"
+                 x: 10
+                 y: 30
+             }
+
+             Text {
+                 anchors.left: aboutIcon.right
+                 anchors.leftMargin: 10
+                 anchors.top: parent.top
+                 anchors.topMargin: 30
+                 font.pointSize: 12
+                 text: "<h2>Mist (0.7.10)</h2><br><h3>Development</h3>Jeffrey Wilcke<br>Viktor Trón<br>Felix Lange<br>Taylor Gerring<br>Daniel Nagy<br><h3>UX</h3>Alex van de Sande<br>"
+             }
+         }
+
+         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 {
+             id: addPeerWin
+             visible: false
+             minimumWidth: 300
+             maximumWidth: 300
+             maximumHeight: 50
+             minimumHeight: 50
+             title: "Connect to peer"
+
+             ComboBox {
+                 id: addrField
+                 anchors.verticalCenter: parent.verticalCenter
+                 anchors.left: parent.left
+                 anchors.right: addPeerButton.left
+                 anchors.leftMargin: 10
+                 anchors.rightMargin: 10
+                 onAccepted: {
+                     eth.connectToPeer(addrField.currentText)
+                     addPeerWin.visible = false
+                 }
+
+                 editable: true
+                 model: ListModel { id: pastPeers }
+
+                 Component.onCompleted: {
+                     pastPeers.insert(0, {text: "poc-8.ethdev.com:30303"})
+                     /*
+                      var ips = eth.pastPeers()
+                      for(var i = 0; i < ips.length; i++) {
+                          pastPeers.append({text: ips.get(i)})
+                      }
+
+                      pastPeers.insert(0, {text: "poc-7.ethdev.com:30303"})
+                      */
+                 }
+             }
+
+             Button {
+                 id: addPeerButton
+                 anchors.right: parent.right
+                 anchors.verticalCenter: parent.verticalCenter
+                 anchors.rightMargin: 10
+                 text: "Add"
+                 onClicked: {
+                     eth.connectToPeer(addrField.currentText)
+                     addPeerWin.visible = false
+                 }
+             }
+             Component.onCompleted: {
+                 addrField.focus = true
+             }
+         }
+     }
\ No newline at end of file
diff --git a/cmd/mist/assets/qml/views/browser.qml b/cmd/mist/assets/qml/views/browser.qml
index 277a5b7eb..db89c6837 100644
--- a/cmd/mist/assets/qml/views/browser.qml
+++ b/cmd/mist/assets/qml/views/browser.qml
@@ -56,12 +56,34 @@ Rectangle {
 
 			//uriNav.text = uri.text.replace(/(^https?\:\/\/(?:www\.)?)([a-zA-Z0-9_\-]*\.\w{2,3})(.*)/, "$1$2<span style='color:#CCC'>$3</span>");
 			uriNav.text = uri;
+
 		} else {
 			// Prevent inf loop.
 			window.cleanPath = false;
 		}
 	}
 
+	function showFullUrlBar(on){
+    	if (on) {
+			//appTitle.visible = false
+			//appDomain.visible = false
+			
+			//uriNav.visible = true
+			clickAnywhereOnApp.visible = true
+
+			navBar.state = "fullUrlVisible"
+    	} else {
+			//appTitle.visible = true
+			//appDomain.visible = true
+			//uriNav.visible = false
+			clickAnywhereOnApp.visible = false
+
+			navBar.state = "titleVisible"
+
+   		}
+
+    }
+
 	Component.onCompleted: {
 	}
 
@@ -71,75 +93,234 @@ Rectangle {
 		anchors.fill: parent
 		state: "inspectorShown"
 
+		MouseArea {
+			id: clickAnywhereOnApp
+			z:15
+			//hoverEnabled: true
+			anchors.fill: parent
+			/*hoverEnabled: true*/
+			
+			onClicked: {
+			  	showFullUrlBar(false);
+			}
+
+			/*Rectangle {
+			    anchors.fill: parent
+			    color: "#88888888"
+			}*/
+		}
+
 		RowLayout {
 			id: navBar
-			height: 40
+			height: 74
+			z: 20
 			anchors {
 				left: parent.left
 				right: parent.right
-				leftMargin: 7
 			}
 
 			Button {
 				id: back
+
 				onClicked: {
 					webview.goBack()
 				}
+
+				anchors{
+					left: parent.left
+					leftMargin: 6
+				}
+
 				style: ButtonStyle {
 					background: Image {
-						source: "../../back.png"
-						width: 30
+						source: "../../backButton.png"
+						width: 20
 						height: 30
 					}
 				}
 			}
 
-			TextField {
-				anchors {
+			Rectangle {
+				id: appInfoPane
+			    height: 28
+			    color: "#FFFFFF"
+			    radius: 6
+
+
+			   MouseArea {
+			    	anchors.fill: parent
+			    	z: 10
+			    	hoverEnabled: true
+			    	
+			    	onEntered: {
+			    	  	showFullUrlBar(true);
+			    	}	 
+			    	   	
+			    }
+
+			    anchors {
 					left: back.right
-					right: toggleInspector.left
+					right: parent.right
 					leftMargin: 10
 					rightMargin: 10
 				}
-				text: webview.url;
-				id: uriNav
-				y: parent.height / 2 - this.height / 2
 
-				Keys.onReturnPressed: {
-					webview.url = this.text;
-				}
+				Text {
+   					 id: appTitle
+                     text: "LOADING"
+                     font.bold: true
+                     font.capitalization: Font.AllUppercase 
+                     horizontalAlignment: Text.AlignRight
+                     verticalAlignment: Text.AlignVCenter
+                     
+                     anchors {
+                         left: parent.left
+                         right: parent.horizontalCenter
+                         top: parent.top
+                         bottom: parent.bottom
+                         rightMargin: 10
+                     }
+                     color: "#928484"
+                 }
+
+                 Text {
+                 	 id: appDomain
+                     text: "loading domain"
+                     font.bold: false
+                     horizontalAlignment: Text.AlignLeft
+                     verticalAlignment: Text.AlignVCenter
+                     
+                     anchors {
+                         left: parent.horizontalCenter
+                         right: parent.right
+                         top: parent.top
+                         bottom: parent.bottom
+                         leftMargin: 10
+                     }
+                     color: "#C0AFAF"
+                 }
+
+
+				TextField {
+				    id: uriNav
+				    opacity: 0.0
+
+				    anchors {
+				    	left: parent.left
+				    	right: parent.right
+				    	leftMargin: 16
+				    }
+
+				    horizontalAlignment: Text.AlignHCenter
+                    
+                    style: TextFieldStyle {
+                        textColor: "#928484"
+                        background: Rectangle {
+                            border.width: 0
+                            color: "transparent"
+                        }
+                    }
+    				text: webview.url;
+				    y: parent.height / 2 - this.height / 2
+				    z: 20
+				    activeFocusOnPress: true
+				    Keys.onReturnPressed: {
+				    	webview.url = this.text;
+				    }
+				   /* onFocusedChanged: {
+   					     if (focused) {
+   					         //uriNav.selectAll();
+   					     }
+   					}*/
+			    }
+   				
+			    z:2
 			}
+			
+			Rectangle {
+				id: appInfoPaneShadow
+			    width: 10
+			    height: 30
+			    color: "#BDB6B6"
+			    radius: 6
 
-			Button {
-				id: toggleInspector
-				anchors {
+			    anchors {
+					left: back.right
 					right: parent.right
+					leftMargin:10
+					rightMargin:10
+					top: parent.top 
+					topMargin: 23
 				}
-				iconSource: "../../bug.png"
-				onClicked: {
-					// XXX soon
-					return
-					if(inspector.visible == true){
-						inspector.visible = false
-					}else{
-						inspector.visible = true
-						inspector.url = webview.experimental.remoteInspectorUrl
-					}
-				}
-			}
-		}
 
-		// Border
-		Rectangle {
-			id: divider
-			anchors {
-				left: parent.left
-				right: parent.right
-				top: navBar.bottom
+				z:1
 			}
-			z: -1
-			height: 1
-			color: "#CCCCCC"
+
+			Rectangle {
+				id: navBarBackground
+                anchors.fill: parent
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: "#F6F1F2" }
+                    GradientStop { position: 1.0; color: "#DED5D5" }
+                }
+                z:-1
+            }
+
+            states: [
+            	State {
+            		name: "fullUrlVisible"
+            		PropertyChanges {
+                		target: appTitle
+                		anchors.rightMargin: -50
+                		opacity: 0.0
+            		}            		
+            		PropertyChanges {
+                		target: appDomain
+                		anchors.leftMargin: -50
+                		opacity: 0.0
+            		}
+            		PropertyChanges {
+                		target: uriNav
+                		anchors.leftMargin: 0
+                		opacity: 1.0
+            		}            		
+            	},           	
+            	State {
+            		name: "titleVisible"
+
+            		PropertyChanges {
+            			target: appTitle
+                		anchors.rightMargin: 10
+                		opacity: 1.0
+            		}
+            		PropertyChanges {
+            			target: appDomain
+                		anchors.leftMargin: 10
+                		opacity: 1.0
+            		}
+            		PropertyChanges {
+                		target: uriNav
+                		anchors.leftMargin: -50
+                		opacity: 0.0
+            		}              		
+            	}
+
+            ]
+
+			transitions: [
+      		  // This adds a transition that defaults to applying to all state changes
+
+     		   Transition {
+		
+     		       // This applies a default NumberAnimation to any changes a state change makes to x or y properties
+     		       NumberAnimation { 
+     		       		properties: "anchors.leftMargin, anchors.rightMargin, opacity" 
+     		       		easing.type: Easing.InOutQuad //Easing.InOutBack
+     		       		duration: 300
+     		       }
+     		   }
+    		]            
+
 		}
 
 		WebEngineView {
@@ -149,16 +330,44 @@ Rectangle {
 				left: parent.left
 				right: parent.right
 				bottom: parent.bottom
-				top: divider.bottom
+				top: navBar.bottom
 			}
-
+			z: 10
+			
 			onLoadingChanged: {
 				if (loadRequest.status == WebEngineView.LoadSucceededStatus) {
 					webview.runJavaScript("document.title", function(pageTitle) {
 						menuItem.title = pageTitle;	
 					});
+
+					//var topBarStyle
+					webView.runJavaScript("document.querySelector(\"meta[name='ethereum-dapp-url-bar-style']\").getAttribute(\"content\")", function(topBarStyle){
+						if (topBarStyle=="transparent") {
+
+							// Adjust for a transparent sidebar Dapp
+							navBarBackground.visible = false;
+							back.visible = false;
+							appInfoPane.anchors.leftMargin = -16;
+							appInfoPaneShadow.anchors.leftMargin = -16;
+							webview.anchors.topMargin = -74;
+							webview.runJavaScript("document.querySelector('body').classList.add('ethereum-dapp-url-bar-style-transparent')")
+
+						};	
+					});
+
+					
+
 					webview.runJavaScript(eth.readFile("bignumber.min.js"));
 					webview.runJavaScript(eth.readFile("ethereum.js/dist/ethereum.js"));
+
+					var cleanTitle = webview.url.toString()
+					var matches = cleanTitle.match(/^[a-z]*\:\/\/([^\/?#]+)(?:[\/?#]|$)/i);
+					var domain = matches && matches[1];
+
+			    	appDomain.text = domain //webview.url.replace("a", "z")
+			    	appTitle.text = webview.title
+
+			    	showFullUrlBar(false);
 				}
 			}
 			onJavaScriptConsoleMessage: {
@@ -208,4 +417,3 @@ Rectangle {
 		]
 	}
 }
-
diff --git a/cmd/mist/assets/qml/views/catalog.qml b/cmd/mist/assets/qml/views/catalog.qml
new file mode 100644
index 000000000..7f42c25dc
--- /dev/null
+++ b/cmd/mist/assets/qml/views/catalog.qml
@@ -0,0 +1,209 @@
+import QtQuick 2.0
+import QtQuick.Controls 1.0;
+import QtQuick.Controls.Styles 1.0
+import QtQuick.Layouts 1.0;
+import QtWebEngine 1.0
+//import QtWebEngine.experimental 1.0
+import QtQuick.Window 2.0;
+
+
+Rectangle {
+	id: window
+	anchors.fill: parent
+	color: "#00000000"
+
+	property var title: ""
+	property var iconSource: ""
+	property var menuItem
+	property var hideUrl: true
+
+	property alias url: webview.url
+	property alias windowTitle: webview.title
+	property alias webView: webview
+
+
+
+	property var cleanPath: false
+	property var open: function(url) {
+		if(!window.cleanPath) {
+			var uri = url;
+			if(!/.*\:\/\/.*/.test(uri)) {
+				uri = "http://" + uri;
+			}
+
+			var reg = /(^https?\:\/\/(?:www\.)?)([a-zA-Z0-9_\-]*\.eth)(.*)/
+
+			if(reg.test(uri)) {
+				uri.replace(reg, function(match, pre, domain, path) {
+					uri = pre;
+
+					var lookup = eth.lookupDomain(domain.substring(0, domain.length - 4));
+					var ip = [];
+					for(var i = 0, l = lookup.length; i < l; i++) {
+						ip.push(lookup.charCodeAt(i))
+					}
+
+					if(ip.length != 0) {
+						uri += lookup;
+					} else {
+						uri += domain;
+					}
+
+					uri += path;
+				});
+			}
+
+			window.cleanPath = true;
+
+			webview.url = uri;
+
+			//uriNav.text = uri.text.replace(/(^https?\:\/\/(?:www\.)?)([a-zA-Z0-9_\-]*\.\w{2,3})(.*)/, "$1$2<span style='color:#CCC'>$3</span>");
+			uriNav.text = uri;
+
+		} else {
+			// Prevent inf loop.
+			window.cleanPath = false;
+		}
+	}
+
+	Component.onCompleted: {
+	}
+
+	Item {
+		objectName: "root"
+		id: root
+		anchors.fill: parent
+		state: "inspectorShown"
+
+		RowLayout {
+			id: navBar
+			height: 184
+			z: 20
+
+			anchors {
+				left: parent.left
+				right: parent.right
+			}
+
+			Rectangle {
+				id: appInfoPane
+			    height: 28
+			    color: "#efefef"
+			    radius: 6
+			    z:25
+
+			   MouseArea {
+			    	anchors.fill: parent
+			    	z: 10
+			    	hoverEnabled: true
+			    	onEntered: {
+			    		uriNav.visible = true
+			    		appTitle.visible = false
+			    		appDomain.visible = false
+			    	}	    	
+			    }
+
+			    anchors {
+					left: parent.left
+					right: parent.right
+					leftMargin: 10
+					rightMargin: 10
+					top: parent.verticalCenter 
+					topMargin: 23
+				}
+
+				TextField {
+				    id: uriNav
+				    anchors {
+				    	left: parent.left
+				    	right: parent.right
+				    	leftMargin: 16
+						top: parent.verticalCenter 
+						topMargin: -10
+				    }
+
+				    horizontalAlignment: Text.AlignHCenter
+                    
+                    style: TextFieldStyle {
+                        textColor: "#928484"
+                        background: Rectangle {
+                            border.width: 0
+                            color: "transparent"
+                        }
+                    }
+    				text: "Type the address of a new Dapp";
+				    y: parent.height / 2 - this.height / 2
+				    z: 30
+				    activeFocusOnPress: true
+				    Keys.onReturnPressed: {
+        				newBrowserTab(this.text);
+        				this.text = "Type the address of a new Dapp";
+				    }
+
+			    }   				
+			}
+			
+			Rectangle {
+				id: appInfoPaneShadow
+			    width: 10
+			    height: 30
+			    color: "#BDB6B6"
+			    radius: 6
+			    z: 15
+
+			    anchors {
+					left: parent.left
+					right: parent.right
+					leftMargin:10
+					rightMargin:10
+					top: parent.verticalCenter 
+					topMargin: 23
+				}
+
+				
+			}
+
+		}
+
+
+		WebEngineView {
+			objectName: "webView"
+			id: webview
+			anchors.fill: parent
+
+			onLoadingChanged: {
+				if (loadRequest.status == WebEngineView.LoadSucceededStatus) {
+					webview.runJavaScript(eth.readFile("bignumber.min.js"));
+					webview.runJavaScript(eth.readFile("ethereum.js/dist/ethereum.js"));
+				}
+			}
+			onJavaScriptConsoleMessage: {
+				console.log(sourceID + ":" + lineNumber + ":" + JSON.stringify(message));
+			}
+		}
+
+
+
+		WebEngineView {
+			id: inspector
+			visible: false
+			z:10
+			anchors {
+				left: root.left
+				right: root.right
+				top: sizeGrip.bottom
+				bottom: root.bottom
+			}
+
+		}
+
+		states: [
+			State {
+				name: "inspectorShown"
+				PropertyChanges {
+					target: inspector
+				}
+			}
+		]
+	}
+}