Add Dynamic Cryptocurrency Selection and Display

src/index.html

@@ -7,7 +7,10 @@
 
     @@favicons
 
-    <meta name="description" content="Replace your browser New Tab page with a Bitcoin price chart" />
+    <meta
+      name="description"
+      content="Replace your browser New Tab page with a Crypto price chart"
+    />
     <meta name="image" content="https://i.imgur.com/pHG5fBk.jpg" />
     @@socialMediaTags
 
@@ -40,7 +43,11 @@ <h1 id="clock" class="time mb+ text-center mt">-:-</h1>
           </span>
         </a>
 
-        <a class="install__link" target="_blank" href="https://addons.mozilla.org/en-US/firefox/addon/crypto-tab/">
+        <a
+          class="install__link"
+          target="_blank"
+          href="https://addons.mozilla.org/en-US/firefox/addon/crypto-tab/"
+        >
           <span class="install__icon">
             <svg
               width="34"
@@ -60,7 +67,9 @@ <h1 id="clock" class="time mb+ text-center mt">-:-</h1>
                 <path
                   d="m0.064 8.728c-0.027 0.128-0.041 0.25-0.049 0.367 0.02-0.146 0.055-0.392 0.055-0.388-3e-3 7e-3 -5e-3 0.014-6e-3 0.021z"
                 />
-                <path d="m0.015 9.095c0 7e-3 -2e-3 0.013-3e-3 0.02v-2e-3c0-6e-3 2e-3 -0.012 3e-3 -0.018z" />
+                <path
+                  d="m0.015 9.095c0 7e-3 -2e-3 0.013-3e-3 0.02v-2e-3c0-6e-3 2e-3 -0.012 3e-3 -0.018z"
+                />
               </g>
             </svg>
           </span>
@@ -71,8 +80,13 @@ <h1 id="clock" class="time mb+ text-center mt">-:-</h1>
         </a>
       </div>
 
+      <div class="toggle-switch text-center mb+">
+        <label> <input type="radio" name="crypto" value="bitcoin" checked /> Bitcoin </label>
+        <label> <input type="radio" name="crypto" value="ethereum" /> Ethereum </label>
+      </div>
+
       <h2 class="chart-period mb text-center">
-        Bitcoin price is
+        <span id="crypto-type">Crypto</span> price is
         <span id="price-now">...</span>
         <span id="change"></span>
       </h2>
@@ -114,6 +128,7 @@ <h2 class="chart-period mb text-center">
               <a href="https://github.com/superKalo/crypto-tab">Open Source</a>
               |
               <a href="https://github.com/cmihaylov/bitcoin-price-api">API</a>
+              <!-- TODO: Change the source to the new API -->
             </small>
           </small>
         </p>
@@ -136,10 +151,11 @@ <h2 class="chart-period mb text-center">
     <script src="js/message.js"></script>
     <script src="js/loader.js"></script>
     <script src="js/apiCecoAdapter.js"></script>
+    <script src="js/apiBoyoAdapter.js"></script>
     <script src="js/api.js"></script>
     <script src="js/chart.js"></script>
     <script src="js/clock.js"></script>
-    <script src="js/bitcoin.js"></script>
+    <script src="js/crypto.js"></script>
     <script src="js/script.js"></script>
   </body>
 </html>

src/js/api.js

@@ -8,14 +8,11 @@ class API {
     get(_endpoint) {
         App.Loader.init();
 
-        return axios.get(this.apiAdapter.baseURL + _endpoint)
-            .then( r => r.data )
-            .then (r => {
-                App.Message.clear();
-                App.Loader.destroy();
-
-                return r;
-            });
+        return this.apiAdapter.getBitcoinRatesForPeriod(_endpoint).then((r) => {
+            App.Message.clear();
+            App.Loader.destroy();
+            return r;
+        });
     }
 
     mapData(_r, _period) {
@@ -49,8 +46,8 @@ class API {
     getBitcoinRatesNow() {
         return this.apiAdapter.getBitcoinRatesNow();
     }
-};
+}
 
 // window.App.API = new API(App.apiFakeAdapter);
 //window.App.API = new API(App.apiGoranAdapter);
-window.App.API = new API(App.apiCecoAdapter);
+window.App.API = new API(App.apiBoyoAdapter);

src/js/apiBoyoAdapter.js

@@ -0,0 +1,28 @@
+window.App.apiBoyoAdapter = {
+    mapData: function (response, dateLabelFormat) {
+        return response
+            .map((_rec) => ({
+                value: _rec.value,
+                timestamp: dayjs
+                    .utc(_rec.timestamp * 1000)
+                    .local()
+                    .format(dateLabelFormat),
+            }))
+            .reverse();
+    },
+
+    getCryptoRatesForPeriod: function (period, cryptoType) {
+        return new Promise((resolve, reject) => {
+            chrome.runtime.sendMessage(
+                { type: 'getCryptoPrice', period: period, cryptoType: cryptoType },
+                (response) => {
+                    if (response && !response.error) {
+                        resolve(response.data);
+                    } else {
+                        reject(response.error || `Failed to retrieve ${cryptoType} price data`);
+                    }
+                }
+            );
+        });
+    },
+};

src/js/apiCecoAdapter.js

@@ -1,12 +1,6 @@
 window.App = window.App || {};
 
 window.App.apiCecoAdapter = {
-    baseURL: 'https://api.crypto-tab.com/v1/',
-
-    get: function (_endpoint) {
-        return App.API.get(_endpoint);
-    },
-
     mapData: function (response, dateLabelFormat) {
         return response
             .map((_rec) => ({
@@ -19,44 +13,43 @@ window.App.apiCecoAdapter = {
             .reverse();
     },
 
-    _createDateAsUTC: function (date) {
-        return new Date(
-            Date.UTC(
-                date.getFullYear(),
-                date.getMonth(),
-                date.getDate(),
-                date.getHours(),
-                date.getMinutes(),
-                date.getSeconds()
-            )
-        );
+    getBitcoinRatesForPeriod: function (period) {
+        return new Promise((resolve, reject) => {
+            chrome.runtime.sendMessage({ type: 'getBitcoinPrice', period: period }, (response) => {
+                if (response && !response.error) {
+                    resolve(response.data);
+                } else {
+                    reject(response.error || 'Failed to retrieve Bitcoin price data');
+                }
+            });
+        });
     },
 
     getBitcoinRatesForAll: function () {
-        return this.get('bitcoin/all');
+        return this.getBitcoinRatesForPeriod('ALL');
     },
 
     getBitcoinRatesForOneYear: function () {
-        return this.get('bitcoin/year');
+        return this.getBitcoinRatesForPeriod('ONE_YEAR');
     },
 
     getBitcoinRatesForOneMonth: function () {
-        return this.get('bitcoin/month');
+        return this.getBitcoinRatesForPeriod('ONE_MONTH');
     },
 
     getBitcoinRatesForOneWeek: function () {
-        return this.get('bitcoin/week');
+        return this.getBitcoinRatesForPeriod('ONE_WEEK');
     },
 
     getBitcoinRatesForOneDay: function () {
-        return this.get('bitcoin/day');
+        return this.getBitcoinRatesForPeriod('ONE_DAY');
     },
 
     getBitcoinRatesForOneHour: function () {
-        return this.get('bitcoin/hour');
+        return this.getBitcoinRatesForPeriod('ONE_HOUR');
     },
 
     getBitcoinRatesNow: function () {
-        return this.get('bitcoin/now');
+        return this.getBitcoinRatesForPeriod('NOW');
     },
 };

src/js/background.js

@@ -0,0 +1,34 @@
+let cryptoPriceData = {
+    bitcoin: {},
+    ethereum: {},
+};
+
+async function fetchCryptoPrice(period, cryptoType) {
+    const endpoints = {
+        ALL: `${cryptoType}/all`,
+        ONE_YEAR: `${cryptoType}/year`,
+        ONE_MONTH: `${cryptoType}/month`,
+        ONE_WEEK: `${cryptoType}/week`,
+        ONE_DAY: `${cryptoType}/day`,
+        ONE_HOUR: `${cryptoType}/hour`,
+        NOW: `${cryptoType}/now`,
+    };
+
+    try {
+        const response = await fetch(`http://localhost:3000/v1/${endpoints[period]}`); // TODO: Update to use the deployed API (maybe use a config file to store the base URL)
+        const data = await response.json();
+        cryptoPriceData[cryptoType][period] = data;
+    } catch (error) {
+        console.error(`Error fetching ${cryptoType} price for ${period}:`, error);
+    }
+}
+
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+    if (request.type === 'getCryptoPrice') {
+        const { period, cryptoType } = request;
+        fetchCryptoPrice(period, cryptoType).then(() => {
+            sendResponse({ data: cryptoPriceData[cryptoType][period], cached: false });
+        });
+        return true; // Indicates that the response will be sent asynchronously
+    }
+});