feat(@desktop/wallet): Buy Mercuryo flow - Improvements

fixes #16041
2024-08-13 14:03:35 +02:00 · 2024-08-13 14:03:35 +02:00 · b8f41e35c4
parent 2c2f87f654
commit b8f41e35c4
8 changed files with 499 additions and 308 deletions
--- a/storybook/pages/BuyCryptoModalPage.qml
+++ b/storybook/pages/BuyCryptoModalPage.qml
@ -5,10 +5,12 @@ import QtQuick.Layouts 1.15
 import Storybook 1.0
 import Models 1.0

+import StatusQ 0.1
 import StatusQ.Core.Backpressure 0.1

 import AppLayouts.Wallet.popups.buy 1.0
 import AppLayouts.Wallet.stores 1.0
+import AppLayouts.Wallet.adaptors 1.0

 import shared.stores 1.0

@ -47,6 +49,22 @@ SplitView {
                d.debounceFetchProviderUrl()
            }
        }
+
+        readonly property var currencyStore: CurrenciesStore {}
+        readonly property var assetsStore: WalletAssetsStore {
+            id: thisWalletAssetStore
+            walletTokensStore: TokensStore {
+                plainTokensBySymbolModel: TokensBySymbolModel {}
+            }
+            readonly property var baseGroupedAccountAssetModel: GroupedAccountsAssetsModel {}
+            assetsWithFilteredBalances: thisWalletAssetStore.groupedAccountsAssetsModel
+        }
+        readonly property BuyCryptoParamsForm buyCryptoInputParamsForm: BuyCryptoParamsForm{
+            selectedWalletAddress: "0x7F47C2e18a4BBf5487E6fb082eC2D9Ab0E6d7240"
+            selectedNetworkChainId: 11155111
+            selectedTokenKey: "ETH"
+        }
+
    }

    PopupBackground {
@ -61,7 +79,12 @@ SplitView {
            text: "Reopen"
            enabled: !buySellModal.visible

-            onClicked: buySellModal.open()
+            onClicked: {
+                buySellModal.buyCryptoInputParamsForm.selectedWalletAddress = "0x7F47C2e18a4BBf5487E6fb082eC2D9Ab0E6d7240"
+                buySellModal.buyCryptoInputParamsForm.selectedNetworkChainId = 11155111
+                buySellModal.buyCryptoInputParamsForm.selectedTokenKey = "ETH"
+                buySellModal.open()
+            }
        }

        BuyCryptoModal {
@ -70,29 +93,19 @@ SplitView {
            visible: true
            modal: false
            closePolicy: Popup.CloseOnEscape
-            buyCryptoAdaptor: BuyCryptoModalAdaptor {
-                buyCryptoStore: d.buyCryptoStore
-                readonly property var currencyStore: CurrenciesStore {}
-                readonly property var assetsStore: WalletAssetsStore {
-                    id: thisWalletAssetStore
-                    walletTokensStore: TokensStore {
-                        plainTokensBySymbolModel: TokensBySymbolModel {}
-                    }
-                    readonly property var baseGroupedAccountAssetModel: GroupedAccountsAssetsModel {}
-                    assetsWithFilteredBalances: thisWalletAssetStore.groupedAccountsAssetsModel
-                }
-                buyCryptoFormData: buySellModal.buyCryptoInputParamsForm
-                walletAccountsModel: WalletAccountsModel{}
-                networksModel: NetworksModel.flatNetworks
-                areTestNetworksEnabled: true
-                groupedAccountAssetsModel: assetsStore.groupedAccountAssetsModel
-                plainTokensBySymbolModel: assetsStore.walletTokensStore.plainTokensBySymbolModel
-                currentCurrency: currencyStore.currentCurrency
-            }
-            buyCryptoInputParamsForm: BuyCryptoParamsForm{
-                selectedWalletAddress: "0x7F47C2e18a4BBf5487E6fb082eC2D9Ab0E6d7240"
-                selectedNetworkChainId: 11155111
-                selectedTokenKey: "ETH"
+            buyProvidersModel: d.buyCryptoStore.providersModel
+            isBuyProvidersModelLoading: d.buyCryptoStore.areProvidersLoading
+            walletAccountsModel: WalletAccountsModel{}
+            networksModel: NetworksModel.flatNetworks
+            areTestNetworksEnabled: true
+            currentCurrency: d.currencyStore.currentCurrency
+            plainTokensBySymbolModel: d.assetsStore.walletTokensStore.plainTokensBySymbolModel
+            groupedAccountAssetsModel: d.assetsStore.groupedAccountAssetsModel
+            buyCryptoInputParamsForm: d.buyCryptoInputParamsForm
+            Component.onCompleted: {
+                fetchProviders.connect(d.buyCryptoStore.fetchProviders)
+                fetchProviderUrl.connect(d.buyCryptoStore.fetchProviderUrl)
+                d.buyCryptoStore.providerUrlReady.connect(providerUrlReady)
            }
        }
    }
--- a/storybook/qmlTests/tests/tst_BuyCryptoModal.qml
+++ b/storybook/qmlTests/tests/tst_BuyCryptoModal.qml
@ -3,6 +3,8 @@ import QtTest 1.15

 import SortFilterProxyModel 0.2

+import StatusQ 0.1
+import StatusQ.Core.Utils 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Core.Utils 0.1 as SQUtils
 import StatusQ.Core.Backpressure 0.1
@ -22,77 +24,88 @@ Item {

    QtObject {
        id: d
-        property string uuid
-        property var debounceFetchProviderUrl: Backpressure.debounce(root, 500, function() {
-            d.buyCryptoStore.providerUrlReady(d.uuid, "xxxx")
-        })
-        property var debounceFetchProvidersList: Backpressure.debounce(root, 500, function() {
-            d.buyCryptoStore.areProvidersLoading = false
-        })
-        readonly property var buyCryptoStore: BuyCryptoStore {
-            readonly property var providersModel: _onRampProvidersModel
-            property bool areProvidersLoading
-            signal providerUrlReady(string uuid , string url)

-            function fetchProviders() {
-                console.warn("fetchProviders called >>")
-                areProvidersLoading = true
-                d.debounceFetchProvidersList()
-            }
-
-            function fetchProviderUrl(uuid, providerID,
-                                      isRecurrent, accountAddress = "",
-                                      chainID = 0, symbol = "") {
-                console.warn("fetchProviderUrl called >> uuid: ", uuid, "providerID: ",providerID
-                             , "isRecurrent: ", isRecurrent, "accountAddress: ", accountAddress,
-                             "chainID: ", chainID, "symbol: ", symbol)
-                d.uuid = uuid
-                d.debounceFetchProviderUrl()
-            }
-        }
-    }
-
-    OnRampProvidersModel{
-        id: _onRampProvidersModel
-    }
-
-    SortFilterProxyModel {
-        id: recurrentOnRampProvidersModel
-        sourceModel: _onRampProvidersModel
-        filters: ValueFilter {
-            roleName: "supportsRecurrentPurchase"
-            value: true
-        }
    }

    Component {
        id: componentUnderTest
        BuyCryptoModal {
            id: buySellModal
-            buyCryptoAdaptor: BuyCryptoModalAdaptor {
-                buyCryptoStore: d.buyCryptoStore
-                readonly property var currencyStore: CurrenciesStore {}
-                readonly property var assetsStore: WalletAssetsStore {
-                    id: thisWalletAssetStore
-                    walletTokensStore: TokensStore {
-                        plainTokensBySymbolModel: TokensBySymbolModel {}
-                    }
-                    readonly property var baseGroupedAccountAssetModel: GroupedAccountsAssetsModel {}
-                    assetsWithFilteredBalances: thisWalletAssetStore.groupedAccountsAssetsModel
-                }
-                buyCryptoFormData: buySellModal.buyCryptoInputParamsForm
-                walletAccountsModel: WalletAccountsModel{}
-                networksModel: NetworksModel.flatNetworks
-                areTestNetworksEnabled: true
-                groupedAccountAssetsModel: assetsStore.groupedAccountAssetsModel
-                plainTokensBySymbolModel: assetsStore.walletTokensStore.plainTokensBySymbolModel
-                currentCurrency: currencyStore.currentCurrency
-            }
-            buyCryptoInputParamsForm: BuyCryptoParamsForm{
+
+            buyProvidersModel: buyCryptoStore.providersModel
+            isBuyProvidersModelLoading: buyCryptoStore.areProvidersLoading
+            currentCurrency: currencyStore.currentCurrency
+            walletAccountsModel: WalletAccountsModel{}
+            networksModel: NetworksModel.flatNetworks
+            areTestNetworksEnabled: true
+            plainTokensBySymbolModel: assetsStore.walletTokensStore.plainTokensBySymbolModel
+            groupedAccountAssetsModel: assetsStore.groupedAccountAssetsModel
+            buyCryptoInputParamsForm: BuyCryptoParamsForm {
                selectedWalletAddress: "0x7F47C2e18a4BBf5487E6fb082eC2D9Ab0E6d7240"
                selectedNetworkChainId: 11155111
                selectedTokenKey: "ETH"
            }
+            Component.onCompleted: {
+                fetchProviders.connect(buyCryptoStore.fetchProviders)
+                fetchProviderUrl.connect(buyCryptoStore.fetchProviderUrl)
+                buyCryptoStore.providerUrlReady.connect(buySellModal.providerUrlReady)
+            }
+
+            // Temporary assignments to make tests run independently
+            readonly property var currencyStore: CurrenciesStore {}
+            readonly property var buyCryptoStore: BuyCryptoStore {
+                readonly property var providersModel: OnRampProvidersModel{}
+                property bool areProvidersLoading
+                signal providerUrlReady(string uuid ,string url)
+
+                function fetchProviders() {
+                    console.warn("fetchProviders called >>")
+                    areProvidersLoading = true
+                    debounceFetchProvidersList()
+                }
+
+                function fetchProviderUrl(uuid, providerID,
+                                          isRecurrent, accountAddress = "",
+                                          chainID = 0, symbol = "") {
+                    console.warn("fetchProviderUrl called >> uuid: ", uuid, "providerID: ",providerID
+                                 , "isRecurrent: ", isRecurrent, "accountAddress: ", accountAddress,
+                                 "chainID: ", chainID, "symbol: ", symbol)
+                    buySellModal.uuid = uuid
+                    debounceFetchProviderUrl()
+                }
+            }
+            readonly property ModelEntry selectedAccountEntry: ModelEntry {
+                sourceModel: walletAccountsModel
+                key: "address"
+                value: buyCryptoInputParamsForm.selectedWalletAddress
+            }
+            readonly property ModelEntry selectedProviderEntry: ModelEntry {
+                sourceModel: buyCryptoStore.providersModel
+                key: "id"
+                value: buyCryptoInputParamsForm.selectedProviderId
+            }
+            readonly property var recurrentOnRampProvidersModel: SortFilterProxyModel {
+                sourceModel: buyProvidersModel
+                filters: ValueFilter {
+                    roleName: "supportsRecurrentPurchase"
+                    value: true
+                }
+            }
+            readonly property var assetsStore: WalletAssetsStore {
+                id: thisWalletAssetStore
+                walletTokensStore: TokensStore {
+                    plainTokensBySymbolModel: TokensBySymbolModel {}
+                }
+                readonly property var baseGroupedAccountAssetModel: GroupedAccountsAssetsModel {}
+                assetsWithFilteredBalances: thisWalletAssetStore.groupedAccountsAssetsModel
+            }
+            property string uuid
+            property var debounceFetchProviderUrl: Backpressure.debounce(root, 500, function() {
+                buySellModal.buyCryptoStore.providerUrlReady(uuid, "xxxx")
+            })
+            property var debounceFetchProvidersList: Backpressure.debounce(root, 500, function() {
+                buySellModal.buyCryptoStore.areProvidersLoading = false
+            })
        }
    }

@ -109,11 +122,15 @@ Item {
        property BuyCryptoModal controlUnderTest: null

        function init() {
+            notificationSpy.clear()
            controlUnderTest = createTemporaryObject(componentUnderTest, root)
        }

        function launchPopup() {
            verify(!!controlUnderTest)
+            controlUnderTest.buyCryptoInputParamsForm.selectedWalletAddress = "0x7F47C2e18a4BBf5487E6fb082eC2D9Ab0E6d7240"
+            controlUnderTest.buyCryptoInputParamsForm.selectedNetworkChainId = 11155111
+            controlUnderTest.buyCryptoInputParamsForm.selectedTokenKey = "ETH"
            controlUnderTest.open()
            verify(!!controlUnderTest.opened)
        }
@ -126,26 +143,152 @@ Item {
                compare(delegateUnderTest.title, modelToCompareAgainst.get(i).name)
                compare(delegateUnderTest.subTitle, modelToCompareAgainst.get(i).description)
                compare(delegateUnderTest.asset.name, modelToCompareAgainst.get(i).logoUrl)
+                compare(delegateUnderTest.isUrlLoading, false)

                const feesText = findChild(delegateUnderTest, "feesText")
                verify(!!feesText)
-                compare(feesText.text,  modelToCompareAgainst.get(i).fees)
+                compare(feesText.text, modelToCompareAgainst.get(i).fees)

-                /* TODO: fix when writing more tests for this functionality
-                const externalLinkIcon = findChild(delegateUnderTest, "externalLinkIcon")
-                verify(!!externalLinkIcon)
-                compare(externalLinkIcon.icon, "tiny/external")
-                compare(externalLinkIcon.color, Theme.palette.baseColor1) */
+                const loadingIndicator = findChild(delegateUnderTest, "loadingIndicator")
+                verify(!!loadingIndicator)
+                verify(!loadingIndicator.visible)
+
+                var extraIcon = null
+                if (modelToCompareAgainst.get(i).urlsNeedParameters) {
+                    extraIcon = findChild(delegateUnderTest, "chevron-down-icon")
+                    verify(!!extraIcon)
+                    compare(extraIcon.icon, "chevron-down")
+                    compare(extraIcon.rotation, 270)
+                    compare(extraIcon.color, Theme.palette.baseColor1)
+                } else {
+                    extraIcon = findChild(delegateUnderTest, "tiny/external-icon")
+                    verify(!!extraIcon)
+                    compare(extraIcon.icon, "tiny/external")
+                    compare(extraIcon.rotation, 0)
+                    compare(extraIcon.color, Theme.palette.baseColor1)
+                }

                // Hover over the item and check hovered state
                mouseMove(delegateUnderTest, delegateUnderTest.width/2, delegateUnderTest.height/2)
                verify(delegateUnderTest.sensor.containsMouse)
-                /* TODO: fix when writing more tests for this functionality
-                compare(externalLinkIcon.color, Theme.palette.directColor1) */
+                compare(extraIcon.color, Theme.palette.directColor1)
                verify(delegateUnderTest.color, Theme.palette.baseColor2)
            }
        }

+        function testDelegateMouseClicksForProvidersThatNeedParams(delegateUnderTest, modelData) {
+            const loadingIndicator = findChild(delegateUnderTest, "loadingIndicator")
+            verify(!!loadingIndicator)
+            verify(!loadingIndicator.visible)
+
+            verify(!controlUnderTest.replaceItem)
+
+            // test mouse click
+            tryCompare(notificationSpy, "count", 0)
+            mouseClick(delegateUnderTest)
+
+            waitForRendering(controlUnderTest.replaceLoader)
+            verify(controlUnderTest.replaceItem)
+
+            const selectParamsPanel = findChild(controlUnderTest, "selectParamsPanel")
+            verify(!!selectParamsPanel)
+
+            // title should not change
+            verify(controlUnderTest.stackTitle, qsTr("Buy assets for %1").arg(!!controlUnderTest.selectedAccountEntry.item ? controlUnderTest.selectedAccountEntry.item.name: ""))
+
+            compare(controlUnderTest.rightButtons.length, 2)
+            verify(controlUnderTest.rightButtons[0].visible)
+            verify(controlUnderTest.rightButtons[1].enabled)
+            verify(controlUnderTest.rightButtons[0].text, qsTr("Buy via %1").arg(!!controlUnderTest.selectedProviderEntry.item ? controlUnderTest.selectedProviderEntry.item.name: ""))
+            verify(!controlUnderTest.rightButtons[1].visible)
+            verify(controlUnderTest.backButton.visible)
+
+            const selectParamsForBuyCryptoPanelHeader = findChild(selectParamsPanel, "selectParamsForBuyCryptoPanelHeader")
+            verify(!!selectParamsForBuyCryptoPanelHeader)
+            compare(selectParamsForBuyCryptoPanelHeader.title, qsTr("Buy via %1").arg(!!controlUnderTest.selectedProviderEntry.item ? controlUnderTest.selectedProviderEntry.item.name: ""))
+            compare(selectParamsForBuyCryptoPanelHeader.subTitle, qsTr("Select which network and asset"))
+            compare(selectParamsForBuyCryptoPanelHeader.statusListItemTitle.color, Theme.palette.directColor1)
+            compare(selectParamsForBuyCryptoPanelHeader.asset.name, !!controlUnderTest.selectedProviderEntry.item  ? controlUnderTest.selectedProviderEntry.item .logoUrl: "")
+            compare(selectParamsForBuyCryptoPanelHeader.color, Theme.palette.transparent)
+            compare(selectParamsForBuyCryptoPanelHeader.enabled, false)
+
+            const networkFilter = findChild(selectParamsPanel, "networkFilter")
+            verify(!!networkFilter)
+            compare(networkFilter.selection, [controlUnderTest.buyCryptoInputParamsForm.selectedNetworkChainId])
+
+            const tokenSelector = findChild(selectParamsPanel, "tokenSelector")
+            verify(!!tokenSelector)
+            compare(tokenSelector.currentTokensKey, controlUnderTest.buyCryptoInputParamsForm.selectedTokenKey)
+
+            const selectedTokenItem = findChild(selectParamsPanel, "selectedTokenItem")
+            verify(!!selectedTokenItem)
+
+            const modelDataToTest = ModelUtils.getByKey(tokenSelector.model, "tokensKey", tokenSelector.currentTokensKey)
+            const tokenSelectorIcon = findChild(selectedTokenItem, "tokenSelectorIcon")
+            verify(!!tokenSelectorIcon)
+            compare(tokenSelectorIcon.image.source, modelDataToTest.iconSource)
+
+            const tokenSelectorContentItemName = findChild(selectedTokenItem, "tokenSelectorContentItemName")
+            verify(!!tokenSelectorContentItemName)
+            compare(tokenSelectorContentItemName.text,  modelDataToTest.name)
+
+            const tokenSelectorContentItemSymbol = findChild(selectedTokenItem, "tokenSelectorContentItemSymbol")
+            verify(!!tokenSelectorContentItemSymbol)
+            compare(tokenSelectorContentItemSymbol.text,  modelDataToTest.symbol)
+
+            //switch to a network that has no tokens and ensure its reset
+            controlUnderTest.buyCryptoInputParamsForm.selectedNetworkChainId = 421613
+
+            waitForRendering(selectParamsPanel)
+
+            const nothingSelectedContentItem = findChild(selectParamsPanel, "tokenSelectorContentItemText")
+            verify(!!nothingSelectedContentItem)
+            verify(!selectedTokenItem.visible)
+            verify(!controlUnderTest.rightButtons[0].enabled)
+
+            // switch back a network and token thats valid and check if clicking buy button works properly
+            controlUnderTest.buyCryptoInputParamsForm.selectedNetworkChainId = 11155111
+            controlUnderTest.buyCryptoInputParamsForm.selectedTokenKey = "ETH"
+
+            waitForRendering(selectParamsPanel)
+            verify(controlUnderTest.rightButtons[0].enabled)
+
+            mouseClick(controlUnderTest.rightButtons[0])
+
+            verify(controlUnderTest.rightButtons[0].loading)
+            tryCompare(notificationSpy, "count", 1)
+            compare(notificationSpy.signalArguments[0][0], "xxxx")
+            compare(notificationSpy.signalArguments[0][1], modelData.hostname)
+            notificationSpy.clear()
+
+            // popup should be closed
+            verify(!controlUnderTest.opened)
+        }
+
+        function testDelegateMouseClicksForProvidersThatNeedNoParams(delegateUnderTest, modelData) {
+            // test provider that need no parameters and we directly redirect to the site
+            const loadingIndicator = findChild(delegateUnderTest, "loadingIndicator")
+            verify(!!loadingIndicator)
+            verify(!loadingIndicator.visible)
+
+            const extraIcon = findChild(delegateUnderTest, "tiny/external-icon")
+            verify(!!extraIcon)
+            verify(!extraIcon.visble)
+
+            // test mouse click
+            tryCompare(notificationSpy, "count", 0)
+            mouseClick(delegateUnderTest)
+
+            verify(loadingIndicator.visible)
+            tryCompare(notificationSpy, "count", 1)
+            compare(notificationSpy.signalArguments[0][0], "xxxx")
+            compare(notificationSpy.signalArguments[0][1], modelData.hostname)
+            notificationSpy.clear()
+
+            // popup should be closed
+            verify(!controlUnderTest.opened)
+        }
+
        function test_launchAndCloseModal() {
            launchPopup()

@ -165,6 +308,8 @@ Item {
            compare(controlUnderTest.rightButtons[1].text, qsTr("Done"))
            mouseClick(controlUnderTest.rightButtons[1])

+            verify(!controlUnderTest.backButton.visible)
+
            // popup should be closed
            verify(!controlUnderTest.opened)
        }
@ -173,6 +318,8 @@ Item {
            // Launch modal
            launchPopup()

+            verify(controlUnderTest.stackTitle, qsTr("Buy assets for %1").arg(!!controlUnderTest.selectedAccountEntry.item ? controlUnderTest.selectedAccountEntry.item.name: ""))
+
            // find tab bar
            const tabBar = findChild(controlUnderTest, "tabBar")
            verify(!!tabBar)
@ -210,10 +357,9 @@ Item {

            // find providers list
            const providersList = findChild(controlUnderTest, "providersList")
-            waitForRendering(providersList)
            verify(!!providersList)

-            tryCompare(controlUnderTest.buyCryptoAdaptor.buyCryptoStore, "areProvidersLoading", false)
+            tryCompare(controlUnderTest, "isBuyProvidersModelLoading", false)

            mouseClick(tabBar.itemAt(0))
            compare(tabBar.currentIndex, 0)
@ -222,21 +368,42 @@ Item {
            compare(providersList.count, 4)

            // check if delegate contents are as expected
-            testDelegateItems(providersList, _onRampProvidersModel)
+            testDelegateItems(providersList, controlUnderTest.buyProvidersModel)

-            let delegateUnderTest = providersList.itemAtIndex(0)
-            verify(!!delegateUnderTest)
+            controlUnderTest.close()
+        }

-            // test mouse click
-            tryCompare(notificationSpy, "count", 0)
-            mouseClick(delegateUnderTest)
-            tryCompare(notificationSpy, "count", 1)
-            compare(notificationSpy.signalArguments[0][0], "xxxx")
-            compare(notificationSpy.signalArguments[0][1], _onRampProvidersModel.get(0).hostname)
+        function test_modalContent_OneTime_tab_mouseClicks() {
            notificationSpy.clear()
+            // Launch modal
+            launchPopup()

-            // popup should be closed
-            verify(!controlUnderTest.opened)
+            // find providers list
+            const providersList = findChild(controlUnderTest, "providersList")
+            verify(!!providersList)
+
+            for(let i =0; i< controlUnderTest.buyProvidersModel.count; i++) {
+                notificationSpy.clear()
+                launchPopup()
+                verify(controlUnderTest.opened)
+
+                tryCompare(controlUnderTest, "isBuyProvidersModelLoading", false)
+
+                let delegateUnderTest = providersList.itemAtIndex(i)
+                verify(!!delegateUnderTest)
+                waitForRendering(delegateUnderTest)
+
+                // test provider that need parameters like network and token to be selected
+                const modelData = controlUnderTest.buyProvidersModel.get(i)
+                verify(!!modelData)
+                if (modelData.urlsNeedParameters) {
+                    testDelegateMouseClicksForProvidersThatNeedParams(delegateUnderTest, modelData)
+                } else {
+                    testDelegateMouseClicksForProvidersThatNeedNoParams(delegateUnderTest, modelData)
+                }
+            }
+
+            controlUnderTest.close()
        }

        function test_modalContent_recurrent_tab() {
@ -252,7 +419,7 @@ Item {
            const providersList = findChild(controlUnderTest, "providersList")
            verify(!!providersList)

-            tryCompare(controlUnderTest.buyCryptoAdaptor.buyCryptoStore, "areProvidersLoading", false)
+            tryCompare(controlUnderTest, "isBuyProvidersModelLoading", false)

            // check data in "Recurrent" tab --------------------------------------------------------
            mouseClick(tabBar.itemAt(1))
@ -264,18 +431,48 @@ Item {
            compare(providersList.count, 1)

            // check if delegate contents are as expected
-            testDelegateItems(providersList, recurrentOnRampProvidersModel)
+            testDelegateItems(providersList, controlUnderTest.recurrentOnRampProvidersModel)
+            controlUnderTest.close()
+        }

-            let delegateUnderTest = providersList.itemAtIndex(0)
-            verify(!!delegateUnderTest)
-
-            // test mouse click
-            tryCompare(notificationSpy, "count", 0)
-            verify(controlUnderTest.opened)
-            mouseClick(delegateUnderTest)
-            tryCompare(notificationSpy, "count", 0)
+        function test_modalContent_Recurrent_tab_mouseClicks() {
            notificationSpy.clear()
-            //TODO: add more test logic here for second page of selecting params
+            // Launch modal
+            launchPopup()
+
+            // find tab bar
+            const tabBar = findChild(controlUnderTest, "tabBar")
+            verify(!!tabBar)
+
+            // find providers list
+            const providersList = findChild(controlUnderTest, "providersList")
+            verify(!!providersList)
+
+            mouseClick(tabBar.itemAt(1))
+            compare(tabBar.currentIndex, 1)
+            waitForRendering(providersList)
+            verify(!!providersList)
+
+            for(let i =0; i< controlUnderTest.recurrentOnRampProvidersModel.count; i++) {
+                notificationSpy.clear()
+                launchPopup()
+                verify(controlUnderTest.opened)
+
+                tryCompare(controlUnderTest, "isBuyProvidersModelLoading", false)
+
+                let delegateUnderTest = providersList.itemAtIndex(i)
+                verify(!!delegateUnderTest)
+                waitForRendering(delegateUnderTest)
+
+                // test provider that need parameters like network and token to be selected
+                const modelData = controlUnderTest.recurrentOnRampProvidersModel.get(i)
+                verify(!!modelData)
+                if (modelData.urlsNeedParameters) {
+                    testDelegateMouseClicksForProvidersThatNeedParams(delegateUnderTest, modelData)
+                } else {
+                    testDelegateMouseClicksForProvidersThatNeedNoParams(delegateUnderTest, modelData)
+                }
+            }
        }
    }
 }
--- a/ui/app/AppLayouts/Wallet/controls/BuyCryptoProvidersDelegate.qml
+++ b/ui/app/AppLayouts/Wallet/controls/BuyCryptoProvidersDelegate.qml
@ -35,13 +35,13 @@ StatusListItem {
            loading: root.loading
        },
        StatusIcon {
-            objectName: "externalLinkIcon"
            icon: root.urlsNeedParameters ? "chevron-down": "tiny/external"
            rotation: root.urlsNeedParameters ? 270: 0
            color: sensor.containsMouse ? Theme.palette.directColor1: Theme.palette.baseColor1
            visible: !root.loading && !root.isUrlLoading
        },
        StatusLoadingIndicator {
+            objectName: "loadingIndicator"
            visible: root.isUrlLoading
        }
    ]
--- a/ui/app/AppLayouts/Wallet/panels/SelectParamsForBuyCryptoPanel.qml
+++ b/ui/app/AppLayouts/Wallet/panels/SelectParamsForBuyCryptoPanel.qml
@ -16,7 +16,7 @@ ColumnLayout {
    id: root

    // required properties
-    required property var adaptor
+    required property var assetsModel
    required property var selectedProvider
    required property string selectedTokenKey
    required property int selectedNetworkChainId
@ -27,9 +27,24 @@ ColumnLayout {
    signal networkSelected(int chainId)
    signal tokenSelected(string tokensKey)

+    QtObject {
+        id: d
+        function updateTokenSelector() {
+            Qt.callLater(()=> {
+                             if(!!holdingSelector.model && !!root.selectedTokenKey && root.selectedNetworkChainId !== -1) {
+                                 holdingSelector.selectToken(root.selectedTokenKey)
+                             }
+                         })
+        }
+    }
+
+    onSelectedTokenKeyChanged: d.updateTokenSelector()
+    onSelectedNetworkChainIdChanged: d.updateTokenSelector()
+
    spacing: 20

    StatusListItem {
+        objectName: "selectParamsForBuyCryptoPanelHeader"
        Layout.fillWidth: true
        Layout.alignment: Qt.AlignLeft
        leftPadding: 0
@ -81,8 +96,9 @@ ColumnLayout {
        }
        TokenSelector {
            id: holdingSelector
+            objectName: "tokenSelector"
            Layout.fillWidth: true
-            model: root.adaptor.outputAssetsModel
+            model: root.assetsModel
            popup.width: parent.width
            contentItem:  Loader {
                height: 40 // by design
@ -93,7 +109,6 @@ ColumnLayout {
                color: Theme.palette.transparent
            }
            onTokenSelected: root.tokenSelected(tokensKey)
-            Component.onCompleted: holdingSelector.selectToken(root.selectedTokenKey)
        }
    }

@ -111,6 +126,7 @@ ColumnLayout {
    Component {
        id: selectedTokenCmp
        RowLayout {
+            objectName: "selectedTokenItem"
            spacing: Style.current.halfPadding
            StatusRoundedImage {
                objectName: "tokenSelectorIcon"
@ -119,14 +135,14 @@ ColumnLayout {
                image.source: ModelUtils.getByKey(holdingSelector.model, "tokensKey", holdingSelector.currentTokensKey, "iconSource")
            }
            StatusBaseText {
-                objectName: "tokenSelectorContentItemText"
+                objectName: "tokenSelectorContentItemName"
                font.pixelSize: 15
                color: Theme.palette.directColor1
                text: ModelUtils.getByKey(holdingSelector.model, "tokensKey", holdingSelector.currentTokensKey, "name")
            }
            StatusBaseText {
                Layout.fillWidth: true
-                objectName: "tokenSelectorContentItemText"
+                objectName: "tokenSelectorContentItemSymbol"
                font.pixelSize: 15
                color: Theme.palette.baseColor1
                text: ModelUtils.getByKey(holdingSelector.model, "tokensKey", holdingSelector.currentTokensKey, "symbol")
--- a/ui/app/AppLayouts/Wallet/popups/buy/BuyCryptoModal.qml
+++ b/ui/app/AppLayouts/Wallet/popups/buy/BuyCryptoModal.qml
@ -17,78 +17,161 @@ import utils 1.0
 import AppLayouts.Wallet.controls 1.0
 import AppLayouts.Wallet.adaptors 1.0
 import AppLayouts.Wallet.panels 1.0
+import AppLayouts.Wallet.stores 1.0

 StatusStackModal {
    id: root

+    // required data
+    required property var buyProvidersModel
+    required property var isBuyProvidersModelLoading
+
    required property BuyCryptoParamsForm buyCryptoInputParamsForm
-    required property BuyCryptoModalAdaptor buyCryptoAdaptor
+    required property var plainTokensBySymbolModel
+    required property var groupedAccountAssetsModel
+    required property var walletAccountsModel
+    required property var networksModel
+    required property bool areTestNetworksEnabled
+    required property string currentCurrency
+
+    signal fetchProviders()
+    signal fetchProviderUrl(string uuid,
+                            string providerID,
+                            bool isRecurrent,
+                            string selectedWalletAddress,
+                            int chainID,
+                            string symbol)
+
+    // FIXME handling error in case the response is not successful
+    function providerUrlReady(uuid, url) {
+        if(uuid === d.uuid) {
+            d.urlIsBeingFetched = false
+            if (!!d.selectedProviderEntry.item && !!url)
+                Global.openLinkWithConfirmation(url, d.selectedProviderEntry.item.hostname)
+            root.close()
+        }
+    }
    
    QtObject {
        id: d
+
+        // States to track requests
+        property string uuid
+        property bool urlIsBeingFetched
+
        readonly property var buyButton: StatusButton {
            height: root.finishButton.height
            visible: !!root.replaceItem
            borderColor: "transparent"
-            text: qsTr("Buy via %1").arg(!!root.buyCryptoAdaptor.selectedProvider ? root.buyCryptoAdaptor.selectedProvider.name: "")
-            loading: root.buyCryptoAdaptor.urlIsBeingFetched
+            text: qsTr("Buy via %1").arg(!!d.selectedProviderEntry.item ? d.selectedProviderEntry.item.name: "")
+            loading: d.urlIsBeingFetched
            onClicked: {
-                if(!!root.buyCryptoAdaptor.selectedProvider && !!root.buyCryptoAdaptor.selectedToken) {
-                    root.buyCryptoAdaptor.fetchProviderUrl(
+                if(!!d.selectedProviderEntry.item && !!d.selectedTokenEntry.item) {
+                    d.fetchProviderUrl(
                                root.buyCryptoInputParamsForm.selectedProviderId,
                                buyCryptoProvidersListPanel.currentTabIndex,
                                root.buyCryptoInputParamsForm.selectedWalletAddress,
                                root.buyCryptoInputParamsForm.selectedNetworkChainId,
-                                root.buyCryptoAdaptor.selectedToken.symbol
+                                d.selectedTokenEntry.item.symbol
                                )
                }
            }
            enabled: root.buyCryptoInputParamsForm.filledCorrectly
        }
+
+        readonly property ModelEntry selectedAccountEntry: ModelEntry {
+            sourceModel: root.walletAccountsModel
+            key: "address"
+            value: root.buyCryptoInputParamsForm.selectedWalletAddress
+        }
+
+        readonly property ModelEntry selectedTokenEntry: ModelEntry {
+            sourceModel: root.plainTokensBySymbolModel
+            key: "key"
+            value: root.buyCryptoInputParamsForm.selectedTokenKey
+        }
+
+        readonly property ModelEntry selectedProviderEntry: ModelEntry {
+            id: selectedProviderEntry
+            sourceModel: root.buyProvidersModel
+            key: "id"
+            value: root.buyCryptoInputParamsForm.selectedProviderId
+        }
+
+        function fetchProviderUrl(
+            providerID,
+            isRecurrent,
+            accountAddress = "",
+            chainID = 0,
+            symbol = "") {
+            // Identify new search with a different uuid
+            d.uuid = Utils.uuid()
+            d.urlIsBeingFetched = true
+            root.fetchProviderUrl(d.uuid, providerID, isRecurrent,
+                                            accountAddress, chainID, symbol)
+        }
+
+        // used to filter items based on search string in the token selector
+        property string searchString
+        readonly property var tokenSelectorViewAdaptor: TokenSelectorViewAdaptor {
+            assetsModel: root.groupedAccountAssetsModel
+            plainTokensBySymbolModel: root.plainTokensBySymbolModel
+            flatNetworksModel: root.networksModel
+            currentCurrency: root.currentCurrency
+
+            showAllTokens: true
+            enabledChainIds: root.buyCryptoInputParamsForm.selectedNetworkChainId !== -1 ? [root.buyCryptoInputParamsForm.selectedNetworkChainId] : []
+            accountAddress: root.buyCryptoInputParamsForm.selectedWalletAddress
+            searchString: d.searchString
+        }
+
+        readonly property var buyCryptoAdaptor: BuyCryptoModalAdaptor {
+            networksModel: root.networksModel
+            areTestNetworksEnabled: root.areTestNetworksEnabled
+            processedTokenSelectorAssetsModel: d.tokenSelectorViewAdaptor.outputAssetsModel
+            selectedProviderSupportedAssetsArray: {
+                if (!!d.selectedProviderEntry.item && !!d.selectedProviderEntry.item.supportedAssets)
+                    return ModelUtils.modelToFlatArray(d.selectedProviderEntry.item.supportedAssets, "key")
+                return null
+            }
+            selectedChainId: root.buyCryptoInputParamsForm.selectedNetworkChainId
+        }
    }

    width: 560
    height: 515
    padding: Style.current.xlPadding
-    stackTitle: qsTr("Buy assets for %1").arg(!!buyCryptoAdaptor.selectedAccount ? buyCryptoAdaptor.selectedAccount.name: "")
+    stackTitle: qsTr("Buy assets for %1").arg(!!d.selectedAccountEntry.item ? d.selectedAccountEntry.item.name: "")
    rightButtons: [d.buyButton, finishButton]
    finishButton: StatusButton {
        text: qsTr("Done")
        onClicked: root.close()
    }

-    Connections {
-        target: root.buyCryptoAdaptor
-        function onProviderUrlReady(url) {
-            if (!!root.buyCryptoAdaptor.selectedProvider && !!url)
-                Global.openLinkWithConfirmation(url, root.buyCryptoAdaptor.selectedProvider.hostname)
-            root.close()
-        }
-    }
-
-    onOpened: root.buyCryptoAdaptor.fetchProviders()
+    onOpened: root.fetchProviders()
    onClosed: {
        // reset the view
+        d.uuid = ""
+        d.urlIsBeingFetched = false
        root.replaceItem = undefined
        buyCryptoProvidersListPanel.currentTabIndex = 0
-        root.buyCryptoAdaptor.reset()
        root.buyCryptoInputParamsForm.resetFormData()
    }

    stackItems: [
        BuyCryptoProvidersListPanel {
            id: buyCryptoProvidersListPanel
-            providersLoading: root.buyCryptoAdaptor.providersLoading
-            providersModel: root.buyCryptoAdaptor.providersModel
+            providersLoading: root.isBuyProvidersModelLoading
+            providersModel: root.buyProvidersModel
            selectedProviderId: root.buyCryptoInputParamsForm.selectedProviderId
-            isUrlBeingFetched: root.buyCryptoAdaptor.urlIsBeingFetched
+            isUrlBeingFetched: d.urlIsBeingFetched
            onProviderSelected: {
                root.buyCryptoInputParamsForm.selectedProviderId = id
-                if(!!root.buyCryptoAdaptor.selectedProvider) {
-                    if(root.buyCryptoAdaptor.selectedProvider.urlsNeedParameters) {
+                if(!!d.selectedProviderEntry.item) {
+                    if(d.selectedProviderEntry.item.urlsNeedParameters) {
                        root.replace(selectParamsPanel)
                    } else {
-                        root.buyCryptoAdaptor.fetchProviderUrl(root.buyCryptoAdaptor.selectedProvider.id, currentTabIndex)
+                        d.fetchProviderUrl(d.selectedProviderEntry.item.id, currentTabIndex)
                    }
                }
            }
@ -98,36 +181,12 @@ StatusStackModal {
    Component {
        id: selectParamsPanel
        SelectParamsForBuyCryptoPanel {
-            id: selectParamsPanelInst
-            adaptor: TokenSelectorViewAdaptor {
-                /* TODO these should be hadbled and perhaps improved under
-                https://github.com/status-im/status-desktop/issues/16025 */
-                assetsModel: SortFilterProxyModel {
-                    sourceModel: root.buyCryptoAdaptor.groupedAccountAssetsModelWithKey
-                    filters: FastExpressionFilter {
-                        expression: model.addressPerChain.rowCount() > 0
-                        expectedRoles: ["addressPerChain"]
-                    }
-                }
-                plainTokensBySymbolModel: SortFilterProxyModel {
-                    sourceModel: root.buyCryptoAdaptor.plainTokensBySymbolModelWithKey
-                    filters: FastExpressionFilter {
-                        expression: model.addressPerChain.rowCount() > 0
-                        expectedRoles: ["addressPerChain"]
-                    }
-                }
-                flatNetworksModel: root.buyCryptoAdaptor.networksModel
-                currentCurrency: root.buyCryptoAdaptor.currentCurrency
-
-                showAllTokens: true
-                enabledChainIds: root.buyCryptoInputParamsForm.selectedNetworkChainId !== -1 ? [root.buyCryptoInputParamsForm.selectedNetworkChainId] : []
-                accountAddress: root.buyCryptoInputParamsForm.selectedWalletAddress
-                searchString: selectParamsPanelInst.searchString
-            }
-            selectedProvider: root.buyCryptoAdaptor.selectedProvider
+            objectName: "selectParamsPanel"
+            assetsModel: d.buyCryptoAdaptor.filteredAssetsModel
+            selectedProvider: d.selectedProviderEntry.item
            selectedTokenKey: root.buyCryptoInputParamsForm.selectedTokenKey
            selectedNetworkChainId: root.buyCryptoInputParamsForm.selectedNetworkChainId
-            filteredFlatNetworksModel: root.buyCryptoAdaptor.filteredFlatNetworksModel
+            filteredFlatNetworksModel: d.buyCryptoAdaptor.filteredFlatNetworksModel
            onNetworkSelected: {
                if (root.buyCryptoInputParamsForm.selectedNetworkChainId !== chainId) {
                    root.buyCryptoInputParamsForm.selectedNetworkChainId = chainId
@ -138,6 +197,11 @@ StatusStackModal {
                    root.buyCryptoInputParamsForm.selectedTokenKey = tokensKey
                }
            }
+            Binding {
+                target: d
+                property: "searchString"
+                value: searchString
+            }
        }
    }
 }
--- a/ui/app/AppLayouts/Wallet/popups/buy/BuyCryptoModalAdaptor.qml
+++ b/ui/app/AppLayouts/Wallet/popups/buy/BuyCryptoModalAdaptor.qml
@ -4,143 +4,37 @@ import SortFilterProxyModel 0.2
 import StatusQ 0.1
 import StatusQ.Core.Utils 0.1

-import utils 1.0
-
-import shared.stores 1.0
-import AppLayouts.Wallet 1.0
-import AppLayouts.Wallet.stores 1.0 as WalletStore
-
 QObject {
    id: root

-    required property WalletStore.BuyCryptoStore buyCryptoStore
-    required property BuyCryptoParamsForm buyCryptoFormData
-    required property var walletAccountsModel
    required property var networksModel
    required property bool areTestNetworksEnabled
-    required property var groupedAccountAssetsModel
-    required property var plainTokensBySymbolModel
-    required property string currentCurrency
-
-    QtObject {
-        id: d
-        property string uuid
-        property bool urlIsBeingFetched
-        readonly property var selectedProviderSupportedArray: !!selectedProvider && !!selectedProvider.supportedAssets ? ModelUtils.modelToFlatArray(selectedProvider.supportedAssets, "key"): null
-    }
-
-    signal providerUrlReady(string url)
-
-    readonly property bool providersLoading: root.buyCryptoStore.areProvidersLoading
-    readonly property var providersModel: root.buyCryptoStore.providersModel
-
-    readonly property bool urlIsBeingFetched: d.urlIsBeingFetched
-
-    readonly property var selectedAccount: selectedAccountEntry.item
-    readonly property var selectedToken: selectedTokenEntry.item
-    readonly property var selectedProvider: selectedProviderEntry.item
+    required property var processedTokenSelectorAssetsModel
+    required property var selectedProviderSupportedAssetsArray
+    required property int selectedChainId

    readonly property SortFilterProxyModel filteredFlatNetworksModel: SortFilterProxyModel {
        sourceModel: root.networksModel
        filters: ValueFilter { roleName: "isTest"; value: root.areTestNetworksEnabled }
    }

-    /* TODO evaluate if this is still needed after
-    https://github.com/status-im/status-desktop/issues/16025 */
-    readonly property ObjectProxyModel plainTokensBySymbolModelWithKey: ObjectProxyModel {
-        sourceModel: root.plainTokensBySymbolModel
-        delegate: SortFilterProxyModel {
-            id: delegateRoot
-            readonly property var addressPerChain: this
-            sourceModel: model.addressPerChain
-            proxyRoles: JoinRole {
-                name: "key"
-                roleNames: ["chainId", "address"]
-                separator: ""
-            }
-            filters: FastExpressionFilter {
-                expression:  !!d.selectedProviderSupportedArray ? d.selectedProviderSupportedArray.includes(model.key) : true
-                expectedRoles: ["key"]
+    // this proxy removes tokens not supported by selected on-ramp provider
+    readonly property SortFilterProxyModel filteredAssetsModel: SortFilterProxyModel {
+        sourceModel: root.processedTokenSelectorAssetsModel.count ? root.processedTokenSelectorAssetsModel: null
+        filters: FastExpressionFilter {
+            function isSupportedByProvider(addressPerChain) {
+                if(!addressPerChain)
+                    return true
+                return !!ModelUtils.getFirstModelEntryIf(
+                            addressPerChain,
+                            (addPerChain) => {
+                                return root.selectedChainId === addPerChain.chainId &&
+                                root.selectedProviderSupportedAssetsArray.includes(addPerChain.chainId+addPerChain.address)
+                            })
            }
+            expression: isSupportedByProvider(model.addressPerChain)
+            expectedRoles: ["addressPerChain"]
+            enabled: !!root.selectedProviderSupportedAssetsArray && root.selectedProviderSupportedAssetsArray.length > 0 && root.selectedChainId !== -1
        }
-
-        exposedRoles: ["addressPerChain"]
-        expectedRoles: ["addressPerChain"]
-    }
-
-    /* TODO evaluate if this is still needed after
-    https://github.com/status-im/status-desktop/issues/16025 */
-    readonly property ObjectProxyModel groupedAccountAssetsModelWithKey: ObjectProxyModel {
-        sourceModel: root.groupedAccountAssetsModel
-        delegate: SortFilterProxyModel {
-            id: delegateRoot1
-            readonly property var addressPerChain: this
-            sourceModel: model.addressPerChain
-            proxyRoles: JoinRole {
-                name: "key"
-                roleNames: ["chainId", "address"]
-                separator: ""
-            }
-            filters: FastExpressionFilter {
-                expression:  !!d.selectedProviderSupportedArray ? d.selectedProviderSupportedArray.includes(model.key) : true
-                expectedRoles: ["key"]
-            }
-        }
-
-        exposedRoles: ["addressPerChain"]
-        expectedRoles: ["addressPerChain"]
-    }
-
-    function reset() {
-        d.uuid = ""
-        d.urlIsBeingFetched = false
-    }
-
-    function fetchProviders() {
-        root.buyCryptoStore.fetchProviders()
-    }
-
-    function fetchProviderUrl(
-        providerID,
-        isRecurrent,
-        accountAddress = "",
-        chainID = 0,
-        symbol = "") {
-        // Identify new search with a different uuid
-        d.uuid = Utils.uuid()
-        d.urlIsBeingFetched = true
-        buyCryptoStore.fetchProviderUrl(d.uuid, providerID, isRecurrent,
-                                        accountAddress, chainID,symbol)
-    }
-
-    Connections {
-        target: root.buyCryptoStore
-        function onProviderUrlReady(uuid, url) {
-           if(uuid === d.uuid) {
-               d.urlIsBeingFetched = false
-               root.providerUrlReady(url)
-           }
-        }
-    }
-
-    ModelEntry {
-        id: selectedAccountEntry
-        sourceModel: root.walletAccountsModel
-        key: "address"
-        value: root.buyCryptoFormData.selectedWalletAddress
-    }
-
-    ModelEntry {
-        id: selectedTokenEntry
-        sourceModel: root.plainTokensBySymbolModel
-        key: "key"
-        value: root.buyCryptoFormData.selectedTokenKey
-    }
-
-    ModelEntry {
-        id: selectedProviderEntry
-        sourceModel: root.providersModel
-        key: "id"
-        value: root.buyCryptoFormData.selectedProviderId
    }
 }
--- a/ui/app/mainui/AppMain.qml
+++ b/ui/app/mainui/AppMain.qml
@ -79,6 +79,8 @@ Item {
        tokensStore: appMain.tokensStore
        currencyStore: appMain.currencyStore
    }
+    readonly property WalletStores.BuyCryptoStore buyCryptoStore: WalletStores.BuyCryptoStore {}
+
    readonly property FeatureFlagsStore featureFlagsStore: FeatureFlagsStore {
        readonly property var featureFlags: typeof featureFlagsRootContextProperty !== undefined ? featureFlagsRootContextProperty : null

@ -402,6 +404,7 @@ Item {
        currencyStore: appMain.currencyStore
        walletAssetsStore: appMain.walletAssetsStore
        walletCollectiblesStore: appMain.walletCollectiblesStore
+        buyCryptoStore: appMain.buyCryptoStore
        networkConnectionStore: appMain.networkConnectionStore
        isDevBuild: !production

--- a/ui/app/mainui/Popups.qml
+++ b/ui/app/mainui/Popups.qml
@ -45,6 +45,7 @@ QtObject {
    property WalletStore.WalletAssetsStore walletAssetsStore
    property WalletStore.CollectiblesStore walletCollectiblesStore
    property NetworkConnectionStore networkConnectionStore
+    property WalletStore.BuyCryptoStore buyCryptoStore
    property bool isDevBuild

    signal openExternalLink(string link)
@ -1249,15 +1250,18 @@ QtObject {
        Component {
            id: buyCryptoModal
            BuyCryptoModal {
-                buyCryptoAdaptor: BuyCryptoModalAdaptor {
-                    buyCryptoStore: WalletStore.BuyCryptoStore {}
-                    buyCryptoFormData: buyCryptoInputParamsForm
-                    walletAccountsModel: root.rootStore.accounts
-                    networksModel: root.rootStore.profileSectionStore.walletStore.flatNetworks
-                    areTestNetworksEnabled: root.rootStore.profileSectionStore.walletStore.areTestNetworksEnabled
-                    groupedAccountAssetsModel: root.walletAssetsStore.groupedAccountAssetsModel
-                    plainTokensBySymbolModel: root.walletAssetsStore.walletTokensStore.plainTokensBySymbolModel
-                    currentCurrency: root.currencyStore.currentCurrency
+                buyProvidersModel: root.buyCryptoStore.providersModel
+                isBuyProvidersModelLoading: root.buyCryptoStore.areProvidersLoading
+                currentCurrency: root.currencyStore.currentCurrency
+                walletAccountsModel: root.rootStore.accounts
+                plainTokensBySymbolModel: root.walletAssetsStore.walletTokensStore.plainTokensBySymbolModel
+                groupedAccountAssetsModel: root.walletAssetsStore.groupedAccountAssetsModel
+                networksModel: root.rootStore.profileSectionStore.walletStore.flatNetworks
+                areTestNetworksEnabled: root.rootStore.profileSectionStore.walletStore.areTestNetworksEnabled
+                Component.onCompleted: {
+                    fetchProviders.connect(root.buyCryptoStore.fetchProviders)
+                    fetchProviderUrl.connect(root.buyCryptoStore.fetchProviderUrl)
+                    root.buyCryptoStore.providerUrlReady.connect(providerUrlReady)
                }
                onClosed: destroy()
            }