fix(@desktop/wallet): Use LeftJoinodel to link networks with chainId in various models such collectibles model, assets models.

fixes #8923

storybook/pages/TokenListViewPage.qml

@@ -23,12 +23,9 @@ SplitView {
 
             width: 400
 
-            getNetworkIcon: function(chainId) {
-                return "network/Network=Optimism"
-            }
-
             assets: WalletAssetsModel {}
             collectibles: WalletNestedCollectiblesModel {}
+            networksModel: NetworksModel.allNetworks
         }
     }
 

storybook/stubs/shared/stores/send/TransactionStore.qml

@@ -17,6 +17,7 @@ QtObject {
         property ListModel model: ListModel{}
     }
 
+    property var allNetworksModel: NetworksModel.allNetworks
     property var fromNetworksModel: NetworksModel.sendFromNetworks
     property var toNetworksModel: NetworksModel.sendToNetworks
     property var selectedSenderAccount: senderAccounts.get(0)
@@ -237,10 +238,6 @@ QtObject {
         }
     }
 
-    function getNetworkIcon(chainId) {
-        return ModelUtils.getByKey(NetworksModel.allNetworks, "chainId", Number(chainId), "iconUrl")
-    }
-
     function resetStoredProperties() {
         root.amountToSend = ""
         root.sendType = Constants.SendType.Transfer

ui/app/AppLayouts/Wallet/views/AssetsDetailView.qml

@@ -57,14 +57,9 @@ Item {
         secondaryText: token ? LocaleUtils.currencyAmountToLocaleString(token.enabledNetworkBalance) : Constants.dummyText
         tertiaryText: token ? LocaleUtils.currencyAmountToLocaleString(token.enabledNetworkCurrencyBalance) : Constants.dummyText
         balances: token && token.balances ? token.balances : null
+        networksModel: RootStore.allNetworks
         isLoading: root.assetsLoading
         errorTooltipText: token && token.balances ? networkConnectionStore.getBlockchainNetworkDownTextForToken(token.balances): ""
-        getNetworkColor: function(chainId){
-            return RootStore.getNetworkColor(chainId)
-        }
-        getNetworkIcon: function(chainId){
-            return RootStore.getNetworkIcon(chainId)
-        }
         formatBalance: function(balance){
             return LocaleUtils.currencyAmountToLocaleString(balance)
         }

ui/imports/shared/controls/AssetsDetailsHeader.qml

@@ -4,6 +4,7 @@ import QtQuick.Controls 2.14
 import utils 1.0
 import shared.controls 1.0
 
+import StatusQ 0.1
 import StatusQ.Components 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Core 0.1
@@ -16,14 +17,13 @@ Control {
     property alias secondaryText: cryptoBalance.text
     property alias tertiaryText: fiatBalance.text
     property var balances
+    property var networksModel
     property bool isLoading: false
     property string errorTooltipText
     property StatusAssetSettings asset: StatusAssetSettings {
         width: 40
         height: 40
     }
-    property var getNetworkColor: function(chainId){}
-    property var getNetworkIcon: function(chainId){}
     property var formatBalance: function(balance){}
 
     topPadding: Style.current.padding
@@ -82,11 +82,15 @@ Control {
             anchors.leftMargin: identiconLoader.width
             Repeater {
                 id: chainRepeater
-                model: balances ? balances : null
+                model: LeftJoinModel {
+                    leftModel: root.balances
+                    rightModel: root.networksModel
+                    joinRole: "chainId"
+                }
                 delegate: InformationTag {
                     tagPrimaryLabel.text: root.formatBalance(model.balance)
-                    tagPrimaryLabel.color: root.getNetworkColor(model.chainId)
+                    tagPrimaryLabel.color: model.chainColor
-                    image.source: Style.svg("tiny/%1".arg(root.getNetworkIcon(model.chainId)))
+                    image.source: Style.svg("tiny/%1".arg(model.iconUrl))
                     loading: root.isLoading
                     rightComponent: StatusFlatRoundButton {
                         width: 14

ui/imports/shared/popups/send/SendModal.qml

@@ -39,7 +39,6 @@ StatusDialog {
     property alias modalHeader: modalHeader.text
 
     property TransactionStore store: TransactionStore {}
-    property var collectiblesModel: store.collectiblesModel
     property var nestedCollectiblesModel: store.nestedCollectiblesModel
     property var bestRoutes
     property bool isLoading: false
@@ -247,12 +246,10 @@ StatusDialog {
                             Layout.fillHeight: true
                             assetsModel: popup.preSelectedAccount && popup.preSelectedAccount.assets ? popup.preSelectedAccount.assets : null
                             collectiblesModel: popup.preSelectedAccount ? popup.nestedCollectiblesModel : null
+                            networksModel: popup.store.allNetworksModel
                             currentCurrencySymbol: d.currencyStore.currentCurrencySymbol
                             visible: (!!d.selectedHolding && d.selectedHoldingType !== Constants.HoldingType.Unknown) ||
                                      (!!d.hoveredHolding && d.hoveredHoldingType !== Constants.HoldingType.Unknown)
-                            getNetworkIcon: function(chainId){
-                                return popup.store.getNetworkIcon(chainId)
-                            }
                             onItemSelected: {
                                 d.setSelectedHoldingId(holdingId, holdingType)
                             }
@@ -376,13 +373,12 @@ StatusDialog {
                         visible: !d.selectedHolding
                         assets: popup.preSelectedAccount && popup.preSelectedAccount.assets ? popup.preSelectedAccount.assets : null
                         collectibles: popup.preSelectedAccount ? popup.nestedCollectiblesModel : null
+                        networksModel: popup.store.allNetworksModel
                         onlyAssets: holdingSelector.onlyAssets
+                        // TODO remove this as address should be found directly in model itself
                         searchTokenSymbolByAddressFn: function (address) {
                             return store.findTokenSymbolByAddress(address)
                         }
-                        getNetworkIcon: function(chainId){
-                            return popup.store.getNetworkIcon(chainId)
-                        }
                         onTokenSelected: {
                             d.setSelectedHoldingId(symbol, holdingType)
                         }

ui/imports/shared/popups/send/controls/CollectibleNestedDelegate.qml

@@ -9,9 +9,6 @@ import utils 1.0
 StatusListItem {
     id: root
 
-    property var getNetworkIcon: function(chainId) {
-        return ""
-    }
     signal itemSelected(var selectedItem)
     signal itemHovered(var selectedItem, bool hovered)
 
@@ -48,7 +45,7 @@ StatusListItem {
         StatusRoundedImage {
             width: 20
             height: 20
-            image.source: Style.svg("tiny/%1".arg(root.getNetworkIcon(chainId)))
+            image.source: Style.svg("tiny/%1".arg(networkIconUrl))
             visible: !isCollection && root.sensor.containsMouse
         },
         StatusIcon {

ui/imports/shared/popups/send/controls/TokenBalancePerChainDelegate.qml

@@ -9,9 +9,7 @@ import utils 1.0
 StatusListItem {
     id: root
 
-    property var getNetworkIcon: function(chainId){
+    property var balancesModel
-        return ""
-    }
     signal tokenSelected(var selectedToken)
     signal tokenHovered(var selectedToken, bool hovered)
 
@@ -50,13 +48,13 @@ StatusListItem {
     statusListItemLabel.anchors.verticalCenterOffset: -12
     statusListItemLabel.color: Theme.palette.directColor1
     statusListItemInlineTagsSlot.spacing: 0
-    tagsModel: balances.count > 0 ? balances : []
+    tagsModel: root.balancesModel
     tagsDelegate: expandedItem
     statusListItemInlineTagsSlot.children: Row {
         id: compactRow
         spacing: -6
         Repeater {
-            model: balances.count > 0 ? balances : []
+            model: root.balancesModel
             delegate: compactItem
         }
     }
@@ -72,7 +70,7 @@ StatusListItem {
             z: index + 1
             width: 16
             height: 16
-            image.source: Style.svg("tiny/%1".arg(root.getNetworkIcon(chainId)))
+            image.source: Style.svg("tiny/%1".arg(iconUrl))
             visible: !root.sensor.containsMouse || index > d.indexesThatCanBeShown
         }
     }
@@ -88,7 +86,7 @@ StatusListItem {
             asset.width: 16
             asset.height: 16
             asset.isImage: true
-            asset.name: Style.svg("tiny/%1".arg(root.getNetworkIcon(chainId)))
+            asset.name: Style.svg("tiny/%1".arg(iconUrl))
             visible: root.sensor.containsMouse && index <= d.indexesThatCanBeShown
         }
     }

ui/imports/shared/popups/send/panels/HoldingSelector.qml

@@ -8,6 +8,7 @@ import utils 1.0
 
 import SortFilterProxyModel 0.2
 
+import StatusQ 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
@@ -18,6 +19,7 @@ Item {
     id: root
     property var assetsModel
     property var collectiblesModel
+    property var networksModel
     property string currentCurrencySymbol
     property bool onlyAssets: true
 
@@ -28,10 +30,6 @@ Item {
         return ""
     }
 
-    property var getNetworkIcon: function(chainId){
-        return ""
-    }
-
     signal itemHovered(string holdingId, var holdingType)
     signal itemSelected(string holdingId, var holdingType)
 
@@ -118,8 +116,22 @@ Item {
             return !!item && item.iconUrl ? item.iconUrl : ""
         }
 
+        readonly property RolesRenamingModel renamedAllNetworksModel: RolesRenamingModel {
+            sourceModel: root.networksModel
+            mapping: RoleRename {
+                from: "iconUrl"
+                to: "networkIconUrl"
+            }
+        }
+
+        readonly property LeftJoinModel collectibleNetworksJointModel: LeftJoinModel {
+            leftModel: root.collectiblesModel
+            rightModel: d.renamedAllNetworksModel
+            joinRole: "chainId"
+        }
+
         property var collectibleComboBoxModel: SortFilterProxyModel {
-            sourceModel: root.collectiblesModel
+            sourceModel: d.collectibleNetworksJointModel
             filters: [
                 ExpressionFilter {
                     expression: {
@@ -183,6 +195,7 @@ Item {
               // collectible
               property var uid: model.uid
               property var iconUrl: model.iconUrl
+              property var networkIconUrl: model.networkIconUrl
               property var collectionUid: model.collectionUid
               property var collectionName: model.collectionName
               property var isCollection: model.isCollection
@@ -278,7 +291,11 @@ Item {
         TokenBalancePerChainDelegate {
             objectName: "AssetSelector_ItemDelegate_" + symbol
             width: holdingItemSelector.comboBoxControl.popup.width
-            getNetworkIcon: root.getNetworkIcon
+            balancesModel: LeftJoinModel {
+                leftModel: balances
+                rightModel: root.networksModel
+                joinRole: "chainId"
+            }
             onTokenSelected: {
                 holdingItemSelector.selectedItem = selectedToken
                 d.currentHoldingType = Constants.HoldingType.Asset
@@ -293,7 +310,6 @@ Item {
         CollectibleNestedDelegate {
             objectName: "CollectibleSelector_ItemDelegate_" + collectionUid
             width: holdingItemSelector.comboBoxControl.popup.width
-            getNetworkIcon: root.getNetworkIcon
             onItemSelected: {
                 if (isCollection) {
                     d.currentBrowsingCollectionName = collectionName

ui/imports/shared/popups/send/views/TokenListView.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.14
 
 import SortFilterProxyModel 0.2
 
+import StatusQ 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
@@ -17,12 +18,12 @@ Item {
 
     property var assets: null
     property var collectibles: null
+    property var networksModel
     signal tokenSelected(string symbol, var holdingType)
     signal tokenHovered(string symbol, var holdingType, bool hovered)
     property var searchTokenSymbolByAddressFn: function (address) {
         return ""
     }
-    property var getNetworkIcon: function(chainId){}
     property bool onlyAssets: false
     property int browsingHoldingType: Constants.HoldingType.Asset
 
@@ -53,6 +54,20 @@ Item {
                                              [qsTr("Assets"), qsTr("Collectibles")]
 
         property string currentBrowsingCollectionName
+
+        readonly property RolesRenamingModel renamedAllNetworksModel: RolesRenamingModel {
+            sourceModel: root.networksModel
+            mapping: RoleRename {
+                from: "iconUrl"
+                to: "networkIconUrl"
+            }
+        }
+
+        readonly property LeftJoinModel collectiblesNetworksJointModel: LeftJoinModel {
+            leftModel: root.collectibles
+            rightModel: d.renamedAllNetworksModel
+            joinRole: "chainId"
+        }
     }
 
     implicitWidth: contentLayout.implicitWidth
@@ -135,8 +150,9 @@ Item {
             }
         ]
     }
+
     property var collectiblesModel: SortFilterProxyModel {
-        sourceModel: root.collectibles
+        sourceModel: d.collectiblesNetworksJointModel
         filters: [
             ExpressionFilter {
                 expression: {
@@ -154,7 +170,11 @@ Item {
         id: tokenDelegate
         TokenBalancePerChainDelegate {
             width: ListView.view.width
-            getNetworkIcon: root.getNetworkIcon
+            balancesModel: LeftJoinModel {
+                leftModel: balances
+                rightModel: root.networksModel
+                joinRole: "chainId"
+            }
             onTokenSelected: root.tokenSelected(symbol, Constants.HoldingType.Asset)
             onTokenHovered: root.tokenHovered(symbol, Constants.HoldingType.Asset, hovered)
         }
@@ -172,7 +192,6 @@ Item {
         id: collectiblesDelegate
         CollectibleNestedDelegate {
             width: ListView.view.width
-            getNetworkIcon: root.getNetworkIcon
             onItemHovered: root.tokenHovered(selectedItem.uid, Constants.HoldingType.Collectible, hovered)
             onItemSelected: {
                 if (isCollection) {

ui/imports/shared/stores/RootStore.qml

@@ -30,11 +30,14 @@ QtObject {
     property bool isNonArchivalNode: Global.appIsReady && walletSectionInst.isNonArchivalNode
 
     property var marketValueStore: TokenMarketValuesStore{}
+    property var allNetworks: networksModule.all
 
     function resetFilter() {
         walletSectionInst.activityController.updateFilter()
     }
 
+    // TODO remove all these by linking chainId for networks and activity using LeftJoinModel
+    // not possible currently due to the current structure of the activity model
     function getNetworkColor(chainId) {
         return networksModule.all.getChainColor(chainId)
     }

ui/imports/shared/stores/send/TransactionStore.qml

@@ -19,6 +19,7 @@ QtObject {
     property var assets: walletSectionAssets.assets
     property var fromNetworksModel: walletSectionSendInst.fromNetworksModel
     property var toNetworksModel: walletSectionSendInst.toNetworksModel
+    property var allNetworksModel: networksModule.all
     property var senderAccounts: walletSectionSendInst.senderAccounts
     property var selectedSenderAccount: walletSectionSendInst.selectedSenderAccount
     property var accounts: walletSectionSendInst.accounts
@@ -247,8 +248,4 @@ QtObject {
     function getShortChainIds(chainShortNames) {
         return walletSectionSendInst.getShortChainIds(chainShortNames)
     }
-
-    function getNetworkIcon(chainId) {
-        return walletSectionSendInst.getIconUrl(chainId)
-    }
 }