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
2023-08-09 14:31:58 +02:00 · 2023-08-09 14:31:58 +02:00 · f721636452
parent 23fa2f5df3
commit f721636452
15 changed files with 68 additions and 169 deletions
--- a/storybook/src/Models/WalletAccountsModel.qml
+++ b/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,
--- a/ui/app/AppLayouts/Chat/ChatLayout.qml
+++ b/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
--- a/ui/app/AppLayouts/Communities/panels/MintTokensSettingsPanel.qml
+++ b/ui/app/AppLayouts/Communities/panels/MintTokensSettingsPanel.qml
@ -566,27 +566,7 @@ StackView {
                communityName: root.communityName
                networkName: view.token.chainName

-                accountsModel: SortFilterProxyModel {
-                    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
-                    }
-                }
+                accountsModel: root.accounts

                function openPopup(type, userName) {
                    tokenMasterActionPopup.actionType = type
--- a/ui/app/AppLayouts/Communities/panels/SharedAddressesAccountSelector.qml
+++ b/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
--- a/ui/app/AppLayouts/Communities/panels/SharedAddressesPanel.qml
+++ b/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 {
-                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"
-                    }
-                ]
-            }
+            model: root.walletAccountsModel
        }

        // divider with top rounded corners + drop shadow
--- a/ui/app/AppLayouts/Communities/popups/BurnTokensPopup.qml
+++ b/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 {
-                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.model: root.accounts

            accountsSelector.onCurrentIndexChanged: {
                if (accountsSelector.currentIndex < 0)
--- a/ui/app/AppLayouts/Communities/views/CommunityColumnView.qml
+++ b/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
--- a/ui/app/AppLayouts/Communities/views/CommunitySettingsView.qml
+++ b/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 {
-                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
-                }
-            }
+            accountsModel: root.walletAccountsModel

            onAirdropClicked: communityTokensStore.airdrop(
                                  root.community.id, airdropTokens, addresses,
--- a/ui/app/AppLayouts/Communities/views/CommunityTokenView.qml
+++ b/ui/app/AppLayouts/Communities/views/CommunityTokenView.qml
@ -158,27 +158,7 @@ StatusScrollView {
                readonly property bool error: root.feeErrorText !== ""
            }

-            accountsSelector.model: SortFilterProxyModel {
-                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
-                }
-            }
+            accountsSelector.model: root.accounts || null

            Component.onCompleted: {
                const initIndex = StatusQUtils.ModelUtils.indexOf(
--- a/ui/app/AppLayouts/Communities/views/EditCommunityTokenView.qml
+++ b/ui/app/AppLayouts/Communities/views/EditCommunityTokenView.qml
@ -357,27 +357,7 @@ StatusScrollView {
                return true
            }

-            accountsSelector.model: SortFilterProxyModel {
-                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.model: root.accounts

            readonly property TokenObject token: root.isAssetView ? root.asset
                                                                  : root.collectible
--- a/ui/app/AppLayouts/Communities/views/EditOwnerTokenView.qml
+++ b/ui/app/AppLayouts/Communities/views/EditOwnerTokenView.qml
@ -168,27 +168,7 @@ StatusScrollView {
            Layout.topMargin: -Style.current.halfPadding

            currentIndex: (initIndex !== -1) ? initIndex : 0
-            model: SortFilterProxyModel {
-                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
-                }
-            }
+            model: root.accounts
            type: StatusComboBox.Type.Secondary
            size: StatusComboBox.Size.Small
            implicitHeight: 44
--- a/ui/app/AppLayouts/Profile/views/CommunitiesView.qml
+++ b/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
--- a/ui/app/AppLayouts/Wallet/stores/RootStore.qml
+++ b/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) {
--- a/ui/app/AppLayouts/stores/RootStore.qml
+++ b/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 {
--- a/ui/imports/shared/popups/CommunityIntroDialog.qml
+++ b/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