Merge pull request #1359

5a1952f Reordered QR/Tracking sections on the receive page
44ad8a3 Redesigned the tracking section
cb94523 This doesnt belong here
6ff273f First iteration of the subaddress table restyle
0e49e4a Reimplemented create/edit/copy (sub)address icons and buttons
5487383 Variable address truncation (for mobile)
9018ae3 Dynamic page height for the receive page
dc1d5e9 Check the 'to receive amount' with the transaction tracker
229fba2 Introduced 'show advanced options' checkbox
d6427a1 Fixes undefined references to 'bg', was previously moved to main.inactiveOverlay
1541d87 Fixes undefined reference to 's'
178be38 Cursor pointer on link hover for richtexts
bfbe00e Removed obsolete SubaddressTable.qml component
3e5f5f3 Adding editIcon.png
bff2701 Fixes the background for 2 popups

MiddlePanel.qml

@@ -121,7 +121,7 @@ Rectangle {
             }, State {
                name: "Receive"
                PropertyChanges { target: root; currentView: receiveView }
-               PropertyChanges { target: mainFlickable; contentHeight: 1000 * scaleRatio }
+               PropertyChanges { target: mainFlickable; contentHeight: receiveView.receiveHeight + 100 }
             }, State {
                name: "TxKey"
                PropertyChanges { target: root; currentView: txkeyView }

components/InputDialog.qml

@@ -46,6 +46,7 @@ Item {
     signal rejected()
 
     function open() {
+        inactiveOverlay.visible = true
         leftPanel.enabled = false
         middlePanel.enabled = false
         titleBar.enabled = false
@@ -56,6 +57,7 @@ Item {
     }
 
     function close() {
+        inactiveOverlay.visible = false
         leftPanel.enabled = true
         middlePanel.enabled = true
         titleBar.enabled = true
@@ -153,12 +155,4 @@ Item {
             }
         }
     }
-
-    Rectangle {
-        id: bg
-        z: parent.z + 1
-        anchors.fill: parent
-        color: "black"
-        opacity: 0.8
-    }
 }

components/Label.qml

@@ -26,7 +26,7 @@
 // STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
 // THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-import QtQuick 2.0
+import QtQuick 2.5
 import QtQuick.Layouts 1.1
 
 import "../components" as MoneroComponents
@@ -43,6 +43,7 @@ Item {
     property string fontFamily: ""
     property alias wrapMode: label.wrapMode
     property alias horizontalAlignment: label.horizontalAlignment
+    property alias hoveredLink: label.hoveredLink
     signal linkActivated()
     height: label.height * scaleRatio
     width: label.width * scaleRatio

components/LabelButton.qml

@@ -43,7 +43,6 @@ Rectangle {
     width: labelButtonText.width + 14
     anchors.right: copyButton.left
     anchors.rightMargin: 6
-    visible: isValidOpenAliasAddress(addressLine.text)
 
     Text {
         id: labelButtonText

components/LabelSubheader.qml

@@ -43,4 +43,10 @@ Label {
         color: MoneroComponents.Style.dividerColor
         opacity: MoneroComponents.Style.dividerOpacity
     }
+
+    MouseArea {
+        anchors.fill: parent
+        acceptedButtons: Qt.NoButton
+        cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor
+    }
 }

components/NewPasswordDialog.qml

@@ -48,6 +48,7 @@ Item {
     signal closeCallback()
 
     function open() {
+        inactiveOverlay.visible = true
         leftPanel.enabled = false
         middlePanel.enabled = false
         titleBar.enabled = false
@@ -59,6 +60,7 @@ Item {
     }
 
     function close() {
+        inactiveOverlay.visible = false
         leftPanel.enabled = true
         middlePanel.enabled = true
         titleBar.enabled = true
@@ -80,7 +82,7 @@ Item {
     }
 
     ColumnLayout {
-        z: bg.z + 1
+        z: inactiveOverlay.z + 1
         id: mainLayout
         spacing: 10
         anchors { fill: parent; margins: 35 * scaleRatio }

components/PasswordDialog.qml

@@ -70,7 +70,7 @@ Item {
     }
 
     ColumnLayout {
-        z: bg.z + 1
+        z: inactiveOverlay.z + 1
         id: mainLayout
         spacing: 10
         anchors { fill: parent; margins: 35 * scaleRatio }

components/Style.qml

@@ -25,5 +25,5 @@ QtObject {
     property string buttonTextColor: "white"
     property string buttonTextColorDisabled: "black"
     property string dividerColor: "white"
-    property real dividerOpacity: 0.25
+    property real dividerOpacity: 0.20
 }

components/SubaddressTable.qml

@@ -1,160 +0,0 @@
-// Copyright (c) 2014-2018, The Monero Project
-// 
-// All rights reserved.
-// 
-// Redistribution and use in source and binary forms, with or without modification, are
-// permitted provided that the following conditions are met:
-// 
-// 1. Redistributions of source code must retain the above copyright notice, this list of
-//    conditions and the following disclaimer.
-// 
-// 2. Redistributions in binary form must reproduce the above copyright notice, this list
-//    of conditions and the following disclaimer in the documentation and/or other
-//    materials provided with the distribution.
-// 
-// 3. Neither the name of the copyright holder nor the names of its contributors may be
-//    used to endorse or promote products derived from this software without specific
-//    prior written permission.
-// 
-// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
-// EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
-// MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL
-// THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
-// PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
-// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT,
-// STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
-// THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-
-import QtQuick 2.0
-import moneroComponents.Clipboard 1.0
-
-import "../components" as MoneroComponents
-
-ListView {
-    id: listView
-    clip: true
-    boundsBehavior: ListView.StopAtBounds
-    highlightMoveDuration: 0
-    highlightFollowsCurrentItem: true
-    anchors.topMargin: 0
-    spacing: 0
-
-    delegate: Rectangle {
-        id: delegate
-        height: 80
-        color: 'transparent';
-        anchors.topMargin: 0
-        width: listView.width
-        clip: true
-
-        MoneroComponents.LineEditMulti {
-            id: addressLine
-
-            fontSize: 14
-            readOnly: true
-            width: parent.width
-            anchors.top: parent.top
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.leftMargin: 10
-            anchors.topMargin: 12
-            anchors.rightMargin: 54
-            anchors.bottomMargin: 0
-            text: address
-
-            showingHeader: false
-            showBorder: false
-            addressValidation: false
-        }
-
-        MoneroComponents.IconButton {
-            id: clipboardButton
-            imageSource: "../images/copyToClipboard.png"
-
-            onClicked: {
-                console.log(addressLine.text + " copied to clipboard");
-                clipboard.setText(addressLine.text);
-                appWindow.showStatusMessage(qsTr("Address copied to clipboard"),3);
-            }
-
-            anchors.right: parent.right
-            anchors.rightMargin: 0
-            anchors.verticalCenter: parent.verticalCenter
-        }
-
-        Text {
-            id: indexText
-            anchors.top: addressLine.bottom
-            anchors.left: parent.left
-            anchors.leftMargin: 20
-            font.family: "Arial"
-            font.bold: true
-            font.pixelSize: 12
-            color: "#444444"
-            text: "#" + index
-        }
-
-        Text {
-            id: labelText
-            anchors.top: addressLine.bottom
-            anchors.left: indexText.right
-            anchors.right: parent.right
-            anchors.leftMargin: 10
-            font.family: "Arial"
-            font.bold: true
-            font.pixelSize: 12
-            color: MoneroComponents.Style.greyFontColor
-            text: label
-        }
-
-        MouseArea {
-            z: 5
-            anchors.top: parent.top
-            anchors.left: parent.left
-            anchors.bottom: parent.bottom
-            anchors.right: parent.right
-            anchors.rightMargin: clipboardButton.width
-            cursorShape: Qt.PointingHandCursor
-            onClicked: {
-                listView.currentIndex = index;
-            }
-        }
-
-        Rectangle {
-            anchors.left: parent.left
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-            width: 1
-            color: MoneroComponents.Style.grey
-            z: 6
-        }
-
-        Rectangle {
-            anchors.right: parent.right
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-            width: 1
-            color: MoneroComponents.Style.grey
-            z: 6
-        }
-
-        Rectangle {
-            anchors.right: parent.right
-            anchors.left: parent.left
-            anchors.bottom: parent.bottom
-            color: MoneroComponents.Style.grey
-            height: 1
-            z: 6
-        }
-
-        Rectangle {
-            width: 3
-            color: 'white'
-            visible: listView.currentIndex == index
-            anchors.left: parent.left
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-        }
-    }
-}

components/TitleBar.qml

@@ -26,7 +26,7 @@
 // STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
 // THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-import QtQuick 2.2
+import QtQuick 2.5
 import QtQuick.Window 2.0
 import QtQuick.Layouts 1.1
 
@@ -64,7 +64,7 @@ Rectangle {
     Item {
         // Background gradient
         width: parent.width
-        height: s
+        height: parent.height
         z: parent.z + 1
 
         Image {

js/TxUtils.js

@@ -11,8 +11,9 @@ function destinationsToAddress(destinations){
     return address;
 }
 
-function addressTruncate(address){
+function addressTruncate(address, range){
-    return address.substring(0, 6) + "..." + address.substring(address.length-6);
+    if(typeof(range) === "undefined") range = 8;
+    return address.substring(0, range) + "..." + address.substring(address.length-range);
 }
 
 function check256(str, length) {

pages/Receive.qml

@@ -40,20 +40,23 @@ import moneroComponents.TransactionHistory 1.0
 import moneroComponents.TransactionHistoryModel 1.0
 import moneroComponents.Subaddress 1.0
 import moneroComponents.SubaddressModel 1.0
+import "../js/TxUtils.js" as TxUtils
 
 Rectangle {
     id: pageReceive
     color: "transparent"
     property var model
     property var current_address
+    property int current_subaddress_table_index: 0
+    property bool advancedRowVisible: false
+    property alias receiveHeight: mainLayout.height
     property alias addressText : pageReceive.current_address
-    property string trackingLineText: ""
 
     function makeQRCodeString() {
         var s = "monero:"
         var nfields = 0
         s += current_address;
-        var amount = amountLine.text.trim()
+        var amount = amountToReceiveLine.text.trim()
         if (amount !== "") {
           s += (nfields++ ? "&" : "?")
           s += "tx_amount=" + amount
@@ -61,23 +64,15 @@ Rectangle {
         return s
     }
 
-    function setTrackingLineText(text) {
-        // don't replace with same text, it wrecks selection while the user is selecting
-        // also keep track of text, because when we read back the text from the widget,
-        // we do not get what we put it, but some extra HTML stuff on top
-        if (text != trackingLineText) {
-            trackingLine.text = text
-            trackingLineText = text
-        }
-    }
-
     function update() {
         if (!appWindow.currentWallet || !trackingEnabled.checked) {
-            setTrackingLineText("-")
+            trackingLineText.text = "";
+            trackingModel.clear();
             return
         }
         if (appWindow.currentWallet.connected() == Wallet.ConnectionStatus_Disconnected) {
-            setTrackingLineText(qsTr("WARNING: no connection to daemon"))
+            trackingLineText.text = qsTr("WARNING: no connection to daemon");
+            trackingModel.clear();
             return
         }
 
@@ -85,59 +80,95 @@ Rectangle {
         var count = model.rowCount()
         var totalAmount = 0
         var nTransactions = 0
-        var list = []
         var blockchainHeight = 0
+        var txs = []
+
         for (var i = 0; i < count; ++i) {
             var idx = model.index(i, 0)
             var isout = model.data(idx, TransactionHistoryModel.TransactionIsOutRole);
             var subaddrAccount = model.data(idx, TransactionHistoryModel.TransactionSubaddrAccountRole);
             var subaddrIndex = model.data(idx, TransactionHistoryModel.TransactionSubaddrIndexRole);
-            if (!isout && subaddrAccount == appWindow.currentWallet.currentSubaddressAccount && subaddrIndex == table.currentIndex) {
+            if (!isout && subaddrAccount == appWindow.currentWallet.currentSubaddressAccount && subaddrIndex == current_subaddress_table_index) {
                 var amount = model.data(idx, TransactionHistoryModel.TransactionAtomicAmountRole);
                 totalAmount = walletManager.addi(totalAmount, amount)
                 nTransactions += 1
 
                 var txid = model.data(idx, TransactionHistoryModel.TransactionHashRole);
                 var blockHeight = model.data(idx, TransactionHistoryModel.TransactionBlockHeightRole);
+
+                var in_txpool = false;
+                var confirmations = 0;
+                var displayAmount = 0;
+
                 if (blockHeight == 0) {
-                    list.push(qsTr("in the txpool: %1").arg(txid) + translationManager.emptyString)
+                    in_txpool = true;
                 } else {
                     if (blockchainHeight == 0)
                         blockchainHeight = walletManager.blockchainHeight()
-                    var confirmations = blockchainHeight - blockHeight - 1
+                    confirmations = blockchainHeight - blockHeight - 1
-                    var displayAmount = model.data(idx, TransactionHistoryModel.TransactionDisplayAmountRole);
+                    displayAmount = model.data(idx, TransactionHistoryModel.TransactionDisplayAmountRole);
-                    if (confirmations > 1) {
-                        list.push(qsTr("%2 confirmations: %3 (%1)").arg(txid).arg(confirmations).arg(displayAmount) + translationManager.emptyString)
-                    } else {
-                        list.push(qsTr("1 confirmation: %2 (%1)").arg(txid).arg(displayAmount) + translationManager.emptyString)
-                    }
-                }
-            }
-        }
-        // if there are too many txes, only show the first 3
-        if (list.length > 3) {
-            list.length = 3;
-            list.push("...");
                 }
 
+                txs.push({
+                    "amount": displayAmount,
+                    "confirmations": confirmations,
+                    "blockheight": blockHeight,
+                    "in_txpool": in_txpool,
+                    "txid": txid
+                })
+            }
+        }
+
+        // Update tracking status label
         if (nTransactions == 0) {
-            setTrackingLineText(qsTr("No transaction found yet...") + translationManager.emptyString)
+            trackingLineText.text = qsTr("No transaction found yet...") + translationManager.emptyString
             return
         }
+        else if(nTransactions === 1){
+            trackingLineText.text = qsTr("Transaction found") + ":" + translationManager.emptyString;
+        } else {
+            trackingLineText.text = qsTr("%1 transactions found").arg(nTransactions) + ":" + translationManager.emptyString
+        }
 
-        var text = ((nTransactions == 1) ? qsTr("Transaction found") : qsTr("%1 transactions found").arg(nTransactions)) + translationManager.emptyString
+        var max_tracking = 3;
-
+        toReceiveSatisfiedLine.text = "";
-        var expectedAmount = walletManager.amountFromString(amountLine.text)
+        var expectedAmount = walletManager.amountFromString(amountToReceiveLine.text)
         if (expectedAmount && expectedAmount != amount) {
             var displayTotalAmount = walletManager.displayAmount(totalAmount)
-            if (amount > expectedAmount) {
+            if (amount > expectedAmount) toReceiveSatisfiedLine.text += qsTr("With more Monero");
-                text += qsTr(" with more money (%1)").arg(displayTotalAmount) + translationManager.emptyString
+            else if (amount < expectedAmount) toReceiveSatisfiedLine.text = qsTr("With not enough Monero")
-            } else if (amount < expectedAmount) {
+            toReceiveSatisfiedLine.text += ": " + "<br>" +
-                text += qsTr(" with not enough money (%1)").arg(displayTotalAmount) + translationManager.emptyString
+                    qsTr("Expected") + ": " + amountToReceiveLine.text + "<br>" +
-            }
+                    qsTr("Total received") + ": " + displayTotalAmount + translationManager.emptyString;
         }
 
-        setTrackingLineText(text + "<br>" + list.join("<br>"))
+        trackingModel.clear();
+
+        if (txs.length > 3) {
+            txs.length = 3;
+        }
+
+        txs.forEach(function(tx){
+            trackingModel.append({
+                "amount": tx.amount,
+                "confirmations": tx.confirmations,
+                "blockheight": tx.blockHeight,
+                "in_txpool": tx.in_txpool,
+                "txid": tx.txid
+            });
+        });
+
+        //setTrackingLineText(text + "<br>" + list.join("<br>"))
+    }
+
+    function renameSubaddressLabel(_index){
+        inputDialog.labelText = qsTr("Set the label of the selected address:") + translationManager.emptyString;
+        inputDialog.inputText = appWindow.currentWallet.getSubaddressLabel(appWindow.currentWallet.currentSubaddressAccount, _index);
+        inputDialog.onAcceptedCallback = function() {
+            appWindow.currentWallet.subaddress.setLabel(appWindow.currentWallet.currentSubaddressAccount, _index, inputDialog.inputText);
+        }
+        inputDialog.onRejectedCallback = null;
+        inputDialog.open()
     }
 
     Clipboard { id: clipboard }
@@ -156,134 +187,275 @@ Rectangle {
         property int labelWidth: 120 * scaleRatio
         property int editWidth: 400 * scaleRatio
         property int lineEditFontSize: 12 * scaleRatio
-        property int qrCodeSize: 240 * scaleRatio
+        property int qrCodeSize: 220 * scaleRatio
 
         ColumnLayout {
             id: addressRow
             spacing: 0
-            Label {
+
-                id: addressLabel
+            LabelSubheader {
-                text: qsTr("Addresses") + translationManager.emptyString
+                Layout.fillWidth: true
-                width: mainLayout.labelWidth
+                textFormat: Text.RichText
+                text: "<style type='text/css'>a {text-decoration: none; color: #FF6C3C; font-size: 14px;}</style>" +
+                      qsTr("Addresses") +
+                      "<font size='2'> </font><a href='#'>" +
+                      qsTr("Help") + "</a>" +
+                      translationManager.emptyString
+                onLinkActivated: {
+                    receivePageDialog.title  = qsTr("Tracking payments") + translationManager.emptyString;
+                    receivePageDialog.text = qsTr(
+                        "<p>This QR code includes the address you selected above and" +
+                        "the amount you entered below. Share it with others (right-click->Save) " +
+                        "so they can more easily send you exact amounts.</p>"
+                    )
+                    receivePageDialog.icon = StandardIcon.Information
+                    receivePageDialog.open()
+                }
             }
 
-            Rectangle {
+            ColumnLayout {
-                id: header
+                id: subaddressListRow
+                property int subaddressListItemHeight: 32 * scaleRatio
+                Layout.topMargin: 22 * scaleRatio
                 Layout.fillWidth: true
-                Layout.topMargin: 10
+                Layout.minimumWidth: 240
-                visible: table.count > 0
+                Layout.preferredHeight: subaddressListItemHeight * subaddressListView.count
+                visible: subaddressListView.count >= 1
 
-                height: 10
+                ListView {
+                    id: subaddressListView
+                    Layout.fillWidth: true
+                    anchors.fill: parent
+                    clip: true
+                    boundsBehavior: ListView.StopAtBounds
+                    delegate: Rectangle {
+                        id: tableItem2
+                        height: subaddressListRow.subaddressListItemHeight
+                        width: parent.width
+                        Layout.fillWidth: true
                         color: "transparent"
 
                         Rectangle{
-                    anchors.top: parent.top
-                    anchors.left: parent.left
                             anchors.right: parent.right
-                    anchors.rightMargin: 10
+                            anchors.left: parent.left
-                    anchors.leftMargin: 10
+                            anchors.top: parent.top
-
                             height: 1
                             color: "#404040"
-                }
+                            visible: index !== 0
-
-                Image {
-                    anchors.top: parent.top
-                    anchors.left: parent.left
-
-                    width: 10
-                    height: 10
-
-                    source: "../images/historyBorderRadius.png"
-                }
-
-                Image {
-                    anchors.top: parent.top
-                    anchors.right: parent.right
-
-                    width: 10
-                    height: 10
-
-                    source: "../images/historyBorderRadius.png"
-                    rotation: 90
-                }
                         }
 
                         Rectangle {
-                id: tableRect
+                            anchors.fill: parent
-                property int table_max_height: 260
+                            anchors.rightMargin: 80
-                Layout.fillWidth: true
-                Layout.preferredHeight: table.contentHeight < table_max_height ? table.contentHeight : table_max_height
                             color: "transparent"
 
-                Scroll {
+                            Label {
-                    id: flickableScroll
+                                id: idLabel
-                    anchors.right: table.right
+                                color: index === current_subaddress_table_index ? "white" : "#757575"
-                    anchors.top: table.top
+                                anchors.verticalCenter: parent.verticalCenter
-                    anchors.bottom: table.bottom
+                                anchors.left: parent.left
-                    flickable: table
+                                anchors.leftMargin: 6
+                                fontSize: 14 * scaleRatio
+                                fontBold: true
+                                text: "#" + index
                             }
 
-                SubaddressTable {
+                            Label {
-                    id: table
+                                id: nameLabel
+                                color: "#a5a5a5"
+                                anchors.verticalCenter: parent.verticalCenter
+                                anchors.left: idLabel.right
+                                anchors.leftMargin: 6
+                                fontSize: 14 * scaleRatio
+                                fontBold: true
+                                text: label
+                            }
+
+                            Label {
+                                color: "white"
+                                anchors.verticalCenter: parent.verticalCenter
+                                anchors.left: nameLabel.right
+                                anchors.leftMargin: 6
+                                fontSize: 14 * scaleRatio
+                                fontBold: true
+                                text: {
+                                    if(isMobile){
+                                        TxUtils.addressTruncate(address, 6);
+                                    } else {
+                                        return TxUtils.addressTruncate(address, 10);
+                                    }
+                                }
+                            }
+
+                            MouseArea{
+                                cursorShape: Qt.PointingHandCursor
                                 anchors.fill: parent
-                    onContentYChanged: flickableScroll.flickableContentYChanged()
+                                hoverEnabled: true
+                                onEntered: {
+                                    tableItem2.color = "#26FFFFFF"
+                                }
+                                onExited: {
+                                    tableItem2.color = "transparent"
+                                }
+                                onClicked: {
+                                    subaddressListView.currentIndex = index;
+                                }
+                            }
+                        }
+
+                        IconButton {
+                            id: renameButton
+                            imageSource: "../images/editIcon.png"
+                            anchors.verticalCenter: parent.verticalCenter
+                            anchors.right: index !== 0 ? copyButton.left : parent.right
+                            anchors.rightMargin: index !== 0 ? 0 : 6
+                            anchors.top: undefined
+                            visible: index !== 0
+
+                            onClicked: {
+                                renameSubaddressLabel(index);
+                            }
+                        }
+
+                        IconButton {
+                            id: copyButton
+                            imageSource: "../images/copyToClipboard.png"
+                            anchors.verticalCenter: parent.verticalCenter
+                            anchors.top: undefined
+                            anchors.right: parent.right
+
+                            onClicked: {
+                                console.log("Address copied to clipboard");
+                                clipboard.setText(address);
+                                appWindow.showStatusMessage(qsTr("Address copied to clipboard"),3);
+                            }
+                        }
+                    }
                     onCurrentItemChanged: {
-                        current_address = appWindow.currentWallet.address(appWindow.currentWallet.currentSubaddressAccount, table.currentIndex);
+                        // reset global vars
+                        current_subaddress_table_index = subaddressListView.currentIndex;
+                        current_address = appWindow.currentWallet.address(
+                            appWindow.currentWallet.currentSubaddressAccount,
+                            subaddressListView.currentIndex
+                        );
+
+                        // reset tracking table
+                        trackingModel.clear();
                     }
                 }
             }
 
-            RowLayout {
+            // 'fake' row for 'create new address'
-                spacing: 20
+            ColumnLayout{
-                Layout.topMargin: 20
+                id: createAddressRow
+                Layout.fillWidth: true
+                spacing: 0
 
-                StandardButton {
+                Rectangle {
-                    small: true
+                    color: "#404040"
-                    text: qsTr("Create new address") + translationManager.emptyString;
+                    Layout.fillWidth: true
+                    height: 1
+                }
+
+                Rectangle{
+                    id: createAddressRect
+                    Layout.preferredHeight: subaddressListRow.subaddressListItemHeight
+                    color: "transparent"
+                    Layout.fillWidth: true
+
+                    Label {
+                        color: "#757575"
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.left: parent.left
+                        anchors.leftMargin: 6
+                        fontSize: 14 * scaleRatio
+                        fontBold: true
+                        text: "+ " + qsTr("Create new address") + translationManager.emptyString;
+                    }
+
+                    MouseArea {
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+
+                        onEntered: {
+                            createAddressRect.color = "#26FFFFFF"
+                        }
+                        onExited: {
+                            createAddressRect.color = "transparent"
+                        }
                         onClicked: {
                             inputDialog.labelText = qsTr("Set the label of the new address:") + translationManager.emptyString
                             inputDialog.inputText = qsTr("(Untitled)")
                             inputDialog.onAcceptedCallback = function() {
                                 appWindow.currentWallet.subaddress.addRow(appWindow.currentWallet.currentSubaddressAccount, inputDialog.inputText)
-                            table.currentIndex = appWindow.currentWallet.numSubaddresses() - 1
+                                current_subaddress_table_index = appWindow.currentWallet.numSubaddresses() - 1
                             }
                             inputDialog.onRejectedCallback = null;
                             inputDialog.open()
                         }
                     }
-                StandardButton {
+                }
-                    small: true
+            }
-                    enabled: table.currentIndex > 0
+        }
-                    text: qsTr("Rename") + translationManager.emptyString;
+
+        RowLayout {
+            CheckBox2 {
+                id: showAdvancedCheckbox
+                checked: false
                 onClicked: {
-                        inputDialog.labelText = qsTr("Set the label of the selected address:") + translationManager.emptyString
+                    advancedRowVisible = !advancedRowVisible;
-                        inputDialog.inputText = appWindow.currentWallet.getSubaddressLabel(appWindow.currentWallet.currentSubaddressAccount, table.currentIndex)
-                        inputDialog.onAcceptedCallback = function() {
-                            appWindow.currentWallet.subaddress.setLabel(appWindow.currentWallet.currentSubaddressAccount, table.currentIndex, inputDialog.inputText)
                 }
-                        inputDialog.onRejectedCallback = null;
+                text: qsTr("Advanced options") + translationManager.emptyString
-                        inputDialog.open()
             }
         }
+        
+        GridLayout {
+            id: advancedRow
+            columns: (isMobile)? 1 : 2
+            Layout.fillWidth: true
+            columnSpacing: 32 * scaleRatio
+            visible: advancedRowVisible
+
+            ColumnLayout {
+                Layout.alignment: Qt.AlignTop
+                Layout.fillWidth: true
+                spacing: 20 * scaleRatio
+
+                LabelSubheader {
+                    Layout.fillWidth: true
+                    textFormat: Text.RichText
+                    text: "<style type='text/css'>a {text-decoration: none; color: #FF6C3C; font-size: 14px;}</style>" +
+                          qsTr("QR Code") +
+                          "<font size='2'> </font><a href='#'>" +
+                          qsTr("Help") + "</a>" +
+                          translationManager.emptyString
+                    onLinkActivated: {
+                        receivePageDialog.title  = qsTr("QR Code") + translationManager.emptyString;
+                        receivePageDialog.text = qsTr(
+                            "<p>This QR code includes the address you selected above and" +
+                            "the amount you entered below. Share it with others (right-click->Save) " +
+                            "so they can more easily send you exact amounts.</p>"
+                        )
+                        receivePageDialog.icon = StandardIcon.Information
+                        receivePageDialog.open()
                     }
                 }
 
                 ColumnLayout {
                     id: amountRow
-            Label {
-                id: amountLabel
-                text: qsTr("Amount") + translationManager.emptyString
-                width: mainLayout.labelWidth
-            }
 
+                    Layout.fillWidth: true
+                    Layout.minimumWidth: 200
+                    Layout.maximumWidth: mainLayout.qrCodeSize
 
                     LineEdit {
-                id: amountLine
+                        id: amountToReceiveLine
-                placeholderText: qsTr("Amount to receive") + translationManager.emptyString
-                readOnly: false
-                width: mainLayout.editWidth
                         Layout.fillWidth: true
+                        labelText: qsTr("Amount") + translationManager.emptyString
+                        placeholderText: qsTr("Amount to receive") + translationManager.emptyString
+                        fontBold: true
+                        inlineIcon: true
                         validator: DoubleValidator {
                             bottom: 0.0
                             top: 18446744.073709551615
@@ -294,22 +466,63 @@ Rectangle {
                     }
                 }
 
+                Rectangle {
+                    color: "white"
+                    Layout.topMargin: parent.spacing - 4
+                    Layout.fillWidth: true
+                    Layout.maximumWidth: mainLayout.qrCodeSize
+                    Layout.preferredHeight: width
+                    radius: 4
+
+                    Image {
+                        id: qrCode
+                        anchors.fill: parent
+                        anchors.margins: 6
+
+                        smooth: false
+                        fillMode: Image.PreserveAspectFit
+                        source: "image://qrcode/" + makeQRCodeString()
+                        MouseArea {
+                            anchors.fill: parent
+                            acceptedButtons: Qt.RightButton
+                            onClicked: {
+                                if (mouse.button == Qt.RightButton)
+                                    qrMenu.open()
+                            }
+                            onPressAndHold: qrFileDialog.open()
+                        }
+                    }
+
+                    Menu {
+                        id: qrMenu
+                        title: "QrCode"
+                        y: parent.height / 2
+
+                        MenuItem {
+                           text: qsTr("Save As") + translationManager.emptyString;
+                           onTriggered: qrFileDialog.open()
+                        }
+                    }
+                }
+            }
+
             ColumnLayout {
                 id: trackingRow
-            visible: !isAndroid && !isIOS
+                Layout.alignment: Qt.AlignTop
-            Label {
+                Layout.fillWidth: true
-                id: trackingLabel
+                spacing: 0 * scaleRatio
+
+                LabelSubheader {
+                    Layout.fillWidth: true
                     textFormat: Text.RichText
                     text: "<style type='text/css'>a {text-decoration: none; color: #FF6C3C; font-size: 14px;}</style>" +
                           qsTr("Tracking") +
-                      "<font size='2'> (</font><a href='#'>" +
+                          "<font size='2'> </font><a href='#'>" +
-                      qsTr("help") +
+                          qsTr("Help") + "</a>" +
-                      "</a><font size='2'>)</font>" +
                           translationManager.emptyString
-                width: mainLayout.labelWidth
                     onLinkActivated: {
-                    trackingHowToUseDialog.title  = qsTr("Tracking payments") + translationManager.emptyString;
+                        receivePageDialog.title  = qsTr("Tracking payments") + translationManager.emptyString;
-                    trackingHowToUseDialog.text = qsTr(
+                        receivePageDialog.text = qsTr(
                             "<p><font size='+2'>This is a simple sales tracker:</font></p>" +
                             "<p>Let your customer scan that QR code to make a payment (if that customer has software which " +
                             "supports QR code scanning).</p>" +
@@ -320,30 +533,154 @@ Rectangle {
                             "confirmed in short order, but there is still a possibility they might not, so for larger " +
                             "values you may want to wait for one or more confirmation(s).</p>"
                         )
-                    trackingHowToUseDialog.icon = StandardIcon.Information
+                        receivePageDialog.icon = StandardIcon.Information
-                    trackingHowToUseDialog.open()
+                        receivePageDialog.open()
                     }
                 }
 
+                ListModel {
+                    id: trackingModel
+                }
+
+                RowLayout{
+                    Layout.topMargin: 14
+                    Layout.bottomMargin: 10
+                    visible: trackingTableRow.visible
+
+                    Label {
+                        id: trackingLineText
+                        color: "white"
+                        fontFamily: Style.fontLight.name
+                        fontSize: 16 * scaleRatio
+                        text: ""
+                    }
+                }
+
+                ColumnLayout {
+                    id: trackingTableRow
+                    visible: trackingListView.count >= 1
+                    Layout.fillWidth: true
+                    Layout.minimumWidth: 240
+                    Layout.preferredHeight: 46 * trackingListView.count
+
+                    ListView {
+                        id: trackingListView
+                        Layout.fillWidth: true
+                        anchors.fill: parent
+                        clip: true
+                        boundsBehavior: ListView.StopAtBounds
+                        model: trackingModel
+                        delegate: Item {
+                            id: trackingTableItem
+                            height: 46
+                            width: parent.width
+                            Layout.fillWidth: true
+
+                            Rectangle{
+                                anchors.right: parent.right
+                                anchors.left: parent.left
+                                anchors.top: parent.top
+                                height: 1
+                                color: "#404040"
+                                visible: index !== 0
+                            }
+
+                            Image {
+                                id: arrowImage
+                                source: "../images/upArrow-green.png"
+                                height: 18 * scaleRatio
+                                width: 12 * scaleRatio
+                                anchors.verticalCenter: parent.verticalCenter
+                                anchors.left: parent.left
+                                anchors.leftMargin: 8
+                            }
+
+                            Label {
+                                id: trackingConfirmationLine
+                                color: "white"
+                                anchors.top: parent.top
+                                anchors.topMargin: 6
+                                anchors.left: arrowImage.right
+                                anchors.leftMargin: 10
+                                fontSize: 14 * scaleRatio
+                                text: {
+                                    if(in_txpool){
+                                        return "Awaiting in txpool"
+                                    } else {
+                                        if(confirmations > 1){
+                                            if(confirmations > 100){
+                                                return "100+ " + qsTr("confirmations") + translationManager.emptyString;
+                                            } else {
+                                                return confirmations + " " + qsTr("confirmations") + translationManager.emptyString;
+                                            }
+                                        } else {
+                                            return "1 " + qsTr("confirmation") + translationManager.emptyString;
+                                        }
+                                    }
+                                }
+                            }
+
+                            Label {
+                                id: trackingAmountLine
+                                color: "#2eb358"
+                                anchors.top: trackingConfirmationLine.bottom
+                                anchors.left: arrowImage.right
+                                anchors.leftMargin: 10
+                                fontSize: 14 * scaleRatio
+                                fontBold: true
+                                text: amount
+                            }
+
+                            IconButton {
+                                id: clipboardButton
+                                imageSource: "../images/copyToClipboard.png"
+
+                                onClicked: {
+                                    console.log("tx_id copied to clipboard");
+                                    clipboard.setText(txid);
+                                    appWindow.showStatusMessage(qsTr("Transaction ID copied to clipboard"),3);
+                                }
+
+                                anchors.right: parent.right
+                                anchors.top: undefined
+                                anchors.verticalCenter: parent.verticalCenter
+                            }
+                        }
+                    }
+                }
+
+                RowLayout {
+                    visible: trackingTableRow.visible && x.text !== "" && amountToReceiveLine.text !== ""
+                    Layout.topMargin: 14 * scaleRatio
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: 40 * scaleRatio
+
+                    Label {
+                        id: toReceiveSatisfiedLine
+                        color: "white"
+                        fontFamily: Style.fontLight.name
+                        fontSize: 14 * scaleRatio
+                        textFormat: Text.RichText
+                        text: ""
+                        height: 40 * scaleRatio
+                    }
+                }
+
+                RowLayout {
+                    Layout.fillWidth: true
+                    Layout.minimumWidth: 200
+                    Layout.topMargin: trackingTableRow.visible ? 20 * scaleRatio : 32 * scaleRatio
+
                     CheckBox {
                         id: trackingEnabled
                         text: qsTr("Enable") + translationManager.emptyString
                     }
-
+                }
-            TextEdit {
-                id: trackingLine
-                readOnly: true
-                width: mainLayout.editWidth
-                Layout.fillWidth: true
-                textFormat: Text.RichText
-                text: ""
-                selectByMouse: true
-                color: 'white'
             }
         }
 
         MessageDialog {
-            id: trackingHowToUseDialog
+            id: receivePageDialog
             standardButtons: StandardButton.Ok
         }
 
@@ -356,39 +693,10 @@ Rectangle {
             onAccepted: {
                 if(!walletManager.saveQrCode(makeQRCodeString(), walletManager.urlToLocalPath(fileUrl))) {
                     console.log("Failed to save QrCode to file " + walletManager.urlToLocalPath(fileUrl) )
-                    trackingHowToUseDialog.title  = qsTr("Save QrCode") + translationManager.emptyString;
+                    receivePageDialog.title = qsTr("Save QrCode") + translationManager.emptyString;
-                    trackingHowToUseDialog.text = qsTr("Failed to save QrCode to ") + walletManager.urlToLocalPath(fileUrl) + translationManager.emptyString;
+                    receivePageDialog.text = qsTr("Failed to save QrCode to ") + walletManager.urlToLocalPath(fileUrl) + translationManager.emptyString;
-                    trackingHowToUseDialog.icon = StandardIcon.Error
+                    receivePageDialog.icon = StandardIcon.Error
-                    trackingHowToUseDialog.open()
+                    receivePageDialog.open()
-                }
-            }
-        }
-        ColumnLayout {
-            Menu {
-                id: qrMenu
-                title: "QrCode"
-                MenuItem {
-                   text: qsTr("Save As") + translationManager.emptyString;
-                   onTriggered: qrFileDialog.open()
-                }
-            }
-
-            Image {
-                id: qrCode
-                anchors.margins: 50 * scaleRatio
-                Layout.fillWidth: true
-                Layout.minimumHeight: mainLayout.qrCodeSize
-                smooth: false
-                fillMode: Image.PreserveAspectFit
-                source: "image://qrcode/" + makeQRCodeString()
-                MouseArea {
-                    anchors.fill: parent
-                    acceptedButtons: Qt.RightButton
-                    onClicked: {
-                        if (mouse.button == Qt.RightButton)
-                            qrMenu.popup()
-                    }
-                    onPressAndHold: qrFileDialog.open()
                 }
             }
         }
@@ -402,12 +710,13 @@ Rectangle {
 
     function onPageCompleted() {
         console.log("Receive page loaded");
-        table.model = currentWallet.subaddressModel;
+        subaddressListView.model = appWindow.currentWallet.subaddressModel;
 
         if (appWindow.currentWallet) {
             current_address = appWindow.currentWallet.address(appWindow.currentWallet.currentSubaddressAccount, 0)
             appWindow.currentWallet.subaddress.refresh(appWindow.currentWallet.currentSubaddressAccount)
-            table.currentIndex = 0
+            current_subaddress_table_index = 0;
+            subaddressListView.currentIndex = 0;
         }
 
         update()
@@ -418,5 +727,7 @@ Rectangle {
 
     function onPageClosed() {
         timer.running = false
+        trackingEnabled.checked = false
+        trackingModel.clear()
     }
 }

qml.qrc

@@ -51,7 +51,6 @@
         <file>tabs/TweetsModel.qml</file>
         <file>components/Scroll.qml</file>
         <file>components/AddressBookTable.qml</file>
-        <file>components/SubaddressTable.qml</file>
         <file>images/deleteIcon.png</file>
         <file>images/moneroIcon.png</file>
         <file>components/StandardDropdown.qml</file>
@@ -208,5 +207,6 @@
         <file>js/Windows.js</file>
         <file>js/Utils.js</file>
         <file>components/RadioButton.qml</file>
+        <file>images/editIcon.png</file>
     </qresource>
 </RCC>