mirror of
https://github.com/basicswap/basicswap.git
synced 2024-11-16 15:58:17 +00:00
ui: Updates + Cleanup + Added doge in charts + icons.
This commit is contained in:
parent
1859eccf0e
commit
eb44dc9626
10 changed files with 103 additions and 68 deletions
BIN
basicswap/static/images/coins/Doge-20.png
Normal file
BIN
basicswap/static/images/coins/Doge-20.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.3 KiB |
BIN
basicswap/static/images/coins/Doge.png
Normal file
BIN
basicswap/static/images/coins/Doge.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
Before Width: | Height: | Size: 5 KiB |
|
@ -193,10 +193,15 @@
|
|||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
|
||||
<div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">PTX Status</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Details</span>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
@ -225,6 +230,15 @@
|
|||
<td class="py-3 px-6 text-xs">{{ b[3] }}</td>
|
||||
<td class="py-3 px-6 text-xs">{{ b[4] }}</td>
|
||||
<td class="py-3 px-6 text-xs">{{ b[5] }}</td>
|
||||
{% if page_type_received or page_type_sent %}
|
||||
<td class="py-3 px-6 text-xs">
|
||||
<a class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md bg-blue-500 text-white border border-blue-500 hover:bg-blue-600 transition duration-200 bg-blue-500 text-white hover:bg-blue-600 transition duration-200" href="/bid/{{ b[1] }}">Details</a>
|
||||
</td>
|
||||
{% elif page_type_available %}
|
||||
<td class="py-3 px-6 text-xs">
|
||||
<a class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md bg-blue-500 text-white border border-blue-500 hover:bg-blue-600 transition duration-200 bg-blue-500 text-white hover:bg-blue-600 transition duration-200" href="/bid/{{ b[1] }}">Accept</a>
|
||||
</td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
</tbody>
|
||||
{% endfor %}
|
||||
|
@ -235,7 +249,7 @@
|
|||
</div>
|
||||
<div class="rounded-b-md">
|
||||
<div class="w-full md:w-0/12">
|
||||
<div class="flex flex-wrap justify-end pt-6 pr-6 border-t border-gray-200 dark:border-gray-400">
|
||||
<div class="flex flex-wrap justify-end pt-6 pr-6 border-t border-gray-100 dark:border-gray-400">
|
||||
<div class="w-full md:w-auto p-1.5">
|
||||
<button type="submit" name='pageback' value="Page Back" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 focus:ring-0 focus:outline-none">
|
||||
<svg aria-hidden="true" class="mr-2 w-5 h-5" fill="#fff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
|
|
|
@ -456,7 +456,7 @@
|
|||
<polyline points=" 16,2 13,5 16,8 " stroke="#6b7280"></polyline>
|
||||
<polyline points=" 8,16 11,19 8,22 " stroke="#6b7280"></polyline>
|
||||
</g>
|
||||
</svg><span>Your Offers</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full" title="Total {{ summary.num_sent_offers }}">{{ summary.num_sent_active_offers }}</span></a>
|
||||
</svg><span>Your Offers</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_sent_active_offers }}</span></a>
|
||||
|
||||
<div id="tooltip-your-offers" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-blue-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
|
||||
<p><b>Total:</b> {{ summary.num_sent_offers }}</p>
|
||||
|
@ -482,7 +482,7 @@
|
|||
<line data-cap="butt" x1="12" y1="1" x2="12" y2="16" stroke="#6b7280"></line>
|
||||
<polyline points="7 11 12 16 17 11" stroke="#6b7280"></polyline>
|
||||
</g>
|
||||
</svg><span>Bids Received</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full" title="Total {{ summary.num_recv_bids }}">{{ summary.num_available_bids }}</span></a>
|
||||
</svg><span>Bids Received</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_available_bids }}</span></a>
|
||||
</li>
|
||||
|
||||
<div id="tooltip-bids-received" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-blue-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
|
||||
|
@ -497,9 +497,7 @@
|
|||
<line data-cap="butt" x1="12" y1="17" x2="12" y2="2" stroke="#6b7280"></line>
|
||||
<polyline points="17 7 12 2 7 7" stroke="#6b7280"></polyline>
|
||||
</g>
|
||||
</svg> <span>Bids Sent</span><span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full" title="Total {{ summary.num_sent_bids }}">{{ summary.num_sent_active_bids }}</span></a>
|
||||
|
||||
|
||||
</svg><span>Bids Sent</span><span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_sent_active_bids }}</span></a>
|
||||
<div id="tooltip-bids-sent" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-blue-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
|
||||
<p><b>Total:</b> {{ summary.num_sent_bids }}</p>
|
||||
<div class="tooltip-arrow" data-popper-arrow></div>
|
||||
|
|
|
@ -518,7 +518,7 @@
|
|||
<div class="w-full md:w-0/12">
|
||||
<div class="flex flex-wrap justify-end">
|
||||
<div class="w-full md:w-auto p-1.5">
|
||||
<button name="newbid" value="New Bid" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none dark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600">New Bid</button>
|
||||
<button name="newbid" value="New Bid" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm bg-blue-500 hover:bg-blue-600 border-blue-500 text-white border rounded-md shadow-button focus:ring-0 focus:outline-none">New Bid</button>
|
||||
</div>
|
||||
{% if data.sent %}
|
||||
<div class="w-full md:w-auto p-1.5">
|
||||
|
|
|
@ -449,6 +449,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
select.select-disabled {
|
||||
opacity: 0.50 !important;
|
||||
|
@ -643,7 +644,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
|
||||
function loadPrices() {
|
||||
const api_key = '{{chart_api_key}}';
|
||||
const coins = ['BTC', 'PART', 'XMR', 'LTC', 'FIRO', 'DASH', 'PIVX'];
|
||||
const coins = ['BTC', 'PART', 'XMR', 'LTC', 'FIRO', 'DASH', 'PIVX', 'DOGE'];
|
||||
|
||||
document.getElementById("priceTable").classList.remove("hidden");
|
||||
|
||||
|
|
|
@ -269,11 +269,37 @@
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full sm:w-1/2 lg:w-1/5 p-3" id="doge-container">
|
||||
<div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-lg dark:text-white">
|
||||
<div class="flex items-center mb-2.5">
|
||||
<img src="/static/images/coins/Doge-20.png" height="20" width="20" class="mr-2">
|
||||
<p class="text-sm text-neutral-500 font-medium">Dogecoin (DOGE)</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center mb-2 -m-1">
|
||||
<div class="w-auto p-1">
|
||||
<h3 class="font-heading text-1xl font-semibold">
|
||||
<div id="doge-price-usd"></div>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="w-auto p-1">
|
||||
<div id="doge-price-change-container" class="w-auto p-1"></div>
|
||||
</div>
|
||||
<div class="w-auto p-1">
|
||||
<h3 class="text-xs font-semibold">
|
||||
<div id="doge-price-btc"></div>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-neutral-400 font-medium">
|
||||
Volume 24H:<div class="text-xs" id="doge-volume-24h"></div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
const api_key = '{{chart_api_key}}';
|
||||
const coins = ['BTC', 'PART', 'XMR', 'LTC', 'FIRO', 'DASH', 'PIVX'];
|
||||
const coins = ['BTC', 'PART', 'XMR', 'LTC', 'FIRO', 'DASH', 'PIVX', 'DOGE'];
|
||||
coins.forEach(coin => {
|
||||
fetch(`https://min-api.cryptocompare.com/data/pricemultifull?fsyms=${coin}&tsyms=USD,BTC&api_key=${api_key}`)
|
||||
.then(response => response.json())
|
||||
|
@ -323,7 +349,7 @@ function negativePriceChangeHTML(value) {
|
|||
}
|
||||
|
||||
function setActiveContainer(containerId) {
|
||||
const containerIds = ['btc-container', 'xmr-container', 'part-container', 'pivx-container', 'firo-container', 'dash-container', 'ltc-container'];
|
||||
const containerIds = ['btc-container', 'xmr-container', 'part-container', 'pivx-container', 'firo-container', 'dash-container', 'ltc-container', 'doge-container'];
|
||||
const activeClass = 'active-container';
|
||||
containerIds.forEach(id => {
|
||||
const container = document.getElementById(id);
|
||||
|
@ -364,6 +390,10 @@ document.getElementById('ltc-container').addEventListener('click', () => {
|
|||
setActiveContainer('ltc-container');
|
||||
updateChart('LTC');
|
||||
});
|
||||
document.getElementById('doge-container').addEventListener('click', () => {
|
||||
setActiveContainer('doge-container');
|
||||
updateChart('DOGE');
|
||||
});
|
||||
|
||||
let coin;
|
||||
const coinOptions = {
|
||||
|
|
|
@ -34,15 +34,9 @@
|
|||
<img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
|
||||
<div class="relative z-20 flex flex-wrap items-center -m-3">
|
||||
<div class="w-full md:w-1/2 p-3 h-48">
|
||||
|
||||
|
||||
<h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">
|
||||
Wallets
|
||||
</h2>
|
||||
<div class="flex items-center">
|
||||
<h2 class="text-lg font-bold text-white tracking-tighter mr-2">
|
||||
Total Assets:
|
||||
</h2>
|
||||
<h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Wallets</h2>
|
||||
<div class="flex items-center">
|
||||
<h2 class="text-lg font-bold text-white tracking-tighter mr-2">Total Assets:</h2>
|
||||
<button id="hide-usd-amount-toggle" class="flex items-center justify-center p-1 focus:ring-0 focus:outline-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" height="20" width="20" viewBox="0 0 24 24">
|
||||
<path d="M23.444,10.239a22.936,22.936,0,0,0-2.492-2.948l-4.021,4.021A5.026,5.026,0,0,1,17,12a5,5,0,0,1-5,5,5.026,5.026,0,0,1-.688-.069L8.055,20.188A10.286,10.286,0,0,0,12,21c5.708,0,9.905-5.062,11.445-7.24A3.058,3.058,0,0,0,23.444,10.239Z"></path>
|
||||
|
@ -50,19 +44,13 @@
|
|||
<path data-color="color-2" d="M1,24a1,1,0,0,1-.707-1.707l22-22a1,1,0,0,1,1.414,1.414l-22,22A1,1,0,0,1,1,24Z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-baseline mt-2">
|
||||
<div id="total-usd-value" class="text-5xl font-bold text-white"></div>
|
||||
<div id="usd-text" class="text-sm text-white ml-1">USD</div>
|
||||
</div>
|
||||
<div id="total-btc-value" class="text-sm text-white mt-2"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="flex items-baseline mt-2">
|
||||
<div id="total-usd-value" class="text-5xl font-bold text-white"></div>
|
||||
<div id="usd-text" class="text-sm text-white ml-1">USD</div>
|
||||
</div>
|
||||
<div id="total-btc-value" class="text-sm text-white mt-2"></div>
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
|
||||
<a class="mr-5 flex flex-wrap justify-center px-5 py-3 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border dark:bg-gray-500 dark:hover:bg-gray-700 border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="refresh" href="/changepassword">
|
||||
<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
|
||||
|
@ -107,56 +95,61 @@
|
|||
</p>{% endif %}
|
||||
</div>
|
||||
<div class="p-6 bg-coolGray-100 dark:bg-gray-600">
|
||||
<!-- bg here -->
|
||||
|
||||
<div class="flex mb-2 justify-between items-center">
|
||||
<h4 class="text-xs font-medium dark:text-white">Balance:</h4>
|
||||
<div class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200 coinname-value" data-coinname="{{ w.name }}">{{ w.balance }} {{ w.ticker }}</div>
|
||||
</div>
|
||||
{% if w.unconfirmed %}
|
||||
<div class="flex mb-2 justify-between items-center">
|
||||
<h4 class="text-xs font-medium dark:text-white">Unconfirmed:</h4>
|
||||
<span class="inline-block py-1 px-2 rounded-full bg-green-100 text-xs text-green-500 dark:bg-gray-500 dark:text-green-500">+{{ w.unconfirmed }} {{ w.ticker }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="flex mb-2 justify-between items-center">
|
||||
<h4 class="text-xs font-medium dark:text-white">USD value:</h4>
|
||||
<div class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200 usd-value"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex mb-2 justify-between items-center">
|
||||
<h4 class="text-xs font-medium dark:text-white">Balance:</h4>
|
||||
<div class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200 coinname-value" data-coinname="{{ w.name }}">{{ w.balance }} {{ w.ticker }}</div>
|
||||
</div>
|
||||
<div class="flex mb-2 justify-between items-center">
|
||||
<h4 class="text-xs font-medium dark:text-white">{{ w.ticker }} USD value:</h4>
|
||||
<div class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200 usd-value"></div>
|
||||
</div>
|
||||
{% if w.unconfirmed %}
|
||||
<div class="flex mb-2 justify-between items-center">
|
||||
<h4 class="text-xs font-bold text-green-500 dark:text-green-500">Unconfirmed:</h4>
|
||||
<span class="bold inline-block py-1 px-2 rounded-full bg-green-100 text-xs text-green-500 dark:bg-gray-500 dark:text-green-500 coinname-value" data-coinname="{{ w.name }}">+{{ w.unconfirmed }} {{ w.ticker }}</span>
|
||||
</div>
|
||||
<div class="flex mb-2 justify-between items-center">
|
||||
<h4 class="text-xs font-bold text-green-500 dark:text-green-500">Unconfirmed USD value:</h4>
|
||||
<div class="bold inline-block py-1 px-2 rounded-full bg-green-100 text-xs text-green-500 dark:bg-gray-500 dark:text-green-500 usd-value"></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if w.cid == '1' %}
|
||||
<div class="flex mb-2 justify-between items-center">
|
||||
<h4 class="text-xs font-medium dark:text-white">Blind Balance:</h4>
|
||||
<span class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200 coinname-value" data-coinname="{{ w.name }}">{{ w.blind_balance }} {{ w.ticker }}</span>
|
||||
</div>
|
||||
<div class="flex mb-2 justify-between items-center">
|
||||
<h4 class="text-xs font-medium dark:text-white">USD value:</h4>
|
||||
<div class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200 usd-value"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex mb-2 justify-between items-center">
|
||||
<h4 class="text-xs font-medium dark:text-white">Blind USD value:</h4>
|
||||
<div class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200 usd-value"></div>
|
||||
</div>
|
||||
{% if w.blind_unconfirmed %}
|
||||
<div class="flex mb-2 justify-between items-center">
|
||||
<h4 class="text-xs font-medium dark:text-white">Blind Unconfirmed:</h4>
|
||||
<span class="bold inline-block py-1 px-2 rounded-full bg-green-100 text-xs text-green-500 dark:bg-gray-500 dark:text-green-500">+{{ w.blind_unconfirmed }} {{ w.ticker }}</span>
|
||||
</div>{% endif %}
|
||||
<h4 class="text-xs font-bold text-green-500 dark:text-green-500">Blind Unconfirmed:</h4>
|
||||
<span class="bold inline-block py-1 px-2 rounded-full bg-green-100 text-xs text-green-500 dark:bg-gray-500 dark:text-green-500 coinname-value" data-coinname="{{ w.name }}" >+{{ w.blind_unconfirmed }} {{ w.ticker }}</span>
|
||||
</div>
|
||||
<div class="flex mb-2 justify-between items-center">
|
||||
<h4 class="text-xs font-bold text-green-500 dark:text-green-500">Blind Unconfirmed USD value:</h4>
|
||||
<div class="bold inline-block py-1 px-2 rounded-full bg-green-100 text-xs text-green-500 dark:bg-gray-500 dark:text-green-500 usd-value"></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="flex mb-2 justify-between items-center">
|
||||
<h4 class="text-xs font-medium dark:text-white">Anon Balance:</h4>
|
||||
<span class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200 coinname-value" data-coinname="{{ w.name }}">{{ w.anon_balance }} {{ w.ticker }}</span>
|
||||
</div>
|
||||
<div class="flex mb-2 justify-between items-center">
|
||||
<h4 class="text-xs font-medium dark:text-white">USD value:</h4>
|
||||
<div class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200 usd-value"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex mb-2 justify-between items-center">
|
||||
<h4 class="text-xs font-medium dark:text-white">Anon USD value:</h4>
|
||||
<div class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200 usd-value"></div>
|
||||
</div>
|
||||
{% if w.anon_pending %}
|
||||
<div class="flex mb-2 justify-between items-center">
|
||||
<h4 class="text-xs font-medium dark:text-white">Anon Pending:</h4>
|
||||
<span class="bold inline-block py-1 px-2 rounded-full bg-green-100 text-xs text-green-500 dark:bg-gray-500 dark:text-green-500">
|
||||
<h4 class="text-xs font-bold text-green-500 dark:text-green-500">Anon Pending:</h4>
|
||||
<span class="bold inline-block py-1 px-2 rounded-full bg-green-100 text-xs text-green-500 dark:bg-gray-500 dark:text-green-500 coinname-value" data-coinname="{{ w.name }}">
|
||||
+{{ w.anon_pending }} {{ w.ticker }}</span>
|
||||
</div>
|
||||
<div class="flex mb-2 justify-between items-center">
|
||||
<h4 class="text-xs font-bold text-green-500 dark:text-green-500">Anon Pending USD value:</h4>
|
||||
<div class="bold inline-block py-1 px-2 rounded-full bg-green-100 text-xs text-green-500 dark:bg-gray-500 dark:text-green-500 usd-value"></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
<div class="flex mb-2 justify-between items-center">
|
||||
|
@ -195,7 +188,6 @@
|
|||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{% include 'footer.html' %}
|
||||
<script>
|
||||
const coinNameToSymbol = {
|
||||
|
|
Loading…
Reference in a new issue