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
useStakingStatistics
useObservable
: as a result they remain open. I think not all of them need to stay subscribed to. For theseuseFirstObservableValue
is enough.useObservable
is used as a dependency for anotheruseObservable
. This will cause the second query to get unsubscribed and resubscribed to, which should be avoided.query.timestamp.now
is necessary.Date.now
andsetInterval
should be good enough.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
@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![image](https://github.com/Joystream/pioneer/assets/6571453/02cac4ac-a3ce-4b9d-9157-e173664004af)
DISABLE_PROXY_API=true
inpackages/ui/.env
(or manually runDISABLE_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: