status-desktop/ui/StatusQ/sandbox/pages/StatusCardPage.qml

import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14

import Sandbox 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Utils 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Popups 0.1
import StatusQ.Components 0.1

Item {

    ColumnLayout {
        id: layout
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        spacing: 20

        RowLayout {
            Layout.fillWidth: true

            StatusCard {
                id: card
                Layout.alignment: Qt.AlignVCenter
                primaryText: "Mainnet"
                secondaryText: state === "unavailable" ? "No Gas" : "75,0000000"
                tertiaryText: state === "unpreferred"  ? "UNPREFERRED" : "BALANCE: " + 250
                cardIconName: "status"
                advancedInputText: "75,0000000"
                disabledText: "Disabled"
                onCardLocked: locked = isLocked
                disableText: "Disable"
                enableText: "Enable"
            }

            StatusComboBox {
                Layout.alignment: Qt.AlignVCenter
                Layout.maximumWidth: 200
                label: "Card State"
                onCurrentValueChanged: card.state = currentValue
                model: ListModel {
                    ListElement {
                        name: "default"
                    }
                    ListElement {
                        name: "unavailable"
                    }
                    ListElement {
                        name: "error"
                    }
                    ListElement {
                        name: "unpreferred"
                    }
                }
            }

            StatusCheckBox {
                Layout.alignment: Qt.AlignVCenter
                text: "advancedMode"
                font.family: Theme.palette.monoFont.name
                onClicked: {
                    card.advancedMode = checked
                }
            }
        }

        Rectangle {
            height: 1
            width: 700
            color: "black"
        }

        // Below is an example on how to implement the network routing using StatusCard and Canvas, also the function in Utils to draw an arrow
        Row {
            id: cards
            spacing: 200
            Column {
                id: leftColumn
                spacing: 20
                Repeater {
                    model: fromNetworksList
                    StatusCard {
                        primaryText: name
                        secondaryText: balance === 0 ? "No Balance" : !hasGas ? "No Gas" : tokensToSend
                        tertiaryText: "BALANCE: " + balance
                        state: balance === 0 || !hasGas ? "unavailable" :  "default"
                        cardIconName: iconName
                        advancedMode: card.advancedMode
                        advancedInputText: tokensToSend
                        disabledText: "Disabled"
                        onCardLocked: locked = isLocked
                        disableText: "Disable"
                        enableText: "Enable"
                    }
                }
            }

            Column {
                id: rightColumn
                spacing: 20
                Repeater {
                    model: toNetworksList
                    StatusCard {
                        primaryText: name
                        secondaryText: tokensToReceive
                        tertiaryText: ""
                        state: preferred ? "default" : "unprefeered"
                        cardIconName: iconName
                        opacity: preferred ? 1 : 0
                        advancedMode: card.advancedMode
                        advancedInputText: tokensToReceive
                        disabledText: "Disabled"
                        onCardLocked: locked = isLocked
                        disableText: "Disable"
                        enableText: "Enable"
                    }
                }
            }
        }
    }

    Canvas {
        id: canvas
        x: layout.x + leftColumn.x
        y: cards.y
        width: cards.width
        height: cards.height

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

        onPaint: {
            // Get the canvas context
            var ctx = getContext("2d");

            for(var i = 0; i< fromNetworksList.count; i++) {
                if(fromNetworksList.get(i).routedTo !== "") {
                    for(var j = 0; j< toNetworksList.count; j++) {
                        if(fromNetworksList.get(i).routedTo === toNetworksList.get(j).name) {
                            Utils.drawArrow(ctx, leftColumn.children[i].x + leftColumn.children[i].width,
                                            leftColumn.children[i].y + leftColumn.children[i].height/2,
                                            rightColumn.x + rightColumn.children[j].x,
                                            rightColumn.children[j].y + rightColumn.children[j].height/2,
                                            '#627EEA')
                        }
                    }
                }
            }
        }
    }


    ListModel {
        id: toNetworksList
        ListElement {
            name: "Mainnet"
            iconName: "status"
            tokensToReceive: 75
            preferred: true
        }
        ListElement {
            name: "Aztec"
            iconName: "status"
            tokensToReceive: 0
            preferred: false
        }
        ListElement {
            name: "Hermez"
            iconName: "status"
            tokensToReceive: 75
            preferred: true
        }
        ListElement {
            name: "Loppring"
            iconName: "status"
            tokensToReceive: 0
            preferred: true
        }
        ListElement {
            name: "Optimism"
            iconName: "status"
            tokensToReceive: 100
            preferred: true
        }
        ListElement {
            name: "zkSync"
            iconName: "status"
            tokensToReceive: 0
            preferred: false
        }
    }

    ListModel {
        id: fromNetworksList
        ListElement {
            name: "Mainnet"
            iconName: "status"
            tokensToSend: 75
            balance: 75
            routedTo: "Mainnet"
            hasGas: true
        }
        ListElement {
            name: "Aztec"
            iconName: "status"
            tokensToSend: 0
            balance: 75
            routedTo: ""
            hasGas: false
        }
        ListElement {
            name: "Hermez"
            iconName: "status"
            tokensToSend: 75
            balance: 75
            routedTo: "Hermez"
            hasGas: true
        }
        ListElement {
            name: "Loppring"
            iconName: "status"
            tokensToSend: 0
            balance: 0
            routedTo: ""
            hasGas: false
        }
        ListElement {
            name: "Optimism"
            iconName: "status"
            tokensToSend: 75
            balance: 75
            routedTo: "Optimism"
            hasGas: true
        }
        ListElement {
            name: "zkSync"
            iconName: "status"
            tokensToSend: 25
            balance: 25
            routedTo: "Optimism"
            hasGas: true
        }
    }
}