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,58 +1,104 @@
 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
 
-    //% "Receive"
-    title: qsTrId("receive")
-    height: 500
-    width: 500
+    property alias selectedAccount: accountSelector.selectedAccount
 
+    //% "Receive"
+    header.title: qsTrId("receive")
+    contentHeight: layout.implicitHeight
+    width: 556
+
+    contentItem: Column {
+        id: layout
+        width: popup.width
+
+        topPadding: Style.current.smallPadding
+        spacing: Style.current.bigPadding
 
         Rectangle {
             id: qrCodeBox
-        height: 240
-        width: 240
-        anchors.top: parent.top
             anchors.horizontalCenter: parent.horizontalCenter
-        radius: Style.current.radius
+            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
+                    }
+                }
+            }
 
             Image {
                 id: qrCodeImage
+                anchors.centerIn: parent
+                height: parent.height
+                width: parent.width
                 asynchronous: true
                 fillMode: Image.PreserveAspectFit
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.verticalCenter: parent.verticalCenter
-            height: parent.height - Style.current.padding
-            width: parent.width - Style.current.padding
                 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
-        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: {
@@ -63,20 +109,45 @@ ModalPopup {
             }
         }
 
-    Input {
-        id: txtWalletAddress
-        //% "Wallet address"
-        label: qsTrId("wallet-address")
-        anchors.top: accountSelector.bottom
-        anchors.topMargin: Style.current.padding
+        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.padding
-        anchors.right: parent.right
-        anchors.rightMargin: Style.current.padding
-        copyToClipboard: true
-        textField.readOnly: true
-        customHeight: 56
+                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")
+                }
+            }
+        }
     }
-
 }
 

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