midefos/basicswap
1
0
Fork 0
mirror of https://github.com/basicswap/basicswap.git synced 2025-11-06 10:48:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

ui: Add swap type.

Browse Source
This commit is contained in:
tecnovert
2022-12-18 16:45:07 +02:00
parent fb5e8ff8b1
commit 2a3d89b112
9 changed files with 223 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
basicswap/templates/offer_new_1.html
View File

@@ -80,7 +80,7 @@
</div>
</div>
</div>
<form method="post" autocomplete="off">
<form method="post" autocomplete="off" id='form'>
<div class="py-6 border-b border-t border-coolGray-100">
<div class="w-full md:w-10/12">
<div class="flex flex-wrap -m-3">
@@ -146,6 +146,39 @@
</div>
</div>
</div>
<div class="py-6 border-b border-coolGray-100">
<div class="w-full md:w-10/12">
<div class="flex flex-wrap -m-3">
<div class="w-full md:w-1/3 p-3">
<p class="text-sm text-coolGray-800 font-semibold">Swap Type</p>
</div>
<div class="w-full md:flex-1 p-3">
<div class="relative">
<svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
</svg>
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
<path data-cap="butt" d="M11.992,11.737,14.2,13.4A2,2,0,0,1,15,15v1H7V15a2,2,0,0,1,.8-1.6l2.208-1.663" stroke="#3b82f6"></path>
<rect x="9" y="7" width="4" height="5" rx="2" ry="2" stroke="#3b82f6"></rect>
<path d="M2,1H18a2,2,0,0,1,2,2V21a2,2,0,0,1-2,2H2Z"></path>
<line x1="23" y1="5" x2="23" y2="9" stroke="#3b82f6"></line>
</g>
</svg>
</div>
<select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" 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-6 border-b border-coolGray-100">
<div class="w-full md:w-10/12">
<div class="flex flex-wrap -m-3">
@@ -267,6 +300,10 @@
</svg>
</div>
<input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="text" id="rate" name="rate" value="{{ data.rate }}" onchange="set_rate('rate');"> </div>
<div class="form-check form-check-inline">
<input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="checkbox" id="rate_lock" name="rate_lock" value="rl" checked=checked>
<label class="cursor-help form-check-label inline-block text-gray-800" for="inlineCheckbox1">Lock Rate</label>
</div>
</div>
</div>
</div>
@@ -280,10 +317,6 @@
<p class="text-sm text-coolGray-800 font-semibold">Options</p>
</div>
<div class="w-full md:flex-1 p-3">
<div class="form-check form-check-inline">
<input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="checkbox" id="rate_lock" name="rate_lock" value="rl" checked=checked>
<label class="cursor-help form-check-label inline-block text-gray-800" for="inlineCheckbox1">Lock Rate</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="checkbox" id="amt_var" name="amt_var" value="av" {% if data.amt_var==true %} checked="checked" {% endif %}>
<label class="form-check-label inline-block text-gray-800" for="inlineCheckbox2">Amount Variable</label>
@@ -438,6 +471,41 @@
xhr_rates_table.send();
}
function set_swap_type_enabled(coin_from, coin_to, swap_type) {
let make_hidden = false;
if (coin_to == '6' /* XMR */ || coin_to == '8' /* PART_ANON */) {
swap_type.disabled = true;
swap_type.value = 'xmr_swap';
make_hidden = true;
} else
if (coin_from == '11' /* PIVX */ || coin_from == '12' /* DASH */ || coin_from == '13' /* FIRO */) {
swap_type.disabled = true;
swap_type.value = 'seller_first';
make_hidden = true;
} else {
swap_type.disabled = false;
}
let swap_type_hidden = document.getElementById('swap_type_hidden');
console.log('make_hidden', make_hidden);
console.log('swap_type_hidden', swap_type_hidden);
console.log('swap_type.value', swap_type.value);
if (make_hidden) {
if (!swap_type_hidden) {
console.log('createElement');
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) {
console.log('remove element');
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;
@@ -445,6 +513,10 @@
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;
}
@@ -454,15 +526,13 @@
return;
}
params += '&rate=' + rate + '&amt_from=' + amt_from;
}
else
} else
if (lock_rate && value_changed == 'amt_to') {
if (amt_to == '' || rate == '') {
return;
}
params += '&amt_to=' + amt_to + '&rate=' + rate;
}
else {
} else {
if (amt_from == '' || amt_to == '') {
return;
}
@@ -472,6 +542,13 @@
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>
<script src="static/js/new_offer.js"></script>
</div>