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.
502 lines
30 KiB
502 lines
30 KiB
{% include 'header.html' %} {% from 'style.html' import breadcrumb_line_svg, input_down_arrow_offer_svg, select_network_svg, select_address_svg, select_swap_type_svg, select_bid_amount_svg, select_rate_svg, step_one_svg, step_two_svg, step_three_svg %} |
|
<script src="static/js/coin_icons.js"></script> |
|
<div class="container mx-auto"> |
|
<section class="p-5 mt-5"> |
|
<div class="flex flex-wrap items-center -m-2"> |
|
<div class="w-full md:w-1/2 p-2"> |
|
<ul class="flex flex-wrap items-center gap-x-3 mb-2"> |
|
<li><a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/"> |
|
<p>Home</p> |
|
</a> |
|
</li> |
|
<li>{{ breadcrumb_line_svg | safe }}</li> |
|
<li><a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/newoffer">Place</a></li> |
|
<li>{{ breadcrumb_line_svg | safe }}</li> |
|
</ul> |
|
</div> |
|
</div> |
|
</section> |
|
<section class="py-4"> |
|
<div class="container px-4 mx-auto"> |
|
<div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden"> |
|
<img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> |
|
<img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> |
|
<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"> |
|
<h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Place an New Offer</h2> |
|
<p class="font-normal text-coolGray-200 dark:text-white">Place an order on the network order book.</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
{% include 'inc_messages.html' %} |
|
<section> |
|
<div class="p-5 mb-5"> |
|
<div class="mx-4 p-4"> |
|
<div class="flex items-center"> |
|
|
|
<div class="flex items-center text-teal-600 relative"> |
|
<div class="rounded-full h-12 w-12 py-3 border-2 border-blue-500"> |
|
{{ step_one_svg | safe }} |
|
</div> |
|
<div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase dark:text-white text-gray-700">Step 1 - Place</div> |
|
</div> |
|
|
|
<div class="flex-auto border-t-2 border-gray-300 dark:border-gray-400"></div> |
|
|
|
<div class="flex items-center text-teal-600 relative"> |
|
<div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-gray-300 dark:border-gray-400"> |
|
{{ step_two_svg | safe }} |
|
</div> |
|
<div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase dark:text-white text-gray-700">Step 2 - Setup</div> |
|
</div> |
|
|
|
<div class="flex-auto border-t-2 border-gray-300 dark:border-gray-400"></div> |
|
|
|
<div class="flex items-center text-gray-500 relative"> |
|
<div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-gray-300 dark:border-gray-400"> |
|
{{ step_three_svg | safe }} |
|
</div> |
|
<div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase dark:text-white text-gray-700">Confirm</div> |
|
</div> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
<section class="py-3"> |
|
<div class="container px-4 mx-auto"> |
|
<div class="p-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl"> |
|
<div class="flex flex-wrap items-center justify-between -mx-4 pb-6 border-gray-400 border-opacity-20"> </div> |
|
<form method="post" autocomplete="off" id='form'> |
|
<div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-3 border-gray-400 border-opacity-20"> |
|
<div class="w-full md:w-10/12"> |
|
<div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0"> |
|
<div class="w-full md:w-1/3 p-6"> |
|
<p class="text-sm text-coolGray-800 dark:text-white font-semibold">Select Network</p> |
|
</div> |
|
<div class="w-full md:flex-1 p-3"> |
|
<div class="relative"> |
|
{{ input_down_arrow_offer_svg | safe }} |
|
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> |
|
{{ select_network_svg | safe }} |
|
</div> |
|
<select class="pl-10 hover:border-blue-500 pl-10 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-white text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="addr_to"> |
|
<option{% if data.addr_to=="-1" %} selected{% endif %} value="-1">Public Network</option> |
|
{% for a in addrs_to %} |
|
<option{% if data.addr_to==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option> |
|
{% endfor %} |
|
</select> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="py-0 border-b items-center justify-between -mx-4 mb-6 pb-3 border-gray-400 border-opacity-20"> |
|
<div class="w-full md:w-10/12"> |
|
<div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0"> |
|
<div class="w-full md:w-1/3 p-6"> |
|
<p class="text-sm text-coolGray-800 dark:text-white font-semibold">Select Address</p> |
|
</div> |
|
<div class="w-full md:flex-1 p-3"> |
|
<div class="relative"> |
|
{{ input_down_arrow_offer_svg | safe }} |
|
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> |
|
{{ select_address_svg | safe }} |
|
</div> |
|
<select class="hover:border-blue-500 pl-10 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-white text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="addr_from"> |
|
{% for a in addrs %} |
|
<option{% if data.addr_from==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option> |
|
{% endfor %} |
|
<option{% if data.addr_from=="-1" %} selected{% endif %} value="-1">New Address</option> |
|
</select> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="py-0 border-b items-center justify-between -mx-4 mb-6 pb-3 border-gray-400 border-opacity-20"> |
|
<div class="w-full md:w-10/12"> |
|
<div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0"> |
|
<div class="w-full md:w-1/3 p-6"> |
|
<p class="text-sm text-coolGray-800 dark:text-white font-semibold">Swap Type</p> |
|
</div> |
|
<div class="w-full md:flex-1 p-3"> |
|
<div class="relative"> |
|
{{ input_down_arrow_offer_svg | safe }} |
|
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> |
|
{{ select_swap_type_svg | safe }} |
|
</div> |
|
<select class="hover:border-blue-500 bg-gray-50 pl-10 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-white text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="swap_type" id="swap_type"> |
|
{% for a in swap_types %} |
|
<option{% if data.swap_type==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[1] }}</option> |
|
{% endfor %} |
|
</select> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="py-0 border-b items-center justify-between -mx-4 mb-6 pb-3 border-gray-400 border-opacity-20"> |
|
<div class="w-full md:w-10/12"> |
|
<div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0"> |
|
<div class="w-full md:w-1/3 p-6"> |
|
<p class="text-sm text-coolGray-800 dark:text-white font-semibold">You Send</p> |
|
</div> |
|
<div class="w-full md:flex-1 p-3"> |
|
<div class="flex flex-wrap -m-3"> |
|
<div class="w-full md:w-1/2 p-3"> |
|
<p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Select Coin You Send</p> |
|
<div class="custom-select"> |
|
<div class="relative"> |
|
{{ input_down_arrow_offer_svg | safe }} |
|
<select class="select hover:border-blue-500 pl-10 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-5 bold focus:ring-0" id="coin_from" name="coin_from" onchange="set_rate('coin_from');"> |
|
<option value="-1">Select coin you send</option> |
|
{% for c in coins_from %} |
|
<option{% if data.coin_from==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}-20.png">{{ c[1] }}</option> |
|
{% endfor %} |
|
</select> |
|
<div class="select-dropdown"> <img class="select-icon" src="" alt=""> <img class="select-image" src="" alt=""> </div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="w-full md:w-1/2 p-3"> |
|
<p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Amount You Send</p> |
|
<div class="relative"> |
|
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> </div> <input 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-5 focus:ring-0 bold" placeholder="0" type="text" id="amt_from" name="amt_from" value="{{ data.amt_from }}" onchange="set_rate('amt_from');"> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="py-0 border-b items-center justify-between -mx-4 mb-6 pb-3 border-gray-400 border-opacity-20"> |
|
<div class="w-full md:w-10/12"> |
|
<div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0"> |
|
<div class="w-full md:w-1/3 p-6"> |
|
<p class="text-sm text-coolGray-800 dark:text-white font-semibold">You Get</p> |
|
</div> |
|
<div class="w-full md:flex-1 p-3"> |
|
<div class="flex flex-wrap -m-3"> |
|
<div class="w-full md:w-1/2 p-3"> |
|
<p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Select Coin You Get</p> |
|
<div class="custom-select"> |
|
<div class="relative"> |
|
{{ input_down_arrow_offer_svg | safe }} |
|
<select class="select hover:border-blue-500 pl-10 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-5 bold focus:ring-0" id="coin_to" name="coin_to" onchange="set_rate('coin_to');"> |
|
<option value="-1">Select coin you get</option> |
|
{% for c in coins %} |
|
<option{% if data.coin_to==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}-20.png">{{ c[1] }}</option> |
|
{% endfor %} |
|
</select> |
|
<div class="select-dropdown"> <img class="select-icon" src="" alt=""> <img class="select-image" src="" alt=""> </div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="w-full md:w-1/2 p-3"> |
|
<p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Amount You Get</p> |
|
<div class="relative"> |
|
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> </div> <input 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-5 focus:ring-0 bold" placeholder="0" type="text" id="amt_to" name="amt_to" value="{{ data.amt_to }}" onchange="set_rate('amt_to');"> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="py-0 border-b items-center justify-between -mx-4 mb-6 pb-3 border-gray-400 border-opacity-20"> |
|
<div class="w-full md:w-10/12"> |
|
<div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0"> |
|
<div class="w-full md:w-1/3 p-6"> |
|
<p class="text-sm text-coolGray-800 dark:text-white font-semibold">Bid Amount</p> |
|
</div> |
|
<div class="w-full md:flex-1 p-3"> |
|
<div class="flex flex-wrap -m-3"> |
|
<div class="w-full md:w-1/2 p-3"> |
|
<p class="mb-1.5 font-medium text-base dark:text-white text-coolGray-800">Minimum Bid Amount</p> |
|
<div class="relative"> |
|
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> |
|
{{ select_bid_amount_svg | safe }} |
|
</div> |
|
<input class="pl-10 hover:border-blue-500 pl-10 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-white text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" type="text" id="amt_bid_min" name="amt_bid_min" value="{{ data.amt_bid_min }}" title="Bids with an amount below the minimum bid value will be discarded"> |
|
</div> |
|
</div> |
|
<div class="w-full md:w-1/2 p-3"> |
|
<p class="mb-1.5 font-medium text-base dark:text-white text-coolGray-800">Rate</p> |
|
<div class="relative"> |
|
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> |
|
{{ select_rate_svg | safe }} |
|
</div> |
|
<input class="pl-10 hover:border-blue-500 pl-10 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-white text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" type="text" id="rate" name="rate" value="{{ data.rate }}" onchange="set_rate('rate');"> |
|
</div> |
|
<div class="text-sm mt-2"> |
|
<a href="" id="get_rate_inferred_button" class="mt-2 dark:text-white bold text-coolGray-800">Get Rate Inferred:</a><span class="dark:text-white" id="rate_inferred_display"></span> |
|
</div> |
|
<div class="flex form-check form-check-inline mt-5"> |
|
<div class="flex items-center h-5"> <input class="form-check-input hover:border-blue-500 w-5 h-5 form-check-input text-blue-600 bg-gray-50 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-1 dark:bg-gray-500 dark:border-gray-400" type="checkbox" id="rate_lock" name="rate_lock" value="rl" checked=checked> </div> |
|
<div class="ml-2 text-sm"> |
|
<label class="form-check-label text-sm font-medium text-gray-800 dark:text-white" for="inlineCheckbox1">Lock Rate</label> |
|
<p id="helper-checkbox-text" class="text-xs font-normal text-gray-500 dark:text-gray-300">Automatically adjusts the <b>You Get</b> value based on the rate you’ve entered. Without it, the rate value is automatically adjusted based on the number of coins you put in <b>You Get.</b></p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="py-0 border-b items-center justify-between -mx-4 mb-6 pb-3 border-gray-400 border-opacity-20"> |
|
<div class="w-full md:w-10/12"> |
|
<div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0"> |
|
<div class="w-full md:w-1/3 p-6"> |
|
<p class="text-sm text-coolGray-800 dark:text-white font-semibold">Options</p> |
|
</div> |
|
<div class="w-full md:flex-1 p-3"> |
|
<div class="flex form-check form-check-inline"> |
|
<div class="flex items-center h-5"> <input class="hover:border-blue-500 w-5 h-5 form-check-input text-blue-600 bg-gray-50 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-1 dark:bg-gray-500 dark:border-gray-400" type="checkbox" id="amt_var" name="amt_var" value="av" {% if data.amt_var==true %} checked="checked" {% endif %}> </div> |
|
<div class="ml-2 text-sm"> |
|
<label class="form-check-label text-sm font-medium text-gray-800 dark:text-white" for="inlineCheckbox2">Amount Variable</label> |
|
<p id="helper-checkbox-text" class="text-xs font-normal text-gray-500 dark:text-gray-300">Allow bids with a different amount to the offer.</p> |
|
</div> |
|
</div> |
|
<div class="flex mt-2 form-check form-check-inline"> |
|
<div class="flex items-center h-5"> <input class="hover:border-blue-500 w-5 h-5 form-check-input text-blue-600 bg-gray-50 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-1 dark:bg-gray-500 dark:border-gray-400" type="checkbox" id="rate_var" name="rate_var" value="rv" {% if data.rate_var==true %} checked="checked" {% endif %}> </div> |
|
<div class="ml-2 text-sm"> |
|
<label class="form-check-label text-sm font-medium text-gray-800 dark:text-white" for="inlineCheckbox3">Rate Variable</label> |
|
<p id="helper-checkbox-text" class="text-xs font-normal text-gray-500 dark:text-gray-300">Allow bids with a different rate to the offer.</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="pricejsonhidden hidden py-3 border-b items-center justify-between -mx-4 mb-6 pb-3 border-gray-400 border-opacity-20"> |
|
<div class="w-full md:w-10/12"> |
|
<div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0"> |
|
<div class="w-full md:w-1/3 p-6"> |
|
<p class="text-sm text-coolGray-800 dark:text-white font-semibold">Coin Prices/Rates (JSON)</p> |
|
</div> |
|
<div class="w-full md:flex-1 p-3 dark:text-white text-sm monospace"> |
|
<p id="rates_display"></p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
<section> |
|
<div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden"> |
|
<div class="pb-6 border-coolGray-100"> |
|
<div class="flex flex-wrap items-center justify-between -m-2"> |
|
<div class="w-full pt-2"> |
|
<div class="container mt-5 mx-auto"> |
|
<div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl"> |
|
<div class="px-6"> |
|
<div class="flex flex-wrap justify-end"> |
|
<div class="w-full md:w-auto p-1.5"> |
|
<button name="check_rates" type="button" value="Check Current Prices/Rates (JSON)" onclick='lookup_rates();' 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 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"> |
|
<span>Check Current Prices/Rates (JSON)</span> |
|
</button> |
|
</div> |
|
<div class="w-full md:w-auto p-1.5"> |
|
<button name="continue" value="Continue" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> |
|
<span>Continue</span> |
|
</button> |
|
</div> |
|
<input type="hidden" name="formid" value="{{ form_id }}"> |
|
<input type="hidden" name="step1" value="a"> |
|
</form> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
<script> |
|
const xhr_rates = new XMLHttpRequest(); |
|
xhr_rates.onload = () => { |
|
if (xhr_rates.status == 200) { |
|
const obj = JSON.parse(xhr_rates.response); |
|
inner_html = '<pre><code>' + JSON.stringify(obj, null, ' ') + '</code></pre>'; |
|
document.getElementById('rates_display').innerHTML = inner_html; |
|
} |
|
} |
|
const xhr_rate = new XMLHttpRequest(); |
|
xhr_rate.onload = () => { |
|
if (xhr_rate.status == 200) { |
|
const obj = JSON.parse(xhr_rate.response); |
|
if (obj.hasOwnProperty('rate')) { |
|
document.getElementById('rate').value = obj['rate']; |
|
} else |
|
if (obj.hasOwnProperty('amount_to')) { |
|
document.getElementById('amt_to').value = obj['amount_to']; |
|
} else |
|
if (obj.hasOwnProperty('amount_from')) { |
|
document.getElementById('amt_from').value = obj['amount_from']; |
|
} |
|
} |
|
} |
|
|
|
function lookup_rates() { |
|
const coin_from = document.getElementById('coin_from').value; |
|
const coin_to = document.getElementById('coin_to').value; |
|
|
|
if (coin_from === '-1' || coin_to === '-1') { |
|
alert('Coins from and to must be set first.'); |
|
return; |
|
} |
|
|
|
const selectedCoin = (coin_from === '15') ? '3' : coin_from; |
|
|
|
inner_html = '<p>Updating...</p>'; |
|
document.getElementById('rates_display').innerHTML = inner_html; |
|
document.querySelector(".pricejsonhidden").classList.remove("hidden"); |
|
|
|
const xhr_rates = new XMLHttpRequest(); |
|
xhr_rates.onreadystatechange = function() { |
|
if (xhr_rates.readyState === XMLHttpRequest.DONE) { |
|
if (xhr_rates.status === 200) { |
|
document.getElementById('rates_display').innerHTML = xhr_rates.responseText; |
|
} else { |
|
console.error('Error fetching data:', xhr_rates.statusText); |
|
} |
|
} |
|
}; |
|
|
|
xhr_rates.open('POST', '/json/rates'); |
|
xhr_rates.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); |
|
xhr_rates.send('coin_from=' + selectedCoin + '&coin_to=' + coin_to); |
|
} |
|
|
|
function getRateInferred(event) { |
|
event.preventDefault(); // Prevent default form submission behavior |
|
|
|
const coin_from = document.getElementById('coin_from').value; |
|
const coin_to = document.getElementById('coin_to').value; |
|
const params = 'coin_from=' + encodeURIComponent(coin_from) + '&coin_to=' + encodeURIComponent(coin_to); |
|
|
|
const xhr_rates = new XMLHttpRequest(); |
|
xhr_rates.onreadystatechange = function() { |
|
if (xhr_rates.readyState === XMLHttpRequest.DONE) { |
|
//console.log(xhr_rates.responseText); |
|
if (xhr_rates.status === 200) { |
|
try { |
|
const responseData = JSON.parse(xhr_rates.responseText); |
|
const rateInferred = responseData.coingecko.rate_inferred; |
|
//document.getElementById('rate_inferred_display').innerText = " (" + coin_from + " to " + coin_to + "): " + rateInferred; |
|
document.getElementById('rate_inferred_display').innerText = " " + rateInferred; |
|
} catch (error) { |
|
console.error('Error parsing response:', error); |
|
} |
|
} else { |
|
console.error('Error fetching data:', xhr_rates.statusText); |
|
} |
|
} |
|
}; |
|
|
|
xhr_rates.open('POST', '/json/rates'); |
|
xhr_rates.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); |
|
xhr_rates.send(params); |
|
} |
|
|
|
document.getElementById('get_rate_inferred_button').addEventListener('click', getRateInferred); |
|
|
|
function set_swap_type_enabled(coin_from, coin_to, swap_type) { |
|
const adaptor_sig_only_coins = ['6' /* XMR */, '8' /* PART_ANON */, '7' /* PART_BLIND */, '13' /* FIRO */]; |
|
const secret_hash_only_coins = ['11' /* PIVX */, '12' /* DASH */]; |
|
let make_hidden = false; |
|
if (adaptor_sig_only_coins.includes(coin_from) || adaptor_sig_only_coins.includes(coin_to)) { |
|
swap_type.disabled = true; |
|
swap_type.value = 'xmr_swap'; |
|
make_hidden = true; |
|
swap_type.classList.add('select-disabled'); |
|
} else |
|
if (secret_hash_only_coins.includes(coin_from) && secret_hash_only_coins.includes(coin_to)) { |
|
swap_type.disabled = true; |
|
swap_type.value = 'seller_first'; |
|
make_hidden = true; |
|
swap_type.classList.add('select-disabled'); |
|
} else { |
|
swap_type.disabled = false; |
|
swap_type.classList.remove('select-disabled'); |
|
} |
|
let swap_type_hidden = document.getElementById('swap_type_hidden'); |
|
if (make_hidden) { |
|
if (!swap_type_hidden) { |
|
swap_type_hidden = document.createElement('input'); |
|
swap_type_hidden.setAttribute('id', 'swap_type_hidden'); |
|
swap_type_hidden.setAttribute('type', 'hidden'); |
|
swap_type_hidden.setAttribute('name', 'swap_type'); |
|
document.getElementById('form').appendChild(swap_type_hidden) |
|
} |
|
swap_type_hidden.setAttribute('value', swap_type.value); |
|
} else |
|
if (swap_type_hidden) { |
|
swap_type_hidden.parentNode.removeChild(swap_type_hidden); |
|
} |
|
} |
|
|
|
function set_rate(value_changed) { |
|
const coin_from = document.getElementById('coin_from').value; |
|
const coin_to = document.getElementById('coin_to').value; |
|
const amt_from = document.getElementById('amt_from').value; |
|
const amt_to = document.getElementById('amt_to').value; |
|
const rate = document.getElementById('rate').value; |
|
const lock_rate = rate == '' ? false : document.getElementById('rate_lock').checked; |
|
|
|
const swap_type = document.getElementById('swap_type'); |
|
set_swap_type_enabled(coin_from, coin_to, swap_type); |
|
|
|
if (coin_from == '-1' || coin_to == '-1') { |
|
return; |
|
} |
|
params = 'coin_from=' + coin_from + '&coin_to=' + coin_to; |
|
if (value_changed == 'rate' || (lock_rate && value_changed == 'amt_from') || (amt_to == '' && value_changed == 'amt_from')) { |
|
if (rate == '' || (amt_from == '' && amt_to == '')) { |
|
return; |
|
} else |
|
if (amt_from == '' && amt_to != '') { |
|
if (value_changed == 'amt_from') { // Don't try and set a value just cleared |
|
return; |
|
} |
|
params += '&rate=' + rate + '&amt_to=' + amt_to; |
|
} else { |
|
params += '&rate=' + rate + '&amt_from=' + amt_from; |
|
} |
|
} else |
|
if (lock_rate && value_changed == 'amt_to') { |
|
if (amt_to == '' || rate == '') { |
|
return; |
|
} |
|
params += '&amt_to=' + amt_to + '&rate=' + rate; |
|
} else { |
|
if (amt_from == '' || amt_to == '') { |
|
return; |
|
} |
|
params += '&amt_from=' + amt_from + '&amt_to=' + amt_to; |
|
} |
|
xhr_rate.open('POST', '/json/rate'); |
|
xhr_rate.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); |
|
xhr_rate.send(params); |
|
} |
|
|
|
document.addEventListener("DOMContentLoaded", function() { |
|
const coin_from = document.getElementById('coin_from').value; |
|
const coin_to = document.getElementById('coin_to').value; |
|
const swap_type = document.getElementById('swap_type'); |
|
set_swap_type_enabled(coin_from, coin_to, swap_type); |
|
}); |
|
</script> |
|
</div> |
|
<script src="static/js/new_offer.js"></script> |
|
{% include 'footer.html' %} |
|
</div> |
|
</body> |
|
</html>
|
|
|