Merge #403: Introduce Create Single-Sig wallet flow

d1f7ea6 qml: Introduce Create Wallet Single-Sig flow (johnny9)
72716f6 qml: Introduce AddWallet page after onboarding (johnny9)
98d6d46 qml: Add DISABLED state to ContinueButton (johnny9)
d807ae9 qml: Add color properties to ContinueButton (johnny9)

Pull request description:

  These changes add more pages after the initial onboarding.

  To test, run the application with the `-resetguisettings` option.

  Link to github actions build artifacts.

  [![Build Artifacts](https://img.shields.io/badge/Build%20Artifacts-green
  )](https://github.com/bitcoin-core/gui-qml/actions/runs/9263281845)

ACKs for top commit:
  D33r-Gee:
    tACK [d1f7ea6](d1f7ea6) on WSL Ubuntu 22.04

Tree-SHA512: 9970996d1b26a9db7733b050e13d37494c7f0ebbcb0faa00b3a565a5aaeb634ac1d7ad38c11a0de34d15f28c52be953935d025b979e132990bc7dc70a84964a8

Author: hebasto

qml/bitcoin.cpp

@@ -20,14 +20,15 @@
 #endif
 #include <qml/components/blockclockdial.h>
 #include <qml/controls/linegraph.h>
+#include <qml/guiconstants.h>
 #include <qml/models/chainmodel.h>
 #include <qml/models/networktraffictower.h>
 #include <qml/models/nodemodel.h>
 #include <qml/models/options_model.h>
 #include <qml/models/peerlistsortproxy.h>
 #include <qml/imageprovider.h>
 #include <qml/util.h>
-#include <qml/guiconstants.h>
+#include <qml/walletcontroller.h>
 #include <qt/guiutil.h>
 #include <qt/initexecutor.h>
 #include <qt/networkstyle.h>
@@ -286,6 +287,8 @@ int QmlGuiMain(int argc, char* argv[])
     GUIUtil::LoadFont(":/fonts/inter/regular");
     GUIUtil::LoadFont(":/fonts/inter/semibold");
 
+    WalletController wallet_controller(*node);
+
     QQmlApplicationEngine engine;
 
     QScopedPointer<const NetworkStyle> network_style{NetworkStyle::instantiate(Params().GetChainType())};
@@ -297,6 +300,7 @@ int QmlGuiMain(int argc, char* argv[])
     engine.rootContext()->setContextProperty("chainModel", &chain_model);
     engine.rootContext()->setContextProperty("peerTableModel", &peer_model);
     engine.rootContext()->setContextProperty("peerListModelProxy", &peer_model_sort_proxy);
+    engine.rootContext()->setContextProperty("walletController", &wallet_controller);
 
     OptionsQmlModel options_model(*node, !need_onboarding.toBool());
     engine.rootContext()->setContextProperty("optionsModel", &options_model);

qml/bitcoin_qml.qrc

@@ -22,6 +22,7 @@
         <file>components/Tooltip.qml</file>
         <file>controls/ContinueButton.qml</file>
         <file>controls/CoreText.qml</file>
+        <file>controls/CoreTextField.qml</file>
         <file>controls/ExternalLink.qml</file>
         <file>controls/FocusBorder.qml</file>
         <file>controls/Header.qml</file>
@@ -65,9 +66,16 @@
         <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/DesktopWallets.qml</file>
     </qresource>
     <qresource prefix="/icons">
+        <file alias="add-wallet-dark">res/icons/add-wallet-dark.png</file>
         <file alias="arrow-down">res/icons/arrow-down.png</file>
         <file alias="arrow-up">res/icons/arrow-up.png</file>
         <file alias="bitcoin-circle">res/icons/bitcoin-circle.png</file>
@@ -83,6 +91,7 @@
         <file alias="export">res/icons/export.png</file>
         <file alias="gear">res/icons/gear.png</file>
         <file alias="gear-outline">res/icons/gear-outline.png</file>
+        <file alias="hidden">res/icons/hidden.png</file>
         <file alias="info">res/icons/info.png</file>
         <file alias="network-dark">res/icons/network-dark.png</file>
         <file alias="network-light">res/icons/network-light.png</file>
@@ -92,6 +101,8 @@
         <file alias="storage-light">res/icons/storage-light.png</file>
         <file alias="tooltip-arrow-dark">res/icons/tooltip-arrow-dark.png</file>
         <file alias="tooltip-arrow-light">res/icons/tooltip-arrow-light.png</file>
+        <file alias="wallet">res/icons/wallet.png</file>
+        <file alias="visible">res/icons/visible.png</file>
     </qresource>
     <qresource prefix="/fonts">
         <file alias="inter/regular">res/fonts/Inter-Regular.otf</file>

qml/controls/ContinueButton.qml

@@ -9,25 +9,44 @@ import org.bitcoincore.qt 1.0
 Button {
     id: root
     hoverEnabled: AppMode.isDesktop
+
+    property color textColor: Theme.color.white
+    property color backgroundColor: Theme.color.orange
+    property color backgroundHoverColor: Theme.color.orangeLight1
+    property color backgroundPressedColor: Theme.color.orangeLight2
+    property color borderColor: "transparent"
+    property color borderHoverColor: "transparent"
+    property color borderPressedColor: "transparent"
+
     contentItem: CoreText {
         text: parent.text
+        color: root.textColor
         bold: true
         font.pixelSize: 18
     }
     background: Rectangle {
         id: bg
         implicitHeight: 46
-        color: Theme.color.orange
+        color: backgroundColor
+        border.color: borderColor
         radius: 5
 
         states: [
+            State {
+                name: "DISABLED"; when: !root.enabled
+                PropertyChanges { target: bg; color: Theme.color.neutral2 }
+                PropertyChanges { target: bg; border.color: Theme.color.neutral2 }
+                PropertyChanges { target: root; textColor: Theme.color.neutral5 }
+            },
             State {
                 name: "PRESSED"; when: root.pressed
-                PropertyChanges { target: bg; color: Theme.color.orangeLight2 }
+                PropertyChanges { target: bg; color: backgroundPressedColor }
+                PropertyChanges { target: bg; border.color: borderPressedColor }
             },
             State {
                 name: "HOVER"; when: root.hovered
-                PropertyChanges { target: bg; color: Theme.color.orangeLight1 }
+                PropertyChanges { target: bg; color: backgroundHoverColor }
+                PropertyChanges { target: bg; border.color: borderHoverColor }
             }
         ]
 

qml/controls/CoreTextField.qml

@@ -0,0 +1,50 @@
+// Copyright (c) 2022 The Bitcoin Core developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+TextField {
+    id: root
+
+    property bool hideText: false
+
+    implicitHeight: 56
+    implicitWidth: 450
+    font.family: "Inter"
+    font.styleName: "Regular"
+    font.pixelSize: 18
+    color: Theme.color.neutral9
+    placeholderTextColor: Theme.color.neutral5
+    echoMode: hideText ? TextInput.Password : TextInput.Normal
+    rightPadding: hideText ? 46 : 20
+    leftPadding: 20
+    background: Rectangle {
+        border.color: Theme.color.neutral5
+        border.width: 1
+        color: "transparent"
+        radius: 5
+
+        Icon {
+            id: visibleIcon
+            enabled: hideText
+            visible: hideText
+            anchors.right: parent.right
+            anchors.rightMargin: 12
+            size: 24
+            anchors.verticalCenter: parent.verticalCenter
+            source: "qrc:/icons/visible"
+            color: Theme.color.neutral5
+            onClicked: {
+                if (root.echoMode == TextInput.Password) {
+                    root.echoMode = TextInput.Normal
+                    visibleIcon.source = "qrc:/icons/hidden"
+                } else {
+                    root.echoMode = TextInput.Password
+                    visibleIcon.source = "qrc:/icons/visible"
+                }
+            }
+        }
+    }
+}

qml/controls/Setting.qml

@@ -10,7 +10,7 @@ import org.bitcoincore.qt 1.0
 
 AbstractButton {
     id: root
-    required property string header
+    property string header
     property alias actionItem: action_loader.sourceComponent
     property alias loadedItem: action_loader.item
     property string description

qml/imageprovider.cpp

@@ -142,5 +142,25 @@ QPixmap ImageProvider::requestPixmap(const QString& id, QSize* size, const QSize
         return QIcon(":/icons/tooltip-arrow-light").pixmap(requested_size);
     }
 
+    if (id == "add-wallet-dark") {
+        *size = requested_size;
+        return QIcon(":/icons/add-wallet-dark").pixmap(requested_size);
+    }
+
+    if (id == "wallet") {
+        *size = requested_size;
+        return QIcon(":/icons/wallet").pixmap(requested_size);
+    }
+
+    if (id == "visible") {
+        *size = requested_size;
+        return QIcon(":/icons/visible").pixmap(requested_size);
+    }
+
+    if (id == "hidden") {
+        *size = requested_size;
+        return QIcon(":/icons/hidden").pixmap(requested_size);
+    }
+
     return {};
 }

qml/pages/main.qml

@@ -81,6 +81,7 @@ ApplicationWindow {
                 optionsModel.onboard()
                 if (AppMode.walletEnabled && AppMode.isDesktop) {
                     main.push(desktopWallets)
+                    main.push(addWallet)
                 } else {
                     main.push(node)
                 }
@@ -93,6 +94,15 @@ ApplicationWindow {
         DesktopWallets {}
     }
 
+    Component {
+        id: addWallet
+        AddWallet {
+            onFinished: {
+                main.pop()
+            }
+        }
+    }
+
     Component {
         id: shutdown
         Shutdown {}

qml/pages/wallet/AddWallet.qml

@@ -0,0 +1,82 @@
+// Copyright (c) 2024 The Bitcoin Core developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import "../../controls"
+import "../../components"
+import "../settings"
+import "../wallet"
+
+StackView {
+    id: addWalletStack
+
+    signal finished()
+
+    initialItem: Page {
+        background: null
+
+        header: NavigationBar2 {
+            id: navbar
+            rightItem: NavButton {
+                text: qsTr("Skip")
+                onClicked: {
+                    addWalletStack.finished()
+                }
+            }
+        }
+
+        ColumnLayout {
+            id: columnLayout
+            width: Math.min(parent.width, 450)
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            Image {
+                Layout.alignment: Qt.AlignCenter
+                source: "image://images/add-wallet-dark"
+
+                sourceSize.width: 200
+                sourceSize.height: 200
+            }
+
+            Header {
+                Layout.fillWidth: true
+                Layout.leftMargin: 20
+                Layout.rightMargin: 20
+                header: qsTr("Add a wallet")
+                description: qsTr("In this early stage of development, only wallet.dat files are supported.")
+            }
+
+            ContinueButton {
+                Layout.preferredWidth: Math.min(300, parent.width - 2 * Layout.leftMargin)
+                Layout.topMargin: 40
+                Layout.leftMargin: 20
+                Layout.rightMargin: Layout.leftMargin
+                Layout.bottomMargin: 20
+                Layout.alignment: Qt.AlignCenter
+                text: qsTr("Create wallet")
+                onClicked: {
+                    addWalletStack.push("qrc:/qml/pages/wallet/CreateIntro.qml");
+                }
+            }
+
+            ContinueButton {
+                Layout.preferredWidth: Math.min(300, parent.width - 2 * Layout.leftMargin)
+                Layout.leftMargin: 20
+                Layout.rightMargin: Layout.leftMargin
+                Layout.alignment: Qt.AlignCenter
+                text: qsTr("Import wallet")
+                borderColor: Theme.color.neutral6
+                borderHoverColor: Theme.color.orangeLight1
+                borderPressedColor: Theme.color.orangeLight2
+                textColor: Theme.color.orange
+                backgroundColor: "transparent"
+                backgroundHoverColor: "transparent"
+                backgroundPressedColor: "transparent"
+            }
+        }
+    }
+}
+