feat(DAppsCopyUriInstructions): implemented popup with the instructions (#15354)

how to copy URI of DApps into Status app.
Closes #14677

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

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

ui/StatusQ/src/assets.qrc

@@ -10419,5 +10419,6 @@
         <file>assets/img/icons/tiny/copy.svg</file>
         <file>assets/img/icons/tiny/profile.svg</file>
         <file>assets/img/icons/tiny/opensea.svg</file>
+        <file>assets/img/icons/walletconnect.svg</file>
     </qresource>
 </RCC>

ui/StatusQ/src/assets/img/icons/walletconnect.svg

@@ -0,0 +1 @@
+<svg fill="none" height="400" viewBox="0 0 400 400" width="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h400v400h-400z"/></clipPath><g clip-path="url(#a)"><circle cx="200" cy="200" fill="#3396ff" r="199.5" stroke="#66b1ff"/><path d="m122.519 148.965c42.791-41.729 112.171-41.729 154.962 0l5.15 5.022c2.14 2.086 2.14 5.469 0 7.555l-17.617 17.18c-1.07 1.043-2.804 1.043-3.874 0l-7.087-6.911c-29.853-29.111-78.253-29.111-108.106 0l-7.59 7.401c-1.07 1.043-2.804 1.043-3.874 0l-17.617-17.18c-2.14-2.086-2.14-5.469 0-7.555zm191.397 35.529 15.679 15.29c2.14 2.086 2.14 5.469 0 7.555l-70.7 68.944c-2.139 2.087-5.608 2.087-7.748 0l-50.178-48.931c-.535-.522-1.402-.522-1.937 0l-50.178 48.931c-2.139 2.087-5.608 2.087-7.748 0l-70.7015-68.945c-2.1396-2.086-2.1396-5.469 0-7.555l15.6795-15.29c2.1396-2.086 5.6085-2.086 7.7481 0l50.1789 48.932c.535.522 1.402.522 1.937 0l50.177-48.932c2.139-2.087 5.608-2.087 7.748 0l50.179 48.932c.535.522 1.402.522 1.937 0l50.179-48.931c2.139-2.087 5.608-2.087 7.748 0z" fill="#fff"/></g></svg>

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
+    }
 }

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) {

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) {

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

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")
+        }
+
+    }
+}

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{}
             }
         }
     }

ui/imports/shared/popups/walletconnect/qmldir

@@ -2,3 +2,4 @@ PairWCModal 1.0 PairWCModal.qml
 DAppsListPopup 1.0 DAppsListPopup.qml
 ConnectDAppModal 1.0 ConnectDAppModal.qml
 DAppRequestModal 1.0 DAppRequestModal.qml
+DAppsUriCopyInstructionsPopup 1.0 DAppsUriCopyInstructionsPopup.qml