ui: Allow users to select which coins to show prices for on offers page.

2024-05-20_merge
tecnovert 8 months ago
parent 8a279dc71f
commit e20516ef71
No known key found for this signature in database
GPG Key ID: 8ED6D8750C4E3F93
  1. 21
      basicswap/basicswap.py
  2. 3
      basicswap/templates/header.html
  3. 191
      basicswap/templates/offers.html
  4. 17
      basicswap/templates/settings.html
  5. 2
      basicswap/templates/unlock.html
  6. 28
      basicswap/ui/page_offers.py
  7. 4
      basicswap/ui/page_settings.py
  8. 1
      basicswap/ui/util.py

@ -36,7 +36,7 @@ from .interface.part import PARTInterface, PARTInterfaceAnon, PARTInterfaceBlind
from . import __version__
from .rpc import escape_rpcauth
from .rpc_xmr import make_xmr_rpc2_func
from .ui.util import getCoinName
from .ui.util import getCoinName, known_chart_coins
from .util import (
AutomationConstraint,
LockedCoinError,
@ -6484,6 +6484,25 @@ class BasicSwap(BaseApp):
settings_copy.pop('coingecko_api_key')
settings_changed = True
if 'enabled_chart_coins' in data:
new_value = data['enabled_chart_coins'].strip()
ensure(isinstance(new_value, str), 'New enabled_chart_coins value not a string')
if new_value.lower() == 'all' or new_value == '':
pass
else:
tickers = new_value.split(',')
seen_tickers = []
for ticker in tickers:
upcased_ticker = ticker.strip().upper()
if upcased_ticker not in known_chart_coins:
raise ValueError(f'Unknown coin: {ticker}')
if upcased_ticker in seen_tickers:
raise ValueError(f'Duplicate coin: {ticker}')
seen_tickers.append(upcased_ticker)
if settings_copy.get('enabled_chart_coins', '') != new_value:
settings_copy['enabled_chart_coins'] = new_value
settings_changed = True
if settings_changed:
settings_path = os.path.join(self.data_dir, cfg.CONFIG_FILENAME)
settings_path_new = settings_path + '.new'

@ -1,6 +1,5 @@
{% from 'style.html' import notifications_network_offer_svg, notifications_bid_accepted_svg, notifications_unknow_event_svg, notifications_new_bid_on_offer_svg, notifications_close_svg, swap_in_progress_mobile_svg, wallet_svg, page_back_svg, order_book_svg, new_offer_svg, settings_svg, asettings_svg, cog_svg, rpc_svg, debug_svg, explorer_svg, tor_svg, smsg_svg, outputs_svg, automation_svg, shutdown_svg, notifications_svg, debug_nerd_svg, wallet_locked_svg, mobile_menu_svg, wallet_unlocked_svg, tor_purple_svg, sun_svg, moon_svg, swap_in_progress_svg, swap_in_progress_green_svg, available_bids_svg, your_offers_svg, bids_received_svg, bids_sent_svg, header_arrow_down_svg, love_svg %}
<!DOCTYPE html>
{% from 'style.html' import notifications_network_offer_svg, notifications_bid_accepted_svg, notifications_unknow_event_svg, notifications_new_bid_on_offer_svg, notifications_close_svg, swap_in_progress_mobile_svg, wallet_svg, page_back_svg, order_book_svg, new_offer_svg, settings_svg, asettings_svg, cog_svg, rpc_svg, debug_svg, explorer_svg, tor_svg, smsg_svg, outputs_svg, automation_svg, shutdown_svg, notifications_svg, debug_nerd_svg, wallet_locked_svg, mobile_menu_svg, wallet_unlocked_svg, tor_purple_svg, sun_svg, moon_svg, swap_in_progress_svg, swap_in_progress_green_svg, available_bids_svg, your_offers_svg, bids_received_svg, bids_sent_svg, header_arrow_down_svg, love_svg %}
<html lang="en">
<head>
<meta charset="UTF-8">

@ -66,69 +66,73 @@
</section>
<section class="py-4 overflow-hidden container-to-blur">
<div class="container px-4 mx-auto">
<div class="flex flex-wrap -m-3">
<div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="btc-container">
<div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white active-container" id="btc-active">
{% if 'BTC' in enabled_chart_coins %}
<div class="container px-4 mx-auto">
<div class="flex flex-wrap -m-3">
<div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="btc-container">
<div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white active-container" id="btc-active">
<div class="flex items-center">
<img src="/static/images/coins/Bitcoin.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="Bitcoin">
<p class="ml-2 text-black text-sm dark:text-white">
Bitcoin (BTC)
</p>
</div>
<div class="flex flex-col justify-start">
<p class="my-2 text-xl font-bold text-left text-gray-700 dark:text-gray-100" id="btc-price-usd">
<span class="text-sm">
<span id="btc-price-usd-value"></span>
</p>
<div class="flex items-center text-sm">
<div class="w-auto">
<div id="btc-price-change-container" class="w-auto p-1"></div>
</div>
</div>
<div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2">
<span class="bold mr-2">VOL:</span>
<div id="btc-volume-24h">
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% if 'XMR' in enabled_chart_coins %}
<div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="xmr-container">
<div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white price-container">
<div class="flex items-center">
<img src="/static/images/coins/Bitcoin.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="Bitcoin">
<img src="/static/images/coins/Monero.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="Monero">
<p class="ml-2 text-black text-sm dark:text-white">
Bitcoin (BTC)
Monero (XMR)
</p>
</div>
<div class="flex flex-col justify-start">
<p class="my-2 text-xl font-bold text-left text-gray-700 dark:text-gray-100" id="btc-price-usd">
<p class="my-2 text-xl font-bold text-left text-gray-700 dark:text-gray-100" id="xmr-price-usd">
<span class="text-sm">
<span id="btc-price-usd-value"></span>
<span id="xmr-price-usd-value"></span>
</p>
<div class="flex items-center text-sm">
<div class="w-auto">
<div id="btc-price-change-container" class="w-auto p-1"></div>
<div id="xmr-price-change-container" class="w-auto p-1"></div>
</div>
</div>
<div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2">
<span class="bold mr-2">VOL:</span>
<div id="btc-volume-24h">
<div id="xmr-volume-24h">
</div>
</div>
</div>
</div>
<div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2">
<span class="bold mr-2">BTC:</span>
<span id="xmr-price-btc">
</span>
</div>
<div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="xmr-container">
<div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white price-container">
<div class="flex items-center">
<img src="/static/images/coins/Monero.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="Monero">
<p class="ml-2 text-black text-sm dark:text-white">
Monero (XMR)
</p>
</div>
<div class="flex flex-col justify-start">
<p class="my-2 text-xl font-bold text-left text-gray-700 dark:text-gray-100" id="xmr-price-usd">
<span class="text-sm">
<span id="xmr-price-usd-value"></span>
</p>
<div class="flex items-center text-sm">
<div class="w-auto">
<div id="xmr-price-change-container" class="w-auto p-1"></div>
</div>
</div>
<div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2">
<span class="bold mr-2">VOL:</span>
<div id="xmr-volume-24h">
</div>
</div>
<div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2">
<span class="bold mr-2">BTC:</span>
<span id="xmr-price-btc">
</span>
</div>
</div>
</div>
</div>
<div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="part-container">
</div>
</div>
{% endif %}
{% if 'PART' in enabled_chart_coins %}
<div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="part-container">
<div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
<div class="flex items-center">
<img src="/static/images/coins/Particl.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="Particl">
@ -160,7 +164,8 @@
</div>
</div>
</div>
{% endif %}
{% if 'LTC' in enabled_chart_coins %}
<div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="ltc-container">
<div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
<div class="flex items-center">
@ -192,9 +197,10 @@
</div>
</div>
</div>
</div>
<div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="firo-container">
</div>
{% endif %}
{% if 'FIRO' in enabled_chart_coins %}
<div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="firo-container">
<div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
<div class="flex items-center">
<img src="/static/images/coins/Firo.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="Firo">
@ -226,11 +232,12 @@
</div>
</div>
</div>
{% endif %}
{% if 'PIVX' in enabled_chart_coins %}
<div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="pivx-container">
<div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
<div class="flex items-center">
<img src="/static/images/coins/Pivx.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="Pivx">
<img src="/static/images/coins/PIVX.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="PIVX">
<p class="ml-2 text-black text-md dark:text-white">
PIVX (PIVX)
</p>
@ -259,7 +266,8 @@
</div>
</div>
</div>
{% endif %}
{% if 'DASH' in enabled_chart_coins %}
<div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="dash-container">
<div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
<div class="flex items-center">
@ -292,7 +300,8 @@
</div>
</div>
</div>
{% endif %}
{% if 'ETH' in enabled_chart_coins %}
<div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="eth-container">
<div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
<div class="flex items-center">
@ -325,7 +334,8 @@
</div>
</div>
</div>
{% endif %}
{% if 'DOGE' in enabled_chart_coins %}
<div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="doge-container">
<div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
<div class="flex items-center">
@ -358,7 +368,8 @@
</div>
</div>
</div>
{% endif %}
{% if 'DCR' in enabled_chart_coins %}
<div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="dcr-container">
<div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
<div class="flex items-center">
@ -391,7 +402,8 @@
</div>
</div>
</div>
{% endif %}
{% if 'ZANO' in enabled_chart_coins %}
<div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="zano-container">
<div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
<div class="flex items-center">
@ -424,7 +436,8 @@
</div>
</div>
</div>
{% endif %}
{% if 'WOW' in enabled_chart_coins %}
<div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="wow-container">
<div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
<div class="flex items-center">
@ -457,17 +470,25 @@
</div>
</div>
</div>
{% endif %}
</div>
</div>
</section>
<script>
window.addEventListener('load', function() {
const coins = ['BTC', 'PART', 'XMR', 'LTC', 'FIRO', 'DASH', 'PIVX', 'DOGE', 'ETH', 'DCR', 'ZANO', 'WOW'];
const coins = ['{{ enabled_chart_coins|join("','") }}'];
const api_key = '{{chart_api_key}}';
const coinGeckoApiKey = '{{coingecko_api_key}}';
coins.forEach(coin => {
let container_id = coin.toLowerCase() + '-container';
let container = document.getElementById(container_id)
if (container != null) {
container.addEventListener('click', () => {
setActiveContainer(container_id);
updateChart(coin);
});
}
if (coin === 'WOW') {
fetchWowneroData();
} else if (coin === 'ZANO') {
@ -650,6 +671,9 @@ function setActiveContainer(containerId) {
const activeClass = 'active-container';
containerIds.forEach(id => {
const container = document.getElementById(id);
if (container == null) {
return;
}
const innerDiv = container.querySelector('div');
if (id === containerId) {
innerDiv.classList.add(activeClass);
@ -659,55 +683,6 @@ function setActiveContainer(containerId) {
});
}
document.getElementById('btc-container').addEventListener('click', () => {
setActiveContainer('btc-container');
updateChart('BTC');
});
document.getElementById('xmr-container').addEventListener('click', () => {
setActiveContainer('xmr-container');
updateChart('XMR');
});
document.getElementById('part-container').addEventListener('click', () => {
setActiveContainer('part-container');
updateChart('PART');
});
document.getElementById('pivx-container').addEventListener('click', () => {
setActiveContainer('pivx-container');
updateChart('PIVX');
});
document.getElementById('firo-container').addEventListener('click', () => {
setActiveContainer('firo-container');
updateChart('FIRO');
});
document.getElementById('dash-container').addEventListener('click', () => {
setActiveContainer('dash-container');
updateChart('DASH');
});
document.getElementById('ltc-container').addEventListener('click', () => {
setActiveContainer('ltc-container');
updateChart('LTC');
});
document.getElementById('doge-container').addEventListener('click', () => {
setActiveContainer('doge-container');
updateChart('DOGE');
});
document.getElementById('eth-container').addEventListener('click', () => {
setActiveContainer('eth-container');
updateChart('ETH');
});
document.getElementById('dcr-container').addEventListener('click', () => {
setActiveContainer('dcr-container');
updateChart('DCR');
});
document.getElementById('wow-container').addEventListener('click', () => {
setActiveContainer('wow-container');
updateChart('WOW');
});
document.getElementById('zano-container').addEventListener('click', () => {
setActiveContainer('zano-container');
updateChart('ZANO');
});
let coin;
const coinOptions = {
'BTC': {

@ -397,19 +397,28 @@
<tr class="opacity-100 text-gray-500 dark:text-gray-100">
<td class="py-3 px-6 bold">Chart API Key (CryptoCompare)</td>
<td class="py-3 px-6">
<label for="message" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Chart API (free) Key at <a class="inline-block text-blue-500 hover:text-blue-600 hover:underline" href="https://min-api.cryptocompare.com/" target="_blank">CryptoCompare.com</a>
<label for="chartapikey" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Chart API (free) Key at <a class="inline-block text-blue-500 hover:text-blue-600 hover:underline" href="https://min-api.cryptocompare.com/" target="_blank">CryptoCompare.com</a>
<br />
</label>
<input name="chartapikey" type="text" 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" name="" min="3" max="32" value="{{chart_settings.chart_api_key}}">
<input name="chartapikey" type="text" 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" min="3" max="32" value="{{chart_settings.chart_api_key}}">
</td>
</tr>
<tr class="opacity-100 text-gray-500 dark:text-gray-100">
<td class="py-3 px-6 bold">Chart API Key (CoinGecko)</td>
<td class="py-3 px-6">
<label for="message" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Chart API (free) Key at <a class="inline-block text-blue-500 hover:text-blue-600 hover:underline" href="https://coingecko.com/" target="_blank">CoinGecko.com</a>
<label for="coingeckoapikey" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Chart API (free) Key at <a class="inline-block text-blue-500 hover:text-blue-600 hover:underline" href="https://coingecko.com/" target="_blank">CoinGecko.com</a>
<br />
</label>
<input name="coingeckoapikey" type="text" 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" name="" min="3" max="32" value="{{chart_settings.coingecko_api_key}}">
<input name="coingeckoapikey" type="text" 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" min="3" max="32" value="{{chart_settings.coingecko_api_key}}">
</td>
</tr>
<tr class="opacity-100 text-gray-500 dark:text-gray-100">
<td class="py-3 px-6 bold">Enabled Coins</td>
<td class="py-3 px-6">
<label for="enabledchartcoins" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Coins to show data for: Blank for active coins, "all" for all known coins or comma separated list of coin tickers to show
<br />
</label>
<input name="enabledchartcoins" type="text" 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" value="{{chart_settings.enabled_chart_coins}}">
</td>
</tr>
</table>

@ -103,7 +103,7 @@
<a class="inline-block text-xs font-medium text-blue-500 hover:text-blue-600 hover:underline" href="https://academy.particl.io/en/latest/faq/get_support.html" target="_blank" contenteditable="false">Help / Tutorials</a>
</p>
<p class="text-center">
<span class="text-xs font-medium text-coolGray-500 dark:text-gray-500" contenteditable="false">{{ title }} - GUI 2.0.2</span>
<span class="text-xs font-medium text-coolGray-500 dark:text-gray-500" contenteditable="false">{{ title }} - GUI 3.0.0</span>
</p>
<input type="hidden" name="formid" value="{{ form_id }}">
</form>

@ -9,14 +9,15 @@ import time
from urllib import parse
from .util import (
PAGE_LIMIT,
getCoinType,
inputAmount,
setCoinFilter,
get_data_entry,
have_data_entry,
get_data_entry_or,
have_data_entry,
inputAmount,
known_chart_coins,
listAvailableCoins,
PAGE_LIMIT,
setCoinFilter,
set_pagination_filters,
)
from basicswap.db import (
@ -815,6 +816,24 @@ def page_offers(self, url_split, post_string, sent=False):
offers_count = len(formatted_offers)
enabled_chart_coins = []
enabled_chart_coins_setting = swap_client.settings.get('enabled_chart_coins', '')
if enabled_chart_coins_setting.lower() == 'all':
enabled_chart_coins = known_chart_coins
elif enabled_chart_coins_setting.strip() == '':
for coin_id in swap_client.coin_clients:
if not swap_client.isCoinActive(coin_id):
continue
enabled_ticker = swap_client.ci(coin_id).ticker_mainnet()
if enabled_ticker not in enabled_chart_coins and enabled_ticker in known_chart_coins:
enabled_chart_coins.append(enabled_ticker)
else:
for ticker in enabled_chart_coins_setting.split(','):
upcased_ticker = ticker.strip().upper()
if upcased_ticker not in enabled_chart_coins and upcased_ticker in known_chart_coins:
enabled_chart_coins.append(upcased_ticker)
template = server.env.get_template('offers.html')
return self.render_template(template, {
'page_type': 'Your Offers' if sent else 'Network Order Book',
@ -834,4 +853,5 @@ def page_offers(self, url_split, post_string, sent=False):
'offers_count': offers_count,
'tla_from': tla_from,
'tla_to': tla_to,
'enabled_chart_coins': enabled_chart_coins,
})

@ -1,6 +1,6 @@
# -*- coding: utf-8 -*-
# Copyright (c) 2022-2023 tecnovert
# Copyright (c) 2022-2024 tecnovert
# Distributed under the MIT software license, see the accompanying
# file LICENSE or http://www.opensource.org/licenses/mit-license.php.
@ -46,6 +46,7 @@ def page_settings(self, url_split, post_string):
'show_chart': toBool(get_data_entry(form_data, 'showchart')),
'chart_api_key': html.unescape(get_data_entry_or(form_data, 'chartapikey', '')),
'coingecko_api_key': html.unescape(get_data_entry_or(form_data, 'coingeckoapikey', '')),
'enabled_chart_coins': get_data_entry_or(form_data, 'enabledchartcoins', ''),
}
swap_client.editGeneralSettings(data)
elif have_data_entry(form_data, 'apply_tor'):
@ -141,6 +142,7 @@ def page_settings(self, url_split, post_string):
'show_chart': swap_client.settings.get('show_chart', True),
'chart_api_key': chart_api_key,
'coingecko_api_key': coingecko_api_key,
'enabled_chart_coins': swap_client.settings.get('enabled_chart_coins', ''),
}
tor_control_password = '' if swap_client.tor_control_password is None else swap_client.tor_control_password

@ -33,6 +33,7 @@ from basicswap.protocols.xmr_swap_1 import getChainBSplitKey, getChainBRemoteSpl
PAGE_LIMIT = 25
invalid_coins_from = []
known_chart_coins = ['BTC', 'PART', 'XMR', 'LTC', 'FIRO', 'DASH', 'PIVX', 'DOGE', 'ETH', 'DCR', 'ZANO', 'WOW']
def tickerToCoinId(ticker):

Loading…
Cancel
Save