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,6 +12,14 @@ Item {
     width: 600
     height: 600
 
+    Component {
+        id: selectorCmp
+
+        AssetSelector {
+            id: selector
+
+            anchors.centerIn: parent
+
             readonly property var assetsData: [
                 {
                     tokensKey: "stt_key",
@@ -28,7 +36,7 @@ Item {
                         }
                     ],
 
-            sectionText: "My assets on Mainnet"
+                    sectionName: "My assets on Mainnet"
                 },
                 {
                     tokensKey: "eth_key",
@@ -45,7 +53,7 @@ Item {
                         }
                     ],
 
-            sectionText: "My assets on Mainnet"
+                    sectionName: "My assets on Mainnet"
                 },
                 {
                     tokensKey: "dai_key",
@@ -56,25 +64,14 @@ Item {
                     iconSource: Constants.tokenIcon("DAI"),
                     balances: [],
 
-            sectionText: "Popular assets"
+                    sectionName: "Popular assets"
                 }
             ]
 
-    ListModel {
+            model: ListModel {
-        id: assetsModel
+                Component.onCompleted: append(selector.assetsData)
-
-        Component.onCompleted: append(assetsData)
             }
 
-    Component {
-        id: selectorCmp
-
-        AssetSelector {
-            id: selector
-
-            anchors.centerIn: parent
-            model: assetsModel
-
             readonly property SignalSpy selectedSpy: SignalSpy {
                 target: selector
                 signalName: "selected"
@@ -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,15 +19,6 @@ Item {
         SearchableAssetsPanel {
             id: panel
 
-            sectionProperty: "sectionText"
-
-            readonly property SignalSpy selectedSpy: SignalSpy {
-                target: panel
-                signalName: "selected"
-            }
-        }
-    }
-
             readonly property var assetsData: [
                 {
                     tokensKey: "stt_key",
@@ -51,7 +42,7 @@ Item {
                         }
                     ],
 
-            sectionText: ""
+                    sectionName: ""
                 },
                 {
                     tokensKey: "dai_key",
@@ -62,7 +53,7 @@ Item {
                     iconSource: Constants.tokenIcon("DAI"),
                     balances: [],
 
-            sectionText: "Popular assets"
+                    sectionName: "Popular assets"
                 },
                 {
                     tokensKey: "zrx_key",
@@ -73,14 +64,19 @@ Item {
                     iconSource: Constants.tokenIcon("ZRX"),
                     balances: [],
 
-            sectionText: "Popular assets"
+                    sectionName: "Popular assets"
                 }
             ]
 
-    ListModel {
+            model: ListModel {
-        id: model
+                Component.onCompleted: append(panel.assetsData)
+            }
 
-        Component.onCompleted: append(root.assetsData)
+            readonly property SignalSpy selectedSpy: SignalSpy {
+                target: panel
+                signalName: "selected"
+            }
+        }
     }
 
     TestCase {
@@ -88,7 +84,7 @@ Item {
         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,7 +107,7 @@ 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)
                         root.tokenSelected(entry.tokensKey)
                     } else {

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,7 +229,7 @@ StatusDialog {
                 d.selectedHoldingType = Constants.TokenType.ERC20
                 d.selectedHolding = entry
 
-                holdingSelector.setCustom(entry.symbol, entry.iconSource,
+                holdingSelector.setSelection(entry.symbol, entry.iconSource,
                                              popup.preSelectedHoldingID)
                 holdingSelector.selectedItem = entry
             } else {
@@ -242,7 +242,7 @@ StatusDialog {
 
                 const id = entry.communityId ? entry.collectionUid : entry.uid
 
-                holdingSelector.setCustom(entry.name,
+                holdingSelector.setSelection(entry.name,
                                              entry.imageUrl || entry.mediaUrl,
                                              id)
                 holdingSelector.selectedItem = entry