From adcf875db6013a5a2da6b9da94451f6f8a8160d9 Mon Sep 17 00:00:00 2001
From: nahuhh <50635951+nahuhh@users.noreply.github.com>
Date: Thu, 21 Mar 2024 09:06:55 -0400
Subject: [PATCH] ui: orderbook update & fixes

---
 basicswap/templates/offers.html | 343 +++++++++++++++++---------------
 1 file changed, 179 insertions(+), 164 deletions(-)

diff --git a/basicswap/templates/offers.html b/basicswap/templates/offers.html
index 036f9d2..68a14a4 100644
--- a/basicswap/templates/offers.html
+++ b/basicswap/templates/offers.html
@@ -68,65 +68,64 @@
   <section class="py-4 overflow-hidden container-to-blur">
     <div class="container px-4 mx-auto">
       <div class="flex flex-wrap -m-3">
-
         <div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="btc-container">
-            <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white active-container" id="btc-active">
-              <div class="flex items-center">
-                  <img src="/static/images/coins/Bitcoin.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="Bitcoin">
-                  <p class="ml-2 text-black text-sm dark:text-white">
-                      Bitcoin (BTC)
-                  </p>
-              </div>
-              <div class="flex flex-col justify-start">
-                  <p class="my-2 text-xl font-bold text-left text-gray-700 dark:text-gray-100" id="btc-price-usd">
-                      <span class="text-sm">
-                          <span id="btc-price-usd-value"></span>
-                  </p>
-                  <div class="flex items-center text-sm">
-                      <div class="w-auto">
-                        <div id="btc-price-change-container" class="w-auto p-1"></div>
-                      </div>
-                  </div>
-                  <div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2">
-                    <span class="bold mr-2">VOL:</span>
-                      <div id="btc-volume-24h">
-                      </div>
-                  </div>
-              </div>
-          </div>
-          </div>
-
-      <div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="xmr-container">
-        <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white price-container">
+        <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white active-container" id="btc-active">
       <div class="flex items-center">
-          <img src="/static/images/coins/Monero.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="Monero">
+          <img src="/static/images/coins/Bitcoin.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="Bitcoin">
           <p class="ml-2 text-black text-sm dark:text-white">
-              Monero (XMR)
+              Bitcoin (BTC)
           </p>
       </div>
       <div class="flex flex-col justify-start">
-          <p class="my-2 text-xl font-bold text-left text-gray-700 dark:text-gray-100" id="xmr-price-usd">
+          <p class="my-2 text-xl font-bold text-left text-gray-700 dark:text-gray-100" id="btc-price-usd">
               <span class="text-sm">
-                  <span id="xmr-price-usd-value"></span>
+                  <span id="btc-price-usd-value"></span>
           </p>
           <div class="flex items-center text-sm">
               <div class="w-auto">
-                <div id="xmr-price-change-container" class="w-auto p-1"></div>
+                <div id="btc-price-change-container" class="w-auto p-1"></div>
               </div>
           </div>
           <div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2">
             <span class="bold mr-2">VOL:</span>
-              <div id="xmr-volume-24h">
+              <div id="btc-volume-24h">
               </div>
           </div>
-          <div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2">
+      </div>
+      </div>
+  </div>
+
+        <div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="xmr-container">
+            <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white price-container">
+              <div class="flex items-center">
+                  <img src="/static/images/coins/Monero.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="Monero">
+                  <p class="ml-2 text-black text-sm dark:text-white">
+                      Monero (XMR)
+                  </p>
+              </div>
+              <div class="flex flex-col justify-start">
+                  <p class="my-2 text-xl font-bold text-left text-gray-700 dark:text-gray-100" id="xmr-price-usd">
+                      <span class="text-sm">
+                          <span id="xmr-price-usd-value"></span>
+                  </p>
+                  <div class="flex items-center text-sm">
+                      <div class="w-auto">
+                        <div id="xmr-price-change-container" class="w-auto p-1"></div>
+                      </div>
+                  </div>
+                  <div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2">
+                    <span class="bold mr-2">VOL:</span>
+                      <div id="xmr-volume-24h">
+                      </div>
+                  </div>
+<div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2">
               <span class="bold mr-2">BTC:</span>
               <span id="xmr-price-btc">
               </span>
           </div>
+              </div>
+          </div>
       </div>
-  </div>
-  </div>
 
   <div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="part-container">
     <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
@@ -888,46 +887,52 @@ const chart = new Chart(ctx, {
                       <table class="w-full min-w-max">
                         <thead class="uppercase">
                             <tr>
-                                <th class="p-0" onclick="sortTable(0)">
-                                    <div class="py-3 px-4 justify-center rounded-tl-xl bg-coolGray-200 dark:bg-gray-600 ">
+                                <th class="p-0" onclick="sortTable(0) disabled">
+                                    <div class="py-3 pl-4 justify-center rounded-tl-xl bg-coolGray-200 dark:bg-gray-600 ">
                                         <span class="text-sm mr-1 text-gray-600 dark:text-gray-300 font-semibold">Time</span>
-                                        <span class="sort-icon text-gray-600 dark:text-gray-400" id="sort-icon-0">&darr;</span>
+                                        <span class="sort-icon mr-6 text-gray-600 dark:text-gray-400 hidden" id="sort-icon-0">&darr;</span>
                                     </div>
                                 </th>
-                                <th class="p-0" onclick="sortTable(1)" disabled>
-                                    <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+                                <th class="p-0 hidden xl:block" onclick="sortTable(1) disabled">
+                                    <div class="py-3 px-4 text-left bg-coolGray-200 dark:bg-gray-600">
                                         <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Details</span>
                                         <span class="sort-icon hidden" id="sort-icon-1">&darr;</span>
                                     </div>
                                 </th>
-                                <th class="p-0 hidden" onclick="sortTable(2)" disabled>
+                                <th class="p-0" onclick="sortTable(2) disabled">
                                     <div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 text-left">
-                                        <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">You Send</span>
+                                        <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Max send</span>
                                         <span class="sort-icon hidden" id="sort-icon-2">&darr;</span>
                                     </div>
                                 </th>
-                                <th class="p-0" onclick="sortTable(3)" disabled>
-                                    <div class="py-3 px-0 bg-coolGray-200 dark:bg-gray-600 text-center">
+                                <th class="p-0" onclick="sortTable(3) disabled">
+                                    <div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 text-center">
                                         <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Swap</span>
                                         <span class="sort-icon hidden" id="sort-icon-3">&darr;</span>
                                     </div>
                                 </th>
-                                <th class="p-0" onclick="sortTable(4)">
-                                    <div class="py-3 px-3 bg-coolGray-200 dark:bg-gray-600 text-left">
-                                        <span class="text-sm mr-1 text-gray-600 dark:text-gray-300 font-semibold">Rate</span>
-                                        <span class="sort-icon text-gray-600 dark:text-gray-400" id="sort-icon-4">&darr;</span>
+                                <th class="p-0" onclick="sortTable(4) disabled">
+                                    <div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 text-right">
+                                        <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Max Recv</span>
+                                        <span class="sort-icon hidden" id="sort-icon-4">&darr;</span>
                                     </div>
                                 </th>
                                 <th class="p-0" onclick="sortTable(5)">
-                                    <div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 text-center">
-                                        <span class="text-sm mr-1 text-gray-600 dark:text-gray-300 font-semibold">Market +/-</span>
+                                    <div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 text-right">
+                                        <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Rate</span>
                                         <span class="sort-icon text-gray-600 dark:text-gray-400" id="sort-icon-5">&darr;</span>
                                     </div>
                                 </th>
-                                <th class="p-0" onclick="sortTable(6)" disabled>
+                                <th class="p-0" onclick="sortTable(6)">
+                                    <div class="py-3 bg-coolGray-200 dark:bg-gray-600 text-center">
+                                        <span class="text-sm ml-4 text-gray-600 dark:text-gray-300 font-semibold">Market +/-</span>
+                                        <span class="sort-icon text-gray-600 dark:text-gray-400" id="sort-icon-6">&darr;</span>
+                                    </div>
+                                </th>
+                                <th class="p-0" onclick="sortTable(7) disabled">
                                     <div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 rounded-tr-xl">
                                         <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Trade</span>
-                                        <span class="sort-icon hidden" id="sort-icon-6">&darr;</span>
+                                        <span class="sort-icon hidden" id="sort-icon-7">&darr;</span>
                                     </div>
                                 </th>
                             </tr>
@@ -936,7 +941,7 @@ const chart = new Chart(ctx, {
                           {% for o in offers %}
                           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
                             <!-- TIME + ACTIVE -->
-                            <td class="py-3 px-6 text-xs">
+                            <td class="py-3 pl-6 text-xs">
                                 <div class="flex items-center">
                                     <svg alt="" class="w-5 h-5 rounded-full mr-3" data-tooltip-target="tooltip-active{{loop.index}}" 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="{% if o[12]==2 %}#AC0000{% elif o[11]==true %}#6b7280{% else %}#3B82F6{% endif %}" stroke-linejoin="round">
@@ -959,33 +964,29 @@ const chart = new Chart(ctx, {
                             </div>
                             <!-- TIME + ACTIVE -->
                             <!-- DETAILS -->
-                            <td class="py-8 text-xs text-left hidden xl:block">
-                            <a data-tooltip-target="tooltip-recipient{{loop.index}}" href="/identity/{{ o[8] }}{% if o[9]==true %}{% endif %}"><span class="bold">Recipient:</span> {{ o[8]|truncate(10, true, '...', 0) }}</a>
-                              {% if sent_offers %}
+                            <td class="py-8 px-4 text-xs text-left hidden xl:block">
                               <!-- SENTOFFERS-->
                                   <div class="network"><span class="bold">Network:</span> <span class="monospace">{{ o[7] }}</span></div>
-                                  <!--<div class="partial"><span class="bold">Amount Variable:</span> {{ o[15] }}</div>-->
-                                  <div class="swaptype"><span class="bold">Swap Type:</span> {{ o[14] }}</div>
-                              {% else %}
-                              <!-- NETWORK OFFERS -->
-                              {% endif %}
+                                  {% if sent_offers %}
+                                  <div class="partial"><span class="bold">Amount Variable:</span> {{ o[15] }}</div>
+                                  <!--<div class="swaptype"><span class="bold">Swap Type:</span> {{ o[14] }}</div>-->
+                                  {% endif %}
+                                  <a data-tooltip-target="tooltip-recipient{{loop.index}}" href="/identity/{{ o[8] }}{% if o[9]==true %}{% endif %}"><span class="bold">Recipient:</span> {{ o[8]|truncate(10, true, '...', 0) }}</a>
                             </td>
                             <div id="tooltip-recipient{{loop.index}}" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-400 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
                               <div class="active-revoked-expired"><span class="bold monospace">{{ o[8] }}</div>
                             <div class="tooltip-arrow" data-popper-arrow></div>
                             </div>
                             <!-- DETAILS -->
-                            <!-- YOU REQUESTING FROM TAKER / NOBOOK -->
+                            <!-- YOUR OFFERS - TAKER AMOUNT -->
                             {% if o[9] == true %}
-                            <td class="py-3 px-2 text-xs hidden">
-                                <div class="flex items-center">
-                                    <span class="inline-flex align-middle items-center justify-center w-9 h-10 rounded">
-                                        <img class="h-7" src="/static/images/coins/{{ o[3]|replace(" ", "-") }}.png" alt="{{ o[3] }}">
-                                    </span>
-                                    <div class="flex flex-col ml-5">
-                                      <div class="coinname bold" data-coinname="{{ o[3] }}">
-                                          <div class="text-gray-600 dark:text-gray-300">{{ o[3] }}</div>
-                                      </div>
+                            <td class="py-0 px-4 text-left text-sm">
+
+                                <a data-tooltip-target="tooltip-wallet{{loop.index}}" href="/wallet/{{ o[17] }}" class="items-center monospace">
+                                      <span class="coinname bold w-32" data-coinname="{{ o[3] }}">
+                                          {{ o[5]|truncate(7, true, '', 0) }}
+                                          <div class="text-gray-600 dark:text-gray-300 text-xs">{{ o[3] }}</div>
+                                      </span></a>
                                       <div class="ratetype hidden"><span class="echange-rates" data-coinname="{{ o[3] }}"> {{ o[6]|truncate(6,true,'',0) }} {{ o[16] }}/{{ o[17] }}</span>
                                       <div class="coinname-value hidden" data-coinname="{{ o[2] }}">
                                           {{ o[4]|truncate(6, true, '', 0) }}
@@ -993,26 +994,69 @@ const chart = new Chart(ctx, {
                                       <div class="usd-value hidden"></div>
                                       <div class="usd-value-in-coin-value"></div>
                                     </div>
+                                <div id="tooltip-wallet{{loop.index}}" 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">
+                                   <div class="active-revoked-expired"><span class="bold">My {{ o[17] }} Wallet</div>
+                                   <div class="tooltip-arrow pl-1" data-popper-arrow></div>
+                                </div> 
+                            </td>
+                            <!-- YOUR OFFERS - TAKER AMOUNT -->
+                            <!-- YOUR OFFERS - SWAP -->
+                            <td class="py-0 px-0 text-right text-sm">
+                                <a data-tooltip-target="tooltip-offer{{loop.index}}" href="/offer/{{ o[1] }}">
+                                <div class="flex items-center justify-evenly monospace">
+                                    <span class="inline-flex mr-3 ml-3 align-middle items-center justify-center w-18 h-20 rounded">
+                                        <img class="h-12" src="/static/images/coins/{{ o[3]|replace(" ", "-") }}.png" alt="{{ o[3] }}">
+                                    </span>
+                                     {{ arrow_right_svg | safe }}
+                                    <span class="inline-flex ml-3 mr-3 align-middle items-center justify-center w-18 h-20 rounded">
+                                        <img class="h-12" src="/static/images/coins/{{ o[2]|replace(" ", "-") }}.png" alt="{{ o[2] }}">
+                                    </span>
+                                </div></a>
+                                <div id="tooltip-offer{{loop.index}}" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-300 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
+                                   <div class="active-revoked-expired"><span class="bold">Edit Offer</div>
+                                   <div class="tooltip-arrow pr-6" data-popper-arrow></div>
                                 </div>
                             </td>
-                            <!-- YOU REQUESTING FROM TAKER / NOBOOK -->
-                            <!-- OFFERS WHERE YOU WILL BE TAKER -->
+                            <!-- YOUR OFFERS - SWAP -->
+                            <!-- YOUR OFFERS - ORDERBOOK -->
+                            <td class="py-0 px-4 text-right text-sm">
+                                <a data-tooltip-target="tooltip-wallet-maker{{loop.index}}" href="/wallet/{{ o[16] }}" class="items-center monospace">
+                                   <span class="coinname bold w-32" data-coinname="{{ o[2] }}">
+                                      {{ o[4]|truncate(7, true, '', 0) }}
+                                   <div class="text-gray-600 dark:text-gray-300 text-xs">{{ o[2] }}</div>
+                                   </span>
+                                 </a>
+                                              <div class="ratetype italic hidden">
+                                                  <span class="echange-rates" data-coinname="{{ o[2] }}">
+                                                      {{ o[6]|truncate(6,true,'',0) }} {{ o[17] }}/{{ o[16] }}
+                                                  </span>
+                                                  <div class="coinname-value hidden" data-coinname="{{ o[3] }}">
+                                                      {{ o[5]|truncate(7, true, '', 0) }}
+                                                  </div>
+                                                  <div class="usd-value hidden"></div>
+                                                  <div class="usd-value-in-coin-value"></div>
+                                              </div>
+                                        <div id="tooltip-wallet-maker{{loop.index}}" 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">
+                                           <div class="active-revoked-expired"><span class="bold">My {{ o[16] }} Wallet</div>
+                                           <div class="tooltip-arrow pl-1" data-popper-arrow></div>
+                                        </div>
+                            </td>
+                            <!-- YOUR OFFERS - ORDERBOOK -->
+                            <!-- NETWORK OFFERS - TAKER AMOUNT -->
                             {% else %}
-                            <td class="py-3 px-2 text-xs hidden">
-                                <div class="flex items-center">
-                                    <span class=" inline-flex align-middle items-center justify-center w-9 h-10 rounded">
-                                        <img class="h-7" src="/static/images/coins/{{ o[3]|replace(" ", "-") }}.png" alt="{{ o[3] }}">
-                                    </span>
-                                    <div class="flex flex-col ml-5">
-                                      <div class="coinname bold" data-coinname="{{ o[3] }}">
-                                          <div class="text-gray-600 dark:text-gray-300">{{ o[3] }}</div>
-                                      </div>
+                            <td class="py-0 px-4 text-left text-sm">
+                            <a data-tooltip-target="tooltip-wallet{{loop.index}}" href="/wallet/{{ o[17] }}" class="items-center monospace">
+                                      <span class="coinname bold w-32" data-coinname="{{ o[3] }}">
+                                          {{ o[5]|truncate(7, true, '', 0) }}
+                                          <div class="text-gray-600 dark:text-gray-300 text-xs">{{ o[3] }}</div>
+                                      </span>
                                       <div class="ratetype hidden"><span class="echange-rates" data-coinname="{{ o[3] }}"> {{ o[6]|truncate(6,true,'',0) }} {{ o[16] }}/{{ o[17] }}</span>
                                       <div class="coinname-value hidden" data-coinname="{{ o[3] }}">
                                           {{ o[5]|truncate(6, true, '', 0) }}
                                       </div>
                                       <div class="usd-value hidden"></div>
                                       <div class="usd-value-in-coin-value"></div>
+<<<<<<< HEAD
                                     </div>
                                 </div>
                             </td>
@@ -1041,44 +1085,20 @@ const chart = new Chart(ctx, {
                                     </span></a>
                                      {{ arrow_right_svg | safe }}
                                         <div id="tooltip-wallet{{loop.index}}" 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">
+=======
+                                    </div></a>
+                                       <div id="tooltip-wallet{{loop.index}}" 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">
+>>>>>>> 3b2532e (ui: orderbook update & fixes)
                                            <div class="active-revoked-expired"><span class="bold">My {{ o[17] }} Wallet</div>
-                                           <div class="tooltip-arrow pr-6" data-popper-arrow></div>
-                                        </div>
-                                        <a data-tooltip-target="tooltip-maker-wallet{{loop.index}}" href="/wallet/{{ o[16] }}">
-                                    <span class=" inline-flex ml-3 mr-3 align-middle items-center justify-center w-18 h-20 rounded">
-                                        <img class="h-12" src="/static/images/coins/{{ o[2]|replace(" ", "-") }}.png" alt="{{ o[2] }}">
-                                    </span></a>
-                                        <div id="tooltip-maker-wallet{{loop.index}}" 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">
-                                           <div class="active-revoked-expired"><span class="bold">My {{ o[16] }} Wallet</div>
                                            <div class="tooltip-arrow pl-1" data-popper-arrow></div>
                                         </div>
-                                        <a data-tooltip-target="tooltip-maker{{loop.index}}" href="/offer/{{ o[1] }}">
-                                    <div class="flex flex-col ml-5 mr-5">
-                                        <div class="coinname bold w-24" data-coinname="{{ o[2] }}">
-                                            {{ o[4]|truncate(9, true, '', 0) }}
-                                        </div>
-                                        <div class="text-gray-600 dark:text-gray-300">{{ o[2] }}</div>
-                                        <div class="ratetype italic hidden">
-                                            <span class="echange-rates" data-coinname="{{ o[2] }}">
-                                                {{ o[6]|truncate(6,true,'',0) }} {{ o[17] }}/{{ o[16] }}
-                                            </span>
-                                            <div class="coinname-value hidden" data-coinname="{{ o[3] }}">
-                                                {{ o[5]|truncate(7, true, '', 0) }}
-                                            </div>
-                                            <div class="usd-value hidden"></div>
-                                            <div class="usd-value-in-coin-value"></div>
-                                        </div>
-                                    </div>
-                            <div id="tooltip-maker{{loop.index}}" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-400 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
-                              <div class="active-revoked-expired"><span class="bold">Edit</div>
-                            <div class="tooltip-arrow" data-popper-arrow></div>
-                                </div>
                             </td>
-                            <!-- YOUR OFFERS / MAKER / BOOK -->
-                            <!-- NETWORK OFFERS / MAKER / BOOK -->
-                            {% else %}
-                            <td class="py-0 px-6 text-right text-sm mx-20">
+                            <!-- NETWORK OFFERS - TAKER AMOUNT -->
+                            <!-- NETWORK OFFERS - SWAP -->
+                            <td class="py-0 px-0 text-right text-sm">
+                                <a data-tooltip-target="tooltip-offer{{loop.index}}" href="/offer/{{ o[1] }}">
                                 <div class="flex items-center justify-evenly monospace">
+<<<<<<< HEAD
                                     <div class="flex flex-col text-left mr-5 ml-5">
                                       <div class="coinname bold w-32" data-coinname="{{ o[3] }}"><!-- todo id:4-->
                                           {{ o[5]|truncate(9, true, '', 0) }}
@@ -1093,83 +1113,77 @@ const chart = new Chart(ctx, {
                                     </div>
                                 </div>
                                         <a data-tooltip-target="tooltip-wallet{{loop.index}}" href="/wallet/{{ o[17] }}">
+=======
+>>>>>>> 3b2532e (ui: orderbook update & fixes)
                                     <span class="inline-flex mr-3 ml-3 align-middle items-center justify-center w-18 h-20 rounded">
                                         <img class="h-12" src="/static/images/coins/{{ o[3]|replace(" ", "-") }}.png" alt="{{ o[3] }}">
-                                    </span></a>
+                                    </span>
                                      {{ arrow_right_svg | safe }}
-                                        <div id="tooltip-wallet{{loop.index}}" 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">
-                                           <div class="active-revoked-expired"><span class="bold">My {{ o[17] }} Wallet</div>
-                                           <div class="tooltip-arrow pr-6" data-popper-arrow></div>
-                                        </div>
-                                        <a data-tooltip-target="tooltip-maker-wallet{{loop.index}}" href="/wallet/{{ o[16] }}">
                                     <span class="inline-flex ml-3 mr-3 align-middle items-center justify-center w-18 h-20 rounded">
                                         <img class="h-12" src="/static/images/coins/{{ o[2]|replace(" ", "-") }}.png" alt="{{ o[2] }}">
-                                    </span></a>
-                                        <div id="tooltip-maker-wallet{{loop.index}}" 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">
+                                    </span>
+                                </div></a>
+                                <div id="tooltip-offer{{loop.index}}" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-green-700 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
+                                   <div class="active-revoked-expired"><span class="bold">Buy {{ o[2] }}</div>
+                                   <div class="tooltip-arrow pr-6" data-popper-arrow></div>
+                                </div>
+                            </td>
+                            <!-- NETWORK OFFERS - SWAP -->
+                            <!-- NETWORK OFFERS - ORDERBOOK -->
+                            <td class="py-0 px-4 text-right text-sm">
+                              <a data-tooltip-target="tooltip-wallet-maker{{loop.index}}" href="/wallet/{{ o[16] }}" class="items-center monospace">
+                                 <span class="coinname bold w-32" data-coinname="{{ o[2] }}">
+                                   {{ o[4]|truncate(7, true, '', 0) }}
+                                   <div class="text-gray-600 dark:text-gray-300 text-xs">{{ o[2] }}</div>
+                                 </span></a>
+                                           <div class="ratetype italic hidden">
+                                              <span class="echange-rates" data-coinname="{{ o[2] }}">
+                                               {{ o[6]|truncate(6,true,'',0) }} {{ o[17] }}/{{ o[16] }}
+                                              </span>
+                                              <div class="coinname-value hidden" data-coinname="{{ o[2] }}">
+                                               {{ o[4]|truncate(7, true, '', 0) }}
+                                              </div>
+                                              <div class="usd-value hidden"></div>
+                                              <div class="usd-value-in-coin-value"></div>
+                                            </div>
+                                        <div id="tooltip-wallet-maker{{loop.index}}" 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">
                                            <div class="active-revoked-expired"><span class="bold">My {{ o[16] }} Wallet</div>
                                            <div class="tooltip-arrow pl-1" data-popper-arrow></div>
                                         </div>
-                                        <a data-tooltip-target="tooltip-offer{{loop.index}}" href="/offer/{{ o[1] }}">
-                                          <div class="flex flex-col ml-5 mr-5">
-                                              <div class="coinname bold w-24" data-coinname="{{ o[2] }}">
-                                                  {{ o[4]|truncate(9, true, '', 0) }}
-                                              </div>
-                                              <div class="text-gray-600 dark:text-gray-300">{{ o[2] }}</div>
-                                              <div class="ratetype italic hidden">
-                                                  <span class="echange-rates" data-coinname="{{ o[2] }}">
-                                                      {{ o[6]|truncate(6,true,'',0) }} {{ o[17] }}/{{ o[16] }}
-                                                  </span>
-                                                  <div class="coinname-value hidden" data-coinname="{{ o[2] }}">
-                                                      {{ o[4]|truncate(7, true, '', 0) }}
-                                                  </div>
-                                                  <div class="usd-value hidden"></div>
-                                                  <div class="usd-value-in-coin-value"></div>
-                                              </div>
-                                          </div>
-                            <div id="tooltip-offer{{loop.index}}" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-green-600 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
-                              <div class="active-revoked-expired"><span class="bold">Buy {{ o[2] }}</div>
-                            <div class="tooltip-arrow" data-popper-arrow></div>
-                                </div>
                             </td>
                             {% endif %}
-                            <!-- NETWORK OFFERS / MAKER / BOOK -->
+                            <!-- NETWORK OFFERS - ORDERBOOK -->
+
                             <!-- RATE -->
-                            <td class="py-3 px-2 bold monospace italic text-sm text-left items-center rate-table-info">
+                            <td class="py-3 pl-6 bold monospace text-sm text-right items-center rate-table-info">
                                 <span class="profit-value hidden"></span>
                                 <div class="coinname-value hidden" data-coinname="{{ o[3] }}">
                                      {{ o[6]|truncate(6, true, '', 0) }}
                                 </div>
-                                <span class="usd-value"></span><span class="text-sm italic">/{{ o[16] }}</span>
-                                    <div class="ratetype"><span class="echange-rates" data-coinname="{{ o[2] }}"> {{ o[6]|truncate(6,true,'',0) }} {{ o[17] }}/{{ o[16] }}</span>
+                                <span class="usd-value"></span><span class="">/{{ o[16] }}</span>
+                                    <div class="ratetype"><span class="echange-rates" data-coinname="{{ o[2] }}"> {{ o[6]|truncate(10,true,'',0) }} {{ o[17] }}/{{ o[16] }}</span>
                                 </div>
                             </td>
                             <!-- RATE -->
                             <!-- PERCENTAGE -->
                             <td class="py-3 px-2 bold text-sm text-center items-center rate-table-info">
-                                <span class="profit-value hidden"></span>
-                                <div class="profittype pt-1"><span class="profit-loss"</span>
-                                   <div class="coinname-value hidden" data-coinname="{{ o[3] }}">
-                                     {{ o[6]|truncate(6, true, '', 0) }}
-                                   </div>
-                                </div>
-                                <div class="coinname-value hidden" data-coinname="{{ o[3] }}">
-                                     {{ o[6]|truncate(6, true, '', 0) }}
+                                <div class="profittype"><span class="profit-loss"</span>
                                 </div>
                             </td>
                             <!-- PERCENTAGE -->
                             <!-- SWAP OR EDIT -->
                             {% if sent_offers %}
-                            <td class="py-6 px-4 text-center">
+                            <td class="py-6 px-2 text-center">
                                 <div class="flex justify-center items-center h-full">
-                                    <a class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md {% if o[11]==true %} bg-gray-400 dark:border-gray-300 text-white hover:bg-green-600 transition duration-200 {% else %} bg-green-500 text-white hover:bg-green-600 transition duration-200 {% endif %}" href="/offer/{{ o[1] }}">
+                                    <a class="inline-block w-20 py-1 px-2 font-medium text-center text-sm bold rounded-md {% if o[11]==true %} bg-gray-400 dark:border-gray-300 text-white hover:bg-red-700 transition duration-200 {% else %} bg-gray-300 bold text-black bold  hover:bg-green-700 transition duration-200 {% endif %}" href="/offer/{{ o[1] }}">
                                         {% if o[11]==true %} Expired {% else %} Edit {% endif %}
                                     </a>
                                 </div>
                             </td>
                             {% else %}
-                            <td class="py-6 px-4 text-center">
+                            <td class="py-6 px-2 text-center">
                                 <div class="flex justify-center items-center h-full">
-                                    <a class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md {% if o[9]==true %} bg-green-500 dark:border-gray-300 text-white hover:bg-green-600 transition duration-200 {% else %} bg-blue-500 text-white hover:bg-green-600 transition duration-200 {% endif %}" href="/offer/{{ o[1] }}">
+                                    <a class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md {% if o[9]==true %} bg-gray-300 text-black dark:border-gray-300 hover:bg-green-700 transition duration-200 {% else %} bg-blue-500 text-white hover:bg-green-600 transition duration-200 {% endif %}" href="/offer/{{ o[1] }}">
                                         {% if o[9]==true %} Edit {% else %} Swap {% endif %}
                                     </a>
                                 </div>
@@ -1226,6 +1240,7 @@ const coinNameToSymbol = {
     'Particl Blind': 'PART',
     'Particl Anon': 'PART',
     'Monero': 'XMR',
+    'Wownero': 'WOW',
     'Litecoin': 'LTC',
     'Firo': 'FIRO',
     'Dash': 'DASH',
@@ -1360,7 +1375,7 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 function sortTable(columnIndex) {
-    const sortableColumns = [0, 4, 5];
+    const sortableColumns = [0, 2, 4, 5, 6, 7];
 
     if (!sortableColumns.includes(columnIndex)) {
         return;