From 42d560fb8cd540e1ac74988bf865a7ae4b1c70d1 Mon Sep 17 00:00:00 2001
From: Eric <5089238+emizzle@users.noreply.github.com>
Date: Thu, 20 Jun 2024 12:11:33 +1000
Subject: [PATCH] add toast notification when loading recent storage events

---
 src/App.vue                                 |  8 ++++++++
 src/components/toasts/ToastNotification.vue | 17 +++++++++++++++++
 src/stores/requests.js                      |  1 +
 3 files changed, 26 insertions(+)
 create mode 100644 src/components/toasts/ToastNotification.vue

diff --git a/src/App.vue b/src/App.vue
index 427c0b6..3a47b93 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,14 +4,17 @@ import { useRequestsStore } from '@/stores/requests'
 import { RouterView } from 'vue-router'
 import Balance from '@/components/Balance.vue'
 import BlockNumber from '@/components/BlockNumber.vue'
+import ToastNotification from '@/components/toasts/ToastNotification.vue'
 import AppNav from '@/components/AppNav.vue'
 import ContractEventAlerts from '@/components/ContractEventAlerts.vue'
 import { initDrawers, initDismisses } from 'flowbite'
 import NavBreadcrumb from './components/NavBreadcrumb.vue'
+import { storeToRefs } from 'pinia'
 
 const alerts = ref([])
 const id = ref(0)
 const requestsStore = useRequestsStore()
+const { loadingRecent } = storeToRefs(requestsStore)
 
 function addAlert(type, event, state) {
   alerts.value.push({
@@ -181,6 +184,11 @@ onUnmounted(() => {
       <Balance />
       <BlockNumber />
     </footer>
+    <ToastNotification
+      class="fixed bottom-5 right-5"
+      v-if="loadingRecent"
+      text="Loading recent storage requests..."
+    ></ToastNotification>
   </div>
 </template>
 
diff --git a/src/components/toasts/ToastNotification.vue b/src/components/toasts/ToastNotification.vue
new file mode 100644
index 0000000..c362b89
--- /dev/null
+++ b/src/components/toasts/ToastNotification.vue
@@ -0,0 +1,17 @@
+<script setup>
+import SpinnerLoading from '../SpinnerLoading.vue';
+
+defineProps({
+  text: String
+})
+</script>
+
+<template>
+<div id="toast-simple" class="flex items-center w-full max-w-xs p-4 space-x-4 rtl:space-x-reverse text-gray-500 bg-white divide-x rtl:divide-x-reverse divide-gray-200 rounded-lg shadow dark:text-gray-400 dark:divide-gray-700 space-x dark:bg-gray-800" role="alert">
+  <SpinnerLoading></SpinnerLoading>
+  <!-- <svg class="w-5 h-5 text-blue-600 dark:text-blue-500 rotate-45" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 17 8 2L9 1 1 19l8-2Zm0 0V9"/>
+    </svg> -->
+  <div class="ps-4 text-sm font-normal">{{ text }}</div>
+</div>
+</template>
\ No newline at end of file
diff --git a/src/stores/requests.js b/src/stores/requests.js
index 7a9a3f3..b509ea3 100644
--- a/src/stores/requests.js
+++ b/src/stores/requests.js
@@ -380,6 +380,7 @@ export const useRequestsStore = defineStore(
       fetchRequestDetails,
       listenForNewEvents,
       loading,
+      loadingRecent,
       fetched
     }
   },