diff --git a/storybook/pages/IntroduceYourselfPopupPage.qml b/storybook/pages/IntroduceYourselfPopupPage.qml
new file mode 100644
index 0000000000..8d186bd91a
--- /dev/null
+++ b/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
diff --git a/ui/StatusQ/src/assets.qrc b/ui/StatusQ/src/assets.qrc
index 669bc78b74..0ba6afb26e 100644
--- a/ui/StatusQ/src/assets.qrc
+++ b/ui/StatusQ/src/assets.qrc
@@ -8332,6 +8332,7 @@
assets/png/keycard/warning/img-53.png
assets/png/keycard/warning/img-54.png
assets/png/keycard/warning/img-55.png
+ assets/png/onboarding/avatar.png
assets/png/onboarding/fingerprint@2x.png
assets/png/onboarding/fingerprint@3x.png
assets/png/onboarding/keys.png
diff --git a/ui/StatusQ/src/assets/png/onboarding/avatar.png b/ui/StatusQ/src/assets/png/onboarding/avatar.png
new file mode 100644
index 0000000000..fc3a0ee720
Binary files /dev/null and b/ui/StatusQ/src/assets/png/onboarding/avatar.png differ
diff --git a/ui/app/mainui/AppMain.qml b/ui/app/mainui/AppMain.qml
index 6957e9867a..fdf219affd 100644
--- a/ui/app/mainui/AppMain.qml
+++ b/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
diff --git a/ui/imports/shared/popups/IntroduceYourselfPopup.qml b/ui/imports/shared/popups/IntroduceYourselfPopup.qml
new file mode 100644
index 0000000000..cbdf7f1027
--- /dev/null
+++ b/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()
+ }
+ }
+ }
+}
diff --git a/ui/imports/shared/popups/qmldir b/ui/imports/shared/popups/qmldir
index 2fcddc7773..86ea37f965 100644
--- a/ui/imports/shared/popups/qmldir
+++ b/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