fix(tangle-cloud): scroll reset + indexer empty-state + sidebar rename#3221
Merged
Conversation
Three small but visible UX fixes from a staging walkthrough. None of
these touch layout or data — they remove three sources of visual
friction without any behavior change.
## 1. Scroll-to-top on route change
`<BrowserRouter>` is scroll-naive: navigating from a long blueprints
listing to /rewards lands the next page already scrolled to wherever
the previous page was. New `ScrollToTop` component mounts inside the
router tree, listens to `pathname` changes, and `window.scrollTo({top:
0, behavior: 'instant'})` so the new page paints at the top.
Pathname-only dependency is deliberate — we don't scroll on search
params or hash changes (those drive in-page tab state).
## 2. Claim history "Could not load" → empty state
When `VITE_ENVIO_TESTNET_ENDPOINT` is unset (current staging case —
there is no hosted Envio indexer for Base Sepolia yet), the rewards
page rendered a red `<ErrorMessage>Could not load claim history.`
banner on every load. That's the UX equivalent of a 500, but the
actual cause is "no historical data source configured", which is a
legitimate empty state, not a failure.
Replace the error branch with a neutral `<EmptyState>` titled "Claim
history unavailable on this network" — same code path, gentler tone,
keeps the page usable instead of alarming.
(Restoring real history requires standing up Envio against the new
Base Sepolia deployment — tracked separately. Pending-rewards via
direct contract reads is unaffected and continues to render.)
## 3. Sidebar: "Payments" → "Private Payments"
The shielded-credits / RLN-settlement surface lives there. "Payments"
on its own reads as a generic ledger; the shielded-billing aspect is
the distinguishing feature, so surface it in the label.
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.
Three fixes shipped in this PR
<ScrollToTop>mounted inside the router.develop.cloud.tangle.tools). Now renders a neutral empty state.Sanity:
yarn nx build tangle-cloudclean. No layout / data changes.What this PR explicitly does NOT do
These are the bigger, real UX issues you flagged. Each becomes its own PR. The plan below lists 5 alternatives per surface, picks the strongest, and queues them in execution order.
Tangle Cloud — design / UX roadmap (post staging walkthrough)
Driven by a real walkthrough of
develop.cloud.tangle.tools. Current rating: 2/10. Target: 10/10. Approach: mirror what's working in the staking dapp'stangle-dapp/src/pages/dashboard.tsxand the shared@tangle-network/ui-componentsprimitives the staking app uses — and stop hand-rolling junior-Figma-style nested transparent cards.Component 1 — Home / Instances page (currently 2/10)
Symptoms: huge "Instances" hero card with nothing useful in it, then a tiny services strip, then a 2-column account-stats + "Instructions" grid, then a TVL block. The user has to scan past the marketing copy before reaching anything actionable. There's no token balance, no pending rewards summary, no "what should I do next" hierarchy.
Five alternatives:
tangle-dapp/dashboard.tsxdirectly. Two-col hero (AccountSummaryCard+ProtocolStatisticCard) → token breakdown card → "Your Position" table → "Available Blueprints" table. This is the proven layout in the staking app. Use the same components where the import resolves cleanly.Pick: 1 with elements of 4. Mirror the staking dashboard layout (proven, components exist, consistent with the rest of the org) and add a single "Next steps" card at the top of the right column. Trim the InstructionCard to a one-line link in the footer.
Component 2 — Account / "My deposits" component (currently 0/10)
Symptoms: "My deposits" sounds like the user has deposits to claim, but clicking it dumps the user to the staking app entirely. Information hierarchy is wrong — quick actions are buried in two columns at the bottom; the user wants account state on top.
Five alternatives:
AccountSummaryCardfrom staking-app. Wallet badge, TNT balance, USDC balance, pending rewards, all in one tight card. Quick actions become icon buttons in the card's footer (Stake / Withdraw / Claim)./staking.Pick: 1 + 2. Reuse the staking app's
AccountSummaryCardshape, rename "deposits" → "wallet/stake/rewards". Keep quick-action icon buttons but move them to the card footer, not a separate component.Component 3 — Blueprints page ("delete the whole thing")
Symptoms: top-level filters are "Catalog / Owned / Role / Operator" — incomprehensible. "Owned" is undefined. "Role" is incoherent because an account has multiple roles. Empty state literally renders "0 Catalog, 0 Owned, 0 Role, 0 Operator" — zero information value.
Five alternatives:
externalApp.urlis set. Filter chips below for category (AI / Inference / Trading / Storage / MPC). Search bar at top-right.Pick: 1 + 2. Single grid + a single Catalog/Your-services toggle. Drop Owned and Role entirely.
Component 4 — Operators page (currently slow, weak empty state)
Symptoms: 5-10s blank page before any data renders. No skeleton, no "loading...". When data eventually arrives, it's a low-info table.
Five alternatives:
Pick: 1 + 4. Skeleton-first rendering + React Query staleTime 60s. Cheap, high impact.
Component 5 — Visual aesthetic / component hierarchy (currently glassy/transparent same-color nesting)
Symptoms: components are wide bg-card boxes nested inside more bg-card boxes — no visual hierarchy. Junior-Figma vibes vs the staking app's clean rhythm.
Five alternatives:
@tangle-network/ui-componentsCard / Typography / Layout primitives. Same components the staking app uses — already designed to layer properly.<Typography variant="h4" fw="bold">for section heads, consistent body text size. Stop using arbitrarytext-3xl tracking-[-0.035em]per page.Pick: 1 + 5. Migrate to shared
@tangle-network/ui-components, take the staking app's type ramp.Execution sequence (one PR per phase, in order)
Phase 1 (this PR): Scroll reset, claim-history empty state, Payments → Private Payments.
Phase 2: Home page mirrors
tangle-dapp/dashboard.tsx. Two-colAccountSummaryCard+ProtocolStatisticCardhero, token breakdown card, "Your Position" services table, "Available Blueprints" table at the bottom. Drop the existing hero gradient + InstructionCard.Phase 3: Account component — reuse
AccountSummaryCardshape from staking. Rename "deposits" → "wallet/stake/rewards" in copy. Quick-action icon buttons in card footer.Phase 4: Blueprints page — single catalog grid + Catalog ↔ Your services toggle. Drop Owned + Role. Add category chips + search.
Phase 5: Operators page — skeleton-first rendering + React Query 60s staleTime.
Phase 6: Visual polish — migrate cards/typography to shared
@tangle-network/ui-components. Three-level surface system. Drop gradient backdrops.Phase 7 (infra, separate from UI): Stand up Envio indexer for Base Sepolia (or wire to a hosted one), set
VITE_ENVIO_TESTNET_ENDPOINTin staging Netlify env, and replace the Phase-1 empty state with real claim history.I'll execute Phase 2 next (home page restructure) once this lands.