From ed2d7bf96bfe29fbedc7e313b32c13fa09b7b082 Mon Sep 17 00:00:00 2001
From: moneymanolis <moneymanolis@protonmail.com>
Date: Tue, 3 Jan 2023 20:21:53 +0100
Subject: [PATCH] spectrum node info + aligning bitcoin core info with it

---
 .../node/components/bitcoin_core_info.jinja   |  11 +-
 .../spectrum/components/spectrum_info.jinja   | 141 +++++++++---------
 2 files changed, 73 insertions(+), 79 deletions(-)

diff --git a/src/cryptoadvance/specter/templates/node/components/bitcoin_core_info.jinja b/src/cryptoadvance/specter/templates/node/components/bitcoin_core_info.jinja
index 74b56cfe8..ecdd943d1 100644
--- a/src/cryptoadvance/specter/templates/node/components/bitcoin_core_info.jinja
+++ b/src/cryptoadvance/specter/templates/node/components/bitcoin_core_info.jinja
@@ -3,12 +3,13 @@
     {% if specter.chain %}
         <table>
             <tr> <td data-style="text-align: left;">{{ _("Network") }}:</td> <td data-style="text-align: right;" id="node-info-specter-chain">{{specter.chain}}</td> </tr>
+            <tr> <td data-style="text-align: left;">{{ _("Blocks count") }}:</td> <td data-style="text-align: right;">{{specter.info['blocks']}}</td> </tr>
+            <tr> <td data-style="text-align: left;">{{ _("Host") }}:</td> <td data-style="text-align: right;" id="node-info-specter-chain">{{specter.node.host}}</td> </tr>
+            <tr> <td data-style="text-align: left;">{{ _("Port") }}:</td> <td data-style="text-align: right;" id="node-info-specter-chain">{{specter.node.port}}</td> </tr>
             <tr> <td data-style="text-align: left; width: 35%;">{{ _("Bitcoin Core Version") }}:</td> <td data-style="text-align: right;">v{{specter.bitcoin_core_version}}</td> </tr>
             <tr> <td data-style="text-align: left;">{{ _("Connections count") }}:</td> <td data-style="text-align: right;">{{specter.network_info['connections']}}</td> </tr>
-            <tr> <td data-style="text-align: left;">{{ _("Difficulty") }}:</td> <td data-style="text-align: right;">{{specter.info.get('difficulty', 0) | int}}</td> </tr>
             <tr> <td data-style="text-align: left;">{{ _("Size on disk") }}:</td> <td data-style="text-align: right;">{{specter.info['size_on_disk']|bytessize }}</td> </tr>
-            <tr> <td data-style="text-align: left;">{{ _("Blocks count") }}:</td> <td data-style="text-align: right;">{{specter.info['blocks']}}</td> </tr>
-            <tr> <td data-style="text-align: left;">{{ _("Mempool Size") }}:</td> <td data-style="text-align: right;">{{specter.info['mempool_info'].size}} transactions</td> </tr>
+            <tr> <td data-style="text-align: left;">{{ _("Mempool size") }}:</td> <td data-style="text-align: right;">{{specter.info['mempool_info'].size}} transactions</td> </tr>
             <tr> <td data-style="text-align: left;">{{ _("Node uptime") }}:</td> <td data-style="text-align: right;">~ {{(specter.info['uptime'] / 60 // 60) | int }} {{ _("Hours") }}</td> </tr>
             {% if specter.info['pruned'] %}
                 <tr> <td data-style="text-align: left;">{{ _("Automatic pruning") }}:</td> <td data-style="text-align: right;">{{specter.info['automatic_pruning']}}</td> </tr>
@@ -39,7 +40,7 @@
         <script>
             let totalUserBalance = parseFloat(parseFloat("{{ specter.wallet_manager.wallets.values() | sum(attribute='fullbalance') }}").toFixed(8));
             async function fetchTotalSupply() {
-                document.getElementById('total_supply').innerHTML = `{{ _("Running the numbers... (this might take a few minutes)") }}`;
+                document.getElementById('total_supply').innerText = `{{ _("Calculating ... (this might take a few minutes)") }}`;
                 try {
                     const response = await fetch(
                         "{{ url_for('wallets_endpoint_api.txout_set_info') }}",
@@ -57,7 +58,7 @@
                         return
                     }
                     if (totalUserBalance==0) {
-                        document.getElementById('total_supply').innerHTML = `Your wallet holds 0 BTC and so, you're effectively a precoiner! Get off zero! `
+                        document.getElementById('total_supply').innerText = "Your wallet holds 0 BTC. Get off zero!"
                         return
                     }
                     let totalSupply = result.total_amount
diff --git a/src/cryptoadvance/specterext/spectrum/templates/spectrum/components/spectrum_info.jinja b/src/cryptoadvance/specterext/spectrum/templates/spectrum/components/spectrum_info.jinja
index 14cbc7e28..9c9601bc9 100644
--- a/src/cryptoadvance/specterext/spectrum/templates/spectrum/components/spectrum_info.jinja
+++ b/src/cryptoadvance/specterext/spectrum/templates/spectrum/components/spectrum_info.jinja
@@ -1,82 +1,75 @@
-<h1>{{ _("Spectrum Info") }}:</h1>
-{% if specter.chain %}
+<div class="p-4 w-200 flex flex-col">
+    <h1 class="mb-2">{{ _("Spectrum Node Info") }}</h1>
+    {% if specter.chain %}
+        <table>
+            <tr> <td data-style="text-align: left;">{{ _("Network") }}:</td> <td data-style="text-align: right;" id="node-info-specter-chain">{{specter.chain}}</td> </tr>
+            <tr> <td data-style="text-align: left;">{{ _("Blocks count") }}:</td> <td data-style="text-align: right;">{{specter.info['blocks']}}</td> </tr>
+            <tr> <td data-style="text-align: left;">{{ _("Host") }}:</td> <td data-style="text-align: right;" id="node-info-specter-chain">{{specter.node.host}}</td> </tr>
+            <tr> <td data-style="text-align: left;">{{ _("Port") }}:</td> <td data-style="text-align: right;" id="node-info-specter-chain">{{specter.node.port}}</td> </tr>
+            <tr> <td data-style="text-align: left;">{{ _("SSL") }}:</td> <td data-style="text-align: right;" id="node-info-specter-chain">{{specter.node.ssl}}</td> </tr>
+            <tr> <td data-style="text-align: left;">{{ _("Node uptime") }}:</td> <td data-style="text-align: right;">~ {{(specter.info['uptime'] / 60 // 60) | int }} {{ _("Hours") }}</td> </tr>
+        </table>
 
-    <p class="warning" id="type_reminder">
-        <img src="{{ url_for('static', filename='img/info_sign.svg') }}" style="width: 20px;"/><br>
-        {{ _("Connecting to public electrum servers may expose some information including your ip address and transaction history.") }}
-    </p>
-    
-    <table>
-        <tr> <td style="text-align: left;">{{ _("Host") }}:</td> <td style="text-align: right;" id="node-info-specter-chain">{{specter.node.host}}</td> </tr>
-        <tr> <td style="text-align: left;">{{ _("Port") }}:</td> <td style="text-align: right;" id="node-info-specter-chain">{{specter.node.port}}</td> </tr>
-        <tr> <td style="text-align: left;">{{ _("SSL") }}:</td> <td style="text-align: right;" id="node-info-specter-chain">{{specter.node.ssl}}</td> </tr>
-        <tr> <td style="text-align: left;">{{ _("Network") }}:</td> <td style="text-align: right;" id="node-info-specter-chain">{{specter.chain}}</td> </tr>
-        <tr> <td style="text-align: left;">{{ _("Blocks count") }}:</td> <td style="text-align: right;">{{specter.info['blocks']}}</td> </tr>
-        <tr> <td style="text-align: left;">{{ _("Last block hash") }}:</td> <td style="text-align: right"><code style="word-break: break-word;">{{specter.info['bestblockhash']}}</code></td> </tr>
-        <tr> <td style="text-align: left;">{{ _("Node uptime") }}:</td> <td style="text-align: right;">~ {{(specter.info['uptime'] / 60 // 60) | int }} {{ _("Hours") }}</td> </tr>
-        {% if specter.info['pruned'] %}
-            <tr> <td style="text-align: left;">{{ _("Automatic pruning") }}:</td> <td style="text-align: right;">{{specter.info['automatic_pruning']}}</td> </tr>
-            <tr> <td style="text-align: left;">{{ _("Prune height") }}:</td> <td style="text-align: right;">{{specter.info['pruneheight']}}</td> </tr>
-            <tr> <td style="text-align: left;">{{ _("Prune target size") }}:</td> <td style="text-align: right;">{{specter.info['prune_target_size']}}</td> </tr>
-        {% endif %}
-    </table>
-
-
-    <p id="total_supply" style="line-height: 2.5;"></p>
-    <div class="row">
-        <button type="button" onclick="fetchTotalSupply()" class="btn centered">
-            {{ _("Run the numbers!") }}
-            <tool-tip width="200px">
-                <h4 slot="title">{{ _("Calculate the total Bitcoin supply") }}</h4>
+        <p class="text-sm m-4" id="total_supply" data-style="line-height: 2.5;"></p>
+        <div onclick="fetchTotalSupply()" class="button text-base">
+            {{ _("Run the numbers") }}
+            <tool-tip>
                 <span slot="paragraph">
-                    {{ _("This will run the ") }} <code>gettxoutsetinfo</code> {{_(" command which will calculate the total amount of Bitcoin's UTXO set.") }}<br>
-                    {{ _("This might take a few minutes...") }}
+                    {{ _("Calculate the total Bitcoin supply.") }}
                 </span>
             </tool-tip>
-        </button>
-    </div><br>
-    <script>
-        let totalUserBalance = parseFloat(parseFloat("{{ specter.wallet_manager.wallets.values() | sum(attribute='fullbalance') }}").toFixed(8));
-        async function fetchTotalSupply() {
-            document.getElementById('total_supply').innerHTML = `{{ _("Running the numbers... (this might take a few minutes)") }}`;
-            try {
-                const response = await fetch(
-                    "{{ url_for('wallets_endpoint_api.txout_set_info') }}",
-                    {
-                        method: 'GET'
-                    }
-                ).catch((err) => {
-                    showError(err)
-                    return
-                });
-                let result = await response.json();
-                console.log(result)
-                if (result.error) {
-                    showError(result.error)
-                    return
-                }
-                if (totalUserBalance==0) {
-                    document.getElementById('total_supply').innerHTML = `{{ _("Your wallet holds 0 BTC. Get off zero!)") }} `
-                    return
-                }
-                let userBalanceFromTotal = parseFloat((100 / (result.total_amount / totalUserBalance)).toFixed(8));
-                document.getElementById('total_supply').innerHTML = `{{ _("Bitcoin Total Supply") }}: ${result.total_amount} BTC<br>` +
-                `<span class="note" style="margin: 7px auto;">{{ _("Your wallets hold") }} ` +
-                    `${totalUserBalance} BTC (~${userBalanceFromTotal.toFixed(8)}% ` +
-                `{{ _("from the total supply") }}</span>`
-            } catch(e) {
-                console.log('Caught error:', e);
-                showError(e)
-                return { success: false, error: e };
-            }
-        }
-    </script>
+        </div>
     {% if current_user.is_admin %}
-        <div class="row">
-            <a id="active-node-settings-btn" class="btn centered" href="{{ url_for('nodes_endpoint.node_settings', node_alias=specter.node.alias) }}">
-                <img src="{{ url_for('static', filename='img/gear.svg') }}" style="width: 26px; margin: 0px;" class="svg-white">
-                {{ _("Configure Electrum Connection") }}
+        <div class="button text-base">
+            <a id="active-node-settings-btn" href="{{ url_for('nodes_endpoint.node_settings', node_alias=specter.node.alias) }}">
+                <div class="flex items-center">
+                    {{ _("Configure connection") }}
+                    <img src="{{ url_for('static', filename='img/gear.svg') }}" class="svg-white">
+                </div>
             </a>
         </div>
     {% endif %}
-{% endif %}
+        <script>
+            let totalUserBalance = parseFloat(parseFloat("{{ specter.wallet_manager.wallets.values() | sum(attribute='fullbalance') }}").toFixed(8));
+            async function fetchTotalSupply() {
+                document.getElementById('total_supply').innerText = `{{ _("Calculating ... (this might take a few minutes)") }}`;
+                try {
+                    const response = await fetch(
+                        "{{ url_for('wallets_endpoint_api.txout_set_info') }}",
+                        {
+                            method: 'GET'
+                        }
+                    ).catch((err) => {
+                        showError(err)
+                        return
+                    });
+                    let result = await response.json();
+                    console.log(result)
+                    if (result.error) {
+                        showError(result.error)
+                        return
+                    }
+                    if (totalUserBalance==0) {
+                        document.getElementById('total_supply').innerText = "Your wallet holds 0 BTC. Get off zero!"
+                        return
+                    }
+                    let totalSupply = result.total_amount
+                    console.log(typeof(totalSupply))
+                    console.log(typeof(totalUserBalance))
+
+                    let userBalanceFromTotal = ((totalUserBalance/totalSupply) * 100).toFixed(1)
+                    console.log(userBalanceFromTotal)
+                    document.getElementById('total_supply').innerHTML = `
+                    {{ _("Total supply: ") }} ${result.total_amount} BTC<br>
+                    {{ _("Your wallets hold: ") }} ${totalUserBalance} BTC<br> 
+                    {{ _("which is ") }} ${userBalanceFromTotal} % of the total supply
+                    `;
+                } catch(e) {
+                    console.log('Caught error:', e);
+                    showError(e)
+                    return { success: false, error: e };
+                }
+            }
+        </script>
+    {% endif %}
+</div>