status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

how to copy URI of DApps into Status app.
Closes #14677
This commit is contained in:
Roman Chornii 2024-07-01 14:34:30 +03:00 committed by GitHub
parent cd37994e6b
commit b005a5606e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 163 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
storybook/pages/DAppsUriCopyInstructionsPage.qml Normal file
View File

@ -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

11
storybook/pages/DAppsWorkflowPage.qml
View File

@ -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

1
ui/StatusQ/src/assets.qrc
View File

@ -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>

1
ui/StatusQ/src/assets/img/icons/walletconnect.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

16
ui/imports/shared/controls/GetSyncCodeInstruction.qml → ui/imports/shared/controls/DecoratedListItem.qml
View File

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

15
ui/imports/shared/controls/GetSyncCodeDesktopInstructions.qml
View File

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

15
ui/imports/shared/controls/GetSyncCodeMobileInstructions.qml
View File

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

1
ui/imports/shared/controls/qmldir
View File

@ -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

79
ui/imports/shared/popups/walletconnect/DAppsUriCopyInstructionsPopup.qml Normal file
View File

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

11
ui/imports/shared/popups/walletconnect/PairWCModal.qml
View File

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

1
ui/imports/shared/popups/walletconnect/qmldir
View File

@ -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