Merge remote-tracking branch 'crz/master' into dev

basicswap/__init__.py

@@ -1,3 +1,3 @@
 name = "basicswap"
 
-__version__ = "0.11.60"
+__version__ = "0.11.61"

basicswap/static/css/libs/dd.min.css

@@ -1,179 +0,0 @@
-/*! * 
-/** * * MSDropdown - dd.js * * @author: Marghoob Suleman * * @website: https://www.marghoobsuleman.com/ * * @version: 4.0.2 * * @date: Wed Oct 13 2021 15:19:38 GMT+0530 (India Standard Time) * * msDropdown is free web component: you can redistribute it and/or modify * * it under the terms of the either the MIT License or the Gnu General Public License (GPL) Version 2 * * / */
-/*! */
- .ms-pr {
-     position: relative;
-     border-width: 1px;
-     border-color: #fff
-}
- .ms-effect:active {
-     border-radius: 0.5rem;
-     border-width: 1px;
-     border-color: #3b82f6;
-     outline: none !important
-}
- .ms-effect:focus {
-     border-radius: 0.5rem;
-     border-width: 1px;
-     border-color: #3b82f6;
-     outline: none !important
-}
- .ms-dd {
-     border-radius: 0.5rem;
-     border-width: 1px;
-     border-color: #d1d5db;
-     background: none
-}
- .ms-list-option:active {
-     border-radius: 0.5rem;
-     border-width: 1px;
-     border-color: #3b82f6;
-     outline: none !important
-}
- .ms-dd .ms-value-input {
-     left: 20px;
-     position: absolute;
-     top: 10px;
-     width: 50% 
-}
- .ms-dd .ms-dd-header {
-     c cursor: pointer;
-     min-height: 35px;
-     position: relative;
-     width: 100%;
-}
- .ms-dd .ms-dd-header .option-selected {
-     color: #333f51;
-     display: block;
-     overflow: hidden;
-     padding: 9px 19px 9px 9px;
-     pointer-events: none;
-     border-radius: 0.5rem;
-     border-width: 1px;
-     border-color: #f9fafb;
-     background: none
-}
- .ms-dd .ms-dd-header .ms-list-counter, .ms-dd .ms-dd-header input[type=checkbox] {
-     display: none 
-}
- .ms-dd .ms-dd-header .ms-header-counter {
-     color: #0e76a8
-}
- .ms-dd .ms-dd-header .ms-filter-box {
-     box-sizing: border-box;
-     -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-     padding: 6px 10px;
-     min-height: 44px
-}
- .ms-dd .ms-dd-option-image, .ms-dd .ms-dd-selected-img {
-     margin-right: 5px;
-     max-width: 40px;
-     vertical-align: middle 
-}
- .ms-dd .ms-dd-arrow {
-     height: 0;
-     margin-top: -3px;
-     position: absolute;
-     right: 10px;
-     top: 50%;
-     width: 0 
-}
- .ms-dd .ms-dd-arrow.ms-dd-pointer-down {
-     display: none 
-}
- .ms-dd .ms-dd-arrow.ms-dd-pointer-up {
-     display: none
-}
- .ms-dd .ms-options {
-     background: #fff;
-     border: 1px solid #767676;
-     box-shadow: 0 1px 5px #ddd;
-     display: none;
-     list-style: none;
-     margin: 0;
-     overflow: auto;
-     padding: 0;
-     position: absolute;
-     width: 100%;
-     z-index: 9999
-}
- .ms-dd .ms-list-option, .ms-dd .ms-optgroup ul .ms-list-option {
-     align-items: center;
-     color: #333;
-     cursor: pointer;
-     display: flex;
-     justify-content: flex-start;
-     overflow: hidden;
-     padding: 10px;
-     position: relative;
-     text-decoration: none
-}
- .ms-dd .ms-list-option input[type=checkbox], .ms-dd .ms-optgroup ul .ms-list-option input[type=checkbox] {
-     margin-right: 5px;
-     vertical-align: middle 
-}
- .ms-dd .ms-list-option:last-child, .ms-dd .ms-optgroup ul .ms-list-option:last-child {
-     border-bottom: none 
-}
- .ms-dd .ms-list-option:hover, .ms-dd .ms-optgroup ul .ms-list-option:hover {
-     background: #e0e0e6;
-     color: #000 
-}
- .ms-dd .ms-list-option.option-selected, .ms-dd .ms-optgroup ul .ms-list-option.option-selected {
-     background: #f9fafb 
-}
- .ms-dd .ms-list-option.ico-align-right .ms-dd-option-image, .ms-dd .ms-list-option.ico-align-right .ms-dd-selected-img, .ms-dd .ms-optgroup ul .ms-list-option.ico-align-right .ms-dd-option-image, .ms-dd .ms-optgroup ul .ms-list-option.ico-align-right .ms-dd-selected-img {
-     order: 2 
-}
- .ms-dd .ms-list-option.disabled, .ms-dd .ms-list-option:disabled, .ms-dd .ms-optgroup ul .ms-list-option.disabled, .ms-dd .ms-optgroup ul .ms-list-option:disabled {
-     cursor: default;
-     opacity: .4 
-}
- .ms-dd .ms-list-option .ms-dd-desc, .ms-dd .ms-optgroup ul .ms-list-option .ms-dd-desc {
-     color: #aaa;
-     display: block;
-     line-height: 1.5em;
-     overflow: hidden;
-     text-shadow: 0 1px .5px #fff 
-}
- .ms-dd .ms-header-middle-content, .ms-dd .ms-middle {
-     display: -webkit-box;
-     display: -ms-flexbox;
-     display: flex;
-     -webkit-box-align: center;
-     -ms-flex-align: center;
-     align-items: center;
-     font-size: 0.875rem; 
-     min-width: 100px
-}
- .ms-dd.disabled, .ms-dd:disabled {
-     cursor: default;
-     opacity: .4;
-     pointer-events: none 
-}
- .ms-dd .ms-optgroup-padding {
-     padding: 10px 10px 0 
-}
- .ms-dd .ms-optgroup {
-     display: block 
-}
- .ms-dd .ms-optgroup:hover {
-     background: #fff;
-     color: #000 
-}
- .ms-dd .ms-optgroup ul {
-     margin: 0;
-     padding: 0 
-}
- .ms-dd .ms-optgroup ul .ms-list-option {
-     padding-left: 20px 
-}
- .ms-dd .ms-optgroup ul:last-child {
-}
- .ms-dd .ms-dd-option-content {
-     width: 100% 
-}
- .ms-value-input {
-     display:none;
-}

basicswap/static/css/style.css

@@ -16,16 +16,12 @@
 
 .floatright
 {
-  position: absolute;
+  position: fixed;
   top:1.25rem;
   right:1.25rem;
   z-index: 9999;
 }
 
-.error
-{
-}
-
 .error_msg
 {
   color:red;
@@ -55,4 +51,64 @@
         height:0;
         visibility:hidden;
     }
-}
+}
+
+.custom-select .select {
+    appearance: none;
+    background-image: url('/static/images/other/coin.png');
+    background-position: 10px center;
+    background-repeat: no-repeat;
+    position: relative;
+  }
+
+.custom-select select::-webkit-scrollbar {
+  width: 0;
+}
+
+.custom-select .select option {
+  padding-left: 0;
+  text-indent: 0;
+  background-repeat: no-repeat;
+  background-position: 0 50%;
+}
+
+.custom-select .select option.no-space {
+  padding-left: 0;
+}
+
+.custom-select .select option[data-image] {
+  background-image: url('');
+}
+
+.custom-select .select-icon {
+  position: absolute;
+  top: 50%;
+  left: 10px;
+  transform: translateY(-50%);
+}
+
+.custom-select .select-image {
+  display: none;
+  margin-top: 10px;
+}
+
+.custom-select .select:focus + .select-dropdown .select-image {
+  display: block;
+}
+
+
+/* Disable opacity on disabled form elements in Chrome */
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  select:disabled,
+  input:disabled,
+  textarea:disabled {
+    opacity: 1 !important;
+  }
+}
+
+
+
+/* Add this to your existing CSS file */
+.error {
+  border: 1px solid red !important;
+}

basicswap/static/js/coin_icons.js

@@ -0,0 +1,70 @@
+// Define a cache object to store selected option data
+const selectCache = {};
+
+// Function to update the cache with the selected option data for a given select element
+function updateSelectCache(select) {
+  const selectedOption = select.options[select.selectedIndex];
+  const image = selectedOption.getAttribute('data-image');
+  const name = selectedOption.textContent.trim();
+  selectCache[select.id] = { image, name };
+}
+
+// Function to set the selected option and associated image and name for a given select element
+
+
+function setSelectData(select) {
+  const selectedOption = select.options[select.selectedIndex];
+  const image = selectedOption.getAttribute('data-image') || 'https://dummyimage.com/20x20/000/fff'; // set a default image URL
+  const name = selectedOption.textContent.trim();
+  if (image) {
+    select.style.backgroundImage = `url(${image})`;
+    select.nextElementSibling.querySelector('.select-image').src = image;
+  } else {
+    select.style.backgroundImage = '';
+    select.nextElementSibling.querySelector('.select-image').src = '';
+  }
+  select.nextElementSibling.querySelector('.select-name').textContent = name;
+  updateSelectCache(select);
+}
+
+
+// Function to get the selected option data from cache for a given select element
+function getSelectData(select) {
+  return selectCache[select.id] || {};
+}
+
+// Update all custom select elements on the page
+const selects = document.querySelectorAll('.custom-select .select');
+selects.forEach((select) => {
+  // Set the initial select data based on the cached data (if available) or the selected option (if any)
+  const cachedData = getSelectData(select);
+  if (cachedData.image) {
+    select.style.backgroundImage = `url(${cachedData.image})`;
+    select.nextElementSibling.querySelector('.select-image').src = cachedData.image;
+  }
+  if (cachedData.name) {
+    select.nextElementSibling.querySelector('.select-name').textContent = cachedData.name;
+  }
+  if (select.selectedIndex >= 0) {
+    setSelectData(select);
+  }
+
+  // Add event listener to update select data when an option is selected
+  select.addEventListener('change', () => {
+    setSelectData(select);
+  });
+});
+
+// Hide the select image and name on page load
+const selectIcons = document.querySelectorAll('.custom-select .select-icon');
+const selectImages = document.querySelectorAll('.custom-select .select-image');
+const selectNames = document.querySelectorAll('.custom-select .select-name');
+selectIcons.forEach((icon) => {
+  icon.style.display = 'none';
+});
+selectImages.forEach((image) => {
+  image.style.display = 'none';
+});
+selectNames.forEach((name) => {
+  name.style.display = 'none';
+});

basicswap/static/js/coin_icons_2.js

@@ -0,0 +1,56 @@
+// Define the function for setting up the custom select element
+function setupCustomSelect(select) {
+  const options = select.querySelectorAll('option');
+  const selectIcon = select.parentElement.querySelector('.select-icon');
+  const selectImage = select.parentElement.querySelector('.select-image');
+
+  // Set the background image for each option that has a data-image attribute
+  options.forEach(option => {
+    const image = option.getAttribute('data-image');
+    if (image) {
+      option.style.backgroundImage = `url(${image})`;
+    }
+  });
+
+  // Set the selected option based on the stored value
+  const storedValue = localStorage.getItem(select.name);
+  if (storedValue) {
+    const selectedOption = select.querySelector(`option[value="${storedValue}"]`);
+    if (selectedOption) {
+      select.value = storedValue;
+      const image = selectedOption.getAttribute('data-image');
+      if (image) {
+        select.style.backgroundImage = `url(${image})`;
+        selectImage.src = image;
+      }
+    }
+  }
+
+  // Update the select element and image when the user makes a selection
+  select.addEventListener('change', () => {
+    const selectedOption = select.options[select.selectedIndex];
+    const image = selectedOption.getAttribute('data-image');
+    if (image) {
+      select.style.backgroundImage = `url(${image})`;
+      selectImage.src = image;
+    } else {
+      select.style.backgroundImage = '';
+      selectImage.src = '';
+    }
+
+    // Save the selected value to localStorage
+    localStorage.setItem(select.name, select.value);
+  });
+
+  // Hide the select icon and image on page load
+  selectIcon.style.display = 'none';
+  selectImage.style.display = 'none';
+}
+
+// Call the setupCustomSelect function for each custom select element
+const customSelects = document.querySelectorAll('.custom-select select');
+customSelects.forEach(select => {
+  setupCustomSelect(select);
+});
+
+

basicswap/static/js/main.js

@@ -37,4 +37,4 @@ document.addEventListener('DOMContentLoaded', function() {
             });
         }
     }
-});
+});

basicswap/static/js/new_offer.js

@@ -1,27 +1,40 @@
-
 window.addEventListener('DOMContentLoaded', (event) => {
-    let err_msgs = document.querySelectorAll('p.error_msg');
-    for (let i=0; i < err_msgs.length; i++) {
-        err_msg = err_msgs[i].innerText
-        if (err_msg.indexOf('coin_to') >= 0 || err_msg.indexOf('Coin To') >= 0) {
-            e = document.getElementById('coin_to');
-            e.classList.add('error');
-        }
-        if (err_msg.indexOf('Coin From') >= 0) {
-            e = document.getElementById('coin_from');
-            e.classList.add('error');
-        }
-        if (err_msg.indexOf('Amount From') >= 0) {
-            e = document.getElementById('amt_from');
-            e.classList.add('error');
-        }
-        if (err_msg.indexOf('Amount To') >= 0) {
-            e = document.getElementById('amt_to');
-            e.classList.add('error');
-        }
-        if (err_msg.indexOf('Minimum Bid Amount') >= 0) {
-            e = document.getElementById('amt_bid_min');
-            e.classList.add('error');
-        }
+  let err_msgs = document.querySelectorAll('p.error_msg');
+  for (let i = 0; i < err_msgs.length; i++) {
+    err_msg = err_msgs[i].innerText;
+    if (err_msg.indexOf('coin_to') >= 0 || err_msg.indexOf('Coin To') >= 0) {
+      e = document.getElementById('coin_to');
+      e.classList.add('error');
+    }
+    if (err_msg.indexOf('Coin From') >= 0) {
+      e = document.getElementById('coin_from');
+      e.classList.add('error');
+    }
+    if (err_msg.indexOf('Amount From') >= 0) {
+      e = document.getElementById('amt_from');
+      e.classList.add('error');
+    }
+    if (err_msg.indexOf('Amount To') >= 0) {
+      e = document.getElementById('amt_to');
+      e.classList.add('error');
     }
-});
+    if (err_msg.indexOf('Minimum Bid Amount') >= 0) {
+      e = document.getElementById('amt_bid_min');
+      e.classList.add('error');
+    }
+    if (err_msg.indexOf('Select coin you send') >= 0) {
+      e = document.getElementById('coin_from').parentNode;
+      e.classList.add('error');
+    }
+  }
+
+  // remove error class on input or select focus
+  let inputs = document.querySelectorAll('input.error');
+  let selects = document.querySelectorAll('select.error');
+  let elements = [...inputs, ...selects];
+  elements.forEach((element) => {
+    element.addEventListener('focus', (event) => {
+      event.target.classList.remove('error');
+    });
+  });
+});

basicswap/templates/404.html

@@ -1,39 +1,41 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
-    <div class="flex flex-wrap items-center -m-2">
-      <div class="w-full md:w-1/2 p-2">
-        <ul class="flex flex-wrap items-center gap-x-3 mb-2">
-          <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
-              <p>Home</p>
-            </a>
-          </li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/404">404</a></li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </section>
-  {% include 'inc_messages.html' %}
-  <section class="relative py-24 md:py-40 bg-white">
+ <section class="p-5 mt-5">
+  <div class="flex flex-wrap items-center -m-2">
+   <div class="w-full md:w-1/2 p-2">
+    <ul class="flex flex-wrap items-center gap-x-3 mb-2">
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
+       <p>Home</p>
+      </a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/404">404</a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+    </ul>
+   </div>
+  </div>
+ </section>
+{% include 'inc_messages.html' %}
+  <section class="relative py-24 md:py-40">
     <div class="relative z-10 container px-4 mx-auto">
       <div class="flex flex-wrap items-center -mx-4">
         <div class="w-full md:w-1/2 px-4 mb-16 md:mb-0">
-          <div class="md:max-w-xl md:mx-auto text-center md:text-left"> <span class="inline-block mb-6 px-3 py-1 font-semibold bg-blue-100 rounded-full text-sm">Error 404</span>
-            <h2 class="mb-4 text-4xl md:text-5xl leading-tight font-bold tracking-tighter">Oh no! Error 404</h2>
-            <p class="mb-6 text-lg md:text-xl text-coolGray-500">Something went wrong, so this page is broken.</p>
+          <div class="md:max-w-xl md:mx-auto text-center md:text-left"> <span class="inline-block py-1 px-3 mb-4 text-xs leading-5 bg-blue-500 text-white font-medium rounded-full shadow-sm">Error 404</span>
+            <h2 class="mb-4 text-4xl md:text-5xl leading-tight font-bold tracking-tighter dark:text-white">Oh no! Error 404</h2>
+            <p class="mb-6 text-lg md:text-xl text-coolGray-500 dark:text-gray-300 ">Something went wrong, so this page is broken.</p>
             <div class="flex flex-wrap">
-              <div class="w-full lg:w-auto py-1 lg:py-0 lg:mr-6"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-blue-50 font-medium text-center bg-blue-500 hover:bg-blue-600 border border-blue-500 rounded-md shadow-sm focus:ring-0 focus:outline-none" href="/">Go back to Homepage</a></div>
+              <div class="w-full lg:w-auto py-1 lg:py-0 lg:mr-6"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-blue-50 font-medium text-center bg-blue-500 hover:bg-blue-600 border border-blue-500 rounded-md shadow-sm focus:ring-0 focus:outline-none" href="/">Go Back</a></div>
               <div class="w-full lg:w-auto py-1 lg:py-0"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-coolGray-800 font-medium text-center bg-white hover:bg-coolGray-100 border border-coolGray-200 rounded-md shadow-sm focus:ring-0 focus:outline-none" href="/refresh">Try Again</a></div>
               <!-- todo add last URL page visit -->
             </div>

basicswap/templates/active.html

@@ -1,99 +1,131 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
-    <div class="flex flex-wrap items-center -m-2">
-      <div class="w-full md:w-1/2 p-2">
-        <ul class="flex flex-wrap items-center gap-x-3 mb-2">
-          <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
-              <p>Home</p>
-            </a>
-          </li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/active">Swaps In Progress</a></li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-        </ul>
+ <section class="p-5 mt-5">
+  <div class="flex flex-wrap items-center -m-2">
+   <div class="w-full md:w-1/2 p-2">
+    <ul class="flex flex-wrap items-center gap-x-3 mb-2">
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
+       <p>Home</p>
+      </a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/active">Swaps In Progress</a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+    </ul>
+   </div>
+  </div>
+ </section>
+ <section class="py-4">
+  <div class="container px-4 mx-auto">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
+    <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+    <div class="relative z-20 flex flex-wrap items-center -m-3">
+     <div class="w-full md:w-1/2 p-3">
+      <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Swaps in Progress</h2>
+      <p class="font-normal text-coolGray-200 dark:text-white">Your swaps that are currently in progress.</p>
+     </div>
+     <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
+      {% if refresh %}
+      <a id="refresh" href="/active" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white borderdark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600 border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+       <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+        <g fill="#ffffff">
+         <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
+         <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
+        </g>
+       </svg>
+       <span>Refresh {{ refresh }} seconds</span>
+      </a>
+      {% else %}
+      <a id="refresh" href="/active" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white borderdark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600 border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+       <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+        <g fill="#ffffff">
+         <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
+         <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
+        </g>
+       </svg>
+       <span>Refresh</span>
+      </a>
+      {% endif %}
       </div>
     </div>
-  </section>
-  <section class="py-4">
-    <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
-        <div class="relative z-20 flex flex-wrap items-center">
-          <div class="w-full md:w-1/2 p-3">
-            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Swaps in Progress</h2>
-            <p class="font-semibold text-coolGray-200">Your swaps that are currently in progress.</p>
-          </div>
-          <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto"> 
-            {% if refresh %}
-            <a id="refresh" href="/active" class="flex flex-wrap justify-center px-5 py-4 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">
-              <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                <g fill="#ffffff">
-                  <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
-                  <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
-                </g>
-              </svg><span>Refresh {{ refresh }} seconds</span></a>
-              {% else %}
-            <a id="refresh" href="/active" class="flex flex-wrap justify-center px-5 py-4 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">
-              <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                <g fill="#ffffff">
-                  <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
-                  <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
-                </g>
-              </svg><span>Refresh</span></a>
-            {% endif %} 
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white">
-      <div class="pb-6 border-coolGray-100">
-        <div class="flex flex-wrap items-center justify-between -m-2">
-          <div class="w-full pt-2">
-            <div class="container px-0 mx-auto mt-5">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                    <tr>
-                      <th scope="col" class="py-3 px-6"> Bid ID </th>
-                      <th scope="col" class="py-3 px-6"> Offer ID </th>
-                      <th scope="col" class="py-3 px-6"> Bid Status </th>
-                      <th scope="col" class="py-4 px-7"> ITX Status </th>
-                      <th scope="col" class="py-3 px-7"> PTX Status </th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {% for s in active_swaps %}
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 text-xs monospace"><a href=/bid/{{ s[0] }}>{{ s[0] }}</a></td>
-                      <td class="py-4 px-6 text-xs monospace"><a href=/offer/{{ s[1] }}>{{ s[1] }}</a></td>
-                      <td class="py-4 px-6">{{ s[2] }}</td>
-                      <td class="py-4 px-6">{{ s[3] }}</td>
-                      <td class="py-4 px-6">{{ s[4] }}</td>
-                    </tr>
-                  {% endfor %}
-                </tbody>
-                </table>
+   </div>
+  </div>
+ </section>
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+   <div class="pb-6 border-coolGray-100">
+    <div class="flex flex-wrap items-center justify-between -m-2">
+     <div class="w-full pt-2">
+      <div class="container mt-5 mx-auto">
+       <div class="pt-6 pb-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+        <div class="px-6">
+         <div class="w-full mt-6 pb-6 overflow-x-auto">
+          <table class="w-full min-w-max text-sm">
+           <thead class="uppercase">
+            <tr class="text-left">
+             <th class="p-0">
+              <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Bid ID</span>
+              </div>
+             </th>
+             <th class="p-0">
+              <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Offer ID </span>
+              </div>
+             </th>
+             <th class="p-0">
+              <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Bid Status </span>
+              </div>
+             </th>
+             <th class="p-0">
+              <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">ITX Status </span>
+              </div>
+             </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">PTX Status </span>
               </div>
-            </div>
-          </div>
+             </th>
+            </tr>
+           </thead>
+           {% for s in active_swaps %}
+           <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 monospace">
+             <a href=/bid/{{ s[0] }}>{{ s[0] }}</a>
+            </td>
+            <td class="py-3 px-6 monospace">
+             <a href=/offer/{{ s[1] }}>{{ s[1] }}</a>
+            </td>
+            <td class="py-3 px-6">{{ s[2] }}</td>
+            <td class="py-3 px-6">{{ s[3] }}</td>
+            <td class="py-3 px-6">{{ s[4] }}</td>
+           </tr>
+           {% endfor %}
+          </table>
+         </div>
         </div>
+       </div>
       </div>
+     </div>
     </div>
-  </section>
+   </div>
+  </div>
+ </section>
 </div>
 {% include 'footer.html' %}
 </body>

basicswap/templates/automation_strategies.html

@@ -1,145 +1,241 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
-    <div class="flex flex-wrap items-center -m-2">
-      <div class="w-full md:w-1/2 p-2">
-        <ul class="flex flex-wrap items-center gap-x-3 mb-2">
-          <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
-              <p>Home</p>
-            </a>
-          </li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/automation">Automation Strategies</a></li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-        </ul>
-      </div>
+ <section class="p-5 mt-5">
+  <div class="flex flex-wrap items-center -m-2">
+   <div class="w-full md:w-1/2 p-2">
+    <ul class="flex flex-wrap items-center gap-x-3 mb-2">
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
+       <p>Home</p>
+      </a>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/automation">Automation Strategies</a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+    </ul>
+    </ul>
+   </div>
+  </div>
+ </section>
+ <section class="py-4">
+  <div class="container px-4 mx-auto">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
+    <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+    <div class="relative z-20 flex flex-wrap items-center -m-3">
+     <div class="w-full md:w-1/2 p-3">
+      <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Automation Strategies</h2>
+      <p class="font-normal text-coolGray-200 dark:text-white"></p>
+     </div>
+     <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
+      <a href="/newautomationstrategy" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white borderdark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600 border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+       <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+        <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
+         <line data-cap="butt" x1="5" y1="1" x2="5" y2="6" stroke="#ffffff"></line>
+         <line x1="3" y1="1" x2="7" y2="1" stroke="#fffffwww"></line>
+         <line data-cap="butt" x1="19" y1="1" x2="19" y2="6" stroke="#ffffff"></line>
+         <line x1="17" y1="1" x2="21" y2="1" stroke="#ffffff"></line>
+         <rect x="6" y="15" width="12" height="4" stroke="#ffffff"></rect>
+         <line data-cap="butt" x1="10" y1="19" x2="10" y2="15" stroke="#ffffff"></line>
+         <line data-cap="butt" x1="14" y1="19" x2="14" y2="15" stroke="#ffffff"></line>
+         <line x1="6" y1="11" x2="8" y2="11" stroke="#ffffff"></line>
+         <line x1="16" y1="11" x2="18" y2="11" stroke="#fff"></line>
+         <polygon points="23 6 5 6 1 6 1 23 23 23 23 6"></polygon>
+        </g>
+       </svg>
+       <span>Create New Strategy</span>
+      </a>
+     </div>
     </div>
-  </section>
-  <section class="py-4">
-    <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/elements/wave.svg" alt="">
-        <div class="relative z-20 flex flex-wrap items-center -m-3">
-          <div class="w-full md:w-1/2 p-3">
-            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Automation Strategies</h2>
-            <p class="font-semibold text-coolGray-200"></p>
+   </div>
+  </div>
+ </section>
+ {% include 'inc_messages.html' %}
+ <section>
+  <form method="post">
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+    <div class="border-coolGray-100">
+     <div class="flex flex-wrap items-center justify-between -m-2">
+      <div class="w-full pt-2">
+       <div class="container mt-5 mx-auto">
+        <div class="pt-6 pb-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+         <div class="px-6">
+          <div class="w-full mt-6 pb-6 overflow-x-auto">
+           <table class="w-full min-w-max text-sm">
+            <thead class="uppercase">
+             <tr class="text-left">
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Filters</span>
+               </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold py-3 px-6"></span>
+               </div>
+              </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 py-3 px-6"></span>
+               </div>
+              </th>
+             </tr>
+            </thead>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Sort by:</td>
+             <td class="py-3 px-6">
+              <select class="hover:border-blue-500 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="sort_by">
+               <option value="created_at" {% if filters.sort_by=='created_at' %} selected{% endif %}>Created At</option>
+              </select>
+             </td>
+             <td class="py-3 px-6">
+              <select class="hover:border-blue-500 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="sort_dir">
+               <option value="asc" {% if filters.sort_dir=='asc' %} selected{% endif %}>Ascending</option>
+               <option value="desc" {% if filters.sort_dir=='desc' %} selected{% endif %}>Descending</option>
+              </select>
+             </td>
+            </tr>
+           </table>
           </div>
-          <div class="w-full md:w-1/2 p-3">
-            <a id="refresh" href="/newautomationstrategy">
-              <button class="block md:ml-auto px-5 py-3 font-medium text-lcg text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:ring-0 focus:outline-none">Create New Strategy</button>
-            </a>
+         </div>
+        </div>
+       </div>
+ </section>
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+   <div class="pb-6 ">
+    <div class="flex flex-wrap items-center justify-between -m-2">
+     <div class="w-full pt-2">
+      <div class="container mx-auto">
+       <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+        <div class="px-6">
+         <div class="flex flex-wrap justify-end">
+          <div class="w-full md:w-auto p-1.5 ml-2">
+           <button name='clearfilters' value="Clear Filters" 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">
+            <svg class="mr-2 w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+             <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
+              <line x1="20" y1="2" x2="12.329" y2="11.506"></line>
+              <path d="M11,11a2,2,0,0,1,2,2,3.659,3.659,0,0,1-.2.891A9.958,9.958,0,0,0,13.258,23H1C1,16.373,4.373,11,11,11Z"></path>
+              <line x1="18" y1="15" x2="23" y2="15" stroke="#ffffff"></line>
+              <line x1="17" y1="19" x2="23" y2="19" stroke="#ffffff"></line>
+              <line x1="19" y1="23" x2="23" y2="23" stroke="#ffffff"></line>
+              <path d="M8.059,11.415A3.9,3.9,0,0,0,12,16c.041,0,.079-.011.12-.012" data-cap="butt"></path>
+              <path d="M5,23a13.279,13.279,0,0,1,.208-3.4" data-cap="butt"></path>
+              <path d="M9.042,23c-.688-1.083-.313-3.4-.313-3.4" data-cap="butt"></path>
+             </g>
+            </svg> Clear</button>
           </div>
+          <div class="w-full md:w-auto p-1.5 ml-2">
+           <button name="" value="Submit" 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">
+            <svg class="mr-2 w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+             <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
+              <rect x="2" y="2" width="7" height="7"></rect>
+              <rect x="15" y="15" width="7" height="7"></rect>
+              <rect x="2" y="15" width="7" height="7"></rect>
+              <polyline points="15 6 17 8 22 3" stroke="#ffffff"></polyline>
+             </g>
+            </svg>Apply Filters</button>
+          </div>
+         </div>
         </div>
+       </div>
       </div>
+     </div>
     </div>
-  </section> {% include 'inc_messages.html' %}
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
-      <div class="pb-6 border-coolGray-100">
-        <div class="flex flex-wrap items-center justify-between -m-2">
-          <div class="w-full pt-2">
-            <div class="container px-0 mx-auto mt-5">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <form method="post">
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                      <tr>
-                        <th scope="col" class="py-3 px-6">Filter</th>
-                        <th scope="col" class="py-3 px-6"></th>
-                        <th scope="col"></th>
-                      </tr>
-                    </thead>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold w-96"> Sort by: </td>
-                      <td class="py-4 bold w-96">
-                        <select class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="sort_by">
-                          <option value="created_at" {% if filters.sort_by=='created_at' %} selected{% endif %}>Created At</option>
-                        </select>
-                      </td>
-                      <td class="py-4 px-6 pr-5">
-                        <select class="pr-15 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="sort_dir">
-                          <option value="asc" {% if filters.sort_dir=='asc' %} selected{% endif %}>Ascending</option>
-                          <option value="desc" {% if filters.sort_dir=='desc' %} selected{% endif %}>Descending</option>
-                        </select>
-                      </td>
-                    </tr>
-                  </table>
-              </div>
-            </div>
-            <div class="pt-10 bg-white bg-opacity-60 rounded-b-md">
-              <div class="w-full md:w-0/12">
-                <div class="flex flex-wrap justify-end -m-1.5">
-                  <div class="w-full md:w-auto p-1.5">
-                    <button type="submit" name='pageback' value="Page Back" class="outline-none 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">
-                      <svg aria-hidden="true" class="mr-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                        <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
-                      </svg> <span>Page Back</span> </button>
-                  </div>
-                  <div class="flex items-center">
-                    <div class="w-full md:w-auto p-1.5">
-                      <p class="text-sm font-heading">Page: {{ filters.page_no }}</p>
-                    </div>
-                  </div>
-                  <div class="w-full md:w-auto p-1.5">
-                    <button type="submit" name='pageforwards' value="Page Forwards" class="outline-none 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"> <span>Page Forwards</span>
-                      <svg aria-hidden="true" class="ml-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                        <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
-                      </svg>
-                    </button>
-                  </div>
-                  <div class="w-full md:w-auto p-1.5 ml-2">
-                    <button name='clearfilters' value="Clear Filters" 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">        <svg class="mr-2 w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" class="nc-icon-wrapper">
-                                <rect x="2" y="2" width="7" height="7"></rect>
-                                <rect x="15" y="15" width="7" height="7"></rect>
-                                <rect x="2" y="15" width="7" height="7"></rect>
-                                <polyline points="15 6 17 8 22 3" stroke="#556987"></polyline>
-                              </g>
-                            </svg>  Clear Filters</button>
-                  </div>
-                               <div class="w-full md:w-auto p-1.5 ml-2">
-                          <button name="" value="Submit" 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"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>  Apply</button>
-                        </div>
-                </div>
+   </div>
+  </div>
+ </section>
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+   <div class="border-coolGray-100">
+    <div class="flex flex-wrap items-center justify-between -m-2">
+     <div class="w-full pt-2">
+      <div class="container mt-5 mx-auto">
+       <div class="pt-6 pb-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+        <div class="px-6">
+         <div class="w-full mt-6 pb-6 overflow-x-auto">
+          <table class="w-full min-w-max text-sm">
+           <thead class="uppercase">
+            <tr class="text-left">
+             <th class="p-0">
+              <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Name</span>
               </div>
-            </div>
-            <input type="hidden" name="formid" value="{{ form_id }}">
-            <input type="hidden" name="pageno" value="{{ filters.page_no }}"> </form>
-            <div class="container px-0 mx-auto mt-10">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                    <tr>
-                      <th scope="col" class="py-3 px-6">Name</th>
-                      <th scope="col" class="py-3">Type</th>
-                    </tr>
-                  </thead>
-                  {% for s in strategies %}
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold w-96"> <a class="monospace bolder-t" href=/automationstrategy/{{ s[0] }}>{{ s[1] }}</a> </td>
-                    <td class="py-4 pr-5">{{ s[2] }} </td>
-                  </tr>
-                {% endfor %}
-              </table>
+             </th>
+             <th class="p-0">
+              <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Type</span>
               </div>
-            </div>
+             </th>
+            </tr>
+           </thead>
+           {% for s in strategies %}
+           <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 monospace">
+             <a href=/automationstrategy/{{ s[0] }}>{{ s[1] }}</a>
+            </td>
+            <td class="py-3 px-6">{{ s[2] }}</td>
+           </tr>
+           {% endfor %}
+          </table>
+         </div>
+        </div>
+       </div>
+      </div>
+ </section>
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+   <div class="pb-6 ">
+    <div class="flex flex-wrap items-center justify-between -m-2">
+     <div class="w-full pt-2">
+      <div class="container mx-auto">
+       <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+        <div class="px-6">
+         <div class="flex flex-wrap justify-end">
+          <div class="w-full md:w-auto p-1.5">
+           <button type="submit" name='pageback' value="Page Back" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 focus:ring-0 focus:outline-none">
+            <svg aria-hidden="true" class="mr-2 w-5 h-5" fill="#ffffff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+             <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
+            </svg>
+            <span>Page Back</span>
+           </button>
+          </div>
+          <div class="flex items-center">
+           <div class="w-full md:w-auto p-1.5">
+            <p class="text-sm font-heading dark:text-white">Page: {{ filters.page_no }}</p>
+           </div>
           </div>
+          <div class="w-full md:w-auto p-1.5">
+           <button type="submit" name='pageforwards' value="Page Forwards" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 focus:ring-0 focus:outline-none">
+            <span>Page Forwards</span>
+            <svg aria-hidden="true" class="ml-2 w-5 h-5" fill="#ffffff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+             <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+            </svg>
+           </button>
+          </div>
+         </div>
         </div>
+       </div>
       </div>
+     </div>
     </div>
-  </section>
-</div> 
+   </div>
+  </div>
+ </section>
+ <input type="hidden" name="formid" value="{{ form_id }}">
+ <input type="hidden" name="pageno" value="{{ filters.page_no }}">
+ </form>
+</div>
 {% include 'footer.html' %}
 </div>
 </body>

basicswap/templates/automation_strategy.html

@@ -1,116 +1,171 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
-    <div class="flex flex-wrap items-center -m-2">
-      <div class="w-full md:w-1/2 p-2">
-        <ul class="flex flex-wrap items-center gap-x-3 mb-2">
-          <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
-              <p>Home</p>
-            </a>
-          </li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/automation">Automation Strategies</a></li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/automation">ID: {{ strategy_id }}</a></li>
-        </ul>
-      </div>
+ <section class="p-5 mt-5">
+  <div class="flex flex-wrap items-center -m-2">
+   <div class="w-full md:w-1/2 p-2">
+    <ul class="flex flex-wrap items-center gap-x-3 mb-2">
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
+       <p>Home</p>
+      </a>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/automation">Automation Strategies</a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/automation">ID: <!-- todo ID here {{ strategy_id }} --></a>
+     </li>
+    </ul>
+    </ul>
+   </div>
+  </div>
+ </section>
+ <section class="py-4">
+  <div class="container px-4 mx-auto">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
+    <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+    <div class="relative z-20 flex flex-wrap items-center -m-3">
+     <div class="w-full md:w-1/2 p-3">
+      <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Automation Strategy {{ strategy_id }}</h2>
+      <p class="font-normal text-coolGray-200 dark:text-white">ID: <!-- todo ID here  {{ strategy_id }} -->
+      </p>
+     </div>
     </div>
-  </section>
-  <section class="py-4">
-    <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
-        <div class="relative z-20 flex flex-wrap items-center -m-3">
-          <div class="w-full md:w-1/2 p-3">
-            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Automation Strategy {{ strategy_id }}</h2></div>
+   </div>
+  </div>
+ </section>
+ {% include 'inc_messages.html' %}
+ <section>
+  <form method="post" autocomplete="off">
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden min-height-50">
+    <div class="border-coolGray-100">
+     <div class="flex flex-wrap items-center justify-between -m-2">
+      <div class="w-full pt-2">
+       <div class="container mt-5 mx-auto">
+        <div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+         <div class="px-6">
+          <div class="w-full mt-6 pb-6 overflow-x-auto">
+           <table class="w-full min-w-max text-sm">
+            <thead class="uppercase">
+             <tr class="text-left">
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tl-xl  bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Options</span>
+               </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Type</span>
+               </div>
+              </th>
+             </tr>
+            </thead>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Label</td>
+             <td class="py-3 px-6">{{ strategy.label }}</td>
+            </tr>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Type</td>
+             <td class="py-3 px-6">{{ strategy.type }}</td>
+            </tr>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Only known identities</td>
+             <td class="py-3 px-6">{{ strategy.only_known_identities }}</td>
+            </tr>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Data</td>
+             <td class="py-3 px-6">
+              <textarea name="data" class="hover:border-blue-500 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 monospace" rows="20" {% if not show_edit_form %}readonly{% endif %}>{{ strategy.data }}</textarea>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Notes</td>
+             <td class="py-3 px-6">
+              <textarea name="note" class="hover:border-blue-500 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 monospace" rows="20" {% if not show_edit_form %}readonly{% endif %}>{{ strategy.note }}</textarea>
+             </td>
+            </tr>
+           </table>
+          </div>
+         </div>
         </div>
+       </div>
       </div>
+     </div>
     </div>
-  </section>
-  {% include 'inc_messages.html' %}
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
-      <div class="pb-6 border-coolGray-100">
-        <div class="flex flex-wrap items-center justify-between -m-2">
-          <div class="w-full pt-2 text-center ">
-            <form method="post" autocomplete="off">
-            <div class="container px-0 mx-auto mt-5">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                    <tr>
-                      <th scope="col" class="py-3 px-6">Option</th>
-                      <th scope="col" class="py-3">Type</th>
-                      <th scope="col"></th>
-                    </tr>
-                  </thead>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold w-96">Label</td>
-                    <td>{{ strategy.label }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold w-96">Type</td>
-                    <td>{{ strategy.type }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold w-96">Only known identities</td>
-                    <td>{{ strategy.only_known_identities }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold w-96">Data</td>
-                    <td class="py-4 pr-5">
-                      <textarea name="data" class="outline-none block p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 w-full monospace" rows="5" {% if not show_edit_form %}readonly{% endif %}>{{ strategy.data }}</textarea>
-                      <tr class="bg-white border-t hover:bg-gray-50">
-                        <td class="py-4 px-6 bold w-96">Notes</td>
-                        <td class="py-4 pr-5">
-                          <textarea name="note" class="outline-none block p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 w-full monospace" rows="5" {% if not show_edit_form %}readonly{% endif %}>{{ strategy.note }}</textarea>
-                        </td>
-                      </tr>
-                </table>
-              </div>
-            </div>
-            <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
-              <div class="w-full md:w-0/12">
-                <div class="flex flex-wrap justify-end -m-1.5">
-                  {% if show_edit_form %}
-                  <div class="w-full md:w-auto p-1.5 ml-2">
-                    <button name="apply" value="Apply" 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"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>Apply</button>
-                  </div>
-                  <div class="w-full md:w-auto p-1.5 ml-2">
-                    <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-red-500 hover:text-red-600 border border-red-400 hover:border-red-500 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ef5844" stroke-linejoin="round" ><line x1="16" y1="8" x2="8" y2="16" stroke="#ef5844"></line> <line x1="16" y1="16" x2="8" y2="8" stroke="#ef5844"></line> <circle cx="12" cy="12" r="11"></circle></g></svg>Cancel</button>
-                  </div>
-                  {% else %}
-                  <div class="w-full md:w-auto p-1.5">
-                    <button name="edit" value="edit" 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">
-                    <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><line x1="2" y1="23" x2="22" y2="23" stroke="#ffffff"></line> <line data-cap="butt" x1="13" y1="5" x2="17" y2="9"></line> <polygon points="8 18 3 19 4 14 16 2 20 6 8 18"></polygon></g></svg>Edit</button>
-                  </div>
-                  <div class="w-full md:w-auto p-1.5 ml-2">
-                    <a href="/automation" type="submit" 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-non"><svg class="text-gray-500 w-5 h-5 mr-2" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line data-cap="butt" x1="18" y1="12" x2="7" y2="12" stroke-linecap="butt" stroke="#556987"></line> <polyline points=" 11,16 7,12 11,8 " stroke="#5569878"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg> <span>Back</span> </a>
-                  </div>
-                  {% endif %}
-                </div>
-              </div>
-            </div>
-            <input type="hidden" name="formid" value="{{ form_id }}">
-            </form>
+   </div>
+ </section>
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+   <div class="pb-6 ">
+    <div class="flex flex-wrap items-center justify-between -m-2">
+     <div class="w-full pt-2">
+      <div class="container mx-auto">
+       <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+        <div class="px-6">
+         <div class="flex flex-wrap justify-end">
+          {% if show_edit_form %}
+          <div class="w-full md:w-auto p-1.5 ml-2">
+           <button name="apply" value="Apply" 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">
+            <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+             <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
+              <polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline>
+              <circle cx="12" cy="12" r="11"></circle>
+             </g>
+            </svg>Apply</button>
+          </div>
+          <div class="w-full md:w-auto p-1.5 ml-2">
+           <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-red-500 hover:bg-red-600 font-medium text-sm text-white border border-red-500 rounded-md shadow-button focus:ring-0 focus:outline-none" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+            <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ef5844" stroke-linejoin="round">
+             <line x1="16" y1="8" x2="8" y2="16" stroke="#ef5844"></line>
+             <line x1="16" y1="16" x2="8" y2="8" stroke="#ef5844"></line>
+             <circle cx="12" cy="12" r="11"></circle>
+            </g>
+            </svg>Cancel</button>
+          </div> {% else %} <div class="w-full md:w-auto p-1.5">
+           <button name="edit" value="edit" 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">
+            <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+             <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
+              <line x1="2" y1="23" x2="22" y2="23" stroke="#ffffff"></line>
+              <line data-cap="butt" x1="13" y1="5" x2="17" y2="9"></line>
+              <polygon points="8 18 3 19 4 14 16 2 20 6 8 18"></polygon>
+             </g>
+            </svg>Edit</button>
+          </div>
+          <div class="w-full md:w-auto p-1.5 ml-2">
+           <a href="/automation" 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">
+            <svg class="text-gray-500 w-5 h-5 mr-2" height="24" width="24" viewBox="0 0 24 24">
+             <g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10">
+              <line data-cap="butt" x1="18" y1="12" x2="7" y2="12" stroke-linecap="butt" stroke="#ffffff"></line>
+              <polyline points=" 11,16 7,12 11,8 " stroke="#ffffff"></polyline>
+              <circle cx="12" cy="12" r="11"></circle>
+             </g>
+            </svg>
+            <span>Back</span>
+           </a>
           </div>
+          {% endif %}
+          <input type="hidden" name="formid" value="{{ form_id }}">
+          </form>
+         </div>
         </div>
+       </div>
       </div>
+     </div>
     </div>
-  </section>
+   </div>
+  </div>
+ </section>
 </div>
 {% include 'footer.html' %}
 </div>
 </body>
-</html>
+</html>

basicswap/templates/automation_strategy_new.html

@@ -1,54 +1,61 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
+   <section class="p-5 mt-5">
     <div class="flex flex-wrap items-center -m-2">
-      <div class="w-full md:w-1/2 p-2">
-        <ul class="flex flex-wrap items-center gap-x-3 mb-2">
-          <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
-              <p>Home</p>
-            </a>
-          </li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/automation">Automation Strategies</a></li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/newautomationstrategy">New</a></li>
-        </ul>
-      </div>
+     <div class="w-full md:w-1/2 p-2">
+      <ul class="flex flex-wrap items-center gap-x-3 mb-2">
+       <li>
+        <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
+         <p>Home</p>
+        </a>
+       <li>
+        <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+         <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+        </svg>
+       </li>
+       <li>
+        <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/automation">Automation Strategies</a>
+       </li>
+       <li>
+        <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+         <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+        </svg>
+       </li>
+       <li>
+        <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/newautomationstrategy">New</a>
+       </li>
+      </ul>
+      </ul>
+     </div>
     </div>
-  </section>
-  <section class="py-4">
+   </section>
+   <section class="py-4">
     <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
-        <div class="relative z-20 flex flex-wrap items-center -m-3">
-          <div class="w-full md:w-1/2 p-3">
-            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">New Automation Strategy (todo)</h2></div>
-        </div>
+     <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
+      <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
+      <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
+      <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+      <div class="relative z-20 flex flex-wrap items-center -m-3">
+       <div class="w-full md:w-1/2 p-3">
+        <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">New Automation Strategy</h2>
+        <p class="font-normal text-coolGray-200 dark:text-white">Todo <!-- todo -->
+        </p>
+       </div>
       </div>
+     </div>
     </div>
-  </section>
-{% include 'inc_messages.html' %}
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
-      <div class="pb-6 border-coolGray-100">
-        <div class="flex flex-wrap items-center justify-between -m-2">
-          <div class="w-full pt-2 text-center "> </div>
-        </div>
+   </section>
+   {% include 'inc_messages.html' %}
+   <section>
+    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden">
+     <div class="pb-6 border-coolGray-100">
+      <div class="flex flex-wrap items-center justify-between -m-2">
+       <div class="w-full pt-2 text-center "></div>
       </div>
+     </div>
     </div>
-  </section>
-</div>
+   </section>
+  </div>
 {% include 'footer.html' %}
 </div>
 </body>

basicswap/templates/bid.html

@@ -1,454 +1,592 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
-    <div class="flex flex-wrap items-center -m-2">
-      <div class="w-full md:w-1/2 p-2">
-        <ul class="flex flex-wrap items-center gap-x-3 mb-2">
-          <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
-              <p>Home</p>
-            </a>
-          </li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="#">Bids</a></li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="{{ bid_id }}">BID ID: {{ bid_id }}</a></li>
-        </ul>
+ <section class="p-5 mt-5">
+  <div class="flex flex-wrap items-center -m-2">
+   <div class="w-full md:w-1/2 p-2">
+    <ul class="flex flex-wrap items-center gap-x-3 mb-2">
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
+       <p>Home</p>
+      </a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="#">Bids</a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="{{ bid_id }}">BID ID: {{ bid_id }}</a>
+     </li>
+    </ul>
+   </div>
+  </div>
+ </section>
+ <section class="py-3">
+  <div class="container px-4 mx-auto">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
+    <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+    <div class="relative z-20 flex flex-wrap items-center -m-3">
+     <div class="w-full md:w-1/2 p-3">
+      <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Bid {% if debug_mode == true %} (Debug: bid template) {% endif %}</h2>
+      <p class="font-normal text-coolGray-200 dark:text-white">Bid ID: {{ bid_id }}</p>
+     </div>
+     <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto"> {% if refresh %} <a id="refresh" href="/bid/{{ bid_id }}" class="flex flex-wrap justify-center px-5 py-3 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border dark:bg-gray-500 dark:hover:bg-gray-700 border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+       <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+        <g fill="#ffffff">
+         <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
+         <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
+        </g>
+       </svg>
+       <span>Refresh {{ refresh }} seconds</span>
+      </a> {% else %} <a id="refresh" href="/bid/{{ bid_id }}" class="flex flex-wrap justify-center px-5 py-3 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border dark:bg-gray-500 dark:hover:bg-gray-700 border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+       <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+        <g fill="#ffffff">
+         <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
+         <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
+        </g>
+       </svg>
+       <span>Refresh</span>
+      </a>
+    {% endif %}
+      </div>
+    </div>
+   </div>
+  </div>
+ </section>
+ {% include 'inc_messages.html' %}
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden">
+   <div class="pb-6 border-coolGray-100">
+    <div class="flex flex-wrap items-center justify-between -m-2">
+     <div class="w-full pt-2">
+      <div class="container mt-5 mx-auto">
+       <div class="pt-6 pb-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+        <div class="px-6">
+         <div class="w-full mt-6 pb-6 overflow-x-auto">
+          <table class="w-full min-w-max text-sm">
+           <thead class="uppercase">
+            <tr class="text-left">
+             <th class="p-0">
+              <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Options</span>
+              </div>
+             </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">Details</span>
+              </div>
+             </th>
+            </tr>
+           </thead>
+           {% if data.was_sent == '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">Swap</td>
+            <td class="py-3 px-6">
+             <div class="content flex py-2">
+              <span class="bold">{{ data.amt_to }} {{ data.ticker_to }}</span>
+              <svg aria-hidden="true " class="w-5 h-5 ml-3 mr-3" fill="currentColor " viewBox="0 0 20 20 " xmlns="http://www.w3.org/2000/svg ">
+               <path fill-rule="evenodd " d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z " clip-rule="evenodd "></path>
+              </svg>
+              <span class="text-xs bold">{{ data.amt_from }} {{ data.ticker_from }}</span>
+             </div>
+            </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="py-3 px-6 bold">Swap</td>
+            <td class="py-3 px-6">
+             <div class="content flex py-2">
+              <span class="bold">{{ data.amt_from }} {{ data.ticker_from }}</span>
+              <svg aria-hidden="true " class="w-5 h-5 ml-3 mr-3" fill="currentColor " viewBox="0 0 20 20 " xmlns="http://www.w3.org/2000/svg ">
+               <path fill-rule="evenodd " d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z " clip-rule="evenodd "></path>
+              </svg>
+              <span class="bold">{{ data.amt_to }} {{ data.ticker_to }}</span>
+             </div>
+            </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">Bid Rate</td>
+            <td class="py-3 px-6">{{ data.bid_rate }}</td>
+           </tr>
+           {% if data.was_sent == '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">You Send</td>
+            <td class="py-3 px-6">
+             <span class="inline-flex 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>{{ data.coin_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">You Get</td>
+            <td class="py-3 px-6">
+             <span class="inline-flex 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>{{ data.coin_from }}
+            </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="py-3 px-6 bold">You Send</td>
+            <td class="py-3 px-6">
+             <span class="inline-flex 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>{{ data.coin_from }}
+            </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">You Get</td>
+            <td class="py-3 px-6">
+             <span class="inline-flex 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>{{ data.coin_to }}
+            </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">Bid State</td>
+            <td class="py-3 px-6">{{ data.bid_state }}</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">State Description </td>
+            <td class="py-3 px-6">{{ data.state_description }}</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">Offer</td>
+            <td class="py-3 px-6">
+             <a class="monospace bold select-all" href="/offer/{{ data.offer_id }}">{{ data.offer_id }}</a>
+            </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">Address From</td>
+            <td class="py-3 px-6">
+             <a class="monospace bold select-all" href="/identity/{{ data.addr_from }}">{{ data.addr_from }}</a> {{ data.addr_from_label }}
+            </td>
+           </tr>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="flex items-center px-46 whitespace-nowrap">
+             <svg alt="" class="w-5 h-5 rounded-full ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3B82F6" stroke-linejoin="round">
+               <circle cx="12" cy="12" r="11"></circle>
+               <polyline points=" 12,6 12,12 18,12 " stroke="#3B82F6"></polyline>
+              </g>
+             </svg>
+             <div class="py-3 pl-2 bold">
+              <div>Created At</div>
+             </div>
+            </td>
+            <td class="py-3 px-6">{{ data.created_at }}</td>
+           </tr>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="flex items-center px-46 whitespace-nowrap">
+             <svg alt="" class="w-5 h-5 rounded-full  ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+               <circle cx="12" cy="12" r="11"></circle>
+               <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
+              </g>
+             </svg>
+             <div class="py-3 pl-2 bold">
+              <div>Expired At</div>
+             </div>
+            </td>
+            <td class="py-3 px-6">{{ data.expired_at }}</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">Sent</td>
+            <td class="py-3 px-6">{{ data.was_sent }}</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">Received</td>
+            <td class="py-3 px-6">{{ data.was_received }}</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">Initiate Tx</td>
+            <td class="py-3 px-6 monospace">{{ data.initiate_tx }}</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">Initiate Conf</td>
+            <td class="py-3 px-6">{{ data.initiate_conf }}</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">Participate Tx</td>
+            <td class="py-3 px-6 monospace">{{ data.participate_tx }}</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">Participate Conf</td>
+            <td class="py-3 px-6">{{ data.participate_conf }}</td>
+           </tr>
+           {% if data.show_txns %}
+           <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">Initiate Tx Refund</td>
+            <td class="py-3 px-6 monospace">{{ data.initiate_tx_refund }}</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">Participate Tx Refund</td>
+            <td class="py-3 px-6 monospace">{{ data.participate_tx_refund }}</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">Initiate Tx Spend Tx</td>
+            <td class="py-3 px-6 monospace">{{ data.initiate_tx_spend }}</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">Participate Tx Spend Tx</td>
+            <td class="py-3 px-6 monospace">{{ data.participate_tx_spend }}</td>
+           </tr>
+           {% endif %}
+          </table>
+         </div>
+        </div>
+        </table>
+       </div>
+      </div>
+     </div>
+ </section>
+ <section class="p-6">
+  <div class="flex flex-wrap items-center">
+   <div class="w-full">
+    <h4 class="font-semibold text-black dark:text-white text-2xl">Old states</h4>
+   </div>
+  </div>
+ </section>
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+   <div class="pb-6 border-coolGray-100">
+    <div class="flex flex-wrap items-center justify-between -m-2">
+     <div class="w-full pt-2">
+      <div class="container mt-5 mx-auto">
+       <div class="pt-6 pb-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+        <div class="px-6">
+         <div class="w-full mt-6 pb-6 overflow-x-auto">
+          <table class="w-full min-w-max text-sm">
+           <thead class="uppercase">
+            <tr class="text-left">
+             <th class="p-0">
+              <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Set at time</span>
+              </div>
+             </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">Old states</span>
+              </div>
+             </th>
+            </tr>
+           </thead>
+           {% for s in old_states %}
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="flex items-center whitespace-nowrap">
+             <svg alt="" class="w-5 h-5 rounded-full  ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+               <circle cx="12" cy="12" r="11"></circle>
+               <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
+              </g>
+             </svg>
+             <div class="py-3 pl-2 bold">
+              <div>{{ s[0] | formatts }}</div>
+             </div>
+            </td>
+            <td class="py-3 px-6">{{ s[1] }}</td>
+           </tr>
+           {% endfor %}
+          </table>
+         </div>
+        </div>
+       </div>
+      </div>
+     </div>
+    </div>
+   </div>
+  </div>
+ </section>
+ {% if data.events %}
+ <section class="p-6">
+  <div class="flex flex-wrap items-center">
+   <div class="w-full">
+    <h4 class="font-semibold text-black dark:text-white text-2xl">Events</h4>
+   </div>
+  </div>
+ </section>
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+   <div class="pb-6 border-coolGray-100">
+    <div class="flex flex-wrap items-center justify-between -m-2">
+     <div class="w-full pt-2">
+      <div class="container mt-5 mx-auto">
+       <div class="pt-6 pb-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+        <div class="px-6">
+         <div class="w-full mt-6 pb-6 overflow-x-auto">
+          <table class="w-full min-w-max text-sm">
+           <thead class="uppercase">
+            <tr class="text-left">
+             <th class="p-0">
+              <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Time</span>
+              </div>
+             </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">Events</span>
+              </div>
+             </th>
+            </tr>
+           </thead>
+           {% for e in data.events %}
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="flex items-center px-46 whitespace-nowrap">
+             <svg alt="" class="w-5 h-5 rounded-full  ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+               <circle cx="12" cy="12" r="11"></circle>
+               <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
+              </g>
+             </svg>
+             <div class="py-3 pl-2 bold">
+              <div>{{ e.at | formatts }}</div>
+             </div>
+            </td>
+            <td class="py-3 px-6">{{ e.desc }}</td>
+           </tr>
+           {% endfor %}
+          </table>
+         </div>
+        </div>
+       </div>
       </div>
+     </div>
+    </div>
+   </div>
+  </div>
+ </section>
+ {% else %}
+ {% endif %}
+ <form method="post"> {% if data.show_bidder_seq_diagram %} <section class="p-6">
+   <div class="flex flex-wrap items-center">
+    <div class="w-full">
+     <h4 class="font-semibold text-black dark:text-white text-2xl">Bidder Sequence Diagram</h4>
     </div>
+   </div>
   </section>
-  <section class="py-4">
-    <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
-        <div class="relative z-20 flex flex-wrap items-center -m-3">
-          <div class="w-full md:w-1/2 p-3">
-            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Bid
-              {% if debug_mode == true %}
-              (Debug: bid template)
-              {% endif %}
-            </h2>
-            <p class="font-semibold text-coolGray-200">Bid ID: {{ bid_id }}</p>
-          </div>
-          <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
-            {% if refresh %}
-            <a id="refresh" href="/bid/{{ bid_id }}" class="flex flex-wrap justify-center px-5 py-4 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">
-              <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                <g fill="#ffffff">
-                  <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
-                  <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
-                </g>
-              </svg><span>Refresh {{ refresh }} seconds</span></a>
-              {% else %}
-            <a id="refresh" href="/bid/{{ bid_id }}" class="flex flex-wrap justify-center px-5 py-4 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">
-              <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                <g fill="#ffffff">
-                  <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
-                  <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
-                </g>
-              </svg><span>Refresh</span> </a>
-            {% endif %}
+  <section>
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+    <div class="pb-6 border-coolGray-100">
+     <div class="flex flex-wrap items-center justify-between -m-2">
+      <div class="w-full pt-2">
+       <div class="container mt-5 mx-auto">
+        <div class="pt-6 pb-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+         <div class="px-6">
+          <div class="w-full mt-6 pb-6 overflow-x-auto">
+           <div class="overflow-x-auto items-center justify-center relative">
+            <div class="flex items-center justify-center min-h-screen">
+             <div class="flex items-center justify-between text-white">
+              <img class="h-full py-2 pr-4 ml-8" src="/static/sequence_diagrams/bidder.alt.xu.min.svg">
+             </div>
+            </div>
+           </div>
           </div>
+         </div>
         </div>
+       </div>
       </div>
+     </div>
     </div>
+   </div>
   </section>
-  {% include 'inc_messages.html' %}
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
-      <div class="pb-6 border-coolGray-100">
-        <div class="flex flex-wrap items-center justify-between -m-2">
-          <div class="w-full pt-2">
-            <div class="container px-0 mx-auto mt-5">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                    <tr>
-                      <th scope="col" class="py-3 px-6 w-1/3">Details</th>
-                      <th scope="col"></th>
-                    </tr>
-                  </thead>
-                  {% if data.was_sent == 'True' %}
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Swap</td>
-                    <td>
-                      <div class="content flex py-2">
-                      <span class="bold">{{ data.amt_to }} {{ data.ticker_to }}</span>
-                      <svg aria-hidden="true " class="w-5 h-5 ml-3 mr-3" fill="currentColor " viewBox="0 0 20 20 " xmlns="http://www.w3.org/2000/svg ">
-                      <path fill-rule="evenodd " d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z " clip-rule="evenodd "></path></svg>
-                       <span class="bold">{{ data.amt_from }} {{ data.ticker_from }}</span>
-                      </div>
-                    </td>
-                  </tr>
-                  {% else %}
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Swap</td>
-                    <td>
-                      <div class="content flex py-2">
-                      <span class="bold">{{ data.amt_from }} {{ data.ticker_from }}</span>
-                      <svg aria-hidden="true " class="w-5 h-5 ml-3 mr-3" fill="currentColor " viewBox="0 0 20 20 " xmlns="http://www.w3.org/2000/svg ">
-                      <path fill-rule="evenodd " d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z " clip-rule="evenodd "></path></svg>
-                       <span class="bold">{{ data.amt_to }} {{ data.ticker_to }}</span>
-                      </div>
-                    </td>
-                  </tr>
-                  {% endif %}
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Bid Rate</td>
-                    <td>{{ data.bid_rate }}</td>
-                  </tr>
-                  {% if data.was_sent == 'True' %}
-                   <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">You Send </td>
-                    <td> <span class="inline-flex 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> {{ data.coin_to }} </td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">You Get</td>
-                    <td> <span class="inline-flex 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> {{ data.coin_from }} </td>
-                  </tr>
-                  {% else %}
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">You Send</td>
-                    <td> <span class="inline-flex 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> {{ data.coin_from }} </td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">You Get</td>
-                    <td> <span class="inline-flex 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> {{ data.coin_to }} </td>
-                  </tr>
-                  {% endif %}
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Bid State</td>
-                    <td>{{ data.bid_state }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">State Description </td>
-                    <td>{{ data.state_description }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">ITX State</td>
-                    <td>{{ data.itx_state }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">PTX State</td>
-                    <td>{{ data.ptx_state }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Offer</td>
-                    <td><a class="monospace bold select-all" href="/offer/{{ data.offer_id }}">{{ data.offer_id }}</a></td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Address From</td>
-                    <td><a class="monospace bold select-all" href="/identity/{{ data.addr_from }}">{{ data.addr_from }}</a> {{ data.addr_from_label }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Proof of Funds</td>
-                    <td>{{ data.proof_address }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td scope="row" class="flex items-center px-46 whitespace-nowrap">
-                      <svg alt="" class="w-5 h-5 rounded-full ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                        <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                          <circle cx="12" cy="12" r="11"></circle>
-                          <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
-                        </g>
-                      </svg>
-                      <div class="py-4 pl-2 bold">
-                        <div>Created At</div>
-                      </div>
-                    </td>
-                    <td>{{ data.created_at }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td scope="row" class="flex items-center px-46 whitespace-nowrap">
-                      <svg alt="" class="w-5 h-5 rounded-full  ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                        <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                          <circle cx="12" cy="12" r="11"></circle>
-                          <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
-                        </g>
-                      </svg>
-                      <div class="py-4 pl-2 bold">
-                        <div>Expired At</div>
-                      </div>
-                    </td>
-                    <td>{{ data.expired_at }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Sent</td>
-                    <td>{{ data.was_sent }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Received</td>
-                    <td>{{ data.was_received }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Initiate Tx</td>
-                    <td class="monospace">{{ data.initiate_tx }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Initiate Conf</td>
-                    <td>{{ data.initiate_conf }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Participate Tx</td>
-                    <td class="monospace">{{ data.participate_tx }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Participate Conf</td>
-                    <td>{{ data.participate_conf }}</td>
-                  </tr>
-                  {% if data.show_txns %}
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Initiate Tx Refund</td>
-                    <td class="monospace">{{ data.initiate_tx_refund }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Participate Tx Refund</td>
-                    <td class="monospace">{{ data.participate_tx_refund }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Initiate Tx Spend Tx</td>
-                    <td class="monospace">{{ data.initiate_tx_spend }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Participate Tx Spend Tx</td>
-                    <td class="monospace">{{ data.participate_tx_spend }}</td>
-                  </tr>
-                {% endif %}
-              </table>
-              </div>
+  {% endif %}
+  {% if data.show_offerer_seq_diagram %}
+  <section class="p-6">
+   <div class="flex flex-wrap items-center">
+    <div class="w-full">
+     <h4 class="font-semibold text-black dark:text-white text-2xl">Offerer Sequence Diagram</h4>
+    </div>
+   </div>
+  </section>
+  <section>
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+    <div class="pb-6 border-coolGray-100">
+     <div class="flex flex-wrap items-center justify-between -m-2">
+      <div class="w-full pt-2">
+       <div class="container mt-5 mx-auto">
+        <div class="pt-6 pb-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+         <div class="px-6">
+          <div class="w-full mt-6 pb-6 overflow-x-auto">
+           <div class="overflow-x-auto items-center justify-center relative">
+            <div class="flex items-center justify-center min-h-screen">
+             <div class="flex items-center justify-between text-white">
+              <img class="h-full py-2 pr-4 ml-8" src="/static/sequence_diagrams/offerer.alt.xu.min.svg">
+             </div>
             </div>
-            <section class="bg-white p-6">
-              <div class="flex flex-wrap items-center">
-                <div class="w-full">
-                  <h4 class="font-semibold text-black text-2xl">Old states</h4> </div>
-              </div>
-            </section>
-            <div class="container px-0 mx-auto">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                    <tr>
-                      <th scope="col" class="py-3 px-6">Old States</th>
-                      <th scope="col">Set at Time</th>
-                    </tr>
-                  </thead>
-                  {% for s in old_states %}
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-3 px-6 w-1/3 bold"> {{ s[1] }}</td>
-                    <td scope="row" class="flex items-center px-46 whitespace-nowrap">
-                      <svg alt="" class="w-5 h-5 rounded-full  mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                        <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                          <circle cx="12" cy="12" r="11"></circle>
-                          <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
-                        </g>
-                      </svg>
-                      <div class="py-4 pr-2">
-                        <div>{{ s[0] | formatts }}</div>
-                      </div>
-                    </td>
-                  </tr>
+           </div>
+          </div>
+         </div>
+        </div>
+       </div>
+      </div>
+     </div>
+    </div>
+   </div>
+  </section>
+  {% endif %}
+  {% if edit_bid %}
+  <section>
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+    <div class="pb-6 border-coolGray-100">
+     <div class="flex flex-wrap items-center justify-between -m-2">
+      <div class="w-full pt-2">
+       <div class="container mt-5 mx-auto">
+        <div class="pt-6 pb-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+         <div class="px-6">
+          <div class="w-full mt-6 pb-6 overflow-x-auto">
+           <table class="w-full min-w-max text-sm">
+            <thead class="uppercase">
+             <tr class="text-left">
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Option</span>
+               </div>
+              </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>
+               </div>
+              </th>
+             </tr>
+            </thead>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Change Bid State:</td>
+             <td class="py-3 px-6">
+              <div class="relative">
+               <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+               </svg>
+               <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-" name="new_state">
+                {% for s in data.bid_states %}
+                <option value="{{ s[0] }}" {% if data.bid_state_ind==s[0] %} selected{% endif %}>{{ s[1] }}</option>
                 {% endfor %}
-              </table>
-              </div>
-            </div> {% if data.events %}
-            <section class="bg-white p-6">
-              <div class="flex flex-wrap items-center">
-                <div class="w-full">
-                  <h4 class="font-semibold text-black text-2xl">Events</h4> </div>
+                </select>
               </div>
-            </section>
-            <div class="container px-0 mx-auto">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                    <tr>
-                      <th scope="col" class="w-1/3 py-3 px-6 bold">Time</th>
-                      <th scope="col">Events</th>
-                    </tr>
-                  </thead>
-                  {% for e in data.events %}
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td scope="row" class="flex items-center px-46 whitespace-nowrap">
-                      <svg alt="" class="w-5 h-5 rounded-full  ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                        <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                          <circle cx="12" cy="12" r="11"></circle>
-                          <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
-                        </g>
-                      </svg>
-                      <div class="py-4 pl-2 bold">
-                        <div>{{ e.at | formatts }}</div>
-                      </div>
-                    </td>
-                    <td>{{ e.desc }}</td>
-                  </tr> {% endfor %} </table>
+             </td>
+            </tr>
+            {% if data.debug_ui == true %}
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Debug Option</td>
+             <td class="py-3 px-6">
+              <div class="relative">
+               <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+               </svg>
+               <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-" name="debugind">
+                <option{% if data.debug_ind=="-1" %} selected{% endif %} value="-1">None</option>
+                {% for a in data.debug_options %}
+                <option{% if data.debug_ind==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[1] }}</option>
+                {% endfor %}
+               </select>
               </div>
-            </div>
-            {% else %}
-             {% endif %}
-            <form method="post">
-              <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
-                <div class="w-full md:w-0/12">
-                  <div class="flex flex-wrap justify-end -m-1.5">
-                    {% if edit_bid %}
-                    <table class="mt-1">
-                      <tr>
-                        <td class="pr-2 bold">Change Bid State:</td>
-                        <td>
-                          <div class="relative">
-                                <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                  <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
-                                </svg>
-                          <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="new_state">
-                            {% for s in data.bid_states %}
-                            <option value="{{ s[0] }}" {% if data.bid_state_ind==s[0] %} selected{% endif %}>{{ s[1] }}</option>
-                          {% endfor %}
-                        </select>
-                         </div>
-                        </td>
-                      </tr>
-                      {% if data.debug_ui == true %}
-                      <tr>
-                        <td class="py-6 pr-2 bold">Debug Option:</td>
-                        <td>
-                        <div class="relative">
-                                <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                  <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
-                                </svg>
-                          <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="debugind">
-                            <option{% if data.debug_ind=="-1" %} selected{% endif %} value="-1">None</option>
-                              {% for a in data.debug_options %}
-                              <option{% if data.debug_ind==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[1] }}</option>
-                              {% endfor %}
-                            </select>
-                          </div>
-                        </td>
-                      </tr>
-                    {% endif %}
-                  </table>
-                    <div class="w-full md:w-auto p-1.5 ml-2">
-                      <button name="edit_bid_cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-red-500 hover:text-red-600 border border-red-400 hover:border-red-500 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ef5844" stroke-linejoin="round" ><line x1="16" y1="8" x2="8" y2="16" stroke="#ef5844"></line> <line x1="16" y1="16" x2="8" y2="8" stroke="#ef5844"></line> <circle cx="12" cy="12" r="11"></circle></g></svg> Cancel </button>
-                    </div>
-                    <div class="w-full md:w-auto p-1.5">
-                      <button name="edit_bid_submit" value="Submit" type="submit" 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">
- <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><line x1="2" y1="23" x2="22" y2="23" stroke="#556987"></line> <line data-cap="butt" x1="13" y1="5" x2="17" y2="9"></line> <polygon points="8 18 3 19 4 14 16 2 20 6 8 18"></polygon></g></svg> Submit Edit </button>
-                    </div>
-                    {% else %}
+             </td>
+            </tr>
+              {% endif %}
+           </table>
+          </div>
+         </div>
+        </div>
+       </div>
+      </div>
+     </div>
+    </div>
+   </div>
+  </section>
+  <section>
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+    <div class="pb-6 border-coolGray-100">
+     <div class="flex flex-wrap items-center justify-between -m-2">
+      <div class="w-full pt-2">
+       <div class="container mt-5 mx-auto">
+        <div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+         <div class="px-6">
+          <div class="flex flex-wrap justify-end">
+           <div class="w-full md:w-auto p-1.5">
+            <button name="edit_bid_cancel" value="Cancel" type="submit" class="lex 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">Cancel</button>
+           </div>
+           <div class="w-full md:w-auto p-1.5">
+            <button name="edit_bid_submit" value="Submit" 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">Submit Edit</button>
+           </div>
+           {% else %}
+           <section>
+            <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+             <div class="pb-6 border-coolGray-100">
+              <div class="flex flex-wrap items-center justify-between -m-2">
+               <div class="w-full pt-2">
+                <div class="container mt-5 mx-auto">
+                 <div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+                  <div class="px-6">
+                   <div class="flex flex-wrap justify-end">
                     {% if data.show_bidder_seq_diagram %}
                     <div class="w-full md:w-auto p-1.5">
-                      <button name="hide_bidder_seq_diagram" type="submit" value="Hide Bidder Sequence Diagram" 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">
-<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><rect x="2" y="2" width="8" height="4"></rect><rect x="2" y="18" width="8" height="4"></rect><line x1="6" y1="9" x2="6" y2="15"></line><polyline points="13 4 17 4 17 6"></polyline><polyline points="13 20 17 20 17 18"></polyline><polygon points="12 12 17 9 22 12 17 15 12 12" stroke="#556987"></polygon></g></svg> Hide Bidder Sequence Diagram </button>
+                     <button name="hide_bidder_seq_diagram" type="submit" value="Hide Bidder Sequence Diagram" 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 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">Hide Bidder Sequence Diagram</button>
                     </div>
                     {% else %}
                     <div class="w-full md:w-auto p-1.5">
-                      <button name="show_bidder_seq_diagram" type="submit" value="Show Bidder Sequence Diagram" 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">
-<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><rect x="2" y="2" width="8" height="4"></rect><rect x="2" y="18" width="8" height="4"></rect><line x1="6" y1="9" x2="6" y2="15"></line><polyline points="13 4 17 4 17 6"></polyline><polyline points="13 20 17 20 17 18"></polyline><polygon points="12 12 17 9 22 12 17 15 12 12" stroke="#556987"></polygon></g></svg> Show Bidder Sequence Diagram </button>
+                     <button name="show_bidder_seq_diagram" type="submit" value="Show Bidder Sequence Diagram" 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 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">Show Bidder Sequence Diagram</button>
                     </div>
                     {% endif %}
                     {% if data.show_offerer_seq_diagram %}
                     <div class="w-full md:w-auto p-1.5">
-                      <button name="hide_offerer_seq_diagram" type="submit" value="Hide Offerer Sequence Diagram" 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">
-<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><rect x="2" y="2" width="8" height="4"></rect><rect x="2" y="18" width="8" height="4"></rect><line x1="6" y1="9" x2="6" y2="15"></line><polyline points="13 4 17 4 17 6"></polyline><polyline points="13 20 17 20 17 18"></polyline><polygon points="12 12 17 9 22 12 17 15 12 12" stroke="#556987"></polygon></g></svg> Hide Offerer Sequence Diagram </button>
+                     <button name="hide_offerer_seq_diagram" type="submit" value="Hide Offerer Sequence Diagram" 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 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">Hide Offerer Sequence Diagram</button>
                     </div>
                     {% else %}
                     <div class="w-full md:w-auto p-1.5">
-                      <button name="show_offerer_seq_diagram" type="submit" value="Show Offerer Sequence Diagram" 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">
-<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><rect x="2" y="2" width="8" height="4"></rect><rect x="2" y="18" width="8" height="4"></rect><line x1="6" y1="9" x2="6" y2="15"></line><polyline points="13 4 17 4 17 6"></polyline><polyline points="13 20 17 20 17 18"></polyline><polygon points="12 12 17 9 22 12 17 15 12 12" stroke="#556987"></polygon></g></svg> Show Offerer Sequence Diagram </button>
-                    </div>
-                    {% endif %}
-                    {% if data.can_abandon == true %}
-                    <div class="w-full md:w-auto p-1.5">
-                      <button name="abandon_bid" type="submit" value="Abandon Bid" onclick="return confirmPopup();" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-red-500 hover:text-red-600 border border-red-400 hover:border-red-500 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ef5844" stroke-linejoin="round" ><line x1="16" y1="8" x2="8" y2="16" stroke="#ef5844"></line> <line x1="16" y1="16" x2="8" y2="8" stroke="#ef5844"></line> <circle cx="12" cy="12" r="11"></circle></g></svg> Abandon Bid </button>
+                     <button name="show_offerer_seq_diagram" type="submit" value="Show Offerer Sequence Diagram" 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 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">Show Offerer Sequence Diagram</button>
                     </div>
                     {% endif %}
                     {% if data.show_txns %}
                     <div class="w-full md:w-auto p-1.5">
-                      <button name="hide_txns" type="submit" value="Hide Info" 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">
-<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><circle cx="12" cy="12" r="11"></circle><line x1="12" y1="11" x2="12" y2="17" stroke="#556987"></line><circle cx="12" cy="7" r="1" stroke="none" fill="#556987"></circle></g></svg> Hide info </button>
+                     <button name="hide_txns" type="submit" value="Hide Info" 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">Hide More info</button>
                     </div>
                     {% else %}
                     <div class="w-full md:w-auto p-1.5">
-                      <button name="show_txns" type="submit" value="Show More Info" 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">
-<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><circle cx="12" cy="12" r="11"></circle><line x1="12" y1="11" x2="12" y2="17" stroke="#556987"></line><circle cx="12" cy="7" r="1" stroke="none" fill="#556987"></circle></g></svg> Show More Info </button>
+                     <button name="show_txns" type="submit" value="Show More Info" 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">Show More Info </button>
                     </div>
                     {% endif %}
                     <div class="w-full md:w-auto p-1.5">
-                      <button name="edit_bid" type="submit" value="Edit Bid" 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">
- <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><line x1="2" y1="23" x2="22" y2="23" stroke="#556987"></line> <line data-cap="butt" x1="13" y1="5" x2="17" y2="9"></line> <polygon points="8 18 3 19 4 14 16 2 20 6 8 18"></polygon></g></svg> Edit bid </button>
+                     <button name="edit_bid" type="submit" value="Edit Bid" 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">Edit Bid</button>
                     </div>
                     {% endif %}
-                    {% if data.was_received == 'True' %}
+                    {% if data.can_abandon == true and not edit_bid %}
                     <div class="w-full md:w-auto p-1.5">
-                      <button name="accept_bid" value="Accept Bid" type="submit" onclick='return confirmPopup("Accept");' 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">
-<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg> Accept Bid </button>
+                     <button name="abandon_bid" type="submit" value="Abandon Bid" onclick="return confirmPopup();" 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">Abandon Bid</button>
+                    </div>
+                    {% endif %}
+                     {% if data.was_received == 'True' and not edit_bid %}
+                    <div class="w-full md:w-auto p-1.5">
+                     <button name="accept_bid" value="Accept Bid" type="submit" onclick='return confirmPopup("Accept");' 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">Accept Bid</button>
+                    </div>
+                    {% endif %}
                     </div>
-                  {% endif %}
-                </div>
-                </div>
-              </div>
-              <input type="hidden" name="formid" value="{{ form_id }}"> </form>
-              {% if data.show_bidder_seq_diagram %}
-            <section class="bg-white p-6">
-              <div class="flex flex-wrap items-center">
-                <div class="w-full">
-                  <h4 class="font-semibold text-black text-2xl">Bidder Sequence Diagram</h4></div>
-              </div>
-            </section>
-            <section>
-              <div class="container mx-auto">
-                <div class="overflow-x-auto items-center justify-center relative border sm:rounded-lg p-10">
-                  <div class="flex items-center justify-center min-h-screen">
-                    <div class="flex items-center justify-between text-white"> <img class="h-full py-2 pr-4 ml-8" src="/static/sequence_diagrams/bidder.alt.xu.min.svg"> </div>
                   </div>
+                 </div>
                 </div>
-            </section>
-            {% endif %}
-            {% if data.show_offerer_seq_diagram %}
-            <section class="bg-white p-6">
-              <div class="flex flex-wrap items-center">
-                <div class="w-full">
-                  <h4 class="font-semibold text-black text-2xl">Offerer Sequence Diagram</h4></div>
+               </div>
               </div>
-            </section>
-            <section>
-              <div class="container mx-auto">
-                <div class="overflow-x-auto items-center justify-center relative border sm:rounded-lg p-10">
-                  <div class="flex items-center justify-center min-h-screen">
-                    <div class="flex items-center justify-between text-white"> <img class="h-full py-2 pr-4 ml-8" src="/static/sequence_diagrams/offerer.alt.xu.min.svg"> </div>
-                  </div>
-                </div>
-            </section>
-          {% endif %}
-        </div>
+             </div>
             </div>
+           </section>
+           <input type="hidden" name="formid" value="{{ form_id }}">
           </div>
+         </div>
         </div>
-  </section>
-  <script>
-    function confirmPopup() {
-      return confirm("Are you sure?");
-    }
-  </script>
-  </div>
+       </div>
+ </form>
+ <script>
+  function confirmPopup(name) {
+   return confirm(name + " Bid - Are you sure?");
+  }
+ </script>
+</div>
 {% include 'footer.html' %}
 </body>
 </html>

basicswap/templates/bids.html

@@ -1,231 +1,271 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
-    <div class="flex flex-wrap items-center -m-2">
-      <div class="w-full md:w-1/2 p-2">
-        <ul class="flex flex-wrap items-center gap-x-3 mb-2">
-          <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
-              <p>Home</p>
-            </a>
-          </li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="#">{{ page_type_available }} {{ page_type_received }} {{ page_type_sent }}</a></li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-        </ul>
+ <section class="p-5 mt-5">
+  <div class="flex flex-wrap items-center -m-2">
+   <div class="w-full md:w-1/2 p-2">
+    <ul class="flex flex-wrap items-center gap-x-3 mb-2">
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
+       <p>Home</p>
+      </a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="#">{{ page_type_available }} {{ page_type_received }} {{ page_type_sent }}</a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+    </ul>
+   </div>
+  </div>
+ </section>
+ <section class="py-4">
+  <div class="container px-4 mx-auto">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
+    <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+    <div class="relative z-20 flex flex-wrap items-center -m-3">
+     <div class="w-full md:w-1/2 p-3">
+      <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">{{ page_type_available }} {{ page_type_received }} {{ page_type_sent }}</h2>
+      <p class="font-normal text-coolGray-200 dark:text-white">{{ page_type_available_description }} {{ page_type_received_description }} {{ page_type_sent_description }}</p>
+     </div>
+     <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto"> {% if refresh %} <a id="refresh" href="/bid/{{ bid_id }}" class="flex flex-wrap justify-center px-5 py-4 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">
+       <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+        <g fill="#ffffff">
+         <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
+         <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
+        </g>
+       </svg>
+       <span>Refresh {{ refresh }} seconds</span>
+      </a>
+    {% endif %}
       </div>
     </div>
-  </section>
-  <section class="py-4">
-    <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
-        <div class="relative z-20 flex flex-wrap items-center -m-3">
-          <div class="w-full md:w-1/2 p-3">
-            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">{{ page_type_available }} {{ page_type_received }} {{ page_type_sent }}</h2>
-            <p class="font-semibold text-coolGray-200">{{ page_type_available_description }} {{ page_type_received_description }} {{ page_type_sent_description }}</p>
+   </div>
+  </div>
+ </section>
+ {% include 'inc_messages.html' %}
+ <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden">
+  <div class="pb-6 border-coolGray-100">
+   <div class="flex flex-wrap items-center justify-between -m-2">
+    <div class="w-full pt-2">
+     <form method="post">
+      <div class="flex justify-between items-center pb-4 dark:text-white">
+       <div class="rounded-b-md">
+        <div class="w-full md:w-0/12">
+         <div class="flex flex-wrap justify-end -m-1.5">
+          <div class="w-full md:w-auto p-1.5">
+           <div class="relative">
+            <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+             <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+            </svg>
+            <select name="sort_by" class="hover:border-blue-500 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">
+             <option value="created_at" {% if filters.sort_by=='created_at' %} selected{% endif %}>Time At</option>
+            </select>
+           </div>
+          </div>
+          <div class="w-full md:w-auto p-1.5">
+           <div class="relative">
+            <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+             <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+            </svg>
+            <select name="sort_dir" class="hover:border-blue-500 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">
+             <option value="asc" {% if filters.sort_dir=='asc' %} selected{% endif %}>Ascending</option>
+             <option value="desc" {% if filters.sort_dir=='desc' %} selected{% endif %}>Descending</option>
+            </select>
+           </div>
+          </div>
+          <div class="flex items-center">
+           <div class="w-full md:w-auto p-1.5">
+            <p class="text-sm font-heading bold">State:</p>
+           </div>
+          </div>
+          <div class="w-full md:w-auto p-1.5">
+           <div class="relative">
+            <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+             <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+            </svg>
+            <select name="state" class="hover:border-blue-500 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">
+             <option value="-1" {% if filters.bid_state_ind==-1 %} selected{% endif %}>Any</option>
+             {% for s in data.bid_states %}
+             <option value="{{ s[0] }}" {% if filters.bid_state_ind==s[0] %} selected{% endif %}>{{ s[1] }}</option>
+             {% endfor %}
+            </select>
+           </div>
+          </div>
+          <div class="flex items-center">
+           <div class="w-full md:w-auto p-1.5">
+            <p class="text-sm font-heading bold">Include Expired:</p>
+           </div>
+          </div>
+          <div class="w-full md:w-auto p-1.5">
+           <div class="relative">
+            <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+             <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+            </svg>
+            <select name="with_expired" class="hover:border-blue-500 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">
+             <option value="true" {% if filters.with_expired==true %} selected{% endif %}>Include</option>
+             <option value="false" {% if filters.with_expired==false %} selected{% endif %}>Exclude</option>
+            </select>
+           </div>
+          </div>
+          <div class="w-full md:w-auto p-1.5">
+           <div class="relative">
+            <button type="submit" name='clearfilters' value="Clear Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-white bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+             <svg class="mr-2 w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#fff" stroke-linejoin="round">
+               <line x1="20" y1="2" x2="12.329" y2="11.506"></line>
+               <path d="M11,11a2,2,0,0,1,2,2,3.659,3.659,0,0,1-.2.891A9.958,9.958,0,0,0,13.258,23H1C1,16.373,4.373,11,11,11Z"></path>
+               <line x1="18" y1="15" x2="23" y2="15" stroke="#fff"></line>
+               <line x1="17" y1="19" x2="23" y2="19" stroke="#fff"></line>
+               <line x1="19" y1="23" x2="23" y2="23" stroke="#fff"></line>
+               <path d="M8.059,11.415A3.9,3.9,0,0,0,12,16c.041,0,.079-.011.12-.012" data-cap="butt"></path>
+               <path d="M5,23a13.279,13.279,0,0,1,.208-3.4" data-cap="butt"></path>
+               <path d="M9.042,23c-.688-1.083-.313-3.4-.313-3.4" data-cap="butt"></path>
+              </g>
+             </svg>
+             <span>Clear</span>
+            </button>
+           </div>
           </div>
-          <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
-            {% if refresh %}
-            <a id="refresh" href="/bid/{{ bid_id }}" class="flex flex-wrap justify-center px-5 py-4 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">
-              <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                <g fill="#ffffff" >
-                  <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
-                  <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
-                </g>
-              </svg><span>Refresh {{ refresh }} seconds</span></a>
-            {% endif %}
+          <div class="w-full md:w-auto p-1.5">
+           <div class="relative">
+            <button type="submit" name='applyfilters' value="Apply Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-white bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+             <svg class="mr-2 w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#fff" stroke-linejoin="round">
+               <rect x="2" y="2" width="7" height="7"></rect>
+               <rect x="15" y="15" width="7" height="7"></rect>
+               <rect x="2" y="15" width="7" height="7"></rect>
+               <polyline points="15 6 17 8 22 3" stroke="#fff"></polyline>
+              </g>
+             </svg>
+             <span>Apply Filters</span>
+            </button>
+           </div>
           </div>
+         </div>
         </div>
+       </div>
       </div>
-    </div>
-  </section>
-  {% include 'inc_messages.html' %}
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white">
-      <div class="pb-6 border-coolGray-100">
-        <div class="flex flex-wrap items-center justify-between -m-2">
-          <div class="w-full pt-2">
-            <form method="post">
-              <div class="flex justify-between items-center pb-4 bg-white">
-                <div class="bg-white bg-opacity-60 rounded-b-md">
-                  <div class="w-full md:w-0/12">
-                    <div class="flex flex-wrap justify-end -m-1.5">
-                      <div class="flex items-center">
-                        <div class="w-full md:w-auto p-1.5">
-                          <p class="text-sm font-heading bold">Sort By:</p>
-                        </div>
-                      </div>
-                      <div class="w-full md:w-auto p-1.5">
-                        <div class="relative">
-                          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-                          </svg>
-                          <select name="sort_by" class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
-                            <option value="created_at" {% if filters.sort_by=='created_at' %} selected{% endif %}>Time At</option>
-                          </select>
-                        </div>
-                      </div>
-                      <div class="w-full md:w-auto p-1.5">
-                        <div class="relative">
-                          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-                          </svg>
-                          <select name="sort_dir" class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
-                            <option value="asc" {% if filters.sort_dir=='asc' %} selected{% endif %}>Ascending</option>
-                            <option value="desc" {% if filters.sort_dir=='desc' %} selected{% endif %}>Descending</option>
-                          </select>
-                        </div>
-                      </div>
-                      <div class="flex items-center">
-                        <div class="w-full md:w-auto p-1.5">
-                          <p class="text-sm font-heading bold">State:</p>
-                        </div>
-                      </div>
-                      <div class="w-full md:w-auto p-1.5">
-                        <div class="relative">
-                          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-                          </svg>
-                          <select name="state" class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
-                            <option value="-1" {% if filters.bid_state_ind==-1 %} selected{% endif %}>Any</option>
-                            {% for s in data.bid_states %}
-                            <option value="{{ s[0] }}" {% if filters.bid_state_ind==s[0] %} selected{% endif %}>{{ s[1] }}</option>
-                          {% endfor %}
-                        </select>
-                        </div>
-                      </div>
-                      <div class="flex items-center">
-                        <div class="w-full md:w-auto p-1.5">
-                          <p class="text-sm font-heading bold">Include Expired:</p>
-                        </div>
-                      </div>
-                      <div class="w-full md:w-auto p-1.5">
-                        <div class="relative">
-                          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-                          </svg>
-                          <select name="with_expired" class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
-                            <option value="true" {% if filters.with_expired==true %} selected{% endif %}>Include</option>
-                            <option value="false" {% if filters.with_expired==false %} selected{% endif %}>Exclude</option>
-                          </select>
-                        </div>
-                      </div>
-                      <div class="w-full md:w-auto p-1.5">
-                        <div class="relative">
-                          <button type="submit" name='clearfilters' value="Clear Filters" 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">
-                            <svg class="mr-2 w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round">
-                                <line x1="20" y1="2" x2="12.329" y2="11.506"></line>
-                                <path d="M11,11a2,2,0,0,1,2,2,3.659,3.659,0,0,1-.2.891A9.958,9.958,0,0,0,13.258,23H1C1,16.373,4.373,11,11,11Z"></path>
-                                <line x1="18" y1="15" x2="23" y2="15" stroke="#556987"></line>
-                                <line x1="17" y1="19" x2="23" y2="19" stroke="#556987"></line>
-                                <line x1="19" y1="23" x2="23" y2="23" stroke="#556987"></line>
-                                <path d="M8.059,11.415A3.9,3.9,0,0,0,12,16c.041,0,.079-.011.12-.012" data-cap="butt"></path>
-                                <path d="M5,23a13.279,13.279,0,0,1,.208-3.4" data-cap="butt"></path>
-                                <path d="M9.042,23c-.688-1.083-.313-3.4-.313-3.4" data-cap="butt"></path>
-                              </g>
-                            </svg> <span>Clear</span> </button>
-                        </div>
-                      </div>
-                      <div class="w-full md:w-auto p-1.5">
-                        <div class="relative">
-                          <button type="submit" name='applyfilters' value="Apply Filters" 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">
-                            <svg class="mr-2 w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round">
-                                <rect x="2" y="2" width="7" height="7"></rect>
-                                <rect x="15" y="15" width="7" height="7"></rect>
-                                <rect x="2" y="15" width="7" height="7"></rect>
-                                <polyline points="15 6 17 8 22 3" stroke="#556987"></polyline>
-                              </g>
-                            </svg> <span>Apply Filters</span> </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
+      <div class="container mt-5 mx-auto">
+       <div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+        <div class="px-6">
+         <div class="w-full mt-6 pb-6 overflow-x-auto">
+          <table class="w-full min-w-max">
+           <thead class="uppercase">
+            <tr class="text-left">
+             <th class="p-0">
+              <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Date/Time at</span>
+              </div>
+             </th>
+             <th class="p-0">
+              <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Bid ID</span>
+              </div>
+             </th>
+             <th class="p-0">
+              <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Offer ID</span>
               </div>
-              <div class="container px-0 mx-auto mt-5">
-                <div class="overflow-x-auto relative border sm:rounded-lg">
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                      <tr>
-                        <th scope="col" class="py-3 px-6"> Time At </th>
-                        <th scope="col" class="py-3 px-6"> Bid ID </th>
-                        <th scope="col" class="py-3 px-6"> Offer ID </th>
-                        <th scope="col" class="py-4 px-7"> Bid From </th>
-                        <th scope="col" class="py-3 px-7"> Bid Status </th>
-                        <th scope="col" class="py-3 px-6"> ITX Status </th>
-                        <th scope="col" class="py-3 px-6"> PTX Status </th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {% for b in bids %}
-                      <tr class="bg-white border-t hover:bg-gray-50">
-                        <th scope="row" class="flex items-center py-7 px-46 text-gray-900 whitespace-nowrap">
-                          <svg class="w-5 h-5 rounded-full ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                            <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                              <circle cx="12" cy="12" r="11"></circle>
-                              <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
-                            </g>
-                          </svg>
-                          <div class="pl-3">
-                            <div class="font-semibold text-xs">{{ b[0] }}</div>
-                          </div>
-                        </th>
-                        <td class="py-4 px-6 text-xs monospace"><a href=/bid/{{ b[1] }}>{{ b[1]|truncate(20, True) }}</a></td>
-                        <td class="py-4 px-6 text-xs monospace"><a href=/offer/{{ b[2] }}>{{ b[2]|truncate(20, True) }}</a></td>
-                        <td class="py-4 px-6 text-xs monospace"><a href=/identity/{{ b[6] }}>{{ b[6] }}</a></td>
-                        <td class="py-4 px-6">{{ b[3] }}</td>
-                        <td class="py-4 px-6">{{ b[4] }}</td>
-                        <td class="py-4 px-6">{{ b[5] }}</td>
-                      </tr>
-                    </tbody>
-                  {% endfor %}
-                </table>
-                  <input type="hidden" name="formid" value="{{ form_id }}">
-                  <input type="hidden" name="pageno" value="{{ filters.page_no }}"></div>
+             </th>
+             <th class="p-0">
+              <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Bid From</span>
               </div>
-              <div class="pt-10 bg-white bg-opacity-60 rounded-b-md">
-                <div class="w-full md:w-0/12">
-                  <div class="flex flex-wrap justify-end -m-1.5">
-                    <div class="w-full md:w-auto p-1.5">
-                      <button type="submit" name='pageback' value="Page Back" class="outline-none 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">
-                        <svg aria-hidden="true" class="mr-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                          <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
-                        </svg> <span>Page Back</span> </button>
-                    </div>
-                    <div class="flex items-center">
-                      <div class="w-full md:w-auto p-1.5">
-                        <p class="text-sm font-heading">Page: {{ filters.page_no }}</p>
-                      </div>
-                    </div>
-                    <div class="w-full md:w-auto p-1.5">
-                      <button type="submit" name='pageforwards' value="Page Forwards" class="outline-none 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"> <span>Page Forwards</span>
-                        <svg aria-hidden="true" class="ml-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                          <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
-                        </svg>
-                      </button>
-                    </div>
-                  </div>
-                </div>
+             </th>
+             <th class="p-0">
+              <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Bid Status</span>
               </div>
-            </form>
+             </th>
+             <th class="p-0">
+              <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">ITX Status</span>
+              </div>
+             </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">PTX Status</span>
+              </div>
+             </th>
+            </tr>
+           </thead>
+           <tbody>
+            {% for b in bids %}
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+             <th scope="row" class="flex items-center py-7 px-46 text-gray-900 whitespace-nowrap">
+              <svg class="w-5 h-5 rounded-full ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="11"></circle>
+                <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
+               </g>
+              </svg>
+              <div class="pl-3">
+               <div class="font-semibold text-xs dark:text-white">{{ b[0] }}</div>
+              </div>
+             </th>
+             <td class="py-3 px-6 text-xs monospace">
+              <a href=/bid/{{ b[1] }}>{{ b[1]|truncate(20, True) }}</a>
+             </td>
+             <td class="py-3 px-6 text-xs monospace">
+              <a href=/offer/{{ b[2] }}>{{ b[2]|truncate(20, True) }}</a>
+             </td>
+             <td class="py-3 px-6 text-xs monospace">
+              <a href=/identity/{{ b[6] }}>{{ b[6] }}</a>
+             </td>
+             <td class="py-3 px-6 text-xs">{{ b[3] }}</td>
+             <td class="py-3 px-6 text-xs">{{ b[4] }}</td>
+             <td class="py-3 px-6 text-xs">{{ b[5] }}</td>
+            </tr>
+           </tbody>
+           {% endfor %}
+          </table>
+          <input type="hidden" name="formid" value="{{ form_id }}">
+          <input type="hidden" name="pageno" value="{{ filters.page_no }}">
+         </div>
+        </div>
+        <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-200 dark:border-gray-400">
+           <div class="w-full md:w-auto p-1.5">
+            <button type="submit" name='pageback' value="Page Back" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 focus:ring-0 focus:outline-none">
+             <svg aria-hidden="true" class="mr-2 w-5 h-5" fill="#fff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
+             </svg>
+             <span>Page Back</span>
+            </button>
+           </div>
+           <div class="flex items-center">
+            <div class="w-full md:w-auto p-1.5">
+             <p class="text-sm font-heading dark:text-white">Page: {{ filters.page_no }}</p>
+            </div>
+           </div>
+           <div class="w-full md:w-auto p-1.5">
+            <button type="submit" name='pageforwards' value="Page Forwards" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 focus:ring-0 focus:outline-none">
+             <span>Page Forwards</span>
+             <svg aria-hidden="true" class="ml-2 w-5 h-5" fill="#fff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+             </svg>
+            </button>
+           </div>
           </div>
+         </div>
         </div>
-      </div>
+     </form>
     </div>
-  </section>
+   </div>
+  </div>
+ </div>
+ </section>
 </div>
 {% include 'footer.html' %}
 </body>

basicswap/templates/changepassword.html

@@ -1,152 +1,178 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
-    <div class="flex flex-wrap items-center -m-2">
-      <div class="w-full md:w-1/2 p-2">
-        <ul class="flex flex-wrap items-center gap-x-3 mb-2">
-          <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
-              <p>Home</p>
-            </a>
-          </li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-          <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/wallets">
-              <p>Wallets</p>
-            </a>
-          </li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-          <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/changepassword">Change Password</a>
-          </li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-        </ul>
-      </div>
+ <section class="p-5 mt-5">
+  <div class="flex flex-wrap items-center -m-2">
+   <div class="w-full md:w-1/2 p-2">
+    <ul class="flex flex-wrap items-center gap-x-3 mb-2">
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
+       <p>Home</p>
+      </a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/wallets">
+       <p>Home</p>
+      </a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/changepassword">Change Password</a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+    </ul>
+   </div>
+  </div>
+ </section>
+ <section class="py-4">
+  <div class="container px-4 mx-auto">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
+    <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+    <div class="relative z-20 flex flex-wrap items-center -m-3">
+     <div class="w-full md:w-1/2 p-3">
+      <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Change Password</h2>
+      <p class="font-normal text-coolGray-200 dark:text-white">Update your BasicSwap / Wallets password.</p>
+     </div>
     </div>
-  </section>
-  <section class="py-4">
-    <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
-        <div class="relative z-20 flex flex-wrap items-center -m-3">
-          <div class="w-full md:w-1/2 p-3">
-            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighte r">Change Password</h2>
-            <p class="font-semibold text-coolGray-200">Update your BasicSwap / Wallets password.</p>
-          </div>
+   </div>
+  </div>
+ </section>
+ {% include 'inc_messages.html' %}
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+   <div class="border-coolGray-100">
+    <div class="flex flex-wrap items-center justify-between -m-2">
+     <div class="w-full pt-2">
+      <div class="container mt-5 mx-auto">
+       <div class="pt-6 pb-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+        <div class="px-6">
+         <div class="w-full mt-6 pb-6 overflow-x-auto">
+          <table class="w-full min-w-max text-sm">
+           <thead class="uppercase">
+            <tr class="text-left">
+             <th class="p-0">
+              <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Password</span>
+              </div>
+             </th>
+             <th class="p-0">
+              <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold py-3 px-6"></span>
+              </div>
+             </th>
+            </tr>
+           </thead>
+           <form method="post" autocomplete="off">
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Old Password</td>
+             <td td class="py-3 px-6">
+              <div class="relative w-full">
+               <div class="absolute inset-y-0 right-0 flex items-center px-2">
+                <input class="hidden js-password-toggle" id="toggle-old" type="checkbox" />
+                <label class="px-2 py-1 text-sm text-gray-600 font-mono cursor-pointer js-password-label" for="toggle-old" id="input-old-label">
+                 <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                  <g fill="#8896ab">
+                   <path d="M23.444,10.239C21.905,8.062,17.708,3,12,3S2.1,8.062.555,10.24a3.058,3.058,0,0,0,0,3.52h0C2.1,15.938,6.292,21,12,21s9.905-5.062,11.445-7.24A3.058,3.058,0,0,0,23.444,10.239ZM12,17a5,5,0,1,1,5-5A5,5,0,0,1,12,17Z" fill="#8896ab"></path>
+                  </g>
+                 </svg>
+                </label>
+               </div>
+               <input class="hover:border-blue-500 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" type="password" name="oldpassword" id="input-old">
+              </div>
+             </td>
+            </tr>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">New Password</td>
+             <td td class="py-3 px-6">
+              <div class="relative w-full">
+               <div class="absolute inset-y-0 right-0 flex items-center px-2">
+                <input class="hidden js-password-toggle" id="toggle-new" type="checkbox" />
+                <label class="px-2 py-1 text-sm text-gray-600 font-mono cursor-pointer js-password-label" for="toggle-new" id="input-new-label">
+                 <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                  <g fill="#8896ab">
+                   <path d="M23.444,10.239C21.905,8.062,17.708,3,12,3S2.1,8.062.555,10.24a3.058,3.058,0,0,0,0,3.52h0C2.1,15.938,6.292,21,12,21s9.905-5.062,11.445-7.24A3.058,3.058,0,0,0,23.444,10.239ZM12,17a5,5,0,1,1,5-5A5,5,0,0,1,12,17Z" fill="#8896ab"></path>
+                  </g>
+                 </svg>
+                </label>
+               </div>
+               <input class="hover:border-blue-500 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" type="password" name="newpassword" id="input-new">
+              </div>
+             </td>
+            </tr>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Confirm Password</td>
+             <td td class="py-3 px-6">
+              <div class="relative w-full">
+               <div class="absolute inset-y-0 right-0 flex items-center px-2">
+                <input class="hidden js-password-toggle" id="toggle-conf" type="checkbox" />
+                <label class="px-2 py-1 text-sm text-gray-600 font-mono cursor-pointer js-password-label" for="toggle-conf" id="input-confirm-label">
+                 <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                  <g fill="#8896ab">
+                   <path d="M23.444,10.239C21.905,8.062,17.708,3,12,3S2.1,8.062.555,10.24a3.058,3.058,0,0,0,0,3.52h0C2.1,15.938,6.292,21,12,21s9.905-5.062,11.445-7.24A3.058,3.058,0,0,0,23.444,10.239ZM12,17a5,5,0,1,1,5-5A5,5,0,0,1,12,17Z" fill="#8896ab"></path>
+                  </g>
+                 </svg>
+                </label>
+               </div>
+               <input class="hover:border-blue-500 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" type="password" name="confirmpassword" id="input-confirm">
+              </div>
+             </td>
+            </tr>
+          </table>
+         </div>
         </div>
+       </div>
       </div>
+     </div>
     </div>
-  </section>
-  {% include 'inc_messages.html' %}
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
-      <div class="pb-6 border-coolGray-100">
-        <div class="flex flex-wrap items-center justify-between -m-2">
-          <div class="w-full pt-2">
-            <div class="container px-0 mx-auto mt-5">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                    <tr>
-                      <th scope="col" class="py-3 px-6 w-80">Password</th>
-                      <th scope="col" class="py-3"></th>
-                    </tr>
-                  </thead>
-                  <form method="post" autocomplete="off">
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 pl-5 pr-5 bold">Old Password</td>
-                      <td td class="py-4 pr-5 w-2/3">
-                      <div class="relative w-full">
-                        <div class="absolute inset-y-0 right-0 flex items-center px-2">
-                          <input class="hidden js-password-toggle" id="toggle-old" type="checkbox" />
-                          <label class="px-2 py-1 text-sm text-gray-600 font-mono cursor-pointer js-password-label" for="toggle-old" id="input-old-label">
-                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                              <g fill="#8896ab">
-                                <path d="M23.444,10.239C21.905,8.062,17.708,3,12,3S2.1,8.062.555,10.24a3.058,3.058,0,0,0,0,3.52h0C2.1,15.938,6.292,21,12,21s9.905-5.062,11.445-7.24A3.058,3.058,0,0,0,23.444,10.239ZM12,17a5,5,0,1,1,5-5A5,5,0,0,1,12,17Z" fill="#8896ab"></path>
-                              </g>
-                            </svg>
-                          </label>
-                        </div>
-                        <input class="w-full aappearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 w-full block p-2.5" type="password" name="oldpassword" id="input-old">
-                      </div>
-                      </td>
-                    </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 pl-5 pr-5 bold">New Password</td>
-                      <td td class="py-4 pr-5 w-2/3">
-                      <div class="relative w-full">
-                        <div class="absolute inset-y-0 right-0 flex items-center px-2">
-                          <input class="hidden js-password-toggle" id="toggle-new" type="checkbox" />
-                          <label class="px-2 py-1 text-sm text-gray-600 font-mono cursor-pointer js-password-label" for="toggle-new" id="input-new-label">
-                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                              <g fill="#8896ab">
-                                <path d="M23.444,10.239C21.905,8.062,17.708,3,12,3S2.1,8.062.555,10.24a3.058,3.058,0,0,0,0,3.52h0C2.1,15.938,6.292,21,12,21s9.905-5.062,11.445-7.24A3.058,3.058,0,0,0,23.444,10.239ZM12,17a5,5,0,1,1,5-5A5,5,0,0,1,12,17Z" fill="#8896ab"></path>
-                              </g>
-                            </svg>
-                          </label>
-                        </div>
-                        <input class="w-full aappearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 w-full block p-2.5" type="password" name="newpassword" id="input-new">
-                      </div>
-                      </td>
-                    </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 pl-5 pr-5 bold">Confirm Password</td>
-                      <td td class="py-4 pr-5 w-2/3">
-                      <div class="relative w-full">
-                        <div class="absolute inset-y-0 right-0 flex items-center px-2">
-                          <input class="hidden js-password-toggle" id="toggle-conf" type="checkbox" />
-                          <label class="px-2 py-1 text-sm text-gray-600 font-mono cursor-pointer js-password-label" for="toggle-conf" id="input-confirm-label">
-                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                              <g fill="#8896ab">
-                                <path d="M23.444,10.239C21.905,8.062,17.708,3,12,3S2.1,8.062.555,10.24a3.058,3.058,0,0,0,0,3.52h0C2.1,15.938,6.292,21,12,21s9.905-5.062,11.445-7.24A3.058,3.058,0,0,0,23.444,10.239ZM12,17a5,5,0,1,1,5-5A5,5,0,0,1,12,17Z" fill="#8896ab"></path>
-                              </g>
-                            </svg>
-                          </label>
-                        </div>
-                        <input class="w-full aappearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 w-full block p-2.5" type="password" name="confirmpassword" id="input-confirm">
-                      </div>
-                      </td>
-                    </tr>
-                </table>
-              </div>
-            </div>
-            <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
-              <div class="w-full md:w-0/12">
-                <div class="flex flex-wrap justify-end -m-1.5">
-                  <div class="w-full md:w-auto p-1.5 ml-2">
-                    <button type="submit" name="unlock" value="Unlock" 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">
-                      <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                        <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
-                          <polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline>
-                          <circle cx="12" cy="12" r="11"></circle>
-                        </g>
-                      </svg>Apply</button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <input type="hidden" name="formid" value="{{ form_id }}">
-            </form>
+   </div>
+  </div>
+ </section>
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+   <div class="pb-6 ">
+    <div class="flex flex-wrap items-center justify-between -m-2">
+     <div class="w-full pt-2">
+      <div class="container mx-auto">
+       <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+        <div class="px-6">
+         <div class="flex flex-wrap justify-end">
+          <div class="w-full md:w-auto p-1.5 ml-2">
+           <button type="submit" name="unlock" value="Unlock" 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">
+            <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+             <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
+              <polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline>
+              <circle cx="12" cy="12" r="11"></circle>
+             </g>
+            </svg>Apply </button>
           </div>
+         </div>
         </div>
+       </div>
       </div>
+     </div>
     </div>
-  </section>
-  {% include 'footer.html' %}
+   </div>
+  </div>
+ </section>
+ <input type="hidden" name="formid" value="{{ form_id }}">
+ </form>
+</div>
+</section>
+{% include 'footer.html' %}
 <script>
 function togglePassword(event) {
     let input_name = 'input-new';
@@ -172,7 +198,6 @@ const toggles = ["toggle-old", "toggle-new", "toggle-conf"]
 toggles.forEach(function (toggle_id, index) {
     document.getElementById(toggle_id).addEventListener('change', togglePassword, false);
 });
-
 </script>
 </body>
-</html>
+</html>

basicswap/templates/debug.html

@@ -1,85 +1,124 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
-    <div class="flex flex-wrap items-center -m-2">
-      <div class="w-full md:w-1/2 p-2">
-        <ul class="flex flex-wrap items-center gap-x-3 mb-2">
-          <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
-              <p>Home</p>
-            </a>
-          </li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/debug">Debug</a></li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-        </ul>
-      </div>
+ <section class="p-5 mt-5">
+  <div class="flex flex-wrap items-center -m-2">
+   <div class="w-full md:w-1/2 p-2">
+    <ul class="flex flex-wrap items-center gap-x-3 mb-2">
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
+       <p>Home</p>
+      </a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/debug">Debug</a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+    </ul>
+   </div>
+  </div>
+ </section>
+ <section class="py-4">
+  <div class="container px-4 mx-auto">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
+    <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+    <div class="relative z-20 flex flex-wrap items-center -m-3">
+     <div class="w-full md:w-1/2 p-3">
+      <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Debug</h2>
+      <p class="font-normal text-coolGray-200 dark:text-white">Debug options & Easter eggs.</p>
+     </div>
     </div>
-  </section>
-  <section class="py-4">
-    <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
-        <div class="relative z-20 flex flex-wrap items-center -m-3">
-          <div class="w-full md:w-1/2 p-3">
-            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighte r">Debug</h2>
-            <p class="font-semibold text-coolGray-200"></p>
-          </div>
+   </div>
+  </div>
+ </section>
+ {% include 'inc_messages.html' %}
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden min-height-50">
+   <div class="border-coolGray-100">
+    <div class="flex flex-wrap items-center justify-between -m-2">
+     <div class="w-full pt-2">
+      <div class="container mt-5 mx-auto">
+       <div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+        <div class="px-6">
+         <div class="w-full mt-6 pb-6 overflow-x-auto">
+          <table class="w-full min-w-max text-sm">
+           <thead class="uppercase">
+            <tr class="text-left">
+             <th class="p-0">
+              <div class="py-3 px-6 rounded-tl-xl  bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Options</span>
+              </div>
+             </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 py-3 px-6"></span>
+              </div>
+             </th>
+            </tr>
+           </thead>
+           <form method="post">
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Reinitialise XMR wallet</td>
+             <td td class="py-3 px-6 ">
+              <button name="reinit_xmr" type="submit" value="Yes" class="flex flex-wrap justify-center py-2 px-4 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">
+               <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+                <g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10">
+                 <polyline points="2.966 1.13 2.237 6.927 7.929 5.341"></polyline>
+                 <path d="M2.921,18.2a11.006,11.006,0,0,1-1.041-1.9" stroke="#ffffff"></path>
+                 <path d="M8.461,22.412a11.07,11.07,0,0,1-1.529-.654q-.2-.1-.392-.214" stroke="#ffffff"></path>
+                 <path d="M15.539,22.41a11.062,11.062,0,0,1-2.06.486" stroke="#ffffff"></path>
+                 <path d="M21.08,18.206a10.984,10.984,0,0,1-1.438,1.705" stroke="#ffffff"></path>
+                 <path d="M2.759,6.027A11,11,0,0,1,22.9,13.464"></path>
+                </g>
+               </svg>Yes - Start Process</button>
+             </td>
+             <input type="hidden" name="formid" value="{{ form_id }}">
+            </tr>
+           </form>
+          </table>
+         </div>
         </div>
+       </div>
       </div>
+     </div>
     </div>
-  </section>
-  {% include 'inc_messages.html' %}
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
-      <div class="pb-6 border-coolGray-100">
-        <div class="flex flex-wrap items-center justify-between -m-2">
-          <div class="w-full pt-2">
-            <div class="container px-0 mx-auto mt-5">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                    <tr>
-                      <th scope="col" class="py-3 px-6 w-80">Option</th>
-                      <th scope="col" class="py-3"></th>
-                    </tr>
-                  </thead>
-                  <form method="post">
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 pl-5 pr-5 bold">Reinitialise XMR wallet</td>
-                      <td td class="py-4">
-                    <button name="reinit_xmr" type="submit" value="Yes" class="flex flex-wrap justify-center py-2 px-4 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">
-                      <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><polyline points="2.966 1.13 2.237 6.927 7.929 5.341"></polyline><path d="M2.921,18.2a11.006,11.006,0,0,1-1.041-1.9" stroke="#ffffff"></path><path d="M8.461,22.412a11.07,11.07,0,0,1-1.529-.654q-.2-.1-.392-.214" stroke="#ffffff"></path><path d="M15.539,22.41a11.062,11.062,0,0,1-2.06.486" stroke="#ffffff"></path><path d="M21.08,18.206a10.984,10.984,0,0,1-1.438,1.705" stroke="#ffffff"></path><path d="M2.759,6.027A11,11,0,0,1,22.9,13.464"></path></g></svg> Yes </button>
-                      </td>
-                      <input type="hidden" name="formid" value="{{ form_id }}"> </tr>
-                  </form>
-                </table>
-              </div>
-            </div>
-          </div>
-          </div>
-        </div>
+   </div>
+  </div>
+ </section>
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+   <div class="pb-6 ">
+    <div class="flex flex-wrap items-center justify-between -m-2">
+     <div class="w-full pt-2">
+      <div class="container mx-auto">
+       <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+        <div class="px-6"></div>
+       </div>
       </div>
-  </section>
-  <!-- todo
+     </div>
+    </div>
+   </div>
+  </div>
+ </section>
+ <!-- todo
 {% if result %}
 <textarea class="monospace" rows="40" cols="160">
 {{ result }}
 </textarea>
 {% endif %}
 -->
-  </div>
+</div>
 {% include 'footer.html' %}
 </div>
 </body>
-</html>
+</html>

basicswap/templates/explorers.html

@@ -1,125 +1,174 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
-    <div class="flex flex-wrap items-center -m-2">
-      <div class="w-full md:w-1/2 p-2">
-        <ul class="flex flex-wrap items-center gap-x-3 mb-2">
-          <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
-              <p>Home</p>
-            </a>
-          </li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/explorers">Explorers</a></li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-        </ul>
+ <section class="p-5 mt-5">
+  <div class="flex flex-wrap items-center -m-2">
+   <div class="w-full md:w-1/2 p-2">
+    <ul class="flex flex-wrap items-center gap-x-3 mb-2">
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
+       <p>Home</p>
+      </a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/explores">Explorers</a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+    </ul>
+   </div>
+  </div>
+ </section>
+ <section class="py-4">
+  <div class="container px-4 mx-auto">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
+    <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+    <div class="relative z-20 flex flex-wrap items-center -m-3">
+     <div class="w-full md:w-1/2 p-3">
+      <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Explorers</h2>
+      <p class="font-normal text-coolGray-200 dark:text-white">Query blockchain explorers with quick commands.</p>
+     </div>
+    </div>
+   </div>
+  </div>
+ </section>
+ {% include 'inc_messages.html' %}
+ <section>
+  <form method="post">
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden min-height-50">
+    <div class="border-coolGray-100">
+     <div class="flex flex-wrap items-center justify-between -m-2">
+      <div class="w-full pt-2">
+       <div class="container mt-5 mx-auto">
+        <div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+         <div class="px-6">
+          <div class="w-full mt-6 pb-6 overflow-x-auto">
+           <table class="w-full min-w-max text-sm">
+            <thead class="uppercase">
+             <tr class="text-left">
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tl-xl  bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Select Explorer</span>
+               </div>
+              </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 py-3 px-6">Action</span>
+               </div>
+              </th>
+             </tr>
+            </thead>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6">
+              <div class="relative">
+               <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+               </svg>
+               <select class="hover:border-blue-500 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="explorer">
+                <!-- <option value="-1" {% if explorer==-1 %} selected{% endif %}>Select Explorer</option> -->
+                {% for e in explorers %}
+                <option value="{{ e[0] }}" {% if explorer==e[0] %} selected{% endif %}>{{ e[1] }}</option>
+                {% endfor %}
+               </select>
+              </div>
+             </td>
+             <td class="py-3 px-6">
+              <select class="hover:border-blue-500 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="action">
+               <option value="-1" {% if action==-1 %} selected{% endif %}>Select Action</option>
+               {% for a in actions %} <option value="{{ a[0] }}" {% if action==a[0] %} selected{% endif %}>{{ a[1] }}</option>
+               {% endfor %}
+              </select>
+             </td>
+            </tr>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Arguments:</td>
+             <td class="py-3 px-6">
+              <input class="hover:border-blue-500 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" type="text" name="args" placeholder="Arguments">
+             </td>
+            </tr>
+           </table>
+          </div>
+         </div>
+        </div>
+       </div>
       </div>
+     </div>
     </div>
-  </section>
-  <section class="py-4">
-    <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
-        <div class="relative z-20 flex flex-wrap items-center -m-3">
-          <div class="w-full md:w-1/2 p-3">
-            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Explorers</h2>
-            <p class="font-semibold text-coolGray-200">Query blockchain explorers with quick commands.</p>
+   </div>
+ </section>
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+   <div class="pb-6 ">
+    <div class="flex flex-wrap items-center justify-between -m-2">
+     <div class="w-full pt-2">
+      <div class="container mx-auto">
+       <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+        <div class="px-6">
+         <div class="flex flex-wrap justify-end">
+          <div class="w-full md:w-auto p-1.5 ml-2">
+           <button 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">
+            <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+             <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
+              <polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline>
+              <circle cx="12" cy="12" r="11"></circle>
+             </g>
+            </svg>Apply</button>
           </div>
+         </div>
         </div>
+       </div>
       </div>
+     </div>
     </div>
-  </section>
-  {% include 'inc_messages.html' %}
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
-      <div class="pb-6 border-coolGray-100">
-        <div class="flex flex-wrap items-center justify-between -m-2">
-          <div class="w-full pt-2">
-            <div class="container px-0 mx-auto mt-5">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <form method="post">
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                      <tr>
-                        <th scope="col" class="py-3 px-6">Select Explorer</th>
-                        <th scope="col">Action</th>
-                      </tr>
-                    </thead>
-                    <tr class="bg-white border-t">
-                      <td class="py-4 px-6 bold w-96">
-                        <div class="relative">
-                          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-                          </svg>
-                          <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="explorer">
-                            <!-- <option value="-1" {% if explorer==-1 %} selected{% endif %}>Select Explorer</option> -->{% for e in explorers %}
-                            <option value="{{ e[0] }}" {% if explorer==e[0] %} selected{% endif %}>{{ e[1] }}</option>
-                          {% endfor %}
-                        </select>
-                        </div>
-                      </td>
-                      <td class="py-4 pr-5">
-                        <select class="pr-15 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="action">
-                          <option value="-1" {% if action==-1 %} selected{% endif %}>Select Action</option> {% for a in actions %}
-                          <option value="{{ a[0] }}" {% if action==a[0] %} selected{% endif %}>{{ a[1] }}</option>
-                        {% endfor %}
-                      </select>
-                      </td>
-                    </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold"> Arguments: </td>
-                      <td class="py-4 pr-5">
-                        <input class="appearance-none bg-gray-50 border w-full border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" type="text" name="args" placeholder="Arguments"> </td>
-                    </tr>
-                  </table>
-              </div>
-            </div>
-            <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
-              <div class="w-full md:w-0/12">
-                <div class="flex flex-wrap justify-end -m-1.5">
-                       <div class="w-full md:w-auto p-1.5 ml-2">
-                          <button 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"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>  Apply</button>
-                        </div>
-                </div>
+   </div>
+ </section>
+ <input type="hidden" name="formid" value="{{ form_id }}">
+ {% if result %}
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+   <div class="border-coolGray-100">
+    <div class="flex flex-wrap items-center justify-between -m-2">
+     <div class="w-full pt-2">
+      <div class="container mt-5 mx-auto">
+       <div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+        <div class="px-6">
+         <div class="w-full mt-6 pb-6 overflow-x-auto">
+          <table class="w-full min-w-max text-sm">
+           <thead class="uppercase">
+            <tr class="text-left">
+             <th class="p-0">
+              <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Explorer output</span>
               </div>
-            </div>
-            <input type="hidden" name="formid" value="{{ form_id }}">
-            {% if result %}
-            <div class="container px-0 mx-auto mt-5">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                    <tr>
-                      <th scope="col" class="py-3 px-6">Explorer output:</th>
-                    </tr>
-                  </thead>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 pl-5 pr-5">
-                      <textarea class="whitespace-pre-line outline-none block p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 w-full monospace" rows="15"> {{ result }} </textarea>
-                    </td>
-                  </tr>
-                </table>
-              </div>
-            </div>
-          {% endif %}
-        </form>
-          </div>
+             </th>
+            </tr>
+           </thead>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+            <td class="py-3 px-6">
+             <textarea class="hover:border-blue-500 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" rows="20">{{ result }}</textarea>
+            </td>
+           </tr>
+          </table>
+         </div>
         </div>
+        {% endif %}
+        </form>
+       </div>
       </div>
+     </div>
     </div>
-  </section>
+ </section>
 </div>
 {% include 'footer.html' %}
-</div>
 </body>
-</html>
+</html>
+<!-- todo round corners -->

basicswap/templates/footer.html

@@ -1,32 +1,35 @@
-<section class="bg-white overflow-hidden">
+<section class="overflow-hidden">
   <div class="container px-4 mx-auto">
     <div class="flex flex-wrap lg:items-center pt-24 pb-12 -mx-4">
       <div class="w-full md:w-3/4 px-4">
-        <a class="block mb-8 max-w-max" href="#"> <img class="h-8" src="/static/images/logos/basicswap-logo-dark.svg" alt=""> </a>
+        <a class="block mb-8 max-w-max" href="/">
+          <img src="/static/images/logos/basicswap-logo.svg" class="h-8 imageshow dark-image">
+          <img src="/static/images/logos/basicswap-logo-dark.svg" class="h-8 imageshow light-image">
+        </a>
         <div class="mb-12 md:mb-0 flex flex-wrap -mx-3 md:-mx-6">
-          <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="https://academy.particl.io/en/latest/basicswap-dex/basicswap_explained.html" target="_blank">BasicSwap Explained</a></div>
-          <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="https://academy.particl.io/en/latest/basicswap-guides/basicswapguides_installation.html" target="_blank">Tutorials and Guides</a></div>
-          <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="https://academy.particl.io/en/latest/faq/get_support.html" target="_blank">Get Support</a></div>
+          <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 dark:text-gray-300 font-medium" href="https://academy.particl.io/en/latest/basicswap-dex/basicswap_explained.html" target="_blank">BasicSwap Explained</a></div>
+          <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 dark:text-gray-300 font-medium" href="https://academy.particl.io/en/latest/basicswap-guides/basicswapguides_installation.html" target="_blank">Tutorials and Guides</a></div>
+          <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 dark:text-gray-300 font-medium" href="https://academy.particl.io/en/latest/faq/get_support.html" target="_blank">Get Support</a></div>
         </div>
       </div>
       <div class="w-full md:w-1/4 px-4"> </div>
     </div>
   </div>
-  <div class="border-b border-coolGray-100"></div>
+  <div class="border-b border-gray-100 dark:border-gray-500 dark:bg-body dark:border-b-2"></div> 
   <div class="container px-4 mx-auto">
     <div class="flex flex-wrap items-center py-12 md:pb-32">
       <div class="w-full md:w-1/2 mb-6 md:mb-0">
         <div class="flex items-center">
           <div class="flex items-center">
-            <p class="mr-1 text-sm text-gray-90 font-medium ">© 2022~ </p>
-            <p class="text-sm text-coolGray-400 font-medium">{{ title }}</p> <span class="w-1 h-1 mx-1.5 bg-gray-500 rounded-full"></span>
-            <p class="text-sm text-coolGray-400 font-medium">GUI 0.1.2 </p> <span class="w-1 h-1 mx-1.5 bg-gray-500 rounded-full"></span>
-            <p class="mr-2 text-sm font-bold text-gray-90 ">Made with </p>
+            <p class="mr-1 text-sm text-gray-90 dark:text-white font-medium ">© 2023~</p>
+            <p class="text-sm text-coolGray-400 dark:text-white font-medium">{{ title }}</p> <span class="w-1 h-1 mx-1.5 bg-gray-500 rounded-full"></span>
+            <p class="text-sm text-coolGray-400 dark:text-white font-medium">GUI 2.0 </p> <span class="w-1 h-1 mx-1.5 bg-gray-500 rounded-full"></span>
+            <p class="mr-2 text-sm font-bold dark:text-white text-gray-90 ">Made with </p>
             <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#f80b0b" stroke-linejoin="round">
                 <path d="M21.243,3.757 c-2.343-2.343-6.142-2.343-8.485,0c-0.289,0.289-0.54,0.6-0.757,0.927c-0.217-0.327-0.469-0.639-0.757-0.927 c-2.343-2.343-6.142-2.343-8.485,0c-2.343,2.343-2.343,6.142,0,8.485L12,21.485l9.243-9.243C23.586,9.899,23.586,6.1,21.243,3.757z"></path>
               </g>
-            </svg> <span class="ml-2 text-sm font-bold text-gray-90 ">by TV and CRZ</span></div>
+            </svg> <span class="ml-2 text-sm font-bold dark:text-white text-gray-90 ">by TV and CRZ</span></div><!-- fix dots -->
         </div>
       </div>
       <div class="w-full md:w-1/2">
@@ -48,4 +51,65 @@
     </div>
   </div>
 </section>
-<script src="/static/js/libs/dd.min.js"></script>
+    <script>
+      window.onload = () => {
+        toggleImages();
+      };
+
+      document.getElementById('theme-toggle').addEventListener('click', () => {
+        toggleImages();
+      });
+
+      function toggleImages() {
+        const html = document.querySelector('html');
+        const darkImages = document.querySelectorAll('.dark-image');
+        const lightImages = document.querySelectorAll('.light-image');
+
+        if (html && html.classList.contains('dark')) {
+          toggleImageDisplay(darkImages, 'block');
+          toggleImageDisplay(lightImages, 'none');
+        } else {
+          toggleImageDisplay(darkImages, 'none');
+          toggleImageDisplay(lightImages, 'block');
+        }
+      }
+
+      function toggleImageDisplay(images, display) {
+        images.forEach(img => {
+          img.style.display = display;
+        });
+      }
+    </script>
+
+<script>
+      var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
+      var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
+
+      if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+          themeToggleLightIcon.classList.remove('hidden');
+      } else {
+          themeToggleDarkIcon.classList.remove('hidden');
+      }
+
+      function setTheme(theme) {
+        if (theme === 'light') {
+          document.documentElement.classList.remove('dark');
+          localStorage.setItem('color-theme', 'light');
+        } else {
+          document.documentElement.classList.add('dark');
+          localStorage.setItem('color-theme', 'dark');
+        }
+      }
+
+      document.getElementById('theme-toggle').addEventListener('click', () => {
+        if (localStorage.getItem('color-theme') === 'dark') {
+          setTheme('light');
+        } else {
+          setTheme('dark');
+        }
+        themeToggleDarkIcon.classList.toggle('hidden');
+        themeToggleLightIcon.classList.toggle('hidden');
+        toggleImages();
+      });
+
+</script>

basicswap/templates/header.html

@@ -5,17 +5,91 @@
   {% if refresh %}
   <meta http-equiv="refresh" content="{{ refresh }}">
   {% endif %}
+  <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/libs/dd.min.css" rel="stylesheet">
   <link type="text/css" media="all" href="/static/css/style.css" rel="stylesheet">
   <script src="/static/js/main.js"></script>
   <script src="/static/js/libs/flowbite.js"></script>
+<script>
+  const isDarkMode =
+    localStorage.getItem('color-theme') === 'dark' ||
+    (!localStorage.getItem('color-theme') &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches);
+
+  if (!localStorage.getItem('color-theme')) {
+    localStorage.setItem('color-theme', isDarkMode ? 'dark' : 'light');
+  }
+
+  document.documentElement.classList.toggle('dark', isDarkMode);
+</script>
+
+  <script>
+  window.Components = {
+  customSelect(options) {
+    return {
+      init() {
+        this.$refs.listbox.focus()
+        this.optionCount = this.$refs.listbox.children.length
+        this.$watch('selected', value => {
+          if (!this.open) return
+
+          if (this.selected === null) {
+            this.activeDescendant = ''
+            return
+          }
+
+          this.activeDescendant = this.$refs.listbox.children[this.selected - 1].id
+        })
+      },
+      activeDescendant: null,
+      optionCount: null,
+      open: false,
+      selected: null,
+      value: 1,
+      choose(option) {
+        this.value = option
+        this.open = false
+      },
+      onButtonClick() {
+        if (this.open) return
+        this.selected = this.value
+        this.open = true
+        this.$nextTick(() => {
+          this.$refs.listbox.focus()
+          this.$refs.listbox.children[this.selected - 1].scrollIntoView({ block: 'nearest' })
+        })
+      },
+      onOptionSelect() {
+        if (this.selected !== null) {
+          this.value = this.selected
+        }
+        this.open = false
+        this.$refs.button.focus()
+      },
+      onEscape() {
+        this.open = false
+        this.$refs.button.focus()
+      },
+      onArrowUp() {
+        this.selected = this.selected - 1 < 1 ? this.optionCount : this.selected - 1
+        this.$refs.listbox.children[this.selected - 1].scrollIntoView({ block: 'nearest' })
+      },
+      onArrowDown() {
+        this.selected = this.selected + 1 > this.optionCount ? 1 : this.selected + 1
+        this.$refs.listbox.children[this.selected - 1].scrollIntoView({ block: 'nearest' })
+      },
+      ...options,
+    }
+  },
+}
+
+</script>
   <link rel=icon sizes="32x32" type="image/png" href="/static/images/favicon/favicon-32.png">
   <title>{{ title }}</title>
 </head>
-<body>
+<body class="dark:bg-gray-700">
   <section>
-    <nav class="relative bg-gray-800">
+    <nav class="relative bg-gray-700">
       <div class="p-6 container flex flex-wrap items-center justify-between items-center mx-auto">
         <a class="flex-shrink-0 mr-12 text-2xl text-white font-semibold" href="/"> <img class="h-10" src="/static/images/logos/basicswap-logo.svg" alt="" width="auto"></a>
         <ul class="hidden xl:flex">
@@ -56,7 +130,7 @@
           </li>
         </ul>
         <ul class="mr-10 hidden xl:flex lg:justify-end lg:items-center lg:space-x-6 ml-auto">
-          <div id="dropdownNavbarLink" data-dropdown-toggle="dropdownNavbar" class="flex justify-between items-center py-2 pr-4 pl-3 w-full text-gray-50 text-sm  md:border-0 md:p-0 md:w-auto text-gray-50">
+          <div id="dropdownNavbarLink" data-dropdown-toggle="dropdownNavbar" class="flex justify-between items-center py-2 pr-4 pl-3 w-full text-gray-50 text-sm  md:border-0 md:p-0 md:w-auto text-gray-50 hover:text-gray-100">
             <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
                 <path d="M14,19l2.95,2.95A3.5,3.5,0,0,0,21.9,22l.051-.051h0A3.5,3.5,0,0,0,22,17l-.051-.051L20,15" stroke="#6b7280"></path>
@@ -70,10 +144,10 @@
           </div>
         </ul>
         <!-- dropdown settings & tools -->
-        <div id="dropdownNavbar" class="hidden z-50 w-50 font-normal bg-white shadow divide-y divide-gray-100">
+        <div id="dropdownNavbar" class="hidden z-50 w-50 font-normal bg-white shadow divide-y divide-gray-100 dark:bg-gray-500 dark:divide-gray-400 dark:text-white">
           <ul class="py-0 text-sm text-gray-700" aria-labelledby="dropdownLargeButton">
             <li>
-              <a href="/settings" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Settings</span>
+              <a href="/settings" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Settings</span>
                 <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24">
                   <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
                     <circle cx="12" cy="12" r="3" stroke="#6b7280"></circle>
@@ -83,7 +157,7 @@
             </li>
             {% if debug_mode == true %}
             <li>
-              <a href="/rpc" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">RPC</span>
+              <a href="/rpc" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">RPC</span>
                 <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                   <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
                     <rect x="1" y="2" width="22" height="20"></rect>
@@ -97,7 +171,7 @@
             {% endif %}
             {% if debug_mode == true %}
             <li>
-              <a href="/debug" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Debug</span>
+              <a href="/debug" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Debug</span>
                 <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
                   <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
                     <path data-cap="butt" d="M5.29,10H4A3,3,0,0,1,1,7V6" stroke="#6b7280"></path>
@@ -114,7 +188,7 @@
             {% endif %}
             {% if debug_mode == true %}
             <li>
-              <a href="/explorers" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Explorers</span>
+              <a href="/explorers" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Explorers</span>
                 <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                   <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
                     <line x1="22" y1="22" x2="15.656" y2="15.656" stroke="#6b7280"></line>
@@ -125,7 +199,7 @@
             {% endif %}
             {% if use_tor_proxy == true %}
             <li>
-              <a href="/tor" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Debug</span>
+              <a href="/tor" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Debug</span>
                 <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
                           <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
                             <path d="M9,18.8A6.455,6.455,0,0,1,7,14,6.455,6.455,0,0,1,9,9.2" stroke="#6b7280"></path>
@@ -137,7 +211,7 @@
             </li>
             {% endif %}
             <li>
-              <a href="/smsgaddresses" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Settings</span>
+              <a href="/smsgaddresses" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Settings</span>
                 <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                   <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
                     <path data-cap="butt" d="M11.992,11.737,14.2,13.4A2,2,0,0,1,15,15v1H7V15a2,2,0,0,1,.8-1.6l2.208-1.663" stroke="#6b7280"></path>
@@ -148,7 +222,7 @@
                 </svg> SMSG Addresses</a>
             </li>
             <li>
-              <a href="/watched" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Automation Strategies</span>
+              <a href="/watched" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Automation Strategies</span>
                 <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                   <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
                     <path d="M1.373,13.183a2.064,2.064,0,0,1,0-2.366C2.946,8.59,6.819,4,12,4s9.054,4.59,10.627,6.817a2.064,2.064,0,0,1,0,2.366C21.054,15.41,17.181,20,12,20S2.946,15.41,1.373,13.183Z"></path>
@@ -158,7 +232,7 @@
             </li>
             {% if debug_mode == true %}
             <li>
-              <a href="/automation" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Automation Strategies</span>
+              <a href="/automation" class="flex items-center block py-4 px-4 hover:bg-gray-10 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Automation Strategies</span>
                 <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                   <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
                     <line data-cap="butt" x1="5" y1="1" x2="5" y2="6" stroke="#6b7280"></line>
@@ -177,7 +251,7 @@
           {% endif %}
         </ul>
           <div class="text-sm text-gray-700">
-            <a href="/shutdown/{{ shutdown_token }}" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Shutdown</span>
+            <a href="/shutdown/{{ shutdown_token }}" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Shutdown</span>
               <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                 <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
                   <line data-cap="butt" x1="11" y1="10" x2="22" y2="10" stroke="#6b7280"></line>
@@ -192,62 +266,62 @@
         <!-- notifications -->
         <button id="dropdownNotificationButton" data-dropdown-toggle="dropdownNotification" class="inline-flex items-center text-sm font-medium text-center text-gray-500 focus:outline-none " type="button">
           <svg class="h-5 w-5" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M14 11.18V8C13.9986 6.58312 13.4958 5.21247 12.5806 4.13077C11.6655 3.04908 10.3971 2.32615 9 2.09V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0C7.73478 0 7.48043 0.105357 7.29289 0.292893C7.10536 0.48043 7 0.734784 7 1V2.09C5.60294 2.32615 4.33452 3.04908 3.41939 4.13077C2.50425 5.21247 2.00144 6.58312 2 8V11.18C1.41645 11.3863 0.910998 11.7681 0.552938 12.2729C0.194879 12.7778 0.00173951 13.3811 0 14V16C0 16.2652 0.105357 16.5196 0.292893 16.7071C0.48043 16.8946 0.734784 17 1 17H4.14C4.37028 17.8474 4.873 18.5954 5.5706 19.1287C6.26819 19.6621 7.1219 19.951 8 19.951C8.8781 19.951 9.73181 19.6621 10.4294 19.1287C11.127 18.5954 11.6297 17.8474 11.86 17H15C15.2652 17 15.5196 16.8946 15.7071 16.7071C15.8946 16.5196 16 16.2652 16 16V14C15.9983 13.3811 15.8051 12.7778 15.4471 12.2729C15.089 11.7681 14.5835 11.3863 14 11.18ZM4 8C4 6.93913 4.42143 5.92172 5.17157 5.17157C5.92172 4.42143 6.93913 4 8 4C9.06087 4 10.0783 4.42143 10.8284 5.17157C11.5786 5.92172 12 6.93913 12 8V11H4V8ZM8 18C7.65097 17.9979 7.30857 17.9045 7.00683 17.7291C6.70509 17.5536 6.45451 17.3023 6.28 17H9.72C9.54549 17.3023 9.29491 17.5536 8.99317 17.7291C8.69143 17.9045 8.34903 17.9979 8 18ZM14 15H2V14C2 13.7348 2.10536 13.4804 2.29289 13.2929C2.48043 13.1054 2.73478 13 3 13H13C13.2652 13 13.5196 13.1054 13.7071 13.2929C13.8946 13.4804 14 13.7348 14 14V15Z" fill="currentColor"></path>
+            <path d="M14 11.18V8C13.9986 6.58312 13.4958 5.21247 12.5806 4.13077C11.6655 3.04908 10.3971 2.32615 9 2.09V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0C7.73478 0 7.48043 0.105357 7.29289 0.292893C7.10536 0.48043 7 0.734784 7 1V2.09C5.60294 2.32615 4.33452 3.04908 3.41939 4.13077C2.50425 5.21247 2.00144 6.58312 2 8V11.18C1.41645 11.3863 0.910998 11.7681 0.552938 12.2729C0.194879 12.7778 0.00173951 13.3811 0 14V16C0 16.2652 0.105357 16.5196 0.292893 16.7071C0.48043 16.8946 0.734784 17 1 17H4.14C4.37028 17.8474 4.873 18.5954 5.5706 19.1287C6.26819 19.6621 7.1219 19.951 8 19.951C8.8781 19.951 9.73181 19.6621 10.4294 19.1287C11.127 18.5954 11.6297 17.8474 11.86 17H15C15.2652 17 15.5196 16.8946 15.7071 16.7071C15.8946 16.5196 16 16.2652 16 16V14C15.9983 13.3811 15.8051 12.7778 15.4471 12.2729C15.089 11.7681 14.5835 11.3863 14 11.18ZM4 8C4 6.93913 4.42143 5.92172 5.17157 5.17157C5.92172 4.42143 6.93913 4 8 4C9.06087 4 10.0783 4.42143 10.8284 5.17157C11.5786 5.92172 12 6.93913 12 8V11H4V8ZM8 18C7.65097 17.9979 7.30857 17.9045 7.00683 17.7291C6.70509 17.5536 6.45451 17.3023 6.28 17H9.72C9.54549 17.3023 9.29491 17.5536 8.99317 17.7291C8.69143 17.9045 8.34903 17.9979 8 18ZM14 15H2V14C2 13.7348 2.10536 13.4804 2.29289 13.2929C2.48043 13.1054 2.73478 13 3 13H13C13.2652 13 13.5196 13.1054 13.7071 13.2929C13.8946 13.4804 14 13.7348 14 14V15Z" fill="#6b7280"></path>
           </svg>
           <div class="flex relative">
             <!-- Todo -->
-            <div class="inline-flex relative -top-2 right-2 w-3 h-3 bg-green-500 rounded-full border-2 border-gray-800"></div>
+            <!-- <div class="inline-flex relative -top-2 right-2 w-3 h-3 bg-green-500 rounded-full border-2 border-gray-800"></div> -->
             <!-- Red <div class="inline-flex relative -top-2 right-3 w-3 h-3 bg-red-500 rounded-full border-2 border-white"></div>  --></div>
         </button>
         <!-- Dropdown menu -->
-        <div id="dropdownNotification" class="hidden z-50 w-full max-w-sm bg-white shadow rounded divide-y divide-gray-100 drop-shadow" aria-labelledby="dropdownNotificationButton">
-          <div class="block py-2 px-4 font-medium text-center text-gray-700 bg-gray-50 drop-shadow"> Notifications </div>
-          <div class="divide-y divide-gray-100">
+        <div id="dropdownNotification" class="hidden z-50 w-full max-w-sm bg-white shadow rounded divide-y divide-gray-100 drop-shadow dark:bg-gray-500 dark:divide-gray-400 dark:text-white" aria-labelledby="dropdownNotificationButton">
+          <div class="block py-2 px-4 font-semibold text-center text-gray-700 bg-gray-50 drop-shadow dark:text-white dark:bg-gray-500">Notifications History</div>
+          <div class="divide-y divide-gray-100 dark:divide-gray-400">
             {% for entry in notifications %} {% if entry[1] == 1 %}
-            <div class="flex py-3 px-4 hover:bg-gray-100">
+            <div class="flex py-3 px-4 hover:bg-gray-100 dark:hover:bg-gray-700">
               <div class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 bg-blue-500 rounded-lg"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round"><circle cx="5" cy="5" r="4"></circle> <circle cx="19" cy="19" r="4"></circle> <polyline data-cap="butt" points="13,5 21,5 21,11 " stroke="#ffffff"></polyline> <polyline data-cap="butt" points="11,19 3,19 3,13 " stroke="#ffffff"></polyline> <polyline points=" 16,2 13,5 16,8 " stroke="#ffffff"></polyline> <polyline points=" 8,16 11,19 8,22 " stroke="#ffffff"></polyline></g></svg></div>
               <div class="pl-3 w-full">
-                <div class="text-gray-500 text-sm mb-1.5"> <span class="font-semibold text-gray-900">
-                    NEW NETWORK <a class="underline" href="/offer/{{ entry[2].offer_id }}">OFFER</a></span>
-                  <br/> <span class="mt-2 inline-flex text-xs font-small monospace text-center">
+                <div class="text-gray-500 text-sm mb-1.5"> <span class="font-semibold text-gray-900 dark:text-white">
+                    NEW NETWORK <a class="underline text-blue-500" href="/offer/{{ entry[2].offer_id }}">OFFER</a></span>
+                  <br/> <span class="mt-2 inline-flex text-xs font-small monospace text-center dark:text-gray-300">
                   <a href="/offer/{{ entry[2].offer_id }}">{{ entry[2].offer_id|truncate(42, True) }}</a>
                   </span></div>
-                <div class="text-xs text-gray-600 bold">{{ entry[0] }}</div>
+                <div class="text-xs text-gray-600 bold dark:text-gray-300">{{ entry[0] }}</div>
               </div>
             </div>
             {% elif entry[1] == 2 %}
-            <div class="flex py-3 px-4 hover:bg-gray-100">
+            <div class="flex py-3 px-4 hover:bg-gray-100 dark:hover:bg-gray-700">
               <div class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 bg-blue-500 rounded-lg"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round"><rect x="9.843" y="5.379" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -0.7635 13.1569)" width="11.314" height="4.243"></rect> <polyline points="3,23 3,19 15,19 15,23 "></polyline> <line x1="4" y1="15" x2="1" y2="15" stroke="#ffffff"></line> <line x1="5.757" y1="10.757" x2="3.636" y2="8.636" stroke="#ffffff"></line> <line x1="1" y1="23" x2="17" y2="23"></line> <line x1="17" y1="9" x2="23" y2="15"></line></g></svg></div>
               <div class="pl-3 w-full">
-                <div class="text-gray-500 text-sm mb-1.5"> <span class="font-semibold text-gray-900">
-                    <a class="underline" href="/bid/{{ entry[2].bid_id }}">NEW BID</a> ON <a class="underline" href="/offer/{{ entry[2].offer_id }}">OFFER</a></span>
-                  <br/> <span class="mt-2 inline-flex text-xs font-small monospace text-center">
+                <div class="text-gray-500 dark:text-white text-sm mb-1.5"> <span class="font-semibold text-gray-900 dark:text-white">
+                    <a class="underline text-blue-500" href="/bid/{{ entry[2].bid_id }}">NEW BID</a> ON <a class="underline text-blue-500" href="/offer/{{ entry[2].offer_id }}">OFFER</a></span>
+                  <br/> <span class="mt-2 inline-flex text-xs font-small monospace text-center dark:text-gray-300">
                       <a href="/offer/{{ entry[2].offer_id }}">{{ entry[2].offer_id|truncate(42, True) }}</a>
                     </span></div>
-                <div class="text-xs text-gray-600 bold">{{ entry[0] }}</div>
+                <div class="text-xs text-gray-600 bold dark:text-gray-300">{{ entry[0] }}</div>
               </div>
             </div>
             {% elif entry[1] == 3 %}
-            <div class="flex py-3 px-4 hover:bg-gray-100">
+            <div class="flex py-3 px-4 hover:bg-gray-100 dark:hover:bg-gray-700">
               <div class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 bg-violet-500 rounded-lg"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"><g fill="#ffffff"><path d="M8.5,20a1.5,1.5,0,0,1-1.061-.439L.379,12.5,2.5,10.379l6,6,13-13L23.621,5.5,9.561,19.561A1.5,1.5,0,0,1,8.5,20Z" fill="#ffffff"></path></g></svg></div>
               <div class="pl-3 w-full">
-                <div class="text-gray-500 text-sm mb-1.5"> <span class="font-semibold text-gray-900">
-                    <a class="underline" href="/bid/{{ entry[2].bid_id }}">BID</a> ACCEPTED</span>
-                  <br/> <span class="mt-2 inline-flex text-xs font-small monospace text-center">
+                <div class="text-gray-500 text-sm mb-1.5 dark:text-white"> <span class="font-semibold text-gray-900 dark:text-white">
+                    <a class="underline text-blue-500" href="/bid/{{ entry[2].bid_id }}">BID</a> ACCEPTED</span>
+                  <br/> <span class="mt-2 inline-flex text-xs font-small monospace text-center dark:text-gray-300">
                   <a href="/bid/{{ entry[2].bid_id }}">{{ entry[2].bid_id|truncate(42, True) }}</a>
                   </span></div>
-                <div class="text-xs text-gray-600 bold">{{ entry[0] }}</div>
+                <div class="text-xs text-gray-600 bold dark:text-gray-300">{{ entry[0] }}</div>
               </div>
             </div>
             {% else %}
-            <div class="flex py-3 px-4 hover:bg-gray-100">
+            <div class="flex py-3 px-4 hover:bg-gray-100 dark:hover:bg-gray-700">
               <div class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 bg-blue-500 rounded-lg"><svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"><g fill="#ffffff"><path d="M8.5,20a1.5,1.5,0,0,1-1.061-.439L.379,12.5,2.5,10.379l6,6,13-13L23.621,5.5,9.561,19.561A1.5,1.5,0,0,1,8.5,20Z" fill="#ffffff"></path></g></svg></div>
               <div class="pl-3 w-full">
-                <div class="text-gray-500 text-sm mb-1.5"> <span class="font-semibold text-gray-900">
+                <div class="text-gray-500 text-sm mb-1.5 dark:text-white"> <span class="font-semibold text-gray-900 dark:text-white">
                     UNKNOWN EVENT</span>
-                  <br/> <span class="mt-2 inline-flex text-xs font-small monospace text-center">
+                  <br/> <span class="mt-2 inline-flex text-xs font-small monospace text-center dark:text-gray-300">
                   {{ entry[1] }}
-                  <div class="text-xs text-gray-600 bold">{{ entry[0] }}</div>
+                  <div class="text-xs text-gray-600 bold dark:text-gray-300 dark:text-gray-300">{{ entry[0] }}</div>
                 </div>
               </div>
                {% endif %}
@@ -267,7 +341,7 @@
 <!-- notifications -->
 <!-- todo - fix line -->
 <div class="flex mr-2 items-center text-gray-50 hover:text-gray-100 text-sm ml-5">
-  <div class="flex-shrink-0 w-px h-10 bg-gray-600 ml-4 mr-5"></div>
+  <div class="flex-shrink-0 w-px h-10 bg-gray-400 dark:bg-gray-400 ml-4 mr-5"></div>
               {% if debug_mode == true %}
               <!-- dev mode icons on/off -->
               <ul class="xl:flex">
@@ -335,6 +409,13 @@
                 </ul>
                 <!-- tor -->
               {% endif %}
+              <button data-tooltip-target="tooltip-darkmode" id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 focus:outline-none rounded-lg text-sm ml-5">
+               <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="#F59E0B" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
+               <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="#F59E0B" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
+               <span data-tooltip-target="tooltip-TOR"></span>
+                  <div class="tooltip-arrow" data-popper-arrow></div>
+                  <div id="tooltip-darkmode" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-blue-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">Dark mode</div>
+              </button>
             </div>
               <div class="hidden xl:block"></div>
               <!-- mobile menu -->
@@ -348,11 +429,11 @@
               </div>
               <!-- mobile menu -->
             </div>
-            <div class="hidden xl:block py-5 px-6 bg-gray-50 border-b">
+            <div class="hidden xl:block py-5 px-6 bg-coolGray-100 border-gray-100 dark:border-gray-500 dark:bg-body border-b dark:border-b-2">
               <div class="flex items-center container flex flex-wrap items-center justify-between items-center mx-auto">
                 <ul class="flex items-center">
                   <li>
-                    <a class="flex mr-10 items-center text-sm text-gray-500 hover:text-gray-600" href="/active">
+                    <a class="flex mr-5 items-center text-sm text-gray-400 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-100" href="/active">
                       <svg class="text-gray-100 w-5 h-5 ml-7 mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                         <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
                           <circle data-cap="butt" cx="12" cy="12" r="3" stroke="#6b7280"></circle>
@@ -363,9 +444,9 @@
                         </g>
                       </svg><span>Swaps in Progress </span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_swapping }}</span></a>
                   </li>
-                  <div class="flex-shrink-0 w-px h-10 bg-gray-300 mr-10"></div>
+                  <div class="flex-shrink-0 w-px h-10 bg-gray-200 dark:bg-gray-400 mr-10"></div>
                   <li>
-                    <a class="flex mr-5 items-center text-sm text-gray-500 hover:text-gray-600" href="/sentoffers">
+                    <a class="flex mr-5 items-center text-sm text-gray-400 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-100" href="/sentoffers">
                       <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24">
                         <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
                           <circle cx="5" cy="5" r="4"></circle>
@@ -377,9 +458,9 @@
                         </g>
                       </svg><span>Your Offers</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_sent_offers }}</span></a>
                   </li>
-                  <div class="flex-shrink-0 w-px h-10 bg-gray-300 ml-4 mr-10"></div>
+                  <div class="flex-shrink-0 w-px h-10 bg-gray-200 dark:bg-gray-400 mr-10"></div>
                   <li>
-                    <a class="flex mr-10 items-center text-sm text-gray-500 hover:text-gray-600" href="/availablebids">
+                    <a class="flex mr-10 items-center text-sm text-gray-400 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-100" href="/availablebids">
                       <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                         <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
                           <circle cx="12" cy="12" r="11"></circle>
@@ -388,7 +469,7 @@
                       </svg><span>Available Bids</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_available_bids }}</span></a>
                   </li>
                   <li>
-                    <a class="flex mr-10 items-center text-sm text-gray-500 hover:text-gray-600" href="/receivedbids">
+                    <a class="flex mr-10 items-center text-sm text-gray-400 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-100" href="/receivedbids">
                       <svg class="text-gray-100 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                         <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
                           <path d="M2,16v4a2,2,0,0,0,2,2H20a2,2,0,0,0,2-2V16"> </path>
@@ -398,7 +479,7 @@
                       </svg><span>Bids Received</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_recv_bids }}</span></a>
                   </li>
                   <li>
-                    <a class="flex mr-10 items-center text-sm text-gray-500 hover:text-gray-600" href="/sentbids">
+                    <a class="flex mr-10 items-center text-sm text-gray-400 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-100" href="/sentbids">
                       <svg class="text-gray-100 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                         <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
                           <path d="M2,16v4a2,2,0,0,0,2,2H20a2,2,0,0,0,2-2V16"></path>
@@ -411,15 +492,15 @@
               </div>
             </div>
     </nav>
-    <!-- mobile sidebar -->
+    <!-- mobile sidebar TODO/WIP  -->
     <div class="hidden navbar-menu fixed top-0 left-0 bottom-0 w-3/4 lg:w-80 sm:max-w-xs z-50">
-      <div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-10"></div>
-      <nav class="relative flex flex-col pt-6 pb-8 h-full w-full bg-gray-800 overflow-y-auto">
+      <div class="navbar-backdrop fixed inset-0 bg-gray-700 dark:bg-gray-600 opacity-10"></div>
+      <nav class="relative flex flex-col pt-6 pb-8 h-full w-full bg-gray-700 dark:bg-gray-600 overflow-y-auto">
         <div class="flex w-full items-center px-6 pb-6 mb-6 lg:border-b border-gray-700">
           <a class="text-xl text-white font-semibold" href="/"> <img class="h-8" src="/static/images/logos/basicswap-logo.svg" alt="" width="auto"></a>
         </div>
         <div class="px-4 pb-6">
-          <h3 class="mb-2 text-xs uppercase text-gray-500 font-medium">Wallet</h3>
+          <h3 class="mb-2 text-xs uppercase text-gray-300 font-medium dark:text-gray-300">Wallet</h3>
           <ul class="mb-8 text-sm font-medium">
             <li>
               <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/wallets"> <span class="inline-block mr-3">
@@ -435,7 +516,7 @@
                 </span></a>
             </li>
           </ul>
-          <h3 class="mb-2 text-xs uppercase text-gray-500 font-medium">Exchange</h3>
+          <h3 class="mb-2 text-xs uppercase text-gray-300 font-medium dark:text-gray-300">Exchange</h3>
           <ul class="text-sm font-medium">
             <li>
               <a class="flex items-center pl-3 py-3 pr-2 text-gray-50 hover:bg-gray-900 rounded" href="/newoffer"> <span class="inline-block mr-3">
@@ -523,7 +604,7 @@
                 </span><span>Bids Sent</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_sent_bids }}</span></a>
             </li>
           </ul>
-          <h3 class="mb-2 text-xs uppercase text-gray-500 font-medium mt-5">Settings</h3>
+          <h3 class="mb-2 text-xs uppercase text-gray-300 font-medium dark:text-gray-300 mt-5">Settings</h3>
           <ul class="text-sm font-medium">
             <li>
               <a class="flex items-center pl-3 py-3 pr-2 text-gray-50 hover:bg-gray-900 rounded" href="/settings"> <span class="inline-block mr-3">
@@ -596,7 +677,7 @@
                     <circle cx="12" cy="12" r="4" stroke="#6b7280"></circle>
                   </g>
                 </svg>
-                </span><span>Wached Outputs</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_watched_outputs }}</span></a>
+                </span><span>Watched Outputs</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_watched_outputs }}</span></a>
             </li>
             {% if debug_mode == true %}
             <li>
@@ -660,7 +741,7 @@
       let json = JSON.parse(event.data);
       let event_message = 'Unknown event';
       if (json['event'] == 'new_offer') {
-        event_message = '<div id="hide"><div id="toast-success" class="flex items-center p-4 mb-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow" role="alert"><div class="inline-flex flex-shrink-0 justify-center items-center w-10 h-10 bg-blue-500 rounded-lg"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round"><circle cx="5" cy="5" r="4"></circle> <circle cx="19" cy="19" r="4"></circle> <polyline data-cap="butt" points="13,5 21,5 21,11 " stroke="#ffffff"></polyline> <polyline data-cap="butt" points="11,19 3,19 3,13 " stroke="#ffffff"></polyline> <polyline points=" 16,2 13,5 16,8 " stroke="#ffffff"></polyline> <polyline points=" 8,16 11,19 8,22 " stroke="#ffffff"></polyline></g></svg></div><div class="uppercase w-40 ml-3 text-sm font-semibold text-gray-900 dark:text-white">New network <a class="underline" href=/offer/' + json['offer_id'] + '>offer</a></div><button type="button" onclick="closeAlert(event)" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-0 focus:outline-none focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8" data-dismiss="#toast-success" aria-label="Close"><span class="sr-only">Close</span><svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button></div></div>';
+        event_message = '<div id="hide"><div id="toast-success" class="flex items-center p-4 mb-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow" role="alert"><div class="inline-flex flex-shrink-0 justify-center items-center w-10 h-10 bg-blue-500 rounded-lg"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round"><circle cx="5" cy="5" r="4"></circle> <circle cx="19" cy="19" r="4"></circle> <polyline data-cap="butt" points="13,5 21,5 21,11 " stroke="#ffffff"></polyline> <polyline data-cap="butt" points="11,19 3,19 3,13 " stroke="#ffffff"></polyline> <polyline points=" 16,2 13,5 16,8 " stroke="#ffffff"></polyline> <polyline points=" 8,16 11,19 8,22 " stroke="#ffffff"></polyline></g></svg></div><div class="uppercase w-40 ml-3 text-sm font-semibold text-gray-900">New network <a class="underline" href=/offer/' + json['offer_id'] + '>offer</a></div><button type="button" onclick="closeAlert(event)" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-0 focus:outline-none focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8" data-dismiss="#toast-success" aria-label="Close"><span class="sr-only">Close</span><svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button></div></div>';
       }
       else
       if (json['event'] == 'new_bid') {
@@ -668,7 +749,7 @@
       }
       else
       if (json['event'] == 'bid_accepted') {
-        event_message = '<div id="hide"><div id="toast-success" class="flex items-center p-4 mb-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow" role="alert"><div class="inline-flex flex-shrink-0 justify-center items-center w-10 h-10 bg-green-500 rounded-lg"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"><g fill="#ffffff"><path d="M8.5,20a1.5,1.5,0,0,1-1.061-.439L.379,12.5,2.5,10.379l6,6,13-13L23.621,5.5,9.561,19.561A1.5,1.5,0,0,1,8.5,20Z" fill="#ffffff"></path></g></svg></div><div class="uppercase w-40 ml-3 text-sm font-semibold text-gray-900 dark:text-white"><a class="underline" href=/bid/' + json['bid_id'] + '>Bid</a> accepted</div><button type="button" onclick="closeAlert(event)" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-0 focus:outline-none focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8" data-dismiss="#toast-success" aria-label="Close"><span class="sr-only">Close</span><svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button></div></div>';
+        event_message = '<div id="hide"><div id="toast-success" class="flex items-center p-4 mb-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow" role="alert"><div class="inline-flex flex-shrink-0 justify-center items-center w-10 h-10 bg-violet-500 rounded-lg"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"><g fill="#ffffff"><path d="M8.5,20a1.5,1.5,0,0,1-1.061-.439L.379,12.5,2.5,10.379l6,6,13-13L23.621,5.5,9.561,19.561A1.5,1.5,0,0,1,8.5,20Z" fill="#ffffff"></path></g></svg></div><div class="uppercase w-40 ml-3 text-sm font-semibold text-gray-900"><a class="underline" href=/bid/' + json['bid_id'] + '>Bid</a> accepted</div><button type="button" onclick="closeAlert(event)" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-0 focus:outline-none focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8" data-dismiss="#toast-success" aria-label="Close"><span class="sr-only">Close</span><svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button></div></div>';
       }
       let messages = document.getElementById('ul_updates'),
         message = document.createElement('li');

basicswap/templates/identity.html

@@ -1,153 +1,200 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
-    <div class="flex flex-wrap items-center -m-2">
-      <div class="w-full md:w-1/2 p-2">
-        <ul class="flex flex-wrap items-center gap-x-3 mb-2">
-          <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
-              <p>Home</p>
-            </a>
-          </li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="#">Identity</a></li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/identity/{{ data.identity_address }}">ADDRESS: {{ data.identity_address }}</a></li>
-        </ul>
-      </div>
+ <section class="p-5 mt-5">
+  <div class="flex flex-wrap items-center -m-2">
+   <div class="w-full md:w-1/2 p-2">
+    <ul class="flex flex-wrap items-center gap-x-3 mb-2">
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
+       <p>Home</p>
+      </a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/smsgaddresses">Identity</a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/identity/{{ data.identity_address }}">ADDRESS: {{ data.identity_address }}</a>
+     </li>
+    </ul>
+   </div>
+  </div>
+ </section>
+ <section class="py-4">
+  <div class="container px-4 mx-auto">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
+    <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+    <div class="relative z-20 flex flex-wrap items-center -m-3">
+     <div class="w-full md:w-1/2 p-3">
+      <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Identity</h2>
+      <p class="font-normal text-coolGray-200 dark:text-white">Address: {{ data.identity_address }}</p>
+     </div>
     </div>
-  </section>
-  <section class="py-4">
-    <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
-        <div class="relative z-20 flex flex-wrap items-center -m-3">
-          <div class="w-full md:w-1/2 p-3">
-            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Identity</h2>
-            <p class="font-semibold text-coolGray-200">Address: {{ data.identity_address }}</p>
+   </div>
+  </div>
+ </section>
+ {% include 'inc_messages.html' %}
+ <section>
+  <form method="post">
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden min-height-50">
+    <div class="border-coolGray-100">
+     <div class="flex flex-wrap items-center justify-between -m-2">
+      <div class="w-full pt-2">
+       <div class="container mt-5 mx-auto">
+        <div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+         <div class="px-6">
+          <div class="w-full mt-6 pb-6 overflow-x-auto">
+           <table class="w-full min-w-max text-sm">
+            <thead class="uppercase">
+             <tr class="text-left">
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tl-xl  bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Details</span>
+               </div>
+              </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>
+               </div>
+              </th>
+             </tr>
+            </thead>
+            {% if data.show_edit_form %}
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Label</td>
+             <td class="py-3 px-6">
+              <input class="hover:border-blue-500 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" type="text" id="label" name="label" value="{{ data.label }}">
+             </td>
+            </tr>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Automation Override</td>
+             <td class="py-3 px-6">
+              <select name="automation_override" class="hover:border-blue-500 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 monospace">
+               <option{% if data.automation_override=="0" %} selected{% endif %} value="0">Default</option>
+                {% for a in automation_override_options %}
+                <option{% if data.automation_override==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[1] }}</option>
+                {% endfor %}
+              </select>
+             </td>
+            </tr>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Notes</td>
+             <td class="py-3 px-6">
+              <textarea rows="5" class="hover:border-blue-500 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="note" name="note">{{ data.note }}</textarea>
+             </td>
+            </tr> {% else %} <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Label</td>
+             <td class="py-3 px-6">{{ data.label }}</td>
+            </tr>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Automation Override</td>
+             <td class="py-3 px-6">{{ data.str_automation_override }}</td>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Notes</td>
+             <td class="py-3 px-6">
+              <textarea rows="5" class="hover:border-blue-500 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" readonly>{{ data.note }}</textarea>
+             </td>
+             </td>
+            </tr>{% endif %}
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Successful Sent Bids</td>
+             <td class="py-3 px-6">{{ data.num_sent_bids_successful }}</td>
+            </tr>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Successful Received Bids</td>
+             <td class="py-3 px-6">{{ data.num_recv_bids_successful }}</td>
+            </tr>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Rejected Sent Bids</td>
+             <td class="py-3 px-6">{{ data.num_sent_bids_rejected }}</td>
+            </tr>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Rejected Received Bids</td>
+             <td class="py-3 px-6">{{ data.num_recv_bids_rejected }}</td>
+            </tr>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Failed Sent Bids</td>
+             <td class="py-3 px-6">{{ data.num_sent_bids_failed }}</td>
+            </tr>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Failed Received Bids</td>
+             <td class="py-3 px-6">{{ data.num_recv_bids_failed }}</td>
+            </tr>
+           </table>
           </div>
+         </div>
         </div>
+       </div>
       </div>
+     </div>
     </div>
-  </section>
-  {% include 'inc_messages.html' %}
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
-      <div class="pb-6 border-coolGray-100">
-        <div class="flex flex-wrap items-center justify-between -m-2">
-          <div class="w-full pt-2">
-            <div class="container px-0 mx-auto mt-5">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <form method="post" autocomplete="off">
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                      <tr>
-                        <th scope="col" class="py-3 px-6">Details</th>
-                        <th scope="col">Settings</th>
-                      </tr>
-                    </thead>
-                    {% if data.show_edit_form %}
-                    <tr>
-                      <td class="py-4 px-6 bold">Label</td>
-                      <td class="py-4 pr-5">
-                        <input class="appearance-none bg-gray-50 border w-full border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" type="text" id="label" name="label" value="{{ data.label }}">
-                      </td>
-                    </tr>
-                    <tr>
-                      <td class="py-4 px-6 bold">Automation Override</td>
-                      <td class="py-4 pr-5">
-                        <select name="automation_override">
-                        <option{% if data.automation_override=="0" %} selected{% endif %} value="0">-- Default --</option>
-                        {% for a in automation_override_options %}
-                        <option{% if data.automation_override==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[1] }}</option>
-                        {% endfor %}
-                        </select>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td class="py-4 px-6 bold">Notes</td>
-                      <td class="py-4 pr-5">
-                      <textarea rows="5" class="w-full" id="note" name="note">{{ data.note }}</textarea>
-                      </td>
-                    </tr>
-                    {% else %}
-                    <tr>
-                      <td class="py-4 px-6 bold">Label</td>
-                      <td class="py-4">{{ data.label }}</td>
-                    </tr>
-                    <tr>
-                      <td class="py-4 px-6 bold">Automation Override</td>
-                      <td class="py-4">{{ data.str_automation_override }}</td>
-                    </tr>
-                    <tr>
-                      <td class="py-4 px-6 bold">Notes</td>
-                      <td class="py-4">
-                      <textarea rows="5" class="w-full" readonly>{{ data.note }}</textarea></td>
-                      </td>
-                    </tr>
-                    {% endif %}
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold w-96">Successful Sent Bids</td>
-                      <td>{{ data.num_sent_bids_successful }}</td>
-                    </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Successful Received Bids</td>
-                      <td>{{ data.num_recv_bids_successful }}</td>
-                    </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Rejected Sent Bids</td>
-                      <td>{{ data.num_sent_bids_rejected }}</td>
-                    </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Rejected Received Bids</td>
-                      <td>{{ data.num_recv_bids_rejected }}</td>
-                    </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Failed Sent Bids</td>
-                      <td>{{ data.num_sent_bids_failed }}</td>
-                    </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Failed Received Bids</td>
-                      <td>{{ data.num_recv_bids_failed }}</td>
-                    </tr>
-                  </table>
-              </div>
-            </div>
-            <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
-              <div class="w-full md:w-0/12">
-                <div class="flex flex-wrap justify-end -m-1.5">
-                  {% if data.show_edit_form %}
-                  <div class="w-full md:w-auto p-1.5 ml-2">
-                    <button name="apply" value="Apply" 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"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>Apply</button>
-                  </div>
-                  <div class="w-full md:w-auto p-1.5 ml-2">
-                    <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-red-500 hover:text-red-600 border border-red-400 hover:border-red-500 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ef5844" stroke-linejoin="round" ><line x1="16" y1="8" x2="8" y2="16" stroke="#ef5844"></line> <line x1="16" y1="16" x2="8" y2="8" stroke="#ef5844"></line> <circle cx="12" cy="12" r="11"></circle></g></svg>Cancel</button>
-                  </div>
-                  {% else %}
-                    <div class="w-full md:w-auto p-1.5">
-                      <button name="edit" value="edit" 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">
-                      <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><line x1="2" y1="23" x2="22" y2="23" stroke="#ffffff"></line> <line data-cap="butt" x1="13" y1="5" x2="17" y2="9"></line> <polygon points="8 18 3 19 4 14 16 2 20 6 8 18"></polygon></g></svg>Edit</button>
-                    </div>
-                {% endif %}</div>
-              </div>
-            </div>
-            <input type="hidden" name="formid" value="{{ form_id }}"> </form>
+   </div>
+ </section>
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+   <div class="pb-6 ">
+    <div class="flex flex-wrap items-center justify-between -m-2">
+     <div class="w-full pt-2">
+      <div class="container mx-auto">
+       <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+        <div class="px-6">
+         <div class="flex flex-wrap justify-end">
+          {% if data.show_edit_form %}
+          <div class="w-full md:w-auto p-1.5 ml-2">
+           <button name="apply" value="Apply" 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">
+            <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+             <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
+              <polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline>
+              <circle cx="12" cy="12" r="11"></circle>
+             </g>
+            </svg>Apply </button>
+          </div>
+          <div class="w-full md:w-auto p-1.5 ml-2">
+           <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-red-500 hover:bg-red-600 font-medium text-sm text-white border border-red-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+            <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+             <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
+              <line x1="16" y1="8" x2="8" y2="16" stroke="#ffffff"></line>
+              <line x1="16" y1="16" x2="8" y2="8" stroke="#ffffff"></line>
+              <circle cx="12" cy="12" r="11"></circle>
+             </g>
+            </svg>Cancel </button>
+          </div>
+          {% else %}
+          <div class="w-full md:w-auto p-1.5">
+           <button name="edit" value="edit" 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">
+            <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+             <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
+              <line x1="2" y1="23" x2="22" y2="23" stroke="#ffffff"></line>
+              <line data-cap="butt" x1="13" y1="5" x2="17" y2="9"></line>
+              <polygon points="8 18 3 19 4 14 16 2 20 6 8 18"></polygon>
+             </g>
+            </svg>Edit </button>
           </div>
+          {% endif %}
+         </div>
         </div>
+       </div>
       </div>
+     </div>
     </div>
-  </section>
+   </div>
+  </div>
+ </section>
+ <input type="hidden" name="formid" value="{{ form_id }}">
+ </form>
 </div>
-{% include 'footer.html' %} </div>
+{% include 'footer.html' %}
 </body>
-</html>
+</html>

basicswap/templates/inc_messages.html

@@ -26,26 +26,27 @@
   </div>
 </section>
 {% endfor %}
-{% for m in err_messages %}
-<section class="py-4" id="err_messages_{{ m[0] }}" role="alert">
+{% if err_messages %}
+<section class="py-4" id="err_messages_{{ err_messages[0][0] }}" role="alert">
   <div class="container px-4 mx-auto">
     <div class="p-6 bg-red-100 border border-red-200 rounded-md">
       <div class="flex flex-wrap justify-between items-center -m-2">
         <div class="flex-1 p-2">
           <div class="flex flex-wrap -m-1">
             <div class="w-auto p-1">
-              <svg class="relative top-0.5" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M10.4733 5.52667C10.4114 5.46419 10.3376 5.41459 10.2564 5.38075C10.1751 5.3469 10.088 5.32947 9.99999 5.32947C9.91198 5.32947 9.82485 5.3469 9.74361 5.38075C9.66237 5.41459 9.58863 5.46419 9.52666 5.52667L7.99999 7.06001L6.47333 5.52667C6.34779 5.40114 6.17753 5.33061 5.99999 5.33061C5.82246 5.33061 5.65219 5.40114 5.52666 5.52667C5.40112 5.65221 5.3306 5.82247 5.3306 6.00001C5.3306 6.17754 5.40112 6.3478 5.52666 6.47334L7.05999 8.00001L5.52666 9.52667C5.46417 9.58865 5.41458 9.66238 5.38073 9.74362C5.34689 9.82486 5.32946 9.912 5.32946 10C5.32946 10.088 5.34689 10.1752 5.38073 10.2564C5.41458 10.3376 5.46417 10.4114 5.52666 10.4733C5.58863 10.5358 5.66237 10.5854 5.74361 10.6193C5.82485 10.6531 5.91198 10.6705 5.99999 10.6705C6.088 10.6705 6.17514 10.6531 6.25638 10.6193C6.33762 10.5854 6.41135 10.5358 6.47333 10.4733L7.99999 8.94001L9.52666 10.4733C9.58863 10.5358 9.66237 10.5854 9.74361 10.6193C9.82485 10.6531 9.91198 10.6705 9.99999 10.6705C10.088 10.6705 10.1751 10.6531 10.2564 10.6193C10.3376 10.5854 10.4114 10.5358 10.4733 10.4733C10.5358 10.4114 10.5854 10.3376 10.6193 10.2564C10.6531 10.1752 10.6705 10.088 10.6705 10C10.6705 9.912 10.6531 9.82486 10.6193 9.74362C10.5854 9.66238 10.5358 9.58865 10.4733 9.52667L8.93999 8.00001L10.4733 6.47334C10.5358 6.41137 10.5854 6.33763 10.6193 6.25639C10.6531 6.17515 10.6705 6.08802 10.6705 6.00001C10.6705 5.912 10.6531 5.82486 10.6193 5.74362C10.5854 5.66238 10.5358 5.58865 10.4733 5.52667ZM12.7133 3.28667C12.0983 2.64994 11.3627 2.14206 10.5494 1.79266C9.736 1.44327 8.8612 1.25936 7.976 1.25167C7.0908 1.24398 6.21294 1.41266 5.39363 1.74786C4.57432 2.08307 3.82998 2.57809 3.20403 3.20404C2.57807 3.82999 2.08305 4.57434 1.74785 5.39365C1.41264 6.21296 1.24396 7.09082 1.25166 7.97602C1.25935 8.86121 1.44326 9.73601 1.79265 10.5494C2.14204 11.3627 2.64992 12.0984 3.28666 12.7133C3.90164 13.3501 4.63727 13.858 5.45063 14.2074C6.26399 14.5567 7.13879 14.7407 8.02398 14.7483C8.90918 14.756 9.78704 14.5874 10.6064 14.2522C11.4257 13.9169 12.17 13.4219 12.796 12.796C13.4219 12.17 13.9169 11.4257 14.2521 10.6064C14.5873 9.78706 14.756 8.90919 14.7483 8.024C14.7406 7.1388 14.5567 6.264 14.2073 5.45064C13.8579 4.63728 13.3501 3.90165 12.7133 3.28667ZM11.7733 11.7733C10.9014 12.6463 9.75368 13.1899 8.52585 13.3115C7.29802 13.4332 6.066 13.1254 5.03967 12.4405C4.01335 11.7557 3.25623 10.7361 2.89731 9.55566C2.53838 8.37518 2.59986 7.10677 3.07127 5.96653C3.54267 4.82629 4.39484 3.88477 5.48259 3.30238C6.57033 2.71999 7.82635 2.53276 9.03666 2.77259C10.247 3.01242 11.3367 3.66447 12.1202 4.61765C12.9036 5.57083 13.3324 6.76617 13.3333 8.00001C13.3357 8.70087 13.1991 9.39524 12.9313 10.0429C12.6635 10.6906 12.2699 11.2788 11.7733 11.7733Z" fill="#EF5944"></path>
-              </svg>
+              {% for m in err_messages %}
+              <div class="flex-1 p-1">
+                <h3 class="font-medium text-sm text-red-900 error_msg">
+                  <p class="error_msg">Error: {{ m[1] }}</p>
+                </h3>
+              </div>
+              {% endfor %}
             </div>
-            <div class="flex-1 p-1">
-              <h3 class="font-medium text-sm text-red-900 error_msg">
-                <p class="error_msg">Error: {{ m[1] }}</p>
-              </h3></div>
           </div>
         </div>
         <div class="w-auto p-2">
-          <button type="button" class="ml-auto bg-red-100 text-red-500 rounded-lg focus:ring-0 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex h-8 w-8 focus:outline-none" data-dismiss-target="#err_messages_{{ m[0] }}" aria-label="Close"> <span class="sr-only">Close</span>
+          <button type="button" class="ml-auto bg-red-100 text-red-500 rounded-lg focus:ring-0 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex h-8 w-8 focus:outline-none" data-dismiss-target="#err_messages_{{ err_messages[0][0] }}" aria-label="Close"> 
+            <span class="sr-only">Close</span>
             <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
             </svg>
@@ -55,4 +56,5 @@
     </div>
   </div>
 </section>
-{% endfor %}
+{% endif %}
+<!-- todo messages colors better for darkmode -->

basicswap/templates/index.html

@@ -1,89 +1,92 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-      <section class="relative py-24 bg-white overflow-hidden" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
-        <div class="container px-4 mx-auto mb-16 md:mb-0">
-          <div class="md:w-1/2 pl-4">
-            <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-blue-500 bg-blue-100 font-medium rounded-full shadow-sm">BasicSwap version: {{ version }}</span>
-            <h3 class="mb-6 text-4xl md:text-5xl leading-tight text-coolGray-900 font-bold tracking-tighter">Welcome to BasicSwap DEX</h3>
-            <p class="mb-12 text-lg md:text-xl text-coolGray-500 font-medium">Swap cryptocurrencies in <span class="underline">total privacy</span> with no middlemen, fees,<br> or restrictions.</p>
-            <div class="flex flex-wrap mb-10 text-center md:text-left">
-              <div class="w-full md:w-auto mb-6 md:mb-0 md:pr-6">
-                <a href="/wallets">
-                <div class="inline-flex h-14 w-14 mx-auto items-center justify-center text-white bg-blue-500 rounded-lg">
-                  <svg width="21" height="21" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                  <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
-                    <path d="M6,3H3C1.895,3,1,3.895,1,5 v0c0,1.105,0.895,2,2,2"></path>
-                    <polyline points=" 6,7 6,1 20,1 20,7 " stroke="#ffffff"></polyline>
-                    <path d="M23,7H3 C1.895,7,1,6.105,1,5v15c0,1.657,1.343,3,3,3h19V7z"></path>
-                    <circle cx="17" cy="15" r="2"></circle>
-                  </g>
-                </svg>
-                </div>
-              </div>
-              <div class="w-full md:flex-1 md:pt-3">
-                <div class="md:max-w-sm">
-                  <h3 class="mb-4 text-xl md:text-2xl leading-tight text-coolGray-900 font-bold">Your Wallet</h3>
-                  <p class="text-coolGray-500 font-medium">Manage your cryptocurrency wallets.</p>
-                 </a>
-                </div>
-              </div>
-            </div>
-            <div class="flex flex-wrap mb-10 text-center md:text-left">
-              <div class="w-full md:w-auto mb-6 md:mb-0 md:pr-6">
-                <a href="/offers">
-                <div class="inline-flex h-14 w-14 mx-auto items-center justify-center text-white bg-blue-500 rounded-lg">
-                  <svg width="21" height="21" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                  <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
-                    <circle cx="5" cy="5" r="4"></circle>
-                    <circle cx="19" cy="19" r="4"></circle>
-                    <polyline data-cap="butt" points="13,5 21,5 21,11 " stroke="#ffffff"></polyline>
-                    <polyline data-cap="butt" points="11,19 3,19 3,13 " stroke="#ffffff"></polyline>
-                    <polyline points=" 16,2 13,5 16,8 " stroke="#ffffff"></polyline>
-                    <polyline points=" 8,16 11,19 8,22 " stroke="#ffffff"></polyline>
-                  </g>
-                </svg>
-                </div>
-              </div>
-              <div class="w-full md:flex-1 md:pt-3">
-                <div class="md:max-w-sm">
-                  <h3 class="mb-4 text-xl md:text-2xl leading-tight text-coolGray-900 font-bold">Start Trading</h3>
-                  <p class="text-coolGray-500 font-medium">Browse available swap offers placed by others.</p>
-                </a>
-                </div>
-              </div>
-            </div>
-            <div class="flex flex-wrap text-center md:text-left">
-              <div class="w-full md:w-auto mb-6 md:mb-0 md:pr-6">
-               <a href="https://academy.particl.io/en/latest/faq/get_support.html" target="_blank">
-                <div class="inline-flex h-14 w-14 mx-auto items-center justify-center text-white bg-blue-500 rounded-lg">
-                  <svg width="22" height="22" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                    <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
-                      <line x1="23" y1="11" x2="23" y2="16" stroke="#ffffff"></line> <polygon points="12,13 2,8 12,3 22,8 "></polygon> 
-                      <path data-cap="butt" d="M5,9.5V18c0,1.657,3.134,3,7,3 s7-1.343,7-3V9.5"></path>
-                    </g>
-                  </svg>     
-                </div>
-              </div>
-              <div class="w-full md:flex-1 md:pt-3">
-                <div class="md:max-w-sm">
-                  <h3 class="mb-4 text-xl md:text-2xl leading-tight text-coolGray-900 font-bold">Help / Tutorials</h3>
-                  <p class="text-coolGray-500 font-medium">Learn how to use BasicSwap with the Particl Academy.</p>
-                </div>
-              </div>
-              </a>
-            </div>
-          </div>
-        </div>
-        <div class="md:absolute md:top-28 lg:top-1/2 md:-right-96 xl:-right-80 md:-mr-56 lg:-mr-20 xl:-mr-0 md:transform lg:-translate-y-1/2 px-4 mb-16 md:mb-0">
-          <div class="relative max-w-max">
-            <img class="absolute p-7 -mt-1 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-10/12 z-20" src="/static/images/gfx/dashboard.jpg" alt="">
-            <img class="relative z-10" src="/static/images/gfx/macbook.png" alt="">
-            <img class="absolute -top-24 right-0 md:mt-px md:right-96 md:mr-52 lg:mr-16 xl:-mr-20 w-28 md:w-auto text-blue-500" src="/static/images/elements/dots2-red.svg">
-            <img class="absolute -bottom-24 left-0 md:left-auto md:mt-px md:right-96 md:mr-52 lg:mr-16 xl:-mr-20 w-28 md:w-auto text-red-500" src="/static/images/elements/dots2-red.svg">
-            <img class="absolute left-0 top-1/2 transform -translate-y-1/2 w-28 md:w-auto text-yellow-400" src="/static/images/elements/circle2-violet.svg">
-          </div>
-        </div>
-      </section>
+ <section class="relative py-24 overflow-hidden">
+  <div class="container px-4 mx-auto mb-16 md:mb-0">
+   <div class="md:w-1/2 pl-4">
+    <span class="inline-block py-1 px-3 mb-4 text-xs leading-5 bg-blue-500 text-white font-medium rounded-full shadow-sm">BasicSwap version: {{ version }}</span>
+    <h3 class="mb-6 text-4xl md:text-5xl leading-tight text-coolGray-900 font-bold tracking-tighter dark:text-white">Welcome to BasicSwap DEX</h3>
+    <p class="mb-12 text-lg md:text-xl text-coolGray-500 dark:text-gray-300 font-medium">Swap cryptocurrencies in <span class="underline">total privacy</span> with no middlemen, fees, <br> or restrictions. </p>
+    <div class="flex flex-wrap mb-10 text-center md:text-left">
+     <div class="w-full md:w-auto mb-6 md:mb-0 md:pr-6">
+      <a href="/wallets">
+       <div class="inline-flex h-14 w-14 mx-auto items-center justify-center text-white bg-blue-500 rounded-lg">
+        <svg width="21" height="21" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+         <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
+          <path d="M6,3H3C1.895,3,1,3.895,1,5 v0c0,1.105,0.895,2,2,2"></path>
+          <polyline points=" 6,7 6,1 20,1 20,7 " stroke="#ffffff"></polyline>
+          <path d="M23,7H3 C1.895,7,1,6.105,1,5v15c0,1.657,1.343,3,3,3h19V7z"></path>
+          <circle cx="17" cy="15" r="2"></circle>
+         </g>
+        </svg>
+       </div>
+     </div>
+     <div class="w-full md:flex-1 md:pt-3">
+      <div class="md:max-w-sm">
+       <h3 class="mb-4 text-xl md:text-2xl leading-tight text-coolGray-900 dark:text-white font-bold">Your Wallet</h3>
+       <p class="text-coolGray-500 dark:text-gray-300 font-medium">Manage your cryptocurrency wallets.</p>
+       </a>
+      </div>
+     </div>
+    </div>
+    <div class="flex flex-wrap mb-10 text-center md:text-left">
+     <div class="w-full md:w-auto mb-6 md:mb-0 md:pr-6">
+      <a href="/offers">
+       <div class="inline-flex h-14 w-14 mx-auto items-center justify-center text-white bg-blue-500 rounded-lg">
+        <svg width="21" height="21" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+         <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
+          <circle cx="5" cy="5" r="4"></circle>
+          <circle cx="19" cy="19" r="4"></circle>
+          <polyline data-cap="butt" points="13,5 21,5 21,11 " stroke="#ffffff"></polyline>
+          <polyline data-cap="butt" points="11,19 3,19 3,13 " stroke="#ffffff"></polyline>
+          <polyline points=" 16,2 13,5 16,8 " stroke="#ffffff"></polyline>
+          <polyline points=" 8,16 11,19 8,22 " stroke="#ffffff"></polyline>
+         </g>
+        </svg>
+       </div>
+     </div>
+     <div class="w-full md:flex-1 md:pt-3">
+      <div class="md:max-w-sm">
+       <h3 class="mb-4 text-xl md:text-2xl leading-tight text-coolGray-900 dark:text-white font-bold">Start Trading</h3>
+       <p class="text-coolGray-500 dark:text-gray-300 font-medium">Browse available swap offers placed by others.</p>
+       </a>
+      </div>
+     </div>
+    </div>
+    <div class="flex flex-wrap text-center md:text-left">
+     <div class="w-full md:w-auto mb-6 md:mb-0 md:pr-6">
+      <a href="https://academy.particl.io/en/latest/faq/get_support.html" target="_blank">
+       <div class="inline-flex h-14 w-14 mx-auto items-center justify-center text-white bg-blue-500 rounded-lg">
+        <svg width="22" height="22" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+         <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
+          <line x1="23" y1="11" x2="23" y2="16" stroke="#ffffff"></line>
+          <polygon points="12,13 2,8 12,3 22,8 "></polygon>
+          <path data-cap="butt" d="M5,9.5V18c0,1.657,3.134,3,7,3 s7-1.343,7-3V9.5"></path>
+         </g>
+        </svg>
+       </div>
+     </div>
+     <div class="w-full md:flex-1 md:pt-3">
+      <div class="md:max-w-sm">
+       <h3 class="mb-4 text-xl md:text-2xl leading-tight text-coolGray-900 dark:text-white font-bold">Help / Tutorials</h3>
+       <p class="text-coolGray-500 dark:text-gray-300 font-medium">Learn how to use BasicSwap with the Particl Academy.</p>
+      </div>
+     </div>
+     </a>
+    </div>
+   </div>
+  </div>
+  <div class="md:absolute md:top-28 lg:top-1/2 md:-right-96 xl:-right-80 md:-mr-56 lg:-mr-20 xl:-mr-0 md:transform lg:-translate-y-1/2 px-4 mb-16 md:mb-0">
+   <div class="relative max-w-max">
+    <img class="absolute p-7 -mt-1 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-10/12 z-20 imageshow light-image" src="/static/images/gfx/dashboard.jpg" alt="">
+    <img class="absolute p-7 -mt-1 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-10/12 z-20 imageshow dark-image" src="/static/images/gfx/dashboard2.jpg" alt="">
+    <img class="relative z-10 imageshow light-image" src="/static/images/gfx/macbook.png" alt="">
+    <img class="relative z-10 imageshow dark-image" src="/static/images/gfx/macbook2.png" alt="">
+    <img class="absolute -top-24 right-0 md:mt-px md:right-96 md:mr-52 lg:mr-16 xl:-mr-20 w-28 md:w-auto text-blue-500" src="/static/images/elements/dots2-red.svg">
+    <img class="absolute -bottom-24 left-0 md:left-auto md:mt-px md:right-96 md:mr-52 lg:mr-16 xl:-mr-20 w-28 md:w-auto text-red-500" src="/static/images/elements/dots2-red.svg">
+    <img class="absolute left-0 top-1/2 transform -translate-y-1/2 w-28 md:w-auto text-yellow-400" src="/static/images/elements/circle2-violet.svg">
+   </div>
+  </div>
+ </section>
 </div>
 {% include 'footer.html' %}
 </body>

basicswap/templates/offer_new_1.html

@@ -1,387 +1,419 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
-    <div class="flex flex-wrap items-center -m-2">
-      <div class="w-full md:w-1/2 p-2">
-        <ul class="flex flex-wrap items-center gap-x-3 mb-2">
-          <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
-              <p>Home</p>
-            </a>
-          </li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/newoffer">Place an new offer</a></li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-        </ul>
+ <section class="p-5 mt-5">
+  <div class="flex flex-wrap items-center -m-2">
+   <div class="w-full md:w-1/2 p-2">
+    <ul class="flex flex-wrap items-center gap-x-3 mb-2">
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
+       <p>Home</p>
+      </a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/newoffer">Place an new offer</a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+    </ul>
+   </div>
+  </div>
+ </section>
+ <section class="py-4">
+  <div class="container px-4 mx-auto">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
+    <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+    <div class="relative z-20 flex flex-wrap items-center -m-3">
+     <div class="w-full md:w-1/2 p-3">
+      <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Place an new offer</h2>
+      <p class="font-normal text-coolGray-200 dark:text-white">Place an order on the order book.</p>
+     </div>
+    </div>
+   </div>
+  </div>
+ </section>
+ {% include 'inc_messages.html' %}
+ <section>
+  <div class="p-5 mb-10">
+   <div class="mx-4 p-4">
+    <div class="flex items-center">
+     <div class="flex items-center text-teal-600 relative">
+      <div class="rounded-full h-12 w-12 py-3 border-2 border-blue-500">
+       <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
+        <g fill="#3b82f6">
+         <polygon points="14.5 23.5 11.5 23.5 11.5 4.321 6.766 8.108 4.892 5.766 11.474 0.5 14.5 0.5 14.5 23.5" fill="#3b82f6"></polygon>
+        </g>
+       </svg>
+      </div>
+      <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase dark:text-white text-gray-600">Step 1</div>
+     </div>
+     <div class="flex-auto border-t-2 border-teal-600 dark:border-gray-400"></div>
+     <div class="flex items-center text-teal-600 relative">
+      <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-teal-600 dark:border-gray-400">
+       <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
+        <g fill="#3b82f6">
+         <path d="M19.5,23.5H4.5V20.2l.667-.445C9.549,16.828,16.5,10.78,16.5,7c0-2.654-1.682-4-5-4A9.108,9.108,0,0,0,7.333,4.248L6.084,5.08,4.42,2.584l1.247-.832A11.963,11.963,0,0,1,11.5,0c4.935,0,8,2.683,8,7,0,5-6.5,10.662-10.232,13.5H19.5ZM6,21H6Z" fill="#d1d5db"></path>
+        </g>
+       </svg>
+      </div>
+      <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase dark:text-white text-gray-600">Step 2</div>
+     </div>
+     <div class="flex-auto border-t-2 border-teal-600 dark:border-gray-400"></div>
+     <div class="flex items-center text-gray-500 relative">
+      <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-teal-600 dark:border-gray-400">
+       <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
+        <g fill="#3b82f6">
+         <polygon points="9 21 1 13 4 10 9 15 21 3 24 6 9 21" fill="#d1d5db"></polygon>
+        </g>
+       </svg>
       </div>
+      <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase dark:text-white text-gray-600">Confirm</div>
+     </div>
     </div>
-  </section>
-  <section class="py-4">
-    <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
-        <div class="relative z-20 flex flex-wrap items-center -m-3">
-          <div class="w-full md:w-1/2 p-3">
-            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Place an new offer</h2>
-            <p class="font-semibold text-coolGray-200">Place an order on the order book.</p>
+   </div>
+  </div>
+ </section>
+ <section class="py-3">
+  <div class="container px-4 mx-auto">
+   <div class="p-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+    <div class="flex flex-wrap items-center justify-between -mx-4 mb-8 pb-6 border-b border-gray-400 border-opacity-20">
+     <div class="w-full sm:w-auto px-4 mb-6 sm:mb-0">
+      <h4 class="text-2xl font-bold tracking-wide dark:text-white mb-1">STEP 1</h4>
+      <!-- todo add subtitle <p class="text-sm text-coolGray-500">Lorem ipsum dolor sit amet</p> -->
+     </div>
+    </div>
+    <form method="post" autocomplete="off" id='form'>
+     <div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 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-3">
+         <p class="text-sm text-coolGray-800 dark:text-white font-semibold">Select Network</p>
+        </div>
+        <div class="w-full md:flex-1 p-3">
+         <div class="relative">
+          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+           <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+          </svg>
+          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+           <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+            <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+             <line data-cap="butt" x1="7.6" y1="10.5" x2="16.4" y2="5.5" stroke="#3b82f6"></line>
+             <line data-cap="butt" x1="7.6" y1="13.5" x2="16.4" y2="18.5" stroke="#3b82f6"></line>
+             <circle cx="5" cy="12" r="3"></circle>
+             <circle cx="19" cy="4" r="3"></circle>
+             <circle cx="19" cy="20" r="3"></circle>
+            </g>
+           </svg>
           </div>
+          <select class="pl-10 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_to">
+           <option{% if data.addr_to=="-1" %} selected{% endif %} value="-1">Public Network</option>
+            {% for a in addrs_to %}
+            <option{% if data.addr_to==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option>
+            {% endfor %}
+          </select>
+         </div>
         </div>
+       </div>
       </div>
-    </div>
-  </section>
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-20 h-full overflow-hidden bg-white rounded-t-md">
-      <div class="pb-6 border-coolGray-100">
-        <div class="flex flex-wrap items-center justify-between -m-2">
-          <div class="w-full p-2">
-            {% include 'inc_messages.html' %}
-            <div class="p-5 mb-10">
-              <div class="mx-4 p-4">
-                <div class="flex items-center">
-                  <div class="flex items-center text-teal-600 relative">
-                    <div class="rounded-full h-12 w-12 py-3 border-2 border-blue-500">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
-                        <g fill="#3b82f6">
-                          <polygon points="14.5 23.5 11.5 23.5 11.5 4.321 6.766 8.108 4.892 5.766 11.474 0.5 14.5 0.5 14.5 23.5" fill="#3b82f6"></polygon>
-                        </g>
-                      </svg>
-                    </div>
-                    <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 1</div>
-                  </div>
-                  <div class="flex-auto border-t-2 border-teal-600"></div>
-                  <div class="flex items-center text-teal-600 relative">
-                    <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-teal-600">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
-                        <g fill="#3b82f6">
-                          <path d="M19.5,23.5H4.5V20.2l.667-.445C9.549,16.828,16.5,10.78,16.5,7c0-2.654-1.682-4-5-4A9.108,9.108,0,0,0,7.333,4.248L6.084,5.08,4.42,2.584l1.247-.832A11.963,11.963,0,0,1,11.5,0c4.935,0,8,2.683,8,7,0,5-6.5,10.662-10.232,13.5H19.5ZM6,21H6Z" fill="#d1d5db"></path>
-                        </g>
-                      </svg>
-                    </div>
-                    <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 2</div>
-                  </div>
-                  <div class="flex-auto border-t-2 border-teal-600"></div>
-                  <div class="flex items-center text-gray-500 relative">
-                    <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-teal-600">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
-                        <g fill="#3b82f6">
-                          <polygon points="9 21 1 13 4 10 9 15 21 3 24 6 9 21" fill="#d1d5db"></polygon>
-                        </g>
-                      </svg>
-                    </div>
-                    <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Confirm</div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <form method="post" autocomplete="off" id='form'>
-              <div class="py-6 border-b border-t border-coolGray-100">
-                <div class="w-full md:w-10/12">
-                  <div class="flex flex-wrap -m-3">
-                    <div class="w-full md:w-1/3 p-3">
-                      <p class="text-sm text-coolGray-800 font-semibold">Select network</p>
-                    </div>
-                    <div class="w-full md:flex-1 p-3">
-                      <div class="relative">
-                        <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                          <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-                        </svg>
-                        <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-                          <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                            <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
-                              <line data-cap="butt" x1="7.6" y1="10.5" x2="16.4" y2="5.5" stroke="#3b82f6"></line>
-                              <line data-cap="butt" x1="7.6" y1="13.5" x2="16.4" y2="18.5" stroke="#3b82f6"></line>
-                              <circle cx="5" cy="12" r="3"></circle>
-                              <circle cx="19" cy="4" r="3"></circle>
-                              <circle cx="19" cy="20" r="3"></circle>
-                            </g>
-                          </svg>
-                        </div>
-                        <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="addr_to">
-                          <option{% if data.addr_to=="-1" %} selected{% endif %} value="-1">Public Network</option>
-                            {% for a in addrs_to %}
-                            <option{% if data.addr_to==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option>
-                            {% endfor %}
-                          </select>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="py-6 border-b border-coolGray-100">
-                <div class="w-full md:w-10/12">
-                  <div class="flex flex-wrap -m-3">
-                    <div class="w-full md:w-1/3 p-3">
-                      <p class="text-sm text-coolGray-800 font-semibold">Select address</p>
-                    </div>
-                    <div class="w-full md:flex-1 p-3">
-                      <div class="relative">
-                        <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                          <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-                        </svg>
-                        <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-                          <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                            <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
-                              <path data-cap="butt" d="M11.992,11.737,14.2,13.4A2,2,0,0,1,15,15v1H7V15a2,2,0,0,1,.8-1.6l2.208-1.663" stroke="#3b82f6"></path>
-                              <rect x="9" y="7" width="4" height="5" rx="2" ry="2" stroke="#3b82f6"></rect>
-                              <path d="M2,1H18a2,2,0,0,1,2,2V21a2,2,0,0,1-2,2H2Z"></path>
-                              <line x1="23" y1="5" x2="23" y2="9" stroke="#3b82f6"></line>
-                            </g>
-                          </svg>
-                        </div>
-                        <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" 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>
-
-              <div class="py-6 border-b border-coolGray-100">
-                <div class="w-full md:w-10/12">
-                  <div class="flex flex-wrap -m-3">
-                    <div class="w-full md:w-1/3 p-3">
-                      <p class="text-sm text-coolGray-800 font-semibold">Swap Type</p>
-                    </div>
-                    <div class="w-full md:flex-1 p-3">
-                      <div class="relative">
-                        <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                          <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-                        </svg>
-                        <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-                          <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                            <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
-                              <path data-cap="butt" d="M11.992,11.737,14.2,13.4A2,2,0,0,1,15,15v1H7V15a2,2,0,0,1,.8-1.6l2.208-1.663" stroke="#3b82f6"></path>
-                              <rect x="9" y="7" width="4" height="5" rx="2" ry="2" stroke="#3b82f6"></rect>
-                              <path d="M2,1H18a2,2,0,0,1,2,2V21a2,2,0,0,1-2,2H2Z"></path>
-                              <line x1="23" y1="5" x2="23" y2="9" stroke="#3b82f6"></line>
-                            </g>
-                          </svg>
-                        </div>
-                        <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="swap_type" id="swap_type">
-                          {% for a in swap_types %}
-                          <option{% if data.swap_type==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[1] }}</option>
-                          {% endfor %}
-                        </select>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div class="py-6 border-b border-coolGray-100">
-                <div class="w-full md:w-10/12">
-                  <div class="flex flex-wrap -m-3">
-                    <div class="w-full md:w-1/3 p-3">
-                      <p class="text-sm text-coolGray-800 font-semibold">You Send</p>
-                    </div>
-                    <div class="w-full md:flex-1 p-3">
-                      <div class="flex flex-wrap -m-3">
-                        <div class="w-full md:w-1/2 p-3">
-                          <div class="relative">
-                            <svg class="absolute right-4 top-1/2 transform -translate-y-1/2 z-50" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                              <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-                            </svg>
-                            <select is="ms-dropdown" class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" id="coin_from" name="coin_from" onchange="set_rate('coin_from');">
-                              <option value="-1">Select coin you send</option>
-                              {% for c in coins_from %}
-                             <option{% if data.coin_from==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}-20.png">{{ c[1] }}</option>
-                              {% endfor %}
-                            </select>
-                          </div>
-                        </div>
-                        <div class="w-full md:w-1/2 p-3">
-                          <div class="relative">
-                            <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-                              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                                <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
-                                  <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
-                                  <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
-                                  <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
-                                  <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
-                                  <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
-                                </g>
-                              </svg>
-                            </div>
-                            <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="Amount you send" type="text" id="amt_from" name="amt_from" value="{{ data.amt_from }}" onchange="set_rate('amt_from');"> </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="py-6 border-b border-coolGray-100">
-                <div class="w-full md:w-10/12">
-                  <div class="flex flex-wrap -m-3">
-                    <div class="w-full md:w-1/3 p-3">
-                      <p class="text-sm text-coolGray-800 font-semibold">You Get</p>
-                    </div>
-                    <div class="w-full md:flex-1 p-3">
-                      <div class="flex flex-wrap -m-3">
-                        <div class="w-full md:w-1/2 p-3">
-                          <div class="relative">
-                            <svg class="absolute right-4 top-1/2 transform -translate-y-1/2 z-50" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                              <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-                            </svg>
-                            <select is="ms-dropdown" class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5" id="coin_to" name="coin_to" onchange="set_rate('coin_to');">
-                              <option value="-1">Select coin you get</option>
-                              {% for c in coins %}
-                              <option{% if data.coin_to==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}-20.png">{{ c[1] }}</option>
-                              {% endfor %}
-                            </select>
-                          </div>
-                        </div>
-                        <div class="w-full md:w-1/2 p-3">
-                          <div class="relative">
-                            <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-                              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                                <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
-                                  <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
-                                  <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
-                                  <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
-                                  <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
-                                  <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
-                                </g>
-                              </svg>
-                            </div>
-                            <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="Amount you get" type="text" id="amt_to" name="amt_to" value="{{ data.amt_to }}" onchange="set_rate('amt_to');"> </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="py-6 border-b border-coolGray-100">
-                <div class="w-full md:w-10/12">
-                  <div class="flex flex-wrap -m-3">
-                    <div class="w-full md:w-1/3 p-3">
-                      <p class="text-sm text-coolGray-800 font-semibold">Bid amount</p>
-                    </div>
-                    <div class="w-full md:flex-1 p-3">
-                      <div class="flex flex-wrap -m-3">
-                        <div class="w-full md:w-1/2 p-3">
-                          <p class="mb-1.5 font-medium text-base text-coolGray-800">Minimum Bid Amount</p>
-                          <div class="relative">
-                            <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-                              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                                <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
-                                  <rect x="9.843" y="5.379" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -0.7635 13.1569)" width="11.314" height="4.243"></rect>
-                                  <polyline points="3,23 3,19 15,19 15,23 "></polyline>
-                                  <line x1="4" y1="15" x2="1" y2="15" stroke="#3b82f6"></line>
-                                  <line x1="5.757" y1="10.757" x2="3.636" y2="8.636" stroke="#3b82f6"></line>
-                                  <line x1="1" y1="23" x2="17" y2="23"></line>
-                                  <line x1="17" y1="9" x2="23" y2="15"></line>
-                                </g>
-                              </svg>
-                            </div>
-                            <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="text" id="amt_bid_min" name="amt_bid_min" value="{{ data.amt_bid_min }}" title="Bids with an amount below the minimum bid value will be discarded"> </div>
-                        </div>
-                        <div class="w-full md:w-1/2 p-3">
-                          <p class="mb-1.5 font-medium text-base text-coolGray-800">Rate</p>
-                          <div class="relative">
-                            <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-                              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                                <g fill="#3b82f6">
-                                  <path d="M9,9h5L7,0,0,9H5V23a1,1,0,0,0,1,1H8a1,1,0,0,0,1-1Z" fill="#3b82f6"></path>
-                                  <path d="M14,17a3,3,0,1,1,3-3A3,3,0,0,1,14,17Zm0-4a1,1,0,1,0,1,1A1,1,0,0,0,14,13Z" data-color="color-2"></path>
-                                  <path d="M21,24a3,3,0,1,1,3-3A3,3,0,0,1,21,24Zm0-4a1,1,0,1,0,1,1A1,1,0,0,0,21,20Z" data-color="color-2"></path>
-                                  <path d="M13,23a1,1,0,0,1-.707-1.707l9-9a1,1,0,0,1,1.414,1.414l-9,9A1,1,0,0,1,13,23Z" data-color="color-2"></path>
-                                </g>
-                              </svg>
-                            </div>
-                            <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="text" id="rate" name="rate" value="{{ data.rate }}" onchange="set_rate('rate');"> </div>
-                            <div class="form-check form-check-inline">
-                            <input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="checkbox" id="rate_lock" name="rate_lock" value="rl" checked=checked>
-                            <label class="cursor-help form-check-label inline-block text-gray-800" for="inlineCheckbox1">Lock Rate</label>
-                            </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="py-6 border-coolGray-100">
-                <div class="w-full md:w-10/12">
-                  <div class="flex flex-wrap -m-3">
-                    <div class="w-full md:w-1/3 p-3">
-                      <p class="text-sm text-coolGray-800 font-semibold">Options</p>
-                    </div>
-                    <div class="w-full md:flex-1 p-3">
-                      <div class="form-check form-check-inline">
-                        <input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="checkbox" id="amt_var" name="amt_var" value="av" {% if data.amt_var==true %} checked="checked" {% endif %}>
-                        <label class="form-check-label inline-block text-gray-800" for="inlineCheckbox2">Amount Variable</label>
-                      </div>
-                      <div class="form-check form-check-inline">
-                        <input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="checkbox" id="rate_var" name="rate_var" value="rv" {% if data.rate_var==true %} checked="checked" {% endif %}>
-                        <label class="form-check-label bg-gray-50inline-block text-gray-800" for="inlineCheckbox3">Rate Variable</label>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="py-6 border-b border-t border-coolGray-100">
-                <div class="w-full md:w-10/12">
-                  <div class="flex flex-wrap -m-3">
-                    <div class="w-full md:w-1/3 p-3">
-                      <p class="text-sm text-coolGray-800 font-semibold">Rates</p>
-                    </div>
-                    <div class="w-full md:flex-1 p-3">
-                      <p id="rates_display"></p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="p-6 pt-10 bg-white bg-opacity-60 mb-10 rounded-b-md mb-20">
-                <div class="w-full md:w-0/12">
-                  <div class="flex flex-wrap justify-end -m-1.5">
-                    <!--<div class="w-full md:w-auto p-1.5">
-                <button name="show_rates_table" type="button" value="Show Rates Table" onclick='lookup_rates_table();' 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">
-                  <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                    <g fill="#556987">
-                      <path fill="#556987" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
-                      <path data-color="#556987" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
-                    </g>
-                  </svg> <span>Show Rates Table</span> </button>
-              </div>-->
-                    <div class="w-full md:w-auto p-1.5">
-                      <button name="check_rates" type="button" value="Lookup Rates (RAW)" onclick='lookup_rates();' 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">
-                        <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                          <g fill="#556987">
-                            <path fill="#556987" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
-                            <path data-color="#556987" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
-                          </g>
-                        </svg> <span>Check Current Rates</span></button>
-                    </div>
-                    <div class="w-full md:w-auto p-1.5">
-                      <button name="continue" value="Continue" 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">
-                        <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                          <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
-                            <circle cx="12" cy="12" r="11"></circle>
-                            <polyline points="11 8 15 12 11 16" stroke="#ffffff"></polyline>
-                          </g>
-                        </svg> <span>Continue</span></button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <input type="hidden" name="formid" value="{{ form_id }}">
-              <input type="hidden" name="step1" value="a"> </form>
+     </div>
+     <div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 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-3">
+         <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">
+          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+           <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+          </svg>
+          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+           <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+            <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+             <path data-cap="butt" d="M11.992,11.737,14.2,13.4A2,2,0,0,1,15,15v1H7V15a2,2,0,0,1,.8-1.6l2.208-1.663" stroke="#3b82f6"></path>
+             <rect x="9" y="7" width="4" height="5" rx="2" ry="2" stroke="#3b82f6"></rect>
+             <path d="M2,1H18a2,2,0,0,1,2,2V21a2,2,0,0,1-2,2H2Z"></path>
+             <line x1="23" y1="5" x2="23" y2="9" stroke="#3b82f6"></line>
+            </g>
+           </svg>
           </div>
+          <select class="pl-10 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>
+     <div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 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-3">
+         <p class="text-sm text-coolGray-800 dark:text-white font-semibold">Swap Type</p>
+        </div>
+        <div class="w-full md:flex-1 p-3">
+         <div class="relative">
+          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+           <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+          </svg>
+          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+           <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+            <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+             <path data-cap="butt" d="M11.992,11.737,14.2,13.4A2,2,0,0,1,15,15v1H7V15a2,2,0,0,1,.8-1.6l2.208-1.663" stroke="#3b82f6"></path>
+             <rect x="9" y="7" width="4" height="5" rx="2" ry="2" stroke="#3b82f6"></rect>
+             <path d="M2,1H18a2,2,0,0,1,2,2V21a2,2,0,0,1-2,2H2Z"></path>
+             <line x1="23" y1="5" x2="23" y2="9" stroke="#3b82f6"></line>
+            </g>
+           </svg>
+          </div>
+          <select class="pl-10 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="swap_type" id="swap_type">
+            {% for a in swap_types %}
+            <option{% if data.swap_type==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[1] }}</option>
+            {% endfor %}
+          </select>
+         </div>
+        </div>
+       </div>
+      </div>
+     </div>
+
+<div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 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-3">
+    <p class="text-sm text-coolGray-800 dark:text-white font-semibold">You Send</p>
+   </div>
+   <div class="w-full md:flex-1 p-3">
+    <div class="flex flex-wrap -m-3">
+     <div class="w-full md:w-1/2 p-3">
+      <div class="custom-select">
+       <div class="relative">
+        <svg class="absolute right-4 top-1/2 transform -translate-y-1/2 z-50" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+         <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+        </svg>
+        <select class="select 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-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" id="coin_from" name="coin_from" onchange="set_rate('coin_from');">
+         <option value="-1">Select coin you send</option>
+         {% for c in coins_from %}
+         <option{% if data.coin_from==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}-20.png">{{ c[1] }}</option>
+          {% endfor %}
+        </select>
+        <div class="select-dropdown">
+         <img class="select-icon" src="" alt="">
+         <img class="select-image" src="" alt="">
+        </div>
+       </div>
+      </div>
+     </div>
+     <div class="w-full md:w-1/2 p-3">
+      <div class="relative">
+       <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+        <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+         <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+          <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
+          <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
+          <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
+          <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
+          <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
+         </g>
+        </svg>
+       </div>
+       <input class="pl-10 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-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" placeholder="Amount you send" type="text" id="amt_from" name="amt_from" value="{{ data.amt_from }}" onchange="set_rate('amt_from');">
+      </div>
+     </div>
+    </div>
+   </div>
+  </div>
+ </div>
+</div>
+<div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 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-3">
+    <p class="text-sm text-coolGray-800 dark:text-white font-semibold">You Get</p>
+   </div>
+   <div class="w-full md:flex-1 p-3">
+    <div class="flex flex-wrap -m-3">
+     <div class="w-full md:w-1/2 p-3">
+      <div class="custom-select">
+       <div class="relative">
+        <svg class="absolute right-4 top-1/2 transform -translate-y-1/2 z-50" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+         <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+        </svg>
+        <select class="select 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-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0"" id="coin_to" name="coin_to" onchange="set_rate('coin_to');">
+         <option class="no-space" value="-1">Select coin you get</option>
+         {% for c in coins %}
+         <option{% if data.coin_to==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}-20.png">{{ c[1] }}</option>{% endfor %}
+        </select>
+        <div class="select-dropdown">
+         <img class="select-icon" src="" alt="">
+         <img class="select-image" src="" alt="">
+        </div>
+       </div>
+      </div>
+     </div>
+     <div class="w-full md:w-1/2 p-3">
+      <div class="relative">
+       <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+        <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+         <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+          <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
+          <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
+          <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
+          <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
+          <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
+         </g>
+        </svg>
+       </div>
+       <input class="pl-10 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-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" placeholder="Amount you get" type="text" id="amt_to" name="amt_to" value="{{ data.amt_to }}" onchange="set_rate('amt_to');">
+      </div>
+     </div>
+    </div>
+   </div>
+  </div>
+ </div>
+</div>
+<div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 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-3">
+    <p class="text-sm text-coolGray-800 dark:text-white font-semibold">Bid Amount</p>
+   </div>
+   <div class="w-full md:flex-1 p-3">
+    <div class="flex flex-wrap -m-3">
+     <div class="w-full md:w-1/2 p-3">
+      <p class="mb-1.5 font-medium text-base dark:text-white text-coolGray-800">Minimum Bid Amount</p>
+      <div class="relative">
+       <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+        <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+         <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+          <rect x="9.843" y="5.379" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -0.7635 13.1569)" width="11.314" height="4.243"></rect>
+          <polyline points="3,23 3,19 15,19 15,23 "></polyline>
+          <line x1="4" y1="15" x2="1" y2="15" stroke="#3b82f6"></line>
+          <line x1="5.757" y1="10.757" x2="3.636" y2="8.636" stroke="#3b82f6"></line>
+          <line x1="1" y1="23" x2="17" y2="23"></line>
+          <line x1="17" y1="9" x2="23" y2="15"></line>
+         </g>
+        </svg>
+       </div>
+       <input class="pl-10 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" type="text" id="amt_bid_min" name="amt_bid_min" value="{{ data.amt_bid_min }}" title="Bids with an amount below the minimum bid value will be discarded">
+      </div>
+     </div>
+     <div class="w-full md:w-1/2 p-3">
+      <p class="mb-1.5 font-medium text-base dark:text-white text-coolGray-800">Rate</p>
+      <div class="relative">
+       <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+        <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+         <g fill="#3b82f6">
+          <path d="M9,9h5L7,0,0,9H5V23a1,1,0,0,0,1,1H8a1,1,0,0,0,1-1Z" fill="#3b82f6"></path>
+          <path d="M14,17a3,3,0,1,1,3-3A3,3,0,0,1,14,17Zm0-4a1,1,0,1,0,1,1A1,1,0,0,0,14,13Z" data-color="color-2"></path>
+          <path d="M21,24a3,3,0,1,1,3-3A3,3,0,0,1,21,24Zm0-4a1,1,0,1,0,1,1A1,1,0,0,0,21,20Z" data-color="color-2"></path>
+          <path d="M13,23a1,1,0,0,1-.707-1.707l9-9a1,1,0,0,1,1.414,1.414l-9,9A1,1,0,0,1,13,23Z" data-color="color-2"></path>
+         </g>
+        </svg>
+       </div>
+       <input class="pl-10 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" type="text" id="rate" name="rate" value="{{ data.rate }}" onchange="set_rate('rate');">
+      </div>
+      <div class="form-check form-check-inline mt-5">
+       <input class="form-check-input hover:border-blue-500 w-5 h-5 form-check-input text-blue-600 bg-gray-50 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-1 dark:bg-gray-500 dark:border-gray-400" type="checkbox" id="rate_lock" name="rate_lock" value="rl" checked=checked>
+       <label class="form-check-label ml-2 text-sm font-medium text-gray-800 dark:text-white" for="inlineCheckbox1">Lock Rate</label>
+      </div>
+     </div>
+    </div>
+   </div>
+  </div>
+ </div>
+</div>
+<div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 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-3">
+    <p class="text-sm text-coolGray-800 dark:text-white font-semibold">Options</p>
+   </div>
+   <div class="w-full md:flex-1 p-3">
+    <div class="form-check form-check-inline">
+     <input class="hover:border-blue-500 w-5 h-5 form-check-input text-blue-600 bg-gray-50 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-1 dark:bg-gray-500 dark:border-gray-400" type="checkbox" id="amt_var" name="amt_var" value="av" {% if data.amt_var==true %} checked="checked" {% endif %}>
+     <label class="form-check-label ml-2 text-sm font-medium text-gray-800 dark:text-white" for="inlineCheckbox2">Amount Variable</label>
+    </div>
+    <div class="form-check form-check-inline mt-2">
+     <input class="hover:border-blue-500 w-5 h-5 form-check-input text-blue-600 bg-gray-50 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-1 dark:bg-gray-500 dark:border-gray-400" type="checkbox" id="rate_var" name="rate_var" value="rv" {% if data.rate_var==true %} checked="checked" {% endif %}>
+     <label class="form-check-label ml-2 text-sm font-medium text-gray-800 dark:text-white" for="inlineCheckbox3">Rate Variable</label>
+    </div>
+   </div>
+  </div>
+ </div>
+</div>
+<div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 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-3">
+    <p class="text-sm text-coolGray-800 dark:text-white font-semibold">Rates</p>
+   </div>
+   <div class="w-full md:flex-1 p-3 dark:text-white text-sm monospace">
+    <p id="rates_display"></p>
+    <!-- todo adjust font-size -->
+   </div>
+  </div>
+ </div>
+</div>
+</div>
+</div>
+</section>
+<section>
+ <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+  <div class="pb-6 border-coolGray-100">
+   <div class="flex flex-wrap items-center justify-between -m-2">
+    <div class="w-full pt-2">
+     <div class="container mt-5 mx-auto">
+      <div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+       <div class="px-6">
+        <div class="flex flex-wrap justify-end">
+         <!--<div class="w-full md:w-auto p-1.5"><button name="show_rates_table" type="button" value="Show Rates Table" onclick='lookup_rates_table();' 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"><svg class="mr-2"
+          xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"><g fill="#556987"><path fill="#556987" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path><path data-color="#556987" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path></g></svg><span>Show Rates Table</span></button></div>-->
+         <div class="w-full md:w-auto p-1.5">
+          <button name="check_rates" type="button" value="Lookup Rates (RAW)" onclick='lookup_rates();' 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 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"><span>Check Current Rates</span>
+          </button>
+         </div>
+         <div class="w-full md:w-auto p-1.5">
+          <button name="continue" value="Continue" 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">
+           <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+            <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
+             <circle cx="12" cy="12" r="11"></circle>
+             <polyline points="11 8 15 12 11 16" stroke="#ffffff"></polyline>
+            </g>
+           </svg>
+           <span>Continue</span>
+          </button>
+         </div>
+         <input type="hidden" name="formid" value="{{ form_id }}">
+         <input type="hidden" name="step1" value="a">
+         </form>
         </div>
+       </div>
       </div>
+     </div>
     </div>
-  </section>
-  <script>
+   </div>
+  </div>
+ </div>
+</section>
+<style>
+select.select-disabled {
+opacity: 0.50 !important;
+}
+</style>
+<script>
     const xhr_rates = new XMLHttpRequest();
     xhr_rates.onload = () => {
       if (xhr_rates.status == 200) {
@@ -477,13 +509,16 @@
         swap_type.disabled = true;
         swap_type.value = 'xmr_swap';
         make_hidden = true;
+        swap_type.classList.add('select-disabled'); // Add the class to the disabled select
       } else
       if (coin_from == '11' /* PIVX */ || coin_from == '12' /* DASH */ || coin_from == '13' /* FIRO */) {
         swap_type.disabled = true;
         swap_type.value = 'seller_first';
         make_hidden = true;
+        swap_type.classList.add('select-disabled'); // Add the class to the disabled select
       } else {
         swap_type.disabled = false;
+        swap_type.classList.remove('select-disabled'); // Remove the class from the enabled select
       }
       let swap_type_hidden = document.getElementById('swap_type_hidden');
       if (make_hidden) {
@@ -544,10 +579,12 @@
       const swap_type = document.getElementById('swap_type');
       set_swap_type_enabled(coin_from, coin_to, swap_type);
     });
-  </script>
-  <script src="static/js/new_offer.js"></script>
+</script>
+<script src="static/js/new_offer.js"></script>
+<script src="static/js/coin_icons.js"></script>
+<script src="static/js/coin_icons_2.js"></script>
 </div>
 {% include 'footer.html' %}
 </div>
 </body>
-</html>
+</html>

basicswap/templates/rpc.html

@@ -1,125 +1,179 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
-    <div class="flex flex-wrap items-center -m-2">
-      <div class="w-full md:w-1/2 p-2">
-        <ul class="flex flex-wrap items-center gap-x-3 mb-2">
-          <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
-              <p>Home</p>
-            </a>
-          </li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/rpc">RPC Console</a></li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-        </ul>
+ <section class="p-5 mt-5">
+  <div class="flex flex-wrap items-center -m-2">
+   <div class="w-full md:w-1/2 p-2">
+    <ul class="flex flex-wrap items-center gap-x-3 mb-2">
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
+       <p>Home</p>
+      </a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/rpc">RPC Console</a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+    </ul>
+   </div>
+  </div>
+ </section>
+ <section class="py-4">
+  <div class="container px-4 mx-auto">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
+    <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+    <div class="relative z-20 flex flex-wrap items-center -m-3">
+     <div class="w-full md:w-1/2 p-3">
+      <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">RPC Console</h2>
+      <p class="font-normal text-coolGray-200 dark:text-white">Manage your BasicSwap client and coins settings.</p>
+     </div>
+    </div>
+   </div>
+  </div>
+ </section>
+ {% include 'inc_messages.html' %}
+ <section>
+  <form method="post" autocomplete="off">
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+    <div class="border-coolGray-100">
+     <div class="flex flex-wrap items-center justify-between -m-2">
+      <div class="w-full pt-2">
+       <div class="container mt-5 mx-auto">
+        <div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+         <div class="px-6">
+          <div class="w-full mt-6 pb-6 overflow-x-auto">
+           <table class="w-full min-w-max text-sm">
+            <thead class="uppercase">
+             <tr class="text-left">
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Options</span>
+               </div>
+              </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">RPC Console Input</span>
+               </div>
+              </th>
+             </tr>
+            </thead>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6">
+              <div class="relative">
+               <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+               </svg>
+               <select class="hover:border-blue-500 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="coin_type">
+                <option value="-1" {% if coin_type==-1 %} selected{% endif %}>Select Coin</option>
+                {% for c in coins %}
+                <option value="{{ c[0] }}" {% if coin_type==c[0] %} selected{% endif %}>{{ c[1] }}</option>
+                {% endfor %}
+               </select>
+              </div>
+             </td>
+             <td class="py-3 px-6">
+              <input class="hover:border-blue-500 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" type="text" name="cmd">
+             </td>
+            </tr>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6">
+              <div class="relative">
+               <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+               </svg>
+               <select class="hover:border-blue-500 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="call_type">
+                <option value="cli" {% if call_type=="cli" %} selected{% endif %}>CLI</option>
+                <option value="http" {% if call_type=="http" %} selected{% endif %}>HTTP</option>
+               </select>
+              </div>
+             </td>
+             <td class="py-3 px-6">
+              <input class="hover:border-blue-500 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" type="text" name="type_map">
+             </td>
+           </table>
+          </div>
+         </div>
+        </div>
+       </div>
       </div>
+     </div>
     </div>
-  </section>
-  <section class="py-4">
-    <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
-        <div class="relative z-20 flex flex-wrap items-center -m-3">
-          <div class="w-full md:w-1/2 p-3">
-            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">RPC Console</h2>
-            <p class="font-semibold text-coolGray-200">Manage your BasicSwap client and coins settings.</p>
+   </div>
+ </section>
+ <input type="hidden" name="formid" value="{{ form_id }}">
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+   <div class="pb-6 ">
+    <div class="flex flex-wrap items-center justify-between -m-2">
+     <div class="w-full pt-2">
+      <div class="container mx-auto">
+       <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+        <div class="px-6">
+         <div class="flex flex-wrap justify-end">
+          <div class="w-full md:w-auto p-1.5 ml-2">
+           <button name="" value="Apply" 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">
+            <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+             <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
+              <polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline>
+              <circle cx="12" cy="12" r="11"></circle>
+             </g>
+            </svg>Apply </button>
           </div>
+         </div>
         </div>
+       </div>
       </div>
+     </div>
     </div>
-  </section>
-  {% include 'inc_messages.html' %}
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
-      <div class="pb-6 border-coolGray-100">
-        <div class="flex flex-wrap items-center justify-between -m-2">
-          <div class="w-full pt-2">
-            <div class="container px-0 mx-auto mt-2">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <form method="post" autocomplete="off">
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                      <tr>
-                        <th scope="col" class="py-3 px-6">Select Option</th>
-                        <th scope="col">RPC Console Input</th>
-                      </tr>
-                    </thead>
-                    <tr class="bg-white border-t">
-                      <td class="py-4 px-6 w-1/3 bold">
-                        <div class="relative">
-                          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-                          </svg>
-                          <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="coin_type">
-                            <option value="-1" {% if coin_type==-1 %} selected{% endif %}>Select Coin</option>
-                            {% for c in coins %}
-                            <option value="{{ c[0] }}" {% if coin_type==c[0] %} selected{% endif %}>{{ c[1] }}</option>
-                          {% endfor %}
-                        </select>
-                        </div>
-                      </td>
-                      <td class="py-4 pr-5 w-2/3">
-                        <input class="w-full aappearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 w-full block p-2.5" type="text" name="cmd">
-                      </td>
-                    </tr>
-                    <tr>
-                      <td class="py-4 px-6 w-1/3 bold">
-                      <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="call_type">
-                        <option value="cli" {% if call_type=="cli" %} selected{% endif %}>CLI</option>
-                        <option value="http" {% if call_type=="http" %} selected{% endif %}>HTTP</option>
-                      </select>
-                      </td>
-                      <td class="py-4 pr-5 w-2/3">
-                        <input class="w-full aappearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 w-full block p-2.5" type="text" name="type_map">
-                      </td>
-                  </table>
+   </div>
+  </div>
+ </section>
+ {% if result %}
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+   <div class="border-coolGray-100">
+    <div class="flex flex-wrap items-center justify-between -m-2">
+     <div class="w-full pt-2">
+      <div class="container mt-5 mx-auto">
+       <div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+        <div class="px-6">
+         <div class="w-full mt-6 pb-6 overflow-x-auto">
+          <table class="w-full min-w-max text-sm">
+           <thead class="uppercase">
+            <tr class="text-left">
+             <th class="p-0">
+              <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">RPC Console Output</span>
               </div>
-            </div>
-            <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
-              <div class="w-full md:w-0/12">
-                <div class="flex flex-wrap justify-end -m-1.5">
-                               <div class="w-full md:w-auto p-1.5 ml-2">
-                          <button name="" value="Apply" 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"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>Apply</button>
-                        </div>
-                </div>
-              </div>
-            </div>
-            <input type="hidden" name="formid" value="{{ form_id }}">{% if result %}
-            <div class="container px-0 mx-auto mt-5">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                    <tr>
-                      <th scope="col" class="py-3 px-6">RPC console output:</th>
-                    </tr>
-                  </thead>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 pl-5 pr-5">
-                      <textarea class="wwhitespace-pre-line outline-none block p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 w-full monospace" rows="15">{{ result }}</textarea>
-                    </td>
-                  </tr>
-                </table>
-              </div>
-            </div>
-          {% endif %}
-        </form>
-          </div>
+             </th>
+            </tr>
+           </thead>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+            <td class="py-3 px-6">
+             <textarea class="hover:border-blue-500 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" rows="20">{{ result }}</textarea>
+            </td>
+           </tr>
+          </table>
+         </div>
         </div>
+        {% endif %}
+        </form>
+       </div>
       </div>
+     </div>
     </div>
-  </section>
+ </section>
 </div>
 {% include 'footer.html' %}
 </body>
-</html>
+</html>

basicswap/templates/settings.html

@@ -1,445 +1,560 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
-    <div class="flex flex-wrap items-center -m-2">
-      <div class="w-full md:w-1/2 p-2">
-        <ul class="flex flex-wrap items-center gap-x-3 mb-2">
-          <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
-              <p>Home</p>
-            </a>
-          </li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/settings">Settings</a></li>
-          <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-          </svg>
-        </ul>
+ <section class="p-5 mt-5">
+  <div class="flex flex-wrap items-center -m-2">
+   <div class="w-full md:w-1/2 p-2">
+    <ul class="flex flex-wrap items-center gap-x-3 mb-2">
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
+       <p>Home</p>
+      </a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/settings">Settings</a>
+     </li>
+     <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+     </svg>
+    </ul>
+   </div>
+  </div>
+ </section>
+ <section class="py-3">
+  <div class="container px-4 mx-auto">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
+    <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+    <div class="relative z-20 flex flex-wrap items-center -m-3">
+     <div class="w-full md:w-1/2 p-3">
+      <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Settings</h2>
+      <p class="font-normal text-coolGray-200 dark:text-white">Manage your BasicSwap client and coins settings.</p>
+     </div>
+    </div>
+   </div>
+  </div>
+ </section>
+ {% include 'inc_messages.html' %}
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-6 mt-5 h-full overflow-hidden">
+   <div class="pb-6">
+    <div class="flex flex-wrap items-center justify-between -m-2">
+     <div class="w-full pt-2">
+      <div class="text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700">
+       <ul class="flex flex-wrap -mb-px" id="myTab" data-tabs-toggle="#settingstab" role="tablist">
+        <li class="mr-2" role="presentation">
+         <a class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="profile-tab" data-tabs-target="#coins" role="tab" aria-controls="coins" aria-selected={% if active_tab == 'default' %}"true"{% else %}"false"{% endif %}>Coins</a>
+        </li>
+        <li class="mr-2" role="presentation">
+         <a class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="general-tab" data-tabs-target="#general" role="tab" aria-controls="general" aria-selected={% if active_tab == 'general' %}"true"{% else %}"false"{% endif %}>General</a>
+        </li>
+        <li class="mr-2" role="presentation">
+         <a class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="tor-tab" data-tabs-target="#tor" role="tab" aria-controls="tor" aria-selected={% if active_tab == 'tor' %}"true"{% else %}"false"{% endif %}>Tor</a>
+        </li>
+       </ul>
+      </div>
+     </div>
+    </div>
+   </div>
+  </div>
+ </section>
+ <div id="settingstab">
+  <div class="hidden rounded-lg" id="coins" role="tabpanel" aria-labelledby="coins-tab">
+   <form method="post">
+    {% for c in chains %}
+    <section class="pl-6">
+     <div class="flex flex-wrap items-center">
+      <div class="w-full">
+       <h4 class="font-semibold text-black dark:text-white text-2xl align-middle">
+        <span class="mr-2 inline-block align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
+         <img class="h-9" src="/static/images/coins/{{ c.name }}.png" alt="">
+        </span>
+    {{ c.display_name }}
+       </h4>
+      </div>
+     </div>
+    </section>
+    <section>
+     <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+      <div class="border-coolGray-100">
+       <div class="flex flex-wrap items-center justify-between -m-2">
+        <div class="w-full pt-2">
+         <div class="container mt-5 mx-auto">
+          <div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+           <div class="px-6">
+            <div class="w-full mt-6 pb-6 overflow-x-auto">
+             <table class="w-full min-w-max text-sm">
+              <thead class="uppercase">
+               <tr class="text-left">
+                <th class="p-0">
+                 <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+                  <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Options</span>
+                 </div>
+                </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>
+                 </div>
+                </th>
+               </tr>
+              </thead>
+              {% if c.connection_type %}
+              <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">Connection Type</td>
+               <td class="py-3 px-6">{{ c.connection_type }}</td>
+              </tr>
+              {% endif %}
+              {% if c.manage_daemon is defined %}
+              {% if c.name == 'monero' %}
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+               <td class="py-3 px-6 bold">Manage Daemon</td>
+               <td class="py-3 px-6">
+                <div class="relative">
+                 <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+                 </svg>
+                 <select class="hover:border-blue-500 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-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="managedaemon_{{ c.name }}">
+                  <option value="true" {% if c.manage_daemon==true %} selected{% endif %}>True</option>
+                  <option value="false" {% if c.manage_daemon==false %} selected{% endif %}>False</option>
+                 </select>
+                </div>
+               </td>
+              </tr>
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+               <td class="py-3 px-6 bold">Daemon RPC Host</td>
+               <td class="py-3 px-6">
+                <input type="text" class="hover:border-blue-500 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-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="rpchost_{{ c.name }}" value="{{ c.rpchost }}">
+               </td>
+              </tr>
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+               <td class="py-3 px-6 bold">Daemon RPC Port</td>
+               <td class="py-3 px-6">
+                <input type="text" class="hover:border-blue-500 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-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="rpcport_{{ c.name }}" value="{{ c.rpcport }}">
+               </td>
+              </tr>
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+               <td class="py-3 px-6 bold">List trusted public nodes to use if “Automatically Select Daemon” is set as “True”.</td>
+               <td class="py-3 px-6">
+                <textarea class="hover:border-blue-500 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-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" placeholder="(Add one entry per line) eg: node.xmr.to:18081" name="remotedaemonurls_{{ c.name }}" rows="4" cols="45">{{ c.remotedaemonurls }}</textarea>
+               </td>
+              </tr>
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+               <td class="py-3 px-6 bold">Automatically Select Daemon</td>
+               <td class="py-3 px-6">
+                <div class="w-52 md:flex-1">
+                 <div class="relative">
+                  <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                   <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+                  </svg>
+                  <select class="hover:border-blue-500 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-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="autosetdaemon_{{ c.name }}">
+                   <option value="true" {% if c.autosetdaemon==true %} selected{% endif %}>True</option>
+                   <option value="false" {% if c.autosetdaemon==false %} selected{% endif %}>False</option>
+                  </select>
+                 </div>
+                </div>
+               </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="py-3 px-6 bold">Manage Daemon</td>
+               <td class="py-3 px-6">{{ c.manage_daemon }}</td>
+              </tr>
+              {% endif %}
+              {% endif %}
+              {% if c.manage_wallet_daemon is defined %}
+              <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">Manage Wallet Daemon</td>
+               <td class="py-3 px-6">{{ c.manage_wallet_daemon }}</td>
+              </tr>
+              {% endif %}
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+               <td class="py-3 px-6 bold">Chain Lookups</td>
+               <td class="py-3 px-6">
+                <div class="relative">
+                 <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+                 </svg>
+                 <select class="hover:border-blue-500 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-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="lookups_{{ c.name }}">
+                  <option value="local" {% if c.lookups=='local' %} selected{% endif %}>Local Node</option>
+                  <option value="explorer" {% if c.lookups=='explorer' %} selected{% endif %}>Explorer</option>
+                 </select>
+                </div>
+               </td>
+              </tr>
+              {% if c.name == 'monero' %}
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+               <td class="py-3 px-6 bold">Transaction Fee Priority</td>
+               <td class="py-3 px-6">
+                <div class="relative">
+                 <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+                 </svg>
+                 <select class="hover:border-blue-500 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-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="fee_priority_{{ c.name }}">
+                  <option value="0" {% if c.fee_priority==0 %} selected{% endif %}>Default</option>
+                  <option value="1" {% if c.fee_priority==1 %} selected{% endif %}>Low</option>
+                  <option value="2" {% if c.fee_priority==2 %} selected{% endif %}>Medium</option>
+                  <option value="3" {% if c.fee_priority==3 %} selected{% endif %}>High</option>
+                 </select>
+                </div>
+               </td>
+              </tr>
+              {% else %}
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+               <td class="py-3 px-6 bold">Blocks Confirmed Target</td>
+               <td class="py-3 px-6">
+                <input type="number" class="hover:border-blue-500 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-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="conf_target_{{ c.name }}" min="1" max="32" value="{{ c.conf_target }}">
+               </td>
+              </tr>
+              {% endif %}
+              {% if c.name == 'particl' %}
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+               <td class="py-3 px-6 bold">Anon Tx Ring Size</td>
+               <td class="py-3 px-6">
+                <input type="number" class="hover:border-blue-500 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-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="rct_ring_size_{{ c.name }}" min="3" max="32" value="{{ c.anon_tx_ring_size }}">
+               </td>
+              </tr>
+              {% endif %}
+             </table>
+            </div>
+           </div>
+          </div>
+         </div>
+    </section>
+    <section>
+     <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+      <div class="pb-6 ">
+       <div class="flex flex-wrap items-center justify-between -m-2">
+        <div class="w-full pt-2">
+         <div class="container mx-auto">
+          <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+           <div class="px-6">
+            <div class="flex flex-wrap justify-end">
+             <div class="w-full md:w-auto p-1.5 ml-2">
+              <button name="apply_{{ c.name }}" value="Apply" 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">Apply</button>
+             </div>
+             {% if c.can_disable == true %}
+             <div class="w-full md:w-auto p-1.5 ml-2">
+              <button name="disable_{{ c.name }}" value="Disable" onclick="return confirmPopup('Disable', '{{ c.display_name }}');" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-red-500 hover:bg-red-600 font-medium text-sm text-white border border-red-500 rounded-md shadow-button focus:ring-0 focus:outline-none">Disable Coin</button>
+             </div>
+             {% endif %}
+             {% if c.can_reenable == true %}
+             <div class="w-full md:w-auto p-1.5 ml-2">
+              <button name="enable_{{ c.name }}" value="Enable" onclick="return confirmPopup('Enable', '{{ c.display_name }}');" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-green-500 hover:bg-green-600 font-medium text-sm text-white border border-green-500 rounded-md shadow-button focus:ring-0 focus:outline-none">Enable</button>
+             </div>
+             {% endif %}
+            </div>
+           </div>
+          </div>
+         </div>
+        </div>
+       </div>
       </div>
+     </div>
+    </section>
+    {% endfor %}
+    <input type="hidden" name="formid" value="{{ form_id }}">
+  </div>
+  <div class="hidden rounded-lg" id="general" role="tabpanel" aria-labelledby="general-tab">
+   <section class="pl-6">
+    <div class="flex flex-wrap items-center">
+     <div class="w-full">
+      <h4 class="font-semibold text-black dark:text-white text-2xl align-middle">
+       <span class="mr-2 inline-block align-middle items-center justify-center w-0 h-10 bg-white-50 rounded">
+       </span>General
+      </h4>
+     </div>
     </div>
-  </section>
-  <section class="py-4">
-    <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
-        <div class="relative z-20 flex flex-wrap items-center -m-3">
-          <div class="w-full md:w-1/2 p-3">
-            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Settings</h2>
-            <p class="font-semibold text-coolGray-200">Manage your BasicSwap client and coins settings.</p>
+   </section>
+   <section>
+    <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+     <div class="border-coolGray-100">
+      <div class="flex flex-wrap items-center justify-between -m-2">
+       <div class="w-full pt-2">
+        <div class="container mt-5 mx-auto">
+         <div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+          <div class="px-6">
+           <div class="w-full mt-6 pb-6 overflow-x-auto">
+            <table class="w-full min-w-max text-sm">
+             <thead class="uppercase">
+              <tr class="text-left">
+               <th class="p-0">
+                <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+                 <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Options</span>
+                </div>
+               </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>
+                </div>
+               </th>
+              </tr>
+             </thead>
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+              <td class="py-3 px-6 bold w-96 bold">Debug Mode</td>
+              <td class="py-3 px-6">
+               <div class="relative">
+                <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                 <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+                </svg>
+                <select name="debugmode" class="hover:border-blue-500 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-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0">
+                 <option {% if general_settings.debug %}selected{% endif %} value="true">True</option>
+                 <option {% if not general_settings.debug %}selected{% endif %} value="false">False</option>
+                </select>
+               </div>
+              </td>
+             </tr>
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+              <td class="py-3 px-6 bold">Debug Mode UI</td>
+              <td class="py-3 px-6">
+               <div class="relative">
+                <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                 <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+                </svg>
+                <select name="debugui" class="hover:border-blue-500 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-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0">
+                 <option {% if general_settings.debug_ui %}selected{% endif %} value="true">True</option>
+                 <option {% if not general_settings.debug_ui %}selected{% endif %} value="false">False</option>
+                </select>
+               </div>
+              </td>
+             </tr>
+            </table>
+           </div>
           </div>
+         </div>
         </div>
+       </div>
       </div>
+     </div>
     </div>
-  </section>
-  {% include 'inc_messages.html' %}
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white">
-      <div class="pb-6 border-coolGray-100">
-        <div class="flex flex-wrap items-center justify-between -m-2">
-          <div class="w-full pt-2">
-            <div class="mb-10 border-b border-gray-200">
-              <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="myTab" data-tabs-toggle="#settingstab" role="tablist">
-                <li class="mr-2" role="presentation"> <a class="cursor-pointer inline-block p-4 rounded-t-lg border-b-2" id="profile-tab" data-tabs-target="#coins" role="tab" aria-controls="coins" aria-selected={% if active_tab == 'default' %}"true"{% else %}"false"{% endif %}>Coins</a> </li>
-                <li class="mr-2" role="presentation"> <a class="cursor-pointer inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300" id="general-tab" data-tabs-target="#general" role="tab" aria-controls="general" aria-selected={% if active_tab == 'general' %}"true"{% else %}"false"{% endif %}>General</a> </li>
-                <li class="mr-2" role="presentation"> <a class="cursor-pointer inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300" id="tor-tab" data-tabs-target="#tor" role="tab" aria-controls="tor" aria-selected={% if active_tab == 'tor' %}"true"{% else %}"false"{% endif %}>Tor</a> </li>
-              </ul>
+   </section>
+   <section>
+    <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+     <div class="pb-6 ">
+      <div class="flex flex-wrap items-center justify-between -m-2">
+       <div class="w-full pt-2">
+        <div class="container mx-auto">
+         <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+          <div class="px-6">
+           <div class="flex flex-wrap justify-end">
+            <div class="w-full md:w-auto p-1.5 ml-2">
+             <button name="apply_general" value="Apply" 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">Apply</button>
             </div>
-            <div id="settingstab">
-              <div class="hidden rounded-lg" id="coins" role="tabpanel" aria-labelledby="coins-tab">
-                <form method="post">
-                {% for c in chains %}
-                  <section class="bg-white pl-3">
-                    <div class="flex flex-wrap items-center">
-                      <div class="w-full">
-                        <h4 class="font-semibold text-black text-2xl align-middle">
-             <span class="mr-2 inline-block align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
-              <img class="h-9" src="/static/images/coins/{{ c.name }}.png" alt="">
-             </span>{{ c.display_name }}
-            </h4></div>
-                    </div>
-                  </section>
-                  <div class="container px-0 mx-auto mt-5">
-                    <div class="overflow-x-auto relative border sm:rounded-lg">
-                      <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                        <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none">
-                          <tr>
-                            <th scope="col" class="py-3 px-6">Settings</th>
-                            <th scope="col">Value</th>
-                          </tr>
-                        </thead>
-                        {% if c.connection_type %}
-                        <tr>
-                          <td class="py-4 px-6 bold w-96 bold">Connection Type</td>
-                          <td class="py-4">{{ c.connection_type }}</td>
-                        </tr> {% endif %}
-                        {% if c.manage_daemon is defined %} {% if c.name == 'monero' %}
-                        <tr class="bg-white border-t hover:bg-gray-50">
-                          <td class="py-4 px-6 bold">Manage Daemon</td>
-                          <td class="py-4 pr-5">
-                            <div class="w-52 md:flex-1">
-                              <div class="relative">
-                                <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                  <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
-                                </svg>
-                                <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="managedaemon_{{ c.name }}">
-                                  <option value="true" {% if c.manage_daemon==true %} selected{% endif %}>True</option>
-                                  <option value="false" {% if c.manage_daemon==false %} selected{% endif %}>False</option>
-                                </select>
-                              </div>
-                            </div>
-                          </td>
-                        </tr>
-                        <tr class="bg-white border-t hover:bg-gray-50">
-                          <td class="py-4 px-6 bold">Daemon RPC Host</td>
-                          <td class="py-4 pr-5">
-                            <input type="text" class="w-52 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="rpchost_{{ c.name }}" value="{{ c.rpchost }}"> </td>
-                        </tr>
-                        <tr class="bg-white border-t hover:bg-gray-50">
-                          <td class="py-4 px-6 bold">Daemon RPC Port</td>
-                          <td class="py-4 pr-5">
-                            <input type="text" class="w-52 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="rpcport_{{ c.name }}" value="{{ c.rpcport }}"> </td>
-                        </tr>
-                        <tr class="bg-white border-t hover:bg-gray-50">
-                          <td class="py-4 px-6" colspan=2>
-                            <label for="message" class="block mb-2 text-sm font-medium text-gray-900">List trusted public nodes to use if “Automatically Select Daemon” is set as “True”.
-                              <br /> </label>
-                            <textarea class="outline-none block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 monospace" placeholder="(Add one entry per line) eg: node.xmr.to:18081" name="remotedaemonurls_{{ c.name }}" rows="4" cols="100">{{ c.remotedaemonurls }}</textarea>
-                          </td>
-                        </tr>
-                        <tr class="bg-white border-t hover:bg-gray-50">
-                          <td class="py-4 px-6 bold w-96 bold">Automatically Select Daemon</td>
-                          <td class="py-4 pr-5">
-                            <div class="w-52 md:flex-1">
-                              <div class="relative">
-                                <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                  <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
-                                </svg>
-                                <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="autosetdaemon_{{ c.name }}">
-                                  <option value="true" {% if c.autosetdaemon==true %} selected{% endif %}>True</option>
-                                  <option value="false" {% if c.autosetdaemon==false %} selected{% endif %}>False</option>
-                                </select>
-                              </div>
-                            </div>
-                          </td>
-                        </tr>
-                        {% else %}
-                        <tr class="bg-white border-t hover:bg-gray-50">
-                          <td class="py-4 px-6 bold bold">Manage Daemon</td>
-                          <td>{{ c.manage_daemon }}</td>
-                        </tr>
-                        {% endif %}
-                        {% endif %}
-                        {% if c.manage_wallet_daemon is defined %}
-                        <tr class="bg-white border-t hover:bg-gray-50">
-                          <td class="py-4 px-6 bold bold">Manage Wallet Daemon</td>
-                          <td>{{ c.manage_wallet_daemon }}</td>
-                        </tr>
-                        {% endif %}
-                        <tr class="bg-white border-t hover:bg-gray-50">
-                          <td class="py-4 px-6 bold bold">Chain Lookups</td>
-                          <td class="py-4 pr-5">
-                            <div class="w-52 md:flex-1">
-                              <div class="relative">
-                                <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                  <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
-                                </svg>
-                                <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="lookups_{{ c.name }}">
-                                  <option value="local" {% if c.lookups=='local' %} selected{% endif %}>Local Node</option>
-                                  <option value="explorer" {% if c.lookups=='explorer' %} selected{% endif %}>Explorer</option>
-                                </select>
-                              </div>
-                            </div>
-                          </td>
-                        </tr>
-                        {% if c.name == 'monero' %}
-                        <tr class="bg-white border-t hover:bg-gray-50">
-                          <td class="py-4 px-6 bold w-96 bold">Transaction Fee Priority</td>
-                          <td class="py-4 pr-5">
-                            <div class="w-52 md:flex-1">
-                              <div class="relative">
-                                <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                  <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
-                                </svg>
-                                <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="fee_priority_{{ c.name }}">
-                                  <option value="0" {% if c.fee_priority==0 %} selected{% endif %}>Default</option>
-                                  <option value="1" {% if c.fee_priority==1 %} selected{% endif %}>Low</option>
-                                  <option value="2" {% if c.fee_priority==2 %} selected{% endif %}>Medium</option>
-                                  <option value="3" {% if c.fee_priority==3 %} selected{% endif %}>High</option>
-                                </select>
-                              </div>
-                            </div>
-                          </td>
-                        </tr>
-                        {% else %}
-                        <tr class="bg-white border-t hover:bg-gray-50">
-                          <td class="py-4 px-6 bold bold">Blocks Confirmed Target</td>
-                          <td class="py-4 pr-5">
-                            <input type="number" class="w-52 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="conf_target_{{ c.name }}" min="1" max="32" value="{{ c.conf_target }}"></td>
-                        </tr>
-                        {% endif %}
-                        {% if c.name == 'particl' %}
-                        <tr class="bg-white border-t hover:bg-gray-50">
-                          <td class="py-4 px-6 bold bold">Anon Tx Ring Size</td>
-                          <td class="py-4 pr-5">
-                            <input type="number" class="w-52 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="rct_ring_size_{{ c.name }}" min="3" max="32" value="{{ c.anon_tx_ring_size }}"></td>
-                        </tr>
-                      {% endif %}
-                    </table>
-                    </div>
-                  </div>
-                  <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
-                    <div class="w-full md:w-0/12">
-                      <div class="flex flex-wrap justify-end -m-1.5">
-                        <div class="w-full md:w-auto p-1.5 ml-2">
-                          <button name="apply_{{ c.name }}" value="Apply" 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"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>Apply</button>
-                        </div>
-                        {% if c.can_disable == true %}
-                        <div class="w-full md:w-auto p-1.5 ml-2">
-                          <button name="disable_{{ c.name }}" value="Disable" onclick="return confirmPopup('Disable', '{{ c.display_name }}');" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-red-500 hover:text-red-600 border border-red-400 hover:border-red-500 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ef5844" stroke-linejoin="round" ><line x1="16" y1="8" x2="8" y2="16" stroke="#ef5844"></line> <line x1="16" y1="16" x2="8" y2="8" stroke="#ef5844"></line> <circle cx="12" cy="12" r="11"></circle></g></svg>Disable Coin</button>
-                        </div>
-                        {% endif %}
-                        {% if c.can_reenable == true %}
-                        <div class="w-full md:w-auto p-1.5 ml-2">
-                          <button name="enable_{{ c.name }}" value="Enable" onclick="return confirmPopup('Enable', '{{ c.display_name }}');" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-white hover:bg-white font-medium text-sm text-green-500 border border-green-500 hover:text-green-600 hover:border-green-600 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#2ad167" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#2ad167"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>Enable</button>
-                        </div>
-                      {% endif %}
-                    </div>
-                    </div>
-                  </div>
-                  </table>
-                  {% endfor %}
-                  <input type="hidden" name="formid" value="{{ form_id }}"> </div>
-              <div class="hidden rounded-lg" id="general" role="tabpanel" aria-labelledby="general-tab">
-                <section class="bg-white">
-                  <div class="pl-2 pr-2 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white">
-                    <div class="pb-6 border-coolGray-100">
-                      <div class="flex flex-wrap items-center justify-between -m-2">
-                        <div class="w-full pt-2">
-                          <section class="bg-white pl-3">
-                            <div class="flex flex-wrap items-center">
-                              <div class="w-full">
-                                <h4 class="font-semibold text-black text-2xl align-middle">
-             <span class="mr-2 inline-block align-middle items-center justify-center w-8 h-7 bg-white-50 rounded">
-              <svg class="text-gray-500 w-7 h-7" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="12" cy="12" r="3" stroke="#3b82f6"></circle> <path d="M20,12a8.049,8.049,0,0,0-.188-1.713l2.714-2.055-2-3.464L17.383,6.094a7.987,7.987,0,0,0-2.961-1.719L14,1H10L9.578,4.375A7.987,7.987,0,0,0,6.617,6.094L3.474,4.768l-2,3.464,2.714,2.055a7.9,7.9,0,0,0,0,3.426L1.474,15.768l2,3.464,3.143-1.326a7.987,7.987,0,0,0,2.961,1.719L10,23h4l.422-3.375a7.987,7.987,0,0,0,2.961-1.719l3.143,1.326,2-3.464-2.714-2.055A8.049,8.049,0,0,0,20,12Z"></path></g></svg>
-             </span>General
-            </h4></div>
-                            </div>
-                          </section>
-                          <div class="container px-0 mx-auto mt-5">
-                            <div class="overflow-x-auto relative border sm:rounded-lg">
-                              <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                                <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none">
-                                  <tr>
-                                    <th scope="col" class="py-3 px-6">Settings</th>
-                                    <th scope="col">Value</th>
-                                  </tr>
-                                </thead>
-                                <tr class="bg-white border-t hover:bg-gray-50">
-                                  <td class="py-4 px-6 bold w-96 bold">Debug Mode</td>
-                                  <td class="py-4 pr-5">
-                                    <div class="w-52 md:flex-1">
-                                      <div class="relative">
-                                        <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                          <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
-                                        </svg>
-                                        <select name="debugmode" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
-                                          <option {% if general_settings.debug %}selected{% endif %} value="true">True</option>
-                                          <option {% if not general_settings.debug %}selected{% endif %} value="false">False</option>
-                                        </select>
-                                      </div>
-                                    </div>
-                                  </td>
-                                </tr>
-                                <tr class="bg-white border-t hover:bg-gray-50">
-                                  <td class="py-4 px-6 bold">Debug Mode UI</td>
-                                  <td class="py-4 pr-5">
-                                    <div class="w-52 md:flex-1">
-                                      <div class="relative">
-                                        <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                          <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
-                                        </svg>
-                                        <select name="debugui" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
-                                          <option {% if general_settings.debug_ui %}selected{% endif %} value="true">True</option>
-                                          <option {% if not general_settings.debug_ui %}selected{% endif %} value="false">False</option>
-                                        </select>
-                                      </div>
-                                    </div>
-                                  </td>
-                                </tr>
-                              </table>
-                            </div>
-                          </div>
-                          <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
-                            <div class="w-full md:w-0/12">
-                              <div class="flex flex-wrap justify-end -m-1.5">
-                              <div class="w-full md:w-auto p-1.5 ml-2">
-                          <button name="apply_general" value="Apply" 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"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>Apply</button>
-                        </div>
-                              </div>
-                            </div>
-                          </div>
-                          <section class="bg-white pl-3">
-                            <div class="flex flex-wrap items-center">
-                              <div class="w-full">
-                                <h4 class="font-semibold text-black text-2xl align-middle">
-             <span class="mr-2 inline-block align-middle items-center justify-center w-9 h-8 bg-white-50 rounded">
-              <svg class="text-gray-500 w-7 h-7" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="10" y="14" width="4" height="9"></rect> <rect x="1" y="18" width="4" height="5"></rect> <rect x="19" y="10" width="4" height="13"></rect> <polyline data-cap="butt" points="3,10 8,5 12,9 20,1 " stroke="#3b82f6"></polyline> <polyline points=" 15,1 20,1 20,6 " stroke="#3b82f6"></polyline></g></svg>
-             </span>Chart
-            </h4> </div>
-                            </div>
-                          </section>
-                          <div class="container px-0 mx-auto mt-5">
-                            <div class="overflow-x-auto relative border sm:rounded-lg">
-                              <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                                <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none">
-                                  <tr>
-                                    <th scope="col" class="py-3 px-6">Settings</th>
-                                    <th scope="col">Value</th>
-                                  </tr>
-                                </thead>
-                                <tr>
-                                  <td class="py-4 px-6 bold w-96 bold">Show Chart</td>
-                                  <td class="py-4 pr-5">
-                                    <div class="w-52 md:flex-1">
-                                      <div class="relative">
-                                        <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                          <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
-                                        </svg>
-                                        <select name="showchart" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
-                                          <option {% if chart_settings.show_chart %}selected{% endif %} value="true">True</option>
-                                          <option {% if not chart_settings.show_chart %}selected{% endif %} value="false">False</option>
-                                        </select>
-                                      </div>
-                                    </div>
-                                  </td>
-                                </tr>
-                                <tr class="bg-white border-t hover:bg-gray-50">
-                                  <td class="py-4 px-6 bold">Chart API Key</td>
-                                  <td class="py-4 pr-5">
-                                 <label for="message" class="block mb-2 text-sm font-medium text-gray-900">Chart API (free) Key at <a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="https://min-api.cryptocompare.com/" target="_blank">CryptoCompare.com</a>
-                                 <br /> </label>
-                                    <input name="chartapikey" type="text" class="w-full appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="" min="3" max="32" value="{{chart_settings.chart_api_key}}"> </td>
-                                </tr>
-                              </table>
-                            </div>
-                          </div>
-                          <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
-                            <div class="w-full md:w-0/12">
-                              <div class="flex flex-wrap justify-end -m-1.5">
-                              <div class="w-full md:w-auto p-1.5 ml-2">
-                          <button name="apply_chart" value="Apply" 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"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>Apply</button>
-                        </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-              </div>
-              <div class="hidden rounded-lg" id="tor" role="tabpanel" aria-labelledby="tor-tab">
-                <section class="bg-white">
-                  <div class="pl-2 pr-2 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
-                    <div class="pb-6 border-coolGray-100">
-                      <div class="flex flex-wrap items-center justify-between -m-2">
-                        <div class="w-full pt-2">
-                          <section class="bg-white pl-3">
-                            <div class="flex flex-wrap items-center">
-                              <div class="w-full">
-                                <h4 class="font-semibold text-black text-2xl align-middle">
-             <span class="mr-2 inline-block align-middle items-center justify-center w-9 h-8 bg-white-50 rounded">
-                     <svg class="text-gray-500 w-7 h-7" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                          <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#AA70E4" stroke-linejoin="round">
-                            <path d="M9,18.8A6.455,6.455,0,0,1,7,14,6.455,6.455,0,0,1,9,9.2" stroke="#AA70E4"></path>
-                            <path d="M15,18.8A6.455,6.455,0,0,0,17,14a6.455,6.455,0,0,0-2-4.8" stroke="#AA70E4"></path>
-                            <path d="M14,2.256V1H10V2.256A3.949,3.949,0,0,1,7.658,5.891,8.979,8.979,0,0,0,2,14c0,4.971,4.477,9,10,9s10-4.029,10-9a8.978,8.978,0,0,0-5.658-8.109A3.95,3.95,0,0,1,14,2.256Z"></path>
-                          </g>
-                        </svg>
-             </span>Tor
-            </h4> </div>
-                            </div>
-                          </section>
-                          <div class="container px-0 mx-auto mt-5">
-                            <div class="overflow-x-auto relative border sm:rounded-lg">
-                              <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                                <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none">
-                                  <tr>
-                                    <th scope="col" class="py-3 px-6">Settings</th>
-                                    <th scope="col">Value</th>
-                                  </tr>
-                                </thead>
-                                <tr class="bg-white border-t hover:bg-gray-50">
-                                  <td class="py-4 px-6 bold w-96">Use Tor Proxy</td>
-                                  <td class="py-4 pr-5">
-                                    <div class="w-1/5 md:flex-1">
-                                      <div class="relative">
-                                        <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                          <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
-                                        </svg>
-                                        <select name="usetorproxy" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
-                                          <option {% if tor_settings.use_tor %}selected{% endif %} value="true">True</option>
-                                          <option {% if not tor_settings.use_tor %}selected{% endif %} value="false">False</option>
-                                        </select>
-                                      </div>
-                                    </div>
-                                  </td>
-                                </tr>
-                                <tr class="bg-white border-t hover:bg-gray-50">
-                                  <td class="py-4 px-6 bold w-96">Tor Proxy Host</td>
-                                  <td class="py-4 pr-5">
-                                    <input name="proxyhost" type="text" class="w-1/5 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="" min="3" max="32" value="{{tor_settings.proxy_host}}"></td>
-                                </tr>
-                                <tr class="bg-white border-t hover:bg-gray-50">
-                                  <td class="py-4 px-6 bold w-96">Tor Proxy Port</td>
-                                  <td class="py-4 pr-5">
-                                    <input name="proxyport" type="text" class="w-1/5 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="" min="3" max="32" value="{{tor_settings.proxy_port}}"></td>
-                                </tr>
-                                <tr class="bg-white border-t hover:bg-gray-50">
-                                  <td class="py-4 px-6 bold w-96">Tor Control Port</td>
-                                  <td class="py-4 pr-5">
-                                    <input name="controlport" type="text" class="w-1/5 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="" min="3" max="32" value="{{tor_settings.control_port}}"></td>
-                                </tr>
-                                <tr class="bg-white border-t hover:bg-gray-50">
-                                  <td class="py-4 px-6 bold w-96">Tor Control Password</td>
-                                  <td class="py-4 pr-5">
-                                    <input name="controlpwd" type="text" class="w-1/5 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="" min="3" max="32" value="{{tor_settings.control_password}}"></td>
-                                </tr>
-                              </table>
-                            </div>
-                          </div>
-                          <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
-                            <div class="w-full md:w-0/12">
-                              <div class="flex flex-wrap justify-end -m-1.5">
-                               <div class="w-full md:w-auto p-1.5 ml-2">
-                          <button name="apply_tor" value="Apply" 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"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>Apply</button>
-                        </div>
-                              </div>
-                            </div>
-                          </div>
-                          </form>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-              </div>
+           </div>
+          </div>
+         </div>
+        </div>
+       </div>
+      </div>
+     </div>
+    </div>
+   </section>
+   <section class="pl-6">
+    <div class="flex flex-wrap items-center">
+     <div class="w-full">
+      <h4 class="font-semibold text-black dark:text-white text-2xl align-middle">
+       <span class="mr-2 inline-block align-middle items-center justify-center w-0 h-10 bg-white-50 rounded">
+       </span>Price Chart
+      </h4>
+     </div>
+    </div>
+   </section>
+   <section>
+    <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+     <div class="border-coolGray-100">
+      <div class="flex flex-wrap items-center justify-between -m-2">
+       <div class="w-full pt-2">
+        <div class="container mt-5 mx-auto">
+         <div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+          <div class="px-6">
+           <div class="w-full mt-6 pb-6 overflow-x-auto">
+            <table class="w-full min-w-max text-sm">
+             <thead class="uppercase">
+              <tr class="text-left">
+               <th class="p-0">
+                <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+                 <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Options</span>
+                </div>
+               </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>
+                </div>
+               </th>
+              </tr>
+             </thead>
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+              <td class="py-3 px-6 bold w-96 bold">Show Price Chart</td>
+              <td class="py-3 px-6">
+               <div class="relative">
+                <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                 <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+                </svg>
+                <select name="showchart" class="hover:border-blue-500 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-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0">
+                 <option {% if chart_settings.show_chart %}selected{% endif %} value="true">True</option>
+                 <option {% if not chart_settings.show_chart %}selected{% endif %} value="false">False</option>
+                </select>
+               </div>
+              </td>
+             </tr>
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+              <td class="py-3 px-6 bold">Chart API Key</td>
+              <td class="py-3 px-6">
+               <label for="message" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Chart API (free) Key at <a class="inline-block text-blue-500 hover:text-blue-600 hover:underline" href="https://min-api.cryptocompare.com/" target="_blank">CryptoCompare.com</a>
+                <br />
+               </label>
+               <input name="chartapikey" type="text" class="hover:border-blue-500 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-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="" min="3" max="32" value="{{chart_settings.chart_api_key}}">
+              </td>
+             </tr>
+            </table>
+           </div>
+          </div>
+         </div>
+        </div>
+       </div>
+      </div>
+     </div>
+    </div>
+   </section>
+   <section>
+    <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+     <div class="pb-6 ">
+      <div class="flex flex-wrap items-center justify-between -m-2">
+       <div class="w-full pt-2">
+        <div class="container mx-auto">
+         <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+          <div class="px-6">
+           <div class="flex flex-wrap justify-end">
+            <div class="w-full md:w-auto p-1.5 ml-2">
+             <button name="apply_chart" value="Apply" 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">Apply</button>
             </div>
+           </div>
           </div>
+         </div>
         </div>
+       </div>
       </div>
+     </div>
     </div>
-</div>
-</section>
+   </section>
+  </div>
+  <div class="hidden rounded-lg" id="tor" role="tabpanel" aria-labelledby="tor-tab">
+   <section class="pl-6">
+    <div class="flex flex-wrap items-center">
+     <div class="w-full">  
+      <h4 class="font-semibold text-black dark:text-white text-2xl align-middle">
+       <span class="mr-2 inline-block align-middle items-center justify-center w-0 h-10 bg-white-50 rounded">
+       </span>Tor
+      </h4>
+     </div>
+    </div>
+   </section>
+   <section>
+    <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+     <div class="border-coolGray-100">
+      <div class="flex flex-wrap items-center justify-between -m-2">
+       <div class="w-full pt-2">
+        <div class="container mt-5 mx-auto">
+         <div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+          <div class="px-6">
+           <div class="w-full mt-6 pb-6 overflow-x-auto">
+            <table class="w-full min-w-max text-sm">
+             <thead class="uppercase">
+              <tr class="text-left">
+               <th class="p-0">
+                <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+                 <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Options</span>
+                </div>
+               </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>
+                </div>
+               </th>
+              </tr>
+             </thead>
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+              <td class="py-3 px-6 bold">Use Tor Proxy</td>
+              <td class="py-3 px-6">
+               <div class="w-1/5 md:flex-1">
+                <div class="relative">
+                 <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+                 </svg>
+                 <select name="usetorproxy" class="hover:border-blue-500 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-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0">
+                  <option {% if tor_settings.use_tor %}selected{% endif %} value="true">True</option>
+                  <option {% if not tor_settings.use_tor %}selected{% endif %} value="false">False</option>
+                 </select>
+                </div>
+               </div>
+              </td>
+             </tr>
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+              <td class="py-3 px-6 bold w-96">Tor Proxy Host</td>
+              <td class="py-3 px-6">
+               <input name="proxyhost" type="text" class="hover:border-blue-500 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-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="" min="3" max="32" value="{{tor_settings.proxy_host}}">
+              </td>
+             </tr>
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+              <td class="py-3 px-6 bold w-96">Tor Proxy Port</td>
+              <td class="py-3 px-6">
+               <input name="proxyport" type="text" class="hover:border-blue-500 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-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="" min="3" max="32" value="{{tor_settings.proxy_port}}">
+              </td>
+             </tr>
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+              <td class="py-3 px-6 bold w-96">Tor Control Port</td>
+              <td class="py-3 px-6">
+               <input name="controlport" type="text" class="hover:border-blue-500 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-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="" min="3" max="32" value="{{tor_settings.control_port}}">
+              </td>
+             </tr>
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+              <td class="py-3 px-6 bold w-96">Tor Control Password</td>
+              <td class="py-3 px-6">
+               <input name="controlpwd" type="text" class="hover:border-blue-500 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-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="" min="3" max="32" value="{{tor_settings.control_password}}">
+              </td>
+             </tr>
+            </table>
+           </div>
+          </div>
+         </div>
+        </div>
+       </div>
+      </div>
+     </div>
+    </div>
+   </section>
+   <section>
+    <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+     <div class="pb-6 ">
+      <div class="flex flex-wrap items-center justify-between -m-2">
+       <div class="w-full pt-2">
+        <div class="container mx-auto">
+         <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+          <div class="px-6">
+           <div class="flex flex-wrap justify-end">
+            <div class="w-full md:w-auto p-1.5 ml-2">
+             <button name="apply_tor" value="Apply" 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">Apply</button>
+            </div>
+           </div>
+          </div>
+         </div>
+        </div>
+       </div>
+      </div>
+     </div>
+   </section>
+  </div>
+ </div>
+  </div>
 <script>
   function confirmPopup(action, coin_name) {
-    return confirm(action + " " + coin_name + "?\nWill shutdown basicswap.");
+   return confirm(action + " " + coin_name + "?\nWill shutdown basicswap.");
   }
 </script>
 {% include 'footer.html' %}
 </body>
-</html>
+</html>

basicswap/templates/smsgaddresses.html

@@ -1,327 +1,594 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
-    <div class="flex flex-wrap items-center -m-2">
-      <div class="w-full md:w-1/2 p-2">
-        <ul class="flex flex-wrap items-center gap-x-3 mb-2">
-          <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
-              <p>Home</p>
-            </a>
-          </li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/smsgaddresses">SMSG Addresses</a></li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-        </ul>
+ <section class="p-5 mt-5">
+  <div class="flex flex-wrap items-center -m-2">
+   <div class="w-full md:w-1/2 p-2">
+    <ul class="flex flex-wrap items-center gap-x-3 mb-2">
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
+       <p>Home</p>
+      </a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/smsgaddresses">SMSG Addresses</a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+    </ul>
+   </div>
+  </div>
+ </section>
+ <section class="py-4">
+  <div class="container px-4 mx-auto">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
+    <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+    <div class="relative z-20 flex flex-wrap items-center -m-3">
+     <div class="w-full md:w-1/2 p-3">
+      <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Active SMSG Addresses</h2>
+      <p class="font-normal text-coolGray-200 dark:text-white">Check your SMSG address history and add new addresses.</p>
+     </div>
+    </div>
+   </div>
+  </div>
+ </section>
+ {% include 'inc_messages.html' %}
+ <form method="post">
+  {% if data.edit_address %}
+  <input type="hidden" name="edit_address_id" value="{{ data.addr_data.id }}">
+  <input type="hidden" name="edit_address" value="{{ data.addr_data.addr }}">
+  <section class="p-6 bg-body dark:bg-gray-700">
+   <div class="flex flex-wrap items-center">
+    <div class="w-full">
+     <h4 class="font-semibold text-black dark:text-white text-2xl">Edit Address: {{ data.addr_data.addr }}</h4>
+    </div>
+   </div>
+  </section>
+  <section>
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+    <div class="border-coolGray-100">
+     <div class="flex flex-wrap items-center justify-between -m-2">
+      <div class="w-full pt-2">
+       <div class="container mt-5 mx-auto">
+        <div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+         <div class="px-6">
+          <div class="w-full mt-6 pb-6 overflow-x-auto">
+           <table class="w-full min-w-max text-sm">
+            <thead class="uppercase">
+             <tr class="text-left">
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Settings</span>
+               </div>
+              </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">Value</span>
+               </div>
+              </th>
+             </tr>
+            </thead>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 monospace bold">Pubkey</td>
+             <td class="py-3 px-6 select-all monospace">{{ data.addr_data.pubkey }}</td>
+            </tr>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6">Active</td>
+             <td class="py-3 px-6">
+              <div class="relative">
+               <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+               </svg>
+               <select class="hover:border-blue-500 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="active_ind">
+                <option value="1" {% if data.addr_data.active_ind==1 %} selected{% endif %}>True</option>
+                <option value="0" {% if data.addr_data.active_ind==0 %} selected{% endif %}>False</option>
+               </select>
+              </div>
+             </td>
+            </tr>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6">Note</td>
+             <td class="py-3 px-6">
+              <input class="hover:border-blue-500 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="addressnote" type="text" value="{{ data.addr_data.note }}" maxlength="30">
+             </td>
+            </tr>
+           </table>
+          </div>
+         </div>
+        </div>
+       </div>
       </div>
+     </div>
     </div>
+   </div>
   </section>
-  <section class="py-4">
-    <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
-        <div class="relative z-20 flex flex-wrap items-center -m-3">
-          <div class="w-full md:w-1/2 p-3">
-            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Active SMSG Addresses</h2>
-            <p class="font-semibold text-coolGray-200">Check your SMSG address history and add new addresses.</p>
+  <section>
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+    <div class="pb-6 ">
+     <div class="flex flex-wrap items-center justify-between -m-2">
+      <div class="w-full pt-2">
+       <div class="container mx-auto">
+        <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+         <div class="px-6">
+          <div class="flex flex-wrap justify-end">
+           <div class="w-full md:w-auto p-1.5 ml-2">
+            <button name="saveaddr" value="Save Address" 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">
+             <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+              <g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10">
+               <line x1="12" y1="7" x2="12" y2="17" stroke="#ffffff"></line>
+               <line x1="17" y1="12" x2="7" y2="12" stroke="#ffffff"></line>
+               <circle cx="12" cy="12" r="11"></circle>
+              </g>
+             </svg>Save Address </button>
+           </div>
+           <div class="w-full md:w-auto p-1.5 ml-2">
+            <button name="cancel" value="Cancel" 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">
+             <svg class="text-gray-500 w-5 h-5 mr-2" height="24" width="24" viewBox="0 0 24 24">
+              <g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10">
+               <line data-cap="butt" x1="18" y1="12" x2="7" y2="12" stroke-linecap="butt" stroke="#ffffff"></line>
+               <polyline points=" 11,16 7,12 11,8 " stroke="#ffffff"></polyline>
+               <circle cx="12" cy="12" r="11"></circle>
+              </g>
+             </svg>Go Back </button>
+           </div>
           </div>
+         </div>
         </div>
+       </div>
       </div>
+     </div>
     </div>
+   </div>
   </section>
-  {% include 'inc_messages.html' %}
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
-      <div class="pb-6 border-coolGray-100">
-        <div class="flex flex-wrap items-center justify-between -m-2">
-          <div class="w-full pt-2">
-            <form method="post">
-              {% if data.edit_address %}
-              <input type="hidden" name="edit_address_id" value="{{ data.addr_data.id }}">
-              <input type="hidden" name="edit_address" value="{{ data.addr_data.addr }}">
-              <section class="bg-white p-6">
-                <div class="flex flex-wrap items-center">
-                  <div class="w-full">
-                    <h4 class="font-semibold text-black text-2xl">Edit Address: {{ data.addr_data.addr }}</h4></div>
-                </div>
-              </section>
-              <div class="container px-0 mx-auto">
-                <div class="overflow-x-auto relative border sm:rounded-lg">
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                      <tr>
-                        <th scope="col" class="py-3 px-6">SETTING</th>
-                        <th scope="col">VALUE</th>
-                      </tr>
-                    </thead>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 monospace bold">Pubkey</td>
-                      <td class="py-4 pr-5 select-all monospace">{{ data.addr_data.pubkey }}</td>
-                    </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6">Active</td>
-                      <td class="py-4 pr-5">
-                      <div class="w-52 md:flex-1">
-                      <div class="relative">
-                                <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                  <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
-                                </svg>
-                        <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="active_ind">
-                          <option value="1" {% if data.addr_data.active_ind==1 %} selected{% endif %}>True</option>
-                          <option value="0" {% if data.addr_data.active_ind==0 %} selected{% endif %}>False</option>
-                        </select>
-                      </div>
-                    </div>
-                      </td>
-                    </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6">Note</td>
-                      <td class="py-4 pr-5">
-                        <input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5 w-full" name="addressnote" type="text" value="{{ data.addr_data.note }}" maxlength="30"> </td>
-                    </tr>
-                    <tr>
-                  </table>
-                </div>
-              </div>
-              <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
-                <div class="w-full md:w-0/12">
-                  <div class="flex flex-wrap justify-end -m-1.5">
-                    <div class="w-full md:w-auto p-1.5 ml-2">
-                    <button name="saveaddr" value="Save Address" 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 "><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line x1="12" y1="7" x2="12" y2="17" stroke="#ffffff"></line> <line x1="17" y1="12" x2="7" y2="12" stroke="#ffffff"></line> <circle cx="12" cy="12" r="11"></circle></g></svg>Save Address</button>
-                    </div>
-                  <div class="w-full md:w-auto p-1.5 ml-2">
-                   <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-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"><svg class="text-gray-500 w-5 h-5 mr-2" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line data-cap="butt" x1="18" y1="12" x2="7" y2="12" stroke-linecap="butt" stroke="#556987"></line> <polyline points=" 11,16 7,12 11,8 " stroke="#5569878"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>Go Back</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              {% elif data.new_address %}
-              <section class="bg-white p-6">
-                <div class="flex flex-wrap items-center">
-                  <div class="w-full">
-                    <h4 class="font-semibold text-black text-2xl">New Receiving Address</h4></div>
-                </div>
-              </section>
-              <div class="container px-0 mx-auto">
-                <div class="overflow-x-auto relative border sm:rounded-lg">
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                      <tr>
-                        <th scope="col" class="py-3 px-6">SETTING</th>
-                        <th scope="col">VALUE</th>
-                      </tr>
-                    </thead>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Note</td>
-                      <td class="py-4 pr-5">
-                        <input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5 w-full" name="addressnote" type="text" value="" maxlength="30">
-                      </td>
-                    </tr>
-                  </table>
-                </div>
-              </div>
-              <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
-                <div class="w-full md:w-0/12">
-                  <div class="flex flex-wrap justify-end -m-1.5">
-                    <div class="w-full md:w-auto p-1.5 ml-2">
-                    <button name="createnewaddr" value="Create Address" 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 "><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line x1="12" y1="7" x2="12" y2="17" stroke="#ffffff"></line> <line x1="17" y1="12" x2="7" y2="12" stroke="#ffffff"></line> <circle cx="12" cy="12" r="11"></circle></g></svg>Create Address</button>
-                    </div>
-                  <div class="w-full md:w-auto p-1.5 ml-2">
-                   <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-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-non"><svg class="text-gray-500 w-5 h-5 mr-2" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line data-cap="butt" x1="18" y1="12" x2="7" y2="12" stroke-linecap="butt" stroke="#556987"></line> <polyline points=" 11,16 7,12 11,8 " stroke="#5569878"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>Go Back</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              {% elif data.new_send_address %}
-              <section class="bg-white p-6">
-                <div class="flex flex-wrap items-center">
-                  <div class="w-full">
-                    <h4 class="font-semibold text-black text-2xl">Add Sending Address</h4></div>
-                </div>
-              </section>
-              <div class="container px-0 mx-auto">
-                <div class="overflow-x-auto relative border sm:rounded-lg">
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                      <tr>
-                        <th scope="col" class="py-3 px-6">SETTING</th>
-                        <th scope="col">VALUE</th>
-                      </tr>
-                    </thead>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Pubkey</td>
-                      <td class="py-4 pr-5">
-                        <input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5 w-full monospace" name="addresspubkey" type="text" value="" maxlength="66">
-                      </td>
-                    </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Note</td>
-                      <td class="py-4 pr-5">
-                        <input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5 w-full" name="addressnote" type="text" value="" maxlength="30">
-                      </td>
-                    </tr>
-                  </table>
-                </div>
-              </div>
-              <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
-                <div class="w-full md:w-0/12">
-                  <div class="flex flex-wrap justify-end -m-1.5">
-                    <div class="w-full md:w-auto p-1.5 ml-2">
-                    <button name="createnewsendaddr" value="Add Address" 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 "><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line x1="12" y1="7" x2="12" y2="17" stroke="#ffffff"></line> <line x1="17" y1="12" x2="7" y2="12" stroke="#ffffff"></line> <circle cx="12" cy="12" r="11"></circle></g></svg>Create Address</button>
-                    </div>
-                  <div class="w-full md:w-auto p-1.5 ml-2">
-                   <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-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-non"><svg class="text-gray-500 w-5 h-5 mr-2" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line data-cap="butt" x1="18" y1="12" x2="7" y2="12" stroke-linecap="butt" stroke="#556987"></line> <polyline points=" 11,16 7,12 11,8 " stroke="#5569878"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>Go Back</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              {% else %}
-              <div class="container px-0 mx-auto mt-5">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                      <tr>
-                        <th scope="col" class="py-3 px-6">Filter</th>
-                        <th scope="col" class="py-3 px-6"></th>
-                        <th scope="col"></th>
-                      </tr>
-                    </thead>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold w-96"> Sort by: </td>
-                      <td class="py-4 bold w-96">
-                        <select class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="sort_by">
-                          <option value="created_at" {% if filters.sort_by=='created_at' %} selected{% endif %}>Created At</option>
-                        </select>
-                      </td>
-                      <td class="py-4 px-6 pr-5">
-                        <select class="pr-15 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="sort_dir">
-                          <option value="asc" {% if filters.sort_dir=='asc' %} selected{% endif %}>Ascending</option>
-                          <option value="desc" {% if filters.sort_dir=='desc' %} selected{% endif %}>Descending</option>
-                        </select>
-                      </td>
-                    </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold w-96">Note</td>
-                      <td class="py-4 pr-5">
-                        <input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5 w-full" name="filter_addressnote" type="text" value="{{ filters.addressnote }}" maxlength="30"> </td>
-                    </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold w-96">Type</td>
-                      <td class="py-4 pr-5">
-                        <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="filter_addr_type">
-                          <option{% if filters.addr_type=="-1" %} selected{% endif %} value="-1">Any</option>
-                            {% for a in page_data.addr_types %}
-                            <option{% if filters.addr_type==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[1] }}</option>
-                            {% endfor %}
-                          </select>
-                    </tr>
-                  </table>
-              </div>
-            </div>
-            <div class="pt-10 bg-white bg-opacity-60 rounded-b-md">
-              <div class="w-full md:w-0/12">
-                <div class="flex flex-wrap justify-end -m-1.5">
-                  <div class="w-full md:w-auto p-1.5">
-                    <button type="submit" name='pageback' value="Page Back" class="outline-none 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">
-                      <svg aria-hidden="true" class="mr-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                        <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
-                      </svg> <span>Page Back</span> </button>
-                  </div>
-                  <div class="flex items-center">
-                    <div class="w-full md:w-auto p-1.5">
-                      <p class="text-sm font-heading">Page: {{ filters.page_no }}</p>
-                    </div>
-                  </div>
-                  <div class="w-full md:w-auto p-1.5">
-                    <button type="submit" name='pageforwards' value="Page Forwards" class="outline-none 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"> <span>Page Forwards</span>
-                      <svg aria-hidden="true" class="ml-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                        <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
-                      </svg>
-                    </button>
-                  </div>
-                  <div class="w-full md:w-auto p-1.5 ml-2">
-                    <button name='clearfilters' value="Clear Filters" 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">        <svg class="mr-2 w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" class="nc-icon-wrapper">
-                                <rect x="2" y="2" width="7" height="7"></rect>
-                                <rect x="15" y="15" width="7" height="7"></rect>
-                                <rect x="2" y="15" width="7" height="7"></rect>
-                                <polyline points="15 6 17 8 22 3" stroke="#556987"></polyline>
-                              </g>
-                            </svg>  Clear Filters</button>
-                  </div>
-                               <div class="w-full md:w-auto p-1.5 ml-2">
-                          <button name="" value="Submit" 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"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>  Apply</button>
-                        </div>
-                </div>
+  {% elif data.new_address %}
+  <section class="p-6 bg-body dark:bg-gray-700">
+   <div class="flex flex-wrap items-center">
+    <div class="w-full">
+     <h4 class="font-semibold text-black dark:text-white text-2xl">New Receiving Address</h4>
+    </div>
+   </div>
+  </section>
+  <section>
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+    <div class="border-coolGray-100">
+     <div class="flex flex-wrap items-center justify-between -m-2">
+      <div class="w-full pt-2">
+       <div class="container mt-5 mx-auto">
+        <div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+         <div class="px-6">
+          <div class="w-full mt-6 pb-6 overflow-x-auto">
+           <table class="w-full min-w-max text-sm">
+            <thead class="uppercase">
+             <tr class="text-left">
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Details</span>
+               </div>
+              </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 py-3 px-6"></span>
+               </div>
+              </th>
+             </tr>
+            </thead>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Note</td>
+             <td class="py-3 px-6">
+              <input class="hover:border-blue-500 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="addressnote" type="text" value="" maxlength="30">
+             </td>
+            </tr>
+           </table>
+          </div>
+         </div>
+        </div>
+       </div>
+      </div>
+     </div>
+    </div>
+   </div>
+  </section>
+  <section>
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+    <div class="pb-6 ">
+     <div class="flex flex-wrap items-center justify-between -m-2">
+      <div class="w-full pt-2">
+       <div class="container mx-auto">
+        <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+         <div class="px-6">
+          <div class="flex flex-wrap justify-end">
+           <div class="w-full md:w-auto p-1.5 ml-2">
+            <button name="createnewaddr" value="Create Address" 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">
+             <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+              <g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10">
+               <line x1="12" y1="7" x2="12" y2="17" stroke="#ffffff"></line>
+               <line x1="17" y1="12" x2="7" y2="12" stroke="#ffffff"></line>
+               <circle cx="12" cy="12" r="11"></circle>
+              </g>
+             </svg>Create Address</button>
+           </div>
+           <div class="w-full md:w-auto p-1.5 ml-2">
+            <button name="cancel" value="Cancel" 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">
+             <svg class="text-gray-500 w-5 h-5 mr-2" height="24" width="24" viewBox="0 0 24 24">
+              <g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10">
+               <line data-cap="butt" x1="18" y1="12" x2="7" y2="12" stroke-linecap="butt" stroke="#ffffff"></line>
+               <polyline points=" 11,16 7,12 11,8 " stroke="#ffffff"></polyline>
+               <circle cx="12" cy="12" r="11"></circle>
+              </g>
+             </svg>Go Back</button>
+           </div>
+          </div>
+         </div>
+        </div>
+       </div>
+      </div>
+     </div>
+    </div>
+   </div>
+  </section>
+  {% elif data.new_send_address %}
+  <section class="p-6 bg-body dark:bg-gray-700">
+   <div class="flex flex-wrap items-center">
+    <div class="w-full">
+     <h4 class="font-semibold text-black dark:text-white text-2xl">Add Sending Address</h4>
+    </div>
+   </div>
+  </section>
+  <section>
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+    <div class="border-coolGray-100">
+     <div class="flex flex-wrap items-center justify-between -m-2">
+      <div class="w-full pt-2">
+       <div class="container mt-5 mx-auto">
+        <div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+         <div class="px-6">
+          <div class="w-full mt-6 pb-6 overflow-x-auto">
+           <table class="w-full min-w-max text-sm">
+            <thead class="uppercase">
+             <tr class="text-left">
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Settings</span>
+               </div>
+              </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">Value</span>
+               </div>
+              </th>
+             </tr>
+            </thead>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Pubkey</td>
+             <td class="py-3 px-6">
+              <input class="hover:border-blue-500 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 monospace" name="addresspubkey" type="text" value="" maxlength="66">
+             </td>
+            </tr>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Note</td>
+             <td class="py-3 px-6">
+              <input class="hover:border-blue-500 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="addressnote" type="text" value="" maxlength="30">
+             </td>
+            </tr>
+           </table>
+          </div>
+         </div>
+        </div>
+       </div>
+      </div>
+     </div>
+    </div>
+   </div>
+  </section>
+  <section>
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+    <div class="pb-6 ">
+     <div class="flex flex-wrap items-center justify-between -m-2">
+      <div class="w-full pt-2">
+       <div class="container mx-auto">
+        <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+         <div class="px-6">
+          <div class="flex flex-wrap justify-end">
+           <div class="w-full md:w-auto p-1.5 ml-2">
+            <button name="createnewsendaddr" value="Add Address" 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">
+             <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+              <g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10">
+               <line x1="12" y1="7" x2="12" y2="17" stroke="#ffffff"></line>
+               <line x1="17" y1="12" x2="7" y2="12" stroke="#ffffff"></line>
+               <circle cx="12" cy="12" r="11"></circle>
+              </g>
+             </svg>Create Address</button>
+           </div>
+           <div class="w-full md:w-auto p-1.5 ml-2">
+            <button name="cancel" value="Cancel" 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">
+             <svg class="text-gray-500 w-5 h-5 mr-2" height="24" width="24" viewBox="0 0 24 24">
+              <g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10">
+               <line data-cap="butt" x1="18" y1="12" x2="7" y2="12" stroke-linecap="butt" stroke="#ffffff"></line>
+               <polyline points=" 11,16 7,12 11,8 " stroke="#ffffff"></polyline>
+               <circle cx="12" cy="12" r="11"></circle>
+              </g>
+             </svg>Go Back</button>
+           </div>
+          </div>
+         </div>
+        </div>
+       </div>
+      </div>
+     </div>
+    </div>
+   </div>
+  </section>
+  {% else %}
+  <section>
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+    <div class="border-coolGray-100">
+     <div class="flex flex-wrap items-center justify-between -m-2">
+      <div class="w-full pt-2">
+       <div class="container mt-5 mx-auto">
+        <div class="pt-6 pb-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+         <div class="px-6">
+          <div class="w-full mt-6 pb-6 overflow-x-auto">
+           <table class="w-full min-w-max text-sm">
+            <thead class="uppercase">
+             <tr class="text-left">
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Filters</span>
+               </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold py-3 px-6"></span>
+               </div>
+              </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 py-3 px-6"></span>
+               </div>
+              </th>
+             </tr>
+            </thead>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold"> Sort by: </td>
+             <td class="py-3 px-6">
+              <select class="hover:border-blue-500 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="sort_by">
+               <option value="created_at" {% if filters.sort_by=='created_at' %} selected{% endif %}>Created At</option>
+              </select>
+             </td>
+             <td class="py-3 px-6">
+              <select class="hover:border-blue-500 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="sort_dir">
+               <option value="asc" {% if filters.sort_dir=='asc' %} selected{% endif %}>Ascending</option>
+               <option value="desc" {% if filters.sort_dir=='desc' %} selected{% endif %}>Descending</option>
+              </select>
+             </td>
+            </tr>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6">Note</td>
+             <td class="py-3 px-6">
+              <input class="hover:border-blue-500 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="filter_addressnote" type="text" value="{{ filters.addressnote }}" maxlength="30">
+             </td>
+             <td class="py-3 px-6"></td>
+            </tr>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6">Type</td>
+             <td class="py-3 px-6">
+              <select class="hover:border-blue-500 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="filter_addr_type">
+               <option{% if filters.addr_type=="-1" %} selected{% endif %} value="-1">Any</option>
+                {% for a in page_data.addr_types %}
+                <option{% if filters.addr_type==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[1] }}</option>
+                {% endfor %}
+              </select>
+             </td>
+             <td class="py-4 pr-5"></td>
+            </tr>
+           </table>
+           </table>
+          </div>
+         </div>
+        </div>
+       </div>
+  </section>
+  <section>
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+    <div class="pb-6 ">
+     <div class="flex flex-wrap items-center justify-between -m-2">
+      <div class="w-full pt-2">
+       <div class="container mx-auto">
+        <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+         <div class="px-6">
+          <div class="flex flex-wrap justify-end">
+           <div class="w-full md:w-auto p-1.5 ml-2">
+            <button name='clearfilters' value="Clear Filters" 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">
+             <svg class="mr-2 w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
+               <line x1="20" y1="2" x2="12.329" y2="11.506"></line>
+               <path d="M11,11a2,2,0,0,1,2,2,3.659,3.659,0,0,1-.2.891A9.958,9.958,0,0,0,13.258,23H1C1,16.373,4.373,11,11,11Z"></path>
+               <line x1="18" y1="15" x2="23" y2="15" stroke="#ffffff"></line>
+               <line x1="17" y1="19" x2="23" y2="19" stroke="#ffffff"></line>
+               <line x1="19" y1="23" x2="23" y2="23" stroke="#ffffff"></line>
+               <path d="M8.059,11.415A3.9,3.9,0,0,0,12,16c.041,0,.079-.011.12-.012" data-cap="butt"></path>
+               <path d="M5,23a13.279,13.279,0,0,1,.208-3.4" data-cap="butt"></path>
+               <path d="M9.042,23c-.688-1.083-.313-3.4-.313-3.4" data-cap="butt"></path>
+              </g>
+             </svg>Clear</button>
+           </div>
+           <div class="w-full md:w-auto p-1.5 ml-2">
+            <button name="" value="Submit" 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">
+             <svg class="mr-2 w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
+               <rect x="2" y="2" width="7" height="7"></rect>
+               <rect x="15" y="15" width="7" height="7"></rect>
+               <rect x="2" y="15" width="7" height="7"></rect>
+               <polyline points="15 6 17 8 22 3" stroke="#ffffff"></polyline>
+              </g>
+             </svg>Apply Filters</button>
+           </div>
+           <div class="w-full md:w-auto p-1.5 ml-2">
+            <button name="shownewaddr" value="New Address" 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">
+             <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+              <g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10">
+               <line x1="12" y1="7" x2="12" y2="17" stroke="#ffffff"></line>
+               <line x1="17" y1="12" x2="7" y2="12" stroke="#ffffff"></line>
+               <circle cx="12" cy="12" r="11"></circle>
+              </g>
+             </svg>New Address</button>
+           </div>
+           <div class="w-full md:w-auto p-1.5 ml-2">
+            <button name="showaddaddr" value="Add Sending Address" 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">
+             <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+              <g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10">
+               <line x1="12" y1="7" x2="12" y2="17" stroke="#ffffff"></line>
+               <line x1="17" y1="12" x2="7" y2="12" stroke="#ffffff"></line>
+               <circle cx="12" cy="12" r="11"></circle>
+              </g>
+             </svg>Add Sending Address</button>
+           </div>
+          </div>
+         </div>
+        </div>
+       </div>
+      </div>
+     </div>
+    </div>
+   </div>
+  </section>
+  <section>
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+    <div class="border-coolGray-100">
+     <div class="flex flex-wrap items-center justify-between -m-2">
+      <div class="w-full pt-2">
+       <div class="container mt-5 mx-auto">
+        <div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+         <div class="px-6">
+          <div class="w-full mt-6 pb-6 overflow-x-auto">
+           <table class="w-full min-w-max text-sm">
+            <thead class="uppercase">
+             <tr class="text-left">
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Address</span>
+               </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Type</span>
+               </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Active</span>
+               </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Created At</span>
+               </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Note</span>
+               </div>
+              </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">Action</span>
+               </div>
+              </th>
+             </tr>
+            </thead>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold monospace text-blue-500">{{ page_data.network_addr }}</td>
+             <td class="py-3 px-6 bold text-blue-500">NETWORK ADDRESS
+              <td />
+            </tr>
+            {% for sa in smsgaddresses %}
+            <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 monospace bold select-all">{{ sa.addr }}</td>
+             <td class="py-3 px-6">{{ sa.type }}</td>
+             <td class="py-3 px-6">{{ sa.active_ind }}</td>
+             <td class="py-3 px-6 flex items-center px-46 whitespace-nowrap">
+              <svg alt="" class="w-5 h-5 rounded-full" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="11"></circle>
+                <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
+               </g>
+              </svg>
+              <div class="py-3 pl-2">
+               {{ sa.created_at | formatts }}
               </div>
+             </td>
+             <td class="py-3 px-6">{{ sa.note }}</td>
+             <td class="py-3 px-6">
+              <input class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md bg-blue-500 text-white border border-blue-500 hover:bg-blue-600 transition duration-200" type="submit" name="editaddr_{{ sa.id }}" value="Edit">
+             </td>
+            </tr>
+            {% endfor %}
+           </table>
+          </div>
+         </div>
+        </div>
+       </div>
+      </div>
+  </section>
+  <section>
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+    <div class="pb-6 ">
+     <div class="flex flex-wrap items-center justify-between -m-2">
+      <div class="w-full pt-2">
+       <div class="container mx-auto">
+        <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+         <div class="px-6">
+          <div class="flex flex-wrap justify-end">
+           <div class="w-full md:w-auto p-1.5">
+            <button type="submit" name='pageback' value="Page Back" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 focus:ring-0 focus:outline-none">
+             <svg aria-hidden="true" class="mr-2 w-5 h-5" fill="#ffffff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
+             </svg>
+             <span>Page Back</span>
+            </button>
+           </div>
+           <div class="flex items-center">
+            <div class="w-full md:w-auto p-1.5">
+             <p class="text-sm font-heading dark:text-white">Page: {{ filters.page_no }}</p>
             </div>
-              <div class="container px-0 mx-auto mt-5">
-                <div class="overflow-x-auto relative border sm:rounded-lg">
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                      <tr>
-                        <th scope="col" class="py-3 px-6">Address</th>
-                        <th scope="col">Type</th>
-                        <th scope="col">Active</th>
-                        <th scope="col">Created At</th>
-                        <th scope="col">Note</th>
-                        <th scope="col">Action</th>
-                      </tr>
-                    </thead>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-6 px-6"><b class="monospace">{{ page_data.network_addr }}</b></td>
-                      <td class="py-4">Network Address
-                        <td />
-                        <td class="py-4">
-                          <td />
-                          <td class="py-4">
-                            <td /> </tr>
-                            {% for sa in smsgaddresses %}
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 monospace bold select-all">{{ sa.addr }}</td>
-                      <td class="py-4">{{ sa.type }}</td>
-                      <td>{{ sa.active_ind }}</td>
-                      <td class="py-4">{{ sa.created_at | formatts }}</td>
-                      <td class="py-4">{{ sa.note }}</td>
-                      <td class="py-4">
-                        <input class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md shadow-button bg-white text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300" type="submit" name="editaddr_{{ sa.id }}" value="Edit">
-                      </td>
-                    </tr>{% endfor %}
-                  </table>
-                </div>
-              </div>
-              <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
-                <div class="w-full md:w-0/12">
-                  <div class="flex flex-wrap justify-end -m-1.5">
-             <div class="w-full md:w-auto p-1.5 ml-2">
-                          <button name="shownewaddr" value="New Address" 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"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line x1="12" y1="7" x2="12" y2="17" stroke="#ffffff"></line> <line x1="17" y1="12" x2="7" y2="12" stroke="#ffffff"></line> <circle cx="12" cy="12" r="11"></circle></g></svg>New Address</button>
-                        </div>
-                 <div class="w-full md:w-auto p-1.5 ml-2">
-                          <button name="showaddaddr" value="Add Sending Address" 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"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line x1="12" y1="7" x2="12" y2="17" stroke="#ffffff"></line> <line x1="17" y1="12" x2="7" y2="12" stroke="#ffffff"></line> <circle cx="12" cy="12" r="11"></circle></g></svg>Add Sending Address</button>
-                        </div>
-                  </div>
-                </div>
-              </div>
-              <input type="hidden" name="pageno" value="{{ filters.page_no }}">
-              {% endif %}
-              <input type="hidden" name="formid" value="{{ form_id }}"></form>
+           </div>
+           <div class="w-full md:w-auto p-1.5">
+            <button type="submit" name='pageforwards' value="Page Forwards" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 focus:ring-0 focus:outline-none">
+             <span>Page Forwards</span>
+             <svg aria-hidden="true" class="ml-2 w-5 h-5" fill="#ffffff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+             </svg>
+            </button>
+           </div>
           </div>
+         </div>
         </div>
+       </div>
       </div>
+     </div>
     </div>
+   </div>
   </section>
+  <input type="hidden" name="pageno" value="{{ filters.page_no }}">
+  {% endif %}
+  <input type="hidden" name="formid" value="{{ form_id }}">
+ </form>
+</div>
+</div>
+</div>
+</div>
+</section>
 </div>
 {% include 'footer.html' %}
 </div>
 </body>
-</html>
+</html>

basicswap/templates/tor.html

@@ -1,103 +1,121 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
-    <div class="flex flex-wrap items-center -m-2">
-      <div class="w-full md:w-1/2 p-2">
-        <ul class="flex flex-wrap items-center gap-x-3 mb-2">
-          <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
-              <p>Home</p>
-            </a>
-          </li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/tor">Tor</a></li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-        </ul>
+ <section class="p-5 mt-5">
+  <div class="flex flex-wrap items-center -m-2">
+   <div class="w-full md:w-1/2 p-2">
+    <ul class="flex flex-wrap items-center gap-x-3 mb-2">
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
+       <p>Home</p>
+      </a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/tor">Tor</a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+    </ul>
+   </div>
+  </div>
+ </section>
+ <section class="py-4">
+  <div class="container px-4 mx-auto">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
+    <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+    <div class="relative z-20 flex flex-wrap items-center -m-3">
+     <div class="w-full md:w-1/2 p-3">
+      <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Tor</h2>
+      <p class="font-normal text-coolGray-200 dark:text-white">Tor connection information.</p>
+     </div>
+     <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
+      {% if refresh %}
+      <a id="refresh" href="/tor" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border 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 rounded-md shadow-button focus:ring-0 focus:outline-none">
+       <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+        <g fill="#ffffff">
+         <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
+         <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
+        </g>
+       </svg>
+       <span>Refresh {{ refresh }} seconds</span>
+      </a>
+      {% else %}
+      <a id="refresh" href="/tor" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white borderdark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600 border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+       <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+        <g fill="#ffffff">
+         <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
+         <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
+        </g>
+       </svg>
+       <span>Refresh</span>
+      </a>
+    {% endif %}
       </div>
     </div>
-  </section>
-  <section class="py-4">
-    <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
-        <div class="relative z-20 flex flex-wrap items-center -m-3">
-          <div class="w-full md:w-1/2 p-3">
-            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Tor</h2>
-            <p class="font-semibold text-coolGray-200">Tor connection information.</p>
-          </div>
-          <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto"> 
-            {% if refresh %}
-            <a id="refresh" href="/tor" class="flex flex-wrap justify-center px-5 py-4 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">
-              <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                <g fill="#ffffff">
-                  <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
-                  <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
-                </g>
-              </svg> <span>Refresh {{ refresh }} seconds</span></a>
-              {% else %}
-            <a id="refresh" href="/tor" class="flex flex-wrap justify-center px-5 py-4 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">
-              <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                <g fill="#ffffff">
-                  <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
-                  <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
-                </g>
-              </svg><span>Refresh</span></a>
-            {% endif %}
-          </div>
+   </div>
+  </div>
+ </section>
+ {% include 'inc_messages.html' %}
+ <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden">
+  <div class="pb-6 border-coolGray-100">
+   <div class="flex flex-wrap items-center justify-between -m-2">
+    <div class="w-full pt-2">
+     <div class="container mt-5 mx-auto">
+      <div class="pt-6 pb-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+       <div class="px-6">
+        <div class="w-full mt-6 pb-6 overflow-x-auto">
+         <table class="w-full min-w-max text-sm">
+          <thead class="uppercase">
+           <tr class="text-left">
+            <th class="p-0">
+             <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Tor</span>
+             </div>
+            </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">Details</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">
+           <td class="py-3 px-6 bold">Tor Mode</td>
+           <td td class="py-3 px-6">{% if use_tor_proxy == true %} Active {% if tor_established == true %} & Connected{% endif %} {% 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">Circuit Established</td>
+           <td td class="py-3 px-6">{{ data.circuit_established }}</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">Bytes Written</td>
+           <td td class="py-3 px-6">{{ data.bytes_written }}</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">Bytes Read</td>
+           <td td class="py-3 px-6">{{ data.bytes_read }}</td>
+          </tr>
+         </table>
         </div>
+       </div>
       </div>
+     </div>
     </div>
-  </section>
-  {% include 'inc_messages.html' %}
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
-      <div class="pb-6 border-coolGray-100">
-        <div class="flex flex-wrap items-center justify-between -m-2">
-          <div class="w-full pt-2">
-            <div class="container px-0 mx-auto mt-5">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                    <tr>
-                      <th scope="col" class="py-3 px-6 w-80">Tor</th>
-                      <th scope="col" class="py-3"></th>
-                    </tr>
-                  </thead>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 pl-5 pr-5 w-80 bold">Tor Mode</td>
-                    <td td class="py-4">{% if use_tor_proxy == true %} Active {% if tor_established == true %} & Connected{% endif %} {% endif %}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 pl-5 pr-5 w-80 bold">Circuit Established</td>
-                    <td td class="py-4">{{ data.circuit_established }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 pl-5 bold">Bytes Written</td>
-                    <td td class="py-4">{{ data.bytes_written }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 pl-5 pr-5 bold">Bytes Read</td>
-                    <td td class="py-4">{{ data.bytes_read }}</td>
-                  </tr>
-                </table>
-              </div>
-            </div>
-          </div>
-          </div>
-        </div>
-      </div>
-  </section>
-  </div>{% include 'footer.html' %}
+   </div>
+  </div>
+ </div>
+</div>
+</section>
+{% include 'footer.html' %}
 </div>
 </body>
 </html>

basicswap/templates/unlock.html

@@ -5,23 +5,36 @@
     {% if refresh %}
     <meta http-equiv="refresh" content="{{ refresh }}">
     {% endif %}
-    <link type="text/css" media="all" href="/static/css/libs/tailwind.min.css" rel="stylesheet">
-    <link type="text/css" media="all" href="/static/css/libs/dd.min.css" rel="stylesheet">
-    <link type="text/css" media="all" href="/static/css/style.css" rel="stylesheet">
-    <script src="/static/js/main.js"></script>
-    <script src="/static/js/libs/flowbite.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">
+  <script src="/static/js/main.js"></script>
+  <script src="/static/js/libs/flowbite.js"></script>
+<script>
+  const isDarkMode =
+    localStorage.getItem('color-theme') === 'dark' ||
+    (!localStorage.getItem('color-theme') &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches);
+
+  if (!localStorage.getItem('color-theme')) {
+    localStorage.setItem('color-theme', isDarkMode ? 'dark' : 'light');
+  }
+
+  document.documentElement.classList.toggle('dark', isDarkMode);
+</script>
     <link rel=icon sizes="32x32" type="image/png" href="/static/images/favicon/favicon-32.png">
     <title>{{ title }}</title>
   </head>
-  <body>
-    <section class="py-24 md:py-32 bg-white">
+  <body class="dark:bg-gray-700">
+    <section class="py-24 md:py-32">
       <div class="container px-4 mx-auto">
         <div class="max-w-sm mx-auto">
           <div class="mb-3 text-center">
             <a class="inline-block mb-6" href="#">
-              <img class="h-16" src="/static/images/logos/basicswap-logo-dark.svg" alt="BasicSwap">
+          <img src="/static/images/logos/basicswap-logo.svg" class="h-20 imageshow dark-image">
+          <img src="/static/images/logos/basicswap-logo-dark.svg" class="h-20 imageshow light-image">
             </a>
-            <p class="text-lg text-coolGray-500 font-medium mb-6" contenteditable="false">Unlock your wallets</p>
+            <p class="text-lg text-coolGray-500 font-medium mb-6 dark:text-white" contenteditable="false">Unlock your wallets</p>
             {% for m in messages %}
             <section class="py-4" id="messages_{{ m[0] }}" role="alert">
               <div class="container px-4 mx-auto">
@@ -69,7 +82,7 @@
           </div>
           <form method="post" autocomplete="off">
             <div class="mb-4">
-              <label class="block mb-2 text-coolGray-800 font-medium" for="" contenteditable="false">Your Password</label>
+              <label class="block mb-2 text-coolGray-800 font-medium dark:text-white" for="" contenteditable="false">Your Password</label>
               <div class="relative w-full">
                 <div class="absolute inset-y-0 right-0 flex items-center px-2">
                   <input class="hidden js-password-toggle" id="toggle" type="checkbox" />
@@ -81,12 +94,12 @@
                     </svg>
                   </label>
                 </div>
-                <input class="appearance-none block w-full p-3 leading-5 bg-gray-50 border border-gray-300  text-gray-900 rounded-lg shadow-md placeholder-coolGray-400 focus:ring-0 focus:outline-none focus:border-blue-500 js-password" name="password" id="password" type="password" autocomplete="off" />
+                <input class="hover:border-blue-500 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 js-password" name="password" id="password" type="password" autocomplete="off" />
               </div>
             </div>
             <button type="submit" name="unlock" value="Unlock" class="appearance-none focus:outline-none inline-block py-3 px-7 mb-6 w-full text-base text-blue-50 font-medium text-center leading-6 bg-blue-500 hover:bg-blue-600 focus:ring-0 rounded-md shadow-sm">Unlock</button>
             <p class="text-center">
-              <span class="text-xs font-medium" contenteditable="false">Need help?</span>
+              <span class="text-xs font-medium dark:text-white" contenteditable="false">Need help?</span>
               <a class="inline-block text-xs font-medium text-blue-500 hover:text-blue-600 hover:underline" href="https://academy.particl.io/en/latest/faq/get_support.html" target="_blank" contenteditable="false">Help / Tutorials</a>
             </p>
             <input type="hidden" name="formid" value="{{ form_id }}">
@@ -109,5 +122,66 @@ passwordToggle.addEventListener('change', function() {
   password.focus()
 })
 </script>
-  </body>
+    <script>
+      window.onload = () => {
+        toggleImages();
+      };
+
+      document.getElementById('theme-toggle').addEventListener('click', () => {
+        toggleImages();
+      });
+
+      function toggleImages() {
+        const html = document.querySelector('html');
+        const darkImages = document.querySelectorAll('.dark-image');
+        const lightImages = document.querySelectorAll('.light-image');
+
+        if (html && html.classList.contains('dark')) {
+          toggleImageDisplay(darkImages, 'block');
+          toggleImageDisplay(lightImages, 'none');
+        } else {
+          toggleImageDisplay(darkImages, 'none');
+          toggleImageDisplay(lightImages, 'block');
+        }
+      }
+
+      function toggleImageDisplay(images, display) {
+        images.forEach(img => {
+          img.style.display = display;
+        });
+      }
+    </script>
+<script>
+      var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
+      var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
+
+      if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+          themeToggleLightIcon.classList.remove('hidden');
+      } else {
+          themeToggleDarkIcon.classList.remove('hidden');
+      }
+
+      function setTheme(theme) {
+        if (theme === 'light') {
+          document.documentElement.classList.remove('dark');
+          localStorage.setItem('color-theme', 'light');
+        } else {
+          document.documentElement.classList.add('dark');
+          localStorage.setItem('color-theme', 'dark');
+        }
+      }
+
+      document.getElementById('theme-toggle').addEventListener('click', () => {
+        if (localStorage.getItem('color-theme') === 'dark') {
+          setTheme('light');
+        } else {
+          setTheme('dark');
+        }
+        themeToggleDarkIcon.classList.toggle('hidden');
+        themeToggleLightIcon.classList.toggle('hidden');
+        toggleImages();
+      });
+
+</script>
+</body>
 </html>

basicswap/templates/wallet.html

@@ -1,420 +1,533 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
-    <div class="flex flex-wrap items-center -m-2">
-      <div class="w-full md:w-1/2 p-2">
-        <ul class="flex flex-wrap items-center gap-x-3 mb-2">
-          <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
-              <p>Home</p>
-            </a>
-          </li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/wallets">Wallets</a></li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/wallet/{{ w.ticker }}">{{ w.ticker }}</a></li>
-        </ul>
+ <section class="p-5 mt-5">
+  <div class="flex flex-wrap items-center -m-2">
+   <div class="w-full md:w-1/2 p-2">
+    <ul class="flex flex-wrap items-center gap-x-3 mb-2">
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
+       <p>Home</p>
+      </a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/wallets">Wallets</a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/wallet/{{ w.ticker }}">{{ w.ticker }}</a>
+     </li>
+    </ul>
+   </div>
+  </div>
+ </section>
+ <section class="py-4">
+  <div class="container px-4 mx-auto">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
+    <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+    <div class="relative z-20 flex flex-wrap items-center -m-3">
+     <div class="w-full md:w-1/2 p-3">
+      <h2 class="text-4xl font-bold text-white tracking-tighter">
+       <span class="inline-block align-middle">
+        <img class="h-20" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }}">
+       </span>{{ w.name }} Wallet
+      </h2>
+      <p class="font-normal text-coolGray-200 dark:text-white pl-2 pt-5">Manage your {{ w.ticker }} wallet. {% if refresh %} (Page Refresh: {{ refresh }} seconds) {% endif %}</p>
+     </div>
+     <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
+      <a class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
+       <a class="mr-5 flex flex-wrap justify-center px-5 py-3 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border dark:bg-gray-500 dark:hover:bg-gray-700 border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="refresh" href="/wallet/{{ w.ticker }}">
+        <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+         <g fill="#ffffff" class="nc-icon-wrapper">
+          <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
+          <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
+         </g>
+        </svg>
+        <span>Refresh</span>
+       </a>
+     </div>
+    </div>
+   </div>
+  </div>
+ </section>
+ {% include 'inc_messages.html' %}
+ {% if w.updating %}
+ <section class="py-4" id="updating" role="alert">
+  <div class="container px-4 mx-auto">
+   <div class="p-6 bg-blue-100 border border-blue-200 rounded-md">
+    <div class="flex flex-wrap justify-between items-center -m-2">
+     <div class="flex-1 p-2">
+      <div class="flex flex-wrap -m-1">
+       <div class="w-auto p-1">
+        <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-700 dark:text-blue-800" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+         <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
+        </svg>
+        </svg>
+       </div>
+       <div class="flex-1 p-1">
+        <h3 class="font-medium text-sm text-blue-900">Updating...</h3>
+       </div>
       </div>
+     </div>
+     <div class="w-auto p-2">
+      <button type="button" class="ml-auto bg-blue-100 text-blue-500 rounded-lg focus:ring-0 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex h-8 w-8 focus:outline-none" data-dismiss-target="#updating" aria-label="Close">
+       <span class="sr-only">Close</span>
+       <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+       </svg>
+      </button>
+     </div>
     </div>
-  </section>
-  <section class="py-4">
-    <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
-        <div class="relative z-20 flex flex-wrap items-center -m-3">
-          <div class="w-full md:w-1/2 p-3">
-            <h2 class="text-4xl font-bold text-white tracking-tighter">
-              <span class="inline-block align-middle"><img class="h-20" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }}">
-              </span>{{ w.name }} Wallet
-            </h2>
-            <p class="font-semibold text-coolGray-200 pl-2 pt-5">Manage your {{ w.ticker }} wallet. {% if refresh %} (Page Refresh: {{ refresh }} seconds) {% endif %}</p>
-          </div>
-          <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
-            <a class="flex flex-wrap justify-center px-5 py-4 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" id="refresh" href="/wallet/{{ w.ticker }}">
-              <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                <g fill="#ffffff" class="nc-icon-wrapper">
-                  <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
-                  <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
-                </g>
-              </svg><span>Refresh</span></a>
-          </div>
-        </div>
+   </div>
+  </div>
+ </section>
+ {% endif %}
+ {% if w.havedata %}
+ {% if w.error %}
+ <section class="py-4">
+  <div class="container px-4 mx-auto">
+   <div class="p-6 bg-red-100 border border-red-200 rounded-md">
+    <div class="flex flex-wrap justify-between items-center -m-2">
+     <div class="flex-1 p-2">
+      <div class="flex flex-wrap -m-1">
+       <div class="w-auto p-1">
+        <svg class="relative top-0.5" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+         <path d="M10.4733 5.52667C10.4114 5.46419 10.3376 5.41459 10.2564 5.38075C10.1751 5.3469 10.088 5.32947 9.99999 5.32947C9.91198 5.32947 9.82485 5.3469 9.74361 5.38075C9.66237 5.41459 9.58863 5.46419 9.52666 5.52667L7.99999 7.06001L6.47333 5.52667C6.34779 5.40114 6.17753 5.33061 5.99999 5.33061C5.82246 5.33061 5.65219 5.40114 5.52666 5.52667C5.40112 5.65221 5.3306 5.82247 5.3306 6.00001C5.3306 6.17754 5.40112 6.3478 5.52666 6.47334L7.05999 8.00001L5.52666 9.52667C5.46417 9.58865 5.41458 9.66238 5.38073 9.74362C5.34689 9.82486 5.32946 9.912 5.32946 10C5.32946 10.088 5.34689 10.1752 5.38073 10.2564C5.41458 10.3376 5.46417 10.4114 5.52666 10.4733C5.58863 10.5358 5.66237 10.5854 5.74361 10.6193C5.82485 10.6531 5.91198 10.6705 5.99999 10.6705C6.088 10.6705 6.17514 10.6531 6.25638 10.6193C6.33762 10.5854 6.41135 10.5358 6.47333 10.4733L7.99999 8.94001L9.52666 10.4733C9.58863 10.5358 9.66237 10.5854 9.74361 10.6193C9.82485 10.6531 9.91198 10.6705 9.99999 10.6705C10.088 10.6705 10.1751 10.6531 10.2564 10.6193C10.3376 10.5854 10.4114 10.5358 10.4733 10.4733C10.5358 10.4114 10.5854 10.3376 10.6193 10.2564C10.6531 10.1752 10.6705 10.088 10.6705 10C10.6705 9.912 10.6531 9.82486 10.6193 9.74362C10.5854 9.66238 10.5358 9.58865 10.4733 9.52667L8.93999 8.00001L10.4733 6.47334C10.5358 6.41137 10.5854 6.33763 10.6193 6.25639C10.6531 6.17515 10.6705 6.08802 10.6705 6.00001C10.6705 5.912 10.6531 5.82486 10.6193 5.74362C10.5854 5.66238 10.5358 5.58865 10.4733 5.52667ZM12.7133 3.28667C12.0983 2.64994 11.3627 2.14206 10.5494 1.79266C9.736 1.44327 8.8612 1.25936 7.976 1.25167C7.0908 1.24398 6.21294 1.41266 5.39363 1.74786C4.57432 2.08307 3.82998 2.57809 3.20403 3.20404C2.57807 3.82999 2.08305 4.57434 1.74785 5.39365C1.41264 6.21296 1.24396 7.09082 1.25166 7.97602C1.25935 8.86121 1.44326 9.73601 1.79265 10.5494C2.14204 11.3627 2.64992 12.0984 3.28666 12.7133C3.90164 13.3501 4.63727 13.858 5.45063 14.2074C6.26399 14.5567 7.13879 14.7407 8.02398 14.7483C8.90918 14.756 9.78704 14.5874 10.6064 14.2522C11.4257 13.9169 12.17 13.4219 12.796 12.796C13.4219 12.17 13.9169 11.4257 14.2521 10.6064C14.5873 9.78706 14.756 8.90919 14.7483 8.024C14.7406 7.1388 14.5567 6.264 14.2073 5.45064C13.8579 4.63728 13.3501 3.90165 12.7133 3.28667ZM11.7733 11.7733C10.9014 12.6463 9.75368 13.1899 8.52585 13.3115C7.29802 13.4332 6.066 13.1254 5.03967 12.4405C4.01335 11.7557 3.25623 10.7361 2.89731 9.55566C2.53838 8.37518 2.59986 7.10677 3.07127 5.96653C3.54267 4.82629 4.39484 3.88477 5.48259 3.30238C6.57033 2.71999 7.82635 2.53276 9.03666 2.77259C10.247 3.01242 11.3367 3.66447 12.1202 4.61765C12.9036 5.57083 13.3324 6.76617 13.3333 8.00001C13.3357 8.70087 13.1991 9.39524 12.9313 10.0429C12.6635 10.6906 12.2699 11.2788 11.7733 11.7733Z" fill="#EF5944"></path>
+        </svg>
+       </div>
+       <div class="flex-1 p-1">
+        <h3 class="font-medium text-sm text-red-900 error_msg">
+         <p class="error_msg">Error: {{ w.error }}</p>
+        </h3>
+       </div>
       </div>
+     </div>
+     <div class="w-auto p-2">
+      <a href="#">
+       <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M8.94004 8L13.14 3.80667C13.2656 3.68113 13.3361 3.51087 13.3361 3.33333C13.3361 3.1558 13.2656 2.98554 13.14 2.86C13.0145 2.73447 12.8442 2.66394 12.6667 2.66394C12.4892 2.66394 12.3189 2.73447 12.1934 2.86L8.00004 7.06L3.80671 2.86C3.68117 2.73447 3.51091 2.66394 3.33337 2.66394C3.15584 2.66394 2.98558 2.73447 2.86004 2.86C2.7345 2.98554 2.66398 3.1558 2.66398 3.33333C2.66398 3.51087 2.7345 3.68113 2.86004 3.80667L7.06004 8L2.86004 12.1933C2.79756 12.2553 2.74796 12.329 2.71411 12.4103C2.68027 12.4915 2.66284 12.5787 2.66284 12.6667C2.66284 12.7547 2.68027 12.8418 2.71411 12.9231C2.74796 13.0043 2.79756 13.078 2.86004 13.14C2.92202 13.2025 2.99575 13.2521 3.07699 13.2859C3.15823 13.3198 3.24537 13.3372 3.33337 13.3372C3.42138 13.3372 3.50852 13.3198 3.58976 13.2859C3.671 13.2521 3.74473 13.2025 3.80671 13.14L8.00004 8.94L12.1934 13.14C12.2554 13.2025 12.3291 13.2521 12.4103 13.2859C12.4916 13.3198 12.5787 13.3372 12.6667 13.3372C12.7547 13.3372 12.8419 13.3198 12.9231 13.2859C13.0043 13.2521 13.0781 13.2025 13.14 13.14C13.2025 13.078 13.2521 13.0043 13.286 12.9231C13.3198 12.8418 13.3372 12.7547 13.3372 12.6667C13.3372 12.5787 13.3198 12.4915 13.286 12.4103C13.2521 12.329 13.2025 12.2553 13.14 12.1933L8.94004 8Z" fill="#752C21"></path>
+       </svg>
+      </a>
+     </div>
     </div>
-  </section>
-  {% include 'inc_messages.html' %}
-  {% if w.updating %}
-  <section class="py-4" id="updating" role="alert">
-    <div class="container px-4 mx-auto">
-      <div class="p-6 bg-blue-100 border border-blue-200 rounded-md">
-        <div class="flex flex-wrap justify-between items-center -m-2">
-          <div class="flex-1 p-2">
-            <div class="flex flex-wrap -m-1">
-              <div class="w-auto p-1">
-                <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-700 dark:text-blue-800" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                  <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
-                </svg>
-                </svg>
-              </div>
-              <div class="flex-1 p-1">
-                <h3 class="font-medium text-sm text-blue-900">Updating...</h3> </div>
-            </div>
+   </div>
+  </div>
+ </section>
+ {% else %}
+ <form method="post" autocomplete="off">
+  <section>
+   <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden">
+    <div class="pb-6 border-coolGray-100">
+     <div class="flex flex-wrap items-center justify-between -m-2">
+      <div class="w-full pt-2">
+       <div class="container mt-5 mx-auto">
+        <div class="pt-6 pb-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+         <div class="px-6">
+          <div class="w-full mt-6 pb-6 overflow-x-auto">
+           <table class="w-full min-w-max text-sm">
+            <thead class="uppercase">
+             <tr class="text-left">
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Wallet</span>
+               </div>
+              </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">Details</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">
+             <td class="py-3 px-6 bold w-96">Last updated:</td>
+             <td class="py-3 px-6">{{ w.lastupdated }}</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">{{ w.name }} Version:</td>
+             <td class="py-3 px-6">{{ w.version }}</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">
+              <span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
+               <img class="h-7" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }}">
+              </span>Balance:
+             </td>
+             <td class="py-3 px-6 bold">{{ w.balance }}</td>
+             {% if w.unconfirmed %}<td>Unconfirmed:</td>
+             <td>{{ w.unconfirmed }}</td>
+             {% endif %}
+            </tr>
+            {% if w.cid == '1' %}
+            <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">
+              <span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
+               <img class="h-7" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }} Blind">
+              </span>Blind Balance:
+             </td>
+             <td class="py-3 px-6 bold">{{ w.blind_balance }}</td>
+             {% if w.blind_unconfirmed %}
+             <td>Blind Unconfirmed:</td>
+             <td>{{ w.blind_unconfirmed }}</td>
+             {% endif %}
+            </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">
+              <span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
+               <img class="h-7" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }} Anon">
+              </span>Anon Balance:
+             </td>
+             <td class="py-3 px-6 bold">{{ w.anon_balance }}</td> {% if w.anon_pending %} <td>Anon Pending:</td>
+             <td>{{ w.anon_pending }}</td>{% endif %}
+            </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">Blocks:</td>
+             <td class="py-3 px-6">{{ w.blocks }} {% if w.known_block_count %} / {{ w.known_block_count }} {% 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">Synced:</td>
+             <td class="py-3 px-6">{{ w.synced }}</td>
+            </tr> {% if w.bootstrapping %} <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">Bootstrapping:</td>
+             <td class="py-3 px-6">{{ w.bootstrapping }}</td>
+            </tr> {% endif %}
+            {% if w.encrypted %}
+            <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">Locked:</td>
+             <td class="py-3 px-6">{{ w.locked }}</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">Expected Seed:</td>
+             <td class="py-3 px-6">{{ w.expected_seed }}</td> {% if block_unknown_seeds and w.expected_seed != true %} {# Only show addresses if wallet seed is correct #}
+            </tr>
+           </table>
           </div>
-          <div class="w-auto p-2">
-            <button type="button" class="ml-auto bg-blue-100 text-blue-500 rounded-lg focus:ring-0 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex h-8 w-8 focus:outline-none" data-dismiss-target="#updating" aria-label="Close"> <span class="sr-only">Close</span>
-              <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
-              </svg>
-            </button>
+         </div>
+         <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
+          <div class="w-full md:w-0/12">
+           <div class="flex flex-wrap justify-end -m-1.5">
+            <div class="w-full md:w-auto p-1.5 ml-2">
+             <input class="flex flex-wrap justify-center px-4 py-2.5 font-medium text-sm text-red-500 hover:text-red-600 border border-red-400 hover:border-red-500 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none" type="submit" name="reseed_{{ w.cid }}" value="Reseed wallet" onclick="return confirmReseed();">
+            </div>
+           </div>
           </div>
+         </div>
+     {% else %}
+       </tr>
+     {% if w.cid == '1' %}
+         <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">Stealth Address</td>
+          <td colspan=2 class="py-3 px-6 monospace bold select-all">{{ w.stealth_address }}</td>
+         </tr>
+         {% endif %}
+         {% if w.cid == '6' %}
+         <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">Main Address</td>
+          <td colspan=2 class="py-3 px-6 monospace bold select-all">{{ w.main_address }}</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">
+           <button type="submit" class="flex flex-wrap justify-center w-52 py-2 px-4 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" name="newaddr_{{ w.cid }}" value="New Subaddress">
+            <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+             <g fill="#ffffff" class="nc-icon-wrapper">
+              <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
+              <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
+             </g>
+            </svg> New Subaddress </button>
+          </td>
+          <td colspan=2 class="py-3 px-6 monospace select-all">{{ w.deposit_address }}</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="py-3 px-6 bold">
+           <button type="submit" class="flex flex-wrap justify-center w-52 py-2 px-4 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" name="newaddr_{{ w.cid }}" value="New Deposit Address">
+            <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+             <g fill="#ffffff" class="nc-icon-wrapper">
+              <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
+              <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
+             </g>
+            </svg>New Deposit Address</button>
+          </td>
+          <td colspan=2 class="py-3 px-6 monospace bold select-all" id="deposit_address">{{ w.deposit_address }}</td>
+         </tr>
+         {% endif %}
+         </table>
         </div>
+       </div>
       </div>
+     </div>
     </div>
-  </section>
-  {% endif %}
-  {% if w.havedata %}
-  {% if w.error %}
-  <section class="py-4">
-    <div class="container px-4 mx-auto">
-      <div class="p-6 bg-red-100 border border-red-200 rounded-md">
-        <div class="flex flex-wrap justify-between items-center -m-2">
-          <div class="flex-1 p-2">
-            <div class="flex flex-wrap -m-1">
-              <div class="w-auto p-1">
-                <svg class="relative top-0.5" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M10.4733 5.52667C10.4114 5.46419 10.3376 5.41459 10.2564 5.38075C10.1751 5.3469 10.088 5.32947 9.99999 5.32947C9.91198 5.32947 9.82485 5.3469 9.74361 5.38075C9.66237 5.41459 9.58863 5.46419 9.52666 5.52667L7.99999 7.06001L6.47333 5.52667C6.34779 5.40114 6.17753 5.33061 5.99999 5.33061C5.82246 5.33061 5.65219 5.40114 5.52666 5.52667C5.40112 5.65221 5.3306 5.82247 5.3306 6.00001C5.3306 6.17754 5.40112 6.3478 5.52666 6.47334L7.05999 8.00001L5.52666 9.52667C5.46417 9.58865 5.41458 9.66238 5.38073 9.74362C5.34689 9.82486 5.32946 9.912 5.32946 10C5.32946 10.088 5.34689 10.1752 5.38073 10.2564C5.41458 10.3376 5.46417 10.4114 5.52666 10.4733C5.58863 10.5358 5.66237 10.5854 5.74361 10.6193C5.82485 10.6531 5.91198 10.6705 5.99999 10.6705C6.088 10.6705 6.17514 10.6531 6.25638 10.6193C6.33762 10.5854 6.41135 10.5358 6.47333 10.4733L7.99999 8.94001L9.52666 10.4733C9.58863 10.5358 9.66237 10.5854 9.74361 10.6193C9.82485 10.6531 9.91198 10.6705 9.99999 10.6705C10.088 10.6705 10.1751 10.6531 10.2564 10.6193C10.3376 10.5854 10.4114 10.5358 10.4733 10.4733C10.5358 10.4114 10.5854 10.3376 10.6193 10.2564C10.6531 10.1752 10.6705 10.088 10.6705 10C10.6705 9.912 10.6531 9.82486 10.6193 9.74362C10.5854 9.66238 10.5358 9.58865 10.4733 9.52667L8.93999 8.00001L10.4733 6.47334C10.5358 6.41137 10.5854 6.33763 10.6193 6.25639C10.6531 6.17515 10.6705 6.08802 10.6705 6.00001C10.6705 5.912 10.6531 5.82486 10.6193 5.74362C10.5854 5.66238 10.5358 5.58865 10.4733 5.52667ZM12.7133 3.28667C12.0983 2.64994 11.3627 2.14206 10.5494 1.79266C9.736 1.44327 8.8612 1.25936 7.976 1.25167C7.0908 1.24398 6.21294 1.41266 5.39363 1.74786C4.57432 2.08307 3.82998 2.57809 3.20403 3.20404C2.57807 3.82999 2.08305 4.57434 1.74785 5.39365C1.41264 6.21296 1.24396 7.09082 1.25166 7.97602C1.25935 8.86121 1.44326 9.73601 1.79265 10.5494C2.14204 11.3627 2.64992 12.0984 3.28666 12.7133C3.90164 13.3501 4.63727 13.858 5.45063 14.2074C6.26399 14.5567 7.13879 14.7407 8.02398 14.7483C8.90918 14.756 9.78704 14.5874 10.6064 14.2522C11.4257 13.9169 12.17 13.4219 12.796 12.796C13.4219 12.17 13.9169 11.4257 14.2521 10.6064C14.5873 9.78706 14.756 8.90919 14.7483 8.024C14.7406 7.1388 14.5567 6.264 14.2073 5.45064C13.8579 4.63728 13.3501 3.90165 12.7133 3.28667ZM11.7733 11.7733C10.9014 12.6463 9.75368 13.1899 8.52585 13.3115C7.29802 13.4332 6.066 13.1254 5.03967 12.4405C4.01335 11.7557 3.25623 10.7361 2.89731 9.55566C2.53838 8.37518 2.59986 7.10677 3.07127 5.96653C3.54267 4.82629 4.39484 3.88477 5.48259 3.30238C6.57033 2.71999 7.82635 2.53276 9.03666 2.77259C10.247 3.01242 11.3367 3.66447 12.1202 4.61765C12.9036 5.57083 13.3324 6.76617 13.3333 8.00001C13.3357 8.70087 13.1991 9.39524 12.9313 10.0429C12.6635 10.6906 12.2699 11.2788 11.7733 11.7733Z" fill="#EF5944"></path>
-                </svg>
-              </div>
-              <div class="flex-1 p-1">
-                <h3 class="font-medium text-sm text-red-900 error_msg">
-                  <p class="error_msg">Error: {{ w.error }}</p>
-                </h3> </div>
+   </div>
+</div>
+</div>
+</section>
+<section class="p-6">
+ <div class="flex flex-wrap items-center">
+  <div class="w-full">
+   <h4 class="font-semibold text-black dark:text-white text-2xl">Withdraw</h4>
+  </div>
+ </div>
+</section>
+<section>
+ <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+  <div class="pb-6 border-coolGray-100">
+   <div class="flex flex-wrap items-center justify-between -m-2">
+    <div class="w-full pt-2">
+     <div class="container mt-5 mx-auto">
+      <div class="pt-6 pb-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+       <div class="px-6">
+        <div class="w-full mt-6 pb-6 overflow-x-auto">
+         <table class="w-full min-w-max text-sm">
+          <thead class="uppercase">
+           <tr class="text-left">
+            <th class="p-0">
+             <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Options</span>
+             </div>
+            </th>
+            <th class="p-0">
+             <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold p-10"></span>
+             </div>
+            </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 p-10"></span>
+             </div>
+            </th>
+           </tr>
+          </thead>
+          <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+           <td class="py-4 pl-6 bold w-1/4">
+            <button type="submit" class="flex flex-wrap justify-center py-2 px-4 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" name="withdraw_{{ w.cid }}" value="Withdraw" onclick="return confirmWithdrawal();">
+             <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+              <g fill="#ffffff" class="nc-icon-wrapper">
+               <polygon data-color="color-2" points="6,10 12,17 18,10 13,10 13,1 11,1 11,10 "></polygon>
+               <path fill="#ffffff" d="M22,21H2v-6H0v7c0,0.552,0.448,1,1,1h22c0.552,0,1-0.448,1-1v-7h-2V21z"></path>
+              </g>
+             </svg>Withdraw</button>
+           </td>
+           <td class="py-3 px-6">
+            <input placeholder="Address" class="hover:border-blue-500 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" type="text" name="to_{{ w.cid }}" value="{{ w.wd_address }}">
+           </td>
+           <td class="py-3 px-6">
+            <input placeholder="Amount" class="hover:border-blue-500 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" type="text" name="amt_{{ w.cid }}" value="{{ w.wd_value }}">
+           </td>
+          </tr>
+          <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+           <td class="py-3 px-6 bold">Subtract Fee:</td>
+           <td class="py-3 px-6">
+            <input class="hover:border-blue-500 w-5 h-5 form-check-input text-blue-600 bg-gray-50 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-1 dark:bg-gray-500 dark:border-gray-400" type="checkbox" name="subfee_{{ w.cid }}" {% if w.wd_subfee==true %} checked=checked{% endif %}>
+           </td>
+           <td></td>
+          </tr>
+          {% if w.cid == '1' %} 
+          <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+           <td class="py-3 px-6 bold">Type From -> To:</td>
+           <td class="py-3 px-6">
+            <div class="w-full md:flex-1">
+             <div class="relative">
+              <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+               <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+              </svg>
+              <select class="hover:border-blue-500 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="withdraw_type_from_{{ w.cid }}">
+               <option value="plain" {% if w.wd_type_from=='plain' %} selected{% endif %}>Plain</option>
+               <option value="blind" {% if w.wd_type_from=='blind' %} selected{% endif %}>Blind</option>
+               <option value="anon" {% if w.wd_type_from=='anon' %} selected{% endif %}>Anon</option>
+              </select>
+             </div>
             </div>
-          </div>
-          <div class="w-auto p-2">
-            <a href="#">
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M8.94004 8L13.14 3.80667C13.2656 3.68113 13.3361 3.51087 13.3361 3.33333C13.3361 3.1558 13.2656 2.98554 13.14 2.86C13.0145 2.73447 12.8442 2.66394 12.6667 2.66394C12.4892 2.66394 12.3189 2.73447 12.1934 2.86L8.00004 7.06L3.80671 2.86C3.68117 2.73447 3.51091 2.66394 3.33337 2.66394C3.15584 2.66394 2.98558 2.73447 2.86004 2.86C2.7345 2.98554 2.66398 3.1558 2.66398 3.33333C2.66398 3.51087 2.7345 3.68113 2.86004 3.80667L7.06004 8L2.86004 12.1933C2.79756 12.2553 2.74796 12.329 2.71411 12.4103C2.68027 12.4915 2.66284 12.5787 2.66284 12.6667C2.66284 12.7547 2.68027 12.8418 2.71411 12.9231C2.74796 13.0043 2.79756 13.078 2.86004 13.14C2.92202 13.2025 2.99575 13.2521 3.07699 13.2859C3.15823 13.3198 3.24537 13.3372 3.33337 13.3372C3.42138 13.3372 3.50852 13.3198 3.58976 13.2859C3.671 13.2521 3.74473 13.2025 3.80671 13.14L8.00004 8.94L12.1934 13.14C12.2554 13.2025 12.3291 13.2521 12.4103 13.2859C12.4916 13.3198 12.5787 13.3372 12.6667 13.3372C12.7547 13.3372 12.8419 13.3198 12.9231 13.2859C13.0043 13.2521 13.0781 13.2025 13.14 13.14C13.2025 13.078 13.2521 13.0043 13.286 12.9231C13.3198 12.8418 13.3372 12.7547 13.3372 12.6667C13.3372 12.5787 13.3198 12.4915 13.286 12.4103C13.2521 12.329 13.2025 12.2553 13.14 12.1933L8.94004 8Z" fill="#752C21"></path>
+           </td>
+           <td class="py-3 px-6">
+            <div class="w-full md:flex-1">
+             <div class="relative">
+              <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+               <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
               </svg>
-            </a>
-          </div>
+              <select class="hover:border-blue-500 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="withdraw_type_to_{{ w.cid }}">
+               <option value="plain" {% if w.wd_type_to=='plain' %} selected{% endif %}>Plain</option>
+               <option value="blind" {% if w.wd_type_to=='blind' %} selected{% endif %}>Blind</option>
+               <option value="anon" {% if w.wd_type_to=='anon' %} selected{% endif %}>Anon</option>
+              </select>
+             </div>
+            </div>
+           </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">Fee Rate:</td>
+           <td class="py-3 px-6 bold">{{ w.fee_rate }}</td>
+           <td class="py-3 px-6">
+            <b>Est Fee:</b> {{ w.est_fee }}
+           </td>
+          </tr>
+         </table>
         </div>
+       </div>
       </div>
+     </div>
     </div>
-  </section>
-  {% else %}
-  <form method="post" autocomplete="off">
-    <section class="bg-white">
-      <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
-        <div class="pb-6 border-coolGray-100">
-          <div class="flex flex-wrap items-center justify-between -m-2">
-            <div class="w-full pt-2">
-              <div class="container px-0 mx-auto mt-5">
-                <div class="overflow-x-auto relative border sm:rounded-lg">
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                      <tr>
-                        <th scope="col" class="py-3 px-6">Wallet</th>
-                        <th scope="col"></th>
-                      </tr>
-                    </thead>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold w-96">Last updated:</td>
-                      <td>{{ w.lastupdated }}</td>
-                    </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50 ">
-                      <td class="py-4 px-6 bold">{{ w.name }} Version:</td>
-                      <td>{{ w.version }}</td>
-                    </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-4 bold"><span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded"><img class="h-7" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }}"></span>Balance:</td>
-                      <td class="bold">{{ w.balance }}</td>
-                      {% if w.unconfirmed %}
-                      <td>Unconfirmed:</td>
-                      <td>{{ w.unconfirmed }}</td>
-                      {% endif %} </tr>
-                      {% if w.cid == '1' %}
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-4 bold"><span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded"><img class="h-7" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }} Blind"></span>Blind Balance:</td>
-                      <td class="bold">{{ w.blind_balance }}</td>
-                      {% if w.blind_unconfirmed %}
-                      <td>Blind Unconfirmed:</td>
-                      <td>{{ w.blind_unconfirmed }}</td>
-                      {% endif %}
-                    </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-4 bold"><span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded"><img class="h-7" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }} Anon"></span>Anon Balance:</td>
-                      <td class="bold">{{ w.anon_balance }}</td>
-                      {% if w.anon_pending %}
-                      <td>Anon Pending:</td>
-                      <td>{{ w.anon_pending }}</td>{% endif %}</tr>
-                      {% endif %}
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Blocks:</td>
-                      <td>{{ w.blocks }} {% if w.known_block_count %} / {{ w.known_block_count }} {% endif %}</td>
-                    </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Synced:</td>
-                      <td>{{ w.synced }}</td>
-                    </tr> {% if w.bootstrapping %}
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Bootstrapping:</td>
-                      <td>{{ w.bootstrapping }}</td>
-                    </tr>
-                    {% endif %}
-                    {% if w.encrypted %}
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Locked:</td>
-                      <td>{{ w.locked }}</td>
-                    </tr>
-                    {% endif %}
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Expected Seed:</td>
-                      <td>{{ w.expected_seed }}</td>
-                    {% if block_unknown_seeds and w.expected_seed != true %}  {# Only show addresses if wallet seed is correct #}
-                  </tr>
-                  </table>
-                </div>
-              </div>
-              <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
-                <div class="w-full md:w-0/12">
-                  <div class="flex flex-wrap justify-end -m-1.5">
-                    <div class="w-full md:w-auto p-1.5 ml-2">
-                      <input class="flex flex-wrap justify-center px-4 py-2.5 font-medium text-sm text-red-500 hover:text-red-600 border border-red-400 hover:border-red-500 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none" type="submit" name="reseed_{{ w.cid }}" value="Reseed wallet" onclick="return confirmReseed();"> </div>
-                  </div>
-                </div>
-              </div>
-            {% else %}
+   </div>
+  </div>
+ </div>
+</section>
+{% if w.cid != '6' %}
+{% if w.show_utxo_groups %}
+<section class="p-6">
+ <div class="flex flex-wrap items-center">
+  <div class="w-full">
+   <h4 class="font-semibold text-black dark:text-white text-2xl">UTXO Groups</h4>
+  </div>
+ </div>
+</section>
+<section>
+ <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+  <div class="pb-6 border-coolGray-100">
+   <div class="flex flex-wrap items-center justify-between -m-2">
+    <div class="w-full pt-2">
+     <div class="container mt-5 mx-auto">
+      <div class="pt-6 pb-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+       <div class="px-6">
+        <div class="w-full mt-6 pb-6 overflow-x-auto">
+         <table class="w-full min-w-max text-sm">
+          <thead class="uppercase">
+           <tr class="text-left">
+            <th class="p-0">
+             <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Options</span>
+             </div>
+            </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 p-10"></span>
+             </div>
+            </th>
+           </tr>
+          </thead>
+          <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+           <td class="py-3 px-6 w-1/4 bold">UTXO Groups:</td>
+           <td class="py-3 px-6">
+            <textarea class="hover:border-blue-500 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="tx_view" rows="10" readonly>{{ w.utxo_groups }}</textarea>
+           </td>
           </tr>
-          {% if w.cid == '1' %}
-              <tr class="bg-white border-t hover:bg-gray-50">
-                <td class="py-4 px-6 bold">Stealth Address</td>
-                <td colspan=2 class="monospace bold select-all">{{ w.stealth_address }}</td>
-              </tr>
-              {% endif %}
-              {% if w.cid == '6' %}
-              <tr class="bg-white border-t hover:bg-gray-50">
-                <td class="py-4 px-6 bold">Main Address</td>
-                <td colspan=2 class="monospace bold select-all">{{ w.main_address }}</td>
-              </tr>
-              <tr class="bg-white border-t hover:bg-gray-50">
-                <td class="py-4 px-6 bold">
-                  <button type="submit" class="flex flex-wrap justify-center w-52 py-2 px-4 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" name="newaddr_{{ w.cid }}" value="New Subaddress">
-                    <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                      <g fill="#ffffff" class="nc-icon-wrapper">
-                        <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
-                        <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
-                      </g>
-                    </svg> New Subaddress </button>
-                </td>
-                <td colspan=2 class="monospace select-all">{{ w.deposit_address }}</td>
-              </tr>
-              {% else %}
-              <tr class="bg-white border-t hover:bg-gray-50">
-                <td class="py-4 px-6 bold">
-                  <button type="submit" class="flex flex-wrap justify-center w-52 py-2 px-4 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" name="newaddr_{{ w.cid }}" value="New Deposit Address">
-                    <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                      <g fill="#ffffff" class="nc-icon-wrapper">
-                        <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
-                        <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
-                      </g>
-                    </svg> New Deposit Address </button>
-                </td>
-                <td colspan=2 class="monospace bold select-all" id="deposit_address">{{ w.deposit_address }}</td>
-              </tr>
-            {% endif %}
-          </table>
-            </div>
-          </div>
-          <section class="bg-white p-6">
-            <div class="flex flex-wrap items-center">
-              <div class="w-full">
-                <h4 class="font-semibold text-black text-2xl">Withdraw</h4> </div>
-            </div>
-          </section>
-          <div class="container px-0 mx-auto mt-2">
-            <div class="overflow-x-auto relative border sm:rounded-lg">
-              <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                  <tr>
-                    <th scope="col" class="py-3 px-6">OPTIONS</th>
-                    <th scope="col"></th>
-                    <th scope="col"></th>
-                    <th scope="col"></th>
-                  </tr>
-                </thead>
-                <tr class="bg-white border-t hover:bg-gray-50">
-                  <td class="py-4 pl-6 bold w-1/4">
-                    <button type="submit" class="flex flex-wrap justify-center py-2 px-4 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" name="withdraw_{{ w.cid }}" value="Withdraw" onclick="return confirmWithdrawal();">
-                      <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                        <g fill="#ffffff" class="nc-icon-wrapper">
-                          <polygon data-color="color-2" points="6,10 12,17 18,10 13,10 13,1 11,1 11,10 "></polygon>
-                          <path fill="#ffffff" d="M22,21H2v-6H0v7c0,0.552,0.448,1,1,1h22c0.552,0,1-0.448,1-1v-7h-2V21z"></path>
-                        </g>
-                      </svg> Withdraw </button>
-                  </td>
-                  <td class="py-4 pr-5">
-                    <input placeholder="Address" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 w-full block p-2.5" type="text" name="to_{{ w.cid }}" value="{{ w.wd_address }}"> </td>
-                  <td class="py-4 pr-5">
-                    <input placeholder="Amount" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="text" name="amt_{{ w.cid }}" value="{{ w.wd_value }}"> </td>
-                </tr>
-                <tr class="bg-white border-t hover:bg-gray-50">
-                  <td class="py-4 px-6 bold"> Subtract Fee: </td>
-                  <td>
-                    <input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain cursor-pointer" type="checkbox" name="subfee_{{ w.cid }}" {% if w.wd_subfee==true %} checked=checked{% endif %}> </td>
-                  <td></td>
-                </tr>
-                {% if w.cid == '1' %}
-                <tr class="bg-white border-t hover:bg-gray-50">
-                  <td class="py-4 px-6 bold">Type From -> To:</td>
-                  <td class="py-4 pr-5">
-                    <div class="w-full md:flex-1">
-                      <div class="relative">
-                        <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                          <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-                        </svg>
-                        <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="withdraw_type_from_{{ w.cid }}">
-                          <option value="plain" {% if w.wd_type_from=='plain' %} selected{% endif %}>Plain</option>
-                          <option value="blind" {% if w.wd_type_from=='blind' %} selected{% endif %}>Blind</option>
-                          <option value="anon" {% if w.wd_type_from=='anon' %} selected{% endif %}>Anon</option>
-                        </select>
-                      </div>
-                    </div>
-                  </td>
-                  <td class="py-4 pr-5">
-                    <div class="w-full md:flex-1">
-                      <div class="relative">
-                        <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                          <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-                        </svg>
-                        <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="withdraw_type_to_{{ w.cid }}">
-                          <option value="plain" {% if w.wd_type_to=='plain' %} selected{% endif %}>Plain</option>
-                          <option value="blind" {% if w.wd_type_to=='blind' %} selected{% endif %}>Blind</option>
-                          <option value="anon" {% if w.wd_type_to=='anon' %} selected{% endif %}>Anon</option>
-                        </select>
-                      </div>
-                    </div>
-                  </td>
-                  <td class="py-4"> </td>
-                </tr>
-                {% endif %}
-                <tr class="bg-white border-t hover:bg-gray-50">
-                  <td class="py-4 px-6 bold">Fee Rate:</td>
-                  <td>{{ w.fee_rate }}</td>
-                  <td><b>Est Fee:</b> {{ w.est_fee }}</td>
-                  <td></td>
-                </tr>
-              </table>
-            </div>
-          </div>
-          {% if w.cid != '6' %}
-           {% if w.show_utxo_groups %}
-          <section class="bg-white p-6">
-            <div class="flex flex-wrap items-center">
-              <div class="w-full">
-                <h4 class="font-semibold text-black text-2xl">UTXO Groups</h4></div>
-            </div>
-          </section>
-          <div class="container px-0 mx-auto mt-2">
-            <div class="overflow-x-auto relative border sm:rounded-lg">
-              <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                  <tr>
-                    <th scope="col" class="py-3 px-6">OPTIONS</th>
-                    <th scope="col"></th>
-                  </tr>
-                </thead>
-                <tr class="bg-white border-t hover:bg-gray-50">
-                  <td class="py-4 px-6 w-1/4 bold">UTXO Groups:</td>
-                  <td class="py-4 pr-7">
-                    <textarea class="wwhitespace-pre-line outline-none block p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 w-full monospace" id="tx_view" rows="6" readonly>{{ w.utxo_groups }}</textarea>
-                  </td>
-                </tr>
-                <tr class="bg-white border-t hover:bg-gray-50">
-                  <td class="py-4 px-6">
-                    <button type="submit" class="flex flex-wrap justify-center px-4 py-2 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" id="create_utxo" name="create_utxo" value="Create UTXO" onclick="return confirmUTXOResize();">
-                      <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                        <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" class="nc-icon-wrapper">
-                          <polyline points="1 15 1 21 23 21 23 15"></polyline>
-                          <line x1="12" y1="3" x2="12" y2="13" stroke="#ffffff"></line>
-                          <line x1="17" y1="8" x2="7" y2="8" stroke="#ffffff"></line>
-                        </g>
-                      </svg> Create UTXO </button>
-                  </td>
-                  <td>
-                    <input placeholder="Amount" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" type="text" name="utxo_value" value="{{ w.utxo_value }}"></td>
-                </tr>
-              </table>
-            </div>
-          </div>
-          <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
-            <div class="w-full md:w-0/12">
-              <div class="flex flex-wrap justify-end -m-1.5">
-                <div class="w-full md:w-auto p-1.5 ml-2">
-                  <button type="submit" class="flex flex-wrap justify-center 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" id="closeutxogroups" name="closeutxogroups" value="Close UTXO Groups">
-                    <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                      <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" class="nc-icon-wrapper">
-                        <rect x="2" y="9" width="12" height="14"></rect>
-                        <polyline points=" 6,5 18,5 18,19 " stroke="#ffffff"></polyline>
-                        <polyline points=" 10,1 22,1 22,15 " stroke="#ffffff"></polyline>
-                      </g>
-                    </svg> Close UTXO Groups </button>
-                </div>
-              </div>
-            </div>
-          </div>
-          {% else %}
-          <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
-            <div class="w-full md:w-0/12">
-              <div class="flex flex-wrap justify-end -m-1.5">
-                <div class="w-full md:w-auto p-1.5 ml-2">
-                  <button type="submit" class="flex flex-wrap justify-center 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" id="showutxogroups" name="showutxogroups" value="Show UTXO Groups">
-                    <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                      <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" class="nc-icon-wrapper">
-                        <rect x="2" y="9" width="12" height="14"></rect>
-                        <polyline points=" 6,5 18,5 18,19 " stroke="#ffffff"></polyline>
-                        <polyline points=" 10,1 22,1 22,15 " stroke="#ffffff"></polyline>
-                      </g>
-                    </svg> Show UTXO Groups </button>
-                </div>
-              </div>
-            </div>
-          </div>
-          {% endif %}
-          {% endif %}
-          {% endif %}
-          {% endif %}
-          {% endif %}
-          <!-- havedata -->
-          <input type="hidden" name="formid" value="{{ form_id }}"></form>
+          <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+           <td class="py-3 px-6">
+            <button type="submit" class="flex flex-wrap justify-center px-4 py-2 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" id="create_utxo" name="create_utxo" value="Create UTXO" onclick="return confirmUTXOResize();">
+             <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" class="nc-icon-wrapper">
+               <polyline points="1 15 1 21 23 21 23 15"></polyline>
+               <line x1="12" y1="3" x2="12" y2="13" stroke="#ffffff"></line>
+               <line x1="17" y1="8" x2="7" y2="8" stroke="#ffffff"></line>
+              </g>
+             </svg>Create UTXO</button>
+           </td>
+           <td class="py-3 px-6">
+            <input placeholder="Amount" class="hover:border-blue-500 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" type="text" name="utxo_value" value="{{ w.utxo_value }}">
+           </td>
+          </tr>
+         </table>
+        </div>
+       </div>
+      </div>
+     </div>
+    </div>
+   </div>
+  </div>
+ </div>
+</section>
+<section>
+ <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+  <div class="pb-6 border-coolGray-100">
+   <div class="flex flex-wrap items-center justify-between -m-2">
+    <div class="w-full pt-2">
+     <div class="container mt-5 mx-auto">
+      <div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+       <div class="px-6">
+        <div class="flex flex-wrap justify-end">
+         <div class="w-full md:w-auto p-1.5">
+          <button type="submit" class="flex flex-wrap justify-center 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" id="closeutxogroups" name="closeutxogroups" value="Close UTXO Groups">
+           <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+            <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" class="nc-icon-wrapper">
+             <rect x="2" y="9" width="12" height="14"></rect>
+             <polyline points=" 6,5 18,5 18,19 " stroke="#ffffff"></polyline>
+             <polyline points=" 10,1 22,1 22,15 " stroke="#ffffff"></polyline>
+            </g>
+           </svg>Close UTXO Groups</button>
+         </div>
+        </div>
+       </div>
+      </div>
+     </div>
+    </div>
+   </div>
   </div>
-  <script>
-    function confirmReseed() {
-      return confirm("Are you sure?\nBackup your wallet before and after.\nWon't detect used keys.\nShould only be used for new wallets.");
-    }
+ </div>
+</section>
+{% else %}
+<section>
+ <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+  <div class="pb-6 border-coolGray-100">
+   <div class="flex flex-wrap items-center justify-between -m-2">
+    <div class="w-full pt-2">
+     <div class="container mt-5 mx-auto">
+      <div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+       <div class="px-6">
+        <div class="flex flex-wrap justify-end">
+         <div class="w-full md:w-auto p-1.5">
+          <button type="submit" class="flex flex-wrap justify-center 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" id="showutxogroups" name="showutxogroups" value="Show UTXO Groups">
+           <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+            <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" class="nc-icon-wrapper">
+             <rect x="2" y="9" width="12" height="14"></rect>
+             <polyline points=" 6,5 18,5 18,19 " stroke="#ffffff"></polyline>
+             <polyline points=" 10,1 22,1 22,15 " stroke="#ffffff"></polyline>
+            </g>
+           </svg>Show UTXO Groups</button>
+         </div>
+        </div>
+       </div>
+      </div>
+     </div>
+    </div>
+   </div>
+  </div>
+ </div>
+</section>
+{% endif %}
+{% endif %}
+{% endif %}
+{% endif %}
+{% endif %}
+<!-- havedata -->
+<input type="hidden" name="formid" value="{{ form_id }}">
+</form>
+</div>
+<script>
+ function confirmReseed() {
+  return confirm("Are you sure?\nBackup your wallet before and after.\nWon't detect used keys.\nShould only be used for new wallets.");
+ }
 
-    function confirmWithdrawal() {
-      return confirm("Are you sure?");
-    }
+ function confirmWithdrawal() {
+  return confirm("Are you sure?");
+ }
 
-    function confirmUTXOResize() {
-      return confirm("Are you sure?");
-    }
-  </script>
-  </div>
+ function confirmUTXOResize() {
+  return confirm("Are you sure?");
+ }
+</script>
+</div>
 </div>
 </div>
 </div>
 {% include 'footer.html' %}
 </body>
-</html>
+</html>

basicswap/templates/wallets.html

@@ -1,121 +1,159 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
-    <div class="flex flex-wrap items-center -m-2">
-      <div class="w-full md:w-1/2 p-2">
-        <ul class="flex flex-wrap items-center gap-x-3 mb-2">
-          <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
-              <p>Home</p>
-            </a>
-          </li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/wallets">Wallets</a></li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-        </ul>
-      </div>
+ <section class="p-5 mt-5">
+  <div class="flex flex-wrap items-center -m-2">
+   <div class="w-full md:w-1/2 p-2">
+    <ul class="flex flex-wrap items-center gap-x-3 mb-2">
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
+       <p>Home</p>
+      </a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/wallets">Wallets</a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+    </ul>
+   </div>
+  </div>
+ </section>
+ <section class="py-3">
+  <div class="container px-4 mx-auto">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
+    <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+    <div class="relative z-20 flex flex-wrap items-center -m-3">
+     <div class="w-full md:w-1/2 p-3">
+      <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Wallets</h2>
+      <p class="font-normal text-coolGray-200 dark:text-white">Check your coin balances and manage your wallets. {% if refresh %} (Page Refresh: {{ refresh }} seconds) {% endif %}</p>
+     </div>
+     <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
+      <a class="mr-5 flex flex-wrap justify-center px-5 py-3 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border dark:bg-gray-500 dark:hover:bg-gray-700 border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="refresh" href="/changepassword">
+       <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+        <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
+         <rect x="3" y="11" width="18" height="12" rx="2"></rect>
+         <circle cx="12" cy="17" r="2" stroke="#ffffff"></circle>
+         <path d="M17,7V6a4.951,4.951,0,0,0-4.9-5H12A4.951,4.951,0,0,0,7,5.9V7" stroke="#ffffff"></path>
+        </g>
+       </svg>
+       <span>Change Password</span>
+      </a>
+      <a class="flex flex-wrap justify-center px-5 py-3 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border dark:bg-gray-500 dark:hover:bg-gray-700 border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="refresh" href="/wallets">
+       <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+        <g fill="#ffffff" class="nc-icon-wrapper">
+         <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
+         <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
+        </g>
+       </svg>
+       <span>Refresh</span>
+      </a>
+     </div>
     </div>
-  </section>
-  <section class="py-4">
-    <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
-        <div class="relative z-20 flex flex-wrap items-center -m-3">
-          <div class="w-full md:w-1/2 p-3">
-            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Wallets</h2>
-            <p class="font-semibold text-coolGray-200">Check your coin balances and manage your wallets. {% if refresh %} (Page Refresh: {{ refresh }} seconds) {% endif %}</p>
-          </div>
-          <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
-            <a class="mr-5 flex flex-wrap justify-center px-5 py-4 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" id="refresh" href="/changepassword">
-              <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
-                <rect x="3" y="11" width="18" height="12" rx="2"></rect><circle cx="12" cy="17" r="2" stroke="#ffffff"></circle>
-                <path d="M17,7V6a4.951,4.951,0,0,0-4.9-5H12A4.951,4.951,0,0,0,7,5.9V7" stroke="#ffffff"></path></g></svg>
-                <span>Change Password</span></a>
-             <a class="flex flex-wrap justify-center px-5 py-4 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" id="refresh" href="/wallets">
-              <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                <g fill="#ffffff" class="nc-icon-wrapper">
-                  <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
-                  <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
-                </g>
-              </svg><span>Refresh</span></a>             
-          </div>
-
-        </div>
+   </div>
+  </div>
+ </section>
+ {% include 'inc_messages.html' %}
+ <section class="py-4">
+  <div class="container px-4 mx-auto">
+   <div class="flex flex-wrap -m-4"> {% for w in wallets %} {% if w.havedata %} {% if w.error %} <p>Error: {{ w.error }}</p> {% else %} <div class="w-full lg:w-1/3 p-4">
+     <div class="bg-gray-50 shadow rounded overflow-hidden dark:bg-gray-500">
+      <div class="pt-6 px-6 mb-10 flex justify-between items-center">
+       <span class="inline-flex items-center justify-center w-9 h-10 bg-white-50 rounded">
+        <img class="h-9" src="/static/images/coins/{{ w.name }}.png" alt="">
+       </span>
+       <a class="py-2 px-3 bg-blue-500 text-xs text-white rounded-full hover:bg-blue-600" href="/wallet/{{ w.ticker }}">Manage</a>
       </div>
-    </div>
-  </section>
-  {% include 'inc_messages.html' %}
-  <section class="bg-white py-4">
-    <div class="container px-4 mx-auto">
-      <div class="flex flex-wrap -m-4">
-        {% for w in wallets %}
-        {% if w.havedata %}
-        {% if w.error %}
-        <p>Error: {{ w.error }}</p>
-        {% else %}
-        <div class="w-full lg:w-1/3 p-4">
-          <div class="bg-white shadow rounded overflow-hidden">
-            <div class="pt-6 px-6 mb-10 flex justify-between items-center"> <span class="inline-flex items-center justify-center w-9 h-10 bg-white-50 rounded">
-                <img class="h-9" src="/static/images/coins/{{ w.name }}.png" alt=""></span> <a class="py-2 px-3 bg-blue-500 text-xs text-white rounded-full hover:bg-blue-600" href="/wallet/{{ w.ticker }}">Manage</a></div>
-            <div class="px-6 mb-6">
-              <h4 class="text-xl font-bold">{{ w.name }} <span class="inline-block font-medium text-xs text-gray-500">({{ w.ticker }})</span></h4>
-              <p class="text-xs text-gray-500">Version: {{ w.version }} {% if w.updating %} <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">Updating</span></p>{% endif %}</div>
-            <div class="p-6 bg-gray-50">
-              <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Balance:</h4> <span class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.balance }}</span></div>{% if w.unconfirmed %}
-              <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Unconfirmed:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.unconfirmed }}</span></div>{% endif %}{% if w.cid == '1' %}
-              <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Blind Balance:</h4> <span class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.blind_balance }}</span></div>{% if w.blind_unconfirmed %}
-              <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Blind Unconfirmed:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.blind_unconfirmed }}</span></div>{% endif %}
-              <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Anon Balance:</h4> <span class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.anon_balance }}</span></div>{% if w.anon_pending %}
-              <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Anon Pending:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.anon_pending }}</span></div>{% endif %}{% endif %}
-              <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Blocks:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.blocks }}{% if w.known_block_count %} / {{ w.known_block_count }}{% endif %}</span></div>
-              <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Last Updated:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.lastupdated }}</span></div>{% if w.bootstrapping %}
-              <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Bootstrapping:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.bootstrapping }}</span></div>{% endif %}{% if w.encrypted %}
-              <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Locked:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.locked }}</span></div>{% endif %}
-              <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Expected Seed:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.expected_seed }}</span></div>
-              <div class="flex justify-between mb-1 mt-10"> <span class="text-xs font-medium text-blue-700">Blockchain</span> <span class="text-xs font-medium text-blue-700">{{ w.synced }}%</span></div>
-              <div class="w-full bg-gray-200 rounded-full h-1">
-                <div class="bg-blue-500 h-1 rounded-full" style="width: {{ w.synced }}%"></div>
-              </div>
-            </div>
-          </div>
-          {% endif %}
-          {% endif %}
-          <!-- havedata -->
-        </div>
-        {% endfor %}
-        <script>
-          function confirmReseed() {
-            return confirm("Are you sure?\nBackup your wallet before and after.\nWon't detect used keys.\nShould only be used for new wallets.");
-          }
-          function confirmWithdrawal() {
-            return confirm("Are you sure?");
-          }
-        </script>
+      <div class="px-6 mb-6">
+       <h4 class="text-xl font-bold dark:text-white">{{ w.name }}
+        <span class="inline-block font-medium text-xs text-gray-500 dark:text-white">({{ w.ticker }})</span>
+       </h4>
+       <p class="text-xs text-gray-500 dark:text-gray-200">Version: {{ w.version }} {% if w.updating %} <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-700 dark:hover:bg-gray-700">Updating..</span>
+       </p>{% endif %}
       </div>
-  </section>
-  </div>
+      <div class="p-6 bg-coolGray-100 dark:bg-gray-600">
+       <!-- bg here -->
+       <div class="flex mb-2 justify-between items-center">
+        <h4 class="text-xs font-medium dark:text-white">Balance:</h4>
+        <span class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.balance }}</span>
+       </div>{% if w.unconfirmed %}
+       <div class="flex mb-2 justify-between items-center">
+        <h4 class="text-xs font-medium dark:text-white">Unconfirmed:</h4>
+        <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.unconfirmed }}</span>
+       </div>
+       {% endif %}
+       {% if w.cid == '1' %}
+       <div class="flex mb-2 justify-between items-center">
+        <h4 class="text-xs font-medium dark:text-white">Blind Balance:</h4>
+        <span class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.blind_balance }}</span>
+       </div>{% if w.blind_unconfirmed %}
+       <div class="flex mb-2 justify-between items-center">
+        <h4 class="text-xs font-medium dark:text-white">Blind Unconfirmed:</h4>
+        <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.blind_unconfirmed }}</span>
+       </div>{% endif %}
+       <div class="flex mb-2 justify-between items-center">
+        <h4 class="text-xs font-medium dark:text-white">Anon Balance:</h4>
+        <span class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.anon_balance }}</span>
+       </div>{% if w.anon_pending %}
+       <div class="flex mb-2 justify-between items-center">
+        <h4 class="text-xs font-medium dark:text-white">Anon Pending:</h4>
+        <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.anon_pending }}</span>
+       </div>
+       {% endif %}
+       {% endif %}
+       <div class="flex mb-2 justify-between items-center">
+        <h4 class="text-xs font-medium dark:text-white">Blocks:</h4>
+        <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.blocks }}{% if w.known_block_count %} / {{ w.known_block_count }}{% endif %}</span>
+       </div>
+       <div class="flex mb-2 justify-between items-center">
+        <h4 class="text-xs font-medium dark:text-white">Last Updated:</h4>
+        <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.lastupdated }}</span>
+       </div>{% if w.bootstrapping %}
+       <div class="flex mb-2 justify-between items-center">
+        <h4 class="text-xs font-medium dark:text-white">Bootstrapping:</h4>
+        <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.bootstrapping }}</span>
+       </div>{% endif %}
+       {% if w.encrypted %}
+       <div class="flex mb-2 justify-between items-center">
+        <h4 class="text-xs font-medium dark:text-white">Locked:</h4>
+        <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.locked }}</span>
+       </div>{% endif %} <div class="flex mb-2 justify-between items-center">
+        <h4 class="text-xs font-medium dark:text-white">Expected Seed:</h4>
+        <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.expected_seed }}</span>
+       </div>
+       <div class="flex justify-between mb-1 mt-10">
+        <span class="text-xs font-medium text-blue-700 dark:text-gray-200">Blockchain</span>
+        <span class="text-xs font-medium text-blue-700 dark:text-gray-200">{{ w.synced }}%</span>
+       </div>
+       <div class="w-full bg-gray-200 rounded-full h-1">
+        <div class="bg-blue-500 h-1 rounded-full" style="width: {{ w.synced }}%"></div>
+       </div>
+      </div>
+     </div>
+     {% endif %}
+     {% endif %}
+     <!-- havedata -->
+    </div> {% endfor %} <script>
+     function confirmReseed() {
+      return confirm("Are you sure?\nBackup your wallet before and after.\nWon't detect used keys.\nShould only be used for new wallets.");
+     }
+
+     function confirmWithdrawal() {
+      return confirm("Are you sure?");
+     }
+    </script>
+   </div>
+ </section>
+</div>
 {% include 'footer.html' %}
 </body>
-</html>
+</html>

basicswap/templates/watched.html

@@ -1,122 +1,175 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
-    <div class="flex flex-wrap items-center -m-2">
-      <div class="w-full md:w-1/2 p-2">
-        <ul class="flex flex-wrap items-center gap-x-3 mb-2">
-          <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
-              <p>Home</p>
-            </a>
-          </li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/watched">Watched Outputs</a></li>
-          <li>
-            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-            </svg>
-          </li>
-        </ul>
+ <section class="p-5 mt-5">
+  <div class="flex flex-wrap items-center -m-2">
+   <div class="w-full md:w-1/2 p-2">
+    <ul class="flex flex-wrap items-center gap-x-3 mb-2">
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
+       <p>Home</p>
+      </a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/watched">Watched Outputs</a>
+     </li>
+     <li>
+      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+      </svg>
+     </li>
+    </ul>
+   </div>
+  </div>
+ </section>
+ <section class="py-4">
+  <div class="container px-4 mx-auto">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
+    <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+    <div class="relative z-20 flex flex-wrap items-center -m-3">
+     <div class="w-full md:w-1/2 p-3">
+      <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Watched Outputs</h2>
+      <p class="font-normal text-coolGray-200 dark:text-white">Watch when your outputs involved in a swap get spent on the blockchain.</p>
+     </div>
+     <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
+      {% if refresh %}
+      <a id="refresh" href="/watched" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border 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 rounded-md shadow-button focus:ring-0 focus:outline-none">
+       <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+        <g fill="#ffffff">
+         <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
+         <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
+        </g>
+       </svg>
+       <span>Refresh {{ refresh }} seconds</span>
+      </a>
+      {% else %}
+      <a id="refresh" href="/watched" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white borderdark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600 border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+       <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+        <g fill="#ffffff">
+         <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
+         <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
+        </g>
+       </svg>
+       <span>Refresh</span>
+      </a>
+    {% endif %}
       </div>
     </div>
-  </section>
-  <section class="py-4">
-    <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
-        <div class="relative z-20 flex flex-wrap items-center -m-3">
-          <div class="w-full md:w-1/2 p-3">
-            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Watched Outputs</h2>
-            <p class="font-semibold text-coolGray-200">Watch when your outputs involved in a swap get spent on the blockchain.</p>
-          </div>
-          <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto"> 
-            {% if refresh %}
-            <a id="refresh" href="/watched" class="flex flex-wrap justify-center px-5 py-4 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">
-              <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                <g fill="#ffffff">
-                  <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
-                  <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
-                </g>
-              </svg><span>Refresh {{ refresh }} seconds</span></a>
-              {% else %}
-            <a id="refresh" href="/watched" class="flex flex-wrap justify-center px-5 py-4 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">
-              <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                <g fill="#ffffff">
-                  <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
-                  <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
-                </g>
-              </svg><span>Refresh</span></a>
-            {% endif %}
-          </div>
+   </div>
+  </div>
+ </section>
+ <section class="p-6">
+  <div class="flex flex-wrap items-center">
+   <div class="w-full">
+    <h4 class="font-semibold text-black dark:text-white text-2xl">Last Scanned</h4>
+   </div>
+  </div>
+ </section>
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+   <div class="pb-6 border-coolGray-100">
+    <div class="flex flex-wrap items-center justify-between -m-2">
+     <div class="w-full pt-2">
+      <div class="container mt-5 mx-auto">
+       <div class="pt-6 pb-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+        <div class="px-6">
+         <div class="w-full mt-6 pb-6 overflow-x-auto">
+          <table class="w-full min-w-max text-sm">
+           <thead class="uppercase">
+            <tr class="text-left">
+             <th class="p-0">
+              <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Coin</span>
+              </div>
+             </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">Height</span>
+              </div>
+             </th>
+            </tr>
+           </thead>
+           {% for ls in last_scanned %}
+           <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">{{ ls[0] }}</td>
+            <td class="py-3 px-6">{{ ls[1] }}</td>
+           </tr>
+           {% endfor %}
+          </table>
+         </div>
         </div>
+       </div>
       </div>
+     </div>
     </div>
-  </section>
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
-      <div class="pb-6 border-coolGray-100">
-        <div class="flex flex-wrap items-center justify-between -m-2">
-          <div class="w-full pt-2">
-            <section class="bg-white p-6">
-              <div class="flex flex-wrap items-center">
-                <div class="w-full">
-                  <h4 class="font-semibold text-black text-2xl">Last Scanned<h4>
-                </div>
-              </div>
-            </section>
-            <div class="container px-0 mx-auto">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                    <tr>
-                      <th scope="col" class="py-3 px-6">Coin</th>
-                      <th scope="col">Height</th>
-                    </tr>
-                  </thead>
-                  {% for ls in last_scanned %}
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold w-96">{{ ls[0] }}</td>
-                    <td class="py-4">{{ ls[1] }}</td>
-                  </tr>
-                  {% endfor %}
-                </table>
-              </div>
-            </div>
-            <div class="container px-0 mx-auto mt-10">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                    <tr>
-                      <th scope="col" class="py-3 px-6 w-96">Bid ID</th>
-                      <th scope="col">Chain</th>
-                      <th scope="col">Txid</th>
-                      <th scope="col">Index</th>
-                      <th scope="col">Type</th>
-                    </tr>
-                  </thead>
-                  {% for wo in watched_outputs %}
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold w-96"><a href=/bid/{{ wo[0] }}>{{ wo[0] }}</a></td>
-                    <td class="py-4">{{ wo[1] }}</td>
-                    <td class="py-4">{{ wo[2] }}</td>
-                    <td class="py-4">{{ wo[3] }}</td>
-                    <td class="py-4">{{ wo[4] }}</td>
-                  </tr>
-                  {% endfor %}
-                </table>
-              </div>
-            </div>
-          </div>
+   </div>
+  </div>
+ </section>
+ <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden">
+  <div class="pb-6 border-coolGray-100">
+   <div class="flex flex-wrap items-center justify-between -m-2">
+    <div class="w-full pt-2">
+     <div class="container mt-5 mx-auto">
+      <div class="pt-6 pb-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+       <div class="px-6">
+        <div class="w-full mt-6 pb-6 overflow-x-auto">
+         <table class="w-full min-w-max text-sm">
+          <thead class="uppercase">
+           <tr class="text-left">
+            <th class="p-0">
+             <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Bid ID</span>
+             </div>
+            </th>
+            <th class="p-0">
+             <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Chain</span>
+             </div>
+            </th>
+            <th class="p-0">
+             <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Txid</span>
+             </div>
+            </th>
+            <th class="p-0">
+             <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Index</span>
+             </div>
+            </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">Type</span>
+             </div>
+            </th>
+           </tr>
+          </thead>
+          {% for wo in watched_outputs %}
+          <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">
+            <a href=/bid/{{ wo[0] }}>{{ wo[0] }}</a>
+           </td>
+           <td class="py-3 px-6">{{ wo[1] }}</td>
+           <td class="py-3 px-6">{{ wo[2] }}</td>
+           <td class="py-3 px-6">{{ wo[3] }}</td>
+           <td class="py-3 px-6">{{ wo[4] }}</td>
+          </tr>
+          {% endfor %}
+         </table>
         </div>
+       </div>
       </div>
+     </div>
     </div>
-  </section>
+   </div>
+  </div>
+ </div>
+ </section>
 </div>
 {% include 'footer.html' %}
 </div>

basicswap/ui/page_wallet.py

@@ -51,7 +51,7 @@ def format_wallet_data(swap_client, ci, w):
 
     if ci.coin_type() == Coins.PART:
         wf['stealth_address'] = w.get('stealth_address', '?')
-        wf['blind_balance'] = w.get('blind_balance', '?')
+        wf['blind_balance'] = "{:.8f}".format(float(w['blind_balance']))
         if 'blind_unconfirmed' in w and float(w['blind_unconfirmed']) > 0.0:
             wf['blind_unconfirmed'] = w['blind_unconfirmed']
         wf['anon_balance'] = w.get('anon_balance', '?')

doc/release-notes.md

@@ -2,6 +2,13 @@
 0.0.x
 ==============
 
+
+0.0.61
+==============
+
+- GUI 2.0
+
+
 0.0.60
 ==============