feat(@desktop/wallet): Complete Filter Activity List

fixes #10823
2023-06-13 16:55:26 +02:00 · 2023-06-13 16:55:26 +02:00 · 7f18a76fd5
parent 9d14fd60af
commit 7f18a76fd5
13 changed files with 490 additions and 109 deletions
--- a/storybook/pages/ActivityFilterMenuPage.qml
+++ b/storybook/pages/ActivityFilterMenuPage.qml
@ -1,10 +1,13 @@
 import QtQuick 2.14
 import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14

 import AppLayouts.Wallet.controls 1.0
 import AppLayouts.Wallet.popups 1.0
+import AppLayouts.Wallet.panels 1.0
 import AppLayouts.stores 1.0

+import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
@ -17,6 +20,8 @@ import Models 1.0

 import utils 1.0

+import shared.controls 1.0
+
 SplitView {
    id: root

@ -27,12 +32,14 @@ SplitView {
    QtObject {
        id: d
        property int selectedTime: Constants.TransactionTimePeriod.All
+        property double fromTimestamp: new Date().setDate(new Date().getDate() - 7)
+        property double toTimestamp: Date.now()
        function changeSelectedTime(newTime) {
            selectedTime = newTime
        }
        function setCustomTimeRange(fromTimestamp , toTimestamp) {
-            dialog.fromTimestamp = fromTimestamp
-            dialog.toTimestamp = toTimestamp
+            d.fromTimestamp = fromTimestamp
+            d.toTimestamp = toTimestamp
        }
        property var typeFilters: [
            Constants.TransactionType.Send,
@ -139,6 +146,7 @@ SplitView {
            }
            else if(checkedTokens.length === 1 && checkedTokens[0].symbol === tokenSymbol) {
                for (let j = 0; j<tempodel.count; j++) {
+                    tempodel.get(j).checked = true
                    tempodel.get(j).allChecked = true
                }
            }
@ -185,6 +193,7 @@ SplitView {
            }
            else if(checkedTokens.length === 1 && checkedTokens[0].name === name) {
                for (let j = 0; j<tempodel.count; j++) {
+                    tempodel.get(j).checked = true
                    tempodel.get(j).allChecked = true
                }
            }
@ -207,6 +216,101 @@ SplitView {
        property var recipeintModel: RecipientModel {}
        property var simulatedSavedList: recipeintModel.savedAddresses
        property var simulatedRecentsList: recipeintModel.recents
+
+        function toggleSavedAddress(address) {
+            let tempodel = simulatedSavedList
+            let allChecked = true
+            let allChecked1 = true
+            let checkedTokens = []
+            simulatedSavedList = []
+            for (let k =0; k<tempodel.count; k++) {
+                if(!tempodel.get(k).checked)
+                    allChecked = false
+                else {
+                    checkedTokens.push(tempodel.get(k))
+                }
+            }
+
+            if(allChecked) {
+                for (let i = 0; i<tempodel.count; i++) {
+                    if(tempodel.get(i).address === address) {
+                        tempodel.get(i).checked = true
+                    }
+                    else
+                        tempodel.get(i).checked = false
+                }
+
+            }
+            else if(checkedTokens.length === 1 && checkedTokens[0].address === address) {
+                for (let j = 0; j<tempodel.count; j++) {
+                    tempodel.get(j).checked = true
+                    tempodel.get(j).allChecked = true
+                }
+            }
+            else {
+                for (let l =0; l<tempodel.count; l++) {
+                    if(tempodel.get(l).address === address)
+                        tempodel.get(l).checked = !tempodel.get(l).checked
+                }
+            }
+            for (let l =0; l<tempodel.count; l++) {
+                if(!tempodel.get(l).checked)
+                    allChecked1 = false
+            }
+            for (let j =0; j<tempodel.count; j++) {
+                tempodel.get(j).allChecked = allChecked1
+            }
+            simulatedSavedList = tempodel
+        }
+
+        function toggleRecents(address) {
+            let tempodel = simulatedRecentsList
+            let allChecked = true
+            let allChecked1 = true
+            let checkedTokens = []
+            simulatedRecentsList = []
+            for (let k =0; k<tempodel.count; k++) {
+                if(!tempodel.get(k).checked)
+                    allChecked = false
+                else {
+                    checkedTokens.push(tempodel.get(k))
+                }
+            }
+
+            if(allChecked) {
+                for (let i = 0; i<tempodel.count; i++) {
+                    let addresstoFind = tempodel.get(i).to.toLowerCase() === d.store.overview.mixedcaseAddress.toLowerCase() ? tempodel.get(i).from : tempodel.get(i).to
+                    if(addresstoFind === address) {
+                        tempodel.get(i).checked = true
+                    }
+                    else
+                        tempodel.get(i).checked = false
+                }
+
+            }
+            else if(checkedTokens.length === 1 && (checkedTokens[0].to.toLowerCase() === d.store.overview.mixedcaseAddress.toLowerCase() ? checkedTokens[0].from : checkedTokens[0].to) === address) {
+                for (let j = 0; j<tempodel.count; j++) {
+                    tempodel.get(j).checked = true
+                    tempodel.get(j).allChecked = true
+                }
+            }
+            else {
+                for (let l =0; l<tempodel.count; l++) {
+                    let addresstoFind = tempodel.get(l).to.toLowerCase() === d.store.overview.mixedcaseAddress.toLowerCase() ? tempodel.get(l).from : tempodel.get(l).to
+                    if(addresstoFind === address )
+                        tempodel.get(l).checked = !tempodel.get(l).checked
+                }
+            }
+            for (let m =0; m<tempodel.count; m++) {
+                if(!tempodel.get(m).checked)
+                    allChecked1 = false
+            }
+            for (let n =0; n<tempodel.count; n++) {
+                tempodel.get(n).allChecked = allChecked1
+            }
+            simulatedRecentsList = tempodel
+        }
+
        property var store: QtObject {
            property var overview: ({
                                        name: "helloworld",
@ -235,46 +339,28 @@ SplitView {
        SplitView.fillWidth: true
        SplitView.fillHeight: true

-        ActivityFilterMenu {
-            id: activityFilterMenu
-
+        ActivityFilterPanel {
+            id: filterComponent
+            width: 800
            anchors.centerIn: parent
-            visible: true
-
-            selectedTime: d.selectedTime
-            onSetSelectedTime: {
-                if(selectedTime === Constants.TransactionTimePeriod.Custom) {
-                    dialog.open()
-                }
-                d.changeSelectedTime(selectedTime)
-            }
-
-            typeFilters: d.typeFilters
-            onUpdateTypeFilter: d.toggleType(type)
-
-            statusFilters: d.statusFilters
-            onUpdateStatusFilter: d.toggleStatus(status)
-
-            tokensList: d.simulatedAssetsModel
-            collectiblesList: d.simulatedCollectiblesModel
-            onUpdateTokensFilter: d.toggleToken(tokenSymbol)
-            onUpdateCollectiblesFilter: d.toggleCollectibles(name)
-
            store: d.store
-            recentsList: d.simulatedRecentsList
+            fromTimestamp: d.fromTimestamp
+            toTimestamp: d.toTimestamp
+            selectedTime: d.selectedTime
+            typeFilters: d.typeFilters
+            statusFilters: d.statusFilters
+            assetsList: d.simulatedAssetsModel
+            collectiblesList: d.simulatedCollectiblesModel
            savedAddressList: d.simulatedSavedList
-            onUpdateSavedAddressFilter: console.warn("onUpdateSavedAddressFilter >> ",address)
-            onUpdateRecentsFilter: console.warn("onUpdateRecentsFilter >> ",address)
-
-            closePolicy: Popup.NoAutoClose
-        }
-
-        StatusDateRangePicker {
-            id: dialog
-            anchors.centerIn: parent
-            destroyOnClose: false
-            fromTimestamp: new Date().setDate(new Date().getDate() - 7) // 7 days ago
-            onNewRangeSet: d.setCustomTimeRange(fromTimestamp, toTimestamp)
+            recentsList: d.simulatedRecentsList
+            onChangeSelectedTime: d.changeSelectedTime(selectedTime)
+            onSetCustomTimeRange: d.setCustomTimeRange(from, to)
+            onToggleType: d.toggleType(type)
+            onToggleStatus: d.toggleStatus(status)
+            onToggleToken: d.toggleToken(tokenSymbol)
+            onToggleCollectibles: d.toggleCollectibles(name)
+            onToggleSavedAddress: d.toggleSavedAddress(address)
+            onToggleRecents: d.toggleRecents(address)
        }
    }

--- a/storybook/src/Models/RecipientModel.qml
+++ b/storybook/src/Models/RecipientModel.qml
@ -40,22 +40,22 @@ QtObject {

    readonly property var recents: ListModel {
        ListElement {
-            from: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756ccx"
-            to: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2"
+            from: "0x2a4baa88a3924c2c99072918688032c2142cd9f6"
+            to: "0xcdc2ea3b6ba8fed3a3402f8db8b2fab53e7b7421"
            checked: true
            allChecked: true
        }

        ListElement {
-            from: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756ccx"
-            to: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2"
+            from: "0x0910a46b3b99d4781e9841df0fd02ea1b95178c6"
+            to: "0xcdc2ea3b6ba8fed3a3402f8db8b2fab53e7b7421"
            checked: true
            allChecked: true
        }

        ListElement {
-            from: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756ccx"
-            to: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2"
+            from: "0xcdc2ea3b6ba8fed3a3402f8db8b2fab53e7b7421"
+            to: "0xcdc2ea3b6ba8fed3a3402f8db8b2fab53e7b7421"
            checked: true
            allChecked: true
        }
--- a/ui/app/AppLayouts/Wallet/controls/ActivityFilterTagItem.qml
+++ b/ui/app/AppLayouts/Wallet/controls/ActivityFilterTagItem.qml
@ -0,0 +1,40 @@
+import QtQuick 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+import shared.controls 1.0
+
+InformationTag {
+    id: root
+
+    signal closed()
+
+    tagPrimaryLabel.color: Theme.palette.directColor1
+    tagSecondaryLabel.color: Theme.palette.directColor1
+    middleLabel.color: Theme.palette.baseColor1
+    iconAsset.color: Theme.palette.primaryColor1
+    secondarylabelMaxWidth: 1000
+    height: 32
+    customBackground: Component {
+        Rectangle {
+            radius: 36
+            color: Theme.palette.transparent
+            border.width: 1
+            border.color: Theme.palette.baseColor2
+        }
+    }
+    rightComponent: StatusIcon {
+        color: Theme.palette.primaryColor1
+        width: 20
+        height: 20
+        icon: "close"
+        MouseArea {
+            id: mouseArea
+            anchors.fill: parent
+            hoverEnabled: true
+            cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor
+            onClicked: root.closed()
+        }
+    }
+}
--- a/ui/app/AppLayouts/Wallet/controls/StatusWalletMenuRadioButton.qml
+++ b/ui/app/AppLayouts/Wallet/controls/StatusWalletMenuRadioButton.qml
@ -8,6 +8,7 @@ import StatusQ.Controls 0.1
 StatusRadioButton {
    id: root
    implicitHeight: 34
+    property bool checkedState: false
    contentItem: StatusBaseText {
        width: parent.width
        font.pixelSize: 13
@ -26,9 +27,9 @@ StatusRadioButton {
        width: 12
        height: 12
        color: Theme.palette.primaryColor1
-        visible: root.checked
+        visible: root.checkedState
    }
    background: Rectangle {
-        color: root.hovered  ?  Theme.palette.baseColor2 : Theme.palette.statusModal.backgroundColor
+        color: root.hovered ? Theme.palette.baseColor2 : Theme.palette.statusModal.backgroundColor
    }
 }
--- a/ui/app/AppLayouts/Wallet/controls/qmldir
+++ b/ui/app/AppLayouts/Wallet/controls/qmldir
@ -3,3 +3,4 @@ NetworkSelectItemDelegate 1.0 NetworkSelectItemDelegate.qml
 AccountHeaderGradient 1.0 AccountHeaderGradient.qml
 StatusTxProgressBar 1.0 StatusTxProgressBar.qml
 StatusDateRangePicker 1.0 StatusDateRangePicker.qml
+ActivityFilterTagItem 1.0 ActivityFilterTagItem.qml
--- a/ui/app/AppLayouts/Wallet/panels/ActivityFilterPanel.qml
+++ b/ui/app/AppLayouts/Wallet/panels/ActivityFilterPanel.qml
@ -0,0 +1,267 @@
+import QtQuick 2.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Core.Utils 0.1 as StatusQUtils
+import StatusQ.Controls 0.1
+
+import utils 1.0
+
+import "../controls"
+import "../popups"
+
+Flow {
+    id: root
+
+    property var store
+    property int selectedTime
+    property double fromTimestamp
+    property double toTimestamp
+    property var typeFilters
+    property var statusFilters
+    property var assetsList
+    property var collectiblesList
+    property var savedAddressList
+    property var recentsList
+
+    signal changeSelectedTime(int selectedTime)
+    signal setCustomTimeRange(string from, string to)
+    signal toggleType(int type)
+    signal toggleStatus(int status)
+    signal toggleToken(string tokenSymbol)
+    signal toggleCollectibles(string name)
+    signal toggleSavedAddress(string address)
+    signal toggleRecents(string address)
+
+    spacing: 8
+
+    StatusRoundButton {
+        id: filterButton
+        width: 32
+        height: 32
+        icon.name: "filter"
+        border.width: 1
+        border.color:  Theme.palette.directColor8
+        type: StatusRoundButton.Type.Tertiary
+        onClicked: activityFilterMenu.popup(x, y + height + 4)
+    }
+
+    ActivityFilterTagItem {
+        tagPrimaryLabel.text: {
+            var currDate = new Date; // current date
+            switch(root.selectedTime) {
+            case Constants.TransactionTimePeriod.Today:
+                return LocaleUtils.formatDate(currDate) // Today
+            case Constants.TransactionTimePeriod.Yesterday:
+                return LocaleUtils.formatDate(new Date().setDate(currDate.getDate() - 1)) // Yesterday
+            case Constants.TransactionTimePeriod.ThisWeek:
+                var firstDayOfCurrentWeek = currDate.getDate() - currDate.getDay()
+                return LocaleUtils.formatDate(currDate.setDate(firstDayOfCurrentWeek)) // This week
+            case Constants.TransactionTimePeriod.LastWeek:
+                return LocaleUtils.formatDate(new Date().setDate(currDate.getDate() - 7)) // Last week
+            case Constants.TransactionTimePeriod.ThisMonth:
+                return LocaleUtils.formatDate(currDate.setDate(1)) // This month
+            case Constants.TransactionTimePeriod.LastMonth:
+                currDate.setDate(1);
+                currDate.setMonth(currDate.getMonth()-1);
+                return LocaleUtils.formatDate(currDate) // Last month
+            case Constants.TransactionTimePeriod.Custom:
+                return LocaleUtils.formatDate(new Date(root.fromTimestamp)) // Custom
+            default:
+                return ""
+            }
+        }
+        tagSecondaryLabel.text: {
+            switch(root.selectedTime) {
+            case Constants.TransactionTimePeriod.Today:
+            case Constants.TransactionTimePeriod.Yesterday:
+                return ""
+            case Constants.TransactionTimePeriod.ThisWeek:
+            case Constants.TransactionTimePeriod.LastWeek:
+            case Constants.TransactionTimePeriod.ThisMonth:
+                return LocaleUtils.formatDate(new Date)
+            case Constants.TransactionTimePeriod.LastMonth:
+                let x = new Date()
+                x.setDate(1);
+                x.setMonth(x.getMonth()-1);
+                x.setDate(new Date(x.getFullYear(), x.getMonth(), 0).getDate() + 1)
+                return LocaleUtils.formatDate(x)
+            case Constants.TransactionTimePeriod.Custom:
+                return LocaleUtils.formatDate(new Date(root.toTimestamp)) // Custom
+            default:
+                return ""
+            }
+        }
+        middleLabel.text:{
+            switch(root.selectedTime) {
+            case Constants.TransactionTimePeriod.Today:
+            case Constants.TransactionTimePeriod.Yesterday:
+                return ""
+            default:
+                return qsTr("to")
+            }
+        }
+
+        iconAsset.icon: "history"
+        visible: root.selectedTime !== Constants.TransactionTimePeriod.All
+        onClosed: root.changeSelectedTime(Constants.TransactionTimePeriod.All)
+    }
+
+    Repeater {
+        model: activityFilterMenu.allTypesChecked ? 0: root.typeFilters
+        delegate: ActivityFilterTagItem {
+            property int type: root.typeFilters[index]
+            tagPrimaryLabel.text: switch(root.typeFilters[index]) {
+                                  case Constants.TransactionType.Send:
+                                      return qsTr("Send")
+                                  case Constants.TransactionType.Receive:
+                                      return qsTr("Receive")
+                                  case Constants.TransactionType.Buy:
+                                      return qsTr("Buy")
+                                  case Constants.TransactionType.Swap:
+                                      return qsTr("Swap")
+                                  case Constants.TransactionType.Bridge:
+                                      return qsTr("Bridge")
+                                  default:
+                                      console.warn("Unhandled type :: ",root.typeFilters[index])
+                                      return ""
+                                  }
+            iconAsset.icon: switch(root.typeFilters[index]) {
+                            case Constants.TransactionType.Send:
+                                return "send"
+                            case Constants.TransactionType.Receive:
+                                return "receive"
+                            case Constants.TransactionType.Buy:
+                                return "token"
+                            case Constants.TransactionType.Swap:
+                                return "swap"
+                            case Constants.TransactionType.Bridge:
+                                return "bridge"
+                            default:
+                                console.warn("Unhandled type :: ",root.typeFilters[index])
+                                return ""
+                            }
+            onClosed: root.toggleType(type)
+        }
+    }
+
+    Repeater {
+        model: activityFilterMenu.allStatusChecked ? 0 : root.statusFilters
+        delegate: ActivityFilterTagItem {
+            property int type: root.statusFilters[index]
+            tagPrimaryLabel.text: switch(root.statusFilters[index]) {
+                                  case Constants.TransactionStatus.Failed:
+                                      return qsTr("Failed")
+                                  case Constants.TransactionStatus.Pending:
+                                      return qsTr("Pending")
+                                  case Constants.TransactionStatus.Complete:
+                                      return qsTr("Complete")
+                                  case Constants.TransactionStatus.Finished:
+                                      return qsTr("Finalised")
+                                  default:
+                                      console.warn("Unhandled status :: ",root.statusFilters[index])
+                                      return ""
+                                  }
+            iconAsset.icon: switch(root.statusFilters[index]) {
+                            case Constants.TransactionStatus.Failed:
+                                return Style.svg("transaction/failed")
+                            case Constants.TransactionStatus.Pending:
+                                return Style.svg("transaction/pending")
+                            case Constants.TransactionStatus.Complete:
+                                return Style.svg("transaction/verified")
+                            case Constants.TransactionStatus.Finished:
+                                return Style.svg("transaction/finished")
+                            default:
+                                console.warn("Unhandled status :: ",root.statusFilters[index])
+                                return ""
+                            }
+            iconAsset.color: "transparent"
+            onClosed: root.toggleStatus(type)
+        }
+    }
+
+    Repeater {
+        model: root.assetsList
+        delegate: ActivityFilterTagItem {
+            tagPrimaryLabel.text: symbol
+            iconAsset.icon: Constants.tokenIcon(symbol)
+            iconAsset.color: "transparent"
+            visible: !allChecked && checked
+            onClosed: root.toggleToken(symbol)
+        }
+    }
+
+    Repeater {
+        model: root.collectiblesList
+        delegate: ActivityFilterTagItem {
+            tagPrimaryLabel.text: name
+            iconAsset.icon: model.iconSource
+            iconAsset.color: "transparent"
+            visible: !allChecked && checked
+            onClosed: root.toggleCollectibles(name)
+        }
+    }
+
+    Repeater {
+        model: root.recentsList
+        delegate: ActivityFilterTagItem {
+            property int transactionType: to.toLowerCase() === root.store.overview.mixedcaseAddress.toLowerCase() ? Constants.TransactionType.Receive : Constants.TransactionType.Send
+            tagPrimaryLabel.text: transactionType === Constants.TransactionType.Receive ?
+                                      root.store.getNameForAddress(from) || StatusQUtils.Utils.elideText(from,6,4) :
+                                      root.store.getNameForAddress(to) || StatusQUtils.Utils.elideText(to,6,4)
+            visible: !allChecked && checked
+            onClosed: root.toggleRecents(transactionType === Constants.TransactionType.Receive ? from : to)
+        }
+    }
+
+    Repeater {
+        model: root.savedAddressList
+        delegate: ActivityFilterTagItem {
+            tagPrimaryLabel.text: ens.length > 0 ? ens : chainShortNames + StatusQUtils.Utils.elideText(address,6,4)
+            visible: !allChecked && checked
+            onClosed: root.toggleSavedAddress(address)
+        }
+    }
+
+    ActivityFilterMenu {
+        id: activityFilterMenu
+
+        selectedTime: root.selectedTime
+        onSetSelectedTime: {
+            if(selectedTime === Constants.TransactionTimePeriod.Custom) {
+                dialog.open()
+            }
+            else
+                root.changeSelectedTime(selectedTime)
+        }
+
+        typeFilters: root.typeFilters
+        onUpdateTypeFilter: root.toggleType(type)
+
+        statusFilters: root.statusFilters
+        onUpdateStatusFilter: root.toggleStatus(status)
+
+        tokensList: root.assetsList
+        collectiblesList: root.collectiblesList
+        onUpdateTokensFilter: root.toggleToken(tokenSymbol)
+        onUpdateCollectiblesFilter: root.toggleCollectibles(name)
+
+        store: root.store
+        recentsList: root.recentsList
+        savedAddressList: root.savedAddressList
+        onUpdateSavedAddressFilter: root.toggleSavedAddress(address)
+        onUpdateRecentsFilter: root.toggleRecents(address)
+    }
+
+    StatusDateRangePicker {
+        id: dialog
+        anchors.centerIn: parent
+        // To-do sync with backend
+        fromTimestamp: root.fromTimestamp// 7 days ago
+        toTimestamp: root.toTimestamp
+        onNewRangeSet: {
+            root.setCustomTimeRange(fromTimestamp, toTimestamp)
+            root.changeSelectedTime(Constants.TransactionTimePeriod.Custom)
+        }
+    }
+}
--- a/ui/app/AppLayouts/Wallet/panels/qmldir
+++ b/ui/app/AppLayouts/Wallet/panels/qmldir
@ -1,3 +1,4 @@
 WalletHeader 1.0 WalletHeader.qml
 WalletTxProgressBlock 1.0 WalletTxProgressBlock.qml
 WalletNftPreview 1.0 WalletNftPreview.qml
+ActivityFilterPanel 1.0 ActivityFilterPanel.qml
--- a/ui/app/AppLayouts/Wallet/popups/ActivityFilterMenu.qml
+++ b/ui/app/AppLayouts/Wallet/popups/ActivityFilterMenu.qml
@ -14,10 +14,12 @@ StatusMenu {

    // Type filter
    property var typeFilters: []
+    property bool allTypesChecked: typeMenu.allChecked
    signal updateTypeFilter(int type)

    // Status filter
    property var statusFilters: []
+    property bool allStatusChecked: statusMenu.allChecked
    signal updateStatusFilter(int status)

    // Assets filter
@ -30,7 +32,7 @@ StatusMenu {
    property var store
    property var recentsList
    property var savedAddressList
-    signal updateSavedAddressFilter(string adddress)
+    signal updateSavedAddressFilter(string address)
    signal updateRecentsFilter(string address)

    implicitWidth: 176
@ -67,7 +69,7 @@ StatusMenu {
        }
        ActivityTokensFilterSubMenu {
            id: tokensMenu
-            height: Math.min(439, implicitHeight)
+            height: Math.min(439, tokensMenu.implicitHeight)
            onBack: root.open()
            tokensList: root.tokensList
            collectiblesList: root.collectiblesList
@ -77,11 +79,13 @@ StatusMenu {
        }
        ActivityCounterpartyFilterSubMenu {
            id: counterPartyMenu
-            height: Math.min(439, implicitHeight)
+            height: Math.min(439, counterPartyMenu.implicitHeight)
            onBack: root.open()
            store: root.store
            recentsList: root.recentsList
            savedAddressList: root.savedAddressList
+            onSavedAddressToggled: root.updateSavedAddressFilter(address)
+            onRecentsToggled: root.updateRecentsFilter(address)
            closePolicy: root.closePolicy
        }
    }
--- a/ui/app/AppLayouts/Wallet/popups/filterSubMenus/ActivityCounterpartyFilterSubMenu.qml
+++ b/ui/app/AppLayouts/Wallet/popups/filterSubMenus/ActivityCounterpartyFilterSubMenu.qml
@ -25,7 +25,7 @@ StatusMenu {
    property var store

    signal back()
-    signal savedAddressToggled(string adddress)
+    signal savedAddressToggled(string address)
    signal recentsToggled(string address)

    property var searchTokenSymbolByAddressFn: function (address) {
@ -104,7 +104,7 @@ StatusMenu {
                    buttonGroup: recentsButtonGroup
                    allChecked: model.allChecked
                    checked: model.checked
-                    onActionTriggered: root.recentsToggled(transactionType === Constants.TransactionType.Receive ? fromName : toName)
+                    onActionTriggered: root.recentsToggled(transactionType === Constants.TransactionType.Receive ? model.from: model.to)
                }
            }
        }
--- a/ui/app/AppLayouts/Wallet/popups/filterSubMenus/ActivityPeriodFilterSubMenu.qml
+++ b/ui/app/AppLayouts/Wallet/popups/filterSubMenus/ActivityPeriodFilterSubMenu.qml
@ -22,43 +22,43 @@ StatusMenu {
        }
    }
    StatusWalletMenuRadioButton {
-        checked: root.selectedTime === Constants.TransactionTimePeriod.All
+        checkedState: root.selectedTime === Constants.TransactionTimePeriod.All
        text: qsTr("All time")
        onClicked: actionTriggered(Constants.TransactionTimePeriod.All)
    }
    StatusWalletMenuRadioButton {
-        checked: root.selectedTime === Constants.TransactionTimePeriod.Today
+        checkedState: root.selectedTime === Constants.TransactionTimePeriod.Today
        text: qsTr("Today")
        onClicked: actionTriggered(Constants.TransactionTimePeriod.Today)
    }
    StatusWalletMenuRadioButton {
-        checked: root.selectedTime === Constants.TransactionTimePeriod.Yesterday
+        checkedState: root.selectedTime === Constants.TransactionTimePeriod.Yesterday
        text: qsTr("Yesterday")
        onClicked: actionTriggered(Constants.TransactionTimePeriod.Yesterday)
    }
    StatusWalletMenuRadioButton {
-        checked: root.selectedTime === Constants.TransactionTimePeriod.ThisWeek
+        checkedState: root.selectedTime === Constants.TransactionTimePeriod.ThisWeek
        text: qsTr("This week")
        onClicked: actionTriggered(Constants.TransactionTimePeriod.ThisWeek)
    }
    StatusWalletMenuRadioButton {
-        checked: root.selectedTime === Constants.TransactionTimePeriod.LastWeek
+        checkedState: root.selectedTime === Constants.TransactionTimePeriod.LastWeek
        text: qsTr("Last week")
        onClicked: actionTriggered(Constants.TransactionTimePeriod.LastWeek)
    }
    StatusWalletMenuRadioButton {
-        checked: root.selectedTime === Constants.TransactionTimePeriod.ThisMonth
+        checkedState: root.selectedTime === Constants.TransactionTimePeriod.ThisMonth
        text: qsTr("This month")
        onClicked: actionTriggered(Constants.TransactionTimePeriod.ThisMonth)
    }
    StatusWalletMenuRadioButton {
-        checked: root.selectedTime === Constants.TransactionTimePeriod.LastMonth
+        checkedState: root.selectedTime === Constants.TransactionTimePeriod.LastMonth
        text: qsTr("Last month")
        onClicked: actionTriggered(Constants.TransactionTimePeriod.LastMonth)
    }
    StatusMenuSeparator {}
    StatusWalletMenuRadioButton {
-        checked: root.selectedTime === Constants.TransactionTimePeriod.Custom
+        checkedState: root.selectedTime === Constants.TransactionTimePeriod.Custom
        text: qsTr("Custom range")
        onClicked: actionTriggered(Constants.TransactionTimePeriod.Custom)
    }
--- a/ui/app/AppLayouts/Wallet/popups/filterSubMenus/ActivityTokensFilterSubMenu.qml
+++ b/ui/app/AppLayouts/Wallet/popups/filterSubMenus/ActivityTokensFilterSubMenu.qml
@ -96,7 +96,7 @@ StatusMenu {
                        Layout.preferredHeight: 44
                        title: model.name
                        titleAsideText: model.symbol
-                        assetSettings.name: model.symbol ? Style.png("tokens/" + model.symbol) : ""
+                        assetSettings.name: model.symbol ? Constants.tokenIcon(symbol) : ""
                        assetSettings.isImage: true
                        buttonGroup: tokenButtonGroup
                        allChecked: model.allChecked
--- a/ui/imports/shared/controls/InformationTag.qml
+++ b/ui/imports/shared/controls/InformationTag.qml
@ -15,8 +15,10 @@ Control {
    property alias iconAsset : iconAsset
    property alias tagPrimaryLabel: tagPrimaryLabel
    property alias tagSecondaryLabel: tagSecondaryLabel
+    property alias middleLabel: middleLabel
    property alias rightComponent: rightComponent.sourceComponent
    property bool loading: false
+    property int secondarylabelMaxWidth: 100

    property Component customBackground: Component {
        Rectangle {
@ -65,10 +67,18 @@ Control {
            color: Theme.palette.directColor1
            visible: text !== ""
        }
+        StatusBaseText {
+            id: middleLabel
+            Layout.alignment: Qt.AlignVCenter
+            font.pixelSize: Style.current.tertiaryTextFontSize
+            font.weight: Font.Normal
+            color: Theme.palette.baseColor1
+            visible: text !== ""
+        }
        StatusBaseText {
            id: tagSecondaryLabel
            Layout.alignment: Qt.AlignVCenter
-            Layout.maximumWidth: 100
+            Layout.maximumWidth: root.secondarylabelMaxWidth
            font.pixelSize: Style.current.tertiaryTextFontSize
            font.weight: Font.Normal
            color: Theme.palette.baseColor1
--- a/ui/imports/shared/views/HistoryView.qml
+++ b/ui/imports/shared/views/HistoryView.qml
@ -21,6 +21,7 @@ import "../controls"
 import AppLayouts.Wallet.stores 1.0 as WalletStores
 import AppLayouts.Wallet.popups 1.0
 import AppLayouts.Wallet.controls 1.0
+import AppLayouts.Wallet.panels 1.0

 ColumnLayout {
    id: root
@ -70,23 +71,27 @@ ColumnLayout {
        text: qsTr("Activity for this account will appear here")
    }

-    Rectangle {
+    // Tp-do make connections with nim once logic is ready
+    ActivityFilterPanel {
        id: filterComponent
        visible: !d.isLoading && transactionListRoot.count !== 0
        Layout.fillWidth: true
        Layout.preferredHeight: 50
-        color: Theme.palette.transparent
-        StatusRoundButton {
-            anchors.left: parent.left
-            anchors.verticalCenter: parent.verticalCenter
-            width: 32
-            height: 32
-            border.width: 1
-            border.color:  Theme.palette.directColor8
-            icon.name: "filter"
-            onClicked: activityFilter.popup(x, y + height + 4)
-            type: StatusRoundButton.Type.Tertiary
-        }
+        store: RootStore
+        selectedTime: Constants.TransactionTimePeriod.All
+        typeFilters: [
+            Constants.TransactionType.Send,
+            Constants.TransactionType.Receive,
+            Constants.TransactionType.Buy,
+            Constants.TransactionType.Swap,
+            Constants.TransactionType.Bridge
+        ]
+        statusFilters: [
+            Constants.TransactionStatus.Failed,
+            Constants.TransactionStatus.Pending,
+            Constants.TransactionStatus.Complete,
+            Constants.TransactionStatus.Finished
+        ]
    }

    Separator {
@ -339,38 +344,4 @@ ColumnLayout {
            }
        }
    }
-
-    // To-do connect with backend once its implemented
-    ActivityFilterMenu {
-        id: activityFilter
-        selectedTime: Constants.TransactionTimePeriod.All
-        onSetSelectedTime: {
-            // To do connect with n=backend to set time range
-            if(selectedTime === Constants.TransactionTimePeriod.Custom) {
-                customDateRangePicker.open()
-            }
-        }
-        typeFilters: [
-            Constants.TransactionType.Send,
-            Constants.TransactionType.Receive,
-            Constants.TransactionType.Buy,
-            Constants.TransactionType.Swap,
-            Constants.TransactionType.Bridge
-        ]
-        statusFilters: [
-            Constants.TransactionStatus.Failed,
-            Constants.TransactionStatus.Pending,
-            Constants.TransactionStatus.Complete,
-            Constants.TransactionStatus.Finished
-        ]
-        store: RootStore
-    }
-
-    // To-do update once https://github.com/status-im/status-desktop/pull/10916 is updated and connect with backend values
-    StatusDateRangePicker {
-        id: customDateRangePicker
-        destroyOnClose: false
-        fromTimestamp: new Date().setDate(new Date().getDate() - 7)
-//        onNewRangeSet: d.setCustomTimeRange(fromTimestamp, toTimestamp)
-    }
 }