feat: add receive modal

Add receive modal in the wallet to show a QR code and address selector
Improve Input component to be able to show a Copy button that copies to clipboard
Improve AccountSelector modal to be able to not show details and fix eliding

ui/app/AppLayouts/Wallet/LeftTab.qml

@@ -102,10 +102,14 @@ Item {
             StyledText {
                 id: walletName
                 text: name
+                elide: Text.ElideRight
+                anchors.right: walletBalance.left
+                anchors.rightMargin: Style.current.smallPadding
                 anchors.top: parent.top
                 anchors.topMargin: Style.current.smallPadding
                 anchors.left: walletIcon.right
-                anchors.leftMargin: 10
+                anchors.leftMargin: Style.current.smallPadding
+
                 font.pixelSize: 15
                 font.weight: Font.Medium
                 color: selected ? Style.current.white : Style.current.textColor

ui/app/AppLayouts/Wallet/ReceiveModal.qml

@@ -0,0 +1,68 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import "../../../imports"
+import "../../../shared"
+
+ModalPopup {
+    property string address: ""
+    id: popup
+
+    title: qsTr("Receive")
+    height: 500
+    width: 500
+
+
+    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
+
+        Image {
+            id: qrCodeImage
+            asynchronous: true
+            fillMode: Image.PreserveAspectFit
+            source: profileModel.qrCode(accountSelector.selectedAccount.address)
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+            height: parent.height - Style.current.padding
+            width: parent.width - Style.current.padding
+            mipmap: true
+            smooth: false
+        }
+    }
+
+    AccountSelector {
+        id: accountSelector
+        label: ""
+        showAccountDetails: false
+        accounts: walletModel.accounts
+        currency: walletModel.defaultCurrency
+        anchors.top: qrCodeBox.bottom
+        anchors.topMargin: Style.current.padding
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: 240
+    }
+
+    Input {
+        label: qsTr("Wallet address")
+        text: accountSelector.selectedAccount.address
+        anchors.top: accountSelector.bottom
+        anchors.topMargin: Style.current.padding
+        copyToClipboard: true
+        textField.readOnly: true
+        customHeight: 56
+    }
+
+}
+
+/*##^##
+Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+##^##*/
+

ui/app/AppLayouts/Wallet/WalletHeader.qml

@@ -71,6 +71,11 @@ Item {
         id: sendModal
     }
 
+    ReceiveModal{
+        id: receiveModal
+        address: currentAccount.address
+    }
+
     SetCurrencyModal{
         id: setCurrencyModal
     }
@@ -114,7 +119,7 @@ Item {
             flipImage: true
             text: qsTr("Receive")
             onClicked: function () {
-                // Nothing for now
+                receiveModal.open()
             }
             anchors.left: sendBtn.right
             anchors.leftMargin: walletMenu.btnOuterMargin

ui/nim-status-client.pro

@@ -146,6 +146,7 @@ DISTFILES += \
     app/AppLayouts/Profile/Sections/AppearanceContainer.qml \
     app/AppLayouts/Profile/Sections/MyProfileContainer.qml \
     app/AppLayouts/Profile/Sections/SoundsContainer.qml \
+    app/AppLayouts/Wallet/ReceiveModal.qml \
     app/AppLayouts/Wallet/components/HeaderButton.qml \
     app/AppLayouts/Profile/Sections/Data/locales.js \
     fonts/InterStatus/InterStatus-Black.otf \

ui/shared/AccountSelector.qml

@@ -7,12 +7,14 @@ import "../imports"
 Item {
     id: root
     property string label: qsTr("Choose account")
+    property bool showAccountDetails: true
     property var accounts
     property var selectedAccount: {
         "address": "", "name": "", "iconColor": "", "fiatBalance": ""
     }
     property string currency: "usd"
-    height: select.height + selectedAccountDetails.height
+    height: select.height +
+            (selectedAccountDetails.visible ? selectedAccountDetails.height : 0)
     // set to asset symbol to display asset's balance top right
     // NOTE: if this asset is not selected as a wallet token in the UI, then
     // nothing will be displayed
@@ -43,7 +45,7 @@ Item {
             selectedAccountDetails.visible = false
         }
         menu.onClosed: {
-            selectedAccountDetails.visible = true
+            selectedAccountDetails.visible = root.showAccountDetails
         }
         menu.width: dropdownWidth
         selectedItemView: Item {
@@ -68,6 +70,9 @@ Item {
             StyledText {
                 id: selectedTextField
                 text: selectedAccount.name
+                elide: Text.ElideRight
+                anchors.right: parent.right
+                anchors.rightMargin: Style.current.bigPadding
                 anchors.left: selectedIconImg.right
                 anchors.leftMargin: 8
                 anchors.verticalCenter: parent.verticalCenter
@@ -80,6 +85,7 @@ Item {
 
     Row {
         id: selectedAccountDetails
+        visible: root.showAccountDetails
         anchors.top: select.bottom
         anchors.topMargin: 8
         anchors.left: parent.left
@@ -134,6 +140,7 @@ Item {
                 color: iconColor
             }
             Column {
+                id: column
                 anchors.left: iconImg.right
                 anchors.leftMargin: 14
                 anchors.verticalCenter: parent.verticalCenter
@@ -141,6 +148,9 @@ Item {
                 StyledText {
                     id: accountName
                     text: name
+                    elide: Text.ElideRight
+                    anchors.right: parent.right
+                    anchors.left: parent.left
                     font.pixelSize: 15
                     height: 22
                 }

ui/shared/Input.qml

@@ -1,6 +1,7 @@
 import QtQuick 2.13
 import QtQuick.Controls 2.13
 import "../imports"
+import "."
 
 Item {
     property alias textField: inputValue
@@ -16,6 +17,7 @@ Item {
     property url icon: ""
     property int iconHeight: 24
     property int iconWidth: 24
+    property bool copyToClipboard: false
 
     readonly property bool hasIcon: icon.toString() !== ""
     readonly property var forceActiveFocus: function () {
@@ -90,6 +92,46 @@ Item {
             fillMode: Image.PreserveAspectFit
             source: inputBox.icon
         }
+
+        Loader {
+            active: inputBox.copyToClipboard
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: parent.right
+            anchors.rightMargin: 8
+            sourceComponent: copyToClipboardComponent
+        }
+
+        Component {
+            id: copyToClipboardComponent
+
+            Item {
+                width: copyBtn.width
+                height: copyBtn.height
+
+                Timer {
+                    id: timer
+                }
+
+                StyledButton {
+                    id: copyBtn
+                    label: qsTr("Copy")
+                    height: 28
+                    textSize: 12
+                    btnBorderColor: Style.current.blue
+                    btnBorderWidth: 1
+                    onClicked: {
+                        chatsModel.copyToClipboard(inputValue.text)
+                        copyBtn.label = qsTr("Copied")
+                        timer.setTimeout(function(){
+                            copyBtn.label = qsTr("Copy")
+                        }, 2000);
+                    }
+                }
+            }
+
+        }
+
+
     }
 
     TextEdit {

ui/shared/StyledButton.qml

@@ -9,6 +9,7 @@ Button {
     property color btnBorderColor: "transparent"
     property int btnBorderWidth: 0
     property color textColor: Style.current.blue
+    property int textSize: 15
     property bool disabled: false
 
     id: btnStyled
@@ -17,7 +18,8 @@ Button {
     enabled: !disabled
 
     background: Rectangle {
-        color: disabled ? Style.current.grey : btnStyled.btnColor
+        color: disabled ? Style.current.grey :
+                          hovered ? Qt.darker(btnStyled.btnColor, 1.1) : btnStyled.btnColor
         radius: Style.current.radius
         anchors.fill: parent
         border.color: btnBorderColor
@@ -27,7 +29,7 @@ Button {
     StyledText {
         id: txtBtnLabel
         color: btnStyled.disabled ? Style.current.darkGrey : btnStyled.textColor
-        font.pixelSize: 15
+        font.pixelSize: btnStyled.textSize
         anchors.verticalCenter: parent.verticalCenter
         anchors.horizontalCenter: parent.horizontalCenter
         text: btnStyled.label

ui/shared/qmldir

@@ -20,3 +20,4 @@ NotificationWindow 1.0 NotificationWindow.qml
 BlockContactConfirmationDialog 1.0 BlockContactConfirmationDialog.qml
 ConfirmationDialog 1.0 ConfirmationDialog.qml
 StatusSlider 1.0 StatusSlider.qml
+Timer 1.0 Timer.qml