qml: introduce the BlockClock

Implements a few of the BlockClock dial states. Sync progress while
downloading, rendering blocks after sync, and pausing/unpausing the
node. An additional Model is added, ChainModel, to provide the dial
block information. Changes to NodeModel are also made to support the
pausing/unpausing Dial feature.

Co-authored-by: shaavan <shaavan.github@gmail.com>

Author: johnny9

.gitignore

@@ -46,6 +46,7 @@ share/qt/Info.plist
 
 src/qt/*.moc
 src/qt/moc_*.cpp
+src/qml/components/moc_*.cpp
 src/qt/forms/ui_*.h
 
 src/qt/test/moc*.cpp

src/Makefile.qt.include

@@ -35,6 +35,7 @@ QT_FORMS_UI = \
   qt/forms/transactiondescdialog.ui
 
 QT_MOC_CPP = \
+  qml/components/moc_blockclockdial.cpp \
   qml/moc_appmode.cpp \
   qml/moc_chainmodel.cpp \
   qml/moc_nodemodel.cpp \
@@ -113,6 +114,7 @@ BITCOIN_QT_H = \
   qml/appmode.h \
   qml/bitcoin.h \
   qml/chainmodel.h \
+  qml/components/blockclockdial.h \
   qml/imageprovider.h \
   qml/nodemodel.h \
   qml/options_model.h \
@@ -294,6 +296,7 @@ BITCOIN_QT_WALLET_CPP = \
 BITCOIN_QML_BASE_CPP = \
   qml/bitcoin.cpp \
   qml/chainmodel.cpp \
+  qml/components/blockclockdial.cpp \
   qml/imageprovider.cpp \
   qml/nodemodel.cpp \
   qml/options_model.cpp \
@@ -325,6 +328,7 @@ QML_QRC_CPP = qml/qrc_bitcoin.cpp
 QML_QRC = qml/bitcoin_qml.qrc
 QML_RES_QML = \
   qml/components/AboutOptions.qml \
+  qml/components/BlockClock.qml \
   qml/components/BlockCounter.qml \
   qml/components/ConnectionOptions.qml \
   qml/components/ConnectionSettings.qml \

src/qml/bitcoin.cpp

@@ -14,6 +14,7 @@
 #include <noui.h>
 #include <qml/appmode.h>
 #include <qml/chainmodel.h>
+#include <qml/components/blockclockdial.h>
 #include <qml/imageprovider.h>
 #include <qml/nodemodel.h>
 #include <qml/options_model.h>
@@ -205,6 +206,7 @@ int QmlGuiMain(int argc, char* argv[])
 #endif // __ANDROID__
 
     qmlRegisterSingletonInstance<AppMode>("org.bitcoincore.qt", 1, 0, "AppMode", &app_mode);
+    qmlRegisterType<BlockClockDial>("org.bitcoincore.qt", 1, 0, "BlockClockDial");
 
     engine.load(QUrl(QStringLiteral("qrc:///qml/pages/main.qml")));
     if (engine.rootObjects().isEmpty()) {

src/qml/bitcoin_qml.qrc

@@ -1,6 +1,7 @@
 <!DOCTYPE RCC><RCC version="1.0">
     <qresource prefix="/qml">
         <file>components/AboutOptions.qml</file>
+        <file>components/BlockClock.qml</file>
         <file>components/BlockCounter.qml</file>
         <file>components/ConnectionOptions.qml</file>
         <file>components/ConnectionSettings.qml</file>

src/qml/components/BlockClock.qml

@@ -0,0 +1,149 @@
+// Copyright (c) 2023 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 org.bitcoincore.qt 1.0
+
+import "../controls"
+
+Item {
+    id: root
+
+    Layout.alignment: Qt.AlignCenter
+    implicitWidth: 200
+    implicitHeight: 200
+
+    property alias header: mainText.text
+    property alias headerSize: mainText.font.pixelSize
+    property alias subText: subText.text
+    property int headerSize: 32
+    property bool synced: nodeModel.verificationProgress > 0.999
+    property bool paused: false
+    property bool conns: true
+
+    BlockClockDial {
+        id: dial
+        anchors.fill: parent
+        timeRatioList: chainModel.timeRatioList
+        verificationProgress: nodeModel.verificationProgress
+        paused: root.paused
+        synced: nodeModel.verificationProgress > 0.999
+        backgroundColor: Theme.color.neutral2
+        timeTickColor: Theme.color.neutral5
+    }
+
+    Button {
+        id: bitcoinIcon
+        background: null
+        icon.source: "image://images/bitcoin-circle"
+        icon.color: Theme.color.neutral9
+        icon.width: 40
+        icon.height: 40
+        anchors.bottom: mainText.top
+        anchors.horizontalCenter: root.horizontalCenter
+    }
+
+    Label {
+        id: mainText
+        anchors.centerIn: parent
+        font.family: "Inter"
+        font.styleName: "Semi Bold"
+        font.pixelSize: 32
+        color: Theme.color.neutral9
+    }
+
+    Label {
+        id: subText
+        anchors.top: mainText.bottom
+        anchors.horizontalCenter: root.horizontalCenter
+        font.family: "Inter"
+        font.styleName: "Semi Bold"
+        font.pixelSize: 18
+        color: Theme.color.neutral4
+    }
+
+    RowLayout {
+        id: peersIndicator
+        anchors.top: subText.bottom
+        anchors.topMargin: 20
+        anchors.horizontalCenter: root.horizontalCenter
+        spacing: 5
+        Repeater {
+            model: 5
+            Rectangle {
+                width: 3
+                height: width
+                radius: width/2
+                color: Theme.color.neutral9
+            }
+        }
+    }
+
+    MouseArea {
+        anchors.fill: dial
+        onClicked: {
+            root.paused = !root.paused
+            nodeModel.pause = root.paused
+        }
+    }
+
+    states: [
+        State {
+            name: "intialBlockDownload"; when: !synced && !paused && conns
+            PropertyChanges {
+                target: root
+                header: Math.round(nodeModel.verificationProgress * 100) + "%"
+                subText: Math.round(nodeModel.remainingSyncTime/60000) > 0 ? Math.round(nodeModel.remainingSyncTime/60000) + "mins" : Math.round(nodeModel.remainingSyncTime/1000) + "secs"
+            }
+        },
+
+        State {
+            name: "blockClock"; when: synced && !paused && conns
+            PropertyChanges {
+                target: root
+                header: Number(nodeModel.blockTipHeight).toLocaleString(Qt.locale(), 'f', 0)
+                subText: "Blocktime"
+            }
+        },
+
+        State {
+            name: "Manual Pause"; when: paused
+            PropertyChanges {
+                target: root
+                header: "Paused"
+                headerSize: 24
+                subText: "Tap to resume"
+            }
+            PropertyChanges {
+                target: bitcoinIcon
+                anchors.bottomMargin: 5
+            }
+            PropertyChanges {
+                target: subText
+                anchors.topMargin: 4
+            }
+        },
+
+        State {
+            name: "Connecting"; when: !paused && !conns
+            PropertyChanges {
+                target: root
+                header: "Connecting"
+                headerSize: 24
+                subText: "Please Wait"
+            }
+            PropertyChanges {
+                target: bitcoinIcon
+                anchors.bottomMargin: 5
+            }
+            PropertyChanges {
+                target: subText
+                anchors.topMargin: 4
+            }
+        }
+    ]
+}