From 0823c90faa049589829fcb7312028f6251ad9bbe Mon Sep 17 00:00:00 2001 From: lassejaco Date: Mon, 2 Oct 2023 17:25:47 +0200 Subject: [PATCH 1/2] currency/network selector frontend --- .../static/pretix_eth/eth_payment_form.js | 107 ++++++++++++++++-- 1 file changed, 98 insertions(+), 9 deletions(-) diff --git a/pretix_eth/static/pretix_eth/eth_payment_form.js b/pretix_eth/static/pretix_eth/eth_payment_form.js index 5b3c0a77..7b5352fc 100644 --- a/pretix_eth/static/pretix_eth/eth_payment_form.js +++ b/pretix_eth/static/pretix_eth/eth_payment_form.js @@ -1,9 +1,98 @@ -$(document).ready(function(){ - // TODO: - // * generate token list in the first Select dynamically based on the main Select (there might be more than just ETH and DAI) - // * based on selected token (eg.: ETH or DAI) dynamically filter options in the main Select - // * change the description in the main Select from "Choose Network and Token" to just "Choose Network" (in this code - via JS) - // * style the two Select fields to sit next to each other: left and right - var currency_select = ""; - $("#id_payment_ethereum-currency_type").before(currency_select); -}); +$(document).ready(function () { + $("#id_payment_ethereum-currency_type")[0].style = 'display: inline-block; margin-left: 8px; width: auto; cursor: pointer;' + + // Get currencies and their networks from the hidden select + const extractCurrenciesAndNetworks = () => { + // Initialize an empty array to store the result + const currenciesAndNetworks = []; + + // Loop through each option in the select element + $("#id_payment_ethereum-currency_type option").each(function () { + // Get the value of the option + const optionValue = $(this).val(); + + // Check if the option is not empty and contains "-" as separator + if (optionValue !== "" && optionValue.includes(" - ")) { + // Split the option value into currency and network + const parts = optionValue.split(" - "); + + // Extract currency and network + const currency = parts[0]; // Currency + const network = parts[1]; // Network + + // Find the entry in currenciesAndNetworks array for the currency + let currencyEntry = currenciesAndNetworks.find(function (entry) { + return entry.currency === currency; + }); + + // If the currency entry doesn't exist, create it + if (!currencyEntry) { + currencyEntry = { currency: currency, networks: [] }; + currenciesAndNetworks.push(currencyEntry); + } + + // Add the network to the networks array + currencyEntry.networks.push(network); + } + }); + + return currenciesAndNetworks; + } + + // Filters down the main select to only have the networks available for the given currency + const syncMainSelectOptions = (selectedCurrency, value) => { + const { currency, networks } = selectedCurrency; + + const mainSelect = $('#id_payment_ethereum-currency_type'); + + // Clear options + mainSelect.empty(); + + networks.forEach(function (network) { + const reconstructedSelectValue = `${currency} - ${network}`; + + mainSelect.append($('').attr('value', reconstructedSelectValue).text(network)); + }); + + const forcedValue = value || `${currency} - ${networks[0]}`; + + mainSelect.val(forcedValue); + } + + const createCustomSelects = (networksByCurrency) => { + const currencySelect = $(''); + const mainSelect = $('#id_payment_ethereum-currency_type'); + + // Set available networks upon currency change, and sync the hidden select + currencySelect.change(function () { + const selectedCurrency = $(this).val(); + const selectedCurrencyEntry = networksByCurrency.find(function (entry) { + return entry.currency === selectedCurrency; + }); + + + const currentNetwork = mainSelect.val().split(' - ').pop(); + const networkExistsForNextCurrency = selectedCurrencyEntry.networks.some(network => network === currentNetwork); + + // If network exists on the next selected currency, force the network to stay the same + if (networkExistsForNextCurrency) { + syncMainSelectOptions(selectedCurrencyEntry, `${selectedCurrencyEntry.currency} - ${currentNetwork}`); + } else { + syncMainSelectOptions(selectedCurrencyEntry); + } + }); + + // Add currency options to the currency select + networksByCurrency.forEach(function (entry) { + currencySelect.append($('').attr('value', entry.currency).text(entry.currency)); + }); + + // Force initialize with first currency and first network + syncMainSelectOptions(networksByCurrency[0]); + + $('#id_payment_ethereum-currency_type').before(currencySelect); + } + + const networksByCurrency = extractCurrenciesAndNetworks(); + createCustomSelects(networksByCurrency); +}); \ No newline at end of file From 93541c3af1e2e00e2ffc1dbdde89aeaf1c1a6ac3 Mon Sep 17 00:00:00 2001 From: lassejaco Date: Tue, 3 Oct 2023 09:18:28 +0200 Subject: [PATCH 2/2] clean up some leftover comments --- pretix_eth/static/pretix_eth/eth_payment_form.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/pretix_eth/static/pretix_eth/eth_payment_form.js b/pretix_eth/static/pretix_eth/eth_payment_form.js index 7b5352fc..efcd0b36 100644 --- a/pretix_eth/static/pretix_eth/eth_payment_form.js +++ b/pretix_eth/static/pretix_eth/eth_payment_form.js @@ -1,7 +1,7 @@ $(document).ready(function () { $("#id_payment_ethereum-currency_type")[0].style = 'display: inline-block; margin-left: 8px; width: auto; cursor: pointer;' - // Get currencies and their networks from the hidden select + // Get currencies and their networks from the main select const extractCurrenciesAndNetworks = () => { // Initialize an empty array to store the result const currenciesAndNetworks = []; @@ -39,7 +39,7 @@ $(document).ready(function () { return currenciesAndNetworks; } - // Filters down the main select to only have the networks available for the given currency + // Filters down the main select to only contain the networks for the given currency const syncMainSelectOptions = (selectedCurrency, value) => { const { currency, networks } = selectedCurrency; @@ -63,7 +63,7 @@ $(document).ready(function () { const currencySelect = $(''); const mainSelect = $('#id_payment_ethereum-currency_type'); - // Set available networks upon currency change, and sync the hidden select + // Set available networks upon currency change currencySelect.change(function () { const selectedCurrency = $(this).val(); const selectedCurrencyEntry = networksByCurrency.find(function (entry) {