Skip to content

feat: Add QR code generation for stream sharing #153

Description

@Austinaminu2

Description

Users should be able to share streams easily, especially in person or via mobile. Adding QR code generation for stream URLs enables:

  • Quick sharing at in-person events (hackathons, conferences)
  • Easy mobile-to-mobile stream viewing
  • Print-friendly stream receipts

Proposed Solution

Add a "Share" button on the stream detail page that generates a QR code containing the stream URL. Use a lightweight library like qrcode.react or qr-code-styling.

Design

On the stream detail page, the share button opens a modal with:

  • QR code image (SVG for crisp rendering)
  • Stream URL with copy button
  • Download QR as PNG button
  • Basic stream info below the QR (amount, recipient, status)

Acceptance Criteria

  • "Share" button on stream detail page generates a QR code
  • QR encodes the full stream URL (/app/stream/{id})
  • QR rendered as SVG for crisp display at any size
  • "Download QR" button saves a PNG
  • "Copy Link" button copies the stream URL to clipboard
  • QR modal is accessible (focus trap, keyboard dismissible)

Metadata

Metadata

Assignees

No one assigned

    Labels

    featureNew feature requestfrontendNext.js frontenduxUser experience improvement

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions