seasharp
/
basicswap_miserver
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ui: Update

Browse Source
2024-05-20_merge
gerlofvanek 11 months ago
parent 0ff0a13a67
commit 3b8b512003
5 changed files with 1327 additions and 1181 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      basicswap/templates/footer.html
  2. 533
      basicswap/templates/offers.html
  3. 114
      basicswap/templates/style.html
  4. 224
      basicswap/templates/wallet.html
  5. 111
      basicswap/templates/wallets.html

4
basicswap/templates/footer.html
Unescape View File

@ -21,9 +21,9 @@
<div class="w-full md:w-1/2 mb-6 md:mb-0"> <div class="w-full md:w-1/2 mb-6 md:mb-0">
<div class="flex items-center"> <div class="flex items-center">
<div class="flex items-center"> <div class="flex items-center">
<p class="text-sm text-gray-90 dark:text-white font-medium">© 2023~ (BSX) BasicSwap</p> <span class="w-1 h-1 mx-1.5 bg-gray-500 dark:bg-white rounded-full"></span> <p class="text-sm text-gray-90 dark:text-white font-medium">© 2024~ (BSX) BasicSwap</p> <span class="w-1 h-1 mx-1.5 bg-gray-500 dark:bg-white rounded-full"></span>
<p class="text-sm text-coolGray-400 font-medium">BSX: v{{ version }}</p> <span class="w-1 h-1 mx-1.5 bg-gray-500 dark:bg-white rounded-full"></span> <p class="text-sm text-coolGray-400 font-medium">BSX: v{{ version }}</p> <span class="w-1 h-1 mx-1.5 bg-gray-500 dark:bg-white rounded-full"></span>
<p class="text-sm text-coolGray-400 font-medium">GUI: v2.0.2</p> <span class="w-1 h-1 mx-1.5 bg-gray-500 dark:bg-white rounded-full"></span> <p class="text-sm text-coolGray-400 font-medium">GUI: v2.0.3</p> <span class="w-1 h-1 mx-1.5 bg-gray-500 dark:bg-white rounded-full"></span>
<p class="mr-2 text-sm font-bold dark:text-white text-gray-90 ">Made with </p> <p class="mr-2 text-sm font-bold dark:text-white text-gray-90 ">Made with </p>
<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#f80b0b" stroke-linejoin="round"> <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#f80b0b" stroke-linejoin="round">

533
basicswap/templates/offers.html
Unescape View File

@ -1,65 +1,43 @@
{% include 'header.html' %} {% include 'header.html' %}
{% from 'style.html' import breadcrumb_line_svg, place_new_offer_svg, page_back_svg, page_forwards_svg, filter_clear_svg, filter_apply_svg, input_arrow_down_svg, arrow_right_svg %}
<div class="container mx-auto"> <div class="container mx-auto">
<section class="p-5 mt-5"> <section class="p-5 mt-5">
<div class="flex flex-wrap items-center -m-2"> <div class="flex flex-wrap items-center -m-2">
<div class="w-full md:w-1/2 p-2"> <div class="w-full md:w-1/2 p-2">
<ul class="flex flex-wrap items-center gap-x-3 mb-2"> <ul class="flex flex-wrap items-center gap-x-3 mb-2">
<li> <li><a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">Home</a></li>
<a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/"> <li>{{ breadcrumb_line_svg | safe }}</li>
<p>Home</p> <li><a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/wallets">{{ page_type }}</a></li>
</a> <li>{{ breadcrumb_line_svg | safe }}</li>
</li>
<li>
<svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
</svg>
</li>
<li>
<a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="#">{{ page_type }}</a>
</li>
<li>
<svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
</svg>
</li>
</ul> </ul>
</div> </div>
</div> </div>
</section> </section>
<section class="py-4"> <section class="py-4">
<div class="container px-4 mx-auto"> <div class="container px-4 mx-auto">
<div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden"> <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
<img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 left-4 top-4 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="dots-red">
<img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="wave">
<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="relative z-20 flex flex-wrap items-center -m-3">
<div class="w-full md:w-1/2 p-3"> <div class="w-full md:w-1/2 p-3">
<h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">{{ page_type }}</h2> <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">{{ page_type }}</h2>
<p class="font-normal text-coolGray-200 dark:text-white">{{ page_type_description }}</p> <p class="font-normal text-coolGray-200 dark:text-white">{{ page_type_description }}</p>
</div> </div>
<div class="{{ page_button }} w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto"> <div class="rounded-full{{ page_button }} w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
<a id="refresh" href="/newoffer" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border dark:bg-gray-500 dark:hover:bg-gray-700 border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> <a id="refresh" href="/newoffer" class="rounded-full flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border dark:bg-gray-500 dark:hover:bg-gray-700 border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"> {{ place_new_offer_svg | safe }} <span>Place new Offer</span>
<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>
<span>Place new Offer</span>
</a> </a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
{% include 'inc_messages.html' %} {% include 'inc_messages.html' %}
{% if show_chart %} {% if show_chart %}
<section class="relative"> <section class="relative">
<div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden"> <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden">
<div class="pb-6 border-coolGray-100"> <div class="pb-6 border-coolGray-100">
<div class="flex flex-wrap items-center justify-between -m-2"> <div class="flex flex-wrap items-center justify-between -m-2">
@ -85,13 +63,14 @@
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section class="py-4 overflow-hidden container-to-blur"> <section class="py-4 overflow-hidden container-to-blur">
<div class="container px-4 mx-auto"> <div class="container px-4 mx-auto">
<div class="flex flex-wrap -m-3"> <div class="flex flex-wrap -m-3">
<div class="w-full sm:w-1/2 lg:w-1/5 p-3" id="btc-container">
<div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-lg dark:text-white" id="btc-active"> <div class="w-full sm:w-1/2 lg:w-1/5 p-3" id="btc-container">
<div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-lg dark:text-white active-container" id="btc-active">
<div class="flex items-center mb-2.5"> <div class="flex items-center mb-2.5">
<img src="/static/images/coins/Bitcoin-20.png" height="20" width="20" class="mr-2"> <img src="/static/images/coins/Bitcoin-20.png" height="20" width="20" class="mr-2">
<p class="text-sm text-neutral-500 font-medium">Bitcoin (BTC)</p> <p class="text-sm text-neutral-500 font-medium">Bitcoin (BTC)</p>
@ -111,16 +90,22 @@
</h3> </h3>
</div> </div>
</div> </div>
<p class="text-xs text-neutral-400 font-medium"> <p class="text-2xs text-neutral-400 font-medium">
Volume 24H:<div class="text-xs" id="btc-volume-24h"></div> Volume 24H:
<div class="text-xs" id="btc-volume-24h"></div>
</p>
<p class="text-2xs text-neutral-400 font-medium hidden">
Price in BTC:
<div class="text-xs" id="usd-price-btc"></div>
</p> </p>
</div> </div>
</div> </div>
<div class="w-full sm:w-1/2 lg:w-1/5 p-3" id="xmr-container">
<div class="w-full sm:w-1/2 lg:w-1/5 p-3" id="xmr-container">
<div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-lg dark:text-white"> <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"> <div class="flex items-center mb-2.5">
<img src="/static/images/coins/Monero-20.png" height="20" width="20" class="mr-2"> <img src="/static/images/coins/Monero-20.png" height="20" width="20" class="mr-2">
<p class="text-sm text-neutral-500 font-medium">Monero (XMR)</p> <p class="text-sm text-neutral-500 font-medium">Monero (BTC)</p>
</div> </div>
<div class="flex flex-wrap items-center mb-2 -m-1"> <div class="flex flex-wrap items-center mb-2 -m-1">
<div class="w-auto p-1"> <div class="w-auto p-1">
@ -133,18 +118,22 @@
</div> </div>
<div class="w-auto p-1"> <div class="w-auto p-1">
<h3 class="font-heading text-1xl font-semibold"> <h3 class="font-heading text-1xl font-semibold">
<div class="text-xs" id="xmr-price-btc"></div> <div id="xmr-price-usd"></div>
</h3> </h3>
</div> </div>
</div> </div>
<p class="text-xs text-neutral-400 font-medium"> <p class="text-2xs text-neutral-400 font-medium">
Volume 24H:<div class="text-xs" id="xmr-volume-24h"></div> Volume 24H:
<div class="text-xs" id="xmr-volume-24h"></div>
</p>
<p class="text-2xs text-neutral-400 font-medium">
Price in BTC:
<div class="text-xs" id="xmr-price-btc"></div>
</p> </p>
</div> </div>
</div> </div>
<div class="w-full sm:w-1/2 lg:w-1/5 p-3" id="part-container"> <div class="w-full sm:w-1/2 lg:w-1/5 p-3" id="part-container">
<div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-lg dark:text-white"> <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"> <div class="flex items-center mb-2.5">
<img src="/static/images/coins/Particl-20.png" height="20" width="20" class="mr-2"> <img src="/static/images/coins/Particl-20.png" height="20" width="20" class="mr-2">
@ -159,19 +148,19 @@
<div class="w-auto p-1"> <div class="w-auto p-1">
<div id="part-price-change-container" class="w-auto p-1"></div> <div id="part-price-change-container" class="w-auto p-1"></div>
</div> </div>
<div class="w-auto p-1">
<h3 class="font-heading text-1xl font-semibold">
<div class="text-xs" id="part-price-btc"></div>
</h3>
</div>
</div> </div>
<p class="text-xs text-neutral-400 font-medium"> <p class="text-2xs text-neutral-400 font-medium">
Volume 24H:<div class="text-xs"id="part-volume-24h"></div> Volume 24H:
<div class="text-xs" id="part-volume-24h"></div>
</p>
<p class="text-2xs text-neutral-400 font-medium">
Price in BTC:
<div class="text-xs" id="part-price-btc"></div>
</p> </p>
</div> </div>
</div> </div>
<div class="w-full sm:w-1/2 lg:w-1/5 p-3" id="pivx-container">
<div class="w-full sm:w-1/2 lg:w-1/5 p-3" id="pivx-container">
<div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-lg dark:text-white"> <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"> <div class="flex items-center mb-2.5">
<img src="/static/images/coins/PIVX-20.png" height="20" width="20" class="mr-2"> <img src="/static/images/coins/PIVX-20.png" height="20" width="20" class="mr-2">
@ -186,19 +175,19 @@
<div class="w-auto p-1"> <div class="w-auto p-1">
<div id="pivx-price-change-container" class="w-auto p-1"></div> <div id="pivx-price-change-container" class="w-auto p-1"></div>
</div> </div>
<div class="w-auto p-1">
<h3 class="text-xs font-semibold">
<div id="pivx-price-btc"></div>
</h3>
</div> </div>
<p class="text-2xs text-neutral-400 font-medium">
</div> Volume 24H:
<p class="text-xs text-neutral-400 font-medium"> <div class="text-xs" id="pivx-volume-24h"></div>
Volume 24H:<div class="text-xs" id="pivx-volume-24h"></div> </p>
<p class="text-2xs text-neutral-400 font-medium">
Price in BTC:
<div class="text-xs" id="pivx-price-btc"></div>
</p> </p>
</div> </div>
</div> </div>
<div class="w-full sm:w-1/2 lg:w-1/5 p-3" id="firo-container">
<div class="w-full sm:w-1/2 lg:w-1/5 p-3" id="firo-container">
<div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-lg dark:text-white"> <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"> <div class="flex items-center mb-2.5">
<img src="/static/images/coins/Firo-20.png" height="20" width="20" class="mr-2"> <img src="/static/images/coins/Firo-20.png" height="20" width="20" class="mr-2">
@ -213,19 +202,19 @@
<div class="w-auto p-1"> <div class="w-auto p-1">
<div id="firo-price-change-container" class="w-auto p-1"></div> <div id="firo-price-change-container" class="w-auto p-1"></div>
</div> </div>
<div class="w-auto p-1">
<h3 class="text-xs font-semibold">
<div id="firo-price-btc"></div>
</h3>
</div>
</div> </div>
<p class="text-xs text-neutral-400 font-medium"> <p class="text-2xs text-neutral-400 font-medium">
Volume 24H:<div class="text-xs" id="firo-volume-24h"></div> Volume 24H:
<div class="text-xs" id="firo-volume-24h"></div>
</p>
<p class="text-2xs text-neutral-400 font-medium">
Price in BTC:
<div class="text-xs" id="firo-price-btc"></div>
</p> </p>
</div> </div>
</div> </div>
<div class="w-full sm:w-1/2 lg:w-1/5 p-3" id="ltc-container">
<div class="w-full sm:w-1/2 lg:w-1/5 p-3" id="ltc-container">
<div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-lg dark:text-white"> <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"> <div class="flex items-center mb-2.5">
<img src="/static/images/coins/Litecoin-20.png" height="20" width="20" class="mr-2"> <img src="/static/images/coins/Litecoin-20.png" height="20" width="20" class="mr-2">
@ -240,18 +229,19 @@
<div class="w-auto p-1"> <div class="w-auto p-1">
<div id="ltc-price-change-container" class="w-auto p-1"></div> <div id="ltc-price-change-container" class="w-auto p-1"></div>
</div> </div>
<div class="w-auto p-1">
<h3 class="text-xs font-semibold">
<div id="ltc-price-btc"></div>
</h3>
</div>
</div> </div>
<p class="text-xs text-neutral-400 font-medium"> <p class="text-2xs text-neutral-400 font-medium">
Volume 24H:<div class="text-xs" id="ltc-volume-24h"></div> Volume 24H:
<div class="text-xs" id="ltc-volume-24h"></div>
</p>
<p class="text-2xs text-neutral-400 font-medium">
Price in BTC:
<div class="text-xs" id="ltc-price-btc"></div>
</p> </p>
</div> </div>
</div> </div>
<div class="w-full sm:w-1/2 lg:w-1/5 p-3" id="dash-container">
<div class="w-full sm:w-1/2 lg:w-1/5 p-3" id="dash-container">
<div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-lg dark:text-white"> <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"> <div class="flex items-center mb-2.5">
<img src="/static/images/coins/Dash-20.png" height="20" width="20" class="mr-2"> <img src="/static/images/coins/Dash-20.png" height="20" width="20" class="mr-2">
@ -266,18 +256,19 @@
<div class="w-auto p-1"> <div class="w-auto p-1">
<div id="dash-price-change-container" class="w-auto p-1"></div> <div id="dash-price-change-container" class="w-auto p-1"></div>
</div> </div>
<div class="w-auto p-1">
<h3 class="text-xs font-semibold">
<div id="dash-price-btc"></div>
</h3>
</div> </div>
</div> <p class="text-2xs text-neutral-400 font-medium">
<p class="text-xs text-neutral-400 font-medium"> Volume 24H:
Volume 24H:<div class="text-xs" id="dash-volume-24h"></div> <div class="text-xs" id="dash-volume-24h"></div>
</p>
<p class="text-2xs text-neutral-400 font-medium">
Price in BTC:
<div class="text-xs" id="dash-price-btc"></div>
</p> </p>
</div> </div>
</div> </div>
<div class="w-full sm:w-1/2 lg:w-1/5 p-3" id="doge-container">
<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="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"> <div class="flex items-center mb-2.5">
<img src="/static/images/coins/Doge-20.png" height="20" width="20" class="mr-2"> <img src="/static/images/coins/Doge-20.png" height="20" width="20" class="mr-2">
@ -292,22 +283,50 @@
<div class="w-auto p-1"> <div class="w-auto p-1">
<div id="doge-price-change-container" class="w-auto p-1"></div> <div id="doge-price-change-container" class="w-auto p-1"></div>
</div> </div>
</div>
<p class="text-2xs text-neutral-400 font-medium">
Volume 24H:
<div class="text-xs" id="doge-volume-24h"></div>
</p>
<p class="text-2xs text-neutral-400 font-medium">
Price in BTC:
<div class="text-xs" id="doge-price-btc"></div>
</p>
</div>
</div>
<div class="w-full sm:w-1/2 lg:w-1/5 p-3" id="eth-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/Ethereum-20.png" height="20" width="20" class="mr-2">
<p class="text-sm text-neutral-500 font-medium">Ethereum (ETH)</p>
</div>
<div class="flex flex-wrap items-center mb-2 -m-1">
<div class="w-auto p-1"> <div class="w-auto p-1">
<h3 class="text-xs font-semibold"> <h3 class="font-heading text-1xl font-semibold">
<div id="doge-price-btc"></div> <div id="eth-price-usd"></div>
</h3> </h3>
</div> </div>
<div class="w-auto p-1">
<div id="eth-price-change-container" class="w-auto p-1"></div>
</div>
</div> </div>
<p class="text-xs text-neutral-400 font-medium"> <p class="text-2xs text-neutral-400 font-medium">
Volume 24H:<div class="text-xs" id="doge-volume-24h"></div> Volume 24H:
<div class="text-xs" id="eth-volume-24h"></div>
</p>
<p class="text-2xs text-neutral-400 font-medium">
Price in BTC:
<div class="text-xs" id="eth-price-btc"></div>
</p> </p>
</div> </div>
</div> </div>
</section>
<script> </section>
window.addEventListener('load', function() { <script>
window.addEventListener('load', function() {
const api_key = '{{chart_api_key}}'; const api_key = '{{chart_api_key}}';
const coins = ['BTC', 'PART', 'XMR', 'LTC', 'FIRO', 'DASH', 'PIVX', 'DOGE']; const coins = ['BTC', 'PART', 'XMR', 'LTC', 'FIRO', 'DASH', 'PIVX', 'DOGE', 'ETH'];
coins.forEach(coin => { coins.forEach(coin => {
fetch(`https://min-api.cryptocompare.com/data/pricemultifull?fsyms=${coin}&tsyms=USD,BTC&api_key=${api_key}`) fetch(`https://min-api.cryptocompare.com/data/pricemultifull?fsyms=${coin}&tsyms=USD,BTC&api_key=${api_key}`)
.then(response => { .then(response => {
@ -392,7 +411,7 @@ function negativePriceChangeHTML(value) {
} }
function setActiveContainer(containerId) { function setActiveContainer(containerId) {
const containerIds = ['btc-container', 'xmr-container', 'part-container', 'pivx-container', 'firo-container', 'dash-container', 'ltc-container', 'doge-container']; const containerIds = ['btc-container', 'xmr-container', 'part-container', 'pivx-container', 'firo-container', 'dash-container', 'ltc-container', 'doge-container', 'eth-container'];
const activeClass = 'active-container'; const activeClass = 'active-container';
containerIds.forEach(id => { containerIds.forEach(id => {
const container = document.getElementById(id); const container = document.getElementById(id);
@ -437,6 +456,10 @@ document.getElementById('doge-container').addEventListener('click', () => {
setActiveContainer('doge-container'); setActiveContainer('doge-container');
updateChart('DOGE'); updateChart('DOGE');
}); });
document.getElementById('eth-container').addEventListener('click', () => {
setActiveContainer('eth-container');
updateChart('ETH');
});
let coin; let coin;
const coinOptions = { const coinOptions = {
@ -580,7 +603,8 @@ const chart = new Chart(ctx, {
} }
}); });
</script> </script>
{% endif %} {% endif %}
<section> <section>
<div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden"> <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden">
<div class="pb-6 border-coolGray-100"> <div class="pb-6 border-coolGray-100">
@ -592,10 +616,7 @@ const chart = new Chart(ctx, {
<div class="w-full md:w-0/12"> <div class="w-full md:w-0/12">
<div class="flex flex-wrap justify-end -m-1.5"> <div class="flex flex-wrap justify-end -m-1.5">
<div class="w-full md:w-auto p-1.5"> <div class="w-full md:w-auto p-1.5">
<div class="relative"> <div class="relative">{{ input_arrow_down_svg | safe }}
<svg class="absolute right-4 top-1/2 transform -translate-y-1/2 " width="16 " height="16 " viewBox="0 0 16 16 " fill="none " xmlns="http://www.w3.org/2000/svg ">
<path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z " fill="#8896AB"></path>
</svg>
<select name="coin_from" class="hover:border-blue-500 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0"> <select name="coin_from" class="hover:border-blue-500 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0">
<option value="any" {% if filters.coin_from==-1 %} selected{% endif %}>Any</option> <option value="any" {% if filters.coin_from==-1 %} selected{% endif %}>Any</option>
{% for c in coins_from %} {% for c in coins_from %}
@ -606,18 +627,13 @@ const chart = new Chart(ctx, {
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
<div class="w-full md:w-auto p-1.5"> <div class="w-full md:w-auto p-1.5">
<p class="text-sm font-heading"> <p class="text-sm font-heading">{{ arrow_right_svg | safe }}
<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="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z " clip-rule="evenodd"></path>
</svg>
</p> </p>
</div> </div>
</div> </div>
<div class="w-full md:w-auto p-1.5"> <div class="w-full md:w-auto p-1.5">
<div class="relative"> <div class="relative">{{ input_arrow_down_svg | safe }}
<svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
</svg>
<!-- is="ms-dropdown" todo --> <!-- is="ms-dropdown" todo -->
<select name="coin_to" class="hover:border-blue-500 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0"> <select name="coin_to" class="hover:border-blue-500 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0">
<option value="any" {% if filters.coin_to==-1 %} selected{% endif %}>Any</option> <option value="any" {% if filters.coin_to==-1 %} selected{% endif %}>Any</option>
@ -633,10 +649,7 @@ const chart = new Chart(ctx, {
</div> </div>
</div> </div>
<div class="w-full md:w-auto p-1.5"> <div class="w-full md:w-auto p-1.5">
<div class="relative"> <div class="relative">{{ input_arrow_down_svg | safe }}
<svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
</svg>
<select name="sort_by" class="hover:border-blue-500 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0"> <select name="sort_by" class="hover:border-blue-500 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0">
<option value="created_at" {% if filters.sort_by=='created_at' %} selected{% endif %}>Time Created</option> <option value="created_at" {% if filters.sort_by=='created_at' %} selected{% endif %}>Time Created</option>
<option value="rate" {% if filters.sort_by=='rate' %} selected{% endif %}>Rate</option> <option value="rate" {% if filters.sort_by=='rate' %} selected{% endif %}>Rate</option>
@ -644,10 +657,7 @@ const chart = new Chart(ctx, {
</div> </div>
</div> </div>
<div class="w-full md:w-auto p-1.5"> <div class="w-full md:w-auto p-1.5">
<div class="relative"> <div class="relative">{{ input_arrow_down_svg | safe }}
<svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
</svg>
<select name="sort_dir" class="hover:border-blue-500 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0"> <select name="sort_dir" class="hover:border-blue-500 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0">
<option value="asc" {% if filters.sort_dir=='asc' %} selected{% endif %}>Ascending</option> <option value="asc" {% if filters.sort_dir=='asc' %} selected{% endif %}>Ascending</option>
<option value="desc" {% if filters.sort_dir=='desc' %} selected{% endif %}>Descending</option> <option value="desc" {% if filters.sort_dir=='desc' %} selected{% endif %}>Descending</option>
@ -660,10 +670,7 @@ const chart = new Chart(ctx, {
</div> </div>
</div> </div>
<div class="w-full md:w-auto p-1.5"> <div class="w-full md:w-auto p-1.5">
<div class="relative"> <div class="relative">{{ input_arrow_down_svg | safe }}
<svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
</svg>
<select name="sent_from" class="hover:border-blue-500 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0"> <select name="sent_from" class="hover:border-blue-500 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0">
<option value="any" {% if filters.sent_from=='any' %} selected{% endif %}>Any</option> <option value="any" {% if filters.sent_from=='any' %} selected{% endif %}>Any</option>
<option value="only" {% if filters.sent_from=='only' %} selected{% endif %}>Only</option> <option value="only" {% if filters.sent_from=='only' %} selected{% endif %}>Only</option>
@ -677,10 +684,7 @@ const chart = new Chart(ctx, {
</div> </div>
</div> </div>
<div class="w-full md:w-auto p-1.5"> <div class="w-full md:w-auto p-1.5">
<div class="relative"> <div class="relative">{{ input_arrow_down_svg | safe }}
<svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
</svg>
<select name="active" class="hover:border-blue-500 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0"> <select name="active" class="hover:border-blue-500 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0">
<option value="any" {% if filters.active=='any' %} selected{% endif %}>Any</option> <option value="any" {% if filters.active=='any' %} selected{% endif %}>Any</option>
<option value="active" {% if filters.active=='active' %} selected{% endif %}>Active</option> <option value="active" {% if filters.active=='active' %} selected{% endif %}>Active</option>
@ -692,34 +696,14 @@ const chart = new Chart(ctx, {
{% endif %} {% endif %}
<div class="w-full md:w-auto p-1.5"> <div class="w-full md:w-auto p-1.5">
<div class="relative"> <div class="relative">
<button type="submit" name='clearfilters' value="Clear Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-white bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> <button type="submit" name='clearfilters' value="Clear Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-white bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">{{ filter_clear_svg | safe }}
<svg class="mr-2 w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
<line x1="20" y1="2" x2="12.329" y2="11.506"></line>
<path d="M11,11a2,2,0,0,1,2,2,3.659,3.659,0,0,1-.2.891A9.958,9.958,0,0,0,13.258,23H1C1,16.373,4.373,11,11,11Z"></path>
<line x1="18" y1="15" x2="23" y2="15" stroke="#ffffff"></line>
<line x1="17" y1="19" x2="23" y2="19" stroke="#ffffff"></line>
<line x1="19" y1="23" x2="23" y2="23" stroke="#ffffff"></line>
<path d="M8.059,11.415A3.9,3.9,0,0,0,12,16c.041,0,.079-.011.12-.012" data-cap="butt"></path>
<path d="M5,23a13.279,13.279,0,0,1,.208-3.4" data-cap="butt"></path>
<path d="M9.042,23c-.688-1.083-.313-3.4-.313-3.4" data-cap="butt"></path>
</g>
</svg>
<span>Clear</span> <span>Clear</span>
</button> </button>
</div> </div>
</div> </div>
<div class="w-full md:w-auto p-1.5"> <div class="w-full md:w-auto p-1.5">
<div class="relative"> <div class="relative">
<button type="submit" name='applyfilters' value="Apply Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-white bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> <button type="submit" name='applyfilters' value="Apply Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-white bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">{{ filter_apply_svg | safe }}
<svg class="mr-2 w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
<rect x="2" y="2" width="7" height="7"></rect>
<rect x="15" y="15" width="7" height="7"></rect>
<rect x="2" y="15" width="7" height="7"></rect>
<polyline points="15 6 17 8 22 3" stroke="#ffffff"></polyline>
</g>
</svg>
<span>Apply Filters</span> <span>Apply Filters</span>
</button> </button>
</div> </div>
@ -733,6 +717,7 @@ const chart = new Chart(ctx, {
<div class="px-6"> <div class="px-6">
<div class="w-full mt-6 pb-6 overflow-x-auto"> <div class="w-full mt-6 pb-6 overflow-x-auto">
<table class="w-full min-w-max"> <table class="w-full min-w-max">
<thead class="uppercase"> <thead class="uppercase">
<tr class="text-left"> <tr class="text-left">
<th class="p-0"> <th class="p-0">
@ -756,21 +741,11 @@ const chart = new Chart(ctx, {
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">You get</span> <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">You get</span>
</div> </div>
</th> </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">Amount</span>
</div>
</th>
<th class="p-0"> <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">
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">You Send</span> <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">You Send</span>
</div> </div>
</th> </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">Amount</span>
</div>
</th>
<th class="p-0"> <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">
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Rate</span> <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Rate</span>
@ -784,9 +759,12 @@ const chart = new Chart(ctx, {
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for o in offers %} {% for o in offers %}
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600"> <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 items-center py-7 px-46 dark:text-white text-gray-900 whitespace-nowrap" title="{% if o[12]==2 %}Revoked{% elif o[11]==true %}Expired{% else %}Active{% endif %}"> <td class="flex items-center py-7 px-46 dark:text-white text-gray-900 whitespace-nowrap" title="{% if o[12]==2 %}Revoked{% elif o[11]==true %}Expired{% else %}Active{% endif %}">
<svg alt="" class="w-5 h-5 rounded-full ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> <svg alt="" class="w-5 h-5 rounded-full ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="{% if o[12]==2 %}#AC0000{% elif o[11]==true %}#6b7280{% else %}#3B82F6{% endif %}" stroke-linejoin="round"> <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">
@ -798,60 +776,110 @@ const chart = new Chart(ctx, {
<div class="{% if o[11]==true or o[12]==2 %} dark:text-white {% else %} font-semibold {% endif %} text-xs">{{ o[0] }}</div> <div class="{% if o[11]==true or o[12]==2 %} dark:text-white {% else %} font-semibold {% endif %} text-xs">{{ o[0] }}</div>
</div> </div>
</td> </td>
<!-- 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"><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>--> <!--<td class="py-4 px-6 text-xs monospace">{{ o[8] }}{% if o[9]==true %} <b>Sent</b>{% endif %}</td>-->
<!-- DETAIS -->
<td class="py-3 px-6 text-xs"> <td class="py-3 px-6 text-xs">
<div class="network"><span class="bold">Network:</span> {{ o[7] }}</div> <div class="network"><span class="bold">Network:</span> {{ o[7] }}</div>
<div class="partial pt-1"><span class="bold">Amount Variable:</span> {{ o[14] }}<div> <div class="partial pt-1"><span class="bold">Amount Variable:</span>{{ o[14] }}</div>
<div class="swaptype pt-1"><span class="bold">Swap Type:</span> {{ o[13] }}</div> <div class="swaptype pt-1"><span class="bold">Swap Type:</span> {{ o[13] }}</div>
<!-- {% if o[12]==2 %}(Revoked){% elif o[11]==true %}(Not Active){% else %}(Active){% endif %} --> <!-- {% if o[12]==2 %}(Revoked){% elif o[11]==true %}(Not Active){% else %}(Active){% endif %} -->
</td> </td>
<!-- DETAILS -->
<!-- RECIPIENT -->
<td class="py-3 px-6 text-xs monospace"> <td class="py-3 px-6 text-xs monospace">
<a href="/identity/{{ o[8] }}{% if o[9]==true %}{% endif %}">{{ o[8] }}</a> <a href="/identity/{{ o[8] }}{% if o[9]==true %}{% endif %}">{{ o[8] }}</a>
</td> </td>
<!-- RECIPIENT -->
<!-- YOU GET ICON -->
{% if o[9] == true %}
<td class="py-3 px-6 text-xs"> <td class="py-3 px-6 text-xs">
<span class="inline-flex align-middle items-center justify-center w-9 h-10 rounded"> <div class="flex items-center">
{% if o[9]==true %} <img class="h-7" src="/static/images/coins/{{ o[3]|replace(" ", "-") }}.png" alt=""> <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=""></span>
</span>{{ o[3] }} <div class="flex flex-col ml-2">
</td> <div class="coinname-value bold" data-coinname="{{ o[3] }}">
<td class="py-3 px-6 text-xs"> {{ o[5]|truncate(8, true, '', 0) }} {{ o[3] }}
<div class="coinname-value" data-coinname="{{ o[3] }}">{{ o[5]|truncate(8,true,'',0) }}</div> </div>
<div class="usd-value"></div> <div class="usd-value"></div>
</div>
</div>
</td> </td>
<!-- YOU GET ICON -->
<!-- YOU GET ICON OFFERS -->
{% else %} {% else %}
<img class="h-7" src="/static/images/coins/{{ o[2]|replace(" ", "-") }}.png" alt="">
</span>{{ o[2] }}
</td>
<td class="py-3 px-6 text-xs"> <td class="py-3 px-6 text-xs">
<div class="coinname-value" data-coinname="{{ o[2] }}">{{ o[4]|truncate(8,true,'',0) }}</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=""></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="usd-value"></div>
</div>
</div>
</td> </td>
{% endif %} {% endif %}
<td class="py-4 px-6 text-xs">
<span class="inline-flex align-middle items-center justify-center w-9 h-10 rounded"> {% if o[9]==true %} <img class="h-7" src="/static/images/coins/{{ o[2]|replace(" ", "-") }}.png" alt=""> <!-- YOU GET ICON OFFERS -->
</span>{{ o[2] }}
</td> <!-- YOU SEND ICON -->
{% if o[9] == true %}
<td class="py-3 px-6 text-xs"> <td class="py-3 px-6 text-xs">
<div class="coinname-value" data-coinname="{{ o[2] }}">{{ o[4]|truncate(8,true,'',0) }}</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=""></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="usd-value"></div>
</div>
</div>
</td> </td>
<!-- YOU SEND ICON -->
<!-- YOU SEND ICON OFFERS -->
{% else %} {% else %}
<img class="h-7" src="/static/images/coins/{{ o[3]|replace(" ", "-") }}.png" alt="">
</span>{{ o[3] }}
</td>
<td class="py-3 px-6 text-xs"> <td class="py-3 px-6 text-xs">
<div class="coinname-value" data-coinname="{{ o[3] }}">{{ o[5]|truncate(8,true,'',0) }}</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=""></span>
<div class="flex flex-col ml-2">
<!-- Added ml-2 for left margin -->
<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="usd-value"></div>
</div>
</div>
</td> </td>
{% endif %} {% endif %}
<!-- YOU SEND ICON OFFERS -->
<!-- RATE -->
<td class="py-3 px-6 text-xs"> <td class="py-3 px-6 text-xs">
<div class="coinname-value" data-coinname="{{ o[3] }}">{{ o[6]|truncate(8,true,'',0) }}</div> <div class="coinname-value" data-coinname="{{ o[3] }}">{{ o[6]|truncate(8,true,'',0) }}</div>
<div class="usd-value"></div> <div class="usd-value"></div>
<div class="profit-value hidden"></div>
<div class="profit-loss"></div>
</td> </td>
<!-- RATE -->
<!-- <td class="py-4 px-6">{{ o[10] }}</td>--> <!-- <td class="py-4 px-6">{{ o[10] }}</td>-->
<!-- SWAP OR EDIT -->
<td class="py-3 px-6"> <td class="py-3 px-6">
<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 border-blue-500 hover:bg-blue-600 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> <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>
</td> </td>
<!-- SWAP OR EDIT -->
</tr> </tr>
</tbody> </tbody>
{% endfor %} {% endfor %}
@ -860,14 +888,13 @@ const chart = new Chart(ctx, {
<input type="hidden" name="pageno" value="{{ filters.page_no }}"> <input type="hidden" name="pageno" value="{{ filters.page_no }}">
</div> </div>
</div> </div>
<div class="rounded-b-md"> <div class="rounded-b-md">
<div class="w-full md:w-0/12"> <div class="w-full md:w-0/12">
<div class="flex flex-wrap justify-end pt-6 pr-6 border-t border-gray-100 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"> <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"> <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"> {{ page_back_svg | safe }}
<path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
</svg>
<span>Page Back</span> <span>Page Back</span>
</button> </button>
</div> </div>
@ -879,14 +906,13 @@ const chart = new Chart(ctx, {
<div class="w-full md:w-auto p-1.5"> <div class="w-full md:w-auto p-1.5">
<button type="submit" name='pageforwards' value="Page Forwards" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 focus:ring-0 focus:outline-none"> <button type="submit" name='pageforwards' value="Page Forwards" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 focus:ring-0 focus:outline-none">
<span>Page Forwards</span> <span>Page Forwards</span>
<svg aria-hidden="true" class="ml-2 w-5 h-5" fill="#fff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> {{ page_forwards_svg | safe }}
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
@ -896,30 +922,7 @@ const chart = new Chart(ctx, {
</div> </div>
{% include 'footer.html' %} {% include 'footer.html' %}
<script> <script>
document.getElementById('btc-container').addEventListener('click', () => { const coinNameToSymbol = {
updateChart('BTC');
});
document.getElementById('xmr-container').addEventListener('click', () => {
updateChart('XMR');
});
document.getElementById('part-container').addEventListener('click', () => {
updateChart('PART');
});
document.getElementById('pivx-container').addEventListener('click', () => {
updateChart('PIVX');
});
document.getElementById('firo-container').addEventListener('click', () => {
updateChart('FIRO');
});
document.getElementById('dash-container').addEventListener('click', () => {
updateChart('DASH');
});
document.getElementById('ltc-container').addEventListener('click', () => {
updateChart('LTC');
});
</script>
<script>
const coinNameToSymbol = {
'Bitcoin': 'BTC', 'Bitcoin': 'BTC',
'Particl': 'PART', 'Particl': 'PART',
'Particl Blind': 'PART', 'Particl Blind': 'PART',
@ -929,9 +932,11 @@ const coinNameToSymbol = {
'Firo': 'FIRO', 'Firo': 'FIRO',
'Dash': 'DASH', 'Dash': 'DASH',
'PIVX': 'PIVX' 'PIVX': 'PIVX'
}; };
const exchangeRateCache = {};
function updateUsdValue(cryptoCell, coinFullName) { function updateUsdValue(cryptoCell, coinFullName, isRate = false) {
const coinSymbol = coinNameToSymbol[coinFullName]; const coinSymbol = coinNameToSymbol[coinFullName];
if (!coinSymbol) { if (!coinSymbol) {
console.error(`Coin symbol not found for full name: ${coinFullName}`); console.error(`Coin symbol not found for full name: ${coinFullName}`);
@ -940,30 +945,112 @@ const coinNameToSymbol = {
const cryptoValue = parseFloat(cryptoCell.textContent); const cryptoValue = parseFloat(cryptoCell.textContent);
const usdCell = cryptoCell.nextElementSibling; const usdCell = cryptoCell.nextElementSibling;
if (isRate) {
const rateCell = usdCell.nextElementSibling;
const usdValue = rateCell.previousElementSibling.textContent * cryptoValue;
usdCell.textContent = `${usdValue.toFixed(2)} USD`;
} else {
const apiUrl = `https://min-api.cryptocompare.com/data/price?fsym=${coinSymbol}&tsyms=USD`; const apiUrl = `https://min-api.cryptocompare.com/data/price?fsym=${coinSymbol}&tsyms=USD`;
// Check if the exchange rate is in the cache and is not expired
if (exchangeRateCache[coinSymbol] && !isCacheExpired(coinSymbol)) {
console.log(`Using cached exchange rate for ${coinSymbol}`);
const exchangeRate = exchangeRateCache[coinSymbol].rate;
const usdValue = cryptoValue * exchangeRate;
usdCell.textContent = `${usdValue.toFixed(2)} USD`;
updateProfitLoss(cryptoCell.closest('tr'));
updateProfitValue(cryptoCell.closest('tr'));
} else {
console.log(`Fetching exchange rate from API for ${coinSymbol}`);
fetch(apiUrl) fetch(apiUrl)
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
const exchangeRate = data.USD; const exchangeRate = data.USD;
if (!isNaN(exchangeRate)) { if (!isNaN(exchangeRate)) {
console.log(`Received exchange rate from API for ${coinSymbol}`);
const usdValue = cryptoValue * exchangeRate; const usdValue = cryptoValue * exchangeRate;
usdCell.textContent = `${usdValue.toFixed(2)} USD`; usdCell.textContent = `${usdValue.toFixed(2)} USD`;
exchangeRateCache[coinSymbol] = {
rate: exchangeRate,
timestamp: Date.now(),
ttl: 300000 // 5 minutes
};
updateProfitLoss(cryptoCell.closest('tr'));
updateProfitValue(cryptoCell.closest('tr'));
} else { } else {
console.error('Invalid exchange rate. Response:', data);
usdCell.textContent = 'Invalid exchange rate'; usdCell.textContent = 'Invalid exchange rate';
} }
}) })
.catch(error => { .catch(error => {
console.error('Error retrieving exchange rate:', error);
usdCell.textContent = 'Error retrieving exchange rate'; usdCell.textContent = 'Error retrieving exchange rate';
}); });
} }
}
}
function isCacheExpired(coinSymbol) {
const cacheEntry = exchangeRateCache[coinSymbol];
return cacheEntry && (Date.now() - cacheEntry.timestamp > cacheEntry.ttl);
}
function updateProfitLoss(row) {
const sellingUSD = parseFloat(row.querySelector('.usd-value').textContent);
const buyingUSD = parseFloat(row.querySelectorAll('.usd-value')[1].textContent);
const profitLossCell = row.querySelector('.profit-loss');
if (!isNaN(sellingUSD) && !isNaN(buyingUSD)) {
const profitLossPercentage = ((sellingUSD - buyingUSD) / buyingUSD) * 100;
profitLossCell.textContent = `${profitLossPercentage.toFixed(2)}%`;
if (profitLossPercentage > 0) {
profitLossCell.classList.add('text-green-500'); // Profit (positive)
profitLossCell.classList.remove('text-red-500');
} else if (profitLossPercentage < 0) {
profitLossCell.classList.add('text-red-500'); // Loss (negative)
profitLossCell.classList.remove('text-green-500');
} else {
profitLossCell.classList.add('text-yellow-500'); // No profit or loss (zero)
profitLossCell.classList.remove('text-green-500', 'text-red-500');
}
} else {
profitLossCell.textContent = 'Invalid USD values';
profitLossCell.classList.remove('text-green-500', 'text-red-500');
}
}
function updateProfitValue(row) {
const sellingUSD = parseFloat(row.querySelector('.usd-value').textContent);
const profitValueCell = row.querySelector('.profit-value');
if (!isNaN(sellingUSD)) {
profitValueCell.textContent = `${sellingUSD.toFixed(2)} USD`;
} else {
profitValueCell.textContent = 'Invalid USD value';
}
}
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const coinNameValues = document.querySelectorAll('.coinname-value'); const coinNameValues = document.querySelectorAll('.coinname-value');
for (let i = 0; i < coinNameValues.length; i++) { for (let i = 0; i < coinNameValues.length; i++) {
const coinFullName = coinNameValues[i].getAttribute('data-coinname'); const coinFullName = coinNameValues[i].getAttribute('data-coinname');
const isRate = coinNameValues[i].textContent.includes('rate');
updateUsdValue(coinNameValues[i], coinFullName, isRate);
if (!isRate) {
coinNameValues[i].addEventListener('input', () => {
// Clear the cache when the user inputs a new value
console.log(`Clearing cache for ${coinNameToSymbol[coinFullName]}`);
exchangeRateCache[coinNameToSymbol[coinFullName]] = undefined;
updateUsdValue(coinNameValues[i], coinFullName); updateUsdValue(coinNameValues[i], coinFullName);
coinNameValues[i].addEventListener('input', () => updateUsdValue(coinNameValues[i], coinFullName)); });
}
} }
}); });
</script> </script>

114
basicswap/templates/style.html
Unescape View File

@ -2,11 +2,117 @@
<path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path> <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
</svg>' %} </svg>' %}
{% set select_box_class = 'hover:border-blue-500 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-white text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0' %}
{% set circular_arrows_svg = '<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"> {% set circular_arrows_svg = '<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
<g fill="#ffffff" class="nc-icon-wrapper"> <g fill="#ffffff" class="nc-icon-wrapper">
<path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path> <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
<path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path> <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
</g> </g>
</svg>' %} </svg>' %}
{% set circular_error_svg = '<svg class="relative top-0.5" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.4733 5.52667C10.4114 5.46419 10.3376 5.41459 10.2564 5.38075C10.1751 5.3469 10.088 5.32947 9.99999 5.32947C9.91198 5.32947 9.82485 5.3469 9.74361 5.38075C9.66237 5.41459 9.58863 5.46419 9.52666 5.52667L7.99999 7.06001L6.47333 5.52667C6.34779 5.40114 6.17753 5.33061 5.99999 5.33061C5.82246 5.33061 5.65219 5.40114 5.52666 5.52667C5.40112 5.65221 5.3306 5.82247 5.3306 6.00001C5.3306 6.17754 5.40112 6.3478 5.52666 6.47334L7.05999 8.00001L5.52666 9.52667C5.46417 9.58865 5.41458 9.66238 5.38073 9.74362C5.34689 9.82486 5.32946 9.912 5.32946 10C5.32946 10.088 5.34689 10.1752 5.38073 10.2564C5.41458 10.3376 5.46417 10.4114 5.52666 10.4733C5.58863 10.5358 5.66237 10.5854 5.74361 10.6193C5.82485 10.6531 5.91198 10.6705 5.99999 10.6705C6.088 10.6705 6.17514 10.6531 6.25638 10.6193C6.33762 10.5854 6.41135 10.5358 6.47333 10.4733L7.99999 8.94001L9.52666 10.4733C9.58863 10.5358 9.66237 10.5854 9.74361 10.6193C9.82485 10.6531 9.91198 10.6705 9.99999 10.6705C10.088 10.6705 10.1751 10.6531 10.2564 10.6193C10.3376 10.5854 10.4114 10.5358 10.4733 10.4733C10.5358 10.4114 10.5854 10.3376 10.6193 10.2564C10.6531 10.1752 10.6705 10.088 10.6705 10C10.6705 9.912 10.6531 9.82486 10.6193 9.74362C10.5854 9.66238 10.5358 9.58865 10.4733 9.52667L8.93999 8.00001L10.4733 6.47334C10.5358 6.41137 10.5854 6.33763 10.6193 6.25639C10.6531 6.17515 10.6705 6.08802 10.6705 6.00001C10.6705 5.912 10.6531 5.82486 10.6193 5.74362C10.5854 5.66238 10.5358 5.58865 10.4733 5.52667ZM12.7133 3.28667C12.0983 2.64994 11.3627 2.14206 10.5494 1.79266C9.736 1.44327 8.8612 1.25936 7.976 1.25167C7.0908 1.24398 6.21294 1.41266 5.39363 1.74786C4.57432 2.08307 3.82998 2.57809 3.20403 3.20404C2.57807 3.82999 2.08305 4.57434 1.74785 5.39365C1.41264 6.21296 1.24396 7.09082 1.25166 7.97602C1.25935 8.86121 1.44326 9.73601 1.79265 10.5494C2.14204 11.3627 2.64992 12.0984 3.28666 12.7133C3.90164 13.3501 4.63727 13.858 5.45063 14.2074C6.26399 14.5567 7.13879 14.7407 8.02398 14.7483C8.90918 14.756 9.78704 14.5874 10.6064 14.2522C11.4257 13.9169 12.17 13.4219 12.796 12.796C13.4219 12.17 13.9169 11.4257 14.2521 10.6064C14.5873 9.78706 14.756 8.90919 14.7483 8.024C14.7406 7.1388 14.5567 6.264 14.2073 5.45064C13.8579 4.63728 13.3501 3.90165 12.7133 3.28667ZM11.7733 11.7733C10.9014 12.6463 9.75368 13.1899 8.52585 13.3115C7.29802 13.4332 6.066 13.1254 5.03967 12.4405C4.01335 11.7557 3.25623 10.7361 2.89731 9.55566C2.53838 8.37518 2.59986 7.10677 3.07127 5.96653C3.54267 4.82629 4.39484 3.88477 5.48259 3.30238C6.57033 2.71999 7.82635 2.53276 9.03666 2.77259C10.247 3.01242 11.3367 3.66447 12.1202 4.61765C12.9036 5.57083 13.3324 6.76617 13.3333 8.00001C13.3357 8.70087 13.1991 9.39524 12.9313 10.0429C12.6635 10.6906 12.2699 11.2788 11.7733 11.7733Z" fill="#EF5944"></path>
</svg>' %}
{% set circular_info_svg = '<svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-700 dark:text-blue-800" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
</svg>' %}
{% set cross_close_svg = '<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>' %}
{% set breadcrumb_line_svg = '<svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path></svg>' %}
{% set withdraw_svg = '<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g fill="#ffffff" class="nc-icon-wrapper"><polygon data-color="color-2" points="6,10 12,17 18,10 13,10 13,1 11,1 11,10 "></polygon><path fill="#ffffff" d="M22,21H2v-6H0v7c0,0.552,0.448,1,1,1h22c0.552,0,1-0.448,1-1v-7h-2V21z"></path></g></svg>' %}
{% set utxo_groups_svg = '<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" class="nc-icon-wrapper">
<rect x="2" y="9" width="12" height="14"></rect>
<polyline points=" 6,5 18,5 18,19 " stroke="#ffffff"></polyline>
<polyline points=" 10,1 22,1 22,15 " stroke="#ffffff"></polyline>
</g>
</svg>' %}
{% set create_utxo_svg = '<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" class="nc-icon-wrapper">
<polyline points="1 15 1 21 23 21 23 15"></polyline>
<line x1="12" y1="3" x2="12" y2="13" stroke="#ffffff"></line>
<line x1="17" y1="8" x2="7" y2="8" stroke="#ffffff"></line>
</g>
</svg>' %}
{% set lock_svg = '<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
<g fill="#ffffff"><path d="M19,10H5a3,3,0,0,0-3,3v8a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V13A3,3,0,0,0,19,10Zm-7,9a2,2,0,1,1,2-2A2,2,0,0,1,12,19Z" fill="#ffffff"></path><path data-color="color-2" d="M18,8H16V6a3.958,3.958,0,0,0-3.911-4h-.042A3.978,3.978,0,0,0,8,5.911V8H6V5.9A5.961,5.961,0,0,1,11.949,0h.061A5.979,5.979,0,0,1,18,6.01Z"></path></g>
</svg>
' %}
{% set eye_show_svg = '<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>
<path d="M12,3C6.292,3,2.1,8.062,.555,10.24a3.058,3.058,0,0,0,0,3.52h0a21.272,21.272,0,0,0,4.784,4.9l3.124-3.124a5,5,0,0,1,7.071-7.072L8.464,15.536l10.2-10.2A11.484,11.484,0,0,0,12,3Z"></path>
<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>
' %}
{% set place_new_offer_svg = '<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24">
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#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>
' %}
{% set page_back_svg = '<svg aria-hidden="true" class="mr-2 w-5 h-5" fill="#fff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
</svg>
' %}
{% set page_forwards_svg = '<svg aria-hidden="true" class="ml-2 w-5 h-5" fill="#fff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
' %}
{% set filter_clear_svg = '<svg class="mr-2 w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
<line x1="20" y1="2" x2="12.329" y2="11.506"></line>
<path d="M11,11a2,2,0,0,1,2,2,3.659,3.659,0,0,1-.2.891A9.958,9.958,0,0,0,13.258,23H1C1,16.373,4.373,11,11,11Z"></path>
<line x1="18" y1="15" x2="23" y2="15" stroke="#ffffff"></line>
<line x1="17" y1="19" x2="23" y2="19" stroke="#ffffff"></line>
<line x1="19" y1="23" x2="23" y2="23" stroke="#ffffff"></line>
<path d="M8.059,11.415A3.9,3.9,0,0,0,12,16c.041,0,.079-.011.12-.012" data-cap="butt"></path>
<path d="M5,23a13.279,13.279,0,0,1,.208-3.4" data-cap="butt"></path>
<path d="M9.042,23c-.688-1.083-.313-3.4-.313-3.4" data-cap="butt"></path>
</g>
</svg>
' %}
{% set filter_apply_svg = ' <svg class="mr-2 w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
<rect x="2" y="2" width="7" height="7"></rect>
<rect x="15" y="15" width="7" height="7"></rect>
<rect x="2" y="15" width="7" height="7"></rect>
<polyline points="15 6 17 8 22 3" stroke="#ffffff"></polyline>
</g>
</svg>
' %}
{% set input_arrow_down_svg = '<svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
</svg>
' %}
{% set arrow_right_svg = ' <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="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z " clip-rule="evenodd"></path>
</svg>
' %}
{% set select_box_class = 'hover:border-blue-500 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-white text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0' %}

224
basicswap/templates/wallet.html
Unescape View File

@ -1,106 +1,86 @@
{% include 'header.html' %} {% include 'header.html' %}
{% from 'style.html' import select_box_arrow_svg, select_box_class, circular_arrows_svg %} {% from 'style.html' import select_box_arrow_svg, select_box_class, circular_arrows_svg, circular_error_svg, circular_info_svg, cross_close_svg, breadcrumb_line_svg, withdraw_svg, utxo_groups_svg, create_utxo_svg %}
<div class="container mx-auto"> <div class="container mx-auto">
<section class="p-5 mt-5">
<section class="p-5 mt-5">
<div class="flex flex-wrap items-center -m-2"> <div class="flex flex-wrap items-center -m-2">
<div class="w-full md:w-1/2 p-2"> <div class="w-full md:w-1/2 p-2">
<ul class="flex flex-wrap items-center gap-x-3 mb-2"> <ul class="flex flex-wrap items-center gap-x-3 mb-2">
<li> <li><a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">Home</a></li>
<a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/"> <li>{{ breadcrumb_line_svg | safe }}</li>
<p>Home</p> <li><a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/wallets">Wallets</a></li>
</a> <li>{{ breadcrumb_line_svg | safe }}</li>
</li> <li><a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/wallet/{{ w.ticker }}">{{ w.ticker }}</a></li>
<li>
<svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
</svg>
</li>
<li>
<a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/wallets">Wallets</a>
</li>
<li>
<svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
</svg>
</li>
<li>
<a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/wallet/{{ w.ticker }}">{{ w.ticker }}</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
</section> </section>
<section class="py-4">
<section class="py-4">
<div class="container px-4 mx-auto"> <div class="container px-4 mx-auto">
<div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden"> <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
<img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 left-4 top-4 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="dots-red">
<img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="wave">
<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="relative z-20 flex flex-wrap items-center -m-3">
<div class="w-full md:w-1/2 p-3"> <div class="w-full md:w-1/2 p-3">
<h2 class="text-4xl font-bold text-white tracking-tighter"> <h2 class="text-4xl font-bold text-white tracking-tighter">
<span class="inline-block align-middle"> <span class="inline-block align-middle"><img class="mr-2 h-16" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }}"></span>{{ w.name }} Wallet - <span id="total-usd-value"></span>
<img class="mr-2 h-16" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }}">
</span>{{ w.name }} Wallet - <span id="total-usd-value"></span>
</h2> </h2>
<p class="font-normal text-coolGray-200 dark:text-white pl-2 pt-5">Manage your {{ w.ticker }} wallet. {% if refresh %} (Page Refresh: {{ refresh }} seconds) {% endif %}</p> <p class="font-normal text-coolGray-200 dark:text-white pl-2 pt-5">Manage your {{ w.ticker }} wallet. {% if refresh %} (Page Refresh: {{ refresh }} seconds) {% endif %}</p>
</div> </div>
<div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto"> <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
<a class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto"> <a class="rounded-full mr-5 flex flex-wrap justify-center px-5 py-3 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border dark:bg-gray-500 dark:hover:bg-gray-700 border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="refresh" href="/wallet/{{ w.ticker }}">
<a class="mr-5 flex flex-wrap justify-center px-5 py-3 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border dark:bg-gray-500 dark:hover:bg-gray-700 border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="refresh" href="/wallet/{{ w.ticker }}"> {{ circular_arrows_svg | safe }}<span>Refresh</span>
{{ circular_arrows_svg }}
<span>Refresh</span>
</a> </a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
{% include 'inc_messages.html' %}
{% if w.updating %} {% include 'inc_messages.html' %}
<section class="py-4" id="updating" role="alert">
{% if w.updating %}
<section class="py-4" id="updating" role="alert">
<div class="container px-4 mx-auto"> <div class="container px-4 mx-auto">
<div class="p-6 bg-blue-100 border border-blue-200 rounded-md"> <div class="p-6 bg-blue-100 border border-blue-200 rounded-md">
<div class="flex flex-wrap justify-between items-center -m-2"> <div class="flex flex-wrap justify-between items-center -m-2">
<div class="flex-1 p-2"> <div class="flex-1 p-2">
<div class="flex flex-wrap -m-1"> <div class="flex flex-wrap -m-1">
<div class="w-auto p-1"> <div class="w-auto p-1">
<svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-700 dark:text-blue-800" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <div class="w-auto p-1">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path> {{ circular_info_svg | safe }}
</svg> </div>
</svg>
</div> </div>
<div class="flex-1 p-1"> <div class="flex-1 p-1">
<h3 class="font-medium text-sm text-blue-900">Updating...</h3> <h3 class="font-medium text-sm text-blue-900">Updating, please wait...</h3>
</div> </div>
</div> </div>
</div> </div>
<div class="w-auto p-2"> <div class="w-auto p-2">
<button type="button" class="ml-auto bg-blue-100 text-blue-500 rounded-lg focus:ring-0 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex h-8 w-8 focus:outline-none" data-dismiss-target="#updating" aria-label="Close"> <button type="button" class="ml-auto bg-blue-100 text-blue-500 rounded-lg focus:ring-0 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex h-8 w-8 focus:outline-none" data-dismiss-target="#updating" aria-label="Close">
<span class="sr-only">Close</span> <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"> {{ cross_close_svg | safe }}
<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> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
{% endif %} {% endif %}
{% if w.havedata %}
{% if w.error %} {% if w.havedata %}
<section class="py-4">
{% if w.error %}
<section class="py-4" id="error" role="alert">
<div class="container px-4 mx-auto"> <div class="container px-4 mx-auto">
<div class="p-6 bg-red-100 border border-red-200 rounded-md"> <div class="p-6 bg-red-100 border border-red-200 rounded-md">
<div class="flex flex-wrap justify-between items-center -m-2"> <div class="flex flex-wrap justify-between items-center -m-2">
<div class="flex-1 p-2"> <div class="flex-1 p-2">
<div class="flex flex-wrap -m-1"> <div class="flex flex-wrap -m-1">
<div class="w-auto p-1"> <div class="w-auto p-1">
<svg class="relative top-0.5" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> {{ circular_error_svg | safe }}
<path d="M10.4733 5.52667C10.4114 5.46419 10.3376 5.41459 10.2564 5.38075C10.1751 5.3469 10.088 5.32947 9.99999 5.32947C9.91198 5.32947 9.82485 5.3469 9.74361 5.38075C9.66237 5.41459 9.58863 5.46419 9.52666 5.52667L7.99999 7.06001L6.47333 5.52667C6.34779 5.40114 6.17753 5.33061 5.99999 5.33061C5.82246 5.33061 5.65219 5.40114 5.52666 5.52667C5.40112 5.65221 5.3306 5.82247 5.3306 6.00001C5.3306 6.17754 5.40112 6.3478 5.52666 6.47334L7.05999 8.00001L5.52666 9.52667C5.46417 9.58865 5.41458 9.66238 5.38073 9.74362C5.34689 9.82486 5.32946 9.912 5.32946 10C5.32946 10.088 5.34689 10.1752 5.38073 10.2564C5.41458 10.3376 5.46417 10.4114 5.52666 10.4733C5.58863 10.5358 5.66237 10.5854 5.74361 10.6193C5.82485 10.6531 5.91198 10.6705 5.99999 10.6705C6.088 10.6705 6.17514 10.6531 6.25638 10.6193C6.33762 10.5854 6.41135 10.5358 6.47333 10.4733L7.99999 8.94001L9.52666 10.4733C9.58863 10.5358 9.66237 10.5854 9.74361 10.6193C9.82485 10.6531 9.91198 10.6705 9.99999 10.6705C10.088 10.6705 10.1751 10.6531 10.2564 10.6193C10.3376 10.5854 10.4114 10.5358 10.4733 10.4733C10.5358 10.4114 10.5854 10.3376 10.6193 10.2564C10.6531 10.1752 10.6705 10.088 10.6705 10C10.6705 9.912 10.6531 9.82486 10.6193 9.74362C10.5854 9.66238 10.5358 9.58865 10.4733 9.52667L8.93999 8.00001L10.4733 6.47334C10.5358 6.41137 10.5854 6.33763 10.6193 6.25639C10.6531 6.17515 10.6705 6.08802 10.6705 6.00001C10.6705 5.912 10.6531 5.82486 10.6193 5.74362C10.5854 5.66238 10.5358 5.58865 10.4733 5.52667ZM12.7133 3.28667C12.0983 2.64994 11.3627 2.14206 10.5494 1.79266C9.736 1.44327 8.8612 1.25936 7.976 1.25167C7.0908 1.24398 6.21294 1.41266 5.39363 1.74786C4.57432 2.08307 3.82998 2.57809 3.20403 3.20404C2.57807 3.82999 2.08305 4.57434 1.74785 5.39365C1.41264 6.21296 1.24396 7.09082 1.25166 7.97602C1.25935 8.86121 1.44326 9.73601 1.79265 10.5494C2.14204 11.3627 2.64992 12.0984 3.28666 12.7133C3.90164 13.3501 4.63727 13.858 5.45063 14.2074C6.26399 14.5567 7.13879 14.7407 8.02398 14.7483C8.90918 14.756 9.78704 14.5874 10.6064 14.2522C11.4257 13.9169 12.17 13.4219 12.796 12.796C13.4219 12.17 13.9169 11.4257 14.2521 10.6064C14.5873 9.78706 14.756 8.90919 14.7483 8.024C14.7406 7.1388 14.5567 6.264 14.2073 5.45064C13.8579 4.63728 13.3501 3.90165 12.7133 3.28667ZM11.7733 11.7733C10.9014 12.6463 9.75368 13.1899 8.52585 13.3115C7.29802 13.4332 6.066 13.1254 5.03967 12.4405C4.01335 11.7557 3.25623 10.7361 2.89731 9.55566C2.53838 8.37518 2.59986 7.10677 3.07127 5.96653C3.54267 4.82629 4.39484 3.88477 5.48259 3.30238C6.57033 2.71999 7.82635 2.53276 9.03666 2.77259C10.247 3.01242 11.3367 3.66447 12.1202 4.61765C12.9036 5.57083 13.3324 6.76617 13.3333 8.00001C13.3357 8.70087 13.1991 9.39524 12.9313 10.0429C12.6635 10.6906 12.2699 11.2788 11.7733 11.7733Z" fill="#EF5944"></path>
</svg>
</div> </div>
<div class="flex-1 p-1"> <div class="flex-1 p-1">
<h3 class="font-medium text-sm text-red-900 error_msg"> <h3 class="font-medium text-sm text-red-900 error_msg">
@ -110,19 +90,20 @@
</div> </div>
</div> </div>
<div class="w-auto p-2"> <div class="w-auto p-2">
<a href="#"> <button type="button" class="ml-auto bg-red-100 text-red-500 rounded-lg focus:ring-0 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex h-8 w-8 focus:outline-none" data-dismiss-target="#error" aria-label="Close">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <span class="sr-only">Close</span>
<path d="M8.94004 8L13.14 3.80667C13.2656 3.68113 13.3361 3.51087 13.3361 3.33333C13.3361 3.1558 13.2656 2.98554 13.14 2.86C13.0145 2.73447 12.8442 2.66394 12.6667 2.66394C12.4892 2.66394 12.3189 2.73447 12.1934 2.86L8.00004 7.06L3.80671 2.86C3.68117 2.73447 3.51091 2.66394 3.33337 2.66394C3.15584 2.66394 2.98558 2.73447 2.86004 2.86C2.7345 2.98554 2.66398 3.1558 2.66398 3.33333C2.66398 3.51087 2.7345 3.68113 2.86004 3.80667L7.06004 8L2.86004 12.1933C2.79756 12.2553 2.74796 12.329 2.71411 12.4103C2.68027 12.4915 2.66284 12.5787 2.66284 12.6667C2.66284 12.7547 2.68027 12.8418 2.71411 12.9231C2.74796 13.0043 2.79756 13.078 2.86004 13.14C2.92202 13.2025 2.99575 13.2521 3.07699 13.2859C3.15823 13.3198 3.24537 13.3372 3.33337 13.3372C3.42138 13.3372 3.50852 13.3198 3.58976 13.2859C3.671 13.2521 3.74473 13.2025 3.80671 13.14L8.00004 8.94L12.1934 13.14C12.2554 13.2025 12.3291 13.2521 12.4103 13.2859C12.4916 13.3198 12.5787 13.3372 12.6667 13.3372C12.7547 13.3372 12.8419 13.3198 12.9231 13.2859C13.0043 13.2521 13.0781 13.2025 13.14 13.14C13.2025 13.078 13.2521 13.0043 13.286 12.9231C13.3198 12.8418 13.3372 12.7547 13.3372 12.6667C13.3372 12.5787 13.3198 12.4915 13.286 12.4103C13.2521 12.329 13.2025 12.2553 13.14 12.1933L8.94004 8Z" fill="#752C21"></path> {{ cross_close_svg | safe }}
</svg> </button>
</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
{% else %}
<form method="post" autocomplete="off"> {% else %}
<section>
<form method="post" autocomplete="off">
<section>
<div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden"> <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden">
<div class="pb-6 border-coolGray-100"> <div class="pb-6 border-coolGray-100">
<div class="flex flex-wrap items-center justify-between -m-2"> <div class="flex flex-wrap items-center justify-between -m-2">
@ -215,11 +196,15 @@
</table> </table>
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</section> </section>
<section class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
<section>
<div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
<div class="pb-6 border-coolGray-100"> <div class="pb-6 border-coolGray-100">
<div class="flex flex-wrap items-center justify-between -m-2"> <div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-full pt-2"> <div class="w-full pt-2">
@ -228,8 +213,7 @@
<div class="px-6"> <div class="px-6">
<div class="flex flex-wrap justify-end"> <div class="flex flex-wrap justify-end">
<div class="w-full md:w-auto p-1.5"> <div class="w-full md:w-auto p-1.5">
<input class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-white hover:text-red border border-red-500 hover:border-red-500 hover:bg-red-600 bg-red-500 rounded-md shadow-button focus:ring-0 focus:outline-none" type="submit" name="reseed_{{ w.cid }}" value="Reseed wallet" onclick="return confirmReseed();"> <input class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-white hover:text-red border border-red-500 hover:border-red-500 hover:bg-red-600 bg-red-500 rounded-md shadow-button focus:ring-0 focus:outline-none cursor-pointer" type="submit" name="reseed_{{ w.cid }}" value="Reseed wallet" onclick="return confirmReseed();">
</div>
</div> </div>
</div> </div>
</div> </div>
@ -240,46 +224,48 @@
</div> </div>
</section> </section>
{% else %}
{% if w.cid == '1' %} {# PART #}
{% else %} <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
</tr>
{% if w.cid == '1' %} {# PART #}
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
<td class="py-3 px-6 bold">Stealth Address</td> <td class="py-3 px-6 bold">Stealth Address</td>
<td colspan=2 class="py-3 px-6 monospace bold select-all">{{ w.stealth_address }}</td> <td colspan=2 class="py-3 px-6 monospace bold select-all">{{ w.stealth_address }}</td>
</tr> </tr>
{% endif %} {# / PART #} {% endif %} {# / PART #}
{% if w.cid == '3' %} {# LTC #}
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600"> {% if w.cid == '3' %} {# LTC #}
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
<td class="py-3 px-6 bold"> <td class="py-3 px-6 bold">
<button type="submit" class="flex flex-wrap justify-center py-2 px-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" name="newmwebaddr_{{ w.cid }}" value="New MWEB Address"> <button type="submit" class="flex flex-wrap justify-center py-2 px-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" name="newmwebaddr_{{ w.cid }}" value="New MWEB Address">
{{ circular_arrows_svg }} New MWEB Address</button> {{ circular_arrows_svg }} New MWEB Address</button>
</td> </td>
<td colspan=2 class="py-3 px-6 monospace bold select-all">{{ w.mweb_address }}</td> <td colspan=2 class="py-3 px-6 monospace bold select-all">{{ w.mweb_address }}</td>
</tr> </tr>
{% endif %} {# / LTC #} {% endif %} {# / LTC #}
{% if w.cid == '6' %} {# XMR #}
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600"> {% if w.cid == '6' %} {# XMR #}
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
<td class="py-3 px-6 bold">Main Address</td> <td class="py-3 px-6 bold">Main Address</td>
<td colspan=2 class="py-3 px-6 monospace bold select-all">{{ w.main_address }}</td> <td colspan=2 class="py-3 px-6 monospace bold select-all">{{ w.main_address }}</td>
</tr> </tr>
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600"> <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
<td class="py-3 px-6 bold"> <td class="py-3 px-6 bold">
<button type="submit" class="flex flex-wrap justify-center py-2 px-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" name="newaddr_{{ w.cid }}" value="New Subaddress"> <button type="submit" class="flex flex-wrap justify-center py-2 px-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" name="newaddr_{{ w.cid }}" value="New Subaddress">
{{ circular_arrows_svg }} New {{ w.ticker }} Sub Address </button> {{ circular_arrows_svg }} New {{ w.ticker }} Sub Address </button>
</td> </td>
<td colspan=2 class="py-3 px-6 monospace select-all">{{ w.deposit_address }}</td> <td colspan=2 class="py-3 px-6 monospace select-all">{{ w.deposit_address }}</td>
</tr> </tr>
{% else %}
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600"> {% else %}
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
<td class="py-3 px-6 bold"> <td class="py-3 px-6 bold">
<button type="submit" class="flex flex-wrap justify-center py-2 px-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" name="newaddr_{{ w.cid }}" value="New Deposit Address"> <button type="submit" class="flex flex-wrap justify-center py-2 px-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" name="newaddr_{{ w.cid }}" value="New Deposit Address">
{{ circular_arrows_svg }} New {{ w.ticker }} Deposit Address</button> {{ circular_arrows_svg }} New {{ w.ticker }} Deposit Address</button>
</td> </td>
<td colspan=2 class="py-3 px-6 monospace bold select-all" id="deposit_address">{{ w.deposit_address }}</td> <td colspan=2 class="py-3 px-6 monospace bold select-all" id="deposit_address">{{ w.deposit_address }}</td>
</tr> </tr>
{% endif %} {% endif %}
</table> </table>
</div> </div>
</div> </div>
@ -290,13 +276,13 @@
</div> </div>
</div> </div>
</section> </section>
<section class="p-6"> <section class="p-6">
<div class="flex flex-wrap items-center"> <div class="flex items-center">
<div class="w-full"> <h4 class="font-semibold text-2xl text-black dark:text-white">Withdraw</h4>
<h4 class="font-semibold text-black dark:text-white text-2xl">Withdraw</h4>
</div>
</div> </div>
</section> </section>
<section> <section>
<div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden"> <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
<div class="pb-6 border-coolGray-100"> <div class="pb-6 border-coolGray-100">
@ -328,13 +314,7 @@
</thead> </thead>
<tr class="opacity-100 text-gray-500 dark:text-gray-100"> <tr class="opacity-100 text-gray-500 dark:text-gray-100">
<td class="py-4 pl-6 bold w-1/4"> <td class="py-4 pl-6 bold w-1/4">
<button type="submit" class="flex flex-wrap justify-center py-2 px-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" name="withdraw_{{ w.cid }}" value="Withdraw" onclick="return confirmWithdrawal();"> <button type="submit" class="flex flex-wrap justify-center py-2 px-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" name="withdraw_{{ w.cid }}" value="Withdraw" onclick="return confirmWithdrawal();">{{ withdraw_svg | safe }} Withdraw {{ w.ticker }}</button>
<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
<g fill="#ffffff" class="nc-icon-wrapper">
<polygon data-color="color-2" points="6,10 12,17 18,10 13,10 13,1 11,1 11,10 "></polygon>
<path fill="#ffffff" d="M22,21H2v-6H0v7c0,0.552,0.448,1,1,1h22c0.552,0,1-0.448,1-1v-7h-2V21z"></path>
</g>
</svg>Withdraw {{ w.ticker }}</button>
</td> </td>
<td class="py-3 px-6"> <td class="py-3 px-6">
<input placeholder="{{ w.ticker }} Address" class="hover:border-blue-500 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" type="text" name="to_{{ w.cid }}" value="{{ w.wd_address }}"> <input placeholder="{{ w.ticker }} Address" class="hover:border-blue-500 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" type="text" name="to_{{ w.cid }}" value="{{ w.wd_address }}">
@ -356,7 +336,7 @@
<td class="py-3 px-6"> <td class="py-3 px-6">
<div class="w-full md:flex-1"> <div class="w-full md:flex-1">
<div class="relative"> <div class="relative">
{{ select_box_arrow_svg }} {{ select_box_arrow_svg | safe }}
<select class="{{ select_box_class }}" name="withdraw_type_from_{{ w.cid }}"> <select class="{{ select_box_class }}" name="withdraw_type_from_{{ w.cid }}">
<option value="plain" {% if w.wd_type_from=='plain' %} selected{% endif %}>Plain</option> <option value="plain" {% if w.wd_type_from=='plain' %} selected{% endif %}>Plain</option>
<option value="blind" {% if w.wd_type_from=='blind' %} selected{% endif %}>Blind</option> <option value="blind" {% if w.wd_type_from=='blind' %} selected{% endif %}>Blind</option>
@ -412,15 +392,16 @@
</div> </div>
</div> </div>
</section> </section>
{% if w.cid != '6' %} {# !XMR #} {% if w.cid != '6' %} {# !XMR #}
{% if w.show_utxo_groups %} {% if w.show_utxo_groups %}
<section class="p-6"> <section class="p-6">
<div class="flex flex-wrap items-center"> <div class="flex items-center">
<div class="w-full"> <h4 class="font-semibold text-2xl text-black dark:text-white">UTXO Groups</h4>
<h4 class="font-semibold text-black dark:text-white text-2xl">UTXO Groups</h4>
</div>
</div> </div>
</section> </section>
<section> <section>
<div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden"> <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
<div class="pb-6 border-coolGray-100"> <div class="pb-6 border-coolGray-100">
@ -454,13 +435,8 @@
<tr class="opacity-100 text-gray-500 dark:text-gray-100"> <tr class="opacity-100 text-gray-500 dark:text-gray-100">
<td class="py-3 px-6"> <td class="py-3 px-6">
<button type="submit" class="flex flex-wrap justify-center px-4 py-2 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="create_utxo" name="create_utxo" value="Create UTXO" onclick="return confirmUTXOResize();"> <button type="submit" class="flex flex-wrap justify-center px-4 py-2 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="create_utxo" name="create_utxo" value="Create UTXO" onclick="return confirmUTXOResize();">
<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"> {{ create_utxo_svg | safe }}Create UTXO
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" class="nc-icon-wrapper"> </button>
<polyline points="1 15 1 21 23 21 23 15"></polyline>
<line x1="12" y1="3" x2="12" y2="13" stroke="#ffffff"></line>
<line x1="17" y1="8" x2="7" y2="8" stroke="#ffffff"></line>
</g>
</svg>Create UTXO</button>
</td> </td>
<td class="py-3 px-6"> <td class="py-3 px-6">
<input placeholder="Amount" class="hover:border-blue-500 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" type="text" name="utxo_value" value="{{ w.utxo_value }}"> <input placeholder="Amount" class="hover:border-blue-500 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" type="text" name="utxo_value" value="{{ w.utxo_value }}">
@ -476,6 +452,7 @@
</div> </div>
</div> </div>
</section> </section>
<section> <section>
<div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden"> <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
<div class="pb-6 border-coolGray-100"> <div class="pb-6 border-coolGray-100">
@ -487,13 +464,7 @@
<div class="flex flex-wrap justify-end"> <div class="flex flex-wrap justify-end">
<div class="w-full md:w-auto p-1.5"> <div class="w-full md:w-auto p-1.5">
<button type="submit" class="flex flex-wrap justify-center px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="closeutxogroups" name="closeutxogroups" value="Close UTXO Groups"> <button type="submit" class="flex flex-wrap justify-center px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="closeutxogroups" name="closeutxogroups" value="Close UTXO Groups">
<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"> {{ utxo_groups_svg | safe }} Close UTXO Groups</button>
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" class="nc-icon-wrapper">
<rect x="2" y="9" width="12" height="14"></rect>
<polyline points=" 6,5 18,5 18,19 " stroke="#ffffff"></polyline>
<polyline points=" 10,1 22,1 22,15 " stroke="#ffffff"></polyline>
</g>
</svg>Close UTXO Groups</button>
</div> </div>
</div> </div>
</div> </div>
@ -504,7 +475,9 @@
</div> </div>
</div> </div>
</section> </section>
{% else %} {% else %}
<section> <section>
<div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden"> <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
<div class="pb-6 border-coolGray-100"> <div class="pb-6 border-coolGray-100">
@ -516,13 +489,7 @@
<div class="flex flex-wrap justify-end"> <div class="flex flex-wrap justify-end">
<div class="w-full md:w-auto p-1.5"> <div class="w-full md:w-auto p-1.5">
<button type="submit" class="flex flex-wrap justify-center px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="showutxogroups" name="showutxogroups" value="Show UTXO Groups"> <button type="submit" class="flex flex-wrap justify-center px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="showutxogroups" name="showutxogroups" value="Show UTXO Groups">
<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"> {{ utxo_groups_svg | safe }} Show UTXO Groups</button>
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" class="nc-icon-wrapper">
<rect x="2" y="9" width="12" height="14"></rect>
<polyline points=" 6,5 18,5 18,19 " stroke="#ffffff"></polyline>
<polyline points=" 10,1 22,1 22,15 " stroke="#ffffff"></polyline>
</g>
</svg>Show UTXO Groups</button>
</div> </div>
</div> </div>
</div> </div>
@ -533,12 +500,12 @@
</div> </div>
</div> </div>
</section> </section>
{% endif %} {% endif %}
{% endif %} {% endif %}
{% endif %} {% endif %}
{% endif %} {% endif %}
{% endif %} {% endif %}
<!-- havedata -->
<input type="hidden" name="formid" value="{{ form_id }}"> <input type="hidden" name="formid" value="{{ form_id }}">
</form> </form>
</div> </div>
@ -546,6 +513,7 @@
</div> </div>
</div> </div>
</div> </div>
<script> <script>
const coinNameToSymbol = { const coinNameToSymbol = {
'Bitcoin': 'BTC', 'Bitcoin': 'BTC',
@ -650,9 +618,10 @@ document.addEventListener('DOMContentLoaded', () => {
calculateTotalUsdValue(); calculateTotalUsdValue();
}); });
</script> </script>
{% include 'footer.html' %} {% include 'footer.html' %}
<script> <script>
function confirmReseed() { function confirmReseed() {
return confirm("Are you sure?\nBackup your wallet before and after.\nWon't detect used keys.\nShould only be used for new wallets."); return confirm("Are you sure?\nBackup your wallet before and after.\nWon't detect used keys.\nShould only be used for new wallets.");
@ -666,5 +635,6 @@ document.addEventListener('DOMContentLoaded', () => {
return confirm("Are you sure?"); return confirm("Are you sure?");
} }
</script> </script>
</body> </body>
</html> </html>

111
basicswap/templates/wallets.html
Unescape View File

@ -1,49 +1,32 @@
{% include 'header.html' %} {% include 'header.html' %}
{% from 'style.html' import breadcrumb_line_svg, circular_arrows_svg, withdraw_svg, utxo_groups_svg, create_utxo_svg, lock_svg, eye_show_svg %}
<div class="container mx-auto"> <div class="container mx-auto">
<section class="p-5 mt-5"> <section class="p-5 mt-5">
<div class="flex flex-wrap items-center -m-2"> <div class="flex flex-wrap items-center -m-2">
<div class="w-full md:w-1/2 p-2"> <div class="w-full md:w-1/2 p-2">
<ul class="flex flex-wrap items-center gap-x-3 mb-2"> <ul class="flex flex-wrap items-center gap-x-3 mb-2">
<li> <li><a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/"><p>Home</p></a></li>
<a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/"> <li>{{ breadcrumb_line_svg | safe }}</li>
<p>Home</p> <li><a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/wallets">Wallets</a></li>
</a> <li>{{ breadcrumb_line_svg | safe }}</li>
</li>
<li>
<svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
</svg>
</li>
<li>
<a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/wallets">Wallets</a>
</li>
<li>
<svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
</svg>
</li>
</ul> </ul>
</div> </div>
</div> </div>
</section> </section>
<section class="py-3">
<section class="py-3">
<div class="container px-4 mx-auto"> <div class="container px-4 mx-auto">
<div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden"> <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
<img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="dots-red">
<img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="dots-red">
<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=""> <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="wave">
<div class="relative z-20 flex flex-wrap items-center -m-3"> <div class="relative z-20 flex flex-wrap items-center -m-3">
<div class="w-full md:w-1/2 p-3 h-48"> <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> <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Wallets</h2>
<div class="flex items-center"> <div class="flex items-center">
<h2 class="text-lg font-bold text-white tracking-tighter mr-2">Total Assets:</h2> <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"> <button id="hide-usd-amount-toggle" class="flex items-center justify-center p-1 focus:ring-0 focus:outline-none">{{ eye_show_svg | safe }}</button>
<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>
<path d="M12,3C6.292,3,2.1,8.062,.555,10.24a3.058,3.058,0,0,0,0,3.52h0a21.272,21.272,0,0,0,4.784,4.9l3.124-3.124a5,5,0,0,1,7.071-7.072L8.464,15.536l10.2-10.2A11.484,11.484,0,0,0,12,3Z"></path>
<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>
<div class="flex items-baseline mt-2"> <div class="flex items-baseline mt-2">
<div id="total-usd-value" class="text-5xl font-bold text-white"></div> <div id="total-usd-value" class="text-5xl font-bold text-white"></div>
@ -52,47 +35,37 @@
<div id="total-btc-value" class="text-sm text-white mt-2"></div> <div id="total-btc-value" class="text-sm text-white mt-2"></div>
</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"> <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"> <a class="rounded-full 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">{{ lock_svg | safe }}<span>Change Password</span></a>
<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"> <a class="rounded-full flex flex-wrap justify-center px-5 py-3 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border dark:bg-gray-500 dark:hover:bg-gray-700 border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="refresh" href="/wallets">{{ circular_arrows_svg | safe }}<span>Refresh</span></a>
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
<rect x="3" y="11" width="18" height="12" rx="2"></rect>
<circle cx="12" cy="17" r="2" stroke="#ffffff"></circle>
<path d="M17,7V6a4.951,4.951,0,0,0-4.9-5H12A4.951,4.951,0,0,0,7,5.9V7" stroke="#ffffff"></path>
</g>
</svg>
<span>Change Password</span>
</a>
<a class="flex flex-wrap justify-center px-5 py-3 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border dark:bg-gray-500 dark:hover:bg-gray-700 border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="refresh" href="/wallets">
<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
<g fill="#ffffff" class="nc-icon-wrapper">
<path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
<path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
</g>
</svg>
<span>Refresh</span>
</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
{% include 'inc_messages.html' %} {% include 'inc_messages.html' %}
<section class="py-4"> <section class="py-4">
<div class="container px-4 mx-auto"> <div class="container px-4 mx-auto">
<div class="flex flex-wrap -m-4"> {% for w in wallets %} {% if w.havedata %} {% if w.error %} <p>Error: {{ w.error }}</p> {% else %} <div class="w-full lg:w-1/3 p-4"> <div class="flex flex-wrap -m-4">
{% for w in wallets %}
{% if w.havedata %}
{% if w.error %}<p>Error: {{ w.error }}</p>
{% else %}
<div class="w-full lg:w-1/3 p-4">
<div class="bg-gray-50 shadow rounded overflow-hidden dark:bg-gray-500"> <div class="bg-gray-50 shadow rounded overflow-hidden dark:bg-gray-500">
<div class="pt-6 px-6 mb-10 flex justify-between items-center"> <div class="pt-6 px-6 mb-10 flex justify-between items-center">
<span class="inline-flex items-center justify-center w-9 h-10 bg-white-50 rounded"> <span class="inline-flex items-center justify-center w-9 h-10 bg-white-50 rounded">
<img class="h-9" src="/static/images/coins/{{ w.name }}.png" alt=""> <img class="h-9" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }}">
</span> </span>
<a class="py-2 px-3 bg-blue-500 text-xs text-white rounded-full hover:bg-blue-600" href="/wallet/{{ w.ticker }}">Manage</a> <a class="py-2 px-3 bg-blue-500 text-xs text-white rounded-full hover:bg-blue-600" href="/wallet/{{ w.ticker }}">Manage Wallet</a>
</div> </div>
<div class="px-6 mb-6"> <div class="px-6 mb-6">
<h4 class="text-xl font-bold dark:text-white">{{ w.name }} <h4 class="text-xl font-bold dark:text-white">{{ w.name }}
<span class="inline-block font-medium text-xs text-gray-500 dark:text-white">({{ w.ticker }})</span> <span class="inline-block font-medium text-xs text-gray-500 dark:text-white">({{ w.ticker }})</span>
</h4> </h4>
<p class="text-xs text-gray-500 dark:text-gray-200">Version: {{ w.version }} {% if w.updating %} <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-700 dark:hover:bg-gray-700">Updating..</span> <p class="text-xs text-gray-500 dark:text-gray-200">Version: {{ w.version }} {% if w.updating %} <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-700 dark:hover:bg-gray-700">Updating..</span></p>
</p>{% endif %} {% endif %}
</div> </div>
<div class="p-6 bg-coolGray-100 dark:bg-gray-600"> <div class="p-6 bg-coolGray-100 dark:bg-gray-600">
<div class="flex mb-2 justify-between items-center"> <div class="flex mb-2 justify-between items-center">
@ -172,30 +145,38 @@
<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 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> </div>
{% endif %} {% endif %}
{% endif %} {# / LTC #} {% endif %}
{# / LTC #}
<hr class="border-t border-gray-100 dark:border-gray-500 my-5">
<div class="flex mb-2 justify-between items-center"> <div class="flex mb-2 justify-between items-center">
<h4 class="text-xs font-medium dark:text-white">Blocks:</h4> <h4 class="text-xs font-medium dark:text-white">Blocks:</h4>
<span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.blocks }}{% if w.known_block_count %} / {{ w.known_block_count }}{% endif %}</span> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.blocks }}{% if w.known_block_count %} / {{ w.known_block_count }}
{% endif %}
</span>
</div> </div>
<div class="flex mb-2 justify-between items-center"> <div class="flex mb-2 justify-between items-center">
<h4 class="text-xs font-medium dark:text-white">Last Updated:</h4> <h4 class="text-xs font-medium dark:text-white">Last Updated:</h4>
<span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.lastupdated }}</span> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.lastupdated }}</span>
</div>{% if w.bootstrapping %} </div>
{% if w.bootstrapping %}
<div class="flex mb-2 justify-between items-center"> <div class="flex mb-2 justify-between items-center">
<h4 class="text-xs font-medium dark:text-white">Bootstrapping:</h4> <h4 class="text-xs font-medium dark:text-white">Bootstrapping:</h4>
<span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.bootstrapping }}</span> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.bootstrapping }}</span>
</div>{% endif %} </div>
{% endif %}
{% if w.encrypted %} {% if w.encrypted %}
<div class="flex mb-2 justify-between items-center"> <div class="flex mb-2 justify-between items-center">
<h4 class="text-xs font-medium dark:text-white">Locked:</h4> <h4 class="text-xs font-medium dark:text-white">Locked:</h4>
<span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.locked }}</span> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.locked }}</span>
</div>{% endif %} <div class="flex mb-2 justify-between items-center"> </div>
{% endif %}
<div class="flex mb-2 justify-between items-center">
<h4 class="text-xs font-medium dark:text-white">Expected Seed:</h4> <h4 class="text-xs font-medium dark:text-white">Expected Seed:</h4>
<span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.expected_seed }}</span> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.expected_seed }}</span>
</div> </div>
<div class="flex justify-between mb-1 mt-10"> <div class="flex justify-between mb-1 mt-10">
<span class="text-xs font-medium text-blue-700 dark:text-gray-200">Blockchain</span> <span class="text-xs font-medium dark:text-gray-200">Blockchain</span>
<span class="text-xs font-medium text-blue-700 dark:text-gray-200">{{ w.synced }}%</span> <span class="text-xs font-medium dark:text-gray-200">{{ w.synced }}%</span>
</div> </div>
<div class="w-full bg-gray-200 rounded-full h-1"> <div class="w-full bg-gray-200 rounded-full h-1">
<div class="bg-blue-500 h-1 rounded-full" style="width: {{ w.synced }}%"></div> <div class="bg-blue-500 h-1 rounded-full" style="width: {{ w.synced }}%"></div>
@ -204,12 +185,14 @@
</div> </div>
{% endif %} {% endif %}
{% endif %} {% endif %}
<!-- havedata --> </div>
</div> {% endfor %} {% endfor %}
</div> </div>
</section> </section>
</div> </div>
{% include 'footer.html' %} {% include 'footer.html' %}
<script> <script>
const coinNameToSymbol = { const coinNameToSymbol = {
'Bitcoin': 'BTC', 'Bitcoin': 'BTC',

Write Preview
Loading…
Cancel
Save