Keep tab open

[bordalix]

Warn users to keep tab open if receiving in lightning

@tiero please review

Closes #193

Summary by CodeRabbit

• New Features

  • Added a persistent helper message when showing Lightning invoices reminding users to keep the tab open.

• Bug Fixes

  • Fixed React rendering attributes so styles and layout apply correctly across headers, footers, and rows.
  • Reworked the QR scanning flow with a new scanner implementation, improved camera detection, clearer error handling, and more reliable video-based scanning.

[coderabbitai]

Walkthrough

Replaces react-qr-reader with qr-scanner, adds a ScannerQr implementation with camera checks and error handling, corrects JSX class → className across components, and adds a Lightning invoice warning message in the receive QR code screen.

Changes

Cohort / File(s)	Summary
Dependency Update package.json	Replaces react-qr-reader (3.0.0-beta-1) with qr-scanner (^1.4.2)
JSX Attribute Fixes src/components/ButtonsOnBottom.tsx, src/components/Header.tsx, src/screens/Settings/Vtxos.tsx	Changes HTML class attributes to React className to correct JSX usage
Scanner Implementation src/components/Scanner.tsx	Removes ScannerReact/QrReader, introduces ScannerQr using qr-scanner; adds QrScanner.hasCamera check, video element rendering, decode handling (emit onData), error reporting (onError), start/stop/destroy lifecycle, and handleSwitch to stop scanning before mode switch
QR Code UI Enhancement src/screens/Wallet/Receive/QrCode.tsx	Adds conditional paragraph: "for Lightning you must keep this tab open all the time" above the QR code when an invoice is present

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant ScannerComponent as Scanner
    participant QrScannerLib as QrScanner
    participant VideoElement as Video

    User->>ScannerComponent: Open scanner (QR mode)
    ScannerComponent->>QrScannerLib: QrScanner.hasCamera()
    alt camera available
        QrScannerLib-->>ScannerComponent: true
        ScannerComponent->>VideoElement: render video element
        ScannerComponent->>QrScannerLib: new QrScanner(video, onDecode)
        QrScannerLib->>QrScannerLib: start()
        QrScannerLib->>ScannerComponent: onDecode(result)
        ScannerComponent->>User: call onData(result)
        ScannerComponent->>QrScannerLib: stop()/destroy()
    else no camera
        QrScannerLib-->>ScannerComponent: false
        ScannerComponent->>User: call onError(cameraUnavailable)
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Out of Scope Changes Check	⚠️ Warning		Consider separating the React attribute fixes (class to className corrections) into a dedicated bug-fix PR for clarity and maintainability. Additionally, clarify whether the QR scanner library migration and Scanner.tsx refactoring are essential supporting changes for this feature or should be handled in a separate PR focused on improving the scanner implementation. This separation will make the purpose of each PR more transparent and easier to review.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The pull request title "Keep tab open" is directly related to the main feature objective of adding a warning message for Lightning receives. The title clearly communicates the primary user-facing change implemented in the PR, specifically the new conditional message in QrCode.tsx that instructs users to "keep this tab open all the time" for Lightning transactions. While the title is somewhat brief and doesn't capture supporting changes like the QR scanner library swap or React attribute corrections, it meaningfully summarizes the core intent of the changeset from the user's perspective.
Linked Issues Check	✅ Passed	The pull request successfully implements the primary objective from linked issue #193. The changes in src/screens/Wallet/Receive/QrCode.tsx add a new conditional message stating "for Lightning you must keep this tab open all the time" when an invoice is present, which directly addresses the requirement to add a persistent banner or notice instructing users to keep the browser tab open when receiving funds over the Lightning network. This implementation fully satisfies the coding requirement specified in the linked issue.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch keep_tab_open

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d456cb8 and 654fd0a.

📒 Files selected for processing (1)

• src/screens/Wallet/Receive/QrCode.tsx (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• src/screens/Wallet/Receive/QrCode.tsx

---

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.}

[cloudflare-workers-and-pages]

Deploying wallet-signet with    Cloudflare Pages

Latest commit:	92e55c0
Status:	✅  Deploy successful!
Preview URL:	https://bb8722d4.wallet-23u.pages.dev
Branch Preview URL:	https://keep-tab-open.wallet-23u.pages.dev

View logs

[cloudflare-workers-and-pages]

Deploying wallet-mutinynet with    Cloudflare Pages

Latest commit:	92e55c0
Status:	✅  Deploy successful!
Preview URL:	https://4c48d556.arkade-wallet.pages.dev
Branch Preview URL:	https://keep-tab-open.arkade-wallet.pages.dev

View logs

[cloudflare-workers-and-pages]

Deploying wallet-bitcoin with    Cloudflare Pages

Latest commit:	92e55c0
Status:	✅  Deploy successful!
Preview URL:	https://70a58b34.wallet-bitcoin.pages.dev
Branch Preview URL:	https://keep-tab-open.wallet-bitcoin.pages.dev

View logs

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (2)

src/screens/Wallet/Receive/QrCode.tsx (1)

128-128: Improve message text and use consistent styling.

The warning message has minor text quality issues and should use the Text component for consistency with the rest of the codebase.

Apply this diff to improve the message:

-              {invoice ? <p>for Lightning keep this tab open</p> : null}
+              {invoice ? <Text centered>For Lightning payments, keep this tab open</Text> : null}

src/components/Scanner.tsx (1)

62-62: Consider reducing maxScansPerSecond for better performance.

Setting maxScansPerSecond: 1000 is excessive and may unnecessarily consume CPU resources. QR codes are typically scanned within 1-5 attempts per second.

Apply this diff to use a more reasonable value:

         {
-          maxScansPerSecond: 1000,
+          maxScansPerSecond: 5,
           highlightScanRegion: true,
           onDecodeError: () => {},
         },

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e7fdebd and d456cb8.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (6)

• package.json (1 hunks)
• src/components/ButtonsOnBottom.tsx (1 hunks)
• src/components/Header.tsx (1 hunks)
• src/components/Scanner.tsx (3 hunks)
• src/screens/Settings/Vtxos.tsx (1 hunks)
• src/screens/Wallet/Receive/QrCode.tsx (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/components/Scanner.tsx (6)

src/lib/error.ts (1)

• extractError (1-10)

src/components/Content.tsx (1)

• Content (9-16)

src/components/Padded.tsx (1)

• Padded (7-14)

src/components/Error.tsx (1)

• ErrorMessage (10-21)

src/components/ButtonsOnBottom.tsx (1)

• ButtonsOnBottom (10-26)

src/components/Button.tsx (1)

• Button (20-62)

🔇 Additional comments (6)

src/components/ButtonsOnBottom.tsx (1)

19-19: LGTM: Correct JSX attribute fix.

The change from class to className properly aligns with React/JSX conventions.

src/screens/Settings/Vtxos.tsx (1)

162-162: LGTM: Correct JSX attribute fix.

The change from class to className properly aligns with React/JSX conventions.

src/components/Header.tsx (1)

45-45: LGTM: Correct JSX attribute fix.

The change from class to className properly aligns with React/JSX conventions.

src/components/Scanner.tsx (2)

12-16: LGTM: Well-defined video styling.

The videoStyle constant is properly defined and provides consistent styling for the video element.

---

27-38: LGTM: Clean scanner implementation switching.

The implementation switching logic between qrscanner and mills is well-structured and allows users to switch between scanner implementations.

package.json (1)

26-26: No issues found—qr-scanner is current and has no security vulnerabilities.

The latest version of qr-scanner is 1.4.2, which matches the version specified in package.json. No security vulnerabilities were reported for this package. The dependency is in good standing and no updates are necessary.