fix: update Lottie component usage in QR code SDK

[prkumar]

I noticed that the SelfQRcode component's render method returns undefined when it reached the PROOF_VERIFIED or PROOF_GENERATION_FAILED states. Locally patching the component to use Lottie instead of Lottie.default fixed the issue.

Summary by CodeRabbit

• Refactor

  • SelfQRcodeWrapper is now a named export from the SDK. This is a breaking change; update your import syntax accordingly.

• Documentation

  • Updated README examples to reflect the new named import for SelfQRcodeWrapper.

[coderabbitai]

Walkthrough

• README updated to switch SelfQRcodeWrapper from default to named import reflecting a public export change.
• Component rendering updated to reference Lottie directly instead of Lottie.default in two states; no logic or flow changes.

Changes

Cohort / File(s)	Summary
Docs and public export alignment sdk/qrcode/README.md	Updated README import: SelfQRcodeWrapper is now a named export from @selfxyz/qrcode.
Component render import usage sdk/qrcode/components/SelfQRcode.tsx	Replaced Lottie.default with Lottie in two render cases; no behavioral or control-flow changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• feat: modernize sdk/qrcode build pipeline #872 — Also modifies sdk/qrcode public exports, changing SelfQRcodeWrapper from default to named export.

Suggested labels

codex

Suggested reviewers

• shazarre

Poem

A QR wink, a Lottie spin,
Exports shuffle, names drop in.
Docs now whisper how to call,
Wrapper stands beside them all.
Tiny tweak, the build stays bright—
Scan on, glow on, pixel light. ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title succinctly and accurately describes the primary fix, namely updating how the Lottie component is used within the QR code SDK, and it is clear and concise enough for a reviewer to understand the main change at a glance.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between da83215 and 71e0685.

📒 Files selected for processing (2)

• sdk/qrcode/README.md (1 hunks)
• sdk/qrcode/components/SelfQRcode.tsx (2 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

**/*.{js,ts,tsx,jsx,sol,nr}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{js,ts,tsx,jsx,sol,nr}: NEVER log sensitive data including PII (names, DOB, passport numbers, addresses), credentials, tokens, API keys, private keys, or session identifiers.
ALWAYS redact/mask sensitive fields in logs using consistent patterns (e.g., ***-***-1234 for passport numbers, J*** D*** for names).

Files:

• sdk/qrcode/components/SelfQRcode.tsx

sdk/**/*.{ts,tsx,js,jsx}

⚙️ CodeRabbit configuration file

sdk/**/*.{ts,tsx,js,jsx}: Review SDK packages for:

• Public API design and stability
• Asynchronous flows and error handling
• Security and input validation
• Compatibility across environments

Files:

• sdk/qrcode/components/SelfQRcode.tsx

🧠 Learnings (1)

📚 Learning: 2025-08-26T14:49:11.190Z

Learnt from: shazarre
PR: selfxyz/self#936
File: app/src/screens/passport/PassportNFCScanScreen.tsx:28-31
Timestamp: 2025-08-26T14:49:11.190Z
Learning: The main App.tsx file is located at app/App.tsx (not in app/src), and it properly wraps the entire app with SelfClientProvider at the top of the provider hierarchy, enabling useSelfClient() hook usage throughout all navigation screens.

Applied to files:

• sdk/qrcode/README.md

🔇 Additional comments (3)

sdk/qrcode/components/SelfQRcode.tsx (2)

98-106: LGTM! Correct usage of Lottie component.

The change from Lottie.default to Lottie aligns with the default import on line 3. This fixes the incorrect usage pattern.

---

109-117: LGTM! Consistent Lottie usage.

Same correction applied here for the success animation case.

sdk/qrcode/README.md (1)

18-21: Confirm named export adoption. No default imports of SelfQRcodeWrapper remain—breaking API change fully adopted.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[prkumar]

I noticed that the SelfQRcode component's render method returns undefined when it reached the PROOF_VERIFIED or PROOF_GENERATION_FAILED states. Locally patching the component to use Lottie instead of Lottie.default fixed the issue.

Summary by CodeRabbit

• Refactor

  • SelfQRcodeWrapper is now a named export from the SDK. This is a breaking change; update your import syntax accordingly.

• Documentation

  • Updated README examples to reflect the new named import for SelfQRcodeWrapper.

To clarify the CodeRabbit summary: SelfQRcodeWrapper was already a named export; this PR just updates the README to reflect that.