[RELEASE] chore: parallel UX polish on tangle-dapp + leaderboard (indexer-unavailable handling)#3211
Merged
Merged
Conversation
…d states on dashboard
When the Envio indexer returns 5xx (current Cloudflare 520/521 condition on
mainnet-gql / testnet-gql), the dashboard's "Now Live: Season 1" card rendered
a row of EMPTY_VALUE_PLACEHOLDER dashes for Stakers / Operators, the
"Your Position" card showed a single-line "No positions yet" with no context,
and the "Stake Assets" table fell back to "No staking assets are configured
for this network" which reads as a misconfiguration rather than a transient
indexer outage. Three surfaces, one root cause, three honest empty states.
ProtocolStatisticCard
- Read `error`/`refetch` from `useOperators` + `useDelegatorCount` and
`isHealthy`/`checkHealth` from `IndexerStatusContext`. When the indexer is
unhealthy (or the delegator count query errored, or operators errored with
an empty on-chain fallback), surface a single muted line "Network data
temporarily unavailable. Retrying automatically." with an IconButton retry
that re-runs the health check and both queries.
- Pass `error` through to the Stakers/Operators `StatsItem`s so their values
render as EMPTY_VALUE_PLACEHOLDER in the muted color rather than the bad
`error.name` fallback (which previously printed literal "Error").
StatsItem
- Replace the `error.name` value with a muted EMPTY_VALUE_PLACEHOLDER so a
failed stat reads as "unknown" rather than printing the class name.
UserStakingOverview
- Split the wallet-connected vs wallet-disconnected empty state: connected
users see "No active positions — deposit a supported asset below to start
earning"; disconnected users see "Connect a wallet to view your positions"
with a clarifying note that the asset catalog below loads without a wallet.
Both wrap a WalletLineIcon-prefixed card consistent with the rest of the
dashboard's glass styling — no four-cell pseudo-grid.
StakingAssetsTable
- When `tableData` is empty AND `IndexerStatusContext.isHealthy === false`,
render a "Network data temporarily unavailable" status with copy that
differs by wallet-connected state (connected: just wait; disconnected:
connect a wallet to read directly from chain). Keeps the "No stake assets"
message only for the genuine misconfiguration case.
Verified
- `yarn nx run tangle-dapp:typecheck --skip-nx-cache` clean
- `yarn nx run tangle-dapp:lint --skip-nx-cache` clean
- `yarn nx run tangle-dapp:build --skip-nx-cache` clean; new strings
("Network data temporarily unavailable", "Retrying automatically",
"Connect a wallet to view your positions") present in the production bundle
…f perpetual spinner When the Envio indexer is unreachable (Cloudflare 5xx, network failure, DNS, CORS, etc.) the leaderboard now renders an actionable empty state with the underlying error and a Retry button, rather than spinning on "Loading..." while React Query burns retry budget against a dead origin. - executeEnvioGraphQL throws a typed EnvioRequestError that captures the HTTP status (0 for network failure) so callers can short-circuit retry loops on origin outages. - useLeaderboard, useRoleAccounts, useRoleCounts, and useIndexingProgress skip retries on EnvioRequestError-style failures and pause their refetchInterval once the cached query is in an error state. Polls resume on the next successful fetch (i.e. the user-triggered Retry). - LeaderboardTable detects the unavailable-indexer error class and swaps the empty-state copy from a generic "try again later" to "Leaderboard data is temporarily unavailable" with the captured message; the inline stale-data overlay uses the same wording. - Drive-by: fix the leaderboard Navbar "Launch dApp" anchor so it uses target="_blank" with rel="noopener noreferrer" (was target="blank").
…exer-unavailable handling) Wrapper [RELEASE] commit so auto-sync promotes both agent commits below to master in one go. Two parallel agents shipped this work concurrently: - 1e90ca8 chore(tangle-dapp): graceful indexer-unavailable + wallet-disconnected states on dashboard. Wires error/refetch from useOperators + useDelegatorCount through ProtocolStatisticCard so the 'Now Live: Season 1' card reads as 'transient outage' instead of blank '— / —' when the Envio indexer is offline. Splits UserStakingOverview + StakingAssetsTable empty states by isConnected so disconnected visitors see useful copy, not just '0 positions'. Stayed in @tangle-network/ui-components (Card/Typography/IconButton/TableStatus) — no sandbox-ui leaked into apps/tangle-dapp/. - 5414be2 chore(leaderboard): surface indexer-unavailable empty state instead of perpetual spinner. executeEnvioGraphQL now throws a typed EnvioRequestError with HTTP status (0 for network/CORS/DNS failures); useLeaderboard / useRoleAccounts / useRoleCounts / useIndexingProgress skip retry and pause refetchInterval on 5xx/network errors instead of burning 7s of exp-backoff. LeaderboardTable error branch now wins over isPending so the spinner can no longer get stuck behind a perpetually-pending query. Fixed a real bug while there: Launch-dApp button had target='blank' (literal string) instead of target='_blank' rel='noopener noreferrer'. Verified: yarn typecheck, yarn lint, yarn build:tangle-dapp, yarn build:leaderboard all clean on the post-commit tree.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Parallel polish pass on tangle-dapp and leaderboard so both apps stop reading as "broken" when the Envio indexer is offline (current state of `mainnet-gql.tangle.tools` and `testnet-gql.tangle.tools` → CF 520/521). Same playbook as the tangle-cloud polish in #3210 — graceful empty states, honest copy, no fake "Locked" pseudo-grids — applied here.
Two parallel subagents wrote the two app passes concurrently; this PR squashes them together.
tangle-dapp
leaderboard
Verification
`[RELEASE]` tag → auto-sync workflow promotes to master on merge.