Merge #251: Introduce and Use NetworkIndicator component

01b3909 qml: use NetworkIndicator, change layout of NodeRunner to accommodate (jarolrod)
0e01340 qml: introduce NetworkIndicator component (jarolrod)
b48f4f2 qml: introduce amber color to our Theme file (jarolrod)
7b8d134 qml: set and expose the current network name from the ChainModel (jarolrod)

Pull request description:

  Signals to the user when they are running on a network other than main.

  Closes #233

  #### Light
  | testnet | signet | regtest |
  | ------- | ------ | ------- |
  | <img width="752" alt="Screen Shot 2023-02-08 at 6 48 47 PM" src="https://user-images.githubusercontent.com/23396902/217695964-9ceaea19-461c-485a-b41e-b3d0d3ff4211.png"> |  <img width="752" alt="Screen Shot 2023-02-08 at 6 39 00 PM" src="https://user-images.githubusercontent.com/23396902/217695987-07455475-ede9-4394-bdb5-14e0a8246123.png"> | <img width="752" alt="Screen Shot 2023-02-08 at 6 39 21 PM" src="https://user-images.githubusercontent.com/23396902/217696012-a2dda1e0-e7a1-4ecc-9655-2a7ea55c9f75.png"> |

  #### Dark
  | testnet | signet | regtest |
  | ------- | ------ | ------- |
  | <img width="752" alt="Screen Shot 2023-02-07 at 5 24 23 PM" src="https://user-images.githubusercontent.com/23396902/217380996-91c16d78-fc49-49b5-9e33-73708dce3c15.png"> | <img width="752" alt="Screen Shot 2023-02-07 at 5 24 50 PM" src="https://user-images.githubusercontent.com/23396902/217381059-3147923e-b73f-4e2f-935d-77ce74554b71.png"> | <img width="752" alt="Screen Shot 2023-02-07 at 5 25 34 PM" src="https://user-images.githubusercontent.com/23396902/217381100-9f1c67e8-70e5-4658-ac73-7a78d6d26339.png"> |

  [![Windows](https://img.shields.io/badge/OS-Windows-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/win64/insecure_win_gui.zip?branch=pull/<PR>)
  [![Intel macOS](https://img.shields.io/badge/OS-Intel%20macOS-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/macos/insecure_mac_gui.zip?branch=pull/<PR>)
  [![Apple Silicon macOS](https://img.shields.io/badge/OS-Apple%20Silicon%20macOS-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/macos_arm64/insecure_mac_arm64_gui.zip?branch=pull/<PR>)
  [![ARM64 Android](https://img.shields.io/badge/OS-Android-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/android/insecure_android_apk.zip?branch=pull/<PR>)

ACKs for top commit:
  johnny9:
    ACK 01b3909

Tree-SHA512: 0e166aca51930b70108d17d094d753d0933183112db7658b4a207f1e8d254a4dfda7b33c6a14470c8e0b8e3e18d3428f079b66c28b8e4a8b63f52f5d6fc1ea16

Author: hebasto

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
@@ -46,6 +47,7 @@ Control {
         red: "#EC6363"
         green: "#36B46B"
         blue: "#3CA3DE"
+        amber: "#C9B500"
         purple: "#C075DC"
         neutral0: "#000000"
         neutral1: "#1A1A1A"
@@ -77,6 +79,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
+        }
     }
 }