From c4d930ef8815f438a4ab860d839e18267c52c876 Mon Sep 17 00:00:00 2001 From: Roman Chornii Date: Mon, 15 Jul 2024 12:23:35 +0300 Subject: [PATCH] fix(dapps) fail to process a transaction if missing usual fields (#15481) Updates: #15189 Co-authored-by: Stefan --- .../pages/DAppConfirmDisconnectPopupPage.qml | 29 +++ .../Wallet/panels/DAppsWorkflow.qml | 35 ++- .../services/dapps/WalletConnectService.qml | 6 +- .../DAppConfirmDisconnectPopup.qml | 62 +++++ .../popups/walletconnect/assets/sign.svg | 5 - .../walletconnect/panels/IntentionPanel.qml | 222 +++++++++--------- ui/imports/shared/popups/walletconnect/qmldir | 1 + 7 files changed, 243 insertions(+), 117 deletions(-) create mode 100644 storybook/pages/DAppConfirmDisconnectPopupPage.qml create mode 100644 ui/imports/shared/popups/walletconnect/DAppConfirmDisconnectPopup.qml delete mode 100644 ui/imports/shared/popups/walletconnect/assets/sign.svg diff --git a/storybook/pages/DAppConfirmDisconnectPopupPage.qml b/storybook/pages/DAppConfirmDisconnectPopupPage.qml new file mode 100644 index 0000000000..f36ad76b4e --- /dev/null +++ b/storybook/pages/DAppConfirmDisconnectPopupPage.qml @@ -0,0 +1,29 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import Qt.labs.settings 1.0 + +import Models 1.0 +import Storybook 1.0 + +import shared.popups.walletconnect 1.0 + + +Item { + id: root + + DAppConfirmDisconnectPopup { + anchors.centerIn: parent + visible: true + + dappIcon: "https://opensea.io/static/images/logos/opensea-logo.svg" + dappUrl: "opensea.io" + dappName: "OpenSea" + + destroyOnClose: false + + } +} + +// category: Popups +// https://www.figma.com/design/HrmZp1y4S77QJezRFRl6ku/dApp-Interactions---Milestone-1?node-id=3620-39188&t=py67JrptsxbHYMHW-0 diff --git a/ui/app/AppLayouts/Wallet/panels/DAppsWorkflow.qml b/ui/app/AppLayouts/Wallet/panels/DAppsWorkflow.qml index 0708def787..7d7937cf1e 100644 --- a/ui/app/AppLayouts/Wallet/panels/DAppsWorkflow.qml +++ b/ui/app/AppLayouts/Wallet/panels/DAppsWorkflow.qml @@ -31,7 +31,40 @@ DappsComboBox { } onDisconnectDapp: (dappUrl) => { - root.wcService.disconnectDapp(dappUrl) + disconnectdAppDialogLoader.dAppUrl = dappUrl + disconnectdAppDialogLoader.active = true + } + + Loader { + id: disconnectdAppDialogLoader + + property string dAppUrl + + active: false + + onLoaded: { + const dApp = wcService.getDApp(dAppUrl); + if (dApp) { + item.dappName = dApp.name; + item.dappIcon = dApp.iconUrl; + item.dappUrl = disconnectdAppDialogLoader.dAppUrl; + } + + item.open(); + } + + sourceComponent: DAppConfirmDisconnectPopup { + + visible: true + + onClosed: { + disconnectdAppDialogLoader.active = false + } + + onAccepted: { + root.wcService.disconnectDapp(dappUrl) + } + } } Loader { diff --git a/ui/app/AppLayouts/Wallet/services/dapps/WalletConnectService.qml b/ui/app/AppLayouts/Wallet/services/dapps/WalletConnectService.qml index b607cce9ab..851faceb36 100644 --- a/ui/app/AppLayouts/Wallet/services/dapps/WalletConnectService.qml +++ b/ui/app/AppLayouts/Wallet/services/dapps/WalletConnectService.qml @@ -119,6 +119,10 @@ QObject { }); } + function getDApp(dAppUrl) { + return ModelUtils.getByKey(dappsModel, "url", dAppUrl); + } + signal connectDApp(var dappChains, var sessionProposal, var approvedNamespaces) signal approveSessionResult(var session, var error) signal sessionRequest(SessionRequestResolved request) @@ -263,4 +267,4 @@ QObject { d.reportPairErrorState(Pairing.errors.unknownError) } } -} \ No newline at end of file +} diff --git a/ui/imports/shared/popups/walletconnect/DAppConfirmDisconnectPopup.qml b/ui/imports/shared/popups/walletconnect/DAppConfirmDisconnectPopup.qml new file mode 100644 index 0000000000..aeec642b98 --- /dev/null +++ b/ui/imports/shared/popups/walletconnect/DAppConfirmDisconnectPopup.qml @@ -0,0 +1,62 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 + +import QtQml.Models 2.15 + +import StatusQ.Controls 0.1 +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 +import StatusQ.Core.Utils 0.1 +import StatusQ.Components 0.1 +import StatusQ.Popups.Dialog 0.1 + +StatusDialog { + id: root + + objectName: "dappConfirmDisconnectPopup" + + property string dappName + property url dappIcon + property string dappUrl + + implicitWidth: 640 + + contentItem: StatusBaseText { + text: qsTr("Are you sure you want to disconnect %1 from all accounts?").arg(StringUtils.extractDomainFromLink(dappUrl)) + + wrapMode: Text.WrapAnywhere + } + + header: StatusDialogHeader { + leftComponent: StatusRoundedImage { + height: 40 + width: height + + image.source: root.dappIcon + } + headline.title: qsTr("Disconnect %1").arg(root.dappName) + headline.subtitle: StringUtils.extractDomainFromLink(root.dappUrl) + actions.closeButton.visible: true + actions.closeButton.onClicked: root.close() + } + + footer: StatusDialogFooter { + spacing: 16 + rightButtons: ObjectModel { + StatusFlatButton { + text: qsTr("Cancel") + onClicked: root.reject(); + } + StatusButton { + type: StatusButton.Danger + text: qsTr("Disconnect dApp") + icon.name: "disconnect" + onClicked: { + root.accepted(); + root.close(); + } + } + } + } +} diff --git a/ui/imports/shared/popups/walletconnect/assets/sign.svg b/ui/imports/shared/popups/walletconnect/assets/sign.svg deleted file mode 100644 index 98927a935c..0000000000 --- a/ui/imports/shared/popups/walletconnect/assets/sign.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/ui/imports/shared/popups/walletconnect/panels/IntentionPanel.qml b/ui/imports/shared/popups/walletconnect/panels/IntentionPanel.qml index f3d4468e23..3d4f08535f 100644 --- a/ui/imports/shared/popups/walletconnect/panels/IntentionPanel.qml +++ b/ui/imports/shared/popups/walletconnect/panels/IntentionPanel.qml @@ -1,110 +1,112 @@ -import QtQuick 2.15 -import QtQuick.Layouts 1.15 - -import StatusQ.Components 0.1 -import StatusQ.Core 0.1 -import StatusQ.Core.Theme 0.1 - -ColumnLayout { - id: root - - spacing: 8 - - required property string dappName - required property url dappIcon - required property var account - - property string userDisplayNaming - - // Icons - Item { - Layout.fillWidth: true - Layout.preferredHeight: 40 - Layout.alignment: Qt.AlignHCenter - Layout.bottomMargin: 8 - - StatusRoundedImage { - width: height - height: parent.height - - anchors.horizontalCenter: parent.horizontalCenter - anchors.horizontalCenterOffset: -16 - anchors.verticalCenter: parent.verticalCenter - - image.source: root.dappIcon - } - StatusRoundIcon { - anchors.horizontalCenter: parent.horizontalCenter - anchors.horizontalCenterOffset: 16 - anchors.verticalCenter: parent.verticalCenter - - asset: StatusAssetSettings { - width: 24 - height: 24 - color: Theme.palette.primaryColor1 - bgWidth: 40 - bgHeight: 40 - bgColor: Theme.palette.desktopBlue10 - bgRadius: bgWidth / 2 - bgBorderWidth: 2 - bgBorderColor: Theme.palette.statusAppLayout.backgroundColor - source: "assets/sign.svg" - } - } - } - - // Names and intentions - StatusBaseText { - text: qsTr("%1 wants you to %2 with %3").arg(dappName).arg(root.userDisplayNaming).arg(account.name) - - Layout.preferredWidth: 400 - Layout.alignment: Qt.AlignHCenter - - font.pixelSize: 15 - font.weight: Font.DemiBold - - wrapMode: Text.WordWrap - horizontalAlignment: Text.AlignHCenter - } - - // TODO #14762: externalize as a InfoPill and merge base implementation with - // the existing IssuePill reusable component - Rectangle { - Layout.preferredWidth: operationStatusLayout.implicitWidth + 24 - Layout.preferredHeight: operationStatusLayout.implicitHeight + 14 - - Layout.alignment: Qt.AlignHCenter - - visible: true - - border.color: Theme.palette.successColor2 - border.width: 1 - color: "transparent" - radius: height / 2 - - RowLayout { - id: operationStatusLayout - - spacing: 8 - - anchors.centerIn: parent - - StatusIcon { - Layout.preferredWidth: 16 - Layout.preferredHeight: 16 - - visible: true - - color: Theme.palette.directColor1 - icon: "info" - } - - StatusBaseText { - text: qsTr("Only sign if you trust the dApp") - - font.pixelSize: 12 - color: Theme.palette.directColor1 - } - } - } -} +import QtQuick 2.15 +import QtQuick.Layouts 1.15 + +import StatusQ.Components 0.1 +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 + +import utils 1.0 + +ColumnLayout { + id: root + + spacing: 8 + + required property string dappName + required property url dappIcon + required property var account + + property string userDisplayNaming + + // Icons + Item { + Layout.fillWidth: true + Layout.preferredHeight: 40 + Layout.alignment: Qt.AlignHCenter + Layout.bottomMargin: 8 + + StatusRoundedImage { + width: height + height: parent.height + + anchors.horizontalCenter: parent.horizontalCenter + anchors.horizontalCenterOffset: -16 + anchors.verticalCenter: parent.verticalCenter + + image.source: root.dappIcon + } + StatusRoundIcon { + anchors.horizontalCenter: parent.horizontalCenter + anchors.horizontalCenterOffset: 16 + anchors.verticalCenter: parent.verticalCenter + + asset: StatusAssetSettings { + width: 24 + height: 24 + color: Theme.palette.primaryColor1 + bgWidth: 40 + bgHeight: 40 + bgColor: Theme.palette.desktopBlue10 + bgRadius: bgWidth / 2 + bgBorderWidth: 2 + bgBorderColor: Theme.palette.statusAppLayout.backgroundColor + source: Style.svg("sign") + } + } + } + + // Names and intentions + StatusBaseText { + text: qsTr("%1 wants you to %2 with %3").arg(dappName).arg(root.userDisplayNaming).arg(account.name) + + Layout.preferredWidth: 400 + Layout.alignment: Qt.AlignHCenter + + font.pixelSize: 15 + font.weight: Font.DemiBold + + wrapMode: Text.WordWrap + horizontalAlignment: Text.AlignHCenter + } + + // TODO #14762: externalize as a InfoPill and merge base implementation with + // the existing IssuePill reusable component + Rectangle { + Layout.preferredWidth: operationStatusLayout.implicitWidth + 24 + Layout.preferredHeight: operationStatusLayout.implicitHeight + 14 + + Layout.alignment: Qt.AlignHCenter + + visible: true + + border.color: Theme.palette.successColor2 + border.width: 1 + color: "transparent" + radius: height / 2 + + RowLayout { + id: operationStatusLayout + + spacing: 8 + + anchors.centerIn: parent + + StatusIcon { + Layout.preferredWidth: 16 + Layout.preferredHeight: 16 + + visible: true + + color: Theme.palette.directColor1 + icon: "info" + } + + StatusBaseText { + text: qsTr("Only sign if you trust the dApp") + + font.pixelSize: 12 + color: Theme.palette.directColor1 + } + } + } +} diff --git a/ui/imports/shared/popups/walletconnect/qmldir b/ui/imports/shared/popups/walletconnect/qmldir index 8086638a23..6c20c6654d 100644 --- a/ui/imports/shared/popups/walletconnect/qmldir +++ b/ui/imports/shared/popups/walletconnect/qmldir @@ -5,3 +5,4 @@ ConnectionStatusTag 1.0 ConnectionStatusTag.qml DAppSignRequestModal 1.0 DAppSignRequestModal.qml DAppsUriCopyInstructionsPopup 1.0 DAppsUriCopyInstructionsPopup.qml RoundImageWithBadge 1.0 RoundImageWithBadge.qml +DAppConfirmDisconnectPopup 1.0 DAppConfirmDisconnectPopup.qml