feat(profile): Place user image/identicon onto the QR code

- fix the QR code to generate a URL with the link to the profile instead
of just the user key
- reuse the `UserImage` component and place it on top of the existing QR
code
- put a white rectangle behind the QR code image and white ring around
the user image

Fixes #13482

storybook/pages/ProfileDialogViewPage.qml

@@ -29,7 +29,7 @@ SplitView {
 
         function getCompressedPk(publicKey) { return "zx3sh" + publicKey }
 
-        function getColorHashAsJson(publicKey) {
+        function getColorHashAsJson(publicKey, skipEnsVerification=false) {
             return JSON.stringify([{colorId: 0, segmentLength: 1},
                                    {colorId: 19, segmentLength: 2}])
         }
@@ -61,6 +61,10 @@ SplitView {
 
     // mainModuleInst mock
     QtObject {
+        function isEnsVerified(publicKey) {
+            return ensVerified.checked
+        }
+
         function getContactDetailsAsJson(publicKey, getVerificationRequest=true, getOnlineStatus=false, includeDetails=false) {
             return JSON.stringify({ displayName: displayName.text,
                                       optionalName: "",

ui/app/AppLayouts/Profile/stores/ProfileStore.qml

@@ -52,8 +52,8 @@ QtObject {
         return root.profileModule.remove()
     }
 
-    function getQrCodeSource(publicKey) {
+    function getQrCodeSource(text) {
-        return globalUtils.qrCode(publicKey)
+        return globalUtils.qrCode(text)
     }
 
     function copyToClipboard(value) {

ui/imports/shared/views/ProfileDialogView.qml

@@ -269,8 +269,10 @@ Pane {
             destroyOnClose: true
             title: d.isCurrentUser ? qsTr("Share your profile") : qsTr("%1's profile").arg(d.mainDisplayName)
             publicKey: root.publicKey
-            qrCode: root.profileStore.getQrCodeSource(Utils.getCompressedPk(root.publicKey))
             linkToProfile: d.linkToProfile
+            qrCode: root.profileStore.getQrCodeSource(linkToProfile)
+            displayName: userImage.name
+            largeImage: userImage.image
         }
     }
 
@@ -288,6 +290,7 @@ Pane {
             spacing: Style.current.halfPadding
 
             UserImage {
+                id: userImage
                 Layout.alignment: Qt.AlignTop
                 objectName: "ProfileDialog_userImage"
                 name: root.dirty ? root.dirtyValues.displayName

ui/imports/shared/views/profile/ShareProfileDialog.qml

@@ -10,6 +10,7 @@ import StatusQ.Popups.Dialog 0.1
 import utils 1.0
 import shared.controls 1.0
 import shared.views.chat 1.0
+import shared.controls.chat 1.0
 
 StatusDialog {
     id: root
@@ -18,6 +19,9 @@ StatusDialog {
     required property string qrCode
     required property string linkToProfile
 
+    required property string displayName
+    required property string largeImage
+
     footer: null
 
     width: 500
@@ -29,26 +33,44 @@ StatusDialog {
     contentItem: ColumnLayout {
         spacing: Style.current.halfPadding
 
-        Image {
+        Rectangle {
-            Layout.preferredWidth: 290
+            Layout.fillWidth: true
-            Layout.preferredHeight: 290
+            Layout.preferredHeight: width
-            Layout.alignment: Qt.AlignHCenter
+            color: Theme.palette.white
-            asynchronous: true
-            fillMode: Image.PreserveAspectFit
-            mipmap: true
-            smooth: false
-            source: root.qrCode
 
-            MouseArea {
+            Image {
                 anchors.fill: parent
-                acceptedButtons: Qt.RightButton
+                asynchronous: true
-                cursorShape: Qt.PointingHandCursor
+                fillMode: Image.PreserveAspectFit
-                onClicked: qrContextMenu.popup()
+                mipmap: true
-            }
+                smooth: false
+                source: root.qrCode
 
-            ImageContextMenu {
+                UserImage {
-                id: qrContextMenu
+                    anchors.centerIn: parent
-                imageSource: root.qrCode
+                    name: root.displayName
+                    pubkey: root.publicKey
+                    image: root.largeImage
+                    interactive: false
+                    imageWidth: 78
+                    imageHeight: 78
+
+                    // show a hardcoded white ring
+                    showRing: true
+                    colorHash: JSON.stringify([{colorId: 4, segmentLength: 32}])
+                }
+
+                MouseArea {
+                    anchors.fill: parent
+                    acceptedButtons: Qt.RightButton
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: qrContextMenu.popup()
+                }
+
+                ImageContextMenu {
+                    id: qrContextMenu
+                    imageSource: root.qrCode
+                }
             }
         }