midefos/basicswap
1
0
Fork 0
mirror of https://github.com/basicswap/basicswap.git synced 2026-04-09 02:47:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

GUI v.3.0.0

Browse Source
This commit is contained in:
gerlofvanek
2024-04-12 14:46:47 +02:00
parent 1cbc2f44b0
commit 360d29128c
33 changed files with 2414 additions and 1606 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
basicswap/templates/wallets.html
View File

@@ -53,7 +53,7 @@
{% 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 rounded overflow-hidden dark:bg-gray-500">
<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">
<img class="h-9" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }}">
@@ -68,14 +68,14 @@
{% endif %}
</div>
<div class="p-6 bg-coolGray-100 dark:bg-gray-600">
<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>
<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 usd-text">{{ 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" data-coinname="{{ w.name }}"></div>
</div>
{% if w.pending %}
<div class="flex mb-2 justify-between items-center">
<h4 class="text-xs font-bold text-green-500 dark:text-green-500">Pending:</h4>
@@ -116,7 +116,7 @@
{% if w.anon_pending %}
<div class="flex mb-2 justify-between items-center">
<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 }}">
<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">
@@ -178,8 +178,21 @@
<span class="text-xs font-medium dark:text-gray-200">Blockchain</span>
<span class="text-xs font-medium dark:text-gray-200">{{ w.synced }}%</span>
</div>
<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="w-full bg-gray-200 rounded-full h-1 " data-tooltip-target="tooltip-blocks{{loop.index}}">
<div class="{% if w.synced | float < 100 %} bg-red-500 sync-bar-color-change {% else %} bg-blue-500 {% endif %} h-1 rounded-full" style="width: {{ w.synced }}%;"></div>
</div>
<div class="flex justify-between mb-1 mt-5">
<span class="text-xs font-medium dark:text-gray-200">
<script>
if ({{ w.synced }} !== 100) {
document.write("<p class='bg-gray-50 rounded overflow-hidden dark:bg-gray-500 p-2.5 dark:text-white'>The order book/blockchain is currently syncing, offers will only display once the network has fully <b>100%</b> synced. Please wait until the process completes.</p>");
}
</script>
<div id="tooltip-blocks{{loop.index}}" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-xs text-white {% if w.synced | float < 100 %} bg-red-500 sync-bar-color-change {% else %} bg-blue-500 {% endif %} rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
<div><span class="bold">Blocks: {{ w.blocks }}{% if w.known_block_count %} / {{ w.known_block_count }} {% endif %}</div>
<div class="tooltip-arrow pl-1" data-popper-arrow></div>
</div>
</span>
</div>
</div>
</div>
@@ -203,7 +216,10 @@ const coinNameToSymbol = {
'Litecoin': 'LTC',
'Firo': 'FIRO',
'Dash': 'DASH',
'PIVX': 'PIVX'
'PIVX': 'PIVX',
'Wownero': 'WOW',
'Decred': 'DCR',
'Zano': 'ZANO',
};
const getUsdValue = (cryptoValue, coinSymbol) => {
@@ -255,28 +271,47 @@ const updateValues = async () => {
calculateTotalBtcValue();
};
const toggleUsdAmount = (usdCell, isVisible) => {
const usdText = document.getElementById('usd-text');
if (usdText) {
usdText.style.display = isVisible ? 'inline' : 'none';
}
const toggleUsdAmount = async (usdCell, isVisible) => {
if (isVisible) {
const coinFullName = usdCell.previousElementSibling.getAttribute('data-coinname');
const cryptoValue = parseFloat(usdCell.previousElementSibling.textContent);
const coinSymbol = coinNameToSymbol[coinFullName];
if (coinSymbol) {
updateValues();
const usdText = document.getElementById('usd-text');
if (usdText) {
usdText.style.display = isVisible ? 'inline' : 'none';
}
if (isVisible) {
const coinNameValueElement = usdCell.parentElement.querySelector('.coinname-value');
if (coinNameValueElement) {
const coinFullName = coinNameValueElement.getAttribute('data-coinname');
console.log("coinFullName:", coinFullName);
if (coinFullName) {
const cryptoValue = parseFloat(coinNameValueElement.textContent);
console.log("cryptoValue:", cryptoValue);
const coinSymbol = coinNameToSymbol[coinFullName.trim()];
console.log("coinSymbol:", coinSymbol);
if (coinSymbol) {
await updateValues();
} else {
console.error(`Coin symbol not found for full name: ${coinFullName}`);
}
} else {
console.error(`Data attribute 'data-coinname' not found.`);
}
} else {
}
} else {
console.error(`Coin symbol not found for full name: ${coinFullName}`);
usdCell.textContent = "******";
const btcValueElement = usdCell.nextElementSibling;
if (btcValueElement) {
btcValueElement.textContent = "****";
}
}
} else {
usdCell.textContent = "******";
const btcValueElement = usdCell.nextElementSibling;
if (btcValueElement) {
btcValueElement.textContent = "****";
}
}
};
const toggleUsdIcon = (isVisible) => {