fix(SendContactRequestModal): Display name / image problems with CR dialog

- fix missing profile image
- fix displaying wrong name when a nickname or ENS name is present
- fix ID verification flow ignoring nickname
- fix empty results when a contact has only an alias name
- fix needlessly requesting contact details several times (and
overwriting it); we get this info already from Popups.qml
- switch the popup to `StatusDialog` and fix hardcoded height

Fixes #11726

ui/StatusQ/src/StatusQ/Core/StatusBaseText.qml

@@ -27,6 +27,7 @@ import StatusQ.Core.Theme 0.1
 
 Text {
     font.family: Theme.palette.baseFont.name
+    font.pixelSize: Theme.primaryTextFontSize
     color: Theme.palette.directColor1
     linkColor: hoveredLink ? Qt.lighter(Theme.palette.primaryColor1)
                            : Theme.palette.primaryColor1

ui/app/AppLayouts/Profile/views/ContactsView.qml

@@ -315,6 +315,7 @@ SettingsContentBase {
             id: sendContactRequest
             SendContactRequestModal {
                 contactsStore: root.contactsStore
+                onClosed: destroy()
             }
         }
     }

ui/app/mainui/Popups.qml

@@ -142,13 +142,12 @@ QtObject {
 
     function openSendIDRequestPopup(publicKey, cb) {
         const contactDetails = Utils.getContactDetailsAsJson(publicKey, false)
+        const mainDisplayName = ProfileUtils.displayName(contactDetails.localNickname, contactDetails.name, contactDetails.displayName, contactDetails.alias)
         openPopup(sendIDRequestPopupComponent, {
             userPublicKey: publicKey,
-            userDisplayName: contactDetails.displayName,
+            contactDetails: contactDetails,
-            userIcon: contactDetails.largeImage,
+            title: qsTr("Verify %1's Identity").arg(mainDisplayName),
-            userIsEnsVerified: contactDetails.ensVerified,
+            challengeText: qsTr("Ask a question that only the real %1 will be able to answer e.g. a question about a shared experience, or ask %1 to enter a code or phrase you have sent to them via a different communication channel (phone, post, etc...).").arg(mainDisplayName),
-            "headerSettings.title": qsTr("Verify %1's Identity").arg(contactDetails.displayName),
-            challengeText: qsTr("Ask a question that only the real %1 will be able to answer e.g. a question about a shared experience, or ask %1 to enter a code or phrase you have sent to them via a different communication channel (phone, post, etc...).").arg(contactDetails.displayName),
             buttonText: qsTr("Send verification request")
         }, cb)
     }
@@ -189,9 +188,7 @@ QtObject {
         const contactDetails = Utils.getContactDetailsAsJson(publicKey, false)
         const popupProperties = {
             userPublicKey: publicKey,
-            userDisplayName: contactDetails.displayName,
+            contactDetails: contactDetails
-            userIcon: contactDetails.largeImage,
-            userIsEnsVerified: contactDetails.ensVerified
         }
 
         openPopup(sendContactRequestPopupComponent, popupProperties, cb)
@@ -200,7 +197,7 @@ QtObject {
     function openContactRequestPopupWithContactData(contactData, cb) {
         const popupProperties = {
             userPublicKey: contactData.publicKey,
-            userDisplayName: contactData.displayName
+            contactDetails: { displayName: contactData.displayName }
         }
         openPopup(sendContactRequestPopupComponent, popupProperties, cb)
     }

ui/imports/shared/popups/SendContactRequestModal.qml

@@ -1,6 +1,7 @@
-import QtQuick 2.14
+import QtQuick 2.15
-import QtQuick.Controls 2.14
+import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.14
+import QtQuick.Layouts 1.15
+import QtQml.Models 2.15
 
 import utils 1.0
 import shared.controls.chat 1.0
@@ -9,17 +10,15 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Controls.Validators 0.1
-import StatusQ.Popups 0.1
+import StatusQ.Popups.Dialog 0.1
 
-StatusModal {
+StatusDialog {
     id: root
 
     property var rootStore
 
-    property string userPublicKey: ""
+    required property string userPublicKey
-    property string userDisplayName: ""
+    required property var contactDetails
-    property string userIcon: ""
-    property bool userIsEnsVerified
 
     property string challengeText: qsTr("Say who you are / why you want to become a contact...")
     property string buttonText: qsTr("Send Contact Request")
@@ -27,31 +26,19 @@ StatusModal {
     signal accepted(string message)
 
     width: 480
-    height: 548
+    horizontalPadding: Style.current.padding
+    verticalPadding: Style.current.bigPadding
 
-    headerSettings.title: d.loadingContactDetails ? qsTr("Send Contact Request")
+    title: qsTr("Send Contact Request to %1").arg(d.mainDisplayName)
-                                          : qsTr("Send Contact Request to %1").arg(d.userDisplayName)
 
     onAboutToShow: {
         messageInput.input.edit.forceActiveFocus()
 
-        if (userDisplayName !== "" && userPublicKey !== "") {
+        // (request) update from mailserver
-            d.updateContactDetails({
+        if (d.userDisplayName === "") {
-                                       displayName: userDisplayName,
+            root.rootStore.contactStore.requestContactInfo(root.userPublicKey)
-                                       largeImage: "",
+            d.loadingContactDetails = true
-                                       userIsEnsVerified: false
-                                   })
         }
-
-        const contactDetails = Utils.getContactDetailsAsJson(userPublicKey, false)
-
-        if (contactDetails.displayName !== "") {
-            d.updateContactDetails(contactDetails)
-            return
-        }
-
-        root.rootStore.contactStore.requestContactInfo(root.userPublicKey)
-        d.loadingContactDetails = true
     }
 
     QtObject {
@@ -64,47 +51,39 @@ StatusModal {
 
         property bool loadingContactDetails: false
 
-        property string userDisplayName: ""
+        property var contactDetails: root.contactDetails
-        property string userIcon: ""
-        property bool userIsEnsVerified
 
-        function updateContactDetails(contactDetails) {
+        readonly property bool userIsEnsVerified: contactDetails.ensVerified
-            d.userDisplayName = contactDetails.displayName
+        readonly property string userDisplayName: contactDetails.displayName
-            d.userIcon = contactDetails.largeImage
+        readonly property string userNickName: contactDetails.localNickname
-            d.userIsEnsVerified = contactDetails.ensVerified
+        readonly property string prettyEnsName: contactDetails.name
-        }
+        readonly property string aliasName: contactDetails.alias
+        readonly property string mainDisplayName: ProfileUtils.displayName(userNickName, prettyEnsName, userDisplayName, aliasName)
+        readonly property var userIcon: contactDetails.largeImage
     }
 
     Connections {
         target: root.rootStore.contactStore.contactsModule
 
         function onContactInfoRequestFinished(publicKey, ok) {
-            if (ok) {
+            if (ok && publicKey === root.userPublicKey) {
-                const details = Utils.getContactDetailsAsJson(userPublicKey, false)
+                d.contactDetails = Utils.getContactDetailsAsJson(userPublicKey, false)
-                d.updateContactDetails(details)
             }
             d.loadingContactDetails = false
         }
     }
 
-    ColumnLayout {
+    contentItem: ColumnLayout {
-        id: content
-        anchors.fill: parent
-        anchors.topMargin: Style.current.bigPadding
-        anchors.leftMargin: Style.current.padding
-        anchors.rightMargin: Style.current.padding
         spacing: d.contentSpacing
 
         ProfileHeader {
             Layout.fillWidth: true
-
+            displayName: d.mainDisplayName
-            displayName: d.userDisplayName
             pubkey: root.userPublicKey
             icon: d.userIcon
             userIsEnsVerified: d.userIsEnsVerified
-
+            isContact: d.contactDetails.isContact
-            displayNameVisible: true
+            trustStatus: d.contactDetails.trustStatus
-            pubkeyVisible: true
             imageSize: ProfileHeader.ImageSize.Middle
             loading: d.loadingContactDetails
         }
@@ -126,13 +105,17 @@ StatusModal {
         }
     }
 
-    rightButtons: StatusButton {
+    footer: StatusDialogFooter {
-        objectName: "ProfileSendContactRequestModal_sendContactRequestButton"
+        rightButtons: ObjectModel {
-        enabled: messageInput.valid
+            StatusButton {
-        text: root.buttonText
+                objectName: "ProfileSendContactRequestModal_sendContactRequestButton"
-        onClicked: {
+                enabled: messageInput.valid
-            root.accepted(messageInput.text);
+                text: root.buttonText
-            root.close();
+                onClicked: {
+                    root.accepted(messageInput.text);
+                    root.close();
+                }
+            }
         }
     }
 }