feat(Wallet/NetworkFilter): Extended component API

Extends API to allow single UI selection network into `NetworkFilter` and `NetworkSelectPopup` updated.

ui/app/AppLayouts/Wallet/controls/NetworkFilter.qml

@@ -17,6 +17,17 @@ Item {
     implicitHeight: parent.height
 
     property var store
+    property bool isChainVisible: true
+    property bool multiSelection: true
+
+    signal singleNetworkSelected(int chainId)
+
+    QtObject {
+        id: d
+
+        property string selectedChainName: ""
+        property string selectedIconUrl: ""
+    }
 
     Item {
         id: selectRectangleItem
@@ -36,7 +47,12 @@ Item {
             statusListItemTitle.font.pixelSize: 13
             statusListItemTitle.font.weight: Font.Medium
             statusListItemTitle.color: Theme.palette.baseColor1
-            title: store.enabledNetworks.count === store.allNetworks.count ? qsTr("All networks") : qsTr("%n network(s)", "", store.enabledNetworks.count)
+            title: root.multiSelection ? (store.enabledNetworks.count === store.allNetworks.count ? qsTr("All networks") : qsTr("%n network(s)", "", store.enabledNetworks.count)) :
+                                         d.selectedChainName
+            asset.height: 24
+            asset.width: asset.height
+            asset.isImage: !root.multiSelection
+            asset.name: !root.multiSelection ? Style.svg(d.selectedIconUrl) : ""
             components:[
                 StatusIcon {
                     width: 16
@@ -60,7 +76,7 @@ Item {
         anchors.bottom: parent.bottom
         anchors.bottomMargin: Style.current.halfPadding
         spacing: Style.current.smallPadding
-        visible: chainRepeater.count > 0
+        visible: root.isChainVisible && chainRepeater.count > 0
 
         Repeater {
             id: chainRepeater
@@ -80,9 +96,16 @@ Item {
         layer1Networks: store.layer1Networks
         layer2Networks: store.layer2Networks
         testNetworks: store.testNetworks
+        multiSelection: root.multiSelection
 
         onToggleNetwork: {
             store.toggleNetwork(chainId)
         }
+
+        onSingleNetworkSelected: {
+            d.selectedChainName = chainName
+            d.selectedIconUrl = iconUrl
+            root.singleNetworkSelected(chainId)
+        }
     }
 }

ui/app/AppLayouts/Wallet/popups/NetworkSelectPopup.qml

@@ -15,7 +15,7 @@ Popup {
     id: root
     modal: false
     width: 360
-    height: 432
+    height: Math.min(432, scrollView.contentHeight + root.padding)
 
     horizontalPadding: 5
     verticalPadding: 5
@@ -28,7 +28,10 @@ Popup {
     // If true NetworksExtraStoreProxy expected for layer1Networks and layer2Networks properties
     property bool useNetworksExtraStoreProxy: false
 
+    property bool multiSelection: true
+
     signal toggleNetwork(int chainId)
+    signal singleNetworkSelected(int chainId, string chainName, string iconUrl)
 
     background: Rectangle {
         radius: Style.current.radius
@@ -50,6 +53,7 @@ Popup {
         width: root.width
         height: root.height
         contentHeight: content.height
+        contentWidth: availableWidth
         padding: 0
 
         ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
@@ -109,21 +113,38 @@ Popup {
             asset.isImage: true
             asset.name: Style.svg(model.iconUrl)
             onClicked:  {
-                checkBox.checked = !checkBox.checked
+                if(root.multiSelection)
+                    checkBox.toggle()
+                else
+                    radioButton.toggle()
             }
             components: [
                 StatusCheckBox {
                     id: checkBox
+                    visible: root.multiSelection
                     checked: root.useNetworksExtraStoreProxy ? model.isActive : model.isEnabled
-                    onCheckedChanged: {
+                    onToggled: {
                         if(root.useNetworksExtraStoreProxy && model.isActive !== checked) {
                             model.isActive = checked
                         } else if (model.isEnabled !== checked) {
                             root.toggleNetwork(model.chainId)
                         }
                     }
+                },
+                StatusRadioButton {
+                    id: radioButton
+                    visible: !root.multiSelection
+                    size: StatusRadioButton.Size.Large
+                    ButtonGroup.group: radioBtnGroup
+                    checked: model.index === 0
+                    onCheckedChanged: if(checked) root.singleNetworkSelected(model.chainId, model.chainName, model.iconUrl)
+                    onToggled: if(checked) root.singleNetworkSelected(model.chainId, model.chainName, model.iconUrl)
                 }
             ]
         }
     }
+
+    ButtonGroup {
+        id: radioBtnGroup
+    }
 }