From 2259f92ed39093a51308cb297f8341a8d026e892 Mon Sep 17 00:00:00 2001
From: Noelia <noelia@status.im>
Date: Wed, 14 Feb 2024 10:41:09 +0100
Subject: [PATCH] storybook(ActivityNotification): Community token received
 page

Added support to `ActivityNotificationCommunityTokenReceived` component.

Closes #13362
---
 ...NotificationCommunityTokenReceivedPage.qml | 182 ++++++++++++++++++
 ui/app/mainui/activitycenter/views/qmldir     |   3 +-
 2 files changed, 184 insertions(+), 1 deletion(-)
 create mode 100644 storybook/pages/ActivityNotificationCommunityTokenReceivedPage.qml

diff --git a/storybook/pages/ActivityNotificationCommunityTokenReceivedPage.qml b/storybook/pages/ActivityNotificationCommunityTokenReceivedPage.qml
new file mode 100644
index 0000000000..7853e31b82
--- /dev/null
+++ b/storybook/pages/ActivityNotificationCommunityTokenReceivedPage.qml
@@ -0,0 +1,182 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import mainui.activitycenter.views 1.0
+import mainui 1.0
+
+import Storybook 1.0
+import Models 1.0
+
+SplitView {
+    id: root
+
+    orientation: Qt.Vertical
+
+    Logs { id: logs }
+
+    Popups {
+        popupParent: root
+        rootStore: QtObject {}
+        communityTokensStore: QtObject {}
+    }
+
+    QtObject {
+        id: notificationMock
+
+        property int timestamp: Date.now()
+    }
+
+    QtObject {
+        id: communityMock
+
+        property string id: "11"
+        property string name: "Doodles"
+        property string image: ModelsData.banners.status
+    }
+
+    QtObject {
+        id: assetMock
+
+        property string amount: "2.5"
+        property string name: "dai"
+        property string symbol: "DAI"
+        property string image: ModelsData.assets.dai
+    }
+
+
+    QtObject {
+        id: collectibleMock
+
+        property string amount: "4"
+        property string name: "doodles"
+        property string symbol: "DOOD"
+        property string image: ModelsData.banners.status
+    }
+
+    ColumnLayout {
+        SplitView.fillHeight: true
+        SplitView.fillWidth: true
+
+        ActivityNotificationCommunityTokenReceived {
+
+            Layout.fillWidth: true
+            Layout.margins: 16
+
+            // Community properties:
+            communityId: communityMock.id
+            communityName: communityMock.name
+            communityImage: communityMock.image
+
+            // Notification type related properties:
+            isFirstTokenReceived: true
+            isAssetType: true
+
+            // Token related properties:
+            tokenAmount: assetMock.amount
+            tokenName: assetMock.name
+            tokenSymbol: assetMock.symbol
+            tokenImage: assetMock.image
+
+            // Wallet related:
+            walletAccountName: "My wallet"
+            txHash: "0x01231232"
+
+            notification: notificationMock
+        }
+
+        ActivityNotificationCommunityTokenReceived {
+
+            Layout.fillWidth: true
+            Layout.margins: 16
+
+            // Community properties:
+            communityId: communityMock.id
+            communityName: communityMock.name
+            communityImage: communityMock.image
+
+            // Notification type related properties:
+            isFirstTokenReceived: false
+            isAssetType: true
+
+            // Token related properties:
+            tokenAmount: assetMock.amount
+            tokenName: assetMock.name
+            tokenSymbol: assetMock.symbol
+            tokenImage: assetMock.image
+
+            // Wallet related:
+            walletAccountName: "My wallet 2"
+            txHash: "0x01231232"
+
+            notification: notificationMock
+        }
+
+        ActivityNotificationCommunityTokenReceived {
+
+            Layout.fillWidth: true
+            Layout.margins: 16
+
+            // Community properties:
+            communityId: communityMock.id
+            communityName: communityMock.name
+            communityImage: communityMock.image
+
+            // Notification type related properties:
+            isFirstTokenReceived: true
+            isAssetType: false
+
+            // Token related properties:
+            tokenAmount: collectibleMock.amount
+            tokenName: collectibleMock.name
+            tokenSymbol: collectibleMock.symbol
+            tokenImage: collectibleMock.image
+
+            // Wallet related:
+            walletAccountName: "The wallet account"
+            txHash: "0x01231232"
+
+            notification: notificationMock
+        }
+
+        ActivityNotificationCommunityTokenReceived {
+
+            Layout.fillWidth: true
+            Layout.margins: 16
+
+            // Community properties:
+            communityId: communityMock.id
+            communityName: communityMock.name
+            communityImage: communityMock.image
+
+            // Notification type related properties:
+            isFirstTokenReceived: false
+            isAssetType: false
+
+            // Token related properties:
+            tokenAmount: collectibleMock.amount
+            tokenName: collectibleMock.name
+            tokenSymbol: collectibleMock.symbol
+            tokenImage: collectibleMock.image
+
+            // Wallet related:
+            walletAccountName: "Collectibles wallet"
+            txHash: "0x01231232"
+
+            notification: notificationMock
+        }
+    }
+
+    LogsAndControlsPanel {
+        SplitView.minimumHeight: 100
+        SplitView.preferredHeight: 160
+
+        logsView.logText: logs.logText
+    }
+}
+
+// category: Activity Center
+// https://www.figma.com/file/FkFClTCYKf83RJWoifWgoX/Wallet-v2?type=design&node-id=18700%3A276619&mode=design&t=8r02XS6eFbmDWKa1-1
+// https://www.figma.com/file/FkFClTCYKf83RJWoifWgoX/Wallet-v2?type=design&node-id=20765%3A244315&mode=design&t=WV4rxtOEDUDl4aZ6-1
+// https://www.figma.com/file/FkFClTCYKf83RJWoifWgoX/Wallet-v2?type=design&node-id=20765%3A398956&mode=design&t=EGnLxrqE9kqaWGP4-1
+// https://www.figma.com/file/FkFClTCYKf83RJWoifWgoX/Wallet-v2?type=design&node-id=20787%3A74840&mode=design&t=EGnLxrqE9kqaWGP4-1
diff --git a/ui/app/mainui/activitycenter/views/qmldir b/ui/app/mainui/activitycenter/views/qmldir
index 9e5055ada6..c5257bb7c9 100644
--- a/ui/app/mainui/activitycenter/views/qmldir
+++ b/ui/app/mainui/activitycenter/views/qmldir
@@ -1,3 +1,4 @@
 ActivityNotificationCommunityMembershipRequest 1.0 ActivityNotificationCommunityMembershipRequest.qml
 ActivityNotificationTransferOwnership 1.0 ActivityNotificationTransferOwnership.qml
-ActivityNotificationCommunityShareAddresses 1.0 ActivityNotificationCommunityShareAddresses.qml
\ No newline at end of file
+ActivityNotificationCommunityShareAddresses 1.0 ActivityNotificationCommunityShareAddresses.qml
+ActivityNotificationCommunityTokenReceived 1.0 ActivityNotificationCommunityTokenReceived.qml