From 69b195e317657af80b587f0234fe1cb8c785c06b Mon Sep 17 00:00:00 2001 From: gerlofvanek <info@gerlofvanek.com> Date: Thu, 29 Feb 2024 10:28:37 +0100 Subject: [PATCH] ui: Styling / Bug fixes --- basicswap/templates/header.html | 7 +- basicswap/templates/offers.html | 168 +++++++++++++++++--------------- basicswap/ui/page_offers.py | 31 ++++-- 3 files changed, 115 insertions(+), 91 deletions(-) diff --git a/basicswap/templates/header.html b/basicswap/templates/header.html index 9e50ea9..a99af43 100644 --- a/basicswap/templates/header.html +++ b/basicswap/templates/header.html @@ -528,16 +528,15 @@ 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"> - {{ notifications_network_offer_svg | safe }}</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>{{ notifications_close_svg | safe }}</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') { - 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">{{ notifications_new_bid_on_offer_svg | safe }}<</div><div class="uppercase w-40 ml-3 text-sm font-normal"><span class="mb-1 text-sm font-semibold text-gray-900"><a class="underline" href=/bid/' + json['bid_id'] + '>New bid</a> on <a class="underline" href=/offer/' + json['offer_id'] + '>offer</a></span></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-nonefocus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8" data-dismiss="#toast-success" aria-label="Close">{{ notifications_close_svg | safe }}</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 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="uppercase w-40 ml-3 text-sm font-normal"><span class="mb-1 text-sm font-semibold text-gray-900"><a class="underline" href=/bid/' + json['bid_id'] + '>New bid</a> on <a class="underline" href=/offer/' + json['offer_id'] + '>offer</a></span></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-nonefocus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8" data-dismiss="#toast-success" aria-label="Close"><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'] == '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-violet-500 rounded-lg">{{ notifications_bid_accepted_svg | safe }}<</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>{{ notifications_close_svg | safe }}</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'); diff --git a/basicswap/templates/offers.html b/basicswap/templates/offers.html index 3a683eb..fc7076c 100644 --- a/basicswap/templates/offers.html +++ b/basicswap/templates/offers.html @@ -757,34 +757,34 @@ const chart = new Chart(ctx, { <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 id="myTable" class="w-full min-w-max"> + <table class="w-full min-w-max"> <thead class="uppercase"> - <tr class="text-center"> + <tr> <th class="p-0"> - <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600"> + <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"> + <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600 text-left"> <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Recipient</span> </div> </th> <!--<th>ID</th>--> <th class="p-0"> - <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600"> + <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600 text-left"> <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">You get</span> </div> </th> <th class="p-0"> - <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600"> + <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600 text-left"> <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">You Send</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">Rate</span> + <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600 text-left"> + <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Details</span> </div> </th> <!--<th>Amount From Swapped</th>--> @@ -798,74 +798,85 @@ const chart = new Chart(ctx, { <tbody> {% for o in offers %} - <tr class="text-center opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600 main-row""> + <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600"> <!-- TIME + ACTIVE --> - <td class="flex py-3 px-6 dark:text-white text-gray-900" title="Time"> - <svg alt="" class="w-5 h-5 rounded-full mt-5 ml-5 mr-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="{% if o[12]==2 %}#AC0000{% elif o[11]==true %}#6b7280{% else %}#3B82F6{% endif %}" stroke-linejoin="round"> - <circle cx="12" cy="12" r="11"></circle> - <polyline points=" 12,6 12,12 18,12 " stroke="{% if o[12]==2 %} #AC0000 {% elif o[11]==true %} #6b7280 {% else %} #3B82F6 {% endif %}"></polyline> - </g> - </svg> - <div class="py-3 px-6 text-xs text-left" data-tooltip-target="tooltip-active" > - <div class="{% if o[11]==true or o[12]==2 %} dark:text-white {% else %} {% endif %} text-xs"><span class="bold">Posted:</span> {{ o[0] }} ago</div> - <div class="{% if o[11]==true or o[12]==2 %} dark:text-white {% else %} {% endif %} text-xs"><span class="bold">Expires in:</span> {{ o[13] }}</div> - </div> + <td class="py-3 px-6 text-xs"> + <div class="flex items-center justify-center"> + <svg alt="" class="w-5 h-5 rounded-full mr-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="{% if o[12]==2 %}#AC0000{% elif o[11]==true %}#6b7280{% else %}#3B82F6{% endif %}" stroke-linejoin="round"> + <circle cx="12" cy="12" r="11"></circle> + <polyline points=" 12,6 12,12 18,12 " stroke="{% if o[12]==2 %} #AC0000 {% elif o[11]==true %} #6b7280 {% else %} #3B82F6 {% endif %}"></polyline> + </g> + </svg> + <div class="flex flex-col" data-tooltip-target="tooltip-active{{loop.index}}"> + <div class="{% if o[11]==true or o[12]==2 %} dark:text-white {% else %} {% endif %} text-xs"><span class="bold">Posted:</span> {{ o[0] }} ago</div> + <div class="{% if o[11]==true or o[12]==2 %} dark:text-white {% else %} {% endif %} text-xs"><span class="bold">Expires in:</span> {{ o[13] }}</div> + </div> + </div> </td> - <div id="tooltip-active" 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 id="tooltip-active{{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">{% if o[12]==2 %}Revoked{% elif o[11]==true %}Expired{% else %}Active{% endif %}</div> <div class="tooltip-arrow" data-popper-arrow></div> </div> - <!-- TIME + ACTIVE --> <!--<td class="py-4 px-6 text-xs"><a class="monospace text-xs" href=/offer/{{ o[1] }}>{{ o[1]|truncate(6, True) }}</a></td>--> <!--<td class="py-4 px-6 text-xs monospace">{{ o[8] }}{% if o[9]==true %} <b>Sent</b>{% endif %}</td>--> <!-- RECIPIENT --> - <td class="py-3 text-xs monospace"> - <a href="/identity/{{ o[8] }}{% if o[9]==true %}{% endif %}">{{ o[8] }}</a> + <td class="py-3 text-xs monospace text-center"> + <a data-tooltip-target="tooltip-recipient{{loop.index}}" href="/identity/{{ o[8] }}{% if o[9]==true %}{% endif %}">{{ o[8]|truncate(20, 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-blue-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip"> + <div class="active-revoked-expired"><span class="bold">{{ o[8] }}</div> + <div class="tooltip-arrow" data-popper-arrow></div> + </div> <!-- RECIPIENT --> - <!-- YOU GET ICON --> + <!-- YOU GET YOUR OFFERR --> {% if o[9] == true %} <td class="py-3 px-6 text-xs"> - <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 items-left"> + <span class="inline-flex align-middle items-center justify-center w-9 h-10 rounded mr-3"><img class="h-7" src="/static/images/coins/{{ o[3]|replace(" ", "-") }}.png" alt="{{ o[3] }}"></span> <div class="flex flex-col ml-2"> <div class="coinname-value bold" data-coinname="{{ o[3] }}"> {{ o[5]|truncate(8, true, '', 0) }} {{ o[3] }} </div> <div class="usd-value"></div> - <div class="coin-coin">{{ o[3] }}/{{ o[2] }}</div> + <div class="usd-value-converted-in-the-cryptocurrency"></div> + <div class="coin-coin hidden">{{ o[3] }}/{{ o[2] }}</div> + <div class="coin-coin">{{ o[17] }}/{{ o[16] }}</div> </div> </div> </td> - <!-- YOU GET ICON --> + <!-- YOU GET YOUR OFFERS --> - <!-- YOU GET ICON OFFERS --> + <!-- YOU GET NETWORK OFFERS --> {% else %} <td class="py-3 px-6 text-xs"> - <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[2]|replace(" ", "-") }}.png" alt="{{ o[2] }}"></span> - <div class="flex flex-col ml-2"> - <div class="coinname-value bold" data-coinname="{{ o[2] }}"> - {{ o[4]|truncate(8, true, '', 0) }} {{ o[2] }} - </div> - - <div class="usd-value"></div> - <div class="coin-coin">{{ o[2] }}/{{ o[3] }}</div> + <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[2]|replace(" ", "-") }}.png" alt="{{ o[2] }}"> + </span> + <div class="flex flex-col ml-5"> + <div class="coinname bold" data-coinname="{{ o[2] }}"> + {{ o[2] }} + </div> + <div class="coinname-value" data-coinname="{{ o[2] }}"> + {{ o[4]|truncate(8, true, '', 0) }} {{ o[16] }}/{{ o[17] }} + </div> + <div class="usd-value"></div> + <div class="usd-value-in-coin-value"></div> + </div> </div> - </div> </td> {% endif %} + <!-- YOU GET NETWORK OFFERS --> - <!-- YOU GET ICON OFFERS --> - - <!-- YOU SEND ICON --> + <!-- YOU SEND ICON YOUR OFFERS --> {% if o[9] == true %} <td class="py-3 px-6 text-xs"> <div class="flex items-center"> @@ -875,58 +886,60 @@ const chart = new Chart(ctx, { {{ o[4]|truncate(8,true,'',0) }} {{ o[2] }} </div> <div class="usd-value"></div> + <div class="coin-value"></div> <div class="coin-coin">{{ o[2] }}/{{ o[3] }}</div> </div> </div> </td> - <!-- YOU SEND ICON --> + <!-- YOU SEND YOUR OFFERS ICON --> - <!-- YOU SEND ICON OFFERS --> + <!-- YOU SEND NETWORK OFFERS --> {% else %} <td class="py-3 px-6 text-xs"> - <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-2"> - <div class="coinname-value bold" data-coinname="{{ o[3] }}"> - {{ o[5]|truncate(8, true, '', 0) }} {{ o[3] }} - </div> - <div class="usd-value"></div> - <div class="coin-coin">{{ o[3] }}/{{ o[2] }}</div> + <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] }}"> + {{ o[3] }} + </div> + <div class="coinname-value" data-coinname="{{ o[3] }}"> + {{ o[5]|truncate(8, true, '', 0) }} {{ o[17] }}/{{ o[16] }} + </div> + <div class="usd-value"></div> + <div class="usd-value-in-coin-value"></div> + </div> </div> - </div> </td> {% endif %} - <!-- YOU SEND ICON OFFERS --> + <!-- YOU SEND NETWORK OFFERS --> <!-- RATE --> - <td class="py-3 px-6 text-xs"> - <div class="coinname-value hidden" data-coinname="{{ o[3] }}">{{ o[6]|truncate(8,true,'',0) }}</div> - <div class="usd-value hidden"></div> - <div class="profit-value hidden "></div> - <div class="profit-loss"></div> + <td class="py-3 px-6 text-xs rate-table-info"> + + <div class="ratetype pt-1"><span class="bold">Rate:</span><span class="echange-rates" data-coinname="{{ o[3] }}"> {{ o[6]|truncate(8,true,'',0) }}</span> + <div class="profit-name hidden">Profit Value:</div> + <span class="profit-value hidden"></span> + <div class="profittype pt-1"><span class="bold">Profit/Loss:</span><span class="pl-1 profit-loss"></span> + <div class="swaptype pt-1"><span class="bold">Swap Type:</span> {{ o[14] }}</div> + <div class="partial pt-1"><span class="bold">Amount Variable:</span> {{ o[15] }}</div> + <div class="network pt-1"><span class="bold">Network:</span> {{ o[7] }}</div> </td> <!-- RATE --> - <!-- <td class="py-4 px-6">{{ o[10] }}</td>--> - <!-- SWAP OR EDIT --> - <td class="py-3 px-6"> - <a data-tooltip-target="tooltip-swaps" class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md - {% if o[9]==true %} bg-blue-500 text-white border hover:bg-blue-600 dark:border-gray-700 bg-gray-700 transition duration-200 - {% else %} bg-blue-500 text-white hover:bg-blue-600 transition duration-200 {% endif %}" href="/offer/{{ o[1] }}">{% if o[9]==true %} Edit {% else %} Swap {% endif %}</a> + <td class="py-3 px-6 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-blue-500 text-white border hover:bg-blue-600 dark:border-gray-700 bg-gray-700 transition duration-200 {% else %} bg-blue-500 text-white hover:bg-blue-600 transition duration-200 {% endif %}" href="/offer/{{ o[1] }}"> + {% if o[9]==true %} Edit {% else %} Swap {% endif %} + </a> + </div> </td> - - <div id="tooltip-swaps hidden" 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="network"><span class="bold">Network:</span> {{ o[7] }}</div> - <div class="swaptype pt-1"><span class="bold">Swap Type:</span> {{ o[14] }}</div><!-- fix - not showing the correct swap type --> - <div class="partial pt-1"><span class="bold">Amount Variable:</span> {{ o[15] }}</div> - <!-- todo <div class="partial pt-1"><span class="bold">Auto Accept/;</span> Yes</div> --> - <div class="tooltip-arrow" data-popper-arrow></div> - </div> <!-- SWAP OR EDIT --> </tr> - </tbody> + </tbody> {% endfor %} </table> @@ -969,9 +982,9 @@ const chart = new Chart(ctx, { </div> </section> </div> -{% include 'footer.html' %} + <script> - const coinNameToSymbol = { + const coinNameToSymbol = { 'Bitcoin': 'BTC', 'Particl': 'PART', 'Particl Blind': 'PART', @@ -1101,5 +1114,6 @@ function updateProfitLoss(row) { } }); </script> +{% include 'footer.html' %} </body> </html> diff --git a/basicswap/ui/page_offers.py b/basicswap/ui/page_offers.py index d6521c0..76dc1e2 100644 --- a/basicswap/ui/page_offers.py +++ b/basicswap/ui/page_offers.py @@ -661,25 +661,31 @@ def page_offer(self, url_split, post_string): 'summary': summary, }) -def format_timestamp(timestamp): +def format_timestamp(timestamp, is_expired=False): current_time = int(time.time()) - time_diff = current_time - timestamp - if time_diff <= 172800: # Within the last 48 hours + if is_expired: + time_diff = timestamp - current_time + if time_diff <= 0: + return "Expired" + else: + time_diff = current_time - timestamp + + if time_diff <= 172800: hours_ago = time_diff // 3600 minutes_ago = (time_diff % 3600) // 60 - if hours_ago == 0: # Less than an hour ago + if hours_ago == 0: if minutes_ago == 1: return "1 min" else: return f"{minutes_ago} mins" - elif hours_ago == 1: # Within the last hour + elif hours_ago == 1: if minutes_ago == 0: return "1h ago" else: return f"1h {minutes_ago}min" - else: # More than 1 hour ago + else: if minutes_ago == 0: return f"{int(hours_ago)}h" else: @@ -687,7 +693,6 @@ def format_timestamp(timestamp): else: return time.strftime('%Y-%m-%d %H:%M:%S', time.localtime(timestamp)) - def page_offers(self, url_split, post_string, sent=False): server = self.server swap_client = server.swap_client @@ -755,7 +760,9 @@ def page_offers(self, url_split, post_string, sent=False): is_expired = o.expire_at <= now amount_negotiable = "Yes" if o.amount_negotiable else "No" formatted_created_at = format_timestamp(o.created_at) - formatted_expired_at = format_timestamp(o.expire_at) + formatted_expired_at = format_timestamp(o.expire_at, is_expired=True) + tla_from = ci_from.ticker() + tla_to = ci_to.ticker() formatted_offers.append(( formatted_created_at, o.offer_id.hex(), @@ -772,7 +779,9 @@ def page_offers(self, url_split, post_string, sent=False): o.active_ind, formatted_expired_at, strSwapDesc(o.swap_type), - amount_negotiable)) + amount_negotiable, + tla_from, + tla_to)) coins_from, coins_to = listAvailableCoins(swap_client, split_from=True) @@ -786,7 +795,7 @@ def page_offers(self, url_split, post_string, sent=False): template = server.env.get_template('offers.html') return self.render_template(template, { 'page_type': 'Your Offers' if sent else 'Network Order Book', - 'page_button': 'hidden' if sent or offers_count <= 30 else '', # Conditionally hide the button + 'page_button': 'hidden' if sent or offers_count <= 30 else '', 'page_type_description': 'Your entire offer history.' if sent else 'Consult available offers in the order book and initiate a coin swap.', 'messages': messages, 'show_chart': False if sent else swap_client.settings.get('show_chart', True), @@ -799,4 +808,6 @@ def page_offers(self, url_split, post_string, sent=False): 'summary': summary, 'sent_offers': sent, 'offers_count': offers_count, + 'tla_from': tla_from, + 'tla_to': tla_to, })