status-desktop/ui/imports/shared/views/NetworkCardsComponent.qml

import QtQuick 2.13
import QtQuick.Layouts 1.13

import utils 1.0

import StatusQ.Controls 0.1
import StatusQ.Popups 0.1
import StatusQ.Components 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Core.Utils 0.1 as StatusQUtils

Item {
    id: networkCardsComponent

    property var assets
    property var store
    property string locale: ""
    property var selectedAsset
    property var suggestedRoutes
    property bool customMode: false
    property var selectedNetwork
    property var selectedAccount
    property var allNetworks
    property double amountToSend: 0
    property double requiredGasInEth: 0
    property bool errorMode: (d.customAmountToSend > amountToSend) ||
                             (d.customAmountToSend < amountToSend) ||
                             (d.customAmountToReceive > amountToSend) ||
                             (d.customAmountToReceive < amountToSend)

    signal reCalculateSuggestedRoute(var disabled)

    QtObject {
        id: d
        property var selectedFromNetwork
        property var selectedToNetwork
        property double customAmountToSend: 0
        property double customAmountToReceive: 0

        function getBalance(chainID) {
            for(var i=0; i< selectedAsset.balances.count; i++) {
                if(selectedAsset.balances.rowData(i, "chainId") === chainID.toString()) {
                    return selectedAsset.balances.rowData(i, "balance")
                }
            }
        }

        onSelectedFromNetworkChanged: {
            canvas.clear()
            canvas.requestPaint()
        }

        onSelectedToNetworkChanged: {
            canvas.clear()
            canvas.requestPaint()
        }
    }

    width: 410
    height: networkCardsLayout.height

    RowLayout {
        id: networkCardsLayout
        width: parent.width
        ColumnLayout {
            id: fromNetworksLayout
            Layout.alignment: Qt.AlignLeft | Qt.AlignTop
            spacing: 12
            StatusBaseText {
                font.pixelSize: 10
                color: Theme.palette.baseColor1
                text: qsTr("Your Balances").toUpperCase()
            }
            Repeater {
                model: networkCardsComponent.allNetworks
                StatusCard {
                    id: fromNetwork
                    property var tokenBalanceOnChain: Utils.toLocaleString(parseFloat(d.getBalance(model.chainId)).toFixed(4), locale, {"currency": true})
                    property var hasGas: assets.hasGas(model.chainId, model.nativeCurrencySymbol, requiredGasInEth + parseFloat(amountToSend))
                    primaryText: model.chainName
                    secondaryText: (parseFloat(tokenBalanceOnChain) === 0 && amountToSend !== 0) ?
                                   qsTr("No Balance") : !hasGas ? qsTr("No Gas") :
                                   (selectedNetwork && selectedNetwork.chainName === model.chainName) ?
                                   amountToSend: 0
                    tertiaryText: qsTr("BALANCE: ") + tokenBalanceOnChain
                    state: tokenBalanceOnChain === 0 || !hasGas ? "unavailable" : networkCardsComponent.errorMode ? "error" : "default"
                    cardIcon.source: Style.png(model.iconUrl)
                    disabledText: qsTr("Disabled")
                    advancedMode: networkCardsComponent.customMode
                    advancedInputText: (selectedNetwork && selectedNetwork.chainName === model.chainName) ? amountToSend: 0
                    Component.onCompleted: {
                        disabled = store.checkIfDisabledByUser(model.chainId)
                        if(selectedNetwork && selectedNetwork.chainName === model.chainName)
                            d.selectedFromNetwork = this
                    }
                    Connections {
                        target: networkCardsComponent
                        onSelectedNetworkChanged: {
                            if(selectedNetwork.chainName === model.chainName) {
                                d.selectedFromNetwork = fromNetwork
                            }
                        }
                    }
                    onClicked: {
                        store.addRemoveDisabledChain(suggestedRoutes, model.chainId, disabled)
                        reCalculateSuggestedRoute(store.disabledChainIds)
                    }
                    onAdvancedInputTextChanged: {
                        if(selectedNetwork && selectedNetwork.chainName === model.chainName) {
                            d.customAmountToSend = isNaN(parseFloat(advancedInputText)) ? 0 : parseFloat(advancedInputText)
                        }
                    }
                }
            }
        }
        ColumnLayout {
            id: toNetworksLayout
            Layout.alignment: Qt.AlignRight | Qt.AlignTop
            spacing: 12
            StatusBaseText {
                Layout.alignment: Qt.AlignRight
                Layout.maximumWidth: 70
                font.pixelSize: 10
                color: Theme.palette.baseColor1
                text: selectedAccount.address
                elide: Text.ElideMiddle
            }
            Repeater {
                model: networkCardsComponent.allNetworks
                StatusCard {
                    id: toCard
                    primaryText: model.chainName
                    secondaryText: (selectedNetwork && selectedNetwork.chainName === model.chainName) ? amountToSend: 0
                    tertiaryText: ""
                    // To-do preferred in not something that is supported yet
                    state: networkCardsComponent.errorMode ? "error" : "default"
                    // opacity: preferred ? 1 : 0
                    cardIcon.source: Style.png(model.iconUrl)
                    disabledText: qsTr("Disabled")
                    advancedMode: networkCardsComponent.customMode
                    advancedInputText: (selectedNetwork && selectedNetwork.chainName === model.chainName) ? amountToSend: 0
                    Component.onCompleted: {
                        disabled = store.checkIfDisabledByUser(model.chainId)
                        if(selectedNetwork && selectedNetwork.chainName === model.chainName)
                            d.selectedToNetwork = this
                    }
                    Connections {
                        target: networkCardsComponent
                        onSelectedNetworkChanged: {
                            if(selectedNetwork && selectedNetwork.chainName === model.chainName)
                                d.selectedToNetwork = toCard
                        }
                    }
                    onClicked: {
                        store.addRemoveDisabledChain(suggestedRoutes, model.chainId, disabled)
                        reCalculateSuggestedRoute(store.disabledChainIds)
                    }
                    onAdvancedInputTextChanged: {
                        if(selectedNetwork && selectedNetwork.chainName === model.chainName)
                            d.customAmountToReceive = isNaN(parseFloat(advancedInputText)) ? 0 : parseFloat(advancedInputText)
                    }
                }
            }
        }
    }

    Canvas {
        id: canvas
        x: networkCardsLayout.x + fromNetworksLayout.x
        y: networkCardsLayout.y
        width: networkCardsLayout.width
        height: networkCardsLayout.height

        function clear() {
            if(available) {
            var ctx = getContext("2d");
            if(ctx)
                ctx.reset()
            }
        }

        onPaint: {
            if(d.selectedFromNetwork && d.selectedToNetwork) {
                // Get the canvas context
                var ctx = getContext("2d");
                StatusQUtils.Utils.drawArrow(ctx, d.selectedFromNetwork.x + d.selectedFromNetwork.width,
                                             d.selectedFromNetwork.y + d.selectedFromNetwork.height/2,
                                             toNetworksLayout.x + d.selectedToNetwork.x,
                                             d.selectedToNetwork.y + d.selectedToNetwork.height/2,
                                             '#627EEA')
            }
        }
    }
}