Add Dynamic Cryptocurrency Selection and Display

src/index.html

@@ -9,7 +9,7 @@
 
     <meta
       name="description"
-      content="Replace your browser New Tab page with a Bitcoin price chart"
+      content="Replace your browser New Tab page with a Crypto price chart"
     />
     <meta name="image" content="https://i.imgur.com/pHG5fBk.jpg" />
     @@socialMediaTags
@@ -80,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>
@@ -123,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>
@@ -145,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

@@ -50,4 +50,4 @@ class API {
 
 // 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/background.js

@@ -1,30 +1,33 @@
-let bitcoinPriceData = {};
+let cryptoPriceData = {
+    bitcoin: {},
+    ethereum: {},
+};
 
-async function fetchBitcoinPrice(period) {
+async function fetchCryptoPrice(period, cryptoType) {
     const endpoints = {
-        ALL: 'bitcoin/all',
-        ONE_YEAR: 'bitcoin/year',
-        ONE_MONTH: 'bitcoin/month',
-        ONE_WEEK: 'bitcoin/week',
-        ONE_DAY: 'bitcoin/day',
-        ONE_HOUR: 'bitcoin/hour',
-        NOW: 'bitcoin/now',
+        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(`https://api.crypto-tab.com/v1/${endpoints[period]}`);
+        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();
-        bitcoinPriceData[period] = data;
+        cryptoPriceData[cryptoType][period] = data;
     } catch (error) {
-        console.error(`Error fetching Bitcoin price for ${period}:`, error);
+        console.error(`Error fetching ${cryptoType} price for ${period}:`, error);
     }
 }
 
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
-    if (request.type === 'getBitcoinPrice') {
-        const period = request.period;
-        fetchBitcoinPrice(period).then(() => {
-            sendResponse({ data: bitcoinPriceData[period], cached: false });
+    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
     }