Introduce and Use NetworkIndicator component

src/Makefile.qt.include

@@ -335,6 +335,7 @@ QML_RES_QML = \
   qml/components/ConnectionSettings.qml \
   qml/components/DeveloperOptions.qml \
   qml/components/PeersIndicator.qml \
+  qml/components/NetworkIndicator.qml \
   qml/components/StorageLocations.qml \
   qml/components/StorageOptions.qml \
   qml/components/StorageSettings.qml \

src/qml/bitcoin.cpp

@@ -175,6 +175,7 @@ int QmlGuiMain(int argc, char* argv[])
     // QObject::connect(&init_executor, &InitExecutor::runawayException, &node_model, &NodeModel::handleRunawayException);
 
     ChainModel chain_model{*chain};
+    chain_model.setCurrentNetworkName(QString::fromStdString(gArgs.GetChainName()));
 
     QObject::connect(&node_model, &NodeModel::setTimeRatioList, &chain_model, &ChainModel::setTimeRatioList);
     QObject::connect(&node_model, &NodeModel::setTimeRatioListInitial, &chain_model, &ChainModel::setTimeRatioListInitial);

src/qml/bitcoin_qml.qrc

@@ -8,6 +8,7 @@
         <file>components/ConnectionSettings.qml</file>
         <file>components/PeersIndicator.qml</file>
         <file>components/DeveloperOptions.qml</file>
+        <file>components/NetworkIndicator.qml</file>
         <file>components/StorageLocations.qml</file>
         <file>components/StorageOptions.qml</file>
         <file>components/StorageSettings.qml</file>

src/qml/chainmodel.cpp

@@ -5,6 +5,7 @@
 #include <qml/chainmodel.h>
 
 #include <QDateTime>
+#include <QString>
 #include <QThread>
 #include <QTime>
 #include <interfaces/chain.h>
@@ -21,6 +22,12 @@ ChainModel::ChainModel(interfaces::Chain& chain)
     timer_thread->start();
 }
 
+void ChainModel::setCurrentNetworkName(QString network_name)
+{
+    m_current_network_name = network_name.toUpper();
+    Q_EMIT currentNetworkNameChanged();
+}
+
 void ChainModel::setTimeRatioList(int new_time)
 {
     if (m_time_ratio_list.isEmpty()) {

src/qml/chainmodel.h

@@ -8,6 +8,7 @@
 #include <interfaces/chain.h>
 
 #include <QObject>
+#include <QString>
 #include <QTimer>
 #include <QVariant>
 
@@ -21,11 +22,14 @@ static const int SECS_IN_12_HOURS = 43200;
 class ChainModel : public QObject
 {
     Q_OBJECT
+    Q_PROPERTY(QString currentNetworkName READ currentNetworkName WRITE setCurrentNetworkName NOTIFY currentNetworkNameChanged)
     Q_PROPERTY(QVariantList timeRatioList READ timeRatioList NOTIFY timeRatioListChanged)
 
 public:
     explicit ChainModel(interfaces::Chain& chain);
 
+    QString currentNetworkName() const { return m_current_network_name; };
+    void setCurrentNetworkName(QString network_name);
     QVariantList timeRatioList() const { return m_time_ratio_list; };
 
     int timestampAtMeridian();
@@ -38,8 +42,10 @@ public Q_SLOTS:
 
 Q_SIGNALS:
     void timeRatioListChanged();
+    void currentNetworkNameChanged();
 
 private:
+    QString m_current_network_name;
     /* time_ratio: Ratio between the time at which an event
      * happened and 12 hours. So, for example, if a block is
      * found at 4 am or pm, the time_ratio would be 0.3.

src/qml/components/BlockClock.qml

@@ -13,7 +13,6 @@ import "../controls"
 Item {
     id: root
 
-    Layout.alignment: Qt.AlignCenter
     implicitWidth: 200
     implicitHeight: 200
 

src/qml/components/NetworkIndicator.qml

@@ -0,0 +1,69 @@
+// 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 "../controls"
+import "../components"
+
+import org.bitcoincore.qt 1.0
+
+Button {
+    id: root
+    property color bgColor
+    property int textSize: 18
+    font.family: "Inter"
+    font.styleName: "Regular"
+    font.pixelSize: root.textSize
+    padding: 7
+    state: chainModel.currentNetworkName
+    contentItem: Text {
+        text: root.text
+        font: root.font
+        color: Theme.color.white
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+    }
+    background: Rectangle {
+        id: bg
+        color: root.bgColor
+        radius: 2
+    }
+    states: [
+        State {
+            name: "MAIN"
+            PropertyChanges {
+                target: root
+                visible: false
+            }
+        },
+        State {
+            name: "TEST"
+            PropertyChanges {
+                target: root
+                visible: true
+                text: qsTr("Test Network")
+                bgColor: Theme.color.green
+            }
+        },
+        State {
+            name: "SIGNET"
+            PropertyChanges {
+                target: root
+                visible: true
+                text: qsTr("Signet Network")
+                bgColor: Theme.color.amber
+            }
+        },
+        State {
+            name: "REGTEST"
+            PropertyChanges {
+                target: root
+                visible: true
+                text: qsTr("Regtest Mode")
+                bgColor: Theme.color.blue
+            }
+        }
+    ]
+}

src/qml/controls/Theme.qml

@@ -16,6 +16,7 @@ Control {
         required property color red
         required property color green
         required property color blue
+        required property color amber
         required property color purple
         required property color neutral0
         required property color neutral1
@@ -45,6 +46,7 @@ Control {
         red: "#EC6363"
         green: "#36B46B"
         blue: "#3CA3DE"
+        amber: "#C9B500"
         purple: "#C075DC"
         neutral0: "#000000"
         neutral1: "#1A1A1A"
@@ -68,6 +70,7 @@ Control {
         red: "#EB5757"
         green: "#27AE60"
         blue: "#2D9CDB"
+        amber: "#C9B500"
         purple: "#BB6BD9"
         neutral0: "#FFFFFF"
         neutral1: "#F8F8F8"

src/qml/pages/node/NodeRunner.qml

@@ -18,7 +18,14 @@ Page {
 
     Component.onCompleted: nodeModel.startNodeInitializionThread();
 
-    BlockClock {
+    ColumnLayout {
+        spacing: 30
         anchors.centerIn: parent
+        BlockClock {
+            Layout.alignment: Qt.AlignCenter
+        }
+        NetworkIndicator {
+            Layout.alignment: Qt.AlignCenter
+        }
     }
 }