status-desktop/ui/app/AppLayouts/Wallet/views/AssetsDetailView.qml

import QtQuick 2.13
import QtQuick.Layouts 1.13
import QtQuick.Controls 2.14
import QtQuick.Window 2.12

import StatusQ 0.1
import StatusQ.Components 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Core.Utils 0.1 as SQUtils
import StatusQ.Core 0.1
import StatusQ.Controls 0.1

import utils 1.0
import shared.views 1.0
import shared.controls 1.0
import shared.stores 1.0

import SortFilterProxyModel 0.2

import "../controls"

/// \beware: heavy shortcuts here, refactor to match the requirements when touching this again
/// \todo split into token history and balance views; they have different requirements that introduce unnecessary complexity
/// \todo take a declarative approach, move logic into the typed backend and remove multiple source of truth (e.g. time ranges)
Item {
    id: root

    property var token: ({})
    property CurrenciesStore currencyStore
    property NetworkConnectionStore networkConnectionStore
    property var allNetworksModel
    property var networkFilters
    onNetworkFiltersChanged: d.forceRefreshBalanceStore = true
    /*required*/ property string address: ""
    property TokenBalanceHistoryStore balanceStore: TokenBalanceHistoryStore {}

    QtObject {
        id: d
        property TokenMarketValuesStore marketValueStore : RootStore.marketValueStore
        readonly property string symbol: !!root.token? root.token.symbol?? "" : ""
        property bool marketDetailsLoading: !!root.token? root.token.marketDetailsLoading?? false : false
        property bool tokenDetailsLoading: !!root.token? root.token.detailsLoading?? false: false
        property bool isCommunityAsset: !!root.token && !!token.communityId

        readonly property LeftJoinModel addressPerChainModel: LeftJoinModel {
            leftModel: token && token.addressPerChain ? token.addressPerChain: null
            rightModel: root.allNetworksModel
            joinRole: "chainId"
        }

        property bool forceRefreshBalanceStore: false
    }

    Connections {
        target: walletSectionAllTokens
        function onTokenHistoricalDataReady(tokenDetails: string) {
            let response = JSON.parse(tokenDetails)
            if (response === null) {
                console.debug("error parsing json message for tokenHistoricalDataReady")
                return
            }
            if(response.historicalData === null || response.historicalData <= 0)
                return

            d.marketValueStore.setTimeAndValueData(response.historicalData, response.range)
        }
    }

    AssetsDetailsHeader {
        id: tokenDetailsHeader
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        asset.name: {
            if (!token)
                return ""
            if (token.image)
                return token.image
            if (token.symbol)
                return Style.png("tokens/%1".arg(token.symbol))
            return ""
        }
        asset.isImage: true
        primaryText: token && token.name ? token.name : Constants.dummyText
        secondaryText: token ? token.balanceText : Constants.dummyText
        tertiaryText: {
            if (!d.isCommunityAsset) {
                let totalCurrencyBalance = token ? token.balance * token.marketPrice : 0
                return currencyStore.formatCurrencyAmount(totalCurrencyBalance, currencyStore.currentCurrency)
            }
            return ""
        }
        decimals: token && token.decimals ? token.decimals : 4
        balances: token && token.balances ? token.balances: null
        allNetworksModel: root.allNetworksModel
        isLoading: d.marketDetailsLoading
        address: root.address
        errorTooltipText: token && token.balances ? networkConnectionStore.getBlockchainNetworkDownTextForToken(token.balances): ""
        formatBalance: function(balance){
            return LocaleUtils.currencyAmountToLocaleString(currencyStore.getCurrencyAmount(balance, token.symbol))
        }
        communityTag.visible: d.isCommunityAsset
        communityTag.tagPrimaryLabel.text: d.isCommunityAsset ? token.communityName: ""
        communityTag.asset.name: d.isCommunityAsset ? token && !!token.communityImage ? token.communityImage : "" : ""
        communityTag.asset.isImage: true
    }

    enum GraphType {
        Price = 0,
        Balance
    }

    StatusScrollView {
        id: scrollView
        anchors.top: tokenDetailsHeader.bottom
        anchors.bottom: parent.bottom
        anchors.topMargin: 47

        width: parent.width
        contentWidth: availableWidth
        padding: 0

        ColumnLayout {
            width: scrollView.availableWidth
            spacing: 40

            Loader {
                id: graphDetailLoader
                Layout.fillWidth: true
                Layout.preferredHeight: 290
                active: root.visible
                sourceComponent: StatusChartPanel {
                    id: graphDetail

                    property int selectedGraphType: AssetsDetailView.GraphType.Price
                    property TokenMarketValuesStore selectedStore: d.marketValueStore

                    function dataReady() {
                        return typeof selectedStore != "undefined"
                    }
                    function timeRangeSelected() {
                        return dataReady() && graphDetail.timeRangeTabBarIndex >= 0 && graphDetail.selectedTimeRange.length > 0
                    }

                    readonly property var labelsData: {
                        return timeRangeSelected()
                                ? selectedStore.timeRange[graphDetail.timeRangeTabBarIndex][graphDetail.selectedTimeRange]
                                : []
                    }
                    readonly property var dataRange: {
                        return timeRangeSelected()
                                ? selectedStore.dataRange[graphDetail.timeRangeTabBarIndex][graphDetail.selectedTimeRange]
                                : []
                    }
                    readonly property var maxTicksLimit: {
                        return timeRangeSelected() && typeof selectedStore.maxTicks != "undefined"
                                ? selectedStore.maxTicks[graphDetail.timeRangeTabBarIndex][graphDetail.selectedTimeRange]
                                : 0
                    }

                    graphsModel: [
                        {text: qsTr("Price"), enabled: true, id: AssetsDetailView.GraphType.Price, visible: !d.isCommunityAsset},
                        {text: qsTr("Balance"), enabled: true, id: AssetsDetailView.GraphType.Balance, visible: true},
                    ]
                    defaultTimeRangeIndexShown: ChartStoreBase.TimeRange.All
                    timeRangeModel: dataReady() && selectedStore.timeRangeTabsModel
                    onHeaderTabClicked: (privateIdentifier, isTimeRange) => {
                                            if(!isTimeRange && graphDetail.selectedGraphType !== privateIdentifier) {
                                                graphDetail.selectedGraphType = privateIdentifier
                                            }

                                            if(graphDetail.selectedGraphType === AssetsDetailView.GraphType.Balance) {
                                                graphDetail.updateBalanceStore()
                                            }

                                            if(!isTimeRange) {
                                                graphDetail.selectedStore = graphDetail.selectedGraphType === AssetsDetailView.GraphType.Price ? d.marketValueStore : balanceStore
                                            }

                                            chart.refresh()
                                        }

                    readonly property var dateToShortLabel: function (value) {
                        const range = balanceStore.timeRangeStrToEnum(graphDetail.selectedTimeRange)
                        return range === ChartStoreBase.TimeRange.Weekly || range === ChartStoreBase.TimeRange.Monthly ?
                                    LocaleUtils.getDayMonth(value) :
                                    LocaleUtils.getMonthYear(value)
                    }
                    chart.type: 'line'
                    chart.labels: RootStore.marketHistoryIsLoading ? [] : graphDetail.labelsData
                    chart.datasets: {
                        return [{
                            xAxisId: 'x-axis-1',
                            yAxisId: 'y-axis-1',
                            backgroundColor: (Theme.palette.name === "dark") ? 'rgba(136, 176, 255, 0.2)' : 'rgba(67, 96, 223, 0.2)',
                            borderColor: (Theme.palette.name === "dark") ? 'rgba(136, 176, 255, 1)' : 'rgba(67, 96, 223, 1)',
                            borderWidth: graphDetail.selectedGraphType === AssetsDetailView.GraphType.Price ? 3 : 2,
                            pointRadius: 0,
                            data: RootStore.marketHistoryIsLoading ? [] : graphDetail.dataRange,
                            parsing: false,
                        }]
                    }

                    chart.options: {
                        return {
                            maintainAspectRatio: false,
                            responsive: true,
                            legend: {
                                display: false
                            },
                            elements: {
                                line: {
                                    cubicInterpolationMode: 'monotone' // without it interpolation makes the line too curvy that can extend horizontally farther then data points
                                }
                            },
                            //TODO enable zoom
                            //zoom: {
                            //  enabled: true,
                            //  drag: true,
                            //  speed: 0.1,
                            //  threshold: 2
                            //},
                            //pan:{enabled:true,mode:'x'},
                            tooltips: {
                                format: {
                                    enabled: graphDetail.selectedGraphType === AssetsDetailView.GraphType.Balance,
                                    callback: function (value) {
                                        return graphDetail.dateToShortLabel(value)
                                    },
                                    valueCallback: function(value) {
                                        return LocaleUtils.currencyAmountToLocaleString({ amount: value, symbol: RootStore.currencyStore.currentCurrencySymbol, displayDecimals: 2 })
                                    }
                                },
                                intersect: false,
                                displayColors: false,
                                callbacks: {
                                    label: function(tooltipItem, data) {
                                        let label = data.datasets[tooltipItem.datasetIndex].label || '';
                                        if (label) {
                                            label += ': ';
                                        }

                                        if (graphDetail.selectedGraphType === AssetsDetailView.GraphType.Balance)
                                            return label + tooltipItem.yLabel // already formatted in tooltips.value.callback

                                        const value = LocaleUtils.currencyAmountToLocaleString({ amount: tooltipItem.yLabel, symbol: RootStore.currencyStore.currentCurrencySymbol, displayDecimals: 2 })
                                        return label + value
                                    }
                                }
                            },
                            scales: {
                                labelFormat: {
                                    callback: function (value) {
                                        return graphDetail.dateToShortLabel(value)
                                    },
                                    enabled: graphDetail.selectedGraphType === AssetsDetailView.GraphType.Balance,
                                },
                                xAxes: [{
                                        id: 'x-axis-1',
                                        position: 'bottom',
                                        type: graphDetail.selectedGraphType === AssetsDetailView.GraphType.Price ? 'category' : 'time',
                                        gridLines: {
                                            drawOnChartArea: false,
                                            drawBorder: false,
                                            drawTicks: false,
                                        },
                                        ticks: {
                                            fontSize: 10,
                                            fontColor: (Theme.palette.name === "dark") ? '#909090' : '#939BA1',
                                            padding: 16,
                                            maxRotation: 0,
                                            minRotation: 0,
                                            maxTicksLimit: graphDetail.maxTicksLimit,
                                        },
                                        time: {
                                            minUnit: 'day' // for '7days' timeframe, otherwise labels are '10PM', '10AM', '10PM', etc
                                        }
                                    }],
                                yAxes: [{
                                        position: 'left',
                                        id: 'y-axis-1',
                                        gridLines: {
                                            borderDash: [8, 4],
                                            drawBorder: false,
                                            drawTicks: false,
                                            color: (Theme.palette.name === "dark") ? '#909090' : '#939BA1'
                                        },
                                        beforeDataLimits: (axis) => {
                                            axis.paddingTop = 25;
                                            axis.paddingBottom = 0;
                                        },
                                        afterDataLimits: (axis) => {
                                            if(axis.min < 0)
                                            axis.min = 0;
                                        },
                                        ticks: {
                                            fontSize: 10,
                                            fontColor: (Theme.palette.name === "dark") ? '#909090' : '#939BA1',
                                            padding: 8,
                                            callback: function(value, index, ticks) {
                                                return LocaleUtils.numberToLocaleString(value)
                                            },
                                        }
                                    }]
                            }
                        }
                    }

                    LoadingGraphView {
                        anchors.fill: chart
                        active: RootStore.marketHistoryIsLoading
                    }

                    function updateBalanceStore() {
                        let selectedTimeRangeEnum = balanceStore.timeRangeStrToEnum(graphDetail.selectedTimeRange)

                        let currencySymbol = RootStore.currencyStore.currentCurrency
                        if(!balanceStore.hasData(root.address, token.symbol, currencySymbol, selectedTimeRangeEnum) || d.forceRefreshBalanceStore) {
                            RootStore.fetchHistoricalBalanceForTokenAsJson(root.address, token.symbol, currencySymbol, selectedTimeRangeEnum)
                        }
                    }

                    Connections {
                        target: balanceStore
                        function onNewDataReady(address, tokenSymbol, currencySymbol, timeRange) {
                            d.forceRefreshBalanceStore = false
                            if (timeRange === balanceStore.timeRangeStrToEnum(graphDetail.selectedTimeRange)) {
                                chart.refresh()
                            }
                        }
                    }

                    Connections {
                        target: root
                        function onAddressChanged() { graphDetail.updateBalanceStore() }
                    }

                    Connections {
                        target: d
                        function onSymbolChanged() { if (d.symbol) graphDetail.updateBalanceStore() }
                    }
                }
            }

            RowLayout {
                Layout.fillWidth: true
                visible: !d.isCommunityAsset
                InformationTile {
                    maxWidth: parent.width
                    objectName: "marketCapInformationTile"
                    primaryText: qsTr("Market Cap")
                    secondaryText: token && token.marketDetails && token.marketDetails.marketCap ? LocaleUtils.currencyAmountToLocaleString(token.marketDetails.marketCap) : Constants.dummyText
                    isLoading: d.marketDetailsLoading
                }
                InformationTile {
                    maxWidth: parent.width
                    objectName: "dayLowInformationTile"
                    primaryText: qsTr("Day Low")
                    secondaryText: token && token.marketDetails && token.marketDetails.lowDay ? LocaleUtils.currencyAmountToLocaleString(token.marketDetails.lowDay) : Constants.dummyText
                    isLoading: d.marketDetailsLoading
                }
                InformationTile {
                    maxWidth: parent.width
                    objectName: "dayHighInformationTile"
                    primaryText: qsTr("Day High")
                    secondaryText: token && token.marketDetails && token.marketDetails.highDay ? LocaleUtils.currencyAmountToLocaleString(token.marketDetails.highDay) : Constants.dummyText
                    isLoading: d.marketDetailsLoading
                }
                Item {
                    Layout.fillWidth: true
                }
                InformationTile {
                    readonly property double changePctHour: token && token.marketDetails ? token.marketDetails.changePctHour : 0
                    maxWidth: parent.width
                    objectName: "hourInformationTile"
                    primaryText: qsTr("Hour")
                    secondaryText: "%1%".arg(LocaleUtils.numberToLocaleString(changePctHour, 2))
                    secondaryLabel.customColor: changePctHour === 0 ? Theme.palette.directColor1 :
                                                                      changePctHour < 0 ? Theme.palette.dangerColor1 :
                                                                                          Theme.palette.successColor1
                    isLoading: d.marketDetailsLoading
                }
                InformationTile {
                    readonly property double changePctDay: token && token.marketDetails ? token.marketDetails.changePctDay : 0
                    maxWidth: parent.width
                    primaryText: qsTr("Day")
                    objectName: "dayInformationTile"
                    secondaryText: "%1%".arg(LocaleUtils.numberToLocaleString(changePctDay, 2))
                    secondaryLabel.customColor: changePctDay === 0 ? Theme.palette.directColor1 :
                                                                     changePctDay < 0 ? Theme.palette.dangerColor1 :
                                                                                        Theme.palette.successColor1
                    isLoading: d.marketDetailsLoading
                }
                InformationTile {
                    readonly property double changePct24hour: token && token.marketDetails ? token.marketDetails.changePct24hour : 0
                    maxWidth: parent.width
                    primaryText: qsTr("24 Hours")
                    objectName: "24HoursInformationTile"
                    secondaryText: "%1%".arg(LocaleUtils.numberToLocaleString(changePct24hour, 2))
                    secondaryLabel.customColor: changePct24hour === 0 ? Theme.palette.directColor1 :
                                                                        changePct24hour < 0 ? Theme.palette.dangerColor1 :
                                                                                              Theme.palette.successColor1
                    isLoading: d.marketDetailsLoading
                }
            }

            Flow {
                id: detailsFlow

                readonly property bool isOverflowing:  detailsFlow.width - websiteBlock.width - tokenDescriptionText.width < 24

                Layout.fillWidth: true
                spacing: 24

                StatusTabBar {
                    width: parent.width
                    StatusTabButton {
                        leftPadding: 0
                        width: implicitWidth
                        text: qsTr("Overview")
                    }
                    visible: tokenDescriptionText.visible
                }

                StatusTextWithLoadingState {
                    id: tokenDescriptionText
                    width: Math.max(536 , scrollView.availableWidth - websiteBlock.width - 24)

                    font.pixelSize: 15
                    lineHeight: 22
                    lineHeightMode: Text.FixedHeight
                    text: token && token.description ? token.description : d.tokenDetailsLoading ? Constants.dummyText: ""
                    customColor: Theme.palette.directColor1
                    elide: Text.ElideRight
                    wrapMode: Text.Wrap
                    textFormat: Qt.RichText
                    loading: d.tokenDetailsLoading
                    visible: !!text
                }

                GridLayout{
                    columnSpacing: 10
                    rowSpacing: 10
                    flow: detailsFlow.isOverflowing ? GridLayout.LeftToRight: GridLayout.TopToBottom
                    InformationTileAssetDetails {
                        id: websiteBlock
                        Layout.preferredWidth: 272
                        visible: !d.isCommunityAsset
                        primaryText: qsTr("Website")
                        content: InformationTag {
                            asset.name : "browser"
                            tagPrimaryLabel.text: SQUtils.Utils.stripHttpsAndwwwFromUrl(token.websiteUrl)
                            visible: typeof token != "undefined" && token && token.websiteUrl !== ""
                            customBackground: Component {
                                Rectangle {
                                    color: Theme.palette.baseColor2
                                    border.width: 1
                                    border.color: "transparent"
                                    radius: 36
                                }
                            }
                            MouseArea {
                                anchors.fill: parent
                                cursorShape: Qt.PointingHandCursor
                                onClicked: Global.openLink(token.websiteUrl)
                            }
                        }
                    }

                    InformationTileAssetDetails {
                        Layout.preferredWidth: 272
                        visible:  d.isCommunityAsset
                        primaryText: qsTr("Minted by")
                        content: InformationTag {
                            tagPrimaryLabel.text: token && token.communityName ? token.communityName : ""
                            asset.name: token && token.communityImage ? token.communityImage : ""
                            asset.isImage: true
                            customBackground: Component {
                                Rectangle {
                                    color: Theme.palette.baseColor2
                                    border.width: 1
                                    border.color: "transparent"
                                    radius: 36
                                }
                            }
                            MouseArea {
                                anchors.fill: parent
                                cursorShape: Qt.PointingHandCursor
                                onClicked: Global.switchToCommunity(token.communityId)
                            }
                        }
                    }

                    InformationTileAssetDetails {
                        Layout.minimumWidth: 272
                        Layout.preferredWidth: implicitWidth
                        primaryText: qsTr("Contract")
                        content: GridLayout {
                            columnSpacing: 10
                            rowSpacing: 10
                            flow: detailsFlow.isOverflowing ? GridLayout.LeftToRight : GridLayout.TopToBottom
                            Repeater {
                                model: SortFilterProxyModel {
                                    sourceModel: d.addressPerChainModel
                                    filters: ExpressionFilter {
                                        expression: root.networkFilters.split(":").includes(model.chainId+"")
                                    }
                                }
                                delegate: InformationTag {
                                    asset.name: Style.svg("tiny/" + model.iconUrl)
                                    asset.isImage: true
                                    tagPrimaryLabel.text: model.chainName
                                    tagSecondaryLabel.text: SQUtils.Utils.elideText(model.address, 2,4)
                                    customBackground: Component {
                                        Rectangle {
                                            color: Theme.palette.baseColor2
                                            border.width: 1
                                            border.color: "transparent"
                                            radius: 36
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}