From e58ae2c213aa1ef6edd49bb3a28c37a1be1d18e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Tinkl?= Date: Tue, 3 Sep 2024 14:57:07 +0200 Subject: [PATCH] feat: Add external link to download extension plugin - add a local popup with selection between "Status Connector" (external link to Chrome Store) or "Wallet Connect" (the old flow involving inputting the WC URI) - simplify DAppsListPopup to use StatusDropdown to reduce code duplication - adjust SB and QML tests Fixes #16111 --- storybook/pages/DAppsWorkflowPage.qml | 9 ++- storybook/pages/DappsComboBoxPage.qml | 18 +++-- .../qmlTests/tests/tst_DAppsWorkflow.qml | 5 ++ .../Wallet/controls/DappsComboBox.qml | 72 +++++++++++++++++-- ui/imports/assets/icons/walletconnect.svg | 1 + .../popups/walletconnect/ConnectDAppModal.qml | 2 +- .../popups/walletconnect/DAppsListPopup.qml | 45 ++---------- 7 files changed, 95 insertions(+), 57 deletions(-) create mode 100644 ui/imports/assets/icons/walletconnect.svg diff --git a/storybook/pages/DAppsWorkflowPage.qml b/storybook/pages/DAppsWorkflowPage.qml index 6ed3c04561..1686916411 100644 --- a/storybook/pages/DAppsWorkflowPage.qml +++ b/storybook/pages/DAppsWorkflowPage.qml @@ -8,7 +8,6 @@ import QtQml.Models 2.14 import StatusQ.Core 0.1 import StatusQ.Core.Backpressure 0.1 -import StatusQ.Core.Utils 0.1 import StatusQ.Controls 0.1 import StatusQ.Components 0.1 import StatusQ.Core.Theme 0.1 @@ -16,7 +15,7 @@ import StatusQ.Popups.Dialog 0.1 import StatusQ.Core.Utils 0.1 as SQUtils import Models 1.0 -import Storybook 1.0 +import Storybook 1.0 as StoryBook import AppLayouts.Wallet.controls 1.0 import AppLayouts.Wallet.services.dapps 1.0 @@ -79,7 +78,7 @@ Item { StatusBaseText { text: "projectId" } StatusBaseText { id: projectIdText - readonly property string projectId: SystemUtils.getEnvVar("WALLET_CONNECT_PROJECT_ID") + readonly property string projectId: StoryBook.SystemUtils.getEnvVar("WALLET_CONNECT_PROJECT_ID") text: SQUtils.Utils.elideText(projectId, 3) font.bold: true } @@ -410,7 +409,7 @@ Item { } } - walletRootStore: QObject { + walletRootStore: SQUtils.QObject { property var filteredFlatModel: SortFilterProxyModel { sourceModel: NetworksModel.flatNetworks filters: ValueFilter { roleName: "isTest"; value: settings.testNetworks; } @@ -442,7 +441,7 @@ Item { } - QObject { + SQUtils.QObject { id: d property int activeTestCase: noTestCase diff --git a/storybook/pages/DappsComboBoxPage.qml b/storybook/pages/DappsComboBoxPage.qml index 81c8f6d669..4785534f40 100644 --- a/storybook/pages/DappsComboBoxPage.qml +++ b/storybook/pages/DappsComboBoxPage.qml @@ -19,6 +19,8 @@ SplitView { anchors.horizontalCenter: parent.horizontalCenter model: emptyModelCheckbox.checked ? emptyModel : smallModelCheckbox.checked ? smallModel: dappsModel popup.visible: true + + onPairDapp: console.log("onPairDapp") } ListModel { @@ -100,16 +102,19 @@ SplitView { SplitView.fillHeight: true ColumnLayout { - CheckBox { - id: emptyModelCheckbox - text: "Empty model" - checked: false + RadioButton { + text: "Default model" + checked: true } - CheckBox { + RadioButton { + id: emptyModelCheckbox + text: "Empty model" + } + + RadioButton { id: smallModelCheckbox text: "Small model" - checked: false } } } @@ -118,3 +123,4 @@ SplitView { // category: Controls // https://www.figma.com/design/HrmZp1y4S77QJezRFRl6ku/dApp-Interactions---Milestone-1?node-id=130-31949&t=hnzB58fTnEnx2z84-0 +// https://www.figma.com/design/1OYKMzU6KTQHQAqDhojk0r/Status-connector?node-id=3216-5618&node-type=FRAME&t=CqsuoQHp1p5MOUt9-0 diff --git a/storybook/qmlTests/tests/tst_DAppsWorkflow.qml b/storybook/qmlTests/tests/tst_DAppsWorkflow.qml index 86ad778591..e3f218befc 100644 --- a/storybook/qmlTests/tests/tst_DAppsWorkflow.qml +++ b/storybook/qmlTests/tests/tst_DAppsWorkflow.qml @@ -807,6 +807,11 @@ Item { verify(pairWCReadySpy.count === 0, "expected NO pairWCReady signal to be emitted") mouseClick(connectButton) waitForRendering(controlUnderTest) + + const btnWalletConnect = findChild(controlUnderTest, "btnWalletConnect") + verify(!!btnWalletConnect) + mouseClick(btnWalletConnect) + verify(pairWCReadySpy.count === 1, "expected pairWCReady signal to be emitted") let pairWCModal = findChild(controlUnderTest, "pairWCModal") diff --git a/ui/app/AppLayouts/Wallet/controls/DappsComboBox.qml b/ui/app/AppLayouts/Wallet/controls/DappsComboBox.qml index 642b88dea8..09e0539805 100644 --- a/ui/app/AppLayouts/Wallet/controls/DappsComboBox.qml +++ b/ui/app/AppLayouts/Wallet/controls/DappsComboBox.qml @@ -1,8 +1,9 @@ import QtQuick 2.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 -import QtGraphicalEffects 1.15 +import QtQml.Models 2.15 +import utils 1.0 import shared.controls 1.0 import shared.popups.walletconnect 1.0 import shared.popups.walletconnect.controls 1.0 @@ -11,9 +12,9 @@ import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 import StatusQ.Controls 0.1 import StatusQ.Components 0.1 +import StatusQ.Popups.Dialog 0.1 import StatusQ.Components.private 0.1 as SQP - ComboBox { id: root @@ -71,8 +72,8 @@ ComboBox { delegateModel: root.delegateModel - onPairWCDapp: { - root.pairDapp() + onConnectDapp: { + dappConnectSelectComponent.createObject(root).open() this.close() } @@ -81,6 +82,69 @@ ComboBox { } } + Component { + id: dappConnectSelectComponent + StatusDialog { + id: dappConnectSelect + width: 480 + topPadding: Style.current.bigPadding + leftPadding: Style.current.padding + rightPadding: Style.current.padding + bottomPadding: 4 + destroyOnClose: true + + title: qsTr("Connect a dApp") + footer: StatusDialogFooter { + rightButtons: ObjectModel { + StatusButton { + text: qsTr("Cancel") + onClicked: dappConnectSelect.close() + } + } + } + + contentItem: ColumnLayout { + StatusBaseText { + Layout.fillWidth: true + Layout.leftMargin: Style.current.padding + color: Theme.palette.baseColor1 + text: qsTr("How would you like to connect?") + } + StatusListItem { + title: "Status Connector" + asset.name: Style.png("status-logo") + asset.isImage: true + components: [ + StatusIcon { + icon: "external-link" + color: Theme.palette.baseColor1 + } + ] + onClicked: { + dappConnectSelect.close() + Global.openLink("https://chromewebstore.google.com/detail/a-wallet-connector-by-sta/kahehnbpamjplefhpkhafinaodkkenpg") + } + } + StatusListItem { + objectName: "btnWalletConnect" + title: "Wallet Connect" + asset.name: Style.svg("walletconnect") + asset.isImage: true + components: [ + StatusIcon { + icon: "next" + color: Theme.palette.baseColor1 + } + ] + onClicked: { + dappConnectSelect.close() + root.pairDapp() + } + } + } + } + } + StatusToolTip { id: tooltip objectName: "dappTooltip" diff --git a/ui/imports/assets/icons/walletconnect.svg b/ui/imports/assets/icons/walletconnect.svg new file mode 100644 index 0000000000..d90457adfd --- /dev/null +++ b/ui/imports/assets/icons/walletconnect.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui/imports/shared/popups/walletconnect/ConnectDAppModal.qml b/ui/imports/shared/popups/walletconnect/ConnectDAppModal.qml index 92b29790ef..7e5a8e346e 100644 --- a/ui/imports/shared/popups/walletconnect/ConnectDAppModal.qml +++ b/ui/imports/shared/popups/walletconnect/ConnectDAppModal.qml @@ -157,7 +157,7 @@ StatusDialog { footer: StatusDialogFooter { id: footer rightButtons: ObjectModel { - StatusButton { + StatusFlatButton { objectName: "rejectButton" height: 44 text: qsTr("Reject") diff --git a/ui/imports/shared/popups/walletconnect/DAppsListPopup.qml b/ui/imports/shared/popups/walletconnect/DAppsListPopup.qml index 11b8fe6d56..d7a2581604 100644 --- a/ui/imports/shared/popups/walletconnect/DAppsListPopup.qml +++ b/ui/imports/shared/popups/walletconnect/DAppsListPopup.qml @@ -1,9 +1,7 @@ import QtQuick 2.15 -import QtQml 2.15 import QtQuick.Controls 2.15 import QtQml.Models 2.15 import QtQuick.Layouts 1.15 -import QtGraphicalEffects 1.15 import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 @@ -14,52 +12,19 @@ import shared.controls 1.0 import utils 1.0 -Popup { +StatusDropdown { id: root objectName: "dappsPopup" required property DelegateModel delegateModel - signal pairWCDapp() + signal connectDapp() width: 312 padding: 0 modal: false - closePolicy: Popup.CloseOnEscape | Popup.CloseOnOutsideClick | Popup.CloseOnPressOutside - - background: Rectangle { - id: backgroundContent - - color: Theme.palette.statusMenu.backgroundColor - radius: 8 - layer.enabled: true - layer.effect: DropShadow { - anchors.fill: parent - source: backgroundContent - horizontalOffset: 0 - verticalOffset: 4 - radius: 12 - samples: 25 - spread: 0.2 - color: Theme.palette.dropShadow - } - } - - // workaround for https://bugreports.qt.io/browse/QTBUG-87804 - Binding on margins { - id: workaroundBinding - - when: false - restoreMode: Binding.RestoreBindingOrValue - } - - onImplicitContentHeightChanged: { - workaroundBinding.value = root.margins + 1 - workaroundBinding.when = true - workaroundBinding.when = false - } contentItem: ColumnLayout { id: mainLayout @@ -152,10 +117,8 @@ Popup { size: StatusButton.Size.Small - text: qsTr("Connect a dApp via WalletConnect") - onClicked: { - root.pairWCDapp() - } + text: qsTr("Connect a dApp") + onClicked: root.connectDapp() } } }