feat(AC-CommunityTokenReceived): Added UI for community tokens received

- Added UI support for first community token received (asset or collectible).
- Added UI support for any community token received (asset or collectible).
- TODO: Storybook support

Fixes #12515
This commit is contained in:
Noelia 2024-01-29 14:29:15 +01:00 committed by Noelia
parent 498a81e6b7
commit f2db89573f
3 changed files with 77 additions and 34 deletions

View File

@ -130,6 +130,7 @@ Popup {
case ActivityCenterStore.ActivityCenterNotificationType.NewKeypairAddedToPairedDevice:
return newKeypairFromPairedDeviceComponent
case ActivityCenterStore.ActivityCenterNotificationType.CommunityTokenReceived:
case ActivityCenterStore.ActivityCenterNotificationType.FirstCommunityTokenReceived:
return communityTokenReceivedComponent
case ActivityCenterStore.ActivityCenterNotificationType.OwnerTokenReceived:
case ActivityCenterStore.ActivityCenterNotificationType.OwnershipReceived:
@ -287,14 +288,12 @@ Popup {
readonly property var community : notification ? root.store.getCommunityDetailsAsJson(notification.communityId) : null
communityId: notification.communityId
communityName: community ? community.name : ""
communityColor: community ? community.color : "black"
communityImage: community ? community.image : ""
filteredIndex: parent.filteredIndex
notification: parent.notification
store: root.store
activityCenterStore: root.activityCenterStore
onCloseActivityCenter: root.close()
}
}

View File

@ -37,7 +37,8 @@ QtObject {
OwnershipFailed = 16,
OwnershipDeclined = 17,
ShareAccounts = 18,
CommunityTokenReceived = 19
CommunityTokenReceived = 19,
FirstCommunityTokenReceived = 20
}
enum ActivityCenterReadType {

View File

@ -6,65 +6,108 @@ import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
import shared 1.0
import shared.panels 1.0
import utils 1.0
import "../panels"
import "../popups"
import "../stores"
import AppLayouts.Wallet 1.0
ActivityNotificationBase {
id: root
// Community properties:
required property string communityId
required property string communityName
required property string communityImage
required property string communityColor
// Notification type related properties:
property bool isFirstTokenReceived: root.notification.isFirstTokenReceived
property bool isAssetType: root.notification.tokenType === Constants.TokenType.ERC20
// Token related properties:
property string tokenAmount: root.notification.tokenAmount
property string tokenName: root.notification.tokenName
property string tokenSymbol: root.notification.tokenSymbol
property string tokenImage: root.notification.tokenImage
// Wallet related:
property string walletAccountName: root.notification.walletAccountName
property string txHash: root.notification.txHash
QtObject {
id: d
readonly property string formattedTokenName: root.isAssetType ? root.tokenSymbol : root.tokenName
readonly property string ctaText: root.isFirstTokenReceived ? qsTr("Learn more") : qsTr("Transaction details")
readonly property string title: root.isFirstTokenReceived ? (root.isAssetType ? qsTr("You received your first community asset") : qsTr("You received your first community collectible")) :
qsTr("Tokens received")
readonly property string info: root.isFirstTokenReceived ? qsTr("%1 %2 was airdropped to you from the %3 community").arg(root.tokenAmount).arg(d.formattedTokenName).arg(root.communityName) :
qsTr("You were airdropped %1 %2 from %3 to %4").arg(root.tokenAmount).arg(root.tokenName).arg(root.communityName).arg(root.walletAccountName)
}
bodyComponent: RowLayout {
spacing: 8
StatusSmartIdenticon {
name: root.communityName
Layout.preferredWidth: 40
Layout.preferredHeight: 40
StatusRoundedImage {
Layout.preferredWidth: 44
Layout.preferredHeight: 44
Layout.alignment: Qt.AlignTop
Layout.leftMargin: Style.current.padding
Layout.topMargin: 2
asset {
width: 24
height: width
name: root.communityImage
color: root.communityColor
bgWidth: 40
bgHeight: 40
}
radius: root.isAssetType ? width / 2 : 8
width: 44
height: width
image.source: root.tokenImage
showLoadingIndicator: false
image.fillMode: Image.PreserveAspectCrop
}
ColumnLayout {
spacing: 2
Layout.alignment: Qt.AlignTop
Layout.fillWidth: true
StatusMessageHeader {
Layout.fillWidth: true
displayNameLabel.text: d.title
timestamp: root.notification.timestamp
}
RowLayout {
spacing: Style.current.padding
StatusBaseText {
Layout.fillWidth: true
verticalAlignment: Text.AlignVCenter
font.weight: Font.Medium
font.pixelSize: Theme.primaryTextFontSize
text: d.info
font.italic: true
wrapMode: Text.WordWrap
color: Theme.palette.primaryColor1
text: qsTr("You were airdropped community asset from %1").arg(root.communityName)
}
StatusTimeStampLabel {
id: timestamp
verticalAlignment: Text.AlignVCenter
timestamp: root.notification.timestamp
color: Theme.palette.baseColor1
}
}
}
}
ctaComponent: undefined
ctaComponent: StatusFlatButton {
size: StatusBaseButton.Size.Small
text: d.ctaText
onClicked: {
root.closeActivityCenter()
if(root.isFirstTokenReceived) {
Global.openFirstTokenReceivedPopup(root.communityId,
root.communityName,
root.communityImage,
root.tokenSymbol,
root.tokenName,
root.tokenAmount,
root.notification.tokenType,
root.tokenImage);
}
else {
Global.changeAppSectionBySectionType(Constants.appSection.wallet,
WalletLayout.LeftPanelSelection.AllAddresses,
WalletLayout.RightPanelSelection.Activity)
// TODO: Final navigation to the specific transaction entry --> {transaction: txHash}) --> Issue #13249
}
}
}
}