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

fix(@desktop/wallet): QR dialog - how to generate the QR on the other synced device instructions (point 5) 

Point 5 of #11968
This commit is contained in:
Sale Djenic 2023-08-23 09:09:16 +02:00 committed by saledjenic
parent 228de3715b
commit 70343c4b4f
8 changed files with 359 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,5 @@
import QtQuick 2.0
import QtQuick.Layouts 1.12
import QtQuick 2.15
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import shared.views 1.0
@ -11,134 +7,159 @@ import shared.views 1.0
Column {
id: root
property int type: SyncingCodeInstructions.Type.AppSync
property int purpose: SyncingCodeInstructions.Purpose.AppSync
property int type: SyncingCodeInstructions.Type.QRCode
spacing: 4
QtObject {
id: d
readonly property int listItemHeight: 40
}
RowLayout {
height: d.listItemHeight
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
font.pixelSize: 15
color: Theme.palette.baseColor1
text: qsTr("1. Open Status App on your desktop device")
}
}
RowLayout {
height: d.listItemHeight
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
font.pixelSize: 15
color: Theme.palette.baseColor1
text: qsTr("2. Open")
}
StatusRoundIcon {
asset.name: "settings"
}
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
font.pixelSize: 15
color: Theme.palette.directColor1
text: qsTr("Settings")
}
}
RowLayout {
height: d.listItemHeight
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
font.pixelSize: 15
color: Theme.palette.baseColor1
text: qsTr("3. Navigate to the ")
}
StatusRoundIcon {
asset.name: {
if (root.type === SyncingCodeInstructions.Type.KeypairSync) {
return "wallet"
}
return "rotate"
GetSyncCodeInstruction {
order: "1."
orderColor: Theme.palette.baseColor1
text1: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
return qsTr("Open Status on the device you want to import from")
}
return qsTr("Open Status App on your desktop device")
}
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
text: {
if (root.type === SyncingCodeInstructions.Type.KeypairSync) {
return qsTr("Wallet tab")
}
return qsTr("Syncing tab")
text1Color: Theme.palette.baseColor1
}
GetSyncCodeInstruction {
order: "2."
orderColor: Theme.palette.baseColor1
text1: qsTr("Open")
text1Color: Theme.palette.baseColor1
icon: "settings"
text2: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
return qsTr("Settings / Wallet")
}
font.pixelSize: 15
color: Theme.palette.directColor1
return qsTr("Settings")
}
text2Color: Theme.palette.directColor1
}
GetSyncCodeInstruction {
order: "3."
orderColor: Theme.palette.baseColor1
text1: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
return qsTr("Click")
}
return qsTr("Navigate to the")
}
text1Color: Theme.palette.baseColor1
icon: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
return ""
}
return "rotate"
}
text2: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
return qsTr("Show encrypted QR of keypairs on this device")
}
return qsTr("Syncing tab")
}
text2Color: Theme.palette.directColor1
}
GetSyncCodeInstruction {
order: "4."
orderColor: Theme.palette.baseColor1
text1: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
return qsTr("Copy the")
}
return qsTr("Enable camera")
}
return qsTr("Click")
}
text1Color: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
return Theme.palette.baseColor1
}
return Theme.palette.directColor1
}
return Theme.palette.baseColor1
}
text2: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
return qsTr("encrypted keypairs code")
}
return qsTr("on this device")
}
return qsTr("Setup Syncing")
}
text2Color: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
return Theme.palette.directColor1
}
return Theme.palette.baseColor1
}
return Theme.palette.directColor1
}
}
RowLayout {
height: d.listItemHeight
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
text: qsTr("4. Click")
font.pixelSize: 15
color: Theme.palette.baseColor1
}
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
text: {
if (root.type === SyncingCodeInstructions.Type.KeypairSync) {
return qsTr("Import missing keypairs")
GetSyncCodeInstruction {
order: "5."
orderColor: Theme.palette.baseColor1
text1: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
return qsTr("Paste the")
}
return qsTr("Setup Syncing")
return qsTr("Scan or enter the encrypted QR with this device")
}
font.pixelSize: 15
color: Theme.palette.directColor1
return ""
}
text1Color: Theme.palette.baseColor1
text2: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
return qsTr("encrypted keypairs code")
}
return ""
}
return qsTr("Enable camera")
}
text2Color: Theme.palette.directColor1
text3: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
return qsTr("to this device")
}
return ""
}
return qsTr("on this device")
}
text3Color: Theme.palette.baseColor1
}
RowLayout {
height: d.listItemHeight
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
text: qsTr("5.")
font.pixelSize: 15
color: Theme.palette.baseColor1
}
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
text: qsTr("Enable camera")
font.pixelSize: 15
color: Theme.palette.directColor1
}
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
text: qsTr("on this device")
font.pixelSize: 15
color: Theme.palette.baseColor1
}
}
RowLayout {
height: d.listItemHeight
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
text: {
if (root.type === SyncingCodeInstructions.Type.KeypairSync) {
return qsTr("6. Scan or enter the encrypted key with this device")
GetSyncCodeInstruction {
order: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
return "6."
}
return qsTr("6. Scan or enter the code")
return ""
}
font.pixelSize: 15
color: Theme.palette.baseColor1
return "6."
}
orderColor: Theme.palette.baseColor1
text1: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
return qsTr("For security, delete the code as soon as you are done")
}
return ""
}
return qsTr("Scan or enter the code")
}
text1Color: Theme.palette.baseColor1
}
}

49
ui/imports/shared/controls/GetSyncCodeInstruction.qml Normal file
View File

@ -0,0 +1,49 @@
import QtQuick.Layouts 1.15
import StatusQ.Core 0.1
import StatusQ.Components 0.1
RowLayout {
id: root
height: 40
property string order: ""
property string orderColor: ""
property string text1: ""
property string text1Color: ""
property string icon: ""
property string text2: ""
property string text2Color: ""
property string text3: ""
property string text3Color: ""
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
visible: !!root.order
color: root.orderColor
text: root.order
}
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
visible: !!root.text1
color: root.text1Color
text: "%1".arg(root.text1)
}
StatusRoundIcon {
visible: !!root.icon
asset.name: root.icon
}
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
visible: !!root.text2
color: root.text2Color
text: "%1".arg(root.text2)
}
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
visible: !!root.text3
color: root.text3Color
text: "%1".arg(root.text3)
}
}

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

@ -1,9 +1,5 @@
import QtQuick 2.0
import QtQuick.Layouts 1.12
import QtQuick 2.15
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import shared.views 1.0
@ -11,134 +7,164 @@ import shared.views 1.0
Column {
id: root
property int type: SyncingCodeInstructions.Type.AppSync
property int purpose: SyncingCodeInstructions.Purpose.AppSync
property int type: SyncingCodeInstructions.Type.QRCode
spacing: 4
QtObject {
id: d
readonly property int listItemHeight: 40
}
RowLayout {
height: d.listItemHeight
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
font.pixelSize: 15
color: Theme.palette.baseColor1
text: qsTr("1. Open Status App on your mobile device")
}
}
RowLayout {
height: d.listItemHeight
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
font.pixelSize: 15
color: Theme.palette.baseColor1
text: qsTr("2. Open")
}
StatusRoundIcon {
asset.name: "profile"
}
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
font.pixelSize: 15
color: Theme.palette.directColor1
text: qsTr("Settings")
}
}
RowLayout {
height: d.listItemHeight
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
font.pixelSize: 15
color: Theme.palette.baseColor1
text: qsTr("3. Go to")
}
StatusRoundIcon {
asset.name: {
if (root.type === SyncingCodeInstructions.Type.KeypairSync) {
return "wallet"
}
return "rotate"
GetSyncCodeInstruction {
order: "1."
orderColor: Theme.palette.baseColor1
text1: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
return qsTr("Open Status on the device you want to import from")
}
return qsTr("Open Status App on your mobile device")
}
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
text: {
if (root.type === SyncingCodeInstructions.Type.KeypairSync) {
return qsTr("Wallet")
}
return qsTr("Syncing")
text1Color: Theme.palette.baseColor1
}
GetSyncCodeInstruction {
order: "2."
orderColor: Theme.palette.baseColor1
text1: qsTr("Open")
text1Color: Theme.palette.baseColor1
icon: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
return "settings"
}
font.pixelSize: 15
color: Theme.palette.directColor1
return "profile"
}
text2: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
return qsTr("Settings / Wallet")
}
return qsTr("Settings")
}
text2Color: Theme.palette.directColor1
}
GetSyncCodeInstruction {
order: "3."
orderColor: Theme.palette.baseColor1
text1: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
return qsTr("Tap")
}
return qsTr("Go to")
}
text1Color: Theme.palette.baseColor1
icon: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
return ""
}
return "rotate"
}
text2: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
return qsTr("Show encrypted keypairs code")
}
return qsTr("Syncing")
}
text2Color: Theme.palette.directColor1
}
GetSyncCodeInstruction {
order: "4."
orderColor: Theme.palette.baseColor1
text1: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
return qsTr("Copy the")
}
return qsTr("Enable camera")
}
return qsTr("Tap")
}
text1Color: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
return Theme.palette.baseColor1
}
return Theme.palette.directColor1
}
return Theme.palette.baseColor1
}
text2: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
return qsTr("encrypted keypairs code")
}
return qsTr("on this device")
}
return qsTr("Sync new device")
}
text2Color: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
return Theme.palette.directColor1
}
return Theme.palette.baseColor1
}
return Theme.palette.directColor1
}
}
RowLayout {
height: d.listItemHeight
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
text: qsTr("4. Tap")
font.pixelSize: 15
color: Theme.palette.baseColor1
}
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
text: {
if (root.type === SyncingCodeInstructions.Type.KeypairSync) {
return qsTr("Import missing keypairs")
GetSyncCodeInstruction {
order: "5."
orderColor: Theme.palette.baseColor1
text1: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
return qsTr("Paste the")
}
return qsTr("Sync new device")
return qsTr("Scan or enter the encrypted QR with this device")
}
font.pixelSize: 15
color: Theme.palette.directColor1
return qsTr("Tap")
}
text1Color: Theme.palette.baseColor1
text2: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
return qsTr("encrypted keypairs code")
}
return ""
}
return qsTr("Enable camera")
}
text2Color: Theme.palette.directColor1
text3: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
return qsTr("to this device")
}
return ""
}
return qsTr("on this device")
}
text3Color: Theme.palette.baseColor1
}
RowLayout {
height: d.listItemHeight
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
text: qsTr("5.")
font.pixelSize: 15
color: Theme.palette.baseColor1
}
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
text: qsTr("Enable camera")
font.pixelSize: 15
color: Theme.palette.directColor1
}
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
text: qsTr("on this device")
font.pixelSize: 15
color: Theme.palette.baseColor1
}
}
RowLayout {
height: d.listItemHeight
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
text: {
if (root.type === SyncingCodeInstructions.Type.KeypairSync) {
return qsTr("6. Scan or enter the encrypted key with this device")
GetSyncCodeInstruction {
order: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
return "6."
}
return qsTr("6. Scan or enter the code")
return ""
}
font.pixelSize: 15
color: Theme.palette.baseColor1
return "6."
}
orderColor: Theme.palette.baseColor1
text1: {
if (root.purpose === SyncingCodeInstructions.Purpose.KeypairSync) {
if (root.type === SyncingCodeInstructions.Type.EncryptedKey) {
return qsTr("For security, delete the code as soon as you are done")
}
return ""
}
return qsTr("Scan or enter the code")
}
text1Color: Theme.palette.baseColor1
}
}

6
ui/imports/shared/popups/keypairimport/KeypairImportPopup.qml
View File

@ -32,7 +32,10 @@ StatusModal {
case Constants.keypairImportPopup.state.importQr:
return qsTr("Scan encrypted keypair QR code")
case Constants.keypairImportPopup.state.displayInstructions:
return qsTr("How to generate the encrypted QR")
if (root.store.syncViaQr) {
return Constants.keypairImportPopup.instructionsLabelForQr
}
return Constants.keypairImportPopup.instructionsLabelForEncryptedKey
}
return qsTr("Import %1 keypair").arg(root.store.selectedKeypair.name)
@ -137,6 +140,7 @@ StatusModal {
id: displayInstructionsComponent
DisplayInstructions {
height: Constants.keypairImportPopup.contentHeight
store: root.store
}
}
}

9
ui/imports/shared/popups/keypairimport/states/DisplayInstructions.qml
View File

@ -3,9 +3,13 @@ import QtQuick.Layouts 1.14
import shared.views 1.0
import "../stores"
Item {
id: root
property KeypairImportStore store
implicitHeight: layout.implicitHeight
SyncingCodeInstructions {
@ -14,6 +18,9 @@ Item {
anchors.fill: parent
anchors.margins: 24
type: SyncingCodeInstructions.Type.KeypairSync
purpose: SyncingCodeInstructions.Purpose.KeypairSync
type: root.store.syncViaQr?
SyncingCodeInstructions.Type.QRCode :
SyncingCodeInstructions.Type.EncryptedKey
}
}

6
ui/imports/shared/popups/keypairimport/states/ScanOrEnterQrCode.qml
View File

@ -3,6 +3,8 @@ import QtQuick.Layouts 1.14
import shared.views 1.0
import utils 1.0
import "../stores"
Item {
@ -23,8 +25,8 @@ Item {
secondTabName: qsTr("Enter encrypted key")
syncQrErrorMessage: qsTr("This does not look like the correct keypair QR code")
syncCodeErrorMessage: qsTr("This does not look like an encrypted keypair code")
firstInstructionButtonName: qsTr("How to display the QR code on your other device")
secondInstructionButtonName: qsTr("How to copy the encrypted key from your other device")
firstInstructionButtonName: Constants.keypairImportPopup.instructionsLabelForQr
secondInstructionButtonName: Constants.keypairImportPopup.instructionsLabelForEncryptedKey
syncCodeLabel: qsTr("Paste encrypted key")
validateConnectionString: function(connectionString) {

12
ui/imports/shared/views/SyncingCodeInstructions.qml
View File

@ -8,12 +8,18 @@ import shared.controls 1.0
ColumnLayout {
id: root
enum Type {
enum Purpose {
AppSync,
KeypairSync
}
property int type: SyncingCodeInstructions.Type.AppSync
enum Type {
QRCode,
EncryptedKey
}
property int purpose: SyncingCodeInstructions.Purpose.AppSync
property int type: SyncingCodeInstructions.Type.QRCode
spacing: 0
@ -50,6 +56,7 @@ ColumnLayout {
Layout.fillWidth: false
Layout.alignment: Qt.AlignHCenter
purpose: root.purpose
type: root.type
}
@ -59,6 +66,7 @@ ColumnLayout {
Layout.fillWidth: false
Layout.alignment: Qt.AlignHCenter
purpose: root.purpose
type: root.type
}
}

2
ui/imports/utils/Constants.qml
View File

@ -743,6 +743,8 @@ QtObject {
readonly property int contentHeight: 626
readonly property int footerButtonsHeight: 44
readonly property int labelFontSize1: 15
readonly property string instructionsLabelForQr: qsTr("How to display the QR code on your other device")
readonly property string instructionsLabelForEncryptedKey: qsTr("How to copy the encrypted key from your other device")
readonly property QtObject mode: QtObject {
readonly property int selectKeypair: 1