From b005a5606e365cd368c8c10977b8384070963d89 Mon Sep 17 00:00:00 2001 From: Roman Chornii Date: Mon, 1 Jul 2024 14:34:30 +0300 Subject: [PATCH] feat(DAppsCopyUriInstructions): implemented popup with the instructions (#15354) how to copy URI of DApps into Status app. Closes #14677 --- .../pages/DAppsUriCopyInstructionsPage.qml | 26 ++++++ storybook/pages/DAppsWorkflowPage.qml | 11 ++- ui/StatusQ/src/assets.qrc | 1 + .../src/assets/img/icons/walletconnect.svg | 1 + ...eInstruction.qml => DecoratedListItem.qml} | 16 ++++ .../GetSyncCodeDesktopInstructions.qml | 15 ++-- .../GetSyncCodeMobileInstructions.qml | 15 ++-- ui/imports/shared/controls/qmldir | 1 + ui/imports/shared/popups/qmldir | 2 +- .../DAppsUriCopyInstructionsPopup.qml | 79 +++++++++++++++++++ .../popups/walletconnect/PairWCModal.qml | 11 ++- ui/imports/shared/popups/walletconnect/qmldir | 3 +- 12 files changed, 163 insertions(+), 18 deletions(-) create mode 100644 storybook/pages/DAppsUriCopyInstructionsPage.qml create mode 100644 ui/StatusQ/src/assets/img/icons/walletconnect.svg rename ui/imports/shared/controls/{GetSyncCodeInstruction.qml => DecoratedListItem.qml} (69%) create mode 100644 ui/imports/shared/popups/walletconnect/DAppsUriCopyInstructionsPopup.qml diff --git a/storybook/pages/DAppsUriCopyInstructionsPage.qml b/storybook/pages/DAppsUriCopyInstructionsPage.qml new file mode 100644 index 0000000000..0381e9675d --- /dev/null +++ b/storybook/pages/DAppsUriCopyInstructionsPage.qml @@ -0,0 +1,26 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 + +import Storybook 1.0 +import Models 1.0 + +import shared.popups.walletconnect 1.0 + +SplitView { + + Rectangle { + anchors.fill: parent + color: "lightgray" + } + + DAppsUriCopyInstructionsPopup { + visible: true + modal: false + anchors.centerIn: parent + destroyOnClose: false + } +} + +// category: Popups +// https://www.figma.com/design/HrmZp1y4S77QJezRFRl6ku/dApp-Interactions---Milestone-1?node-id=3649-30334&t=r8RYxCglhi5DYQos-0 diff --git a/storybook/pages/DAppsWorkflowPage.qml b/storybook/pages/DAppsWorkflowPage.qml index 7f6b259d3b..a544cd36a2 100644 --- a/storybook/pages/DAppsWorkflowPage.qml +++ b/storybook/pages/DAppsWorkflowPage.qml @@ -25,12 +25,20 @@ import SortFilterProxyModel 0.2 import AppLayouts.Wallet.panels 1.0 import AppLayouts.Profile.stores 1.0 -import utils 1.0 +import mainui 1.0 import shared.stores 1.0 +import utils 1.0 Item { id: root + // Needed for DAppsWorkflow->PairWCModal to open its instructions popup + Popups { + popupParent: root + rootStore: QtObject {} + communityTokensStore: QtObject {} + } + SplitView { anchors.fill: parent @@ -371,3 +379,4 @@ Item { } // category: Wallet +// https://www.figma.com/design/HrmZp1y4S77QJezRFRl6ku/dApp-Interactions---Milestone-1?node-id=3649-30334&t=t5qqtR3RITR4yCOx-0 diff --git a/ui/StatusQ/src/assets.qrc b/ui/StatusQ/src/assets.qrc index 166f3f7d36..d0b6dc3f0b 100644 --- a/ui/StatusQ/src/assets.qrc +++ b/ui/StatusQ/src/assets.qrc @@ -10419,5 +10419,6 @@ assets/img/icons/tiny/copy.svg assets/img/icons/tiny/profile.svg assets/img/icons/tiny/opensea.svg + assets/img/icons/walletconnect.svg diff --git a/ui/StatusQ/src/assets/img/icons/walletconnect.svg b/ui/StatusQ/src/assets/img/icons/walletconnect.svg new file mode 100644 index 0000000000..d90457adfd --- /dev/null +++ b/ui/StatusQ/src/assets/img/icons/walletconnect.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui/imports/shared/controls/GetSyncCodeInstruction.qml b/ui/imports/shared/controls/DecoratedListItem.qml similarity index 69% rename from ui/imports/shared/controls/GetSyncCodeInstruction.qml rename to ui/imports/shared/controls/DecoratedListItem.qml index 053b434f32..5a8ade3f75 100644 --- a/ui/imports/shared/controls/GetSyncCodeInstruction.qml +++ b/ui/imports/shared/controls/DecoratedListItem.qml @@ -14,10 +14,15 @@ RowLayout { property string text1: "" property color text1Color: Theme.palette.baseColor1 property string icon: "" + property alias asset: icon1.asset property string text2: "" property string text2Color: "" property string text3: "" property color text3Color: Theme.palette.baseColor1 + property string text4: "" + property color text4Color: Theme.palette.baseColor1 + property string text5: "" + property color text5Color: Theme.palette.baseColor1 StatusBaseText { visible: text @@ -30,6 +35,7 @@ RowLayout { text: root.text1 } StatusRoundIcon { + id: icon1 visible: !!root.icon asset.name: root.icon } @@ -43,4 +49,14 @@ RowLayout { color: root.text3Color text: root.text3 } + StatusBaseText { + visible: text + color: root.text4Color + text: root.text4 + } + StatusBaseText { + visible: text + color: root.text5Color + text: root.text5 + } } diff --git a/ui/imports/shared/controls/GetSyncCodeDesktopInstructions.qml b/ui/imports/shared/controls/GetSyncCodeDesktopInstructions.qml index 6b86bb4eda..3284528764 100644 --- a/ui/imports/shared/controls/GetSyncCodeDesktopInstructions.qml +++ b/ui/imports/shared/controls/GetSyncCodeDesktopInstructions.qml @@ -2,6 +2,7 @@ import QtQuick 2.15 import StatusQ.Core.Theme 0.1 +import shared.controls 1.0 import shared.views 1.0 Column { @@ -12,12 +13,12 @@ Column { spacing: 4 - GetSyncCodeInstruction { + DecoratedListItem { order: "1." text1: qsTr("Ensure both devices are on the same network") } - GetSyncCodeInstruction { + DecoratedListItem { order: "2." text1: { if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) { @@ -27,7 +28,7 @@ Column { } } - GetSyncCodeInstruction { + DecoratedListItem { order: "3." text1: qsTr("Open") icon: "settings" @@ -40,7 +41,7 @@ Column { text2Color: Theme.palette.directColor1 } - GetSyncCodeInstruction { + DecoratedListItem { order: "4." text1: { if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) { @@ -63,7 +64,7 @@ Column { text2Color: Theme.palette.directColor1 } - GetSyncCodeInstruction { + DecoratedListItem { order: "5." text1: { if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) { @@ -103,7 +104,7 @@ Column { } } - GetSyncCodeInstruction { + DecoratedListItem { order: "6." text1: { if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) { @@ -135,7 +136,7 @@ Column { } } - GetSyncCodeInstruction { + DecoratedListItem { order: { if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) { if (root.type === SyncingCodeInstructions.Type.EncryptedKey) { diff --git a/ui/imports/shared/controls/GetSyncCodeMobileInstructions.qml b/ui/imports/shared/controls/GetSyncCodeMobileInstructions.qml index feb5f8121e..4cea57eb82 100644 --- a/ui/imports/shared/controls/GetSyncCodeMobileInstructions.qml +++ b/ui/imports/shared/controls/GetSyncCodeMobileInstructions.qml @@ -2,6 +2,7 @@ import QtQuick 2.15 import StatusQ.Core.Theme 0.1 +import shared.controls 1.0 import shared.views 1.0 Column { @@ -12,12 +13,12 @@ Column { spacing: 4 - GetSyncCodeInstruction { + DecoratedListItem { order: "1." text1: qsTr("Ensure both devices are on the same network") } - GetSyncCodeInstruction { + DecoratedListItem { order: "2." text1: { if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) { @@ -27,7 +28,7 @@ Column { } } - GetSyncCodeInstruction { + DecoratedListItem { order: "3." text1: qsTr("Open your") icon: { @@ -45,7 +46,7 @@ Column { text2Color: Theme.palette.directColor1 } - GetSyncCodeInstruction { + DecoratedListItem { order: "4." text1: { if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) { @@ -68,7 +69,7 @@ Column { text2Color: Theme.palette.directColor1 } - GetSyncCodeInstruction { + DecoratedListItem { order: "5." text1: { if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) { @@ -108,7 +109,7 @@ Column { } } - GetSyncCodeInstruction { + DecoratedListItem { order: "6." text1: { if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) { @@ -140,7 +141,7 @@ Column { } } - GetSyncCodeInstruction { + DecoratedListItem { order: { if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) { if (root.type === SyncingCodeInstructions.Type.EncryptedKey) { diff --git a/ui/imports/shared/controls/qmldir b/ui/imports/shared/controls/qmldir index c4c79fdf29..e11523797e 100644 --- a/ui/imports/shared/controls/qmldir +++ b/ui/imports/shared/controls/qmldir @@ -56,3 +56,4 @@ MockedKeycardStateSelector 1.0 MockedKeycardStateSelector.qml AssetsSectionDelegate 1.0 AssetsSectionDelegate.qml ExpandableTag 1.0 ExpandableTag.qml Padding 1.0 Padding.qml +DecoratedListItem 1.0 DecoratedListItem.qml diff --git a/ui/imports/shared/popups/qmldir b/ui/imports/shared/popups/qmldir index 30b0edf121..49035c8e0b 100644 --- a/ui/imports/shared/popups/qmldir +++ b/ui/imports/shared/popups/qmldir @@ -32,4 +32,4 @@ SettingsDirtyToastMessage 1.0 SettingsDirtyToastMessage.qml UnblockContactConfirmationDialog 1.0 UnblockContactConfirmationDialog.qml UserAgreementPopup 1.0 UserAgreementPopup.qml UserStatusContextMenu 1.0 UserStatusContextMenu.qml -ImageContextMenu 1.0 ImageContextMenu.qml \ No newline at end of file +ImageContextMenu 1.0 ImageContextMenu.qml diff --git a/ui/imports/shared/popups/walletconnect/DAppsUriCopyInstructionsPopup.qml b/ui/imports/shared/popups/walletconnect/DAppsUriCopyInstructionsPopup.qml new file mode 100644 index 0000000000..681cf5cfcb --- /dev/null +++ b/ui/imports/shared/popups/walletconnect/DAppsUriCopyInstructionsPopup.qml @@ -0,0 +1,79 @@ +import QtQuick 2.15 +import QtQuick.Layouts 1.15 + +import StatusQ 0.1 +import StatusQ.Core.Theme 0.1 +import StatusQ.Popups 0.1 +import StatusQ.Popups.Dialog 0.1 + +import utils 1.0 +import shared.controls 1.0 + +StatusDialog { + width: 440 + title: qsTr("How to copy the dApp URI") + footer: null + horizontalPadding: 42 + verticalPadding: 32 + + destroyOnClose: true + + ColumnLayout { + spacing: 4 + + Layout.leftMargin: Style.current.padding + Layout.rightMargin: Style.current.padding + Layout.preferredHeight: 348 + + DecoratedListItem { + Layout.preferredHeight: 40 + order: "1. " + text1: qsTr("Navigate to a dApp with WalletConnect support") + } + + DecoratedListItem { + Layout.preferredHeight: 40 + order: "2. " + text1: qsTr("Click the") + text2: qsTr("Connect") + text2Color: Theme.palette.directColor1 + text3: qsTr(" or ") + text4: qsTr("Connect wallet") + text4Color: Theme.palette.directColor1 + text5: qsTr("button") + } + + DecoratedListItem { + Layout.preferredHeight: 40 + order: "3. " + text1: qsTr("Select") + + icon: "walletconnect" + asset.color: "transparent" + asset.bgColor: "transparent" + width: 40 + height: 40 + asset.width: 40 + asset.height: 40 + + text3: qsTr("WalletConnect") + text3Color: Theme.palette.directColor1 + text4: qsTr(" from the menu") + } + + DecoratedListItem { + Layout.preferredHeight: 40 + order: "4. " + text1: qsTr("Click the") + icon: "tiny/copy" + text3: qsTr("button") + } + + DecoratedListItem { + Layout.preferredHeight: 40 + order: "5. " + text1: qsTr("Head back to Status and paste the URI") + } + + } +} diff --git a/ui/imports/shared/popups/walletconnect/PairWCModal.qml b/ui/imports/shared/popups/walletconnect/PairWCModal.qml index 12bac9a20d..80ed7c8bcf 100644 --- a/ui/imports/shared/popups/walletconnect/PairWCModal.qml +++ b/ui/imports/shared/popups/walletconnect/PairWCModal.qml @@ -4,11 +4,15 @@ import QtQuick.Layouts 1.15 import QtQml.Models 2.14 import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 import StatusQ.Popups.Dialog 0.1 import StatusQ.Controls 0.1 import utils 1.0 +import shared.controls 1.0 +import shared.popups 1.0 + import "PairWCModal" StatusDialog { @@ -52,7 +56,12 @@ StatusDialog { normalColor: linkColor onClicked: { - console.warn("TODO: open help...") + Global.openPopup(uriCopyInstructionsPopup) + } + + Component { + id: uriCopyInstructionsPopup + DAppsUriCopyInstructionsPopup{} } } } diff --git a/ui/imports/shared/popups/walletconnect/qmldir b/ui/imports/shared/popups/walletconnect/qmldir index 57b65d4976..ddc397c8c5 100644 --- a/ui/imports/shared/popups/walletconnect/qmldir +++ b/ui/imports/shared/popups/walletconnect/qmldir @@ -1,4 +1,5 @@ PairWCModal 1.0 PairWCModal.qml DAppsListPopup 1.0 DAppsListPopup.qml ConnectDAppModal 1.0 ConnectDAppModal.qml -DAppRequestModal 1.0 DAppRequestModal.qml \ No newline at end of file +DAppRequestModal 1.0 DAppRequestModal.qml +DAppsUriCopyInstructionsPopup 1.0 DAppsUriCopyInstructionsPopup.qml