Storybook pages - multiple fixes regarding stores

storybook/pages/AccountViewPage.qml

@@ -4,13 +4,13 @@ import QtQuick.Controls 2.14
 import SortFilterProxyModel 0.2
 
 import AppLayouts.Profile.views.wallet 1.0
+import AppLayouts.Profile.stores 1.0 as ProfileStores
 
 import StatusQ.Core.Theme 0.1
 
 import utils 1.0
 
 import Storybook 1.0
-
 import Models 1.0
 
 SplitView {
@@ -48,7 +48,7 @@ SplitView {
             property bool accountBalanceNotAvailable: false
         }
 
-        readonly property QtObject walletStore: QtObject {
+        readonly property ProfileStores.WalletStore walletStore: ProfileStores.WalletStore {
             property var networks: SortFilterProxyModel {
                 sourceModel: NetworksModel.flatNetworks
                 filters: ValueFilter { roleName: "isTest"; value: areTestNetworksEnabledCheckbox.checked }

storybook/pages/ActivityNotificationCommunityMembershipRequestPage.qml

@@ -9,6 +9,8 @@ import StatusQ.Core.Theme 0.1
 import mainui.activitycenter.views 1.0
 import mainui.activitycenter.stores 1.0
 
+import AppLayouts.Chat.stores 1.0 as ChatStores
+
 import utils 1.0
 
 import Storybook 1.0
@@ -110,10 +112,6 @@ SplitView {
             return true
         }
 
-        function getCompressedPk(publicKey) {
-            return "0x00000"
-        }
-
         Component.onCompleted: {
             Utils.mainModuleInst = this
             Utils.globalUtilsInst = this
@@ -126,7 +124,7 @@ SplitView {
         }
     }
 
-    QtObject {
+    ChatStores.RootStore {
         id: storeMock
 
         function getCommunityDetailsAsJson(community) {

storybook/pages/ActivityNotificationCommunityTokenReceivedPage.qml

@@ -26,6 +26,7 @@ SplitView {
         sharedRootStore: SharedStores.RootStore {}
         rootStore: AppLayoutStores.RootStore {}
         communityTokensStore: SharedStores.CommunityTokensStore {}
+        utilsStore: SharedStores.UtilsStore {}
     }
 
     QtObject {

storybook/pages/ActivityNotificationNewDevicePage.qml

@@ -43,7 +43,6 @@ SplitView {
 
             type: ActivityNotificationNewDevice.InstallationType.Received
             accountName: "bob.eth"
-            store: undefined
             notification: notificationMock
 
             onMoreDetailsClicked: logs.logEvent("ActivityNotificationNewDevice::onMoreDetailsClicked")

storybook/pages/ActivityNotificationTransferOwnershipPage.qml

@@ -42,7 +42,6 @@ SplitView {
             height: implicitHeight
 
             type: ActivityNotificationTransferOwnership.OwnershipState.Pending
-            store: undefined
             notification: notificationMock
             communityName: communityNameText.text
             communityColor: colorSwitch.checked ? "green" : "orange"

storybook/pages/ImportCommunityPopupPage.qml

@@ -9,9 +9,11 @@ import Models 1.0
 import StatusQ.Core.Theme 0.1
 
 import AppLayouts.Communities.popups 1.0
+import AppLayouts.Communities.stores 1.0 as CommunitiesStores
 
-import utils 1.0
 import shared.popups 1.0
+import shared.stores 1.0 as SharedStores
+import utils 1.0
 
 SplitView {
     id: root
@@ -99,7 +101,7 @@ SplitView {
         property string currentKey: ""
     }
 
-    QtObject {
+    CommunitiesStores.CommunitiesStore {
         id: communityStoreMock
 
         property bool newCommunityFetched: false
@@ -159,23 +161,6 @@ SplitView {
             })
         }
 
-        function isCompressedPubKey(key) {
-            return d.dialog.text === d.knownCommunityCompressedPublicKey ||
-                    d.dialog.text === d.newCommunityCompressedPublicKey
-        }
-
-        function changeCommunityKeyCompression(key) {
-            if (key === d.knownCommunityCompressedPublicKey)
-                return d.knownCommunityPublicKey
-            if (key === d.newCommunityCompressedPublicKey)
-                return d.newCommunityPublicKey
-            if (key === d.knownCommunityPublicKey)
-                return d.knownCommunityCompressedPublicKey
-            if (key === d.newCommunityPublicKey)
-                return d.newCommunityCompressedPublicKey
-            return ""
-        }
-
         function getCommunityDataFromSharedLink(link) {
             return d.knownCommunityDetails
         }
@@ -235,6 +220,29 @@ SplitView {
                 destroyOnClose: false
 
                 store: communityStoreMock
+                utilsStore: SharedStores.UtilsStore {
+                    function isCompressedPubKey(key) {
+                        return d.dialog.text === d.knownCommunityCompressedPublicKey ||
+                                d.dialog.text === d.newCommunityCompressedPublicKey
+                    }
+
+                    function isCommunityPublicKey() {
+                        return true
+                    }
+
+                    function changeCommunityKeyCompression(key) {
+                        if (key === d.knownCommunityCompressedPublicKey)
+                            return d.knownCommunityPublicKey
+                        if (key === d.newCommunityCompressedPublicKey)
+                            return d.newCommunityPublicKey
+                        if (key === d.knownCommunityPublicKey)
+                            return d.knownCommunityCompressedPublicKey
+                        if (key === d.newCommunityPublicKey)
+                            return d.newCommunityCompressedPublicKey
+                        return ""
+                    }
+
+                }
 
                 Component.onCompleted: open()
 

storybook/pages/LinkPreviewCardPage.qml

@@ -8,6 +8,7 @@ import StatusQ.Core.Theme 0.1
 
 import shared.controls.chat 1.0
 import utils 1.0
+import shared.stores 1.0
 
 
 SplitView {
@@ -20,9 +21,6 @@ SplitView {
 
     // globalUtilsInst mock
     QtObject {
-        function getEmojiHashAsJson(publicKey) {
-            return JSON.stringify(["👨🏻‍🍼", "🏃🏿‍♂️", "🌇", "🤶🏿", "🏮","🤷🏻‍♂️", "🤦🏻", "📣", "🤎", "👷🏽", "😺", "🥞", "🔃", "🧝🏽‍♂️"])
-        }
         function getColorId(publicKey) { return 4 }
 
         function getCompressedPk(publicKey) { return "zx3sh" + publicKey }
@@ -51,6 +49,13 @@ SplitView {
         
         LinkPreviewCard {
             id: previewCard
+
+            utilsStore: UtilsStore {
+                function getEmojiHash(publicKey) {
+                    return JSON.stringify(["👨🏻‍🍼", "🏃🏿‍♂️", "🌇", "🤶🏿", "🏮","🤷🏻‍♂️", "🤦🏻", "📣", "🤎", "👷🏽", "😺", "🥞", "🔃", "🧝🏽‍♂️"])
+                }
+            }
+
             type: 1
             linkData {
                 title: titleInput.text

storybook/pages/MembersSelectorPage.qml

@@ -7,6 +7,7 @@ import AppLayouts.Chat.stores 1.0 as ChatStores
 
 import Storybook 1.0
 import utils 1.0
+import shared.stores 1.0 as SharedStores
 
 SplitView {
     id: root
@@ -86,7 +87,7 @@ SplitView {
         }
     }
 
-    QtObject {
+    ChatStores.UsersStore {
         id: usersStoreMock
 
         readonly property var usersModel: ListModel {
@@ -188,6 +189,11 @@ SplitView {
 
                     sourceComponent: MembersSelectorView {
                         rootStore: rootStoreMock
+                        utilsStore: SharedStores.UtilsStore {
+                            function isChatKey() {
+                                return true
+                            }
+                        }
                     }
                 }
             }

storybook/pages/UsersModelEditor.qml

@@ -18,7 +18,8 @@ Item {
          const pubKey = "0x%1".arg(seed)
          return {
              pubKey: pubKey,
-             displayName: seed%8 ? "user%1".arg(seed) : "",
+             displayName: seed%8 ? "_user%1".arg(seed) : "",
+             preferredDisplayName: "user%1".arg(seed),
              localNickname: seed%3 ? "" : "nickname%1".arg(seed),
              alias: "three word name(%1)".arg(pubKey),
              isVerified: seed%3 ? false : true,

storybook/pages/WalletHeaderPage.qml

@@ -6,14 +6,15 @@ import SortFilterProxyModel 0.2
 import AppLayouts.Wallet.panels 1.0
 import AppLayouts.Wallet.controls 1.0
 import AppLayouts.Chat.panels 1.0
+import AppLayouts.Wallet.stores 1.0 as WalletStores
 
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 
+import shared.stores 1.0 as SharedStores
 import utils 1.0
 
 import Storybook 1.0
-
 import Models 1.0
 
 SplitView {
@@ -26,6 +27,32 @@ SplitView {
     property bool globalUtilsReady: false
     property bool mainModuleReady: false
 
+    SharedStores.NetworkConnectionStore {
+        id: connectionStore
+
+        property bool accountBalanceNotAvailable: false
+    }
+
+    // TODO: WalletStores.RootStore is singleton and therefore it's not mockable
+    // Once store is converted to regular, non-singleton store it can be mocked as follows
+    // WalletStores.RootStore {
+    //     id: walletStore
+
+    //     property var filteredFlatModel: SortFilterProxyModel {
+    //         sourceModel: NetworksModel.flatNetworks
+    //         filters: ValueFilter { roleName: "isTest"; value: false }
+    //     }
+    //     function toggleNetwork(chainId) {
+    //         print ("toggleNetwork called with chainId: " + chainId)
+    //     }
+
+    //     function getAllNetworksSupportedString(hovered) {
+    //         return hovered ?  "<font color=\"" + "#627EEA" + "\">" + "eth:" + "</font>" +
+    //                          "<font color=\"" + "#E90101" + "\">" + "oeth:" + "</font>" +
+    //                          "<font color=\"" + "#27A0EF" + "\">" + "arb1:" + "</font>" : "eth:oeth:arb1:"
+    //     }
+    // }
+
     // globalUtilsInst mock
     QtObject {
         id: d
@@ -74,26 +101,6 @@ SplitView {
                                                    isAllAccounts: true,
                                                    colorIds: "purple;pink;magenta"
                                                })
-
-        readonly property QtObject connectionStore: QtObject {
-            property bool accountBalanceNotAvailable: false
-        }
-
-        readonly property QtObject walletStore: QtObject {
-            property var filteredFlatModel: SortFilterProxyModel {
-                sourceModel: NetworksModel.flatNetworks
-                filters: ValueFilter { roleName: "isTest"; value: false }
-            }
-            function toggleNetwork(chainId) {
-                print ("toggleNetwork called with chainId: " + chainId)
-            }
-
-            function getAllNetworksSupportedString(hovered) {
-                return hovered ?  "<font color=\"" + "#627EEA" + "\">" + "eth:" + "</font>" +
-                                 "<font color=\"" + "#E90101" + "\">" + "oeth:" + "</font>" +
-                                 "<font color=\"" + "#27A0EF" + "\">" + "arb1:" + "</font>" : "eth:oeth:arb1:"
-            }
-        }
     }
 
     // mainModuleInst mock
@@ -133,9 +140,9 @@ SplitView {
                 active: globalUtilsReady && mainModuleReady
 
                 sourceComponent: WalletHeader {
-                    networkConnectionStore: d.connectionStore
+                    networkConnectionStore: connectionStore
                     overview: allAccountsCheckbox.checked ? d.dummyAllAccountsOverview :  d.dummyOverview
-                    walletStore: d.walletStore
+                    walletStore: walletStore
                     width: parent.width
                 }
             }

storybook/stubs/shared/stores/UtilsStore.qml

@@ -0,0 +1,3 @@
+import QtQuick 2.15
+
+QtObject {}

storybook/stubs/shared/stores/qmldir

@@ -7,3 +7,4 @@ NetworkConnectionStore 1.0 NetworkConnectionStore.qml
 PermissionsStore 1.0 PermissionsStore.qml
 ProfileStore 1.0 ProfileStore.qml
 RootStore 1.0 RootStore.qml
+UtilsStore 1.0 UtilsStore.qml

ui/app/AppLayouts/Wallet/panels/WalletHeader.qml

@@ -13,7 +13,7 @@ import StatusQ.Popups 0.1
 
 import SortFilterProxyModel 0.2
 
-import shared.stores 1.0
+import shared.stores 1.0 as SharedStores
 
 import AppLayouts.Wallet.stores 1.0 as WalletStores
 import AppLayouts.Wallet.services.dapps 1.0
@@ -21,15 +21,15 @@ import AppLayouts.Wallet.services.dapps 1.0
 import utils 1.0
 
 import "../controls"
-import "../stores"
 
 Item {
     id: root
 
-    property NetworkConnectionStore networkConnectionStore
+    property SharedStores.NetworkConnectionStore networkConnectionStore
-    property var overview
     property WalletStores.RootStore walletStore
 
+    property var overview
+
     property bool dappsEnabled
     property int loginType // RootStore.loginType -> Constants.LoginType enum
 
@@ -112,14 +112,14 @@ Item {
                     }
                     asset.mirror: true
 
-                    loading: RootStore.isAccountTokensReloading
+                    loading: root.walletStore.isAccountTokensReloading
                     interactive: !loading && !throttleTimer.running
-                    readonly property string lastReloadTimeFormated: !!RootStore.lastReloadTimestamp ?
+                    readonly property string lastReloadTimeFormated: !!root.walletStore.lastReloadTimestamp ?
                                                                  LocaleUtils.formatRelativeTimestamp(
-                                                                     RootStore.lastReloadTimestamp * 1000) : ""
+                                                                     root.walletStore.lastReloadTimestamp * 1000) : ""
                     tooltip.text: qsTr("Last refreshed %1").arg(lastReloadTimeFormated)
 
-                    onClicked: RootStore.reloadAccountTokens()
+                    onClicked: root.walletStore.reloadAccountTokens()
 
                     Timer {
                         id: throttleTimer