qml: Introduce Wallet main pages

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 holde the pages. For mobile, a DirectionalStackView is used to push and pop the wallet sub pages based on the UX designed flow.
bitcoin-core · Mar 6, 2024 · fd5704d · fd5704d
1 parent be965bf
commit fd5704d
Show file tree

Hide file tree

Showing 28 changed files with 761 additions and 23 deletions.
diff --git a/src/Makefile.qt.include b/src/Makefile.qt.include
@@ -319,6 +319,7 @@ QML_RES_ICONS = \
   qml/res/icons/arrow-down.png \
   qml/res/icons/arrow-up.png \
   qml/res/icons/bitcoin-circle.png \
+  qml/res/icons/blockclock-icon.png \
   qml/res/icons/blockclock-size-compact.png \
   qml/res/icons/blockclock-size-showcase.png \
   qml/res/icons/blocktime-dark.png \
@@ -329,12 +330,17 @@ 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
+  qml/res/icons/storage-light.png \
+  qml/res/icons/triangle-down.png \
+  qml/res/icons/triangle-up.png
+
 
 QML_QRC_CPP = qml/qrc_bitcoin.cpp
 QML_QRC = qml/bitcoin_qml.qrc
@@ -360,6 +366,7 @@ QML_RES_QML = \
   qml/components/TotalBytesIndicator.qml \
   qml/controls/ContinueButton.qml \
   qml/controls/CoreText.qml \
+  qml/controls/DirectionalStackView.qml \
   qml/controls/ExternalLink.qml \
   qml/controls/FocusBorder.qml \
   qml/controls/Header.qml \
@@ -369,6 +376,8 @@ QML_RES_QML = \
   qml/controls/PageIndicator.qml \
   qml/controls/NavigationBar.qml \
   qml/controls/NavigationBar2.qml \
+  qml/controls/NavigationBlockClockTab.qml \
+  qml/controls/NavigationTab.qml \
   qml/controls/OptionButton.qml \
   qml/controls/OptionSwitch.qml \
   qml/controls/OutlineButton.qml \
@@ -399,7 +408,10 @@ 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 \
+  qml/pages/wallet/MobileWallets.qml \
+  qml/pages/wallet/mobile/Activity.qml
 
 if TARGET_ANDROID
 BITCOIN_QT_H += qml/androidnotifier.h

diff --git a/src/qml/appmode.h b/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
diff --git a/src/qml/bitcoin.cpp b/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");

diff --git a/src/qml/bitcoin_qml.qrc b/src/qml/bitcoin_qml.qrc
@@ -21,6 +21,7 @@
         <file>components/TotalBytesIndicator.qml</file>
         <file>controls/ContinueButton.qml</file>
         <file>controls/CoreText.qml</file>
+        <file>controls/DirectionalStackView.qml</file>
         <file>controls/ExternalLink.qml</file>
         <file>controls/FocusBorder.qml</file>
         <file>controls/Header.qml</file>
@@ -30,6 +31,8 @@
         <file>controls/PageIndicator.qml</file>
         <file>controls/NavigationBar.qml</file>
         <file>controls/NavigationBar2.qml</file>
+        <file>controls/NavigationBlockClockTab.qml</file>
+        <file>controls/NavigationTab.qml</file>
         <file>controls/OptionButton.qml</file>
         <file>controls/OptionSwitch.qml</file>
         <file>controls/OutlineButton.qml</file>
@@ -61,11 +64,15 @@
         <file>pages/settings/SettingsProxy.qml</file>
         <file>pages/settings/SettingsStorage.qml</file>
         <file>pages/settings/SettingsTheme.qml</file>
+        <file>pages/wallet/DesktopWallets.qml</file>
+        <file>pages/wallet/MobileWallets.qml</file>
+        <file>pages/wallet/mobile/Activity.qml</file>
     </qresource>
     <qresource prefix="/icons">
         <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>
+        <file alias="blockclock-icon">res/icons/blockclock-icon.png</file>
         <file alias="blockclock-size-compact">res/icons/blockclock-size-compact.png</file>
         <file alias="blockclock-size-showcase">res/icons/blockclock-size-showcase.png</file>
         <file alias="blocktime-dark">res/icons/blocktime-dark.png</file>
@@ -77,12 +84,17 @@
         <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>
+        <file alias="storage-light">res/icons/storage-light.png</file>
+        <file alias="triangle-down">res/icons/triangle-down.png</file>
+        <file alias="triangle-up">res/icons/triangle-up.png</file>
     </qresource>
     <qresource prefix="/fonts">
         <file alias="inter/regular">res/fonts/Inter-Regular.otf</file>

diff --git a/src/qml/components/BlockClock.qml b/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

diff --git a/src/qml/components/NetworkIndicator.qml b/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("Test Network") : qsTr("Testnet")
                 bgColor: Theme.color.green
             }
         },
@@ -56,7 +58,7 @@ Button {
             PropertyChanges {
                 target: root
                 visible: true
-                text: qsTr("Signet Network")
+                text: shorten ? qsTr("Signet Network") : qsTr("Signet")
                 bgColor: Theme.color.amber
             }
         },
@@ -65,7 +67,7 @@ Button {
             PropertyChanges {
                 target: root
                 visible: true
-                text: qsTr("Regtest Mode")
+                text: shorten ? qsTr("Regtest Mode") : qsTr("Regtest")
                 bgColor: Theme.color.blue
             }
         }

diff --git a/src/qml/components/WalletBadge.qml b/src/qml/components/WalletBadge.qml
@@ -0,0 +1,16 @@
+// 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
+
+Row {
+    Column {
+
+    }
+    Column {
+
+    }
+}
diff --git a/src/qml/components/blockclockdial.cpp b/src/qml/components/blockclockdial.cpp
@@ -317,16 +317,28 @@ void BlockClockDial::paint(QPainter * painter)
     painter->setRenderHint(QPainter::Antialiasing);
 
     paintBackground(painter);
-    paintTimeTicks(painter);
+    if (!m_is_mini) {
+        paintTimeTicks(painter);
+    }
 
     if (paused()) return;
 
     if (connected() && synced()) {
-        paintBlocks(painter);
+        if (m_is_mini) {
+            paintProgress(painter);
+        } else {
+            paintBlocks(painter);
+        }
     } else if (connected()) {
         paintProgress(painter);
     } else if (m_animation_timer.isActive()) {
         paintConnectingAnimation(painter);
     }
     m_animating_max_angle = incrementAnimatingMaxAngle(m_animating_max_angle);
 }
+
+void BlockClockDial::setMini(bool is_mini)
+{
+    m_is_mini = is_mini;
+    update();
+}
diff --git a/src/qml/components/blockclockdial.h b/src/qml/components/blockclockdial.h
@@ -22,8 +22,9 @@ class BlockClockDial : public QQuickPaintedItem
     Q_PROPERTY(qreal penWidth READ penWidth WRITE setPenWidth)
     Q_PROPERTY(qreal scale READ scale WRITE setScale NOTIFY scaleChanged)
     Q_PROPERTY(QColor backgroundColor READ backgroundColor WRITE setBackgroundColor)
-    Q_PROPERTY(QList<QColor> confirmationColors READ confirmationColors WRITE setConfirmationColors )
+    Q_PROPERTY(QList<QColor> confirmationColors READ confirmationColors WRITE setConfirmationColors)
     Q_PROPERTY(QColor timeTickColor READ timeTickColor WRITE setTimeTickColor)
+    Q_PROPERTY(bool isMini READ isMini WRITE setMini)
 
 public:
     explicit BlockClockDial(QQuickItem * parent = nullptr);
@@ -39,6 +40,7 @@ class BlockClockDial : public QQuickPaintedItem
     QColor backgroundColor() const { return m_background_color; };
     QList<QColor> confirmationColors() const { return m_confirmation_colors; };
     QColor timeTickColor() const { return m_time_tick_color; };
+    bool isMini() const { return m_is_mini; };
 
 public Q_SLOTS:
     void setTimeRatioList(QVariantList new_time);
@@ -51,6 +53,7 @@ public Q_SLOTS:
     void setBackgroundColor(QColor color);
     void setConfirmationColors(QList<QColor> colorList);
     void setTimeTickColor(QColor color);
+    void setMini(bool is_mini);
 
 Q_SIGNALS:
     void scaleChanged();
@@ -84,6 +87,7 @@ public Q_SLOTS:
     QTimer m_animation_timer{this};
     QTimer m_delay_timer;
     qreal m_animating_max_angle = 0;
+    bool m_is_mini = false;
 };
 
 #endif // BITCOIN_QML_COMPONENTS_BLOCKCLOCKDIAL_H