fix: empty state#2123
Conversation
All three Figma empty-state frames (vaults 11716:54592, loans 10044:14068, activity 10044:13346) are one spec, so the shared EmptyState now owns it: - the document-with-magnifier illustration is the Figma geometry, inlined with currentColor so it resolves text/secondary in both themes (the previous hand-drawn EmptyStateIcon was a different shape, and the /vaults <img> was pinned to the dark-theme grey in light mode) - 24px gaps, 4px title/body gap, 600px-capped centered copy, large orange CTA - /vaults gets the missing card surface (background/secondary, 16px radius, 24/40 padding, no border) Drops the now-redundant `icon` and `descriptionVariant` props and the public/images/vaults-empty.svg asset.
…empty states Both tabs reused the connected copy while disconnected, claiming the depositor had no loans / no BTC Vaults before any address had been read. They now show a title-only connect prompt, matching what the Activity tab already did; one `connectToView` builder in copy.ts keeps the three from drifting. On /vaults the deposits-paused notice still outranks the prompt, so a pause is visible without connecting first.
🔐 Commit Signature Verification✅ All 5 commit(s) passed verification
Summary
Required key type: Last verified: 2026-07-23 19:31 UTC |
Greptile SummaryThis PR unifies empty states across the Vaults, Loans, and Activity views. The main changes are:
Confidence Score: 5/5This looks safe to merge.
Important Files Changed
Reviews (1): Last reviewed commit: "fix(vault): prompt for a wallet on the d..." | Re-trigger Greptile |
gbarkhatov
left a comment
gbarkhatov
left a comment
There was a problem hiding this comment.
Approving — a clean, well-scoped consolidation of the v3 empty state onto a single surface. Dead code (the icon / descriptionVariant props, the standalone vaults-empty.svg, the barrel re-exports) is fully removed, and the disconnected copy is centralized via the connectToView builder. All comments below are non-blocking.
Verified as non-issues: the .bbn-card padding/border override works (core-ui's CSS is @imported before the app's @tailwind utilities, so equal-specificity app utilities win by source order); the disconnected-vs-paused precedence on Vaults is correct and newly tested; and every shared-EmptyState caller passes withCard, so dropping the non-card py-16 strands nothing.
The one thing worth confirming before merge is the first comment: the illustration is now always-on for icon-less callers, which pulls LiquidationAnalysisSection (out of scope, untested) into the new look.
Review caught that dropping the `icon` / `descriptionVariant` props leaked the
v3 look into surfaces this PR never meant to touch: the overview liquidation
panel gained the 94x101 illustration and a large CTA, and the reserve-detail
connect prompt gained the filled card and 16px description.
An explicit `variant` ("v3" default, "compact") restores both to what they
rendered before, with a test pinning the compact path so the default can't leak
again. Also: export ACTION_WIDTH_CLASS instead of re-inlining it in VaultsPage,
assert the Loans disconnected copy via COPY rather than a literal, and drop the
now-unused `className` prop from EmptyStateIcon.
That file declares its own local EmptyState — it never consumed the shared one, so applying `variant="compact"` there passed an unknown prop and failed `tsc -p tsconfig.lib.json`. The shared component is untouched by that surface, so there was nothing to restore; the file is now back to its pre-PR state. `compact` still covers the one real out-of-scope caller, the v2 reserve-detail connect prompt.
|
@jeremy-babylonlabs are comments resolved? |
Reconciles this branch with #2126 (pending-deposit vaults empty state), which extracted VaultsEmptyState and reused it via renderEmptyState in two placements. Conflict resolution: - VaultsEmptyState is rewritten onto this branch's new EmptyState API: it drops the removed `icon`/`descriptionVariant` props and the deleted vaults-empty.svg (the shared EmptyState now renders the Figma document illustration), uses the large CTA + shared ACTION_WIDTH_CLASS, and gains the disconnected title-only "Connect your wallet to view your BTC Vaults" copy. - The `withCard` param becomes `sectionPlacement`: the whole-page state renders on the standalone v3 empty-state card (the "missing div" this branch fixes, matching Loans/Activity), while #2126's pending-section placement keeps its bordered sibling-card surface untouched.
jonybur
left a comment
jonybur
left a comment
There was a problem hiding this comment.
Well-scoped consolidation. The icon prop and descriptionVariant are cleanly retired in favour of the variant split (v3 / compact), and every caller is updated. Dead assets go too: vaults-empty.svg deleted and EmptyStateIcon dropped from both the icons barrel and the shared re-export. EmptyStateIcon remains reachable only via direct import from EmptyState.tsx, its one consumer. The disconnected-vs-paused precedence on VaultsEmptyState is right — pause outranks the connect prompt so a depositor learns deposits are off without connecting first, pinned down by a dedicated test. Disconnected-title-only copy is centralised via connectToView(...) so the three tabs can't drift.
4 participants
unfied empty state UI for vault loan and activity tab