From 87c5ef492801d70b50183ca53afdd386a4201724 Mon Sep 17 00:00:00 2001 From: Noelia Date: Tue, 13 Jun 2023 15:54:51 +0200 Subject: [PATCH] fix(NetworkFilter): Network filter doesn't allow to preselect a specific value in single selection mode - Added support for selecting a specific `chainId` in `NetworkFilter.qml`. - Added `storybook` use case for selecting specific `chainId` in single selection mode. Part of #11030 --- storybook/pages/NetworkFilterPage.qml | 126 +++++++++++++----- storybook/src/Models/NetworksModel.qml | 19 ++- .../Wallet/controls/NetworkFilter.qml | 46 +++++-- 3 files changed, 143 insertions(+), 48 deletions(-) diff --git a/storybook/pages/NetworkFilterPage.qml b/storybook/pages/NetworkFilterPage.qml index dbae7ef937..38bd8b703b 100644 --- a/storybook/pages/NetworkFilterPage.qml +++ b/storybook/pages/NetworkFilterPage.qml @@ -9,46 +9,110 @@ import AppLayouts.Wallet.controls 1.0 SplitView { id: root + Logs { id: logs } - orientation: Qt.Vertical - - Item { - id: container + SplitView { + orientation: Qt.Vertical SplitView.fillWidth: true - SplitView.fillHeight: true - Rectangle { - width: 800 - height: 200 - border.width: 1 - anchors.centerIn: parent + Item { + id: container - NetworkFilter { + SplitView.fillWidth: true + SplitView.fillHeight: true + + Rectangle { + width: 800 + height: 200 + border.width: 1 anchors.centerIn: parent - width: 200 - layer1Networks: NetworksModel.layer1Networks - layer2Networks: NetworksModel.layer2Networks - testNetworks: NetworksModel.testNetworks - enabledNetworks: NetworksModel.enabledNetworks - allNetworks: enabledNetworks + NetworkFilter { + id: networkFilter - multiSelection: multiSelectionCheckBox.checked + anchors.centerIn: parent + width: 200 + + layer1Networks: NetworksModel.layer1Networks + layer2Networks: NetworksModel.layer2Networks + testNetworks: NetworksModel.testNetworks + enabledNetworks: NetworksModel.enabledNetworks + allNetworks: enabledNetworks + + multiSelection: multiSelectionCheckBox.checked + + onToggleNetwork: logs.logEvent("onToggleNetwork: " + network.chainName) + } + } + } + + LogsAndControlsPanel { + id: logsAndControlsPanel + + SplitView.minimumHeight: 100 + SplitView.preferredHeight: 150 + + logsView.logText: logs.logText + } + } + + Pane { + SplitView.minimumWidth: 300 + SplitView.preferredWidth: 300 + + ColumnLayout { + spacing: 16 + + CheckBox { + id: multiSelectionCheckBox + text: "Multi selection" + checked: true + onCheckedChanged: if(!checked) ethRadioBtn.checked = true + } + + ColumnLayout { + visible: !multiSelectionCheckBox.checked + Label { + Layout.fillWidth: true + text: "Chain Id:" + } + + RadioButton { + id: ethRadioBtn + + text: "Ethereum Mainnet" + onCheckedChanged: if(checked) networkFilter.setChain(NetworksModel.ethNet) + } + RadioButton { + text: "Optimism" + onCheckedChanged: if(checked) networkFilter.setChain(NetworksModel.optimismNet) + } + RadioButton { + text: "Arbitrum" + onCheckedChanged: if(checked) networkFilter.setChain(NetworksModel.arbitrumNet) + } + RadioButton { + text: "Hermez" + onCheckedChanged: if(checked) networkFilter.setChain(NetworksModel.hermezNet) + } + RadioButton { + text: "Testnet" + onCheckedChanged: if(checked) networkFilter.setChain(NetworksModel.testnetNet) + } + RadioButton { + text: "Custom" + onCheckedChanged: if(checked) networkFilter.setChain(NetworksModel.customNet) + } + RadioButton { + text: "Undefined" + onCheckedChanged: if(checked) networkFilter.setChain() + } + RadioButton { + text: "Not existing network id" + onCheckedChanged: if(checked) networkFilter.setChain(77) + } } } } - - LogsAndControlsPanel { - SplitView.minimumHeight: 100 - SplitView.preferredHeight: 150 - - SplitView.fillWidth: true - - CheckBox { - id: multiSelectionCheckBox - text: "Multi selection" - checked: true - } - } } diff --git a/storybook/src/Models/NetworksModel.qml b/storybook/src/Models/NetworksModel.qml index 4a7a192cb8..67e2ecfc00 100644 --- a/storybook/src/Models/NetworksModel.qml +++ b/storybook/src/Models/NetworksModel.qml @@ -4,6 +4,13 @@ import QtQuick 2.15 QtObject { + readonly property int ethNet: 1 + readonly property int optimismNet: 2 + readonly property int arbitrumNet: 3 + readonly property int hermezNet: 4 + readonly property int testnetNet: 5 + readonly property int customNet: 6 + readonly property var layer1Networks: ListModel { function rowData(index, propName) { return get(index)[propName] @@ -12,7 +19,7 @@ QtObject { Component.onCompleted: append([ { - chainId: 1, + chainId: ethNet, chainName: "Ethereum Mainnet", iconUrl: ModelsData.networks.ethereum, isActive: true, @@ -28,7 +35,7 @@ QtObject { Component.onCompleted: append([ { - chainId: 2, + chainId: optimismNet, chainName: "Optimism", iconUrl: ModelsData.networks.optimism, isActive: false, @@ -38,7 +45,7 @@ QtObject { isTest: false }, { - chainId: 3, + chainId: arbitrumNet, chainName: "Arbitrum", iconUrl: ModelsData.networks.arbitrum, isActive: false, @@ -54,7 +61,7 @@ QtObject { Component.onCompleted: append([ { - chainId: 4, + chainId: hermezNet, chainName: "Hermez", iconUrl: ModelsData.networks.hermez, isActive: false, @@ -64,7 +71,7 @@ QtObject { isTest: true }, { - chainId: 5, + chainId: testnetNet, chainName: "Testnet", iconUrl: ModelsData.networks.testnet, isActive: false, @@ -74,7 +81,7 @@ QtObject { isTest: true }, { - chainId: 6, + chainId: customNet, chainName: "Custom", iconUrl: ModelsData.networks.custom, isActive: false, diff --git a/ui/app/AppLayouts/Wallet/controls/NetworkFilter.qml b/ui/app/AppLayouts/Wallet/controls/NetworkFilter.qml index f32ff9b147..982dacc220 100644 --- a/ui/app/AppLayouts/Wallet/controls/NetworkFilter.qml +++ b/ui/app/AppLayouts/Wallet/controls/NetworkFilter.qml @@ -26,11 +26,43 @@ StatusComboBox { /// If \c multiSelection is \c false, it is called only for the selected network when the selection changes signal toggleNetwork(var network) + function setChain(chainId) { + if(!multiSelection && !!d.currentModel && d.currentModel.count > 0) { + // Find given chain id: + var chainIdExists = false + if(chainId) { + if(!!root.layer1Networks && ModelUtils.contains(root.layer1Networks, "chainId", chainId)) { + d.currentModel = root.layer1Networks + chainIdExists = true + } else if(!!root.layer2Networks && ModelUtils.contains(root.layer2Networks, "chainId", chainId)) { + d.currentModel = root.layer2Networks + chainIdExists = true + } else if(!!root.testNetworks && ModelUtils.contains(root.testNetworks, "chainId", chainId)) { + d.currentModel = root.testNetworks + chainIdExists = true + } + } + + // Set chain: + if(chainIdExists) { + d.currentIndex = ModelUtils.indexOf(d.currentModel, "chainId", chainId) + } + else { + // Default value if not specified + d.currentModel = root.layer1Networks + d.currentIndex = 0 + } + + // Notify change: + root.toggleNetwork(ModelUtils.get(d.currentModel, d.currentIndex)) + } + } + QtObject { id: d - property string selectedChainName: "" - property string selectedIconUrl: "" + readonly property string selectedChainName: ModelUtils.get(d.currentModel, d.currentIndex, "chainName") ?? "" + readonly property string selectedIconUrl: ModelUtils.get(d.currentModel, d.currentIndex, "iconUrl") ?? "" readonly property bool allSelected: (!!root.enabledNetworks && !!root.allNetworks) ? root.enabledNetworks.count === root.allNetworks.count : false @@ -39,13 +71,7 @@ StatusComboBox { property int currentIndex: 0 } - Component.onCompleted: { - if (!multiSelection && d.currentModel.count > 0) { - d.selectedChainName = d.currentModel.rowData(d.currentIndex, "chainName") - d.selectedIconUrl = d.currentModel.rowData(d.currentIndex, "iconUrl") - root.toggleNetwork(ModelUtils.get(d.currentModel, d.currentIndex)) - } - } + onMultiSelectionChanged: root.setChain() control.padding: 12 control.spacing: 0 @@ -122,8 +148,6 @@ StatusComboBox { useEnabledRole: false onToggleNetwork: (network, networkModel, index) => { - d.selectedChainName = network.chainName - d.selectedIconUrl = network.iconUrl d.currentModel = networkModel d.currentIndex = index root.toggleNetwork(network)