ui: Chart update/fixes + wallets (prices) use TOR <> API.

basicswap/static/js/offerstable.js

@@ -1,3 +1,5 @@
+// Config
+
 const coinNameToSymbol = {
   'Bitcoin': 'bitcoin',
   'Particl': 'particl',
@@ -6,8 +8,8 @@ const coinNameToSymbol = {
   'Monero': 'monero',
   'Wownero': 'wownero',
   'Litecoin': 'litecoin',
-  'Firo': 'zcoin',
+  'Firo': 'firo',
-  'Zcoin': 'zcoin',
+  'Zcoin': 'firo',
   'Dash': 'dash',
   'PIVX': 'pivx',
   'Decred': 'decred',
@@ -52,7 +54,30 @@ function makePostRequest(url, headers = {}) {
 
 const symbolToCoinName = {
   ...Object.fromEntries(Object.entries(coinNameToSymbol).map(([key, value]) => [value, key])),
-  'zcoin': 'Firo'
+  'zcoin': 'Firo',
+  'firo': 'Firo'
+};
+
+function getDisplayName(coinName) {
+  return coinNameToDisplayName[coinName] || coinName;
+}
+
+const coinNameToDisplayName = {
+  'Bitcoin': 'Bitcoin',
+  'Litecoin': 'Litecoin',
+  'Monero': 'Monero',
+  'Particl': 'Particl',
+  'Particl Blind': 'Particl Blind',
+  'Particl Anon': 'Particl Anon',
+  'PIVX': 'PIVX',
+  'Firo': 'Firo',
+  'Zcoin': 'Firo',
+  'Dash': 'Dash',
+  'Decred': 'Decred',
+  'Wownero': 'Wownero',
+  'Bitcoin Cash': 'Bitcoin Cash',
+  'Dogecoin': 'Dogecoin',
+  'Zano': 'Zano'
 };
 
 let latestPrices = null;
@@ -136,7 +161,7 @@ const MIN_REFRESH_INTERVAL = 30; // Minimum refresh interval in seconds
 const isSentOffers = window.offersTableConfig.isSentOffers;
 
 let currentPage = 1;
-const itemsPerPage = 50;
+const itemsPerPage = 20;
 
 const coinIdToName = {
   1: 'particl', 2: 'bitcoin', 3: 'litecoin', 4: 'decred',
@@ -164,12 +189,20 @@ function getCoinSymbol(fullName) {
   const symbolMap = {
     'Bitcoin': 'BTC', 'Litecoin': 'LTC', 'Monero': 'XMR',
     'Particl': 'PART', 'Particl Blind': 'PART', 'Particl Anon': 'PART',
-    'PIVX': 'PIVX', 'Firo': 'FIRO', 'Dash': 'DASH',
+    'PIVX': 'PIVX', 'Firo': 'FIRO', 'Zcoin': 'FIRO',
-    'Decred': 'DCR', 'Wownero': 'WOW', 'Bitcoin Cash': 'BCH'
+    'Dash': 'DASH', 'Decred': 'DCR', 'Wownero': 'WOW',
+    'Bitcoin Cash': 'BCH'
   };
   return symbolMap[fullName] || fullName;
 }
 
+function getDisplayName(coinName) {
+  if (coinName.toLowerCase() === 'zcoin') {
+    return 'Firo';
+  }
+  return coinNameToDisplayName[coinName] || coinName;
+}
+
 function getValidOffers() {
     if (isSentOffers) {
         return jsonData;
@@ -223,7 +256,7 @@ function setRefreshButtonLoading(isLoading) {
 
   refreshButton.disabled = isLoading;
   refreshIcon.classList.toggle('animate-spin', isLoading);
-  refreshText.textContent = isLoading ? 'Refreshing...' : 'Refresh';
+  refreshText.textContent = isLoading ? 'Refresh' : 'Refresh'; //to-do
 }
 
 function escapeHtml(unsafe) {
@@ -630,9 +663,28 @@ function filterAndSortData() {
 
     const uniqueOffersMap = new Map();
 
+    const isFiroOrZcoin = (coin) => ['firo', 'zcoin'].includes(coin.toLowerCase());
+    const isParticlVariant = (coin) => ['particl', 'particl anon', 'particl blind'].includes(coin.toLowerCase());
+
+    const coinMatches = (offerCoin, filterCoin) => {
+        offerCoin = offerCoin.toLowerCase();
+        filterCoin = filterCoin.toLowerCase();
+        
+        if (offerCoin === filterCoin) return true;
+        if (isFiroOrZcoin(offerCoin) && isFiroOrZcoin(filterCoin)) return true;
+        
+        if (isParticlVariant(filterCoin)) {
+            return offerCoin === filterCoin;
+        }
+        
+        if (filterCoin === 'particl' && isParticlVariant(offerCoin)) return true;
+        
+        return false;
+    };
+
     originalJsonData.forEach(offer => {
-        const coinFrom = (offer.coin_from || '').toLowerCase();
+        const coinFrom = (offer.coin_from || '');
-        const coinTo = (offer.coin_to || '').toLowerCase();
+        const coinTo = (offer.coin_to || '');
         const isExpired = offer.expire_at <= currentTime;
 
         if (!isSentOffers && isExpired) {
@@ -641,10 +693,10 @@ function filterAndSortData() {
 
         let passesFilter = true;
 
-        if (filters.coin_to !== 'any' && coinTo.toLowerCase() !== filters.coin_to.toLowerCase()) {
+        if (filters.coin_to !== 'any' && !coinMatches(coinTo, filters.coin_to)) {
             passesFilter = false;
         }
-        if (filters.coin_from !== 'any' && coinFrom.toLowerCase() !== filters.coin_from.toLowerCase()) {
+        if (filters.coin_from !== 'any' && !coinMatches(coinFrom, filters.coin_from)) {
             passesFilter = false;
         }
 
@@ -745,14 +797,12 @@ function updateProfitLoss(row, fromCoin, toCoin, fromAmount, toAmount, isOwnOffe
 function createTableRow(offer, isSentOffers) {
   const row = document.createElement('tr');
   row.className = `opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600`;
-    row.setAttribute('data-offer-id', `${offer.offer_id}_${offer.created_at}`);
+  row.setAttribute('data-offer-id', `${offer.offer_id}_${offer.created_at}`);
 
-  const coinFrom = offer.coin_from ? (symbolToCoinName[coinNameToSymbol[offer.coin_from]] || offer.coin_from) : 'Unknown';
+  const coinFromSymbol = coinNameToSymbol[offer.coin_from] || offer.coin_from.toLowerCase();
-  const coinTo = offer.coin_to ? (symbolToCoinName[coinNameToSymbol[offer.coin_to]] || offer.coin_to) : 'Unknown';
+  const coinToSymbol = coinNameToSymbol[offer.coin_to] || offer.coin_to.toLowerCase();
-
+  const coinFromDisplay = getDisplayName(offer.coin_from);
-  if (coinFrom === 'Unknown' || coinTo === 'Unknown') {
+  const coinToDisplay = getDisplayName(offer.coin_to);
-    console.warn(`Invalid coin data for offer ${offer.offer_id}: coinFrom=${coinFrom}, coinTo=${coinTo}`);
-  }
 
   const postedTime = formatTimeAgo(offer.created_at);
   const expiresIn = formatTimeLeft(offer.expire_at);
@@ -760,7 +810,6 @@ function createTableRow(offer, isSentOffers) {
   const currentTime = Math.floor(Date.now() / 1000);
   const isActuallyExpired = currentTime > offer.expire_at;
 
-  // Determine if this offer should be treated as a sent offer
   const isOwnOffer = offer.is_own_offer;
 
   const { buttonClass, buttonText } = getButtonProperties(isActuallyExpired, isSentOffers, isOwnOffer);
@@ -771,16 +820,16 @@ function createTableRow(offer, isSentOffers) {
   row.innerHTML = `
     ${createTimeColumn(offer, postedTime, expiresIn)}
     ${createDetailsColumn(offer)}
-    ${createTakerAmountColumn(offer, coinFrom, coinTo)}
+    ${createTakerAmountColumn(offer, coinToDisplay, coinFromDisplay, coinFromSymbol)}
-    ${createSwapColumn(offer, coinFrom, coinTo)}
+    ${createSwapColumn(offer, coinToDisplay, coinFromDisplay, coinToSymbol, coinFromSymbol)}
-    ${createOrderbookColumn(offer, coinTo, coinFrom)}
+    ${createOrderbookColumn(offer, coinFromDisplay, coinToDisplay)}
-    ${createRateColumn(offer, coinFrom, coinTo)}
+    ${createRateColumn(offer, coinFromDisplay, coinToDisplay)}
     ${createPercentageColumn(offer)}
     ${createActionColumn(offer, buttonClass, buttonText)}
-    ${createTooltips(offer, isOwnOffer, coinFrom, coinTo, fromAmount, toAmount, postedTime, expiresIn, isActuallyExpired)}
+    ${createTooltips(offer, isOwnOffer, coinFromDisplay, coinToDisplay, fromAmount, toAmount, postedTime, expiresIn, isActuallyExpired)}
   `;
 
-  updateProfitLoss(row, coinFrom, coinTo, fromAmount, toAmount, isOwnOffer);
+  updateProfitLoss(row, coinFromDisplay, coinToDisplay, fromAmount, toAmount, isOwnOffer);
 
   return row;
 }
@@ -966,8 +1015,16 @@ async function calculateProfitLoss(fromCoin, toCoin, fromAmount, toAmount, isOwn
     return null;
   }
 
-  const fromSymbol = coinNameToSymbol[fromCoin] || fromCoin.toLowerCase();
+  const getPriceKey = (coin) => {
-  const toSymbol = coinNameToSymbol[toCoin] || toCoin.toLowerCase();
+    const lowerCoin = coin.toLowerCase();
+    if (lowerCoin === 'firo' || lowerCoin === 'zcoin') {
+      return 'zcoin';
+    }
+    return coinNameToSymbol[coin] || lowerCoin;
+  };
+
+  const fromSymbol = getPriceKey(fromCoin);
+  const toSymbol = getPriceKey(toCoin);
 
   const fromPriceUSD = latestPrices[fromSymbol]?.usd;
   const toPriceUSD = latestPrices[toSymbol]?.usd;
@@ -993,7 +1050,6 @@ async function calculateProfitLoss(fromCoin, toCoin, fromAmount, toAmount, isOwn
 
   return percentDiff;
 }
-
 function getProfitColorClass(percentage) {
   const numericPercentage = parseFloat(percentage);
   if (numericPercentage > 0) return 'text-green-500';
@@ -1010,8 +1066,20 @@ function getMarketRate(fromCoin, toCoin) {
             resolve(null);
             return;
         }
-        const fromPrice = latestPrices[fromCoin.toLowerCase()]?.usd;
+
-        const toPrice = latestPrices[toCoin.toLowerCase()]?.usd;
+        const getPriceKey = (coin) => {
+            const lowerCoin = coin.toLowerCase();
+            if (lowerCoin === 'firo' || lowerCoin === 'zcoin') {
+                return 'zcoin';
+            }
+            return coinNameToSymbol[coin] || lowerCoin;
+        };
+
+        const fromSymbol = getPriceKey(fromCoin);
+        const toSymbol = getPriceKey(toCoin);
+
+        const fromPrice = latestPrices[fromSymbol]?.usd;
+        const toPrice = latestPrices[toSymbol]?.usd;
         if (!fromPrice || !toPrice) {
             console.warn(`Missing price data for ${!fromPrice ? fromCoin : toCoin}`);
             resolve(null);
@@ -1088,18 +1156,26 @@ function createTakerAmountColumn(offer, coinTo, coinFrom) {
   `;
 }
 
-function createSwapColumn(offer, coinTo, coinFrom) {
+function createSwapColumn(offer, coinToDisplay, coinFromDisplay, coinToSymbol, coinFromSymbol) {
+  const getImageFilename = (symbol, displayName) => {
+    if (displayName.toLowerCase() === 'zcoin' || displayName.toLowerCase() === 'firo') {
+      return 'firo.png';
+    }
+    return `${symbol.toLowerCase()}.png`;
+  };
+
   return `
     <td class="py-0 px-0 text-right text-sm">
       <a data-tooltip-target="tooltip-offer${offer.offer_id}" href="/offer/${offer.offer_id}">
         <div class="flex items-center justify-evenly monospace">
           <span class="inline-flex mr-3 ml-3 align-middle items-center justify-center w-18 h-20 rounded">
-            <img class="h-12" src="/static/images/coins/${coinFrom.replace(" ", "-")}.png" alt="${coinFrom}">
+            <img class="h-12" src="/static/images/coins/${getImageFilename(coinFromSymbol, coinFromDisplay)}" alt="${coinFromDisplay}">
           </span>
-             <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg ">
+          <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-             <path fill-rule="evenodd " d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z " clip-rule="evenodd"></path></svg>
+            <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+          </svg>
           <span class="inline-flex ml-3 mr-3 align-middle items-center justify-center w-18 h-20 rounded">
-            <img class="h-12" src="/static/images/coins/${coinTo.replace(" ", "-")}.png" alt="${coinTo}">
+            <img class="h-12" src="/static/images/coins/${getImageFilename(coinToSymbol, coinToDisplay)}" alt="${coinToDisplay}">
           </span>
         </div>
       </a>
@@ -1134,8 +1210,13 @@ function createRateColumn(offer, coinFrom, coinTo) {
   const fromSymbol = getCoinSymbol(coinFrom);
   const toSymbol = getCoinSymbol(coinTo);
   
-  const fromPriceUSD = latestPrices[coinNameToSymbol[coinFrom]]?.usd || 0;
+  const getPriceKey = (coin) => {
-  const toPriceUSD = latestPrices[coinNameToSymbol[coinTo]]?.usd || 0;
+    const lowerCoin = coin.toLowerCase();
+    return lowerCoin === 'firo' || lowerCoin === 'zcoin' ? 'zcoin' : coinNameToSymbol[coin] || lowerCoin;
+  };
+
+  const fromPriceUSD = latestPrices[getPriceKey(coinFrom)]?.usd || 0;
+  const toPriceUSD = latestPrices[getPriceKey(coinTo)]?.usd || 0;
 
   const rateInUSD = rate * toPriceUSD;
 
@@ -1300,12 +1381,16 @@ function createTooltipContent(isSentOffers, coinFrom, coinTo, fromAmount, toAmou
             <p>Invalid coin data.</p>`;
   }
 
-  // Ensure fromAmount and toAmount are numbers
   fromAmount = parseFloat(fromAmount) || 0;
   toAmount = parseFloat(toAmount) || 0;
 
-  const fromSymbol = coinNameToSymbol[coinFrom] || coinFrom.toLowerCase();
+  const getPriceKey = (coin) => {
-  const toSymbol = coinNameToSymbol[coinTo] || coinTo.toLowerCase();
+    const lowerCoin = coin.toLowerCase();
+    return lowerCoin === 'firo' || lowerCoin === 'zcoin' ? 'zcoin' : coinNameToSymbol[coin] || lowerCoin;
+  };
+
+  const fromSymbol = getPriceKey(coinFrom);
+  const toSymbol = getPriceKey(coinTo);
   const fromPriceUSD = latestPrices[fromSymbol]?.usd;
   const toPriceUSD = latestPrices[toSymbol]?.usd;
 
@@ -1361,11 +1446,18 @@ function createTooltipContent(isSentOffers, coinFrom, coinTo, fromAmount, toAmou
     <p><strong>Offer Rate:</strong> 1 ${coinFrom} = ${offerRate.toFixed(8)} ${coinTo}</p>
   `;
 }
+
 function createCombinedRateTooltip(offer, coinFrom, coinTo, isSentOffers, treatAsSentOffer) {
   const rate = parseFloat(offer.rate);
   const inverseRate = 1 / rate;
-  const fromSymbol = getCoinSymbolLowercase(coinFrom);
+  
-  const toSymbol = getCoinSymbolLowercase(coinTo);
+  const getPriceKey = (coin) => {
+    const lowerCoin = coin.toLowerCase();
+    return lowerCoin === 'firo' || lowerCoin === 'zcoin' ? 'zcoin' : getCoinSymbolLowercase(coin);
+  };
+
+  const fromSymbol = getPriceKey(coinFrom);
+  const toSymbol = getPriceKey(coinTo);
   
   const fromPriceUSD = latestPrices[fromSymbol]?.usd || 0;
   const toPriceUSD = latestPrices[toSymbol]?.usd || 0;
@@ -1568,7 +1660,6 @@ function startRefreshCountdown() {
     }
 
     function startCountdown() {
-        // Clear any existing intervals
         if (countdownInterval) {
             clearInterval(countdownInterval);
         }

basicswap/templates/offers.html

@@ -74,15 +74,15 @@ function getAPIKeys() {
                 <div class="flex items-center justify-between">
                   <h2 class="text-xl font-bold dark:text-white" id="chart-title">Price Chart</h2>
                   <div class="flex items-center space-x-4">
-                    <button id="resolution-month" class="ml-5 resolution-button">1Y</button>
+                  <button id="resolution-year" class="ml-5 resolution-button">1Y</button>
-                    <button id="resolution-week" class="resolution-button">1M</button>
+                  <button id="resolution-sixMonths" class="resolution-button">6M</button>
-                    <button id="resolution-day" class="resolution-button">24H</button>
+                  <button id="resolution-day" class="resolution-button">24H</button>
                   </div>
                 </div>
                 <div class="flex items-center">
-                  <span id="load-time" class="mr-2 text-sm text-gray-600 dark:text-gray-300"></span>
+                  <span id="load-time hidden" class="mr-2 text-sm text-gray-600 dark:text-gray-300"></span>
-                  <span id="last-refreshed-time" class="mr-2 text-sm text-gray-600 dark:text-gray-300"></span>
+                  <span id="last-refreshed-time hidden" class="mr-2 text-sm text-gray-600 dark:text-gray-300"></span>
-                  <span id="cache-status" class="mr-4 text-sm text-gray-600 dark:text-gray-300"></span>
+                  <span id="cache-status hidden" class="mr-4 text-sm text-gray-600 dark:text-gray-300"></span>
                   <span id="tor-status" class="mr-4 text-sm {% if tor_established %}text-green-500{% else %}text-red-500{% endif %}"> Tor <> API: {% if tor_established %}Connected{% else %}Not Connected{% endif %}
                     <a href="https://academy.particl.io/en/latest/basicswap-guides/basicswapguides_tor.html" target="_blank" rel="noopener noreferrer" class="underline">(?)</a>
                   </span>       
@@ -388,7 +388,7 @@ function getAPIKeys() {
               <p class="text-sm font-heading dark:text-gray-400 mr-4">Last refreshed:
                 <span id="lastRefreshTime">Never</span>
               </p>
-              <p class="text-sm font-heading dark:text-gray-400 mr-4">Listings:
+              <p class="text-sm font-heading dark:text-gray-400 mr-4">Network Listings:
                 <span id="newEntriesCount"></span>
               </p>
               <p class="text-sm font-heading dark:text-gray-400 mr-4">Next refresh:

basicswap/templates/wallets.html

@@ -207,6 +207,43 @@
 {% include 'footer.html' %}
 
 <script>
+const api = {
+  makePostRequest: (url, headers = {}) => {
+    return new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+      xhr.open('POST', '/json/readurl');
+      xhr.setRequestHeader('Content-Type', 'application/json');
+      xhr.timeout = 30000;
+      xhr.ontimeout = () => reject(new Error('Request timed out'));
+      xhr.onload = () => {
+        console.log(`Response for ${url}:`, xhr.responseText);
+        if (xhr.status === 200) {
+          try {
+            const response = JSON.parse(xhr.responseText);
+            if (response.Error) {
+              console.error(`API Error for ${url}:`, response.Error);
+              reject(new Error(response.Error));
+            } else {
+              resolve(response);
+            }
+          } catch (error) {
+            console.error(`Invalid JSON response for ${url}:`, xhr.responseText);
+            reject(new Error(`Invalid JSON response: ${error.message}`));
+          }
+        } else {
+          console.error(`HTTP Error for ${url}: ${xhr.status} ${xhr.statusText}`);
+          reject(new Error(`HTTP Error: ${xhr.status} ${xhr.statusText}`));
+        }
+      };
+      xhr.onerror = () => reject(new Error('Network error occurred'));
+      xhr.send(JSON.stringify({
+        url: url,
+        headers: headers
+      }));
+    });
+  },
+};
+
 const coinNameToSymbol = {
   'Bitcoin': 'BTC',
   'Particl': 'PART',
@@ -222,73 +259,43 @@ const coinNameToSymbol = {
   'Zano': 'ZANO',
 };
 
-const getUsdValue = (cryptoValue, coinSymbol) => {
+const getUsdValue = async (cryptoValue, coinSymbol) => {
   let apiUrl;
 
   if (coinSymbol === 'WOW') {
-    apiUrl = `https://api.coingecko.com/api/v3/simple/price?ids=wownero&vs_currencies=usd`;
+    apiUrl = 'https://api.coingecko.com/api/v3/simple/price?ids=wownero&vs_currencies=usd';
   } else {
     apiUrl = `https://min-api.cryptocompare.com/data/price?fsym=${coinSymbol}&tsyms=USD`;
   }
 
-  return fetch(apiUrl)
+  try {
-    .then(response => response.json())
+    const data = await api.makePostRequest(apiUrl);
-    .then(data => {
+    
-      if (coinSymbol === 'WOW') {
+    if (coinSymbol === 'WOW') {
-        const exchangeRate = data.wownero.usd;
+      const exchangeRate = data.wownero.usd;
-        if (!isNaN(exchangeRate)) {
+      if (!isNaN(exchangeRate)) {
-          return {
+        return {
-            usdValue: cryptoValue * exchangeRate,
+          usdValue: cryptoValue * exchangeRate,
-            btcValue: cryptoValue / exchangeRate
+          btcValue: cryptoValue / exchangeRate
-          };
+        };
-        } else {
-          throw new Error(`Invalid exchange rate for ${coinSymbol}`);
-        }
       } else {
-        const exchangeRate = data.USD;
+        throw new Error(`Invalid exchange rate for ${coinSymbol}`);
-        if (!isNaN(exchangeRate)) {
-          return {
-            usdValue: cryptoValue * exchangeRate,
-            btcValue: cryptoValue / exchangeRate
-          };
-        } else {
-          throw new Error(`Invalid exchange rate for ${coinSymbol}`);
-        }
-      }
-    });
-};
-
-const updateValues = async () => {
-  const coinNameValues = document.querySelectorAll('.coinname-value');
-
-  for (const coinNameValue of coinNameValues) {
-    const coinFullName = coinNameValue.getAttribute('data-coinname');
-    const cryptoValue = parseFloat(coinNameValue.textContent);
-    const coinSymbol = coinNameToSymbol[coinFullName];
-
-    if (coinSymbol) {
-      try {
-        const { usdValue, btcValue } = await getUsdValue(cryptoValue, coinSymbol);
-
-        const usdValueElement = coinNameValue.nextElementSibling.querySelector('.usd-value');
-        if (usdValueElement) {
-          usdValueElement.textContent = `$${usdValue.toFixed(2)}`;
-        }
-
-        const btcValueElement = coinNameValue.nextElementSibling.querySelector('.btc-value');
-        if (btcValueElement) {
-          btcValueElement.textContent = `${btcValue.toFixed(8)} BTC`;
-        }
-      } catch (error) {
-        console.error(`Error retrieving exchange rate for ${coinSymbol}`);
       }
     } else {
-      console.error(`Coin symbol not found for full name: ${coinFullName}`);
+      const exchangeRate = data.USD;
+      if (!isNaN(exchangeRate)) {
+        return {
+          usdValue: cryptoValue * exchangeRate,
+          btcValue: cryptoValue / exchangeRate
+        };
+      } else {
+        throw new Error(`Invalid exchange rate for ${coinSymbol}`);
+      }
     }
+  } catch (error) {
+    console.error(`Error retrieving exchange rate for ${coinSymbol}:`, error);
+    throw error;
   }
-
-  calculateTotalUsdValue();
-  calculateTotalBtcValue();
 };
 
 const toggleUsdAmount = async (usdCell, isVisible) => {
@@ -388,9 +395,8 @@ const calculateTotalBtcValue = async () => {
   let totalBtcValue = 0;
 
   try {
-    const btcToUsdRate = await fetch('https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=USD')
+    const data = await api.makePostRequest('https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=USD');
-      .then(response => response.json())
+    const btcToUsdRate = data.USD;
-      .then(data => data.USD);
 
     for (const usdValueElement of usdValueElements) {
       const usdValue = parseFloat(usdValueElement.textContent.replace('$', ''));
@@ -412,7 +418,7 @@ const calculateTotalBtcValue = async () => {
       }
     }
   } catch (error) {
-    console.error(`Error retrieving BTC to USD exchange rate: ${error}`);
+    console.error(`Error retrieving BTC to USD exchange rate:`, error);
   }
 };