Following #4718 there are a few issues remaining with the validator dashboard:
1. Queries are broken by the Api proxy
This is why the #4718 preview is missing a lot data on each validator.
However this preview where the proxy has been disable should show all the data.
2. The dashboard header causes endless re-renders
This does not happen with the Api proxy but it's probably because some of the header queries (in useStakingStatistics) fail for the same reasons :point_up:. Without the proxy the constant re-renders make the page unusable.
I think there's several issues in useStakingStatistics
All the queries are subscribed to with useObservable: as a result they remain open. I think not all of them need to stay subscribed to. For these useFirstObservableValue is enough.
The result of a useObservable is used as a dependency for another useObservable. This will cause the second query to get unsubscribed and resubscribed to, which should be avoided.
The era statistic precision is a minute so I don't think synchronizing with the exact time from the chain with query.timestamp.now is necessary. Date.now and setInterval should be good enough.
Finally that's a detail but eraDuration is a constant so no need to return it in the hook result.
There might be other causes for the issue but I think that's a good start.
3. Sort by APR should be re-implemented
I think that's an important feature but I removed it in #4718 because it's a bit trickier to implement with the pagination.
I think the only way to implement this is to fetch details on all the validators when the sort by APR is set. So maybe there should be a loading animation the first time the sort happens.
4. Loading animation should be skeletons instead of spinners
This would be nice for consistency.
Scope
[ ] #4723
[ ] #4724
[ ] #4725
[ ] #4726
@eshark9312 I'll get started with #4723 (I'm not sure how long it will take), could you work on one of the other issues please ?
To work on #4724 and #4725 you will needed to set DISABLE_PROXY_API=true in packages/ui/.env (or manually run DISABLE_PROXY_API=true yarn start every time). You'll know if it works by checking the data in the list. It should look like this:
Context
> Design
Following #4718 there are a few issues remaining with the validator dashboard:
1. Queries are broken by the Api proxy
This is why the #4718 preview is missing a lot data on each validator. However this preview where the proxy has been disable should show all the data.
2. The dashboard header causes endless re-renders
This does not happen with the Api proxy but it's probably because some of the header queries (in
useStakingStatistics) fail for the same reasons :point_up:. Without the proxy the constant re-renders make the page unusable.I think there's several issues in
useStakingStatisticsuseObservable: as a result they remain open. I think not all of them need to stay subscribed to. For theseuseFirstObservableValueis enough.useObservableis used as a dependency for anotheruseObservable. This will cause the second query to get unsubscribed and resubscribed to, which should be avoided.query.timestamp.nowis necessary.Date.nowandsetIntervalshould be good enough.eraDurationis a constant so no need to return it in the hook result.There might be other causes for the issue but I think that's a good start.
3. Sort by APR should be re-implemented
I think that's an important feature but I removed it in #4718 because it's a bit trickier to implement with the pagination.
I think the only way to implement this is to fetch details on all the validators when the sort by APR is set. So maybe there should be a loading animation the first time the sort happens.
4. Loading animation should be skeletons instead of spinners
This would be nice for consistency.
Scope
@eshark9312 I'll get started with #4723 (I'm not sure how long it will take), could you work on one of the other issues please ?
To work on #4724 and #4725 you will needed to set
DISABLE_PROXY_API=trueinpackages/ui/.env(or manually runDISABLE_PROXY_API=true yarn startevery time). You'll know if it works by checking the data in the list. It should look like this: