From ec703cea3f9c66d8eda142f4b9d3fef468ba6c38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Romanowicz?=
 <46789227+lukeromanowicz@users.noreply.github.com>
Date: Thu, 24 Aug 2023 18:05:18 +0200
Subject: [PATCH] feat: transactions live sync (#466)

---
 src/pages/transactions/[id].vue  | 43 ++++++++++++++++++++++++++------
 src/stores/transactionDetails.js | 13 ++++++----
 src/stores/webSocket.js          | 29 ++++++++++++++++++++-
 3 files changed, 72 insertions(+), 13 deletions(-)

diff --git a/src/pages/transactions/[id].vue b/src/pages/transactions/[id].vue
index 34ed44d06..f98eb4152 100644
--- a/src/pages/transactions/[id].vue
+++ b/src/pages/transactions/[id].vue
@@ -11,12 +11,15 @@
     </template>
   </page-header>
 
-  <template v-if="!isLoading">
-    <transaction-general-panel
-      v-if="transactionDetails"
-      class="transaction-details__panel"
-      :transaction-details="transactionDetails"/>
+  <loader-panel
+    v-if="isLoading"
+    class="transaction-details__panel"/>
+  <transaction-general-panel
+    v-else-if="transactionDetails"
+    class="transaction-details__panel"
+    :transaction-details="transactionDetails"/>
 
+  <template v-if="!isSyncing">
     <transaction-type-panel
       v-if="transactionTypeData"
       class="transaction-details__panel"
@@ -32,9 +35,11 @@
 
 <script setup>
 import { storeToRefs } from 'pinia'
+import { onBeforeRouteUpdate, onBeforeRouteLeave } from 'vue-router'
 import TransactionGeneralPanel from '@/components/TransactionGeneralPanel'
 import PageHeader from '@/components/PageHeader'
 import { useTransactionDetailsStore } from '@/stores/transactionDetails'
+import { useWebSocket } from '@/stores/webSocket'
 import { transactionsHints } from '@/utils/hints/transactionsHints'
 import TransactionTypePanel from '@/components/TransactionTypePanel'
 import TransactionPointersPanel from '@/components/TransactionPointersPanel'
@@ -44,11 +49,17 @@ const {
   transactionDetails,
   transactionTypeData,
 } = storeToRefs(transactionDetailsStore)
-const { fetchTransactionDetails } = transactionDetailsStore
+const {
+  fetchTransactionDetails,
+} = transactionDetailsStore
 const route = useRoute()
-
+const { subscribedTransactionId } = storeToRefs(useWebSocket())
 const { isLoading } = useLoading()
 
+await fetchTransactionDetails(route.params.id)
+
+const isSyncing = computed(() => isLoading.value || !transactionTypeData.value)
+
 try {
   await fetchTransactionDetails(route.params.id)
 } catch (error) {
@@ -64,6 +75,24 @@ try {
 
   throw error
 }
+
+if (process.client && !transactionTypeData.value) {
+  subscribedTransactionId.value = route.params.id
+
+  onBeforeRouteUpdate(
+    (_to, _from, next) => {
+      subscribedTransactionId.value = null
+      next()
+    },
+  )
+
+  onBeforeRouteLeave(
+    (_to, _from, next) => {
+      subscribedTransactionId.value = null
+      next()
+    },
+  )
+}
 </script>
 
 <style scoped>
diff --git a/src/stores/transactionDetails.js b/src/stores/transactionDetails.js
index a2e3abe62..445dbced7 100644
--- a/src/stores/transactionDetails.js
+++ b/src/stores/transactionDetails.js
@@ -38,9 +38,7 @@ export const useTransactionDetailsStore = defineStore('transactionDetails', () =
   }
 
   async function fetchTransactionTypeData(transactionId) {
-    const isCurrentKeyblock = blockHeight.value - rawTransactionDetails.value.blockHeight === 0
-
-    if (!isCurrentKeyblock) {
+    try {
       const { data: transactionData } = await axios.get(`${MIDDLEWARE_URL}/v2/txs/${transactionId}`)
 
       if (transactionData.tx.channelId) {
@@ -50,8 +48,8 @@ export const useTransactionDetailsStore = defineStore('transactionDetails', () =
       }
 
       transactionTypeData.value = transactionData.tx
-    } else {
-      transactionTypeData.value = rawTransactionDetails.value.tx
+    } catch {
+      transactionTypeData.value = null
     }
   }
 
@@ -70,11 +68,16 @@ export const useTransactionDetailsStore = defineStore('transactionDetails', () =
     transactionTypeData.value = null
   }
 
+  function updateTransactionTypeData(websocketMessage) {
+    transactionTypeData.value = websocketMessage.tx
+  }
+
   return {
     contractId,
     transactionDetails,
     transactionTypeData,
     fetchTransactionDetails,
     fetchContractIdByAccountId,
+    updateTransactionTypeData,
   }
 })
diff --git a/src/stores/webSocket.js b/src/stores/webSocket.js
index 028191760..42ee8ec70 100644
--- a/src/stores/webSocket.js
+++ b/src/stores/webSocket.js
@@ -2,13 +2,16 @@ import { defineStore } from 'pinia'
 import { useRuntimeConfig } from 'nuxt/app'
 import camelcaseKeysDeep from 'camelcase-keys-deep'
 import { useRecentBlocksStore } from '@/stores/recentBlocks'
+import { useTransactionDetailsStore } from '@/stores/transactionDetails'
 
 export const useWebSocket = defineStore('webSocket', () => {
   const { WEBSOCKET_URL } = useRuntimeConfig().public
   const { processSocketMessage } = useRecentBlocksStore()
+  const { updateTransactionTypeData } = useTransactionDetailsStore()
 
   const webSocket = shallowRef()
   const isSubscribedToKeyblockDetails = ref(false)
+  const subscribedTransactionId = ref(null)
 
   watch(isSubscribedToKeyblockDetails, newValue => {
     if (!webSocket.value || webSocket.value.readyState !== WebSocket.OPEN) {
@@ -22,6 +25,18 @@ export const useWebSocket = defineStore('webSocket', () => {
     }
   })
 
+  watch(subscribedTransactionId, (newTransactionId, oldTransactionId) => {
+    if (!webSocket.value || webSocket.value.readyState !== WebSocket.OPEN) {
+      return
+    }
+
+    if (newTransactionId) {
+      webSocket.value.send(`{"op":"Subscribe", "source": "mdw", "payload": "${newTransactionId}"}`)
+    } else {
+      webSocket.value.send(`{"op":"Unsubscribe", "source": "mdw", "payload": "${oldTransactionId}"}`)
+    }
+  })
+
   function initializeWebSocket() {
     webSocket.value = new WebSocket(WEBSOCKET_URL)
 
@@ -42,6 +57,10 @@ export const useWebSocket = defineStore('webSocket', () => {
       webSocket.value.send('{"op":"Subscribe", "source": "node", "payload": "MicroBlocks"}')
     }
 
+    if (subscribedTransactionId.value) {
+      webSocket.value.send(`{"op":"Subscribe", "source": "node", "payload": "${subscribedTransactionId.value}"}`)
+    }
+
     webSocket.value.onmessage = event => {
       processWebSocketData(event.data)
     }
@@ -52,11 +71,19 @@ export const useWebSocket = defineStore('webSocket', () => {
       return
     }
     const parsedData = camelcaseKeysDeep(JSON.parse(data))
-    await processSocketMessage(parsedData)
+    const isSpecificEntityMessage = parsedData.subscription === 'Object'
+    const isSubscribedTransactionMessage = parsedData.payload?.hash === subscribedTransactionId.value
+
+    if (isSpecificEntityMessage && isSubscribedTransactionMessage) {
+      updateTransactionTypeData(parsedData.payload)
+    } else {
+      await processSocketMessage(parsedData)
+    }
   }
 
   return {
     isSubscribedToKeyblockDetails,
+    subscribedTransactionId,
     initializeWebSocket,
   }
 })