feat(@desktop/wallet): Handle large numbers in the desktop as per new design

1. Support upto numbers 999B
2. No decimal points after 1M

fixes #10590

src/app/modules/shared_models/balance_model.nim

@@ -1,4 +1,4 @@
-import NimQml, Tables, strutils, strformat
+import NimQml, Tables, strutils, strformat, algorithm
 
 import balance_item
 import ./currency_amount
@@ -75,8 +75,13 @@ QtObject:
       of "address": result = $item.address
       of "balance": result = $item.balance
 
+
+  proc cmpBalances*(x, y: Item): int =
+    cmp(x.balance.getAmount(), y.balance.getAmount())
+
   proc setItems*(self: BalanceModel, items: seq[Item]) =
     self.beginResetModel()
     self.items = items
+    self.items.sort(cmpBalances, SortOrder.Descending)
     self.endResetModel()
     self.countChanged()

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

@@ -358,13 +358,14 @@ Rectangle {
                 visible: tagsRepeater.count > 0
                 anchors.top: statusListItemTertiaryTitle.bottom
                 anchors.topMargin: visible ? 8 : 0
-                width: Math.min(statusListItemTagsSlotInline.width, parent.width)
+                width: Math.min(statusListItemTagsSlotInline.width, statusListItemTagsSlotInline.availableWidth)
                 height: visible ? statusListItemTagsSlotInline.height : 0
                 clip: true
                 interactive: contentWidth > width
 
                 Row {
                     id: statusListItemTagsSlotInline
+                    readonly property real availableWidth: root.width - iconOrImage.width - root.rightPadding - 2*root.leftPadding
                     spacing: tagsRepeater.count > 0 ? 10 : 0
 
                     Repeater {

ui/StatusQ/src/StatusQ/Core/LocaleUtils.qml

@@ -146,7 +146,8 @@ QtObject {
             var amount
             var displayDecimals
             const numIntegerDigits = integralPartLength(currencyAmount.amount)
-            const maxDigits = 10
+            const maxDigits = 11 // We add "B" suffix only after 999 Billion
+            const maxDigitsToShowDecimal = 6 // We do not display decimal places after 1 million
             // For large numbers, we use the short scale system (https://en.wikipedia.org/wiki/Long_and_short_scales)
             // and 2 decimal digits.
             if (numIntegerDigits > maxDigits && !optRawAmount) {
@@ -157,7 +158,13 @@ QtObject {
                 // For normal numbers, we show the whole integral part and as many decimal places not
                 // not to exceed the maximum
                 amount = currencyAmount.amount
-                displayDecimals = Math.min(optDisplayDecimals, Math.max(0, maxDigits - numIntegerDigits))
+		 // For numbers over 1M , dont show decimal places
+                if(numIntegerDigits > maxDigitsToShowDecimal) {
+                    displayDecimals = 0
+                }
+                else {
+                    displayDecimals = Math.min(optDisplayDecimals, Math.max(0, maxDigits - numIntegerDigits))
+                }
             }
             amountStr = numberToLocaleString(amount, displayDecimals, locale)
             if (optStripTrailingZeroes) {

ui/imports/shared/controls/TokenBalancePerChainDelegate.qml

@@ -15,6 +15,23 @@ StatusListItem {
     signal tokenSelected(var selectedToken)
     signal tokenHovered(var selectedToken, bool hovered)
 
+    QtObject {
+        id: d
+
+        readonly property int indexesThatCanBeShown: Math.floor((root.statusListItemInlineTagsSlot.availableWidth - compactRow.width)/statusListItemInlineTagsSlot.children[0].width)-1
+
+        function selectToken() {
+            root.tokenSelected({name, symbol, totalBalance, totalCurrencyBalance, balances, decimals})
+        }
+    }
+
+    Connections {
+        target: root.sensor
+        function onContainsMouseChanged() {
+            root.tokenHovered({name, symbol, totalBalance, totalCurrencyBalance, balances, decimals}, root.sensor.containsMouse)
+        }
+    }
+
     title: name
     titleAsideText: symbol
     statusListItemTitleAside.font.pixelSize: 15
@@ -25,29 +42,23 @@ StatusListItem {
     asset.height: 32
     statusListItemLabel.anchors.verticalCenterOffset: -12
     statusListItemLabel.color: Theme.palette.directColor1
-    statusListItemInlineTagsSlot.spacing: sensor.containsMouse ? 0 :  -8
+    statusListItemInlineTagsSlot.spacing: 0
     tagsModel: balances.count > 0 ? balances : []
-    tagsDelegate: sensor.containsMouse ? expandedItem : compactItem
+    tagsDelegate: expandedItem
+    statusListItemInlineTagsSlot.children: Row {
+        id: compactRow
+        spacing: -6
+        Repeater {
+            model: balances.count > 0 ? balances : []
+            delegate: compactItem
+        }
+    }
+
     radius: sensor.containsMouse || root.highlighted ? 0 : 8
     color: sensor.containsMouse || highlighted ? Theme.palette.baseColor2 : "transparent"
 
     onClicked: d.selectToken()
 
-    Connections {
-        target: root.sensor
-        function onContainsMouseChanged() {
-            root.tokenHovered({name, symbol, totalBalance, totalCurrencyBalance, balances, decimals}, root.sensor.containsMouse)
-        }
-    }
-
-    QtObject {
-        id: d
-
-        function selectToken() {
-            root.tokenSelected({name, symbol, totalBalance, totalCurrencyBalance, balances, decimals})
-        }
-    }
-
     Component {
         id: compactItem
         StatusRoundedImage {
@@ -55,6 +66,7 @@ StatusListItem {
             width: 16
             height: 16
             image.source: Style.svg("tiny/%1".arg(root.getNetworkIcon(chainId)))
+            visible: !root.sensor.containsMouse || index > d.indexesThatCanBeShown
         }
     }
     Component {
@@ -69,6 +81,7 @@ StatusListItem {
             asset.height: 16
             asset.isImage: true
             asset.name: Style.svg("tiny/%1".arg(root.getNetworkIcon(chainId)))
+            visible: root.sensor.containsMouse && index <= d.indexesThatCanBeShown
         }
     }
 }

ui/imports/shared/controls/WalletAccountListItem.qml

@@ -25,7 +25,7 @@ StatusListItem {
     subTitle:{
         if(!!modelData) {
             let elidedAddress = StatusQUtils.Utils.elideText(modelData.address,6,4)
-            return sensor.containsMouse ? WalletUtils.colorizedChainPrefix(chainShortNames) + Utils.richColorText(elidedAddress, Theme.palette.directColor1): chainShortNames + elidedAddress
+            return sensor.containsMouse ? WalletUtils.colorizedChainPrefix(chainShortNames) ||  Utils.richColorText(elidedAddress, Theme.palette.directColor1) : elidedAddress
         }
         return ""
     }