feat: add bidirectional XMR to fiat conversion

Introduced bidirectional conversion functionality for XMR to fiat calculations. Added form elements and event listeners to handle user inputs and conversion direction. Enhanced URL and metadata processing to be dynamic based on protocol. Updated UI with conversion buttons for a better user experience. Safelisted new CSS classes in webpack configuration.
2024-09-19 21:36:15 +02:00 · 2024-08-10 16:23:52 +02:00 · 2024-08-10 16:23:52 +02:00 · e97805d379
commit e97805d379
parent 5747f73c68
4 changed files with 90 additions and 26 deletions
--- a/index.php
+++ b/index.php
@ -4,6 +4,10 @@ header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
 header("Cache-Control: post-check=0, pre-check=0", false);
 header("Pragma: no-cache");

+$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
+$currentUrl = $protocol . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
+$parentUrl = dirname($currentUrl);
+
 // Get currency data from JSON
 $api_cg = json_decode(file_get_contents('coingecko.json'), true);

@ -52,9 +56,22 @@ $lang = strtolower($lang);
 require_once "lang/{$lang}.php";

 $xmr_in = isset($_GET["in"]) ? strtoupper(htmlspecialchars($_GET["in"])) : 'EUR';
-$xmr_in_fiat = number_format($exchangeRates[$xmr_in], $xmr_in == 'BTC' || $xmr_in == 'LTC' || $xmr_in == 'ETH' || $xmr_in == 'XAG' || $xmr_in == 'XAU' ? 8 : 2);
+$xmr_amount = isset($_GET["xmr"]) ? floatval($_GET["xmr"]) : 1;
+$fiat_amount = isset($_GET["fiat"]) ? floatval($_GET["fiat"]) : '';
+$conversion_direction = isset($_GET["direction"]) ? intval($_GET["direction"]) : 0;

-$xmr_in_fiat = strtr($xmr_in_fiat, ",", " ");
+if ($conversion_direction == 0) {
+    $fiat_value = $xmr_amount * $exchangeRates[$xmr_in];
+    $xmr_value = $xmr_amount;
+} else {
+    $xmr_value = $fiat_amount / $exchangeRates[$xmr_in];
+    $fiat_value = $fiat_amount;
+}
+
+$fiat_value = number_format($fiat_value, ($xmr_in == 'BTC' || $xmr_in == 'LTC' || $xmr_in == 'ETH' || $xmr_in == 'XAG' || $xmr_in == 'XAU') ? 8 : 2);
+$xmr_value = number_format($xmr_value, 12);
+
+$fiat_value = strtr($fiat_value, ",", " ");

 // Order preferred currencies to the top
 foreach (array_reverse($preferred_currencies) as $currency) {
@ -81,7 +98,7 @@ foreach (array_reverse($preferred_currencies) as $currency) {

    <meta property="og:title" content="<?php echo $page_title; ?>" />
    <meta property="og:description" content="<?php echo $meta_description; ?>" />
-    <meta property="og:image" content="img/mstile-310x150.png" />
+    <meta property="og:image" content="<?php echo $parentUrl; ?>/img/mstile-310x150.png" />
    <meta property="og:type" content="website" />

    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="img/apple-touch-icon-57x57.png" />
@ -143,29 +160,39 @@ foreach (array_reverse($preferred_currencies) as $currency) {
                </div>
                <hr class="gold" />

-                <div class="input-group">
-                    <button id="copyXMRBtn" class="btn-outline-secondary input-group-text clipboard-copy" title="<?php echo $clipboard_copy_tooltip; ?>" data-toggle="tooltip" data-bs-html="true" data-placement="top">&#128203;</button>
-                    <input class="form-control" id="xmrInput" type="text" spellcheck="false" autocorrect="off" inputmode="numeric" aria-label="<?php echo $l_xmrInput; ?>" aria-describedby="basic-addon-xmr" value="1">
-                    <input class="input-group-text" id="basic-addon-xmr" type="text" value="XMR" aria-label="Monero" disabled>
-                </div>
+                <form method="get" action="">
+                    <div class="input-group mb-3">
+                        <button id="copyXMRBtn" class="btn-outline-secondary input-group-text clipboard-copy" title="<?php echo $clipboard_copy_tooltip; ?>" data-toggle="tooltip" data-bs-html="true" data-placement="top">&#128203;</button>
+                        <input class="form-control" id="xmrInput" name="xmr" type="text" spellcheck="false" autocorrect="off" inputmode="numeric" aria-label="<?php echo $l_xmrInput; ?>" aria-describedby="basic-addon-xmr" value="<?php echo $xmr_value; ?>">
+                        <input class="input-group-text" id="basic-addon-xmr" type="text" value="XMR" aria-label="Monero" disabled>
+                    </div>

-                <div class="equals-box">
-                    <span class="equals-text cursor-default">=</span>
-                </div>
+                    <div class="equals-box">
+                        <button id="convertXMRToFiat" type="submit" name="direction" value="0" class="btn btn-arrow">
+                            <span class="equals-text">&darr;</span>
+                        </button>
+                        <button type="button" class="btn btn-equals">
+                            <span class="equals-text cursor-default">=</span>
+                        </button>
+                        <button id="convertFiatToXMR" type="submit" name="direction" value="1" class="btn btn-arrow">
+                            <span class="equals-text">&uarr;</span>
+                        </button>
+                    </div>

-                <div class="fiatDiv input-group">
-                    <button id="copyFiatBtn" class="btn-outline-secondary input-group-text clipboard-copy" title="<?php echo $clipboard_copy_tooltip; ?>" data-toggle="tooltip" data-bs-html="true" data-placement="top">&#128203;</button>
-                    <input class="form-control" id="fiatInput" type="text" spellcheck="false" autocorrect="off" inputmode="numeric" aria-label="<?php echo $l_fiatInput; ?>" value="<?php echo $xmr_in_fiat; ?>">
-                    <select class="input-group-text cursor-pointer" id="selectBox" aria-label="<?php echo $l_fiatSelect; ?>">
-                        <?php
-                        foreach ($currencies as $currency) {
-                            $selected = $currency == $xmr_in ? 'selected' : '';
-                            $currencyName = isset(${"l_" . strtolower($currency)}) ? ${"l_" . strtolower($currency)} : $currency;
-                            echo "<option {$selected} value=\"{$currency}\">{$currencyName}</option>";
-                        }
-                        ?>
-                    </select>
-                </div>
+                    <div class="fiatDiv input-group mb-3">
+                        <button id="copyFiatBtn" class="btn-outline-secondary input-group-text clipboard-copy" title="<?php echo $clipboard_copy_tooltip; ?>" data-toggle="tooltip" data-bs-html="true" data-placement="top">&#128203;</button>
+                        <input class="form-control" id="fiatInput" name="fiat" type="text" spellcheck="false" autocorrect="off" inputmode="numeric" aria-label="<?php echo $l_fiatInput; ?>" value="<?php echo $fiat_value; ?>">
+                        <select class="input-group-text cursor-pointer" id="selectBox" name="in" aria-label="<?php echo $l_fiatSelect; ?>">
+                            <?php
+                            foreach ($currencies as $currency) {
+                                $selected = $currency == $xmr_in ? 'selected' : '';
+                                $currencyName = isset(${"l_" . strtolower($currency)}) ? ${"l_" . strtolower($currency)} : $currency;
+                                echo "<option {$selected} value=\"{$currency}\">{$currencyName}</option>";
+                            }
+                            ?>
+                        </select>
+                    </div>
+                </form>

                <hr class="gold" />
                <small class="cursor-default text-white text-info" lang="<?php echo $lang_meta; ?>">
@ -199,7 +226,6 @@ foreach (array_reverse($preferred_currencies) as $currency) {
        var exchangeRates = <?php echo json_encode($exchangeRates); ?>;
    </script>
    <script src="js/main.js"></script>
-
 </body>

 </html>
--- a/src/css/custom.css
+++ b/src/css/custom.css
@ -53,6 +53,31 @@ input.form-control {
    font-size: 42px;
 }

+.btn-arrow {
+    border: 1px solid white;
+    border-radius: 10px;
+    font-size: 38px !important;
+    color: white;
+    padding: 0;
+    cursor: pointer;
+}
+
+.btn-arrow:hover {
+    border: 1px solid black;
+    color: black;
+}
+
+.btn-equals {
+    font-size: 38px !important;
+    color: white;
+    padding: 0;
+    cursor: default;
+}
+
+.btn-equals:hover {
+    color: black;
+}
+
 .equals-text {
    vertical-align: super;
 }
--- a/src/js/main.js
+++ b/src/js/main.js
@ -20,6 +20,8 @@ document.addEventListener('DOMContentLoaded', function () {
  const xmrInput = document.getElementById('xmrInput');
  const fiatInput = document.getElementById('fiatInput');
  const selectBox = document.getElementById('selectBox');
+  const convertXMRToFiatBtn = document.getElementById('convertXMRToFiat');
+  const convertFiatToXMRBtn = document.getElementById('convertFiatToXMR');

  // Add event listeners for the copy buttons
  copyXMRBtn.addEventListener('click', copyToClipBoardXMR);
@ -62,6 +64,17 @@ document.addEventListener('DOMContentLoaded', function () {
    }
  });

+  // Add event listeners for the conversion buttons
+  convertXMRToFiatBtn.addEventListener('click', (e) => {
+    e.preventDefault();
+    xmrConvert();
+  });
+
+  convertFiatToXMRBtn.addEventListener('click', (e) => {
+    e.preventDefault();
+    fiatConvert();
+  });
+
  // Fetch updated exchange rates immediately, then every 5 seconds
  fetchUpdatedExchangeRates();
  setInterval(fetchUpdatedExchangeRates, 5000);
--- a/webpack.config.js
+++ b/webpack.config.js
@ -31,7 +31,7 @@ module.exports = {
      paths: glob.sync([
        path.join(__dirname, 'index.php')
      ]),
-      safelist: ['tooltip', 'fade', 'show', 'bs-tooltip-top', 'tooltip-inner', 'tooltip-arrow']
+      safelist: ['tooltip', 'fade', 'show', 'bs-tooltip-top', 'tooltip-inner', 'tooltip-arrow', 'btn-equals', 'btn-arrow']
    })
  ]
 };