From d00b62883880e4a06f929b7259d15a6acb297010 Mon Sep 17 00:00:00 2001
From: Manolis Mandrapilias <70536101+moneymanolis@users.noreply.github.com>
Date: Wed, 15 Feb 2023 13:29:45 +0100
Subject: [PATCH] Feature: Sync feedback for Spectrum (#2197)

* core logic applied
* dynamic sync status for spectrum
* progress bar sync status for spectrum
---
 .../spectrum/components/spectrum_info.jinja   |  9 +++++
 .../components/spectrum_node_connection.jinja | 40 ++++++++++++++++++-
 2 files changed, 47 insertions(+), 2 deletions(-)

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 4777c71c2..37f889913 100644
--- a/src/cryptoadvance/specterext/spectrum/templates/spectrum/components/spectrum_info.jinja
+++ b/src/cryptoadvance/specterext/spectrum/templates/spectrum/components/spectrum_info.jinja
@@ -1,4 +1,13 @@
 <div class="bg-dark-800 flex flex-col">
+    {% if specter.info.get("initialblockdownload") == True %}
+        {% set verificationprogress = specter.info.get("verificationprogress") * 100 %}
+        <div class="flex flex-col p-4 mt-3 mb-4">
+            <p>{{ _("Spectrum is still syncing")}}<p>
+            <div class="w-full bg-dark-700 rounded-lg">
+                <div class="bg-dark-600 text-xs text-white text-center p-2 leading-none {% if verificationprogress < 100 %} rounded-l-md {% else %} rounded-md {% endif %}" style="width: {{ verificationprogress | round | int }}%">{{ verificationprogress | round | int }}%</div>
+            </div>
+        </div>
+    {% endif %}
     {% 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>
diff --git a/src/cryptoadvance/specterext/spectrum/templates/spectrum/components/spectrum_node_connection.jinja b/src/cryptoadvance/specterext/spectrum/templates/spectrum/components/spectrum_node_connection.jinja
index 78ec634a3..8693f69a8 100644
--- a/src/cryptoadvance/specterext/spectrum/templates/spectrum/components/spectrum_node_connection.jinja
+++ b/src/cryptoadvance/specterext/spectrum/templates/spectrum/components/spectrum_node_connection.jinja
@@ -2,9 +2,12 @@
 {% if specter.node.is_running %}
 <div class="px-3 py-2 h-full min-w-0 grow flex items-center cursor-pointer" id="active-node" onclick="showPageOverlay('node-info-popup', {top: '64px', left: '16px'});document.getElementById('side-content').classList.remove('active');" >
     {% if specter.info.get("initialblockdownload") %}
-    <p class="text-white">{{ _("Spectrum is still syncing...")}}<br>{{ _('(data might be outdated)')}}</p>
+        <img class="rounded-full bg-dark-700 w-4 h-4 animate-spin-slow" id="unfinished-ibd-indicator" src="{{ url_for('static', filename='img/refresh.svg') }}" data-cy="unfinished-sync-indicator"/>
+        <svg class="w-7 h-7 text-white hidden" id="connected-icon" version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><!--Generated by IJSVG (https://github.com/iconjar/IJSVG)--><path d="M54.5946,27.4366l5.66603e-08,-5.66066e-08c-0.745305,0.744598 -1.9414,0.780481 -2.73,0.0819001l1.11948e-07,9.86842e-08c-11.3381,-9.99478 -28.3408,-9.99478 -39.6789,-1.97368e-07l4.1375e-08,-3.6659e-08c-0.788564,0.698682 -1.98474,0.662797 -2.73,-0.0818999l-2.831,-2.8295l4.78383e-08,4.78239e-08c-0.782846,-0.782609 -0.783038,-2.05166 -0.000429116,-2.83451c0.0255969,-0.0256047 0.0518829,-0.0505111 0.078829,-0.0746918l-1.08875e-06,9.72979e-07c14.4215,-12.888 36.2226,-12.888 50.6441,-1.94596e-06l-4.18137e-09,-3.75185e-09c0.823858,0.73923 0.892463,2.00636 0.153233,2.83022c-0.0242251,0.0269984 -0.0491787,0.0533343 -0.0748332,0.0789783Zm-17.6311,13.896l1.74829e-07,9.87123e-08c1.00267,0.56613 1.35656,1.8379 0.79043,2.84057c-0.0942659,0.166954 -0.21111,0.320108 -0.34723,0.45513l-3.6928,3.6684l2.2751e-08,-2.25368e-08c-0.943884,0.934995 -2.46482,0.934995 -3.4087,4.50735e-08l-3.6928,-3.6684l-6.02819e-08,-5.98007e-08c-0.8175,-0.810974 -0.82279,-2.13111 -0.0118161,-2.94861c0.134967,-0.136053 0.288047,-0.252849 0.454916,-0.347088l2.96297e-07,-1.66902e-07c3.07549,-1.7324 6.83251,-1.7324 9.908,3.33805e-07Zm-14.8508,-3.792l3.86385e-08,-3.1954e-08c-0.835403,0.690877 -2.05882,0.634623 -2.8273,-0.13l-2.3847,-2.4084c-1.1739,-1.1855 -1.14,-2.6381 -0.1975,-3.4266l9.62086e-07,-8.05987e-07c8.84671,-7.41133 21.7347,-7.41133 30.5814,1.61198e-06l-5.08261e-08,-4.40698e-08c0.88879,0.770643 0.984568,2.11588 0.213926,3.00467c-0.0332999,0.0384052 -0.0679639,0.075606 -0.103925,0.111531l-2.6883,2.7151l2.63897e-08,-2.62774e-08c-0.768944,0.765671 -1.99317,0.823532 -2.8309,0.1338l-1.43462e-07,-1.17058e-07c-5.75168,-4.69307 -14.0109,-4.69307 -19.7626,2.34116e-07Z" fill="currentColor" fill-rule="evenodd"></path></svg>
+    {% else %}
+        <img class="rounded-full bg-dark-700 w-4 h-4 animate-spin-slow hidden" id="unfinished-ibd-indicator" src="{{ url_for('static', filename='img/refresh.svg') }}" data-cy="unfinished-sync-indicator"/>
+        <svg class="w-7 h-7 text-white" id="connected-icon" version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><!--Generated by IJSVG (https://github.com/iconjar/IJSVG)--><path d="M54.5946,27.4366l5.66603e-08,-5.66066e-08c-0.745305,0.744598 -1.9414,0.780481 -2.73,0.0819001l1.11948e-07,9.86842e-08c-11.3381,-9.99478 -28.3408,-9.99478 -39.6789,-1.97368e-07l4.1375e-08,-3.6659e-08c-0.788564,0.698682 -1.98474,0.662797 -2.73,-0.0818999l-2.831,-2.8295l4.78383e-08,4.78239e-08c-0.782846,-0.782609 -0.783038,-2.05166 -0.000429116,-2.83451c0.0255969,-0.0256047 0.0518829,-0.0505111 0.078829,-0.0746918l-1.08875e-06,9.72979e-07c14.4215,-12.888 36.2226,-12.888 50.6441,-1.94596e-06l-4.18137e-09,-3.75185e-09c0.823858,0.73923 0.892463,2.00636 0.153233,2.83022c-0.0242251,0.0269984 -0.0491787,0.0533343 -0.0748332,0.0789783Zm-17.6311,13.896l1.74829e-07,9.87123e-08c1.00267,0.56613 1.35656,1.8379 0.79043,2.84057c-0.0942659,0.166954 -0.21111,0.320108 -0.34723,0.45513l-3.6928,3.6684l2.2751e-08,-2.25368e-08c-0.943884,0.934995 -2.46482,0.934995 -3.4087,4.50735e-08l-3.6928,-3.6684l-6.02819e-08,-5.98007e-08c-0.8175,-0.810974 -0.82279,-2.13111 -0.0118161,-2.94861c0.134967,-0.136053 0.288047,-0.252849 0.454916,-0.347088l2.96297e-07,-1.66902e-07c3.07549,-1.7324 6.83251,-1.7324 9.908,3.33805e-07Zm-14.8508,-3.792l3.86385e-08,-3.1954e-08c-0.835403,0.690877 -2.05882,0.634623 -2.8273,-0.13l-2.3847,-2.4084c-1.1739,-1.1855 -1.14,-2.6381 -0.1975,-3.4266l9.62086e-07,-8.05987e-07c8.84671,-7.41133 21.7347,-7.41133 30.5814,1.61198e-06l-5.08261e-08,-4.40698e-08c0.88879,0.770643 0.984568,2.11588 0.213926,3.00467c-0.0332999,0.0384052 -0.0679639,0.075606 -0.103925,0.111531l-2.6883,2.7151l2.63897e-08,-2.62774e-08c-0.768944,0.765671 -1.99317,0.823532 -2.8309,0.1338l-1.43462e-07,-1.17058e-07c-5.75168,-4.69307 -14.0109,-4.69307 -19.7626,2.34116e-07Z" fill="currentColor" fill-rule="evenodd"></path></svg>
     {% endif %}
-        <svg class="w-7 h-7 text-white" version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><!--Generated by IJSVG (https://github.com/iconjar/IJSVG)--><path d="M54.5946,27.4366l5.66603e-08,-5.66066e-08c-0.745305,0.744598 -1.9414,0.780481 -2.73,0.0819001l1.11948e-07,9.86842e-08c-11.3381,-9.99478 -28.3408,-9.99478 -39.6789,-1.97368e-07l4.1375e-08,-3.6659e-08c-0.788564,0.698682 -1.98474,0.662797 -2.73,-0.0818999l-2.831,-2.8295l4.78383e-08,4.78239e-08c-0.782846,-0.782609 -0.783038,-2.05166 -0.000429116,-2.83451c0.0255969,-0.0256047 0.0518829,-0.0505111 0.078829,-0.0746918l-1.08875e-06,9.72979e-07c14.4215,-12.888 36.2226,-12.888 50.6441,-1.94596e-06l-4.18137e-09,-3.75185e-09c0.823858,0.73923 0.892463,2.00636 0.153233,2.83022c-0.0242251,0.0269984 -0.0491787,0.0533343 -0.0748332,0.0789783Zm-17.6311,13.896l1.74829e-07,9.87123e-08c1.00267,0.56613 1.35656,1.8379 0.79043,2.84057c-0.0942659,0.166954 -0.21111,0.320108 -0.34723,0.45513l-3.6928,3.6684l2.2751e-08,-2.25368e-08c-0.943884,0.934995 -2.46482,0.934995 -3.4087,4.50735e-08l-3.6928,-3.6684l-6.02819e-08,-5.98007e-08c-0.8175,-0.810974 -0.82279,-2.13111 -0.0118161,-2.94861c0.134967,-0.136053 0.288047,-0.252849 0.454916,-0.347088l2.96297e-07,-1.66902e-07c3.07549,-1.7324 6.83251,-1.7324 9.908,3.33805e-07Zm-14.8508,-3.792l3.86385e-08,-3.1954e-08c-0.835403,0.690877 -2.05882,0.634623 -2.8273,-0.13l-2.3847,-2.4084c-1.1739,-1.1855 -1.14,-2.6381 -0.1975,-3.4266l9.62086e-07,-8.05987e-07c8.84671,-7.41133 21.7347,-7.41133 30.5814,1.61198e-06l-5.08261e-08,-4.40698e-08c0.88879,0.770643 0.984568,2.11588 0.213926,3.00467c-0.0332999,0.0384052 -0.0679639,0.075606 -0.103925,0.111531l-2.6883,2.7151l2.63897e-08,-2.62774e-08c-0.768944,0.765671 -1.99317,0.823532 -2.8309,0.1338l-1.43462e-07,-1.17058e-07c-5.75168,-4.69307 -14.0109,-4.69307 -19.7626,2.34116e-07Z" fill="currentColor" fill-rule="evenodd"></path></svg>
         <div class="ml-2 text-lg min-w-0 truncate">{{ _("Bitcoin Network") }}</div>
         <div class="hidden" id="node-info-popup">{% include node.node_info_template() %}</div>
     </div>
@@ -16,3 +19,36 @@
         </a>
     </div>
 {% endif%}
+
+<script>
+    document.addEventListener("DOMContentLoaded", () => {
+        {% if node.is_running %}
+            checkSyncStatus()
+        {% endif %}
+    })
+
+    let count = 0
+    async function checkSyncStatus() {
+		let url = `{{ url_for('nodes_endpoint.check_sync_status') }}`;
+		const response = await send_request(url, 'GET', "{{ csrf_token() }}");
+		if (response.fullySynced === true) {
+            console.log('Spectrum node is fully synced.')
+            document.getElementById('unfinished-ibd-indicator').classList.remove('animate-spin')
+            document.getElementById("unfinished-ibd-indicator").classList.add('hidden')
+            document.getElementById('connected-icon').classList.remove('hidden')
+        }
+        else {
+            console.log('Spectrum node is not fully synced yet.')
+            document.getElementById('unfinished-ibd-indicator').classList.remove('hidden')
+            document.getElementById('unfinished-ibd-indicator').classList.add('animate-spin')
+            document.getElementById('connected-icon').classList.add('hidden')
+            console.log(count)
+            // Show message only once
+            if (count === 0 ) {
+                showNotification(`{{ _("Spectrum is syncing. Check the progress by clicking on the connection.") }}`)
+            }
+            count++
+            setTimeout(checkSyncStatus, 30000);
+        }   
+	}
+</script>