feat: add token balances/allowances alerts (#788)

src/App.vue

@@ -83,7 +83,14 @@ export default defineComponent({
       connectWallet,
       toggleWalletSelectModal
     } = useWeb3();
-    const { priceQueryError, refetchPrices } = useTokens();
+    const {
+      priceQueryError,
+      refetchPrices,
+      balancesQueryError,
+      refetchBalances,
+      allowancesQueryError,
+      refetchAllowances
+    } = useTokens();
     const store = useStore();
     const route = useRoute();
     const { upToLargeBreakpoint } = useBreakpoints();
@@ -110,16 +117,48 @@ export default defineComponent({
     watch(priceQueryError, () => {
       if (priceQueryError.value) {
         addAlert({
-          id: 'price-error',
-          label: t('alerts.price-provider-down'),
+          id: 'price-fetch-error',
+          label: t('alerts.price-fetch-error'),
           type: AlertType.ERROR,
           persistent: true,
           action: refetchPrices.value,
           actionLabel: t('alerts.retry-label'),
           priority: AlertPriority.MEDIUM
         });
       } else {
-        removeAlert('price-error');
+        removeAlert('price-fetch-error');
+      }
+    });
+
+    watch(balancesQueryError, () => {
+      if (balancesQueryError.value) {
+        addAlert({
+          id: 'balances-fetch-error',
+          label: t('alerts.balances-fetch-error'),
+          type: AlertType.ERROR,
+          persistent: true,
+          action: refetchBalances.value,
+          actionLabel: t('alerts.retry-label'),
+          priority: AlertPriority.MEDIUM
+        });
+      } else {
+        removeAlert('balances-fetch-error');
+      }
+    });
+
+    watch(allowancesQueryError, () => {
+      if (allowancesQueryError.value) {
+        addAlert({
+          id: 'allowances-fetch-error',
+          label: t('alerts.allowances-fetch-error'),
+          type: AlertType.ERROR,
+          persistent: true,
+          action: refetchAllowances.value,
+          actionLabel: t('alerts.retry-label'),
+          priority: AlertPriority.MEDIUM
+        });
+      } else {
+        removeAlert('allowances-fetch-error');
       }
     });
 

src/locales/default.json

@@ -1,6 +1,8 @@
 {
     "alerts": {
-        "price-provider-down": "Our pricing provider, Coingecko is currently down.",
+        "price-fetch-error": "Our pricing provider, Coingecko is currently down.",
+        "balances-fetch-error": "Failed to fetch token balances.",
+        "allowances-fetch-error": "Failed to fetch token allowances.",
         "retry-label": "Refresh to try again"
     },
     "account": "Account",

src/providers/tokens.provider.ts

@@ -54,6 +54,8 @@ export interface TokensProviderResponse {
   dynamicDataLoaded: ComputedRef<boolean>;
   dynamicDataLoading: ComputedRef<boolean>;
   priceQueryError: Ref<boolean>;
+  balancesQueryError: Ref<boolean>;
+  allowancesQueryError: Ref<boolean>;
   refetchPrices: Ref<() => void>;
   refetchBalances: Ref<() => void>;
   refetchAllowances: Ref<() => void>;
@@ -165,13 +167,15 @@ export default {
       data: balanceData,
       isSuccess: balanceQuerySuccess,
       isLoading: balanceQueryLoading,
+      isError: balancesQueryError,
       refetch: refetchBalances
     } = useBalancesQuery(tokens);
 
     const {
       data: allowanceData,
       isSuccess: allowanceQuerySuccess,
       isLoading: allowanceQueryLoading,
+      isError: allowancesQueryError,
       refetch: refetchAllowances
     } = useAllowancesQuery(tokens, toRef(state, 'allowanceContracts'));
 
@@ -394,6 +398,8 @@ export default {
       dynamicDataLoaded,
       dynamicDataLoading,
       priceQueryError,
+      balancesQueryError,
+      allowancesQueryError,
       // methods
       refetchPrices,
       refetchBalances,