Skip to content

[NF-41] [FRONTEND] Embeddable Vault Widget #116

Description

@wumibals

Overview

There's no way for a third-party site (a partner, an ecosystem directory, a content creator) to embed a live YieldLadder vault card on their own page. This issue builds a small embeddable widget for exactly that.

Problem

The existing vault cards (on the landing page and dashboard) only exist as part of the main Next.js app — there's no standalone, iframe-embeddable version, and no distribution mechanism for third parties to showcase live YieldLadder data on their own sites.

Proposed Solution

  • New route app/src/app/embed/vault/[tier]/page.tsx, rendered with a minimal layout (no nav/footer, just the single vault card) suitable for embedding in an <iframe>.
  • Shows live APY and tier parameters using the same data hooks as the existing dashboard cards.
  • Includes a small "Powered by YieldLadder" attribution link back to the main site.
  • Publish embed instructions (an example <iframe> snippet with configurable width/height) on the /developers page (NF-31).
  • Set appropriate CSP/X-Frame-Options headers so the embed route specifically allows iframing while the rest of the app remains protected against clickjacking.

Acceptance Criteria

  • Embed route renders correctly inside a third-party <iframe> with no layout breakage
  • Live APY data matches what's shown on the main dashboard for the same tier
  • Attribution link is present and correctly points back to the main site
  • Only the embed route allows iframing — the rest of the app's existing frame protection is unaffected
  • Embed instructions are published on /developers (NF-31)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions