SwapInputPanel using AssetSelector instead of TokenSelector

Closes: #16220
Closes: #16025

storybook/qmlTests/tests/tst_SwapInputPanel.qml

@@ -18,8 +18,8 @@ import Storybook 1.0
 
 Item {
     id: root
-    width: 600
+    width: 1200
-    height: 400
+    height: 800
 
     ListModel {
         id: plainTokensModel
@@ -207,7 +207,7 @@ Item {
             mouseClick(holdingSelector)
             waitForRendering(holdingSelector)
 
-            const assetSelectorList = findChild(holdingSelector, "tokenSelectorListview")
+            const assetSelectorList = findChild(holdingSelector, "assetsListView")
             verify(!!assetSelectorList)
             waitForRendering(assetSelectorList)
 
@@ -337,7 +337,7 @@ Item {
             const holdingSelector = findChild(controlUnderTest, "holdingSelector")
             verify(!!holdingSelector)
 
-            const assetSelectorList = findChild(holdingSelector, "tokenSelectorListview")
+            const assetSelectorList = findChild(holdingSelector, "assetsListView")
             verify(!!assetSelectorList)
 
             const amountToSendInput = findChild(controlUnderTest, "amountToSendInput")
@@ -390,7 +390,7 @@ Item {
             const holdingSelector = findChild(controlUnderTest, "holdingSelector")
             verify(!!holdingSelector)
 
-            const assetSelectorList = findChild(holdingSelector, "tokenSelectorListview")
+            const assetSelectorList = findChild(holdingSelector, "assetsListView")
             verify(!!assetSelectorList)
 
             const amountToSendInput = findChild(controlUnderTest, "amountToSendInput")
@@ -406,15 +406,15 @@ Item {
             keyClick(Qt.Key_4)
             keyClick(Qt.Key_2)
 
-            let numberTested = 5.42
+            const numberTested = 5.42
             tryCompare(amountToSendInput, "text", "5.42")
 
             for (let i= 0; i < d.tokenSelectorAdaptor.outputAssetsModel.count; i++) {
-                let modelItemToTest = ModelUtils.get(d.tokenSelectorAdaptor.outputAssetsModel, i)
+                const modelItemToTest = ModelUtils.get(d.tokenSelectorAdaptor.outputAssetsModel, i)
                 mouseClick(holdingSelector)
                 waitForRendering(holdingSelector)
 
-                let delToTest = assetSelectorList.itemAtIndex(i)
+                const delToTest = assetSelectorList.itemAtIndex(i)
                 verify(!!delToTest)
                 if(delToTest.interactive) {
                     mouseClick(delToTest)

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

@@ -13,6 +13,7 @@ Control {
 
     /** Expected model structure: see SearchableAssetsPanel::model **/
     property alias model: searchableAssetsPanel.model
+    property alias nonInteractiveKey: searchableAssetsPanel.nonInteractiveKey
 
     property alias sectionProperty: searchableAssetsPanel.sectionProperty
 
@@ -28,6 +29,10 @@ Control {
         searchableAssetsPanel.highlightedKey = key ?? ""
     }
 
+    function reset() {
+        button.selected = false
+    }
+
     contentItem: TokenSelectorButton {
         id: button
 
@@ -41,6 +46,7 @@ Control {
         id: dropdown
 
         y: parent.height + 4
+        x: parent.width - width
 
         closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
         padding: 0

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

@@ -28,8 +28,10 @@ Control {
             balanceAsString     [string] - formatted balance per chain
             iconUrl             [url]    - chain's icon
     **/
-    property alias model: sfpm.sourceModel
+    property var model
-    property string highlightedKey: ""
+    property string highlightedKey
+    property string nonInteractiveKey
+
     property string sectionProperty
 
     signal selected(string key)
@@ -37,6 +39,11 @@ Control {
     SortFilterProxyModel {
         id: sfpm
 
+        // workaround for https://github.com/status-im/status-desktop/issues/16310
+        Component.onCompleted: {
+            sourceModel = Qt.binding(() => root.model)
+        }
+
         filters: AnyOf {
             SearchFilter {
                 roleName: "name"
@@ -67,6 +74,8 @@ Control {
         StatusListView {
             id: listView
 
+            objectName: "assetsListView"
+
             clip: true
 
             Layout.fillWidth: true
@@ -74,7 +83,6 @@ Control {
             Layout.preferredHeight: contentHeight
 
             model: sfpm
-
             section.property: root.sectionProperty
 
             section.delegate: TokenSelectorSectionDelegate {
@@ -87,11 +95,12 @@ Control {
                 required property int index
 
                 highlighted: tokensKey === root.highlightedKey
+                interactive: tokensKey !== root.nonInteractiveKey
 
                 tokensKey: model.tokensKey
                 name: model.name
                 symbol: model.symbol
-                currencyBalanceAsString: model.currencyBalanceAsString
+                currencyBalanceAsString: model.currencyBalanceAsString ?? ""
                 iconSource: model.iconSource
                 balancesModel: model.balances
 

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

@@ -49,8 +49,17 @@ Control {
 
     // FIXME drop after using ModelEntry, shouldn't be needed
     function reevaluateSelectedId() {
-        holdingSelector.selectToken(tokenKey)
+        const entry = SQUtils.ModelUtils.getByKey(holdingSelector.model, "tokensKey", root.tokenKey)
-        d.selectedHolding = SQUtils.ModelUtils.getByKey(holdingSelector.model, "tokensKey", holdingSelector.currentTokensKey)
+
+        if (entry) {
+            holdingSelector.currentTokensKey = root.tokenKey
+            holdingSelector.setCustom(entry.symbol, entry.iconSource, entry.tokensKey)
+        } else {
+            holdingSelector.currentTokensKey = ""
+            holdingSelector.reset()
+        }
+
+        d.selectedHolding = entry
     }
 
     // output API
@@ -108,7 +117,6 @@ Control {
             showAllTokens: true
             enabledChainIds: root.selectedNetworkChainId !== -1 ? [root.selectedNetworkChainId] : []
             accountAddress: root.selectedAccountAddress
-            searchString: holdingSelector.searchString
         }
 
         function updateInputText() {
@@ -246,14 +254,22 @@ Control {
 
             Item { Layout.fillHeight: true }
 
-            TokenSelector {
+            AssetSelector {
                 id: holdingSelector
+
                 objectName: "holdingSelector"
+
+                property string currentTokensKey
+
                 Layout.rightMargin: d.isSelectedHoldingValidAsset ? -root.padding : 0
                 Layout.alignment: Qt.AlignRight
+
                 model: d.adaptor.outputAssetsModel
-                nonInteractiveDelegateKey: root.nonInteractiveTokensKey
+                nonInteractiveKey: root.nonInteractiveTokensKey
-                onActivated: if (root.interactive) root.forceActiveFocus()
+
+                sectionProperty: "sectionName"
+
+                onSelected: currentTokensKey = key
             }
 
             Item { Layout.fillHeight: !maxSendButton.visible }