From 790a550e7fde25fbde76c98b426b44e4aa79f8eb Mon Sep 17 00:00:00 2001
From: gerlofvanek <gerlof@particl.io>
Date: Thu, 28 Nov 2024 21:33:43 +0100
Subject: [PATCH] ui: Always select "new address" on offers/bids. Remember last
 used address.

---
 basicswap/templates/offer.html       | 102 +++++++++++++++----
 basicswap/templates/offer_new_1.html | 140 ++++++++++++++++++++++-----
 2 files changed, 202 insertions(+), 40 deletions(-)

diff --git a/basicswap/templates/offer.html b/basicswap/templates/offer.html
index 130a556..fdb7363 100644
--- a/basicswap/templates/offer.html
+++ b/basicswap/templates/offer.html
@@ -407,22 +407,88 @@
         <td class="py-3 px-6">Amount you will send <span class="bold" id="bid_amt_to">{{ data.amt_to }}</span> {{ data.tla_to }}
         </td>
        </tr>
-       <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
-        <td class="py-3 px-6 bold">Send From Address</td>
-        <td class="py-3 px-6">
-         <div class="w-full md:flex-1">
-          <div class="relative">
-            {{ input_arrow_down_svg | safe }}
-           <select class="bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="addr_from">
-            {% for a in addrs %}
-            <option value="{{ a[0] }}" {% if data.nb_addr_from==a[0] %} selected{% endif %}>{{ a[0] }} {{ a[1] }}</option>
-            {% endfor %}
-            <option value="-1" {% if data.nb_addr_from=="-1" %} selected{% endif %}>New Address</option>
-           </select>
-          </div>
-         </div>
-        </td>
-       </tr>
+<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+  <td class="py-3 px-6 bold">Send From Address</td>
+  <td class="py-3 px-6">
+    <div class="w-full md:flex-1">
+      <div class="relative">
+        {{ input_arrow_down_svg | safe }}
+        <select class="bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="addr_from">
+          <option value="-1" {% if data.nb_addr_from=="-1" %} selected{% endif %}>New Address</option>
+          {% for a in addrs %}
+          <option value="{{ a[0] }}" {% if data.nb_addr_from==a[0] %} selected{% endif %}>{{ a[0] }} {{ a[1] }}</option>
+          {% endfor %}
+        </select>
+      </div>
+    </div>
+  </td>
+</tr>
+<script>
+function handleBidsPageAddress() {
+    const selectElement = document.querySelector('select[name="addr_from"]');
+    const STORAGE_KEY = 'lastUsedAddressBids';
+    
+    if (!selectElement) return;
+
+    function loadInitialAddress() {
+        const savedAddressJSON = localStorage.getItem(STORAGE_KEY);
+        
+        if (savedAddressJSON) {
+            try {
+                const savedAddress = JSON.parse(savedAddressJSON);
+                const optionExists = Array.from(selectElement.options).some(
+                    option => option.value === savedAddress.value
+                );
+                
+                if (optionExists) {
+                    selectElement.value = savedAddress.value;
+                } else {
+                    selectFirstAddress();
+                }
+            } catch (e) {
+                selectFirstAddress();
+            }
+        } else {
+            selectFirstAddress();
+        }
+    }
+
+    function selectFirstAddress() {
+        if (selectElement.options.length > 1) {
+            const firstOption = selectElement.options[1];
+            if (firstOption) {
+                selectElement.value = firstOption.value;
+                saveAddress(firstOption.value, firstOption.text);
+            }
+        }
+    }
+
+    function saveAddress(value, text) {
+        const addressData = {
+            value: value,
+            text: text
+        };
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(addressData));
+    }
+
+    selectElement.addEventListener('change', (event) => {
+        const selectedValue = event.target.value;
+        const selectedText = event.target.selectedOptions[0].text;
+        
+        if (selectedValue !== '-1') {
+            saveAddress(selectedValue, selectedText);
+        }
+    });
+
+    loadInitialAddress();
+}
+
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', handleBidsPageAddress);
+} else {
+    handleBidsPageAddress();
+}
+</script>
        {% if data.amount_negotiable == true %}
        <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
         <td class="py-3 px-6 bold">Amount</td>
@@ -585,12 +651,12 @@ function updateModalValues() {
   {% endif %}
   
   const addrSelect = document.querySelector('select[name="addr_from"]');
-  const addrText = addrSelect.options[addrSelect.selectedIndex].text.split(' ')[0];
+  const selectedText = addrSelect.options[addrSelect.selectedIndex].text;
+  const addrText = selectedText === 'New Address' ? selectedText : selectedText.split(' ')[0];
   document.getElementById('modal-addr-from').textContent = addrText;
   
   document.getElementById('modal-valid-mins').textContent = document.querySelector('input[name="validmins"]').value;
 }
-
 function showConfirmModal() {
   updateModalValues();
   document.getElementById('confirmModal').classList.remove('hidden');
diff --git a/basicswap/templates/offer_new_1.html b/basicswap/templates/offer_new_1.html
index 0ca0380..4f9cee0 100644
--- a/basicswap/templates/offer_new_1.html
+++ b/basicswap/templates/offer_new_1.html
@@ -94,29 +94,125 @@
               </div>
             </div>
           </div>
-          <div class="py-0 border-b items-center justify-between -mx-4 mb-6 pb-3 border-gray-400 border-opacity-20">
-            <div class="w-full md:w-10/12">
-              <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
-                <div class="w-full md:w-1/3 p-6">
-                  <p class="text-sm text-coolGray-800 dark:text-white font-semibold">Select Address</p>
-                </div>
-                <div class="w-full md:flex-1 p-3">
-                  <div class="relative">
-                    {{ input_down_arrow_offer_svg | safe }}
-                    <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-                    {{ select_address_svg | safe }}
-                  </div>
-                  <select class="hover:border-blue-500 pl-10 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-white text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="addr_from">
-                    {% for a in addrs %}
-                    <option{% if data.addr_from==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option>
-                    {% endfor %}
-                    <option{% if data.addr_from=="-1" %} selected{% endif %} value="-1">New Address</option>
-                  </select>
-                  </div>
-                </div>
-              </div>
-            </div>
+<div class="py-0 border-b items-center justify-between -mx-4 mb-6 pb-3 border-gray-400 border-opacity-20">
+  <div class="w-full md:w-10/12">
+    <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
+      <div class="w-full md:w-1/3 p-6">
+        <p class="text-sm text-coolGray-800 dark:text-white font-semibold">Select Address</p>
+      </div>
+      <div class="w-full md:flex-1 p-3">
+        <div class="relative">
+          {{ input_down_arrow_offer_svg | safe }}
+          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+          {{ select_address_svg | safe }}
           </div>
+          <select class="hover:border-blue-500 pl-10 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-white text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="addr_from">
+            <option{% if data.addr_from=="-1" %} selected{% endif %} value="-1">New Address</option>
+            {% for a in addrs %}
+            <option{% if data.addr_from==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option>
+            {% endfor %}
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+function handleNewOfferAddress() {
+    const selectElement = document.querySelector('select[name="addr_from"]');
+    const STORAGE_KEY = 'lastUsedAddressNewOffer';
+    const form = selectElement?.closest('form');
+    
+    if (!selectElement || !form) return;
+
+    function loadInitialAddress() {
+        const savedAddressJSON = localStorage.getItem(STORAGE_KEY);
+        
+        if (savedAddressJSON) {
+            try {
+                const savedAddress = JSON.parse(savedAddressJSON);
+                const optionExists = Array.from(selectElement.options).some(
+                    option => option.value === savedAddress.value
+                );
+                
+                if (optionExists) {
+                    selectElement.value = savedAddress.value;
+                } else {
+                    selectFirstAddress();
+                }
+            } catch (e) {
+                selectFirstAddress();
+            }
+        } else {
+            selectFirstAddress();
+        }
+    }
+
+    function selectFirstAddress() {
+        if (selectElement.options.length > 1) {
+            const firstOption = selectElement.options[1];
+            if (firstOption) {
+                selectElement.value = firstOption.value;
+                saveAddress(firstOption.value, firstOption.text);
+            }
+        }
+    }
+
+    function saveAddress(value, text) {
+        const addressData = {
+            value: value,
+            text: text
+        };
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(addressData));
+    }
+
+    form.addEventListener('submit', async (e) => {
+        if (selectElement.value === '-1') {
+            e.preventDefault();
+            
+            try {
+                const formData = new FormData(form);
+                const response = await fetch(form.action, {
+                    method: form.method,
+                    body: formData
+                });
+                
+                if (response.ok) {
+                    setTimeout(() => {
+                        const newAddress = selectElement.options[1];
+                        if (newAddress) {
+                            selectElement.value = newAddress.value;
+                            saveAddress(newAddress.value, newAddress.text);
+                        }
+                        form.submit();
+                    }, 100);
+                }
+            } catch (error) {
+                console.error('Error submitting form:', error);
+                form.submit();
+            }
+        }
+    });
+
+    selectElement.addEventListener('change', (event) => {
+        const selectedValue = event.target.value;
+        const selectedText = event.target.selectedOptions[0].text;
+        
+        if (selectedValue !== '-1') {
+            saveAddress(selectedValue, selectedText);
+        }
+    });
+
+    loadInitialAddress();
+}
+
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', handleNewOfferAddress);
+} else {
+    handleNewOfferAddress();
+}
+</script>
+
           <div class="py-0 border-b items-center justify-between -mx-4 mb-6 pb-3 border-gray-400 border-opacity-20">
             <div class="w-full md:w-10/12">
               <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">