qml: use signal based navigation in CreateWallet pages, introduce wizard

Makes our CreateWallet flow into a wizard, as that is what it should be. The CreateWalletWizard is introduced as a StackView with the associated pages implementing signal based navigation. Previously, there was an interlinked dependency between CreateName and CreatePassword in that CreateName would pass a string for walletName to CreatePassword. This dependency is removed by having CreateName set the string in a property contained in the CreateWalletWizard StackView, and CreatePassword pulling in this property to satisfy its requirement for walletName. This is a temporary workaround so that we can still have clearly contained pages here. A follow-up should move this into a more appropriate backend object
bitcoin-core · Oct 25, 2024 · a77c7f1 · a77c7f1
1 parent 02a3b25
commit a77c7f1
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 27 deletions.
diff --git a/src/Makefile.qt.include b/src/Makefile.qt.include
@@ -428,12 +428,12 @@ QML_RES_QML = \
   qml/pages/settings/SettingsProxy.qml \
   qml/pages/settings/SettingsStorage.qml \
   qml/pages/settings/SettingsTheme.qml \
-  qml/pages/wallet/AddWallet.qml \
   qml/pages/wallet/CreateBackup.qml \
   qml/pages/wallet/CreateConfirm.qml \
   qml/pages/wallet/CreateIntro.qml \
   qml/pages/wallet/CreateName.qml \
   qml/pages/wallet/CreatePassword.qml \
+  qml/pages/wallet/CreateWalletWizard.qml \
   qml/pages/wallet/DesktopWallets.qml \
   qml/pages/wallet/WalletBadge.qml \
   qml/pages/wallet/WalletSelect.qml

diff --git a/src/qml/bitcoin_qml.qrc b/src/qml/bitcoin_qml.qrc
@@ -68,12 +68,12 @@
         <file>pages/settings/SettingsProxy.qml</file>
         <file>pages/settings/SettingsStorage.qml</file>
         <file>pages/settings/SettingsTheme.qml</file>
-        <file>pages/wallet/AddWallet.qml</file>
         <file>pages/wallet/CreateBackup.qml</file>
         <file>pages/wallet/CreateConfirm.qml</file>
         <file>pages/wallet/CreateIntro.qml</file>
         <file>pages/wallet/CreateName.qml</file>
         <file>pages/wallet/CreatePassword.qml</file>
+        <file>pages/wallet/CreateWalletWizard.qml</file>
         <file>pages/wallet/DesktopWallets.qml</file>
         <file>pages/wallet/WalletBadge.qml</file>
         <file>pages/wallet/WalletSelect.qml</file>

diff --git a/src/qml/pages/main.qml b/src/qml/pages/main.qml
@@ -98,7 +98,7 @@ ApplicationWindow {
                 optionsModel.onboard()
                 if (AppMode.walletEnabled && AppMode.isDesktop) {
                     main.push(desktopWallets)
-                    main.push(addWallet)
+                    main.push(createWalletWizard)
                 } else {
                     main.push(node)
                 }
@@ -112,8 +112,8 @@ ApplicationWindow {
     }
 
     Component {
-        id: addWallet
-        AddWallet {
+        id: createWalletWizard
+        CreateWalletWizard {
             onFinished: {
                 main.pop()
             }

diff --git a/src/qml/pages/wallet/CreateBackup.qml b/src/qml/pages/wallet/CreateBackup.qml
@@ -12,6 +12,8 @@ import "../settings"
 
 Page {
     id: root
+    signal back
+    signal next
     background: null
 
     header: NavigationBar2 {
@@ -20,7 +22,7 @@ Page {
             iconSource: "image://images/caret-left"
             text: qsTr("Back")
             onClicked: {
-                root.StackView.view.pop()
+                root.back()
             }
         }
     }
@@ -83,7 +85,7 @@ Page {
             Layout.alignment: Qt.AlignCenter
             text: qsTr("Done")
             onClicked: {
-                root.StackView.view.finished()
+                root.next()
             }
         }
     }

diff --git a/src/qml/pages/wallet/CreateConfirm.qml b/src/qml/pages/wallet/CreateConfirm.qml
@@ -12,6 +12,8 @@ import "../settings"
 
 Page {
     id: root
+    signal back
+    signal next
     background: null
 
     header: NavigationBar2 {
@@ -20,7 +22,7 @@ Page {
             iconSource: "image://images/caret-left"
             text: qsTr("Back")
             onClicked: {
-                root.StackView.view.pop()
+                root.back()
             }
         }
     }
@@ -67,7 +69,7 @@ Page {
             Layout.alignment: Qt.AlignCenter
             text: qsTr("Next")
             onClicked: {
-                root.StackView.view.push("qrc:/qml/pages/wallet/CreateBackup.qml")
+                root.next()
             }
         }
     }

diff --git a/src/qml/pages/wallet/CreateIntro.qml b/src/qml/pages/wallet/CreateIntro.qml
@@ -12,6 +12,8 @@ import "../settings"
 
 Page {
     id: root
+    signal back
+    signal next
     background: null
 
     header: NavigationBar2 {
@@ -20,7 +22,7 @@ Page {
             iconSource: "image://images/caret-left"
             text: qsTr("Back")
             onClicked: {
-                root.StackView.view.pop()
+                root.back()
             }
         }
     }
@@ -107,7 +109,7 @@ Page {
             Layout.alignment: Qt.AlignCenter
             text: qsTr("Start")
             onClicked: {
-                root.StackView.view.push("qrc:/qml/pages/wallet/CreateName.qml")
+                root.next()
             }
         }
     }

diff --git a/src/qml/pages/wallet/CreateName.qml b/src/qml/pages/wallet/CreateName.qml
@@ -12,6 +12,9 @@ import "../settings"
 
 Page {
     id: root
+    signal back
+    signal next
+    property string walletName: ""
     background: null
 
     header: NavigationBar2 {
@@ -20,7 +23,7 @@ Page {
             iconSource: "image://images/caret-left"
             text: qsTr("Back")
             onClicked: {
-                root.StackView.view.pop()
+                root.back()
             }
         }
     }
@@ -62,14 +65,8 @@ Page {
             text: qsTr("Continue")
             onClicked: {
                 console.log("Creating wallet with name: " + walletNameInput.text)
-                root.StackView.view.push(createPassword)
-            }
-        }
-
-        Component {
-            id: createPassword
-            CreatePassword {
-                walletName: walletNameInput.text
+                root.walletName = walletNameInput.text
+                root.next()
             }
         }
     }

diff --git a/src/qml/pages/wallet/CreatePassword.qml b/src/qml/pages/wallet/CreatePassword.qml
@@ -12,6 +12,8 @@ import "../settings"
 
 Page {
     id: root
+    signal back
+    signal next
     background: null
 
     required property string walletName;
@@ -22,14 +24,14 @@ Page {
             iconSource: "image://images/caret-left"
             text: qsTr("Back")
             onClicked: {
-                root.StackView.view.pop()
+                root.back()
             }
         }
         rightItem: NavButton {
             text: qsTr("Skip")
             onClicked: {
                 walletController.createSingleSigWallet(walletName, "")
-                root.StackView.view.push("qrc:/qml/pages/wallet/CreateConfirm.qml")
+                root.next()
             }
         }
     }
@@ -108,7 +110,7 @@ Page {
             enabled: password.text != "" && passwordRepeat.text != "" && password.text == passwordRepeat.text && confirmToggle.loadedItem.checked
             onClicked: {
                 walletController.createSingleSigWallet(walletName, password.text)
-                root.StackView.view.push("qrc:/qml/pages/wallet/CreateConfirm.qml")
+                root.next()
             }
         }
     }

diff --git a/src/qml/pages/wallet/AddWallet.qml → src/qml/pages/wallet/CreateWalletWizard.qml b/src/qml/pages/wallet/AddWallet.qml → src/qml/pages/wallet/CreateWalletWizard.qml
@@ -11,9 +11,10 @@ import "../settings"
 import "../wallet"
 
 StackView {
-    id: addWalletStack
+    id: root
 
     signal finished()
+    property string walletName: ""
 
     initialItem: Page {
         background: null
@@ -23,7 +24,7 @@ StackView {
             rightItem: NavButton {
                 text: qsTr("Skip")
                 onClicked: {
-                    addWalletStack.finished()
+                    root.finished()
                 }
             }
         }
@@ -59,7 +60,7 @@ StackView {
                 Layout.alignment: Qt.AlignCenter
                 text: qsTr("Create wallet")
                 onClicked: {
-                    addWalletStack.push("qrc:/qml/pages/wallet/CreateIntro.qml");
+                    root.push(intro)
                 }
             }
 
@@ -79,5 +80,44 @@ StackView {
             }
         }
     }
+    Component {
+        id: intro
+        CreateIntro {
+            onBack: root.pop()
+            onNext: root.push(name)
+        }
+    }
+    Component {
+        id: name
+        CreateName {
+            id: createName
+            onBack: root.pop()
+            onNext: {
+                root.walletName = createName.walletName
+                root.push(password)
+            }
+        }
+    }
+    Component {
+        id: password
+        CreatePassword {
+            walletName: root.walletName
+            onBack: root.pop()
+            onNext: root.push(confirm)
+        }
+    }
+    Component {
+        id: confirm
+        CreateConfirm {
+            onBack: root.pop()
+            onNext: root.push(backup)
+        }
+    }
+    Component {
+        id: backup
+        CreateBackup {
+            onBack: root.pop()
+            onNext: root.finished()
+        }
+    }
 }
-