diff --git a/storybook/pages/EditAirdropViewPage.qml b/storybook/pages/EditAirdropViewPage.qml index bebf1690e0..235d7b6821 100644 --- a/storybook/pages/EditAirdropViewPage.qml +++ b/storybook/pages/EditAirdropViewPage.qml @@ -1,6 +1,6 @@ -import QtQuick 2.14 -import QtQuick.Controls 2.14 -import QtQuick.Layouts 1.14 +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 import AppLayouts.Communities.views 1.0 import AppLayouts.Communities.controls 1.0 diff --git a/storybook/pages/NetworkFilterPage.qml b/storybook/pages/NetworkFilterPage.qml index c18003826f..50958df554 100644 --- a/storybook/pages/NetworkFilterPage.qml +++ b/storybook/pages/NetworkFilterPage.qml @@ -7,6 +7,7 @@ import Models 1.0 import SortFilterProxyModel 0.2 +import AppLayouts.stores 1.0 import AppLayouts.Wallet.controls 1.0 SplitView { @@ -17,8 +18,80 @@ SplitView { readonly property string optimismName : "Optimism" readonly property string arbitrumName : "Arbitrum" - SplitView { + + // Keep a clone so that the UX can be modified without affecting the original model + CloneModel { + id: simulatedNimModel + + sourceModel: SortFilterProxyModel { + sourceModel: NetworksModel.flatNetworks + filters: ValueFilter { roleName: "isTest"; value: false } + } + + roles: ["chainId", "layer", "chainName", "isTest", "isEnabled", "iconUrl", "shortName", "chainColor"] + rolesOverride: [{ role: "enabledState", transform: (mD) => { + return simulatedNimModel.areAllEnabled(sourceModel) + ? NetworkSelectItemDelegate.UxEnabledState.AllEnabled + : mD.isEnabled + ? NetworkSelectItemDelegate.UxEnabledState.Enabled + : NetworkSelectItemDelegate.UxEnabledState.Disabled + } + }] + + /// Simulate the Nim model + function toggleNetwork(network) { + const chainId = network.chainId + let chainIdOnlyEnabled = true + let chainIdOnlyDisabled = true + let allEnabled = true + for (let i = 0; i < simulatedNimModel.count; i++) { + const item = simulatedNimModel.get(i) + if(item.enabledState === NetworkSelectItemDelegate.UxEnabledState.Enabled) { + if(item.chainId !== chainId) { + chainIdOnlyEnabled = false + } + } else if(item.enabledState === NetworkSelectItemDelegate.UxEnabledState.Disabled) { + if(item.chainId !== chainId) { + chainIdOnlyDisabled = false + } + allEnabled = false + } else { + if(item.chainId === chainId) { + chainIdOnlyDisabled = false + chainIdOnlyEnabled = false + } + } + } + for (let i = 0; i < simulatedNimModel.count; i++) { + const item = simulatedNimModel.get(i) + if(allEnabled) { + simulatedNimModel.setProperty(i, "enabledState", item.chainId === chainId ? NetworkSelectItemDelegate.UxEnabledState.Enabled : NetworkSelectItemDelegate.UxEnabledState.Disabled) + } else if(chainIdOnlyEnabled || chainIdOnlyDisabled) { + simulatedNimModel.setProperty(i, "enabledState", NetworkSelectItemDelegate.UxEnabledState.AllEnabled) + } else if(item.chainId === chainId) { + simulatedNimModel.setProperty(i, "enabledState", item.enabledState === NetworkSelectItemDelegate.UxEnabledState.Enabled + ? NetworkSelectItemDelegate.UxEnabledState.Disabled + : NetworkSelectItemDelegate.UxEnabledState.Enabled) + } + const haveEnabled = item.enabledState !== NetworkSelectItemDelegate.UxEnabledState.Disabled + if(item.isEnabled !== haveEnabled) { + simulatedNimModel.setProperty(i, "isEnabled", haveEnabled) + } + } + } + + function areAllEnabled(modelToCheck) { + for (let i = 0; i < modelToCheck.count; i++) { + if(!(modelToCheck.get(i).isEnabled)) { + return false + } + } + return true + } + } + + SplitView { orientation: Qt.Vertical SplitView.fillWidth: true @@ -28,35 +101,33 @@ SplitView { SplitView.fillWidth: true SplitView.fillHeight: true - Rectangle { - width: 800 - height: 200 - border.width: 1 + NetworkFilter { + id: networkFilter + anchors.centerIn: parent - NetworkFilter { - id: networkFilter + flatNetworks: simulatedNimModel - anchors.centerIn: parent + multiSelection: multiSelectionCheckBox.checked + showAllSelectedText: ctrlShowAllSelectedText.checked + showTitle: ctrlShowTitle.checked + showCheckboxes: ctrlShowCheckBoxes.checked + showRadioButtons: ctrlShowRadioButtons.checked - flatNetworks: SortFilterProxyModel { - sourceModel: NetworksModel.flatNetworks - filters: ValueFilter { roleName: "isTest"; value: false; } - } + onToggleNetwork: (network) => { + logs.logEvent("onToggleNetwork: " + network.chainName) - multiSelection: multiSelectionCheckBox.checked + if(multiSelection) { + simulatedNimModel.toggleNetwork(network) + } else { + if(network.chainName === root.ethereumName) + ethRadioBtn.checked = true - onToggleNetwork: { + else if(network.chainName === root.optimismName) + optRadioBtn.checked = true - logs.logEvent("onToggleNetwork: " + network.chainName) - if(network.chainName === root.ethereumName) - ethRadioBtn.checked = true - - else if(network.chainName === root.optimismName) - optRadioBtn.checked = true - - else if(network.chainName === root.arbitrumName) - arbRadioBtn.checked = true + else if(network.chainName === root.arbitrumName) + arbRadioBtn.checked = true } } } @@ -86,6 +157,34 @@ SplitView { onCheckedChanged: if(!checked) ethRadioBtn.checked = true } + CheckBox { + id: ctrlShowTitle + visible: !multiSelectionCheckBox.checked + text: "Show title text" + checked: true + } + + CheckBox { + id: ctrlShowCheckBoxes + visible: multiSelectionCheckBox.checked + text: "Show checkboxes" + checked: true + } + + CheckBox { + id: ctrlShowRadioButtons + visible: !multiSelectionCheckBox.checked + text: "Show radio buttons" + checked: true + } + + CheckBox { + id: ctrlShowAllSelectedText + text: "Show 'All networks' text" + visible: multiSelectionCheckBox.checked + checked: true + } + ColumnLayout { visible: !multiSelectionCheckBox.checked Label { diff --git a/storybook/qmlTests/tests/tst_SwapModal.qml b/storybook/qmlTests/tests/tst_SwapModal.qml index 8d0ea31ad8..1a52e4f345 100644 --- a/storybook/qmlTests/tests/tst_SwapModal.qml +++ b/storybook/qmlTests/tests/tst_SwapModal.qml @@ -289,9 +289,7 @@ Item { // check default value of network comboBox, should be mainnet compare(root.swapFormData.selectedNetworkChainId, -1) - const networkComboBoxText = findChild(networkComboBox.control.contentItem, "contentItemText") - verify(!!networkComboBoxText) - compare(networkComboBoxText.text, root.swapAdaptor.filteredFlatNetworksModel.get(0).chainName) + compare(root.swapAdaptor.filteredFlatNetworksModel.get(0).chainId, 11155111 /*Sepolia Mainnet*/) // lets ensure that the selected one is correctly set for (let i=0; i { root.swapInputParamsForm.selectedNetworkChainId = network.chainId @@ -97,6 +99,9 @@ StatusDialog { StatusBaseText { text: qsTr("Selected to token: %1").arg(swapInputParamsForm.toTokenKey) } + StatusBaseText { + text: qsTr("Selected network chainId: %1").arg(swapInputParamsForm.selectedNetworkChainId) + } } } diff --git a/ui/app/AppLayouts/Wallet/views/NetworkSelectionView.qml b/ui/app/AppLayouts/Wallet/views/NetworkSelectionView.qml index 4aad79f57d..89c1136cd2 100644 --- a/ui/app/AppLayouts/Wallet/views/NetworkSelectionView.qml +++ b/ui/app/AppLayouts/Wallet/views/NetworkSelectionView.qml @@ -20,6 +20,7 @@ StatusListView { property var preferredSharingNetworks: [] property bool preferredNetworksMode: false property bool showCheckboxes: true + property bool showRadioButtons: true signal toggleNetwork(var network, int index) @@ -32,11 +33,12 @@ StatusListView { networkModel: root.model useEnabledRole: root.useEnabledRole singleSelection: root.singleSelection - onToggleNetwork: root.toggleNetwork(network, index) + onToggleNetwork: (network, model, index) => root.toggleNetwork(network, index) preferredNetworksMode: root.preferredNetworksMode preferredSharingNetworks: root.preferredSharingNetworks allChecked: root.preferredSharingNetworks.length === root.count showCheckboxes: root.showCheckboxes + showRadioButtons: root.showRadioButtons } section { @@ -50,7 +52,6 @@ StatusListView { id: layer2text StatusBaseText { width: parent.width - font.pixelSize: Style.current.primaryTextFontSize color: Theme.palette.baseColor1 text: qsTr("Layer 2") height: 40