feat: Network unavailability handling (#823)

src/components/TheHeader.vue

@@ -42,24 +42,43 @@
       class="header__warning">
       Some services are currently being synced and data accuracy might be affected. Please check again later.
     </div>
+    <div
+      v-if="!isOnline"
+      class="header__warning">
+      You are currently offline. Please check your connection.
+    </div>
+    <div
+      v-if="nodeStatus === false"
+      class="header__warning">
+      The Node is currently unavailable. Please check again later.
+    </div>
+    <div
+      v-if="middlewareStatus === false"
+      class="header__warning">
+      The Middleware is currently unavailable. Please check again later.
+    </div>
+    <div
+      v-if="isMarketCapAvailable === false"
+      class="header__warning">
+      Market Cap data are currently not available. Fiat price might not be up to date. Please check again later.
+    </div>
   </header>
 </template>
 
 <script setup>
 import { storeToRefs } from 'pinia'
-import TheNavigation from '@/components/TheNavigation'
-import AppLink from '@/components/AppLink'
-import AppIcon from '@/components/AppIcon'
-import NetworkSelect from '@/components/NetworkSelect'
+import { useOnline } from '@vueuse/core'
 import { useUiStore } from '@/stores/ui'
 import { useStatus } from '@/stores/status'
 import { MENU_HASH } from '@/utils/constants'
+import { useMarketStatsStore } from '@/stores/marketStats'
 
 const route = useRoute()
 const router = useRouter()
 const { isMobileMenuOpen } = storeToRefs(useUiStore())
-
-const { isSyncing } = storeToRefs(useStatus())
+const isOnline = useOnline()
+const { isSyncing, nodeStatus, middlewareStatus } = storeToRefs(useStatus())
+const { isMarketCapAvailable } = storeToRefs(useMarketStatsStore())
 
 onMounted(() => {
   window.addEventListener('resize', closeNavigation)

src/stores/marketStats.js

@@ -15,6 +15,7 @@ export const useMarketStatsStore = defineStore('marketStats', () => {
   const price = ref(null)
   const priceChange = ref(null)
   const marketCap = ref(null)
+  const isMarketCapAvailable = ref(null)
 
   const blockchainStatsStore = useBlockchainStatsStore()
 
@@ -38,8 +39,13 @@ export const useMarketStatsStore = defineStore('marketStats', () => {
 
   async function fetchPrice() {
     if (!cache.get(CACHE_KEY_PRICE_DATA)) {
-      const { data } = await axios.get(`${MARKET_STATS_ADDRESS}/simple/price?ids=aeternity&vs_currencies=usd&include_24hr_change=true`)
-      cache.put(CACHE_KEY_PRICE_DATA, data.aeternity, MARKET_STATS_CACHE_TTL)
+      try {
+        const { data } = await axios.get(`${MARKET_STATS_ADDRESS}/simple/price?ids=aeternity&vs_currencies=usd&include_24hr_change=true`)
+        cache.put(CACHE_KEY_PRICE_DATA, data.aeternity, MARKET_STATS_CACHE_TTL)
+        isMarketCapAvailable.value = true
+      } catch (e) {
+        isMarketCapAvailable.value = false
+      }
     }
 
     const cachedAeternityPriceData = cache.get(CACHE_KEY_PRICE_DATA)
@@ -64,5 +70,6 @@ export const useMarketStatsStore = defineStore('marketStats', () => {
     marketCap,
     distribution,
     distributionPercentage,
+    isMarketCapAvailable,
   }
 })

src/stores/status.js

@@ -11,13 +11,21 @@ export const useStatus = defineStore('status', () => {
   const nodeStatus = ref(null)
 
   async function fetchMdwStatus() {
-    const { data } = await axios.get(`${MIDDLEWARE_URL}/v3/status`)
-    middlewareStatus.value = data
+    try {
+      const { data } = await axios.get(`${MIDDLEWARE_URL}/v3/status`)
+      middlewareStatus.value = data
+    } catch (e) {
+      middlewareStatus.value = false
+    }
   }
 
   async function fetchNodeStatus() {
-    const { data } = await axios.get(`${NODE_URL}/v3/status`)
-    nodeStatus.value = data
+    try {
+      const { data } = await axios.get(`${NODE_URL}/v3/status`)
+      nodeStatus.value = data
+    } catch (e) {
+      nodeStatus.value = false
+    }
   }
 
   const isSyncing = computed(() => {