Merge pull request #324 from gerlofvanek/fixes-13

GUI: Various fixes + Fix bid modal.

basicswap/static/js/modules/coin-manager.js

@@ -203,6 +203,19 @@ const CoinManager = (function() {
             return coin ? coin.symbol : null;
         },
         getDisplayName: function(identifier) {
+            if (!identifier) return null;
+
+            const normalizedId = identifier.toString().toLowerCase().trim();
+            if (normalizedId === 'particl anon' || normalizedId === 'part_anon' || normalizedId === 'particl_anon') {
+                return 'Particl Anon';
+            }
+            if (normalizedId === 'particl blind' || normalizedId === 'part_blind' || normalizedId === 'particl_blind') {
+                return 'Particl Blind';
+            }
+            if (normalizedId === 'litecoin mweb' || normalizedId === 'ltc_mweb' || normalizedId === 'litecoin_mweb') {
+                return 'Litecoin MWEB';
+            }
+
             const coin = getCoinByAnyIdentifier(identifier);
             return coin ? coin.displayName : null;
         },

basicswap/static/js/swaps_in_progress.js

@@ -293,8 +293,8 @@ const createSwapTableRow = async (swap) => {
 
     const identity = await IdentityManager.getIdentityData(swap.addr_from);
     const uniqueId = `${swap.bid_id}_${swap.created_at}`;
-    const fromSymbol = window.CoinManager.getSymbol(swap.coin_from) || swap.coin_from;
-    const toSymbol = window.CoinManager.getSymbol(swap.coin_to) || swap.coin_to;
+    const fromSymbol = window.CoinManager.getDisplayName(swap.coin_from) || swap.coin_from;
+    const toSymbol = window.CoinManager.getDisplayName(swap.coin_to) || swap.coin_to;
     const timeColor = getTimeStrokeColor(swap.expire_at);
     const fromAmount = parseFloat(swap.amount_from) || 0;
     const toAmount = parseFloat(swap.amount_to) || 0;

basicswap/templates/bid.html

@@ -556,10 +556,39 @@
 <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-md w-full p-6 shadow-lg transition-opacity duration-300 ease-out">
+    <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-4" id="confirmTitle">Confirm Action</h2>
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-6" id="confirmTitle">Confirm Action</h2>
+
+        <div id="bidDetailsSection" class="hidden 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">You will send:</div>
+            <div class="font-medium text-gray-900 dark:text-white text-lg" id="confirmSendAmount">
+              {% if data.was_sent %}
+                {{ data.amt_to }} {{ data.ticker_to }}
+              {% else %}
+                {{ data.amt_from }} {{ data.ticker_from }}
+              {% endif %}
+            </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">You will receive:</div>
+            <div class="font-medium text-gray-900 dark:text-white text-lg" id="confirmReceiveAmount">
+              {% if data.was_sent %}
+                {{ data.amt_from }} {{ data.ticker_from }}
+              {% else %}
+                {{ data.amt_to }} {{ data.ticker_to }}
+              {% endif %}
+            </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">Exchange rate:</div>
+            <div class="font-medium text-gray-900 dark:text-white text-lg">{{ data.bid_rate }}</div>
+          </div>
+        </div>
+
         <p class="text-gray-600 dark:text-gray-200 mb-6 whitespace-pre-line" id="confirmMessage">Are you sure?</p>
+
         <div class="flex justify-center gap-4">
           <button type="button" id="confirmYes"
                   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">
@@ -594,10 +623,22 @@ document.addEventListener('DOMContentLoaded', function() {
 
   document.getElementById('confirmNo').addEventListener('click', hideConfirmDialog);
 
-  function showConfirmDialog(title, message, callback) {
+  function showConfirmDialog(title, message, callback, showBidDetails = false) {
     confirmCallback = callback;
     document.getElementById('confirmTitle').textContent = title;
     document.getElementById('confirmMessage').textContent = message;
+
+    const bidDetailsSection = document.getElementById('bidDetailsSection');
+    const confirmMessage = document.getElementById('confirmMessage');
+
+    if (showBidDetails && bidDetailsSection) {
+      bidDetailsSection.classList.remove('hidden');
+      confirmMessage.classList.add('hidden');
+    } else {
+      if (bidDetailsSection) bidDetailsSection.classList.add('hidden');
+      confirmMessage.classList.remove('hidden');
+    }
+
     const modal = document.getElementById('confirmModal');
     if (modal) {
       modal.classList.remove('hidden');
@@ -617,7 +658,14 @@ document.addEventListener('DOMContentLoaded', function() {
   window.confirmPopup = function(action = 'Abandon') {
     triggerElement = document.activeElement;
     const title = `Confirm ${action} Bid`;
-    const message = `Are you sure you want to ${action.toLowerCase()} this bid?`;
+    const showBidDetails = action.toLowerCase() === 'accept';
+
+    let message;
+    if (showBidDetails) {
+      message = 'Please review the bid details below and confirm if you want to proceed with this exchange.';
+    } else {
+      message = `Are you sure you want to ${action.toLowerCase()} this bid?`;
+    }
 
     return showConfirmDialog(title, message, function() {
       if (triggerElement) {
@@ -629,7 +677,7 @@ document.addEventListener('DOMContentLoaded', function() {
         form.appendChild(hiddenInput);
         form.submit();
       }
-    });
+    }, showBidDetails);
   };
 
   const overrideButtonConfirm = function(button, action) {

basicswap/templates/bid_xmr.html

@@ -832,10 +832,39 @@
 <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-md w-full p-6 shadow-lg transition-opacity duration-300 ease-out">
+    <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-4" id="confirmTitle">Confirm Action</h2>
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-6" id="confirmTitle">Confirm Action</h2>
+
+        <div id="bidDetailsSection" class="hidden 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">You will send:</div>
+            <div class="font-medium text-gray-900 dark:text-white text-lg" id="confirmSendAmount">
+              {% if data.was_sent %}
+                {{ data.amt_to }} {{ data.ticker_to }}
+              {% else %}
+                {{ data.amt_from }} {{ data.ticker_from }}
+              {% endif %}
+            </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">You will receive:</div>
+            <div class="font-medium text-gray-900 dark:text-white text-lg" id="confirmReceiveAmount">
+              {% if data.was_sent %}
+                {{ data.amt_from }} {{ data.ticker_from }}
+              {% else %}
+                {{ data.amt_to }} {{ data.ticker_to }}
+              {% endif %}
+            </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">Exchange rate:</div>
+            <div class="font-medium text-gray-900 dark:text-white text-lg">{{ data.bid_rate }}</div>
+          </div>
+        </div>
+
         <p class="text-gray-600 dark:text-gray-200 mb-6 whitespace-pre-line" id="confirmMessage">Are you sure?</p>
+
         <div class="flex justify-center gap-4">
           <button type="button" id="confirmYes"
                   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">
@@ -870,10 +899,22 @@ document.addEventListener('DOMContentLoaded', function() {
 
   document.getElementById('confirmNo').addEventListener('click', hideConfirmDialog);
 
-  function showConfirmDialog(title, message, callback) {
+  function showConfirmDialog(title, message, callback, showBidDetails = false) {
     confirmCallback = callback;
     document.getElementById('confirmTitle').textContent = title;
     document.getElementById('confirmMessage').textContent = message;
+
+    const bidDetailsSection = document.getElementById('bidDetailsSection');
+    const confirmMessage = document.getElementById('confirmMessage');
+
+    if (showBidDetails && bidDetailsSection) {
+      bidDetailsSection.classList.remove('hidden');
+      confirmMessage.classList.add('hidden');
+    } else {
+      if (bidDetailsSection) bidDetailsSection.classList.add('hidden');
+      confirmMessage.classList.remove('hidden');
+    }
+
     const modal = document.getElementById('confirmModal');
     if (modal) {
       modal.classList.remove('hidden');
@@ -893,7 +934,14 @@ document.addEventListener('DOMContentLoaded', function() {
   window.confirmPopup = function(action = 'Abandon') {
     triggerElement = document.activeElement;
     const title = `Confirm ${action} Bid`;
-    const message = `Are you sure you want to ${action.toLowerCase()} this bid?`;
+    const showBidDetails = action.toLowerCase() === 'accept';
+
+    let message;
+    if (showBidDetails) {
+      message = 'Please review the bid details below and confirm if you want to proceed with this exchange.';
+    } else {
+      message = `Are you sure you want to ${action.toLowerCase()} this bid?`;
+    }
 
     return showConfirmDialog(title, message, function() {
       if (triggerElement) {
@@ -905,7 +953,7 @@ document.addEventListener('DOMContentLoaded', function() {
         form.appendChild(hiddenInput);
         form.submit();
       }
-    });
+    }, showBidDetails);
   };
 
   const overrideButtonConfirm = function(button, action) {

basicswap/templates/bids_available.html

@@ -54,7 +54,7 @@
                 </th>
                 <th class="p-0">
                   <div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 text-right">
-                    <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">You Get</span>
+                    <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">You Receive</span>
                   </div>
                 </th>
                 <th class="p-0">