feat(Post Onboarding): Introduce yourself popup

- popup displayed only ever once
- triggered when section is switched to anything else than wallet
(default for new users) or settings (profile visible first anyway)
- add the popup to SB

Fixes #17027

storybook/pages/IntroduceYourselfPopupPage.qml

@@ -0,0 +1,29 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+import Storybook 1.0
+
+import shared.popups 1.0
+
+Item {
+    Button {
+        anchors.centerIn: parent
+        text: "Reopen"
+        onClicked: popup.open()
+    }
+
+    IntroduceYourselfPopup {
+        id: popup
+        visible: true
+        closePolicy: Popup.NoAutoClose
+
+        pubKey: "zQ3shW234234EA4545545rhf"
+        colorId: 0
+        colorHash: [{colorId: 9, segmentLength: 1}, {colorId: 7, segmentLength: 3}, {colorId: 10, segmentLength: 2}]
+        onAccepted: console.warn("onAccepted")
+        onClosed: console.warn("onClosed")
+    }
+}
+
+// category: Popups
+// status: good

ui/StatusQ/src/assets.qrc

@@ -8332,6 +8332,7 @@
         <file>assets/png/keycard/warning/img-53.png</file>
         <file>assets/png/keycard/warning/img-54.png</file>
         <file>assets/png/keycard/warning/img-55.png</file>
+        <file>assets/png/onboarding/avatar.png</file>
         <file>assets/png/onboarding/fingerprint@2x.png</file>
         <file>assets/png/onboarding/fingerprint@3x.png</file>
         <file>assets/png/onboarding/keys.png</file>

ui/app/mainui/AppMain.qml

@@ -789,6 +789,11 @@ Item {
             }
         }
 
+        function maybeDisplayIntroduceYourselfPopup() {
+            if (!appMainLocalSettings.introduceYourselfPopupSeen && featureFlagsStore.onboardingV2Enabled)
+                introduceYourselfPopupComponent.createObject(appMain).open()
+        }
+
         function ensName(username) {
             if (!username.endsWith(".stateofus.eth") && !username.endsWith(".eth")) {
                 return "%1.%2".arg(username).arg("stateofus.eth")
@@ -803,6 +808,7 @@ Item {
     Settings {
         id: appMainLocalSettings
         property var whitelistedUnfurledDomains: []
+        property bool introduceYourselfPopupSeen
     }
 
     Popups {
@@ -1791,6 +1797,12 @@ Item {
                         // We should never end up here
                         console.error("AppMain: Unknown section type")
                     }
+                    onCurrentIndexChanged: {
+                        const sectionType = appMain.rootStore.mainModuleInst.activeSection.sectionType
+                        if (sectionType !== Constants.appSection.profile && sectionType !== Constants.appSection.wallet) {
+                            d.maybeDisplayIntroduceYourselfPopup()
+                        }
+                    }
 
                     // NOTE:
                     // If we ever change stack layout component order we need to updade
@@ -1933,8 +1945,7 @@ Item {
                                 dappMetrics.logNavigationEvent(DAppsMetrics.DAppsNavigationAction.DAppDisconnectInitiated)
                                 dAppsServiceLoader.dappDisconnectRequested(dappUrl)
                             }
-			                onSendTokenRequested: sendModalHandler.sendToken(
-                                                      senderAddress, tokenId, tokenType)
+			                onSendTokenRequested: sendModalHandler.sendToken(senderAddress, tokenId, tokenType)
                             onBridgeTokenRequested: sendModalHandler.bridgeToken(tokenId, tokenType)
                         }
                         onLoaded: {
@@ -2586,6 +2597,19 @@ Item {
         }
     }
 
+    Component {
+        id: introduceYourselfPopupComponent
+        IntroduceYourselfPopup {
+            visible: true
+            destroyOnClose: true
+            pubKey: appMain.profileStore.compressedPubKey
+            colorId: appMain.profileStore.colorId
+            colorHash: appMain.profileStore.colorHash
+            onClosed: appMainLocalSettings.introduceYourselfPopupSeen = true
+            onAccepted: Global.changeAppSectionBySectionType(Constants.appSection.profile)
+        }
+    }
+
     Loader {
         id: userAgreementLoader
         active: production && !localAppSettings.testEnvironment

ui/imports/shared/popups/IntroduceYourselfPopup.qml

@@ -0,0 +1,133 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQml.Models 2.15
+
+import StatusQ 0.1
+import StatusQ.Core 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Popups.Dialog 0.1
+
+import utils 1.0
+import shared.controls.chat 1.0
+
+StatusDialog {
+    id: root
+
+    required property string pubKey
+    required property int colorId
+    required property var colorHash
+
+    width: 480
+    padding: Theme.smallPadding*2
+    topPadding: Theme.xlPadding
+
+    title: qsTr("Introduce yourself")
+
+    contentItem: ColumnLayout {
+        spacing: Theme.xlPadding
+        RowLayout {
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignHCenter
+            spacing: 12
+
+            Rectangle {
+                Layout.preferredWidth: layout1.implicitWidth + layout1.anchors.margins * 2
+                Layout.preferredHeight: layout1.implicitHeight + layout1.anchors.topMargin + layout1.anchors.bottomMargin
+                color: "transparent"
+                border.width: 1
+                border.color: Theme.palette.baseColor2
+                radius: 16
+
+                ColumnLayout {
+                    id: layout1
+                    anchors.fill: parent
+                    anchors.margins: 20
+                    anchors.bottomMargin: Theme.padding
+
+                    UserImage {
+                        Layout.preferredWidth: 72
+                        Layout.preferredHeight: 72
+                        Layout.alignment: Qt.AlignHCenter
+
+                        name: root.pubKey
+                        colorId: root.colorId
+                        imageWidth: 68
+                        imageHeight: 68
+                        colorHash: root.colorHash
+                        interactive: false
+                    }
+                    StatusBaseText {
+                        Layout.fillWidth: true
+                        horizontalAlignment: Text.AlignHCenter
+                        font.pixelSize: Theme.additionalTextSize
+                        text: Utils.getElidedPk(root.pubKey)
+                    }
+                }
+            }
+
+            StatusIcon {
+                icon: "arrow-right"
+                color: Theme.palette.baseColor1
+            }
+
+            Rectangle {
+                Layout.preferredWidth: layout2.implicitWidth + layout2.anchors.margins * 2
+                Layout.preferredHeight: layout2.implicitHeight + layout2.anchors.topMargin + layout2.anchors.bottomMargin
+                color: "transparent"
+                border.width: 1
+                border.color: Theme.palette.baseColor2
+                radius: 16
+
+                ColumnLayout {
+                    id: layout2
+                    anchors.fill: parent
+                    anchors.margins: 20
+                    anchors.bottomMargin: Theme.padding
+
+                    UserImage {
+                        Layout.preferredWidth: 72
+                        Layout.preferredHeight: 72
+                        Layout.alignment: Qt.AlignHCenter
+
+                        name: root.pubKey
+                        image: Theme.png("onboarding/avatar")
+                        colorId: root.colorId
+                        imageWidth: 68
+                        imageHeight: 68
+                        colorHash: root.colorHash
+                        interactive: false
+                    }
+                    StatusBaseText {
+                        Layout.fillWidth: true
+                        horizontalAlignment: Text.AlignHCenter
+                        font.pixelSize: Theme.additionalTextSize
+                        text: qsTr("Your Name")
+                    }
+                }
+            }
+        }
+        StatusBaseText {
+            Layout.fillWidth: true
+            wrapMode: Text.Wrap
+            text: qsTr("Add an optional display name and profile picture so others can easily recognise you.")
+        }
+    }
+
+    footer: StatusDialogFooter {
+        spacing: Theme.padding
+        rightButtons: ObjectModel {
+            StatusFlatButton {
+                text: qsTr("Skip")
+                onClicked: root.close()
+            }
+            StatusButton {
+                icon.name: "settings"
+                text: qsTr("Edit Profile in Settings")
+                onClicked: root.accept()
+            }
+        }
+    }
+}

ui/imports/shared/popups/qmldir

@@ -14,6 +14,7 @@ ImageContextMenu 1.0 ImageContextMenu.qml
 ImageCropWorkflow 1.0 ImageCropWorkflow.qml
 ImportCommunityPopup 1.0 ImportCommunityPopup.qml
 InviteFriendsPopup 1.0 InviteFriendsPopup.qml
+IntroduceYourselfPopup 1.0 IntroduceYourselfPopup.qml
 MarkAsIDVerifiedDialog 1.0 MarkAsIDVerifiedDialog.qml
 MarkAsUntrustedPopup 1.0 MarkAsUntrustedPopup.qml
 MetricsEnablePopup 1.0 MetricsEnablePopup.qml