fix(@desktop/wallet): Search Bar missing in token selection popup

fixes #7014

src/app/modules/main/wallet_section/current_account/controller.nim

@@ -26,3 +26,6 @@ proc getWalletAccount*(self: Controller, accountIndex: int): wallet_account_serv
 
 proc update*(self: Controller, address: string, accountName: string, color: string, emoji: string) =
   self.walletAccountService.updateWalletAccount(address, accountName, color, emoji)
+
+method findTokenSymbolByAddress*(self: Controller, address: string): string =
+  return self.walletAccountService.findTokenSymbolByAddress(address)

src/app/modules/main/wallet_section/current_account/io_interface.nim

@@ -17,6 +17,9 @@ method switchAccount*(self: AccessInterface, accountIndex: int) {.base.} =
 method update*(self: AccessInterface, address: string, accountName: string, color: string, emoji: string) {.base.} =
   raise newException(ValueError, "No implementation available")
 
+method findTokenSymbolByAddress*(self: AccessInterface, address: string): string {.base.} =
+  raise newException(ValueError, "No implementation available")
+
 # View Delegate Interface
 # Delegate for the view must be declared here due to use of QtObject and multi
 # inheritance, which is not well supported in Nim.

src/app/modules/main/wallet_section/current_account/module.nim

@@ -114,3 +114,7 @@ proc onTokensRebuilt(self: Module, accountsTokens: OrderedTable[string, seq[Wall
   if not accountsTokens.contains(walletAccount.address):
     return
   self.setAssetsAndBalance(accountsTokens[walletAccount.address])
+
+method findTokenSymbolByAddress*(self: Module, address: string): string =
+  return self.controller.findTokenSymbolByAddress(address)
+

src/app/modules/main/wallet_section/current_account/view.nim

@@ -222,3 +222,5 @@ QtObject:
     self.relatedAccounts = relatedAccounts
     self.relatedAccountsChanged()
 
+  proc findTokenSymbolByAddress*(self: View, address: string): string {.slot.} =
+    return self.delegate.findTokenSymbolByAddress(address)

src/app_service/service/token/service.nim

@@ -104,6 +104,24 @@ QtObject:
       if token.address == address:
         return token
 
+  proc findTokenSymbolByAddressInAllNetworks*(self: Service, address: string): string =
+    if address.isEmptyOrWhitespace:
+      return ""
+
+    var hexAddressValue: Address
+    try:
+      hexAddressValue = fromHex(Address, address)
+    except Exception as e:
+      let errDesription = e.msg
+      error "error: ", errDesription
+      return ""
+
+    for _, tokens in self.tokens:
+      for token in tokens:
+        if token.address == hexAddressValue:
+          return token.symbol
+    return ""
+
   proc addCustomToken*(self: Service, chainId: int, address: string, name: string, symbol: string, decimals: int): string =
     # TODO(alaile): use chainId rather than first enabled network
     let networkWIP = self.networkService.getNetworks()[0]

src/app_service/service/wallet_account/service.nim

@@ -449,3 +449,6 @@ QtObject:
         if token.balancesPerChain.hasKey(network.chainId):
           let balance = token.balancesPerChain[network.chainId]
           result += balance.currencyBalance
+
+  proc findTokenSymbolByAddress*(self: Service, address: string): string =
+    return self.tokenService.findTokenSymbolByAddressInAllNetworks(address)

ui/imports/shared/controls/AssetAndAmountInput.qml

@@ -172,6 +172,12 @@ Item {
          tokenAssetSourceFn: function (symbol) {
              return symbol ? Style.png("tokens/" + symbol) : defaultToken
          }
+         searchTokenSymbolByAddress: function (address) {
+             if(popup.selectedAccount) {
+                 return popup.selectedAccount.findTokenSymbolByAddress(address)
+             }
+             return ""
+         }
          onSelectedAssetChanged: {
              if (!selectAsset.selectedAsset) {
                  return

ui/imports/shared/panels/StatusAssetSelector.qml

@@ -2,11 +2,16 @@ import QtQuick 2.13
 import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 
+import SortFilterProxyModel 0.2
+
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Core.Utils 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
+import StatusQ.Core.Backpressure 1.0
+
+import shared.controls 1.0
 
 Item {
     id: root
@@ -18,6 +23,9 @@ Item {
     property var tokenAssetSourceFn: function (symbol) {
         return ""
     }
+    property var searchTokenSymbolByAddress: function (address) {
+        return ""
+    }
 
     // Define this in the usage to get balance in currency selected by user
     property var getCurrencyBalanceString: function (currencyBalance) { return "" }
@@ -41,6 +49,11 @@ Item {
         id: d
         property string iconSource: ""
         property string text: ""
+        property string searchString
+
+        readonly property var updateSearchText: Backpressure.debounce(root, 1000, function(inputText) {
+            d.searchString = inputText
+        })
     }
 
     StatusComboBox {
@@ -56,7 +69,17 @@ Item {
         
         popupContentItemObjectName: "assetSelectorList"
 
-        model: root.assets
+        model : SortFilterProxyModel {
+            sourceModel: root.assets
+            filters: [
+                ExpressionFilter {
+                    expression: {
+                        var tokenSymbolByAddress = searchTokenSymbolByAddress(d.searchString)
+                        return symbol.startsWith(d.searchString.toUpperCase()) || name.toUpperCase().startsWith(d.searchString.toUpperCase()) || (tokenSymbolByAddress!=="" && symbol.startsWith(tokenSymbolByAddress))
+                    }
+                }
+            ]
+        }
 
         control.background: Rectangle {
             color: "transparent"
@@ -165,5 +188,39 @@ Item {
                 }
             }
         }
+
+        Component.onCompleted: {
+            control.currentIndex = -1
+            control.popup.contentItem.header = searchBox
+        }
+
+        control.popup.onOpened: {
+            control.currentIndex = -1
+        }
+    }
+
+    Component {
+        id: searchBox
+        StatusInput {
+            width: parent.width
+            input.showBackground: false
+            placeholderText: qsTr("Search for token or enter token address")
+            onTextChanged: Qt.callLater(d.updateSearchText, text)
+            input.clearable: true
+            leftPadding: 0
+            rightPadding: 0
+            input.rightComponent: StatusIcon {
+                width: 24
+                height: 24
+                color: Theme.palette.baseColor1
+                icon: "search"
+            }
+            Rectangle {
+                anchors.bottom: parent.bottom
+                height: 1
+                width: parent.width
+                color: Theme.palette.baseColor2
+            }
+        }
     }
 }

ui/imports/shared/popups/SendModal.qml

@@ -201,6 +201,12 @@ StatusDialog {
                         tokenAssetSourceFn: function (symbol) {
                             return symbol ? Style.png("tokens/" + symbol) : defaultToken
                         }
+                        searchTokenSymbolByAddress: function (address) {
+                            if(popup.selectedAccount) {
+                                return popup.selectedAccount.findTokenSymbolByAddress(address)
+                            }
+                            return ""
+                        }
                         onSelectedAssetChanged: {
                             if (!assetSelector.selectedAsset) {
                                 return
@@ -302,11 +308,11 @@ StatusDialog {
                         onSelectedRecipientChanged: gasSelector.estimateGas()
                         Layout.fillWidth: true
                         Layout.leftMargin: Style.current.bigPadding
-                        Layout.rightMargin: Style.current.bigPadding
+                        implicitHeight: 71
 
                         StatusButton {
                             anchors.right: parent.right
-                            anchors.rightMargin: 16
+                            anchors.rightMargin: Style.current.xlPadding
                             anchors.bottom: parent.bottom
                             anchors.bottomMargin: 8