From 995e8ab7f0e62e84496bb7340873acc2bc52d46a Mon Sep 17 00:00:00 2001
From: Manolis Mandrapilias <70536101+moneymanolis@users.noreply.github.com>
Date: Tue, 14 Feb 2023 18:49:33 +0100
Subject: [PATCH] UIUX: change rbf popup if spectrum connection is used (#2203)

---
 .../specter/templates/includes/tx-row.html    | 62 +++++++++++--------
 1 file changed, 35 insertions(+), 27 deletions(-)

diff --git a/src/cryptoadvance/specter/templates/includes/tx-row.html b/src/cryptoadvance/specter/templates/includes/tx-row.html
index b28da5e3d..3d17d7868 100644
--- a/src/cryptoadvance/specter/templates/includes/tx-row.html
+++ b/src/cryptoadvance/specter/templates/includes/tx-row.html
@@ -410,34 +410,42 @@
             }
             // TODO: get fee diff from specter
             newFee += 2;
-            txDataPopup.innerHTML = `
-            <div class="bg-dark-800 p-4 rounded-lg">
-                <form action="${url}" method="POST">
-                    <h1>${rbfType == 'cancel' ? '{{ _("Cancel") }}' : '{{ _("Speed up transaction") }}'}</h1>
-                    <p>{{ _("You can") }} ${rbfType == 'cancel' ? `{{ _("cancel") }}` : `{{ _("speed up") }}`} {{ _("the transaction by increasing its fee rate") }}${rbfType == 'cancel' ? ` {{ _("and sending the funds back to yourself") }}` : ''}:</p>
-                    <input type="hidden" name="rbf_tx_id" value='${this.tx.txid}' />
-                    <input type="number" min="${newFee}" value="${newFee}" class="fee_rate" name="rbf_fee_rate" id="rbf_fee_rate" min="1" step="any" autocomplete="off" required> sat/vbyte
-                    <input type="hidden" class="csrf-token" name="csrf_token" value="{{ csrf_token() }}"/>
-                    <button class="button mt-2 bg-accent" type="submit" name="action" value="${rbfType == 'cancel' ? 'rbf_cancel' : 'rbf'}" ${rbfType == 'cancel' ? 'danger' : ''}">${rbfType == 'cancel' ? `{{ _("Cancel transaction") }}` : `{{ _("Speed up!") }}`}</button>
-                    <span class="toggle_advanced_rbf cursor-pointer">{{ _("Advanced") }} {% if show_advanced_settings %}&#9660;{% else %}&#9654;{% endif %}</span>
-                    <div class="advanced_rbf hidden warning flex flex-col">
-                        <button class="button mt-2" type="submit" name="action" value="rbf_edit">{{ _("Fully edit the transaction") }}</button>
-                    </div>
-                </form>
-            </div>  
-            `;
-            txDataPopup.querySelector('.toggle_advanced_rbf').onclick = () => {
-                let advancedButton = txDataPopup.querySelector('.toggle_advanced_rbf')
-                let advancedSettings = txDataPopup.querySelector('.advanced_rbf')
-                if (advancedSettings.classList.contains('hidden')) {
-                    advancedSettings.classList.remove('hidden')
-                    advancedButton.innerHTML = `{{ _("Advanced") }} &#9660;`;
-                } else {
-                    advancedSettings.classList.add('hidden')
-                    advancedButton.innerHTML = `{{ _("Advanced") }} &#9654;`;
+            txDataPopup.innerHTML = 
+            `{% if specter.node.alias == "spectrum_node" %}
+                <div class="bg-dark-800 p-4 rounded-lg">
+                    <h1>RBF not supported yet with Spectrum</h1>
+                    <p>If you have to use RBF, you still can. Your transactions have the RBF flag and you can use Specter with Bitcoin Core to speed up or cancel.</p>
+                </div>  
+            {% else %}
+                <div class="bg-dark-800 p-4 rounded-lg">
+                    <form action="${url}" method="POST">
+                        <h1>${rbfType == 'cancel' ? '{{ _("Cancel") }}' : '{{ _("Speed up transaction") }}'}</h1>
+                        <p>{{ _("You can") }} ${rbfType == 'cancel' ? `{{ _("cancel") }}` : `{{ _("speed up") }}`} {{ _("the transaction by increasing its fee rate") }}${rbfType == 'cancel' ? ` {{ _("and sending the funds back to yourself") }}` : ''}:</p>
+                        <input type="hidden" name="rbf_tx_id" value='${this.tx.txid}' />
+                        <input type="number" min="${newFee}" value="${newFee}" class="fee_rate" name="rbf_fee_rate" id="rbf_fee_rate" min="1" step="any" autocomplete="off" required> sat/vbyte
+                        <input type="hidden" class="csrf-token" name="csrf_token" value="{{ csrf_token() }}"/>
+                        <button class="button mt-2 bg-accent" type="submit" name="action" value="${rbfType == 'cancel' ? 'rbf_cancel' : 'rbf'}" ${rbfType == 'cancel' ? 'danger' : ''}">${rbfType == 'cancel' ? `{{ _("Cancel transaction") }}` : `{{ _("Speed up!") }}`}</button>
+                        <span class="toggle_advanced_rbf cursor-pointer">{{ _("Advanced") }} {% if show_advanced_settings %}&#9660;{% else %}&#9654;{% endif %}</span>
+                        <div class="advanced_rbf hidden warning flex flex-col">
+                            <button class="button mt-2" type="submit" name="action" value="rbf_edit">{{ _("Fully edit the transaction") }}</button>
+                        </div>
+                    </form>
+                </div>
+            {% endif %}`;
+            let advanceToggle = txDataPopup.querySelector('.toggle_advanced_rbf')
+            if (advanceToggle) {
+                txDataPopup.querySelector('.toggle_advanced_rbf').onclick = () => {
+                    let advancedButton = txDataPopup.querySelector('.toggle_advanced_rbf')
+                    let advancedSettings = txDataPopup.querySelector('.advanced_rbf')
+                    if (advancedSettings.classList.contains('hidden')) {
+                        advancedSettings.classList.remove('hidden')
+                        advancedButton.innerHTML = `{{ _("Advanced") }} &#9660;`;
+                    } else {
+                        advancedSettings.classList.add('hidden')
+                        advancedButton.innerHTML = `{{ _("Advanced") }} &#9654;`;
+                    }
                 }
-            }
-
+            }   
             showPageOverlay('tx-popup');
         }