Merge #389: Introduce Wallet main pages

37e3af6 qml: Remove Done button from Settings in Desktop Wallet (johnny9)
3d3a39e qml: Shorten the DesktopWallet NetworkIndicator (johnny9)
6e42abc qml: Add property to hide NetworkIndicator on BlockClock page (johnny9)
4b79ac2 qml: Introduce DesktopWallets page (johnny9)
d556c93 qml: Introduce singlesig-wallet icon (johnny9)
bef69da qml: Introduce gear-outline icon (johnny9)
f7470ce qml: Add walletEnabled property to AppMode model (johnny9)

Pull request description:

  Adds DesktopWallets.qml and MobileWallets.qml. These pages are the central navigation points for the application when wallets are enabled.

  A core piece of the page is controlling the navigation flow between the sub pages of the wallet application. For the desktop implementation, a new NavigationBar design is used along with a Stack layout to hold the pages. For mobile, a DirectionalStackView is used to push and pop the wallet sub pages based on the UX designed flow.

  [![Build Artifacts](https://img.shields.io/badge/Build%20Artifacts-green
  )]()

ACKs for top commit:
  D33r-Gee:
    tACK 37e3af6
  pablomartin4btc:
    re tACK 37e3af6

Tree-SHA512: 8ba62f77660ba8bec5682b9dbc1acd400779c2e7edbaa1607dd882a220ea7f4d8c603e2a2f526c817bddb0ce7b207a800ac05bdb654fcf5557ae8ef545e85a06

Author: hebasto

src/Makefile.qt.include

@@ -329,10 +329,12 @@ QML_RES_ICONS = \
   qml/res/icons/cross.png \
   qml/res/icons/export.png \
   qml/res/icons/gear.png \
+  qml/res/icons/gear-outline.png \
   qml/res/icons/info.png \
   qml/res/icons/network-dark.png \
   qml/res/icons/network-light.png \
   qml/res/icons/shutdown.png \
+  qml/res/icons/singlesig-wallet.png \
   qml/res/icons/storage-dark.png \
   qml/res/icons/storage-light.png
 
@@ -369,6 +371,7 @@ QML_RES_QML = \
   qml/controls/PageIndicator.qml \
   qml/controls/NavigationBar.qml \
   qml/controls/NavigationBar2.qml \
+  qml/controls/NavigationTab.qml \
   qml/controls/OptionButton.qml \
   qml/controls/OptionSwitch.qml \
   qml/controls/OutlineButton.qml \
@@ -399,7 +402,8 @@ QML_RES_QML = \
   qml/pages/settings/SettingsDisplay.qml \
   qml/pages/settings/SettingsProxy.qml \
   qml/pages/settings/SettingsStorage.qml \
-  qml/pages/settings/SettingsTheme.qml
+  qml/pages/settings/SettingsTheme.qml \
+  qml/pages/wallet/DesktopWallets.qml
 
 if TARGET_ANDROID
 BITCOIN_QT_H += qml/androidnotifier.h

src/qml/appmode.h

@@ -12,6 +12,7 @@ class AppMode : public QObject
     Q_OBJECT
     Q_PROPERTY(bool isDesktop READ isDesktop NOTIFY modeChanged)
     Q_PROPERTY(bool isMobile READ isMobile NOTIFY modeChanged)
+    Q_PROPERTY(bool walletEnabled READ walletEnabled NOTIFY walletEnabledChanged)
     Q_PROPERTY(QString state READ state NOTIFY modeChanged)
 
 public:
@@ -20,12 +21,15 @@ class AppMode : public QObject
         MOBILE
     };
 
-    explicit AppMode(Mode mode) : m_mode(mode)
+    explicit AppMode(Mode mode, bool wallet_enabled)
+    : m_mode(mode)
+    , m_wallet_enabled(wallet_enabled)
     {
     }
 
     bool isMobile() { return m_mode == MOBILE; }
     bool isDesktop() { return m_mode == DESKTOP; }
+    bool walletEnabled() { return m_wallet_enabled; }
     QString state()
     {
         switch (m_mode) {
@@ -41,9 +45,11 @@ class AppMode : public QObject
 
 Q_SIGNALS:
     void modeChanged();
+    void walletEnabledChanged();
 
 private:
     const Mode m_mode;
+    const bool m_wallet_enabled;
 };
 
 #endif // BITCOIN_QML_APPMODE_H

src/qml/bitcoin.cpp

@@ -75,17 +75,33 @@ void SetupUIArgs(ArgsManager& argsman)
     argsman.AddArg("-splash", strprintf("Show splash screen on startup (default: %u)", DEFAULT_SPLASHSCREEN), ArgsManager::ALLOW_ANY, OptionsCategory::GUI);
 }
 
+AppMode SetupAppMode()
+{
+    bool wallet_enabled;
+    AppMode::Mode mode;
+    #ifdef __ANDROID__
+        mode = AppMode::MOBILE;
+    #else
+        mode = AppMode::DESKTOP;
+    #endif // __ANDROID__
+
+    #ifdef ENABLE_WALLET
+        wallet_enabled = true;
+    #else
+        wallet_enabled = false;
+    #endif // ENABLE_WALLET
+
+    return AppMode(mode, wallet_enabled);
+}
+
 bool InitErrorMessageBox(
     const bilingual_str& message,
     [[maybe_unused]] const std::string& caption,
     [[maybe_unused]] unsigned int style)
 {
     QQmlApplicationEngine engine;
-#ifdef __ANDROID__
-    AppMode app_mode(AppMode::MOBILE);
-#else
-    AppMode app_mode(AppMode::DESKTOP);
-#endif // __ANDROID__
+
+    AppMode app_mode = SetupAppMode();
 
     qmlRegisterSingletonInstance<AppMode>("org.bitcoincore.qt", 1, 0, "AppMode", &app_mode);
     engine.rootContext()->setContextProperty("message", QString::fromStdString(message.translated));
@@ -284,11 +300,8 @@ int QmlGuiMain(int argc, char* argv[])
     engine.rootContext()->setContextProperty("optionsModel", &options_model);
 
     engine.rootContext()->setContextProperty("needOnboarding", need_onboarding);
-#ifdef __ANDROID__
-    AppMode app_mode(AppMode::MOBILE);
-#else
-    AppMode app_mode(AppMode::DESKTOP);
-#endif // __ANDROID__
+
+    AppMode app_mode = SetupAppMode();
 
     qmlRegisterSingletonInstance<AppMode>("org.bitcoincore.qt", 1, 0, "AppMode", &app_mode);
     qmlRegisterType<BlockClockDial>("org.bitcoincore.qt", 1, 0, "BlockClockDial");

src/qml/bitcoin_qml.qrc

@@ -31,6 +31,7 @@
         <file>controls/PageIndicator.qml</file>
         <file>controls/NavigationBar.qml</file>
         <file>controls/NavigationBar2.qml</file>
+        <file>controls/NavigationTab.qml</file>
         <file>controls/OptionButton.qml</file>
         <file>controls/OptionSwitch.qml</file>
         <file>controls/OutlineButton.qml</file>
@@ -62,6 +63,7 @@
         <file>pages/settings/SettingsProxy.qml</file>
         <file>pages/settings/SettingsStorage.qml</file>
         <file>pages/settings/SettingsTheme.qml</file>
+        <file>pages/wallet/DesktopWallets.qml</file>
     </qresource>
     <qresource prefix="/icons">
         <file alias="arrow-down">res/icons/arrow-down.png</file>
@@ -78,10 +80,12 @@
         <file alias="cross">res/icons/cross.png</file>
         <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="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>
         <file alias="shutdown">res/icons/shutdown.png</file>
+        <file alias="singlesig-wallet">res/icons/singlesig-wallet.png</file>
         <file alias="storage-dark">res/icons/storage-dark.png</file>
         <file alias="storage-light">res/icons/storage-light.png</file>
     </qresource>

src/qml/components/BlockClock.qml

@@ -15,6 +15,7 @@ Item {
     id: root
     property real parentWidth: 600
     property real parentHeight: 600
+    property bool showNetworkIndicator: true
 
     width: dial.width
     height: dial.height + networkIndicator.height + networkIndicator.anchors.topMargin
@@ -146,6 +147,7 @@ Item {
 
     NetworkIndicator {
         id: networkIndicator
+        show: root.showNetworkIndicator
         anchors.top: dial.bottom
         anchors.topMargin: networkIndicator.visible ? 30 : 0
         anchors.horizontalCenter: root.horizontalCenter

src/qml/components/NetworkIndicator.qml

@@ -12,12 +12,14 @@ import org.bitcoincore.qt 1.0
 Button {
     id: root
     property color bgColor
+    property bool shorten: false
+    property bool show: true
     property int textSize: 15
     topPadding: 2
     bottomPadding: 2
     leftPadding: 7
     rightPadding: 7
-    state: chainModel.currentNetworkName
+    state: show ? chainModel.currentNetworkName : "MAIN"
     contentItem: CoreText {
         text: root.text
         font.pixelSize: root.textSize
@@ -47,7 +49,7 @@ Button {
             PropertyChanges {
                 target: root
                 visible: true
-                text: qsTr("Test Network")
+                text: shorten ? qsTr("Testnet") : qsTr("Test Network")
                 bgColor: Theme.color.green
             }
         },
@@ -56,7 +58,7 @@ Button {
             PropertyChanges {
                 target: root
                 visible: true
-                text: qsTr("Signet Network")
+                text: shorten ? qsTr("Signet") : qsTr("Signet Network")
                 bgColor: Theme.color.amber
             }
         },
@@ -65,7 +67,7 @@ Button {
             PropertyChanges {
                 target: root
                 visible: true
-                text: qsTr("Regtest Mode")
+                text: shorten ? qsTr("Regtest") : qsTr("Regtest Mode")
                 bgColor: Theme.color.blue
             }
         }

src/qml/controls/NavigationTab.qml

@@ -0,0 +1,84 @@
+// 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 org.bitcoincore.qt 1.0
+
+Button {
+    property color bgActiveColor: Theme.color.orange
+    property color textColor: Theme.color.neutral7
+    property color textHoverColor: Theme.color.neutral9
+    property color textActiveColor: Theme.color.orange
+    property color iconColor: "transparent"
+    property string iconSource: ""
+
+    id: root
+    checkable: true
+    hoverEnabled: AppMode.isDesktop
+    implicitHeight: 60
+    implicitWidth: 80
+    bottomPadding: 0
+    topPadding: 0
+
+    contentItem: Item {
+        width: parent.width
+        height: parent.height
+        CoreText {
+            id: buttonText
+            font.pixelSize: 15
+            text: root.text
+            color: root.textColor
+            bold: true
+            visible: root.text !== ""
+            anchors.centerIn: parent
+        }
+        Icon {
+            id: icon
+            source: root.iconSource
+            color: iconColor
+            visible: root.iconSource !== ""
+            anchors.centerIn: parent
+        }
+    }
+
+    background: Item {
+        Rectangle {
+            id: bg
+            height: parent.height - 5
+            width: parent.width
+            radius: 5
+            color: Theme.color.neutral3
+            visible: root.hovered
+
+            FocusBorder {
+                visible: root.visualFocus
+            }
+
+            Behavior on color {
+                ColorAnimation { duration: 150 }
+            }
+        }
+        Rectangle {
+            anchors.bottom: parent.bottom
+            width: parent.width
+            height: 3
+            visible: root.checked
+            color: root.bgActiveColor
+        }
+    }
+
+    states: [
+        State {
+            name: "CHECKED"; when: root.checked
+            PropertyChanges { target: buttonText; color: root.textActiveColor }
+            PropertyChanges { target: icon; color: root.textActiveColor }
+        },
+        State {
+            name: "HOVER"; when: root.hovered
+            PropertyChanges { target: buttonText; color: root.textHoverColor }
+            PropertyChanges { target: icon; color: root.textHoverColor }
+        }
+    ]
+}

src/qml/imageprovider.cpp

@@ -92,6 +92,11 @@ QPixmap ImageProvider::requestPixmap(const QString& id, QSize* size, const QSize
         return QIcon(":/icons/gear").pixmap(requested_size);
     }
 
+    if (id == "gear-outline") {
+        *size = requested_size;
+        return QIcon(":/icons/gear-outline").pixmap(requested_size);
+    }
+
     if (id == "info") {
         *size = requested_size;
         return QIcon(":/icons/info").pixmap(requested_size);
@@ -112,6 +117,11 @@ QPixmap ImageProvider::requestPixmap(const QString& id, QSize* size, const QSize
         return QIcon(":/icons/shutdown").pixmap(requested_size);
     }
 
+    if (id == "singlesig-wallet") {
+        *size = requested_size;
+        return QIcon(":/icons/singlesig-wallet").pixmap(requested_size);
+    }
+
     if (id == "storage-dark") {
         *size = requested_size;
         return QIcon(":/icons/storage-dark").pixmap(requested_size);

src/qml/pages/main.qml

@@ -11,6 +11,7 @@ import "../components"
 import "../controls"
 import "./onboarding"
 import "./node"
+import "./wallet"
 
 ApplicationWindow {
     id: appWindow
@@ -33,7 +34,17 @@ ApplicationWindow {
 
     StackView {
         id: main
-        initialItem: needOnboarding ? onboardingWizard : node
+        initialItem: {
+            if (needOnboarding) {
+                onboardingWizard
+            } else {
+                if (AppMode.walletEnabled && AppMode.isDesktop) {
+                    desktopWallets
+                } else {
+                    node
+                }
+            }
+        }
         anchors.fill: parent
         focus: true
         Keys.onReleased: {
@@ -66,10 +77,21 @@ ApplicationWindow {
             OnboardingStorageAmount {}
             OnboardingConnection {}
 
-            onFinishedChanged: main.push(node)
+            onFinishedChanged: {
+                if (AppMode.walletEnabled && AppMode.isDesktop) {
+                    main.push(desktopWallets)
+                } else {
+                    main.push(node)
+                }
+            }
         }
     }
 
+    Component {
+        id: desktopWallets
+        DesktopWallets {}
+    }
+
     Component {
         id: shutdown
         Shutdown {}

src/qml/pages/node/NodeSettings.qml

@@ -12,6 +12,8 @@ import "../settings"
 Item {
     signal doneClicked
 
+    property alias showDoneButton: doneButton.visible
+
     id: root
 
     StackView {
@@ -33,6 +35,7 @@ Item {
                     header: "Settings"
                 }
                 rightItem: NavButton {
+                    id: doneButton
                     text: qsTr("Done")
                     onClicked: root.doneClicked()
                 }