Ecosystem/basicswap
1
0
Fork 0
mirror of https://github.com/basicswap/basicswap.git synced 2024-12-22 19:49:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ui: Add modal for confirm send bid.

Browse source
This commit is contained in:
gerlofvanek 2024-11-28 17:16:48 +01:00
parent 31ead537c9
commit 68b066a2d1
2 changed files with 185 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

172
basicswap/templates/offer.html
View file

@ -306,7 +306,7 @@
</div>
</div>
</div>
<form method="post">
<form id="bidForm" action="/offer/{{ offer_id }}" method="post">
</section>
{% if data.show_edit_form %}
<section class="p-6 bg-body dark:bg-gray-700">
@ -469,6 +469,7 @@
<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="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>
</div>
<div class="w-full md:w-auto p-1.5">
@ -485,6 +486,172 @@
</div>
</div>
</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 %}
<section>
<div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden">
@ -530,6 +697,9 @@
</div>
</section>
{% 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_to" value="{{ data.coin_to_ind }}">
<input type="hidden" id="amt_var" value="{{ data.amount_negotiable }}">

11
basicswap/ui/page_offers.py
View file

@ -160,10 +160,16 @@ def parseOfferFormData(swap_client, form_data, page_data, options={}):
(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
parsed_data["amt_var"] = page_data["amt_var"]
page_data["rate_var"] = True if have_data_entry(form_data, "rate_var") else False
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(
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)
elif b"newbid" in form_data:
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:
addr_from = form_data[b"addr_from"][0].decode("utf-8")
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())
err_messages.append("Send bid failed: " + str(ex))
show_bid_form = True
elif b"sendbid" in form_data:
show_bid_form = True
amount_to: int = offer.amount_to
if amount_to is None:
@ -711,6 +719,7 @@ def page_offer(self, url_split, post_string):
"active_ind": offer.active_ind,
"swap_type": strSwapDesc(offer.swap_type),
"reverse": reverse_bid,
"form_id": get_data_entry_or(form_data, "formid", "") if form_data else ""
}
data.update(extend_data)