AssetSelector added

This component is simpler version of TokenSelector, composed of the same
basic componets, useful when only assets are subject of selection.

Closes: #16234

storybook/pages/AssetSelectorPage.qml

@@ -0,0 +1,105 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+import AppLayouts.Wallet.controls 1.0
+import StatusQ.Core.Theme 0.1
+import utils 1.0
+
+Pane {
+    readonly property var assetsData: [
+        {
+            tokensKey: "key_1",
+            communityId: "",
+            name: "Status Test Token",
+            currencyBalanceAsString: "42,23 USD",
+            symbol: "STT",
+            iconSource: Constants.tokenIcon("STT"),
+            tokensKey: "STT",
+
+            balances: [
+                {
+                    balanceAsString: "0,56",
+                    iconUrl: "network/Network=Ethereum"
+                },
+                {
+                    balanceAsString: "0,22",
+                    iconUrl: "network/Network=Arbitrum"
+                },
+                {
+                    balanceAsString: "0,12",
+                    iconUrl: "network/Network=Optimism"
+                }
+            ]
+        },
+        {
+            tokensKey: "key_2",
+            communityId: "",
+            name: "Ether",
+            currencyBalanceAsString: "4 276,86 USD",
+            symbol: "ETH",
+            iconSource: Constants.tokenIcon("ETH"),
+            tokensKey: "ETH",
+
+            balances: [
+                {
+                    balanceAsString: "1,01",
+                    iconUrl: "network/Network=Optimism"
+                },
+                {
+                    balanceAsString: "0,47",
+                    iconUrl: "network/Network=Arbitrum"
+                },
+                {
+                    balanceAsString: "0,12",
+                    iconUrl: "network/Network=Ethereum"
+                }
+            ]
+        },
+        {
+            tokensKey: "key_2",
+            communityId: "",
+            name: "Dai Stablecoin",
+            currencyBalanceAsString: "45,92 USD",
+            symbol: "DAI",
+            iconSource: Constants.tokenIcon("DAI"),
+            tokensKey: "DAI",
+
+            balances: [
+                {
+                    balanceAsString: "45,12",
+                    iconUrl: "network/Network=Arbitrum"
+                },
+                {
+                    balanceAsString: "0,56",
+                    iconUrl: "network/Network=Optimism"
+                },
+                {
+                    balanceAsString: "0,12",
+                    iconUrl: "network/Network=Ethereum"
+                }
+            ]
+        }
+    ]
+
+    ListModel {
+        id: assetsModel
+
+        Component.onCompleted: append(assetsData)
+    }
+
+    background: Rectangle {
+        color: Theme.palette.baseColor3
+    }
+
+    AssetSelector {
+        id: panel
+
+        anchors.centerIn: parent
+
+        assetsModel: assetsModel
+
+        onAssetSelected: console.log("asset selected:", key)
+    }
+}
+
+// category: Controls

storybook/pages/TokenSelectorNewPage.qml

@@ -1,5 +1,6 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
 
 import AppLayouts.Wallet.controls 1.0
 import StatusQ.Core.Theme 0.1
@@ -175,13 +176,32 @@ Pane {
 
         anchors.centerIn: parent
 
-        assetsModel: assetsModel
+        assetsModel: assetsModelCheckBox.checked ? assetsModel : null
-        collectiblesModel: collectiblesModel
+        collectiblesModel: collectiblesModelCheckBox.checked ? collectiblesModel : null
 
         onCollectibleSelected: console.log("collectible selected:", key)
         onCollectionSelected: console.log("collection selected:", key)
         onAssetSelected: console.log("asset selected:", key)
     }
+
+    RowLayout {
+        anchors.bottom: parent.bottom
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        CheckBox {
+            id: assetsModelCheckBox
+
+            checked: true
+            text: "Assets model assigned"
+        }
+
+        CheckBox {
+            id: collectiblesModelCheckBox
+
+            checked: true
+            text: "Collectibles model assigned"
+        }
+    }
 }
 
 // category: Controls

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

@@ -0,0 +1,72 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+import StatusQ.Controls 0.1
+import StatusQ.Core.Utils 0.1
+
+import AppLayouts.Wallet.panels 1.0
+
+import utils 1.0
+
+Control {
+    id: root
+
+    /** Expected model structure: see SearchableAssetsPanel::model **/
+    property alias assetsModel: searchableAssetsPanel.model
+
+    readonly property bool isTokenSelected: d.isTokenSelected
+
+    signal assetSelected(string key)
+
+    function setCustom(name: string, icon: url, key: string) {
+        d.isTokenSelected = true
+        tokenSelectorButton.name = name
+        tokenSelectorButton.icon = icon
+        searchableAssetsPanel.highlightedKey = key ?? ""
+    }
+
+    QtObject {
+        id: d
+
+        property bool isTokenSelected: false
+    }
+
+    contentItem: TokenSelectorButton {
+        id: tokenSelectorButton
+
+        selected: d.isTokenSelected
+        forceHovered: dropdown.opened
+
+        text: qsTr("Select asset")
+
+        onClicked: dropdown.opened ? dropdown.close() : dropdown.open()
+    }
+
+    StatusDropdown {
+        id: dropdown
+
+        y: parent.height + 4
+
+        closePolicy: Popup.CloseOnPressOutsideParent
+        padding: 0
+
+        contentItem: SearchableAssetsPanel {
+            id: searchableAssetsPanel
+
+            function setCurrentAndClose(name, icon) {
+                tokenSelectorButton.name = name
+                tokenSelectorButton.icon = icon
+                d.isTokenSelected = true
+                dropdown.close()
+            }
+
+            onSelected: {
+                const entry = ModelUtils.getByKey(assetsModel, "tokensKey", key)
+                highlightedKey = key
+
+                setCurrentAndClose(entry.symbol, entry.iconSource)
+                root.assetSelected(key)
+            }
+        }
+    }
+}

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

@@ -15,6 +15,8 @@ Control {
     property bool selected
     property bool forceHovered
 
+    property string text: qsTr("Select token")
+
     property string name
     property url icon
 
@@ -49,7 +51,7 @@ Control {
                 font.pixelSize: root.font.pixelSize
                 font.weight: Font.Medium
                 color: Theme.palette.primaryColor1
-                text: qsTr("Select token")
+                text: root.text
             }
 
             StatusComboboxIndicator {

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

@@ -29,8 +29,8 @@ Control {
 
     function setCustom(name: string, icon: url, key: string) {
         d.isTokenSelected = true
-        d.currentName = name
+        tokenSelectorButton.name = name
-        d.currentIcon = icon
+        tokenSelectorButton.icon = icon
         tokenSelectorPanel.highlightedKey = key ?? ""
     }
 
@@ -38,18 +38,14 @@ Control {
         id: d
 
         property bool isTokenSelected: false
-
-        property string currentName
-        property url currentIcon
     }
 
     contentItem: TokenSelectorButton {
+        id: tokenSelectorButton
+
         selected: d.isTokenSelected
         forceHovered: dropdown.opened
 
-        name: d.currentName
-        icon: d.currentIcon
-
         onClicked: dropdown.opened ? dropdown.close() : dropdown.open()
     }
 
@@ -59,6 +55,7 @@ Control {
         y: parent.height + 4
 
         closePolicy: Popup.CloseOnPressOutsideParent
+        horizontalPadding: 0
         bottomPadding: 0
 
         contentItem: TokenSelectorPanel {
@@ -79,8 +76,8 @@ Control {
             }
 
             function setCurrentAndClose(name, icon) {
-                d.currentName = name
+                tokenSelectorButton.name = name
-                d.currentIcon = icon
+                tokenSelectorButton.icon = icon
                 d.isTokenSelected = true
                 dropdown.close()
             }

ui/app/AppLayouts/Wallet/controls/qmldir

@@ -1,5 +1,8 @@
 AccountHeaderGradient 1.0 AccountHeaderGradient.qml
 ActivityFilterTagItem 1.0 ActivityFilterTagItem.qml
+AssetSelector 1.0 AssetSelector.qml
+BuyCryptoProvidersDelegate 1.0 BuyCryptoProvidersDelegate.qml
+BuyCryptoProvidersLoadingDelegate 1.0 BuyCryptoProvidersLoadingDelegate.qml
 CollectibleBalanceTag 1.0 CollectibleBalanceTag.qml
 CollectibleLinksTags 1.0 CollectibleLinksTags.qml
 DappsComboBox 1.0 DappsComboBox.qml
@@ -18,9 +21,7 @@ StatusDateRangePicker 1.0 StatusDateRangePicker.qml
 StatusNetworkListItemTag 1.0 StatusNetworkListItemTag.qml
 StatusTxProgressBar 1.0 StatusTxProgressBar.qml
 SwapExchangeButton 1.0 SwapExchangeButton.qml
+SwapProvidersTermsAndConditionsText 1.0 SwapProvidersTermsAndConditionsText.qml
 TokenSelector 1.0 TokenSelector.qml
 TokenSelectorButton 1.0 TokenSelectorButton.qml
 TokenSelectorNew 1.0 TokenSelectorNew.qml
-SwapProvidersTermsAndConditionsText 1.0 SwapProvidersTermsAndConditionsText.qml
-BuyCryptoProvidersDelegate 1.0 BuyCryptoProvidersDelegate.qml
-BuyCryptoProvidersLoadingDelegate 1.0 BuyCryptoProvidersLoadingDelegate.qml

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

@@ -123,9 +123,12 @@ Control {
 
                 section.property: "type"
                 section.delegate: StatusBaseText {
+                    width: ListView.view.width
                     color: Theme.palette.baseColor1
-                    topPadding: Style.current.padding
+                    padding: Style.current.padding
+                    bottomPadding: 0
 
+                    elide: Text.ElideRight
                     text: section === "community"
                           ? qsTr("Community minted")
                           : qsTr("Other")

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

@@ -1,8 +1,9 @@
 import shared.controls 1.0
 
 SearchBox {
-    input.leftPadding: 0
+    input.leftPadding: 14
-    input.rightPadding: 0
+    input.rightPadding: 14
+
     minimumHeight: 56
     maximumHeight: 56
     input.showBackground: false