feat(@desktop/wallet): adapt receive modal design

closes  #5039

ui/app/AppLayouts/Browser/popups/BrowserWalletMenu.qml

@@ -146,7 +146,9 @@ Popup {
             anchors.rightMargin: Style.current.padding
             anchors.top: parent.top
             anchors.topMargin: Style.current.padding
+            color: Style.current.transparent
             textToCopy: accountSelector.selectedAccount.address
+            store: RootStore
         }
 
         StatusFlatRoundButton {

ui/app/AppLayouts/Browser/stores/RootStore.qml

@@ -78,4 +78,8 @@ QtObject {
         }
         return tempUrl
     }
+
+    function copyToClipboard(text) {
+        globalUtils.copyToClipboard(text)
+    }
 }

ui/app/AppLayouts/Wallet/panels/WalletHeader.qml

@@ -95,6 +95,7 @@ Item {
                 destroy();
             }
             selectedAccount: walletHeader.walletStore.currentAccount
+            anchors.centerIn: parent
         }
     }
 

ui/app/AppLayouts/Wallet/popups/ReceiveModal.qml

@@ -1,82 +1,153 @@
 import QtQuick 2.13
 import QtQuick.Controls 2.13
+import QtGraphicalEffects 1.13
 
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+import StatusQ.Components 0.1
 
 import utils 1.0
 
-import shared.popups 1.0
 import shared.controls 1.0
+
 import "../stores"
 
-// TODO: replace with StatusModal
-ModalPopup {
-    property alias selectedAccount: accountSelector.selectedAccount
+StatusModal {
     id: popup
 
+    property alias selectedAccount: accountSelector.selectedAccount
+
     //% "Receive"
-    title: qsTrId("receive")
-    height: 500
-    width: 500
+    header.title: qsTrId("receive")
+    contentHeight: layout.implicitHeight
+    width: 556
 
+    contentItem: Column {
+        id: layout
+        width: popup.width
 
-    Rectangle {
-        id: qrCodeBox
-        height: 240
-        width: 240
-        anchors.top: parent.top
-        anchors.horizontalCenter: parent.horizontalCenter
-        radius: Style.current.radius
-        border.width: 1
-        border.color: Style.current.border
+        topPadding: Style.current.smallPadding
+        spacing: Style.current.bigPadding
 
-        Image {
-            id: qrCodeImage
-            asynchronous: true
-            fillMode: Image.PreserveAspectFit
+        Rectangle {
+            id: qrCodeBox
             anchors.horizontalCenter: parent.horizontalCenter
-            anchors.verticalCenter: parent.verticalCenter
-            height: parent.height - Style.current.padding
-            width: parent.width - Style.current.padding
-            mipmap: true
-            smooth: false
-        }
-    }
+            height: 339
+            width: 339
+            layer.enabled: true
+            layer.effect: OpacityMask {
+                maskSource: Item {
+                    width: qrCodeBox.width
+                    height: qrCodeBox.height
+                    Rectangle {
+                        anchors.top: parent.top
+                        anchors.left: parent.left
+                        width: qrCodeBox.width
+                        height: qrCodeBox.height
+                        radius: Style.current.bigPadding
+                        border.width: 1
+                        border.color: Style.current.border
+                    }
+                    Rectangle {
+                        anchors.top: parent.top
+                        anchors.right: parent.right
+                        width: Style.current.bigPadding
+                        height: Style.current.bigPadding
+                    }
+                    Rectangle {
+                        anchors.bottom: parent.bottom
+                        anchors.left: parent.left
+                        width: Style.current.bigPadding
+                        height: Style.current.bigPadding
+                    }
+                }
+            }
 
-    StatusAccountSelector {
-        id: accountSelector
-        label: ""
-        showAccountDetails: false
-        accounts: RootStore.accounts
-        currency: RootStore.currentCurrency
-        anchors.top: qrCodeBox.bottom
-        anchors.topMargin: Style.current.padding
-        anchors.horizontalCenter: parent.horizontalCenter
-        width: 240
-        dropdownWidth: parent.width - (Style.current.padding * 2)
-        dropdownAlignment: StatusSelect.MenuAlignment.Center
-        onSelectedAccountChanged: {
-            if (selectedAccount.address) {
-                qrCodeImage.source = RootStore.getQrCode(selectedAccount.address)
-                txtWalletAddress.text = selectedAccount.address
+            Image {
+                id: qrCodeImage
+                anchors.centerIn: parent
+                height: parent.height
+                width: parent.width
+                asynchronous: true
+                fillMode: Image.PreserveAspectFit
+                mipmap: true
+                smooth: false
+            }
+
+            Rectangle {
+                anchors.centerIn: qrCodeImage
+                width: 78
+                height: 78
+                color: "white"
+                StatusIcon {
+                    anchors.centerIn: parent
+                    anchors.margins: 2
+                    width: 78
+                    height: 78
+                    source: Style.svg("status-logo-icon")
+                }
+            }
+        }
+
+        StatusAccountSelector {
+            id: accountSelector
+            anchors.horizontalCenter: parent.horizontalCenter
+            width: 240
+            label: ""
+            showAccountDetails: false
+            accounts: RootStore.accounts
+            currency: RootStore.currentCurrency
+            dropdownWidth: parent.width - (Style.current.padding * 2)
+            dropdownAlignment: StatusSelect.MenuAlignment.Center
+            onSelectedAccountChanged: {
+                if (selectedAccount.address) {
+                    qrCodeImage.source = RootStore.getQrCode(selectedAccount.address)
+                    txtWalletAddress.text = selectedAccount.address
+                }
+            }
+        }
+
+        Item  {
+            anchors.horizontalCenter: parent.horizontalCenter
+            width: parent.width
+            height: addressLabel.height + copyButton.height
+            Column {
+                id: addressLabel
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.left: parent.left
+                anchors.leftMargin: Style.current.bigPadding
+                StatusBaseText {
+                    id: contactsLabel
+                    font.pixelSize: 15
+                    color: Theme.palette.baseColor1
+                    text: qsTr("Your Address")
+                }
+                StatusAddress {
+                    id: txtWalletAddress
+                    color: Theme.palette.directColor1
+                    font.pixelSize: 15
+                }
+            }
+            Column {
+                id: copyButton
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.right: parent.right
+                anchors.rightMargin: Style.current.bigPadding
+                spacing: 5
+                CopyToClipBoardButton {
+                    store: RootStore
+                    textToCopy: txtWalletAddress.text
+                }
+                StatusBaseText {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    font.pixelSize: 13
+                    color: Theme.palette.primaryColor1
+                    text: qsTr("Copy")
+                }
             }
         }
     }
-
-    Input {
-        id: txtWalletAddress
-        //% "Wallet address"
-        label: qsTrId("wallet-address")
-        anchors.top: accountSelector.bottom
-        anchors.topMargin: Style.current.padding
-        anchors.left: parent.left
-        anchors.leftMargin: Style.current.padding
-        anchors.right: parent.right
-        anchors.rightMargin: Style.current.padding
-        copyToClipboard: true
-        textField.readOnly: true
-        customHeight: 56
-    }
-
 }
 

ui/app/AppLayouts/Wallet/stores/RootStore.qml

@@ -187,4 +187,8 @@ QtObject {
     function toggleNetwork(chainId) {
         networksModule.toggleNetwork(chainId)
     }
+
+    function copyToClipboard(text) {
+        globalUtils.copyToClipboard(text)
+    }
 }

ui/imports/shared/controls/CopyToClipBoardButton.qml

@@ -1,79 +1,42 @@
 import QtQuick 2.13
-import QtQuick.Controls 2.13
-import QtGraphicalEffects 1.13
 
-import StatusQ.Controls 0.1 as StatusQ
-import utils 1.0
+import StatusQ.Controls 0.1
+
 import shared.stores 1.0
 
-import "./"
-import "../"
+import utils 1.0
 
-// TODO: Replace with StatusQ components
-Rectangle {
+StatusRoundButton {
     id: copyToClipboardButton
-    height: 32
-    width: 32
-    radius: 8
-    color: Style.current.transparent
+
     property var onClick: function() {}
     property string textToCopy: ""
     property bool tooltipUnder: false
     property var store
 
-    Image {
-        width: 20
-        height: 20
-        sourceSize.width: width
-        sourceSize.height: height
-        source: Style.svg("copy-to-clipboard-icon")
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.verticalCenter: parent.verticalCenter
+    icon.name: "copy"
 
-        ColorOverlay {
-            anchors.fill: parent
-            antialiasing: true
-            source: parent
-            color: Style.current.primary
+    onPressed: {
+        if (!toolTip.visible) {
+            toolTip.visible = true
         }
     }
-
-    MouseArea {
-        cursorShape: Qt.PointingHandCursor
-        anchors.fill: parent
-        hoverEnabled: true
-        onExited: {
-            parent.color = Style.current.transparent
-        }
-        onEntered:{
-            parent.color = Style.current.backgroundHover
-        }
-        onPressed: {
-            parent.color = Style.current.backgroundHover
-            if (!toolTip.visible) {
-                toolTip.visible = true
-            }
-        }
-        onReleased: {
-            parent.color = Style.current.backgroundHover
-        }
-        onClicked: {
-            if (textToCopy) {
-                copyToClipboardButton.store.copyToClipboard(textToCopy)
-            }
-            onClick()
+    onClicked: {
+        if (textToCopy) {
+            store.copyToClipboard(textToCopy)
         }
+        onClick()
     }
 
-    StatusQ.StatusToolTip {
+    StatusToolTip {
         id: toolTip
         //% "Copied!"
         text: qsTrId("copied-")
-        orientation: tooltipUnder ? StatusQ.StatusToolTip.Orientation.Bottom: StatusQ.StatusToolTip.Orientation.Top
+        orientation: tooltipUnder ? StatusToolTip.Orientation.Bottom: StatusToolTip.Orientation.Top
     }
 
     Timer {
-        id:hideTimer
+        id: hideTimer
         interval: 2000
         running: toolTip.visible
         onTriggered: {

ui/imports/shared/panels/TextWithLabel.qml

@@ -53,6 +53,7 @@ Item {
     Component {
         id: copyComponent
         CopyToClipBoardButton {
+            color: Style.current.transparent
             textToCopy: infoText.textToCopy
         }
     }

ui/imports/shared/status/StatusExpandableAddress.qml

@@ -81,6 +81,7 @@ Item {
         anchors.left: control.right
         anchors.leftMargin: Style.current.smallPadding
         anchors.verticalCenter: parent.verticalCenter
+        color: Style.current.transparent
         textToCopy: root.address
         store: root.store
         MouseArea {

ui/imports/shared/status/StatusSectionDescItem.qml

@@ -43,6 +43,7 @@ Item {
             anchors.verticalCenter: parent.verticalCenter
             anchors.left: parent.right
             anchors.leftMargin: Style.current.smallPadding
+            color: Style.current.transparent
             store: root.store
         }
     }