feat(@desktop/wallet2): Added Share Modal

Added new popup to share wallet account details
To-do's:
1. Rounded corners in the QR code
2. Emoji's for the account

fixes #3304

ui/StatusQ

@@ -1 +1 @@
-Subproject commit 4a6800ed77c272cec02abcd8734dc28c23831e42
+Subproject commit 3a72c3766af2cb4b52bc2bf2e0867abc62dc0d65

ui/app/AppLayouts/WalletV2/ShareModal.qml

@@ -0,0 +1,137 @@
+import QtQuick 2.13
+
+import StatusQ.Core 0.1
+import StatusQ.Popups 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Core.Theme 0.1
+
+import "../../../shared"
+
+StatusModal {
+    id: shareModal
+
+    QtObject {
+        id: internal
+        property var selectedAccount: walletV2Model.accountsView.currentAccount
+    }
+
+    anchors.centerIn: parent
+    implicitWidth: 454
+    implicitHeight: 568
+
+    // To-do Icon in header needs to be updated once emoji picker is ready
+    header.title: internal.selectedAccount.name
+    header.subTitle: qsTr("Basic address")
+    header.popupMenu: StatusPopupMenu {
+        id: accountPickerPopUp
+        Repeater {
+            id: repeaster
+            model: walletV2Model.accountsView.accounts
+            delegate: Loader {
+                sourceComponent: accountPickerPopUp.delegate
+                onLoaded: {
+                    item.action.text = model.name
+                    // To-do this and Icon in header needs to be updated once emoji picker is ready
+                    item.action.iconSettings.name = "filled-account"
+                }
+                Connections {
+                    enabled: !!item.action
+                    target: item.action
+                    onTriggered: {
+                        internal.selectedAccount = { address, name, iconColor, fiatBalance }
+                        accountPickerPopUp.dismiss()
+                    }
+                }
+            }
+        }
+    }
+
+    Image {
+        id: qrCodeImage
+        width: 273
+        height: 270
+        anchors.top: parent.top
+        anchors.topMargin: 24
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        asynchronous: true
+        fillMode: Image.PreserveAspectFit
+        mipmap: true
+        smooth: false
+        source: profileModel.qrCode(internal.selectedAccount.address)
+        StatusIcon {
+            width: 66
+            height: 66
+            anchors.centerIn: parent
+            icon: "snt"
+        }
+    }
+
+    Column {
+        id: addressColumn
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: qrCodeImage.bottom
+        anchors.topMargin: 25
+
+        spacing: 8
+        StyledText {
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: qsTr("Your wallet address")
+            color: Theme.palette.directColor4
+            font.pixelSize: 13
+            font.weight: Font.Medium
+            lineHeight: 18
+            lineHeightMode: Text.FixedHeight
+        }
+
+        StyledText {
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: internal.selectedAccount.address
+            color: Theme.palette.directColor1
+            font.pixelSize: 13
+            font.weight: Font.Medium
+            lineHeight: 18
+            lineHeightMode: Text.FixedHeight
+        }
+    }
+
+    Row  {
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: addressColumn.bottom
+        anchors.topMargin: 25
+
+        spacing: 20
+
+        Repeater {
+            model: 2
+            Column {
+                spacing: 5
+                StatusRoundButton {
+                    anchors.horizontalCenter: parent.horizontalCenter
+
+                    icon.name: index === 0 ? "copy" : "link"
+                    onClicked: {
+                        if (index === 0) {
+                            if (internal.selectedAccount.address) {
+                                chatsModel.copyToClipboard(internal.selectedAccount.address)
+                            }
+                            else {
+                                // To-do Get link functionality
+                            }
+                        }
+                    }
+                }
+                StyledText {
+                    anchors.horizontalCenter: parent.horizontalCenter
+
+                    text: index === 0 ? qsTr("Copy") : qsTr("Get link")
+                    color: Theme.palette.primaryColor1
+                    font.pixelSize: 13
+                    font.weight: Font.Medium
+                    lineHeight: 18
+                    lineHeightMode: Text.FixedHeight
+                }
+            }
+        }
+    }
+}

ui/app/AppLayouts/WalletV2/WalletHeader.qml

@@ -21,43 +21,54 @@ Item {
     Layout.fillHeight: true
     Layout.fillWidth: true
 
-    StyledText {
+    Row {
-        id: title
+        id: accountRow
-        text: currentAccount.name
         anchors.top: parent.top
         anchors.topMargin: 56
         anchors.left: parent.left
         anchors.leftMargin: 24
-        font.weight: Font.Medium
+
-        font.pixelSize: 28
+        spacing: 8
+
+        StyledText {
+            id: title
+            anchors.verticalCenter: parent.verticalCenter
+            text: currentAccount.name
+            font.weight: Font.Medium
+            font.pixelSize: 28
+        }
+
+        Rectangle {
+            id: separatorDot
+            width: 8
+            height: 8
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.verticalCenterOffset: 1
+            color: Style.current.primary
+            radius: 50
+        }
+
+        StyledText {
+            id: walletBalance
+            anchors.verticalCenter: parent.verticalCenter
+            text: currentAccount.balance.toUpperCase()
+            font.pixelSize: 22
+        }
     }
 
-    Rectangle {
+    MouseArea {
-        id: separatorDot
+        anchors.fill: accountRow
-        width: 8
+        cursorShape: Qt.PointingHandCursor
-        height: 8
+        onClicked: {
-        color: Style.current.primary
+            openPopup(shareModalComponent);
-        anchors.top: title.verticalCenter
+        }
-        anchors.topMargin: -3
-        anchors.left: title.right
-        anchors.leftMargin: 8
-        radius: 50
-    }
-
-    StyledText {
-        id: walletBalance
-        text: currentAccount.balance.toUpperCase()
-        anchors.left: separatorDot.right
-        anchors.leftMargin: 8
-        anchors.verticalCenter: title.verticalCenter
-        font.pixelSize: 22
     }
 
     StatusExpandableAddress {
         id: walletAddress
         address: currentAccount.address
-        anchors.top: title.bottom
+        anchors.top: accountRow.bottom
-        anchors.left: title.left
+        anchors.left: accountRow.left
         addressWidth: 180
         anchors.leftMargin: 0
         anchors.topMargin: 0
@@ -140,6 +151,15 @@ Item {
             }
         }
     }
+
+    Component {
+        id: shareModalComponent
+        ShareModal {
+            onClosed: {
+                destroy();
+            }
+        }
+    }
 }
 
 /*##^##