[UI - Swap] Update / improve AccountsSelector component to cover swap design specs

- sort accounts by total currency balance, irrespective of the tokens
held
- fixup 0 sub-balance formatting

Fixes #14779

storybook/pages/WalletAccountListItemPage.qml

@@ -20,7 +20,7 @@ SplitView {
             emoji: emojiField.text
             walletColor: walletColorField.text
             currencyBalance: QtObject {
-                readonly property double amount: parseInt(currencyBalanceField.text)
+                readonly property double amount: parseFloat(currencyBalanceField.text)
                 readonly property string symbol: "USD"
                 readonly property int displayDecimals: 4
                 readonly property bool stripTrailingZeroes: false
@@ -129,4 +129,4 @@ SplitView {
             }
         }
     }
-}
+}

ui/StatusQ/src/StatusQ/Components/StatusListItem.qml

@@ -351,6 +351,8 @@ Rectangle {
                     Layout.alignment: Qt.AlignVCenter
                     padding: 0
 
+                    ScrollBar.horizontal.policy: root.tagsScrollBarVisible ? ScrollBar.AsNeeded : ScrollBar.AlwaysOff
+
                     Row {
                         id: row
                         spacing: 4

ui/StatusQ/src/StatusQ/Core/Utils/Utils.qml

@@ -227,7 +227,7 @@ QtObject {
     }
 
     function elideAndFormatWalletAddress(address) {
-        return elideText(address, 5, 3).replace(
+        return elideText(address, 6, 4).replace(
                     "0x", "0" + String.fromCodePoint(0x00D7))
     }
 

ui/app/AppLayouts/Wallet/popups/swap/SwapModalAdaptor.qml

@@ -34,13 +34,21 @@ QObject {
             value: Constants.watchWalletType
             inverted: true
         }
-        sorters: RoleSorter { roleName: "position"; sortOrder: Qt.AscendingOrder }
+        sorters: [
+            RoleSorter { roleName: "currencyBalanceDouble"; sortOrder: Qt.DescendingOrder },
+            RoleSorter { roleName: "position"; sortOrder: Qt.AscendingOrder }
+        ]
         proxyRoles: [
             FastExpressionRole {
                 name: "accountBalance"
                 expression: d.processAccountBalance(model.address)
                 expectedRoles: ["address"]
             },
+            FastExpressionRole {
+                name: "currencyBalanceDouble"
+                expression: model.currencyBalance.amount
+                expectedRoles: ["currencyBalance"]
+            },
             FastExpressionRole {
                 name: "fromToken"
                 expression: root.fromToken
@@ -88,7 +96,7 @@ QObject {
 
         property string uuid
 
-       readonly property SubmodelProxyModel filteredBalancesModel: SubmodelProxyModel {
+        readonly property SubmodelProxyModel filteredBalancesModel: SubmodelProxyModel {
             sourceModel: root.walletAssetsStore.baseGroupedAccountAssetModel
             submodelRoleName: "balances"
             delegateModel: SortFilterProxyModel {
@@ -119,10 +127,8 @@ QObject {
 
             let balancesModel = ModelUtils.getByKey(filteredBalancesModel, "tokensKey", root.swapFormData.fromTokensKey, "balances")
             let accountBalance = ModelUtils.getByKey(balancesModel, "account", address)
-            if(accountBalance) {
-                let balance = AmountsArithmetic.toNumber(accountBalance.balance, root.fromToken.decimals)
-                let formattedBalance = root.formatCurrencyAmount(balance, root.fromToken.symbol)
-                accountBalance.formattedBalance = formattedBalance
+            if(accountBalance && accountBalance.balance !== "0") {
+                accountBalance.formattedBalance = root.formatCurrencyAmountFromBigInt(accountBalance.balance, root.fromToken.symbol, root.fromToken.decimals)
                 return accountBalance
             }
 
@@ -130,7 +136,7 @@ QObject {
                 balance: "0",
                 iconUrl: network.iconUrl,
                 chainColor: network.chainColor,
-                formattedBalance: root.formatCurrencyAmount(.0 , root.fromToken.symbol)
+                formattedBalance: "0 %1".arg(root.fromToken.symbol)
             }
         }
     }

ui/imports/shared/controls/AccountSelector.qml

@@ -24,7 +24,7 @@ import shared.controls 1.0
     currencyBalance         [var]    - fiat currency balance
         amount              [number] - amount of currency e.g. 1234
         symbol              [string] - currency symbol e.g. "USD"
-        optDisplayDecimals  [number] - optional number of decimals to display
+        displayDecimals     [number] - optional number of decimals to display
         stripTrailingZeroes [bool]   - strip trailing zeroes
     walletType              [string] - wallet type e.g. Constants.watchWalletType. See `Constants` for possible values
     migratedToKeycard       [bool]   - whether account is migrated to keycard
@@ -42,7 +42,7 @@ StatusComboBox {
     property string selectedAddress: ""
     // output property for selected account
     readonly property alias currentAccount: selectedEntry.item
-    readonly property string currentAccountAddress: root.control.currentValue ?? ""
+    readonly property string currentAccountAddress: d.currentAccountSelection
 
     // styling options
     type: StatusComboBox.Type.Secondary
@@ -99,6 +99,8 @@ StatusComboBox {
 
         required property var model
 
+        tagsScrollBarVisible: false
+
         width: ListView.view.width
         name: model.name
         address: model.address
@@ -122,7 +124,7 @@ StatusComboBox {
         id: selectedEntry
         sourceModel: root.model ?? null
         key: "address"
-        value: control.currentValue
+        value: d.currentAccountSelection
     }
 
     QtObject {

ui/imports/shared/controls/AccountSelectorHeader.qml

@@ -20,6 +20,10 @@ AccountSelector {
         objectName: "headerBackground"
         radius: 8
         color: d.headerStyleBackgroundColor
+
+        HoverHandler {
+            cursorShape: root.enabled ? Qt.PointingHandCursor : undefined
+        }
     }
 
     contentItem: RowLayout {
@@ -48,8 +52,7 @@ AccountSelector {
             horizontalAlignment: Text.AlignLeft
             verticalAlignment: Text.AlignVCenter
             elide: Text.ElideRight
-            font.pixelSize: 15
-            color: Theme.palette.indirectColor1
+            color: Utils.getContrastingColor(d.headerStyleBackgroundColor)
         }
     }
 

ui/imports/shared/controls/WalletAccountListItem.qml

@@ -40,12 +40,13 @@ StatusListItem {
     title: root.name
     subTitle:{
         if(!!root.address) {
-            let elidedAddress = StatusQUtils.Utils.elideText(root.address,6,4)
+            let elidedAddress = StatusQUtils.Utils.elideAndFormatWalletAddress(root.address)
             return sensor.containsMouse ? root.chainShortNames ||  Utils.richColorText(elidedAddress, Theme.palette.directColor1) : elidedAddress
         }
         return ""
     }
     statusListItemSubTitle.wrapMode: Text.NoWrap
+    statusListItemSubTitle.font.family: Theme.palette.monoFont.name
     asset.emoji: root.emoji
     asset.color: root.walletColor
     asset.name: root.emoji ? "filled-account": ""
@@ -82,6 +83,7 @@ StatusListItem {
         }
     ]
 
+    tagsScrollBarVisible: false
     inlineTagModel: !!root.accountBalance && !!root.accountBalance.formattedBalance ? 1 : 0
     inlineTagDelegate: StatusListItemTag {
         objectName: "inlineTagDelegate_" +  index

ui/imports/utils/Utils.qml

@@ -834,6 +834,15 @@ QtObject {
         return 0
     }
 
+    function getContrastingColor(color) {
+        const hexcolor = color.toString()
+        const r = parseInt(hexcolor.substring(1,3), 16);
+        const g = parseInt(hexcolor.substring(3,5), 16);
+        const b = parseInt(hexcolor.substring(5,7), 16);
+        const yiq = ((r*299)+(g*587)+(b*114))/1000;
+        return (yiq >= 128) ? Theme.palette.black : Theme.palette.white;
+    }
+
     function getPathForDisplay(path) {
         return path.split("/").join(" / ")
     }