mirror of
https://github.com/basicswap/basicswap.git
synced 2025-01-03 17:29:26 +00:00
ui: Always select "new address" on offers/bids. Remember last used address.
This commit is contained in:
gerlofvanek
parent
d19a7538fd
commit
790a550e7f
2 changed files with 202 additions and 40 deletions
|
|
@ -407,22 +407,88 @@
|
||||||
<td class="py-3 px-6">Amount you will send <span class="bold" id="bid_amt_to">{{ data.amt_to }}</span> {{ data.tla_to }}
|
<td class="py-3 px-6">Amount you will send <span class="bold" id="bid_amt_to">{{ data.amt_to }}</span> {{ data.tla_to }}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
|
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
|
||||||
<td class="py-3 px-6 bold">Send From Address</td>
|
<td class="py-3 px-6 bold">Send From Address</td>
|
||||||
<td class="py-3 px-6">
|
<td class="py-3 px-6">
|
||||||
<div class="w-full md:flex-1">
|
<div class="w-full md:flex-1">
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
{{ input_arrow_down_svg | safe }}
|
{{ input_arrow_down_svg | safe }}
|
||||||
<select class="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-50 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">
|
<select class="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-50 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 value="-1" {% if data.nb_addr_from=="-1" %} selected{% endif %}>New Address</option>
|
||||||
<option value="{{ a[0] }}" {% if data.nb_addr_from==a[0] %} selected{% endif %}>{{ a[0] }} {{ a[1] }}</option>
|
{% for a in addrs %}
|
||||||
{% endfor %}
|
<option value="{{ a[0] }}" {% if data.nb_addr_from==a[0] %} selected{% endif %}>{{ a[0] }} {{ a[1] }}</option>
|
||||||
<option value="-1" {% if data.nb_addr_from=="-1" %} selected{% endif %}>New Address</option>
|
{% endfor %}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<script>
|
||||||
|
function handleBidsPageAddress() {
|
||||||
|
const selectElement = document.querySelector('select[name="addr_from"]');
|
||||||
|
const STORAGE_KEY = 'lastUsedAddressBids';
|
||||||
|
|
||||||
|
if (!selectElement) return;
|
||||||
|
|
||||||
|
function loadInitialAddress() {
|
||||||
|
const savedAddressJSON = localStorage.getItem(STORAGE_KEY);
|
||||||
|
|
||||||
|
if (savedAddressJSON) {
|
||||||
|
try {
|
||||||
|
const savedAddress = JSON.parse(savedAddressJSON);
|
||||||
|
const optionExists = Array.from(selectElement.options).some(
|
||||||
|
option => option.value === savedAddress.value
|
||||||
|
);
|
||||||
|
|
||||||
|
if (optionExists) {
|
||||||
|
selectElement.value = savedAddress.value;
|
||||||
|
} else {
|
||||||
|
selectFirstAddress();
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
selectFirstAddress();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
selectFirstAddress();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectFirstAddress() {
|
||||||
|
if (selectElement.options.length > 1) {
|
||||||
|
const firstOption = selectElement.options[1];
|
||||||
|
if (firstOption) {
|
||||||
|
selectElement.value = firstOption.value;
|
||||||
|
saveAddress(firstOption.value, firstOption.text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveAddress(value, text) {
|
||||||
|
const addressData = {
|
||||||
|
value: value,
|
||||||
|
text: text
|
||||||
|
};
|
||||||
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(addressData));
|
||||||
|
}
|
||||||
|
|
||||||
|
selectElement.addEventListener('change', (event) => {
|
||||||
|
const selectedValue = event.target.value;
|
||||||
|
const selectedText = event.target.selectedOptions[0].text;
|
||||||
|
|
||||||
|
if (selectedValue !== '-1') {
|
||||||
|
saveAddress(selectedValue, selectedText);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
loadInitialAddress();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.readyState === 'loading') {
|
||||||
|
document.addEventListener('DOMContentLoaded', handleBidsPageAddress);
|
||||||
|
} else {
|
||||||
|
handleBidsPageAddress();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
{% if data.amount_negotiable == true %}
|
{% if data.amount_negotiable == true %}
|
||||||
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
|
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
|
||||||
<td class="py-3 px-6 bold">Amount</td>
|
<td class="py-3 px-6 bold">Amount</td>
|
||||||
|
|
@ -585,12 +651,12 @@ function updateModalValues() {
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
const addrSelect = document.querySelector('select[name="addr_from"]');
|
const addrSelect = document.querySelector('select[name="addr_from"]');
|
||||||
const addrText = addrSelect.options[addrSelect.selectedIndex].text.split(' ')[0];
|
const selectedText = addrSelect.options[addrSelect.selectedIndex].text;
|
||||||
|
const addrText = selectedText === 'New Address' ? selectedText : selectedText.split(' ')[0];
|
||||||
document.getElementById('modal-addr-from').textContent = addrText;
|
document.getElementById('modal-addr-from').textContent = addrText;
|
||||||
|
|
||||||
document.getElementById('modal-valid-mins').textContent = document.querySelector('input[name="validmins"]').value;
|
document.getElementById('modal-valid-mins').textContent = document.querySelector('input[name="validmins"]').value;
|
||||||
}
|
}
|
||||||
|
|
||||||
function showConfirmModal() {
|
function showConfirmModal() {
|
||||||
updateModalValues();
|
updateModalValues();
|
||||||
document.getElementById('confirmModal').classList.remove('hidden');
|
document.getElementById('confirmModal').classList.remove('hidden');
|
||||||
|
|
|
||||||
|
|
@ -94,29 +94,125 @@
|
||||||
</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="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="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="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">
|
<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>
|
<p class="text-sm text-coolGray-800 dark:text-white font-semibold">Select Address</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full md:flex-1 p-3">
|
<div class="w-full md:flex-1 p-3">
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
{{ input_down_arrow_offer_svg | safe }}
|
{{ input_down_arrow_offer_svg | safe }}
|
||||||
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
|
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
|
||||||
{{ select_address_svg | safe }}
|
{{ 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>
|
||||||
|
<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">
|
||||||
|
<option{% if data.addr_from=="-1" %} selected{% endif %} value="-1">New Address</option>
|
||||||
|
{% for a in addrs %}
|
||||||
|
<option{% if data.addr_from==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option>
|
||||||
|
{% endfor %}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
function handleNewOfferAddress() {
|
||||||
|
const selectElement = document.querySelector('select[name="addr_from"]');
|
||||||
|
const STORAGE_KEY = 'lastUsedAddressNewOffer';
|
||||||
|
const form = selectElement?.closest('form');
|
||||||
|
|
||||||
|
if (!selectElement || !form) return;
|
||||||
|
|
||||||
|
function loadInitialAddress() {
|
||||||
|
const savedAddressJSON = localStorage.getItem(STORAGE_KEY);
|
||||||
|
|
||||||
|
if (savedAddressJSON) {
|
||||||
|
try {
|
||||||
|
const savedAddress = JSON.parse(savedAddressJSON);
|
||||||
|
const optionExists = Array.from(selectElement.options).some(
|
||||||
|
option => option.value === savedAddress.value
|
||||||
|
);
|
||||||
|
|
||||||
|
if (optionExists) {
|
||||||
|
selectElement.value = savedAddress.value;
|
||||||
|
} else {
|
||||||
|
selectFirstAddress();
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
selectFirstAddress();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
selectFirstAddress();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectFirstAddress() {
|
||||||
|
if (selectElement.options.length > 1) {
|
||||||
|
const firstOption = selectElement.options[1];
|
||||||
|
if (firstOption) {
|
||||||
|
selectElement.value = firstOption.value;
|
||||||
|
saveAddress(firstOption.value, firstOption.text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveAddress(value, text) {
|
||||||
|
const addressData = {
|
||||||
|
value: value,
|
||||||
|
text: text
|
||||||
|
};
|
||||||
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(addressData));
|
||||||
|
}
|
||||||
|
|
||||||
|
form.addEventListener('submit', async (e) => {
|
||||||
|
if (selectElement.value === '-1') {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
try {
|
||||||
|
const formData = new FormData(form);
|
||||||
|
const response = await fetch(form.action, {
|
||||||
|
method: form.method,
|
||||||
|
body: formData
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
setTimeout(() => {
|
||||||
|
const newAddress = selectElement.options[1];
|
||||||
|
if (newAddress) {
|
||||||
|
selectElement.value = newAddress.value;
|
||||||
|
saveAddress(newAddress.value, newAddress.text);
|
||||||
|
}
|
||||||
|
form.submit();
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error submitting form:', error);
|
||||||
|
form.submit();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
selectElement.addEventListener('change', (event) => {
|
||||||
|
const selectedValue = event.target.value;
|
||||||
|
const selectedText = event.target.selectedOptions[0].text;
|
||||||
|
|
||||||
|
if (selectedValue !== '-1') {
|
||||||
|
saveAddress(selectedValue, selectedText);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
loadInitialAddress();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.readyState === 'loading') {
|
||||||
|
document.addEventListener('DOMContentLoaded', handleNewOfferAddress);
|
||||||
|
} else {
|
||||||
|
handleNewOfferAddress();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<div class="py-0 border-b items-center justify-between -mx-4 mb-6 pb-3 border-gray-400 border-opacity-20">
|
<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="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="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue