status-desktop/storybook/pages/SwapModalPage.qml

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import SortFilterProxyModel 0.2

import StatusQ 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Utils 0.1
import StatusQ.Controls 0.1

import utils 1.0
import Storybook 1.0
import Models 1.0

import shared.stores 1.0
import AppLayouts.Wallet.stores 1.0
import AppLayouts.Wallet.popups.swap 1.0

SplitView {
    id: root

    Logs { id: logs }

    orientation: Qt.Horizontal

    QtObject {
        id: d
        readonly property var accountsModel: WalletAccountsModel {}
        readonly property var tokenBySymbolModel: TokensBySymbolModel {}
        readonly property var flatNetworksModel: NetworksModel.flatNetworks
        readonly property var filteredNetworksModel: SortFilterProxyModel {
            sourceModel: d.flatNetworksModel
            filters: ValueFilter { roleName: "isTest"; value: areTestNetworksEnabledCheckbox.checked }
        }
        function launchPopup() {
            swapModal.createObject(root)
        }
        function getNetwork() {
            let selectedChain = -1
            if (networksComboBox.model.count > 0 && networksComboBox.currentIndex >= 0) {
                selectedChain = ModelUtils.get(networksComboBox.model, networksComboBox.currentIndex, "chainId")
            }
            return selectedChain
        }

        readonly property SwapTransactionRoutes dummySwapTransactionRoutes: SwapTransactionRoutes{}
    }

    PopupBackground {
        id: popupBg

        SplitView.fillWidth: true
        SplitView.fillHeight: true

        Button {
            id: reopenButton
            anchors.centerIn: parent
            text: "Reopen"
            enabled: !swapModal.visible

            onClicked: d.launchPopup()
        }

        Component.onCompleted: d.launchPopup()

        SwapInputParamsForm {
            id: swapInputForm
            selectedAccountIndex: accountComboBox.currentIndex
            selectedNetworkChainId: d.getNetwork()
            fromTokensKey: fromTokenComboBox.currentValue
            fromTokenAmount: swapInput.text
            toTokenKey: toTokenComboBox.currentValue
            toTokenAmount: swapOutputAmount.text
        }

        SwapModalAdaptor {
            id: swapModalAdaptor
            swapStore: SwapStore {
                signal suggestedRoutesReady(var txRoutes)
                readonly property var accounts: d.accountsModel
                readonly property var flatNetworks: d.flatNetworksModel
                readonly property bool areTestNetworksEnabled: areTestNetworksEnabledCheckbox.checked

                function fetchSuggestedRoutes(accountFrom, accountTo, amount, tokenFrom, tokenTo,
                                            disabledFromChainIDs, disabledToChainIDs, preferredChainIDs, sendType, lockedInAmounts) {
                    console.debug("fetchSuggestedRoutes called >> accountFrom = ",accountFrom, " accountTo =",
                                  accountTo, "amount = ",amount, " tokenFrom = ",tokenFrom, " tokenTo = ", tokenTo,
                                  " disabledFromChainIDs = ",disabledFromChainIDs, " disabledToChainIDs = ",disabledToChainIDs,
                                  " preferredChainIDs = ",preferredChainIDs, " sendType =", sendType, " lockedInAmounts = ",lockedInAmounts)
                }
                function authenticateAndTransfer(uuid, accountFrom, accountTo, tokenFrom,
                                                 tokenTo, sendType, tokenName, tokenIsOwnerToken, paths) {
                    console.debug("authenticateAndTransfer called >> uuid ", uuid, " accountFrom = ",accountFrom, " accountTo =",
                                  accountTo, "tokenFrom = ",tokenFrom, " tokenTo = ",tokenTo, " sendType = ", sendType,
                                  " tokenName = ", tokenName, " tokenIsOwnerToken = ", tokenIsOwnerToken, " paths = ", paths)
                }
                function getWei2Eth(wei, decimals) {
                    return wei/(10**decimals)
                }
            }
            walletAssetsStore: WalletAssetsStore {
                id: thisWalletAssetStore
                walletTokensStore: TokensStore {
                    readonly property var plainTokensBySymbolModel: TokensBySymbolModel {}
                    getDisplayAssetsBelowBalanceThresholdDisplayAmount: () => 0
                }
                readonly property var baseGroupedAccountAssetModel: GroupedAccountsAssetsModel {}
                assetsWithFilteredBalances: thisWalletAssetStore.groupedAccountsAssetsModel
            }
            currencyStore: CurrenciesStore {}
            swapFormData: swapInputForm
            swapOutputData: SwapOutputData{}
        }

        Component {
            id: swapModal
            SwapModal {
                visible: true
                modal: false
                closePolicy: Popup.CloseOnEscape
                destroyOnClose: true
                swapInputParamsForm: swapInputForm
                swapAdaptor: swapModalAdaptor
            }
        }
    }

    Pane {
        id: rightPanel
        SplitView.minimumWidth: 300
        SplitView.preferredWidth: 300
        SplitView.minimumHeight: 300

        ColumnLayout {
            spacing: 10

            CheckBox {
                id: areTestNetworksEnabledCheckbox
                text: "areTestNetworksEnabled"
                checked: true
                onToggled: networksComboBox.currentIndex = 0
            }

            StatusBaseText {
                text:"Selected Account"
            }
            ComboBox {
                id: accountComboBox
                textRole: "name"
                model: SortFilterProxyModel {
                    sourceModel: d.accountsModel
                    filters: ValueFilter {
                        roleName: "walletType"
                        value: Constants.watchWalletType
                        inverted: true
                    }
                    sorters: RoleSorter { roleName: "position"; sortOrder: Qt.AscendingOrder }
                }
                currentIndex: 0
                onCurrentIndexChanged: {
                    swapInputForm.selectedAccountIndex = currentIndex
                }
            }

            StatusBaseText {
                text: "Selected Network"
            }
            ComboBox {
                id: networksComboBox
                textRole: "chainName"
                model: d.filteredNetworksModel
                currentIndex: 0
                onCountChanged: currentIndex = 0
                onCurrentIndexChanged: swapInputForm.selectedNetworkChainId = d.getNetwork()
            }

            StatusBaseText {
                text: "From Token"
            }
            ComboBox {
                id: fromTokenComboBox
                textRole: "name"
                valueRole: "key"
                model: d.tokenBySymbolModel
                currentIndex: 0
            }

            StatusInput {
                id: swapInput
                Layout.preferredWidth: 100
                label: "Token amount to swap"
                text: "100"
            }

            StatusBaseText {
                text: "To Token"
            }
            ComboBox {
                id: toTokenComboBox
                textRole: "name"
                valueRole: "key"
                model: d.tokenBySymbolModel
                currentIndex: 1
            }

            Button {
                text: "emit no routes found event"
                onClicked: {
                    swapModalAdaptor.swapStore.suggestedRoutesReady(d.dummySwapTransactionRoutes.txNoRoutes)
                }
            }

            Button {
                text: "emit no approval needed route"
                onClicked: {
                    swapModalAdaptor.swapStore.suggestedRoutesReady(d.dummySwapTransactionRoutes.txHasRouteNoApproval)
                }
            }

            Button {
                text: "emit approval needed route"
                onClicked: {
                    swapModalAdaptor.swapStore.suggestedRoutesReady(d.dummySwapTransactionRoutes.txHasRoutesApprovalNeeded)
                }
            }
        }
    }
}

// category: Popups