status-desktop/ui/app/AppLayouts/Profile/views/wallet/ManageTokensView.qml

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

import StatusQ 0.1
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Models 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Popups.Dialog 0.1

import shared.controls 1.0
import shared.stores 1.0 as SharedStores
import utils 1.0

import AppLayouts.Profile.panels 1.0
import AppLayouts.Wallet.panels 1.0

Item {
    id: root

    required property double tokenListUpdatedAt
    required property var assetsController
    required property var collectiblesController

    required property var sourcesOfTokensModel // Expected roles: key, name, updatedAt, source, version, tokensCount, image
    required property var tokensListModel // Expected roles: name, symbol, image, chainName, explorerUrl

    required property var baseWalletAssetsModel
    required property var baseWalletCollectiblesModel

    property var getCurrencyAmount: function (balance, symbol) {}
    property var getCurrentCurrencyAmount: function(balance){}

    property alias currentIndex: tabBar.currentIndex

    readonly property bool dirty: {
        if (!loader.item)
            return false
        if (tabBar.currentIndex > d.hiddenTabIndex)
            return false
        // FIXME take advanced settings into account here too (#13178)
        return loader.item && loader.item.dirty
    }

    function saveChanges() {
        if (tabBar.currentIndex > d.hiddenTabIndex)
            return
        // FIXME save advanced settings (#13178)
        loader.item.saveSettings()
    }

    QtObject {
        id: d

        readonly property int assetsTabIndex: 0
        readonly property int collectiblesTabIndex: 1
        readonly property int hiddenTabIndex: 2
        readonly property int advancedTabIndex: 3
    }

    ColumnLayout {
        anchors.fill: parent

        StatusTabBar {
            id: tabBar

            Layout.fillWidth: true
            Layout.topMargin: 5

            StatusTabButton {
                leftPadding: 0
                width: implicitWidth
                text: qsTr("Assets")
            }
            StatusTabButton {
                width: implicitWidth
                text: qsTr("Collectibles")
            }
            StatusTabButton {
                width: implicitWidth
                text: qsTr("Hidden")
            }
            StatusTabButton {
                width: implicitWidth
                text: qsTr("Advanced")
            }
        }

        // NB: we want to discard any pending unsaved changes when switching tabs or navigating away
        Loader {
            id: loader
            Layout.fillWidth: true
            Layout.fillHeight: true
            active: visible

            sourceComponent: {
                switch (tabBar.currentIndex) {
                case d.assetsTabIndex:
                    return assetsPanel
                case d.collectiblesTabIndex:
                    return collectiblesPanel
                case d.hiddenTabIndex:
                    return hiddenPanel
                case d.advancedTabIndex:
                    return advancedTab
                }
            }
        }

        Component {
            id: assetsPanel
            ManageAssetsPanel {
                getCurrencyAmount: function (balance, symbol) {
                    return root.getCurrencyAmount(balance, symbol)
                }
                getCurrentCurrencyAmount: function (balance) {
                    return root.getCurrentCurrencyAmount(balance)
                }

                controller: root.assetsController
            }
        }

        Component {
            id: collectiblesPanel
            ManageCollectiblesPanel {
                controller: root.collectiblesController
            }
        }

        Component {
            id: hiddenPanel
            ManageHiddenPanel {
                getCurrencyAmount: function (balance, symbol) {
                    return root.getCurrencyAmount(balance, symbol)
                }
                getCurrentCurrencyAmount: function (balance) {
                    return root.getCurrentCurrencyAmount(balance)
                }
                assetsController: root.assetsController
                collectiblesController: root.collectiblesController
            }
        }

        Component {
            id: advancedTab
            ColumnLayout {
                id: advancedTabColumn

                spacing: 8
                StatusListItem {
                    Layout.fillWidth: true
                    title: qsTr("Show community assets when sending tokens")

                    components: [
                        StatusSwitch {
                            id: showCommunityAssetsSwitch
                            checked: true // FIXME integrate with backend (#13178)
                            onCheckedChanged: {
                                // FIXME integrate with backend (#13178)
                            }
                        }
                    ]
                    onClicked: {
                        showCommunityAssetsSwitch.checked = !showCommunityAssetsSwitch.checked
                    }
                }
                StatusDialogDivider {
                    Layout.fillWidth: true
                }
                StatusListItem {
                    Layout.fillWidth: true
                    title: qsTr("Don’t display assets with balance lower than")

                    components: [
                        CurrencyAmountInput {
                            enabled: displayThresholdSwitch.checked
                            currencySymbol: SharedStores.RootStore.currencyStore.currentCurrency
                            value: 0.10 // FIXME integrate with backend (#13178)
                        },
                        StatusSwitch {
                            id: displayThresholdSwitch
                            checked: false // FIXME integrate with backend (#13178)
                            onCheckedChanged: {
                                // FIXME integrate with backend (#13178)
                            }
                        }
                    ]
                    onClicked: {
                        displayThresholdSwitch.checked = !displayThresholdSwitch.checked
                    }
                }
                StatusDialogDivider {
                    Layout.fillWidth: true
                }
                RowLayout {
                    Layout.fillWidth: true
                    Layout.preferredHeight: 64
                    Layout.topMargin: 18
                    Layout.bottomMargin: -6
                    StatusBaseText {
                        Layout.fillWidth: true
                        text: qsTr("Token lists")
                        color: Style.current.textColor
                    }
                    StatusBaseText {
                        Layout.alignment: Qt.AlignRight
                        text: qsTr("Last updated %1 @%2").arg(LocaleUtils.formatDate(root.tokenListUpdatedAt * 1000)).arg(LocaleUtils.formatTime(root.tokenListUpdatedAt, Locale.ShortFormat))
                        font.pixelSize: Style.current.additionalTextSize
                        color: Style.current.darkGrey
                    }
                }
                SupportedTokenListsPanel {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    sourcesOfTokensModel: root.sourcesOfTokensModel
                    tokensListModel: root.tokensListModel
                }
            }
        }
    }
}