feat(wallet) customize NetworkFilter for dapps display

Allow to show all selected icons in the network filter
Hide checkboxes in the network filter dropdown

Updates #14607

storybook/pages/ConnectDAppModalPage.qml

@@ -68,6 +68,72 @@ Item {
                 anchors.centerIn: parent
 
                 spacing: 8
+
+                accounts: ListModel {
+                    ListElement {
+                        property string name: "Account 1"
+                        property string address: "0x1234567890"
+                        property string network: "Main"
+                        property int position: 0
+                        property string emoji: "🦄"
+                        property string colorId: "turquoise"
+                    }
+                    ListElement {
+                        property string name: "Account 2"
+                        property string address: "0x1234567891"
+                        property string network: "Second"
+                        property int position: 1
+                        property string emoji: "🐼"
+                        property string colorId: "purple"
+                    }
+                }
+
+                flatNetworks: ListModel {
+                        Component.onCompleted: append([
+                            {
+                                chainId: 1,
+                                chainName: "Ethereum Mainnet",
+                                blockExplorerUrl: "https://etherscan.io/",
+                                iconUrl: "network/Network=Ethereum",
+                                chainColor: "#627EEA",
+                                shortName: "eth",
+                                nativeCurrencyName: "Ether",
+                                nativeCurrencySymbol: "ETH",
+                                nativeCurrencyDecimals: 18,
+                                isTest: false,
+                                layer: 1,
+                                isEnabled: true,
+                            },
+                            {
+                                chainId: 10,
+                                chainName: "Optimism",
+                                blockExplorerUrl: "https://optimistic.etherscan.io",
+                                iconUrl: "network/Network=Optimism",
+                                chainColor: "#E90101",
+                                shortName: "opt",
+                                nativeCurrencyName: "Ether",
+                                nativeCurrencySymbol: "ETH",
+                                nativeCurrencyDecimals: 18,
+                                isTest:  false,
+                                layer:   2,
+                                isEnabled: true,
+                            },
+                            {
+                                chainId: 42161,
+                                chainName: "Arbitrum",
+                                blockExplorerUrl: "https://arbiscan.io/",
+                                iconUrl: "network/Network=Arbitrum",
+                                chainColor: "#51D0F0",
+                                shortName: "arb",
+                                nativeCurrencyName: "Ether",
+                                nativeCurrencySymbol: "ETH",
+                                nativeCurrencyDecimals: 18,
+                                isTest:  false,
+                                layer:   2,
+                                isEnabled: true,
+                            }
+                        ])
+                }
             }
 
             ColumnLayout {}

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

@@ -25,6 +25,8 @@ StatusComboBox {
     property bool multiSelection: true
     property bool preferredNetworksMode: false
     property var preferredSharingNetworks: []
+    property bool showAllSelectedText: true
+    property bool showCheckboxes: true
 
     /// \c network is a network.model.nim entry
     /// It is called for every toggled network if \c multiSelection is \c true
@@ -101,13 +103,13 @@ StatusComboBox {
             lineHeight: 24
             lineHeightMode: Text.FixedHeight
             verticalAlignment: Text.AlignVCenter
-            text: root.multiSelection ? (d.noneSelected ? qsTr("Select networks"): d.allSelected ? qsTr("All networks") : "") : d.selectedChainName
+            text: root.multiSelection ? (d.noneSelected ? qsTr("Select networks"): d.allSelected && root.showAllSelectedText ? qsTr("All networks") : "") : d.selectedChainName
             color: Theme.palette.baseColor1
             visible: !!text
         }
         Row {
             spacing: -4
-            visible: !d.allSelected && chainRepeater.count > 0
+            visible: (!d.allSelected || !root.showAllSelectedText) && chainRepeater.count > 0
             Repeater {
                 id: chainRepeater
                 model: root.preferredNetworksMode ? root.flatNetworks: root.multiSelection ? d.enabledFlatNetworks: []
@@ -126,6 +128,7 @@ StatusComboBox {
         flatNetworks: root.flatNetworks
         preferredSharingNetworks: root.preferredSharingNetworks
         preferredNetworksMode: root.preferredNetworksMode
+        showCheckboxes: root.showCheckboxes
 
         implicitWidth: contentWidth
         implicitHeight: contentHeight

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

@@ -15,6 +15,7 @@ StatusListItem {
     property var singleSelection
     property var radioButtonGroup
     property bool useEnabledRole: true
+    property bool showCheckboxes: true
 
     // Needed for preferred sharing networks
     property bool preferredNetworksMode: false
@@ -49,7 +50,7 @@ StatusListItem {
             id: checkBox
             objectName: "networkSelectionCheckbox_" + model.chainName
             tristate: true
-            visible: !root.singleSelection.enabled
+            visible: !root.singleSelection.enabled && root.showCheckboxes
 
             checkState: {
                 if(root.preferredNetworksMode) {

ui/app/AppLayouts/Wallet/views/NetworkSelectionView.qml

@@ -19,6 +19,7 @@ StatusListView {
     property SingleSelectionInfo singleSelection: SingleSelectionInfo {}
     property var preferredSharingNetworks: []
     property bool preferredNetworksMode: false
+    property bool showCheckboxes: true
 
     signal toggleNetwork(var network, int index)
 
@@ -35,6 +36,7 @@ StatusListView {
         preferredNetworksMode: root.preferredNetworksMode
         preferredSharingNetworks: root.preferredSharingNetworks
         allChecked: root.preferredSharingNetworks.length === root.count
+        showCheckboxes: root.showCheckboxes
     }
 
     section {

ui/imports/shared/popups/walletconnect/ConnectDAppModal.qml

@@ -13,6 +13,8 @@ import StatusQ.Core.Theme 0.1
 // TODO extract the components to StatusQ
 import shared.popups.send.controls 1.0
 
+import AppLayouts.Wallet.controls 1.0
+
 import utils 1.0
 
 StatusDialog {
@@ -21,20 +23,9 @@ StatusDialog {
     width: 480
     implicitHeight: 633
 
-    /*required*/ property var accounts: ListModel {
-        ListElement {
-            property string name: "Account 1"
-            property string address: "0x1234567890"
-            property string network: "Main"
-            property int position: 0
-        }
-        ListElement {
-            property string name: "Account 2"
-            property string address: "0x1234567891"
-            property string network: "Second"
-            property int position: 1
-        }
-    }
+    readonly property alias selectedAccount: d.selectedAccount
+    required property var accounts
+    required property var flatNetworks
 
     closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
 
@@ -69,6 +60,15 @@ StatusDialog {
             Layout.fillWidth: true
         }
 
+        PermissionsCard {
+            Layout.fillWidth: true
+
+            Layout.leftMargin: 12
+            Layout.rightMargin: Layout.leftMargin
+            Layout.topMargin: 20
+            Layout.bottomMargin: Layout.topMargin
+        }
+
         // TODO DEV the spacer should not be needed when all the content is available
         Item { Layout.fillHeight: true }
     }
@@ -109,7 +109,6 @@ StatusDialog {
 
             RowLayout {
                 Layout.margins: 16
-                Layout.fillWidth: true
 
                 StatusBaseText {
                     text: qsTr("Connect with")
@@ -119,16 +118,18 @@ StatusDialog {
 
                 // TODO: have a reusable component for this
                 AccountsModalHeader {
-                    control.enabled: count > 1
-                    model: SortFilterProxyModel {
-                        sourceModel: root.accounts
+                    id: accountsDropdown
 
-                        sorters: RoleSorter { roleName: "position"; sortOrder: Qt.AscendingOrder }
-                    }
+                    Layout.preferredWidth: 204
+
+                    control.enabled: count > 1
+                    model: d.accountsProxy
 
-                    selectedAccount: root.accounts.get(0)
-                    onSelectedIndexChanged: (selectedIndex) => {
-                        root.selectedAccountIndexChanged(selectedIndex)
+                    selectedAccount: d.accountsProxy.get(0)
+                    onSelectedAccountChanged: d.selectedAccount = selectedAccount
+                    onSelectedIndexChanged: {
+                        d.selectedAccount = model.get(selectedIndex)
+                        selectedAccount = d.selectedAccount
                     }
                 }
             }
@@ -144,6 +145,17 @@ StatusDialog {
 
                 StatusBaseText {
                     text: qsTr("On")
+
+                    Layout.fillWidth: true
+                }
+
+                // TODO: replace with a specialized network selection control
+                NetworkFilter {
+                    Layout.preferredWidth: accountsDropdown.Layout.preferredWidth
+
+                    flatNetworks: root.flatNetworks
+                    showAllSelectedText: false
+                    showCheckboxes: false
                 }
             }
         }
@@ -191,7 +203,43 @@ StatusDialog {
 
         QtObject {
             id: d
+
             property string iconSource: ""
         }
     }
+
+    component PermissionsCard: ColumnLayout {
+        spacing: 8
+
+        StatusBaseText {
+            text: qsTr("Uniswap Interface will be able to:")
+
+            font.pixelSize: 13
+            color: Theme.palette.baseColor1
+        }
+
+        StatusBaseText {
+            text: qsTr("Check your account balance and activity")
+
+            font.pixelSize: 13
+        }
+
+        StatusBaseText {
+            text: qsTr("Request transactions and message signing")
+
+            font.pixelSize: 13
+        }
+    }
+
+    QtObject {
+        id: d
+
+        property SortFilterProxyModel accountsProxy: SortFilterProxyModel {
+            sourceModel: root.accounts
+
+            sorters: RoleSorter { roleName: "position"; sortOrder: Qt.AscendingOrder }
+        }
+
+        property var selectedAccount: accountsProxy.get(0)
+    }
 }