feat: Live update transaction details (#569)

aeternity · Nov 15, 2023 · f80dda8 · f80dda8
1 parent 74321b7
commit f80dda8
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/src/stores/recentBlocks.js b/src/stores/recentBlocks.js
@@ -19,6 +19,7 @@ export const useRecentBlocksStore = defineStore('recentBlocks', () => {
   const rawSelectedMicroblockTransactions = ref(null)
   const rawSelectedKeyblock = ref(null)
   const rawSelectedMicroblock = ref(null)
+  const blockHeight = ref(null)
 
   const selectedKeyblock = computed(() => {
     return adaptKeyblock(rawSelectedKeyblock.value || keyblocks.value?.[0])
@@ -57,9 +58,6 @@ export const useRecentBlocksStore = defineStore('recentBlocks', () => {
   const latestKeyblockTransactionsCount = computed(() => {
     return keyblocks.value?.[0].transactionsCount
   })
-  const blockHeight = computed(() => {
-    return keyblocks.value?.[0].height
-  })
 
   /* USER INTERACTION */
 
@@ -94,6 +92,11 @@ export const useRecentBlocksStore = defineStore('recentBlocks', () => {
   async function fetchKeyblocks() {
     const { data } = await axios.get(`${MIDDLEWARE_URL}/v2/key-blocks?&limit=${VISIBLE_KEYBLOCKS_LIMIT}`)
     keyblocks.value = data.data
+    blockHeight.value = data.data[0].height
+  }
+
+  function updateBlockHeight(websocketMessage) {
+    blockHeight.value = websocketMessage.height
   }
 
   // correct transactions and microblock count in past keyblocks to account for microfork changes
@@ -191,5 +194,6 @@ export const useRecentBlocksStore = defineStore('recentBlocks', () => {
     selectedMicroblock,
     selectedMicroblockTransactionsCount,
     selectedMicroblockTransactions,
+    updateBlockHeight,
   }
 })
diff --git a/src/stores/webSocket.js b/src/stores/webSocket.js
@@ -6,7 +6,7 @@ import { useTransactionDetailsStore } from '@/stores/transactionDetails'
 
 export const useWebSocket = defineStore('webSocket', () => {
   const { WEBSOCKET_URL } = useRuntimeConfig().public
-  const { processSocketMessage } = useRecentBlocksStore()
+  const { processSocketMessage, updateBlockHeight } = useRecentBlocksStore()
   const { updateTransactionTypeData } = useTransactionDetailsStore()
 
   const webSocket = shallowRef()
@@ -73,8 +73,11 @@ export const useWebSocket = defineStore('webSocket', () => {
     const parsedData = camelcaseKeysDeep(JSON.parse(data))
     const isSpecificEntityMessage = parsedData.subscription === 'Object'
     const isSubscribedTransactionMessage = parsedData.payload?.hash === subscribedTransactionId.value
+    const isSubscribedKeyblockMessage = parsedData.subscription === 'KeyBlocks'
 
-    if (isSpecificEntityMessage && isSubscribedTransactionMessage) {
+    if (isSubscribedKeyblockMessage) {
+      updateBlockHeight(parsedData.payload)
+    } else if (isSpecificEntityMessage && isSubscribedTransactionMessage) {
       updateTransactionTypeData(parsedData.payload)
     } else {
       await processSocketMessage(parsedData)