Skip to content

feat: add ReceiveAddressQR component using qrcode.react #4

Description

@rayeberechi

Summary

Users need a way to display their Stellar public key as a QR code for easy scanning. This component wraps qrcode.react and adds a copy button.

Implementation Steps

  1. Discuss adding qrcode.react as a dependency in this issue before merging — it must be approved by a maintainer.
  2. Create src/components/common/ReceiveAddressQR.tsx.
  3. Props: address: string, size?: number (default 200), className?: string, showCopyButton?: boolean (default true).
  4. Render <QRCodeSVG value={address} size={size} /> from qrcode.react.
  5. If showCopyButton is true, render a <CopyableAddress address={address} /> below the QR code.
  6. Wrap the whole component in a <figure> with <figcaption> showing the truncated address for screen readers.
  7. Export from src/index.ts.
  8. Write tests: renders SVG element; renders copy button when showCopyButton=true; hides copy button when false.

Definition of Done

  • QR code renders as SVG.
  • Copy button conditionally rendered.
  • Accessible <figure> / <figcaption> structure.
  • Dependency approved and pinned to exact version.
  • Tests pass.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Fields

    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