From be372098ef20f85bf284af9cdd7db98977123c12 Mon Sep 17 00:00:00 2001
From: tim <tim@dexorder.trade>
Date: Wed, 28 Aug 2024 20:35:34 -0400
Subject: [PATCH] connection alert

---
 src/components/Alerts.vue         | 3 ++-
 src/layouts/chart/ChartLayout.vue | 9 ++++-----
 src/layouts/chart/MainView.vue    | 1 -
 src/socket.js                     | 2 ++
 src/store/store.js                | 2 ++
 src/views/ChartView.vue           | 2 --
 6 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/Alerts.vue b/src/components/Alerts.vue
index 2f73692..c30ce19 100644
--- a/src/components/Alerts.vue
+++ b/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>
diff --git a/src/layouts/chart/ChartLayout.vue b/src/layouts/chart/ChartLayout.vue
index fc539d3..3361e8d 100644
--- a/src/layouts/chart/ChartLayout.vue
+++ b/src/layouts/chart/ChartLayout.vue
@@ -5,9 +5,8 @@
 </template>
 
 <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()
+import MainView from './MainView.vue'
+import {useStore} from "@/store/store.js";
+
+const s = useStore()
 </script>
diff --git a/src/layouts/chart/MainView.vue b/src/layouts/chart/MainView.vue
index 4d2fa4f..3fe4093 100644
--- a/src/layouts/chart/MainView.vue
+++ b/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">
diff --git a/src/socket.js b/src/socket.js
index e9ef064..31848b2 100644
--- a/src/socket.js
+++ b/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) => {
diff --git a/src/store/store.js b/src/store/store.js
index a6578f8..b649a6a 100644
--- a/src/store/store.js
+++ b/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,
diff --git a/src/views/ChartView.vue b/src/views/ChartView.vue
index 5247522..1d4a996 100644
--- a/src/views/ChartView.vue
+++ b/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">