Token/Asset selectors fixes

- clear search on close (AssetSelectorCompact)
- sectionProperty removed
- highlighting fixed in TokenSelectorPanel
- setCustom renamed to setSelection
- test data moved into Component object

storybook/pages/AssetSelectorCompactPage.qml

@@ -23,7 +23,7 @@ Pane {
                 }
             ],
 
-            sectionText: "My assets on Mainnet"
+            sectionName: "My assets on Mainnet"
         },
         {
             tokensKey: "key_2",
@@ -41,7 +41,7 @@ Pane {
                 }
             ],
 
-            sectionText: "My assets on Mainnet"
+            sectionName: "My assets on Mainnet"
         },
         {
             tokensKey: "key_2",
@@ -53,7 +53,7 @@ Pane {
             tokensKey: "DAI",
             balances: [],
 
-            sectionText: "Popular assets"
+            sectionName: "Popular assets"
         },
         {
             tokensKey: "key_3",
@@ -65,7 +65,7 @@ Pane {
             tokensKey: "ZRX",
             balances: [],
 
-            sectionText: "Popular assets"
+            sectionName: "Popular assets"
         }
     ]
 
@@ -86,7 +86,6 @@ Pane {
         width: 400
 
         model: assetsModel
-        sectionProperty: "sectionText"
 
         onSelected: console.log("asset selected:", key)
     }

storybook/pages/AssetSelectorPage.qml

@@ -22,7 +22,7 @@ Pane {
                 }
             ],
 
-            sectionText: "My assets on Mainnet"
+            sectionName: "My assets on Mainnet"
         },
         {
             tokensKey: "eth_key",
@@ -39,7 +39,7 @@ Pane {
                 }
             ],
 
-            sectionText: "My assets on Mainnet"
+            sectionName: "My assets on Mainnet"
         },
         {
             tokensKey: "dai_key",
@@ -50,7 +50,7 @@ Pane {
             iconSource: Constants.tokenIcon("DAI"),
             balances: [],
 
-            sectionText: "Popular assets"
+            sectionName: "Popular assets"
         },
         {
             tokensKey: "zrx_key",
@@ -61,7 +61,7 @@ Pane {
             iconSource: Constants.tokenIcon("ZRX"),
             balances: [],
 
-            sectionText: "Popular assets"
+            sectionName: "Popular assets"
         }
     ]
 
@@ -81,7 +81,6 @@ Pane {
         anchors.centerIn: parent
 
         model: assetsModel
-        sectionProperty: "sectionText"
 
         onSelected: console.log("asset selected:", key)
     }

storybook/pages/SearchableAssetsPanelPage.qml

@@ -29,7 +29,7 @@ Pane {
                 }
             ],
 
-            sectionText: ""
+            sectionName: ""
         },
         {
             tokensKey: "eth_key",
@@ -53,7 +53,7 @@ Pane {
                 }
             ],
 
-            sectionText: ""
+            sectionName: ""
         },
         {
             tokensKey: "dai_key",
@@ -64,7 +64,7 @@ Pane {
             iconSource: Constants.tokenIcon("DAI"),
             balances: [],
 
-            sectionText: "Popular assets"
+            sectionName: "Popular assets"
         },
         {
             tokensKey: "zrx_key",
@@ -75,7 +75,7 @@ Pane {
             iconSource: Constants.tokenIcon("ZRX"),
             balances: [],
 
-            sectionText: "Popular assets"
+            sectionName: "Popular assets"
         }
     ]
 
@@ -102,7 +102,6 @@ Pane {
         highlightedKey: "key_2"
 
         model: assetsModel
-        sectionProperty: "sectionText"
 
         onSelected: console.log("selected:", key)
     }

storybook/qmlTests/tests/tst_AssetSelector.qml

@@ -12,60 +12,6 @@ Item {
     width: 600
     height: 600
 
-    readonly property var assetsData: [
-        {
-            tokensKey: "stt_key",
-            communityId: "",
-            name: "Status Test Token",
-            currencyBalanceAsString: "42,23 USD",
-            symbol: "STT",
-            iconSource: Constants.tokenIcon("STT"),
-
-            balances: [
-                {
-                    balanceAsString: "0,56",
-                    iconUrl: "network/Network=Ethereum"
-                }
-            ],
-
-            sectionText: "My assets on Mainnet"
-        },
-        {
-            tokensKey: "eth_key",
-            communityId: "",
-            name: "Ether",
-            currencyBalanceAsString: "4 276,86 USD",
-            symbol: "ETH",
-            iconSource: Constants.tokenIcon("ETH"),
-
-            balances: [
-                {
-                    balanceAsString: "0,12",
-                    iconUrl: "network/Network=Ethereum"
-                }
-            ],
-
-            sectionText: "My assets on Mainnet"
-        },
-        {
-            tokensKey: "dai_key",
-            communityId: "",
-            name: "Dai Stablecoin",
-            currencyBalanceAsString: "45,92 USD",
-            symbol: "DAI",
-            iconSource: Constants.tokenIcon("DAI"),
-            balances: [],
-
-            sectionText: "Popular assets"
-        }
-    ]
-
-    ListModel {
-        id: assetsModel
-
-        Component.onCompleted: append(assetsData)
-    }
-
     Component {
         id: selectorCmp
 
@@ -73,7 +19,58 @@ Item {
             id: selector
 
             anchors.centerIn: parent
-            model: assetsModel
+
+            readonly property var assetsData: [
+                {
+                    tokensKey: "stt_key",
+                    communityId: "",
+                    name: "Status Test Token",
+                    currencyBalanceAsString: "42,23 USD",
+                    symbol: "STT",
+                    iconSource: Constants.tokenIcon("STT"),
+
+                    balances: [
+                        {
+                            balanceAsString: "0,56",
+                            iconUrl: "network/Network=Ethereum"
+                        }
+                    ],
+
+                    sectionName: "My assets on Mainnet"
+                },
+                {
+                    tokensKey: "eth_key",
+                    communityId: "",
+                    name: "Ether",
+                    currencyBalanceAsString: "4 276,86 USD",
+                    symbol: "ETH",
+                    iconSource: Constants.tokenIcon("ETH"),
+
+                    balances: [
+                        {
+                            balanceAsString: "0,12",
+                            iconUrl: "network/Network=Ethereum"
+                        }
+                    ],
+
+                    sectionName: "My assets on Mainnet"
+                },
+                {
+                    tokensKey: "dai_key",
+                    communityId: "",
+                    name: "Dai Stablecoin",
+                    currencyBalanceAsString: "45,92 USD",
+                    symbol: "DAI",
+                    iconSource: Constants.tokenIcon("DAI"),
+                    balances: [],
+
+                    sectionName: "Popular assets"
+                }
+            ]
+
+            model: ListModel {
+                Component.onCompleted: append(selector.assetsData)
+            }
 
             readonly property SignalSpy selectedSpy: SignalSpy {
                 target: selector
@@ -89,8 +86,6 @@ Item {
         function test_basic() {
             const selector  = createTemporaryObject(selectorCmp, root)
             selector.nonInteractiveKey = "eth_key"
-            selector.sectionProperty = "sectionText"
-
             compare(selector.isSelected, false)
             waitForRendering(selector)
 
@@ -102,7 +97,6 @@ Item {
             const panel = findChild(selector.Overlay.overlay, "searchableAssetsPanel")
             compare(panel.model, selector.model)
             compare(panel.nonInteractiveKey, selector.nonInteractiveKey)
-            compare(panel.sectionProperty, selector.sectionProperty)
         }
 
         function test_basicSelection() {
@@ -121,7 +115,7 @@ Item {
             const listView = findChild(selector.Overlay.overlay, "assetsListView")
             verify(listView)
 
-            compare(listView.count, root.assetsData.length)
+            compare(listView.count, selector.assetsData.length)
             waitForRendering(listView)
 
             const delegate1 = listView.itemAtIndex(0)
@@ -196,7 +190,7 @@ Item {
             waitForRendering(selector)
 
             const imageUrl = Constants.tokenIcon("DAI")
-            selector.setCustom("Custom", imageUrl, "custom_key")
+            selector.setSelection("Custom", imageUrl, "custom_key")
 
             compare(selector.isSelected, true)
             compare(selector.selectedSpy.count, 0)

storybook/qmlTests/tests/tst_SearchableAssetsPanel.qml

@@ -19,7 +19,58 @@ Item {
         SearchableAssetsPanel {
             id: panel
 
-            sectionProperty: "sectionText"
+            readonly property var assetsData: [
+                {
+                    tokensKey: "stt_key",
+                    communityId: "",
+                    name: "Status Test Token",
+                    currencyBalanceAsString: "42,23 USD",
+                    symbol: "STT",
+                    iconSource: Constants.tokenIcon("STT"),
+                    balances: [
+                        {
+                            balanceAsString: "0,56",
+                            iconUrl: "network/Network=Ethereum"
+                        },
+                        {
+                            balanceAsString: "0,22",
+                            iconUrl: "network/Network=Arbitrum"
+                        },
+                        {
+                            balanceAsString: "0,12",
+                            iconUrl: "network/Network=Optimism"
+                        }
+                    ],
+
+                    sectionName: ""
+                },
+                {
+                    tokensKey: "dai_key",
+                    communityId: "",
+                    name: "Dai Stablecoin",
+                    currencyBalanceAsString: "45,92 USD",
+                    symbol: "DAI",
+                    iconSource: Constants.tokenIcon("DAI"),
+                    balances: [],
+
+                    sectionName: "Popular assets"
+                },
+                {
+                    tokensKey: "zrx_key",
+                    communityId: "",
+                    name: "0x",
+                    currencyBalanceAsString: "41,22 USD",
+                    symbol: "ZRX",
+                    iconSource: Constants.tokenIcon("ZRX"),
+                    balances: [],
+
+                    sectionName: "Popular assets"
+                }
+            ]
+
+            model: ListModel {
+                Component.onCompleted: append(panel.assetsData)
+            }
 
             readonly property SignalSpy selectedSpy: SignalSpy {
                 target: panel
@@ -28,67 +79,12 @@ Item {
         }
     }
 
-    readonly property var assetsData: [
-        {
-            tokensKey: "stt_key",
-            communityId: "",
-            name: "Status Test Token",
-            currencyBalanceAsString: "42,23 USD",
-            symbol: "STT",
-            iconSource: Constants.tokenIcon("STT"),
-            balances: [
-                {
-                    balanceAsString: "0,56",
-                    iconUrl: "network/Network=Ethereum"
-                },
-                {
-                    balanceAsString: "0,22",
-                    iconUrl: "network/Network=Arbitrum"
-                },
-                {
-                    balanceAsString: "0,12",
-                    iconUrl: "network/Network=Optimism"
-                }
-            ],
-
-            sectionText: ""
-        },
-        {
-            tokensKey: "dai_key",
-            communityId: "",
-            name: "Dai Stablecoin",
-            currencyBalanceAsString: "45,92 USD",
-            symbol: "DAI",
-            iconSource: Constants.tokenIcon("DAI"),
-            balances: [],
-
-            sectionText: "Popular assets"
-        },
-        {
-            tokensKey: "zrx_key",
-            communityId: "",
-            name: "0x",
-            currencyBalanceAsString: "41,22 USD",
-            symbol: "ZRX",
-            iconSource: Constants.tokenIcon("ZRX"),
-            balances: [],
-
-            sectionText: "Popular assets"
-        }
-    ]
-
-    ListModel {
-        id: model
-
-        Component.onCompleted: append(root.assetsData)
-    }
-
     TestCase {
         name: "SearchableAssetsPanel"
         when: windowShown
 
         function test_sections() {
-            const control = createTemporaryObject(panelCmp, root, { model })
+            const control = createTemporaryObject(panelCmp, root)
 
             const listView = findChild(control, "assetsListView")
             waitForRendering(listView)
@@ -109,9 +105,36 @@ Item {
 
             const sectionDelegate = TestUtils.findTextItem(listView, "Popular assets")
             verify(sectionDelegate)
+        }
 
-            control.sectionProperty = ""
+        function test_withNoSectionsModel() {
+            const model = createTemporaryQmlObject("import QtQuick 2.15; ListModel {}", root)
+            const control = createTemporaryObject(panelCmp, root, { model })
+
+            model.append(control.assetsData.map(
+                e => ({
+                        tokensKey: e.tokensKey,
+                        communityId: e.communityId,
+                        name: e.name,
+                        currencyBalanceAsString: e.currencyBalanceAsString,
+                        symbol: e.symbol,
+                        iconSource: e.iconSource,
+                        balances: e.balances
+                    })
+                )
+            )
+
+            const listView = findChild(control, "assetsListView")
             waitForRendering(listView)
+            compare(listView.count, 3)
+
+            const delegate1 = listView.itemAtIndex(0)
+            const delegate2 = listView.itemAtIndex(1)
+            const delegate3 = listView.itemAtIndex(2)
+
+            verify(delegate1)
+            verify(delegate2)
+            verify(delegate3)
 
             compare(delegate1.ListView.section, "")
             compare(delegate2.ListView.section, "")
@@ -119,7 +142,7 @@ Item {
         }
 
         function test_search() {
-            const control = createTemporaryObject(panelCmp, root, { model })
+            const control = createTemporaryObject(panelCmp, root)
 
             const listView = findChild(control, "assetsListView")
             waitForRendering(listView)
@@ -154,7 +177,7 @@ Item {
         }
 
         function test_highlightedKey() {
-            const control = createTemporaryObject(panelCmp, root, { model })
+            const control = createTemporaryObject(panelCmp, root)
             control.highlightedKey = "dai_key"
 
             const listView = findChild(control, "assetsListView")
@@ -176,7 +199,7 @@ Item {
         }
 
         function test_nonInteractiveKey() {
-            const control = createTemporaryObject(panelCmp, root, { model })
+            const control = createTemporaryObject(panelCmp, root)
             control.nonInteractiveKey = "dai_key"
 
             const listView = findChild(control, "assetsListView")

ui/app/AppLayouts/Wallet/controls/AssetSelector.qml

@@ -15,13 +15,11 @@ Control {
     property alias model: searchableAssetsPanel.model
     property alias nonInteractiveKey: searchableAssetsPanel.nonInteractiveKey
 
-    property alias sectionProperty: searchableAssetsPanel.sectionProperty
-
     readonly property bool isSelected: button.selected
 
     signal selected(string key)
 
-    function setCustom(name: string, icon: url, key: string) {
+    function setSelection(name: string, icon: url, key: string) {
         button.name = name
         button.icon = icon
         button.selected = true

ui/app/AppLayouts/Wallet/controls/AssetSelectorCompact.qml

@@ -14,13 +14,11 @@ Control {
     /** Expected model structure: see SearchableAssetsPanel::model **/
     property alias model: searchableAssetsPanel.model
 
-    property alias sectionProperty: searchableAssetsPanel.sectionProperty
-
     readonly property bool isSelected: button.selected
 
     signal selected(string key)
 
-    function setCustom(name: string, symbol: string, icon: url, key: string) {
+    function setSelection(name: string, symbol: string, icon: url, key: string) {
         button.name = name
         button.subname = symbol
         button.icon = icon
@@ -71,5 +69,7 @@ Control {
                 root.selected(key)
             }
         }
+
+        onClosed: searchableAssetsPanel.clearSearch()
     }
 }

ui/app/AppLayouts/Wallet/controls/TokenSelector.qml

@@ -17,7 +17,7 @@ Control {
     /** Expected model structure: see SearchableCollectiblesPanel::model **/
     property alias collectiblesModel: tokenSelectorPanel.collectiblesModel
 
-    readonly property bool isTokenSelected: d.isTokenSelected
+    readonly property bool isTokenSelected: tokenSelectorButton.selected
 
     signal assetSelected(string key)
     signal collectionSelected(string key)
@@ -27,23 +27,16 @@ Control {
     // TokensSelectorPanel.Tabs enum values.
     property alias currentTab: tokenSelectorPanel.currentTab
 
-    function setCustom(name: string, icon: url, key: string) {
+    function setSelection(name: string, icon: url, key: string) {
-        d.isTokenSelected = true
+        tokenSelectorButton.selected = true
         tokenSelectorButton.name = name
         tokenSelectorButton.icon = icon
         tokenSelectorPanel.highlightedKey = key ?? ""
     }
 
-    QtObject {
-        id: d
-
-        property bool isTokenSelected: false
-    }
-
     contentItem: TokenSelectorButton {
         id: tokenSelectorButton
 
-        selected: d.isTokenSelected
         forceHovered: dropdown.opened
 
         onClicked: dropdown.opened ? dropdown.close() : dropdown.open()
@@ -79,7 +72,7 @@ Control {
             function setCurrentAndClose(name, icon) {
                 tokenSelectorButton.name = name
                 tokenSelectorButton.icon = icon
-                d.isTokenSelected = true
+                tokenSelectorButton.selected = true
                 dropdown.close()
             }
 

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

@@ -27,13 +27,12 @@ Control {
         balances                [model]  - submodel of balances per chain
             balanceAsString     [string] - formatted balance per chain
             iconUrl             [url]    - chain's icon
+        sectionName (optional)  [string] - text to be rendered as a section
     **/
     property alias model: sfpm.sourceModel
     property string highlightedKey
     property string nonInteractiveKey
 
-    property string sectionProperty
-
     signal selected(string key)
 
     function clearSearch() {
@@ -84,7 +83,7 @@ Control {
             Layout.preferredHeight: contentHeight
 
             model: sfpm
-            section.property: root.sectionProperty
+            section.property: "sectionName"
 
             section.delegate: TokenSelectorSectionDelegate {
                 width: ListView.view.width

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

@@ -95,7 +95,6 @@ ColumnLayout {
             Layout.fillWidth: true
 
             model: root.assetsModel
-            sectionProperty: "sectionName"
 
             onSelected: root.tokenSelected(key)
 
@@ -108,8 +107,8 @@ ColumnLayout {
                     const entry = ModelUtils.getByKey(root.assetsModel,
                                                       "tokensKey", root.selectedTokenKey)
                     if (entry) {
-                        assetSelector.setCustom(entry.name, entry.symbol,
+                        assetSelector.setSelection(entry.name, entry.symbol,
-                                                entry.iconSource, entry.tokensKey)
+                                                   entry.iconSource, entry.tokensKey)
                         root.tokenSelected(entry.tokensKey)
                     } else {
                         assetSelector.reset()

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

@@ -53,7 +53,7 @@ Control {
 
         if (entry) {
             holdingSelector.currentTokensKey = root.tokenKey
-            holdingSelector.setCustom(entry.symbol, entry.iconSource, entry.tokensKey)
+            holdingSelector.setSelection(entry.symbol, entry.iconSource, entry.tokensKey)
         } else {
             holdingSelector.currentTokensKey = ""
             holdingSelector.reset()
@@ -267,8 +267,6 @@ Control {
                 model: d.adaptor.outputAssetsModel
                 nonInteractiveKey: root.nonInteractiveTokensKey
 
-                sectionProperty: "sectionName"
-
                 onSelected: currentTokensKey = key
             }
 

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

@@ -80,6 +80,8 @@ Control {
             Layout.fillWidth: true
             Layout.fillHeight: true
 
+            highlightedKey: root.highlightedKey
+
             onSelected: root.assetSelected(key)
         }
 
@@ -91,6 +93,8 @@ Control {
             Layout.fillWidth: true
             Layout.fillHeight: true
 
+            highlightedKey: root.highlightedKey
+
             onCollectibleSelected: root.collectibleSelected(key)
             onCollectionSelected: root.collectionSelected(key)
         }

ui/imports/shared/popups/send/SendModal.qml

@@ -229,8 +229,8 @@ StatusDialog {
                 d.selectedHoldingType = Constants.TokenType.ERC20
                 d.selectedHolding = entry
 
-                holdingSelector.setCustom(entry.symbol, entry.iconSource,
+                holdingSelector.setSelection(entry.symbol, entry.iconSource,
-                                          popup.preSelectedHoldingID)
+                                             popup.preSelectedHoldingID)
                 holdingSelector.selectedItem = entry
             } else {
                 const entry = SQUtils.ModelUtils.getByKey(
@@ -242,9 +242,9 @@ StatusDialog {
 
                 const id = entry.communityId ? entry.collectionUid : entry.uid
 
-                holdingSelector.setCustom(entry.name,
+                holdingSelector.setSelection(entry.name,
-                                          entry.imageUrl || entry.mediaUrl,
+                                             entry.imageUrl || entry.mediaUrl,
-                                          id)
+                                             id)
                 holdingSelector.selectedItem = entry
                 holdingSelector.currentTab = TokenSelectorPanel.Tabs.Collectibles
             }