Update footer

- balance and block number are continually updated
- codex node and ethereum rpc connections continually checked

src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onBeforeMount, onMounted, ref, onUnmounted, inject } from 'vue'
+import { onMounted, ref, onUnmounted, inject } from 'vue'
 import { useRequestsStore } from '@/stores/requests'
 import { RouterView } from 'vue-router'
 import Balance from '@/components/Balance.vue'
@@ -10,11 +10,14 @@ import ContractEventAlerts from '@/components/ContractEventAlerts.vue'
 import { initDrawers, initDismisses } from 'flowbite'
 import NavBreadcrumb from './components/NavBreadcrumb.vue'
 import { storeToRefs } from 'pinia'
+import NetworkConnectionState from './components/NetworkConnectionState.vue'
 
 const alerts = ref([])
 const id = ref(0)
 const requestsStore = useRequestsStore()
 const { loadingRecent, loadingRequestStates } = storeToRefs(requestsStore)
+const codexApi = inject('codexApi')
+const ethProvider = inject('ethProvider')
 
 function addAlert(type, event, state) {
   alerts.value.push({
@@ -132,6 +135,24 @@ function handleStorageEvent(event) {
   }
 }
 
+async function detectRunningCodexNode() {
+  try {
+    let response = await codexApi.spr()
+    return response.ok
+  } catch (e) {
+    return false
+  }
+}
+
+async function detectRunningCodexDevnet() {
+  try {
+    await ethProvider.getNetwork.bind(ethProvider)()
+    return true
+  } catch (e) {
+    return false
+  }
+}
+
 onUnmounted(() => {
   window.removeEventListener('storage', handleStorageEvent)
 })
@@ -184,9 +205,21 @@ onUnmounted(() => {
       <NavBreadcrumb class="mb-4"></NavBreadcrumb>
       <RouterView />
     </main>
-    <footer class="w-full sticky bottom-0 text-center border-t p-4 mt-4 flex-none">
-      <Balance />
-      <BlockNumber />
+    <footer class="w-full sticky bottom-0 border-t p-4 mt-4 flex-none flex justify-between">
+      <div class="flex flex-col  space-y-1">
+        <Balance />
+        <BlockNumber />
+      </div>
+      <div class="flex flex-col space-y-3">
+        <NetworkConnectionState
+          :connectionTest="detectRunningCodexNode"
+          text="Codex node"
+        ></NetworkConnectionState>
+        <NetworkConnectionState
+          :connectionTest="detectRunningCodexDevnet"
+          text="Codex devnet"
+        ></NetworkConnectionState>
+      </div>
     </footer>
     <div id="toast-container" class="fixed bottom-5 right-5 flex flex-col space-y-2">
       <ToastNotification

src/components/Balance.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { inject, ref, onMounted } from 'vue'
-import {formatEther} from 'ethers'
+import { formatEther } from 'ethers'
 
 const token = inject('token')
 const myAddress = inject('myAddress')
@@ -16,5 +16,18 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div>My balance: {{ formatEther(balance) }} TST</div>
-</template>
+  <div>
+    <img
+      src="../assets/logo.svg"
+      class="h-4 mr-2 hidden dark:inline-block"
+      alt="Codex
+    Logo"
+    />
+    <img
+      src="../assets/logo-black.svg"
+      class="h-4 mr-2 inline-block align-middle dark:hidden"
+      alt="Codex Logo"
+    />
+    <span class="inline-block align-middle">{{ formatEther(balance) }} TST</span>
+  </div>
+</template>

src/components/BlockNumber.vue

@@ -6,12 +6,17 @@ const blockNumber = ref(0)
 
 onMounted(async () => {
   blockNumber.value = await ethProvider.getBlockNumber()
-  ethProvider.on('block', (newBlockNum) => {
+  ethProvider.on('block', (newBlockNum, event) => {
     blockNumber.value = newBlockNum
   })
 })
 </script>
 
 <template>
-  <span>Current block: {{ blockNumber }}</span>
+  <div>
+    <svg class="inline-block w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.213 9.787a3.391 3.391 0 0 0-4.795 0l-3.425 3.426a3.39 3.39 0 0 0 4.795 4.794l.321-.304m-.321-4.49a3.39 3.39 0 0 0 4.795 0l3.424-3.426a3.39 3.39 0 0 0-4.794-4.795l-1.028.961"/>
+    </svg>
+    Block {{ blockNumber }}
+  </div>
 </template>

src/components/NetworkConnectionState.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import StateIndicator from './StateIndicator.vue'
+
+const props = defineProps({
+  connectionTest: {
+    type: Function,
+    required: true
+  },
+  text: {
+    type: String,
+    required: true
+  }
+})
+
+const isAlive = ref(true)
+const loading = ref(false)
+const color = computed(() => {
+  if (loading.value === true) return 'yellow'
+  else if (isAlive.value === true) return 'green'
+  else return 'red'
+})
+let checkIntervalId
+
+async function checkConnection() {
+  loading.value = true
+  try {
+    isAlive.value = await props.connectionTest()
+  } catch (e) {
+    isAlive.value = false
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  checkConnection()
+  checkIntervalId = setInterval(() => {
+    checkConnection()
+  }, 5000)
+})
+
+onUnmounted(() => {
+  clearInterval(checkIntervalId)
+})
+</script>
+
+<template>
+  <StateIndicator size="sm" :color="color" :text="text"></StateIndicator>
+</template>

src/plugins/CodexPlugin.js

@@ -3,7 +3,8 @@ export default {
     const codexApi = {
       info: () => fetch(`${codexRestUrl}/debug/info`),
       download: (cid) => fetch(`${codexRestUrl}/data/${cid}/network`),
-      downloadLocal: (cid) => fetch(`${codexRestUrl}/data/${cid}`)
+      downloadLocal: (cid) => fetch(`${codexRestUrl}/data/${cid}`),
+      spr: () => fetch(`${codexRestUrl}/spr`)
     }
 
     app.provide('myAddress', myAddress)