storybook(ActivityNotification): Community token received page

Added support to `ActivityNotificationCommunityTokenReceived` component.

Closes #13362

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

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
+ActivityNotificationCommunityTokenReceived 1.0 ActivityNotificationCommunityTokenReceived.qml