mirror of
https://github.com/basicswap/basicswap.git
synced 2024-12-23 03:49:25 +00:00
ui: Add modal for confirm send bid.
This commit is contained in:
parent
31ead537c9
commit
68b066a2d1
2 changed files with 185 additions and 6 deletions
|
@ -306,7 +306,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<form method="post">
|
<form id="bidForm" action="/offer/{{ offer_id }}" method="post">
|
||||||
</section>
|
</section>
|
||||||
{% if data.show_edit_form %}
|
{% if data.show_edit_form %}
|
||||||
<section class="p-6 bg-body dark:bg-gray-700">
|
<section class="p-6 bg-body dark:bg-gray-700">
|
||||||
|
@ -469,6 +469,7 @@
|
||||||
<div class="w-full md:w-0/12">
|
<div class="w-full md:w-0/12">
|
||||||
<div class="flex flex-wrap justify-end pt-6 pr-6 border-t border-gray-100 dark:border-gray-400">
|
<div class="flex flex-wrap justify-end pt-6 pr-6 border-t border-gray-100 dark:border-gray-400">
|
||||||
<div class="w-full md:w-auto p-1.5 ml-2">
|
<div class="w-full md:w-auto p-1.5 ml-2">
|
||||||
|
<input type="hidden" name="confirm" value="true">
|
||||||
<button name="sendbid" value="Send Bid" 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">Send Bid</button>
|
<button name="sendbid" value="Send Bid" 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">Send Bid</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full md:w-auto p-1.5">
|
<div class="w-full md:w-auto p-1.5">
|
||||||
|
@ -485,6 +486,172 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<div id="confirmModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
|
||||||
|
<div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity duration-300 ease-out"></div>
|
||||||
|
|
||||||
|
<div class="relative z-50 min-h-screen px-4 flex items-center justify-center">
|
||||||
|
<div class="bg-white dark:bg-gray-500 rounded-lg max-w-2xl w-full p-6 shadow-lg transition-opacity duration-300 ease-out">
|
||||||
|
<div class="text-center">
|
||||||
|
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-6">Confirm Bid</h2>
|
||||||
|
|
||||||
|
<div class="space-y-4 text-left mb-8">
|
||||||
|
<div class="bg-gray-50 dark:bg-gray-600 rounded-lg p-4">
|
||||||
|
<div class="text-sm text-gray-600 dark:text-gray-400 mb-1">Amount you will get:</div>
|
||||||
|
<div class="font-medium text-gray-900 dark:text-white text-lg">
|
||||||
|
<span id="modal-amt-receive"></span>
|
||||||
|
<span id="modal-receive-currency"></span>
|
||||||
|
<div class="text-sm text-gray-500 dark:text-gray-400 mt-1" id="modal-fee-info"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-gray-50 dark:bg-gray-600 rounded-lg p-4">
|
||||||
|
<div class="text-sm text-gray-600 dark:text-gray-400 mb-1">Amount you will send:</div>
|
||||||
|
<div class="font-medium text-gray-900 dark:text-white text-lg">
|
||||||
|
<span id="modal-amt-send"></span>
|
||||||
|
<span id="modal-send-currency"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-gray-50 dark:bg-gray-600 rounded-lg p-4">
|
||||||
|
<div class="text-sm text-gray-600 dark:text-gray-400 mb-1">Send From Address:</div>
|
||||||
|
<div class="font-mono text-sm p-2 bg-white dark:bg-gray-500 rounded border border-gray-300 dark:border-gray-400 overflow-x-auto text-gray-900 dark:text-white">
|
||||||
|
<span id="modal-addr-from"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-gray-50 dark:bg-gray-600 rounded-lg p-4">
|
||||||
|
<div class="text-sm text-gray-600 dark:text-gray-400 mb-1">Minutes valid:</div>
|
||||||
|
<div class="font-medium text-gray-900 dark:text-white text-lg" id="modal-valid-mins"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-center gap-4">
|
||||||
|
<button type="submit" name="sendbid" value="confirm"
|
||||||
|
class="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">
|
||||||
|
Confirm
|
||||||
|
</button>
|
||||||
|
<button type="button" onclick="hideConfirmModal()"
|
||||||
|
class="px-4 py-2.5 font-medium text-sm text-white hover:text-red border border-red-500 hover:border-red-500 hover:bg-red-600 bg-red-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function updateBidParams(value_changed) {
|
||||||
|
const coin_from = document.getElementById('coin_from').value;
|
||||||
|
const coin_to = document.getElementById('coin_to').value;
|
||||||
|
const amt_var = document.getElementById('amt_var').value;
|
||||||
|
const rate_var = document.getElementById('rate_var').value;
|
||||||
|
|
||||||
|
let amt_from = '';
|
||||||
|
let rate = '';
|
||||||
|
|
||||||
|
if (amt_var == 'True') {
|
||||||
|
amt_from = document.getElementById('bid_amount').value;
|
||||||
|
} else {
|
||||||
|
amt_from = document.getElementById('amount_from').value;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (rate_var == 'True') {
|
||||||
|
rate = document.getElementById('bid_rate').value;
|
||||||
|
} else {
|
||||||
|
rate = document.getElementById('offer_rate').value;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (value_changed == 'amount') {
|
||||||
|
document.getElementById('bid_amt_from').innerHTML = amt_from;
|
||||||
|
}
|
||||||
|
|
||||||
|
xhr_bid_params.open('POST', '/json/rate');
|
||||||
|
xhr_bid_params.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
||||||
|
xhr_bid_params.send('coin_from=' + coin_from + '&coin_to=' + coin_to + '&rate=' + rate + '&amt_from=' + amt_from);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateModalValues() {
|
||||||
|
document.getElementById('modal-amt-receive').textContent = document.getElementById('bid_amt_from').textContent;
|
||||||
|
document.getElementById('modal-amt-send').textContent = document.getElementById('bid_amt_to').textContent;
|
||||||
|
document.getElementById('modal-receive-currency').textContent = '{{ data.tla_from }}';
|
||||||
|
document.getElementById('modal-send-currency').textContent = '{{ data.tla_to }}';
|
||||||
|
|
||||||
|
{% if data.xmr_type == true %}
|
||||||
|
document.getElementById('modal-fee-info').textContent = `(excluding estimated {{ data.amt_from_lock_spend_tx_fee }} {{ data.tla_from }} in tx fees)`;
|
||||||
|
{% else %}
|
||||||
|
document.getElementById('modal-fee-info').textContent = '(excluding a tx fee)';
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
const addrSelect = document.querySelector('select[name="addr_from"]');
|
||||||
|
const addrText = addrSelect.options[addrSelect.selectedIndex].text.split(' ')[0];
|
||||||
|
document.getElementById('modal-addr-from').textContent = addrText;
|
||||||
|
|
||||||
|
document.getElementById('modal-valid-mins').textContent = document.querySelector('input[name="validmins"]').value;
|
||||||
|
}
|
||||||
|
|
||||||
|
function showConfirmModal() {
|
||||||
|
updateModalValues();
|
||||||
|
document.getElementById('confirmModal').classList.remove('hidden');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideConfirmModal() {
|
||||||
|
document.getElementById('confirmModal').classList.add('hidden');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleCancelClick(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
window.location.href = `/offer/${window.location.pathname.split('/')[2]}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
const sendBidBtn = document.querySelector('button[name="sendbid"][value="Send Bid"]');
|
||||||
|
if (sendBidBtn) {
|
||||||
|
sendBidBtn.onclick = showConfirmModal;
|
||||||
|
}
|
||||||
|
|
||||||
|
const modalCancelBtn = document.querySelector('#confirmModal .flex button:last-child');
|
||||||
|
if (modalCancelBtn) {
|
||||||
|
modalCancelBtn.onclick = hideConfirmModal;
|
||||||
|
}
|
||||||
|
|
||||||
|
const mainCancelBtn = document.querySelector('button[name="cancel"]');
|
||||||
|
if (mainCancelBtn) {
|
||||||
|
mainCancelBtn.onclick = handleCancelClick;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Input change listeners
|
||||||
|
const validMinsInput = document.querySelector('input[name="validmins"]');
|
||||||
|
if (validMinsInput) {
|
||||||
|
validMinsInput.addEventListener('input', updateModalValues);
|
||||||
|
}
|
||||||
|
|
||||||
|
const addrFromSelect = document.querySelector('select[name="addr_from"]');
|
||||||
|
if (addrFromSelect) {
|
||||||
|
addrFromSelect.addEventListener('change', updateModalValues);
|
||||||
|
}
|
||||||
|
|
||||||
|
const bidAmountInput = document.getElementById('bid_amount');
|
||||||
|
if (bidAmountInput) {
|
||||||
|
bidAmountInput.addEventListener('change', () => {
|
||||||
|
updateBidParams('amount');
|
||||||
|
updateModalValues();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const bidRateInput = document.getElementById('bid_rate');
|
||||||
|
if (bidRateInput) {
|
||||||
|
bidRateInput.addEventListener('change', () => {
|
||||||
|
updateBidParams('rate');
|
||||||
|
updateModalValues();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
{% else %}
|
{% else %}
|
||||||
<section>
|
<section>
|
||||||
<div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden">
|
<div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden">
|
||||||
|
@ -530,6 +697,9 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
|
<input type="hidden" name="sendbid" value="true">
|
||||||
|
<input type="hidden" name="confirm" value="true">
|
||||||
<input type="hidden" id="coin_from" value="{{ data.coin_from_ind }}">
|
<input type="hidden" id="coin_from" value="{{ data.coin_from_ind }}">
|
||||||
<input type="hidden" id="coin_to" value="{{ data.coin_to_ind }}">
|
<input type="hidden" id="coin_to" value="{{ data.coin_to_ind }}">
|
||||||
<input type="hidden" id="amt_var" value="{{ data.amount_negotiable }}">
|
<input type="hidden" id="amt_var" value="{{ data.amount_negotiable }}">
|
||||||
|
|
|
@ -160,10 +160,16 @@ def parseOfferFormData(swap_client, form_data, page_data, options={}):
|
||||||
(parsed_data["amt_from"] * parsed_data["rate"]) // ci_from.COIN()
|
(parsed_data["amt_from"] * parsed_data["rate"]) // ci_from.COIN()
|
||||||
)
|
)
|
||||||
|
|
||||||
|
if swap_client.debug:
|
||||||
page_data["amt_var"] = True if have_data_entry(form_data, "amt_var") else False
|
page_data["amt_var"] = True if have_data_entry(form_data, "amt_var") else False
|
||||||
parsed_data["amt_var"] = page_data["amt_var"]
|
parsed_data["amt_var"] = page_data["amt_var"]
|
||||||
page_data["rate_var"] = True if have_data_entry(form_data, "rate_var") else False
|
page_data["rate_var"] = True if have_data_entry(form_data, "rate_var") else False
|
||||||
parsed_data["rate_var"] = page_data["rate_var"]
|
parsed_data["rate_var"] = page_data["rate_var"]
|
||||||
|
else:
|
||||||
|
page_data["amt_var"] = True
|
||||||
|
page_data["rate_var"] = False
|
||||||
|
parsed_data["amt_var"] = True
|
||||||
|
parsed_data["rate_var"] = False
|
||||||
|
|
||||||
page_data["automation_strat_id"] = int(
|
page_data["automation_strat_id"] = int(
|
||||||
get_data_entry_or(form_data, "automation_strat_id", -1)
|
get_data_entry_or(form_data, "automation_strat_id", -1)
|
||||||
|
@ -628,7 +634,7 @@ def page_offer(self, url_split, post_string):
|
||||||
swap_client.editOffer(offer_id, change_data)
|
swap_client.editOffer(offer_id, change_data)
|
||||||
elif b"newbid" in form_data:
|
elif b"newbid" in form_data:
|
||||||
show_bid_form = True
|
show_bid_form = True
|
||||||
elif b"sendbid" in form_data:
|
elif b"sendbid" in form_data and b"confirm" in form_data and b"formid" in form_data:
|
||||||
try:
|
try:
|
||||||
addr_from = form_data[b"addr_from"][0].decode("utf-8")
|
addr_from = form_data[b"addr_from"][0].decode("utf-8")
|
||||||
extend_data["nb_addr_from"] = addr_from
|
extend_data["nb_addr_from"] = addr_from
|
||||||
|
@ -672,6 +678,8 @@ def page_offer(self, url_split, post_string):
|
||||||
self.server.swap_client.log.error(traceback.format_exc())
|
self.server.swap_client.log.error(traceback.format_exc())
|
||||||
err_messages.append("Send bid failed: " + str(ex))
|
err_messages.append("Send bid failed: " + str(ex))
|
||||||
show_bid_form = True
|
show_bid_form = True
|
||||||
|
elif b"sendbid" in form_data:
|
||||||
|
show_bid_form = True
|
||||||
|
|
||||||
amount_to: int = offer.amount_to
|
amount_to: int = offer.amount_to
|
||||||
if amount_to is None:
|
if amount_to is None:
|
||||||
|
@ -711,6 +719,7 @@ def page_offer(self, url_split, post_string):
|
||||||
"active_ind": offer.active_ind,
|
"active_ind": offer.active_ind,
|
||||||
"swap_type": strSwapDesc(offer.swap_type),
|
"swap_type": strSwapDesc(offer.swap_type),
|
||||||
"reverse": reverse_bid,
|
"reverse": reverse_bid,
|
||||||
|
"form_id": get_data_entry_or(form_data, "formid", "") if form_data else ""
|
||||||
}
|
}
|
||||||
data.update(extend_data)
|
data.update(extend_data)
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue