From 65de6aaf10698385a4f202f5eeab143986402ed1 Mon Sep 17 00:00:00 2001
From: Eric <5089238+emizzle@users.noreply.github.com>
Date: Wed, 3 Jul 2024 17:12:23 +1000
Subject: [PATCH] refactor requests store request structure

The purpose was to emulate the structure of a request in the contract, so that the entire request object could be overwritten, and then the app state, eg moderated, would be separately set. Other state properties are also only fetched if not already fetched.
---
 src/App.vue                        |  12 +-
 src/components/NotFound.vue        |  24 ++-
 src/components/StorageRequest.vue  |  35 ++--
 src/components/StorageRequests.vue |   9 +-
 src/stores/events.js               |   2 +-
 src/stores/requests.js             | 253 +++++++++++++++++++----------
 src/views/ModerateView.vue         |   2 +-
 src/views/NotFoundView.vue         |   2 +-
 src/views/RequestView.vue          |  10 +-
 src/views/RequestsView.vue         |   2 +-
 10 files changed, 220 insertions(+), 131 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6e2cf92..19bf373 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,7 +17,7 @@ import { useEventsStore } from './stores/events'
 
 const eventsStore = useEventsStore()
 const requestsStore = useRequestsStore()
-const { loadingRecent, loadingRequestStates } = storeToRefs(requestsStore)
+const { loading } = storeToRefs(requestsStore)
 const { events } = storeToRefs(eventsStore)
 const codexApi = inject('codexApi')
 const ethProvider = inject('ethProvider')
@@ -27,8 +27,10 @@ window.name = generateUniqueId()
 onMounted(() => {
   initDrawers()
   initDismisses()
-  requestsStore.refetchRequestStates()
-  requestsStore.fetchPastRequests()
+  requestsStore.$hydrate()
+  requestsStore.refetchRequestStates().then(() => {
+    requestsStore.fetchPastRequests()
+  })
   eventsStore.listenForNewEvents()
 
   window.addEventListener('storage', handleStorageEvent)
@@ -111,11 +113,11 @@ onUnmounted(() => {
     </footer>
     <div id="toast-container" class="fixed bottom-5 right-5 flex flex-col space-y-2">
       <ToastNotification
-        v-if="loadingRecent"
+        v-if="loading.recent"
         text="Loading recent storage requests..."
       ></ToastNotification>
       <ToastNotification
-        v-if="loadingRequestStates"
+        v-if="loading.states"
         text="Loading latest request states..."
       ></ToastNotification>
     </div>
diff --git a/src/components/NotFound.vue b/src/components/NotFound.vue
index 7d72fdc..fc3a5b3 100644
--- a/src/components/NotFound.vue
+++ b/src/components/NotFound.vue
@@ -1,15 +1,29 @@
 <script setup>
+import { RouterLink, useRoute } from 'vue-router'
+const route = useRoute()
 </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>
+        <h1
+          class="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-primary-600 dark:text-primary-500 dark:text-white"
+        >
+          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>
+        <RouterLink
+          :to="{ path: `/`, query: route.query }"
+          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</RouterLink
+        >
       </div>
     </div>
   </section>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/StorageRequest.vue b/src/components/StorageRequest.vue
index 6946bac..81e29d6 100644
--- a/src/components/StorageRequest.vue
+++ b/src/components/StorageRequest.vue
@@ -37,29 +37,28 @@ onMounted(() => {
   initTooltips()
 })
 
-const totalPrice = computed(() => price(request.value))
-const maxSlotLoss = computed(() => autoPluralize(request.value.ask.maxSlotLoss, 'slot'))
-const slots = computed(() => autoPluralize(request.value.ask.slots, 'slot'))
+const totalPrice = computed(() => price(request.value.request))
+const maxSlotLoss = computed(() => autoPluralize(request.value.request.ask.maxSlotLoss, 'slot'))
+const slots = computed(() => autoPluralize(request.value.request.ask.slots, 'slot'))
 const stateColour = computed(() => getStateColour(request.value.state))
 const timestamps = computed(() => {
-  let { requestedAt, endsAt, expiresAt } = timestampsFor(
-    request.value.ask,
-    request.value.expiry,
-    request.value.requestedAt
-  )
+  let { requestedAt } = request.value
+  let { ask, expiry } = request.value.request
+  let { endsAt, expiresAt } = timestampsFor(ask, expiry, requestedAt)
   return {
     requested: new Date(requestedAt * 1000),
     expires: new Date(expiresAt * 1000),
     ends: new Date(endsAt * 1000)
   }
 })
+const requestDetails = computed(() => request.value.request)
 </script>
 
 <template>
   <div class="flex flex-wrap">
     <CodexImage
       class="flex-initial mx-auto my-4 min-w-sm max-w-md w-full rounded"
-      :cid="request.content.cid"
+      :cid="requestDetails.content.cid"
       :moderated="enableModeration ? 'approved' : request.moderated"
     ></CodexImage>
     <div class="py-4 px-4 ml-4 max-w-2xl flex-1">
@@ -127,19 +126,19 @@ const timestamps = computed(() => {
       <dl>
         <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Dataset CID</dt>
         <dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">
-          {{ request.content.cid }}
+          {{ requestDetails.content.cid }}
         </dd>
       </dl>
       <dl>
         <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Client</dt>
         <dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">
-          {{ request.client }}
+          {{ requestDetails.client }}
         </dd>
       </dl>
       <dl>
         <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Merkle root</dt>
         <dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">
-          {{ request.content.merkleRoot }}
+          {{ requestDetails.content.merkleRoot }}
         </dd>
       </dl>
       <div class="relative overflow-x-auto overflow-y-auto max-h-screen mb-10">
@@ -153,7 +152,7 @@ const timestamps = computed(() => {
               >
                 Expiry
               </td>
-              <td class="px-6 py-2 font-light">{{ request.expiry }} seconds</td>
+              <td class="px-6 py-2 font-light">{{ requestDetails.expiry }} seconds</td>
             </tr>
             <tr class="hover:bg-gray-50 dark:hover:bg-gray-600 text-base">
               <td
@@ -161,7 +160,7 @@ const timestamps = computed(() => {
               >
                 Duration
               </td>
-              <td class="px-6 py-2 font-light">{{ request.ask.duration }} seconds</td>
+              <td class="px-6 py-2 font-light">{{ requestDetails.ask.duration }} seconds</td>
             </tr>
             <tr class="hover:bg-gray-50 dark:hover:bg-gray-600 text-base">
               <td
@@ -169,7 +168,7 @@ const timestamps = computed(() => {
               >
                 Slot size
               </td>
-              <td class="px-6 py-2 font-light">{{ request.ask.slotSize }} bytes</td>
+              <td class="px-6 py-2 font-light">{{ requestDetails.ask.slotSize }} bytes</td>
             </tr>
             <tr class="hover:bg-gray-50 dark:hover:bg-gray-600 text-base">
               <td
@@ -177,7 +176,7 @@ const timestamps = computed(() => {
               >
                 Proof probability
               </td>
-              <td class="px-6 py-2 font-light">{{ request.ask.proofProbability }}</td>
+              <td class="px-6 py-2 font-light">{{ requestDetails.ask.proofProbability }}</td>
             </tr>
             <tr class="hover:bg-gray-50 dark:hover:bg-gray-600 text-base">
               <td
@@ -185,7 +184,7 @@ const timestamps = computed(() => {
               >
                 Reward
               </td>
-              <td class="px-6 py-2 font-light">{{ request.ask.reward }} CDX</td>
+              <td class="px-6 py-2 font-light">{{ requestDetails.ask.reward }} CDX</td>
             </tr>
             <tr class="hover:bg-gray-50 dark:hover:bg-gray-600 text-base">
               <td
@@ -193,7 +192,7 @@ const timestamps = computed(() => {
               >
                 Collateral
               </td>
-              <td class="px-6 py-2 font-light">{{ request.ask.collateral }} CDX</td>
+              <td class="px-6 py-2 font-light">{{ requestDetails.ask.collateral }} CDX</td>
             </tr>
             <tr class="hover:bg-gray-50 dark:hover:bg-gray-600 text-base">
               <td
diff --git a/src/components/StorageRequests.vue b/src/components/StorageRequests.vue
index 48b11df..9477f85 100644
--- a/src/components/StorageRequests.vue
+++ b/src/components/StorageRequests.vue
@@ -131,8 +131,7 @@ onMounted(() => {
       </div>
     </div>
     <div
-    class="relative overflow-x-auto overflow-y-hidden max-h-screen shadow-md
-    sm:rounded-lg border-t border-gray-50 h-full"
+      class="relative overflow-x-auto overflow-y-hidden max-h-screen shadow-md sm:rounded-lg border-t border-gray-50 h-full"
     >
       <table
         class="w-full relative text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 rounded-lg"
@@ -149,8 +148,10 @@ onMounted(() => {
         </thead>
         <tbody>
           <tr
-            v-for="([requestId, { requestedAt, moderated, state }], idx) in requestsOrdered"
-            :key="{ requestId }"
+            v-for="(
+              [requestId, { request, requestedAt, moderated, state }], idx
+            ) in requestsOrdered"
+            :key="requestId"
             class="cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-600 dark:bg-gray-800"
             @click="router.push({ path: `/request/${requestId}`, query: { enableModeration } })"
           >
diff --git a/src/stores/events.js b/src/stores/events.js
index 7addb35..dcc439e 100644
--- a/src/stores/events.js
+++ b/src/stores/events.js
@@ -37,7 +37,7 @@ export const useEventsStore = defineStore(
     async function listenForNewEvents() {
       async function onStorageRequested(requestId, ask, expiry, event) {
         let { blockNumber, blockHash } = event.log
-        const request = await requests.add(requestId, ask, expiry, blockHash)
+        const request = await requests.addFromEvent(requestId, ask, expiry, blockHash)
 
         add({
           event: StorageEvent.StorageRequested,
diff --git a/src/stores/requests.js b/src/stores/requests.js
index d97db90..5ab1b8f 100644
--- a/src/stores/requests.js
+++ b/src/stores/requests.js
@@ -31,15 +31,104 @@ export const useRequestsStore = defineStore(
     const events = useEventsStore()
     let { StorageRequested } = marketplace.filters
     const requests = ref({}) // key: requestId, val: {request, state, slots: [{slotId, slotIdx, state}]}
-    const loading = ref(false)
-    const loadingRecent = ref(false)
-    const loadingRequestStates = ref(false)
-    const fetched = ref(false) // indicates if past events were fetched
     const blocks = ref({})
+    const loading = ref({
+      past: false,
+      recent: false,
+      states: false
+    })
+    const fetched = ref({
+      past: false
+    })
+    // Request structure
+    // {
+    //   request: {
+    //     client,
+    //     ask: {
+    //       slots,
+    //       slotSize,
+    //       duration,
+    //       proofProbability,
+    //       reward,
+    //       collateral,
+    //       maxSlotLoss
+    //     },
+    //     content: {
+    //       cid,
+    //       merkleRoot
+    //     },
+    //     expiry,
+    //     nonce,
+    //   },
+    //   state,
+    //   moderated: false,
+    //   requestedAt: Number (timestamp in seconds),
+    //   requestFinishedId: Number (setTimeout id for request completion update)
+    //   slots: [{slotId, slotIdx, state}],
+    //   loading: {
+    //     request: false,
+    //     slots: false,
+    //     state: false
+    //   },
+    //   fetched: {
+    //     request: false,
+    //     slots: false
+    //   }
+    // }
+
+    // fetch request details if not previously fetched
+    const getRequest = async (requestId) => {
+      try {
+        let request = requests.value[requestId]
+        if (exists(requestId) && request.fetched.request === true) {
+          console.log('request', requestId, ' details already fetched')
+          return request
+        }
+        requests.value[requestId] = {
+          loading: {
+            request: true,
+            slots: false,
+            state: false
+          },
+          fetched: {
+            request: false,
+            slots: false
+          }
+        }
+        request = arrayToObject(await marketplace.getRequest(requestId))
+        await getRequestState(requestId)
+        requests.value[requestId] = {
+          ...requests.value[requestId],
+          request,
+          moderated: 'pending'
+          // requestedAt: will be set in addFromEvent, as we don't have a block
+          // requestFinishedId: will be set in addFromEvent as we don't have
+          //   requestedAt yet
+          // state: state is set in getRequestState
+        }
+        requests.value[requestId].loading.request = false
+        requests.value[requestId].fetched.request = true
+        return requests.value[requestId]
+      } catch (e) {
+        delete requests.value[requestId]
+        throw new Error(`failed to get request for ${requestId}: ${e.message}`)
+      }
+    }
 
     const getRequestState = async (requestId) => {
-      let stateIdx = await marketplace.requestState(requestId)
-      return toRequestState(Number(stateIdx))
+      if (!exists(requestId)) {
+        throw new RequestNotFoundError(requestId, `Request not found`)
+      }
+      try {
+        requests.value[requestId].loading.state = true
+        const stateIdx = await marketplace.requestState(requestId)
+        const state = toRequestState(Number(stateIdx))
+        requests.value[requestId].state = state
+      } catch (e) {
+        throw new Error(`failed to get request state for ${requestId}: ${e.message}`)
+      } finally {
+        requests.value[requestId].loading.state = false
+      }
     }
 
     const getSlotState = async (slotId) => {
@@ -48,30 +137,42 @@ export const useRequestsStore = defineStore(
     }
 
     const getSlots = async (requestId, numSlots) => {
-      console.log(`fetching ${numSlots} slots`)
-      let start = Date.now()
-      let slots = []
-      for (let slotIdx = 0; slotIdx < numSlots; slotIdx++) {
-        try {
-          let id = slotId(requestId, slotIdx)
-          const startSlotState = Date.now()
-          let state = await getSlotState(id)
-          console.log(`fetched slot state in ${(Date.now() - startSlotState) / 1000}s`)
-          const startGetHost = Date.now()
-          let provider = await marketplace.getHost(id)
-          console.log(`fetched slot provider in ${(Date.now() - startGetHost) / 1000}s`)
-          slots.push({ slotId: id, slotIdx, state, provider })
-        } catch (e) {
-          console.error('error getting slot details', e)
-          continue
-        }
+      if (!exists(requestId)) {
+        throw new RequestNotFoundError(requestId, `Request not found`)
+      }
+      requests.value[requestId].loading.slots = true
+      try {
+        console.log(`fetching ${numSlots} slots`)
+        let start = Date.now()
+        let slots = []
+        for (let slotIdx = 0; slotIdx < numSlots; slotIdx++) {
+          try {
+            let id = slotId(requestId, slotIdx)
+            const startSlotState = Date.now()
+            let state = await getSlotState(id)
+            console.log(`fetched slot state in ${(Date.now() - startSlotState) / 1000}s`)
+            const startGetHost = Date.now()
+            let provider = await marketplace.getHost(id)
+            console.log(`fetched slot provider in ${(Date.now() - startGetHost) / 1000}s`)
+            slots.push({ slotId: id, slotIdx, state, provider })
+          } catch (e) {
+            console.error('error getting slot details', e)
+            continue
+          }
+        }
+        console.log(`fetched ${numSlots} slots in ${(Date.now() - start) / 1000}s`)
+        requests.value[requestId].slots = slots
+        return slots
+      } catch (e) {
+        throw new Error(`error fetching slots for ${requestId}: ${e.message}`)
+      } finally {
+        requests.value[requestId].loading.slots = false
+        requests.value[requestId].fetched.slots = true
       }
-      console.log(`fetched ${numSlots} slots in ${(Date.now() - start) / 1000}s`)
-      return slots
     }
 
     const getBlock = async (blockHash) => {
-      if (Object.keys(blocks.value).includes(blockHash)) {
+      if (blockHash in blocks.value) {
         return blocks.value[blockHash]
       } else {
         let { number, timestamp } = await ethProvider.getBlock(blockHash)
@@ -80,24 +181,22 @@ export const useRequestsStore = defineStore(
       }
     }
 
-    async function add(requestId, ask, expiry, blockHash) {
-      let state = await getRequestState(requestId)
+    const addFromEvent = async (requestId, ask, expiry, blockHash) => {
+      let request = await getRequest(requestId)
+      let { state } = request.request
       let { timestamp } = await getBlock(blockHash)
       let requestFinishedId = waitForRequestFinished(requestId, ask, expiry, state, timestamp)
-      let reqExisting = requests.value[requestId] || {} // just in case it already exists
 
-      let request = {
-        ...reqExisting,
-        state,
-        requestedAt: timestamp,
-        requestFinishedId,
-        detailsFetched: false,
-        moderated: 'pending'
-      }
-      requests.value[requestId] = request
+      requests.value[requestId].requestedAt = timestamp
+      requests.value[requestId].requestFinishedId = requestFinishedId
+
       return request
     }
 
+    const exists = (requestId) => {
+      return requestId in requests.value
+    }
+
     // Returns an array of Promises, where each Promise represents the fetching
     // of one StorageRequested event
     async function fetchPastRequestsFrom(fromBlock = null) {
@@ -112,7 +211,7 @@ export const useRequestsStore = defineStore(
         return events.map(async (event, i) => {
           let { requestId, ask, expiry } = event.args
           let { blockHash, blockNumber } = event
-          await add(requestId, ask, expiry, blockHash)
+          await addFromEvent(requestId, ask, expiry, blockHash)
         })
       } catch (error) {
         console.error(`failed to load past contract events: ${error.message}`)
@@ -122,7 +221,7 @@ export const useRequestsStore = defineStore(
 
     async function refetchRequestStates() {
       async function refetchRequestState(requestId) {
-        requests.value[requestId].state = await getRequestState(requestId)
+        await getRequestState(requestId)
         let { ask, expiry, state, requestedAt } = requests.value[requestId]
         // refetching of requests states happen on page load, so if we're
         // loading the page, we need to reset any timeouts for RequestFinished
@@ -137,7 +236,7 @@ export const useRequestsStore = defineStore(
       }
       // array of asynchronously-executed Promises, each requesting a request
       // state
-      loadingRequestStates.value = true
+      loading.value.states = true
       try {
         const fetches = Object.entries(requests.value).map(([requestId, request]) =>
           refetchRequestState(requestId)
@@ -146,7 +245,7 @@ export const useRequestsStore = defineStore(
       } catch (e) {
         console.error(`failure requesting latest request states:`, e)
       } finally {
-        loadingRequestStates.value = false
+        loading.value.states = false
       }
     }
 
@@ -158,52 +257,32 @@ export const useRequestsStore = defineStore(
       const lastBlockNumber = blocksSorted.length ? blocksSorted[0].number : null
 
       if (lastBlockNumber) {
-        loadingRecent.value = true
+        loading.value.recent = true
       } else {
-        loading.value = true
+        loading.value.past = true
       }
 
       await Promise.all(await fetchPastRequestsFrom(lastBlockNumber + 1))
 
       if (lastBlockNumber) {
-        loadingRecent.value = false
+        loading.value.recent = false
       } else {
-        loading.value = false
-        fetched.value = true
+        loading.value.past = false
+        fetched.value.past = true
       }
     }
 
     async function fetchRequestDetails(requestId) {
       try {
-        let request = requests.value[requestId] || {}
-        if (requestId in requests.value) {
-          requests.value[requestId].detailsLoading = true
-        }
         // fetch request details if not previously fetched
-        if (request?.detailsFetched !== true) {
-          console.log('request', requestId, ' details already fetched')
-          request = arrayToObject(await marketplace.getRequest(requestId))
-        }
+        const { request } = await getRequest(requestId)
+
         // always fetch state
-        const state = await getRequestState(requestId)
+        await getRequestState(requestId)
 
-        // always fetch slots
+        // always fetch slots - fire async but don't wait
         console.log('fetching slots for request', requestId)
-        getSlots(requestId, request.ask.slots).then((slots) => {
-          requests.value[requestId].slots = slots
-          requests.value[requestId].slotsLoading = false
-          requests.value[requestId].slotsFetched = true
-        })
-
-        // update state
-        requests.value[requestId] = {
-          ...requests.value[requestId], // state, requestedAt, requestFinishedId (null)
-          ...request,
-          state,
-          slotsLoading: true,
-          detailsFetched: true,
-          detailsLoading: false
-        }
+        getSlots(requestId, request.ask.slots)
       } catch (error) {
         if (
           !error.message.includes('Unknown request') &&
@@ -216,25 +295,21 @@ export const useRequestsStore = defineStore(
     }
 
     function updateRequestState(requestId, newState) {
-      if (!Object.keys(requests.value).includes(requestId)) {
+      if (!exists(requestId)) {
         throw new RequestNotFoundError(requestId, `Request not found`)
       }
-      let { state, ...rest } = requests.value[requestId]
-      state = newState
-      requests.value[requestId] = { state, ...rest }
+      requests.value[requestId].state = newState
     }
 
     function updateRequestFinishedId(requestId, newRequestFinishedId) {
-      if (!Object.keys(requests.value).includes(requestId)) {
+      if (!exists(requestId)) {
         throw new RequestNotFoundError(requestId, `Request not found`)
       }
-      let { requestFinishedId, ...rest } = requests.value[requestId]
-      requestFinishedId = newRequestFinishedId
-      requests.value[requestId] = { requestFinishedId, ...rest }
+      requests.value[requestId].state = newRequestFinishedId
     }
 
     function updateRequestSlotState(requestId, slotIdx, newState) {
-      if (!Object.keys(requests.value).includes(requestId)) {
+      if (!exists(requestId)) {
         throw new RequestNotFoundError(requestId, `Request not found`)
       }
       let { slots, ...rest } = requests.value[requestId]
@@ -248,7 +323,7 @@ export const useRequestsStore = defineStore(
     }
 
     function updateRequestSlotProvider(requestId, slotIdx, provider) {
-      if (!Object.keys(requests.value).includes(requestId)) {
+      if (!exists(requestId)) {
         throw new RequestNotFoundError(requestId, `Request not found`)
       }
       let { slots, ...rest } = requests.value[requestId]
@@ -274,8 +349,7 @@ export const useRequestsStore = defineStore(
         try {
           // the state may actually have been cancelled, but RequestCancelled
           // may not have fired yet, so get the updated state
-          const state = await getRequestState(requestId)
-          updateRequestState(requestId, state)
+          await getRequestState(requestId)
           updateRequestFinishedId(requestId, null)
         } catch (error) {
           if (error instanceof RequestNotFoundError) {
@@ -296,7 +370,7 @@ export const useRequestsStore = defineStore(
     }
 
     function cancelWaitForRequestFinished(requestId) {
-      if (!Object.keys(requests.value).includes(requestId)) {
+      if (!exists(requestId)) {
         throw new RequestNotFoundError(requestId, `Request not found`)
       }
       let { requestFinishedId } = requests.value[requestId]
@@ -308,7 +382,8 @@ export const useRequestsStore = defineStore(
     return {
       requests,
       blocks,
-      add,
+      addFromEvent,
+      exists,
       getBlock,
       fetchPastRequests,
       refetchRequestStates,
@@ -319,16 +394,14 @@ export const useRequestsStore = defineStore(
       updateRequestFinishedId,
       cancelWaitForRequestFinished,
       loading,
-      loadingRecent,
-      loadingRequestStates,
       fetched,
       RequestNotFoundError
     }
   },
   {
     persist: {
-      serializer,
-      paths: ['requests', 'blocks', 'fetched', 'loading', 'loadingRecent']
+      serializer
+      // paths: ['requests', 'blocks', 'fetched', 'loading']
     }
   }
 )
diff --git a/src/views/ModerateView.vue b/src/views/ModerateView.vue
index 9a79787..113ab7e 100644
--- a/src/views/ModerateView.vue
+++ b/src/views/ModerateView.vue
@@ -10,7 +10,7 @@ const { loading } = storeToRefs(requestsStore)
 
 <template>
   <div>
-    <SkeletonLoading v-if="loading" type="text" />
+    <SkeletonLoading v-if="loading.past" type="text" />
     <StorageRequests :enable-moderation="true" v-else />
   </div>
 </template>
diff --git a/src/views/NotFoundView.vue b/src/views/NotFoundView.vue
index ad813a8..4d5e500 100644
--- a/src/views/NotFoundView.vue
+++ b/src/views/NotFoundView.vue
@@ -7,7 +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.past || !requests.value)
 </script>
 
 <template>
diff --git a/src/views/RequestView.vue b/src/views/RequestView.vue
index 4b58bbf..73b8588 100644
--- a/src/views/RequestView.vue
+++ b/src/views/RequestView.vue
@@ -20,27 +20,27 @@ async function fetchRequest(requestId) {
       error.message.includes('Unknown request') ||
       error.message.includes('invalid BytesLike value')
     ) {
-      router.push({ path: '/404' })
+      router.push({ path: '/404', query: route.query })
     }
   }
 }
 
 const request = computed(() => requests.value[route.params.requestId])
-const detailsLoading = computed(() => requests.value[route.params.requestId]?.detailsLoading)
+const detailsLoading = computed(() => requests.value[route.params.requestId]?.loading?.request)
 
 watch(() => route.params.requestId, fetchRequest, { immediate: true })
 </script>
 
 <template>
   <div>
-    <SkeletonLoading v-if="loading || detailsLoading" type="image" />
+    <SkeletonLoading v-if="loading.past || detailsLoading" type="image" />
     <StorageRequest
       v-else-if="!!request"
       :requestId="route.params.requestId"
       v-model="request"
       :enableModeration="route.query.enableModeration === 'true'"
-      :slotsLoading="request.slotsLoading"
-      :slotsFetched="request.slotsFetched"
+      :slotsLoading="request.loading.slots"
+      :slotsFetched="request.fetched.slots"
     />
   </div>
 </template>
diff --git a/src/views/RequestsView.vue b/src/views/RequestsView.vue
index 046cc66..c335069 100644
--- a/src/views/RequestsView.vue
+++ b/src/views/RequestsView.vue
@@ -10,7 +10,7 @@ const { loading } = storeToRefs(requestsStore)
 
 <template>
   <div>
-    <SkeletonLoading v-if="loading" type="text" />
+    <SkeletonLoading v-if="loading.past" type="text" />
     <StorageRequests v-else />
   </div>
 </template>