status-desktop/storybook/pages/TokenListPopupPage.qml

import QtQuick 2.15
import QtQuick.Controls 2.15

import Storybook 1.0
import Models 1.0
import SortFilterProxyModel 0.2

import StatusQ 0.1

import AppLayouts.Profile.popups 1.0

SplitView {
    id: root

    Logs { id: logs }

    readonly property var sourcesOfTokensModel: SourceOfTokensModel {}
    readonly property var flatTokensModel: FlatTokensModel {}
    readonly property var joinModel: LeftJoinModel {
        leftModel: root.flatTokensModel
        rightModel: NetworksModel.allNetworks

        joinRole: "chainId"
    }
    readonly property var tokensProxyModel: SortFilterProxyModel {
        sourceModel: joinModel

        proxyRoles:  [
            ExpressionRole {
                name: "explorerUrl"
                expression: { return  "https://status.im/" }
            },
            ExpressionRole {
                name: "jsArraySources"
                expression: model.sources.split(";")
            }
        ]
    }

    SplitView {
        orientation: Qt.Vertical
        SplitView.fillWidth: true

        Item {
            SplitView.fillWidth: true
            SplitView.fillHeight: true

            PopupBackground {
                anchors.fill: parent
            }

            Instantiator {
                model: SortFilterProxyModel {
                    sourceModel: sourcesOfTokensModel

                    filters: ValueFilter {
                        id: keyFilter

                        roleName: "key"
                        value : uniswapBtn.checked ? "uniswap" : "status"
                    }
                }

                delegate: QtObject {
                    id: delegate

                    required property string name
                    required property string image
                    required property string source
                    required property int updatedAt
                    required property string version
                    required property int tokensCount

                    readonly property TokenListPopup popup: TokenListPopup {
                        parent: root

                        visible: true
                        modal: false
                        closePolicy: Popup.NoAutoClose

                        sourceName: delegate.name
                        sourceImage: delegate.image
                        sourceUrl: delegate.source
                        sourceUpdatedAt: delegate.updatedAt
                        sourceVersion: delegate.version
                        tokensCount: delegate.tokensCount

                        tokensListModel: SortFilterProxyModel {
                            sourceModel: root.tokensProxyModel

                            // Filter by source
                            filters: ExpressionFilter {
                                expression: model.jsArraySources.includes(keyFilter.value)
                            }
                        }

                        onLinkClicked: logs.logEvent("TokenListPopup::onLinkClicked --> " + link)
                        onClosed: keyFilter.value = ""
                        Component.onCompleted: open()
                    }
                }
            }
        }

        LogsAndControlsPanel {
            id: logsAndControlsPanel

            SplitView.minimumHeight: 100
            SplitView.preferredHeight: 150

            logsView.logText: logs.logText
        }
    }

    Pane {
        SplitView.minimumWidth: 300
        SplitView.preferredWidth: 300

        Column {
            spacing: 12

            Label {
                text: "Token List:"
                font.bold: true
            }

            RadioButton {
                id: uniswapBtn

                text: "Uniswap"
                checked: true

                onCheckedChanged: keyFilter.value = "uniswap"
            }

            RadioButton {
                id: statusBtn

                text: "Status"

                onCheckedChanged: keyFilter.value = "status"
            }
        }
    }
}

// category: Popups
// https://www.figma.com/file/FkFClTCYKf83RJWoifWgoX/Wallet-v2?type=design&node-id=18057%3A239798&mode=design&t=Vnm5GS8EZFLpeRAY-1