diff --git a/storybook/pages/ConnectDappModalPage.qml b/storybook/pages/ConnectDappModalPage.qml deleted file mode 100644 index 33293b7525..0000000000 --- a/storybook/pages/ConnectDappModalPage.qml +++ /dev/null @@ -1,13 +0,0 @@ -import QtQuick 2.15 - -import shared.popups.walletconnect 1.0 - -Item { - id: root - - ConnectDappModal { - id: dappModal - - visible: true - } -} \ No newline at end of file diff --git a/storybook/pages/ConnectedDappsButtonPage.qml b/storybook/pages/ConnectedDappsButtonPage.qml deleted file mode 100644 index e4dc076b5b..0000000000 --- a/storybook/pages/ConnectedDappsButtonPage.qml +++ /dev/null @@ -1,92 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls 2.15 -import QtQuick.Layouts 1.15 -import QtQml 2.15 -import Qt.labs.settings 1.0 - -import StatusQ.Core 0.1 -import StatusQ.Core.Utils 0.1 -import StatusQ.Controls 0.1 -import StatusQ.Components 0.1 -import StatusQ.Core.Theme 0.1 -import StatusQ.Popups.Dialog 0.1 - -import Models 1.0 -import Storybook 1.0 - -import AppLayouts.Wallet.controls 1.0 -import AppLayouts.Wallet.services.dapps 1.0 - -import SortFilterProxyModel 0.2 - -import shared.popups.walletconnect 1.0 - -import utils 1.0 -import shared.stores 1.0 - -Item { - id: root - - // qml Splitter - SplitView { - anchors.fill: parent - - ColumnLayout { - SplitView.fillWidth: true - - Rectangle { - Layout.alignment: Qt.AlignCenter - Layout.preferredWidth: dappsButton.implicitHeight + 20 - Layout.preferredHeight: dappsButton.implicitHeight + 20 - - border.color: "blue" - border.width: 1 - - ConnectedDappsButton { - id: dappsButton - - anchors.centerIn: parent - - spacing: 8 - - onConnectDapp: { - console.warn("TODO: run ConnectDappModal...") - } - } - } - ColumnLayout {} - } - - ColumnLayout { - id: optionsSpace - - RowLayout { - Text { text: "projectId" } - Text { - id: projectIdText - readonly property string projectId: SystemUtils.getEnvVar("WALLET_CONNECT_PROJECT_ID") - text: projectId.substring(0, 3) + "..." + projectId.substring(projectId.length - 3) - font.bold: true - } - } - - // spacer - ColumnLayout {} - } - } - - DAppsStore { - wCSDK: WalletConnectSDK { - active: true - - projectId: projectIdText.projectId - - onSessionRequestEvent: (details) => { - // TODO #14556 - console.debug(`@dd onSessionRequestEvent: ${JSON.stringify(details)}`) - } - } - } -} - -// category: Popups diff --git a/storybook/pages/DAppsWorkflowPage.qml b/storybook/pages/DAppsWorkflowPage.qml new file mode 100644 index 0000000000..1d8d66d2c5 --- /dev/null +++ b/storybook/pages/DAppsWorkflowPage.qml @@ -0,0 +1,174 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import QtQml 2.15 +import Qt.labs.settings 1.0 +import QtTest 1.15 + +import StatusQ.Core 0.1 +import StatusQ.Core.Utils 0.1 +import StatusQ.Controls 0.1 +import StatusQ.Components 0.1 +import StatusQ.Core.Theme 0.1 +import StatusQ.Popups.Dialog 0.1 + +import Models 1.0 +import Storybook 1.0 + +import AppLayouts.Wallet.controls 1.0 +import AppLayouts.Wallet.services.dapps 1.0 + +import SortFilterProxyModel 0.2 + +import AppLayouts.Wallet.panels 1.0 + +import utils 1.0 +import shared.stores 1.0 + +Item { + id: root + + // qml Splitter + SplitView { + anchors.fill: parent + + ColumnLayout { + SplitView.fillWidth: true + + Rectangle { + Layout.alignment: Qt.AlignCenter + Layout.preferredWidth: dappsWorkflow.implicitHeight + 20 + Layout.preferredHeight: dappsWorkflow.implicitHeight + 20 + + border.color: "blue" + border.width: 1 + + DAppsWorkflow { + id: dappsWorkflow + + anchors.centerIn: parent + + spacing: 8 + } + } + ColumnLayout {} + } + + ColumnLayout { + id: optionsSpace + + RowLayout { + Text { text: "projectId" } + Text { + id: projectIdText + readonly property string projectId: SystemUtils.getEnvVar("WALLET_CONNECT_PROJECT_ID") + text: projectId.substring(0, 3) + "..." + projectId.substring(projectId.length - 3) + font.bold: true + } + } + + // spacer + ColumnLayout {} + + RowLayout { + Text { text: "URI" } + TextField { + id: pairUriInput + + placeholderText: "Enter WC Pair URI" + text: settings.pairUri + onTextChanged: { + settings.pairUri = text + } + + Layout.fillWidth: true + } + } + + + CheckBox { + id: openPairCheckBox + text: "Open Pair" + checked: settings.openPair + onCheckedChanged: { + settings.openPair = checked + if (checked) { + d.startPairing() + } + } + Connections { + target: dappsWorkflow + + // Open Pairing workflow if selected in the side bar + function onDAppsListReady() { + if (!d.startPairingWorkflowActive) + return + + let items = InspectionUtils.findVisualsByTypeName(dappsWorkflow, "DAppsListPopup") + if (items.length === 1) { + let buttons = InspectionUtils.findVisualsByTypeName(items[0], "StatusButton") + if (buttons.length === 1) { + buttons[0].clicked() + } + } + } + + function onConnectDappReady() { + if (!d.startPairingWorkflowActive) + return + + if (pairUriInput.text.length > 0) { + let items = InspectionUtils.findVisualsByTypeName(dappsWorkflow, "StatusBaseInput") + if (items.length === 1) { + items[0].text = pairUriInput.text + } + } + d.startPairingWorkflowActive = false + } + } + } + } + } + + DAppsStore { + wCSDK: WalletConnectSDK { + active: true + + projectId: projectIdText.projectId + + onSessionRequestEvent: (details) => { + // TODO #14556 + console.debug(`@dd onSessionRequestEvent: ${JSON.stringify(details)}`) + } + } + } + + + QtObject { + id: d + + property bool startPairingWorkflowActive: false + + function startPairing() { + startPairingWorkflowActive = true + if(root.visible) { + dappsWorkflow.clicked() + } + } + } + + onVisibleChanged: { + if (visible && d.startPairingWorkflowActive) { + d.startPairing() + } + } + + Settings { + id: settings + + property bool openPair: false + property string pairUri: "" + } +} + +// category: Wallet diff --git a/storybook/qmlTests/tests/tst_ConnectedDappsButton.qml b/storybook/qmlTests/tests/tst_DAppsWorkflow.qml similarity index 88% rename from storybook/qmlTests/tests/tst_ConnectedDappsButton.qml rename to storybook/qmlTests/tests/tst_DAppsWorkflow.qml index cc44a67e90..3e1d56922e 100644 --- a/storybook/qmlTests/tests/tst_ConnectedDappsButton.qml +++ b/storybook/qmlTests/tests/tst_DAppsWorkflow.qml @@ -16,15 +16,15 @@ Item { Component { id: componentUnderTest - ConnectedDappsButton { + DAppsWorkflow { } } TestCase { - name: "ConnectedDappsButton" + name: "DAppsWorkflow" when: windowShown - property ConnectedDappsButton controlUnderTest: null + property DAppsWorkflow controlUnderTest: null function init() { controlUnderTest = createTemporaryObject(componentUnderTest, root) diff --git a/storybook/src/Storybook/InspectionUtils.qml b/storybook/src/Storybook/InspectionUtils.qml index b9b990913e..9cbf404a4c 100644 --- a/storybook/src/Storybook/InspectionUtils.qml +++ b/storybook/src/Storybook/InspectionUtils.qml @@ -67,24 +67,36 @@ QtObject { } function findItemsByTypeName(root, typeName) { + return findVisualsByTypeName(root, typeName, true) + } + + function findVisualsByTypeName(root, typeName, onlyItems = false) { const items = [] const stack = [root] while (stack.length) { const item = stack.pop() - if (!item.visible || item.opacity === 0) - continue - const name = baseName(item) + if (!onlyItems && name === "QQuickLoader") { + if(item.item) + stack.push(item.item) + } + + if (!item.visible || item.opacity === 0) + continue if (name === typeName) { items.push(item) continue } - for (let i = 0; i < item.children.length; i++) - stack.push(item.children[i]) + // Popup will have contentChildren instead of children + let children = onlyItems || item.children ? item.children : item.contentChildren + if(children) { + for (let i = 0; i < children.length; i++) + stack.push(children[i]) + } } return items diff --git a/ui/app/AppLayouts/Wallet/controls/ConnectedDappsButton.qml b/ui/app/AppLayouts/Wallet/controls/ConnectedDappsButton.qml index 6e31cc83d0..2e23c7f70c 100644 --- a/ui/app/AppLayouts/Wallet/controls/ConnectedDappsButton.qml +++ b/ui/app/AppLayouts/Wallet/controls/ConnectedDappsButton.qml @@ -1,5 +1,4 @@ import QtQuick 2.15 -import QtGraphicalEffects 1.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 @@ -11,10 +10,6 @@ import StatusQ.Controls 0.1 StatusButton { id: root - property int menuWidth: 312 - - signal connectDapp() - implicitHeight: 38 size: StatusBaseButton.Size.Small @@ -29,70 +24,4 @@ StatusButton { icon.height: 16 icon.width: 16 icon.color: hovered ? Theme.palette.directColor1 : Theme.palette.baseColor1 - - highlighted: popup.opened - - onClicked: { - if (popup.opened) { - popup.close() - return - } - popup.x = width - root.menuWidth - 2 * popup.padding - popup.y = height + 4 - popup.open() - } - - Popup { - id: popup - - objectName: "dappsPopup" - - contentWidth: root.menuWidth - contentHeight: list.height - modal: false - padding: 8 - closePolicy: Popup.CloseOnEscape | Popup.CloseOnOutsideClick | Popup.CloseOnPressOutside - - background: Rectangle { - id: bckgContent - color: Theme.palette.statusMenu.backgroundColor - radius: 8 - layer.enabled: true - layer.effect: DropShadow { - anchors.fill: parent - source: bckgContent - horizontalOffset: 0 - verticalOffset: 4 - radius: 12 - samples: 25 - spread: 0.2 - color: Theme.palette.dropShadow - } - } - - ColumnLayout { - id: list - anchors.left: parent.left - anchors.right: parent.right - width: parent.width - spacing: 8 - - ShapeRectangle { - Layout.fillWidth: true - Layout.preferredHeight: implicitHeight - text: qsTr("Connected dApps will appear here") - } - - StatusButton { - Layout.fillWidth: true - Layout.preferredHeight: implicitHeight - - text: qsTr("Connect a dApp via WalletConnect") - onClicked: { - root.connectDapp() - popup.close() - } - } - } - } } diff --git a/ui/app/AppLayouts/Wallet/panels/DAppsWorkflow.qml b/ui/app/AppLayouts/Wallet/panels/DAppsWorkflow.qml new file mode 100644 index 0000000000..d8635a7dc2 --- /dev/null +++ b/ui/app/AppLayouts/Wallet/panels/DAppsWorkflow.qml @@ -0,0 +1,67 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 + +import AppLayouts.Wallet.controls 1.0 + +import shared.popups.walletconnect 1.0 + +ConnectedDappsButton { + id: root + + signal dAppsListReady() + signal connectDappReady() + + onClicked: { + dappsListLoader.active = true + } + + highlighted: dappsListLoader.active + + Loader { + id: connectDappLoader + + active: false + + onLoaded: { + item.open() + root.connectDappReady() + } + + sourceComponent: ConnectDappModal { + visible: true + + onClosed: connectDappLoader.active = false + + onPair: (uri) => { + this.close() + console.debug(`TODO(#14556): ConnectionRequestDappModal with ${uri}`) + } + } + } + + Loader { + id: dappsListLoader + + active: false + + onLoaded: { + item.open() + root.dAppsListReady() + } + + sourceComponent: DAppsListPopup { + visible: true + + onConnectDapp: { + connectDappLoader.active = true + this.close() + } + onOpened: { + this.x = root.width - this.menuWidth - 2 * this.padding + this.y = root.height + 4 + } + onClosed: dappsListLoader.active = false + } + } +} diff --git a/ui/app/AppLayouts/Wallet/panels/WalletHeader.qml b/ui/app/AppLayouts/Wallet/panels/WalletHeader.qml index 69bdcb2bc6..14ce767e33 100644 --- a/ui/app/AppLayouts/Wallet/panels/WalletHeader.qml +++ b/ui/app/AppLayouts/Wallet/panels/WalletHeader.qml @@ -11,8 +11,6 @@ import StatusQ.Popups 0.1 import SortFilterProxyModel 0.2 -import shared.popups.walletconnect 1.0 - import utils 1.0 import "../controls" @@ -76,34 +74,12 @@ Item { Layout.alignment: Qt.AlignTrailing Layout.topMargin: 5 - ConnectedDappsButton { + DAppsWorkflow { Layout.alignment: Qt.AlignTop spacing: 8 + visible: !root.walletStore.showSavedAddresses && Global.featureFlags.dappsEnabled - - onConnectDapp: { - connectDappLoader.active = true - } - - Loader { - id: connectDappLoader - - active: false - - onLoaded: item.open() - - sourceComponent: ConnectDappModal { - visible: true - - onClosed: connectDappLoader.active = false - - onPair: (uri) => { - this.close() - console.debug(`TODO(#14556): ConnectionRequestDappModal with ${uri}`) - } - } - } } StatusButton { diff --git a/ui/app/AppLayouts/Wallet/panels/qmldir b/ui/app/AppLayouts/Wallet/panels/qmldir index 6712699125..4365d91e60 100644 --- a/ui/app/AppLayouts/Wallet/panels/qmldir +++ b/ui/app/AppLayouts/Wallet/panels/qmldir @@ -5,3 +5,4 @@ ActivityFilterPanel 1.0 ActivityFilterPanel.qml ManageAssetsPanel 1.0 ManageAssetsPanel.qml ManageCollectiblesPanel 1.0 ManageCollectiblesPanel.qml ManageHiddenPanel 1.0 ManageHiddenPanel.qml +DAppsWorkflow 1.0 DAppsWorkflow.qml \ No newline at end of file diff --git a/ui/imports/shared/popups/walletconnect/DAppsListPopup.qml b/ui/imports/shared/popups/walletconnect/DAppsListPopup.qml new file mode 100644 index 0000000000..c457837e80 --- /dev/null +++ b/ui/imports/shared/popups/walletconnect/DAppsListPopup.qml @@ -0,0 +1,67 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import QtGraphicalEffects 1.15 + +import StatusQ.Core.Theme 0.1 +import StatusQ.Controls 0.1 + +import shared.controls 1.0 + +Popup { + id: root + + objectName: "dappsPopup" + + property int menuWidth: 312 + + signal connectDapp() + + contentWidth: root.menuWidth + contentHeight: list.height + modal: false + padding: 8 + closePolicy: Popup.CloseOnEscape | Popup.CloseOnOutsideClick | Popup.CloseOnPressOutside + + background: Rectangle { + id: bckgContent + + color: Theme.palette.statusMenu.backgroundColor + radius: 8 + layer.enabled: true + layer.effect: DropShadow { + anchors.fill: parent + source: bckgContent + horizontalOffset: 0 + verticalOffset: 4 + radius: 12 + samples: 25 + spread: 0.2 + color: Theme.palette.dropShadow + } + } + + ColumnLayout { + id: list + anchors.left: parent.left + anchors.right: parent.right + width: parent.width + spacing: 8 + + ShapeRectangle { + Layout.fillWidth: true + Layout.preferredHeight: implicitHeight + text: qsTr("Connected dApps will appear here") + } + + StatusButton { + Layout.fillWidth: true + Layout.preferredHeight: implicitHeight + + text: qsTr("Connect a dApp via WalletConnect") + onClicked: { + root.connectDapp() + } + } + } +} diff --git a/ui/imports/shared/popups/walletconnect/qmldir b/ui/imports/shared/popups/walletconnect/qmldir index ae5f7e0b72..fe2f889aa4 100644 --- a/ui/imports/shared/popups/walletconnect/qmldir +++ b/ui/imports/shared/popups/walletconnect/qmldir @@ -1 +1,2 @@ -ConnectDappModal 1.0 ConnectDappModal.qml \ No newline at end of file +ConnectDappModal 1.0 ConnectDappModal.qml +DAppsListPopup 1.0 DAppsListPopup.qml \ No newline at end of file