Skip to content

feat(landing): add TVL widget displaying live protocol metrics#870

Open
PrincesoDan wants to merge 4 commits into
mainfrom
claude/issue-869-20260515-1341
Open

feat(landing): add TVL widget displaying live protocol metrics#870
PrincesoDan wants to merge 4 commits into
mainfrom
claude/issue-869-20260515-1341

Conversation

@PrincesoDan

@PrincesoDan PrincesoDan commented May 15, 2026

Copy link
Copy Markdown
Contributor

Adds a live TVL widget to the landing page displaying Total TVL, Active Partners, and Vault count. Data is calculated dynamically using the same hooks as the partners page.

Closes #869

Generated with Claude Code

@github-actions @dantecorvid
feat(landing): add TVL widget displaying live protocol metrics
2bdc341 
Adds a glassmorphism-style TvlWidget to the landing page between the
PartnersSlider and Solutions sections. The widget displays Total TVL,
Active Partners, and Vault count — all calculated dynamically from the
same useVaults + useTokenPrices hooks used on the partners page.
Includes a loading skeleton state and a link to the partners page.

Closes #869

Co-authored-by: dantecorvid <dantecorvid@users.noreply.github.com>
@vercel

vercel Bot commented May 15, 2026 •
edited
Loading

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
defindex-dapp Ready Ready Preview, Comment May 15, 2026 7:06pm
defindex-landing Ready Ready Preview, Comment May 15, 2026 7:06pm
defindex-rust-docs Ready Ready Preview, Comment May 15, 2026 7:06pm

Request Review

@yripper

yripper commented May 15, 2026

Copy link
Copy Markdown
Collaborator

@claude add in this same repository a new commit... make the new addition responsive and remove "on Stellar" from "Live" it should look great on desktop, mobile and tablets

@claude

claude Bot commented May 15, 2026 •
edited
Loading

Copy link
Copy Markdown

Claude finished @yripper's task in 3m 10s —— View job

Changes committed

Tasks:

  • Gather context and read files
  • Remove "on Stellar" from "Live" text
  • Make TvlWidget fully responsive (mobile, tablet, desktop)
  • Commit and push changes

What changed in 3261fb4:

"on Stellar" removed — label now reads Live only.

Responsive layout overhaul:

Breakpoint Stats layout Font size Padding
Mobile < 640px grid grid-cols-3 — equal-width columns, no overflow text-xl (20px) px-5 py-6
Tablet ≥ 640px flex-row with visible dividers text-3xl (30px) sm:px-10 sm:py-8
Desktop ≥ 1024px flex-row with wider gaps text-4xl (36px) lg:px-12

Key fixes:

  • Mobile overflow fixed: replaced flex-row (which caused 3 stats to overflow on narrow screens) with grid grid-cols-3 — dividers collapse to display:none and don't occupy grid cells
  • Responsive skeleton: loading placeholder now h-7 w-16 on mobile, sm:h-9 sm:w-28 on tablet+
  • Responsive stat values: dropped the clamp(24px, 3vw, 36px) inline style (which rendered too small mid-range) in favour of explicit Tailwind steps
    · Branch preview

@github-actions @yripper
fix(landing): make TvlWidget responsive and remove "on Stellar" from …
3261fb4 
…label

- Change "Live on Stellar" to "Live"
- Replace flex-row stats layout with grid-cols-3 on mobile to prevent overflow
- Switch stats to sm:flex-row on tablet/desktop with dividers
- Use responsive Tailwind classes for stat value font sizes (text-xl / sm:text-3xl / lg:text-4xl)
- Adjust padding and gaps for mobile (px-5), tablet (sm:px-10), desktop (lg:px-12)
- Loading skeleton uses responsive sizing (h-7/w-16 mobile, sm:h-9/sm:w-28 desktop)

Co-authored-by: coderipper <yripper@users.noreply.github.com>
@yripper

yripper commented May 15, 2026

Copy link
Copy Markdown
Collaborator

@claude still not as responsive as i would like it to be...

image Check the "View all partners" text it gets lost on ipad mini to ipad. i think is better if we just remove that text entirely on mobile

@claude

claude Bot commented May 15, 2026 •
edited
Loading

Copy link
Copy Markdown

Claude finished @yripper's task in 47s —— View job

Changes committed

Tasks:

  • Gather context and read files
  • Find "View all partners" text in TvlWidget.tsx
  • Hide "View all partners" text on mobile screens
  • Commit and push changes

What changed in 3c2d82a:

Added hidden sm:block to the CTA wrapper div (TvlWidget.tsx line 168) — the "View all partners" link is now invisible on screens narrower than 640px (mobile) and reappears at sm breakpoint (640px+, covering iPad mini and larger tablets/desktops).
· Branch preview

@github-actions @yripper
fix(landing): hide 'View all partners' on mobile
3c2d82a 
Co-authored-by: coderipper <yripper@users.noreply.github.com>
@yripper

yripper commented May 15, 2026

Copy link
Copy Markdown
Collaborator

@claude last thing... just remove that text from 1000px and below

@claude

claude Bot commented May 15, 2026 •
edited
Loading

Copy link
Copy Markdown

Claude finished @yripper's task in 33s —— View job

Changes committed

Tasks:

  • Gather context
  • Read TvlWidget.tsx to find "View all partners" visibility class
  • Update breakpoint to hide text at 1000px and below
  • Commit and push changes

What changed in 3ddb0b2:

Updated TvlWidget.tsx line 168 — changed hidden sm:block → hidden lg:block. The "View all partners" link is now hidden on all screens up to 1024px (the standard Tailwind lg breakpoint, the closest to your 1000px target), and only appears on wider desktop screens.
· Branch preview

@github-actions @yripper
fix(landing): hide 'View all partners' on screens 1024px and below
3ddb0b2 
Co-authored-by: coderipper <yripper@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Add TVL widget to landing page

2 participants

@PrincesoDan @yripper