Skip to content

Commit

Permalink
feat(Post Onboarding): Introduce yourself popup
Browse files Browse the repository at this point in the history
- 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
  • Loading branch information
caybro committed Jan 10, 2025
1 parent 06d5499 commit 5842678
Show file tree
Hide file tree
Showing 7 changed files with 185 additions and 2 deletions.
22 changes: 22 additions & 0 deletions storybook/pages/IntroduceYourselfPopupPage.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import QtQuick 2.15
import QtQuick.Controls 2.15

import Storybook 1.0

import shared.popups 1.0

Item {
IntroduceYourselfPopup {
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
1 change: 1 addition & 0 deletions ui/StatusQ/src/assets.qrc
Original file line number Diff line number Diff line change
Expand Up @@ -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/[email protected]</file>
<file>assets/png/onboarding/[email protected]</file>
<file>assets/png/onboarding/keys.png</file>
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions ui/app/AppLayouts/stores/FeatureFlagsStore.qml
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,5 @@ QtObject {
property bool sendViaPersonalChatEnabled
property bool paymentRequestEnabled
property bool simpleSendEnabled
property bool onboardingV2Enabled
}
29 changes: 27 additions & 2 deletions ui/app/mainui/AppMain.qml
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ Item {
sendViaPersonalChatEnabled: featureFlags ? featureFlags.sendViaPersonalChatEnabled : false
paymentRequestEnabled: featureFlags ? featureFlags.paymentRequestEnabled : false
simpleSendEnabled: featureFlags ? featureFlags.simpleSendEnabled : false
onboardingV2Enabled: featureFlags ? featureFlags.onboardingV2Enabled : false
}
// TODO: Only until the old send modal transaction store can be replaced with this one
readonly property WalletStores.TransactionStoreNew transactionStoreNew: WalletStores.TransactionStoreNew {}
Expand Down Expand Up @@ -596,6 +597,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")
Expand All @@ -610,6 +616,7 @@ Item {
Settings {
id: appMainLocalSettings
property var whitelistedUnfurledDomains: []
property bool introduceYourselfPopupSeen
}

Popups {
Expand Down Expand Up @@ -1578,6 +1585,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
Expand Down Expand Up @@ -1715,8 +1728,7 @@ Item {

onDappPairRequested: dAppsServiceLoader.dappPairRequested()
onDappDisconnectRequested: (dappUrl) => dAppsServiceLoader.dappDisconnectRequested(dappUrl)
onSendTokenRequested: sendModalHandler.sendToken(
senderAddress, tokenId, tokenType)
onSendTokenRequested: sendModalHandler.sendToken(senderAddress, tokenId, tokenType)
onBridgeTokenRequested: sendModalHandler.bridgeToken(tokenId, tokenType)
}
onLoaded: {
Expand Down Expand Up @@ -2367,6 +2379,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
Expand Down
133 changes: 133 additions & 0 deletions ui/imports/shared/popups/IntroduceYourselfPopup.qml
Original file line number Diff line number Diff line change
@@ -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()
}
}
}
}
1 change: 1 addition & 0 deletions ui/imports/shared/popups/qmldir
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 5842678

Please sign in to comment.