add 404 page

src/components/NotFound.vue

@@ -0,0 +1,15 @@
+<script setup>
+</script>
+
+<template>
+  <section class="bg-white dark:bg-gray-900">
+    <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
+      <div class="mx-auto max-w-screen-sm text-center">
+        <h1 class="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-primary-600 dark:text-primary-500">404</h1>
+        <p class="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white">Something's missing.</p>
+        <p class="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">Sorry, we can't find that page. You'll find lots to explore on the home page. </p>
+        <a href="#" class="inline-flex text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900 my-4">Back to Homepage</a>
+      </div>
+    </div>
+  </section>
+</template>

src/router/index.js

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import RequestsView from '../views/RequestsView.vue'
 import RequestView from '../views/RequestView.vue'
+import NotFoundView from '../views/NotFoundView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -23,6 +24,11 @@ const router = createRouter({
       name: 'request',
       component: RequestView,
       props: true // pass :requestId to props in RequestView
+    },
+    {
+      path: '/404',
+      name: 'NotFound',
+      component: NotFoundView
     }
   ]
 })

src/stores/requests.js

@@ -124,6 +124,9 @@ export const useRequestsStore = defineStore('request', () => {
           loading.value = false
         }
       })
+      if (events.length === 0) {
+        loading.value = false
+      }
       // reqs.forEach((request, requestId) => requests.value.set(requestId, request))
     } catch (error) {
       console.error(`failed to load past contract events: ${error.message}`)

src/views/NotFoundView.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { storeToRefs } from 'pinia'
+import { useRequestsStore } from '@/stores/requests'
+import NotFound from '@/components/NotFound.vue'
+import SkeletonLoading from '@/components/SkeletonLoading.vue'
+import { computed } from 'vue'
+
+const requestsStore = useRequestsStore()
+const { loading, requests } = storeToRefs(requestsStore)
+const isLoading = computed(() => loading.value || !requests.value)
+</script>
+
+<template>
+  <div>
+    <SkeletonLoading v-if="isLoading" type="text" />
+    <NotFound v-else></NotFound>
+  </div>
+</template>

src/views/RequestView.vue

@@ -2,24 +2,28 @@
 import { computed, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useRequestsStore } from '@/stores/requests'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import StorageRequest from '@/components/StorageRequest.vue'
 import SkeletonLoading from '@/components/SkeletonLoading.vue'
 
 const requestsStore = useRequestsStore()
 const { requests, loading } = storeToRefs(requestsStore)
 const route = useRoute()
-const isLoading = computed(
-  () =>
-    loading.value ||
-    !requests.value ||
-    requests.value.size === 0 ||
-    !requests.value.has(route.params.requestId)
-)
+const router = useRouter()
+const isLoading = computed(() => loading.value)
 const requestId = ref(route.params.requestId)
 const request = ref(requests?.value?.get(requestId.value))
+const requestNotFound = computed(
+  () =>
+    !isLoading.value && requests.value !== undefined && !requests.value.get(route.params.requestId)
+)
 function getRequestFromStore(_) {
-  request.value = requests?.value?.get(route.params.requestId)
+  let req = requests?.value?.get(route.params.requestId)
+  if (requestNotFound.value) {
+    router.push({ name: 'NotFound' })
+  } else {
+    request.value = req
+  }
 }
 watch(() => route.params.requestId, getRequestFromStore)
 watch(() => isLoading.value, getRequestFromStore)
@@ -28,6 +32,10 @@ watch(() => isLoading.value, getRequestFromStore)
 <template>
   <div>
     <SkeletonLoading v-if="isLoading" type="image" />
-    <StorageRequest v-else :requestId="route.params.requestId" :request="request" />
+    <StorageRequest
+      v-else-if="!requestNotFound"
+      :requestId="route.params.requestId"
+      :request="request"
+    />
   </div>
 </template>

src/views/RequestsView.vue

@@ -7,9 +7,7 @@ import { computed } from 'vue'
 
 const requestsStore = useRequestsStore()
 const { loading, requests } = storeToRefs(requestsStore)
-const isLoading = computed(
-  () => loading.value || !requests.value
-)
+const isLoading = computed(() => loading.value || !requests.value)
 </script>
 
 <template>