Merge pull request #126 from gerlofvanek/dynamic

ui: Dynamic offers tables + various updates.

basicswap/js_server.py

@@ -229,11 +229,12 @@ def js_offers(self, url_split, post_string, is_json, sent=False) -> bytes:
             'amount_to': ci_to.format_amount((o.amount_from * o.rate) // ci_from.COIN()),
             'rate': ci_to.format_amount(o.rate),
             'min_bid_amount': ci_from.format_amount(o.min_bid_amount),
+            'is_expired': o.expire_at <= swap_client.getTime(),
+            'is_own_offer': o.was_sent
         }
         if with_extra_info:
             offer_data['amount_negotiable'] = o.amount_negotiable
             offer_data['rate_negotiable'] = o.rate_negotiable
-
             if o.swap_type == SwapTypes.XMR_SWAP:
                 _, xmr_offer = swap_client.getXmrOffer(o.offer_id)
                 offer_data['lock_time_1'] = xmr_offer.lock_time_1

basicswap/static/css/style.css

@@ -278,3 +278,82 @@ select.disabled-select-enabled {
 .shutdown-button.shutdown-disabled svg {
   opacity: 0.5;
 }
+
+
+/* Loading line animation */
+.loading-line {
+  width: 100%;
+  height: 2px;
+  background-color: #ccc;
+  overflow: hidden;
+  position: relative;
+}
+.loading-line::before {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to right, transparent, #007bff, transparent);
+  animation: loading 1.5s infinite;
+}
+@keyframes loading {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+/* Hide the loading line once data is loaded */
+.usd-value:not(.loading) .loading-line,
+.profit-loss:not(.loading) .loading-line {
+  display: none;
+}
+
+  .resolution-button {
+    background: none;
+    border: none;
+    color: #4B5563; /* gray-600 */
+    font-size: 0.875rem; /* text-sm */
+    font-weight: 500; /* font-medium */
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+    transition: all 0.2s;
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+
+  .resolution-button:hover {
+    color: #1F2937; /* gray-800 */
+  }
+
+  .resolution-button:focus {
+    outline: 2px solid #3B82F6; /* blue-500 */
+  }
+
+  .resolution-button.active {
+    color: #3B82F6; /* blue-500 */
+    outline: 2px solid #3B82F6; /* blue-500 */
+  }
+
+  .dark .resolution-button {
+    color: #9CA3AF; /* gray-400 */
+  }
+
+  .dark .resolution-button:hover {
+    color: #F3F4F6; /* gray-100 */
+  }
+
+  .dark .resolution-button.active {
+    color: #60A5FA; /* blue-400 */
+    outline-color: #60A5FA; /* blue-400 */
+    color: #fff;
+  }
+  
+    #toggle-volume.active {
+    @apply bg-green-500 hover:bg-green-600 focus:ring-green-300;
+  }
+  #toggle-auto-refresh[data-enabled="true"] {
+    @apply bg-green-500 hover:bg-green-600 focus:ring-green-300;
+  }
+

basicswap/templates/header.html

@@ -7,6 +7,7 @@
   <meta http-equiv="refresh" content="{{ refresh }}">
   {% endif %}
   <script src="/static/js/libs/chart.js"></script>
+  <script src="/static/js/libs/chartjs-adapter-date-fns.bundle.min.js"></script>
   <link type="text/css" media="all" href="/static/css/libs/flowbite.min.css" rel="stylesheet" />
   <link type="text/css" media="all" href="/static/css/libs/tailwind.min.css" rel="stylesheet">
   <link type="text/css" media="all" href="/static/css/style.css" rel="stylesheet">
@@ -91,6 +92,8 @@ document.addEventListener('DOMContentLoaded', function() {
     const shutdownButtons = document.querySelectorAll('.shutdown-button');
     const shutdownModal = document.getElementById('shutdownModal');
     const closeModalButton = document.getElementById('closeShutdownModal');
+    const confirmShutdownButton = document.getElementById('confirmShutdown');
+    const shutdownWarning = document.getElementById('shutdownWarning');
 
     function updateShutdownButtons() {
         const activeSwaps = parseInt(shutdownButtons[0].getAttribute('data-active-swaps') || '0');
@@ -99,7 +102,7 @@ document.addEventListener('DOMContentLoaded', function() {
             if (activeSwaps > 0) {
                 button.classList.add('shutdown-disabled');
                 button.setAttribute('data-disabled', 'true');
-                button.setAttribute('title', 'Cannot shutdown while swaps are in progress');
+                button.setAttribute('title', 'Caution: Swaps in progress');
             } else {
                 button.classList.remove('shutdown-disabled');
                 button.removeAttribute('data-disabled');
@@ -109,6 +112,14 @@ document.addEventListener('DOMContentLoaded', function() {
     }
 
     function showShutdownModal() {
+        const activeSwaps = parseInt(shutdownButtons[0].getAttribute('data-active-swaps') || '0');
+        if (activeSwaps > 0) {
+            shutdownWarning.classList.remove('hidden');
+            confirmShutdownButton.textContent = 'Yes, Shut Down Anyway';
+        } else {
+            shutdownWarning.classList.add('hidden');
+            confirmShutdownButton.textContent = 'Yes, Shut Down';
+        }
         shutdownModal.classList.remove('hidden');
         document.body.style.overflow = 'hidden';
     }
@@ -120,15 +131,18 @@ document.addEventListener('DOMContentLoaded', function() {
 
     shutdownButtons.forEach(button => {
         button.addEventListener('click', function(e) {
-            if (this.hasAttribute('data-disabled')) {
-                e.preventDefault();
-                showShutdownModal();
-            }
+            e.preventDefault();
+            showShutdownModal();
         });
     });
 
     closeModalButton.addEventListener('click', hideShutdownModal);
 
+    confirmShutdownButton.addEventListener('click', function() {
+        const shutdownToken = document.querySelector('.shutdown-button').getAttribute('href').split('/').pop();
+        window.location.href = '/shutdown/' + shutdownToken;
+    });
+
     shutdownModal.addEventListener('click', function(e) {
         if (e.target === this) {
             hideShutdownModal();
@@ -236,18 +250,23 @@ document.addEventListener('DOMContentLoaded', function() {
 </a>
 </div>
 </div> 
- <div id="shutdownModal" tabindex="-1" class="hidden fixed inset-0 z-50 overflow-y-auto overflow-x-hidden">
-    <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity"></div>
+
+<div id="shutdownModal" tabindex="-1" class="hidden fixed inset-0 z-50 overflow-y-auto overflow-x-hidden">
+    <div class="fixed inset-0 bg-black bg-opacity-60 transition-opacity"></div>
     <div class="flex items-center justify-center min-h-screen p-4 relative z-10">
         <div class="bg-white dark:bg-gray-500 rounded-lg shadow-xl max-w-md w-full">
             <div class="p-6 text-center">
                 <svg class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
                 </svg>
-                <h3 class="mb-5 text-lg font-normal text-gray-300 dark:text-gray-400">Cannot Shutdown</h3>
-                <p class="mb-5 text-sm text-gray-500 dark:text-gray-300">Shutdown is not possible while swaps are in progress. Please wait for all swaps to complete before shutting down.</p>
-                <button id="closeShutdownModal" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-0 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
-                    Close
+                <h3 class="mb-5 text-lg font-normal text-gray-700 dark:text-gray-300">Are you sure you want to shut down?</h3>
+                <p id="shutdownWarning" class="mb-5 text-sm text-red-500 font-bold hidden">Warning: Swaps are in progress. Please wait for swaps to complete before shutting down.</p>
+                <p class="mb-5 text-sm text-gray-500 dark:text-gray-300">This action will shut down the application. Are you sure you want to proceed?</p>
+                <button id="confirmShutdown" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-0 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2">
+                    Yes, Shut Down
+                </button>
+                <button id="closeShutdownModal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-0 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
+                    Cancel
                 </button>
             </div>
         </div>