bug fixes

- prevent reload of page when clicking alert "view details" button
- when on the request details page, navigating to a different request, eg via an alert button, works without refreshing the page (data is fetched from the store)
- fixed bug with inserting data into the store on StorageRequested event
- fixed blockNumber not being inserted into the store

codex.sh

@@ -12,6 +12,7 @@ ${CODEX_PATH}/build/codex \
   --log-level='INFO;TRACE:marketplace,node,statemachine,erasure' \
   --api-port=8080 \
   --api-bindaddr=0.0.0.0 \
+  --api-cors-origin='*' \
   --metrics=true \
   --listen-addrs=/ip4/0.0.0.0/tcp/8070 \
   --disc-port=8090 \

src/App.vue

@@ -18,7 +18,7 @@ function addAlert(type, event, state) {
     type,
     event,
     blockNumber: 123456,
-    requestId: 1234567890 + ++id.value,
+    requestId: '0x1a93c8ea68a45dadc599f38858b3fdcb3c442aea0f6180c20e3f08614c251041',
     state
   })
 }
@@ -29,7 +29,7 @@ function addSlotAlert(type, event, state) {
     type,
     event,
     blockNumber: 123456,
-    requestId: 1234567890 + ++id.value,
+    requestId: '0x0d08d8fa3df9d79f1c57a34ebc6a8050ae91fca2c0d6f7191470cbbf38a048bd',
     slotIdx: 1,
     state
   })

src/components/ContractEventAlerts.vue

@@ -14,7 +14,11 @@ onMounted(() => {
     v-for="{ event, blockNumber, requestId, slotIdx, state, type } in alerts"
     :key="event + blockNumber + requestId"
   >
-    <AlertWithContent :id="event + blockNumber + requestId" :title="event" :type="type"
+    <AlertWithContent
+      :id="event + blockNumber + requestId"
+      :title="event"
+      :type="type"
+      :btn-more-url="`/request/${requestId}`"
       ><p>request {{ requestId }} at block {{ blockNumber }}</p>
       <p v-if="slotIdx">Slot index: {{ slotIdx }}</p>
       <p>State: {{ state }}</p></AlertWithContent

src/components/StorageRequest.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from 'vue'
 import { getStateColour, price } from '@/utils/requests'
+import { autoPluralize } from '@/utils/strings'
 
 import CodexImage from '@/components/CodexImage.vue'
 import StateIndicator from '@/components/StateIndicator.vue'
@@ -19,6 +20,9 @@ const props = defineProps({
 })
 
 const totalPrice = computed(() => price(props.request))
+const maxSlotLoss = computed(() => autoPluralize(props.request.ask.maxSlotLoss, 'slot'))
+const slots = computed(() => autoPluralize(props.request.ask.slots, 'slot'))
+const stateColour = computed(() => getStateColour(props.request.state))
 </script>
 
 <template>
@@ -33,7 +37,7 @@ const totalPrice = computed(() => price(props.request))
         </h2>
         <StateIndicator
           :text="request.state"
-          :color="getStateColour(request.state)"
+          :color="stateColour"
           size="lg"
         ></StateIndicator>
       </div>
@@ -115,6 +119,16 @@ const totalPrice = computed(() => price(props.request))
               </td>
               <td class="px-6 py-2 font-light">{{ request.ask.collateral }} CDX</td>
             </tr>
+            <tr
+              class="bg-white dark:bg-transparent hover:bg-gray-50 dark:hover:tbg-gray-600 text-base"
+            >
+              <td
+                class="flex items-center pr-1 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white border-r"
+              >
+                Slots
+              </td>
+              <td class="px-6 py-2 font-light">{{ slots }}</td>
+            </tr>
             <tr class="bg-white dark:bg-transparent hover:bg-gray-50 dark:hover:bg-gray-600 text-base">
               <td
                 class="flex items-center pr-1 py-2 font-medium text-gray-900 whitespace-nowrap dark:text-white border-r"
@@ -122,7 +136,7 @@ const totalPrice = computed(() => price(props.request))
                 Max slot loss
               </td>
               <td class="px-6 py-2 font-light">
-                {{ request.ask.maxSlotLoss }} {{ request.ask.maxSlotLoss == 1 ? 'slot' : 'slots' }}
+                {{ maxSlotLoss }}
               </td>
             </tr>
           </tbody>

src/components/alerts/AlertWithContent.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { onMounted, reactive, ref } from 'vue'
 import { initDismisses } from 'flowbite'
+import { RouterLink } from 'vue-router'
 
 const props = defineProps({
   id: {
@@ -26,7 +27,7 @@ const props = defineProps({
     default: 'View more'
   },
   btnMoreUrl: {
-    type: URL,
+    type: String,
     required: true
   }
 })
@@ -174,8 +175,8 @@ onMounted(() => {
       <slot></slot>
     </div>
     <div class="flex">
-      <a
+      <RouterLink
-        href="{{ btnMoreUrl }}"
+        :to="btnMoreUrl"
         class="text-white focus:ring-4 focus:outline-none font-medium rounded-lg text-xs px-3 py-1.5 me-2 text-center inline-flex items-center"
         :class="theme.btnMore"
       >
@@ -191,7 +192,7 @@ onMounted(() => {
           />
         </svg>
         {{ btnMoreText }}
-      </a>
+      </RouterLink>
       <button
         type="button"
         class="bg-transparent border hover:text-white focus:ring-4 focus:outline-none font-medium rounded-lg text-xs px-3 py-1.5 text-center dark:hover:text-white"

src/stores/requests.js

@@ -152,12 +152,17 @@ export const useRequestsStore = defineStore('request', () => {
     onSlotFilled
   ) {
     marketplace.on(StorageRequested, async (requestId, ask, expiry, event) => {
-      let { blockNumber } = event
+      let { blockNumber } = event.log
-      let request = await marketplace.getRequest(requestId)
+      let arrRequest = await marketplace.getRequest(requestId)
+      let request = arrayToObject(arrRequest)
       let state = await getRequestState(requestId)
-      let slots = getSlots(requestId, request)
+      let slots = await getSlots(requestId, request.ask.slots)
-
+      requests.value.set(requestId, {
-      requests.value.set(requestId, { request, state, slots, requestFinishedId: null })
+        ...request,
+        state,
+        slots,
+        requestFinishedId: null
+      })
 
       // callback
       if (onStorageRequested) {
@@ -176,7 +181,7 @@ export const useRequestsStore = defineStore('request', () => {
       updateRequestState(requestId, 'Fulfilled')
       updateRequestFinishedId(requestId, requestFinishedId)
 
-      let { blockNumber } = event
+      let { blockNumber } = event.log
       if (onRequestFulfilled) {
         onRequestFulfilled(blockNumber, requestId)
       }
@@ -184,7 +189,7 @@ export const useRequestsStore = defineStore('request', () => {
     marketplace.on(RequestCancelled, async (requestId, event) => {
       updateRequestState(requestId, 'Cancelled')
 
-      let { blockNumber } = event
+      let { blockNumber } = event.log
       if (onRequestCancelled) {
         onRequestCancelled(blockNumber, requestId)
       }
@@ -193,7 +198,7 @@ export const useRequestsStore = defineStore('request', () => {
       updateRequestState(requestId, 'Failed')
       cancelWaitForRequestFinished(requestId)
 
-      let { blockNumber } = event
+      let { blockNumber } = event.log
       if (onRequestFailed) {
         onRequestFailed(blockNumber, requestId)
       }
@@ -201,7 +206,7 @@ export const useRequestsStore = defineStore('request', () => {
     marketplace.on(SlotFreed, async (requestId, slotIdx, event) => {
       updateRequestSlotState(requestId, slotIdx, 'Freed')
 
-      let { blockNumber } = event
+      let { blockNumber } = event.log
       if (onSlotFreed) {
         onSlotFreed(blockNumber, requestId, slotIdx)
       }
@@ -209,7 +214,7 @@ export const useRequestsStore = defineStore('request', () => {
     marketplace.on(SlotFilled, async (requestId, slotIdx, event) => {
       updateRequestSlotState(requestId, slotIdx, 'Filled')
 
-      let { blockNumber } = event
+      let { blockNumber } = event.log
       if (onSlotFilled) {
         onSlotFilled(blockNumber, requestId, slotIdx)
       }

src/utils/strings.js

@@ -0,0 +1,3 @@
+export function autoPluralize(amount, singular) {
+  return `${amount} ${amount == 1 ? singular : singular + 's'}`
+}

src/views/RequestView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useRequestsStore } from '@/stores/requests'
 import { useRoute } from 'vue-router'
@@ -8,15 +8,22 @@ import SkeletonLoading from '@/components/SkeletonLoading.vue'
 
 const requestsStore = useRequestsStore()
 const { requests, loading, fetched } = storeToRefs(requestsStore)
-const isLoading = computed(() =>
-  !fetched.value ||
-  loading.value ||
-  !requests.value ||
-  requests.value.size === 0 ||
-  !requests.value.has(route.params.requestId)
-)
-const request = computed(() => requests?.value?.get(route.params.requestId) )
 const route = useRoute()
+const isLoading = computed(
+  () =>
+    !fetched.value ||
+    loading.value ||
+    !requests.value ||
+    requests.value.size === 0 ||
+    !requests.value.has(route.params.requestId)
+)
+const requestId = ref(route.params.requestId)
+const request = ref(requests?.value?.get(requestId.value))
+function getRequestFromStore(_) {
+  request.value = requests?.value?.get(route.params.requestId)
+}
+watch(() => route.params.requestId, getRequestFromStore)
+watch(() => isLoading.value, getRequestFromStore)
 </script>
 
 <template>