move public

public/javascript/offers.js

@@ -0,0 +1,697 @@
+function offersPage() {
+  const buttonStartCreateOffer = document.getElementById(
+    'button-start-create-offer'
+  );
+  const buttonViewMyOffers = document.getElementById('button-view-my-offers');
+  const closeOffer = document.getElementById('close-offer');
+  const createOfferModalRoot = document.getElementById(
+    'create-offer-modal-root'
+  );
+  const viewMyOffersRoot = document.getElementById('view-my-offers-root');
+  const buyOrSellButtonGroup = document.getElementById(
+    'button-group-buy-or-sell'
+  );
+  const buyOrSellButtons = buyOrSellButtonGroup.querySelectorAll('button');
+  const buyButton = document.getElementById('button-buy-bitcoin');
+  const sellButton = document.getElementById('button-sell-bitcoin');
+
+  const premiumValue = document.getElementById('premium-value');
+  const buttonIncreasePremium = document.getElementById(
+    'button-increase-premium'
+  );
+
+  const buttonDecreasePremium = document.getElementById(
+    'button-decrease-premium'
+  );
+
+  const eurAmountInput = document.getElementById('input-eur-amount');
+  const btcAmountInput = document.getElementById('input-btc-amount');
+
+  const placeInput = document.getElementById('place-input');
+  const timeInput = document.getElementById('time-input');
+
+  const onchainCheckbox = document.getElementById('onchain-checkbox');
+  const lightningCheckbox = document.getElementById('lightning-checkbox');
+
+  const btcMethodCheckboxes = [onchainCheckbox, lightningCheckbox];
+
+  const myTrustedCheckbox = document.getElementById('my-trusted-checkbox');
+  const myTrustedTrustedCheckbox = document.getElementById(
+    'my-trusted-trusted-checkbox'
+  );
+  const allMembersCheckbox = document.getElementById('all-members-checkbox');
+
+  const bigNotesAcceptedCheckbox = document.getElementById(
+    'large-bills-checkbox'
+  );
+
+  const publishOfferButton = document.getElementById('button-submit-offer');
+
+  const offerCreatedPopup = document.getElementById(
+    'offer-created-confirmation'
+  );
+  const offerDeletedPopup = document.getElementById(
+    'offer-deleted-confirmation'
+  );
+
+  const ownOffersContainer = document.getElementById('own-offers-container');
+
+  function toggleCreateOfferModal() {
+    createOfferModalRoot.classList.toggle('shown');
+  }
+
+  function toggleViewMyOffersPanel() {
+    viewMyOffersRoot.style.display =
+      viewMyOffersRoot.style.display === 'block' ? 'none' : 'block';
+  }
+
+  function modifyPremiumValue(delta) {
+    const regexExpression = /-*\d+/;
+    const numValue = parseInt(premiumValue.innerText.match(regexExpression)[0]);
+
+    const newValue = `${numValue + delta}%`;
+
+    premiumValue.innerText = newValue;
+  }
+
+  function toggleBuyOrSellButtonGroup() {
+    buyOrSellButtons.forEach((button) => {
+      if (button.classList.contains('selected')) {
+        button.classList.remove('selected');
+      } else {
+        button.classList.add('selected');
+      }
+    });
+  }
+
+  function readIntFromEurAmountInput() {
+    const eurAmountFieldValue = eurAmountInput.value;
+    const regularExpression = /([\d\s]+)/;
+    const matchResult = eurAmountFieldValue.match(regularExpression);
+
+    if (!matchResult) {
+      return null;
+    }
+
+    const numberString = matchResult[1];
+    const cleanInputNumber = parseInt(numberString.replace(/\s/gi, ''));
+
+    return cleanInputNumber;
+  }
+
+  function validateAndFormatEurAmountInput() {
+    const cleanInputNumber = readIntFromEurAmountInput();
+    eurAmountInput.classList.remove('input-is-valid', 'input-is-invalid');
+    if (cleanInputNumber) {
+      eurAmountInput.value = formatNumberWithSpaces(cleanInputNumber);
+      eurAmountInput.classList.add('input-is-valid');
+      return;
+    }
+
+    eurAmountInput.classList.add('input-is-invalid');
+  }
+
+  function updateBtcInput() {
+    const eurToSatRate = 1021;
+    const cleanEurAmount = readIntFromEurAmountInput();
+
+    const satsAmount = cleanEurAmount * eurToSatRate;
+    const formattedSatsAmount = formatNumberWithSpaces(satsAmount);
+    btcAmountInput.value = formattedSatsAmount;
+  }
+
+  function validateBitcoinMethodCheckboxes(clickedCheckbox) {
+    let checkedCount = btcMethodCheckboxes.filter((cb) => cb.checked).length;
+    if (checkedCount === 0) {
+      clickedCheckbox.checked = true;
+    }
+  }
+
+  function applyTrustCheckboxConstraints(pressedCheckbox) {
+    if (pressedCheckbox === myTrustedTrustedCheckbox) {
+      console.log('first case!');
+      if (!myTrustedTrustedCheckbox.checked && allMembersCheckbox.checked) {
+        allMembersCheckbox.checked = false;
+      }
+    }
+
+    if (pressedCheckbox === allMembersCheckbox) {
+      console.log('second case!');
+      if (!myTrustedTrustedCheckbox.checked && allMembersCheckbox.checked) {
+        myTrustedTrustedCheckbox.checked = true;
+      }
+    }
+  }
+
+  async function publishOffer() {
+    let wants;
+    if (buyButton.classList.contains('selected')) {
+      wants = 'BTC';
+    }
+    if (sellButton.classList.contains('selected')) {
+      wants = 'EUR';
+    }
+
+    const premium = parseInt(premiumValue.innerText.match(/\d+/)[0]) / 100;
+    const trade_amount_eur = eurAmountInput.value;
+    const location_details = placeInput.value;
+    const time_availability_details = timeInput.value;
+    const is_onchain_accepted = onchainCheckbox.checked;
+    const is_lightning_accepted = lightningCheckbox.checked;
+    const show_offer_to_trusted = myTrustedCheckbox.checked;
+    const show_offer_to_trusted_trusted = myTrustedTrustedCheckbox.checked;
+    const show_offer_to_all_members = allMembersCheckbox.checked;
+    const are_big_notes_accepted = bigNotesAcceptedCheckbox.checked;
+
+    const offerDetails = {
+      wants,
+      premium,
+      trade_amount_eur,
+      location_details,
+      time_availability_details,
+      is_onchain_accepted,
+      is_lightning_accepted,
+      show_offer_to_trusted,
+      show_offer_to_trusted_trusted,
+      show_offer_to_all_members,
+      are_big_notes_accepted,
+    };
+
+    await fetch('/api/offer', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ offerDetails }),
+    });
+
+    toggleOfferCreatedAlert();
+
+    toggleCreateOfferModal();
+  }
+
+  function toggleOfferCreatedAlert() {
+    offerCreatedPopup.classList.remove('max-size-zero');
+    offerCreatedPopup.classList.add('revealed');
+    setTimeout(() => {
+      offerCreatedPopup.classList.remove('revealed');
+    }, 3000);
+    setTimeout(() => {
+      offerCreatedPopup.classList.add('max-size-zero');
+    }, 4000);
+  }
+
+  function toggleOfferDeletedAlert() {
+    offerDeletedPopup.classList.remove('max-size-zero');
+    offerDeletedPopup.classList.add('revealed');
+    setTimeout(() => {
+      offerDeletedPopup.classList.remove('revealed');
+    }, 3000);
+    setTimeout(() => {
+      offerDeletedPopup.classList.add('max-size-zero');
+    }, 4000);
+  }
+
+  class Offer {
+    constructor(offerData) {
+      this.uuid = offerData.uuid;
+      this.public_key = offerData.public_key;
+      this.wants = offerData.wants;
+      this.premium = offerData.premium;
+      this.trade_amount_eur = offerData.trade_amount_eur;
+      this.location_details = offerData.location_details;
+      this.time_availability_details = offerData.time_availability_details;
+      this.show_offer_to_trusted = offerData.show_offer_to_trusted;
+      this.show_offer_to_trusted_trusted =
+        offerData.show_offer_to_trusted_trusted;
+      this.show_offer_to_all_members = offerData.show_offer_to_all_members;
+      this.is_onchain_accepted = offerData.is_onchain_accepted;
+      this.is_lightning_accepted = offerData.is_lightning_accepted;
+      this.are_big_notes_accepted = offerData.are_big_notes_accepted;
+      this.created_at = offerData.created_at;
+      this.last_updated_at = offerData.last_updated_at;
+    }
+
+    buildHTML() {
+      const offerCard = document.createElement('div');
+      offerCard.classList.add('myoffer-card');
+      offerCard.classList.add('shadowed-round-area');
+
+      const tradeDescDiv = document.createElement('div');
+      tradeDescDiv.classList.add('trade-desc');
+
+      const youBuyText = document.createElement('p');
+      youBuyText.classList.add('offer-card-content-title');
+      youBuyText.innerText = 'Compras';
+      tradeDescDiv.append(youBuyText);
+
+      const youBuyData = document.createElement('p');
+      youBuyData.classList.add('offer-card-content-data');
+      if (this.wants === 'BTC') {
+        youBuyData.innerText = `${this.trade_amount_eur * 1021} sats`;
+      }
+      if (this.wants === 'EUR') {
+        youBuyData.innerText = `${this.trade_amount_eur} €`;
+      }
+      tradeDescDiv.append(youBuyData);
+
+      const youSellText = document.createElement('p');
+      youSellText.id = 'you-sell-title';
+      youSellText.classList.add('offer-card-content-title');
+      youSellText.innerText = 'Vendes';
+      tradeDescDiv.append(youSellText);
+
+      const youSellData = document.createElement('p');
+      youSellData.classList.add('offer-card-content-data');
+      if (this.wants === 'BTC') {
+        youSellData.innerText = `${this.trade_amount_eur} €`;
+      }
+      if (this.wants === 'EUR') {
+        youSellData.innerText = `${this.trade_amount_eur * 1021} sats`;
+      }
+      tradeDescDiv.append(youSellData);
+
+      const premiumDescDiv = document.createElement('div');
+      premiumDescDiv.classList.add('premium-desc');
+
+      const premiumTitle = document.createElement('p');
+      premiumTitle.classList.add('offer-card-content-title');
+      premiumTitle.innerText = 'Premium';
+      premiumDescDiv.append(premiumTitle);
+
+      const premiumData = document.createElement('p');
+      premiumData.classList.add('offer-card-content-data');
+      premiumData.innerText = `${this.premium * 100} %`;
+      premiumDescDiv.append(premiumData);
+
+      const offerPriceTitle = document.createElement('p');
+      offerPriceTitle.classList.add('offer-card-content-title');
+      offerPriceTitle.innerText = 'Precio oferta';
+      premiumDescDiv.append(offerPriceTitle);
+
+      const offerPriceData = document.createElement('p');
+      offerPriceData.classList.add('offer-card-content-data');
+      offerPriceData.innerText = `90000 €/BTC`;
+      premiumDescDiv.append(offerPriceData);
+
+      const marketPriceTitle = document.createElement('p');
+      marketPriceTitle.classList.add('offer-card-content-title');
+      marketPriceTitle.innerText = 'Precio mercado';
+      premiumDescDiv.append(marketPriceTitle);
+
+      const marketPriceData = document.createElement('p');
+      marketPriceData.innerText = `88000 €/BTC`;
+      premiumDescDiv.append(marketPriceData);
+
+      const whereDescDiv = document.createElement('div');
+      whereDescDiv.classList.add('where-desc');
+
+      const whereDescTitle = document.createElement('p');
+      whereDescTitle.classList.add('offer-card-content-title');
+      whereDescTitle.innerText = 'Dónde';
+      whereDescDiv.append(whereDescTitle);
+
+      const whereDescData = document.createElement('p');
+      whereDescData.classList.add('offer-long-text');
+      whereDescData.innerText = `${this.location_details}`;
+      whereDescDiv.append(whereDescData);
+
+      const whenDescDiv = document.createElement('div');
+      whenDescDiv.classList.add('when-desc');
+
+      const whenDescTitle = document.createElement('p');
+      whenDescTitle.classList.add('offer-card-content-title');
+      whenDescTitle.innerText = 'Cúando';
+      whenDescDiv.append(whenDescTitle);
+
+      const whenDescData = document.createElement('p');
+      whenDescData.classList.add('offer-long-text');
+      whenDescData.innerText = `${this.time_availability_details}`;
+      whenDescDiv.append(whenDescData);
+
+      const bitcoinMethodsDiv = document.createElement('div');
+      bitcoinMethodsDiv.classList.add('bitcoin-methods-desc');
+
+      const bitcoinMethodsTitle = document.createElement('p');
+      bitcoinMethodsTitle.classList.add('offer-card-content-title');
+      bitcoinMethodsTitle.innerText = 'Protocolos Bitcoin aceptados';
+      bitcoinMethodsDiv.append(bitcoinMethodsTitle);
+
+      const onchainAcceptedContainer = document.createElement('div');
+      onchainAcceptedContainer.classList.add('left-icon-checkboxed-field');
+      if (this.is_onchain_accepted) {
+        const onchainIcon = document.createElement('img');
+        onchainIcon.src = '/img/chains-lasecagold.svg';
+        const onchainText = document.createElement('p');
+        onchainText.innerText = 'Onchain';
+        const checkIcon = document.createElement('img');
+        checkIcon.src = '/img/circle-check-green.svg';
+
+        onchainAcceptedContainer.append(onchainIcon, onchainText, checkIcon);
+      } else {
+        const onchainIcon = document.createElement('img');
+        onchainIcon.src = '/img/chains-gray.svg';
+        const onchainText = document.createElement('p');
+        onchainText.innerText = 'Onchain';
+        const checkIcon = document.createElement('img');
+        checkIcon.src = '/img/circle-xmark-gray.svg';
+
+        onchainAcceptedContainer.append(onchainIcon, onchainText, checkIcon);
+      }
+      const lightningAcceptedContainer = document.createElement('div');
+
+      lightningAcceptedContainer.classList.add('left-icon-checkboxed-field');
+      if (this.is_lightning_accepted) {
+        const lightningIcon = document.createElement('img');
+        lightningIcon.src = '/img/bolt-lightning-lasecagold.svg';
+        const lightningText = document.createElement('p');
+        lightningText.innerText = 'Lightning';
+        const checkIcon = document.createElement('img');
+        checkIcon.src = '/img/circle-check-green.svg';
+
+        lightningAcceptedContainer.append(
+          lightningIcon,
+          lightningText,
+          checkIcon
+        );
+      } else {
+        const lightningIcon = document.createElement('img');
+        lightningIcon.src = '/img/bolt-lightning-gray.svg';
+        const lightningText = document.createElement('p');
+        lightningText.innerText = 'Lightning';
+        const checkIcon = document.createElement('img');
+        checkIcon.src = '/img/circle-xmark-gray.svg';
+
+        lightningAcceptedContainer.append(
+          lightningIcon,
+          lightningText,
+          checkIcon
+        );
+      }
+
+      bitcoinMethodsDiv.append(
+        onchainAcceptedContainer,
+        lightningAcceptedContainer
+      );
+
+      const visibilityDiv = document.createElement('div');
+      visibilityDiv.classList.add('visibility-desc');
+
+      const visibilityTitle = document.createElement('p');
+      visibilityTitle.classList.add('offer-card-content-title');
+      visibilityTitle.innerText = 'Visibilidad';
+      visibilityDiv.append(visibilityTitle);
+
+      const showOfferToTrustedContainer = document.createElement('div');
+      showOfferToTrustedContainer.classList.add('right-icon-checkboxed-field');
+
+      if (this.show_offer_to_trusted) {
+        const showOfferToTrustedIcon = document.createElement('img');
+        showOfferToTrustedIcon.src = '/img/user-lasecagold.svg';
+        const showOfferToTrustedText = document.createElement('p');
+        showOfferToTrustedText.innerText = 'Confiados';
+        const checkIcon = document.createElement('img');
+        checkIcon.src = '/img/circle-check-green.svg';
+
+        showOfferToTrustedContainer.append(
+          showOfferToTrustedIcon,
+          showOfferToTrustedText,
+          checkIcon
+        );
+      } else {
+        const showOfferToTrustedIcon = document.createElement('img');
+        showOfferToTrustedIcon.src = '/img/user-gray.svg';
+        const showOfferToTrustedText = document.createElement('p');
+        showOfferToTrustedText.innerText = 'Confiados';
+        const checkIcon = document.createElement('img');
+        checkIcon.src = '/img/circle-xmark-gray.svg';
+
+        showOfferToTrustedContainer.append(
+          showOfferToTrustedIcon,
+          showOfferToTrustedText,
+          checkIcon
+        );
+      }
+
+      const showOfferToTrustedTrustedContainer = document.createElement('div');
+      showOfferToTrustedTrustedContainer.classList.add(
+        'right-icon-checkboxed-field'
+      );
+
+      if (this.show_offer_to_trusted_trusted) {
+        const showOfferToTrustedTrustedIcon = document.createElement('img');
+        showOfferToTrustedTrustedIcon.src = '/img/user-group-lasecagold.svg';
+        const showOfferToTrustedTrustedText = document.createElement('p');
+        showOfferToTrustedTrustedText.innerText = 'Sus confiados';
+        const checkIcon = document.createElement('img');
+        checkIcon.src = '/img/circle-check-green.svg';
+
+        showOfferToTrustedTrustedContainer.append(
+          showOfferToTrustedTrustedIcon,
+          showOfferToTrustedTrustedText,
+          checkIcon
+        );
+      } else {
+        const showOfferToTrustedTrustedIcon = document.createElement('img');
+        showOfferToTrustedTrustedIcon.src = '/img/user-group-gray.svg';
+        const showOfferToTrustedTrustedText = document.createElement('p');
+        showOfferToTrustedTrustedText.innerText = 'Sus confiados';
+        const checkIcon = document.createElement('img');
+        checkIcon.src = '/img/circle-xmark-gray.svg';
+
+        showOfferToTrustedTrustedContainer.append(
+          showOfferToTrustedTrustedIcon,
+          showOfferToTrustedTrustedText,
+          checkIcon
+        );
+      }
+
+      const showOfferToAllMembersContainer = document.createElement('div');
+      showOfferToAllMembersContainer.classList.add(
+        'right-icon-checkboxed-field'
+      );
+
+      if (this.show_offer_to_all_members) {
+        const showOfferToAllMembersIcon = document.createElement('img');
+        showOfferToAllMembersIcon.src = '/img/many-users-lasecagold.svg';
+        const showOfferToAllMembersText = document.createElement('p');
+        showOfferToAllMembersText.innerText = 'Todos';
+        const checkIcon = document.createElement('img');
+        checkIcon.src = '/img/circle-check-green.svg';
+
+        showOfferToAllMembersContainer.append(
+          showOfferToAllMembersIcon,
+          showOfferToAllMembersText,
+          checkIcon
+        );
+      } else {
+        const showOfferToAllMembersIcon = document.createElement('img');
+        showOfferToAllMembersIcon.src = '/img/many-users-gray.svg';
+        const showOfferToAllMembersText = document.createElement('p');
+        showOfferToAllMembersText.innerText = 'Todos';
+        const checkIcon = document.createElement('img');
+        checkIcon.src = '/img/circle-xmark-gray.svg';
+
+        showOfferToAllMembersContainer.append(
+          showOfferToAllMembersIcon,
+          showOfferToAllMembersText,
+          checkIcon
+        );
+      }
+      visibilityDiv.append(
+        showOfferToTrustedContainer,
+        showOfferToTrustedTrustedContainer,
+        showOfferToAllMembersContainer
+      );
+
+      const otherOfferFeaturesDiv = document.createElement('div');
+      otherOfferFeaturesDiv.classList.add('other-desc');
+
+      const otherOfferFeaturesTitle = document.createElement('p');
+      otherOfferFeaturesTitle.classList.add('offer-card-content-title');
+      otherOfferFeaturesTitle.innerText = 'Otros';
+      otherOfferFeaturesDiv.append(otherOfferFeaturesTitle);
+
+      const areBigNotesAcceptedContainer = document.createElement('div');
+      areBigNotesAcceptedContainer.classList.add('left-icon-checkboxed-field');
+
+      if (this.are_big_notes_accepted) {
+        const areBigNotesAcceptedIcon = document.createElement('img');
+        areBigNotesAcceptedIcon.src = '/img/eur-bill-lasecagold.svg';
+        const areBigNotesAcceptedText = document.createElement('p');
+        areBigNotesAcceptedText.innerText = 'Billetes grandes';
+        const checkIcon = document.createElement('img');
+        checkIcon.src = '/img/circle-check-green.svg';
+
+        areBigNotesAcceptedContainer.append(
+          areBigNotesAcceptedIcon,
+          areBigNotesAcceptedText,
+          checkIcon
+        );
+      } else {
+        const areBigNotesAcceptedIcon = document.createElement('img');
+        areBigNotesAcceptedIcon.src = '/img/eur-bill-gray.svg';
+        const areBigNotesAcceptedText = document.createElement('p');
+        areBigNotesAcceptedText.innerText = 'Billetes grandes';
+        const checkIcon = document.createElement('img');
+        checkIcon.src = '/img/circle-xmark-gray.svg';
+
+        areBigNotesAcceptedContainer.append(
+          areBigNotesAcceptedIcon,
+          areBigNotesAcceptedText,
+          checkIcon
+        );
+      }
+
+      otherOfferFeaturesDiv.append(areBigNotesAcceptedContainer);
+
+      const actionButtonsArea = document.createElement('p');
+      actionButtonsArea.classList.add('offer-action-buttons-area');
+
+      const editActionArea = document.createElement('div');
+      editActionArea.classList.add('offer-action-area');
+      editActionArea.classList.add('subtle-box');
+      const editActionIcon = document.createElement('img');
+      editActionIcon.src = '/img/edit.svg';
+      const editActionText = document.createElement('p');
+      editActionText.innerText = 'Editar';
+      editActionArea.append(editActionIcon, editActionText);
+
+      const deleteActionArea = document.createElement('div');
+      deleteActionArea.classList.add('offer-action-area');
+      deleteActionArea.classList.add('subtle-box');
+      const deleteActionIcon = document.createElement('img');
+      deleteActionIcon.src = '/img/trash-can-darkred.svg';
+      const deleteActionText = document.createElement('p');
+      deleteActionText.innerText = 'Eliminar';
+      deleteActionArea.append(deleteActionIcon, deleteActionText);
+      deleteActionArea.addEventListener('click', async () => {
+        await deleteOfferByUuid(this.uuid);
+        await myOffers.getOffersFromApi();
+        await myOffers.render();
+        toggleOfferDeletedAlert();
+      });
+
+      actionButtonsArea.append(editActionArea, deleteActionArea);
+
+      offerCard.append(
+        tradeDescDiv,
+        premiumDescDiv,
+        whereDescDiv,
+        whenDescDiv,
+        bitcoinMethodsDiv,
+        visibilityDiv,
+        otherOfferFeaturesDiv,
+        actionButtonsArea
+      );
+
+      return offerCard;
+    }
+  }
+
+  class MyOffers {
+    constructor(ownOffersContainerElement) {
+      this.ownOffersContainerElement = ownOffersContainerElement;
+      this.offers = [];
+    }
+
+    async getOffersFromApi() {
+      const offersResponse = await fetch('/api/publickey-offers');
+
+      this.offers = [];
+
+      const offersData = (await offersResponse.json()).data;
+      if (offersResponse.ok) {
+        for (const record of offersData) {
+          this.offers.push(new Offer(record));
+        }
+      }
+    }
+
+    async render() {
+      if (this.offers.length === 0) {
+        this.ownOffersContainerElement.innerHTML =
+          '<p class="shadowed-round-area">Vaya, no hay nada por aquí...</p>';
+        return;
+      }
+      this.ownOffersContainerElement.innerHTML = '';
+
+      for (const someOffer of this.offers) {
+        this.ownOffersContainerElement.append(someOffer.buildHTML());
+      }
+    }
+  }
+
+  async function deleteOfferByUuid(offerUuid) {
+    await fetch(`/api/offer/${offerUuid}`, {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  }
+
+  buttonStartCreateOffer.addEventListener('click', () => {
+    toggleCreateOfferModal();
+  });
+
+  buttonViewMyOffers.addEventListener('click', async () => {
+    await myOffers.getOffersFromApi();
+    await myOffers.render();
+    toggleViewMyOffersPanel();
+  });
+
+  closeOffer.addEventListener('click', () => {
+    toggleCreateOfferModal();
+  });
+
+  buyOrSellButtons.forEach((button) => {
+    button.addEventListener('click', () => {
+      toggleBuyOrSellButtonGroup();
+    });
+  });
+
+  buttonIncreasePremium.addEventListener('click', () => {
+    modifyPremiumValue(1);
+  });
+
+  buttonDecreasePremium.addEventListener('click', () => {
+    modifyPremiumValue(-1);
+  });
+
+  eurAmountInput.addEventListener('blur', () => {
+    validateAndFormatEurAmountInput();
+    updateBtcInput();
+  });
+
+  eurAmountInput.addEventListener('input', () => {
+    eurAmountInput.value = eurAmountInput.value.replace(/[^0-9]/g, '');
+    updateBtcInput();
+  });
+
+  for (const btcMethodCheckbox of btcMethodCheckboxes) {
+    btcMethodCheckbox.addEventListener('click', () => {
+      validateBitcoinMethodCheckboxes(btcMethodCheckbox);
+    });
+  }
+
+  myTrustedTrustedCheckbox.addEventListener('click', () => {
+    applyTrustCheckboxConstraints(myTrustedTrustedCheckbox);
+  });
+
+  allMembersCheckbox.addEventListener('click', () => {
+    applyTrustCheckboxConstraints(allMembersCheckbox);
+  });
+
+  publishOfferButton.addEventListener('click', async () => {
+    await publishOffer();
+    await myOffers.getOffersFromApi();
+    await myOffers.render();
+  });
+
+  updateBtcInput();
+
+  const myOffers = new MyOffers(ownOffersContainer);
+}
+
+offersPage;

src/app.js

@@ -21,7 +21,7 @@ function createApp(dependencies) {
   app.use('/', dependencies.webRoutes);
   app.use('/api', dependencies.apiRoutes);
 
-  app.use(express.static(path.join(__dirname, 'public')));
+  app.use(express.static(path.join(__dirname, '../public')));
 
   app.disable('etag'); //avoids 304 responses
 

src/public/javascript/offers.js

@@ -1,685 +0,0 @@
-const buttonStartCreateOffer = document.getElementById(
-  'button-start-create-offer'
-);
-const buttonViewMyOffers = document.getElementById('button-view-my-offers');
-const closeOffer = document.getElementById('close-offer');
-const createOfferModalRoot = document.getElementById('create-offer-modal-root');
-const viewMyOffersRoot = document.getElementById('view-my-offers-root');
-const buyOrSellButtonGroup = document.getElementById(
-  'button-group-buy-or-sell'
-);
-const buyOrSellButtons = buyOrSellButtonGroup.querySelectorAll('button');
-const buyButton = document.getElementById('button-buy-bitcoin');
-const sellButton = document.getElementById('button-sell-bitcoin');
-
-const premiumValue = document.getElementById('premium-value');
-const buttonIncreasePremium = document.getElementById(
-  'button-increase-premium'
-);
-
-const buttonDecreasePremium = document.getElementById(
-  'button-decrease-premium'
-);
-
-const eurAmountInput = document.getElementById('input-eur-amount');
-const btcAmountInput = document.getElementById('input-btc-amount');
-
-const placeInput = document.getElementById('place-input');
-const timeInput = document.getElementById('time-input');
-
-const onchainCheckbox = document.getElementById('onchain-checkbox');
-const lightningCheckbox = document.getElementById('lightning-checkbox');
-
-const btcMethodCheckboxes = [onchainCheckbox, lightningCheckbox];
-
-const myTrustedCheckbox = document.getElementById('my-trusted-checkbox');
-const myTrustedTrustedCheckbox = document.getElementById(
-  'my-trusted-trusted-checkbox'
-);
-const allMembersCheckbox = document.getElementById('all-members-checkbox');
-
-const bigNotesAcceptedCheckbox = document.getElementById(
-  'large-bills-checkbox'
-);
-
-const publishOfferButton = document.getElementById('button-submit-offer');
-
-const offerCreatedPopup = document.getElementById('offer-created-confirmation');
-const offerDeletedPopup = document.getElementById('offer-deleted-confirmation');
-
-const ownOffersContainer = document.getElementById('own-offers-container');
-
-function toggleCreateOfferModal() {
-  createOfferModalRoot.classList.toggle('shown');
-}
-
-function toggleViewMyOffersPanel() {
-  viewMyOffersRoot.style.display =
-    viewMyOffersRoot.style.display === 'block' ? 'none' : 'block';
-}
-
-function modifyPremiumValue(delta) {
-  const regexExpression = /-*\d+/;
-  const numValue = parseInt(premiumValue.innerText.match(regexExpression)[0]);
-
-  const newValue = `${numValue + delta}%`;
-
-  premiumValue.innerText = newValue;
-}
-
-function toggleBuyOrSellButtonGroup() {
-  buyOrSellButtons.forEach((button) => {
-    if (button.classList.contains('selected')) {
-      button.classList.remove('selected');
-    } else {
-      button.classList.add('selected');
-    }
-  });
-}
-
-function readIntFromEurAmountInput() {
-  const eurAmountFieldValue = eurAmountInput.value;
-  const regularExpression = /([\d\s]+)/;
-  const matchResult = eurAmountFieldValue.match(regularExpression);
-
-  if (!matchResult) {
-    return null;
-  }
-
-  const numberString = matchResult[1];
-  const cleanInputNumber = parseInt(numberString.replace(/\s/gi, ''));
-
-  return cleanInputNumber;
-}
-
-function validateAndFormatEurAmountInput() {
-  const cleanInputNumber = readIntFromEurAmountInput();
-  eurAmountInput.classList.remove('input-is-valid', 'input-is-invalid');
-  if (cleanInputNumber) {
-    eurAmountInput.value = formatNumberWithSpaces(cleanInputNumber);
-    eurAmountInput.classList.add('input-is-valid');
-    return;
-  }
-
-  eurAmountInput.classList.add('input-is-invalid');
-}
-
-function updateBtcInput() {
-  const eurToSatRate = 1021;
-  const cleanEurAmount = readIntFromEurAmountInput();
-
-  const satsAmount = cleanEurAmount * eurToSatRate;
-  const formattedSatsAmount = formatNumberWithSpaces(satsAmount);
-  btcAmountInput.value = formattedSatsAmount;
-}
-
-function validateBitcoinMethodCheckboxes(clickedCheckbox) {
-  let checkedCount = btcMethodCheckboxes.filter((cb) => cb.checked).length;
-  if (checkedCount === 0) {
-    clickedCheckbox.checked = true;
-  }
-}
-
-function applyTrustCheckboxConstraints(pressedCheckbox) {
-  if (pressedCheckbox === myTrustedTrustedCheckbox) {
-    console.log('first case!');
-    if (!myTrustedTrustedCheckbox.checked && allMembersCheckbox.checked) {
-      allMembersCheckbox.checked = false;
-    }
-  }
-
-  if (pressedCheckbox === allMembersCheckbox) {
-    console.log('second case!');
-    if (!myTrustedTrustedCheckbox.checked && allMembersCheckbox.checked) {
-      myTrustedTrustedCheckbox.checked = true;
-    }
-  }
-}
-
-async function publishOffer() {
-  let wants;
-  if (buyButton.classList.contains('selected')) {
-    wants = 'BTC';
-  }
-  if (sellButton.classList.contains('selected')) {
-    wants = 'EUR';
-  }
-
-  const premium = parseInt(premiumValue.innerText.match(/\d+/)[0]) / 100;
-  const trade_amount_eur = eurAmountInput.value;
-  const location_details = placeInput.value;
-  const time_availability_details = timeInput.value;
-  const is_onchain_accepted = onchainCheckbox.checked;
-  const is_lightning_accepted = lightningCheckbox.checked;
-  const show_offer_to_trusted = myTrustedCheckbox.checked;
-  const show_offer_to_trusted_trusted = myTrustedTrustedCheckbox.checked;
-  const show_offer_to_all_members = allMembersCheckbox.checked;
-  const are_big_notes_accepted = bigNotesAcceptedCheckbox.checked;
-
-  const offerDetails = {
-    wants,
-    premium,
-    trade_amount_eur,
-    location_details,
-    time_availability_details,
-    is_onchain_accepted,
-    is_lightning_accepted,
-    show_offer_to_trusted,
-    show_offer_to_trusted_trusted,
-    show_offer_to_all_members,
-    are_big_notes_accepted,
-  };
-
-  await fetch('/api/offer', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({ offerDetails }),
-  });
-
-  toggleOfferCreatedAlert();
-
-  toggleCreateOfferModal();
-}
-
-function toggleOfferCreatedAlert() {
-  offerCreatedPopup.classList.remove('max-size-zero');
-  offerCreatedPopup.classList.add('revealed');
-  setTimeout(() => {
-    offerCreatedPopup.classList.remove('revealed');
-  }, 3000);
-  setTimeout(() => {
-    offerCreatedPopup.classList.add('max-size-zero');
-  }, 4000);
-}
-
-function toggleOfferDeletedAlert() {
-  offerDeletedPopup.classList.remove('max-size-zero');
-  offerDeletedPopup.classList.add('revealed');
-  setTimeout(() => {
-    offerDeletedPopup.classList.remove('revealed');
-  }, 3000);
-  setTimeout(() => {
-    offerDeletedPopup.classList.add('max-size-zero');
-  }, 4000);
-}
-
-class Offer {
-  constructor(offerData) {
-    this.uuid = offerData.uuid;
-    this.public_key = offerData.public_key;
-    this.wants = offerData.wants;
-    this.premium = offerData.premium;
-    this.trade_amount_eur = offerData.trade_amount_eur;
-    this.location_details = offerData.location_details;
-    this.time_availability_details = offerData.time_availability_details;
-    this.show_offer_to_trusted = offerData.show_offer_to_trusted;
-    this.show_offer_to_trusted_trusted =
-      offerData.show_offer_to_trusted_trusted;
-    this.show_offer_to_all_members = offerData.show_offer_to_all_members;
-    this.is_onchain_accepted = offerData.is_onchain_accepted;
-    this.is_lightning_accepted = offerData.is_lightning_accepted;
-    this.are_big_notes_accepted = offerData.are_big_notes_accepted;
-    this.created_at = offerData.created_at;
-    this.last_updated_at = offerData.last_updated_at;
-  }
-
-  buildHTML() {
-    const offerCard = document.createElement('div');
-    offerCard.classList.add('myoffer-card');
-    offerCard.classList.add('shadowed-round-area');
-
-    const tradeDescDiv = document.createElement('div');
-    tradeDescDiv.classList.add('trade-desc');
-
-    const youBuyText = document.createElement('p');
-    youBuyText.classList.add('offer-card-content-title');
-    youBuyText.innerText = 'Compras';
-    tradeDescDiv.append(youBuyText);
-
-    const youBuyData = document.createElement('p');
-    youBuyData.classList.add('offer-card-content-data');
-    if (this.wants === 'BTC') {
-      youBuyData.innerText = `${this.trade_amount_eur * 1021} sats`;
-    }
-    if (this.wants === 'EUR') {
-      youBuyData.innerText = `${this.trade_amount_eur} €`;
-    }
-    tradeDescDiv.append(youBuyData);
-
-    const youSellText = document.createElement('p');
-    youSellText.id = 'you-sell-title';
-    youSellText.classList.add('offer-card-content-title');
-    youSellText.innerText = 'Vendes';
-    tradeDescDiv.append(youSellText);
-
-    const youSellData = document.createElement('p');
-    youSellData.classList.add('offer-card-content-data');
-    if (this.wants === 'BTC') {
-      youSellData.innerText = `${this.trade_amount_eur} €`;
-    }
-    if (this.wants === 'EUR') {
-      youSellData.innerText = `${this.trade_amount_eur * 1021} sats`;
-    }
-    tradeDescDiv.append(youSellData);
-
-    const premiumDescDiv = document.createElement('div');
-    premiumDescDiv.classList.add('premium-desc');
-
-    const premiumTitle = document.createElement('p');
-    premiumTitle.classList.add('offer-card-content-title');
-    premiumTitle.innerText = 'Premium';
-    premiumDescDiv.append(premiumTitle);
-
-    const premiumData = document.createElement('p');
-    premiumData.classList.add('offer-card-content-data');
-    premiumData.innerText = `${this.premium * 100} %`;
-    premiumDescDiv.append(premiumData);
-
-    const offerPriceTitle = document.createElement('p');
-    offerPriceTitle.classList.add('offer-card-content-title');
-    offerPriceTitle.innerText = 'Precio oferta';
-    premiumDescDiv.append(offerPriceTitle);
-
-    const offerPriceData = document.createElement('p');
-    offerPriceData.classList.add('offer-card-content-data');
-    offerPriceData.innerText = `90000 €/BTC`;
-    premiumDescDiv.append(offerPriceData);
-
-    const marketPriceTitle = document.createElement('p');
-    marketPriceTitle.classList.add('offer-card-content-title');
-    marketPriceTitle.innerText = 'Precio mercado';
-    premiumDescDiv.append(marketPriceTitle);
-
-    const marketPriceData = document.createElement('p');
-    marketPriceData.innerText = `88000 €/BTC`;
-    premiumDescDiv.append(marketPriceData);
-
-    const whereDescDiv = document.createElement('div');
-    whereDescDiv.classList.add('where-desc');
-
-    const whereDescTitle = document.createElement('p');
-    whereDescTitle.classList.add('offer-card-content-title');
-    whereDescTitle.innerText = 'Dónde';
-    whereDescDiv.append(whereDescTitle);
-
-    const whereDescData = document.createElement('p');
-    whereDescData.classList.add('offer-long-text');
-    whereDescData.innerText = `${this.location_details}`;
-    whereDescDiv.append(whereDescData);
-
-    const whenDescDiv = document.createElement('div');
-    whenDescDiv.classList.add('when-desc');
-
-    const whenDescTitle = document.createElement('p');
-    whenDescTitle.classList.add('offer-card-content-title');
-    whenDescTitle.innerText = 'Cúando';
-    whenDescDiv.append(whenDescTitle);
-
-    const whenDescData = document.createElement('p');
-    whenDescData.classList.add('offer-long-text');
-    whenDescData.innerText = `${this.time_availability_details}`;
-    whenDescDiv.append(whenDescData);
-
-    const bitcoinMethodsDiv = document.createElement('div');
-    bitcoinMethodsDiv.classList.add('bitcoin-methods-desc');
-
-    const bitcoinMethodsTitle = document.createElement('p');
-    bitcoinMethodsTitle.classList.add('offer-card-content-title');
-    bitcoinMethodsTitle.innerText = 'Protocolos Bitcoin aceptados';
-    bitcoinMethodsDiv.append(bitcoinMethodsTitle);
-
-    const onchainAcceptedContainer = document.createElement('div');
-    onchainAcceptedContainer.classList.add('left-icon-checkboxed-field');
-    if (this.is_onchain_accepted) {
-      const onchainIcon = document.createElement('img');
-      onchainIcon.src = '/img/chains-lasecagold.svg';
-      const onchainText = document.createElement('p');
-      onchainText.innerText = 'Onchain';
-      const checkIcon = document.createElement('img');
-      checkIcon.src = '/img/circle-check-green.svg';
-
-      onchainAcceptedContainer.append(onchainIcon, onchainText, checkIcon);
-    } else {
-      const onchainIcon = document.createElement('img');
-      onchainIcon.src = '/img/chains-gray.svg';
-      const onchainText = document.createElement('p');
-      onchainText.innerText = 'Onchain';
-      const checkIcon = document.createElement('img');
-      checkIcon.src = '/img/circle-xmark-gray.svg';
-
-      onchainAcceptedContainer.append(onchainIcon, onchainText, checkIcon);
-    }
-    const lightningAcceptedContainer = document.createElement('div');
-
-    lightningAcceptedContainer.classList.add('left-icon-checkboxed-field');
-    if (this.is_lightning_accepted) {
-      const lightningIcon = document.createElement('img');
-      lightningIcon.src = '/img/bolt-lightning-lasecagold.svg';
-      const lightningText = document.createElement('p');
-      lightningText.innerText = 'Lightning';
-      const checkIcon = document.createElement('img');
-      checkIcon.src = '/img/circle-check-green.svg';
-
-      lightningAcceptedContainer.append(
-        lightningIcon,
-        lightningText,
-        checkIcon
-      );
-    } else {
-      const lightningIcon = document.createElement('img');
-      lightningIcon.src = '/img/bolt-lightning-gray.svg';
-      const lightningText = document.createElement('p');
-      lightningText.innerText = 'Lightning';
-      const checkIcon = document.createElement('img');
-      checkIcon.src = '/img/circle-xmark-gray.svg';
-
-      lightningAcceptedContainer.append(
-        lightningIcon,
-        lightningText,
-        checkIcon
-      );
-    }
-
-    bitcoinMethodsDiv.append(
-      onchainAcceptedContainer,
-      lightningAcceptedContainer
-    );
-
-    const visibilityDiv = document.createElement('div');
-    visibilityDiv.classList.add('visibility-desc');
-
-    const visibilityTitle = document.createElement('p');
-    visibilityTitle.classList.add('offer-card-content-title');
-    visibilityTitle.innerText = 'Visibilidad';
-    visibilityDiv.append(visibilityTitle);
-
-    const showOfferToTrustedContainer = document.createElement('div');
-    showOfferToTrustedContainer.classList.add('right-icon-checkboxed-field');
-
-    if (this.show_offer_to_trusted) {
-      const showOfferToTrustedIcon = document.createElement('img');
-      showOfferToTrustedIcon.src = '/img/user-lasecagold.svg';
-      const showOfferToTrustedText = document.createElement('p');
-      showOfferToTrustedText.innerText = 'Confiados';
-      const checkIcon = document.createElement('img');
-      checkIcon.src = '/img/circle-check-green.svg';
-
-      showOfferToTrustedContainer.append(
-        showOfferToTrustedIcon,
-        showOfferToTrustedText,
-        checkIcon
-      );
-    } else {
-      const showOfferToTrustedIcon = document.createElement('img');
-      showOfferToTrustedIcon.src = '/img/user-gray.svg';
-      const showOfferToTrustedText = document.createElement('p');
-      showOfferToTrustedText.innerText = 'Confiados';
-      const checkIcon = document.createElement('img');
-      checkIcon.src = '/img/circle-xmark-gray.svg';
-
-      showOfferToTrustedContainer.append(
-        showOfferToTrustedIcon,
-        showOfferToTrustedText,
-        checkIcon
-      );
-    }
-
-    const showOfferToTrustedTrustedContainer = document.createElement('div');
-    showOfferToTrustedTrustedContainer.classList.add(
-      'right-icon-checkboxed-field'
-    );
-
-    if (this.show_offer_to_trusted_trusted) {
-      const showOfferToTrustedTrustedIcon = document.createElement('img');
-      showOfferToTrustedTrustedIcon.src = '/img/user-group-lasecagold.svg';
-      const showOfferToTrustedTrustedText = document.createElement('p');
-      showOfferToTrustedTrustedText.innerText = 'Sus confiados';
-      const checkIcon = document.createElement('img');
-      checkIcon.src = '/img/circle-check-green.svg';
-
-      showOfferToTrustedTrustedContainer.append(
-        showOfferToTrustedTrustedIcon,
-        showOfferToTrustedTrustedText,
-        checkIcon
-      );
-    } else {
-      const showOfferToTrustedTrustedIcon = document.createElement('img');
-      showOfferToTrustedTrustedIcon.src = '/img/user-group-gray.svg';
-      const showOfferToTrustedTrustedText = document.createElement('p');
-      showOfferToTrustedTrustedText.innerText = 'Sus confiados';
-      const checkIcon = document.createElement('img');
-      checkIcon.src = '/img/circle-xmark-gray.svg';
-
-      showOfferToTrustedTrustedContainer.append(
-        showOfferToTrustedTrustedIcon,
-        showOfferToTrustedTrustedText,
-        checkIcon
-      );
-    }
-
-    const showOfferToAllMembersContainer = document.createElement('div');
-    showOfferToAllMembersContainer.classList.add('right-icon-checkboxed-field');
-
-    if (this.show_offer_to_all_members) {
-      const showOfferToAllMembersIcon = document.createElement('img');
-      showOfferToAllMembersIcon.src = '/img/many-users-lasecagold.svg';
-      const showOfferToAllMembersText = document.createElement('p');
-      showOfferToAllMembersText.innerText = 'Todos';
-      const checkIcon = document.createElement('img');
-      checkIcon.src = '/img/circle-check-green.svg';
-
-      showOfferToAllMembersContainer.append(
-        showOfferToAllMembersIcon,
-        showOfferToAllMembersText,
-        checkIcon
-      );
-    } else {
-      const showOfferToAllMembersIcon = document.createElement('img');
-      showOfferToAllMembersIcon.src = '/img/many-users-gray.svg';
-      const showOfferToAllMembersText = document.createElement('p');
-      showOfferToAllMembersText.innerText = 'Todos';
-      const checkIcon = document.createElement('img');
-      checkIcon.src = '/img/circle-xmark-gray.svg';
-
-      showOfferToAllMembersContainer.append(
-        showOfferToAllMembersIcon,
-        showOfferToAllMembersText,
-        checkIcon
-      );
-    }
-    visibilityDiv.append(
-      showOfferToTrustedContainer,
-      showOfferToTrustedTrustedContainer,
-      showOfferToAllMembersContainer
-    );
-
-    const otherOfferFeaturesDiv = document.createElement('div');
-    otherOfferFeaturesDiv.classList.add('other-desc');
-
-    const otherOfferFeaturesTitle = document.createElement('p');
-    otherOfferFeaturesTitle.classList.add('offer-card-content-title');
-    otherOfferFeaturesTitle.innerText = 'Otros';
-    otherOfferFeaturesDiv.append(otherOfferFeaturesTitle);
-
-    const areBigNotesAcceptedContainer = document.createElement('div');
-    areBigNotesAcceptedContainer.classList.add('left-icon-checkboxed-field');
-
-    if (this.are_big_notes_accepted) {
-      const areBigNotesAcceptedIcon = document.createElement('img');
-      areBigNotesAcceptedIcon.src = '/img/eur-bill-lasecagold.svg';
-      const areBigNotesAcceptedText = document.createElement('p');
-      areBigNotesAcceptedText.innerText = 'Billetes grandes';
-      const checkIcon = document.createElement('img');
-      checkIcon.src = '/img/circle-check-green.svg';
-
-      areBigNotesAcceptedContainer.append(
-        areBigNotesAcceptedIcon,
-        areBigNotesAcceptedText,
-        checkIcon
-      );
-    } else {
-      const areBigNotesAcceptedIcon = document.createElement('img');
-      areBigNotesAcceptedIcon.src = '/img/eur-bill-gray.svg';
-      const areBigNotesAcceptedText = document.createElement('p');
-      areBigNotesAcceptedText.innerText = 'Billetes grandes';
-      const checkIcon = document.createElement('img');
-      checkIcon.src = '/img/circle-xmark-gray.svg';
-
-      areBigNotesAcceptedContainer.append(
-        areBigNotesAcceptedIcon,
-        areBigNotesAcceptedText,
-        checkIcon
-      );
-    }
-
-    otherOfferFeaturesDiv.append(areBigNotesAcceptedContainer);
-
-    const actionButtonsArea = document.createElement('p');
-    actionButtonsArea.classList.add('offer-action-buttons-area');
-
-    const editActionArea = document.createElement('div');
-    editActionArea.classList.add('offer-action-area');
-    editActionArea.classList.add('subtle-box');
-    const editActionIcon = document.createElement('img');
-    editActionIcon.src = '/img/edit.svg';
-    const editActionText = document.createElement('p');
-    editActionText.innerText = 'Editar';
-    editActionArea.append(editActionIcon, editActionText);
-
-    const deleteActionArea = document.createElement('div');
-    deleteActionArea.classList.add('offer-action-area');
-    deleteActionArea.classList.add('subtle-box');
-    const deleteActionIcon = document.createElement('img');
-    deleteActionIcon.src = '/img/trash-can-darkred.svg';
-    const deleteActionText = document.createElement('p');
-    deleteActionText.innerText = 'Eliminar';
-    deleteActionArea.append(deleteActionIcon, deleteActionText);
-    deleteActionArea.addEventListener('click', async () => {
-      await deleteOfferByUuid(this.uuid);
-      await myOffers.getOffersFromApi();
-      await myOffers.render();
-      toggleOfferDeletedAlert();
-    });
-
-    actionButtonsArea.append(editActionArea, deleteActionArea);
-
-    offerCard.append(
-      tradeDescDiv,
-      premiumDescDiv,
-      whereDescDiv,
-      whenDescDiv,
-      bitcoinMethodsDiv,
-      visibilityDiv,
-      otherOfferFeaturesDiv,
-      actionButtonsArea
-    );
-
-    return offerCard;
-  }
-}
-
-class MyOffers {
-  constructor(ownOffersContainerElement) {
-    this.ownOffersContainerElement = ownOffersContainerElement;
-    this.offers = [];
-  }
-
-  async getOffersFromApi() {
-    const offersResponse = await fetch('/api/publickey-offers');
-
-    this.offers = [];
-
-    const offersData = (await offersResponse.json()).data;
-    if (offersResponse.ok) {
-      for (const record of offersData) {
-        this.offers.push(new Offer(record));
-      }
-    }
-  }
-
-  async render() {
-    if (this.offers.length === 0) {
-      this.ownOffersContainerElement.innerHTML =
-        '<p class="shadowed-round-area">Vaya, no hay nada por aquí...</p>';
-      return;
-    }
-    this.ownOffersContainerElement.innerHTML = '';
-
-    for (const someOffer of this.offers) {
-      this.ownOffersContainerElement.append(someOffer.buildHTML());
-    }
-  }
-}
-
-async function deleteOfferByUuid(offerUuid) {
-  await fetch(`/api/offer/${offerUuid}`, {
-    method: 'DELETE',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  });
-}
-
-buttonStartCreateOffer.addEventListener('click', () => {
-  toggleCreateOfferModal();
-});
-
-buttonViewMyOffers.addEventListener('click', async () => {
-  await myOffers.getOffersFromApi();
-  await myOffers.render();
-  toggleViewMyOffersPanel();
-});
-
-closeOffer.addEventListener('click', () => {
-  toggleCreateOfferModal();
-});
-
-buyOrSellButtons.forEach((button) => {
-  button.addEventListener('click', () => {
-    toggleBuyOrSellButtonGroup();
-  });
-});
-
-buttonIncreasePremium.addEventListener('click', () => {
-  modifyPremiumValue(1);
-});
-
-buttonDecreasePremium.addEventListener('click', () => {
-  modifyPremiumValue(-1);
-});
-
-eurAmountInput.addEventListener('blur', () => {
-  validateAndFormatEurAmountInput();
-  updateBtcInput();
-});
-
-eurAmountInput.addEventListener('input', () => {
-  eurAmountInput.value = eurAmountInput.value.replace(/[^0-9]/g, '');
-  updateBtcInput();
-});
-
-for (const btcMethodCheckbox of btcMethodCheckboxes) {
-  btcMethodCheckbox.addEventListener('click', () => {
-    validateBitcoinMethodCheckboxes(btcMethodCheckbox);
-  });
-}
-
-myTrustedTrustedCheckbox.addEventListener('click', () => {
-  applyTrustCheckboxConstraints(myTrustedTrustedCheckbox);
-});
-
-allMembersCheckbox.addEventListener('click', () => {
-  applyTrustCheckboxConstraints(allMembersCheckbox);
-});
-
-publishOfferButton.addEventListener('click', async () => {
-  await publishOffer();
-  await myOffers.getOffersFromApi();
-  await myOffers.render();
-});
-
-updateBtcInput();
-
-const myOffers = new MyOffers(ownOffersContainer);