From 12d80474d598ab3a7c19ae16b248e94af6a92c6c Mon Sep 17 00:00:00 2001
From: hassnian <44554284+hassnian@users.noreply.github.com>
Date: Tue, 21 Jan 2025 17:18:31 +0500
Subject: [PATCH 1/2] add(composables/useTrades.ts): `isExpired` based on 
 current blocknumber

---
 components/trade/TradeActivityTableRow.vue  |  9 +++--
 components/trade/TradeOwnerButton.vue       |  2 +-
 components/trade/overviewModal/Details.vue  |  3 +-
 composables/transaction/transactionOffer.ts |  4 ++-
 composables/useCurrentBlock.ts              | 39 +++++++++++++++++++++
 composables/useTrades.ts                    | 17 ++++-----
 6 files changed, 54 insertions(+), 20 deletions(-)
 create mode 100644 composables/useCurrentBlock.ts

diff --git a/components/trade/TradeActivityTableRow.vue b/components/trade/TradeActivityTableRow.vue
index bd635eb8cc..a3b0c3de79 100644
--- a/components/trade/TradeActivityTableRow.vue
+++ b/components/trade/TradeActivityTableRow.vue
@@ -75,12 +75,12 @@
     <div class="flex-1">
       <div class="h-[50px] flex items-center">
         <template v-if="trade.expirationDate">
-          <div v-if="isExpired">
+          <div v-if="trade.isExpired">
             <span>{{ $t('expired') }}</span>
           </div>
           <div v-else>
             <span>{{ format(trade.expirationDate, EXPIRATION_FORMAT) }}</span>
-            <span class="text-k-grey ml-3">({{ formatToNow(trade.expirationDate, isExpired) }})</span>
+            <span class="text-k-grey ml-3">({{ formatToNow(trade.expirationDate, trade.isExpired) }})</span>
           </div>
         </template>
         <span v-else>
@@ -147,12 +147,12 @@
         {{ blank }}
       </div>
       <template v-if="trade.expirationDate">
-        <div v-if="isExpired">
+        <div v-if="trade.isExpired">
           <span>{{ $t('expired') }}</span>
         </div>
         <div v-else>
           <span>{{ format(trade.expirationDate, EXPIRATION_FORMAT) }}</span>
-          <span class="text-k-grey ml-3">({{ formatToNow(trade.expirationDate, isExpired) }})</span>
+          <span class="text-k-grey ml-3">({{ formatToNow(trade.expirationDate, trade.isExpired) }})</span>
         </div>
       </template>
       <span v-else>
@@ -241,7 +241,6 @@ const image = ref()
 const animationUrl = ref()
 
 const isDesktop = computed(() => props.variant === 'Desktop')
-const isExpired = computed(() => props.trade.status === TradeStatus.EXPIRED)
 
 const isTradeCollection = computed(() => desiredType === TradeDesiredType.COLLECTION)
 const itemPath = computed(() => isTradeCollection.value ? `/${urlPrefix.value}/collection/${item.id}` : `/${urlPrefix.value}/gallery/${item.id}`)
diff --git a/components/trade/TradeOwnerButton.vue b/components/trade/TradeOwnerButton.vue
index f3e1bb7e73..ea00bf2dd7 100644
--- a/components/trade/TradeOwnerButton.vue
+++ b/components/trade/TradeOwnerButton.vue
@@ -61,7 +61,7 @@ const details = {
 }
 
 const buttonConfig = computed<ButtonConfig | null>(() => {
-  if (props.trade.status === TradeStatus.EXPIRED) {
+  if (props.trade.isExpired) {
     return isCreatorOfTrade.value
       ? {
           label: $i18n.t(details[props.trade.type].withdraw),
diff --git a/components/trade/overviewModal/Details.vue b/components/trade/overviewModal/Details.vue
index aaa354b998..869521ff69 100644
--- a/components/trade/overviewModal/Details.vue
+++ b/components/trade/overviewModal/Details.vue
@@ -19,7 +19,7 @@
         {{ $t('expiration') }}
       </span>
 
-      <span v-if="trade.status === TradeStatus.EXPIRED">
+      <span v-if="trade.isExpired">
         {{ $t('expired') }}
       </span>
       <span v-else>
@@ -45,7 +45,6 @@
 <script setup lang="ts">
 import { useIsTradeOverview } from './utils'
 import { formatToNow } from '@/utils/format/time'
-import { TradeStatus } from '@/composables/useTrades'
 import type { NFT } from '@/types'
 
 const props = defineProps<{
diff --git a/composables/transaction/transactionOffer.ts b/composables/transaction/transactionOffer.ts
index 178cf410ef..cdfc53ed78 100644
--- a/composables/transaction/transactionOffer.ts
+++ b/composables/transaction/transactionOffer.ts
@@ -17,7 +17,9 @@ export const getOfferCollectionId = (prefix: Prefix) => {
 
 export const OFFER_MINT_PRICE = 5e8
 
-export const BLOCKS_PER_DAY = 300 * 24 // 12sec /block --> 300blocks/hr
+export const SECONDS_PER_BLOCK = 12 // 12 sec/block
+const BLOCKS_PER_HOUR = (3600 / SECONDS_PER_BLOCK) // 300 blocks/hr
+export const BLOCKS_PER_DAY = BLOCKS_PER_HOUR * 24
 
 async function execMakingOffer(item: ActionOffer, api: ApiPromise, executeTransaction) {
   const { accountId } = useAuth()
diff --git a/composables/useCurrentBlock.ts b/composables/useCurrentBlock.ts
new file mode 100644
index 0000000000..85e44776bc
--- /dev/null
+++ b/composables/useCurrentBlock.ts
@@ -0,0 +1,39 @@
+import { SECONDS_PER_BLOCK } from '@/composables/transaction/transactionOffer'
+
+const currentBlock = ref(0)
+const interval = ref<NodeJS.Timeout>()
+const syncCount = ref(0)
+
+export default function useCurrentBlock() {
+  const { apiInstance } = useApi()
+
+  const getCurrentBlock = async () => {
+    const api = await apiInstance.value
+    const { number } = await api.rpc.chain.getHeader()
+    return number.toNumber()
+  }
+
+  const syncCurrentBlock = async () => {
+    currentBlock.value = await getCurrentBlock()
+  }
+
+  syncCount.value++
+
+  if (syncCount.value === 1) {
+    onBeforeMount(async () => {
+      await syncCurrentBlock()
+      interval.value = setInterval(syncCurrentBlock, SECONDS_PER_BLOCK * 1000)
+    })
+  }
+
+  onBeforeUnmount(() => {
+    syncCount.value--
+
+    if (syncCount.value === 0 && interval.value) {
+      clearInterval(interval.value)
+      interval.value = undefined
+    }
+  })
+
+  return currentBlock
+}
diff --git a/composables/useTrades.ts b/composables/useTrades.ts
index a5374bd2ba..4d7a12b8f9 100644
--- a/composables/useTrades.ts
+++ b/composables/useTrades.ts
@@ -64,6 +64,7 @@ export type TradeNftItem<T = Trade> = T & {
   type: TradeType
   desiredType: TradeDesiredType
   isEntireCollectionDesired: boolean
+  isExpired: boolean
 }
 
 export const TRADES_QUERY_MAP: Record<TradeType, { queryDocument: DocumentNode, dataKey: string }> = {
@@ -78,7 +79,6 @@ export const TRADES_QUERY_MAP: Record<TradeType, { queryDocument: DocumentNode,
 }
 
 const BLOCKS_PER_HOUR = 300
-const currentBlock = ref(0)
 
 export default function ({ where = {}, limit = 100, disabled = computed(() => false), type = TradeType.SWAP }: {
   where?: MaybeRef<Record<string, unknown>>
@@ -89,6 +89,8 @@ export default function ({ where = {}, limit = 100, disabled = computed(() => fa
   const { queryDocument, dataKey } = TRADES_QUERY_MAP[type]
 
   const { client } = usePrefix()
+  const currentBlock = useCurrentBlock()
+
   const variables = computed(() => ({
     where: unref(where),
     limit: limit,
@@ -116,23 +118,16 @@ export default function ({ where = {}, limit = 100, disabled = computed(() => fa
         offered: trade.nft,
         desiredType: desiredType,
         isEntireCollectionDesired: desiredType === TradeDesiredType.COLLECTION,
+        // Check block number to handle trades that are expired but not yet updated in indexer
+        // @see https://github.com/kodadot/stick/blob/9eac12938c47bf0e66e93760231208e4249d8637/src/mappings/utils/cache.ts#L127
+        isExpired: trade.status === TradeStatus.EXPIRED || currentBlock.value > Number(trade.expiration),
         type,
       } as TradeNftItem
     }) || []
   })
 
-  async function getCurrentBlock() {
-    const api = await useApi().apiInstance.value
-    const { number } = await api.rpc.chain.getHeader()
-    return number.toNumber()
-  }
-
   const loading = computed(() => !currentBlock.value || fetching.value)
 
-  if (!currentBlock.value) {
-    getCurrentBlock().then(b => currentBlock.value = b)
-  }
-
   return {
     items,
     loading,

From afa5f80208e78ff0e66d6673ed08ae2790eee807 Mon Sep 17 00:00:00 2001
From: hassnian <44554284+hassnian@users.noreply.github.com>
Date: Thu, 23 Jan 2025 18:49:15 +0500
Subject: [PATCH 2/2] ref(useCurrentBlock.ts): Subscribe to blocks with
 `subscribeNewHeads`

---
 composables/transaction/transactionOffer.ts |  4 +--
 composables/useCurrentBlock.ts              | 28 +++++++--------------
 2 files changed, 10 insertions(+), 22 deletions(-)

diff --git a/composables/transaction/transactionOffer.ts b/composables/transaction/transactionOffer.ts
index cdfc53ed78..178cf410ef 100644
--- a/composables/transaction/transactionOffer.ts
+++ b/composables/transaction/transactionOffer.ts
@@ -17,9 +17,7 @@ export const getOfferCollectionId = (prefix: Prefix) => {
 
 export const OFFER_MINT_PRICE = 5e8
 
-export const SECONDS_PER_BLOCK = 12 // 12 sec/block
-const BLOCKS_PER_HOUR = (3600 / SECONDS_PER_BLOCK) // 300 blocks/hr
-export const BLOCKS_PER_DAY = BLOCKS_PER_HOUR * 24
+export const BLOCKS_PER_DAY = 300 * 24 // 12sec /block --> 300blocks/hr
 
 async function execMakingOffer(item: ActionOffer, api: ApiPromise, executeTransaction) {
   const { accountId } = useAuth()
diff --git a/composables/useCurrentBlock.ts b/composables/useCurrentBlock.ts
index 85e44776bc..8c70df8692 100644
--- a/composables/useCurrentBlock.ts
+++ b/composables/useCurrentBlock.ts
@@ -1,37 +1,27 @@
-import { SECONDS_PER_BLOCK } from '@/composables/transaction/transactionOffer'
-
 const currentBlock = ref(0)
-const interval = ref<NodeJS.Timeout>()
+const subscription = ref()
 const syncCount = ref(0)
 
 export default function useCurrentBlock() {
   const { apiInstance } = useApi()
 
-  const getCurrentBlock = async () => {
-    const api = await apiInstance.value
-    const { number } = await api.rpc.chain.getHeader()
-    return number.toNumber()
-  }
-
-  const syncCurrentBlock = async () => {
-    currentBlock.value = await getCurrentBlock()
-  }
-
   syncCount.value++
 
-  if (syncCount.value === 1) {
+  if (!subscription.value) {
     onBeforeMount(async () => {
-      await syncCurrentBlock()
-      interval.value = setInterval(syncCurrentBlock, SECONDS_PER_BLOCK * 1000)
+      const api = await apiInstance.value
+      subscription.value = await api.rpc.chain.subscribeNewHeads((lastHeader) => {
+        currentBlock.value = lastHeader.number.toNumber()
+      })
     })
   }
 
   onBeforeUnmount(() => {
     syncCount.value--
 
-    if (syncCount.value === 0 && interval.value) {
-      clearInterval(interval.value)
-      interval.value = undefined
+    if (syncCount.value === 0 && subscription.value) {
+      subscription.value()
+      subscription.value = undefined
     }
   })