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
- Discuss adding
qrcode.react as a dependency in this issue before merging — it must be approved by a maintainer.
- Create
src/components/common/ReceiveAddressQR.tsx.
- Props:
address: string, size?: number (default 200), className?: string, showCopyButton?: boolean (default true).
- Render
<QRCodeSVG value={address} size={size} /> from qrcode.react.
- If
showCopyButton is true, render a <CopyableAddress address={address} /> below the QR code.
- Wrap the whole component in a
<figure> with <figcaption> showing the truncated address for screen readers.
- Export from
src/index.ts.
- Write tests: renders SVG element; renders copy button when
showCopyButton=true; hides copy button when false.
Definition of Done
Summary
Users need a way to display their Stellar public key as a QR code for easy scanning. This component wraps
qrcode.reactand adds a copy button.Implementation Steps
qrcode.reactas a dependency in this issue before merging — it must be approved by a maintainer.src/components/common/ReceiveAddressQR.tsx.address: string,size?: number(default200),className?: string,showCopyButton?: boolean(defaulttrue).<QRCodeSVG value={address} size={size} />fromqrcode.react.showCopyButtonis true, render a<CopyableAddress address={address} />below the QR code.<figure>with<figcaption>showing the truncated address for screen readers.src/index.ts.showCopyButton=true; hides copy button whenfalse.Definition of Done
<figure>/<figcaption>structure.