status-desktop/storybook/pages/BackupSeedphraseFlowPage.qml
2025-01-14 10:49:42 +01:00

142 lines
4.5 KiB
QML

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import StatusQ 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Utils 0.1 as SQUtils
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Core.Theme 0.1
import utils 1.0
import AppLayouts.Onboarding2.pages 1.0
Item {
id: root
QtObject {
id: d
readonly property var seedWords: ["apple", "banana", "cat", "cow", "catalog", "catch", "category", "cattle", "dog", "elephant", "fish", "grape"]
readonly property int numWordsToVerify: 4
}
StackView {
id: stack
anchors.fill: parent
initialItem: backupSeedIntroPage
}
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.BackButton
enabled: stack.depth > 1 && !stack.busy
cursorShape: undefined // fall thru
onClicked: stack.pop()
}
StatusBackButton {
width: 44
height: 44
anchors.left: parent.left
anchors.leftMargin: Theme.padding
anchors.bottom: parent.bottom
anchors.bottomMargin: Theme.padding
opacity: stack.depth > 1 && !stack.busy ? 1 : 0
visible: opacity > 0
Behavior on opacity { NumberAnimation { duration: 100 } }
onClicked: stack.pop()
}
Label {
anchors.right: parent.right
anchors.bottom: parent.bottom
text: !!stack.currentItem && stack.currentItem instanceof BackupSeedphraseVerify ?
"Hint: %1".arg(stack.currentItem.seedWordsToVerify.map((entry) => entry.seedWord))
: ""
}
Connections {
id: mainHandler
target: stack.currentItem
ignoreUnknownSignals: true
function onBackupSeedphraseRequested() {
stack.push(backupSeedAcksPage)
}
function onBackupSeedphraseContinue() {
stack.push(backupSeedRevealPage)
}
function onBackupSeedphraseConfirmed() {
stack.push(backupSeedVerifyPage)
}
function onBackupSeedphraseVerified() {
stack.push(backupSeedOutroPage)
}
function onBackupSeedphraseRemovalConfirmed() {
console.warn("!!! FLOW FINISHED; RESTART")
stack.pop(null)
}
}
Component {
id: backupSeedIntroPage
BackupSeedphraseIntro {
onBackupSeedphraseRequested: console.warn("!!! SEED BACKUP REQUESTED")
}
}
Component {
id: backupSeedAcksPage
BackupSeedphraseAcks {
onBackupSeedphraseContinue: console.warn("!!! SEED ACKED")
}
}
Component {
id: backupSeedRevealPage
BackupSeedphraseReveal {
seedWords: d.seedWords
onBackupSeedphraseConfirmed: console.warn("!!! SEED CONFIRMED")
}
}
Component {
id: backupSeedVerifyPage
BackupSeedphraseVerify {
seedWordsToVerify: {
let result = []
const randomIndexes = SQUtils.Utils.nSamples(d.numWordsToVerify, d.seedWords.length)
for (const i of randomIndexes) {
result.push({seedWordNumber: i+1, seedWord: d.seedWords[i]})
}
return result
}
onBackupSeedphraseVerified: console.warn("!!! ALL VERIFIED")
}
}
Component {
id: backupSeedOutroPage
BackupSeedphraseOutro {
onBackupSeedphraseRemovalConfirmed: console.warn("!!! SEED REMOVAL CONFIRMED")
}
}
}
// category: Onboarding
// status: good
// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=944-40428&node-type=instance&m=dev
// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=944-40730&node-type=frame&m=dev
// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=522-36751&node-type=frame&m=dev
// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=522-37165&node-type=frame&m=dev
// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=783-33987&node-type=frame&m=dev
// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=944-44817&node-type=frame&m=dev
// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=783-34183&node-type=frame&m=dev
// https://www.figma.com/design/Lw4nPYQcZOPOwTgETiiIYo/Desktop-Onboarding-Redesign?node-id=944-44231&node-type=frame&m=dev