ref(useCurrentBlock.ts): Subscribe to blocks with subscribeNewHeads

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()

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
     }
   })