ui: Update new bid section.

basicswap/templates/offer.html

@@ -392,21 +392,11 @@
          </th>
          <th class="p-0">
           <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
-           <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Settings</span>
+           <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Value</span>
           </div>
          </th>
         </tr>
        </thead>
-       <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600 h-20">
-        <td class="py-3 px-6">Amount you will get <span class="bold" id="bid_amt_from">{{ data.amt_from }}</span> {{ data.tla_from }}
-        {% if data.xmr_type == true %}
-        (excluding estimated {{ data.amt_from_lock_spend_tx_fee }} {{ data.tla_from }} in tx fees).
-        {% else %}
-        (excluding a tx fee).
-        {% endif %}</td>
-        <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">
@@ -475,21 +465,131 @@ if (document.readyState === 'loading') {
     handleBidsPageAddress();
 }
 </script>
-       {% if data.amount_negotiable == true %}
+{% 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">
+<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>
+    <td class="px-6">
+        <span class="inline-flex bold align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
+            <img class="h-7" src="/static/images/coins/{{ data.coin_to }}.png" alt="{{ data.coin_to }}">
+        </span>
+        <span class="bold">Sending ({{ data.tla_to }})</span>
+    </td>
     <td class="py-3 px-6">
-         <input type="text" 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" id="bid_amount" name="bid_amount" value="{{ data.bid_amount }}" onchange="updateBidParams('amount');">
+        <div class="relative">
+            <input type="text" 
+                   class="bg-gray-50 text-gray-900 appearance-none pr-28 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" 
+                   id="bid_amount_send" 
+                   name="bid_amount_send"
+                   value="{{ data.amt_to }}"
+                   max="{{ data.amt_to }}"
+                   onchange="validateMaxAmount(this, {{ data.amt_to }}); updateBidParams('sending');">
+            <div class="absolute inset-y-0 right-3 flex items-center pointer-events-none text-gray-400 dark:text-gray-300 text-sm">
+                max {{ data.amt_to }} ({{ data.tla_to }})
+            </div>
+        </div>
     </td>
-       </tr>
+</tr>
+<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+    <td class="px-6">
+        <span class="inline-flex bold align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
+            <img class="h-7" src="/static/images/coins/{{ data.coin_from }}.png" alt="{{ data.coin_from }}">
+        </span>
+        <span class="bold">Receiving ({{ data.tla_from }})</span>
+    </td>
+    <td class="py-3 px-6">
+        <div class="relative">
+            <input type="text" 
+                   class="bg-gray-50 text-gray-900 appearance-none pr-28 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" 
+                   id="bid_amount" 
+                   name="bid_amount" 
+                   value="{{ data.bid_amount }}" 
+                   max="{{ data.amt_from }}"
+                   onchange="validateMaxAmount(this, {{ data.amt_from }}); updateBidParams('receiving');">
+            <div class="absolute inset-y-0 right-3 flex items-center pointer-events-none text-gray-400 dark:text-gray-300 text-sm">
+                max {{ data.amt_from }} ({{ data.tla_from }})
+            </div>
+        </div>
+        {% if data.xmr_type == true %}
+        <div class="text-sm mt-1 text-gray-400 dark:text-gray-300">(excluding estimated <span class="bold">{{ data.amt_from_lock_spend_tx_fee }} {{ data.tla_from }}</span> in tx fees)</div>
+        {% else %}
+        <div class="text-sm mt-1 text-gray-400 dark:text-gray-300">(excluding a tx fee)</div>
         {% endif %}
+    </td>
+</tr>
+{% else %}
+<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+    <td class="px-6">
+        <span class="inline-flex bold align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
+            <img class="h-7" src="/static/images/coins/{{ data.coin_to }}.png" alt="{{ data.coin_to }}">
+        </span>
+        <span class="bold">Sending ({{ data.tla_to }})</span>
+    </td>
+    <td class="py-3 px-6">
+        <div class="relative">
+            <input type="text" 
+                   class="bg-gray-50 text-gray-900 appearance-none pr-28 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 cursor-not-allowed" 
+                   id="bid_amount_send" 
+                   name="bid_amount_send"
+                   value="{{ data.amt_to }}"
+                   max="{{ data.amt_to }}"
+                   disabled>
+            <div class="absolute inset-y-0 right-3 flex items-center pointer-events-none text-gray-400 dark:text-gray-300 text-sm">
+                max {{ data.amt_to }} ({{ data.tla_to }})
+            </div>
+        </div>
+        <div class="text-sm mt-1 text-gray-400 dark:text-gray-300">(Amount not variable)</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="px-6">
+        <span class="inline-flex bold align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
+            <img class="h-7" src="/static/images/coins/{{ data.coin_from }}.png" alt="{{ data.coin_from }}">
+        </span>
+        <span class="bold">Receiving ({{ data.tla_from }})</span>
+    </td>
+    <td class="py-3 px-6">
+        <div class="relative">
+            <input type="text" 
+                   class="bg-gray-50 text-gray-900 appearance-none pr-28 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 cursor-not-allowed" 
+                   id="bid_amount" 
+                   name="bid_amount" 
+                   value="{{ data.bid_amount }}" 
+                   max="{{ data.amt_from }}"
+                   disabled>
+            <div class="absolute inset-y-0 right-3 flex items-center pointer-events-none text-gray-400 dark:text-gray-300 text-sm">
+                max {{ data.amt_from }} ({{ data.tla_from }})
+            </div>
+        </div>
+        {% if data.xmr_type == true %}
+        <div class="text-sm mt-1 text-gray-400 dark:text-gray-300">(excluding estimated <span class="bold">{{ data.amt_from_lock_spend_tx_fee }} {{ data.tla_from }}</span> in tx fees)</div>
+        {% else %}
+        <div class="text-sm mt-1 text-gray-400 dark:text-gray-300">(excluding a tx fee)</div>
+        {% endif %}
+    </td>
+</tr>
+{% endif %}
+<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">Rate </td>
+    <td class="py-3 px-6">
         {% if data.rate_negotiable == true %}
-       <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+        <input type="text" 
-        <td class="py-3 px-6 bold">Rate</td>
+               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" 
-        <td class="py-3 px-6"> <input type="text" class="bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-100 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" id="bid_rate" name="bid_rate" value="{{ data.bid_rate }}" onchange="updateBidParams('rate');">
+               id="bid_rate" 
-        </td>
+               name="bid_rate" 
-       </tr>
+               value="{{ data.bid_rate }}" 
+               placeholder="Current rate: {{ data.rate }}"
+               onchange="updateBidParams('rate')">
+        {% else %}
+            <input type="text" 
+           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 cursor-not-allowed" 
+           id="bid_rate" 
+           name="bid_rate" 
+           value="{{ data.rate }}"
+           title="Rate is not negotiable"
+           disabled>
+        <div class="text-sm mt-1 text-gray-400 dark:text-gray-300">(Rate is not negotiable)</div>
         {% endif %}
+    </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">Minutes valid</td>
         <td class="py-3 px-6">
@@ -520,12 +620,21 @@ if (document.readyState === 'loading') {
     <div class="rounded-b-md">
      <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">
+        <button type="button" onclick="resetForm()" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none dark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600">
+            Clear Form
+        </button>
+    </div>
     <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>
+        <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">
-        <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full 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>
+        <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full 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>
@@ -538,15 +647,12 @@ if (document.readyState === 'loading') {
   </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>
@@ -556,7 +662,6 @@ if (document.readyState === 'loading') {
               <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">
@@ -564,20 +669,17 @@ if (document.readyState === 'loading') {
               <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">
@@ -592,74 +694,307 @@ if (document.readyState === 'loading') {
     </div>
   </div>
 </div>
-
 <script>
+const xhr_rates = new XMLHttpRequest();
+xhr_rates.onload = () => {
+    if (xhr_rates.status == 200) {
+        const obj = JSON.parse(xhr_rates.response);
+        const inner_html = '<h4 class="bold>Rates</h4><pre><code>' + JSON.stringify(obj, null, '  ') + '</code></pre>';
+        const ratesDisplay = document.getElementById('rates_display');
+        if (ratesDisplay) {
+            ratesDisplay.innerHTML = inner_html;
+        }
+    }
+};
+
+const xhr_bid_params = new XMLHttpRequest();
+xhr_bid_params.onload = () => {
+    if (xhr_bid_params.status == 200) {
+        const obj = JSON.parse(xhr_bid_params.response);
+        const bidAmountSendInput = document.getElementById('bid_amount_send');
+        if (bidAmountSendInput) {
+            bidAmountSendInput.value = obj['amount_to'];
+        }
+        updateModalValues();
+    }
+};
+
+function lookup_rates() {
+    const coin_from = document.getElementById('coin_from')?.value;
+    const coin_to = document.getElementById('coin_to')?.value;
+    
+    if (!coin_from || !coin_to || coin_from === '-1' || coin_to === '-1') {
+        alert('Coins from and to must be set first.');
+        return;
+    }
+    
+    const ratesDisplay = document.getElementById('rates_display');
+    if (ratesDisplay) {
+        ratesDisplay.innerHTML = '<h4>Rates</h4><p>Updating...</p>';
+    }
+    
+    xhr_rates.open('POST', '/json/rates');
+    xhr_rates.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+    xhr_rates.send(`coin_from=${coin_from}&coin_to=${coin_to}`);
+}
+
+function resetForm() {
+    const bidAmountSendInput = document.getElementById('bid_amount_send');
+    const bidAmountInput = document.getElementById('bid_amount');
+    const bidRateInput = document.getElementById('bid_rate');
+    const validMinsInput = document.querySelector('input[name="validmins"]');
+    const addrFromSelect = document.querySelector('select[name="addr_from"]');
+
+    if (bidAmountSendInput) {
+        const defaultSendAmount = bidAmountSendInput.getAttribute('max');
+        bidAmountSendInput.value = defaultSendAmount;
+    }
+
+    if (bidAmountInput) {
+        const defaultReceiveAmount = bidAmountInput.getAttribute('max');
+        bidAmountInput.value = defaultReceiveAmount;
+    }
+
+    if (bidRateInput && !bidRateInput.disabled) {
+        const defaultRate = document.getElementById('offer_rate')?.value || '';
+        bidRateInput.value = defaultRate;
+    }
+
+    if (validMinsInput) {
+        validMinsInput.value = "60";
+    }
+
+    if (addrFromSelect) {
+        if (addrFromSelect.options.length > 1) {
+            addrFromSelect.selectedIndex = 1;
+        } else {
+            addrFromSelect.selectedIndex = 0;
+        }
+        const selectedOption = addrFromSelect.options[addrFromSelect.selectedIndex];
+        saveAddress(selectedOption.value, selectedOption.text);
+    }
+
+    updateBidParams('rate');
+    updateModalValues();
+
+    const errorMessages = document.querySelectorAll('.error-message');
+    errorMessages.forEach(msg => msg.remove());
+
+    const inputs = document.querySelectorAll('input');
+    inputs.forEach(input => {
+        input.classList.remove('border-red-500', 'focus:border-red-500');
+    });
+}
+
 function updateBidParams(value_changed) {
-  const coin_from = document.getElementById('coin_from').value;
+    const coin_from = document.getElementById('coin_from')?.value;
-  const coin_to = document.getElementById('coin_to').value;
+    const coin_to = document.getElementById('coin_to')?.value;
-  const amt_var = document.getElementById('amt_var').value;
+    const amt_var = document.getElementById('amt_var')?.value;
-  const rate_var = document.getElementById('rate_var').value;
+    const rate_var = document.getElementById('rate_var')?.value;
+    const bidAmountInput = document.getElementById('bid_amount');
+    const bidAmountSendInput = document.getElementById('bid_amount_send');
+    const amountFromInput = document.getElementById('amount_from');
+    const bidRateInput = document.getElementById('bid_rate');
+    const offerRateInput = document.getElementById('offer_rate');
     
-  let amt_from = '';
+    if (!coin_from || !coin_to || !amt_var || !rate_var) return;
-  let rate = '';
     
-  if (amt_var == 'True') {
+    const rate = rate_var === 'True' && bidRateInput ? 
-    amt_from = document.getElementById('bid_amount').value;
+        parseFloat(bidRateInput.value) || 0 : 
-  } else {
+        parseFloat(offerRateInput?.value || '0');
-    amt_from = document.getElementById('amount_from').value;
+
+    if (!rate) return;
+
+    if (value_changed === 'rate') {
+        if (bidAmountSendInput && bidAmountInput) {
+            const sendAmount = parseFloat(bidAmountSendInput.value) || 0;
+            const receiveAmount = (sendAmount / rate).toFixed(8);
+            bidAmountInput.value = receiveAmount;
+        }
+    } else if (value_changed === 'sending') {
+        if (bidAmountSendInput && bidAmountInput) {
+            const sendAmount = parseFloat(bidAmountSendInput.value) || 0;
+            const receiveAmount = (sendAmount / rate).toFixed(8);
+            bidAmountInput.value = receiveAmount;
+        }
+    } else if (value_changed === 'receiving') {
+        if (bidAmountInput && bidAmountSendInput) {
+            const receiveAmount = parseFloat(bidAmountInput.value) || 0;
+            const sendAmount = (receiveAmount * rate).toFixed(8);
+            bidAmountSendInput.value = sendAmount;
+        }
     }
 
-  if (rate_var == 'True') {
+    validateAmountsAfterChange();
-    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);
+    xhr_bid_params.send(`coin_from=${coin_from}&coin_to=${coin_to}&rate=${rate}&amt_from=${bidAmountInput?.value || '0'}`);
+
+    updateModalValues();
 }
 
-function updateModalValues() {
+function validateAmountsAfterChange() {
-  document.getElementById('modal-amt-receive').textContent = document.getElementById('bid_amt_from').textContent;
+    const bidAmountSendInput = document.getElementById('bid_amount_send');
-  document.getElementById('modal-amt-send').textContent = document.getElementById('bid_amt_to').textContent;
+    const bidAmountInput = document.getElementById('bid_amount');
-  document.getElementById('modal-receive-currency').textContent = '{{ data.tla_from }}';
-  document.getElementById('modal-send-currency').textContent = '{{ data.tla_to }}';
     
-  {% if data.xmr_type == true %}
+    if (bidAmountSendInput) {
-  document.getElementById('modal-fee-info').textContent = `(excluding estimated {{ data.amt_from_lock_spend_tx_fee }} {{ data.tla_from }} in tx fees)`;
+        const maxSend = parseFloat(bidAmountSendInput.getAttribute('max'));
-  {% else %}
+        validateMaxAmount(bidAmountSendInput, maxSend);
-  document.getElementById('modal-fee-info').textContent = '(excluding a tx fee)';
+    }
-  {% endif %}
+    if (bidAmountInput) {
-  
+        const maxReceive = parseFloat(bidAmountInput.getAttribute('max'));
-  const addrSelect = document.querySelector('select[name="addr_from"]');
+        validateMaxAmount(bidAmountInput, maxReceive);
-  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 validateMaxAmount(input, maxAmount) {
+    if (!input) return;
+    const value = parseFloat(input.value) || 0;
+    if (value > maxAmount) {
+        input.value = maxAmount;
+    }
+}
+
 function showConfirmModal() {
     updateModalValues();
-  document.getElementById('confirmModal').classList.remove('hidden');
+    const modal = document.getElementById('confirmModal');
+    if (modal) {
+        modal.classList.remove('hidden');
+    }
     return false;
 }
 
 function hideConfirmModal() {
-  document.getElementById('confirmModal').classList.add('hidden');
+    const modal = document.getElementById('confirmModal');
+    if (modal) {
+        modal.classList.add('hidden');
+    }
     return false;
 }
 
+function updateModalValues() {
+    const bidAmountInput = document.getElementById('bid_amount');
+    const bidAmountSendInput = document.getElementById('bid_amount_send');
+
+    if (bidAmountInput) {
+        const modalAmtReceive = document.getElementById('modal-amt-receive');
+        if (modalAmtReceive) {
+            modalAmtReceive.textContent = bidAmountInput.value;
+        }
+        
+        const modalReceiveCurrency = document.getElementById('modal-receive-currency');
+        if (modalReceiveCurrency) {
+            modalReceiveCurrency.textContent = ' {{ data.tla_from }}';
+        }
+    }
+
+    if (bidAmountSendInput) {
+        const modalAmtSend = document.getElementById('modal-amt-send');
+        if (modalAmtSend) {
+            modalAmtSend.textContent = bidAmountSendInput.value;
+        }
+        
+        const modalSendCurrency = document.getElementById('modal-send-currency');
+        if (modalSendCurrency) {
+            modalSendCurrency.textContent = ' {{ data.tla_to }}';
+        }
+    }
+
+    const modalFeeInfo = document.getElementById('modal-fee-info');
+    if (modalFeeInfo) {
+        {% if data.xmr_type == true %}
+        modalFeeInfo.textContent = `(excluding estimated {{ data.amt_from_lock_spend_tx_fee }} {{ data.tla_from }} in tx fees)`;
+        {% else %}
+        modalFeeInfo.textContent = '(excluding a tx fee)';
+        {% endif %}
+    }
+
+    const addrSelect = document.querySelector('select[name="addr_from"]');
+    if (addrSelect) {
+        const modalAddrFrom = document.getElementById('modal-addr-from');
+        if (modalAddrFrom) {
+            const selectedOption = addrSelect.options[addrSelect.selectedIndex];
+            const addrText = selectedOption.value === '-1' ? 'New Address' : selectedOption.text.split(' ')[0];
+            modalAddrFrom.textContent = addrText;
+        }
+    }
+
+    const validMinsInput = document.querySelector('input[name="validmins"]');
+    if (validMinsInput) {
+        const modalValidMins = document.getElementById('modal-valid-mins');
+        if (modalValidMins) {
+            modalValidMins.textContent = validMinsInput.value;
+        }
+    }
+}
+
+function handleBidsPageAddress() {
+    const selectElement = document.querySelector('select[name="addr_from"]');
+    const STORAGE_KEY = 'lastUsedAddressBids';
+    
+    if (!selectElement) return;
+
+    function loadInitialAddress() {
+        try {
+            const savedAddressJSON = localStorage.getItem(STORAGE_KEY);
+            if (savedAddressJSON) {
+                const savedAddress = JSON.parse(savedAddressJSON);
+                if (savedAddress && savedAddress.value) {
+                    selectElement.value = savedAddress.value;
+                } else {
+                    selectFirstAddress();
+                }
+            } else {
+                selectFirstAddress();
+            }
+        } catch (e) {
+            console.error('Error loading saved address:', e);
+            selectFirstAddress();
+        }
+    }
+
+    function selectFirstAddress() {
+        if (selectElement.options.length > 1) {
+            const firstOption = selectElement.options[1];
+            if (firstOption) {
+                selectElement.value = firstOption.value;
+                saveAddress(firstOption.value, firstOption.text);
+            }
+        }
+    }
+
+    selectElement.addEventListener('change', (event) => {
+        if (event.target.selectedOptions[0]) {
+            saveAddress(event.target.value, event.target.selectedOptions[0].text);
+        }
+    });
+
+    loadInitialAddress();
+}
+
+function saveAddress(value, text) {
+    try {
+        const addressData = { value, text };
+        localStorage.setItem('lastUsedAddressBids', JSON.stringify(addressData));
+    } catch (e) {
+        console.error('Error saving address:', e);
+    }
+}
+
+function confirmPopup() {
+    return confirm("Are you sure?");
+}
+
 function handleCancelClick(event) {
-  event.preventDefault();
+    if (event) event.preventDefault();
-  window.location.href = `/offer/${window.location.pathname.split('/')[2]}`;
+    const pathParts = window.location.pathname.split('/');
+    const offerId = pathParts[pathParts.indexOf('offer') + 1];
+    window.location.href = `/offer/${offerId}`;
 }
 
 document.addEventListener('DOMContentLoaded', function() {
+
     const sendBidBtn = document.querySelector('button[name="sendbid"][value="Send Bid"]');
     if (sendBidBtn) {
         sendBidBtn.onclick = showConfirmModal;
@@ -675,7 +1010,6 @@ document.addEventListener('DOMContentLoaded', function() {
         mainCancelBtn.onclick = handleCancelClick;
     }
 
-  // Input change listeners
     const validMinsInput = document.querySelector('input[name="validmins"]');
     if (validMinsInput) {
         validMinsInput.addEventListener('input', updateModalValues);
@@ -686,21 +1020,7 @@ document.addEventListener('DOMContentLoaded', function() {
         addrFromSelect.addEventListener('change', updateModalValues);
     }
 
-  const bidAmountInput = document.getElementById('bid_amount');
+    handleBidsPageAddress();
-  if (bidAmountInput) {
-    bidAmountInput.addEventListener('change', () => {
-      updateBidParams('amount');
-      updateModalValues();
-    });
-  }
-
-  const bidRateInput = document.getElementById('bid_rate');
-  if (bidRateInput) {
-    bidRateInput.addEventListener('change', () => {
-      updateBidParams('rate');
-      updateModalValues();
-    });
-  }
 });
 </script>
 
@@ -768,67 +1088,5 @@ document.addEventListener('DOMContentLoaded', function() {
 </section>
 </div>
 {% include 'footer.html' %}
-<script>
-    const xhr_rates = new XMLHttpRequest();
-    xhr_rates.onload = () => {
-      if (xhr_rates.status == 200) {
-        const obj = JSON.parse(xhr_rates.response);
-        inner_html = '<h4 class="bold>Rates</h4><pre><code>' + JSON.stringify(obj, null, '  ') + '</code></pre>';
-        document.getElementById('rates_display').innerHTML = inner_html;
-      }
-    }
-
-    function lookup_rates() {
-      const coin_from = document.getElementById('coin_from').value;
-      const coin_to = document.getElementById('coin_to').value;
-      if (coin_from == '-1' || coin_to == '-1') {
-        alert('Coins from and to must be set first.');
-        return;
-      }
-      inner_html = '<h4>Rates</h4><p>Updating...</p>';
-      document.getElementById('rates_display').innerHTML = inner_html;
-      xhr_rates.open('POST', '/json/rates');
-      xhr_rates.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
-      xhr_rates.send('coin_from=' + coin_from + '&coin_to=' + coin_to);
-    }
-    const xhr_bid_params = new XMLHttpRequest();
-    xhr_bid_params.onload = () => {
-      if (xhr_bid_params.status == 200) {
-        const obj = JSON.parse(xhr_bid_params.response);
-        document.getElementById('bid_amt_to').innerHTML = obj['amount_to'];
-      }
-    }
-
-    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 confirmPopup() {
-      return confirm("Are you sure?");
-    }
-</script>
 </body>
 </html>