From 68b066a2d15b840bcb265f6e6922e821808b46a4 Mon Sep 17 00:00:00 2001
From: gerlofvanek <gerlof@particl.io>
Date: Thu, 28 Nov 2024 17:16:48 +0100
Subject: [PATCH] ui: Add modal for confirm send bid.

---
 basicswap/templates/offer.html | 172 ++++++++++++++++++++++++++++++++-
 basicswap/ui/page_offers.py    |  19 +++-
 2 files changed, 185 insertions(+), 6 deletions(-)

diff --git a/basicswap/templates/offer.html b/basicswap/templates/offer.html
index dafd3bc..130a556 100644
--- a/basicswap/templates/offer.html
+++ b/basicswap/templates/offer.html
@@ -306,7 +306,7 @@
     </div>
    </div>
   </div>
-  <form method="post">
+<form id="bidForm" action="/offer/{{ offer_id }}" method="post">
  </section>
  {% if data.show_edit_form %}
  <section class="p-6 bg-body dark:bg-gray-700">
@@ -469,6 +469,7 @@
      <div class="w-full md:w-0/12">
       <div class="flex flex-wrap justify-end pt-6 pr-6 border-t border-gray-100 dark:border-gray-400">
        <div class="w-full md:w-auto p-1.5 ml-2">
+        <input type="hidden" name="confirm" value="true">
         <button name="sendbid" value="Send Bid" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">Send Bid</button>
        </div>
        <div class="w-full md:w-auto p-1.5">
@@ -485,6 +486,172 @@
   </div>
 </div>
 </section>
+
+<div id="confirmModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
+  <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity duration-300 ease-out"></div>
+  
+  <div class="relative z-50 min-h-screen px-4 flex items-center justify-center">
+    <div class="bg-white dark:bg-gray-500 rounded-lg max-w-2xl w-full p-6 shadow-lg transition-opacity duration-300 ease-out">
+      <div class="text-center">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-6">Confirm Bid</h2>
+        
+        <div class="space-y-4 text-left mb-8">
+          <div class="bg-gray-50 dark:bg-gray-600 rounded-lg p-4">
+            <div class="text-sm text-gray-600 dark:text-gray-400 mb-1">Amount you will get:</div>
+            <div class="font-medium text-gray-900 dark:text-white text-lg">
+              <span id="modal-amt-receive"></span> 
+              <span id="modal-receive-currency"></span>
+              <div class="text-sm text-gray-500 dark:text-gray-400 mt-1" id="modal-fee-info"></div>
+            </div>
+          </div>
+
+          <div class="bg-gray-50 dark:bg-gray-600 rounded-lg p-4">
+            <div class="text-sm text-gray-600 dark:text-gray-400 mb-1">Amount you will send:</div>
+            <div class="font-medium text-gray-900 dark:text-white text-lg">
+              <span id="modal-amt-send"></span>
+              <span id="modal-send-currency"></span>
+            </div>
+          </div>
+
+          <div class="bg-gray-50 dark:bg-gray-600 rounded-lg p-4">
+            <div class="text-sm text-gray-600 dark:text-gray-400 mb-1">Send From Address:</div>
+            <div class="font-mono text-sm p-2 bg-white dark:bg-gray-500 rounded border border-gray-300 dark:border-gray-400 overflow-x-auto text-gray-900 dark:text-white">
+              <span id="modal-addr-from"></span>
+            </div>
+          </div>
+
+          <div class="bg-gray-50 dark:bg-gray-600 rounded-lg p-4">
+            <div class="text-sm text-gray-600 dark:text-gray-400 mb-1">Minutes valid:</div>
+            <div class="font-medium text-gray-900 dark:text-white text-lg" id="modal-valid-mins"></div>
+          </div>
+        </div>
+
+        <div class="flex justify-center gap-4">
+          <button type="submit" name="sendbid" value="confirm" 
+                  class="px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+            Confirm
+          </button>
+          <button type="button" onclick="hideConfirmModal()"
+                  class="px-4 py-2.5 font-medium text-sm text-white hover:text-red border border-red-500 hover:border-red-500 hover:bg-red-600 bg-red-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function updateBidParams(value_changed) {
+  const coin_from = document.getElementById('coin_from').value;
+  const coin_to = document.getElementById('coin_to').value;
+  const amt_var = document.getElementById('amt_var').value;
+  const rate_var = document.getElementById('rate_var').value;
+  
+  let amt_from = '';
+  let rate = '';
+  
+  if (amt_var == 'True') {
+    amt_from = document.getElementById('bid_amount').value;
+  } else {
+    amt_from = document.getElementById('amount_from').value;
+  }
+  
+  if (rate_var == 'True') {
+    rate = document.getElementById('bid_rate').value;
+  } else {
+    rate = document.getElementById('offer_rate').value;
+  }
+  
+  if (value_changed == 'amount') {
+    document.getElementById('bid_amt_from').innerHTML = amt_from;
+  }
+  
+  xhr_bid_params.open('POST', '/json/rate');
+  xhr_bid_params.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+  xhr_bid_params.send('coin_from=' + coin_from + '&coin_to=' + coin_to + '&rate=' + rate + '&amt_from=' + amt_from);
+}
+
+function updateModalValues() {
+  document.getElementById('modal-amt-receive').textContent = document.getElementById('bid_amt_from').textContent;
+  document.getElementById('modal-amt-send').textContent = document.getElementById('bid_amt_to').textContent;
+  document.getElementById('modal-receive-currency').textContent = '{{ data.tla_from }}';
+  document.getElementById('modal-send-currency').textContent = '{{ data.tla_to }}';
+  
+  {% if data.xmr_type == true %}
+  document.getElementById('modal-fee-info').textContent = `(excluding estimated {{ data.amt_from_lock_spend_tx_fee }} {{ data.tla_from }} in tx fees)`;
+  {% else %}
+  document.getElementById('modal-fee-info').textContent = '(excluding a tx fee)';
+  {% endif %}
+  
+  const addrSelect = document.querySelector('select[name="addr_from"]');
+  const addrText = addrSelect.options[addrSelect.selectedIndex].text.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');
+  return false;
+}
+
+function hideConfirmModal() {
+  document.getElementById('confirmModal').classList.add('hidden');
+  return false;
+}
+
+function handleCancelClick(event) {
+  event.preventDefault();
+  window.location.href = `/offer/${window.location.pathname.split('/')[2]}`;
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+  const sendBidBtn = document.querySelector('button[name="sendbid"][value="Send Bid"]');
+  if (sendBidBtn) {
+    sendBidBtn.onclick = showConfirmModal;
+  }
+
+  const modalCancelBtn = document.querySelector('#confirmModal .flex button:last-child');
+  if (modalCancelBtn) {
+    modalCancelBtn.onclick = hideConfirmModal;
+  }
+
+  const mainCancelBtn = document.querySelector('button[name="cancel"]');
+  if (mainCancelBtn) {
+    mainCancelBtn.onclick = handleCancelClick;
+  }
+  
+  // Input change listeners
+  const validMinsInput = document.querySelector('input[name="validmins"]');
+  if (validMinsInput) {
+    validMinsInput.addEventListener('input', updateModalValues);
+  }
+  
+  const addrFromSelect = document.querySelector('select[name="addr_from"]');
+  if (addrFromSelect) {
+    addrFromSelect.addEventListener('change', updateModalValues);
+  }
+
+  const bidAmountInput = document.getElementById('bid_amount');
+  if (bidAmountInput) {
+    bidAmountInput.addEventListener('change', () => {
+      updateBidParams('amount');
+      updateModalValues();
+    });
+  }
+
+  const bidRateInput = document.getElementById('bid_rate');
+  if (bidRateInput) {
+    bidRateInput.addEventListener('change', () => {
+      updateBidParams('rate');
+      updateModalValues();
+    });
+  }
+});
+</script>
+
 {% else %}
 <section>
  <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden">
@@ -530,6 +697,9 @@
  </div>
 </section>
 {% endif %}
+
+<input type="hidden" name="sendbid" value="true">
+<input type="hidden" name="confirm" value="true">
 <input type="hidden" id="coin_from" value="{{ data.coin_from_ind }}">
 <input type="hidden" id="coin_to" value="{{ data.coin_to_ind }}">
 <input type="hidden" id="amt_var" value="{{ data.amount_negotiable }}">
diff --git a/basicswap/ui/page_offers.py b/basicswap/ui/page_offers.py
index f04a9d9..3d4620d 100644
--- a/basicswap/ui/page_offers.py
+++ b/basicswap/ui/page_offers.py
@@ -160,10 +160,16 @@ def parseOfferFormData(swap_client, form_data, page_data, options={}):
             (parsed_data["amt_from"] * parsed_data["rate"]) // ci_from.COIN()
         )
 
-    page_data["amt_var"] = True if have_data_entry(form_data, "amt_var") else False
-    parsed_data["amt_var"] = page_data["amt_var"]
-    page_data["rate_var"] = True if have_data_entry(form_data, "rate_var") else False
-    parsed_data["rate_var"] = page_data["rate_var"]
+    if swap_client.debug:
+        page_data["amt_var"] = True if have_data_entry(form_data, "amt_var") else False
+        parsed_data["amt_var"] = page_data["amt_var"]
+        page_data["rate_var"] = True if have_data_entry(form_data, "rate_var") else False
+        parsed_data["rate_var"] = page_data["rate_var"]
+    else:
+        page_data["amt_var"] = True
+        page_data["rate_var"] = False
+        parsed_data["amt_var"] = True
+        parsed_data["rate_var"] = False
 
     page_data["automation_strat_id"] = int(
         get_data_entry_or(form_data, "automation_strat_id", -1)
@@ -628,7 +634,7 @@ def page_offer(self, url_split, post_string):
             swap_client.editOffer(offer_id, change_data)
         elif b"newbid" in form_data:
             show_bid_form = True
-        elif b"sendbid" in form_data:
+        elif b"sendbid" in form_data and b"confirm" in form_data and b"formid" in form_data:
             try:
                 addr_from = form_data[b"addr_from"][0].decode("utf-8")
                 extend_data["nb_addr_from"] = addr_from
@@ -672,6 +678,8 @@ def page_offer(self, url_split, post_string):
                     self.server.swap_client.log.error(traceback.format_exc())
                 err_messages.append("Send bid failed: " + str(ex))
                 show_bid_form = True
+        elif b"sendbid" in form_data:
+            show_bid_form = True
 
     amount_to: int = offer.amount_to
     if amount_to is None:
@@ -711,6 +719,7 @@ def page_offer(self, url_split, post_string):
         "active_ind": offer.active_ind,
         "swap_type": strSwapDesc(offer.swap_type),
         "reverse": reverse_bid,
+        "form_id": get_data_entry_or(form_data, "formid", "") if form_data else ""
     }
     data.update(extend_data)