<!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 %}