status-desktop/storybook/pages/SendModalPage.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.Core.Utils 0.1
import StatusQ.Controls 0.1

import Storybook 1.0
import Models 1.0
import utils 1.0

import shared.popups.send 1.0
import shared.stores 1.0
import shared.stores.send 1.0

import SortFilterProxyModel 0.2
import AppLayouts.Wallet.stores 1.0

SplitView {
    id: root

    orientation: Qt.Horizontal

    property WalletAssetsStore walletAssetStore: WalletAssetsStore {

        // Workaround to satisfy stub which is not empty (but should be)
        assetsWithFilteredBalances: ListModel {}

        property var groupedAccountAssetsModel: ListModel {
            Component.onCompleted: {
                const data = [
                    {
                        tokensKey: "key_eth",
                        name: "Ethereum",
                        symbol: "ETH",
                        decimals: 18,
                        communityId: "",
                        balances: [
                            {
                                chainId: "1",
                                balance: "122082928968121891",
                                account: "0x7F47C2e18a4BBf5487E6fb082eC2D9Ab0E6d7240",
                            },
                            {
                              chainId: "420",
                              balance: "559133758939097000",
                              account: "0x7F47C2e18a4BBf5487E6fb082eC2D9Ab0E6d7240"
                            }
                        ],
                        currentCurrencyBalance: 234.234,
                        marketDetails: {
                            currencyPrice: {
                                amount: 12234.23,
                                displayDecimals: true
                            }
                        }
                    },
                    {
                        tokensKey: "key_dai",
                        name: "DAI",
                        symbol: "DAI",
                        decimals: 18,
                        communityId: "",
                        balances: [
                            {
                                chainId: "420",
                                balance: "1142155111",
                                account: "0x7F47C2e18a4BBf5487E6fb082eC2D9Ab0E6d7240"
                            },
                            {
                                chainId: "1",
                                balance: "4411211243121551121",
                                account: "0x7F47C2e18a4BBf5487E6fb082eC2D9Ab0E6d7240"
                            }
                        ],
                        currentCurrencyBalance: 234.234,
                        marketDetails: {
                            currencyPrice: {
                                amount: 234.23,
                                displayDecimals: true
                            }
                        }
                    }
                ]

                append(data)
            }
        }
    }

    TransactionStore {
        id: txStore
        walletAssetStore: root.walletAssetStore
        tokensStore.showCommunityAssetsInSend: showCommunityAssetsCheckBox.checked
        tokensStore.displayAssetsBelowBalance: balanceThresholdCheckbox.checked
        tokensStore.getDisplayAssetsBelowBalanceThresholdDisplayAmount: () => Number(balanceThresholdValue.text)
    }

    QtObject {
        id: dummyEventData

        property ListModel toModel: ListModel {
            ListElement {
                chainId: 420
                chainName: "Optimism"
                iconUrl: "network/Network=Optimism"
                amountOut: "3003845308235848343"
            }
        }
        property var suggestesRoutes: [{
                bridgeName:"Hop",
                fromNetwork: 1,
                toNetwork: 10,
                maxAmountIn:"2649485258572837546",
                amountIn:"200000000000000000",
                amountOut:"200000000000000000",
                gasAmount:501000,
                gasFees: {
                    gasPrice:1.7e-08,
                    baseFee:1.0,
                    maxPriorityFeePerGas:2e-09,
                    maxFeePerGasL:1.1e-08,
                    maxFeePerGasM:1.0,
                    maxFeePerGasH:2.0,
                    eip1559Enabled:true
                },
                tokenFees:-0.004508663259772343,
                cost:-6.39534887667951,
                estimatedTime:1,
                amountInLocked:false,
                isFirstSimpleTx:true,
                isFirstBridgeTx:true,
                approvalRequired:false,
                approvalGasFees:0.0,
                approvalAmountRequired:"0",
                approvalContractAddress:""
            },
            {
                bridgeName:"Transfer",
                fromNetwork: 10,
                toNetwork:10,
                maxAmountIn:"443890157817650036",
                amountIn:"200000000000000000",
                amountOut:"200000000000000000",
                gasAmount:22000,
                gasFees:{
                    gasPrice:0.10000005,
                    baseFee:4.4e-08,
                    maxPriorityFeePerGas:0.1,
                    maxFeePerGasL:5e-08,
                    maxFeePerGasM:0.1,
                    maxFeePerGasH:0.2,
                    eip1559Enabled:true
                },
                tokenFees:0.0,
                bonderFees:"0x0",
                cost:0.003510716,
                estimatedTime:1,
                amountInLocked:false,
                isFirstSimpleTx:false,
                isFirstBridgeTx:false,
                approvalRequired:false,
                approvalGasFees:0.0,
                approvalAmountRequired:"0",
                approvalContractAddress:""
            }]
    }

    Item {
        anchors.left: parent.left
        SplitView.fillWidth: true
        SplitView.fillHeight: true

        Rectangle {
            anchors.fill: parent
            color: "lightgray"
        }

        Loader {
            id: loader

            property var preSelectedAccount: txStore.accounts.get(0)
            property string preSelectedHoldingID
            property int preSelectedHoldingType: Constants.TokenType.Unknown
            property int preSelectedSendType: Constants.SendType.Unknown
            property bool onlyAssets: false
            property string preDefinedAmountToSend
            property string preSelectedRecipient

            active: false

            sourceComponent: SendModal {
                visible: true
                modal: false
                closePolicy: Popup.NoAutoClose
                onlyAssets: loader.onlyAssets
                store: txStore
                preSelectedAccount: loader.preSelectedAccount
                preDefinedAmountToSend: loader.preDefinedAmountToSend
                preSelectedRecipient: loader.preSelectedRecipient
                preSelectedSendType: loader.preSelectedSendType
                preSelectedHoldingID: loader.preSelectedHoldingID
                preSelectedHoldingType: loader.preSelectedHoldingType
            }
            Component.onCompleted: loader.active = true
        }
    }

    LogsAndControlsPanel {
        SplitView.minimumHeight: 100
        SplitView.preferredHeight: 100


        ColumnLayout {
            width: parent.width
            spacing: 20

            ColumnLayout {
                spacing: 0
                Layout.topMargin: 20
                width: parent.width
                StatusBaseText {
                    Layout.maximumWidth: parent.width
                    text: "This button can be used as response to the suggestedRoutes API called once a token and its amount is selected along with a valid recipient."
                    color: "orange"
                    wrapMode: Text.WrapAnywhere
                }
                StatusButton {
                    enabled: txStore.suggestedRoutesCalled
                    text: "emit suggestedRoutesReady"
                    onClicked: {
                        let txRoutes = {
                            suggestedRoutes: dummyEventData.suggestesRoutes,
                            gasTimeEstimate:{
                                totalFeesInEth:0.0005032000000000001,
                                totalTokenFees:-0.004508663259772343,
                                totalTime:2
                            },
                            amountToReceive: txStore.amountToSend - (txStore.amountToSend*5/100),
                            toNetworksRouteModel: dummyEventData.toModel
                        }
                        txStore.fromNetworksRouteModel.updateFromNetworks(dummyEventData.suggestesRoutes)
                        txStore.toNetworksRouteModel.updateToNetworks(dummyEventData.suggestesRoutes)
                        txStore.walletSectionSendInst.suggestedRoutesReady(txRoutes)
                        txStore.suggestedRoutesCalled = false
                    }
                }
            }

            Rectangle {
                Layout.fillWidth:  true
                Layout.preferredHeight: 1
                color: "grey"
            }

            StatusBaseText {
                Layout.maximumWidth: parent.width
                text: "Note: After filling in the preSelected inputs you need to reload the SendModal as per current implementation"
                color: "orange"
                wrapMode: Text.WrapAnywhere
            }

            ColumnLayout {
                spacing: 0
                StatusBaseText {
                    text:"preSelectedAccount"
                }
                ComboBox {
                    textRole: "name"
                    model: SortFilterProxyModel {
                        sourceModel: txStore.accounts
                        filters: ValueFilter {
                            roleName: "canSend"
                            value: true
                        }
                    }
                    onCurrentIndexChanged: loader.preSelectedAccount = txStore.accounts.get(currentIndex)
                }
            }

            ColumnLayout {
                spacing: 0
                StatusBaseText {
                    text:"preSelectedHoldingType"
                }
                ComboBox {
                    id: tokenType
                    model: ["Native", "Asset", "Collectible", "Fungible Token", "Unknown", "ENS"]
                    currentIndex: 4
                    onCurrentIndexChanged: {
                        loader.preSelectedHoldingType = currentIndex
                    }
                }
            }

            StatusInput {
                enabled: tokenType.currentIndex > 0 && tokenType.currentIndex < 3
                label: "preSelectedHoldingID (case sensitive)"
                onTextChanged: loader.preSelectedHoldingID = text
            }

            StatusInput {
                label: "preDefinedAmountToSend"
                onTextChanged: loader.preDefinedAmountToSend = text
            }

            ColumnLayout {
                spacing: 0
                StatusBaseText {
                    text:"preSelectedSendType"
                }
                ComboBox {
                    model: ["Transfer",
                        "ENSRegister",
                        "ENSRelease",
                        "ENSSetPubKey",
                        "StickersBuy",
                        "Bridge",
                        "ERC721Transfer",
                        "Unknown"]
                    onCurrentIndexChanged: loader.preSelectedSendType = currentIndex
                }
            }

            StatusInput {
                label: "preSelectedRecipient"
                onTextChanged: loader.preSelectedRecipient = text
            }

            StatusButton {
                text: "Reload popup"
                onClicked: {
                    loader.item.close()
                    loader.item.open()
                }
            }

            CheckBox {
                id: showCommunityAssetsCheckBox
                text: "Show community assets when sending tokens"
                checked: true
            }

            CheckBox {
                id: balanceThresholdCheckbox
                text: "Turn on balance threshold"
                checked: false
            }

            Rectangle {
                border.width: 1
                Layout.preferredWidth: 100
                Layout.preferredHeight: 50
                color: "lightgrey"
                TextInput {
                    id: balanceThresholdValue
                    anchors.fill: parent
                    enabled: balanceThresholdCheckbox.checked
                    text: "0.10"
                    inputMethodHints: Qt.ImhFormattedNumbersOnly
                }
            }
        }
    }
}

// category: Popups