From 913041d5d9a62cf4ad2055583c19f3f20bb34dad Mon Sep 17 00:00:00 2001 From: Stefan Date: Tue, 30 Apr 2024 14:08:37 +0200 Subject: [PATCH] chore(dapps) foundation for dapps page in storybook Updates #14317 --- storybook/pages/ConnectedDappsButtonPage.qml | 65 ++++++ storybook/pages/WalletConnectPage.qml | 206 ------------------ .../tests/tst_ConnectedDappsButton.qml | 49 +++++ .../Wallet/controls/ConnectedDappsButton.qml | 7 + .../AppLayouts/Wallet/panels/WalletHeader.qml | 2 - .../shared/popups/walletconnect/sdk/README.md | 6 +- 6 files changed, 122 insertions(+), 213 deletions(-) create mode 100644 storybook/pages/ConnectedDappsButtonPage.qml delete mode 100644 storybook/pages/WalletConnectPage.qml create mode 100644 storybook/qmlTests/tests/tst_ConnectedDappsButton.qml diff --git a/storybook/pages/ConnectedDappsButtonPage.qml b/storybook/pages/ConnectedDappsButtonPage.qml new file mode 100644 index 0000000000..0fdc56c505 --- /dev/null +++ b/storybook/pages/ConnectedDappsButtonPage.qml @@ -0,0 +1,65 @@ +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 SortFilterProxyModel 0.2 + +import utils 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 ConnectDappPopup...") + } + } + } + ColumnLayout {} + } + + ColumnLayout { + id: optionsSpace + + // spacer + ColumnLayout {} + } + } +} + +// category: Popups diff --git a/storybook/pages/WalletConnectPage.qml b/storybook/pages/WalletConnectPage.qml deleted file mode 100644 index 6fd3eaa993..0000000000 --- a/storybook/pages/WalletConnectPage.qml +++ /dev/null @@ -1,206 +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.views.walletconnect 1.0 - -import SortFilterProxyModel 0.2 - -import utils 1.0 - -import nim 1.0 - -Item { - id: root - - WalletConnect { - id: wc - - anchors.top: parent.bottom - anchors.left: parent.left - url: `${pagesFolder}/../stubs/AppLayouts/Wallet/views/walletconnect/src/index.html` - - controller: WalletConnectController { - sessionProposal: function(sessionProposalJson) { - respondSessionProposal(sessionProposalJson, `{"eip155":{"methods":["eth_sendTransaction","eth_sendRawTransaction","personal_sign","eth_sign","eth_signTransaction","eth_signTypedData","wallet_switchEthereumChain"],"chains":["eip155:5"],"events":["accountsChanged","chainChanged"],"accounts":["eip155:5:0xE2d622C817878dA5143bBE06866ca8E35273Ba8a"]}}`, "") - } - - recordSuccessfulPairing: function(sessionProposalJson) { - const sessionProposal = JSON.parse(sessionProposalJson) - - pairingsModel.append({ - topic: sessionProposal.params.pairingTopic, - expiry: sessionProposal.params.expiry, - active: true, - peerMetadata: { - name: sessionProposal.params.proposer.metadata.name, - url: sessionProposal.params.proposer.metadata.url, - icons: sessionProposal.params.proposer.metadata.icons, - } - }) - root.saveListModel(pairingsModel) - } - deletePairing: function(pairingTopic) { - var found = false - for (var i = 0; i < pairingsModel.count; i++) { - if (pairingsModel.get(i).topic === pairingTopic) { - pairingsModel.get(i).active = false - found = true - break; - } - } - if (!found) { - console.error("Mock Controller: pairing not found", pairingTopic) - } - root.saveListModel(pairingsModel) - } - sessionRequest: function(sessionRequestJson, password) { - const signedJson = "0x1234567890" - this.respondSessionRequest(sessionRequestJson, signedJson, respondError.checked) - } - - hasActivePairings: settings.hasActivePairings - projectId: "87815d72a81d739d2a7ce15c2cfdefb3" - } - - clip: true - } - - // qml Splitter - SplitView { - anchors.fill: parent - - ColumnLayout { - SplitView.fillWidth: true - - StatusButton { - id: openModalButton - text: "OpenModal" - onClicked: { - wc.modal.open() - } - } - ColumnLayout {} - } - - ColumnLayout { - id: optionsSpace - - StatusRadioButton { - text: "WebEngine running" - checked: wc.sdk.webEngineLoader.active - enabled: false - } - - RowLayout { - id: optionsHeader - - Text { text: "projectId" } - Text { - readonly property string projectId: wc.controller.projectId - text: projectId.substring(0, 3) + "..." + projectId.substring(projectId.length - 3) - font.bold: true - } - } - StatusCheckBox { - id: hasActivePairingsCheckBox - text: "Has active pairings" - checked: settings.hasActivePairings - } - StatusCheckBox { - id: respondError - text: "Respond Error" - checked: false - } - - StatusBaseText { text: "Pairings History"; font.bold: true } - StatusButton { - text: "Clear" - onClicked: { pairingsModel.clear(); root.saveListModel(pairingsModel); } - } - Pairings { - id: pairingsView - - Layout.fillWidth: true - Layout.minimumWidth: count > 0 ? 400 : 0 - Layout.preferredHeight: contentHeight - Layout.maximumHeight: 300 - - onDisconnect: function(pairingTopic) { - wc.sdk.disconnectPairing(pairingTopic) - } - - model: ListModel { - id: pairingsModel - } - clip: true - } - - RowLayout { - StatusButton { - text: "Trigger Deep-Link" - onClicked: { - wc.controller.requestOpenWalletConnectPopup(deepLinkInput.text) - } - } - - StatusInput { - id: deepLinkInput - - Layout.preferredWidth: 300 - - placeholderText: "wc:a4f32854428af0f5b66...." - } - } - - // spacer - ColumnLayout {} - } - } - - - - Settings { - id: settings - - property bool hasActivePairings: hasActivePairingsCheckBox.checked - property string pairingsHistory: "" - } - - Component.onCompleted: { - loadListModel(pairingsModel) - } - - function saveListModel(model) { - var listArray = []; - for (var i = 0; i < model.count; i++) { - listArray.push(model.get(i)); - } - settings.pairingsHistory = JSON.stringify(listArray); - } - - function loadListModel(model) { - pairingsModel.clear(); - if (!settings.pairingsHistory) { - return; - } - var listArray = JSON.parse(settings.pairingsHistory); - listArray.forEach(function(entry) { - pairingsModel.append(entry); - }); - } -} - -// category: Popups diff --git a/storybook/qmlTests/tests/tst_ConnectedDappsButton.qml b/storybook/qmlTests/tests/tst_ConnectedDappsButton.qml new file mode 100644 index 0000000000..e524892a9d --- /dev/null +++ b/storybook/qmlTests/tests/tst_ConnectedDappsButton.qml @@ -0,0 +1,49 @@ +import QtQuick 2.15 +import QtTest 1.15 + +import QtQuick.Controls 2.15 + +import Storybook 1.0 + +import AppLayouts.Wallet.controls 1.0 + +Item { + id: root + width: 600 + height: 400 + + Component { + id: componentUnderTest + ConnectedDappsButton { + id: control + } + } + + TestCase { + name: "ConnectedDappsButton" + when: windowShown + + property ConnectedDappsButton controlUnderTest: null + + function init() { + controlUnderTest = createTemporaryObject(componentUnderTest, root) + } + + function test_ClickToOpenAndClosePopup() { + verify(!!controlUnderTest) + waitForRendering(controlUnderTest) + + mouseClick(controlUnderTest, Qt.LeftButton) + waitForRendering(controlUnderTest) + + let popup = findChild(controlUnderTest, "dappsPopup") + verify(!!popup) + verify(popup.opened) + + mouseClick(Overlay.overlay, Qt.LeftButton) + waitForRendering(controlUnderTest) + + verify(!popup.opened) + } + } +} diff --git a/ui/app/AppLayouts/Wallet/controls/ConnectedDappsButton.qml b/ui/app/AppLayouts/Wallet/controls/ConnectedDappsButton.qml index 901c1bc5cf..e46c6020db 100644 --- a/ui/app/AppLayouts/Wallet/controls/ConnectedDappsButton.qml +++ b/ui/app/AppLayouts/Wallet/controls/ConnectedDappsButton.qml @@ -15,6 +15,10 @@ StatusButton { signal connectDapp() + implicitHeight: 38 + + size: StatusBaseButton.Size.Small + borderColor: Theme.palette.directColor7 normalColor: Theme.palette.transparent hoverColor: Theme.palette.baseColor2 @@ -40,6 +44,9 @@ StatusButton { Popup { id: popup + + objectName: "dappsPopup" + contentWidth: root.menuWidth contentHeight: list.height modal: false diff --git a/ui/app/AppLayouts/Wallet/panels/WalletHeader.qml b/ui/app/AppLayouts/Wallet/panels/WalletHeader.qml index 8a9ff83617..7626fe6bed 100644 --- a/ui/app/AppLayouts/Wallet/panels/WalletHeader.qml +++ b/ui/app/AppLayouts/Wallet/panels/WalletHeader.qml @@ -75,11 +75,9 @@ Item { Layout.topMargin: 5 ConnectedDappsButton { - Layout.preferredHeight: 38 Layout.alignment: Qt.AlignTop spacing: 8 - size: StatusBaseButton.Size.Small visible: !root.walletStore.showSavedAddresses onConnectDapp: { diff --git a/ui/imports/shared/popups/walletconnect/sdk/README.md b/ui/imports/shared/popups/walletconnect/sdk/README.md index df7affb1b1..9599c2dbaa 100644 --- a/ui/imports/shared/popups/walletconnect/sdk/README.md +++ b/ui/imports/shared/popups/walletconnect/sdk/README.md @@ -1,10 +1,6 @@ # Wallet Connect Integration -## TODO - -- [ ] test namespaces implementation https://se-sdk-dapp.vercel.app/ - -### Design questions +## Questions - [ ] Do we report **disabled chains**? **Update session** in case of enabled/disabled chains? - [ ] User error workflow: retry?