From 7e86741081d7d7213226dfb8f897aea3ae13da19 Mon Sep 17 00:00:00 2001
From: Manolis <70536101+moneymanolis@users.noreply.github.com>
Date: Tue, 25 Jan 2022 15:40:02 +0100
Subject: [PATCH] Bugfix: Coin selection - unselection via toggle (#1536)

* Added tests/bitcoin to gitignore

* Toggling off of coin selection unselects (again) all selected UTXOs + little UI optimisations.

Co-authored-by: Kim Neunert <k9ert@gmx.de>
---
 .../templates/includes/coin_selection.html    | 24 ++++---------------
 .../templates/includes/fee-selection.html     | 18 ++++++++++++++
 .../wallet/send/new/wallet_send.jinja         | 14 +++++++++--
 3 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/src/cryptoadvance/specter/templates/includes/coin_selection.html b/src/cryptoadvance/specter/templates/includes/coin_selection.html
index 4e08ee75ed..f067c3f224 100644
--- a/src/cryptoadvance/specter/templates/includes/coin_selection.html
+++ b/src/cryptoadvance/specter/templates/includes/coin_selection.html
@@ -162,31 +162,17 @@
             if (this.coinselectionDiv.style.display === 'block') {
                 this.coinselectionDiv.style.display = 'none';
                 this.toggler.innerHTML = `{{ _("Coin selection") }} &#9654;`;
-                if (this.isCoinSelectionActive()) {
-                    toggleExpand();
-                }
+                this.removeSelection()
             } else {
                 this.coinselectionDiv.style.display = 'block';
                 this.toggler.innerHTML = `{{ _("Coin selection") }} &#9660;`;
             }
         }
 
-        /*
-        * Removes all coin_selection if it's no longer active
-        */
-        toggleExpand() {
-            if (this.isCoinSelectionActive()) {
-                setVisibility('coinselection', 'none');
-            } else {
-                setVisibility('coinselection', 'block');
-
-                let coins = document.getElementsByClassName('coin_select_checkbox');
-                // unselect all choices
-                for(var i = 0; i < coins.length; i++){
-                    coins[i].checked = false;
-                }
-            }
-            this.fireChangeEvent();
+        removeSelection() {
+            this.txtable.unselect_all()
+            // We also need to update the Light DOM
+            this.updateLd()
         }
 
         shouldSelectMoreCoins(unit, amount) {
diff --git a/src/cryptoadvance/specter/templates/includes/fee-selection.html b/src/cryptoadvance/specter/templates/includes/fee-selection.html
index d18097451c..48cbe49a37 100644
--- a/src/cryptoadvance/specter/templates/includes/fee-selection.html
+++ b/src/cryptoadvance/specter/templates/includes/fee-selection.html
@@ -65,6 +65,7 @@
         constructor() {
             super();
             var shadow = this.attachShadow({mode: 'open'});
+            this.wholeTemplate = shadow
             var template_content = document.getElementById('fee-selection').content;
             var clone = template_content.cloneNode(true);
 
@@ -342,6 +343,23 @@
             }
         }
 
+        // Adds line breaks at the end of the component
+        addLineBreaks(number) {
+            for (let i = 0; i < number; i++) {
+                this.wholeTemplate.appendChild(document.createElement('br'))
+            }
+        }
+
+        // Removes all added line breaks again
+        removeLineBreaks() {
+            var allLineBreaks = this.wholeTemplate.querySelectorAll('br')
+            for (let i = 0; i < allLineBreaks.length; i++) {
+                // 11 is the nodeType of the Shadow Root
+                if (allLineBreaks[i].parentNode.nodeType == 11) {
+                    this.wholeTemplate.removeChild(allLineBreaks[i])
+                }
+            }
+        }
     }
 
     customElements.define('fee-selection', FeeSelection);        
diff --git a/src/cryptoadvance/specter/templates/wallet/send/new/wallet_send.jinja b/src/cryptoadvance/specter/templates/wallet/send/new/wallet_send.jinja
index 223079de11..a0d3a38c4f 100644
--- a/src/cryptoadvance/specter/templates/wallet/send/new/wallet_send.jinja
+++ b/src/cryptoadvance/specter/templates/wallet/send/new/wallet_send.jinja
@@ -161,9 +161,15 @@
 		FeeSelectionComponent.addEventListener("subtractClick", (event) => {
 			if ((amounts.length > 1 || !document.getElementById('ui-radio-btn').checked) && document.getElementById('subtract').checked) {
 				FeeSelectionComponent.showSubtractFrom(true)
+				if (!document.getElementById('ui-radio-btn').checked) {
+					FeeSelectionComponent.addLineBreaks(2)
+				}
 			} 
 			else {
 				FeeSelectionComponent.showSubtractFrom(false)
+				if (!document.getElementById('ui-radio-btn').checked) {
+					FeeSelectionComponent.removeLineBreaks()
+				}
 			}
 		})
 
@@ -563,6 +569,7 @@
 
 		function toggleSendUIType(radioBtn) {
 			if (radioBtn.value == 'ui') {
+				FeeSelectionComponent.removeLineBreaks()
 				setVisibility('recipients', 'block');
 				setVisibility('add-recipient', 'flex');
 				setVisibility('recipients-txt-container', 'none');
@@ -579,8 +586,11 @@
 				setVisibility('remove-recipient', 'none');
 				setVisibility('recipients-txt-container', 'block');
 				// Assumes that text is always used for multiple recipients
-				FeeSelectionComponent.showSubtractFrom(true)
-
+				if (document.getElementById('subtract').checked) {
+					FeeSelectionComponent.showSubtractFrom(true)
+					// Adds two line breaks after the RBF checkbox, since it gets crowded
+					FeeSelectionComponent.addLineBreaks(2)
+				}
 			}
 		}