feat: transactions live sync #466
Conversation
|
Deployed to https://pr-466-aescan.stg.aepps.com |
| ) | ||
|
|
||
| onBeforeRouteLeave( | ||
| (_to, _from, next) => { |
There was a problem hiding this comment.
These params are not needed I guess
There was a problem hiding this comment.
well... how else can I get to next without putting two placeholders first? :)
There was a problem hiding this comment.
Ok, I see now.
I quess this is not gonna work?
| (_to, _from, next) => { | |
| ({next}) => { |
But the _ prefix could be removed, right? Or why is there underscore?
There was a problem hiding this comment.
I'm afraid {next} won't work because the handler is passing each value as separate parameter. _ prefix is enforced by linter accordingly with best practices to mark unused yet necessary parameters with that prefix. Here is the docs: https://eslint.org/docs/latest/rules/no-unused-vars#argsignorepattern
src/stores/webSocket.js
Outdated
| @@ -52,11 +71,16 @@ export const useWebSocket = defineStore('webSocket', () => { | |||
| return | |||
| } | |||
| const parsedData = camelcaseKeysDeep(JSON.parse(data)) | |||
| await processSocketMessage(parsedData) | |||
| if (parsedData.subscription === 'Object' && parsedData.payload?.hash === subscribedTransactionId.value) { | |||
There was a problem hiding this comment.
Could this be explained via extra const binding?
There was a problem hiding this comment.
I tried my best but it was really hard to come up with the name for the first part half of that if statement
src/stores/transactionDetails.js
Outdated
| @@ -69,11 +67,16 @@ export const useTransactionDetailsStore = defineStore('transactionDetails', () = | |||
| transactionTypeData.value = null | |||
| } | |||
|
|
|||
| function processTransactionUpdate(message) { | |||
There was a problem hiding this comment.
the process prefix it's not really clear to me what it does or what it returns. Would it make sense to name it updateTransactionTypeData, or similar?
There was a problem hiding this comment.
I named it this way to preserve consistency with the other process function but sure, I don't have any strong preferences here. Updated accordingly with your recommendation
| @@ -52,11 +71,19 @@ export const useWebSocket = defineStore('webSocket', () => { | |||
| return | |||
| } | |||
| const parsedData = camelcaseKeysDeep(JSON.parse(data)) | |||
| await processSocketMessage(parsedData) | |||
| const isSpecificEntityMessage = parsedData.subscription === 'Object' | |||
There was a problem hiding this comment.
Could you explain this condition? Is it correct or was it supposed to be a typeof check?
There was a problem hiding this comment.
This is correct. You can subscribe to general entity type messages (e.g. Transactions, Microblocks...) or a specific entity e.g. transaction id. This is the second case. In this scenario the message.subscription is 'Object' and the payload is specific to the entity type you subscribed.
I struggled to figure out a good name for this so originally it was without extracting to a dedicated const.
|
@michele-franchi @lukeromanowicz thanks! I am wondering if it might be possible to make the loading spinner even more dynamic. some of the data shown in the details can already be obtained before the mdw is synced if I remember correctly 🤔 but already way better than before, thanks! =) |
|
@marc0olo we discussed that but it was hard to come up with a good design on short notice. This solution is a quick win and consistent with loading data everywhere else in the app. We'll for sure improve it once a better design is figured out and can be applied globally in the application. |
Description
Resolves #446 and Resolves #96
Adds loading indicator for transactions that have not been synced yet by the middleware
Demo
Because the MDW was heavily optimized recently, it's almost impossible to get a not synced transaction and redirect to the details page in time. Therefor I simulated this behavior in the demo.
2023-08-22.11-00-26.mp4
Checklist: