status-im/status-desktop
2
0
Fork 0
mirror of https://github.com/status-im/status-desktop.git synced 2025-02-21 19:18:53 +00:00
Code Issues Projects Releases Wiki Activity

feat: implement New tag and decorator for NetworkFilter

Browse Source
This commit is contained in:
Dario Gabriel Lipicar 2025-02-11 10:20:34 -03:00
parent 02c35f8c6a
commit fffaebfffb
No known key found for this signature in database
GPG Key ID: 9625E9494309D203
18 changed files with 238 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/modules/main/wallet_section/networks/model.nim
View File

@ -21,6 +21,7 @@ type
ShortName
IsActive
IsDeactivatable
IsNew
QtObject:
type
@ -56,7 +57,8 @@ QtObject:
ModelRole.ShortName.int: "shortName",
ModelRole.ChainColor.int: "chainColor",
ModelRole.IsActive.int: "isActive",
ModelRole.IsDeactivatable.int: "isDeactivatable"
ModelRole.IsDeactivatable.int: "isDeactivatable",
ModelRole.IsNew.int: "isNew"
}.toTable
method data(self: Model, index: QModelIndex, role: int): QVariant =
@ -98,6 +100,8 @@ QtObject:
result = newQVariant(item.isActive)
of ModelRole.IsDeactivatable:
result = newQVariant(item.isDeactivatable)
of ModelRole.IsNew:
result = newQVariant(item.isNew)
proc refreshModel*(self: Model) =
self.beginResetModel()

19
src/app_service/service/network/network_item.nim
View File

@ -2,7 +2,7 @@ import NimQml, stew/shims/strformat
import sequtils, sugar
import backend/network_types
import ./rpc_provider_item
import ./rpc_provider_item, ./types
export rpc_provider_item
@ -24,6 +24,7 @@ QtObject:
relatedChainId*: int
isActive*: bool
isDeactivatable*: bool
isNew*: bool
proc setup*(self: NetworkItem,
chainId: int,
@ -41,7 +42,8 @@ QtObject:
isEnabled: bool,
relatedChainId: int,
isActive: bool,
isDeactivatable: bool
isDeactivatable: bool,
isNew: bool
) =
self.QObject.setup
self.chainId = chainId
@ -60,6 +62,7 @@ QtObject:
self.relatedChainId = relatedChainId
self.isActive = isActive
self.isDeactivatable = isDeactivatable
self.isNew = isNew
proc delete*(self: NetworkItem) =
self.QObject.delete
@ -67,10 +70,12 @@ QtObject:
proc networkDtoToItem*(network: NetworkDto): NetworkItem =
new(result, delete)
let rpcProviders = network.rpcProviders.map(p => rpcProviderDtoToItem(p))
# We construct the isNew value client-side, at least for now
let isNew = network.chainId == Base or network.chainId == BaseSepolia
result.setup(network.chainId, network.layer, network.chainName, network.iconUrl, network.shortName,
network.chainColor, rpcProviders,
network.blockExplorerURL, network.nativeCurrencyName, network.nativeCurrencySymbol, network.nativeCurrencyDecimals,
network.isTest, network.isEnabled, network.relatedChainId, network.isActive, network.isDeactivatable)
network.isTest, network.isEnabled, network.relatedChainId, network.isActive, network.isDeactivatable, isNew)
proc networkItemToDto*(network: NetworkItem): NetworkDto =
result = NetworkDto(
@ -109,7 +114,8 @@ QtObject:
isEnabled: {self.isEnabled},
relatedChainId: {self.relatedChainId},
isActive: {self.isActive},
isDeactivatable: {self.isDeactivatable}
isDeactivatable: {self.isDeactivatable},
isNew: {self.isNew}
]"""
proc chainId*(self: NetworkItem): int {.slot.} =
@ -184,3 +190,8 @@ QtObject:
return self.isActive
QtProperty[bool] isActive:
read = isActive
proc isNew*(self: NetworkItem): bool {.slot.} =
return self.isNew
QtProperty[bool] isNew:
read = isNew

4
src/app_service/service/network/types.nim
View File

@ -1,9 +1,11 @@
const Mainnet = 1
const Sepolia = 11155111
const Base = 8453
const BaseSepolia = 84532
const NETWORK_LAYER_1 = 1
const NETWORK_LAYER_2 = 2
export Mainnet, Sepolia
export Mainnet, Sepolia, Base, BaseSepolia
export NETWORK_LAYER_1, NETWORK_LAYER_2

14
storybook/pages/NetworkFilterPage.qml
View File

@ -51,6 +51,8 @@ SplitView {
multiSelection: multiSelectionCheckBox.checked
showTitle: ctrlShowTitle.checked
showManageNetworksButton: ctrlShowManageNetworksButton.checked
showNewTag: ctrlShowNewTagButton.checked
showNewDecorator: ctrlShowNewDecoratorButton.checked
selectionAllowed: selectionAllowedCheckBox.checked
showSelectionIndicator: (ctrlShowCheckBoxes.checked && multiSelection) || (ctrlShowRadioButtons.checked && !multiSelection)
}
@ -105,6 +107,18 @@ SplitView {
checked: true
}
CheckBox {
id: ctrlShowNewTagButton
text: "Show 'NEW' tag"
checked: true
}
CheckBox {
id: ctrlShowNewDecoratorButton
text: "Show 'New' decorator"
checked: true
}
CheckBox {
id: selectionAllowedCheckBox
text: "Selection allowed"

45
storybook/pages/StatusNewTagPage.qml Normal file
View File

@ -0,0 +1,45 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import StatusQ.Core 0.1
import StatusQ.Components 0.1
import Storybook 1.0
import utils 1.0
SplitView {
id: root
orientation: Qt.Horizontal
Item {
SplitView.fillWidth: true
SplitView.fillHeight: true
StatusNewTag {
anchors.centerIn: parent
tooltipText: ctrlTooltip.text
}
}
LogsAndControlsPanel {
SplitView.minimumWidth: 300
SplitView.preferredWidth: 400
SplitView.fillHeight: true
RowLayout {
Label {
text: "Tooltip:"
}
TextField {
id: ctrlTooltip
text: "Hic sunt leones!!!"
}
}
}
}
// category: Components
// https://www.figma.com/design/FkFClTCYKf83RJWoifWgoX/Wallet-v2?node-id=28725-330957&m=dev

8
storybook/src/Models/NetworksModel.qml
View File

@ -420,6 +420,7 @@ QtObject {
isEnabled: true,
isActive: true,
isDeactivatable: false,
isNew: false,
},
{
chainId: sepMainnetChainId,
@ -438,6 +439,7 @@ QtObject {
isEnabled: false,
isActive: true,
isDeactivatable: false,
isNew: false,
},
{
chainId: optChainId,
@ -456,6 +458,7 @@ QtObject {
isEnabled: true,
isActive: false,
isDeactivatable: true,
isNew: false,
},
{
chainId: sepOptChainId,
@ -474,6 +477,7 @@ QtObject {
isEnabled: true,
isActive: true,
isDeactivatable: true,
isNew: false,
},
{
chainId: arbChainId,
@ -492,6 +496,7 @@ QtObject {
isEnabled: false,
isActive: true,
isDeactivatable: true,
isNew: false,
},
{
chainId: sepArbChainId,
@ -510,6 +515,7 @@ QtObject {
isEnabled: false,
isActive: true,
isDeactivatable: true,
isNew: false,
},
{
chainId: baseChainId,
@ -528,6 +534,7 @@ QtObject {
isEnabled: false,
isActive: false,
isDeactivatable: true,
isNew: true,
},
{
chainId: sepBaseChainId,
@ -546,6 +553,7 @@ QtObject {
isEnabled: false,
isActive: true,
isDeactivatable: true,
isNew: true,
}]
)
}

36
ui/StatusQ/src/StatusQ/Components/StatusNewDecorator.qml Normal file
View File

@ -0,0 +1,36 @@
import QtQuick 2.15
import QtGraphicalEffects 1.15
import StatusQ 0.1
import StatusQ.Components.private 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
Rectangle {
id: root
property int borderWidth: 2
height: innerCircle.height + borderWidth
width: innerCircle.width + borderWidth
color: Theme.palette.baseColor2
radius: height/2
Rectangle {
id: innerCircle
anchors.centerIn: parent
height: 10
width: 10
StatusGradient {
id: gradient
anchors.fill: parent
source: parent
}
radius: height/2
}
}

46
ui/StatusQ/src/StatusQ/Components/StatusNewTag.qml Normal file
View File

@ -0,0 +1,46 @@
import QtQuick 2.15
import QtGraphicalEffects 1.15
import StatusQ.Components.private 0.1
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
import StatusQ.Core.Theme 0.1
Rectangle {
id: root
property alias tooltipText: tip.text
property alias cursorShape: hoverHandler.cursorShape
readonly property bool hovered: hoverHandler.hovered
StatusGradient {
id: gradient
anchors.fill: parent
source: root
}
implicitHeight: 20
implicitWidth: 36
radius: height/2
border.width: 0
StatusBaseText {
font.pixelSize: 10
font.weight: Font.DemiBold
color: Theme.palette.indirectColor4
anchors.centerIn: parent
text: qsTr("NEW")
}
StatusToolTip {
id: tip
visible: hoverHandler.hovered && !!text
maxWidth: 333
}
HoverHandler {
id: hoverHandler
enabled: root.visible
}
}

13
ui/StatusQ/src/StatusQ/Components/private/StatusGradient.qml Normal file
View File

@ -0,0 +1,13 @@
import QtQuick 2.15
import QtGraphicalEffects 1.15
LinearGradient {
id: root
start: Qt.point(-0.48*width, 0.46*height)
end: Qt.point(1.36*width, 0.42*height)
gradient: Gradient {
GradientStop { position: 0.0; color: "#2A799B" }
GradientStop { position: 0.25; color: "#F6B03C" }
GradientStop { position: 0.84; color: "#FF33A3" }
}
}

1
ui/StatusQ/src/StatusQ/Components/private/qmldir
View File

@ -4,3 +4,4 @@ StatusImageMessage 0.1 statusMessage/StatusImageMessage.qml
StatusMessageImageAlbum 0.1 statusMessage/StatusMessageImageAlbum.qml
StatusComboboxBackground 0.1 StatusComboboxBackground.qml
StatusComboboxIndicator 0.1 StatusComboboxIndicator.qml
StatusGradient 0.1 StatusGradient.qml

2
ui/StatusQ/src/StatusQ/Components/qmldir
View File

@ -48,6 +48,8 @@ StatusMessageHeader 0.1 StatusMessageHeader.qml
StatusMessageSenderDetails 0.1 StatusMessageSenderDetails.qml
StatusNavigationListItem 0.1 StatusNavigationListItem.qml
StatusNavigationPanelHeadline 0.1 StatusNavigationPanelHeadline.qml
StatusNewDecorator 0.1 StatusNewDecorator.qml
StatusNewTag 0.1 StatusNewTag.qml
StatusOnlineBadge 0.1 StatusOnlineBadge.qml
StatusPageIndicator 0.1 StatusPageIndicator.qml
StatusQrCodeScanner 0.1 StatusQrCodeScanner.qml

3
ui/StatusQ/src/statusq.qrc
View File

@ -48,6 +48,8 @@
<file>StatusQ/Components/StatusMessageSenderDetails.qml</file>
<file>StatusQ/Components/StatusNavigationListItem.qml</file>
<file>StatusQ/Components/StatusNavigationPanelHeadline.qml</file>
<file>StatusQ/Components/StatusNewDecorator.qml</file>
<file>StatusQ/Components/StatusNewTag.qml</file>
<file>StatusQ/Components/StatusOnlineBadge.qml</file>
<file>StatusQ/Components/StatusPageIndicator.qml</file>
<file>StatusQ/Components/StatusQrCodeScanner.qml</file>
@ -69,6 +71,7 @@
<file>StatusQ/Components/private/LoadingDotItem.qml</file>
<file>StatusQ/Components/private/StatusComboboxBackground.qml</file>
<file>StatusQ/Components/private/StatusComboboxIndicator.qml</file>
<file>StatusQ/Components/private/StatusGradient.qml</file>
<file>StatusQ/Components/private/chart/ChartCanvas.qml</file>
<file>StatusQ/Components/private/chart/Library/Animator.qml</file>
<file>StatusQ/Components/private/chart/Library/Chart.bundle.js</file>

15
ui/app/AppLayouts/Wallet/controls/NetworkFilter.qml
View File

@ -33,10 +33,13 @@ StatusComboBox {
property bool showTitle: true
property bool selectionAllowed: true
property bool showManageNetworksButton: false
property bool showNewTag: false
property bool showNewDecorator: false
property var selection: []
signal toggleNetwork(int chainId, int index)
signal manageNetworksClicked()
signal popupOpened()
onSelectionChanged: {
if (root.selection !== networkSelectorView.selection) {
@ -44,6 +47,15 @@ StatusComboBox {
}
}
StatusNewDecorator {
id: newDecorator
anchors.verticalCenter: parent.top
anchors.verticalCenterOffset: 3
anchors.horizontalCenter: parent.right
anchors.horizontalCenterOffset: -3
visible: root.showNewDecorator
}
control.padding: 12
control.spacing: 0
control.rightPadding: 36
@ -154,6 +166,7 @@ StatusComboBox {
multiSelection: root.multiSelection
showSelectionIndicator: root.showSelectionIndicator
showManageNetworksButton: root.showManageNetworksButton
showNewTag: root.showNewTag
selection: root.selection
onSelectionChanged: {
@ -168,6 +181,8 @@ StatusComboBox {
control.popup.close()
root.manageNetworksClicked()
}
onOpened: root.popupOpened()
}
Connections {

18
ui/app/AppLayouts/Wallet/controls/NetworkSelectItemDelegate.qml
View File

@ -1,8 +1,10 @@
import QtQuick 2.15
import QtQml 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtGraphicalEffects 1.15
import StatusQ 0.1
import StatusQ.Components 0.1
import StatusQ.Controls 0.1
import StatusQ.Core.Theme 0.1
@ -24,6 +26,7 @@ StatusListItem {
property bool showIndicator: true
property bool multiSelection: false
property bool interactive: true
property bool showNewTag: false
// output signal
// Emitted when the checkbox is clicked
@ -40,6 +43,8 @@ StatusListItem {
d.toggled()
}
statusListItemTitleIcons.sourceComponent: root.showNewTag ? newTagComponent : undefined
leftPadding: 16
rightPadding: 16
statusListItemTitleArea.anchors.leftMargin: 12
@ -98,6 +103,19 @@ StatusListItem {
}
}
Component {
id: newTagComponent
RowLayout {
spacing: 0
Column {
width: 8
}
StatusNewTag {
tooltipText: qsTr("%1 chain integrated. You can now view and swap %1 assets, as well as interact with %1 dApps.").arg(root.title)
}
}
}
QtObject {
id: d
property int checkState: root.checkState

9
ui/app/AppLayouts/Wallet/panels/WalletHeader.qml
View File

@ -2,6 +2,7 @@ import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQml 2.15
import Qt.labs.settings 1.1
import StatusQ 0.1
import StatusQ.Core 0.1
@ -45,6 +46,11 @@ Item {
implicitHeight: 88
Settings {
id: walletHeaderLocalSettings
property bool networksFilterOpened: false
}
GridLayout {
width: parent.width
columns: 2
@ -180,12 +186,15 @@ Item {
id: networkFilter
showTitle: false
showManageNetworksButton: true
showNewTag: true
showNewDecorator: !walletHeaderLocalSettings.networksFilterOpened
Layout.alignment: Qt.AlignTop
flatNetworks: root.walletStore.filteredFlatModel
onToggleNetwork: root.walletStore.toggleNetwork(chainId)
onManageNetworksClicked: root.manageNetworksRequested()
onPopupOpened: walletHeaderLocalSettings.networksFilterOpened = true
Binding on selection {
value: chainIdsAggregator.value

2
ui/app/AppLayouts/Wallet/popups/NetworkSelectPopup.qml
View File

@ -24,6 +24,7 @@ Popup {
property bool selectionAllowed: true
property bool multiSelection: false
property bool showManageNetworksButton: false
property bool showNewTag: false
property var selection: []
signal toggleNetwork(int chainId, int index)
@ -68,6 +69,7 @@ Popup {
interactive: root.selectionAllowed
multiSelection: root.multiSelection
showIndicator: root.showSelectionIndicator
showNewTag: root.showNewTag
selection: root.selection
onSelectionChanged: {

2
ui/app/AppLayouts/Wallet/views/NetworkSelectorView.qml
View File

@ -26,6 +26,7 @@ StatusListView {
property bool showIndicator: true
property bool multiSelection: false
property bool interactive: true
property bool showNewTag: true
/**
The list selected of chain ids
@ -62,6 +63,7 @@ StatusListView {
showIndicator: root.showIndicator
multiSelection: root.multiSelection
interactive: root.interactive
showNewTag: root.showNewTag && model.isNew
checkState: inSelection ? (d.allSelected && root.interactive ? Qt.PartiallyChecked : Qt.Checked) : Qt.Unchecked
nextCheckState: checkState

2
vendor/status-go vendored

@ -1 +1 @@
Subproject commit d6a67cb18206e4937c69411c2b4f151b784a04f4
Subproject commit 86fa8950c3e308e1f026574cfd5bf12458def833