Chore: browser popup refactoring

storybook/pages/BrowserLayoutPage.qml

@@ -10,7 +10,7 @@ import StatusQ.Core.Utils as SQUtils
 import utils
 
 import AppLayouts.Browser
-import AppLayouts.Browser.stores as BrowserStores
+import AppLayouts.stores.Browser as BrowserStores
 import AppLayouts.Wallet.stores
 import shared.stores as SharedStores
 import shared.stores.send

storybook/pages/TransactionDelegatePage.qml

@@ -2,11 +2,13 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 
+import StatusQ
 import StatusQ.Core
 import StatusQ.Core.Theme
 
 import utils
 import shared.controls
+import shared.views
 import shared.stores as SharedStores
 
 import AppLayouts.Wallet.stores as WalletStores
@@ -57,6 +59,35 @@ SplitView {
         property bool _highlight: false
     }
 
+    ListModel {
+        id: mockModel
+        ListElement {}
+        Component.onCompleted: {
+            mockModel.setProperty(0, "activityEntry", root.mockupModelData)
+        }
+    }
+
+    Connections {
+        target: root.mockupModelData
+        function onStatusChanged() { mockModel.setProperty(0, "activityEntry", root.mockupModelData) }
+        function onTxTypeChanged() { mockModel.setProperty(0, "activityEntry", root.mockupModelData) }
+        function onIsMultiTransactionChanged() { mockModel.setProperty(0, "activityEntry", root.mockupModelData) }
+        function onIsNFTChanged() { mockModel.setProperty(0, "activityEntry", root.mockupModelData) }
+    }
+
+    TransactionsModelAdaptor {
+        id: txAdaptor
+        sourceModel: mockModel
+        flatNetworks: NetworksModel.flatNetworks
+        currentCurrency: "EUR"
+        getFiatValueFn: (cryptoValue, symbol) => cryptoValue * 0.1
+        formatCurrencyAmountFn: (cryptoValue, symbol) => "%L1 %2".arg(cryptoValue).arg(symbol)
+        getNameForAddressFn: (address) => WalletStores.RootStore.getNameForAddress(address)
+        getDappDetailsFn: (chainId, address) => WalletStores.RootStore.getDappDetails(chainId, address)
+        getTransactionTypeFn: (transaction) => WalletStores.RootStore.getTransactionType(transaction)
+        localeUtils: LocaleUtils
+    }
+
     SplitView {
         orientation: Qt.Vertical
         SplitView.fillWidth: true
@@ -77,24 +108,25 @@ SplitView {
 
                 width: 600
 
-                TransactionDelegate {
-                    id: delegate
+                ListView {
+                    id: listView
                     Layout.fillWidth: true
-                    modelData: root.mockupModelData
-                    showAllAccounts: ctrlAllAccounts.checked
-                    currenciesStore: SharedStores.CurrenciesStore {
-                        readonly property string currentCurrency: "EUR"
-
-                        function getFiatValue(cryptoValue, symbol) {
-                            return cryptoValue * 0.1;
-                        }
-
-                        function formatCurrencyAmount(cryptoValue, symbol) {
-                            return "%L1 %2".arg(cryptoValue).arg(symbol)
-                        }
+                    Layout.preferredHeight: 80
+                    model: txAdaptor.model
+                    interactive: false
+                    delegate: TransactionDelegate {
+                        width: listView.width
+                        showAllAccounts: ctrlAllAccounts.checked
+                        currentCurrency: "EUR"
+                        formatCurrencyAmountFn: (cryptoValue, symbol) => "%L1 %2".arg(cryptoValue).arg(symbol)
+                        loading: ctrlLoading.checked
+                        state: ctrlHeaderState.checked ? "header" : ""
                     }
-                    flatNetworks: NetworksModel.flatNetworks
-                    activityStore: WalletStores.RootStore
+                }
+
+                TransactionDelegate {
+                    Layout.fillWidth: true
+                    loading: true
                 }
             }
         }
@@ -113,15 +145,12 @@ SplitView {
 
         ColumnLayout {
             CheckBox {
+                id: ctrlLoading
                 text: "Is loading"
-                checked: delegate.loading
-                onToggled: delegate.loading = checked
             }
             CheckBox {
+                id: ctrlHeaderState
                 text: "Is activity details header"
-                readonly property string headerState: "header"
-                checked: delegate.state === headerState
-                onToggled: delegate.state = checked ? headerState : ""
             }
 
             CheckBox {

ui/app/AppLayouts/Browser/+noWebEngine/BrowserLayout.qml

@@ -2,7 +2,7 @@ import QtQuick
 
 import StatusQ.Layout
 
-import AppLayouts.Browser.stores as BrowserStores
+import AppLayouts.stores.Browser as BrowserStores
 
 // dummy container/section for mobile
 StatusSectionLayout {

ui/app/AppLayouts/Browser/BrowserLayout.qml

@@ -20,7 +20,8 @@ import shared.popups.send
 import shared.stores.send
 import shared.stores as SharedStores
 
-import AppLayouts.Browser.stores as BrowserStores
+import AppLayouts.stores.Browser as BrowserStores
+import AppLayouts.Browser.adaptors
 import AppLayouts.Wallet.services.dapps
 
 import "provider/qml"
@@ -113,6 +114,11 @@ StatusSectionLayout {
 
         property Item currentWebView: tabs.currentIndex < tabs.count ? tabs.getCurrentTab() : null
 
+        readonly property var walletMenuAdaptor: BrowserWalletMenuAdaptor {
+            activeNetworksModel: root.networksStore.activeNetworks
+            currentAccount: root.browserWalletStore.dappBrowserAccount
+        }
+
         property Component browserDialogComponent: BrowserDialog {}
 
         property Component jsDialogComponent: JSDialogWindow {}
@@ -269,16 +275,13 @@ StatusSectionLayout {
                 _internal.currentWebView.url = _internal.determineRealURL(url);
             }
             onOpenWalletMenu: {
-                // Initialize activity filters before opening popup
-                const activeChainIds = SQUtils.ModelUtils.modelToFlatArray(
-                    root.networksStore.activeNetworks, "chainId")
-                if (activeChainIds.length > 0) {
+                // Initialize filters before opening popup
+                if (_internal.walletMenuAdaptor.hasActiveChains) {
                     root.browserActivityStore.activityController.setFilterChainsJson(
-                        JSON.stringify(activeChainIds), true)
+                        _internal.walletMenuAdaptor.chainsFilterJson, true)
                 }
-                const currentAddress = root.browserWalletStore.dappBrowserAccount.address
                 root.browserActivityStore.activityController.setFilterAddressesJson(
-                    JSON.stringify([currentAddress]))
+                    _internal.walletMenuAdaptor.addressesFilterJson)
 
                 Global.openPopup(browserWalletMenu)
             }
@@ -445,30 +448,56 @@ StatusSectionLayout {
                 incognitoMode: _internal.currentWebView && _internal.currentWebView.profile === connectorBridge.otrProfile
                 accounts: root.browserWalletStore.accounts
                 currentAccount: root.browserWalletStore.dappBrowserAccount
-                activityStore: root.browserActivityStore
-                currencyStore: root.currencyStore
-                networksStore: root.networksStore
 
-//                property point headerPoint: Qt.point(browserHeader.x, browserHeader.y)
-//                x: (parent.width - width - Theme.halfPadding)
-//                y: (Math.abs(browserHeader.mapFromGlobal(headerPoint).y) +
-//                    browserHeader.anchors.topMargin + Theme.halfPadding)
+                loadingHistoryTransactions: root.browserActivityStore.loadingHistoryTransactions
+                historyTransactionsModel: root.browserActivityStore.historyTransactions
+                newDataAvailable: root.browserActivityStore.newDataAvailable
+                isNonArchivalNode: root.browserActivityStore.isNonArchivalNode
+                selectedAddress: root.browserActivityStore.selectedAddress
+                isFilterDirty: root.browserActivityStore.transactionActivityStatus.isFilterDirty
+
+                activeNetworks: root.networksStore.activeNetworks
+                allNetworks: root.networksStore.allNetworks
+
+                currentCurrency: root.currencyStore.currentCurrency
+
+                getNameForAddressFn: function(address) {
+                    return root.browserActivityStore.getNameForAddress(address)
+                }
+                getDappDetailsFn: function(chainId, address) {
+                    return root.browserActivityStore.getDappDetails(chainId, address)
+                }
+                getFiatValueFn: function(amount, symbol) {
+                    return root.currencyStore.getFiatValue(amount, symbol)
+                }
+                formatCurrencyAmountFn: function(amount, symbol, options) {
+                    return root.currencyStore.formatCurrencyAmount(amount, symbol, options)
+                }
+                getTransactionTypeFn: function(transaction) {
+                    return root.browserActivityStore.getTransactionType(transaction)
+                }
 
                 onSendTriggered: (address) => root.sendToRecipientRequested(address)
                 onAccountChanged: (newAddress) => connectorBridge.connectorManager.changeAccount(newAddress)
                 onReload: {
-                    for (let i = 0; i < tabs.count; ++i){
-                        tabs.getTab(i).reload();
+                    for (let i = 0; i < tabs.count; ++i) {
+                        tabs.getTab(i).reload()
                     }
                 }
-
                 onAccountSwitchRequested: (address) => {
                     root.browserWalletStore.switchAccountByAddress(address)
                 }
                 onFilterAddressesChangeRequested: (addressesJson) => {
                     root.browserActivityStore.activityController.setFilterAddressesJson(addressesJson)
                 }
 
+                onUpdateTransactionFilterRequested: root.browserActivityStore.updateTransactionFilterIfDirty()
+                onFetchMoreTransactionsRequested: root.browserActivityStore.fetchMoreTransactions()
+                onResetActivityDataRequested: root.browserActivityStore.resetActivityData()
+                onUpdateCollectiblesModelRequested: root.browserActivityStore.currentActivityFiltersStore.updateCollectiblesModel()
+                onUpdateRecipientsModelRequested: root.browserActivityStore.currentActivityFiltersStore.updateRecipientsModel()
+                onApplyAllFiltersRequested: root.browserActivityStore.currentActivityFiltersStore.applyAllFilters()
+
                 Connections {
                     target: root.browserActivityStore.transactionActivityStatus
                     enabled: visible

ui/app/AppLayouts/Browser/adaptors/BrowserWalletMenuAdaptor.qml

@@ -0,0 +1,50 @@
+import QtQuick
+import StatusQ.Core.Utils as SQUtils
+import utils
+
+/**
+ * BrowserWalletMenuAdaptor
+ *
+ * Prepares data for initializing the browser wallet menu popup.
+ * Transforms store data into filter-ready formats.
+ *
+ * Input:
+ *  - activeNetworksModel: Model of active networks from NetworksStore
+ *  - currentAccount: Current browser account object
+ *
+ * Output:
+ *  - activeChainIds: Array of active chain IDs
+ *  - chainsFilterJson: JSON string of chain IDs for filtering
+ *  - addressesFilterJson: JSON string of current address for filtering
+ *  - hasActiveChains: Whether there are any active chains
+ */
+QtObject {
+    id: root
+
+    required property var activeNetworksModel
+    required property var currentAccount
+
+    readonly property var activeChainIds: {
+        if (!root.activeNetworksModel) {
+            return []
+        }
+        return SQUtils.ModelUtils.modelToFlatArray(
+            root.activeNetworksModel, "chainId")
+    }
+
+    readonly property string currentAccountAddress: {
+        return root.currentAccount?.address ?? ""
+    }
+
+    readonly property string chainsFilterJson: {
+        return JSON.stringify(root.activeChainIds)
+    }
+
+    readonly property string addressesFilterJson: {
+        return JSON.stringify([root.currentAccountAddress])
+    }
+
+    readonly property bool hasActiveChains: {
+        return root.activeChainIds.length > 0
+    }
+}

ui/app/AppLayouts/Browser/adaptors/qmldir

@@ -0,0 +1 @@
+BrowserWalletMenuAdaptor 1.0 BrowserWalletMenuAdaptor.qml

ui/app/AppLayouts/Browser/popups/AddFavoriteModal.qml

@@ -11,7 +11,7 @@ import shared.popups
 
 import utils
 
-import AppLayouts.Browser.stores as BrowserStores
+import AppLayouts.stores.Browser as BrowserStores
 
 // TODO: replace with StatusDialog
 ModalPopup {

ui/app/AppLayouts/Browser/popups/BrowserConnectionModal.qml

@@ -11,7 +11,7 @@ import utils
 import shared.panels
 import shared.controls
 
-import AppLayouts.Browser.stores as BrowserStores
+import AppLayouts.stores.Browser as BrowserStores
 
 import "../controls"