status-desktop/storybook/pages/ActivityNotificationCommunityTokenReceivedPage.qml

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

import AppLayouts.stores 1.0 as AppLayoutStores
import shared.stores 1.0

SplitView {
    id: root

    orientation: Qt.Vertical

    readonly property int assetType: 1
    readonly property int collectibleType: 2

    Logs { id: logs }

    Popups {
        popupParent: root
        rootStore: AppLayoutStores.RootStore {}
        communityTokensStore: CommunityTokensStore {}
    }

    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
            tokenType: root.assetType

            // 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
            tokenType: root.assetType

            // 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
            tokenType: root.assetType

            // 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
            tokenType: root.collectibleType

            // 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