update: GUI version 2.0

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');
+    });
+  });
+});