Add relative times for request: requested, expires, ends

src/components/StorageRequest.vue

@@ -2,7 +2,7 @@
 import { onMounted, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { initTooltips } from 'flowbite'
-import { getStateColour, moderatedState, price } from '@/utils/requests'
+import { getStateColour, moderatedState, price, timestampsFor } from '@/utils/requests'
 import { autoPluralize } from '@/utils/strings'
 
 import CodexImage from '@/components/CodexImage.vue'
@@ -41,6 +41,18 @@ 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 stateColour = computed(() => getStateColour(request.value.state))
+const timestamps = computed(() => {
+  let { requestedAt, endsAt, expiresAt } = timestampsFor(
+    request.value.ask,
+    request.value.expiry,
+    request.value.requestedAt
+  )
+  return {
+    requested: new Date(requestedAt * 1000),
+    expires: new Date(expiresAt * 1000),
+    ends: new Date(endsAt * 1000)
+  }
+})
 </script>
 
 <template>
@@ -53,11 +65,9 @@ const stateColour = computed(() => getStateColour(request.value.state))
     <div class="py-4 px-4 ml-4 max-w-2xl flex-1">
       <div
         v-if="enableModeration === true"
-      class="flex flex-col space-between mb-4 p-5 w-full border border-gray-300
-      rounded-lg b-1 bg-gray-100 dark:bg-gray-800"
+        class="flex flex-col space-between mb-4 p-5 w-full border border-gray-300 rounded-lg b-1 bg-gray-100 dark:bg-gray-800"
       >
-        <label for="moderation" class="block mb-2 text-lg font-medium
-        text-gray-900 dark:text-white"
+        <label for="moderation" class="block mb-2 text-lg font-medium text-gray-900 dark:text-white"
           >Moderation station</label
         >
         <div class="flex items-center justify-between space-x-4">
@@ -99,8 +109,19 @@ const stateColour = computed(() => getStateColour(request.value.state))
         {{ totalPrice }} CDX
       </p>
       <dl>
-        <dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">
-          <RelativeTime :timestamp="new Date(request.requestedAt * 1000)"></RelativeTime>
+        <dd class="mb-4 flex justify-between font-light text-gray-500 sm:mb-5 dark:text-gray-400">
+          <div>
+            <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Requested</dt>
+            <RelativeTime :timestamp="timestamps.requested"></RelativeTime>
+          </div>
+          <div>
+            <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Expires</dt>
+            <RelativeTime :timestamp="timestamps.expires"></RelativeTime>
+          </div>
+          <div>
+            <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Ends</dt>
+            <RelativeTime :timestamp="timestamps.ends"></RelativeTime>
+          </div>
         </dd>
       </dl>
       <dl>

src/stores/requests.js

@@ -1,7 +1,7 @@
 import { ref, inject } from 'vue'
 import { defineStore } from 'pinia'
 import { slotId } from '../utils/ids'
-import { arrayToObject, requestState } from '@/utils/requests'
+import { arrayToObject, requestState, timestampsFor } from '@/utils/requests'
 import { slotState } from '@/utils/slots'
 import serializer from './serializer'
 
@@ -117,19 +117,17 @@ export const useRequestsStore = defineStore(
       }
     }
 
-    async function addRequest(requestId, ask, blockHash) {
+    async function addRequest(requestId, ask, expiry, blockHash) {
       let state = await getRequestState(requestId)
       let { timestamp } = await getBlock(blockHash)
       let reqExisting = requests.value[requestId] || {} // just in case it already exists
 
       let requestFinishedId = null
       if (['Fulfilled', 'New'].includes(state)) {
-        let durationBigInt = ask[2]
         try {
           // set request state to finished at the end of the request -- there's no
           // other way to know when a request finishes
-          let duration = Number(durationBigInt)
-          let endsAt = (timestamp + duration) * 1000 // time storage was requested plus total duration, in ms
+          let { requestedAt, endsAt } = timestampsFor(ask, expiry, timestamp)
           let msFromNow = endsAt - Date.now() // time remaining until finish, in ms
           requestFinishedId = waitForRequestFinished(
             requestId,
@@ -159,7 +157,7 @@ export const useRequestsStore = defineStore(
     async function handleStorageRequestEvent(event) {
       let { requestId, ask, expiry } = event.args
       let { blockHash, blockNumber } = event
-      await addRequest(requestId, ask, blockHash)
+      await addRequest(requestId, ask, expiry, blockHash)
     }
 
     // Returns an array of Promises, where each Promise represents the fetching
@@ -340,7 +338,7 @@ export const useRequestsStore = defineStore(
 
       marketplace.on(StorageRequested, async (requestId, ask, expiry, event) => {
         let { blockNumber, blockHash } = event.log
-        const request = addRequest(requestId, ask, blockHash)
+        const request = addRequest(requestId, ask, expiry, blockHash)
 
         // callback
         if (onStorageRequested) {

src/utils/requests.js

@@ -54,3 +54,13 @@ export const requestState = [
   'Finished', // successfully completed
   'Failed' // too many nodes have failed to provide proofs, data lost
 ]
+
+// all parameters in seconds, return values also in seconds
+export function timestampsFor(ask, expiryBigInt, requestedAt) {
+  let durationBigInt = ask.duration || ask[2]
+  let duration = Number(durationBigInt)
+  let expiry = Number(expiryBigInt)
+  let endsAt = requestedAt + duration // time storage was requested plus total duration, in ms
+  let expiresAt = requestedAt + expiry // expiry plus total duration, in ms
+  return { requestedAt, endsAt, expiresAt }
+}