Ecosystem/basicswap
1
0
Fork 0
mirror of https://github.com/basicswap/basicswap.git synced 2025-01-03 09:19:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #176 from gerlofvanek/offers-6

Browse source 
ui: Always select "new address" on offers/bids. Remember last used address.
This commit is contained in:
tecnovert 2024-11-28 20:59:34 +00:00 committed by GitHub
commit fdb02d10d6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 202 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

102
basicswap/templates/offer.html
View file

@ -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');

140
basicswap/templates/offer_new_1.html
View file

@ -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">