ui: Updates + Cleanup + Added doge in charts + icons.

basicswap/templates/bids.html

@@ -193,10 +193,15 @@
               </div>
              </th>
              <th class="p-0">
-              <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+              <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">PTX 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">Details</span>
+              </div>
+             </th>           
             </tr>
            </thead>
            <tbody>
@@ -225,6 +230,15 @@
              <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>
+             {% if page_type_received or page_type_sent %}
+              <td class="py-3 px-6 text-xs">
+               <a 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 bg-blue-500 text-white hover:bg-blue-600 transition duration-200" href="/bid/{{ b[1] }}">Details</a>
+              </td>
+             {% elif page_type_available %}
+              <td class="py-3 px-6 text-xs">
+               <a 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 bg-blue-500 text-white hover:bg-blue-600 transition duration-200" href="/bid/{{ b[1] }}">Accept</a>
+              </td>
+             {% endif %} 
             </tr>
            </tbody>
            {% endfor %}
@@ -235,7 +249,7 @@
         </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="flex flex-wrap justify-end pt-6 pr-6 border-t border-gray-100 dark:border-gray-400">
            <div class="w-full md:w-auto p-1.5">
             <button type="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">

basicswap/templates/header.html

@@ -456,7 +456,7 @@
                           <polyline points=" 16,2 13,5 16,8 " stroke="#6b7280"></polyline>
                           <polyline points=" 8,16 11,19 8,22 " stroke="#6b7280"></polyline>
                         </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" title="Total {{ summary.num_sent_offers }}">{{ summary.num_sent_active_offers }}</span></a>
+                      </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_active_offers }}</span></a>
 
                 <div id="tooltip-your-offers" 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">
                   <p><b>Total:</b> {{ summary.num_sent_offers }}</p>
@@ -482,7 +482,7 @@
                           <line data-cap="butt" x1="12" y1="1" x2="12" y2="16" stroke="#6b7280"></line>
                           <polyline points="7 11 12 16 17 11" stroke="#6b7280"></polyline>
                         </g>
-                      </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" title="Total {{ summary.num_recv_bids }}">{{ summary.num_available_bids }}</span></a>
+                      </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_available_bids }}</span></a>
                   </li>
 
                 <div id="tooltip-bids-received" 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">
@@ -497,9 +497,7 @@
                           <line data-cap="butt" x1="12" y1="17" x2="12" y2="2" stroke="#6b7280"></line>
                           <polyline points="17 7 12 2 7 7" stroke="#6b7280"></polyline>
                         </g>
-                      </svg> <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" title="Total {{ summary.num_sent_bids }}">{{ summary.num_sent_active_bids }}</span></a>
-
-               
+                      </svg><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_active_bids }}</span></a>              
                 <div id="tooltip-bids-sent" 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">
                   <p><b>Total:</b>  {{ summary.num_sent_bids }}</p>
                 <div class="tooltip-arrow" data-popper-arrow></div>

basicswap/templates/offer.html

@@ -518,7 +518,7 @@
       <div class="w-full md:w-0/12">
        <div class="flex flex-wrap justify-end">
         <div class="w-full md:w-auto p-1.5">
-         <button name="newbid" value="New Bid" 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 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">New Bid</button>
+         <button name="newbid" value="New Bid" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm bg-blue-500 hover:bg-blue-600 border-blue-500 text-white border rounded-md shadow-button focus:ring-0 focus:outline-none">New Bid</button>
         </div>
         {% if data.sent %}
         <div class="w-full md:w-auto p-1.5">

basicswap/templates/offer_new_1.html

@@ -449,6 +449,7 @@
   </div>
  </div>
 </section>
+
 <style>
 select.select-disabled {
 opacity: 0.50 !important;
@@ -643,7 +644,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
     function loadPrices() {
         const api_key = '{{chart_api_key}}';
-        const coins = ['BTC', 'PART', 'XMR', 'LTC', 'FIRO', 'DASH', 'PIVX'];
+        const coins = ['BTC', 'PART', 'XMR', 'LTC', 'FIRO', 'DASH', 'PIVX', 'DOGE'];
 
         document.getElementById("priceTable").classList.remove("hidden");
 

basicswap/templates/offers.html

@@ -269,11 +269,37 @@
     </p>
   </div>
 </div>
+<div class="w-full sm:w-1/2 lg:w-1/5 p-3" id="doge-container">
+  <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-lg dark:text-white">
+        <div class="flex items-center mb-2.5">
+      <img src="/static/images/coins/Doge-20.png" height="20" width="20" class="mr-2">
+      <p class="text-sm text-neutral-500 font-medium">Dogecoin (DOGE)</p>
+    </div>
+    <div class="flex flex-wrap items-center mb-2 -m-1">
+      <div class="w-auto p-1">
+        <h3 class="font-heading text-1xl font-semibold">
+          <div id="doge-price-usd"></div>
+        </h3>
+      </div>
+          <div class="w-auto p-1">
+        <div id="doge-price-change-container" class="w-auto p-1"></div>
+      </div>
+      <div class="w-auto p-1">
+        <h3 class="text-xs font-semibold">
+          <div id="doge-price-btc"></div>
+        </h3>
+      </div>
+    </div>
+    <p class="text-xs text-neutral-400 font-medium">
+      Volume 24H:<div class="text-xs" id="doge-volume-24h"></div>
+    </p>
+  </div>
+</div>
 </section>
 <script>
 window.addEventListener('load', function() {
     const api_key = '{{chart_api_key}}';
-    const coins = ['BTC', 'PART', 'XMR', 'LTC', 'FIRO', 'DASH', 'PIVX'];
+    const coins = ['BTC', 'PART', 'XMR', 'LTC', 'FIRO', 'DASH', 'PIVX', 'DOGE'];
     coins.forEach(coin => {
         fetch(`https://min-api.cryptocompare.com/data/pricemultifull?fsyms=${coin}&tsyms=USD,BTC&api_key=${api_key}`)
             .then(response => response.json())
@@ -323,7 +349,7 @@ function negativePriceChangeHTML(value) {
 }
 
 function setActiveContainer(containerId) {
-  const containerIds = ['btc-container', 'xmr-container', 'part-container', 'pivx-container', 'firo-container', 'dash-container', 'ltc-container'];
+  const containerIds = ['btc-container', 'xmr-container', 'part-container', 'pivx-container', 'firo-container', 'dash-container', 'ltc-container', 'doge-container'];
   const activeClass = 'active-container';
   containerIds.forEach(id => {
     const container = document.getElementById(id);
@@ -364,6 +390,10 @@ document.getElementById('ltc-container').addEventListener('click', () => {
   setActiveContainer('ltc-container');
   updateChart('LTC');
 });
+document.getElementById('doge-container').addEventListener('click', () => {
+  setActiveContainer('doge-container');
+  updateChart('DOGE');
+});
 
 let coin;
 const coinOptions = {

basicswap/templates/wallets.html

@@ -34,15 +34,9 @@
     <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 h-48">
-
-
-<h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">
-  Wallets
-</h2>
-<div class="flex items-center">
-  <h2 class="text-lg font-bold text-white tracking-tighter mr-2">
-    Total Assets:
-  </h2>
+      <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Wallets</h2>
+  <div class="flex items-center">
+  <h2 class="text-lg font-bold text-white tracking-tighter mr-2">Total Assets:</h2>
   <button id="hide-usd-amount-toggle" class="flex items-center justify-center p-1 focus:ring-0 focus:outline-none">
     <svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" height="20" width="20" viewBox="0 0 24 24">
       <path d="M23.444,10.239a22.936,22.936,0,0,0-2.492-2.948l-4.021,4.021A5.026,5.026,0,0,1,17,12a5,5,0,0,1-5,5,5.026,5.026,0,0,1-.688-.069L8.055,20.188A10.286,10.286,0,0,0,12,21c5.708,0,9.905-5.062,11.445-7.24A3.058,3.058,0,0,0,23.444,10.239Z"></path>
@@ -50,19 +44,13 @@
       <path data-color="color-2" d="M1,24a1,1,0,0,1-.707-1.707l22-22a1,1,0,0,1,1.414,1.414l-22,22A1,1,0,0,1,1,24Z"></path>
     </svg>
   </button>
-</div>
-<div class="flex items-baseline mt-2">
-  <div id="total-usd-value" class="text-5xl font-bold text-white"></div>
-  <div id="usd-text" class="text-sm text-white ml-1">USD</div>
-</div>
-<div id="total-btc-value" class="text-sm text-white mt-2"></div>
-
-
-
-
-
+  </div>
+  <div class="flex items-baseline mt-2">
+    <div id="total-usd-value" class="text-5xl font-bold text-white"></div>
+    <div id="usd-text" class="text-sm text-white ml-1">USD</div>
+  </div>
+  <div id="total-btc-value" class="text-sm text-white mt-2"></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">
       <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">
@@ -107,56 +95,61 @@
        </p>{% endif %}
       </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>
-                <div 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 coinname-value" data-coinname="{{ w.name }}">{{ w.balance }} {{ w.ticker }}</div>
-              </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-green-100 text-xs text-green-500 dark:bg-gray-500 dark:text-green-500">+{{ w.unconfirmed }} {{ w.ticker }}</span>
-              </div>
-              {% endif %}
-              <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium dark:text-white">USD value:</h4>
-                <div 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 usd-value"></div>
-              </div>
-
-
+        <div class="flex mb-2 justify-between items-center">
+          <h4 class="text-xs font-medium dark:text-white">Balance:</h4>
+          <div 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 coinname-value" data-coinname="{{ w.name }}">{{ w.balance }} {{ w.ticker }}</div>
+        </div>
+         <div class="flex mb-2 justify-between items-center">
+           <h4 class="text-xs font-medium dark:text-white">{{ w.ticker }} USD value:</h4>
+           <div 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 usd-value"></div>
+        </div>
+        {% if w.unconfirmed %}
+         <div class="flex mb-2 justify-between items-center">
+           <h4 class="text-xs font-bold text-green-500 dark:text-green-500">Unconfirmed:</h4>
+           <span class="bold inline-block py-1 px-2 rounded-full bg-green-100 text-xs text-green-500 dark:bg-gray-500 dark:text-green-500 coinname-value" data-coinname="{{ w.name }}">+{{ w.unconfirmed }} {{ w.ticker }}</span>
+          </div>
+         <div class="flex mb-2 justify-between items-center">
+           <h4 class="text-xs font-bold text-green-500 dark:text-green-500">Unconfirmed USD value:</h4>
+          <div class="bold inline-block py-1 px-2 rounded-full bg-green-100 text-xs text-green-500 dark:bg-gray-500 dark:text-green-500 usd-value"></div>
+         </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 coinname-value" data-coinname="{{ w.name }}">{{ w.blind_balance }} {{ w.ticker }}</span>
        </div>
-              <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium dark:text-white">USD value:</h4>
-                <div 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 usd-value"></div>
-              </div>
-
-
+        <div class="flex mb-2 justify-between items-center">
+          <h4 class="text-xs font-medium dark:text-white">Blind USD value:</h4>
+          <div 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 usd-value"></div>
+        </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="bold inline-block py-1 px-2 rounded-full bg-green-100 text-xs text-green-500 dark:bg-gray-500 dark:text-green-500">+{{ w.blind_unconfirmed }} {{ w.ticker }}</span>
-       </div>{% endif %}
+        <h4 class="text-xs font-bold text-green-500 dark:text-green-500">Blind Unconfirmed:</h4>
+        <span class="bold inline-block py-1 px-2 rounded-full bg-green-100 text-xs text-green-500 dark:bg-gray-500 dark:text-green-500 coinname-value" data-coinname="{{ w.name }}" >+{{ w.blind_unconfirmed }} {{ w.ticker }}</span>
+       </div>
+      <div class="flex mb-2 justify-between items-center">
+          <h4 class="text-xs font-bold text-green-500 dark:text-green-500">Blind Unconfirmed USD value:</h4>
+          <div class="bold inline-block py-1 px-2 rounded-full bg-green-100 text-xs text-green-500 dark:bg-gray-500 dark:text-green-500 usd-value"></div>
+        </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 coinname-value"  data-coinname="{{ w.name }}">{{ w.anon_balance }} {{ w.ticker }}</span>
        </div>
-              <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium dark:text-white">USD value:</h4>
-                <div 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 usd-value"></div>
-              </div>
-
-
+        <div class="flex mb-2 justify-between items-center">
+          <h4 class="text-xs font-medium dark:text-white">Anon USD value:</h4>
+          <div 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 usd-value"></div>
+        </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="bold inline-block py-1 px-2 rounded-full bg-green-100 text-xs text-green-500 dark:bg-gray-500 dark:text-green-500">
+        <h4 class="text-xs font-bold text-green-500 dark:text-green-500">Anon Pending:</h4>
+        <span class="bold inline-block py-1 px-2 rounded-full bg-green-100 text-xs text-green-500 dark:bg-gray-500 dark:text-green-500 coinname-value"  data-coinname="{{ w.name }}">
         +{{ w.anon_pending }} {{ w.ticker }}</span>
        </div>
+        <div class="flex mb-2 justify-between items-center">
+          <h4 class="text-xs font-bold text-green-500 dark:text-green-500">Anon Pending USD value:</h4>
+          <div class="bold inline-block py-1 px-2 rounded-full bg-green-100 text-xs text-green-500 dark:bg-gray-500 dark:text-green-500 usd-value"></div>
+        </div>       
        {% endif %}
        {% endif %}
        <div class="flex mb-2 justify-between items-center">
@@ -195,7 +188,6 @@
    </div>
  </section>
 </div>
-
 {% include 'footer.html' %}
 <script>
 const coinNameToSymbol = {