refactor(CommunitySettings): Add SFPM for wallet accounts model in a single place

- It adds proxy of wallet accounts only in a single place (wallet root store) and pass the tuned model through the rest of views.

- It updates `storybook` accordingly.

Closes #11829

storybook/src/Models/WalletAccountsModel.qml

@@ -7,7 +7,8 @@ ListModel {
         {
             name: "helloworld",
             emoji: "😋",
-            colorId: "primary",
+            colorId: Constants.walletAccountColors.primary,
+            color: "#2A4AF5",
             address: "0x7F47C2e18a4BBf5487E6fb082eC2D9Ab0E6d7240",
             walletType: "",
             position: 0,
@@ -44,7 +45,8 @@ ListModel {
         {
             name: "Hot wallet (generated)",
             emoji: "🚗",
-            colorId: "army",
+            colorId: Constants.walletAccountColors.army,
+            color: "#216266",
             address: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8881",
             walletType: Constants.generatedWalletType,
             position: 3,
@@ -62,7 +64,9 @@ ListModel {
         },
         {
             name: "Family (seed)",
-            emoji: "🎨", colorId: "magenta",
+            emoji: "🎨",
+            colorId: Constants.walletAccountColors.magenta,
+            color: "#EC266C",
             address: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8882",
             walletType: Constants.seedWalletType,
             position: 1,
@@ -90,7 +94,8 @@ ListModel {
         {
             name: "Tag Heuer (watch)",
             emoji: "⌚",
-            colorId: "copper",
+            colorId: Constants.walletAccountColors.cooper,
+            color: "#CB6256",
             address: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8883",
             walletType: Constants.watchWalletType,
             position: 2,
@@ -101,6 +106,7 @@ ListModel {
             name: "Fab (key)",
             emoji: "⌚",
             colorId: Constants.walletAccountColors.camel,
+            color: "#C78F67",
             address: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8884",
             walletType: Constants.keyWalletType,
             position: 4,

ui/app/AppLayouts/Chat/ChatLayout.qml

@@ -156,6 +156,7 @@ StackLayout {
         sourceComponent: CommunitySettingsView {
             id: communitySettingsView
             rootStore: root.rootStore
+            walletAccountsModel: WalletStore.RootStore.watchOnlyAccounts
 
             chatCommunitySectionModule: root.rootStore.chatCommunitySectionModule
             community: sectionItemModel
@@ -182,7 +183,7 @@ StackLayout {
             property string communityId
 
             loginType: root.rootStore.loginType
-            walletAccountsModel: WalletStore.RootStore.receiveAccounts
+            walletAccountsModel: WalletStore.RootStore.watchOnlyAccounts
             permissionsModel: root.permissionsStore.permissionsModel
             assetsModel: root.rootStore.assetsModel
             collectiblesModel: root.rootStore.collectiblesModel

ui/app/AppLayouts/Communities/panels/MintTokensSettingsPanel.qml

@@ -566,27 +566,7 @@ StackView {
                 communityName: root.communityName
                 networkName: view.token.chainName
 
-                accountsModel: SortFilterProxyModel {
+                accountsModel: root.accounts
-                    sourceModel: root.accounts
-                    proxyRoles: [
-                        ExpressionRole {
-                            name: "color"
-
-                            function getColor(colorId) {
-                                return Utils.getColorForId(colorId)
-                            }
-
-                            // Direct call for singleton function is not handled properly by
-                            // SortFilterProxyModel that's why helper function is used instead.
-                            expression: { return getColor(model.colorId) }
-                        }
-                    ]
-                    filters: ValueFilter {
-                        roleName: "walletType"
-                        value: Constants.watchWalletType
-                        inverted: true
-                    }
-                }
 
                 function openPopup(type, userName) {
                     tokenMasterActionPopup.actionType = type

ui/app/AppLayouts/Communities/panels/SharedAddressesAccountSelector.qml

@@ -85,7 +85,7 @@ StatusListView {
             }
         }
 
-        asset.color: !!model.colorId ? Utils.getColorForId(model.colorId): ""
+        asset.color: !!model.color ? model.color : ""
         asset.emoji: model.emoji
         asset.name: !model.emoji ? "filled-account": ""
         asset.letterSize: 14

ui/app/AppLayouts/Communities/panels/SharedAddressesPanel.qml

@@ -95,31 +95,7 @@ Control {
             Layout.preferredHeight: contentHeight + topMargin + bottomMargin
             Layout.maximumHeight: hasPermissions ? permissionsView.implicitHeight > root.availableHeight / 2 ? root.availableHeight / 2 : root.availableHeight : -1
             Layout.fillHeight: !hasPermissions
-            model: SortFilterProxyModel {
+            model: root.walletAccountsModel
-                sourceModel: root.walletAccountsModel
-                filters: ValueFilter {
-                    roleName: "walletType"
-                    value: Constants.watchWalletType
-                    inverted: true
-                }
-                sorters: [
-                    ExpressionSorter {
-                        function isGenerated(modelData) {
-                            return modelData.walletType === Constants.generatedWalletType
-                        }
-
-                        expression: {
-                            return isGenerated(modelLeft)
-                        }
-                    },
-                    RoleSorter {
-                        roleName: "position"
-                    },
-                    RoleSorter {
-                        roleName: "name"
-                    }
-                ]
-            }
         }
 
         // divider with top rounded corners + drop shadow

ui/app/AppLayouts/Communities/popups/BurnTokensPopup.qml

@@ -158,27 +158,7 @@ StatusDialog {
             accountErrorText: root.feeErrorText
             implicitWidth: 0
             model: d.isFormValid ? singleFeeModel : undefined
-            accountsSelector.model: SortFilterProxyModel {
+            accountsSelector.model: root.accounts
-                sourceModel: root.accounts
-                proxyRoles: [
-                    ExpressionRole {
-                        name: "color"
-
-                        function getColor(colorId) {
-                            return Utils.getColorForId(colorId)
-                        }
-
-                        // Direct call for singleton function is not handled properly by
-                        // SortFilterProxyModel that's why helper function is used instead.
-                        expression: { return getColor(model.colorId) }
-                    }
-                ]
-                filters: ValueFilter {
-                    roleName: "walletType"
-                    value: Constants.watchWalletType
-                    inverted: true
-                }
-            }
 
             accountsSelector.onCurrentIndexChanged: {
                 if (accountsSelector.currentIndex < 0)

ui/app/AppLayouts/Communities/views/CommunityColumnView.qml

@@ -124,7 +124,7 @@ Item {
                 imageSrc: communityData.image
                 accessType: communityData.access
                 loginType: root.store.loginType
-                walletAccountsModel: WalletStore.RootStore.receiveAccounts
+                walletAccountsModel: WalletStore.RootStore.watchOnlyAccounts
                 permissionsModel: root.store.permissionsStore.permissionsModel
                 assetsModel: root.store.assetsModel
                 collectiblesModel: root.store.collectiblesModel

ui/app/AppLayouts/Communities/views/CommunitySettingsView.qml

@@ -35,6 +35,8 @@ StatusSectionLayout {
     property var transactionStore: TransactionStore {}
     property bool communitySettingsDisabled
 
+    required property var walletAccountsModel // name, address, emoji, color
+
     readonly property bool isOwner: community.memberRole === Constants.memberRole.owner
     readonly property bool isAdmin: isOwner || community.memberRole === Constants.memberRole.admin
     readonly property bool isControlNode: community.isControlNode
@@ -350,7 +352,7 @@ StatusSectionLayout {
             layer2Networks: communityTokensStore.layer2Networks
             enabledNetworks: communityTokensStore.enabledNetworks
             allNetworks: communityTokensStore.allNetworks
-            accounts: root.rootStore.accounts
+            accounts: root.walletAccountsModel
 
             onDeployFeesRequested: {
                 feeText = ""
@@ -506,27 +508,7 @@ StatusSectionLayout {
             collectiblesModel: collectiblesModelLoader.item
             membersModel: community.members
 
-            accountsModel: SortFilterProxyModel {
+            accountsModel: root.walletAccountsModel
-                sourceModel: root.rootStore.accounts
-                proxyRoles: [
-                    ExpressionRole {
-                        name: "color"
-
-                        function getColor(colorId) {
-                            return Utils.getColorForId(colorId)
-                        }
-
-                        // Direct call for singleton function is not handled properly by
-                        // SortFilterProxyModel that's why helper function is used instead.
-                        expression: { return getColor(model.colorId) }
-                    }
-                ]
-                filters: ValueFilter {
-                    roleName: "walletType"
-                    value: Constants.watchWalletType
-                    inverted: true
-                }
-            }
 
             onAirdropClicked: communityTokensStore.airdrop(
                                   root.community.id, airdropTokens, addresses,

ui/app/AppLayouts/Communities/views/CommunityTokenView.qml

@@ -158,27 +158,7 @@ StatusScrollView {
                 readonly property bool error: root.feeErrorText !== ""
             }
 
-            accountsSelector.model: SortFilterProxyModel {
+            accountsSelector.model: root.accounts || null
-                sourceModel: root.accounts || null
-                proxyRoles: [
-                    ExpressionRole {
-                        name: "color"
-
-                        function getColor(colorId) {
-                            return Utils.getColorForId(colorId)
-                        }
-
-                        // Direct call for singleton function is not handled properly by
-                        // SortFilterProxyModel that's why helper function is used instead.
-                        expression: { return getColor(model.colorId) }
-                    }
-                ]
-                filters: ValueFilter {
-                    roleName: "walletType"
-                    value: Constants.watchWalletType
-                    inverted: true
-                }
-            }
 
             Component.onCompleted: {
                 const initIndex = StatusQUtils.ModelUtils.indexOf(

ui/app/AppLayouts/Communities/views/EditCommunityTokenView.qml

@@ -357,27 +357,7 @@ StatusScrollView {
                 return true
             }
 
-            accountsSelector.model: SortFilterProxyModel {
+            accountsSelector.model: root.accounts
-                sourceModel: root.accounts
-                proxyRoles: [
-                    ExpressionRole {
-                        name: "color"
-
-                        function getColor(colorId) {
-                            return Utils.getColorForId(colorId)
-                        }
-
-                        // Direct call for singleton function is not handled properly by
-                        // SortFilterProxyModel that's why helper function is used instead.
-                        expression: { return getColor(model.colorId) }
-                    }
-                ]
-                filters: ValueFilter {
-                    roleName: "walletType"
-                    value: Constants.watchWalletType
-                    inverted: true
-                }
-            }
 
             readonly property TokenObject token: root.isAssetView ? root.asset
                                                                   : root.collectible

ui/app/AppLayouts/Communities/views/EditOwnerTokenView.qml

@@ -168,27 +168,7 @@ StatusScrollView {
             Layout.topMargin: -Style.current.halfPadding
 
             currentIndex: (initIndex !== -1) ? initIndex : 0
-            model: SortFilterProxyModel {
+            model: root.accounts
-                sourceModel: root.accounts
-                proxyRoles: [
-                    ExpressionRole {
-                        name: "color"
-
-                        function getColor(colorId) {
-                            return Utils.getColorForId(colorId)
-                        }
-
-                        // Direct call for singleton function is not handled properly by
-                        // SortFilterProxyModel that's why helper function is used instead.
-                        expression: { return getColor(model.colorId) }
-                    }
-                ]
-                filters: ValueFilter {
-                    roleName: "walletType"
-                    value: Constants.watchWalletType
-                    inverted: true
-                }
-            }
             type: StatusComboBox.Type.Secondary
             size: StatusComboBox.Size.Small
             implicitHeight: 44

ui/app/AppLayouts/Profile/views/CommunitiesView.qml

@@ -233,7 +233,7 @@ SettingsContentBase {
             }
 
             loginType: chatStore.loginType
-            walletAccountsModel: WalletStore.RootStore.receiveAccounts
+            walletAccountsModel: WalletStore.RootStore.watchOnlyAccounts
             permissionsModel: chatStore.permissionsStore.permissionsModel
             assetsModel: chatStore.assetsModel
             collectiblesModel: chatStore.collectiblesModel

ui/app/AppLayouts/Wallet/stores/RootStore.qml

@@ -44,6 +44,28 @@ QtObject {
         ]
     }
 
+    property var watchOnlyAccounts: SortFilterProxyModel {
+        sourceModel: receiveAccounts
+        proxyRoles: [
+            ExpressionRole {
+                name: "color"
+
+                function getColor(colorId) {
+                    return Utils.getColorForId(colorId)
+                }
+
+                // Direct call for singleton function is not handled properly by
+                // SortFilterProxyModel that's why helper function is used instead.
+                expression: { return getColor(model.colorId) }
+            }
+        ]
+        filters: ValueFilter {
+            roleName: "walletType"
+            value: Constants.watchWalletType
+            inverted: true
+        }
+    }
+
     readonly property var currentActivityFiltersStore: {
         const address = root.overview.mixedcaseAddress
         if (address in d.activityFiltersStoreDictionary) {

ui/app/AppLayouts/stores/RootStore.qml

@@ -41,7 +41,7 @@ QtObject {
 
     property var permissionsModel: !!root.communitiesModuleInst.spectatedCommunityPermissionModel ?
                                      root.communitiesModuleInst.spectatedCommunityPermissionModel : null
-    property var walletAccountsModel: WalletStore.RootStore.receiveAccounts
+    property var walletAccountsModel: WalletStore.RootStore.watchOnlyAccounts
     property var assetsModel: SortFilterProxyModel {
         sourceModel: communitiesModuleInst.tokenList
         proxyRoles: ExpressionRole {

ui/imports/shared/popups/CommunityIntroDialog.qml

@@ -63,13 +63,6 @@ StatusStackModal {
 
         readonly property var tempAddressesModel: SortFilterProxyModel {
             sourceModel: root.walletAccountsModel
-            filters: [
-                ValueFilter {
-                    roleName: "walletType"
-                    value: Constants.watchWalletType
-                    inverted: true
-                }
-            ]
             sorters: [
                 ExpressionSorter {
                     function isGenerated(modelData) {
@@ -108,7 +101,26 @@ StatusStackModal {
             communityName: root.name
             communityIcon: root.imageSrc
             loginType: root.loginType
-            walletAccountsModel: root.walletAccountsModel
+            walletAccountsModel: SortFilterProxyModel {
+                sourceModel: root.walletAccountsModel
+                sorters: [
+                    ExpressionSorter {
+                        function isGenerated(modelData) {
+                            return modelData.walletType === Constants.generatedWalletType
+                        }
+
+                        expression: {
+                            return isGenerated(modelLeft)
+                        }
+                    },
+                    RoleSorter {
+                        roleName: "position"
+                    },
+                    RoleSorter {
+                        roleName: "name"
+                    }
+                ]
+            }
             permissionsModel: root.permissionsModel
             assetsModel: root.assetsModel
             collectiblesModel: root.collectiblesModel