feat: show info on currencies unavailable

Author: CedrikNikita

src/composables/connectionStatus.ts

@@ -7,6 +7,7 @@ import {
   useConnection,
   useAeSdk,
   useMultisigAccounts,
+  useCurrencies,
 } from '@/composables';
 import { StatusIconType } from '@/types';
 import { ROUTE_ACCOUNT } from '@/popup/router/routeNames';
@@ -19,6 +20,7 @@ interface StatusType {
   title?: TranslateResult;
   description?: TranslateResult;
   icon?: StatusIconType;
+  option?: any;
 }
 
 const CONNECTED_DISPLAY_TIME = 2000;
@@ -32,6 +34,7 @@ export function useConnectionStatus() {
   const { middlewareStatus, isMiddlewareUnavailable } = useAeMiddleware();
   const { isMultisigBackendUnavailable } = useMultisigAccounts({ pollingDisabled: true });
   const { isBackendUnavailable } = useAeTippingBackend();
+  const { isCurrenciesUnavailable } = useCurrencies({ pollingDisabled: true });
   const route = useRoute();
 
   const justBeenConnected = ref(false);
@@ -77,6 +80,17 @@ export function useConnectionStatus() {
           description: t('connectionStatus.node.error.description'),
           icon: 'critical',
         };
+      case isCurrenciesUnavailable.value:
+        return {
+          statusMessage: t('connectionStatus.currencies.statusMessage'),
+          title: t('connectionStatus.currencies.title'),
+          description: t('connectionStatus.currencies.description'),
+          icon: 'critical',
+          option: {
+            href: 'https://www.coingecko.com/',
+            target: '_blank',
+          },
+        };
       case isMiddlewareUnavailable.value:
         return {
           statusMessage: t('connectionStatus.middleware.error.title'),

src/composables/currencies.ts

@@ -52,14 +52,19 @@ const currentCurrencyCode = useStorageRef<CurrencyCode>(
 
 const initPollingWatcher = createPollingBasedOnMountedComponents(POLLING_INTERVAL);
 
+const isCurrenciesUnavailable = ref(false);
+
 export function useCurrencies({
   pollingDisabled = false,
 }: UseCurrenciesOptions = {}) {
   const { protocolsInUse, isLoggedIn } = useAccounts();
+
   const currentCurrencyInfo = computed(
     (): ICurrency => CURRENCIES.find(({ code }) => code === currentCurrencyCode.value)!,
   );
 
+  const noCurrencyRateFiat = computed(() => `${currentCurrencyCode.value.toUpperCase()} —`);
+
   function getCurrentCurrencyRate(protocol: Protocol): number {
     return currencyRates.value?.[protocol]?.[currentCurrencyCode.value] || 0;
   }
@@ -106,6 +111,9 @@ export function useCurrencies({
     if (fetchedCurrencyRates) {
       currencyRates.value = fetchedCurrencyRates;
     }
+    isCurrenciesUnavailable.value = (
+      !Object.keys(currencyRates.value).length && !Object.keys(fetchedCurrencyRates ?? {}).length
+    );
     isLoadingCurrencies.value = false;
   }
 
@@ -136,6 +144,9 @@ export function useCurrencies({
    *   according to the user's browser settings
    */
   function getFormattedFiat(value: number, protocol: Protocol) {
+    if (getCurrentCurrencyRate(protocol) === 0) {
+      return noCurrencyRateFiat.value;
+    }
     return formatCurrency(getFiat(value, protocol));
   }
 
@@ -146,7 +157,10 @@ export function useCurrencies({
    * @param protocol used protocol
    */
   function getFormattedAndRoundedFiat(value: number, protocol: Protocol): string {
-    if (!getCurrentCurrencyRate(protocol) || value === 0) {
+    if (getCurrentCurrencyRate(protocol) === 0) {
+      return noCurrencyRateFiat.value;
+    }
+    if (value === 0) {
       return formatCurrency(0);
     }
     const converted = getFiat(value, protocol);
@@ -178,6 +192,8 @@ export function useCurrencies({
     currencyRates,
     currentCurrencyCode,
     currentCurrencyInfo,
+    isCurrenciesUnavailable,
+    noCurrencyRateFiat,
     getCurrentCurrencyRate,
     loadCoinsData,
     loadCurrencyRates,

src/popup/components/ConnectionStatus.vue

@@ -17,6 +17,7 @@
           :title="status.title"
           :msg="status.description"
           :icon="status.icon"
+          :option="status.option"
           warning
           class="btn-help"
         />
@@ -141,6 +142,7 @@ export default defineComponent({
     width: unset;
     animation-name: shrink;
     animation-duration: 0.3s;
+    border-radius: 10px;
 
     &::before {
       border-radius: 10px;

src/popup/components/InputAmount.vue

@@ -95,7 +95,6 @@ export default defineComponent({
     const {
       getFormattedAndRoundedFiat,
       marketData,
-      formatCurrency,
     } = useCurrencies();
     const { balance } = useBalances();
 
@@ -128,7 +127,6 @@ export default defineComponent({
       totalAmountFormatted,
       currentAssetFiatPriceFormatted,
       currentAsset,
-      formatCurrency,
       handleAssetSelected,
     };
   },

src/popup/components/TotalWalletAmount.vue

@@ -20,10 +20,12 @@ export default defineComponent({
     isMultisig: Boolean,
   },
   setup(props) {
-    const { formatCurrency } = useCurrencies();
+    const { isCurrenciesUnavailable, noCurrencyRateFiat, formatCurrency } = useCurrencies();
 
     const totalAmount = computed(
-      () => formatCurrency(+props.totalBalance),
+      () => isCurrenciesUnavailable.value
+        ? noCurrencyRateFiat.value
+        : formatCurrency(+props.totalBalance),
     );
 
     return {

src/popup/locales/en.json

@@ -120,6 +120,11 @@
       "statusMessage": "Temporary aeternity backend failure.",
       "title": "aeternity backend failure",
       "description": "Some features such as setting default name and tipping related functionality may not be accessible at the moment due to temporary aeternity backend failure. <p> Transaction history is still accessible except the claim tip transactions that cannot be currently fetched and displayed. </p>"
+    },
+    "currencies": {
+      "statusMessage": "Unable to update assets fiat value.",
+      "title": "Unable to fetch assets fiat value",
+      "description": "Superhero Wallet is temporarily unable to properly fetch and display the updated fiat value of assets due to exceeding third party API calls limit. <p></p>Check real-time prices at <a> CoinGecko </a>"
     }
   },
   "dashboard": {