Improve CoinGecko stability, add attribution (#188)

index.template.html

@@ -1207,6 +1207,8 @@ <h2 id="mnLastSeen" class="stake-balances" style="overflow-wrap: anywhere; top:
                         <!-- Populated via JS at Price Source data load (prices.js) -->
                       </select>
 
+                      <p style="opacity: 0.6; margin-top: 5px;"><span data-i18n="priceProvidedBy">Price data provided by</span> <a class="active" href="https://www.coingecko.com/" target="_blank" rel="noopener noreferrer">CoinGecko</a></p>
+
                       <br />
 
                       <label for="displayDecimals" data-i18n="settingsDecimals">Balance Decimals:</label> <span class="sliderDisplay" id="sliderDisplay">(-)</span>

locale/de/translation.js

@@ -169,6 +169,7 @@ export const de_translation = {
 
     // Settings
     settingsCurrency: 'Wähle die angezeigte Währung', //Choose a display currency:
+    priceProvidedBy: '', //Price data provided by
     settingsDecimals: '', //Balance Decimals:
     settingsExplorer: 'Wähle einen Explorer', //Choose an explorer:
     settingsLanguage: 'Wähle eine Sprache', //Choose a Language:

locale/en/translation.js

@@ -170,6 +170,7 @@ export const en_translation = {
 
     // Settings
     settingsCurrency: 'Choose a display currency:', //
+    priceProvidedBy: 'Price data provided by', //
     settingsDecimals: 'Balance Decimals:', //
     settingsExplorer: 'Choose an explorer:', //
     settingsLanguage: 'Choose a Language:', //

locale/fr/translation.js

@@ -168,6 +168,7 @@ export const fr_translation = {
 
     // Settings
     settingsCurrency: "Choisissez une devise d'affichage :", //Choose a display currency:
+    priceProvidedBy: '', //Price data provided by
     settingsDecimals: 'Solde Décimales :', //Balance Decimals:
     settingsExplorer: 'Choisissez un explorateur :', //Choose an explorer:
     settingsLanguage: 'Choisissez une langue :', //Choose a Language:

locale/ph/translation.js

@@ -170,6 +170,7 @@ export const ph_translation = {
 
     // Settings
     settingsCurrency: 'Pumili ng display currency:', //Choose a display currency:
+    priceProvidedBy: '', //Price data provided by
     settingsDecimals: '', //Balance Decimals:
     settingsExplorer: 'Pumili ng explorer:', //Choose an explorer:
     settingsLanguage: 'Pumili ng Wika:', //Choose a Language:

locale/pt-br/translation.js

@@ -170,6 +170,7 @@ export const pt_br_translation = {
 
     // Settings
     settingsCurrency: 'Escolha uma moeda de exibição:', //Choose a display currency:
+    priceProvidedBy: '', //Price data provided by
     settingsDecimals: '', //Balance Decimals:
     settingsExplorer: 'Escolha um explorador:', //Choose an explorer:
     settingsLanguage: 'Escolha um Idioma:', //Choose a Language:

locale/pt-pt/translation.js

@@ -169,6 +169,7 @@ export const pt_pt_translation = {
 
     // Settings
     settingsCurrency: 'Escolha uma moeda de exibição:', //Choose a display currency:
+    priceProvidedBy: '', //Price data provided by
     settingsDecimals: '', //Balance Decimals:
     settingsExplorer: 'Escolha um explorador:', //Choose an explorer:
     settingsLanguage: 'Escolha um Idioma:', //Choose a Language:

locale/template/translation.js

@@ -176,6 +176,7 @@ var translation = {
 
     // Settings
     settingsCurrency: '', //Choose a display currency:
+    priceProvidedBy: '', //Price data provided by
     settingsDecimals: '', //Balance Decimals:
     settingsExplorer: '', //Choose an explorer:
     settingsLanguage: '', //Choose a Language:

locale/uwu/translation.js

@@ -173,6 +173,7 @@ export const uwu_translation = {
 
     // Settings
     settingsCurrency: 'Chowose a dispway cuwwency:', //Choose a display currency:
+    priceProvidedBy: 'Pwice data pwovided by', //Price data provided by
     settingsDecimals: 'Balance Decimawls:', //Balance Decimals:
     settingsExplorer: 'Chowose an expwower:', //Choose an explorer:
     settingsLanguage: 'Chowose a Languwuage:', //Choose a Language:

scripts/global.js

@@ -653,9 +653,11 @@ export function optimiseCurrencyLocale(nAmount) {
  * @param {HTMLElement} domValue
  * @param {boolean} fCold
  */
-export function updatePriceDisplay(domValue, fCold = false) {
+export async function updatePriceDisplay(domValue, fCold = false) {
     // Update currency values
-    cMarket.getPrice(strCurrency).then((nPrice) => {
+    const nPrice = await cMarket.getPrice(strCurrency);
+
+    if (nPrice) {
         // Calculate the value
         const nCurrencyValue =
             ((fCold ? getStakingBalance() : getBalance()) / COIN) * nPrice;
@@ -664,7 +666,7 @@ export function updatePriceDisplay(domValue, fCold = false) {
 
         // Update the DOM
         domValue.innerText = nValue.toLocaleString('en-gb', cLocale);
-    });
+    }
 }
 
 export function getBalance(updateGUI = false) {
@@ -1203,6 +1205,10 @@ export function toggleBottomMenu(dom, ani) {
 export async function updateAmountInputPair(domCoin, domValue, fCoinEdited) {
     // Fetch the price in the user's preferred currency
     const nPrice = await cMarket.getPrice(strCurrency);
+
+    // If there is no price loaded, then we just won't do anything
+    if (!nPrice) return;
+
     if (fCoinEdited) {
         // If the 'Coin' input is edited, then update the 'Value' input with it's converted currency
         const nValue = Number(domCoin.value) * nPrice;

scripts/prices.js

@@ -1,4 +1,5 @@
 import { getBalance } from './global';
+import { isEmpty } from './misc';
 import { cMarket, fillCurrencySelect } from './settings';
 
 /**
@@ -33,7 +34,13 @@ export class MarketSource {
      * @returns {Promise<object>}
      */
     async fetch() {
-        return (this.cData = await (await fetch(this.strEndpoint)).json());
+        try {
+            return (this.cData = await (await fetch(this.strEndpoint)).json());
+        } catch (e) {
+            console.warn('CoinGecko: Failed to fetch prices!');
+            console.warn(e);
+            return null;
+        }
     }
 }
 
@@ -54,7 +61,7 @@ export class CoinGecko extends MarketSource {
      */
     async getPrice(strCurrency) {
         await this.ensureCacheExists();
-        return this.cData.market_data.current_price[strCurrency];
+        return this.cData?.market_data?.current_price[strCurrency] || 0;
     }
 
     /**
@@ -63,20 +70,22 @@ export class CoinGecko extends MarketSource {
      */
     async getCurrencies() {
         await this.ensureCacheExists();
-        return Object.keys(this.cData.market_data.current_price);
+        return !isEmpty(this.cData)
+            ? Object.keys(this.cData.market_data.current_price)
+            : [];
     }
 }
 
 /**
  * Refreshes market data from the user's data source, then re-renders currency options and price displays
  */
 export async function refreshPriceDisplay() {
-    // Refresh our price data
-    await cMarket.fetch();
+    // Refresh our price data, and if successful, update the UI
+    if (!isEmpty(await cMarket.fetch())) {
+        // Update the currency customisation menu from the selected data source
+        await fillCurrencySelect();
 
-    // Update the currency customisation menu from the selected data source
-    await fillCurrencySelect();
-
-    // Update price values
-    getBalance(true);
+        // Update price values
+        getBalance(true);
+    }
 }

scripts/settings.js

@@ -18,7 +18,7 @@ import {
 } from './wallet.js';
 import { cChainParams } from './chain_params.js';
 import { setNetwork, ExplorerNetwork, getNetwork } from './network.js';
-import { confirmPopup, createAlert } from './misc.js';
+import { confirmPopup, createAlert, isEmpty } from './misc.js';
 import {
     switchTranslation,
     ALERTS,
@@ -194,6 +194,7 @@ export async function start() {
         analytics: strSettingAnalytics,
         autoswitch,
         coldAddress,
+        displayCurrency,
         displayDecimals,
     } = await database.getSettings();
 
@@ -204,6 +205,9 @@ export async function start() {
     fAutoSwitch = autoswitch;
     doms.domAutoSwitchToggle.checked = fAutoSwitch;
 
+    // Set the display currency
+    strCurrency = doms.domCurrencySelect.value = displayCurrency;
+
     // Set the display decimals
     nDisplayDecimals = displayDecimals;
     doms.domDisplayDecimalsSlider.value = nDisplayDecimals;
@@ -361,16 +365,21 @@ async function fillTranslationSelect() {
  * Fills the display currency dropbox on the settings page
  */
 export async function fillCurrencySelect() {
-    while (doms.domCurrencySelect.options.length > 0) {
-        doms.domCurrencySelect.remove(0);
-    }
+    const arrCurrencies = await cMarket.getCurrencies();
 
-    // Add each data source currency into the UI selector
-    for (const currency of await cMarket.getCurrencies()) {
-        const opt = document.createElement('option');
-        opt.innerHTML = currency.toUpperCase();
-        opt.value = currency;
-        doms.domCurrencySelect.appendChild(opt);
+    // Only update if we have a currency list
+    if (!isEmpty(arrCurrencies)) {
+        while (doms.domCurrencySelect.options.length > 0) {
+            doms.domCurrencySelect.remove(0);
+        }
+
+        // Add each data source currency into the UI selector
+        for (const currency of arrCurrencies) {
+            const opt = document.createElement('option');
+            opt.innerHTML = currency.toUpperCase();
+            opt.value = currency;
+            doms.domCurrencySelect.appendChild(opt);
+        }
     }
 
     const database = await Database.getInstance();