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

@@ -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
-        }
-    }
 }

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,

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)