connection alert

src/components/Alerts.vue

@@ -1,5 +1,6 @@
 <template>
-  <v-alert v-for="e in s.errors" icon="mdi-alert" color="error" :title="e.title" :text="e.text" class="mb-3" :closable="e.closeable"/>
+  <v-alert v-if='!s.connected' icon="mdi-wifi-off" type="error" title="Not Connected" class="mb-3" rounded="0" density="compact"/>
+  <v-alert v-for="e in s.errors" icon="mdi-alert" type="error" :title="e.title" :text="e.text" class="mb-3" :closable="e.closeable" rounded="0"/>
 </template>
 
 <script setup>

src/layouts/chart/ChartLayout.vue

@@ -6,8 +6,7 @@
 
 <script setup>
 import MainView from './MainView.vue'
-  import NavDrawer from "@/components/NavDrawer.vue";
-  import Footer from "@/components/Footer.vue";
 import {useStore} from "@/store/store.js";
+
 const s = useStore()
 </script>

src/layouts/chart/MainView.vue

@@ -8,7 +8,6 @@
 <script setup>
 import Alerts from "@/components/Alerts.vue";
 import ChartView from "@/views/ChartView.vue";
-import Social from "@/components/Social.vue";
 </script>
 
 <style scoped lang="scss">

src/socket.js

@@ -8,10 +8,12 @@ export const socket = io(import.meta.env.VITE_WS_URL || undefined, {transports:
 
 socket.on('connect', () => {
     console.log(new Date(), 'ws connected')
+    useStore().connected = true
 })
 
 socket.on('disconnect', () => {
     console.log(new Date(), 'ws disconnected')
+    useStore().connected = false
 })
 
 socket.on('p', async (chainId, pool, price) => {

src/store/store.js

@@ -42,6 +42,7 @@ export const useStore = defineStore('app', ()=> {
 
   const nav = ref(false) // controls opening navigation drawer
 
+  const connected = ref(false)
   const allowed = ref(!REQUIRE_AUTH)
 
   const _chainId = ref(Number(Object.keys(versionMeta.chainInfo)[0]))
@@ -130,6 +131,7 @@ export const useStore = defineStore('app', ()=> {
   }
 
   return {
+    connected,
     allowed, nav, chainId, chainInfo, chain, provider, providerRef, vaultInitCodeHash, account, vaults, vaultVersions,
     transactionSenders, errors, extraTokens, poolPrices, vaultBalances, orders, vault, version, upgrade, vaultOrders,
     tokens, factory, helper,

src/views/ChartView.vue

@@ -12,8 +12,6 @@
 <script setup>
 import SplitPane from "@/components/SplitPane.vue";
 import Chart from "@/components/chart/Chart.vue";
-import Social from "@/components/Social.vue";
-
 </script>
 
 <style scoped lang="scss">