sat field

src/public/css/offers.css

@@ -1,25 +1,24 @@
-#eur-amount {
+.money-amount-input-area {
   padding: 0;
-  width: 50%;
+  width: 10em;
 }
 
-#eur-amount > * {
+.money-amount-input-area > * {
   display: inline-block;
   font-size: 1em;
   height: 2em;
   vertical-align: middle;
 }
 
-#input-eur-amount {
+.input-money-amount {
   width: 75%;
 }
-
-#eur-amount #eur-symbol {
+.money-amount-input-area .curr-symbol {
   background-color: #d8d8d8;
-  width: 25%;
+  width: 12;
 }
 
-#eur-amount #eur-symbol #eur-character {
+.money-amount-input-area .curr-symbol .curr-character {
   display: flex;
   justify-content: center;
   align-items: center;

src/public/javascript/offers.js

@@ -19,6 +19,7 @@ const buttonDecreasePremium = document.getElementById(
 );
 
 const eurAmountInput = document.getElementById('input-eur-amount');
+const btcAmountInput = document.getElementById('input-btc-amount');
 
 function toggleCreateOfferControls() {
   createOfferControls.style.display =
@@ -35,14 +36,6 @@ function modifyPremiumValue(delta) {
   premiumValue.innerText = newValue;
 }
 
-buttonStartCreateOffer.addEventListener('click', () => {
-  toggleCreateOfferControls();
-});
-
-closeOfferControls.addEventListener('click', () => {
-  toggleCreateOfferControls();
-});
-
 function toggleBuyOrSellButtonGroup() {
   buyOrSellButtons.forEach((button) => {
     if (button.classList.contains('selected')) {
@@ -53,16 +46,26 @@ function toggleBuyOrSellButtonGroup() {
   });
 }
 
-function validateAndFormatEurAmountInput() {
+function readIntFromEurAmountInput() {
   const eurAmountFieldValue = eurAmountInput.value;
-  const regularExpression = /€?\s?(\d+[.,]?\d*)\s?€?/;
+  const regularExpression = /([\d\s]+)/;
   const matchResult = eurAmountFieldValue.match(regularExpression);
 
-  eurAmountInput.classList.remove('input-is-valid', 'input-is-invalid');
-  if (matchResult) {
+  if (!matchResult) {
+    return null;
+  }
+
   const numberString = matchResult[1];
-    const cleanInputNumber = parseInt(numberString);
-    eurAmountInput.value = `${cleanInputNumber} €`;
+  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;
   }
@@ -70,6 +73,27 @@ function validateAndFormatEurAmountInput() {
   eurAmountInput.classList.add('input-is-invalid');
 }
 
+function formatNumberWithSpaces(num) {
+  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+}
+
+function updateBtcInput() {
+  const eurToSatRate = 1021;
+  const cleanEurAmount = readIntFromEurAmountInput();
+
+  const satsAmount = cleanEurAmount * eurToSatRate;
+  const formattedSatsAmount = formatNumberWithSpaces(satsAmount);
+  btcAmountInput.value = formattedSatsAmount;
+}
+
+buttonStartCreateOffer.addEventListener('click', () => {
+  toggleCreateOfferControls();
+});
+
+closeOfferControls.addEventListener('click', () => {
+  toggleCreateOfferControls();
+});
+
 buyOrSellButtons.forEach((button) => {
   button.addEventListener('click', () => {
     toggleBuyOrSellButtonGroup();
@@ -86,4 +110,9 @@ buttonDecreasePremium.addEventListener('click', () => {
 
 eurAmountInput.addEventListener('blur', () => {
   validateAndFormatEurAmountInput();
+  updateBtcInput();
+});
+
+eurAmountInput.addEventListener('input', () => {
+  eurAmountInput.value = eurAmountInput.value.replace(/[^0-9]/g, '');
 });

src/views/offers.ejs

@@ -42,14 +42,27 @@
         </div>
         <div id="amount-area">
           <p>¿Cuánto?</p>
-          <div id="eur-amount">
+          <div id="eur-amount" class="money-amount-input-area">
             <input
               id="input-eur-amount"
               type="text"
+              class="money-input input-money-amount"
               required
-              class="money-input"
-            /><div id="eur-symbol">
-              <span id="eur-character">€</span>
+            />
+            <div id="eur-symbol" class="curr-symbol">
+              <span id="eur-character" class="curr-character">€</span>
+            </div>
+          </div>
+          <div id="btc-amount" class="money-amount-input-area">
+            
+            <input
+              id="input-btc-amount"
+              type="text"
+              class="money-input input-money-amount"
+              disabled
+            />
+            <div id="sats-symbol" class="curr-symbol">
+              <span id="sats-character" class="curr-character">SAT</span>
             </div>
           </div>
         </div>