Host-customized fork of https://github.com/tecnovert/basicswap/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
549 lines
36 KiB
549 lines
36 KiB
<!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"> |
|
{% if refresh %} |
|
<meta http-equiv="refresh" content="{{ refresh }}"> |
|
{% endif %} |
|
<script src="/static/js/libs/chart.js"></script> |
|
<link type="text/css" media="all" href="/static/css/libs/flowbite.min.css" rel="stylesheet" /> |
|
<link type="text/css" media="all" href="/static/css/libs/tailwind.min.css" rel="stylesheet"> |
|
<link type="text/css" media="all" href="/static/css/style.css" rel="stylesheet"> |
|
<script src="/static/js/main.js"></script> |
|
<script src="/static/js/libs/flowbite.js"></script> |
|
<script> |
|
const isDarkMode = |
|
localStorage.getItem('color-theme') === 'dark' || |
|
(!localStorage.getItem('color-theme') && |
|
window.matchMedia('(prefers-color-scheme: dark)').matches); |
|
|
|
if (!localStorage.getItem('color-theme')) { |
|
localStorage.setItem('color-theme', isDarkMode ? 'dark' : 'light'); |
|
} |
|
|
|
document.documentElement.classList.toggle('dark', isDarkMode); |
|
</script> |
|
|
|
<script> |
|
window.Components = { |
|
customSelect(options) { |
|
return { |
|
init() { |
|
this.$refs.listbox.focus() |
|
this.optionCount = this.$refs.listbox.children.length |
|
this.$watch('selected', value => { |
|
if (!this.open) return |
|
|
|
if (this.selected === null) { |
|
this.activeDescendant = '' |
|
return |
|
} |
|
|
|
this.activeDescendant = this.$refs.listbox.children[this.selected - 1].id |
|
}) |
|
}, |
|
activeDescendant: null, |
|
optionCount: null, |
|
open: false, |
|
selected: null, |
|
value: 1, |
|
choose(option) { |
|
this.value = option |
|
this.open = false |
|
}, |
|
onButtonClick() { |
|
if (this.open) return |
|
this.selected = this.value |
|
this.open = true |
|
this.$nextTick(() => { |
|
this.$refs.listbox.focus() |
|
this.$refs.listbox.children[this.selected - 1].scrollIntoView({ block: 'nearest' }) |
|
}) |
|
}, |
|
onOptionSelect() { |
|
if (this.selected !== null) { |
|
this.value = this.selected |
|
} |
|
this.open = false |
|
this.$refs.button.focus() |
|
}, |
|
onEscape() { |
|
this.open = false |
|
this.$refs.button.focus() |
|
}, |
|
onArrowUp() { |
|
this.selected = this.selected - 1 < 1 ? this.optionCount : this.selected - 1 |
|
this.$refs.listbox.children[this.selected - 1].scrollIntoView({ block: 'nearest' }) |
|
}, |
|
onArrowDown() { |
|
this.selected = this.selected + 1 > this.optionCount ? 1 : this.selected + 1 |
|
this.$refs.listbox.children[this.selected - 1].scrollIntoView({ block: 'nearest' }) |
|
}, |
|
...options, |
|
} |
|
}, |
|
} |
|
|
|
</script> |
|
<link rel=icon sizes="32x32" type="image/png" href="/static/images/favicon/favicon-32.png"> |
|
<title>(BSX) BasicSwap - v{{ version }}</title> |
|
</head> |
|
<body class="dark:bg-gray-700"> |
|
<section> |
|
<nav class="relative bg-gray-700"> |
|
|
|
<div class="p-6 container flex flex-wrap items-center justify-between items-center mx-auto"> |
|
<a class="flex-shrink-0 mr-12 text-2xl text-white font-semibold" href="/"> <img class="h-10" src="/static/images/logos/basicswap-logo.svg" alt="" width="auto"></a> |
|
<ul class="hidden xl:flex"> |
|
<li> |
|
<a class="flex mr-10 items-center py-3 text-gray-50 hover:text-gray-100 text-sm" href="/wallets"> |
|
{{ wallet_svg | safe }} |
|
<span>Wallets</span> |
|
</a> |
|
</li> |
|
|
|
<li> |
|
<a class="flex mr-10 items-center py-2.5 text-gray-50 hover:text-gray-100 text-sm" href="/offers"> |
|
{{ order_book_svg | safe }}<span>Show Order Book</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_network_offers }}</span> |
|
</a> |
|
</li> |
|
<li> |
|
<a class="flex rounded-full flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-green-600 hover:border-green-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" href="/newoffer"> |
|
{{ new_offer_svg | safe }} |
|
<span>Place new Offer</span> |
|
</a> |
|
</li> |
|
</ul> |
|
<ul class="mr-10 hidden xl:flex lg:justify-end lg:items-center lg:space-x-6 ml-auto"> |
|
<div id="dropdownNavbarLink" data-dropdown-toggle="dropdownNavbar" class="flex justify-between items-center py-2 pr-4 pl-3 w-full text-gray-50 text-sm md:border-0 md:p-0 md:w-auto text-gray-50 hover:text-gray-100"> |
|
{{ settings_svg | safe }} Settings & Tools |
|
{{ header_arrow_down_svg| safe }} |
|
</div> |
|
</ul> |
|
<!-- dropdown settings & tools --> |
|
<div id="dropdownNavbar" class="hidden z-50 w-50 font-normal bg-white shadow divide-y divide-gray-100 dark:bg-gray-500 dark:divide-gray-400 dark:text-white"> |
|
<ul class="py-0 text-sm text-gray-700" aria-labelledby="dropdownLargeButton"> |
|
<li> |
|
<a href="/settings" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Settings</span> |
|
{{ cog_svg | safe }} Settings</a> |
|
</li> |
|
{% if debug_mode == true %} |
|
<li> |
|
<a href="/rpc" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">RPC</span> |
|
{{ rpc_svg | safe }} RPC Console </a> |
|
</li> |
|
{% endif %} |
|
{% if debug_mode == true %} |
|
<li> |
|
<a href="/debug" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Debug</span> |
|
{{ debug_svg | safe }} Debug</a> |
|
</li> |
|
{% endif %} |
|
{% if debug_mode == true %} |
|
<li> |
|
<a href="/explorers" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Explorers</span> |
|
{{ explorer_svg | safe }} Explorers </a> |
|
</li> |
|
{% endif %} |
|
{% if use_tor_proxy == true %} |
|
<li> |
|
<a href="/tor" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Tor</span> |
|
{{ tor_svg | safe }} Tor </a> |
|
</li> |
|
{% endif %} |
|
<li> |
|
<a href="/smsgaddresses" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Settings</span> |
|
{{ smsg_svg | safe }} SMSG Addresses</a> |
|
</li> |
|
<li> |
|
<a href="/watched" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Automation Strategies</span> |
|
{{ outputs_svg | safe }} Watch Outputs |
|
<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_watched_outputs }}</span> |
|
</a> |
|
</li> |
|
{% if debug_mode == true %} |
|
<li> |
|
<a href="/automation" class="flex items-center block py-4 px-4 hover:bg-gray-10 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Automation Strategies</span> |
|
{{ automation_svg | safe }} Automation Strategies</a> |
|
</li> |
|
{% endif %} |
|
</ul> |
|
<div class="text-sm text-gray-700"> |
|
<a href="/shutdown/{{ shutdown_token }}" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Shutdown</span> |
|
{{ shutdown_svg | safe }} Shutdown </a> |
|
</div> |
|
</div> |
|
|
|
<!-- dropdown settings & tools --> |
|
|
|
<!-- notifications --> |
|
<button id="dropdownNotificationButton" data-dropdown-toggle="dropdownNotification" class="inline-flex items-center text-sm font-medium text-center text-gray-500 focus:outline-none " type="button"> |
|
{{ notifications_svg | safe }} |
|
<div class="flex relative"> |
|
<!-- Todo --> |
|
<!-- <div class="inline-flex relative -top-2 right-2 w-3 h-3 bg-green-500 rounded-full border-2 border-gray-800"></div> --> |
|
<!-- Red <div class="inline-flex relative -top-2 right-3 w-3 h-3 bg-red-500 rounded-full border-2 border-white"></div> --> |
|
<!-- Todo --> |
|
</div> |
|
</button> |
|
|
|
<!-- Dropdown menu --> |
|
<div id="dropdownNotification" class="hidden z-50 w-full max-w-sm bg-white shadow rounded divide-y divide-gray-100 drop-shadow dark:bg-gray-500 dark:divide-gray-400 dark:text-white" aria-labelledby="dropdownNotificationButton"> |
|
<div class="block py-2 px-4 font-semibold text-center text-gray-700 bg-gray-50 drop-shadow dark:text-white dark:bg-gray-500">Notifications History</div> |
|
<div class="divide-y divide-gray-100 dark:divide-gray-400"> |
|
{% for entry in notifications %} {% if entry[1] == 1 %} |
|
<div class="flex py-3 px-4 hover:bg-gray-100 dark:hover:bg-gray-700"> |
|
<div class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 bg-blue-500 rounded-lg"> |
|
{{ notifications_network_offer_svg | safe }} |
|
</div> |
|
<div class="pl-3 w-full"> |
|
<div class="text-gray-500 text-sm mb-1.5"> <span class="font-semibold text-gray-900 dark:text-white"> |
|
NEW NETWORK <a class="underline text-blue-500" href="/offer/{{ entry[2].offer_id }}">OFFER</a></span> |
|
<br/> <span class="mt-2 inline-flex text-xs font-small monospace text-center dark:text-gray-300"> |
|
<a href="/offer/{{ entry[2].offer_id }}">{{ entry[2].offer_id|truncate(42, True) }}</a> |
|
</span></div> |
|
<div class="text-xs text-gray-600 bold dark:text-gray-300">{{ entry[0] }}</div> |
|
</div> |
|
</div> |
|
{% elif entry[1] == 2 %} |
|
<div class="flex py-3 px-4 hover:bg-gray-100 dark:hover:bg-gray-700"> |
|
<div class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 bg-blue-500 rounded-lg"> |
|
{{ notifications_new_bid_on_offer_svg | safe }} |
|
</div> |
|
<div class="pl-3 w-full"> |
|
<div class="text-gray-500 dark:text-white text-sm mb-1.5"> <span class="font-semibold text-gray-900 dark:text-white"> |
|
<a class="underline text-blue-500" href="/bid/{{ entry[2].bid_id }}">NEW BID</a> ON <a class="underline text-blue-500" href="/offer/{{ entry[2].offer_id }}">OFFER</a></span> |
|
<br/> <span class="mt-2 inline-flex text-xs font-small monospace text-center dark:text-gray-300"> |
|
<a href="/offer/{{ entry[2].offer_id }}">{{ entry[2].offer_id|truncate(42, True) }}</a> |
|
</span></div> |
|
<div class="text-xs text-gray-600 bold dark:text-gray-300">{{ entry[0] }}</div> |
|
</div> |
|
</div> |
|
{% elif entry[1] == 3 %} |
|
<div class="flex py-3 px-4 hover:bg-gray-100 dark:hover:bg-gray-700"> |
|
<div class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 bg-violet-500 rounded-lg"> |
|
{{ notifications_bid_accepted_svg | safe }} |
|
</div> |
|
<div class="pl-3 w-full"> |
|
<div class="text-gray-500 text-sm mb-1.5 dark:text-white"> <span class="font-semibold text-gray-900 dark:text-white"> |
|
<a class="underline text-blue-500" href="/bid/{{ entry[2].bid_id }}">BID</a> ACCEPTED</span> |
|
<br/> <span class="mt-2 inline-flex text-xs font-small monospace text-center dark:text-gray-300"> |
|
<a href="/bid/{{ entry[2].bid_id }}">{{ entry[2].bid_id|truncate(42, True) }}</a> |
|
</span></div> |
|
<div class="text-xs text-gray-600 bold dark:text-gray-300">{{ entry[0] }}</div> |
|
</div> |
|
</div> |
|
{% else %} |
|
<div class="flex py-3 px-4 hover:bg-gray-100 dark:hover:bg-gray-700"> |
|
<div class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 bg-blue-500 rounded-lg"> |
|
{{ notifications_unknow_event_svg | safe }} |
|
</div> |
|
<div class="pl-3 w-full"> |
|
<div class="text-gray-500 text-sm mb-1.5 dark:text-white"> <span class="font-semibold text-gray-900 dark:text-white"> |
|
UNKNOWN EVENT</span> |
|
<br/> <span class="mt-2 inline-flex text-xs font-small monospace text-center dark:text-gray-300"> |
|
{{ entry[1] }} |
|
<div class="text-xs text-gray-600 bold dark:text-gray-300 dark:text-gray-300">{{ entry[0] }}</div> |
|
</div> |
|
</div> |
|
{% endif %} |
|
{% endfor %} |
|
</div> |
|
</div> |
|
<!-- notifications --> |
|
|
|
<div class="flex mr-2 items-center text-gray-50 hover:text-gray-100 text-sm ml-5"> |
|
<div class="flex-shrink-0 w-px h-10 bg-gray-400 dark:bg-gray-400 ml-4 mr-5"></div> |
|
{% if debug_mode == true %} |
|
<!-- dev mode icons on/off --> |
|
<ul class="xl:flex"> |
|
<li> |
|
<div data-tooltip-target="tooltip-debug" class="ml-5 flex items-center text-gray-50 hover:text-gray-100 text-sm"> |
|
{{ debug_nerd_svg | safe }} |
|
<span data-tooltip-target="tooltip-DEV" ></span> </div> |
|
<div id="tooltip-debug" 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>Debug mode:</b> Active</p> |
|
{% if debug_ui_mode == true %} |
|
<p><b>Debug UI mode:</b> Active</p> |
|
{% endif %} |
|
</div> |
|
</li> |
|
</ul> |
|
<!-- dev mode icons on/off --> |
|
{% endif %} |
|
|
|
{% if encrypted == true %} |
|
<ul class="xl:flex"><li> |
|
{% if locked == true %} |
|
<div data-tooltip-target="tooltip-locked-wallets" class="ml-5 flex items-center text-gray-50 hover:text-gray-100 text-sm"> |
|
{{ wallet_locked_svg | safe }} |
|
<span data-tooltip-target="tooltip-locked-wallets" ></span> </div> |
|
<div id="tooltip-locked-wallets" 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>Wallets:</b> Locked </p> |
|
</div> |
|
{% else %} |
|
<a href='/lock'> |
|
<div data-tooltip-target="tooltip-unlocked-wallets" class="ml-5 flex items-center text-gray-50 hover:text-gray-100 text-sm"> |
|
{{ wallet_unlocked_svg | safe }} |
|
<span data-tooltip-target="tooltip-unlocked-wallets" ></span> </div> |
|
<div class="tooltip-arrow" data-popper-arrow></div> |
|
<div id="tooltip-unlocked-wallets" 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>Wallets:</b> Unlocked </p> |
|
</div> |
|
</a> |
|
{% endif %} |
|
</li></ul> |
|
{% endif %} |
|
{% if use_tor_proxy == true %} |
|
<!-- tor --> |
|
<ul class="xl:flex ml-5"> |
|
<li> |
|
<a href="/tor"> |
|
<div data-tooltip-target="tooltip-tor" class="flex items-center text-gray-50 hover:text-gray-100 text-sm"> |
|
{{ tor_purple_svg | safe }} |
|
</a> <span data-tooltip-target="tooltip-tor"></span></div> |
|
<div id="tooltip-tor" 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"><b>Tor mode:</b> Active |
|
{% if tor_established == true %} |
|
<br><b>Tor:</b> Connected |
|
{% endif %} |
|
</div> |
|
</li> |
|
</ul> |
|
<!-- tor --> |
|
{% endif %} |
|
<button data-tooltip-target="tooltip-darkmode" id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 focus:outline-none rounded-lg text-sm ml-5"> |
|
{{ sun_svg | safe }} |
|
{{ moon_svg | safe }} |
|
<span data-tooltip-target="tooltip-darkmode"></span> |
|
<div id="tooltip-darkmode" 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">Dark mode</div> |
|
</button> |
|
</div> |
|
|
|
<div class="hidden xl:block"></div> |
|
|
|
<!-- mobile menu --> |
|
<div class="ml-auto flex xl:hidden"> |
|
<button class="navbar-burger flex items-center rounded focus:outline-none"> |
|
{{ mobile_menu_svg | safe }} |
|
</button> |
|
</div> |
|
|
|
</div> |
|
<div class="hidden xl:block py-5 px-6 bg-coolGray-100 border-gray-100 dark:border-gray-500 dark:bg-body border-b dark:border-b-2"> |
|
<div class="flex items-center container flex flex-wrap items-center justify-between items-center mx-auto"> |
|
<ul class="flex items-center"> |
|
|
|
<li> |
|
<a class="flex mr-5 items-center text-sm text-gray-400 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-100" href="/active"> |
|
<div id="swapContainer" class="inline-flex center-spin ml-7 mr-2" {% if summary.num_swapping != 0 %}style="animation: spin 2s linear infinite;"{% endif %}> |
|
{% if summary.num_swapping != 0 %} |
|
{{ swap_in_progress_green_svg | safe }} |
|
{% else %} |
|
{{ swap_in_progress_svg | safe }} |
|
{% endif %} |
|
</div> |
|
<span>Swaps in Progress</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 num-swap">{{ summary.num_swapping }}</span> |
|
</a> |
|
</li> |
|
|
|
<div class="flex-shrink-0 w-px h-10 bg-gray-200 dark:bg-gray-400 mr-10"></div> |
|
|
|
<li> |
|
<a data-tooltip-target="tooltip-your-offers" class="flex mr-5 items-center text-sm text-gray-400 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-100" href="/sentoffers"> |
|
{{ your_offers_svg | safe }} |
|
<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> |
|
<div class="tooltip-arrow" data-popper-arrow></div> |
|
</div> |
|
|
|
</li> |
|
<div class="flex-shrink-0 w-px h-10 bg-gray-200 dark:bg-gray-400 mr-10"></div> |
|
<li> |
|
<a class="flex mr-10 items-center text-sm text-gray-400 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-100" href="/availablebids">{{ available_bids_svg | safe }} |
|
<span>Available Bids</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> |
|
<li> |
|
<a data-tooltip-target="tooltip-bids-received" class="flex mr-10 items-center text-sm text-gray-400 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-100" href="/receivedbids"> |
|
{{ bids_received_svg | safe }} |
|
<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_recv_active_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"> |
|
<p><b>Total:</b> {{ summary.num_recv_bids }}</p> |
|
<div class="tooltip-arrow" data-popper-arrow></div> |
|
</div> |
|
<li> |
|
<a data-tooltip-target="tooltip-bids-sent" class="flex mr-10 items-center text-sm text-gray-400 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-100" href="/sentbids"> |
|
{{ bids_sent_svg| safe }} |
|
<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> |
|
</div> |
|
|
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
</nav> |
|
<!-- mobile sidebar TODO/WIP --> |
|
<div class="hidden navbar-menu fixed top-0 left-0 bottom-0 w-3/4 lg:w-80 sm:max-w-xs z-50"> |
|
<div class="navbar-backdrop fixed inset-0 bg-gray-700 dark:bg-gray-600 opacity-10"></div> |
|
<nav class="relative flex flex-col pt-6 pb-8 h-full w-full bg-gray-700 dark:bg-gray-600 overflow-y-auto"> |
|
<div class="flex w-full items-center px-6 pb-6 mb-6 lg:border-b border-gray-700"> |
|
<a class="text-xl text-white font-semibold" href="/"> <img class="h-8" src="/static/images/logos/basicswap-logo.svg" alt="" width="auto"></a> |
|
</div> |
|
<div class="px-4 pb-6"> |
|
<h3 class="mb-2 text-xs uppercase text-gray-300 font-medium dark:text-gray-300">Wallet</h3> |
|
<ul class="mb-8 text-sm font-medium"> |
|
<li> |
|
<a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/wallets"> <span class="inline-block mr-3"> |
|
{{ wallet_svg | safe }} |
|
</span><span>Wallets</span> |
|
<span class="inline-block ml-auto"></span></a> |
|
</li> |
|
</ul> |
|
<h3 class="mb-2 text-xs uppercase text-gray-300 font-medium dark:text-gray-300">Exchange</h3> |
|
<ul class="text-sm font-medium"> |
|
<li> |
|
<a class="flex items-center pl-3 py-3 pr-2 text-gray-50 hover:bg-gray-900 rounded" href="/newoffer"> <span class="inline-block mr-3"> |
|
{{ new_offer_svg | safe }} |
|
</span><span>Place new Offer</span></a> |
|
</li> |
|
<li> |
|
<a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/active"> <span class="inline-block mr-3"> |
|
{{ swap_in_progress_mobile_svg | safe }} |
|
</span><span>Swaps in Progress</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_swapping }}</span></a> |
|
</li> |
|
<li> |
|
<a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/offers"> <span class="inline-block mr-3"> |
|
{{ order_book_svg | safe }} |
|
</span><span>Show Order Book</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_network_offers }}</span></a> |
|
</li> |
|
<li> |
|
<a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="sentoffers"> <span class="inline-block mr-3"> |
|
{{ your_offers_svg | safe }} |
|
</span><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_offers }}</span></a> |
|
</li> |
|
<li> |
|
<a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/availablebids"> <span class="inline-block mr-3"> |
|
{{ available_bids_svg | safe }} |
|
</span><span>Available Bids</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> |
|
<li> |
|
<a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/receivedbids"> <span class="inline-block mr-3"> |
|
{{ bids_received_svg | safe }} |
|
</span><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_recv_bids }}</span></a> |
|
</li> |
|
<li> |
|
<a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/sentbids"> <span class="inline-block mr-3"> |
|
{{ bids_sent_svg | safe }} |
|
</span><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_bids }}</span></a> |
|
</li> |
|
</ul> |
|
<h3 class="mb-2 text-xs uppercase text-gray-300 font-medium dark:text-gray-300 mt-5">Settings</h3> |
|
<ul class="text-sm font-medium"> |
|
<li> |
|
<a class="flex items-center pl-3 py-3 pr-2 text-gray-50 hover:bg-gray-900 rounded" href="/settings"> <span class="inline-block mr-3"> |
|
{{ settings_svg | safe }} |
|
</span><span>Settings</span></a> |
|
</li> |
|
{% if debug_mode == true %} |
|
<li> |
|
<a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/rpc"> <span class="inline-block mr-3"> |
|
{{ rpc_svg | safe }} |
|
</span><span>RPC Console</span></a> |
|
</li> |
|
{% endif %} |
|
{% if debug_mode == true %} |
|
<li> |
|
<a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/debug"> <span class="inline-block mr-3"> |
|
{{ debug_svg | safe }} |
|
</span> <span>Debug</span> </a> |
|
</li> |
|
{% endif %} |
|
{% if debug_mode == true %} |
|
<li> |
|
<a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/explorers"> <span class="inline-block mr-3"> |
|
{{ explorer_svg | safe }} |
|
</span><span>Explorers</span></a> |
|
</li> |
|
{% endif %} |
|
<li> |
|
<a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/smsgaddresses"> <span class="inline-block mr-3"> |
|
{{ smsg_svg | safe }} |
|
</span><span>SMSG Addresses</span></a> |
|
</li> |
|
<li> |
|
<a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/watched"> <span class="inline-block mr-3"> |
|
{{ outputs_svg| safe }} |
|
</span><span>Watched Outputs</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_watched_outputs }}</span></a> |
|
</li> |
|
{% if debug_mode == true %} |
|
<li> |
|
<a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/automation"> <span class="inline-block mr-3"> |
|
{{ automation_svg | safe }} |
|
</span><span>Automation Strategies</span></a> |
|
</li> |
|
{% endif %} |
|
{% if use_tor_proxy == true %} |
|
<li> |
|
<a class="flex items-center pl-3 py-3 pr-2 text-gray-50 hover:bg-gray-900 rounded" href="/tor"> <span class="inline-block mr-3"> |
|
{{ tor_svg | safe }} <!-- change color --> |
|
</span><span>Tor</span></a> |
|
</li> |
|
{% endif %} |
|
</ul> |
|
<div class="pt-8 text-sm font-medium"> |
|
<a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/shutdown/{{ shutdown_token }}"> <span class="inline-block mr-3"> |
|
{{ shutdown_svg | safe }} |
|
</span><span>Shutdown</span></a> |
|
</div> |
|
</div> |
|
</nav> |
|
</div> |
|
<!-- mobile sidebar --> |
|
|
|
</section> |
|
{% if ws_url %} |
|
<script> |
|
var ws = new WebSocket("{{ ws_url }}"), |
|
floating_div = document.createElement('div'); |
|
floating_div.classList.add('floatright'); |
|
messages = document.createElement('ul'); |
|
messages.setAttribute('id', 'ul_updates'); |
|
ws.onmessage = function(event) { |
|
let json = JSON.parse(event.data); |
|
let event_message = 'Unknown event'; |
|
if (json['event'] == 'new_offer') { |
|
event_message = '<div id="hide"><div id="toast-success" class="flex items-center p-4 mb-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow" role="alert"><div class="inline-flex flex-shrink-0 justify-center items-center w-10 h-10 bg-blue-500 rounded-lg"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round"><circle cx="5" cy="5" r="4"></circle> <circle cx="19" cy="19" r="4"></circle> <polyline data-cap="butt" points="13,5 21,5 21,11 " stroke="#ffffff"></polyline> <polyline data-cap="butt" points="11,19 3,19 3,13 " stroke="#ffffff"></polyline> <polyline points=" 16,2 13,5 16,8 " stroke="#ffffff"></polyline> <polyline points=" 8,16 11,19 8,22 " stroke="#ffffff"></polyline></g></svg></div><div class="uppercase w-40 ml-3 text-sm font-semibold text-gray-900">New network <a class="underline" href=/offer/' + json['offer_id'] + '>offer</a></div><button type="button" onclick="closeAlert(event)" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-0 focus:outline-none focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8" data-dismiss="#toast-success" aria-label="Close"><span class="sr-only">Close</span><svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button></div></div>'; |
|
} |
|
else |
|
if (json['event'] == 'new_bid') { |
|
event_message = '<div id="hide"><div id="toast-success" class="flex items-center p-4 mb-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow" role="alert"><div class="inline-flex flex-shrink-0 justify-center items-center w-10 h-10 bg-violet-500 rounded-lg"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round"><rect x="9.843" y="5.379" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -0.7635 13.1569)" width="11.314" height="4.243"></rect> <polyline points="3,23 3,19 15,19 15,23 "></polyline> <line x1="4" y1="15" x2="1" y2="15" stroke="#ffffff"></line> <line x1="5.757" y1="10.757" x2="3.636" y2="8.636" stroke="#ffffff"></line> <line x1="1" y1="23" x2="17" y2="23"></line> <line x1="17" y1="9" x2="23" y2="15"></line></g></svg></div><div class="uppercase w-40 ml-3 text-sm font-normal"><span class="mb-1 text-sm font-semibold text-gray-900"><a class="underline" href=/bid/' + json['bid_id'] + '>New bid</a> on <a class="underline" href=/offer/' + json['offer_id'] + '>offer</a></span></div><button type="button" onclick="closeAlert(event)" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-0 focus:outline-nonefocus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8" data-dismiss="#toast-success" aria-label="Close"><svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button></div></div>'; |
|
} |
|
else |
|
if (json['event'] == 'bid_accepted') { |
|
event_message = '<div id="hide"><div id="toast-success" class="flex items-center p-4 mb-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow" role="alert"><div class="inline-flex flex-shrink-0 justify-center items-center w-10 h-10 bg-violet-500 rounded-lg"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"><g fill="#ffffff"><path d="M8.5,20a1.5,1.5,0,0,1-1.061-.439L.379,12.5,2.5,10.379l6,6,13-13L23.621,5.5,9.561,19.561A1.5,1.5,0,0,1,8.5,20Z" fill="#ffffff"></path></g></svg></div><div class="uppercase w-40 ml-3 text-sm font-semibold text-gray-900"><a class="underline" href=/bid/' + json['bid_id'] + '>Bid</a> accepted</div><button type="button" onclick="closeAlert(event)" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-0 focus:outline-none focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8" data-dismiss="#toast-success" aria-label="Close"><span class="sr-only">Close</span><svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button></div></div>'; |
|
} |
|
let messages = document.getElementById('ul_updates'), |
|
message = document.createElement('li'); |
|
message.innerHTML = event_message; |
|
messages.appendChild(message); |
|
}; |
|
floating_div.appendChild(messages); |
|
document.body.appendChild(floating_div); |
|
function closeAlert(event){ |
|
let element = event.target; |
|
while(element.nodeName !== "BUTTON"){ |
|
element = element.parentNode; |
|
} |
|
element.parentNode.parentNode.removeChild(element.parentNode); |
|
} |
|
</script> |
|
{% endif %}
|
|
|