diff --git a/ui/app/AppLayouts/Wallet/controls/NetworkFilter.qml b/ui/app/AppLayouts/Wallet/controls/NetworkFilter.qml new file mode 100644 index 0000000000..805034ace6 --- /dev/null +++ b/ui/app/AppLayouts/Wallet/controls/NetworkFilter.qml @@ -0,0 +1,96 @@ +import QtQuick 2.13 +import shared 1.0 +import shared.panels 1.0 + +import utils 1.0 +import "../popups" + +Item { + id: root + width: selectRectangle.width + height: childrenRect.height + signal toggleNetwork(int chainId) + + property var store + + Rectangle { + id: selectRectangle + border.width: 1 + border.color: Style.current.border + radius: Style.current.radius + width: text.width + Style.current.padding * 4 + height: text.height + Style.current.padding + + StyledText { + id: text + text: qsTr("All networks") + anchors.left: parent.left + anchors.leftMargin: Style.current.padding + anchors.verticalCenter: parent.verticalCenter + font.pixelSize: Style.current.primaryTextFontSize + } + + SVGImage { + id: caretImg + width: 10 + height: 6 + source: Style.svg("caret") + anchors.right: parent.right + anchors.rightMargin: Style.current.padding + anchors.verticalCenter: parent.verticalCenter + fillMode: Image.PreserveAspectFit + } + } + + MouseArea { + anchors.fill: selectRectangle + cursorShape: Qt.PointingHandCursor + onClicked: { + if (selectPopup.opened) { + selectPopup.close(); + return; + } + selectPopup.open(); + } + } + + Grid { + id: enabledNetworks + columns: 2 + spacing: 2 + visible: (chainRepeater.count > 0) + + Repeater { + id: chainRepeater + model: store.enabledNetworks + width: parent.width + height: parent.height + + Rectangle { + color: Utils.setColorAlpha(Style.current.blue, 0.1) + width: text.width + Style.current.halfPadding + height: text.height + Style.current.halfPadding + radius: Style.current.radius + + StyledText { + id: text + text: model.chainName + color: Style.current.blue + font.pixelSize: Style.current.secondaryTextFontSize + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.horizontalCenter + } + } + } + } + + NetworkSelectPopup { + id: selectPopup + x: (parent.width - width) + y: (root.height - networkFilterPanel.height) + model: store.allNetworks + onToggleNetwork: { + store.toggleNetwork(chainId) + } + } +} diff --git a/ui/app/AppLayouts/Wallet/panels/WalletHeader.qml b/ui/app/AppLayouts/Wallet/panels/WalletHeader.qml index 4f0902b86b..c666989879 100644 --- a/ui/app/AppLayouts/Wallet/panels/WalletHeader.qml +++ b/ui/app/AppLayouts/Wallet/panels/WalletHeader.qml @@ -20,6 +20,7 @@ Item { property var currentAccount property var changeSelectedAccount property var store + property var walletStore height: walletAddress.y + walletAddress.height anchors.right: parent.right @@ -76,13 +77,23 @@ Item { store: walletHeader.store } + NetworkFilter { + id: networkFilter + visible: walletHeader.walletStore.isMultiNetworkEnabled + anchors.top: parent.top + anchors.topMargin: 56 + anchors.left: walletBalance.right + anchors.leftMargin: 70 + store: walletHeader.walletStore + } + Component { id: receiveModalComponent ReceiveModal { onClosed: { destroy(); } - selectedAccount: RootStore.currentAccount + selectedAccount: walletHeader.walletStore.currentAccount } } diff --git a/ui/app/AppLayouts/Wallet/popups/NetworkSelectPopup.qml b/ui/app/AppLayouts/Wallet/popups/NetworkSelectPopup.qml new file mode 100644 index 0000000000..2c10e59007 --- /dev/null +++ b/ui/app/AppLayouts/Wallet/popups/NetworkSelectPopup.qml @@ -0,0 +1,83 @@ +import QtQuick 2.13 +import QtQuick.Controls 2.13 +import QtQuick.Layouts 1.3 +import QtGraphicalEffects 1.0 + +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 +import StatusQ.Components 0.1 +import StatusQ.Controls 0.1 + +import utils 1.0 + +// TODO: replace with StatusModal +Popup { + id: popup + modal: false + width: 360 + height: 432 + closePolicy: Popup.CloseOnEscape + property var model + signal toggleNetwork(int chainId) + + background: Rectangle { + radius: Style.current.radius + color: Style.current.background + border.color: Style.current.border + layer.enabled: true + layer.effect: DropShadow{ + verticalOffset: 3 + radius: 8 + samples: 15 + fast: true + cached: true + color: "#22000000" + } + } + + contentItem: ScrollView { + id: scrollView + contentHeight: content.height + width: popup.width + height: popup.height + + ScrollBar.horizontal.policy: ScrollBar.AlwaysOff + clip: true + + Column { + id: content + width: popup.width + spacing: Style.current.padding + + Repeater { + id: chainRepeater + model: popup.model + + Item { + width: content.width + height: 40 + StatusBaseText { + anchors.left: parent.left + anchors.leftMargin: Style.current.bigPadding + anchors.verticalCenter: parent.verticalCenter + font.pixelSize: Style.current.primaryTextFontSize + text: model.chainName + color: Theme.palette.directColor1 + } + + StatusCheckBox { + anchors.right: parent.right + anchors.rightMargin: Style.current.bigPadding + anchors.verticalCenter: parent.verticalCenter + checked: model.enabled + onCheckedChanged: { + if(checked !== model.enabled){ + popup.toggleNetwork(model.chainId) + } + } + } + } + } + } + } +} diff --git a/ui/app/AppLayouts/Wallet/stores/RootStore.qml b/ui/app/AppLayouts/Wallet/stores/RootStore.qml index 60c84c6469..2944a12a4e 100644 --- a/ui/app/AppLayouts/Wallet/stores/RootStore.qml +++ b/ui/app/AppLayouts/Wallet/stores/RootStore.qml @@ -10,6 +10,7 @@ QtObject { property var accountSensitiveSettings: localAccountSensitiveSettings property string locale: appSettings.locale property bool hideSignPhraseModal: accountSensitiveSettings.hideSignPhraseModal + property bool isMultiNetworkEnabled: accountSensitiveSettings.isMultiNetworkEnabled property string currentCurrency: walletSection.currentCurrency property string totalCurrencyBalance: walletSection.totalCurrencyBalance diff --git a/ui/app/AppLayouts/Wallet/views/RightTabView.qml b/ui/app/AppLayouts/Wallet/views/RightTabView.qml index 5919944dc1..572fe13908 100644 --- a/ui/app/AppLayouts/Wallet/views/RightTabView.qml +++ b/ui/app/AppLayouts/Wallet/views/RightTabView.qml @@ -27,6 +27,7 @@ Item { currentAccount: RootStore.currentAccount changeSelectedAccount: walletContainer.changeSelectedAccount store: walletContainer.store + walletStore: RootStore } RowLayout {