BuyCryptoModal refactored to use AssetSelectorCompact

storybook/qmlTests/tests/tst_BuyCryptoModal.qml

@@ -216,34 +216,27 @@ Item {
             verify(!!networkFilter)
             compare(networkFilter.selection, [controlUnderTest.buyCryptoInputParamsForm.selectedNetworkChainId])
 
-            const tokenSelector = findChild(selectParamsPanel, "tokenSelector")
+            const tokenSelector = findChild(selectParamsPanel, "assetSelector")
             verify(!!tokenSelector)
-            compare(tokenSelector.currentTokensKey, controlUnderTest.buyCryptoInputParamsForm.selectedTokenKey)
 
-            const selectedTokenItem = findChild(selectParamsPanel, "selectedTokenItem")
+            compare(selectParamsPanel.selectedTokenKey, controlUnderTest.buyCryptoInputParamsForm.selectedTokenKey)
-            verify(!!selectedTokenItem)
 
-            const modelDataToTest = ModelUtils.getByKey(tokenSelector.model, "tokensKey", tokenSelector.currentTokensKey)
+            const selectedAssetButton = findChild(tokenSelector, "assetSelectorButton")
-            const tokenSelectorIcon = findChild(selectedTokenItem, "tokenSelectorIcon")
+            verify(!!selectedAssetButton)
-            verify(!!tokenSelectorIcon)
-            compare(tokenSelectorIcon.image.source, modelDataToTest.iconSource)
 
-            const tokenSelectorContentItemName = findChild(selectedTokenItem, "tokenSelectorContentItemName")
+            const modelDataToTest = ModelUtils.getByKey(tokenSelector.model, "tokensKey",
-            verify(!!tokenSelectorContentItemName)
+                                                        controlUnderTest.buyCryptoInputParamsForm.selectedTokenKey)
-            compare(tokenSelectorContentItemName.text,  modelDataToTest.name)
+            compare(selectedAssetButton.selected, true)
-
+            compare(selectedAssetButton.icon, modelDataToTest.iconSource)
-            const tokenSelectorContentItemSymbol = findChild(selectedTokenItem, "tokenSelectorContentItemSymbol")
+            compare(selectedAssetButton.name, modelDataToTest.name)
-            verify(!!tokenSelectorContentItemSymbol)
+            compare(selectedAssetButton.subname, modelDataToTest.symbol)
-            compare(tokenSelectorContentItemSymbol.text,  modelDataToTest.symbol)
 
             //switch to a network that has no tokens and ensure its reset
-            controlUnderTest.buyCryptoInputParamsForm.selectedNetworkChainId = 421613
+             controlUnderTest.buyCryptoInputParamsForm.selectedNetworkChainId = 421613
 
-            waitForRendering(selectParamsPanel)
+             waitForRendering(selectParamsPanel)
 
-            const nothingSelectedContentItem = findChild(selectParamsPanel, "tokenSelectorContentItemText")
+            compare(selectedAssetButton.selected, false)
-            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

ui/app/AppLayouts/Wallet/panels/SelectParamsForBuyCryptoPanel.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.14
+import QtQuick 2.15
-import QtQuick.Layouts 1.0
+import QtQuick.Layouts 1.15
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Utils 0.1
@@ -22,24 +22,11 @@ ColumnLayout {
     required property int selectedNetworkChainId
     required property var filteredFlatNetworksModel
 
-    // exposed api
-    property alias searchString: holdingSelector.searchString
     signal networkSelected(int chainId)
     signal tokenSelected(string tokensKey)
 
-    QtObject {
+    onSelectedTokenKeyChanged: assetSelector.update()
-        id: d
+    onSelectedNetworkChainIdChanged: assetSelector.update()
-        function updateTokenSelector() {
-            Qt.callLater(()=> {
-                             if(!!holdingSelector.model && !!root.selectedTokenKey && root.selectedNetworkChainId !== -1) {
-                                 holdingSelector.selectToken(root.selectedTokenKey)
-                             }
-                         })
-        }
-    }
-
-    onSelectedTokenKeyChanged: d.updateTokenSelector()
-    onSelectedNetworkChainIdChanged: d.updateTokenSelector()
 
     spacing: 20
 
@@ -58,12 +45,15 @@ ColumnLayout {
         color: Theme.palette.transparent
         enabled: false
     }
+
     StatusMenuSeparator {
         Layout.fillWidth: true
     }
+
     ColumnLayout {
         Layout.fillWidth: true
         spacing: 8
+
         StatusBaseText {
             text: qsTr("Select network")
             color: Theme.palette.directColor1
@@ -83,9 +73,11 @@ ColumnLayout {
             onSelectionChanged: root.networkSelected(selection[0])
         }
     }
+
     ColumnLayout {
         Layout.fillWidth: true
         spacing: 8
+
         StatusBaseText {
             text: qsTr("Select asset")
             color: Theme.palette.directColor1
@@ -94,58 +86,36 @@ ColumnLayout {
             lineHeightMode: Text.FixedHeight
             verticalAlignment: Text.AlignVCenter
         }
-        TokenSelector {
+
-            id: holdingSelector
+        AssetSelectorCompact {
-            objectName: "tokenSelector"
+            id: assetSelector
+
+            objectName: "assetSelector"
+
             Layout.fillWidth: true
+
             model: root.assetsModel
-            popup.width: parent.width
+            sectionProperty: "sectionName"
-            contentItem:  Loader {
-                height: 40 // by design
-                sourceComponent: !!holdingSelector.currentTokensKey ? selectedTokenCmp : nothingSelectedCmp
-            }
-            background: StatusComboboxBackground {
-                border.width: 1
-                color: Theme.palette.transparent
-            }
-            onTokenSelected: root.tokenSelected(tokensKey)
-        }
-    }
 
-    Component {
+            onSelected: root.tokenSelected(key)
-        id: nothingSelectedCmp
-        StatusBaseText {
-            objectName: "tokenSelectorContentItemText"
-            font.pixelSize: Style.current.additionalTextSize
-            font.weight: Font.Medium
-            color: Theme.palette.primaryColor1
-            text: qsTr("Select asset")
-        }
-    }
 
-    Component {
+            function update() {
-        id: selectedTokenCmp
+                Qt.callLater(()=> {
-        RowLayout {
+                    if (!root.assetsModel || !root.selectedTokenKey
-            objectName: "selectedTokenItem"
+                        || root.selectedNetworkChainId === -1)
-            spacing: Style.current.halfPadding
+                        return
-            StatusRoundedImage {
+
-                objectName: "tokenSelectorIcon"
+                    const entry = ModelUtils.getByKey(root.assetsModel,
-                Layout.preferredWidth: 20
+                                                      "tokensKey", root.selectedTokenKey)
-                Layout.preferredHeight: 20
+                    if (entry) {
-                image.source: ModelUtils.getByKey(holdingSelector.model, "tokensKey", holdingSelector.currentTokensKey, "iconSource")
+                        assetSelector.setCustom(entry.name, entry.symbol,
-            }
+                                                entry.iconSource, entry.tokensKey)
-            StatusBaseText {
+                        root.tokenSelected(entry.tokensKey)
-                objectName: "tokenSelectorContentItemName"
+                    } else {
-                font.pixelSize: 15
+                        assetSelector.reset()
-                color: Theme.palette.directColor1
+                        root.tokenSelected("")
-                text: ModelUtils.getByKey(holdingSelector.model, "tokensKey", holdingSelector.currentTokensKey, "name")
+                    }
-            }
+                })
-            StatusBaseText {
-                Layout.fillWidth: true
-                objectName: "tokenSelectorContentItemSymbol"
-                font.pixelSize: 15
-                color: Theme.palette.baseColor1
-                text: ModelUtils.getByKey(holdingSelector.model, "tokensKey", holdingSelector.currentTokensKey, "symbol")
             }
         }
     }

ui/app/AppLayouts/Wallet/popups/buy/BuyCryptoModal.qml

@@ -112,7 +112,7 @@ StatusStackModal {
         }
 
         // 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
@@ -122,7 +122,6 @@ StatusStackModal {
             showAllTokens: true
             enabledChainIds: root.buyCryptoInputParamsForm.selectedNetworkChainId !== -1 ? [root.buyCryptoInputParamsForm.selectedNetworkChainId] : []
             accountAddress: root.buyCryptoInputParamsForm.selectedWalletAddress
-            searchString: d.searchString
         }
 
         readonly property var buyCryptoAdaptor: BuyCryptoModalAdaptor {
@@ -197,11 +196,6 @@ StatusStackModal {
                     root.buyCryptoInputParamsForm.selectedTokenKey = tokensKey
                 }
             }
-            Binding {
-                target: d
-                property: "searchString"
-                value: searchString
-            }
         }
     }
 }